@bunnyland/ui-web 0.2.1 → 0.2.3

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

@@ -9,9 +9,11 @@
   --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;
@@ -36,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);
@@ -645,6 +649,7 @@ input, select, textarea, button { font-family: var(--bl-font-mono); }
 
 input[type=file],
 input[type=text],
+input[type=password],
 input[type=number],
 select,
 textarea {
@@ -662,10 +667,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);
@@ -681,6 +690,31 @@ button {
 button:hover:not(:disabled) { background: var(--bl-surface-hover); }
 button:disabled { opacity: 0.4; cursor: default; }
 
+dialog {
+  position: fixed;
+  z-index: 10000;
+  inset: 0;
+  width: min(460px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
+  max-height: calc(100dvh - 24px);
+  margin: auto;
+  padding: 14px;
+  overflow: auto;
+  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);
+}
+
+dialog::backdrop { background: var(--bl-overlay); }
+
+/* The Toon client and browser fallbacks can render with the open attribute
+   instead of showModal. Keep those dialogs modal-looking. */
+dialog[open]:not(:modal):not(.content-warning-dialog) {
+  box-shadow: 0 0 0 100vmax var(--bl-overlay), var(--bl-shadow-popover);
+}
+
 .bl-button-primary {
   color: var(--bl-text-inverse);
   background: var(--bl-accent);
@@ -718,8 +752,6 @@ button:disabled { opacity: 0.4; cursor: default; }
   box-shadow: var(--bl-shadow-popover);
 }
 
-.bl-auth-dialog::backdrop { background: var(--bl-overlay); }
-
 .bl-auth-form,
 .bl-auth-form label {
   display: grid;
@@ -743,6 +775,72 @@ 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-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;
@@ -910,6 +1008,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;
@@ -952,6 +1063,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);
@@ -1589,6 +1712,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

@@ -34,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 = [
@@ -42,6 +43,7 @@
       title: 'Welcome',
       label: 'Start here',
       description: 'Project overview, docs, admin notes, and client chooser.',
+      group: 'Bunnyland',
       supportsServer: true,
     },
     {
@@ -49,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,
     },
@@ -72,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,
     },
@@ -80,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,
     },
@@ -88,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,
     },
@@ -96,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,
     },
@@ -104,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,
     },
@@ -112,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,
     },
@@ -120,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,
     },
@@ -128,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,
     },
@@ -136,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,
     },
@@ -144,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,
     },
@@ -476,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;
@@ -504,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>
@@ -768,6 +918,7 @@
   }
 
   window.BunnylandUI = {
+    alertDialog,
     bindColorSchemeSelect,
     bindTagEditor,
     bindSearchDropdown,
@@ -777,12 +928,15 @@
     currentColorScheme,
     escapeHtml,
     currentTheme,
+    confirmDialog,
+    credentialsDialog,
     initClientMenu,
     initHelp,
     initTheme,
     loadConfig,
     normalizeTags,
     normalizeTheme,
+    promptDialog,
     registerThemeOption,
     registerThemeOptions,
     renderTagEditorTags,

package/package.json

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