@adea-ai/ui 0.104.3 → 0.106.0

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

@@ -3,25 +3,27 @@ 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, isCustomAccent } from "./appearance-choices.js";
+import { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from "../../../lib/appearance-font-settings.js";
 import { SettingsRow, TerminalRow, ThemeRow } from "./appearance-rows.js";
-import { className, createComponent, effect, insert, memo, setAttribute, template } from "solid-js/web";
+import { AppearanceFontSettingsGroup } from "./font-settings-group.js";
+import { AccentChoices, GlassChoices, ModeChoices, isCustomAccent } from "./appearance-choices.js";
+import { className, createComponent, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
 import { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from "lucide-solid";
-import { Show, createUniqueId } from "solid-js";
+import { Show, createSignal, 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-foreground">`);
 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="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">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<div data-appearance-editor><div class="divide-y divide-border rounded-lg border"></div><div class="global-appearance-editor-actions 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
 * 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.
+* Both theme rows remain mounted when mode changes. Density remains outside the
+* accepted appearance surface; typeface settings are shared and host-persisted.
 */
 function AppearanceEditor(props) {
 	const errorId = createUniqueId();
@@ -152,6 +154,18 @@ function AppearanceEditor(props) {
 				return _el$4;
 			}
 		}), null);
+		insert(_el$3, createComponent(AppearanceFontSettingsGroup, {
+			get settings() {
+				return props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS;
+			},
+			get menuPortalMount() {
+				return props.menuPortalMount;
+			},
+			get disabled() {
+				return props.saving;
+			},
+			onChange: (fonts) => props.onChange({ fonts })
+		}), null);
 		insert(_el$3, createComponent(SettingsRow, {
 			title: "Glass",
 			get icon() {
@@ -270,6 +284,7 @@ function AppearanceEditor(props) {
 * Its measured available height also bounds scrolling, keeping footer actions
 * reachable when a narrow popup begins below its trigger. */
 function AppearancePopover(props) {
+	const [menuPortalMount, setMenuPortalMount] = createSignal();
 	return createComponent(Popover, {
 		get open() {
 			return props.open;
@@ -287,12 +302,15 @@ function AppearancePopover(props) {
 					return createComponent(Palette, {});
 				}
 			}), createComponent(PopoverContent, {
+				ref: setMenuPortalMount,
 				"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)
+						createComponent(AppearanceEditor, mergeProps(props, { get menuPortalMount() {
+							return menuPortalMount();
+						} }))
 					];
 				}
 			})];

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","isCustomAccent","SettingsRow","TerminalRow","ThemeRow","AppearanceEditor","props","errorId","saveReasonId","custom","accentDescription","draft","accent","preset","accentOptions","find","option","id","label","offered","themeAccentOptions","toLowerCase","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","terminalThemeId","undefined","_$memo","resolvedAppearance","title","icon","description","_el$4","_tmpl$3","_el$5","_$setAttribute","value","aria-invalid","customAccentError","aria-describedby","onInput","event","currentTarget","_el$6","_tmpl$2","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, isCustomAccent } from './appearance-choices'\nimport { SettingsRow, TerminalRow, 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 = () => isCustomAccent(props)\n  const accentDescription = () => {\n    if (props.draft.accent === 'theme') return \"Theme default · Uses the palette's intended color.\"\n    const preset = props.accentOptions.find((option) => option.id === props.draft.accent)\n    if (preset) return `${preset.label} · Controls, glyphs, selections, code, and activity.`\n    if (custom()) return 'Custom · Controls, glyphs, selections, code, and activity.'\n    const offered = props.themeAccentOptions?.find((option) => option.id === props.draft.accent)\n    // A stored theme accent survives a theme switch by id; when the new pair\n    // cannot offer that slot the host falls back to the theme's own primary,\n    // and the description says so rather than naming a colour not on screen.\n    return offered\n      ? `Theme ${offered.label.toLowerCase()} · The theme's own color, on controls and activity.`\n      : \"Theme default · This theme does not carry that accent, so it uses the palette's intended color.\"\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        {/* The row exists only when the host carries a terminal preference:\n            the draft field is the show/hide switch, so the editor can never\n            render a terminal row that writes nothing. */}\n        <Show when={props.draft.terminalThemeId !== undefined}>\n          <TerminalRow\n            selectedId={props.draft.terminalThemeId ?? 'theme'}\n            preview={props.resolvedAppearance === 'dark' ? props.darkTheme : props.lightTheme}\n            themes={props.themes}\n            disabled={props.saving}\n            onSelect={(terminalThemeId) => props.onChange({ terminalThemeId })}\n          />\n        </Show>\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":";;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,SAAgBwB,iBAAiBC,OAA8B;CAC7D,MAAMC,UAAUrB,eAAe;CAC/B,MAAMsB,eAAetB,eAAe;CACpC,MAAMuB,eAAeR,eAAeK,KAAK;CACzC,MAAMI,0BAA0B;EAC9B,IAAIJ,MAAMK,MAAMC,WAAW,SAAS,OAAO;EAC3C,MAAMC,SAASP,MAAMQ,cAAcC,MAAMC,WAAWA,OAAOC,OAAOX,MAAMK,MAAMC,MAAM;EACpF,IAAIC,QAAQ,OAAO,GAAGA,OAAOK,MAAK;EAClC,IAAIT,OAAO,GAAG,OAAO;EACrB,MAAMU,UAAUb,MAAMc,oBAAoBL,MAAMC,WAAWA,OAAOC,OAAOX,MAAMK,MAAMC,MAAM;EAI3F,OAAOO,UACH,SAASA,QAAQD,MAAMG,YAAY,EAAC,uDACpC;CACN;CACA,MAAMC,yBACJhB,MAAMK,MAAMY,YAAY,WACpB,oCACAjB,MAAMK,MAAMY,YAAY,YACtB,yCACCjB,MAAMkB,kBAAkBC,2BAA2B;CAC5D,cAAA;EAAA,IAAAC,OAAAC,QAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAD;EAAAI,OAAAP,MAAAQ,gBAEKjD,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE7B,MAAM8B;GAAc;GAAA,IAAAC,WAAA;IAAA,IAAAC,QAAAC,OAAA;IAAAN,OAAAK,aAE3BhC,MAAM8B,cAAc;IAAA,OAAAE;GAAA;EAAA,CAAA,GAAAV,KAAA;EAAAK,OAAAP,MAAAQ,gBAGxBpC,aAAgBQ,KAAK,GAAAsB,KAAA;EAAAK,OAAAL,OAAAM,gBAEnB9B,UAAQ;GACPoC,YAAU;GAAA,IACVC,aAAU;IAAA,OAAEnC,MAAMK,MAAM+B;GAAY;GAAA,IACpCC,UAAO;IAAA,OAAErC,MAAMsC;GAAU;GAAA,IACzBC,SAAM;IAAA,OAAEvC,MAAMuC;GAAM;GAAA,IACpBC,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBC,WAAWN,iBAAiBpC,MAAM2C,SAAS,EAAEP,aAAa,CAAC;EAAC,CAAA,GAAA,IAAA;EAAAT,OAAAL,OAAAM,gBAE7D9B,UAAQ;GACPoC,YAAU;GAAA,IACVC,aAAU;IAAA,OAAEnC,MAAMK,MAAMuC;GAAW;GAAA,IACnCP,UAAO;IAAA,OAAErC,MAAM6C;GAAS;GAAA,IACxBN,SAAM;IAAA,OAAEvC,MAAMuC;GAAM;GAAA,IACpBC,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBC,WAAWE,gBAAgB5C,MAAM2C,SAAS,EAAEC,YAAY,CAAC;EAAC,CAAA,GAAA,IAAA;EAAAjB,OAAAL,OAAAM,gBAK3DjD,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE7B,MAAMK,MAAMyC,oBAAoBC,KAAAA;GAAS;GAAA,IAAAhB,WAAA;IAAA,OAAAH,gBAClD/B,aAAW;KAAA,IACVsC,aAAU;MAAA,OAAEnC,MAAMK,MAAMyC,mBAAmB;KAAO;KAAA,IAClDT,UAAO;MAAA,OAAEW,WAAAhD,MAAMiD,uBAAuB,MAAM,CAAA,CAAA,IAAGjD,MAAM6C,YAAY7C,MAAMsC;KAAU;KAAA,IACjFC,SAAM;MAAA,OAAEvC,MAAMuC;KAAM;KAAA,IACpBC,WAAQ;MAAA,OAAExC,MAAMyC;KAAM;KACtBC,WAAWI,oBAAoB9C,MAAM2C,SAAS,EAAEG,gBAAgB,CAAC;IAAC,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAnB,OAAAL,OAAAM,gBAGrEhC,aAAW;GAACsD,OAAK;GAAA,IAAUC,OAAI;IAAA,OAAAvB,gBAAGlD,mBAAiB,CAAA,CAAA;GAAA;GAAA,IAAK0E,cAAW;IAAA,OAAEhD,kBAAkB;GAAC;GAAA,IAAA2B,WAAA;IAAA,OAAAH,gBACtFnC,eAAkBO,KAAK;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA2B,OAAAL,OAAAM,gBAEzBjD,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE1B,OAAO;GAAC;GAAA,IAAA4B,WAAA;IAAA,IAAAsB,QAAAC,QAAA,GAAAC,QAAAF,MAAA9B;IAAAiC,aAAAD,OAAA,OAEmC,GAAGtD,QAAO,OAAQ;IAAA0B,OAAA0B,OAAAzB,gBAGpE7C,OAAK;KACJ4B,IAAI,GAAGV,QAAO;KAAQ,IACtBwD,QAAK;MAAA,OAAEzD,MAAMK,MAAMC;KAAM;KAAA,IACzBkC,WAAQ;MAAA,OAAExC,MAAMyC;KAAM;KAAA,KAAA,kBAAA;MAAA,OACR,CAAC,CAACzC,MAAM2D;KAAiB;KAAA,KAAA,sBAAA;MAAA,OACrB3D,MAAM2D,oBAAoB1D,UAAU8C,KAAAA;KAAS;KAC/Dc,UAAUC,UAAU9D,MAAM2C,SAAS,EAAErC,QAAQwD,MAAMC,cAAcN,MAAM,CAAC;IAAC,CAAA,GAAA,IAAA;IAAA9B,OAAA0B,OAAAzB,gBAE1EjD,MAAI;KAAA,IAACkD,OAAI;MAAA,OAAE7B,MAAM2D;KAAiB;KAAA,IAAA5B,WAAA;MAAA,IAAAiC,QAAAC,QAAA;MAAAT,aAAAQ,OAAA,MAC1B/D,OAAO;MAAA0B,OAAAqC,aACXhE,MAAM2D,iBAAiB;MAAA,OAAAK;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAX;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA1B,OAAAL,OAAAM,gBAK/BhC,aAAW;GAACsD,OAAK;GAAA,IAASC,OAAI;IAAA,OAAAvB,gBAAGnD,eAAa,CAAA,CAAA;GAAA;GAAA,IAAK2E,cAAW;IAAA,OAAEpC,iBAAiB;GAAC;GAAA,IAAAe,WAAA;IAAA,OAAAH,gBAChFlC,cAAiBM,KAAK;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA2B,OAAAL,OAAAM,gBAExBjD,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAEmB,WAAA,CAAA,CAAA,CAAChD,MAAMkB,kBAAkBgD,OAAO,CAAA,CAAA,KAAIlE,MAAMkB,kBAAkBiD;GAAM;GAAA,IAAApC,WAAA;IAAA,IAAAqC,QAAAC,QAAA;IAAA1C,OAAAyC,aAEzEpE,MAAMkB,kBAAkBiD,MAAM;IAAA,OAAAC;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAzC,OAAAL,OAAAM,gBAGlChC,aAAW;GACVsD,OAAK;GAAA,IACLC,OAAI;IAAA,OAAAvB,gBAAGrD,QAAM,CAAA,CAAA;GAAA;GACb6E,aAAW;GAAA,IAAArB,WAAA;IAAA,OAAAH,gBAEV5C,QAAM;KAAA,IACLsF,UAAO;MAAA,OAAEtE,MAAMK,MAAMkE;KAAkB;KAAA,IACvC/B,WAAQ;MAAA,OAAExC,MAAMyC;KAAM;KACtBE,WAAW4B,uBAAgCvE,MAAM2C,SAAS,EAAE4B,mBAAmB,CAAC;KAAC,cAAA;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA5C,OAAAL,OAAAM,gBAIpFhC,aAAW;GACVsD,OAAK;GAAA,IACLC,OAAI;IAAA,OAAAvB,gBAAGpD,SAAO,CAAA,CAAA;GAAA;GAAA,IACd4E,cAAW;IAAA,OACTpD,MAAMwE,iBACF,2CACA;GAA8B;GAAA,IAAAzC,WAAA;IAAA,OAAAH,gBAGnC9C,QAAM;KACL2F,MAAI;KACJC,MAAI;KACJC,SAAO;KAAA,IACPnC,WAAQ;MAAA,OAAE,CAACxC,MAAMwE,kBAAkBxE,MAAMyC;KAAM;KAC/CmC,eAAe5E,MAAMwE,iBAAiB;KAACzC,UAAA;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAJ,OAAAP,MAAAQ,gBAM5CjD,MAAI;GAAA,IAACkD,OAAI;IAAA,OAAE7B,MAAM6E;GAAkB;GAAA,IAAA9C,WAAA;IAAA,IAAA+C,QAAAC,QAAA;IAAAvB,aAAAsB,OAAA,MAC3B5E,YAAY;IAAAyB,OAAAmD,aAChB9E,MAAM6E,kBAAkB;IAAA,OAAAC;GAAA;EAAA,CAAA,GAAAtD,KAAA;EAAAG,OAAAH,OAAAI,gBAO1B9C,QAAM;GACL2F,MAAI;GACJC,MAAI;GACJC,SAAO;GAAA,IACPnC,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBmC,eAAe5E,MAAMgF,QAAQ;GAACjD,UAAA;EAAA,CAAA,GAAAL,KAAA;EAAAC,OAAAD,OAAAE,gBAK7B9C,QAAM;GACL2F,MAAI;GACJC,MAAI;GACJC,SAAO;GAAA,IACPnC,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBmC,eAAe5E,MAAMiF,SAAS;GAAClD,UAAA;EAAA,CAAA,GAAA,IAAA;EAAAJ,OAAAD,OAAAE,gBAIhC9C,QAAM;GACL2F,MAAI;GACJC,MAAI;GAAA,IACJlC,WAAQ;IAAA,OAAExC,MAAMyC,UAAU,CAAC,CAACzC,MAAM2D,qBAAqB,CAAC,CAAC3D,MAAM6E;GAAkB;GAAA,KAAA,eAAA;IAAA,OACtE7E,MAAMyC;GAAM;GAAA,KAAA,sBAAA;IAAA,OACLzC,MAAM6E,qBAAqB3E,eAAe6C,KAAAA;GAAS;GACrE6B,eAAe5E,MAAMmF,OAAO;GAAC,IAAApD,WAAA;IAAA,OAE5B/B,MAAMyC,SAAS,YAAY;GAAM;EAAA,CAAA,GAAA,IAAA;EAAA2C,aAAAC,UAAAjE,MAvIPvC,GAAG,WAAWmB,MAAMsF,KAAK,CAAC,CAAA;EAAA,OAAAlE;CAAA,EAAA,CAAA;AA6IjE;;;;AAKA,SAAgBmE,kBAAkBvF,OAA+B;CAC/D,OAAA4B,gBACG3C,SAAO;EAAA,IACNuG,OAAI;GAAA,OAAExF,MAAMwF;EAAI;EAChBC,OAAK;EACLC,eAAeF,SAAUA,OAAOxF,MAAM2F,OAAO,IAAI3F,MAAM4F,UAAU;EAAE,IAAA7D,WAAA;GAAA,OAAA,CAAAH,gBAElEvC,gBAAc;IACbwG,IAAI/G;IACJ2F,MAAI;IACJE,SAAO;IACPD,MAAI;IAAA,cAAA;IAAA,IAAA3C,WAAA;KAAA,OAAAH,gBAGHpD,SAAO,CAAA,CAAA;IAAA;GAAA,CAAA,GAAAoD,gBAET1C,gBAAc;IAAA,SAAA;IAAA,IAAA6C,WAAA;KAAA,OAAA;MAAAH,gBACZxC,cAAY,EAAA2C,UAAA,aAAA,CAAA;MAAAH,gBACZzC,oBAAkB,EAAA4C,UAAA,yFAAA,CAAA;MAAAH,gBAGlB7B,kBAAqBC,KAAK;KAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAInC"}
+{"version":3,"file":"appearance-editor.js","names":["EyeOff","Palette","PanelsTopLeft","SlidersHorizontal","Show","createSignal","createUniqueId","cn","Button","Input","AppearanceFontSettingsGroup","DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS","Switch","Popover","PopoverContent","PopoverDescription","PopoverTitle","PopoverTrigger","AppearanceEditorProps","AppearancePopoverProps","ModeChoices","AccentChoices","GlassChoices","isCustomAccent","SettingsRow","TerminalRow","ThemeRow","AppearanceEditor","props","errorId","saveReasonId","custom","accentDescription","draft","accent","preset","accentOptions","find","option","id","label","offered","themeAccentOptions","toLowerCase","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","terminalThemeId","undefined","_$memo","resolvedAppearance","title","icon","description","_el$4","_tmpl$3","_el$5","_$setAttribute","value","aria-invalid","customAccentError","aria-describedby","onInput","event","currentTarget","_el$6","_tmpl$2","settings","fonts","menuPortalMount","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","setMenuPortalMount","HTMLElement","open","modal","onOpenChange","onOpen","onDismiss","as","ref","_$mergeProps","_$createComponent","_$memo","_$className","_$mergeProps"],"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, createSignal, createUniqueId } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button/button'\nimport { Input } from '../../ui/input/input'\nimport { AppearanceFontSettingsGroup } from './font-settings-group'\nimport { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '#lib/appearance-font-settings'\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, isCustomAccent } from './appearance-choices'\nimport { SettingsRow, TerminalRow, 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. Density remains outside the\n * accepted appearance surface; typeface settings are shared and host-persisted.\n */\nexport function AppearanceEditor(props: AppearanceEditorProps) {\n  const errorId = createUniqueId()\n  const saveReasonId = createUniqueId()\n  const custom = () => isCustomAccent(props)\n  const accentDescription = () => {\n    if (props.draft.accent === 'theme') return \"Theme default · Uses the palette's intended color.\"\n    const preset = props.accentOptions.find((option) => option.id === props.draft.accent)\n    if (preset) return `${preset.label} · Controls, glyphs, selections, code, and activity.`\n    if (custom()) return 'Custom · Controls, glyphs, selections, code, and activity.'\n    const offered = props.themeAccentOptions?.find((option) => option.id === props.draft.accent)\n    // A stored theme accent survives a theme switch by id; when the new pair\n    // cannot offer that slot the host falls back to the theme's own primary,\n    // and the description says so rather than naming a colour not on screen.\n    return offered\n      ? `Theme ${offered.label.toLowerCase()} · The theme's own color, on controls and activity.`\n      : \"Theme default · This theme does not carry that accent, so it uses the palette's intended color.\"\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        {/* The row exists only when the host carries a terminal preference:\n            the draft field is the show/hide switch, so the editor can never\n            render a terminal row that writes nothing. */}\n        <Show when={props.draft.terminalThemeId !== undefined}>\n          <TerminalRow\n            selectedId={props.draft.terminalThemeId ?? 'theme'}\n            preview={props.resolvedAppearance === 'dark' ? props.darkTheme : props.lightTheme}\n            themes={props.themes}\n            disabled={props.saving}\n            onSelect={(terminalThemeId) => props.onChange({ terminalThemeId })}\n          />\n        </Show>\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        <AppearanceFontSettingsGroup\n          settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}\n          menuPortalMount={props.menuPortalMount}\n          disabled={props.saving}\n          onChange={(fonts) => props.onChange({ fonts })}\n        />\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=\"global-appearance-editor-actions 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  const [menuPortalMount, setMenuPortalMount] = createSignal<HTMLElement>()\n\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\n        ref={setMenuPortalMount}\n        class=\"w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto\"\n      >\n        <PopoverTitle>Appearance</PopoverTitle>\n        <PopoverDescription>\n          Changes preview immediately. Save keeps them; Cancel restores the previous appearance.\n        </PopoverDescription>\n        <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} />\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,SAAgB2B,iBAAiBC,OAA8B;CAC7D,MAAMC,UAAUvB,eAAe;CAC/B,MAAMwB,eAAexB,eAAe;CACpC,MAAMyB,eAAeR,eAAeK,KAAK;CACzC,MAAMI,0BAA0B;EAC9B,IAAIJ,MAAMK,MAAMC,WAAW,SAAS,OAAO;EAC3C,MAAMC,SAASP,MAAMQ,cAAcC,MAAMC,WAAWA,OAAOC,OAAOX,MAAMK,MAAMC,MAAM;EACpF,IAAIC,QAAQ,OAAO,GAAGA,OAAOK,MAAK;EAClC,IAAIT,OAAO,GAAG,OAAO;EACrB,MAAMU,UAAUb,MAAMc,oBAAoBL,MAAMC,WAAWA,OAAOC,OAAOX,MAAMK,MAAMC,MAAM;EAI3F,OAAOO,UACH,SAASA,QAAQD,MAAMG,YAAY,EAAC,uDACpC;CACN;CACA,MAAMC,yBACJhB,MAAMK,MAAMY,YAAY,WACpB,oCACAjB,MAAMK,MAAMY,YAAY,YACtB,yCACCjB,MAAMkB,kBAAkBC,2BAA2B;CAC5D,cAAA;EAAA,IAAAC,OAAAC,QAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAD;EAAAI,OAAAP,MAAAQ,gBAEKpD,MAAI;GAAA,IAACqD,OAAI;IAAA,OAAE7B,MAAM8B;GAAc;GAAA,IAAAC,WAAA;IAAA,IAAAC,QAAAC,OAAA;IAAAN,OAAAK,aAE3BhC,MAAM8B,cAAc;IAAA,OAAAE;GAAA;EAAA,CAAA,GAAAV,KAAA;EAAAK,OAAAP,MAAAQ,gBAGxBpC,aAAgBQ,KAAK,GAAAsB,KAAA;EAAAK,OAAAL,OAAAM,gBAEnB9B,UAAQ;GACPoC,YAAU;GAAA,IACVC,aAAU;IAAA,OAAEnC,MAAMK,MAAM+B;GAAY;GAAA,IACpCC,UAAO;IAAA,OAAErC,MAAMsC;GAAU;GAAA,IACzBC,SAAM;IAAA,OAAEvC,MAAMuC;GAAM;GAAA,IACpBC,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBC,WAAWN,iBAAiBpC,MAAM2C,SAAS,EAAEP,aAAa,CAAC;EAAC,CAAA,GAAA,IAAA;EAAAT,OAAAL,OAAAM,gBAE7D9B,UAAQ;GACPoC,YAAU;GAAA,IACVC,aAAU;IAAA,OAAEnC,MAAMK,MAAMuC;GAAW;GAAA,IACnCP,UAAO;IAAA,OAAErC,MAAM6C;GAAS;GAAA,IACxBN,SAAM;IAAA,OAAEvC,MAAMuC;GAAM;GAAA,IACpBC,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBC,WAAWE,gBAAgB5C,MAAM2C,SAAS,EAAEC,YAAY,CAAC;EAAC,CAAA,GAAA,IAAA;EAAAjB,OAAAL,OAAAM,gBAK3DpD,MAAI;GAAA,IAACqD,OAAI;IAAA,OAAE7B,MAAMK,MAAMyC,oBAAoBC,KAAAA;GAAS;GAAA,IAAAhB,WAAA;IAAA,OAAAH,gBAClD/B,aAAW;KAAA,IACVsC,aAAU;MAAA,OAAEnC,MAAMK,MAAMyC,mBAAmB;KAAO;KAAA,IAClDT,UAAO;MAAA,OAAEW,WAAAhD,MAAMiD,uBAAuB,MAAM,CAAA,CAAA,IAAGjD,MAAM6C,YAAY7C,MAAMsC;KAAU;KAAA,IACjFC,SAAM;MAAA,OAAEvC,MAAMuC;KAAM;KAAA,IACpBC,WAAQ;MAAA,OAAExC,MAAMyC;KAAM;KACtBC,WAAWI,oBAAoB9C,MAAM2C,SAAS,EAAEG,gBAAgB,CAAC;IAAC,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAnB,OAAAL,OAAAM,gBAGrEhC,aAAW;GAACsD,OAAK;GAAA,IAAUC,OAAI;IAAA,OAAAvB,gBAAGrD,mBAAiB,CAAA,CAAA;GAAA;GAAA,IAAK6E,cAAW;IAAA,OAAEhD,kBAAkB;GAAC;GAAA,IAAA2B,WAAA;IAAA,OAAAH,gBACtFnC,eAAkBO,KAAK;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA2B,OAAAL,OAAAM,gBAEzBpD,MAAI;GAAA,IAACqD,OAAI;IAAA,OAAE1B,OAAO;GAAC;GAAA,IAAA4B,WAAA;IAAA,IAAAsB,QAAAC,QAAA,GAAAC,QAAAF,MAAA9B;IAAAiC,aAAAD,OAAA,OAEmC,GAAGtD,QAAO,OAAQ;IAAA0B,OAAA0B,OAAAzB,gBAGpE/C,OAAK;KACJ8B,IAAI,GAAGV,QAAO;KAAQ,IACtBwD,QAAK;MAAA,OAAEzD,MAAMK,MAAMC;KAAM;KAAA,IACzBkC,WAAQ;MAAA,OAAExC,MAAMyC;KAAM;KAAA,KAAA,kBAAA;MAAA,OACR,CAAC,CAACzC,MAAM2D;KAAiB;KAAA,KAAA,sBAAA;MAAA,OACrB3D,MAAM2D,oBAAoB1D,UAAU8C,KAAAA;KAAS;KAC/Dc,UAAUC,UAAU9D,MAAM2C,SAAS,EAAErC,QAAQwD,MAAMC,cAAcN,MAAM,CAAC;IAAC,CAAA,GAAA,IAAA;IAAA9B,OAAA0B,OAAAzB,gBAE1EpD,MAAI;KAAA,IAACqD,OAAI;MAAA,OAAE7B,MAAM2D;KAAiB;KAAA,IAAA5B,WAAA;MAAA,IAAAiC,QAAAC,QAAA;MAAAT,aAAAQ,OAAA,MAC1B/D,OAAO;MAAA0B,OAAAqC,aACXhE,MAAM2D,iBAAiB;MAAA,OAAAK;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAX;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA1B,OAAAL,OAAAM,gBAK/B9C,6BAA2B;GAAA,IAC1BoF,WAAQ;IAAA,OAAElE,MAAMK,MAAM8D,SAASpF;GAAuC;GAAA,IACtEqF,kBAAe;IAAA,OAAEpE,MAAMoE;GAAe;GAAA,IACtC5B,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBE,WAAWwB,UAAUnE,MAAM2C,SAAS,EAAEwB,MAAM,CAAC;EAAC,CAAA,GAAA,IAAA;EAAAxC,OAAAL,OAAAM,gBAE/ChC,aAAW;GAACsD,OAAK;GAAA,IAASC,OAAI;IAAA,OAAAvB,gBAAGtD,eAAa,CAAA,CAAA;GAAA;GAAA,IAAK8E,cAAW;IAAA,OAAEpC,iBAAiB;GAAC;GAAA,IAAAe,WAAA;IAAA,OAAAH,gBAChFlC,cAAiBM,KAAK;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA2B,OAAAL,OAAAM,gBAExBpD,MAAI;GAAA,IAACqD,OAAI;IAAA,OAAEmB,WAAA,CAAA,CAAA,CAAChD,MAAMkB,kBAAkBmD,OAAO,CAAA,CAAA,KAAIrE,MAAMkB,kBAAkBoD;GAAM;GAAA,IAAAvC,WAAA;IAAA,IAAAwC,QAAAC,QAAA;IAAA7C,OAAA4C,aAEzEvE,MAAMkB,kBAAkBoD,MAAM;IAAA,OAAAC;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA5C,OAAAL,OAAAM,gBAGlChC,aAAW;GACVsD,OAAK;GAAA,IACLC,OAAI;IAAA,OAAAvB,gBAAGxD,QAAM,CAAA,CAAA;GAAA;GACbgF,aAAW;GAAA,IAAArB,WAAA;IAAA,OAAAH,gBAEV5C,QAAM;KAAA,IACLyF,UAAO;MAAA,OAAEzE,MAAMK,MAAMqE;KAAkB;KAAA,IACvClC,WAAQ;MAAA,OAAExC,MAAMyC;KAAM;KACtBE,WAAW+B,uBAAgC1E,MAAM2C,SAAS,EAAE+B,mBAAmB,CAAC;KAAC,cAAA;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA/C,OAAAL,OAAAM,gBAIpFhC,aAAW;GACVsD,OAAK;GAAA,IACLC,OAAI;IAAA,OAAAvB,gBAAGvD,SAAO,CAAA,CAAA;GAAA;GAAA,IACd+E,cAAW;IAAA,OACTpD,MAAM2E,iBACF,2CACA;GAA8B;GAAA,IAAA5C,WAAA;IAAA,OAAAH,gBAGnChD,QAAM;KACLgG,MAAI;KACJC,MAAI;KACJC,SAAO;KAAA,IACPtC,WAAQ;MAAA,OAAE,CAACxC,MAAM2E,kBAAkB3E,MAAMyC;KAAM;KAC/CsC,eAAe/E,MAAM2E,iBAAiB;KAAC5C,UAAA;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAJ,OAAAP,MAAAQ,gBAM5CpD,MAAI;GAAA,IAACqD,OAAI;IAAA,OAAE7B,MAAMgF;GAAkB;GAAA,IAAAjD,WAAA;IAAA,IAAAkD,QAAAC,QAAA;IAAA1B,aAAAyB,OAAA,MAC3B/E,YAAY;IAAAyB,OAAAsD,aAChBjF,MAAMgF,kBAAkB;IAAA,OAAAC;GAAA;EAAA,CAAA,GAAAzD,KAAA;EAAAG,OAAAH,OAAAI,gBAO1BhD,QAAM;GACLgG,MAAI;GACJC,MAAI;GACJC,SAAO;GAAA,IACPtC,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBsC,eAAe/E,MAAMmF,QAAQ;GAACpD,UAAA;EAAA,CAAA,GAAAL,KAAA;EAAAC,OAAAD,OAAAE,gBAK7BhD,QAAM;GACLgG,MAAI;GACJC,MAAI;GACJC,SAAO;GAAA,IACPtC,WAAQ;IAAA,OAAExC,MAAMyC;GAAM;GACtBsC,eAAe/E,MAAMoF,SAAS;GAACrD,UAAA;EAAA,CAAA,GAAA,IAAA;EAAAJ,OAAAD,OAAAE,gBAIhChD,QAAM;GACLgG,MAAI;GACJC,MAAI;GAAA,IACJrC,WAAQ;IAAA,OAAExC,MAAMyC,UAAU,CAAC,CAACzC,MAAM2D,qBAAqB,CAAC,CAAC3D,MAAMgF;GAAkB;GAAA,KAAA,eAAA;IAAA,OACtEhF,MAAMyC;GAAM;GAAA,KAAA,sBAAA;IAAA,OACLzC,MAAMgF,qBAAqB9E,eAAe6C,KAAAA;GAAS;GACrEgC,eAAe/E,MAAMsF,OAAO;GAAC,IAAAvD,WAAA;IAAA,OAE5B/B,MAAMyC,SAAS,YAAY;GAAM;EAAA,CAAA,GAAA,IAAA;EAAA8C,aAAAC,UAAApE,MA7IPzC,GAAG,WAAWqB,MAAMyF,KAAK,CAAC,CAAA;EAAA,OAAArE;CAAA,EAAA,CAAA;AAmJjE;;;;AAKA,SAAgBsE,kBAAkB1F,OAA+B;CAC/D,MAAM,CAACoE,iBAAiBuB,sBAAsBlH,aAA0B;CAExE,OAAAmD,gBACG3C,SAAO;EAAA,IACN4G,OAAI;GAAA,OAAE7F,MAAM6F;EAAI;EAChBC,OAAK;EACLC,eAAeF,SAAUA,OAAO7F,MAAMgG,OAAO,IAAIhG,MAAMiG,UAAU;EAAE,IAAAlE,WAAA;GAAA,OAAA,CAAAH,gBAElEvC,gBAAc;IACb6G,IAAItH;IACJgG,MAAI;IACJE,SAAO;IACPD,MAAI;IAAA,cAAA;IAAA,IAAA9C,WAAA;KAAA,OAAAH,gBAGHvD,SAAO,CAAA,CAAA;IAAA;GAAA,CAAA,GAAAuD,gBAET1C,gBAAc;IAAAiH,KACRR;IAAkB,SAAA;IAAA,IAAA5D,WAAA;KAAA,OAAA;MAAAH,gBAGtBxC,cAAY,EAAA2C,UAAA,aAAA,CAAA;MAAAH,gBACZzC,oBAAkB,EAAA4C,UAAA,yFAAA,CAAA;MAAAH,gBAGlB7B,kBAAgBqG,WAAKpG,OAAK,EAAA,IAAEoE,kBAAe;OAAA,OAAEA,gBAAgB;MAAC,EAAA,CAAA,CAAA;KAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAIvE"}

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

@@ -1,4 +1,5 @@
 import type { AccentPreset, AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes';
+import type { AppearanceEditorFontSettings } from '#lib/appearance-font-settings';
 export type AppearanceDraft = Readonly<{
     mode: 'system' | 'light' | 'dark';
     lightThemeId: string;
@@ -12,6 +13,12 @@ export type AppearanceDraft = Readonly<{
     terminalThemeId?: string;
     /** Theme default, a canonical preset id, or the host's custom accent draft. */
     accent: string;
+    /**
+     * The UI, content and code typeface axes. Optional for compatibility with
+     * hosts upgrading from the earlier appearance contract; omitted means the
+     * shared System defaults.
+     */
+    fonts?: AppearanceEditorFontSettings;
     surface: 'theme' | 'frosted' | 'opaque';
     reduceTransparency: boolean;
 }>;
@@ -47,6 +54,8 @@ export type AppearanceEditorProps = {
     };
     /** Undefined means theme import is unavailable, never a working-looking action. */
     onManageThemes?: () => void;
+    /** Mount nested font menus inside the containing overlay when one exists. */
+    menuPortalMount?: HTMLElement;
     class?: string;
 };
 export type AppearancePopoverProps = AppearanceEditorProps & {

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

@@ -1 +1 @@
-{"version":3,"file":"appearance-types.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAE/E,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IACjC,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAC,CAAA;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,eAAe,CAAA;IACtB,8EAA8E;IAC9E,UAAU,EAAE,SAAS,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAA;IACpC,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACnD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,uBAAuB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1F,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GAAG;IAC3D,IAAI,EAAE,OAAO,CAAA;IACb,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA"}
+{"version":3,"file":"appearance-types.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAC/E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA;AAEjF,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IACjC,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,4BAA4B,CAAA;IACpC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAC,CAAA;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,eAAe,CAAA;IACtB,8EAA8E;IAC9E,UAAU,EAAE,SAAS,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAA;IACpC,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACnD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,uBAAuB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1F,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,6EAA6E;IAC7E,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GAAG;IAC3D,IAAI,EAAE,OAAO,CAAA;IACb,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA"}

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

@@ -0,0 +1,10 @@
+import { type AppearanceEditorFontSettings } from '#lib/appearance-font-settings';
+export type AppearanceFontSettingsGroupProps = {
+    settings: AppearanceEditorFontSettings;
+    menuPortalMount?: HTMLElement;
+    onChange: (settings: AppearanceEditorFontSettings) => void;
+    disabled?: boolean;
+};
+/** Controlled font controls shared by AppearanceEditor and host-owned settings. */
+export declare function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=font-settings-group.d.ts.map

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

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

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

@@ -0,0 +1,310 @@
+import { Button } from "../../ui/button/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu/dropdown-menu.js";
+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 { 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 FONT_ROWS = [
+	{
+		axis: "ui",
+		label: "UI",
+		description: "Controls and interface labels.",
+		icon: PanelsTopLeft
+	},
+	{
+		axis: "content",
+		label: "Content",
+		description: "Reading and long-form text.",
+		icon: BookOpen
+	},
+	{
+		axis: "code",
+		label: "Code",
+		description: "Code, terminals, and file paths.",
+		icon: Code2
+	}
+];
+var catalogFontOptions = fontOptions.filter((option) => option.id !== "system");
+var MENU_FOCUS_TARGET_SELECTOR = "a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type";
+function isMenuTabStop(element) {
+	return (element.tabIndex >= 0 || element.matches("details > summary:first-of-type") && !element.hasAttribute("tabindex")) && !element.matches(":disabled") && element.getAttribute("aria-disabled") !== "true" && element.closest("[hidden], [inert], [aria-hidden=\"true\"]") === null && element.getClientRects().length > 0;
+}
+function FontFamilyMenu(props) {
+	const [menuOpen, setMenuOpen] = createSignal(false);
+	const [restoreTriggerFocus, setRestoreTriggerFocus] = createSignal(false);
+	const [triggerElement, setTriggerElement] = createSignal();
+	let focusTargetAfterTab;
+	const moveFocusOnTab = (event) => {
+		if (event.key !== "Tab" || event.isComposing) return;
+		const trigger = triggerElement();
+		const owner = props.menuPortalMount;
+		const parentDialog = owner?.closest("[role=\"dialog\"]");
+		const focusScope = parentDialog ?? owner?.ownerDocument.body;
+		if (!trigger || !parentDialog || !focusScope) return;
+		const focusStops = Array.from(focusScope.querySelectorAll("*")).filter((element) => isMenuTabStop(element) && element.closest("[role=\"menu\"], [hidden], [inert], [aria-hidden=\"true\"]") === null);
+		const orderedFocusStops = [...focusStops.filter((element) => element.tabIndex > 0).toSorted((a, b) => a.tabIndex - b.tabIndex), ...focusStops.filter((element) => element.tabIndex <= 0)];
+		const triggerIndex = orderedFocusStops.indexOf(trigger);
+		if (triggerIndex < 0) return;
+		const direction = event.shiftKey ? -1 : 1;
+		const adjacent = orderedFocusStops[triggerIndex + direction] ?? (direction > 0 ? orderedFocusStops[0] : orderedFocusStops.at(-1));
+		event.stopPropagation();
+		setRestoreTriggerFocus(false);
+		if (adjacent) {
+			event.preventDefault();
+			focusTargetAfterTab = adjacent;
+			setMenuOpen(false);
+			adjacent.focus({ preventScroll: true });
+		} else {
+			focusTargetAfterTab = void 0;
+			setMenuOpen(false);
+		}
+	};
+	const selectedLabel = () => fontOptions.find((option) => option.id === props.family)?.label ?? fontOptions.find((option) => option.id === "system")?.label ?? "System";
+	return createComponent(DropdownMenu, {
+		modal: false,
+		get open() {
+			return menuOpen();
+		},
+		onOpenChange: (open) => {
+			setMenuOpen(open);
+			if (open) setRestoreTriggerFocus(false);
+		},
+		get children() {
+			return [createComponent(DropdownMenuTrigger, {
+				ref: setTriggerElement,
+				as: Button,
+				variant: "outline",
+				size: "sm",
+				get ["aria-label"]() {
+					return `${props.label} font family`;
+				},
+				get disabled() {
+					return props.disabled;
+				},
+				"class": "w-40 max-w-full justify-between",
+				get children() {
+					return [(() => {
+						var _el$ = _tmpl$();
+						insert(_el$, selectedLabel);
+						return _el$;
+					})(), createComponent(ChevronDown, {
+						"aria-hidden": "true",
+						"class": "ms-2 size-4 shrink-0 text-muted-foreground"
+					})];
+				}
+			}), createComponent(DropdownMenuContent, {
+				hideArrow: true,
+				get portalMount() {
+					return props.menuPortalMount;
+				},
+				"class": "min-w-48",
+				onFocusOutside: (event) => {
+					if (!event.defaultPrevented && props.menuPortalMount && event.detail.originalEvent.target === props.menuPortalMount) {
+						setRestoreTriggerFocus(true);
+						event.preventDefault();
+					} else if (event.detail.originalEvent.target instanceof HTMLElement && props.menuPortalMount?.contains(event.detail.originalEvent.target)) setRestoreTriggerFocus(false);
+				},
+				onInteractOutside: (event) => {
+					if (event.detail.originalEvent.type !== "pointerdown") return;
+					const owner = props.menuPortalMount;
+					const target = event.detail.originalEvent.target;
+					if (!(target instanceof Element) || !owner?.contains(target)) return;
+					const focusTarget = target.closest(MENU_FOCUS_TARGET_SELECTOR);
+					setRestoreTriggerFocus(!focusTarget || !isMenuTabStop(focusTarget));
+				},
+				onKeyDown: moveFocusOnTab,
+				onEscapeKeyDown: () => setRestoreTriggerFocus(true),
+				onCloseAutoFocus: (event) => {
+					if (menuOpen()) {
+						event.preventDefault();
+						return;
+					}
+					if (focusTargetAfterTab) {
+						const focusTarget = focusTargetAfterTab;
+						focusTargetAfterTab = void 0;
+						event.preventDefault();
+						queueMicrotask(() => {
+							if (!menuOpen() && focusTarget.isConnected) focusTarget.focus({ preventScroll: true });
+						});
+						return;
+					}
+					if (!restoreTriggerFocus()) return;
+					event.preventDefault();
+					setRestoreTriggerFocus(false);
+					const trigger = triggerElement();
+					if (trigger?.isConnected && !trigger.disabled && trigger.closest("[hidden], [inert], [aria-hidden=\"true\"]") === null && trigger.getClientRects().length > 0) trigger.focus({ preventScroll: true });
+				},
+				get children() {
+					return [
+						createComponent(DropdownMenuRadioGroup, {
+							get value() {
+								return props.family;
+							},
+							get ["aria-label"]() {
+								return `${props.label} system font`;
+							},
+							onChange: (family) => {
+								if (family === "system") props.onSelect("system");
+							},
+							get children() {
+								return createComponent(DropdownMenuRadioItem, {
+									value: "system",
+									closeOnSelect: true,
+									children: "System"
+								});
+							}
+						}),
+						createComponent(DropdownMenuSeparator, {}),
+						createComponent(DropdownMenuRadioGroup, {
+							get value() {
+								return props.family;
+							},
+							get ["aria-label"]() {
+								return `${props.label} available fonts`;
+							},
+							onChange: (family) => {
+								const option = fontOptions.find((candidate) => candidate.id === family);
+								if (option && option.id !== "system") props.onSelect(option.id);
+							},
+							get children() {
+								return createComponent(For, {
+									each: catalogFontOptions,
+									children: (option) => createComponent(DropdownMenuRadioItem, {
+										get value() {
+											return option.id;
+										},
+										closeOnSelect: true,
+										get children() {
+											return option.label;
+										}
+									})
+								});
+							}
+						})
+					];
+				}
+			})];
+		}
+	});
+}
+/** Controlled font controls shared by AppearanceEditor and host-owned settings. */
+function AppearanceFontSettingsGroup(props) {
+	const [sizeDrafts, setSizeDrafts] = createSignal({});
+	const sizeHintPrefix = createUniqueId();
+	const settings = createMemo(() => normalizeAppearanceEditorFontSettings(props.settings).settings);
+	const updateAxis = (axis, patch) => {
+		const current = settings();
+		props.onChange({
+			...current,
+			[axis]: {
+				...current[axis],
+				...patch
+			}
+		});
+	};
+	const commitSize = (axis) => {
+		const input = sizeDrafts()[axis];
+		if (input === void 0) return;
+		const size = normalizeAppearanceEditorFontSize(input, settings()[axis].size);
+		setSizeDrafts((current) => {
+			const next = { ...current };
+			delete next[axis];
+			return next;
+		});
+		if (size !== settings()[axis].size) updateAxis(axis, { size });
+	};
+	return (() => {
+		var _el$2 = _tmpl$2();
+		insert(_el$2, createComponent(For, {
+			each: FONT_ROWS,
+			children: (row) => {
+				const Icon = row.icon;
+				const value = () => settings()[row.axis];
+				const inputValue = () => sizeDrafts()[row.axis] ?? String(value().size);
+				const sizeHintId = `${sizeHintPrefix}-${row.axis}-font-size-help`;
+				const sizeIsInvalid = () => {
+					const draft = sizeDrafts()[row.axis];
+					if (draft === void 0 || draft.trim() === "") return false;
+					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 _el$2;
+	})();
+}
+//#endregion
+export { AppearanceFontSettingsGroup };
+
+//# sourceMappingURL=font-settings-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"font-settings-group.js","names":["BookOpen","ChevronDown","Code2","PanelsTopLeft","For","createMemo","createSignal","createUniqueId","fontOptions","Button","DropdownMenu","DropdownMenuContent","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuSeparator","DropdownMenuTrigger","InputControl","SettingsRow","APPEARANCE_EDITOR_FONT_SIZE_MAX","APPEARANCE_EDITOR_FONT_SIZE_MIN","normalizeAppearanceEditorFontSettings","normalizeAppearanceEditorFontSize","AppearanceEditorFontAxis","AppearanceEditorFontFamilyId","AppearanceEditorFontSettings","AppearanceFontSettingsGroupProps","settings","menuPortalMount","HTMLElement","onChange","disabled","FONT_ROWS","axis","label","description","icon","const","catalogFontOptions","filter","option","id","MENU_FOCUS_TARGET_SELECTOR","isMenuTabStop","element","tabIndex","matches","hasAttribute","getAttribute","closest","getClientRects","length","FontFamilyMenu","props","family","onSelect","menuOpen","setMenuOpen","restoreTriggerFocus","setRestoreTriggerFocus","triggerElement","setTriggerElement","HTMLButtonElement","focusTargetAfterTab","moveFocusOnTab","event","KeyboardEvent","key","isComposing","trigger","owner","parentDialog","focusScope","ownerDocument","body","focusStops","Array","from","querySelectorAll","orderedFocusStops","toSorted","a","b","triggerIndex","indexOf","direction","shiftKey","adjacent","at","stopPropagation","preventDefault","focus","preventScroll","undefined","selectedLabel","find","_$createComponent","modal","open","onOpenChange","children","ref","as","variant","size","aria-label","_el$","_tmpl$","_$insert","hideArrow","portalMount","onFocusOutside","defaultPrevented","detail","originalEvent","target","contains","onInteractOutside","type","Element","focusTarget","onKeyDown","onEscapeKeyDown","onCloseAutoFocus","queueMicrotask","isConnected","value","closeOnSelect","candidate","each","AppearanceFontSettingsGroup","sizeDrafts","setSizeDrafts","Partial","Record","sizeHintPrefix","updateAxis","patch","current","commitSize","input","next","_el$2","_tmpl$2","row","Icon","inputValue","String","sizeHintId","sizeIsInvalid","draft","trim","parsed","Number","isFinite","isInteger","title","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","nextSibling","_el$7","_el$1","_el$8","_el$10","_el$0","min","max","step","aria-invalid","onInput","currentTarget","onBlur","_$setAttribute","_$createComponent"],"sources":["../../../../src/components/composites/appearance-editor/font-settings-group.tsx"],"sourcesContent":["import { BookOpen, ChevronDown, Code2, PanelsTopLeft } from 'lucide-solid'\nimport { For, createMemo, createSignal, createUniqueId } from 'solid-js'\nimport { fontOptions } from '#lib/font-catalog'\nimport { Button } from '../../ui/button/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../ui/dropdown-menu/dropdown-menu'\nimport { InputControl } from '../../ui/input/input-control'\nimport { SettingsRow } from './appearance-rows'\nimport {\n  APPEARANCE_EDITOR_FONT_SIZE_MAX,\n  APPEARANCE_EDITOR_FONT_SIZE_MIN,\n  normalizeAppearanceEditorFontSettings,\n  normalizeAppearanceEditorFontSize,\n  type AppearanceEditorFontAxis,\n  type AppearanceEditorFontFamilyId,\n  type AppearanceEditorFontSettings,\n} from '#lib/appearance-font-settings'\n\nexport type AppearanceFontSettingsGroupProps = {\n  settings: AppearanceEditorFontSettings\n  menuPortalMount?: HTMLElement\n  onChange: (settings: AppearanceEditorFontSettings) => void\n  disabled?: boolean\n}\n\nconst FONT_ROWS = [\n  {\n    axis: 'ui',\n    label: 'UI',\n    description: 'Controls and interface labels.',\n    icon: PanelsTopLeft,\n  },\n  {\n    axis: 'content',\n    label: 'Content',\n    description: 'Reading and long-form text.',\n    icon: BookOpen,\n  },\n  {\n    axis: 'code',\n    label: 'Code',\n    description: 'Code, terminals, and file paths.',\n    icon: Code2,\n  },\n] as const satisfies readonly {\n  axis: AppearanceEditorFontAxis\n  label: string\n  description: string\n  icon: typeof PanelsTopLeft\n}[]\n\nconst catalogFontOptions = fontOptions.filter((option) => option.id !== 'system')\nconst MENU_FOCUS_TARGET_SELECTOR =\n  'a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type'\n\nfunction isMenuTabStop(element: HTMLElement) {\n  return (\n    (element.tabIndex >= 0 ||\n      (element.matches('details > summary:first-of-type') && !element.hasAttribute('tabindex'))) &&\n    !element.matches(':disabled') &&\n    element.getAttribute('aria-disabled') !== 'true' &&\n    element.closest('[hidden], [inert], [aria-hidden=\"true\"]') === null &&\n    element.getClientRects().length > 0\n  )\n}\n\nfunction FontFamilyMenu(props: {\n  label: string\n  family: AppearanceEditorFontFamilyId\n  menuPortalMount?: HTMLElement\n  disabled?: boolean\n  onSelect: (family: AppearanceEditorFontFamilyId) => void\n}) {\n  const [menuOpen, setMenuOpen] = createSignal(false)\n  const [restoreTriggerFocus, setRestoreTriggerFocus] = createSignal(false)\n  const [triggerElement, setTriggerElement] = createSignal<HTMLButtonElement>()\n  let focusTargetAfterTab: HTMLElement | undefined\n\n  const moveFocusOnTab = (event: KeyboardEvent) => {\n    if (event.key !== 'Tab' || event.isComposing) return\n\n    const trigger = triggerElement()\n    const owner = props.menuPortalMount\n    const parentDialog = owner?.closest<HTMLElement>('[role=\"dialog\"]')\n    const focusScope = parentDialog ?? owner?.ownerDocument.body\n    if (!trigger || !parentDialog || !focusScope) return\n\n    const focusStops = Array.from(focusScope.querySelectorAll<HTMLElement>('*')).filter(\n      (element) =>\n        isMenuTabStop(element) &&\n        element.closest('[role=\"menu\"], [hidden], [inert], [aria-hidden=\"true\"]') === null\n    )\n    const orderedFocusStops = [\n      ...focusStops\n        .filter((element) => element.tabIndex > 0)\n        .toSorted((a, b) => a.tabIndex - b.tabIndex),\n      ...focusStops.filter((element) => element.tabIndex <= 0),\n    ]\n    const triggerIndex = orderedFocusStops.indexOf(trigger)\n    if (triggerIndex < 0) return\n    const direction = event.shiftKey ? -1 : 1\n    const adjacent =\n      orderedFocusStops[triggerIndex + direction] ??\n      (direction > 0 ? orderedFocusStops[0] : orderedFocusStops.at(-1))\n\n    event.stopPropagation()\n    setRestoreTriggerFocus(false)\n    if (adjacent) {\n      event.preventDefault()\n      focusTargetAfterTab = adjacent\n      setMenuOpen(false)\n      adjacent.focus({ preventScroll: true })\n    } else {\n      focusTargetAfterTab = undefined\n      setMenuOpen(false)\n    }\n  }\n  const selectedLabel = () =>\n    fontOptions.find((option) => option.id === props.family)?.label ??\n    fontOptions.find((option) => option.id === 'system')?.label ??\n    'System'\n\n  return (\n    <DropdownMenu\n      modal={false}\n      open={menuOpen()}\n      onOpenChange={(open) => {\n        setMenuOpen(open)\n        if (open) setRestoreTriggerFocus(false)\n      }}\n    >\n      <DropdownMenuTrigger\n        ref={setTriggerElement}\n        as={Button}\n        variant=\"outline\"\n        size=\"sm\"\n        aria-label={`${props.label} font family`}\n        disabled={props.disabled}\n        class=\"w-40 max-w-full justify-between\"\n      >\n        <span class=\"truncate\">{selectedLabel()}</span>\n        <ChevronDown aria-hidden=\"true\" class=\"ms-2 size-4 shrink-0 text-muted-foreground\" />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        hideArrow\n        portalMount={props.menuPortalMount}\n        class=\"min-w-48\"\n        onFocusOutside={(event) => {\n          // WebKit may briefly focus the owning Popover root while the menu's\n          // focus scope starts. Keep the menu open for that transient target;\n          // genuine focus moves to another control still dismiss it.\n          if (\n            !event.defaultPrevented &&\n            props.menuPortalMount &&\n            event.detail.originalEvent.target === props.menuPortalMount\n          ) {\n            setRestoreTriggerFocus(true)\n            event.preventDefault()\n          } else if (\n            event.detail.originalEvent.target instanceof HTMLElement &&\n            props.menuPortalMount?.contains(event.detail.originalEvent.target)\n          ) {\n            setRestoreTriggerFocus(false)\n          }\n        }}\n        onInteractOutside={(event) => {\n          if (event.detail.originalEvent.type !== 'pointerdown') return\n          const owner = props.menuPortalMount\n          const target = event.detail.originalEvent.target\n          if (!(target instanceof Element) || !owner?.contains(target)) return\n\n          const focusTarget = target.closest<HTMLElement>(MENU_FOCUS_TARGET_SELECTOR)\n          setRestoreTriggerFocus(!focusTarget || !isMenuTabStop(focusTarget))\n        }}\n        onKeyDown={moveFocusOnTab}\n        onEscapeKeyDown={() => setRestoreTriggerFocus(true)}\n        onCloseAutoFocus={(event) => {\n          if (menuOpen()) {\n            event.preventDefault()\n            return\n          }\n          if (focusTargetAfterTab) {\n            const focusTarget = focusTargetAfterTab\n            focusTargetAfterTab = undefined\n            event.preventDefault()\n            queueMicrotask(() => {\n              if (!menuOpen() && focusTarget.isConnected) {\n                focusTarget.focus({ preventScroll: true })\n              }\n            })\n            return\n          }\n          if (!restoreTriggerFocus()) return\n\n          event.preventDefault()\n          setRestoreTriggerFocus(false)\n          const trigger = triggerElement()\n          if (\n            trigger?.isConnected &&\n            !trigger.disabled &&\n            trigger.closest('[hidden], [inert], [aria-hidden=\"true\"]') === null &&\n            trigger.getClientRects().length > 0\n          ) {\n            trigger.focus({ preventScroll: true })\n          }\n        }}\n      >\n        <DropdownMenuRadioGroup\n          value={props.family}\n          aria-label={`${props.label} system font`}\n          onChange={(family) => {\n            if (family === 'system') props.onSelect('system')\n          }}\n        >\n          <DropdownMenuRadioItem value=\"system\" closeOnSelect>\n            System\n          </DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuRadioGroup\n          value={props.family}\n          aria-label={`${props.label} available fonts`}\n          onChange={(family) => {\n            const option = fontOptions.find((candidate) => candidate.id === family)\n            if (option && option.id !== 'system') props.onSelect(option.id)\n          }}\n        >\n          <For each={catalogFontOptions}>\n            {(option) => (\n              <DropdownMenuRadioItem value={option.id} closeOnSelect>\n                {option.label}\n              </DropdownMenuRadioItem>\n            )}\n          </For>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/** Controlled font controls shared by AppearanceEditor and host-owned settings. */\nexport function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupProps) {\n  const [sizeDrafts, setSizeDrafts] = createSignal<\n    Partial<Record<AppearanceEditorFontAxis, string>>\n  >({})\n  const sizeHintPrefix = createUniqueId()\n  const settings = createMemo(() => normalizeAppearanceEditorFontSettings(props.settings).settings)\n\n  const updateAxis = (\n    axis: AppearanceEditorFontAxis,\n    patch: { family?: AppearanceEditorFontFamilyId; size?: number }\n  ) => {\n    const current = settings()\n    props.onChange({\n      ...current,\n      [axis]: {\n        ...current[axis],\n        ...patch,\n      },\n    })\n  }\n\n  const commitSize = (axis: AppearanceEditorFontAxis) => {\n    const input = sizeDrafts()[axis]\n    if (input === undefined) return\n    const size = normalizeAppearanceEditorFontSize(input, settings()[axis].size)\n    setSizeDrafts((current) => {\n      const next = { ...current }\n      delete next[axis]\n      return next\n    })\n    if (size !== settings()[axis].size) updateAxis(axis, { size })\n  }\n\n  return (\n    <div class=\"global-appearance-font-settings\">\n      <For each={FONT_ROWS}>\n        {(row) => {\n          const Icon = row.icon\n          const value = () => settings()[row.axis]\n          const inputValue = () => sizeDrafts()[row.axis] ?? String(value().size)\n          const sizeHintId = `${sizeHintPrefix}-${row.axis}-font-size-help`\n          const sizeIsInvalid = () => {\n            const draft = sizeDrafts()[row.axis]\n            if (draft === undefined || draft.trim() === '') return false\n            const parsed = Number(draft)\n            return (\n              !Number.isFinite(parsed) ||\n              !Number.isInteger(parsed) ||\n              parsed < APPEARANCE_EDITOR_FONT_SIZE_MIN ||\n              parsed > APPEARANCE_EDITOR_FONT_SIZE_MAX\n            )\n          }\n          return (\n            <SettingsRow title={row.label} icon={<Icon />} description={row.description}>\n              <div class=\"flex min-w-0 max-w-full flex-wrap items-center gap-2\">\n                <FontFamilyMenu\n                  label={row.label}\n                  family={value().family}\n                  menuPortalMount={props.menuPortalMount}\n                  disabled={props.disabled}\n                  onSelect={(family) => updateAxis(row.axis, { family })}\n                />\n                <div class=\"flex shrink-0 items-center gap-1\">\n                  <InputControl\n                    type=\"number\"\n                    min={APPEARANCE_EDITOR_FONT_SIZE_MIN}\n                    max={APPEARANCE_EDITOR_FONT_SIZE_MAX}\n                    step={1}\n                    value={inputValue()}\n                    disabled={props.disabled}\n                    aria-label={`${row.label} font size in pixels`}\n                    aria-describedby={sizeHintId}\n                    aria-invalid={sizeIsInvalid()}\n                    class=\"w-16\"\n                    onInput={(event) =>\n                      setSizeDrafts((current) => ({\n                        ...current,\n                        [row.axis]: event.currentTarget.value,\n                      }))\n                    }\n                    onBlur={() => commitSize(row.axis)}\n                    onKeyDown={(event) => {\n                      if (event.key !== 'Enter') return\n                      event.preventDefault()\n                      commitSize(row.axis)\n                    }}\n                  />\n                  <span aria-hidden=\"true\" class=\"text-xs text-muted-foreground\">\n                    px\n                  </span>\n                </div>\n                <span id={sizeHintId} class=\"sr-only\">\n                  Enter a whole number from {APPEARANCE_EDITOR_FONT_SIZE_MIN} to{' '}\n                  {APPEARANCE_EDITOR_FONT_SIZE_MAX} pixels.\n                </span>\n              </div>\n            </SettingsRow>\n          )\n        }}\n      </For>\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,6 @@
 export { AppearanceEditor, AppearancePopover } from './appearance-editor';
+export { AppearanceFontSettingsGroup, type AppearanceFontSettingsGroupProps, } from './font-settings-group';
+export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, applyAppearanceFontSettings, fontSettingsBootstrapScript, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, type AppearanceEditorFontAxis, type AppearanceEditorFontFamilyId, type AppearanceEditorFontSetting, type AppearanceEditorFontSettings, type NormalizedAppearanceEditorFontSettings, } from '#lib/appearance-font-settings';
 export type { AppearanceDraft, AppearanceEditorProps, AppearancePopoverProps, } from './appearance-types';
 export { ThemeMiniature, ThemeMiniatureSplit, PalettePreview, type ThemeMiniatureProps, } from './theme-preview';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACzE,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EACL,2BAA2B,EAC3B,KAAK,gCAAgC,GACtC,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,2BAA2B,EAC3B,+BAA+B,EAC/B,+BAA+B,EAC/B,uCAAuC,EACvC,2BAA2B,EAC3B,2BAA2B,EAC3B,qCAAqC,EACrC,iCAAiC,EACjC,KAAK,wBAAwB,EAC7B,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EACjC,KAAK,sCAAsC,GAC5C,MAAM,+BAA+B,CAAA;AACtC,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAA"}

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

@@ -1,3 +1,5 @@
+import { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, applyAppearanceFontSettings, fontSettingsBootstrapScript, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize } from "../../../lib/appearance-font-settings.js";
 import { PalettePreview, ThemeMiniature, ThemeMiniatureSplit } from "./theme-preview.js";
+import { AppearanceFontSettingsGroup } from "./font-settings-group.js";
 import { AppearanceEditor, AppearancePopover } from "./appearance-editor.js";
-export { AppearanceEditor, AppearancePopover, PalettePreview, ThemeMiniature, ThemeMiniatureSplit };
+export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AppearanceEditor, AppearanceFontSettingsGroup, AppearancePopover, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, PalettePreview, ThemeMiniature, ThemeMiniatureSplit, applyAppearanceFontSettings, fontSettingsBootstrapScript, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize };