feat(registry): design-system registry infrastructure

.gitattributes

@@ -0,0 +1,4 @@
+# Normalize line endings to LF for all text files on every platform.
+# Prevents Windows autocrlf checkouts (CRLF) from failing `biome check`
+# (biome.json enforces lineEnding: "lf").
+* text=auto eol=lf

README.md

@@ -262,6 +262,81 @@ const customTranslation: Translation = {
 
 Use [`src/i18n/locales/en.ts`](https://github.com/lovasoa/jsonjoy-builder/blob/main/src/i18n/locales/en.ts) as the reference for all available keys.
 
+## Plugin Registry
+
+The `registry` prop lets you replace any UI component or layout slot with your own design-system adapter. It works on `<SchemaBuilder>`, `<SchemaFieldsEditor>`, and `<SchemaJsonEditor>`.
+
+### Replace leaf components
+
+```tsx
+import { SchemaBuilder } from "jsonjoy-builder";
+
+<SchemaBuilder
+  value={schema}
+  onChange={setSchema}
+  registry={{
+    components: {
+      Button: MyButton,   // any React component matching ButtonProps
+      Input: MyInput,
+      Switch: MySwitch,
+    },
+  }}
+/>
+```
+
+### Replace layout slots
+
+```tsx
+registry={{
+  slots: {
+    // Layout wrappers that receive children and visual metadata
+    FieldFrame: MyFieldFrame,
+    FieldHeader: MyFieldHeader,
+    FieldMain: MyFieldMain,
+    FieldActions: MyFieldActions,
+    FieldBody: MyFieldBody,
+  },
+  slotProps: {
+    // Extra props forwarded to each slot component
+    FieldFrame: { variant: "compact" },
+  },
+}}
+```
+
+### Integration with a design system
+
+```tsx
+// Wrap in your own ThemeProvider, pass adapters via registry
+import { ThemeProvider, Button, TextField, Switch } from "./design-system";
+
+const adapters = {
+  Button: (props) => <Button variant="contained" {...props} />,
+  Input: (props) => <TextField size="small" {...props} />,
+  Switch: (props) => <Switch {...props} />,
+};
+
+function MySchemaEditor() {
+  return (
+    <ThemeProvider>
+      <SchemaBuilder
+        registry={{ components: adapters }}
+        // ...
+      />
+    </ThemeProvider>
+  );
+}
+```
+
+### API reference
+
+| Prop | Type | Purpose |
+|---|---|---|
+| `registry.components` | `Partial<SchemaBuilderComponents>` | Replace leaf primitives (Button, Input, Switch, Badge, Label, ButtonToggle, SchemaDialog) |
+| `registry.slots` | `Partial<SchemaBuilderSlots>` | Replace layout wrappers (FieldFrame, FieldHeader, FieldMain, FieldActions, FieldBody, Root, MobileModeSwitch, FullscreenToggle) |
+| `registry.slotProps` | `Partial<Record<string, Record<string, unknown>>>` | Extra props for each slot |
+
+All public types carry `/** @public */` and are exported from the package entry point.
+
 ## Supported Schema Features
 
 The visual editor covers the common schema authoring flow:

demo/App.tsx

@@ -1,5 +1,38 @@
+import { useState } from "react";
 import Index from "./pages/Index.tsx";
+import MuiRegistry from "./pages/MuiRegistry.tsx";
 
-const App = () => <Index />;
+type Page = "default" | "mui";
+
+const NAV: { id: Page; label: string }[] = [
+  { id: "default", label: "Default" },
+  { id: "mui", label: "MUI Registry" },
+];
+
+const App = () => {
+  const [page, setPage] = useState<Page>("default");
+
+  return (
+    <>
+      <nav className="jsonjoy sticky top-0 z-50 flex gap-1 border-b border-border/40 bg-background/90 px-4 py-2 backdrop-blur-sm">
+        {NAV.map(({ id, label }) => (
+          <button
+            key={id}
+            type="button"
+            onClick={() => setPage(id)}
+            className={
+              page === id
+                ? "rounded-md px-3 py-1.5 text-sm font-medium bg-primary text-primary-foreground"
+                : "rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
+            }
+          >
+            {label}
+          </button>
+        ))}
+      </nav>
+      {page === "default" ? <Index /> : <MuiRegistry />}
+    </>
+  );
+};
 
 export default App;