@tangle-network/ui 11.12.0 → 11.13.1

package/dist/files/file-tree.js

@@ -0,0 +1,135 @@
+import { cn } from "../lib/utils.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, File, FileCode, FileImage, FileJson, FileSpreadsheet, FileText, Folder, FolderOpen } from "lucide-react";
+//#region src/files/file-tree.tsx
+/**
+* FileTree — directory browser with file type icons.
+*
+* Renders a hierarchical file system view. Clicking a file
+* triggers onSelect with the full path.
+*/
+function isNodeVisible(node, visibility) {
+	if (!visibility) return true;
+	if (visibility.hiddenPaths?.includes(node.path)) return false;
+	if (visibility.hiddenPathPrefixes?.some((prefix) => node.path === prefix || node.path.startsWith(`${prefix}/`))) return false;
+	return visibility.isVisible ? visibility.isVisible(node) : true;
+}
+function filterFileTree(root, visibility) {
+	if (!isNodeVisible(root, visibility)) return null;
+	if (root.type === "file") return root;
+	const children = (root.children ?? []).map((child) => filterFileTree(child, visibility)).filter((child) => child !== null);
+	if (root.children && root.children.length > 0 && children.length === 0) return null;
+	return {
+		...root,
+		children
+	};
+}
+const FILE_ICONS = {
+	pdf: FileText,
+	csv: FileSpreadsheet,
+	xlsx: FileSpreadsheet,
+	xls: FileSpreadsheet,
+	py: FileCode,
+	ts: FileCode,
+	js: FileCode,
+	json: FileJson,
+	yaml: FileCode,
+	yml: FileCode,
+	md: FileText,
+	txt: FileText,
+	png: FileImage,
+	jpg: FileImage,
+	jpeg: FileImage,
+	gif: FileImage,
+	svg: FileImage
+};
+function getFileIcon(name) {
+	const ext = name.split(".").pop()?.toLowerCase() || "";
+	return FILE_ICONS[ext] || File;
+}
+function getFileColor(name) {
+	switch (name.split(".").pop()?.toLowerCase() || "") {
+		case "pdf": return "text-red-400";
+		case "py": return "text-yellow-400";
+		case "ts":
+		case "js": return "text-blue-400";
+		case "json": return "text-green-400";
+		case "yaml":
+		case "yml": return "text-[var(--accent-text)]";
+		case "csv":
+		case "xlsx": return "text-emerald-400";
+		case "md": return "text-foreground";
+		default: return "text-muted-foreground";
+	}
+}
+function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
+	const [expanded, setExpanded] = useState(defaultExpanded);
+	const isSelected = node.path === selectedPath;
+	const isDir = node.type === "directory";
+	const handleClick = () => {
+		if (isDir) setExpanded(!expanded);
+		onSelect?.(node.path, node);
+	};
+	const Icon = isDir ? expanded ? FolderOpen : Folder : getFileIcon(node.name);
+	const iconColor = isDir ? "text-primary" : getFileColor(node.name);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cn("flex items-center gap-1.5 w-full text-left px-2 py-[2px] cursor-pointer text-[13px] transition-colors", "appearance-none bg-transparent border-none", "hover:bg-accent", isSelected ? "bg-primary/15 text-foreground" : "text-foreground"),
+		style: { paddingLeft: `${depth * 16 + 8}px` },
+		onClick: handleClick,
+		"aria-expanded": isDir ? expanded : void 0,
+		children: [
+			isDir && /* @__PURE__ */ jsx(ChevronRight, { className: cn("h-3 w-3 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-90") }),
+			!isDir && /* @__PURE__ */ jsx("span", { className: "w-3" }),
+			/* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4 shrink-0", iconColor) }),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: node.name
+			}),
+			node.size !== void 0 && !isDir && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs ml-auto tabular-nums",
+				children: formatSize(node.size)
+			})
+		]
+	}), isDir && expanded && node.children && /* @__PURE__ */ jsx("div", { children: node.children.sort((a, b) => {
+		if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+		return a.name.localeCompare(b.name);
+	}).map((child) => /* @__PURE__ */ jsx(TreeNode, {
+		node: child,
+		depth: depth + 1,
+		selectedPath,
+		onSelect,
+		defaultExpanded
+	}, child.path)) })] });
+}
+function formatSize(bytes) {
+	if (bytes < 1024) return `${bytes}B`;
+	if (bytes < 1048576) return `${(bytes / 1024).toFixed(0)}K`;
+	return `${(bytes / 1048576).toFixed(1)}M`;
+}
+function FileTree({ root, selectedPath, onSelect, className, defaultExpanded = true, visibility }) {
+	const visibleRoot = filterFileTree(root, visibility);
+	if (!visibleRoot) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-sm font-sans", className),
+		children: visibleRoot.children ? visibleRoot.children.sort((a, b) => {
+			if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+			return a.name.localeCompare(b.name);
+		}).map((child) => /* @__PURE__ */ jsx(TreeNode, {
+			node: child,
+			depth: 0,
+			selectedPath,
+			onSelect,
+			defaultExpanded
+		}, child.path)) : /* @__PURE__ */ jsx(TreeNode, {
+			node: visibleRoot,
+			depth: 0,
+			selectedPath,
+			onSelect,
+			defaultExpanded
+		})
+	});
+}
+//#endregion
+export { FileTree, filterFileTree };

package/dist/files/rich-file-tree.d.ts

@@ -0,0 +1,62 @@
+import { FileNode } from "./file-tree.js";
+import { CSSProperties, ReactNode } from "react";
+import { ContextMenuItem, ContextMenuOpenContext, GitStatus, GitStatusEntry } from "@pierre/trees";
+//#region src/files/rich-file-tree.d.ts
+/**
+ * Re-export Pierre's git-status union under a stable name so consumers
+ * don't import directly from the dep. If we ever swap the underlying
+ * implementation, only this file changes.
+ */
+export type RichFileTreeGitStatus = GitStatus;
+export type RichFileTreeGitEntry = GitStatusEntry;
+export interface RichFileTreeProps {
+  /**
+   * Either a recursive `FileNode` tree (matches the existing FileTree
+   * input) or a flat list of canonical paths. Pass exactly one.
+   */
+  root?: FileNode;
+  paths?: ReadonlyArray<string>;
+  /** Currently-selected path. Pierre supports multi-select internally; the
+   * wrapper exposes a single string for parity with FileTree. */
+  selectedPath?: string;
+  /** Called whenever the selection changes (single-select fan-out). */
+  onSelect?: (path: string) => void;
+  /** Show the inline search input. Defaults to true. */
+  search?: boolean;
+  /** Open / closed initial expansion. Defaults to "open" — match FileTree. */
+  initialExpansion?: "open" | "closed";
+  /** Optional git-status decorations per path. */
+  gitStatus?: ReadonlyArray<RichFileTreeGitEntry>;
+  /**
+   * Right-click / button-lane menu content. Receives the row and the
+   * trigger context (which interaction opened the menu).
+   */
+  renderContextMenu?: (item: ContextMenuItem, context: ContextMenuOpenContext) => ReactNode;
+  /** Optional header rendered above the tree rows. */
+  header?: ReactNode;
+  /**
+   * Theme override map for shadow-DOM CSS variables. Most consumers can
+   * leave this — defaults reference the host's canonical color tokens.
+   */
+  themeOverrides?: Partial<RichFileTreeThemeVars>;
+  className?: string;
+  style?: CSSProperties;
+  /** Inline height (or set via `style.height`). Defaults to 100% of parent. */
+  height?: number | string;
+}
+export interface RichFileTreeThemeVars {
+  /** Selected-row background. */
+  selectedBg: string;
+  /** Selected-row foreground. */
+  selectedFg: string;
+  /** Default row foreground. */
+  fg: string;
+  /** Hover background. */
+  hoverBg: string;
+  /** Border / divider color. */
+  border: string;
+  /** Muted (parent path, breadcrumb) foreground. */
+  mutedFg: string;
+}
+export declare function RichFileTree({ root, paths, selectedPath, onSelect, search, initialExpansion, gitStatus, renderContextMenu, header, themeOverrides, className, style, height }: RichFileTreeProps): import("react").JSX.Element;
+//#endregion

package/dist/files/rich-file-tree.js

@@ -0,0 +1,122 @@
+import { useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { FileTree, useFileTree } from "@pierre/trees/react";
+//#region src/files/rich-file-tree.tsx
+/**
+* RichFileTree — feature-rich file browser built on @pierre/trees.
+*
+* Why this exists alongside the existing FileTree:
+* - Built-in search (cmd-K-style fuzzy filter)
+* - Virtualized rendering for vaults with thousands of files
+* - Git-status overlays per row (modified / added / staged)
+* - Right-click + button-lane context menus with custom item rendering
+* - VS Code-style icons via @pierre/vscode-icons (optional)
+*
+* The existing FileTree stays as-is for simple cases. RichFileTree is the
+* upgrade path when a consumer's vault grows past a few hundred files or
+* needs richer affordances.
+*
+* Pierre renders inside a shadow DOM to keep its CSS isolated. We bridge
+* the host theme via CSS variables on the host element below — the tree
+* picks them up through `--trees-*-override` overrides.
+*/
+/**
+* Map a Brand design token (e.g. `--accent-surface-soft`) to a CSS
+* `var(--token)` reference. Pierre's CSS-variable surface accepts any
+* valid CSS color expression, so passing `var(--token)` lets the host
+* theme propagate through without us having to read computed styles.
+*/
+function cssVarFromToken(name) {
+	return `var(${name})`;
+}
+const DEFAULT_THEME = {
+	selectedBg: cssVarFromToken("--accent-surface-soft"),
+	selectedFg: cssVarFromToken("--accent-text"),
+	fg: cssVarFromToken("--text-primary"),
+	hoverBg: cssVarFromToken("--bg-hover"),
+	border: cssVarFromToken("--border-default"),
+	mutedFg: cssVarFromToken("--text-muted")
+};
+/**
+* Walk a recursive FileNode and return a flat list of canonical paths.
+*
+* Pierre infers directory structure from path segments — passing both
+* `dir` and `dir/file.md` collides because `dir` looks like a file.
+* We emit only files; pure-directory leaves get a trailing slash so
+* Pierre keeps them as folders even when they have no children.
+*/
+function flattenFileNode(node, out = []) {
+	if (node.type === "file" && node.path) {
+		out.push(node.path);
+		return out;
+	}
+	if (node.type === "directory") {
+		if (node.children?.length) {
+			for (const child of node.children) flattenFileNode(child, out);
+			return out;
+		}
+		if (node.path) out.push(`${node.path}/`);
+	}
+	return out;
+}
+function RichFileTree({ root, paths, selectedPath, onSelect, search = true, initialExpansion = "open", gitStatus, renderContextMenu, header, themeOverrides, className, style, height }) {
+	if (root && paths) throw new Error("RichFileTree: pass `root` or `paths`, not both");
+	const flatPaths = useMemo(() => {
+		if (paths) return Array.from(paths);
+		if (root) return flattenFileNode(root);
+		return [];
+	}, [paths, root]);
+	const { model } = useFileTree({
+		paths: flatPaths,
+		search,
+		initialExpansion,
+		onSelectionChange: (selected) => {
+			const next = selected[0];
+			if (next && next !== selectedPath) onSelect?.(next);
+		}
+	});
+	useEffect(() => {
+		if (!gitStatus) return;
+		model.setGitStatus(gitStatus);
+	}, [model, gitStatus]);
+	useEffect(() => {
+		model.resetPaths(flatPaths);
+	}, [model, flatPaths]);
+	useEffect(() => {
+		if (!selectedPath) return;
+		const current = model.getSelectedPaths();
+		if (current.length === 1 && current[0] === selectedPath) return;
+		model.setSelectedPaths?.([selectedPath]);
+	}, [model, selectedPath]);
+	const theme = {
+		...DEFAULT_THEME,
+		...themeOverrides
+	};
+	const themeStyle = useMemo(() => ({
+		["--trees-selected-bg-override"]: theme.selectedBg,
+		["--trees-selected-fg-override"]: theme.selectedFg,
+		["--trees-focus-ring-color-override"]: theme.selectedFg,
+		["--trees-selected-focused-border-color-override"]: theme.selectedFg,
+		["--trees-bg-override"]: cssVarFromToken("--bg-root"),
+		["--trees-input-bg-override"]: cssVarFromToken("--bg-input"),
+		["--trees-fg-override"]: theme.fg,
+		["--trees-bg-muted-override"]: theme.hoverBg,
+		["--trees-border-color-override"]: theme.border,
+		["--trees-fg-muted-override"]: theme.mutedFg,
+		height: height ?? "100%",
+		...style
+	}), [
+		theme,
+		height,
+		style
+	]);
+	return /* @__PURE__ */ jsx(FileTree, {
+		model,
+		header,
+		renderContextMenu,
+		className,
+		style: themeStyle
+	});
+}
+//#endregion
+export { RichFileTree };

package/dist/files.d.ts

@@ -1,2 +1,7 @@
-import { C as FileNode, D as filterFileTree, E as FileTreeVisibilityOptions, S as RichFileTreeThemeVars, T as FileTreeProps, _ as parseCsv, a as getCodeLanguage, b as RichFileTreeGitStatus, c as resolveFilePreviewKind, d as FileTabData, f as FileTabs, g as FilePreviewProps, h as FilePreview, i as fileExtension, l as FileArtifactPane, m as CSV_PREVIEW_ROW_LIMIT, n as FilePreviewKind, o as getFormatLabel, p as FileTabsProps, r as detectFileFormat, s as getSyntaxLanguage, t as FileFormat, u as FileArtifactPaneProps, v as RichFileTree, w as FileTree, x as RichFileTreeProps, y as RichFileTreeGitEntry } from "./index-CJ8wRfiC.js";
+import { FileNode, FileTree, FileTreeProps, FileTreeVisibilityOptions, filterFileTree } from "./files/file-tree.js";
+import { RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars } from "./files/rich-file-tree.js";
+import { CSV_PREVIEW_ROW_LIMIT, FilePreview, FilePreviewProps, parseCsv } from "./files/file-preview.js";
+import { FileTabData, FileTabs, FileTabsProps } from "./files/file-tabs.js";
+import { FileArtifactPane, FileArtifactPaneProps } from "./files/file-artifact-pane.js";
+import { FileFormat, FilePreviewKind, detectFileFormat, fileExtension, getCodeLanguage, getFormatLabel, getSyntaxLanguage, resolveFilePreviewKind } from "./files/file-format.js";
 export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };

package/dist/files.js

@@ -1,3 +1,7 @@
-import { a as getSyntaxLanguage, i as getFormatLabel, n as fileExtension, o as resolveFilePreviewKind, r as getCodeLanguage, t as detectFileFormat } from "./file-format-BgXbr-Ib.js";
-import { a as parseCsv, c as filterFileTree, i as FilePreview, n as FileTabs, o as RichFileTree, r as CSV_PREVIEW_ROW_LIMIT, s as FileTree, t as FileArtifactPane } from "./files-hywocVZz.js";
+import { detectFileFormat, fileExtension, getCodeLanguage, getFormatLabel, getSyntaxLanguage, resolveFilePreviewKind } from "./files/file-format.js";
+import { FileTree, filterFileTree } from "./files/file-tree.js";
+import { RichFileTree } from "./files/rich-file-tree.js";
+import { CSV_PREVIEW_ROW_LIMIT, FilePreview, parseCsv } from "./files/file-preview.js";
+import { FileTabs } from "./files/file-tabs.js";
+import { FileArtifactPane } from "./files/file-artifact-pane.js";
 export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FilePreview, FileTabs, FileTree, RichFileTree, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };

package/dist/hooks/use-auth.d.ts

@@ -0,0 +1,40 @@
+//#region src/hooks/use-auth.d.ts
+export interface AuthUser {
+  customer_id: string;
+  email: string;
+  name?: string;
+  tier: string;
+  github?: {
+    login: string;
+    connected: boolean;
+  } | null;
+  session_expires_at?: string;
+}
+export interface UseAuthOptions {
+  apiBaseUrl: string;
+  revalidateOnFocus?: boolean;
+  shouldRetryOnError?: boolean;
+}
+export interface UseAuthResult {
+  user: AuthUser | null;
+  isLoading: boolean;
+  isError: boolean;
+  error: Error | null;
+  mutate: () => Promise<void>;
+}
+/**
+ * Hook for managing authentication state.
+ * Fetches user session from the API and provides loading/error states.
+ */
+export declare function useAuth({ apiBaseUrl, revalidateOnFocus, shouldRetryOnError }: UseAuthOptions): UseAuthResult;
+/**
+ * Creates a fetcher function that includes auth credentials.
+ * Uses both cookie-based session and localStorage API key for backwards compatibility.
+ */
+export declare function createAuthFetcher(_apiBaseUrl: string): <T = unknown>(url: string, options?: RequestInit) => Promise<T>;
+/**
+ * Hook to get the API key from localStorage.
+ * For backwards compatibility with API key-based auth.
+ */
+export declare function useApiKey(): string | null;
+//#endregion

package/dist/hooks/use-auth.js

@@ -0,0 +1,91 @@
+"use client";
+import * as React from "react";
+//#region src/hooks/use-auth.ts
+/**
+* Hook for managing authentication state.
+* Fetches user session from the API and provides loading/error states.
+*/
+function useAuth({ apiBaseUrl, revalidateOnFocus = false, shouldRetryOnError = false }) {
+	const [user, setUser] = React.useState(null);
+	const [isLoading, setIsLoading] = React.useState(true);
+	const [error, setError] = React.useState(null);
+	const retryTimerRef = React.useRef(null);
+	const abortRef = React.useRef(null);
+	const fetchSession = React.useCallback(async () => {
+		abortRef.current?.abort();
+		const controller = new AbortController();
+		abortRef.current = controller;
+		setIsLoading(true);
+		setError(null);
+		try {
+			const res = await fetch(`${apiBaseUrl}/auth/session`, {
+				credentials: "include",
+				signal: controller.signal
+			});
+			if (!res.ok) throw new Error("Not authenticated");
+			const data = await res.json();
+			if (data.success && data.data) setUser(data.data);
+			else setUser(null);
+		} catch (err) {
+			if (err.name === "AbortError") return;
+			setError(err instanceof Error ? err : /* @__PURE__ */ new Error("Unknown error"));
+			setUser(null);
+			if (shouldRetryOnError) {
+				if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+				retryTimerRef.current = setTimeout(fetchSession, 5e3);
+			}
+		} finally {
+			if (!controller.signal.aborted) setIsLoading(false);
+		}
+	}, [apiBaseUrl, shouldRetryOnError]);
+	React.useEffect(() => {
+		fetchSession();
+		return () => {
+			abortRef.current?.abort();
+			if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+		};
+	}, [fetchSession]);
+	React.useEffect(() => {
+		if (!revalidateOnFocus) return;
+		const handleFocus = () => {
+			fetchSession();
+		};
+		window.addEventListener("focus", handleFocus);
+		return () => window.removeEventListener("focus", handleFocus);
+	}, [revalidateOnFocus, fetchSession]);
+	return {
+		user,
+		isLoading,
+		isError: !!error,
+		error,
+		mutate: fetchSession
+	};
+}
+/**
+* Creates a fetcher function that includes auth credentials.
+* Uses both cookie-based session and localStorage API key for backwards compatibility.
+*/
+function createAuthFetcher(_apiBaseUrl) {
+	return async function authFetcher(url, options) {
+		const res = await fetch(url, {
+			...options,
+			credentials: "include",
+			headers: { ...options?.headers }
+		});
+		if (!res.ok) throw new Error(`Request failed with status ${res.status}`);
+		return res.json();
+	};
+}
+/**
+* Hook to get the API key from localStorage.
+* For backwards compatibility with API key-based auth.
+*/
+function useApiKey() {
+	const [apiKey, setApiKey] = React.useState(null);
+	React.useEffect(() => {
+		if (typeof window !== "undefined") setApiKey(localStorage.getItem("apiKey"));
+	}, []);
+	return apiKey;
+}
+//#endregion
+export { createAuthFetcher, useApiKey, useAuth };

package/dist/hooks/use-auto-scroll.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+//#region src/hooks/use-auto-scroll.d.ts
+/**
+ * Scroll-to-bottom behaviour: sticks to the bottom while streaming,
+ * pauses when user scrolls up, resumes when user scrolls back down.
+ */
+export declare function useAutoScroll(containerRef: RefObject<HTMLElement | null>, deps?: unknown[]): {
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+};
+//#endregion

package/dist/hooks/use-auto-scroll.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/hooks/use-auto-scroll.ts
+const BOTTOM_THRESHOLD = 40;
+/**
+* Scroll-to-bottom behaviour: sticks to the bottom while streaming,
+* pauses when user scrolls up, resumes when user scrolls back down.
+*/
+function useAutoScroll(containerRef, deps = []) {
+	const [isAtBottom, setIsAtBottom] = useState(true);
+	const userScrolledUp = useRef(false);
+	const checkBottom = useCallback(() => {
+		const el = containerRef.current;
+		if (!el) return true;
+		return el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD;
+	}, [containerRef]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const onScroll = () => {
+			const atBottom = checkBottom();
+			setIsAtBottom(atBottom);
+			userScrolledUp.current = !atBottom;
+		};
+		el.addEventListener("scroll", onScroll, { passive: true });
+		return () => el.removeEventListener("scroll", onScroll);
+	}, [containerRef, checkBottom]);
+	useEffect(() => {
+		if (userScrolledUp.current) return;
+		const el = containerRef.current;
+		if (!el) return;
+		el.scrollTop = el.scrollHeight;
+	}, deps);
+	return {
+		isAtBottom,
+		scrollToBottom: useCallback(() => {
+			const el = containerRef.current;
+			if (!el) return;
+			userScrolledUp.current = false;
+			el.scrollTo({
+				top: el.scrollHeight,
+				behavior: "smooth"
+			});
+			setIsAtBottom(true);
+		}, [containerRef])
+	};
+}
+//#endregion
+export { useAutoScroll };

package/dist/hooks/use-dropdown-menu.d.ts

@@ -0,0 +1,12 @@
+//#region src/hooks/use-dropdown-menu.d.ts
+interface UseDropdownMenuOptions {
+  closeOnEsc?: boolean;
+}
+export declare function useDropdownMenu(options?: UseDropdownMenuOptions): {
+  open: boolean;
+  setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+  ref: import("react").RefObject<HTMLDivElement | null>;
+  toggle: () => void;
+  close: () => void;
+};
+//#endregion

package/dist/hooks/use-dropdown-menu.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/use-dropdown-menu.ts
+function useDropdownMenu(options) {
+	const closeOnEsc = options?.closeOnEsc ?? true;
+	const [open, setOpen] = useState(false);
+	const ref = useRef(null);
+	useEffect(() => {
+		function handleClick(e) {
+			if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+		}
+		if (open) document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [open]);
+	useEffect(() => {
+		if (!open || !closeOnEsc) return;
+		function handleKey(e) {
+			if (e.key === "Escape") setOpen(false);
+		}
+		document.addEventListener("keydown", handleKey);
+		return () => document.removeEventListener("keydown", handleKey);
+	}, [open, closeOnEsc]);
+	return {
+		open,
+		setOpen,
+		ref,
+		toggle: () => setOpen((prev) => !prev),
+		close: () => setOpen(false)
+	};
+}
+//#endregion
+export { useDropdownMenu };

package/dist/hooks/use-live-time.d.ts

@@ -0,0 +1,7 @@
+//#region src/hooks/use-live-time.d.ts
+/**
+ * Returns `Date.now()` and re-renders every `intervalMs` so derived
+ * values like "uptime" tick forward without polling upstream data.
+ */
+export declare function useLiveTime(intervalMs?: number): number;
+//#endregion

package/dist/hooks/use-live-time.js

@@ -0,0 +1,22 @@
+"use client";
+import * as React from "react";
+//#region src/hooks/use-live-time.ts
+/**
+* Returns `Date.now()` and re-renders every `intervalMs` so derived
+* values like "uptime" tick forward without polling upstream data.
+*/
+function useLiveTime(intervalMs = 1e3) {
+	const [now, setNow] = React.useState(() => Date.now());
+	React.useEffect(() => {
+		const delay = Math.max(Number.isFinite(intervalMs) && intervalMs > 0 ? intervalMs : 1e3, 100);
+		const id = window.setInterval(() => {
+			setNow(Date.now());
+		}, delay);
+		return () => {
+			window.clearInterval(id);
+		};
+	}, [intervalMs]);
+	return now;
+}
+//#endregion
+export { useLiveTime };

package/dist/hooks/use-realtime-session.d.ts

@@ -0,0 +1,32 @@
+import { SdkSessionEvent } from "./use-sdk-session.js";
+import { ActiveSessionConnectionState, ActiveSessionTransportMode, RegisterActiveSessionOptions } from "../stores/active-sessions-store.js";
+//#region src/hooks/use-realtime-session.d.ts
+export interface RealtimeSessionOptions extends RegisterActiveSessionOptions {
+  connectUrl?: string | null;
+  enabled?: boolean;
+  foreground?: boolean;
+  keepRegistered?: boolean;
+  reconnect?: boolean;
+  reconnectIntervalMs?: number;
+  maxReconnectAttempts?: number;
+  transportMode?: ActiveSessionTransportMode;
+  onEvent?: (event: SdkSessionEvent) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onError?: (error: Error) => void;
+}
+export interface RealtimeSessionState {
+  connectionState: ActiveSessionConnectionState;
+  lastError: string | null;
+  reconnectAttempts: number;
+  isConnected: boolean;
+}
+export interface RealtimeSessionTarget extends RealtimeSessionOptions {
+  key?: string;
+}
+export interface RealtimeSessionRegistryProps {
+  sessions: RealtimeSessionTarget[];
+}
+export declare function useRealtimeSession({ sessionId, projectId, projectLabel, title, href, metadata, connectUrl, enabled, foreground, keepRegistered, reconnect, reconnectIntervalMs, maxReconnectAttempts, transportMode, onEvent, onOpen, onClose, onError }: RealtimeSessionOptions): RealtimeSessionState;
+export declare function RealtimeSessionRegistry({ sessions }: RealtimeSessionRegistryProps): import("react").FunctionComponentElement<RealtimeSessionTarget>[];
+//#endregion