@adea-ai/ui 0.97.2 → 0.97.3

package/dist/components/composites/appearance-editor/theme-preview.js

@@ -5,8 +5,9 @@ import { For } from "solid-js";
 var _tmpl$ = /*#__PURE__*/ template(`<span class="h-[5px] rounded-[3px]">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<span data-theme-miniature aria-hidden=true><span class="flex h-full w-11 shrink-0 flex-col gap-[7px] overflow-hidden px-2 pt-3.5"></span><span class="my-2 mr-2 flex min-w-0 flex-1 flex-col gap-[7px] overflow-hidden rounded-md border border-(--appearance-preview-border) p-2.5">`);
 var _tmpl$3 = /*#__PURE__*/ template(`<span aria-hidden=true><span class="h-full w-1/2 overflow-hidden"></span><span class="h-full w-1/2 overflow-hidden">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<span aria-hidden=true>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<span class="h-full w-1/3">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span data-theme-menu-preview aria-hidden=true><span class="flex w-5 shrink-0 flex-col items-center gap-1.5 border-e border-(--appearance-preview-border) pt-2"><span class="size-1.5 rounded-[3px]"></span><span class="size-1.5 rounded-[3px]"></span><span class="size-1.5 rounded-[3px]"></span></span><span class="m-1 flex min-w-0 flex-1 flex-col gap-1 rounded-md border border-(--appearance-preview-border) p-1.5"><span class="h-1.5 w-8 rounded-full"></span><span class="h-1 w-full rounded-full"></span><span class="h-1 w-3/4 rounded-full"></span><span class="mt-auto flex items-center gap-1"><span class="h-2.5 w-7 rounded-[3px]"></span><span class="h-2.5 w-4 rounded-[3px]"></span><span class="h-2.5 w-4 rounded-[3px]">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span aria-hidden=true>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span class="h-full w-1/3">`);
 function Bar(props) {
 	return (() => {
 		var _el$ = _tmpl$();
@@ -122,6 +123,54 @@ function ThemeMiniatureSplit(props) {
 		return _el$5;
 	})();
 }
+/**
+* The dropdown-item preview: the ThemePreview composition (rail + panel +
+* text bars + action row) at menu scale, so a menu item carries the theme's
+* actual chrome rather than the three-band trigger swatch. `aria-hidden` —
+* the item's accessible name stays the theme name.
+*/
+function ThemeMenuPreview(props) {
+	const colors = () => props.theme.colors;
+	return (() => {
+		var _el$8 = _tmpl$4(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.nextSibling, _el$11 = _el$9.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.nextSibling, _el$16 = _el$14.nextSibling.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$17.nextSibling;
+		effect((_p$) => {
+			var _v$8 = cn("flex h-16 w-28 shrink-0 overflow-hidden rounded-md border border-(--appearance-preview-border)", props.class), _v$9 = colors().surface, _v$0 = colors().border, _v$1 = colors().surfaceElevated, _v$10 = colors().accent, _v$11 = colors().surfaceActive, _v$12 = colors().surfaceActive, _v$13 = colors().background, _v$14 = colors().border, _v$15 = colors().text, _v$16 = colors().textMuted, _v$17 = colors().textMuted, _v$18 = colors().accent, _v$19 = colors().error, _v$20 = colors().surfaceActive;
+			_v$8 !== _p$.e && className(_el$8, _p$.e = _v$8);
+			_v$9 !== _p$.t && setStyleProperty(_el$8, "background-color", _p$.t = _v$9);
+			_v$0 !== _p$.a && setStyleProperty(_el$8, "--appearance-preview-border", _p$.a = _v$0);
+			_v$1 !== _p$.o && setStyleProperty(_el$9, "background-color", _p$.o = _v$1);
+			_v$10 !== _p$.i && setStyleProperty(_el$0, "background-color", _p$.i = _v$10);
+			_v$11 !== _p$.n && setStyleProperty(_el$1, "background-color", _p$.n = _v$11);
+			_v$12 !== _p$.s && setStyleProperty(_el$10, "background-color", _p$.s = _v$12);
+			_v$13 !== _p$.h && setStyleProperty(_el$11, "background-color", _p$.h = _v$13);
+			_v$14 !== _p$.r && setStyleProperty(_el$11, "--appearance-preview-border", _p$.r = _v$14);
+			_v$15 !== _p$.d && setStyleProperty(_el$12, "background-color", _p$.d = _v$15);
+			_v$16 !== _p$.l && setStyleProperty(_el$13, "background-color", _p$.l = _v$16);
+			_v$17 !== _p$.u && setStyleProperty(_el$14, "background-color", _p$.u = _v$17);
+			_v$18 !== _p$.c && setStyleProperty(_el$16, "background-color", _p$.c = _v$18);
+			_v$19 !== _p$.w && setStyleProperty(_el$17, "background-color", _p$.w = _v$19);
+			_v$20 !== _p$.m && setStyleProperty(_el$18, "background-color", _p$.m = _v$20);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0,
+			d: void 0,
+			l: void 0,
+			u: void 0,
+			c: void 0,
+			w: void 0,
+			m: void 0
+		});
+		return _el$8;
+	})();
+}
 function PalettePreview(props) {
 	const bands = () => [
 		props.theme.colors.surface,
@@ -129,30 +178,30 @@ function PalettePreview(props) {
 		props.theme.colors.accent
 	];
 	return (() => {
-		var _el$8 = _tmpl$4();
-		insert(_el$8, createComponent(For, {
+		var _el$19 = _tmpl$5();
+		insert(_el$19, createComponent(For, {
 			get each() {
 				return bands();
 			},
 			children: (band) => (() => {
-				var _el$9 = _tmpl$5();
-				setStyleProperty(_el$9, "background-color", band);
-				return _el$9;
+				var _el$20 = _tmpl$6();
+				setStyleProperty(_el$20, "background-color", band);
+				return _el$20;
 			})()
 		}));
 		effect((_p$) => {
-			var _v$8 = cn("flex h-[18px] w-[30px] shrink-0 overflow-hidden rounded-[5px] border border-(--appearance-preview-border)", props.class), _v$9 = props.theme.colors.border;
-			_v$8 !== _p$.e && className(_el$8, _p$.e = _v$8);
-			_v$9 !== _p$.t && setStyleProperty(_el$8, "--appearance-preview-border", _p$.t = _v$9);
+			var _v$21 = cn("flex h-[18px] w-[30px] shrink-0 overflow-hidden rounded-[5px] border border-(--appearance-preview-border)", props.class), _v$22 = props.theme.colors.border;
+			_v$21 !== _p$.e && className(_el$19, _p$.e = _v$21);
+			_v$22 !== _p$.t && setStyleProperty(_el$19, "--appearance-preview-border", _p$.t = _v$22);
 			return _p$;
 		}, {
 			e: void 0,
 			t: void 0
 		});
-		return _el$8;
+		return _el$19;
 	})();
 }
 //#endregion
-export { PalettePreview, ThemeMiniature, ThemeMiniatureSplit };
+export { PalettePreview, ThemeMenuPreview, ThemeMiniature, ThemeMiniatureSplit };
 
 //# sourceMappingURL=theme-preview.js.map

package/dist/components/composites/appearance-editor/theme-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-preview.js","names":["AdeaTheme","For","cn","ThemeMiniatureProps","theme","corners","class","Bar","props","fraction","opacity","color","_el$","_tmpl$","_$effect","_p$","_v$","Math","round","_v$2","_v$3","e","_$setStyleProperty","t","a","undefined","ThemeMiniature","_el$2","_tmpl$2","_el$3","firstChild","_el$4","nextSibling","_$insert","_$createComponent","colors","foreground","_v$4","_v$5","surface","_v$6","background","_v$7","border","_$className","o","ThemeMiniatureSplit","light","dark","_el$5","_tmpl$3","_el$6","_el$7","PalettePreview","bands","accent","_el$8","_tmpl$4","each","children","band","_el$9","_tmpl$5","_v$8","_v$9","_$setStyleProperty","_$createComponent","_$className"],"sources":["../../../../src/components/composites/appearance-editor/theme-preview.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/*\n * Substantially translated from Zeron crates/ui/src/settings/appearance.rs\n * `bar`, `miniature`, `miniature_split`, and `palette_preview`, revision\n * 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59, via Adea's existing\n * packages/ui/src/components/theme-preview.tsx adaptation.\n * Retains the sidebar/pane decomposition, exact bar fractions and opacity,\n * split outer corners, and three-band palette strip. GPUI and Adea's local\n * ThemeVariant are replaced by Solid and the canonical AdeaTheme schema.\n * Dynamic inline colors are theme data; no palette is authored here.\n */\nimport type { AdeaTheme } from '@adea-ai/themes'\nimport { For } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type ThemeMiniatureProps = {\n  theme: AdeaTheme\n  corners?: 'all' | 'left' | 'right'\n  class?: string\n}\n\nfunction Bar(props: { fraction: number; opacity: number; color: string }) {\n  return (\n    <span\n      class=\"h-[5px] rounded-[3px]\"\n      style={{\n        width: `${Math.round(props.fraction * 100)}%`,\n        'background-color': props.color,\n        opacity: props.opacity,\n      }}\n    />\n  )\n}\n\nexport function ThemeMiniature(props: ThemeMiniatureProps) {\n  return (\n    <span\n      data-theme-miniature\n      aria-hidden=\"true\"\n      class={cn(\n        'flex size-full overflow-hidden',\n        {\n          'rounded-md': !props.corners || props.corners === 'all',\n          'rounded-l-md': props.corners === 'left',\n          'rounded-r-md': props.corners === 'right',\n        },\n        props.class\n      )}\n      style={{ 'background-color': props.theme.colors.surface }}\n    >\n      <span class=\"flex h-full w-11 shrink-0 flex-col gap-[7px] overflow-hidden px-2 pt-3.5\">\n        <Bar fraction={0.7} opacity={0.34} color={props.theme.colors.foreground} />\n        <Bar fraction={1} opacity={0.22} color={props.theme.colors.foreground} />\n        <Bar fraction={0.85} opacity={0.22} color={props.theme.colors.foreground} />\n        <Bar fraction={1} opacity={0.22} color={props.theme.colors.foreground} />\n      </span>\n      <span\n        class=\"my-2 mr-2 flex min-w-0 flex-1 flex-col gap-[7px] overflow-hidden rounded-md border border-(--appearance-preview-border) p-2.5\"\n        style={{\n          'background-color': props.theme.colors.background,\n          '--appearance-preview-border': props.theme.colors.border,\n        }}\n      >\n        <Bar fraction={0.62} opacity={0.34} color={props.theme.colors.foreground} />\n        <Bar fraction={0.88} opacity={0.22} color={props.theme.colors.foreground} />\n        <Bar fraction={0.76} opacity={0.22} color={props.theme.colors.foreground} />\n        <Bar fraction={0.52} opacity={0.22} color={props.theme.colors.foreground} />\n      </span>\n    </span>\n  )\n}\n\nexport function ThemeMiniatureSplit(props: { light: AdeaTheme; dark: AdeaTheme; class?: string }) {\n  return (\n    <span class={cn('flex size-full', props.class)} aria-hidden=\"true\">\n      <span class=\"h-full w-1/2 overflow-hidden\">\n        <ThemeMiniature theme={props.light} corners=\"left\" />\n      </span>\n      <span class=\"h-full w-1/2 overflow-hidden\">\n        <ThemeMiniature theme={props.dark} corners=\"right\" />\n      </span>\n    </span>\n  )\n}\n\nexport function PalettePreview(props: { theme: AdeaTheme; class?: string }) {\n  const bands = () => [\n    props.theme.colors.surface,\n    props.theme.colors.background,\n    props.theme.colors.accent,\n  ]\n  return (\n    <span\n      class={cn(\n        'flex h-[18px] w-[30px] shrink-0 overflow-hidden rounded-[5px] border border-(--appearance-preview-border)',\n        props.class\n      )}\n      aria-hidden=\"true\"\n      style={{ '--appearance-preview-border': props.theme.colors.border }}\n    >\n      <For each={bands()}>\n        {(band) => <span class=\"h-full w-1/3\" style={{ 'background-color': band }} />}\n      </For>\n    </span>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-preview.js","names":["AdeaTheme","For","cn","ThemeMiniatureProps","theme","corners","class","Bar","props","fraction","opacity","color","_el$","_tmpl$","_$effect","_p$","_v$","Math","round","_v$2","_v$3","e","_$setStyleProperty","t","a","undefined","ThemeMiniature","_el$2","_tmpl$2","_el$3","firstChild","_el$4","nextSibling","_$insert","_$createComponent","colors","foreground","_v$4","_v$5","surface","_v$6","background","_v$7","border","_$className","o","ThemeMiniatureSplit","light","dark","_el$5","_tmpl$3","_el$6","_el$7","ThemeMenuPreview","_el$8","_tmpl$4","_el$9","_el$0","_el$1","_el$10","_el$11","_el$12","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_v$8","_v$9","_v$0","_v$1","surfaceElevated","_v$10","accent","_v$11","surfaceActive","_v$12","_v$13","_v$14","_v$15","text","_v$16","textMuted","_v$17","_v$18","_v$19","error","_v$20","i","n","s","h","r","d","l","u","c","w","m","PalettePreview","bands","_el$19","_tmpl$5","each","children","band","_el$20","_tmpl$6","_v$21","_v$22","_$setStyleProperty","_$createComponent","_$className"],"sources":["../../../../src/components/composites/appearance-editor/theme-preview.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/*\n * Substantially translated from Zeron crates/ui/src/settings/appearance.rs\n * `bar`, `miniature`, `miniature_split`, and `palette_preview`, revision\n * 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59, via Adea's existing\n * packages/ui/src/components/theme-preview.tsx adaptation.\n * Retains the sidebar/pane decomposition, exact bar fractions and opacity,\n * split outer corners, and three-band palette strip. GPUI and Adea's local\n * ThemeVariant are replaced by Solid and the canonical AdeaTheme schema.\n * Dynamic inline colors are theme data; no palette is authored here.\n */\nimport type { AdeaTheme } from '@adea-ai/themes'\nimport { For } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type ThemeMiniatureProps = {\n  theme: AdeaTheme\n  corners?: 'all' | 'left' | 'right'\n  class?: string\n}\n\nfunction Bar(props: { fraction: number; opacity: number; color: string }) {\n  return (\n    <span\n      class=\"h-[5px] rounded-[3px]\"\n      style={{\n        width: `${Math.round(props.fraction * 100)}%`,\n        'background-color': props.color,\n        opacity: props.opacity,\n      }}\n    />\n  )\n}\n\nexport function ThemeMiniature(props: ThemeMiniatureProps) {\n  return (\n    <span\n      data-theme-miniature\n      aria-hidden=\"true\"\n      class={cn(\n        'flex size-full overflow-hidden',\n        {\n          'rounded-md': !props.corners || props.corners === 'all',\n          'rounded-l-md': props.corners === 'left',\n          'rounded-r-md': props.corners === 'right',\n        },\n        props.class\n      )}\n      style={{ 'background-color': props.theme.colors.surface }}\n    >\n      <span class=\"flex h-full w-11 shrink-0 flex-col gap-[7px] overflow-hidden px-2 pt-3.5\">\n        <Bar fraction={0.7} opacity={0.34} color={props.theme.colors.foreground} />\n        <Bar fraction={1} opacity={0.22} color={props.theme.colors.foreground} />\n        <Bar fraction={0.85} opacity={0.22} color={props.theme.colors.foreground} />\n        <Bar fraction={1} opacity={0.22} color={props.theme.colors.foreground} />\n      </span>\n      <span\n        class=\"my-2 mr-2 flex min-w-0 flex-1 flex-col gap-[7px] overflow-hidden rounded-md border border-(--appearance-preview-border) p-2.5\"\n        style={{\n          'background-color': props.theme.colors.background,\n          '--appearance-preview-border': props.theme.colors.border,\n        }}\n      >\n        <Bar fraction={0.62} opacity={0.34} color={props.theme.colors.foreground} />\n        <Bar fraction={0.88} opacity={0.22} color={props.theme.colors.foreground} />\n        <Bar fraction={0.76} opacity={0.22} color={props.theme.colors.foreground} />\n        <Bar fraction={0.52} opacity={0.22} color={props.theme.colors.foreground} />\n      </span>\n    </span>\n  )\n}\n\nexport function ThemeMiniatureSplit(props: { light: AdeaTheme; dark: AdeaTheme; class?: string }) {\n  return (\n    <span class={cn('flex size-full', props.class)} aria-hidden=\"true\">\n      <span class=\"h-full w-1/2 overflow-hidden\">\n        <ThemeMiniature theme={props.light} corners=\"left\" />\n      </span>\n      <span class=\"h-full w-1/2 overflow-hidden\">\n        <ThemeMiniature theme={props.dark} corners=\"right\" />\n      </span>\n    </span>\n  )\n}\n\n/**\n * The dropdown-item preview: the ThemePreview composition (rail + panel +\n * text bars + action row) at menu scale, so a menu item carries the theme's\n * actual chrome rather than the three-band trigger swatch. `aria-hidden` —\n * the item's accessible name stays the theme name.\n */\nexport function ThemeMenuPreview(props: { theme: AdeaTheme; class?: string }) {\n  const colors = () => props.theme.colors\n  return (\n    <span\n      data-theme-menu-preview\n      aria-hidden=\"true\"\n      class={cn(\n        'flex h-16 w-28 shrink-0 overflow-hidden rounded-md border border-(--appearance-preview-border)',\n        props.class\n      )}\n      style={{\n        'background-color': colors().surface,\n        '--appearance-preview-border': colors().border,\n      }}\n    >\n      <span\n        class=\"flex w-5 shrink-0 flex-col items-center gap-1.5 border-e border-(--appearance-preview-border) pt-2\"\n        style={{ 'background-color': colors().surfaceElevated }}\n      >\n        <span class=\"size-1.5 rounded-[3px]\" style={{ 'background-color': colors().accent }} />\n        <span\n          class=\"size-1.5 rounded-[3px]\"\n          style={{ 'background-color': colors().surfaceActive }}\n        />\n        <span\n          class=\"size-1.5 rounded-[3px]\"\n          style={{ 'background-color': colors().surfaceActive }}\n        />\n      </span>\n      <span\n        class=\"m-1 flex min-w-0 flex-1 flex-col gap-1 rounded-md border border-(--appearance-preview-border) p-1.5\"\n        style={{\n          'background-color': colors().background,\n          '--appearance-preview-border': colors().border,\n        }}\n      >\n        <span class=\"h-1.5 w-8 rounded-full\" style={{ 'background-color': colors().text }} />\n        <span class=\"h-1 w-full rounded-full\" style={{ 'background-color': colors().textMuted }} />\n        <span class=\"h-1 w-3/4 rounded-full\" style={{ 'background-color': colors().textMuted }} />\n        <span class=\"mt-auto flex items-center gap-1\">\n          <span class=\"h-2.5 w-7 rounded-[3px]\" style={{ 'background-color': colors().accent }} />\n          <span class=\"h-2.5 w-4 rounded-[3px]\" style={{ 'background-color': colors().error }} />\n          <span\n            class=\"h-2.5 w-4 rounded-[3px]\"\n            style={{ 'background-color': colors().surfaceActive }}\n          />\n        </span>\n      </span>\n    </span>\n  )\n}\n\nexport function PalettePreview(props: { theme: AdeaTheme; class?: string }) {\n  const bands = () => [\n    props.theme.colors.surface,\n    props.theme.colors.background,\n    props.theme.colors.accent,\n  ]\n  return (\n    <span\n      class={cn(\n        'flex h-[18px] w-[30px] shrink-0 overflow-hidden rounded-[5px] border border-(--appearance-preview-border)',\n        props.class\n      )}\n      aria-hidden=\"true\"\n      style={{ '--appearance-preview-border': props.theme.colors.border }}\n    >\n      <For each={bands()}>\n        {(band) => <span class=\"h-full w-1/3\" style={{ 'background-color': band }} />}\n      </For>\n    </span>\n  )\n}\n"],"mappings":"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"}

package/dist/r/src/components/composites/about-dialog/about-dialog.tsx

@@ -117,7 +117,11 @@ export function AboutDialog(props: AboutDialogProps) {
         <div class="flex flex-col items-center gap-3 px-6 py-8 text-center">
           <img src={props.appIcon} alt="" class="size-16" aria-hidden="true" />
           <DialogTitle>{props.appName}</DialogTitle>
-          <p class="text-sm text-primary">{versionLabel()}</p>
+          {/* Body text on the dialog's themed surface: primary ink measures
+              below AA against the lighter dialog backgrounds across schemes,
+              so the version and the source link carry foreground ink and keep
+              primary as the link's underline accent (the text-link treatment). */}
+          <p class="text-sm text-foreground">{versionLabel()}</p>
           <p class="text-xs text-muted-foreground">{props.copyright}</p>
           <div class="flex flex-wrap items-center justify-center gap-3">
             <ActionButton
@@ -134,6 +138,7 @@ export function AboutDialog(props: AboutDialogProps) {
               as="a"
               variant="link"
               size="sm"
+              class="text-foreground decoration-primary"
               href={props.sourceUrl}
               target="_blank"
               rel="noopener noreferrer"

package/dist/r/src/components/composites/appearance-editor/appearance-choices.tsx

@@ -93,20 +93,31 @@ export function AccentChoices(props: AppearanceEditorProps) {
       disabled={props.saving}
       orientation="horizontal"
       aria-label="Accent"
-      class="flex flex-wrap items-center gap-2"
+      // Two chips in a column beside a 3x2 swatch grid: one line of six
+      // swatches plus chips overflows the settings sidebar's control column,
+      // and the column keeps both rows of the pair balanced (2 x 28px + gap).
+      class="flex items-center gap-3"
       onChange={(accent) =>
         props.onChange({
           accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
         })
       }
     >
-      <Radio.Item value="theme">
-        <Radio.ItemInput />
-        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-          Theme default
-        </Radio.ItemLabel>
-      </Radio.Item>
-      <div class="flex max-w-full flex-wrap gap-2">
+      <div class="flex flex-col gap-2">
+        <Radio.Item value="theme">
+          <Radio.ItemInput />
+          <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+            Theme default
+          </Radio.ItemLabel>
+        </Radio.Item>
+        <Radio.Item value="custom">
+          <Radio.ItemInput />
+          <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+            Custom
+          </Radio.ItemLabel>
+        </Radio.Item>
+      </div>
+      <div class="grid grid-cols-3 gap-2">
         <For each={props.accentOptions}>
           {(option) => (
             <Radio.Item
@@ -133,12 +144,6 @@ export function AccentChoices(props: AppearanceEditorProps) {
           )}
         </For>
       </div>
-      <Radio.Item value="custom">
-        <Radio.ItemInput />
-        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-          Custom
-        </Radio.ItemLabel>
-      </Radio.Item>
     </Radio>
   )
 }

package/dist/r/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -47,7 +47,7 @@ import {
 } from '../../ui/popover/popover'
 import type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'
 import { ModeChoices, AccentChoices, GlassChoices } from './appearance-choices'
-import { SettingsRow, ThemeRow } from './appearance-rows'
+import { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'
 
 /**
  * A live editor whose persistence and preview authority belong to its host.
@@ -99,6 +99,18 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           disabled={props.saving}
           onSelect={(darkThemeId) => props.onChange({ darkThemeId })}
         />
+        {/* The row exists only when the host carries a terminal preference:
+            the draft field is the show/hide switch, so the editor can never
+            render a terminal row that writes nothing. */}
+        <Show when={props.draft.terminalThemeId !== undefined}>
+          <TerminalRow
+            selectedId={props.draft.terminalThemeId ?? 'theme'}
+            preview={props.resolvedAppearance === 'dark' ? props.darkTheme : props.lightTheme}
+            themes={props.themes}
+            disabled={props.saving}
+            onSelect={(terminalThemeId) => props.onChange({ terminalThemeId })}
+          />
+        </Show>
         <SettingsRow title="Accent" icon={<SlidersHorizontal />} description={accentDescription()}>
           <AccentChoices {...props} />
         </SettingsRow>