@skdx/vue 0.27.0 → 0.29.0

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

@@ -1,176 +1,130 @@
-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.
- *
- * 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.
- *
- * 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.
+ * A draggable, resizable, non-modal floating panel drawing the derived anatomy: portalled panel, header, and body slot.
  *
  * @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 | undefined;
+    /** 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 and omitting `aria-labelledby` when absent.
+     * @default undefined — no title is rendered.
      */
-    open?: boolean;
+    title?: string | undefined;
     /**
-     * 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`.
+     * @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`.
      * @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.
-     */
+    position?: FloatingPanelPosition | undefined;
+    /** 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.
      * @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 }
-     */
+    size?: FloatingPanelSize | undefined;
+    /** 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.
      * @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.
-     */
+    boundary?: Element | null;
+    /** The panel's window state, for controlled usage via `v-model:stage`. @default undefined — uncontrolled. */
+    stage?: FloatingPanelStage | undefined;
+    /** 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;
+    getGestureAnnouncement?: ((gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string) | undefined;
 };
-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;
-    "onUpdate:position"?: ((position: FloatingPanelPosition) => any) | undefined;
-    "onPosition-change"?: ((position: FloatingPanelPosition) => any) | undefined;
-    "onUpdate:size"?: ((size: FloatingPanelSize) => any) | undefined;
-    "onSize-change"?: ((size: FloatingPanelSize) => any) | undefined;
-    "onUpdate:stage"?: ((stage: FloatingPanelStage) => any) | undefined;
-    "onStage-change"?: ((stage: FloatingPanelStage) => any) | undefined;
+    "onUpdate:open"?: (open: boolean) => any;
+    "onOpen-change"?: (open: boolean) => any;
+    "onOpen-change-complete"?: (open: boolean) => any;
+    "onUpdate:position"?: (position: FloatingPanelPosition) => any;
+    "onPosition-change"?: (position: FloatingPanelPosition) => any;
+    "onPosition-commit"?: (position: FloatingPanelPosition) => any;
+    "onUpdate:size"?: (size: FloatingPanelSize) => any;
+    "onSize-change"?: (size: FloatingPanelSize) => any;
+    "onSize-commit"?: (size: FloatingPanelSize) => any;
+    "onUpdate:stage"?: (stage: FloatingPanelStage) => any;
+    "onStage-change"?: (stage: FloatingPanelStage) => any;
 }>, {
     disabled: boolean;
-    open: boolean;
+    dismissible: boolean;
+    open: boolean | undefined;
     defaultOpen: boolean;
-    position: FloatingPanelPosition;
-    size: FloatingPanelSize;
-    boundary: HTMLElement | null;
     step: number;
+    draggable: boolean;
+    boundary: Element | null;
     resizable: boolean;
     defaultSize: FloatingPanelSize;
     minSize: FloatingPanelSize;
     maxSize: FloatingPanelSize;
+    stages: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
     defaultPosition: FloatingPanelPosition;
-    stage: FloatingPanelStage;
     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>;
 export default _default;

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"),s=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:{},stages:{default:()=>[]},dismissible:{type:Boolean,default:!0},position:{},defaultPosition:{default:()=>({x:0,y:0})},size:{},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:{},defaultStage:{default:"default"},draggable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},step:{default:10},disabled:{type:Boolean,default:!1},getGestureAnnouncement:{}},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){const o=i;return(a,e)=>((0,n.openBlock)(),(0,n.createBlock)(s.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:o.stages,dismissible:o.dismissible,resizable:o.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 l,withCtx as d}from"vue";var p=/* @__PURE__ */o({inheritAttrs:!1,__name:"FloatingPanel",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},title:{},stages:{default:()=>[]},dismissible:{type:Boolean,default:!0},position:{},defaultPosition:{default:()=>({x:0,y:0})},size:{},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:{},defaultStage:{default:"default"},draggable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},step:{default:10},disabled:{type:Boolean,default:!1},getGestureAnnouncement:{}},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){const p=o;return(u,m)=>(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":m[0]||(m[0]=e=>u.$emit("update:open",e)),onOpenChange:m[1]||(m[1]=e=>u.$emit("open-change",e)),onOpenChangeComplete:m[2]||(m[2]=e=>u.$emit("open-change-complete",e)),"onUpdate:position":m[3]||(m[3]=e=>u.$emit("update:position",e)),onPositionChange:m[4]||(m[4]=e=>u.$emit("position-change",e)),onPositionCommit:m[5]||(m[5]=e=>u.$emit("position-commit",e)),"onUpdate:size":m[6]||(m[6]=e=>u.$emit("update:size",e)),onSizeChange:m[7]||(m[7]=e=>u.$emit("size-change",e)),onSizeCommit:m[8]||(m[8]=e=>u.$emit("size-commit",e)),"onUpdate:stage":m[9]||(m[9]=e=>u.$emit("update:stage",e)),onStageChange:m[10]||(m[10]=e=>u.$emit("stage-change",e))},{default:d(()=>[i(e,n(u.$attrs,{title:o.title,stages:p.stages,dismissible:p.dismissible,resizable:p.resizable}),{default:d(()=>[l(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{p 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,26 @@
+import type { FloatingPanelStage } from './context.cjs';
+/**
+ * The anatomy a `SkdxFloatingPanel` always draws: a portalled panel with header, stage buttons, and a resize grip.
+ * @internal
+ */
+type __VLS_Props = {
+    title?: string | undefined;
+    stages: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
+    dismissible: boolean;
+    resizable: boolean;
+};
+declare var __VLS_23: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_23) => 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,26 @@
+import type { FloatingPanelStage } from './context.js';
+/**
+ * The anatomy a `SkdxFloatingPanel` always draws: a portalled panel with header, stage buttons, and a resize grip.
+ * @internal
+ */
+type __VLS_Props = {
+    title?: string | undefined;
+    stages: readonly {
+        stage: FloatingPanelStage;
+        label: string;
+    }[];
+    dismissible: boolean;
+    resizable: boolean;
+};
+declare var __VLS_23: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_23) => 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 l=require("../utils/Glyph.vue.cjs"),i=require("./FloatingPanelCloseTrigger.vue.cjs"),o=require("./FloatingPanelContent.vue.cjs"),n=require("./FloatingPanelHeader.vue.cjs"),u=require("./FloatingPanelPortal.vue.cjs"),s=require("./FloatingPanelResizeTrigger.vue.cjs"),c=require("./FloatingPanelStageTrigger.vue.cjs"),d=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(r,f)=>((0,e.openBlock)(),(0,e.createBlock)(u.default,null,{default:(0,e.withCtx)(()=>[(0,e.createVNode)(o.default,(0,e.normalizeProps)((0,e.guardReactiveProps)(r.$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)(d.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,a=>((0,e.openBlock)(),(0,e.createBlock)(c.default,{key:a.stage,stage:a.stage},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(a.label),1)]),_:2},1032,["stage"]))),128)),t.dismissible?((0,e.openBlock)(),(0,e.createBlock)(i.default,{key:1,"aria-label":"Close"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(l.default,{name:"close"})]),_:1})):(0,e.createCommentVNode)("",!0)]),_:1}),(0,e.renderSlot)(r.$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"../utils/Glyph.vue.js";import a from"./FloatingPanelCloseTrigger.vue.js";import t from"./FloatingPanelContent.vue.js";import l from"./FloatingPanelHeader.vue.js";import o from"./FloatingPanelPortal.vue.js";import s from"./FloatingPanelResizeTrigger.vue.js";import r from"./FloatingPanelStageTrigger.vue.js";import i from"./FloatingPanelTitle.vue.js";import{Fragment as n,createBlock as m,createCommentVNode as g,createElementBlock as p,createTextVNode as u,createVNode as d,defineComponent as f,guardReactiveProps as v,normalizeProps as c,openBlock as P,renderList as y,renderSlot as F,toDisplayString as b,withCtx as j}from"vue";var _=/* @__PURE__ */f({inheritAttrs:!1,__name:"FloatingPanelAnatomy",props:{title:{},stages:{},dismissible:{type:Boolean},resizable:{type:Boolean}},setup:f=>(_,k)=>(P(),m(o,null,{default:j(()=>[d(t,c(v(_.$attrs)),{default:j(()=>[d(l,{"aria-label":"Drag to move panel"},{default:j(()=>[f.title?(P(),m(i,{key:0},{default:j(()=>[u(b(f.title),1)]),_:1})):g("",!0),(P(!0),p(n,null,y(f.stages,e=>(P(),m(r,{key:e.stage,stage:e.stage},{default:j(()=>[u(b(e.label),1)]),_:2},1032,["stage"]))),128)),f.dismissible?(P(),m(a,{key:1,"aria-label":"Close"},{default:j(()=>[d(e,{name:"close"})]),_:1})):g("",!0)]),_:1}),F(_.$slots,"default"),f.resizable?(P(),m(s,{key:0,direction:"se","aria-label":"Resize panel"})):g("",!0)]),_:3},16)]),_:3}))});export{_ as default};

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

@@ -1,10 +1,4 @@
-/**
- * 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, unaffected by the root's `disabled`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -1,10 +1,4 @@
-/**
- * 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, unaffected by the root's `disabled`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -1 +1 @@
-const l=require("./context.cjs");let e=require("vue");var o=(0,e.defineComponent)({__name:"FloatingPanelCloseTrigger",setup(a){const t=(0,e.inject)(l.FLOATING_PANEL_CONTEXT);if(!t)throw new Error("SkdxFloatingPanelCloseTrigger must be used within SkdxFloatingPanel.");return(r,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-floating-panel__close-trigger","data-part":"close-trigger",type:"button",onClick:n[0]||(n[0]=i=>(0,e.unref)(t).setOpen(!1))},[(0,e.renderSlot)(r.$slots,"default")]))}});exports.default=o;
+const l=require("../utils/injectRequired.cjs"),o=require("./context.cjs");let e=require("vue");var i=(0,e.defineComponent)({__name:"FloatingPanelCloseTrigger",setup(u){const r=l.injectRequired(o.FLOATING_PANEL_CONTEXT,"SkdxFloatingPanelCloseTrigger must be used within SkdxFloatingPanel.");return(n,t)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-floating-panel__close-trigger","data-part":"close-trigger",type:"button",onClick:t[0]||(t[0]=a=>(0,e.unref)(r).setOpen(!1))},[(0,e.renderSlot)(n.$slots,"default")]))}});exports.default=i;

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

@@ -1 +1 @@
-import{FLOATING_PANEL_CONTEXT as e}from"./context.js";import{createElementBlock as t,defineComponent as o,inject as n,openBlock as a,renderSlot as r,unref as s}from"vue";var l=/* @__PURE__ */o({__name:"FloatingPanelCloseTrigger",setup(o){const l=n(e);if(!l)throw new Error("SkdxFloatingPanelCloseTrigger must be used within SkdxFloatingPanel.");return(e,o)=>(a(),t("button",{class:"skdx-floating-panel__close-trigger","data-part":"close-trigger",type:"button",onClick:o[0]||(o[0]=e=>s(l).setOpen(!1))},[r(e.$slots,"default")]))}});export{l as default};
+import{injectRequired as e}from"../utils/injectRequired.js";import{FLOATING_PANEL_CONTEXT as t}from"./context.js";import{createElementBlock as o,defineComponent as n,openBlock as a,renderSlot as r,unref as s}from"vue";var l=/* @__PURE__ */n({__name:"FloatingPanelCloseTrigger",setup(n){const l=e(t,"SkdxFloatingPanelCloseTrigger must be used within SkdxFloatingPanel.");return(e,t)=>(a(),o("button",{class:"skdx-floating-panel__close-trigger","data-part":"close-trigger",type:"button",onClick:t[0]||(t[0]=e=>s(l).setOpen(!1))},[r(e.$slots,"default")]))}});export{l as default};

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

@@ -1,28 +1,6 @@
 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.
- *
- * 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.
- *
- * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
- * `-height` so a consumer can position it entirely from CSS, and 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.
- *
- * Mounts only while open unless `forceMount` is set. Must be used inside
- * `SkdxFloatingPanel`.
+ * The movable, non-modal surface — `role="dialog"` with `aria-modal="false"` — that closes on Escape or an outside pointer-down.
  */
 type __VLS_Props = {
     /**
@@ -42,10 +20,10 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "pointer-down-outside": (event: PointerEvent) => any;
     "interact-outside": (event: InteractOutsideEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
-    "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
-    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
-    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+    "onFocus-outside"?: (event: FocusOutsideEvent) => any;
+    "onEscape-key-down"?: (event: KeyboardEvent) => any;
+    "onPointer-down-outside"?: (event: PointerEvent) => any;
+    "onInteract-outside"?: (event: InteractOutsideEvent) => any;
 }>, {
     forceMount: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,28 +1,6 @@
 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.
- *
- * 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.
- *
- * Publishes its geometry as `--skdx-floating-panel-x` / `-y` / `-width` /
- * `-height` so a consumer can position it entirely from CSS, and 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.
- *
- * Mounts only while open unless `forceMount` is set. Must be used inside
- * `SkdxFloatingPanel`.
+ * The movable, non-modal surface — `role="dialog"` with `aria-modal="false"` — that closes on Escape or an outside pointer-down.
  */
 type __VLS_Props = {
     /**
@@ -42,10 +20,10 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "pointer-down-outside": (event: PointerEvent) => any;
     "interact-outside": (event: InteractOutsideEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onFocus-outside"?: ((event: FocusOutsideEvent) => any) | undefined;
-    "onEscape-key-down"?: ((event: KeyboardEvent) => any) | undefined;
-    "onPointer-down-outside"?: ((event: PointerEvent) => any) | undefined;
-    "onInteract-outside"?: ((event: InteractOutsideEvent) => any) | undefined;
+    "onFocus-outside"?: (event: FocusOutsideEvent) => any;
+    "onEscape-key-down"?: (event: KeyboardEvent) => any;
+    "onPointer-down-outside"?: (event: PointerEvent) => any;
+    "onInteract-outside"?: (event: InteractOutsideEvent) => any;
 }>, {
     forceMount: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

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{injectRequired as e}from"../utils/injectRequired.js";import{composeRefs as t}from"../utils/composeRefs.js";import{useDismiss as a}from"../utils/useDismiss.js";import{FLOATING_PANEL_CONTEXT as n}from"./context.js";import{computed as o,createCommentVNode as s,createElementBlock as i,defineComponent as d,normalizeStyle as l,openBlock as r,ref as u,renderSlot as p,unref as g}from"vue";var c=["id","aria-labelledby","data-state","data-stage","data-dragging","data-resizing","data-disabled"],f=/* @__PURE__ */d({__name:"FloatingPanelContent",props:{forceMount:{type:Boolean,default:!1}},emits:["escape-key-down","pointer-down-outside","focus-outside","interact-outside"],setup(d,{emit:f}){const m=f,x=e(n,"SkdxFloatingPanelContent must be used within SkdxFloatingPanel."),v=u(null),k=t(v,x.contentRef);a({enabled:x.open,onEscapeKeyDown:e=>{(e=>{const t=e?.closest?.(".skdx-floating-panel__content, .skdx-floating-panel__trigger");return!!t&&!(e=>!(!v.value?.contains(e)&&!x.triggerRef.value?.contains(e)))(t)})(e.target)||(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 y=o(()=>{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)=>d.forceMount||g(x).open.value?(r(),i("div",{key:0,id:g(x).contentId,ref:g(k),class:"skdx-floating-panel__content","data-part":"content",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(y.value)},[p(e.$slots,"default")],12,c)):s("",!0)}});export{f as default};

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

@@ -1,18 +1,4 @@
-/**
- * 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, keyboard-operable via arrow keys and the natural home for its title and buttons. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

@@ -1,18 +1,4 @@
-/**
- * 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, keyboard-operable via arrow keys and the natural home for its title and buttons. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

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

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{injectRequired as e}from"../utils/injectRequired.js";import{directionalKey as a,useDirection as t}from"../utils/direction.js";import{FLOATING_PANEL_CONTEXT as r}from"./context.js";import{computed as n,createElementBlock as o,defineComponent 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__ */i({__name:"FloatingPanelHeader",setup(i){const g=e(r,"SkdxFloatingPanelHeader must be used within SkdxFloatingPanel."),f=t(),p=u(null),m=u(!1),y=n(()=>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 b(e){p.value&&(e.currentTarget.releasePointerCapture?.(e.pointerId),p.value=null,g.setDragging(!1),g.announceRelease("move"))}function A(e){if(!y.value)return;const t=g.step.value*(e.shiftKey?10:1),r=function(e,a){switch(e){case"ArrowLeft":return{dx:-a,dy:0};case"ArrowRight":return{dx:a,dy:0};case"ArrowUp":return{dx:0,dy:-a};case"ArrowDown":return{dx:0,dy:a};default:return null}}(a(e.key,e.currentTarget,f()),t);r&&(e.preventDefault(),m.value=!0,g.moveBy(r.dx,r.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",role:"group","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:y.value?"move":void 0}),onPointerdown:x,onPointermove:w,onPointerup:b,onPointercancel:b,onKeydown:A,onKeyup:h},[s(e.$slots,"default")],44,v))}});export{g as default};