@mt-gloss/ui 0.1.46 → 0.1.48

package/lib/primitives/dashboard/CellTintOverlay/CellTintOverlay.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export type CellTintVariant = 'eligibility' | 'commit' | 'rejection' | 'ramp';
+export interface CellTintOverlayProps {
+    /** Section-relative col convention. Mirror SnapOutline/TrackingOutline contract:
+     *  cell.col is 0..2 (within section); absCol = cell.section * 3 + cell.col. */
+    cell: {
+        section: 0 | 1 | 2 | 3;
+        col: 0 | 1 | 2;
+        row: 0 | 1 | 2;
+    };
+    variant: CellTintVariant;
+    /** Required when variant='ramp'; lerped CSS color (eligibilityFill→commitFill).
+     *  When omitted on ramp, falls back to eligibilityFill var. */
+    rampColor?: string;
+    colWidth: number;
+    rowHeight: number;
+    gap: number;
+    className?: string;
+}
+/**
+ * Phase 11 Plan 11-02 D-04 — Per-cell absolute-positioned tint overlay primitive.
+ *
+ * Four variants drive eligibility / commit / rejection / ramp visualizations.
+ * Section-relative col math mirrors SnapOutline / TrackingOutline (Pattern A).
+ *
+ * Variant → fill mapping:
+ *   eligibility  →  paletteVars.eligibilityFill   (#6F87D2)
+ *   commit       →  paletteVars.commitFill        (#4664C0)
+ *   rejection    →  paletteVars.rejectionFill     (#F0BAC1) + dashed rejectionStroke border
+ *   ramp         →  rampColor literal (consumer-supplied; rAF-driven lerp)
+ *
+ * z-index: 4 (below TrackingOutline z-index: 5).
+ */
+export declare function CellTintOverlay({ cell, variant, rampColor, colWidth, rowHeight, gap, className, }: CellTintOverlayProps): React.JSX.Element;

package/lib/primitives/dashboard/CellTintOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { CellTintOverlay } from './CellTintOverlay';
+export type { CellTintOverlayProps, CellTintVariant } from './CellTintOverlay';

package/lib/primitives/dashboard/RefusePulse/RefusePulse.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface RefusePulseProps {
+    cell: {
+        section: 0 | 1 | 2 | 3;
+        col: 0 | 1 | 2;
+        row: 0 | 1 | 2;
+    };
+    /** Monotonically increasing key. Incrementing remounts the primitive,
+     *  replaying the single 360ms expand+fade animation (D-09 fire-once). */
+    fireKey: number;
+    colWidth: number;
+    rowHeight: number;
+    gap: number;
+    className?: string;
+}
+/**
+ * Phase 11 Plan 11-02 RSZ-05 — 3-ring expand-fade pulse primitive.
+ *
+ * Fires ONCE per gesture per UI-SPEC + D-09. The consumer increments `fireKey`
+ * to remount the primitive and replay the 360ms expand+fade. Re-rendering with
+ * the same fireKey is a no-op (React reconciliation reuses the same DOM nodes
+ * and the CSS animation does not restart).
+ *
+ * Origin: cx = absCol*(colWidth+gap) + colWidth/2; cy = row*(rowHeight+gap) + rowHeight/2.
+ * Color: var(--gloss-g02-rejection-stroke).
+ *
+ * Reduced-motion (D-08): single 48×48 round flash element with `data-testid=
+ * gloss-refuse-pulse-flash`, no rings — preserves fire-once semantics under PRM.
+ */
+export declare function RefusePulse({ cell, fireKey, colWidth, rowHeight, gap, className, }: RefusePulseProps): React.JSX.Element;

package/lib/primitives/dashboard/RefusePulse/index.d.ts

@@ -0,0 +1,2 @@
+export { RefusePulse } from './RefusePulse';
+export type { RefusePulseProps } from './RefusePulse';

package/lib/primitives/dashboard/ResizeTrackingOutline/index.d.ts

@@ -0,0 +1,7 @@
+import { TrackingOutlineProps } from '../TrackingOutline/TrackingOutline';
+import * as React from 'react';
+export type ResizeTrackingOutlineProps = Omit<TrackingOutlineProps, 'gesture'>;
+/** Phase 11 D-01 — Thin alias over `<TrackingOutline gesture='resize' />`.
+ *  Resize callers should import { ResizeTrackingOutline } from '@mt-gloss/ui'.
+ *  Pattern (`'solid' | 'dashed-retreated'`) is the resize-side knob. */
+export declare function ResizeTrackingOutline(props: ResizeTrackingOutlineProps): React.JSX.Element;

package/lib/primitives/dashboard/SnapOutline/SnapOutline.d.ts

@@ -1,52 +1,18 @@
+import { TrackingOutlineProps } from '../TrackingOutline/TrackingOutline';
 import * as React from 'react';
-export interface SnapOutlineProps {
-    cell: {
-        section: 0 | 1 | 2 | 3;
-        col: 0 | 1 | 2;
-        row: 0 | 1 | 2;
-    };
-    colSpan: 1 | 2 | 3;
-    rowSpan: 1;
-    colWidth: number;
-    gap: number;
-    rowHeight: number;
-    /** DRAG-06 default 120ms cubic-bezier(0.4, 0, 0.2, 1) on transform. */
-    transitionMs?: number;
-    className?: string;
-}
+export type SnapOutlineProps = Omit<TrackingOutlineProps, 'gesture' | 'pattern'>;
 /**
- * Phase 3 DRAG-06 — single 2px snap outline, 120ms cubic-bezier transition on transform.
+ * Phase 11 Plan 11-02 D-01 — Thin alias over `<TrackingOutline gesture='drag' pattern='solid' />`.
  *
- * Renders a `position: absolute` 2px solid border rectangle, translated to the
- * target cell via `translate({left}px, {top}px)` where:
- *   - `absCol = cell.section * 3 + cell.col`  (section offset applied)
- *   - `left   = absCol * (colWidth + gap)`
- *   - `top    = cell.row * (rowHeight + gap)`
- *   - `width  = colSpan * colWidth + (colSpan - 1) * gap`
- *   - `height = rowHeight`
+ * Drag callers keep importing { SnapOutline } from '@mt-gloss/ui'. D-15 #4
+ * asserts pixel-identical render against the post-Plan-11-01 baseline
+ * (`live_uat_screenshots/13-cleanup-after.png`) — chrome MCP scenario 12.
  *
- * COORDINATE CONTRACT: `cell.col` is SECTION-RELATIVE (0..2). The absolute grid
- * column is computed here by adding `cell.section * 3`. Producers (useDragFeedback)
- * emit section-relative col so predictCascade + snap outline share the same type.
- * Prior to the `large-card-drop-positioning` debug fix (2026-04-22), this
- * component treated `cell.col` as absolute, causing the outline to stick to
- * section 1 regardless of cursor section — and to straddle the section boundary
- * when a wide card hovered near the right of section 1.
+ * The base primitive emits `data-testid="gloss-snap-outline"` and the legacy
+ * `.gloss-drag-feedback-snap-outline` class on the drag branch, so existing
+ * unit tests + reptime SCSS selectors continue to match unchanged.
  *
- * Transitions the transform at `${transitionMs ?? 120}ms cubic-bezier(0.4, 0, 0.2, 1)`.
- * Under `prefers-reduced-motion: reduce`, `transition: none !important` strips
- * the slide (SCSS-level override; see snap-outline.scss).
- *
- * Rendering-layer invariants (Plan 05 MUST honor):
- *  - `position: absolute` consumer — parent is the grid container with `position: relative`.
- *  - `pointer-events: none` (aria-hidden); does NOT intercept drag events.
- *  - 2px solid border using `var(--gloss-g02-tracking-outline)` (Phase 9 D-14 G-02
- *    trackingOutline channel; pre-rewire used `var(--gloss-valid-stroke)`. SCSS-default
- *    matches pre-rewire `#3b82f6` for D-17 zero-visual-diff. G-02 spec hex `#2541A1`
- *    + 2.5px width bump deferred to Track C / Phase 11).
- *  - Rendered INSIDE the grid container, NOT inside `<DragOverlay>`; DragOverlay
- *    hosts the DragGhost only (see Plan 02). The `dropAnimation={null}` invariant
- *    on DragOverlay (Plan 00 spike + Plan 01 header) does not apply here — SnapOutline
- *    is not a DragOverlay child.
+ * See SnapOutline-pre-11-02 for the prior coordinate-contract JSDoc; the same
+ * contract is preserved verbatim in TrackingOutline.tsx.
  */
-export declare function SnapOutline({ cell, colSpan, colWidth, gap, rowHeight, transitionMs, className, }: SnapOutlineProps): React.JSX.Element;
+export declare function SnapOutline(props: SnapOutlineProps): React.JSX.Element;

package/lib/primitives/dashboard/TrackingOutline/TrackingOutline.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface TrackingOutlineProps {
+    /** D-01 — gesture discriminator. drag stays 2px solid (D-15 #4 parity); resize gets 2.5px + dashed-retreated pattern support. */
+    gesture: 'drag' | 'resize';
+    cell: {
+        section: 0 | 1 | 2 | 3;
+        col: 0 | 1 | 2;
+        row: 0 | 1 | 2;
+    };
+    colSpan: 1 | 2 | 3;
+    rowSpan: 1;
+    colWidth: number;
+    gap: number;
+    rowHeight: number;
+    /** UI-SPEC §Tracking outline — solid for valid commit, 'dashed-retreated' (visual only; color never red — Principle 1) when handle past divider. */
+    pattern?: 'solid' | 'dashed-retreated';
+    /** DRAG-06 default 120ms cubic-bezier(0.4, 0, 0.2, 1) on transform. */
+    transitionMs?: number;
+    className?: string;
+}
+/**
+ * Phase 11 D-01 — Shared tracking-outline base for drag + resize gestures.
+ *
+ * Renders a `position: absolute` border rectangle, translated to the target cell
+ * via `translate({left}px, {top}px)` where:
+ *   - `absCol = cell.section * 3 + cell.col`  (section offset applied)
+ *   - `left   = absCol * (colWidth + gap)`
+ *   - `top    = cell.row * (rowHeight + gap)`
+ *   - `width  = colSpan * colWidth + (colSpan - 1) * gap`
+ *   - `height = rowHeight`
+ *
+ * COORDINATE CONTRACT: `cell.col` is SECTION-RELATIVE (0..2). The absolute grid
+ * column is computed here by adding `cell.section * 3`. Producers (useDragFeedback,
+ * useResizeChoreography) emit section-relative col so predictCascade + tracking
+ * outline share the same type. Prior to the `large-card-drop-positioning` debug
+ * fix (2026-04-22), SnapOutline (predecessor) treated `cell.col` as absolute,
+ * causing the outline to stick to section 1 regardless of cursor section — and
+ * to straddle the section boundary when a wide card hovered near the right of
+ * section 1. Carried verbatim into TrackingOutline.
+ *
+ * D-15 #4 PARITY GATE: When `gesture === 'drag'`, render must be pixel-identical
+ * to the pre-Plan-11-02 SnapOutline render — same testid `gloss-snap-outline`,
+ * same 2px borderWidth, same color, same transition. The drag-parity chrome MCP
+ * scenario 12 (Task 4) asserts this empirically against the Plan 11-01 baseline
+ * `live_uat_screenshots/13-cleanup-after.png`.
+ *
+ * Resize variant (`gesture === 'resize'`) bumps borderWidth to 2.5px (G-02 spec
+ * UI-SPEC §Tracking outline) and unlocks `pattern='dashed-retreated'` for the
+ * post-boundary retreated state (Principle 1: color never changes; pattern signals
+ * the channel).
+ *
+ * Rendering-layer invariants (callers MUST honor):
+ *  - `position: absolute` consumer — parent is the grid container with `position: relative`.
+ *  - `pointer-events: none` (aria-hidden); does NOT intercept drag/resize events.
+ *  - 2px (drag) or 2.5px (resize) border using `var(--gloss-g02-tracking-outline)`.
+ *  - Rendered INSIDE the grid container, NOT inside `<DragOverlay>`.
+ */
+export declare function TrackingOutline({ gesture, cell, colSpan, colWidth, gap, rowHeight, pattern, transitionMs, className, }: TrackingOutlineProps): React.JSX.Element;

package/lib/primitives/dashboard/TrackingOutline/index.d.ts

@@ -0,0 +1,2 @@
+export { TrackingOutline } from './TrackingOutline';
+export type { TrackingOutlineProps } from './TrackingOutline';

package/lib/primitives/dashboard/index.d.ts

@@ -40,3 +40,7 @@ export * from './StackedGroupTilePreview';
 export * from './gridMotionPrimitives';
 export * from './gridChannels';
 export * from './gridInteractivePalette';
+export * from './TrackingOutline';
+export * from './CellTintOverlay';
+export * from './RefusePulse';
+export { ResizeTrackingOutline, type ResizeTrackingOutlineProps, } from './ResizeTrackingOutline';

package/package.json

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