zidane-ui 9.0.4 → 9.1.3

package/dist/workspace/extension-tabs.js

@@ -0,0 +1,175 @@
+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";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+//#region src/workspace/extension-tabs.tsx
+/**
+* The extensions' side panels in the workspace, from the extensions host
+* (`ExtensionsHost`) when there is one, with no app code:
+*
+*   - `useWithExtensionTabs` adds to the app's catalog the extensions' side
+*     panels (`Panel` items with the `side` surface) and webview panels
+*     (`Webview` items with `placement: 'panel'`) it doesn't list already, as
+*     tabs the kit draws (`WorkspaceTab.extension`). An app that lists them
+*     itself (from its workspace host's `panels`) keeps drawing them.
+*   - `ExtensionTabBody` draws such a tab: a webview under the host's origin
+*     policy, or a panel's content (`invoke('panel.load')`, reloaded after
+*     each action and each time the host says the panel changed) painted by
+*     `PanelContentView`. A row that stands for a session opens it through
+*     the app's `navigate` effect handler (`useExtensionEffects`).
+*   - `ExtensionPanelComponent` puts the component a panel names (from its
+*     `ui.tsx`) over whatever draws the tab, its declarative content as the
+*     fallback.
+*/
+/**
+* `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.
+*/
+function useWithExtensionTabs(tabs) {
+	const panels = useExtensionItems("panel");
+	const webviews = useExtensionItems("webview");
+	return useMemo(() => {
+		const listed = new Set(tabs.map((t) => t.id));
+		const added = [];
+		for (const { item } 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 } : {},
+				builtin: true,
+				extension: "panel"
+			});
+		}
+		for (const { item } of webviews) {
+			if (item.placement !== "panel" || listed.has(item.id)) continue;
+			listed.add(item.id);
+			added.push({
+				id: item.id,
+				label: item.title,
+				icon: { gui: "i-ph-browser" },
+				builtin: true,
+				extension: "webview"
+			});
+		}
+		return added.length === 0 ? tabs : [...tabs, ...added];
+	}, [
+		tabs,
+		panels,
+		webviews
+	]);
+}
+/**
+* The component a panel names drawn over `children` (its fallback); `children` alone otherwise.
+*
+* @param props - The panel id and what draws it otherwise.
+*/
+function ExtensionPanelComponent({ id, children }) {
+	const entry = useExtensionItems("panel").find((e) => e.item.id === id && e.item.component);
+	if (!entry?.item.component) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(ExtensionComponent, {
+		extension: entry.extension,
+		component: entry.item.component,
+		props: { panelId: id },
+		fallback: children
+	});
+}
+/**
+* The body of a tab the kit added (`WorkspaceTab.extension`). A panel loads in the workspace's folder.
+*
+* @param props - The tab.
+*/
+function ExtensionTabBody({ tab }) {
+	const { cwd } = useWorkspaceView();
+	if (tab.extension === "webview") return /* @__PURE__ */ jsx(ExtensionWebview, {
+		id: tab.id,
+		className: "h-full"
+	});
+	return /* @__PURE__ */ jsx(ExtensionPanelComponent, {
+		id: tab.id,
+		children: /* @__PURE__ */ jsx(ExtensionPanelContent, {
+			panelId: tab.id,
+			cwd: cwd ?? ""
+		})
+	});
+}
+function ExtensionPanelContent({ panelId, cwd }) {
+	const host = useExtensionsHost();
+	const invoke = host?.invoke;
+	const router = useExtensionEffectRouter();
+	const labels = useExtensionsLabels();
+	const [state, setState] = useState({
+		content: null,
+		loading: true,
+		error: null
+	});
+	const [version, setVersion] = useState(0);
+	useEffect(() => {
+		if (!invoke) return void 0;
+		let live = true;
+		setState((prev) => ({
+			...prev,
+			loading: true
+		}));
+		invoke("panel.load", {
+			panelId,
+			cwd
+		}).then((content) => {
+			if (live) setState({
+				content,
+				loading: false,
+				error: null
+			});
+		}, (err) => {
+			if (live) setState((prev) => ({
+				...prev,
+				loading: false,
+				error: labels.extensionError(extensionsErrorOf(err))
+			}));
+		});
+		return () => {
+			live = false;
+		};
+	}, [
+		invoke,
+		panelId,
+		cwd,
+		version,
+		labels
+	]);
+	useEffect(() => host?.panelChanged?.((change) => change.panelId === panelId && setVersion((v) => v + 1)), [host, panelId]);
+	const onOpenSession = useMemo(() => router ? (sessionId) => void router.apply({
+		kind: "navigate",
+		to: { session: sessionId }
+	}) : void 0, [router]);
+	const onAction = useCallback((actionId, payload) => {
+		if (!invoke) return;
+		invoke("panel.action", {
+			panelId,
+			actionId,
+			...payload !== void 0 ? { payload } : {},
+			cwd
+		}).then(() => setVersion((v) => v + 1), () => void 0);
+	}, [
+		invoke,
+		panelId,
+		cwd
+	]);
+	return /* @__PURE__ */ jsx(PanelContentView, {
+		content: state.content,
+		loading: invoke ? state.loading : false,
+		error: state.error,
+		onAction,
+		...onOpenSession ? { onOpenSession } : {}
+	});
+}
+//#endregion
+export { ExtensionPanelComponent, ExtensionTabBody, useWithExtensionTabs };

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

@@ -1,5 +1,5 @@
 import { PanelTree } from "./panel-tree.js";
-import { ExtensionPanelScope, PanelContent, PanelIcon, PanelLoadContextInput } from "zidane/chat/pure";
+import { ExtensionPanelScope, PanelContent, PanelHomeLayout, PanelIcon, PanelLoadContextInput, PanelSurface } from "zidane/chat/pure";
 //#region src/workspace/headless/host.d.ts
 /**
  * What a layout belongs to: a session, a folder, a draft. The kit only reads
@@ -44,8 +44,12 @@ interface WorkspacePanelSummary {
   owner: string;
   /** The tab icon. */
   icon?: PanelIcon;
-  /** Where it shows: with a session, on a folder alone, or both. */
+  /** Where its side tab shows: with a session, on a folder alone, or both. */
   scope: ExtensionPanelScope;
+  /** The surfaces it shows on: side tab, project-home block. Absent: the side panel only. */
+  surfaces?: readonly PanelSurface[];
+  /** Its default place on the project home. */
+  home?: PanelHomeLayout;
 }
 /** Why an extension panel call failed, for the panel to word through its labels. */
 type WorkspaceHostError =

package/dist/workspace/headless/index.js

@@ -1,7 +1,7 @@
+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";

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

@@ -11,6 +11,10 @@ declare const DEFAULT_WORKSPACE_LABELS: {
   panelShowWaiting: (count: number) => string;
   panelClose: string;
   panelPopOut: string;
+  panelToggle: (open: boolean) => "Hide side panel" | "Show side panel";
+  panelToggleCount: (count: number) => string;
+  panelHomeLabel: string;
+  panelExpand: (expanded: boolean) => "Exit full screen panels" | "Full screen panels";
   panelTabs: string;
   panelGroupTabs: (index: number) => string;
   panelAdd: string;
@@ -21,6 +25,9 @@ declare const DEFAULT_WORKSPACE_LABELS: {
   panelUnavailable: string;
   panelContentNone: string;
   panelContentEmpty: string;
+  panelHeatmapLabel: string;
+  panelChartLabel: string;
+  panelHeatmapDay: (day: string) => string;
   panelRowExpand: string;
   panelRowCollapse: string;
   panelRowShowMore: string;

package/dist/workspace/headless/labels.js

@@ -11,6 +11,10 @@ const DEFAULT_WORKSPACE_LABELS = {
 	panelShowWaiting: (count) => `Show panel (${count} waiting)`,
 	panelClose: "Close panel",
 	panelPopOut: "Side panels in new window",
+	panelToggle: (open) => open ? "Hide side panel" : "Show side panel",
+	panelToggleCount: (count) => `Show side panel, ${count} artifacts`,
+	panelHomeLabel: "Open a panel",
+	panelExpand: (expanded) => expanded ? "Exit full screen panels" : "Full screen panels",
 	panelTabs: "Panels",
 	panelGroupTabs: (index) => `Panels, group ${index}`,
 	panelAdd: "Add panel",
@@ -21,6 +25,16 @@ const DEFAULT_WORKSPACE_LABELS = {
 	panelUnavailable: "This panel is not available here.",
 	panelContentNone: "Nothing to show",
 	panelContentEmpty: "Nothing yet",
+	panelHeatmapLabel: "Activity heatmap",
+	panelChartLabel: "Chart",
+	panelHeatmapDay: (day) => {
+		const [y, m, d] = day.split("-").map(Number);
+		return new Date(y, m - 1, d).toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric"
+		});
+	},
 	panelRowExpand: "Expand",
 	panelRowCollapse: "Collapse",
 	panelRowShowMore: "Show more"

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

@@ -16,6 +16,11 @@ interface WorkspaceTab {
   icon?: PanelIcon;
   /** The app renders it; `false`: an extension panel. */
   builtin: boolean;
+  /**
+   * The kit draws it from the extensions host (`ExtensionsHost`): an extension side panel (`'panel'`) or a
+   * webview panel (`'webview'`) the app's catalog didn't list. Absent: the app's registry draws it.
+   */
+  extension?: 'panel' | 'webview';
 }
 /** One group of tabs on screen: its own strip and active tab. */
 interface PanelGroupView<T extends WorkspaceTab = WorkspaceTab> {

package/dist/workspace/index.d.ts

@@ -1,6 +1,7 @@
 import { WorkspaceActions, WorkspaceApi, WorkspaceContent, WorkspaceContentTarget, WorkspaceHostProvider, WorkspaceHostProviderProps, WorkspaceProvider, WorkspaceProviderProps, WorkspaceRequests, WorkspaceView, useExtensionPanels, useOptionalWorkspaceActions, 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 { PanelContentView, PanelContentViewProps, PanelOpenEvent, detailsPreview } from "./PanelContentView.js";
+import { PanelCorner, PanelCornerProps, panelCornerWidth } from "./PanelCorner.js";
 import { StripControls } from "./PanelStrip.js";
 import { WorkspaceTabRegistry } from "./TabParking.js";
 import { SidePanel, SidePanelProps } from "./SidePanel.js";
@@ -10,4 +11,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, PanelOpenEvent, 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, 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, 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 };

package/dist/workspace/index.js

@@ -1,11 +1,12 @@
 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 { 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 { LayoutBudgetProvider, useLayoutBudget, useLayoutBudgetOptional } from "./LayoutBudget.js";
-import { PanelContentView, detailsPreview } from "./PanelContentView.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, PanelVisibilityContext, SidePanel, TAB_REGION_PROPS, WorkspaceHostProvider, WorkspaceProvider, detailsPreview, focusedTabScope, hoveredTabScope, keepFocusIn, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zidane-ui",
-  "version": "9.0.4",
+  "version": "9.1.3",
   "description": "Zidane design system and chat kit: tokens, surface primitives, theme engine, React components, the chat layer (sessions, transcript, composer) and ChatHost adapters.",
   "type": "module",
   "license": "MIT",
@@ -13,7 +13,7 @@
   "bugs": {
     "url": "https://github.com/Tahul/zidane/issues"
   },
-  "homepage": "https://github.com/Tahul/zidane/tree/main/ui",
+  "homepage": "https://zidane.si",
   "publishConfig": {
     "access": "public"
   },
@@ -407,6 +407,36 @@
       "import": "./dist/git/testing/contract.js",
       "default": "./dist/git/testing/contract.js"
     },
+    "./extensions": {
+      "zidane-source": "./src/extensions/index.ts",
+      "types": "./dist/extensions/index.d.ts",
+      "import": "./dist/extensions/index.js",
+      "default": "./dist/extensions/index.js"
+    },
+    "./extensions/headless": {
+      "zidane-source": "./src/extensions/headless/index.ts",
+      "types": "./dist/extensions/headless/index.d.ts",
+      "import": "./dist/extensions/headless/index.js",
+      "default": "./dist/extensions/headless/index.js"
+    },
+    "./extensions/kit": {
+      "zidane-source": "./src/extensions/kit.ts",
+      "types": "./dist/extensions/kit.d.ts",
+      "import": "./dist/extensions/kit.js",
+      "default": "./dist/extensions/kit.js"
+    },
+    "./extensions/testing": {
+      "zidane-source": "./src/extensions/testing/index.ts",
+      "types": "./dist/extensions/testing/index.d.ts",
+      "import": "./dist/extensions/testing/index.js",
+      "default": "./dist/extensions/testing/index.js"
+    },
+    "./extensions/testing/contract": {
+      "zidane-source": "./src/extensions/testing/contract.ts",
+      "types": "./dist/extensions/testing/contract.d.ts",
+      "import": "./dist/extensions/testing/contract.js",
+      "default": "./dist/extensions/testing/contract.js"
+    },
     "./app": {
       "zidane-source": "./src/app/index.ts",
       "types": "./dist/app/index.d.ts",
@@ -461,10 +491,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src",
-    "!src/**/*.test.ts",
-    "!src/**/*.test.tsx",
-    "!src/**/*.fixtures.ts",
+    "src/styles/*.css",
     "README.md"
   ],
   "engines": {
@@ -487,7 +514,8 @@
     "prepare": "bun run link:zidane"
   },
   "dependencies": {
-    "@pierre/diffs": "~1.5.2",
+    "@pierre/diffs": "~1.6.2",
+    "@pierre/highlights": "0.3.0",
     "@pierre/trees": "^1.0.0-beta.6",
     "@radix-ui/react-dropdown-menu": "^2.1.25",
     "@tahul/ghostty-web": "^0.6.0",
@@ -498,9 +526,9 @@
     "@tiptap/react": "^3.31.4",
     "@tiptap/starter-kit": "^3.31.4",
     "@tiptap/suggestion": "^3.31.4",
+    "pele": "^1.12.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "shiki": "^4.5.0",
     "tippy.js": "^6.3.7"
   },
   "peerDependencies": {
@@ -508,7 +536,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "unocss": ">=66.0.0",
-    "zidane": "^9.0.4",
+    "zidane": "^9.1.3",
     "vitest": ">=3"
   },
   "peerDependenciesMeta": {

package/src/styles/components.css

@@ -247,7 +247,7 @@ html[data-motion='reduced'] .zg-seg > span:nth-child(-n + 3) {
   text-align: center;
 }
 
-.zg-lightbox-text-body pre.shiki {
+.zg-lightbox-text-body pre.highlights {
   padding: 16px 18px;
   font-size: var(--zg-font-size-code);
   line-height: 1.55;
@@ -257,15 +257,14 @@ html[data-motion='reduced'] .zg-seg > span:nth-child(-n + 3) {
   min-width: 100%;
 }
 
-.zg-lightbox-text-body pre.shiki code,
-.zg-lightbox-text-body pre.shiki .line {
+.zg-lightbox-text-body pre.highlights code {
   white-space: pre;
 }
 
-/* A highlighted code block (`code/HighlightedCode.tsx`): shiki's <pre> on
+/* A highlighted code block (`code/HighlightedCode.tsx`): the highlighter's <pre> on
    the code tone, with the plain fallback's metrics. After the lightbox
    rules: a lightbox body that is also `.zg-shiki` takes these. */
-.zg-shiki pre.shiki {
+.zg-shiki pre.highlights {
   margin: 0;
   padding: 0.5rem 0.75rem;
   font-size: var(--zg-font-size-code);
@@ -276,14 +275,14 @@ html[data-motion='reduced'] .zg-seg > span:nth-child(-n + 3) {
 
 /* In its frame (`CodeFrame`), the frame is the code's surface: its tone, and its
    hairline, an inset shadow painted under the code. A <pre> with a background
-   (shiki's, inline) covers that line, and being only as wide as the view while
+   (the theme's, inline) covers that line, and being only as wide as the view while
    its lines run on, slides off it as the code scrolls sideways: no border at
    rest, a piece of it once scrolled. After the rule above. */
-.zg-code-frame pre.shiki {
+.zg-code-frame pre.highlights {
   background: transparent !important;
 }
 
-.zg-shiki pre.shiki code {
+.zg-shiki pre.highlights code {
   background: transparent;
 }
 
@@ -463,6 +462,23 @@ html[data-motion='reduced'] .zg-seg > span:nth-child(-n + 3) {
   font-weight: 600;
   line-height: 1;
 }
+.zg-brand-mark[data-size='xs'] {
+  width: 1em;
+  height: 1em;
+  border-radius: var(--zg-radius-xs);
+}
+.zg-brand-mark[data-size='xs'] > svg,
+.zg-brand-mark[data-size='xs'] > [class*='i-'] {
+  width: 0.72em;
+  height: 0.72em;
+}
+.zg-brand-mark[data-size='xs'] .zg-brand-letter {
+  font-size: var(--zg-font-size-badge);
+  line-height: 1;
+}
+.zg-brand-mark[data-size='xs'] .zg-brand-letter::before {
+  content: attr(data-letter);
+}
 .zg-brand-mark[data-size='sm'] .zg-brand-letter {
   font-size: var(--zg-font-size-badge);
 }

package/src/styles/motion.css

@@ -502,6 +502,12 @@ html[data-motion='off'] .zg-loop,
 html[data-motion='reduced'] .zg-loop {
   animation: none !important;
 }
+/* Spinners hold still too, their glyph (a notch, a ring's arc) left as the
+   loading mark, like `SegmentSpinner`'s static row. */
+html[data-motion='off'] :is(.animate-spin, .zg-spin-ring, .zg-sendstop-ring),
+html[data-motion='reduced'] :is(.animate-spin, .zg-spin-ring, .zg-sendstop-ring) {
+  animation: none;
+}
 
 /* Ping (`zg-dot`) — used as a radiating-ring OVERLAY (Timeline streaming spine,
    Throbber's trailing dot). The element itself stays in place; this
@@ -610,3 +616,32 @@ html[data-motion='reduced'] .zg-loop {
     transform: rotate(360deg);
   }
 }
+
+/* --- Motion preference clamp ------------------------------------------------
+ * The motion vars cover what reads them; these cover the rest. The rules key on
+ * presence-only attributes (`applyMotionVars`): every element tries them in
+ * every restyle, and an absent attribute is rejected without walking to the root.
+ * Looping keyframes under the clamp land on their final frame, which every loop
+ * is designed to make a resting state.
+ * ------------------------------------------------------------------------- */
+/* Off: every transition ~0ms instead of `none`, so transitionend listeners
+   still fire (animation-tied state machines rely on them). 0.01ms is the WebAIM
+   recommendation: visually instant, behaviorally intact. */
+html[data-motion-off] *,
+html[data-motion-off] *::before,
+html[data-motion-off] *::after {
+  transition-duration: 0.01ms !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  scroll-behavior: auto !important;
+}
+/* Below full: infinite loops settle on their resting frame. */
+html[data-motion-limited] * {
+  animation-iteration-count: 1 !important;
+}
+
+/* While dragging, a resized panel follows the pointer 1:1: its width
+   transition is off (`useResizeDrag`); the open/close slide still animates. */
+[data-resizing='true'] {
+  transition-duration: 0ms !important;
+}

package/src/styles/primitives.css

@@ -411,7 +411,8 @@
   right: calc(var(--zg-code-pad-x) - 6px);
 }
 /* Revealed controls (CopyButton `reveal`, CodeFrame's Wrap toggle): shown on
-   hover of their group, focused, or just copied. */
+   hover of their group, focused, just copied, pinned (a run's Stop) or with
+   their menu open. */
 .zg-reveal {
   opacity: 0;
   transition:
@@ -420,7 +421,9 @@
 }
 .group:hover .zg-reveal,
 .zg-reveal:focus-visible,
-.zg-reveal[data-copied='true'] {
+.zg-reveal[data-copied='true'],
+.zg-reveal[data-pinned],
+.zg-reveal[aria-expanded='true'] {
   opacity: 1;
 }
 @media (hover: none) {

package/src/styles/rich-composer.css

@@ -281,14 +281,19 @@ html[data-motion='reduced'] .zg-sendstop::before {
 /* Thin spinner ring — a 16px circle whose top arc carries the accent;
    the rest sits at ~25% so the ring reads as a quiet loader rather than
    a broken border. Rotation lives on the ring itself so the layer's
-   scale crossfade doesn't fight the transform. */
+   scale crossfade doesn't fight the transform. It turns only in a run:
+   hidden, a running loop still makes the window draw every frame. Paused,
+   not removed, so the ring holds its angle while the layer fades out. */
 .zg-sendstop-ring {
   width: 16px;
   height: 16px;
   border-radius: 9999px;
   border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
   border-top-color: currentColor;
-  animation: zg-sendstop-rotate 800ms linear infinite;
+  animation: zg-sendstop-rotate 800ms linear infinite paused;
+}
+.zg-sendstop[data-state='run'] .zg-sendstop-ring {
+  animation-play-state: running;
 }
 
 /* The same ring, small, for inline waits, is the kit's `.zg-spin-ring` (styles/motion.css), on

package/src/styles/sidebar.css

@@ -95,6 +95,30 @@
   }
 }
 
+/* A group heading with a page (`SessionGroupHeader`'s `onOpen`): while its page
+   shows (the project home, a new chat in the project) it wears the active
+   row's raised chip, under its label. */
+.zg-group-head:not(.zg-sticky-head) {
+  position: relative;
+}
+
+.zg-group-head[data-active='true']::before {
+  content: '';
+  position: absolute;
+  inset: 0.5rem 0.25rem 0;
+  z-index: -1;
+  border-radius: var(--zg-radius-md);
+  background: var(--zg-raised);
+  box-shadow: var(--zg-shadow-raised);
+}
+
+/* Above its neighbours: the next sticky heading's top band (its `box-shadow`, which hides rows scrolling under it)
+   would paint over the chip's bottom edge, the next heading sitting right under a collapsed group. */
+.zg-group-head[data-active='true'] {
+  isolation: isolate;
+  z-index: 2;
+}
+
 .zg-sticky-head[data-host-id] {
   z-index: 2;
   height: var(--zg-sticky-head-h);