@spinjs/components 0.0.0-stage → 0.1.0-preview.1

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { floatingPanel } from "../floating-panel.presentation.js";
+
+  const machine = floatingPanel({size: "{\"w\":320,\"h\":240}", minSize: "{\"w\":280,\"h\":180}", maxSize: "{\"w\":500,\"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="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">Basic Panel</span>
+        </div>
+        <div class="flex shrink-0 items-center gap-1"><button class="ghost flex h-6 max-h-6 min-h-0 w-6 items-center justify-center p-0 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 flex h-6 max-h-6 min-h-0 w-6 items-center justify-center p-0 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 flex h-6 max-h-6 min-h-0 w-6 items-center justify-center p-0 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 flex h-6 max-h-6 min-h-0 w-6 items-center justify-center p-0 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>
+      <div class="grid content-start gap-2 p-4">
+        <p class="text-sm text-text">A panel that moves, resizes, minimizes, and closes.</p>
+        <ul class="grid gap-1 text-sm text-text-muted">
+          <li>Draggable header</li>
+          <li>Resizable edges</li>
+          <li>Minimize, maximize, restore</li>
+          <li>Close and Escape</li>
+        </ul>
+      </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>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { floatingPanel } from "../floating-panel.presentation.js";
+
+  const machine = floatingPanel({ defaultOpen: true });
+</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="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>
+        </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>
+      <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 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>
+        </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>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { floatingPanel } from "../floating-panel.presentation.js";
+
+  const machine = floatingPanel({ defaultOpen: true });
+</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="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>
+        </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>
+      <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>
+<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 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>
+      <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>
+            <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>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { floatingPanel } from "../floating-panel.presentation.js";
+
+  const machine = floatingPanel({ defaultOpen: true });
+</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="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>
+        </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>
+      <div class="grid flex-1 content-start gap-4 overflow-y-auto bg-surface-sunken p-4 text-text">
+        <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>
+          <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>
+          </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>
+        <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" 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>
+        </div>
+        <div class="flex items-center gap-3">
+          <span class="i-lucide-volume-2 text-sm text-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>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { floatingPanel } from "../floating-panel.presentation.js";
+
+  const machine = floatingPanel({ defaultOpen: true });
+</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="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>
+        </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>
+<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 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>
+            <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>
+            </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>
+            </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>
+        </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>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { floatingPanel } from "../floating-panel.presentation.js";
+
+  const machine = floatingPanel({ defaultOpen: true });
+</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="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>
+        </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>
+<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>
+          <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>
+            <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>
+          <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>
+            <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>
+          <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>
+            <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>
+            <p data-freed class="hidden text-xs 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>
+          </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>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { floatingPanel } from "../floating-panel.presentation.js";
+
+  const machine = floatingPanel({ defaultOpen: true });
+</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="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>
+        </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>
+<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>
+          <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>
+        </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>
+        </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>
+          </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>
+          </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>
+          </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>
+          </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="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>
+          </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>
+        </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>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { floatingPanel } from "../floating-panel.presentation.js";
+
+  const machine = floatingPanel({ defaultOpen: true });
+</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 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>
+        </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>
+      <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>
+        </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>
+        <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>
+        </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>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,45 @@
+import { FloatingPanelSize, FloatingPanelStage } from "./floating-panel.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface FloatingPanelEvents {
+  "OPEN": {};
+  "CLOSE": {};
+  "DRAG.START": {};
+  "DRAG.MOVE": {
+    dx: number;
+    dy: number;
+  };
+  "DRAG.END": {};
+  "RESIZE.START": {
+    x: -1 | 0 | 1;
+    y: -1 | 0 | 1;
+  };
+  "RESIZE.MOVE": {
+    dx: number;
+    dy: number;
+  };
+  "RESIZE.END": {};
+  "ESCAPE": {};
+  "MINIMIZE": {};
+  "MAXIMIZE": {};
+  "RESTORE": {};
+  "SIZE.SET": {
+    size: FloatingPanelSize | string;
+  };
+}
+export type FloatingPanelEvent = EventUnion<FloatingPanelEvents>;
+export interface FloatingPanelOpenChange {
+  readonly open: boolean;
+}
+export interface FloatingPanelSizeChange {
+  readonly size: FloatingPanelSize;
+}
+export interface FloatingPanelPositionChange {
+  readonly position: {
+    readonly x: number;
+    readonly y: number;
+  };
+}
+export interface FloatingPanelStageChange {
+  readonly stage: FloatingPanelStage;
+}
+//# sourceMappingURL=floating-panel.events.d.ts.map

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+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";
+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