@skdx/vue 0.28.0 → 0.29.0

package/dist/rating/context.d.cts

@@ -1,23 +1,11 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-/**
- * Payload the `value-change` event carries. `reason` distinguishes click,
- * keyboard, and programmatic sources.
- */
+/** Payload the `value-change` event carries, with `reason` distinguishing click, keyboard, and programmatic sources. */
 export interface SkdxRatingValueChangeDetail {
     /** The rating value the change settled on. */
     value: number;
-    /**
-     * The value held before the change, or `null` when it was `0` — 0 and
-     * "unrated" are the same state, so there is no real previous rating to
-     * report.
-     */
+    /** The value held before the change, or `null` when it was `0` — 0 and "unrated" are the same state. */
     previousValue: number | null;
-    /**
-     * What drove the change: `'keyboard'` for an arrow key, Home/End, or focus
-     * landing on an item; `'pointer'` for a click; `'programmatic'` when the
-     * application set it (a controlled-prop write, an imperative method, or a
-     * form reset).
-     */
+    /** What drove the change: `'keyboard'` for arrow/Home/End/focus, `'pointer'` for a click, `'programmatic'` for an application-driven set. */
     reason: 'keyboard' | 'pointer' | 'programmatic';
 }
 /** @internal Injection key a Rating provides so its items can read/drive shared state. */

package/dist/rating/context.d.ts

@@ -1,23 +1,11 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-/**
- * Payload the `value-change` event carries. `reason` distinguishes click,
- * keyboard, and programmatic sources.
- */
+/** Payload the `value-change` event carries, with `reason` distinguishing click, keyboard, and programmatic sources. */
 export interface SkdxRatingValueChangeDetail {
     /** The rating value the change settled on. */
     value: number;
-    /**
-     * The value held before the change, or `null` when it was `0` — 0 and
-     * "unrated" are the same state, so there is no real previous rating to
-     * report.
-     */
+    /** The value held before the change, or `null` when it was `0` — 0 and "unrated" are the same state. */
     previousValue: number | null;
-    /**
-     * What drove the change: `'keyboard'` for an arrow key, Home/End, or focus
-     * landing on an item; `'pointer'` for a click; `'programmatic'` when the
-     * application set it (a controlled-prop write, an imperative method, or a
-     * form reset).
-     */
+    /** What drove the change: `'keyboard'` for arrow/Home/End/focus, `'pointer'` for a click, `'programmatic'` for an application-driven set. */
     reason: 'keyboard' | 'pointer' | 'programmatic';
 }
 /** @internal Injection key a Rating provides so its items can read/drive shared state. */

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

@@ -1,11 +1,6 @@
 import type { ResizablePanelConfig } from './types.cjs';
 /**
- * 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.
- *
- * `step` sets arrow-key nudge amount in percentage points. Exposes
- * `getSizes()`, `setSizes()`, and `resetSizes()` for programmatic control.
+ * Flexbox split-pane group that redistributes size between adjacent panels via drag-to-resize handles.
  *
  * @example
  * ```vue
@@ -17,30 +12,30 @@ import type { ResizablePanelConfig } from './types.cjs';
  */
 type __VLS_Props = {
     /**
-     * Layout axis; selects flex direction, arrow-key pair, and resize cursor.
-     * Exposed as `data-orientation` and `aria-orientation` on handles.
+     * Layout axis controlling flex direction, arrow-key pairing, and resize cursor.
      * @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.
+     * Controlled panel sizes as percentages, in slot order; omit to let the group own sizes.
      * @default undefined — group owns sizes.
      */
-    sizes?: number[];
+    sizes?: number[] | undefined;
     /**
-     * Arrow-key nudge amount in percentage points. Group default; handle's
-     * own `step` wins. Percentage points, not pixels.
+     * Arrow-key nudge amount in percentage points; a handle's own `step` overrides it.
      * @default 2
      */
     step?: number;
     /**
-     * Panel configs; each renders as a derived `SkdxResizablePanel` with
-     * Handles between pairs. Ignored if default slot has content.
+     * Panel configs rendered as derived panels with handles between them; ignored when the default slot has content.
      * @default undefined — compose Panels and Handles in default slot.
      */
-    panels?: readonly ResizablePanelConfig[];
+    panels?: readonly ResizablePanelConfig[] | undefined;
+    /**
+     * Size rung the skin renders the group at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 type __VLS_Slots = {
     /** Alternating Panel/Handle composition, or use `panels` prop. */
@@ -51,14 +46,8 @@ type __VLS_Slots = {
         index: number;
     }): unknown;
 };
-/** 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. */
@@ -77,19 +66,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
         panelId: string;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCollapse?: ((detail: {
+    onCollapse?: (detail: {
         panelId: string;
-    }) => any) | undefined;
-    onLayout?: ((sizes: number[]) => any) | undefined;
-    "onLayout-commit"?: ((sizes: number[]) => any) | undefined;
-    onExpand?: ((detail: {
+    }) => any;
+    onLayout?: (sizes: number[]) => any;
+    "onLayout-commit"?: (sizes: number[]) => any;
+    onExpand?: (detail: {
         panelId: string;
-    }) => any) | undefined;
+    }) => any;
 }>, {
     step: number;
     orientation: "horizontal" | "vertical";
-    sizes: number[];
-    panels: readonly ResizablePanelConfig[];
+    sizes: number[] | undefined;
+    panels: readonly ResizablePanelConfig[] | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,11 +1,6 @@
 import type { ResizablePanelConfig } from './types.js';
 /**
- * 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.
- *
- * `step` sets arrow-key nudge amount in percentage points. Exposes
- * `getSizes()`, `setSizes()`, and `resetSizes()` for programmatic control.
+ * Flexbox split-pane group that redistributes size between adjacent panels via drag-to-resize handles.
  *
  * @example
  * ```vue
@@ -17,30 +12,30 @@ import type { ResizablePanelConfig } from './types.js';
  */
 type __VLS_Props = {
     /**
-     * Layout axis; selects flex direction, arrow-key pair, and resize cursor.
-     * Exposed as `data-orientation` and `aria-orientation` on handles.
+     * Layout axis controlling flex direction, arrow-key pairing, and resize cursor.
      * @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.
+     * Controlled panel sizes as percentages, in slot order; omit to let the group own sizes.
      * @default undefined — group owns sizes.
      */
-    sizes?: number[];
+    sizes?: number[] | undefined;
     /**
-     * Arrow-key nudge amount in percentage points. Group default; handle's
-     * own `step` wins. Percentage points, not pixels.
+     * Arrow-key nudge amount in percentage points; a handle's own `step` overrides it.
      * @default 2
      */
     step?: number;
     /**
-     * Panel configs; each renders as a derived `SkdxResizablePanel` with
-     * Handles between pairs. Ignored if default slot has content.
+     * Panel configs rendered as derived panels with handles between them; ignored when the default slot has content.
      * @default undefined — compose Panels and Handles in default slot.
      */
-    panels?: readonly ResizablePanelConfig[];
+    panels?: readonly ResizablePanelConfig[] | undefined;
+    /**
+     * Size rung the skin renders the group at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 type __VLS_Slots = {
     /** Alternating Panel/Handle composition, or use `panels` prop. */
@@ -51,14 +46,8 @@ type __VLS_Slots = {
         index: number;
     }): unknown;
 };
-/** 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. */
@@ -77,19 +66,19 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
         panelId: string;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCollapse?: ((detail: {
+    onCollapse?: (detail: {
         panelId: string;
-    }) => any) | undefined;
-    onLayout?: ((sizes: number[]) => any) | undefined;
-    "onLayout-commit"?: ((sizes: number[]) => any) | undefined;
-    onExpand?: ((detail: {
+    }) => any;
+    onLayout?: (sizes: number[]) => any;
+    "onLayout-commit"?: (sizes: number[]) => any;
+    onExpand?: (detail: {
         panelId: string;
-    }) => any) | undefined;
+    }) => any;
 }>, {
     step: number;
     orientation: "horizontal" | "vertical";
-    sizes: number[];
-    panels: readonly ResizablePanelConfig[];
+    sizes: number[] | undefined;
+    panels: readonly ResizablePanelConfig[] | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/resizable/Resizable.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-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;
+const F=require("../utils/appearance.cjs"),I=require("../utils/clamp.cjs"),a=require("./context.cjs"),M=require("./ResizableHandle.vue.cjs"),X=require("./ResizablePanel.vue.cjs");let n=require("vue");var Z=["data-orientation"],j=(0,n.defineComponent)({inheritAttrs:!1,__name:"Resizable",props:{orientation:{default:"horizontal"},sizes:{default:void 0},step:{default:2},panels:{default:void 0},size:{}},emits:["layout","layout-commit","collapse","expand"],setup(c,{expose:R,emit:w}){const d=c,p=w,v=(0,n.ref)(null),i=new Map;let x=0;const r=(0,n.ref)([]),z=(0,n.ref)([]),L=(0,n.computed)(()=>d.sizes!==void 0),f=(0,n.computed)(()=>d.sizes??z.value);function A(e,l){r.value.forEach((t,o)=>{const s=i.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),A(l,e)}function N(e,l){if(i.has(e))return;i.set(e,l);const t=r.value.includes(e)?r.value:[...r.value,e];r.value=t,z.value=a.seedSizes(t.map(o=>i.get(o)))}function O(e){if(i.delete(e),!r.value.includes(e))return;const l=r.value.filter(t=>t!==e);r.value=l,z.value=a.seedSizes(l.map(t=>i.get(t)))}function $(){const e=x;return x+=1,e}function H(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 T(e){const l=r.value[e];return l?i.get(l):void 0}function V(e,l){const t=e,o=e+1;if(t<0||o>=r.value.length)return;const s=f.value,u=i.get(r.value[t]),m=i.get(r.value[o]),S=s[t],_=s[o],h=a.resolvePairSize(u,m,S,_,l);if(h===S)return;const y=[...s];y[t]=h,y[o]=S+_-h,k(y)}let g=!1,b=null;function q(){g&&(g=!1,p("layout-commit",[...b??f.value]))}function C(e){const l=r.value.map((o,s)=>{const u=i.get(o);return I.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),q()}function B(){return[...f.value]}function P(e){C(e)}function E(){C(a.seedSizes(r.value.map(e=>i.get(e))))}R({getSizes:B,setSizes:P,resetSizes:E}),(0,n.provide)(a.RESIZABLE_CONTEXT,{get orientation(){return d.orientation},groupRef:v,order:r,sizes:f,registerPanel:N,unregisterPanel:O,registerHandle:$,resolveHandleIndex:H,resizePanels:V,commitLayout:q,getPanelConfig:T,get step(){return d.step},getSizes:B,setSizes:P,resetSizes:E});const D=(0,n.computed)(()=>({display:"flex",flexDirection:d.orientation==="horizontal"?"row":"column"}));return(e,l)=>((0,n.openBlock)(),(0,n.createElementBlock)("div",(0,n.mergeProps)({ref_key:"groupRef",ref:v,class:"skdx-resizable","data-part":"root","data-skdx-component":"resizable","data-orientation":c.orientation,style:D.value},{...e.$attrs,...(0,n.unref)(F.appearanceAttrs)({size:c.size},e.$attrs)}),[(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)(X.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)(M.default,{key:0})):(0,n.createCommentVNode)("",!0)],64))),128))])],16,Z))}});exports.default=j;

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

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

@@ -2,13 +2,11 @@
 type __VLS_Props = {
     /** Disables dragging and keyboard resizing on this handle. @default false */
     disabled?: boolean;
-    /**
-     * 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;
+    /** Percentage points nudged per Arrow key press, overriding the group's own `step` for this one handle. @default undefined */
+    step?: number | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
-    step: number;
+    step: number | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -2,13 +2,11 @@
 type __VLS_Props = {
     /** Disables dragging and keyboard resizing on this handle. @default false */
     disabled?: boolean;
-    /**
-     * 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;
+    /** Percentage points nudged per Arrow key press, overriding the group's own `step` for this one handle. @default undefined */
+    step?: number | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
-    step: number;
+    step: number | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/resizable/ResizableHandle.vue_vue_type_script_setup_true_lang.cjs

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

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

@@ -1,39 +1,51 @@
-/**
- * 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.
- */
+/** Pane within SkdxResizablePanelGroup that registers its size constraints on mount and renders with the resolved id. */
 type __VLS_Props = {
-    /** Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels. */
-    defaultSize?: number;
-    /** Minimum size as a percentage (0-100); an adjacent handle won't shrink this panel past it. */
-    minSize?: number;
-    /** Maximum size as a percentage (0-100); an adjacent handle won't grow this panel past it. */
-    maxSize?: number;
+    /**
+     * Initial size as a percentage (0-100); omit to split remaining space evenly with other auto-sized panels.
+     * @min 0
+     * @max 100
+     */
+    defaultSize?: number | undefined;
+    /**
+     * Minimum size as a percentage (0-100); an adjacent handle won't shrink this panel past it.
+     * @min 0
+     * @max 100
+     */
+    minSize?: number | undefined;
+    /**
+     * Maximum size as a percentage (0-100); an adjacent handle won't grow this panel past it.
+     * @min 0
+     * @max 100
+     */
+    maxSize?: number | undefined;
     /**
      * Lets this panel close entirely: a resize below `minSize` snaps it to `collapsedSize`, reopening at `minSize` on any resize away.
      * @default false
      */
-    collapsible?: boolean;
+    collapsible?: boolean | undefined;
     /**
      * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` and the group emits `collapse`/`expand` crossing it.
      * @default 0
+     * @min 0
+     * @max 100
+     */
+    collapsedSize?: number | undefined;
+    /**
+     * Stable identifier used to track this panel's size across renders; auto-generated if omitted.
+     * @default undefined
      */
-    collapsedSize?: number;
-    /** Stable identifier used to track this panel's size across renders. Auto-generated if omitted. */
-    id?: string;
+    id?: string | undefined;
 };
 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<{}>, {
-    id: string;
-    collapsible: boolean;
-    defaultSize: number;
-    minSize: number;
-    maxSize: number;
-    collapsedSize: number;
+    collapsible: boolean | undefined;
+    defaultSize: number | undefined;
+    minSize: number | undefined;
+    maxSize: number | undefined;
+    collapsedSize: number | undefined;
 }, {}, {}, {}, 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,39 +1,51 @@
-/**
- * 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.
- */
+/** Pane within SkdxResizablePanelGroup that registers its size constraints on mount and renders with the resolved id. */
 type __VLS_Props = {
-    /** Initial size as a percentage (0-100). Omit to split remaining space evenly with other auto-sized panels. */
-    defaultSize?: number;
-    /** Minimum size as a percentage (0-100); an adjacent handle won't shrink this panel past it. */
-    minSize?: number;
-    /** Maximum size as a percentage (0-100); an adjacent handle won't grow this panel past it. */
-    maxSize?: number;
+    /**
+     * Initial size as a percentage (0-100); omit to split remaining space evenly with other auto-sized panels.
+     * @min 0
+     * @max 100
+     */
+    defaultSize?: number | undefined;
+    /**
+     * Minimum size as a percentage (0-100); an adjacent handle won't shrink this panel past it.
+     * @min 0
+     * @max 100
+     */
+    minSize?: number | undefined;
+    /**
+     * Maximum size as a percentage (0-100); an adjacent handle won't grow this panel past it.
+     * @min 0
+     * @max 100
+     */
+    maxSize?: number | undefined;
     /**
      * Lets this panel close entirely: a resize below `minSize` snaps it to `collapsedSize`, reopening at `minSize` on any resize away.
      * @default false
      */
-    collapsible?: boolean;
+    collapsible?: boolean | undefined;
     /**
      * The size, as a percentage, a `collapsible` panel takes while closed; carries `data-collapsed` and the group emits `collapse`/`expand` crossing it.
      * @default 0
+     * @min 0
+     * @max 100
+     */
+    collapsedSize?: number | undefined;
+    /**
+     * Stable identifier used to track this panel's size across renders; auto-generated if omitted.
+     * @default undefined
      */
-    collapsedSize?: number;
-    /** Stable identifier used to track this panel's size across renders. Auto-generated if omitted. */
-    id?: string;
+    id?: string | undefined;
 };
 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<{}>, {
-    id: string;
-    collapsible: boolean;
-    defaultSize: number;
-    minSize: number;
-    maxSize: number;
-    collapsedSize: number;
+    collapsible: boolean | undefined;
+    defaultSize: number | undefined;
+    minSize: number | undefined;
+    maxSize: number | undefined;
+    collapsedSize: number | undefined;
 }, {}, {}, {}, 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 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;
+const p=require("../utils/injectRequired.cjs"),d=require("./context.cjs");let l=require("vue");var z=["id","data-orientation","data-collapsed"],S=(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:{}},setup(r){const e=r,a=p.injectRequired(d.RESIZABLE_CONTEXT,"SkdxResizablePanel must be used within SkdxResizablePanelGroup."),t=e.id??d.nextResizablePanelId();(0,l.onMounted)(()=>{a.registerPanel(t,{defaultSize:e.defaultSize,minSize:e.minSize,maxSize:e.maxSize,collapsible:e.collapsible,collapsedSize:e.collapsedSize})}),(0,l.onUnmounted)(()=>a.unregisterPanel(t));const o=(0,l.computed)(()=>{const i=a.order.value.indexOf(t);return i>=0?a.sizes.value[i]:void 0}),u=(0,l.computed)(()=>d.isPanelCollapsed({minSize:e.minSize,maxSize:e.maxSize,collapsible:e.collapsible,collapsedSize:e.collapsedSize},o.value)),c=(0,l.computed)(()=>{const i=o.value,n=i===void 0;let s=`${i}%`;return n&&(s=e.defaultSize===void 0?"0%":`${e.defaultSize}%`),{flexBasis:s,flexGrow:n&&e.defaultSize===void 0?1:0,flexShrink:0,overflow:"hidden"}});return(i,n)=>((0,l.openBlock)(),(0,l.createElementBlock)("div",{id:(0,l.unref)(t),class:"skdx-resizable__panel","data-part":"panel","data-skdx-resizable-panel":"","data-orientation":(0,l.unref)(a).orientation,"data-collapsed":u.value?"":void 0,style:(0,l.normalizeStyle)(c.value)},[(0,l.renderSlot)(i.$slots,"default")],12,z))}});exports.default=S;

package/dist/resizable/ResizablePanel.vue_vue_type_script_setup_true_lang.js

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

package/dist/resizable/context.d.cts

@@ -3,7 +3,7 @@ import { clamp } from '../utils/clamp.cjs';
 export { clamp };
 /** @internal Per-panel size constraints registered with SkdxResizablePanelGroup. */
 export interface PanelConfig {
-    defaultSize?: number;
+    defaultSize?: number | undefined;
     minSize: number;
     maxSize: number;
     collapsible?: boolean;
@@ -33,10 +33,7 @@ export interface ResizableContext {
     /** 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`.
- */
+/** Default panel min size; 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;
@@ -44,29 +41,13 @@ export declare const DEFAULT_PANEL_MAX_SIZE = 90;
 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`.
- */
+/** @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.
- */
+/** @internal Whether a collapsible panel's size counts as collapsed, for 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).
- */
+/** @internal Resolves a panel's next size for a resize request, snapping collapsible panels shut or reopening them. */
 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.
- */
+/** @internal Start panel's next size when the handle moves by delta, keeping the pair's total invariant. */
 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.
- */
+/** @internal Fresh-mount layout: panels with defaultSize get it; others split remainder evenly. */
 export declare function seedSizes(configs: ReadonlyArray<PanelConfig | undefined>): number[];