@skdx/vue 0.26.0 → 0.28.0

package/dist/floating-panel/FloatingPanelHeader.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,useDirection as a}from"../utils/direction.js";import{FLOATING_PANEL_CONTEXT as n}from"./context.js";import{computed as t,createElementBlock as o,defineComponent as r,inject as l,normalizeStyle as i,openBlock as d,ref as u,renderSlot as s,unref as c}from"vue";var v=["data-dragging","data-disabled","tabindex"],g=/* @__PURE__ */r({__name:"FloatingPanelHeader",setup(r){const g=l(n);if(!g)throw new Error("SkdxFloatingPanelHeader must be used within SkdxFloatingPanel.");const f=a(),p=u(null),m=u(!1),y=t(()=>g.draggable.value&&!g.disabled.value);function x(e){y.value&&(e.currentTarget.setPointerCapture?.(e.pointerId),p.value={x:e.clientX,y:e.clientY},g.setDragging(!0))}function w(e){const a=p.value;!y.value||!a||(g.moveBy(e.clientX-a.x,e.clientY-a.y),p.value={x:e.clientX,y:e.clientY})}function P(e){p.value&&(e.currentTarget.releasePointerCapture?.(e.pointerId),p.value=null,g.setDragging(!1),g.announceRelease("move"))}function b(a){if(!y.value)return;const n=g.step.value*(a.shiftKey?10:1),t=e(a.key,a.currentTarget,f()),o="ArrowLeft"===t?{dx:-n,dy:0}:"ArrowRight"===t?{dx:n,dy:0}:"ArrowUp"===t?{dx:0,dy:-n}:"ArrowDown"===t?{dx:0,dy:n}:null;o&&(a.preventDefault(),m.value=!0,g.moveBy(o.dx,o.dy))}function h(){m.value&&(m.value=!1,g.announceRelease("move"))}return(e,a)=>(d(),o("div",{class:"skdx-floating-panel__header","data-part":"header","data-dragging":c(g).dragging.value?"":void 0,"data-disabled":c(g).disabled.value?"":void 0,tabindex:y.value?0:void 0,style:i({touchAction:"none",cursor:y.value?"move":void 0}),onPointerdown:x,onPointermove:w,onPointerup:P,onPointercancel:P,onKeydown:b,onKeyup:h},[s(e.$slots,"default")],44,v))}});export{g as default};
+import{directionalKey as e,useDirection as a}from"../utils/direction.js";import{FLOATING_PANEL_CONTEXT as n}from"./context.js";import{computed as t,createElementBlock as r,defineComponent as o,inject as i,normalizeStyle as l,openBlock as d,ref as u,renderSlot as s,unref as c}from"vue";var v=["data-dragging","data-disabled","aria-disabled","aria-keyshortcuts","tabindex"],g=/* @__PURE__ */o({__name:"FloatingPanelHeader",setup(o){const g=i(n);if(!g)throw new Error("SkdxFloatingPanelHeader must be used within SkdxFloatingPanel.");const f=a(),p=u(null),y=u(!1),m=t(()=>g.draggable.value&&!g.disabled.value);function w(e){m.value&&(e.currentTarget.setPointerCapture?.(e.pointerId),p.value={x:e.clientX,y:e.clientY},g.setDragging(!0))}function x(e){const a=p.value;!m.value||!a||(g.moveBy(e.clientX-a.x,e.clientY-a.y),p.value={x:e.clientX,y:e.clientY})}function b(e){p.value&&(e.currentTarget.releasePointerCapture?.(e.pointerId),p.value=null,g.setDragging(!1),g.announceRelease("move"))}function A(a){if(!m.value)return;const n=g.step.value*(a.shiftKey?10:1),t=e(a.key,a.currentTarget,f()),r="ArrowLeft"===t?{dx:-n,dy:0}:"ArrowRight"===t?{dx:n,dy:0}:"ArrowUp"===t?{dx:0,dy:-n}:"ArrowDown"===t?{dx:0,dy:n}:null;r&&(a.preventDefault(),y.value=!0,g.moveBy(r.dx,r.dy))}function h(){y.value&&(y.value=!1,g.announceRelease("move"))}return(e,a)=>(d(),r("div",{class:"skdx-floating-panel__header","data-part":"header","data-dragging":c(g).dragging.value?"":void 0,"data-disabled":c(g).disabled.value?"":void 0,"aria-disabled":c(g).disabled.value||void 0,"aria-keyshortcuts":c(g).draggable.value?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,tabindex:c(g).draggable.value?0:void 0,style:l({touchAction:"none",cursor:m.value?"move":void 0}),onPointerdown:w,onPointermove:x,onPointerup:b,onPointercancel:b,onKeydown:A,onKeyup:h},[s(e.$slots,"default")],44,v))}});export{g as default};

package/dist/floating-panel/FloatingPanelPortal.vue.d.cts

@@ -1,9 +1,9 @@
 import type { PortalContainer } from '../utils/portal.cjs';
 /**
  * Teleports `SkdxFloatingPanelContent` to `document.body` (or a custom
- * `container`), so a movable window is not clipped by whatever `overflow`
- * ancestor its trigger happens to live in. Mounts only while open unless
- * `forceMount` is set. Must be used inside `SkdxFloatingPanel`.
+ * `container`) so the panel is not clipped by whatever `overflow` ancestor its
+ * trigger lives in. Mounts only while open unless `forceMount` is set. Must
+ * be used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {
     /**

package/dist/floating-panel/FloatingPanelPortal.vue.d.ts

@@ -1,9 +1,9 @@
 import type { PortalContainer } from '../utils/portal.js';
 /**
  * Teleports `SkdxFloatingPanelContent` to `document.body` (or a custom
- * `container`), so a movable window is not clipped by whatever `overflow`
- * ancestor its trigger happens to live in. Mounts only while open unless
- * `forceMount` is set. Must be used inside `SkdxFloatingPanel`.
+ * `container`) so the panel is not clipped by whatever `overflow` ancestor its
+ * trigger lives in. Mounts only while open unless `forceMount` is set. Must
+ * be used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {
     /**

package/dist/floating-panel/FloatingPanelResizeTrigger.vue.d.cts

@@ -1,31 +1,22 @@
 import { type FloatingPanelResizeDirection } from './context.cjs';
 /**
  * One resize grip, for the edge or corner named by `direction`. Render as many
- * as you want handles — eight for a full window, one `"se"` corner for the
- * common case.
+ * as you want — eight for a full window, one `"se"` corner for the common case.
+ * Renders `role="separator"` with `aria-valuenow`/`-min`/`-max` describing the
+ * controlled dimension (width for `e`/`w` and corners, height for `n`/`s`),
+ * plus `aria-orientation`, `data-direction`, `data-resizing`, and `data-disabled`.
  *
- * Renders `role="separator"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the dimension this grip controls (width for `e`/`w` and the
- * corners, height for `n`/`s`), plus `aria-orientation` on the four edges,
- * `data-direction`, `data-resizing`, and `data-disabled`.
- *
- * **Keyboard-operable.** While focused, the arrow keys resize along this grip's
- * own direction — an `"e"` grip ignores the vertical arrows, a `"se"` grip
- * answers to all four — by the root's `step`, or ten times that with Shift.
- * Dragging a `w` or `n` grip moves the panel's origin as well as its size, so
- * the opposite edge stays put. Every result is clamped to `minSize`, `maxSize`,
- * and the boundary. The final size is announced politely once, on release.
- * Under `dir="rtl"` the horizontal arrows mirror.
- *
- * Give it an `aria-label` — a grip announced only as "separator" is not
- * operable by anyone who cannot see where it sits. Must be used inside
- * `SkdxFloatingPanel`.
+ * **Keyboard-operable**: arrow keys resize along this grip's direction by the
+ * root's `step` (or ×10 with Shift). Dragging a `w`/`n` grip moves the
+ * panel's origin so the opposite edge stays put. Every result is clamped to
+ * `minSize`/`maxSize`/the boundary and announced once on release. Mirrors
+ * under `dir="rtl"`. Give it an `aria-label` — a grip announced only as
+ * "separator" isn't operable by anyone who can't see where it sits. Must be
+ * used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {
     /**
-     * Which edge or corner this grip pulls. Corners move two edges at once.
-     * There is no default — a grip that does not say what it resizes cannot
-     * resize anything.
+     * Which edge or corner this grip pulls; corners move two edges at once. No default — a grip must say what it resizes.
      */
     direction: FloatingPanelResizeDirection;
 };

package/dist/floating-panel/FloatingPanelResizeTrigger.vue.d.ts

@@ -1,31 +1,22 @@
 import { type FloatingPanelResizeDirection } from './context.js';
 /**
  * One resize grip, for the edge or corner named by `direction`. Render as many
- * as you want handles — eight for a full window, one `"se"` corner for the
- * common case.
+ * as you want — eight for a full window, one `"se"` corner for the common case.
+ * Renders `role="separator"` with `aria-valuenow`/`-min`/`-max` describing the
+ * controlled dimension (width for `e`/`w` and corners, height for `n`/`s`),
+ * plus `aria-orientation`, `data-direction`, `data-resizing`, and `data-disabled`.
  *
- * Renders `role="separator"` with `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the dimension this grip controls (width for `e`/`w` and the
- * corners, height for `n`/`s`), plus `aria-orientation` on the four edges,
- * `data-direction`, `data-resizing`, and `data-disabled`.
- *
- * **Keyboard-operable.** While focused, the arrow keys resize along this grip's
- * own direction — an `"e"` grip ignores the vertical arrows, a `"se"` grip
- * answers to all four — by the root's `step`, or ten times that with Shift.
- * Dragging a `w` or `n` grip moves the panel's origin as well as its size, so
- * the opposite edge stays put. Every result is clamped to `minSize`, `maxSize`,
- * and the boundary. The final size is announced politely once, on release.
- * Under `dir="rtl"` the horizontal arrows mirror.
- *
- * Give it an `aria-label` — a grip announced only as "separator" is not
- * operable by anyone who cannot see where it sits. Must be used inside
- * `SkdxFloatingPanel`.
+ * **Keyboard-operable**: arrow keys resize along this grip's direction by the
+ * root's `step` (or ×10 with Shift). Dragging a `w`/`n` grip moves the
+ * panel's origin so the opposite edge stays put. Every result is clamped to
+ * `minSize`/`maxSize`/the boundary and announced once on release. Mirrors
+ * under `dir="rtl"`. Give it an `aria-label` — a grip announced only as
+ * "separator" isn't operable by anyone who can't see where it sits. Must be
+ * used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {
     /**
-     * Which edge or corner this grip pulls. Corners move two edges at once.
-     * There is no default — a grip that does not say what it resizes cannot
-     * resize anything.
+     * Which edge or corner this grip pulls; corners move two edges at once. No default — a grip must say what it resizes.
      */
     direction: FloatingPanelResizeDirection;
 };

package/dist/floating-panel/FloatingPanelResizeTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const g=require("../utils/direction.cjs"),P=require("./context.cjs");let n=require("vue");var b=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","data-direction","data-resizing","data-disabled","tabindex"],R=10,T=(0,n.defineComponent)({__name:"FloatingPanelResizeTrigger",props:{direction:{}},setup(p){const r=p,e=(0,n.inject)(P.FLOATING_PANEL_CONTEXT);if(!e)throw new Error("SkdxFloatingPanelResizeTrigger must be used within SkdxFloatingPanel.");const f=g.useDirection(),t=(0,n.ref)(null),l=(0,n.ref)(!1),o=(0,n.computed)(()=>e.resizable.value&&!e.disabled.value),d=(0,n.computed)(()=>r.direction.includes("e")||r.direction.includes("w")),m=(0,n.computed)(()=>d.value?e.size.value.width:e.size.value.height),z=(0,n.computed)(()=>d.value?e.minSize.value.width:e.minSize.value.height),s=(0,n.computed)(()=>d.value?e.maxSize.value.width:e.maxSize.value.height),h=(0,n.computed)(()=>r.direction==="e"||r.direction==="w"?"vertical":r.direction==="n"||r.direction==="s"?"horizontal":void 0);function y(i){o.value&&(i.currentTarget.setPointerCapture?.(i.pointerId),t.value={x:i.clientX,y:i.clientY},e.setResizing(!0))}function x(i){const a=t.value;!o.value||!a||(e.resizeBy(r.direction,i.clientX-a.x,i.clientY-a.y),t.value={x:i.clientX,y:i.clientY})}function v(i){t.value&&(i.currentTarget.releasePointerCapture?.(i.pointerId),t.value=null,e.setResizing(!1),e.announceRelease("resize"))}function _(i){if(!o.value)return;const a=e.step.value*(i.shiftKey?R:1),u=g.directionalKey(i.key,i.currentTarget,f()),c=u==="ArrowLeft"?{dx:-a,dy:0}:u==="ArrowRight"?{dx:a,dy:0}:u==="ArrowUp"?{dx:0,dy:-a}:u==="ArrowDown"?{dx:0,dy:a}:null;c&&(i.preventDefault(),l.value=!0,e.resizeBy(r.direction,c.dx,c.dy))}function w(){l.value&&(l.value=!1,e.announceRelease("resize"))}return(i,a)=>((0,n.openBlock)(),(0,n.createElementBlock)("div",{class:"skdx-floating-panel__resize-trigger","data-part":"resize-trigger",role:"separator","aria-orientation":h.value,"aria-valuenow":Math.round(m.value),"aria-valuemin":Math.round(z.value),"aria-valuemax":Number.isFinite(s.value)?Math.round(s.value):void 0,"aria-disabled":(0,n.unref)(e).disabled.value||void 0,"data-direction":r.direction,"data-resizing":(0,n.unref)(e).resizing.value?"":void 0,"data-disabled":(0,n.unref)(e).disabled.value?"":void 0,tabindex:o.value?0:void 0,style:(0,n.normalizeStyle)({touchAction:"none",cursor:o.value?`${r.direction}-resize`:void 0}),onPointerdown:y,onPointermove:x,onPointerup:v,onPointercancel:v,onKeydown:_,onKeyup:w},[(0,n.renderSlot)(i.$slots,"default")],44,b))}});exports.default=T;
+const h=require("../utils/direction.cjs"),b=require("./context.cjs");let r=require("vue");var P=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","data-direction","data-resizing","data-disabled","aria-keyshortcuts","tabindex"],T=10,R=(0,r.defineComponent)({__name:"FloatingPanelResizeTrigger",props:{direction:{}},setup(p){const a=p,e=(0,r.inject)(b.FLOATING_PANEL_CONTEXT);if(!e)throw new Error("SkdxFloatingPanelResizeTrigger must be used within SkdxFloatingPanel.");const f=h.useDirection(),o=(0,r.ref)(null),d=(0,r.ref)(!1),u=(0,r.computed)(()=>e.resizable.value&&!e.disabled.value),l=(0,r.computed)(()=>a.direction.includes("e")||a.direction.includes("w")),m=(0,r.computed)(()=>l.value?e.size.value.width:e.size.value.height),c=(0,r.computed)(()=>l.value?e.minSize.value.width:e.minSize.value.height),v=(0,r.computed)(()=>{const i=l.value?e.maxSize.value.width:e.maxSize.value.height,n=e.bounds.value,t=n?l.value?n.width-e.position.value.x:n.height-e.position.value.y:Number.POSITIVE_INFINITY;return Math.max(c.value,Math.min(i,t))}),z=(0,r.computed)(()=>a.direction==="e"||a.direction==="w"?"vertical":a.direction==="n"||a.direction==="s"?"horizontal":void 0);function w(i){u.value&&(i.currentTarget.setPointerCapture?.(i.pointerId),o.value={x:i.clientX,y:i.clientY},e.setResizing(!0))}function y(i){const n=o.value;!u.value||!n||(e.resizeBy(a.direction,i.clientX-n.x,i.clientY-n.y),o.value={x:i.clientX,y:i.clientY})}function g(i){o.value&&(i.currentTarget.releasePointerCapture?.(i.pointerId),o.value=null,e.setResizing(!1),e.announceRelease("resize"))}function x(i){if(!u.value)return;const n=e.step.value*(i.shiftKey?T:1),t=h.directionalKey(i.key,i.currentTarget,f()),s=t==="ArrowLeft"?{dx:-n,dy:0}:t==="ArrowRight"?{dx:n,dy:0}:t==="ArrowUp"?{dx:0,dy:-n}:t==="ArrowDown"?{dx:0,dy:n}:null;s&&(i.preventDefault(),d.value=!0,e.resizeBy(a.direction,s.dx,s.dy))}function _(){d.value&&(d.value=!1,e.announceRelease("resize"))}return(i,n)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"skdx-floating-panel__resize-trigger","data-part":"resize-trigger",role:"separator","aria-orientation":z.value,"aria-valuenow":Math.round(m.value),"aria-valuemin":Math.round(c.value),"aria-valuemax":Number.isFinite(v.value)?Math.round(v.value):void 0,"aria-disabled":(0,r.unref)(e).disabled.value||void 0,"data-direction":a.direction,"data-resizing":(0,r.unref)(e).resizing.value?"":void 0,"data-disabled":(0,r.unref)(e).disabled.value?"":void 0,"aria-keyshortcuts":(0,r.unref)(e).resizable.value?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,tabindex:(0,r.unref)(e).resizable.value?0:void 0,style:(0,r.normalizeStyle)({touchAction:"none",cursor:u.value?`${a.direction}-resize`:void 0}),onPointerdown:w,onPointermove:y,onPointerup:g,onPointercancel:g,onKeydown:x,onKeyup:_},[(0,r.renderSlot)(i.$slots,"default")],44,P))}});exports.default=R;

package/dist/floating-panel/FloatingPanelResizeTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,useDirection as i}from"../utils/direction.js";import{FLOATING_PANEL_CONTEXT as a}from"./context.js";import{computed as n,createElementBlock as t,defineComponent as r,inject as o,normalizeStyle as l,openBlock as d,ref as u,renderSlot as s,unref as v}from"vue";var c=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","data-direction","data-resizing","data-disabled","tabindex"],g=/* @__PURE__ */r({__name:"FloatingPanelResizeTrigger",props:{direction:{}},setup(r){const g=r,z=o(a);if(!z)throw new Error("SkdxFloatingPanelResizeTrigger must be used within SkdxFloatingPanel.");const m=i(),p=u(null),f=u(!1),x=n(()=>z.resizable.value&&!z.disabled.value),h=n(()=>g.direction.includes("e")||g.direction.includes("w")),w=n(()=>h.value?z.size.value.width:z.size.value.height),y=n(()=>h.value?z.minSize.value.width:z.minSize.value.height),b=n(()=>h.value?z.maxSize.value.width:z.maxSize.value.height),P=n(()=>"e"===g.direction||"w"===g.direction?"vertical":"n"===g.direction||"s"===g.direction?"horizontal":void 0);function S(e){x.value&&(e.currentTarget.setPointerCapture?.(e.pointerId),p.value={x:e.clientX,y:e.clientY},z.setResizing(!0))}function T(e){const i=p.value;!x.value||!i||(z.resizeBy(g.direction,e.clientX-i.x,e.clientY-i.y),p.value={x:e.clientX,y:e.clientY})}function A(e){p.value&&(e.currentTarget.releasePointerCapture?.(e.pointerId),p.value=null,z.setResizing(!1),z.announceRelease("resize"))}function R(i){if(!x.value)return;const a=z.step.value*(i.shiftKey?10:1),n=e(i.key,i.currentTarget,m()),t="ArrowLeft"===n?{dx:-a,dy:0}:"ArrowRight"===n?{dx:a,dy:0}:"ArrowUp"===n?{dx:0,dy:-a}:"ArrowDown"===n?{dx:0,dy:a}:null;t&&(i.preventDefault(),f.value=!0,z.resizeBy(g.direction,t.dx,t.dy))}function k(){f.value&&(f.value=!1,z.announceRelease("resize"))}return(e,i)=>(d(),t("div",{class:"skdx-floating-panel__resize-trigger","data-part":"resize-trigger",role:"separator","aria-orientation":P.value,"aria-valuenow":Math.round(w.value),"aria-valuemin":Math.round(y.value),"aria-valuemax":Number.isFinite(b.value)?Math.round(b.value):void 0,"aria-disabled":v(z).disabled.value||void 0,"data-direction":g.direction,"data-resizing":v(z).resizing.value?"":void 0,"data-disabled":v(z).disabled.value?"":void 0,tabindex:x.value?0:void 0,style:l({touchAction:"none",cursor:x.value?`${g.direction}-resize`:void 0}),onPointerdown:S,onPointermove:T,onPointerup:A,onPointercancel:A,onKeydown:R,onKeyup:k},[s(e.$slots,"default")],44,c))}});export{g as default};
+import{directionalKey as e,useDirection as i}from"../utils/direction.js";import{FLOATING_PANEL_CONTEXT as a}from"./context.js";import{computed as t,createElementBlock as r,defineComponent as n,inject as o,normalizeStyle as l,openBlock as u,ref as d,renderSlot as s,unref as v}from"vue";var c=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","data-direction","data-resizing","data-disabled","aria-keyshortcuts","tabindex"],g=/* @__PURE__ */n({__name:"FloatingPanelResizeTrigger",props:{direction:{}},setup(n){const g=n,h=o(a);if(!h)throw new Error("SkdxFloatingPanelResizeTrigger must be used within SkdxFloatingPanel.");const m=i(),p=d(null),z=d(!1),w=t(()=>h.resizable.value&&!h.disabled.value),x=t(()=>g.direction.includes("e")||g.direction.includes("w")),f=t(()=>x.value?h.size.value.width:h.size.value.height),y=t(()=>x.value?h.minSize.value.width:h.minSize.value.height),b=t(()=>{const e=x.value?h.maxSize.value.width:h.maxSize.value.height,i=h.bounds.value,a=i?x.value?i.width-h.position.value.x:i.height-h.position.value.y:Number.POSITIVE_INFINITY;return Math.max(y.value,Math.min(e,a))}),A=t(()=>"e"===g.direction||"w"===g.direction?"vertical":"n"===g.direction||"s"===g.direction?"horizontal":void 0);function P(e){w.value&&(e.currentTarget.setPointerCapture?.(e.pointerId),p.value={x:e.clientX,y:e.clientY},h.setResizing(!0))}function T(e){const i=p.value;!w.value||!i||(h.resizeBy(g.direction,e.clientX-i.x,e.clientY-i.y),p.value={x:e.clientX,y:e.clientY})}function S(e){p.value&&(e.currentTarget.releasePointerCapture?.(e.pointerId),p.value=null,h.setResizing(!1),h.announceRelease("resize"))}function k(i){if(!w.value)return;const a=h.step.value*(i.shiftKey?10:1),t=e(i.key,i.currentTarget,m()),r="ArrowLeft"===t?{dx:-a,dy:0}:"ArrowRight"===t?{dx:a,dy:0}:"ArrowUp"===t?{dx:0,dy:-a}:"ArrowDown"===t?{dx:0,dy:a}:null;r&&(i.preventDefault(),z.value=!0,h.resizeBy(g.direction,r.dx,r.dy))}function I(){z.value&&(z.value=!1,h.announceRelease("resize"))}return(e,i)=>(u(),r("div",{class:"skdx-floating-panel__resize-trigger","data-part":"resize-trigger",role:"separator","aria-orientation":A.value,"aria-valuenow":Math.round(f.value),"aria-valuemin":Math.round(y.value),"aria-valuemax":Number.isFinite(b.value)?Math.round(b.value):void 0,"aria-disabled":v(h).disabled.value||void 0,"data-direction":g.direction,"data-resizing":v(h).resizing.value?"":void 0,"data-disabled":v(h).disabled.value?"":void 0,"aria-keyshortcuts":v(h).resizable.value?"ArrowUp ArrowDown ArrowLeft ArrowRight":void 0,tabindex:v(h).resizable.value?0:void 0,style:l({touchAction:"none",cursor:w.value?`${g.direction}-resize`:void 0}),onPointerdown:P,onPointermove:T,onPointerup:S,onPointercancel:S,onKeydown:k,onKeyup:I},[s(e.$slots,"default")],44,c))}});export{g as default};

package/dist/floating-panel/FloatingPanelRoot.vue.cjs

@@ -0,0 +1 @@
+const e=require("./FloatingPanelRoot.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

package/dist/floating-panel/FloatingPanelRoot.vue.d.cts

@@ -0,0 +1,184 @@
+import { type FloatingPanelGeometry, type FloatingPanelGesture, type FloatingPanelPosition, type FloatingPanelSize, type FloatingPanelStage } from './context.cjs';
+/**
+ * FloatingPanel's state/context primitive: root of a draggable, resizable,
+ * **non-modal** floating panel — the movable window pattern. Owns open state,
+ * position, size and stage, and hands them down to children via context.
+ * Renders no DOM element itself.
+ *
+ * Non-modal is the point: there is no backdrop, no focus trap, and no scroll
+ * lock, so the page behind stays fully usable while it's open. Focus still
+ * returns to the trigger on close, but only when it would otherwise be
+ * stranded.
+ *
+ * All four of `open`, `position`, `size` and `stage` work controlled or
+ * uncontrolled, independently. Geometry is reported on two channels:
+ * `@position-change`/`@size-change` fire per frame, for painting;
+ * `@position-commit`/`@size-commit` fire once, when the gesture settles, for
+ * persisting.
+ *
+ * @example
+ * ```vue
+ * <FloatingPanel.Root :default-position="{ x: 40, y: 40 }">
+ *   <FloatingPanel.Trigger>Open panel</FloatingPanel.Trigger>
+ *   <FloatingPanel.Portal>
+ *     <FloatingPanel.Content>
+ *       <FloatingPanel.Header aria-label="Drag to move panel">
+ *         <FloatingPanel.Title>Inspector</FloatingPanel.Title>
+ *         <FloatingPanel.CloseTrigger>Close</FloatingPanel.CloseTrigger>
+ *       </FloatingPanel.Header>
+ *       <p>Panel body.</p>
+ *       <FloatingPanel.ResizeTrigger direction="se" aria-label="Resize panel" />
+ *     </FloatingPanel.Content>
+ *   </FloatingPanel.Portal>
+ * </FloatingPanel.Root>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Whether the panel is open, for controlled usage via `v-model:open`.
+     * @default undefined — uncontrolled, the panel tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the panel is initially open, for uncontrolled usage.
+     * @default false — the panel is closed until the trigger is pressed.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The panel's top-left corner in CSS pixels, measured from the boundary's
+     * top-left, for controlled usage via `v-model:position`. Pair it with
+     * `@position-change` or the panel will refuse to move.
+     * @default undefined — uncontrolled, the panel tracks its own position internally.
+     */
+    position?: FloatingPanelPosition;
+    /**
+     * Where the panel starts, for uncontrolled usage.
+     * @default { x: 0, y: 0 } — the top-left corner of the boundary.
+     */
+    defaultPosition?: FloatingPanelPosition;
+    /**
+     * The panel's box in CSS pixels, for controlled usage via `v-model:size`.
+     * Pair it with `@size-change` or the panel will refuse to resize.
+     * @default undefined — uncontrolled, the panel tracks its own size internally.
+     */
+    size?: FloatingPanelSize;
+    /**
+     * The panel's starting box, for uncontrolled usage.
+     * @default { width: 320, height: 240 }
+     */
+    defaultSize?: FloatingPanelSize;
+    /**
+     * Smallest box the panel can be resized to. Every resize is clamped to it,
+     * so a consumer never has to defend against a zero-height panel.
+     * @default { width: 160, height: 120 }
+     */
+    minSize?: FloatingPanelSize;
+    /**
+     * Largest box the panel can be resized to.
+     * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
+     */
+    maxSize?: FloatingPanelSize;
+    /**
+     * Element the panel may not be dragged or resized out of. Position is
+     * measured from this element's top-left corner, so it must be the panel's
+     * containing block for the published geometry to line up.
+     * @default null — the viewport constrains the panel instead.
+     */
+    boundary?: HTMLElement | null;
+    /**
+     * The panel's window state, for controlled usage via `v-model:stage`.
+     * @default undefined — uncontrolled, the panel tracks its own stage internally.
+     */
+    stage?: FloatingPanelStage;
+    /**
+     * The panel's starting window state, for uncontrolled usage.
+     * @default 'default' — the panel uses its own position and size.
+     */
+    defaultStage?: FloatingPanelStage;
+    /**
+     * Whether the header can move the panel. `false` leaves the header
+     * focusable only if you make it so, and drops its `move` cursor.
+     * @default true — the header is a drag handle and a keyboard mover.
+     */
+    draggable?: boolean;
+    /**
+     * Whether resize triggers do anything. `false` makes every
+     * `SkdxFloatingPanelResizeTrigger` inert and non-focusable, so a fixed-size
+     * panel can still render its grips for visual symmetry.
+     * @default true — every grip resizes and takes a tab stop.
+     */
+    resizable?: boolean;
+    /**
+     * How far one arrow key moves or resizes the panel, in pixels.
+     * Shift+arrow uses ten times this.
+     * @default 10 — one arrow key is a 10px nudge, one Shift+arrow a 100px jump.
+     */
+    step?: number;
+    /**
+     * Freezes the panel's geometry: drag, resize and stage changes are all
+     * refused and their triggers leave the tab order. Opening and closing still
+     * work — a disabled panel is inert, not unreachable.
+     * @default false — the panel is fully interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Words the polite live-region message announced once per drag or resize, on
+     * release. The numbers are already rounded to whole CSS pixels. Return `''`
+     * to announce nothing.
+     * @default undefined — the built-in English wording ("Panel moved to 40, 25").
+     */
+    getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "open-change-complete": (open: boolean) => any;
+    "update:position": (position: FloatingPanelPosition) => any;
+    "position-change": (position: FloatingPanelPosition) => any;
+    "position-commit": (position: FloatingPanelPosition) => any;
+    "update:size": (size: FloatingPanelSize) => any;
+    "size-change": (size: FloatingPanelSize) => any;
+    "size-commit": (size: FloatingPanelSize) => any;
+    "update:stage": (stage: FloatingPanelStage) => any;
+    "stage-change": (stage: FloatingPanelStage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:position"?: ((position: FloatingPanelPosition) => any) | undefined;
+    "onPosition-change"?: ((position: FloatingPanelPosition) => any) | undefined;
+    "onPosition-commit"?: ((position: FloatingPanelPosition) => any) | undefined;
+    "onUpdate:size"?: ((size: FloatingPanelSize) => any) | undefined;
+    "onSize-change"?: ((size: FloatingPanelSize) => any) | undefined;
+    "onSize-commit"?: ((size: FloatingPanelSize) => any) | undefined;
+    "onUpdate:stage"?: ((stage: FloatingPanelStage) => any) | undefined;
+    "onStage-change"?: ((stage: FloatingPanelStage) => any) | undefined;
+}>, {
+    position: FloatingPanelPosition;
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+    size: FloatingPanelSize;
+    step: number;
+    draggable: boolean;
+    boundary: HTMLElement | null;
+    resizable: boolean;
+    defaultSize: FloatingPanelSize;
+    minSize: FloatingPanelSize;
+    maxSize: FloatingPanelSize;
+    stage: FloatingPanelStage;
+    defaultPosition: FloatingPanelPosition;
+    defaultStage: FloatingPanelStage;
+    getGestureAnnouncement: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/floating-panel/FloatingPanelRoot.vue.d.ts

@@ -0,0 +1,184 @@
+import { type FloatingPanelGeometry, type FloatingPanelGesture, type FloatingPanelPosition, type FloatingPanelSize, type FloatingPanelStage } from './context.js';
+/**
+ * FloatingPanel's state/context primitive: root of a draggable, resizable,
+ * **non-modal** floating panel — the movable window pattern. Owns open state,
+ * position, size and stage, and hands them down to children via context.
+ * Renders no DOM element itself.
+ *
+ * Non-modal is the point: there is no backdrop, no focus trap, and no scroll
+ * lock, so the page behind stays fully usable while it's open. Focus still
+ * returns to the trigger on close, but only when it would otherwise be
+ * stranded.
+ *
+ * All four of `open`, `position`, `size` and `stage` work controlled or
+ * uncontrolled, independently. Geometry is reported on two channels:
+ * `@position-change`/`@size-change` fire per frame, for painting;
+ * `@position-commit`/`@size-commit` fire once, when the gesture settles, for
+ * persisting.
+ *
+ * @example
+ * ```vue
+ * <FloatingPanel.Root :default-position="{ x: 40, y: 40 }">
+ *   <FloatingPanel.Trigger>Open panel</FloatingPanel.Trigger>
+ *   <FloatingPanel.Portal>
+ *     <FloatingPanel.Content>
+ *       <FloatingPanel.Header aria-label="Drag to move panel">
+ *         <FloatingPanel.Title>Inspector</FloatingPanel.Title>
+ *         <FloatingPanel.CloseTrigger>Close</FloatingPanel.CloseTrigger>
+ *       </FloatingPanel.Header>
+ *       <p>Panel body.</p>
+ *       <FloatingPanel.ResizeTrigger direction="se" aria-label="Resize panel" />
+ *     </FloatingPanel.Content>
+ *   </FloatingPanel.Portal>
+ * </FloatingPanel.Root>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Whether the panel is open, for controlled usage via `v-model:open`.
+     * @default undefined — uncontrolled, the panel tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the panel is initially open, for uncontrolled usage.
+     * @default false — the panel is closed until the trigger is pressed.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The panel's top-left corner in CSS pixels, measured from the boundary's
+     * top-left, for controlled usage via `v-model:position`. Pair it with
+     * `@position-change` or the panel will refuse to move.
+     * @default undefined — uncontrolled, the panel tracks its own position internally.
+     */
+    position?: FloatingPanelPosition;
+    /**
+     * Where the panel starts, for uncontrolled usage.
+     * @default { x: 0, y: 0 } — the top-left corner of the boundary.
+     */
+    defaultPosition?: FloatingPanelPosition;
+    /**
+     * The panel's box in CSS pixels, for controlled usage via `v-model:size`.
+     * Pair it with `@size-change` or the panel will refuse to resize.
+     * @default undefined — uncontrolled, the panel tracks its own size internally.
+     */
+    size?: FloatingPanelSize;
+    /**
+     * The panel's starting box, for uncontrolled usage.
+     * @default { width: 320, height: 240 }
+     */
+    defaultSize?: FloatingPanelSize;
+    /**
+     * Smallest box the panel can be resized to. Every resize is clamped to it,
+     * so a consumer never has to defend against a zero-height panel.
+     * @default { width: 160, height: 120 }
+     */
+    minSize?: FloatingPanelSize;
+    /**
+     * Largest box the panel can be resized to.
+     * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
+     */
+    maxSize?: FloatingPanelSize;
+    /**
+     * Element the panel may not be dragged or resized out of. Position is
+     * measured from this element's top-left corner, so it must be the panel's
+     * containing block for the published geometry to line up.
+     * @default null — the viewport constrains the panel instead.
+     */
+    boundary?: HTMLElement | null;
+    /**
+     * The panel's window state, for controlled usage via `v-model:stage`.
+     * @default undefined — uncontrolled, the panel tracks its own stage internally.
+     */
+    stage?: FloatingPanelStage;
+    /**
+     * The panel's starting window state, for uncontrolled usage.
+     * @default 'default' — the panel uses its own position and size.
+     */
+    defaultStage?: FloatingPanelStage;
+    /**
+     * Whether the header can move the panel. `false` leaves the header
+     * focusable only if you make it so, and drops its `move` cursor.
+     * @default true — the header is a drag handle and a keyboard mover.
+     */
+    draggable?: boolean;
+    /**
+     * Whether resize triggers do anything. `false` makes every
+     * `SkdxFloatingPanelResizeTrigger` inert and non-focusable, so a fixed-size
+     * panel can still render its grips for visual symmetry.
+     * @default true — every grip resizes and takes a tab stop.
+     */
+    resizable?: boolean;
+    /**
+     * How far one arrow key moves or resizes the panel, in pixels.
+     * Shift+arrow uses ten times this.
+     * @default 10 — one arrow key is a 10px nudge, one Shift+arrow a 100px jump.
+     */
+    step?: number;
+    /**
+     * Freezes the panel's geometry: drag, resize and stage changes are all
+     * refused and their triggers leave the tab order. Opening and closing still
+     * work — a disabled panel is inert, not unreachable.
+     * @default false — the panel is fully interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Words the polite live-region message announced once per drag or resize, on
+     * release. The numbers are already rounded to whole CSS pixels. Return `''`
+     * to announce nothing.
+     * @default undefined — the built-in English wording ("Panel moved to 40, 25").
+     */
+    getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "open-change-complete": (open: boolean) => any;
+    "update:position": (position: FloatingPanelPosition) => any;
+    "position-change": (position: FloatingPanelPosition) => any;
+    "position-commit": (position: FloatingPanelPosition) => any;
+    "update:size": (size: FloatingPanelSize) => any;
+    "size-change": (size: FloatingPanelSize) => any;
+    "size-commit": (size: FloatingPanelSize) => any;
+    "update:stage": (stage: FloatingPanelStage) => any;
+    "stage-change": (stage: FloatingPanelStage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+    "onUpdate:position"?: ((position: FloatingPanelPosition) => any) | undefined;
+    "onPosition-change"?: ((position: FloatingPanelPosition) => any) | undefined;
+    "onPosition-commit"?: ((position: FloatingPanelPosition) => any) | undefined;
+    "onUpdate:size"?: ((size: FloatingPanelSize) => any) | undefined;
+    "onSize-change"?: ((size: FloatingPanelSize) => any) | undefined;
+    "onSize-commit"?: ((size: FloatingPanelSize) => any) | undefined;
+    "onUpdate:stage"?: ((stage: FloatingPanelStage) => any) | undefined;
+    "onStage-change"?: ((stage: FloatingPanelStage) => any) | undefined;
+}>, {
+    position: FloatingPanelPosition;
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+    size: FloatingPanelSize;
+    step: number;
+    draggable: boolean;
+    boundary: HTMLElement | null;
+    resizable: boolean;
+    defaultSize: FloatingPanelSize;
+    minSize: FloatingPanelSize;
+    maxSize: FloatingPanelSize;
+    stage: FloatingPanelStage;
+    defaultPosition: FloatingPanelPosition;
+    defaultStage: FloatingPanelStage;
+    getGestureAnnouncement: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/floating-panel/FloatingPanelRoot.vue.js

@@ -0,0 +1 @@
+import t from"./FloatingPanelRoot.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/floating-panel/FloatingPanelRoot.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const V=require("../utils/useOpenChangeComplete.cjs"),f=require("../utils/clamp.cjs"),Y=require("../utils/liveAnnouncer.cjs"),z=require("./context.cjs");let t=require("vue");var D=(0,t.defineComponent)({__name:"FloatingPanelRoot",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},position:{default:void 0},defaultPosition:{default:()=>({x:0,y:0})},size:{default:void 0},defaultSize:{default:()=>({width:320,height:240})},minSize:{default:()=>({width:160,height:120})},maxSize:{default:()=>({width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY})},boundary:{default:null},stage:{default:void 0},defaultStage:{default:"default"},draggable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},step:{default:10},disabled:{type:Boolean,default:!1},getGestureAnnouncement:{type:Function,default:void 0}},emits:["update:open","open-change","open-change-complete","update:position","position-change","position-commit","update:size","size-change","size-commit","update:stage","stage-change"],setup(E,{emit:F}){const i=E,l=F,I=(0,t.ref)(null),y=(0,t.ref)(null),M=(0,t.ref)(!1),O=(0,t.ref)(!1),x=(0,t.ref)(!1),P=(0,t.ref)(i.defaultOpen),T=(0,t.ref)(i.defaultPosition),B=(0,t.ref)(i.defaultSize),q=(0,t.ref)(i.defaultStage),p=(0,t.computed)(()=>i.open??P.value),u=(0,t.computed)(()=>i.position??T.value),o=(0,t.computed)(()=>i.size??B.value),N=(0,t.computed)(()=>i.stage??q.value);V.useOpenChangeComplete(p,y,e=>l("open-change-complete",e));function A(e){e!==p.value&&(i.open===void 0&&(P.value=e),l("update:open",e),l("open-change",e))}function b(e){e.x===u.value.x&&e.y===u.value.y||(i.position===void 0&&(T.value=e),l("update:position",e),l("position-change",e))}function R(e){e.width===o.value.width&&e.height===o.value.height||(i.size===void 0&&(B.value=e),l("update:size",e),l("size-change",e))}function C(e){e!==N.value&&(i.stage===void 0&&(q.value=e),l("update:stage",e),l("stage-change",e))}(0,t.watch)(p,(e,a)=>{if(!a||e)return;const n=document.activeElement;(!n||n===document.body||y.value?.contains(n))&&I.value?.focus()});function S(){const e=i.boundary;if(e){const a=e.getBoundingClientRect();return{width:a.width,height:a.height}}return{width:window.innerWidth,height:window.innerHeight}}function m(e,a,n,s){return f.clamp(e,a,Math.max(a,Math.min(n,s)))}const _=(0,t.ref)(null);(0,t.watchEffect)(e=>{const a=i.boundary,n=()=>{_.value=S()};if(n(),a&&typeof ResizeObserver<"u"){const s=new ResizeObserver(n);s.observe(a),e(()=>s.disconnect());return}window.addEventListener("resize",n),e(()=>window.removeEventListener("resize",n))},{flush:"post"}),(0,t.watch)(_,e=>{if(!e)return;const{minSize:a}=i,n=Math.min(o.value.width,Math.max(a.width,e.width)),s=Math.min(o.value.height,Math.max(a.height,e.height));(n!==o.value.width||s!==o.value.height)&&R({width:n,height:s});const d=f.clamp(u.value.x,0,Math.max(0,e.width-n)),c=f.clamp(u.value.y,0,Math.max(0,e.height-s));(d!==u.value.x||c!==u.value.y)&&b({x:d,y:c})});function L(e,a){if(i.disabled||!i.draggable)return;const n=S();b({x:f.clamp(u.value.x+e,0,Math.max(0,n.width-o.value.width)),y:f.clamp(u.value.y+a,0,Math.max(0,n.height-o.value.height))})}function G(e,a,n){if(i.disabled||!i.resizable)return;const s=S();let{x:d,y:c}=u.value,{width:r,height:h}=o.value;const{minSize:v,maxSize:w}=i;if(e.includes("e")&&(r=m(o.value.width+a,v.width,w.width,s.width-d)),e.includes("w")){const g=d+r;r=m(o.value.width-a,v.width,w.width,g),d=g-r}if(e.includes("s")&&(h=m(o.value.height+n,v.height,w.height,s.height-c)),e.includes("n")){const g=c+h;h=m(o.value.height-n,v.height,w.height,g),c=g-h}R({width:r,height:h}),b({x:d,y:c})}function H(e){e==="resize"&&l("size-commit",o.value),l("position-commit",u.value);const a={position:{x:Math.round(u.value.x),y:Math.round(u.value.y)},size:{width:Math.round(o.value.width),height:Math.round(o.value.height)}},n=(i.getGestureAnnouncement??z.gestureAnnouncement)(e,a);n&&Y.announce(n)}return(0,t.provide)(z.FLOATING_PANEL_CONTEXT,{triggerRef:I,contentRef:y,contentId:z.nextFloatingPanelContentId(),titleId:z.nextFloatingPanelTitleId(),hasTitle:(0,t.computed)(()=>M.value),setHasTitle:e=>{M.value=e},open:p,setOpen:A,position:u,size:o,minSize:(0,t.computed)(()=>i.minSize),maxSize:(0,t.computed)(()=>i.maxSize),bounds:(0,t.computed)(()=>_.value),stage:N,setStage:C,moveBy:L,resizeBy:G,announceRelease:H,draggable:(0,t.computed)(()=>i.draggable),resizable:(0,t.computed)(()=>i.resizable),disabled:(0,t.computed)(()=>i.disabled),step:(0,t.computed)(()=>i.step),dragging:(0,t.computed)(()=>O.value),setDragging:e=>{O.value=e},resizing:(0,t.computed)(()=>x.value),setResizing:e=>{x.value=e}}),(e,a)=>(0,t.renderSlot)(e.$slots,"default")}});exports.default=D;

package/dist/floating-panel/FloatingPanelRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useOpenChangeComplete as e}from"../utils/useOpenChangeComplete.js";import{clamp as t}from"../utils/clamp.js";import{announce as i}from"../utils/liveAnnouncer.js";import{FLOATING_PANEL_CONTEXT as a,gestureAnnouncement as n,nextFloatingPanelContentId as o,nextFloatingPanelTitleId as u}from"./context.js";import{computed as l,defineComponent as s,provide as d,ref as h,renderSlot as g,watch as r,watchEffect as v}from"vue";var c=/* @__PURE__ */s({__name:"FloatingPanelRoot",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},position:{default:void 0},defaultPosition:{default:()=>({x:0,y:0})},size:{default:void 0},defaultSize:{default:()=>({width:320,height:240})},minSize:{default:()=>({width:160,height:120})},maxSize:{default:()=>({width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY})},boundary:{default:null},stage:{default:void 0},defaultStage:{default:"default"},draggable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},step:{default:10},disabled:{type:Boolean,default:!1},getGestureAnnouncement:{type:Function,default:void 0}},emits:["update:open","open-change","open-change-complete","update:position","position-change","position-commit","update:size","size-change","size-commit","update:stage","stage-change"],setup(s,{emit:c}){const p=s,f=c,m=h(null),w=h(null),z=h(!1),x=h(!1),y=h(!1),b=h(p.defaultOpen),S=h(p.defaultPosition),I=h(p.defaultSize),M=h(p.defaultStage),O=l(()=>p.open??b.value),T=l(()=>p.position??S.value),N=l(()=>p.size??I.value),B=l(()=>p.stage??M.value);function C(e){e.x===T.value.x&&e.y===T.value.y||(void 0===p.position&&(S.value=e),f("update:position",e),f("position-change",e))}function E(e){e.width===N.value.width&&e.height===N.value.height||(void 0===p.size&&(I.value=e),f("update:size",e),f("size-change",e))}function P(){const e=p.boundary;if(e){const t=e.getBoundingClientRect();return{width:t.width,height:t.height}}return{width:window.innerWidth,height:window.innerHeight}}function R(e,i,a,n){return t(e,i,Math.max(i,Math.min(a,n)))}e(O,w,e=>f("open-change-complete",e)),r(O,(e,t)=>{if(!t||e)return;const i=document.activeElement;(!i||i===document.body||w.value?.contains(i))&&m.value?.focus()});const F=h(null);return v(e=>{const t=p.boundary,i=()=>{F.value=P()};if(i(),t&&typeof ResizeObserver<"u"){const a=new ResizeObserver(i);return a.observe(t),void e(()=>a.disconnect())}window.addEventListener("resize",i),e(()=>window.removeEventListener("resize",i))},{flush:"post"}),r(F,e=>{if(!e)return;const{minSize:i}=p,a=Math.min(N.value.width,Math.max(i.width,e.width)),n=Math.min(N.value.height,Math.max(i.height,e.height));(a!==N.value.width||n!==N.value.height)&&E({width:a,height:n});const o=t(T.value.x,0,Math.max(0,e.width-a)),u=t(T.value.y,0,Math.max(0,e.height-n));(o!==T.value.x||u!==T.value.y)&&C({x:o,y:u})}),d(a,{triggerRef:m,contentRef:w,contentId:o(),titleId:u(),hasTitle:l(()=>z.value),setHasTitle:e=>{z.value=e},open:O,setOpen:function(e){e!==O.value&&(void 0===p.open&&(b.value=e),f("update:open",e),f("open-change",e))},position:T,size:N,minSize:l(()=>p.minSize),maxSize:l(()=>p.maxSize),bounds:l(()=>F.value),stage:B,setStage:function(e){e!==B.value&&(void 0===p.stage&&(M.value=e),f("update:stage",e),f("stage-change",e))},moveBy:function(e,i){if(p.disabled||!p.draggable)return;const a=P();C({x:t(T.value.x+e,0,Math.max(0,a.width-N.value.width)),y:t(T.value.y+i,0,Math.max(0,a.height-N.value.height))})},resizeBy:function(e,t,i){if(p.disabled||!p.resizable)return;const a=P();let{x:n,y:o}=T.value,{width:u,height:l}=N.value;const{minSize:s,maxSize:d}=p;if(e.includes("e")&&(u=R(N.value.width+t,s.width,d.width,a.width-n)),e.includes("w")){const e=n+u;u=R(N.value.width-t,s.width,d.width,e),n=e-u}if(e.includes("s")&&(l=R(N.value.height+i,s.height,d.height,a.height-o)),e.includes("n")){const e=o+l;l=R(N.value.height-i,s.height,d.height,e),o=e-l}E({width:u,height:l}),C({x:n,y:o})},announceRelease:function(e){"resize"===e&&f("size-commit",N.value),f("position-commit",T.value);const t={position:{x:Math.round(T.value.x),y:Math.round(T.value.y)},size:{width:Math.round(N.value.width),height:Math.round(N.value.height)}},a=(p.getGestureAnnouncement??n)(e,t);a&&i(a)},draggable:l(()=>p.draggable),resizable:l(()=>p.resizable),disabled:l(()=>p.disabled),step:l(()=>p.step),dragging:l(()=>x.value),setDragging:e=>{x.value=e},resizing:l(()=>y.value),setResizing:e=>{y.value=e}}),(e,t)=>g(e.$slots,"default")}});export{c as default};

package/dist/floating-panel/FloatingPanelStageTrigger.vue.d.cts

@@ -1,15 +1,12 @@
 import { type FloatingPanelStage } from './context.cjs';
 /**
  * Button that switches the panel to the `stage` it names — and back to
- * `'default'` when the panel is already there. That toggle is why minimize and
- * restore are one button rather than two: it reports the state it is in via
- * `aria-pressed`, so a screen reader announces "Minimize, pressed" rather than
- * two buttons swapping places under the user.
- *
- * Also exposes the panel's current stage as `data-stage` and its own active
- * state as `data-state` (`on`/`off`). Refuses to act while the panel is
- * `disabled`, since a stage change rewrites the panel's geometry. Must be used
- * inside `SkdxFloatingPanel`.
+ * `'default'` when the panel is already there. That toggle makes one button
+ * serve as both minimize and restore: it reports the state via `aria-pressed`,
+ * so a screen reader announces "Minimize, pressed" rather than two buttons
+ * swapping places. Exposes the panel's current stage as `data-stage` and its
+ * own state as `data-state` (`on`/`off`). Refuses to act while the panel is
+ * `disabled`. Must be used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {
     /**

package/dist/floating-panel/FloatingPanelStageTrigger.vue.d.ts

@@ -1,15 +1,12 @@
 import { type FloatingPanelStage } from './context.js';
 /**
  * Button that switches the panel to the `stage` it names — and back to
- * `'default'` when the panel is already there. That toggle is why minimize and
- * restore are one button rather than two: it reports the state it is in via
- * `aria-pressed`, so a screen reader announces "Minimize, pressed" rather than
- * two buttons swapping places under the user.
- *
- * Also exposes the panel's current stage as `data-stage` and its own active
- * state as `data-state` (`on`/`off`). Refuses to act while the panel is
- * `disabled`, since a stage change rewrites the panel's geometry. Must be used
- * inside `SkdxFloatingPanel`.
+ * `'default'` when the panel is already there. That toggle makes one button
+ * serve as both minimize and restore: it reports the state via `aria-pressed`,
+ * so a screen reader announces "Minimize, pressed" rather than two buttons
+ * swapping places. Exposes the panel's current stage as `data-stage` and its
+ * own state as `data-state` (`on`/`off`). Refuses to act while the panel is
+ * `disabled`. Must be used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {
     /**

package/dist/floating-panel/FloatingPanelStageTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const d=require("./context.cjs");let e=require("vue");var i=["aria-pressed","disabled","data-stage","data-state","data-disabled"],u=(0,e.defineComponent)({__name:"FloatingPanelStageTrigger",props:{stage:{}},setup(l){const r=l,a=(0,e.inject)(d.FLOATING_PANEL_CONTEXT);if(!a)throw new Error("SkdxFloatingPanelStageTrigger must be used within SkdxFloatingPanel.");const t=(0,e.computed)(()=>a.stage.value===r.stage);function n(){a.disabled.value||a.setStage(t.value?"default":r.stage)}return(s,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-floating-panel__stage-trigger","data-part":"stage-trigger",type:"button","aria-pressed":t.value,disabled:(0,e.unref)(a).disabled.value||void 0,"data-stage":(0,e.unref)(a).stage.value,"data-state":t.value?"on":"off","data-disabled":(0,e.unref)(a).disabled.value?"":void 0,onClick:n},[(0,e.renderSlot)(s.$slots,"default")],8,i))}});exports.default=u;
+const d=require("./context.cjs");let e=require("vue");var i=["aria-pressed","aria-disabled","data-stage","data-state","data-disabled"],u=(0,e.defineComponent)({__name:"FloatingPanelStageTrigger",props:{stage:{}},setup(l){const r=l,a=(0,e.inject)(d.FLOATING_PANEL_CONTEXT);if(!a)throw new Error("SkdxFloatingPanelStageTrigger must be used within SkdxFloatingPanel.");const t=(0,e.computed)(()=>a.stage.value===r.stage);function n(){a.disabled.value||a.setStage(t.value?"default":r.stage)}return(s,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-floating-panel__stage-trigger","data-part":"stage-trigger",type:"button","aria-pressed":t.value,"aria-disabled":(0,e.unref)(a).disabled.value||void 0,"data-stage":(0,e.unref)(a).stage.value,"data-state":t.value?"on":"off","data-disabled":(0,e.unref)(a).disabled.value?"":void 0,onClick:n},[(0,e.renderSlot)(s.$slots,"default")],8,i))}});exports.default=u;