@bro-code/crawl-space 0.0.0-stage → 2026.1.0

package/dist/cjs/themes.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEMES = void 0;
+exports.resolveColors = resolveColors;
+const DEFAULT = {
+    background: '#121417',
+    surface: '#1c1f24',
+    text: '#e8eaed',
+    muted: '#9aa0a6',
+    border: '#33373d',
+    accent: '#5b9cff',
+    accentText: '#0b1220',
+    error: '#ff6b6b',
+    success: '#6fcf97',
+    font: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+};
+const BROCODE = {
+    background: '#181818',
+    surface: '#222222',
+    text: '#ffffff',
+    muted: '#b0b0b0',
+    border: '#3c3c3c',
+    accent: '#7b9981',
+    accentText: '#ffffff',
+    error: '#ff5252',
+    success: '#96be4d',
+    font: 'Roboto, sans-serif',
+};
+const ROMBIE = {
+    background: '#0a0a12',
+    surface: '#15141f',
+    text: '#f1eef9',
+    muted: '#9a90bd',
+    border: '#302c47',
+    accent: '#ff2d78',
+    accentText: '#12060d',
+    error: '#ff5c5c',
+    success: '#00e5ff',
+    font: "system-ui, 'Segoe UI', Roboto, sans-serif",
+};
+exports.THEMES = {
+    default: DEFAULT,
+    brocode: BROCODE,
+    rombie: ROMBIE,
+    'taut-wad': BROCODE,
+    custom: DEFAULT,
+};
+const COLOR_KEYS = Object.keys(DEFAULT);
+function isTheme(name) {
+    return Object.hasOwn(exports.THEMES, name);
+}
+function isValid(key, value) {
+    if (typeof value !== 'string' || value.trim() === '')
+        return false;
+    return CSS.supports(key === 'font' ? 'font-family' : 'color', value);
+}
+function resolveColors(config) {
+    const theme = config.theme ?? 'default';
+    if (typeof theme !== 'string' || !isTheme(theme)) {
+        console.warn(`[crawl-space] Unknown theme "${String(theme)}"; using "default".`);
+        return { ...DEFAULT };
+    }
+    if (theme !== 'custom') {
+        if (config.colors !== undefined) {
+            console.warn(`[crawl-space] "colors" is only used with theme "custom"; ignoring it.`);
+        }
+        return { ...exports.THEMES[theme] };
+    }
+    const colors = { ...DEFAULT };
+    const given = config.colors ?? {};
+    if (typeof given !== 'object' || given === null || Array.isArray(given)) {
+        console.warn('[crawl-space] "colors" must be an object; using the default theme.');
+        return colors;
+    }
+    for (const [key, value] of Object.entries(given)) {
+        if (value === undefined)
+            continue;
+        if (!COLOR_KEYS.includes(key)) {
+            console.warn(`[crawl-space] Unknown color "${key}"; ignoring it.`);
+        }
+        else if (isValid(key, value)) {
+            colors[key] = value;
+        }
+        else {
+            console.warn(`[crawl-space] Invalid ${key} "${String(value)}"; using the default theme's.`);
+        }
+    }
+    return colors;
+}

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/api.js

@@ -0,0 +1,86 @@
+const TYPES = ['bug', 'question'];
+const STATUSES = ['new', 'in_progress', 'resolved', 'dismissed'];
+const FAILED = { ok: false, reason: 'failed' };
+export function joinUrl(base, path) {
+    return `${base.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`;
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isId(value) {
+    return (typeof value === 'number' && Number.isFinite(value)) || (typeof value === 'string' && value !== '');
+}
+function isDate(value) {
+    return typeof value === 'string' && !Number.isNaN(Date.parse(value));
+}
+function isOneOf(list, value) {
+    return list.includes(value);
+}
+function toReport(item) {
+    if (!isRecord(item))
+        return null;
+    const { id, type, status, description, answer, createdAt, updatedAt } = item;
+    if (!isId(id) || !isOneOf(TYPES, type) || !isOneOf(STATUSES, status) || typeof description !== 'string')
+        return null;
+    if (answer != null && typeof answer !== 'string')
+        return null;
+    if (!isDate(createdAt) || !isDate(updatedAt))
+        return null;
+    return { id, type, status, description, answer: answer ?? null, createdAt, updatedAt };
+}
+function toQaItem(item) {
+    if (!isRecord(item))
+        return null;
+    const { id, question, answer, updatedAt } = item;
+    if (!isId(id) || typeof question !== 'string' || typeof answer !== 'string' || !isDate(updatedAt))
+        return null;
+    return { id, question, answer, updatedAt };
+}
+function listOf(value, toItem) {
+    if (!Array.isArray(value))
+        return null;
+    return value.map(toItem).filter((item) => item !== null);
+}
+function toReports(body) {
+    if (!isRecord(body))
+        return null;
+    const mine = listOf(body.mine, toReport);
+    const active = listOf(body.active, toReport);
+    return mine && active ? { mine, active } : null;
+}
+function toCreated(body) {
+    return isRecord(body) && isId(body.id) ? { id: body.id } : null;
+}
+export function createApiClient(options) {
+    const reportsUrl = joinUrl(options.api, options.paths?.reports ?? '/reports');
+    const qaUrl = joinUrl(options.api, options.paths?.qa ?? '/qa');
+    async function request(url, parse, body) {
+        try {
+            const headers = { Accept: 'application/json' };
+            if (body !== undefined)
+                headers['Content-Type'] = 'application/json';
+            const token = await options.getToken?.();
+            if (typeof token === 'string' && token !== '')
+                headers.Authorization = `Bearer ${token}`;
+            const response = await fetch(url, {
+                method: body === undefined ? 'GET' : 'POST',
+                headers,
+                body: body === undefined ? undefined : JSON.stringify(body),
+            });
+            if (response.status === 429)
+                return { ok: false, reason: 'rate-limited' };
+            if (!response.ok)
+                return FAILED;
+            const value = parse(await response.json());
+            return value === null ? FAILED : { ok: true, value };
+        }
+        catch {
+            return FAILED;
+        }
+    }
+    return {
+        submitReport: (submission) => request(reportsUrl, toCreated, submission),
+        getReports: () => request(reportsUrl, toReports),
+        getQa: () => request(qaUrl, (body) => listOf(body, toQaItem)),
+    };
+}

package/dist/esm/button.js

@@ -0,0 +1,30 @@
+import { BUTTON_CSS } from './css.js';
+import { h } from './dom.js';
+import { toTab } from './options.js';
+export function defineButton(getHost) {
+    return class CrawlSpaceButton extends HTMLElement {
+        root;
+        label = document.createTextNode('');
+        constructor() {
+            super();
+            this.root = this.attachShadow({ mode: 'open', delegatesFocus: true });
+            const button = h('button', { type: 'button', part: 'button' }, h('slot', {}, this.label));
+            button.addEventListener('click', () => getHost().open(toTab(this.getAttribute('tab'))));
+            this.root.append(button);
+        }
+        connectedCallback() {
+            getHost().connected.add(this);
+            this.refresh();
+        }
+        disconnectedCallback() {
+            getHost().connected.delete(this);
+        }
+        refresh() {
+            const host = getHost();
+            host.styles.apply(this.root, BUTTON_CSS);
+            this.label.data = host.options.title;
+            if (this.hasAttribute('floating'))
+                this.dataset.position = host.options.floating ?? 'bottom-right';
+        }
+    };
+}

package/dist/esm/context.js

@@ -0,0 +1,68 @@
+import { sanitizeText } from './sanitize.js';
+export const CONTEXT_LIMITS = {
+    maxEntries: 12,
+    maxKeyLength: 40,
+    maxValueLength: 200,
+};
+const BROWSERS = [
+    ['Edge', /Edg\/(\d+)/],
+    ['Firefox', /Firefox\/(\d+)/],
+    ['Chrome', /Chrome\/(\d+)/],
+    ['Safari', /Version\/(\d+).*Safari/],
+];
+const SYSTEMS = [
+    ['Windows', /Windows/],
+    ['iOS', /iPhone|iPad|iPod/],
+    ['Android', /Android/],
+    ['ChromeOS', /CrOS/],
+    ['macOS', /Macintosh|Mac OS X/],
+    ['Linux', /Linux/],
+];
+function browserName(userAgent) {
+    for (const [name, pattern] of BROWSERS) {
+        const match = pattern.exec(userAgent);
+        if (match)
+            return `${name} ${match[1]}`;
+    }
+    return 'Other';
+}
+function systemName(userAgent) {
+    return SYSTEMS.find(([, pattern]) => pattern.test(userAgent))?.[0] ?? 'Other';
+}
+export function collectContext(options) {
+    const raw = [['Version', options.version, false]];
+    if (typeof location !== 'undefined') {
+        const path = location.pathname;
+        raw.push(['Page', options.scrubPath ? options.scrubPath(path) : path, false]);
+    }
+    if (typeof navigator !== 'undefined') {
+        raw.push(['Browser', browserName(navigator.userAgent), false], ['OS', systemName(navigator.userAgent), false]);
+    }
+    const extras = options.getContext?.();
+    if (typeof extras === 'object' && extras !== null) {
+        for (const [label, item] of Object.entries(extras)) {
+            if (typeof item === 'object' && item !== null) {
+                const detail = item;
+                raw.push([label, detail.value, detail.editable === true]);
+            }
+            else {
+                raw.push([label, item, false]);
+            }
+        }
+    }
+    const entries = [];
+    const seen = new Set();
+    for (const [rawLabel, rawValue, editable] of raw) {
+        if (entries.length === CONTEXT_LIMITS.maxEntries)
+            break;
+        if (typeof rawValue !== 'string')
+            continue;
+        const label = sanitizeText(rawLabel, CONTEXT_LIMITS.maxKeyLength);
+        const value = sanitizeText(rawValue, CONTEXT_LIMITS.maxValueLength);
+        if (label === '' || value === '' || seen.has(label))
+            continue;
+        seen.add(label);
+        entries.push({ label, value, editable });
+    }
+    return entries;
+}

package/dist/esm/crawl-space.js

@@ -0,0 +1,73 @@
+import { createApiClient } from './api.js';
+import { defineButton } from './button.js';
+import { defineDialog } from './dialog.js';
+import { resolveOptions, toTab } from './options.js';
+import { createStyles } from './styles.js';
+const KEY = Symbol.for('@bro-code/crawl-space');
+const NOOP = { open: () => undefined, close: () => undefined };
+function getState() {
+    const state = window[KEY];
+    if (!state)
+        throw new Error('[crawl-space] createCrawlSpace has not been called.');
+    return state;
+}
+function whenBody(run) {
+    if (document.body)
+        run(document.body);
+    else
+        document.addEventListener('DOMContentLoaded', () => run(document.body), { once: true });
+}
+function syncFloating(state) {
+    if (state.options.floating && !state.floating) {
+        const button = document.createElement('crawl-space-button');
+        button.setAttribute('floating', '');
+        state.floating = button;
+        whenBody((body) => body.append(button));
+    }
+    else if (!state.options.floating && state.floating) {
+        state.floating.remove();
+        state.floating = null;
+    }
+}
+function openDialog(state, tab) {
+    state.dialog ??= document.createElement('crawl-space-dialog');
+    if (!state.dialog.isConnected)
+        document.body.append(state.dialog);
+    state.dialog.showTab(tab);
+}
+export function createCrawlSpace(options) {
+    if (typeof window === 'undefined' || typeof customElements === 'undefined')
+        return NOOP;
+    const resolved = resolveOptions(options);
+    const target = window;
+    const existing = target[KEY];
+    if (existing) {
+        existing.options = resolved;
+        existing.api = createApiClient(resolved);
+        existing.styles.setColors(resolved.colors);
+        for (const element of existing.connected)
+            element.refresh();
+        syncFloating(existing);
+        return existing.controller;
+    }
+    const state = {
+        options: resolved,
+        api: createApiClient(resolved),
+        styles: createStyles(resolved.colors),
+        connected: new Set(),
+        dialog: null,
+        floating: null,
+        open: (tab) => openDialog(state, tab),
+        controller: {
+            open: (tab) => openDialog(state, toTab(tab)),
+            close: () => state.dialog?.hide(),
+        },
+    };
+    target[KEY] = state;
+    if (!customElements.get('crawl-space-dialog'))
+        customElements.define('crawl-space-dialog', defineDialog(getState));
+    if (!customElements.get('crawl-space-button'))
+        customElements.define('crawl-space-button', defineButton(getState));
+    syncFloating(state);
+    return state.controller;
+}

package/dist/esm/css.js

@@ -0,0 +1,118 @@
+export const BUTTON_CSS = `
+:host { display: inline-block; }
+:host([hidden]) { display: none; }
+:host([floating]) { position: fixed; z-index: 2147483000; }
+:host([floating][data-position='bottom-right']) { right: 16px; bottom: 16px; }
+:host([floating][data-position='bottom-left']) { left: 16px; bottom: 16px; }
+:host([floating][data-position='top-right']) { right: 16px; top: 16px; }
+:host([floating][data-position='top-left']) { left: 16px; top: 16px; }
+button {
+  padding: 9px 16px;
+  border: none;
+  border-radius: 8px;
+  background: var(--cs-accent);
+  color: var(--cs-accent-text);
+  font: 600 14px/1.2 var(--cs-font);
+  cursor: pointer;
+}
+:host([floating]) button { padding: 11px 18px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
+button:hover { filter: brightness(1.1); }
+button:focus-visible { outline: 2px solid var(--cs-text); outline-offset: 2px; }
+`;
+export const DIALOG_CSS = `
+:host { all: initial; }
+*, *::before, *::after { box-sizing: border-box; }
+dialog {
+  width: min(560px, calc(100vw - 32px));
+  max-height: min(720px, calc(100vh - 32px));
+  padding: 0;
+  border: 1px solid var(--cs-border);
+  border-radius: 12px;
+  background: var(--cs-background);
+  color: var(--cs-text);
+  font: 14px/1.45 var(--cs-font);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+dialog[open] { display: flex; flex-direction: column; }
+dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
+button, input, textarea { font: inherit; color: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: default; opacity: 0.6; }
+:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
+header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 0 20px; }
+h2 { margin: 0; font-size: 18px; font-weight: 600; }
+.close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: none; color: var(--cs-muted); }
+.close:hover { background: var(--cs-surface); color: var(--cs-text); }
+.close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+[role='tablist'] { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--cs-border); }
+[role='tab'] { margin-bottom: -1px; padding: 9px 10px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--cs-muted); font-weight: 600; }
+[role='tab']:hover { color: var(--cs-text); }
+[role='tab'][aria-selected='true'] { border-bottom-color: var(--cs-accent); color: var(--cs-text); }
+[role='tabpanel'] { flex: 1 1 auto; min-height: 0; padding: 16px 20px 20px; overflow-y: auto; }
+[role='tabpanel'][hidden] { display: none; }
+.hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.kinds { display: inline-flex; gap: 3px; margin: 0 0 14px; padding: 3px; border: 1px solid var(--cs-border); border-radius: 8px; }
+.kinds label { position: relative; }
+.kinds input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.kinds span { display: block; padding: 5px 14px; border-radius: 6px; color: var(--cs-muted); font-weight: 600; }
+.kinds input:checked + span { background: var(--cs-accent); color: var(--cs-accent-text); }
+.kinds input:focus-visible + span { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
+.field-label { display: block; margin-bottom: 6px; font-weight: 600; }
+textarea { display: block; width: 100%; min-height: 130px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); resize: vertical; }
+textarea:focus-visible { outline-offset: 0; }
+.counter { margin-top: 4px; color: var(--cs-muted); font-size: 12px; text-align: right; }
+.details { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }
+.details label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
+.details input { width: 16px; height: 16px; margin: 0; accent-color: var(--cs-accent); }
+.details ul { margin: 8px 0 0; padding: 0; list-style: none; color: var(--cs-muted); font-size: 12px; }
+.details ul.off { opacity: 0.45; }
+.details li { overflow-wrap: anywhere; }
+.details .label { color: var(--cs-text); }
+.details li.editable { margin: 2px 0; }
+.details li.editable label { gap: 4px; font-weight: inherit; cursor: auto; }
+.details li.editable .label { flex: none; }
+.details li.editable input { flex: 1 1 auto; min-width: 0; width: auto; height: auto; padding: 2px 6px; border: 1px solid var(--cs-border); border-radius: 4px; background: var(--cs-background); color: var(--cs-text); font: inherit; }
+.details li.editable input:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 1px; }
+.details li.editable input:disabled { cursor: not-allowed; }
+.actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
+.message { flex: 1; margin: 0; font-size: 13px; }
+.error { color: var(--cs-error); }
+.success { color: var(--cs-success); }
+.primary { padding: 9px 18px; border: none; border-radius: 8px; background: var(--cs-accent); color: var(--cs-accent-text); font-weight: 600; }
+.primary:hover:not(:disabled) { filter: brightness(1.1); }
+.secondary { padding: 6px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: none; }
+section + section { margin-top: 18px; }
+h3 { margin: 0 0 8px; color: var(--cs-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
+.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.item { padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }
+.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; color: var(--cs-muted); font-size: 12px; }
+.badge { padding: 1px 8px; border: 1px solid var(--cs-border); border-radius: 999px; color: var(--cs-text); }
+.badge.in_progress { border-color: var(--cs-accent); color: var(--cs-accent); }
+.badge.resolved { border-color: var(--cs-success); color: var(--cs-success); }
+.text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.answer { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--cs-accent); }
+.answer-label { color: var(--cs-muted); font-size: 12px; font-weight: 600; }
+.note { margin: 0; color: var(--cs-muted); }
+.failed { display: flex; align-items: center; gap: 12px; }
+details { border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }
+summary { padding: 10px 12px; font-weight: 600; cursor: pointer; }
+details .text { padding: 0 12px 12px; }
+@media (max-width: 599.98px) {
+  dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: none; border-radius: 0; box-shadow: none; }
+}
+@media (hover: none) {
+  header { padding: 8px 8px 0 20px; }
+  .close { width: 48px; height: 48px; }
+  .close svg { width: 20px; height: 20px; }
+  [role='tablist'] { gap: 8px; }
+  [role='tab'] { min-height: 48px; padding: 12px 14px; }
+  .kinds { gap: 8px; }
+  .kinds span { padding: 14px 18px; }
+  .details > label { min-height: 48px; gap: 12px; }
+  .details > label input { width: 24px; height: 24px; }
+  .primary { min-height: 48px; padding: 12px 24px; }
+  .secondary { min-height: 48px; padding: 12px 18px; }
+  summary { min-height: 48px; padding: 14px 12px; }
+}
+`;

package/dist/esm/dialog.js

@@ -0,0 +1,103 @@
+import { DIALOG_CSS } from './css.js';
+import { h } from './dom.js';
+import { createActivePanel, createQaPanel } from './lists.js';
+import { createSubmitPanel } from './submit.js';
+const TABS = [
+    ['submit', 'Submit'],
+    ['active', 'Active'],
+    ['qa', 'Q&A'],
+];
+function closeIcon() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.setAttribute('aria-hidden', 'true');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M3 3l10 10M13 3L3 13');
+    svg.append(path);
+    return svg;
+}
+export function defineDialog(getHost) {
+    return class CrawlSpaceDialog extends HTMLElement {
+        root;
+        dialog;
+        heading = h('h2', { id: 'cs-title' });
+        tabs = new Map();
+        panels = new Map();
+        current = 'submit';
+        constructor() {
+            super();
+            const host = getHost();
+            this.root = this.attachShadow({ mode: 'open' });
+            const close = h('button', { type: 'button', class: 'close', 'aria-label': 'Close' }, closeIcon());
+            close.addEventListener('click', () => this.hide());
+            const tablist = h('div', { role: 'tablist', 'aria-labelledby': 'cs-title' });
+            tablist.addEventListener('keydown', (event) => this.onTabKey(event));
+            this.dialog = h('dialog', { 'aria-labelledby': 'cs-title' }, h('header', {}, this.heading, close), tablist);
+            const panels = { submit: createSubmitPanel(host), active: createActivePanel(host), qa: createQaPanel(host) };
+            for (const [tab, label] of TABS) {
+                const button = h('button', { type: 'button', role: 'tab', id: `cs-tab-${tab}`, 'aria-controls': `cs-panel-${tab}` }, label);
+                button.addEventListener('click', () => this.select(tab));
+                tablist.append(button);
+                this.tabs.set(tab, button);
+                const element = h('div', { role: 'tabpanel', id: `cs-panel-${tab}`, 'aria-labelledby': `cs-tab-${tab}`, tabindex: '0' }, panels[tab].element);
+                this.dialog.append(element);
+                this.panels.set(tab, { panel: panels[tab], element });
+            }
+            this.dialog.addEventListener('close', () => getHost().options.onOpenChange?.(false));
+            this.root.append(this.dialog);
+        }
+        connectedCallback() {
+            getHost().connected.add(this);
+            this.refresh();
+        }
+        disconnectedCallback() {
+            getHost().connected.delete(this);
+        }
+        refresh() {
+            const host = getHost();
+            host.styles.apply(this.root, DIALOG_CSS);
+            this.heading.textContent = host.options.title;
+            for (const { panel } of this.panels.values())
+                panel.refresh?.();
+        }
+        showTab(tab) {
+            this.select(tab);
+            if (this.dialog.open)
+                return;
+            this.dialog.showModal();
+            this.tabs.get(tab)?.focus();
+            getHost().options.onOpenChange?.(true);
+        }
+        hide() {
+            if (this.dialog.open)
+                this.dialog.close();
+        }
+        select(tab) {
+            this.current = tab;
+            for (const [name, button] of this.tabs) {
+                const selected = name === tab;
+                button.setAttribute('aria-selected', String(selected));
+                button.tabIndex = selected ? 0 : -1;
+            }
+            for (const [name, { element }] of this.panels)
+                element.hidden = name !== tab;
+            this.panels.get(tab)?.panel.show();
+        }
+        onTabKey(event) {
+            const order = TABS.map(([tab]) => tab);
+            const index = order.indexOf(this.current);
+            const moves = {
+                ArrowRight: (index + 1) % order.length,
+                ArrowLeft: (index + order.length - 1) % order.length,
+                Home: 0,
+                End: order.length - 1,
+            };
+            const next = moves[event.key];
+            if (next === undefined)
+                return;
+            event.preventDefault();
+            this.select(order[next]);
+            this.tabs.get(order[next])?.focus();
+        }
+    };
+}

package/dist/esm/dom.js

@@ -0,0 +1,14 @@
+export function h(tag, attributes = {}, ...children) {
+    const element = document.createElement(tag);
+    for (const [name, value] of Object.entries(attributes)) {
+        if (value === true)
+            element.setAttribute(name, '');
+        else if (value !== false)
+            element.setAttribute(name, value);
+    }
+    for (const child of children) {
+        if (child !== null && child !== undefined && child !== false)
+            element.append(child);
+    }
+    return element;
+}

package/dist/esm/host.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { createCrawlSpace } from './crawl-space.js';
+export { sanitizeText } from './sanitize.js';

package/dist/esm/lists.js

@@ -0,0 +1,63 @@
+import { h } from './dom.js';
+const TYPE_LABELS = { bug: 'Bug', question: 'Question' };
+const STATUS_LABELS = { new: 'New', in_progress: 'In progress', resolved: 'Resolved', dismissed: 'Dismissed' };
+function note(text) {
+    return h('p', { class: 'note' }, text);
+}
+function dateOf(iso) {
+    const label = new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+    return h('time', { datetime: iso }, label);
+}
+function reportItem(report, own) {
+    return h('li', { class: 'item' }, h('div', { class: 'meta' }, h('span', { class: 'badge' }, TYPE_LABELS[report.type]), own && h('span', { class: `badge ${report.status}` }, STATUS_LABELS[report.status]), dateOf(report.createdAt)), h('p', { class: 'text' }, report.description), own &&
+        report.answer !== null &&
+        h('div', { class: 'answer' }, h('div', { class: 'answer-label' }, 'Answer'), h('p', { class: 'text' }, report.answer)));
+}
+function section(title, content) {
+    return h('section', {}, h('h3', {}, title), content);
+}
+function renderReports(reports) {
+    const sections = [];
+    if (reports.mine.length > 0) {
+        sections.push(section('Your reports', h('ul', { class: 'list' }, ...reports.mine.map((r) => reportItem(r, true)))));
+    }
+    sections.push(section('Being worked on', reports.active.length > 0
+        ? h('ul', { class: 'list' }, ...reports.active.map((r) => reportItem(r, false)))
+        : note('Nothing is being worked on right now.')));
+    return sections;
+}
+function renderQa(items) {
+    if (items.length === 0)
+        return [note('No questions have been answered yet.')];
+    const entries = items.map((item) => h('li', {}, h('details', {}, h('summary', {}, item.question), h('p', { class: 'text' }, item.answer))));
+    return [h('ul', { class: 'list' }, ...entries)];
+}
+function listPanel(load, render) {
+    const element = h('div');
+    let latest = 0;
+    function show() {
+        const request = ++latest;
+        element.setAttribute('aria-busy', 'true');
+        element.replaceChildren(note('Loading...'));
+        void load().then((result) => {
+            if (request !== latest)
+                return;
+            element.removeAttribute('aria-busy');
+            if (result.ok) {
+                element.replaceChildren(...render(result.value));
+                return;
+            }
+            const retry = h('button', { type: 'button', class: 'secondary' }, 'Try again');
+            retry.addEventListener('click', show);
+            const text = result.reason === 'rate-limited' ? 'Too many requests. Please try again in a minute.' : 'This could not be loaded.';
+            element.replaceChildren(h('div', { class: 'failed' }, h('p', { class: 'message error' }, text), retry));
+        });
+    }
+    return { element, show };
+}
+export function createActivePanel(host) {
+    return listPanel(() => host.api.getReports(), renderReports);
+}
+export function createQaPanel(host) {
+    return listPanel(() => host.api.getQa(), renderQa);
+}