@petrarca/sonnet-playground 0.5.0 → 0.7.0

package/README.md

@@ -1,21 +1,30 @@
 # @petrarca/sonnet-playground
 
-Playground framework and built-in component demos for the Petrarca Sonnet
-component library.
+The living reference for the Petrarca Sonnet component library: a registry of
+demonstration pages and a factory that turns it into a `ShellModule`. It is a
+library, not a hosted site -- you mount it in your own application and get a
+working component reference inside your own build
+([ADR-0005](../../docs/adr/0005-the-playground-is-the-living-documentation.md)).
 
-## What's included
+## What it provides
 
-**Playground framework** — Registry, overview tile grid, and `createPlaygroundModule()`
-factory. Wire a playground into any `sonnet-shell` app with a few lines.
+**A registry.** `PlaygroundRegistry` and `createPlaygroundRegistry`, which
+returns one pre-populated with the built-in entries. Register your own pages
+beside them, grouped under a label you choose.
 
-**Built-in demos** — Pre-built showcase pages for all Sonnet components:
-Typography, Color Palette, Core UI, Advanced Components, JSON Editor, Forms,
-Form Components, Form Widgets, Data Components, Graph Visualization, Shell API.
+**A module factory.** `createPlaygroundModule` turns a registry into a
+`ShellModule` with an overview page, generated routes and navigation, ready to
+pass to `createModuleRegistry`.
 
-**PlaygroundSection** — Shared section wrapper (`default` and `card` variants)
-used by all playground pages.
+**Twelve built-in pages**, each lazily loaded: Typography and Color Palette
+under Design System; Core UI Components, Advanced Components and JSON Editor
+under Components; Form Components, Forms Renderer and Form Widgets under Forms;
+Schema Designer under Schemas; Data Components under Data; Graph Visualization
+under Graph; Shell API under Shell.
 
----
+**Page building blocks.** `PlaygroundSection` for consistent section chrome,
+`PlaygroundOverview` for the tile grid, and the playground settings provider,
+hook and panel.
 
 ## Install
 
@@ -23,120 +32,73 @@ used by all playground pages.
 pnpm add @petrarca/sonnet-playground
 ```
 
-Peer dependencies: `react`, `react-dom`, `@petrarca/sonnet-shell`,
-`@petrarca/sonnet-ui`, `@petrarca/sonnet-forms`, `@petrarca/sonnet-graph`.
+That single install pulls in all six other `@petrarca/sonnet-*` packages --
+`sonnet-core`, `sonnet-ui`, `sonnet-forms`, `sonnet-shell`, `sonnet-graph` and
+`sonnet-schema-designer` -- as regular dependencies, because the pages import
+from every one of them.
 
----
-
-## Basic usage
-
-```ts
-// src/modules/playground/index.ts
-import {
-  createPlaygroundRegistry,
-  createPlaygroundModule,
-} from "@petrarca/sonnet-playground";
-
-const registry = createPlaygroundRegistry();
-
-// Optionally add app-specific pages:
-registry.register({
-  id: "app.my-page",
-  title: "My Page",
-  description: "Custom demo page.",
-  icon: SomeIcon,
-  color: "teal",
-  path: "my-page",
-  component: React.lazy(() => import("./pages/MyPage")),
-  group: "App",
-  order: 0,
-});
-
-export default createPlaygroundModule(registry);
-```
-
-```ts
-// src/modules/registry.ts
-import { createModuleRegistry } from "@petrarca/sonnet-shell";
-import home from "./home";
-import playground from "./playground";
-
-export const registry = createModuleRegistry([
-  home,
-  playground, // pinBottom: true is set automatically by createPlaygroundModule
-]);
-```
-
-`createPlaygroundModule` returns a `ShellModule` — pass it directly to
-`createModuleRegistry` alongside your app's own modules.
-
----
+| Peer | Range | Needed for |
+|---|---|---|
+| `react`, `react-dom` | `>=19` | Everything |
+| `react-router-dom` | `>=7` | The generated routes and the layout outlet |
+| `tailwindcss` | `>=3` | Every page's styling |
 
-## Adding app-specific pages
+Those dependencies carry further peers of their own, and some that are only
+optional down there are required here -- the graph page needs every renderer
+peer, and the JSON editor page needs CodeMirror. Getting that wrong shows up as
+one page throwing rather than as an install error. See
+[getting started](docs/usage/getting-started.md).
 
-Register your own pages alongside the built-in demos by calling
-`registry.register()` before passing the registry to `createPlaygroundModule`.
-Pages appear in the overview tile grid grouped under your chosen `group` label.
+## Usage
 
 ```ts
 // src/modules/playground/index.ts
 import { lazy } from "react";
-import { Search } from "lucide-react";
+import { Boxes } from "lucide-react";
 import {
-  createPlaygroundRegistry,
   createPlaygroundModule,
+  createPlaygroundRegistry,
 } from "@petrarca/sonnet-playground";
 
 const registry = createPlaygroundRegistry();
 
-// Register app-specific pages
 registry.register({
-  id: "app.my-widget",
-  title: "My Widget",
-  description: "Interactive demo of MyWidget with live configuration.",
-  icon: Search,
+  id: "app.widgets",
+  title: "Widgets",
+  description: "Interactive demo of the Widget components.",
+  icon: Boxes,
   color: "teal",
-  path: "my-widget",
-  component: lazy(() => import("./pages/PlayMyWidget")),
-  group: "App Components",  // appears as a group heading in the overview
+  path: "widgets",
+  component: lazy(() => import("./pages/PlayWidgets")),
+  group: "App Components",
   order: 0,
 });
 
 export default createPlaygroundModule(registry);
 ```
 
-Pages are lazy-loaded automatically — wrap the component in `React.lazy()`
-as shown above. The framework handles the `Suspense` boundary.
+`createPlaygroundModule` returns a `ShellModule`, so it goes into
+`createModuleRegistry` alongside your own modules. Its options are `icon`,
+`label`, `basePath`, `overviewTitle`, `overviewSubtitle` and `grouped`; the
+defaults are `FlaskConical`, `"Playground"`, `"/playground"`,
+`"Developer Playground"`, `"Experiment with components, test features, and
+explore capabilities."` and `true`.
 
-`group` is optional. Pages without a group appear under the default group in
-the overview. Pages with the same `group` string are grouped together.
+Individual built-in pages are available from
+`@petrarca/sonnet-playground/pages` when you want one on a route of your own.
 
----
-
-## Pages subpath
-
-Individual built-in pages are available at `@petrarca/sonnet-playground/pages`
-for consumers who want to cherry-pick or re-export them:
-
-```tsx
-import { PlayTypography, PlayColorPalette } from "@petrarca/sonnet-playground/pages";
-```
-
----
-
-## createPlaygroundModule options
-
-| Option | Type | Default |
-|---|---|---|
-| `icon` | `LucideIcon` | `FlaskConical` |
-| `label` | `string` | `"Playground"` |
-| `basePath` | `string` | `"/playground"` |
-| `overviewTitle` | `string` | `"Developer Playground"` |
-| `overviewSubtitle` | `string` | `""` |
-| `grouped` | `boolean` | `true` |
+## Documentation
 
----
+- [Usage guides](docs/usage/index.md) -- getting started,
+  [adding pages](docs/usage/adding-pages.md) and
+  [embedding](docs/usage/embedding.md).
+- [Design docs](docs/design/index.md) -- the registry model and the page
+  contract.
+- [sonnet-shell: getting started](../sonnet-shell/docs/usage/getting-started.md)
+  -- the application frame this module plugs into.
+- [Workspace documentation](../../docs/README.md) -- how the packages layer and
+  the architecture decision records.
 
 ## License
 
-See [LICENSE.md](../../LICENSE.md).
+Apache 2.0. See [LICENSE.md](../../LICENSE.md).

package/dist/PlayAuth-SOEYPOOL.js

@@ -0,0 +1,8 @@
+import {
+  PlayAuth
+} from "./chunk-RYCRENYO.js";
+import "./chunk-C2EZ2ECG.js";
+export {
+  PlayAuth as default
+};
+//# sourceMappingURL=PlayAuth-SOEYPOOL.js.map

package/dist/{PlayCoreComponents-AG5D4SBS.js → PlayCoreComponents-YTEAS3GL.js}

@@ -1,8 +1,8 @@
 import {
   PlayCoreComponents
-} from "./chunk-Q6NLY2BZ.js";
+} from "./chunk-6WI3N7JI.js";
 import "./chunk-C2EZ2ECG.js";
 export {
   PlayCoreComponents as default
 };
-//# sourceMappingURL=PlayCoreComponents-AG5D4SBS.js.map
+//# sourceMappingURL=PlayCoreComponents-YTEAS3GL.js.map

package/dist/{PlayFormWidgets-IWJJQ5XL.js → PlayFormWidgets-6JYFRTAL.js}

@@ -1,8 +1,8 @@
 import {
   PlayFormWidgets
-} from "./chunk-DZB6WFHA.js";
+} from "./chunk-UB7462QG.js";
 import "./chunk-C2EZ2ECG.js";
 export {
   PlayFormWidgets as default
 };
-//# sourceMappingURL=PlayFormWidgets-IWJJQ5XL.js.map
+//# sourceMappingURL=PlayFormWidgets-6JYFRTAL.js.map

package/dist/PlayForms-L532W3JL.js

@@ -0,0 +1,7 @@
+import {
+  PlayForms
+} from "./chunk-I2FLG6ZD.js";
+export {
+  PlayForms as default
+};
+//# sourceMappingURL=PlayForms-L532W3JL.js.map

package/dist/PlayGraph-M4KQSFI7.js

@@ -0,0 +1,7 @@
+import {
+  PlayGraph
+} from "./chunk-E5X7GVLU.js";
+export {
+  PlayGraph as default
+};
+//# sourceMappingURL=PlayGraph-M4KQSFI7.js.map

package/dist/PlaySchemaDesigner-S4DBB53G.js

@@ -0,0 +1,7 @@
+import {
+  PlaySchemaDesigner
+} from "./chunk-2XMWOZ5O.js";
+export {
+  PlaySchemaDesigner as default
+};
+//# sourceMappingURL=PlaySchemaDesigner-S4DBB53G.js.map

package/dist/PlaySchemaDesigner-S4DBB53G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-PBT6HTKY.js → chunk-2XMWOZ5O.js}

@@ -86,6 +86,131 @@ var AUDIT_SCHEMA = {
     }
   }
 };
+var LOGIC_SCHEMA = {
+  title: "Checkout",
+  type: "object",
+  // A reusable definition referenced by $ref (shows read-only expansion).
+  $defs: {
+    Address: {
+      type: "object",
+      properties: {
+        street: { type: "string", title: "Street" },
+        city: { type: "string", title: "City" },
+        zip: { type: "string", title: "ZIP" }
+      }
+    }
+  },
+  "x-ui-order": [
+    "schema_version",
+    "amount",
+    "requires_approval",
+    "currency",
+    "expedited",
+    "delivery_window",
+    "gift_wrap",
+    "gift_message",
+    "shipping_address",
+    "note",
+    "payment"
+  ],
+  properties: {
+    // A $ref to the shared Address definition (read-only in the tree).
+    shipping_address: { $ref: "#/$defs/Address", title: "Shipping address" },
+    // A fixed value carried by every document (const authoring).
+    schema_version: {
+      type: "string",
+      title: "Schema version",
+      const: "checkout/v1"
+    },
+    amount: { type: "number", title: "Amount", minimum: 0 },
+    currency: {
+      type: "string",
+      title: "Currency",
+      enum: ["EUR", "USD", "GBP"]
+    },
+    expedited: { type: "boolean", title: "Expedited" },
+    gift_wrap: { type: "boolean", title: "Gift wrap" },
+    // Declarative visibility rule (x-ui-rule): declared at its own position,
+    // shown only when gift_wrap is checked. Contrast with the if/then/else
+    // fields above, which are structurally added by their conditionals.
+    gift_message: {
+      type: "string",
+      title: "Gift message",
+      "x-ui-rule": {
+        effect: "show",
+        condition: { scope: "/gift_wrap", schema: { const: true } }
+      }
+    },
+    // Nullable optional (anyOf [T, null]) -- the renderer unwraps to T.
+    note: {
+      title: "Note (optional)",
+      anyOf: [{ type: "string" }, { type: "null" }]
+    },
+    // A discriminated union (oneOf): the payment method.
+    payment: {
+      type: "object",
+      title: "Payment method",
+      discriminator: { propertyName: "kind" },
+      oneOf: [
+        {
+          title: "Card",
+          properties: {
+            kind: { const: "card" },
+            card_number: { type: "string", title: "Card number" },
+            cvc: { type: "string", title: "CVC" }
+          }
+        },
+        {
+          title: "Bank transfer",
+          properties: {
+            kind: { const: "bank" },
+            iban: { type: "string", title: "IBAN" }
+          }
+        },
+        {
+          title: "Cash",
+          properties: { kind: { const: "cash" } }
+        }
+      ]
+    }
+  },
+  required: ["amount", "currency"],
+  // Conditionals (if/then/else) authored as allOf members.
+  allOf: [
+    {
+      // Large amounts require an approval reference.
+      if: {
+        properties: { amount: { exclusiveMinimum: 1e3 } },
+        required: ["amount"]
+      },
+      then: {
+        properties: {
+          requires_approval: {
+            type: "string",
+            title: "Approval reference"
+          }
+        },
+        required: ["requires_approval"]
+      }
+    },
+    {
+      // Expedited orders ask for a delivery window; otherwise none.
+      if: {
+        properties: { expedited: { const: true } },
+        required: ["expedited"]
+      },
+      then: {
+        properties: {
+          delivery_window: {
+            type: "string",
+            title: "Delivery window",
+            enum: ["morning", "afternoon", "evening"]
+          }
+        }
+      }
+    }
+  ]
+};
 var AUDIT_EDITABLE_PATHS = [
   "/properties/metadata/properties",
   "/properties/actor/properties/metadata/properties",
@@ -120,11 +245,10 @@ var PROFILES = {
     schema: SAMPLE_SCHEMA,
     capabilities: { mode: "data", previews: [] }
   },
-  readonly: {
-    label: "Read-only",
-    description: "Fully locked -- view only, no edit affordances.",
-    schema: SAMPLE_SCHEMA,
-    readOnly: true,
+  logic: {
+    label: "Logic (variants + conditionals)",
+    description: "Shows every logic construct: a oneOf variant, if/then/else conditionals, a const field, and a nullable optional.",
+    schema: LOGIC_SCHEMA,
     capabilities: { previews: ["form", "table", "json", "capabilities"] }
   }
 };
@@ -188,4 +312,4 @@ function PlaySchemaDesigner() {
 export {
   PlaySchemaDesigner
 };
-//# sourceMappingURL=chunk-PBT6HTKY.js.map
+//# sourceMappingURL=chunk-2XMWOZ5O.js.map

package/dist/chunk-2XMWOZ5O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlaySchemaDesigner.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  SchemaDesigner,\n  type SchemaDesignerCapabilities,\n} from \"@petrarca/sonnet-schema-designer\";\nimport { FormSelect } from \"@petrarca/sonnet-forms\";\nimport type { JsonSchema, UISchema } from \"@petrarca/sonnet-core/schema\";\n\nconst SAMPLE_SCHEMA: JsonSchema = {\n  title: \"Patient\",\n  type: \"object\",\n  properties: {\n    first_name: { type: \"string\", title: \"First name\", minLength: 1 },\n    last_name: { type: \"string\", title: \"Last name\", minLength: 1 },\n    date_of_birth: { type: \"string\", format: \"date\", title: \"Date of birth\" },\n    gender: {\n      type: \"string\",\n      title: \"Gender\",\n      enum: [\"male\", \"female\", \"other\", \"unknown\"],\n    },\n    active: { type: \"boolean\", title: \"Active\" },\n    contact: {\n      type: \"object\",\n      title: \"Contact\",\n      properties: {\n        email: { type: \"string\", format: \"email\", title: \"Email\" },\n        phone: { type: \"string\", title: \"Phone\" },\n      },\n      required: [\"email\"],\n    },\n    addresses: {\n      type: \"array\",\n      title: \"Addresses\",\n      minItems: 1,\n      maxItems: 3,\n      items: {\n        type: \"object\",\n        properties: {\n          street: { type: \"string\", title: \"Street\" },\n          city: { type: \"string\", title: \"City\" },\n          zip: { type: \"string\", title: \"ZIP\" },\n          country: { type: \"string\", title: \"Country\" },\n        },\n        required: [\"street\", \"city\"],\n      },\n    },\n  },\n  required: [\"first_name\", \"last_name\"],\n};\n\n// An audit-event-like schema: a fixed envelope (actor, targets) with three\n// extensible metadata containers. Used to demo scoped editing.\nconst AUDIT_SCHEMA: JsonSchema = {\n  title: \"AuditEvent\",\n  type: \"object\",\n  properties: {\n    actor: {\n      type: \"object\",\n      title: \"Actor\",\n      properties: {\n        type: { type: \"string\", title: \"Type\" },\n        id: { type: \"string\", title: \"ID\" },\n        metadata: {\n          type: \"object\",\n          title: \"Actor metadata\",\n          properties: { role: { type: \"string\", title: \"Role\" } },\n        },\n      },\n    },\n    targets: {\n      type: \"array\",\n      title: \"Targets\",\n      items: {\n        type: \"object\",\n        properties: {\n          type: { type: \"string\", title: \"Type\" },\n          id: { type: \"string\", title: \"ID\" },\n          metadata: {\n            type: \"object\",\n            title: \"Target metadata\",\n            properties: { ward: { type: \"string\", title: \"Ward\" } },\n          },\n        },\n      },\n    },\n    metadata: {\n      type: \"object\",\n      title: \"Metadata\",\n      properties: { reason: { type: \"string\", title: \"Reason\" } },\n    },\n  },\n};\n\n// A schema exercising every logic construct the designer can author: a oneOf\n// discriminated variant (payment method), if/then/else conditionals (authored\n// as allOf members), a const-tagged field, and a nullable anyOf optional field.\n// x-ui-order places each conditional field right after the property it depends\n// on (see docs/design/logic-authoring.md in the schema-designer package,\n// ordering note).\nconst LOGIC_SCHEMA: JsonSchema = {\n  title: \"Checkout\",\n  type: \"object\",\n  // A reusable definition referenced by $ref (shows read-only expansion).\n  $defs: {\n    Address: {\n      type: \"object\",\n      properties: {\n        street: { type: \"string\", title: \"Street\" },\n        city: { type: \"string\", title: \"City\" },\n        zip: { type: \"string\", title: \"ZIP\" },\n      },\n    },\n  },\n  \"x-ui-order\": [\n    \"schema_version\",\n    \"amount\",\n    \"requires_approval\",\n    \"currency\",\n    \"expedited\",\n    \"delivery_window\",\n    \"gift_wrap\",\n    \"gift_message\",\n    \"shipping_address\",\n    \"note\",\n    \"payment\",\n  ],\n  properties: {\n    // A $ref to the shared Address definition (read-only in the tree).\n    shipping_address: { $ref: \"#/$defs/Address\", title: \"Shipping address\" },\n    // A fixed value carried by every document (const authoring).\n    schema_version: {\n      type: \"string\",\n      title: \"Schema version\",\n      const: \"checkout/v1\",\n    },\n    amount: { type: \"number\", title: \"Amount\", minimum: 0 },\n    currency: {\n      type: \"string\",\n      title: \"Currency\",\n      enum: [\"EUR\", \"USD\", \"GBP\"],\n    },\n    expedited: { type: \"boolean\", title: \"Expedited\" },\n    gift_wrap: { type: \"boolean\", title: \"Gift wrap\" },\n    // Declarative visibility rule (x-ui-rule): declared at its own position,\n    // shown only when gift_wrap is checked. Contrast with the if/then/else\n    // fields above, which are structurally added by their conditionals.\n    gift_message: {\n      type: \"string\",\n      title: \"Gift message\",\n      \"x-ui-rule\": {\n        effect: \"show\",\n        condition: { scope: \"/gift_wrap\", schema: { const: true } },\n      },\n    },\n    // Nullable optional (anyOf [T, null]) -- the renderer unwraps to T.\n    note: {\n      title: \"Note (optional)\",\n      anyOf: [{ type: \"string\" }, { type: \"null\" }],\n    },\n    // A discriminated union (oneOf): the payment method.\n    payment: {\n      type: \"object\",\n      title: \"Payment method\",\n      discriminator: { propertyName: \"kind\" },\n      oneOf: [\n        {\n          title: \"Card\",\n          properties: {\n            kind: { const: \"card\" },\n            card_number: { type: \"string\", title: \"Card number\" },\n            cvc: { type: \"string\", title: \"CVC\" },\n          },\n        },\n        {\n          title: \"Bank transfer\",\n          properties: {\n            kind: { const: \"bank\" },\n            iban: { type: \"string\", title: \"IBAN\" },\n          },\n        },\n        {\n          title: \"Cash\",\n          properties: { kind: { const: \"cash\" } },\n        },\n      ],\n    },\n  },\n  required: [\"amount\", \"currency\"],\n  // Conditionals (if/then/else) authored as allOf members.\n  allOf: [\n    {\n      // Large amounts require an approval reference.\n      if: {\n        properties: { amount: { exclusiveMinimum: 1000 } },\n        required: [\"amount\"],\n      },\n      then: {\n        properties: {\n          requires_approval: {\n            type: \"string\",\n            title: \"Approval reference\",\n          },\n        },\n        required: [\"requires_approval\"],\n      },\n    },\n    {\n      // Expedited orders ask for a delivery window; otherwise none.\n      if: {\n        properties: { expedited: { const: true } },\n        required: [\"expedited\"],\n      },\n      then: {\n        properties: {\n          delivery_window: {\n            type: \"string\",\n            title: \"Delivery window\",\n            enum: [\"morning\", \"afternoon\", \"evening\"],\n          },\n        },\n      },\n    },\n  ],\n};\n\nconst AUDIT_EDITABLE_PATHS = [\n  \"/properties/metadata/properties\",\n  \"/properties/actor/properties/metadata/properties\",\n  \"/properties/targets/items/properties/metadata/properties\",\n];\n\ntype ProfileKey = \"full\" | \"data\" | \"scoped\" | \"structure\" | \"logic\";\n\ninterface Profile {\n  label: string;\n  description: string;\n  schema: JsonSchema;\n  capabilities?: SchemaDesignerCapabilities;\n  readOnly?: boolean;\n}\n\nconst PROFILES: Record<ProfileKey, Profile> = {\n  full: {\n    label: \"Full (schema + uiSchema)\",\n    description: \"Default: author the schema and its form presentation hints.\",\n    schema: SAMPLE_SCHEMA,\n    capabilities: { previews: [\"form\", \"table\", \"json\", \"capabilities\"] },\n  },\n  data: {\n    label: \"Data schema only\",\n    description:\n      \"Pure JSON Schema (audit, terminology): no UI/Combined tabs, JSON preview only.\",\n    schema: SAMPLE_SCHEMA,\n    capabilities: { mode: \"data\", previews: [\"json\", \"capabilities\"] },\n  },\n  scoped: {\n    label: \"Scoped (audit event)\",\n    description:\n      \"Fixed envelope; only the three metadata containers are editable.\",\n    schema: AUDIT_SCHEMA,\n    capabilities: {\n      mode: \"data\",\n      editablePaths: AUDIT_EDITABLE_PATHS,\n      previews: [\"json\", \"capabilities\"],\n    },\n  },\n  structure: {\n    label: \"Structure only (no preview)\",\n    description: \"Tree + inspector only; the center preview pane is hidden.\",\n    schema: SAMPLE_SCHEMA,\n    capabilities: { mode: \"data\", previews: [] },\n  },\n  logic: {\n    label: \"Logic (variants + conditionals)\",\n    description:\n      \"Shows every logic construct: a oneOf variant, if/then/else conditionals, a const field, and a nullable optional.\",\n    schema: LOGIC_SCHEMA,\n    capabilities: { previews: [\"form\", \"table\", \"json\", \"capabilities\"] },\n  },\n};\n\n/**\n * PlaySchemaDesigner -- exercises SchemaDesigner: visually author a JsonSchema\n * (and its uiSchema presentation hints), with a live preview. The profile\n * switcher presets the capability profile (data/full triage, scoped editing,\n * read-only); the in-designer Capabilities tab tweaks it live.\n */\nexport default function PlaySchemaDesigner() {\n  const [profileKey, setProfileKey] = useState<ProfileKey>(\"full\");\n  const profile = PROFILES[profileKey];\n\n  const [schema, setSchema] = useState<JsonSchema>(profile.schema);\n  const [uiSchema, setUiSchema] = useState<Record<string, UISchema>>({});\n\n  const selectProfile = (key: ProfileKey) => {\n    setProfileKey(key);\n    setSchema(PROFILES[key].schema);\n    setUiSchema({});\n  };\n\n  return (\n    <div className=\"w-full flex flex-col gap-3 h-[calc(100vh-8rem)]\">\n      <div>\n        <h1>Schema Designer</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Visually author a JSON Schema and its UI presentation hints. Edits\n          flow through onChange as a valid schema + uiSchema.\n        </p>\n      </div>\n\n      <div className=\"flex items-center gap-3\">\n        <label\n          htmlFor=\"capability-profile\"\n          className=\"shrink-0 text-sm font-medium\"\n        >\n          Capability profile\n        </label>\n        <div className=\"w-72\">\n          <FormSelect\n            id=\"capability-profile\"\n            name=\"profile\"\n            value={profileKey}\n            options={(Object.keys(PROFILES) as ProfileKey[]).map((k) => ({\n              value: k,\n              label: PROFILES[k].label,\n            }))}\n            onChange={(v) => selectProfile((v as ProfileKey) ?? \"full\")}\n            clearable={false}\n          />\n        </div>\n        <p className=\"text-sm text-muted-foreground\">{profile.description}</p>\n      </div>\n\n      <div style={{ flex: 1, minHeight: 0 }}>\n        <SchemaDesigner\n          key={profileKey}\n          schema={schema}\n          uiSchema={uiSchema}\n          capabilities={profile.capabilities}\n          readOnly={profile.readOnly}\n          onChange={(nextSchema, nextUiSchema) => {\n            setSchema(nextSchema);\n            setUiSchema(nextUiSchema);\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}