zidane-ui 9.1.4 → 9.1.6

package/dist/workspace/PanelStrip.js

@@ -5,6 +5,8 @@ import { RowActionsMenu } from "../components/RowActionsMenu.js";
 import { CountBadge, TabPill } from "../components/TabPill.js";
 import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
 import { useWorkspaceActions, useWorkspaceContent } from "./WorkspaceProvider.js";
+import { panelTabMark } from "./headless/tab-mark.js";
+import { PanelGlyph } from "./PanelGlyph.js";
 import { caretX, insertBefore } from "./headless/strip-drop.js";
 import { startDrag } from "./dnd/engine.js";
 import { useDropTarget } from "./dnd/hooks.js";
@@ -120,6 +122,10 @@ function PanelStrip({ tabs, activeId, groupId, scopeKey, closedTabs, label, cont
 	const addItems = useMemo(() => closedTabs.map((t) => ({
 		id: t.id,
 		label: t.label,
+		icon: /* @__PURE__ */ jsx(PanelGlyph, {
+			tab: t,
+			fallback: "i-ph-app-window"
+		}),
 		onSelect: () => onPick(t.id)
 	})), [closedTabs, onPick]);
 	return /* @__PURE__ */ jsxs("div", {
@@ -157,7 +163,8 @@ function PanelStrip({ tabs, activeId, groupId, scopeKey, closedTabs, label, cont
 							text: panelBadgeText(entry.content.badge),
 							tone: "neutral"
 						} : null;
-						const icon = tab.icon?.gui;
+						const mark = panelTabMark(tab);
+						const icon = mark?.kind === "icon" ? mark.gui : void 0;
 						return /* @__PURE__ */ jsx(motion.div, {
 							layout: "position",
 							"data-tab-id": tab.id,
@@ -194,9 +201,9 @@ function PanelStrip({ tabs, activeId, groupId, scopeKey, closedTabs, label, cont
 									role: "status",
 									"aria-label": labels.panelTabInUse,
 									className: "zg-arc shrink-0"
-								}) : icon && /* @__PURE__ */ jsx("span", {
-									className: `${icon} text-zg-body shrink-0`,
-									"aria-hidden": true
+								}) : /* @__PURE__ */ jsx(PanelGlyph, {
+									tab,
+									className: "text-zg-body shrink-0"
 								}),
 								trailing: badge && /* @__PURE__ */ jsx(CountBadge, {
 									text: badge.text,

package/dist/workspace/PanelToolbar.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from "react";
+import { PanelControl, PanelSearch, PanelView } from "zidane/chat/pure";
+//#region src/workspace/PanelToolbar.d.ts
+/** How long typing rests before the search reloads the panel. */
+declare const PANEL_SEARCH_DEBOUNCE_MS = 300;
+/** Props for {@link PanelToolbar}. */
+interface PanelToolbarProps {
+  /** The panel's controls. */
+  controls: readonly PanelControl[];
+  /** The panel's search field. Absent: none. */
+  search?: PanelSearch;
+  /** What the user picked, by control id: shown over the content's own values. */
+  view?: PanelView;
+  /** The text in the search field. */
+  searchText?: string;
+  /** A control changed: one option, or the options of a `multi` control. */
+  onControl: (id: string, value: string | readonly string[]) => void;
+  /** The search text changed (after typing rests). Absent: no search field. */
+  onSearch?: (text: string) => void;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Renders a panel's controls, search field and filter menus.
+ *
+ * @param props - The {@link PanelToolbarProps}.
+ */
+declare function PanelToolbar({ controls, search, view, searchText, onControl, onSearch, className, style }: PanelToolbarProps): import("react").JSX.Element | null;
+//#endregion
+export { PANEL_SEARCH_DEBOUNCE_MS, PanelToolbar, PanelToolbarProps };

package/dist/workspace/PanelToolbar.js

@@ -0,0 +1,194 @@
+import { Menu, MenuRow, MenuSeparator } from "../components/Menu.js";
+import { Popover } from "../components/floating/Popover.js";
+import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
+import { PanelControls } from "./PanelItems.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/workspace/PanelToolbar.tsx
+/** How long typing rests before the search reloads the panel. */
+const PANEL_SEARCH_DEBOUNCE_MS = 300;
+/** What a menu control shows: its picked options, and the option that means no filter (`select`). */
+function pickedOf(control, view) {
+	const own = view?.[control.id];
+	if (control.kind === "multi") {
+		const picked = Array.isArray(own) ? own : typeof own === "string" ? [own] : control.values ?? [];
+		return {
+			picked,
+			active: picked.length > 0
+		};
+	}
+	const value = typeof own === "string" && control.options.some((o) => o.id === own) ? own : control.value;
+	return {
+		picked: [value],
+		active: value !== (control.neutral ?? control.options[0]?.id)
+	};
+}
+/**
+* Renders a panel's controls, search field and filter menus.
+*
+* @param props - The {@link PanelToolbarProps}.
+*/
+function PanelToolbar({ controls, search, view, searchText = "", onControl, onSearch, className = "", style }) {
+	const labels = useWorkspaceLabels();
+	const segmented = controls.filter((c) => (c.kind ?? "segmented") === "segmented");
+	const menus = controls.filter((c) => c.kind === "select" || c.kind === "multi");
+	const searching = search !== void 0 && onSearch !== void 0;
+	const filtering = menus.some((c) => pickedOf(c, view).active);
+	if (segmented.length === 0 && menus.length === 0 && !searching) return null;
+	const clear = () => {
+		for (const c of menus) {
+			if (!pickedOf(c, view).active) continue;
+			onControl(c.id, c.kind === "multi" ? [] : c.neutral ?? c.options[0].id);
+		}
+		if (searchText) onSearch?.("");
+	};
+	const controlsOf = segmented.map((c) => withPicked(c, view));
+	if (!searching && menus.length === 0) return /* @__PURE__ */ jsx("div", {
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(PanelControls, {
+			controls: controlsOf,
+			onChange: onControl
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-wrap items-center gap-1.5 ${className}`,
+		style,
+		children: [
+			segmented.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: /* @__PURE__ */ jsx(PanelControls, {
+					controls: controlsOf,
+					onChange: onControl
+				})
+			}),
+			searching && /* @__PURE__ */ jsx(SearchField, {
+				text: searchText,
+				placeholder: search.placeholder,
+				onSearch
+			}),
+			menus.map((c) => /* @__PURE__ */ jsx(FilterMenu, {
+				control: c,
+				view,
+				onChange: onControl
+			}, c.id)),
+			(filtering || searchText !== "") && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: clear,
+				className: "h-6 px-1.5 bg-transparent border-0 rounded-zg-sm text-zg-meta text-[var(--zg-text-muted)] cursor-pointer whitespace-nowrap hover:text-[var(--zg-text)]",
+				children: labels.panelFiltersClear
+			})
+		]
+	});
+}
+/** A segmented control showing the user's pick before the content for it lands. */
+function withPicked(control, view) {
+	const own = view?.[control.id];
+	return typeof own === "string" && control.options.some((o) => o.id === own) ? {
+		...control,
+		value: own
+	} : control;
+}
+/** The search field: it reloads once typing rests; Esc clears it. */
+function SearchField({ text, placeholder, onSearch }) {
+	const labels = useWorkspaceLabels();
+	const [draft, setDraft] = useState(text);
+	const sent = useRef(text);
+	useEffect(() => {
+		if (text !== sent.current) {
+			sent.current = text;
+			setDraft(text);
+		}
+	}, [text]);
+	useEffect(() => {
+		if (draft === sent.current) return void 0;
+		const timer = setTimeout(() => {
+			sent.current = draft;
+			onSearch(draft);
+		}, 300);
+		return () => clearTimeout(timer);
+	}, [draft, onSearch]);
+	const name = placeholder ?? labels.panelSearch;
+	return /* @__PURE__ */ jsxs("label", {
+		className: "zg-well h-7 flex-1 min-w-[8rem] flex items-center gap-1.5 px-2 text-zg-ui",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "i-ph-magnifying-glass shrink-0 text-[var(--zg-text-muted)]"
+		}), /* @__PURE__ */ jsx("input", {
+			type: "search",
+			value: draft,
+			onChange: (e) => setDraft(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key !== "Escape" || draft === "") return;
+				e.stopPropagation();
+				sent.current = "";
+				setDraft("");
+				onSearch("");
+			},
+			placeholder: name,
+			"aria-label": name,
+			className: "flex-1 min-w-0 bg-transparent border-0 outline-none text-[var(--zg-text)] placeholder:text-[var(--zg-text-subtle)]"
+		})]
+	});
+}
+/** A `select` or `multi` control: a button saying what is picked, opening its options. */
+function FilterMenu({ control, view, onChange }) {
+	const labels = useWorkspaceLabels();
+	const multi = control.kind === "multi";
+	const { picked, active } = pickedOf(control, view);
+	const names = active ? control.options.filter((o) => picked.includes(o.id)).map((o) => o.label) : [];
+	const summary = labels.panelFilterSummary(control.label, names);
+	return /* @__PURE__ */ jsx(Popover, {
+		ariaLabel: control.label,
+		role: "menu",
+		side: "bottom",
+		align: "start",
+		width: 240,
+		trigger: (props) => /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			...props,
+			title: summary,
+			"data-active": active ? "" : void 0,
+			className: `zg-press-subtle inline-flex items-center gap-1 h-6 max-w-[14rem] px-2 rounded-full text-zg-meta cursor-pointer ${active ? "zg-raised border-0 text-[var(--zg-text)]" : "bg-transparent border-0 text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)]"}`,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: summary
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "i-ph-caret-down shrink-0 text-zg-badge"
+			})]
+		}),
+		children: (close) => /* @__PURE__ */ jsxs(Menu, {
+			"aria-label": control.label,
+			className: "max-h-80 overflow-y-auto",
+			children: [control.options.map((o) => {
+				const checked = picked.includes(o.id);
+				return /* @__PURE__ */ jsx(MenuRow, {
+					size: "sm",
+					role: multi ? "menuitemcheckbox" : "menuitemradio",
+					"aria-checked": checked,
+					checked,
+					...o.icon?.gui ? { icon: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: o.icon.gui
+					}) } : {},
+					title: o.label,
+					onClick: () => {
+						if (multi) {
+							onChange(control.id, checked ? picked.filter((id) => id !== o.id) : [...picked, o.id]);
+							return;
+						}
+						if (!checked) onChange(control.id, o.id);
+						close();
+					}
+				}, o.id);
+			}), multi && picked.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuRow, {
+				size: "sm",
+				title: labels.panelFilterClear,
+				onClick: () => onChange(control.id, [])
+			})] })]
+		})
+	});
+}
+//#endregion
+export { PANEL_SEARCH_DEBOUNCE_MS, PanelToolbar };

package/dist/workspace/WorkspaceProvider.d.ts

@@ -134,6 +134,8 @@ declare function useWorkspaceActions(): WorkspaceActions;
 declare function useOptionalWorkspaceActions(): WorkspaceActions | null;
 /** The catalog, strips and open state. Re-renders on navigation, not on content loads. */
 declare function useWorkspaceView(): WorkspaceView;
+/** {@link useWorkspaceView}, or `null` outside a `WorkspaceProvider`. */
+declare function useOptionalWorkspaceView(): WorkspaceView | null;
 /** The one-shot requests to tab bodies. */
 declare function useWorkspaceRequests(): WorkspaceRequests;
 /** Extension content and badges. Re-renders on every content load and badge change. */
@@ -152,4 +154,4 @@ declare function useWorkspace(): WorkspaceApi;
  */
 declare function useExtensionPanels(panels: WorkspacePanels | undefined, cwd: string | null): readonly WorkspacePanelSummary[];
 //#endregion
-export { WorkspaceActions, WorkspaceApi, WorkspaceContent, WorkspaceContentTarget, WorkspaceHostProvider, WorkspaceHostProviderProps, WorkspaceProvider, WorkspaceProviderProps, WorkspaceRequests, WorkspaceView, useExtensionPanels, useOptionalWorkspaceActions, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceRequests, useWorkspaceView };
+export { WorkspaceActions, WorkspaceApi, WorkspaceContent, WorkspaceContentTarget, WorkspaceHostProvider, WorkspaceHostProviderProps, WorkspaceProvider, WorkspaceProviderProps, WorkspaceRequests, WorkspaceView, useExtensionPanels, useOptionalWorkspaceActions, useOptionalWorkspaceView, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceRequests, useWorkspaceView };

package/dist/workspace/WorkspaceProvider.js

@@ -1,7 +1,7 @@
 import { LabelsProvider } from "../labels.js";
-import { EMPTY_CONTENT_ENTRY, bindingKey, createPanelContents } from "./headless/contents.js";
 import { activeTabOf } from "./headless/panel-tree.js";
 import { EMPTY_WORKSPACE_LAYOUT, createMemoryLayouts } from "./headless/layouts.js";
+import { EMPTY_CONTENT_ENTRY, bindingKey, createPanelContents } from "./headless/contents.js";
 import { groupViews, sameAttention, viewOf } from "./headless/view.js";
 import { createWorkspaceOps } from "./headless/ops.js";
 import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
@@ -339,6 +339,10 @@ function useOptionalWorkspaceActions() {
 function useWorkspaceView() {
 	return required(useContext(ViewContext), "useWorkspaceView");
 }
+/** {@link useWorkspaceView}, or `null` outside a `WorkspaceProvider`. */
+function useOptionalWorkspaceView() {
+	return useContext(ViewContext);
+}
 /** The one-shot requests to tab bodies. */
 function useWorkspaceRequests() {
 	return required(useContext(RequestsContext), "useWorkspaceRequests");
@@ -409,4 +413,4 @@ function useExtensionPanels(panels, cwd) {
 	return known ?? lastCatalog;
 }
 //#endregion
-export { WorkspaceHostProvider, WorkspaceProvider, useExtensionPanels, useOptionalWorkspaceActions, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceRequests, useWorkspaceView };
+export { WorkspaceHostProvider, WorkspaceProvider, useExtensionPanels, useOptionalWorkspaceActions, useOptionalWorkspaceView, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceRequests, useWorkspaceView };

package/dist/workspace/extension-tabs.js

@@ -1,7 +1,7 @@
+import { extensionsErrorOf } from "../extensions/headless/host.js";
 import { useExtensionsLabels } from "../extensions/useExtensionsLabels.js";
 import { ExtensionComponent } from "../extensions/ExtensionComponent.js";
 import { useExtensionEffectRouter, useExtensionItems, useExtensionsHost } from "../extensions/ExtensionsProvider.js";
-import { extensionsErrorOf } from "../extensions/headless/host.js";
 import { ExtensionWebview } from "../extensions/ExtensionWebview.js";
 import { PanelContentView } from "./PanelContentView.js";
 import { useWorkspaceView } from "./WorkspaceProvider.js";
@@ -38,13 +38,16 @@ function useWithExtensionTabs(tabs) {
 	return useMemo(() => {
 		const listed = new Set(tabs.map((t) => t.id));
 		const added = [];
-		for (const { item } of panels) {
+		for (const { item, extension } of panels) {
 			if (!item.surfaces.includes("side") || listed.has(item.id)) continue;
 			listed.add(item.id);
 			added.push({
 				id: item.id,
 				label: item.label,
 				...item.icon ? { icon: item.icon } : {},
+				owner: extension,
+				...item.ownerName ? { ownerName: item.ownerName } : {},
+				...item.ownerIcon ? { ownerIcon: item.ownerIcon } : {},
 				builtin: true,
 				extension: "panel"
 			});

package/dist/workspace/headless/host.d.ts

@@ -42,6 +42,10 @@ interface WorkspacePanelSummary {
   label: string;
   /** The extension that registered it. */
   owner: string;
+  /** That extension's display name. */
+  ownerName?: string;
+  /** That extension's own icon: the tab draws its mark when the panel has no `icon`. */
+  ownerIcon?: PanelIcon;
   /** The tab icon. */
   icon?: PanelIcon;
   /** Where its side tab shows: with a session, on a folder alone, or both. */

package/dist/workspace/headless/index.d.ts

@@ -6,9 +6,11 @@ import { PanelContentEntry, PanelGroupView, PanelSplitView, PanelViewNode, TabAt
 import { DEFAULT_WORKSPACE_LABELS, WorkspaceLabels } from "./labels.js";
 import { WorkspaceOps, WorkspaceOpsOptions, WorkspaceOpsView, createWorkspaceOps } from "./ops.js";
 import { CHAT_MIN, CHAT_MIN_SHARE, LayoutResolved, LayoutWants, OVERLAY_CHAT_PEEK, chatFloor, maxColumnWidth, panelDragResult, resolveLayout, splitPanelWidth } from "./resolve.js";
+import { PanelTabMarkSource, panelTabMark } from "./tab-mark.js";
 import { EMPTY_CONTENT_ENTRY, PanelContentCache, PanelContents, bindingInFolder, bindingKey, createPanelContents } from "./contents.js";
+import { PANEL_PAGED_ITEMS, appendPanelPage } from "./pages.js";
 import { EMPTY_LAYOUT, LAYOUT_STORAGE_KEY, LayoutMemory, LayoutMemoryOptions, LayoutPatch, LayoutScope, SessionLayout, createLayoutMemory, layoutProjectKey, layoutScopeKey, parseLayout } from "./layout-memory.js";
 import { OpenTarget, OpenTargetApi, OpenTargetDeps, OpenTargetEvent, createOpenTarget } from "./open-target.js";
 import { setPendingReveal, takePendingReveal } from "./reveal-at.js";
 import { PanelFocusEntry, PanelFocusStore, createPanelFocusStore } from "./panel-focus.js";
-export { CHAT_MIN, CHAT_MIN_SHARE, DEFAULT_WORKSPACE_LABELS, type DropZone, EMPTY_CONTENT_ENTRY, EMPTY_LAYOUT, EMPTY_WORKSPACE_LAYOUT, LAYOUT_STORAGE_KEY, LayoutMemory, LayoutMemoryOptions, LayoutPatch, LayoutResolved, LayoutScope, LayoutStorage, LayoutStoreOptions, LayoutWants, MemoryLayouts, OVERLAY_CHAT_PEEK, OpenTarget, OpenTargetApi, OpenTargetDeps, OpenTargetEvent, type PanelContent, PanelContentCache, PanelContentEntry, PanelContents, PanelFocusEntry, PanelFocusStore, type PanelGroup, PanelGroupView, type PanelLoadContextInput, type PanelNode, type PanelSplit, PanelSplitView, PanelTree, PanelViewNode, SessionLayout, type SplitDir, type SplitSide, StorageLayoutsOptions, TabAttention, TabDrop, WORKSPACE_STORAGE_KEY, WorkspaceHost, WorkspaceHostError, WorkspaceLabels, WorkspaceLayout, WorkspaceLayouts, WorkspaceOps, WorkspaceOpsOptions, WorkspaceOpsView, WorkspacePanelActionResult, WorkspacePanelChange, WorkspacePanelSummary, WorkspacePanels, WorkspaceScope, WorkspaceTab, activeTabOf, bindingInFolder, bindingKey, chatFloor, closeTab, createLayoutMemory, createMemoryLayouts, createOpenTarget, createPanelContents, createPanelFocusStore, createStorageLayouts, createWorkspaceOps, dropTab, findGroup, focusTab, focusedGroup, groupIdsOf, groupViews, groupsOf, layoutProjectKey, layoutScopeKey, maxColumnWidth, moveTabBy, panelDragResult, panelTreeOf, parseLayout, parsePanelTree, parseTree, parseWorkspaceLayout, pickTab, pinTab, resizeSplit, resolveLayout, sameAttention, sameWorkspaceLayout, setPendingReveal, splitPanelWidth, splitTab, splitView, takePendingReveal, treeTabs, viewOf };
+export { CHAT_MIN, CHAT_MIN_SHARE, DEFAULT_WORKSPACE_LABELS, type DropZone, EMPTY_CONTENT_ENTRY, EMPTY_LAYOUT, EMPTY_WORKSPACE_LAYOUT, LAYOUT_STORAGE_KEY, LayoutMemory, LayoutMemoryOptions, LayoutPatch, LayoutResolved, LayoutScope, LayoutStorage, LayoutStoreOptions, LayoutWants, MemoryLayouts, OVERLAY_CHAT_PEEK, OpenTarget, OpenTargetApi, OpenTargetDeps, OpenTargetEvent, PANEL_PAGED_ITEMS, type PanelContent, PanelContentCache, PanelContentEntry, PanelContents, PanelFocusEntry, PanelFocusStore, type PanelGroup, PanelGroupView, type PanelLoadContextInput, type PanelNode, type PanelSplit, PanelSplitView, PanelTabMarkSource, PanelTree, PanelViewNode, SessionLayout, type SplitDir, type SplitSide, StorageLayoutsOptions, TabAttention, TabDrop, WORKSPACE_STORAGE_KEY, WorkspaceHost, WorkspaceHostError, WorkspaceLabels, WorkspaceLayout, WorkspaceLayouts, WorkspaceOps, WorkspaceOpsOptions, WorkspaceOpsView, WorkspacePanelActionResult, WorkspacePanelChange, WorkspacePanelSummary, WorkspacePanels, WorkspaceScope, WorkspaceTab, activeTabOf, appendPanelPage, bindingInFolder, bindingKey, chatFloor, closeTab, createLayoutMemory, createMemoryLayouts, createOpenTarget, createPanelContents, createPanelFocusStore, createStorageLayouts, createWorkspaceOps, dropTab, findGroup, focusTab, focusedGroup, groupIdsOf, groupViews, groupsOf, layoutProjectKey, layoutScopeKey, maxColumnWidth, moveTabBy, panelDragResult, panelTabMark, panelTreeOf, parseLayout, parsePanelTree, parseTree, parseWorkspaceLayout, pickTab, pinTab, resizeSplit, resolveLayout, sameAttention, sameWorkspaceLayout, setPendingReveal, splitPanelWidth, splitTab, splitView, takePendingReveal, treeTabs, viewOf };

package/dist/workspace/headless/index.js

@@ -1,13 +1,15 @@
-import { EMPTY_CONTENT_ENTRY, bindingInFolder, bindingKey, createPanelContents } from "./contents.js";
 import { findGroup, groupsOf, parseTree, treeTabs } from "./tree.js";
 import { activeTabOf, closeTab, dropTab, focusTab, focusedGroup, moveTabBy, panelTreeOf, parsePanelTree, pickTab, pinTab, resizeSplit, splitTab } from "./panel-tree.js";
 import { EMPTY_WORKSPACE_LAYOUT, WORKSPACE_STORAGE_KEY, createMemoryLayouts, createStorageLayouts, parseWorkspaceLayout, sameWorkspaceLayout } from "./layouts.js";
+import { EMPTY_CONTENT_ENTRY, bindingInFolder, bindingKey, createPanelContents } from "./contents.js";
 import { groupIdsOf, groupViews, sameAttention, splitView, viewOf } from "./view.js";
 import { createWorkspaceOps } from "./ops.js";
 import { DEFAULT_WORKSPACE_LABELS } from "./labels.js";
+import { panelTabMark } from "./tab-mark.js";
+import { PANEL_PAGED_ITEMS, appendPanelPage } from "./pages.js";
 import { CHAT_MIN, CHAT_MIN_SHARE, OVERLAY_CHAT_PEEK, chatFloor, maxColumnWidth, panelDragResult, resolveLayout, splitPanelWidth } from "./resolve.js";
 import { EMPTY_LAYOUT, LAYOUT_STORAGE_KEY, createLayoutMemory, layoutProjectKey, layoutScopeKey, parseLayout } from "./layout-memory.js";
 import { setPendingReveal, takePendingReveal } from "./reveal-at.js";
 import { createOpenTarget } from "./open-target.js";
 import { createPanelFocusStore } from "./panel-focus.js";
-export { CHAT_MIN, CHAT_MIN_SHARE, DEFAULT_WORKSPACE_LABELS, EMPTY_CONTENT_ENTRY, EMPTY_LAYOUT, EMPTY_WORKSPACE_LAYOUT, LAYOUT_STORAGE_KEY, OVERLAY_CHAT_PEEK, WORKSPACE_STORAGE_KEY, activeTabOf, bindingInFolder, bindingKey, chatFloor, closeTab, createLayoutMemory, createMemoryLayouts, createOpenTarget, createPanelContents, createPanelFocusStore, createStorageLayouts, createWorkspaceOps, dropTab, findGroup, focusTab, focusedGroup, groupIdsOf, groupViews, groupsOf, layoutProjectKey, layoutScopeKey, maxColumnWidth, moveTabBy, panelDragResult, panelTreeOf, parseLayout, parsePanelTree, parseTree, parseWorkspaceLayout, pickTab, pinTab, resizeSplit, resolveLayout, sameAttention, sameWorkspaceLayout, setPendingReveal, splitPanelWidth, splitTab, splitView, takePendingReveal, treeTabs, viewOf };
+export { CHAT_MIN, CHAT_MIN_SHARE, DEFAULT_WORKSPACE_LABELS, EMPTY_CONTENT_ENTRY, EMPTY_LAYOUT, EMPTY_WORKSPACE_LAYOUT, LAYOUT_STORAGE_KEY, OVERLAY_CHAT_PEEK, PANEL_PAGED_ITEMS, WORKSPACE_STORAGE_KEY, activeTabOf, appendPanelPage, bindingInFolder, bindingKey, chatFloor, closeTab, createLayoutMemory, createMemoryLayouts, createOpenTarget, createPanelContents, createPanelFocusStore, createStorageLayouts, createWorkspaceOps, dropTab, findGroup, focusTab, focusedGroup, groupIdsOf, groupViews, groupsOf, layoutProjectKey, layoutScopeKey, maxColumnWidth, moveTabBy, panelDragResult, panelTabMark, panelTreeOf, parseLayout, parsePanelTree, parseTree, parseWorkspaceLayout, pickTab, pinTab, resizeSplit, resolveLayout, sameAttention, sameWorkspaceLayout, setPendingReveal, splitPanelWidth, splitTab, splitView, takePendingReveal, treeTabs, viewOf };

package/dist/workspace/headless/labels.d.ts

@@ -31,6 +31,16 @@ declare const DEFAULT_WORKSPACE_LABELS: {
   panelRowExpand: string;
   panelRowCollapse: string;
   panelRowShowMore: string;
+  panelSearch: string;
+  panelSearchClear: string;
+  panelFiltersClear: string;
+  /** In a filter's menu: drop its picks. */
+  panelFilterClear: string;
+  /** A filter's button: its label, and what is picked (none: its label alone). */
+  panelFilterSummary: (label: string, picked: readonly string[]) => string;
+  panelLoadMore: string;
+  panelLoadingMore: string;
+  panelRowActions: (row: string) => string;
 };
 /** The shape of the workspace label dictionary. Some values are functions that build a string. */
 type WorkspaceLabels = typeof DEFAULT_WORKSPACE_LABELS;

package/dist/workspace/headless/labels.js

@@ -37,7 +37,17 @@ const DEFAULT_WORKSPACE_LABELS = {
 	},
 	panelRowExpand: "Expand",
 	panelRowCollapse: "Collapse",
-	panelRowShowMore: "Show more"
+	panelRowShowMore: "Show more",
+	panelSearch: "Search",
+	panelSearchClear: "Clear search",
+	panelFiltersClear: "Clear filters",
+	/** In a filter's menu: drop its picks. */
+	panelFilterClear: "Clear",
+	/** A filter's button: its label, and what is picked (none: its label alone). */
+	panelFilterSummary: (label, picked) => picked.length === 0 ? label : picked.length === 1 ? `${label}: ${picked[0]}` : `${label}: ${picked.length}`,
+	panelLoadMore: "Show more",
+	panelLoadingMore: "Loading…",
+	panelRowActions: (row) => `Actions for ${row}`
 };
 //#endregion
 export { DEFAULT_WORKSPACE_LABELS };

package/dist/workspace/headless/pages.d.ts

@@ -0,0 +1,15 @@
+import { PanelContent } from "zidane/chat/pure";
+//#region src/workspace/headless/pages.d.ts
+/** Rows kept across every page of one panel, at most: past it, Show more goes away. */
+declare const PANEL_PAGED_ITEMS = 1000;
+/**
+ * `base` with `page` after it: its rows join the sections of the same id (a row already shown, by id, is not
+ * repeated), its other sections follow, and its `more` replaces `base`'s. The header (title, controls, search)
+ * stays `base`'s. Past {@link PANEL_PAGED_ITEMS} rows, the rest is dropped and there is no more.
+ *
+ * @param base - The content shown.
+ * @param page - The next page.
+ */
+declare function appendPanelPage(base: PanelContent, page: PanelContent): PanelContent;
+//#endregion
+export { PANEL_PAGED_ITEMS, appendPanelPage };

package/dist/workspace/headless/pages.js

@@ -0,0 +1,49 @@
+//#region src/workspace/headless/pages.ts
+/** Rows kept across every page of one panel, at most: past it, Show more goes away. */
+const PANEL_PAGED_ITEMS = 1e3;
+const keyOf = (item) => item.kind === "row" && item.id ? item.id : null;
+/**
+* `base` with `page` after it: its rows join the sections of the same id (a row already shown, by id, is not
+* repeated), its other sections follow, and its `more` replaces `base`'s. The header (title, controls, search)
+* stays `base`'s. Past {@link PANEL_PAGED_ITEMS} rows, the rest is dropped and there is no more.
+*
+* @param base - The content shown.
+* @param page - The next page.
+*/
+function appendPanelPage(base, page) {
+	const seen = new Set(base.sections.flatMap((s) => s.items.map(keyOf).filter((k) => k !== null)));
+	let budget = PANEL_PAGED_ITEMS - base.sections.reduce((n, s) => n + s.items.length, 0);
+	const fresh = (items) => {
+		const out = [];
+		for (const item of items) {
+			const key = keyOf(item);
+			if (key !== null && seen.has(key)) continue;
+			if (budget <= 0) break;
+			if (key !== null) seen.add(key);
+			out.push(item);
+			budget--;
+		}
+		return out;
+	};
+	const byId = new Map(page.sections.map((s) => [s.id, s]));
+	const sections = base.sections.map((s) => {
+		const more = byId.get(s.id);
+		return more ? {
+			...s,
+			items: [...s.items, ...fresh(more.items)]
+		} : s;
+	});
+	const known = new Set(base.sections.map((s) => s.id));
+	for (const s of page.sections) if (!known.has(s.id)) sections.push({
+		...s,
+		items: fresh(s.items)
+	});
+	const { more: _more, ...rest } = base;
+	return {
+		...rest,
+		sections,
+		...page.more && budget > 0 ? { more: page.more } : {}
+	};
+}
+//#endregion
+export { PANEL_PAGED_ITEMS, appendPanelPage };

package/dist/workspace/headless/tab-mark.d.ts

@@ -0,0 +1,14 @@
+import { WorkspaceTab } from "./view.js";
+import { ExtensionMark } from "zidane/chat/pure";
+//#region src/workspace/headless/tab-mark.d.ts
+/** What {@link panelTabMark} reads of a tab. */
+type PanelTabMarkSource = Pick<WorkspaceTab, 'icon' | 'owner' | 'ownerName' | 'ownerIcon'>;
+/**
+ * The mark a panel's tab draws: `icon.gui` as an icon, else its extension's mark. `undefined`: a tab with
+ * neither (an app's tab without an icon).
+ *
+ * @param tab - The tab.
+ */
+declare function panelTabMark(tab: PanelTabMarkSource): ExtensionMark | undefined;
+//#endregion
+export { PanelTabMarkSource, panelTabMark };

package/dist/workspace/headless/tab-mark.js

@@ -0,0 +1,27 @@
+import { extensionMark } from "zidane/chat/pure";
+//#region src/workspace/headless/tab-mark.ts
+/**
+* What a panel's tab draws: its own icon, else the mark of the extension that added it, the one the rest of
+* the app draws for that extension (`extensionMark`: its icon, else its logo, else its first letter).
+*/
+/**
+* The mark a panel's tab draws: `icon.gui` as an icon, else its extension's mark. `undefined`: a tab with
+* neither (an app's tab without an icon).
+*
+* @param tab - The tab.
+*/
+function panelTabMark(tab) {
+	const own = tab.icon?.gui?.trim();
+	if (own) return {
+		kind: "icon",
+		gui: own
+	};
+	if (!tab.owner) return void 0;
+	return extensionMark({
+		id: tab.owner,
+		...tab.ownerName ? { name: tab.ownerName } : {},
+		...tab.ownerIcon ? { icon: tab.ownerIcon } : {}
+	});
+}
+//#endregion
+export { panelTabMark };

package/dist/workspace/headless/view.d.ts

@@ -12,8 +12,14 @@ interface WorkspaceTab {
   id: string;
   /** The pill's label. */
   label: string;
-  /** The pill's icon (`gui`: an icon class). */
+  /** The pill's icon (`gui`: an icon class). Absent on an extension's panel: its extension's mark ({@link panelTabMark}). */
   icon?: PanelIcon;
+  /** The extension that added it (its id): the tab draws the extension's mark when it has no `icon.gui`. */
+  owner?: string;
+  /** That extension's display name. */
+  ownerName?: string;
+  /** That extension's own icon. */
+  ownerIcon?: PanelIcon;
   /** The app renders it; `false`: an extension panel. */
   builtin: boolean;
   /**

package/dist/workspace/index.d.ts

@@ -1,7 +1,8 @@
-import { WorkspaceActions, WorkspaceApi, WorkspaceContent, WorkspaceContentTarget, WorkspaceHostProvider, WorkspaceHostProviderProps, WorkspaceProvider, WorkspaceProviderProps, WorkspaceRequests, WorkspaceView, useExtensionPanels, useOptionalWorkspaceActions, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceRequests, useWorkspaceView } from "./WorkspaceProvider.js";
+import { WorkspaceActions, WorkspaceApi, WorkspaceContent, WorkspaceContentTarget, WorkspaceHostProvider, WorkspaceHostProviderProps, WorkspaceProvider, WorkspaceProviderProps, WorkspaceRequests, WorkspaceView, useExtensionPanels, useOptionalWorkspaceActions, useOptionalWorkspaceView, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceRequests, useWorkspaceView } from "./WorkspaceProvider.js";
 import { PanelContentView, PanelContentViewProps, PanelOpenEvent, PanelSessionRowProps, PanelSessionRowProvider, PanelSessionRowProviderProps, detailsPreview } from "./PanelContentView.js";
 import { BudgetColumn, LayoutBudget, LayoutBudgetProvider, LayoutBudgetProviderProps, useLayoutBudget, useLayoutBudgetOptional } from "./LayoutBudget.js";
 import { PanelCorner, PanelCornerProps, panelCornerWidth } from "./PanelCorner.js";
+import { PanelGlyph, PanelGlyphProps } from "./PanelGlyph.js";
 import { StripControls } from "./PanelStrip.js";
 import { WorkspaceTabRegistry } from "./TabParking.js";
 import { SidePanel, SidePanelProps } from "./SidePanel.js";
@@ -11,4 +12,4 @@ import { useScopeLayout } from "./useScopeLayout.js";
 import { TAB_REGION_PROPS, TabScope, TabTarget, focusedTabScope, hoveredTabScope, keepFocusIn, panelTabScope, registerTabScope, steppedIndex, tabTarget, trackTabRegions, useTabScope } from "./tab-scopes.js";
 import { usePanelGroupHandlers } from "./panel-group-keys.js";
 import { WorkspaceKeyCommandsOptions, useWorkspaceKeyCommands } from "./workspace-key-commands.js";
-export { BudgetColumn, LayoutBudget, LayoutBudgetProvider, LayoutBudgetProviderProps, PanelContentView, PanelContentViewProps, PanelCorner, PanelCornerProps, PanelOpenEvent, PanelSessionRowProps, PanelSessionRowProvider, PanelSessionRowProviderProps, PanelVisibilityContext, SidePanel, SidePanelProps, type StripControls, TAB_REGION_PROPS, TabScope, TabTarget, WorkspaceActions, WorkspaceApi, WorkspaceContent, WorkspaceContentTarget, WorkspaceHostProvider, WorkspaceHostProviderProps, WorkspaceKeyCommandsOptions, WorkspaceProvider, WorkspaceProviderProps, WorkspaceRequests, type WorkspaceTabRegistry, WorkspaceView, detailsPreview, focusedTabScope, hoveredTabScope, keepFocusIn, panelCornerWidth, panelTabScope, registerTabScope, steppedIndex, tabTarget, touchRecent, trackTabRegions, useExtensionPanels, useLayoutBudget, useLayoutBudgetOptional, useOptionalWorkspaceActions, usePanelGroupHandlers, usePanelVisible, useScopeLayout, useTabScope, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceKeyCommands, useWorkspaceLabels, useWorkspaceRequests, useWorkspaceView };
+export { BudgetColumn, LayoutBudget, LayoutBudgetProvider, LayoutBudgetProviderProps, PanelContentView, PanelContentViewProps, PanelCorner, PanelCornerProps, PanelGlyph, PanelGlyphProps, PanelOpenEvent, PanelSessionRowProps, PanelSessionRowProvider, PanelSessionRowProviderProps, PanelVisibilityContext, SidePanel, SidePanelProps, type StripControls, TAB_REGION_PROPS, TabScope, TabTarget, WorkspaceActions, WorkspaceApi, WorkspaceContent, WorkspaceContentTarget, WorkspaceHostProvider, WorkspaceHostProviderProps, WorkspaceKeyCommandsOptions, WorkspaceProvider, WorkspaceProviderProps, WorkspaceRequests, type WorkspaceTabRegistry, WorkspaceView, detailsPreview, focusedTabScope, hoveredTabScope, keepFocusIn, panelCornerWidth, panelTabScope, registerTabScope, steppedIndex, tabTarget, touchRecent, trackTabRegions, useExtensionPanels, useLayoutBudget, useLayoutBudgetOptional, useOptionalWorkspaceActions, useOptionalWorkspaceView, usePanelGroupHandlers, usePanelVisible, useScopeLayout, useTabScope, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceKeyCommands, useWorkspaceLabels, useWorkspaceRequests, useWorkspaceView };

package/dist/workspace/index.js

@@ -1,12 +1,13 @@
 import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
 import { PanelContentView, PanelSessionRowProvider, detailsPreview } from "./PanelContentView.js";
-import { WorkspaceHostProvider, WorkspaceProvider, useExtensionPanels, useOptionalWorkspaceActions, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceRequests, useWorkspaceView } from "./WorkspaceProvider.js";
+import { WorkspaceHostProvider, WorkspaceProvider, useExtensionPanels, useOptionalWorkspaceActions, useOptionalWorkspaceView, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceRequests, useWorkspaceView } from "./WorkspaceProvider.js";
 import { TAB_REGION_PROPS, focusedTabScope, hoveredTabScope, keepFocusIn, panelTabScope, registerTabScope, steppedIndex, tabTarget, trackTabRegions, useTabScope } from "./tab-scopes.js";
 import { PanelVisibilityContext, touchRecent, usePanelVisible } from "./panel-visibility.js";
+import { PanelGlyph } from "./PanelGlyph.js";
 import { LayoutBudgetProvider, useLayoutBudget, useLayoutBudgetOptional } from "./LayoutBudget.js";
 import { PanelCorner, panelCornerWidth } from "./PanelCorner.js";
 import { SidePanel } from "./SidePanel.js";
 import { useScopeLayout } from "./useScopeLayout.js";
 import { usePanelGroupHandlers } from "./panel-group-keys.js";
 import { useWorkspaceKeyCommands } from "./workspace-key-commands.js";
-export { LayoutBudgetProvider, PanelContentView, PanelCorner, PanelSessionRowProvider, PanelVisibilityContext, SidePanel, TAB_REGION_PROPS, WorkspaceHostProvider, WorkspaceProvider, detailsPreview, focusedTabScope, hoveredTabScope, keepFocusIn, panelCornerWidth, panelTabScope, registerTabScope, steppedIndex, tabTarget, touchRecent, trackTabRegions, useExtensionPanels, useLayoutBudget, useLayoutBudgetOptional, useOptionalWorkspaceActions, usePanelGroupHandlers, usePanelVisible, useScopeLayout, useTabScope, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceKeyCommands, useWorkspaceLabels, useWorkspaceRequests, useWorkspaceView };
+export { LayoutBudgetProvider, PanelContentView, PanelCorner, PanelGlyph, PanelSessionRowProvider, PanelVisibilityContext, SidePanel, TAB_REGION_PROPS, WorkspaceHostProvider, WorkspaceProvider, detailsPreview, focusedTabScope, hoveredTabScope, keepFocusIn, panelCornerWidth, panelTabScope, registerTabScope, steppedIndex, tabTarget, touchRecent, trackTabRegions, useExtensionPanels, useLayoutBudget, useLayoutBudgetOptional, useOptionalWorkspaceActions, useOptionalWorkspaceView, usePanelGroupHandlers, usePanelVisible, useScopeLayout, useTabScope, useWorkspace, useWorkspaceActions, useWorkspaceContent, useWorkspaceHost, useWorkspaceKeyCommands, useWorkspaceLabels, useWorkspaceRequests, useWorkspaceView };

package/dist/workspace/testing/index.js

@@ -108,6 +108,12 @@ const DEMO_WORKSPACE_TABS = [
 		label: "Terminal",
 		icon: { gui: "i-ph-terminal-window" },
 		builtin: true
+	},
+	{
+		id: "inbox",
+		label: "Inbox",
+		icon: { gui: "i-ph-tray" },
+		builtin: true
 	}
 ];
 /** A demo layout: open, Files and Todos in one group, Diffs split off to the right. */

package/dist/workspace/workspace-key-commands.js

@@ -1,7 +1,7 @@
 import { useWorkspaceActions, useWorkspaceView } from "./WorkspaceProvider.js";
 import { focusedTabScope, keepFocusIn, panelTabScope, tabTarget, trackTabRegions } from "./tab-scopes.js";
 import { useCallback, useEffect, useMemo } from "react";
-import { TODOS_PANEL_ID } from "zidane/chat/pure";
+import { INBOX_PANEL_ID } from "zidane/chat/pure";
 //#region src/workspace/workspace-key-commands.ts
 /**
 * The side panel's key commands: show or hide the panel (`openArtifacts`),
@@ -69,8 +69,8 @@ function useWorkspaceKeyCommands(options) {
 	return useMemo(() => ({
 		...toggle ? { openArtifacts: () => actions.toggle() } : {},
 		...session ? { openTodos: () => {
-			if (activeId === TODOS_PANEL_ID) actions.close();
-			else actions.pick(TODOS_PANEL_ID);
+			if (activeId === INBOX_PANEL_ID) actions.close();
+			else actions.pick(INBOX_PANEL_ID);
 		} } : {},
 		...scope ? {
 			panelNext: () => actions.cycle(1),