@adea-ai/ui 0.62.0 → 0.63.1

package/README.md

@@ -156,3 +156,53 @@ one theme.
 ## Licence
 
 Apache-2.0.
+
+### Controlled appearance editor
+
+`AppearanceEditor` and `AppearancePopover` retain the accepted Zeron-derived
+System/Light/Dark miniature cards, independent light/dark theme rows, palette
+swatches, default/preset/custom accent choices and Theme default/Frosted/Opaque
+surface choices. The popup supports live host preview and Save/Cancel/Reset;
+Kobalte owns radio, menu, focus and dismissal behavior. `SelectContent.portalMount`
+lets a nested menu remain within its enclosing modal's accessible subtree.
+
+Supply canonical `AdeaTheme` previews and `AdeaThemeRecord` choices from
+`@adea-ai/themes`, including any validated accent overlay. The editor imports
+only their types. Hosts own saved-ID recovery, validation, draft snapshots,
+System appearance resolution, native transparency, live application tokens,
+Save persistence and restoration on Cancel/dismissal. `saving`,
+`saveDisabledReason`, `recoveryNotice`, `customAccentError`, and
+`surfaceCapability` expose those outcomes; an unavailable import or Frosted
+capability stays visibly unavailable. App-specific persisted versions and the
+legacy `translucent` value need an app-owned adapter to the editor's `theme`
+surface selection. The library does not silently migrate stored preferences.
+
+The component browser lane uses a real Vite/Solid/Tailwind build in headless
+Chromium without an app server. It checks keyboard mode selection, nested menu
+accessibility and Escape, live-preview rollback, valid/invalid custom accents,
+Save pending state, mobile selection and 320/768/1024/1440px layouts. A separate native Node server-render fixture verifies the composed editor without
+browser or application globals. These checks
+are component integration evidence; they do not certify application persistence,
+native effects, packaged applications or manual assistive technology acceptance.
+
+### Packed appearance contract
+
+`bun run check:packed-appearance` installs the actual tarball without optional
+Chart/Carousel engines, then reuses all appearance interactions in Chromium and
+WebKit against compiled and Solid entries (60 cases). The same fixture verifies
+Solid source SSR in native Node. Keyboard choices, live preview, save/cancel/reset,
+nested dismissal, validation, pending save, narrow layouts with reachable footer actions, and automated accessibility
+are covered. Production persistence, native transparency, hydration and manual AT
+remain application acceptance gates.
+
+The disposable host explicitly imports four isolated canonical theme records plus
+color/CSS adapters from published `@adea-ai/themes`; the UI composition imports only
+theme types. Both conditions retain one Solid runtime and one JS chunk, external CSS,
+no fonts or unrelated engines, and full donor attribution. The combined host/editor
+budgets are 64 KiB gzip JS and 50 KiB raw CSS; measured baselines are 62,203/62,643
+gzip JS bytes and 50,060 raw CSS bytes with complete discovery of nested controls and shared helpers. This includes host theme-preview behavior,
+not just the editor primitive.
+
+Local packed interaction gates require `bunx playwright install chromium webkit`
+after dependency installation. On Linux, use `--with-deps` when the required
+system libraries are absent. All automation runs headless with disposable profiles.

package/dist/NOTICE

@@ -48,3 +48,54 @@ shadcn-storybook-template (MIT), Kibo UI (MIT), and Dice UI (MIT) projects.
 Origin UI / coss (AGPL-3.0-or-later) was consulted for visual ideas only. No
 code, class string, or asset from that project is reproduced here, because its
 licence is incompatible with this distribution.
+
+## Appearance editor translated from Zeron
+
+The System/Light/Dark miniature composition, palette bands, theme selectors,
+compact divided settings rows, accent helper and surface helper treatment in
+`packages/ui/src/components/composites/appearance-editor/` are substantially
+translated from Zeron (https://github.com/zeronsh/zeron), pinned at:
+
+    30a9a9537c5ec96226c87f4bf349b6f77c5dfb59
+    crates/ui/src/settings/appearance.rs
+    crates/ui/src/settings/widgets.rs
+
+This preserves Adea's previously accepted Zeron port. Rust/GPUI rendering is
+re-expressed in Solid and Kobalte with semantic design-system tokens and palettes
+supplied by the host from @adea-ai/themes. The library imports theme types only;
+it does not acquire GPUI, global theme storage, normalization or native effects.
+Save/Cancel/Reset, custom accent validation, reduced transparency and capability
+reporting preserve accepted Adea issue #425 amendments. Typeface controls are
+outside that accepted surface. The accent row stacks to retain readable helper
+copy in a narrow popup; both theme selectors remain independently visible.
+
+Relevant donor tests for three mode cards, both appearance catalogues, and accent
+and surface helper copy are translated into browser assertions alongside
+keyboard, nested-menu, snapshot, pending-save and responsive accessibility checks.
+Font-specific donor tests are excluded with the corresponding controls. Catalogue
+counts are host data, so tests retain both appearance lanes without hard-coding
+Zeron's catalogue sizes.
+
+Zeron's MIT notice applies to the translated portions:
+
+MIT License
+
+Copyright (c) 2026 Wing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,5 @@
+import type { AppearanceEditorProps } from './appearance-types';
+export declare function ModeChoices(props: AppearanceEditorProps): import("solid-js").JSX.Element;
+export declare function AccentChoices(props: AppearanceEditorProps): import("solid-js").JSX.Element;
+export declare function GlassChoices(props: AppearanceEditorProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=appearance-choices.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,211 @@
+import { ThemeMiniature, ThemeMiniatureSplit } from "./theme-preview.js";
+import { createComponent, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
+import { For, Show } from "solid-js";
+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 MODES = [
+	{
+		value: "system",
+		label: "System"
+	},
+	{
+		value: "light",
+		label: "Light"
+	},
+	{
+		value: "dark",
+		label: "Dark"
+	}
+];
+var SURFACES = [
+	{
+		value: "theme",
+		label: "Theme default"
+	},
+	{
+		value: "frosted",
+		label: "Frosted"
+	},
+	{
+		value: "opaque",
+		label: "Opaque"
+	}
+];
+function ModeChoices(props) {
+	return createComponent(RadioGroup, {
+		get value() {
+			return props.draft.mode;
+		},
+		get disabled() {
+			return props.saving;
+		},
+		orientation: "horizontal",
+		"aria-label": "Appearance mode",
+		onChange: (mode) => {
+			const option = MODES.find((candidate) => candidate.value === mode);
+			if (option) props.onChange({ mode: option.value });
+		},
+		"class": "grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3",
+		get children() {
+			return createComponent(For, {
+				each: MODES,
+				children: (option) => createComponent(RadioGroup.Item, {
+					get value() {
+						return option.value;
+					},
+					get ["data-mode"]() {
+						return option.value;
+					},
+					"class": "min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50",
+					get children() {
+						return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
+							get children() {
+								return [(() => {
+									var _el$ = _tmpl$();
+									insert(_el$, createComponent(Show, {
+										get when() {
+											return option.value === "system";
+										},
+										get fallback() {
+											return createComponent(ThemeMiniature, { get theme() {
+												return memo(() => option.value === "light")() ? props.lightTheme : props.darkTheme;
+											} });
+										},
+										get children() {
+											return createComponent(ThemeMiniatureSplit, {
+												get light() {
+													return props.lightTheme;
+												},
+												get dark() {
+													return props.darkTheme;
+												}
+											});
+										}
+									}));
+									return _el$;
+								})(), (() => {
+									var _el$2 = _tmpl$2();
+									insert(_el$2, () => option.label);
+									return _el$2;
+								})()];
+							}
+						})];
+					}
+				})
+			});
+		}
+	});
+}
+function AccentChoices(props) {
+	const custom = () => props.draft.accent !== "theme" && !props.accentOptions.some((option) => option.id === props.draft.accent);
+	const accentSelection = () => custom() ? "custom" : props.draft.accent;
+	return createComponent(RadioGroup, {
+		get value() {
+			return accentSelection();
+		},
+		get disabled() {
+			return props.saving;
+		},
+		orientation: "horizontal",
+		"aria-label": "Accent",
+		"class": "flex flex-wrap items-center gap-2",
+		onChange: (accent) => props.onChange({ accent: accent === "custom" ? props.customAccentValue ?? "" : accent }),
+		get children() {
+			return [
+				createComponent(RadioGroup.Item, {
+					value: "theme",
+					get children() {
+						return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
+							children: "Theme default"
+						})];
+					}
+				}),
+				createComponent(For, {
+					get each() {
+						return props.accentOptions;
+					},
+					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$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;
+									})()];
+								}
+							})];
+						}
+					})
+				}),
+				createComponent(RadioGroup.Item, {
+					value: "custom",
+					get children() {
+						return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
+							children: "Custom"
+						})];
+					}
+				})
+			];
+		}
+	});
+}
+function GlassChoices(props) {
+	return createComponent(RadioGroup, {
+		get value() {
+			return props.draft.surface;
+		},
+		get disabled() {
+			return props.saving;
+		},
+		orientation: "horizontal",
+		"aria-label": "Glass",
+		"class": "flex flex-wrap gap-1",
+		onChange: (surface) => {
+			const option = SURFACES.find((candidate) => candidate.value === surface);
+			if (option) props.onChange({ surface: option.value });
+		},
+		get children() {
+			return createComponent(For, {
+				each: SURFACES,
+				children: (option) => createComponent(RadioGroup.Item, {
+					get value() {
+						return option.value;
+					},
+					get disabled() {
+						return memo(() => option.value === "frosted")() && !props.surfaceCapability.frosted;
+					},
+					"class": "rounded-md focus-within:ring-3 focus-within:ring-ring/50",
+					get children() {
+						return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.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",
+							get children() {
+								return option.label;
+							}
+						})];
+					}
+				})
+			});
+		}
+	});
+}
+//#endregion
+export { AccentChoices, GlassChoices, ModeChoices };
+
+//# sourceMappingURL=appearance-choices.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,15 @@
+import type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types';
+/**
+ * A live editor whose persistence and preview authority belong to its host.
+ * No ThemeProvider is required, and no catalogue, renderer engine or storage is
+ * imported. Hosts normalize unknown IDs and custom colors, report recovery,
+ * snapshot on open, preview on changes, commit on Save, and restore on dismissal.
+ * Both theme rows remain mounted when mode changes. Typeface/density axes are
+ * deliberately absent from Adea #425's accepted surface.
+ */
+export declare function AppearanceEditor(props: AppearanceEditorProps): import("solid-js").JSX.Element;
+/** Modal anchoring/dismissal and nested-listbox behavior come from Kobalte.
+ * Its measured available height also bounds scrolling, keeping footer actions
+ * reachable when a narrow popup begins below its trigger. */
+export declare function AppearancePopover(props: AppearancePopoverProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=appearance-editor.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,280 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Input } from "../../ui/input/input.js";
+import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "../../ui/popover/popover.js";
+import { Switch } from "../../ui/switch/switch.js";
+import { AccentChoices, GlassChoices, ModeChoices } from "./appearance-choices.js";
+import { SettingsRow, ThemeRow } from "./appearance-rows.js";
+import { className, createComponent, effect, insert, memo, setAttribute, template } from "solid-js/web";
+import { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from "lucide-solid";
+import { Show, createUniqueId } from "solid-js";
+//#region src/components/composites/appearance-editor/appearance-editor.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<p role=status class="px-4 py-2 text-sm text-muted-foreground">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<p role=alert class="mt-1 text-xs text-destructive">`);
+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">`);
+/**
+* A live editor whose persistence and preview authority belong to its host.
+* No ThemeProvider is required, and no catalogue, renderer engine or storage is
+* imported. Hosts normalize unknown IDs and custom colors, report recovery,
+* snapshot on open, preview on changes, commit on Save, and restore on dismissal.
+* Both theme rows remain mounted when mode changes. Typeface/density axes are
+* deliberately absent from Adea #425's accepted surface.
+*/
+function AppearanceEditor(props) {
+	const errorId = createUniqueId();
+	const saveReasonId = createUniqueId();
+	const custom = () => props.draft.accent !== "theme" && !props.accentOptions.some((option) => option.id === props.draft.accent);
+	const accentDescription = () => {
+		if (props.draft.accent === "theme") return "Theme default · Uses the palette's intended color.";
+		return `${props.accentOptions.find((option) => option.id === props.draft.accent)?.label ?? "Custom"} · Controls, glyphs, selections, code, and activity.`;
+	};
+	const glassDescription = () => props.draft.surface === "opaque" ? "Solid surfaces for every theme." : props.draft.surface === "frosted" ? "Theme-colored glass where supported." : props.surfaceCapability.themeDefaultDescription ?? "Uses this theme's default surface.";
+	return (() => {
+		var _el$ = _tmpl$6(), _el$3 = _el$.firstChild, _el$9 = _el$3.nextSibling, _el$0 = _el$9.firstChild;
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.recoveryNotice;
+			},
+			get children() {
+				var _el$2 = _tmpl$();
+				insert(_el$2, () => props.recoveryNotice);
+				return _el$2;
+			}
+		}), _el$3);
+		insert(_el$, createComponent(ModeChoices, props), _el$3);
+		insert(_el$3, createComponent(ThemeRow, {
+			appearance: "light",
+			get selectedId() {
+				return props.draft.lightThemeId;
+			},
+			get preview() {
+				return props.lightTheme;
+			},
+			get themes() {
+				return props.themes;
+			},
+			get disabled() {
+				return props.saving;
+			},
+			onSelect: (lightThemeId) => props.onChange({ lightThemeId })
+		}), null);
+		insert(_el$3, createComponent(ThemeRow, {
+			appearance: "dark",
+			get selectedId() {
+				return props.draft.darkThemeId;
+			},
+			get preview() {
+				return props.darkTheme;
+			},
+			get themes() {
+				return props.themes;
+			},
+			get disabled() {
+				return props.saving;
+			},
+			onSelect: (darkThemeId) => props.onChange({ darkThemeId })
+		}), null);
+		insert(_el$3, createComponent(SettingsRow, {
+			stacked: true,
+			title: "Accent",
+			get icon() {
+				return createComponent(SlidersHorizontal, {});
+			},
+			get description() {
+				return accentDescription();
+			},
+			get children() {
+				return createComponent(AccentChoices, props);
+			}
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return custom();
+			},
+			get children() {
+				var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+				setAttribute(_el$5, "for", `${errorId}-input`);
+				insert(_el$4, createComponent(Input, {
+					id: `${errorId}-input`,
+					get value() {
+						return props.draft.accent;
+					},
+					get disabled() {
+						return props.saving;
+					},
+					get ["aria-invalid"]() {
+						return !!props.customAccentError;
+					},
+					get ["aria-describedby"]() {
+						return props.customAccentError ? errorId : void 0;
+					},
+					onInput: (event) => props.onChange({ accent: event.currentTarget.value })
+				}), null);
+				insert(_el$4, createComponent(Show, {
+					get when() {
+						return props.customAccentError;
+					},
+					get children() {
+						var _el$6 = _tmpl$2();
+						setAttribute(_el$6, "id", errorId);
+						insert(_el$6, () => props.customAccentError);
+						return _el$6;
+					}
+				}), null);
+				return _el$4;
+			}
+		}), null);
+		insert(_el$3, createComponent(SettingsRow, {
+			title: "Glass",
+			get icon() {
+				return createComponent(PanelsTopLeft, {});
+			},
+			get description() {
+				return glassDescription();
+			},
+			get children() {
+				return createComponent(GlassChoices, props);
+			}
+		}), null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return memo(() => !!!props.surfaceCapability.frosted)() && props.surfaceCapability.reason;
+			},
+			get children() {
+				var _el$7 = _tmpl$4();
+				insert(_el$7, () => props.surfaceCapability.reason);
+				return _el$7;
+			}
+		}), null);
+		insert(_el$3, createComponent(SettingsRow, {
+			title: "Reduce transparency",
+			get icon() {
+				return createComponent(EyeOff, {});
+			},
+			description: "Prefer solid surfaces, including during live preview.",
+			get children() {
+				return createComponent(Switch, {
+					get checked() {
+						return props.draft.reduceTransparency;
+					},
+					get disabled() {
+						return props.saving;
+					},
+					onChange: (reduceTransparency) => props.onChange({ reduceTransparency }),
+					"aria-label": "Reduce transparency"
+				});
+			}
+		}), null);
+		insert(_el$3, createComponent(SettingsRow, {
+			title: "Theme library",
+			get icon() {
+				return createComponent(Palette, {});
+			},
+			get description() {
+				return props.onManageThemes ? "Manage themes through the application." : "Theme import is unavailable.";
+			},
+			get children() {
+				return createComponent(Button, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					get disabled() {
+						return !props.onManageThemes || props.saving;
+					},
+					onClick: () => props.onManageThemes?.(),
+					children: "Manage themes"
+				});
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.saveDisabledReason;
+			},
+			get children() {
+				var _el$8 = _tmpl$5();
+				setAttribute(_el$8, "id", saveReasonId);
+				insert(_el$8, () => props.saveDisabledReason);
+				return _el$8;
+			}
+		}), _el$9);
+		insert(_el$9, createComponent(Button, {
+			type: "button",
+			size: "sm",
+			variant: "ghost",
+			get disabled() {
+				return props.saving;
+			},
+			onClick: () => props.onReset(),
+			children: "Reset"
+		}), _el$0);
+		insert(_el$0, createComponent(Button, {
+			type: "button",
+			size: "sm",
+			variant: "outline",
+			get disabled() {
+				return props.saving;
+			},
+			onClick: () => props.onCancel(),
+			children: "Cancel"
+		}), null);
+		insert(_el$0, createComponent(Button, {
+			type: "button",
+			size: "sm",
+			get disabled() {
+				return props.saving || !!props.customAccentError || !!props.saveDisabledReason;
+			},
+			get ["aria-busy"]() {
+				return props.saving;
+			},
+			get ["aria-describedby"]() {
+				return props.saveDisabledReason ? saveReasonId : void 0;
+			},
+			onClick: () => props.onSave(),
+			get children() {
+				return props.saving ? "Saving…" : "Save";
+			}
+		}), null);
+		effect(() => className(_el$, cn("min-w-0", props.class)));
+		return _el$;
+	})();
+}
+/** Modal anchoring/dismissal and nested-listbox behavior come from Kobalte.
+* Its measured available height also bounds scrolling, keeping footer actions
+* reachable when a narrow popup begins below its trigger. */
+function AppearancePopover(props) {
+	return createComponent(Popover, {
+		get open() {
+			return props.open;
+		},
+		modal: true,
+		onOpenChange: (open) => open ? props.onOpen() : props.onDismiss(),
+		get children() {
+			return [createComponent(PopoverTrigger, {
+				as: Button,
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Appearance settings",
+				get children() {
+					return createComponent(Palette, {});
+				}
+			}), createComponent(PopoverContent, {
+				"class": "w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto",
+				get children() {
+					return [
+						createComponent(PopoverTitle, { children: "Appearance" }),
+						createComponent(PopoverDescription, { children: "Changes preview immediately. Save keeps them; Cancel restores the previous appearance." }),
+						createComponent(AppearanceEditor, props)
+					];
+				}
+			})];
+		}
+	});
+}
+//#endregion
+export { AppearanceEditor, AppearancePopover };
+
+//# sourceMappingURL=appearance-editor.js.map