@adea-ai/ui 0.110.0 → 0.111.0

package/dist/components/composites/account-menu/account-menu.js

@@ -1,7 +1,7 @@
 import { cn } from "../../../lib/utils.js";
 import { Button } from "../../ui/button/button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu/dropdown-menu.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu/dropdown-menu.js";
 import { SideRailButton } from "../../layout/side-rail/side-rail.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { CircleHelp, Info, LogIn, LogOut, Megaphone, RefreshCw, Settings2, Smartphone, UserRound } from "lucide-solid";

package/dist/components/composites/action-button/action-button.js

@@ -1,6 +1,6 @@
 import { Button } from "../../ui/button/button.js";
-import { Spinner } from "../../ui/spinner/spinner.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip.js";
+import { Spinner } from "../../ui/spinner/spinner.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { Show, createSignal, splitProps } from "solid-js";
 //#region src/components/composites/action-button/action-button.tsx

package/dist/components/composites/appearance-editor/accent-swatch-groups.d.ts

@@ -1,4 +1,3 @@
-export declare const PRIMARY_ACCENT_IDS: readonly ["blue", "green", "amber", "cyan", "pink"];
 type AccentOption = Readonly<{
     id: string;
     label: string;
@@ -7,10 +6,26 @@ type AccentOption = Readonly<{
 }>;
 type AccentSwatchGroupsProps = {
     accentOptions: readonly AccentOption[];
-    themeAccentOptions: readonly AccentOption[];
+    /**
+     * Accepted for host compatibility and no longer rendered. The picker offers
+     * one theme-scoped group — the theme's own primary followed by the presets —
+     * instead of splitting additional presets and the theme pair's accent slots
+     * into labelled groups of their own. A stored theme-accent id still resolves
+     * (`resolveAccentPreset`) and is still described by the row; it is just no
+     * longer offered as a swatch, and a host can stop feeding this list.
+     */
+    themeAccentOptions?: readonly AccentOption[];
     resolvedAppearance: 'light' | 'dark';
     themeDefaultColor: string;
 };
+/**
+ * The accent choices, as ONE group: the theme's own primary first, then every
+ * preset the host feeds, each painted with its value for the resolved
+ * appearance — which is what makes the group theme-scoped rather than a
+ * catalogue table. The custom-color entry is the host's (`AccentChoices`
+ * renders it beside this grid), because whether a free-form colour is accepted
+ * is the host's validation to own.
+ */
 export declare function AccentSwatchGroups(props: AccentSwatchGroupsProps): import("solid-js").JSX.Element;
 export {};
 //# sourceMappingURL=accent-swatch-groups.d.ts.map

package/dist/components/composites/appearance-editor/accent-swatch-groups.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accent-swatch-groups.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,kBAAkB,qDAAsD,CAAA;AAGrF,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAEF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC,kBAAkB,EAAE,SAAS,YAAY,EAAE,CAAA;IAC3C,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAA;IACpC,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,kCAoEhE"}
+{"version":3,"file":"accent-swatch-groups.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.tsx"],"names":[],"mappings":"AA0BA,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC,CAAA;AAEF,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC5C,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAA;IACpC,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,kCAiBhE"}

package/dist/components/composites/appearance-editor/accent-swatch-groups.js

@@ -1,111 +1,47 @@
-import { cn } from "../../../lib/utils.js";
-import { createComponent, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
-import { For, Show } from "solid-js";
+import { createComponent, effect, insert, setStyleProperty, template } from "solid-js/web";
+import { For } from "solid-js";
 import { RadioGroup } from "@kobalte/core/radio-group";
 //#region src/components/composites/appearance-editor/accent-swatch-groups.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="grid grid-cols-3 gap-2"data-primary-accent-grid>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div class="flex flex-col gap-1"><span class="text-xs font-medium text-muted-foreground">Additional colors</span><div class="flex flex-wrap gap-2">`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex flex-col gap-1"><span class="text-xs font-medium text-muted-foreground">Theme accents</span><div class="grid grid-cols-3 gap-2">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<span class=sr-only>`);
-var PRIMARY_ACCENT_IDS = [
-	"blue",
-	"green",
-	"amber",
-	"cyan",
-	"pink"
-];
-var primaryAccentIds = new Set(PRIMARY_ACCENT_IDS);
+var _tmpl$ = /*#__PURE__*/ template(`<div class="grid grid-cols-4 gap-2"data-accent-grid>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class=sr-only>`);
+/**
+* The accent choices, as ONE group: the theme's own primary first, then every
+* preset the host feeds, each painted with its value for the resolved
+* appearance — which is what makes the group theme-scoped rather than a
+* catalogue table. The custom-color entry is the host's (`AccentChoices`
+* renders it beside this grid), because whether a free-form colour is accepted
+* is the host's validation to own.
+*/
 function AccentSwatchGroups(props) {
-	const primaryAccents = () => PRIMARY_ACCENT_IDS.flatMap((id) => {
-		const option = props.accentOptions.find((candidate) => candidate.id === id);
-		return option ? [option] : [];
-	});
-	const additionalAccents = () => props.accentOptions.filter((option) => option.id !== "theme" && !primaryAccentIds.has(option.id));
-	return [
-		(() => {
-			var _el$ = _tmpl$();
-			insert(_el$, createComponent(AccentSwatch, {
-				id: "theme",
-				label: "Theme default",
-				get color() {
-					return props.themeDefaultColor;
-				},
-				group: "primary"
-			}), null);
-			insert(_el$, createComponent(For, {
-				get each() {
-					return primaryAccents();
-				},
-				children: (option) => createComponent(AccentSwatch, {
-					get id() {
-						return option.id;
-					},
-					get label() {
-						return option.label;
-					},
-					get color() {
-						return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
-					},
-					group: "primary"
-				})
-			}), null);
-			return _el$;
-		})(),
-		createComponent(Show, {
-			get when() {
-				return additionalAccents().length > 0;
-			},
-			get children() {
-				var _el$2 = _tmpl$2(), _el$4 = _el$2.firstChild.nextSibling;
-				insert(_el$4, createComponent(For, {
-					get each() {
-						return additionalAccents();
-					},
-					children: (option) => createComponent(AccentSwatch, {
-						get id() {
-							return option.id;
-						},
-						get label() {
-							return option.label;
-						},
-						get color() {
-							return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
-						},
-						group: "additional"
-					})
-				}));
-				return _el$2;
+	const presets = () => props.accentOptions.filter((option) => option.id !== "theme");
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(AccentSwatch, {
+			id: "theme",
+			label: "Theme default",
+			get color() {
+				return props.themeDefaultColor;
 			}
-		}),
-		createComponent(Show, {
-			get when() {
-				return props.themeAccentOptions.length > 0;
+		}), null);
+		insert(_el$, createComponent(For, {
+			get each() {
+				return presets();
 			},
-			get children() {
-				var _el$5 = _tmpl$3(), _el$7 = _el$5.firstChild.nextSibling;
-				insert(_el$7, createComponent(For, {
-					get each() {
-						return props.themeAccentOptions;
-					},
-					children: (option) => createComponent(AccentSwatch, {
-						get id() {
-							return option.id;
-						},
-						get label() {
-							return "Theme " + option.label.toLowerCase();
-						},
-						get color() {
-							return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
-						},
-						group: "theme",
-						dashed: true
-					})
-				}));
-				return _el$5;
-			}
-		})
-	];
+			children: (option) => createComponent(AccentSwatch, {
+				get id() {
+					return option.id;
+				},
+				get label() {
+					return option.label;
+				},
+				get color() {
+					return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
+				}
+			})
+		}), null);
+		return _el$;
+	})();
 }
 function AccentSwatch(props) {
 	return createComponent(RadioGroup.Item, {
@@ -115,30 +51,19 @@ function AccentSwatch(props) {
 		get ["data-accent-option"]() {
 			return props.id;
 		},
-		get ["data-primary-accent"]() {
-			return memo(() => props.group === "primary")() ? props.id : void 0;
-		},
-		get ["data-additional-accent"]() {
-			return memo(() => props.group === "additional")() ? props.id : void 0;
-		},
-		get ["data-theme-accent"]() {
-			return memo(() => props.group === "theme")() ? props.id : void 0;
-		},
 		"class": "rounded-full focus-within:ring-3 focus-within:ring-ring/50",
 		get children() {
 			return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
-				get ["class"]() {
-					return cn("block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary", { "border-dashed data-[checked]:border-solid": props.dashed });
-				},
+				"class": "block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
 				get children() {
 					return [(() => {
-						var _el$8 = _tmpl$4();
-						effect((_$p) => setStyleProperty(_el$8, "background-color", props.color));
-						return _el$8;
+						var _el$2 = _tmpl$2();
+						effect((_$p) => setStyleProperty(_el$2, "background-color", props.color));
+						return _el$2;
 					})(), (() => {
-						var _el$9 = _tmpl$5();
-						insert(_el$9, () => props.label);
-						return _el$9;
+						var _el$3 = _tmpl$3();
+						insert(_el$3, () => props.label);
+						return _el$3;
 					})()];
 				}
 			})];
@@ -146,6 +71,6 @@ function AccentSwatch(props) {
 	});
 }
 //#endregion
-export { AccentSwatchGroups, PRIMARY_ACCENT_IDS };
+export { AccentSwatchGroups };
 
 //# sourceMappingURL=accent-swatch-groups.js.map

package/dist/components/composites/appearance-editor/accent-swatch-groups.js.map

@@ -1 +1 @@
-{"version":3,"file":"accent-swatch-groups.js","names":["RadioGroup","Radio","For","Show","cn","PRIMARY_ACCENT_IDS","const","primaryAccentIds","ReadonlySet","Set","AccentOption","Readonly","id","label","light","dark","AccentSwatchGroupsProps","accentOptions","themeAccentOptions","resolvedAppearance","themeDefaultColor","AccentSwatchGroups","props","primaryAccents","flatMap","option","find","candidate","additionalAccents","filter","has","_el$","_tmpl$","_$insert","_$createComponent","AccentSwatch","color","group","each","children","when","length","_el$2","_tmpl$2","_el$3","firstChild","_el$4","nextSibling","_el$5","_tmpl$3","_el$6","_el$7","toLowerCase","dashed","Item","value","data-accent-option","data-primary-accent","_$memo","undefined","data-additional-accent","data-theme-accent","ItemInput","ItemLabel","class","_el$8","_tmpl$4","_$effect","_$p","_$setStyleProperty","_el$9","_tmpl$5","_$createComponent","Radio","_$memo","_$setStyleProperty"],"sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.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 */\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport const PRIMARY_ACCENT_IDS = ['blue', 'green', 'amber', 'cyan', 'pink'] as const\nconst primaryAccentIds: ReadonlySet<string> = new Set(PRIMARY_ACCENT_IDS)\n\ntype AccentOption = Readonly<{\n  id: string\n  label: string\n  light?: string\n  dark?: string\n}>\n\ntype AccentSwatchGroupsProps = {\n  accentOptions: readonly AccentOption[]\n  themeAccentOptions: readonly AccentOption[]\n  resolvedAppearance: 'light' | 'dark'\n  themeDefaultColor: string\n}\n\nexport function AccentSwatchGroups(props: AccentSwatchGroupsProps) {\n  const primaryAccents = () =>\n    PRIMARY_ACCENT_IDS.flatMap((id) => {\n      const option = props.accentOptions.find((candidate) => candidate.id === id)\n      return option ? [option] : []\n    })\n  const additionalAccents = () =>\n    props.accentOptions.filter(\n      (option) => option.id !== 'theme' && !primaryAccentIds.has(option.id)\n    )\n\n  return (\n    <>\n      <div class=\"grid grid-cols-3 gap-2\" data-primary-accent-grid>\n        <AccentSwatch\n          id=\"theme\"\n          label=\"Theme default\"\n          color={props.themeDefaultColor}\n          group=\"primary\"\n        />\n        <For each={primaryAccents()}>\n          {(option) => (\n            <AccentSwatch\n              id={option.id}\n              label={option.label}\n              color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n              group=\"primary\"\n            />\n          )}\n        </For>\n      </div>\n      <Show when={additionalAccents().length > 0}>\n        <div class=\"flex flex-col gap-1\">\n          <span class=\"text-xs font-medium text-muted-foreground\">Additional colors</span>\n          <div class=\"flex flex-wrap gap-2\">\n            <For each={additionalAccents()}>\n              {(option) => (\n                <AccentSwatch\n                  id={option.id}\n                  label={option.label}\n                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n                  group=\"additional\"\n                />\n              )}\n            </For>\n          </div>\n        </div>\n      </Show>\n      <Show when={props.themeAccentOptions.length > 0}>\n        <div class=\"flex flex-col gap-1\">\n          <span class=\"text-xs font-medium text-muted-foreground\">Theme accents</span>\n          <div class=\"grid grid-cols-3 gap-2\">\n            <For each={props.themeAccentOptions}>\n              {(option) => (\n                <AccentSwatch\n                  id={option.id}\n                  label={'Theme ' + option.label.toLowerCase()}\n                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n                  group=\"theme\"\n                  dashed\n                />\n              )}\n            </For>\n          </div>\n        </div>\n      </Show>\n    </>\n  )\n}\n\nfunction AccentSwatch(props: {\n  id: string\n  label: string\n  color: string\n  group: 'primary' | 'additional' | 'theme'\n  dashed?: boolean\n}) {\n  return (\n    <Radio.Item\n      value={props.id}\n      data-accent-option={props.id}\n      data-primary-accent={props.group === 'primary' ? props.id : undefined}\n      data-additional-accent={props.group === 'additional' ? props.id : undefined}\n      data-theme-accent={props.group === 'theme' ? props.id : undefined}\n      class=\"rounded-full focus-within:ring-3 focus-within:ring-ring/50\"\n    >\n      <Radio.ItemInput />\n      <Radio.ItemLabel\n        class={cn(\n          'block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',\n          { 'border-dashed data-[checked]:border-solid': props.dashed }\n        )}\n      >\n        <span\n          class=\"block size-full rounded-full\"\n          aria-hidden=\"true\"\n          style={{ 'background-color': props.color }}\n        />\n        <span class=\"sr-only\">{props.label}</span>\n      </Radio.ItemLabel>\n    </Radio.Item>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"accent-swatch-groups.js","names":["RadioGroup","Radio","For","AccentOption","Readonly","id","label","light","dark","AccentSwatchGroupsProps","accentOptions","themeAccentOptions","resolvedAppearance","themeDefaultColor","AccentSwatchGroups","props","presets","filter","option","_el$","_tmpl$","_$insert","_$createComponent","AccentSwatch","color","each","children","Item","value","data-accent-option","ItemInput","ItemLabel","_el$2","_tmpl$2","_$effect","_$p","_$setStyleProperty","_el$3","_tmpl$3","_$createComponent","Radio","_$setStyleProperty"],"sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.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 */\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For } from 'solid-js'\n\ntype AccentOption = Readonly<{\n  id: string\n  label: string\n  light?: string\n  dark?: string\n}>\n\ntype AccentSwatchGroupsProps = {\n  accentOptions: readonly AccentOption[]\n  /**\n   * Accepted for host compatibility and no longer rendered. The picker offers\n   * one theme-scoped group — the theme's own primary followed by the presets —\n   * instead of splitting additional presets and the theme pair's accent slots\n   * into labelled groups of their own. A stored theme-accent id still resolves\n   * (`resolveAccentPreset`) and is still described by the row; it is just no\n   * longer offered as a swatch, and a host can stop feeding this list.\n   */\n  themeAccentOptions?: readonly AccentOption[]\n  resolvedAppearance: 'light' | 'dark'\n  themeDefaultColor: string\n}\n\n/**\n * The accent choices, as ONE group: the theme's own primary first, then every\n * preset the host feeds, each painted with its value for the resolved\n * appearance — which is what makes the group theme-scoped rather than a\n * catalogue table. The custom-color entry is the host's (`AccentChoices`\n * renders it beside this grid), because whether a free-form colour is accepted\n * is the host's validation to own.\n */\nexport function AccentSwatchGroups(props: AccentSwatchGroupsProps) {\n  const presets = () => props.accentOptions.filter((option) => option.id !== 'theme')\n\n  return (\n    <div class=\"grid grid-cols-4 gap-2\" data-accent-grid>\n      <AccentSwatch id=\"theme\" label=\"Theme default\" color={props.themeDefaultColor} />\n      <For each={presets()}>\n        {(option) => (\n          <AccentSwatch\n            id={option.id}\n            label={option.label}\n            color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n          />\n        )}\n      </For>\n    </div>\n  )\n}\n\nfunction AccentSwatch(props: { id: string; label: string; color: string }) {\n  return (\n    <Radio.Item\n      value={props.id}\n      data-accent-option={props.id}\n      class=\"rounded-full focus-within:ring-3 focus-within:ring-ring/50\"\n    >\n      <Radio.ItemInput />\n      <Radio.ItemLabel class=\"block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n        <span\n          class=\"block size-full rounded-full\"\n          aria-hidden=\"true\"\n          style={{ 'background-color': props.color }}\n        />\n        <span class=\"sr-only\">{props.label}</span>\n      </Radio.ItemLabel>\n    </Radio.Item>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,SAAgBc,mBAAmBC,OAAgC;CACjE,MAAMC,gBAAgBD,MAAML,cAAcO,QAAQC,WAAWA,OAAOb,OAAO,OAAO;CAElF,cAAA;EAAA,IAAAc,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,gBAEKC,cAAY;GAAClB,IAAE;GAASC,OAAK;GAAA,IAAiBkB,QAAK;IAAA,OAAET,MAAMF;GAAiB;EAAA,CAAA,GAAA,IAAA;EAAAQ,OAAAF,MAAAG,gBAC5EpB,KAAG;GAAA,IAACuB,OAAI;IAAA,OAAET,QAAQ;GAAC;GAAAU,WAChBR,WAAMI,gBACLC,cAAY;IAAA,IACXlB,KAAE;KAAA,OAAEa,OAAOb;IAAE;IAAA,IACbC,QAAK;KAAA,OAAEY,OAAOZ;IAAK;IAAA,IACnBkB,QAAK;KAAA,QAAGT,MAAMH,uBAAuB,UAAUM,OAAOX,QAAQW,OAAOV,SAAS;IAAE;GAAA,CAAA;EAEnF,CAAA,GAAA,IAAA;EAAA,OAAAW;CAAA,EAAA,CAAA;AAIT;AAEA,SAASI,aAAaR,OAAqD;CACzE,OAAAO,gBACGrB,WAAM0B,MAAI;EAAA,IACTC,QAAK;GAAA,OAAEb,MAAMV;EAAE;EAAA,KAAA,wBAAA;GAAA,OACKU,MAAMV;EAAE;EAAA,SAAA;EAAA,IAAAqB,WAAA;GAAA,OAAA,CAAAJ,gBAG3BrB,WAAM6B,WAAS,CAAA,CAAA,GAAAR,gBACfrB,WAAM8B,WAAS;IAAA,SAAA;IAAA,IAAAL,WAAA;KAAA,OAAA,QAAA;MAAA,IAAAM,QAAAC,QAAA;MAAAC,QAAAC,QAAAC,iBAAAJ,OAAA,oBAIiBjB,MAAMS,KAAK,CAAA;MAAA,OAAAQ;KAAA,EAAA,CAAA,UAAA;MAAA,IAAAK,QAAAC,QAAA;MAAAjB,OAAAgB,aAEnBtB,MAAMT,KAAK;MAAA,OAAA+B;KAAA,EAAA,CAAA,CAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAI1C"}

package/dist/components/composites/appearance-editor/appearance-choices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-choices.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAa/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,qBAAqB,kCAyCvD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB,GAAG,OAAO,CAOpE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,kCA2CzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,qBAAqB,kCA6BxD"}
+{"version":3,"file":"appearance-choices.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAa/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,qBAAqB,kCAyCvD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,qBAAqB,GAAG,OAAO,CAOpE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,kCAwCzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,qBAAqB,kCA6BxD"}

package/dist/components/composites/appearance-editor/appearance-choices.js

@@ -114,7 +114,6 @@ function isCustomAccent(props) {
 }
 function AccentChoices(props) {
 	const resolvedAppearance = () => props.draft.mode === "system" ? props.resolvedAppearance : props.draft.mode;
-	const themeAccents = () => props.themeAccentOptions ?? [];
 	const accentSelection = () => isCustomAccent(props) ? "custom" : props.draft.accent;
 	return createComponent(RadioGroup, {
 		get value() {
@@ -132,9 +131,6 @@ function AccentChoices(props) {
 				get accentOptions() {
 					return props.accentOptions;
 				},
-				get themeAccentOptions() {
-					return themeAccents();
-				},
 				get resolvedAppearance() {
 					return resolvedAppearance();
 				},

package/dist/components/composites/appearance-editor/appearance-choices.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","For","Show","isThemeAccentId","AccentSwatchGroups","AppearanceEditorProps","ThemeMiniature","ThemeMiniatureSplit","MODES","value","label","const","SURFACES","ModeChoices","props","_$createComponent","draft","mode","disabled","saving","orientation","onChange","option","find","candidate","children","each","Item","data-mode","ItemInput","ItemLabel","_el$","_tmpl$","_$insert","when","fallback","theme","_$memo","lightTheme","darkTheme","light","dark","_el$2","_tmpl$2","isCustomAccent","accent","accentOptions","some","id","AccentChoices","resolvedAppearance","themeAccents","themeAccentOptions","accentSelection","customAccentValue","themeDefaultColor","colors","_el$3","_tmpl$3","_el$4","firstChild","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo"],"sources":["../../../../src/components/composites/appearance-editor/appearance-choices.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// Pinned mode-card, accent-swatch, and glass-chip composition. Kobalte replaces\n// the app port's manual roving focus; it does not replace the donor hierarchy.\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\nimport { isThemeAccentId } from '#lib/theme-accents'\nimport { AccentSwatchGroups } from './accent-swatch-groups'\nimport type { AppearanceEditorProps } from './appearance-types'\nimport { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'\n\nconst MODES = [\n  { value: 'system', label: 'System' },\n  { value: 'light', label: 'Light' },\n  { value: 'dark', label: 'Dark' },\n] as const\nconst SURFACES = [\n  { value: 'theme', label: 'Theme default' },\n  { value: 'frosted', label: 'Frosted' },\n  { value: 'opaque', label: 'Opaque' },\n] as const\nexport function ModeChoices(props: AppearanceEditorProps) {\n  return (\n    <Radio\n      value={props.draft.mode}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Appearance mode\"\n      onChange={(mode) => {\n        const option = MODES.find((candidate) => candidate.value === mode)\n        if (option) props.onChange({ mode: option.value })\n      }}\n      class=\"grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3\"\n    >\n      <For each={MODES}>\n        {(option) => (\n          <Radio.Item\n            value={option.value}\n            data-mode={option.value}\n            class=\"min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50\"\n          >\n            <Radio.ItemInput />\n            <Radio.ItemLabel class=\"flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n              <span class=\"block h-20 w-full\">\n                <Show\n                  when={option.value === 'system'}\n                  fallback={\n                    <ThemeMiniature\n                      theme={option.value === 'light' ? props.lightTheme : props.darkTheme}\n                    />\n                  }\n                >\n                  <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />\n                </Show>\n              </span>\n              <span>{option.label}</span>\n            </Radio.ItemLabel>\n          </Radio.Item>\n        )}\n      </For>\n    </Radio>\n  )\n}\n\n/**\n * Whether the draft accent is the host's custom colour: not the theme default,\n * not a preset, and not a theme accent id. A theme accent id counts as known even\n * when the current pair cannot offer it — it is a stored role, not a colour the\n * user typed, and showing it in the custom field would invite editing `ansi-blue`.\n */\nexport function isCustomAccent(props: AppearanceEditorProps): boolean {\n  const accent = props.draft.accent\n  return (\n    accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === accent) &&\n    !isThemeAccentId(accent)\n  )\n}\n\nexport function AccentChoices(props: AppearanceEditorProps) {\n  // The resolved appearance decides which side of a preset pair — and which\n  // theme accent — the swatches paint, so the row previews each choice as the\n  // user will see it.\n  const resolvedAppearance = () =>\n    props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode\n  // The accents the previewed theme pair carries, offered after the presets.\n  const themeAccents = () => props.themeAccentOptions ?? []\n  const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)\n  return (\n    <Radio\n      value={accentSelection()}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Accent\"\n      class=\"flex flex-col items-start gap-3\"\n      onChange={(accent) =>\n        props.onChange({\n          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n        })\n      }\n    >\n      <AccentSwatchGroups\n        accentOptions={props.accentOptions}\n        themeAccentOptions={themeAccents()}\n        resolvedAppearance={resolvedAppearance()}\n        themeDefaultColor={\n          resolvedAppearance() === 'light'\n            ? props.lightTheme.colors.accent\n            : props.darkTheme.colors.accent\n        }\n      />\n      <div class=\"flex flex-col gap-1\">\n        <span class=\"text-xs font-medium text-muted-foreground\">Custom</span>\n        <Radio.Item value=\"custom\">\n          <Radio.ItemInput />\n          <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\">\n            Custom\n          </Radio.ItemLabel>\n        </Radio.Item>\n      </div>\n    </Radio>\n  )\n}\n\nexport function GlassChoices(props: AppearanceEditorProps) {\n  return (\n    <Radio\n      value={props.draft.surface}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Glass\"\n      class=\"flex flex-wrap gap-1\"\n      onChange={(surface) => {\n        const option = SURFACES.find((candidate) => candidate.value === surface)\n        if (option) props.onChange({ surface: option.value })\n      }}\n    >\n      <For each={SURFACES}>\n        {(option) => (\n          <Radio.Item\n            value={option.value}\n            disabled={option.value === 'frosted' && !props.surfaceCapability.frosted}\n            class=\"rounded-md focus-within:ring-3 focus-within:ring-ring/50\"\n          >\n            <Radio.ItemInput />\n            <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 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n              {option.label}\n            </Radio.ItemLabel>\n          </Radio.Item>\n        )}\n      </For>\n    </Radio>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","For","Show","isThemeAccentId","AccentSwatchGroups","AppearanceEditorProps","ThemeMiniature","ThemeMiniatureSplit","MODES","value","label","const","SURFACES","ModeChoices","props","_$createComponent","draft","mode","disabled","saving","orientation","onChange","option","find","candidate","children","each","Item","data-mode","ItemInput","ItemLabel","_el$","_tmpl$","_$insert","when","fallback","theme","_$memo","lightTheme","darkTheme","light","dark","_el$2","_tmpl$2","isCustomAccent","accent","accentOptions","some","id","AccentChoices","resolvedAppearance","accentSelection","customAccentValue","themeDefaultColor","colors","_el$3","_tmpl$3","_el$4","firstChild","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo"],"sources":["../../../../src/components/composites/appearance-editor/appearance-choices.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// Pinned mode-card, accent-swatch, and glass-chip composition. Kobalte replaces\n// the app port's manual roving focus; it does not replace the donor hierarchy.\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\nimport { isThemeAccentId } from '#lib/theme-accents'\nimport { AccentSwatchGroups } from './accent-swatch-groups'\nimport type { AppearanceEditorProps } from './appearance-types'\nimport { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'\n\nconst MODES = [\n  { value: 'system', label: 'System' },\n  { value: 'light', label: 'Light' },\n  { value: 'dark', label: 'Dark' },\n] as const\nconst SURFACES = [\n  { value: 'theme', label: 'Theme default' },\n  { value: 'frosted', label: 'Frosted' },\n  { value: 'opaque', label: 'Opaque' },\n] as const\nexport function ModeChoices(props: AppearanceEditorProps) {\n  return (\n    <Radio\n      value={props.draft.mode}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Appearance mode\"\n      onChange={(mode) => {\n        const option = MODES.find((candidate) => candidate.value === mode)\n        if (option) props.onChange({ mode: option.value })\n      }}\n      class=\"grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3\"\n    >\n      <For each={MODES}>\n        {(option) => (\n          <Radio.Item\n            value={option.value}\n            data-mode={option.value}\n            class=\"min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50\"\n          >\n            <Radio.ItemInput />\n            <Radio.ItemLabel class=\"flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n              <span class=\"block h-20 w-full\">\n                <Show\n                  when={option.value === 'system'}\n                  fallback={\n                    <ThemeMiniature\n                      theme={option.value === 'light' ? props.lightTheme : props.darkTheme}\n                    />\n                  }\n                >\n                  <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />\n                </Show>\n              </span>\n              <span>{option.label}</span>\n            </Radio.ItemLabel>\n          </Radio.Item>\n        )}\n      </For>\n    </Radio>\n  )\n}\n\n/**\n * Whether the draft accent is the host's custom colour: not the theme default,\n * not a preset, and not a theme accent id. A theme accent id counts as known even\n * when the current pair cannot offer it — it is a stored role, not a colour the\n * user typed, and showing it in the custom field would invite editing `ansi-blue`.\n */\nexport function isCustomAccent(props: AppearanceEditorProps): boolean {\n  const accent = props.draft.accent\n  return (\n    accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === accent) &&\n    !isThemeAccentId(accent)\n  )\n}\n\nexport function AccentChoices(props: AppearanceEditorProps) {\n  // The resolved appearance decides which side of a preset pair — and which\n  // theme accent — the swatches paint, so the row previews each choice as the\n  // user will see it.\n  const resolvedAppearance = () =>\n    props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode\n  const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)\n  return (\n    <Radio\n      value={accentSelection()}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Accent\"\n      class=\"flex flex-col items-start gap-3\"\n      onChange={(accent) =>\n        props.onChange({\n          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n        })\n      }\n    >\n      <AccentSwatchGroups\n        accentOptions={props.accentOptions}\n        resolvedAppearance={resolvedAppearance()}\n        themeDefaultColor={\n          resolvedAppearance() === 'light'\n            ? props.lightTheme.colors.accent\n            : props.darkTheme.colors.accent\n        }\n      />\n      <div class=\"flex flex-col gap-1\">\n        <span class=\"text-xs font-medium text-muted-foreground\">Custom</span>\n        <Radio.Item value=\"custom\">\n          <Radio.ItemInput />\n          <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\">\n            Custom\n          </Radio.ItemLabel>\n        </Radio.Item>\n      </div>\n    </Radio>\n  )\n}\n\nexport function GlassChoices(props: AppearanceEditorProps) {\n  return (\n    <Radio\n      value={props.draft.surface}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Glass\"\n      class=\"flex flex-wrap gap-1\"\n      onChange={(surface) => {\n        const option = SURFACES.find((candidate) => candidate.value === surface)\n        if (option) props.onChange({ surface: option.value })\n      }}\n    >\n      <For each={SURFACES}>\n        {(option) => (\n          <Radio.Item\n            value={option.value}\n            disabled={option.value === 'frosted' && !props.surfaceCapability.frosted}\n            class=\"rounded-md focus-within:ring-3 focus-within:ring-ring/50\"\n          >\n            <Radio.ItemInput />\n            <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 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n              {option.label}\n            </Radio.ItemLabel>\n          </Radio.Item>\n        )}\n      </For>\n    </Radio>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgCA,IAAMS,QAAQ;CACZ;EAAEC,OAAO;EAAUC,OAAO;CAAS;CACnC;EAAED,OAAO;EAASC,OAAO;CAAQ;CACjC;EAAED,OAAO;EAAQC,OAAO;CAAO;AAAC;AAElC,IAAME,WAAW;CACf;EAAEH,OAAO;EAASC,OAAO;CAAgB;CACzC;EAAED,OAAO;EAAWC,OAAO;CAAU;CACrC;EAAED,OAAO;EAAUC,OAAO;CAAS;AAAC;AAEtC,SAAgBG,YAAYC,OAA8B;CACxD,OAAAC,gBACGf,YAAK;EAAA,IACJS,QAAK;GAAA,OAAEK,MAAME,MAAMC;EAAI;EAAA,IACvBC,WAAQ;GAAA,OAAEJ,MAAMK;EAAM;EACtBC,aAAW;EAAA,cAAA;EAEXC,WAAWJ,SAAS;GAClB,MAAMK,SAASd,MAAMe,MAAMC,cAAcA,UAAUf,UAAUQ,IAAI;GACjE,IAAIK,QAAQR,MAAMO,SAAS,EAAEJ,MAAMK,OAAOb,MAAM,CAAC;EACnD;EAAC,SAAA;EAAA,IAAAgB,WAAA;GAAA,OAAAV,gBAGAd,KAAG;IAACyB,MAAMlB;IAAKiB,WACZH,WAAMP,gBACLf,WAAM2B,MAAI;KAAA,IACTlB,QAAK;MAAA,OAAEa,OAAOb;KAAK;KAAA,KAAA,eAAA;MAAA,OACRa,OAAOb;KAAK;KAAA,SAAA;KAAA,IAAAgB,WAAA;MAAA,OAAA,CAAAV,gBAGtBf,WAAM6B,WAAS,CAAA,CAAA,GAAAd,gBACff,WAAM8B,WAAS;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OAAA,QAAA;SAAA,IAAAM,OAAAC,OAAA;SAAAC,OAAAF,MAAAhB,gBAEXb,MAAI;UAAA,IACHgC,OAAI;WAAA,OAAEZ,OAAOb,UAAU;UAAQ;UAAA,IAC/B0B,WAAQ;WAAA,OAAApB,gBACLT,gBAAc,EAAA,IACb8B,QAAK;YAAA,OAAEC,WAAAf,OAAOb,UAAU,OAAO,CAAA,CAAA,IAAGK,MAAMwB,aAAaxB,MAAMyB;WAAS,EAAA,CAAA;UAAA;UAAA,IAAAd,WAAA;WAAA,OAAAV,gBAIvER,qBAAmB;YAAA,IAACiC,QAAK;aAAA,OAAE1B,MAAMwB;YAAU;YAAA,IAAEG,OAAI;aAAA,OAAE3B,MAAMyB;YAAS;WAAA,CAAA;UAAA;SAAA,CAAA,CAAA;SAAA,OAAAR;QAAA,EAAA,CAAA,UAAA;SAAA,IAAAW,QAAAC,QAAA;SAAAV,OAAAS,aAGhEpB,OAAOZ,KAAK;SAAA,OAAAgC;QAAA,EAAA,CAAA,CAAA;OAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA;GAGxB,CAAA;EAAA;CAAA,CAAA;AAIT;;;;;;;AAQA,SAAgBE,eAAe9B,OAAuC;CACpE,MAAM+B,SAAS/B,MAAME,MAAM6B;CAC3B,OACEA,WAAW,WACX,CAAC/B,MAAMgC,cAAcC,MAAMzB,WAAWA,OAAO0B,OAAOH,MAAM,KAC1D,CAAC1C,gBAAgB0C,MAAM;AAE3B;AAEA,SAAgBI,cAAcnC,OAA8B;CAI1D,MAAMoC,2BACJpC,MAAME,MAAMC,SAAS,WAAWH,MAAMoC,qBAAqBpC,MAAME,MAAMC;CACzE,MAAMkC,wBAAyBP,eAAe9B,KAAK,IAAI,WAAWA,MAAME,MAAM6B;CAC9E,OAAA9B,gBACGf,YAAK;EAAA,IACJS,QAAK;GAAA,OAAE0C,gBAAgB;EAAC;EAAA,IACxBjC,WAAQ;GAAA,OAAEJ,MAAMK;EAAM;EACtBC,aAAW;EAAA,cAAA;EAAA,SAAA;EAGXC,WAAWwB,WACT/B,MAAMO,SAAS,EACbwB,QAAQA,WAAW,WAAY/B,MAAMsC,qBAAqB,KAAMP,OAClE,CAAC;EAAC,IAAApB,WAAA;GAAA,OAAA,CAAAV,gBAGHX,oBAAkB;IAAA,IACjB0C,gBAAa;KAAA,OAAEhC,MAAMgC;IAAa;IAAA,IAClCI,qBAAkB;KAAA,OAAEA,mBAAmB;IAAC;IAAA,IACxCG,oBAAiB;KAAA,OACfhB,WAAAa,mBAAmB,MAAM,OAAO,CAAA,CAAA,IAC5BpC,MAAMwB,WAAWgB,OAAOT,SACxB/B,MAAMyB,UAAUe,OAAOT;IAAM;GAAA,CAAA,UAAA;IAAA,IAAAU,QAAAC,QAAA;IAAAD,MAAAG;IAAAzB,OAAAsB,OAAAxC,gBAKlCf,WAAM2B,MAAI;KAAClB,OAAK;KAAA,IAAAgB,WAAA;MAAA,OAAA,CAAAV,gBACdf,WAAM6B,WAAS,CAAA,CAAA,GAAAd,gBACff,WAAM8B,WAAS;OAAA,SAAA;OAAAL,UAAA;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAA8B;GAAA,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAO1B;AAEA,SAAgBI,aAAa7C,OAA8B;CACzD,OAAAC,gBACGf,YAAK;EAAA,IACJS,QAAK;GAAA,OAAEK,MAAME,MAAM4C;EAAO;EAAA,IAC1B1C,WAAQ;GAAA,OAAEJ,MAAMK;EAAM;EACtBC,aAAW;EAAA,cAAA;EAAA,SAAA;EAGXC,WAAWuC,YAAY;GACrB,MAAMtC,SAASV,SAASW,MAAMC,cAAcA,UAAUf,UAAUmD,OAAO;GACvE,IAAItC,QAAQR,MAAMO,SAAS,EAAEuC,SAAStC,OAAOb,MAAM,CAAC;EACtD;EAAC,IAAAgB,WAAA;GAAA,OAAAV,gBAEAd,KAAG;IAACyB,MAAMd;IAAQa,WACfH,WAAMP,gBACLf,WAAM2B,MAAI;KAAA,IACTlB,QAAK;MAAA,OAAEa,OAAOb;KAAK;KAAA,IACnBS,WAAQ;MAAA,OAAEmB,WAAAf,OAAOb,UAAU,SAAS,CAAA,CAAA,KAAI,CAACK,MAAM+C,kBAAkBC;KAAO;KAAA,SAAA;KAAA,IAAArC,WAAA;MAAA,OAAA,CAAAV,gBAGvEf,WAAM6B,WAAS,CAAA,CAAA,GAAAd,gBACff,WAAM8B,WAAS;OAAA,SAAA;OAAA,IAAAL,WAAA;QAAA,OACbH,OAAOZ;OAAK;MAAA,CAAA,CAAA;KAAA;IAAA,CAAA;GAGlB,CAAA;EAAA;CAAA,CAAA;AAIT"}

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

@@ -4,9 +4,9 @@ import { Input } from "../../ui/input/input.js";
 import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "../../ui/sheet/sheet.js";
 import { Switch } from "../../ui/switch/switch.js";
 import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from "../../../lib/appearance-font-settings.js";
-import { SettingsRow, TerminalRow, ThemeRow } from "./appearance-rows.js";
 import { AppearanceFontSettingsGroup } from "./font-settings-group.js";
 import { AccentChoices, GlassChoices, ModeChoices, isCustomAccent } from "./appearance-choices.js";
+import { SettingsRow, TerminalRow, ThemeRow } from "./appearance-rows.js";
 import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
 import { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from "lucide-solid";
 import { Show, createSignal, createUniqueId } from "solid-js";

package/dist/components/composites/appearance-editor/font-settings-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-settings-group.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/font-settings-group.tsx"],"names":[],"mappings":"AAcA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,+BAA+B,CAAA;AAEtC,MAAM,MAAM,gCAAgC,GAAG;IAC7C,QAAQ,EAAE,4BAA4B,CAAA;IACtC,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,4BAA4B,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAyND,mFAAmF;AACnF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,kCAsGlF"}
+{"version":3,"file":"font-settings-group.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/font-settings-group.tsx"],"names":[],"mappings":"AAaA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,+BAA+B,CAAA;AAEtC,MAAM,MAAM,gCAAgC,GAAG;IAC7C,QAAQ,EAAE,4BAA4B,CAAA;IACtC,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,4BAA4B,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAyND,mFAAmF;AACnF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,kCAoHlF"}

package/dist/components/composites/appearance-editor/font-settings-group.js

@@ -3,14 +3,13 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenu
 import { InputControl } from "../../ui/input/input-control.js";
 import { fontOptions } from "../../../lib/font-catalog.js";
 import { normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize } from "../../../lib/appearance-font-settings.js";
-import { SettingsRow } from "./appearance-rows.js";
-import { createComponent, insert, setAttribute, template } from "solid-js/web";
+import { createComponent, effect, insert, setAttribute, template } from "solid-js/web";
 import { BookOpen, ChevronDown, Code2, PanelsTopLeft } from "lucide-solid";
 import { For, createMemo, createSignal, createUniqueId } from "solid-js";
 //#region src/components/composites/appearance-editor/font-settings-group.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<span class=truncate>`);
 var _tmpl$2 = /*#__PURE__*/ template(`<div class=global-appearance-font-settings>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex min-w-0 max-w-full flex-wrap items-center gap-2"><div class="flex shrink-0 items-center gap-1"><span aria-hidden=true class="text-xs text-muted-foreground">px</span></div><span class=sr-only>Enter a whole number from <!> to <!> pixels.`);
+var _tmpl$3 = /*#__PURE__*/ template(`<section class="flex items-center gap-3 px-4 py-4"><span class="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-foreground/5 text-muted-foreground [&amp;_svg]:size-4"aria-hidden=true></span><div class="min-w-0 flex-1"><h3 class="text-sm font-medium"></h3><div class="mt-0.5 truncate text-xs text-muted-foreground"></div></div><div class="flex shrink-0 items-center gap-2"><div class="flex items-center gap-1"><span aria-hidden=true class="text-xs text-muted-foreground">px</span></div><span class=sr-only>Enter a whole number from <!> to <!> pixels.`);
 var FONT_ROWS = [
 	{
 		axis: "ui",
@@ -88,7 +87,7 @@ function FontFamilyMenu(props) {
 				get disabled() {
 					return props.disabled;
 				},
-				"class": "w-40 max-w-full justify-between",
+				"class": "w-32 max-w-full justify-between",
 				get children() {
 					return [(() => {
 						var _el$ = _tmpl$();
@@ -235,70 +234,63 @@ function AppearanceFontSettingsGroup(props) {
 					const parsed = Number(draft);
 					return !Number.isFinite(parsed) || !Number.isInteger(parsed) || parsed < 10 || parsed > 32;
 				};
-				return createComponent(SettingsRow, {
-					get title() {
-						return row.label;
-					},
-					get icon() {
-						return createComponent(Icon, {});
-					},
-					get description() {
-						return row.description;
-					},
-					get children() {
-						var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$1 = _el$6.firstChild.nextSibling, _el$10 = _el$1.nextSibling.nextSibling;
-						_el$10.nextSibling;
-						insert(_el$3, createComponent(FontFamilyMenu, {
-							get label() {
-								return row.label;
-							},
-							get family() {
-								return value().family;
-							},
-							get menuPortalMount() {
-								return props.menuPortalMount;
-							},
-							get disabled() {
-								return props.disabled;
-							},
-							onSelect: (family) => updateAxis(row.axis, { family })
-						}), _el$4);
-						insert(_el$4, createComponent(InputControl, {
-							type: "number",
-							min: 10,
-							max: 32,
-							step: 1,
-							get value() {
-								return inputValue();
-							},
-							get disabled() {
-								return props.disabled;
-							},
-							get ["aria-label"]() {
-								return `${row.label} font size in pixels`;
-							},
-							"aria-describedby": sizeHintId,
-							get ["aria-invalid"]() {
-								return sizeIsInvalid();
-							},
-							"class": "w-16",
-							onInput: (event) => setSizeDrafts((current) => ({
-								...current,
-								[row.axis]: event.currentTarget.value
-							})),
-							onBlur: () => commitSize(row.axis),
-							onKeyDown: (event) => {
-								if (event.key !== "Enter") return;
-								event.preventDefault();
-								commitSize(row.axis);
-							}
-						}), _el$5);
-						setAttribute(_el$6, "id", sizeHintId);
-						insert(_el$6, 10, _el$1);
-						insert(_el$6, 32, _el$10);
-						return _el$3;
-					}
-				});
+				return (() => {
+					var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$5.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$9.nextSibling, _el$14 = _el$1.firstChild.nextSibling, _el$15 = _el$14.nextSibling.nextSibling;
+					_el$15.nextSibling;
+					insert(_el$4, createComponent(Icon, {}));
+					insert(_el$6, () => row.label);
+					insert(_el$7, () => row.description);
+					insert(_el$8, createComponent(FontFamilyMenu, {
+						get label() {
+							return row.label;
+						},
+						get family() {
+							return value().family;
+						},
+						get menuPortalMount() {
+							return props.menuPortalMount;
+						},
+						get disabled() {
+							return props.disabled;
+						},
+						onSelect: (family) => updateAxis(row.axis, { family })
+					}), _el$9);
+					insert(_el$9, createComponent(InputControl, {
+						type: "number",
+						min: 10,
+						max: 32,
+						step: 1,
+						get value() {
+							return inputValue();
+						},
+						get disabled() {
+							return props.disabled;
+						},
+						get ["aria-label"]() {
+							return `${row.label} font size in pixels`;
+						},
+						"aria-describedby": sizeHintId,
+						get ["aria-invalid"]() {
+							return sizeIsInvalid();
+						},
+						"class": "w-12",
+						onInput: (event) => setSizeDrafts((current) => ({
+							...current,
+							[row.axis]: event.currentTarget.value
+						})),
+						onBlur: () => commitSize(row.axis),
+						onKeyDown: (event) => {
+							if (event.key !== "Enter") return;
+							event.preventDefault();
+							commitSize(row.axis);
+						}
+					}), _el$0);
+					setAttribute(_el$1, "id", sizeHintId);
+					insert(_el$1, 10, _el$14);
+					insert(_el$1, 32, _el$15);
+					effect(() => setAttribute(_el$3, "data-font-settings-row", row.axis));
+					return _el$3;
+				})();
 			}
 		}));
 		return _el$2;