@mt-gloss/ui 0.0.44 → 0.0.45

package/lib/primitives/dashboard/MetricCard/GhostPreview.d.ts

@@ -4,8 +4,15 @@ export interface GhostPreviewProps {
     visible: boolean;
     /** The target column span being previewed. */
     targetColSpan: 1 | 2 | 3;
-    /** D-07 — MotionValue driving translateX. Zero React re-renders per pointermove. */
-    motionX: MotionValue<number>;
+    /**
+     * D-07 rework 260419-v2 — MotionValue driving the ghost's WIDTH (px).
+     * The ghost is left-anchored at the slot origin; the ghost RIGHT edge
+     * follows the cursor via direct width animation (no translateX). Zero
+     * React re-renders per pointermove. Framer-motion animates width via rAF
+     * + direct style writes, so there is no CSS-engine transition on width
+     * (AP-19 companion — `transition-property` in edge-hover.scss is opacity-only).
+     */
+    ghostWidth: MotionValue<number>;
     /** AN-06 enter duration in ms. Default: 180ms */
     enterMs?: number;
     /** AN-06 exit duration in ms. Default: 120ms */
@@ -14,14 +21,21 @@ export interface GhostPreviewProps {
 /**
  * GhostPreview — Dashed outline overlay rendered during an active resize drag.
  *
- * Phase 19 evolution: consumes a framer-motion MotionValue for translateX
- * (D-07) so ghost tracks the cursor 1:1 without React re-renders on
- * pointermove (AP-17). Opacity transitions still use CSS enterMs/exitMs.
+ * Rework 260419-v2: ghost is LEFT-ANCHORED WIDTH (no translateX). The left
+ * edge stays pinned at the slot origin; the right edge follows the cursor
+ * via framer-motion MotionValue → `style={{ width }}`. Supersedes the prior
+ * translateX (D-07) rendering, which caused the ghost to slide horizontally
+ * across the page when compounded with the pre-Phase-19 wrapper (see debug
+ * session 260419-ghost-slides-across-page).
+ *
+ * D-24's "translateX over scaleX" rationale (corner distortion under scaleX)
+ * does NOT apply to direct `width` animation — the border/corners draw at
+ * every frame at the current width with no geometric scaling.
  *
  * Hidden via aria-hidden — purely decorative visual feedback.
- * Motion contract (AN-06): enter 180ms, exit 120ms.
+ * Motion contract (AN-06): enter 180ms, exit 120ms (opacity only).
  */
-export declare function GhostPreview({ visible, targetColSpan, motionX, enterMs, exitMs, }: GhostPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function GhostPreview({ visible, targetColSpan, ghostWidth, enterMs, exitMs, }: GhostPreviewProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace GhostPreview {
     var displayName: string;
 }

package/lib/primitives/dashboard/MetricCard/useEdgeHoverResize.d.ts

@@ -15,6 +15,13 @@ export interface UseEdgeHoverResizeArgs {
     onCancel?: () => void;
     /** D-14 — colWidth snapshot passed per-render; captured at pointerdown. Default: 180px (1280px viewport). */
     step?: number;
+    /**
+     * Grid gap (px) between adjacent columns. Used to compute the ghost's
+     * left-anchored width as `colSpan * step + (colSpan - 1) * gap`. Default: 0
+     * (single-column grids). Rework 260419-v2 — ghost is width-driven, not
+     * translateX-driven; this is the companion scalar.
+     */
+    gap?: number;
     /** D-03 panel override; falls back to DEFAULT_RESIZE_PHYSICS. */
     tuning?: Partial<ResizePhysicsConfig>;
     /** Hover dwell time before handle appears. Default: 120ms */
@@ -25,8 +32,8 @@ export interface UseEdgeHoverResizeArgs {
     exitMs?: number;
     /**
      * Max colSpan supported by the grid (D-13 — right-edge-only grow). Default: 3.
-     * Used to clamp motionX writes during drag so the ghost cannot translate
-     * past the maximum-allowed column offset at any cursor position (debug
+     * Used to clamp ghostWidth writes during drag so the ghost cannot grow
+     * past the maximum-allowed column width at any cursor position (debug
      * session 260419-ghost-slides-across-page — AP-17 companion invariant).
      */
     maxColSpan?: 1 | 2 | 3;
@@ -50,8 +57,15 @@ export interface UseEdgeHoverResizeReturn {
     ghostProps: {
         visible: boolean;
         targetColSpan: 1 | 2 | 3;
-        /** D-07 — MotionValue driving ghost translateX. Zero React re-renders per pointermove. */
-        motionX: MotionValue<number>;
+        /**
+         * D-07 rework 260419-v2 — MotionValue driving ghost WIDTH (left-anchored).
+         * The ghost LEFT edge is pinned at the slot origin; the ghost RIGHT edge
+         * follows the cursor; `ghostWidth` carries that width imperatively with
+         * zero React re-renders per pointermove. Supersedes the prior `motionX`
+         * translateX semantic (which slid the entire ghost horizontally — see
+         * debug session 260419-ghost-slides-across-page).
+         */
+        ghostWidth: MotionValue<number>;
         enterMs: number;
         exitMs: number;
     };
@@ -84,4 +98,4 @@ export interface UseEdgeHoverResizeReturn {
  *  - Bug E handle pointerenter keeps zone alive on sentinel→handle crossover
  *  - Dwell timer cleanup on unmount
  */
-export declare function useEdgeHoverResize({ currentColSpan, stackable, onResize, onCancel, step, tuning, dwellMs, enterMs, exitMs, maxColSpan, }: UseEdgeHoverResizeArgs): UseEdgeHoverResizeReturn;
+export declare function useEdgeHoverResize({ currentColSpan, stackable, onResize, onCancel, step, gap, tuning, dwellMs, enterMs, exitMs, maxColSpan, }: UseEdgeHoverResizeArgs): UseEdgeHoverResizeReturn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mt-gloss/ui",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "type": "module",
   "publishConfig": {
     "access": "restricted"