@mks2508/mks-ui 0.6.8 → 0.8.0

package/dist/react-ui/ui/OperationCard/OperationCard.types.d.ts

@@ -0,0 +1,188 @@
+/**
+ * Type surface for the OperationCard compound.
+ *
+ * The card represents the lifecycle of a long-running operation (git
+ * push/pull, deploy, upload, migration, anything that ticks through
+ * discrete phases). It is **generic over the transfer payload** — the
+ * consumer defines what `transfer` looks like and wires it through
+ * `IOperationCardState<TTransfer>`.
+ *
+ * mks-ui owns this interface and knows nothing about domain types.
+ *
+ * @module @mks2508/mks-ui/react/ui/OperationCard
+ */
+import type { ReactNode } from 'react';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { DotMatrixAccentRow, DotMatrixColor, DotMatrixPattern } from '../../../react-ui/primitives/DotMatrix';
+/** Lifecycle status of the underlying operation. */
+export type OperationCardStatus = 'idle' | 'pending' | 'success' | 'failed' | 'cancelled';
+/**
+ * Error shape. Kept minimal on purpose — consumers surface what they
+ * want via `details`.
+ */
+export interface IOperationCardError {
+    /** One-liner shown in the header + error section. */
+    message: string;
+    /** Optional verbose body, shown inside the collapsible "Show details". */
+    details?: string;
+}
+/**
+ * One inline action surfaced in `OperationCardActions`. Used for the
+ * follow-up buttons that replace a generic Retry in specific failure /
+ * success scenarios (e.g. "Pull & push" after a non-fast-forward push,
+ * "Pull now" after a fetch detects new commits upstream).
+ */
+export interface IOperationCardAction {
+    /** Button label. */
+    label: string;
+    /** Handler fired when the button is pressed. */
+    onClick: () => void;
+    /**
+     * Recommended next step — painted as the primary action. Only one
+     * recommended action should exist per state; the rest fall back to
+     * the secondary treatment.
+     */
+    recommended?: boolean;
+    /** Visual variant. `primary` is equivalent to `recommended`. */
+    variant?: 'primary' | 'secondary' | 'ghost';
+    /** Optional icon rendered before the label. */
+    icon?: ReactNode;
+    /** Disable the button (keeps it rendered to preserve layout). */
+    disabled?: boolean;
+}
+/**
+ * Known meta fields read by the compound. Consumer can attach anything
+ * else — unknown keys are preserved and ignored by the card itself.
+ */
+export interface IOperationCardMeta extends Record<string, unknown> {
+    /** Drives the `Cancel (3s)` grace-period countdown when `pending`. */
+    remainingSeconds?: number;
+    /** DotMatrix animation pattern. Drives the visual flow per op. */
+    pattern?: DotMatrixPattern;
+    /** DotMatrix palette colour. */
+    color?: DotMatrixColor;
+    /** Bloom intensity for the DotMatrix. */
+    bloom?: boolean | number;
+    /** Number of accent cells (e.g. new commits detected). Default: 0. */
+    accentCount?: number;
+    /** Accent cells row. Default: `top`. */
+    accentRow?: DotMatrixAccentRow;
+    /** Inline actions — rendered alongside / instead of the default Retry. */
+    actions?: IOperationCardAction[];
+}
+/**
+ * View-model the compound reads from context. Derive it upstream (hook
+ * or adapter) and pass to `<OperationCardRoot state={...} />`.
+ */
+export interface IOperationCardState<TTransfer = unknown> {
+    /** Status of the operation. */
+    status: OperationCardStatus;
+    /** Progress value 0..1. Consumer derives from transfer. */
+    progress: number;
+    /** Title line (e.g. "Pull origin · main"). */
+    title: string;
+    /**
+     * Phase label (e.g. "Enumerating objects"). Swapped with SlidingText
+     * when it changes to give a continuous "work is happening" feel.
+     */
+    phaseLabel?: string;
+    /** Opaque domain payload. Passed to the Stats render-prop children. */
+    transfer?: TTransfer;
+    /** Populated when `status === 'failed'`. */
+    error?: IOperationCardError;
+    /** Narrative + behavioural metadata. See `IOperationCardMeta`. */
+    meta?: IOperationCardMeta;
+}
+export type OperationCardSlot = 'root' | 'header' | 'title' | 'phase' | 'percent' | 'visualizer' | 'stats' | 'progress' | 'actions';
+export interface IOperationCardConfig extends IBaseConfig {
+    /**
+     * Auto-close after success. If omitted, the card stays open until
+     * the consumer dismisses it.
+     */
+    autoCloseMs?: number;
+    /** Close when Escape is pressed. Default: true. */
+    closeOnEscape?: boolean;
+}
+export interface IOperationCardContext<TTransfer = unknown> {
+    state: IOperationCardState<TTransfer>;
+    onCancel?: () => void;
+    onRetry?: () => void;
+    onClose?: () => void;
+}
+export interface IOperationCardRootProps<TTransfer = unknown> {
+    /** View-model describing the operation. */
+    state: IOperationCardState<TTransfer>;
+    /** Called when the user cancels a pending operation. */
+    onCancel?: () => void;
+    /** Called when the user retries a failed operation. */
+    onRetry?: () => void;
+    /**
+     * Called when the card wants to close itself — Esc keydown,
+     * auto-close timer on success, or consumer-triggered dismissal.
+     */
+    onClose?: () => void;
+    /** Auto-close after success (ms). 0 / undefined = stay open. */
+    autoCloseMs?: number;
+    /** Close when Escape is pressed. Default: true. */
+    closeOnEscape?: boolean;
+    /** Per-slot className overrides. */
+    slots?: SlotOverrides<OperationCardSlot>;
+    /** Advanced config. */
+    config?: IOperationCardConfig;
+    /** Extra className for the root. */
+    className?: string;
+    /** Subcomponents (OperationCardHeader, OperationCardVisualizer, ...). */
+    children: ReactNode;
+}
+export interface IOperationCardHeaderProps {
+    /** Extra className appended after slot override. */
+    className?: string;
+}
+export interface IOperationCardVisualizerProps {
+    /** Rows of the DotMatrix grid. Default 6. */
+    rows?: number;
+    /** Cols of the DotMatrix grid. Default 18. */
+    cols?: number;
+    /**
+     * Pattern override. When omitted, falls back to `state.meta?.pattern`
+     * then to `wave-lr`.
+     */
+    pattern?: DotMatrixPattern;
+    /** Palette override. Falls back to `state.meta?.color`. */
+    color?: DotMatrixColor;
+    /** Bloom override. Falls back to `state.meta?.bloom`. */
+    bloom?: boolean | number;
+    /** Accent cells row placement. Falls back to `state.meta?.accentRow`. */
+    accentRow?: DotMatrixAccentRow;
+    /** Replace the default DotMatrix with custom children. */
+    children?: ReactNode;
+    /** Extra className appended after slot override. */
+    className?: string;
+}
+export interface IOperationCardStatsProps<TTransfer = unknown> {
+    /**
+     * Render-prop receiving the `transfer` payload from context state.
+     * When `transfer` is undefined, children still renders with `undefined`
+     * so the consumer can decide whether to hide zero-state or show
+     * skeletons.
+     */
+    children: (transfer: TTransfer | undefined) => ReactNode;
+    /** Extra className appended after slot override. */
+    className?: string;
+}
+export interface IOperationCardProgressProps {
+    /** Extra className appended after slot override. */
+    className?: string;
+}
+export interface IOperationCardActionsProps {
+    /**
+     * Show the "Esc to close" hint. Default: true. Consumers who implement
+     * their own keyboard hint surface can disable this.
+     */
+    showEscHint?: boolean;
+    /** Extra className appended after slot override. */
+    className?: string;
+    /** Extra children appended after the built-in buttons. */
+    children?: ReactNode;
+}
+//# sourceMappingURL=OperationCard.types.d.ts.map

package/dist/react-ui/ui/OperationCard/OperationCard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCard.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/OperationCard/OperationCard.types.ts"],"names":[],"mappings":"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"}

package/dist/react-ui/ui/OperationCard/index.d.ts

@@ -0,0 +1,45 @@
+import { useOperationCard } from './OperationCard.context';
+import { OperationCardStyles, operationCardVariants } from './OperationCard.styles';
+import type { IOperationCardRootProps } from './OperationCard.types';
+import { OperationCardHeader } from './parts/OperationCardHeader';
+import { OperationCardVisualizer } from './parts/OperationCardVisualizer';
+import { OperationCardStats } from './parts/OperationCardStats';
+import { OperationCardProgress } from './parts/OperationCardProgress';
+import { OperationCardActions } from './parts/OperationCardActions';
+export * from './OperationCard.types';
+export { OperationCardStyles, operationCardVariants };
+export { useOperationCard };
+export { OperationCardHeader, OperationCardVisualizer, OperationCardStats, OperationCardProgress, OperationCardActions, };
+/**
+ * Root of the OperationCard compound. Owns the context, drives
+ * auto-close and Escape-to-close behaviour.
+ *
+ * @example
+ * ```tsx
+ * <OperationCardRoot
+ *   state={{ status: 'pending', progress: 0.4, title: 'Pull origin · main', phaseLabel: 'Receiving objects' }}
+ *   onCancel={() => cancelPull()}
+ *   autoCloseMs={2000}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <OperationCardHeader />
+ *   <OperationCardVisualizer />
+ *   <OperationCardProgress />
+ *   <OperationCardActions />
+ * </OperationCardRoot>
+ * ```
+ */
+export declare function OperationCardRoot<TTransfer = unknown>({ state, onCancel, onRetry, onClose, autoCloseMs, closeOnEscape, slots, config: _config, className, children, }: IOperationCardRootProps<TTransfer>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Namespace helper for the more-ergonomic `<OperationCard.Header />`
+ * usage. Equivalent to importing the flat `OperationCardHeader` etc.
+ */
+export declare const OperationCard: {
+    Root: typeof OperationCardRoot;
+    Header: typeof OperationCardHeader;
+    Visualizer: typeof OperationCardVisualizer;
+    Stats: typeof OperationCardStats;
+    Progress: typeof OperationCardProgress;
+    Actions: typeof OperationCardActions;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/OperationCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/OperationCard/index.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAAyB,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EACN,mBAAmB,EACnB,qBAAqB,EACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAEX,uBAAuB,EACvB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,OAAO,EACN,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,GACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,GAAG,OAAO,EAAE,EACtD,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,aAAoB,EACpB,KAAK,EACL,MAAM,EAAE,OAAO,EACf,SAAS,EACT,QAAQ,GACR,EAAE,uBAAuB,CAAC,SAAS,CAAC,2CA0CpC;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC"}

package/dist/react-ui/ui/OperationCard/index.js

@@ -0,0 +1,118 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { OperationCardProvider, useOperationCard } from "./OperationCard.context.js";
+import { OperationCardStyles, operationCardVariants } from "./OperationCard.styles.js";
+import { OperationCardHeader } from "./parts/OperationCardHeader.js";
+import { OperationCardVisualizer } from "./parts/OperationCardVisualizer.js";
+import { OperationCardStats } from "./parts/OperationCardStats.js";
+import { OperationCardProgress } from "./parts/OperationCardProgress.js";
+import { OperationCardActions } from "./parts/OperationCardActions.js";
+import { useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/index.tsx
+/**
+* OperationCard — compound component for visualising the lifecycle
+* of a long-running operation.
+*
+* Follows the mks-ui canonical compound pattern (strict context, flat
+* exports, `useControlledState` where applicable, slots via `StyleSlots`
+* + per-slot className overrides). Subcomponents read the view-model
+* from context so consumers compose whatever they want inside:
+*
+* ```tsx
+* <OperationCardRoot state={state} onCancel={...} autoCloseMs={2000}>
+*   <OperationCardHeader />
+*   <OperationCardVisualizer />
+*   <OperationCardStats>
+*     {(transfer) => (
+*       <>
+*         <StatCell label="Received" value={transfer?.receivedBytes ?? 0} />
+*         ...
+*       </>
+*     )}
+*   </OperationCardStats>
+*   <OperationCardProgress />
+*   <OperationCardActions />
+* </OperationCardRoot>
+* ```
+*
+* A namespace helper is also exported so consumers can pick the
+* more-ergonomic `<OperationCard.Header />` style if they prefer.
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+/**
+* Root of the OperationCard compound. Owns the context, drives
+* auto-close and Escape-to-close behaviour.
+*
+* @example
+* ```tsx
+* <OperationCardRoot
+*   state={{ status: 'pending', progress: 0.4, title: 'Pull origin · main', phaseLabel: 'Receiving objects' }}
+*   onCancel={() => cancelPull()}
+*   autoCloseMs={2000}
+*   onClose={() => setOpen(false)}
+* >
+*   <OperationCardHeader />
+*   <OperationCardVisualizer />
+*   <OperationCardProgress />
+*   <OperationCardActions />
+* </OperationCardRoot>
+* ```
+*/
+function OperationCardRoot({ state, onCancel, onRetry, onClose, autoCloseMs, closeOnEscape = true, slots, config: _config, className, children }) {
+	useEffect(() => {
+		if (state.status !== "success" || !autoCloseMs || autoCloseMs <= 0) return;
+		if (!onClose) return;
+		const id = window.setTimeout(onClose, autoCloseMs);
+		return () => window.clearTimeout(id);
+	}, [
+		state.status,
+		autoCloseMs,
+		onClose
+	]);
+	useEffect(() => {
+		if (!closeOnEscape || !onClose) return;
+		const handler = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [closeOnEscape, onClose]);
+	return /* @__PURE__ */ jsx(OperationCardProvider, {
+		value: useMemo(() => ({
+			state,
+			onCancel,
+			onRetry,
+			onClose
+		}), [
+			state,
+			onCancel,
+			onRetry,
+			onClose
+		]),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "operation-card",
+			"data-status": state.status,
+			className: cn(operationCardVariants({ status: state.status }), slots?.root, className),
+			children
+		})
+	});
+}
+/**
+* Namespace helper for the more-ergonomic `<OperationCard.Header />`
+* usage. Equivalent to importing the flat `OperationCardHeader` etc.
+*/
+const OperationCard = {
+	Root: OperationCardRoot,
+	Header: OperationCardHeader,
+	Visualizer: OperationCardVisualizer,
+	Stats: OperationCardStats,
+	Progress: OperationCardProgress,
+	Actions: OperationCardActions
+};
+
+//#endregion
+export { OperationCard, OperationCardRoot };

package/dist/react-ui/ui/OperationCard/parts/OperationCardActions.d.ts

@@ -0,0 +1,3 @@
+import type { IOperationCardActionsProps } from '../OperationCard.types';
+export declare function OperationCardActions({ showEscHint, className, children, }: IOperationCardActionsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationCardActions.d.ts.map

package/dist/react-ui/ui/OperationCard/parts/OperationCardActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCardActions.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/ui/OperationCard/parts/OperationCardActions.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAEX,0BAA0B,EAC1B,MAAM,wBAAwB,CAAC;AAqBhC,wBAAgB,oBAAoB,CAAC,EACpC,WAAkB,EAClB,SAAS,EACT,QAAQ,GACR,EAAE,0BAA0B,2CAiE5B"}

package/dist/react-ui/ui/OperationCard/parts/OperationCardActions.js

@@ -0,0 +1,86 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useOperationCard } from "../OperationCard.context.js";
+import { OperationCardStyles } from "../OperationCard.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/parts/OperationCardActions.tsx
+/**
+* OperationCardActions — footer row with inline meta actions + Cancel /
+* Retry + Esc hint.
+*
+* Rendering rules:
+*  - `state.meta.actions[]` win. They render in order; `recommended`
+*    (or `variant: 'primary'`) actions use the primary treatment.
+*  - `status='pending'` adds a Cancel button. If
+*    `state.meta.remainingSeconds` is set, the label shows the live
+*    countdown ("Cancel (3s)").
+*  - `status='failed'` adds a default Retry button **only** when no
+*    `meta.actions` are provided — scenario-specific actions replace it
+*    (e.g. "Pull & push" after a non-fast-forward push).
+*  - `children` appends custom buttons after the built-ins.
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+/** Resolve the visual variant for an action button. @internal */
+function variantFor(a) {
+	if (a.variant) return a.variant;
+	if (a.recommended) return "primary";
+	return "secondary";
+}
+const BTN_BASE = "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:pointer-events-none disabled:opacity-50";
+const BTN_VARIANT = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+	secondary: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+	ghost: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+};
+function OperationCardActions({ showEscHint = true, className, children }) {
+	const { state, onCancel, onRetry } = useOperationCard();
+	const { status, meta } = state;
+	const pending = status === "pending";
+	const failed = status === "failed";
+	const secs = meta?.remainingSeconds;
+	const hasCountdown = pending && typeof secs === "number" && secs > 0;
+	const metaActions = meta?.actions ?? [];
+	const hasMetaActions = metaActions.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "operation-card-actions",
+		className: cn(OperationCardStyles.actions, className),
+		children: [showEscHint ? /* @__PURE__ */ jsx("span", {
+			className: "text-[10px] uppercase tracking-wider text-muted-foreground",
+			children: "Esc to close"
+		}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				children,
+				metaActions.map((action, i) => {
+					const v = variantFor(action);
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: action.onClick,
+						disabled: action.disabled,
+						className: cn(BTN_BASE, BTN_VARIANT[v]),
+						children: [action.icon, /* @__PURE__ */ jsx("span", { children: action.label })]
+					}, `${action.label}-${i}`);
+				}),
+				failed && !hasMetaActions && onRetry && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onRetry,
+					className: cn(BTN_BASE, BTN_VARIANT.secondary),
+					children: "Retry"
+				}),
+				pending && onCancel && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onCancel,
+					className: cn(BTN_BASE, BTN_VARIANT.secondary),
+					"aria-label": "Cancel operation",
+					children: hasCountdown ? `Cancel (${secs}s)` : "Cancel"
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { OperationCardActions };

package/dist/react-ui/ui/OperationCard/parts/OperationCardHeader.d.ts

@@ -0,0 +1,14 @@
+import type { IOperationCardHeaderProps } from '../OperationCard.types';
+/**
+ * Header row of the operation card.
+ *
+ * @example
+ * ```tsx
+ * <OperationCardRoot state={state}>
+ *   <OperationCardHeader />
+ *   ...
+ * </OperationCardRoot>
+ * ```
+ */
+export declare function OperationCardHeader({ className }: IOperationCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationCardHeader.d.ts.map

package/dist/react-ui/ui/OperationCard/parts/OperationCardHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCardHeader.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/ui/OperationCard/parts/OperationCardHeader.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAiC3E"}

package/dist/react-ui/ui/OperationCard/parts/OperationCardHeader.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { CountingNumber } from "../../../primitives/CountingNumber/index.js";
+import { SlidingText } from "../../../primitives/waapi/SlidingText/index.js";
+import { useOperationCard } from "../OperationCard.context.js";
+import { OperationCardStyles } from "../OperationCard.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/parts/OperationCardHeader.tsx
+/**
+* OperationCardHeader — title + animated phase label + percent badge.
+*
+* Reads state from OperationCardContext. Uses SlidingText to crossfade
+* phase labels and CountingNumber to animate the percent badge.
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+/**
+* Header row of the operation card.
+*
+* @example
+* ```tsx
+* <OperationCardRoot state={state}>
+*   <OperationCardHeader />
+*   ...
+* </OperationCardRoot>
+* ```
+*/
+function OperationCardHeader({ className }) {
+	const { state } = useOperationCard();
+	const percent = Math.round(state.progress * 100);
+	const hasPhase = Boolean(state.phaseLabel);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "operation-card-header",
+		className: cn(OperationCardStyles.header, className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: OperationCardStyles.title,
+				children: state.title
+			}), hasPhase && /* @__PURE__ */ jsx("div", {
+				className: OperationCardStyles.phase,
+				children: /* @__PURE__ */ jsx(SlidingText, {
+					text: state.phaseLabel ?? "",
+					mode: "word",
+					direction: "vertical",
+					duration: 220,
+					staggerDelay: 12,
+					blur: true
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			"data-slot": "operation-card-percent",
+			className: OperationCardStyles.percent,
+			children: [/* @__PURE__ */ jsx(CountingNumber, { number: percent }), "%"]
+		})]
+	});
+}
+
+//#endregion
+export { OperationCardHeader };

package/dist/react-ui/ui/OperationCard/parts/OperationCardProgress.d.ts

@@ -0,0 +1,3 @@
+import type { IOperationCardProgressProps } from '../OperationCard.types';
+export declare function OperationCardProgress({ className, }: IOperationCardProgressProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationCardProgress.d.ts.map

package/dist/react-ui/ui/OperationCard/parts/OperationCardProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCardProgress.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/ui/OperationCard/parts/OperationCardProgress.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAE1E,wBAAgB,qBAAqB,CAAC,EACrC,SAAS,GACT,EAAE,2BAA2B,2CAgC7B"}

package/dist/react-ui/ui/OperationCard/parts/OperationCardProgress.js

@@ -0,0 +1,37 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useOperationCard } from "../OperationCard.context.js";
+import { OperationCardStyles } from "../OperationCard.styles.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/parts/OperationCardProgress.tsx
+/**
+* OperationCardProgress — thin progress bar driven by state.progress.
+*
+* Plain CSS transition on width. Uses the `destructive` token when the
+* operation failed so the bar turns red without changing layout.
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+function OperationCardProgress({ className }) {
+	const { state } = useOperationCard();
+	const pct = Math.round(Math.min(1, Math.max(0, state.progress)) * 100);
+	const fillClass = state.status === "failed" ? "bg-destructive" : state.status === "cancelled" ? "bg-foreground/40" : state.status === "success" ? "bg-foreground" : "bg-foreground/80";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "operation-card-progress",
+		"data-status": state.status,
+		className: cn(OperationCardStyles.progress, className),
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": pct,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("h-full transition-[width] duration-300 ease-out", fillClass),
+			style: { width: `${pct}%` }
+		})
+	});
+}
+
+//#endregion
+export { OperationCardProgress };

package/dist/react-ui/ui/OperationCard/parts/OperationCardStats.d.ts

@@ -0,0 +1,3 @@
+import type { IOperationCardStatsProps } from '../OperationCard.types';
+export declare function OperationCardStats<TTransfer = unknown>({ children, className, }: IOperationCardStatsProps<TTransfer>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationCardStats.d.ts.map

package/dist/react-ui/ui/OperationCard/parts/OperationCardStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCardStats.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/ui/OperationCard/parts/OperationCardStats.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,wBAAgB,kBAAkB,CAAC,SAAS,GAAG,OAAO,EAAE,EACvD,QAAQ,EACR,SAAS,GACT,EAAE,wBAAwB,CAAC,SAAS,CAAC,2CAWrC"}

package/dist/react-ui/ui/OperationCard/parts/OperationCardStats.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useOperationCard } from "../OperationCard.context.js";
+import { OperationCardStyles } from "../OperationCard.styles.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/parts/OperationCardStats.tsx
+/**
+* OperationCardStats — render prop that receives the transfer payload.
+*
+* The compound is generic in `TTransfer`; the consumer owns the layout
+* and the individual cells. Typical use:
+*
+* ```tsx
+* <OperationCardStats>
+*   {(t: ITransferProgress) => (
+*     <>
+*       <StatCell label="Objects">
+*         <SlidingNumber value={t.receivedObjects} />
+*         {' / '}
+*         <SlidingNumber value={t.totalObjects} />
+*       </StatCell>
+*       ...
+*     </>
+*   )}
+* </OperationCardStats>
+* ```
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+function OperationCardStats({ children, className }) {
+	const { state } = useOperationCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "operation-card-stats",
+		className: cn(OperationCardStyles.stats, className),
+		children: children(state.transfer)
+	});
+}
+
+//#endregion
+export { OperationCardStats };

package/dist/react-ui/ui/OperationCard/parts/OperationCardVisualizer.d.ts

@@ -0,0 +1,3 @@
+import type { IOperationCardVisualizerProps } from '../OperationCard.types';
+export declare function OperationCardVisualizer({ rows, cols, pattern, color, bloom, accentRow, children, className, }: IOperationCardVisualizerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationCardVisualizer.d.ts.map

package/dist/react-ui/ui/OperationCard/parts/OperationCardVisualizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCardVisualizer.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/ui/OperationCard/parts/OperationCardVisualizer.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EACX,6BAA6B,EAE7B,MAAM,wBAAwB,CAAC;AAOhC,wBAAgB,uBAAuB,CAAC,EACvC,IAAQ,EACR,IAAS,EACT,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,GACT,EAAE,6BAA6B,2CA8B/B"}