@activecollab/components 2.0.372 → 2.0.373

package/dist/index.js

@@ -26955,6 +26955,233 @@
     }));
   };
 
+  /**
+   * StackedCard resize policy — pure math.
+   *
+   * The card reports intent; the HOST applies a resize policy (spec §7). This
+   * module is that policy, packaged as pure functions so the SAME code path
+   * serves the pointer drag and the keyboard resize. Nothing here touches the
+   * DOM, React or the card's content: it takes a start size, a delta and a
+   * policy, and returns a clamped size. `useStackedCardResize` wires events to
+   * it; the card's intrinsic content minimum is measured by the host and passed
+   * in as `contentMin`, so this module knows nothing about heroes or footers.
+   *
+   * The policy has four parts:
+   *  - bounds        — optional min/max per axis; unset means unbounded.
+   *  - proportional  — lock the aspect ratio captured at the start of the gesture;
+   *                    the scale is clamped by the BINDING axis so the ratio never
+   *                    distorts at a bound.
+   *  - step          — optional grid snap; proportion wins over the grid.
+   *  - content min   — the effective min is max(policyMin, contentMin) per axis,
+   *                    so a card can never be crushed below what its content needs.
+   */
+
+  /** The card's intrinsic minimum, measured from its real content. */
+
+  /** The size captured at the start of a gesture (pointer down or a key press). */
+
+  /**
+   * `width` locks the vertical axis: an auto-height card takes a width and lets
+   * its rows set the height, so the gesture's vertical component is ignored.
+   */
+
+  /** Which input drove a resize event. Hosts log undo entries per source. */
+
+  /** Keyboard resize nudges by the policy step, or this when no step is set. */
+  var DEFAULT_KEYBOARD_STEP = 8;
+
+  /** Shift + arrow resizes by a larger increment (the familiar coarse nudge). */
+  var SHIFT_STEP_MULTIPLIER = 4;
+
+  /** Keys the separator handles; everything else falls through to the browser. */
+  var RESIZE_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+  var isResizeKey = function isResizeKey(key) {
+    return RESIZE_KEYS.includes(key);
+  };
+  var clamp = function clamp(v, lo, hi) {
+    return Math.min(hi !== null && hi !== void 0 ? hi : Number.POSITIVE_INFINITY, Math.max(lo, v));
+  };
+  var snap = function snap(v, step) {
+    return step && step > 0 ? Math.round(v / step) * step : v;
+  };
+  var makeStart = function makeStart(size, contentMin) {
+    return {
+      w: size.w,
+      h: size.h,
+      contentMin
+    };
+  };
+
+  /**
+   * The effective bounds a size is clamped to: the policy min floored by the
+   * content min, and the policy max (unbounded when unset). Independent of any
+   * live gesture, so a host can also use it for the aria value and Home/End.
+   */
+  var effectiveBounds = function effectiveBounds(policy, contentMin) {
+    var _policy$minW, _policy$minH, _policy$maxW, _policy$maxH;
+    return {
+      wMin: Math.max((_policy$minW = policy.minW) !== null && _policy$minW !== void 0 ? _policy$minW : 0, contentMin.w),
+      hMin: Math.max((_policy$minH = policy.minH) !== null && _policy$minH !== void 0 ? _policy$minH : 0, contentMin.h),
+      wMax: (_policy$maxW = policy.maxW) !== null && _policy$maxW !== void 0 ? _policy$maxW : Number.POSITIVE_INFINITY,
+      hMax: (_policy$maxH = policy.maxH) !== null && _policy$maxH !== void 0 ? _policy$maxH : Number.POSITIVE_INFINITY
+    };
+  };
+
+  /**
+   * Whether an axis has a floor anyone asked for. `effectiveBounds` reports 0 for
+   * an unset minimum — correct as a clamp, but not something Home should jump to:
+   * an axis nobody gave a minimum must not collapse to nothing.
+   */
+  var hasFloor = function hasFloor(policyMin, contentMin) {
+    return policyMin !== undefined || contentMin > 0;
+  };
+
+  /**
+   * Apply a delta to the start size under the policy — the single path for both
+   * inputs.
+   *
+   * `constrain` is the transient Shift-to-constrain lock: a free-form policy
+   * behaves proportionally for that one gesture; a proportional policy is already
+   * locked and ignores it. `axis: "width"` drops the gesture's vertical component;
+   * the height then holds still in free-form mode, and still follows the ratio in
+   * proportional mode (that is what proportional means).
+   */
+  var applyResize = function applyResize(start, delta, policy) {
+    var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    var _effectiveBounds = effectiveBounds(policy, start.contentMin),
+      wMin = _effectiveBounds.wMin,
+      hMin = _effectiveBounds.hMin,
+      wMax = _effectiveBounds.wMax,
+      hMax = _effectiveBounds.hMax;
+    var widthOnly = opts.axis === "width";
+    var dx = delta.dx;
+    var dy = widthOnly ? 0 : delta.dy;
+
+    // A ratio needs two non-zero sides to be a ratio at all; a width-only card
+    // parks a placeholder height, so fall back to free-form rather than dividing
+    // by zero.
+    var proportional = (policy.proportional || opts.constrain === true) && start.w > 0 && start.h > 0;
+    var w;
+    var h;
+    if (proportional) {
+      // one scale drives both axes; the corner's dominant direction wins, so a
+      // vertical drag is as effective as a horizontal one
+      var sW = (start.w + dx) / start.w;
+      var sH = (start.h + dy) / start.h;
+      var scale = Math.abs(sW - 1) >= Math.abs(sH - 1) ? sW : sH;
+
+      // step: proportion wins over the grid. Snap through the SCALE (driven off
+      // the width edge) so both axes move together and the ratio survives; the
+      // grid yields whenever honouring it would cost the ratio.
+      if (policy.step) {
+        scale = snap(start.w * scale, policy.step) / start.w;
+      }
+
+      // Then clamp the scale so both axes stay in bounds (the binding constraint):
+      // the ratio can never break at a bound — whichever edge is limiting stops
+      // both. The clamp comes last on purpose: a bound is a hard stop, so the card
+      // sits exactly on it rather than at the nearest grid line inside it.
+      var scaleMin = Math.max(wMin / start.w, hMin / start.h);
+      var scaleMax = Math.min(wMax / start.w, hMax / start.h);
+      scale = clamp(scale, scaleMin, Math.max(scaleMin, scaleMax));
+      w = start.w * scale;
+      h = start.h * scale;
+    } else {
+      w = clamp(snap(start.w + dx, policy.step), wMin, wMax);
+      h = widthOnly ? start.h : clamp(snap(start.h + dy, policy.step), hMin, hMax);
+    }
+    return {
+      w: Math.round(w),
+      h: Math.round(h)
+    };
+  };
+
+  /**
+   * Translate a resize key into the next size, reusing `applyResize` so the
+   * keyboard clamps exactly like the pointer. Arrows nudge by the step (Shift ×4);
+   * Home/End jump to the min/max of the allowed range, leaving any axis without
+   * that bound where it is. Returns null for a key the handle does not own, and
+   * for a vertical key on a width-only card.
+   */
+  var keyboardResize = function keyboardResize(key, size, policy, contentMin) {
+    var opts = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    var widthOnly = opts.axis === "width";
+    if (widthOnly && (key === "ArrowUp" || key === "ArrowDown")) return null;
+    var base = policy.step && policy.step > 0 ? policy.step : DEFAULT_KEYBOARD_STEP;
+    var step = base * (opts.shiftKey ? SHIFT_STEP_MULTIPLIER : 1);
+    var start = makeStart(size, contentMin);
+    var b = effectiveBounds(policy, contentMin);
+    var apply = function apply(delta) {
+      return applyResize(start, delta, policy, {
+        axis: opts.axis
+      });
+    };
+
+    /**
+     * Home and End are absolute jumps to a bound, not nudges, so they ignore the
+     * grid: landing 4px off the minimum because that is where the nearest grid
+     * line fell would mean the keyboard could never reach the bound the pointer
+     * stops at.
+     */
+    var jump = function jump(delta) {
+      return applyResize(start, delta, _objectSpread2(_objectSpread2({}, policy), {}, {
+        step: 0
+      }), {
+        axis: opts.axis
+      });
+    };
+    switch (key) {
+      case "ArrowRight":
+        return apply({
+          dx: step,
+          dy: 0
+        });
+      case "ArrowLeft":
+        return apply({
+          dx: -step,
+          dy: 0
+        });
+      case "ArrowDown":
+        return apply({
+          dx: 0,
+          dy: step
+        });
+      case "ArrowUp":
+        return apply({
+          dx: 0,
+          dy: -step
+        });
+      case "Home":
+        // jump to the min corner; an axis with no floor of its own stays put
+        return jump({
+          dx: hasFloor(policy.minW, contentMin.w) ? b.wMin - size.w : 0,
+          dy: !widthOnly && hasFloor(policy.minH, contentMin.h) ? b.hMin - size.h : 0
+        });
+      case "End":
+        // jump to the max corner; an unbounded axis simply doesn't move
+        return jump({
+          dx: Number.isFinite(b.wMax) ? b.wMax - size.w : 0,
+          dy: !widthOnly && Number.isFinite(b.hMax) ? b.hMax - size.h : 0
+        });
+      default:
+        return null;
+    }
+  };
+
+  /**
+   * The handle's `aria-valuenow`: the current size as a percent (0–100) of its
+   * allowed range. The corner resizes both axes, but the value must be a single
+   * number, so it reports the WIDTH axis — the one axis the fixed-box and the
+   * width-only cards share. Returns 0 when the range isn't finite (no max bound).
+   */
+  var measurePercent = function measurePercent(size, policy, contentMin) {
+    var _effectiveBounds2 = effectiveBounds(policy, contentMin),
+      wMin = _effectiveBounds2.wMin,
+      wMax = _effectiveBounds2.wMax;
+    if (!Number.isFinite(wMax) || wMax <= wMin) return 0;
+    return Math.round(clamp((size.w - wMin) / (wMax - wMin) * 100, 0, 100));
+  };
+
   /**
    * Theming hooks.
    *
@@ -27096,10 +27323,15 @@
   /* Resize (opt-in): handle on hover, the card only reports deltas      */
   /* ------------------------------------------------------------------ */
 
+  /* The grip is a focusable separator, so it needs a focus ring of its own — a
+     keyboard user has no pointer to tell them where they are. */
   var StyledStackedCardResizeHandle = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledStackedCardResizeHandle",
     componentId: "sc-vnqm9x-10"
-  })(["position:absolute;right:2px;bottom:2px;width:14px;height:14px;cursor:nwse-resize;color:var(--color-theme-600);z-index:2;svg{display:block;}"]);
+  })(["position:absolute;right:2px;bottom:2px;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:4px;cursor:", ";color:var(--color-theme-600);z-index:2;&:hover{color:var(--color-theme-900);}&:focus-visible{outline:2px solid ", ";outline-offset:1px;color:var(--color-theme-900);}svg{display:block;}"], function (_ref8) {
+    var $axis = _ref8.$axis;
+    return $axis === "width" ? "ew-resize" : "nwse-resize";
+  }, SELECTION_RING);
   StyledStackedCardResizeHandle.displayName = "StyledStackedCardResizeHandle";
 
   /* ------------------------------------------------------------------ */
@@ -27110,34 +27342,34 @@
   var StyledStackedCard = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledStackedCard",
     componentId: "sc-vnqm9x-11"
-  })(["", " position:relative;display:flex;flex-direction:column;width:", "px;border-radius:", "px;background-color:var(--page-paper-main);border:1px solid var(--border-primary);box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;transition:box-shadow 150ms ease,border-color 150ms ease;", " &:hover{", "}&:focus-visible{outline:none;", " box-shadow:0 0 0 2px ", ";}", " ", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, STACKED_CARD_WIDTH, STACKED_CARD_RADIUS, revealControls, hoverStyle, hoverStyle, SELECTION_RING, function (_ref8) {
-    var $forceHover = _ref8.$forceHover;
+  })(["", " position:relative;display:flex;flex-direction:column;width:", "px;border-radius:", "px;background-color:var(--page-paper-main);border:1px solid var(--border-primary);box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;transition:box-shadow 150ms ease,border-color 150ms ease;", " &:hover{", "}&:focus-visible{outline:none;", " box-shadow:0 0 0 2px ", ";}", " ", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, STACKED_CARD_WIDTH, STACKED_CARD_RADIUS, revealControls, hoverStyle, hoverStyle, SELECTION_RING, function (_ref9) {
+    var $forceHover = _ref9.$forceHover;
     return $forceHover && styled.css(["", " && ", "{opacity:1;}"], hoverStyle, CONTROL);
-  }, function (_ref9) {
-    var $priorityColor = _ref9.$priorityColor;
-    return $priorityColor && styled.css(["&::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:4px;background:", ";z-index:2;}"], $priorityColor);
   }, function (_ref0) {
-    var $selected = _ref0.$selected;
-    return $selected && styled.css(["&&{border-color:", ";box-shadow:0 0 0 2px ", ";}"], SELECTION_RING, SELECTION_RING);
+    var $priorityColor = _ref0.$priorityColor;
+    return $priorityColor && styled.css(["&::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:4px;background:", ";z-index:2;}"], $priorityColor);
   }, function (_ref1) {
-    var $disabled = _ref1.$disabled;
-    return $disabled && styled.css(["opacity:0.5;pointer-events:none;"]);
+    var $selected = _ref1.$selected;
+    return $selected && styled.css(["&&{border-color:", ";box-shadow:0 0 0 2px ", ";}"], SELECTION_RING, SELECTION_RING);
   }, function (_ref10) {
-    var $pending = _ref10.$pending;
-    return $pending && styled.css(["opacity:0.6;pointer-events:none;cursor:progress;"]);
+    var $disabled = _ref10.$disabled;
+    return $disabled && styled.css(["opacity:0.5;pointer-events:none;"]);
   }, function (_ref11) {
-    var $isDragSource = _ref11.$isDragSource;
-    return $isDragSource && styled.css(["background:transparent;border:1px dashed var(--color-theme-500);box-shadow:none;&:hover{box-shadow:none;border-color:var(--color-theme-500);}> *{visibility:hidden;}"]);
+    var $pending = _ref11.$pending;
+    return $pending && styled.css(["opacity:0.6;pointer-events:none;cursor:progress;"]);
   }, function (_ref12) {
-    var $isDragPreview = _ref12.$isDragPreview;
-    return $isDragPreview && styled.css(["box-shadow:0 12px 28px rgba(0,0,0,0.24);cursor:grabbing;"]);
+    var $isDragSource = _ref12.$isDragSource;
+    return $isDragSource && styled.css(["background:transparent;border:1px dashed var(--color-theme-500);box-shadow:none;&:hover{box-shadow:none;border-color:var(--color-theme-500);}> *{visibility:hidden;}"]);
   }, function (_ref13) {
-    var $entered = _ref13.$entered;
+    var $isDragPreview = _ref13.$isDragPreview;
+    return $isDragPreview && styled.css(["box-shadow:0 12px 28px rgba(0,0,0,0.24);cursor:grabbing;"]);
+  }, function (_ref14) {
+    var $entered = _ref14.$entered;
     return $entered && styled.css(["&&{border-color:", ";box-shadow:inset 0 0 0 2px ", ",0 0 0 2px ", ";}"], SELECTION_RING, SELECTION_RING, SELECTION_RING);
   });
   StyledStackedCard.displayName = "StyledStackedCard";
 
-  var _excluded$1 = ["selected", "disabled", "pending", "isDragSource", "isDragPreview", "entered", "forceHover", "resizable", "priorityColor", "onResizeDelta", "className", "children"];
+  var _excluded$1 = ["selected", "disabled", "pending", "isDragSource", "isDragPreview", "entered", "forceHover", "resizable", "resizeAxis", "resizeLabel", "priorityColor", "onResizeStart", "onResizeDelta", "onResizeCommit", "resizeHandleProps", "className", "children"];
 
   /**
    * StackedCard — the hollow shell for cards on drag-and-drop surfaces.
@@ -27164,6 +27396,24 @@
    * `isDragPreview`. The shell forwards its ref and spreads DOM props, so a host
    * can attach `tabIndex`, ARIA, pointer and keyboard handlers to it.
    *
+   * ── Resize ────────────────────────────────────────────────────────────────
+   * The grip is opt-in (`resizable`) and reports intent as a gesture: one
+   * `onResizeStart`, a stream of `onResizeDelta` previews measured FROM THE
+   * GESTURE START, and one `onResizeCommit` at the end — and only if the gesture
+   * moved anything. A host applies previews for live feedback and records an undo
+   * entry on the commit alone (spec §7e).
+   *
+   * Because the deltas are gesture-relative rather than incremental, a host can
+   * resolve every event against the size it snapshotted on start, and never has
+   * to keep a running accumulator. That is what makes a slow, few-pixels-at-a-time
+   * drag keep growing instead of stalling under a snap step.
+   *
+   * The grip itself is a focusable `role="separator"` and handles arrow keys
+   * (Shift for a coarse nudge). For the full policy — bounds, proportional mode,
+   * step snapping, content minimums, Home/End and the live `aria-valuenow` — use
+   * `useStackedCardResize` and spread its result through `resizeHandleProps`;
+   * those handlers then own the grip and the three callbacks above stay quiet.
+   *
    * ── Theming ───────────────────────────────────────────────────────────────
    * Colours resolve through `--sc-*` custom properties with built-in fallbacks:
    * `--sc-selection-ring` (selection / focus / entered) and the cover scrim
@@ -27180,31 +27430,89 @@
       entered = _ref.entered,
       forceHover = _ref.forceHover,
       resizable = _ref.resizable,
+      _ref$resizeAxis = _ref.resizeAxis,
+      resizeAxis = _ref$resizeAxis === void 0 ? "both" : _ref$resizeAxis,
+      _ref$resizeLabel = _ref.resizeLabel,
+      resizeLabel = _ref$resizeLabel === void 0 ? "Resize card" : _ref$resizeLabel,
       priorityColor = _ref.priorityColor,
+      onResizeStart = _ref.onResizeStart,
       onResizeDelta = _ref.onResizeDelta,
+      onResizeCommit = _ref.onResizeCommit,
+      resizeHandleProps = _ref.resizeHandleProps,
       className = _ref.className,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$1);
-    var dragOrigin = React.useRef(null);
+    /**
+     * One live gesture. `x`/`y` anchor a pointer drag; `dx`/`dy` carry the
+     * running total a keyboard gesture has nudged. `moved` gates the commit, so
+     * a click that never travelled is not a change.
+     */
+    var gesture = React.useRef(null);
+    var emitDelta = React.useCallback(function (dx, dy) {
+      var g = gesture.current;
+      if (!g) return;
+      if (dx !== 0 || dy !== 0) g.moved = true;
+      onResizeDelta === null || onResizeDelta === void 0 || onResizeDelta(dx, dy, g.source);
+    }, [onResizeDelta]);
+    var endGesture = React.useCallback(function () {
+      var g = gesture.current;
+      if (!g) return;
+      gesture.current = null;
+      if (g.moved) onResizeCommit === null || onResizeCommit === void 0 || onResizeCommit(g.source);
+    }, [onResizeCommit]);
     var handlePointerDown = React.useCallback(function (e) {
-      dragOrigin.current = {
+      var _setPointerCapture, _ref2;
+      gesture.current = {
+        source: "pointer",
         x: e.clientX,
-        y: e.clientY
+        y: e.clientY,
+        dx: 0,
+        dy: 0,
+        moved: false
       };
-      e.target.setPointerCapture(e.pointerId);
+      (_setPointerCapture = (_ref2 = e.target).setPointerCapture) === null || _setPointerCapture === void 0 || _setPointerCapture.call(_ref2, e.pointerId);
       e.preventDefault();
-    }, []);
+      onResizeStart === null || onResizeStart === void 0 || onResizeStart("pointer");
+    }, [onResizeStart]);
     var handlePointerMove = React.useCallback(function (e) {
-      if (!dragOrigin.current || !onResizeDelta) return;
-      onResizeDelta(e.clientX - dragOrigin.current.x, e.clientY - dragOrigin.current.y);
-      dragOrigin.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-    }, [onResizeDelta]);
-    var handlePointerUp = React.useCallback(function () {
-      dragOrigin.current = null;
-    }, []);
+      var g = gesture.current;
+      if (!g || g.source !== "pointer") return;
+      // Measured from the gesture start, so the host resolves every event
+      // against one snapshot instead of accumulating.
+      emitDelta(e.clientX - g.x, e.clientY - g.y);
+    }, [emitDelta]);
+
+    /**
+     * Arrows nudge the running total; Shift makes it coarse. Home and End need
+     * bounds to resolve, which the bare shell does not have — they fall through
+     * to `useStackedCardResize`, or to the browser.
+     */
+    var handleKeyDown = React.useCallback(function (e) {
+      var step = DEFAULT_KEYBOARD_STEP * (e.shiftKey ? SHIFT_STEP_MULTIPLIER : 1);
+      var dx = 0;
+      var dy = 0;
+      if (e.key === "ArrowRight") dx = step;else if (e.key === "ArrowLeft") dx = -step;else if (e.key === "ArrowDown") dy = step;else if (e.key === "ArrowUp") dy = -step;else return;
+      e.preventDefault();
+      if (!gesture.current || gesture.current.source !== "keyboard") {
+        gesture.current = {
+          source: "keyboard",
+          x: 0,
+          y: 0,
+          dx: 0,
+          dy: 0,
+          moved: false
+        };
+        onResizeStart === null || onResizeStart === void 0 || onResizeStart("keyboard");
+      }
+      var g = gesture.current;
+      g.dx += dx;
+      g.dy += dy;
+      emitDelta(g.dx, g.dy);
+    }, [emitDelta, onResizeStart]);
+    var handleKeyUp = React.useCallback(function (e) {
+      // One commit per hold, mirroring pointer-up after a stream of moves.
+      if (isResizeKey(e.key)) endGesture();
+    }, [endGesture]);
     return /*#__PURE__*/React__default["default"].createElement(StyledStackedCard, _extends({
       ref: ref,
       $selected: selected,
@@ -27216,12 +27524,19 @@
       $forceHover: forceHover,
       $priorityColor: priorityColor,
       className: classNames__default["default"]("c-stacked-card", className)
-    }, rest), children, resizable ? /*#__PURE__*/React__default["default"].createElement(StyledStackedCardResizeHandle, {
+    }, rest), children, resizable ? /*#__PURE__*/React__default["default"].createElement(StyledStackedCardResizeHandle, _extends({
+      $axis: resizeAxis,
       className: classNames__default["default"]("c-stacked-card__resize-handle", STACKED_CARD_CONTROL_CLASS),
+      role: "separator",
+      tabIndex: 0,
+      "aria-label": resizeLabel,
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp
-    }, /*#__PURE__*/React__default["default"].createElement(StackedCardResizeHandleGlyph, null)) : null);
+      onPointerUp: endGesture,
+      onLostPointerCapture: endGesture,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    }, resizeHandleProps), /*#__PURE__*/React__default["default"].createElement(StackedCardResizeHandleGlyph, null)) : null);
   });
   StackedCard.displayName = "StackedCard";
 
@@ -27340,6 +27655,143 @@
   /** Top-right cover-management button (collapse, remove …). */
   var StackedCardCoverButton = StyledStackedCardCoverButton;
 
+  /**
+   * The one place pointer and keyboard input meet the resize policy.
+   *
+   * `StackedCard`'s built-in grip reports raw deltas and knows no policy — enough
+   * for a host that just tracks a width. This hook is the full contract: it
+   * captures the gesture start, funnels both inputs through the pure policy in
+   * `resizePolicy.ts`, streams preview events and fires exactly ONE commit per
+   * gesture. It returns the props to spread on the grip, including the live
+   * separator ARIA.
+   *
+   * Preview versus commit (spec §7e): the continuous stream is live feedback
+   * only. A host creates an undo entry on the COMMIT, never on a preview — and a
+   * gesture that never changed the size commits nothing at all, so a bare click
+   * on the grip is not a change.
+   *
+   * The hook never touches the card's content: the intrinsic minimum is read
+   * through `contentMin`, which may be a getter so a card that measures its own
+   * footer can answer at the moment it is asked.
+   */
+
+  /** The props to spread on the grip — `StackedCard`'s `resizeHandleProps`. */
+
+  var sameSize = function sameSize(a, b) {
+    return a.w === b.w && a.h === b.h;
+  };
+  var useStackedCardResize = function useStackedCardResize(_ref) {
+    var size = _ref.size,
+      policy = _ref.policy,
+      cardId = _ref.cardId,
+      contentMin = _ref.contentMin,
+      _ref$axis = _ref.axis,
+      axis = _ref$axis === void 0 ? "both" : _ref$axis,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? 1 : _ref$scale,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? "Resize card" : _ref$label,
+      onResize = _ref.onResize,
+      onResizeCommit = _ref.onResizeCommit;
+    // The pointer gesture's anchor: the size + content-min captured on pointer
+    // down, plus the pointer origin the delta is measured from.
+    var pointerStart = React.useRef(null);
+    // Mirrors the latest emitted size so pointer-up / key-up can commit exactly
+    // what preview last showed, without a stale closure.
+    var latest = React.useRef(size);
+    latest.current = size;
+    // Whether this gesture actually moved the card. A bare click, or a Home on an
+    // axis with no floor, leaves it false and commits nothing.
+    var dirty = React.useRef(false);
+
+    // Read through refs so the handlers below can stay stable across renders
+    // while still seeing the current policy, axis and zoom.
+    var policyRef = React.useRef(policy);
+    policyRef.current = policy;
+    var axisRef = React.useRef(axis);
+    axisRef.current = axis;
+    var scaleRef = React.useRef(scale);
+    scaleRef.current = scale;
+    var contentMinRef = React.useRef(contentMin);
+    contentMinRef.current = contentMin;
+    var readContentMin = React.useCallback(function () {
+      var source = contentMinRef.current;
+      return typeof source === "function" ? source() : source;
+    }, []);
+    var emitPreview = React.useCallback(function (next, source) {
+      // Nothing changed — not a preview, and not something to commit later.
+      if (sameSize(next, latest.current)) return;
+      latest.current = next;
+      dirty.current = true;
+      onResize(next, source);
+    }, [onResize]);
+    var handlePointerDown = React.useCallback(function (e) {
+      var _setPointerCapture, _ref2;
+      pointerStart.current = {
+        start: makeStart(latest.current, readContentMin()),
+        x: e.clientX,
+        y: e.clientY
+      };
+      dirty.current = false;
+      (_setPointerCapture = (_ref2 = e.target).setPointerCapture) === null || _setPointerCapture === void 0 || _setPointerCapture.call(_ref2, e.pointerId);
+      e.preventDefault();
+    }, [readContentMin]);
+    var handlePointerMove = React.useCallback(function (e) {
+      var ps = pointerStart.current;
+      if (!ps) return;
+      var z = scaleRef.current || 1;
+      var next = applyResize(ps.start, {
+        dx: (e.clientX - ps.x) / z,
+        dy: (e.clientY - ps.y) / z
+      }, policyRef.current,
+      // Shift held during a free-form drag = temporary proportional lock.
+      {
+        constrain: e.shiftKey,
+        axis: axisRef.current
+      });
+      emitPreview(next, "pointer");
+    }, [emitPreview]);
+    var endPointer = React.useCallback(function () {
+      if (!pointerStart.current) return;
+      pointerStart.current = null;
+      if (dirty.current) onResizeCommit(latest.current, "pointer");
+      dirty.current = false;
+    }, [onResizeCommit]);
+    var handleKeyDown = React.useCallback(function (e) {
+      var next = keyboardResize(e.key, latest.current, policyRef.current, readContentMin(), {
+        shiftKey: e.shiftKey,
+        axis: axisRef.current
+      });
+      if (!next) return;
+      // The key is ours even when it resolves to no movement (already pinned at
+      // a bound), so the browser must not also scroll the surface.
+      e.preventDefault();
+      emitPreview(next, "keyboard");
+    }, [emitPreview, readContentMin]);
+    var handleKeyUp = React.useCallback(function (e) {
+      if (!isResizeKey(e.key)) return;
+      // The gesture end for the keyboard is the key release: one commit per
+      // hold, mirroring pointer-up after a stream of moves.
+      if (dirty.current) onResizeCommit(latest.current, "keyboard");
+      dirty.current = false;
+    }, [onResizeCommit]);
+    return {
+      role: "separator",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-controls": cardId,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": measurePercent(size, policy, readContentMin()),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: endPointer,
+      onLostPointerCapture: endPointer,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    };
+  };
+
   exports.AccessLogIcon = AccessLogIcon$1;
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
@@ -27440,6 +27892,7 @@
   exports.CounterButton = CounterButton;
   exports.CrownBlankIcon = CrownBlankIcon$1;
   exports.CrownSelectedIcon = CrownSelectedIcon$1;
+  exports.DEFAULT_KEYBOARD_STEP = DEFAULT_KEYBOARD_STEP;
   exports.DataTable = DataTable;
   exports.DatePicker = DatePicker;
   exports.DateStepper = DateStepper;
@@ -27625,6 +28078,7 @@
   exports.ProjectTemplateIcon = ProjectTemplateIcon$1;
   exports.ProjectsIcon = ProjectsIcon$1;
   exports.PuzzleIcon = PuzzleIcon$1;
+  exports.RESIZE_KEYS = RESIZE_KEYS;
   exports.RadioBlankIcon = RadioBlankIcon$1;
   exports.RadioButton = RadioButton;
   exports.RadioButtonIcon = RadioButtonIcon$1;
@@ -27645,6 +28099,7 @@
   exports.RocketIcon = RocketIcon$1;
   exports.RocketSmallIcon = RocketSmallIcon$1;
   exports.RoundedRectangleIcon = RoundedRectangleIcon$1;
+  exports.SHIFT_STEP_MULTIPLIER = SHIFT_STEP_MULTIPLIER;
   exports.STACKED_CARD_CONTROL_CLASS = STACKED_CARD_CONTROL_CLASS;
   exports.STACKED_CARD_COVER_RATIO = STACKED_CARD_COVER_RATIO;
   exports.STACKED_CARD_FIXED_ATTR = STACKED_CARD_FIXED_ATTR;
@@ -27747,16 +28202,24 @@
   exports._Dialog = _Dialog;
   exports._List = _List;
   exports.aiColors = aiColors;
+  exports.applyResize = applyResize;
+  exports.clamp = clamp;
   exports.colors = colors$1;
+  exports.effectiveBounds = effectiveBounds;
   exports.formatCurrency = formatCurrency;
   exports.formatHours = formatHours;
   exports.formatNumber = formatNumber;
   exports.getNumberFromString = getNumberFromString;
   exports.isOptionGroup = isOptionGroup;
+  exports.isResizeKey = isResizeKey;
   exports.isValidUrl = isValidUrl;
+  exports.keyboardResize = keyboardResize;
   exports.layers = layers;
+  exports.makeStart = makeStart;
+  exports.measurePercent = measurePercent;
   exports.numberWithSeparator = numberWithSeparator;
   exports.signifierTypes = signifierTypes;
+  exports.snap = snap;
   exports.toMoment = toMoment;
   exports.useContentStepperContext = useContentStepperContext;
   exports.useEntityGroupContext = useEntityGroupContext;
@@ -27767,6 +28230,7 @@
   exports.useLayerContext = useLayerContext;
   exports.useMenuContext = useMenuContext;
   exports.useResizeObserver = useResizeObserver$1;
+  exports.useStackedCardResize = useStackedCardResize;
   exports.useWizardContext = useWizardContext;
   exports.validateNumberInput = validateNumberInput;
   exports.validateStopwatchTime = validateStopwatchTime;