@adea-ai/ui 0.130.4 → 0.131.0

package/README.md

@@ -762,6 +762,21 @@ capability stays visibly unavailable. App-specific persisted versions and the
 legacy `translucent` value need an app-owned adapter to the editor's `theme`
 surface selection. The library does not silently migrate stored preferences.
 
+A host recomposes the editor through props, never by forking it. Every option keeps
+the default below, so an existing consumer renders as before:
+
+| Prop                       | Default    | What it changes                                                                                                                                                                                                                                                      |
+| -------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fontSettingsPlacement`    | `inline`   | `end` closes the option list with the typefaces, after Glass, Reduce transparency and Theme library.                                                                                                                                                                 |
+| `accentEntryStyle`         | `swatches` | `labels` renders every choice as a named chip. `row` draws the presets as circles in one equally spaced line (it holds at 320px, where the grid wraps) and turns Custom into a button that opens the native colour selector: only a chosen colour changes the draft. |
+| `showThemeDefaultAccent`   | `true`     | `false` drops the leading "Theme default" entry, for a host whose default accent already is a preset.                                                                                                                                                                |
+| `showCustomAccentCaption`  | `true`     | `false` drops the "Custom" caption over the `swatches` style's custom chip. No effect on `labels` or `row`.                                                                                                                                                          |
+| `showModeIcons`            | `false`    | A sun, moon or monitor glyph beside each mode card's label.                                                                                                                                                                                                          |
+| `triggerVariant` (popover) | `ghost`    | `toolbar` holds the pressed rung while the sheet is open and repeats the palette glyph in the tooltip, like the other toolbar actions.                                                                                                                               |
+
+`customAccentValue` seeds the native selector (`row`) and the draft the `swatches`
+Custom chip commits; hand it your starting colour.
+
 The component browser lane uses a real Vite/Solid/Tailwind build in headless
 Chromium without an app server. It checks keyboard mode selection, nested menu
 accessibility, focus and pointer dismissal, Escape, live-preview rollback,

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

@@ -23,6 +23,13 @@ type AccentSwatchGroupsProps = {
      * colour reads as a duplicate choice.
      */
     showThemeDefault?: boolean;
+    /**
+     * `grid` — the default — wraps at four to a line. `row` keeps every swatch on
+     * one line at a smaller size, the columns sharing the width equally, so a
+     * narrow panel does not wrap them; each colour is then the fill of an SVG
+     * circle, which is where a host that asserts on swatch colours reads it.
+     */
+    layout?: 'grid' | 'row';
 };
 /**
  * The accent choices, as ONE group: the theme's own primary first, then every

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

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

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

@@ -1,10 +1,12 @@
-import { createComponent, effect, insert, setStyleProperty, template } from "solid-js/web";
+import { cn } from "../../../lib/utils.js";
+import { className, createComponent, effect, insert, setAttribute, setStyleProperty, template } from "solid-js/web";
 import { For, Show } from "solid-js";
 import { RadioGroup } from "@kobalte/core/radio-group";
 //#region src/components/composites/appearance-editor/accent-swatch-groups.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="grid grid-cols-4 gap-2"data-accent-grid>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div data-accent-grid>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<svg class=size-full viewBox="0 0 16 16"aria-hidden=true><circle cx=8 cy=8 r=8>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<span class=sr-only>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span class="block size-full rounded-full"aria-hidden=true>`);
 /**
 * The accent choices, as ONE group: the theme's own primary first, then every
 * preset the host feeds, each painted with its value for the resolved
@@ -15,6 +17,7 @@ var _tmpl$3 = /*#__PURE__*/ template(`<span class=sr-only>`);
 */
 function AccentSwatchGroups(props) {
 	const presets = () => props.accentOptions.filter((option) => option.id !== "theme");
+	const row = () => props.layout === "row";
 	return (() => {
 		var _el$ = _tmpl$();
 		insert(_el$, createComponent(Show, {
@@ -27,6 +30,9 @@ function AccentSwatchGroups(props) {
 					label: "Theme default",
 					get color() {
 						return props.themeDefaultColor;
+					},
+					get row() {
+						return row();
 					}
 				});
 			}
@@ -44,9 +50,13 @@ function AccentSwatchGroups(props) {
 				},
 				get color() {
 					return (props.resolvedAppearance === "light" ? option.light : option.dark) ?? "";
+				},
+				get row() {
+					return row();
 				}
 			})
 		}), null);
+		effect(() => className(_el$, row() ? "grid auto-cols-fr grid-flow-col" : "grid grid-cols-4 gap-2"));
 		return _el$;
 	})();
 }
@@ -58,19 +68,35 @@ function AccentSwatch(props) {
 		get ["data-accent-option"]() {
 			return props.id;
 		},
-		"class": "rounded-full focus-within:ring-3 focus-within:ring-ring/50",
+		get ["class"]() {
+			return cn("rounded-full focus-within:ring-3 focus-within:ring-ring/50", { "flex justify-center": props.row });
+		},
 		get children() {
 			return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
-				"class": "block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
+				get ["class"]() {
+					return cn("block cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary", props.row ? "size-6" : "size-7");
+				},
 				get children() {
-					return [(() => {
-						var _el$2 = _tmpl$2();
-						effect((_$p) => setStyleProperty(_el$2, "background-color", props.color));
-						return _el$2;
-					})(), (() => {
-						var _el$3 = _tmpl$3();
-						insert(_el$3, () => props.label);
-						return _el$3;
+					return [createComponent(Show, {
+						get when() {
+							return props.row;
+						},
+						get fallback() {
+							return (() => {
+								var _el$5 = _tmpl$4();
+								effect((_$p) => setStyleProperty(_el$5, "background-color", props.color));
+								return _el$5;
+							})();
+						},
+						get children() {
+							var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+							effect(() => setAttribute(_el$3, "fill", props.color));
+							return _el$2;
+						}
+					}), (() => {
+						var _el$4 = _tmpl$3();
+						insert(_el$4, () => props.label);
+						return _el$4;
 					})()];
 				}
 			})];

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

@@ -1 +1 @@
-{"version":3,"file":"accent-swatch-groups.js","names":["RadioGroup","Radio","For","Show","AccentOption","Readonly","id","label","light","dark","AccentSwatchGroupsProps","accentOptions","themeAccentOptions","resolvedAppearance","themeDefaultColor","showThemeDefault","AccentSwatchGroups","props","presets","filter","option","_el$","_tmpl$","_$insert","_$createComponent","when","children","AccentSwatch","color","each","Item","value","data-accent-option","ItemInput","ItemLabel","_el$2","_tmpl$2","_$effect","_$p","_$setStyleProperty","_el$3","_tmpl$3","_$createComponent","Radio","_$setStyleProperty"],"sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\n\ntype AccentOption = Readonly<{\n  id: string\n  label: string\n  light?: string\n  dark?: string\n}>\n\ntype AccentSwatchGroupsProps = {\n  accentOptions: readonly AccentOption[]\n  /**\n   * Accepted for host compatibility and no longer rendered. The picker offers\n   * one theme-scoped group — the theme's own primary followed by the presets —\n   * instead of splitting additional presets and the theme pair's accent slots\n   * into labelled groups of their own. A stored theme-accent id still resolves\n   * (`resolveAccentPreset`) and is still described by the row; it is just no\n   * longer offered as a swatch, and a host can stop feeding this list.\n   */\n  themeAccentOptions?: readonly AccentOption[]\n  resolvedAppearance: 'light' | 'dark'\n  themeDefaultColor: string\n  /**\n   * Whether the group leads with the \"Theme default\" swatch. Hosts whose\n   * default accent already is a preset omit it — a second entry for the same\n   * colour reads as a duplicate choice.\n   */\n  showThemeDefault?: boolean\n}\n\n/**\n * The accent choices, as ONE group: the theme's own primary first, then every\n * preset the host feeds, each painted with its value for the resolved\n * appearance — which is what makes the group theme-scoped rather than a\n * catalogue table. The custom-color entry is the host's (`AccentChoices`\n * renders it beside this grid), because whether a free-form colour is accepted\n * is the host's validation to own.\n */\nexport function AccentSwatchGroups(props: AccentSwatchGroupsProps) {\n  const presets = () => props.accentOptions.filter((option) => option.id !== 'theme')\n\n  return (\n    <div class=\"grid grid-cols-4 gap-2\" data-accent-grid>\n      <Show when={props.showThemeDefault ?? true}>\n        <AccentSwatch id=\"theme\" label=\"Theme default\" color={props.themeDefaultColor} />\n      </Show>\n      <For each={presets()}>\n        {(option) => (\n          <AccentSwatch\n            id={option.id}\n            label={option.label}\n            color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n          />\n        )}\n      </For>\n    </div>\n  )\n}\n\nfunction AccentSwatch(props: { id: string; label: string; color: string }) {\n  return (\n    <Radio.Item\n      value={props.id}\n      data-accent-option={props.id}\n      class=\"rounded-full focus-within:ring-3 focus-within:ring-ring/50\"\n    >\n      <Radio.ItemInput />\n      <Radio.ItemLabel class=\"block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n        <span\n          class=\"block size-full rounded-full\"\n          aria-hidden=\"true\"\n          style={{ 'background-color': props.color }}\n        />\n        <span class=\"sr-only\">{props.label}</span>\n      </Radio.ItemLabel>\n    </Radio.Item>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AA8DA,SAAgBgB,mBAAmBC,OAAgC;CACjE,MAAMC,gBAAgBD,MAAMN,cAAcQ,QAAQC,WAAWA,OAAOd,OAAO,OAAO;CAElF,cAAA;EAAA,IAAAe,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,gBAEKrB,MAAI;GAAA,IAACsB,OAAI;IAAA,OAAER,MAAMF,oBAAoB;GAAI;GAAA,IAAAW,WAAA;IAAA,OAAAF,gBACvCG,cAAY;KAACrB,IAAE;KAASC,OAAK;KAAA,IAAiBqB,QAAK;MAAA,OAAEX,MAAMH;KAAiB;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAS,OAAAF,MAAAG,gBAE9EtB,KAAG;GAAA,IAAC2B,OAAI;IAAA,OAAEX,QAAQ;GAAC;GAAAQ,WAChBN,WAAMI,gBACLG,cAAY;IAAA,IACXrB,KAAE;KAAA,OAAEc,OAAOd;IAAE;IAAA,IACbC,QAAK;KAAA,OAAEa,OAAOb;IAAK;IAAA,IACnBqB,QAAK;KAAA,QAAGX,MAAMJ,uBAAuB,UAAUO,OAAOZ,QAAQY,OAAOX,SAAS;IAAE;GAAA,CAAA;EAEnF,CAAA,GAAA,IAAA;EAAA,OAAAY;CAAA,EAAA,CAAA;AAIT;AAEA,SAASM,aAAaV,OAAqD;CACzE,OAAAO,gBACGvB,WAAM6B,MAAI;EAAA,IACTC,QAAK;GAAA,OAAEd,MAAMX;EAAE;EAAA,KAAA,wBAAA;GAAA,OACKW,MAAMX;EAAE;EAAA,SAAA;EAAA,IAAAoB,WAAA;GAAA,OAAA,CAAAF,gBAG3BvB,WAAMgC,WAAS,CAAA,CAAA,GAAAT,gBACfvB,WAAMiC,WAAS;IAAA,SAAA;IAAA,IAAAR,WAAA;KAAA,OAAA,QAAA;MAAA,IAAAS,QAAAC,QAAA;MAAAC,QAAAC,QAAAC,iBAAAJ,OAAA,oBAIiBlB,MAAMW,KAAK,CAAA;MAAA,OAAAO;KAAA,EAAA,CAAA,UAAA;MAAA,IAAAK,QAAAC,QAAA;MAAAlB,OAAAiB,aAEnBvB,MAAMV,KAAK;MAAA,OAAAiC;KAAA,EAAA,CAAA,CAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAI1C"}
+{"version":3,"file":"accent-swatch-groups.js","names":["RadioGroup","Radio","For","Show","cn","AccentOption","Readonly","id","label","light","dark","AccentSwatchGroupsProps","accentOptions","themeAccentOptions","resolvedAppearance","themeDefaultColor","showThemeDefault","layout","AccentSwatchGroups","props","presets","filter","option","row","_el$","_tmpl$","_$insert","_$createComponent","when","children","AccentSwatch","color","each","_$effect","_$className","Item","value","data-accent-option","class","ItemInput","ItemLabel","fallback","_el$5","_tmpl$4","_$p","_$setStyleProperty","_el$2","_tmpl$2","_el$3","firstChild","_$setAttribute","_el$4","_tmpl$3","_$createComponent","_$className","Radio","_$setStyleProperty","_$setAttribute"],"sources":["../../../../src/components/composites/appearance-editor/accent-swatch-groups.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\nimport { cn } from '#lib/utils'\n\ntype AccentOption = Readonly<{\n  id: string\n  label: string\n  light?: string\n  dark?: string\n}>\n\ntype AccentSwatchGroupsProps = {\n  accentOptions: readonly AccentOption[]\n  /**\n   * Accepted for host compatibility and no longer rendered. The picker offers\n   * one theme-scoped group — the theme's own primary followed by the presets —\n   * instead of splitting additional presets and the theme pair's accent slots\n   * into labelled groups of their own. A stored theme-accent id still resolves\n   * (`resolveAccentPreset`) and is still described by the row; it is just no\n   * longer offered as a swatch, and a host can stop feeding this list.\n   */\n  themeAccentOptions?: readonly AccentOption[]\n  resolvedAppearance: 'light' | 'dark'\n  themeDefaultColor: string\n  /**\n   * Whether the group leads with the \"Theme default\" swatch. Hosts whose\n   * default accent already is a preset omit it — a second entry for the same\n   * colour reads as a duplicate choice.\n   */\n  showThemeDefault?: boolean\n  /**\n   * `grid` — the default — wraps at four to a line. `row` keeps every swatch on\n   * one line at a smaller size, the columns sharing the width equally, so a\n   * narrow panel does not wrap them; each colour is then the fill of an SVG\n   * circle, which is where a host that asserts on swatch colours reads it.\n   */\n  layout?: 'grid' | 'row'\n}\n\n/**\n * The accent choices, as ONE group: the theme's own primary first, then every\n * preset the host feeds, each painted with its value for the resolved\n * appearance — which is what makes the group theme-scoped rather than a\n * catalogue table. The custom-color entry is the host's (`AccentChoices`\n * renders it beside this grid), because whether a free-form colour is accepted\n * is the host's validation to own.\n */\nexport function AccentSwatchGroups(props: AccentSwatchGroupsProps) {\n  const presets = () => props.accentOptions.filter((option) => option.id !== 'theme')\n  const row = () => props.layout === 'row'\n\n  return (\n    <div\n      class={row() ? 'grid auto-cols-fr grid-flow-col' : 'grid grid-cols-4 gap-2'}\n      data-accent-grid\n    >\n      <Show when={props.showThemeDefault ?? true}>\n        <AccentSwatch\n          id=\"theme\"\n          label=\"Theme default\"\n          color={props.themeDefaultColor}\n          row={row()}\n        />\n      </Show>\n      <For each={presets()}>\n        {(option) => (\n          <AccentSwatch\n            id={option.id}\n            label={option.label}\n            color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}\n            row={row()}\n          />\n        )}\n      </For>\n    </div>\n  )\n}\n\nfunction AccentSwatch(props: { id: string; label: string; color: string; row: boolean }) {\n  return (\n    <Radio.Item\n      value={props.id}\n      data-accent-option={props.id}\n      class={cn('rounded-full focus-within:ring-3 focus-within:ring-ring/50', {\n        'flex justify-center': props.row,\n      })}\n    >\n      <Radio.ItemInput />\n      <Radio.ItemLabel\n        class={cn(\n          'block cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',\n          props.row ? 'size-6' : 'size-7'\n        )}\n      >\n        <Show\n          when={props.row}\n          fallback={\n            <span\n              class=\"block size-full rounded-full\"\n              aria-hidden=\"true\"\n              style={{ 'background-color': props.color }}\n            />\n          }\n        >\n          <svg class=\"size-full\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <circle cx=\"8\" cy=\"8\" r=\"8\" fill={props.color} />\n          </svg>\n        </Show>\n        <span class=\"sr-only\">{props.label}</span>\n      </Radio.ItemLabel>\n    </Radio.Item>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,SAAgBkB,mBAAmBC,OAAgC;CACjE,MAAMC,gBAAgBD,MAAMP,cAAcS,QAAQC,WAAWA,OAAOf,OAAO,OAAO;CAClF,MAAMgB,YAAYJ,MAAMF,WAAW;CAEnC,cAAA;EAAA,IAAAO,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,gBAKKxB,MAAI;GAAA,IAACyB,OAAI;IAAA,OAAET,MAAMH,oBAAoB;GAAI;GAAA,IAAAa,WAAA;IAAA,OAAAF,gBACvCG,cAAY;KACXvB,IAAE;KACFC,OAAK;KAAA,IACLuB,QAAK;MAAA,OAAEZ,MAAMJ;KAAiB;KAAA,IAC9BQ,MAAG;MAAA,OAAEA,IAAI;KAAC;IAAA,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAG,OAAAF,MAAAG,gBAGbzB,KAAG;GAAA,IAAC8B,OAAI;IAAA,OAAEZ,QAAQ;GAAC;GAAAS,WAChBP,WAAMK,gBACLG,cAAY;IAAA,IACXvB,KAAE;KAAA,OAAEe,OAAOf;IAAE;IAAA,IACbC,QAAK;KAAA,OAAEc,OAAOd;IAAK;IAAA,IACnBuB,QAAK;KAAA,QAAGZ,MAAML,uBAAuB,UAAUQ,OAAOb,QAAQa,OAAOZ,SAAS;IAAE;IAAA,IAChFa,MAAG;KAAA,OAAEA,IAAI;IAAC;GAAA,CAAA;EAEb,CAAA,GAAA,IAAA;EAAAU,aAAAC,UAAAV,MAnBID,IAAI,IAAI,oCAAoC,wBAAwB,CAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAuBjF;AAEA,SAASM,aAAaX,OAAmE;CACvF,OAAAQ,gBACG1B,WAAMkC,MAAI;EAAA,IACTC,QAAK;GAAA,OAAEjB,MAAMZ;EAAE;EAAA,KAAA,wBAAA;GAAA,OACKY,MAAMZ;EAAE;EAAA,KAAA,WAAA;GAAA,OACrBH,GAAG,8DAA8D,EACtE,uBAAuBe,MAAMI,IAC/B,CAAC;EAAC;EAAA,IAAAM,WAAA;GAAA,OAAA,CAAAF,gBAED1B,WAAMsC,WAAS,CAAA,CAAA,GAAAZ,gBACf1B,WAAMuC,WAAS;IAAA,KAAA,WAAA;KAAA,OACPpC,GACL,kIACAe,MAAMI,MAAM,WAAW,QACzB;IAAC;IAAA,IAAAM,WAAA;KAAA,OAAA,CAAAF,gBAEAxB,MAAI;MAAA,IACHyB,OAAI;OAAA,OAAET,MAAMI;MAAG;MAAA,IACfkB,WAAQ;OAAA,cAAA;QAAA,IAAAC,QAAAC,QAAA;QAAAV,QAAAW,QAAAC,iBAAAH,OAAA,oBAIyBvB,MAAMY,KAAK,CAAA;QAAA,OAAAW;OAAA,EAAA,CAAA;MAAA;MAAA,IAAAb,WAAA;OAAA,IAAAiB,QAAAC,QAAA,GAAAC,QAAAF,MAAAG;OAAAhB,aAAAiB,aAAAF,OAAA,QAKR7B,MAAMY,KAAK,CAAA;OAAA,OAAAe;MAAA;KAAA,CAAA,UAAA;MAAA,IAAAK,QAAAC,QAAA;MAAA1B,OAAAyB,aAG1BhC,MAAMX,KAAK;MAAA,OAAA2C;KAAA,EAAA,CAAA,CAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAI1C"}

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

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

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

@@ -1,15 +1,20 @@
+import { Button } from "../../ui/button/button.js";
+import { Input } from "../../ui/input/input.js";
 import { isThemeAccentId } from "../../../lib/theme-accents.js";
 import { AccentSwatchGroups } from "./accent-swatch-groups.js";
 import { ThemeMiniature, ThemeMiniatureSplit } from "./theme-preview.js";
 import { createComponent, insert, memo, template } from "solid-js/web";
+import { Monitor, Moon, Sun } from "lucide-solid";
 import { For, Show } from "solid-js";
 import { RadioGroup } from "@kobalte/core/radio-group";
 //#region src/components/composites/appearance-editor/appearance-choices.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<span class="block h-20 w-full">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div class="grid grid-cols-2 gap-2 sm:grid-cols-3"data-accent-grid>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<span class="text-xs font-medium text-muted-foreground">Custom`);
-var _tmpl$5 = /*#__PURE__*/ template(`<div class="flex flex-col gap-1">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class="flex items-center justify-center gap-1.5">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div class="flex w-full min-w-0 items-center gap-2"data-accent-choices>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div class="grid grid-cols-2 gap-2 sm:grid-cols-3"data-accent-grid>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span class="text-xs font-medium text-muted-foreground">Custom`);
+var _tmpl$7 = /*#__PURE__*/ template(`<div class="flex flex-col gap-1">`);
 var MODES = [
 	{
 		value: "system",
@@ -38,6 +43,11 @@ var SURFACES = [
 		label: "Opaque"
 	}
 ];
+var MODE_ICONS = {
+	system: Monitor,
+	light: Sun,
+	dark: Moon
+};
 function ModeChoices(props) {
 	return createComponent(RadioGroup, {
 		get value() {
@@ -56,50 +66,69 @@ function ModeChoices(props) {
 		get children() {
 			return createComponent(For, {
 				each: MODES,
-				children: (option) => createComponent(RadioGroup.Item, {
-					get value() {
-						return option.value;
-					},
-					get ["data-mode"]() {
-						return option.value;
-					},
-					"class": "min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50",
-					get children() {
-						return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
-							"class": "flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
-							get children() {
-								return [(() => {
-									var _el$ = _tmpl$();
-									insert(_el$, createComponent(Show, {
+				children: (option) => {
+					const Icon = MODE_ICONS[option.value];
+					return createComponent(RadioGroup.Item, {
+						get value() {
+							return option.value;
+						},
+						get ["data-mode"]() {
+							return option.value;
+						},
+						"class": "min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50",
+						get children() {
+							return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
+								"class": "flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+								get children() {
+									return [(() => {
+										var _el$ = _tmpl$();
+										insert(_el$, createComponent(Show, {
+											get when() {
+												return option.value === "system";
+											},
+											get fallback() {
+												return createComponent(ThemeMiniature, { get theme() {
+													return memo(() => option.value === "light")() ? props.lightTheme : props.darkTheme;
+												} });
+											},
+											get children() {
+												return createComponent(ThemeMiniatureSplit, {
+													get light() {
+														return props.lightTheme;
+													},
+													get dark() {
+														return props.darkTheme;
+													}
+												});
+											}
+										}));
+										return _el$;
+									})(), createComponent(Show, {
 										get when() {
-											return option.value === "system";
+											return props.showModeIcons;
 										},
 										get fallback() {
-											return createComponent(ThemeMiniature, { get theme() {
-												return memo(() => option.value === "light")() ? props.lightTheme : props.darkTheme;
-											} });
+											return (() => {
+												var _el$3 = _tmpl$3();
+												insert(_el$3, () => option.label);
+												return _el$3;
+											})();
 										},
 										get children() {
-											return createComponent(ThemeMiniatureSplit, {
-												get light() {
-													return props.lightTheme;
-												},
-												get dark() {
-													return props.darkTheme;
-												}
-											});
+											var _el$2 = _tmpl$2();
+											insert(_el$2, createComponent(Icon, {
+												"aria-hidden": "true",
+												"class": "size-3.5"
+											}), null);
+											insert(_el$2, () => option.label, null);
+											return _el$2;
 										}
-									}));
-									return _el$;
-								})(), (() => {
-									var _el$2 = _tmpl$2();
-									insert(_el$2, () => option.label);
-									return _el$2;
-								})()];
-							}
-						})];
-					}
-				})
+									})];
+								}
+							})];
+						}
+					});
+				}
 			});
 		}
 	});
@@ -118,6 +147,8 @@ function AccentChoices(props) {
 	const resolvedAppearance = () => props.draft.mode === "system" ? props.resolvedAppearance : props.draft.mode;
 	const accentSelection = () => isCustomAccent(props) ? "custom" : props.draft.accent;
 	const showThemeDefault = () => props.showThemeDefaultAccent ?? true;
+	const entryStyle = () => props.accentEntryStyle ?? "swatches";
+	const themeDefaultColor = () => resolvedAppearance() === "light" ? props.lightTheme.colors.accent : props.darkTheme.colors.accent;
 	const labelEntries = () => {
 		const presets = props.accentOptions.filter((option) => option.id !== "theme");
 		return showThemeDefault() ? [{
@@ -125,24 +156,124 @@ function AccentChoices(props) {
 			label: "Theme default"
 		}, ...presets] : presets;
 	};
-	return createComponent(RadioGroup, {
-		get value() {
-			return accentSelection();
+	let colorPicker;
+	const openCustomColor = () => {
+		if (!colorPicker || props.saving) return;
+		if (typeof colorPicker.showPicker === "function") colorPicker.showPicker();
+		else colorPicker.click();
+	};
+	return createComponent(Show, {
+		get when() {
+			return entryStyle() === "row";
 		},
-		get disabled() {
-			return props.saving;
+		get fallback() {
+			return createComponent(RadioGroup, {
+				get value() {
+					return accentSelection();
+				},
+				get disabled() {
+					return props.saving;
+				},
+				orientation: "horizontal",
+				"aria-label": "Accent",
+				"class": "flex flex-col items-start gap-3",
+				onChange: (accent) => props.onChange({ accent: accent === "custom" ? props.customAccentValue ?? "" : accent }),
+				get children() {
+					return createComponent(Show, {
+						get when() {
+							return entryStyle() === "labels";
+						},
+						get fallback() {
+							return [createComponent(AccentSwatchGroups, {
+								get accentOptions() {
+									return props.accentOptions;
+								},
+								get resolvedAppearance() {
+									return resolvedAppearance();
+								},
+								get showThemeDefault() {
+									return showThemeDefault();
+								},
+								get themeDefaultColor() {
+									return themeDefaultColor();
+								}
+							}), (() => {
+								var _el$6 = _tmpl$7();
+								insert(_el$6, createComponent(Show, {
+									get when() {
+										return props.showCustomAccentCaption ?? true;
+									},
+									get children() {
+										return _tmpl$6();
+									}
+								}), null);
+								insert(_el$6, createComponent(RadioGroup.Item, {
+									value: "custom",
+									get children() {
+										return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
+											"class": "flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
+											children: "Custom"
+										})];
+									}
+								}), null);
+								return _el$6;
+							})()];
+						},
+						get children() {
+							var _el$5 = _tmpl$5();
+							insert(_el$5, createComponent(For, {
+								get each() {
+									return labelEntries();
+								},
+								children: (option) => createComponent(RadioGroup.Item, {
+									get value() {
+										return option.id;
+									},
+									"class": "min-w-0",
+									get ["data-accent-option"]() {
+										return option.id;
+									},
+									get children() {
+										return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
+											"class": "flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
+											get children() {
+												return option.label;
+											}
+										})];
+									}
+								})
+							}), null);
+							insert(_el$5, createComponent(RadioGroup.Item, {
+								value: "custom",
+								"class": "min-w-0",
+								get children() {
+									return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
+										"class": "flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
+										children: "Custom"
+									})];
+								}
+							}), null);
+							return _el$5;
+						}
+					});
+				}
+			});
 		},
-		orientation: "horizontal",
-		"aria-label": "Accent",
-		"class": "flex flex-col items-start gap-3",
-		onChange: (accent) => props.onChange({ accent: accent === "custom" ? props.customAccentValue ?? "" : accent }),
 		get children() {
-			return createComponent(Show, {
-				get when() {
-					return (props.accentEntryStyle ?? "swatches") === "labels";
+			var _el$4 = _tmpl$4();
+			insert(_el$4, createComponent(RadioGroup, {
+				get value() {
+					return accentSelection();
+				},
+				get disabled() {
+					return props.saving;
 				},
-				get fallback() {
-					return [createComponent(AccentSwatchGroups, {
+				orientation: "horizontal",
+				"aria-label": "Accent",
+				"class": "min-w-0 flex-1",
+				onChange: (accent) => props.onChange({ accent }),
+				get children() {
+					return createComponent(AccentSwatchGroups, {
 						get accentOptions() {
 							return props.accentOptions;
 						},
@@ -153,67 +284,42 @@ function AccentChoices(props) {
 							return showThemeDefault();
 						},
 						get themeDefaultColor() {
-							return memo(() => resolvedAppearance() === "light")() ? props.lightTheme.colors.accent : props.darkTheme.colors.accent;
-						}
-					}), (() => {
-						var _el$4 = _tmpl$5();
-						insert(_el$4, createComponent(Show, {
-							get when() {
-								return props.showCustomAccentCaption ?? true;
-							},
-							get children() {
-								return _tmpl$4();
-							}
-						}), null);
-						insert(_el$4, createComponent(RadioGroup.Item, {
-							value: "custom",
-							get children() {
-								return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
-									"class": "flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
-									children: "Custom"
-								})];
-							}
-						}), null);
-						return _el$4;
-					})()];
-				},
-				get children() {
-					var _el$3 = _tmpl$3();
-					insert(_el$3, createComponent(For, {
-						get each() {
-							return labelEntries();
+							return themeDefaultColor();
 						},
-						children: (option) => createComponent(RadioGroup.Item, {
-							get value() {
-								return option.id;
-							},
-							"class": "min-w-0",
-							get ["data-accent-option"]() {
-								return option.id;
-							},
-							get children() {
-								return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
-									"class": "flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
-									get children() {
-										return option.label;
-									}
-								})];
-							}
-						})
-					}), null);
-					insert(_el$3, createComponent(RadioGroup.Item, {
-						value: "custom",
-						"class": "min-w-0",
-						get children() {
-							return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
-								"class": "flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary",
-								children: "Custom"
-							})];
-						}
-					}), null);
-					return _el$3;
+						layout: "row"
+					});
 				}
-			});
+			}), null);
+			insert(_el$4, createComponent(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				get disabled() {
+					return props.saving;
+				},
+				get ["aria-pressed"]() {
+					return isCustomAccent(props);
+				},
+				onClick: openCustomColor,
+				children: "Custom"
+			}), null);
+			insert(_el$4, createComponent(Input, {
+				ref: (element) => {
+					colorPicker = element;
+				},
+				type: "color",
+				"class": "sr-only w-px",
+				tabIndex: -1,
+				"aria-label": "Custom accent color",
+				get value() {
+					return memo(() => !!/^#[0-9a-f]{6}$/i.test(props.draft.accent))() ? props.draft.accent : props.customAccentValue ?? "#000000";
+				},
+				get disabled() {
+					return props.saving;
+				},
+				onChange: (event) => props.onChange({ accent: event.currentTarget.value })
+			}), null);
+			return _el$4;
 		}
 	});
 }
@@ -245,7 +351,7 @@ function GlassChoices(props) {
 					"class": "rounded-md focus-within:ring-3 focus-within:ring-ring/50",
 					get children() {
 						return [createComponent(RadioGroup.ItemInput, {}), createComponent(RadioGroup.ItemLabel, {
-							"class": "flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+							"class": "flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
 							get children() {
 								return option.label;
 							}