@adea-ai/ui 0.142.3 → 0.143.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. */
+    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":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnC;;;;;;;;;;;;;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,6FAA6F;IAC7F,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,97 @@
+import { cn } from "../../../lib/utils.js";
+import { accents } from "../../../lib/accent-presets.js";
+import { createComponent, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
+import { Ban } from "lucide-solid";
+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 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 ?? "No colour override";
+				},
+				get children() {
+					return createComponent(Ban, {
+						"class": "size-4 text-muted-foreground",
+						"aria-hidden": "true"
+					});
+				}
+			}), 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$;
+					}
+				})
+			})];
+		}
+	});
+}
+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(RadioGroup.ItemLabel, {
+				get title() {
+					return props.label;
+				},
+				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$2 = _tmpl$2();
+						insert(_el$2, () => props.label);
+						return _el$2;
+					})()];
+				}
+			})];
+		}
+	});
+}
+//#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","Ban","JSX","For","accents","cn","AccentPickerProps","label","value","onValueChange","inheritLabel","disabled","class","NONE","AccentPicker","props","_$createComponent","aria-label","onChange","id","children","SwatchItem","each","accent","_el$","_tmpl$","_$effect","_p$","_v$","light","_v$2","dark","e","_$setStyleProperty","t","undefined","Element","Item","data-accent-option","ItemInput","ItemLabel","title","_$memo","_el$2","_tmpl$2","_$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 { Ban } from 'lucide-solid'\nimport type { JSX } from 'solid-js'\nimport { For } from 'solid-js'\nimport { accents } from '#lib/accent-presets'\nimport { cn } from '#lib/utils'\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. */\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 ?? 'No colour override'}>\n        <Ban class=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\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\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      <Radio.ItemLabel\n        title={props.label}\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      </Radio.ItemLabel>\n    </Radio.Item>\n  )\n}\n"],"mappings":";;;;;;;;;AAiCA,IAAMc,OAAO;AAEb,SAAgBC,aAAaC,OAA0B;CACrD,OAAAC,gBACGhB,YAAK;EAAA,aAAA;EAAA,KAAA,gBAAA;GAAA,OAEQe,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,OACvDd,GAAG,qCAAqCU,MAAMH,KAAK;EAAC;EAAA,IAAAQ,WAAA;GAAA,OAAA,CAAAJ,gBAE1DK,YAAU;IAACF,IAAIN;IAAI,IAAEN,QAAK;KAAA,OAAEQ,MAAML,gBAAgB;IAAoB;IAAA,IAAAU,WAAA;KAAA,OAAAJ,gBACpEf,KAAG;MAAA,SAAA;MAAA,eAAA;KAAA,CAAA;IAAA;GAAA,CAAA,GAAAe,gBAELb,KAAG;IAACmB,MAAMlB;IAAOgB,WACdG,WAAMP,gBACLK,YAAU;KAAA,IAACF,KAAE;MAAA,OAAEI,OAAOJ;KAAE;KAAA,IAAEZ,QAAK;MAAA,OAAEgB,OAAOhB;KAAK;KAAA,IAAAa,WAAA;MAAA,IAAAI,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;AAEA,SAASH,WAAWN,OAA6D;CAC/E,OAAAC,gBACGhB,WAAMqC,MAAI;EAAA,IAAC7B,QAAK;GAAA,OAAEO,MAAMI;EAAE;EAAA,KAAA,wBAAA;GAAA,OAAsBJ,MAAMI;EAAE;EAAA,SAAA;EAAA,IAAAC,WAAA;GAAA,OAAA,CAAAJ,gBACtDhB,WAAMuC,WAAS,EAAA,SAAA,OAAA,CAAA,GAAAvB,gBACfhB,WAAMwC,WAAS;IAAA,IACdC,QAAK;KAAA,OAAE1B,MAAMR;IAAK;IAAA,KAAA,WAAA;KAAA,OACXF,GACL,kGACA,mGACA,mFACA,gEACF;IAAC;IAAA,IAAAe,WAAA;KAAA,OAAA,CAAAsB,WAEA3B,MAAMK,QAAQ,UAAA;MAAA,IAAAuB,QAAAC,QAAA;MAAAC,OAAAF,aACQ5B,MAAMR,KAAK;MAAA,OAAAoC;KAAA,EAAA,CAAA,CAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAI1C"}

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,37 @@
+/**
+ * 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): import("solid-js").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":"AAaA;;;;;;;;;;;;;;;;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,kCAsIhD"}

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

@@ -0,0 +1,187 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { MARK_IMAGE_MAX_SOURCE_BYTES, MarkImageError, markImageFromFile, markImageProblemCopy } from "./image-data-url.js";
+import { resolveShellIcon, shellIconEntries } from "./shell-icons.js";
+import { className, createComponent, effect, insert, memo, setAttribute, template, use } from "solid-js/web";
+import { ImageUp, Trash2 } from "lucide-solid";
+import { For, Show, createSignal, createUniqueId } 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>`);
+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$;
+	})();
+}
+//#endregion
+export { IconPicker };
+
+//# 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","ImageUp","Trash2","For","Show","createSignal","createUniqueId","cn","Button","MarkImageError","markImageFromFile","markImageProblemCopy","MARK_IMAGE_MAX_SOURCE_BYTES","resolveShellIcon","shellIconEntries","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","_$createComponent","_$setAttribute","_$memo","Radio","_$className"],"sources":["../../../../src/components/composites/icon-picker/icon-picker.tsx"],"sourcesContent":["import { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { ImageUp, Trash2 } from 'lucide-solid'\nimport { For, Show, createSignal, createUniqueId } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { Button } from '../../ui/button'\nimport {\n  MarkImageError,\n  markImageFromFile,\n  markImageProblemCopy,\n  MARK_IMAGE_MAX_SOURCE_BYTES,\n} from './image-data-url'\nimport { resolveShellIcon, shellIconEntries } 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"],"mappings":";;;;;;;;;;;;;;;AAiDA,SAAgB0B,WAAWC,OAAwB;CACjD,MAAMC,UAAUrB,eAAe;CAC/B,MAAM,CAACsB,SAASC,cAAcxB,aAAqB;CACnD,MAAM,CAACyB,MAAMC,WAAW1B,aAAa,KAAK;CAC1C,MAAM,CAAC2B,WAAWC,gBAAgB5B,aAA+B;CAEjE,MAAM8B,SAAS,OAAOC,SAA2B;EAC/C,IAAI,CAACA,QAAQ,CAACV,MAAMJ,eAAe;EACnCO,WAAWS,KAAAA,CAAS;EACpBP,QAAQ,IAAI;EACZ,IAAI;GACFL,MAAMJ,cAAc,MAAMZ,kBAAkB0B,IAAI,CAAC;EACnD,SAASG,OAAO;GACdV,WACElB,qBAAqB4B,iBAAiB9B,iBAAiB8B,MAAMX,UAAU,aACzE;EACF,UAAU;GACRG,QAAQ,KAAK;EACf;CACF;CAEA,cAAA;EAAA,IAAAS,OAAAC,QAAA;EAAAC,OAAAF,MAAAG,gBAEKvC,MAAI;GAAA,IAACwC,OAAI;IAAA,OAAElB,MAAMJ;GAAa;GAAA,IAAAuB,WAAA;IAAA,OAAA;YAAA;MAAA,IAAAC,QAAAC,OAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAD;MAAAP,OAAAM,OAAAL,gBAMxBvC,MAAI;OAAA,IACHwC,OAAI;QAAA,OAAElB,MAAML;OAAK;OAAA,IACjBgC,WAAQ;QAAA,OAAAV,gBAAG1C,SAAO;SAAA,SAAA;SAAA,eAAA;QAAA,CAAA;OAAA;OAAA4C,WAEhBS,eAAG;QAAA,IAAAC,QAAAC,QAAA;QAAAC,aAAAC,aAAAH,OAAA,OAAeD,IAAI,CAAC,CAAA;QAAA,OAAAC;OAAA,EAAA,CAAA;MAA0C,CAAA,CAAA;MAAAH,MAAAO,iBAAA,WAgBxDC,UAAU;OACnB,MAAMC,QAAQD,MAAME;OACpB,OAAYD,MAAME,QAAQ,EAAE;OAE5BF,MAAM5C,QAAQ;MAChB,CAAC;MAAA+C,IAhBI/B,cAAYmB,KAAA;MAAAM,aAAAN,OAAA,MACbzB,OAAO;MAAAe,OAAAQ,OAAAP,gBAiBZnC,QAAM;OACLyD,MAAI;OACJC,SAAO;OACPC,MAAI;OAAA,IACJ5C,WAAQ;QAAA,OAAEG,MAAMH,YAAYO,KAAK;OAAC;OAClCsC,eAAepC,UAAU,CAAC,EAAEqC,MAAM;OAAC,IAAAxB,WAAA;QAAA,OAAA,CAAAF,gBAElC1C,SAAO,EAAA,eAAA,OAAA,CAAA,GAAAqE,WACP5C,MAAML,QAAQ,kBAAkB,cAAc,CAAA;OAAA;MAAA,CAAA,GAAA,IAAA;MAAAqB,OAAAQ,OAAAP,gBAEhDvC,MAAI;OAAA,IAACwC,OAAI;QAAA,OAAElB,MAAML;OAAK;OAAA,IAAAwB,WAAA;QAAA,OAAAF,gBACpBnC,QAAM;SACLyD,MAAI;SACJC,SAAO;SACPC,MAAI;SAAA,IACJ5C,WAAQ;UAAA,OAAEG,MAAMH,YAAYO,KAAK;SAAC;SAClCsC,eAAe;UACbvC,WAAWS,KAAAA,CAAS;UACpBZ,MAAMJ,gBAAgBgB,KAAAA,CAAS;SACjC;SAAC,IAAAO,WAAA;UAAA,OAAA,CAAAF,gBAEAzC,QAAM,EAAA,eAAA,OAAA,CAAA,GAAA,cAAA;SAAA;QAAA,CAAA;OAAA;MAAA,CAAA,GAAA,IAAA;MAAAuD,QAAAc,QAAA;OAAA,IAAAC,MA/BG9C,MAAML,QAAQ,kBAAkB,gBAAcoD,OAEhD/C,MAAMH;OAAQiD,QAAAD,IAAAG,KAAAhB,aAAAN,OAAA,cAAAmB,IAAAG,IAAAF,GAAA;OAAAC,SAAAF,IAAAI,MAAAvB,MAAA7B,WAAAgD,IAAAI,IAAAF;OAAA,OAAAF;MAAA,GAAA;OAAAG,GAAApC,KAAAA;OAAAqC,GAAArC,KAAAA;MAAA,CAAA;MAAA,OAAAQ;KAAA,EAAA,CAAA;KAAAH,gBAmC7BvC,MAAI;MAAA,IAACwC,OAAI;OAAA,OAAEhB,QAAQ;MAAC;MAAAiB,WACjB+B,mBAAO;OAAA,IAAAC,QAAAC,QAAA;OAAApC,OAAAmC,OAEJD,OAAO;OAAA,OAAAC;MAAA,EAAA,CAAA;KAEX,CAAA;YAAA;MAAA,IAAAE,QAAAC,QAAA,GAAAE,QAAAH,MAAA9B,WAAAE;MAAA+B,MAAA/B;MAAAT,OAAAqC,OAG6BnE,8BAA8B,OAAO,MAAIsE,KAAA;MAAA,OAAAH;KAAA,EAAA,CAAA;IAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAArC,OAAAF,MAAAG,gBAI1E3C,YAAK;GAAA,KAAA,gBAAA;IAAA,OACQ0B,MAAMV;GAAK;GAAA,IACvBC,QAAK;IAAA,OAAEqD,WAAA,CAAA,CAAA5C,MAAML,KAAK,CAAA,CAAA,IAAG,KAAMK,MAAMT,SAAS;GAAG;GAAA,IAC7CM,WAAQ;IAAA,OAAEG,MAAMH;GAAQ;GACxB8D,WAAWlE,QAAQ;IACjB,IAAIA,KAAKO,MAAMR,cAAcC,GAAG;GAClC;GAAC,SAAA;GAAA,IAAA0B,WAAA;IAAA,OAAAF,gBAGAxC,KAAG;KAACmF,MAAMxE;KAAgB+B,WACvB0C,UAAU;MACV,MAAMC,OAAO3E,iBAAiB0E,MAAMpE,GAAG;MACvC,OAAAwB,gBACG3C,WAAMyF,MAAI;OAAA,IAACxE,QAAK;QAAA,OAAEsE,MAAMpE;OAAG;OAAA,SAAA;OAAA,IAAA0B,WAAA;QAAA,OAAA,CAAAF,gBACzB3C,WAAM0F,WAAS,EAAA,SAAA,OAAA,CAAA,GAAA/C,gBACf3C,WAAM2F,WAAS;SAAA,IACdC,QAAK;UAAA,OAAEtB,WAAAiB,MAAMpE,QAAQO,MAAMN,UAAU,CAAA,CAAA,IAAG,GAAGmE,MAAMvE,MAAK,cAAeuE,MAAMvE;SAAK;SAAA,KAAA,WAAA;UAAA,OACzET,GACL,yHACA,8BACA,gDACA,mGACA,8FACA,gEACF;SAAC;SAAA,IAAAsC,WAAA;UAAA,OAAA,CAAAF,gBAEA6C,MAAI;WAAA,SAAA;WAAA,eAAA;UAAA,CAAA,UAAA;WAAA,IAAAK,SAAAC,QAAA;WAAApD,OAAAmD,cAEFN,MAAMvE,OAAK,IAAA;WAAA0B,OAAAmD,cACXN,MAAMpE,QAAQO,MAAMN,aAAa,eAAe,IAAE,IAAA;WAAA,OAAAyE;UAAA,EAAA,CAAA,CAAA;SAAA;QAAA,CAAA,CAAA;OAAA;MAAA,CAAA;KAK7D;IAAC,CAAA;GAAA;EAAA,CAAA,GAAA,IAAA;EAAApC,aAAAsC,UAAAvD,MA3G6BjC,GAAG,uBAAuBmB,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAAgB;CAAA,EAAA,CAAA;AAgH9E"}

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"}

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

@@ -0,0 +1,90 @@
+//#region src/components/composites/icon-picker/image-data-url.ts
+/**
+* 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. */
+var MARK_IMAGE_SIZE = 128;
+/** The largest source file read, before resizing. */
+var MARK_IMAGE_MAX_SOURCE_BYTES = 8388608;
+/** The largest encoded result kept; a stored mark never exceeds this many characters. */
+var MARK_IMAGE_MAX_DATA_URL_LENGTH = 49152;
+var ACCEPTED_TYPES = /* @__PURE__ */ new Set([
+	"image/png",
+	"image/jpeg",
+	"image/webp",
+	"image/gif"
+]);
+/** Thrown by {@link markImageFromFile}; `problem` keys {@link markImageProblemCopy}. */
+var MarkImageError = class extends Error {
+	problem;
+	constructor(problem) {
+		super(problem);
+		this.name = "MarkImageError";
+		this.problem = problem;
+	}
+};
+var markImageProblemCopy = {
+	type: "Choose a PNG, JPEG, WebP or GIF image.",
+	size: "That image is larger than 8 MB. Choose a smaller one.",
+	unreadable: "That image could not be read. Try a different file.",
+	"too-large": "That image is too detailed to store as a mark. Try a simpler one."
+};
+/** Whether a stored value is a mark image this module could have produced. */
+function isMarkImageDataUrl(value) {
+	return typeof value === "string" && value.length <= 49152 && /^data:image\/(?:webp|png);base64,[A-Za-z0-9+/]+={0,2}$/.test(value);
+}
+/** Pre-flight checks that need no decoding; `undefined` means the file may be read. */
+function checkMarkImageFile(file) {
+	if (!ACCEPTED_TYPES.has(file.type)) return "type";
+	if (file.size > 8388608) return "size";
+}
+/** The source rectangle of the largest centred square, so the mark is a cover crop. */
+function centredSquare(width, height) {
+	const side = Math.min(width, height);
+	return {
+		x: Math.floor((width - side) / 2),
+		y: Math.floor((height - side) / 2),
+		side
+	};
+}
+/**
+* Resize an image file to the stored mark. Rejects with a {@link MarkImageError}
+* so the caller can show `markImageProblemCopy[error.problem]`.
+*/
+async function markImageFromFile(file) {
+	const problem = checkMarkImageFile(file);
+	if (problem) throw new MarkImageError(problem);
+	let bitmap;
+	try {
+		bitmap = await createImageBitmap(file);
+	} catch {
+		throw new MarkImageError("unreadable");
+	}
+	try {
+		const canvas = document.createElement("canvas");
+		canvas.width = 128;
+		canvas.height = 128;
+		const context = canvas.getContext("2d");
+		if (!context) throw new MarkImageError("unreadable");
+		const crop = centredSquare(bitmap.width, bitmap.height);
+		context.drawImage(bitmap, crop.x, crop.y, crop.side, crop.side, 0, 0, 128, 128);
+		for (const type of ["image/webp", "image/png"]) {
+			const url = canvas.toDataURL(type, .85);
+			if (url.startsWith(`data:${type}`) && isMarkImageDataUrl(url)) return url;
+		}
+		throw new MarkImageError("too-large");
+	} finally {
+		bitmap.close();
+	}
+}
+//#endregion
+export { MARK_IMAGE_MAX_DATA_URL_LENGTH, MARK_IMAGE_MAX_SOURCE_BYTES, MARK_IMAGE_SIZE, MarkImageError, centredSquare, checkMarkImageFile, isMarkImageDataUrl, markImageFromFile, markImageProblemCopy };
+
+//# sourceMappingURL=image-data-url.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-data-url.js","names":[],"sources":["../../../../src/components/composites/icon-picker/image-data-url.ts"],"sourcesContent":["/**\n * Turning an uploaded picture into the small square mark a workspace stores.\n *\n * The mark travels with the workspace record (it is shown in every list the\n * workspace appears in), so it is resized to a fixed square and re-encoded\n * before it leaves the browser rather than stored as the user's original file.\n * Re-encoding also drops metadata and any embedded script an SVG could carry:\n * only raster images are accepted and the result is always a `data:image/webp`\n * or `data:image/png` URL.\n */\n\n/** The edge, in pixels, of the stored square. 2x the largest tile the apps draw. */\nexport const MARK_IMAGE_SIZE = 128\n/** The largest source file read, before resizing. */\nexport const MARK_IMAGE_MAX_SOURCE_BYTES = 8 * 1024 * 1024\n/** The largest encoded result kept; a stored mark never exceeds this many characters. */\nexport const MARK_IMAGE_MAX_DATA_URL_LENGTH = 48 * 1024\n\nconst ACCEPTED_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/gif'])\n\nexport type MarkImageProblem = 'type' | 'size' | 'unreadable' | 'too-large'\n\n/** Thrown by {@link markImageFromFile}; `problem` keys {@link markImageProblemCopy}. */\nexport class MarkImageError extends Error {\n  readonly problem: MarkImageProblem\n  constructor(problem: MarkImageProblem) {\n    super(problem)\n    this.name = 'MarkImageError'\n    this.problem = problem\n  }\n}\n\nexport const markImageProblemCopy: Readonly<Record<MarkImageProblem, string>> = {\n  type: 'Choose a PNG, JPEG, WebP or GIF image.',\n  size: 'That image is larger than 8 MB. Choose a smaller one.',\n  unreadable: 'That image could not be read. Try a different file.',\n  'too-large': 'That image is too detailed to store as a mark. Try a simpler one.',\n}\n\n/** Whether a stored value is a mark image this module could have produced. */\nexport function isMarkImageDataUrl(value: unknown): value is string {\n  return (\n    typeof value === 'string' &&\n    value.length <= MARK_IMAGE_MAX_DATA_URL_LENGTH &&\n    /^data:image\\/(?:webp|png);base64,[A-Za-z0-9+/]+={0,2}$/.test(value)\n  )\n}\n\n/** Pre-flight checks that need no decoding; `undefined` means the file may be read. */\nexport function checkMarkImageFile(\n  file: Readonly<{ type: string; size: number }>\n): MarkImageProblem | undefined {\n  if (!ACCEPTED_TYPES.has(file.type)) return 'type'\n  if (file.size > MARK_IMAGE_MAX_SOURCE_BYTES) return 'size'\n  return undefined\n}\n\n/** The source rectangle of the largest centred square, so the mark is a cover crop. */\nexport function centredSquare(\n  width: number,\n  height: number\n): Readonly<{ x: number; y: number; side: number }> {\n  const side = Math.min(width, height)\n  return { x: Math.floor((width - side) / 2), y: Math.floor((height - side) / 2), side }\n}\n\n/**\n * Resize an image file to the stored mark. Rejects with a {@link MarkImageError}\n * so the caller can show `markImageProblemCopy[error.problem]`.\n */\nexport async function markImageFromFile(file: File): Promise<string> {\n  const problem = checkMarkImageFile(file)\n  if (problem) throw new MarkImageError(problem)\n  let bitmap: ImageBitmap\n  try {\n    bitmap = await createImageBitmap(file)\n  } catch {\n    throw new MarkImageError('unreadable')\n  }\n  try {\n    const canvas = document.createElement('canvas')\n    canvas.width = MARK_IMAGE_SIZE\n    canvas.height = MARK_IMAGE_SIZE\n    const context = canvas.getContext('2d')\n    if (!context) throw new MarkImageError('unreadable')\n    const crop = centredSquare(bitmap.width, bitmap.height)\n    context.drawImage(\n      bitmap,\n      crop.x,\n      crop.y,\n      crop.side,\n      crop.side,\n      0,\n      0,\n      MARK_IMAGE_SIZE,\n      MARK_IMAGE_SIZE\n    )\n    // WebP where the browser can encode it; PNG is the always-available fallback.\n    for (const type of ['image/webp', 'image/png']) {\n      const url = canvas.toDataURL(type, 0.85)\n      if (url.startsWith(`data:${type}`) && isMarkImageDataUrl(url)) return url\n    }\n    throw new MarkImageError('too-large')\n  } finally {\n    bitmap.close()\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,kBAAkB;;AAE/B,IAAa,8BAA8B;;AAE3C,IAAa,iCAAiC;AAE9C,IAAM,iCAAiB,IAAI,IAAI;CAAC;CAAa;CAAc;CAAc;AAAW,CAAC;;AAKrF,IAAa,iBAAb,cAAoC,MAAM;CACxC;CACA,YAAY,SAA2B;EACrC,MAAM,OAAO;EACb,KAAK,OAAO;EACZ,KAAK,UAAU;CACjB;AACF;AAEA,IAAa,uBAAmE;CAC9E,MAAM;CACN,MAAM;CACN,YAAY;CACZ,aAAa;AACf;;AAGA,SAAgB,mBAAmB,OAAiC;CAClE,OACE,OAAO,UAAU,YACjB,MAAM,UAAA,SACN,yDAAyD,KAAK,KAAK;AAEvE;;AAGA,SAAgB,mBACd,MAC8B;CAC9B,IAAI,CAAC,eAAe,IAAI,KAAK,IAAI,GAAG,OAAO;CAC3C,IAAI,KAAK,OAAA,SAAoC,OAAO;AAEtD;;AAGA,SAAgB,cACd,OACA,QACkD;CAClD,MAAM,OAAO,KAAK,IAAI,OAAO,MAAM;CACnC,OAAO;EAAE,GAAG,KAAK,OAAO,QAAQ,QAAQ,CAAC;EAAG,GAAG,KAAK,OAAO,SAAS,QAAQ,CAAC;EAAG;CAAK;AACvF;;;;;AAMA,eAAsB,kBAAkB,MAA6B;CACnE,MAAM,UAAU,mBAAmB,IAAI;CACvC,IAAI,SAAS,MAAM,IAAI,eAAe,OAAO;CAC7C,IAAI;CACJ,IAAI;EACF,SAAS,MAAM,kBAAkB,IAAI;CACvC,QAAQ;EACN,MAAM,IAAI,eAAe,YAAY;CACvC;CACA,IAAI;EACF,MAAM,SAAS,SAAS,cAAc,QAAQ;EAC9C,OAAO,QAAA;EACP,OAAO,SAAA;EACP,MAAM,UAAU,OAAO,WAAW,IAAI;EACtC,IAAI,CAAC,SAAS,MAAM,IAAI,eAAe,YAAY;EACnD,MAAM,OAAO,cAAc,OAAO,OAAO,OAAO,MAAM;EACtD,QAAQ,UACN,QACA,KAAK,GACL,KAAK,GACL,KAAK,MACL,KAAK,MACL,GACA,GAAA,KAAA,GAGF;EAEA,KAAK,MAAM,QAAQ,CAAC,cAAc,WAAW,GAAG;GAC9C,MAAM,MAAM,OAAO,UAAU,MAAM,GAAI;GACvC,IAAI,IAAI,WAAW,QAAQ,MAAM,KAAK,mBAAmB,GAAG,GAAG,OAAO;EACxE;EACA,MAAM,IAAI,eAAe,WAAW;CACtC,UAAU;EACR,OAAO,MAAM;CACf;AACF"}

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

@@ -0,0 +1,4 @@
+export { IconPicker, type IconPickerProps } from './icon-picker';
+export { MARK_IMAGE_MAX_DATA_URL_LENGTH, MARK_IMAGE_MAX_SOURCE_BYTES, MARK_IMAGE_SIZE, MarkImageError, centredSquare, checkMarkImageFile, isMarkImageDataUrl, markImageFromFile, markImageProblemCopy, type MarkImageProblem, } from './image-data-url';
+export { isShellIconKey, resolveShellIcon, shellIconEntries, shellIconLabel, type ShellIconKey, } from './shell-icons';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/icon-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EACL,8BAA8B,EAC9B,2BAA2B,EAC3B,eAAe,EACf,cAAc,EACd,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,KAAK,gBAAgB,GACtB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,KAAK,YAAY,GAClB,MAAM,eAAe,CAAA"}

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

@@ -0,0 +1,4 @@
+import { MARK_IMAGE_MAX_DATA_URL_LENGTH, MARK_IMAGE_MAX_SOURCE_BYTES, MARK_IMAGE_SIZE, MarkImageError, centredSquare, checkMarkImageFile, isMarkImageDataUrl, markImageFromFile, markImageProblemCopy } from "./image-data-url.js";
+import { isShellIconKey, resolveShellIcon, shellIconEntries, shellIconLabel } from "./shell-icons.js";
+import { IconPicker } from "./icon-picker.js";
+export { IconPicker, MARK_IMAGE_MAX_DATA_URL_LENGTH, MARK_IMAGE_MAX_SOURCE_BYTES, MARK_IMAGE_SIZE, MarkImageError, centredSquare, checkMarkImageFile, isMarkImageDataUrl, isShellIconKey, markImageFromFile, markImageProblemCopy, resolveShellIcon, shellIconEntries, shellIconLabel };