@skdx/vue 0.26.0

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

@@ -0,0 +1,181 @@
+import { type FloatingPanelGeometry, type FloatingPanelGesture, type FloatingPanelPosition, type FloatingPanelSize, type FloatingPanelStage } from './context.cjs';
+/**
+ * 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.
+ *
+ * @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>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Whether the panel is open, for controlled usage via `v-model:open`.
+     * @default undefined — uncontrolled, the panel tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the panel is initially open, for uncontrolled usage.
+     * @default false — the panel is closed until the trigger is pressed.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The panel's top-left corner in CSS pixels, measured from the boundary's
+     * top-left, for controlled usage via `v-model:position`. Pair it with
+     * `@position-change` or the panel will refuse to move.
+     * @default undefined — uncontrolled, the panel tracks its own position internally.
+     */
+    position?: FloatingPanelPosition;
+    /**
+     * Where the panel starts, for uncontrolled usage.
+     * @default { x: 0, y: 0 } — the top-left corner of the boundary.
+     */
+    defaultPosition?: FloatingPanelPosition;
+    /**
+     * The panel's box in CSS pixels, for controlled usage via `v-model:size`.
+     * Pair it with `@size-change` or the panel will refuse to resize.
+     * @default undefined — uncontrolled, the panel tracks its own size internally.
+     */
+    size?: FloatingPanelSize;
+    /**
+     * The panel's starting box, for uncontrolled usage.
+     * @default { width: 320, height: 240 }
+     */
+    defaultSize?: FloatingPanelSize;
+    /**
+     * Smallest box the panel can be resized to. Every resize is clamped to it,
+     * so a consumer never has to defend against a zero-height panel.
+     * @default { width: 160, height: 120 }
+     */
+    minSize?: FloatingPanelSize;
+    /**
+     * Largest box the panel can be resized to.
+     * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
+     */
+    maxSize?: FloatingPanelSize;
+    /**
+     * Element the panel may not be dragged or resized out of. Position is
+     * measured from this element's top-left corner, so it must be the panel's
+     * containing block for the published geometry to line up.
+     * @default null — the viewport constrains the panel instead.
+     */
+    boundary?: HTMLElement | null;
+    /**
+     * The panel's window state, for controlled usage via `v-model:stage`.
+     * @default undefined — uncontrolled, the panel tracks its own stage internally.
+     */
+    stage?: FloatingPanelStage;
+    /**
+     * The panel's starting window state, for uncontrolled usage.
+     * @default 'default' — the panel uses its own position and size.
+     */
+    defaultStage?: FloatingPanelStage;
+    /**
+     * Whether the header can move the panel. `false` leaves the header
+     * focusable only if you make it so, and drops its `move` cursor.
+     * @default true — the header is a drag handle and a keyboard mover.
+     */
+    draggable?: boolean;
+    /**
+     * Whether resize triggers do anything. `false` makes every
+     * `SkdxFloatingPanelResizeTrigger` inert and non-focusable, so a fixed-size
+     * panel can still render its grips for visual symmetry.
+     * @default true — every grip resizes and takes a tab stop.
+     */
+    resizable?: boolean;
+    /**
+     * How far one arrow key moves or resizes the panel, in pixels.
+     * Shift+arrow uses ten times this.
+     * @default 10 — one arrow key is a 10px nudge, one Shift+arrow a 100px jump.
+     */
+    step?: number;
+    /**
+     * Freezes the panel's geometry: drag, resize and stage changes are all
+     * refused and their triggers leave the tab order. Opening and closing still
+     * work — a disabled panel is inert, not unreachable.
+     * @default false — the panel is fully interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Words the polite live-region message announced once per drag or resize, on
+     * release. The numbers are already rounded to whole CSS pixels. Return `''`
+     * to announce nothing.
+     * @default undefined — the built-in English wording ("Panel moved to 40, 25").
+     */
+    getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:position": (position: FloatingPanelPosition) => any;
+    "position-change": (position: FloatingPanelPosition) => any;
+    "update:size": (size: FloatingPanelSize) => any;
+    "size-change": (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;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+    position: FloatingPanelPosition;
+    size: FloatingPanelSize;
+    boundary: HTMLElement | null;
+    step: number;
+    resizable: boolean;
+    defaultSize: FloatingPanelSize;
+    minSize: FloatingPanelSize;
+    maxSize: FloatingPanelSize;
+    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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,181 @@
+import { type FloatingPanelGeometry, type FloatingPanelGesture, type FloatingPanelPosition, type FloatingPanelSize, type 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.
+ *
+ * @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>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Whether the panel is open, for controlled usage via `v-model:open`.
+     * @default undefined — uncontrolled, the panel tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the panel is initially open, for uncontrolled usage.
+     * @default false — the panel is closed until the trigger is pressed.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The panel's top-left corner in CSS pixels, measured from the boundary's
+     * top-left, for controlled usage via `v-model:position`. Pair it with
+     * `@position-change` or the panel will refuse to move.
+     * @default undefined — uncontrolled, the panel tracks its own position internally.
+     */
+    position?: FloatingPanelPosition;
+    /**
+     * Where the panel starts, for uncontrolled usage.
+     * @default { x: 0, y: 0 } — the top-left corner of the boundary.
+     */
+    defaultPosition?: FloatingPanelPosition;
+    /**
+     * The panel's box in CSS pixels, for controlled usage via `v-model:size`.
+     * Pair it with `@size-change` or the panel will refuse to resize.
+     * @default undefined — uncontrolled, the panel tracks its own size internally.
+     */
+    size?: FloatingPanelSize;
+    /**
+     * The panel's starting box, for uncontrolled usage.
+     * @default { width: 320, height: 240 }
+     */
+    defaultSize?: FloatingPanelSize;
+    /**
+     * Smallest box the panel can be resized to. Every resize is clamped to it,
+     * so a consumer never has to defend against a zero-height panel.
+     * @default { width: 160, height: 120 }
+     */
+    minSize?: FloatingPanelSize;
+    /**
+     * Largest box the panel can be resized to.
+     * @default { width: Infinity, height: Infinity } — only the boundary limits growth.
+     */
+    maxSize?: FloatingPanelSize;
+    /**
+     * Element the panel may not be dragged or resized out of. Position is
+     * measured from this element's top-left corner, so it must be the panel's
+     * containing block for the published geometry to line up.
+     * @default null — the viewport constrains the panel instead.
+     */
+    boundary?: HTMLElement | null;
+    /**
+     * The panel's window state, for controlled usage via `v-model:stage`.
+     * @default undefined — uncontrolled, the panel tracks its own stage internally.
+     */
+    stage?: FloatingPanelStage;
+    /**
+     * The panel's starting window state, for uncontrolled usage.
+     * @default 'default' — the panel uses its own position and size.
+     */
+    defaultStage?: FloatingPanelStage;
+    /**
+     * Whether the header can move the panel. `false` leaves the header
+     * focusable only if you make it so, and drops its `move` cursor.
+     * @default true — the header is a drag handle and a keyboard mover.
+     */
+    draggable?: boolean;
+    /**
+     * Whether resize triggers do anything. `false` makes every
+     * `SkdxFloatingPanelResizeTrigger` inert and non-focusable, so a fixed-size
+     * panel can still render its grips for visual symmetry.
+     * @default true — every grip resizes and takes a tab stop.
+     */
+    resizable?: boolean;
+    /**
+     * How far one arrow key moves or resizes the panel, in pixels.
+     * Shift+arrow uses ten times this.
+     * @default 10 — one arrow key is a 10px nudge, one Shift+arrow a 100px jump.
+     */
+    step?: number;
+    /**
+     * Freezes the panel's geometry: drag, resize and stage changes are all
+     * refused and their triggers leave the tab order. Opening and closing still
+     * work — a disabled panel is inert, not unreachable.
+     * @default false — the panel is fully interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Words the polite live-region message announced once per drag or resize, on
+     * release. The numbers are already rounded to whole CSS pixels. Return `''`
+     * to announce nothing.
+     * @default undefined — the built-in English wording ("Panel moved to 40, 25").
+     */
+    getGestureAnnouncement?: (gesture: FloatingPanelGesture, detail: FloatingPanelGeometry) => string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "update:position": (position: FloatingPanelPosition) => any;
+    "position-change": (position: FloatingPanelPosition) => any;
+    "update:size": (size: FloatingPanelSize) => any;
+    "size-change": (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;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    defaultOpen: boolean;
+    position: FloatingPanelPosition;
+    size: FloatingPanelSize;
+    boundary: HTMLElement | null;
+    step: number;
+    resizable: boolean;
+    defaultSize: FloatingPanelSize;
+    minSize: FloatingPanelSize;
+    maxSize: FloatingPanelSize;
+    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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

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

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

@@ -0,0 +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};

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * 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`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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/FloatingPanelCloseTrigger.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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/FloatingPanelCloseTrigger.vue.js

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

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

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

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

@@ -0,0 +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};

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

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

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

@@ -0,0 +1,58 @@
+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`.
+ */
+type __VLS_Props = {
+    /**
+     * Keep this panel mounted even while closed, so an animation library can
+     * drive the exit itself against `data-state="closed"`.
+     * @default false — the panel leaves the DOM the moment it closes.
+     */
+    forceMount?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "focus-outside": (event: FocusOutsideEvent) => any;
+    "escape-key-down": (event: KeyboardEvent) => any;
+    "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;
+}>, {
+    forceMount: boolean;
+}, {}, {}, {}, 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/FloatingPanelContent.vue.d.ts

@@ -0,0 +1,58 @@
+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`.
+ */
+type __VLS_Props = {
+    /**
+     * Keep this panel mounted even while closed, so an animation library can
+     * drive the exit itself against `data-state="closed"`.
+     * @default false — the panel leaves the DOM the moment it closes.
+     */
+    forceMount?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "focus-outside": (event: FocusOutsideEvent) => any;
+    "escape-key-down": (event: KeyboardEvent) => any;
+    "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;
+}>, {
+    forceMount: boolean;
+}, {}, {}, {}, 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/FloatingPanelContent.vue.js

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

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

@@ -0,0 +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=_;

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

@@ -0,0 +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};

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * 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`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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/FloatingPanelHeader.vue.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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`.
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, 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/FloatingPanelHeader.vue.js

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