@bunnyland/ui-web 0.2.0 → 0.2.2

package/README.md

@@ -99,7 +99,7 @@ source directory or a checked-in tarball.
 The package owns the shared `--bl-*` CSS variables and theme selector helpers. Built-in
 palette names are:
 
-- `purple-blue`
+- `midnight`
 - `candy`
 - `earth`
 - `ocean`
@@ -110,8 +110,9 @@ Each palette follows `prefers-color-scheme` by default. The shared client menu c
 Dark or Light appearance, or return to Auto (System). Use `bindThemeSelect(select)` for
 palette selectors, `bindColorSchemeSelect(select)` for appearance selectors, and
 `setTheme(theme)` or `setColorScheme(scheme)` for direct changes. Old paired values such as
-`anime-light` continue to load as migration aliases (`candy` with Light forced). New colors
-should be added as CSS variables before clients depend on them.
+`anime-light` continue to load as migration aliases (`candy` with Light forced), as do the
+former `purple-blue` values (`midnight`). New colors should be added as CSS variables before
+clients depend on them.
 
 Deployments can add their own theme choices without changing this package:
 

package/assets/bunnyland-api.js

@@ -196,15 +196,19 @@
   }
 
   async function promptPlayerAuth(base) {
-    const username = window.prompt('Bunnyland username');
-    if (!username) return null;
-    const password = window.prompt('Bunnyland password');
-    if (password == null) return null;
+    const credentials = await window.BunnylandUI.credentialsDialog({
+      message: 'Enter your player credentials to continue.',
+      title: 'Sign in to Bunnyland',
+    });
+    if (!credentials) return null;
     try {
-      await login(base, username, password);
+      await login(base, credentials.username, credentials.password);
       return true;
     } catch (error) {
-      window.alert(error.message || 'Login failed');
+      await window.BunnylandUI.alertDialog(error.message || 'Login failed', {
+        title: 'Sign in failed',
+        tone: 'danger',
+      });
       return false;
     }
   }

package/assets/bunnyland-ui.css

@@ -1,15 +1,19 @@
 :root,
 :root.bl-theme-dark,
 :root.bl-theme-purple-blue-dark,
-:root.bl-theme-purple-blue {
+:root.bl-theme-midnight-dark,
+:root.bl-theme-purple-blue,
+:root.bl-theme-midnight {
   color-scheme: dark;
 
   --bl-font-mono: 'Courier New', monospace;
   --bl-radius-sm: 3px;
   --bl-radius-md: 4px;
+  --bl-radius-lg: 6px;
   --bl-text-xs: 10px;
   --bl-text-sm: 11px;
   --bl-text-md: 12px;
+  --bl-text-xl: 18px;
 
   --bl-bg: #1e1e2e;
   --bl-bg-strong: #181825;
@@ -34,6 +38,8 @@
   --bl-ok: #a6e3a1;
   --bl-error: #f38ba8;
   --bl-warn: #fab387;
+  --bl-danger: var(--bl-error);
+  --bl-warning: var(--bl-warn);
   --bl-info: #74c7ec;
 
   --bl-shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.5);
@@ -50,7 +56,9 @@
 :root,
 :root.bl-theme-light,
 :root.bl-theme-purple-blue-light,
-:root.bl-theme-purple-blue {
+:root.bl-theme-midnight-light,
+:root.bl-theme-purple-blue,
+:root.bl-theme-midnight {
 
   --bl-light-bg: #f4f1ea;
   --bl-light-bg-strong: #ebe6dc;
@@ -487,6 +495,7 @@
 
 @media (prefers-color-scheme: light) {
   :root:not([class*="bl-theme-"]):not(.bl-color-scheme-dark),
+  :root.bl-theme-midnight:not(.bl-color-scheme-dark),
   :root.bl-theme-purple-blue:not(.bl-color-scheme-dark),
   :root.bl-theme-candy:not(.bl-color-scheme-dark),
   :root.bl-theme-earth:not(.bl-color-scheme-dark),
@@ -530,6 +539,7 @@
   }
 }
 
+:root.bl-theme-midnight.bl-color-scheme-light,
 :root.bl-theme-purple-blue.bl-color-scheme-light,
 :root.bl-theme-candy.bl-color-scheme-light,
 :root.bl-theme-earth.bl-color-scheme-light,
@@ -537,6 +547,7 @@
 :root.bl-theme-sunset.bl-color-scheme-light,
 :root.bl-theme-high-contrast.bl-color-scheme-light,
 :root.bl-theme-light,
+:root.bl-theme-midnight-light,
 :root.bl-theme-purple-blue-light,
 :root.bl-theme-anime-light,
 :root.bl-theme-candy-light,
@@ -655,10 +666,14 @@ input[type=file] {
 }
 
 input:focus, select:focus, textarea:focus {
-  outline: none;
   border-color: var(--bl-accent);
 }
 
+:where(a, button, input, select, textarea, [tabindex]):focus-visible {
+  outline: 2px solid var(--bl-accent);
+  outline-offset: 2px;
+}
+
 button {
   padding: 3px 10px;
   background: var(--bl-surface);
@@ -736,6 +751,74 @@ button:disabled { opacity: 0.4; cursor: default; }
   gap: 8px;
 }
 
+.bl-dialog {
+  width: min(460px, calc(100vw - 24px));
+  max-height: calc(100dvh - 24px);
+  overflow: hidden;
+  padding: 0;
+  border: 1px solid var(--bl-border-control);
+  border-radius: var(--bl-radius-md);
+  color: var(--bl-text);
+  background: var(--bl-bg-strong);
+  box-shadow: var(--bl-shadow-popover);
+}
+
+.bl-dialog::backdrop { background: var(--bl-overlay); }
+
+.bl-dialog-form {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100dvh - 24px);
+}
+
+.bl-dialog-header,
+.bl-dialog-body,
+.bl-dialog-actions {
+  padding: 14px;
+}
+
+.bl-dialog-header {
+  border-bottom: 1px solid var(--bl-border);
+  background: var(--bl-bg);
+}
+
+.bl-dialog-header h2 {
+  margin: 0;
+  color: var(--bl-text);
+  font-size: var(--bl-text-xl);
+}
+
+.bl-dialog-body {
+  display: grid;
+  gap: 12px;
+  overflow-y: auto;
+}
+
+.bl-dialog-message {
+  margin: 0;
+  color: var(--bl-text-soft);
+  font-size: var(--bl-text-md);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.bl-dialog-field {
+  display: grid;
+  gap: 5px;
+  font-size: var(--bl-text-sm);
+}
+
+.bl-dialog-field input { width: 100%; }
+
+.bl-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid var(--bl-border);
+  background: var(--bl-bg);
+}
+
 #toolbar {
   display: flex;
   flex-direction: column;
@@ -903,6 +986,19 @@ button:disabled { opacity: 0.4; cursor: default; }
   padding: 6px;
 }
 
+.client-menu-section-title {
+  padding: 10px 10px 3px;
+  color: var(--bl-accent-strong);
+  font-size: var(--bl-text-xs);
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.client-menu-section-title:first-child {
+  padding-top: 4px;
+}
+
 .client-menu-item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -945,6 +1041,18 @@ button:disabled { opacity: 0.4; cursor: default; }
   margin-left: 6px;
 }
 
+.client-menu-recommended {
+  display: inline-block;
+  margin-left: 7px;
+  padding: 1px 5px;
+  border: 1px solid var(--bl-ok);
+  border-radius: var(--bl-radius-sm);
+  color: var(--bl-ok);
+  font-size: var(--bl-text-xs);
+  font-weight: normal;
+  vertical-align: middle;
+}
+
 .client-menu-item-desc {
   color: var(--bl-text-soft);
   font-size: var(--bl-text-sm);
@@ -1582,6 +1690,17 @@ textarea {
     min-height: 30px;
   }
 
+  :is(.bl-page-welcome, .bl-page-toon, .bl-page-character, .bl-page-web-tui, .bl-page-web-repl) {
+    --bl-text-xs: 12px;
+    --bl-text-sm: 14px;
+    --bl-text-md: 16px;
+  }
+
+  :is(.bl-page-welcome, .bl-page-toon, .bl-page-character, .bl-page-web-tui, .bl-page-web-repl)
+  :is(button, input[type=file], input[type=text], input[type=number], select, .button-link) {
+    min-height: 44px;
+  }
+
   .client-menu-backdrop {
     padding: 12px;
   }

package/assets/bunnyland-ui.js

@@ -5,16 +5,19 @@
   const THEME_CLASS_PREFIX = 'bl-theme-';
   const COLOR_SCHEME_KEY = 'bunnyland.color-scheme';
   const COLOR_SCHEME_CLASS_PREFIX = 'bl-color-scheme-';
-  const DEFAULT_THEME = 'purple-blue';
+  const DEFAULT_THEME = 'midnight';
   const THEME_ALIASES = {
     anime: 'candy',
     'anime-dark': 'candy-dark',
     'anime-light': 'candy-light',
-    dark: 'purple-blue-dark',
-    light: 'purple-blue-light',
+    dark: 'midnight-dark',
+    light: 'midnight-light',
+    'purple-blue': 'midnight',
+    'purple-blue-dark': 'midnight-dark',
+    'purple-blue-light': 'midnight-light',
   };
   const DEFAULT_THEME_OPTIONS = [
-    { value: 'purple-blue', label: 'Purple / Blue' },
+    { value: 'midnight', label: 'Midnight Blue / Lavender' },
     { value: 'candy', label: 'Candy Pink / Cyan' },
     { value: 'earth', label: 'Earth Green / Gold' },
     { value: 'ocean', label: 'Ocean Teal / Coral' },
@@ -31,6 +34,7 @@
   const boundThemeSelects = new Set();
   const boundColorSchemeSelects = new Set();
   const CLIENT_MENU_SEEN_KEY = 'bunnyland.clientMenu.seen';
+  let actionDialogQueue = Promise.resolve();
   let clientMenuBaseUrl = '';
   // Admin tools order: World Generator, World Graph, editor tools alphabetically, then miscellaneous tools.
   const CLIENT_MENU_ITEMS = [
@@ -39,6 +43,7 @@
       title: 'Welcome',
       label: 'Start here',
       description: 'Project overview, docs, admin notes, and client chooser.',
+      group: 'Bunnyland',
       supportsServer: true,
     },
     {
@@ -46,21 +51,25 @@
       title: 'Bunnyland.dev',
       label: 'Website',
       description: 'Project homepage, feature overview, guides, and public docs.',
+      group: 'Bunnyland',
       supportsServer: false,
     },
-    {
-      href: 'toon-client.html',
-      title: 'Toon Client',
-      label: 'Player room view',
-      description: 'Claim a character and play from the room-focused visual client.',
-      supportsFocus: true,
-      supportsServer: true,
-    },
     {
       href: 'web-tui.html',
       title: 'Web TUI',
       label: 'Player action menu',
       description: 'Claim a character and play from the terminal TUI-style browser client.',
+      group: 'Player clients',
+      recommended: true,
+      supportsFocus: true,
+      supportsServer: true,
+    },
+    {
+      href: 'toon-client.html',
+      title: 'Toon Client',
+      label: 'Player room view',
+      description: 'Claim a character and play from the room-focused visual client.',
+      group: 'Player clients',
       supportsFocus: true,
       supportsServer: true,
     },
@@ -69,6 +78,7 @@
       title: 'Web REPL',
       label: 'Text-based play',
       description: 'Claim a character and play with typed commands in the browser.',
+      group: 'Player clients',
       supportsFocus: true,
       supportsServer: true,
     },
@@ -77,6 +87,7 @@
       title: 'Character Profile',
       label: 'Profile and chat',
       description: 'Open a character profile, inspect live state, and chat in character.',
+      group: 'Player clients',
       supportsFocus: true,
       supportsServer: true,
     },
@@ -85,6 +96,7 @@
       title: 'World Generator',
       label: 'Admin generator',
       description: 'Generate or replace a live world using enabled server generators.',
+      group: 'Builder & admin',
       supportsServer: true,
       admin: true,
     },
@@ -93,6 +105,7 @@
       title: 'World Graph',
       label: 'Graph editor',
       description: 'Browse and extend the ECS world graph from a snapshot or live server.',
+      group: 'Builder & admin',
       supportsServer: true,
       admin: true,
     },
@@ -101,6 +114,7 @@
       title: 'Behavior Editor',
       label: 'Behavior trees',
       description: 'Author behavior-tree JSON for behavioral controllers and register it live.',
+      group: 'Builder & admin',
       supportsServer: true,
       admin: true,
     },
@@ -109,6 +123,7 @@
       title: 'Memory Editor',
       label: 'Memory editor',
       description: 'Inspect and edit character memory collections on a live server.',
+      group: 'Builder & admin',
       supportsServer: true,
       admin: true,
     },
@@ -117,6 +132,7 @@
       title: 'Script Editor',
       label: 'Automation scripts',
       description: 'Create and validate script JSON blocks against a snapshot.',
+      group: 'Builder & admin',
       supportsServer: false,
       admin: true,
     },
@@ -125,6 +141,7 @@
       title: 'World Editor',
       label: 'Admin editor',
       description: 'Edit entities, components, relationships, fragments, and live snapshots.',
+      group: 'Builder & admin',
       supportsServer: true,
       admin: true,
     },
@@ -133,6 +150,7 @@
       title: 'Event Stream',
       label: 'Event viewer',
       description: 'Watch the live world event feed with expandable records and entity references.',
+      group: 'Builder & admin',
       supportsServer: true,
       admin: true,
     },
@@ -141,6 +159,7 @@
       title: 'Trace Analyzer',
       label: 'Trace inspection',
       description: 'Inspect live Tempo traces or load JSON and JSONL trace artifacts.',
+      group: 'Builder & admin',
       supportsServer: true,
       admin: true,
     },
@@ -473,6 +492,138 @@
     return url.origin === location.origin ? '' : ' target="_blank" rel="noopener"';
   }
 
+  function ensureActionDialog() {
+    let dialog = document.getElementById('bl-action-dialog');
+    if (dialog) return dialog;
+    dialog = document.createElement('dialog');
+    dialog.id = 'bl-action-dialog';
+    dialog.className = 'bl-dialog';
+    dialog.setAttribute('aria-labelledby', 'bl-action-dialog-title');
+    document.body.appendChild(dialog);
+    return dialog;
+  }
+
+  function actionDialog({
+    cancelLabel = 'Cancel',
+    cancellable = true,
+    confirmLabel = 'OK',
+    fields = [],
+    message = '',
+    title = 'Bunnyland',
+    tone = 'default',
+  } = {}) {
+    const open = () => new Promise((resolve) => {
+      const dialog = ensureActionDialog();
+      const previousFocus = document.activeElement;
+      dialog.innerHTML = `
+        <form class="bl-dialog-form" method="dialog">
+          <div class="bl-dialog-header"><h2 id="bl-action-dialog-title">${escapeHtml(title)}</h2></div>
+          <div class="bl-dialog-body">
+            ${message ? `<p class="bl-dialog-message">${escapeHtml(message)}</p>` : ''}
+            ${fields.map((field, index) => `
+              <label class="bl-dialog-field">
+                <span>${escapeHtml(field.label || field.name || `Value ${index + 1}`)}</span>
+                <input name="${escapeHtml(field.name || `field-${index}`)}"
+                  type="${escapeHtml(field.type || 'text')}"
+                  value="${escapeHtml(field.value || '')}"
+                  ${field.autocomplete ? `autocomplete="${escapeHtml(field.autocomplete)}"` : ''}
+                  ${field.placeholder ? `placeholder="${escapeHtml(field.placeholder)}"` : ''}
+                  ${field.required ? 'required' : ''}>
+              </label>
+            `).join('')}
+          </div>
+          <div class="bl-dialog-actions">
+            ${cancellable ? `<button class="bl-dialog-cancel" type="button">${escapeHtml(cancelLabel)}</button>` : ''}
+            <button class="bl-dialog-confirm ${tone === 'danger' ? 'bl-button-danger' : 'bl-button-primary'}" type="submit">${escapeHtml(confirmLabel)}</button>
+          </div>
+        </form>
+      `;
+      const form = dialog.querySelector('.bl-dialog-form');
+      const cancel = dialog.querySelector('.bl-dialog-cancel');
+      let settled = false;
+
+      const finish = (value) => {
+        if (settled) return;
+        settled = true;
+        dialog.removeEventListener('cancel', onCancel);
+        dialog.removeEventListener('click', onBackdropClick);
+        if (dialog.open && typeof dialog.close === 'function') dialog.close();
+        else dialog.removeAttribute('open');
+        previousFocus?.focus?.();
+        resolve(value);
+      };
+      const onCancel = (event) => {
+        event.preventDefault();
+        if (cancellable) finish(null);
+      };
+      const onBackdropClick = (event) => {
+        if (cancellable && event.target === dialog) finish(null);
+      };
+
+      form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        const values = {};
+        for (const field of fields) {
+          const input = form.elements.namedItem(field.name);
+          values[field.name] = input?.value || '';
+        }
+        finish(values);
+      });
+      cancel?.addEventListener('click', () => finish(null));
+      dialog.addEventListener('cancel', onCancel);
+      dialog.addEventListener('click', onBackdropClick);
+      if (typeof dialog.showModal === 'function') dialog.showModal();
+      else dialog.setAttribute('open', '');
+      (dialog.querySelector('input') || dialog.querySelector('.bl-dialog-confirm'))?.focus();
+    });
+    const queued = actionDialogQueue.then(open, open);
+    actionDialogQueue = queued.then(() => undefined, () => undefined);
+    return queued;
+  }
+
+  async function promptDialog(message, options = {}) {
+    const fieldName = 'value';
+    const values = await actionDialog({
+      ...options,
+      fields: [{
+        autocomplete: options.autocomplete,
+        label: options.label || 'Value',
+        name: fieldName,
+        placeholder: options.placeholder,
+        required: options.required,
+        type: options.type || 'text',
+        value: options.value || '',
+      }],
+      message,
+    });
+    return values ? values[fieldName] : null;
+  }
+
+  async function confirmDialog(message, options = {}) {
+    return Boolean(await actionDialog({
+      ...options,
+      confirmLabel: options.confirmLabel || 'Confirm',
+      fields: [],
+      message,
+    }));
+  }
+
+  async function credentialsDialog(options = {}) {
+    return actionDialog({
+      ...options,
+      confirmLabel: options.confirmLabel || 'Sign in',
+      fields: [
+        { autocomplete: 'username', label: options.usernameLabel || 'Username', name: 'username', required: true },
+        { autocomplete: 'current-password', label: options.passwordLabel || 'Password', name: 'password', required: true, type: 'password' },
+      ],
+      title: options.title || 'Sign in to Bunnyland',
+    });
+  }
+
+  async function alertDialog(message, options = {}) {
+    await actionDialog({ ...options, cancellable: false, fields: [], message });
+  }
+
   function ensureClientMenu() {
     let dialog = document.getElementById('client-menu-dialog');
     if (dialog) return dialog;
@@ -501,12 +652,14 @@
           <button class="client-menu-close" type="button" aria-label="Close client menu">x</button>
         </div>
         <div class="client-menu-list">
-          ${CLIENT_MENU_ITEMS.map((item) => {
+          ${CLIENT_MENU_ITEMS.map((item, index) => {
             const active = item.href === current || (current === '' && item.href === 'index.html');
+            const previousGroup = CLIENT_MENU_ITEMS[index - 1]?.group;
             return `
+              ${item.group !== previousGroup ? `<div class="client-menu-section-title">${escapeHtml(item.group)}</div>` : ''}
               <a class="client-menu-item ${active ? 'active' : ''}" href="${escapeHtml(clientHref(item))}"${clientTargetAttrs(item)}>
                 <span class="client-menu-item-main">
-                  <span class="client-menu-item-title">${escapeHtml(item.title)}${item.admin ? '<span class="client-menu-admin-badge" title="Requires authentication" aria-label="Requires authentication">●</span>' : ''}</span>
+                  <span class="client-menu-item-title">${escapeHtml(item.title)}${item.recommended ? '<span class="client-menu-recommended">Recommended</span>' : ''}${item.admin ? '<span class="client-menu-admin-badge" title="Requires authentication" aria-label="Requires authentication">●</span>' : ''}</span>
                   <span class="client-menu-item-desc">${escapeHtml(item.description)}</span>
                 </span>
                 <span class="client-menu-item-label">${escapeHtml(active ? 'Current' : item.label)}</span>
@@ -765,6 +918,7 @@
   }
 
   window.BunnylandUI = {
+    alertDialog,
     bindColorSchemeSelect,
     bindTagEditor,
     bindSearchDropdown,
@@ -774,12 +928,15 @@
     currentColorScheme,
     escapeHtml,
     currentTheme,
+    confirmDialog,
+    credentialsDialog,
     initClientMenu,
     initHelp,
     initTheme,
     loadConfig,
     normalizeTags,
     normalizeTheme,
+    promptDialog,
     registerThemeOption,
     registerThemeOptions,
     renderTagEditorTags,

package/dist/theme.d.ts

@@ -2,7 +2,7 @@ export declare const THEME_KEY = "bunnyland.theme";
 export declare const THEME_CLASS_PREFIX = "bl-theme-";
 export declare const COLOR_SCHEME_KEY = "bunnyland.color-scheme";
 export declare const COLOR_SCHEME_CLASS_PREFIX = "bl-color-scheme-";
-export declare const DEFAULT_THEME = "purple-blue";
+export declare const DEFAULT_THEME = "midnight";
 export declare const THEME_CHANGE_EVENT = "bunnyland:themechange";
 export interface ThemeOption {
     value: string;

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,oBAAoB,CAAC;AAC3C,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAC9C,eAAO,MAAM,gBAAgB,2BAA2B,CAAC;AACzD,eAAO,MAAM,yBAAyB,qBAAqB,CAAC;AAC5D,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAC3C,eAAO,MAAM,kBAAkB,0BAA0B,CAAC;AAE1D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAO9C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAAW,EAAyD,CAAC;AAsEjG,wBAAgB,eAAe,CAAC,MAAM,SAAoC,GAAG,MAAM,GAAG,IAAI,CAKzF;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAGtE;AAED,wBAAgB,YAAY,CAAC,IAAI,GAAE,WAAsC,GAAG,MAAM,CAEjF;AAED,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,WAAsC,GAAG,WAAW,CAE5F;AAkCD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE,WAAsC,GAAG,WAAW,CAEtG;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE,WAAsC,GAAG,MAAM,CAK3F;AAED,wBAAgB,SAAS,CACvB,IAAI,GAAE,WAAsC,EAC5C,YAAY,SAAgB,EAC5B,MAAM,SAAoC,GACzC,MAAM,CAUR;AAED,wBAAgB,YAAY,IAAI,WAAW,EAAE,CAE5C;AAED,wBAAgB,kBAAkB,IAAI,WAAW,EAAE,CAElD;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAQ3E;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,EAAE,CAK7F;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,GAAG;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,GAAG,IAAI,CAY9G;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,GAAG;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,GAAG,IAAI,CAWpH"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,oBAAoB,CAAC;AAC3C,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAC9C,eAAO,MAAM,gBAAgB,2BAA2B,CAAC;AACzD,eAAO,MAAM,yBAAyB,qBAAqB,CAAC;AAC5D,eAAO,MAAM,aAAa,aAAa,CAAC;AACxC,eAAO,MAAM,kBAAkB,0BAA0B,CAAC;AAE1D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAO9C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAAW,EAAyD,CAAC;AAyEjG,wBAAgB,eAAe,CAAC,MAAM,SAAoC,GAAG,MAAM,GAAG,IAAI,CAKzF;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAGtE;AAED,wBAAgB,YAAY,CAAC,IAAI,GAAE,WAAsC,GAAG,MAAM,CAEjF;AAED,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,WAAsC,GAAG,WAAW,CAE5F;AAkCD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE,WAAsC,GAAG,WAAW,CAEtG;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,GAAE,WAAsC,GAAG,MAAM,CAK3F;AAED,wBAAgB,SAAS,CACvB,IAAI,GAAE,WAAsC,EAC5C,YAAY,SAAgB,EAC5B,MAAM,SAAoC,GACzC,MAAM,CAUR;AAED,wBAAgB,YAAY,IAAI,WAAW,EAAE,CAE5C;AAED,wBAAgB,kBAAkB,IAAI,WAAW,EAAE,CAElD;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAQ3E;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,EAAE,CAK7F;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,GAAG;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,GAAG,IAAI,CAY9G;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,GAAG;IAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,GAAG,IAAI,CAWpH"}

package/dist/theme.js

@@ -1,9 +1,9 @@
 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 = [
+var r = "bunnyland.theme", i = "bl-theme-", a = "bunnyland.color-scheme", o = "bl-color-scheme-", s = "midnight", c = "bunnyland:themechange", l = [
 	{
-		value: "purple-blue",
-		label: "Purple / Blue"
+		value: "midnight",
+		label: "Midnight Blue / Lavender"
 	},
 	{
 		value: "candy",
@@ -29,8 +29,11 @@ var r = "bunnyland.theme", i = "bl-theme-", a = "bunnyland.color-scheme", o = "b
 	anime: "candy",
 	"anime-dark": "candy-dark",
 	"anime-light": "candy-light",
-	dark: "purple-blue-dark",
-	light: "purple-blue-light"
+	dark: "midnight-dark",
+	light: "midnight-light",
+	"purple-blue": "midnight",
+	"purple-blue-dark": "midnight-dark",
+	"purple-blue-light": "midnight-light"
 }, f = [
 	{
 		value: "auto",
@@ -46,7 +49,7 @@ var r = "bunnyland.theme", i = "bl-theme-", a = "bunnyland.color-scheme", o = "b
 	}
 ], 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();
+	let t = d[String(e || "midnight").trim()] || String(e || "midnight").trim();
 	if (v(t)) return {
 		theme: t,
 		scheme: null
@@ -131,7 +134,7 @@ function N(e, t = document.documentElement) {
 	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);
+	let o = new URLSearchParams(i).get("theme"), c = T(i), l = t(r), u = g(c && o || l || n || "midnight"), 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() {

package/dist/theme.js.map

@@ -1 +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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"}
+{"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 = 'midnight';\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: 'midnight', label: 'Midnight Blue / Lavender' },\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: 'midnight-dark',\n  light: 'midnight-light',\n  'purple-blue': 'midnight',\n  'purple-blue-dark': 'midnight-dark',\n  'purple-blue-light': 'midnight-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyland/ui-web",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "Shared web UI helpers, themes, and widgets for Bunnyland browser clients.",
   "license": "AGPL-3.0-or-later",

package/src/theme.ts

@@ -4,7 +4,7 @@ export const THEME_KEY = 'bunnyland.theme';
 export const THEME_CLASS_PREFIX = 'bl-theme-';
 export const COLOR_SCHEME_KEY = 'bunnyland.color-scheme';
 export const COLOR_SCHEME_CLASS_PREFIX = 'bl-color-scheme-';
-export const DEFAULT_THEME = 'purple-blue';
+export const DEFAULT_THEME = 'midnight';
 export const THEME_CHANGE_EVENT = 'bunnyland:themechange';
 
 export interface ThemeOption {
@@ -15,7 +15,7 @@ export interface ThemeOption {
 export type ColorScheme = 'auto' | 'dark' | 'light';
 
 export const DEFAULT_THEME_OPTIONS: ThemeOption[] = [
-  { value: 'purple-blue', label: 'Purple / Blue' },
+  { value: 'midnight', label: 'Midnight Blue / Lavender' },
   { value: 'candy', label: 'Candy Pink / Cyan' },
   { value: 'earth', label: 'Earth Green / Gold' },
   { value: 'ocean', label: 'Ocean Teal / Coral' },
@@ -29,8 +29,11 @@ const THEME_ALIASES: Record<string, string> = {
   anime: 'candy',
   'anime-dark': 'candy-dark',
   'anime-light': 'candy-light',
-  dark: 'purple-blue-dark',
-  light: 'purple-blue-light',
+  dark: 'midnight-dark',
+  light: 'midnight-light',
+  'purple-blue': 'midnight',
+  'purple-blue-dark': 'midnight-dark',
+  'purple-blue-light': 'midnight-light',
 };
 
 const COLOR_SCHEME_OPTIONS: ThemeOption[] = [