@burdenoff/fe-libs 2026.624.2 → 2026.625.2

package/dist/chrome/SideNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigation.d.ts","sourceRoot":"","sources":["../../src/chrome/SideNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAOtD,YAAY,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,KAAK,EAAE,OAAO,EAAE,CAAC;IAEjB,0BAA0B;IAC1B,WAAW,EAAE,MAAM,CAAC;IAEpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,sEAAsE;IACtE,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEnC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,eAAe,CAAC;CACvC;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAuNlD,CAAC"}
+{"version":3,"file":"SideNavigation.d.ts","sourceRoot":"","sources":["../../src/chrome/SideNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAOtD,YAAY,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,KAAK,EAAE,OAAO,EAAE,CAAC;IAEjB,0BAA0B;IAC1B,WAAW,EAAE,MAAM,CAAC;IAEpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,sEAAsE;IACtE,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEnC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAErC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,eAAe,CAAC;CACvC;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAwNlD,CAAC"}

package/dist/chrome/SideNavigation.js

@@ -39,7 +39,8 @@ var f = ({ items: f, currentPath: p, collapsed: m = !1, onItemClick: h, onToggle
 		"aria-label": "Close sidebar"
 	})] }), /* @__PURE__ */ d("aside", {
 		className: `
-          bg-bg-surface border-r border-border-subtle
+          bg-bg-canvas supports-[backdrop-filter]:bg-[var(--color-surface-glass)] supports-[backdrop-filter]:backdrop-blur-[var(--blur-glass)]
+          border-r border-border-seam
           transition-all duration-normal
           flex flex-col min-h-0
           fixed md:relative

package/dist/chrome/ThemePreferences.d.ts

@@ -0,0 +1,15 @@
+export interface ThemePreferencesProps {
+    className?: string;
+    /** Render the theme cards grid + custom theme editor (default true). */
+    showCustomThemes?: boolean;
+}
+/**
+ * Boff UI 2.0 "Theme Preferences" customizer.
+ *
+ * Presentation-only: every value is read from and written through {@link useTheme}.
+ * No raw colors are used in class names — only semantic token utilities. The single
+ * exception is the `value` of the `<input type="color">` inside the custom editor,
+ * which is data entry (a hex string), never a className.
+ */
+export declare function ThemePreferences({ className, showCustomThemes }: ThemePreferencesProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemePreferences.d.ts.map

package/dist/chrome/ThemePreferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePreferences.d.ts","sourceRoot":"","sources":["../../src/chrome/ThemePreferences.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAgCD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,gBAAuB,EAAE,EAAE,qBAAqB,2CAwZ7F"}

package/dist/chrome/ThemePreferences.js

@@ -0,0 +1,604 @@
+import { Button as e } from "../ui/button.js";
+import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "../ui/select.js";
+import { Badge as o } from "../ui/badge.js";
+import { Card as s, CardContent as c, CardDescription as l, CardHeader as u, CardTitle as d } from "../ui/card.js";
+import { Input as f } from "../ui/input.js";
+import { Label as p } from "../ui/label.js";
+import { THEME_OPTIONS as m, useTheme as h } from "../shared/providers/shell/ThemeProvider.js";
+import { Switch as g } from "../ui/switch.js";
+import { cn as _ } from "../utils/cn.js";
+import "../utils/index.js";
+import { useCallback as v, useId as y, useMemo as b, useState as x } from "react";
+import { Check as S, Palette as C, Pencil as ee, Plus as te, Trash2 as ne, X as re } from "lucide-react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/chrome/ThemePreferences.tsx
+var E = [
+	{
+		name: "Blue",
+		varName: "--color-accent-blue"
+	},
+	{
+		name: "Purple",
+		varName: "--color-accent-purple"
+	},
+	{
+		name: "Teal",
+		varName: "--color-accent-teal"
+	},
+	{
+		name: "Indigo",
+		varName: "--color-accent-indigo"
+	}
+], D = [
+	{
+		value: "compact",
+		label: "Compact"
+	},
+	{
+		value: "comfortable",
+		label: "Comfortable"
+	},
+	{
+		value: "spacious",
+		label: "Spacious"
+	}
+], O = [
+	{
+		value: "small",
+		label: "Small"
+	},
+	{
+		value: "default",
+		label: "Default"
+	},
+	{
+		value: "large",
+		label: "Large"
+	}
+], k = [
+	{
+		value: "off",
+		label: "Off"
+	},
+	{
+		value: "subtle",
+		label: "Subtle"
+	},
+	{
+		value: "full",
+		label: "Full"
+	}
+], A = (e) => e === "dark" ? "bg-bg-sunken" : "bg-bg-surface";
+function j({ className: t, showCustomThemes: n = !0 }) {
+	let { mode: r, density: i, typography: a, glass: y, reduceMotion: re, resolvedThemeName: j, setMode: P, setDensity: ae, setTypography: oe, setGlass: se, setReduceMotion: ce, customThemes: F, activeCustomId: I, createCustomTheme: L, updateCustomTheme: R, deleteCustomTheme: le, applyCustomTheme: z } = h(), [B, V] = x(!1), [H, ue] = x("My theme"), [U, de] = x("light"), [W, fe] = x("#6366F1"), [G, pe] = x("comfortable"), [K, me] = x("default"), [q, he] = x("full"), [J, ge] = x(!1), [Y, X] = x(null), [Z, _e] = x(""), Q = v(() => V(!0), []), ve = v(() => {
+		z(L({
+			name: H.trim() || "Untitled theme",
+			base: U,
+			accent: W,
+			density: G,
+			typography: K,
+			glass: q,
+			reduceMotion: J
+		}).id), V(!1);
+	}, [
+		H,
+		U,
+		W,
+		G,
+		K,
+		q,
+		J,
+		L,
+		z
+	]), ye = v((e) => {
+		X(e.id), _e(e.name);
+	}, []), be = v(() => {
+		Y && R(Y, { name: Z.trim() || "Untitled theme" }), X(null);
+	}, [
+		Y,
+		Z,
+		R
+	]), $ = b(() => B ? {
+		theme: U,
+		density: G,
+		typography: K,
+		glass: q
+	} : {
+		theme: j,
+		density: i,
+		typography: a,
+		glass: y
+	}, [
+		B,
+		U,
+		G,
+		K,
+		q,
+		j,
+		i,
+		a,
+		y
+	]);
+	return /* @__PURE__ */ T("div", {
+		className: _("flex flex-col gap-6", t),
+		children: [
+			n && /* @__PURE__ */ T(s, { children: [/* @__PURE__ */ T(u, { children: [/* @__PURE__ */ T(d, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ w(C, {
+					className: "size-4 text-text-secondary",
+					"aria-hidden": "true"
+				}), "Theme"]
+			}), /* @__PURE__ */ w(l, { children: "Pick a built-in theme or one of your saved custom themes." })] }), /* @__PURE__ */ w(c, { children: /* @__PURE__ */ T("div", {
+				role: "radiogroup",
+				"aria-label": "Theme",
+				className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
+				children: [
+					m.map((e) => /* @__PURE__ */ w(M, {
+						label: e.label,
+						family: e.family,
+						active: r === e.value,
+						onSelect: () => P(e.value)
+					}, e.value)),
+					F.map((e) => /* @__PURE__ */ w(M, {
+						label: e.name,
+						family: e.base,
+						accent: e.accent,
+						active: r === "custom" && I === e.id,
+						onSelect: () => z(e.id)
+					}, e.id)),
+					/* @__PURE__ */ T("button", {
+						type: "button",
+						onClick: Q,
+						className: "flex min-h-[5.5rem] flex-col items-center justify-center gap-1 rounded-card border border-dashed border-border-default bg-bg-surface text-text-secondary transition-colors hover:border-border-strong hover:bg-bg-sunken hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+						children: [/* @__PURE__ */ w(te, {
+							className: "size-5",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ w("span", {
+							className: "text-xs font-medium",
+							children: "New theme"
+						})]
+					})
+				]
+			}) })] }),
+			/* @__PURE__ */ T(s, { children: [/* @__PURE__ */ T(u, { children: [/* @__PURE__ */ w(d, { children: "Accent" }), /* @__PURE__ */ w(l, { children: "Accent color retints buttons, links, and highlights across the app." })] }), /* @__PURE__ */ w(c, { children: /* @__PURE__ */ T("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [E.map((e) => /* @__PURE__ */ T("div", {
+					className: "flex flex-col items-center gap-1.5",
+					children: [/* @__PURE__ */ w("span", {
+						className: "size-9 rounded-full border border-border-seam shadow-elevation-1",
+						style: { backgroundColor: `var(${e.varName})` },
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ w("span", {
+						className: "text-xs text-text-secondary",
+						children: e.name
+					})]
+				}, e.name)), /* @__PURE__ */ T(e, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					onClick: Q,
+					className: "ml-1",
+					children: [/* @__PURE__ */ w(C, {
+						className: "size-4",
+						"aria-hidden": "true"
+					}), "Custom accent"]
+				})]
+			}) })] }),
+			/* @__PURE__ */ w(N, {
+				title: "Density",
+				description: "Spacing and control sizing throughout the interface.",
+				value: i,
+				options: D,
+				onChange: ae
+			}),
+			/* @__PURE__ */ w(N, {
+				title: "Typography",
+				description: "Base font scale for text across the app.",
+				value: a,
+				options: O,
+				onChange: oe
+			}),
+			/* @__PURE__ */ w(N, {
+				title: "Glass intensity",
+				description: "Strength of the frosted-glass blur on elevated surfaces.",
+				value: y,
+				options: k,
+				onChange: se
+			}),
+			/* @__PURE__ */ w(s, { children: /* @__PURE__ */ T(c, {
+				className: "flex items-center justify-between gap-4 pt-6",
+				children: [/* @__PURE__ */ T("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ w(p, {
+						htmlFor: "theme-reduce-motion",
+						className: "text-sm font-medium text-text-primary",
+						children: "Reduce motion"
+					}), /* @__PURE__ */ w("span", {
+						className: "text-xs text-text-secondary",
+						children: "Minimize animations and transitions across the app."
+					})]
+				}), /* @__PURE__ */ w(g, {
+					id: "theme-reduce-motion",
+					checked: re,
+					onCheckedChange: ce,
+					"aria-label": "Reduce motion"
+				})]
+			}) }),
+			n && B && /* @__PURE__ */ w(ie, {
+				name: H,
+				base: U,
+				accent: W,
+				density: G,
+				typography: K,
+				glass: q,
+				reduceMotion: J,
+				onName: ue,
+				onBase: de,
+				onAccent: fe,
+				onDensity: pe,
+				onTypography: me,
+				onGlass: he,
+				onReduceMotion: ge,
+				onSave: ve,
+				onCancel: () => V(!1)
+			}),
+			n && F.length > 0 && /* @__PURE__ */ T(s, { children: [/* @__PURE__ */ T(u, { children: [/* @__PURE__ */ w(d, { children: "Saved themes" }), /* @__PURE__ */ w(l, { children: "Apply, rename, or remove your custom themes." })] }), /* @__PURE__ */ w(c, { children: /* @__PURE__ */ w("ul", {
+				className: "flex flex-col divide-y divide-border-subtle",
+				children: F.map((t) => {
+					let n = r === "custom" && I === t.id;
+					return /* @__PURE__ */ T("li", {
+						className: "flex flex-wrap items-center gap-3 py-3 first:pt-0 last:pb-0",
+						children: [
+							/* @__PURE__ */ w("span", {
+								className: "size-6 rounded-full border border-border-seam",
+								style: { backgroundColor: t.accent },
+								"aria-hidden": "true"
+							}),
+							Y === t.id ? /* @__PURE__ */ w(f, {
+								autoFocus: !0,
+								value: Z,
+								"aria-label": "Theme name",
+								onChange: (e) => _e(e.target.value),
+								onBlur: be,
+								onKeyDown: (e) => {
+									e.key === "Enter" && be(), e.key === "Escape" && X(null);
+								},
+								className: "h-8 w-44"
+							}) : /* @__PURE__ */ T("span", {
+								className: "flex flex-1 items-center gap-2 text-sm text-text-primary",
+								children: [t.name, n && /* @__PURE__ */ T(o, {
+									variant: "success",
+									className: "gap-1",
+									children: [/* @__PURE__ */ w(S, {
+										className: "size-3",
+										"aria-hidden": "true"
+									}), "Active"]
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "ml-auto flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ w(e, {
+										type: "button",
+										variant: "outline",
+										size: "sm",
+										disabled: n,
+										onClick: () => z(t.id),
+										children: "Apply"
+									}),
+									/* @__PURE__ */ w(e, {
+										type: "button",
+										variant: "ghost",
+										size: "icon-sm",
+										"aria-label": `Rename ${t.name}`,
+										onClick: () => ye(t),
+										children: /* @__PURE__ */ w(ee, {
+											className: "size-4",
+											"aria-hidden": "true"
+										})
+									}),
+									/* @__PURE__ */ w(e, {
+										type: "button",
+										variant: "ghost",
+										size: "icon-sm",
+										"aria-label": `Delete ${t.name}`,
+										onClick: () => le(t.id),
+										children: /* @__PURE__ */ w(ne, {
+											className: "size-4 text-action-danger-bg",
+											"aria-hidden": "true"
+										})
+									})
+								]
+							})
+						]
+					}, t.id);
+				})
+			}) })] }),
+			/* @__PURE__ */ T(s, { children: [/* @__PURE__ */ T(u, { children: [/* @__PURE__ */ w(d, { children: "Preview" }), /* @__PURE__ */ w(l, { children: "A scoped preview of the candidate theme — applies only here until you select it." })] }), /* @__PURE__ */ w(c, { children: /* @__PURE__ */ T("div", {
+				"data-theme": $.theme,
+				"data-density": $.density,
+				"data-typography": $.typography,
+				"data-glass": $.glass,
+				className: _("flex flex-col gap-4 rounded-card border border-border-seam p-4", A(m.find((e) => e.value === $.theme)?.family ?? "light")),
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ w(e, {
+								type: "button",
+								size: "sm",
+								children: "Primary"
+							}),
+							/* @__PURE__ */ w(e, {
+								type: "button",
+								variant: "secondary",
+								size: "sm",
+								children: "Secondary"
+							}),
+							/* @__PURE__ */ w(e, {
+								type: "button",
+								variant: "outline",
+								size: "sm",
+								children: "Outline"
+							}),
+							/* @__PURE__ */ w(e, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								children: "Ghost"
+							})
+						]
+					}),
+					/* @__PURE__ */ T("div", {
+						className: "rounded-card border border-border-seam bg-[var(--color-surface-glass)] p-4 shadow-[var(--shadow-pop)] backdrop-blur-[var(--blur-glass)]",
+						children: [
+							/* @__PURE__ */ w("p", {
+								className: "text-xs font-medium text-text-secondary",
+								children: "Active sessions"
+							}),
+							/* @__PURE__ */ w("p", {
+								className: "mt-1 text-2xl font-semibold text-text-primary",
+								children: "1,284"
+							}),
+							/* @__PURE__ */ w("p", {
+								className: "mt-1 text-xs text-status-success-text",
+								children: "+12.4% this week"
+							})
+						]
+					}),
+					/* @__PURE__ */ T("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ w(o, { children: "Default" }),
+							/* @__PURE__ */ w(o, {
+								variant: "secondary",
+								children: "Secondary"
+							}),
+							/* @__PURE__ */ w(o, {
+								variant: "success",
+								children: "Success"
+							}),
+							/* @__PURE__ */ w(o, {
+								variant: "warning",
+								children: "Warning"
+							}),
+							/* @__PURE__ */ w(o, {
+								variant: "destructive",
+								children: "Error"
+							})
+						]
+					}),
+					/* @__PURE__ */ w("div", {
+						className: "flex flex-wrap items-center gap-4",
+						children: E.map((e) => /* @__PURE__ */ T("span", {
+							className: "flex items-center gap-1.5 text-xs text-text-secondary",
+							children: [/* @__PURE__ */ w("span", {
+								className: "size-3 rounded-full",
+								style: { backgroundColor: `var(${e.varName})` },
+								"aria-hidden": "true"
+							}), e.name]
+						}, e.name))
+					})
+				]
+			}) })] })
+		]
+	});
+}
+function M({ label: e, family: t, accent: n, active: r, onSelect: i }) {
+	return /* @__PURE__ */ T("button", {
+		type: "button",
+		role: "radio",
+		"aria-checked": r,
+		onClick: i,
+		className: _("group relative flex flex-col gap-2 rounded-card border p-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", r ? "border-border-focus bg-[var(--color-accent-soft)]" : "border-border-default bg-bg-surface hover:border-border-strong hover:bg-bg-sunken"),
+		children: [/* @__PURE__ */ w("span", {
+			className: _("relative flex h-12 w-full items-end overflow-hidden rounded-button border border-border-seam", A(t)),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ w("span", {
+				className: "m-1.5 size-3 rounded-full shadow-elevation-1",
+				style: n ? { backgroundColor: n } : void 0,
+				children: !n && /* @__PURE__ */ w("span", { className: "block size-3 rounded-full bg-action-primary-bg" })
+			})
+		}), /* @__PURE__ */ T("span", {
+			className: "flex items-center justify-between gap-1",
+			children: [/* @__PURE__ */ w("span", {
+				className: "truncate text-xs font-medium text-text-primary",
+				children: e
+			}), r && /* @__PURE__ */ w(S, {
+				className: "size-3.5 shrink-0 text-action-primary-bg",
+				"aria-hidden": "true"
+			})]
+		})]
+	});
+}
+function N({ title: e, description: t, value: n, options: r, onChange: i }) {
+	return /* @__PURE__ */ T(s, { children: [/* @__PURE__ */ T(u, { children: [/* @__PURE__ */ w(d, { children: e }), /* @__PURE__ */ w(l, { children: t })] }), /* @__PURE__ */ w(c, { children: /* @__PURE__ */ w("div", {
+		role: "radiogroup",
+		"aria-label": e,
+		className: "inline-flex w-full flex-col gap-1 rounded-button border border-border-default bg-bg-sunken p-1 sm:w-auto sm:flex-row",
+		children: r.map((e) => {
+			let t = n === e.value;
+			return /* @__PURE__ */ w("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": t,
+				onClick: () => i(e.value),
+				className: _("flex-1 rounded-button px-4 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", t ? "bg-bg-surface text-text-primary shadow-elevation-1" : "text-text-secondary hover:text-text-primary"),
+				children: e.label
+			}, e.value);
+		})
+	}) })] });
+}
+function ie({ name: t, base: n, accent: r, density: i, typography: a, glass: o, reduceMotion: m, onName: h, onBase: v, onAccent: b, onDensity: x, onTypography: C, onGlass: ee, onReduceMotion: te, onSave: ne, onCancel: E }) {
+	let A = y(), j = y(), M = y();
+	return /* @__PURE__ */ T(s, { children: [/* @__PURE__ */ T(u, {
+		className: "flex-row items-start justify-between gap-4 space-y-0",
+		children: [/* @__PURE__ */ T("div", {
+			className: "flex flex-col gap-1.5",
+			children: [/* @__PURE__ */ w(d, { children: "Custom theme" }), /* @__PURE__ */ w(l, { children: "Design a reusable theme and save it to your library." })]
+		}), /* @__PURE__ */ w(e, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": "Close editor",
+			onClick: E,
+			children: /* @__PURE__ */ w(re, {
+				className: "size-4",
+				"aria-hidden": "true"
+			})
+		})]
+	}), /* @__PURE__ */ T(c, {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ w(p, {
+					htmlFor: A,
+					children: "Name"
+				}), /* @__PURE__ */ w(f, {
+					id: A,
+					value: t,
+					onChange: (e) => h(e.target.value),
+					placeholder: "My theme"
+				})]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ w("span", {
+					className: "text-sm font-medium text-text-primary",
+					id: `${A}-base`,
+					children: "Base"
+				}), /* @__PURE__ */ w("div", {
+					role: "radiogroup",
+					"aria-labelledby": `${A}-base`,
+					className: "inline-flex w-full gap-1 rounded-button border border-border-default bg-bg-sunken p-1 sm:w-auto",
+					children: ["light", "dark"].map((e) => {
+						let t = n === e;
+						return /* @__PURE__ */ w("button", {
+							type: "button",
+							role: "radio",
+							"aria-checked": t,
+							onClick: () => v(e),
+							className: _("flex-1 rounded-button px-4 py-1.5 text-sm font-medium capitalize transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", t ? "bg-bg-surface text-text-primary shadow-elevation-1" : "text-text-secondary hover:text-text-primary"),
+							children: e
+						}, e);
+					})
+				})]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ w(p, {
+					htmlFor: j,
+					children: "Accent"
+				}), /* @__PURE__ */ T("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ w("input", {
+						id: j,
+						type: "color",
+						value: r,
+						onChange: (e) => b(e.target.value),
+						"aria-label": "Accent color",
+						className: "size-10 cursor-pointer rounded-input border border-border-default bg-bg-surface p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
+					}), /* @__PURE__ */ w("span", {
+						className: "font-mono text-sm uppercase text-text-secondary",
+						children: r
+					})]
+				})]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ w(P, {
+						label: "Density",
+						value: i,
+						options: D,
+						onChange: (e) => x(e)
+					}),
+					/* @__PURE__ */ w(P, {
+						label: "Typography",
+						value: a,
+						options: O,
+						onChange: (e) => C(e)
+					}),
+					/* @__PURE__ */ w(P, {
+						label: "Glass",
+						value: o,
+						options: k,
+						onChange: (e) => ee(e)
+					})
+				]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ w(p, {
+					htmlFor: M,
+					className: "text-sm font-medium text-text-primary",
+					children: "Reduce motion"
+				}), /* @__PURE__ */ w(g, {
+					id: M,
+					checked: m,
+					onCheckedChange: te,
+					"aria-label": "Reduce motion"
+				})]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "flex items-center justify-end gap-2 pt-2",
+				children: [/* @__PURE__ */ w(e, {
+					type: "button",
+					variant: "ghost",
+					onClick: E,
+					children: "Cancel"
+				}), /* @__PURE__ */ T(e, {
+					type: "button",
+					onClick: ne,
+					children: [/* @__PURE__ */ w(S, {
+						className: "size-4",
+						"aria-hidden": "true"
+					}), "Save"]
+				})]
+			})
+		]
+	})] });
+}
+function P({ label: e, value: o, options: s, onChange: c }) {
+	let l = y();
+	return /* @__PURE__ */ T("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ w(p, {
+			htmlFor: l,
+			children: e
+		}), /* @__PURE__ */ T(t, {
+			value: o,
+			onValueChange: c,
+			children: [/* @__PURE__ */ w(i, {
+				id: l,
+				children: /* @__PURE__ */ w(a, {})
+			}), /* @__PURE__ */ w(n, { children: s.map((e) => /* @__PURE__ */ w(r, {
+				value: e.value,
+				children: e.label
+			}, e.value)) })]
+		})]
+	});
+}
+//#endregion
+export { j as ThemePreferences };

package/dist/chrome/index.d.ts

@@ -107,4 +107,5 @@ export type { PluginWidgetGridProps } from './PluginWidgetGrid';
 export { PluginContextMenuTarget } from './PluginContextMenuTarget';
 export type { PluginContextMenuTargetProps } from './PluginContextMenuTarget';
 export { PluginFooterStrip } from './PluginFooterStrip';
+export { ThemePreferences, type ThemePreferencesProps } from './ThemePreferences';
 //# sourceMappingURL=index.d.ts.map

package/dist/chrome/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chrome/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,wBAAwB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClF,YAAY,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACrE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACtF,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC7F,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACtE,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACzF,YAAY,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAChG,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAIpE,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chrome/index.ts"],"names":[],"mappings":"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"}

package/dist/chrome.js

@@ -32,4 +32,5 @@ import { PluginSettingsPage as P } from "./chrome/PluginSettingsPage.js";
 import { PluginToolbar as F } from "./chrome/PluginToolbar.js";
 import { PluginWidgetGrid as I } from "./chrome/PluginWidgetGrid.js";
 import { PluginContextMenuTarget as L } from "./chrome/PluginContextMenuTarget.js";
-export { w as AccountSwitcher, t as AppShellLayout, T as AutoBreadcrumbs, f as Breadcrumbs, d as CommandPalette, y as ContextSwitcher, o as DEFAULT_FOOTER_COLUMNS, s as DEFAULT_SOCIAL_LINKS, k as DynamicFooter, c as Footer, i as FooterBar, b as GeographySwitcher, u as GlobalSearch, r as HeaderBar, S as LanguagePickerSheet, v as LanguageSwitcher, p as NavLink, x as NotificationCenter, n as PageHeader, j as PanelContainer, A as PanelTabs, L as PluginContextMenuTarget, a as PluginFooterStrip, N as PluginRoutes, P as PluginSettingsPage, F as PluginToolbar, I as PluginWidgetGrid, C as ProductPickerSheet, O as ProductSideNav, _ as ProductSwitcher, g as ProfileSwitcher, e as ShortcutHelpDialog, l as SideNavigation, h as Sidebar, M as StatusBar, m as Tabs, E as registerBreadcrumbName, D as unregisterBreadcrumbName };
+import { ThemePreferences as R } from "./chrome/ThemePreferences.js";
+export { w as AccountSwitcher, t as AppShellLayout, T as AutoBreadcrumbs, f as Breadcrumbs, d as CommandPalette, y as ContextSwitcher, o as DEFAULT_FOOTER_COLUMNS, s as DEFAULT_SOCIAL_LINKS, k as DynamicFooter, c as Footer, i as FooterBar, b as GeographySwitcher, u as GlobalSearch, r as HeaderBar, S as LanguagePickerSheet, v as LanguageSwitcher, p as NavLink, x as NotificationCenter, n as PageHeader, j as PanelContainer, A as PanelTabs, L as PluginContextMenuTarget, a as PluginFooterStrip, N as PluginRoutes, P as PluginSettingsPage, F as PluginToolbar, I as PluginWidgetGrid, C as ProductPickerSheet, O as ProductSideNav, _ as ProductSwitcher, g as ProfileSwitcher, e as ShortcutHelpDialog, l as SideNavigation, h as Sidebar, M as StatusBar, m as Tabs, R as ThemePreferences, E as registerBreadcrumbName, D as unregisterBreadcrumbName };