@classic-homes/theme-mcp 0.1.33 → 0.1.35

package/dist/cli.js

@@ -2732,6 +2732,576 @@ var component_catalog_default = {
         "AppShell"
       ]
     },
+    {
+      name: "DataPanel",
+      description: "A flexible, draggable panel component supporting pinned, detached, and card modes",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "open",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Panel visibility"
+        },
+        {
+          name: "onOpenChange",
+          type: "(open: boolean) => void",
+          required: false,
+          description: "Callback when visibility changes"
+        },
+        {
+          name: "mode",
+          type: "'pinned' | 'detached'",
+          default: "'pinned'",
+          required: false,
+          description: "Panel mode"
+        },
+        {
+          name: "onModeChange",
+          type: "(mode: PanelMode) => void",
+          required: false,
+          description: "Callback when mode changes"
+        },
+        {
+          name: "variant",
+          type: "'full' | 'card'",
+          default: "'full'",
+          required: false,
+          description: "Panel variant"
+        },
+        {
+          name: "onVariantChange",
+          type: "(variant: PanelVariant) => void",
+          required: false,
+          description: "Callback when variant changes"
+        },
+        {
+          name: "edge",
+          type: "'left' | 'right' | 'top' | 'bottom'",
+          default: "'right'",
+          required: false,
+          description: "Edge to pin to (pinned mode)"
+        },
+        {
+          name: "onEdgeChange",
+          type: "(edge: PanelEdge) => void",
+          required: false,
+          description: "Callback when edge changes"
+        },
+        {
+          name: "expanded",
+          type: "boolean",
+          default: "true",
+          required: false,
+          description: "Whether panel is expanded"
+        },
+        {
+          name: "onExpandedChange",
+          type: "(expanded: boolean) => void",
+          required: false,
+          description: "Callback when expanded state changes"
+        },
+        {
+          name: "title",
+          type: "string",
+          required: false,
+          description: "Panel title"
+        },
+        {
+          name: "subtitle",
+          type: "string",
+          required: false,
+          description: "Panel subtitle"
+        },
+        {
+          name: "actions",
+          type: "DataPanelAction[]",
+          default: "[]",
+          required: false,
+          description: "Footer action buttons"
+        },
+        {
+          name: "constraints",
+          type: "PanelConstraints",
+          default: "defaults",
+          required: false,
+          description: "Size constraints"
+        },
+        {
+          name: "cardConfig",
+          type: "CardConfig",
+          default: "defaults",
+          required: false,
+          description: "Card mode configuration"
+        },
+        {
+          name: "disableClose",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Disable close button"
+        },
+        {
+          name: "disableResize",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Disable resize functionality"
+        },
+        {
+          name: "disableDrag",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Disable drag functionality"
+        },
+        {
+          name: "disableModeSwitch",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Disable mode switching menu"
+        },
+        {
+          name: "persistKey",
+          type: "string",
+          required: false,
+          description: "localStorage key for state persistence"
+        },
+        {
+          name: "snapThreshold",
+          type: "number",
+          default: "20",
+          required: false,
+          description: "Distance for edge snap detection (px)"
+        },
+        {
+          name: "detachThreshold",
+          type: "number",
+          default: "40",
+          required: false,
+          description: "Distance to drag before detaching (px)"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [
+        {
+          name: "mode",
+          values: [
+            "pinned",
+            "detached"
+          ],
+          default: "pinned"
+        },
+        {
+          name: "variant",
+          values: [
+            "full",
+            "card"
+          ],
+          default: "full"
+        },
+        {
+          name: "edge",
+          values: [
+            "left",
+            "right",
+            "top",
+            "bottom"
+          ],
+          default: "right"
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: '<script>\n  let open = $state(true);\n</script>\n\n<DataPanel bind:open title="Details" subtitle="View information">\n  <p>Panel content goes here.</p>\n</DataPanel>'
+        },
+        {
+          title: "Pinned Mode (Default)",
+          description: "The panel attaches to a viewport edge and can be resized along the perpendicular axis.",
+          code: '<DataPanel mode="pinned" edge="right" title="Right Sidebar">\n  <p>Pinned to the right edge.</p>\n</DataPanel>'
+        },
+        {
+          title: "Detached Mode",
+          description: "A floating window that can be freely dragged and resized. Snaps to edges when dragged near them.",
+          code: '<DataPanel mode="detached" title="Floating Panel">\n  <p>Drag me anywhere!</p>\n</DataPanel>'
+        },
+        {
+          title: "Full Variant (Default)",
+          description: "Traditional sidebar/panel that takes the full width or height of its pinned edge.",
+          code: '<DataPanel variant="full" edge="right">\n  <p>Full-height sidebar.</p>\n</DataPanel>'
+        },
+        {
+          title: "Card Variant",
+          description: "Mobile-friendly bottom sheet with snap points. Swipe up to expand, down to collapse.",
+          code: '<DataPanel variant="card" title="Details" subtitle="Swipe to expand">\n  <p>Card content with snap points.</p>\n</DataPanel>'
+        },
+        {
+          title: "Pinned Sidebar with Actions",
+          code: `<script>
+  let panelOpen = $state(true);
+
+  const actions = [
+    { label: 'Cancel', variant: 'ghost', onClick: () => (panelOpen = false) },
+    { label: 'Save', variant: 'primary', onClick: handleSave },
+  ];
+</script>
+
+<DataPanel
+  bind:open={panelOpen}
+  title="Edit Item"
+  subtitle="Make changes to your item"
+  edge="right"
+  {actions}
+>
+  <form>
+    <FormField label="Name" name="name" />
+    <FormField label="Description" name="description" type="textarea" />
+  </form>
+</DataPanel>`
+        },
+        {
+          title: "Detached Floating Panel",
+          code: '<script>\n  let inspectorOpen = $state(false);\n</script>\n\n<Button onclick={() => (inspectorOpen = true)}>Open Inspector</Button>\n\n<DataPanel\n  bind:open={inspectorOpen}\n  mode="detached"\n  title="Inspector"\n  constraints={{ minWidth: 300, maxWidth: 500 }}\n>\n  <div class="space-y-4">\n    <p>Inspect element properties here.</p>\n  </div>\n</DataPanel>'
+        },
+        {
+          title: "Mobile Bottom Sheet (Card Mode)",
+          code: '<script>\n  let detailsOpen = $state(true);\n  let expanded = $state(false);\n</script>\n\n<DataPanel\n  bind:open={detailsOpen}\n  bind:expanded\n  variant="card"\n  title="Location Details"\n  subtitle="123 Main Street"\n  cardConfig={{\n    maxWidth: 480,\n    showDragHandle: true,\n  }}\n>\n  <div class="space-y-4">\n    <img src="/location.jpg" alt="Location" class="w-full rounded" />\n    <p>Additional details about this location.</p>\n  </div>\n</DataPanel>'
+        },
+        {
+          title: "With State Persistence",
+          code: '<DataPanel title="Preferences" persistKey="user-preferences-panel">\n  <p>Panel state (position, size, mode) is saved to localStorage.</p>\n</DataPanel>'
+        },
+        {
+          title: "Custom Header and Footer",
+          code: '<DataPanel title="Custom Panel">\n  {#snippet header()}\n    <div class="flex items-center gap-2">\n      <Avatar size="sm">JD</Avatar>\n      <div>\n        <p class="font-medium">John Doe</p>\n        <p class="text-xs text-muted-foreground">Online</p>\n      </div>\n    </div>\n  {/snippet}\n\n  <p>Panel content here.</p>\n\n  {#snippet footer()}\n    <div class="flex justify-between w-full">\n      <Button variant="ghost" size="sm">Help</Button>\n      <Button size="sm">Continue</Button>\n    </div>\n  {/snippet}\n</DataPanel>'
+        },
+        {
+          title: "Controlled Mode",
+          code: `<script>
+  let mode = $state<'pinned' | 'detached'>('pinned');
+  let edge = $state<'left' | 'right' | 'top' | 'bottom'>('right');
+</script>
+
+<div class="flex gap-2 mb-4">
+  <Button onclick={() => (mode = 'pinned')}>Pin</Button>
+  <Button onclick={() => (mode = 'detached')}>Detach</Button>
+  <Select bind:value={edge} options={['left', 'right', 'top', 'bottom']} />
+</div>
+
+<DataPanel
+  {mode}
+  {edge}
+  onModeChange={(m) => (mode = m)}
+  onEdgeChange={(e) => (edge = e)}
+  title="Controlled Panel"
+>
+  <p>Mode: {mode}, Edge: {edge}</p>
+</DataPanel>`
+        }
+      ],
+      relatedComponents: [
+        "Sidebar",
+        "Dialog",
+        "Card",
+        "DashboardLayout"
+      ]
+    },
+    {
+      name: "DataPanelContent",
+      description: "Scrollable content area for DataPanel",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "children",
+          type: "Snippet / ReactNode",
+          required: false,
+          description: "Content to render (required)"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<DataPanelContent>\n  <p>Your content goes here.</p>\n  <p>Overflow content will scroll.</p>\n</DataPanelContent>"
+        }
+      ],
+      relatedComponents: [
+        "DataPanel",
+        "DataPanelHeader",
+        "DataPanelFooter"
+      ]
+    },
+    {
+      name: "DataPanelFooter",
+      description: "Footer component for DataPanel with action buttons",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "actions",
+          type: "DataPanelAction[]",
+          default: "[]",
+          required: false,
+          description: "Array of action button configurations"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: "<script>\n  const actions = [\n    { label: 'Cancel', variant: 'ghost', onClick: handleCancel },\n    { label: 'Save', variant: 'primary', onClick: handleSave },\n  ];\n</script>\n\n<DataPanelFooter {actions} />"
+        }
+      ],
+      relatedComponents: [
+        "DataPanel",
+        "DataPanelHeader",
+        "DataPanelContent",
+        "Button"
+      ]
+    },
+    {
+      name: "DataPanelHeader",
+      description: "Header component for DataPanel with title, actions, and mode controls",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          required: false,
+          description: "Panel title text"
+        },
+        {
+          name: "subtitle",
+          type: "string",
+          required: false,
+          description: "Panel subtitle text"
+        },
+        {
+          name: "mode",
+          type: "'pinned' | 'detached'",
+          required: false,
+          description: "Current panel mode (required)"
+        },
+        {
+          name: "edge",
+          type: "'left' | 'right' | 'top' | 'bottom'",
+          required: false,
+          description: "Current panel edge (required)"
+        },
+        {
+          name: "isExpanded",
+          type: "boolean",
+          required: false,
+          description: "Whether panel is expanded (required)"
+        },
+        {
+          name: "onModeChange",
+          type: "(mode: PanelMode) => void",
+          required: false,
+          description: "Callback when mode changes"
+        },
+        {
+          name: "onEdgeChange",
+          type: "(edge: PanelEdge) => void",
+          required: false,
+          description: "Callback when edge changes"
+        },
+        {
+          name: "onExpandedChange",
+          type: "(expanded: boolean) => void",
+          required: false,
+          description: "Callback when expand state changes"
+        },
+        {
+          name: "onClose",
+          type: "() => void",
+          required: false,
+          description: "Callback when close is clicked"
+        },
+        {
+          name: "disableClose",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Hide close button"
+        },
+        {
+          name: "disableModeSwitch",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Hide mode switching menu"
+        },
+        {
+          name: "showModeMenuOnly",
+          type: "boolean",
+          default: "false",
+          required: false,
+          description: "Only render the mode dropdown"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [
+        {
+          name: "mode",
+          values: [
+            "pinned",
+            "detached"
+          ]
+        },
+        {
+          name: "edge",
+          values: [
+            "left",
+            "right",
+            "top",
+            "bottom"
+          ]
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<DataPanelHeader
+  title="Details"
+  subtitle="View more information"
+  mode="pinned"
+  edge="right"
+  isExpanded={true}
+  onModeChange={(m) => console.log('Mode:', m)}
+  onEdgeChange={(e) => console.log('Edge:', e)}
+  onClose={() => console.log('Close')}
+/>`
+        }
+      ],
+      relatedComponents: [
+        "DataPanel",
+        "DataPanelContent",
+        "DataPanelFooter"
+      ]
+    },
+    {
+      name: "DataPanelTab",
+      description: "Collapsed tab indicator for pinned DataPanel",
+      category: "layout",
+      importPath: "@classic-homes/theme-svelte",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          default: "'Panel'",
+          required: false,
+          description: "Tab label text"
+        },
+        {
+          name: "edge",
+          type: "'left' | 'right' | 'top' | 'bottom'",
+          required: false,
+          description: "Edge position (required)"
+        },
+        {
+          name: "onclick",
+          type: "() => void",
+          required: false,
+          description: "Click handler to expand panel"
+        },
+        {
+          name: "class",
+          type: "string",
+          required: false,
+          description: "Additional CSS classes"
+        }
+      ],
+      variants: [
+        {
+          name: "edge",
+          values: [
+            "left",
+            "right",
+            "top",
+            "bottom"
+          ]
+        }
+      ],
+      slots: [
+        {
+          name: "children",
+          description: "Main content",
+          required: false
+        }
+      ],
+      events: [],
+      examples: [
+        {
+          title: "Basic Usage",
+          code: `<DataPanelTab title="Details" edge="right" onclick={() => console.log('Expand panel')} />`
+        }
+      ],
+      relatedComponents: [
+        "DataPanel",
+        "DataPanelHeader"
+      ]
+    },
     {
       name: "DataTable",
       description: "Powerful data table with native Svelte 5 runes - sorting, filtering, pagination, virtualization, and inline editing",
@@ -13439,6 +14009,215 @@ var pattern_library_default = {
   </DropdownMenu.Content>
 </DropdownMenu.Root>`
     }
+  ],
+  panels: [
+    {
+      id: "panel-pinned-sidebar",
+      name: "Pinned Sidebar Panel",
+      description: "Pinned sidebar panel for app navigation, data display, or tool palettes. Attaches to viewport edge with resize and collapse capabilities.",
+      useCase: "Property details, settings panels, inspector tools",
+      components: [
+        "DataPanel",
+        "DataPanelContent"
+      ],
+      props: {
+        mode: "'pinned'",
+        edge: "'left' | 'right' | 'top' | 'bottom'",
+        title: "string",
+        subtitle: "string",
+        expanded: "boolean",
+        persistKey: "string"
+      },
+      example: `<script lang="ts">
+  import { DataPanel } from '@classic-homes/theme-svelte';
+
+  let open = $state(true);
+  let expanded = $state(true);
+</script>
+
+<DataPanel
+  bind:open
+  bind:expanded
+  mode="pinned"
+  edge="right"
+  title="Property Details"
+  subtitle="View and edit property information"
+  persistKey="property-details-panel"
+>
+  <div class="space-y-4">
+    <div>
+      <label class="text-sm font-medium">Address</label>
+      <p class="text-muted-foreground">123 Main Street</p>
+    </div>
+    <div>
+      <label class="text-sm font-medium">Price</label>
+      <p class="text-muted-foreground">$450,000</p>
+    </div>
+  </div>
+</DataPanel>`
+    },
+    {
+      id: "panel-detached-floating",
+      name: "Detached Floating Panel",
+      description: "Floating draggable panel for tools, inspectors, or secondary content. Can be freely positioned and snaps to edges when dragged nearby.",
+      useCase: "Tool palettes, inspectors, debug panels, floating editors",
+      components: [
+        "DataPanel",
+        "DataPanelContent"
+      ],
+      props: {
+        mode: "'detached'",
+        title: "string",
+        constraints: "PanelConstraints",
+        snapThreshold: "number"
+      },
+      example: `<script lang="ts">
+  import { DataPanel, Button } from '@classic-homes/theme-svelte';
+
+  let inspectorOpen = $state(false);
+</script>
+
+<Button onclick={() => inspectorOpen = true}>Open Inspector</Button>
+
+<DataPanel
+  bind:open={inspectorOpen}
+  mode="detached"
+  title="Element Inspector"
+  subtitle="Inspect selected element"
+  constraints={{ minWidth: 320, maxWidth: 480, minHeight: 300 }}
+  snapThreshold={30}
+>
+  <div class="space-y-4">
+    <div class="p-3 bg-muted rounded">
+      <code class="text-sm">&lt;div class="container"&gt;</code>
+    </div>
+    <div>
+      <h4 class="font-medium mb-2">Properties</h4>
+      <ul class="text-sm space-y-1">
+        <li>Width: 100%</li>
+        <li>Padding: 16px</li>
+      </ul>
+    </div>
+  </div>
+</DataPanel>`
+    },
+    {
+      id: "panel-card-mobile",
+      name: "Mobile Bottom Sheet Card",
+      description: "Mobile-optimized bottom sheet card with swipe gestures and snap points. Expands from bottom edge with configurable height stops.",
+      useCase: "Mobile detail views, contextual information, quick actions",
+      components: [
+        "DataPanel",
+        "DataPanelContent",
+        "Button"
+      ],
+      props: {
+        variant: "'card'",
+        cardConfig: "CardConfig",
+        expanded: "boolean"
+      },
+      example: `<script lang="ts">
+  import { DataPanel, Button } from '@classic-homes/theme-svelte';
+
+  let open = $state(true);
+  let expanded = $state(false);
+</script>
+
+<DataPanel
+  bind:open
+  bind:expanded
+  variant="card"
+  title="Location Details"
+  subtitle="123 Main Street, Anytown"
+  cardConfig={{
+    maxWidth: 480,
+    showDragHandle: true,
+    borderRadius: 20,
+  }}
+>
+  <div class="space-y-4">
+    <img src="/location-photo.jpg" alt="Location" class="w-full h-40 object-cover rounded-lg" />
+    <p class="text-muted-foreground">
+      A beautiful property located in the heart of downtown.
+    </p>
+    <div class="flex gap-2">
+      <Button class="flex-1">Get Directions</Button>
+      <Button variant="outline" class="flex-1">Save</Button>
+    </div>
+  </div>
+</DataPanel>`
+    },
+    {
+      id: "panel-with-actions",
+      name: "Panel with Footer Actions",
+      description: "Data panel with action buttons in the footer for confirming changes, saving data, or navigation between steps.",
+      useCase: "Edit forms, confirmation dialogs, wizard steps",
+      components: [
+        "DataPanel",
+        "DataPanelContent",
+        "FormField",
+        "Button"
+      ],
+      props: {
+        actions: "DataPanelAction[]",
+        title: "string"
+      },
+      example: `<script lang="ts">
+  import { DataPanel, FormField } from '@classic-homes/theme-svelte';
+  import type { DataPanelAction } from '@classic-homes/data-panel-core';
+
+  let open = $state(true);
+  let saving = $state(false);
+  let formData = $state({ name: '', email: '' });
+
+  async function handleSave() {
+    saving = true;
+    await fetch('/api/user', {
+      method: 'PATCH',
+      body: JSON.stringify(formData),
+    });
+    saving = false;
+    open = false;
+  }
+
+  const actions: DataPanelAction[] = $derived([
+    {
+      label: 'Cancel',
+      variant: 'ghost',
+      onClick: () => open = false,
+      disabled: saving,
+    },
+    {
+      label: 'Save Changes',
+      variant: 'primary',
+      onClick: handleSave,
+      loading: saving,
+    },
+  ]);
+</script>
+
+<DataPanel
+  bind:open
+  title="Edit Profile"
+  subtitle="Update your account information"
+  edge="right"
+  {actions}
+>
+  <form class="space-y-4">
+    <FormField
+      label="Name"
+      name="name"
+      bind:value={formData.name}
+    />
+    <FormField
+      label="Email"
+      type="email"
+      name="email"
+      bind:value={formData.email}
+    />
+  </form>
+</DataPanel>`
+    }
   ]
 };