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

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,101 @@
+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; }
+`;

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);
+}

package/dist/esm/options.js

@@ -0,0 +1,76 @@
+import { resolveColors } from './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';
+}
+export function toTab(value) {
+    if (TABS.includes(value))
+        return value;
+    if (value !== undefined && value !== null)
+        warn(`Unknown tab "${String(value)}"; using "submit".`);
+    return 'submit';
+}
+export 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: 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/esm/package.json

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

package/dist/esm/sanitize.js

@@ -0,0 +1,18 @@
+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;
+export 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/esm/styles.js

@@ -0,0 +1,65 @@
+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',
+};
+export 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;
+}
+export 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);
+        },
+    };
+}