@mt-gloss/ui 0.1.71 → 0.1.72
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +1424 -1425
- package/lib/primitives/dashboard/MetricCard/types/cardShellProps.d.ts +134 -0
- package/lib/primitives/dashboard/MetricCard/types/index.d.ts +3 -0
- package/lib/primitives/dashboard/MetricCard/types/shared.d.ts +58 -0
- package/lib/primitives/dashboard/MetricCard/types/variantProps.d.ts +81 -0
- package/lib/primitives/dashboard/MetricCard/types.d.ts +6 -270
- package/lib/primitives/dashboard/MetricCard/useEdgeHoverResize.d.ts +1 -15
- package/package.json +1 -1
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { ReactNode, CSSProperties, RefObject } from 'react';
|
|
2
|
+
/** Props for the CardShell wrapper component. */
|
|
3
|
+
export interface CardShellProps {
|
|
4
|
+
/** Preferred slot for card content. Use this instead of children. */
|
|
5
|
+
contentSlot?: ReactNode;
|
|
6
|
+
/** @deprecated Use contentSlot instead. */
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
colSpan?: 1 | 2 | 3;
|
|
9
|
+
isStale?: boolean;
|
|
10
|
+
isRetrying?: boolean;
|
|
11
|
+
beta?: boolean;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
style?: CSSProperties;
|
|
14
|
+
/**
|
|
15
|
+
* Optional controlled hover state (Phase 19.2 D-02 / D-03 / D-08).
|
|
16
|
+
*
|
|
17
|
+
* When provided, CardShell DOES NOT track hover internally. Grid-authoritative
|
|
18
|
+
* consumers (e.g. `MetricCardGrid` in reptime-cloud) derive hover from a
|
|
19
|
+
* single container-level `pointerover`/`pointerleave` listener and thread
|
|
20
|
+
* `hovered={id === hoveredCardId}` to each slot (D-15).
|
|
21
|
+
*
|
|
22
|
+
* When undefined (default; backward-compat), falls back to internal
|
|
23
|
+
* `useState` driven by `onMouseEnter`/`onMouseLeave`, with the legacy 180ms
|
|
24
|
+
* leave-delay REMOVED (D-08 — CSS animation handles the fade).
|
|
25
|
+
*
|
|
26
|
+
* @default undefined (uncontrolled)
|
|
27
|
+
*/
|
|
28
|
+
hovered?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* When true, renders a 2px accent ring around the card shell using box-shadow
|
|
31
|
+
* (NOT border, to avoid reflow). Used to indicate config mode is active (D-09).
|
|
32
|
+
*/
|
|
33
|
+
accentRing?: boolean;
|
|
34
|
+
onGraph?: () => void;
|
|
35
|
+
onDetails?: () => void;
|
|
36
|
+
onCustomize?: ((ref: RefObject<HTMLDivElement | null>) => void) | (() => void);
|
|
37
|
+
onRemove?: () => void;
|
|
38
|
+
onExpand?: () => void;
|
|
39
|
+
onShrink?: () => void;
|
|
40
|
+
onMove?: () => void;
|
|
41
|
+
onReplace?: () => void;
|
|
42
|
+
onNavigate?: () => void;
|
|
43
|
+
onRetry?: () => void;
|
|
44
|
+
onRefresh?: () => void;
|
|
45
|
+
onWhatsThis?: () => void;
|
|
46
|
+
enableQuickSettings?: boolean;
|
|
47
|
+
onUpdateTimeframe?: (presetId: string) => void;
|
|
48
|
+
instanceTimeframe?: string;
|
|
49
|
+
cardTitle?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Controlled flip state. When undefined (default), CardShell manages flip
|
|
52
|
+
* internally via useState (backward-compat — existing consumers unchanged).
|
|
53
|
+
*
|
|
54
|
+
* When provided, the parent owns the flip state. CardShell renders the
|
|
55
|
+
* derived `effectiveFlipped = isFlipped ?? internalFlipped` for both faces
|
|
56
|
+
* and does NOT mutate internal state; instead it delegates flip transitions
|
|
57
|
+
* to `onFlipChange`.
|
|
58
|
+
*
|
|
59
|
+
* Phase 4 (PaceCard): PacePlaceholder's "Set target" CTA needs a flip trigger
|
|
60
|
+
* path outside the overflow menu; controlled prop enables this without a
|
|
61
|
+
* CardShell API break for existing consumers (MetricCard, NameCard, etc.).
|
|
62
|
+
*/
|
|
63
|
+
isFlipped?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Fires on every flip transition request when `isFlipped` is controlled.
|
|
66
|
+
* Not called in uncontrolled mode (undefined isFlipped). The argument is the
|
|
67
|
+
* target flip state (`true` = back face requested, `false` = front face).
|
|
68
|
+
*
|
|
69
|
+
* When invoked from the back→front (handleFlipBack) path, the staged
|
|
70
|
+
* timeframe commit chain still fires before onFlipChange — consumers receive
|
|
71
|
+
* the updated timeframe via onUpdateTimeframe / onUpdateStackedTimeframes
|
|
72
|
+
* regardless of controlled or uncontrolled mode.
|
|
73
|
+
*/
|
|
74
|
+
onFlipChange?: (flipped: boolean) => void;
|
|
75
|
+
/**
|
|
76
|
+
* Custom content rendered inside the flip-back face, replacing the default
|
|
77
|
+
* <CardBack> timeframe preset grid. Use for consumer-specific quick-config
|
|
78
|
+
* panels (e.g. sparkline/status-mode toggles). When provided, fully replaces
|
|
79
|
+
* the default CardBack render. Flip mechanics (isFlipped, handleFlip,
|
|
80
|
+
* onQuickSettings wiring) are unchanged.
|
|
81
|
+
*
|
|
82
|
+
* Added FG-1 / D-01, D-02 (Phase 10.5 UAT defect sweep): eliminates
|
|
83
|
+
* sibling-peer QuickConfig mount that broke drag-ghost layout.
|
|
84
|
+
*/
|
|
85
|
+
quickConfigSlot?: ReactNode;
|
|
86
|
+
onViewAsStack?: () => void;
|
|
87
|
+
onUnstack?: () => void;
|
|
88
|
+
isStackedGroup?: boolean;
|
|
89
|
+
onUpdateStackedTimeframes?: (timeframes: string[]) => void;
|
|
90
|
+
instanceStackedTimeframes?: string[];
|
|
91
|
+
isGraphActive?: boolean;
|
|
92
|
+
isTableActive?: boolean;
|
|
93
|
+
isGraphCard?: boolean;
|
|
94
|
+
canExpand?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* Horizontal anchor (px from card's left edge) forwarded to ActionStrip.
|
|
97
|
+
*
|
|
98
|
+
* When provided, overrides ActionStrip's default `left: 50%` centered pill
|
|
99
|
+
* position. Drives the per-slot gutter-slide choreography for stack cards
|
|
100
|
+
* (Cluster W quick-260417-d5z item 3 / gutter hover slide). Undefined
|
|
101
|
+
* preserves the pre-existing centered layout.
|
|
102
|
+
*
|
|
103
|
+
* @see ActionStripProps.anchorX
|
|
104
|
+
*/
|
|
105
|
+
anchorX?: number;
|
|
106
|
+
/**
|
|
107
|
+
* Consumer-supplied overflow menu entries that CardShell concatenates into
|
|
108
|
+
* the ActionStrip `overflow` prop after the default set (settings / remove
|
|
109
|
+
* / replace / refresh) and before the footer `whats-this`.
|
|
110
|
+
*
|
|
111
|
+
* Per D-04 (variant ownership), gloss primitives stay reptime-agnostic:
|
|
112
|
+
* extensions like Move / Customize are constructed at the reptime
|
|
113
|
+
* consumer and passed in via this prop (usually sourced from
|
|
114
|
+
* `CARD_MENU_EXTENSIONS.getExtensions(cardType, baseOrder)` per AP-09).
|
|
115
|
+
*
|
|
116
|
+
* Phase 16 plan 16-06 Task 3 adds this prop; reptime adopts it for
|
|
117
|
+
* cardType-specific Move / Customize opt-in.
|
|
118
|
+
*/
|
|
119
|
+
extensionOverflow?: import('../../../overlays/ActionStrip').OverflowAction[];
|
|
120
|
+
cardRef?: RefObject<HTMLDivElement | null>;
|
|
121
|
+
/**
|
|
122
|
+
* Quick 260422-e7e — When true, forces the action strip (gutter) to be hidden
|
|
123
|
+
* using its normal exit animation. Used by the grid to hide the strip the moment
|
|
124
|
+
* a resize gesture starts, without requiring hover state changes.
|
|
125
|
+
*
|
|
126
|
+
* Does not affect card data, content, or security boundaries — purely visual.
|
|
127
|
+
* @default false
|
|
128
|
+
*/
|
|
129
|
+
forceHide?: boolean;
|
|
130
|
+
/** Phase 11.2 — resize choreography phase. Drives data-resize-phase on front-face BaseBox for B-path overlay. */
|
|
131
|
+
resizePhase?: import('../useResizeChoreography').ChoreographyPhase;
|
|
132
|
+
/** Phase 11.2 — outgoing composition snapshot (B-path). Rendered above live content during 'outgoing'; fades out on 'incoming'. */
|
|
133
|
+
outgoingSnapshot?: ReactNode;
|
|
134
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/** Value formatting options. */
|
|
2
|
+
export interface ValueFormat {
|
|
3
|
+
prefix?: string;
|
|
4
|
+
suffix?: string;
|
|
5
|
+
abbreviated?: boolean;
|
|
6
|
+
}
|
|
7
|
+
/** Trend indicator data for Zone C display. */
|
|
8
|
+
export interface TrendData {
|
|
9
|
+
value: number;
|
|
10
|
+
direction: 'up' | 'down' | 'flat';
|
|
11
|
+
label?: string;
|
|
12
|
+
}
|
|
13
|
+
/** A single segment entry for donut/segmented cards. */
|
|
14
|
+
export interface SegmentEntry {
|
|
15
|
+
value: number;
|
|
16
|
+
color: string;
|
|
17
|
+
label?: string;
|
|
18
|
+
}
|
|
19
|
+
/** Versus comparison data for side-by-side period cards. */
|
|
20
|
+
export interface VersusData {
|
|
21
|
+
current: number | string;
|
|
22
|
+
prior: number | string;
|
|
23
|
+
currentLabel?: string;
|
|
24
|
+
priorLabel?: string;
|
|
25
|
+
}
|
|
26
|
+
/** Card display mode — default 'time-period' is back-compat with all existing variants. */
|
|
27
|
+
export type MetricCardMode = 'time-period' | 'status';
|
|
28
|
+
/** Slot capacity for Status Mode width-driven rendering (Plan 02). */
|
|
29
|
+
export type SlotCapacity = 1 | 3 | 5;
|
|
30
|
+
/** Base props shared by all MetricCard variants. */
|
|
31
|
+
export interface BaseMetricCardProps {
|
|
32
|
+
label: string;
|
|
33
|
+
value?: number | string | null;
|
|
34
|
+
valueFormat?: ValueFormat;
|
|
35
|
+
trend?: TrendData | null;
|
|
36
|
+
subtitle?: string;
|
|
37
|
+
colSpan?: 1 | 2 | 3;
|
|
38
|
+
isStale?: boolean;
|
|
39
|
+
isLoading?: boolean;
|
|
40
|
+
isError?: boolean;
|
|
41
|
+
isEmpty?: boolean;
|
|
42
|
+
/** Display mode — undefined is equivalent to 'time-period' for back-compat. */
|
|
43
|
+
mode?: MetricCardMode;
|
|
44
|
+
/**
|
|
45
|
+
* Phase 15 — threshold visual breach treatment (D-06).
|
|
46
|
+
* 'warn' → amber border tint + WarningIcon (NEVER color-only, D-28)
|
|
47
|
+
* 'critical' → red border tint + CriticalIcon + pulse animation
|
|
48
|
+
* 'none' → no treatment (default)
|
|
49
|
+
*/
|
|
50
|
+
thresholdBreach?: 'none' | 'warn' | 'critical';
|
|
51
|
+
}
|
|
52
|
+
/** A single status slot entry for Status Mode cards (Phase 10). */
|
|
53
|
+
export interface StatusEntry {
|
|
54
|
+
id: string;
|
|
55
|
+
label: string;
|
|
56
|
+
value: number | string;
|
|
57
|
+
accentColor?: string;
|
|
58
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { TintCondition } from '../tintCondition';
|
|
2
|
+
import { BaseMetricCardProps, SlotCapacity, StatusEntry, VersusData, SegmentEntry } from './shared';
|
|
3
|
+
export interface StandardVariant extends BaseMetricCardProps {
|
|
4
|
+
variant: 'standard';
|
|
5
|
+
}
|
|
6
|
+
export interface SparklineVariant extends BaseMetricCardProps {
|
|
7
|
+
variant: 'sparkline';
|
|
8
|
+
sparklineData: number[];
|
|
9
|
+
accentColor?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface BarsVariant extends BaseMetricCardProps {
|
|
12
|
+
variant: 'bars';
|
|
13
|
+
barData: number[];
|
|
14
|
+
accentColor?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface DonutVariant extends BaseMetricCardProps {
|
|
17
|
+
variant: 'donut';
|
|
18
|
+
donutValue: number;
|
|
19
|
+
donutMax?: number;
|
|
20
|
+
accentColor?: string;
|
|
21
|
+
}
|
|
22
|
+
export interface HighlightVariant extends BaseMetricCardProps {
|
|
23
|
+
variant: 'highlight';
|
|
24
|
+
/**
|
|
25
|
+
* Highlight tint. One of: 'positive' | 'negative' | 'warning' | 'neutral'
|
|
26
|
+
* (maps to HIGHLIGHT_COLORS in MetricCard.tsx + --highlight-* tokens).
|
|
27
|
+
* `'warning'` = the highlight-warn variant, completing the +/warn/− triad.
|
|
28
|
+
* Arbitrary hex is also accepted (legacy), but prefer the named values.
|
|
29
|
+
*/
|
|
30
|
+
highlightColor: string;
|
|
31
|
+
/**
|
|
32
|
+
* Optional rule-based tint. When set, overrides static `highlightColor`
|
|
33
|
+
* at render time via `evaluateTintCondition(value, tintCondition)`.
|
|
34
|
+
* Wired into MetricCard.tsx in Plan 01-04.
|
|
35
|
+
*/
|
|
36
|
+
tintCondition?: TintCondition;
|
|
37
|
+
}
|
|
38
|
+
export interface ArrowVariant extends BaseMetricCardProps {
|
|
39
|
+
variant: 'arrow';
|
|
40
|
+
arrowDirection: 'up' | 'down';
|
|
41
|
+
arrowShape?: 'chevron' | 'triple' | 'bars';
|
|
42
|
+
}
|
|
43
|
+
export interface ObjectArrowVariant extends BaseMetricCardProps {
|
|
44
|
+
variant: 'object-arrow';
|
|
45
|
+
objectArrowValue: number;
|
|
46
|
+
objectArrowMax: number;
|
|
47
|
+
}
|
|
48
|
+
export interface VersusVariant extends BaseMetricCardProps {
|
|
49
|
+
variant: 'versus';
|
|
50
|
+
versusData: VersusData;
|
|
51
|
+
}
|
|
52
|
+
export interface SegmentedVariant extends BaseMetricCardProps {
|
|
53
|
+
variant: 'segmented';
|
|
54
|
+
segments: SegmentEntry[];
|
|
55
|
+
}
|
|
56
|
+
/** Status Mode variant — flag-gated; renders status slots instead of time-period value. */
|
|
57
|
+
export interface StatusModeVariant extends BaseMetricCardProps {
|
|
58
|
+
variant: 'status-mode';
|
|
59
|
+
statuses: ReadonlyArray<StatusEntry>;
|
|
60
|
+
activeStatusId?: string;
|
|
61
|
+
/** Per-status sparkline data keyed by status.id (Plan 02). */
|
|
62
|
+
sparklinePerStatus?: Record<string, ReadonlyArray<number>>;
|
|
63
|
+
/** Override computed slot capacity — test hook / opt-out (Plan 02). */
|
|
64
|
+
maxSlots?: SlotCapacity;
|
|
65
|
+
/**
|
|
66
|
+
* Called when a status slot is clicked (Plan 04 — chip-menu wiring).
|
|
67
|
+
* statusId: the clicked slot's status id.
|
|
68
|
+
* anchorEl: the slot DOM element — used to anchor the chip menu.
|
|
69
|
+
*/
|
|
70
|
+
onStatusSlotClick?: (statusId: string, anchorEl: HTMLElement) => void;
|
|
71
|
+
}
|
|
72
|
+
/** Discriminated union of all MetricCard variant props. */
|
|
73
|
+
export type MetricCardProps = StandardVariant | SparklineVariant | BarsVariant | DonutVariant | HighlightVariant | ArrowVariant | ObjectArrowVariant | VersusVariant | SegmentedVariant | StatusModeVariant;
|
|
74
|
+
/**
|
|
75
|
+
* All card type identifiers for type-guard compatibility.
|
|
76
|
+
* The 9 renderable variants (standard through segmented) map to MetricCardProps discriminated union.
|
|
77
|
+
* The 4 additional types (name, ratio, action, stacked-group) are handled by separate
|
|
78
|
+
* dashboard-specific components (NameCard, RatioCard, ErrorCard, StackedGroupCard).
|
|
79
|
+
* INTEG-10: 'action' variant rendering is intentionally out of scope -- ErrorCard handles it.
|
|
80
|
+
*/
|
|
81
|
+
export type MetricCardType = 'standard' | 'sparkline' | 'bars' | 'donut' | 'highlight' | 'arrow' | 'object-arrow' | 'versus' | 'segmented' | 'name' | 'ratio' | 'action' | 'stacked-group';
|
|
@@ -1,272 +1,8 @@
|
|
|
1
|
-
import { ReactNode, CSSProperties, RefObject } from 'react';
|
|
2
|
-
import { TintCondition } from './tintCondition';
|
|
3
|
-
/** Value formatting options. */
|
|
4
|
-
export interface ValueFormat {
|
|
5
|
-
prefix?: string;
|
|
6
|
-
suffix?: string;
|
|
7
|
-
abbreviated?: boolean;
|
|
8
|
-
}
|
|
9
|
-
/** Trend indicator data for Zone C display. */
|
|
10
|
-
export interface TrendData {
|
|
11
|
-
value: number;
|
|
12
|
-
direction: 'up' | 'down' | 'flat';
|
|
13
|
-
label?: string;
|
|
14
|
-
}
|
|
15
|
-
/** A single segment entry for donut/segmented cards. */
|
|
16
|
-
export interface SegmentEntry {
|
|
17
|
-
value: number;
|
|
18
|
-
color: string;
|
|
19
|
-
label?: string;
|
|
20
|
-
}
|
|
21
|
-
/** Versus comparison data for side-by-side period cards. */
|
|
22
|
-
export interface VersusData {
|
|
23
|
-
current: number | string;
|
|
24
|
-
prior: number | string;
|
|
25
|
-
currentLabel?: string;
|
|
26
|
-
priorLabel?: string;
|
|
27
|
-
}
|
|
28
|
-
/** Card display mode — default 'time-period' is back-compat with all existing variants. */
|
|
29
|
-
export type MetricCardMode = 'time-period' | 'status';
|
|
30
|
-
/** Slot capacity for Status Mode width-driven rendering (Plan 02). */
|
|
31
|
-
export type SlotCapacity = 1 | 3 | 5;
|
|
32
|
-
/** Base props shared by all MetricCard variants. */
|
|
33
|
-
export interface BaseMetricCardProps {
|
|
34
|
-
label: string;
|
|
35
|
-
value?: number | string | null;
|
|
36
|
-
valueFormat?: ValueFormat;
|
|
37
|
-
trend?: TrendData | null;
|
|
38
|
-
subtitle?: string;
|
|
39
|
-
colSpan?: 1 | 2 | 3;
|
|
40
|
-
isStale?: boolean;
|
|
41
|
-
isLoading?: boolean;
|
|
42
|
-
isError?: boolean;
|
|
43
|
-
isEmpty?: boolean;
|
|
44
|
-
/** Display mode — undefined is equivalent to 'time-period' for back-compat. */
|
|
45
|
-
mode?: MetricCardMode;
|
|
46
|
-
/**
|
|
47
|
-
* Phase 15 — threshold visual breach treatment (D-06).
|
|
48
|
-
* 'warn' → amber border tint + WarningIcon (NEVER color-only, D-28)
|
|
49
|
-
* 'critical' → red border tint + CriticalIcon + pulse animation
|
|
50
|
-
* 'none' → no treatment (default)
|
|
51
|
-
*/
|
|
52
|
-
thresholdBreach?: 'none' | 'warn' | 'critical';
|
|
53
|
-
}
|
|
54
|
-
export interface StandardVariant extends BaseMetricCardProps {
|
|
55
|
-
variant: 'standard';
|
|
56
|
-
}
|
|
57
|
-
export interface SparklineVariant extends BaseMetricCardProps {
|
|
58
|
-
variant: 'sparkline';
|
|
59
|
-
sparklineData: number[];
|
|
60
|
-
accentColor?: string;
|
|
61
|
-
}
|
|
62
|
-
export interface BarsVariant extends BaseMetricCardProps {
|
|
63
|
-
variant: 'bars';
|
|
64
|
-
barData: number[];
|
|
65
|
-
accentColor?: string;
|
|
66
|
-
}
|
|
67
|
-
export interface DonutVariant extends BaseMetricCardProps {
|
|
68
|
-
variant: 'donut';
|
|
69
|
-
donutValue: number;
|
|
70
|
-
donutMax?: number;
|
|
71
|
-
accentColor?: string;
|
|
72
|
-
}
|
|
73
|
-
export interface HighlightVariant extends BaseMetricCardProps {
|
|
74
|
-
variant: 'highlight';
|
|
75
|
-
/**
|
|
76
|
-
* Highlight tint. One of: 'positive' | 'negative' | 'warning' | 'neutral'
|
|
77
|
-
* (maps to HIGHLIGHT_COLORS in MetricCard.tsx + --highlight-* tokens).
|
|
78
|
-
* `'warning'` = the highlight-warn variant, completing the +/warn/− triad.
|
|
79
|
-
* Arbitrary hex is also accepted (legacy), but prefer the named values.
|
|
80
|
-
*/
|
|
81
|
-
highlightColor: string;
|
|
82
|
-
/**
|
|
83
|
-
* Optional rule-based tint. When set, overrides static `highlightColor`
|
|
84
|
-
* at render time via `evaluateTintCondition(value, tintCondition)`.
|
|
85
|
-
* Wired into MetricCard.tsx in Plan 01-04.
|
|
86
|
-
*/
|
|
87
|
-
tintCondition?: TintCondition;
|
|
88
|
-
}
|
|
89
|
-
export interface ArrowVariant extends BaseMetricCardProps {
|
|
90
|
-
variant: 'arrow';
|
|
91
|
-
arrowDirection: 'up' | 'down';
|
|
92
|
-
arrowShape?: 'chevron' | 'triple' | 'bars';
|
|
93
|
-
}
|
|
94
|
-
export interface ObjectArrowVariant extends BaseMetricCardProps {
|
|
95
|
-
variant: 'object-arrow';
|
|
96
|
-
objectArrowValue: number;
|
|
97
|
-
objectArrowMax: number;
|
|
98
|
-
}
|
|
99
|
-
export interface VersusVariant extends BaseMetricCardProps {
|
|
100
|
-
variant: 'versus';
|
|
101
|
-
versusData: VersusData;
|
|
102
|
-
}
|
|
103
|
-
export interface SegmentedVariant extends BaseMetricCardProps {
|
|
104
|
-
variant: 'segmented';
|
|
105
|
-
segments: SegmentEntry[];
|
|
106
|
-
}
|
|
107
|
-
/** A single status slot entry for Status Mode cards (Phase 10). */
|
|
108
|
-
export interface StatusEntry {
|
|
109
|
-
id: string;
|
|
110
|
-
label: string;
|
|
111
|
-
value: number | string;
|
|
112
|
-
accentColor?: string;
|
|
113
|
-
}
|
|
114
|
-
/** Status Mode variant — flag-gated; renders status slots instead of time-period value. */
|
|
115
|
-
export interface StatusModeVariant extends BaseMetricCardProps {
|
|
116
|
-
variant: 'status-mode';
|
|
117
|
-
statuses: ReadonlyArray<StatusEntry>;
|
|
118
|
-
activeStatusId?: string;
|
|
119
|
-
/** Per-status sparkline data keyed by status.id (Plan 02). */
|
|
120
|
-
sparklinePerStatus?: Record<string, ReadonlyArray<number>>;
|
|
121
|
-
/** Override computed slot capacity — test hook / opt-out (Plan 02). */
|
|
122
|
-
maxSlots?: SlotCapacity;
|
|
123
|
-
/**
|
|
124
|
-
* Called when a status slot is clicked (Plan 04 — chip-menu wiring).
|
|
125
|
-
* statusId: the clicked slot's status id.
|
|
126
|
-
* anchorEl: the slot DOM element — used to anchor the chip menu.
|
|
127
|
-
*/
|
|
128
|
-
onStatusSlotClick?: (statusId: string, anchorEl: HTMLElement) => void;
|
|
129
|
-
}
|
|
130
|
-
/** Discriminated union of all MetricCard variant props. */
|
|
131
|
-
export type MetricCardProps = StandardVariant | SparklineVariant | BarsVariant | DonutVariant | HighlightVariant | ArrowVariant | ObjectArrowVariant | VersusVariant | SegmentedVariant | StatusModeVariant;
|
|
132
1
|
/**
|
|
133
|
-
*
|
|
134
|
-
*
|
|
135
|
-
*
|
|
136
|
-
*
|
|
137
|
-
*
|
|
2
|
+
* GlossUI MetricCard type contracts.
|
|
3
|
+
*
|
|
4
|
+
* Split into domain files under types/ — this file is a barrel for back-compat.
|
|
5
|
+
* Import from './types/shared', './types/variantProps', or './types/cardShellProps' directly
|
|
6
|
+
* when you only need one domain.
|
|
138
7
|
*/
|
|
139
|
-
export
|
|
140
|
-
/** Props for the CardShell wrapper component. */
|
|
141
|
-
export interface CardShellProps {
|
|
142
|
-
/** Preferred slot for card content. Use this instead of children. */
|
|
143
|
-
contentSlot?: ReactNode;
|
|
144
|
-
/** @deprecated Use contentSlot instead. */
|
|
145
|
-
children?: ReactNode;
|
|
146
|
-
colSpan?: 1 | 2 | 3;
|
|
147
|
-
isStale?: boolean;
|
|
148
|
-
isRetrying?: boolean;
|
|
149
|
-
beta?: boolean;
|
|
150
|
-
disabled?: boolean;
|
|
151
|
-
style?: CSSProperties;
|
|
152
|
-
/**
|
|
153
|
-
* Optional controlled hover state (Phase 19.2 D-02 / D-03 / D-08).
|
|
154
|
-
*
|
|
155
|
-
* When provided, CardShell DOES NOT track hover internally. Grid-authoritative
|
|
156
|
-
* consumers (e.g. `MetricCardGrid` in reptime-cloud) derive hover from a
|
|
157
|
-
* single container-level `pointerover`/`pointerleave` listener and thread
|
|
158
|
-
* `hovered={id === hoveredCardId}` to each slot (D-15).
|
|
159
|
-
*
|
|
160
|
-
* When undefined (default; backward-compat), falls back to internal
|
|
161
|
-
* `useState` driven by `onMouseEnter`/`onMouseLeave`, with the legacy 180ms
|
|
162
|
-
* leave-delay REMOVED (D-08 — CSS animation handles the fade).
|
|
163
|
-
*
|
|
164
|
-
* @default undefined (uncontrolled)
|
|
165
|
-
*/
|
|
166
|
-
hovered?: boolean;
|
|
167
|
-
/**
|
|
168
|
-
* When true, renders a 2px accent ring around the card shell using box-shadow
|
|
169
|
-
* (NOT border, to avoid reflow). Used to indicate config mode is active (D-09).
|
|
170
|
-
*/
|
|
171
|
-
accentRing?: boolean;
|
|
172
|
-
onGraph?: () => void;
|
|
173
|
-
onDetails?: () => void;
|
|
174
|
-
onCustomize?: ((ref: RefObject<HTMLDivElement | null>) => void) | (() => void);
|
|
175
|
-
onRemove?: () => void;
|
|
176
|
-
onExpand?: () => void;
|
|
177
|
-
onShrink?: () => void;
|
|
178
|
-
onMove?: () => void;
|
|
179
|
-
onReplace?: () => void;
|
|
180
|
-
onNavigate?: () => void;
|
|
181
|
-
onRetry?: () => void;
|
|
182
|
-
onRefresh?: () => void;
|
|
183
|
-
onWhatsThis?: () => void;
|
|
184
|
-
enableQuickSettings?: boolean;
|
|
185
|
-
onUpdateTimeframe?: (presetId: string) => void;
|
|
186
|
-
instanceTimeframe?: string;
|
|
187
|
-
cardTitle?: string;
|
|
188
|
-
/**
|
|
189
|
-
* Controlled flip state. When undefined (default), CardShell manages flip
|
|
190
|
-
* internally via useState (backward-compat — existing consumers unchanged).
|
|
191
|
-
*
|
|
192
|
-
* When provided, the parent owns the flip state. CardShell renders the
|
|
193
|
-
* derived `effectiveFlipped = isFlipped ?? internalFlipped` for both faces
|
|
194
|
-
* and does NOT mutate internal state; instead it delegates flip transitions
|
|
195
|
-
* to `onFlipChange`.
|
|
196
|
-
*
|
|
197
|
-
* Phase 4 (PaceCard): PacePlaceholder's "Set target" CTA needs a flip trigger
|
|
198
|
-
* path outside the overflow menu; controlled prop enables this without a
|
|
199
|
-
* CardShell API break for existing consumers (MetricCard, NameCard, etc.).
|
|
200
|
-
*/
|
|
201
|
-
isFlipped?: boolean;
|
|
202
|
-
/**
|
|
203
|
-
* Fires on every flip transition request when `isFlipped` is controlled.
|
|
204
|
-
* Not called in uncontrolled mode (undefined isFlipped). The argument is the
|
|
205
|
-
* target flip state (`true` = back face requested, `false` = front face).
|
|
206
|
-
*
|
|
207
|
-
* When invoked from the back→front (handleFlipBack) path, the staged
|
|
208
|
-
* timeframe commit chain still fires before onFlipChange — consumers receive
|
|
209
|
-
* the updated timeframe via onUpdateTimeframe / onUpdateStackedTimeframes
|
|
210
|
-
* regardless of controlled or uncontrolled mode.
|
|
211
|
-
*/
|
|
212
|
-
onFlipChange?: (flipped: boolean) => void;
|
|
213
|
-
/**
|
|
214
|
-
* Custom content rendered inside the flip-back face, replacing the default
|
|
215
|
-
* <CardBack> timeframe preset grid. Use for consumer-specific quick-config
|
|
216
|
-
* panels (e.g. sparkline/status-mode toggles). When provided, fully replaces
|
|
217
|
-
* the default CardBack render. Flip mechanics (isFlipped, handleFlip,
|
|
218
|
-
* onQuickSettings wiring) are unchanged.
|
|
219
|
-
*
|
|
220
|
-
* Added FG-1 / D-01, D-02 (Phase 10.5 UAT defect sweep): eliminates
|
|
221
|
-
* sibling-peer QuickConfig mount that broke drag-ghost layout.
|
|
222
|
-
*/
|
|
223
|
-
quickConfigSlot?: ReactNode;
|
|
224
|
-
onViewAsStack?: () => void;
|
|
225
|
-
onUnstack?: () => void;
|
|
226
|
-
isStackedGroup?: boolean;
|
|
227
|
-
onUpdateStackedTimeframes?: (timeframes: string[]) => void;
|
|
228
|
-
instanceStackedTimeframes?: string[];
|
|
229
|
-
isGraphActive?: boolean;
|
|
230
|
-
isTableActive?: boolean;
|
|
231
|
-
isGraphCard?: boolean;
|
|
232
|
-
canExpand?: boolean;
|
|
233
|
-
/**
|
|
234
|
-
* Horizontal anchor (px from card's left edge) forwarded to ActionStrip.
|
|
235
|
-
*
|
|
236
|
-
* When provided, overrides ActionStrip's default `left: 50%` centered pill
|
|
237
|
-
* position. Drives the per-slot gutter-slide choreography for stack cards
|
|
238
|
-
* (Cluster W quick-260417-d5z item 3 / gutter hover slide). Undefined
|
|
239
|
-
* preserves the pre-existing centered layout.
|
|
240
|
-
*
|
|
241
|
-
* @see ActionStripProps.anchorX
|
|
242
|
-
*/
|
|
243
|
-
anchorX?: number;
|
|
244
|
-
/**
|
|
245
|
-
* Consumer-supplied overflow menu entries that CardShell concatenates into
|
|
246
|
-
* the ActionStrip `overflow` prop after the default set (settings / remove
|
|
247
|
-
* / replace / refresh) and before the footer `whats-this`.
|
|
248
|
-
*
|
|
249
|
-
* Per D-04 (variant ownership), gloss primitives stay reptime-agnostic:
|
|
250
|
-
* extensions like Move / Customize are constructed at the reptime
|
|
251
|
-
* consumer and passed in via this prop (usually sourced from
|
|
252
|
-
* `CARD_MENU_EXTENSIONS.getExtensions(cardType, baseOrder)` per AP-09).
|
|
253
|
-
*
|
|
254
|
-
* Phase 16 plan 16-06 Task 3 adds this prop; reptime adopts it for
|
|
255
|
-
* cardType-specific Move / Customize opt-in.
|
|
256
|
-
*/
|
|
257
|
-
extensionOverflow?: import('../../overlays/ActionStrip').OverflowAction[];
|
|
258
|
-
cardRef?: RefObject<HTMLDivElement | null>;
|
|
259
|
-
/**
|
|
260
|
-
* Quick 260422-e7e — When true, forces the action strip (gutter) to be hidden
|
|
261
|
-
* using its normal exit animation. Used by the grid to hide the strip the moment
|
|
262
|
-
* a resize gesture starts, without requiring hover state changes.
|
|
263
|
-
*
|
|
264
|
-
* Does not affect card data, content, or security boundaries — purely visual.
|
|
265
|
-
* @default false
|
|
266
|
-
*/
|
|
267
|
-
forceHide?: boolean;
|
|
268
|
-
/** Phase 11.2 — resize choreography phase. Drives data-resize-phase on front-face BaseBox for B-path overlay. */
|
|
269
|
-
resizePhase?: import('./useResizeChoreography').ChoreographyPhase;
|
|
270
|
-
/** Phase 11.2 — outgoing composition snapshot (B-path). Rendered above live content during 'outgoing'; fades out on 'incoming'. */
|
|
271
|
-
outgoingSnapshot?: React.ReactNode;
|
|
272
|
-
}
|
|
8
|
+
export * from './types/index';
|
|
@@ -50,20 +50,6 @@ export interface UseEdgeHoverResizeArgs {
|
|
|
50
50
|
* section boundary.
|
|
51
51
|
*/
|
|
52
52
|
maxColSpan?: 1 | 2 | 3;
|
|
53
|
-
/**
|
|
54
|
-
* @deprecated since Phase 19.2 — superseded by `forceIdle`; retained for
|
|
55
|
-
* consumer-side compat until Phase 19.2 cutover ships. The window-level
|
|
56
|
-
* pointermove self-heal ("Polish Fix #7") that used this ref has been
|
|
57
|
-
* removed (D-04 ¶2). New code should pass `forceIdle` instead.
|
|
58
|
-
*
|
|
59
|
-
* Historical note: When provided, the hook installed a window-level
|
|
60
|
-
* pointermove listener during 'dwelling' and 'handle-visible' states to
|
|
61
|
-
* detect the cursor leaving `containerRef.current`. This was fragile under
|
|
62
|
-
* cross-card sweeps — grid-driven `forceIdle` is the correct pattern.
|
|
63
|
-
*/
|
|
64
|
-
containerRef?: React.RefObject<Element | null> | {
|
|
65
|
-
current: Element | null;
|
|
66
|
-
};
|
|
67
53
|
/**
|
|
68
54
|
* Phase 19.2 D-04 — grid-driven synchronous idle reset.
|
|
69
55
|
*
|
|
@@ -141,4 +127,4 @@ export interface UseEdgeHoverResizeReturn {
|
|
|
141
127
|
* - Bug E handle pointerenter keeps zone alive on sentinel→handle crossover
|
|
142
128
|
* - Dwell timer cleanup on unmount
|
|
143
129
|
*/
|
|
144
|
-
export declare function useEdgeHoverResize({ currentColSpan, stackable, onResize, onCancel, step, gap, tuning, dwellMs, graceExitMs, enterMs, exitMs, maxColSpan,
|
|
130
|
+
export declare function useEdgeHoverResize({ currentColSpan, stackable, onResize, onCancel, step, gap, tuning, dwellMs, graceExitMs, enterMs, exitMs, maxColSpan, forceIdle, }: UseEdgeHoverResizeArgs): UseEdgeHoverResizeReturn;
|