@spinjs/components 0.1.0-preview.1 → 0.2.0-alpha.1

package/dist/floating-panel/examples/settings.html

@@ -1,72 +1,72 @@
 <script lang="ts">
   import { floatingPanel } from "../floating-panel.presentation.js";
 
-  const machine = floatingPanel({ defaultOpen: true });
+  const machine = floatingPanel({ defaultOpen: true, size: "{\"w\":380,\"h\":340}", minSize: "{\"w\":300,\"h\":240}", maxSize: "{\"w\":580,\"h\":480}" });
 </script>
 
-<div class="grid w-full gap-2">
-  <button class="mb-2 secondary s-sm" {...machine.getTriggerProps()}>Open panel</button>
-  <div class="relative h-[24rem] w-full" {...machine.getPositionerProps()}>
-    <div class={["absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen, "h-12 overflow-hidden": machine.stage === "minimized", "h-full w-full": machine.stage === "maximized" }]} {...machine.getContentProps()}>
-      <div class={["flex items-center justify-between gap-2 border-b border-border p-3 cursor-grab", { "cursor-grabbing": machine.dragging }]} {...machine.getDragTriggerProps()}>
+<div class="grid w-full justify-items-center gap-2">
+  <button class="s-sm w-fit" {...machine.getTriggerProps()}>Open settings</button>
+  <div class={["relative w-full", { "h-[23rem]": machine.isOpen, "hidden": !machine.isOpen }]} {...machine.getPositionerProps()}>
+    <div class={["absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border bg-surface-raised shadow-lg", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen, "h-12 overflow-hidden": machine.stage === "minimized", "h-full w-full": machine.stage === "maximized" }]} {...machine.getContentProps()}>
+      <div class={["flex items-center justify-between gap-2 border-b border p-3 cursor-grab", { "cursor-grabbing": machine.dragging }]} {...machine.getDragTriggerProps()}>
         <div class="flex min-w-0 items-center gap-2">
-          <span class="i-lucide-grip-vertical shrink-0 text-sm text-text-muted" aria-hidden="true"></span>
-          <span class="truncate text-sm font-medium text-text">Preferences</span>
+          <span class="i-lucide-grip-vertical shrink-0 type-code text-muted" aria-hidden="true"></span>
+          <span class="truncate type-label">Preferences</span>
         </div>
-        <div class="flex shrink-0 items-center gap-1"><button class="ghost icon s-sm text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "minimized" })}><span class="i-lucide-minus text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "maximized" })}><span class="i-lucide-square text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "default" })}><span class="i-lucide-copy text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm text-text-muted hover:bg-surface hover:text-text" {...machine.getCloseTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button></div>
+        <div class="flex shrink-0 items-center gap-1"><button class="ghost icon s-sm text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "minimized" })}><span class="i-lucide-minus type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "maximized" })}><span class="i-lucide-square type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "default" })}><span class="i-lucide-copy type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm text-muted hover:bg-surface" {...machine.getCloseTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button></div>
       </div>
 <div class="grid min-h-0 flex-1 content-start gap-5 overflow-y-auto p-4">
         <div>
-          <p class="flex items-center gap-2 text-sm font-medium text-text"><span class="i-lucide-palette text-sm" aria-hidden="true"></span>Appearance</p>
+          <p class="flex items-center gap-2"><span class="i-lucide-palette type-code" aria-hidden="true"></span>Appearance</p>
           <div class="grid gap-3">
             <div class="flex items-center justify-between gap-2">
-            <div><p class="text-sm text-text">Dark Mode</p><p class="text-xs text-text-muted">Switch to dark theme</p></div>
+            <div><p>Dark Mode</p><p class="text-muted">Switch to dark theme</p></div>
             <input type="checkbox" role="switch" data-toggle="dark" aria-label="Dark Mode" />
           </div>
           </div>
         </div>
         <div>
-          <p class="flex items-center gap-2 text-sm font-medium text-text"><span class="i-lucide-bell text-sm" aria-hidden="true"></span>Notifications</p>
+          <p class="flex items-center gap-2"><span class="i-lucide-bell type-code" aria-hidden="true"></span>Notifications</p>
           <div class="grid gap-3">
             <div class="flex items-center justify-between gap-2">
-            <div><p class="text-sm text-text">Push Notifications</p><p class="text-xs text-text-muted">Receive notifications on your device</p></div>
+            <div><p>Push Notifications</p><p class="text-muted">Receive notifications on your device</p></div>
             <input type="checkbox" role="switch" data-toggle="notifications" aria-label="Push Notifications" checked />
           </div>
           </div>
         </div>
         <div>
-          <p class="flex items-center gap-2 text-sm font-medium text-text"><span class="i-lucide-shield text-sm" aria-hidden="true"></span>Privacy & Security</p>
+          <p class="flex items-center gap-2"><span class="i-lucide-shield type-code" aria-hidden="true"></span>Privacy & Security</p>
           <div class="grid gap-3">
             <div class="flex items-center justify-between gap-2">
-            <div><p class="text-sm text-text">Auto-save</p><p class="text-xs text-text-muted">Automatically save your work</p></div>
+            <div><p>Auto-save</p><p class="text-muted">Automatically save your work</p></div>
             <input type="checkbox" role="switch" data-toggle="autosave" aria-label="Auto-save" checked />
           </div>
-            <button type="button" data-clear class="bare secondary grid w-full justify-items-start gap-1 rounded-lg text-left hover:bg-surface">
-              <p class="text-sm text-text">Clear Cache</p>
-              <p class="text-xs text-text-muted">Free up storage space</p>
+            <button type="button" data-clear class="bare grid w-full justify-items-start gap-1 rounded-lg border bg-surface p-3 text-left transition-colors hover:bg-surface-raised">
+              <p>Clear Cache</p>
+              <p class="text-muted">Free up storage space</p>
             </button>
-            <p data-freed class="hidden text-xs text-semantic-success">Cache cleared — 1.2 GB freed.</p>
+            <p data-freed class="hidden text-semantic-success">Cache cleared — 1.2 GB freed.</p>
           </div>
         </div>
         <div>
-          <p class="flex items-center gap-2 text-sm font-medium text-text"><span class="i-lucide-info text-sm" aria-hidden="true"></span>About</p>
-          <div class="grid gap-2 text-xs">
-            <div class="flex justify-between"><span class="text-text-muted">Version</span><span class="text-text">2.1.0</span></div>
-            <div class="flex justify-between"><span class="text-text-muted">Storage Used</span><span data-storage class="text-text">1.2 GB</span></div>
+          <p class="flex items-center gap-2"><span class="i-lucide-info type-code" aria-hidden="true"></span>About</p>
+          <div class="grid gap-2 type-caption">
+            <div class="flex justify-between"><span class="text-muted">Version</span><span>2.1.0</span></div>
+            <div class="flex justify-between"><span class="text-muted">Storage Used</span><span data-storage>1.2 GB</span></div>
           </div>
         </div>
       </div>
-            <button class="bare absolute p-0 inset-x-0 top-0 h-1 min-h-0 border-0 cursor-ns-resize" {...machine.getResizeTriggerProps("n")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-x-0 bottom-0 h-1 min-h-0 border-0 cursor-ns-resize" {...machine.getResizeTriggerProps("s")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-y-0 right-0 w-1 z-10 min-h-0 border-0 cursor-ew-resize" {...machine.getResizeTriggerProps("e")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-y-0 left-0 w-1 z-10 min-h-0 border-0 cursor-ew-resize" {...machine.getResizeTriggerProps("w")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 right-0 top-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("ne")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 left-0 top-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("nw")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 right-0 bottom-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("se")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 left-0 bottom-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("sw")} aria-hidden="true"></button>
+      <button class="bare absolute inset-x-0 top-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize" {...machine.getResizeTriggerProps("n")} aria-hidden="true"></button>
+      <button class="bare absolute inset-x-0 bottom-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize" {...machine.getResizeTriggerProps("s")} aria-hidden="true"></button>
+      <button class="bare absolute inset-y-0 right-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize" {...machine.getResizeTriggerProps("e")} aria-hidden="true"></button>
+      <button class="bare absolute inset-y-0 left-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize" {...machine.getResizeTriggerProps("w")} aria-hidden="true"></button>
+      <button class="bare absolute right-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("ne")} aria-hidden="true"></button>
+      <button class="bare absolute left-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("nw")} aria-hidden="true"></button>
+      <button class="bare absolute right-0 bottom-0 z-20 flex h-4 min-h-0 w-4 items-end justify-end border-0 p-1 text-muted cursor-nwse-resize" {...machine.getResizeTriggerProps("se")} aria-hidden="true"><span class="h-2 w-2 border-b-2 border-r-2 border-strong opacity-50"></span></button>
+      <button class="bare absolute left-0 bottom-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("sw")} aria-hidden="true"></button>
     </div>
   </div>
 </div>

package/dist/floating-panel/examples/settings.html.js

@@ -0,0 +1,5 @@
+// src/floating-panel/examples/settings.html
+var settings_default = "<script lang=\"ts\">\n  import { floatingPanel } from \"../floating-panel.presentation.ts\";\n\n  const machine = floatingPanel({ defaultOpen: true, size: \"{\\\"w\\\":380,\\\"h\\\":340}\", minSize: \"{\\\"w\\\":300,\\\"h\\\":240}\", maxSize: \"{\\\"w\\\":580,\\\"h\\\":480}\" });\n<\/script>\n\n<div class=\"grid w-full justify-items-center gap-2\">\n  <button class=\"s-sm w-fit\" {...machine.getTriggerProps()}>Open settings</button>\n  <div class={[\"relative w-full\", { \"h-[23rem]\": machine.isOpen, \"hidden\": !machine.isOpen }]} {...machine.getPositionerProps()}>\n    <div class={[\"absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border bg-surface-raised shadow-lg\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.isOpen, \"h-12 overflow-hidden\": machine.stage === \"minimized\", \"h-full w-full\": machine.stage === \"maximized\" }]} {...machine.getContentProps()}>\n      <div class={[\"flex items-center justify-between gap-2 border-b border p-3 cursor-grab\", { \"cursor-grabbing\": machine.dragging }]} {...machine.getDragTriggerProps()}>\n        <div class=\"flex min-w-0 items-center gap-2\">\n          <span class=\"i-lucide-grip-vertical shrink-0 type-code text-muted\" aria-hidden=\"true\"></span>\n          <span class=\"truncate type-label\">Preferences</span>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-1\"><button class=\"ghost icon s-sm text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"minimized\" })}><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"maximized\" })}><span class=\"i-lucide-square type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"default\" })}><span class=\"i-lucide-copy type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm text-muted hover:bg-surface\" {...machine.getCloseTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button></div>\n      </div>\n<div class=\"grid min-h-0 flex-1 content-start gap-5 overflow-y-auto p-4\">\n        <div>\n          <p class=\"flex items-center gap-2\"><span class=\"i-lucide-palette type-code\" aria-hidden=\"true\"></span>Appearance</p>\n          <div class=\"grid gap-3\">\n            <div class=\"flex items-center justify-between gap-2\">\n            <div><p>Dark Mode</p><p class=\"text-muted\">Switch to dark theme</p></div>\n            <input type=\"checkbox\" role=\"switch\" data-toggle=\"dark\" aria-label=\"Dark Mode\" />\n          </div>\n          </div>\n        </div>\n        <div>\n          <p class=\"flex items-center gap-2\"><span class=\"i-lucide-bell type-code\" aria-hidden=\"true\"></span>Notifications</p>\n          <div class=\"grid gap-3\">\n            <div class=\"flex items-center justify-between gap-2\">\n            <div><p>Push Notifications</p><p class=\"text-muted\">Receive notifications on your device</p></div>\n            <input type=\"checkbox\" role=\"switch\" data-toggle=\"notifications\" aria-label=\"Push Notifications\" checked />\n          </div>\n          </div>\n        </div>\n        <div>\n          <p class=\"flex items-center gap-2\"><span class=\"i-lucide-shield type-code\" aria-hidden=\"true\"></span>Privacy & Security</p>\n          <div class=\"grid gap-3\">\n            <div class=\"flex items-center justify-between gap-2\">\n            <div><p>Auto-save</p><p class=\"text-muted\">Automatically save your work</p></div>\n            <input type=\"checkbox\" role=\"switch\" data-toggle=\"autosave\" aria-label=\"Auto-save\" checked />\n          </div>\n            <button type=\"button\" data-clear class=\"bare grid w-full justify-items-start gap-1 rounded-lg border bg-surface p-3 text-left transition-colors hover:bg-surface-raised\">\n              <p>Clear Cache</p>\n              <p class=\"text-muted\">Free up storage space</p>\n            </button>\n            <p data-freed class=\"hidden text-semantic-success\">Cache cleared — 1.2 GB freed.</p>\n          </div>\n        </div>\n        <div>\n          <p class=\"flex items-center gap-2\"><span class=\"i-lucide-info type-code\" aria-hidden=\"true\"></span>About</p>\n          <div class=\"grid gap-2 type-caption\">\n            <div class=\"flex justify-between\"><span class=\"text-muted\">Version</span><span>2.1.0</span></div>\n            <div class=\"flex justify-between\"><span class=\"text-muted\">Storage Used</span><span data-storage>1.2 GB</span></div>\n          </div>\n        </div>\n      </div>\n      <button class=\"bare absolute inset-x-0 top-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize\" {...machine.getResizeTriggerProps(\"n\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-x-0 bottom-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize\" {...machine.getResizeTriggerProps(\"s\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-y-0 right-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize\" {...machine.getResizeTriggerProps(\"e\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-y-0 left-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize\" {...machine.getResizeTriggerProps(\"w\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute right-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize\" {...machine.getResizeTriggerProps(\"ne\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute left-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nwse-resize\" {...machine.getResizeTriggerProps(\"nw\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute right-0 bottom-0 z-20 flex h-4 min-h-0 w-4 items-end justify-end border-0 p-1 text-muted cursor-nwse-resize\" {...machine.getResizeTriggerProps(\"se\")} aria-hidden=\"true\"><span class=\"h-2 w-2 border-b-2 border-r-2 border-strong opacity-50\"></span></button>\n      <button class=\"bare absolute left-0 bottom-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize\" {...machine.getResizeTriggerProps(\"sw\")} aria-hidden=\"true\"></button>\n    </div>\n  </div>\n</div>\n\n";
+export { settings_default as default };
+
+//# sourceMappingURL=settings.html.js.map

package/dist/floating-panel/examples/task.html

@@ -1,78 +1,78 @@
 <script lang="ts">
   import { floatingPanel } from "../floating-panel.presentation.js";
 
-  const machine = floatingPanel({ defaultOpen: true });
+  const machine = floatingPanel({ defaultOpen: true, size: "{\"w\":420,\"h\":350}", minSize: "{\"w\":320,\"h\":240}", maxSize: "{\"w\":640,\"h\":500}" });
 </script>
 
-<div class="grid w-full gap-2">
-  <button class="mb-2 secondary s-sm" {...machine.getTriggerProps()}>Open panel</button>
-  <div class="relative h-[24rem] w-full" {...machine.getPositionerProps()}>
-    <div class={["absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen, "h-12 overflow-hidden": machine.stage === "minimized", "h-full w-full": machine.stage === "maximized" }]} {...machine.getContentProps()}>
-      <div class={["flex items-center justify-between gap-2 border-b border-border p-3 cursor-grab", { "cursor-grabbing": machine.dragging }]} {...machine.getDragTriggerProps()}>
+<div class="grid w-full justify-items-center gap-2">
+  <button class="s-sm w-fit" {...machine.getTriggerProps()}>Open task</button>
+  <div class={["relative w-full", { "h-[24rem]": machine.isOpen, "hidden": !machine.isOpen }]} {...machine.getPositionerProps()}>
+    <div class={["absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border bg-surface-raised shadow-lg", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen, "h-12 overflow-hidden": machine.stage === "minimized", "h-full w-full": machine.stage === "maximized" }]} {...machine.getContentProps()}>
+      <div class={["flex items-center justify-between gap-2 border-b border p-3 cursor-grab", { "cursor-grabbing": machine.dragging }]} {...machine.getDragTriggerProps()}>
         <div class="flex min-w-0 items-center gap-2">
-          <span class="i-lucide-grip-vertical shrink-0 text-sm text-text-muted" aria-hidden="true"></span>
-          <span class="truncate text-sm font-medium text-text">Task Inspector</span>
+          <span class="i-lucide-grip-vertical shrink-0 type-code text-muted" aria-hidden="true"></span>
+          <span class="truncate type-label">Task Inspector</span>
         </div>
-        <div class="flex shrink-0 items-center gap-1"><button class="ghost icon s-sm text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "minimized" })}><span class="i-lucide-minus text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "maximized" })}><span class="i-lucide-square text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm text-text-muted hover:bg-surface hover:text-text" {...machine.getStageTriggerProps({ stage: "default" })}><span class="i-lucide-copy text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm text-text-muted hover:bg-surface hover:text-text" {...machine.getCloseTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button></div>
+        <div class="flex shrink-0 items-center gap-1"><button class="ghost icon s-sm text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "minimized" })}><span class="i-lucide-minus type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "maximized" })}><span class="i-lucide-square type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm text-muted hover:bg-surface" {...machine.getStageTriggerProps({ stage: "default" })}><span class="i-lucide-copy type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm text-muted hover:bg-surface" {...machine.getCloseTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button></div>
       </div>
 <div class="grid min-h-0 flex-1 content-start gap-4 overflow-y-auto p-4">
         <div class="grid gap-2">
-          <p class="text-md font-semibold text-text">Implement user authentication system</p>
+          <p>Implement user authentication system</p>
           <div class="flex items-center gap-2">
             <badge variant="warning">In Progress</badge>
             <badge variant="danger">High</badge>
           </div>
-          <p class="font-mono text-xs text-text-muted">TASK-123</p>
+          <p class="text-muted"><code>TASK-123</code></p>
         </div>
         <div class="grid gap-1">
-          <p class="text-sm font-medium text-text">Description</p>
-          <p class="text-sm text-text-muted">Create a secure authentication system with email/password login, JWT tokens, and role-based access control.</p>
+          <p>Description</p>
+          <p class="text-muted">Create a secure authentication system with email/password login, JWT tokens, and role-based access control.</p>
         </div>
         <div class="grid grid-cols-2 gap-3">
           <div class="flex items-center gap-2">
-            <span class="i-lucide-user text-sm text-text-muted" aria-hidden="true"></span>
-            <div><p class="text-xs text-text-muted">Assignee</p><p class="text-sm font-medium text-text">Sarah Johnson</p></div>
+            <span class="i-lucide-user type-code text-muted" aria-hidden="true"></span>
+            <div><p class="text-muted">Assignee</p><p>Sarah Johnson</p></div>
           </div>
           <div class="flex items-center gap-2">
-            <span class="i-lucide-calendar text-sm text-text-muted" aria-hidden="true"></span>
-            <div><p class="text-xs text-text-muted">Due Date</p><p class="text-sm font-medium text-text">2024-01-15</p></div>
+            <span class="i-lucide-calendar type-code text-muted" aria-hidden="true"></span>
+            <div><p class="text-muted">Due Date</p><p>2024-01-15</p></div>
           </div>
           <div class="flex items-center gap-2">
-            <span class="i-lucide-circle-check text-sm text-text-muted" aria-hidden="true"></span>
-            <div><p class="text-xs text-text-muted">Progress</p><p class="text-sm font-medium text-text">3/7 subtasks</p></div>
+            <span class="i-lucide-circle-check type-code text-muted" aria-hidden="true"></span>
+            <div><p class="text-muted">Progress</p><p>3/7 subtasks</p></div>
           </div>
           <div class="flex items-center gap-2">
-            <span class="i-lucide-clock text-sm text-text-muted" aria-hidden="true"></span>
-            <div><p class="text-xs text-text-muted">Created</p><p class="text-sm font-medium text-text">2024-01-08</p></div>
+            <span class="i-lucide-clock type-code text-muted" aria-hidden="true"></span>
+            <div><p class="text-muted">Created</p><p>2024-01-08</p></div>
           </div>
         </div>
         <div class="grid gap-1">
-          <div class="flex justify-between text-xs"><span class="text-text-muted">Progress</span><span class="text-text">43%</span></div>
+          <div class="flex justify-between type-caption"><span class="text-muted">Progress</span><span>43%</span></div>
           <div class="h-2 overflow-hidden rounded-full bg-surface"><div class="h-full w-[43%] rounded-full bg-primary"></div></div>
         </div>
         <div class="grid gap-2">
-          <p class="text-sm font-medium text-text">Recent Comments</p>
-          <div class="grid gap-1 border-l-2 border-solid border-border pl-3">
-            <div class="flex items-start justify-between gap-2"><p class="text-sm font-medium text-text">John Doe</p><span class="shrink-0 text-xs text-text-muted">2h ago</span></div>
-            <p class="text-sm text-text-muted">Started working on the JWT implementation</p>
+          <p>Recent Comments</p>
+          <div class="grid gap-1 border-l-2 pl-3">
+            <div class="flex items-start justify-between gap-2"><p>John Doe</p><span class="shrink-0 type-caption text-muted">2h ago</span></div>
+            <p class="text-muted">Started working on the JWT implementation</p>
           </div>
-          <div class="grid gap-1 border-l-2 border-solid border-border pl-3">
-            <div class="flex items-start justify-between gap-2"><p class="text-sm font-medium text-text">Sarah Johnson</p><span class="shrink-0 text-xs text-text-muted">4h ago</span></div>
-            <p class="text-sm text-text-muted">Updated the database schema for user roles</p>
+          <div class="grid gap-1 border-l-2 pl-3">
+            <div class="flex items-start justify-between gap-2"><p>Sarah Johnson</p><span class="shrink-0 type-caption text-muted">4h ago</span></div>
+            <p class="text-muted">Updated the database schema for user roles</p>
           </div>
         </div>
       </div>
-            <button class="bare absolute p-0 inset-x-0 top-0 h-1 min-h-0 border-0 cursor-ns-resize" {...machine.getResizeTriggerProps("n")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-x-0 bottom-0 h-1 min-h-0 border-0 cursor-ns-resize" {...machine.getResizeTriggerProps("s")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-y-0 right-0 w-1 z-10 min-h-0 border-0 cursor-ew-resize" {...machine.getResizeTriggerProps("e")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-y-0 left-0 w-1 z-10 min-h-0 border-0 cursor-ew-resize" {...machine.getResizeTriggerProps("w")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 right-0 top-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("ne")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 left-0 top-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("nw")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 right-0 bottom-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("se")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 left-0 bottom-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("sw")} aria-hidden="true"></button>
+      <button class="bare absolute inset-x-0 top-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize" {...machine.getResizeTriggerProps("n")} aria-hidden="true"></button>
+      <button class="bare absolute inset-x-0 bottom-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize" {...machine.getResizeTriggerProps("s")} aria-hidden="true"></button>
+      <button class="bare absolute inset-y-0 right-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize" {...machine.getResizeTriggerProps("e")} aria-hidden="true"></button>
+      <button class="bare absolute inset-y-0 left-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize" {...machine.getResizeTriggerProps("w")} aria-hidden="true"></button>
+      <button class="bare absolute right-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("ne")} aria-hidden="true"></button>
+      <button class="bare absolute left-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("nw")} aria-hidden="true"></button>
+      <button class="bare absolute right-0 bottom-0 z-20 flex h-4 min-h-0 w-4 items-end justify-end border-0 p-1 text-muted cursor-nwse-resize" {...machine.getResizeTriggerProps("se")} aria-hidden="true"><span class="h-2 w-2 border-b-2 border-r-2 border-strong opacity-50"></span></button>
+      <button class="bare absolute left-0 bottom-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("sw")} aria-hidden="true"></button>
     </div>
   </div>
 </div>

package/dist/floating-panel/examples/task.html.js

@@ -0,0 +1,5 @@
+// src/floating-panel/examples/task.html
+var task_default = "<script lang=\"ts\">\n  import { floatingPanel } from \"../floating-panel.presentation.ts\";\n\n  const machine = floatingPanel({ defaultOpen: true, size: \"{\\\"w\\\":420,\\\"h\\\":350}\", minSize: \"{\\\"w\\\":320,\\\"h\\\":240}\", maxSize: \"{\\\"w\\\":640,\\\"h\\\":500}\" });\n<\/script>\n\n<div class=\"grid w-full justify-items-center gap-2\">\n  <button class=\"s-sm w-fit\" {...machine.getTriggerProps()}>Open task</button>\n  <div class={[\"relative w-full\", { \"h-[24rem]\": machine.isOpen, \"hidden\": !machine.isOpen }]} {...machine.getPositionerProps()}>\n    <div class={[\"absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border bg-surface-raised shadow-lg\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.isOpen, \"h-12 overflow-hidden\": machine.stage === \"minimized\", \"h-full w-full\": machine.stage === \"maximized\" }]} {...machine.getContentProps()}>\n      <div class={[\"flex items-center justify-between gap-2 border-b border p-3 cursor-grab\", { \"cursor-grabbing\": machine.dragging }]} {...machine.getDragTriggerProps()}>\n        <div class=\"flex min-w-0 items-center gap-2\">\n          <span class=\"i-lucide-grip-vertical shrink-0 type-code text-muted\" aria-hidden=\"true\"></span>\n          <span class=\"truncate type-label\">Task Inspector</span>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-1\"><button class=\"ghost icon s-sm text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"minimized\" })}><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"maximized\" })}><span class=\"i-lucide-square type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm text-muted hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"default\" })}><span class=\"i-lucide-copy type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm text-muted hover:bg-surface\" {...machine.getCloseTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button></div>\n      </div>\n<div class=\"grid min-h-0 flex-1 content-start gap-4 overflow-y-auto p-4\">\n        <div class=\"grid gap-2\">\n          <p>Implement user authentication system</p>\n          <div class=\"flex items-center gap-2\">\n            <badge variant=\"warning\">In Progress</badge>\n            <badge variant=\"danger\">High</badge>\n          </div>\n          <p class=\"text-muted\"><code>TASK-123</code></p>\n        </div>\n        <div class=\"grid gap-1\">\n          <p>Description</p>\n          <p class=\"text-muted\">Create a secure authentication system with email/password login, JWT tokens, and role-based access control.</p>\n        </div>\n        <div class=\"grid grid-cols-2 gap-3\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"i-lucide-user type-code text-muted\" aria-hidden=\"true\"></span>\n            <div><p class=\"text-muted\">Assignee</p><p>Sarah Johnson</p></div>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <span class=\"i-lucide-calendar type-code text-muted\" aria-hidden=\"true\"></span>\n            <div><p class=\"text-muted\">Due Date</p><p>2024-01-15</p></div>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <span class=\"i-lucide-circle-check type-code text-muted\" aria-hidden=\"true\"></span>\n            <div><p class=\"text-muted\">Progress</p><p>3/7 subtasks</p></div>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <span class=\"i-lucide-clock type-code text-muted\" aria-hidden=\"true\"></span>\n            <div><p class=\"text-muted\">Created</p><p>2024-01-08</p></div>\n          </div>\n        </div>\n        <div class=\"grid gap-1\">\n          <div class=\"flex justify-between type-caption\"><span class=\"text-muted\">Progress</span><span>43%</span></div>\n          <div class=\"h-2 overflow-hidden rounded-full bg-surface\"><div class=\"h-full w-[43%] rounded-full bg-primary\"></div></div>\n        </div>\n        <div class=\"grid gap-2\">\n          <p>Recent Comments</p>\n          <div class=\"grid gap-1 border-l-2 pl-3\">\n            <div class=\"flex items-start justify-between gap-2\"><p>John Doe</p><span class=\"shrink-0 type-caption text-muted\">2h ago</span></div>\n            <p class=\"text-muted\">Started working on the JWT implementation</p>\n          </div>\n          <div class=\"grid gap-1 border-l-2 pl-3\">\n            <div class=\"flex items-start justify-between gap-2\"><p>Sarah Johnson</p><span class=\"shrink-0 type-caption text-muted\">4h ago</span></div>\n            <p class=\"text-muted\">Updated the database schema for user roles</p>\n          </div>\n        </div>\n      </div>\n      <button class=\"bare absolute inset-x-0 top-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize\" {...machine.getResizeTriggerProps(\"n\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-x-0 bottom-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize\" {...machine.getResizeTriggerProps(\"s\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-y-0 right-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize\" {...machine.getResizeTriggerProps(\"e\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-y-0 left-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize\" {...machine.getResizeTriggerProps(\"w\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute right-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize\" {...machine.getResizeTriggerProps(\"ne\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute left-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nwse-resize\" {...machine.getResizeTriggerProps(\"nw\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute right-0 bottom-0 z-20 flex h-4 min-h-0 w-4 items-end justify-end border-0 p-1 text-muted cursor-nwse-resize\" {...machine.getResizeTriggerProps(\"se\")} aria-hidden=\"true\"><span class=\"h-2 w-2 border-b-2 border-r-2 border-strong opacity-50\"></span></button>\n      <button class=\"bare absolute left-0 bottom-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize\" {...machine.getResizeTriggerProps(\"sw\")} aria-hidden=\"true\"></button>\n    </div>\n  </div>\n</div>\n\n";
+export { task_default as default };
+
+//# sourceMappingURL=task.html.js.map

package/dist/floating-panel/examples/video-call.html

@@ -1,46 +1,46 @@
 <script lang="ts">
   import { floatingPanel } from "../floating-panel.presentation.js";
 
-  const machine = floatingPanel({ defaultOpen: true });
+  const machine = floatingPanel({ defaultOpen: true, size: "{\"w\":380,\"h\":300}", minSize: "{\"w\":280,\"h\":240}", maxSize: "{\"w\":580,\"h\":440}" });
 </script>
 
-<div class="grid w-full gap-2">
-  <button class="mb-2 secondary s-sm" {...machine.getTriggerProps()}>Open panel</button>
-  <div class="relative h-[24rem] w-full" {...machine.getPositionerProps()}>
-    <div class={["absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen, "h-12 overflow-hidden": machine.stage === "minimized", "h-full w-full": machine.stage === "maximized" }]} {...machine.getContentProps()}>
+<div class="grid w-full justify-items-center gap-2">
+  <button class="s-sm w-fit" {...machine.getTriggerProps()}>Open call</button>
+  <div class={["relative w-full", { "h-[21rem]": machine.isOpen, "hidden": !machine.isOpen }]} {...machine.getPositionerProps()}>
+    <div class={["absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border bg-surface-raised shadow-lg", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen, "h-12 overflow-hidden": machine.stage === "minimized", "h-full w-full": machine.stage === "maximized" }]} {...machine.getContentProps()}>
 <div class={["flex items-center justify-between gap-2 bg-surface-sunken p-3 cursor-grab", { "cursor-grabbing": machine.dragging }]} {...machine.getDragTriggerProps()}>
         <div class="flex min-w-0 items-center gap-2">
           <span class="h-2 w-2 shrink-0 rounded-full bg-semantic-success" aria-hidden="true"></span>
-          <span class="truncate text-sm font-medium text-text">Sarah Johnson</span>
-          <span data-timer class="shrink-0 font-mono text-xs text-text-muted">00:12:34</span>
+          <span class="truncate type-label">Sarah Johnson</span>
+          <span data-timer class="shrink-0 type-code text-muted">00:12:34</span>
         </div>
-        <div class="flex shrink-0 items-center gap-1"><button class="ghost icon s-sm hover:bg-surface" {...machine.getStageTriggerProps({ stage: "minimized" })}><span class="i-lucide-minus text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm hover:bg-surface" {...machine.getStageTriggerProps({ stage: "maximized" })}><span class="i-lucide-square text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm hover:bg-surface" {...machine.getStageTriggerProps({ stage: "default" })}><span class="i-lucide-copy text-xs" aria-hidden="true"></span></button>
-          <button class="ghost icon s-sm hover:bg-surface" {...machine.getCloseTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button></div>
+        <div class="flex shrink-0 items-center gap-1"><button class="ghost icon s-sm hover:bg-surface" {...machine.getStageTriggerProps({ stage: "minimized" })}><span class="i-lucide-minus type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm hover:bg-surface" {...machine.getStageTriggerProps({ stage: "maximized" })}><span class="i-lucide-square type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm hover:bg-surface" {...machine.getStageTriggerProps({ stage: "default" })}><span class="i-lucide-copy type-caption" aria-hidden="true"></span></button>
+          <button class="ghost icon s-sm hover:bg-surface" {...machine.getCloseTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button></div>
       </div>
       <div class="relative min-h-0 flex-1 overflow-hidden bg-surface-sunken">
         <div class="absolute inset-0 flex items-center justify-center">
-          <span class="flex h-[8rem] w-[8rem] items-center justify-center rounded-full bg-surface-raised"><span class="flex h-20 w-20 items-center justify-center rounded-full bg-surface"><span class="text-lg font-semibold text-text">SJ</span></span></span>
+          <span class="flex h-[8rem] w-[8rem] items-center justify-center rounded-full bg-surface-raised"><span class="flex h-20 w-20 items-center justify-center rounded-full bg-surface"><span class="type-lead">SJ</span></span></span>
         </div>
         <badge class="absolute right-2 top-2 flex h-12 w-16 items-center justify-center" variant="neutral">You</badge>
-        <badge class="absolute left-2 top-2 font-mono" variant="neutral">12:41</badge>
+        <badge class="absolute left-2 top-2 type-code" variant="neutral">12:41</badge>
         <div class="absolute inset-x-0 bottom-3 flex justify-center">
-          <div class="flex items-center gap-3 rounded-full border border-solid border-border bg-surface px-4 py-2">
-            <button type="button" data-mute aria-pressed="false" class="secondary icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center"><span class="i-lucide-mic text-sm" aria-hidden="true"></span></button>
-            <button data-video aria-pressed="false" class="secondary icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center"><span class="i-lucide-video text-sm" aria-hidden="true"></span></button>
-            <button data-hangup class="danger icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center"><span class="i-lucide-phone-off text-sm" aria-hidden="true"></span></button>
+          <div class="flex items-center gap-3 rounded-full border bg-surface px-4 py-2">
+            <button type="button" data-mute aria-pressed="false" class="secondary icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center"><span class="i-lucide-mic type-code" aria-hidden="true"></span></button>
+            <button data-video aria-pressed="false" class="secondary icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center"><span class="i-lucide-video type-code" aria-hidden="true"></span></button>
+            <button data-hangup class="danger icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center"><span class="i-lucide-phone-off type-code" aria-hidden="true"></span></button>
           </div>
         </div>
       </div>
-            <button class="bare absolute p-0 inset-x-0 top-0 h-1 min-h-0 border-0 cursor-ns-resize" {...machine.getResizeTriggerProps("n")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-x-0 bottom-0 h-1 min-h-0 border-0 cursor-ns-resize" {...machine.getResizeTriggerProps("s")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-y-0 right-0 w-1 z-10 min-h-0 border-0 cursor-ew-resize" {...machine.getResizeTriggerProps("e")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 inset-y-0 left-0 w-1 z-10 min-h-0 border-0 cursor-ew-resize" {...machine.getResizeTriggerProps("w")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 right-0 top-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("ne")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 left-0 top-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("nw")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 right-0 bottom-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("se")} aria-hidden="true"></button>
-      <button class="bare absolute p-0 left-0 bottom-0 z-10 h-2 min-h-0 w-2 border-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("sw")} aria-hidden="true"></button>
+      <button class="bare absolute inset-x-0 top-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize" {...machine.getResizeTriggerProps("n")} aria-hidden="true"></button>
+      <button class="bare absolute inset-x-0 bottom-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize" {...machine.getResizeTriggerProps("s")} aria-hidden="true"></button>
+      <button class="bare absolute inset-y-0 right-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize" {...machine.getResizeTriggerProps("e")} aria-hidden="true"></button>
+      <button class="bare absolute inset-y-0 left-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize" {...machine.getResizeTriggerProps("w")} aria-hidden="true"></button>
+      <button class="bare absolute right-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("ne")} aria-hidden="true"></button>
+      <button class="bare absolute left-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nwse-resize" {...machine.getResizeTriggerProps("nw")} aria-hidden="true"></button>
+      <button class="bare absolute right-0 bottom-0 z-20 flex h-4 min-h-0 w-4 items-end justify-end border-0 p-1 text-muted cursor-nwse-resize" {...machine.getResizeTriggerProps("se")} aria-hidden="true"><span class="h-2 w-2 border-b-2 border-r-2 border-strong opacity-50"></span></button>
+      <button class="bare absolute left-0 bottom-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize" {...machine.getResizeTriggerProps("sw")} aria-hidden="true"></button>
     </div>
   </div>
 </div>

package/dist/floating-panel/examples/video-call.html.js

@@ -0,0 +1,5 @@
+// src/floating-panel/examples/video-call.html
+var video_call_default = "<script lang=\"ts\">\n  import { floatingPanel } from \"../floating-panel.presentation.ts\";\n\n  const machine = floatingPanel({ defaultOpen: true, size: \"{\\\"w\\\":380,\\\"h\\\":300}\", minSize: \"{\\\"w\\\":280,\\\"h\\\":240}\", maxSize: \"{\\\"w\\\":580,\\\"h\\\":440}\" });\n<\/script>\n\n<div class=\"grid w-full justify-items-center gap-2\">\n  <button class=\"s-sm w-fit\" {...machine.getTriggerProps()}>Open call</button>\n  <div class={[\"relative w-full\", { \"h-[21rem]\": machine.isOpen, \"hidden\": !machine.isOpen }]} {...machine.getPositionerProps()}>\n    <div class={[\"absolute left-0 top-0 flex flex-col overflow-hidden rounded-lg border bg-surface-raised shadow-lg\", { \"pointer-events-none invisible scale-95 opacity-0\": !machine.isOpen, \"h-12 overflow-hidden\": machine.stage === \"minimized\", \"h-full w-full\": machine.stage === \"maximized\" }]} {...machine.getContentProps()}>\n<div class={[\"flex items-center justify-between gap-2 bg-surface-sunken p-3 cursor-grab\", { \"cursor-grabbing\": machine.dragging }]} {...machine.getDragTriggerProps()}>\n        <div class=\"flex min-w-0 items-center gap-2\">\n          <span class=\"h-2 w-2 shrink-0 rounded-full bg-semantic-success\" aria-hidden=\"true\"></span>\n          <span class=\"truncate type-label\">Sarah Johnson</span>\n          <span data-timer class=\"shrink-0 type-code text-muted\">00:12:34</span>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-1\"><button class=\"ghost icon s-sm hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"minimized\" })}><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"maximized\" })}><span class=\"i-lucide-square type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm hover:bg-surface\" {...machine.getStageTriggerProps({ stage: \"default\" })}><span class=\"i-lucide-copy type-caption\" aria-hidden=\"true\"></span></button>\n          <button class=\"ghost icon s-sm hover:bg-surface\" {...machine.getCloseTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button></div>\n      </div>\n      <div class=\"relative min-h-0 flex-1 overflow-hidden bg-surface-sunken\">\n        <div class=\"absolute inset-0 flex items-center justify-center\">\n          <span class=\"flex h-[8rem] w-[8rem] items-center justify-center rounded-full bg-surface-raised\"><span class=\"flex h-20 w-20 items-center justify-center rounded-full bg-surface\"><span class=\"type-lead\">SJ</span></span></span>\n        </div>\n        <badge class=\"absolute right-2 top-2 flex h-12 w-16 items-center justify-center\" variant=\"neutral\">You</badge>\n        <badge class=\"absolute left-2 top-2 type-code\" variant=\"neutral\">12:41</badge>\n        <div class=\"absolute inset-x-0 bottom-3 flex justify-center\">\n          <div class=\"flex items-center gap-3 rounded-full border bg-surface px-4 py-2\">\n            <button type=\"button\" data-mute aria-pressed=\"false\" class=\"secondary icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center\"><span class=\"i-lucide-mic type-code\" aria-hidden=\"true\"></span></button>\n            <button data-video aria-pressed=\"false\" class=\"secondary icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center\"><span class=\"i-lucide-video type-code\" aria-hidden=\"true\"></span></button>\n            <button data-hangup class=\"danger icon s-sm flex h-10 max-h-10 min-h-0 w-10 items-center justify-center\"><span class=\"i-lucide-phone-off type-code\" aria-hidden=\"true\"></span></button>\n          </div>\n        </div>\n      </div>\n      <button class=\"bare absolute inset-x-0 top-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize\" {...machine.getResizeTriggerProps(\"n\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-x-0 bottom-0 z-10 h-2 min-h-0 border-0 p-0 cursor-ns-resize\" {...machine.getResizeTriggerProps(\"s\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-y-0 right-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize\" {...machine.getResizeTriggerProps(\"e\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute inset-y-0 left-0 z-10 w-2 min-h-0 border-0 p-0 cursor-ew-resize\" {...machine.getResizeTriggerProps(\"w\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute right-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize\" {...machine.getResizeTriggerProps(\"ne\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute left-0 top-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nwse-resize\" {...machine.getResizeTriggerProps(\"nw\")} aria-hidden=\"true\"></button>\n      <button class=\"bare absolute right-0 bottom-0 z-20 flex h-4 min-h-0 w-4 items-end justify-end border-0 p-1 text-muted cursor-nwse-resize\" {...machine.getResizeTriggerProps(\"se\")} aria-hidden=\"true\"><span class=\"h-2 w-2 border-b-2 border-r-2 border-strong opacity-50\"></span></button>\n      <button class=\"bare absolute left-0 bottom-0 z-20 h-3 min-h-0 w-3 border-0 p-0 cursor-nesw-resize\" {...machine.getResizeTriggerProps(\"sw\")} aria-hidden=\"true\"></button>\n    </div>\n  </div>\n</div>\n\n";
+export { video_call_default as default };
+
+//# sourceMappingURL=video-call.html.js.map

package/dist/floating-panel/floating-panel.events.d.ts

@@ -1,5 +1,5 @@
 import { FloatingPanelSize, FloatingPanelStage } from "./floating-panel.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface FloatingPanelEvents {
   "OPEN": {};
   "CLOSE": {};
@@ -41,5 +41,4 @@ export interface FloatingPanelPositionChange {
 }
 export interface FloatingPanelStageChange {
   readonly stage: FloatingPanelStage;
-}
-//# sourceMappingURL=floating-panel.events.d.ts.map
+}

package/dist/floating-panel/floating-panel.machine.d.ts

@@ -1,6 +1,5 @@
 import { FloatingPanelArgs, FloatingPanelContext, FloatingPanelSize, FloatingPanelStage, FloatingPanelState } from "./floating-panel.state.js";
 import { FloatingPanelEvent, FloatingPanelEvents } from "./floating-panel.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function floatingPanel(args?: FloatingPanelArgs, authored?: (name: string) => boolean): Machine<FloatingPanelContext, FloatingPanelEvents, FloatingPanelState>;
-export type { FloatingPanelEvent, FloatingPanelEvents, FloatingPanelSize, FloatingPanelStage };
-//# sourceMappingURL=floating-panel.machine.d.ts.map
+export type { FloatingPanelEvent, FloatingPanelEvents, FloatingPanelSize, FloatingPanelStage };

package/dist/floating-panel/floating-panel.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./floating-panel.state.js";
 import { canDrag, canResize, cancelDragToOpen, clearDragFrom, clearResizeFrom, closeOnEscape, dragMove, dragStart, escapeCancel, maximize, minimize, resizeMove, resizeStart, restore, restoreResizeGeometry, setSize } from "./floating-panel.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/floating-panel/floating-panel.machine.ts
 function floatingPanel(args = {}, authored = () => false) {
 	return createMachine({

package/dist/floating-panel/floating-panel.presentation.d.ts

@@ -1,7 +1,7 @@
 import { FloatingPanelArgs, FloatingPanelContext, FloatingPanelSize, FloatingPanelStage, FloatingPanelState } from "./floating-panel.state.js";
 import { FloatingPanelEvents } from "./floating-panel.events.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
-import { DragDelta } from "@spinjs/runtime/actions";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
+import { DragDelta } from "@spinjs/components/actions";
 /** The stage a stage-trigger addresses: ark's vocabulary. "default"
  * is the panel's restored geometry. */
 export interface FloatingPanelStageTrigger {
@@ -11,7 +11,7 @@ export type ResizeEdge = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
 type ScopeLike = ViewFor<FloatingPanelContext, FloatingPanelEvents, FloatingPanelState>;
 export declare const def: {
   name: string;
-  machine: (props: FloatingPanelArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<FloatingPanelContext, FloatingPanelEvents, FloatingPanelState>;
+  machine: (props: FloatingPanelArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<FloatingPanelContext, FloatingPanelEvents, FloatingPanelState>;
   start: (raw: Record<string, unknown>, authored: (name: string) => boolean) => "open" | "closed";
   reconcile: ({ context, state, parsed, authored, send }: {
     readonly context: FloatingPanelContext;
@@ -24,7 +24,7 @@ export declare const def: {
   }) => boolean;
   parts: {
     trigger: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
         "data-state": string;
         hidden: boolean;
         onClick: () => void;
@@ -43,13 +43,12 @@ export declare const def: {
         "data-resizing": string | undefined;
         "data-disabled": string | undefined;
         "use:dismissable": {
-          onOutside: () => void;
           onEscape: () => void;
         };
       };
     };
     content: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
         id: string;
         "data-state": string;
         "data-stage": FloatingPanelStage;
@@ -63,7 +62,7 @@ export declare const def: {
     };
     dragTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
         id: string;
         "aria-label": string;
         "data-disabled": string | undefined;
@@ -94,7 +93,7 @@ export declare const def: {
     };
     closeTrigger: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, FloatingPanelContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<FloatingPanelEvents>, FloatingPanelState>) => {
         id: string;
         "aria-label": string;
         onClick: () => void;
@@ -123,7 +122,7 @@ export declare const def: {
   };
   slots: {};
   settled: ({ before, after, focus, root }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: FloatingPanelContext;
       readonly state: FloatingPanelState;
@@ -137,7 +136,7 @@ export declare const def: {
     readonly id: (part: string, slot?: unknown) => string;
     readonly focus: (part: string, slot?: unknown) => void;
     readonly measure: (part: string, slot?: unknown) => DOMRect | null;
-    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+    readonly send: (event: import("@spinjs/components/runtime").AnyEvent) => void;
   }) => void;
   commands: {
     setOpen: {
@@ -234,6 +233,5 @@ export declare const def: {
   };
 };
 export type FloatingPanelApi = ApiOf<typeof def>;
-export declare const floatingPanel: import("@spinjs/runtime").DefinedComponent<FloatingPanelApi, FloatingPanelArgs>;
-export type { FloatingPanelSize, FloatingPanelStage };
-//# sourceMappingURL=floating-panel.presentation.d.ts.map
+export declare const floatingPanel: import("@spinjs/components/runtime").DefinedComponent<FloatingPanelApi, FloatingPanelArgs>;
+export type { FloatingPanelSize, FloatingPanelStage };

package/dist/floating-panel/floating-panel.presentation.js

@@ -1,6 +1,6 @@
-import { startOpen } from "./floating-panel.state.js";
 import { floatingPanel as floatingPanel$1 } from "./floating-panel.machine.js";
-import { dataAttr, defineComponent, disclosureTrigger, isRecord } from "@spinjs/runtime";
+import { startOpen } from "./floating-panel.state.js";
+import { dataAttr, defineComponent, disclosureTrigger, isRecord } from "@spinjs/components/runtime";
 // src/floating-panel/floating-panel.presentation.ts
 const EDGES = {
 	n: {
@@ -130,10 +130,7 @@ const def = {
 				"data-dragging": scope.attr(scope.state === "dragging"),
 				"data-resizing": scope.attr(scope.state === "resizing"),
 				"data-disabled": dataAttr(scope.context.disabled),
-				"use:dismissable": {
-					onOutside: () => scope.send({ type: "CLOSE" }),
-					onEscape: () => scope.send({ type: "ESCAPE" })
-				}
+				"use:dismissable": { onEscape: () => scope.send({ type: "ESCAPE" }) }
 			};
 		} },
 		content: { attrs: (scope) => {

package/dist/floating-panel/floating-panel.state.d.ts

@@ -63,5 +63,4 @@ export declare function startOpen(raw: Record<string, unknown>, authored: (name:
 export declare function clampPosition(ctx: FloatingPanelContext, x: number, y: number): {
   readonly x: number;
   readonly y: number;
-};
-//# sourceMappingURL=floating-panel.state.d.ts.map
+};

package/dist/floating-panel/floating-panel.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin, isRecord } from "@spinjs/runtime";
+import { defaultTwin, isRecord } from "@spinjs/components/runtime";
 // src/floating-panel/floating-panel.state.ts
 function sizeOf(raw) {
 	const shape = (value) => {

package/dist/floating-panel/floating-panel.transitions.d.ts

@@ -1,6 +1,6 @@
-import { FloatingPanelContext } from "./floating-panel.state.js";
 import { FloatingPanelEvents } from "./floating-panel.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { FloatingPanelContext } from "./floating-panel.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type FPAssign<K extends keyof FloatingPanelEvents = keyof FloatingPanelEvents> = AssignFor<FloatingPanelContext, FloatingPanelEvents, K>;
 export declare const clearDragFrom: FPAssign;
 export declare const clearResizeFrom: FPAssign;
@@ -18,5 +18,4 @@ export declare const restoreResizeGeometry: FPAssign;
 export declare const closeOnEscape: GuardFor<FloatingPanelContext, FloatingPanelEvents>;
 export declare const canDrag: GuardFor<FloatingPanelContext, FloatingPanelEvents>;
 export declare const canResize: GuardFor<FloatingPanelContext, FloatingPanelEvents>;
-export {};
-//# sourceMappingURL=floating-panel.transitions.d.ts.map
+export {};