@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/ui/diff-viewer.js

@@ -0,0 +1,461 @@
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../lib/utils.js";
+import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
+import { useId, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { diffLines } from "diff";
+import parseDiff from "parse-diff";
+//#region src/components/ui/diff-viewer.tsx
+var diff_viewer_exports = /* @__PURE__ */ __exportAll({
+	DiffViewer: () => DiffViewer,
+	DiffViewerContent: () => DiffViewerContent,
+	DiffViewerFile: () => DiffViewerFile,
+	DiffViewerFileBadge: () => DiffViewerFileBadge,
+	DiffViewerHeader: () => DiffViewerHeader,
+	DiffViewerLine: () => DiffViewerLine,
+	DiffViewerSplitLine: () => DiffViewerSplitLine,
+	DiffViewerStats: () => DiffViewerStats,
+	computeDiff: () => computeDiff,
+	diffLineTextVariants: () => diffLineTextVariants,
+	diffLineVariants: () => diffLineVariants,
+	diffViewerVariants: () => diffViewerVariants,
+	parsePatch: () => parsePatch
+});
+function parsePatch(patch) {
+	return parseDiff(patch).map((file) => {
+		const hunks = file.chunks.map((chunk) => {
+			const lines = [];
+			for (const change of chunk.changes) if (change.content.startsWith("\\")) lines.push({
+				type: "marker",
+				content: change.content
+			});
+			else if (change.type === "add") lines.push({
+				type: "add",
+				content: change.content.slice(1),
+				newLineNumber: change.ln
+			});
+			else if (change.type === "del") lines.push({
+				type: "del",
+				content: change.content.slice(1),
+				oldLineNumber: change.ln
+			});
+			else lines.push({
+				type: "normal",
+				content: change.content.slice(1),
+				oldLineNumber: change.ln1,
+				newLineNumber: change.ln2
+			});
+			return {
+				header: chunk.content,
+				lines
+			};
+		});
+		const lines = hunks.flatMap((hunk) => hunk.lines);
+		let additions = 0;
+		let deletions = 0;
+		for (const line of lines) {
+			if (line.type === "add") additions++;
+			if (line.type === "del") deletions++;
+		}
+		return {
+			oldName: file.from,
+			newName: file.to,
+			lines,
+			hunks,
+			additions,
+			deletions
+		};
+	});
+}
+function computeDiff(oldContent, newContent) {
+	const changes = diffLines(oldContent, newContent);
+	const lines = [];
+	let oldLine = 1;
+	let newLine = 1;
+	let additions = 0;
+	let deletions = 0;
+	for (const change of changes) {
+		const contentLines = change.value.replace(/\n$/, "").split("\n");
+		for (const content of contentLines) if (change.added) {
+			additions++;
+			lines.push({
+				type: "add",
+				content,
+				newLineNumber: newLine++
+			});
+		} else if (change.removed) {
+			deletions++;
+			lines.push({
+				type: "del",
+				content,
+				oldLineNumber: oldLine++
+			});
+		} else lines.push({
+			type: "normal",
+			content,
+			oldLineNumber: oldLine++,
+			newLineNumber: newLine++
+		});
+	}
+	const oldLines = lines.filter((line) => line.type !== "add").length;
+	const newLines = lines.filter((line) => line.type !== "del").length;
+	return {
+		lines,
+		hunks: [{
+			header: `@@ -${oldLines === 0 ? 0 : 1},${oldLines} +${newLines === 0 ? 0 : 1},${newLines} @@`,
+			lines
+		}],
+		additions,
+		deletions
+	};
+}
+function formatDiffLine(line) {
+	if (line.type === "marker") return line.content;
+	return `${line.type === "add" ? "+" : line.type === "del" ? "-" : " "}${line.content}`;
+}
+function formatDiffFileName(name, prefix) {
+	return name === "/dev/null" ? name : `${prefix}/${name ?? "file"}`;
+}
+function formatUnifiedDiff(file) {
+	return [
+		`--- ${formatDiffFileName(file.oldName, "a")}`,
+		`+++ ${formatDiffFileName(file.newName, "b")}`,
+		...file.hunks.flatMap((hunk) => [hunk.header, ...hunk.lines.map(formatDiffLine)])
+	].join("\n");
+}
+function pairLinesForSplit(lines) {
+	const pairs = [];
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		if (line.type === "normal") {
+			pairs.push({
+				left: line,
+				right: line
+			});
+			i++;
+		} else if (line.type === "del") {
+			const deletions = [];
+			while (i < lines.length && lines[i].type === "del") {
+				deletions.push(lines[i]);
+				i++;
+			}
+			const additions = [];
+			while (i < lines.length && lines[i].type === "add") {
+				additions.push(lines[i]);
+				i++;
+			}
+			const maxLen = Math.max(deletions.length, additions.length);
+			for (let j = 0; j < maxLen; j++) pairs.push({
+				left: deletions[j] ?? null,
+				right: additions[j] ?? null
+			});
+		} else {
+			pairs.push({
+				left: null,
+				right: line
+			});
+			i++;
+		}
+	}
+	return pairs;
+}
+const diffViewerVariants = cva("aui-diff-viewer overflow-hidden font-mono leading-relaxed [font-variant-ligatures:none]", {
+	variants: {
+		variant: {
+			default: "border-foreground/10 bg-foreground/[0.025] dark:bg-foreground/[0.04] border",
+			ghost: "bg-transparent",
+			muted: "border-foreground/10 bg-foreground/[0.06] dark:bg-foreground/[0.08] border"
+		},
+		size: {
+			sm: "text-[11px]",
+			default: "text-[12.5px]",
+			lg: "text-[13.5px]"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const diffLineVariants = cva("flex", {
+	variants: { type: {
+		add: "bg-[var(--diff-add-bg,var(--_diff-add-bg))] shadow-[inset_2px_0_0_var(--diff-add-rule,var(--color-green-500))] [--_diff-add-bg:color-mix(in_oklab,var(--color-green-500)_8%,transparent)] dark:[--_diff-add-bg:color-mix(in_oklab,var(--color-green-500)_15%,transparent)]",
+		del: "bg-[var(--diff-del-bg,var(--_diff-del-bg))] shadow-[inset_2px_0_0_var(--diff-del-rule,var(--color-red-500))] [--_diff-del-bg:color-mix(in_oklab,var(--color-red-500)_8%,transparent)] dark:[--_diff-del-bg:color-mix(in_oklab,var(--color-red-500)_15%,transparent)]",
+		normal: "",
+		marker: "",
+		empty: ""
+	} },
+	defaultVariants: { type: "normal" }
+});
+const diffLineTextVariants = cva("", {
+	variants: { type: {
+		add: "text-[var(--diff-add-text,var(--color-green-600))] dark:text-[var(--diff-add-text-dark,var(--color-green-400))]",
+		del: "text-[var(--diff-del-text,var(--color-red-600))] dark:text-[var(--diff-del-text-dark,var(--color-red-400))]",
+		normal: "",
+		marker: "",
+		empty: ""
+	} },
+	defaultVariants: { type: "normal" }
+});
+function getFileExtension(filename) {
+	const ext = filename?.split(".").pop()?.toLowerCase();
+	if (!ext) return "";
+	return ext.toUpperCase();
+}
+function DiffViewerFileBadge({ filename }) {
+	const ext = getFileExtension(filename);
+	if (!ext) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "diff-viewer-file-badge",
+		className: "border-foreground/15 text-muted-foreground inline-flex h-4 shrink-0 items-center border px-1 text-[9px] leading-none font-medium tracking-wide",
+		children: ext
+	});
+}
+function DiffViewerStats({ additions, deletions }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "diff-viewer-stats",
+		className: "flex shrink-0 gap-1.5 text-[11px] tabular-nums",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "text-success",
+			children: ["+", additions]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "text-destructive",
+			children: ["−", deletions]
+		})]
+	});
+}
+function DiffViewerFile({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "diff-viewer-file",
+		className: cn(className),
+		...props
+	});
+}
+function DiffViewerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "diff-viewer-content",
+		className: cn("overflow-x-auto", className),
+		...props
+	});
+}
+function DiffViewerHeader({ oldName, newName, additions = 0, deletions = 0, showIcon = false, showStats = true, copyText, copyable = true, className, ...props }) {
+	const { isCopied, copyToClipboard } = useCopyToClipboard({ copiedDuration: 1500 });
+	if (!oldName && !newName) return null;
+	const displayName = newName || oldName;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "diff-viewer-header",
+		className: cn("border-foreground/10 text-muted-foreground flex h-9 items-center gap-2 border-b ps-3.5 pe-3 text-[11px] font-medium tracking-wide", className),
+		...props,
+		children: [
+			showIcon && /* @__PURE__ */ jsx(DiffViewerFileBadge, { filename: displayName }),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: oldName && newName && oldName !== newName ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: oldName
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: " → "
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-foreground/80",
+						children: newName
+					})
+				] }) : displayName
+			}),
+			showStats && (additions > 0 || deletions > 0) && /* @__PURE__ */ jsx(DiffViewerStats, {
+				additions,
+				deletions
+			}),
+			copyable && copyText && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Copy diff of ${displayName}`,
+				onClick: () => copyToClipboard(copyText),
+				className: "text-muted-foreground hover:text-foreground grid size-6 shrink-0 place-items-center rounded-sm transition-colors motion-reduce:transition-none",
+				children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5" })
+			})
+		]
+	});
+}
+function DiffViewerLine({ line, showLineNumbers = true, className, ...props }) {
+	const indicator = line.type === "add" ? "+" : line.type === "del" ? "-" : line.type === "marker" ? "" : " ";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "diff-viewer-line",
+		"data-type": line.type,
+		className: cn(diffLineVariants({ type: line.type }), className),
+		...props,
+		children: [
+			showLineNumbers && /* @__PURE__ */ jsx("span", {
+				"data-slot": "diff-viewer-line-number",
+				className: "text-muted-foreground w-10 shrink-0 px-2 text-end tabular-nums select-none",
+				children: line.type === "marker" ? "" : line.type === "del" ? line.oldLineNumber : line.type === "add" ? line.newLineNumber : line.oldLineNumber
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "diff-viewer-indicator",
+				className: cn("w-4 shrink-0 text-center select-none", diffLineTextVariants({ type: line.type })),
+				children: indicator
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "diff-viewer-content",
+				className: "flex-1 pe-3.5 break-all whitespace-pre-wrap",
+				children: line.content
+			})
+		]
+	});
+}
+function DiffViewerSplitLine({ pair, showLineNumbers = true, className, ...props }) {
+	const { left, right } = pair;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "diff-viewer-split-line",
+		className: cn("flex", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "diff-viewer-split-left",
+			"data-type": left?.type ?? "empty",
+			className: cn("border-foreground/10 flex w-1/2 border-e", diffLineVariants({ type: left?.type ?? "empty" })),
+			children: [
+				showLineNumbers && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground w-10 shrink-0 px-2 text-end tabular-nums select-none",
+					children: left?.oldLineNumber ?? ""
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("w-4 shrink-0 text-center select-none", diffLineTextVariants({ type: left?.type ?? "empty" })),
+					children: left ? left.type === "del" ? "-" : left.type === "marker" ? "" : " " : ""
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 pe-3.5 break-all whitespace-pre-wrap",
+					children: left?.content ?? ""
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "diff-viewer-split-right",
+			"data-type": right?.type ?? "empty",
+			className: cn("flex w-1/2", diffLineVariants({ type: right?.type ?? "empty" })),
+			children: [
+				showLineNumbers && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground w-10 shrink-0 px-2 text-end tabular-nums select-none",
+					children: right?.newLineNumber ?? ""
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("w-4 shrink-0 text-center select-none", diffLineTextVariants({ type: right?.type ?? "empty" })),
+					children: right ? right.type === "add" ? "+" : right.type === "marker" ? "" : " " : ""
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 pe-3.5 break-all whitespace-pre-wrap",
+					children: right?.content ?? ""
+				})
+			]
+		})]
+	});
+}
+function DiffViewerFileContent({ file, splitLinePairs, viewMode, showLineNumbers, showIcon, showStats, copyable, maxCollapsedLines }) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const contentId = useId();
+	const renderedLineCount = viewMode === "split" ? splitLinePairs.length : file.lines.length;
+	const isCollapsible = maxCollapsedLines !== void 0 && maxCollapsedLines >= 0 && renderedLineCount > maxCollapsedLines;
+	const isCollapsed = isCollapsible && !isExpanded;
+	const visibleLineCount = isCollapsed ? maxCollapsedLines : renderedLineCount;
+	return /* @__PURE__ */ jsxs(DiffViewerFile, {
+		className: "border-foreground/10 [contain-intrinsic-size:auto_240px] [content-visibility:auto] not-first:border-t",
+		children: [
+			/* @__PURE__ */ jsx(DiffViewerHeader, {
+				oldName: file.oldName,
+				newName: file.newName,
+				additions: file.additions,
+				deletions: file.deletions,
+				showIcon,
+				showStats,
+				copyText: formatUnifiedDiff(file),
+				copyable
+			}),
+			/* @__PURE__ */ jsx(DiffViewerContent, {
+				id: contentId,
+				className: "py-2",
+				children: viewMode === "split" ? splitLinePairs.slice(0, visibleLineCount).map((pair, pairIndex) => /* @__PURE__ */ jsx(DiffViewerSplitLine, {
+					pair,
+					showLineNumbers
+				}, pairIndex)) : file.lines.slice(0, visibleLineCount).map((line, lineIndex) => /* @__PURE__ */ jsx(DiffViewerLine, {
+					line,
+					showLineNumbers
+				}, lineIndex))
+			}),
+			isCollapsible && /* @__PURE__ */ jsx("div", {
+				className: "border-foreground/10 flex border-t px-3.5 py-1.5",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-expanded": !isCollapsed,
+					"aria-controls": contentId,
+					onClick: () => setIsExpanded((expanded) => !expanded),
+					className: "text-muted-foreground hover:text-foreground text-[11px] font-medium transition-colors motion-reduce:transition-none",
+					children: isCollapsed ? `Show all ${renderedLineCount} lines` : "Show less"
+				})
+			})
+		]
+	});
+}
+function DiffViewer({ code, patch, oldFile, newFile, viewMode = "unified", showLineNumbers = true, showIcon = false, showStats = true, copyable = true, maxCollapsedLines, variant, size, className }) {
+	const diffPatch = patch ?? code;
+	const oldContent = oldFile?.content;
+	const oldName = oldFile?.name;
+	const newContent = newFile?.content;
+	const newName = newFile?.name;
+	const parsedFiles = useMemo(() => {
+		if (diffPatch) return parsePatch(diffPatch);
+		if (oldContent !== void 0 && newContent !== void 0) {
+			const { lines, hunks, additions, deletions } = computeDiff(oldContent, newContent);
+			return [{
+				oldName,
+				newName,
+				lines,
+				hunks,
+				additions,
+				deletions
+			}];
+		}
+		return [];
+	}, [
+		diffPatch,
+		oldContent,
+		oldName,
+		newContent,
+		newName
+	]);
+	const splitLinePairs = useMemo(() => {
+		if (viewMode !== "split") return [];
+		return parsedFiles.map((file) => pairLinesForSplit(file.lines));
+	}, [parsedFiles, viewMode]);
+	if (parsedFiles.length === 0) return /* @__PURE__ */ jsx("pre", {
+		"data-slot": "diff-viewer",
+		className: cn("border-foreground/10 bg-foreground/[0.025] dark:bg-foreground/[0.04] text-muted-foreground border px-3.5 py-3 font-mono text-xs", className),
+		children: "No diff content provided"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "diff-viewer",
+		"data-view-mode": viewMode,
+		"data-variant": variant ?? "default",
+		"data-size": size ?? "default",
+		className: cn(diffViewerVariants({
+			variant,
+			size
+		}), className),
+		children: parsedFiles.map((file, fileIndex) => /* @__PURE__ */ jsx(DiffViewerFileContent, {
+			file,
+			splitLinePairs: splitLinePairs[fileIndex] ?? [],
+			viewMode,
+			showLineNumbers,
+			showIcon,
+			showStats,
+			copyable,
+			maxCollapsedLines
+		}, fileIndex))
+	});
+}
+DiffViewer.displayName = "DiffViewer";
+//#endregion
+export { DiffViewer, DiffViewerContent, DiffViewerFile, DiffViewerFileBadge, DiffViewerHeader, DiffViewerLine, DiffViewerSplitLine, DiffViewerStats, computeDiff, diffLineTextVariants, diffLineVariants, diffViewerVariants, diff_viewer_exports, parsePatch };

package/dist/components/ui/direction.d.ts

@@ -0,0 +1,2 @@
+import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
+export { DirectionProvider, useDirection };

package/dist/components/ui/direction.js

@@ -0,0 +1,2 @@
+import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
+export { DirectionProvider, useDirection };

package/dist/components/ui/dot-matrix.d.ts

@@ -0,0 +1,150 @@
+import { ComponentProps } from "react";
+//#region src/components/ui/dot-matrix.d.ts
+declare const STATES: {
+  idle: {
+    color: string;
+    base: number;
+  };
+  loading: {
+    blink: (i: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  thinking: {
+    blink: (_i: number, row: number, col: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  streaming: {
+    blink: (_i: number, row: number, col: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  searching: {
+    blink: (_i: number, _row: number, col: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  syncing: {
+    blink: (_i: number, row: number, col: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  connecting: {
+    blink: (_i: number, row: number, col: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  waiting: {
+    glyph: Set<number>;
+    blink: (_i: number, _row: number, col: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  uploading: {
+    blink: (_i: number, row: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  downloading: {
+    blink: (_i: number, row: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  listening: {
+    blink: (_i: number, _row: number, col: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  speaking: {
+    blink: (_i: number, _row: number, col: number) => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  recording: {
+    color: string;
+    glyph: Set<number>;
+    dim: number;
+    blink: () => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  success: {
+    color: string;
+    glyph: Set<number>;
+  };
+  error: {
+    color: string;
+    glyph: Set<number>;
+    blink: () => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  warning: {
+    color: string;
+    glyph: Set<number>;
+    blink: () => {
+      duration: number;
+      delay: number;
+      lo: number;
+    };
+  };
+  info: {
+    color: string;
+    glyph: Set<number>;
+  };
+  paused: {
+    color: string;
+    glyph: Set<number>;
+  };
+  stopped: {
+    color: string;
+    glyph: Set<number>;
+  };
+  offline: {
+    color: string;
+    base: number;
+  };
+};
+export type DotMatrixState = keyof typeof STATES;
+declare const dotMatrixStates: readonly DotMatrixState[];
+export type DotMatrixProps = Omit<ComponentProps<"span">, "children"> & {
+  state?: DotMatrixState;
+  label?: string;
+};
+/**
+ * Tiny 5x5 dot-matrix status indicator with 20 built-in states. Dots inherit the text color and animate in state-specific patterns: twinkle, waves, ripples, sweeps, equalizer columns, and check/cross/bang glyphs. State changes cross-fade per dot.
+ *
+ * ```tsx
+ * <DotMatrix state={isRunning ? "loading" : "success"} />
+ * ```
+ */
+declare function DotMatrix({ className, state, label, ...props }: DotMatrixProps): import("react").JSX.Element;
+//#endregion
+export { DotMatrix, dotMatrixStates };