zidane-ui 9.0.4 → 9.1.3

package/dist/workspace/PanelItems.js

@@ -0,0 +1,330 @@
+import { MetaChip } from "../components/Form.js";
+import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef, useState } from "react";
+import { daysEndingAt, heatmapLevel, heatmapThresholds } from "zidane/chat/pure";
+//#region src/workspace/PanelItems.tsx
+/** Series ramp: index 0 is the biggest series. */
+const SERIES_RAMP = [
+	"var(--zg-accent)",
+	"color-mix(in srgb, var(--zg-accent) 62%, var(--zg-text))",
+	"color-mix(in srgb, var(--zg-accent) 52%, var(--zg-raised))",
+	"color-mix(in srgb, var(--zg-accent) 36%, var(--zg-raised))",
+	"color-mix(in srgb, var(--zg-accent) 24%, var(--zg-raised))",
+	"color-mix(in srgb, var(--zg-accent) 16%, var(--zg-raised))",
+	"color-mix(in srgb, var(--zg-accent) 10%, var(--zg-raised))"
+];
+const OTHER_COLOR = "color-mix(in srgb, var(--zg-text-muted) 40%, var(--zg-raised))";
+/** Heatmap intensity ramp (level 1-4); level 0 is a quiet track tint. */
+const HEAT_RAMP = [
+	"var(--zg-track)",
+	"color-mix(in srgb, var(--zg-accent) 22%, var(--zg-raised))",
+	"color-mix(in srgb, var(--zg-accent) 42%, var(--zg-raised))",
+	"color-mix(in srgb, var(--zg-accent) 68%, var(--zg-raised))",
+	"var(--zg-accent)"
+];
+/** A meter's fill: the accent, quieted. */
+const METER_FILL = "color-mix(in srgb, var(--zg-accent) 70%, var(--zg-raised))";
+const GRID_COLUMNS = {
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4"
+};
+const NO_CHANGES = /* @__PURE__ */ new Set();
+/** Big-number tiles. */
+function PanelStats({ item }) {
+	const [last, setLast] = useState(item);
+	const [changed, setChanged] = useState(NO_CHANGES);
+	if (last !== item) {
+		setLast(item);
+		setChanged(new Set(item.stats.flatMap((s, i) => last.stats[i]?.value !== s.value ? [i] : [])));
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid ${GRID_COLUMNS[item.columns ?? 4]} gap-x-4 gap-y-3.5`,
+		children: item.stats.map((s, i) => /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: `text-zg-body leading-5 font-medium tabular-nums truncate${changed.has(i) ? " zg-panel-value" : ""}`,
+				title: s.hint,
+				children: s.value
+			}, changed.has(i) ? `v:${s.value}` : "v"), /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5 text-[length:var(--zg-font-size-meta)] leading-4 text-[var(--zg-text-muted)] truncate",
+				children: s.label
+			})]
+		}, `${s.label}:${i}`))
+	});
+}
+const CELL = 9;
+const GAP = 4;
+const SLOT = 13;
+const MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+/** The week × weekday grid of `weeks` weeks ending at `end`, column 0 starting on a Sunday. */
+function heatGrid(item) {
+	const byDay = new Map(item.days.map((d) => [d.date, d]));
+	const t = heatmapThresholds(item.days.map((d) => d.value));
+	const span = (item.weeks ?? 26) * 7;
+	const days = daysEndingAt(span, item.end);
+	const [y, m, d] = days[0].split("-").map(Number);
+	const lead = new Date(y, m - 1, d).getDay();
+	const grid = lead > 0 ? daysEndingAt(span + lead, item.end) : days;
+	const cells = [];
+	const months = [];
+	let lastMonth = -1;
+	grid.forEach((day, i) => {
+		const week = Math.floor(i / 7);
+		const [, mm, dd] = day.split("-").map(Number);
+		if (dd <= 7 && mm - 1 !== lastMonth) {
+			lastMonth = mm - 1;
+			months.push([week, MONTHS[lastMonth]]);
+		}
+		const info = byDay.get(day);
+		cells.push({
+			day,
+			level: info ? heatmapLevel(info.value, t, true) : 0,
+			tip: info?.tip,
+			week,
+			weekday: i % 7
+		});
+	});
+	const trimmed = months.filter(([w], i) => !(i === 0 && w === 0 && months.length > 1 && months[1][0] <= 3));
+	return {
+		cells,
+		weeks: Math.ceil(grid.length / 7),
+		months: trimmed
+	};
+}
+/** A GitHub-style activity grid with a hover tooltip. */
+const PanelHeatmap = memo(function PanelHeatmap({ item }) {
+	const labels = useWorkspaceLabels();
+	const grid = useMemo(() => heatGrid(item), [item]);
+	const [hover, setHover] = useState(null);
+	const hostRef = useRef(null);
+	const width = grid.weeks * SLOT - GAP;
+	const height = 87;
+	const rects = useMemo(() => grid.cells.map((cell, i) => /* @__PURE__ */ jsx("rect", {
+		"data-i": i,
+		x: cell.week * SLOT,
+		y: cell.weekday * SLOT,
+		width: CELL,
+		height: CELL,
+		rx: 2.25,
+		fill: HEAT_RAMP[cell.level]
+	}, cell.day)), [grid]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: hostRef,
+		className: "relative",
+		children: [
+			(item.label || item.legend) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "zg-section-label",
+					children: item.label
+				}), item.legend && /* @__PURE__ */ jsxs("span", {
+					"aria-hidden": true,
+					className: "flex items-center gap-[3px] text-zg-badge leading-4 text-[var(--zg-text-muted)]",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "mr-0.5",
+							children: item.legend.less
+						}),
+						HEAT_RAMP.map((c) => /* @__PURE__ */ jsx("span", {
+							className: "inline-block w-[7px] h-[7px] rounded-[2px]",
+							style: { background: c }
+						}, c)),
+						/* @__PURE__ */ jsx("span", {
+							className: "ml-0.5",
+							children: item.legend.more
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "relative h-4 mt-2.5 text-zg-badge leading-4 text-[var(--zg-text-muted)]",
+				children: grid.months.map(([week, label]) => /* @__PURE__ */ jsx("span", {
+					className: "absolute top-0",
+					style: { left: `${week * SLOT / width * 100}%` },
+					children: label
+				}, `${week}-${label}`))
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				width: "100%",
+				viewBox: `0 0 ${width} ${height}`,
+				preserveAspectRatio: "xMinYMin meet",
+				role: "img",
+				"aria-label": item.label ?? labels.panelHeatmapLabel,
+				className: "zg-panel-heatmap block mt-1",
+				onMouseMove: (e) => {
+					const index = e.target.getAttribute("data-i");
+					const cell = index === null ? void 0 : grid.cells[Number(index)];
+					const host = hostRef.current?.getBoundingClientRect();
+					if (!cell || !host) return;
+					setHover((prev) => prev?.cell === cell ? prev : {
+						cell,
+						x: e.clientX - host.left,
+						y: e.clientY - host.top,
+						width: host.width
+					});
+				},
+				onMouseLeave: () => setHover(null),
+				children: rects
+			}),
+			hover !== null && /* @__PURE__ */ jsxs("div", {
+				role: "tooltip",
+				className: "absolute z-10 pointer-events-none flex flex-col gap-1 px-2 py-1.5 rounded-zg-sm bg-[var(--zg-overlay)] shadow-[var(--zg-shadow-float)] text-zg-meta whitespace-nowrap",
+				style: {
+					left: Math.max(0, Math.min(hover.x - 60, hover.width - 200)),
+					top: hover.y + 16
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[var(--zg-text)]",
+					children: labels.panelHeatmapDay(hover.cell.day)
+				}), hover.cell.tip && /* @__PURE__ */ jsx("span", {
+					className: "flex gap-1 tabular-nums",
+					children: hover.cell.tip.map((line) => /* @__PURE__ */ jsx(MetaChip, { children: line }, line))
+				})]
+			})
+		]
+	});
+});
+const CHART_W = 600;
+const CHART_H = 120;
+/** A stacked bar chart and its legend. */
+function PanelBars({ item }) {
+	const labels = useWorkspaceLabels();
+	const colorFor = (i) => item.other && i === item.series.length - 1 ? OTHER_COLOR : SERIES_RAMP[i] ?? OTHER_COLOR;
+	const totals = item.points.map((p) => p.values.reduce((a, v) => a + v, 0));
+	const max = Math.max(0, ...totals);
+	const n = item.points.length;
+	const slot = n > 0 ? CHART_W / n : CHART_W;
+	const barW = Math.max(1, Math.min(slot - 2, slot * .72));
+	const every = Math.max(1, Math.ceil(n / 4));
+	return /* @__PURE__ */ jsxs("div", { children: [max === 0 ? /* @__PURE__ */ jsx("div", {
+		className: "h-[80px] flex items-center justify-center text-zg-label text-[var(--zg-text-muted)]",
+		children: item.empty ?? labels.panelContentEmpty
+	}) : /* @__PURE__ */ jsxs("svg", {
+		width: "100%",
+		viewBox: `0 0 ${CHART_W} 136`,
+		role: "img",
+		"aria-label": item.label ?? labels.panelChartLabel,
+		className: "zg-panel-bars block",
+		children: [
+			/* @__PURE__ */ jsx("line", {
+				x1: 0,
+				y1: 120.5,
+				x2: CHART_W,
+				y2: 120.5,
+				stroke: "var(--zg-hairline)",
+				strokeWidth: 1
+			}),
+			item.points.map((p, i) => {
+				if (totals[i] === 0) return null;
+				const x = i * slot + (slot - barW) / 2;
+				let y = CHART_H;
+				return /* @__PURE__ */ jsxs("g", { children: [p.title && /* @__PURE__ */ jsx("title", { children: p.title }), p.values.map((v, vi) => {
+					if (v <= 0) return null;
+					const h = Math.max(.75, v / max * 114);
+					y -= h;
+					return /* @__PURE__ */ jsx("rect", {
+						x,
+						width: barW,
+						style: {
+							y,
+							height: h
+						},
+						fill: colorFor(vi),
+						rx: barW > 4 ? 1 : 0
+					}, vi);
+				})] }, `${p.label}:${i}`);
+			}),
+			item.points.map((p, i) => i % every === Math.floor(every / 2) ? /* @__PURE__ */ jsx("text", {
+				x: i * slot + slot / 2,
+				y: 132,
+				textAnchor: "middle",
+				fontSize: 9,
+				className: "fill-[var(--zg-text-muted)]",
+				children: p.label
+			}, `axis:${i}`) : null)
+		]
+	}), /* @__PURE__ */ jsx("ul", {
+		className: "list-none m-0 mt-4 p-0 flex flex-col gap-2",
+		children: item.series.map((s, i) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-2.5 min-w-0",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "inline-block w-[8px] h-[8px] rounded-[2px] shrink-0",
+					style: { background: colorFor(i) }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: `truncate ${item.other && i === item.series.length - 1 ? "text-[var(--zg-text-muted)]" : ""}`,
+					title: s.hint,
+					children: s.label
+				}),
+				s.chips && /* @__PURE__ */ jsx("span", {
+					className: "flex gap-1",
+					children: s.chips.map((c) => /* @__PURE__ */ jsx(MetaChip, { children: c }, c))
+				}),
+				s.share && /* @__PURE__ */ jsx("span", {
+					className: "zg-meta ml-auto pl-3",
+					children: s.share
+				})
+			]
+		}, `${s.label}:${i}`))
+	})] });
+}
+/** A row's share bar: under the title, or `inline` in a one-line row. */
+function PanelMeter({ value, inline = false }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: `${inline ? "" : "mt-1 "}block h-[4px] rounded-full overflow-hidden bg-[var(--zg-track)]`,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "zg-panel-meter block h-full rounded-full",
+			style: {
+				width: `${Math.max(1.5, value * 100)}%`,
+				background: METER_FILL
+			}
+		})
+	});
+}
+/** The header's segmented controls: the first starts the row, the last ends it. */
+function PanelControls({ controls, onChange }) {
+	return /* @__PURE__ */ jsx("header", {
+		className: "flex items-center justify-between gap-3",
+		children: controls.map((c) => /* @__PURE__ */ jsx("div", {
+			role: c.role === "tabs" ? "tablist" : "group",
+			"aria-label": c.label,
+			className: "zg-segment",
+			children: c.options.map((o) => {
+				const active = o.id === c.value;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: c.role === "tabs" ? "tab" : void 0,
+					"aria-selected": c.role === "tabs" ? active : void 0,
+					"aria-pressed": c.role === "tabs" ? void 0 : active,
+					onClick: () => {
+						if (!active) onChange(c.id, o.id);
+					},
+					"data-active": active ? "" : void 0,
+					className: `zg-segment-item zg-press-subtle h-6 px-2.5 rounded-full border-0 bg-transparent text-zg-meta cursor-pointer ${active ? "text-[var(--zg-text)] font-medium" : "text-[var(--zg-text-muted)]"}`,
+					children: o.label
+				}, o.id);
+			})
+		}, c.id))
+	});
+}
+//#endregion
+export { METER_FILL, PanelBars, PanelControls, PanelHeatmap, PanelMeter, PanelStats };

package/dist/workspace/PanelStrip.d.ts

@@ -33,6 +33,10 @@ interface PanelStripProps {
   top?: boolean;
   /** The panels' own window: the strip clears the traffic lights. */
   fill?: boolean;
+  /** Room kept at the start for the window's controls (a CSS length), over `fill`'s. */
+  startInset?: string;
+  /** Room kept at the end for what the app draws over it (a CSS length, `PanelCorner`). */
+  endInset?: string;
   /** Classes merged on the row. */
   className?: string;
 }
@@ -42,6 +46,6 @@ interface PanelStripProps {
  *
  * @param props - The group's tabs, its active tab, the closed tabs and the panel's controls.
  */
-declare function PanelStrip({ tabs, activeId, groupId, scopeKey, closedTabs, label, controls, top, fill, className }: PanelStripProps): import("react").JSX.Element;
+declare function PanelStrip({ tabs, activeId, groupId, scopeKey, closedTabs, label, controls, top, fill, startInset, endInset, className }: PanelStripProps): import("react").JSX.Element;
 //#endregion
 export { PanelStrip, PanelStripProps, PanelTabDrag, StripControls, tabDrag };

package/dist/workspace/PanelStrip.js

@@ -19,7 +19,8 @@ import { panelBadgeText } from "zidane/chat/pure";
 * chrome over the panel surface, not a toolbar. Opened tabs are pills in one
 * segment track (icon + label, badge, pending dot, close-on-hover); `+`
 * lists every panel not yet in the strip; the panel's own buttons (pop out,
-* close) sit on one strip only.
+* close) sit on one strip only, unless the app draws them over the strip's
+* end itself (`endInset`: the desktop app's `PanelCorner`).
 *
 * Tabs drag (`layout/dnd`). The whole row takes a dropped tab, the empty
 * space, `+` and the buttons included: the slot comes from the pointer
@@ -82,7 +83,7 @@ function reordered(ids, id, before) {
 *
 * @param props - The group's tabs, its active tab, the closed tabs and the panel's controls.
 */
-function PanelStrip({ tabs, activeId, groupId, scopeKey, closedTabs, label, controls, top = false, fill = false, className }) {
+function PanelStrip({ tabs, activeId, groupId, scopeKey, closedTabs, label, controls, top = false, fill = false, startInset, endInset, className }) {
 	const actions = useWorkspaceActions();
 	const { attention, contentFor } = useWorkspaceContent();
 	const labels = useWorkspaceLabels();
@@ -124,10 +125,11 @@ function PanelStrip({ tabs, activeId, groupId, scopeKey, closedTabs, label, cont
 	return /* @__PURE__ */ jsxs("div", {
 		ref: rowRef,
 		"data-panel-strip": groupId ?? "",
-		className: `${top ? "zg-drag " : ""}shrink-0 flex items-center gap-1.5 px-2${className ? ` ${className}` : ""}`,
+		className: `${top ? "zg-drag " : ""}shrink-0 flex items-center gap-1.5 px-2${endInset ? " zg-panel-strip-end" : ""}${className ? ` ${className}` : ""}`,
 		style: {
 			height: top ? `max(44px, ${chromePx(44)})` : "44px",
-			...fill ? { paddingLeft: chromePx(84) } : {}
+			...startInset ? { paddingLeft: startInset } : fill ? { paddingLeft: chromePx(84) } : {},
+			...endInset ? { "--zg-strip-end-inset": endInset } : {}
 		},
 		children: [
 			/* @__PURE__ */ jsx(motion.div, {

package/dist/workspace/SidePanel.d.ts

@@ -16,8 +16,14 @@ interface SidePanelProps extends Omit<ComponentPropsWithoutRef<'aside'>, 'childr
   defaultWidth?: number;
   /** A drag on the edge ended at `width`. Absent: no resize handle. */
   onWidthCommit?: (width: number) => void;
-  /** The panel's own buttons (close, pop out), on the top-right strip. */
-  controls: StripControls;
+  /** The panel's own buttons (close, pop out), on the top-right strip. Absent: the app draws them (`endInset`). */
+  controls?: StripControls;
+  /** Room the top-right strip keeps for what the app draws over its end (a CSS length, `PanelCorner`). */
+  endInset?: string;
+  /** Room the top-left strip keeps for the window's controls (a CSS length). */
+  startInset?: string;
+  /** Full screen: the panel covers its whole parent (the content beside it stays laid out underneath). */
+  expanded?: boolean;
   /** Floating over the content instead of beside it. */
   overlay?: boolean;
   /** Hidden though open (a floating panel slid away); `onReveal` brings it back. */
@@ -37,6 +43,6 @@ interface SidePanelProps extends Omit<ComponentPropsWithoutRef<'aside'>, 'childr
  *
  * @param props - The registry, the width and its bounds, the controls and the placement.
  */
-declare const SidePanel: import("react").MemoExoticComponent<({ registry, width, minWidth, maxWidth, defaultWidth, onWidthCommit, controls, overlay, slidAway, onReveal, fill, bodyKey, scopeKey, className, style, ...rest }: SidePanelProps) => import("react").JSX.Element | null>;
+declare const SidePanel: import("react").MemoExoticComponent<({ registry, width, minWidth, maxWidth, defaultWidth, onWidthCommit, controls, endInset, startInset, expanded, overlay, slidAway, onReveal, fill, bodyKey, scopeKey, className, style, ...rest }: SidePanelProps) => import("react").JSX.Element | null>;
 //#endregion
 export { SidePanel, SidePanelProps, type StripControls };

package/dist/workspace/SidePanel.js

@@ -2,13 +2,14 @@ import { readPanelMs, usePresence } from "../motion/presence.js";
 import { CountBadge } from "../components/TabPill.js";
 import { useResizeDrag } from "../hooks/useResizeDrag.js";
 import { useWorkspaceLabels } from "./useWorkspaceLabels.js";
-import { useWorkspaceContent, useWorkspaceView } from "./WorkspaceProvider.js";
+import { useWorkspaceActions, useWorkspaceContent, useWorkspaceView } from "./WorkspaceProvider.js";
 import { useSlotRegistry } from "./dnd/parking.js";
 import { PanelStrip } from "./PanelStrip.js";
 import { PanelGroups } from "./PanelGroups.js";
+import { PanelHome } from "./PanelHome.js";
 import { TabParking } from "./TabParking.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 //#region src/workspace/SidePanel.tsx
 /**
 * The side panel: tab groups (`PanelGroups`) over kept-alive tab bodies
@@ -20,7 +21,16 @@ import { memo, useRef } from "react";
 *
 * It reads the `WorkspaceProvider` above it; what each tab shows is the
 * app's (`registry`). The app owns the width (where it is kept, how much
-* room there is) and hands the effective one in.
+* room there is) and hands the effective one in. Open with no tab, it shows
+* the start screen (`PanelHome`): every tab it offers, to pick from.
+*
+* `expanded` (full screen) covers the whole parent without moving anything
+* under it: the aside keeps its width in the row (the content beside it
+* never reflows), its clip opens to the parent (`data-full`), and the sheet,
+* pinned to the outer edge, grows to the parent's width on the panel clock
+* (`data-expanded`): its content flows to the new width as it goes, the way
+* a window resize does. Leaving, the sheet shrinks back the same way, and
+* the clip closes once it has.
 */
 /**
 * The side panel for the scope on screen: its tab groups, their bodies, the resize edge and, when it floats and slid
@@ -28,8 +38,9 @@ import { memo, useRef } from "react";
 *
 * @param props - The registry, the width and its bounds, the controls and the placement.
 */
-const SidePanel = memo(function SidePanel({ registry, width, minWidth, maxWidth, defaultWidth = width, onWidthCommit, controls, overlay = false, slidAway = false, onReveal, fill = false, bodyKey, scopeKey, className, style, ...rest }) {
+const SidePanel = memo(function SidePanel({ registry, width, minWidth, maxWidth, defaultWidth = width, onWidthCommit, controls, endInset, startInset, expanded = false, overlay = false, slidAway = false, onReveal, fill = false, bodyKey, scopeKey, className, style, ...rest }) {
 	const panels = useWorkspaceView();
+	const { pick } = useWorkspaceActions();
 	const labels = useWorkspaceLabels();
 	const key = panels.scopeKey === null ? null : scopeKey ?? panels.scopeKey;
 	const shouldShow = (fill || panels.state.open) && key !== null && panels.tabs.length > 0 && !(overlay && slidAway);
@@ -38,7 +49,23 @@ const SidePanel = memo(function SidePanel({ registry, width, minWidth, maxWidth,
 		exitMs: readPanelMs,
 		key
 	});
+	const full = usePresence(expanded && shouldShow && !fill, {
+		enter: true,
+		exitMs: readPanelMs,
+		key
+	});
 	const asideRef = useRef(null);
+	const sheetFull = full.mounted;
+	useEffect(() => {
+		const aside = asideRef.current;
+		const parent = aside?.parentElement;
+		if (!sheetFull || !aside || !parent) return void 0;
+		const write = () => aside.style.setProperty("--zg-side-panel-full-w", `${parent.clientWidth}px`);
+		write();
+		const observer = new ResizeObserver(write);
+		observer.observe(parent);
+		return () => observer.disconnect();
+	}, [sheetFull]);
 	const slots = useSlotRegistry();
 	const drag = useResizeDrag({
 		value: width,
@@ -65,6 +92,8 @@ const SidePanel = memo(function SidePanel({ registry, width, minWidth, maxWidth,
 		hidden: parked,
 		"data-collapsed": !open,
 		"data-overlay": overlay || void 0,
+		"data-full": sheetFull || void 0,
+		"data-expanded": full.state === "open" || void 0,
 		className: `zg-side-panel shrink-0 h-full outline-none ${overlay ? "absolute right-0 top-0 z-40 shadow-[var(--zg-shadow-float)]" : "relative"}${className ? ` ${className}` : ""}`,
 		style: {
 			...style,
@@ -77,8 +106,10 @@ const SidePanel = memo(function SidePanel({ registry, width, minWidth, maxWidth,
 				scopeKey: key,
 				closedTabs: panels.closedTabs,
 				focusedGroupId: panels.focusedGroupId,
-				controls,
+				...controls ? { controls } : {},
 				fill,
+				...startInset ? { startInset } : {},
+				...endInset ? { endInset } : {},
 				slots,
 				...registry.snap ? { snap: registry.snap } : {}
 			}), /* @__PURE__ */ jsx(TabParking, {
@@ -88,17 +119,23 @@ const SidePanel = memo(function SidePanel({ registry, width, minWidth, maxWidth,
 				registry,
 				bodyKey: bodyKey ?? key,
 				slots
-			}, key)] }) : /* @__PURE__ */ jsx(PanelStrip, {
+			}, key)] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PanelStrip, {
 				tabs: [],
 				activeId: null,
 				groupId: null,
 				scopeKey: key,
 				closedTabs: panels.closedTabs,
-				controls,
+				...controls ? { controls } : {},
 				top: true,
-				fill
-			})
-		}), open && !fill && onWidthCommit && /* @__PURE__ */ jsx("div", {
+				fill,
+				...startInset ? { startInset } : {},
+				...endInset ? { endInset } : {}
+			}), /* @__PURE__ */ jsx(PanelHome, {
+				tabs: panels.closedTabs,
+				onPick: pick,
+				...registry.describe ? { describe: (tab) => registry.describe(tab) } : {}
+			})] })
+		}), open && !fill && !sheetFull && onWidthCommit && /* @__PURE__ */ jsx("div", {
 			...drag.handleProps,
 			"data-active": drag.active,
 			className: "zg-resize-handle zg-no-drag -left-1"

package/dist/workspace/TabParking.d.ts

@@ -20,6 +20,8 @@ interface WorkspaceTabRegistry {
   snap?(tab: WorkspaceTab): boolean;
   /** Wraps each body, such as in an error boundary of the app's, so one failing tab leaves the others usable. */
   wrap?(tab: WorkspaceTab, body: ReactNode): ReactNode;
+  /** One short line about the tab, on the panel's start screen (`PanelHome`). Absent or empty: none. */
+  describe?(tab: WorkspaceTab): string | undefined;
 }
 /** Props for {@link TabParking}. */
 interface TabParkingProps {

package/dist/workspace/TabParking.js

@@ -1,4 +1,5 @@
 import { groupViews } from "./headless/view.js";
+import { ExtensionPanelComponent, ExtensionTabBody } from "./extension-tabs.js";
 import { PanelVisibilityContext, touchRecent } from "./panel-visibility.js";
 import { Parking } from "./dnd/parking.js";
 import { Fragment, jsx } from "react/jsx-runtime";
@@ -10,7 +11,9 @@ import { memo, useState } from "react";
 * another group keeps its state (no remount, no replay).
 *
 * What a tab shows is the app's: the registry (`WorkspaceTabRegistry`) turns
-* a tab into any React node. Tabs the registry keeps alive stay mounted
+* a tab into any React node. A tab the kit added from the extensions host
+* (`WorkspaceTab.extension`) is the kit's own (`ExtensionTabBody`), and a
+* panel that names a `ui.tsx` component draws it over the registry's body. Tabs the registry keeps alive stay mounted
 * behind `hidden` once visited (the 3 most recent), so coming back is a
 * display toggle instead of a fresh list, read and highlight. Each body
 * learns whether it is on screen through `usePanelVisible` and pauses
@@ -60,7 +63,10 @@ function TabParking({ tree, focusedId, shown, registry, bodyKey, slots, classNam
 	});
 }
 const TabBody = memo(function TabBody({ tab, registry }) {
-	const body = registry.render(tab);
+	const body = tab.extension ? /* @__PURE__ */ jsx(ExtensionTabBody, { tab }) : /* @__PURE__ */ jsx(ExtensionPanelComponent, {
+		id: tab.id,
+		children: registry.render(tab)
+	});
 	return /* @__PURE__ */ jsx(Fragment, { children: registry.wrap ? registry.wrap(tab, body) : body });
 }, (a, b) => a.tab === b.tab && a.bodyKey === b.bodyKey);
 //#endregion

package/dist/workspace/WorkspaceProvider.d.ts

@@ -148,7 +148,7 @@ declare function useWorkspace(): WorkspaceApi;
  * Re-lists when the host says the catalog changed.
  *
  * @param panels - The host's extension panels (`host.panels`), or nothing.
- * @param cwd - The folder, or null (no extension panels).
+ * @param cwd - The folder (`''`: the home of no project, the host's choice of folder), or null (no extension panels).
  */
 declare function useExtensionPanels(panels: WorkspacePanels | undefined, cwd: string | null): readonly WorkspacePanelSummary[];
 //#endregion

package/dist/workspace/WorkspaceProvider.js

@@ -1,10 +1,11 @@
 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";
+import { useWithExtensionTabs } from "./extension-tabs.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { DIFFS_PANEL_ID, FILES_PANEL_ID } from "zidane/chat/pure";
@@ -19,7 +20,9 @@ import { DIFFS_PANEL_ID, FILES_PANEL_ID } from "zidane/chat/pure";
 *              mirrors it, so a scope switch shows the new scope's layout in
 *              the same render.
 *   catalog  = the tabs the app offers here (`tabs`): its own kinds and the
-*              extension panels (`useExtensionPanels`).
+*              extension panels (`useExtensionPanels`), plus the
+*              extensions' side and webview panels it doesn't list
+*              (`useWithExtensionTabs`: the kit draws those).
 *   content  = per-binding cache of extension panel content
 *              (`createPanelContents`): the visible panel is loaded and
 *              watched, hidden ones turn pending when they change.
@@ -71,8 +74,9 @@ function WorkspaceProvider({ labels, children, ...props }) {
 		})
 	});
 }
-function WorkspaceState({ host: given, scope, tabs, fillEmpty = false, content: target, loadContext, children }) {
+function WorkspaceState({ host: given, scope, tabs: appTabs, fillEmpty = false, content: target, loadContext, children }) {
 	const labels = useWorkspaceLabels();
+	const tabs = useWithExtensionTabs(appTabs);
 	const fromContext = useContext(HostContext);
 	const host = given ?? fromContext;
 	const [memory] = useState(() => createMemoryLayouts());
@@ -371,12 +375,12 @@ const NO_PANELS = [];
 * Re-lists when the host says the catalog changed.
 *
 * @param panels - The host's extension panels (`host.panels`), or nothing.
-* @param cwd - The folder, or null (no extension panels).
+* @param cwd - The folder (`''`: the home of no project, the host's choice of folder), or null (no extension panels).
 */
 function useExtensionPanels(panels, cwd) {
 	const [catalogs, setCatalogs] = useState({});
 	const [lastCatalog, setLastCatalog] = useState(NO_PANELS);
-	const known = cwd ? catalogs[cwd] : NO_PANELS;
+	const known = cwd !== null ? catalogs[cwd] : NO_PANELS;
 	if (known && known !== lastCatalog) setLastCatalog(known);
 	const load = useCallback(async (folder) => {
 		let list;
@@ -391,7 +395,7 @@ function useExtensionPanels(panels, cwd) {
 		});
 	}, [panels]);
 	useEffect(() => {
-		if (!cwd || !panels) return void 0;
+		if (cwd === null || !panels) return void 0;
 		load(cwd);
 		return panels.subscribeCatalog?.(() => {
 			setCatalogs((prev) => cwd in prev ? { [cwd]: prev[cwd] } : {});

package/dist/workspace/extension-tabs.d.ts

@@ -0,0 +1,36 @@
+import { WorkspaceTab } from "./headless/view.js";
+import { ReactNode } from "react";
+//#region src/workspace/extension-tabs.d.ts
+/**
+ * `tabs` with the extensions' side and webview panels it doesn't list, after it. The same array while
+ * nothing is added.
+ *
+ * @param tabs - The app's catalog.
+ */
+declare function useWithExtensionTabs(tabs: readonly WorkspaceTab[]): readonly WorkspaceTab[];
+/** Props for {@link ExtensionPanelComponent}. */
+interface ExtensionPanelComponentProps {
+  /** The tab's id: a panel's full id. */
+  id: string;
+  /** What draws the tab without the component. */
+  children: ReactNode;
+}
+/**
+ * The component a panel names drawn over `children` (its fallback); `children` alone otherwise.
+ *
+ * @param props - The panel id and what draws it otherwise.
+ */
+declare function ExtensionPanelComponent({ id, children }: ExtensionPanelComponentProps): import("react").JSX.Element;
+/** Props for {@link ExtensionTabBody}. */
+interface ExtensionTabBodyProps {
+  /** The tab the kit draws. */
+  tab: WorkspaceTab;
+}
+/**
+ * The body of a tab the kit added (`WorkspaceTab.extension`). A panel loads in the workspace's folder.
+ *
+ * @param props - The tab.
+ */
+declare function ExtensionTabBody({ tab }: ExtensionTabBodyProps): import("react").JSX.Element;
+//#endregion
+export { ExtensionPanelComponent, ExtensionTabBody, useWithExtensionTabs };