@mks2508/mks-ui 0.7.0 → 0.8.1

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

@@ -0,0 +1,33 @@
+/**
+ * MiddleTruncatePath — CSS-only middle truncation for file paths.
+ *
+ * Splits a path into a truncatable start and a fixed end
+ * (`parent/filename` by default). When space is limited, the start
+ * truncates with ellipsis while the end (the most identifiable part)
+ * always remains visible.
+ *
+ * Pure CSS flex — no JS measurement, no ResizeObserver.
+ *
+ * Ported from mks-mission-control.
+ *
+ * @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
+ */
+import type { IMiddleTruncatePathProps } from './MiddleTruncatePath.types';
+/**
+ * Middle-truncates a file path, keeping the end segments visible.
+ *
+ * @param slots - Override Tailwind classes per visual slot
+ *
+ * @example
+ * ```tsx
+ * // Full width:   src/components/shell/AppShell.tsx
+ * // Constrained:  src/comp…/shell/AppShell.tsx
+ * // Minimum:      …/shell/AppShell.tsx
+ * <MiddleTruncatePath path="src/components/shell/AppShell.tsx" />
+ * ```
+ */
+export declare const MiddleTruncatePath: import("react").MemoExoticComponent<({ path, keepEnd, className, startClassName, endClassName, slots, }: IMiddleTruncatePathProps) => import("react/jsx-runtime").JSX.Element>;
+export { MiddleTruncatePathStyles, middleTruncatePathVariants, } from './MiddleTruncatePath.styles';
+export type { MiddleTruncatePathSlot } from './MiddleTruncatePath.styles';
+export type { IMiddleTruncatePathProps } from './MiddleTruncatePath.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncatePath/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAWH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE3E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,2GAO5B,wBAAwB,6CAqCzB,CAAC;AAEH,OAAO,EACL,wBAAwB,EACxB,0BAA0B,GAC3B,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

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

@@ -0,0 +1,60 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles, middleTruncatePathVariants } from "./MiddleTruncatePath.styles.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/MiddleTruncatePath/index.tsx
+/**
+* MiddleTruncatePath — CSS-only middle truncation for file paths.
+*
+* Splits a path into a truncatable start and a fixed end
+* (`parent/filename` by default). When space is limited, the start
+* truncates with ellipsis while the end (the most identifiable part)
+* always remains visible.
+*
+* Pure CSS flex — no JS measurement, no ResizeObserver.
+*
+* Ported from mks-mission-control.
+*
+* @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
+*/
+/**
+* Middle-truncates a file path, keeping the end segments visible.
+*
+* @param slots - Override Tailwind classes per visual slot
+*
+* @example
+* ```tsx
+* // Full width:   src/components/shell/AppShell.tsx
+* // Constrained:  src/comp…/shell/AppShell.tsx
+* // Minimum:      …/shell/AppShell.tsx
+* <MiddleTruncatePath path="src/components/shell/AppShell.tsx" />
+* ```
+*/
+const MiddleTruncatePath = memo(function MiddleTruncatePath({ path, keepEnd = 2, className, startClassName, endClassName, slots }) {
+	const segments = path.split("/");
+	if (segments.length <= keepEnd) return /* @__PURE__ */ jsx("span", {
+		className: cn(MiddleTruncatePathShortRootStyles, slots?.root, className),
+		title: path,
+		children: path
+	});
+	const endSegments = segments.slice(-keepEnd);
+	const start = segments.slice(0, -keepEnd).join("/") + "/";
+	const end = endSegments.join("/");
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(middleTruncatePathVariants(), slots?.root, className),
+		title: path,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn(MiddleTruncatePathStyles.start, slots?.start, startClassName),
+			children: start
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn(MiddleTruncatePathStyles.end, slots?.end, endClassName),
+			children: end
+		})]
+	});
+});
+
+//#endregion
+export { MiddleTruncatePath };

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

@@ -0,0 +1,17 @@
+import type { IOperationCardContext } from './OperationCard.types';
+declare const OperationCardProvider: ({ value, children, }: {
+    value: IOperationCardContext<unknown>;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+/**
+ * Typed hook for children to access the current card state. The
+ * generic parameter should match the `TTransfer` used on the Root.
+ *
+ * @example
+ * ```tsx
+ * const { state } = useOperationCard<ITransferProgress>();
+ * ```
+ */
+declare function useOperationCard<TTransfer = unknown>(): IOperationCardContext<TTransfer>;
+export { OperationCardProvider, useOperationCard };
+//# sourceMappingURL=OperationCard.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCard.context.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/OperationCard/OperationCard.context.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,QAAA,MAAO,qBAAqB;;;uBAC6C,CAAC;AAE1E;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAC,SAAS,GAAG,OAAO,KAAK,qBAAqB,CAAC,SAAS,CAAC,CAEjF;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,27 @@
+'use client';
+
+import { getStrictContext } from "../../lib/get-strict-context.js";
+
+//#region src/react-ui/ui/OperationCard/OperationCard.context.ts
+/**
+* Strict context for OperationCard compound. Children throw if used
+* outside a `<OperationCardRoot>`.
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+const [OperationCardProvider, useOperationCardUntyped] = getStrictContext("OperationCardContext");
+/**
+* Typed hook for children to access the current card state. The
+* generic parameter should match the `TTransfer` used on the Root.
+*
+* @example
+* ```tsx
+* const { state } = useOperationCard<ITransferProgress>();
+* ```
+*/
+function useOperationCard() {
+	return useOperationCardUntyped();
+}
+
+//#endregion
+export { OperationCardProvider, useOperationCard };

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

@@ -0,0 +1,19 @@
+/**
+ * Styles for OperationCard compound — StyleSlots + CVA root variants.
+ *
+ * Theme tokens only. Never hardcoded colors (mks-ui RULE 0).
+ *
+ * @module @mks2508/mks-ui/react/ui/OperationCard
+ */
+import type { StyleSlots } from '@/core/types';
+import type { OperationCardSlot } from './OperationCard.types';
+/** Per-slot base classes. CVA applies only to `root`. */
+export declare const OperationCardStyles: StyleSlots<OperationCardSlot>;
+/**
+ * Root variants — driven by the operation status. Lets consumers
+ * tweak spacing or visual emphasis per status via the CVA output.
+ */
+export declare const operationCardVariants: (props?: ({
+    status?: "idle" | "success" | "failed" | "cancelled" | "pending" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=OperationCard.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/OperationCard/OperationCard.styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,yDAAyD;AACzD,eAAO,MAAM,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAUpD,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;8EAahC,CAAC"}

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

@@ -0,0 +1,39 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/OperationCard/OperationCard.styles.ts
+/**
+* Styles for OperationCard compound — StyleSlots + CVA root variants.
+*
+* Theme tokens only. Never hardcoded colors (mks-ui RULE 0).
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+/** Per-slot base classes. CVA applies only to `root`. */
+const OperationCardStyles = {
+	root: "flex flex-col gap-3 p-4 text-card-foreground",
+	header: "flex items-baseline justify-between gap-3",
+	title: "truncate text-sm font-semibold",
+	phase: "truncate text-[11px] text-muted-foreground",
+	percent: "shrink-0 rounded-full bg-muted px-2 py-0.5 font-mono text-[11px]",
+	visualizer: "",
+	stats: "grid grid-cols-3 gap-3 text-xs",
+	progress: "h-1 overflow-hidden rounded-full bg-muted",
+	actions: "flex items-center justify-between gap-2"
+};
+/**
+* Root variants — driven by the operation status. Lets consumers
+* tweak spacing or visual emphasis per status via the CVA output.
+*/
+const operationCardVariants = cva(OperationCardStyles.root, {
+	variants: { status: {
+		idle: "",
+		pending: "",
+		success: "",
+		failed: "",
+		cancelled: "opacity-70"
+	} },
+	defaultVariants: { status: "idle" }
+});
+
+//#endregion
+export { OperationCardStyles, operationCardVariants };

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":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EACX,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,MAAM,iCAAiC,CAAC;AAMzC,oDAAoD;AACpD,MAAM,MAAM,mBAAmB,GAC5B,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,CAAC;AAEf;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IACnC,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACpC,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC5C,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAmB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kEAAkE;IAClE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,gCAAgC;IAChC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACjC;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB,CAAC,SAAS,GAAG,OAAO;IACvD,+BAA+B;IAC/B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,kEAAkE;IAClE,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC1B;AAMD,MAAM,MAAM,iBAAiB,GAC1B,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,GACP,SAAS,GACT,YAAY,GACZ,OAAO,GACP,UAAU,GACV,SAAS,CAAC;AAEb,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACxD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD,MAAM,WAAW,qBAAqB,CAAC,SAAS,GAAG,OAAO;IACzD,KAAK,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAMD,MAAM,WAAW,uBAAuB,CAAC,SAAS,GAAG,OAAO;IAC3D,2CAA2C;IAC3C,KAAK,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACtC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oCAAoC;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzC,uBAAuB;IACvB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACzC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,6BAA6B;IAC7C,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,yEAAyE;IACzE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,wBAAwB,CAAC,SAAS,GAAG,OAAO;IAC5D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,KAAK,SAAS,CAAC;IACzD,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,2BAA2B;IAC3C,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,0BAA0B;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB"}

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"}