@parallelworks/ui 0.18.0 → 0.19.1

package/dist/ai/ui/Notice.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export type NoticeTone = 'neutral' | 'info' | 'warning' | 'danger';
+/** 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. */
+export declare function NoticeBar({ tone, title, children, action, onAction, testId, }: {
+    tone: NoticeTone;
+    title: string;
+    children?: ReactNode;
+    action?: string;
+    onAction?: () => void;
+    testId?: string;
+}): import("react").JSX.Element;
+/** 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. */
+export declare function NoticeCard({ tone, children, onDismiss, dismissLabel, testId, }: {
+    tone?: NoticeTone;
+    children: ReactNode;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    testId?: string;
+}): import("react").JSX.Element;

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/buttons.d.ts

@@ -0,0 +1 @@
+export declare const ghostButtonClasses = "inline-flex items-center gap-1.5 h-8 px-3 rounded-md text-sm text-(--theme-muted-text-color,#6c757d) hover:text-(--theme-app,#000000) hover:bg-(--theme-hover,#f3f4f6) transition-colors";

package/dist/ai/ui/codeBreaks.d.ts

@@ -0,0 +1,16 @@
+interface HastText {
+    type: 'text';
+    value: string;
+}
+interface HastElement {
+    type: 'element';
+    tagName: string;
+    properties?: Record<string, unknown>;
+    children: HastNode[];
+}
+type HastNode = HastText | HastElement | {
+    type: string;
+    children?: HastNode[];
+};
+export declare function rehypeCodeBreaks(): (tree: HastNode) => void;
+export {};

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.d.ts

@@ -0,0 +1 @@
+export declare const chatProseClasses: string;

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.d.ts

@@ -0,0 +1,81 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type OpenMenu, type RowMenuItem } from '../../list/index.js';
+export declare const SIDEBAR_RAIL_WIDTH_PX = 48;
+export declare const SIDEBAR_DEFAULT_WIDTH_PX = 256;
+/** The column a conversation list lives in: it animates between its width
+ *  and a rail, unless a drag is setting the width right now. */
+export declare function SidebarPanel({ collapsed, width, railWidth, resizing, label, className, style, children, }: {
+    collapsed: boolean;
+    width?: number;
+    railWidth?: number;
+    resizing?: boolean;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className, }: {
+    collapsed: boolean;
+    onToggle: () => void;
+    openLabel: string;
+    closeLabel: string;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function SidebarGroupHeading({ children, tone, testId, }: {
+    children: ReactNode;
+    /** 'attention' is for the group the reader is being asked to act on. */
+    tone?: 'default' | 'attention';
+    testId?: string;
+}): import("react").JSX.Element;
+/** 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. */
+export declare function SidebarRow({ selected, menuItems, openMenu, className, children, }: {
+    selected: boolean;
+    menuItems: RowMenuItem[];
+    openMenu: OpenMenu;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** 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. */
+export declare function SidebarRailItem({ selected, label, onSelect, testId, tooltipProps, children, }: {
+    selected: boolean;
+    label: string;
+    onSelect: () => void;
+    testId?: string;
+    tooltipProps?: Record<string, string>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function RenameDialog({ open, title, label, placeholder, confirmLabel, value, onChange, onConfirm, onClose, }: {
+    open: boolean;
+    title: string;
+    label: string;
+    placeholder: string;
+    confirmLabel: string;
+    value: string;
+    onChange: (value: string) => void;
+    onConfirm: () => void;
+    onClose: () => void;
+}): import("react").JSX.Element;
+export interface RowDialogStrings<T> {
+    deleteTitle: string;
+    deleteBody: (item: T) => ReactNode;
+    deleteAction: string;
+    renameTitle: string;
+    renameLabel: string;
+    renamePlaceholder: string;
+    renameAction: string;
+}
+/** 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. */
+export declare function useRowDialogs<T>({ strings, nameOf, onDelete, onRename, }: {
+    strings: RowDialogStrings<T>;
+    nameOf: (item: T) => string;
+    onDelete: (item: T) => Promise<boolean | undefined> | boolean | undefined;
+    onRename: (item: T, name: string) => Promise<boolean | undefined> | boolean | undefined;
+}): {
+    requestDelete: (item: T) => void;
+    requestRename: (item: T) => void;
+    dialogs: ReactNode;
+};

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

package/dist/ai/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function formatFileSize(bytes: number): string;
+export declare function isMac(): boolean;
+/** Only org models bill to an allocation; any other model ignores it. */
+export declare function isOrgModel(modelId: string | null | undefined): boolean;

package/dist/ai/utils.js

@@ -0,0 +1,23 @@
+//#region src/ai/utils.ts
+function formatFileSize(bytes) {
+	if (bytes === 0) return "0 B";
+	const k = 1024;
+	const sizes = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return Number.parseFloat((bytes / k ** i).toFixed(2)) + " " + sizes[i];
+}
+function isMac() {
+	return navigator.platform.toUpperCase().includes("MAC");
+}
+/** Only org models bill to an allocation; any other model ignores it. */
+function isOrgModel(modelId) {
+	return modelId?.startsWith("org:") ?? false;
+}
+//#endregion
+export { formatFileSize, isMac, isOrgModel };