@petrarca/sonnet-playground 0.4.2 → 0.6.0

package/dist/chunk-C2P3UQMZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayGraph.tsx","../src/pages/graph/inMemoryGraphEditing.ts","../src/pages/graph/relationWidget.tsx"],"sourcesContent":["/**\n * Playground page for @petrarca/sonnet-graph.\n * Accessible at /playground/graph\n *\n * Demonstrates graph visualization with static mock data -- no backend required.\n * Uses the GraphStoresContext provider pattern that consumers like explorer\n * and any consumer app would use to wire their own stores.\n */\n\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  GraphVisualizer,\n  ActionPanel,\n  GraphA11yList,\n  GraphRendererProvider,\n  GraphStoresContext,\n  GraphEditToolbar,\n  createGraphDataStore,\n  createGraphFilterStore,\n  createGraphExplorationStore,\n  createSelectionStore,\n  createGraphFocusStore,\n  enrichNodes,\n  enrichEdges,\n  buildColorPalette,\n  GraphModelEditor,\n  type GraphModel,\n  type GraphModelCapabilities,\n  type GraphCapabilities,\n  type RawGraphNode,\n  type RawGraphEdge,\n  type WorkspaceStores,\n} from \"@petrarca/sonnet-graph\";\nimport { DEFAULT_WIDGETS, type WidgetRegistry } from \"@petrarca/sonnet-forms\";\nimport {\n  createInMemoryPort,\n  createModelSchemaProvider,\n  type GraphStore,\n} from \"./graph/inMemoryGraphEditing\";\nimport { createRelationWidget } from \"./graph/relationWidget\";\nimport {\n  Button,\n  Alert,\n  AlertDescription,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  ResizeHandle,\n} from \"@petrarca/sonnet-ui\";\nimport { FormSelect } from \"@petrarca/sonnet-forms\";\nimport { Play, RotateCcw } from \"lucide-react\";\n\n// ---------------------------------------------------------------------------\n//  Technology Stack dataset (fictitious) -- a Product at the centre, broken\n//  into Components, the Technologies they use, and external Dependencies.\n//  Domain inspired by the lauro tech-stack/knowledge graph.\n// ---------------------------------------------------------------------------\n\nconst TECH_NODES: RawGraphNode[] = [\n  {\n    id_: 1,\n    label_: \"Product\",\n    properties_: { key: \"product-a\", name: \"Product A\" },\n  },\n  {\n    id_: 2,\n    label_: \"Product\",\n    properties_: { key: \"product-b\", name: \"Product B\" },\n  },\n  {\n    id_: 3,\n    label_: \"TechnologyStack\",\n    properties_: { key: \"product-a-stack\", name: \"Product A stack\" },\n  },\n  {\n    id_: 4,\n    label_: \"TechnologyStack\",\n    properties_: { key: \"product-b-stack\", name: \"Product B stack\" },\n  },\n  {\n    id_: 5,\n    label_: \"Technology\",\n    properties_: { key: \"react\", name: \"React\" },\n  },\n  {\n    id_: 6,\n    label_: \"Technology\",\n    properties_: { key: \"postgresql\", name: \"PostgreSQL\" },\n  },\n  {\n    id_: 7,\n    label_: \"Technology\",\n    properties_: { key: \"kafka\", name: \"Kafka\" },\n  },\n  {\n    id_: 8,\n    label_: \"Technology\",\n    properties_: { key: \"go\", name: \"Go\" },\n  },\n  {\n    id_: 9,\n    label_: \"TechnologyCategory\",\n    properties_: { key: \"frontend-framework\", name: \"Frontend Framework\" },\n  },\n  {\n    id_: 10,\n    label_: \"TechnologyCategory\",\n    properties_: { key: \"database\", name: \"Database\" },\n  },\n  {\n    id_: 11,\n    label_: \"TechnologyCategory\",\n    properties_: { key: \"messaging\", name: \"Messaging\" },\n  },\n  {\n    id_: 12,\n    label_: \"TechnologyCategory\",\n    properties_: { key: \"language\", name: \"Language\" },\n  },\n];\n\nconst TECH_EDGES: RawGraphEdge[] = [\n  // Two products, each with its own stack; both stacks share PostgreSQL.\n  {\n    id_: 101,\n    label_: \"HAS_TECH_STACK\",\n    start_id_: 1,\n    end_id_: 3,\n    properties_: {},\n  },\n  {\n    id_: 102,\n    label_: \"HAS_TECH_STACK\",\n    start_id_: 2,\n    end_id_: 4,\n    properties_: {},\n  },\n  {\n    id_: 103,\n    label_: \"INTEGRATES_WITH\",\n    start_id_: 1,\n    end_id_: 2,\n    properties_: {},\n  },\n  // Product A stack: React, PostgreSQL, Kafka.\n  {\n    id_: 104,\n    label_: \"USES_TECHNOLOGY\",\n    start_id_: 3,\n    end_id_: 5,\n    properties_: {},\n  },\n  {\n    id_: 105,\n    label_: \"USES_TECHNOLOGY\",\n    start_id_: 3,\n    end_id_: 6,\n    properties_: {},\n  },\n  {\n    id_: 106,\n    label_: \"USES_TECHNOLOGY\",\n    start_id_: 3,\n    end_id_: 7,\n    properties_: {},\n  },\n  // Product B stack: Go + the shared PostgreSQL.\n  {\n    id_: 107,\n    label_: \"USES_TECHNOLOGY\",\n    start_id_: 4,\n    end_id_: 6,\n    properties_: {},\n  },\n  {\n    id_: 108,\n    label_: \"USES_TECHNOLOGY\",\n    start_id_: 4,\n    end_id_: 8,\n    properties_: {},\n  },\n  // Technology -> category.\n  { id_: 109, label_: \"BELONGS_TO\", start_id_: 5, end_id_: 9, properties_: {} },\n  {\n    id_: 110,\n    label_: \"BELONGS_TO\",\n    start_id_: 6,\n    end_id_: 10,\n    properties_: {},\n  },\n  {\n    id_: 111,\n    label_: \"BELONGS_TO\",\n    start_id_: 7,\n    end_id_: 11,\n    properties_: {},\n  },\n  {\n    id_: 112,\n    label_: \"BELONGS_TO\",\n    start_id_: 8,\n    end_id_: 12,\n    properties_: {},\n  },\n];\n\n// ---------------------------------------------------------------------------\n//  Store setup\n//\n//  Stores are created once at module load, not inside the component.\n//  This avoids re-creation on re-render and removes the need for useMemo.\n// ---------------------------------------------------------------------------\n\nfunction createPlaygroundStores(): WorkspaceStores {\n  const graphFilter = createGraphFilterStore();\n  const graphData = createGraphDataStore();\n  const selection = createSelectionStore();\n  const graphFocus = createGraphFocusStore();\n  const graphExploration = createGraphExplorationStore({\n    graphData,\n    selection,\n    graphFocus,\n    graphFilter,\n    // Static data -- no server expansion available in the playground\n    expandNode: async () => ({ nodes: [], edges: [], has_more: false }),\n    getNodes: async () => [],\n  });\n  return { graphFilter, graphData, graphExploration, selection };\n}\n\nconst PLAYGROUND_STORES = createPlaygroundStores();\n\n// ---------------------------------------------------------------------------\n//  Data helpers\n// ---------------------------------------------------------------------------\n\ninterface GraphInput {\n  nodes: RawGraphNode[];\n  edges: RawGraphEdge[];\n}\n\nconst EMPTY_DATA: GraphInput = { nodes: [], edges: [] };\n\nfunction serializeGraphData(data: GraphInput): string {\n  return JSON.stringify(data, null, 2);\n}\n\nfunction validateNode(n: unknown, i: number): string | null {\n  if (!n || typeof n !== \"object\") return `nodes[${i}] must be an object`;\n  const node = n as Record<string, unknown>;\n  if (node.id_ === undefined) return `nodes[${i}] is missing id_`;\n  if (typeof node.label_ !== \"string\") return `nodes[${i}] is missing label_`;\n  return null;\n}\n\nfunction validateEdge(e: unknown, i: number): string | null {\n  if (!e || typeof e !== \"object\") return `edges[${i}] must be an object`;\n  const edge = e as Record<string, unknown>;\n  if (edge.id_ === undefined) return `edges[${i}] is missing id_`;\n  if (typeof edge.label_ !== \"string\") return `edges[${i}] is missing label_`;\n  if (edge.start_id_ === undefined) return `edges[${i}] is missing start_id_`;\n  if (edge.end_id_ === undefined) return `edges[${i}] is missing end_id_`;\n  return null;\n}\n\n/** Validates that parsed JSON is a usable GraphInput. Returns an error string or null. */\nfunction validateGraphInput(value: unknown): string | null {\n  if (!value || typeof value !== \"object\" || Array.isArray(value)) {\n    return \"JSON must be an object with nodes and edges arrays\";\n  }\n  const obj = value as Record<string, unknown>;\n  if (!Array.isArray(obj.nodes)) return '\"nodes\" must be an array';\n  if (!Array.isArray(obj.edges)) return '\"edges\" must be an array';\n  for (const [i, n] of (obj.nodes as unknown[]).entries()) {\n    const err = validateNode(n, i);\n    if (err) return err;\n  }\n  for (const [i, e] of (obj.edges as unknown[]).entries()) {\n    const err = validateEdge(e, i);\n    if (err) return err;\n  }\n  return null;\n}\n\nfunction loadIntoStore(stores: WorkspaceStores, data: GraphInput) {\n  const labelCounts: Record<string, number> = {};\n  for (const n of data.nodes) {\n    labelCounts[n.label_] = (labelCounts[n.label_] ?? 0) + 1;\n  }\n  const palette = buildColorPalette(labelCounts);\n  const nodes = enrichNodes(data.nodes, palette);\n  const edges = enrichEdges(data.edges, palette);\n  stores.graphFilter.getState().resetFilters();\n  stores.graphData.getState().setQueryData(nodes, edges, {\n    nodes: nodes.length,\n    edges: edges.length,\n  });\n  // Signal renderers to re-fit layout after data change\n  stores.graphFilter.getState().notifyDataChange();\n}\n\n// The mutable in-memory dataset the instance-editing port operates on. It is\n// the single source of truth shared by the Data JSON tab and the live editor;\n// after each edit it is re-enriched into the graph data store (the consumer's\n// cache-patch analog). Initialised to the default dataset's data below.\nconst LIVE_STORE: GraphStore = { nodes: [], edges: [] };\n\n// Replace LIVE_STORE's contents and load them into the visual store.\nfunction setLiveData(stores: WorkspaceStores, data: GraphInput): void {\n  LIVE_STORE.nodes = data.nodes.map((n) => ({ ...n }));\n  LIVE_STORE.edges = data.edges.map((e) => ({ ...e }));\n  loadIntoStore(stores, LIVE_STORE);\n}\n\n// Load the default dataset's data immediately -- no effect needed, no empty\n// render cycle. (The dataset bundle is defined below; its data lives here.)\nsetLiveData(PLAYGROUND_STORES, { nodes: TECH_NODES, edges: TECH_EDGES });\n\n// ---------------------------------------------------------------------------\n//  Model tab -- GraphModelEditor over the metamodel of the Graph/Data tabs\n// ---------------------------------------------------------------------------\n\n// A faithful subset of the apex-graph tech-stack domain model: Product at the\n// centre, with TechnologyStack, Technology and TechnologyCategory node types\n// and the real relation types between them (HAS_TECH_STACK, INTEGRATES_WITH,\n// USES_TECHNOLOGY, BELONGS_TO). PROVIDES_STACK_FOR is a second, fictitious\n// Product -> TechnologyStack relation so a single node-type pair has two\n// distinct relation types (exercises the edge editor's multi-relation create).\n// The Model tab is the schema; the Graph / Data tabs are instances conforming\n// to it.\nconst TECH_MODEL: GraphModel = [\n  {\n    title: \"Product\",\n    type: \"object\",\n    properties: { key: { type: \"string\" }, name: { type: \"string\" } },\n    required: [\"key\", \"name\"],\n    \"x-graph\": {\n      type: \"NODE\",\n      label: \"Product\",\n      relations: [\n        {\n          rel_type_name: \"HAS_TECH_STACK\",\n          to_type_name: \"TechnologyStack\",\n          cardinality: \"ONE_TO_ONE\",\n          form_field: true,\n        },\n        {\n          // Fictitious second Product -> TechnologyStack relation: a product\n          // may also provision a stack it does not own (one-to-many).\n          rel_type_name: \"PROVIDES_STACK_FOR\",\n          to_type_name: \"TechnologyStack\",\n          cardinality: \"ONE_TO_MANY\",\n          form_field: true,\n        },\n        {\n          rel_type_name: \"INTEGRATES_WITH\",\n          to_type_name: \"Product\",\n          cardinality: \"ONE_TO_MANY\",\n          form_field: true,\n        },\n      ],\n    },\n  },\n  {\n    title: \"TechnologyStack\",\n    type: \"object\",\n    properties: { key: { type: \"string\" }, name: { type: \"string\" } },\n    \"x-graph\": {\n      type: \"NODE\",\n      label: \"TechnologyStack\",\n      relations: [\n        {\n          rel_type_name: \"USES_TECHNOLOGY\",\n          to_type_name: \"Technology\",\n          cardinality: \"ONE_TO_MANY\",\n          form_field: true,\n        },\n      ],\n    },\n  },\n  {\n    title: \"Technology\",\n    type: \"object\",\n    properties: { key: { type: \"string\" }, name: { type: \"string\" } },\n    required: [\"key\", \"name\"],\n    \"x-graph\": {\n      type: \"NODE\",\n      label: \"Technology\",\n      relations: [\n        {\n          rel_type_name: \"BELONGS_TO\",\n          to_type_name: \"TechnologyCategory\",\n          cardinality: \"ONE_TO_ONE\",\n          form_field: true,\n        },\n      ],\n    },\n  },\n  {\n    title: \"TechnologyCategory\",\n    type: \"object\",\n    properties: { key: { type: \"string\" }, name: { type: \"string\" } },\n    required: [\"key\", \"name\"],\n    \"x-graph\": { type: \"NODE\", label: \"TechnologyCategory\" },\n  },\n];\n\n// The Organization metamodel -- a subset of the Sestina organization model\n// (see sestina web/docs/design/organization-graph.md). Node-type labels are\n// the organization types (Network, Hospital, Department, Practice). Relations\n// are directional triples: `partOf` is containment (child -> parent, FHIR\n// Organization.partOf); `affiliation` is a non-hierarchical link (FHIR\n// OrganizationAffiliation). Directionality encodes the rules (a Department is\n// partOf a Hospital, not the reverse). Paired with a locked-down profile (see\n// the dataset below): edgeTypes \"catalog\" (a fixed relation-type vocabulary,\n// no new edge types) and no property editing.\nconst ORG_MODEL: GraphModel = [\n  {\n    title: \"Network\",\n    type: \"object\",\n    \"x-graph\": { type: \"NODE\", label: \"Network\" },\n  },\n  {\n    title: \"Hospital\",\n    type: \"object\",\n    \"x-graph\": {\n      type: \"NODE\",\n      label: \"Hospital\",\n      relations: [\n        {\n          rel_type_name: \"partOf\",\n          to_type_name: \"Network\",\n          cardinality: \"ONE_TO_ONE\",\n        },\n      ],\n    },\n  },\n  {\n    title: \"Department\",\n    type: \"object\",\n    \"x-graph\": {\n      type: \"NODE\",\n      label: \"Department\",\n      relations: [\n        {\n          rel_type_name: \"partOf\",\n          to_type_name: \"Hospital\",\n          cardinality: \"ONE_TO_ONE\",\n        },\n      ],\n    },\n  },\n  {\n    title: \"Practice\",\n    type: \"object\",\n    \"x-graph\": {\n      type: \"NODE\",\n      label: \"Practice\",\n      relations: [\n        {\n          rel_type_name: \"partOf\",\n          to_type_name: \"Network\",\n          cardinality: \"ONE_TO_ONE\",\n        },\n        {\n          rel_type_name: \"affiliation\",\n          to_type_name: \"Hospital\",\n          cardinality: \"ONE_TO_MANY\",\n        },\n      ],\n    },\n  },\n  // Pre-defined relation-type catalog. With edgeTypes \"catalog\", relations may\n  // only use these types; no new edge types can be created.\n  {\n    title: \"partOf\",\n    type: \"object\",\n    \"x-graph\": { type: \"EDGE\", label: \"partOf\" },\n  },\n  {\n    title: \"affiliation\",\n    type: \"object\",\n    \"x-graph\": { type: \"EDGE\", label: \"affiliation\" },\n  },\n];\n\nconst ORG_NODES: RawGraphNode[] = [\n  {\n    id_: 1,\n    label_: \"Network\",\n    properties_: { name: \"Northwind Care Network\" },\n  },\n  { id_: 2, label_: \"Hospital\", properties_: { name: \"Riverside General\" } },\n  { id_: 3, label_: \"Hospital\", properties_: { name: \"Lakeside Clinic\" } },\n  { id_: 4, label_: \"Department\", properties_: { name: \"Cardiology\" } },\n  { id_: 5, label_: \"Department\", properties_: { name: \"Radiology\" } },\n  { id_: 6, label_: \"Practice\", properties_: { name: \"Maple Street GP\" } },\n];\n\nconst ORG_EDGES: RawGraphEdge[] = [\n  // partOf: child -> parent (containment).\n  { id_: 201, label_: \"partOf\", start_id_: 2, end_id_: 1, properties_: {} },\n  { id_: 202, label_: \"partOf\", start_id_: 3, end_id_: 1, properties_: {} },\n  { id_: 203, label_: \"partOf\", start_id_: 4, end_id_: 2, properties_: {} },\n  { id_: 204, label_: \"partOf\", start_id_: 5, end_id_: 2, properties_: {} },\n  // affiliation: a practice affiliated with a hospital (non-hierarchical).\n  {\n    id_: 205,\n    label_: \"affiliation\",\n    start_id_: 6,\n    end_id_: 2,\n    properties_: {},\n  },\n];\n\n// ---------------------------------------------------------------------------\n//  Datasets -- each bundles { graph data + model + capability profile }. The\n//  selector above the tabs swaps all three at once.\n// ---------------------------------------------------------------------------\n\n// The Model Editor's { readOnly, capabilities } config, edited as JSON on the\n// Capabilities tab and applied to the GraphModelEditor.\ninterface CapabilitiesConfig {\n  readOnly: boolean;\n  capabilities: GraphModelCapabilities;\n}\n\ninterface GraphDataset {\n  label: string;\n  data: GraphInput;\n  model: GraphModel;\n  capabilities: CapabilitiesConfig;\n  /** Instance-editing capabilities for the live data graph (the Graph tab). */\n  editCapabilities: GraphCapabilities;\n}\n\nconst DATASETS: Record<string, GraphDataset> = {\n  empty: {\n    label: \"Empty\",\n    data: EMPTY_DATA,\n    model: [],\n    capabilities: { readOnly: false, capabilities: {} },\n    // No model to drive forms, so editing stays off.\n    editCapabilities: {},\n  },\n  techStack: {\n    label: \"Technology Stack\",\n    data: { nodes: TECH_NODES, edges: TECH_EDGES },\n    model: TECH_MODEL,\n    capabilities: { readOnly: false, capabilities: {} },\n    // Full instance editing: create / edit / delete nodes and edges.\n    editCapabilities: {\n      createNode: \"edit\",\n      updateNode: \"edit\",\n      deleteNode: \"edit\",\n      createEdge: \"edit\",\n      updateEdge: \"edit\",\n      deleteEdge: \"edit\",\n    },\n  },\n  organization: {\n    label: \"Organization model\",\n    data: { nodes: ORG_NODES, edges: ORG_EDGES },\n    model: ORG_MODEL,\n    // Simulates the planned Sestina org editor: fixed edge-type catalog (no new\n    // edge types) and no property editing (node/edge properties hidden).\n    capabilities: {\n      readOnly: false,\n      capabilities: {\n        edgeTypes: \"catalog\",\n        nodeProperties: \"hidden\",\n        edgeProperties: \"hidden\",\n      },\n    },\n    // A constrained instance-editing profile: edges may be linked / unlinked\n    // (partOf / affiliation), but nodes are not created or deleted here.\n    editCapabilities: {\n      updateNode: \"edit\",\n      createEdge: \"edit\",\n      deleteEdge: \"edit\",\n    },\n  },\n};\n\nconst DATASET_OPTIONS = Object.entries(DATASETS).map(([value, d]) => ({\n  value,\n  label: d.label,\n}));\n\nconst DEFAULT_DATASET = \"techStack\";\n\ninterface ModelState {\n  model: GraphModel;\n  modelText: string;\n  modelError: string | null;\n  setModelText: (v: string) => void;\n  applyModel: () => void;\n  /** Replace the model wholesale (used by the dataset selector). */\n  loadModel: (model: GraphModel) => void;\n  /** Apply an edited model (from the graph editor) and re-sync the JSON text. */\n  updateModel: (model: GraphModel) => void;\n}\n\n// Shared model state for the Model and Model JSON tabs.\nfunction useModelState(initialModel: GraphModel): ModelState {\n  const [modelText, setModelText] = useState(() =>\n    JSON.stringify(initialModel, null, 2),\n  );\n  const [model, setModel] = useState<GraphModel>(initialModel);\n  const [modelError, setModelError] = useState<string | null>(null);\n\n  const applyModel = useCallback(() => {\n    let parsed: unknown;\n    try {\n      parsed = JSON.parse(modelText);\n    } catch (e) {\n      setModelError(e instanceof Error ? e.message : \"Invalid JSON\");\n      return;\n    }\n    if (!Array.isArray(parsed)) {\n      setModelError(\"A graph model must be a JSON array of type schemas.\");\n      return;\n    }\n    setModelError(null);\n    setModel(parsed as GraphModel);\n  }, [modelText]);\n\n  const loadModel = useCallback((next: GraphModel) => {\n    setModelText(JSON.stringify(next, null, 2));\n    setModel(next);\n    setModelError(null);\n  }, []);\n\n  const updateModel = useCallback((next: GraphModel) => {\n    setModel(next);\n    setModelText(JSON.stringify(next, null, 2));\n    setModelError(null);\n  }, []);\n\n  return {\n    model,\n    modelText,\n    modelError,\n    setModelText,\n    applyModel,\n    loadModel,\n    updateModel,\n  };\n}\n\n// Full-canvas model editor (editable; changes flow back to the shared state).\nfunction ModelGraphTab({\n  model,\n  onChange,\n  readOnly,\n  capabilities,\n}: {\n  model: GraphModel;\n  onChange: (model: GraphModel) => void;\n  readOnly: boolean;\n  capabilities: GraphModelCapabilities;\n}): React.ReactElement {\n  return (\n    <div className=\"h-[640px] rounded-lg border overflow-hidden\">\n      <GraphModelEditor\n        value={model}\n        onChange={onChange}\n        readOnly={readOnly}\n        capabilities={capabilities}\n        widgetOptions={[\"entity-select\", \"coded-value\", \"textarea\"]}\n      />\n    </div>\n  );\n}\n\nfunction CapabilitiesTab({\n  config,\n  onApply,\n}: {\n  config: CapabilitiesConfig;\n  onApply: (config: CapabilitiesConfig) => void;\n}): React.ReactElement {\n  const [text, setText] = useState(() => JSON.stringify(config, null, 2));\n  const [error, setError] = useState<string | null>(null);\n\n  const apply = useCallback(() => {\n    let parsed: unknown;\n    try {\n      parsed = JSON.parse(text);\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"Invalid JSON\");\n      return;\n    }\n    setError(null);\n    const obj = parsed as Partial<CapabilitiesConfig>;\n    onApply({\n      readOnly: Boolean(obj.readOnly),\n      capabilities: (obj.capabilities ?? {}) as GraphModelCapabilities,\n    });\n  }, [text, onApply]);\n\n  const reset = useCallback(() => {\n    const fresh: CapabilitiesConfig = { readOnly: false, capabilities: {} };\n    setText(JSON.stringify(fresh, null, 2));\n    setError(null);\n    onApply(fresh);\n  }, [onApply]);\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center gap-2\">\n        <Button size=\"sm\" onClick={apply}>\n          <Play className=\"h-4 w-4 mr-1\" />\n          Apply\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onClick={reset}>\n          <RotateCcw className=\"h-4 w-4 mr-1\" />\n          Reset\n        </Button>\n        <span className=\"text-xs text-muted-foreground ml-2\">\n          Edit, Apply, then open the Model Editor tab and select a node.\n        </span>\n      </div>\n      {error && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{error}</AlertDescription>\n        </Alert>\n      )}\n      <textarea\n        value={text}\n        onChange={(e) => setText(e.target.value)}\n        spellCheck={false}\n        className=\"w-full h-[280px] font-mono text-xs p-3 border rounded-lg bg-muted/30 resize-y focus:outline-none focus:ring-2 focus:ring-ring\"\n      />\n      <div>\n        <p className=\"text-xs font-medium text-muted-foreground mb-1\">\n          Effective config (applied to GraphModelEditor)\n        </p>\n        <pre className=\"rounded-md bg-muted px-3 py-2 text-xs overflow-auto max-h-40\">\n          {JSON.stringify(config, null, 2)}\n        </pre>\n        <p className=\"mt-2 text-xs text-muted-foreground\">\n          readOnly = lock everything. capabilities: nodeTypes / relations (edit\n          | readonly), edgeTypes (edit = select or create | catalog = select\n          only | readonly), nodeProperties / edgeProperties (edit | readonly |\n          hidden), showEdgeTypes (bool, default false starts edge-type nodes\n          deselected; true shows them). More fields are added as the editor\n          grows.\n        </p>\n      </div>\n    </div>\n  );\n}\n\n// Editable model JSON, applied to the shared model state.\nfunction ModelJsonTab({\n  state,\n  onReset,\n}: {\n  state: ModelState;\n  onReset: () => void;\n}): React.ReactElement {\n  const { modelText, modelError, setModelText, applyModel } = state;\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center gap-2\">\n        <Button size=\"sm\" onClick={applyModel}>\n          <Play className=\"h-4 w-4 mr-1\" />\n          Apply\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onClick={onReset}>\n          <RotateCcw className=\"h-4 w-4 mr-1\" />\n          Reset\n        </Button>\n        <span className=\"text-xs text-muted-foreground ml-2\">\n          Edit the model, Apply, then switch to the Model tab\n        </span>\n      </div>\n      {modelError && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{modelError}</AlertDescription>\n        </Alert>\n      )}\n      <textarea\n        value={modelText}\n        onChange={(e) => setModelText(e.target.value)}\n        spellCheck={false}\n        className=\"w-full h-[600px] font-mono text-xs p-3 border rounded-lg bg-muted/30 resize-y focus:outline-none focus:ring-2 focus:ring-ring\"\n      />\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n//  Component\n// ---------------------------------------------------------------------------\n\nexport default function PlayGraph(): React.ReactElement {\n  const [datasetKey, setDatasetKey] = useState(DEFAULT_DATASET);\n  const [jsonText, setJsonText] = useState(() =>\n    serializeGraphData(DATASETS[DEFAULT_DATASET].data),\n  );\n  const [parseError, setParseError] = useState<string | null>(null);\n  const modelState = useModelState(DATASETS[DEFAULT_DATASET].model);\n  const { loadModel } = modelState;\n  const [capsConfig, setCapsConfig] = useState<CapabilitiesConfig>(\n    DATASETS[DEFAULT_DATASET].capabilities,\n  );\n\n  // Instance-editing seams over the in-memory store + the current model. The\n  // port re-loads LIVE_STORE into the visual store after every mutation; the\n  // schema provider resolves forms from the (live-edited) model. Recreated when\n  // the model changes so edits use the latest schema.\n  const editPort = useMemo(\n    () =>\n      createInMemoryPort(LIVE_STORE, () =>\n        loadIntoStore(PLAYGROUND_STORES, LIVE_STORE),\n      ),\n    [],\n  );\n  const editSchemaProvider = useMemo(\n    () => createModelSchemaProvider(modelState.model),\n    [modelState.model],\n  );\n  // Keep the Data JSON tab in sync after a live edit.\n  const handleMutated = useCallback(() => {\n    setJsonText(serializeGraphData(LIVE_STORE));\n  }, []);\n\n  // App-supplied form widgets: the relation widget resolves __rel_* options\n  // from the in-memory store, registered under \"entity-select\" (the library's\n  // default relation widget hint). This is the playground analog of the\n  // explorer's cypher-select.\n  const editWidgets = useMemo<WidgetRegistry>(\n    () => ({\n      ...DEFAULT_WIDGETS,\n      \"entity-select\": createRelationWidget(LIVE_STORE),\n    }),\n    [],\n  );\n\n  // Swap the whole dataset: graph data + model + capability profile.\n  const loadDataset = useCallback(\n    (key: string) => {\n      const ds = DATASETS[key];\n      if (!ds) return;\n      setDatasetKey(key);\n      setJsonText(serializeGraphData(ds.data));\n      setParseError(null);\n      setLiveData(PLAYGROUND_STORES, ds.data);\n      loadModel(ds.model);\n      setCapsConfig(ds.capabilities);\n    },\n    [loadModel],\n  );\n\n  // Resizable side panel (demonstrates ResizeHandle).\n  const [panelWidth, setPanelWidth] = useState(300);\n  const rowRef = useRef<HTMLDivElement>(null);\n  const startResize = useCallback((e: React.PointerEvent) => {\n    e.preventDefault();\n    const target = e.currentTarget as HTMLElement;\n    target.setPointerCapture(e.pointerId);\n    const move = (ev: PointerEvent) => {\n      const right = rowRef.current?.getBoundingClientRect().right ?? 0;\n      setPanelWidth(Math.min(560, Math.max(200, right - ev.clientX)));\n    };\n    const up = () => {\n      window.removeEventListener(\"pointermove\", move);\n      window.removeEventListener(\"pointerup\", up);\n    };\n    window.addEventListener(\"pointermove\", move);\n    window.addEventListener(\"pointerup\", up);\n  }, []);\n\n  const handleApply = useCallback(() => {\n    let parsed: unknown;\n    try {\n      parsed = JSON.parse(jsonText);\n    } catch (e) {\n      setParseError(e instanceof Error ? e.message : \"Invalid JSON\");\n      return;\n    }\n    const validationError = validateGraphInput(parsed);\n    if (validationError) {\n      setParseError(validationError);\n      return;\n    }\n    setParseError(null);\n    setLiveData(PLAYGROUND_STORES, parsed as GraphInput);\n  }, [jsonText]);\n\n  const handleReset = useCallback(() => {\n    const data = DATASETS[datasetKey].data;\n    setJsonText(serializeGraphData(data));\n    setParseError(null);\n    setLiveData(PLAYGROUND_STORES, data);\n  }, [datasetKey]);\n\n  // Reset the model JSON tab to the current dataset's model.\n  const handleResetModel = useCallback(() => {\n    loadModel(DATASETS[datasetKey].model);\n  }, [datasetKey, loadModel]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"Enter\") {\n        e.preventDefault();\n        handleApply();\n      }\n    },\n    [handleApply],\n  );\n\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <h1>Graph Visualization</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          Interactive property graph with dual renderer support. Edit the JSON\n          data and apply to re-render. The Model tab renders a graph model\n          (metamodel) with GraphModelEditor.\n        </p>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <FormSelect\n          label=\"Dataset\"\n          options={DATASET_OPTIONS}\n          value={datasetKey}\n          onChange={(v) => v && loadDataset(v)}\n          clearable={false}\n          wrapperClassName=\"w-64\"\n        />\n        <span className=\"text-xs text-muted-foreground mt-5\">\n          A dataset bundles graph data + model + capability profile.\n        </span>\n      </div>\n      <GraphStoresContext.Provider value={PLAYGROUND_STORES}>\n        <Tabs defaultValue=\"graph\" className=\"space-y-3\">\n          <TabsList>\n            <TabsTrigger value=\"graph\">Graph</TabsTrigger>\n            <TabsTrigger value=\"data\">Data JSON</TabsTrigger>\n            <TabsTrigger value=\"model\">Model Editor</TabsTrigger>\n            <TabsTrigger value=\"model-json\">Model JSON</TabsTrigger>\n            <TabsTrigger value=\"model-capabilities\">\n              Model Editor Capabilities\n            </TabsTrigger>\n          </TabsList>\n\n          <TabsContent value=\"graph\" className=\"mt-0\">\n            <GraphRendererProvider defaultRenderer=\"cytoscape\">\n              <div ref={rowRef} className=\"flex overflow-hidden h-[600px]\">\n                <div className=\"flex-1 min-w-0\">\n                  <GraphVisualizer />\n                </div>\n                {/* Drag to resize the side panel (ResizeHandle demo). */}\n                <ResizeHandle\n                  orientation=\"vertical\"\n                  aria-valuenow={panelWidth}\n                  aria-valuemin={200}\n                  aria-valuemax={560}\n                  onPointerDown={startResize}\n                  onDoubleClick={() => setPanelWidth(300)}\n                />\n                <div\n                  style={{ width: panelWidth }}\n                  className=\"flex-shrink-0 flex flex-col min-h-0\"\n                >\n                  <div className=\"flex-1 min-h-0 overflow-hidden\">\n                    <ActionPanel\n                      actions={\n                        <GraphEditToolbar\n                          port={editPort}\n                          schemaProvider={editSchemaProvider}\n                          capabilities={DATASETS[datasetKey].editCapabilities}\n                          widgets={editWidgets}\n                          onMutated={handleMutated}\n                        />\n                      }\n                    />\n                  </div>\n                  {/* Accessible DOM mirror (playground demo only): keyboard / AT /\n                      automation can select the same nodes/edges as the canvas.\n                      Real consumers render it sr-only (omit `visible`). */}\n                  <div className=\"shrink-0 px-4 pb-4 pt-2\">\n                    <p className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2\">\n                      Accessible list (demo)\n                    </p>\n                    <GraphA11yList visible maxHeight={160} />\n                  </div>\n                </div>\n              </div>\n            </GraphRendererProvider>\n          </TabsContent>\n\n          <TabsContent value=\"data\" className=\"mt-0\">\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center gap-2\">\n                <Button size=\"sm\" onClick={handleApply}>\n                  <Play className=\"h-4 w-4 mr-1\" />\n                  Apply\n                </Button>\n                <Button size=\"sm\" variant=\"outline\" onClick={handleReset}>\n                  <RotateCcw className=\"h-4 w-4 mr-1\" />\n                  Reset\n                </Button>\n                <span className=\"text-xs text-muted-foreground ml-2\">\n                  Cmd+Enter to apply\n                </span>\n              </div>\n              {parseError && (\n                <Alert variant=\"destructive\">\n                  <AlertDescription>{parseError}</AlertDescription>\n                </Alert>\n              )}\n              <textarea\n                value={jsonText}\n                onChange={(e) => setJsonText(e.target.value)}\n                onKeyDown={handleKeyDown}\n                spellCheck={false}\n                className=\"w-full h-[600px] font-mono text-xs p-3 border rounded-lg bg-muted/30 resize-y focus:outline-none focus:ring-2 focus:ring-ring\"\n              />\n            </div>\n          </TabsContent>\n\n          <TabsContent value=\"model\" className=\"mt-0\">\n            <ModelGraphTab\n              model={modelState.model}\n              onChange={modelState.updateModel}\n              readOnly={capsConfig.readOnly}\n              capabilities={capsConfig.capabilities}\n            />\n          </TabsContent>\n\n          <TabsContent value=\"model-json\" className=\"mt-0\">\n            <ModelJsonTab state={modelState} onReset={handleResetModel} />\n          </TabsContent>\n\n          <TabsContent value=\"model-capabilities\" className=\"mt-0\">\n            <CapabilitiesTab config={capsConfig} onApply={setCapsConfig} />\n          </TabsContent>\n        </Tabs>\n      </GraphStoresContext.Provider>\n    </div>\n  );\n}\n","/**\n * In-memory graph-editing adapters for the playground.\n *\n * Implements the sonnet-graph instance-editing seams against a mutable\n * in-memory dataset and the selected dataset's model, with NO backend:\n *\n *  - `createInMemoryPort`   -> a `GraphMutationPort` that mutates the dataset\n *    and re-loads the store so the canvas reflects the change.\n *  - `createModelSchemaProvider` -> a `GraphSchemaProvider` that resolves\n *    node/edge schemas and relations synchronously from the in-memory model.\n *\n * This is the playground's acceptance demo (tier 1 of the override model): the\n * shared library editor driven end-to-end with zero app-specific UI. A real\n * consumer (e.g. the explorer) implements the same seams over its REST API.\n */\n\nimport type {\n  GraphMutationPort,\n  GraphSchemaProvider,\n  RelationDef,\n  RawGraphNode,\n  RawGraphEdge,\n  GraphModel,\n  CreateNodeInput,\n  UpdateNodeInput,\n  CreateEdgeInput,\n  UpdateEdgeInput,\n  CreateNodeWithRelationsInput,\n  UpdateNodeWithRelationsInput,\n  RelationMap,\n} from \"@petrarca/sonnet-graph\";\nimport type { JsonSchema } from \"@petrarca/sonnet-core/schema\";\n\n/** The mutable dataset the in-memory port operates on. */\nexport interface GraphStore {\n  nodes: RawGraphNode[];\n  edges: RawGraphEdge[];\n}\n\n/** Allocates monotonically increasing ids, seeded above the existing maximum.\n * Uses reduce instead of spread-into-Math.max to avoid stack overflow on large\n * stores. */\nfunction createIdAllocator(store: GraphStore): () => number {\n  const allIds = [\n    ...store.nodes.map((n) => n.id_ ?? 0),\n    ...store.edges.map((e) => e.id_ ?? 0),\n  ];\n  const max = allIds.reduce((m, id) => (id > m ? id : m), 0);\n  let next = max + 1;\n  return () => next++;\n}\n\n/** Edges touching a node, as the inbound / outbound subsets. */\nfunction edgesForNode(\n  store: GraphStore,\n  id: number,\n): { inbound: RawGraphEdge[]; outbound: RawGraphEdge[] } {\n  return {\n    inbound: store.edges.filter((e) => e.end_id_ === id),\n    outbound: store.edges.filter((e) => e.start_id_ === id),\n  };\n}\n\n/**\n * Apply a relation map to a node by diffing against its current edges: create\n * edges for new targets, delete edges for removed targets, keep the rest.\n * Returns the created and deleted-edge ids (mirrors the backend's atomic diff).\n */\nfunction diffRelations(\n  store: GraphStore,\n  nodeId: number,\n  relations: RelationMap,\n  nextId: () => number,\n): { created: RawGraphEdge[]; deleted: number[] } {\n  const created: RawGraphEdge[] = [];\n  const deleted: number[] = [];\n\n  for (const [relType, targetIds] of Object.entries(relations)) {\n    const existing = store.edges.filter(\n      (e) => e.label_ === relType && e.start_id_ === nodeId,\n    );\n    const desired = new Set(targetIds);\n\n    // Delete edges whose target is no longer desired.\n    for (const edge of existing) {\n      if (!desired.has(edge.end_id_) && edge.id_ != null) {\n        deleted.push(edge.id_);\n      }\n    }\n    // Create edges for desired targets not already present.\n    const present = new Set(existing.map((e) => e.end_id_));\n    for (const targetId of targetIds) {\n      if (!present.has(targetId)) {\n        const edge: RawGraphEdge = {\n          id_: nextId(),\n          label_: relType,\n          start_id_: nodeId,\n          end_id_: targetId,\n          properties_: {},\n        };\n        created.push(edge);\n      }\n    }\n  }\n\n  store.edges = store.edges\n    .filter((e) => e.id_ == null || !deleted.includes(e.id_))\n    .concat(created);\n  return { created, deleted };\n}\n\n/**\n * Build a `GraphMutationPort` over a mutable in-memory store. `onChange` is\n * called after every mutation so the playground can re-load the store into the\n * graph data store (the consumer's cache-patch analog).\n */\nexport function createInMemoryPort(\n  store: GraphStore,\n  onChange: () => void,\n): GraphMutationPort {\n  const nextId = createIdAllocator(store);\n\n  const createNode = (input: CreateNodeInput): RawGraphNode => {\n    const node: RawGraphNode = {\n      id_: nextId(),\n      label_: input.label_,\n      properties_: input.properties_,\n    };\n    store.nodes = [...store.nodes, node];\n    return node;\n  };\n\n  const updateNode = (input: UpdateNodeInput): RawGraphNode => {\n    const node: RawGraphNode = {\n      id_: input.id_,\n      label_: input.label_,\n      properties_: input.properties_,\n    };\n    store.nodes = store.nodes.map((n) => (n.id_ === input.id_ ? node : n));\n    return node;\n  };\n\n  const createEdge = (input: CreateEdgeInput): RawGraphEdge => {\n    const edge: RawGraphEdge = {\n      id_: nextId(),\n      label_: input.label_,\n      start_id_: input.start_id_,\n      end_id_: input.end_id_,\n      properties_: input.properties_ ?? {},\n    };\n    store.edges = [...store.edges, edge];\n    return edge;\n  };\n\n  const updateEdge = (input: UpdateEdgeInput): RawGraphEdge => {\n    let updated: RawGraphEdge | undefined;\n    store.edges = store.edges.map((e) => {\n      if (e.id_ !== input.id_) return e;\n      updated = { ...e, properties_: input.properties_ };\n      return updated;\n    });\n    if (!updated) throw new Error(`Edge ${input.id_} not found`);\n    return updated;\n  };\n\n  // Wrap each mutation: call onChange synchronously after the mutation\n  // completes so the canvas reflects the change immediately (the playground\n  // has no async cache layer). The Promise wrapper satisfies the port contract.\n  const withRefresh = <Args extends unknown[], R>(\n    fn: (...args: Args) => R,\n  ): ((...args: Args) => Promise<R>) => {\n    return (...args: Args) => {\n      const result = fn(...args);\n      onChange();\n      return Promise.resolve(result);\n    };\n  };\n\n  return {\n    createNode: withRefresh(createNode),\n    updateNode: withRefresh(updateNode),\n    deleteNode: withRefresh((id: number) => {\n      store.nodes = store.nodes.filter((n) => n.id_ !== id);\n      store.edges = store.edges.filter(\n        (e) => e.start_id_ !== id && e.end_id_ !== id,\n      );\n    }),\n    createEdge: withRefresh(createEdge),\n    updateEdge: withRefresh(updateEdge),\n    deleteEdge: withRefresh((id: number) => {\n      store.edges = store.edges.filter((e) => e.id_ !== id);\n    }),\n    createNodeWithRelations: withRefresh(\n      (input: CreateNodeWithRelationsInput) => {\n        const node = createNode(input);\n        const { created } = diffRelations(\n          store,\n          node.id_!,\n          input.relations,\n          nextId,\n        );\n        return { node, edges: created };\n      },\n    ),\n    updateNodeWithRelations: withRefresh(\n      (input: UpdateNodeWithRelationsInput) => {\n        const node = updateNode(input);\n        const { created, deleted } = diffRelations(\n          store,\n          input.id_,\n          input.relations,\n          nextId,\n        );\n        return { node, edges: { created, deleted } };\n      },\n    ),\n    getInboundEdges: (id: number) =>\n      Promise.resolve(edgesForNode(store, id).inbound),\n    getOutboundEdges: (id: number) =>\n      Promise.resolve(edgesForNode(store, id).outbound),\n    getPairEdges: (a: number, b: number) =>\n      Promise.resolve(\n        store.edges.filter(\n          (e) =>\n            (e.start_id_ === a && e.end_id_ === b) ||\n            (e.start_id_ === b && e.end_id_ === a),\n        ),\n      ),\n    getNodes: (ids: number[]) =>\n      Promise.resolve(\n        store.nodes.filter((n) => n.id_ != null && ids.includes(n.id_)),\n      ),\n  };\n}\n\n/**\n * Strip the model's `x-graph` extension, yielding a plain property JSON Schema.\n * `GraphModelProperty` is structurally compatible with `JsonSchemaProperty`\n * (same keys: type, title, description, enum, format, items, default); the cast\n * via unknown is safe here and confined to this playground adapter.\n */\nfunction toPropertySchema(\n  type: GraphModel[number] | undefined,\n): JsonSchema | null {\n  if (!type) return null;\n  return {\n    type: \"object\",\n    properties: (type.properties ?? {}) as unknown as JsonSchema[\"properties\"],\n    required: type.required ?? [],\n  } as unknown as JsonSchema;\n}\n\n/**\n * Build a `GraphSchemaProvider` from an in-memory `GraphModel`. All lookups\n * resolve synchronously (wrapped in `Promise.resolve`); a host with the model\n * already in memory does not need an async source.\n */\nexport function createModelSchemaProvider(\n  model: GraphModel,\n): GraphSchemaProvider {\n  const byLabel = new Map(model.map((t) => [t[\"x-graph\"].label, t]));\n\n  const nodeLabels = model\n    .filter((t) => t[\"x-graph\"].type !== \"EDGE\")\n    .map((t) => t[\"x-graph\"].label);\n\n  return {\n    getNodeSchema: (label: string) =>\n      Promise.resolve(toPropertySchema(byLabel.get(label))),\n    getEdgeSchema: (type: string) =>\n      Promise.resolve(toPropertySchema(byLabel.get(type))),\n    listNodeLabels: () => Promise.resolve(nodeLabels),\n    relationsFor: (label: string): Promise<RelationDef[]> => {\n      const relations = byLabel.get(label)?.[\"x-graph\"].relations ?? [];\n      return Promise.resolve(\n        relations.map((r) => ({\n          rel_type_name: r.rel_type_name,\n          to_type_name: r.to_type_name,\n          form_field: r.form_field,\n          // cardinality drives single- vs multi-select in the form.\n          cardinality: r.cardinality as RelationDef[\"cardinality\"],\n        })),\n      );\n    },\n  };\n}\n","/**\n * Playground relation widget -- an app-level form widget that renders the\n * `__rel_*` relation fields produced by the library's schema enrichment.\n *\n * This is the playground's analog of the explorer's `cypher-select` widget: the\n * library emits the relation field schema/uiSchema (with `x-ui-widget:\n * \"entity-select\"` and `x-ui-options.targetType`), and the consuming app\n * supplies the actual widget via the form widget registry. Here the options are\n * resolved synchronously from the in-memory store; the explorer resolves them\n * via Cypher. This demonstrates the \"widget stays app-level\" seam.\n */\n\nimport React from \"react\";\nimport {\n  FormSelect,\n  FormMultiSelect,\n  type WidgetProps,\n} from \"@petrarca/sonnet-forms\";\nimport { extractDisplayLabel } from \"@petrarca/sonnet-graph\";\nimport type { GraphStore } from \"./inMemoryGraphEditing\";\n\ninterface RelationOption {\n  value: string;\n  label: string;\n}\n\n// Options for a target node-type label: every node of that label as {id, name}.\nfunction optionsForType(\n  store: GraphStore,\n  targetType: string,\n): RelationOption[] {\n  return store.nodes\n    .filter((n) => n.label_ === targetType && n.id_ != null)\n    .map((n) => ({ value: String(n.id_), label: extractDisplayLabel(n) }));\n}\n\nfunction toStringArray(value: unknown): string[] {\n  if (Array.isArray(value)) return value.map(String);\n  if (value == null || value === \"\") return [];\n  return [String(value)];\n}\n\n/**\n * Build the relation widget bound to a store. Registered under \"entity-select\"\n * (the library's default relation widget hint) so the enriched `__rel_*` fields\n * resolve to it.\n */\nexport function createRelationWidget(store: GraphStore) {\n  return function RelationWidget({\n    value,\n    onChange,\n    label,\n    options,\n    placeholder,\n  }: WidgetProps): React.ReactElement {\n    const targetType = String(options?.targetType ?? \"\");\n    const multiple = options?.multiple !== false;\n    const selectOptions = optionsForType(store, targetType);\n\n    if (multiple) {\n      return (\n        <FormMultiSelect\n          label={label || false}\n          options={selectOptions}\n          value={toStringArray(value)}\n          onChange={(v) => onChange(v)}\n          placeholder={placeholder ?? `Select ${targetType}...`}\n        />\n      );\n    }\n\n    const single = toStringArray(value)[0] ?? null;\n    return (\n      <FormSelect\n        label={label || false}\n        options={selectOptions}\n        value={single}\n        onChange={(v) => onChange(v ?? \"\")}\n        placeholder={placeholder ?? `Select ${targetType}...`}\n      />\n    );\n  };\n}\n"],"mappings":"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","names":["FormSelect","jsx"]}

package/dist/{chunk-DZB6WFHA.js → chunk-UB7462QG.js}

@@ -16,6 +16,10 @@ import {
   CheckboxWidget,
   SelectWidget,
   QuantityWidget,
+  DateWidget,
+  TimeWidget,
+  DateTimeWidget,
+  DisplayWidget,
   DEFAULT_WIDGETS
 } from "@petrarca/sonnet-forms";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -62,6 +66,10 @@ function PlayFormWidgets() {
     value: 49.99,
     unit: "EUR"
   });
+  const [dateValue, setDateValue] = useState("2026-06-15");
+  const [birthYear, setBirthYear] = useState("1980");
+  const [timeValue, setTimeValue] = useState("09:30");
+  const [dateTimeValue, setDateTimeValue] = useState("2026-06-15T09:30");
   const onTextChange = useCallback(
     (v) => setTextValue(typeof v === "string" ? v : ""),
     []
@@ -94,6 +102,10 @@ function PlayFormWidgets() {
   const onWeightChange = useMemo(() => makeQuantityHandler(setWeightValue), []);
   const onBpChange = useMemo(() => makeQuantityHandler(setBpValue), []);
   const onPriceChange = useMemo(() => makeQuantityHandler(setPriceValue), []);
+  const onStringChange = useCallback(
+    (set) => (v) => set(typeof v === "string" ? v : ""),
+    []
+  );
   return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { children: "Basic Form Widgets Playground" }),
@@ -295,6 +307,99 @@ function PlayFormWidgets() {
           ) })
         ] })
       ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "DisplayWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Read-only text block (type: null / x-ui-widget: display). Renders title + description as static text, collects no value. For instructions and notes placed between fields." }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed p-3", children: /* @__PURE__ */ jsx(
+          DisplayWidget,
+          {
+            id: "display-demo",
+            name: "displayNote",
+            value: null,
+            onChange: () => {
+            },
+            label: "Section 3: Medical history",
+            description: "Answer the following to the best of your knowledge. Leave blank if unsure.",
+            propertySchema: { type: "null" },
+            schema: dummySchema,
+            registry: DEFAULT_WIDGETS
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsx("h2", { children: "DateWidget / TimeWidget / DateTimeWidget" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Date, time, and datetime fields. Auto-resolve from schema format (date / time / date-time). Values are ISO strings; display and parsing follow the playground locale (gear icon)." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Date (format: date)", children: /* @__PURE__ */ jsx(
+            DateWidget,
+            {
+              id: "date-widget-demo",
+              name: "date",
+              value: dateValue,
+              onChange: onStringChange(setDateValue),
+              label: "Appointment date",
+              description: "Resolved from format: date",
+              propertySchema: { type: "string", format: "date" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Date, year precision", children: /* @__PURE__ */ jsx(
+            DateWidget,
+            {
+              id: "date-widget-year",
+              name: "birthYear",
+              value: birthYear,
+              onChange: onStringChange(setBirthYear),
+              label: "Birth year",
+              description: "x-ui-options.precision: year",
+              propertySchema: { type: "string", format: "date" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: { precision: "year" }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Time (format: time)", children: /* @__PURE__ */ jsx(
+            TimeWidget,
+            {
+              id: "time-widget-demo",
+              name: "time",
+              value: timeValue,
+              onChange: onStringChange(setTimeValue),
+              label: "Start time",
+              description: "Zone-free time of day",
+              propertySchema: { type: "string", format: "time" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ExampleBlock, { label: "Date & time (format: date-time)", children: /* @__PURE__ */ jsx(
+            DateTimeWidget,
+            {
+              id: "datetime-widget-demo",
+              name: "dateTime",
+              value: dateTimeValue,
+              onChange: onStringChange(setDateTimeValue),
+              label: "Scheduled at",
+              description: "Plain wall-clock, timezone hint",
+              propertySchema: { type: "string", format: "date-time" },
+              schema: dummySchema,
+              registry: DEFAULT_WIDGETS,
+              options: { timeZone: "Europe/Berlin" }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "text-[11px] bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: JSON.stringify(
+          {
+            date: dateValue,
+            birthYear,
+            time: timeValue,
+            dateTime: dateTimeValue
+          },
+          null,
+          2
+        ) }) })
+      ] }) }),
       /* @__PURE__ */ jsx(Card, { className: "border shadow-sm p-4", children: /* @__PURE__ */ jsxs(SimpleStack, { gap: "sm", children: [
         /* @__PURE__ */ jsx("h2", { children: "QuantityWidget" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Compound numeric value + unit selector. Multi-unit shows a dropdown, single-unit shows static text, prefix mode places the unit before the value." }),
@@ -398,4 +503,4 @@ function PlayFormWidgets() {
 export {
   PlayFormWidgets
 };
-//# sourceMappingURL=chunk-DZB6WFHA.js.map
+//# sourceMappingURL=chunk-UB7462QG.js.map

package/dist/chunk-UB7462QG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayFormWidgets.tsx"],"sourcesContent":["/**\n * Playground page for testing form widgets\n * Accessible at /playground/form-widgets\n */\n\nimport {\n  type Dispatch,\n  type SetStateAction,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { SimpleStack, Card } from \"@petrarca/sonnet-ui\";\nimport { ExampleBlock } from \"../PlaygroundSection\";\nimport {\n  TextInputWidget,\n  TextareaWidget,\n  NumberWidget,\n  CheckboxWidget,\n  SelectWidget,\n  QuantityWidget,\n  DateWidget,\n  TimeWidget,\n  DateTimeWidget,\n  DisplayWidget,\n  DEFAULT_WIDGETS,\n  type QuantityValue,\n} from \"@petrarca/sonnet-forms\";\nimport type { JsonSchema } from \"@petrarca/sonnet-core/schema\";\n\nconst dummySchema: JsonSchema = {\n  title: \"Form Widgets Demo\",\n  type: \"object\",\n  properties: {},\n  \"x-entity\": {\n    type: \"entity\",\n    label: \"Demo\",\n    relations: [],\n  },\n};\n\nfunction makeQuantityHandler(\n  set: Dispatch<SetStateAction<QuantityValue>>,\n): (v: unknown) => void {\n  return (v: unknown) => {\n    if (v != null && typeof v === \"object\" && !Array.isArray(v)) {\n      set(v as QuantityValue);\n    }\n  };\n}\n\nexport default function PlayFormWidgets() {\n  // State for each widget\n  const [textValue, setTextValue] = useState<string>(\"\");\n  const [textareaValue, setTextareaValue] = useState<string>(\"\");\n  const [numberValue, setNumberValue] = useState<number | undefined>(undefined);\n  const [checkboxValue, setCheckboxValue] = useState<boolean>(false);\n  const [selectValue, setSelectValue] = useState<string>(\"\");\n  const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n  const [multiSelectColorValue, setMultiSelectColorValue] = useState<string[]>(\n    [],\n  );\n  const [tempValue, setTempValue] = useState<QuantityValue>({\n    value: 37.0,\n    unit: \"degC\",\n  });\n  const [weightValue, setWeightValue] = useState<QuantityValue>({\n    value: undefined,\n    unit: \"kg\",\n  });\n  const [bpValue, setBpValue] = useState<QuantityValue>({\n    value: 72,\n    unit: \"bpm\",\n  });\n  const [priceValue, setPriceValue] = useState<QuantityValue>({\n    value: 49.99,\n    unit: \"EUR\",\n  });\n  const [dateValue, setDateValue] = useState<string>(\"2026-06-15\");\n  const [birthYear, setBirthYear] = useState<string>(\"1980\");\n  const [timeValue, setTimeValue] = useState<string>(\"09:30\");\n  const [dateTimeValue, setDateTimeValue] =\n    useState<string>(\"2026-06-15T09:30\");\n\n  // Narrowing adapters: WidgetProps.onChange is (value: unknown) => void.\n  // All quantity adapters have stable identity (empty deps) -- the fallback\n  // branch is dropped so the state setter is not captured in the closure.\n  const onTextChange = useCallback(\n    (v: unknown) => setTextValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onTextareaChange = useCallback(\n    (v: unknown) => setTextareaValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onNumberChange = useCallback(\n    (v: unknown) => setNumberValue(typeof v === \"number\" ? v : undefined),\n    [],\n  );\n  const onCheckboxChange = useCallback(\n    (v: unknown) => setCheckboxValue(typeof v === \"boolean\" ? v : false),\n    [],\n  );\n  const onSelectChange = useCallback(\n    (v: unknown) => setSelectValue(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n  const onMultiSelectChange = useCallback(\n    (v: unknown) =>\n      setMultiSelectValue(Array.isArray(v) ? (v as string[]) : []),\n    [],\n  );\n  const onMultiSelectColorChange = useCallback(\n    (v: unknown) =>\n      setMultiSelectColorValue(Array.isArray(v) ? (v as string[]) : []),\n    [],\n  );\n  // Quantity adapters: QuantityWidget passes unknown, guard narrows to QuantityValue.\n  const onTempChange = useMemo(() => makeQuantityHandler(setTempValue), []);\n  const onWeightChange = useMemo(() => makeQuantityHandler(setWeightValue), []);\n  const onBpChange = useMemo(() => makeQuantityHandler(setBpValue), []);\n  const onPriceChange = useMemo(() => makeQuantityHandler(setPriceValue), []);\n  const onStringChange = useCallback(\n    (set: Dispatch<SetStateAction<string>>) => (v: unknown) =>\n      set(typeof v === \"string\" ? v : \"\"),\n    [],\n  );\n\n  return (\n    <div className=\"w-full max-w-4xl space-y-6\">\n      <div>\n        <h1>Basic Form Widgets Playground</h1>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Interactive demonstration of all basic form widgets\n        </p>\n      </div>\n\n      <div>\n        <SimpleStack gap=\"md\" style={{ maxWidth: \"900px\" }}>\n          {/* TextInputWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>TextInputWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Single-line text input with support for various HTML input types\n                (text, email, password, url, etc.)\n              </p>\n\n              <TextInputWidget\n                id=\"text-input-demo\"\n                name=\"textInput\"\n                value={textValue}\n                onChange={onTextChange}\n                label=\"Text Input\"\n                description=\"Enter some text\"\n                placeholder=\"Type here...\"\n                propertySchema={{ type: \"string\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n              />\n\n              <TextInputWidget\n                id=\"text-input-email\"\n                name=\"emailInput\"\n                value={textValue}\n                onChange={onTextChange}\n                label=\"Email Input\"\n                description=\"Input type: email\"\n                placeholder=\"user@example.com\"\n                propertySchema={{ type: \"string\", format: \"email\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ inputType: \"email\" }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: textValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* TextareaWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>TextareaWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Multi-line text input with configurable rows and autosize\n                support\n              </p>\n\n              <TextareaWidget\n                id=\"textarea-demo\"\n                name=\"textarea\"\n                value={textareaValue}\n                onChange={onTextareaChange}\n                label=\"Textarea\"\n                description=\"Enter multiple lines\"\n                placeholder=\"Type here...\"\n                propertySchema={{ type: \"string\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ rows: 4 }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: textareaValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* NumberWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>NumberWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Number input with support for min, max, and step constraints\n              </p>\n\n              <NumberWidget\n                id=\"number-demo\"\n                name=\"number\"\n                value={numberValue}\n                onChange={onNumberChange}\n                label=\"Number Input\"\n                description=\"Enter a number (0-100, step: 5)\"\n                placeholder=\"0\"\n                propertySchema={{ type: \"number\", minimum: 0, maximum: 100 }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n                options={{ step: 5 }}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: numberValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* CheckboxWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>CheckboxWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Boolean checkbox for true/false values\n              </p>\n\n              <CheckboxWidget\n                id=\"checkbox-demo\"\n                name=\"checkbox\"\n                value={checkboxValue}\n                onChange={onCheckboxChange}\n                label=\"Enable Feature\"\n                description=\"Check to enable\"\n                propertySchema={{ type: \"boolean\" }}\n                schema={dummySchema}\n                registry={DEFAULT_WIDGETS}\n              />\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>{JSON.stringify({ value: checkboxValue }, null, 2)}</code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* SelectWidget - All Variations */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>SelectWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Dropdown select for enum values with single-select,\n                multi-select, and custom badge colors\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Single select\">\n                  <SelectWidget\n                    id=\"select-demo\"\n                    name=\"select\"\n                    value={selectValue}\n                    onChange={onSelectChange}\n                    label=\"Select Status\"\n                    description=\"Choose a status\"\n                    placeholder=\"Select one...\"\n                    propertySchema={{\n                      type: \"string\",\n                      enum: [\"active\", \"inactive\", \"pending\", \"archived\"],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      enumNames: {\n                        active: \"Active\",\n                        inactive: \"Inactive\",\n                        pending: \"Pending\",\n                        archived: \"Archived\",\n                      },\n                      searchable: true,\n                      clearable: true,\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Multi select\">\n                  <SelectWidget\n                    id=\"multiselect-demo\"\n                    name=\"multiselect\"\n                    value={multiSelectValue}\n                    onChange={onMultiSelectChange}\n                    label=\"Select Tags\"\n                    description=\"Choose multiple tags\"\n                    placeholder=\"Select tags...\"\n                    propertySchema={{\n                      type: \"array\",\n                      items: { type: \"string\" },\n                      enum: [\n                        \"frontend\",\n                        \"backend\",\n                        \"database\",\n                        \"devops\",\n                        \"testing\",\n                        \"security\",\n                      ],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{ searchable: true, clearable: true }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Custom badge color\">\n                  <SelectWidget\n                    id=\"multiselect-color-demo\"\n                    name=\"multiselectColor\"\n                    value={multiSelectColorValue}\n                    onChange={onMultiSelectColorChange}\n                    label=\"Select Categories\"\n                    description=\"Custom grape-colored badges\"\n                    placeholder=\"Select categories...\"\n                    propertySchema={{\n                      type: \"array\",\n                      items: { type: \"string\" },\n                      enum: [\n                        \"feature\",\n                        \"bugfix\",\n                        \"enhancement\",\n                        \"documentation\",\n                        \"refactor\",\n                      ],\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      searchable: true,\n                      clearable: true,\n                      badgeColor: \"grape\",\n                      enumNames: {\n                        feature: \"Feature\",\n                        bugfix: \"Bug Fix\",\n                        enhancement: \"Enhancement\",\n                        documentation: \"Documentation\",\n                        refactor: \"Refactor\",\n                      },\n                    }}\n                  />\n                </ExampleBlock>\n              </div>\n            </SimpleStack>\n          </Card>\n\n          {/* DisplayWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>DisplayWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Read-only text block (type: null / x-ui-widget: display).\n                Renders title + description as static text, collects no value.\n                For instructions and notes placed between fields.\n              </p>\n\n              <div className=\"rounded-md border border-dashed p-3\">\n                <DisplayWidget\n                  id=\"display-demo\"\n                  name=\"displayNote\"\n                  value={null}\n                  onChange={() => {}}\n                  label=\"Section 3: Medical history\"\n                  description=\"Answer the following to the best of your knowledge. Leave blank if unsure.\"\n                  propertySchema={{ type: \"null\" }}\n                  schema={dummySchema}\n                  registry={DEFAULT_WIDGETS}\n                />\n              </div>\n            </SimpleStack>\n          </Card>\n\n          {/* Date / Time / DateTime widgets */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>DateWidget / TimeWidget / DateTimeWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Date, time, and datetime fields. Auto-resolve from schema format\n                (date / time / date-time). Values are ISO strings; display and\n                parsing follow the playground locale (gear icon).\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Date (format: date)\">\n                  <DateWidget\n                    id=\"date-widget-demo\"\n                    name=\"date\"\n                    value={dateValue}\n                    onChange={onStringChange(setDateValue)}\n                    label=\"Appointment date\"\n                    description=\"Resolved from format: date\"\n                    propertySchema={{ type: \"string\", format: \"date\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Date, year precision\">\n                  <DateWidget\n                    id=\"date-widget-year\"\n                    name=\"birthYear\"\n                    value={birthYear}\n                    onChange={onStringChange(setBirthYear)}\n                    label=\"Birth year\"\n                    description=\"x-ui-options.precision: year\"\n                    propertySchema={{ type: \"string\", format: \"date\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{ precision: \"year\" }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Time (format: time)\">\n                  <TimeWidget\n                    id=\"time-widget-demo\"\n                    name=\"time\"\n                    value={timeValue}\n                    onChange={onStringChange(setTimeValue)}\n                    label=\"Start time\"\n                    description=\"Zone-free time of day\"\n                    propertySchema={{ type: \"string\", format: \"time\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Date & time (format: date-time)\">\n                  <DateTimeWidget\n                    id=\"datetime-widget-demo\"\n                    name=\"dateTime\"\n                    value={dateTimeValue}\n                    onChange={onStringChange(setDateTimeValue)}\n                    label=\"Scheduled at\"\n                    description=\"Plain wall-clock, timezone hint\"\n                    propertySchema={{ type: \"string\", format: \"date-time\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{ timeZone: \"Europe/Berlin\" }}\n                  />\n                </ExampleBlock>\n              </div>\n\n              <pre className=\"text-[11px] bg-muted p-2 rounded overflow-x-auto\">\n                <code>\n                  {JSON.stringify(\n                    {\n                      date: dateValue,\n                      birthYear,\n                      time: timeValue,\n                      dateTime: dateTimeValue,\n                    },\n                    null,\n                    2,\n                  )}\n                </code>\n              </pre>\n            </SimpleStack>\n          </Card>\n\n          {/* QuantityWidget */}\n          <Card className=\"border shadow-sm p-4\">\n            <SimpleStack gap=\"sm\">\n              <h2>QuantityWidget</h2>\n              <p className=\"text-sm text-muted-foreground\">\n                Compound numeric value + unit selector. Multi-unit shows a\n                dropdown, single-unit shows static text, prefix mode places the\n                unit before the value.\n              </p>\n\n              <div className=\"grid grid-cols-2 gap-3 pt-2\">\n                <ExampleBlock label=\"Multi-unit suffix (Temperature)\">\n                  <QuantityWidget\n                    id=\"quantity-temp\"\n                    name=\"temperature\"\n                    value={tempValue}\n                    onChange={onTempChange}\n                    label=\"Temperature\"\n                    description=\"Body temperature with per-unit validation\"\n                    placeholder=\"0.0\"\n                    propertySchema={{ type: \"object\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 1,\n                      units: [\n                        { value: \"degC\", label: \"C\", min: 35, max: 42 },\n                        { value: \"degF\", label: \"F\", min: 95, max: 108 },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Single-unit suffix (Weight)\">\n                  <QuantityWidget\n                    id=\"quantity-weight\"\n                    name=\"weight\"\n                    value={weightValue}\n                    onChange={onWeightChange}\n                    label=\"Weight\"\n                    description=\"Single unit, global min/max from schema\"\n                    placeholder=\"0\"\n                    propertySchema={{\n                      type: \"object\",\n                      minimum: 0,\n                      maximum: 500,\n                    }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 1,\n                      units: [{ value: \"kg\", label: \"kg\" }],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Integer mode (Heart Rate)\">\n                  <QuantityWidget\n                    id=\"quantity-hr\"\n                    name=\"heartRate\"\n                    value={bpValue}\n                    onChange={onBpChange}\n                    label=\"Heart Rate\"\n                    description=\"Integer with per-unit validation (30-250 bpm)\"\n                    placeholder=\"0\"\n                    propertySchema={{ type: \"object\" }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 0,\n                      units: [\n                        { value: \"bpm\", label: \"bpm\", min: 30, max: 250 },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n                <ExampleBlock label=\"Multi-unit prefix (Currency)\">\n                  <QuantityWidget\n                    id=\"quantity-price\"\n                    name=\"price\"\n                    value={priceValue}\n                    onChange={onPriceChange}\n                    label=\"Price\"\n                    description=\"Currency symbol as prefix, multi-unit selector\"\n                    placeholder=\"0.00\"\n                    propertySchema={{ type: \"object\", minimum: 0 }}\n                    schema={dummySchema}\n                    registry={DEFAULT_WIDGETS}\n                    options={{\n                      precision: 2,\n                      unitPosition: \"prefix\",\n                      units: [\n                        { value: \"EUR\", label: \"EUR\" },\n                        { value: \"USD\", label: \"$\" },\n                        { value: \"GBP\", label: \"GBP\" },\n                      ],\n                    }}\n                  />\n                </ExampleBlock>\n              </div>\n            </SimpleStack>\n          </Card>\n        </SimpleStack>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-6DZ3TSV4.js → chunk-ZSUCFEB6.js}

@@ -76,6 +76,45 @@ var NESTED_OBJECT_SCHEMA = {
   },
   required: ["family_name", "given_name"]
 };
+var ONEOF_SCHEMA = {
+  title: "Payment",
+  type: "object",
+  properties: {
+    amount: { type: "number", title: "Amount" },
+    method: {
+      type: "object",
+      title: "Payment method",
+      discriminator: { propertyName: "kind" },
+      oneOf: [
+        {
+          title: "Credit card",
+          properties: {
+            kind: { const: "card" },
+            cardNumber: { type: "string", title: "Card number" },
+            expiry: { type: "string", title: "Expiry (MM/YY)" }
+          },
+          required: ["cardNumber"]
+        },
+        {
+          title: "Bank transfer",
+          properties: {
+            kind: { const: "bank" },
+            iban: { type: "string", title: "IBAN" }
+          },
+          required: ["iban"]
+        },
+        {
+          title: "Cash",
+          properties: {
+            kind: { const: "cash" },
+            note: { type: "string", title: "Note" }
+          }
+        }
+      ]
+    }
+  },
+  required: ["amount"]
+};
 var ARRAY_OF_OBJECTS_SCHEMA = {
   title: "Medication Request",
   type: "object",
@@ -317,15 +356,69 @@ var ROW_LAYOUT_UISCHEMA = {
     ]
   }
 };
+var GROUP_LAYOUT_UISCHEMA = {
+  "x-ui-layout": {
+    groups: [
+      {
+        label: "Identity",
+        rows: [
+          { fields: ["given_name", "family_name"], columns: "1fr 1fr" },
+          { fields: ["npi", "specialty"], columns: "1fr 1fr" }
+        ]
+      },
+      {
+        label: "Contact",
+        rows: [{ fields: ["email", "phone"], columns: "1fr 1fr" }]
+      },
+      {
+        label: "Engagement",
+        rows: [
+          { fields: ["start_date", "end_date"], columns: "1fr 1fr" },
+          { fields: ["active"] }
+        ]
+      },
+      {
+        label: "Notes",
+        rows: [{ fields: ["notes"] }],
+        rule: {
+          effect: "show",
+          condition: { scope: "/active", schema: { const: true } }
+        }
+      }
+    ]
+  }
+};
+var STEPPER_LAYOUT_UISCHEMA = {
+  "x-ui-layout": {
+    variant: "stepper",
+    groups: GROUP_LAYOUT_UISCHEMA["x-ui-layout"].groups
+  }
+};
+var SECTIONS_LAYOUT_UISCHEMA = {
+  "x-ui-layout": {
+    variant: "sections",
+    groups: GROUP_LAYOUT_UISCHEMA["x-ui-layout"].groups
+  }
+};
 var sampleSchemas = {
   flat: SAMPLE_SCHEMA,
   nested_object: NESTED_OBJECT_SCHEMA,
+  one_of: ONEOF_SCHEMA,
   array_of_objects: ARRAY_OF_OBJECTS_SCHEMA,
   ref_defs: REF_SCHEMA,
   mixed: MIXED_SCHEMA,
   horizontal_array: HORIZONTAL_ARRAY_SCHEMA,
   horizontal_full: HORIZONTAL_FULL_SCHEMA,
-  row_layout: ROW_LAYOUT_SCHEMA
+  row_layout: ROW_LAYOUT_SCHEMA,
+  tab_layout: ROW_LAYOUT_SCHEMA,
+  stepper_layout: ROW_LAYOUT_SCHEMA,
+  sections_layout: ROW_LAYOUT_SCHEMA
+};
+var PAIRED_UISCHEMAS = {
+  row_layout: ROW_LAYOUT_UISCHEMA,
+  tab_layout: GROUP_LAYOUT_UISCHEMA,
+  stepper_layout: STEPPER_LAYOUT_UISCHEMA,
+  sections_layout: SECTIONS_LAYOUT_UISCHEMA
 };
 var sampleUiSchemas = {
   empty: "{}",
@@ -413,7 +506,7 @@ function usePlayFormsState() {
     setSchemaError("");
     setFormData({});
     setDataText("{}");
-    const pairedUi = value === "row_layout" ? ROW_LAYOUT_UISCHEMA : {};
+    const pairedUi = PAIRED_UISCHEMAS[value] ?? {};
     setUiSchemaText(JSON.stringify(pairedUi, null, 2));
     setActiveUiSchema(pairedUi);
     setUiSchemaError("");
@@ -635,12 +728,16 @@ function SchemaEditorColumn({
 var SCHEMA_PRESET_OPTIONS = [
   { value: "flat", label: "Practitioner (flat fields)" },
   { value: "nested_object", label: "Patient (nested object)" },
+  { value: "one_of", label: "Payment (oneOf variant)" },
   { value: "array_of_objects", label: "Medication Request (array)" },
   { value: "ref_defs", label: "Care Plan ($ref / $defs)" },
   { value: "mixed", label: "Organization (mixed)" },
   { value: "horizontal_array", label: "Observations (horizontal, compact)" },
   { value: "horizontal_full", label: "Allergies (horizontal, full height)" },
-  { value: "row_layout", label: "Registration (row layout)" }
+  { value: "row_layout", label: "Registration (row layout)" },
+  { value: "tab_layout", label: "Registration (tab layout)" },
+  { value: "stepper_layout", label: "Registration (stepper layout)" },
+  { value: "sections_layout", label: "Registration (sections layout)" }
 ];
 var UISCHEMA_PRESET_OPTIONS = [
   { value: "empty", label: "Empty (no customization)" },
@@ -877,4 +974,4 @@ function PlayForms() {
 export {
   PlayForms
 };
-//# sourceMappingURL=chunk-6DZ3TSV4.js.map
+//# sourceMappingURL=chunk-ZSUCFEB6.js.map