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

package/dist/cjs/css.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DIALOG_CSS = exports.BUTTON_CSS = void 0;
+exports.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; }
+`;
+exports.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/cjs/dialog.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineDialog = defineDialog;
+const css_js_1 = require("./css.js");
+const dom_js_1 = require("./dom.js");
+const lists_js_1 = require("./lists.js");
+const submit_js_1 = require("./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;
+}
+function defineDialog(getHost) {
+    return class CrawlSpaceDialog extends HTMLElement {
+        root;
+        dialog;
+        heading = (0, dom_js_1.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 = (0, dom_js_1.h)('button', { type: 'button', class: 'close', 'aria-label': 'Close' }, closeIcon());
+            close.addEventListener('click', () => this.hide());
+            const tablist = (0, dom_js_1.h)('div', { role: 'tablist', 'aria-labelledby': 'cs-title' });
+            tablist.addEventListener('keydown', (event) => this.onTabKey(event));
+            this.dialog = (0, dom_js_1.h)('dialog', { 'aria-labelledby': 'cs-title' }, (0, dom_js_1.h)('header', {}, this.heading, close), tablist);
+            const panels = { submit: (0, submit_js_1.createSubmitPanel)(host), active: (0, lists_js_1.createActivePanel)(host), qa: (0, lists_js_1.createQaPanel)(host) };
+            for (const [tab, label] of TABS) {
+                const button = (0, dom_js_1.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 = (0, dom_js_1.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, css_js_1.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/cjs/dom.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.h = h;
+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/cjs/host.js

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

package/dist/cjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeText = exports.createCrawlSpace = void 0;
+var crawl_space_js_1 = require("./crawl-space.js");
+Object.defineProperty(exports, "createCrawlSpace", { enumerable: true, get: function () { return crawl_space_js_1.createCrawlSpace; } });
+var sanitize_js_1 = require("./sanitize.js");
+Object.defineProperty(exports, "sanitizeText", { enumerable: true, get: function () { return sanitize_js_1.sanitizeText; } });

package/dist/cjs/lists.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createActivePanel = createActivePanel;
+exports.createQaPanel = createQaPanel;
+const dom_js_1 = require("./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 (0, dom_js_1.h)('p', { class: 'note' }, text);
+}
+function dateOf(iso) {
+    const label = new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+    return (0, dom_js_1.h)('time', { datetime: iso }, label);
+}
+function reportItem(report, own) {
+    return (0, dom_js_1.h)('li', { class: 'item' }, (0, dom_js_1.h)('div', { class: 'meta' }, (0, dom_js_1.h)('span', { class: 'badge' }, TYPE_LABELS[report.type]), own && (0, dom_js_1.h)('span', { class: `badge ${report.status}` }, STATUS_LABELS[report.status]), dateOf(report.createdAt)), (0, dom_js_1.h)('p', { class: 'text' }, report.description), own &&
+        report.answer !== null &&
+        (0, dom_js_1.h)('div', { class: 'answer' }, (0, dom_js_1.h)('div', { class: 'answer-label' }, 'Answer'), (0, dom_js_1.h)('p', { class: 'text' }, report.answer)));
+}
+function section(title, content) {
+    return (0, dom_js_1.h)('section', {}, (0, dom_js_1.h)('h3', {}, title), content);
+}
+function renderReports(reports) {
+    const sections = [];
+    if (reports.mine.length > 0) {
+        sections.push(section('Your reports', (0, dom_js_1.h)('ul', { class: 'list' }, ...reports.mine.map((r) => reportItem(r, true)))));
+    }
+    sections.push(section('Being worked on', reports.active.length > 0
+        ? (0, dom_js_1.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) => (0, dom_js_1.h)('li', {}, (0, dom_js_1.h)('details', {}, (0, dom_js_1.h)('summary', {}, item.question), (0, dom_js_1.h)('p', { class: 'text' }, item.answer))));
+    return [(0, dom_js_1.h)('ul', { class: 'list' }, ...entries)];
+}
+function listPanel(load, render) {
+    const element = (0, dom_js_1.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 = (0, dom_js_1.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((0, dom_js_1.h)('div', { class: 'failed' }, (0, dom_js_1.h)('p', { class: 'message error' }, text), retry));
+        });
+    }
+    return { element, show };
+}
+function createActivePanel(host) {
+    return listPanel(() => host.api.getReports(), renderReports);
+}
+function createQaPanel(host) {
+    return listPanel(() => host.api.getQa(), renderQa);
+}

package/dist/cjs/options.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toTab = toTab;
+exports.resolveOptions = resolveOptions;
+const themes_js_1 = require("./themes.js");
+const POSITIONS = ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+const TABS = ['submit', 'active', 'qa'];
+function warn(message) {
+    console.warn(`[crawl-space] ${message}`);
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function text(name, value, fallback) {
+    if (value === undefined)
+        return fallback;
+    if (typeof value === 'string' && value.trim() !== '')
+        return value;
+    warn(`"${name}" must be a non-empty string; using "${fallback}".`);
+    return fallback;
+}
+function fn(name, value) {
+    if (value === undefined || typeof value === 'function')
+        return value;
+    warn(`"${name}" must be a function; ignoring it.`);
+    return undefined;
+}
+function floating(value) {
+    if (value === undefined)
+        return null;
+    if (!isRecord(value)) {
+        warn('"floating" must be an object; no floating button.');
+        return null;
+    }
+    const position = value.position ?? 'bottom-right';
+    if (POSITIONS.includes(position))
+        return position;
+    warn(`Unknown floating position "${String(position)}"; using "bottom-right".`);
+    return 'bottom-right';
+}
+function toTab(value) {
+    if (TABS.includes(value))
+        return value;
+    if (value !== undefined && value !== null)
+        warn(`Unknown tab "${String(value)}"; using "submit".`);
+    return 'submit';
+}
+function resolveOptions(options) {
+    if (!isRecord(options) || typeof options.api !== 'string' || options.api.trim() === '') {
+        throw new TypeError('[crawl-space] "api" must be a non-empty string.');
+    }
+    let paths = {};
+    if (isRecord(options.paths))
+        paths = options.paths;
+    else if (options.paths !== undefined)
+        warn('"paths" must be an object; using the default paths.');
+    let maxLength = 2000;
+    if (Number.isInteger(options.maxLength) && options.maxLength > 0)
+        maxLength = options.maxLength;
+    else if (options.maxLength !== undefined)
+        warn(`"maxLength" must be a positive whole number; using ${maxLength}.`);
+    let version;
+    if (typeof options.version === 'string')
+        version = options.version;
+    else if (options.version !== undefined)
+        warn('"version" must be a string; ignoring it.');
+    return {
+        api: options.api,
+        paths: { reports: text('paths.reports', paths.reports, '/reports'), qa: text('paths.qa', paths.qa, '/qa') },
+        colors: (0, themes_js_1.resolveColors)(options),
+        floating: floating(options.floating),
+        title: text('title', options.title, 'Help & bug reports'),
+        maxLength,
+        version,
+        getToken: fn('getToken', options.getToken),
+        scrubPath: fn('scrubPath', options.scrubPath),
+        getContext: fn('getContext', options.getContext),
+        onOpenChange: fn('onOpenChange', options.onOpenChange),
+    };
+}

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/sanitize.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeText = sanitizeText;
+const INVISIBLE = /[\u0000-\u0008\u000b-\u001f\u007f-\u009f\u200b-\u200d\u2060\ufeff\u202a-\u202e\u2066-\u2069]/g;
+const BLANK_RUN = /\n(?:[ \t]*\n){3,}/g;
+function sanitizeText(text, maxLength) {
+    let clean = text
+        .normalize('NFC')
+        .replace(/\r\n/g, '\n')
+        .replace(INVISIBLE, '')
+        .replace(BLANK_RUN, '\n\n')
+        .trim();
+    if (clean.length > maxLength) {
+        let end = Math.max(0, maxLength);
+        const last = clean.charCodeAt(end - 1);
+        if (last >= 0xd800 && last <= 0xdbff)
+            end -= 1;
+        clean = clean.slice(0, end).trimEnd();
+    }
+    return clean;
+}

package/dist/cjs/styles.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeCss = themeCss;
+exports.createStyles = createStyles;
+const PROPERTIES = {
+    background: '--cs-background',
+    surface: '--cs-surface',
+    text: '--cs-text',
+    muted: '--cs-muted',
+    border: '--cs-border',
+    accent: '--cs-accent',
+    accentText: '--cs-accent-text',
+    error: '--cs-error',
+    success: '--cs-success',
+    font: '--cs-font',
+};
+function themeCss(colors) {
+    const lines = Object.keys(PROPERTIES).map((key) => `${PROPERTIES[key]}: ${colors[key]};`);
+    return `:host { ${lines.join(' ')} }`;
+}
+function supportsConstructable() {
+    return (typeof CSSStyleSheet !== 'undefined' &&
+        'replaceSync' in CSSStyleSheet.prototype &&
+        typeof ShadowRoot !== 'undefined' &&
+        'adoptedStyleSheets' in ShadowRoot.prototype);
+}
+function sheetFor(css) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    return sheet;
+}
+function styleIn(root, name) {
+    let style = root.querySelector(`style[data-cs="${name}"]`);
+    if (!style) {
+        style = document.createElement('style');
+        style.dataset.cs = name;
+        root.prepend(style);
+    }
+    return style;
+}
+function createStyles(colors) {
+    if (supportsConstructable()) {
+        const theme = sheetFor(themeCss(colors));
+        const sheets = new Map();
+        return {
+            apply(root, css) {
+                let sheet = sheets.get(css);
+                if (!sheet) {
+                    sheet = sheetFor(css);
+                    sheets.set(css, sheet);
+                }
+                root.adoptedStyleSheets = [sheet, theme];
+            },
+            setColors(next) {
+                theme.replaceSync(themeCss(next));
+            },
+        };
+    }
+    let theme = themeCss(colors);
+    return {
+        apply(root, css) {
+            styleIn(root, 'theme').textContent = theme;
+            styleIn(root, 'base').textContent = css;
+        },
+        setColors(next) {
+            theme = themeCss(next);
+        },
+    };
+}

package/dist/cjs/submit.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSubmitPanel = createSubmitPanel;
+const context_js_1 = require("./context.js");
+const dom_js_1 = require("./dom.js");
+const sanitize_js_1 = require("./sanitize.js");
+const PROMPTS = { bug: 'What went wrong?', question: 'What would you like to know?' };
+function createSubmitPanel(host) {
+    const bug = (0, dom_js_1.h)('input', { type: 'radio', name: 'cs-type', value: 'bug', checked: true });
+    const question = (0, dom_js_1.h)('input', { type: 'radio', name: 'cs-type', value: 'question' });
+    const prompt = (0, dom_js_1.h)('label', { class: 'field-label', for: 'cs-description' });
+    const description = (0, dom_js_1.h)('textarea', { id: 'cs-description', rows: '6' });
+    const counter = (0, dom_js_1.h)('div', { class: 'counter' });
+    const include = (0, dom_js_1.h)('input', { type: 'checkbox', checked: true });
+    const details = (0, dom_js_1.h)('ul', { 'aria-label': 'Details sent with it' });
+    const detailsBox = (0, dom_js_1.h)('div', { class: 'details' }, (0, dom_js_1.h)('label', {}, include, 'Include these details'), details);
+    const message = (0, dom_js_1.h)('p', { class: 'message', role: 'status' });
+    const send = (0, dom_js_1.h)('button', { type: 'submit', class: 'primary' }, 'Send');
+    const form = (0, dom_js_1.h)('form', {}, (0, dom_js_1.h)('fieldset', { class: 'kinds' }, (0, dom_js_1.h)('legend', { class: 'hidden-label' }, 'Type'), (0, dom_js_1.h)('label', {}, bug, (0, dom_js_1.h)('span', {}, 'Bug')), (0, dom_js_1.h)('label', {}, question, (0, dom_js_1.h)('span', {}, 'Question'))), prompt, description, counter, detailsBox, (0, dom_js_1.h)('div', { class: 'actions' }, message, send));
+    let shown = [];
+    function say(kind, text) {
+        message.className = `message ${kind}`.trim();
+        message.textContent = text;
+    }
+    function update() {
+        prompt.textContent = question.checked ? PROMPTS.question : PROMPTS.bug;
+        counter.textContent = `${description.value.length} / ${host.options.maxLength}`;
+        details.classList.toggle('off', !include.checked);
+        for (const { field } of shown)
+            if (field)
+                field.disabled = !include.checked;
+    }
+    function contextToSend() {
+        const pairs = shown.flatMap(({ entry, field }) => {
+            const value = field ? (0, sanitize_js_1.sanitizeText)(field.value, context_js_1.CONTEXT_LIMITS.maxValueLength) : entry.value;
+            return value === '' ? [] : [[entry.label, value]];
+        });
+        return pairs.length > 0 ? Object.fromEntries(pairs) : undefined;
+    }
+    form.addEventListener('change', update);
+    description.addEventListener('input', () => {
+        say('', '');
+        update();
+    });
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        const text = (0, sanitize_js_1.sanitizeText)(description.value, host.options.maxLength);
+        if (text === '') {
+            say('error', 'Write something first.');
+            description.focus();
+            return;
+        }
+        const type = question.checked ? 'question' : 'bug';
+        const context = include.checked ? contextToSend() : undefined;
+        send.disabled = true;
+        say('', 'Sending...');
+        void host.api.submitReport({ type, description: text, ...(context && { context }) }).then((result) => {
+            send.disabled = false;
+            if (result.ok) {
+                form.reset();
+                update();
+                say('success', `Thanks! Your ${type === 'bug' ? 'report' : 'question'} was sent.`);
+            }
+            else if (result.reason === 'rate-limited') {
+                say('error', 'Too many sent in a short time. Please try again in a minute.');
+            }
+            else {
+                say('error', 'It could not be sent. Please try again.');
+            }
+        });
+    });
+    return {
+        element: form,
+        show() {
+            const before = new Map(shown.map((detail) => [detail.entry.label, detail]));
+            shown = (0, context_js_1.collectContext)(host.options).map((entry) => {
+                if (!entry.editable)
+                    return { entry };
+                const field = (0, dom_js_1.h)('input', { type: 'text', value: entry.value, maxlength: String(context_js_1.CONTEXT_LIMITS.maxValueLength) });
+                const previous = before.get(entry.label);
+                if (previous?.field && previous.entry.value === entry.value)
+                    field.value = previous.field.value;
+                return { entry, field };
+            });
+            details.replaceChildren(...shown.map(({ entry, field }) => field
+                ? (0, dom_js_1.h)('li', { class: 'editable' }, (0, dom_js_1.h)('label', {}, (0, dom_js_1.h)('span', { class: 'label' }, `${entry.label}: `), field))
+                : (0, dom_js_1.h)('li', {}, (0, dom_js_1.h)('span', { class: 'label' }, `${entry.label}: `), entry.value)));
+            detailsBox.hidden = shown.length === 0;
+            update();
+        },
+        refresh() {
+            description.maxLength = host.options.maxLength;
+            update();
+        },
+    };
+}