@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/resizable/ResizeGroup.svelte

@@ -0,0 +1,308 @@
+<!--
+  ResizeGroup — horizontal/vertical split of ResizeItem panels separated by
+  ResizeHandler. Children register declaratively via context (§9.3: registration
+  is bookkept in PLAIN arrays, first-frame measurement is deferred with
+  setTimeout 0 and cleaned up, so no effect_update_depth_exceeded).
+
+  Coupling geometry is delegated to core computeGroupResize (Semi-ported):
+  dragging a handler grows one neighbour and shrinks the other, conserving the
+  sum; per-item min/max clamps redistribute to keep the total. Sizes live as
+  `calc(percent% - minus)` flex-basis where minus reserves half a handler.
+  DOM mirrors Semi: root cd-resizable-group with inline flex-direction plus an
+  isResizing fixed background overlay.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount, setContext, tick } from 'svelte';
+  import {
+    computeGroupResize,
+    getOffset,
+    type GroupDirection,
+  } from '@chenzy-design/core';
+  import {
+    RESIZE_GROUP_KEY,
+    type ResizeGroupContext,
+    type ResizeItemRegistration,
+    type ResizeHandlerRegistration,
+  } from './context.js';
+
+  interface Props {
+    /** 分栏方向（横向=调宽，纵向=调高）。默认 horizontal。 */
+    direction?: GroupDirection;
+    class?: string;
+    style?: string;
+    children?: Snippet;
+  }
+
+  let { direction = 'horizontal', class: className = '', style, children }: Props = $props();
+
+  let groupEl = $state<HTMLDivElement | null>(null);
+  let isResizing = $state(false);
+
+  // 声明式注册用普通数组簿记（非 $state，避免 §9.3 effect 自循环）。
+  const items: ResizeItemRegistration[] = [];
+  const handlers: ResizeHandlerRegistration[] = [];
+
+  // 每项当前百分比（消浮点） / handler 留位补偿。以 item id 为 key。
+  const itemPercent = new Map<number, number>();
+  const itemMinus = new Map<number, number>();
+
+  // 拖拽期间的全局监听句柄（命令式，红线 no.3）。
+  let activeMove: ((e: PointerEvent) => void) | null = null;
+  let activeUp: ((e: PointerEvent) => void) | null = null;
+
+  function groupSize(): number {
+    if (!groupEl) return 0;
+    return direction === 'horizontal' ? groupEl.offsetWidth : groupEl.offsetHeight;
+  }
+
+  // DOM 顺序排序（注册顺序即挂载顺序，但用 DOM 位置更可靠）。
+  function orderedItems(): ResizeItemRegistration[] {
+    return [...items].sort((a, b) => domIndex(a.getEl()) - domIndex(b.getEl()));
+  }
+  function orderedHandlers(): ResizeHandlerRegistration[] {
+    return [...handlers].sort((a, b) => domIndex(a.getEl()) - domIndex(b.getEl()));
+  }
+  function domIndex(el: HTMLElement | null): number {
+    if (!el || !groupEl) return 0;
+    return Array.prototype.indexOf.call(groupEl.children, el);
+  }
+
+  // 首帧测量：按 default/min/max 分配百分比，写入 flex-basis。延后一帧纳入 cleanup。
+  function initSpace(): void {
+    const parent = groupSize();
+    if (parent <= 0) return;
+    const its = orderedItems();
+    const hs = orderedHandlers();
+    const handlerSizes = hs.map((h) => {
+      const el = h.getEl();
+      if (!el) return 0;
+      return direction === 'horizontal' ? el.offsetWidth : el.offsetHeight;
+    });
+
+    // 每项 minus：相邻 handler 的一半
+    its.forEach((it, i) => {
+      let minus = 0;
+      if (i === 0) minus = (handlerSizes[0] ?? 0) / 2;
+      else if (i === its.length - 1) minus = (handlerSizes[i - 1] ?? 0) / 2;
+      else minus = (handlerSizes[i - 1] ?? 0) / 2 + (handlerSizes[i] ?? 0) / 2;
+      itemMinus.set(it.id, minus);
+    });
+
+    let totalPercent = 0;
+    const undefLoc = new Map<number, number>();
+    let undefTotal = 0;
+
+    its.forEach((it) => {
+      const def = it.getDefaultSize();
+      if (def != null && def !== '') {
+        let pct: number | null = null;
+        if (typeof def === 'string') {
+          if (def.endsWith('%')) pct = parseFloat(def.slice(0, -1));
+          else if (def.endsWith('px')) pct = (parseFloat(def.slice(0, -2)) / parent) * 100;
+          else if (/^-?\d+(\.\d+)?$/.test(def)) {
+            undefLoc.set(it.id, parseFloat(def));
+            undefTotal += parseFloat(def);
+            return;
+          }
+        } else if (typeof def === 'number') {
+          undefLoc.set(it.id, def);
+          undefTotal += def;
+          return;
+        }
+        if (pct != null) {
+          itemPercent.set(it.id, pct);
+          totalPercent += pct;
+          applyBasis(it, pct);
+        }
+      } else {
+        undefLoc.set(it.id, 1);
+        undefTotal += 1;
+      }
+    });
+
+    let undefPercent = 100 - totalPercent;
+    if (totalPercent > 100) undefPercent = 10;
+    undefLoc.forEach((weight, id) => {
+      const it = its.find((x) => x.id === id);
+      if (!it) return;
+      const pct = undefTotal > 0 ? (weight / undefTotal) * undefPercent : 0;
+      itemPercent.set(id, pct);
+      applyBasis(it, pct);
+    });
+  }
+
+  function applyBasis(it: ResizeItemRegistration, pct: number): void {
+    const el = it.getEl();
+    if (!el) return;
+    const minus = itemMinus.get(it.id) ?? 0;
+    const basis = `calc(${pct}% - ${minus}px)`;
+    if (direction === 'horizontal') {
+      el.style.flex = `0 0 ${basis}`;
+      el.style.width = basis;
+    } else {
+      el.style.flex = `0 0 ${basis}`;
+      el.style.height = basis;
+    }
+  }
+
+  onMount(() => {
+    // 首帧测量延后一帧（DOM 完成布局），纳入 cleanup。
+    const id = setTimeout(() => {
+      initSpace();
+    }, 0);
+    return () => {
+      clearTimeout(id);
+      if (activeMove) document.removeEventListener('pointermove', activeMove);
+      if (activeUp) document.removeEventListener('pointerup', activeUp);
+    };
+  });
+
+  function neighboursOf(handlerId: number): {
+    last: ResizeItemRegistration;
+    next: ResizeItemRegistration;
+    idx: number;
+  } | null {
+    const hs = orderedHandlers();
+    const its = orderedItems();
+    const idx = hs.findIndex((h) => h.id === handlerId);
+    if (idx < 0 || idx + 1 >= its.length) return null;
+    const last = its[idx];
+    const next = its[idx + 1];
+    if (!last || !next) return null;
+    return { last, next, idx };
+  }
+
+  function startHandlerDrag(handlerId: number, event: PointerEvent): void {
+    const pair = neighboursOf(handlerId);
+    if (!pair || !groupEl) return;
+    const { last, next } = pair;
+    const lastEl = last.getEl();
+    const nextEl = next.getEl();
+    if (!lastEl || !nextEl) return;
+
+    // onResizeStart（返回 false 取消）
+    const [lastDir, nextDir] = direction === 'horizontal' ? (['right', 'left'] as const) : (['bottom', 'top'] as const);
+    const c1 = last.onResizeStart?.(event, lastDir);
+    const c2 = next.onResizeStart?.(event, nextDir);
+    if (c1 === false || c2 === false) return;
+
+    event.preventDefault();
+    isResizing = true;
+
+    const win = groupEl.ownerDocument.defaultView ?? window;
+    const lastMinus = itemMinus.get(last.id) ?? 0;
+    const nextMinus = itemMinus.get(next.id) ?? 0;
+    const lastOffset = getOffset(win.getComputedStyle(lastEl), direction) + lastMinus;
+    const nextOffset = getOffset(win.getComputedStyle(nextEl), direction) + nextMinus;
+    const lastItemSize = (direction === 'horizontal' ? lastEl.offsetWidth : lastEl.offsetHeight) + lastMinus;
+    const nextItemSize = (direction === 'horizontal' ? nextEl.offsetWidth : nextEl.offsetHeight) + nextMinus;
+    const initX = event.clientX;
+    const initY = event.clientY;
+    const parent = groupSize();
+
+    const onMove = (e: PointerEvent) => {
+      const delta = direction === 'horizontal' ? e.clientX - initX : e.clientY - initY;
+      const r = computeGroupResize({
+        direction,
+        parentSize: parent,
+        delta,
+        lastItemSize,
+        nextItemSize,
+        lastItemPercent: itemPercent.get(last.id) ?? 0,
+        nextItemPercent: itemPercent.get(next.id) ?? 0,
+        last: { min: last.getMin(), max: last.getMax(), offset: lastOffset },
+        next: { min: next.getMin(), max: next.getMax(), offset: nextOffset },
+      });
+      itemPercent.set(last.id, r.lastNewPercent);
+      itemPercent.set(next.id, r.nextNewPercent);
+      applyBasis(last, r.lastNewPercent);
+      applyBasis(next, r.nextNewPercent);
+      last.onChange?.({ width: lastEl.offsetWidth, height: lastEl.offsetHeight }, e, lastDir);
+      next.onChange?.({ width: nextEl.offsetWidth, height: nextEl.offsetHeight }, e, nextDir);
+    };
+    const onUp = (e: PointerEvent) => {
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      activeMove = null;
+      activeUp = null;
+      isResizing = false;
+      last.onResizeEnd?.({ width: lastEl.offsetWidth, height: lastEl.offsetHeight }, e, lastDir);
+      next.onResizeEnd?.({ width: nextEl.offsetWidth, height: nextEl.offsetHeight }, e, nextDir);
+    };
+    activeMove = onMove;
+    activeUp = onUp;
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+  }
+
+  let nextId = 0;
+  const ctx: ResizeGroupContext = {
+    direction: () => direction,
+    registerItem(reg) {
+      reg.id = nextId++;
+      items.push(reg);
+      // 新增项后重新测量（延后一帧，避免注册期同步 dispatch 引发 §9.3 循环）。
+      queueMeasure();
+      return () => {
+        const i = items.indexOf(reg);
+        if (i >= 0) items.splice(i, 1);
+      };
+    },
+    registerHandler(reg) {
+      reg.id = nextId++;
+      handlers.push(reg);
+      return () => {
+        const i = handlers.indexOf(reg);
+        if (i >= 0) handlers.splice(i, 1);
+      };
+    },
+    startHandlerDrag,
+  };
+
+  let measureQueued = false;
+  function queueMeasure(): void {
+    if (measureQueued) return;
+    measureQueued = true;
+    tick().then(() => {
+      measureQueued = false;
+      // 仅在尚未分配百分比时初始化（避免拖拽后被重置）。
+      if (itemPercent.size < items.length) initSpace();
+    });
+  }
+
+  setContext<ResizeGroupContext>(RESIZE_GROUP_KEY, ctx);
+
+  const cls = $derived(['cd-resizable-group', className].filter(Boolean).join(' '));
+  const groupStyle = $derived(
+    [`flex-direction:${direction === 'vertical' ? 'column' : 'row'}`, style ?? '']
+      .filter(Boolean)
+      .join(';'),
+  );
+</script>
+
+<div bind:this={groupEl} class={cls} style={groupStyle}>
+  {#if isResizing}
+    <div class="cd-resizable-background"></div>
+  {/if}
+  {@render children?.()}
+</div>
+
+<style>
+  .cd-resizable-group {
+    display: flex;
+    position: relative;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+  }
+
+  .cd-resizable-background {
+    height: 100%;
+    width: 100%;
+    inset: 0;
+    z-index: 20;
+    opacity: 0;
+    position: fixed;
+  }
+</style>

package/dist/resizable/ResizeGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import { type GroupDirection } from '@chenzy-design/core';
+interface Props {
+    /** 分栏方向（横向=调宽，纵向=调高）。默认 horizontal。 */
+    direction?: GroupDirection;
+    class?: string;
+    style?: string;
+    children?: Snippet;
+}
+declare const ResizeGroup: import("svelte").Component<Props, {}, "">;
+type ResizeGroup = ReturnType<typeof ResizeGroup>;
+export default ResizeGroup;
+//# sourceMappingURL=ResizeGroup.svelte.d.ts.map

package/dist/resizable/ResizeGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/resizable/ResizeGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAGH,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAC;AAS7B,UAAU,KAAK;IACb,uCAAuC;IACvC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2QH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/resizable/ResizeHandler.svelte

@@ -0,0 +1,87 @@
+<!--
+  ResizeHandler — draggable separator between two ResizeItems. Registers with the
+  group (context); pointerdown delegates to the group's coupling geometry.
+  Strictly aligned with Semi Design: a bare div (no role / aria / tabindex /
+  keyboard), rendering IconHandle by default (rotated 90deg on vertical groups).
+  DOM: root cd-resizable-handler cd-resizable-handler-{direction}.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext, onMount } from 'svelte';
+  import { IconHandle } from '@chenzy-design/icons';
+  import { RESIZE_GROUP_KEY, type ResizeGroupContext, type ResizeHandlerRegistration } from './context.js';
+
+  interface Props {
+    /** 禁用该把手。 */
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+    onResizeStart?: (event: PointerEvent) => void;
+    children?: Snippet;
+  }
+
+  let { disabled = false, class: className = '', style, onResizeStart, children }: Props = $props();
+
+  const group = getContext<ResizeGroupContext | undefined>(RESIZE_GROUP_KEY);
+
+  let el = $state<HTMLDivElement | null>(null);
+  let myId = $state(-1);
+
+  onMount(() => {
+    if (!group) return;
+    const reg: ResizeHandlerRegistration = {
+      id: -1,
+      getEl: () => el,
+      isDisabled: () => disabled,
+    };
+    const unregister = group.registerHandler(reg);
+    myId = reg.id;
+    return unregister;
+  });
+
+  const direction = $derived(group?.direction() ?? 'horizontal');
+
+  function onPointerDown(event: PointerEvent): void {
+    if (disabled || event.button !== 0 || !group) return;
+    onResizeStart?.(event);
+    group.startHandlerDrag(myId, event);
+  }
+
+  const cls = $derived(
+    [className, 'cd-resizable-handler', `cd-resizable-handler-${direction}`].filter(Boolean).join(' '),
+  );
+</script>
+
+<!-- 把手是裸命中区，严格对齐 Semi（无 role/aria/键盘），仅承载指针拖拽。 -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div bind:this={el} class={cls} {style} onpointerdown={onPointerDown}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <IconHandle size="inherit" style={direction === 'horizontal' ? 'rotate: 0deg' : 'rotate: 90deg'} />
+  {/if}
+</div>
+
+<style>
+  .cd-resizable-handler {
+    user-select: none;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--cd-color-fill-0);
+    opacity: 1;
+  }
+  .cd-resizable-handler-vertical {
+    width: 100%;
+    height: 10px;
+    flex-shrink: 0;
+    cursor: row-resize;
+  }
+  .cd-resizable-handler-horizontal {
+    height: 100%;
+    width: 10px;
+    flex-shrink: 0;
+    cursor: col-resize;
+  }
+</style>

package/dist/resizable/ResizeHandler.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 禁用该把手。 */
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+    onResizeStart?: (event: PointerEvent) => void;
+    children?: Snippet;
+}
+declare const ResizeHandler: import("svelte").Component<Props, {}, "">;
+type ResizeHandler = ReturnType<typeof ResizeHandler>;
+export default ResizeHandler;
+//# sourceMappingURL=ResizeHandler.svelte.d.ts.map

package/dist/resizable/ResizeHandler.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandler.svelte.d.ts","sourceRoot":"","sources":["../../src/resizable/ResizeHandler.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMpC,UAAU,KAAK;IACb,aAAa;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuDH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/resizable/ResizeItem.svelte

@@ -0,0 +1,103 @@
+<!--
+  ResizeItem — one panel inside a ResizeGroup. Registers with the group (context)
+  declaratively; the group drives its flex-basis. Registration bookkeeping is a
+  plain object handed to the group (no reactive dispatch on mount → no §9.3 loop).
+  On dynamic direction change the inline width↔height is swapped (aligns Semi).
+  DOM: root cd-resizable-item.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext, onMount, tick } from 'svelte';
+  import type { ResizeCallback, ResizeStartCallback, GroupDirection } from '@chenzy-design/core';
+  import {
+    RESIZE_GROUP_KEY,
+    type ResizeGroupContext,
+    type ResizeItemRegistration,
+  } from './context.js';
+
+  interface Props {
+    /** 初始尺寸（百分比字符串 / px / 纯数字比例）。 */
+    defaultSize?: string | number;
+    /** 最小尺寸（百分比或像素）。 */
+    min?: string;
+    /** 最大尺寸（百分比或像素）。 */
+    max?: string;
+    onResizeStart?: ResizeStartCallback;
+    onChange?: ResizeCallback;
+    onResizeEnd?: ResizeCallback;
+    class?: string;
+    style?: string;
+    children?: Snippet;
+  }
+
+  let {
+    defaultSize,
+    min,
+    max,
+    onResizeStart,
+    onChange,
+    onResizeEnd,
+    class: className = '',
+    style,
+    children,
+  }: Props = $props();
+
+  const group = getContext<ResizeGroupContext | undefined>(RESIZE_GROUP_KEY);
+
+  let el = $state<HTMLDivElement | null>(null);
+
+  onMount(() => {
+    if (!group) return;
+    const reg: ResizeItemRegistration = {
+      id: -1,
+      getEl: () => el,
+      getMin: () => min,
+      getMax: () => max,
+      getDefaultSize: () => defaultSize,
+      onResizeStart,
+      onChange,
+      onResizeEnd,
+    };
+    const unregister = group.registerItem(reg);
+    return unregister;
+  });
+
+  // 支持动态方向：direction 变化时把 inline width↔height 互换（对齐 Semi）。
+  let prevDirection: GroupDirection | undefined;
+  $effect(() => {
+    const dir = group?.direction();
+    if (!dir) return;
+    if (prevDirection === undefined) {
+      prevDirection = dir;
+      return;
+    }
+    if (dir === prevDirection) return;
+    prevDirection = dir;
+    tick().then(() => {
+      if (!el) return;
+      if (dir === 'horizontal') {
+        const newWidth = el.style.height;
+        el.style.width = newWidth;
+        el.style.removeProperty('height');
+      } else {
+        const newHeight = el.style.width;
+        el.style.height = newHeight;
+        el.style.removeProperty('width');
+      }
+    });
+  });
+
+  const cls = $derived([className, 'cd-resizable-item'].filter(Boolean).join(' '));
+</script>
+
+<div bind:this={el} class={cls} {style}>
+  {@render children?.()}
+</div>
+
+<style>
+  .cd-resizable-item {
+    position: relative;
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+</style>

package/dist/resizable/ResizeItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { ResizeCallback, ResizeStartCallback } from '@chenzy-design/core';
+interface Props {
+    /** 初始尺寸（百分比字符串 / px / 纯数字比例）。 */
+    defaultSize?: string | number;
+    /** 最小尺寸（百分比或像素）。 */
+    min?: string;
+    /** 最大尺寸（百分比或像素）。 */
+    max?: string;
+    onResizeStart?: ResizeStartCallback;
+    onChange?: ResizeCallback;
+    onResizeEnd?: ResizeCallback;
+    class?: string;
+    style?: string;
+    children?: Snippet;
+}
+declare const ResizeItem: import("svelte").Component<Props, {}, "">;
+type ResizeItem = ReturnType<typeof ResizeItem>;
+export default ResizeItem;
+//# sourceMappingURL=ResizeItem.svelte.d.ts.map

package/dist/resizable/ResizeItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeItem.svelte.d.ts","sourceRoot":"","sources":["../../src/resizable/ResizeItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAkB,MAAM,qBAAqB,CAAC;AAQ7F,UAAU,KAAK;IACb,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6EH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/resizable/context.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Shared context for the ResizeGroup / ResizeItem / ResizeHandler family.
+ * Items and handlers register themselves declaratively (onMount) with the group.
+ * Bookkeeping uses a PLAIN array (not $state) to avoid the Svelte 5 effect loop
+ * described in AGENTS.md §9.3 — the group re-measures on a single trigger state.
+ */
+import type { Direction, GroupDirection, ResizeCallback, ResizeStartCallback } from '@chenzy-design/core';
+import type { Snippet } from 'svelte';
+/** Per-direction custom class names for single Resizable handles. */
+export type HandleClassName = Partial<Record<Direction, string>>;
+/** Per-direction inline styles for single Resizable handles. */
+export type HandleStyle = Partial<Record<Direction, string>>;
+/** Per-direction custom handle content for single Resizable handles. */
+export type HandleNode = Partial<Record<Direction, Snippet>>;
+export interface ResizeItemRegistration {
+    /** stable id for ordering */
+    id: number;
+    getEl: () => HTMLElement | null;
+    getMin: () => string | undefined;
+    getMax: () => string | undefined;
+    getDefaultSize: () => string | number | undefined;
+    onResizeStart?: ResizeStartCallback | undefined;
+    onChange?: ResizeCallback | undefined;
+    onResizeEnd?: ResizeCallback | undefined;
+}
+export interface ResizeHandlerRegistration {
+    id: number;
+    getEl: () => HTMLElement | null;
+    isDisabled: () => boolean;
+}
+export interface ResizeGroupContext {
+    direction: () => GroupDirection;
+    registerItem: (reg: ResizeItemRegistration) => () => void;
+    registerHandler: (reg: ResizeHandlerRegistration) => () => void;
+    /** Begin a drag from the handler with the given id. */
+    startHandlerDrag: (handlerId: number, event: PointerEvent) => void;
+}
+export declare const RESIZE_GROUP_KEY: unique symbol;
+//# sourceMappingURL=context.d.ts.map

package/dist/resizable/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/resizable/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,cAAc,EACd,mBAAmB,EACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,qEAAqE;AACrE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AACjE,gEAAgE;AAChE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAC7D,wEAAwE;AACxE,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAE7D,MAAM,WAAW,sBAAsB;IACrC,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjC,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjC,cAAc,EAAE,MAAM,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAClD,aAAa,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;CAC1C;AAED,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,cAAc,CAAC;IAChC,YAAY,EAAE,CAAC,GAAG,EAAE,sBAAsB,KAAK,MAAM,IAAI,CAAC;IAC1D,eAAe,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,MAAM,IAAI,CAAC;IAChE,uDAAuD;IACvD,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CACpE;AAED,eAAO,MAAM,gBAAgB,eAA4B,CAAC"}

package/dist/resizable/context.js

@@ -0,0 +1 @@
+export const RESIZE_GROUP_KEY = Symbol('cd-resize-group');

package/dist/resizable/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Resizable } from './Resizable.svelte';
+export { default as ResizeGroup } from './ResizeGroup.svelte';
+export { default as ResizeItem } from './ResizeItem.svelte';
+export { default as ResizeHandler } from './ResizeHandler.svelte';
+export { meta as resizableMeta } from './meta.js';
+export { RESIZE_GROUP_KEY, type ResizeGroupContext, type ResizeItemRegistration, type ResizeHandlerRegistration, type HandleClassName, type HandleStyle, type HandleNode, } from './context.js';
+export { createResizeDrag, computeGroupResize, type Direction, type Enable, type ResizableSize, type ResizeAxis, type GroupDirection, type ResizeCallback, type ResizeStartCallback, type CreateResizeDragOptions, type ResizeDragController, } from '@chenzy-design/core';
+//# sourceMappingURL=index.d.ts.map

package/dist/resizable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resizable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EACL,gBAAgB,EAChB,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,GAC1B,MAAM,qBAAqB,CAAC"}

package/dist/resizable/index.js

@@ -0,0 +1,7 @@
+export { default as Resizable } from './Resizable.svelte';
+export { default as ResizeGroup } from './ResizeGroup.svelte';
+export { default as ResizeItem } from './ResizeItem.svelte';
+export { default as ResizeHandler } from './ResizeHandler.svelte';
+export { meta as resizableMeta } from './meta.js';
+export { RESIZE_GROUP_KEY, } from './context.js';
+export { createResizeDrag, computeGroupResize, } from '@chenzy-design/core';