@bunnyland/ui-web 0.2.0

package/src/player-widgets.ts

@@ -0,0 +1,29 @@
+import { escapeHtml } from './widgets';
+
+export interface GalleryItem {
+  id: string;
+  src: string;
+  title: string;
+  detail: string;
+  filename: string;
+  createdAt: number;
+}
+
+export function mergeGalleryItems(items: GalleryItem[], item: GalleryItem, limit = 36): GalleryItem[] {
+  const existing = items.find(entry => entry.id === item.id || entry.src === item.src);
+  const next = existing
+    ? items.map(entry => entry === existing ? { ...existing, ...item } : entry)
+    : [...items, item];
+  return next.sort((a, b) => a.createdAt - b.createdAt).slice(-limit);
+}
+
+export function renderGalleryItems(items: GalleryItem[]): string {
+  return items.length
+    ? items.slice().reverse().map(item => `
+      <button class="gallery-item" type="button" data-gallery-id="${escapeHtml(item.id)}">
+        <img src="${escapeHtml(item.src)}" alt="${escapeHtml(item.title)}">
+        <span class="gallery-caption">${escapeHtml(item.title)}</span>
+      </button>
+    `).join('')
+    : 'No photos yet.';
+}

package/src/preact/auth.tsx

@@ -0,0 +1,338 @@
+import type { ComponentChildren, JSX } from 'preact';
+import { createContext } from 'preact';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+
+import {
+  ApiError,
+  authMe,
+  login as createSession,
+  logout as deleteSession,
+  rotateAuth,
+  setPlayerAuth,
+  subscribePlayerAuth,
+} from '../api';
+import { Button, EmptyState, StatusText } from './components';
+
+export const AUTH_SCOPES = [
+  'character:profile',
+  'character:chat',
+  'world:play',
+  'world:admin',
+] as const;
+
+export type AuthScope = typeof AUTH_SCOPES[number];
+export type AuthStatus = 'anonymous' | 'authenticated' | 'checking' | 'error' | 'idle';
+
+export interface AuthSession {
+  expires_at: number;
+  rotate_after: number | null;
+  rotation_eligible: boolean;
+  scopes: AuthScope[];
+  subject: string;
+}
+
+export interface AuthContextValue {
+  closeLogin: () => void;
+  error: string;
+  hasScopes: (scopes: readonly AuthScope[]) => boolean;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+  openLogin: (scopes: readonly AuthScope[]) => void;
+  refresh: () => Promise<void>;
+  session: AuthSession | null;
+  status: AuthStatus;
+}
+
+interface AuthProviderProps {
+  base: string;
+  children: ComponentChildren;
+}
+
+interface AuthGateProps {
+  children: ComponentChildren;
+  scopes: readonly AuthScope[];
+}
+
+const SCOPE_LABELS: Record<AuthScope, string> = {
+  'character:profile': 'Character profile',
+  'character:chat': 'Character chat',
+  'world:play': 'World play',
+  'world:admin': 'World administration',
+};
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+function isAuthScope(value: unknown): value is AuthScope {
+  return typeof value === 'string' && (AUTH_SCOPES as readonly string[]).includes(value);
+}
+
+function parseSession(value: unknown): AuthSession {
+  if (!value || typeof value !== 'object') throw new Error('Invalid authentication response');
+  const record = value as Record<string, unknown>;
+  if (typeof record.subject !== 'string' || !Array.isArray(record.scopes)) {
+    throw new Error('Invalid authentication response');
+  }
+  return {
+    subject: record.subject,
+    scopes: record.scopes.filter(isAuthScope),
+    expires_at: Number(record.expires_at || 0),
+    rotate_after: record.rotate_after == null ? null : Number(record.rotate_after),
+    rotation_eligible: Boolean(record.rotation_eligible),
+  };
+}
+
+export function effectiveAuthScopes(scopes: readonly AuthScope[]): ReadonlySet<AuthScope> {
+  const effective = new Set(scopes);
+  if (effective.has('world:admin')) effective.add('world:play');
+  if (effective.has('world:play')) {
+    effective.add('character:profile');
+    effective.add('character:chat');
+  }
+  return effective;
+}
+
+export function hasAuthScopes(
+  granted: readonly AuthScope[],
+  required: readonly AuthScope[],
+): boolean {
+  const effective = effectiveAuthScopes(granted);
+  return required.every(scope => effective.has(scope));
+}
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function LoginDialog({
+  close,
+  login,
+  scopes,
+}: {
+  close: () => void;
+  login: (username: string, password: string) => Promise<void>;
+  scopes: readonly AuthScope[];
+}): JSX.Element {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (typeof dialog.showModal === 'function') dialog.showModal();
+    else dialog.setAttribute('open', '');
+    return () => {
+      if (typeof dialog.close === 'function' && dialog.open) dialog.close();
+    };
+  }, []);
+
+  const submit = async (event: JSX.TargetedSubmitEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault();
+    if (!username.trim() || !password || submitting) return;
+    setSubmitting(true);
+    setError('');
+    try {
+      await login(username.trim(), password);
+      close();
+    } catch (loginError) {
+      setError(errorMessage(loginError));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <dialog
+      aria-labelledby="bl-auth-title"
+      class="bl-auth-dialog"
+      onCancel={(event): void => { event.preventDefault(); close(); }}
+      ref={dialogRef}
+    >
+      <form class="bl-auth-form" onSubmit={(event): void => { void submit(event); }}>
+        <h2 id="bl-auth-title">Sign in to Bunnyland</h2>
+        <label>
+          <span>Username</span>
+          <input
+            autocomplete="username"
+            autofocus
+            disabled={submitting}
+            onInput={(event): void => setUsername(event.currentTarget.value)}
+            required
+            value={username}
+          />
+        </label>
+        <label>
+          <span>Password</span>
+          <input
+            autocomplete="current-password"
+            disabled={submitting}
+            onInput={(event): void => setPassword(event.currentTarget.value)}
+            required
+            type="password"
+            value={password}
+          />
+        </label>
+        {error && <StatusText role="alert" tone="error">{error}</StatusText>}
+        <p class="bl-auth-scopes">
+          Requested access: {scopes.map(scope => `${SCOPE_LABELS[scope]} (${scope})`).join(', ')}.
+          Your account determines the access granted.
+        </p>
+        <div class="bl-auth-actions">
+          <Button disabled={submitting} onClick={close}>Cancel</Button>
+          <Button disabled={submitting || !username.trim() || !password} type="submit" variant="primary">
+            {submitting ? 'Signing in…' : 'Sign in'}
+          </Button>
+        </div>
+      </form>
+    </dialog>
+  );
+}
+
+export function AuthProvider({ base, children }: AuthProviderProps): JSX.Element {
+  const [status, setStatus] = useState<AuthStatus>(base ? 'checking' : 'idle');
+  const [session, setSession] = useState<AuthSession | null>(null);
+  const [error, setError] = useState('');
+  const [loginScopes, setLoginScopes] = useState<readonly AuthScope[] | null>(null);
+  const requestGeneration = useRef(0);
+  const rotationAttempt = useRef('');
+
+  const refresh = useCallback(async (): Promise<void> => {
+    const generation = ++requestGeneration.current;
+    if (!base) {
+      setSession(null);
+      setError('');
+      setStatus('idle');
+      return;
+    }
+    setStatus('checking');
+    setError('');
+    try {
+      const next = parseSession(await authMe(base));
+      if (generation !== requestGeneration.current) return;
+      setSession(next);
+      setStatus('authenticated');
+    } catch (authError) {
+      if (generation !== requestGeneration.current) return;
+      setSession(null);
+      if (authError instanceof ApiError && authError.status === 401) {
+        setStatus('anonymous');
+      } else {
+        setError(errorMessage(authError));
+        setStatus('error');
+      }
+    }
+  }, [base]);
+
+  useEffect(() => {
+    void refresh();
+    return subscribePlayerAuth(() => { void refresh(); });
+  }, [refresh]);
+
+  const login = useCallback(async (username: string, password: string): Promise<void> => {
+    const next = parseSession(await createSession(base, username, password));
+    setPlayerAuth('');
+    requestGeneration.current += 1;
+    setSession(next);
+    setError('');
+    setStatus('authenticated');
+  }, [base]);
+
+  const logout = useCallback(async (): Promise<void> => {
+    await deleteSession(base);
+    setPlayerAuth('');
+    requestGeneration.current += 1;
+    setSession(null);
+    setError('');
+    setStatus('anonymous');
+  }, [base]);
+
+  useEffect(() => {
+    if (status !== 'authenticated' || !session) return;
+    const now = Date.now();
+    const expiresDelay = Math.max(0, session.expires_at * 1000 - now);
+    const rotateDelay = session.rotate_after == null
+      ? Number.POSITIVE_INFINITY
+      : Math.max(0, session.rotate_after * 1000 - now);
+    const delay = Math.min(expiresDelay, rotateDelay, 2147483647);
+    const timer = window.setTimeout(() => {
+      if (rotateDelay <= expiresDelay && session.rotate_after != null) {
+        const attempt = `${base}:${session.subject}:${session.rotate_after}`;
+        if (rotationAttempt.current === attempt) return;
+        rotationAttempt.current = attempt;
+        void rotateAuth(base)
+          .then(value => {
+            const next = parseSession(value);
+            setSession(next);
+            setStatus('authenticated');
+          })
+          .catch(() => { void refresh(); });
+      } else {
+        void refresh();
+      }
+    }, delay);
+    return () => window.clearTimeout(timer);
+  }, [base, refresh, session, status]);
+
+  const hasScopes = useCallback((scopes: readonly AuthScope[]): boolean => (
+    Boolean(session && hasAuthScopes(session.scopes, scopes))
+  ), [session]);
+  const openLogin = useCallback((scopes: readonly AuthScope[]): void => setLoginScopes([...scopes]), []);
+  const closeLogin = useCallback((): void => setLoginScopes(null), []);
+  const value = useMemo<AuthContextValue>(() => ({
+    closeLogin,
+    error,
+    hasScopes,
+    login,
+    logout,
+    openLogin,
+    refresh,
+    session,
+    status,
+  }), [closeLogin, error, hasScopes, login, logout, openLogin, refresh, session, status]);
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+      {loginScopes && <LoginDialog close={closeLogin} login={login} scopes={loginScopes} />}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth(): AuthContextValue {
+  const auth = useContext(AuthContext);
+  if (!auth) throw new Error('useAuth must be used within an AuthProvider');
+  return auth;
+}
+
+export function AuthGate({ children, scopes }: AuthGateProps): JSX.Element {
+  const auth = useAuth();
+  if (auth.status === 'authenticated' && auth.hasScopes(scopes)) return <>{children}</>;
+  if (auth.status === 'checking') return <EmptyState class="bl-auth-gate">Checking access…</EmptyState>;
+  if (auth.status === 'idle') return <EmptyState class="bl-auth-gate">Choose a server to continue.</EmptyState>;
+  if (auth.status === 'error') {
+    return (
+      <EmptyState class="bl-auth-gate">
+        <StatusText tone="error">Authentication check failed: {auth.error}</StatusText>
+        <Button onClick={(): void => { void auth.refresh(); }}>Retry</Button>
+      </EmptyState>
+    );
+  }
+  if (auth.status === 'authenticated') {
+    const missing = scopes.filter(scope => !effectiveAuthScopes(auth.session?.scopes || []).has(scope));
+    return (
+      <EmptyState class="bl-auth-gate">
+        <StatusText tone="error">Insufficient access for {auth.session?.subject || 'this account'}.</StatusText>
+        <small>Missing: {missing.map(scope => `${SCOPE_LABELS[scope]} (${scope})`).join(', ')}.</small>
+        <Button onClick={(): void => auth.openLogin(scopes)}>Sign in as another user</Button>
+      </EmptyState>
+    );
+  }
+  return (
+    <EmptyState class="bl-auth-gate">
+      <span>Sign in to continue.</span>
+      <Button onClick={(): void => auth.openLogin(scopes)} variant="primary">Login</Button>
+    </EmptyState>
+  );
+}

package/src/preact/components.tsx

@@ -0,0 +1,249 @@
+import type { ComponentChildren, JSX } from 'preact';
+import { useEffect, useId, useMemo, useState } from 'preact/hooks';
+
+export type Tone = 'error' | 'info' | 'muted' | 'ok' | 'warn';
+export type ButtonVariant = 'danger' | 'primary' | 'quiet' | 'secondary';
+
+function classNames(...values: Array<string | false | null | undefined>): string {
+  return values.filter(Boolean).join(' ');
+}
+
+export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+}
+
+export function Button({ class: className, variant, type = 'button', ...props }: ButtonProps): JSX.Element {
+  return <button {...props} type={type} class={classNames(className as string, variant && `bl-button-${variant}`)} />;
+}
+
+export interface StatusTextProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  children: ComponentChildren;
+  tone?: Tone;
+}
+
+export function StatusText({ children, class: className, tone = 'muted', ...props }: StatusTextProps): JSX.Element {
+  return <span {...props} class={classNames(className as string, 'bl-status', `bl-status-${tone}`)}>{children}</span>;
+}
+
+export function Toolbar({ children, class: className, ...props }: JSX.HTMLAttributes<HTMLElement>): JSX.Element {
+  return <header {...props} class={classNames(className as string, 'bl-toolbar')}>{children}</header>;
+}
+
+export function ToolbarRow({ children, class: className, ...props }: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
+  return <div {...props} class={classNames(className as string, 'toolbar-row')}>{children}</div>;
+}
+
+export interface ToolbarBrandProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  icon?: ComponentChildren;
+}
+
+export function ToolbarBrand({ children, class: className, icon = '🐰', ...props }: ToolbarBrandProps): JSX.Element {
+  return <span {...props} class={classNames(className as string, 'toolbar-brand')}>{icon}{children}</span>;
+}
+
+export interface PaneProps extends Omit<JSX.HTMLAttributes<HTMLElement>, 'title'> {
+  children: ComponentChildren;
+  title?: ComponentChildren;
+  tools?: ComponentChildren;
+}
+
+export function Pane({ children, class: className, title, tools, ...props }: PaneProps): JSX.Element {
+  return (
+    <section {...props} class={classNames(className as string, 'pane')}>
+      {(title || tools) && (
+        <header class="pane-header">
+          {title && <span class="pane-title">{title}</span>}
+          {tools && <span class="pane-tools">{tools}</span>}
+        </header>
+      )}
+      {children}
+    </section>
+  );
+}
+
+export interface FieldProps extends JSX.HTMLAttributes<HTMLLabelElement> {
+  children: ComponentChildren;
+  description?: ComponentChildren;
+  label: ComponentChildren;
+  wide?: boolean;
+}
+
+export function Field({ children, class: className, description, label, wide, ...props }: FieldProps): JSX.Element {
+  return (
+    <label {...props} class={classNames(className as string, 'field', wide && 'wide')}>
+      <span class="field-label">{label}</span>
+      {children}
+      {description && <span class="hint">{description}</span>}
+    </label>
+  );
+}
+
+export function Pill({ children, class: className, ...props }: JSX.HTMLAttributes<HTMLSpanElement>): JSX.Element {
+  return <span {...props} class={classNames(className as string, 'pill')}>{children}</span>;
+}
+
+export function EmptyState({ children, class: className, ...props }: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element {
+  return <div {...props} class={classNames(className as string, 'empty')}>{children}</div>;
+}
+
+export interface SearchOption {
+  label: string;
+  value: string;
+}
+
+export interface SearchSelectProps {
+  disabled?: boolean;
+  emptyLabel?: string;
+  id?: string;
+  label?: string;
+  onChange: (value: string, option: SearchOption | null) => void;
+  options: SearchOption[];
+  placeholder?: string;
+  value?: string;
+}
+
+export function SearchSelect({
+  disabled = false,
+  emptyLabel = 'No matches',
+  id,
+  label,
+  onChange,
+  options,
+  placeholder = 'search...',
+  value = '',
+}: SearchSelectProps): JSX.Element {
+  const generatedId = useId();
+  const inputId = id || generatedId;
+  const listboxId = `${inputId}-listbox`;
+  const selected = options.find(option => option.value === value) || null;
+  const [query, setQuery] = useState(selected?.label || '');
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return options;
+    return options.filter(option => option.label.toLowerCase().includes(needle) || option.value.toLowerCase().includes(needle));
+  }, [options, query]);
+  const selectedLabel = selected?.label || '';
+  useEffect(() => setQuery(selectedLabel), [selectedLabel, value]);
+  const choose = (option: SearchOption): void => {
+    setQuery(option.label);
+    setOpen(false);
+    onChange(option.value, option);
+  };
+
+  return (
+    <span class="search-dropdown">
+      {label && <label for={inputId}>{label}</label>}
+      <input
+        id={inputId}
+        class="search-dropdown-input"
+        type="text"
+        value={query}
+        placeholder={placeholder}
+        disabled={disabled}
+        autocomplete="off"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-controls={listboxId}
+        aria-expanded={open}
+        onFocus={(): void => setOpen(true)}
+        onBlur={(): void => setOpen(false)}
+        onInput={(event): void => {
+          setQuery(event.currentTarget.value);
+          setActive(0);
+          setOpen(true);
+          if (!event.currentTarget.value) onChange('', null);
+        }}
+        onKeyDown={(event): void => {
+          if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setActive(index => Math.min(index + 1, filtered.length - 1));
+          } else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActive(index => Math.max(index - 1, 0));
+          } else if (event.key === 'Enter' && filtered[active]) {
+            event.preventDefault();
+            choose(filtered[active]);
+          } else if (event.key === 'Escape') {
+            setOpen(false);
+          }
+        }}
+      />
+      {open && (
+        <div id={listboxId} class="search-dropdown-menu" role="listbox">
+          {filtered.length ? filtered.map((option, index) => (
+            <button
+              key={option.value}
+              type="button"
+              class={classNames('search-dropdown-option', index === active && 'active')}
+              role="option"
+              aria-selected={option.value === value}
+              onMouseDown={(event): void => event.preventDefault()}
+              onClick={(): void => choose(option)}
+            >
+              {option.label}
+            </button>
+          )) : <div class="search-dropdown-empty">{emptyLabel}</div>}
+        </div>
+      )}
+    </span>
+  );
+}
+
+export interface TagEditorProps {
+  addLabel?: string;
+  disabled?: boolean;
+  emptyLabel?: string;
+  onChange: (tags: string[]) => void;
+  placeholder?: string;
+  value: string[];
+}
+
+export function TagEditor({
+  addLabel = 'Add Tag',
+  disabled = false,
+  emptyLabel = 'No tags.',
+  onChange,
+  placeholder = 'add tag...',
+  value,
+}: TagEditorProps): JSX.Element {
+  const [draft, setDraft] = useState('');
+  const add = (): void => {
+    const tag = draft.trim();
+    if (!tag) return;
+    if (!value.includes(tag)) onChange([...value, tag]);
+    setDraft('');
+  };
+  return (
+    <div class="tag-editor">
+      <div class="tag-list">
+        {value.length ? value.map(tag => (
+          <span class="tag-pill" key={tag}>
+            <span>{tag}</span>
+            <Button
+              disabled={disabled}
+              aria-label={`Remove tag ${tag}`}
+              onClick={(): void => onChange(value.filter(item => item !== tag))}
+            >x</Button>
+          </span>
+        )) : <span class="tiny">{emptyLabel}</span>}
+      </div>
+      <div class="tag-entry">
+        <input
+          type="text"
+          value={draft}
+          placeholder={placeholder}
+          disabled={disabled}
+          onInput={(event): void => setDraft(event.currentTarget.value)}
+          onKeyDown={(event): void => {
+            if (event.key !== 'Enter') return;
+            event.preventDefault();
+            add();
+          }}
+        />
+        <Button disabled={disabled} onClick={add}>{addLabel}</Button>
+      </div>
+    </div>
+  );
+}

package/src/preact/theme.tsx

@@ -0,0 +1,72 @@
+import type { JSX } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+
+import {
+  DEFAULT_THEME,
+  THEME_CHANGE_EVENT,
+  initTheme,
+  setTheme,
+  themeOptions,
+  type ThemeOption,
+} from '../theme';
+
+export interface ThemeController {
+  options: ThemeOption[];
+  setTheme: (theme: string) => void;
+  theme: string;
+}
+
+export function useTheme(
+  root: HTMLElement = document.documentElement,
+  defaultTheme = DEFAULT_THEME,
+): ThemeController {
+  const [theme, setCurrentTheme] = useState(() => initTheme(root, defaultTheme));
+
+  useEffect(() => {
+    const handleThemeChange = (event: Event): void => {
+      const detail = (event as CustomEvent<{ theme?: string }>).detail;
+      if (detail?.theme) setCurrentTheme(detail.theme);
+    };
+    root.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    return () => root.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+  }, [root]);
+
+  const updateTheme = useCallback((value: string): void => {
+    setCurrentTheme(setTheme(value, root));
+  }, [root]);
+
+  return { options: themeOptions(), setTheme: updateTheme, theme };
+}
+
+export interface ThemeSelectProps extends Omit<JSX.HTMLAttributes<HTMLSelectElement>, 'onChange' | 'value'> {
+  controller?: ThemeController;
+  defaultTheme?: string;
+  onChange?: (theme: string) => void;
+  root?: HTMLElement;
+}
+
+export function ThemeSelect({
+  controller,
+  defaultTheme = DEFAULT_THEME,
+  onChange,
+  root,
+  ...props
+}: ThemeSelectProps): JSX.Element {
+  const fallback = useTheme(root || document.documentElement, defaultTheme);
+  const themes = controller || fallback;
+  return (
+    <select
+      {...props}
+      value={themes.theme}
+      onChange={(event): void => {
+        const value = event.currentTarget.value;
+        themes.setTheme(value);
+        onChange?.(value);
+      }}
+    >
+      {themes.options.map(option => (
+        <option key={option.value} value={option.value}>{option.label}</option>
+      ))}
+    </select>
+  );
+}

package/src/preact.ts

@@ -0,0 +1,3 @@
+export * from './preact/components';
+export * from './preact/auth';
+export * from './preact/theme';