zidane-ui 9.1.4 → 9.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zidane-ui",
-  "version": "9.1.4",
+  "version": "9.1.6",
   "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",
@@ -536,7 +536,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "unocss": ">=66.0.0",
-    "zidane": "^9.1.4",
+    "zidane": "^9.1.6",
     "vitest": ">=3"
   },
   "peerDependenciesMeta": {

package/src/styles/motion.css

@@ -611,6 +611,19 @@ html[data-motion='reduced'] :is(.animate-spin, .zg-spin-ring, .zg-sendstop-ring)
   animation: zg-sendstop-rotate 800ms linear infinite;
 }
 
+/* --- Step status icon (`StepStatusIcon`) ----------------------------------
+ * A `.zg-swap` whose layers centre their glyph (the spin ring is a fixed
+ * 12px box, the others are 1em glyphs). The layer that lands after a change
+ * pops in on `snap`, its opacity on the swap's `fade`; the pop sits on the
+ * layer so the ring inside keeps its own rotation. */
+.zg-step-icon-layer {
+  display: grid;
+  place-items: center;
+}
+.zg-step-icon-layer[data-landed] {
+  animation: zg-pop var(--zg-motion-snap) both;
+}
+
 @keyframes zg-sendstop-rotate {
   to {
     transform: rotate(360deg);

package/src/styles/onboarding.css

@@ -281,7 +281,6 @@ html[data-motion='off'] .zg-onboarding-step {
 .zg-demo-fade-y {
   mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
 }
-
 /* Two states of one scene in the same cell: the before state, then the
    after state (the rest state). */
 .zg-demo-stack {

package/src/styles/primitives.css

@@ -346,6 +346,16 @@
     var(--zg-shadow-well),
     0 0 0 3px color-mix(in oklab, var(--zg-ring) 18%, transparent);
 }
+/* A well whose value is wrong: the danger edge, focused or not. */
+.zg-well[aria-invalid='true'] {
+  border-color: color-mix(in oklab, var(--zg-danger) 70%, transparent);
+}
+.zg-well[aria-invalid='true']:focus,
+.zg-well[aria-invalid='true']:focus-within {
+  box-shadow:
+    var(--zg-shadow-well),
+    0 0 0 3px color-mix(in oklab, var(--zg-danger) 18%, transparent);
+}
 /* A file dragged over a well that takes it (focused or not). */
 .zg-well[data-drop] {
   border-color: var(--zg-accent);

package/src/styles/workspace.css

@@ -63,6 +63,23 @@
   padding-right: calc(0.5rem + var(--zg-strip-end-inset));
 }
 
+/* A panel row's buttons (`PanelRowItem.actions`): shown while the row is hovered or holds focus, or one runs.
+   Their place is kept, so the row never shifts. */
+.zg-row-actions {
+  opacity: 0;
+  transition: opacity var(--zg-motion-hover);
+}
+.group:hover .zg-row-actions,
+.group:focus-within .zg-row-actions,
+.zg-row-actions[data-busy] {
+  opacity: 1;
+}
+@media (hover: none) {
+  .zg-row-actions {
+    opacity: 1;
+  }
+}
+
 /* The corner (`PanelCorner`): pop out and full screen fade in left of the toggle while the panel shows. */
 .zg-panel-corner-extra {
   transition: opacity var(--zg-motion-fade);

package/dist/session/TodosPanel.d.ts

@@ -1,19 +0,0 @@
-import { CSSProperties } from "react";
-//#region src/session/TodosPanel.d.ts
-/** Props for {@link TodosPanel}. */
-interface TodosPanelProps {
-  /** The session whose list the panel shows. */
-  sessionId: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-/**
- * A session's todo list with its edits, retry, add box, tally and "Clear all".
- *
- * @param props - The {@link TodosPanelProps}.
- */
-declare function TodosPanel({ sessionId, className, style }: TodosPanelProps): import("react").JSX.Element;
-//#endregion
-export { TodosPanel, TodosPanelProps };

package/dist/session/TodosPanel.js

@@ -1,251 +0,0 @@
-import { IconButton } from "../components/IconButton.js";
-import { buttonClass } from "../components/button.js";
-import { MetaChip } from "../components/Form.js";
-import { PanelEmpty } from "../components/PanelEmpty.js";
-import { useSessionHost, useSessionTodos } from "./SessionProvider.js";
-import { useSessionLabels } from "./useSessionLabels.js";
-import { TODO_ROW_CLASS, TodoTally, isDoneTodo, todoGlyphTone } from "./TodoList.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { TODO_STATUS_GLYPHS, addTodo, buildTodoRetryMessage, clearTodos, cycleTodoStatus, editTodo, removeTodo } from "zidane/chat/pure";
-//#region src/session/TodosPanel.tsx
-/**
-* The Todos panel: a session's live list, editable at parity with the TUI's
-* modal. Shows the live list when non-empty, else the archive (the last
-* list, read-only).
-*
-* Every edit goes through the shared todo transforms (`zidane/chat/pure`)
-* and commits through the host's `todos.set`, which lands on the session the
-* model reads; the panel follows the host's snapshot, so no shadow list
-* lives here. Only "which row is mid-edit" and the add box are local.
-*
-* Gestures: click the glyph to cycle the status, click the text to edit in
-* place (Enter saves, Esc cancels, blur saves), retry asks the agent to redo
-* the row, remove drops it, the box at the bottom adds, "Clear all" empties
-* after an inline confirm. Without `todos.set` the panel is read-only;
-* without `todos.retry` there is no retry.
-*/
-const INPUT_CLS = "zg-well flex-1 min-w-0 font-mono text-zg-label px-2.5 py-1 placeholder:text-[var(--zg-text-subtle)]";
-const GHOST_BTN = buttonClass({
-	variant: "ghost",
-	size: "xs"
-});
-/**
-* A session's todo list with its edits, retry, add box, tally and "Clear all".
-*
-* @param props - The {@link TodosPanelProps}.
-*/
-function TodosPanel({ sessionId, className, style }) {
-	const labels = useSessionLabels();
-	const host = useSessionHost().todos;
-	const snap = useSessionTodos(sessionId);
-	const refresh = host?.refresh;
-	const set = host?.set;
-	const retryRun = host?.retry;
-	useEffect(() => {
-		refresh?.(sessionId);
-	}, [sessionId, refresh]);
-	const list = snap ? snap.todos.length > 0 ? snap.todos : snap.archive : [];
-	const isArchive = Boolean(snap && snap.todos.length === 0 && snap.archive.length > 0);
-	const total = list.length;
-	const done = snap ? snap.tally.completed + snap.tally.cancelled : 0;
-	const editable = Boolean(set);
-	const [editingId, setEditingId] = useState(null);
-	const [draft, setDraft] = useState("");
-	const [adding, setAdding] = useState("");
-	const [error, setError] = useState(null);
-	const [confirmClear, setConfirmClear] = useState(false);
-	const editRef = useRef(null);
-	useEffect(() => {
-		if (editingId) {
-			editRef.current?.focus();
-			editRef.current?.select();
-		}
-	}, [editingId]);
-	const base = snap?.todos ?? [];
-	const saveFailed = labels.todosSaveFailed;
-	const commit = useCallback((next) => {
-		if (!set) return;
-		setError(null);
-		set(sessionId, next).then((applied) => {
-			if (!applied) setError(saveFailed);
-		}, (err) => setError(err instanceof Error ? err.message : String(err)));
-	}, [
-		sessionId,
-		set,
-		saveFailed
-	]);
-	const startEdit = (todo) => {
-		if (isArchive || !editable) return;
-		setEditingId(todo.id);
-		setDraft(todo.content);
-	};
-	const saveEdit = () => {
-		if (!editingId) return;
-		const trimmed = draft.trim();
-		if (trimmed.length > 0) commit(editTodo(base, editingId, trimmed));
-		setEditingId(null);
-	};
-	const submitAdd = () => {
-		const trimmed = adding.trim();
-		if (trimmed.length === 0) return;
-		commit(addTodo(base, trimmed));
-		setAdding("");
-	};
-	/** Steer the run with the shared retry text: mid-run it steers, idle it starts a run. */
-	const retry = (todo) => {
-		if (!retryRun) return;
-		setError(null);
-		retryRun(sessionId, buildTodoRetryMessage(todo)).catch((err) => setError(err.message));
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: ["flex-1 min-h-0 flex flex-col", className].filter(Boolean).join(" "),
-		style,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex-1 min-h-0 overflow-y-auto",
-			children: list.length === 0 ? /* @__PURE__ */ jsx(PanelEmpty, {
-				icon: "i-ph-list-checks",
-				title: labels.todosEmpty,
-				hint: labels.todosEmptyHint
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-2 p-3",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "zg-meta flex items-center gap-1 px-2",
-					"data-testid": "todo-progress",
-					children: [isArchive && /* @__PURE__ */ jsx("span", {
-						className: "mr-1",
-						children: labels.todosLastList
-					}), /* @__PURE__ */ jsx(MetaChip, { children: labels.todosProgress(done, total) })]
-				}), /* @__PURE__ */ jsx("ul", {
-					className: "flex flex-col gap-px m-0 p-0 list-none",
-					children: list.map((todo) => {
-						const dim = isDoneTodo(todo.status);
-						const glyphTone = todoGlyphTone(todo.status);
-						const rowEditable = editable && !isArchive;
-						return /* @__PURE__ */ jsxs("li", {
-							"data-status": todo.status,
-							className: `group ${TODO_ROW_CLASS} hover:bg-[var(--zg-row-hover)]`,
-							children: [
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": labels.todoChangeStatus(todo.status),
-									title: rowEditable ? labels.todoChangeStatusHint(todo.status) : labels.todoStatus(todo.status),
-									disabled: !rowEditable,
-									onClick: () => commit(cycleTodoStatus(base, todo.id)),
-									className: `text-zg-ui leading-6 w-4 shrink-0 bg-transparent border-0 p-0 cursor-pointer disabled:cursor-default ${glyphTone}`,
-									children: TODO_STATUS_GLYPHS[todo.status]
-								}),
-								editingId === todo.id ? /* @__PURE__ */ jsx("input", {
-									ref: editRef,
-									type: "text",
-									value: draft,
-									spellCheck: false,
-									"aria-label": labels.todoEdit,
-									onChange: (e) => setDraft(e.target.value),
-									onBlur: saveEdit,
-									onKeyDown: (e) => {
-										if (e.key === "Enter") saveEdit();
-										if (e.key === "Escape") setEditingId(null);
-									},
-									className: INPUT_CLS
-								}) : /* @__PURE__ */ jsx("button", {
-									type: "button",
-									disabled: !rowEditable,
-									onClick: () => startEdit(todo),
-									title: rowEditable ? labels.todoEdit : void 0,
-									className: `flex-1 min-w-0 text-left text-zg-ui leading-6 bg-transparent border-0 p-0 cursor-text disabled:cursor-default truncate ${dim ? "text-[var(--zg-text-muted)] line-through" : "text-[var(--zg-text)]"}`,
-									children: todo.content
-								}),
-								rowEditable && /* @__PURE__ */ jsxs(Fragment, { children: [retryRun && /* @__PURE__ */ jsx(IconButton, {
-									size: "xs",
-									icon: "i-ph-arrow-clockwise",
-									label: labels.todoRetry,
-									title: labels.todoRetryHint,
-									onClick: () => retry(todo),
-									className: "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
-								}), /* @__PURE__ */ jsx(IconButton, {
-									size: "xs",
-									icon: "i-ph-x",
-									label: labels.todoRemove,
-									title: labels.todoRemoveHint,
-									tone: "danger",
-									onClick: () => commit(removeTodo(base, todo.id)),
-									className: "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
-								})] })
-							]
-						}, todo.id);
-					})
-				})]
-			})
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "shrink-0 px-3 pt-1 pb-3 flex flex-col gap-2",
-			children: [
-				error && /* @__PURE__ */ jsx("div", {
-					className: "text-zg-meta text-[var(--zg-warn)]",
-					role: "alert",
-					children: error
-				}),
-				editable && /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "text",
-						placeholder: labels.todoAddPlaceholder,
-						"aria-label": labels.todoAddLabel,
-						value: adding,
-						spellCheck: false,
-						onChange: (e) => setAdding(e.target.value),
-						onKeyDown: (e) => {
-							if (e.key === "Enter") submitAdd();
-						},
-						className: INPUT_CLS
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: GHOST_BTN,
-						disabled: adding.trim().length === 0,
-						onClick: submitAdd,
-						children: labels.todoAdd
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between gap-3 min-h-6",
-					children: [snap && /* @__PURE__ */ jsx(TodoTally, {
-						tally: snap.tally,
-						className: "ml-2"
-					}), !editable ? null : confirmClear ? /* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-1.5 text-zg-meta",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "text-[var(--zg-text-muted)]",
-								children: labels.todosClearConfirm(base.length)
-							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: `${GHOST_BTN} text-[var(--zg-error)]`,
-								onClick: () => {
-									commit(clearTodos());
-									setConfirmClear(false);
-								},
-								children: labels.todosClearYes
-							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: GHOST_BTN,
-								onClick: () => setConfirmClear(false),
-								children: labels.todosClearCancel
-							})
-						]
-					}) : /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: GHOST_BTN,
-						disabled: base.length === 0,
-						onClick: () => setConfirmClear(true),
-						title: labels.todosClearHint,
-						children: labels.todosClear
-					})]
-				})
-			]
-		})]
-	});
-}
-//#endregion
-export { TodosPanel };

package/dist/session/headless/todos.d.ts

@@ -1,22 +0,0 @@
-import { Readable } from "../../chat/headless/store.js";
-import { TodosSnapshot } from "./host.js";
-//#region src/session/headless/todos.d.ts
-/** The todo snapshots of every session a host has seen. */
-interface TodosState {
-  /** The session's snapshot store (`null` until known). */
-  snapshot(sessionId: string): Readable<TodosSnapshot | null>;
-  /** Reads the session from the backend: one request per session at a time, never rejects. */
-  refresh(sessionId: string): Promise<void>;
-  /** A snapshot the backend pushed. */
-  push(sessionId: string, snapshot: TodosSnapshot): void;
-  /** Forgets a deleted session. */
-  forget(sessionId: string): void;
-}
-/**
- * Creates a {@link TodosState}.
- *
- * @param read - Reads one session's snapshot from the backend (`null`: no list yet).
- */
-declare function createTodosState(read: (sessionId: string) => Promise<TodosSnapshot | null>): TodosState;
-//#endregion
-export { TodosState, createTodosState };

package/dist/session/headless/todos.js

@@ -1,38 +0,0 @@
-import { createKeyedState } from "./keyed.js";
-//#region src/session/headless/todos.ts
-/**
-* Creates a {@link TodosState}.
-*
-* @param read - Reads one session's snapshot from the backend (`null`: no list yet).
-*/
-function createTodosState(read) {
-	const state = createKeyedState(null);
-	const pushes = /* @__PURE__ */ new Map();
-	const inflight = /* @__PURE__ */ new Map();
-	return {
-		snapshot: (sessionId) => state.readable(sessionId),
-		refresh(sessionId) {
-			const running = inflight.get(sessionId);
-			if (running) return running;
-			const seenPushes = pushes.get(sessionId) ?? 0;
-			const p = read(sessionId).then((snap) => {
-				if (!snap || (pushes.get(sessionId) ?? 0) !== seenPushes) return;
-				state.set(sessionId, snap);
-			}).catch(() => void 0).finally(() => {
-				inflight.delete(sessionId);
-			});
-			inflight.set(sessionId, p);
-			return p;
-		},
-		push(sessionId, snapshot) {
-			pushes.set(sessionId, (pushes.get(sessionId) ?? 0) + 1);
-			state.set(sessionId, snapshot);
-		},
-		forget(sessionId) {
-			pushes.delete(sessionId);
-			state.delete(sessionId);
-		}
-	};
-}
-//#endregion
-export { createTodosState };