@petrarca/sonnet-playground 0.2.0 → 0.3.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  Braces,\n  Check,\n  Edit,\n  Package,\n  Table2,\n  Network,\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.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: 1,\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","/**\n * Factory that turns a PlaygroundRegistry into a ServiceModule.\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 { ServiceModule, 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 ServiceModule 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): ServiceModule {\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-6\">\n        <div\n          className={`flex items-center justify-center w-[50px] h-[50px] rounded-md ${COLOR_CLASSES[item.color] ?? COLOR_CLASSES.blue}`}\n        >\n          <item.icon size={28} />\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 py-12 px-4\">\n      <div className=\"flex items-start justify-between mb-6\">\n        <div>\n          <h1 className=\"mb-1\">{title}</h1>\n          <p className=\"text-lg 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":"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","names":["jsx"]}
+{"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":"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","names":["jsx"]}

package/dist/pages/index.d.ts

@@ -6,19 +6,15 @@ declare function PlayTypography(): React.ReactElement;
 /** Color Palette playground -- living reference for the design system color tokens. */
 declare function PlayColorPalette(): React.ReactElement;
 
+/** PlayCoreComponents — showcase for all core UI primitives. */
+declare function PlayCoreComponents(): react_jsx_runtime.JSX.Element;
+
 /**
- * PlayCoreComponents - Showcase for all core UI components
+ * PlayAdvancedComponents — Stepper and TreeView demos.
  *
- * This playground allows testing and visual verification of all core UI components
- * before they are used in production. Each component is tested "in-vitro" here first.
- *
- * Structure:
- * - Each component type gets its own section
- * - Show all variants, states, and edge cases
- * - Interactive examples where applicable
- * - Use simple HTML/Tailwind for layout (no Mantine)
+ * Split from PlayCoreComponents to keep files manageable.
  */
-declare function PlayCoreComponents(): react_jsx_runtime.JSX.Element;
+declare function PlayAdvancedComponents(): react_jsx_runtime.JSX.Element;
 
 /**
  * Playground page for the JsonEditor component.
@@ -77,4 +73,12 @@ declare function PlayDataComponents(): React.ReactElement;
 
 declare function PlayGraph(): React.ReactElement;
 
-export { PlayColorPalette, PlayCoreComponents, PlayDataComponents, PlayFormComponents, PlayFormWidgets, PlayForms, PlayGraph, PlayJsonEditor, PlayTypography };
+/**
+ * PlayShellApi -- playground page that exercises the shell API surface.
+ *
+ * Covers: notification, dialog, navigation, panel, sidePane,
+ * and the command menu (Cmd+K).
+ */
+declare function PlayShellApi(): react_jsx_runtime.JSX.Element;
+
+export { PlayAdvancedComponents, PlayColorPalette, PlayCoreComponents, PlayDataComponents, PlayFormComponents, PlayFormWidgets, PlayForms, PlayGraph, PlayJsonEditor, PlayShellApi, PlayTypography };

package/dist/pages/index.js

@@ -1,32 +1,39 @@
+import {
+  PlayForms
+} from "../chunk-6DZ3TSV4.js";
 import {
   PlayFormWidgets
-} from "../chunk-P7I5IDXA.js";
+} from "../chunk-DZB6WFHA.js";
 import {
   PlayDataComponents
-} from "../chunk-TZGJH7YS.js";
+} from "../chunk-DKLALDHR.js";
 import {
   PlayGraph
-} from "../chunk-PGI54O43.js";
+} from "../chunk-SBKZRIJC.js";
+import {
+  PlayShellApi
+} from "../chunk-4S2ITDB3.js";
 import {
   PlayTypography
-} from "../chunk-CYNK2P2Q.js";
+} from "../chunk-7IBZEHLI.js";
 import {
   PlayColorPalette
-} from "../chunk-A3IK3CVW.js";
-import "../chunk-FTN2A5YL.js";
+} from "../chunk-DA3BIB5N.js";
 import {
   PlayCoreComponents
-} from "../chunk-GYKEPHHA.js";
+} from "../chunk-QCK2M4KD.js";
+import {
+  PlayAdvancedComponents
+} from "../chunk-4Y4JFKAK.js";
 import {
   PlayJsonEditor
-} from "../chunk-KAT24CQQ.js";
+} from "../chunk-FZ3ZC7VM.js";
 import {
   PlayFormComponents
-} from "../chunk-5V27QDAY.js";
-import {
-  PlayForms
-} from "../chunk-QIETZUEN.js";
+} from "../chunk-MT4ILA37.js";
+import "../chunk-C2EZ2ECG.js";
 export {
+  PlayAdvancedComponents,
   PlayColorPalette,
   PlayCoreComponents,
   PlayDataComponents,
@@ -35,6 +42,7 @@ export {
   PlayForms,
   PlayGraph,
   PlayJsonEditor,
+  PlayShellApi,
   PlayTypography
 };
 //# sourceMappingURL=index.js.map

package/package.json

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

package/dist/PlayColorPalette-UFMTJTUB.js

@@ -1,8 +0,0 @@
-import {
-  PlayColorPalette
-} from "./chunk-A3IK3CVW.js";
-import "./chunk-FTN2A5YL.js";
-export {
-  PlayColorPalette as default
-};
-//# sourceMappingURL=PlayColorPalette-UFMTJTUB.js.map

package/dist/PlayCoreComponents-7QCDFQLT.js

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

package/dist/PlayDataComponents-GZSRTW4F.js

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

package/dist/PlayFormComponents-RJB6WZHD.js

@@ -1,7 +0,0 @@
-import {
-  PlayFormComponents
-} from "./chunk-5V27QDAY.js";
-export {
-  PlayFormComponents as default
-};
-//# sourceMappingURL=PlayFormComponents-RJB6WZHD.js.map

package/dist/PlayFormWidgets-OFV7TJKH.js

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

package/dist/PlayForms-24XX5DC6.js

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

package/dist/PlayGraph-FLGLSUWV.js

@@ -1,8 +0,0 @@
-import {
-  PlayGraph
-} from "./chunk-PGI54O43.js";
-import "./chunk-FTN2A5YL.js";
-export {
-  PlayGraph as default
-};
-//# sourceMappingURL=PlayGraph-FLGLSUWV.js.map

package/dist/PlayJsonEditor-4L5INQPU.js

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

package/dist/PlayTypography-ID6DLFZD.js

@@ -1,8 +0,0 @@
-import {
-  PlayTypography
-} from "./chunk-CYNK2P2Q.js";
-import "./chunk-FTN2A5YL.js";
-export {
-  PlayTypography as default
-};
-//# sourceMappingURL=PlayTypography-ID6DLFZD.js.map