@petrarca/sonnet-playground 0.2.0 → 0.4.0

package/dist/chunk-YOOWJORD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayCoreComponents.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { toast } from \"sonner\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\nimport {\n  Spinner,\n  Button,\n  Badge,\n  Alert,\n  AlertDescription,\n  AlertTitle,\n  Separator,\n  ResizeHandle,\n  Input,\n  Textarea,\n  Checkbox,\n  Label,\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@petrarca/sonnet-ui\";\nimport { useClipboard, useDisclosure } from \"@petrarca/sonnet-core/hooks\";\nimport { Info, AlertTriangle, CheckCircle } from \"lucide-react\";\n\n/** PlayCoreComponents — showcase for all core UI primitives. */\nexport default function PlayCoreComponents() {\n  const [spinnerSize, setSpinnerSize] = useState<\"sm\" | \"md\" | \"lg\">(\"md\");\n  const clipboard = useClipboard({ timeout: 2000 });\n  const [disclosureOpened, disclosureHandlers] = useDisclosure(false);\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Header */}\n      <div>\n        <h1>Core UI Components</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          Test all core UI components in isolation before production deployment.\n          Each component is verified here first.\n        </p>\n      </div>\n\n      {/* Components Grid */}\n      <div className=\"space-y-6\">\n        {/* Buttons */}\n        <PlaygroundSection\n          title=\"Buttons\"\n          description=\"shadcn/ui Button component with all variants and sizes.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-6\">\n            {/* Variants */}\n            <div>\n              <h4 className=\"mb-3\">Variants</h4>\n              <div className=\"flex flex-wrap gap-3\">\n                <Button>Default</Button>\n                <Button variant=\"secondary\">Secondary</Button>\n                <Button variant=\"destructive\">Destructive</Button>\n                <Button variant=\"outline\">Outline</Button>\n                <Button variant=\"ghost\">Ghost</Button>\n                <Button variant=\"link\">Link</Button>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* Sizes */}\n            <div>\n              <h4 className=\"mb-3\">Sizes</h4>\n              <div className=\"flex flex-wrap items-center gap-3\">\n                <Button size=\"sm\">Small</Button>\n                <Button size=\"default\">Default</Button>\n                <Button size=\"lg\">Large</Button>\n                <Button size=\"icon\">🔍</Button>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* States */}\n            <div>\n              <h4 className=\"mb-3\">States</h4>\n              <div className=\"flex flex-wrap gap-3\">\n                <Button disabled>Disabled</Button>\n                <Button variant=\"outline\" disabled>\n                  Disabled Outline\n                </Button>\n              </div>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Badges */}\n        <PlaygroundSection\n          title=\"Badges\"\n          description=\"Badge component with different variants.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-4\">\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <Badge>Default</Badge>\n              <Badge variant=\"secondary\">Secondary</Badge>\n              <Badge variant=\"destructive\">Destructive</Badge>\n              <Badge variant=\"outline\">Outline</Badge>\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <span className=\"text-sm text-muted-foreground\">Status:</span>\n              <Badge variant=\"default\">Active</Badge>\n              <Badge variant=\"secondary\">Pending</Badge>\n              <Badge variant=\"destructive\">Error</Badge>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Alerts */}\n        <PlaygroundSection\n          title=\"Alerts\"\n          description=\"Alert component for important messages.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-4\">\n            <Alert>\n              <Info className=\"h-4 w-4\" />\n              <AlertTitle>Info</AlertTitle>\n              <AlertDescription>\n                This is an informational message.\n              </AlertDescription>\n            </Alert>\n\n            <Alert variant=\"default\">\n              <CheckCircle className=\"h-4 w-4\" />\n              <AlertTitle>Success</AlertTitle>\n              <AlertDescription>\n                Your operation completed successfully.\n              </AlertDescription>\n            </Alert>\n\n            <Alert variant=\"destructive\">\n              <AlertTriangle className=\"h-4 w-4\" />\n              <AlertTitle>Error</AlertTitle>\n              <AlertDescription>\n                There was a problem with your request.\n              </AlertDescription>\n            </Alert>\n          </div>\n        </PlaygroundSection>\n\n        {/* Cards */}\n        <PlaygroundSection\n          title=\"Cards\"\n          description=\"Card component for content containers.\"\n          variant=\"card\"\n        >\n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Simple Card</CardTitle>\n                <CardDescription>\n                  Basic card with header and content\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <p className=\"text-sm text-muted-foreground\">\n                  This is a simple card component with header and content\n                  sections.\n                </p>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Card with Footer</CardTitle>\n                <CardDescription>Includes footer with actions</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <p className=\"text-sm text-muted-foreground\">\n                  This card has a footer section for actions.\n                </p>\n              </CardContent>\n              <CardFooter className=\"flex gap-2\">\n                <Button variant=\"outline\" size=\"sm\">\n                  Cancel\n                </Button>\n                <Button size=\"sm\">Save</Button>\n              </CardFooter>\n            </Card>\n\n            <Card className=\"col-span-1 md:col-span-2\">\n              <CardHeader>\n                <CardTitle>Full Width Card</CardTitle>\n                <CardDescription>\n                  This card spans the full width\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-2\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Cards can be combined with other components for rich\n                    layouts.\n                  </p>\n                  <div className=\"flex gap-2\">\n                    <Badge>Feature</Badge>\n                    <Badge variant=\"secondary\">New</Badge>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </PlaygroundSection>\n\n        {/* Separator */}\n        <PlaygroundSection\n          title=\"Separator\"\n          description=\"Visual separator for content sections.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-4\">\n            <div>\n              <p className=\"text-sm\">Content above separator</p>\n              <Separator className=\"my-4\" />\n              <p className=\"text-sm\">Content below separator</p>\n            </div>\n\n            <div className=\"flex items-center gap-4\">\n              <p className=\"text-sm\">Vertical separator</p>\n              <Separator orientation=\"vertical\" className=\"h-6\" />\n              <p className=\"text-sm\">Between items</p>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Resize handle */}\n        <PlaygroundSection\n          title=\"Resize Handle\"\n          description=\"Draggable divider between two resizable panes. Quiet centered grip, hover to emphasise; wider invisible hit-area. Orientation-aware (consumer owns the resize math).\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-6\">\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2\">\n                Vertical (left / right panes)\n              </p>\n              <div className=\"flex h-32 rounded-md border overflow-hidden\">\n                <div className=\"flex-1 bg-muted/30 flex items-center justify-center text-sm text-muted-foreground\">\n                  Left pane\n                </div>\n                <ResizeHandle orientation=\"vertical\" />\n                <div className=\"flex-1 bg-muted/30 flex items-center justify-center text-sm text-muted-foreground\">\n                  Right pane\n                </div>\n              </div>\n            </div>\n\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2\">\n                Horizontal (top / bottom panes)\n              </p>\n              <div className=\"flex flex-col h-40 rounded-md border overflow-hidden\">\n                <div className=\"flex-1 bg-muted/30 flex items-center justify-center text-sm text-muted-foreground\">\n                  Top pane\n                </div>\n                <ResizeHandle orientation=\"horizontal\" />\n                <div className=\"flex-1 bg-muted/30 flex items-center justify-center text-sm text-muted-foreground\">\n                  Bottom pane\n                </div>\n              </div>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Tooltips */}\n        <PlaygroundSection\n          title=\"Tooltips\"\n          description=\"Tooltip component for additional information on hover.\"\n          variant=\"card\"\n        >\n          <TooltipProvider>\n            <div className=\"flex flex-wrap gap-6\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"outline\">Hover me</Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p>This is a tooltip</p>\n                </TooltipContent>\n              </Tooltip>\n\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button>Top (default)</Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p>Tooltip positioned at top</p>\n                </TooltipContent>\n              </Tooltip>\n\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"secondary\">With icon 🎯</Button>\n                </TooltipTrigger>\n                <TooltipContent>\n                  <p>Tooltips work with any trigger element</p>\n                </TooltipContent>\n              </Tooltip>\n            </div>\n          </TooltipProvider>\n        </PlaygroundSection>\n\n        {/* Dialogs & Modals */}\n        <PlaygroundSection\n          title=\"Dialogs\"\n          description=\"shadcn/ui Dialog component for modal interactions.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-6\">\n            {/* Basic Dialog */}\n            <div>\n              <h4 className=\"mb-3\">Basic Dialog</h4>\n              <Dialog>\n                <DialogTrigger asChild>\n                  <Button variant=\"outline\">Open Dialog</Button>\n                </DialogTrigger>\n                <DialogContent>\n                  <DialogHeader>\n                    <DialogTitle>Dialog Title</DialogTitle>\n                    <DialogDescription>\n                      This is a basic dialog with a title and description.\n                    </DialogDescription>\n                  </DialogHeader>\n                  <div className=\"py-4\">\n                    <p className=\"text-sm text-muted-foreground\">\n                      Dialog content goes here. You can add any components or\n                      text you need.\n                    </p>\n                  </div>\n                  <DialogFooter>\n                    <Button variant=\"outline\">Cancel</Button>\n                    <Button>Confirm</Button>\n                  </DialogFooter>\n                </DialogContent>\n              </Dialog>\n            </div>\n\n            <Separator />\n\n            {/* Confirmation Dialog */}\n            <div>\n              <h4 className=\"mb-3\">Confirmation Dialog</h4>\n              <Dialog>\n                <DialogTrigger asChild>\n                  <Button variant=\"destructive\">Delete Item</Button>\n                </DialogTrigger>\n                <DialogContent>\n                  <DialogHeader>\n                    <DialogTitle>Are you absolutely sure?</DialogTitle>\n                    <DialogDescription>\n                      This action cannot be undone. This will permanently delete\n                      your data from our servers.\n                    </DialogDescription>\n                  </DialogHeader>\n                  <DialogFooter>\n                    <Button variant=\"outline\">Cancel</Button>\n                    <Button\n                      variant=\"destructive\"\n                      onClick={() => {\n                        toast.success(\"Item deleted\");\n                      }}\n                    >\n                      Delete\n                    </Button>\n                  </DialogFooter>\n                </DialogContent>\n              </Dialog>\n            </div>\n\n            <Separator />\n\n            {/* Dialog with Form */}\n            <div>\n              <h4 className=\"mb-3\">Dialog with Form</h4>\n              <Dialog>\n                <DialogTrigger asChild>\n                  <Button>Add New Item</Button>\n                </DialogTrigger>\n                <DialogContent>\n                  <DialogHeader>\n                    <DialogTitle>Add New Item</DialogTitle>\n                    <DialogDescription>\n                      Fill in the details below to add a new item.\n                    </DialogDescription>\n                  </DialogHeader>\n                  <div className=\"grid gap-4 py-4\">\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        placeholder=\"Enter name...\"\n                      />\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <Label htmlFor=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        placeholder=\"Enter description...\"\n                        rows={3}\n                      />\n                    </div>\n                  </div>\n                  <DialogFooter>\n                    <Button variant=\"outline\">Cancel</Button>\n                    <Button\n                      onClick={() => {\n                        toast.success(\"Item added\");\n                      }}\n                    >\n                      Add Item\n                    </Button>\n                  </DialogFooter>\n                </DialogContent>\n              </Dialog>\n            </div>\n\n            <Separator />\n\n            {/* Information Dialog */}\n            <div>\n              <h4 className=\"mb-3\">Information Dialog</h4>\n              <Dialog>\n                <DialogTrigger asChild>\n                  <Button variant=\"secondary\">View Details</Button>\n                </DialogTrigger>\n                <DialogContent className=\"max-w-2xl\">\n                  <DialogHeader>\n                    <DialogTitle>System Information</DialogTitle>\n                    <DialogDescription>\n                      Detailed information about the current system status.\n                    </DialogDescription>\n                  </DialogHeader>\n                  <div className=\"space-y-4 py-4\">\n                    <div className=\"grid grid-cols-2 gap-4\">\n                      <div>\n                        <p className=\"text-sm font-medium text-foreground\">\n                          Status\n                        </p>\n                        <Badge variant=\"default\" className=\"mt-1\">\n                          Active\n                        </Badge>\n                      </div>\n                      <div>\n                        <p className=\"text-sm font-medium text-foreground\">\n                          Version\n                        </p>\n                        <p className=\"text-sm text-muted-foreground mt-1\">\n                          1.0.0\n                        </p>\n                      </div>\n                      <div>\n                        <p className=\"text-sm font-medium text-foreground\">\n                          Environment\n                        </p>\n                        <p className=\"text-sm text-muted-foreground mt-1\">\n                          Production\n                        </p>\n                      </div>\n                      <div>\n                        <p className=\"text-sm font-medium text-foreground\">\n                          Region\n                        </p>\n                        <p className=\"text-sm text-muted-foreground mt-1\">\n                          US-East\n                        </p>\n                      </div>\n                    </div>\n                    <Separator />\n                    <div>\n                      <p className=\"text-sm font-medium text-foreground mb-2\">\n                        Description\n                      </p>\n                      <p className=\"text-sm text-muted-foreground\">\n                        This is an example of an information dialog that\n                        displays system details. It can contain various types of\n                        content including badges, separators, and structured\n                        data.\n                      </p>\n                    </div>\n                  </div>\n                  <DialogFooter>\n                    <Button>Close</Button>\n                  </DialogFooter>\n                </DialogContent>\n              </Dialog>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Form Inputs */}\n        <PlaygroundSection\n          title=\"Form Inputs\"\n          description=\"shadcn/ui Input, Textarea, and Checkbox components.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-6\">\n            {/* Input */}\n            <div>\n              <h4 className=\"mb-3\">Input</h4>\n              <div className=\"space-y-4 max-w-md\">\n                <div>\n                  <Label htmlFor=\"input-default\">Default Input</Label>\n                  <Input\n                    id=\"input-default\"\n                    type=\"text\"\n                    placeholder=\"Enter text...\"\n                  />\n                </div>\n\n                <div>\n                  <Label htmlFor=\"input-email\">Email Input</Label>\n                  <Input\n                    id=\"input-email\"\n                    type=\"email\"\n                    placeholder=\"email@example.com\"\n                  />\n                </div>\n\n                <div>\n                  <Label htmlFor=\"input-password\">Password Input</Label>\n                  <Input\n                    id=\"input-password\"\n                    type=\"password\"\n                    placeholder=\"Enter password...\"\n                  />\n                </div>\n\n                <div>\n                  <Label htmlFor=\"input-disabled\">Disabled Input</Label>\n                  <Input\n                    id=\"input-disabled\"\n                    type=\"text\"\n                    placeholder=\"Disabled...\"\n                    disabled\n                  />\n                </div>\n\n                <div>\n                  <Label htmlFor=\"input-readonly\">Read-only Input</Label>\n                  <Input\n                    id=\"input-readonly\"\n                    type=\"text\"\n                    value=\"Read-only value\"\n                    readOnly\n                  />\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* Textarea */}\n            <div>\n              <h4 className=\"mb-3\">Textarea</h4>\n              <div className=\"space-y-4 max-w-md\">\n                <div>\n                  <Label htmlFor=\"textarea-default\">Default Textarea</Label>\n                  <Textarea\n                    id=\"textarea-default\"\n                    placeholder=\"Enter multi-line text...\"\n                  />\n                </div>\n\n                <div>\n                  <Label htmlFor=\"textarea-rows\">\n                    Textarea with Custom Rows\n                  </Label>\n                  <Textarea\n                    id=\"textarea-rows\"\n                    placeholder=\"This has 5 rows...\"\n                    rows={5}\n                  />\n                </div>\n\n                <div>\n                  <Label htmlFor=\"textarea-disabled\">Disabled Textarea</Label>\n                  <Textarea\n                    id=\"textarea-disabled\"\n                    placeholder=\"Disabled...\"\n                    disabled\n                  />\n                </div>\n\n                <div>\n                  <Label htmlFor=\"textarea-value\">Textarea with Value</Label>\n                  <Textarea\n                    id=\"textarea-value\"\n                    value=\"This is some pre-filled text in the textarea.\"\n                    readOnly\n                  />\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* Checkbox */}\n            <div>\n              <h4 className=\"mb-3\">Checkbox</h4>\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"checkbox-default\" />\n                  <Label htmlFor=\"checkbox-default\">Default Checkbox</Label>\n                </div>\n\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"checkbox-checked\" defaultChecked />\n                  <Label htmlFor=\"checkbox-checked\">Checked by Default</Label>\n                </div>\n\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"checkbox-disabled\" disabled />\n                  <Label htmlFor=\"checkbox-disabled\">Disabled Checkbox</Label>\n                </div>\n\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"checkbox-disabled-checked\" disabled checked />\n                  <Label htmlFor=\"checkbox-disabled-checked\">\n                    Disabled & Checked\n                  </Label>\n                </div>\n\n                <Separator className=\"my-4\" />\n\n                <div className=\"space-y-3\">\n                  <p className=\"text-sm font-medium\">\n                    Multiple Checkboxes Example:\n                  </p>\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"terms\" />\n                    <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"marketing\" />\n                    <Label htmlFor=\"marketing\">Send me marketing emails</Label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"newsletter\" defaultChecked />\n                    <Label htmlFor=\"newsletter\">Subscribe to newsletter</Label>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Label Component */}\n        <PlaygroundSection\n          title=\"Label\"\n          description=\"Label component for form fields with proper accessibility.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-6\">\n            {/* Basic Label */}\n            <div>\n              <h4 className=\"mb-3\">Basic Usage</h4>\n              <div className=\"space-y-4\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"email\">Email Address</Label>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    placeholder=\"Enter your email\"\n                  />\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"username\">Username</Label>\n                  <Input id=\"username\" placeholder=\"Choose a username\" />\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"bio\">Bio</Label>\n                  <Textarea id=\"bio\" placeholder=\"Tell us about yourself\" />\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* Label with Checkbox */}\n            <div>\n              <h4 className=\"mb-3\">With Checkbox</h4>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"terms-label\" />\n                  <Label htmlFor=\"terms-label\">\n                    Accept terms and conditions\n                  </Label>\n                </div>\n\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"newsletter-label\" />\n                  <Label htmlFor=\"newsletter-label\">\n                    Subscribe to newsletter\n                  </Label>\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* Disabled State */}\n            <div>\n              <h4 className=\"mb-3\">Disabled State</h4>\n              <div className=\"space-y-2\">\n                <Label htmlFor=\"disabled-input\" className=\"opacity-50\">\n                  Disabled Field\n                </Label>\n                <Input\n                  id=\"disabled-input\"\n                  disabled\n                  placeholder=\"This field is disabled\"\n                />\n              </div>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Avatar Component */}\n        <PlaygroundSection\n          title=\"Avatar\"\n          description=\"Avatar component for displaying user profile images with fallback support.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-6\">\n            {/* Basic Avatars */}\n            <div>\n              <h4 className=\"mb-3\">Basic Avatars</h4>\n              <div className=\"flex items-center gap-4\">\n                <Avatar>\n                  <AvatarImage\n                    src=\"https://github.com/shadcn.png\"\n                    alt=\"@shadcn\"\n                  />\n                  <AvatarFallback>CN</AvatarFallback>\n                </Avatar>\n\n                <Avatar>\n                  <AvatarImage\n                    src=\"https://github.com/vercel.png\"\n                    alt=\"@vercel\"\n                  />\n                  <AvatarFallback>VC</AvatarFallback>\n                </Avatar>\n\n                <Avatar>\n                  <AvatarImage\n                    src=\"https://github.com/react.png\"\n                    alt=\"@react\"\n                  />\n                  <AvatarFallback>RC</AvatarFallback>\n                </Avatar>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* Fallback Only */}\n            <div>\n              <h4 className=\"mb-3\">Fallback Only (No Image)</h4>\n              <div className=\"flex items-center gap-4\">\n                <Avatar>\n                  <AvatarFallback>JD</AvatarFallback>\n                </Avatar>\n\n                <Avatar>\n                  <AvatarFallback>AB</AvatarFallback>\n                </Avatar>\n\n                <Avatar>\n                  <AvatarFallback>XY</AvatarFallback>\n                </Avatar>\n\n                <Avatar>\n                  <AvatarFallback className=\"bg-primary text-primary-foreground\">\n                    DB\n                  </AvatarFallback>\n                </Avatar>\n\n                <Avatar>\n                  <AvatarFallback className=\"bg-secondary text-secondary-foreground\">\n                    GH\n                  </AvatarFallback>\n                </Avatar>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* With User Info */}\n            <div>\n              <h4 className=\"mb-3\">With User Information</h4>\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center gap-3\">\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"@shadcn\"\n                    />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p className=\"text-sm font-medium text-foreground\">\n                      John Doe\n                    </p>\n                    <p className=\"text-xs text-faint-foreground\">\n                      john.doe@example.com\n                    </p>\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-3\">\n                  <Avatar>\n                    <AvatarFallback className=\"bg-primary text-primary-foreground\">\n                      JD\n                    </AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p className=\"text-sm font-medium text-foreground\">\n                      Jane Smith\n                    </p>\n                    <p className=\"text-xs text-faint-foreground\">\n                      jane.smith@example.com\n                    </p>\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-3\">\n                  <Avatar>\n                    <AvatarFallback className=\"bg-destructive text-destructive-foreground\">\n                      AS\n                    </AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p className=\"text-sm font-medium text-foreground\">\n                      Alex Johnson\n                    </p>\n                    <p className=\"text-xs text-faint-foreground\">\n                      alex.j@example.com\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* Different Sizes */}\n            <div>\n              <h4 className=\"mb-3\">Custom Sizes</h4>\n              <div className=\"flex items-end gap-4\">\n                <div className=\"flex flex-col items-center gap-2\">\n                  <Avatar className=\"h-8 w-8\">\n                    <AvatarFallback className=\"text-xs\">SM</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-xs text-muted-foreground\">Small</span>\n                </div>\n\n                <div className=\"flex flex-col items-center gap-2\">\n                  <Avatar>\n                    <AvatarFallback>MD</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-xs text-muted-foreground\">Default</span>\n                </div>\n\n                <div className=\"flex flex-col items-center gap-2\">\n                  <Avatar className=\"h-16 w-16\">\n                    <AvatarFallback className=\"text-lg\">LG</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-xs text-muted-foreground\">Large</span>\n                </div>\n\n                <div className=\"flex flex-col items-center gap-2\">\n                  <Avatar className=\"h-20 w-20\">\n                    <AvatarFallback className=\"text-xl\">XL</AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-xs text-muted-foreground\">\n                    Extra Large\n                  </span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Notifications */}\n        <PlaygroundSection\n          title=\"Notifications\"\n          description=\"Toast notifications using Sonner. Test all variants and behaviors.\"\n          variant=\"card\"\n        >\n          <div className=\"flex flex-wrap gap-3\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => toast.success(\"Success! Operation completed.\")}\n            >\n              Success\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => toast.error(\"Error! Something went wrong.\")}\n            >\n              Error\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => toast.warning(\"Warning! Please be careful.\")}\n            >\n              Warning\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => toast.info(\"Info: Here is some information.\")}\n            >\n              Info\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => {\n                toast.success(\"First notification\");\n                setTimeout(() => toast.info(\"Second notification\"), 500);\n                setTimeout(() => toast.warning(\"Third notification\"), 1000);\n              }}\n            >\n              Multiple\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() =>\n                toast(\"Custom message\", {\n                  description: \"This is a custom notification with description\",\n                  duration: 5000,\n                })\n              }\n            >\n              Custom\n            </Button>\n          </div>\n        </PlaygroundSection>\n\n        {/* Spinner */}\n        <PlaygroundSection\n          title=\"Spinner Component\"\n          description=\"Loading spinner with different sizes.\"\n          variant=\"card\"\n        >\n          <div className=\"space-y-4\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-sm font-medium text-muted-foreground\">\n                Size:\n              </span>\n              <Button\n                variant={spinnerSize === \"sm\" ? \"default\" : \"outline\"}\n                size=\"sm\"\n                onClick={() => setSpinnerSize(\"sm\")}\n              >\n                Small\n              </Button>\n              <Button\n                variant={spinnerSize === \"md\" ? \"default\" : \"outline\"}\n                size=\"sm\"\n                onClick={() => setSpinnerSize(\"md\")}\n              >\n                Medium\n              </Button>\n              <Button\n                variant={spinnerSize === \"lg\" ? \"default\" : \"outline\"}\n                size=\"sm\"\n                onClick={() => setSpinnerSize(\"lg\")}\n              >\n                Large\n              </Button>\n            </div>\n\n            <div className=\"flex items-center gap-8 p-6 bg-muted/50 rounded-md\">\n              <div className=\"flex flex-col items-center gap-2\">\n                <Spinner size=\"sm\" />\n                <span className=\"text-xs text-muted-foreground\">\n                  Small (16px)\n                </span>\n              </div>\n\n              <div className=\"flex flex-col items-center gap-2\">\n                <Spinner size=\"md\" />\n                <span className=\"text-xs text-muted-foreground\">\n                  Medium (24px)\n                </span>\n              </div>\n\n              <div className=\"flex flex-col items-center gap-2\">\n                <Spinner size=\"lg\" />\n                <span className=\"text-xs text-muted-foreground\">\n                  Large (32px)\n                </span>\n              </div>\n\n              <div className=\"flex flex-col items-center gap-2\">\n                <Spinner size={spinnerSize} />\n                <span className=\"text-xs text-muted-foreground\">\n                  Selected: {spinnerSize}\n                </span>\n              </div>\n            </div>\n          </div>\n        </PlaygroundSection>\n\n        {/* Custom Hooks */}\n        <PlaygroundSection\n          title=\"Custom Hooks\"\n          description=\"Test custom hooks from @petrarca/sonnet-core.\"\n          variant=\"card\"\n        >\n          {/* useClipboard */}\n          <div className=\"mb-6\">\n            <h4 className=\"mb-3\">useClipboard Hook</h4>\n            <div className=\"flex items-center gap-3\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => clipboard.copy(\"Hello from clipboard!\")}\n              >\n                {clipboard.copied ? \"✓ Copied!\" : \"Copy Text\"}\n              </Button>\n              <span className=\"text-sm text-muted-foreground\">\n                State: {clipboard.copied ? \"Copied\" : \"Ready\"}\n                {clipboard.error && ` (Error: ${clipboard.error.message})`}\n              </span>\n            </div>\n          </div>\n\n          {/* useDisclosure */}\n          <div>\n            <h4 className=\"mb-3\">useDisclosure Hook</h4>\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center gap-3\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={disclosureHandlers.open}\n                >\n                  Open\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={disclosureHandlers.close}\n                >\n                  Close\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={disclosureHandlers.toggle}\n                >\n                  Toggle\n                </Button>\n                <span className=\"text-sm text-muted-foreground\">\n                  State: {disclosureOpened ? \"Open\" : \"Closed\"}\n                </span>\n              </div>\n\n              {disclosureOpened && (\n                <div className=\"p-4 bg-muted border rounded-md\">\n                  <p className=\"text-sm\">\n                    This content is visible when disclosure is open!\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n        </PlaygroundSection>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { LucideIcon } from 'lucide-react';
-import { ServiceModule } from '@petrarca/sonnet-shell';
+import { ShellModule } from '@petrarca/sonnet-shell';
 import React$1 from 'react';
 
 /**
@@ -94,13 +94,13 @@ declare class PlaygroundRegistry {
 }
 
 /**
- * Create a ServiceModule for the playground.
+ * Create a ShellModule for the playground.
  *
  * Returns a complete module definition ready to pass to
  * createModuleRegistry(). Routes, navigation, and the overview page
  * are all generated from the registry.
  */
-declare function createPlaygroundModule(registry: PlaygroundRegistry, options?: PlaygroundModuleOptions): ServiceModule;
+declare function createPlaygroundModule(registry: PlaygroundRegistry, options?: PlaygroundModuleOptions): ShellModule;
 
 /**
  * PlaygroundOverview -- tile grid rendered from a PlaygroundRegistry.
@@ -124,17 +124,21 @@ declare function PlaygroundOverview({ registry, basePath, title, subtitle, group
 /**
  * Shared section wrapper for playground pages.
  *
- * Provides a consistent titled section with optional description,
- * used across all playground demo pages.
+ * variant="default" — bare section with space-y-4, used for full-width
+ *   pages like Shell API and Graph that manage their own layout.
+ *
+ * variant="card" — elevated card section with border, used for component
+ *   showcase pages (Core, Advanced) where each section is visually contained.
  */
 
 interface PlaygroundSectionProps {
     title: string;
     description?: string;
     children: React$1.ReactNode;
+    variant?: "default" | "card";
 }
 /** Titled section wrapper used across playground pages. */
-declare function PlaygroundSection({ title, description, children, }: PlaygroundSectionProps): React$1.ReactElement;
+declare function PlaygroundSection({ title, description, children, variant, }: PlaygroundSectionProps): React$1.ReactElement;
 
 declare const builtinEntries: PlaygroundEntry[];
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   PlaygroundSection
-} from "./chunk-FTN2A5YL.js";
+} from "./chunk-C2EZ2ECG.js";
 
 // src/PlaygroundRegistry.ts
 var PlaygroundRegistry = class _PlaygroundRegistry {
@@ -79,12 +79,14 @@ import {
   Type,
   Palette,
   Grid,
+  Layers,
   Braces,
   Check,
   Edit,
   Package,
   Table2,
-  Network
+  Network,
+  SquareTerminal
 } from "lucide-react";
 var builtinEntries = [
   {
@@ -94,7 +96,7 @@ var builtinEntries = [
     icon: Type,
     color: "teal",
     path: "typography",
-    component: lazy(() => import("./PlayTypography-ID6DLFZD.js")),
+    component: lazy(() => import("./PlayTypography-T6SMPHUB.js")),
     group: "Design System",
     order: 0
   },
@@ -105,7 +107,7 @@ var builtinEntries = [
     icon: Palette,
     color: "violet",
     path: "color-palette",
-    component: lazy(() => import("./PlayColorPalette-UFMTJTUB.js")),
+    component: lazy(() => import("./PlayColorPalette-IWECRZUS.js")),
     group: "Design System",
     order: 1
   },
@@ -116,10 +118,21 @@ var builtinEntries = [
     icon: Grid,
     color: "indigo",
     path: "core-components",
-    component: lazy(() => import("./PlayCoreComponents-7QCDFQLT.js")),
+    component: lazy(() => import("./PlayCoreComponents-GXFMB24T.js")),
     group: "Components",
     order: 0
   },
+  {
+    id: "sonnet.advanced-components",
+    title: "Advanced Components",
+    description: "Multi-step workflows (Stepper) and hierarchical data structures (TreeView) with keyboard navigation and selection.",
+    icon: Layers,
+    color: "emerald",
+    path: "advanced-components",
+    component: lazy(() => import("./PlayAdvancedComponents-ZYK66UII.js")),
+    group: "Components",
+    order: 1
+  },
   {
     id: "sonnet.json-editor",
     title: "JSON Editor",
@@ -127,9 +140,9 @@ var builtinEntries = [
     icon: Braces,
     color: "amber",
     path: "json-editor",
-    component: lazy(() => import("./PlayJsonEditor-4L5INQPU.js")),
+    component: lazy(() => import("./PlayJsonEditor-SYZYEJEA.js")),
     group: "Components",
-    order: 1
+    order: 2
   },
   {
     id: "sonnet.form-components",
@@ -138,7 +151,7 @@ var builtinEntries = [
     icon: Check,
     color: "blue",
     path: "form-components",
-    component: lazy(() => import("./PlayFormComponents-RJB6WZHD.js")),
+    component: lazy(() => import("./PlayFormComponents-4E2A2Y2W.js")),
     group: "Forms",
     order: 0
   },
@@ -149,7 +162,7 @@ var builtinEntries = [
     icon: Edit,
     color: "purple",
     path: "forms",
-    component: lazy(() => import("./PlayForms-24XX5DC6.js")),
+    component: lazy(() => import("./PlayForms-FOF3XE6G.js")),
     group: "Forms",
     order: 1
   },
@@ -160,7 +173,7 @@ var builtinEntries = [
     icon: Package,
     color: "indigo",
     path: "form-widgets",
-    component: lazy(() => import("./PlayFormWidgets-OFV7TJKH.js")),
+    component: lazy(() => import("./PlayFormWidgets-IWJJQ5XL.js")),
     group: "Forms",
     order: 2
   },
@@ -171,7 +184,7 @@ var builtinEntries = [
     icon: Table2,
     color: "teal",
     path: "data-components",
-    component: lazy(() => import("./PlayDataComponents-GZSRTW4F.js")),
+    component: lazy(() => import("./PlayDataComponents-M4SJ4XEL.js")),
     group: "Data",
     order: 0
   },
@@ -182,9 +195,20 @@ var builtinEntries = [
     icon: Network,
     color: "cyan",
     path: "graph",
-    component: lazy(() => import("./PlayGraph-FLGLSUWV.js")),
+    component: lazy(() => import("./PlayGraph-3F56PREG.js")),
     group: "Graph",
     order: 0
+  },
+  {
+    id: "sonnet.shell-api",
+    title: "Shell API",
+    description: "Interactive demo of the shell API: notifications, dialogs, programmatic navigation, slide-over panels, the resizable sidePane, and the Cmd+K command menu.",
+    icon: SquareTerminal,
+    color: "orange",
+    path: "shell-api",
+    component: lazy(() => import("./PlayShellApi-5O6VYR2X.js")),
+    group: "Shell",
+    order: 0
   }
 ];
 
@@ -218,11 +242,11 @@ function PlaygroundTile({ item, onNavigate }) {
       className: "cursor-pointer shadow-sm border rounded-md p-6 transition-transform duration-200 motion-safe:hover:-translate-y-1",
       onClick: () => onNavigate(item.path),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center mb-6", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex items-center mb-4", children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: `flex items-center justify-center w-[50px] h-[50px] rounded-md ${COLOR_CLASSES[item.color] ?? COLOR_CLASSES.blue}`,
-            children: /* @__PURE__ */ jsx(item.icon, { size: 28 })
+            className: `flex items-center justify-center w-9 h-9 rounded-md ${COLOR_CLASSES[item.color] ?? COLOR_CLASSES.blue}`,
+            children: /* @__PURE__ */ jsx(item.icon, { size: 18 })
           }
         ) }),
         /* @__PURE__ */ jsx("h3", { className: "heading-section mb-1", children: item.title }),
@@ -241,11 +265,11 @@ function PlaygroundOverview({
   const navigate = useNavigate();
   const [grouped, setGrouped] = useState(initialGrouped);
   const handleNavigate = (path) => navigate(`${basePath}/${path}`);
-  return /* @__PURE__ */ jsxs("div", { className: "w-full py-12 px-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-6", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("h1", { className: "mb-1", children: title }),
-        /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground", children: subtitle })
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle })
       ] }),
       /* @__PURE__ */ jsx(SimpleTooltip, { label: grouped ? "Show flat list" : "Group by category", children: /* @__PURE__ */ jsx(
         Button,

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-YEBK2TUW.js";
 import {
   PlayGraph
-} from "../chunk-PGI54O43.js";
+} from "../chunk-VOC5VZG2.js";
+import {
+  PlayShellApi
+} from "../chunk-CQ6PGFRV.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-YOOWJORD.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-32DDRRWU.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.4.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.4.0",
+    "@petrarca/sonnet-forms": "0.4.0",
+    "@petrarca/sonnet-ui": "0.4.0",
+    "@petrarca/sonnet-shell": "0.4.0",
+    "@petrarca/sonnet-graph": "0.4.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