@petrarca/sonnet-playground 0.1.2

package/dist/chunk-GYKEPHHA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayCoreComponents.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { toast } from \"sonner\";\nimport {\n  TreeView,\n  type TreeNode,\n  Spinner,\n  Button,\n  Badge,\n  Alert,\n  AlertDescription,\n  AlertTitle,\n  Separator,\n  Input,\n  Textarea,\n  Checkbox,\n  Label,\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  Stepper,\n  StepperContent,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperList,\n  StepperNext,\n  StepperPrev,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\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/**\n * PlayCoreComponents - Showcase for all core UI components\n *\n * This playground allows testing and visual verification of all core UI components\n * before they are used in production. Each component is tested \"in-vitro\" here first.\n *\n * Structure:\n * - Each component type gets its own section\n * - Show all variants, states, and edge cases\n * - Interactive examples where applicable\n * - Use simple HTML/Tailwind for layout (no Mantine)\n */\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=\"min-h-screen bg-gray-50 dark:bg-gray-900 py-8 px-4\">\n      {/* Header */}\n      <div className=\"max-w-7xl mx-auto mb-8\">\n        <h1 className=\"mb-2\">Core UI Components</h1>\n        <p className=\"text-muted-foreground\">\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=\"max-w-7xl mx-auto space-y-8\">\n        {/* Section: Notifications (Phase 1) */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Notifications (Sonner)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Toast notifications using sonner library. Test all variants and\n            behaviors.\n          </p>\n\n          <div className=\"flex flex-wrap gap-3\">\n            <button\n              onClick={() => toast.success(\"Success! Operation completed.\")}\n              className=\"px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition\"\n            >\n              Success Toast\n            </button>\n\n            <button\n              onClick={() => toast.error(\"Error! Something went wrong.\")}\n              className=\"px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition\"\n            >\n              Error Toast\n            </button>\n\n            <button\n              onClick={() => toast.warning(\"Warning! Please be careful.\")}\n              className=\"px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 transition\"\n            >\n              Warning Toast\n            </button>\n\n            <button\n              onClick={() => toast.info(\"Info: Here is some information.\")}\n              className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition\"\n            >\n              Info Toast\n            </button>\n\n            <button\n              onClick={() => {\n                toast.success(\"First notification\");\n                setTimeout(() => toast.info(\"Second notification\"), 500);\n                setTimeout(() => toast.warning(\"Third notification\"), 1000);\n              }}\n              className=\"px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition\"\n            >\n              Multiple Toasts\n            </button>\n\n            <button\n              onClick={() =>\n                toast(\"Custom message\", {\n                  description: \"This is a custom notification with description\",\n                  duration: 5000,\n                })\n              }\n              className=\"px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition\"\n            >\n              Custom Toast\n            </button>\n          </div>\n        </section>\n\n        {/* Section: Custom Hooks (Phase 0) */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Custom Hooks</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Test custom hooks that replace Mantine hooks.\n          </p>\n\n          {/* useClipboard */}\n          <div className=\"mb-6\">\n            <h3 className=\"mb-3\">useClipboard Hook</h3>\n            <div className=\"flex items-center gap-3\">\n              <button\n                onClick={() => clipboard.copy(\"Hello from clipboard!\")}\n                className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition\"\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            <h3 className=\"mb-3\">useDisclosure Hook</h3>\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center gap-3\">\n                <button\n                  onClick={disclosureHandlers.open}\n                  className=\"px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition\"\n                >\n                  Open\n                </button>\n                <button\n                  onClick={disclosureHandlers.close}\n                  className=\"px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition\"\n                >\n                  Close\n                </button>\n                <button\n                  onClick={disclosureHandlers.toggle}\n                  className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition\"\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-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md\">\n                  <p className=\"text-blue-900 dark:text-blue-100\">\n                    This content is visible when disclosure is open!\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n        </section>\n\n        {/* Section: Spinner (Phase 0) */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Spinner Component</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Loading spinner with different sizes.\n          </p>\n\n          <div className=\"space-y-4\">\n            <div className=\"flex items-center gap-4\">\n              <label className=\"text-sm font-medium text-muted-foreground\">\n                Size:\n              </label>\n              <button\n                onClick={() => setSpinnerSize(\"sm\")}\n                className={`px-3 py-1 rounded ${\n                  spinnerSize === \"sm\"\n                    ? \"bg-blue-600 text-white\"\n                    : \"bg-muted text-muted-foreground\"\n                }`}\n              >\n                Small\n              </button>\n              <button\n                onClick={() => setSpinnerSize(\"md\")}\n                className={`px-3 py-1 rounded ${\n                  spinnerSize === \"md\"\n                    ? \"bg-blue-600 text-white\"\n                    : \"bg-muted text-muted-foreground\"\n                }`}\n              >\n                Medium\n              </button>\n              <button\n                onClick={() => setSpinnerSize(\"lg\")}\n                className={`px-3 py-1 rounded ${\n                  spinnerSize === \"lg\"\n                    ? \"bg-blue-600 text-white\"\n                    : \"bg-muted text-muted-foreground\"\n                }`}\n              >\n                Large\n              </button>\n            </div>\n\n            <div className=\"flex items-center gap-8 p-6 bg-gray-50 dark:bg-gray-900/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        </section>\n\n        {/* Phase 2: Simple UI Components */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Buttons (Phase 2)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            shadcn/ui Button component with all variants and sizes.\n          </p>\n\n          <div className=\"space-y-6\">\n            {/* Variants */}\n            <div>\n              <h3 className=\"mb-3\">Variants</h3>\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              <h3 className=\"mb-3\">Sizes</h3>\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              <h3 className=\"mb-3\">States</h3>\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        </section>\n\n        {/* Badges */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Badges (Phase 2)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Badge component with different variants.\n          </p>\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        </section>\n\n        {/* Alerts */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Alerts (Phase 2)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Alert component for important messages.\n          </p>\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        </section>\n\n        {/* Tooltips */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Tooltips (Phase 2)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Tooltip component for additional information on hover.\n          </p>\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        </section>\n\n        {/* Cards */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Cards (Phase 2)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Card component for content containers.\n          </p>\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        </section>\n\n        {/* Separator */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Separator (Phase 2)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Visual separator for content sections.\n          </p>\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        </section>\n\n        {/* Dialogs & Modals */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Dialogs & Modals (Phase 4)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            shadcn/ui Dialog component for modal interactions.\n          </p>\n\n          <div className=\"space-y-6\">\n            {/* Basic Dialog */}\n            <div>\n              <h3 className=\"mb-3\">Basic Dialog</h3>\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              <h3 className=\"mb-3\">Confirmation Dialog</h3>\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              <h3 className=\"mb-3\">Dialog with Form</h3>\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\" className=\"text-sm font-medium\">\n                        Name\n                      </label>\n                      <input\n                        id=\"name\"\n                        type=\"text\"\n                        placeholder=\"Enter name...\"\n                        className=\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n                      />\n                    </div>\n                    <div className=\"grid gap-2\">\n                      <label\n                        htmlFor=\"description\"\n                        className=\"text-sm font-medium\"\n                      >\n                        Description\n                      </label>\n                      <textarea\n                        id=\"description\"\n                        placeholder=\"Enter description...\"\n                        rows={3}\n                        className=\"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\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              <h3 className=\"mb-3\">Information Dialog</h3>\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        </section>\n\n        {/* Form Inputs */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Form Inputs (Phase 5)</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            shadcn/ui Input, Textarea, and Checkbox components.\n          </p>\n\n          <div className=\"space-y-6\">\n            {/* Input */}\n            <div>\n              <h3 className=\"mb-3\">Input</h3>\n              <div className=\"space-y-4 max-w-md\">\n                <div>\n                  <label\n                    htmlFor=\"input-default\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\n                    Default Input\n                  </label>\n                  <Input\n                    id=\"input-default\"\n                    type=\"text\"\n                    placeholder=\"Enter text...\"\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"input-email\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\n                    Email Input\n                  </label>\n                  <Input\n                    id=\"input-email\"\n                    type=\"email\"\n                    placeholder=\"email@example.com\"\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"input-password\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\n                    Password Input\n                  </label>\n                  <Input\n                    id=\"input-password\"\n                    type=\"password\"\n                    placeholder=\"Enter password...\"\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"input-disabled\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\n                    Disabled Input\n                  </label>\n                  <Input\n                    id=\"input-disabled\"\n                    type=\"text\"\n                    placeholder=\"Disabled...\"\n                    disabled\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"input-readonly\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\n                    Read-only Input\n                  </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              <h3 className=\"mb-3\">Textarea</h3>\n              <div className=\"space-y-4 max-w-md\">\n                <div>\n                  <label\n                    htmlFor=\"textarea-default\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\n                    Default Textarea\n                  </label>\n                  <Textarea\n                    id=\"textarea-default\"\n                    placeholder=\"Enter multi-line text...\"\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"textarea-rows\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\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\n                    htmlFor=\"textarea-disabled\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\n                    Disabled Textarea\n                  </label>\n                  <Textarea\n                    id=\"textarea-disabled\"\n                    placeholder=\"Disabled...\"\n                    disabled\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"textarea-value\"\n                    className=\"block text-sm font-medium mb-2\"\n                  >\n                    Textarea with Value\n                  </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              <h3 className=\"mb-3\">Checkbox</h3>\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"checkbox-default\" />\n                  <label\n                    htmlFor=\"checkbox-default\"\n                    className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Default Checkbox\n                  </label>\n                </div>\n\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"checkbox-checked\" defaultChecked />\n                  <label\n                    htmlFor=\"checkbox-checked\"\n                    className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Checked by Default\n                  </label>\n                </div>\n\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"checkbox-disabled\" disabled />\n                  <label\n                    htmlFor=\"checkbox-disabled\"\n                    className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Disabled Checkbox\n                  </label>\n                </div>\n\n                <div className=\"flex items-center space-x-2\">\n                  <Checkbox id=\"checkbox-disabled-checked\" disabled checked />\n                  <label\n                    htmlFor=\"checkbox-disabled-checked\"\n                    className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\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\" className=\"text-sm leading-none\">\n                      Accept terms and conditions\n                    </label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"marketing\" />\n                    <label htmlFor=\"marketing\" className=\"text-sm leading-none\">\n                      Send me marketing emails\n                    </label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"newsletter\" defaultChecked />\n                    <label\n                      htmlFor=\"newsletter\"\n                      className=\"text-sm leading-none\"\n                    >\n                      Subscribe to newsletter\n                    </label>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n\n        {/* Label Component */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Label</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Label component for form fields with proper accessibility.\n          </p>\n\n          <div className=\"space-y-6\">\n            {/* Basic Label */}\n            <div>\n              <h3 className=\"mb-3\">Basic Usage</h3>\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              <h3 className=\"mb-3\">With Checkbox</h3>\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              <h3 className=\"mb-3\">Disabled State</h3>\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        </section>\n\n        {/* Avatar Component */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Avatar</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Avatar component for displaying user profile images with fallback\n            support.\n          </p>\n\n          <div className=\"space-y-6\">\n            {/* Basic Avatars */}\n            <div>\n              <h3 className=\"mb-3\">Basic Avatars</h3>\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              <h3 className=\"mb-3\">Fallback Only (No Image)</h3>\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-blue-500 text-white\">\n                    DB\n                  </AvatarFallback>\n                </Avatar>\n\n                <Avatar>\n                  <AvatarFallback className=\"bg-green-500 text-white\">\n                    GH\n                  </AvatarFallback>\n                </Avatar>\n              </div>\n            </div>\n\n            <Separator />\n\n            {/* With User Info */}\n            <div>\n              <h3 className=\"mb-3\">With User Information</h3>\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-purple-500 text-white\">\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-orange-500 text-white\">\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              <h3 className=\"mb-3\">Custom Sizes</h3>\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        </section>\n        {/* Stepper */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">Stepper</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Dice UI Stepper — horizontal, controlled via built-in Prev/Next or\n            external state.\n          </p>\n\n          <div className=\"space-y-10\">\n            {/* Interactive — uses built-in StepperPrev / StepperNext */}\n            <div>\n              <h3 className=\"mb-4\">Interactive (built-in navigation)</h3>\n              <Stepper defaultValue=\"step-1\" className=\"max-w-lg\">\n                <StepperList className=\"gap-2\">\n                  {[\"step-1\", \"step-2\", \"step-3\"].map((value, i) => (\n                    <StepperItem key={value} value={value}>\n                      <StepperTrigger>\n                        <StepperIndicator />\n                        <div className=\"flex flex-col min-w-16\">\n                          <StepperTitle>Step {i + 1}</StepperTitle>\n                          <StepperDescription>Description</StepperDescription>\n                        </div>\n                      </StepperTrigger>\n                      <StepperSeparator />\n                    </StepperItem>\n                  ))}\n                </StepperList>\n                <StepperContent value=\"step-1\" className=\"mt-6\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 1.\n                  </p>\n                </StepperContent>\n                <StepperContent value=\"step-2\" className=\"mt-6\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 2.\n                  </p>\n                </StepperContent>\n                <StepperContent value=\"step-3\" className=\"mt-6\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    Content for step 3.\n                  </p>\n                </StepperContent>\n                <div className=\"flex justify-between mt-6 max-w-lg\">\n                  <StepperPrev asChild>\n                    <Button variant=\"outline\" size=\"sm\">\n                      Back\n                    </Button>\n                  </StepperPrev>\n                  <StepperNext asChild>\n                    <Button size=\"sm\">Next</Button>\n                  </StepperNext>\n                </div>\n              </Stepper>\n            </div>\n\n            <Separator />\n\n            {/* Non-interactive — controlled externally */}\n            <div>\n              <h3 className=\"mb-4\">Non-interactive (controlled)</h3>\n              <StepperControlled />\n            </div>\n          </div>\n        </section>\n\n        {/* Section: TreeView */}\n        <section className=\"bg-white dark:bg-gray-800 rounded-lg shadow p-6\">\n          <h2 className=\"mb-4\">TreeView</h2>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            Generic accessible tree component with expand/collapse, keyboard\n            navigation (ArrowUp/Down/Left/Right, Enter/Space), and optional row\n            selection. Extractable to @petrarca/sonnet-ui.\n          </p>\n          <TreeViewDemo />\n        </section>\n      </div>\n    </div>\n  );\n}\n\nconst CONTROLLED_STEPS = [\n  { value: \"account\", title: \"Account\", description: \"Your details\" },\n  { value: \"profile\", title: \"Profile\", description: \"About you\" },\n  { value: \"review\", title: \"Review\", description: \"Confirm\" },\n];\n\nfunction StepperControlled() {\n  const [step, setStep] = useState(\"account\");\n  return (\n    <Stepper\n      value={step}\n      onValueChange={setStep}\n      nonInteractive\n      className=\"max-w-lg\"\n    >\n      <StepperList className=\"gap-2\">\n        {CONTROLLED_STEPS.map((s) => (\n          <StepperItem key={s.value} value={s.value}>\n            <StepperTrigger>\n              <StepperIndicator />\n              <div className=\"flex flex-col min-w-16\">\n                <StepperTitle>{s.title}</StepperTitle>\n                <StepperDescription>{s.description}</StepperDescription>\n              </div>\n            </StepperTrigger>\n            <StepperSeparator />\n          </StepperItem>\n        ))}\n      </StepperList>\n      {CONTROLLED_STEPS.map((s) => (\n        <StepperContent key={s.value} value={s.value} className=\"mt-6\">\n          <p className=\"text-sm text-muted-foreground\">\n            Content for {s.title}.\n          </p>\n        </StepperContent>\n      ))}\n      <div className=\"flex justify-between mt-6 max-w-lg\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={step === CONTROLLED_STEPS[0].value}\n          onClick={() => {\n            const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);\n            if (i > 0) setStep(CONTROLLED_STEPS[i - 1].value);\n          }}\n        >\n          Back\n        </Button>\n        <Button\n          size=\"sm\"\n          disabled={\n            step === CONTROLLED_STEPS[CONTROLLED_STEPS.length - 1].value\n          }\n          onClick={() => {\n            const i = CONTROLLED_STEPS.findIndex((s) => s.value === step);\n            if (i < CONTROLLED_STEPS.length - 1)\n              setStep(CONTROLLED_STEPS[i + 1].value);\n          }}\n        >\n          Next\n        </Button>\n      </div>\n    </Stepper>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// TreeView demo\n// ---------------------------------------------------------------------------\n\ninterface DemoData extends Record<string, unknown> {\n  label: string;\n}\n\nconst TREE_NODES: TreeNode<DemoData>[] = [\n  {\n    id: \"fruits\",\n    data: { label: \"Fruits\" },\n    hasChildren: true,\n    children: [\n      {\n        id: \"citrus\",\n        data: { label: \"Citrus\" },\n        hasChildren: true,\n        children: [\n          { id: \"lemon\", data: { label: \"Lemon\" }, hasChildren: false },\n          { id: \"orange\", data: { label: \"Orange\" }, hasChildren: false },\n        ],\n      },\n      { id: \"apple\", data: { label: \"Apple\" }, hasChildren: false },\n      { id: \"banana\", data: { label: \"Banana\" }, hasChildren: false },\n    ],\n  },\n  {\n    id: \"vegetables\",\n    data: { label: \"Vegetables\" },\n    hasChildren: true,\n    children: [\n      { id: \"carrot\", data: { label: \"Carrot\" }, hasChildren: false },\n      { id: \"broccoli\", data: { label: \"Broccoli\" }, hasChildren: false },\n    ],\n  },\n  {\n    id: \"grains\",\n    data: { label: \"Grains\" },\n    hasChildren: false,\n  },\n];\n\nfunction TreeViewDemo() {\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());\n  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());\n  const [lastClicked, setLastClicked] = useState<string | null>(null);\n\n  const handleExpand = (id: string) =>\n    setExpandedIds((prev) => new Set([...prev, id]));\n\n  const handleCollapse = (id: string) =>\n    setExpandedIds((prev) => {\n      const next = new Set(prev);\n      next.delete(id);\n      return next;\n    });\n\n  const handleSelectionChange = (id: string, selected: boolean) =>\n    setSelectedIds((prev) => {\n      const next = new Set(prev);\n      if (selected) next.add(id);\n      else next.delete(id);\n      return next;\n    });\n\n  return (\n    <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n      {/* Without selection */}\n      <div>\n        <h3 className=\"mb-3\">Default (click to activate)</h3>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Keyboard: ArrowUp/Down to move, ArrowRight to expand, ArrowLeft to\n          collapse or go to parent, Enter/Space to activate.\n        </p>\n        <TreeView<DemoData>\n          nodes={TREE_NODES}\n          expandedIds={expandedIds}\n          onExpand={handleExpand}\n          onCollapse={handleCollapse}\n          onNodeClick={(node) => setLastClicked(node.id)}\n          onNodeActivate={(node) => setLastClicked(node.id)}\n          renderNode={(node) => (\n            <span className=\"text-sm\">{node.data.label}</span>\n          )}\n          className=\"max-w-xs\"\n        />\n        {lastClicked && (\n          <p className=\"mt-3 text-xs text-muted-foreground\">\n            Last activated: <span className=\"font-mono\">{lastClicked}</span>\n          </p>\n        )}\n      </div>\n\n      {/* With row selection */}\n      <div>\n        <h3 className=\"mb-3\">With row selection</h3>\n        <p className=\"text-sm text-muted-foreground mb-3\">\n          Checkboxes appear when onSelectionChange is provided. State is\n          independent of expand/collapse.\n        </p>\n        <TreeView<DemoData>\n          nodes={TREE_NODES}\n          expandedIds={expandedIds}\n          onExpand={handleExpand}\n          onCollapse={handleCollapse}\n          selectedIds={selectedIds}\n          onSelectionChange={handleSelectionChange}\n          renderNode={(node) => (\n            <span className=\"text-sm\">{node.data.label}</span>\n          )}\n          className=\"max-w-xs\"\n        />\n        {selectedIds.size > 0 && (\n          <p className=\"mt-3 text-xs text-muted-foreground\">\n            Selected:{\" \"}\n            <span className=\"font-mono\">{[...selectedIds].join(\", \")}</span>\n          </p>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-KAT24CQQ.js

@@ -0,0 +1,125 @@
+// src/pages/PlayJsonEditor.tsx
+import { useState } from "react";
+import { JsonEditor } from "@petrarca/sonnet-ui/json-editor";
+import { Separator } from "@petrarca/sonnet-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SAMPLE_SCHEMA = JSON.stringify(
+  {
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    $id: "https://example.com/schemas/patient.json",
+    title: "Patient",
+    type: "object",
+    metadata: {
+      version: "1.0.0",
+      description: "Core patient demographic record",
+      tags: ["healthcare", "demographics", "mpi"],
+      owner: "platform-team"
+    },
+    properties: {
+      patient_id: {
+        type: "string",
+        format: "uuid",
+        description: "Unique patient identifier"
+      },
+      first_name: {
+        type: "string",
+        minLength: 1,
+        maxLength: 100
+      },
+      last_name: {
+        type: "string",
+        minLength: 1,
+        maxLength: 100
+      },
+      date_of_birth: {
+        type: "string",
+        format: "date"
+      },
+      gender: {
+        type: "string",
+        enum: ["male", "female", "other", "unknown"]
+      }
+    },
+    required: ["patient_id", "first_name", "last_name"]
+  },
+  null,
+  2
+);
+var EDITABLE_PATHS = ["/metadata"];
+function PlayJsonEditor() {
+  const [value, setValue] = useState(SAMPLE_SCHEMA);
+  const [lastValid, setLastValid] = useState(SAMPLE_SCHEMA);
+  const [parseError, setParseError] = useState(null);
+  const handleChange = (newValue) => {
+    setValue(newValue);
+    try {
+      JSON.parse(newValue);
+      setLastValid(newValue);
+      setParseError(null);
+    } catch (e) {
+      setParseError(e.message);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h1", { children: "JSON Editor" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6", children: "A constrained JSON editor with selectively editable regions using JSON Pointer (RFC 6901). Blue-tinted regions are readonly, white regions are editable." }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_320px]", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2", children: "Patient Schema" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mb-3", children: [
+          "Editable paths:",
+          " ",
+          /* @__PURE__ */ jsx("code", { className: "text-xs bg-muted px-1 py-0.5 rounded", children: EDITABLE_PATHS.join(", ") })
+        ] }),
+        /* @__PURE__ */ jsx(
+          JsonEditor,
+          {
+            value,
+            editablePaths: EDITABLE_PATHS,
+            onChange: handleChange,
+            height: "500px"
+          }
+        ),
+        parseError && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-2", children: parseError }),
+        !parseError && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-2", children: "Valid JSON" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2", children: "Configuration" }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-lg border p-4 space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Editable Paths" }),
+            /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: EDITABLE_PATHS.map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { className: "text-xs bg-muted px-1.5 py-0.5 rounded", children: p }) }, p)) })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "How it works" }),
+            /* @__PURE__ */ jsxs("ul", { className: "text-xs text-muted-foreground space-y-1", children: [
+              /* @__PURE__ */ jsx("li", { children: "Blue-tinted background = readonly (locked)" }),
+              /* @__PURE__ */ jsx("li", { children: "White background = editable" }),
+              /* @__PURE__ */ jsx("li", { children: "You can add, edit, and delete lines within the editable region" }),
+              /* @__PURE__ */ jsx("li", { children: "Changes outside editable regions are silently blocked" }),
+              /* @__PURE__ */ jsx("li", { children: "JSON syntax is validated on every keystroke" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Parsed metadata" }),
+            /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded p-2 overflow-auto max-h-48", children: (() => {
+              try {
+                const parsed = JSON.parse(lastValid);
+                return JSON.stringify(parsed.metadata, null, 2);
+              } catch {
+                return "Parse error";
+              }
+            })() })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  PlayJsonEditor
+};
+//# sourceMappingURL=chunk-KAT24CQQ.js.map

package/dist/chunk-KAT24CQQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/PlayJsonEditor.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { JsonEditor } from \"@petrarca/sonnet-ui/json-editor\";\nimport { Separator } from \"@petrarca/sonnet-ui\";\n\nconst SAMPLE_SCHEMA = JSON.stringify(\n  {\n    $schema: \"https://json-schema.org/draft/2020-12/schema\",\n    $id: \"https://example.com/schemas/patient.json\",\n    title: \"Patient\",\n    type: \"object\",\n    metadata: {\n      version: \"1.0.0\",\n      description: \"Core patient demographic record\",\n      tags: [\"healthcare\", \"demographics\", \"mpi\"],\n      owner: \"platform-team\",\n    },\n    properties: {\n      patient_id: {\n        type: \"string\",\n        format: \"uuid\",\n        description: \"Unique patient identifier\",\n      },\n      first_name: {\n        type: \"string\",\n        minLength: 1,\n        maxLength: 100,\n      },\n      last_name: {\n        type: \"string\",\n        minLength: 1,\n        maxLength: 100,\n      },\n      date_of_birth: {\n        type: \"string\",\n        format: \"date\",\n      },\n      gender: {\n        type: \"string\",\n        enum: [\"male\", \"female\", \"other\", \"unknown\"],\n      },\n    },\n    required: [\"patient_id\", \"first_name\", \"last_name\"],\n  },\n  null,\n  2,\n);\n\nconst EDITABLE_PATHS = [\"/metadata\"];\n\n/**\n * Playground page for the JsonEditor component.\n *\n * Demonstrates a JSON Schema where only the /metadata section\n * is editable. The rest of the schema (properties, required, etc.)\n * is visible but locked.\n */\nexport default function PlayJsonEditor() {\n  const [value, setValue] = useState(SAMPLE_SCHEMA);\n  const [lastValid, setLastValid] = useState(SAMPLE_SCHEMA);\n  const [parseError, setParseError] = useState<string | null>(null);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    try {\n      JSON.parse(newValue);\n      setLastValid(newValue);\n      setParseError(null);\n    } catch (e) {\n      setParseError((e as Error).message);\n    }\n  };\n\n  return (\n    <div>\n      <h1>JSON Editor</h1>\n      <p className=\"text-sm text-muted-foreground mb-6\">\n        A constrained JSON editor with selectively editable regions using JSON\n        Pointer (RFC 6901). Blue-tinted regions are readonly, white regions are\n        editable.\n      </p>\n\n      <div className=\"grid gap-6 lg:grid-cols-[1fr_320px]\">\n        <div>\n          <h3 className=\"mb-2\">Patient Schema</h3>\n          <p className=\"text-xs text-muted-foreground mb-3\">\n            Editable paths:{\" \"}\n            <code className=\"text-xs bg-muted px-1 py-0.5 rounded\">\n              {EDITABLE_PATHS.join(\", \")}\n            </code>\n          </p>\n          <JsonEditor\n            value={value}\n            editablePaths={EDITABLE_PATHS}\n            onChange={handleChange}\n            height=\"500px\"\n          />\n          {parseError && (\n            <p className=\"text-xs text-destructive mt-2\">{parseError}</p>\n          )}\n          {!parseError && (\n            <p className=\"text-xs text-muted-foreground mt-2\">Valid JSON</p>\n          )}\n        </div>\n\n        <div>\n          <h3 className=\"mb-2\">Configuration</h3>\n          <div className=\"rounded-lg border p-4 space-y-3\">\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground mb-1\">\n                Editable Paths\n              </p>\n              <ul className=\"space-y-1\">\n                {EDITABLE_PATHS.map((p) => (\n                  <li key={p}>\n                    <code className=\"text-xs bg-muted px-1.5 py-0.5 rounded\">\n                      {p}\n                    </code>\n                  </li>\n                ))}\n              </ul>\n            </div>\n\n            <Separator />\n\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground mb-1\">\n                How it works\n              </p>\n              <ul className=\"text-xs text-muted-foreground space-y-1\">\n                <li>Blue-tinted background = readonly (locked)</li>\n                <li>White background = editable</li>\n                <li>\n                  You can add, edit, and delete lines within the editable region\n                </li>\n                <li>Changes outside editable regions are silently blocked</li>\n                <li>JSON syntax is validated on every keystroke</li>\n              </ul>\n            </div>\n\n            <Separator />\n\n            <div>\n              <p className=\"text-xs font-medium text-muted-foreground mb-1\">\n                Parsed metadata\n              </p>\n              <pre className=\"text-xs bg-muted rounded p-2 overflow-auto max-h-48\">\n                {(() => {\n                  try {\n                    const parsed = JSON.parse(lastValid);\n                    return JSON.stringify(parsed.metadata, null, 2);\n                  } catch {\n                    return \"Parse error\";\n                  }\n                })()}\n              </pre>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}