silvery 0.17.0 → 0.17.2

package/dist/ui/react.mjs

@@ -0,0 +1,413 @@
+import { n as SPINNER_INTERVALS, t as SPINNER_FRAMES } from "../spinner-DSByknyx.mjs";
+import { a as getETA } from "../eta-DLiVPaSD.mjs";
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ag-react/src/ui/react/Spinner.tsx
+/**
+* React Spinner component for silvery/Ink TUI apps
+*/
+/**
+* Animated spinner component for React TUI apps
+*
+* @example
+* ```tsx
+* import { Spinner } from "@silvery/ag-react/ui/react";
+*
+* function LoadingView() {
+*   return <Spinner label="Loading..." />;
+* }
+*
+* // With style
+* <Spinner label="Processing..." style="arc" color="yellow" />
+* ```
+*/
+function Spinner({ label, style = "dots", color = "cyan" }) {
+	const [frameIndex, setFrameIndex] = useState(0);
+	const frames = SPINNER_FRAMES[style];
+	const interval = SPINNER_INTERVALS[style];
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setFrameIndex((i) => (i + 1) % frames.length);
+		}, interval);
+		return () => clearInterval(timer);
+	}, [frames.length, interval]);
+	const frame = frames[frameIndex];
+	return /* @__PURE__ */ jsxs("span", {
+		"data-progressx-spinner": true,
+		"data-color": color,
+		children: [frame, label && /* @__PURE__ */ jsxs("span", { children: [" ", label] })]
+	});
+}
+/**
+* Hook for using spinner state in custom components
+*
+* @example
+* ```tsx
+* function CustomSpinner() {
+*   const frame = useSpinnerFrame("dots");
+*   return <Text color="cyan">{frame}</Text>;
+* }
+* ```
+*/
+function useSpinnerFrame(style = "dots") {
+	const [frameIndex, setFrameIndex] = useState(0);
+	const frames = SPINNER_FRAMES[style];
+	const interval = SPINNER_INTERVALS[style];
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setFrameIndex((i) => (i + 1) % frames.length);
+		}, interval);
+		return () => clearInterval(timer);
+	}, [frames.length, interval]);
+	return frames[frameIndex];
+}
+//#endregion
+//#region packages/ag-react/src/ui/react/ProgressBar.tsx
+/**
+* React ProgressBar component for silvery/Ink TUI apps
+*/
+/**
+* Progress bar component for React TUI apps
+*
+* @example
+* ```tsx
+* import { ProgressBar } from "@silvery/ag-react/ui/react";
+*
+* function DownloadProgress({ current, total }) {
+*   return (
+*     <ProgressBar
+*       value={current}
+*       total={total}
+*       showPercentage
+*       showETA
+*     />
+*   );
+* }
+* ```
+*/
+function ProgressBar({ value, total, width = 40, showPercentage = true, showETA = false, label, color = "cyan" }) {
+	const [eta, setEta] = useState("--:--");
+	const etaBuffer = useRef([]);
+	useEffect(() => {
+		const now = Date.now();
+		etaBuffer.current.push({
+			time: now,
+			value
+		});
+		if (etaBuffer.current.length > 10) etaBuffer.current.shift();
+		setEta(getETA(etaBuffer.current, value, total).formatted);
+	}, [value, total]);
+	const percent = total > 0 ? value / total : 0;
+	const percentDisplay = `${Math.round(percent * 100)}%`;
+	const filledWidth = Math.round(width * percent);
+	const emptyWidth = width - filledWidth;
+	const bar = "█".repeat(filledWidth) + "░".repeat(emptyWidth);
+	const parts = [];
+	if (label) parts.push(label);
+	parts.push(`[${bar}]`);
+	if (showPercentage) parts.push(percentDisplay.padStart(4));
+	if (showETA) parts.push(`ETA: ${eta}`);
+	return /* @__PURE__ */ jsx("span", {
+		"data-progressx-bar": true,
+		"data-color": color,
+		"data-percent": percent,
+		children: parts.join(" ")
+	});
+}
+/**
+* Hook for progress bar state management
+*
+* @example
+* ```tsx
+* function MyProgress() {
+*   const { value, total, update, increment, eta, percent } = useProgressBar(100);
+*
+*   useEffect(() => {
+*     const timer = setInterval(() => increment(), 100);
+*     return () => clearInterval(timer);
+*   }, []);
+*
+*   return <Text>{percent}% - ETA: {eta}</Text>;
+* }
+* ```
+*/
+function useProgressBar(initialTotal) {
+	const [value, setValue] = useState(0);
+	const [total, setTotal] = useState(initialTotal);
+	const etaBuffer = useRef([]);
+	const [eta, setEta] = useState("--:--");
+	const update = (newValue) => {
+		setValue(newValue);
+		const now = Date.now();
+		etaBuffer.current.push({
+			time: now,
+			value: newValue
+		});
+		if (etaBuffer.current.length > 10) etaBuffer.current.shift();
+		setEta(getETA(etaBuffer.current, newValue, total).formatted);
+	};
+	const increment = (amount = 1) => update(value + amount);
+	const reset = (newTotal) => {
+		setValue(0);
+		if (newTotal !== void 0) setTotal(newTotal);
+		etaBuffer.current = [];
+		setEta("--:--");
+	};
+	return {
+		value,
+		total,
+		percent: total > 0 ? Math.round(value / total * 100) : 0,
+		eta,
+		update,
+		increment,
+		reset,
+		setTotal
+	};
+}
+//#endregion
+//#region packages/ag-react/src/ui/react/Tasks.tsx
+/**
+* React Tasks component - listr2-style task list for TUI apps
+*/
+/** Status icons for tasks */
+const STATUS_ICONS = {
+	pending: "○",
+	running: "",
+	completed: "✔",
+	failed: "✖",
+	skipped: "⊘"
+};
+/** Status colors */
+const STATUS_COLORS = {
+	pending: "gray",
+	running: "cyan",
+	completed: "green",
+	failed: "red",
+	skipped: "yellow"
+};
+/**
+* Single task component
+*
+* @example
+* ```tsx
+* <Task title="Downloading files" status="running">
+*   <ProgressBar value={50} total={100} />
+* </Task>
+* ```
+*/
+function Task({ title, status, children }) {
+	const spinnerFrame = useSpinnerFrame("dots");
+	const icon = status === "running" ? spinnerFrame : STATUS_ICONS[status];
+	const color = STATUS_COLORS[status];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-progressx-task": true,
+		"data-status": status,
+		"data-color": color,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-icon": true,
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-title": true,
+				children: [" ", title]
+			}),
+			children != null ? /* @__PURE__ */ jsx("div", {
+				"data-children": true,
+				children
+			}) : null
+		]
+	});
+}
+/**
+* Container for multiple tasks
+*
+* @example
+* ```tsx
+* <Tasks>
+*   <Task title="Scanning files" status="completed" />
+*   <Task title="Processing" status="running">
+*     <ProgressBar value={current} total={total} />
+*   </Task>
+*   <Task title="Cleanup" status="pending" />
+* </Tasks>
+* ```
+*/
+function Tasks({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-progressx-tasks": true,
+		children
+	});
+}
+/**
+* Hook for managing task state
+*
+* @example
+* ```tsx
+* function MyTasks() {
+*   const { tasks, start, complete, fail, updateProgress } = useTasks([
+*     { id: 'scan', title: 'Scanning' },
+*     { id: 'process', title: 'Processing' },
+*   ]);
+*
+*   useEffect(() => {
+*     start('scan');
+*     doScan().then(() => {
+*       complete('scan');
+*       start('process');
+*     });
+*   }, []);
+*
+*   return (
+*     <Tasks>
+*       {tasks.map(t => <Task key={t.id} title={t.title} status={t.status} />)}
+*     </Tasks>
+*   );
+* }
+* ```
+*/
+function useTasks(initialTasks) {
+	const [tasks, setTasks] = React.useState(initialTasks.map((t) => ({
+		...t,
+		status: "pending"
+	})));
+	const updateTask = (id, updates) => {
+		setTasks((prev) => prev.map((t) => t.id === id ? {
+			...t,
+			...updates
+		} : t));
+	};
+	const start = (id) => updateTask(id, { status: "running" });
+	const complete = (id, title) => updateTask(id, {
+		status: "completed",
+		...title && { title }
+	});
+	const fail = (id, title) => updateTask(id, {
+		status: "failed",
+		...title && { title }
+	});
+	const skip = (id, title) => updateTask(id, {
+		status: "skipped",
+		...title && { title }
+	});
+	const updateProgress = (id, progress) => updateTask(id, { progress });
+	const getTask = (id) => tasks.find((t) => t.id === id);
+	return {
+		tasks,
+		start,
+		complete,
+		fail,
+		skip,
+		updateProgress,
+		updateTask,
+		getTask,
+		allCompleted: tasks.every((t) => t.status === "completed" || t.status === "skipped"),
+		hasFailed: tasks.some((t) => t.status === "failed")
+	};
+}
+//#endregion
+//#region packages/ag-react/src/ui/react/context.tsx
+/**
+* React context for progress state management
+*/
+const ProgressContext = createContext(null);
+/**
+* Progress context provider
+*
+* @example
+* ```tsx
+* function App() {
+*   return (
+*     <ProgressProvider>
+*       <MyApp />
+*     </ProgressProvider>
+*   );
+* }
+*
+* function DeepComponent() {
+*   const { showSpinner, hideSpinner } = useProgress();
+*
+*   const handleLoad = async () => {
+*     showSpinner("Loading...");
+*     await loadData();
+*     hideSpinner();
+*   };
+* }
+* ```
+*/
+function ProgressProvider({ children }) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [loadingText, setLoadingText] = useState("");
+	const [spinnerStyle, setSpinnerStyle] = useState("dots");
+	const [progress, setProgress] = useState(null);
+	const value = {
+		isLoading,
+		loadingText,
+		spinnerStyle,
+		showSpinner: useCallback((text, style = "dots") => {
+			setLoadingText(text);
+			setSpinnerStyle(style);
+			setIsLoading(true);
+		}, []),
+		hideSpinner: useCallback(() => {
+			setIsLoading(false);
+			setLoadingText("");
+		}, []),
+		progress,
+		updateProgress: useCallback((current, total) => {
+			setProgress((prev) => ({
+				current,
+				total: total ?? prev?.total ?? 100
+			}));
+		}, []),
+		clearProgress: useCallback(() => {
+			setProgress(null);
+		}, [])
+	};
+	return /* @__PURE__ */ jsx(ProgressContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Hook to access progress context
+*
+* @example
+* ```tsx
+* function LoadingOverlay() {
+*   const { isLoading, loadingText, spinnerStyle } = useProgress();
+*
+*   if (!isLoading) return null;
+*
+*   return <Spinner label={loadingText} style={spinnerStyle} />;
+* }
+* ```
+*/
+function useProgress() {
+	const context = useContext(ProgressContext);
+	if (!context) throw new Error("useProgress must be used within a ProgressProvider");
+	return context;
+}
+/**
+* Component that renders spinner when loading
+*
+* @example
+* ```tsx
+* <ProgressProvider>
+*   <ProgressIndicator />
+*   <MainContent />
+* </ProgressProvider>
+* ```
+*/
+function ProgressIndicator() {
+	const { isLoading, loadingText, spinnerStyle } = useProgress();
+	if (!isLoading) return null;
+	return /* @__PURE__ */ jsx(Spinner, {
+		label: loadingText,
+		style: spinnerStyle
+	});
+}
+//#endregion
+export { ProgressBar, ProgressIndicator, ProgressProvider, Spinner, Task, Tasks, useProgress, useProgressBar, useSpinnerFrame, useTasks };
+
+//# sourceMappingURL=react.mjs.map

package/dist/ui/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","names":[],"sources":["../../packages/ag-react/src/ui/react/Spinner.tsx","../../packages/ag-react/src/ui/react/ProgressBar.tsx","../../packages/ag-react/src/ui/react/Tasks.tsx","../../packages/ag-react/src/ui/react/context.tsx"],"sourcesContent":["/**\n * React Spinner component for silvery/Ink TUI apps\n */\n\nimport React, { useState, useEffect } from \"react\"\nimport type { SpinnerProps, SpinnerStyle } from \"../types.js\"\nimport { SPINNER_FRAMES, SPINNER_INTERVALS } from \"../cli/spinner\"\n\n/**\n * Animated spinner component for React TUI apps\n *\n * @example\n * ```tsx\n * import { Spinner } from \"@silvery/ag-react/ui/react\";\n *\n * function LoadingView() {\n *   return <Spinner label=\"Loading...\" />;\n * }\n *\n * // With style\n * <Spinner label=\"Processing...\" style=\"arc\" color=\"yellow\" />\n * ```\n */\nexport function Spinner({ label, style = \"dots\", color = \"cyan\" }: SpinnerProps): React.ReactElement {\n  const [frameIndex, setFrameIndex] = useState(0)\n  const frames = SPINNER_FRAMES[style]\n  const interval = SPINNER_INTERVALS[style]\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setFrameIndex((i) => (i + 1) % frames.length)\n    }, interval)\n\n    return () => clearInterval(timer)\n  }, [frames.length, interval])\n\n  const frame = frames[frameIndex]\n\n  // Note: In a real silvery app, you'd use <Text color={color}> etc.\n  // This is a generic React component that can be styled by the consumer\n  return (\n    <span data-progressx-spinner data-color={color}>\n      {frame}\n      {label && <span> {label}</span>}\n    </span>\n  )\n}\n\n/**\n * Hook for using spinner state in custom components\n *\n * @example\n * ```tsx\n * function CustomSpinner() {\n *   const frame = useSpinnerFrame(\"dots\");\n *   return <Text color=\"cyan\">{frame}</Text>;\n * }\n * ```\n */\nexport function useSpinnerFrame(style: SpinnerStyle = \"dots\"): string {\n  const [frameIndex, setFrameIndex] = useState(0)\n  const frames = SPINNER_FRAMES[style]\n  const interval = SPINNER_INTERVALS[style]\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setFrameIndex((i) => (i + 1) % frames.length)\n    }, interval)\n\n    return () => clearInterval(timer)\n  }, [frames.length, interval])\n\n  return frames[frameIndex]!\n}\n","/**\n * React ProgressBar component for silvery/Ink TUI apps\n */\n\nimport React, { useState, useEffect, useRef } from \"react\"\nimport type { ProgressBarProps } from \"../types.js\"\nimport { getETA, DEFAULT_ETA_BUFFER_SIZE, type ETASample } from \"../utils/eta\"\n\n/**\n * Progress bar component for React TUI apps\n *\n * @example\n * ```tsx\n * import { ProgressBar } from \"@silvery/ag-react/ui/react\";\n *\n * function DownloadProgress({ current, total }) {\n *   return (\n *     <ProgressBar\n *       value={current}\n *       total={total}\n *       showPercentage\n *       showETA\n *     />\n *   );\n * }\n * ```\n */\nexport function ProgressBar({\n  value,\n  total,\n  width = 40,\n  showPercentage = true,\n  showETA = false,\n  label,\n  color = \"cyan\",\n}: ProgressBarProps): React.ReactElement {\n  // ETA calculation state\n  const [eta, setEta] = useState<string>(\"--:--\")\n  const etaBuffer = useRef<ETASample[]>([])\n\n  // Update ETA buffer when value changes\n  useEffect(() => {\n    const now = Date.now()\n    etaBuffer.current.push({ time: now, value })\n\n    if (etaBuffer.current.length > DEFAULT_ETA_BUFFER_SIZE) {\n      etaBuffer.current.shift()\n    }\n\n    // Calculate ETA using shared utility\n    const result = getETA(etaBuffer.current, value, total)\n    setEta(result.formatted)\n  }, [value, total])\n\n  const percent = total > 0 ? value / total : 0\n  const percentDisplay = `${Math.round(percent * 100)}%`\n\n  const filledWidth = Math.round(width * percent)\n  const emptyWidth = width - filledWidth\n\n  const bar = \"█\".repeat(filledWidth) + \"░\".repeat(emptyWidth)\n\n  // Build the display parts\n  const parts: string[] = []\n\n  if (label) {\n    parts.push(label)\n  }\n\n  parts.push(`[${bar}]`)\n\n  if (showPercentage) {\n    parts.push(percentDisplay.padStart(4))\n  }\n\n  if (showETA) {\n    parts.push(`ETA: ${eta}`)\n  }\n\n  return (\n    <span data-progressx-bar data-color={color} data-percent={percent}>\n      {parts.join(\" \")}\n    </span>\n  )\n}\n\n/**\n * Hook for progress bar state management\n *\n * @example\n * ```tsx\n * function MyProgress() {\n *   const { value, total, update, increment, eta, percent } = useProgressBar(100);\n *\n *   useEffect(() => {\n *     const timer = setInterval(() => increment(), 100);\n *     return () => clearInterval(timer);\n *   }, []);\n *\n *   return <Text>{percent}% - ETA: {eta}</Text>;\n * }\n * ```\n */\nexport function useProgressBar(initialTotal: number) {\n  const [value, setValue] = useState(0)\n  const [total, setTotal] = useState(initialTotal)\n  const etaBuffer = useRef<ETASample[]>([])\n  const [eta, setEta] = useState<string>(\"--:--\")\n\n  const update = (newValue: number) => {\n    setValue(newValue)\n\n    // Update ETA buffer\n    const now = Date.now()\n    etaBuffer.current.push({ time: now, value: newValue })\n    if (etaBuffer.current.length > DEFAULT_ETA_BUFFER_SIZE) {\n      etaBuffer.current.shift()\n    }\n\n    // Calculate ETA using shared utility\n    const result = getETA(etaBuffer.current, newValue, total)\n    setEta(result.formatted)\n  }\n\n  const increment = (amount = 1) => update(value + amount)\n\n  const reset = (newTotal?: number) => {\n    setValue(0)\n    if (newTotal !== undefined) setTotal(newTotal)\n    etaBuffer.current = []\n    setEta(\"--:--\")\n  }\n\n  const percent = total > 0 ? Math.round((value / total) * 100) : 0\n\n  return {\n    value,\n    total,\n    percent,\n    eta,\n    update,\n    increment,\n    reset,\n    setTotal,\n  }\n}\n","/**\n * React Tasks component - listr2-style task list for TUI apps\n */\n\nimport React from \"react\"\nimport type { TaskProps, TaskStatus } from \"../types.js\"\nimport { useSpinnerFrame } from \"./Spinner\"\n\n/** Status icons for tasks */\nconst STATUS_ICONS: Record<TaskStatus, string> = {\n  pending: \"○\",\n  running: \"\", // Will use spinner\n  completed: \"✔\",\n  failed: \"✖\",\n  skipped: \"⊘\",\n}\n\n/** Status colors */\nconst STATUS_COLORS: Record<TaskStatus, string> = {\n  pending: \"gray\",\n  running: \"cyan\",\n  completed: \"green\",\n  failed: \"red\",\n  skipped: \"yellow\",\n}\n\n/**\n * Single task component\n *\n * @example\n * ```tsx\n * <Task title=\"Downloading files\" status=\"running\">\n *   <ProgressBar value={50} total={100} />\n * </Task>\n * ```\n */\nexport function Task({ title, status, children }: TaskProps): React.ReactElement {\n  const spinnerFrame = useSpinnerFrame(\"dots\")\n  const icon = status === \"running\" ? spinnerFrame : STATUS_ICONS[status]\n  const color = STATUS_COLORS[status]\n\n  return (\n    <div data-progressx-task data-status={status} data-color={color}>\n      <span data-icon>{icon}</span>\n      <span data-title> {title}</span>\n      {children != null ? <div data-children>{children as React.ReactNode}</div> : null}\n    </div>\n  )\n}\n\n/**\n * Container for multiple tasks\n *\n * @example\n * ```tsx\n * <Tasks>\n *   <Task title=\"Scanning files\" status=\"completed\" />\n *   <Task title=\"Processing\" status=\"running\">\n *     <ProgressBar value={current} total={total} />\n *   </Task>\n *   <Task title=\"Cleanup\" status=\"pending\" />\n * </Tasks>\n * ```\n */\nexport function Tasks({ children }: { children: React.ReactNode }): React.ReactElement {\n  return <div data-progressx-tasks>{children}</div>\n}\n\n/**\n * Hook for managing task state\n *\n * @example\n * ```tsx\n * function MyTasks() {\n *   const { tasks, start, complete, fail, updateProgress } = useTasks([\n *     { id: 'scan', title: 'Scanning' },\n *     { id: 'process', title: 'Processing' },\n *   ]);\n *\n *   useEffect(() => {\n *     start('scan');\n *     doScan().then(() => {\n *       complete('scan');\n *       start('process');\n *     });\n *   }, []);\n *\n *   return (\n *     <Tasks>\n *       {tasks.map(t => <Task key={t.id} title={t.title} status={t.status} />)}\n *     </Tasks>\n *   );\n * }\n * ```\n */\nexport function useTasks(initialTasks: Array<{ id: string; title: string }>) {\n  const [tasks, setTasks] = React.useState<\n    Array<{\n      id: string\n      title: string\n      status: TaskStatus\n      progress?: { current: number; total: number }\n    }>\n  >(\n    initialTasks.map((t) => ({\n      ...t,\n      status: \"pending\" as TaskStatus,\n    })),\n  )\n\n  const updateTask = (\n    id: string,\n    updates: Partial<{\n      status: TaskStatus\n      title: string\n      progress: { current: number; total: number }\n    }>,\n  ) => {\n    setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, ...updates } : t)))\n  }\n\n  const start = (id: string) => updateTask(id, { status: \"running\" })\n  const complete = (id: string, title?: string) => updateTask(id, { status: \"completed\", ...(title && { title }) })\n  const fail = (id: string, title?: string) => updateTask(id, { status: \"failed\", ...(title && { title }) })\n  const skip = (id: string, title?: string) => updateTask(id, { status: \"skipped\", ...(title && { title }) })\n  const updateProgress = (id: string, progress: { current: number; total: number }) => updateTask(id, { progress })\n\n  const getTask = (id: string) => tasks.find((t) => t.id === id)\n  const allCompleted = tasks.every((t) => t.status === \"completed\" || t.status === \"skipped\")\n  const hasFailed = tasks.some((t) => t.status === \"failed\")\n\n  return {\n    tasks,\n    start,\n    complete,\n    fail,\n    skip,\n    updateProgress,\n    updateTask,\n    getTask,\n    allCompleted,\n    hasFailed,\n  }\n}\n","/**\n * React context for progress state management\n */\n\nimport React, { createContext, useContext, useState, useCallback } from \"react\"\nimport type { SpinnerStyle } from \"../types.js\"\nimport { Spinner } from \"./Spinner\"\n\n/** Progress context state */\ninterface ProgressContextState {\n  /** Currently showing a spinner */\n  isLoading: boolean\n  /** Loading message */\n  loadingText: string\n  /** Spinner style */\n  spinnerStyle: SpinnerStyle\n\n  /** Show a spinner with message */\n  showSpinner: (text: string, style?: SpinnerStyle) => void\n  /** Hide the spinner */\n  hideSpinner: () => void\n\n  /** Progress bar state */\n  progress: { current: number; total: number } | null\n  /** Update progress */\n  updateProgress: (current: number, total?: number) => void\n  /** Clear progress */\n  clearProgress: () => void\n}\n\nconst ProgressContext = createContext<ProgressContextState | null>(null)\n\n/**\n * Progress context provider\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ProgressProvider>\n *       <MyApp />\n *     </ProgressProvider>\n *   );\n * }\n *\n * function DeepComponent() {\n *   const { showSpinner, hideSpinner } = useProgress();\n *\n *   const handleLoad = async () => {\n *     showSpinner(\"Loading...\");\n *     await loadData();\n *     hideSpinner();\n *   };\n * }\n * ```\n */\nexport function ProgressProvider({ children }: { children: React.ReactNode }): React.ReactElement {\n  const [isLoading, setIsLoading] = useState(false)\n  const [loadingText, setLoadingText] = useState(\"\")\n  const [spinnerStyle, setSpinnerStyle] = useState<SpinnerStyle>(\"dots\")\n  const [progress, setProgress] = useState<{\n    current: number\n    total: number\n  } | null>(null)\n\n  const showSpinner = useCallback((text: string, style: SpinnerStyle = \"dots\") => {\n    setLoadingText(text)\n    setSpinnerStyle(style)\n    setIsLoading(true)\n  }, [])\n\n  const hideSpinner = useCallback(() => {\n    setIsLoading(false)\n    setLoadingText(\"\")\n  }, [])\n\n  const updateProgress = useCallback((current: number, total?: number) => {\n    setProgress((prev) => ({\n      current,\n      total: total ?? prev?.total ?? 100,\n    }))\n  }, [])\n\n  const clearProgress = useCallback(() => {\n    setProgress(null)\n  }, [])\n\n  const value: ProgressContextState = {\n    isLoading,\n    loadingText,\n    spinnerStyle,\n    showSpinner,\n    hideSpinner,\n    progress,\n    updateProgress,\n    clearProgress,\n  }\n\n  return <ProgressContext.Provider value={value}>{children}</ProgressContext.Provider>\n}\n\n/**\n * Hook to access progress context\n *\n * @example\n * ```tsx\n * function LoadingOverlay() {\n *   const { isLoading, loadingText, spinnerStyle } = useProgress();\n *\n *   if (!isLoading) return null;\n *\n *   return <Spinner label={loadingText} style={spinnerStyle} />;\n * }\n * ```\n */\nexport function useProgress(): ProgressContextState {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error(\"useProgress must be used within a ProgressProvider\")\n  }\n\n  return context\n}\n\n/**\n * Component that renders spinner when loading\n *\n * @example\n * ```tsx\n * <ProgressProvider>\n *   <ProgressIndicator />\n *   <MainContent />\n * </ProgressProvider>\n * ```\n */\nexport function ProgressIndicator(): React.ReactElement | null {\n  const { isLoading, loadingText, spinnerStyle } = useProgress()\n\n  if (!isLoading) {\n    return null\n  }\n\n  return <Spinner label={loadingText} style={spinnerStyle} />\n}\n"],"mappings":"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"}

package/dist/ui/utils.d.mts

@@ -0,0 +1,86 @@
+//#region packages/ag-react/src/ui/utils/eta.d.ts
+/**
+ * Shared ETA calculation utilities
+ */
+/** Sample point for ETA calculation */
+interface ETASample {
+  time: number;
+  value: number;
+}
+/** ETA calculation result */
+interface ETAResult {
+  /** Estimated seconds remaining, or null if insufficient data */
+  seconds: number | null;
+  /** Formatted ETA string (e.g., "1:30", "2:15:30", "--:--") */
+  formatted: string;
+}
+/**
+ * Calculate ETA from a buffer of samples
+ *
+ * @param buffer - Array of {time, value} samples
+ * @param current - Current progress value
+ * @param total - Total target value
+ * @returns ETA in seconds (null if insufficient data)
+ *
+ * @example
+ * ```ts
+ * const buffer = [
+ *   { time: 1000, value: 0 },
+ *   { time: 2000, value: 10 },
+ * ];
+ * const eta = calculateETA(buffer, 10, 100);
+ * // eta = 9 (9 seconds remaining at 10 items/sec)
+ * ```
+ */
+declare function calculateETA(buffer: ETASample[], current: number, total: number): number | null;
+/**
+ * Format ETA seconds as human-readable string
+ *
+ * @param eta - ETA in seconds (null for unknown)
+ * @returns Formatted string (e.g., "1:30", "2:15:30", "--:--", ">1d")
+ *
+ * @example
+ * ```ts
+ * formatETA(90)    // "1:30"
+ * formatETA(3665)  // "1:01:05"
+ * formatETA(null)  // "--:--"
+ * formatETA(100000) // ">1d"
+ * ```
+ */
+declare function formatETA(eta: number | null): string;
+/**
+ * Calculate and format ETA in one call
+ *
+ * @param buffer - Array of {time, value} samples
+ * @param current - Current progress value
+ * @param total - Total target value
+ * @returns Object with seconds (number|null) and formatted string
+ */
+declare function getETA(buffer: ETASample[], current: number, total: number): ETAResult;
+/** Default buffer size for ETA smoothing */
+declare const DEFAULT_ETA_BUFFER_SIZE = 10;
+/**
+ * Create an ETA tracker with automatic buffer management
+ *
+ * @param bufferSize - Number of samples to keep (default: 10)
+ * @returns ETA tracker object
+ *
+ * @example
+ * ```ts
+ * const tracker = createETATracker();
+ * tracker.record(0);
+ * // ... later ...
+ * tracker.record(50);
+ * const eta = tracker.getETA(50, 100);
+ * console.log(eta.formatted); // "0:30"
+ * ```
+ */
+declare function createETATracker(bufferSize?: number): {
+  /** Record a new sample */record(value: number): void; /** Get current ETA */
+  getETA(current: number, total: number): ETAResult; /** Reset the buffer */
+  reset(): void; /** Get buffer for external use */
+  getBuffer(): readonly ETASample[];
+};
+//#endregion
+export { DEFAULT_ETA_BUFFER_SIZE, ETAResult, ETASample, calculateETA, createETATracker, formatETA, getETA };
+//# sourceMappingURL=utils.d.mts.map

package/dist/ui/utils.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.mts","names":[],"sources":["../../packages/ag-react/src/ui/utils/eta.ts"],"mappings":";;AAKA;;;UAAiB,SAAA;EACf,IAAA;EACA,KAAA;AAAA;;UAIe,SAAA;EAIN;EAFT,OAAA;EAuB0B;EArB1B,SAAA;AAAA;;;;;;;AAwDF;;;;;AA6BA;;;;;;;iBAhEgB,YAAA,CAAa,MAAA,EAAQ,SAAA,IAAa,OAAA,UAAiB,KAAA;;;;AAyEnE;;;;;AAkBA;;;;;;iBAxDgB,SAAA,CAAU,GAAA;;;;;;;;;iBA6BV,MAAA,CAAO,MAAA,EAAQ,SAAA,IAAa,OAAA,UAAiB,KAAA,WAAgB,SAAA;;cAShE,uBAAA;;;;;;;;;;;;;;;;;iBAkBG,gBAAA,CAAiB,UAAA;;0BAaP,KAAA,WAAkB,SAAA;;wBAUlB,SAAA;AAAA"}

package/dist/ui/utils.mjs

@@ -0,0 +1,2 @@
+import { a as getETA, i as formatETA, n as calculateETA, r as createETATracker, t as DEFAULT_ETA_BUFFER_SIZE } from "../eta-DLiVPaSD.mjs";
+export { DEFAULT_ETA_BUFFER_SIZE, calculateETA, createETATracker, formatETA, getETA };

package/dist/ui/wrappers.d.mts

@@ -0,0 +1,3 @@
+import { _ as TextInputOptions, a as ProgressInfo, r as ProgressCallback } from "../types-CDgkE-Rw.mjs";
+import { a as waitForEvent, c as wrapGenerator, d as attachSpinner, f as withSpinner, i as withSelect, l as createProgressCallback, n as withTextInput, o as wrapEmitter, r as createSelect, s as withIterableProgress, t as createTextInput, u as withProgress } from "../with-text-input-CmHf_9d6.mjs";
+export { ProgressCallback, ProgressInfo, TextInputOptions, attachSpinner, createProgressCallback, createSelect, createTextInput, waitForEvent, withIterableProgress, withProgress, withSelect, withSpinner, withTextInput, wrapEmitter, wrapGenerator };

package/dist/ui/wrappers.mjs

@@ -0,0 +1,2 @@
+import { a as waitForEvent, c as wrapGenerator, d as attachSpinner, f as withSpinner, i as withSelect, l as createProgressCallback, n as withTextInput, o as wrapEmitter, r as createSelect, s as withIterableProgress, t as createTextInput, u as withProgress } from "../wrappers-hhL8EQ_n.mjs";
+export { attachSpinner, createProgressCallback, createSelect, createTextInput, waitForEvent, withIterableProgress, withProgress, withSelect, withSpinner, withTextInput, wrapEmitter, wrapGenerator };

package/dist/ui.d.mts

@@ -0,0 +1,6 @@
+import { _ as TextInputOptions, a as ProgressInfo, b as WithSelectOptions, c as SpinnerOptions, d as StepProgress, f as TableColumn, g as TaskStatus, h as TaskState, i as ProgressGenerator, l as SpinnerProps, m as TaskProps, n as ProgressBarProps, o as SelectOption, p as TableProps, r as ProgressCallback, s as SelectProps, t as ProgressBarOptions, u as SpinnerStyle, v as TextInputProps, x as WithSpinnerOptions, y as WithProgressOptions } from "./types-CDgkE-Rw.mjs";
+import { i as createSpinner, n as SPINNER_FRAMES, r as Spinner, t as CallableSpinner } from "./spinner-Cgej6Vnb.mjs";
+import { n as TaskHandle, r as ProgressBar, t as MultiProgress } from "./multi-progress-C0-rkn86.mjs";
+import { a as CURSOR_RESTORE, c as CURSOR_TO_START, d as getTerminalWidth, f as isTTY, h as writeLine, i as CURSOR_HIDE, l as cursorDown, m as write, n as CLEAR_LINE_END, o as CURSOR_SAVE, p as withCursor, r as CLEAR_SCREEN, s as CURSOR_SHOW, t as CLEAR_LINE, u as cursorUp } from "./ansi-zmNzgkPB.mjs";
+import { a as waitForEvent, c as wrapGenerator, d as attachSpinner, f as withSpinner, i as withSelect, l as createProgressCallback, n as withTextInput, o as wrapEmitter, r as createSelect, s as withIterableProgress, t as createTextInput, u as withProgress } from "./with-text-input-CmHf_9d6.mjs";
+export { CLEAR_LINE, CLEAR_LINE_END, CLEAR_SCREEN, CURSOR_HIDE, CURSOR_RESTORE, CURSOR_SAVE, CURSOR_SHOW, CURSOR_TO_START, CallableSpinner, MultiProgress, ProgressBar, ProgressBarOptions, ProgressBarProps, ProgressCallback, ProgressGenerator, ProgressInfo, SPINNER_FRAMES, SelectOption, SelectProps, Spinner, SpinnerOptions, SpinnerProps, SpinnerStyle, StepProgress, TableColumn, TableProps, TaskHandle, TaskProps, TaskState, TaskStatus, TextInputOptions, TextInputProps, WithProgressOptions, WithSelectOptions, WithSpinnerOptions, attachSpinner, createProgressCallback, createSelect, createSpinner, createTextInput, cursorDown, cursorUp, getTerminalWidth, isTTY, waitForEvent, withCursor, withIterableProgress, withProgress, withSelect, withSpinner, withTextInput, wrapEmitter, wrapGenerator, write, writeLine };

package/dist/ui.mjs

@@ -0,0 +1,7 @@
+import { i as createSpinner, r as Spinner, t as SPINNER_FRAMES } from "./spinner-DSByknyx.mjs";
+import { a as CURSOR_RESTORE, c as CURSOR_TO_START, d as getTerminalWidth, f as isTTY, h as writeLine, i as CURSOR_HIDE, l as cursorDown, m as write, n as CLEAR_LINE_END, o as CURSOR_SAVE, p as withCursor, r as CLEAR_SCREEN, s as CURSOR_SHOW, t as CLEAR_LINE, u as cursorUp } from "./ansi-CXLE_pt1.mjs";
+import { t as ProgressBar } from "./progress-bar-COPSBlT9.mjs";
+import { t as MultiProgress } from "./multi-progress-CQVB9lES.mjs";
+import "./cli-B-k7Bm56.mjs";
+import { a as waitForEvent, c as wrapGenerator, d as attachSpinner, f as withSpinner, i as withSelect, l as createProgressCallback, n as withTextInput, o as wrapEmitter, r as createSelect, s as withIterableProgress, t as createTextInput, u as withProgress } from "./wrappers-hhL8EQ_n.mjs";
+export { CLEAR_LINE, CLEAR_LINE_END, CLEAR_SCREEN, CURSOR_HIDE, CURSOR_RESTORE, CURSOR_SAVE, CURSOR_SHOW, CURSOR_TO_START, MultiProgress, ProgressBar, SPINNER_FRAMES, Spinner, attachSpinner, createProgressCallback, createSelect, createSpinner, createTextInput, cursorDown, cursorUp, getTerminalWidth, isTTY, waitForEvent, withCursor, withIterableProgress, withProgress, withSelect, withSpinner, withTextInput, wrapEmitter, wrapGenerator, write, writeLine };