@tcn/ui 0.16.0 → 0.17.0

package/dist/utils/resize/resizable.js

@@ -0,0 +1,52 @@
+import { jsx as c } from "react/jsx-runtime";
+import o, { useRef as b, useMemo as R } from "react";
+import { clsx as g } from "clsx";
+import { useForkRef as x } from "../hooks/use_fork_ref.js";
+import { ResizableContext as u } from "./context.js";
+import { s as v } from "../../resizable.module-I6iyBAvM.js";
+function m(e) {
+  if (!o.isValidElement(e)) return !1;
+  const r = e.type;
+  return typeof r == "string" ? !0 : typeof r == "function" || typeof r == "object" ? r.displayName !== "ResizeHandle" : !1;
+}
+function C(e) {
+  return o.isValidElement(e) && !m(e);
+}
+function P({
+  children: e,
+  onWidthResize: r,
+  onWidthResizeEnd: s,
+  onHeightResize: n,
+  onHeightResizeEnd: a
+}) {
+  const l = b(null), f = o.Children.toArray(e), t = f.find(m), p = f.filter(C), i = R(
+    () => ({
+      targetRef: l,
+      onWidthResize: r,
+      onWidthResizeEnd: s,
+      onHeightResize: n,
+      onHeightResizeEnd: a
+    }),
+    [r, s, n, a]
+  ), d = x(l, t?.props.ref);
+  if (!t)
+    return /* @__PURE__ */ c(u.Provider, { value: i, children: e });
+  const y = o.cloneElement(
+    t,
+    {
+      ref: d,
+      className: g(
+        t.props.className,
+        v["resizable-target"],
+        "tcn-resizable-target"
+      )
+    },
+    t.props.children,
+    ...p
+  );
+  return /* @__PURE__ */ c(u.Provider, { value: i, children: y });
+}
+export {
+  P as Resizable
+};
+//# sourceMappingURL=resizable.js.map

package/dist/utils/resize/resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.js","sources":["../../../src/utils/resize/resizable.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useForkRef } from '../hooks/use_fork_ref.js';\nimport { ResizableContext } from './context.js';\nimport type {\n  OnWidthResize,\n  OnWidthResizeEnd,\n  OnHeightResize,\n  OnHeightResizeEnd,\n  ResizableContextValue,\n} from './types.js';\nimport styles from './resizable.module.css';\n\nexport interface ResizableProps {\n  children: React.ReactNode;\n  onWidthResize?: OnWidthResize;\n  onWidthResizeEnd?: OnWidthResizeEnd;\n  onHeightResize?: OnHeightResize;\n  onHeightResizeEnd?: OnHeightResizeEnd;\n}\n\ninterface ResizableTargetProps {\n  className?: string;\n  children?: React.ReactNode;\n  ref?: React.Ref<HTMLElement>;\n}\n\ntype ResizableTarget = React.ReactElement<ResizableTargetProps>;\n\nfunction isResizableTarget(child: React.ReactNode): child is ResizableTarget {\n  if (!React.isValidElement(child)) return false;\n  const type = child.type;\n  if (typeof type === 'string') return true;\n  if (typeof type === 'function' || typeof type === 'object') {\n    return (type as { displayName?: string }).displayName !== 'ResizeHandle';\n  }\n  return false;\n}\n\nfunction isResizeHandle(child: React.ReactNode): boolean {\n  return React.isValidElement(child) && !isResizableTarget(child);\n}\n\nexport function Resizable({\n  children,\n  onWidthResize,\n  onWidthResizeEnd,\n  onHeightResize,\n  onHeightResizeEnd,\n}: ResizableProps) {\n  const targetRef = useRef<HTMLElement | null>(null);\n\n  const childArray = React.Children.toArray(children);\n  const targetChild = childArray.find(isResizableTarget);\n  const handleChildren = childArray.filter(isResizeHandle);\n\n  const contextValue = useMemo<ResizableContextValue>(\n    () => ({\n      targetRef,\n      onWidthResize,\n      onWidthResizeEnd,\n      onHeightResize,\n      onHeightResizeEnd,\n    }),\n    [onWidthResize, onWidthResizeEnd, onHeightResize, onHeightResizeEnd]\n  );\n\n  const forkedRef = useForkRef(targetRef, targetChild?.props.ref);\n\n  if (!targetChild) {\n    return (\n      <ResizableContext.Provider value={contextValue}>\n        {children}\n      </ResizableContext.Provider>\n    );\n  }\n\n  const clonedTarget = React.cloneElement(\n    targetChild,\n    {\n      ref: forkedRef,\n      className: clsx(\n        targetChild.props.className,\n        styles['resizable-target'],\n        'tcn-resizable-target'\n      ),\n    },\n    targetChild.props.children,\n    ...handleChildren\n  );\n\n  return (\n    <ResizableContext.Provider value={contextValue}>\n      {clonedTarget}\n    </ResizableContext.Provider>\n  );\n}\n"],"names":["isResizableTarget","child","React","type","isResizeHandle","Resizable","children","onWidthResize","onWidthResizeEnd","onHeightResize","onHeightResizeEnd","targetRef","useRef","childArray","targetChild","handleChildren","contextValue","useMemo","forkedRef","useForkRef","ResizableContext","clonedTarget","clsx","styles"],"mappings":";;;;;;AA6BA,SAASA,EAAkBC,GAAkD;AAC3E,MAAI,CAACC,EAAM,eAAeD,CAAK,EAAG,QAAO;AACzC,QAAME,IAAOF,EAAM;AACnB,SAAI,OAAOE,KAAS,WAAiB,KACjC,OAAOA,KAAS,cAAc,OAAOA,KAAS,WACxCA,EAAkC,gBAAgB,iBAErD;AACT;AAEA,SAASC,EAAeH,GAAiC;AACvD,SAAOC,EAAM,eAAeD,CAAK,KAAK,CAACD,EAAkBC,CAAK;AAChE;AAEO,SAASI,EAAU;AAAA,EACxB,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAAmB;AACjB,QAAMC,IAAYC,EAA2B,IAAI,GAE3CC,IAAaX,EAAM,SAAS,QAAQI,CAAQ,GAC5CQ,IAAcD,EAAW,KAAKb,CAAiB,GAC/Ce,IAAiBF,EAAW,OAAOT,CAAc,GAEjDY,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,WAAAN;AAAA,MACA,eAAAJ;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,mBAAAC;AAAA,IAAA;AAAA,IAEF,CAACH,GAAeC,GAAkBC,GAAgBC,CAAiB;AAAA,EAAA,GAG/DQ,IAAYC,EAAWR,GAAWG,GAAa,MAAM,GAAG;AAE9D,MAAI,CAACA;AACH,6BACGM,EAAiB,UAAjB,EAA0B,OAAOJ,GAC/B,UAAAV,GACH;AAIJ,QAAMe,IAAenB,EAAM;AAAA,IACzBY;AAAA,IACA;AAAA,MACE,KAAKI;AAAA,MACL,WAAWI;AAAA,QACTR,EAAY,MAAM;AAAA,QAClBS,EAAO,kBAAkB;AAAA,QACzB;AAAA,MAAA;AAAA,IACF;AAAA,IAEFT,EAAY,MAAM;AAAA,IAClB,GAAGC;AAAA,EAAA;AAGL,2BACGK,EAAiB,UAAjB,EAA0B,OAAOJ,GAC/B,UAAAK,GACH;AAEJ;"}

package/dist/utils/resize/resize_handle.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { ResizeHandlePosition } from './types.js';
+export interface ResizeHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+    position: ResizeHandlePosition;
+}
+export declare const ResizeHandle: React.ForwardRefExoticComponent<ResizeHandleProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=resize_handle.d.ts.map

package/dist/utils/resize/resize_handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize_handle.d.ts","sourceRoot":"","sources":["../../../src/utils/resize/resize_handle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAGvD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AAED,eAAO,MAAM,YAAY,0FAqJxB,CAAC"}

package/dist/utils/resize/resize_handle.js

@@ -0,0 +1,100 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as H, useMemo as E } from "react";
+import { clsx as L } from "clsx";
+import { useResizable as $ } from "./context.js";
+import { getHandleConfig as A } from "./handle_config.js";
+import { ResizeHandleStrategy as C } from "./resize_strategy.js";
+import { detectResizeBounds as p } from "../../stacks/box/detect_resize_bounds.js";
+import '../../resize_handle.css';const F = "_resize-handle_287f4e0", M = { "resize-handle": F }, W = H(
+  function({ position: o, className: w, ...v }, f) {
+    const {
+      targetRef: D,
+      onWidthResize: m,
+      onWidthResizeEnd: S,
+      onHeightResize: u,
+      onHeightResizeEnd: R
+    } = $(), h = A(o), x = h.horizontal && h.vertical ? "corner" : h.horizontal ? "horizontal" : "vertical", a = E(() => new C(o), [o]), y = (r) => {
+      const n = D.current;
+      if (n == null) return;
+      const l = n.getBoundingClientRect();
+      a.startResize({
+        rectangle: {
+          dimensions: {
+            width: l.width,
+            height: l.height
+          },
+          position: {
+            x: r.clientX,
+            y: r.clientY
+          }
+        },
+        languageDirection: window.getComputedStyle(n).direction
+      });
+      let z = 0;
+      const g = (i) => {
+        i.stopPropagation(), i.preventDefault(), cancelAnimationFrame(z), z = requestAnimationFrame(() => {
+          const e = a.resize({ x: i.clientX, y: i.clientY });
+          let s = l.width, d = l.height;
+          if (e.horizontal) {
+            const t = p({
+              element: n,
+              axis: "width",
+              nextSize: e.horizontal.newSize
+            });
+            t.clamped ? t.clampedSize !== null && t.clampedSize !== s && (s = t.clampedSize, n.style.width = `${t.clampedSize}px`, m?.({
+              width: t.clampedSize,
+              origin: e.horizontal.origin,
+              totalDelta: e.horizontal.totalDelta,
+              currentDelta: e.horizontal.currentDelta
+            })) : (s = e.horizontal.newSize, n.style.width = `${e.horizontal.newSize}px`, m?.({
+              width: e.horizontal.newSize,
+              origin: e.horizontal.origin,
+              totalDelta: e.horizontal.totalDelta,
+              currentDelta: e.horizontal.currentDelta
+            }));
+          }
+          if (e.vertical) {
+            const t = p({
+              element: n,
+              axis: "height",
+              nextSize: e.vertical.newSize
+            });
+            t.clamped ? t.clampedSize !== null && t.clampedSize !== d && (d = t.clampedSize, n.style.height = `${t.clampedSize}px`, u?.({
+              height: t.clampedSize,
+              origin: e.vertical.origin,
+              totalDelta: e.vertical.totalDelta,
+              currentDelta: e.vertical.currentDelta
+            })) : (d = e.vertical.newSize, n.style.height = `${e.vertical.newSize}px`, u?.({
+              height: e.vertical.newSize,
+              origin: e.vertical.origin,
+              totalDelta: e.vertical.totalDelta,
+              currentDelta: e.vertical.currentDelta
+            }));
+          }
+          a.commitResize({ width: s, height: d });
+        });
+      }, c = () => {
+        cancelAnimationFrame(z), document.body.removeEventListener("mousemove", g), document.body.removeEventListener("mouseup", c), window.removeEventListener("blur", c);
+        const i = a.endResize();
+        i.horizontal && S?.(i.horizontal.width, i.horizontal.origin), i.vertical && R?.(i.vertical.height, i.vertical.origin);
+      };
+      document.body.addEventListener("mousemove", g), document.body.addEventListener("mouseup", c), window.addEventListener("blur", c), r.stopPropagation(), r.preventDefault();
+    };
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        ref: f,
+        className: L(M["resize-handle"], "tcn-resize-handle", w),
+        "data-position": o,
+        "data-axis": x,
+        onMouseDown: y,
+        ...v
+      }
+    );
+  }
+);
+W.displayName = "ResizeHandle";
+export {
+  W as ResizeHandle
+};
+//# sourceMappingURL=resize_handle.js.map

package/dist/utils/resize/resize_handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize_handle.js","sources":["../../../src/utils/resize/resize_handle.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { clsx } from 'clsx';\nimport { useResizable } from './context.js';\nimport { getHandleConfig } from './handle_config.js';\nimport { ResizeHandleStrategy } from './resize_strategy.js';\nimport { detectResizeBounds } from '../../stacks/box/detect_resize_bounds.js';\nimport type { ResizeHandlePosition } from './types.js';\nimport styles from './resize_handle.module.css';\n\nexport interface ResizeHandleProps extends React.HTMLAttributes<HTMLDivElement> {\n  position: ResizeHandlePosition;\n}\n\nexport const ResizeHandle = forwardRef<HTMLDivElement, ResizeHandleProps>(\n  function ResizeHandle({ position, className, ...rest }, ref) {\n    const {\n      targetRef,\n      onWidthResize,\n      onWidthResizeEnd,\n      onHeightResize,\n      onHeightResizeEnd,\n    } = useResizable();\n\n    const config = getHandleConfig(position);\n    const axis =\n      config.horizontal && config.vertical\n        ? 'corner'\n        : config.horizontal\n          ? 'horizontal'\n          : 'vertical';\n\n    const strategy = useMemo(() => new ResizeHandleStrategy(position), [position]);\n\n    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n      const target = targetRef.current;\n      if (target == null) return;\n\n      const rect = target.getBoundingClientRect();\n      strategy.startResize({\n        rectangle: {\n          dimensions: {\n            width: rect.width,\n            height: rect.height,\n          },\n          position: {\n            x: event.clientX,\n            y: event.clientY,\n          },\n        },\n        languageDirection: window.getComputedStyle(target).direction,\n      });\n\n      let frameId = 0;\n\n      const drag = (e: MouseEvent) => {\n        e.stopPropagation();\n        e.preventDefault();\n\n        cancelAnimationFrame(frameId);\n        frameId = requestAnimationFrame(() => {\n          const result = strategy.resize({ x: e.clientX, y: e.clientY });\n\n          let appliedWidth = rect.width;\n          let appliedHeight = rect.height;\n\n          if (result.horizontal) {\n            const bounds = detectResizeBounds({\n              element: target,\n              axis: 'width',\n              nextSize: result.horizontal.newSize,\n            });\n            if (!bounds.clamped) {\n              appliedWidth = result.horizontal.newSize;\n              target.style.width = `${result.horizontal.newSize}px`;\n              onWidthResize?.({\n                width: result.horizontal.newSize,\n                origin: result.horizontal.origin,\n                totalDelta: result.horizontal.totalDelta,\n                currentDelta: result.horizontal.currentDelta,\n              });\n            } else if (\n              bounds.clampedSize !== null &&\n              bounds.clampedSize !== appliedWidth\n            ) {\n              appliedWidth = bounds.clampedSize;\n              target.style.width = `${bounds.clampedSize}px`;\n              onWidthResize?.({\n                width: bounds.clampedSize,\n                origin: result.horizontal.origin,\n                totalDelta: result.horizontal.totalDelta,\n                currentDelta: result.horizontal.currentDelta,\n              });\n            }\n          }\n\n          if (result.vertical) {\n            const bounds = detectResizeBounds({\n              element: target,\n              axis: 'height',\n              nextSize: result.vertical.newSize,\n            });\n            if (!bounds.clamped) {\n              appliedHeight = result.vertical.newSize;\n              target.style.height = `${result.vertical.newSize}px`;\n              onHeightResize?.({\n                height: result.vertical.newSize,\n                origin: result.vertical.origin,\n                totalDelta: result.vertical.totalDelta,\n                currentDelta: result.vertical.currentDelta,\n              });\n            } else if (\n              bounds.clampedSize !== null &&\n              bounds.clampedSize !== appliedHeight\n            ) {\n              appliedHeight = bounds.clampedSize;\n              target.style.height = `${bounds.clampedSize}px`;\n              onHeightResize?.({\n                height: bounds.clampedSize,\n                origin: result.vertical.origin,\n                totalDelta: result.vertical.totalDelta,\n                currentDelta: result.vertical.currentDelta,\n              });\n            }\n          }\n\n          strategy.commitResize({ width: appliedWidth, height: appliedHeight });\n        });\n      };\n\n      const endDrag = () => {\n        cancelAnimationFrame(frameId);\n        document.body.removeEventListener('mousemove', drag);\n        document.body.removeEventListener('mouseup', endDrag);\n        window.removeEventListener('blur', endDrag);\n\n        const result = strategy.endResize();\n        if (result.horizontal) {\n          onWidthResizeEnd?.(result.horizontal.width, result.horizontal.origin);\n        }\n        if (result.vertical) {\n          onHeightResizeEnd?.(result.vertical.height, result.vertical.origin);\n        }\n      };\n\n      document.body.addEventListener('mousemove', drag);\n      document.body.addEventListener('mouseup', endDrag);\n      window.addEventListener('blur', endDrag);\n      event.stopPropagation();\n      event.preventDefault();\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles['resize-handle'], 'tcn-resize-handle', className)}\n        data-position={position}\n        data-axis={axis}\n        onMouseDown={handleMouseDown}\n        {...rest}\n      />\n    );\n  }\n);\n\nResizeHandle.displayName = 'ResizeHandle';\n"],"names":["ResizeHandle","forwardRef","position","className","rest","ref","targetRef","onWidthResize","onWidthResizeEnd","onHeightResize","onHeightResizeEnd","useResizable","config","getHandleConfig","axis","strategy","useMemo","ResizeHandleStrategy","handleMouseDown","event","target","rect","frameId","drag","e","result","appliedWidth","appliedHeight","bounds","detectResizeBounds","endDrag","jsx","clsx","styles"],"mappings":"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"}

package/dist/utils/resize/resize_strategy.d.ts

@@ -0,0 +1,47 @@
+import { ResizeHandlePosition, WidthResizeOrigin, HeightResizeOrigin } from './types.js';
+import { Dimensions, Position, Rectangle } from '../types/dimensions.js';
+export interface StartResizeParams {
+    rectangle: Rectangle;
+    languageDirection: string;
+}
+export interface AxisResizeResult {
+    newSize: number;
+    totalDelta: number;
+    currentDelta: number;
+}
+export interface HorizontalResizeResult extends AxisResizeResult {
+    origin: WidthResizeOrigin;
+}
+export interface VerticalResizeResult extends AxisResizeResult {
+    origin: HeightResizeOrigin;
+}
+export interface ResizeResult {
+    horizontal?: HorizontalResizeResult;
+    vertical?: VerticalResizeResult;
+}
+export interface EndResizeResult {
+    horizontal?: {
+        width: number;
+        origin: WidthResizeOrigin;
+    };
+    vertical?: {
+        height: number;
+        origin: HeightResizeOrigin;
+    };
+}
+/**
+ * Flow:
+ *   1. adapter calls startResize() with rect/coords from DOM
+ *   2. adapter calls resize() on each mousemove with coord
+ *   3. adapter checks bounds (DOM), applies style, then calls commitResize()
+ *   4. adapter calls endResize() on mouseup to get final state
+ */
+export declare class ResizeHandleStrategy {
+    private handlers;
+    constructor(position: ResizeHandlePosition);
+    startResize(params: StartResizeParams): void;
+    resize(position: Position): ResizeResult;
+    commitResize(dimensions: Dimensions): void;
+    endResize(): EndResizeResult;
+}
+//# sourceMappingURL=resize_strategy.d.ts.map

package/dist/utils/resize/resize_strategy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize_strategy.d.ts","sourceRoot":"","sources":["../../../src/utils/resize/resize_strategy.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE9E,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,iBAAiB,CAAA;KAAE,CAAC;IAC1D,QAAQ,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;CAC3D;AA6GD;;;;;;GAMG;AACH,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAsB;gBAE1B,QAAQ,EAAE,oBAAoB;IAW1C,WAAW,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAM5C,MAAM,CAAC,QAAQ,EAAE,QAAQ,GAAG,YAAY;IAIxC,YAAY,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI;IAM1C,SAAS,IAAI,eAAe;CAG7B"}

package/dist/utils/resize/resize_strategy.js

@@ -0,0 +1,108 @@
+import { getHandleConfig as s, resolveDirection as n, computeResizeState as o } from "./handle_config.js";
+class r {
+  constructor(i) {
+    this.axisConfig = i;
+  }
+  direction = 1;
+  startSize = 0;
+  startCoord = 0;
+  currentSize = 0;
+  get origin() {
+    return this.axisConfig.origin;
+  }
+  get size() {
+    return this.currentSize;
+  }
+  start(i, t) {
+    this.direction = n(
+      t,
+      this.axisConfig.invert,
+      this.axisConfig.disableDirection
+    ), this.startSize = this.extractSize(i.dimensions), this.startCoord = this.extractCoord(i.position), this.currentSize = this.startSize;
+  }
+  resize(i) {
+    return o(
+      this.startSize,
+      this.startCoord,
+      this.extractCoord(i),
+      this.direction,
+      this.currentSize
+    );
+  }
+  commit(i) {
+    this.currentSize = this.extractSize(i);
+  }
+}
+class a extends r {
+  extractSize(i) {
+    return i.width;
+  }
+  extractCoord(i) {
+    return i.x;
+  }
+  applyResize(i) {
+    return {
+      horizontal: {
+        ...this.resize(i),
+        origin: this.origin
+      }
+    };
+  }
+  applyEnd() {
+    return {
+      horizontal: {
+        width: this.size,
+        origin: this.origin
+      }
+    };
+  }
+}
+class h extends r {
+  extractSize(i) {
+    return i.height;
+  }
+  extractCoord(i) {
+    return i.y;
+  }
+  applyResize(i) {
+    return {
+      vertical: {
+        ...this.resize(i),
+        origin: this.origin
+      }
+    };
+  }
+  applyEnd() {
+    return {
+      vertical: {
+        height: this.size,
+        origin: this.origin
+      }
+    };
+  }
+}
+class l {
+  handlers;
+  constructor(i) {
+    const t = s(i);
+    this.handlers = [], t.horizontal && this.handlers.push(new a(t.horizontal)), t.vertical && this.handlers.push(new h(t.vertical));
+  }
+  startResize(i) {
+    for (const t of this.handlers)
+      t.start(i.rectangle, i.languageDirection);
+  }
+  resize(i) {
+    return Object.assign({}, ...this.handlers.map((t) => t.applyResize(i)));
+  }
+  commitResize(i) {
+    for (const t of this.handlers)
+      t.commit(i);
+  }
+  endResize() {
+    return Object.assign({}, ...this.handlers.map((i) => i.applyEnd()));
+  }
+}
+export {
+  l as ResizeHandleStrategy
+};
+//# sourceMappingURL=resize_strategy.js.map

package/dist/utils/resize/resize_strategy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize_strategy.js","sources":["../../../src/utils/resize/resize_strategy.ts"],"sourcesContent":["import {\n  getHandleConfig,\n  resolveDirection,\n  computeResizeState,\n} from './handle_config.js';\nimport type {\n  AxisConfig,\n  ResizeHandlePosition,\n  WidthResizeOrigin,\n  HeightResizeOrigin,\n} from './types.js';\nimport type { Dimensions, Position, Rectangle } from '../types/dimensions.js';\n\nexport interface StartResizeParams {\n  rectangle: Rectangle;\n  languageDirection: string;\n}\n\nexport interface AxisResizeResult {\n  newSize: number;\n  totalDelta: number;\n  currentDelta: number;\n}\n\nexport interface HorizontalResizeResult extends AxisResizeResult {\n  origin: WidthResizeOrigin;\n}\n\nexport interface VerticalResizeResult extends AxisResizeResult {\n  origin: HeightResizeOrigin;\n}\n\nexport interface ResizeResult {\n  horizontal?: HorizontalResizeResult;\n  vertical?: VerticalResizeResult;\n}\n\nexport interface EndResizeResult {\n  horizontal?: { width: number; origin: WidthResizeOrigin };\n  vertical?: { height: number; origin: HeightResizeOrigin };\n}\n\n/**\n * Single-axis resize handler. Pure — no DOM, no React.\n * Subclasses extract the correct axis from uniform args.\n */\nabstract class AxisResizeHandler {\n  protected direction = 1;\n  protected startSize = 0;\n  protected startCoord = 0;\n  protected currentSize = 0;\n\n  constructor(protected axisConfig: AxisConfig) {}\n\n  get origin() {\n    return this.axisConfig.origin;\n  }\n\n  get size() {\n    return this.currentSize;\n  }\n\n  protected abstract extractSize(dimensions: Dimensions): number;\n  protected abstract extractCoord(coord: Position): number;\n  abstract applyResize(coord: Position): Partial<ResizeResult>;\n  abstract applyEnd(): Partial<EndResizeResult>;\n\n  start(rect: Rectangle, languageDirection: string) {\n    this.direction = resolveDirection(\n      languageDirection,\n      this.axisConfig.invert,\n      this.axisConfig.disableDirection\n    );\n    this.startSize = this.extractSize(rect.dimensions);\n    this.startCoord = this.extractCoord(rect.position);\n    this.currentSize = this.startSize;\n  }\n\n  resize(coord: Position): AxisResizeResult {\n    return computeResizeState(\n      this.startSize,\n      this.startCoord,\n      this.extractCoord(coord),\n      this.direction,\n      this.currentSize\n    );\n  }\n\n  commit(dimensions: Dimensions) {\n    this.currentSize = this.extractSize(dimensions);\n  }\n}\n\nclass HorizontalAxisResizeHandler extends AxisResizeHandler {\n  protected extractSize(dimensions: Dimensions) {\n    return dimensions.width;\n  }\n\n  protected extractCoord(coord: Position) {\n    return coord.x;\n  }\n\n  applyResize(coord: Position): Partial<ResizeResult> {\n    return {\n      horizontal: {\n        ...this.resize(coord),\n        origin: this.origin as WidthResizeOrigin,\n      },\n    };\n  }\n\n  applyEnd(): Partial<EndResizeResult> {\n    return {\n      horizontal: {\n        width: this.size,\n        origin: this.origin as WidthResizeOrigin,\n      },\n    };\n  }\n}\n\nclass VerticalAxisResizeHandler extends AxisResizeHandler {\n  protected extractSize(dimensions: Dimensions) {\n    return dimensions.height;\n  }\n\n  protected extractCoord(coord: Position) {\n    return coord.y;\n  }\n\n  applyResize(coord: Position): Partial<ResizeResult> {\n    return {\n      vertical: {\n        ...this.resize(coord),\n        origin: this.origin as HeightResizeOrigin,\n      },\n    };\n  }\n\n  applyEnd(): Partial<EndResizeResult> {\n    return {\n      vertical: {\n        height: this.size,\n        origin: this.origin as HeightResizeOrigin,\n      },\n    };\n  }\n}\n\n/**\n * Flow:\n *   1. adapter calls startResize() with rect/coords from DOM\n *   2. adapter calls resize() on each mousemove with coord\n *   3. adapter checks bounds (DOM), applies style, then calls commitResize()\n *   4. adapter calls endResize() on mouseup to get final state\n */\nexport class ResizeHandleStrategy {\n  private handlers: AxisResizeHandler[];\n\n  constructor(position: ResizeHandlePosition) {\n    const config = getHandleConfig(position);\n    this.handlers = [];\n    if (config.horizontal) {\n      this.handlers.push(new HorizontalAxisResizeHandler(config.horizontal));\n    }\n    if (config.vertical) {\n      this.handlers.push(new VerticalAxisResizeHandler(config.vertical));\n    }\n  }\n\n  startResize(params: StartResizeParams): void {\n    for (const handler of this.handlers) {\n      handler.start(params.rectangle, params.languageDirection);\n    }\n  }\n\n  resize(position: Position): ResizeResult {\n    return Object.assign({}, ...this.handlers.map(h => h.applyResize(position)));\n  }\n\n  commitResize(dimensions: Dimensions): void {\n    for (const handler of this.handlers) {\n      handler.commit(dimensions);\n    }\n  }\n\n  endResize(): EndResizeResult {\n    return Object.assign({}, ...this.handlers.map(h => h.applyEnd()));\n  }\n}\n"],"names":["AxisResizeHandler","axisConfig","rect","languageDirection","resolveDirection","coord","computeResizeState","dimensions","HorizontalAxisResizeHandler","VerticalAxisResizeHandler","ResizeHandleStrategy","position","config","getHandleConfig","params","handler","h"],"mappings":"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"}

package/dist/utils/resize/types.d.ts

@@ -0,0 +1,28 @@
+import { OnWidthResize, OnWidthResizeEnd, OnHeightResize, OnHeightResizeEnd, WidthResizeOrigin, HeightResizeOrigin } from '../../stacks/box/types.js';
+export type { OnWidthResize, OnWidthResizeEnd, OnHeightResize, OnHeightResizeEnd, WidthResizeOrigin, HeightResizeOrigin, };
+export type ResizeHandlePosition = 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+export interface AxisConfig {
+    origin: WidthResizeOrigin | HeightResizeOrigin;
+    invert: boolean;
+    disableDirection: boolean;
+}
+export interface HandleConfig {
+    horizontal?: AxisConfig;
+    vertical?: AxisConfig;
+}
+export interface ResolvedAxisConfig {
+    origin: WidthResizeOrigin | HeightResizeOrigin;
+    direction: number;
+}
+export interface ResolvedHandleConfig {
+    horizontal?: ResolvedAxisConfig;
+    vertical?: ResolvedAxisConfig;
+}
+export interface ResizableContextValue {
+    targetRef: React.RefObject<HTMLElement | null>;
+    onWidthResize?: OnWidthResize;
+    onWidthResizeEnd?: OnWidthResizeEnd;
+    onHeightResize?: OnHeightResize;
+    onHeightResizeEnd?: OnHeightResizeEnd;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/utils/resize/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/resize/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AAEnC,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACnB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAE5B,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,GACP,KAAK,GAEL,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,WAAW,GACX,SAAS,GACT,cAAc,GACd,YAAY,CAAC;AAEjB,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;IAC/C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC"}

package/dist/utils/resize/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/utils/resize/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -143,8 +143,8 @@
     "libphonenumber-js": "^1.12.38",
     "react-color": "^2.19.3",
     "react-phone-number-input": "^3.4.16",
-    "@tcn/state": "1.3.3",
-    "@tcn/icons": "2.3.0"
+    "@tcn/icons": "2.3.0",
+    "@tcn/state": "1.3.3"
   },
   "scripts": {
     "build": "vite build",

package/src/layouts/__stories__/columns.stories.tsx

@@ -23,6 +23,37 @@ export default meta;
 
 type Story = StoryObj;
 
+/**
+ * Simple example of two columns side by side.
+ */
+/**
+ * columnsMinWidth sets a default minWidth on all child Columns.
+ * An explicit minWidth prop on a Column overrides it.
+ */
+export const ColumnsMinWidth: Story = {
+  render: () => (
+    <LayoutStoryDecorator>
+      <Columns columnsMinWidth="200px">
+        <Column>
+          <Section>
+            <Detail>default (200px)</Detail>
+          </Section>
+        </Column>
+        <Column>
+          <Section>
+            <Detail>default (200px)</Detail>
+          </Section>
+        </Column>
+        <Column minWidth="400px">
+          <Section>
+            <Detail>override (400px)</Detail>
+          </Section>
+        </Column>
+      </Columns>
+    </LayoutStoryDecorator>
+  ),
+};
+
 /**
  * Simple example of two columns side by side.
  */

package/src/layouts/__stories__/composed.stories.tsx

@@ -1,8 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import clsx from 'clsx';
 import { VStack } from '../../stacks/v_stack.js';
 import { SBNestedScaffold, SBContent, SBNestedRail } from './utils.js';
+import { Header } from '../header/header.js';
+import { Footer } from '../footer/footer.js';
+import { Column } from '../containers/columns/column.js';
 
 import styles from './composed_stories.module.css';
+import { Scaffold } from '../containers/scaffold.js';
 import { Rail } from '../containers/rail.js';
 
 const meta: Meta = {
@@ -30,33 +35,97 @@ const SBContainer = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export const Baseline: Story = {
+export const RailInRail: Story = {
   render: () => (
     <SBContainer>
-      <SBNestedScaffold depth={1}>
-        <SBNestedRail depth={2} minWidth="100px">
+      <SBNestedRail depth={1}>
+        <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+          Column (Start)
+        </Column>
+        <SBNestedRail depth={2}>
+          <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+            Column (Start)
+          </Column>
+          {/* Inner Body */}
           <Rail>
             <SBContent />
             <SBContent />
-            <SBContent />
           </Rail>
+          <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+            Column (End)
+          </Column>
         </SBNestedRail>
+        <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+          Column (End)
+        </Column>
+      </SBNestedRail>
+    </SBContainer>
+  ),
+};
+
+export const ScaffoldInRail: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedRail depth={1}>
+        <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+          Column (Start)
+        </Column>
+        <SBNestedScaffold depth={2}>
+          <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+          {/* Inner Body */}
+          <Scaffold>
+            <SBContent />
+            <SBContent />
+          </Scaffold>
+          <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
+        </SBNestedScaffold>
+        <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+          Column (End)
+        </Column>
+      </SBNestedRail>
+    </SBContainer>
+  ),
+};
+
+export const ScaffoldInScaffold: Story = {
+  render: () => (
+    <SBContainer>
+      <SBNestedScaffold depth={1}>
+        <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+        <SBNestedScaffold depth={2}>
+          <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+          {/* Inner Body */}
+          <Scaffold>
+            <SBContent />
+            <SBContent />
+          </Scaffold>
+          <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
+        </SBNestedScaffold>
+        <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
       </SBNestedScaffold>
     </SBContainer>
   ),
 };
 
-export const WithColumns: Story = {
+export const RailInScaffold: Story = {
   render: () => (
     <SBContainer>
-      <SBNestedScaffold depth={1} utilityBar={false} footer={false}>
-        <SBNestedRail depth={2} scaffold={false}>
+      <SBNestedScaffold depth={1}>
+        <Header className={clsx(styles.header, styles.secondary)}>Header</Header>
+        <SBNestedRail depth={2}>
+          <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+            Column (Start)
+          </Column>
+          {/* Inner Body */}
           <Rail>
             <SBContent />
             <SBContent />
-            <SBContent />
           </Rail>
+          <Column className={clsx(styles.side, styles.secondary)} minWidth="100px">
+            Column (End)
+          </Column>
         </SBNestedRail>
+        <Footer className={clsx(styles.footer, styles.secondary)}>Footer</Footer>
       </SBNestedScaffold>
     </SBContainer>
   ),