zidane-ui 9.0.4 → 9.1.3

package/dist/code/shiki-theme.js

@@ -13,7 +13,7 @@ const FALLBACK = {
 	light: "github-light-default"
 };
 /**
-* The neutral shiki theme for an appearance: what a theme without a designed counterpart uses.
+* The neutral code theme for an appearance: what a theme without a designed counterpart uses.
 *
 * @param appearance - `'dark'` or `'light'`.
 * @returns `github-dark-default` or `github-light-default`.
@@ -22,12 +22,12 @@ function defaultShikiTheme(appearance) {
 	return FALLBACK[appearance];
 }
 /**
-* The bundled shiki theme for a kit theme: its designed counterpart (Catppuccin, Gruvbox…), else
+* The bundled code theme for a kit theme: its designed counterpart (Catppuccin, Gruvbox…), else
 * the neutral theme of its appearance.
 *
 * @param themeId - The kit theme's id (`BUILTIN_THEMES` key or an extension theme's id).
 * @param appearance - The theme's appearance, for the fallback.
-* @returns A shiki theme id.
+* @returns A code theme id.
 */
 function shikiThemeFor(themeId, appearance) {
 	return BY_THEME_ID[themeId] ?? defaultShikiTheme(appearance);

package/dist/code/use-highlighted-html.d.ts

@@ -0,0 +1,5 @@
+//#region src/code/use-highlighted-html.d.ts
+/** The block's HTML: `null` when its language colors nothing, `undefined` until it is highlighted. */
+declare function useHighlightedHtml(code: string, language: string, enabled: boolean): string | null | undefined;
+//#endregion
+export { useHighlightedHtml };

package/dist/code/use-highlighted-html.js

@@ -0,0 +1,75 @@
+import { useCodeHighlight } from "./CodeHighlightProvider.js";
+import { useEffect, useState, useSyncExternalStore } from "react";
+//#region src/code/use-highlighted-html.ts
+/**
+* A block's highlighted HTML, shared by `HighlightedCode` and the views that
+* draw code line by line (`CodemodeScript`). Internal to the kit.
+*/
+const noSubscription = () => () => {};
+/** False while hydrating server markup, true on any client render after. */
+function useHydrated() {
+	return useSyncExternalStore(noSubscription, () => true, () => false);
+}
+/**
+* Trailing debounce for re-highlights. A streaming fenced code block
+* changes `code` on every drain tick (about 60 a second). Highlighting each
+* change would queue stale tokenization work that competes with the stream
+* for the main thread. The first run highlights at once (opening a session
+* paints colored code without a delay). Only later changes wait. The plain
+* `<pre>` fallback shows the raw text meanwhile, so streaming does not look
+* stalled: HTML paints only for the code and language it was made from.
+*/
+const REHIGHLIGHT_DEBOUNCE_MS = 150;
+/** The block's HTML: `null` when its language colors nothing, `undefined` until it is highlighted. */
+function useHighlightedHtml(code, language, enabled) {
+	const { highlighter, theme } = useCodeHighlight();
+	const hydrated = useHydrated();
+	const [painted, setPainted] = useState(null);
+	const firstRunRef = useState(() => ({ done: false }))[0];
+	useEffect(() => {
+		if (!enabled) return;
+		const cached = highlighter.cached(code, language, theme);
+		if (cached !== void 0) {
+			firstRunRef.done = true;
+			setPainted({
+				code,
+				language,
+				html: cached
+			});
+			return;
+		}
+		let cancelled = false;
+		const run = () => {
+			highlighter.highlight(code, language, theme).then((html) => {
+				if (!cancelled) setPainted({
+					code,
+					language,
+					html
+				});
+			});
+		};
+		if (!firstRunRef.done) {
+			firstRunRef.done = true;
+			run();
+			return () => {
+				cancelled = true;
+			};
+		}
+		const timer = window.setTimeout(run, REHIGHLIGHT_DEBOUNCE_MS);
+		return () => {
+			cancelled = true;
+			window.clearTimeout(timer);
+		};
+	}, [
+		code,
+		language,
+		theme,
+		highlighter,
+		firstRunRef,
+		enabled
+	]);
+	if (painted && painted.code === code && painted.language === language) return painted.html;
+	return hydrated ? highlighter.cached(code, language, theme) : void 0;
+}
+//#endregion
+export { useHighlightedHtml };

package/dist/components/BrandMark.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 //#region src/components/BrandMark.d.ts
-/** The sizes of a mark: 18, 28 or 40 pixels. */
-type BrandMarkSize = 'sm' | 'md' | 'lg';
+/** The sizes of a mark: 18, 28 or 40 pixels, or `xs`, one em square (an icon's box, as the settings nav draws it). */
+type BrandMarkSize = 'xs' | 'sm' | 'md' | 'lg';
 /**
  * Whether the kit has a logo for a Simple Icons slug.
  *
@@ -16,7 +16,9 @@ interface BrandMarkProps {
   label: string;
   /** An icon class (`i-ph-*`) to show when there is no logo, in place of the letter. */
   icon?: string;
-  /** 18, 28 or 40 pixels. */
+  /** The letter to show when there is neither a logo nor an icon. Absent: the label's first letter. */
+  letter?: string;
+  /** 18, 28 or 40 pixels, or one em (`xs`). */
   size?: BrandMarkSize;
   /** The name is written next to the mark, so assistive tech skips it. Set false for a mark that stands alone. */
   decorative?: boolean;
@@ -30,6 +32,6 @@ interface BrandMarkProps {
  *
  * @param props - Component props.
  */
-declare function BrandMark({ brand, label, icon, size, decorative, className, style }: BrandMarkProps): import("react").JSX.Element;
+declare function BrandMark({ brand, label, icon, letter, size, decorative, className, style }: BrandMarkProps): import("react").JSX.Element;
 //#endregion
 export { BrandMark, BrandMarkProps, BrandMarkSize, hasBrandMark };

package/dist/components/BrandMark.js

@@ -40,16 +40,18 @@ function letterColor(label) {
 *
 * @param props - Component props.
 */
-function BrandMark({ brand, label, icon, size = "md", decorative = true, className = "", style }) {
+function BrandMark({ brand, label, icon, letter, size = "md", decorative = true, className = "", style }) {
 	const mark = brand ? BRAND_MARKS[brand] : void 0;
 	const ownStyle = { "--zg-brand": mark ? brandColor(mark.hex) : letterColor(label) };
 	const a11y = decorative ? { "aria-hidden": true } : {
 		role: "img",
 		"aria-label": label
 	};
+	const shown = mark ? void 0 : icon ? void 0 : (letter ?? label.trim().charAt(0)).toUpperCase();
 	return /* @__PURE__ */ jsx("span", {
 		className: `zg-brand-mark ${className}`,
 		"data-size": size,
+		"data-brand": mark ? brand : void 0,
 		style: {
 			...ownStyle,
 			...style
@@ -73,7 +75,8 @@ function BrandMark({ brand, label, icon, size = "md", decorative = true, classNa
 		}) : /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
 			className: "zg-brand-letter",
-			children: label.trim().charAt(0).toUpperCase()
+			"data-letter": shown,
+			children: size === "xs" ? null : shown
 		})
 	});
 }

package/dist/components/CodeFrame.d.ts

@@ -33,6 +33,11 @@ interface CodeFrameProps {
   style?: CSSProperties;
   /** Start with long lines wrapped. Defaults to the {@link CodeWrapProvider} value (off without one). */
   wrap?: boolean;
+  /**
+   * Extra controls before Wrap and Copy (a diagram's source toggle). Receives the class the frame's own
+   * buttons wear (revealed on hover, sized and backed for this form): put it on each control.
+   */
+  actions?: (buttonClass: string) => ReactNode;
   /** The code to show, such as highlighted HTML or a `<pre>`, with no background of its own: the frame is its surface. */
   children: ReactNode;
 }

package/dist/components/CodeFrame.js

@@ -20,8 +20,8 @@ import { flushSync } from "react-dom";
 *
 * The children are the code (highlighted HTML, a <pre>). The frame is their
 * surface: its tone, and its hairline, an inset shadow painted under them. So
-* they paint no background of their own, or they cover that line (shiki's
-* inline one is cleared: `.zg-code-frame pre.shiki`). The frame owns the
+* they paint no background of their own, or they cover that line (the theme's
+* inline one is cleared: `.zg-code-frame pre.highlights`). The frame owns the
 * horizontal scroll (`.zg-code-scroll`), so the overlay button never scrolls
 * away; when the code is wider than the frame the scroller becomes a
 * focusable group, named by the caption (or "Code"), so keyboard users can
@@ -92,7 +92,7 @@ function useScrollsX(wrap) {
 * is the bare code panel; with `caption` it adds a tray with a header. The ref goes to the
 * outer element.
 */
-const CodeFrame = forwardRef(function CodeFrame({ code, caption, icon = "i-ph-file-code", copyLabel: copyLabelProp, className = "", style, wrap: wrapProp, children }, ref) {
+const CodeFrame = forwardRef(function CodeFrame({ code, caption, icon = "i-ph-file-code", copyLabel: copyLabelProp, className = "", style, wrap: wrapProp, actions: extraActions, children }, ref) {
 	const labels = useLabels();
 	const copyLabel = copyLabelProp ?? labels.copyCode;
 	const scrollLabel = typeof caption === "string" ? caption : labels.code;
@@ -109,27 +109,31 @@ const CodeFrame = forwardRef(function CodeFrame({ code, caption, icon = "i-ph-fi
 	});
 	const actions = (className, buttonClass) => /* @__PURE__ */ jsxs("span", {
 		className: `flex items-center gap-0.5 ${className}`,
-		children: [(scrolls || wrap) && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: (e) => {
-				e.stopPropagation();
-				setUserWrap(!wrap);
-			},
-			"aria-pressed": wrap,
-			"aria-label": labels.wrapLines,
-			title: labels.wrapLines,
-			"data-active": wrap ? "" : void 0,
-			className: `zg-reveal ${iconButtonClass({ size: "sm" })} ${buttonClass}`,
-			children: /* @__PURE__ */ jsx("span", {
-				className: "i-ph-text-align-left text-zg-label",
-				"aria-hidden": true
+		children: [
+			extraActions?.(`zg-reveal ${iconButtonClass({ size: "sm" })} ${buttonClass}`),
+			(scrolls || wrap) && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					setUserWrap(!wrap);
+				},
+				"aria-pressed": wrap,
+				"aria-label": labels.wrapLines,
+				title: labels.wrapLines,
+				"data-active": wrap ? "" : void 0,
+				className: `zg-reveal ${iconButtonClass({ size: "sm" })} ${buttonClass}`,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "i-ph-text-align-left text-zg-label",
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsx(CopyButton, {
+				text: code,
+				label: copyLabel,
+				reveal: true,
+				className: buttonClass
 			})
-		}), /* @__PURE__ */ jsx(CopyButton, {
-			text: code,
-			label: copyLabel,
-			reveal: true,
-			className: buttonClass
-		})]
+		]
 	});
 	if (caption === void 0) return /* @__PURE__ */ jsxs("div", {
 		ref,

package/dist/components/Form.js

@@ -59,7 +59,7 @@ function FormSection({ title, trailing, layout = "rows", className = "", childre
 		className,
 		style,
 		children: [(title || trailing) && /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between gap-2 min-h-5 px-1 mb-1.5",
+			className: `flex items-center justify-between gap-2 min-h-5 ${layout === "rows" ? "px-4" : "px-1"} mb-1.5`,
 			children: [title ? /* @__PURE__ */ jsx(SectionLabel, { children: title }) : /* @__PURE__ */ jsx("span", {}), trailing]
 		}), /* @__PURE__ */ jsx(Tray, {
 			radius: "lg",

package/dist/core.css

@@ -9,6 +9,7 @@
 .i-ph-caret-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-check{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-check-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183L215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
+.i-ph-check-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-check-circle-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m45.66 85.66l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-circle-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232 128A104 104 0 1 1 128 24a104.13 104.13 0 0 1 104 104'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
@@ -19,9 +20,13 @@
 .i-ph-files{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m213.66 66.34l-40-40A8 8 0 0 0 168 24H88a16 16 0 0 0-16 16v16H56a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h112a16 16 0 0 0 16-16v-16h16a16 16 0 0 0 16-16V72a8 8 0 0 0-2.34-5.66M168 216H56V72h76.69L168 107.31zm32-32h-16v-80a8 8 0 0 0-2.34-5.66l-40-40A8 8 0 0 0 136 56H88V40h76.69L200 75.31Zm-56-32a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-globe-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24m87.62 96h-39.83c-1.79-36.51-15.85-62.33-27.38-77.6a88.19 88.19 0 0 1 67.22 77.6ZM96.23 136h63.54c-2.31 41.61-22.23 67.11-31.77 77c-9.55-9.9-29.46-35.4-31.77-77m0-16c2.31-41.61 22.23-67.11 31.77-77c9.55 9.93 29.46 35.43 31.77 77Zm11.36-77.6C96.06 57.67 82 83.49 80.21 120H40.37a88.19 88.19 0 0 1 67.22-77.6M40.37 136h39.84c1.82 36.51 15.85 62.33 27.38 77.6A88.19 88.19 0 0 1 40.37 136m108 77.6c11.53-15.27 25.56-41.09 27.38-77.6h39.84a88.19 88.19 0 0 1-67.18 77.6Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-info{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8m-32-92a12 12 0 1 1 12 12a12 12 0 0 1-12-12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
+.i-ph-lock-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 80h-32V56a48 48 0 0 0-96 0v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16M96 56a32 32 0 0 1 64 0v24H96Zm112 152H48V96h160z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
+.i-ph-planet{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M245.11 60.68c-7.65-13.19-27.84-16.16-58.5-8.66A95.93 95.93 0 0 0 32 128a98 98 0 0 0 .78 12.31C5.09 169 5.49 186 10.9 195.32C16 204.16 26.64 208 40.64 208a124 124 0 0 0 28.79-4A95.93 95.93 0 0 0 224 128a97 97 0 0 0-.77-12.25c12.5-13 20.82-25.35 23.65-35.92c1.95-7.32 1.36-13.76-1.77-19.15M128 48a80.11 80.11 0 0 1 78 62.2c-17.06 16.06-40.15 32.53-62.07 45.13c-27.55 15.81-51.45 25.67-70.51 31.07A79.94 79.94 0 0 1 128 48M24.74 187.29c-1.46-2.51-.65-7.24 2.22-13a79 79 0 0 1 10.29-15.05a96 96 0 0 0 18 31.32c-17.25 2.9-28.01 1.05-30.51-3.27M128 208a79.45 79.45 0 0 1-38.56-9.94a370 370 0 0 0 62.43-28.86c21.58-12.39 40.68-25.82 56.07-39.08A80.07 80.07 0 0 1 128 208M231.42 75.69c-1.7 6.31-6.19 13.53-12.63 21.13a95.7 95.7 0 0 0-18-31.35c14.21-2.35 27.37-2.17 30.5 3.24c.9 1.57.95 3.92.13 6.98'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-sidebar-simple{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 56h40v144H40Zm176 144H96V56h120z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
+.i-ph-squares-four{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M104 40H56a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 64H56V56h48zm96-64h-48a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 64h-48V56h48zm-96 32H56a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64H56v-48h48zm96-64h-48a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64h-48v-48h48z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-text-align-left{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M32 64a8 8 0 0 1 8-8h176a8 8 0 0 1 0 16H40a8 8 0 0 1-8-8m8 48h128a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m176 24H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16m-48 40H40a8 8 0 0 0 0 16h128a8 8 0 0 0 0-16'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-warning{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
+.i-ph-warning-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-warning-circle-fill{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 104a12 12 0 1 1 12-12a12 12 0 0 1-12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 .i-ph-x{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' height='1em' width='1em' display='inline-block' vertical-align='middle' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;height:1em;width:1em;display:inline-block;vertical-align:middle;}
 /* layer: shortcuts */
@@ -75,7 +80,8 @@
 .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
 .grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
 .grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
-.m-0{margin:0;}
+.m-0,
+.m\[0\]{margin:0;}
 .m23\.6{margin:5.9rem;}
 .m4\.7144{margin:1.1786rem;}
 .-mx-1{margin-left:-0.25rem;margin-right:-0.25rem;}
@@ -94,6 +100,7 @@
 .-mt-5{margin-top:-1.25rem;}
 .mb-1{margin-bottom:0.25rem;}
 .mb-1\.5{margin-bottom:0.375rem;}
+.mb-2{margin-bottom:0.5rem;}
 .ml-0\.5{margin-left:0.125rem;}
 .ml-2{margin-left:0.5rem;}
 .ml-auto{margin-left:auto;}
@@ -129,7 +136,9 @@
 .h-7{height:1.75rem;}
 .h-8{height:2rem;}
 .h-9{height:2.25rem;}
+.h-full{height:100%;}
 .max-w-\[28rem\]{max-width:28rem;}
+.max-w-\[50vw\]{max-width:50vw;}
 .max-w-\[640px\]{max-width:640px;}
 .max-w-\[65\%\]{max-width:65%;}
 .max-w-\[92vw\]{max-width:92vw;}
@@ -137,6 +146,7 @@
 .max-w-44{max-width:11rem;}
 .max-w-48{max-width:12rem;}
 .max-w-full{max-width:100%;}
+.min-h-\[60vh\]{min-height:60vh;}
 .min-h-0{min-height:0;}
 .min-h-5{min-height:1.25rem;}
 .min-w-\[10rem\]{min-width:10rem;}
@@ -193,6 +203,7 @@
 .items-end{align-items:flex-end;}
 .items-center{align-items:center;}
 .items-baseline{align-items:baseline;}
+.items-stretch{align-items:stretch;}
 .self-start{align-self:flex-start;}
 .justify-end{justify-content:flex-end;}
 .justify-center{justify-content:center;}
@@ -207,7 +218,9 @@
 .gap-3{gap:0.75rem;}
 .gap-3\.5{gap:0.875rem;}
 .gap-4{gap:1rem;}
+.gap-6{gap:1.5rem;}
 .space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}
+.space-y-5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.25rem * var(--un-space-y-reverse));}
 .overflow-auto{overflow:auto;}
 .overflow-hidden{overflow:hidden;}
 .overflow-x-auto{overflow-x:auto;}
@@ -222,6 +235,7 @@
 .border{border-width:1px;}
 .b\!{border-width:1px !important;}
 .border-0{border-width:0px;}
+.border-b{border-bottom-width:1px;}
 .border-r{border-right-width:1px;}
 .border-\[var\(--zg-hairline\)\]{border-color:var(--zg-hairline);}
 .border-transparent{border-color:transparent;}
@@ -282,6 +296,7 @@
 .px-6{padding-left:1.5rem;padding-right:1.5rem;}
 .py{padding-top:1rem;padding-bottom:1rem;}
 .py-\[5px\]{padding-top:5px;padding-bottom:5px;}
+.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}
 .py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
 .py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
 .py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
@@ -303,6 +318,7 @@
 .pr-6{padding-right:1.5rem;}
 .pt-2{padding-top:0.5rem;}
 .pt-4{padding-top:1rem;}
+.pie{padding-inline-end:1rem;}
 .text-center{text-align:center;}
 .text-left{text-align:left;}
 .text-right{text-align:right;}
@@ -341,6 +357,7 @@
 .text-zg-warn{color:var(--zg-warn);}
 .text-zg-accent-fill-fg{color:var(--zg-accent-fill-fg);}
 .text-zg-danger{color:var(--zg-danger);}
+.text-zg-info{color:var(--zg-info);}
 .text-zg-success{color:var(--zg-success);}
 .hover\:\!text-zg-danger:hover{color:var(--zg-danger) !important;}
 .hover\:text-\[var\(--zg-text\)\]:hover{color:var(--zg-text);}
@@ -1190,7 +1207,8 @@ html[data-motion='off'] {
   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:
@@ -1199,7 +1217,9 @@ html[data-motion='off'] {
 }
 .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) {
@@ -1862,6 +1882,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
@@ -1971,6 +1997,35 @@ html[data-motion='reduced'] .zg-loop {
   }
 }
 
+/* --- 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;
+}
+
 /*
  * Component styles: the classes zidane-ui components carry (Lightbox,
  * SegmentSpinner, the Rows slider, resize handles, count badges) and the
@@ -2220,7 +2275,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;
@@ -2230,15 +2285,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);
@@ -2249,14 +2303,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;
 }
 
@@ -2436,6 +2490,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);
 }