@bunnyland/ui-web 0.2.0

package/dist/theme.js

@@ -0,0 +1,165 @@
+import { escapeHtml as e, storageGet as t, storageSet as n } from "./widgets.js";
+//#region src/theme.ts
+var r = "bunnyland.theme", i = "bl-theme-", a = "bunnyland.color-scheme", o = "bl-color-scheme-", s = "purple-blue", c = "bunnyland:themechange", l = [
+	{
+		value: "purple-blue",
+		label: "Purple / Blue"
+	},
+	{
+		value: "candy",
+		label: "Candy Pink / Cyan"
+	},
+	{
+		value: "earth",
+		label: "Earth Green / Gold"
+	},
+	{
+		value: "ocean",
+		label: "Ocean Teal / Coral"
+	},
+	{
+		value: "sunset",
+		label: "Sunset Orange / Plum"
+	},
+	{
+		value: "high-contrast",
+		label: "High Contrast"
+	}
+], u = l.map((e) => ({ ...e })), d = {
+	anime: "candy",
+	"anime-dark": "candy-dark",
+	"anime-light": "candy-light",
+	dark: "purple-blue-dark",
+	light: "purple-blue-light"
+}, f = [
+	{
+		value: "auto",
+		label: "Auto (System)"
+	},
+	{
+		value: "dark",
+		label: "Dark"
+	},
+	{
+		value: "light",
+		label: "Light"
+	}
+], p = /^[a-z0-9][a-z0-9-]*$/, m = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
+function g(e) {
+	let t = d[String(e || "purple-blue").trim()] || String(e || "purple-blue").trim();
+	if (v(t)) return {
+		theme: t,
+		scheme: null
+	};
+	let n = t.match(/^(.*)-(dark|light)$/);
+	return n && v(n[1]) ? {
+		theme: n[1],
+		scheme: n[2]
+	} : {
+		theme: t,
+		scheme: null
+	};
+}
+function _(e) {
+	return g(e).theme;
+}
+function v(e) {
+	return u.some((t) => t.value === e);
+}
+function y(e) {
+	let t = String(e?.value || "").trim();
+	return p.test(t) ? {
+		value: t,
+		label: String(e?.label || t).trim() || t
+	} : null;
+}
+function b(t) {
+	let n = D();
+	t.innerHTML = F().map((t) => `
+    <option value="${e(t.value)}">${e(t.label)}</option>
+  `).join(""), t.value = n;
+}
+function x() {
+	for (let e of m) b(e);
+}
+function S(e) {
+	return e === "dark" || e === "light" ? e : "auto";
+}
+function C(e) {
+	e.innerHTML = f.map((e) => `
+    <option value="${e.value}">${e.label}</option>
+  `).join(""), e.value = O();
+}
+function w() {
+	for (let e of h) C(e);
+}
+function T(e = globalThis.location?.search || "") {
+	let t = new URLSearchParams(e).get("theme");
+	if (!t) return null;
+	let n = _(t);
+	return v(n) ? n : null;
+}
+function E(e) {
+	let t = _(e);
+	return v(t) ? t : s;
+}
+function D(e = document.documentElement) {
+	return E(e.dataset.theme);
+}
+function O(e = document.documentElement) {
+	return S(e.dataset.colorScheme);
+}
+function k(e) {
+	typeof e.dispatchEvent == "function" && typeof CustomEvent == "function" && e.dispatchEvent(new CustomEvent(c, { detail: {
+		colorScheme: O(e),
+		theme: D(e)
+	} }));
+}
+function A(e, t, a) {
+	for (let e of [...t.classList]) e.startsWith("bl-theme-") && t.classList.remove(e);
+	return t.classList.add(`${i}${e}`), t.dataset.theme = e, a && n(r, e), x(), k(t), e;
+}
+function j(e, t, r) {
+	for (let e of [...t.classList]) e.startsWith("bl-color-scheme-") && t.classList.remove(e);
+	return e !== "auto" && t.classList.add(`${o}${e}`), t.dataset.colorScheme = e, r && n(a, e), w(), k(t), e;
+}
+function M(e, t = document.documentElement) {
+	return j(S(e), t, !0);
+}
+function N(e, t = document.documentElement) {
+	let n = g(e);
+	return n.scheme && j(n.scheme, t, !0), A(E(n.theme), t, !0);
+}
+function P(e = document.documentElement, n = s, i = globalThis.location?.search || "") {
+	let o = new URLSearchParams(i).get("theme"), c = T(i), l = t(r), u = g(c && o || l || n || "purple-blue"), d = t(a);
+	return j(u.scheme || S(d), e, !!(u.scheme || d)), A(E(u.theme), e, !!(c || l && v(u.theme)));
+}
+function F() {
+	return u.map((e) => ({ ...e }));
+}
+function I() {
+	return f.map((e) => ({ ...e }));
+}
+function L(e) {
+	let t = y(e);
+	if (!t) return null;
+	let n = u.findIndex((e) => e.value === t.value);
+	return n === -1 ? u.push(t) : u[n] = t, x(), { ...t };
+}
+function R(e) {
+	return Array.isArray(e) ? e.map((e) => L(e)).filter((e) => e !== null) : [];
+}
+function z(e) {
+	return e ? (m.add(e), b(e), e.value = P(), e.addEventListener("change", () => N(e.value)), { setValue(t) {
+		e.value = E(t), N(e.value);
+	} }) : null;
+}
+function B(e) {
+	return e ? (h.add(e), C(e), e.addEventListener("change", () => M(e.value)), { setValue(t) {
+		e.value = S(t), M(e.value);
+	} }) : null;
+}
+//#endregion
+export { o as COLOR_SCHEME_CLASS_PREFIX, a as COLOR_SCHEME_KEY, s as DEFAULT_THEME, l as DEFAULT_THEME_OPTIONS, c as THEME_CHANGE_EVENT, i as THEME_CLASS_PREFIX, r as THEME_KEY, u as THEME_OPTIONS, B as bindColorSchemeSelect, z as bindThemeSelect, I as colorSchemeOptions, O as currentColorScheme, D as currentTheme, P as initTheme, E as normalizeTheme, L as registerThemeOption, R as registerThemeOptions, M as setColorScheme, N as setTheme, T as themeFromSearch, F as themeOptions };
+
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../src/theme.ts"],"sourcesContent":["import { escapeHtml, storageGet, storageSet } from './widgets';\n\nexport const THEME_KEY = 'bunnyland.theme';\nexport const THEME_CLASS_PREFIX = 'bl-theme-';\nexport const COLOR_SCHEME_KEY = 'bunnyland.color-scheme';\nexport const COLOR_SCHEME_CLASS_PREFIX = 'bl-color-scheme-';\nexport const DEFAULT_THEME = 'purple-blue';\nexport const THEME_CHANGE_EVENT = 'bunnyland:themechange';\n\nexport interface ThemeOption {\n  value: string;\n  label: string;\n}\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport const DEFAULT_THEME_OPTIONS: ThemeOption[] = [\n  { value: 'purple-blue', label: 'Purple / Blue' },\n  { value: 'candy', label: 'Candy Pink / Cyan' },\n  { value: 'earth', label: 'Earth Green / Gold' },\n  { value: 'ocean', label: 'Ocean Teal / Coral' },\n  { value: 'sunset', label: 'Sunset Orange / Plum' },\n  { value: 'high-contrast', label: 'High Contrast' },\n];\n\nexport const THEME_OPTIONS: ThemeOption[] = DEFAULT_THEME_OPTIONS.map(option => ({ ...option }));\n\nconst THEME_ALIASES: Record<string, string> = {\n  anime: 'candy',\n  'anime-dark': 'candy-dark',\n  'anime-light': 'candy-light',\n  dark: 'purple-blue-dark',\n  light: 'purple-blue-light',\n};\n\nconst COLOR_SCHEME_OPTIONS: ThemeOption[] = [\n  { value: 'auto', label: 'Auto (System)' },\n  { value: 'dark', label: 'Dark' },\n  { value: 'light', label: 'Light' },\n];\n\nconst THEME_VALUE_PATTERN = /^[a-z0-9][a-z0-9-]*$/;\nconst boundThemeSelects = new Set<HTMLSelectElement>();\nconst boundColorSchemeSelects = new Set<HTMLSelectElement>();\n\nfunction parseThemeSelection(name: string | null | undefined): { scheme: ColorScheme | null; theme: string } {\n  const raw = THEME_ALIASES[String(name || DEFAULT_THEME).trim()] || String(name || DEFAULT_THEME).trim();\n  if (isKnownTheme(raw)) return { theme: raw, scheme: null };\n  const match = raw.match(/^(.*)-(dark|light)$/);\n  if (match && isKnownTheme(match[1])) return { theme: match[1], scheme: match[2] as ColorScheme };\n  return { theme: raw, scheme: null };\n}\n\nfunction normalizeThemeValue(name: string | null | undefined): string {\n  return parseThemeSelection(name).theme;\n}\n\nfunction isKnownTheme(name: string): boolean {\n  return THEME_OPTIONS.some(option => option.value === name);\n}\n\nfunction sanitizeThemeOption(option: ThemeOption): ThemeOption | null {\n  const value = String(option?.value || '').trim();\n  if (!THEME_VALUE_PATTERN.test(value)) return null;\n  const label = String(option?.label || value).trim() || value;\n  return { value, label };\n}\n\nfunction renderThemeSelect(select: HTMLSelectElement): void {\n  const theme = currentTheme();\n  select.innerHTML = themeOptions().map(option => `\n    <option value=\"${escapeHtml(option.value)}\">${escapeHtml(option.label)}</option>\n  `).join('');\n  select.value = theme;\n}\n\nfunction refreshThemeSelects(): void {\n  for (const select of boundThemeSelects) renderThemeSelect(select);\n}\n\nfunction normalizeColorSchemeValue(name: string | null | undefined): ColorScheme {\n  return name === 'dark' || name === 'light' ? name : 'auto';\n}\n\nfunction renderColorSchemeSelect(select: HTMLSelectElement): void {\n  select.innerHTML = COLOR_SCHEME_OPTIONS.map(option => `\n    <option value=\"${option.value}\">${option.label}</option>\n  `).join('');\n  select.value = currentColorScheme();\n}\n\nfunction refreshColorSchemeSelects(): void {\n  for (const select of boundColorSchemeSelects) renderColorSchemeSelect(select);\n}\n\nexport function themeFromSearch(search = globalThis.location?.search || ''): string | null {\n  const requested = new URLSearchParams(search).get('theme');\n  if (!requested) return null;\n  const theme = normalizeThemeValue(requested);\n  return isKnownTheme(theme) ? theme : null;\n}\n\nexport function normalizeTheme(name: string | null | undefined): string {\n  const theme = normalizeThemeValue(name);\n  return isKnownTheme(theme) ? theme : DEFAULT_THEME;\n}\n\nexport function currentTheme(root: HTMLElement = document.documentElement): string {\n  return normalizeTheme(root.dataset.theme);\n}\n\nexport function currentColorScheme(root: HTMLElement = document.documentElement): ColorScheme {\n  return normalizeColorSchemeValue(root.dataset.colorScheme);\n}\n\nfunction dispatchThemeChange(root: HTMLElement): void {\n  if (typeof root.dispatchEvent === 'function' && typeof CustomEvent === 'function') {\n    root.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {\n      detail: { colorScheme: currentColorScheme(root), theme: currentTheme(root) },\n    }));\n  }\n}\n\nfunction applyTheme(theme: string, root: HTMLElement, persist: boolean): string {\n  for (const className of [...root.classList]) {\n    if (className.startsWith(THEME_CLASS_PREFIX)) root.classList.remove(className);\n  }\n  root.classList.add(`${THEME_CLASS_PREFIX}${theme}`);\n  root.dataset.theme = theme;\n  if (persist) storageSet(THEME_KEY, theme);\n  refreshThemeSelects();\n  dispatchThemeChange(root);\n  return theme;\n}\n\nfunction applyColorScheme(scheme: ColorScheme, root: HTMLElement, persist: boolean): ColorScheme {\n  for (const className of [...root.classList]) {\n    if (className.startsWith(COLOR_SCHEME_CLASS_PREFIX)) root.classList.remove(className);\n  }\n  if (scheme !== 'auto') root.classList.add(`${COLOR_SCHEME_CLASS_PREFIX}${scheme}`);\n  root.dataset.colorScheme = scheme;\n  if (persist) storageSet(COLOR_SCHEME_KEY, scheme);\n  refreshColorSchemeSelects();\n  dispatchThemeChange(root);\n  return scheme;\n}\n\nexport function setColorScheme(name: string, root: HTMLElement = document.documentElement): ColorScheme {\n  return applyColorScheme(normalizeColorSchemeValue(name), root, true);\n}\n\nexport function setTheme(name: string, root: HTMLElement = document.documentElement): string {\n  const selection = parseThemeSelection(name);\n  if (selection.scheme) applyColorScheme(selection.scheme, root, true);\n  const theme = normalizeTheme(selection.theme);\n  return applyTheme(theme, root, true);\n}\n\nexport function initTheme(\n  root: HTMLElement = document.documentElement,\n  defaultTheme = DEFAULT_THEME,\n  search = globalThis.location?.search || '',\n): string {\n  const linkedValue = new URLSearchParams(search).get('theme');\n  const linkedTheme = themeFromSearch(search);\n  const stored = storageGet(THEME_KEY);\n  const selection = parseThemeSelection((linkedTheme && linkedValue) || stored || defaultTheme || DEFAULT_THEME);\n  const storedScheme = storageGet(COLOR_SCHEME_KEY);\n  const scheme = selection.scheme || normalizeColorSchemeValue(storedScheme);\n  applyColorScheme(scheme, root, Boolean(selection.scheme || storedScheme));\n  const theme = normalizeTheme(selection.theme);\n  return applyTheme(theme, root, Boolean(linkedTheme || (stored && isKnownTheme(selection.theme))));\n}\n\nexport function themeOptions(): ThemeOption[] {\n  return THEME_OPTIONS.map(option => ({ ...option }));\n}\n\nexport function colorSchemeOptions(): ThemeOption[] {\n  return COLOR_SCHEME_OPTIONS.map(option => ({ ...option }));\n}\n\nexport function registerThemeOption(option: ThemeOption): ThemeOption | null {\n  const theme = sanitizeThemeOption(option);\n  if (!theme) return null;\n  const index = THEME_OPTIONS.findIndex(existing => existing.value === theme.value);\n  if (index === -1) THEME_OPTIONS.push(theme);\n  else THEME_OPTIONS[index] = theme;\n  refreshThemeSelects();\n  return { ...theme };\n}\n\nexport function registerThemeOptions(options: ThemeOption[] | null | undefined): ThemeOption[] {\n  if (!Array.isArray(options)) return [];\n  return options\n    .map(option => registerThemeOption(option))\n    .filter((option): option is ThemeOption => option !== null);\n}\n\nexport function bindThemeSelect(select: HTMLSelectElement | null): { setValue: (value: string) => void } | null {\n  if (!select) return null;\n  boundThemeSelects.add(select);\n  renderThemeSelect(select);\n  select.value = initTheme();\n  select.addEventListener('change', () => setTheme(select.value));\n  return {\n    setValue(value: string): void {\n      select.value = normalizeTheme(value);\n      setTheme(select.value);\n    },\n  };\n}\n\nexport function bindColorSchemeSelect(select: HTMLSelectElement | null): { setValue: (value: string) => void } | null {\n  if (!select) return null;\n  boundColorSchemeSelects.add(select);\n  renderColorSchemeSelect(select);\n  select.addEventListener('change', () => setColorScheme(select.value));\n  return {\n    setValue(value: string): void {\n      select.value = normalizeColorSchemeValue(value);\n      setColorScheme(select.value);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/widgets.d.ts

@@ -0,0 +1,7 @@
+export declare function escapeHtml(value: unknown): string;
+export declare function cloneJson<T>(value: T): T;
+export declare function storageGet(key: string): string | null;
+export declare function storageSet(key: string, value: string): void;
+export declare function storageRemove(key: string): void;
+export declare function normalizeTags(value: unknown): string[];
+//# sourceMappingURL=widgets.d.ts.map

package/dist/widgets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets.d.ts","sourceRoot":"","sources":["../src/widgets.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAMjD;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAExC;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAMrD;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAM3D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAM/C;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,CAItD"}

package/dist/widgets.js

@@ -0,0 +1,31 @@
+//#region src/widgets.ts
+function e(e) {
+	return String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function t(e) {
+	return JSON.parse(JSON.stringify(e));
+}
+function n(e) {
+	try {
+		return localStorage.getItem(e);
+	} catch {
+		return null;
+	}
+}
+function r(e, t) {
+	try {
+		localStorage.setItem(e, t);
+	} catch {}
+}
+function i(e) {
+	try {
+		localStorage.removeItem(e);
+	} catch {}
+}
+function a(e) {
+	return Array.isArray(e) ? e.map((e) => String(e)).filter(Boolean) : typeof e == "string" ? e.split(",").map((e) => e.trim()).filter(Boolean) : [];
+}
+//#endregion
+export { t as cloneJson, e as escapeHtml, a as normalizeTags, n as storageGet, i as storageRemove, r as storageSet };
+
+//# sourceMappingURL=widgets.js.map

package/dist/widgets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widgets.js","names":[],"sources":["../src/widgets.ts"],"sourcesContent":["export function escapeHtml(value: unknown): string {\n  return String(value)\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;');\n}\n\nexport function cloneJson<T>(value: T): T {\n  return JSON.parse(JSON.stringify(value)) as T;\n}\n\nexport function storageGet(key: string): string | null {\n  try {\n    return localStorage.getItem(key);\n  } catch (_err) {\n    return null;\n  }\n}\n\nexport function storageSet(key: string, value: string): void {\n  try {\n    localStorage.setItem(key, value);\n  } catch (_err) {\n    // Preferences are best-effort; UI should keep working without storage.\n  }\n}\n\nexport function storageRemove(key: string): void {\n  try {\n    localStorage.removeItem(key);\n  } catch (_err) {\n    // Best-effort storage cleanup only.\n  }\n}\n\nexport function normalizeTags(value: unknown): string[] {\n  if (Array.isArray(value)) return value.map(tag => String(tag)).filter(Boolean);\n  if (typeof value === 'string') return value.split(',').map(tag => tag.trim()).filter(Boolean);\n  return [];\n}\n"],"mappings":";AAAA,SAAgB,EAAW,GAAwB;CACjD,OAAO,OAAO,CAAK,CAAC,CACjB,QAAQ,MAAM,OAAO,CAAC,CACtB,QAAQ,MAAM,MAAM,CAAC,CACrB,QAAQ,MAAM,MAAM,CAAC,CACrB,QAAQ,MAAM,QAAQ;AAC3B;AAEA,SAAgB,EAAa,GAAa;CACxC,OAAO,KAAK,MAAM,KAAK,UAAU,CAAK,CAAC;AACzC;AAEA,SAAgB,EAAW,GAA4B;CACrD,IAAI;EACF,OAAO,aAAa,QAAQ,CAAG;CACjC,QAAe;EACb,OAAO;CACT;AACF;AAEA,SAAgB,EAAW,GAAa,GAAqB;CAC3D,IAAI;EACF,aAAa,QAAQ,GAAK,CAAK;CACjC,QAAe,CAEf;AACF;AAEA,SAAgB,EAAc,GAAmB;CAC/C,IAAI;EACF,aAAa,WAAW,CAAG;CAC7B,QAAe,CAEf;AACF;AAEA,SAAgB,EAAc,GAA0B;CAGtD,OAFI,MAAM,QAAQ,CAAK,IAAU,EAAM,KAAI,MAAO,OAAO,CAAG,CAAC,CAAC,CAAC,OAAO,OAAO,IACzE,OAAO,KAAU,WAAiB,EAAM,MAAM,GAAG,CAAC,CAAC,KAAI,MAAO,EAAI,KAAK,CAAC,CAAC,CAAC,OAAO,OAAO,IACrF,CAAC;AACV"}

package/docs/admin/custom-web-themes.md

@@ -0,0 +1,112 @@
+# Custom web themes
+
+Server admins can add deployment-specific themes to Bunnyland browser clients without
+patching `@bunnyland/ui-web`. A custom theme has two parts:
+
+1. a theme option in the client `config.json`, so the theme appears in selectors;
+2. CSS for the matching root class, so the theme changes colors.
+
+## Add theme options
+
+Static Bunnyland browser clients read `config.json` from the site root. Add a `themes`
+array with one object per custom theme:
+
+```json
+{
+  "serverUrl": "/api/",
+  "autoConnect": true,
+  "discordUrl": "https://discord.gg/example",
+  "theme": "server-night",
+  "themes": [
+    { "value": "server-night", "label": "Server Night" },
+    { "value": "festival-day", "label": "Festival Day" }
+  ]
+}
+```
+
+`value` becomes the class suffix in `bl-theme-<value>`, so use lowercase letters,
+numbers, and hyphens. `label` is the human-readable selector text.
+
+`theme` is the deployment default. It is applied when a visitor does not already have a
+saved theme preference. A link with `?theme=<value>` overrides both the deployment default
+and the visitor's saved preference, then saves that linked theme for future pages.
+
+When using the Bunnyland web Docker image, set `BUNNYLAND_WEB_THEMES` to the JSON array and
+`BUNNYLAND_WEB_THEME` to the default value:
+
+```sh
+BUNNYLAND_WEB_THEME='server-night'
+BUNNYLAND_WEB_THEMES='[{"value":"server-night","label":"Server Night"}]'
+```
+
+Restart the frontend container after changing the variable.
+
+## Serve the CSS
+
+Registering a theme only adds it to the list. The colors come from CSS variables on the
+matching root class:
+
+```css
+:root.bl-theme-server-night {
+  color-scheme: dark;
+
+  --bl-bg: #101218;
+  --bl-bg-strong: #171b25;
+  --bl-bg-deep: #080a0f;
+  --bl-bg-row: #151923;
+  --bl-bg-subtle: #1d2330;
+  --bl-surface: #242b38;
+  --bl-surface-hover: #30394a;
+  --bl-border: #30394a;
+  --bl-border-muted: #202633;
+  --bl-border-control: #465267;
+  --bl-border-strong: #5d6a80;
+
+  --bl-text: #edf2ff;
+  --bl-text-soft: #c5cde0;
+  --bl-text-muted: #7f8aa3;
+  --bl-text-dim: #9aa4ba;
+  --bl-text-inverse: #ffffff;
+  --bl-accent: #74c7ec;
+  --bl-accent-strong: #a6e3a1;
+  --bl-secondary: #cba6f7;
+  --bl-ok: #a6e3a1;
+  --bl-error: #f38ba8;
+  --bl-warn: #f9e2af;
+  --bl-info: #89dceb;
+
+  --bl-shadow-popover: 0 6px 18px rgba(0, 0, 0, 0.55);
+  --bl-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.6);
+  --bl-overlay: rgba(8, 10, 15, 0.74);
+  --bl-overlay-strong: rgba(8, 10, 15, 0.88);
+  --bl-overlay-solid: rgba(16, 18, 24, 0.96);
+  --bl-accent-wash: rgba(116, 199, 236, 0.14);
+  --bl-accent-wash-strong: rgba(116, 199, 236, 0.28);
+  --bl-secondary-wash: rgba(203, 166, 247, 0.22);
+  --bl-secondary-wash-strong: rgba(203, 166, 247, 0.34);
+}
+```
+
+Place that CSS after `assets/bunnyland-ui.css`, or in a separate stylesheet loaded after
+it. Existing pages can keep using `bindThemeSelect()` and the client menu; the shared
+theme helpers refresh selectors after custom themes are registered.
+
+This example is intentionally dark-only. A custom theme that supports automatic appearance
+must also define its light tokens inside `@media (prefers-color-scheme: light)` and under a
+`.bl-color-scheme-light` override; exclude `.bl-color-scheme-dark` from its media-query
+selector. Built-in palettes already provide both modes.
+
+## Validate
+
+After deployment:
+
+1. Open `/config.json` and confirm the `themes` array is valid JSON.
+2. Open a browser client and check that the custom label appears in the theme selector.
+3. Select the theme and confirm the page root has `data-theme="<value>"` and the
+   `bl-theme-<value>` class.
+4. Open a link such as `/?theme=server-night` and confirm the linked theme is selected.
+5. Check at least one admin page and one player page, because both use the shared theme
+   variables but have different layouts.
+
+If the option appears but colors do not change, the CSS did not load after
+`bunnyland-ui.css` or the CSS class does not match the configured theme value.

package/docs/developer/design-language.md

@@ -0,0 +1,116 @@
+# Bunnyland web design language
+
+This document is the canonical design contract for Bunnyland browser clients. The shared
+tokens, native helpers, and Preact components live in `@bunnyland/ui-web`; application
+repositories should consume them rather than copy their behavior.
+
+## Principles
+
+1. **Dense, readable tools.** Bunnyland clients are information-rich editors and play
+   surfaces. Prefer compact controls, visible labels, and stable layouts over decorative
+   whitespace.
+2. **State changes are local.** Put interactive state in the smallest component that owns
+   it. A changed field must not recreate unrelated lists, toolbars, canvases, or focused
+   controls.
+3. **The server remains authoritative.** Components display typed projections and schema
+   data. They do not infer hidden world state or duplicate server rules.
+4. **Native browser behavior first.** Use semantic buttons, labels, inputs, dialogs, and
+   links. Preact coordinates those elements; it does not replace their accessibility.
+5. **Imperative renderers are islands.** Three.js and LiteGraph retain ownership of their
+   canvases. Preact owns their surrounding controls and uses refs/effects for lifecycle.
+
+## Foundations
+
+Import the shared stylesheet once per page:
+
+```ts
+import '@bunnyland/ui-web/assets/bunnyland-ui.css';
+```
+
+Colors, spacing, typography, radii, overlays, and semantic states derive from `--bl-*`
+custom properties. Application CSS may compose these tokens but must not hard-code a
+parallel palette.
+
+The six built-in palettes each provide dark and light tokens. They follow
+`prefers-color-scheme` unless the user forces an appearance in the client menu. Deployment
+themes register a validated option and provide a matching `:root.bl-theme-<value>` token
+block. Palette choice is stored under `bunnyland.theme`; an Auto, Dark, or Light override is
+stored under `bunnyland.color-scheme`. Both are reflected on the root element and broadcast
+with the `bunnyland:themechange` event.
+
+Full-screen applications use a flex column rooted at `body > #app`. The body uses the
+dynamic viewport height, with a `100vh` fallback, while the application work surface and
+nested panes use `min-width: 0` and `min-height: 0`. The document stays fixed; pane bodies
+or an explicit stacked-pane work surface own scrolling. Document-style pages such as a
+welcome screen may opt back into normal page scrolling.
+
+At phone widths, toolbars wrap, fixed-width controls stay within the viewport, and
+multi-pane work surfaces switch to a single-column grid or vertical flex stack. Keep every
+workflow pane reachable unless product requirements explicitly make it desktop-only.
+Prefer CSS Grid, Flexbox, `minmax()`, and `clamp()` over viewport-aware component state.
+
+## Shared Preact elements
+
+Import Preact components from the dedicated entry point:
+
+```tsx
+import {
+  Button,
+  EmptyState,
+  Field,
+  Pane,
+  Pill,
+  SearchSelect,
+  StatusText,
+  TagEditor,
+  ThemeSelect,
+  Toolbar,
+  ToolbarBrand,
+  ToolbarRow,
+} from '@bunnyland/ui-web/preact';
+```
+
+Applications import directly from `preact` and `preact/hooks`; do not add React or
+`preact/compat`. `preact` is a peer dependency, which keeps one runtime in the consuming
+Vite application. Standalone consumers install a published package version or the CI-built
+`artifacts/bunnyland-ui-web-<version>.tgz` rather than referencing a sibling checkout.
+
+- `Toolbar`, `ToolbarRow`, and `ToolbarBrand` establish consistent application chrome.
+- `Pane` owns a titled scroll/layout region and an optional tools slot.
+- `Field` connects a visible label, control, and optional description.
+- `Button` provides semantic `primary`, `secondary`, `danger`, and `quiet` variants.
+- `StatusText`, `Pill`, and `EmptyState` express small, stable display states.
+- `SearchSelect` and `TagEditor` are controlled components; their parent owns committed
+  values while each component keeps only its transient input draft.
+- `ThemeSelect` and `useTheme` share the same imperative theme contract used by legacy
+  pages during migration.
+
+## Component and state boundaries
+
+- Key entity, component, edge, action, event, and queue rows with durable domain IDs.
+- Never key mutable lists by their display position when an ID exists.
+- Preserve object identity for unchanged records. Update nested data with structural
+  sharing so child components can avoid work.
+- Keep live transport state, filters, selected IDs, field drafts, and large projections in
+  separate state owners.
+- Do not place an entire world snapshot in a context consumed by every component.
+- Effects that open timers, sockets, observers, or renderer instances must return cleanup.
+- Use refs for mutable renderer instances and DOM focus/selection, not as a second state
+  store.
+
+## Interaction states
+
+Every asynchronous operation exposes an idle, working, success, and failure state without
+moving the primary controls. Disabled controls remain visible and explain their prerequisite
+through adjacent text or a title. Destructive actions use the danger treatment and require
+confirmation when recovery is not immediate.
+
+Filtering must preserve input focus and selection. Live refreshes must preserve unchanged
+row nodes, expanded details, scroll position, and active form drafts.
+
+## Verification
+
+For each migrated surface, browser tests should assert behavior through roles, labels, and
+stable test IDs. Performance regressions should additionally verify that representative
+unchanged rows remain the same DOM nodes after a live update and that focused inputs are not
+replaced while typing.

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@bunnyland/ui-web",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Shared web UI helpers, themes, and widgets for Bunnyland browser clients.",
+  "license": "AGPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thalismind/bunnyland-ui-web.git"
+  },
+  "homepage": "https://github.com/thalismind/bunnyland-ui-web#readme",
+  "bugs": {
+    "url": "https://github.com/thalismind/bunnyland-ui-web/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": [
+    "./assets/*.css",
+    "./assets/*.js"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "assets",
+    "docs",
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./api": {
+      "types": "./dist/api.d.ts",
+      "default": "./dist/api.js"
+    },
+    "./play": {
+      "types": "./dist/play.d.ts",
+      "default": "./dist/play.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "default": "./dist/theme.js"
+    },
+    "./widgets": {
+      "types": "./dist/widgets.d.ts",
+      "default": "./dist/widgets.js"
+    },
+    "./player-widgets": {
+      "types": "./dist/player-widgets.d.ts",
+      "default": "./dist/player-widgets.js"
+    },
+    "./admin-widgets": {
+      "types": "./dist/admin-widgets.d.ts",
+      "default": "./dist/admin-widgets.js"
+    },
+    "./preact": {
+      "types": "./dist/preact.d.ts",
+      "default": "./dist/preact.js"
+    },
+    "./assets/bunnyland-ui.css": "./assets/bunnyland-ui.css",
+    "./assets/bunnyland-ui.js": "./assets/bunnyland-ui.js",
+    "./assets/bunnyland-api.js": "./assets/bunnyland-api.js",
+    "./assets/bunnyland-play.js": "./assets/bunnyland-play.js"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && vite build",
+    "lint": "eslint src test storybook/preact-story.tsx scripts vite.config.ts vite.storybook.config.ts vitest.config.ts",
+    "test": "node --test && vitest run",
+    "test:coverage": "node --test --experimental-test-coverage",
+    "test:components": "vitest run",
+    "check": "npm run lint && npm run build && npm run test:coverage && npm run test:components",
+    "check:release-tag": "node scripts/check-release-tag.mjs",
+    "prepack": "npm run build",
+    "pack:artifact": "node scripts/package-artifact.mjs",
+    "storybook:bundle": "vite build --config vite.storybook.config.ts",
+    "storybook": "npm run build && npm run storybook:bundle && node scripts/build-storybook.mjs"
+  },
+  "peerDependencies": {
+    "preact": "^10.29.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@preact/preset-vite": "^2.10.0",
+    "@testing-library/preact": "^3.2.0",
+    "eslint": "^10.5.0",
+    "globals": "^17.6.0",
+    "jsdom": "^29.1.1",
+    "playwright": "^1.61.1",
+    "preact": "^10.29.0",
+    "typescript": "^5.6.0",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^8.1.0",
+    "vitest": "^4.0.0"
+  }
+}