@bunnyland/ui-web 0.2.0

package/src/admin-widgets.ts

@@ -0,0 +1,189 @@
+import { escapeHtml, normalizeTags } from './widgets';
+
+export interface SearchDropdownOption {
+  value: string;
+  label?: string;
+}
+
+export function tagEditorHtml(tags: unknown, options: {
+  hiddenClass?: string;
+  hiddenAttributes?: string;
+  disabled?: boolean;
+  addLabel?: string;
+  placeholder?: string;
+} = {}): string {
+  const values = normalizeTags(tags);
+  const hiddenClass = options.hiddenClass || 'component-tags-value';
+  const hiddenAttributes = options.hiddenAttributes || '';
+  const disabled = options.disabled ? ' disabled' : '';
+  const addLabel = options.addLabel || 'Add Tag';
+  const placeholder = options.placeholder || 'add tag...';
+  return `
+    <div class="tag-editor">
+      <input class="${escapeHtml(hiddenClass)}" ${hiddenAttributes} type="hidden" value="${escapeHtml(JSON.stringify(values))}">
+      <div class="tag-list">
+        ${renderTagPills(values, disabled)}
+      </div>
+      <div class="tag-entry">
+        <input class="tag-input" type="text" placeholder="${escapeHtml(placeholder)}" spellcheck="false"${disabled}>
+        <button type="button" data-add-tag${disabled}>${escapeHtml(addLabel)}</button>
+      </div>
+    </div>
+  `;
+}
+
+export function readTagEditorTags(editor: Element, options: { hiddenSelector?: string } = {}): string[] {
+  const hidden = editor.querySelector<HTMLInputElement>(options.hiddenSelector || '.component-tags-value');
+  try {
+    return normalizeTags(JSON.parse(hidden?.value || '[]'));
+  } catch (_err) {
+    return [];
+  }
+}
+
+export function renderTagEditorTags(editor: Element, tags: unknown): void {
+  const list = editor.querySelector('.tag-list');
+  if (!list) return;
+  list.innerHTML = renderTagPills(normalizeTags(tags), '');
+}
+
+export function bindTagEditor(editor: Element, options: {
+  hiddenSelector?: string;
+  onChange?: (tags: string[]) => void;
+} = {}): { readTags: () => string[]; update: (tags: string[]) => void } {
+  const input = editor.querySelector<HTMLInputElement>('.tag-input');
+  const add = editor.querySelector('[data-add-tag]');
+  const hidden = editor.querySelector<HTMLInputElement>(options.hiddenSelector || '.component-tags-value');
+  const onChange = options.onChange || (() => {});
+  const update = (tags: string[]): void => {
+    const values = normalizeTags(tags);
+    if (hidden) hidden.value = JSON.stringify(values);
+    renderTagEditorTags(editor, values);
+    onChange(values);
+  };
+  const addTag = (): void => {
+    const tag = input?.value.trim();
+    if (!tag) return;
+    const tags = readTagEditorTags(editor, options);
+    if (!tags.includes(tag)) tags.push(tag);
+    if (input) input.value = '';
+    update(tags);
+    input?.focus();
+  };
+  add?.addEventListener('click', addTag);
+  input?.addEventListener('keydown', event => {
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    addTag();
+  });
+  editor.addEventListener('click', event => {
+    const button = (event.target as Element | null)?.closest<HTMLElement>('[data-remove-tag]');
+    if (!button) return;
+    update(readTagEditorTags(editor, options).filter(tag => tag !== button.dataset.removeTag));
+  });
+  return { readTags: () => readTagEditorTags(editor, options), update };
+}
+
+export function bindSearchDropdown(root: Element, {
+  options,
+  value = '',
+  onChange = null,
+  emptyLabel = 'No matches',
+}: {
+  options: Array<string | SearchDropdownOption>;
+  value?: string;
+  onChange?: ((value: string, item: SearchDropdownOption | null) => void) | null;
+  emptyLabel?: string;
+}): { setValue: (value: string, notify?: boolean) => void } {
+  const input = root.querySelector<HTMLInputElement>('.search-dropdown-input');
+  const hidden = root.querySelector<HTMLInputElement>('.search-dropdown-value');
+  const menu = root.querySelector<HTMLElement>('.search-dropdown-menu');
+  if (!input || !hidden || !menu) throw new Error('Search dropdown is missing required elements');
+  const items = options.map(option => typeof option === 'string'
+    ? { value: option, label: option }
+    : { value: option.value, label: option.label || option.value });
+  let active = 0;
+  const filteredItems = (): SearchDropdownOption[] => {
+    const q = input.value.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter(item =>
+      String(item.label).toLowerCase().includes(q) ||
+      item.value.toLowerCase().includes(q));
+  };
+  const setValue = (nextValue: string, notify = true): void => {
+    const item = items.find(option => option.value === nextValue) || null;
+    hidden.value = item?.value || '';
+    input.value = item?.label || '';
+    if (notify && onChange) onChange(hidden.value, item);
+  };
+  const renderMenu = (): void => {
+    const filtered = filteredItems();
+    active = Math.max(0, Math.min(active, filtered.length - 1));
+    menu.innerHTML = filtered.length
+      ? filtered.map((item, index) => `
+        <div class="search-dropdown-option ${index === active ? 'active' : ''}" data-value="${escapeHtml(item.value)}">
+          ${escapeHtml(item.label)}
+        </div>
+      `).join('')
+      : `<div class="search-dropdown-empty">${escapeHtml(emptyLabel)}</div>`;
+    menu.classList.remove('hidden');
+    input.setAttribute('aria-expanded', 'true');
+  };
+  const chooseActive = (): void => {
+    const item = filteredItems()[active];
+    if (!item) return;
+    setValue(item.value);
+    menu.classList.add('hidden');
+    input.setAttribute('aria-expanded', 'false');
+  };
+  input.addEventListener('input', () => {
+    active = 0;
+    renderMenu();
+  });
+  input.addEventListener('focus', renderMenu);
+  input.addEventListener('keydown', event => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      active += 1;
+      renderMenu();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      active -= 1;
+      renderMenu();
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      chooseActive();
+    } else if (event.key === 'Escape') {
+      menu.classList.add('hidden');
+      input.setAttribute('aria-expanded', 'false');
+      input.blur();
+    }
+  });
+  input.addEventListener('blur', () => {
+    setTimeout(() => {
+      menu.classList.add('hidden');
+      input.setAttribute('aria-expanded', 'false');
+    }, 150);
+  });
+  menu.addEventListener('mousedown', event => {
+    const option = (event.target as Element | null)?.closest<HTMLElement>('.search-dropdown-option');
+    if (!option) return;
+    event.preventDefault();
+    setValue(option.dataset.value || '');
+    menu.classList.add('hidden');
+    input.setAttribute('aria-expanded', 'false');
+  });
+  setValue(value, false);
+  return { setValue };
+}
+
+function renderTagPills(values: string[], disabled: string): string {
+  return values.length
+    ? values.map(tag => `
+      <span class="tag-pill">
+        <span>${escapeHtml(tag)}</span>
+        <button type="button" data-remove-tag="${escapeHtml(tag)}" aria-label="Remove tag ${escapeHtml(tag)}"${disabled}>x</button>
+      </span>
+    `).join('')
+    : '<span class="tiny">No tags.</span>';
+}

package/src/api.ts

@@ -0,0 +1,193 @@
+export interface AdminAuth {
+  authorization?: string;
+  clientId?: string;
+}
+
+export interface ControlClaimLike {
+  claimId?: string;
+  claimSecret?: string;
+  clientId?: string;
+}
+
+export class ApiError extends Error {
+  readonly status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+  }
+}
+
+let playerAuthHeader = '';
+const playerAuthListeners = new Set<() => void>();
+let browserClientId = typeof globalThis.crypto?.randomUUID === 'function'
+  ? globalThis.crypto.randomUUID()
+  : `web-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+export function normalizeBase(url: string): string {
+  return String(url || '').trim().replace(/\/$/, '');
+}
+
+export function assertSameOriginBase(
+  base: string,
+  pageLocation = globalThis.location,
+): string {
+  const normalized = normalizeBase(base);
+  if (!pageLocation) return normalized;
+  const resolved = new URL(normalized || '/', pageLocation.href);
+  if (resolved.origin !== pageLocation.origin) {
+    throw new Error('Bunnyland browser connections must use the page origin');
+  }
+  return normalized;
+}
+
+export function serverFromUrl(search = globalThis.location?.search || ''): string {
+  const configured = new URLSearchParams(search).get('server') || '';
+  return configured ? assertSameOriginBase(configured) : '';
+}
+
+export function setServerInUrl(base: string, href = globalThis.location?.href || ''): void {
+  if (!href || !globalThis.history) return;
+  const url = new URL(href);
+  const normalized = assertSameOriginBase(base);
+  if (normalized) url.searchParams.set('server', normalized);
+  else url.searchParams.delete('server');
+  history.replaceState(null, '', url);
+}
+
+export function jsonHeaders(authHeader = ''): Record<string, string> {
+  return {
+    'Content-Type': 'application/json',
+    'X-Bunnyland-Client-Id': browserClientId,
+    ...(authHeader.startsWith('Bearer ') ? { Authorization: authHeader } : {}),
+  };
+}
+
+export function adminHeaders(auth: AdminAuth = {}, contentType = ''): Record<string, string> {
+  const headers: Record<string, string> = {
+    'X-Bunnyland-Client-Id': auth.clientId || browserClientId,
+  };
+  if (contentType) headers['Content-Type'] = contentType;
+  if (auth.authorization?.startsWith('Bearer ')) headers.Authorization = auth.authorization;
+  return headers;
+}
+
+export function claimHeaders(control: ControlClaimLike | null = null): Record<string, string> {
+  return {
+    ...jsonHeaders(playerAuthHeader),
+    'X-Bunnyland-Client-Id': control?.clientId || browserClientId,
+    ...(control?.claimSecret ? { 'X-Bunnyland-Claim-Secret': control.claimSecret } : {}),
+  };
+}
+
+export function mergePlayerHeaders(headers: HeadersInit = {}): Headers {
+  const merged = new Headers(headers);
+  if (!merged.has('X-Bunnyland-Client-Id')) {
+    merged.set('X-Bunnyland-Client-Id', browserClientId);
+  }
+  if (playerAuthHeader.startsWith('Bearer ')) {
+    merged.set('Authorization', playerAuthHeader);
+  }
+  return merged;
+}
+
+export async function parseJsonResponse(res: Response): Promise<unknown> {
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const message = typeof data === 'object' && data && 'detail' in data ? String(data.detail) : `HTTP ${res.status}`;
+    throw new ApiError(message, res.status);
+  }
+  return data;
+}
+
+export async function sendJson(base: string, path: string, init: RequestInit = {}): Promise<unknown> {
+  const headers = mergePlayerHeaders(init.headers || {});
+  if (init.body && !headers.has('Content-Type')) headers.set('Content-Type', 'application/json');
+  return parseJsonResponse(await fetch(`${assertSameOriginBase(base)}${path}`, {
+    ...init,
+    headers,
+    credentials: 'include',
+  }));
+}
+
+export async function login(base: string, username: string, password: string): Promise<unknown> {
+  assertSameOriginBase(base);
+  return sendJson(base, '/auth/session', {
+    method: 'POST',
+    body: JSON.stringify({ username, password, delivery: 'cookie' }),
+  });
+}
+
+export async function authMe(base: string): Promise<unknown> {
+  return sendJson(base, '/auth/session');
+}
+
+export async function rotateAuth(base: string): Promise<unknown> {
+  return sendJson(base, '/auth/session', { method: 'PATCH' });
+}
+
+export async function logout(base: string): Promise<unknown> {
+  return sendJson(base, '/auth/session', { method: 'DELETE' });
+}
+
+export function setPlayerAuth(authHeader = ''): void {
+  const next = authHeader.startsWith('Bearer ') ? authHeader : '';
+  if (next === playerAuthHeader) return;
+  playerAuthHeader = next;
+  for (const listener of playerAuthListeners) listener();
+}
+
+export function getPlayerAuth(): string {
+  return playerAuthHeader;
+}
+
+export function subscribePlayerAuth(listener: () => void): () => void {
+  playerAuthListeners.add(listener);
+  return () => playerAuthListeners.delete(listener);
+}
+
+export function setClientId(clientId: string): void {
+  const normalized = clientId.trim();
+  if (normalized) browserClientId = normalized;
+}
+
+export function getClientId(): string {
+  return browserClientId;
+}
+
+export async function sendAdmin(base: string, path: string, auth: AdminAuth = {}, init: RequestInit = {}): Promise<unknown> {
+  return parseJsonResponse(await fetch(`${assertSameOriginBase(base)}${path}`, {
+    ...init,
+    headers: adminHeaders(auth),
+    credentials: 'include',
+  }));
+}
+
+export function socketUrl(base: string, path = '/admin/world/stream', _authHeader = ''): string {
+  const normalized = assertSameOriginBase(base);
+  const httpUrl = globalThis.location
+    ? new URL(`${normalized}${path}`, globalThis.location.href).href
+    : `${normalized}${path}`;
+  return httpUrl.replace(/^http/, 'ws');
+}
+
+export function mediaUrl(base: string, url: string): string {
+  if (!url) return '';
+  if (url.startsWith('data:')) return url;
+  if (/^https?:/.test(url)) {
+    assertSameOriginBase(url);
+    return url;
+  }
+  return `${assertSameOriginBase(base)}${url}`;
+}
+
+export async function requestSceneImage(base: string, characterId: string, control: ControlClaimLike | null = null): Promise<unknown> {
+  void characterId;
+  if (!control?.claimId) throw new Error('A character claim is required');
+  return sendJson(base, `/play/claims/${encodeURIComponent(control.claimId)}/jobs`, {
+    method: 'POST',
+    headers: claimHeaders(control),
+    body: JSON.stringify({ kind: 'scene_image' }),
+  });
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './api';
+export * from './play';
+export * from './theme';
+export * from './widgets';
+export * from './player-widgets';
+export * from './admin-widgets';