@mks2508/mks-ui 0.6.8 → 0.8.0

package/dist/react-ui/ui/GooeyButton/gooey.css

@@ -0,0 +1,43 @@
+/* =============================================================================
+ *  GooeyButton — transparent hit area over the pill region.
+ *
+ *  The visual pill is drawn by the <GooeyMorphingSurface> primitive; this
+ *  layer is a single button that captures clicks in both open and closed
+ *  states without painting anything. All layout math comes from the
+ *  primitive's CSS custom props (--gms-pill-w, --gms-pill-h).
+ * ============================================================================= */
+
+.gbtn-host {
+	position: relative;
+	display: inline-block;
+}
+
+.gbtn-trigger {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 3;
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	padding: 0;
+	margin: 0;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	font: inherit;
+	color: inherit;
+	/* Pill-shaped focus ring. */
+	border-radius: 9999px;
+}
+
+.gbtn-trigger:focus-visible {
+	outline: 2px solid var(--ring, currentColor);
+	outline-offset: 2px;
+}
+
+.gbtn-trigger:disabled {
+	cursor: not-allowed;
+	pointer-events: none;
+}
+

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

@@ -0,0 +1,26 @@
+/**
+ * GooeyButton — clickable pill that reveals a card via a gooey SVG-filter morph.
+ *
+ * Thin ergonomic wrapper over `<GooeyMorphingSurface>`: owns open/close
+ * state (controlled or uncontrolled), toggles on click, and optionally
+ * closes on Escape / outside click.
+ *
+ * @module @mks2508/mks-ui/react/ui/GooeyButton
+ */
+import './gooey-button.css';
+import type { IGooeyButtonProps } from './GooeyButton.types';
+export * from './GooeyButton.types';
+/**
+ * A pill-shaped button that morphs into a card when opened.
+ *
+ * @example
+ * ```tsx
+ * <GooeyButton
+ *   pill={<><DownIcon /> <span>Pull origin</span></>}
+ *   card={<ProgressCard transfer={transfer} />}
+ *   onOpenChange={(open) => open && startPull()}
+ * />
+ * ```
+ */
+export declare function GooeyButton({ open: controlledOpen, defaultOpen, onOpenChange, pill, card, config, closeOnEscape, closeOnOutside, disabled, className, slots, 'aria-label': ariaLabel, }: IGooeyButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/GooeyButton/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAWH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,cAAc,qBAAqB,CAAC;AAEpC;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoB,EACpB,cAAqB,EACrB,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAoB,GAClC,EAAE,iBAAiB,2CA6EnB"}

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

@@ -0,0 +1,109 @@
+import { cn } from "../../lib/utils.js";
+import { DEFAULT_GOOEY_CONFIG } from "../../primitives/GooeyMorphingSurface/GooeyMorphingSurface.types.js";
+import { GooeyMorphingSurface } from "../../primitives/GooeyMorphingSurface/index.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import "./gooey-button.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/GooeyButton/index.tsx
+/**
+* GooeyButton — clickable pill that reveals a card via a gooey SVG-filter morph.
+*
+* Thin ergonomic wrapper over `<GooeyMorphingSurface>`: owns open/close
+* state (controlled or uncontrolled), toggles on click, and optionally
+* closes on Escape / outside click.
+*
+* @module @mks2508/mks-ui/react/ui/GooeyButton
+*/
+/**
+* A pill-shaped button that morphs into a card when opened.
+*
+* @example
+* ```tsx
+* <GooeyButton
+*   pill={<><DownIcon /> <span>Pull origin</span></>}
+*   card={<ProgressCard transfer={transfer} />}
+*   onOpenChange={(open) => open && startPull()}
+* />
+* ```
+*/
+function GooeyButton({ open: controlledOpen, defaultOpen = false, onOpenChange, pill, card, config, closeOnEscape = true, closeOnOutside = true, disabled = false, className, slots, "aria-label": ariaLabel = "Toggle" }) {
+	const [open, setOpen] = useControlledState({
+		value: controlledOpen,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const hostRef = useRef(null);
+	const hostStyle = useMemo(() => {
+		const pillWidth = config?.pillWidth ?? DEFAULT_GOOEY_CONFIG.pillWidth;
+		const pillHeight = config?.pillHeight ?? DEFAULT_GOOEY_CONFIG.pillHeight;
+		return {
+			"--gms-pill-w": `${pillWidth}px`,
+			"--gms-pill-h": `${pillHeight}px`
+		};
+	}, [config?.pillWidth, config?.pillHeight]);
+	const toggle = useCallback(() => {
+		if (disabled) return;
+		setOpen(!open);
+	}, [
+		disabled,
+		open,
+		setOpen
+	]);
+	const close = useCallback(() => setOpen(false), [setOpen]);
+	useEffect(() => {
+		if (!open || !closeOnEscape) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") close();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [
+		open,
+		closeOnEscape,
+		close
+	]);
+	useEffect(() => {
+		if (!open || !closeOnOutside) return;
+		const onPointerDown = (e) => {
+			const host = hostRef.current;
+			if (!host) return;
+			if (e.target instanceof Node && host.contains(e.target)) return;
+			close();
+		};
+		const raf = requestAnimationFrame(() => {
+			window.addEventListener("pointerdown", onPointerDown);
+		});
+		return () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("pointerdown", onPointerDown);
+		};
+	}, [
+		open,
+		closeOnOutside,
+		close
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: hostRef,
+		className: cn("gbtn-host", className),
+		style: hostStyle,
+		children: [/* @__PURE__ */ jsx(GooeyMorphingSurface, {
+			open,
+			pill,
+			card,
+			config,
+			slots
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: toggle,
+			disabled,
+			"aria-expanded": open,
+			"aria-label": ariaLabel,
+			className: "gbtn-trigger"
+		})]
+	});
+}
+
+//#endregion
+export { GooeyButton };

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

@@ -0,0 +1,23 @@
+/**
+ * Styles for MiddleTruncatePath.
+ *
+ * @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
+ */
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions of the MiddleTruncatePath component. */
+export type MiddleTruncatePathSlot = 'root' | 'start' | 'end';
+/**
+ * Default Tailwind classes for each MiddleTruncatePath slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | Container `<span>` wrapping start + end segments |
+ * | `start` | Truncatable start segments (ellipsised when narrow) |
+ * | `end` | Fixed trailing segments (always visible) |
+ */
+export declare const MiddleTruncatePathStyles: StyleSlots<MiddleTruncatePathSlot>;
+/** CVA variants for the MiddleTruncatePath root. */
+export declare const middleTruncatePathVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Tailwind classes used when the path is short enough to skip splitting. */
+export declare const MiddleTruncatePathShortRootStyles: "truncate";
+//# sourceMappingURL=MiddleTruncatePath.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiddleTruncatePath.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,0DAA0D;AAC1D,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9D;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,EAAE,UAAU,CAAC,sBAAsB,CAI9D,CAAC;AAEX,oDAAoD;AACpD,eAAO,MAAM,0BAA0B,2FAGrC,CAAC;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iCAAiC,EAAG,UAAmB,CAAC"}

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

@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.ts
+/**
+* Styles for MiddleTruncatePath.
+*
+* @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
+*/
+/**
+* Default Tailwind classes for each MiddleTruncatePath slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | Container `<span>` wrapping start + end segments |
+* | `start` | Truncatable start segments (ellipsised when narrow) |
+* | `end` | Fixed trailing segments (always visible) |
+*/
+const MiddleTruncatePathStyles = {
+	root: "flex min-w-0 overflow-hidden",
+	start: "shrink min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+	end: "shrink-0 whitespace-nowrap"
+};
+/** CVA variants for the MiddleTruncatePath root. */
+const middleTruncatePathVariants = cva(MiddleTruncatePathStyles.root, {
+	variants: {},
+	defaultVariants: {}
+});
+/** Tailwind classes used when the path is short enough to skip splitting. */
+const MiddleTruncatePathShortRootStyles = "truncate";
+
+//#endregion
+export { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles, middleTruncatePathVariants };

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

@@ -0,0 +1,43 @@
+/**
+ * Types for MiddleTruncatePath.
+ *
+ * @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
+ */
+import type { SlotOverrides } from '../../../core/types';
+import type { MiddleTruncatePathSlot } from './MiddleTruncatePath.styles';
+/**
+ * Props for MiddleTruncatePath.
+ *
+ * @see {@link MiddleTruncatePathSlot} for available slot names
+ */
+export interface IMiddleTruncatePathProps {
+    /** Full file path (e.g. `"src/components/shell/AppShell.tsx"`). */
+    path: string;
+    /** How many trailing segments to always show (parent + filename). Default 2. */
+    keepEnd?: number;
+    /** Optional CSS class merged onto the root (container). */
+    className?: string;
+    /**
+     * Optional CSS class for the start (truncatable) segment.
+     * @deprecated Prefer `slots.start` for new code.
+     */
+    startClassName?: string;
+    /**
+     * Optional CSS class for the end (fixed) segment.
+     * @deprecated Prefer `slots.end` for new code.
+     */
+    endClassName?: string;
+    /**
+     * Override default Tailwind classes per visual slot.
+     *
+     * @example
+     * ```tsx
+     * <MiddleTruncatePath
+     *   path="src/index.ts"
+     *   slots={{ start: 'text-muted-foreground/60', end: 'font-semibold' }}
+     * />
+     * ```
+     */
+    slots?: SlotOverrides<MiddleTruncatePathSlot>;
+}
+//# sourceMappingURL=MiddleTruncatePath.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiddleTruncatePath.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAE1E;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAC/C"}

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