zidane-ui 9.1.13 → 9.1.16

package/dist/chat/transcript/fold.js

@@ -187,23 +187,35 @@ function FoldOutcomes({ ok, failed }) {
 * a toggle with its caret when opening shows something more, otherwise the
 * same line, inert. Same box, tone and spacing either way.
 *
+* One element in both states: swapping a `<div>` for a `<button>` remounted
+* the line's content, so a live fold turning expandable (its 4th step) replayed
+* the enter of everything in it, its elapsed chip popping in again.
+*
 * @param props - Header props: `expandable`, `open`, `onToggle`, and the `children` of the line.
 */
 function FoldHeader({ expandable, open, onToggle, children, className, style }) {
 	const line = "flex items-baseline gap-2 h-[22.4px] min-w-0 max-w-full text-[var(--zg-text-muted)]";
-	if (!expandable) return /* @__PURE__ */ jsx("div", {
-		"data-testid": "fold-head",
-		className: [line, className].filter(Boolean).join(" "),
-		style,
-		children
-	});
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: onToggle,
+	const toggle = expandable ? {
+		role: "button",
+		tabIndex: 0,
 		"aria-expanded": open,
-		className: [`zg-disclosure zg-press-subtle ${line}`, className].filter(Boolean).join(" "),
+		onClick: onToggle,
+		onKeyDown: (e) => {
+			if (e.key !== "Enter" && e.key !== " ") return;
+			e.preventDefault();
+			onToggle();
+		}
+	} : {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "fold-head",
+		className: [
+			expandable ? "zg-disclosure zg-press-subtle" : "",
+			line,
+			className
+		].filter(Boolean).join(" "),
 		style,
-		children: [children, /* @__PURE__ */ jsx(Caret, {
+		...toggle,
+		children: [children, expandable && /* @__PURE__ */ jsx(Caret, {
 			open,
 			className: "shrink-0 self-center"
 		})]
@@ -224,6 +236,7 @@ function FoldActions({ items, all, openIds, onToggle, renderRows }) {
 			children: items.map((item) => /* @__PURE__ */ jsx(Grow, {
 				as: "li",
 				appear: !firstIds.has(item.id),
+				symmetric: !all,
 				className: "-mx-1.5 px-1.5",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "pt-[var(--zg-fold-gap)]",
@@ -260,20 +273,38 @@ function ActionWithDetails({ item, openIds, onToggle, renderRows }) {
 				})
 			})
 		}),
-		item.children && item.children.length > 0 && /* @__PURE__ */ jsx("ul", {
-			className: "list-none m-0 p-0 pl-7",
-			"data-testid": "fold-action-children",
-			children: item.children.map((child) => /* @__PURE__ */ jsx("li", {
-				className: "pt-[var(--zg-fold-gap)]",
-				children: /* @__PURE__ */ jsx(ActionWithDetails, {
-					item: child,
-					openIds,
-					onToggle,
-					renderRows
+		item.children && item.children.length > 0 && /* @__PURE__ */ jsx(ActionChildren, {
+			items: item.children,
+			openIds,
+			onToggle,
+			renderRows
+		})
+	] });
+}
+/** The calls an action made, one step in. A call made after the list showed grows in instead of snapping the rows below down. */
+function ActionChildren({ items, openIds, onToggle, renderRows }) {
+	const [firstIds] = useState(() => new Set(items.map((i) => i.id)));
+	return /* @__PURE__ */ jsx("ul", {
+		className: "list-none m-0 p-0 pl-7",
+		"data-testid": "fold-action-children",
+		children: /* @__PURE__ */ jsx(GrowPresence, {
+			initial: false,
+			children: items.map((child) => /* @__PURE__ */ jsx(Grow, {
+				as: "li",
+				appear: !firstIds.has(child.id),
+				className: "-mx-1.5 px-1.5",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pt-[var(--zg-fold-gap)]",
+					children: /* @__PURE__ */ jsx(ActionWithDetails, {
+						item: child,
+						openIds,
+						onToggle,
+						renderRows
+					})
 				})
 			}, child.id))
 		})
-	] });
+	});
 }
 /** The item or one of the calls nested under it has its details open. */
 function openWithin(item, openIds) {

package/dist/chat/transcript/script-input.d.ts

@@ -1,6 +1,6 @@
 import { ToolRowModel } from "../headless/transcript/rows.js";
 import "../headless/transcript/index.js";
-import { Yw as ScriptProgress } from "../../dist/index-Bq87OcGy.js";
+import { iT as ScriptProgress } from "../../dist/index-BZM8tu4L.js";
 //#region src/chat/transcript/script-input.d.ts
 /**
  * A tool row's progress and how it ended, as `ToolInput` takes them for a Codemode script.

package/dist/chat/transcript/shell-block.js

@@ -1,5 +1,6 @@
 import { iconButtonClass } from "../../components/IconButton.js";
 import { CopyButton } from "../../components/CopyButton.js";
+import { Notice } from "../../components/Notice.js";
 import { Grow, GrowPresence } from "../../motion/grow.js";
 import { SmoothHeight } from "../../motion/size.js";
 import { constant, useReadable } from "../headless/store.js";
@@ -200,9 +201,12 @@ function RunPanel({ code, live, saved, onAgain, onTerminal, onRemove }) {
 				running: true
 			})]
 		});
-		if (live?.error !== void 0) return /* @__PURE__ */ jsx("span", {
-			className: "text-zg-danger",
-			children: labels.blockRunFailed(live.error)
+		if (live?.error !== void 0) return /* @__PURE__ */ jsx(Notice, {
+			tone: "error",
+			compact: true,
+			detail: live.error,
+			className: "min-w-0",
+			children: labels.blockRunError
 		});
 		if (!saved) return null;
 		const label = saved.stopped === "timeout" ? labels.blockRunTimedOut : saved.stopped === "cancelled" ? labels.blockRunStopped : saved.exitCode === null ? labels.shellKilled : labels.shellExit(saved.exitCode);

package/dist/chat/transcript/useStickToBottom.js

@@ -422,6 +422,17 @@ function useStickToBottom(scrollRef, { paused = false, rowSelector = ".zg-cv-row
 		ro.observe(el);
 		const content = el.firstElementChild;
 		if (content) ro.observe(content);
+		const clamps = new MutationObserver(() => {
+			if (!pinnedRef.current || held.current || pausedRef.current) return;
+			const top = el.scrollTop;
+			if (top < lastTop.current - 1 && el.scrollHeight - el.clientHeight - top <= 1) lastTop.current = top;
+		});
+		if (content) clamps.observe(content, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true
+		});
 		lastTop.current = el.scrollTop;
 		const glideState = glide.current;
 		return () => {
@@ -436,6 +447,7 @@ function useStickToBottom(scrollRef, { paused = false, rowSelector = ".zg-cv-row
 			el.removeEventListener("wheel", onWheel);
 			el.removeEventListener("keydown", onKey);
 			ro.disconnect();
+			clamps.disconnect();
 		};
 	}, [
 		scrollRef,

package/dist/components/BrowserSignIn.js

@@ -1,6 +1,7 @@
 import { useLabels } from "../labels.js";
 import { buttonClass } from "./button.js";
 import { CopyButton } from "./CopyButton.js";
+import { Notice } from "./Notice.js";
 import { INPUT_CLASS } from "./Form.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
@@ -27,12 +28,27 @@ function hostOf(url) {
 */
 function BrowserSignIn({ state, service, onCancel, onRetry, onSubmit, className = "", style }) {
 	const labels = useLabels();
-	const failed = state.kind === "error";
+	if (state.kind === "error") return /* @__PURE__ */ jsx(Notice, {
+		tone: "error",
+		detail: state.message,
+		action: onRetry && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onRetry,
+			className: buttonClass({
+				variant: "primary",
+				size: "sm"
+			}),
+			children: labels.retry
+		}),
+		className: `text-zg-label ${className}`.trimEnd(),
+		style,
+		children: labels.signInFailed
+	});
 	const done = state.kind === "done";
 	return /* @__PURE__ */ jsxs("div", {
-		role: failed ? "alert" : "status",
-		"aria-live": failed ? void 0 : "polite",
-		className: `flex flex-col gap-3 px-3 py-2.5 rounded-zg-md text-zg-label ${failed ? "bg-zg-danger/10" : "zg-tray"} ${className}`,
+		role: "status",
+		"aria-live": "polite",
+		className: `flex flex-col gap-3 px-3 py-2.5 rounded-zg-md text-zg-label zg-tray ${className}`,
 		style,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-start gap-3",
@@ -40,7 +56,7 @@ function BrowserSignIn({ state, service, onCancel, onRetry, onSubmit, className
 				/* @__PURE__ */ jsx("span", {
 					className: "mt-0.5 shrink-0",
 					"aria-hidden": true,
-					children: done ? /* @__PURE__ */ jsx("span", { className: "i-ph-check-circle-fill text-zg-body text-[var(--zg-accent)]" }) : failed ? /* @__PURE__ */ jsx("span", { className: "i-ph-warning-circle-fill text-zg-body text-zg-danger" }) : /* @__PURE__ */ jsx("span", { className: "zg-spin-ring zg-loop block mt-px text-[var(--zg-accent)]" })
+					children: done ? /* @__PURE__ */ jsx("span", { className: "i-ph-check-circle-fill text-zg-body text-[var(--zg-accent)]" }) : /* @__PURE__ */ jsx("span", { className: "zg-spin-ring zg-loop block mt-px text-[var(--zg-accent)]" })
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "flex-1 min-w-0 flex flex-col gap-1",
@@ -49,15 +65,7 @@ function BrowserSignIn({ state, service, onCancel, onRetry, onSubmit, className
 						service
 					})
 				}),
-				failed ? onRetry && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: onRetry,
-					className: buttonClass({
-						variant: "primary",
-						size: "sm"
-					}),
-					children: labels.retry
-				}) : !done && onCancel && /* @__PURE__ */ jsx("button", {
+				!done && onCancel && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onCancel,
 					className: buttonClass({
@@ -88,13 +96,7 @@ function SignInMessage({ state, service }) {
 			className: "text-[var(--zg-text)]",
 			children: labels.signInDone(state.account)
 		});
-		case "error": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-			className: "text-zg-danger font-medium",
-			children: labels.signInFailed
-		}), /* @__PURE__ */ jsx("span", {
-			className: "text-[var(--zg-text-muted)] break-words",
-			children: state.message
-		})] });
+		case "error": return null;
 		case "url": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "text-[var(--zg-text)]",
 			children: state.instructions ?? labels.signInInBrowser(service)

package/dist/components/Form.d.ts

@@ -18,25 +18,27 @@ declare const FIELD_LABEL_CLASS = "block text-xs text-[var(--zg-text-muted)] mb-
 declare const FORM_CARD_CLASS = "zg-raised border rounded-zg-lg p-4 space-y-3";
 /** Props for {@link ErrorNote}. */
 interface ErrorNoteProps {
-  /** The error message. */
+  /** The error message, worded for people. */
   children: ReactNode;
+  /** The raw words behind it (an exception's message): folded under Details. */
+  detail?: string;
   /** Extra classes on the root element. */
   className?: string;
   /** Inline styles on the root element, merged after the component's own. */
   style?: CSSProperties;
 }
 /**
- * A failure worth reading: a soft danger wash, no border.
+ * A failure worth reading: an error {@link Notice}.
  *
  * @param props - Component props.
  */
-declare function ErrorNote({ children, className, style }: ErrorNoteProps): import("react").JSX.Element;
+declare function ErrorNote({ children, detail, className, style }: ErrorNoteProps): import("react").JSX.Element;
 /** Props for {@link OpLine}. */
 interface OpLineProps {
   /**
    * Tone of the line: `busy` and `notice` are muted (a result worth a quiet line,
    * never a celebration: a success that shows elsewhere needs no line at all), and
-   * `error` is danger-coloured and announced as an alert.
+   * `error` is a compact error {@link Notice}.
    */
   kind: 'busy' | 'notice' | 'error';
   /** The feedback text. */

package/dist/components/Form.js

@@ -1,3 +1,4 @@
+import { Notice } from "./Notice.js";
 import { Segmented } from "./Segmented.js";
 import { Raised, SectionLabel, Tray } from "./Surface.js";
 import { SwitchGlyph } from "./SwitchGlyph.js";
@@ -23,15 +24,16 @@ const FIELD_LABEL_CLASS = "block text-xs text-[var(--zg-text-muted)] mb-1";
 /** An inline add / install form: a raised card above the list it feeds. */
 const FORM_CARD_CLASS = "zg-raised border rounded-zg-lg p-4 space-y-3";
 /**
-* A failure worth reading: a soft danger wash, no border.
+* A failure worth reading: an error {@link Notice}.
 *
 * @param props - Component props.
 */
-function ErrorNote({ children, className, style }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "alert",
-		className: ["px-3 py-2 rounded-zg-md bg-zg-danger/10 text-xs text-zg-danger break-words", className].filter(Boolean).join(" "),
-		style,
+function ErrorNote({ children, detail, className, style }) {
+	return /* @__PURE__ */ jsx(Notice, {
+		tone: "error",
+		...detail ? { detail } : {},
+		...className ? { className } : {},
+		...style ? { style } : {},
 		children
 	});
 }
@@ -41,9 +43,15 @@ function ErrorNote({ children, className, style }) {
 * @param props - Component props.
 */
 function OpLine({ kind, children, className, style }) {
+	if (kind === "error") return /* @__PURE__ */ jsx(Notice, {
+		tone: "error",
+		compact: true,
+		...className ? { className } : {},
+		...style ? { style } : {},
+		children
+	});
 	return /* @__PURE__ */ jsx("div", {
-		role: kind === "error" ? "alert" : void 0,
-		className: [`px-1 text-xs break-words ${kind === "error" ? "text-zg-danger" : "text-[var(--zg-text-muted)]"}`, className].filter(Boolean).join(" "),
+		className: ["px-1 text-xs break-words text-[var(--zg-text-muted)]", className].filter(Boolean).join(" "),
 		style,
 		children
 	});

package/dist/components/LoadError.d.ts

@@ -4,6 +4,8 @@ import { CSSProperties, ReactNode } from "react";
 interface LoadErrorProps {
   /** The line: what could not be read and why. */
   children: ReactNode;
+  /** The raw words behind it (an exception's message): folded under Details. */
+  detail?: string;
   /** Reads again; absent, no Retry. */
   onRetry?: () => void;
   /** Spacing from the surroundings. */
@@ -12,10 +14,10 @@ interface LoadErrorProps {
   style?: CSSProperties;
 }
 /**
- * Renders a failed read's line in the danger colour, `children` first (`Couldn't scan for plugins: …`).
+ * Renders a failed read's line as a compact error notice, `children` first (`Couldn't scan for plugins`).
  *
  * @param props - Component props.
  */
-declare function LoadError({ children, onRetry, className, style }: LoadErrorProps): import("react").JSX.Element;
+declare function LoadError({ children, detail, onRetry, className, style }: LoadErrorProps): import("react").JSX.Element;
 //#endregion
 export { LoadError, LoadErrorProps };

package/dist/components/LoadError.js

@@ -1,23 +1,27 @@
 import { useLabels } from "../labels.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Notice } from "./Notice.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/LoadError.tsx
 /**
-* Renders a failed read's line in the danger colour, `children` first (`Couldn't scan for plugins: …`).
+* Renders a failed read's line as a compact error notice, `children` first (`Couldn't scan for plugins`).
 *
 * @param props - Component props.
 */
-function LoadError({ children, onRetry, className = "", style }) {
+function LoadError({ children, detail, onRetry, className, style }) {
 	const labels = useLabels();
-	return /* @__PURE__ */ jsxs("p", {
-		role: "alert",
-		className: `m-0 text-xs text-zg-danger ${className}`,
-		style,
-		children: [children, onRetry && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsx(Notice, {
+		tone: "error",
+		compact: true,
+		...detail ? { detail } : {},
+		...className ? { className } : {},
+		...style ? { style } : {},
+		...onRetry ? { action: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "bg-transparent border-0 p-0 cursor-pointer underline text-inherit",
 			onClick: onRetry,
 			children: labels.retry
-		})] })]
+		}) } : {},
+		children
 	});
 }
 //#endregion

package/dist/components/Notice.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, ReactNode } from "react";
+//#region src/components/Notice.d.ts
+/** How serious a {@link Notice} is. */
+type NoticeTone = 'error' | 'warning' | 'info';
+/** Props for {@link Notice}. */
+interface NoticeProps {
+  /** How serious it is: the glyph, the colour, and `alert` (error) or `status`. */
+  tone: NoticeTone;
+  /** The message, worded for people. */
+  children: ReactNode;
+  /** The raw words behind it (an exception's message, a server's answer): folded under Details. */
+  detail?: string;
+  /** A control after the message (Retry, Open settings). */
+  action?: ReactNode;
+  /** One tight line, for a row or a form field. Default: a block with room around it. */
+  compact?: boolean;
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element, merged after the component's own. */
+  style?: CSSProperties;
+}
+/**
+ * Renders a toned message: glyph, the words, an optional action, and the raw detail folded away.
+ *
+ * @param props - {@link NoticeProps}.
+ */
+declare function Notice({ tone, children, detail, action, compact, className, style }: NoticeProps): import("react").JSX.Element;
+//#endregion
+export { Notice, NoticeProps, NoticeTone };

package/dist/components/Notice.js

@@ -0,0 +1,63 @@
+import { useLabels } from "../labels.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Notice.tsx
+const TONES = {
+	error: {
+		wash: "bg-zg-danger/10",
+		text: "text-zg-danger",
+		icon: "i-ph-warning-circle"
+	},
+	warning: {
+		wash: "bg-zg-warn/10",
+		text: "text-zg-warn",
+		icon: "i-ph-warning"
+	},
+	info: {
+		wash: "bg-zg-info/10",
+		text: "text-[var(--zg-text-muted)]",
+		icon: "i-ph-info"
+	}
+};
+/**
+* Renders a toned message: glyph, the words, an optional action, and the raw detail folded away.
+*
+* @param props - {@link NoticeProps}.
+*/
+function Notice({ tone, children, detail, action, compact = false, className, style }) {
+	const labels = useLabels();
+	const t = TONES[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		role: tone === "error" ? "alert" : "status",
+		"data-tone": tone,
+		className: [
+			compact ? "px-2 py-1 rounded-zg-sm" : "px-3 py-2 rounded-zg-md",
+			`flex items-start gap-2 text-xs break-words ${t.wash} ${t.text}`,
+			className
+		].filter(Boolean).join(" "),
+		style,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: `${t.icon} shrink-0 mt-[2px]`
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline gap-x-2 gap-y-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0",
+					children
+				}), action]
+			}), detail && /* @__PURE__ */ jsxs("details", {
+				className: "mt-1 text-[var(--zg-text-muted)]",
+				children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer select-none",
+					children: labels.noticeDetails
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "m-0 mt-1 whitespace-pre-wrap break-words font-mono text-zg-meta",
+					children: detail
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { Notice };

package/dist/components/PanelEmpty.d.ts

@@ -4,7 +4,7 @@ import { CSSProperties, ReactNode } from "react";
 interface PanelEmptyProps {
   /** Icon class shown above the title, such as `i-ph-files`. */
   icon?: string;
-  /** Main message. It takes the warning colour when `warn` is set. */
+  /** Main message. With `warn`, a warning {@link Notice}. */
   title: ReactNode;
   /** Secondary text under the title. */
   hint?: ReactNode;

package/dist/components/PanelEmpty.js

@@ -1,4 +1,5 @@
 import { useLabels } from "../labels.js";
+import { Notice } from "./Notice.js";
 import { EmptyState } from "./Surface.js";
 import { SegmentSpinner } from "./SegmentSpinner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,8 +16,9 @@ function PanelEmpty({ icon, title, hint, warn = false, className, style }) {
 		style,
 		children: /* @__PURE__ */ jsx(EmptyState, {
 			icon,
-			title: warn ? /* @__PURE__ */ jsx("span", {
-				className: "text-[var(--zg-warn)]",
+			title: warn ? /* @__PURE__ */ jsx(Notice, {
+				tone: "warning",
+				compact: true,
 				children: title
 			}) : title,
 			hint,

package/dist/components/Restricted.d.ts

@@ -4,7 +4,7 @@ import { CSSProperties, ReactNode } from "react";
 interface RestrictedProps {
   /** Whether this connection may not change what it wraps. */
   restricted: boolean;
-  /** Why, short: the tooltip and the group's accessible name ("Admin only"). */
+  /** Why, short: the tooltip and the group's accessible name ("The server does not offer this"). */
   reason: string;
   /** What it wraps. */
   children: ReactNode;

package/dist/components/palette/PaletteList.js

@@ -79,7 +79,14 @@ function PaletteList({ groups, cursor, query, nested, onHover, onRun, renderRow,
 		ref: scroller,
 		id: "zg-palette-list",
 		role: "listbox",
-		className: ["zg-palette-list overflow-y-auto overscroll-contain", className].filter(Boolean).join(" "),
+		tabIndex: -1,
+		onMouseDown: (e) => {
+			if (e.target !== e.currentTarget) e.preventDefault();
+		},
+		onFocus: (e) => {
+			if (e.target === e.currentTarget && e.relatedTarget instanceof HTMLElement) e.relatedTarget.focus();
+		},
+		className: ["zg-palette-list select-none overflow-y-auto overscroll-contain", className].filter(Boolean).join(" "),
 		style: {
 			height: viewHeight,
 			...style

package/dist/components/palette/PalettePanel.js

@@ -1,5 +1,6 @@
 import { useLabels } from "../../labels.js";
 import { IconButton } from "../IconButton.js";
+import { Notice } from "../Notice.js";
 import { PaletteList, defaultPaletteKeys } from "./PaletteList.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, useEffect, useMemo, useRef, useState } from "react";
@@ -115,12 +116,12 @@ function PalettePanel({ groups, query, onQueryChange, cursor, onCursorChange, on
 				return;
 			}
 			case "Tab":
+				e.preventDefault();
+				e.stopPropagation();
 				if (e.shiftKey && !nested && onScopeNext) {
-					e.preventDefault();
-					e.stopPropagation();
 					onScopeNext();
 					onCursorChange(0);
-				}
+				} else if (flat.length > 0) onCursorChange(e.shiftKey ? (cursor - 1 + flat.length) % flat.length : (cursor + 1) % flat.length);
 				return;
 			case "Backspace":
 				if (query === "" && nested && onBack) {
@@ -225,11 +226,18 @@ function PalettePanel({ groups, query, onQueryChange, cursor, onCursorChange, on
 					})
 				]
 			}),
-			notice && /* @__PURE__ */ jsx("div", {
+			notice && (notice.tone === "error" || notice.tone === "warn" ? /* @__PURE__ */ jsx("div", {
+				className: "px-3 py-2 shadow-[inset_0_1px_0_var(--zg-hairline)]",
+				children: /* @__PURE__ */ jsx(Notice, {
+					tone: notice.tone === "error" ? "error" : "warning",
+					compact: true,
+					children: notice.text
+				})
+			}) : /* @__PURE__ */ jsx("div", {
 				role: "status",
-				className: `px-3 py-2 shadow-[inset_0_1px_0_var(--zg-hairline)] text-zg-label ${notice.tone === "error" ? "text-zg-danger" : notice.tone === "warn" ? "text-zg-warn" : "text-[var(--zg-text-muted)]"}`,
+				className: "px-3 py-2 shadow-[inset_0_1px_0_var(--zg-hairline)] text-zg-label text-[var(--zg-text-muted)]",
 				children: notice.text
-			})
+			}))
 		]
 	});
 }