@petrarca/sonnet-playground 0.4.2 → 0.5.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-PBT6HTKY.js

@@ -0,0 +1,191 @@
+// src/pages/PlaySchemaDesigner.tsx
+import { useState } from "react";
+import {
+  SchemaDesigner
+} from "@petrarca/sonnet-schema-designer";
+import { FormSelect } from "@petrarca/sonnet-forms";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SAMPLE_SCHEMA = {
+  title: "Patient",
+  type: "object",
+  properties: {
+    first_name: { type: "string", title: "First name", minLength: 1 },
+    last_name: { type: "string", title: "Last name", minLength: 1 },
+    date_of_birth: { type: "string", format: "date", title: "Date of birth" },
+    gender: {
+      type: "string",
+      title: "Gender",
+      enum: ["male", "female", "other", "unknown"]
+    },
+    active: { type: "boolean", title: "Active" },
+    contact: {
+      type: "object",
+      title: "Contact",
+      properties: {
+        email: { type: "string", format: "email", title: "Email" },
+        phone: { type: "string", title: "Phone" }
+      },
+      required: ["email"]
+    },
+    addresses: {
+      type: "array",
+      title: "Addresses",
+      minItems: 1,
+      maxItems: 3,
+      items: {
+        type: "object",
+        properties: {
+          street: { type: "string", title: "Street" },
+          city: { type: "string", title: "City" },
+          zip: { type: "string", title: "ZIP" },
+          country: { type: "string", title: "Country" }
+        },
+        required: ["street", "city"]
+      }
+    }
+  },
+  required: ["first_name", "last_name"]
+};
+var AUDIT_SCHEMA = {
+  title: "AuditEvent",
+  type: "object",
+  properties: {
+    actor: {
+      type: "object",
+      title: "Actor",
+      properties: {
+        type: { type: "string", title: "Type" },
+        id: { type: "string", title: "ID" },
+        metadata: {
+          type: "object",
+          title: "Actor metadata",
+          properties: { role: { type: "string", title: "Role" } }
+        }
+      }
+    },
+    targets: {
+      type: "array",
+      title: "Targets",
+      items: {
+        type: "object",
+        properties: {
+          type: { type: "string", title: "Type" },
+          id: { type: "string", title: "ID" },
+          metadata: {
+            type: "object",
+            title: "Target metadata",
+            properties: { ward: { type: "string", title: "Ward" } }
+          }
+        }
+      }
+    },
+    metadata: {
+      type: "object",
+      title: "Metadata",
+      properties: { reason: { type: "string", title: "Reason" } }
+    }
+  }
+};
+var AUDIT_EDITABLE_PATHS = [
+  "/properties/metadata/properties",
+  "/properties/actor/properties/metadata/properties",
+  "/properties/targets/items/properties/metadata/properties"
+];
+var PROFILES = {
+  full: {
+    label: "Full (schema + uiSchema)",
+    description: "Default: author the schema and its form presentation hints.",
+    schema: SAMPLE_SCHEMA,
+    capabilities: { previews: ["form", "table", "json", "capabilities"] }
+  },
+  data: {
+    label: "Data schema only",
+    description: "Pure JSON Schema (audit, terminology): no UI/Combined tabs, JSON preview only.",
+    schema: SAMPLE_SCHEMA,
+    capabilities: { mode: "data", previews: ["json", "capabilities"] }
+  },
+  scoped: {
+    label: "Scoped (audit event)",
+    description: "Fixed envelope; only the three metadata containers are editable.",
+    schema: AUDIT_SCHEMA,
+    capabilities: {
+      mode: "data",
+      editablePaths: AUDIT_EDITABLE_PATHS,
+      previews: ["json", "capabilities"]
+    }
+  },
+  structure: {
+    label: "Structure only (no preview)",
+    description: "Tree + inspector only; the center preview pane is hidden.",
+    schema: SAMPLE_SCHEMA,
+    capabilities: { mode: "data", previews: [] }
+  },
+  readonly: {
+    label: "Read-only",
+    description: "Fully locked -- view only, no edit affordances.",
+    schema: SAMPLE_SCHEMA,
+    readOnly: true,
+    capabilities: { previews: ["form", "table", "json", "capabilities"] }
+  }
+};
+function PlaySchemaDesigner() {
+  const [profileKey, setProfileKey] = useState("full");
+  const profile = PROFILES[profileKey];
+  const [schema, setSchema] = useState(profile.schema);
+  const [uiSchema, setUiSchema] = useState({});
+  const selectProfile = (key) => {
+    setProfileKey(key);
+    setSchema(PROFILES[key].schema);
+    setUiSchema({});
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-3 h-[calc(100vh-8rem)]", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { children: "Schema Designer" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Visually author a JSON Schema and its UI presentation hints. Edits flow through onChange as a valid schema + uiSchema." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "capability-profile",
+          className: "shrink-0 text-sm font-medium",
+          children: "Capability profile"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "w-72", children: /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          id: "capability-profile",
+          name: "profile",
+          value: profileKey,
+          options: Object.keys(PROFILES).map((k) => ({
+            value: k,
+            label: PROFILES[k].label
+          })),
+          onChange: (v) => selectProfile(v ?? "full"),
+          clearable: false
+        }
+      ) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: profile.description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(
+      SchemaDesigner,
+      {
+        schema,
+        uiSchema,
+        capabilities: profile.capabilities,
+        readOnly: profile.readOnly,
+        onChange: (nextSchema, nextUiSchema) => {
+          setSchema(nextSchema);
+          setUiSchema(nextUiSchema);
+        }
+      },
+      profileKey
+    ) })
+  ] });
+}
+
+export {
+  PlaySchemaDesigner
+};
+//# sourceMappingURL=chunk-PBT6HTKY.js.map

package/dist/chunk-PBT6HTKY.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\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\" | \"readonly\";\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  readonly: {\n    label: \"Read-only\",\n    description: \"Fully locked -- view only, no edit affordances.\",\n    schema: SAMPLE_SCHEMA,\n    readOnly: true,\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":[]}

package/dist/{chunk-YOOWJORD.js → chunk-Q6NLY2BZ.js}

@@ -8,6 +8,7 @@ import { toast } from "sonner";
 import {
   Spinner,
   Button,
+  IconButton,
   Badge,
   Alert,
   AlertDescription,
@@ -40,7 +41,15 @@ import {
   DialogTrigger
 } from "@petrarca/sonnet-ui";
 import { useClipboard, useDisclosure } from "@petrarca/sonnet-core/hooks";
-import { Info, AlertTriangle, CheckCircle } from "lucide-react";
+import {
+  Info,
+  AlertTriangle,
+  CheckCircle,
+  Pencil,
+  Trash2,
+  Plus,
+  Copy
+} from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function PlayCoreComponents() {
   const [spinnerSize, setSpinnerSize] = useState("md");
@@ -91,6 +100,48 @@ function PlayCoreComponents() {
           ] })
         }
       ),
+      /* @__PURE__ */ jsx(
+        PlaygroundSection,
+        {
+          title: "Icon Button",
+          description: "Compact, square icon-only button with tooltip + accessible label. The house standard for inline affordances (edit/delete) and small toolbar actions.",
+          variant: "card",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Ghost (inline affordances)" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx(IconButton, { label: "Edit", children: /* @__PURE__ */ jsx(Pencil, {}) }),
+                /* @__PURE__ */ jsx(IconButton, { label: "Delete", tone: "destructive", children: /* @__PURE__ */ jsx(Trash2, {}) }),
+                /* @__PURE__ */ jsx(IconButton, { label: "Copy", children: /* @__PURE__ */ jsx(Copy, {}) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Outline (toolbar actions)" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx(IconButton, { label: "Add node type", variant: "outline", children: /* @__PURE__ */ jsx(Plus, {}) }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    label: "Delete (outline)",
+                    variant: "outline",
+                    tone: "destructive",
+                    children: /* @__PURE__ */ jsx(Trash2, {})
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-3", children: "Disabled" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx(IconButton, { label: "Edit (disabled)", disabled: true, children: /* @__PURE__ */ jsx(Pencil, {}) }),
+                /* @__PURE__ */ jsx(IconButton, { label: "Add (disabled)", variant: "outline", disabled: true, children: /* @__PURE__ */ jsx(Plus, {}) })
+              ] })
+            ] })
+          ] })
+        }
+      ),
       /* @__PURE__ */ jsx(
         PlaygroundSection,
         {
@@ -931,4 +982,4 @@ function PlayCoreComponents() {
 export {
   PlayCoreComponents
 };
-//# sourceMappingURL=chunk-YOOWJORD.js.map
+//# sourceMappingURL=chunk-Q6NLY2BZ.js.map