@skdx/vue 0.26.0 → 0.28.0

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

@@ -1,175 +1,152 @@
-import { type FloatingPanelGeometry, type FloatingPanelGesture, type FloatingPanelPosition, type FloatingPanelSize, type FloatingPanelStage } from './context.js';
+import type { FloatingPanelGeometry, FloatingPanelGesture, FloatingPanelPosition, FloatingPanelSize, FloatingPanelStage } from './context.js';
 /**
- * The Vue implementation of the shared FloatingPanel contract (see
- * `@skdx/shared`'s `floatingPanelContract`). 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 `SkdxFloatingPanelTrigger` /
- * `SkdxFloatingPanelPortal` / `SkdxFloatingPanelContent` /
- * `SkdxFloatingPanelHeader` / `SkdxFloatingPanelTitle` /
- * `SkdxFloatingPanelCloseTrigger` / `SkdxFloatingPanelResizeTrigger` /
- * `SkdxFloatingPanelStageTrigger` via context. Renders no DOM element itself.
+ * A draggable, resizable, non-modal floating panel — the movable-window
+ * pattern. Non-modal means no backdrop, focus trap, or scroll lock, so the
+ * page behind stays usable while it's open.
  *
- * Non-modal is not a default here, it is the point: there is no backdrop, no
- * focus trap, and no scroll lock, so the page behind the panel stays fully
- * usable while it is open. Focus still returns to the trigger on close, but
- * only when it would otherwise be stranded.
+ * Always draws the derived anatomy: a portalled panel whose header carries
+ * `title`, one button per `stages` entry, and a close button unless
+ * `dismissible` is `false`, with the default slot as body and a south-east
+ * resize grip while `resizable`. No derived trigger; the consumer drives
+ * `open`.
  *
- * All four of `open`, `position`, `size` and `stage` work controlled
- * (`v-model:open`, `v-model:position`, `v-model:size`, `v-model:stage`) or
- * uncontrolled (`default-open`, `default-position`, `default-size`,
- * `default-stage`), independently of one another.
+ * `open`, `position`, `size` and `stage` each work controlled or uncontrolled,
+ * independently. Geometry reports 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
- * <SkdxFloatingPanel :default-position="{ x: 40, y: 40 }">
- *   <SkdxFloatingPanelTrigger>Open panel</SkdxFloatingPanelTrigger>
- *   <SkdxFloatingPanelPortal>
- *     <SkdxFloatingPanelContent>
- *       <SkdxFloatingPanelHeader aria-label="Drag to move panel">
- *         <SkdxFloatingPanelTitle>Inspector</SkdxFloatingPanelTitle>
- *         <SkdxFloatingPanelCloseTrigger>Close</SkdxFloatingPanelCloseTrigger>
- *       </SkdxFloatingPanelHeader>
- *       <p>Panel body.</p>
- *       <SkdxFloatingPanelResizeTrigger direction="se" aria-label="Resize panel" />
- *     </SkdxFloatingPanelContent>
- *   </SkdxFloatingPanelPortal>
+ * <SkdxFloatingPanel v-model:open="open" title="Layers">
+ *   <p>Panel body.</p>
  * </SkdxFloatingPanel>
  * ```
  */
 type __VLS_Props = {
+    /** Whether the panel is open, for controlled usage via `v-model:open`. @default undefined — uncontrolled. */
+    open?: boolean;
+    /** Whether the panel is initially open, for uncontrolled usage. @default false — the panel is closed until `open` says otherwise.*/
+    defaultOpen?: boolean;
     /**
-     * Whether the panel is open, for controlled usage via `v-model:open`.
-     * @default undefined — uncontrolled, the panel tracks its own open state internally.
+     * The panel's heading, rendered in the derived header. Omitting it omits
+     * `aria-labelledby` too — name a title-less panel with `aria-label` instead.
+     * @default undefined — no title is rendered.
      */
-    open?: boolean;
+    title?: string;
     /**
-     * Whether the panel is initially open, for uncontrolled usage.
-     * @default false — the panel is closed until the trigger is pressed.
+     * Window controls the derived header renders — one button per entry, each
+     * switching the panel to its `stage`. `label` is yours to supply.
+     * @default [] — a panel that asked for no window controls gets none.
      */
-    defaultOpen?: boolean;
+    stages?: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
+    /** Whether the derived header renders a close button. @default true */
+    dismissible?: 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.
+     * The panel's top-left corner in CSS pixels, for controlled usage via
+     * `v-model:position`. Pair with `@position-change` or the panel won't 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.
-     */
+    /** Where the panel starts, for uncontrolled usage. @default { x: 0, y: 0 } — the boundary's top-left corner. */
     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.
+     * Pair with `@size-change` or the panel won't 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 }
-     */
+    /** 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 }
-     */
+    /** Smallest box the panel can be resized to. @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.
-     */
+    /** 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.
+     * Element the panel may not be dragged or resized out of; 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.
-     */
+    /** The panel's window state, for controlled usage via `v-model:stage`. @default undefined — uncontrolled. */
     stage?: FloatingPanelStage;
-    /**
-     * The panel's starting window state, for uncontrolled usage.
-     * @default 'default' — the panel uses its own position and size.
-     */
+    /** 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.
-     */
+    /** Whether the header can move the panel. @default true — a drag handle and 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.
+     * Whether the panel can be resized; `false` also makes any hand-composed grip inert.
+     * @default true
      */
     resizable?: boolean;
     /**
-     * How far one arrow key moves or resizes the panel, in pixels.
-     * Shift+arrow uses ten times this.
+     * 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.
+     * Freezes the panel's geometry — drag, resize and stage changes are all refused. Opening/closing still work.
      * @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.
+     * Words the polite live-region message announced once per drag or resize on release.
      * @default undefined — the built-in English wording ("Panel moved to 40, 25").
      */
     getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
 };
-declare var __VLS_1: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_22) => 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;
 }>, {
+    title: string;
+    position: FloatingPanelPosition;
     disabled: boolean;
+    dismissible: boolean;
     open: boolean;
     defaultOpen: boolean;
-    position: FloatingPanelPosition;
     size: FloatingPanelSize;
-    boundary: HTMLElement | null;
     step: number;
+    draggable: boolean;
+    boundary: HTMLElement | null;
     resizable: boolean;
     defaultSize: FloatingPanelSize;
     minSize: FloatingPanelSize;
     maxSize: FloatingPanelSize;
-    defaultPosition: FloatingPanelPosition;
     stage: FloatingPanelStage;
+    stages: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
+    defaultPosition: FloatingPanelPosition;
     defaultStage: FloatingPanelStage;
-    draggable: boolean;
     getGestureAnnouncement: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1 +1 @@
-const w=require("../utils/clamp.cjs"),L=require("../utils/liveAnnouncer.cjs"),m=require("./context.cjs");let i=require("vue");var V=(0,i.defineComponent)({__name:"FloatingPanel",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","update:position","position-change","update:size","size-change","update:stage","stage-change"],setup(T,{emit:q}){const t=T,o=q,b=(0,i.ref)(null),y=(0,i.ref)(null),S=(0,i.ref)(!1),_=(0,i.ref)(!1),I=(0,i.ref)(t.defaultOpen),P=(0,i.ref)(t.defaultPosition),B=(0,i.ref)(t.defaultSize),N=(0,i.ref)(t.defaultStage),z=(0,i.computed)(()=>t.open??I.value),l=(0,i.computed)(()=>t.position??P.value),u=(0,i.computed)(()=>t.size??B.value),F=(0,i.computed)(()=>t.stage??N.value);function A(e){e!==z.value&&(t.open===void 0&&(I.value=e),o("update:open",e),o("open-change",e))}function M(e){e.x===l.value.x&&e.y===l.value.y||(t.position===void 0&&(P.value=e),o("update:position",e),o("position-change",e))}function E(e){e.width===u.value.width&&e.height===u.value.height||(t.size===void 0&&(B.value=e),o("update:size",e),o("size-change",e))}function R(e){e!==F.value&&(t.stage===void 0&&(N.value=e),o("update:stage",e),o("stage-change",e))}(0,i.watch)(z,(e,n)=>{if(!n||e)return;const a=document.activeElement;(!a||a===document.body||y.value?.contains(a))&&b.value?.focus()});function O(){const e=t.boundary;if(e){const n=e.getBoundingClientRect();return{width:n.width,height:n.height}}return{width:window.innerWidth,height:window.innerHeight}}function c(e,n,a,h){return w.clamp(e,n,Math.max(n,Math.min(a,h)))}function x(e,n){if(t.disabled||!t.draggable)return;const a=O();M({x:w.clamp(l.value.x+e,0,Math.max(0,a.width-u.value.width)),y:w.clamp(l.value.y+n,0,Math.max(0,a.height-u.value.height))})}function C(e,n,a){if(t.disabled||!t.resizable)return;const h=O();let{x:g,y:f}=l.value,{width:d,height:s}=u.value;const{minSize:p,maxSize:v}=t;if(e.includes("e")&&(d=c(u.value.width+n,p.width,v.width,h.width-g)),e.includes("w")){const r=g+d;d=c(u.value.width-n,p.width,v.width,r),g=r-d}if(e.includes("s")&&(s=c(u.value.height+a,p.height,v.height,h.height-f)),e.includes("n")){const r=f+s;s=c(u.value.height-a,p.height,v.height,r),f=r-s}E({width:d,height:s}),M({x:g,y:f})}function G(e){const n={position:{x:Math.round(l.value.x),y:Math.round(l.value.y)},size:{width:Math.round(u.value.width),height:Math.round(u.value.height)}},a=(t.getGestureAnnouncement??m.gestureAnnouncement)(e,n);a&&L.announce(a)}return(0,i.provide)(m.FLOATING_PANEL_CONTEXT,{triggerRef:b,contentRef:y,contentId:m.nextFloatingPanelContentId(),titleId:m.nextFloatingPanelTitleId(),open:z,setOpen:A,position:l,size:u,minSize:(0,i.computed)(()=>t.minSize),maxSize:(0,i.computed)(()=>t.maxSize),stage:F,setStage:R,moveBy:x,resizeBy:C,announceRelease:G,draggable:(0,i.computed)(()=>t.draggable),resizable:(0,i.computed)(()=>t.resizable),disabled:(0,i.computed)(()=>t.disabled),step:(0,i.computed)(()=>t.step),dragging:(0,i.computed)(()=>S.value),setDragging:e=>{S.value=e},resizing:(0,i.computed)(()=>_.value),setResizing:e=>{_.value=e}}),(e,n)=>(0,i.renderSlot)(e.$slots,"default")}});exports.default=V;
+const l=require("./FloatingPanelAnatomy.vue.cjs"),o=require("./FloatingPanelRoot.vue.cjs");let n=require("vue");var d=(0,n.defineComponent)({inheritAttrs:!1,__name:"FloatingPanel",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},title:{default:void 0},stages:{default:()=>[]},dismissible:{type:Boolean,default:!0},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(i){return(a,e)=>((0,n.openBlock)(),(0,n.createBlock)(o.default,{open:i.open,"default-open":i.defaultOpen,position:i.position,"default-position":i.defaultPosition,size:i.size,"default-size":i.defaultSize,"min-size":i.minSize,"max-size":i.maxSize,boundary:i.boundary,stage:i.stage,"default-stage":i.defaultStage,draggable:i.draggable,resizable:i.resizable,step:i.step,disabled:i.disabled,"get-gesture-announcement":i.getGestureAnnouncement,"onUpdate:open":e[0]||(e[0]=t=>a.$emit("update:open",t)),onOpenChange:e[1]||(e[1]=t=>a.$emit("open-change",t)),onOpenChangeComplete:e[2]||(e[2]=t=>a.$emit("open-change-complete",t)),"onUpdate:position":e[3]||(e[3]=t=>a.$emit("update:position",t)),onPositionChange:e[4]||(e[4]=t=>a.$emit("position-change",t)),onPositionCommit:e[5]||(e[5]=t=>a.$emit("position-commit",t)),"onUpdate:size":e[6]||(e[6]=t=>a.$emit("update:size",t)),onSizeChange:e[7]||(e[7]=t=>a.$emit("size-change",t)),onSizeCommit:e[8]||(e[8]=t=>a.$emit("size-commit",t)),"onUpdate:stage":e[9]||(e[9]=t=>a.$emit("update:stage",t)),onStageChange:e[10]||(e[10]=t=>a.$emit("stage-change",t))},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(l.default,(0,n.mergeProps)(a.$attrs,{title:i.title,stages:i.stages,dismissible:i.dismissible,resizable:i.resizable}),{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(a.$slots,"default")]),_:3},16,["title","stages","dismissible","resizable"])]),_:3},8,["open","default-open","position","default-position","size","default-size","min-size","max-size","boundary","stage","default-stage","draggable","resizable","step","disabled","get-gesture-announcement"]))}});exports.default=d;

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

@@ -1 +1 @@
-import{clamp as e}from"../utils/clamp.js";import{announce as t}from"../utils/liveAnnouncer.js";import{FLOATING_PANEL_CONTEXT as i,gestureAnnouncement as a,nextFloatingPanelContentId as n,nextFloatingPanelTitleId as u}from"./context.js";import{computed as o,defineComponent as l,provide as d,ref as s,renderSlot as h,watch as g}from"vue";var r=/* @__PURE__ */l({__name:"FloatingPanel",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","update:position","position-change","update:size","size-change","update:stage","stage-change"],setup(l,{emit:r}){const c=l,f=r,p=s(null),v=s(null),m=s(!1),w=s(!1),z=s(c.defaultOpen),x=s(c.defaultPosition),y=s(c.defaultSize),b=s(c.defaultStage),S=o(()=>c.open??z.value),I=o(()=>c.position??x.value),N=o(()=>c.size??y.value),B=o(()=>c.stage??b.value);function M(e){e.x===I.value.x&&e.y===I.value.y||(void 0===c.position&&(x.value=e),f("update:position",e),f("position-change",e))}function P(){const e=c.boundary;if(e){const t=e.getBoundingClientRect();return{width:t.width,height:t.height}}return{width:window.innerWidth,height:window.innerHeight}}function T(t,i,a,n){return e(t,i,Math.max(i,Math.min(a,n)))}return g(S,(e,t)=>{if(!t||e)return;const i=document.activeElement;(!i||i===document.body||v.value?.contains(i))&&p.value?.focus()}),d(i,{triggerRef:p,contentRef:v,contentId:n(),titleId:u(),open:S,setOpen:function(e){e!==S.value&&(void 0===c.open&&(z.value=e),f("update:open",e),f("open-change",e))},position:I,size:N,minSize:o(()=>c.minSize),maxSize:o(()=>c.maxSize),stage:B,setStage:function(e){e!==B.value&&(void 0===c.stage&&(b.value=e),f("update:stage",e),f("stage-change",e))},moveBy:function(t,i){if(c.disabled||!c.draggable)return;const a=P();M({x:e(I.value.x+t,0,Math.max(0,a.width-N.value.width)),y:e(I.value.y+i,0,Math.max(0,a.height-N.value.height))})},resizeBy:function(e,t,i){if(c.disabled||!c.resizable)return;const a=P();let{x:n,y:u}=I.value,{width:o,height:l}=N.value;const{minSize:d,maxSize:s}=c;if(e.includes("e")&&(o=T(N.value.width+t,d.width,s.width,a.width-n)),e.includes("w")){const e=n+o;o=T(N.value.width-t,d.width,s.width,e),n=e-o}if(e.includes("s")&&(l=T(N.value.height+i,d.height,s.height,a.height-u)),e.includes("n")){const e=u+l;l=T(N.value.height-i,d.height,s.height,e),u=e-l}(function(e){e.width===N.value.width&&e.height===N.value.height||(void 0===c.size&&(y.value=e),f("update:size",e),f("size-change",e))})({width:o,height:l}),M({x:n,y:u})},announceRelease:function(e){const i={position:{x:Math.round(I.value.x),y:Math.round(I.value.y)},size:{width:Math.round(N.value.width),height:Math.round(N.value.height)}},n=(c.getGestureAnnouncement??a)(e,i);n&&t(n)},draggable:o(()=>c.draggable),resizable:o(()=>c.resizable),disabled:o(()=>c.disabled),step:o(()=>c.step),dragging:o(()=>m.value),setDragging:e=>{m.value=e},resizing:o(()=>w.value),setResizing:e=>{w.value=e}}),(e,t)=>h(e.$slots,"default")}});export{r as default};
+import e from"./FloatingPanelAnatomy.vue.js";import t from"./FloatingPanelRoot.vue.js";import{createBlock as a,createVNode as i,defineComponent as o,mergeProps as n,openBlock as s,renderSlot as d,withCtx as l}from"vue";var u=/* @__PURE__ */o({inheritAttrs:!1,__name:"FloatingPanel",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},title:{default:void 0},stages:{default:()=>[]},dismissible:{type:Boolean,default:!0},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:o=>(u,p)=>(s(),a(t,{open:o.open,"default-open":o.defaultOpen,position:o.position,"default-position":o.defaultPosition,size:o.size,"default-size":o.defaultSize,"min-size":o.minSize,"max-size":o.maxSize,boundary:o.boundary,stage:o.stage,"default-stage":o.defaultStage,draggable:o.draggable,resizable:o.resizable,step:o.step,disabled:o.disabled,"get-gesture-announcement":o.getGestureAnnouncement,"onUpdate:open":p[0]||(p[0]=e=>u.$emit("update:open",e)),onOpenChange:p[1]||(p[1]=e=>u.$emit("open-change",e)),onOpenChangeComplete:p[2]||(p[2]=e=>u.$emit("open-change-complete",e)),"onUpdate:position":p[3]||(p[3]=e=>u.$emit("update:position",e)),onPositionChange:p[4]||(p[4]=e=>u.$emit("position-change",e)),onPositionCommit:p[5]||(p[5]=e=>u.$emit("position-commit",e)),"onUpdate:size":p[6]||(p[6]=e=>u.$emit("update:size",e)),onSizeChange:p[7]||(p[7]=e=>u.$emit("size-change",e)),onSizeCommit:p[8]||(p[8]=e=>u.$emit("size-commit",e)),"onUpdate:stage":p[9]||(p[9]=e=>u.$emit("update:stage",e)),onStageChange:p[10]||(p[10]=e=>u.$emit("stage-change",e))},{default:l(()=>[i(e,n(u.$attrs,{title:o.title,stages:o.stages,dismissible:o.dismissible,resizable:o.resizable}),{default:l(()=>[d(u.$slots,"default")]),_:3},16,["title","stages","dismissible","resizable"])]),_:3},8,["open","default-open","position","default-position","size","default-size","min-size","max-size","boundary","stage","default-stage","draggable","resizable","step","disabled","get-gesture-announcement"]))});export{u as default};

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

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

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

@@ -0,0 +1,29 @@
+import type { FloatingPanelStage } from './context.cjs';
+/**
+ * The anatomy a `SkdxFloatingPanel` always draws: a portalled panel whose
+ * header carries the derived title, one stage button per `stages` entry and a
+ * close button unless `dismissible` is `false`, with the default slot as body
+ * and a south-east resize grip while `resizable`. Non-modal.
+ * @internal
+ */
+type __VLS_Props = {
+    title?: string;
+    stages: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
+    dismissible: boolean;
+    resizable: boolean;
+};
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/FloatingPanelAnatomy.vue.d.ts

@@ -0,0 +1,29 @@
+import type { FloatingPanelStage } from './context.js';
+/**
+ * The anatomy a `SkdxFloatingPanel` always draws: a portalled panel whose
+ * header carries the derived title, one stage button per `stages` entry and a
+ * close button unless `dismissible` is `false`, with the default slot as body
+ * and a south-east resize grip while `resizable`. Non-modal.
+ * @internal
+ */
+type __VLS_Props = {
+    title?: string;
+    stages: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
+    dismissible: boolean;
+    resizable: boolean;
+};
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/FloatingPanelAnatomy.vue.js

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

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

@@ -0,0 +1 @@
+const o=require("./FloatingPanelCloseTrigger.vue.cjs"),i=require("./FloatingPanelContent.vue.cjs"),n=require("./FloatingPanelHeader.vue.cjs"),u=require("./FloatingPanelPortal.vue.cjs"),s=require("./FloatingPanelResizeTrigger.vue.cjs"),d=require("./FloatingPanelStageTrigger.vue.cjs"),c=require("./FloatingPanelTitle.vue.cjs");let e=require("vue");var g=(0,e.defineComponent)({inheritAttrs:!1,__name:"FloatingPanelAnatomy",props:{title:{},stages:{},dismissible:{type:Boolean},resizable:{type:Boolean}},setup(t){return(a,l)=>((0,e.openBlock)(),(0,e.createBlock)(u.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(i.default,(0,e.normalizeProps)((0,e.guardReactiveProps)(a.$attrs)),{default:(0,e.withCtx)(()=>[(0,e.createVNode)(n.default,{"aria-label":"Drag to move panel"},{default:(0,e.withCtx)(()=>[t.title?((0,e.openBlock)(),(0,e.createBlock)(c.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.title),1)]),_:1})):(0,e.createCommentVNode)("",!0),((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.stages,r=>((0,e.openBlock)(),(0,e.createBlock)(d.default,{key:r.stage,stage:r.stage},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.label),1)]),_:2},1032,["stage"]))),128)),t.dismissible?((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:1,"aria-label":"Close"},{default:(0,e.withCtx)(()=>[...l[0]||(l[0]=[(0,e.createElementVNode)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[(0,e.createElementVNode)("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})):(0,e.createCommentVNode)("",!0)]),_:1}),(0,e.renderSlot)(a.$slots,"default"),t.resizable?((0,e.openBlock)(),(0,e.createBlock)(s.default,{key:0,direction:"se","aria-label":"Resize panel"})):(0,e.createCommentVNode)("",!0)]),_:3},16)]),_:3}))}});exports.default=g;

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

@@ -0,0 +1 @@
+import e from"./FloatingPanelCloseTrigger.vue.js";import a from"./FloatingPanelContent.vue.js";import t from"./FloatingPanelHeader.vue.js";import l from"./FloatingPanelPortal.vue.js";import o from"./FloatingPanelResizeTrigger.vue.js";import r from"./FloatingPanelStageTrigger.vue.js";import s from"./FloatingPanelTitle.vue.js";import{Fragment as i,createBlock as n,createCommentVNode as m,createElementBlock as d,createElementVNode as g,createTextVNode as u,createVNode as p,defineComponent as f,guardReactiveProps as c,normalizeProps as v,openBlock as k,renderList as P,renderSlot as b,toDisplayString as F,withCtx as h}from"vue";var j=/* @__PURE__ */f({inheritAttrs:!1,__name:"FloatingPanelAnatomy",props:{title:{},stages:{},dismissible:{type:Boolean},resizable:{type:Boolean}},setup:f=>(j,y)=>(k(),n(l,null,{default:h(()=>[p(a,v(c(j.$attrs)),{default:h(()=>[p(t,{"aria-label":"Drag to move panel"},{default:h(()=>[f.title?(k(),n(s,{key:0},{default:h(()=>[u(F(f.title),1)]),_:1})):m("",!0),(k(!0),d(i,null,P(f.stages,e=>(k(),n(r,{key:e.stage,stage:e.stage},{default:h(()=>[u(F(e.label),1)]),_:2},1032,["stage"]))),128)),f.dismissible?(k(),n(e,{key:1,"aria-label":"Close"},{default:h(()=>[...y[0]||(y[0]=[g("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false"},[g("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})],-1)])]),_:1})):m("",!0)]),_:1}),b(j.$slots,"default"),f.resizable?(k(),n(o,{key:0,direction:"se","aria-label":"Resize panel"})):m("",!0)]),_:3},16)]),_:3}))});export{j as default};

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

@@ -1,9 +1,8 @@
 /**
- * Button that closes the panel, returning focus to `SkdxFloatingPanelTrigger`.
- * Usually lives in the header next to the stage triggers, but works anywhere
- * inside `SkdxFloatingPanelContent`. Unaffected by the root's `disabled`, which
- * freezes the panel's geometry rather than sealing it shut. Must be used inside
- * `SkdxFloatingPanel`.
+ * Button that closes the panel and returns focus to the trigger. Usually
+ * lives in the header next to the stage triggers, but works anywhere inside
+ * `SkdxFloatingPanelContent`. Unaffected by the root's `disabled`. Must be
+ * used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,9 +1,8 @@
 /**
- * Button that closes the panel, returning focus to `SkdxFloatingPanelTrigger`.
- * Usually lives in the header next to the stage triggers, but works anywhere
- * inside `SkdxFloatingPanelContent`. Unaffected by the root's `disabled`, which
- * freezes the panel's geometry rather than sealing it shut. Must be used inside
- * `SkdxFloatingPanel`.
+ * Button that closes the panel and returns focus to the trigger. Usually
+ * lives in the header next to the stage triggers, but works anywhere inside
+ * `SkdxFloatingPanelContent`. Unaffected by the root's `disabled`. Must be
+ * used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,25 +1,23 @@
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.cjs';
 /**
  * The movable surface: `role="dialog"` with **`aria-modal="false"`**, named by
- * `SkdxFloatingPanelTitle` through `aria-labelledby`. It traps nothing, locks
- * nothing, and covers nothing — the page behind it keeps working, which is the
- * whole reason to reach for a panel instead of a dialog.
+ * `SkdxFloatingPanelTitle` through `aria-labelledby` — emitted only once that
+ * part has registered itself. It traps nothing, locks nothing, and covers
+ * nothing — the page behind it keeps working.
  *
- * Closes on Escape or on pointer-down outside itself and its trigger, each
- * reported to `escape-key-down`/`pointer-down-outside` and, for the outside
- * paths, to `interact-outside` first with the same event — so one
- * `event.preventDefault()` vetoes the dismissal either way. Focus moving
- * outside is reported to `focus-outside` but never closes the panel: a
- * non-modal window that vanished when you tabbed back to the page would be
- * unusable.
+ * Closes on Escape or pointer-down outside itself and its trigger, each
+ * reported to `escape-key-down`/`pointer-down-outside` and, for outside
+ * interactions, to `interact-outside` first with the same event — so one
+ * `preventDefault()` vetoes the dismissal either way. Focus moving outside is
+ * reported to `focus-outside` but never closes the panel, since a non-modal
+ * window that vanished when you tabbed back to the page would be unusable.
  *
  * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
- * `-height` so a consumer can position it entirely from CSS, and exposes
+ * `-height` so a consumer can position it entirely from CSS. Exposes
  * `data-state`, `data-stage`, `data-dragging`, `data-resizing`, and
- * `data-disabled`. At `stage="maximized"` the published width and height become
- * `100%` rather than a measured pixel value — nothing has to observe the
- * boundary for the panel to fill it. At `stage="minimized"` the height becomes
- * `auto`, collapsing the panel to whatever its header needs.
+ * `data-disabled`. At `stage="maximized"` the published width and height
+ * become `100%` rather than a measured pixel value. At `stage="minimized"`
+ * the height becomes `auto`, collapsing the panel to whatever its header needs.
  *
  * Mounts only while open unless `forceMount` is set. Must be used inside
  * `SkdxFloatingPanel`.

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

@@ -1,25 +1,23 @@
 import { type FocusOutsideEvent, type InteractOutsideEvent } from '../utils/useDismiss.js';
 /**
  * The movable surface: `role="dialog"` with **`aria-modal="false"`**, named by
- * `SkdxFloatingPanelTitle` through `aria-labelledby`. It traps nothing, locks
- * nothing, and covers nothing — the page behind it keeps working, which is the
- * whole reason to reach for a panel instead of a dialog.
+ * `SkdxFloatingPanelTitle` through `aria-labelledby` — emitted only once that
+ * part has registered itself. It traps nothing, locks nothing, and covers
+ * nothing — the page behind it keeps working.
  *
- * Closes on Escape or on pointer-down outside itself and its trigger, each
- * reported to `escape-key-down`/`pointer-down-outside` and, for the outside
- * paths, to `interact-outside` first with the same event — so one
- * `event.preventDefault()` vetoes the dismissal either way. Focus moving
- * outside is reported to `focus-outside` but never closes the panel: a
- * non-modal window that vanished when you tabbed back to the page would be
- * unusable.
+ * Closes on Escape or pointer-down outside itself and its trigger, each
+ * reported to `escape-key-down`/`pointer-down-outside` and, for outside
+ * interactions, to `interact-outside` first with the same event — so one
+ * `preventDefault()` vetoes the dismissal either way. Focus moving outside is
+ * reported to `focus-outside` but never closes the panel, since a non-modal
+ * window that vanished when you tabbed back to the page would be unusable.
  *
  * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
- * `-height` so a consumer can position it entirely from CSS, and exposes
+ * `-height` so a consumer can position it entirely from CSS. Exposes
  * `data-state`, `data-stage`, `data-dragging`, `data-resizing`, and
- * `data-disabled`. At `stage="maximized"` the published width and height become
- * `100%` rather than a measured pixel value — nothing has to observe the
- * boundary for the panel to fill it. At `stage="minimized"` the height becomes
- * `auto`, collapsing the panel to whatever its header needs.
+ * `data-disabled`. At `stage="maximized"` the published width and height
+ * become `100%` rather than a measured pixel value. At `stage="minimized"`
+ * the height becomes `auto`, collapsing the panel to whatever its header needs.
  *
  * Mounts only while open unless `forceMount` is set. Must be used inside
  * `SkdxFloatingPanel`.

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

@@ -1 +1 @@
-const p=require("../utils/composeRefs.cjs"),g=require("../utils/useDismiss.cjs"),x=require("./context.cjs");let e=require("vue");var m=["id","aria-labelledby","data-state","data-stage","data-dragging","data-resizing","data-disabled"],_=(0,e.defineComponent)({__name:"FloatingPanelContent",props:{forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(s,{emit:d}){const a=d,t=(0,e.inject)(x.FLOATING_PANEL_CONTEXT);if(!t)throw new Error("SkdxFloatingPanelContent must be used within SkdxFloatingPanel.");const o=(0,e.ref)(null),l=p.composeRefs(o,t.contentRef);g.useDismiss({enabled:t.open,onEscapeKeyDown:n=>{a("escape-key-down",n),n.defaultPrevented||t.setOpen(!1)},onPointerDownOutside:n=>{a("pointer-down-outside",n),n.defaultPrevented||t.setOpen(!1)},onFocusOutside:n=>a("focus-outside",n),onInteractOutside:n=>a("interact-outside",n)},[o,t.triggerRef]);const r=(0,e.computed)(()=>{const n=t.stage.value;if(n==="maximized")return{"--skdx-floating-panel-x":"0px","--skdx-floating-panel-y":"0px","--skdx-floating-panel-width":"100%","--skdx-floating-panel-height":"100%"};const{x:i,y:u}=t.position.value,{width:f,height:c}=t.size.value;return{"--skdx-floating-panel-x":`${i}px`,"--skdx-floating-panel-y":`${u}px`,"--skdx-floating-panel-width":`${f}px`,"--skdx-floating-panel-height":n==="minimized"?"auto":`${c}px`}});return(n,i)=>s.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-floating-panel__content","data-part":"content",id:(0,e.unref)(t).contentId,ref:(0,e.unref)(l),role:"dialog","aria-modal":"false","aria-labelledby":(0,e.unref)(t).titleId,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-stage":(0,e.unref)(t).stage.value,"data-dragging":(0,e.unref)(t).dragging.value?"":void 0,"data-resizing":(0,e.unref)(t).resizing.value?"":void 0,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0,style:(0,e.normalizeStyle)(r.value)},[(0,e.renderSlot)(n.$slots,"default")],12,m)):(0,e.createCommentVNode)("",!0)}});exports.default=_;
+const p=require("../utils/composeRefs.cjs"),g=require("../utils/useDismiss.cjs"),x=require("./context.cjs");let e=require("vue");var m=["id","aria-labelledby","data-state","data-stage","data-dragging","data-resizing","data-disabled"],v=(0,e.defineComponent)({__name:"FloatingPanelContent",props:{forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(s,{emit:d}){const a=d,t=(0,e.inject)(x.FLOATING_PANEL_CONTEXT);if(!t)throw new Error("SkdxFloatingPanelContent must be used within SkdxFloatingPanel.");const o=(0,e.ref)(null),l=p.composeRefs(o,t.contentRef);g.useDismiss({enabled:t.open,onEscapeKeyDown:n=>{a("escape-key-down",n),n.defaultPrevented||t.setOpen(!1)},onPointerDownOutside:n=>{a("pointer-down-outside",n),n.defaultPrevented||t.setOpen(!1)},onFocusOutside:n=>a("focus-outside",n),onInteractOutside:n=>a("interact-outside",n)},[o,t.triggerRef]);const r=(0,e.computed)(()=>{const n=t.stage.value;if(n==="maximized")return{"--skdx-floating-panel-x":"0px","--skdx-floating-panel-y":"0px","--skdx-floating-panel-width":"100%","--skdx-floating-panel-height":"100%"};const{x:i,y:u}=t.position.value,{width:f,height:c}=t.size.value;return{"--skdx-floating-panel-x":`${i}px`,"--skdx-floating-panel-y":`${u}px`,"--skdx-floating-panel-width":`${f}px`,"--skdx-floating-panel-height":n==="minimized"?"auto":`${c}px`}});return(n,i)=>s.forceMount||(0,e.unref)(t).open.value?((0,e.openBlock)(),(0,e.createElementBlock)("div",{key:0,class:"skdx-floating-panel__content","data-part":"content",id:(0,e.unref)(t).contentId,ref:(0,e.unref)(l),role:"dialog","aria-modal":"false","aria-labelledby":(0,e.unref)(t).hasTitle.value?(0,e.unref)(t).titleId:void 0,"data-state":(0,e.unref)(t).open.value?"open":"closed","data-stage":(0,e.unref)(t).stage.value,"data-dragging":(0,e.unref)(t).dragging.value?"":void 0,"data-resizing":(0,e.unref)(t).resizing.value?"":void 0,"data-disabled":(0,e.unref)(t).disabled.value?"":void 0,style:(0,e.normalizeStyle)(r.value)},[(0,e.renderSlot)(n.$slots,"default")],12,m)):(0,e.createCommentVNode)("",!0)}});exports.default=v;

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

@@ -1 +1 @@
-import{composeRefs as e}from"../utils/composeRefs.js";import{useDismiss as t}from"../utils/useDismiss.js";import{FLOATING_PANEL_CONTEXT as a}from"./context.js";import{computed as n,createCommentVNode as o,createElementBlock as s,defineComponent as i,inject as d,normalizeStyle as l,openBlock as r,ref as u,renderSlot as p,unref as g}from"vue";var f=["id","aria-labelledby","data-state","data-stage","data-dragging","data-resizing","data-disabled"],c=/* @__PURE__ */i({__name:"FloatingPanelContent",props:{forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(i,{emit:c}){const m=c,x=d(a);if(!x)throw new Error("SkdxFloatingPanelContent must be used within SkdxFloatingPanel.");const v=u(null),k=e(v,x.contentRef);t({enabled:x.open,onEscapeKeyDown:e=>{m("escape-key-down",e),e.defaultPrevented||x.setOpen(!1)},onPointerDownOutside:e=>{m("pointer-down-outside",e),e.defaultPrevented||x.setOpen(!1)},onFocusOutside:e=>m("focus-outside",e),onInteractOutside:e=>m("interact-outside",e)},[v,x.triggerRef]);const w=n(()=>{const e=x.stage.value;if("maximized"===e)return{"--skdx-floating-panel-x":"0px","--skdx-floating-panel-y":"0px","--skdx-floating-panel-width":"100%","--skdx-floating-panel-height":"100%"};const{x:t,y:a}=x.position.value,{width:n,height:o}=x.size.value;return{"--skdx-floating-panel-x":`${t}px`,"--skdx-floating-panel-y":`${a}px`,"--skdx-floating-panel-width":`${n}px`,"--skdx-floating-panel-height":"minimized"===e?"auto":`${o}px`}});return(e,t)=>i.forceMount||g(x).open.value?(r(),s("div",{key:0,class:"skdx-floating-panel__content","data-part":"content",id:g(x).contentId,ref:g(k),role:"dialog","aria-modal":"false","aria-labelledby":g(x).titleId,"data-state":g(x).open.value?"open":"closed","data-stage":g(x).stage.value,"data-dragging":g(x).dragging.value?"":void 0,"data-resizing":g(x).resizing.value?"":void 0,"data-disabled":g(x).disabled.value?"":void 0,style:l(w.value)},[p(e.$slots,"default")],12,f)):o("",!0)}});export{c as default};
+import{composeRefs as e}from"../utils/composeRefs.js";import{useDismiss as t}from"../utils/useDismiss.js";import{FLOATING_PANEL_CONTEXT as a}from"./context.js";import{computed as n,createCommentVNode as o,createElementBlock as s,defineComponent as i,inject as d,normalizeStyle as l,openBlock as r,ref as u,renderSlot as p,unref as g}from"vue";var f=["id","aria-labelledby","data-state","data-stage","data-dragging","data-resizing","data-disabled"],c=/* @__PURE__ */i({__name:"FloatingPanelContent",props:{forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(i,{emit:c}){const m=c,x=d(a);if(!x)throw new Error("SkdxFloatingPanelContent must be used within SkdxFloatingPanel.");const v=u(null),k=e(v,x.contentRef);t({enabled:x.open,onEscapeKeyDown:e=>{m("escape-key-down",e),e.defaultPrevented||x.setOpen(!1)},onPointerDownOutside:e=>{m("pointer-down-outside",e),e.defaultPrevented||x.setOpen(!1)},onFocusOutside:e=>m("focus-outside",e),onInteractOutside:e=>m("interact-outside",e)},[v,x.triggerRef]);const h=n(()=>{const e=x.stage.value;if("maximized"===e)return{"--skdx-floating-panel-x":"0px","--skdx-floating-panel-y":"0px","--skdx-floating-panel-width":"100%","--skdx-floating-panel-height":"100%"};const{x:t,y:a}=x.position.value,{width:n,height:o}=x.size.value;return{"--skdx-floating-panel-x":`${t}px`,"--skdx-floating-panel-y":`${a}px`,"--skdx-floating-panel-width":`${n}px`,"--skdx-floating-panel-height":"minimized"===e?"auto":`${o}px`}});return(e,t)=>i.forceMount||g(x).open.value?(r(),s("div",{key:0,class:"skdx-floating-panel__content","data-part":"content",id:g(x).contentId,ref:g(k),role:"dialog","aria-modal":"false","aria-labelledby":g(x).hasTitle.value?g(x).titleId:void 0,"data-state":g(x).open.value?"open":"closed","data-stage":g(x).stage.value,"data-dragging":g(x).dragging.value?"":void 0,"data-resizing":g(x).resizing.value?"":void 0,"data-disabled":g(x).disabled.value?"":void 0,style:l(h.value)},[p(e.$slots,"default")],12,f)):o("",!0)}});export{c as default};

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

@@ -1,17 +1,12 @@
 /**
- * The panel's drag handle — the bar you grab to move the window, and the
- * natural home for `SkdxFloatingPanelTitle` and the close/stage buttons.
- *
- * **Keyboard-operable, not mouse-only.** While focused, the arrow keys move the
- * panel by the root's `step` and Shift+arrow by ten times that, clamped to the
- * boundary exactly as a drag would be. The final position is announced politely
- * once, on release — never per frame. Under `dir="rtl"` the horizontal arrows
- * mirror, like every other horizontal interaction in the package.
- *
- * It becomes focusable (`tabindex="0"`) whenever dragging is actually
- * available, so give it an `aria-label` — a focusable bar with no name tells a
- * screen-reader user nothing about what the arrow keys will do. Must be used
- * inside `SkdxFloatingPanel`.
+ * The panel's drag handle — the bar you grab to move the window and natural
+ * home for `SkdxFloatingPanelTitle` and the close/stage buttons. **Keyboard-
+ * operable**: while focused, arrow keys move the panel by the root's `step`
+ * and Shift+arrow by ten times that, clamped to the boundary. The final
+ * position is announced politely once, on release. Under `dir="rtl"` the
+ * horizontal arrows mirror. Give it an `aria-label` — a focusable bar with no
+ * name tells a screen-reader user nothing about what the arrow keys will do.
+ * Must be used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

@@ -1,17 +1,12 @@
 /**
- * The panel's drag handle — the bar you grab to move the window, and the
- * natural home for `SkdxFloatingPanelTitle` and the close/stage buttons.
- *
- * **Keyboard-operable, not mouse-only.** While focused, the arrow keys move the
- * panel by the root's `step` and Shift+arrow by ten times that, clamped to the
- * boundary exactly as a drag would be. The final position is announced politely
- * once, on release — never per frame. Under `dir="rtl"` the horizontal arrows
- * mirror, like every other horizontal interaction in the package.
- *
- * It becomes focusable (`tabindex="0"`) whenever dragging is actually
- * available, so give it an `aria-label` — a focusable bar with no name tells a
- * screen-reader user nothing about what the arrow keys will do. Must be used
- * inside `SkdxFloatingPanel`.
+ * The panel's drag handle — the bar you grab to move the window and natural
+ * home for `SkdxFloatingPanelTitle` and the close/stage buttons. **Keyboard-
+ * operable**: while focused, arrow keys move the panel by the root's `step`
+ * and Shift+arrow by ten times that, clamped to the boundary. The final
+ * position is announced politely once, on release. Under `dir="rtl"` the
+ * horizontal arrows mirror. Give it an `aria-label` — a focusable bar with no
+ * name tells a screen-reader user nothing about what the arrow keys will do.
+ * Must be used inside `SkdxFloatingPanel`.
  */
 type __VLS_Props = {};
 declare var __VLS_1: {};

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

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