@adea-ai/ui 0.142.4 → 0.144.0

package/dist/components/composites/accent-picker/accent-picker.d.ts

@@ -0,0 +1,28 @@
+import type { JSX } from 'solid-js';
+/**
+ * AccentPicker.
+ *
+ * A row of accent swatches with a leading "none" choice, for a setting that
+ * overrides the accent it would otherwise inherit: a project's icon colour, a
+ * workspace's colour over the app's. `null` is a real value, not an empty one:
+ * it means "do not override", so the swatch row never has an unchecked state and
+ * the control can say what the inherited colour is through `inheritLabel`.
+ *
+ * The swatches are the theme's own accent presets, each carrying its light and
+ * dark colour and switching on the `dark` class, so a swatch is the colour the
+ * setting will produce in whichever appearance is in force and the picker needs
+ * no theme provider.
+ */
+export type AccentPickerProps = {
+    /** The group's accessible name, e.g. "Icon colour". */
+    label: string;
+    /** An accent preset id, or `null` for no override. */
+    value: string | null;
+    onValueChange(value: string | null): void;
+    /** What `null` means here, e.g. "Inherit workspace accent". Also the first swatch's name and tooltip. */
+    inheritLabel?: string;
+    disabled?: boolean;
+    class?: string;
+};
+export declare function AccentPicker(props: AccentPickerProps): JSX.Element;
+//# sourceMappingURL=accent-picker.d.ts.map

package/dist/components/composites/accent-picker/accent-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accent-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/accent-picker/accent-picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAMnC;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAA;IACzC,yGAAyG;IACzG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eA6BpD"}

package/dist/components/composites/accent-picker/accent-picker.js

@@ -0,0 +1,107 @@
+import { cn } from "../../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip.js";
+import { accents } from "../../../lib/accent-presets.js";
+import { createComponent, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
+import { For } from "solid-js";
+import { RadioGroup } from "@kobalte/core/radio-group";
+//#region src/components/composites/accent-picker/accent-picker.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span aria-hidden=true class="block size-full rounded-full bg-(--swatch-light) dark:bg-(--swatch-dark)">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span aria-hidden=true data-slot=swatch-inherit class="relative block size-full overflow-hidden rounded-full bg-(--swatch-inherit)"style=--swatch-inherit:#000><span class="absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 -rotate-45 bg-destructive">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class=sr-only>`);
+var NONE = "__none__";
+function AccentPicker(props) {
+	return createComponent(RadioGroup, {
+		"data-slot": "swatch-picker",
+		get ["aria-label"]() {
+			return props.label;
+		},
+		get value() {
+			return props.value ?? NONE;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		onChange: (id) => props.onValueChange(id === NONE ? null : id),
+		get ["class"]() {
+			return cn("flex flex-wrap items-center gap-2", props.class);
+		},
+		get children() {
+			return [createComponent(SwatchItem, {
+				id: NONE,
+				get label() {
+					return props.inheritLabel ?? "Inherit (default)";
+				},
+				get children() {
+					return createComponent(InheritSwatch, {});
+				}
+			}), createComponent(For, {
+				each: accents,
+				children: (accent) => createComponent(SwatchItem, {
+					get id() {
+						return accent.id;
+					},
+					get label() {
+						return accent.label;
+					},
+					get children() {
+						var _el$ = _tmpl$();
+						effect((_p$) => {
+							var _v$ = accent.light ?? "currentColor", _v$2 = accent.dark ?? accent.light ?? "currentColor";
+							_v$ !== _p$.e && setStyleProperty(_el$, "--swatch-light", _p$.e = _v$);
+							_v$2 !== _p$.t && setStyleProperty(_el$, "--swatch-dark", _p$.t = _v$2);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$;
+					}
+				})
+			})];
+		}
+	});
+}
+/**
+* The "inherit" swatch: a black disc with a red slash, the universal "no
+* override" mark. It is drawn rather than painted from a token so it reads the
+* same in every theme and appearance.
+*/
+function InheritSwatch() {
+	return _tmpl$2();
+}
+function SwatchItem(props) {
+	return createComponent(RadioGroup.Item, {
+		get value() {
+			return props.id;
+		},
+		get ["data-accent-option"]() {
+			return props.id;
+		},
+		"class": "contents",
+		get children() {
+			return [createComponent(RadioGroup.ItemInput, { "class": "peer" }), createComponent(Tooltip, { get children() {
+				return [createComponent(TooltipTrigger, {
+					get as() {
+						return RadioGroup.ItemLabel;
+					},
+					get ["class"]() {
+						return cn("flex size-7 cursor-pointer items-center justify-center rounded-full border border-border p-0.5", "peer-focus-visible:border-ring peer-focus-visible:ring-3 peer-focus-visible:ring-primary-subtle", "data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50");
+					},
+					get children() {
+						return [memo(() => props.children), (() => {
+							var _el$3 = _tmpl$3();
+							insert(_el$3, () => props.label);
+							return _el$3;
+						})()];
+					}
+				}), createComponent(TooltipContent, { get children() {
+					return props.label;
+				} })];
+			} })];
+		}
+	});
+}
+//#endregion
+export { AccentPicker };
+
+//# sourceMappingURL=accent-picker.js.map

package/dist/components/composites/accent-picker/accent-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accent-picker.js","names":["RadioGroup","Radio","JSX","For","accents","cn","Tooltip","TooltipContent","TooltipTrigger","AccentPickerProps","label","value","onValueChange","inheritLabel","disabled","class","NONE","AccentPicker","props","_$createComponent","aria-label","onChange","id","children","SwatchItem","InheritSwatch","each","accent","_el$","_tmpl$","_$effect","_p$","_v$","light","_v$2","dark","e","_$setStyleProperty","t","undefined","_tmpl$2","Element","Item","data-accent-option","ItemInput","as","ItemLabel","_$memo","_el$3","_tmpl$3","_$insert","_$createComponent","Radio","_$setStyleProperty","_$memo"],"sources":["../../../../src/components/composites/accent-picker/accent-picker.tsx"],"sourcesContent":["import { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport type { JSX } from 'solid-js'\nimport { For } from 'solid-js'\nimport { accents } from '#lib/accent-presets'\nimport { cn } from '#lib/utils'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\n\n/**\n * AccentPicker.\n *\n * A row of accent swatches with a leading \"none\" choice, for a setting that\n * overrides the accent it would otherwise inherit: a project's icon colour, a\n * workspace's colour over the app's. `null` is a real value, not an empty one:\n * it means \"do not override\", so the swatch row never has an unchecked state and\n * the control can say what the inherited colour is through `inheritLabel`.\n *\n * The swatches are the theme's own accent presets, each carrying its light and\n * dark colour and switching on the `dark` class, so a swatch is the colour the\n * setting will produce in whichever appearance is in force and the picker needs\n * no theme provider.\n */\nexport type AccentPickerProps = {\n  /** The group's accessible name, e.g. \"Icon colour\". */\n  label: string\n  /** An accent preset id, or `null` for no override. */\n  value: string | null\n  onValueChange(value: string | null): void\n  /** What `null` means here, e.g. \"Inherit workspace accent\". Also the first swatch's name and tooltip. */\n  inheritLabel?: string\n  disabled?: boolean\n  class?: string\n}\n\nconst NONE = '__none__'\n\nexport function AccentPicker(props: AccentPickerProps) {\n  return (\n    <Radio\n      data-slot=\"swatch-picker\"\n      aria-label={props.label}\n      value={props.value ?? NONE}\n      disabled={props.disabled}\n      onChange={(id) => props.onValueChange(id === NONE ? null : id)}\n      class={cn('flex flex-wrap items-center gap-2', props.class)}\n    >\n      <SwatchItem id={NONE} label={props.inheritLabel ?? 'Inherit (default)'}>\n        <InheritSwatch />\n      </SwatchItem>\n      <For each={accents}>\n        {(accent) => (\n          <SwatchItem id={accent.id} label={accent.label}>\n            <span\n              aria-hidden=\"true\"\n              class=\"block size-full rounded-full bg-(--swatch-light) dark:bg-(--swatch-dark)\"\n              style={{\n                '--swatch-light': accent.light ?? 'currentColor',\n                '--swatch-dark': accent.dark ?? accent.light ?? 'currentColor',\n              }}\n            />\n          </SwatchItem>\n        )}\n      </For>\n    </Radio>\n  )\n}\n\n/**\n * The \"inherit\" swatch: a black disc with a red slash, the universal \"no\n * override\" mark. It is drawn rather than painted from a token so it reads the\n * same in every theme and appearance.\n */\nfunction InheritSwatch() {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"swatch-inherit\"\n      class=\"relative block size-full overflow-hidden rounded-full bg-(--swatch-inherit)\"\n      style={{ '--swatch-inherit': '#000' }}\n    >\n      <span class=\"absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 -rotate-45 bg-destructive\" />\n    </span>\n  )\n}\n\nfunction SwatchItem(props: { id: string; label: string; children: JSX.Element }) {\n  return (\n    <Radio.Item value={props.id} data-accent-option={props.id} class=\"contents\">\n      <Radio.ItemInput class=\"peer\" />\n      <Tooltip>\n        <TooltipTrigger\n          as={Radio.ItemLabel}\n          class={cn(\n            'flex size-7 cursor-pointer items-center justify-center rounded-full border border-border p-0.5',\n            'peer-focus-visible:border-ring peer-focus-visible:ring-3 peer-focus-visible:ring-primary-subtle',\n            'data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',\n            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n          )}\n        >\n          {props.children}\n          <span class=\"sr-only\">{props.label}</span>\n        </TooltipTrigger>\n        <TooltipContent>{props.label}</TooltipContent>\n      </Tooltip>\n    </Radio.Item>\n  )\n}\n"],"mappings":";;;;;;;;;;AAiCA,IAAMgB,OAAO;AAEb,SAAgBC,aAAaC,OAA0B;CACrD,OAAAC,gBACGlB,YAAK;EAAA,aAAA;EAAA,KAAA,gBAAA;GAAA,OAEQiB,MAAMR;EAAK;EAAA,IACvBC,QAAK;GAAA,OAAEO,MAAMP,SAASK;EAAI;EAAA,IAC1BF,WAAQ;GAAA,OAAEI,MAAMJ;EAAQ;EACxBO,WAAWC,OAAOJ,MAAMN,cAAcU,OAAON,OAAO,OAAOM,EAAE;EAAC,KAAA,WAAA;GAAA,OACvDjB,GAAG,qCAAqCa,MAAMH,KAAK;EAAC;EAAA,IAAAQ,WAAA;GAAA,OAAA,CAAAJ,gBAE1DK,YAAU;IAACF,IAAIN;IAAI,IAAEN,QAAK;KAAA,OAAEQ,MAAML,gBAAgB;IAAmB;IAAA,IAAAU,WAAA;KAAA,OAAAJ,gBACnEM,eAAa,CAAA,CAAA;IAAA;GAAA,CAAA,GAAAN,gBAEfhB,KAAG;IAACuB,MAAMtB;IAAOmB,WACdI,WAAMR,gBACLK,YAAU;KAAA,IAACF,KAAE;MAAA,OAAEK,OAAOL;KAAE;KAAA,IAAEZ,QAAK;MAAA,OAAEiB,OAAOjB;KAAK;KAAA,IAAAa,WAAA;MAAA,IAAAK,OAAAC,OAAA;MAAAC,QAAAC,QAAA;OAAA,IAAAC,MAKtBL,OAAOM,SAAS,gBAAcC,OAC/BP,OAAOQ,QAAQR,OAAOM,SAAS;OAAcD,QAAAD,IAAAK,KAAAC,iBAAAT,MAAA,kBAAAG,IAAAK,IAAAJ,GAAA;OAAAE,SAAAH,IAAAO,KAAAD,iBAAAT,MAAA,iBAAAG,IAAAO,IAAAJ,IAAA;OAAA,OAAAH;MAAA,GAAA;OAAAK,GAAAG,KAAAA;OAAAD,GAAAC,KAAAA;MAAA,CAAA;MAAA,OAAAX;KAAA;IAAA,CAAA;GAIrE,CAAA,CAAA;EAAA;CAAA,CAAA;AAIT;;;;;;AAOA,SAASH,gBAAgB;CACvB,OAAAe,QAAA;AAUF;AAEA,SAAShB,WAAWN,OAA6D;CAC/E,OAAAC,gBACGlB,WAAMyC,MAAI;EAAA,IAAC/B,QAAK;GAAA,OAAEO,MAAMI;EAAE;EAAA,KAAA,wBAAA;GAAA,OAAsBJ,MAAMI;EAAE;EAAA,SAAA;EAAA,IAAAC,WAAA;GAAA,OAAA,CAAAJ,gBACtDlB,WAAM2C,WAAS,EAAA,SAAA,OAAA,CAAA,GAAAzB,gBACfb,SAAO,EAAA,IAAAiB,WAAA;IAAA,OAAA,CAAAJ,gBACLX,gBAAc;KAAA,IACbqC,KAAE;MAAA,OAAE5C,WAAM6C;KAAS;KAAA,KAAA,WAAA;MAAA,OACZzC,GACL,kGACA,mGACA,mFACA,gEACF;KAAC;KAAA,IAAAkB,WAAA;MAAA,OAAA,CAAAwB,WAEA7B,MAAMK,QAAQ,UAAA;OAAA,IAAAyB,QAAAC,QAAA;OAAAC,OAAAF,aACQ9B,MAAMR,KAAK;OAAA,OAAAsC;MAAA,EAAA,CAAA,CAAA;KAAA;IAAA,CAAA,GAAA7B,gBAEnCZ,gBAAc,EAAA,IAAAgB,WAAA;KAAA,OAAEL,MAAMR;IAAK,EAAA,CAAA,CAAA;GAAA,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAIpC"}

package/dist/components/composites/accent-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { AccentPicker, type AccentPickerProps } from './accent-picker';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/composites/accent-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/accent-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/composites/accent-picker/index.js

@@ -0,0 +1,2 @@
+import { AccentPicker } from "./accent-picker.js";
+export { AccentPicker };

package/dist/components/composites/icon-picker/icon-picker.d.ts

@@ -0,0 +1,52 @@
+import type { JSX } from 'solid-js';
+/**
+ * IconPicker.
+ *
+ * The control behind "choose an icon" for a workspace or a project: a grid of
+ * curated glyphs, and optionally an uploaded picture in their place.
+ *
+ * It is a single-choice group. The glyph grid is a Kobalte radio group, so
+ * arrow keys move the choice and Tab enters and leaves the grid as one stop,
+ * which is the contract a 56-cell grid needs to stay usable from a keyboard. An
+ * uploaded image is a separate state, not a 57th cell: while `image` is set no
+ * glyph is checked, and choosing a glyph asks the caller to drop the image, so
+ * the stored mark is never both.
+ *
+ * The picker does not persist anything. The caller owns `value` and `image`
+ * and saves them with the rest of its form; the image arrives already resized
+ * to the stored square (see `markImageFromFile`).
+ */
+export type IconPickerProps = {
+    /** The group's accessible name, e.g. "Workspace icon". */
+    label: string;
+    /** The checked icon key; ignored while `image` is set. */
+    value: string | undefined;
+    onValueChange(key: string): void;
+    /** The key the surface treats as unset, labelled "default" in the grid. */
+    defaultKey?: string;
+    /** An uploaded mark (a data URL) currently chosen in place of a glyph. */
+    image?: string;
+    /**
+     * Called with the resized upload, or `undefined` for Remove. Omit it for a
+     * surface that offers glyphs only; the upload row then does not render.
+     */
+    onImageChange?(image: string | undefined): void;
+    disabled?: boolean;
+    class?: string;
+};
+export declare function IconPicker(props: IconPickerProps): JSX.Element;
+/**
+ * IconPickerDropdown.
+ *
+ * The compact form of the picker for a settings row: one button showing the
+ * current mark, opening the full grid (and the upload row, when the host offers
+ * it) in a popover. Choosing a glyph applies it and closes the popover; an
+ * upload or Remove leaves it open so the result is visible. The host owns the
+ * value exactly as it does for `IconPicker`.
+ */
+export type IconPickerDropdownProps = IconPickerProps & {
+    /** The mark shown on the trigger; defaults to the checked glyph or the uploaded image. */
+    trigger?: JSX.Element;
+};
+export declare function IconPickerDropdown(props: IconPickerDropdownProps): JSX.Element;
+//# sourceMappingURL=icon-picker.d.ts.map

package/dist/components/composites/icon-picker/icon-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/icon-picker/icon-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAcnC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAsIhD;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0FAA0F;IAC1F,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eA2ChE"}

package/dist/components/composites/icon-picker/icon-picker.js

@@ -0,0 +1,265 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover/popover.js";
+import { MARK_IMAGE_MAX_SOURCE_BYTES, MarkImageError, markImageFromFile, markImageProblemCopy } from "./image-data-url.js";
+import { resolveShellIcon, shellIconEntries, shellIconLabel } from "./shell-icons.js";
+import { Dynamic, className, createComponent, effect, insert, memo, mergeProps, setAttribute, template, use } from "solid-js/web";
+import { ChevronDown, ImageUp, Trash2 } from "lucide-solid";
+import { For, Show, createSignal, createUniqueId, splitProps } from "solid-js";
+import { RadioGroup } from "@kobalte/core/radio-group";
+//#region src/components/composites/icon-picker/icon-picker.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class="flex items-center gap-3"data-slot=icon-picker-upload><span aria-hidden=true class="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-muted"></span><div class="flex flex-wrap items-center gap-2"><input type=file class=sr-only tabindex=-1 aria-hidden=true accept=image/png,image/jpeg,image/webp,image/gif>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<p class="text-xs text-muted-foreground">PNG, JPEG, WebP or GIF up to <!> MB. It is cropped to a square.`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=icon-picker>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<img alt class="size-full object-cover">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<p role=alert class="text-sm text-destructive">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<span class=sr-only>`);
+var _tmpl$7 = /*#__PURE__*/ template(`<span aria-hidden=true class="flex size-5 items-center justify-center overflow-hidden">`);
+var _tmpl$8 = /*#__PURE__*/ template(`<img alt class="size-full rounded-sm object-cover">`);
+function IconPicker(props) {
+	const inputId = createUniqueId();
+	const [problem, setProblem] = createSignal();
+	const [busy, setBusy] = createSignal(false);
+	const [fileInput, setFileInput] = createSignal();
+	const upload = async (file) => {
+		if (!file || !props.onImageChange) return;
+		setProblem(void 0);
+		setBusy(true);
+		try {
+			props.onImageChange(await markImageFromFile(file));
+		} catch (error) {
+			setProblem(markImageProblemCopy[error instanceof MarkImageError ? error.problem : "unreadable"]);
+		} finally {
+			setBusy(false);
+		}
+	};
+	return (() => {
+		var _el$ = _tmpl$3();
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.onImageChange;
+			},
+			get children() {
+				return [
+					(() => {
+						var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild;
+						insert(_el$3, createComponent(Show, {
+							get when() {
+								return props.image;
+							},
+							get fallback() {
+								return createComponent(ImageUp, {
+									"class": "size-5 text-muted-foreground",
+									"aria-hidden": "true"
+								});
+							},
+							children: (src) => (() => {
+								var _el$0 = _tmpl$4();
+								effect(() => setAttribute(_el$0, "src", src()));
+								return _el$0;
+							})()
+						}));
+						_el$5.addEventListener("change", (event) => {
+							const input = event.currentTarget;
+							upload(input.files?.[0]);
+							input.value = "";
+						});
+						use(setFileInput, _el$5);
+						setAttribute(_el$5, "id", inputId);
+						insert(_el$4, createComponent(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							get disabled() {
+								return props.disabled || busy();
+							},
+							onClick: () => fileInput()?.click(),
+							get children() {
+								return [createComponent(ImageUp, { "aria-hidden": "true" }), memo(() => props.image ? "Replace image" : "Upload image")];
+							}
+						}), null);
+						insert(_el$4, createComponent(Show, {
+							get when() {
+								return props.image;
+							},
+							get children() {
+								return createComponent(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									get disabled() {
+										return props.disabled || busy();
+									},
+									onClick: () => {
+										setProblem(void 0);
+										props.onImageChange?.(void 0);
+									},
+									get children() {
+										return [createComponent(Trash2, { "aria-hidden": "true" }), "Remove image"];
+									}
+								});
+							}
+						}), null);
+						effect((_p$) => {
+							var _v$ = props.image ? "Replace image" : "Upload image", _v$2 = props.disabled;
+							_v$ !== _p$.e && setAttribute(_el$5, "aria-label", _p$.e = _v$);
+							_v$2 !== _p$.t && (_el$5.disabled = _p$.t = _v$2);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$2;
+					})(),
+					createComponent(Show, {
+						get when() {
+							return problem();
+						},
+						children: (message) => (() => {
+							var _el$1 = _tmpl$5();
+							insert(_el$1, message);
+							return _el$1;
+						})()
+					}),
+					(() => {
+						var _el$6 = _tmpl$2(), _el$9 = _el$6.firstChild.nextSibling;
+						_el$9.nextSibling;
+						insert(_el$6, MARK_IMAGE_MAX_SOURCE_BYTES / 1024 / 1024, _el$9);
+						return _el$6;
+					})()
+				];
+			}
+		}), null);
+		insert(_el$, createComponent(RadioGroup, {
+			get ["aria-label"]() {
+				return props.label;
+			},
+			get value() {
+				return memo(() => !!props.image)() ? "" : props.value ?? "";
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			onChange: (key) => {
+				if (key) props.onValueChange(key);
+			},
+			"class": "grid grid-cols-[repeat(auto-fill,minmax(2.5rem,1fr))] gap-1.5",
+			get children() {
+				return createComponent(For, {
+					each: shellIconEntries,
+					children: (entry) => {
+						const Icon = resolveShellIcon(entry.key);
+						return createComponent(RadioGroup.Item, {
+							get value() {
+								return entry.key;
+							},
+							"class": "contents",
+							get children() {
+								return [createComponent(RadioGroup.ItemInput, { "class": "peer" }), createComponent(RadioGroup.ItemLabel, {
+									get title() {
+										return memo(() => entry.key === props.defaultKey)() ? `${entry.label} (default)` : entry.label;
+									},
+									get ["class"]() {
+										return cn("flex size-10 cursor-pointer items-center justify-center rounded-lg border border-border bg-card text-muted-foreground", "transition-colors ease-out", "hover:bg-surface-hover hover:text-foreground", "peer-focus-visible:border-ring peer-focus-visible:ring-3 peer-focus-visible:ring-primary-subtle", "data-[checked]:border-primary data-[checked]:bg-primary-subtle data-[checked]:text-primary", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50");
+									},
+									get children() {
+										return [createComponent(Icon, {
+											"class": "size-5",
+											"aria-hidden": "true"
+										}), (() => {
+											var _el$10 = _tmpl$6();
+											insert(_el$10, () => entry.label, null);
+											insert(_el$10, () => entry.key === props.defaultKey ? " (default)" : "", null);
+											return _el$10;
+										})()];
+									}
+								})];
+							}
+						});
+					}
+				});
+			}
+		}), null);
+		effect(() => className(_el$, cn("flex flex-col gap-3", props.class)));
+		return _el$;
+	})();
+}
+function IconPickerDropdown(props) {
+	const [open, setOpen] = createSignal(false);
+	const [local, picker] = splitProps(props, ["trigger", "class"]);
+	const Current = () => resolveShellIcon(props.value ?? props.defaultKey ?? "");
+	return createComponent(Popover, {
+		get open() {
+			return open();
+		},
+		onOpenChange: setOpen,
+		placement: "bottom-start",
+		get children() {
+			return [createComponent(PopoverTrigger, {
+				as: Button,
+				type: "button",
+				variant: "outline",
+				"data-slot": "icon-picker-trigger",
+				get ["aria-label"]() {
+					return `${props.label}: ${props.image ? "uploaded image" : shellIconLabel(props.value ?? props.defaultKey ?? "")}`;
+				},
+				get disabled() {
+					return props.disabled;
+				},
+				get ["class"]() {
+					return cn("gap-2", local.class);
+				},
+				get children() {
+					return [(() => {
+						var _el$11 = _tmpl$7();
+						insert(_el$11, createComponent(Show, {
+							get when() {
+								return local.trigger;
+							},
+							get fallback() {
+								return createComponent(Show, {
+									get when() {
+										return props.image;
+									},
+									get fallback() {
+										return createComponent(Dynamic, {
+											get component() {
+												return Current();
+											},
+											"class": "size-4",
+											"aria-hidden": "true"
+										});
+									},
+									children: (src) => (() => {
+										var _el$12 = _tmpl$8();
+										effect(() => setAttribute(_el$12, "src", src()));
+										return _el$12;
+									})()
+								});
+							},
+							get children() {
+								return local.trigger;
+							}
+						}));
+						return _el$11;
+					})(), createComponent(ChevronDown, {
+						"class": "size-4 text-muted-foreground",
+						"aria-hidden": "true"
+					})];
+				}
+			}), createComponent(PopoverContent, {
+				"class": "w-[min(22rem,var(--kb-popper-available-width))]",
+				get children() {
+					return createComponent(IconPicker, mergeProps(picker, { onValueChange: (key) => {
+						picker.onValueChange(key);
+						setOpen(false);
+					} }));
+				}
+			})];
+		}
+	});
+}
+//#endregion
+export { IconPicker, IconPickerDropdown };
+
+//# sourceMappingURL=icon-picker.js.map

package/dist/components/composites/icon-picker/icon-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.js","names":["RadioGroup","Radio","ChevronDown","ImageUp","Trash2","JSX","For","Show","createSignal","createUniqueId","splitProps","Dynamic","cn","Button","Popover","PopoverContent","PopoverTrigger","MarkImageError","markImageFromFile","markImageProblemCopy","MARK_IMAGE_MAX_SOURCE_BYTES","resolveShellIcon","shellIconEntries","shellIconLabel","IconPickerProps","label","value","onValueChange","key","defaultKey","image","onImageChange","disabled","class","IconPicker","props","inputId","problem","setProblem","busy","setBusy","fileInput","setFileInput","HTMLInputElement","upload","file","File","undefined","error","_el$","_tmpl$3","_$insert","_$createComponent","when","children","_el$2","_tmpl$","_el$3","firstChild","_el$4","nextSibling","_el$5","fallback","src","_el$0","_tmpl$4","_$effect","_$setAttribute","addEventListener","event","input","currentTarget","files","_$use","type","variant","size","onClick","click","_$memo","_p$","_v$","_v$2","e","t","message","_el$1","_tmpl$5","_el$6","_tmpl$2","_el$7","_el$9","_el$8","aria-label","onChange","each","entry","Icon","Item","ItemInput","ItemLabel","title","_el$10","_tmpl$6","_$className","IconPickerDropdownProps","trigger","Element","IconPickerDropdown","open","setOpen","local","picker","Current","onOpenChange","placement","as","_el$11","_tmpl$7","component","_el$12","_tmpl$8","_$mergeProps","_$createComponent","_$setAttribute","_$memo","Radio","_$className","_$mergeProps"],"sources":["../../../../src/components/composites/icon-picker/icon-picker.tsx"],"sourcesContent":["import { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { ChevronDown, ImageUp, Trash2 } from 'lucide-solid'\nimport type { JSX } from 'solid-js'\nimport { For, Show, createSignal, createUniqueId, splitProps } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover'\nimport {\n  MarkImageError,\n  markImageFromFile,\n  markImageProblemCopy,\n  MARK_IMAGE_MAX_SOURCE_BYTES,\n} from './image-data-url'\nimport { resolveShellIcon, shellIconEntries, shellIconLabel } from './shell-icons'\n\n/**\n * IconPicker.\n *\n * The control behind \"choose an icon\" for a workspace or a project: a grid of\n * curated glyphs, and optionally an uploaded picture in their place.\n *\n * It is a single-choice group. The glyph grid is a Kobalte radio group, so\n * arrow keys move the choice and Tab enters and leaves the grid as one stop,\n * which is the contract a 56-cell grid needs to stay usable from a keyboard. An\n * uploaded image is a separate state, not a 57th cell: while `image` is set no\n * glyph is checked, and choosing a glyph asks the caller to drop the image, so\n * the stored mark is never both.\n *\n * The picker does not persist anything. The caller owns `value` and `image`\n * and saves them with the rest of its form; the image arrives already resized\n * to the stored square (see `markImageFromFile`).\n */\nexport type IconPickerProps = {\n  /** The group's accessible name, e.g. \"Workspace icon\". */\n  label: string\n  /** The checked icon key; ignored while `image` is set. */\n  value: string | undefined\n  onValueChange(key: string): void\n  /** The key the surface treats as unset, labelled \"default\" in the grid. */\n  defaultKey?: string\n  /** An uploaded mark (a data URL) currently chosen in place of a glyph. */\n  image?: string\n  /**\n   * Called with the resized upload, or `undefined` for Remove. Omit it for a\n   * surface that offers glyphs only; the upload row then does not render.\n   */\n  onImageChange?(image: string | undefined): void\n  disabled?: boolean\n  class?: string\n}\n\nexport function IconPicker(props: IconPickerProps) {\n  const inputId = createUniqueId()\n  const [problem, setProblem] = createSignal<string>()\n  const [busy, setBusy] = createSignal(false)\n  const [fileInput, setFileInput] = createSignal<HTMLInputElement>()\n\n  const upload = async (file: File | undefined) => {\n    if (!file || !props.onImageChange) return\n    setProblem(undefined)\n    setBusy(true)\n    try {\n      props.onImageChange(await markImageFromFile(file))\n    } catch (error) {\n      setProblem(\n        markImageProblemCopy[error instanceof MarkImageError ? error.problem : 'unreadable']\n      )\n    } finally {\n      setBusy(false)\n    }\n  }\n\n  return (\n    <div data-slot=\"icon-picker\" class={cn('flex flex-col gap-3', props.class)}>\n      <Show when={props.onImageChange}>\n        <div class=\"flex items-center gap-3\" data-slot=\"icon-picker-upload\">\n          <span\n            aria-hidden=\"true\"\n            class=\"flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-muted\"\n          >\n            <Show\n              when={props.image}\n              fallback={<ImageUp class=\"size-5 text-muted-foreground\" aria-hidden=\"true\" />}\n            >\n              {(src) => <img src={src()} alt=\"\" class=\"size-full object-cover\" />}\n            </Show>\n          </span>\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <input\n              ref={setFileInput}\n              id={inputId}\n              type=\"file\"\n              class=\"sr-only\"\n              tabIndex={-1}\n              // The visible button drives this input; hide the duplicate from assistive\n              // technology but keep a name so the form-label rule is satisfied.\n              aria-hidden=\"true\"\n              aria-label={props.image ? 'Replace image' : 'Upload image'}\n              accept=\"image/png,image/jpeg,image/webp,image/gif\"\n              disabled={props.disabled}\n              onChange={(event) => {\n                const input = event.currentTarget\n                void upload(input.files?.[0])\n                // Clearing the value lets the same file be chosen again after Remove.\n                input.value = ''\n              }}\n            />\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              disabled={props.disabled || busy()}\n              onClick={() => fileInput()?.click()}\n            >\n              <ImageUp aria-hidden=\"true\" />\n              {props.image ? 'Replace image' : 'Upload image'}\n            </Button>\n            <Show when={props.image}>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                disabled={props.disabled || busy()}\n                onClick={() => {\n                  setProblem(undefined)\n                  props.onImageChange?.(undefined)\n                }}\n              >\n                <Trash2 aria-hidden=\"true\" />\n                Remove image\n              </Button>\n            </Show>\n          </div>\n        </div>\n        <Show when={problem()}>\n          {(message) => (\n            <p role=\"alert\" class=\"text-sm text-destructive\">\n              {message()}\n            </p>\n          )}\n        </Show>\n        <p class=\"text-xs text-muted-foreground\">\n          PNG, JPEG, WebP or GIF up to {MARK_IMAGE_MAX_SOURCE_BYTES / 1024 / 1024} MB. It is cropped\n          to a square.\n        </p>\n      </Show>\n      <Radio\n        aria-label={props.label}\n        value={props.image ? '' : (props.value ?? '')}\n        disabled={props.disabled}\n        onChange={(key) => {\n          if (key) props.onValueChange(key)\n        }}\n        class=\"grid grid-cols-[repeat(auto-fill,minmax(2.5rem,1fr))] gap-1.5\"\n      >\n        <For each={shellIconEntries}>\n          {(entry) => {\n            const Icon = resolveShellIcon(entry.key)\n            return (\n              <Radio.Item value={entry.key} class=\"contents\">\n                <Radio.ItemInput class=\"peer\" />\n                <Radio.ItemLabel\n                  title={entry.key === props.defaultKey ? `${entry.label} (default)` : entry.label}\n                  class={cn(\n                    'flex size-10 cursor-pointer items-center justify-center rounded-lg border border-border bg-card text-muted-foreground',\n                    'transition-colors ease-out',\n                    'hover:bg-surface-hover hover:text-foreground',\n                    'peer-focus-visible:border-ring peer-focus-visible:ring-3 peer-focus-visible:ring-primary-subtle',\n                    'data-[checked]:border-primary data-[checked]:bg-primary-subtle data-[checked]:text-primary',\n                    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'\n                  )}\n                >\n                  <Icon class=\"size-5\" aria-hidden=\"true\" />\n                  <span class=\"sr-only\">\n                    {entry.label}\n                    {entry.key === props.defaultKey ? ' (default)' : ''}\n                  </span>\n                </Radio.ItemLabel>\n              </Radio.Item>\n            )\n          }}\n        </For>\n      </Radio>\n    </div>\n  )\n}\n\n/**\n * IconPickerDropdown.\n *\n * The compact form of the picker for a settings row: one button showing the\n * current mark, opening the full grid (and the upload row, when the host offers\n * it) in a popover. Choosing a glyph applies it and closes the popover; an\n * upload or Remove leaves it open so the result is visible. The host owns the\n * value exactly as it does for `IconPicker`.\n */\nexport type IconPickerDropdownProps = IconPickerProps & {\n  /** The mark shown on the trigger; defaults to the checked glyph or the uploaded image. */\n  trigger?: JSX.Element\n}\n\nexport function IconPickerDropdown(props: IconPickerDropdownProps) {\n  const [open, setOpen] = createSignal(false)\n  const [local, picker] = splitProps(props, ['trigger', 'class'])\n  const Current = () => resolveShellIcon(props.value ?? props.defaultKey ?? '')\n  return (\n    <Popover open={open()} onOpenChange={setOpen} placement=\"bottom-start\">\n      <PopoverTrigger\n        as={Button}\n        type=\"button\"\n        variant=\"outline\"\n        data-slot=\"icon-picker-trigger\"\n        aria-label={`${props.label}: ${props.image ? 'uploaded image' : shellIconLabel(props.value ?? props.defaultKey ?? '')}`}\n        disabled={props.disabled}\n        class={cn('gap-2', local.class)}\n      >\n        <span aria-hidden=\"true\" class=\"flex size-5 items-center justify-center overflow-hidden\">\n          <Show\n            when={local.trigger}\n            fallback={\n              <Show\n                when={props.image}\n                fallback={<Dynamic component={Current()} class=\"size-4\" aria-hidden=\"true\" />}\n              >\n                {(src) => <img src={src()} alt=\"\" class=\"size-full rounded-sm object-cover\" />}\n              </Show>\n            }\n          >\n            {local.trigger}\n          </Show>\n        </span>\n        <ChevronDown class=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[min(22rem,var(--kb-popper-available-width))]\">\n        <IconPicker\n          {...picker}\n          onValueChange={(key) => {\n            picker.onValueChange(key)\n            setOpen(false)\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":"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"}

package/dist/components/composites/icon-picker/image-data-url.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Turning an uploaded picture into the small square mark a workspace stores.
+ *
+ * The mark travels with the workspace record (it is shown in every list the
+ * workspace appears in), so it is resized to a fixed square and re-encoded
+ * before it leaves the browser rather than stored as the user's original file.
+ * Re-encoding also drops metadata and any embedded script an SVG could carry:
+ * only raster images are accepted and the result is always a `data:image/webp`
+ * or `data:image/png` URL.
+ */
+/** The edge, in pixels, of the stored square. 2x the largest tile the apps draw. */
+export declare const MARK_IMAGE_SIZE = 128;
+/** The largest source file read, before resizing. */
+export declare const MARK_IMAGE_MAX_SOURCE_BYTES: number;
+/** The largest encoded result kept; a stored mark never exceeds this many characters. */
+export declare const MARK_IMAGE_MAX_DATA_URL_LENGTH: number;
+export type MarkImageProblem = 'type' | 'size' | 'unreadable' | 'too-large';
+/** Thrown by {@link markImageFromFile}; `problem` keys {@link markImageProblemCopy}. */
+export declare class MarkImageError extends Error {
+    readonly problem: MarkImageProblem;
+    constructor(problem: MarkImageProblem);
+}
+export declare const markImageProblemCopy: Readonly<Record<MarkImageProblem, string>>;
+/** Whether a stored value is a mark image this module could have produced. */
+export declare function isMarkImageDataUrl(value: unknown): value is string;
+/** Pre-flight checks that need no decoding; `undefined` means the file may be read. */
+export declare function checkMarkImageFile(file: Readonly<{
+    type: string;
+    size: number;
+}>): MarkImageProblem | undefined;
+/** The source rectangle of the largest centred square, so the mark is a cover crop. */
+export declare function centredSquare(width: number, height: number): Readonly<{
+    x: number;
+    y: number;
+    side: number;
+}>;
+/**
+ * Resize an image file to the stored mark. Rejects with a {@link MarkImageError}
+ * so the caller can show `markImageProblemCopy[error.problem]`.
+ */
+export declare function markImageFromFile(file: File): Promise<string>;
+//# sourceMappingURL=image-data-url.d.ts.map

package/dist/components/composites/icon-picker/image-data-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-data-url.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/icon-picker/image-data-url.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,oFAAoF;AACpF,eAAO,MAAM,eAAe,MAAM,CAAA;AAClC,qDAAqD;AACrD,eAAO,MAAM,2BAA2B,QAAkB,CAAA;AAC1D,yFAAyF;AACzF,eAAO,MAAM,8BAA8B,QAAY,CAAA;AAIvD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,CAAA;AAE3E,wFAAwF;AACxF,qBAAa,cAAe,SAAQ,KAAK;IACvC,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAA;IAClC,YAAY,OAAO,EAAE,gBAAgB,EAIpC;CACF;AAED,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAK3E,CAAA;AAED,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAMlE;AAED,uFAAuF;AACvF,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,QAAQ,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,GAC7C,gBAAgB,GAAG,SAAS,CAI9B;AAED,uFAAuF;AACvF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,QAAQ,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAGlD;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAoCnE"}