@petrarca/sonnet-playground 0.4.2 → 0.6.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/PlaygroundRegistry.ts","../src/builtinEntries.ts","../src/createPlaygroundModule.tsx","../src/PlaygroundOverview.tsx","../src/index.ts"],"sourcesContent":["/**\n * PlaygroundRegistry -- mutable collection of playground entries.\n *\n * The library ships a default instance pre-populated with the built-in\n * sonnet component demos. Consumers register additional entries for\n * domain-specific playgrounds before passing the registry to\n * createPlaygroundModule().\n */\nimport type { PlaygroundEntry } from \"./types\";\n\nexport class PlaygroundRegistry {\n  private entries: Map<string, PlaygroundEntry> = new Map();\n\n  /** Register a playground entry. Overwrites any existing entry with the same id. */\n  register(entry: PlaygroundEntry): void {\n    this.entries.set(entry.id, entry);\n  }\n\n  /** Register multiple entries at once. */\n  registerAll(entries: PlaygroundEntry[]): void {\n    for (const entry of entries) {\n      this.entries.set(entry.id, entry);\n    }\n  }\n\n  /** Remove an entry by id. Returns true if it existed. */\n  unregister(id: string): boolean {\n    return this.entries.delete(id);\n  }\n\n  /** Get a single entry by id. */\n  get(id: string): PlaygroundEntry | undefined {\n    return this.entries.get(id);\n  }\n\n  /** Fallback group label for entries with no group defined. */\n  static readonly DEFAULT_GROUP = \"General\";\n\n  /**\n   * All registered entries, sorted by group registration order then\n   * by `order` within each group.\n   */\n  getAll(): PlaygroundEntry[] {\n    const groupOrder = this.getGroupOrder();\n    return [...this.entries.values()].sort((a, b) => {\n      const groupA = a.group ?? PlaygroundRegistry.DEFAULT_GROUP;\n      const groupB = b.group ?? PlaygroundRegistry.DEFAULT_GROUP;\n      if (groupA !== groupB) {\n        return (\n          (groupOrder.get(groupA) ?? 999) - (groupOrder.get(groupB) ?? 999)\n        );\n      }\n      return (a.order ?? 0) - (b.order ?? 0);\n    });\n  }\n\n  /**\n   * Entries grouped by their group label.\n   * Returns an array of [groupLabel, entries[]] tuples, preserving\n   * first-seen registration order for groups and `order` within each group.\n   */\n  getGrouped(): Array<[string, PlaygroundEntry[]]> {\n    const grouped = new Map<string, PlaygroundEntry[]>();\n    for (const entry of this.getAll()) {\n      const group = entry.group ?? PlaygroundRegistry.DEFAULT_GROUP;\n      const list = grouped.get(group) ?? [];\n      list.push(entry);\n      grouped.set(group, list);\n    }\n    return [...grouped.entries()];\n  }\n\n  /** Map of group name → first-seen index (registration order). */\n  private getGroupOrder(): Map<string, number> {\n    const order = new Map<string, number>();\n    let idx = 0;\n    for (const entry of this.entries.values()) {\n      const group = entry.group ?? PlaygroundRegistry.DEFAULT_GROUP;\n      if (!order.has(group)) {\n        order.set(group, idx++);\n      }\n    }\n    return order;\n  }\n\n  /** Number of registered entries. */\n  get size(): number {\n    return this.entries.size;\n  }\n}\n","/**\n * Built-in playground entries for the sonnet component library.\n *\n * These entries demonstrate @petrarca/sonnet-* components with static\n * mock data -- no application backend required. Each page is lazy-loaded.\n */\nimport { lazy } from \"react\";\nimport {\n  Type,\n  Palette,\n  Grid,\n  Layers,\n  Braces,\n  Check,\n  Edit,\n  Package,\n  Table2,\n  Network,\n  SquareTerminal,\n} from \"lucide-react\";\nimport type { PlaygroundEntry } from \"./types\";\n\nexport const builtinEntries: PlaygroundEntry[] = [\n  {\n    id: \"sonnet.typography\",\n    title: \"Typography\",\n    description:\n      \"Living style-guide for the typography system. Font families, type scale, weights, heading hierarchy, color tiers, and component patterns.\",\n    icon: Type,\n    color: \"teal\",\n    path: \"typography\",\n    component: lazy(() => import(\"./pages/PlayTypography\")),\n    group: \"Design System\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.color-palette\",\n    title: \"Color Palette\",\n    description:\n      \"Living reference for the color system. Semantic tokens, extended palette, badge colors, icon accents, and usage guidance.\",\n    icon: Palette,\n    color: \"violet\",\n    path: \"color-palette\",\n    component: lazy(() => import(\"./pages/PlayColorPalette\")),\n    group: \"Design System\",\n    order: 1,\n  },\n  {\n    id: \"sonnet.core-components\",\n    title: \"Core UI Components\",\n    description:\n      \"Test all core UI components (notifications, buttons, dialogs, forms, etc.) in isolation before production use.\",\n    icon: Grid,\n    color: \"indigo\",\n    path: \"core-components\",\n    component: lazy(() => import(\"./pages/PlayCoreComponents\")),\n    group: \"Components\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.advanced-components\",\n    title: \"Advanced Components\",\n    description:\n      \"Multi-step workflows (Stepper) and hierarchical data structures (TreeView) with keyboard navigation and selection.\",\n    icon: Layers,\n    color: \"emerald\",\n    path: \"advanced-components\",\n    component: lazy(() => import(\"./pages/PlayAdvancedComponents\")),\n    group: \"Components\",\n    order: 1,\n  },\n  {\n    id: \"sonnet.json-editor\",\n    title: \"JSON Editor\",\n    description:\n      \"Constrained JSON editor with selectively editable regions using JSON Pointer (RFC 6901). Readonly sections are visible but locked.\",\n    icon: Braces,\n    color: \"amber\",\n    path: \"json-editor\",\n    component: lazy(() => import(\"./pages/PlayJsonEditor\")),\n    group: \"Components\",\n    order: 2,\n  },\n  {\n    id: \"sonnet.form-components\",\n    title: \"Form Components\",\n    description:\n      \"Test custom Form wrapper components with labels, descriptions, and error states. Includes Input, Textarea, Number, Checkbox, Select, MultiSelect, and Tags.\",\n    icon: Check,\n    color: \"blue\",\n    path: \"form-components\",\n    component: lazy(() => import(\"./pages/PlayFormComponents\")),\n    group: \"Forms\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.forms\",\n    title: \"Forms Renderer\",\n    description:\n      \"Test and experiment with the JsonSchemaFormRenderer component. Try different schemas and see real-time validation.\",\n    icon: Edit,\n    color: \"purple\",\n    path: \"forms\",\n    component: lazy(() => import(\"./pages/PlayForms\")),\n    group: \"Forms\",\n    order: 1,\n  },\n  {\n    id: \"sonnet.form-widgets\",\n    title: \"Form Widgets\",\n    description:\n      \"Pluggable field components consumed by the Forms Renderer. Each widget maps to a JSON Schema type or format and can be swapped independently.\",\n    icon: Package,\n    color: \"indigo\",\n    path: \"form-widgets\",\n    component: lazy(() => import(\"./pages/PlayFormWidgets\")),\n    group: \"Forms\",\n    order: 2,\n  },\n  {\n    id: \"sonnet.data-components\",\n    title: \"Data Components\",\n    description:\n      \"Interactive sandbox for SearchInput (simple and faceted mode) and EntityTable. Includes a live table wired to the faceted search.\",\n    icon: Table2,\n    color: \"teal\",\n    path: \"data-components\",\n    component: lazy(() => import(\"./pages/PlayDataComponents\")),\n    group: \"Data\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.graph\",\n    title: \"Graph Visualization\",\n    description:\n      \"Interactive property graph visualization with dual renderer support (Cytoscape, Reagraph). Org hierarchy demo with filtering, selection, and exploration.\",\n    icon: Network,\n    color: \"cyan\",\n    path: \"graph\",\n    component: lazy(() => import(\"./pages/PlayGraph\")),\n    group: \"Graph\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.shell-api\",\n    title: \"Shell API\",\n    description:\n      \"Interactive demo of the shell API: notifications, dialogs, programmatic navigation, slide-over panels, the resizable sidePane, and the Cmd+K command menu.\",\n    icon: SquareTerminal,\n    color: \"orange\",\n    path: \"shell-api\",\n    component: lazy(() => import(\"./pages/PlayShellApi\")),\n    group: \"Shell\",\n    order: 0,\n  },\n];\n","/**\n * Factory that turns a PlaygroundRegistry into a ShellModule.\n *\n * Generates routes (lazy + Suspense), sidebar navigation, and the\n * overview index page -- all derived from the registry entries.\n * The consumer just passes a registry and optional overrides.\n */\nimport React, { Suspense } from \"react\";\nimport { FlaskConical } from \"lucide-react\";\nimport type { ShellModule, NavGroup } from \"@petrarca/sonnet-shell\";\nimport type { PlaygroundRegistry } from \"./PlaygroundRegistry\";\nimport type { PlaygroundModuleOptions } from \"./types\";\nimport { PlaygroundOverview } from \"./PlaygroundOverview\";\n\n/**\n * Build sidebar navigation groups from registry entries.\n *\n * Groups entries by their `group` field. Each group becomes a NavGroup\n * with a heading. Ungrouped entries go into a \"General\" group.\n */\nfunction buildNavigation(\n  registry: PlaygroundRegistry,\n  basePath: string,\n): NavGroup[] {\n  const groups = registry.getGrouped();\n  const navGroups: NavGroup[] = [];\n\n  // Overview link is always first\n  const overviewGroup: NavGroup = {\n    id: \"playground-overview\",\n    links: [{ label: \"Overview\", path: basePath }],\n  };\n  navGroups.push(overviewGroup);\n\n  for (const [groupLabel, entries] of groups) {\n    navGroups.push({\n      id: `playground-${groupLabel.toLowerCase().replace(/\\s+/g, \"-\")}`,\n      heading: groupLabel,\n      links: entries.map((e) => ({\n        label: e.title,\n        path: `${basePath}/${e.path}`,\n      })),\n    });\n  }\n\n  return navGroups;\n}\n\n/** Wrap a component in Suspense for lazy loading. */\nfunction suspended(Component: React.ComponentType): React.ReactElement {\n  return (\n    <Suspense>\n      <Component />\n    </Suspense>\n  );\n}\n\n/**\n * Create a ShellModule for the playground.\n *\n * Returns a complete module definition ready to pass to\n * createModuleRegistry(). Routes, navigation, and the overview page\n * are all generated from the registry.\n */\nexport function createPlaygroundModule(\n  registry: PlaygroundRegistry,\n  options: PlaygroundModuleOptions = {},\n): ShellModule {\n  const {\n    icon = FlaskConical,\n    label = \"Playground\",\n    basePath = \"/playground\",\n    overviewTitle = \"Developer Playground\",\n    overviewSubtitle = \"Experiment with components, test features, and explore capabilities.\",\n    grouped = true,\n  } = options;\n\n  // Strip leading slash for route paths (React Router relative convention)\n  const routeBase = basePath.replace(/^\\//, \"\");\n\n  const routes = [\n    {\n      path: routeBase,\n      element: suspended(() => (\n        <PlaygroundOverview\n          registry={registry}\n          basePath={basePath}\n          title={overviewTitle}\n          subtitle={overviewSubtitle}\n          grouped={grouped}\n        />\n      )),\n    },\n    ...registry.getAll().map((entry) => ({\n      path: `${routeBase}/${entry.path}`,\n      element: suspended(entry.component),\n    })),\n  ];\n\n  return {\n    id: \"playground\",\n    label,\n    icon,\n    basePath,\n    pinBottom: true,\n    navigation: buildNavigation(registry, basePath),\n    routes,\n  };\n}\n","/**\n * PlaygroundOverview -- tile grid rendered from a PlaygroundRegistry.\n *\n * Displays cards with colored icons. Clicking a card navigates to the\n * playground page. A toggle in the header lets the user switch between\n * grouped (by category) and flat (all tiles) views.\n */\nimport React, { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { LayoutGrid, List } from \"lucide-react\";\nimport { Card, Button, SimpleTooltip } from \"@petrarca/sonnet-ui\";\nimport type { PlaygroundRegistry } from \"./PlaygroundRegistry\";\nimport type { PlaygroundColor, PlaygroundEntry } from \"./types\";\n\n// Maps colour name to icon container classes (bg-*-100 text-*-600 pairing).\nconst COLOR_CLASSES: Record<PlaygroundColor, string> = {\n  blue: \"bg-blue-100 text-blue-600\",\n  violet: \"bg-violet-100 text-violet-600\",\n  indigo: \"bg-indigo-100 text-indigo-600\",\n  purple: \"bg-purple-100 text-purple-600\",\n  teal: \"bg-teal-100 text-teal-600\",\n  amber: \"bg-amber-100 text-amber-600\",\n  emerald: \"bg-emerald-100 text-emerald-600\",\n  rose: \"bg-rose-100 text-rose-600\",\n  orange: \"bg-orange-100 text-orange-600\",\n  cyan: \"bg-cyan-100 text-cyan-600\",\n};\n\nconst TILE_GRID = \"grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-6\";\n\ninterface PlaygroundOverviewProps {\n  registry: PlaygroundRegistry;\n  basePath: string;\n  title: string;\n  subtitle: string;\n  /** Initial grouping state. Defaults to true. User can toggle at runtime. */\n  grouped?: boolean;\n}\n\ninterface TileProps {\n  item: PlaygroundEntry;\n  onNavigate: (path: string) => void;\n}\n\n/** A single playground tile card. */\nfunction PlaygroundTile({ item, onNavigate }: TileProps): React.ReactElement {\n  return (\n    <Card\n      className=\"cursor-pointer shadow-sm border rounded-md p-6 transition-transform duration-200 motion-safe:hover:-translate-y-1\"\n      onClick={() => onNavigate(item.path)}\n    >\n      <div className=\"flex items-center mb-4\">\n        <div\n          className={`flex items-center justify-center w-9 h-9 rounded-md ${COLOR_CLASSES[item.color] ?? COLOR_CLASSES.blue}`}\n        >\n          <item.icon size={18} />\n        </div>\n      </div>\n      <h3 className=\"heading-section mb-1\">{item.title}</h3>\n      <p className=\"text-sm text-muted-foreground\">{item.description}</p>\n    </Card>\n  );\n}\n\n/** Developer playground overview -- card grid linking to all registered pages. */\nexport function PlaygroundOverview({\n  registry,\n  basePath,\n  title,\n  subtitle,\n  grouped: initialGrouped = true,\n}: PlaygroundOverviewProps): React.ReactElement {\n  const navigate = useNavigate();\n  const [grouped, setGrouped] = useState(initialGrouped);\n\n  const handleNavigate = (path: string) => navigate(`${basePath}/${path}`);\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-start justify-between mb-6\">\n        <div>\n          <h1 className=\"mb-1\">{title}</h1>\n          <p className=\"text-sm text-muted-foreground\">{subtitle}</p>\n        </div>\n        <SimpleTooltip label={grouped ? \"Show flat list\" : \"Group by category\"}>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setGrouped((v) => !v)}\n          >\n            {grouped ? (\n              <LayoutGrid className=\"h-4 w-4\" />\n            ) : (\n              <List className=\"h-4 w-4\" />\n            )}\n          </Button>\n        </SimpleTooltip>\n      </div>\n\n      {grouped ? (\n        registry.getGrouped().map(([groupLabel, entries]) => (\n          <div key={groupLabel} className=\"mb-8\">\n            <h2 className=\"text-sm font-medium text-muted-foreground uppercase tracking-wider mb-4\">\n              {groupLabel}\n            </h2>\n            <div className={TILE_GRID}>\n              {entries.map((item) => (\n                <PlaygroundTile\n                  key={item.id}\n                  item={item}\n                  onNavigate={handleNavigate}\n                />\n              ))}\n            </div>\n          </div>\n        ))\n      ) : (\n        <div className={TILE_GRID}>\n          {registry.getAll().map((item) => (\n            <PlaygroundTile\n              key={item.id}\n              item={item}\n              onNavigate={handleNavigate}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","/**\n * @petrarca/sonnet-playground\n *\n * Playground framework and built-in component demos for the Petrarca\n * Sonnet component library.\n *\n * Usage:\n *\n *   import {\n *     createPlaygroundRegistry,\n *     createPlaygroundModule,\n *   } from \"@petrarca/sonnet-playground\";\n *\n *   const playground = createPlaygroundRegistry();\n *   // Optionally register additional entries:\n *   playground.register({ id: \"app.custom\", ... });\n *\n *   const playgroundModule = createPlaygroundModule(playground);\n */\n\nimport { PlaygroundRegistry } from \"./PlaygroundRegistry\";\nimport { builtinEntries } from \"./builtinEntries\";\n\n// Framework\nexport { PlaygroundRegistry } from \"./PlaygroundRegistry\";\nexport { createPlaygroundModule } from \"./createPlaygroundModule\";\nexport { PlaygroundOverview } from \"./PlaygroundOverview\";\nexport { PlaygroundSection } from \"./PlaygroundSection\";\n\n// Types\nexport type {\n  PlaygroundEntry,\n  PlaygroundColor,\n  PlaygroundModuleOptions,\n} from \"./types\";\n\n// Built-in entries (for selective use or extending)\nexport { builtinEntries } from \"./builtinEntries\";\n\n/**\n * Convenience factory: creates a new PlaygroundRegistry pre-populated\n * with all built-in sonnet component demos.\n */\nexport function createPlaygroundRegistry(): PlaygroundRegistry {\n  const registry = new PlaygroundRegistry();\n  registry.registerAll(builtinEntries);\n  return registry;\n}\n"],"mappings":";;;;;AAUO,IAAM,qBAAN,MAAM,oBAAmB;AAAA,EACtB,UAAwC,oBAAI,IAAI;AAAA;AAAA,EAGxD,SAAS,OAA8B;AACrC,SAAK,QAAQ,IAAI,MAAM,IAAI,KAAK;AAAA,EAClC;AAAA;AAAA,EAGA,YAAY,SAAkC;AAC5C,eAAW,SAAS,SAAS;AAC3B,WAAK,QAAQ,IAAI,MAAM,IAAI,KAAK;AAAA,IAClC;AAAA,EACF;AAAA;AAAA,EAGA,WAAW,IAAqB;AAC9B,WAAO,KAAK,QAAQ,OAAO,EAAE;AAAA,EAC/B;AAAA;AAAA,EAGA,IAAI,IAAyC;AAC3C,WAAO,KAAK,QAAQ,IAAI,EAAE;AAAA,EAC5B;AAAA;AAAA,EAGA,OAAgB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMhC,SAA4B;AAC1B,UAAM,aAAa,KAAK,cAAc;AACtC,WAAO,CAAC,GAAG,KAAK,QAAQ,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM;AAC/C,YAAM,SAAS,EAAE,SAAS,oBAAmB;AAC7C,YAAM,SAAS,EAAE,SAAS,oBAAmB;AAC7C,UAAI,WAAW,QAAQ;AACrB,gBACG,WAAW,IAAI,MAAM,KAAK,QAAQ,WAAW,IAAI,MAAM,KAAK;AAAA,MAEjE;AACA,cAAQ,EAAE,SAAS,MAAM,EAAE,SAAS;AAAA,IACtC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAiD;AAC/C,UAAM,UAAU,oBAAI,IAA+B;AACnD,eAAW,SAAS,KAAK,OAAO,GAAG;AACjC,YAAM,QAAQ,MAAM,SAAS,oBAAmB;AAChD,YAAM,OAAO,QAAQ,IAAI,KAAK,KAAK,CAAC;AACpC,WAAK,KAAK,KAAK;AACf,cAAQ,IAAI,OAAO,IAAI;AAAA,IACzB;AACA,WAAO,CAAC,GAAG,QAAQ,QAAQ,CAAC;AAAA,EAC9B;AAAA;AAAA,EAGQ,gBAAqC;AAC3C,UAAM,QAAQ,oBAAI,IAAoB;AACtC,QAAI,MAAM;AACV,eAAW,SAAS,KAAK,QAAQ,OAAO,GAAG;AACzC,YAAM,QAAQ,MAAM,SAAS,oBAAmB;AAChD,UAAI,CAAC,MAAM,IAAI,KAAK,GAAG;AACrB,cAAM,IAAI,OAAO,KAAK;AAAA,MACxB;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,WAAO,KAAK,QAAQ;AAAA,EACtB;AACF;;;ACnFA,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,IAAM,iBAAoC;AAAA,EAC/C;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,8BAAwB,CAAC;AAAA,IACtD,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,gCAA0B,CAAC;AAAA,IACxD,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,kCAA4B,CAAC;AAAA,IAC1D,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,sCAAgC,CAAC;AAAA,IAC9D,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,8BAAwB,CAAC;AAAA,IACtD,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,kCAA4B,CAAC;AAAA,IAC1D,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,yBAAmB,CAAC;AAAA,IACjD,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,+BAAyB,CAAC;AAAA,IACvD,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,kCAA4B,CAAC;AAAA,IAC1D,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,yBAAmB,CAAC;AAAA,IACjD,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,aACE;AAAA,IACF,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW,KAAK,MAAM,OAAO,4BAAsB,CAAC;AAAA,IACpD,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;;;ACpJA,SAAgB,gBAAgB;AAChC,SAAS,oBAAoB;;;ACD7B,SAAgB,gBAAgB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,YAAY,YAAY;AACjC,SAAS,MAAM,QAAQ,qBAAqB;AAqCxC,SAQM,KARN;AAhCJ,IAAM,gBAAiD;AAAA,EACrD,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,IAAM,YAAY;AAiBlB,SAAS,eAAe,EAAE,MAAM,WAAW,GAAkC;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS,MAAM,WAAW,KAAK,IAAI;AAAA,MAEnC;AAAA,4BAAC,SAAI,WAAU,0BACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,uDAAuD,cAAc,KAAK,KAAK,KAAK,cAAc,IAAI;AAAA,YAEjH,8BAAC,KAAK,MAAL,EAAU,MAAM,IAAI;AAAA;AAAA,QACvB,GACF;AAAA,QACA,oBAAC,QAAG,WAAU,wBAAwB,eAAK,OAAM;AAAA,QACjD,oBAAC,OAAE,WAAU,iCAAiC,eAAK,aAAY;AAAA;AAAA;AAAA,EACjE;AAEJ;AAGO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,iBAAiB;AAC5B,GAAgD;AAC9C,QAAM,WAAW,YAAY;AAC7B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,cAAc;AAErD,QAAM,iBAAiB,CAAC,SAAiB,SAAS,GAAG,QAAQ,IAAI,IAAI,EAAE;AAEvE,SACE,qBAAC,SAAI,WAAU,UACb;AAAA,yBAAC,SAAI,WAAU,yCACb;AAAA,2BAAC,SACC;AAAA,4BAAC,QAAG,WAAU,QAAQ,iBAAM;AAAA,QAC5B,oBAAC,OAAE,WAAU,iCAAiC,oBAAS;AAAA,SACzD;AAAA,MACA,oBAAC,iBAAc,OAAO,UAAU,mBAAmB,qBACjD;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,WAAW,CAAC,MAAM,CAAC,CAAC;AAAA,UAElC,oBACC,oBAAC,cAAW,WAAU,WAAU,IAEhC,oBAAC,QAAK,WAAU,WAAU;AAAA;AAAA,MAE9B,GACF;AAAA,OACF;AAAA,IAEC,UACC,SAAS,WAAW,EAAE,IAAI,CAAC,CAAC,YAAY,OAAO,MAC7C,qBAAC,SAAqB,WAAU,QAC9B;AAAA,0BAAC,QAAG,WAAU,2EACX,sBACH;AAAA,MACA,oBAAC,SAAI,WAAW,WACb,kBAAQ,IAAI,CAAC,SACZ;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,YAAY;AAAA;AAAA,QAFP,KAAK;AAAA,MAGZ,CACD,GACH;AAAA,SAZQ,UAaV,CACD,IAED,oBAAC,SAAI,WAAW,WACb,mBAAS,OAAO,EAAE,IAAI,CAAC,SACtB;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,YAAY;AAAA;AAAA,MAFP,KAAK;AAAA,IAGZ,CACD,GACH;AAAA,KAEJ;AAEJ;;;AD7EM,gBAAAA,YAAA;AAhCN,SAAS,gBACP,UACA,UACY;AACZ,QAAM,SAAS,SAAS,WAAW;AACnC,QAAM,YAAwB,CAAC;AAG/B,QAAM,gBAA0B;AAAA,IAC9B,IAAI;AAAA,IACJ,OAAO,CAAC,EAAE,OAAO,YAAY,MAAM,SAAS,CAAC;AAAA,EAC/C;AACA,YAAU,KAAK,aAAa;AAE5B,aAAW,CAAC,YAAY,OAAO,KAAK,QAAQ;AAC1C,cAAU,KAAK;AAAA,MACb,IAAI,cAAc,WAAW,YAAY,EAAE,QAAQ,QAAQ,GAAG,CAAC;AAAA,MAC/D,SAAS;AAAA,MACT,OAAO,QAAQ,IAAI,CAAC,OAAO;AAAA,QACzB,OAAO,EAAE;AAAA,QACT,MAAM,GAAG,QAAQ,IAAI,EAAE,IAAI;AAAA,MAC7B,EAAE;AAAA,IACJ,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAGA,SAAS,UAAU,WAAoD;AACrE,SACE,gBAAAA,KAAC,YACC,0BAAAA,KAAC,aAAU,GACb;AAEJ;AASO,SAAS,uBACd,UACA,UAAmC,CAAC,GACvB;AACb,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,UAAU;AAAA,EACZ,IAAI;AAGJ,QAAM,YAAY,SAAS,QAAQ,OAAO,EAAE;AAE5C,QAAM,SAAS;AAAA,IACb;AAAA,MACE,MAAM;AAAA,MACN,SAAS,UAAU,MACjB,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA;AAAA,MACF,CACD;AAAA,IACH;AAAA,IACA,GAAG,SAAS,OAAO,EAAE,IAAI,CAAC,WAAW;AAAA,MACnC,MAAM,GAAG,SAAS,IAAI,MAAM,IAAI;AAAA,MAChC,SAAS,UAAU,MAAM,SAAS;AAAA,IACpC,EAAE;AAAA,EACJ;AAEA,SAAO;AAAA,IACL,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY,gBAAgB,UAAU,QAAQ;AAAA,IAC9C;AAAA,EACF;AACF;;;AEjEO,SAAS,2BAA+C;AAC7D,QAAM,WAAW,IAAI,mBAAmB;AACxC,WAAS,YAAY,cAAc;AACnC,SAAO;AACT;","names":["jsx"]}
+{"version":3,"sources":["../src/PlaygroundRegistry.ts","../src/builtinEntries.ts","../src/createPlaygroundModule.tsx","../src/PlaygroundOverview.tsx","../src/PlaygroundSettingsPanel.tsx","../src/PlaygroundSettings.tsx","../src/index.ts"],"sourcesContent":["/**\n * PlaygroundRegistry -- mutable collection of playground entries.\n *\n * The library ships a default instance pre-populated with the built-in\n * sonnet component demos. Consumers register additional entries for\n * domain-specific playgrounds before passing the registry to\n * createPlaygroundModule().\n */\nimport type { PlaygroundEntry } from \"./types\";\n\nexport class PlaygroundRegistry {\n  private entries: Map<string, PlaygroundEntry> = new Map();\n\n  /** Register a playground entry. Overwrites any existing entry with the same id. */\n  register(entry: PlaygroundEntry): void {\n    this.entries.set(entry.id, entry);\n  }\n\n  /** Register multiple entries at once. */\n  registerAll(entries: PlaygroundEntry[]): void {\n    for (const entry of entries) {\n      this.entries.set(entry.id, entry);\n    }\n  }\n\n  /** Remove an entry by id. Returns true if it existed. */\n  unregister(id: string): boolean {\n    return this.entries.delete(id);\n  }\n\n  /** Get a single entry by id. */\n  get(id: string): PlaygroundEntry | undefined {\n    return this.entries.get(id);\n  }\n\n  /** Fallback group label for entries with no group defined. */\n  static readonly DEFAULT_GROUP = \"General\";\n\n  /**\n   * All registered entries, sorted by group registration order then\n   * by `order` within each group.\n   */\n  getAll(): PlaygroundEntry[] {\n    const groupOrder = this.getGroupOrder();\n    return [...this.entries.values()].sort((a, b) => {\n      const groupA = a.group ?? PlaygroundRegistry.DEFAULT_GROUP;\n      const groupB = b.group ?? PlaygroundRegistry.DEFAULT_GROUP;\n      if (groupA !== groupB) {\n        return (\n          (groupOrder.get(groupA) ?? 999) - (groupOrder.get(groupB) ?? 999)\n        );\n      }\n      return (a.order ?? 0) - (b.order ?? 0);\n    });\n  }\n\n  /**\n   * Entries grouped by their group label.\n   * Returns an array of [groupLabel, entries[]] tuples, preserving\n   * first-seen registration order for groups and `order` within each group.\n   */\n  getGrouped(): Array<[string, PlaygroundEntry[]]> {\n    const grouped = new Map<string, PlaygroundEntry[]>();\n    for (const entry of this.getAll()) {\n      const group = entry.group ?? PlaygroundRegistry.DEFAULT_GROUP;\n      const list = grouped.get(group) ?? [];\n      list.push(entry);\n      grouped.set(group, list);\n    }\n    return [...grouped.entries()];\n  }\n\n  /** Map of group name → first-seen index (registration order). */\n  private getGroupOrder(): Map<string, number> {\n    const order = new Map<string, number>();\n    let idx = 0;\n    for (const entry of this.entries.values()) {\n      const group = entry.group ?? PlaygroundRegistry.DEFAULT_GROUP;\n      if (!order.has(group)) {\n        order.set(group, idx++);\n      }\n    }\n    return order;\n  }\n\n  /** Number of registered entries. */\n  get size(): number {\n    return this.entries.size;\n  }\n}\n","/**\n * Built-in playground entries for the sonnet component library.\n *\n * These entries demonstrate @petrarca/sonnet-* components with static\n * mock data -- no application backend required. Each page is lazy-loaded.\n */\nimport { lazy } from \"react\";\nimport {\n  Type,\n  Palette,\n  Grid,\n  Layers,\n  Braces,\n  Check,\n  Edit,\n  Package,\n  Table2,\n  Network,\n  SquareTerminal,\n  PencilRuler,\n} from \"lucide-react\";\nimport type { PlaygroundEntry } from \"./types\";\n\nexport const builtinEntries: PlaygroundEntry[] = [\n  {\n    id: \"sonnet.typography\",\n    title: \"Typography\",\n    description:\n      \"Living style-guide for the typography system. Font families, type scale, weights, heading hierarchy, color tiers, and component patterns.\",\n    icon: Type,\n    color: \"teal\",\n    path: \"typography\",\n    component: lazy(() => import(\"./pages/PlayTypography\")),\n    group: \"Design System\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.color-palette\",\n    title: \"Color Palette\",\n    description:\n      \"Living reference for the color system. Semantic tokens, extended palette, badge colors, icon accents, and usage guidance.\",\n    icon: Palette,\n    color: \"violet\",\n    path: \"color-palette\",\n    component: lazy(() => import(\"./pages/PlayColorPalette\")),\n    group: \"Design System\",\n    order: 1,\n  },\n  {\n    id: \"sonnet.core-components\",\n    title: \"Core UI Components\",\n    description:\n      \"Test all core UI components (notifications, buttons, dialogs, forms, etc.) in isolation before production use.\",\n    icon: Grid,\n    color: \"indigo\",\n    path: \"core-components\",\n    component: lazy(() => import(\"./pages/PlayCoreComponents\")),\n    group: \"Components\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.advanced-components\",\n    title: \"Advanced Components\",\n    description:\n      \"Multi-step workflows (Stepper) and hierarchical data structures (TreeView) with keyboard navigation and selection.\",\n    icon: Layers,\n    color: \"emerald\",\n    path: \"advanced-components\",\n    component: lazy(() => import(\"./pages/PlayAdvancedComponents\")),\n    group: \"Components\",\n    order: 1,\n  },\n  {\n    id: \"sonnet.json-editor\",\n    title: \"JSON Editor\",\n    description:\n      \"Constrained JSON editor with selectively editable regions using JSON Pointer (RFC 6901). Readonly sections are visible but locked.\",\n    icon: Braces,\n    color: \"amber\",\n    path: \"json-editor\",\n    component: lazy(() => import(\"./pages/PlayJsonEditor\")),\n    group: \"Components\",\n    order: 2,\n  },\n  {\n    id: \"sonnet.form-components\",\n    title: \"Form Components\",\n    description:\n      \"Test custom Form wrapper components with labels, descriptions, and error states. Includes Input, Textarea, Number, Checkbox, Select, MultiSelect, and Tags.\",\n    icon: Check,\n    color: \"blue\",\n    path: \"form-components\",\n    component: lazy(() => import(\"./pages/PlayFormComponents\")),\n    group: \"Forms\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.forms\",\n    title: \"Forms Renderer\",\n    description:\n      \"Test and experiment with the JsonSchemaFormRenderer component. Try different schemas and see real-time validation.\",\n    icon: Edit,\n    color: \"purple\",\n    path: \"forms\",\n    component: lazy(() => import(\"./pages/PlayForms\")),\n    group: \"Forms\",\n    order: 1,\n  },\n  {\n    id: \"sonnet.form-widgets\",\n    title: \"Form Widgets\",\n    description:\n      \"Pluggable field components consumed by the Forms Renderer. Each widget maps to a JSON Schema type or format and can be swapped independently.\",\n    icon: Package,\n    color: \"indigo\",\n    path: \"form-widgets\",\n    component: lazy(() => import(\"./pages/PlayFormWidgets\")),\n    group: \"Forms\",\n    order: 2,\n  },\n  {\n    id: \"sonnet.schema-designer\",\n    title: \"Schema Designer\",\n    description:\n      \"Visually author a JSON Schema and its UI presentation hints. Field tree, inspector, and live preview; edits emit a valid schema + uiSchema.\",\n    icon: PencilRuler,\n    color: \"teal\",\n    path: \"schema-designer\",\n    component: lazy(() => import(\"./pages/PlaySchemaDesigner\")),\n    group: \"Schemas\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.data-components\",\n    title: \"Data Components\",\n    description:\n      \"Interactive sandbox for SearchInput (simple and faceted mode) and EntityTable. Includes a live table wired to the faceted search.\",\n    icon: Table2,\n    color: \"teal\",\n    path: \"data-components\",\n    component: lazy(() => import(\"./pages/PlayDataComponents\")),\n    group: \"Data\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.graph\",\n    title: \"Graph Visualization\",\n    description:\n      \"Interactive property graph visualization with dual renderer support (Cytoscape, Reagraph). Org hierarchy demo with filtering, selection, and exploration.\",\n    icon: Network,\n    color: \"cyan\",\n    path: \"graph\",\n    component: lazy(() => import(\"./pages/PlayGraph\")),\n    group: \"Graph\",\n    order: 0,\n  },\n  {\n    id: \"sonnet.shell-api\",\n    title: \"Shell API\",\n    description:\n      \"Interactive demo of the shell API: notifications, dialogs, programmatic navigation, slide-over panels, the resizable sidePane, and the Cmd+K command menu.\",\n    icon: SquareTerminal,\n    color: \"orange\",\n    path: \"shell-api\",\n    component: lazy(() => import(\"./pages/PlayShellApi\")),\n    group: \"Shell\",\n    order: 0,\n  },\n];\n","/**\n * Factory that turns a PlaygroundRegistry into a ShellModule.\n *\n * Generates routes (lazy + Suspense), sidebar navigation, and the\n * overview index page -- all derived from the registry entries.\n * The consumer just passes a registry and optional overrides.\n */\nimport React, { Suspense } from \"react\";\nimport { Outlet } from \"react-router-dom\";\nimport { FlaskConical } from \"lucide-react\";\nimport type { ShellModule, NavGroup } from \"@petrarca/sonnet-shell\";\nimport type { PlaygroundRegistry } from \"./PlaygroundRegistry\";\nimport type { PlaygroundModuleOptions } from \"./types\";\nimport { PlaygroundOverview } from \"./PlaygroundOverview\";\nimport { PlaygroundSettingsProvider } from \"./PlaygroundSettings\";\n\nfunction buildNavigation(\n  registry: PlaygroundRegistry,\n  basePath: string,\n): NavGroup[] {\n  const groups = registry.getGrouped();\n  const navGroups: NavGroup[] = [];\n\n  navGroups.push({\n    id: \"playground-overview\",\n    links: [{ label: \"Overview\", path: basePath }],\n  });\n\n  for (const [groupLabel, entries] of groups) {\n    navGroups.push({\n      id: `playground-${groupLabel.toLowerCase().replace(/\\s+/g, \"-\")}`,\n      heading: groupLabel,\n      links: entries.map((e) => ({\n        label: e.title,\n        path: `${basePath}/${e.path}`,\n      })),\n    });\n  }\n\n  return navGroups;\n}\n\n// Wrap a component in Suspense for lazy loading.\nfunction suspended(Component: React.ComponentType): React.ReactElement {\n  return (\n    <Suspense>\n      <Component />\n    </Suspense>\n  );\n}\n\n// Layout route element: a single PlaygroundSettingsProvider wrapping all\n// playground routes via <Outlet>. Mounted once, never torn down on navigation,\n// so settings state is stable across route changes within the playground.\nfunction PlaygroundLayout(): React.ReactElement {\n  return (\n    <PlaygroundSettingsProvider>\n      <Outlet />\n    </PlaygroundSettingsProvider>\n  );\n}\n\nexport function createPlaygroundModule(\n  registry: PlaygroundRegistry,\n  options: PlaygroundModuleOptions = {},\n): ShellModule {\n  const {\n    icon = FlaskConical,\n    label = \"Playground\",\n    basePath = \"/playground\",\n    overviewTitle = \"Developer Playground\",\n    overviewSubtitle = \"Experiment with components, test features, and explore capabilities.\",\n    grouped = true,\n  } = options;\n\n  const routeBase = basePath.replace(/^\\//, \"\");\n\n  // A single layout route wraps all playground routes. The settings provider\n  // lives here -- mounted once, alive for the full playground session.\n  const routes = [\n    {\n      path: routeBase,\n      element: <PlaygroundLayout />,\n      children: [\n        {\n          index: true,\n          element: suspended(() => (\n            <PlaygroundOverview\n              registry={registry}\n              basePath={basePath}\n              title={overviewTitle}\n              subtitle={overviewSubtitle}\n              grouped={grouped}\n            />\n          )),\n        },\n        ...registry.getAll().map((entry) => ({\n          path: entry.path,\n          element: suspended(entry.component),\n        })),\n      ],\n    },\n  ];\n\n  return {\n    id: \"playground\",\n    label,\n    icon,\n    basePath,\n    pinBottom: true,\n    navigation: buildNavigation(registry, basePath),\n    routes,\n  };\n}\n","/**\n * PlaygroundOverview -- tile grid rendered from a PlaygroundRegistry.\n *\n * Displays cards with colored icons. Clicking a card navigates to the\n * playground page. A toggle in the header lets the user switch between\n * grouped (by category) and flat (all tiles) views.\n */\nimport React, { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { LayoutGrid, List } from \"lucide-react\";\nimport { Card, Button, SimpleTooltip } from \"@petrarca/sonnet-ui\";\nimport type { PlaygroundRegistry } from \"./PlaygroundRegistry\";\nimport type { PlaygroundColor, PlaygroundEntry } from \"./types\";\nimport { PlaygroundSettingsPanel } from \"./PlaygroundSettingsPanel\";\n\n// Maps colour name to icon container classes (bg-*-100 text-*-600 pairing).\nconst COLOR_CLASSES: Record<PlaygroundColor, string> = {\n  blue: \"bg-blue-100 text-blue-600\",\n  violet: \"bg-violet-100 text-violet-600\",\n  indigo: \"bg-indigo-100 text-indigo-600\",\n  purple: \"bg-purple-100 text-purple-600\",\n  teal: \"bg-teal-100 text-teal-600\",\n  amber: \"bg-amber-100 text-amber-600\",\n  emerald: \"bg-emerald-100 text-emerald-600\",\n  rose: \"bg-rose-100 text-rose-600\",\n  orange: \"bg-orange-100 text-orange-600\",\n  cyan: \"bg-cyan-100 text-cyan-600\",\n};\n\nconst TILE_GRID = \"grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-6\";\n\ninterface PlaygroundOverviewProps {\n  registry: PlaygroundRegistry;\n  basePath: string;\n  title: string;\n  subtitle: string;\n  /** Initial grouping state. Defaults to true. User can toggle at runtime. */\n  grouped?: boolean;\n}\n\ninterface TileProps {\n  item: PlaygroundEntry;\n  onNavigate: (path: string) => void;\n}\n\n/** A single playground tile card. */\nfunction PlaygroundTile({ item, onNavigate }: TileProps): React.ReactElement {\n  return (\n    <Card\n      className=\"cursor-pointer shadow-sm border rounded-md p-6 transition-transform duration-200 motion-safe:hover:-translate-y-1\"\n      onClick={() => onNavigate(item.path)}\n    >\n      <div className=\"flex items-center mb-4\">\n        <div\n          className={`flex items-center justify-center w-9 h-9 rounded-md ${COLOR_CLASSES[item.color] ?? COLOR_CLASSES.blue}`}\n        >\n          <item.icon size={18} />\n        </div>\n      </div>\n      <h3 className=\"heading-section mb-1\">{item.title}</h3>\n      <p className=\"text-sm text-muted-foreground\">{item.description}</p>\n    </Card>\n  );\n}\n\n/** Developer playground overview -- card grid linking to all registered pages. */\nexport function PlaygroundOverview({\n  registry,\n  basePath,\n  title,\n  subtitle,\n  grouped: initialGrouped = true,\n}: PlaygroundOverviewProps): React.ReactElement {\n  const navigate = useNavigate();\n  const [grouped, setGrouped] = useState(initialGrouped);\n\n  const handleNavigate = (path: string) => navigate(`${basePath}/${path}`);\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-start justify-between mb-6\">\n        <div>\n          <h1 className=\"mb-1\">{title}</h1>\n          <p className=\"text-sm text-muted-foreground\">{subtitle}</p>\n        </div>\n        <div className=\"flex items-center gap-1\">\n          <SimpleTooltip\n            label={grouped ? \"Show flat list\" : \"Group by category\"}\n          >\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => setGrouped((v) => !v)}\n            >\n              {grouped ? (\n                <LayoutGrid className=\"h-4 w-4\" />\n              ) : (\n                <List className=\"h-4 w-4\" />\n              )}\n            </Button>\n          </SimpleTooltip>\n          <PlaygroundSettingsPanel />\n        </div>\n      </div>\n\n      {grouped ? (\n        registry.getGrouped().map(([groupLabel, entries]) => (\n          <div key={groupLabel} className=\"mb-8\">\n            <h2 className=\"text-sm font-medium text-muted-foreground uppercase tracking-wider mb-4\">\n              {groupLabel}\n            </h2>\n            <div className={TILE_GRID}>\n              {entries.map((item) => (\n                <PlaygroundTile\n                  key={item.id}\n                  item={item}\n                  onNavigate={handleNavigate}\n                />\n              ))}\n            </div>\n          </div>\n        ))\n      ) : (\n        <div className={TILE_GRID}>\n          {registry.getAll().map((item) => (\n            <PlaygroundTile\n              key={item.id}\n              item={item}\n              onNavigate={handleNavigate}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n","/**\n * PlaygroundSettingsPanel -- gear button that opens a right-side settings sheet.\n *\n * Hosts playground-wide settings (currently locale). Edits flow through\n * usePlaygroundSettings, which drives the SonnetConfigProvider wrapping all\n * playground routes.\n */\n\nimport React, { useState } from \"react\";\nimport { Settings } from \"lucide-react\";\nimport {\n  IconButton,\n  Label,\n  Sheet,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetDescription,\n  SheetBody,\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectContent,\n  SelectItem,\n} from \"@petrarca/sonnet-ui\";\nimport { usePlaygroundSettings } from \"./PlaygroundSettings\";\n\n// Locale choices for the playground. \"__inherit__\" uses the app/browser locale.\nconst INHERIT = \"__inherit__\";\nconst LOCALE_OPTIONS = [\n  { code: INHERIT, label: \"Inherit (app / browser)\" },\n  { code: \"en-US\", label: \"English (US) - MM/DD, Sun\" },\n  { code: \"en-GB\", label: \"English (UK) - DD/MM, Mon\" },\n  { code: \"de-DE\", label: \"German - DD.MM, Mon\" },\n  { code: \"fr-FR\", label: \"French - DD/MM, Mon\" },\n  { code: \"sv-SE\", label: \"Swedish - YYYY-MM-DD, Mon\" },\n  { code: \"ja-JP\", label: \"Japanese - YYYY/MM/DD, Sun\" },\n];\n\nexport function PlaygroundSettingsPanel(): React.ReactElement {\n  const [open, setOpen] = useState(false);\n  const { settings, setSettings } = usePlaygroundSettings();\n\n  return (\n    <Sheet open={open} onOpenChange={setOpen}>\n      <IconButton label=\"Playground settings\" onClick={() => setOpen(true)}>\n        <Settings />\n      </IconButton>\n      <SheetContent side=\"right\">\n        <SheetHeader>\n          <SheetTitle>Playground settings</SheetTitle>\n          <SheetDescription>\n            Scoped to the playground. Values exchanged with components stay\n            locale-independent (ISO); only display and input parsing change.\n          </SheetDescription>\n        </SheetHeader>\n        <SheetBody>\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"playground-locale\">Locale</Label>\n            <Select\n              value={settings.locale || INHERIT}\n              onValueChange={(value) =>\n                setSettings({ locale: value === INHERIT ? \"\" : value })\n              }\n            >\n              <SelectTrigger id=\"playground-locale\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {LOCALE_OPTIONS.map((opt) => (\n                  <SelectItem key={opt.code} value={opt.code}>\n                    {opt.label}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n            <p className=\"text-xs text-tertiary-foreground\">\n              Drives locale-sensitive components (e.g. Date Input) across every\n              playground page.\n            </p>\n          </div>\n        </SheetBody>\n      </SheetContent>\n    </Sheet>\n  );\n}\n","/**\n * Playground-scoped settings (locale, ...).\n *\n * A self-contained provider that wraps all playground routes. It owns a small\n * settings object, persists it to a namespaced localStorage key, and renders a\n * SonnetConfigProvider so the settings flow to every playground page.\n *\n * Scope and containment: the provider is nested under any host-app provider and\n * merges onto it, so a playground override shadows the app/browser value only\n * within the playground subtree -- it never mutates the host app's global\n * config. The default is \"inherit\" (empty locale), so out of the box the\n * playground changes nothing.\n */\n\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { SonnetConfigProvider } from \"@petrarca/sonnet-core/config\";\n\nconst STORAGE_KEY = \"sonnet.playground.settings\";\n\nexport interface PlaygroundSettings {\n  /** BCP-47 locale override, or \"\" to inherit the app/browser locale. */\n  locale: string;\n}\n\ninterface PlaygroundSettingsContextValue {\n  settings: PlaygroundSettings;\n  setSettings: (next: Partial<PlaygroundSettings>) => void;\n}\n\nconst DEFAULT_SETTINGS: PlaygroundSettings = { locale: \"\" };\n\nconst PlaygroundSettingsContext =\n  createContext<PlaygroundSettingsContextValue | null>(null);\n\n// Safe localStorage access (guards against SSR and storage failures).\nconst storage = {\n  get(key: string): string | null {\n    try {\n      return typeof localStorage !== \"undefined\"\n        ? localStorage.getItem(key)\n        : null;\n    } catch {\n      return null;\n    }\n  },\n  set(key: string, value: string): void {\n    try {\n      if (typeof localStorage !== \"undefined\") localStorage.setItem(key, value);\n    } catch {\n      // Ignore quota / private-mode failures.\n    }\n  },\n};\n\nfunction loadSettings(): PlaygroundSettings {\n  const raw = storage.get(STORAGE_KEY);\n  if (!raw) return DEFAULT_SETTINGS;\n  try {\n    return { ...DEFAULT_SETTINGS, ...(JSON.parse(raw) as PlaygroundSettings) };\n  } catch {\n    return DEFAULT_SETTINGS;\n  }\n}\n\nfunction persistSettings(settings: PlaygroundSettings): void {\n  storage.set(STORAGE_KEY, JSON.stringify(settings));\n}\n\nexport interface PlaygroundSettingsProviderProps {\n  children: React.ReactNode;\n}\n\nexport function PlaygroundSettingsProvider({\n  children,\n}: PlaygroundSettingsProviderProps): React.ReactElement {\n  const [settings, setSettingsState] =\n    useState<PlaygroundSettings>(loadSettings);\n\n  const setSettings = useCallback(\n    (next: Partial<PlaygroundSettings>) =>\n      setSettingsState((prev) => {\n        const merged = { ...prev, ...next };\n        persistSettings(merged);\n        return merged;\n      }),\n    [],\n  );\n\n  const contextValue = useMemo(\n    () => ({ settings, setSettings }),\n    [settings, setSettings],\n  );\n\n  // Only override the global locale when explicitly set; \"\" inherits.\n  const config = useMemo(\n    () => ({ globals: { locale: settings.locale || undefined } }),\n    [settings.locale],\n  );\n\n  return (\n    <PlaygroundSettingsContext.Provider value={contextValue}>\n      <SonnetConfigProvider value={config}>{children}</SonnetConfigProvider>\n    </PlaygroundSettingsContext.Provider>\n  );\n}\n\n/** Access playground settings. Returns defaults when no provider is present. */\nexport function usePlaygroundSettings(): PlaygroundSettingsContextValue {\n  return (\n    useContext(PlaygroundSettingsContext) ?? {\n      settings: DEFAULT_SETTINGS,\n      setSettings: () => {},\n    }\n  );\n}\n","/**\n * @petrarca/sonnet-playground\n *\n * Playground framework and built-in component demos for the Petrarca\n * Sonnet component library.\n *\n * Usage:\n *\n *   import {\n *     createPlaygroundRegistry,\n *     createPlaygroundModule,\n *   } from \"@petrarca/sonnet-playground\";\n *\n *   const playground = createPlaygroundRegistry();\n *   // Optionally register additional entries:\n *   playground.register({ id: \"app.custom\", ... });\n *\n *   const playgroundModule = createPlaygroundModule(playground);\n */\n\nimport { PlaygroundRegistry } from \"./PlaygroundRegistry\";\nimport { builtinEntries } from \"./builtinEntries\";\n\n// Framework\nexport { PlaygroundRegistry } from \"./PlaygroundRegistry\";\nexport { createPlaygroundModule } from \"./createPlaygroundModule\";\nexport { PlaygroundOverview } from \"./PlaygroundOverview\";\nexport { PlaygroundSection } from \"./PlaygroundSection\";\nexport {\n  PlaygroundSettingsProvider,\n  usePlaygroundSettings,\n  type PlaygroundSettings,\n} from \"./PlaygroundSettings\";\nexport { PlaygroundSettingsPanel } from \"./PlaygroundSettingsPanel\";\n\n// Types\nexport type {\n  PlaygroundEntry,\n  PlaygroundColor,\n  PlaygroundModuleOptions,\n} from \"./types\";\n\n// Built-in entries (for selective use or extending)\nexport { builtinEntries } from \"./builtinEntries\";\n\n/**\n * Convenience factory: creates a new PlaygroundRegistry pre-populated\n * with all built-in sonnet component demos.\n */\nexport function createPlaygroundRegistry(): PlaygroundRegistry {\n  const registry = new PlaygroundRegistry();\n  registry.registerAll(builtinEntries);\n  return registry;\n}\n"],"mappings":"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","names":["useState","useState","jsx","useState","jsx","jsxs","useState","jsx"]}

package/dist/pages/index.d.ts

@@ -46,6 +46,14 @@ declare function PlayForms(): react_jsx_runtime.JSX.Element;
  */
 declare function PlayFormWidgets(): react_jsx_runtime.JSX.Element;
 
+/**
+ * PlaySchemaDesigner -- exercises SchemaDesigner: visually author a JsonSchema
+ * (and its uiSchema presentation hints), with a live preview. The profile
+ * switcher presets the capability profile (data/full triage, scoped editing,
+ * read-only); the in-designer Capabilities tab tweaks it live.
+ */
+declare function PlaySchemaDesigner(): react_jsx_runtime.JSX.Element;
+
 /**
  * Playground page for SearchInput, EntitySelect, EntityTable, and EntityTree.
  * Accessible at /playground/data-components
@@ -68,7 +76,7 @@ declare function PlayDataComponents(): React.ReactElement;
  *
  * Demonstrates graph visualization with static mock data -- no backend required.
  * Uses the GraphStoresContext provider pattern that consumers like explorer
- * and Atlas would use to wire their own stores.
+ * and any consumer app would use to wire their own stores.
  */
 
 declare function PlayGraph(): React.ReactElement;
@@ -81,4 +89,4 @@ declare function PlayGraph(): React.ReactElement;
  */
 declare function PlayShellApi(): react_jsx_runtime.JSX.Element;
 
-export { PlayAdvancedComponents, PlayColorPalette, PlayCoreComponents, PlayDataComponents, PlayFormComponents, PlayFormWidgets, PlayForms, PlayGraph, PlayJsonEditor, PlayShellApi, PlayTypography };
+export { PlayAdvancedComponents, PlayColorPalette, PlayCoreComponents, PlayDataComponents, PlayFormComponents, PlayFormWidgets, PlayForms, PlayGraph, PlayJsonEditor, PlaySchemaDesigner, PlayShellApi, PlayTypography };

package/dist/pages/index.js

@@ -1,15 +1,18 @@
 import {
   PlayForms
-} from "../chunk-6DZ3TSV4.js";
+} from "../chunk-ZSUCFEB6.js";
 import {
   PlayFormWidgets
-} from "../chunk-DZB6WFHA.js";
+} from "../chunk-UB7462QG.js";
+import {
+  PlaySchemaDesigner
+} from "../chunk-6VQJFBTM.js";
 import {
   PlayDataComponents
 } from "../chunk-O2QMWJZI.js";
 import {
   PlayGraph
-} from "../chunk-4ORSUS65.js";
+} from "../chunk-C2P3UQMZ.js";
 import {
   PlayShellApi
 } from "../chunk-CQ6PGFRV.js";
@@ -21,7 +24,7 @@ import {
 } from "../chunk-DA3BIB5N.js";
 import {
   PlayCoreComponents
-} from "../chunk-YOOWJORD.js";
+} from "../chunk-6WI3N7JI.js";
 import {
   PlayAdvancedComponents
 } from "../chunk-4Y4JFKAK.js";
@@ -42,6 +45,7 @@ export {
   PlayForms,
   PlayGraph,
   PlayJsonEditor,
+  PlaySchemaDesigner,
   PlayShellApi,
   PlayTypography
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@petrarca/sonnet-playground",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Playground framework and built-in component demos for the Petrarca Sonnet component library",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -26,11 +26,12 @@
     "lucide-react": "^0.553.0",
     "sonner": "^2.0.7",
     "zod": "^4.3.6",
-    "@petrarca/sonnet-core": "0.4.2",
-    "@petrarca/sonnet-forms": "0.4.2",
-    "@petrarca/sonnet-graph": "0.4.2",
-    "@petrarca/sonnet-ui": "0.4.2",
-    "@petrarca/sonnet-shell": "0.4.2"
+    "@petrarca/sonnet-ui": "0.6.0",
+    "@petrarca/sonnet-shell": "0.6.0",
+    "@petrarca/sonnet-forms": "0.6.0",
+    "@petrarca/sonnet-core": "0.6.0",
+    "@petrarca/sonnet-graph": "0.6.0",
+    "@petrarca/sonnet-schema-designer": "0.6.0"
   },
   "peerDependencies": {
     "react": ">=19",

package/dist/PlayForms-FOF3XE6G.js

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

package/dist/PlayGraph-ADRTDRA7.js

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

package/dist/chunk-4ORSUS65.js

@@ -1,359 +0,0 @@
-// src/pages/PlayGraph.tsx
-import { useCallback, useRef, useState } from "react";
-import {
-  GraphVisualizer,
-  ActionPanel,
-  GraphA11yList,
-  GraphRendererProvider,
-  GraphStoresContext,
-  createGraphDataStore,
-  createGraphFilterStore,
-  createGraphExplorationStore,
-  createSelectionStore,
-  createGraphFocusStore,
-  enrichNodes,
-  enrichEdges,
-  buildColorPalette
-} from "@petrarca/sonnet-graph";
-import {
-  Button,
-  Alert,
-  AlertDescription,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  ResizeHandle
-} from "@petrarca/sonnet-ui";
-import { Play, RotateCcw } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var MOCK_NODES = [
-  {
-    id_: 1,
-    label_: "Company",
-    properties_: { name: "Acme Corp", founded: 1985, industry: "Technology" }
-  },
-  {
-    id_: 2,
-    label_: "Department",
-    properties_: { name: "Engineering", headcount: 42 }
-  },
-  {
-    id_: 3,
-    label_: "Department",
-    properties_: { name: "Marketing", headcount: 18 }
-  },
-  {
-    id_: 4,
-    label_: "Department",
-    properties_: { name: "Sales", headcount: 25 }
-  },
-  {
-    id_: 5,
-    label_: "Person",
-    properties_: { name: "Alice Chen", role: "CTO" }
-  },
-  {
-    id_: 6,
-    label_: "Person",
-    properties_: { name: "Bob Smith", role: "VP Engineering" }
-  },
-  {
-    id_: 7,
-    label_: "Person",
-    properties_: { name: "Carol Davis", role: "CMO" }
-  },
-  {
-    id_: 8,
-    label_: "Person",
-    properties_: { name: "Dave Wilson", role: "VP Sales" }
-  },
-  {
-    id_: 9,
-    label_: "Person",
-    properties_: { name: "Eve Johnson", role: "Senior Engineer" }
-  },
-  {
-    id_: 10,
-    label_: "Person",
-    properties_: { name: "Frank Brown", role: "Product Manager" }
-  },
-  {
-    id_: 11,
-    label_: "Product",
-    properties_: { name: "CloudSuite", version: "3.2", status: "GA" }
-  },
-  {
-    id_: 12,
-    label_: "Product",
-    properties_: { name: "DataPipeline", version: "1.0", status: "Beta" }
-  }
-];
-var MOCK_EDGES = [
-  {
-    id_: 101,
-    label_: "HAS_DEPARTMENT",
-    start_id_: 1,
-    end_id_: 2,
-    properties_: {}
-  },
-  {
-    id_: 102,
-    label_: "HAS_DEPARTMENT",
-    start_id_: 1,
-    end_id_: 3,
-    properties_: {}
-  },
-  {
-    id_: 103,
-    label_: "HAS_DEPARTMENT",
-    start_id_: 1,
-    end_id_: 4,
-    properties_: {}
-  },
-  {
-    id_: 104,
-    label_: "LEADS",
-    start_id_: 5,
-    end_id_: 2,
-    properties_: { since: 2019 }
-  },
-  {
-    id_: 105,
-    label_: "WORKS_IN",
-    start_id_: 6,
-    end_id_: 2,
-    properties_: { since: 2020 }
-  },
-  {
-    id_: 106,
-    label_: "LEADS",
-    start_id_: 7,
-    end_id_: 3,
-    properties_: { since: 2021 }
-  },
-  {
-    id_: 107,
-    label_: "LEADS",
-    start_id_: 8,
-    end_id_: 4,
-    properties_: { since: 2018 }
-  },
-  {
-    id_: 108,
-    label_: "WORKS_IN",
-    start_id_: 9,
-    end_id_: 2,
-    properties_: { since: 2022 }
-  },
-  {
-    id_: 109,
-    label_: "WORKS_IN",
-    start_id_: 10,
-    end_id_: 2,
-    properties_: { since: 2021 }
-  },
-  { id_: 110, label_: "REPORTS_TO", start_id_: 6, end_id_: 5, properties_: {} },
-  { id_: 111, label_: "REPORTS_TO", start_id_: 9, end_id_: 6, properties_: {} },
-  {
-    id_: 112,
-    label_: "REPORTS_TO",
-    start_id_: 10,
-    end_id_: 6,
-    properties_: {}
-  },
-  { id_: 113, label_: "OWNS", start_id_: 2, end_id_: 11, properties_: {} },
-  { id_: 114, label_: "OWNS", start_id_: 2, 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 INITIAL_DATA = { nodes: MOCK_NODES, edges: MOCK_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();
-}
-loadIntoStore(PLAYGROUND_STORES, INITIAL_DATA);
-function PlayGraph() {
-  const [jsonText, setJsonText] = useState(
-    () => serializeGraphData(INITIAL_DATA)
-  );
-  const [parseError, setParseError] = useState(null);
-  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);
-    loadIntoStore(PLAYGROUND_STORES, parsed);
-  }, [jsonText]);
-  const handleReset = useCallback(() => {
-    setJsonText(serializeGraphData(INITIAL_DATA));
-    setParseError(null);
-    loadIntoStore(PLAYGROUND_STORES, INITIAL_DATA);
-  }, []);
-  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__ */ jsx("h1", { children: "Graph Visualization" }),
-      /* @__PURE__ */ jsx("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." })
-    ] }),
-    /* @__PURE__ */ jsx(GraphStoresContext.Provider, { value: PLAYGROUND_STORES, children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "graph", className: "space-y-3", children: [
-      /* @__PURE__ */ jsxs(TabsList, { children: [
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "graph", children: "Graph" }),
-        /* @__PURE__ */ jsx(TabsTrigger, { value: "data", children: "Data" })
-      ] }),
-      /* @__PURE__ */ jsx(TabsContent, { value: "graph", className: "mt-0", children: /* @__PURE__ */ jsx(GraphRendererProvider, { defaultRenderer: "cytoscape", children: /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "flex overflow-hidden h-[600px]", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(GraphVisualizer, {}) }),
-        /* @__PURE__ */ jsx(
-          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__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx(ActionPanel, {}) }),
-              /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-4 pb-4 pt-2", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Accessible list (demo)" }),
-                /* @__PURE__ */ jsx(GraphA11yList, { visible: true, maxHeight: 160 })
-              ] })
-            ]
-          }
-        )
-      ] }) }) }),
-      /* @__PURE__ */ jsx(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__ */ jsx(Play, { className: "h-4 w-4 mr-1" }),
-            "Apply"
-          ] }),
-          /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: handleReset, children: [
-            /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4 mr-1" }),
-            "Reset"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-2", children: "Cmd+Enter to apply" })
-        ] }),
-        parseError && /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: parseError }) }),
-        /* @__PURE__ */ jsx(
-          "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"
-          }
-        )
-      ] }) })
-    ] }) })
-  ] });
-}
-
-export {
-  PlayGraph
-};
-//# sourceMappingURL=chunk-4ORSUS65.js.map