@petrarca/sonnet-playground 0.4.2 → 0.5.0

package/dist/chunk-C2P3UQMZ.js

@@ -0,0 +1,1058 @@
+// src/pages/PlayGraph.tsx
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  GraphVisualizer,
+  ActionPanel,
+  GraphA11yList,
+  GraphRendererProvider,
+  GraphStoresContext,
+  GraphEditToolbar,
+  createGraphDataStore,
+  createGraphFilterStore,
+  createGraphExplorationStore,
+  createSelectionStore,
+  createGraphFocusStore,
+  enrichNodes,
+  enrichEdges,
+  buildColorPalette,
+  GraphModelEditor
+} from "@petrarca/sonnet-graph";
+import { DEFAULT_WIDGETS } from "@petrarca/sonnet-forms";
+
+// src/pages/graph/inMemoryGraphEditing.ts
+function createIdAllocator(store) {
+  const allIds = [
+    ...store.nodes.map((n) => n.id_ ?? 0),
+    ...store.edges.map((e) => e.id_ ?? 0)
+  ];
+  const max = allIds.reduce((m, id) => id > m ? id : m, 0);
+  let next = max + 1;
+  return () => next++;
+}
+function edgesForNode(store, id) {
+  return {
+    inbound: store.edges.filter((e) => e.end_id_ === id),
+    outbound: store.edges.filter((e) => e.start_id_ === id)
+  };
+}
+function diffRelations(store, nodeId, relations, nextId) {
+  const created = [];
+  const deleted = [];
+  for (const [relType, targetIds] of Object.entries(relations)) {
+    const existing = store.edges.filter(
+      (e) => e.label_ === relType && e.start_id_ === nodeId
+    );
+    const desired = new Set(targetIds);
+    for (const edge of existing) {
+      if (!desired.has(edge.end_id_) && edge.id_ != null) {
+        deleted.push(edge.id_);
+      }
+    }
+    const present = new Set(existing.map((e) => e.end_id_));
+    for (const targetId of targetIds) {
+      if (!present.has(targetId)) {
+        const edge = {
+          id_: nextId(),
+          label_: relType,
+          start_id_: nodeId,
+          end_id_: targetId,
+          properties_: {}
+        };
+        created.push(edge);
+      }
+    }
+  }
+  store.edges = store.edges.filter((e) => e.id_ == null || !deleted.includes(e.id_)).concat(created);
+  return { created, deleted };
+}
+function createInMemoryPort(store, onChange) {
+  const nextId = createIdAllocator(store);
+  const createNode = (input) => {
+    const node = {
+      id_: nextId(),
+      label_: input.label_,
+      properties_: input.properties_
+    };
+    store.nodes = [...store.nodes, node];
+    return node;
+  };
+  const updateNode = (input) => {
+    const node = {
+      id_: input.id_,
+      label_: input.label_,
+      properties_: input.properties_
+    };
+    store.nodes = store.nodes.map((n) => n.id_ === input.id_ ? node : n);
+    return node;
+  };
+  const createEdge = (input) => {
+    const edge = {
+      id_: nextId(),
+      label_: input.label_,
+      start_id_: input.start_id_,
+      end_id_: input.end_id_,
+      properties_: input.properties_ ?? {}
+    };
+    store.edges = [...store.edges, edge];
+    return edge;
+  };
+  const updateEdge = (input) => {
+    let updated;
+    store.edges = store.edges.map((e) => {
+      if (e.id_ !== input.id_) return e;
+      updated = { ...e, properties_: input.properties_ };
+      return updated;
+    });
+    if (!updated) throw new Error(`Edge ${input.id_} not found`);
+    return updated;
+  };
+  const withRefresh = (fn) => {
+    return (...args) => {
+      const result = fn(...args);
+      onChange();
+      return Promise.resolve(result);
+    };
+  };
+  return {
+    createNode: withRefresh(createNode),
+    updateNode: withRefresh(updateNode),
+    deleteNode: withRefresh((id) => {
+      store.nodes = store.nodes.filter((n) => n.id_ !== id);
+      store.edges = store.edges.filter(
+        (e) => e.start_id_ !== id && e.end_id_ !== id
+      );
+    }),
+    createEdge: withRefresh(createEdge),
+    updateEdge: withRefresh(updateEdge),
+    deleteEdge: withRefresh((id) => {
+      store.edges = store.edges.filter((e) => e.id_ !== id);
+    }),
+    createNodeWithRelations: withRefresh(
+      (input) => {
+        const node = createNode(input);
+        const { created } = diffRelations(
+          store,
+          node.id_,
+          input.relations,
+          nextId
+        );
+        return { node, edges: created };
+      }
+    ),
+    updateNodeWithRelations: withRefresh(
+      (input) => {
+        const node = updateNode(input);
+        const { created, deleted } = diffRelations(
+          store,
+          input.id_,
+          input.relations,
+          nextId
+        );
+        return { node, edges: { created, deleted } };
+      }
+    ),
+    getInboundEdges: (id) => Promise.resolve(edgesForNode(store, id).inbound),
+    getOutboundEdges: (id) => Promise.resolve(edgesForNode(store, id).outbound),
+    getPairEdges: (a, b) => Promise.resolve(
+      store.edges.filter(
+        (e) => e.start_id_ === a && e.end_id_ === b || e.start_id_ === b && e.end_id_ === a
+      )
+    ),
+    getNodes: (ids) => Promise.resolve(
+      store.nodes.filter((n) => n.id_ != null && ids.includes(n.id_))
+    )
+  };
+}
+function toPropertySchema(type) {
+  if (!type) return null;
+  return {
+    type: "object",
+    properties: type.properties ?? {},
+    required: type.required ?? []
+  };
+}
+function createModelSchemaProvider(model) {
+  const byLabel = new Map(model.map((t) => [t["x-graph"].label, t]));
+  const nodeLabels = model.filter((t) => t["x-graph"].type !== "EDGE").map((t) => t["x-graph"].label);
+  return {
+    getNodeSchema: (label) => Promise.resolve(toPropertySchema(byLabel.get(label))),
+    getEdgeSchema: (type) => Promise.resolve(toPropertySchema(byLabel.get(type))),
+    listNodeLabels: () => Promise.resolve(nodeLabels),
+    relationsFor: (label) => {
+      const relations = byLabel.get(label)?.["x-graph"].relations ?? [];
+      return Promise.resolve(
+        relations.map((r) => ({
+          rel_type_name: r.rel_type_name,
+          to_type_name: r.to_type_name,
+          form_field: r.form_field,
+          // cardinality drives single- vs multi-select in the form.
+          cardinality: r.cardinality
+        }))
+      );
+    }
+  };
+}
+
+// src/pages/graph/relationWidget.tsx
+import {
+  FormSelect,
+  FormMultiSelect
+} from "@petrarca/sonnet-forms";
+import { extractDisplayLabel } from "@petrarca/sonnet-graph";
+import { jsx } from "react/jsx-runtime";
+function optionsForType(store, targetType) {
+  return store.nodes.filter((n) => n.label_ === targetType && n.id_ != null).map((n) => ({ value: String(n.id_), label: extractDisplayLabel(n) }));
+}
+function toStringArray(value) {
+  if (Array.isArray(value)) return value.map(String);
+  if (value == null || value === "") return [];
+  return [String(value)];
+}
+function createRelationWidget(store) {
+  return function RelationWidget({
+    value,
+    onChange,
+    label,
+    options,
+    placeholder
+  }) {
+    const targetType = String(options?.targetType ?? "");
+    const multiple = options?.multiple !== false;
+    const selectOptions = optionsForType(store, targetType);
+    if (multiple) {
+      return /* @__PURE__ */ jsx(
+        FormMultiSelect,
+        {
+          label: label || false,
+          options: selectOptions,
+          value: toStringArray(value),
+          onChange: (v) => onChange(v),
+          placeholder: placeholder ?? `Select ${targetType}...`
+        }
+      );
+    }
+    const single = toStringArray(value)[0] ?? null;
+    return /* @__PURE__ */ jsx(
+      FormSelect,
+      {
+        label: label || false,
+        options: selectOptions,
+        value: single,
+        onChange: (v) => onChange(v ?? ""),
+        placeholder: placeholder ?? `Select ${targetType}...`
+      }
+    );
+  };
+}
+
+// src/pages/PlayGraph.tsx
+import {
+  Button,
+  Alert,
+  AlertDescription,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  ResizeHandle
+} from "@petrarca/sonnet-ui";
+import { FormSelect as FormSelect2 } from "@petrarca/sonnet-forms";
+import { Play, RotateCcw } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var TECH_NODES = [
+  {
+    id_: 1,
+    label_: "Product",
+    properties_: { key: "product-a", name: "Product A" }
+  },
+  {
+    id_: 2,
+    label_: "Product",
+    properties_: { key: "product-b", name: "Product B" }
+  },
+  {
+    id_: 3,
+    label_: "TechnologyStack",
+    properties_: { key: "product-a-stack", name: "Product A stack" }
+  },
+  {
+    id_: 4,
+    label_: "TechnologyStack",
+    properties_: { key: "product-b-stack", name: "Product B stack" }
+  },
+  {
+    id_: 5,
+    label_: "Technology",
+    properties_: { key: "react", name: "React" }
+  },
+  {
+    id_: 6,
+    label_: "Technology",
+    properties_: { key: "postgresql", name: "PostgreSQL" }
+  },
+  {
+    id_: 7,
+    label_: "Technology",
+    properties_: { key: "kafka", name: "Kafka" }
+  },
+  {
+    id_: 8,
+    label_: "Technology",
+    properties_: { key: "go", name: "Go" }
+  },
+  {
+    id_: 9,
+    label_: "TechnologyCategory",
+    properties_: { key: "frontend-framework", name: "Frontend Framework" }
+  },
+  {
+    id_: 10,
+    label_: "TechnologyCategory",
+    properties_: { key: "database", name: "Database" }
+  },
+  {
+    id_: 11,
+    label_: "TechnologyCategory",
+    properties_: { key: "messaging", name: "Messaging" }
+  },
+  {
+    id_: 12,
+    label_: "TechnologyCategory",
+    properties_: { key: "language", name: "Language" }
+  }
+];
+var TECH_EDGES = [
+  // Two products, each with its own stack; both stacks share PostgreSQL.
+  {
+    id_: 101,
+    label_: "HAS_TECH_STACK",
+    start_id_: 1,
+    end_id_: 3,
+    properties_: {}
+  },
+  {
+    id_: 102,
+    label_: "HAS_TECH_STACK",
+    start_id_: 2,
+    end_id_: 4,
+    properties_: {}
+  },
+  {
+    id_: 103,
+    label_: "INTEGRATES_WITH",
+    start_id_: 1,
+    end_id_: 2,
+    properties_: {}
+  },
+  // Product A stack: React, PostgreSQL, Kafka.
+  {
+    id_: 104,
+    label_: "USES_TECHNOLOGY",
+    start_id_: 3,
+    end_id_: 5,
+    properties_: {}
+  },
+  {
+    id_: 105,
+    label_: "USES_TECHNOLOGY",
+    start_id_: 3,
+    end_id_: 6,
+    properties_: {}
+  },
+  {
+    id_: 106,
+    label_: "USES_TECHNOLOGY",
+    start_id_: 3,
+    end_id_: 7,
+    properties_: {}
+  },
+  // Product B stack: Go + the shared PostgreSQL.
+  {
+    id_: 107,
+    label_: "USES_TECHNOLOGY",
+    start_id_: 4,
+    end_id_: 6,
+    properties_: {}
+  },
+  {
+    id_: 108,
+    label_: "USES_TECHNOLOGY",
+    start_id_: 4,
+    end_id_: 8,
+    properties_: {}
+  },
+  // Technology -> category.
+  { id_: 109, label_: "BELONGS_TO", start_id_: 5, end_id_: 9, properties_: {} },
+  {
+    id_: 110,
+    label_: "BELONGS_TO",
+    start_id_: 6,
+    end_id_: 10,
+    properties_: {}
+  },
+  {
+    id_: 111,
+    label_: "BELONGS_TO",
+    start_id_: 7,
+    end_id_: 11,
+    properties_: {}
+  },
+  {
+    id_: 112,
+    label_: "BELONGS_TO",
+    start_id_: 8,
+    end_id_: 12,
+    properties_: {}
+  }
+];
+function createPlaygroundStores() {
+  const graphFilter = createGraphFilterStore();
+  const graphData = createGraphDataStore();
+  const selection = createSelectionStore();
+  const graphFocus = createGraphFocusStore();
+  const graphExploration = createGraphExplorationStore({
+    graphData,
+    selection,
+    graphFocus,
+    graphFilter,
+    // Static data -- no server expansion available in the playground
+    expandNode: async () => ({ nodes: [], edges: [], has_more: false }),
+    getNodes: async () => []
+  });
+  return { graphFilter, graphData, graphExploration, selection };
+}
+var PLAYGROUND_STORES = createPlaygroundStores();
+var EMPTY_DATA = { nodes: [], edges: [] };
+function serializeGraphData(data) {
+  return JSON.stringify(data, null, 2);
+}
+function validateNode(n, i) {
+  if (!n || typeof n !== "object") return `nodes[${i}] must be an object`;
+  const node = n;
+  if (node.id_ === void 0) return `nodes[${i}] is missing id_`;
+  if (typeof node.label_ !== "string") return `nodes[${i}] is missing label_`;
+  return null;
+}
+function validateEdge(e, i) {
+  if (!e || typeof e !== "object") return `edges[${i}] must be an object`;
+  const edge = e;
+  if (edge.id_ === void 0) return `edges[${i}] is missing id_`;
+  if (typeof edge.label_ !== "string") return `edges[${i}] is missing label_`;
+  if (edge.start_id_ === void 0) return `edges[${i}] is missing start_id_`;
+  if (edge.end_id_ === void 0) return `edges[${i}] is missing end_id_`;
+  return null;
+}
+function validateGraphInput(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return "JSON must be an object with nodes and edges arrays";
+  }
+  const obj = value;
+  if (!Array.isArray(obj.nodes)) return '"nodes" must be an array';
+  if (!Array.isArray(obj.edges)) return '"edges" must be an array';
+  for (const [i, n] of obj.nodes.entries()) {
+    const err = validateNode(n, i);
+    if (err) return err;
+  }
+  for (const [i, e] of obj.edges.entries()) {
+    const err = validateEdge(e, i);
+    if (err) return err;
+  }
+  return null;
+}
+function loadIntoStore(stores, data) {
+  const labelCounts = {};
+  for (const n of data.nodes) {
+    labelCounts[n.label_] = (labelCounts[n.label_] ?? 0) + 1;
+  }
+  const palette = buildColorPalette(labelCounts);
+  const nodes = enrichNodes(data.nodes, palette);
+  const edges = enrichEdges(data.edges, palette);
+  stores.graphFilter.getState().resetFilters();
+  stores.graphData.getState().setQueryData(nodes, edges, {
+    nodes: nodes.length,
+    edges: edges.length
+  });
+  stores.graphFilter.getState().notifyDataChange();
+}
+var LIVE_STORE = { nodes: [], edges: [] };
+function setLiveData(stores, data) {
+  LIVE_STORE.nodes = data.nodes.map((n) => ({ ...n }));
+  LIVE_STORE.edges = data.edges.map((e) => ({ ...e }));
+  loadIntoStore(stores, LIVE_STORE);
+}
+setLiveData(PLAYGROUND_STORES, { nodes: TECH_NODES, edges: TECH_EDGES });
+var TECH_MODEL = [
+  {
+    title: "Product",
+    type: "object",
+    properties: { key: { type: "string" }, name: { type: "string" } },
+    required: ["key", "name"],
+    "x-graph": {
+      type: "NODE",
+      label: "Product",
+      relations: [
+        {
+          rel_type_name: "HAS_TECH_STACK",
+          to_type_name: "TechnologyStack",
+          cardinality: "ONE_TO_ONE",
+          form_field: true
+        },
+        {
+          // Fictitious second Product -> TechnologyStack relation: a product
+          // may also provision a stack it does not own (one-to-many).
+          rel_type_name: "PROVIDES_STACK_FOR",
+          to_type_name: "TechnologyStack",
+          cardinality: "ONE_TO_MANY",
+          form_field: true
+        },
+        {
+          rel_type_name: "INTEGRATES_WITH",
+          to_type_name: "Product",
+          cardinality: "ONE_TO_MANY",
+          form_field: true
+        }
+      ]
+    }
+  },
+  {
+    title: "TechnologyStack",
+    type: "object",
+    properties: { key: { type: "string" }, name: { type: "string" } },
+    "x-graph": {
+      type: "NODE",
+      label: "TechnologyStack",
+      relations: [
+        {
+          rel_type_name: "USES_TECHNOLOGY",
+          to_type_name: "Technology",
+          cardinality: "ONE_TO_MANY",
+          form_field: true
+        }
+      ]
+    }
+  },
+  {
+    title: "Technology",
+    type: "object",
+    properties: { key: { type: "string" }, name: { type: "string" } },
+    required: ["key", "name"],
+    "x-graph": {
+      type: "NODE",
+      label: "Technology",
+      relations: [
+        {
+          rel_type_name: "BELONGS_TO",
+          to_type_name: "TechnologyCategory",
+          cardinality: "ONE_TO_ONE",
+          form_field: true
+        }
+      ]
+    }
+  },
+  {
+    title: "TechnologyCategory",
+    type: "object",
+    properties: { key: { type: "string" }, name: { type: "string" } },
+    required: ["key", "name"],
+    "x-graph": { type: "NODE", label: "TechnologyCategory" }
+  }
+];
+var ORG_MODEL = [
+  {
+    title: "Network",
+    type: "object",
+    "x-graph": { type: "NODE", label: "Network" }
+  },
+  {
+    title: "Hospital",
+    type: "object",
+    "x-graph": {
+      type: "NODE",
+      label: "Hospital",
+      relations: [
+        {
+          rel_type_name: "partOf",
+          to_type_name: "Network",
+          cardinality: "ONE_TO_ONE"
+        }
+      ]
+    }
+  },
+  {
+    title: "Department",
+    type: "object",
+    "x-graph": {
+      type: "NODE",
+      label: "Department",
+      relations: [
+        {
+          rel_type_name: "partOf",
+          to_type_name: "Hospital",
+          cardinality: "ONE_TO_ONE"
+        }
+      ]
+    }
+  },
+  {
+    title: "Practice",
+    type: "object",
+    "x-graph": {
+      type: "NODE",
+      label: "Practice",
+      relations: [
+        {
+          rel_type_name: "partOf",
+          to_type_name: "Network",
+          cardinality: "ONE_TO_ONE"
+        },
+        {
+          rel_type_name: "affiliation",
+          to_type_name: "Hospital",
+          cardinality: "ONE_TO_MANY"
+        }
+      ]
+    }
+  },
+  // Pre-defined relation-type catalog. With edgeTypes "catalog", relations may
+  // only use these types; no new edge types can be created.
+  {
+    title: "partOf",
+    type: "object",
+    "x-graph": { type: "EDGE", label: "partOf" }
+  },
+  {
+    title: "affiliation",
+    type: "object",
+    "x-graph": { type: "EDGE", label: "affiliation" }
+  }
+];
+var ORG_NODES = [
+  {
+    id_: 1,
+    label_: "Network",
+    properties_: { name: "Northwind Care Network" }
+  },
+  { id_: 2, label_: "Hospital", properties_: { name: "Riverside General" } },
+  { id_: 3, label_: "Hospital", properties_: { name: "Lakeside Clinic" } },
+  { id_: 4, label_: "Department", properties_: { name: "Cardiology" } },
+  { id_: 5, label_: "Department", properties_: { name: "Radiology" } },
+  { id_: 6, label_: "Practice", properties_: { name: "Maple Street GP" } }
+];
+var ORG_EDGES = [
+  // partOf: child -> parent (containment).
+  { id_: 201, label_: "partOf", start_id_: 2, end_id_: 1, properties_: {} },
+  { id_: 202, label_: "partOf", start_id_: 3, end_id_: 1, properties_: {} },
+  { id_: 203, label_: "partOf", start_id_: 4, end_id_: 2, properties_: {} },
+  { id_: 204, label_: "partOf", start_id_: 5, end_id_: 2, properties_: {} },
+  // affiliation: a practice affiliated with a hospital (non-hierarchical).
+  {
+    id_: 205,
+    label_: "affiliation",
+    start_id_: 6,
+    end_id_: 2,
+    properties_: {}
+  }
+];
+var DATASETS = {
+  empty: {
+    label: "Empty",
+    data: EMPTY_DATA,
+    model: [],
+    capabilities: { readOnly: false, capabilities: {} },
+    // No model to drive forms, so editing stays off.
+    editCapabilities: {}
+  },
+  techStack: {
+    label: "Technology Stack",
+    data: { nodes: TECH_NODES, edges: TECH_EDGES },
+    model: TECH_MODEL,
+    capabilities: { readOnly: false, capabilities: {} },
+    // Full instance editing: create / edit / delete nodes and edges.
+    editCapabilities: {
+      createNode: "edit",
+      updateNode: "edit",
+      deleteNode: "edit",
+      createEdge: "edit",
+      updateEdge: "edit",
+      deleteEdge: "edit"
+    }
+  },
+  organization: {
+    label: "Organization model",
+    data: { nodes: ORG_NODES, edges: ORG_EDGES },
+    model: ORG_MODEL,
+    // Simulates the planned Sestina org editor: fixed edge-type catalog (no new
+    // edge types) and no property editing (node/edge properties hidden).
+    capabilities: {
+      readOnly: false,
+      capabilities: {
+        edgeTypes: "catalog",
+        nodeProperties: "hidden",
+        edgeProperties: "hidden"
+      }
+    },
+    // A constrained instance-editing profile: edges may be linked / unlinked
+    // (partOf / affiliation), but nodes are not created or deleted here.
+    editCapabilities: {
+      updateNode: "edit",
+      createEdge: "edit",
+      deleteEdge: "edit"
+    }
+  }
+};
+var DATASET_OPTIONS = Object.entries(DATASETS).map(([value, d]) => ({
+  value,
+  label: d.label
+}));
+var DEFAULT_DATASET = "techStack";
+function useModelState(initialModel) {
+  const [modelText, setModelText] = useState(
+    () => JSON.stringify(initialModel, null, 2)
+  );
+  const [model, setModel] = useState(initialModel);
+  const [modelError, setModelError] = useState(null);
+  const applyModel = useCallback(() => {
+    let parsed;
+    try {
+      parsed = JSON.parse(modelText);
+    } catch (e) {
+      setModelError(e instanceof Error ? e.message : "Invalid JSON");
+      return;
+    }
+    if (!Array.isArray(parsed)) {
+      setModelError("A graph model must be a JSON array of type schemas.");
+      return;
+    }
+    setModelError(null);
+    setModel(parsed);
+  }, [modelText]);
+  const loadModel = useCallback((next) => {
+    setModelText(JSON.stringify(next, null, 2));
+    setModel(next);
+    setModelError(null);
+  }, []);
+  const updateModel = useCallback((next) => {
+    setModel(next);
+    setModelText(JSON.stringify(next, null, 2));
+    setModelError(null);
+  }, []);
+  return {
+    model,
+    modelText,
+    modelError,
+    setModelText,
+    applyModel,
+    loadModel,
+    updateModel
+  };
+}
+function ModelGraphTab({
+  model,
+  onChange,
+  readOnly,
+  capabilities
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: "h-[640px] rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsx2(
+    GraphModelEditor,
+    {
+      value: model,
+      onChange,
+      readOnly,
+      capabilities,
+      widgetOptions: ["entity-select", "coded-value", "textarea"]
+    }
+  ) });
+}
+function CapabilitiesTab({
+  config,
+  onApply
+}) {
+  const [text, setText] = useState(() => JSON.stringify(config, null, 2));
+  const [error, setError] = useState(null);
+  const apply = useCallback(() => {
+    let parsed;
+    try {
+      parsed = JSON.parse(text);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Invalid JSON");
+      return;
+    }
+    setError(null);
+    const obj = parsed;
+    onApply({
+      readOnly: Boolean(obj.readOnly),
+      capabilities: obj.capabilities ?? {}
+    });
+  }, [text, onApply]);
+  const reset = useCallback(() => {
+    const fresh = { readOnly: false, capabilities: {} };
+    setText(JSON.stringify(fresh, null, 2));
+    setError(null);
+    onApply(fresh);
+  }, [onApply]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: apply, children: [
+        /* @__PURE__ */ jsx2(Play, { className: "h-4 w-4 mr-1" }),
+        "Apply"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: reset, children: [
+        /* @__PURE__ */ jsx2(RotateCcw, { className: "h-4 w-4 mr-1" }),
+        "Reset"
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground ml-2", children: "Edit, Apply, then open the Model Editor tab and select a node." })
+    ] }),
+    error && /* @__PURE__ */ jsx2(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx2(AlertDescription, { children: error }) }),
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        spellCheck: false,
+        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"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Effective config (applied to GraphModelEditor)" }),
+      /* @__PURE__ */ jsx2("pre", { className: "rounded-md bg-muted px-3 py-2 text-xs overflow-auto max-h-40", children: JSON.stringify(config, null, 2) }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-2 text-xs text-muted-foreground", children: "readOnly = lock everything. capabilities: nodeTypes / relations (edit | readonly), edgeTypes (edit = select or create | catalog = select only | readonly), nodeProperties / edgeProperties (edit | readonly | hidden), showEdgeTypes (bool, default false starts edge-type nodes deselected; true shows them). More fields are added as the editor grows." })
+    ] })
+  ] });
+}
+function ModelJsonTab({
+  state,
+  onReset
+}) {
+  const { modelText, modelError, setModelText, applyModel } = state;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: applyModel, children: [
+        /* @__PURE__ */ jsx2(Play, { className: "h-4 w-4 mr-1" }),
+        "Apply"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: onReset, children: [
+        /* @__PURE__ */ jsx2(RotateCcw, { className: "h-4 w-4 mr-1" }),
+        "Reset"
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground ml-2", children: "Edit the model, Apply, then switch to the Model tab" })
+    ] }),
+    modelError && /* @__PURE__ */ jsx2(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx2(AlertDescription, { children: modelError }) }),
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        value: modelText,
+        onChange: (e) => setModelText(e.target.value),
+        spellCheck: false,
+        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"
+      }
+    )
+  ] });
+}
+function PlayGraph() {
+  const [datasetKey, setDatasetKey] = useState(DEFAULT_DATASET);
+  const [jsonText, setJsonText] = useState(
+    () => serializeGraphData(DATASETS[DEFAULT_DATASET].data)
+  );
+  const [parseError, setParseError] = useState(null);
+  const modelState = useModelState(DATASETS[DEFAULT_DATASET].model);
+  const { loadModel } = modelState;
+  const [capsConfig, setCapsConfig] = useState(
+    DATASETS[DEFAULT_DATASET].capabilities
+  );
+  const editPort = useMemo(
+    () => createInMemoryPort(
+      LIVE_STORE,
+      () => loadIntoStore(PLAYGROUND_STORES, LIVE_STORE)
+    ),
+    []
+  );
+  const editSchemaProvider = useMemo(
+    () => createModelSchemaProvider(modelState.model),
+    [modelState.model]
+  );
+  const handleMutated = useCallback(() => {
+    setJsonText(serializeGraphData(LIVE_STORE));
+  }, []);
+  const editWidgets = useMemo(
+    () => ({
+      ...DEFAULT_WIDGETS,
+      "entity-select": createRelationWidget(LIVE_STORE)
+    }),
+    []
+  );
+  const loadDataset = useCallback(
+    (key) => {
+      const ds = DATASETS[key];
+      if (!ds) return;
+      setDatasetKey(key);
+      setJsonText(serializeGraphData(ds.data));
+      setParseError(null);
+      setLiveData(PLAYGROUND_STORES, ds.data);
+      loadModel(ds.model);
+      setCapsConfig(ds.capabilities);
+    },
+    [loadModel]
+  );
+  const [panelWidth, setPanelWidth] = useState(300);
+  const rowRef = useRef(null);
+  const startResize = useCallback((e) => {
+    e.preventDefault();
+    const target = e.currentTarget;
+    target.setPointerCapture(e.pointerId);
+    const move = (ev) => {
+      const right = rowRef.current?.getBoundingClientRect().right ?? 0;
+      setPanelWidth(Math.min(560, Math.max(200, right - ev.clientX)));
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  }, []);
+  const handleApply = useCallback(() => {
+    let parsed;
+    try {
+      parsed = JSON.parse(jsonText);
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : "Invalid JSON");
+      return;
+    }
+    const validationError = validateGraphInput(parsed);
+    if (validationError) {
+      setParseError(validationError);
+      return;
+    }
+    setParseError(null);
+    setLiveData(PLAYGROUND_STORES, parsed);
+  }, [jsonText]);
+  const handleReset = useCallback(() => {
+    const data = DATASETS[datasetKey].data;
+    setJsonText(serializeGraphData(data));
+    setParseError(null);
+    setLiveData(PLAYGROUND_STORES, data);
+  }, [datasetKey]);
+  const handleResetModel = useCallback(() => {
+    loadModel(DATASETS[datasetKey].model);
+  }, [datasetKey, loadModel]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        handleApply();
+      }
+    },
+    [handleApply]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx2("h1", { children: "Graph Visualization" }),
+      /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground mt-1", children: "Interactive property graph with dual renderer support. Edit the JSON data and apply to re-render. The Model tab renders a graph model (metamodel) with GraphModelEditor." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx2(
+        FormSelect2,
+        {
+          label: "Dataset",
+          options: DATASET_OPTIONS,
+          value: datasetKey,
+          onChange: (v) => v && loadDataset(v),
+          clearable: false,
+          wrapperClassName: "w-64"
+        }
+      ),
+      /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground mt-5", children: "A dataset bundles graph data + model + capability profile." })
+    ] }),
+    /* @__PURE__ */ jsx2(GraphStoresContext.Provider, { value: PLAYGROUND_STORES, children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "graph", className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs(TabsList, { children: [
+        /* @__PURE__ */ jsx2(TabsTrigger, { value: "graph", children: "Graph" }),
+        /* @__PURE__ */ jsx2(TabsTrigger, { value: "data", children: "Data JSON" }),
+        /* @__PURE__ */ jsx2(TabsTrigger, { value: "model", children: "Model Editor" }),
+        /* @__PURE__ */ jsx2(TabsTrigger, { value: "model-json", children: "Model JSON" }),
+        /* @__PURE__ */ jsx2(TabsTrigger, { value: "model-capabilities", children: "Model Editor Capabilities" })
+      ] }),
+      /* @__PURE__ */ jsx2(TabsContent, { value: "graph", className: "mt-0", children: /* @__PURE__ */ jsx2(GraphRendererProvider, { defaultRenderer: "cytoscape", children: /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex overflow-hidden h-[600px]", children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx2(GraphVisualizer, {}) }),
+        /* @__PURE__ */ jsx2(
+          ResizeHandle,
+          {
+            orientation: "vertical",
+            "aria-valuenow": panelWidth,
+            "aria-valuemin": 200,
+            "aria-valuemax": 560,
+            onPointerDown: startResize,
+            onDoubleClick: () => setPanelWidth(300)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { width: panelWidth },
+            className: "flex-shrink-0 flex flex-col min-h-0",
+            children: [
+              /* @__PURE__ */ jsx2("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx2(
+                ActionPanel,
+                {
+                  actions: /* @__PURE__ */ jsx2(
+                    GraphEditToolbar,
+                    {
+                      port: editPort,
+                      schemaProvider: editSchemaProvider,
+                      capabilities: DATASETS[datasetKey].editCapabilities,
+                      widgets: editWidgets,
+                      onMutated: handleMutated
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-4 pb-4 pt-2", children: [
+                /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Accessible list (demo)" }),
+                /* @__PURE__ */ jsx2(GraphA11yList, { visible: true, maxHeight: 160 })
+              ] })
+            ]
+          }
+        )
+      ] }) }) }),
+      /* @__PURE__ */ jsx2(TabsContent, { value: "data", className: "mt-0", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleApply, children: [
+            /* @__PURE__ */ jsx2(Play, { className: "h-4 w-4 mr-1" }),
+            "Apply"
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: handleReset, children: [
+            /* @__PURE__ */ jsx2(RotateCcw, { className: "h-4 w-4 mr-1" }),
+            "Reset"
+          ] }),
+          /* @__PURE__ */ jsx2("span", { className: "text-xs text-muted-foreground ml-2", children: "Cmd+Enter to apply" })
+        ] }),
+        parseError && /* @__PURE__ */ jsx2(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx2(AlertDescription, { children: parseError }) }),
+        /* @__PURE__ */ jsx2(
+          "textarea",
+          {
+            value: jsonText,
+            onChange: (e) => setJsonText(e.target.value),
+            onKeyDown: handleKeyDown,
+            spellCheck: false,
+            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"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx2(TabsContent, { value: "model", className: "mt-0", children: /* @__PURE__ */ jsx2(
+        ModelGraphTab,
+        {
+          model: modelState.model,
+          onChange: modelState.updateModel,
+          readOnly: capsConfig.readOnly,
+          capabilities: capsConfig.capabilities
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(TabsContent, { value: "model-json", className: "mt-0", children: /* @__PURE__ */ jsx2(ModelJsonTab, { state: modelState, onReset: handleResetModel }) }),
+      /* @__PURE__ */ jsx2(TabsContent, { value: "model-capabilities", className: "mt-0", children: /* @__PURE__ */ jsx2(CapabilitiesTab, { config: capsConfig, onApply: setCapsConfig }) })
+    ] }) })
+  ] });
+}
+
+export {
+  PlayGraph
+};
+//# sourceMappingURL=chunk-C2P3UQMZ.js.map