@parallelworks/ui 0.29.0 → 0.30.0

package/dist/ai/core/sidebarState.js

@@ -0,0 +1,57 @@
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+//#region src/ai/core/sidebarState.ts
+var SIDEBAR_STORAGE_KEY = "aiChatSidebar";
+var LEGACY_COLLAPSED_STORAGE_KEY = "aiChatSidebarCollapsed";
+function readStoredSidebar() {
+	try {
+		const stored = globalThis.localStorage?.getItem(SIDEBAR_STORAGE_KEY);
+		if (stored === "expanded" || stored === "collapsed") return stored;
+		return globalThis.localStorage?.getItem(LEGACY_COLLAPSED_STORAGE_KEY) === "1" ? "collapsed" : "expanded";
+	} catch {
+		return "expanded";
+	}
+}
+function storeSidebar(state) {
+	if (state === "hidden") return;
+	try {
+		globalThis.localStorage?.setItem(SIDEBAR_STORAGE_KEY, state);
+	} catch {}
+}
+/** A value the host may own through a prop. Without the prop the provider
+*  keeps it; either way the change callback hears every change. The ref
+*  reads the latest value from callbacks that should not re-create. */
+function useControllable(controlled, initial, onChange, remember) {
+	const [own, setOwn] = useState(initial);
+	const value = controlled === void 0 ? own : controlled;
+	const latest = useRef({
+		value,
+		controlled: controlled !== void 0,
+		onChange,
+		remember
+	});
+	latest.current = {
+		value,
+		controlled: controlled !== void 0,
+		onChange,
+		remember
+	};
+	return [
+		value,
+		useCallback((next) => {
+			const l = latest.current;
+			if (Object.is(next, l.value)) return;
+			if (!l.controlled) {
+				setOwn(next);
+				l.remember?.(next);
+			}
+			l.onChange?.(next);
+		}, []),
+		latest
+	];
+}
+var ReportSidebarPresentationContext = createContext(() => {});
+function useReportSidebarPresentation() {
+	return useContext(ReportSidebarPresentationContext);
+}
+//#endregion
+export { ReportSidebarPresentationContext, readStoredSidebar, storeSidebar, useControllable, useReportSidebarPresentation };

package/dist/ai/index.d.ts

@@ -11,7 +11,7 @@ export { default as BlockedGroupBanner } from './components/BlockedGroupBanner.j
 export { default as BranchNavigator } from './components/BranchNavigator.js';
 export { default as ChatEmptyState } from './components/ChatEmptyState.js';
 export { type ChatInputHandle, default as ChatInput, } from './components/ChatInput.js';
-export { default as ChatLayout } from './components/ChatLayout.js';
+export { DRAWER_BELOW_PX, default as ChatLayout, type SidebarMode, } from './components/ChatLayout.js';
 export { default as ChatMessageView } from './components/ChatMessage.js';
 export { default as ChatMessageList } from './components/ChatMessageList.js';
 export { default as ChatSidebar } from './components/ChatSidebar.js';
@@ -34,6 +34,7 @@ export { KeyboardShortcutsProvider } from './core/KeyboardShortcutsProvider.js';
 export { applyPartDelta, finalizeParts } from './core/parts.js';
 export { pasteInlineMaxBytes } from './core/pastes.js';
 export { providerIssueFor } from './core/providerIssues.js';
+export type { SidebarPresentation, SidebarState } from './core/sidebarState.js';
 export { default as useDragDrop } from './core/useDragDrop.js';
 export { useKeyboardShortcuts } from './core/useKeyboardShortcuts.js';
 export { type ChatStrings, defaultChatStrings } from './strings.js';
@@ -41,5 +42,5 @@ export * from './types.js';
 export { ConversationSidebar, type ConversationSidebarGroup, useResizableSidebarWidth, } from './ui/ConversationSidebar.js';
 export { type DropdownOption, default as Dropdown } from './ui/Dropdown.js';
 export { NoticeBar, NoticeCard, type NoticeTone, OutputCard } from './ui/Notice.js';
-export { RenameDialog, type RowDialogStrings, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
+export { RenameDialog, type RowDialogStrings, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs, } from './ui/sidebar.js';
 export { formatFileSize, isMac, isOrgModel } from './utils.js';

package/dist/ai/index.js

@@ -35,14 +35,14 @@ import ChatEmptyState from "./components/ChatEmptyState.js";
 import { FOCUS_SIDEBAR_SEARCH_EVENT } from "./core/events.js";
 import { useKeyboardShortcuts } from "./core/useKeyboardShortcuts.js";
 import { KeyboardShortcutsProvider } from "./core/KeyboardShortcutsProvider.js";
-import { RenameDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
+import { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs } from "./ui/sidebar.js";
 import { ConversationSidebar, useResizableSidebarWidth } from "./ui/ConversationSidebar.js";
 import ShareDialog, { ShareButton } from "./components/ShareDialog.js";
 import ChatSidebar from "./components/ChatSidebar.js";
-import ChatLayout from "./components/ChatLayout.js";
+import ChatLayout, { DRAWER_BELOW_PX } from "./components/ChatLayout.js";
 import ChatMessage_default from "./components/ChatMessage.js";
 import ChatMessageList from "./components/ChatMessageList.js";
 import ChatThread from "./components/ChatThread.js";
 import ComposerFrame from "./components/ComposerFrame.js";
 import { NoticeBar, NoticeCard, OutputCard } from "./ui/Notice.js";
-export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ConnectToolsLink, ConversationSidebar, DEFAULT_PERMISSION_MODE, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };
+export { AGENT_COLOR_NAMES, ActivityLine, AgentMessageParts, AllocationSelector, ApprovalBlock, AttachmentManager, AttachmentUpload, BlockedGroupBanner, BranchNavigator, ChatAdapterError, ChatEmptyState, ChatInput, ChatLayout, ChatMessageList, ChatMessage_default as ChatMessageView, ChatProvider, ChatSidebar, ChatThread, ComposerContext, ComposerControls, ComposerFrame, ComposerSettings, ConnectToolsLink, ConversationSidebar, DEFAULT_PERMISSION_MODE, DRAWER_BELOW_PX, DragOverlay, Dropdown, FOCUS_SIDEBAR_SEARCH_EVENT, INTERRUPTED_NOTICE, KeyboardShortcutsProvider, MAX_EDIT_DIFF_LINES, MAX_WRITE_DIFF_LINES, ModelSelector, NAMED_PERMISSION_MODES, NoticeBar, NoticeCard, OutputCard, PermissionPicker, ProviderIssueBanner, RenameDialog, ShareButton, ShareDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, agentColorHex, agentTypeLabel, applyPartDelta, askQuestionFromArgs, bashExitCode, chatReducer, clampPermissionMode, classifyPseudoUserMessage, clip, compactCount, computeEditDiff, computeWriteRows, defaultChatStrings, durationToAbsHumanDuration, editSummary, finalizeParts, firstNonEmptyLine, formatElapsed, formatFileSize, fullToolArgs, getGreeting, getProviderKeyFromModelId, hiddenTranscriptTool, initialState, interruptionNotice, isEditDiffTool, isGroupableTool, isMac, isNamedPermissionMode, isOrgModel, languageForPath, lineDelta, parseEditArgs, parseSubagentNotice, pasteInlineMaxBytes, permissionModesUpTo, planFromArgs, plural, providerIssueFor, resolveChatConfig, resultFailed, rollupSentence, sanitizeLabel, sanitizePanelText, slashMatches, subagentDeliveryLine, summarizeToolArgs, taskCallFromArgs, thinkingHeading, tokenizeDiffLines, toolHeaderFor, toolSummary, useChat, useChatConfig, useDragDrop, useKeyboardShortcuts, useResizableSidebarWidth, useRowDialogs, wordEmphasisRanges };

package/dist/ai/strings.d.ts

@@ -33,6 +33,10 @@ export interface ChatStrings {
         bannerKeyRejected: (provider: string) => string;
         bannerUnreachable: (provider: string) => string;
     };
+    modelPicker: {
+        /** Beside a provider another user registered and shared with the reader. */
+        sharedBy: (owner: string) => string;
+    };
     queue: {
         remove: string;
         /** Under a message that goes out once the running reply finishes. */
@@ -96,6 +100,8 @@ export interface ChatStrings {
         sharedWithYou: string;
         openSidebar: string;
         closeSidebar: string;
+        /** Names the drawer the list opens in on a narrow layout. */
+        drawerLabel: string;
         resizeLabel: string;
         resizeHint: string;
         newChat: string;

package/dist/ai/strings.js

@@ -47,6 +47,7 @@ var defaultChatStrings = {
 		bannerKeyRejected: (provider) => `API key rejected for \u201c${provider}\u201d`,
 		bannerUnreachable: (provider) => `\u201c${provider}\u201d is unreachable`
 	},
+	modelPicker: { sharedBy: (owner) => `Shared by ${owner}` },
 	activity: {
 		tokens: (input, output) => `↑${input} ↓${output} tokens`,
 		stop: "Stop"
@@ -100,6 +101,7 @@ var defaultChatStrings = {
 		sharedWithYou: "Shared with you",
 		openSidebar: "Open sidebar",
 		closeSidebar: "Close sidebar",
+		drawerLabel: "Conversations",
 		resizeLabel: "Resize conversation list",
 		resizeHint: "Drag to resize; double-click to reset",
 		newChat: "New chat",

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

@@ -19,7 +19,7 @@ export interface ConversationSidebarGroup<T> {
 /** A list of conversations beside the thread: headed groups of rows that
  *  collapse to a rail, with an optional drag handle for the width. The host
  *  decides what is listed, how it is grouped and how each row reads. */
-export declare function ConversationSidebar<T>({ label, collapsed, onToggle, toggleLabels, resize, groups, getKey, renderRow, loading, placeholder, top, rail, footer, cycle, groupTestId, children, }: {
+export declare function ConversationSidebar<T>({ label, collapsed: collapsedProp, onToggle, toggleLabels, resize, fill, groups, getKey, renderRow, loading, placeholder, top, rail, footer, cycle, groupTestId, children, }: {
     label?: string;
     collapsed: boolean;
     onToggle: () => void;
@@ -33,6 +33,9 @@ export declare function ConversationSidebar<T>({ label, collapsed, onToggle, tog
         label: string;
         hint: string;
     };
+    /** Takes the width of its container, as inside a drawer, with no rail and
+     *  no drag handle. */
+    fill?: boolean;
     groups: ConversationSidebarGroup<T>[];
     getKey: (item: T) => string;
     /** One `SidebarRow`. */

package/dist/ai/ui/ConversationSidebar.js

@@ -90,18 +90,21 @@ function useItemCycling(ordered, cycle) {
 /** A list of conversations beside the thread: headed groups of rows that
 *  collapse to a rail, with an optional drag handle for the width. The host
 *  decides what is listed, how it is grouped and how each row reads. */
-function ConversationSidebar({ label, collapsed, onToggle, toggleLabels, resize, groups, getKey, renderRow, loading = false, placeholder, top, rail, footer, cycle, groupTestId, children }) {
+function ConversationSidebar({ label, collapsed: collapsedProp, onToggle, toggleLabels, resize, fill = false, groups, getKey, renderRow, loading = false, placeholder, top, rail, footer, cycle, groupTestId, children }) {
 	const sized = useResizableSidebarWidth(resize?.storageKey ?? "");
 	useItemCycling(groups.flatMap((g) => g.items), cycle);
+	const collapsed = collapsedProp && !fill;
+	const resizable = resize && !fill;
 	return /* @__PURE__ */ jsxs(SidebarPanel, {
 		collapsed,
 		label,
-		...resize ? {
+		...resizable ? {
 			width: sized.width,
 			resizing: sized.resizing
 		} : {},
+		...fill ? { style: { width: "100%" } } : {},
 		children: [
-			resize && !collapsed && /* @__PURE__ */ jsx("div", {
+			resizable && !collapsed && /* @__PURE__ */ jsx("div", {
 				role: "separator",
 				tabIndex: 0,
 				"aria-orientation": "vertical",

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

@@ -13,6 +13,17 @@ export declare function SidebarPanel({ collapsed, width, railWidth, resizing, la
     style?: CSSProperties;
     children: ReactNode;
 }): import("react").JSX.Element;
+/** The list over the content of a layout too narrow to keep it beside the
+ *  content. Place it in a positioned container: the drawer covers that
+ *  container, not the window, so an embedded chat keeps to its own panel.
+ *  Tapping outside or Escape closes it, and focus returns where it was. */
+export declare function SidebarDrawer({ open, onClose, label, closeLabel, children, }: {
+    open: boolean;
+    onClose: () => void;
+    label: string;
+    closeLabel: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
 export declare function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className, }: {
     collapsed: boolean;
     onToggle: () => void;

package/dist/ai/ui/sidebar.js

@@ -3,7 +3,7 @@ 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 { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ai/ui/sidebar.tsx
 var SIDEBAR_RAIL_WIDTH_PX = 48;
@@ -22,6 +22,41 @@ function SidebarPanel({ collapsed, width = 256, railWidth = SIDEBAR_RAIL_WIDTH_P
 		children
 	});
 }
+/** The list over the content of a layout too narrow to keep it beside the
+*  content. Place it in a positioned container: the drawer covers that
+*  container, not the window, so an embedded chat keeps to its own panel.
+*  Tapping outside or Escape closes it, and focus returns where it was. */
+function SidebarDrawer({ open, onClose, label, closeLabel, children }) {
+	const panelRef = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		panelRef.current?.focus();
+		return () => returnTo?.focus();
+	}, [open]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-label": closeLabel,
+		onClick: onClose,
+		className: cx("absolute inset-0 z-20 bg-black/40 transition-opacity duration-300", open ? "opacity-100" : "pointer-events-none opacity-0")
+	}), /* @__PURE__ */ jsx("div", {
+		ref: panelRef,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": label,
+		tabIndex: -1,
+		inert: !open,
+		onKeyDown: (e) => {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				onClose();
+			}
+		},
+		className: cx("absolute inset-y-0 left-0 z-30 flex w-[min(20rem,85%)] shadow-xl transition-transform duration-300 ease-in-out focus:outline-none", open ? "translate-x-0" : "-translate-x-full"),
+		children
+	})] });
+}
 function SidebarToggle({ collapsed, onToggle, openLabel, closeLabel, className }) {
 	const label = collapsed ? openLabel : closeLabel;
 	return /* @__PURE__ */ jsx("button", {
@@ -147,4 +182,4 @@ function useRowDialogs({ strings, nameOf, onDelete, onRename }) {
 	};
 }
 //#endregion
-export { RenameDialog, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs };
+export { RenameDialog, SidebarDrawer, SidebarGroupHeading, SidebarPanel, SidebarRailItem, SidebarRow, SidebarToggle, useRowDialogs };