zidane-ui 9.0.4 → 9.1.3

package/dist/workspace/PanelContentView.js

@@ -1,19 +1,57 @@
 import { PanelEmpty, PanelLoading } from "../components/PanelEmpty.js";
 import { PANEL_ROW, PANEL_ROW_HOVER, RowBadge } from "../components/PanelRows.js";
-import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
+import { useExtensionItems } from "../extensions/ExtensionsProvider.js";
+import { useLinkRouter } from "../extensions/links.js";
 import { ArtifactRowChips, badgeColorStyle, badgeToneClass } from "../session/ArtifactRowChips.js";
+import { renderersFor } from "../extensions/headless/select.js";
 import { ProseMarkdown } from "../chat/transcript/ProseMarkdown.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useState } from "react";
+import { ExtensionRenderer } from "../extensions/ExtensionRenderer.js";
+import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
+import { PanelBars, PanelControls, PanelHeatmap, PanelMeter, PanelStats } from "./PanelItems.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, memo, useContext, useMemo, useState } from "react";
 //#region src/workspace/PanelContentView.tsx
+const SessionRowContext = createContext({});
+/**
+* Panel rows below that stand for a session are drawn with `row`: the app's
+* own session row, so they look and move like its session list.
+*
+* @param props - The `row` component and the `children`.
+*/
+function PanelSessionRowProvider({ row, children }) {
+	const value = useMemo(() => ({ Row: row }), [row]);
+	return /* @__PURE__ */ jsx(SessionRowContext.Provider, {
+		value,
+		children
+	});
+}
+/** The app's session row ({@link PanelSessionRowProvider}), or `null`. */
+function usePanelSessionRow() {
+	return useContext(SessionRowContext);
+}
+const InteractionContext = createContext({
+	onAction: () => {},
+	onOpenPath: void 0,
+	onOpenSession: void 0
+});
 /**
 * Paints an extension panel's declarative content: sections of rows, prose and key / value facts, and the footer actions.
 * Memoised: its host re-renders on every panel content or badge change, for any tab.
 *
 * @param props - The {@link PanelContentViewProps}.
 */
-const PanelContentView = memo(function PanelContentView({ content, loading, error, onAction, onOpenPath, className, style }) {
+const PanelContentView = memo(function PanelContentView({ content, loading, error, onAction, onOpenPath, onOpenSession, onControl, variant = "side", className, style }) {
 	const labels = useWorkspaceLabels();
+	const interaction = useMemo(() => ({
+		onAction,
+		onOpenPath,
+		onOpenSession
+	}), [
+		onAction,
+		onOpenPath,
+		onOpenSession
+	]);
+	const block = variant === "block";
 	if (!content && loading) return /* @__PURE__ */ jsx(PanelLoading, {
 		className,
 		style
@@ -26,40 +64,80 @@ const PanelContentView = memo(function PanelContentView({ content, loading, erro
 		style
 	});
 	const isEmpty = content.sections.every((s) => s.items.length === 0);
-	return /* @__PURE__ */ jsxs("div", {
-		className: `flex-1 min-h-0 flex flex-col${className ? ` ${className}` : ""}`,
-		style,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex-1 min-h-0 flex flex-col overflow-y-auto px-3 pt-3 pb-3",
+	const controls = onControl && content.controls && content.controls.length > 0 ? content.controls : null;
+	const header = controls ? /* @__PURE__ */ jsx(PanelControls, {
+		controls,
+		onChange: onControl
+	}) : null;
+	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+		error && /* @__PURE__ */ jsx("div", {
+			className: "text-xs text-[var(--zg-warn)] mb-2",
+			role: "alert",
+			children: error
+		}),
+		header && /* @__PURE__ */ jsx("div", {
+			className: block ? "mb-4" : "mb-3",
+			children: header
+		}),
+		isEmpty ? block ? /* @__PURE__ */ jsx("p", {
+			className: "m-0 text-zg-label text-[var(--zg-text-muted)]",
+			children: content.empty ?? labels.panelContentEmpty
+		}) : /* @__PURE__ */ jsx(PanelEmpty, {
+			icon: "i-ph-squares-four",
+			title: content.empty ?? labels.panelContentEmpty
+		}) : /* @__PURE__ */ jsx("div", {
+			"data-stand-in": loading || void 0,
+			className: `flex flex-col ${block ? "gap-4 data-[stand-in]:opacity-55" : "gap-4"}`,
+			style: block ? { transition: "opacity var(--zg-motion-fade)" } : void 0,
+			children: content.sections.map((section) => /* @__PURE__ */ jsx(Section, {
+				section,
+				block
+			}, section.id))
+		})
+	] });
+	if (block) return /* @__PURE__ */ jsx(InteractionContext.Provider, {
+		value: interaction,
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			style,
 			"aria-busy": loading,
-			children: [error && /* @__PURE__ */ jsx("div", {
-				className: "text-xs text-[var(--zg-warn)] mb-2",
-				role: "alert",
-				children: error
-			}), isEmpty ? /* @__PURE__ */ jsx(PanelEmpty, {
-				icon: "i-ph-squares-four",
-				title: content.empty ?? labels.panelContentEmpty
-			}) : /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col gap-4",
-				children: content.sections.map((section) => /* @__PURE__ */ jsx(Section, {
-					section,
-					onAction,
-					onOpenPath
-				}, section.id))
+			children: body
+		})
+	});
+	return /* @__PURE__ */ jsx(InteractionContext.Provider, {
+		value: interaction,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `flex-1 min-h-0 flex flex-col${className ? ` ${className}` : ""}`,
+			style,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-h-0 flex flex-col overflow-y-auto px-3 pt-3 pb-3",
+				"aria-busy": loading,
+				children: body
+			}), content.actions && content.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 flex flex-wrap gap-1.5 px-3 pt-1 pb-3",
+				children: content.actions.map((a) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onAction(a.id),
+					className: `zg-press-subtle h-6 px-2 rounded-zg-sm border text-zg-meta cursor-pointer ${a.tone === "danger" ? "border-zg-danger/30 before:bg-zg-danger/10 text-zg-danger hover:before:bg-zg-danger hover:text-white transition-colors" : "zg-raised text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)]"}`,
+					children: a.label
+				}, a.id))
 			})]
-		}), content.actions && content.actions.length > 0 && /* @__PURE__ */ jsx("div", {
-			className: "shrink-0 flex flex-wrap gap-1.5 px-3 pt-1 pb-3",
-			children: content.actions.map((a) => /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => onAction(a.id),
-				className: `zg-press-subtle h-6 px-2 rounded-zg-sm border text-zg-meta cursor-pointer ${a.tone === "danger" ? "border-zg-danger/30 before:bg-zg-danger/10 text-zg-danger hover:before:bg-zg-danger hover:text-white transition-colors" : "zg-raised text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)]"}`,
-				children: a.label
-			}, a.id))
-		})]
+		})
 	});
 });
-function Section({ section, onAction, onOpenPath }) {
+function Section({ section, block }) {
 	const [collapsed, setCollapsed] = useState(section.collapsed === true);
+	const sessionList = usePanelSessionRow().Row !== void 0 && section.items.every((i) => i.kind === "row" && i.session !== void 0);
+	if (block) return /* @__PURE__ */ jsxs("section", {
+		className: "flex flex-col [&+&]:pt-4 [&+&]:border-t [&+&]:border-[var(--zg-hairline)]",
+		children: [section.title && /* @__PURE__ */ jsx("h3", {
+			className: "zg-section-label m-0 mb-3",
+			children: section.title
+		}), /* @__PURE__ */ jsx("div", {
+			className: `flex flex-col ${sessionList ? "-mx-2" : "gap-2.5"}`,
+			children: section.items.map((item, i) => /* @__PURE__ */ jsx(Item, { item }, itemKey(item, i)))
+		})]
+	});
 	return /* @__PURE__ */ jsxs("section", {
 		className: "flex flex-col",
 		children: [section.title && /* @__PURE__ */ jsxs("button", {
@@ -70,31 +148,27 @@ function Section({ section, onAction, onOpenPath }) {
 			children: [/* @__PURE__ */ jsx("span", { className: `i-ph-caret-right text-zg-badge transition-transform duration-snap ease-snap ${collapsed ? "" : "rotate-90"}` }), section.title]
 		}), !collapsed && /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-1",
-			children: section.items.map((item, i) => /* @__PURE__ */ jsx(Item, {
-				item,
-				onAction,
-				onOpenPath
-			}, itemKey(item, i)))
+			children: section.items.map((item, i) => /* @__PURE__ */ jsx(Item, { item }, itemKey(item, i)))
 		})]
 	});
 }
 function itemKey(item, i) {
 	return item.kind === "row" ? `row:${item.id ?? item.title}:${i}` : `${item.kind}:${i}`;
 }
-function Item({ item, onAction, onOpenPath }) {
+function Item({ item }) {
 	switch (item.kind) {
-		case "row": return /* @__PURE__ */ jsx(Row, {
-			item,
-			onAction,
-			onOpenPath
-		});
+		case "row": return /* @__PURE__ */ jsx(Row, { item });
 		case "markdown": return /* @__PURE__ */ jsx(ProseMarkdown, {
 			className: "text-xs",
 			children: item.text
 		});
-		case "custom": return /* @__PURE__ */ jsx(ProseMarkdown, {
-			className: "text-xs",
-			children: item.fallback
+		case "stats": return /* @__PURE__ */ jsx(PanelStats, { item });
+		case "heatmap": return /* @__PURE__ */ jsx(PanelHeatmap, { item });
+		case "bars": return /* @__PURE__ */ jsx(PanelBars, { item });
+		case "custom": return /* @__PURE__ */ jsx(CustomItem, {
+			renderer: item.renderer,
+			data: item.data,
+			fallback: item.fallback
 		});
 		case "kv": {
 			const mono = item.mono !== false;
@@ -122,6 +196,22 @@ function Item({ item, onAction, onOpenPath }) {
 		}
 	}
 }
+/** A `custom` item: the extension renderer for its id, else its markdown fallback. */
+function CustomItem({ renderer, data, fallback }) {
+	const markdown = /* @__PURE__ */ jsx(ProseMarkdown, {
+		className: "text-xs",
+		children: fallback
+	});
+	if (renderersFor(useExtensionItems("renderer"), { block: renderer }).length === 0) return markdown;
+	return /* @__PURE__ */ jsx(ExtensionRenderer, {
+		for: { block: renderer },
+		data: {
+			renderer,
+			...data !== void 0 ? { data } : {}
+		},
+		defaultView: markdown
+	});
+}
 /**
 * The first prose detail, flattened to plain text for the collapsed preview.
 *
@@ -132,24 +222,70 @@ function detailsPreview(details) {
 	if (!md || md.kind !== "markdown") return void 0;
 	return md.text.replace(/```[\s\S]*?```/g, " ").replace(/!\[[^\]]*\]\([^)]*\)/g, " ").replace(/\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/^\s{0,3}(?:#{1,6}|>|[-*+]|\d+\.)\s+/gm, "").replace(/[*_`~]+/g, "").replace(/\s+/g, " ").trim() || void 0;
 }
-function Row({ item, onAction, onOpenPath }) {
+/** A part of a whole (spend per provider): name, bar and figures on one line. */
+function MeterRow({ item }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-[minmax(0,110px)_1fr_auto] items-center gap-3 min-w-0",
+		"data-testid": "panel-row",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate text-zg-ui text-[var(--zg-text)]",
+				title: item.subtitle,
+				children: item.title
+			}),
+			/* @__PURE__ */ jsx(PanelMeter, {
+				value: item.meter,
+				inline: true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex gap-1",
+				children: item.badges?.map((b, i) => /* @__PURE__ */ jsx(RowBadge, {
+					text: b.text,
+					tone: b.tone,
+					title: b.title
+				}, `${b.text}:${i}`))
+			})
+		]
+	});
+}
+function Row({ item }) {
+	const SessionRow = usePanelSessionRow().Row;
+	if (SessionRow && item.session) return /* @__PURE__ */ jsx(SessionRow, {
+		item,
+		session: item.session,
+		fallback: /* @__PURE__ */ jsx(ListRow, { item })
+	});
+	if (item.meter !== void 0 && !item.details && !item.actionId && !item.session && !item.href) return /* @__PURE__ */ jsx(MeterRow, { item: {
+		...item,
+		meter: item.meter
+	} });
+	return /* @__PURE__ */ jsx(ListRow, { item });
+}
+function ListRow({ item }) {
 	const labels = useWorkspaceLabels();
+	const { onAction, onOpenPath, onOpenSession } = useContext(InteractionContext);
+	const links = useLinkRouter();
 	const isUrl = item.href !== void 0 && /^https?:\/\//.test(item.href);
 	const href = isUrl || onOpenPath ? item.href : void 0;
-	const interactive = Boolean(item.actionId || href);
+	const session = onOpenSession ? item.session : void 0;
+	const interactive = Boolean(session || item.actionId || href);
 	const collapsible = Boolean(item.details && item.details.length > 0);
 	const [open, setOpen] = useState(item.expanded === true);
 	const preview = collapsible && !open ? detailsPreview(item.details) : void 0;
 	const activate = (event) => {
-		if (item.actionId) onAction(item.actionId, item.payload);
-		else if (href && !isUrl) onOpenPath?.(href, event);
+		if (session) onOpenSession?.(session);
+		else if (item.actionId) onAction(item.actionId, item.payload);
+		else if (href && !isUrl) links.open(href, {
+			source: "panel",
+			...event ? { event } : {}
+		}, () => onOpenPath?.(href, event));
 	};
 	const title = /* @__PURE__ */ jsx("span", {
 		className: item.wrap ? "text-zg-body leading-[20px] font-medium text-[var(--zg-text)] text-left" : "truncate text-zg-ui text-[var(--zg-text)]",
 		title: item.wrap ? void 0 : item.subtitle ?? item.href,
 		children: item.title
 	});
-	const linked = item.actionId ? /* @__PURE__ */ jsx("button", {
+	const linked = session || item.actionId ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: (e) => activate(e),
 		className: "text-left bg-transparent border-0 p-0 cursor-pointer hover:underline min-w-0 flex",
@@ -158,6 +294,7 @@ function Row({ item, onAction, onOpenPath }) {
 		href,
 		target: "_blank",
 		rel: "noreferrer",
+		onClick: links.anchorClick(href, { source: "panel" }),
 		className: "no-underline hover:underline min-w-0 flex",
 		children: title
 	}) : href ? /* @__PURE__ */ jsx("button", {
@@ -207,6 +344,7 @@ function Row({ item, onAction, onOpenPath }) {
 						className: "truncate text-zg-meta text-[var(--zg-text-muted)]",
 						children: item.subtitle
 					}),
+					item.meter !== void 0 && /* @__PURE__ */ jsx(PanelMeter, { value: item.meter }),
 					/* @__PURE__ */ jsx(ArtifactRowChips, {
 						...item.lead ? { lead: item.lead } : {},
 						...item.diff ? { diff: item.diff } : {},
@@ -231,11 +369,7 @@ function Row({ item, onAction, onOpenPath }) {
 					collapsible && open && /* @__PURE__ */ jsx("div", {
 						className: "mt-2 flex flex-col gap-2",
 						"data-testid": "panel-row-details",
-						children: item.details.map((d, i) => /* @__PURE__ */ jsx(Item, {
-							item: d,
-							onAction,
-							onOpenPath
-						}, itemKey(d, i)))
+						children: item.details.map((d, i) => /* @__PURE__ */ jsx(Item, { item: d }, itemKey(d, i)))
 					})
 				]
 			})
@@ -243,4 +377,4 @@ function Row({ item, onAction, onOpenPath }) {
 	});
 }
 //#endregion
-export { PanelContentView, detailsPreview };
+export { PanelContentView, PanelSessionRowProvider, detailsPreview };

package/dist/workspace/PanelCorner.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties } from "react";
+//#region src/workspace/PanelCorner.d.ts
+/** Props of {@link PanelCorner}. */
+interface PanelCornerProps {
+  /** The panel shows. */
+  open: boolean;
+  /** Shows or hides the panel. */
+  onToggle: () => void;
+  /** The panel fills the window's content area. */
+  expanded?: boolean;
+  /** Enters or leaves full screen. Absent: no full-screen button. */
+  onExpand?: () => void;
+  /** Moves the panels to their own window. Absent: no button. */
+  onPopOut?: () => void;
+  /** A count on the toggle while the panel is closed (the session's artifacts). 0 or absent: none. */
+  count?: number;
+  /** Positioning and drag-region classes. */
+  className?: string;
+  /** Inline positioning. */
+  style?: CSSProperties;
+}
+/**
+ * The width the cluster covers at the end of the band, in px: what the strip or header under it reserves.
+ *
+ * @param buttons - The buttons showing (the toggle alone: 1).
+ */
+declare function panelCornerWidth(buttons: number): number;
+/**
+ * Renders the corner cluster: pop out and full screen (while open), then the toggle.
+ *
+ * @param props - The {@link PanelCornerProps}.
+ */
+declare function PanelCorner({ open, onToggle, expanded, onExpand, onPopOut, count, className, style }: PanelCornerProps): import("react").JSX.Element;
+//#endregion
+export { PanelCorner, PanelCornerProps, panelCornerWidth };

package/dist/workspace/PanelCorner.js

@@ -0,0 +1,68 @@
+import { IconButton } from "../components/IconButton.js";
+import { CountBadge } from "../components/TabPill.js";
+import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/workspace/PanelCorner.tsx
+/** The space one button takes in the cluster (a 28px button and its gap), in px. */
+const SLOT_PX = 34;
+/**
+* The width the cluster covers at the end of the band, in px: what the strip or header under it reserves.
+*
+* @param buttons - The buttons showing (the toggle alone: 1).
+*/
+function panelCornerWidth(buttons) {
+	return buttons * SLOT_PX;
+}
+/**
+* Renders the corner cluster: pop out and full screen (while open), then the toggle.
+*
+* @param props - The {@link PanelCornerProps}.
+*/
+function PanelCorner({ open, onToggle, expanded = false, onExpand, onPopOut, count = 0, className = "", style }) {
+	const labels = useWorkspaceLabels();
+	const extra = `zg-no-drag zg-panel-corner-extra${open ? "" : " zg-panel-corner-extra-hidden"}`;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-panel-corner": true,
+		className: `flex items-center gap-1.5 ${className}`,
+		style,
+		children: [
+			onPopOut && /* @__PURE__ */ jsx(IconButton, {
+				icon: "i-ph-arrow-square-out",
+				label: labels.panelPopOut,
+				onClick: onPopOut,
+				className: extra,
+				tabIndex: open ? void 0 : -1,
+				"aria-hidden": open ? void 0 : true
+			}),
+			onExpand && /* @__PURE__ */ jsx(IconButton, {
+				icon: expanded ? "i-ph-corners-in" : "i-ph-corners-out",
+				label: labels.panelExpand(expanded),
+				onClick: onExpand,
+				"aria-pressed": expanded,
+				className: extra,
+				tabIndex: open ? void 0 : -1,
+				"aria-hidden": open ? void 0 : true
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "relative inline-flex shrink-0",
+				children: [/* @__PURE__ */ jsx(IconButton, {
+					icon: open ? "i-ph-sidebar-fill" : "i-ph-sidebar",
+					label: !open && count > 0 ? labels.panelToggleCount(count) : labels.panelToggle(open),
+					onClick: onToggle,
+					"aria-pressed": open,
+					active: open,
+					"data-testid": "panel-toggle",
+					className: "zg-no-drag zg-hit-extend [&>span]:-scale-x-100"
+				}), !open && count > 0 && /* @__PURE__ */ jsx("span", {
+					className: "pointer-events-none absolute -top-1 -right-1",
+					children: /* @__PURE__ */ jsx(CountBadge, {
+						text: count > 99 ? "99+" : String(count),
+						tone: "info"
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { PanelCorner, panelCornerWidth };

package/dist/workspace/PanelGroups.d.ts

@@ -9,9 +9,14 @@ interface PanelGroupsProps {
   scopeKey: string;
   closedTabs: readonly WorkspaceTab[];
   focusedGroupId: string | null;
-  controls: StripControls;
+  /** The panel's own buttons, on the top-right strip. Absent: none (the app draws them, `endInset`). */
+  controls?: StripControls;
   /** The panels' own window: the top-left strip clears the traffic lights. */
   fill: boolean;
+  /** Room the top-left strip keeps for the window's controls (a CSS length). */
+  startInset?: string;
+  /** Room the top-right strip keeps for what the app draws over it (a CSS length). */
+  endInset?: string;
   slots: SlotRegistry;
   /** Frames showing a tab this says yes to snap instead of animating (a native view drawn over the slot). */
   snap?: (tab: WorkspaceTab) => boolean;
@@ -24,6 +29,6 @@ interface PanelGroupsProps {
  *
  * @param props - The tree as shown, the scope, the closed tabs, the focused group, the controls and the slots.
  */
-declare function PanelGroups({ tree, scopeKey, closedTabs, focusedGroupId, controls, fill, slots, snap: snapTab, className }: PanelGroupsProps): import("react").JSX.Element;
+declare function PanelGroups({ tree, scopeKey, closedTabs, focusedGroupId, controls, fill, startInset, endInset, slots, snap: snapTab, className }: PanelGroupsProps): import("react").JSX.Element;
 //#endregion
 export { PanelGroups, PanelGroupsProps };

package/dist/workspace/PanelGroups.js

@@ -52,7 +52,7 @@ const created = (id) => Number(id.slice(1)) || 0;
 *
 * @param props - The tree as shown, the scope, the closed tabs, the focused group, the controls and the slots.
 */
-function PanelGroups({ tree, scopeKey, closedTabs, focusedGroupId, controls, fill, slots, snap: snapTab, className }) {
+function PanelGroups({ tree, scopeKey, closedTabs, focusedGroupId, controls, fill, startInset, endInset, slots, snap: snapTab, className }) {
 	const labels = useWorkspaceLabels();
 	const areaRef = useRef(null);
 	const { groups: boxes, dividers } = useMemo(() => layoutBoxes(tree), [tree]);
@@ -80,6 +80,8 @@ function PanelGroups({ tree, scopeKey, closedTabs, focusedGroupId, controls, fil
 				closedTabs,
 				controls: at(group.id, "right") ? controls : void 0,
 				fill: fill && at(group.id, "left"),
+				startInset: at(group.id, "left") ? startInset : void 0,
+				endInset: at(group.id, "right") ? endInset : void 0,
 				slots
 			}, group.id);
 		}), dividers.map((d) => splitView(tree, d.splitId)?.resizable && /* @__PURE__ */ jsx(GroupDivider, {
@@ -91,7 +93,7 @@ function PanelGroups({ tree, scopeKey, closedTabs, focusedGroupId, controls, fil
 	});
 }
 /** One group: its strip, and the slot its tab bodies are parked in (`TabParking`). */
-function GroupFrame({ group, box, label, multi, focused, scopeKey, closedTabs, controls, fill, slots }) {
+function GroupFrame({ group, box, label, multi, focused, scopeKey, closedTabs, controls, fill, startInset, endInset, slots }) {
 	const { pick, dropTab } = useWorkspaceActions();
 	const slotRef = useParkingSlot(slots, group.id);
 	const dropRef = useDropTarget({
@@ -133,7 +135,9 @@ function GroupFrame({ group, box, label, multi, focused, scopeKey, closedTabs, c
 			label,
 			controls,
 			top,
-			fill
+			fill,
+			...startInset ? { startInset } : {},
+			...endInset ? { endInset } : {}
 		}), /* @__PURE__ */ jsx("div", {
 			ref: bodyRef,
 			"data-panel-body": group.id,

package/dist/workspace/PanelHome.d.ts

@@ -0,0 +1,19 @@
+import { WorkspaceTab } from "./headless/view.js";
+//#region src/workspace/PanelHome.d.ts
+/** Props for {@link PanelHome}. */
+interface PanelHomeProps {
+  /** The tabs it offers, in catalog order. */
+  tabs: readonly WorkspaceTab[];
+  /** Opens a tab. */
+  onPick: (id: string) => void;
+  /** A tab's one-line description. */
+  describe?: (tab: WorkspaceTab) => string | undefined;
+}
+/**
+ * Renders the start screen.
+ *
+ * @param props - The {@link PanelHomeProps}.
+ */
+declare const PanelHome: import("react").MemoExoticComponent<({ tabs, onPick, describe }: PanelHomeProps) => import("react").JSX.Element | null>;
+//#endregion
+export { PanelHome, PanelHomeProps };

package/dist/workspace/PanelHome.js

@@ -0,0 +1,74 @@
+import { CountBadge } from "../components/TabPill.js";
+import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
+import { useWorkspaceContent } from "./WorkspaceProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { panelBadgeText } from "zidane/chat/pure";
+//#region src/workspace/PanelHome.tsx
+/**
+* The side panel's start screen, shown while it is open with no tab: every
+* tab it offers as a card (icon, name, the app's one-line description, and a
+* count when the tab has one: what waits on you, an extension panel's
+* badge). A click opens the tab. Quiet like a browser's new-tab page: no
+* heading beyond one label, nothing to configure.
+*/
+/**
+* Renders the start screen.
+*
+* @param props - The {@link PanelHomeProps}.
+*/
+const PanelHome = memo(function PanelHome({ tabs, onPick, describe }) {
+	const labels = useWorkspaceLabels();
+	const { attention, contentFor } = useWorkspaceContent();
+	if (tabs.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 min-h-0 overflow-y-auto px-5 py-8",
+		"data-testid": "panel-home",
+		children: /* @__PURE__ */ jsxs("section", {
+			className: "max-w-[440px] mx-auto flex flex-col gap-3",
+			"aria-label": labels.panelHomeLabel,
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "zg-section-label m-0 px-0.5",
+				children: labels.panelHomeLabel
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "list-none m-0 p-0 grid grid-cols-2 gap-2",
+				children: tabs.map((tab) => {
+					const waiting = attention[tab.id];
+					const badge = waiting && waiting.count > 0 ? String(waiting.count) : panelBadgeText(contentFor(tab.id).content?.badge);
+					const note = describe?.(tab);
+					return /* @__PURE__ */ jsx("li", {
+						className: "min-w-0",
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onPick(tab.id),
+							className: "zg-raised zg-press-soft w-full h-full min-w-0 flex flex-col gap-1 px-2.5 py-2 rounded-zg-md border cursor-pointer text-left hover:before:bg-[var(--zg-row-hover)]",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5 min-w-0",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										"aria-hidden": true,
+										className: `${tab.icon?.gui ?? "i-ph-squares-four"} shrink-0 text-zg-body text-[var(--zg-text-muted)]`
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "truncate text-zg-ui font-medium text-[var(--zg-text)]",
+										children: tab.label
+									}),
+									badge && /* @__PURE__ */ jsx(CountBadge, {
+										text: badge,
+										tone: waiting ? waiting.tone : "neutral",
+										className: "ml-auto"
+									})
+								]
+							}), note && /* @__PURE__ */ jsx("span", {
+								className: "text-zg-meta leading-4 text-[var(--zg-text-muted)] line-clamp-2",
+								children: note
+							})]
+						})
+					}, tab.id);
+				})
+			})]
+		})
+	});
+});
+//#endregion
+export { PanelHome };

package/dist/workspace/PanelItems.d.ts

@@ -0,0 +1,28 @@
+import { PanelBarsItem, PanelControl, PanelHeatmapItem, PanelStatsItem } from "zidane/chat/pure";
+//#region src/workspace/PanelItems.d.ts
+/** A meter's fill: the accent, quieted. */
+declare const METER_FILL = "color-mix(in srgb, var(--zg-accent) 70%, var(--zg-raised))";
+/** Big-number tiles. */
+declare function PanelStats({ item }: {
+  item: PanelStatsItem;
+}): import("react").JSX.Element;
+/** A GitHub-style activity grid with a hover tooltip. */
+declare const PanelHeatmap: import("react").MemoExoticComponent<({ item }: {
+  item: PanelHeatmapItem;
+}) => import("react").JSX.Element>;
+/** A stacked bar chart and its legend. */
+declare function PanelBars({ item }: {
+  item: PanelBarsItem;
+}): import("react").JSX.Element;
+/** A row's share bar: under the title, or `inline` in a one-line row. */
+declare function PanelMeter({ value, inline }: {
+  value: number;
+  inline?: boolean;
+}): import("react").JSX.Element;
+/** The header's segmented controls: the first starts the row, the last ends it. */
+declare function PanelControls({ controls, onChange }: {
+  controls: readonly PanelControl[];
+  onChange: (id: string, value: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { METER_FILL, PanelBars, PanelControls, PanelHeatmap, PanelMeter, PanelStats };