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

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

@@ -1,55 +1,55 @@
 <script lang="ts">
   import { floatingPanel } from "../floating-panel.presentation.js";
 
-  const machine = floatingPanel({ defaultOpen: true });
+  const machine = floatingPanel({ defaultOpen: true, size: "{\"w\":300,\"h\":380}", minSize: "{\"w\":260,\"h\":360}", maxSize: "{\"w\":480,\"h\":520}" });
 </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 calculator</button>
+  <div class={["relative w-full", { "h-[25rem]": 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">Calculator</span>
+          <span class="i-lucide-grip-vertical shrink-0 type-code text-muted" aria-hidden="true"></span>
+          <span class="truncate type-label">Calculator</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 content-start gap-3 p-4">
-        <output data-display class="rounded-lg border border-solid border-border bg-surface-sunken p-4 text-right font-mono text-2xl font-bold text-text tabular-nums">0</output>
+      <div class="grid flex-1 content-start gap-2 p-3">
+        <output data-display class="rounded-md border bg-surface-sunken px-3 py-2 text-right type-title tabular-nums">0</output>
         <div class="grid grid-cols-4 gap-2">
-          <button type="button" data-key="C" data-act="clear" class="danger flex h-12 min-h-0 items-center justify-center">C</button>
-          <button type="button" data-key="±" data-act="negate" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">±</button>
-          <button type="button" data-key="%" data-act="percent" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">%</button>
-          <button type="button" data-key="÷" data-act="op" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg bg-semantic-warning font-medium text-on-semantic-warning hover:bg-semantic-warning">÷</button>
-          <button type="button" data-key="7" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">7</button>
-          <button type="button" data-key="8" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">8</button>
-          <button type="button" data-key="9" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">9</button>
-          <button type="button" data-key="×" data-act="op" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg bg-semantic-warning font-medium text-on-semantic-warning hover:bg-semantic-warning">×</button>
-          <button type="button" data-key="4" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">4</button>
-          <button type="button" data-key="5" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">5</button>
-          <button type="button" data-key="6" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">6</button>
-          <button type="button" data-key="−" data-act="op" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg bg-semantic-warning font-medium text-on-semantic-warning hover:bg-semantic-warning">−</button>
-          <button type="button" data-key="1" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">1</button>
-          <button type="button" data-key="2" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">2</button>
-          <button type="button" data-key="3" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">3</button>
-          <button type="button" data-key="+" data-act="op" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg bg-semantic-warning font-medium text-on-semantic-warning hover:bg-semantic-warning">+</button>
-          <button data-key="0" data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">0</button>
-          <button data-key="." data-act="digit" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg border border-solid border-border bg-surface p-0 font-medium text-text hover:bg-surface-sunken">.</button>
-          <button data-key="=" data-act="eq" class="bare flex h-12 min-h-0 items-center justify-center rounded-lg bg-semantic-warning font-medium text-on-semantic-warning hover:bg-semantic-warning">=</button>
+          <button type="button" data-key="C" data-act="clear" class="danger flex h-10 min-h-0 items-center justify-center">C</button>
+          <button type="button" data-key="±" data-act="negate" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">±</button>
+          <button type="button" data-key="%" data-act="percent" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">%</button>
+          <button type="button" data-key="÷" data-act="op" class="bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary">÷</button>
+          <button type="button" data-key="7" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">7</button>
+          <button type="button" data-key="8" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">8</button>
+          <button type="button" data-key="9" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">9</button>
+          <button type="button" data-key="×" data-act="op" class="bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary">×</button>
+          <button type="button" data-key="4" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">4</button>
+          <button type="button" data-key="5" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">5</button>
+          <button type="button" data-key="6" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">6</button>
+          <button type="button" data-key="−" data-act="op" class="bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary">−</button>
+          <button type="button" data-key="1" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">1</button>
+          <button type="button" data-key="2" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">2</button>
+          <button type="button" data-key="3" data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">3</button>
+          <button type="button" data-key="+" data-act="op" class="bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary">+</button>
+          <button type="button" data-key="0" data-act="digit" class="bare col-span-2 flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">0</button>
+          <button type="button" data-key="." data-act="digit" class="bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken">.</button>
+          <button type="button" data-key="=" data-act="eq" class="bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary">=</button>
         </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/calculator.html.js

@@ -0,0 +1,5 @@
+// src/floating-panel/examples/calculator.html
+var calculator_default = "<script lang=\"ts\">\n  import { floatingPanel } from \"../floating-panel.presentation.ts\";\n\n  const machine = floatingPanel({ defaultOpen: true, size: \"{\\\"w\\\":300,\\\"h\\\":380}\", minSize: \"{\\\"w\\\":260,\\\"h\\\":360}\", maxSize: \"{\\\"w\\\":480,\\\"h\\\":520}\" });\n<\/script>\n\n<div class=\"grid w-full justify-items-center gap-2\">\n  <button class=\"s-sm w-fit\" {...machine.getTriggerProps()}>Open calculator</button>\n  <div class={[\"relative w-full\", { \"h-[25rem]\": 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\">Calculator</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 flex-1 content-start gap-2 p-3\">\n        <output data-display class=\"rounded-md border bg-surface-sunken px-3 py-2 text-right type-title tabular-nums\">0</output>\n        <div class=\"grid grid-cols-4 gap-2\">\n          <button type=\"button\" data-key=\"C\" data-act=\"clear\" class=\"danger flex h-10 min-h-0 items-center justify-center\">C</button>\n          <button type=\"button\" data-key=\"±\" data-act=\"negate\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">±</button>\n          <button type=\"button\" data-key=\"%\" data-act=\"percent\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">%</button>\n          <button type=\"button\" data-key=\"÷\" data-act=\"op\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary\">÷</button>\n          <button type=\"button\" data-key=\"7\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">7</button>\n          <button type=\"button\" data-key=\"8\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">8</button>\n          <button type=\"button\" data-key=\"9\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">9</button>\n          <button type=\"button\" data-key=\"×\" data-act=\"op\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary\">×</button>\n          <button type=\"button\" data-key=\"4\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">4</button>\n          <button type=\"button\" data-key=\"5\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">5</button>\n          <button type=\"button\" data-key=\"6\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">6</button>\n          <button type=\"button\" data-key=\"−\" data-act=\"op\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary\">−</button>\n          <button type=\"button\" data-key=\"1\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">1</button>\n          <button type=\"button\" data-key=\"2\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">2</button>\n          <button type=\"button\" data-key=\"3\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">3</button>\n          <button type=\"button\" data-key=\"+\" data-act=\"op\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary\">+</button>\n          <button type=\"button\" data-key=\"0\" data-act=\"digit\" class=\"bare col-span-2 flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">0</button>\n          <button type=\"button\" data-key=\".\" data-act=\"digit\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md border bg-surface p-0 type-label hover:bg-surface-sunken\">.</button>\n          <button type=\"button\" data-key=\"=\" data-act=\"eq\" class=\"bare flex h-10 min-h-0 items-center justify-center rounded-md bg-primary p-0 type-label text-on-primary\">=</button>\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 { calculator_default as default };
+
+//# sourceMappingURL=calculator.html.js.map

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

@@ -1,44 +1,44 @@
 <script lang="ts">
   import { floatingPanel } from "../floating-panel.presentation.js";
 
-  const machine = floatingPanel({ defaultOpen: true });
+  const machine = floatingPanel({ defaultOpen: true, size: "{\"w\":360,\"h\":340}", minSize: "{\"w\":280,\"h\":260}", maxSize: "{\"w\":540,\"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 chat</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">Customer Support</span>
+          <span class="i-lucide-grip-vertical shrink-0 type-code text-muted" aria-hidden="true"></span>
+          <span class="truncate type-label">Customer Support</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="flex items-center gap-2 border-b border-border px-4 py-2">
-          <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-medium text-on-primary">CS</span>
-          <div class="min-w-0"><p class="text-sm font-medium text-text">Customer Support</p><p class="text-xs text-semantic-success">Online</p></div>
+      <div class="flex items-center gap-2 border-b border px-4 py-2">
+          <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary type-caption-emphasized text-on-primary">CS</span>
+          <div class="min-w-0"><p>Customer Support</p><p class="text-semantic-success">Online</p></div>
         </div>
-<div data-messages class="grid flex-1 content-start gap-2 overflow-y-auto p-4 text-sm">
-        <div class="max-w-[80%] rounded-md rounded-sm bg-surface px-3 py-2 text-text">Hello! How can I help you today?</div>
+<div data-messages class="grid flex-1 content-start gap-2 overflow-y-auto p-4 type-body">
+        <div class="max-w-[80%] rounded-md rounded-sm bg-surface px-3 py-2">Hello! How can I help you today?</div>
         <div class="max-w-[80%] justify-self-end rounded-md rounded-sm bg-primary px-3 py-2 text-on-primary">Hi, I have a question about your product.</div>
-        <div class="max-w-[80%] rounded-md rounded-sm bg-surface px-3 py-2 text-text">Happy to help! What would you like to know?</div>
+        <div class="max-w-[80%] rounded-md rounded-sm bg-surface px-3 py-2">Happy to help! What would you like to know?</div>
       </div>
-      <div class="flex gap-2 border-t border-border bg-surface p-3">
-        <input data-chat-input type="text" placeholder="Type a message…" class="bare min-w-0 flex-1 px-3 py-2" />
-        <button data-send class="bare flex h-8 max-h-8 min-h-0 w-8 items-center justify-center hover:bg-primary"><span class="i-lucide-send text-sm" aria-hidden="true"></span></button>
+      <div class="flex gap-2 border-t border bg-surface p-3">
+        <input data-chat-input type="text" placeholder="Type a message…" class="bare min-w-0 flex-1 px-3 py-2">
+        <button data-send class="bare flex h-8 max-h-8 min-h-0 w-8 items-center justify-center hover:bg-primary hover:text-on-primary"><span class="i-lucide-send type-code" aria-hidden="true"></span></button>
       </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/chat.html.js

@@ -0,0 +1,5 @@
+// src/floating-panel/examples/chat.html
+var chat_default = "<script lang=\"ts\">\n  import { floatingPanel } from \"../floating-panel.presentation.ts\";\n\n  const machine = floatingPanel({ defaultOpen: true, size: \"{\\\"w\\\":360,\\\"h\\\":340}\", minSize: \"{\\\"w\\\":280,\\\"h\\\":260}\", maxSize: \"{\\\"w\\\":540,\\\"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 chat</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\">Customer Support</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=\"flex items-center gap-2 border-b border px-4 py-2\">\n          <span class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary type-caption-emphasized text-on-primary\">CS</span>\n          <div class=\"min-w-0\"><p>Customer Support</p><p class=\"text-semantic-success\">Online</p></div>\n        </div>\n<div data-messages class=\"grid flex-1 content-start gap-2 overflow-y-auto p-4 type-body\">\n        <div class=\"max-w-[80%] rounded-md rounded-sm bg-surface px-3 py-2\">Hello! How can I help you today?</div>\n        <div class=\"max-w-[80%] justify-self-end rounded-md rounded-sm bg-primary px-3 py-2 text-on-primary\">Hi, I have a question about your product.</div>\n        <div class=\"max-w-[80%] rounded-md rounded-sm bg-surface px-3 py-2\">Happy to help! What would you like to know?</div>\n      </div>\n      <div class=\"flex gap-2 border-t border bg-surface p-3\">\n        <input data-chat-input type=\"text\" placeholder=\"Type a message…\" class=\"bare min-w-0 flex-1 px-3 py-2\">\n        <button data-send class=\"bare flex h-8 max-h-8 min-h-0 w-8 items-center justify-center hover:bg-primary hover:text-on-primary\"><span class=\"i-lucide-send type-code\" aria-hidden=\"true\"></span></button>\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 { chat_default as default };
+
+//# sourceMappingURL=chat.html.js.map

package/dist/floating-panel/examples/media-player.html

@@ -1,53 +1,53 @@
 <script lang="ts">
   import { floatingPanel } from "../floating-panel.presentation.js";
 
-  const machine = floatingPanel({ defaultOpen: true });
+  const machine = floatingPanel({ defaultOpen: true, size: "{\"w\":340,\"h\":280}", minSize: "{\"w\":280,\"h\":240}", maxSize: "{\"w\":520,\"h\":400}" });
 </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 player</button>
+  <div class={["relative w-full", { "h-[20rem]": 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">Media Player</span>
+          <span class="i-lucide-grip-vertical shrink-0 type-code text-muted" aria-hidden="true"></span>
+          <span class="truncate type-label">Media Player</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.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.getCloseTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button></div>
       </div>
-      <div class="grid flex-1 content-start gap-4 overflow-y-auto bg-surface-sunken p-4 text-text">
+      <div class="grid flex-1 content-start gap-4 overflow-y-auto bg-surface-sunken p-4">
         <div class="flex items-center gap-3">
-          <span class="flex h-14 w-14 shrink-0 items-center justify-center rounded-lg bg-secondary text-on-secondary shadow-lg"><span class="i-lucide-volume-2 text-lg" aria-hidden="true"></span></span>
+          <span class="flex h-14 w-14 shrink-0 items-center justify-center rounded-lg bg-secondary text-on-secondary shadow-lg"><span class="i-lucide-volume-2 type-lead" aria-hidden="true"></span></span>
           <div class="min-w-0 flex-1">
-            <strong class="truncate text-sm">Midnight Drive</strong>
-            <p class="truncate text-xs text-text-muted">Neon Coast</p>
+            <strong class="truncate type-label">Midnight Drive</strong>
+            <p class="truncate text-muted">Neon Coast</p>
           </div>
           <button type="button" data-fav class="ghost icon s-sm text-semantic-error"><span class="i-lucide-heart icon-sm" aria-hidden="true"></span></button>
         </div>
         <div class="grid gap-1">
           <div class="h-1 overflow-hidden rounded-full bg-surface"><div data-progress class="h-full w-1/3 rounded-full bg-primary"></div></div>
-          <div class="flex justify-between text-xs text-text-muted"><span data-elapsed>1:12</span><span>3:48</span></div>
+          <div class="flex justify-between type-caption text-muted"><span data-elapsed>1:12</span><span>3:48</span></div>
         </div>
         <div class="flex items-center justify-center gap-4">
-          <button type="button" class="ghost icon s-sm text-text-muted"><span class="i-lucide-shuffle text-sm" aria-hidden="true"></span></button>
-          <button type="button" class="ghost icon s-sm text-text-muted"><span class="i-lucide-skip-back icon-sm" aria-hidden="true"></span></button>
+          <button type="button" class="ghost icon s-sm text-muted"><span class="i-lucide-shuffle type-code" aria-hidden="true"></span></button>
+          <button type="button" class="ghost icon s-sm text-muted"><span class="i-lucide-skip-back icon-sm" aria-hidden="true"></span></button>
           <button type="button" data-play class="bare flex h-12 max-h-12 min-h-0 w-12 items-center justify-center rounded-full bg-surface-raised shadow-lg"><span class="i-lucide-play icon-md" aria-hidden="true"></span></button>
-          <button type="button" class="ghost icon s-sm text-text-muted"><span class="i-lucide-skip-forward icon-sm" aria-hidden="true"></span></button>
-          <button type="button" class="ghost icon s-sm text-text-muted"><span class="i-lucide-repeat text-sm" aria-hidden="true"></span></button>
+          <button type="button" class="ghost icon s-sm text-muted"><span class="i-lucide-skip-forward icon-sm" aria-hidden="true"></span></button>
+          <button type="button" class="ghost icon s-sm text-muted"><span class="i-lucide-repeat type-code" aria-hidden="true"></span></button>
         </div>
         <div class="flex items-center gap-3">
-          <span class="i-lucide-volume-2 text-sm text-text-muted" aria-hidden="true"></span>
+          <span class="i-lucide-volume-2 type-code text-muted" aria-hidden="true"></span>
           <div class="h-1 flex-1 overflow-hidden rounded-full bg-surface"><div class="h-full w-3/4 rounded-full bg-primary"></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/media-player.html.js

@@ -0,0 +1,5 @@
+// src/floating-panel/examples/media-player.html
+var media_player_default = "<script lang=\"ts\">\n  import { floatingPanel } from \"../floating-panel.presentation.ts\";\n\n  const machine = floatingPanel({ defaultOpen: true, size: \"{\\\"w\\\":340,\\\"h\\\":280}\", minSize: \"{\\\"w\\\":280,\\\"h\\\":240}\", maxSize: \"{\\\"w\\\":520,\\\"h\\\":400}\" });\n<\/script>\n\n<div class=\"grid w-full justify-items-center gap-2\">\n  <button class=\"s-sm w-fit\" {...machine.getTriggerProps()}>Open player</button>\n  <div class={[\"relative w-full\", { \"h-[20rem]\": 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\">Media Player</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.getCloseTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button></div>\n      </div>\n      <div class=\"grid flex-1 content-start gap-4 overflow-y-auto bg-surface-sunken p-4\">\n        <div class=\"flex items-center gap-3\">\n          <span class=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-lg bg-secondary text-on-secondary shadow-lg\"><span class=\"i-lucide-volume-2 type-lead\" aria-hidden=\"true\"></span></span>\n          <div class=\"min-w-0 flex-1\">\n            <strong class=\"truncate type-label\">Midnight Drive</strong>\n            <p class=\"truncate text-muted\">Neon Coast</p>\n          </div>\n          <button type=\"button\" data-fav class=\"ghost icon s-sm text-semantic-error\"><span class=\"i-lucide-heart icon-sm\" aria-hidden=\"true\"></span></button>\n        </div>\n        <div class=\"grid gap-1\">\n          <div class=\"h-1 overflow-hidden rounded-full bg-surface\"><div data-progress class=\"h-full w-1/3 rounded-full bg-primary\"></div></div>\n          <div class=\"flex justify-between type-caption text-muted\"><span data-elapsed>1:12</span><span>3:48</span></div>\n        </div>\n        <div class=\"flex items-center justify-center gap-4\">\n          <button type=\"button\" class=\"ghost icon s-sm text-muted\"><span class=\"i-lucide-shuffle type-code\" aria-hidden=\"true\"></span></button>\n          <button type=\"button\" class=\"ghost icon s-sm text-muted\"><span class=\"i-lucide-skip-back icon-sm\" aria-hidden=\"true\"></span></button>\n          <button type=\"button\" data-play class=\"bare flex h-12 max-h-12 min-h-0 w-12 items-center justify-center rounded-full bg-surface-raised shadow-lg\"><span class=\"i-lucide-play icon-md\" aria-hidden=\"true\"></span></button>\n          <button type=\"button\" class=\"ghost icon s-sm text-muted\"><span class=\"i-lucide-skip-forward icon-sm\" aria-hidden=\"true\"></span></button>\n          <button type=\"button\" class=\"ghost icon s-sm text-muted\"><span class=\"i-lucide-repeat type-code\" aria-hidden=\"true\"></span></button>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <span class=\"i-lucide-volume-2 type-code text-muted\" aria-hidden=\"true\"></span>\n          <div class=\"h-1 flex-1 overflow-hidden rounded-full bg-surface\"><div class=\"h-full w-3/4 rounded-full bg-primary\"></div></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 { media_player_default as default };
+
+//# sourceMappingURL=media-player.html.js.map

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

@@ -1,59 +1,59 @@
 <script lang="ts">
   import { floatingPanel } from "../floating-panel.presentation.js";
 
-  const machine = floatingPanel({ defaultOpen: true });
+  const machine = floatingPanel({ defaultOpen: true, size: "{\"w\":540,\"h\":320}", minSize: "{\"w\":380,\"h\":240}", maxSize: "{\"w\":760,\"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 notes</button>
+  <div class={["relative w-full", { "h-[22rem]": 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">Notes</span>
+          <span class="i-lucide-grip-vertical shrink-0 type-code text-muted" aria-hidden="true"></span>
+          <span class="truncate type-label">Notes</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 grid-cols-[13rem_1fr] overflow-hidden">
-        <div class="grid min-h-0 content-start gap-2 overflow-y-auto border-r border-border bg-surface p-3">
-          <div class="flex items-center gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-2 text-xs text-text-muted"><span class="i-lucide-search text-sm" aria-hidden="true"></span><span>Search notes…</span></div>
-          <button type="button" data-new class="bare s-sm flex min-h-0 items-center justify-center gap-1 font-medium hover:bg-primary"><span class="i-lucide-plus text-sm" aria-hidden="true"></span>New Note</button>
+        <div class="grid min-h-0 content-start gap-2 overflow-y-auto border-r border bg-surface p-3">
+          <div class="flex items-center gap-2 rounded-md border bg-surface-raised px-3 py-2 type-caption text-muted"><span class="i-lucide-search type-code" aria-hidden="true"></span><span>Search notes…</span></div>
+          <button type="button" data-new class="primary s-sm w-full justify-center"><span class="i-lucide-plus icon-sm" aria-hidden="true"></span>New Note</button>
           <div data-notes class="grid content-start gap-1">
-            <button type="button" data-note="0" class="bare secondary grid justify-items-start gap-1 whitespace-normal text-left">
-              <p class="text-sm font-medium text-text">Meeting Notes</p>
-              <p class="text-xs text-text-muted">Discussed project timeline and deliverables…</p>
-              <p class="text-xs text-text-muted">Today</p>
+            <button type="button" data-note="0" class="bare grid justify-items-start gap-1 whitespace-normal rounded-md bg-surface-raised p-3 text-left">
+              <span class="type-label">Meeting Notes</span>
+              <span class="type-caption text-muted">Discussed project timeline and deliverables…</span>
+              <span class="type-caption text-muted">Today</span>
             </button>
             <button type="button" data-note="1" class="bare grid justify-items-start gap-1 whitespace-normal p-3 text-left hover:bg-surface">
-              <p class="text-sm font-medium text-text">Ideas</p>
-              <p class="text-xs text-text-muted">New feature ideas for the dashboard…</p>
-              <p class="text-xs text-text-muted">Yesterday</p>
+              <p>Ideas</p>
+              <p class="text-muted">New feature ideas for the dashboard…</p>
+              <p class="text-muted">Yesterday</p>
             </button>
             <button type="button" data-note="2" class="bare grid justify-items-start gap-1 whitespace-normal p-3 text-left hover:bg-surface">
-              <p class="text-sm font-medium text-text">Shopping List</p>
-              <p class="text-xs text-text-muted">Milk, Bread, Eggs, Coffee beans…</p>
-              <p class="text-xs text-text-muted">2 days ago</p>
+              <p>Shopping List</p>
+              <p class="text-muted">Milk, Bread, Eggs, Coffee beans…</p>
+              <p class="text-muted">2 days ago</p>
             </button>
           </div>
         </div>
 <div class="grid min-h-0 content-start gap-3 overflow-y-auto p-4">
-          <p class="flex items-center gap-2 text-xs text-text-muted"><span class="i-lucide-pencil text-sm" aria-hidden="true"></span><span data-edited>Last edited Today</span></p>
-          <input data-title value="Meeting Notes" class="bare w-full min-w-0 border-transparent bg-transparent py-1 font-semibold hover:border-border focus:border-primary" />
-          <textarea data-body rows="6" class="bare min-h-0 w-full resize-none border-transparent bg-transparent py-1 hover:border-border focus:border-primary">Discussed project timeline and deliverables…</textarea>
+          <p class="flex items-center gap-2 text-muted"><span class="i-lucide-pencil type-code" aria-hidden="true"></span><span data-edited>Last edited Today</span></p>
+          <input data-title value="Meeting Notes" class="bare w-full min-w-0 border-transparent bg-transparent py-1 type-body-emphasized hover:border focus:border-primary">
+          <textarea data-body rows="6" class="bare min-w-0 w-full resize-none border-transparent bg-transparent py-1 hover:border focus:border-primary">Discussed project timeline and deliverables…</textarea>
         </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/notes.html.js

@@ -0,0 +1,5 @@
+// src/floating-panel/examples/notes.html
+var notes_default = "<script lang=\"ts\">\n  import { floatingPanel } from \"../floating-panel.presentation.ts\";\n\n  const machine = floatingPanel({ defaultOpen: true, size: \"{\\\"w\\\":540,\\\"h\\\":320}\", minSize: \"{\\\"w\\\":380,\\\"h\\\":240}\", maxSize: \"{\\\"w\\\":760,\\\"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 notes</button>\n  <div class={[\"relative w-full\", { \"h-[22rem]\": 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\">Notes</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 grid-cols-[13rem_1fr] overflow-hidden\">\n        <div class=\"grid min-h-0 content-start gap-2 overflow-y-auto border-r border bg-surface p-3\">\n          <div class=\"flex items-center gap-2 rounded-md border bg-surface-raised px-3 py-2 type-caption text-muted\"><span class=\"i-lucide-search type-code\" aria-hidden=\"true\"></span><span>Search notes…</span></div>\n          <button type=\"button\" data-new class=\"primary s-sm w-full justify-center\"><span class=\"i-lucide-plus icon-sm\" aria-hidden=\"true\"></span>New Note</button>\n          <div data-notes class=\"grid content-start gap-1\">\n            <button type=\"button\" data-note=\"0\" class=\"bare grid justify-items-start gap-1 whitespace-normal rounded-md bg-surface-raised p-3 text-left\">\n              <span class=\"type-label\">Meeting Notes</span>\n              <span class=\"type-caption text-muted\">Discussed project timeline and deliverables…</span>\n              <span class=\"type-caption text-muted\">Today</span>\n            </button>\n            <button type=\"button\" data-note=\"1\" class=\"bare grid justify-items-start gap-1 whitespace-normal p-3 text-left hover:bg-surface\">\n              <p>Ideas</p>\n              <p class=\"text-muted\">New feature ideas for the dashboard…</p>\n              <p class=\"text-muted\">Yesterday</p>\n            </button>\n            <button type=\"button\" data-note=\"2\" class=\"bare grid justify-items-start gap-1 whitespace-normal p-3 text-left hover:bg-surface\">\n              <p>Shopping List</p>\n              <p class=\"text-muted\">Milk, Bread, Eggs, Coffee beans…</p>\n              <p class=\"text-muted\">2 days ago</p>\n            </button>\n          </div>\n        </div>\n<div class=\"grid min-h-0 content-start gap-3 overflow-y-auto p-4\">\n          <p class=\"flex items-center gap-2 text-muted\"><span class=\"i-lucide-pencil type-code\" aria-hidden=\"true\"></span><span data-edited>Last edited Today</span></p>\n          <input data-title value=\"Meeting Notes\" class=\"bare w-full min-w-0 border-transparent bg-transparent py-1 type-body-emphasized hover:border focus:border-primary\">\n          <textarea data-body rows=\"6\" class=\"bare min-w-0 w-full resize-none border-transparent bg-transparent py-1 hover:border focus:border-primary\">Discussed project timeline and deliverables…</textarea>\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 { notes_default as default };
+
+//# sourceMappingURL=notes.html.js.map