@skdx/vue 0.27.0 → 0.28.0

package/dist/rating/primitives.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Advanced primitives for `SkdxRating` — the parts the recipe composes.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxRating, SkdxRatingItem } from '@skdx/vue/primitives/rating';
+ * </script>
+ *
+ * <template>
+ *   <SkdxRating aria-label="Rate this" :max="5">
+ *     <SkdxRatingItem v-for="i in 5" :key="i" :value="i">★</SkdxRatingItem>
+ *   </SkdxRating>
+ * </template>
+ * ```
+ */
+export { default as SkdxRating } from './Rating.vue.js';
+export { default as SkdxRatingItem } from './RatingItem.vue.js';
+export type { SkdxRatingValueChangeDetail } from './context.js';

package/dist/rating/primitives.js

@@ -0,0 +1 @@
+import t from"./RatingItem.vue.js";import a from"./Rating.vue.js";export{a as SkdxRating,t as SkdxRatingItem};

package/dist/resizable/Resizable.vue.d.cts

@@ -1,27 +1,96 @@
+import type { ResizablePanelConfig } from './types.cjs';
 /**
- * Flexbox-based split-pane group. Dragging a handle only ever redistributes
- * size between the two panels immediately adjacent to it — no cascading
- * resize of non-adjacent panels, matching the simplest-correct behavior.
- * Renders a `<div>` with `data-orientation` and `display: flex` along
- * `direction`.
+ * Flexbox-based split-pane group. Drag-to-resize handles only redistribute
+ * size between adjacent panels. Supports dynamic add/remove of panels and handles.
+ * Controlled via `sizes` prop or uncontrolled with panel defaults.
  *
- * Panels and handles are expected to form a static set, registered once
- * during the initial mount (alternating Panel, Handle, Panel, ... in slot
- * order) — dynamically adding/removing panels after mount isn't supported.
+ * `step` sets arrow-key nudge amount in percentage points. Exposes
+ * `getSizes()`, `setSizes()`, and `resetSizes()` for programmatic control.
+ *
+ * @example
+ * ```vue
+ * <SkdxResizablePanelGroup :panels="[
+ *   { defaultSize: 30, content: 'Sidebar' },
+ *   { content: 'Editor' },
+ * ]" />
+ * ```
  */
 type __VLS_Props = {
-    /** Layout axis; also drives data-orientation and which handles resize the group. */
-    direction: 'horizontal' | 'vertical';
+    /**
+     * Layout axis; selects flex direction, arrow-key pair, and resize cursor.
+     * Exposed as `data-orientation` and `aria-orientation` on handles.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controlled panel sizes as percentages, in slot order. Reports intent via
+     * `layout` and `layout-commit` instead of owning state. Omit to use
+     * panel defaults.
+     * @default undefined — group owns sizes.
+     */
+    sizes?: number[];
+    /**
+     * Arrow-key nudge amount in percentage points. Group default; handle's
+     * own `step` wins. Percentage points, not pixels.
+     * @default 2
+     */
+    step?: number;
+    /**
+     * Panel configs; each renders as a derived `SkdxResizablePanel` with
+     * Handles between pairs. Ignored if default slot has content.
+     * @default undefined — compose Panels and Handles in default slot.
+     */
+    panels?: readonly ResizablePanelConfig[];
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Alternating Panel/Handle composition, or use `panels` prop. */
+    default?(): unknown;
+    /** Panel body for markup `panels` content cannot express. */
+    panel?(props: {
+        panel: ResizablePanelConfig;
+        index: number;
+    }): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+/** The read half of the layout API — a copy, so a caller cannot mutate the group's state. */
+declare function getSizes(): number[];
+declare function setSizes(next: number[]): void;
+/**
+ * Back to the layout the panels' own `defaultSize`s imply — the same even-split
+ * arithmetic registration does, so "reset" means the layout a fresh mount would
+ * produce rather than whatever was seen first.
+ */
+declare function resetSizes(): void;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Current sizes as percentages, in slot order. */
+    getSizes: typeof getSizes;
+    /** Drives the layout to `sizes`, clamped per panel and renormalised to 100. */
+    setSizes: typeof setSizes;
+    /** Returns every panel to the size its `defaultSize` — or the even split — implies. */
+    resetSizes: typeof resetSizes;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    collapse: (detail: {
+        panelId: string;
+    }) => any;
     layout: (sizes: number[]) => any;
+    "layout-commit": (sizes: number[]) => any;
+    expand: (detail: {
+        panelId: string;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCollapse?: ((detail: {
+        panelId: string;
+    }) => any) | undefined;
     onLayout?: ((sizes: number[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onLayout-commit"?: ((sizes: number[]) => any) | undefined;
+    onExpand?: ((detail: {
+        panelId: string;
+    }) => any) | undefined;
+}>, {
+    step: number;
+    orientation: "horizontal" | "vertical";
+    sizes: number[];
+    panels: readonly ResizablePanelConfig[];
+}, {}, {}, {}, 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 & {

package/dist/resizable/Resizable.vue.d.ts

@@ -1,27 +1,96 @@
+import type { ResizablePanelConfig } from './types.js';
 /**
- * Flexbox-based split-pane group. Dragging a handle only ever redistributes
- * size between the two panels immediately adjacent to it — no cascading
- * resize of non-adjacent panels, matching the simplest-correct behavior.
- * Renders a `<div>` with `data-orientation` and `display: flex` along
- * `direction`.
+ * Flexbox-based split-pane group. Drag-to-resize handles only redistribute
+ * size between adjacent panels. Supports dynamic add/remove of panels and handles.
+ * Controlled via `sizes` prop or uncontrolled with panel defaults.
  *
- * Panels and handles are expected to form a static set, registered once
- * during the initial mount (alternating Panel, Handle, Panel, ... in slot
- * order) — dynamically adding/removing panels after mount isn't supported.
+ * `step` sets arrow-key nudge amount in percentage points. Exposes
+ * `getSizes()`, `setSizes()`, and `resetSizes()` for programmatic control.
+ *
+ * @example
+ * ```vue
+ * <SkdxResizablePanelGroup :panels="[
+ *   { defaultSize: 30, content: 'Sidebar' },
+ *   { content: 'Editor' },
+ * ]" />
+ * ```
  */
 type __VLS_Props = {
-    /** Layout axis; also drives data-orientation and which handles resize the group. */
-    direction: 'horizontal' | 'vertical';
+    /**
+     * Layout axis; selects flex direction, arrow-key pair, and resize cursor.
+     * Exposed as `data-orientation` and `aria-orientation` on handles.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Controlled panel sizes as percentages, in slot order. Reports intent via
+     * `layout` and `layout-commit` instead of owning state. Omit to use
+     * panel defaults.
+     * @default undefined — group owns sizes.
+     */
+    sizes?: number[];
+    /**
+     * Arrow-key nudge amount in percentage points. Group default; handle's
+     * own `step` wins. Percentage points, not pixels.
+     * @default 2
+     */
+    step?: number;
+    /**
+     * Panel configs; each renders as a derived `SkdxResizablePanel` with
+     * Handles between pairs. Ignored if default slot has content.
+     * @default undefined — compose Panels and Handles in default slot.
+     */
+    panels?: readonly ResizablePanelConfig[];
 };
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Alternating Panel/Handle composition, or use `panels` prop. */
+    default?(): unknown;
+    /** Panel body for markup `panels` content cannot express. */
+    panel?(props: {
+        panel: ResizablePanelConfig;
+        index: number;
+    }): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+/** The read half of the layout API — a copy, so a caller cannot mutate the group's state. */
+declare function getSizes(): number[];
+declare function setSizes(next: number[]): void;
+/**
+ * Back to the layout the panels' own `defaultSize`s imply — the same even-split
+ * arithmetic registration does, so "reset" means the layout a fresh mount would
+ * produce rather than whatever was seen first.
+ */
+declare function resetSizes(): void;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Current sizes as percentages, in slot order. */
+    getSizes: typeof getSizes;
+    /** Drives the layout to `sizes`, clamped per panel and renormalised to 100. */
+    setSizes: typeof setSizes;
+    /** Returns every panel to the size its `defaultSize` — or the even split — implies. */
+    resetSizes: typeof resetSizes;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    collapse: (detail: {
+        panelId: string;
+    }) => any;
     layout: (sizes: number[]) => any;
+    "layout-commit": (sizes: number[]) => any;
+    expand: (detail: {
+        panelId: string;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCollapse?: ((detail: {
+        panelId: string;
+    }) => any) | undefined;
     onLayout?: ((sizes: number[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onLayout-commit"?: ((sizes: number[]) => any) | undefined;
+    onExpand?: ((detail: {
+        panelId: string;
+    }) => any) | undefined;
+}>, {
+    step: number;
+    orientation: "horizontal" | "vertical";
+    sizes: number[];
+    panels: readonly ResizablePanelConfig[];
+}, {}, {}, {}, 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 & {

package/dist/resizable/Resizable.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const _=require("../utils/clamp.cjs"),R=require("./context.cjs");let n=require("vue");var b=["data-orientation"],E=(0,n.defineComponent)({__name:"Resizable",props:{direction:{}},emits:["layout"],setup(m,{emit:S}){const v=m,x=S,g=(0,n.ref)(null),l=new Map;let z=0;const i=(0,n.ref)([]),u=(0,n.ref)([]);function h(e,r){if(l.has(e))return;l.set(e,r);const a=i.value.includes(e)?i.value:[...i.value,e],o=a.map(t=>l.get(t)),p=o.reduce((t,s)=>t+(s.defaultSize??0),0),c=o.filter(t=>t.defaultSize==null).length,d=Math.max(0,100-p),f=c>0?d/c:0;i.value=a,u.value=o.map(t=>t.defaultSize??f)}function y(){const e=z;return z+=1,e}function C(e){const r=i.value[e];return r?l.get(r):void 0}function k(e,r){const a=e,o=e+1;if(a<0||o>=i.value.length)return;const p=l.get(i.value[a]),c=l.get(i.value[o]),d=u.value[a],f=u.value[o];let t=_.clamp(r,p.minSize-d,p.maxSize-d);if(t=_.clamp(t,f-c.maxSize,f-c.minSize),t===0)return;const s=[...u.value];s[a]=d+t,s[o]=f-t,u.value=s,x("layout",s)}(0,n.provide)(R.RESIZABLE_CONTEXT,{get direction(){return v.direction},groupRef:g,order:i,sizes:u,registerPanel:h,registerHandle:y,resizePanels:k,getPanelConfig:C});const q=(0,n.computed)(()=>({display:"flex",flexDirection:v.direction==="horizontal"?"row":"column"}));return(e,r)=>((0,n.openBlock)(),(0,n.createElementBlock)("div",{class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable",ref_key:"groupRef",ref:g,"data-orientation":m.direction,style:(0,n.normalizeStyle)(q.value)},[(0,n.renderSlot)(e.$slots,"default")],12,b))}});exports.default=E;
+const $=require("../utils/clamp.cjs"),a=require("./context.cjs"),I=require("./ResizableHandle.vue.cjs"),M=require("./ResizablePanel.vue.cjs");let n=require("vue");var X=["data-orientation"],Z=(0,n.defineComponent)({__name:"Resizable",props:{orientation:{default:"horizontal"},sizes:{default:void 0},step:{default:2},panels:{default:void 0}},emits:["layout","layout-commit","collapse","expand"],setup(c,{expose:R,emit:w}){const d=c,p=w,v=(0,n.ref)(null),r=new Map;let h=0;const i=(0,n.ref)([]),z=(0,n.ref)([]),L=(0,n.computed)(()=>d.sizes!==void 0),f=(0,n.computed)(()=>d.sizes??z.value);function N(e,l){i.value.forEach((t,o)=>{const s=r.get(t);if(!s?.collapsible)return;const u=a.isPanelCollapsed(s,e[o]),m=a.isPanelCollapsed(s,l[o]);u!==m&&(m?p("collapse",{panelId:t}):p("expand",{panelId:t}))})}function k(e){const l=f.value;L.value||(z.value=e),g=!0,b=e,p("layout",e),N(l,e)}function O(e,l){if(r.has(e))return;r.set(e,l);const t=i.value.includes(e)?i.value:[...i.value,e];i.value=t,z.value=a.seedSizes(t.map(o=>r.get(o)))}function H(e){if(r.delete(e),!i.value.includes(e))return;const l=i.value.filter(t=>t!==e);i.value=l,z.value=a.seedSizes(l.map(t=>r.get(t)))}function T(){const e=h;return h+=1,e}function V(e,l){const t=v.value;if(!t)return l;const o=[...t.querySelectorAll("[data-skdx-resizable-handle]")].indexOf(e);return o>=0?o:l}function A(e){const l=i.value[e];return l?r.get(l):void 0}function D(e,l){const t=e,o=e+1;if(t<0||o>=i.value.length)return;const s=f.value,u=r.get(i.value[t]),m=r.get(i.value[o]),S=s[t],E=s[o],y=a.resolvePairSize(u,m,S,E,l);if(y===S)return;const x=[...s];x[t]=y,x[o]=S+E-y,k(x)}let g=!1,b=null;function C(){g&&(g=!1,p("layout-commit",[...b??f.value]))}function _(e){const l=i.value.map((o,s)=>{const u=r.get(o);return $.clamp(e[s]??0,u?a.panelLowerBound(u):0,u?.maxSize??100)}),t=l.reduce((o,s)=>o+s,0);k(t>0?l.map(o=>o/t*100):l),C()}function q(){return[...f.value]}function B(e){_(e)}function P(){_(a.seedSizes(i.value.map(e=>r.get(e))))}R({getSizes:q,setSizes:B,resetSizes:P}),(0,n.provide)(a.RESIZABLE_CONTEXT,{get orientation(){return d.orientation},groupRef:v,order:i,sizes:f,registerPanel:O,unregisterPanel:H,registerHandle:T,resolveHandleIndex:V,resizePanels:D,commitLayout:C,getPanelConfig:A,get step(){return d.step},getSizes:q,setSizes:B,resetSizes:P});const F=(0,n.computed)(()=>({display:"flex",flexDirection:d.orientation==="horizontal"?"row":"column"}));return(e,l)=>((0,n.openBlock)(),(0,n.createElementBlock)("div",{class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable",ref_key:"groupRef",ref:v,"data-orientation":c.orientation,style:(0,n.normalizeStyle)(F.value)},[(0,n.renderSlot)(e.$slots,"default",{},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(c.panels,(t,o)=>((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:t.id??o},[(0,n.createVNode)(M.default,{id:t.id,"default-size":t.defaultSize,"min-size":t.minSize,"max-size":t.maxSize,collapsible:t.collapsible,"collapsed-size":t.collapsedSize},{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,"panel",{panel:t,index:o},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(t.content),1)])]),_:2},1032,["id","default-size","min-size","max-size","collapsible","collapsed-size"]),c.panels&&o<c.panels.length-1?((0,n.openBlock)(),(0,n.createBlock)(I.default,{key:0})):(0,n.createCommentVNode)("",!0)],64))),128))])],12,X))}});exports.default=Z;

package/dist/resizable/Resizable.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{clamp as e}from"../utils/clamp.js";import{RESIZABLE_CONTEXT as t}from"./context.js";import{computed as a,createElementBlock as n,defineComponent as o,normalizeStyle as r,openBlock as i,provide as l,ref as s,renderSlot as u}from"vue";var c=["data-orientation"],d=/* @__PURE__ */o({__name:"Resizable",props:{direction:{}},emits:["layout"],setup(o,{emit:d}){const f=o,m=d,p=s(null),v=/* @__PURE__ */new Map;let z=0;const g=s([]),S=s([]);l(t,{get direction(){return f.direction},groupRef:p,order:g,sizes:S,registerPanel:function(e,t){if(v.has(e))return;v.set(e,t);const a=g.value.includes(e)?g.value:[...g.value,e],n=a.map(e=>v.get(e)),o=n.reduce((e,t)=>e+(t.defaultSize??0),0),r=n.filter(e=>null==e.defaultSize).length,i=Math.max(0,100-o),l=r>0?i/r:0;g.value=a,S.value=n.map(e=>e.defaultSize??l)},registerHandle:function(){const e=z;return z+=1,e},resizePanels:function(t,a){const n=t,o=t+1;if(n<0||o>=g.value.length)return;const r=v.get(g.value[n]),i=v.get(g.value[o]),l=S.value[n],s=S.value[o];let u=e(a,r.minSize-l,r.maxSize-l);if(u=e(u,s-i.maxSize,s-i.minSize),0===u)return;const c=[...S.value];c[n]=l+u,c[o]=s-u,S.value=c,m("layout",c)},getPanelConfig:function(e){const t=g.value[e];return t?v.get(t):void 0}});const x=a(()=>({display:"flex",flexDirection:"horizontal"===f.direction?"row":"column"}));return(e,t)=>(i(),n("div",{class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable",ref_key:"groupRef",ref:p,"data-orientation":o.direction,style:r(x.value)},[u(e.$slots,"default")],12,c))}});export{d as default};
+import{clamp as e}from"../utils/clamp.js";import{RESIZABLE_CONTEXT as t,isPanelCollapsed as a,panelLowerBound as n,resolvePairSize as l,seedSizes as s}from"./context.js";import o from"./ResizableHandle.vue.js";import i from"./ResizablePanel.vue.js";import{Fragment as r,computed as u,createBlock as c,createCommentVNode as d,createElementBlock as p,createTextVNode as f,createVNode as m,defineComponent as v,normalizeStyle as z,openBlock as g,provide as x,ref as S,renderList as y,renderSlot as b,toDisplayString as k,withCtx as h}from"vue";var P=["data-orientation"],C=/* @__PURE__ */v({__name:"Resizable",props:{orientation:{default:"horizontal"},sizes:{default:void 0},step:{default:2},panels:{default:void 0}},emits:["layout","layout-commit","collapse","expand"],setup(v,{expose:C,emit:R}){const B=v,E=R,_=S(null),j=/* @__PURE__ */new Map;let w=0;const L=S([]),N=S([]),H=u(()=>void 0!==B.sizes),I=u(()=>B.sizes??N.value);function T(e){const t=I.value;H.value||(N.value=e),V=!0,A=e,E("layout",e),function(e,t){L.value.forEach((n,l)=>{const s=j.get(n);if(!s?.collapsible)return;const o=a(s,e[l]),i=a(s,t[l]);o!==i&&E(i?"collapse":"expand",{panelId:n})})}(t,e)}let V=!1,A=null;function D(){V&&(V=!1,E("layout-commit",[...A??I.value]))}function O(t){const a=L.value.map((a,l)=>{const s=j.get(a);return e(t[l]??0,s?n(s):0,s?.maxSize??100)}),l=a.reduce((e,t)=>e+t,0);T(l>0?a.map(e=>e/l*100):a),D()}function $(){return[...I.value]}function q(e){O(e)}function F(){O(s(L.value.map(e=>j.get(e))))}C({getSizes:$,setSizes:q,resetSizes:F}),x(t,{get orientation(){return B.orientation},groupRef:_,order:L,sizes:I,registerPanel:function(e,t){if(j.has(e))return;j.set(e,t);const a=L.value.includes(e)?L.value:[...L.value,e];L.value=a,N.value=s(a.map(e=>j.get(e)))},unregisterPanel:function(e){if(j.delete(e),!L.value.includes(e))return;const t=L.value.filter(t=>t!==e);L.value=t,N.value=s(t.map(e=>j.get(e)))},registerHandle:function(){const e=w;return w+=1,e},resolveHandleIndex:function(e,t){const a=_.value;if(!a)return t;const n=[...a.querySelectorAll("[data-skdx-resizable-handle]")].indexOf(e);return n>=0?n:t},resizePanels:function(e,t){const a=e,n=e+1;if(a<0||n>=L.value.length)return;const s=I.value,o=j.get(L.value[a]),i=j.get(L.value[n]),r=s[a],u=s[n],c=l(o,i,r,u,t);if(c===r)return;const d=[...s];d[a]=c,d[n]=r+u-c,T(d)},commitLayout:D,getPanelConfig:function(e){const t=L.value[e];return t?j.get(t):void 0},get step(){return B.step},getSizes:$,setSizes:q,resetSizes:F});const M=u(()=>({display:"flex",flexDirection:"horizontal"===B.orientation?"row":"column"}));return(e,t)=>(g(),p("div",{class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable",ref_key:"groupRef",ref:_,"data-orientation":v.orientation,style:z(M.value)},[b(e.$slots,"default",{},()=>[(g(!0),p(r,null,y(v.panels,(t,a)=>(g(),p(r,{key:t.id??a},[m(i,{id:t.id,"default-size":t.defaultSize,"min-size":t.minSize,"max-size":t.maxSize,collapsible:t.collapsible,"collapsed-size":t.collapsedSize},{default:h(()=>[b(e.$slots,"panel",{panel:t,index:a},()=>[f(k(t.content),1)])]),_:2},1032,["id","default-size","min-size","max-size","collapsible","collapsed-size"]),v.panels&&a<v.panels.length-1?(g(),c(o,{key:0})):d("",!0)],64))),128))])],12,P))}});export{C as default};

package/dist/resizable/ResizableHandle.vue.d.cts

@@ -1,17 +1,10 @@
-/**
- * The draggable divider between two `SkdxResizablePanel`s. Renders
- * `role="separator"` with `aria-orientation` set to the axis *perpendicular*
- * to the group's `direction`, plus `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the size of the panel to its start side, `data-orientation`, and
- * `data-disabled`. Draggable via pointer, and keyboard-operable when focused:
- * Arrow Left/Right (horizontal groups) or Arrow Up/Down (vertical groups) nudge
- * by `step`, Home/End jump to the panel's min/max size. Must be used inside
- * `SkdxResizablePanelGroup`.
- */
+/** Draggable divider between two resizable panels (role=separator). */
 type __VLS_Props = {
-    /** Disables dragging and keyboard resizing on this handle. */
+    /** Disables dragging and keyboard resizing on this handle. @default false */
     disabled?: boolean;
-    /** Percentage nudged per Arrow key press. */
+    /**
+     * Percentage points nudged per Arrow key press, overriding the group's own `step` for this one handle. Percentage points, not pixels. @default undefined
+     */
     step?: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {

package/dist/resizable/ResizableHandle.vue.d.ts

@@ -1,17 +1,10 @@
-/**
- * The draggable divider between two `SkdxResizablePanel`s. Renders
- * `role="separator"` with `aria-orientation` set to the axis *perpendicular*
- * to the group's `direction`, plus `aria-valuenow`/`aria-valuemin`/`aria-valuemax`
- * describing the size of the panel to its start side, `data-orientation`, and
- * `data-disabled`. Draggable via pointer, and keyboard-operable when focused:
- * Arrow Left/Right (horizontal groups) or Arrow Up/Down (vertical groups) nudge
- * by `step`, Home/End jump to the panel's min/max size. Must be used inside
- * `SkdxResizablePanelGroup`.
- */
+/** Draggable divider between two resizable panels (role=separator). */
 type __VLS_Props = {
-    /** Disables dragging and keyboard resizing on this handle. */
+    /** Disables dragging and keyboard resizing on this handle. @default false */
     disabled?: boolean;
-    /** Percentage nudged per Arrow key press. */
+    /**
+     * Percentage points nudged per Arrow key press, overriding the group's own `step` for this one handle. Percentage points, not pixels. @default undefined
+     */
     step?: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {

package/dist/resizable/ResizableHandle.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("../utils/direction.cjs"),y=require("./context.cjs");let i=require("vue");var _=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","data-orientation","data-disabled","tabindex"],C=(0,i.defineComponent)({__name:"ResizableHandle",props:{disabled:{type:Boolean,default:!1},step:{default:2}},setup(l){const n=l,p=(0,i.inject)(y.RESIZABLE_CONTEXT);if(!p)throw new Error("SkdxResizableHandle must be used within SkdxResizablePanelGroup.");const t=p,r=t.registerHandle(),s=(0,i.ref)(null),z=f.useDirection(),h=(0,i.computed)(()=>t.getPanelConfig(r)),b=(0,i.computed)(()=>t.sizes.value[r]??0),P=(0,i.computed)(()=>t.direction==="horizontal"?"vertical":"horizontal");function v(e){n.disabled||(e.target.setPointerCapture?.(e.pointerId),s.value={lastPos:t.direction==="horizontal"?e.clientX:e.clientY})}function g(e){if(n.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const a=s.value;if(!a)return;const o=t.groupRef.value?.getBoundingClientRect();if(!o)return;const u=t.direction==="horizontal"?o.width:o.height;if(!u)return;const c=t.direction==="horizontal"?e.clientX:e.clientY;let d=(c-a.lastPos)/u*100;a.lastPos=c,t.direction==="horizontal"&&f.resolveDirection(e.currentTarget,z())==="rtl"&&(d=-d),d!==0&&t.resizePanels(r,d)}function m(e){s.value&&e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),s.value=null}function w(e){if(n.disabled)return;const a=f.directionalKey(e.key,e.currentTarget,z()),o=t.direction==="horizontal";a===(o?"ArrowRight":"ArrowDown")?(e.preventDefault(),t.resizePanels(r,n.step)):a===(o?"ArrowLeft":"ArrowUp")?(e.preventDefault(),t.resizePanels(r,-n.step)):a==="Home"?(e.preventDefault(),t.resizePanels(r,-1e3)):a==="End"&&(e.preventDefault(),t.resizePanels(r,1e3))}const x=(0,i.computed)(()=>({touchAction:"none",cursor:n.disabled?void 0:t.direction==="horizontal"?"col-resize":"row-resize"}));return(e,a)=>((0,i.openBlock)(),(0,i.createElementBlock)("div",{class:"skdx-resizable__handle","data-part":"handle",role:"separator","aria-orientation":P.value,"aria-valuenow":Math.round(b.value),"aria-valuemin":h.value?.minSize,"aria-valuemax":h.value?.maxSize,"aria-disabled":l.disabled||void 0,"data-orientation":(0,i.unref)(t).direction,"data-disabled":l.disabled?"":void 0,"data-skdx-resizable-handle":"",tabindex:l.disabled?void 0:0,style:(0,i.normalizeStyle)(x.value),onKeydown:w,onPointerdown:v,onPointermove:g,onPointerup:m},null,44,_))}});exports.default=C;
+const p=require("../utils/direction.cjs"),H=require("./context.cjs");let a=require("vue");var R=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-valuetext","aria-controls","aria-disabled","data-orientation","data-disabled","data-dragging"],A=(0,a.defineComponent)({__name:"ResizableHandle",props:{disabled:{type:Boolean,default:!1},step:{default:void 0}},setup(c){const i=c,v=(0,a.inject)(H.RESIZABLE_CONTEXT);if(!v)throw new Error("SkdxResizableHandle must be used within SkdxResizablePanelGroup.");const t=v,z=t.registerHandle(),f=(0,a.ref)(null),l=(0,a.ref)(z);(0,a.watch)(t.order,()=>{f.value&&(l.value=t.resolveHandleIndex(f.value,z))},{flush:"post"});function h(e){return t.resolveHandleIndex(e.currentTarget,l.value)}const s=(0,a.ref)(null),g=p.useDirection(),m=(0,a.computed)(()=>i.step??t.step),w=(0,a.computed)(()=>s.value!==null),P=(0,a.computed)(()=>t.getPanelConfig(l.value)),_=(0,a.computed)(()=>P.value?.minSize??10),y=(0,a.computed)(()=>P.value?.maxSize??90),x=(0,a.computed)(()=>t.sizes.value[l.value]??0),I=(0,a.computed)(()=>t.order.value[l.value]),S=(0,a.computed)(()=>t.orientation==="horizontal"?"vertical":"horizontal");function k(e){i.disabled||(e.target.setPointerCapture?.(e.pointerId),s.value={lastPos:t.orientation==="horizontal"?e.clientX:e.clientY})}function C(e){if(i.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const n=s.value;if(!n)return;const r=t.groupRef.value?.getBoundingClientRect();if(!r)return;const u=t.orientation==="horizontal"?r.width:r.height;if(!u)return;const d=t.orientation==="horizontal"?e.clientX:e.clientY;let o=(d-n.lastPos)/u*100;n.lastPos=d,t.orientation==="horizontal"&&p.resolveDirection(e.currentTarget,g())==="rtl"&&(o=-o),o!==0&&t.resizePanels(h(e),o)}function b(e){s.value&&e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),s.value=null,t.commitLayout()}function D(e){if(i.disabled)return;const n=p.directionalKey(e.key,e.currentTarget,g()),r=t.orientation==="horizontal",u=r?"ArrowRight":"ArrowDown",d=r?"ArrowLeft":"ArrowUp",o=h(e);if(n===u)e.preventDefault(),t.resizePanels(o,m.value);else if(n===d)e.preventDefault(),t.resizePanels(o,-m.value);else if(n==="Home")e.preventDefault(),t.resizePanels(o,-1e3);else if(n==="End")e.preventDefault(),t.resizePanels(o,1e3);else return;t.commitLayout()}const E=(0,a.computed)(()=>({touchAction:"none",cursor:i.disabled?void 0:t.orientation==="horizontal"?"col-resize":"row-resize"}));return(e,n)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-resizable__handle","data-part":"handle",ref_key:"handleEl",ref:f,role:"separator","aria-orientation":S.value,"aria-valuenow":Math.round(x.value),"aria-valuemin":_.value,"aria-valuemax":y.value,"aria-valuetext":`${Math.round(x.value)}%`,"aria-controls":I.value,"aria-disabled":c.disabled||void 0,"data-orientation":(0,a.unref)(t).orientation,"data-disabled":c.disabled?"":void 0,"data-dragging":w.value?"":void 0,"data-skdx-resizable-handle":"",tabindex:"0",style:(0,a.normalizeStyle)(E.value),onKeydown:D,onPointerdown:k,onPointermove:C,onPointerup:b,onPointercancel:b},null,44,R))}});exports.default=A;

package/dist/resizable/ResizableHandle.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,resolveDirection as a,useDirection as t}from"../utils/direction.js";import{RESIZABLE_CONTEXT as i}from"./context.js";import{computed as r,createElementBlock as n,defineComponent as o,inject as l,normalizeStyle as s,openBlock as d,ref as u,unref as c}from"vue";var p=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-disabled","data-orientation","data-disabled","tabindex"],v=/* @__PURE__ */o({__name:"ResizableHandle",props:{disabled:{type:Boolean,default:!1},step:{default:2}},setup(o){const v=o,f=l(i);if(!f)throw new Error("SkdxResizableHandle must be used within SkdxResizablePanelGroup.");const z=f,h=z.registerHandle(),b=u(null),m=t(),P=r(()=>z.getPanelConfig(h)),g=r(()=>z.sizes.value[h]??0),w=r(()=>"horizontal"===z.direction?"vertical":"horizontal");function x(e){v.disabled||(e.target.setPointerCapture?.(e.pointerId),b.value={lastPos:"horizontal"===z.direction?e.clientX:e.clientY})}function C(e){if(v.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const t=b.value;if(!t)return;const i=z.groupRef.value?.getBoundingClientRect();if(!i)return;const r="horizontal"===z.direction?i.width:i.height;if(!r)return;const n="horizontal"===z.direction?e.clientX:e.clientY;let o=(n-t.lastPos)/r*100;t.lastPos=n,"horizontal"===z.direction&&"rtl"===a(e.currentTarget,m())&&(o=-o),0!==o&&z.resizePanels(h,o)}function k(e){b.value&&e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),b.value=null}function D(a){if(v.disabled)return;const t=e(a.key,a.currentTarget,m()),i="horizontal"===z.direction;t===(i?"ArrowRight":"ArrowDown")?(a.preventDefault(),z.resizePanels(h,v.step)):t===(i?"ArrowLeft":"ArrowUp")?(a.preventDefault(),z.resizePanels(h,-v.step)):"Home"===t?(a.preventDefault(),z.resizePanels(h,-1e3)):"End"===t&&(a.preventDefault(),z.resizePanels(h,1e3))}const R=r(()=>({touchAction:"none",cursor:v.disabled?void 0:"horizontal"===z.direction?"col-resize":"row-resize"}));return(e,a)=>(d(),n("div",{class:"skdx-resizable__handle","data-part":"handle",role:"separator","aria-orientation":w.value,"aria-valuenow":Math.round(g.value),"aria-valuemin":P.value?.minSize,"aria-valuemax":P.value?.maxSize,"aria-disabled":o.disabled||void 0,"data-orientation":c(z).direction,"data-disabled":o.disabled?"":void 0,"data-skdx-resizable-handle":"",tabindex:o.disabled?void 0:0,style:s(R.value),onKeydown:D,onPointerdown:x,onPointermove:C,onPointerup:k},null,44,p))}});export{v as default};
+import{directionalKey as e,resolveDirection as a,useDirection as t}from"../utils/direction.js";import{RESIZABLE_CONTEXT as n}from"./context.js";import{computed as r,createElementBlock as i,defineComponent as o,inject as l,normalizeStyle as s,openBlock as u,ref as d,unref as v,watch as c}from"vue";var f=["aria-orientation","aria-valuenow","aria-valuemin","aria-valuemax","aria-valuetext","aria-controls","aria-disabled","data-orientation","data-disabled","data-dragging"],p=/* @__PURE__ */o({__name:"ResizableHandle",props:{disabled:{type:Boolean,default:!1},step:{default:void 0}},setup(o){const p=o,h=l(n);if(!h)throw new Error("SkdxResizableHandle must be used within SkdxResizablePanelGroup.");const m=h,z=m.registerHandle(),g=d(null),b=d(z);function P(e){return m.resolveHandleIndex(e.currentTarget,b.value)}c(m.order,()=>{g.value&&(b.value=m.resolveHandleIndex(g.value,z))},{flush:"post"});const w=d(null),x=t(),y=r(()=>p.step??m.step),k=r(()=>null!==w.value),C=r(()=>m.getPanelConfig(b.value)),D=r(()=>C.value?.minSize??10),E=r(()=>C.value?.maxSize??90),I=r(()=>m.sizes.value[b.value]??0),R=r(()=>m.order.value[b.value]),A=r(()=>"horizontal"===m.orientation?"vertical":"horizontal");function H(e){p.disabled||(e.target.setPointerCapture?.(e.pointerId),w.value={lastPos:"horizontal"===m.orientation?e.clientX:e.clientY})}function S(e){if(p.disabled||!e.target.hasPointerCapture?.(e.pointerId))return;const t=w.value;if(!t)return;const n=m.groupRef.value?.getBoundingClientRect();if(!n)return;const r="horizontal"===m.orientation?n.width:n.height;if(!r)return;const i="horizontal"===m.orientation?e.clientX:e.clientY;let o=(i-t.lastPos)/r*100;t.lastPos=i,"horizontal"===m.orientation&&"rtl"===a(e.currentTarget,x())&&(o=-o),0!==o&&m.resizePanels(P(e),o)}function _(e){w.value&&e.target.hasPointerCapture?.(e.pointerId)&&e.target.releasePointerCapture(e.pointerId),w.value=null,m.commitLayout()}function B(a){if(p.disabled)return;const t=e(a.key,a.currentTarget,x()),n="horizontal"===m.orientation,r=n?"ArrowRight":"ArrowDown",i=n?"ArrowLeft":"ArrowUp",o=P(a);if(t===r)a.preventDefault(),m.resizePanels(o,y.value);else if(t===i)a.preventDefault(),m.resizePanels(o,-y.value);else if("Home"===t)a.preventDefault(),m.resizePanels(o,-1e3);else{if("End"!==t)return;a.preventDefault(),m.resizePanels(o,1e3)}m.commitLayout()}const T=r(()=>({touchAction:"none",cursor:p.disabled?void 0:"horizontal"===m.orientation?"col-resize":"row-resize"}));return(e,a)=>(u(),i("div",{class:"skdx-resizable__handle","data-part":"handle",ref_key:"handleEl",ref:g,role:"separator","aria-orientation":A.value,"aria-valuenow":Math.round(I.value),"aria-valuemin":D.value,"aria-valuemax":E.value,"aria-valuetext":`${Math.round(I.value)}%`,"aria-controls":R.value,"aria-disabled":o.disabled||void 0,"data-orientation":v(m).orientation,"data-disabled":o.disabled?"":void 0,"data-dragging":k.value?"":void 0,"data-skdx-resizable-handle":"",tabindex:"0",style:s(T.value),onKeydown:B,onPointerdown:H,onPointermove:S,onPointerup:_,onPointercancel:_},null,44,f))}});export{p as default};

package/dist/resizable/ResizablePanel.vue.d.cts

@@ -1,10 +1,7 @@
 /**
- * A single pane within a `SkdxResizablePanelGroup`. Renders
- * `<div data-skdx-resizable-panel>` with `data-orientation` inherited from the
- * group and `flex-basis` set to its current size percentage (`flex-grow: 0`,
- * `flex-shrink: 0`, `overflow: hidden`). Registers its `defaultSize` /
- * `minSize` / `maxSize` with the group once, on mount. Must be used inside
- * `SkdxResizablePanelGroup`.
+ * Pane within SkdxResizablePanelGroup. Registers size/min/max on mount, renders
+ * resolved id. minSize/maxSize default 10/90 (not 0/100). Collapsible panels snap
+ * at collapsedSize, reopen at minSize.
  */
 type __VLS_Props = {
     /** Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels. */
@@ -13,6 +10,16 @@ type __VLS_Props = {
     minSize?: number;
     /** Maximum size as a percentage (0-100); an adjacent handle won't grow this panel past it. */
     maxSize?: number;
+    /**
+     * Lets this panel close entirely: a resize below `minSize` snaps it to `collapsedSize`, reopening at `minSize` on any resize away.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` and the group emits `collapse`/`expand` crossing it.
+     * @default 0
+     */
+    collapsedSize?: number;
     /** Stable identifier used to track this panel's size across renders. Auto-generated if omitted. */
     id?: string;
 };
@@ -22,9 +29,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     id: string;
+    collapsible: boolean;
     defaultSize: number;
     minSize: number;
     maxSize: number;
+    collapsedSize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/resizable/ResizablePanel.vue.d.ts

@@ -1,10 +1,7 @@
 /**
- * A single pane within a `SkdxResizablePanelGroup`. Renders
- * `<div data-skdx-resizable-panel>` with `data-orientation` inherited from the
- * group and `flex-basis` set to its current size percentage (`flex-grow: 0`,
- * `flex-shrink: 0`, `overflow: hidden`). Registers its `defaultSize` /
- * `minSize` / `maxSize` with the group once, on mount. Must be used inside
- * `SkdxResizablePanelGroup`.
+ * Pane within SkdxResizablePanelGroup. Registers size/min/max on mount, renders
+ * resolved id. minSize/maxSize default 10/90 (not 0/100). Collapsible panels snap
+ * at collapsedSize, reopen at minSize.
  */
 type __VLS_Props = {
     /** Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels. */
@@ -13,6 +10,16 @@ type __VLS_Props = {
     minSize?: number;
     /** Maximum size as a percentage (0-100); an adjacent handle won't grow this panel past it. */
     maxSize?: number;
+    /**
+     * Lets this panel close entirely: a resize below `minSize` snaps it to `collapsedSize`, reopening at `minSize` on any resize away.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` and the group emits `collapse`/`expand` crossing it.
+     * @default 0
+     */
+    collapsedSize?: number;
     /** Stable identifier used to track this panel's size across renders. Auto-generated if omitted. */
     id?: string;
 };
@@ -22,9 +29,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     id: string;
+    collapsible: boolean;
     defaultSize: number;
     minSize: number;
     maxSize: number;
+    collapsedSize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/resizable/ResizablePanel.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const r=require("./context.cjs");let e=require("vue");var u=["data-orientation"],c=(0,e.defineComponent)({__name:"ResizablePanel",props:{defaultSize:{default:void 0},minSize:{default:10},maxSize:{default:90},id:{default:void 0}},setup(d){const t=d,n=(0,e.inject)(r.RESIZABLE_CONTEXT);if(!n)throw new Error("SkdxResizablePanel must be used within SkdxResizablePanelGroup.");const a=n,l=t.id??r.nextResizablePanelId();(0,e.onMounted)(()=>{a.registerPanel(l,{defaultSize:t.defaultSize,minSize:t.minSize,maxSize:t.maxSize})});const o=(0,e.computed)(()=>{const i=a.order.value.indexOf(l);return i>=0?a.sizes.value[i]??0:t.defaultSize??0}),s=(0,e.computed)(()=>({flexBasis:`${o.value}%`,flexGrow:0,flexShrink:0,overflow:"hidden"}));return(i,z)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"","data-orientation":(0,e.unref)(a).direction,style:(0,e.normalizeStyle)(s.value)},[(0,e.renderSlot)(i.$slots,"default")],12,u))}});exports.default=c;
+const o=require("./context.cjs");let l=require("vue");var p=["id","data-orientation","data-collapsed"],z=(0,l.defineComponent)({__name:"ResizablePanel",props:{defaultSize:{default:void 0},minSize:{default:10},maxSize:{default:90},collapsible:{type:Boolean,default:!1},collapsedSize:{default:0},id:{default:void 0}},setup(r){const e=r,d=(0,l.inject)(o.RESIZABLE_CONTEXT);if(!d)throw new Error("SkdxResizablePanel must be used within SkdxResizablePanelGroup.");const i=d,t=e.id??o.nextResizablePanelId();(0,l.onMounted)(()=>{i.registerPanel(t,{defaultSize:e.defaultSize,minSize:e.minSize,maxSize:e.maxSize,collapsible:e.collapsible,collapsedSize:e.collapsedSize})}),(0,l.onUnmounted)(()=>i.unregisterPanel(t));const s=(0,l.computed)(()=>{const a=i.order.value.indexOf(t);return a>=0?i.sizes.value[a]:void 0}),u=(0,l.computed)(()=>o.isPanelCollapsed({minSize:e.minSize,maxSize:e.maxSize,collapsible:e.collapsible,collapsedSize:e.collapsedSize},s.value)),c=(0,l.computed)(()=>{const a=s.value,n=a===void 0;return{flexBasis:n?e.defaultSize===void 0?"0%":`${e.defaultSize}%`:`${a}%`,flexGrow:n&&e.defaultSize===void 0?1:0,flexShrink:0,overflow:"hidden"}});return(a,n)=>((0,l.openBlock)(),(0,l.createElementBlock)("div",{class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"",id:(0,l.unref)(t),"data-orientation":(0,l.unref)(i).orientation,"data-collapsed":u.value?"":void 0,style:(0,l.normalizeStyle)(c.value)},[(0,l.renderSlot)(a.$slots,"default")],12,p))}});exports.default=z;

package/dist/resizable/ResizablePanel.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{RESIZABLE_CONTEXT as e,nextResizablePanelId as a}from"./context.js";import{computed as t,createElementBlock as i,defineComponent as l,inject as n,normalizeStyle as s,onMounted as o,openBlock as d,renderSlot as r,unref as u}from"vue";var f=["data-orientation"],z=/* @__PURE__ */l({__name:"ResizablePanel",props:{defaultSize:{default:void 0},minSize:{default:10},maxSize:{default:90},id:{default:void 0}},setup(l){const z=l,m=n(e);if(!m)throw new Error("SkdxResizablePanel must be used within SkdxResizablePanelGroup.");const S=m,p=z.id??a();o(()=>{S.registerPanel(p,{defaultSize:z.defaultSize,minSize:z.minSize,maxSize:z.maxSize})});const x=t(()=>{const e=S.order.value.indexOf(p);return e>=0?S.sizes.value[e]??0:z.defaultSize??0}),c=t(()=>({flexBasis:`${x.value}%`,flexGrow:0,flexShrink:0,overflow:"hidden"}));return(e,a)=>(d(),i("div",{class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"","data-orientation":u(S).direction,style:s(c.value)},[r(e.$slots,"default")],12,f))}});export{z as default};
+import{RESIZABLE_CONTEXT as e,isPanelCollapsed as a,nextResizablePanelId as l}from"./context.js";import{computed as i,createElementBlock as o,defineComponent as t,inject as s,normalizeStyle as d,onMounted as n,onUnmounted as r,openBlock as u,renderSlot as z,unref as p}from"vue";var S=["id","data-orientation","data-collapsed"],c=/* @__PURE__ */t({__name:"ResizablePanel",props:{defaultSize:{default:void 0},minSize:{default:10},maxSize:{default:90},collapsible:{type:Boolean,default:!1},collapsedSize:{default:0},id:{default:void 0}},setup(t){const c=t,f=s(e);if(!f)throw new Error("SkdxResizablePanel must be used within SkdxResizablePanelGroup.");const m=f,v=c.id??l();n(()=>{m.registerPanel(v,{defaultSize:c.defaultSize,minSize:c.minSize,maxSize:c.maxSize,collapsible:c.collapsible,collapsedSize:c.collapsedSize})}),r(()=>m.unregisterPanel(v));const x=i(()=>{const e=m.order.value.indexOf(v);return e>=0?m.sizes.value[e]:void 0}),b=i(()=>a({minSize:c.minSize,maxSize:c.maxSize,collapsible:c.collapsible,collapsedSize:c.collapsedSize},x.value)),k=i(()=>{const e=x.value,a=void 0===e;return{flexBasis:a?void 0===c.defaultSize?"0%":`${c.defaultSize}%`:`${e}%`,flexGrow:a&&void 0===c.defaultSize?1:0,flexShrink:0,overflow:"hidden"}});return(e,a)=>(u(),o("div",{class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"",id:p(v),"data-orientation":p(m).orientation,"data-collapsed":b.value?"":void 0,style:d(k.value)},[z(e.$slots,"default")],12,S))}});export{c as default};

package/dist/resizable/context.cjs

@@ -1 +1 @@
-const e=require("../utils/id.cjs"),r=require("../utils/clamp.cjs");var n=Symbol("skdx-resizable-context");function a(){return e.nextId("resizable-panel")}exports.RESIZABLE_CONTEXT=n;exports.clamp=r.clamp;exports.nextResizablePanelId=a;
+const z=require("../utils/id.cjs"),i=require("../utils/clamp.cjs");var S=Symbol("skdx-resizable-context");function d(){return z.nextId("resizable-panel")}function m(e){return e.collapsible?e.collapsedSize??0:e.minSize}function c(e,a){return!e?.collapsible||a===void 0?!1:a<=(e.collapsedSize??0)}function s(e,a,l){if(!e.collapsible)return i.clamp(l,e.minSize,e.maxSize);const n=e.collapsedSize??0;return a<=n?l>n?i.clamp(l,e.minSize,e.maxSize):n:l<e.minSize?n:i.clamp(l,e.minSize,e.maxSize)}function x(e,a,l,n,u){const t=l+n,r=l+u;if(a.collapsible){const p=s(a,n,t-r);if(c(a,p))return t-p}const o=s(e,l,r);return c(e,o)?o:t-s(a,n,t-o)}function b(e){const a=e.reduce((t,r)=>t+(r?.defaultSize??0),0),l=e.filter(t=>t?.defaultSize==null).length,n=Math.max(0,100-a),u=l>0?n/l:0;return e.map(t=>t?.defaultSize??u)}exports.RESIZABLE_CONTEXT=S;exports.clamp=i.clamp;exports.isPanelCollapsed=c;exports.nextResizablePanelId=d;exports.panelLowerBound=m;exports.resolvePairSize=x;exports.resolvePanelSize=s;exports.seedSizes=b;

package/dist/resizable/context.d.cts

@@ -1,23 +1,72 @@
 import type { InjectionKey, Ref } from 'vue';
-export { clamp } from '../utils/clamp.cjs';
+import { clamp } from '../utils/clamp.cjs';
+export { clamp };
 /** @internal Per-panel size constraints registered with SkdxResizablePanelGroup. */
 export interface PanelConfig {
     defaultSize?: number;
     minSize: number;
     maxSize: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
 }
 /** @internal Injection key a ResizablePanelGroup provides so its parts can read/drive shared state. */
 export interface ResizableContext {
-    direction: 'horizontal' | 'vertical';
+    orientation: 'horizontal' | 'vertical';
     groupRef: Ref<HTMLElement | null>;
     order: Ref<string[]>;
     sizes: Ref<number[]>;
     registerPanel(id: string, config: PanelConfig): void;
+    /** Unregister an unmounted panel; re-seed survivors so indices stay valid. */
+    unregisterPanel(id: string): void;
     registerHandle(): number;
+    /** Handle's index from DOM position, falls back to registration counter. */
+    resolveHandleIndex(handle: Element, fallback: number): number;
     resizePanels(handleIndex: number, deltaPercent: number): void;
+    commitLayout(): void;
     getPanelConfig(index: number): PanelConfig | undefined;
+    /** Arrow key step in percentage points; Handle's `step` prop overrides. */
+    readonly step: number;
+    /** Current sizes as percentages, Panel order. */
+    getSizes(): number[];
+    /** Set layout to sizes (percentages, Panel order), clamped and renormalized. */
+    setSizes(sizes: number[]): void;
+    /** Reset each panel to its defaultSize or even split. */
+    resetSizes(): void;
 }
+/**
+ * Default panel min size. Not 0: dragging a panel to nothing loses it.
+ * Only `collapsible` panels can go lower via `collapsedSize`.
+ */
+export declare const DEFAULT_PANEL_MIN_SIZE = 10;
+/** @see {@link DEFAULT_PANEL_MIN_SIZE} */
+export declare const DEFAULT_PANEL_MAX_SIZE = 90;
 /** @internal Injection key a ResizablePanelGroup provides so its panels and handles share sizes, order, and registration. */
 export declare const RESIZABLE_CONTEXT: InjectionKey<ResizableContext>;
 /** @internal Generates a unique, stable-per-instance id for a ResizablePanel that omits its own id prop. */
 export declare function nextResizablePanelId(): string;
+/**
+ * @internal Lowest size a panel can reach: `collapsedSize` if collapsible, else `minSize`.
+ */
+export declare function panelLowerBound(config: PanelConfig): number;
+/**
+ * @internal Whether size counts as collapsed for config: collapsible panels
+ * at or below collapsedSize. Governs data-collapsed and collapse/expand events.
+ */
+export declare function isPanelCollapsed(config: PanelConfig | undefined, size: number | undefined): boolean;
+/**
+ * @internal Resolve a panel's size when a resize requests `requested`.
+ * Non-collapsible: clamp to [minSize, maxSize]. Collapsible: snap to collapsed
+ * or expand to [minSize, maxSize]. Reopening from collapse on any non-collapsed
+ * request makes collapse keyboard-operable (Arrow moves only `step` percentage points).
+ */
+export declare function resolvePanelSize(config: PanelConfig, current: number, requested: number): number;
+/**
+ * @internal Start panel's next size when handle moves by delta. Total is invariant.
+ * Collapse bypasses the neighbor's maxSize: space has to go somewhere. Neighbor absorbs
+ * space from the collapsed panel, even over its maxSize.
+ */
+export declare function resolvePairSize(leftConfig: PanelConfig, rightConfig: PanelConfig, leftSize: number, rightSize: number, delta: number): number;
+/**
+ * @internal Fresh-mount layout: panels with defaultSize get it; others split remainder evenly.
+ */
+export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];