@parallelworks/ui 0.19.0 → 0.19.1

package/dist/ai/strings.js

@@ -0,0 +1,175 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/strings.tsx
+var defaultChatStrings = {
+	modal: {
+		cancel: "Cancel",
+		save: "Save",
+		loading: "Loading…"
+	},
+	shareConversation: {
+		title: "Share Conversation",
+		loadError: "Failed to load sharing settings",
+		saveSuccess: "Sharing settings saved",
+		orgAccess: "Organization Access",
+		orgCanView: "Anyone in the organization can view",
+		allowCollaboration: "Allow collaboration (edit messages)",
+		groupAccess: "Group Access",
+		noGroups: "No groups have access yet",
+		viewOnly: "View only",
+		canCollaborate: "Can collaborate",
+		remove: "Remove",
+		addGroups: "Add groups…",
+		info: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("strong", { children: "View" }),
+			" permission allows reading the conversation.",
+			/* @__PURE__ */ jsx("br", {}),
+			/* @__PURE__ */ jsx("strong", { children: "Collaborate" }),
+			" permission allows adding messages."
+		] }),
+		shareButton: "Share conversation"
+	},
+	blockedGroup: {
+		title: "Billing group \"{group}\" is over its allocation",
+		message: "It has reached its allocation limit. Messages to this provider are paused until your administrator increases the allocation."
+	},
+	queue: { remove: "Remove queued message" },
+	activity: {
+		tokens: (input, output) => `↑${input} ↓${output} tokens`,
+		stop: "Stop"
+	},
+	emptyState: {
+		greeting: null,
+		modernSubtitle: "Pick a starter below or type a question to your selected model.",
+		noProvidersTitle: "No AI providers configured",
+		noProvidersBody: "To start chatting, add an AI provider.",
+		addProvider: "Add a provider",
+		sessionUnreachableTitle: (session) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			"Session “",
+			session,
+			"” is not reachable"
+		] }),
+		sessionUnreachableBody: "The session may be offline or still starting up. You can select a different model to continue.",
+		retry: "Retry"
+	},
+	input: {
+		placeholder: "Ask anything",
+		placeholderLoading: "Loading models...",
+		placeholderNoProviders: "Add an AI provider to start chatting",
+		attachFiles: "Attach files",
+		stopGenerating: "Stop generating (Escape)",
+		sendMessage: "Send message (Enter)",
+		filesAttached: (count) => `${count} file${count > 1 ? "s" : ""} attached`
+	},
+	thinking: {
+		label: "Thinking",
+		ellipsis: "Thinking...",
+		thoughtFor: (duration) => `Thought for ${duration}`,
+		activity: "Activity"
+	},
+	thread: { viewOnly: "You have view only access" },
+	sidebar: {
+		groupToday: "Today",
+		groupYesterday: "Yesterday",
+		groupThisWeek: "This Week",
+		groupThisMonth: "This Month",
+		groupOlder: "Older",
+		untitled: "Untitled",
+		rename: "Rename",
+		share: "Share",
+		delete: "Delete",
+		sharedWithYou: "Shared with you",
+		moreOptions: "More options",
+		openSidebar: "Open sidebar",
+		closeSidebar: "Close sidebar",
+		newChat: "New chat",
+		attachments: "Attachments",
+		connectTools: "Connect Tools",
+		manageProviders: "Manage Providers",
+		noConversations: "No conversations yet",
+		deleteTitle: "Delete Conversation",
+		deleteBody: "Are you sure you want to delete this conversation? This action cannot be undone.",
+		deleteAction: "Delete",
+		renameTitle: "Rename Conversation",
+		renameAction: "Rename",
+		renameLabel: "Conversation title",
+		renamePlaceholder: "Enter a new title"
+	},
+	attachmentUpload: {
+		fileTooLarge: (maxSize) => `File too large. Maximum size is ${maxSize}`,
+		maxFilesAllowed: (max) => `Maximum ${max} files allowed`,
+		remove: "Remove",
+		dropFilesHere: "Drop files here",
+		addFiles: "Add files (drag or click)"
+	},
+	attachmentManager: {
+		title: "Attachments",
+		empty: "No attachments yet",
+		download: "Download",
+		delete: "Delete",
+		loadMore: "Load more",
+		loading: "Loading..."
+	},
+	branch: {
+		previous: "Previous branch",
+		next: "Next branch"
+	},
+	chrome: {
+		searchPlaceholder: "Search conversations",
+		searchLabel: "Search conversations (⌘/Ctrl+Shift+F)",
+		noMatches: "No conversations match your search",
+		download: "Download",
+		exportError: "Failed to export conversation",
+		jumpToLatest: "Jump to latest"
+	},
+	messageMeta: {
+		stopped: "Stopped",
+		showMore: "Show more",
+		showLess: "Show less",
+		tokens: (total) => `${total.toLocaleString()} tokens`,
+		tokensBreakdown: (prompt, completion) => `${prompt.toLocaleString()} in · ${completion.toLocaleString()} out`,
+		copy: "Copy message",
+		edit: "Edit message",
+		regenerate: "Regenerate response",
+		retry: "Retry",
+		editPlaceholder: "Edit your message...",
+		cancel: "Cancel",
+		send: "Send"
+	},
+	permissions: {
+		choose: "Choose what the agent may do",
+		readOnly: "Read only",
+		acceptEdits: "Accept edits",
+		bypassPermissions: "Bypass permissions",
+		plan: "Plan",
+		readOnlyHint: "The workspace can be read but not changed.",
+		acceptEditsHint: "File edits are applied without asking. The workspace can be changed without your review.",
+		bypassPermissionsHint: "Every action is taken without asking, including commands that change the system.",
+		planHint: "The workspace is left unchanged while a plan is drafted."
+	},
+	agentTranscript: {
+		showMore: "Show more",
+		showLess: "Show less",
+		running: "Running…",
+		done: "Done",
+		failed: "Failed",
+		interrupted: "Interrupted",
+		noOutput: "(no output)",
+		diffTruncated: "Diff truncated",
+		moreLines: "+{count} more lines",
+		allowOnce: "Yes, allow this command",
+		allowDirectory: "Yes, and allow this directory for the session",
+		deny: "No, deny this command",
+		denyWithFeedback: "No, and provide feedback to the agent",
+		feedbackPlaceholder: "Tell the agent what to do instead…",
+		send: "Send",
+		answered: "Answered",
+		writeOwnAnswer: "Write my own answer…",
+		subagent: "Task",
+		tasks: "Tasks",
+		planPending: "Plan awaiting approval in the terminal",
+		approvalPending: "Waiting for an answer in the terminal",
+		approvalOptions: "Offered choices"
+	}
+};
+//#endregion
+export { defaultChatStrings };

package/dist/ai/ui/Avatar.js

@@ -0,0 +1,35 @@
+import cx from "classnames";
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ai/ui/Avatar.tsx
+var sizeClasses = {
+	sm: "w-6 h-6 text-xs",
+	md: "w-8 h-8 text-sm",
+	lg: "w-10 h-10 text-base",
+	xl: "w-12 h-12 text-lg",
+	"2xl": "w-16 h-16 text-xl"
+};
+function Avatar({ src, name, size = "md", className }) {
+	const [erroredUrl, setErroredUrl] = useState(null);
+	const errored = erroredUrl !== null && erroredUrl === src;
+	const initials = useMemo(() => {
+		if (!name) return "?";
+		const parts = name.split(/[\s.]+/).filter(Boolean);
+		if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+		return parts[0]?.[0]?.toUpperCase() || "?";
+	}, [name]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("relative inline-flex", className),
+		children: !src || errored ? /* @__PURE__ */ jsx("div", {
+			className: cx("rounded-full flex items-center justify-center font-medium", "bg-(--theme-element,#3b82f6) text-(--theme-element-text,#ffffff)", sizeClasses[size]),
+			children: initials
+		}) : /* @__PURE__ */ jsx("img", {
+			src,
+			alt: name || "User avatar",
+			onError: () => setErroredUrl(src),
+			className: cx("rounded-full object-cover", sizeClasses[size])
+		})
+	});
+}
+//#endregion
+export { Avatar };

package/dist/ai/ui/Dropdown.js

@@ -0,0 +1,110 @@
+import { ChevronDownIcon } from "../../icons.js";
+import { TOOLTIP_ID } from "../../components/Tooltip.js";
+import cx from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/ai/ui/Dropdown.tsx
+/** Matches the list's max-h-60, so the flip decision matches what renders. */
+var MAX_LIST_HEIGHT_PX = 240;
+function Dropdown({ options, value, onChange, placeholder = "", disabled = false, variant = "default", icon, valueLabel, ariaLabel, hint, wrapperClassName, textBoxClassName, listClassName }) {
+	const [open, setOpen] = useState(false);
+	const wrapperRef = useRef(null);
+	const listRef = useRef(null);
+	const [position, setPosition] = useState({
+		top: 0,
+		bottom: 0,
+		left: 0,
+		width: 0,
+		flipped: false
+	});
+	const updatePosition = useCallback(() => {
+		const rect = wrapperRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		const below = window.innerHeight - rect.bottom;
+		const flipped = below < MAX_LIST_HEIGHT_PX && rect.top > below;
+		setPosition({
+			top: rect.bottom + 4,
+			bottom: window.innerHeight - rect.top + 4,
+			left: rect.left,
+			width: rect.width,
+			flipped
+		});
+	}, []);
+	useEffect(() => {
+		if (!open) return;
+		updatePosition();
+		const onPointerDown = (e) => {
+			const target = e.target;
+			if (!wrapperRef.current?.contains(target) && !listRef.current?.contains(target)) setOpen(false);
+		};
+		const onKey = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		window.addEventListener("mousedown", onPointerDown);
+		window.addEventListener("keydown", onKey);
+		window.addEventListener("scroll", updatePosition, true);
+		window.addEventListener("resize", updatePosition);
+		return () => {
+			window.removeEventListener("mousedown", onPointerDown);
+			window.removeEventListener("keydown", onKey);
+			window.removeEventListener("scroll", updatePosition, true);
+			window.removeEventListener("resize", updatePosition);
+		};
+	}, [open, updatePosition]);
+	const selected = options.find((o) => o.value === value);
+	const shown = valueLabel ?? selected?.label;
+	const tooltip = hint && !open ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": hint
+	} : {};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapperRef,
+		className: cx("relative", wrapperClassName),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled,
+			onClick: () => setOpen((o) => !o),
+			"aria-haspopup": "listbox",
+			"aria-expanded": open,
+			"aria-label": ariaLabel,
+			...tooltip,
+			className: cx("flex items-center justify-between gap-2 cursor-pointer", variant === "default" && "bg-(--theme-input-bg,#f9fafb) text-(--theme-input,#000000)", "disabled:opacity-50 disabled:cursor-not-allowed", textBoxClassName || "text-sm border border-(--theme-border,#d1d5db) rounded px-2 py-1.5 w-full"),
+			children: [
+				icon,
+				/* @__PURE__ */ jsx("span", {
+					className: cx("truncate", !shown && "text-(--theme-muted-text-color,#6c757d)"),
+					children: shown || placeholder
+				}),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 shrink-0 opacity-60" })
+			]
+		}), open && createPortal(/* @__PURE__ */ jsx("ul", {
+			ref: listRef,
+			style: {
+				position: "fixed",
+				...position.flipped ? { bottom: position.bottom } : { top: position.top },
+				left: position.left,
+				minWidth: position.width,
+				zIndex: 300
+			},
+			className: cx("max-h-60 overflow-auto rounded-md border border-(--theme-border,#e5e7eb) bg-(--theme-panel-bg,#ffffff) py-1 shadow-lg", listClassName),
+			children: options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					onChange(option.value);
+					setOpen(false);
+				},
+				className: cx("w-full cursor-pointer px-3 py-1.5 text-left text-sm hover:bg-(--theme-hover,#f3f4f6)", option.muted ? "text-(--theme-muted-text-color,#6c757d)" : "text-(--theme-panel,#000000)", option.value === value && !option.muted && "font-semibold"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block truncate",
+					children: option.label
+				}), option.description && /* @__PURE__ */ jsx("span", {
+					className: "mt-0.5 block text-xs font-normal leading-snug text-(--theme-muted-text-color,#6c757d)",
+					children: option.description
+				})]
+			}) }, option.value))
+		}), document.body)]
+	});
+}
+//#endregion
+export { Dropdown as default };

package/dist/ai/ui/Markdown.js

@@ -0,0 +1,79 @@
+import { useChatConfig } from "../core/config.js";
+import { rehypeCodeBreaks } from "./codeBreaks.js";
+import cx from "classnames";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { Streamdown, defaultRehypePlugins } from "streamdown";
+//#region src/ai/ui/Markdown.tsx
+function schemeIsDark() {
+	if (typeof document === "undefined") return false;
+	const scheme = getComputedStyle(document.documentElement).colorScheme;
+	if (scheme.includes("dark") !== scheme.includes("light")) return scheme.includes("dark");
+	return typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+var basePlugins = {
+	code,
+	math
+};
+var pluginsWithMermaid;
+var mermaidLoad;
+function loadMermaid() {
+	mermaidLoad ??= import("@streamdown/mermaid").then(({ createMermaidPlugin }) => {
+		const base = createMermaidPlugin();
+		pluginsWithMermaid = {
+			...basePlugins,
+			mermaid: {
+				...base,
+				getMermaid: (config) => base.getMermaid({
+					theme: schemeIsDark() ? "dark" : "neutral",
+					...config
+				})
+			}
+		};
+	});
+	return mermaidLoad;
+}
+var shikiTheme = ["github-light", "github-dark"];
+var rehypePlugins = [...Object.values(defaultRehypePlugins), rehypeCodeBreaks];
+function Markdown({ children, isStreaming, controls }) {
+	const { markdownComponents } = useChatConfig();
+	const needsMermaid = !!children && children.includes("```mermaid");
+	const [, setMermaidReady] = useState(() => !!pluginsWithMermaid);
+	useEffect(() => {
+		if (!needsMermaid || pluginsWithMermaid) return;
+		let live = true;
+		loadMermaid().then(() => {
+			if (live) setMermaidReady(true);
+		});
+		return () => {
+			live = false;
+		};
+	}, [needsMermaid]);
+	const plugins = needsMermaid && pluginsWithMermaid ? pluginsWithMermaid : basePlugins;
+	return /* @__PURE__ */ jsx("div", {
+		className: "markdown whitespace-normal text-start w-full",
+		children: /* @__PURE__ */ jsx(Streamdown, {
+			mode: isStreaming ? "streaming" : "static",
+			...isStreaming === void 0 ? {} : { isAnimating: isStreaming },
+			...isStreaming ? { caret: "block" } : {},
+			...controls === void 0 ? {} : { controls },
+			plugins,
+			rehypePlugins,
+			shikiTheme,
+			components: {
+				a: ({ node, ...props }) => /* @__PURE__ */ jsx("a", {
+					...props,
+					className: cx("link wrap-break-word", props.className),
+					target: "_blank",
+					rel: "noopener noreferrer"
+				}),
+				...markdownComponents
+			},
+			children: children || ""
+		})
+	});
+}
+//#endregion
+export { Markdown as default };

package/dist/ai/ui/Notice.js

@@ -0,0 +1,77 @@
+import { AlertCircleIcon, CloseIcon, InfoCircleIcon } from "../../icons.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/ui/Notice.tsx
+var barTone = {
+	neutral: "theme-border theme-muted-panel",
+	info: "border-blue-500/30 bg-blue-500/10",
+	warning: "border-amber-500/40 bg-amber-500/10",
+	danger: "border-red-500/30 bg-red-500/10"
+};
+var iconTone = {
+	neutral: "theme-muted-text",
+	info: "text-blue-600 dark:text-blue-400",
+	warning: "text-amber-600 dark:text-amber-400",
+	danger: "text-red-600 dark:text-red-400"
+};
+var titleTone = {
+	neutral: "theme-text",
+	info: "text-blue-700 dark:text-blue-300",
+	warning: "text-amber-700 dark:text-amber-300",
+	danger: "text-red-700 dark:text-red-300"
+};
+var cardTone = {
+	neutral: "theme-border theme-muted-panel theme-muted-text",
+	info: "border-blue-500/40 bg-blue-500/10 text-blue-800 dark:text-blue-200",
+	warning: "border-amber-500/40 bg-amber-500/10 text-amber-800 dark:text-amber-200",
+	danger: "border-red-500/40 bg-red-500/10 text-red-700 dark:text-red-300"
+};
+/** A standing condition on the surface: a full-width bar under the header
+*  with a title, an explanation, and the one thing the reader can do about it. */
+function NoticeBar({ tone, title, children, action, onAction, testId }) {
+	const Icon = tone === "danger" || tone === "warning" ? AlertCircleIcon : InfoCircleIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cx("flex shrink-0 items-start gap-3 border-b px-6 py-3", barTone[tone]),
+		children: [
+			/* @__PURE__ */ jsx(Icon, { className: cx("mt-0.5 h-4 w-4 shrink-0", iconTone[tone]) }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: cx("text-sm font-medium", titleTone[tone]),
+					children: title
+				}), children && /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-xs theme-muted-text",
+					children
+				})]
+			}),
+			action && onAction && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onAction,
+				className: "shrink-0 rounded-lg border theme-border bg-(--theme-panel-bg) px-3 py-1.5 text-xs theme-text hover:theme-hover",
+				children: action
+			})
+		]
+	});
+}
+/** An inline notice next to the composer. One with no dismiss states a fact
+*  that is still true; one with a dismiss is a message the reader can put away. */
+function NoticeCard({ tone = "neutral", children, onDismiss, dismissLabel, testId }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cx("flex items-start gap-2 rounded-lg border px-3 py-2 text-xs", cardTone[tone]),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1",
+			children
+		}), onDismiss && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onDismiss,
+			"aria-label": dismissLabel,
+			title: dismissLabel,
+			className: "shrink-0 rounded p-0.5 hover:theme-hover",
+			children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-3 w-3" })
+		})]
+	});
+}
+//#endregion
+export { NoticeBar, NoticeCard };

package/dist/ai/ui/codeBreaks.js

@@ -0,0 +1,36 @@
+//#region src/ai/ui/codeBreaks.ts
+var BREAK_AFTER = /(?<=[/])/;
+function withBreaks(text) {
+	const pieces = text.split(BREAK_AFTER);
+	const out = [];
+	pieces.forEach((piece, i) => {
+		if (i > 0) out.push({
+			type: "element",
+			tagName: "wbr",
+			properties: {},
+			children: []
+		});
+		if (piece !== "") out.push({
+			type: "text",
+			value: piece
+		});
+	});
+	return out;
+}
+function walk(node, insidePre) {
+	if (!("children" in node) || !node.children) return;
+	const el = node;
+	const pre = insidePre || node.type === "element" && el.tagName === "pre";
+	if (node.type === "element" && el.tagName === "code" && !pre) {
+		el.children = el.children.flatMap((child) => child.type === "text" ? withBreaks(child.value) : [child]);
+		return;
+	}
+	for (const child of node.children) walk(child, pre);
+}
+function rehypeCodeBreaks() {
+	return (tree) => {
+		walk(tree, false);
+	};
+}
+//#endregion
+export { rehypeCodeBreaks };

package/dist/ai/ui/prose.js

@@ -0,0 +1,13 @@
+//#region src/ai/ui/prose.ts
+var chatProseClasses = [
+	"chat-ink prose max-w-none leading-relaxed",
+	"prose-p:my-3 prose-p:leading-relaxed",
+	"prose-headings:font-semibold prose-headings:mt-4 prose-headings:mb-1",
+	"prose-h1:text-xl prose-h2:text-lg prose-h3:text-[1rem] prose-h4:text-[1rem]",
+	"prose-ul:my-3 prose-ol:my-3 prose-li:my-0.5 prose-li:leading-relaxed",
+	"[&_li>p]:my-0.5 [&_li>p:first-child]:mt-0 [&_li>p:last-child]:mb-0",
+	"prose-strong:font-semibold prose-pre:my-0 prose-table:my-0",
+	"[&>.markdown>*:first-child]:mt-0 [&>.markdown>*:last-child]:mb-0"
+].join(" ");
+//#endregion
+export { chatProseClasses };

package/dist/ai/ui/sidebar.js

@@ -0,0 +1,148 @@
+import { SidebarIcon } from "../../icons.js";
+import { ConfirmModal } from "../../components/ConfirmModal.js";
+import { focusOnMount } from "../../components/focus.js";
+import { MoreButton, rowContextMenuProps, useRowMenuActive } from "../../list/RowContextMenu.js";
+import cx from "classnames";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+var HIGHLIGHT_SELECTED = "bg-[color-mix(in_oklab,var(--theme-panel)_8%,transparent)]";
+var HIGHLIGHT_HOVER = "hover:bg-[color-mix(in_oklab,var(--theme-panel)_5%,transparent)]";
+/** The column a conversation list lives in: it animates between its width
+*  and a rail, unless a drag is setting the width right now. */
+function SidebarPanel({ collapsed, width = 256, railWidth = 48, resizing = false, label, className, style, children }) {
+	return /* @__PURE__ */ jsx("aside", {
+		"aria-label": label,
+		className: cx("relative h-full flex shrink-0 flex-col bg-(--theme-muted-panel-bg) overflow-hidden", !resizing && "transition-[width] duration-300 ease-in-out", className),
+		style: {
+			width: collapsed ? railWidth : width,
+			...style
+		},
+		children
+	});
+}
+function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className }) {
+	const label = collapsed ? openLabel : closeLabel;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onToggle,
+		title: label,
+		"aria-label": label,
+		"aria-expanded": !collapsed,
+		className: cx("flex h-7 w-7 items-center justify-center rounded-md theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text", className),
+		children: /* @__PURE__ */ jsx(SidebarIcon, { className: "h-4 w-4" })
+	});
+}
+function SidebarGroupHeading({ children, tone = "default", testId }) {
+	return /* @__PURE__ */ jsx("h4", {
+		"data-testid": testId,
+		className: cx("mt-4 mb-1 whitespace-nowrap px-2 text-xs font-medium", tone === "attention" ? "text-amber-700 dark:text-amber-300" : "theme-muted-text"),
+		children
+	});
+}
+/** One entry in the list: the row highlights while it is the open one or
+*  while its menu is up, and the menu opens from its button or a right-click. */
+function SidebarRow({ selected, menuItems, openMenu, className, children }) {
+	const { active, openMenu: openRowMenu } = useRowMenuActive(openMenu);
+	return /* @__PURE__ */ jsxs("li", {
+		className: cx("group relative flex items-center justify-between rounded-lg px-2 py-1 transition-colors duration-150", selected || active ? HIGHLIGHT_SELECTED : HIGHLIGHT_HOVER, className),
+		...rowContextMenuProps(openRowMenu, menuItems),
+		children: [children, /* @__PURE__ */ jsx(MoreButton, {
+			active,
+			onOpen: (x, y) => openRowMenu(x, y, menuItems)
+		})]
+	});
+}
+/** One entry in the collapsed rail: a square the size of the toggle, with the
+*  same highlight as a row, holding whatever stands in for the item. */
+function SidebarRailItem({ selected, label, onSelect, testId, tooltipProps, children }) {
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-testid": testId,
+		"aria-label": label,
+		"aria-current": selected ? "page" : void 0,
+		onClick: onSelect,
+		...tooltipProps,
+		className: cx("flex h-7 w-7 items-center justify-center rounded-md transition-colors", HIGHLIGHT_HOVER, selected && HIGHLIGHT_SELECTED),
+		children
+	}) });
+}
+function RenameDialog({ open, title, label, placeholder, confirmLabel, value, onChange, onConfirm, onClose }) {
+	return /* @__PURE__ */ jsx(ConfirmModal, {
+		open,
+		onClose,
+		align: "center",
+		closeOnConfirm: false,
+		title,
+		confirmLabel,
+		confirmDisabled: !value.trim(),
+		onConfirm,
+		children: /* @__PURE__ */ jsxs("label", {
+			className: "block space-y-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium theme-text",
+				children: label
+			}), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				value,
+				onChange: (e) => onChange(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter" && value.trim()) onConfirm();
+				},
+				placeholder,
+				ref: focusOnMount,
+				className: "w-full rounded-md border theme-border bg-(--theme-input-bg) px-3 py-2 text-sm theme-text placeholder:theme-muted-text focus:border-(--theme-element) focus:outline-none"
+			})]
+		})
+	});
+}
+/** The delete confirmation and rename dialog every list of rows needs, with
+*  the item they are about. A handler that returns false keeps its dialog
+*  open, for a refusal the reader should see before trying again. */
+function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
+	const [toDelete, setToDelete] = useState(null);
+	const [toRename, setToRename] = useState(null);
+	const [name, setName] = useState("");
+	const closeRename = () => {
+		setToRename(null);
+		setName("");
+	};
+	const confirmDelete = async () => {
+		if (toDelete === null) return;
+		if (await onDelete(toDelete) !== false) setToDelete(null);
+	};
+	const confirmRename = async () => {
+		const trimmed = name.trim();
+		if (toRename === null || !trimmed) return;
+		if (await onRename(toRename, trimmed) !== false) closeRename();
+	};
+	return {
+		requestDelete: setToDelete,
+		requestRename: (item) => {
+			setName(nameOf(item));
+			setToRename(item);
+		},
+		dialogs: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ConfirmModal, {
+			open: toDelete !== null,
+			onClose: () => setToDelete(null),
+			align: "center",
+			destructive: true,
+			closeOnConfirm: false,
+			title: strings.deleteTitle,
+			description: toDelete === null ? null : strings.deleteBody(toDelete),
+			confirmLabel: strings.deleteAction,
+			onConfirm: confirmDelete
+		}), /* @__PURE__ */ jsx(RenameDialog, {
+			open: toRename !== null,
+			onClose: closeRename,
+			title: strings.renameTitle,
+			label: strings.renameLabel,
+			placeholder: strings.renamePlaceholder,
+			confirmLabel: strings.renameAction,
+			value: name,
+			onChange: setName,
+			onConfirm: confirmRename
+		})] })
+	};
+}
+//#endregion
+export { RenameDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs };