@adea-ai/ui 0.97.1 → 0.97.3

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

@@ -1 +1 @@
-{"version":3,"file":"appearance-editor.js","names":["EyeOff","Palette","PanelsTopLeft","SlidersHorizontal","Show","createUniqueId","cn","Button","Input","Switch","Popover","PopoverContent","PopoverDescription","PopoverTitle","PopoverTrigger","AppearanceEditorProps","AppearancePopoverProps","ModeChoices","AccentChoices","GlassChoices","SettingsRow","ThemeRow","AppearanceEditor","props","errorId","saveReasonId","custom","draft","accent","accentOptions","some","option","id","accentDescription","name","find","label","glassDescription","surface","surfaceCapability","themeDefaultDescription","_el$","_tmpl$6","_el$3","firstChild","_el$9","nextSibling","_el$0","_$insert","_$createComponent","when","recoveryNotice","children","_el$2","_tmpl$","appearance","selectedId","lightThemeId","preview","lightTheme","themes","disabled","saving","onSelect","onChange","darkThemeId","darkTheme","title","icon","description","_el$4","_tmpl$3","_el$5","_$setAttribute","value","aria-invalid","customAccentError","aria-describedby","undefined","onInput","event","currentTarget","_el$6","_tmpl$2","_$memo","frosted","reason","_el$7","_tmpl$4","checked","reduceTransparency","onManageThemes","type","size","variant","onClick","saveDisabledReason","_el$8","_tmpl$5","onReset","onCancel","aria-busy","onSave","_$effect","_$className","class","AppearancePopover","open","modal","onOpenChange","onOpen","onDismiss","as","_$createComponent","_$memo","_$className"],"sources":["../../../../src/components/composites/appearance-editor/appearance-editor.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/*\n * Composition substantially translated from Zeron settings/appearance.rs and\n * settings/widgets.rs, pinned at 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59,\n * preserving Adea's existing appearance-surface.tsx port: System/Light/Dark\n * miniatures, compact independent theme rows, accent swatches and helper copy,\n * glass chips, and theme library affordance. Kobalte replaces the port's manual\n * radio keyboard model. The controlled draft and explicit action ports replace\n * GPUI globals and app-specific storage/native authority. Save/Cancel/Reset and\n * custom accent/reduced-transparency are accepted Adea divergences (#425).\n */\nimport { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from 'lucide-solid'\nimport { Show, createUniqueId } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button/button'\nimport { Input } from '../../ui/input/input'\n\nimport { Switch } from '../../ui/switch/switch'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverTitle,\n  PopoverTrigger,\n} from '../../ui/popover/popover'\nimport type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'\nimport { ModeChoices, AccentChoices, GlassChoices } from './appearance-choices'\nimport { SettingsRow, ThemeRow } from './appearance-rows'\n\n/**\n * A live editor whose persistence and preview authority belong to its host.\n * No ThemeProvider is required, and no catalogue, renderer engine or storage is\n * imported. Hosts normalize unknown IDs and custom colors, report recovery,\n * snapshot on open, preview on changes, commit on Save, and restore on dismissal.\n * Both theme rows remain mounted when mode changes. Typeface/density axes are\n * deliberately absent from Adea #425's accepted surface.\n */\nexport function AppearanceEditor(props: AppearanceEditorProps) {\n  const errorId = createUniqueId()\n  const saveReasonId = createUniqueId()\n  const custom = () =>\n    props.draft.accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === props.draft.accent)\n  const accentDescription = () => {\n    if (props.draft.accent === 'theme') return \"Theme default · Uses the palette's intended color.\"\n    const name = props.accentOptions.find((option) => option.id === props.draft.accent)?.label\n    return `${name ?? 'Custom'} · Controls, glyphs, selections, code, and activity.`\n  }\n  const glassDescription = () =>\n    props.draft.surface === 'opaque'\n      ? 'Solid surfaces for every theme.'\n      : props.draft.surface === 'frosted'\n        ? 'Theme-colored glass where supported.'\n        : (props.surfaceCapability.themeDefaultDescription ?? \"Uses this theme's default surface.\")\n  return (\n    <div data-appearance-editor class={cn('min-w-0', props.class)}>\n      <Show when={props.recoveryNotice}>\n        <p role=\"status\" class=\"px-4 py-2 text-sm text-muted-foreground\">\n          {props.recoveryNotice}\n        </p>\n      </Show>\n      <ModeChoices {...props} />\n      <div class=\"divide-y divide-border rounded-lg border\">\n        <ThemeRow\n          appearance=\"light\"\n          selectedId={props.draft.lightThemeId}\n          preview={props.lightTheme}\n          themes={props.themes}\n          disabled={props.saving}\n          onSelect={(lightThemeId) => props.onChange({ lightThemeId })}\n        />\n        <ThemeRow\n          appearance=\"dark\"\n          selectedId={props.draft.darkThemeId}\n          preview={props.darkTheme}\n          themes={props.themes}\n          disabled={props.saving}\n          onSelect={(darkThemeId) => props.onChange({ darkThemeId })}\n        />\n        <SettingsRow title=\"Accent\" icon={<SlidersHorizontal />} description={accentDescription()}>\n          <AccentChoices {...props} />\n        </SettingsRow>\n        <Show when={custom()}>\n          <div class=\"px-4 py-3\">\n            <label class=\"mb-2 block text-xs font-medium\" for={`${errorId}-input`}>\n              Custom accent\n            </label>\n            <Input\n              id={`${errorId}-input`}\n              value={props.draft.accent}\n              disabled={props.saving}\n              aria-invalid={!!props.customAccentError}\n              aria-describedby={props.customAccentError ? errorId : undefined}\n              onInput={(event) => props.onChange({ accent: event.currentTarget.value })}\n            />\n            <Show when={props.customAccentError}>\n              <p id={errorId} role=\"alert\" class=\"mt-1 text-xs text-foreground\">\n                {props.customAccentError}\n              </p>\n            </Show>\n          </div>\n        </Show>\n        <SettingsRow title=\"Glass\" icon={<PanelsTopLeft />} description={glassDescription()}>\n          <GlassChoices {...props} />\n        </SettingsRow>\n        <Show when={!props.surfaceCapability.frosted && props.surfaceCapability.reason}>\n          <p role=\"status\" class=\"px-4 py-2 text-xs text-muted-foreground\">\n            {props.surfaceCapability.reason}\n          </p>\n        </Show>\n        <SettingsRow\n          title=\"Reduce transparency\"\n          icon={<EyeOff />}\n          description=\"Prefer solid surfaces, including during live preview.\"\n        >\n          <Switch\n            checked={props.draft.reduceTransparency}\n            disabled={props.saving}\n            onChange={(reduceTransparency: boolean) => props.onChange({ reduceTransparency })}\n            aria-label=\"Reduce transparency\"\n          />\n        </SettingsRow>\n        <SettingsRow\n          title=\"Theme library\"\n          icon={<Palette />}\n          description={\n            props.onManageThemes\n              ? 'Manage themes through the application.'\n              : 'Theme import is unavailable.'\n          }\n        >\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={!props.onManageThemes || props.saving}\n            onClick={() => props.onManageThemes?.()}\n          >\n            Manage themes\n          </Button>\n        </SettingsRow>\n      </div>\n      <Show when={props.saveDisabledReason}>\n        <p id={saveReasonId} role=\"status\" class=\"px-4 pt-3 text-xs text-muted-foreground\">\n          {props.saveDisabledReason}\n        </p>\n      </Show>\n      {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the\n          editor scrolls with its host panel, and actions parked at the bottom\n          of a long form were unreachable without scrolling past every row. */}\n      <div class=\"sticky bottom-0 z-10 mt-2 flex flex-wrap items-center gap-2 border-t bg-background px-4 py-3\">\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={props.saving}\n          onClick={() => props.onReset()}\n        >\n          Reset\n        </Button>\n        <div class=\"ml-auto flex gap-2\">\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={props.saving}\n            onClick={() => props.onCancel()}\n          >\n            Cancel\n          </Button>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={props.saving || !!props.customAccentError || !!props.saveDisabledReason}\n            aria-busy={props.saving}\n            aria-describedby={props.saveDisabledReason ? saveReasonId : undefined}\n            onClick={() => props.onSave()}\n          >\n            {props.saving ? 'Saving…' : 'Save'}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/** Modal anchoring/dismissal and nested-menu behavior come from Kobalte.\n * Its measured available height also bounds scrolling, keeping footer actions\n * reachable when a narrow popup begins below its trigger. */\nexport function AppearancePopover(props: AppearancePopoverProps) {\n  return (\n    <Popover\n      open={props.open}\n      modal\n      onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}\n    >\n      <PopoverTrigger\n        as={Button}\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        aria-label=\"Appearance settings\"\n      >\n        <Palette />\n      </PopoverTrigger>\n      <PopoverContent class=\"w-lg max-w-[calc(100vw-2rem)] max-h-(--kb-popper-content-available-height) overflow-y-auto\">\n        <PopoverTitle>Appearance</PopoverTitle>\n        <PopoverDescription>\n          Changes preview immediately. Save keeps them; Cancel restores the previous appearance.\n        </PopoverDescription>\n        <AppearanceEditor {...props} />\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,SAAgBsB,iBAAiBC,OAA8B;CAC7D,MAAMC,UAAUnB,eAAe;CAC/B,MAAMoB,eAAepB,eAAe;CACpC,MAAMqB,eACJH,MAAMI,MAAMC,WAAW,WACvB,CAACL,MAAMM,cAAcC,MAAMC,WAAWA,OAAOC,OAAOT,MAAMI,MAAMC,MAAM;CACxE,MAAMK,0BAA0B;EAC9B,IAAIV,MAAMI,MAAMC,WAAW,SAAS,OAAO;EAE3C,OAAO,GADML,MAAMM,cAAcM,MAAMJ,WAAWA,OAAOC,OAAOT,MAAMI,MAAMC,MAAM,CAAC,EAAEQ,SACnE,SAAQ;CAC5B;CACA,MAAMC,yBACJd,MAAMI,MAAMW,YAAY,WACpB,oCACAf,MAAMI,MAAMW,YAAY,YACtB,yCACCf,MAAMgB,kBAAkBC,2BAA2B;CAC5D,cAAA;EAAA,IAAAC,OAAAC,QAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAD;EAAAI,OAAAP,MAAAQ,gBAEK7C,MAAI;GAAA,IAAC8C,OAAI;IAAA,OAAE3B,MAAM4B;GAAc;GAAA,IAAAC,WAAA;IAAA,IAAAC,QAAAC,OAAA;IAAAN,OAAAK,aAE3B9B,MAAM4B,cAAc;IAAA,OAAAE;GAAA;EAAA,CAAA,GAAAV,KAAA;EAAAK,OAAAP,MAAAQ,gBAGxBhC,aAAgBM,KAAK,GAAAoB,KAAA;EAAAK,OAAAL,OAAAM,gBAEnB5B,UAAQ;GACPkC,YAAU;GAAA,IACVC,aAAU;IAAA,OAAEjC,MAAMI,MAAM8B;GAAY;GAAA,IACpCC,UAAO;IAAA,OAAEnC,MAAMoC;GAAU;GAAA,IACzBC,SAAM;IAAA,OAAErC,MAAMqC;GAAM;GAAA,IACpBC,WAAQ;IAAA,OAAEtC,MAAMuC;GAAM;GACtBC,WAAWN,iBAAiBlC,MAAMyC,SAAS,EAAEP,aAAa,CAAC;EAAC,CAAA,GAAA,IAAA;EAAAT,OAAAL,OAAAM,gBAE7D5B,UAAQ;GACPkC,YAAU;GAAA,IACVC,aAAU;IAAA,OAAEjC,MAAMI,MAAMsC;GAAW;GAAA,IACnCP,UAAO;IAAA,OAAEnC,MAAM2C;GAAS;GAAA,IACxBN,SAAM;IAAA,OAAErC,MAAMqC;GAAM;GAAA,IACpBC,WAAQ;IAAA,OAAEtC,MAAMuC;GAAM;GACtBC,WAAWE,gBAAgB1C,MAAMyC,SAAS,EAAEC,YAAY,CAAC;EAAC,CAAA,GAAA,IAAA;EAAAjB,OAAAL,OAAAM,gBAE3D7B,aAAW;GAAC+C,OAAK;GAAA,IAAUC,OAAI;IAAA,OAAAnB,gBAAG9C,mBAAiB,CAAA,CAAA;GAAA;GAAA,IAAKkE,cAAW;IAAA,OAAEpC,kBAAkB;GAAC;GAAA,IAAAmB,WAAA;IAAA,OAAAH,gBACtF/B,eAAkBK,KAAK;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAyB,OAAAL,OAAAM,gBAEzB7C,MAAI;GAAA,IAAC8C,OAAI;IAAA,OAAExB,OAAO;GAAC;GAAA,IAAA0B,WAAA;IAAA,IAAAkB,QAAAC,QAAA,GAAAC,QAAAF,MAAA1B;IAAA6B,aAAAD,OAAA,OAEmC,GAAGhD,QAAO,OAAQ;IAAAwB,OAAAsB,OAAArB,gBAGpEzC,OAAK;KACJwB,IAAI,GAAGR,QAAO;KAAQ,IACtBkD,QAAK;MAAA,OAAEnD,MAAMI,MAAMC;KAAM;KAAA,IACzBiC,WAAQ;MAAA,OAAEtC,MAAMuC;KAAM;KAAA,KAAA,kBAAA;MAAA,OACR,CAAC,CAACvC,MAAMqD;KAAiB;KAAA,KAAA,sBAAA;MAAA,OACrBrD,MAAMqD,oBAAoBpD,UAAUsD,KAAAA;KAAS;KAC/DC,UAAUC,UAAUzD,MAAMyC,SAAS,EAAEpC,QAAQoD,MAAMC,cAAcP,MAAM,CAAC;IAAC,CAAA,GAAA,IAAA;IAAA1B,OAAAsB,OAAArB,gBAE1E7C,MAAI;KAAA,IAAC8C,OAAI;MAAA,OAAE3B,MAAMqD;KAAiB;KAAA,IAAAxB,WAAA;MAAA,IAAA8B,QAAAC,QAAA;MAAAV,aAAAS,OAAA,MAC1B1D,OAAO;MAAAwB,OAAAkC,aACX3D,MAAMqD,iBAAiB;MAAA,OAAAM;KAAA;IAAA,CAAA,GAAA,IAAA;IAAA,OAAAZ;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAtB,OAAAL,OAAAM,gBAK/B7B,aAAW;GAAC+C,OAAK;GAAA,IAASC,OAAI;IAAA,OAAAnB,gBAAG/C,eAAa,CAAA,CAAA;GAAA;GAAA,IAAKmE,cAAW;IAAA,OAAEhC,iBAAiB;GAAC;GAAA,IAAAe,WAAA;IAAA,OAAAH,gBAChF9B,cAAiBI,KAAK;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAyB,OAAAL,OAAAM,gBAExB7C,MAAI;GAAA,IAAC8C,OAAI;IAAA,OAAEkC,WAAA,CAAA,CAAA,CAAC7D,MAAMgB,kBAAkB8C,OAAO,CAAA,CAAA,KAAI9D,MAAMgB,kBAAkB+C;GAAM;GAAA,IAAAlC,WAAA;IAAA,IAAAmC,QAAAC,QAAA;IAAAxC,OAAAuC,aAEzEhE,MAAMgB,kBAAkB+C,MAAM;IAAA,OAAAC;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAvC,OAAAL,OAAAM,gBAGlC7B,aAAW;GACV+C,OAAK;GAAA,IACLC,OAAI;IAAA,OAAAnB,gBAAGjD,QAAM,CAAA,CAAA;GAAA;GACbqE,aAAW;GAAA,IAAAjB,WAAA;IAAA,OAAAH,gBAEVxC,QAAM;KAAA,IACLgF,UAAO;MAAA,OAAElE,MAAMI,MAAM+D;KAAkB;KAAA,IACvC7B,WAAQ;MAAA,OAAEtC,MAAMuC;KAAM;KACtBE,WAAW0B,uBAAgCnE,MAAMyC,SAAS,EAAE0B,mBAAmB,CAAC;KAAC,cAAA;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA1C,OAAAL,OAAAM,gBAIpF7B,aAAW;GACV+C,OAAK;GAAA,IACLC,OAAI;IAAA,OAAAnB,gBAAGhD,SAAO,CAAA,CAAA;GAAA;GAAA,IACdoE,cAAW;IAAA,OACT9C,MAAMoE,iBACF,2CACA;GAA8B;GAAA,IAAAvC,WAAA;IAAA,OAAAH,gBAGnC1C,QAAM;KACLqF,MAAI;KACJC,MAAI;KACJC,SAAO;KAAA,IACPjC,WAAQ;MAAA,OAAE,CAACtC,MAAMoE,kBAAkBpE,MAAMuC;KAAM;KAC/CiC,eAAexE,MAAMoE,iBAAiB;KAACvC,UAAA;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAJ,OAAAP,MAAAQ,gBAM5C7C,MAAI;GAAA,IAAC8C,OAAI;IAAA,OAAE3B,MAAMyE;GAAkB;GAAA,IAAA5C,WAAA;IAAA,IAAA6C,QAAAC,QAAA;IAAAzB,aAAAwB,OAAA,MAC3BxE,YAAY;IAAAuB,OAAAiD,aAChB1E,MAAMyE,kBAAkB;IAAA,OAAAC;GAAA;EAAA,CAAA,GAAApD,KAAA;EAAAG,OAAAH,OAAAI,gBAO1B1C,QAAM;GACLqF,MAAI;GACJC,MAAI;GACJC,SAAO;GAAA,IACPjC,WAAQ;IAAA,OAAEtC,MAAMuC;GAAM;GACtBiC,eAAexE,MAAM4E,QAAQ;GAAC/C,UAAA;EAAA,CAAA,GAAAL,KAAA;EAAAC,OAAAD,OAAAE,gBAK7B1C,QAAM;GACLqF,MAAI;GACJC,MAAI;GACJC,SAAO;GAAA,IACPjC,WAAQ;IAAA,OAAEtC,MAAMuC;GAAM;GACtBiC,eAAexE,MAAM6E,SAAS;GAAChD,UAAA;EAAA,CAAA,GAAA,IAAA;EAAAJ,OAAAD,OAAAE,gBAIhC1C,QAAM;GACLqF,MAAI;GACJC,MAAI;GAAA,IACJhC,WAAQ;IAAA,OAAEtC,MAAMuC,UAAU,CAAC,CAACvC,MAAMqD,qBAAqB,CAAC,CAACrD,MAAMyE;GAAkB;GAAA,KAAA,eAAA;IAAA,OACtEzE,MAAMuC;GAAM;GAAA,KAAA,sBAAA;IAAA,OACLvC,MAAMyE,qBAAqBvE,eAAeqD,KAAAA;GAAS;GACrEiB,eAAexE,MAAM+E,OAAO;GAAC,IAAAlD,WAAA;IAAA,OAE5B7B,MAAMuC,SAAS,YAAY;GAAM;EAAA,CAAA,GAAA,IAAA;EAAAyC,aAAAC,UAAA/D,MA3HPnC,GAAG,WAAWiB,MAAMkF,KAAK,CAAC,CAAA;EAAA,OAAAhE;CAAA,EAAA,CAAA;AAiIjE;;;;AAKA,SAAgBiE,kBAAkBnF,OAA+B;CAC/D,OAAA0B,gBACGvC,SAAO;EAAA,IACNiG,OAAI;GAAA,OAAEpF,MAAMoF;EAAI;EAChBC,OAAK;EACLC,eAAeF,SAAUA,OAAOpF,MAAMuF,OAAO,IAAIvF,MAAMwF,UAAU;EAAE,IAAA3D,WAAA;GAAA,OAAA,CAAAH,gBAElEnC,gBAAc;IACbkG,IAAIzG;IACJqF,MAAI;IACJE,SAAO;IACPD,MAAI;IAAA,cAAA;IAAA,IAAAzC,WAAA;KAAA,OAAAH,gBAGHhD,SAAO,CAAA,CAAA;IAAA;GAAA,CAAA,GAAAgD,gBAETtC,gBAAc;IAAA,SAAA;IAAA,IAAAyC,WAAA;KAAA,OAAA;MAAAH,gBACZpC,cAAY,EAAAuC,UAAA,aAAA,CAAA;MAAAH,gBACZrC,oBAAkB,EAAAwC,UAAA,yFAAA,CAAA;MAAAH,gBAGlB3B,kBAAqBC,KAAK;KAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAInC"}
+{"version":3,"file":"appearance-editor.js","names":["EyeOff","Palette","PanelsTopLeft","SlidersHorizontal","Show","createUniqueId","cn","Button","Input","Switch","Popover","PopoverContent","PopoverDescription","PopoverTitle","PopoverTrigger","AppearanceEditorProps","AppearancePopoverProps","ModeChoices","AccentChoices","GlassChoices","SettingsRow","TerminalRow","ThemeRow","AppearanceEditor","props","errorId","saveReasonId","custom","draft","accent","accentOptions","some","option","id","accentDescription","name","find","label","glassDescription","surface","surfaceCapability","themeDefaultDescription","_el$","_tmpl$6","_el$3","firstChild","_el$9","nextSibling","_el$0","_$insert","_$createComponent","when","recoveryNotice","children","_el$2","_tmpl$","appearance","selectedId","lightThemeId","preview","lightTheme","themes","disabled","saving","onSelect","onChange","darkThemeId","darkTheme","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 } 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 = () =>\n    props.draft.accent !== 'theme' &&\n    !props.accentOptions.some((option) => option.id === props.draft.accent)\n  const accentDescription = () => {\n    if (props.draft.accent === 'theme') return \"Theme default · Uses the palette's intended color.\"\n    const name = props.accentOptions.find((option) => option.id === props.draft.accent)?.label\n    return `${name ?? 'Custom'} · Controls, glyphs, selections, code, and activity.`\n  }\n  const glassDescription = () =>\n    props.draft.surface === 'opaque'\n      ? 'Solid surfaces for every theme.'\n      : props.draft.surface === 'frosted'\n        ? 'Theme-colored glass where supported.'\n        : (props.surfaceCapability.themeDefaultDescription ?? \"Uses this theme's default surface.\")\n  return (\n    <div data-appearance-editor class={cn('min-w-0', props.class)}>\n      <Show when={props.recoveryNotice}>\n        <p role=\"status\" class=\"px-4 py-2 text-sm text-muted-foreground\">\n          {props.recoveryNotice}\n        </p>\n      </Show>\n      <ModeChoices {...props} />\n      <div class=\"divide-y divide-border rounded-lg border\">\n        <ThemeRow\n          appearance=\"light\"\n          selectedId={props.draft.lightThemeId}\n          preview={props.lightTheme}\n          themes={props.themes}\n          disabled={props.saving}\n          onSelect={(lightThemeId) => props.onChange({ lightThemeId })}\n        />\n        <ThemeRow\n          appearance=\"dark\"\n          selectedId={props.draft.darkThemeId}\n          preview={props.darkTheme}\n          themes={props.themes}\n          disabled={props.saving}\n          onSelect={(darkThemeId) => props.onChange({ darkThemeId })}\n        />\n        {/* 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":"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"}

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

@@ -7,12 +7,15 @@ export declare function SettingsRow(props: {
     stacked?: boolean;
     children: JSX.Element;
 }): JSX.Element;
+/** One selectable palette in a theme menu. */
+export type ThemeOption = {
+    id: string;
+    name: string;
+    description?: string;
+    preview: AdeaTheme;
+};
 /**
- * A compact persistent theme choice. Kobalte handles menu navigation and
- * dismissal; this row moves Tab to the adjacent browser-reported stop because
- * menus consume Tab by default. Enumerating elements and checking their native
- * tabIndex keeps details summaries in the order while preserving explicit
- * tabindex overrides.
+ * A compact persistent theme choice for one appearance.
  */
 export declare function ThemeRow(props: {
     appearance: 'light' | 'dark';
@@ -22,4 +25,18 @@ export declare function ThemeRow(props: {
     disabled?: boolean;
     onSelect: (id: string) => void;
 }): JSX.Element;
+/**
+ * A terminal palette choice independent of the light/dark rows. The first
+ * option (`'theme'`) follows the interface theme, painted with the resolved
+ * preview; every catalogue record follows, both appearances, because the
+ * terminal paints one fixed ANSI palette rather than an appearance axis.
+ */
+export declare function TerminalRow(props: {
+    selectedId: string;
+    /** Resolved interface theme: the `theme` option's palette and the fallback. */
+    preview: AdeaTheme;
+    themes: readonly AdeaThemeRecord[];
+    disabled?: boolean;
+    onSelect: (id: string) => void;
+}): JSX.Element;
 //# sourceMappingURL=appearance-rows.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"appearance-rows.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-rows.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,EAAkD,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AA2BnF,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,eA4BA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,eA6NA"}
+{"version":3,"file":"appearance-rows.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-rows.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,EAAkD,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AA2BnF,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,eA4BA;AAED,8CAA8C;AAC9C,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,SAAS,CAAA;CACnB,CAAA;AA+PD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,eAwBA;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,+EAA+E;IAC/E,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B,eAgCA"}

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

@@ -1,16 +1,17 @@
 import { cn } from "../../../lib/utils.js";
 import { Button } from "../../ui/button/button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../../ui/dropdown-menu/dropdown-menu.js";
-import { PalettePreview } from "./theme-preview.js";
+import { PalettePreview, ThemeMenuPreview } from "./theme-preview.js";
 import { className, createComponent, effect, insert, template, use } from "solid-js/web";
-import { ChevronDown, Palette } from "lucide-solid";
+import { ChevronDown, Palette, SquareTerminal } from "lucide-solid";
 import { For, Show, createMemo, createSignal, onCleanup } from "solid-js";
 //#region src/components/composites/appearance-editor/appearance-rows.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<div class="mt-0.5 text-xs text-muted-foreground">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<section><div><span class="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-foreground/5 text-muted-foreground [&amp;_svg]:size-4"aria-hidden=true></span><div class=min-w-0><h3 class="text-sm font-medium"></h3></div></div><div class="min-w-0 max-w-full shrink-0">`);
 var _tmpl$3 = /*#__PURE__*/ template(`<span class="flex min-w-0 flex-1 items-center gap-2"><span class="min-w-0 flex-1 truncate">`);
 var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<span class="min-w-0 flex-1 truncate">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span aria-hidden=true class="line-clamp-2 max-w-44 text-2xs text-muted-foreground">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span class="flex min-w-0 flex-1 flex-col gap-0.5"><span class=truncate>`);
 var POINTER_FOCUS_TARGET_SELECTOR = "a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type";
 function isTabStop(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;
@@ -47,13 +48,15 @@ function SettingsRow(props) {
 	})();
 }
 /**
-* A compact persistent theme choice. Kobalte handles menu navigation and
-* dismissal; this row moves Tab to the adjacent browser-reported stop because
+* The shared theme picker. Kobalte handles menu navigation and dismissal;
+* this component moves Tab to the adjacent browser-reported stop because
 * menus consume Tab by default. Enumerating elements and checking their native
 * tabIndex keeps details summaries in the order while preserving explicit
-* tabindex overrides.
+* tabindex overrides. The menu width follows its content (bounded by the
+* popper's available width) so a long theme name and its description render
+* fully instead of truncating at the trigger's width.
 */
-function ThemeRow(props) {
+function ThemeSelectMenu(props) {
 	const [portalMount, setPortalMount] = createSignal();
 	const [triggerElement, setTriggerElement] = createSignal();
 	const [menuOpen, setMenuOpen] = createSignal(false);
@@ -64,9 +67,7 @@ function ThemeRow(props) {
 	onCleanup(() => {
 		focusLifecycleVersion += 1;
 	});
-	const options = createMemo(() => props.themes.filter((theme) => theme.appearance === props.appearance));
-	const selected = createMemo(() => options().find((theme) => theme.id === props.selectedId) ?? options().find((theme) => theme.id === props.preview.id));
-	const label = () => props.appearance === "light" ? "Light theme" : "Dark theme";
+	const selected = createMemo(() => props.options.find((option) => option.id === props.selectedId) ?? props.options.find((option) => option.id === props.triggerPreview.id));
 	const closeMenu = () => {
 		if (menuOpen()) focusLifecycleVersion += 1;
 		setMenuOpen(false);
@@ -97,6 +98,176 @@ function ThemeRow(props) {
 			closeMenu();
 		}
 	};
+	return (() => {
+		var _el$8 = _tmpl$4();
+		use(setPortalMount, _el$8);
+		insert(_el$8, createComponent(DropdownMenu, {
+			modal: false,
+			get open() {
+				return menuOpen();
+			},
+			onOpenChange: (open) => {
+				if (open !== menuOpen()) focusLifecycleVersion += 1;
+				setMenuOpen(open);
+				if (open) {
+					focusTargetAfterTab = void 0;
+					setFocusOutsideTarget(void 0);
+					setRestoreTriggerFocus(false);
+				}
+			},
+			get children() {
+				return [createComponent(DropdownMenuTrigger, {
+					ref: setTriggerElement,
+					as: Button,
+					variant: "outline",
+					size: "sm",
+					get ["aria-label"]() {
+						return props.label;
+					},
+					get disabled() {
+						return props.disabled || props.options.length === 0;
+					},
+					"class": "w-full justify-between sm:w-52",
+					get children() {
+						return [(() => {
+							var _el$9 = _tmpl$3(), _el$0 = _el$9.firstChild;
+							insert(_el$9, createComponent(PalettePreview, { get theme() {
+								return props.triggerPreview;
+							} }), _el$0);
+							insert(_el$0, () => selected()?.name ?? props.triggerPreview.name);
+							return _el$9;
+						})(), createComponent(ChevronDown, {
+							"aria-hidden": "true",
+							"class": "shrink-0 text-muted-foreground"
+						})];
+					}
+				}), createComponent(DropdownMenuContent, {
+					get portalMount() {
+						return portalMount();
+					},
+					"class": "max-h-(--kb-popper-content-available-height) w-max min-w-(--kb-popper-anchor-width) max-w-(--kb-popper-content-available-width) overflow-x-hidden overflow-y-auto",
+					onInteractOutside: (event) => {
+						if (event.detail.originalEvent.type !== "pointerdown") return;
+						const focusScope = portalMount()?.closest("[role=\"dialog\"]") ?? portalMount()?.ownerDocument.body;
+						const target = event.detail.originalEvent.target;
+						if (!(target instanceof Element) || !focusScope?.contains(target)) return;
+						const focusTarget = target.closest(POINTER_FOCUS_TARGET_SELECTOR);
+						if (focusTarget && isTabStop(focusTarget)) {
+							setRestoreTriggerFocus(false);
+							setFocusOutsideTarget(focusTarget);
+						} else setRestoreTriggerFocus(true);
+					},
+					onFocusOutside: (event) => {
+						const focusScope = portalMount()?.closest("[role=\"dialog\"]") ?? portalMount()?.ownerDocument.body;
+						const target = event.detail.originalEvent.target;
+						if (target === focusScope) event.preventDefault();
+						else if (target instanceof HTMLElement && focusScope?.contains(target)) {
+							setRestoreTriggerFocus(false);
+							setFocusOutsideTarget(target);
+						}
+					},
+					onEscapeKeyDown: () => setRestoreTriggerFocus(true),
+					onCloseAutoFocus: (event) => {
+						if (menuOpen()) {
+							event.preventDefault();
+							return;
+						}
+						const lifecycleVersion = focusLifecycleVersion;
+						const shouldRestore = restoreTriggerFocus();
+						const focusTarget = focusTargetAfterTab ?? focusOutsideTarget();
+						focusTargetAfterTab = void 0;
+						setFocusOutsideTarget(void 0);
+						setRestoreTriggerFocus(false);
+						if (shouldRestore) {
+							event.preventDefault();
+							triggerElement()?.focus({ preventScroll: true });
+							return;
+						}
+						const focusScope = portalMount()?.closest("[role=\"dialog\"]") ?? portalMount()?.ownerDocument.body;
+						if (focusTarget?.isConnected && focusScope?.contains(focusTarget)) {
+							event.preventDefault();
+							queueMicrotask(() => {
+								if (lifecycleVersion !== focusLifecycleVersion || menuOpen()) return;
+								const activeElement = document.activeElement;
+								const isMenuFocus = activeElement instanceof HTMLElement && activeElement.closest("[role=\"menu\"]") !== null;
+								const isTriggerFocus = activeElement === triggerElement();
+								if (activeElement !== focusTarget && (activeElement === document.body || activeElement === focusScope || isMenuFocus || isTriggerFocus)) focusTarget.focus({ preventScroll: true });
+							});
+							return;
+						}
+						const activeElement = document.activeElement;
+						if (focusScope && activeElement instanceof HTMLElement && activeElement !== focusScope && focusScope.contains(activeElement) && activeElement.closest("[role=\"menu\"]") === null) event.preventDefault();
+					},
+					get children() {
+						return createComponent(DropdownMenuRadioGroup, {
+							get value() {
+								return selected()?.id ?? "";
+							},
+							get ["aria-label"]() {
+								return `${props.label} options`;
+							},
+							"on:keydown": moveFocusOnTab,
+							onChange: (id) => {
+								if (!props.disabled && typeof id === "string") props.onSelect(id);
+							},
+							get children() {
+								return createComponent(For, {
+									get each() {
+										return props.options;
+									},
+									children: (option) => createComponent(DropdownMenuRadioItem, {
+										get value() {
+											return option.id;
+										},
+										get textValue() {
+											return option.name;
+										},
+										closeOnSelect: true,
+										get disabled() {
+											return props.disabled;
+										},
+										onSelect: () => setRestoreTriggerFocus(true),
+										get children() {
+											return [createComponent(ThemeMenuPreview, { get theme() {
+												return option.preview;
+											} }), (() => {
+												var _el$1 = _tmpl$6(), _el$10 = _el$1.firstChild;
+												insert(_el$10, () => option.name);
+												insert(_el$1, createComponent(Show, {
+													get when() {
+														return option.description;
+													},
+													get children() {
+														var _el$11 = _tmpl$5();
+														insert(_el$11, () => option.description);
+														return _el$11;
+													}
+												}), null);
+												return _el$1;
+											})()];
+										}
+									})
+								});
+							}
+						});
+					}
+				})];
+			}
+		}));
+		return _el$8;
+	})();
+}
+/**
+* A compact persistent theme choice for one appearance.
+*/
+function ThemeRow(props) {
+	const label = () => props.appearance === "light" ? "Light theme" : "Dark theme";
+	const options = createMemo(() => props.themes.filter((theme) => theme.appearance === props.appearance).map((theme) => ({
+		id: theme.id,
+		name: theme.name,
+		description: theme.description,
+		preview: theme
+	})));
 	return createComponent(SettingsRow, {
 		get title() {
 			return label();
@@ -105,154 +276,80 @@ function ThemeRow(props) {
 			return createComponent(Palette, {});
 		},
 		get children() {
-			var _el$8 = _tmpl$4();
-			use(setPortalMount, _el$8);
-			insert(_el$8, createComponent(DropdownMenu, {
-				modal: false,
-				get open() {
-					return menuOpen();
+			return createComponent(ThemeSelectMenu, {
+				get label() {
+					return label();
 				},
-				onOpenChange: (open) => {
-					if (open !== menuOpen()) focusLifecycleVersion += 1;
-					setMenuOpen(open);
-					if (open) {
-						focusTargetAfterTab = void 0;
-						setFocusOutsideTarget(void 0);
-						setRestoreTriggerFocus(false);
-					}
+				get selectedId() {
+					return props.selectedId;
 				},
-				get children() {
-					return [createComponent(DropdownMenuTrigger, {
-						ref: setTriggerElement,
-						as: Button,
-						variant: "outline",
-						size: "sm",
-						get ["aria-label"]() {
-							return label();
-						},
-						get disabled() {
-							return props.disabled || options().length === 0;
-						},
-						"class": "w-full justify-between sm:w-52",
-						get children() {
-							return [(() => {
-								var _el$9 = _tmpl$3(), _el$0 = _el$9.firstChild;
-								insert(_el$9, createComponent(PalettePreview, { get theme() {
-									return props.preview;
-								} }), _el$0);
-								insert(_el$0, () => selected()?.name ?? props.preview.name);
-								return _el$9;
-							})(), createComponent(ChevronDown, {
-								"aria-hidden": "true",
-								"class": "shrink-0 text-muted-foreground"
-							})];
-						}
-					}), createComponent(DropdownMenuContent, {
-						get portalMount() {
-							return portalMount();
-						},
-						"class": "max-h-(--kb-popper-content-available-height) w-(--kb-popper-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto",
-						onInteractOutside: (event) => {
-							if (event.detail.originalEvent.type !== "pointerdown") return;
-							const focusScope = portalMount()?.closest("[role=\"dialog\"]") ?? portalMount()?.ownerDocument.body;
-							const target = event.detail.originalEvent.target;
-							if (!(target instanceof Element) || !focusScope?.contains(target)) return;
-							const focusTarget = target.closest(POINTER_FOCUS_TARGET_SELECTOR);
-							if (focusTarget && isTabStop(focusTarget)) {
-								setRestoreTriggerFocus(false);
-								setFocusOutsideTarget(focusTarget);
-							} else setRestoreTriggerFocus(true);
-						},
-						onFocusOutside: (event) => {
-							const focusScope = portalMount()?.closest("[role=\"dialog\"]") ?? portalMount()?.ownerDocument.body;
-							const target = event.detail.originalEvent.target;
-							if (target === focusScope) event.preventDefault();
-							else if (target instanceof HTMLElement && focusScope?.contains(target)) {
-								setRestoreTriggerFocus(false);
-								setFocusOutsideTarget(target);
-							}
-						},
-						onEscapeKeyDown: () => setRestoreTriggerFocus(true),
-						onCloseAutoFocus: (event) => {
-							if (menuOpen()) {
-								event.preventDefault();
-								return;
-							}
-							const lifecycleVersion = focusLifecycleVersion;
-							const shouldRestore = restoreTriggerFocus();
-							const focusTarget = focusTargetAfterTab ?? focusOutsideTarget();
-							focusTargetAfterTab = void 0;
-							setFocusOutsideTarget(void 0);
-							setRestoreTriggerFocus(false);
-							if (shouldRestore) {
-								event.preventDefault();
-								triggerElement()?.focus({ preventScroll: true });
-								return;
-							}
-							const focusScope = portalMount()?.closest("[role=\"dialog\"]") ?? portalMount()?.ownerDocument.body;
-							if (focusTarget?.isConnected && focusScope?.contains(focusTarget)) {
-								event.preventDefault();
-								queueMicrotask(() => {
-									if (lifecycleVersion !== focusLifecycleVersion || menuOpen()) return;
-									const activeElement = document.activeElement;
-									const isMenuFocus = activeElement instanceof HTMLElement && activeElement.closest("[role=\"menu\"]") !== null;
-									const isTriggerFocus = activeElement === triggerElement();
-									if (activeElement !== focusTarget && (activeElement === document.body || activeElement === focusScope || isMenuFocus || isTriggerFocus)) focusTarget.focus({ preventScroll: true });
-								});
-								return;
-							}
-							const activeElement = document.activeElement;
-							if (focusScope && activeElement instanceof HTMLElement && activeElement !== focusScope && focusScope.contains(activeElement) && activeElement.closest("[role=\"menu\"]") === null) event.preventDefault();
-						},
-						get children() {
-							return createComponent(DropdownMenuRadioGroup, {
-								get value() {
-									return selected()?.id ?? "";
-								},
-								get ["aria-label"]() {
-									return `${label()} options`;
-								},
-								"on:keydown": moveFocusOnTab,
-								onChange: (id) => {
-									if (!props.disabled && typeof id === "string") props.onSelect(id);
-								},
-								get children() {
-									return createComponent(For, {
-										get each() {
-											return options();
-										},
-										children: (theme) => createComponent(DropdownMenuRadioItem, {
-											get value() {
-												return theme.id;
-											},
-											get textValue() {
-												return theme.name;
-											},
-											closeOnSelect: true,
-											get disabled() {
-												return props.disabled;
-											},
-											onSelect: () => setRestoreTriggerFocus(true),
-											get children() {
-												return [createComponent(PalettePreview, { theme }), (() => {
-													var _el$1 = _tmpl$5();
-													insert(_el$1, () => theme.name);
-													return _el$1;
-												})()];
-											}
-										})
-									});
-								}
-							});
-						}
-					})];
+				get triggerPreview() {
+					return props.preview;
+				},
+				get options() {
+					return options();
+				},
+				get disabled() {
+					return props.disabled;
+				},
+				get onSelect() {
+					return props.onSelect;
+				}
+			});
+		}
+	});
+}
+/**
+* A terminal palette choice independent of the light/dark rows. The first
+* option (`'theme'`) follows the interface theme, painted with the resolved
+* preview; every catalogue record follows, both appearances, because the
+* terminal paints one fixed ANSI palette rather than an appearance axis.
+*/
+function TerminalRow(props) {
+	const options = createMemo(() => [{
+		id: "theme",
+		name: "UI theme",
+		description: "Uses the interface theme.",
+		preview: props.preview
+	}, ...props.themes.map((theme) => ({
+		id: theme.id,
+		name: theme.name,
+		description: theme.description,
+		preview: theme
+	}))]);
+	const selectedOption = () => options().find((option) => option.id === props.selectedId);
+	const description = () => selectedOption() && selectedOption()?.id !== "theme" ? `The terminal follows ${selectedOption()?.name}.` : "The terminal follows the interface theme.";
+	return createComponent(SettingsRow, {
+		title: "Terminal",
+		get icon() {
+			return createComponent(SquareTerminal, {});
+		},
+		get description() {
+			return description();
+		},
+		get children() {
+			return createComponent(ThemeSelectMenu, {
+				label: "Terminal",
+				get selectedId() {
+					return props.selectedId;
+				},
+				get triggerPreview() {
+					return selectedOption()?.preview ?? props.preview;
+				},
+				get options() {
+					return options();
+				},
+				get disabled() {
+					return props.disabled;
+				},
+				get onSelect() {
+					return props.onSelect;
 				}
-			}));
-			return _el$8;
+			});
 		}
 	});
 }
 //#endregion
-export { SettingsRow, ThemeRow };
+export { SettingsRow, TerminalRow, ThemeRow };
 
 //# sourceMappingURL=appearance-rows.js.map