@adea-ai/ui 0.74.0 → 0.75.1

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":"AA2BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAc/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,qBAAqB,kCAyCvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,kCAyDzD;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":"AA2BA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAc/D,wBAAgB,WAAW,CAAC,KAAK,EAAE,qBAAqB,kCAyCvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,kCA6DzD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,qBAAqB,kCA6BxD"}

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

@@ -5,8 +5,9 @@ import { RadioGroup } from "@kobalte/core/radio-group";
 //#region src/components/composites/appearance-editor/appearance-choices.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<span class="block h-20 w-full">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<span class=sr-only>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class="col-span-3 grid grid-cols-3 gap-2 sm:col-span-1 sm:flex sm: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 MODES = [
 	{
 		value: "system",
@@ -113,7 +114,7 @@ function AccentChoices(props) {
 		},
 		orientation: "horizontal",
 		"aria-label": "Accent",
-		"class": "flex flex-wrap items-center gap-2",
+		"class": "grid grid-cols-3 items-center gap-2 sm:flex sm:flex-wrap sm:justify-end",
 		onChange: (accent) => props.onChange({ accent: accent === "custom" ? props.customAccentValue ?? "" : accent }),
 		get children() {
 			return [
@@ -126,33 +127,37 @@ function AccentChoices(props) {
 						})];
 					}
 				}),
-				createComponent(For, {
-					get each() {
-						return props.accentOptions;
-					},
-					children: (option) => createComponent(RadioGroup.Item, {
-						get value() {
-							return option.id;
+				(() => {
+					var _el$3 = _tmpl$3();
+					insert(_el$3, createComponent(For, {
+						get each() {
+							return props.accentOptions;
 						},
-						"class": "rounded-full focus-within:ring-3 focus-within:ring-ring/50",
-						get children() {
-							return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
-								get children() {
-									return [(() => {
-										var _el$3 = _tmpl$3();
-										effect((_$p) => setStyleProperty(_el$3, "background-color", (props.draft.mode === "system" ? props.resolvedAppearance : props.draft.mode) === "light" ? option.light : option.dark));
-										return _el$3;
-									})(), (() => {
-										var _el$4 = _tmpl$4();
-										insert(_el$4, () => option.label);
-										return _el$4;
-									})()];
-								}
-							})];
-						}
-					})
-				}),
+						children: (option) => createComponent(RadioGroup.Item, {
+							get value() {
+								return option.id;
+							},
+							"class": "rounded-full focus-within:ring-3 focus-within:ring-ring/50",
+							get children() {
+								return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
+									get children() {
+										return [(() => {
+											var _el$4 = _tmpl$4();
+											effect((_$p) => setStyleProperty(_el$4, "background-color", (props.draft.mode === "system" ? props.resolvedAppearance : props.draft.mode) === "light" ? option.light : option.dark));
+											return _el$4;
+										})(), (() => {
+											var _el$5 = _tmpl$5();
+											insert(_el$5, () => option.label);
+											return _el$5;
+										})()];
+									}
+								})];
+							}
+						})
+					}));
+					return _el$3;
+				})(),
 				createComponent(RadioGroup.Item, {
 					value: "custom",
 					get children() {

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

@@ -1 +1 @@
-{"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","For","Show","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","AccentChoices","custom","accent","accentOptions","some","id","accentSelection","customAccentValue","_el$3","_tmpl$3","_$effect","_$p","_$setStyleProperty","resolvedAppearance","_el$4","_tmpl$4","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo","_$setStyleProperty"],"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 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\n\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\nexport function AccentChoices(props: AppearanceEditorProps) {\n  const custom = () =>\n    props.draft.accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === props.draft.accent)\n  const accentSelection = () => (custom() ? '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-wrap items-center gap-2\"\n      onChange={(accent) =>\n        props.onChange({\n          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n        })\n      }\n    >\n      <Radio.Item value=\"theme\">\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\">\n          Theme default\n        </Radio.ItemLabel>\n      </Radio.Item>\n      <For each={props.accentOptions}>\n        {(option) => (\n          <Radio.Item\n            value={option.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={{\n                  'background-color':\n                    (props.draft.mode === 'system'\n                      ? props.resolvedAppearance\n                      : props.draft.mode) === 'light'\n                      ? option.light\n                      : option.dark,\n                }}\n              />\n              <span class=\"sr-only\">{option.label}</span>\n            </Radio.ItemLabel>\n          </Radio.Item>\n        )}\n      </For>\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 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n          Custom\n        </Radio.ItemLabel>\n      </Radio.Item>\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","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","AccentChoices","custom","accent","accentOptions","some","id","accentSelection","customAccentValue","_el$3","_tmpl$3","_el$4","_tmpl$4","_$effect","_$p","_$setStyleProperty","resolvedAppearance","_el$5","_tmpl$5","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo","_$setStyleProperty"],"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 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\n\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\nexport function AccentChoices(props: AppearanceEditorProps) {\n  const custom = () =>\n    props.draft.accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === props.draft.accent)\n  const accentSelection = () => (custom() ? 'custom' : props.draft.accent)\n  return (\n    <Radio\n      value={accentSelection()}\n      disabled={props.saving}\n      orientation=\"horizontal\"\n      aria-label=\"Accent\"\n      /* Narrow hosts wrap the swatches into a three-column grid so the row\n         control stays beside its label; wide hosts keep one inline row. */\n      class=\"grid grid-cols-3 items-center gap-2 sm:flex sm:flex-wrap sm:justify-end\"\n      onChange={(accent) =>\n        props.onChange({\n          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n        })\n      }\n    >\n      <Radio.Item value=\"theme\">\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\">\n          Theme default\n        </Radio.ItemLabel>\n      </Radio.Item>\n      <div class=\"col-span-3 grid grid-cols-3 gap-2 sm:col-span-1 sm:flex sm:gap-2\">\n        <For each={props.accentOptions}>\n          {(option) => (\n            <Radio.Item\n              value={option.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={{\n                    'background-color':\n                      (props.draft.mode === 'system'\n                        ? props.resolvedAppearance\n                        : props.draft.mode) === 'light'\n                        ? option.light\n                        : option.dark,\n                  }}\n                />\n                <span class=\"sr-only\">{option.label}</span>\n              </Radio.ItemLabel>\n            </Radio.Item>\n          )}\n        </For>\n      </div>\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 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n          Custom\n        </Radio.ItemLabel>\n      </Radio.Item>\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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"appearance-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-editor.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAIvF;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kCAqJ5D;AAED;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kCAyB9D"}
+{"version":3,"file":"appearance-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-editor.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAIvF;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kCAmJ5D;AAED;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kCAyB9D"}

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

@@ -14,7 +14,7 @@ var _tmpl$2 = /*#__PURE__*/ template(`<p role=alert class="mt-1 text-xs text-for
 var _tmpl$3 = /*#__PURE__*/ template(`<div class="px-4 py-3"><label class="mb-2 block text-xs font-medium">Custom accent`);
 var _tmpl$4 = /*#__PURE__*/ template(`<p role=status class="px-4 py-2 text-xs text-muted-foreground">`);
 var _tmpl$5 = /*#__PURE__*/ template(`<p role=status class="px-4 pt-3 text-xs text-muted-foreground">`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div data-appearance-editor><div class="divide-y divide-border rounded-lg border"></div><div class="flex flex-wrap items-center gap-2 px-4 py-4"><div class="ml-auto flex gap-2">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<div data-appearance-editor><div class="divide-y divide-border rounded-lg border"></div><div class="sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3"><div class="ml-auto flex gap-2">`);
 /**
 * A live editor whose persistence and preview authority belong to its host.
 * No ThemeProvider is required, and no catalogue, renderer engine or storage is
@@ -78,7 +78,6 @@ function AppearanceEditor(props) {
 			onSelect: (darkThemeId) => props.onChange({ darkThemeId })
 		}), null);
 		insert(_el$3, createComponent(SettingsRow, {
-			stacked: true,
 			title: "Accent",
 			get icon() {
 				return createComponent(SlidersHorizontal, {});

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

@@ -1 +1 @@
-{"version":3,"file":"appearance-editor.js","names":["EyeOff","Palette","PanelsTopLeft","SlidersHorizontal","Show","createUniqueId","cn","Button","Input","Switch","Popover","PopoverContent","PopoverDescription","PopoverTitle","PopoverTrigger","AppearanceEditorProps","AppearancePopoverProps","ModeChoices","AccentChoices","GlassChoices","SettingsRow","ThemeRow","AppearanceEditor","props","errorId","saveReasonId","custom","draft","accent","accentOptions","some","option","id","accentDescription","name","find","label","glassDescription","surface","surfaceCapability","themeDefaultDescription","_el$","_tmpl$6","_el$3","firstChild","_el$9","nextSibling","_el$0","_$insert","_$createComponent","when","recoveryNotice","children","_el$2","_tmpl$","appearance","selectedId","lightThemeId","preview","lightTheme","themes","disabled","saving","onSelect","onChange","darkThemeId","darkTheme","stacked","title","icon","description","_el$4","_tmpl$3","_el$5","_$setAttribute","value","aria-invalid","customAccentError","aria-describedby","undefined","onInput","event","currentTarget","_el$6","_tmpl$2","_$memo","frosted","reason","_el$7","_tmpl$4","checked","reduceTransparency","onManageThemes","type","size","variant","onClick","saveDisabledReason","_el$8","_tmpl$5","onReset","onCancel","aria-busy","onSave","_$effect","_$className","class","AppearancePopover","open","modal","onOpenChange","onOpen","onDismiss","as","_$createComponent","_$memo","_$className"],"sources":["../../../../src/components/composites/appearance-editor/appearance-editor.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 * Composition substantially translated from Zeron settings/appearance.rs and\n * settings/widgets.rs, pinned at 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59,\n * preserving Adea's existing appearance-surface.tsx port: System/Light/Dark\n * miniatures, compact independent theme rows, accent swatches and helper copy,\n * glass chips, and theme library affordance. Kobalte replaces the port's manual\n * radio keyboard model. The controlled draft and explicit action ports replace\n * GPUI globals and app-specific storage/native authority. Save/Cancel/Reset and\n * custom accent/reduced-transparency are accepted Adea divergences (#425).\n */\nimport { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from 'lucide-solid'\nimport { Show, createUniqueId } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button/button'\nimport { Input } from '../../ui/input/input'\n\nimport { Switch } from '../../ui/switch/switch'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverTitle,\n  PopoverTrigger,\n} from '../../ui/popover/popover'\nimport type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'\nimport { ModeChoices, AccentChoices, GlassChoices } from './appearance-choices'\nimport { SettingsRow, ThemeRow } from './appearance-rows'\n\n/**\n * A live editor whose persistence and preview authority belong to its host.\n * No ThemeProvider is required, and no catalogue, renderer engine or storage is\n * imported. Hosts normalize unknown IDs and custom colors, report recovery,\n * snapshot on open, preview on changes, commit on Save, and restore on dismissal.\n * Both theme rows remain mounted when mode changes. Typeface/density axes are\n * deliberately absent from Adea #425's accepted surface.\n */\nexport function AppearanceEditor(props: AppearanceEditorProps) {\n  const errorId = createUniqueId()\n  const saveReasonId = createUniqueId()\n  const custom = () =>\n    props.draft.accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === props.draft.accent)\n  const accentDescription = () => {\n    if (props.draft.accent === 'theme') return \"Theme default · Uses the palette's intended color.\"\n    const name = props.accentOptions.find((option) => option.id === props.draft.accent)?.label\n    return `${name ?? 'Custom'} · Controls, glyphs, selections, code, and activity.`\n  }\n  const glassDescription = () =>\n    props.draft.surface === 'opaque'\n      ? 'Solid surfaces for every theme.'\n      : props.draft.surface === 'frosted'\n        ? 'Theme-colored glass where supported.'\n        : (props.surfaceCapability.themeDefaultDescription ?? \"Uses this theme's default surface.\")\n  return (\n    <div data-appearance-editor class={cn('min-w-0', props.class)}>\n      <Show when={props.recoveryNotice}>\n        <p role=\"status\" class=\"px-4 py-2 text-sm text-muted-foreground\">\n          {props.recoveryNotice}\n        </p>\n      </Show>\n      <ModeChoices {...props} />\n      <div class=\"divide-y divide-border rounded-lg border\">\n        <ThemeRow\n          appearance=\"light\"\n          selectedId={props.draft.lightThemeId}\n          preview={props.lightTheme}\n          themes={props.themes}\n          disabled={props.saving}\n          onSelect={(lightThemeId) => props.onChange({ lightThemeId })}\n        />\n        <ThemeRow\n          appearance=\"dark\"\n          selectedId={props.draft.darkThemeId}\n          preview={props.darkTheme}\n          themes={props.themes}\n          disabled={props.saving}\n          onSelect={(darkThemeId) => props.onChange({ darkThemeId })}\n        />\n        <SettingsRow\n          stacked\n          title=\"Accent\"\n          icon={<SlidersHorizontal />}\n          description={accentDescription()}\n        >\n          <AccentChoices {...props} />\n        </SettingsRow>\n        <Show when={custom()}>\n          <div class=\"px-4 py-3\">\n            <label class=\"mb-2 block text-xs font-medium\" for={`${errorId}-input`}>\n              Custom accent\n            </label>\n            <Input\n              id={`${errorId}-input`}\n              value={props.draft.accent}\n              disabled={props.saving}\n              aria-invalid={!!props.customAccentError}\n              aria-describedby={props.customAccentError ? errorId : undefined}\n              onInput={(event) => props.onChange({ accent: event.currentTarget.value })}\n            />\n            <Show when={props.customAccentError}>\n              <p id={errorId} role=\"alert\" class=\"mt-1 text-xs text-foreground\">\n                {props.customAccentError}\n              </p>\n            </Show>\n          </div>\n        </Show>\n        <SettingsRow title=\"Glass\" icon={<PanelsTopLeft />} description={glassDescription()}>\n          <GlassChoices {...props} />\n        </SettingsRow>\n        <Show when={!props.surfaceCapability.frosted && props.surfaceCapability.reason}>\n          <p role=\"status\" class=\"px-4 py-2 text-xs text-muted-foreground\">\n            {props.surfaceCapability.reason}\n          </p>\n        </Show>\n        <SettingsRow\n          title=\"Reduce transparency\"\n          icon={<EyeOff />}\n          description=\"Prefer solid surfaces, including during live preview.\"\n        >\n          <Switch\n            checked={props.draft.reduceTransparency}\n            disabled={props.saving}\n            onChange={(reduceTransparency: boolean) => props.onChange({ reduceTransparency })}\n            aria-label=\"Reduce transparency\"\n          />\n        </SettingsRow>\n        <SettingsRow\n          title=\"Theme library\"\n          icon={<Palette />}\n          description={\n            props.onManageThemes\n              ? 'Manage themes through the application.'\n              : 'Theme import is unavailable.'\n          }\n        >\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={!props.onManageThemes || props.saving}\n            onClick={() => props.onManageThemes?.()}\n          >\n            Manage themes\n          </Button>\n        </SettingsRow>\n      </div>\n      <Show when={props.saveDisabledReason}>\n        <p id={saveReasonId} role=\"status\" class=\"px-4 pt-3 text-xs text-muted-foreground\">\n          {props.saveDisabledReason}\n        </p>\n      </Show>\n      <div class=\"flex flex-wrap items-center gap-2 px-4 py-4\">\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={props.saving}\n          onClick={() => props.onReset()}\n        >\n          Reset\n        </Button>\n        <div class=\"ml-auto flex gap-2\">\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={props.saving}\n            onClick={() => props.onCancel()}\n          >\n            Cancel\n          </Button>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={props.saving || !!props.customAccentError || !!props.saveDisabledReason}\n            aria-busy={props.saving}\n            aria-describedby={props.saveDisabledReason ? saveReasonId : undefined}\n            onClick={() => props.onSave()}\n          >\n            {props.saving ? 'Saving…' : 'Save'}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/** Modal anchoring/dismissal and nested-menu behavior come from Kobalte.\n * Its measured available height also bounds scrolling, keeping footer actions\n * reachable when a narrow popup begins below its trigger. */\nexport function AppearancePopover(props: AppearancePopoverProps) {\n  return (\n    <Popover\n      open={props.open}\n      modal\n      onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}\n    >\n      <PopoverTrigger\n        as={Button}\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        aria-label=\"Appearance settings\"\n      >\n        <Palette />\n      </PopoverTrigger>\n      <PopoverContent class=\"w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto\">\n        <PopoverTitle>Appearance</PopoverTitle>\n        <PopoverDescription>\n          Changes preview immediately. Save keeps them; Cancel restores the previous appearance.\n        </PopoverDescription>\n        <AppearanceEditor {...props} />\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"appearance-editor.js","names":["EyeOff","Palette","PanelsTopLeft","SlidersHorizontal","Show","createUniqueId","cn","Button","Input","Switch","Popover","PopoverContent","PopoverDescription","PopoverTitle","PopoverTrigger","AppearanceEditorProps","AppearancePopoverProps","ModeChoices","AccentChoices","GlassChoices","SettingsRow","ThemeRow","AppearanceEditor","props","errorId","saveReasonId","custom","draft","accent","accentOptions","some","option","id","accentDescription","name","find","label","glassDescription","surface","surfaceCapability","themeDefaultDescription","_el$","_tmpl$6","_el$3","firstChild","_el$9","nextSibling","_el$0","_$insert","_$createComponent","when","recoveryNotice","children","_el$2","_tmpl$","appearance","selectedId","lightThemeId","preview","lightTheme","themes","disabled","saving","onSelect","onChange","darkThemeId","darkTheme","title","icon","description","_el$4","_tmpl$3","_el$5","_$setAttribute","value","aria-invalid","customAccentError","aria-describedby","undefined","onInput","event","currentTarget","_el$6","_tmpl$2","_$memo","frosted","reason","_el$7","_tmpl$4","checked","reduceTransparency","onManageThemes","type","size","variant","onClick","saveDisabledReason","_el$8","_tmpl$5","onReset","onCancel","aria-busy","onSave","_$effect","_$className","class","AppearancePopover","open","modal","onOpenChange","onOpen","onDismiss","as","_$createComponent","_$memo","_$className"],"sources":["../../../../src/components/composites/appearance-editor/appearance-editor.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 * Composition substantially translated from Zeron settings/appearance.rs and\n * settings/widgets.rs, pinned at 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59,\n * preserving Adea's existing appearance-surface.tsx port: System/Light/Dark\n * miniatures, compact independent theme rows, accent swatches and helper copy,\n * glass chips, and theme library affordance. Kobalte replaces the port's manual\n * radio keyboard model. The controlled draft and explicit action ports replace\n * GPUI globals and app-specific storage/native authority. Save/Cancel/Reset and\n * custom accent/reduced-transparency are accepted Adea divergences (#425).\n */\nimport { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from 'lucide-solid'\nimport { Show, createUniqueId } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button/button'\nimport { Input } from '../../ui/input/input'\n\nimport { Switch } from '../../ui/switch/switch'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverTitle,\n  PopoverTrigger,\n} from '../../ui/popover/popover'\nimport type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'\nimport { ModeChoices, AccentChoices, GlassChoices } from './appearance-choices'\nimport { SettingsRow, ThemeRow } from './appearance-rows'\n\n/**\n * A live editor whose persistence and preview authority belong to its host.\n * No ThemeProvider is required, and no catalogue, renderer engine or storage is\n * imported. Hosts normalize unknown IDs and custom colors, report recovery,\n * snapshot on open, preview on changes, commit on Save, and restore on dismissal.\n * Both theme rows remain mounted when mode changes. Typeface/density axes are\n * deliberately absent from Adea #425's accepted surface.\n */\nexport function AppearanceEditor(props: AppearanceEditorProps) {\n  const errorId = createUniqueId()\n  const saveReasonId = createUniqueId()\n  const custom = () =>\n    props.draft.accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === props.draft.accent)\n  const accentDescription = () => {\n    if (props.draft.accent === 'theme') return \"Theme default · Uses the palette's intended color.\"\n    const name = props.accentOptions.find((option) => option.id === props.draft.accent)?.label\n    return `${name ?? 'Custom'} · Controls, glyphs, selections, code, and activity.`\n  }\n  const glassDescription = () =>\n    props.draft.surface === 'opaque'\n      ? 'Solid surfaces for every theme.'\n      : props.draft.surface === 'frosted'\n        ? 'Theme-colored glass where supported.'\n        : (props.surfaceCapability.themeDefaultDescription ?? \"Uses this theme's default surface.\")\n  return (\n    <div data-appearance-editor class={cn('min-w-0', props.class)}>\n      <Show when={props.recoveryNotice}>\n        <p role=\"status\" class=\"px-4 py-2 text-sm text-muted-foreground\">\n          {props.recoveryNotice}\n        </p>\n      </Show>\n      <ModeChoices {...props} />\n      <div class=\"divide-y divide-border rounded-lg border\">\n        <ThemeRow\n          appearance=\"light\"\n          selectedId={props.draft.lightThemeId}\n          preview={props.lightTheme}\n          themes={props.themes}\n          disabled={props.saving}\n          onSelect={(lightThemeId) => props.onChange({ lightThemeId })}\n        />\n        <ThemeRow\n          appearance=\"dark\"\n          selectedId={props.draft.darkThemeId}\n          preview={props.darkTheme}\n          themes={props.themes}\n          disabled={props.saving}\n          onSelect={(darkThemeId) => props.onChange({ darkThemeId })}\n        />\n        <SettingsRow title=\"Accent\" icon={<SlidersHorizontal />} description={accentDescription()}>\n          <AccentChoices {...props} />\n        </SettingsRow>\n        <Show when={custom()}>\n          <div class=\"px-4 py-3\">\n            <label class=\"mb-2 block text-xs font-medium\" for={`${errorId}-input`}>\n              Custom accent\n            </label>\n            <Input\n              id={`${errorId}-input`}\n              value={props.draft.accent}\n              disabled={props.saving}\n              aria-invalid={!!props.customAccentError}\n              aria-describedby={props.customAccentError ? errorId : undefined}\n              onInput={(event) => props.onChange({ accent: event.currentTarget.value })}\n            />\n            <Show when={props.customAccentError}>\n              <p id={errorId} role=\"alert\" class=\"mt-1 text-xs text-foreground\">\n                {props.customAccentError}\n              </p>\n            </Show>\n          </div>\n        </Show>\n        <SettingsRow title=\"Glass\" icon={<PanelsTopLeft />} description={glassDescription()}>\n          <GlassChoices {...props} />\n        </SettingsRow>\n        <Show when={!props.surfaceCapability.frosted && props.surfaceCapability.reason}>\n          <p role=\"status\" class=\"px-4 py-2 text-xs text-muted-foreground\">\n            {props.surfaceCapability.reason}\n          </p>\n        </Show>\n        <SettingsRow\n          title=\"Reduce transparency\"\n          icon={<EyeOff />}\n          description=\"Prefer solid surfaces, including during live preview.\"\n        >\n          <Switch\n            checked={props.draft.reduceTransparency}\n            disabled={props.saving}\n            onChange={(reduceTransparency: boolean) => props.onChange({ reduceTransparency })}\n            aria-label=\"Reduce transparency\"\n          />\n        </SettingsRow>\n        <SettingsRow\n          title=\"Theme library\"\n          icon={<Palette />}\n          description={\n            props.onManageThemes\n              ? 'Manage themes through the application.'\n              : 'Theme import is unavailable.'\n          }\n        >\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={!props.onManageThemes || props.saving}\n            onClick={() => props.onManageThemes?.()}\n          >\n            Manage themes\n          </Button>\n        </SettingsRow>\n      </div>\n      <Show when={props.saveDisabledReason}>\n        <p id={saveReasonId} role=\"status\" class=\"px-4 pt-3 text-xs text-muted-foreground\">\n          {props.saveDisabledReason}\n        </p>\n      </Show>\n      {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the\n          editor scrolls with its host panel, and actions parked at the bottom\n          of a long form were unreachable without scrolling past every row. */}\n      <div class=\"sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3\">\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={props.saving}\n          onClick={() => props.onReset()}\n        >\n          Reset\n        </Button>\n        <div class=\"ml-auto flex gap-2\">\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={props.saving}\n            onClick={() => props.onCancel()}\n          >\n            Cancel\n          </Button>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={props.saving || !!props.customAccentError || !!props.saveDisabledReason}\n            aria-busy={props.saving}\n            aria-describedby={props.saveDisabledReason ? saveReasonId : undefined}\n            onClick={() => props.onSave()}\n          >\n            {props.saving ? 'Saving…' : 'Save'}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/** Modal anchoring/dismissal and nested-menu behavior come from Kobalte.\n * Its measured available height also bounds scrolling, keeping footer actions\n * reachable when a narrow popup begins below its trigger. */\nexport function AppearancePopover(props: AppearancePopoverProps) {\n  return (\n    <Popover\n      open={props.open}\n      modal\n      onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}\n    >\n      <PopoverTrigger\n        as={Button}\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        aria-label=\"Appearance settings\"\n      >\n        <Palette />\n      </PopoverTrigger>\n      <PopoverContent class=\"w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto\">\n        <PopoverTitle>Appearance</PopoverTitle>\n        <PopoverDescription>\n          Changes preview immediately. Save keeps them; Cancel restores the previous appearance.\n        </PopoverDescription>\n        <AppearanceEditor {...props} />\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":"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"}

package/dist/r/appearance-editor.json

@@ -4,7 +4,7 @@
   "title": "Appearance Editor",
   "description": "",
   "dependencies": [
-    "@adea-ai/themes@^0.6.2",
+    "@adea-ai/themes@^0.7.0",
     "@kobalte/core@^0.13.14",
     "lucide-solid@^1.48.0"
   ],

package/dist/r/lib.json

@@ -4,7 +4,7 @@
   "title": "Class-name and token helpers",
   "description": "The private helpers the components import: the class-name merge, the variant recipes, the token manifest and the theme bridge. Installed automatically as a peer of any component that needs it.",
   "dependencies": [
-    "@adea-ai/themes@^0.6.2",
+    "@adea-ai/themes@^0.7.0",
     "class-variance-authority@^0.7.1",
     "cn@^0.4.0"
   ],

package/dist/r/registry.json

@@ -1670,7 +1670,7 @@
       "title": "Appearance Editor",
       "description": "",
       "dependencies": [
-        "@adea-ai/themes@^0.6.2",
+        "@adea-ai/themes@^0.7.0",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.48.0"
       ],
@@ -2064,7 +2064,7 @@
       "title": "Class-name and token helpers",
       "description": "The private helpers the components import: the class-name merge, the variant recipes, the token manifest and the theme bridge. Installed automatically as a peer of any component that needs it.",
       "dependencies": [
-        "@adea-ai/themes@^0.6.2",
+        "@adea-ai/themes@^0.7.0",
         "class-variance-authority@^0.7.1",
         "cn@^0.4.0"
       ],

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

@@ -93,7 +93,9 @@ export function AccentChoices(props: AppearanceEditorProps) {
       disabled={props.saving}
       orientation="horizontal"
       aria-label="Accent"
-      class="flex flex-wrap items-center gap-2"
+      /* Narrow hosts wrap the swatches into a three-column grid so the row
+         control stays beside its label; wide hosts keep one inline row. */
+      class="grid grid-cols-3 items-center gap-2 sm:flex sm:flex-wrap sm:justify-end"
       onChange={(accent) =>
         props.onChange({
           accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
@@ -106,31 +108,33 @@ export function AccentChoices(props: AppearanceEditorProps) {
           Theme default
         </Radio.ItemLabel>
       </Radio.Item>
-      <For each={props.accentOptions}>
-        {(option) => (
-          <Radio.Item
-            value={option.id}
-            class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
-          >
-            <Radio.ItemInput />
-            <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">
-              <span
-                class="block size-full rounded-full"
-                aria-hidden="true"
-                style={{
-                  'background-color':
-                    (props.draft.mode === 'system'
-                      ? props.resolvedAppearance
-                      : props.draft.mode) === 'light'
-                      ? option.light
-                      : option.dark,
-                }}
-              />
-              <span class="sr-only">{option.label}</span>
-            </Radio.ItemLabel>
-          </Radio.Item>
-        )}
-      </For>
+      <div class="col-span-3 grid grid-cols-3 gap-2 sm:col-span-1 sm:flex sm:gap-2">
+        <For each={props.accentOptions}>
+          {(option) => (
+            <Radio.Item
+              value={option.id}
+              class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
+            >
+              <Radio.ItemInput />
+              <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">
+                <span
+                  class="block size-full rounded-full"
+                  aria-hidden="true"
+                  style={{
+                    'background-color':
+                      (props.draft.mode === 'system'
+                        ? props.resolvedAppearance
+                        : props.draft.mode) === 'light'
+                        ? option.light
+                        : option.dark,
+                  }}
+                />
+                <span class="sr-only">{option.label}</span>
+              </Radio.ItemLabel>
+            </Radio.Item>
+          )}
+        </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">

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

@@ -99,12 +99,7 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           disabled={props.saving}
           onSelect={(darkThemeId) => props.onChange({ darkThemeId })}
         />
-        <SettingsRow
-          stacked
-          title="Accent"
-          icon={<SlidersHorizontal />}
-          description={accentDescription()}
-        >
+        <SettingsRow title="Accent" icon={<SlidersHorizontal />} description={accentDescription()}>
           <AccentChoices {...props} />
         </SettingsRow>
         <Show when={custom()}>
@@ -172,7 +167,10 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           {props.saveDisabledReason}
         </p>
       </Show>
-      <div class="flex flex-wrap items-center gap-2 px-4 py-4">
+      {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
+          editor scrolls with its host panel, and actions parked at the bottom
+          of a long form were unreachable without scrolling past every row. */}
+      <div class="sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3">
         <Button
           type="button"
           size="sm"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.74.0",
+  "version": "0.75.1",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",
@@ -106,7 +106,7 @@
     "check:packed-paste-model": "node scripts/check-packed-paste-model.mjs"
   },
   "dependencies": {
-    "@adea-ai/themes": "^0.6.2",
+    "@adea-ai/themes": "^0.7.0",
     "@corvu/calendar": "^0.1.2",
     "@corvu/drawer": "^0.2.4",
     "@corvu/otp-field": "^0.1.4",

package/registry.json

@@ -1670,7 +1670,7 @@
       "title": "Appearance Editor",
       "description": "",
       "dependencies": [
-        "@adea-ai/themes@^0.6.2",
+        "@adea-ai/themes@^0.7.0",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.48.0"
       ],
@@ -2064,7 +2064,7 @@
       "title": "Class-name and token helpers",
       "description": "The private helpers the components import: the class-name merge, the variant recipes, the token manifest and the theme bridge. Installed automatically as a peer of any component that needs it.",
       "dependencies": [
-        "@adea-ai/themes@^0.6.2",
+        "@adea-ai/themes@^0.7.0",
         "class-variance-authority@^0.7.1",
         "cn@^0.4.0"
       ],

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

@@ -93,7 +93,9 @@ export function AccentChoices(props: AppearanceEditorProps) {
       disabled={props.saving}
       orientation="horizontal"
       aria-label="Accent"
-      class="flex flex-wrap items-center gap-2"
+      /* Narrow hosts wrap the swatches into a three-column grid so the row
+         control stays beside its label; wide hosts keep one inline row. */
+      class="grid grid-cols-3 items-center gap-2 sm:flex sm:flex-wrap sm:justify-end"
       onChange={(accent) =>
         props.onChange({
           accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
@@ -106,31 +108,33 @@ export function AccentChoices(props: AppearanceEditorProps) {
           Theme default
         </Radio.ItemLabel>
       </Radio.Item>
-      <For each={props.accentOptions}>
-        {(option) => (
-          <Radio.Item
-            value={option.id}
-            class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
-          >
-            <Radio.ItemInput />
-            <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">
-              <span
-                class="block size-full rounded-full"
-                aria-hidden="true"
-                style={{
-                  'background-color':
-                    (props.draft.mode === 'system'
-                      ? props.resolvedAppearance
-                      : props.draft.mode) === 'light'
-                      ? option.light
-                      : option.dark,
-                }}
-              />
-              <span class="sr-only">{option.label}</span>
-            </Radio.ItemLabel>
-          </Radio.Item>
-        )}
-      </For>
+      <div class="col-span-3 grid grid-cols-3 gap-2 sm:col-span-1 sm:flex sm:gap-2">
+        <For each={props.accentOptions}>
+          {(option) => (
+            <Radio.Item
+              value={option.id}
+              class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
+            >
+              <Radio.ItemInput />
+              <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">
+                <span
+                  class="block size-full rounded-full"
+                  aria-hidden="true"
+                  style={{
+                    'background-color':
+                      (props.draft.mode === 'system'
+                        ? props.resolvedAppearance
+                        : props.draft.mode) === 'light'
+                        ? option.light
+                        : option.dark,
+                  }}
+                />
+                <span class="sr-only">{option.label}</span>
+              </Radio.ItemLabel>
+            </Radio.Item>
+          )}
+        </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">

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

@@ -99,12 +99,7 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           disabled={props.saving}
           onSelect={(darkThemeId) => props.onChange({ darkThemeId })}
         />
-        <SettingsRow
-          stacked
-          title="Accent"
-          icon={<SlidersHorizontal />}
-          description={accentDescription()}
-        >
+        <SettingsRow title="Accent" icon={<SlidersHorizontal />} description={accentDescription()}>
           <AccentChoices {...props} />
         </SettingsRow>
         <Show when={custom()}>
@@ -172,7 +167,10 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
           {props.saveDisabledReason}
         </p>
       </Show>
-      <div class="flex flex-wrap items-center gap-2 px-4 py-4">
+      {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
+          editor scrolls with its host panel, and actions parked at the bottom
+          of a long form were unreachable without scrolling past every row. */}
+      <div class="sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3">
         <Button
           type="button"
           size="sm"