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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bro Code Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,249 @@
-# Temporary Holding Version
+# @bro-code/crawl-space
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm version](https://img.shields.io/npm/v/@bro-code/crawl-space.svg)](https://www.npmjs.com/package/@bro-code/crawl-space)
+[![license](https://img.shields.io/npm/l/@bro-code/crawl-space.svg)](./LICENSE)
+
+A help desk for any web app (bug reports, active issues, Q&A) as framework-free custom elements, themed, against a documented HTTP API.
+
+One call gives an app a dialog with three tabs:
+
+- **Submit**: a bug or a question, with the details that help (version, page, browser, OS and anything the app adds), shown before sending under an "Include these details" checkbox the user can untick.
+- **Active**: the signed-in user's own reports first, in every status and with the developer's answer, then everyone's reports being worked on.
+- **Q&A**: published questions and their answers.
+
+The elements live in a shadow DOM, so the page's CSS doesn't reach them and theirs doesn't leak out. It works with any library or none, has no runtime dependencies, and does nothing when imported. Without a `window` (server rendering), `createCrawlSpace` does nothing and returns a controller whose methods do nothing.
+
+## Installation
+
+```bash
+npm install @bro-code/crawl-space
+```
+
+## Usage
+
+Keep the settings in the app's `bro.config.json`:
+
+```json
+{
+  "crawlSpace": {
+    "api": "http://localhost:8080/api/crawl-space/my-app",
+    "theme": "brocode"
+  }
+}
+```
+
+A browser can't read that file at runtime, so import the section and pass it in, with the parts only code can supply (TypeScript needs `resolveJsonModule`, which `moduleResolution: "bundler"` turns on; Vite keeps only the imported section in the bundle):
+
+```ts
+import { createCrawlSpace } from '@bro-code/crawl-space';
+import { crawlSpace } from '../bro.config.json';
+
+const help = createCrawlSpace({
+  ...crawlSpace,
+  // The API's address can come from the app's env instead.
+  api: import.meta.env.VITE_API_URL ? `${import.meta.env.VITE_API_URL}/crawl-space/my-app` : crawlSpace.api,
+  getToken: () => localStorage.getItem('token'),
+  version: '1.4.0',
+});
+```
+
+A CommonJS build is included too: `const { createCrawlSpace } = require('@bro-code/crawl-space');`.
+
+Call it once, at startup. A second call (a dev server's hot reload) replaces the options and returns the same controller.
+
+There are three ways to open it:
+
+```ts
+help.open();        // the Submit tab
+help.open('qa');    // or 'active'
+help.close();
+```
+
+```html
+<!-- Anywhere in a template; its text is the label (the title when empty). -->
+<crawl-space-button tab="active">What's being fixed?</crawl-space-button>
+```
+
+```json
+{ "crawlSpace": { "api": "...", "floating": { "position": "bottom-right" } } }
+```
+
+`floating` adds a button fixed in a corner of the page. `<crawl-space-button floating>` does the same in a template.
+
+## Options
+
+### In `bro.config.json` (`CrawlSpaceConfig`)
+
+| Field | Default | |
+|---|---|---|
+| `api` | | Required. The API's base URL; the routes below go under it. |
+| `paths.reports` | `/reports` | The reports route. |
+| `paths.qa` | `/qa` | The Q&A route. |
+| `theme` | `default` | `default`, `brocode`, `rombie`, `taut-wad` or `custom`. See [Themes](#themes). |
+| `colors` | | With `theme: 'custom'`, any of the ten theme values over `default`'s. |
+| `floating.position` | `bottom-right` | Adds the floating button: `bottom-right`, `bottom-left`, `top-right` or `top-left`. |
+| `title` | `Help & bug reports` | The dialog's title and the buttons' default label. |
+| `maxLength` | `2000` | The longest description accepted. |
+
+### In code only (`CrawlSpaceOptions`)
+
+| Option | |
+|---|---|
+| `getToken` | `() => string \| null \| Promise<string \| null>`. The signed-in user's token, sent as `Authorization: Bearer <token>`; null when signed out. |
+| `version` | The app's version, sent as a detail. |
+| `scrubPath` | `(path) => string`. Takes anything private out of the page path (a room code, a token) before it is shown or sent. |
+| `getContext` | `() => Record<string, string \| CrawlSpaceDetail>`. More details, label to value, shown and sent after the built-in ones. A `{ value, editable: true }` detail is shown in a field the user can change or clear. |
+| `onOpenChange` | `(open) => void`, called when the dialog opens and closes (to pause an app's own keyboard or gamepad handling, say). |
+
+An invalid `api` throws a `TypeError`. Anything else that's invalid falls back to its default with a `console.warn`.
+
+### The details
+
+In order: Version, Page (`location.pathname` only, never the query or hash, through `scrubPath`), Browser (name and major version), OS (name only), then `getContext()`'s entries. Each label and value is cleaned with `sanitizeText`; empty ones and repeated labels are left out. brocodetech accepts up to 12 entries, labels up to 40 characters and values up to 200, and the package keeps to that.
+
+Only the app's own details can be editable, so the user can correct or remove something the app guessed (which game they were playing, say) while the built-in four stay as collected:
+
+```ts
+getContext: () => ({
+  Console: { value: 'NES', editable: true },
+  'Last game': { value: lastGameTitle, editable: true },
+}),
+```
+
+The field is sent as it reads when the report goes, cleaned the same way; a field left empty leaves that detail out. Unticking "Include these details" disables the fields and sends none of the details. An edit lasts while the dialog switches tabs, as long as the app's value for it stays the same; a sent report puts the app's values back.
+
+## Themes
+
+| | `default` | `brocode` | `rombie` | `taut-wad` |
+|---|---|---|---|---|
+| `background` | `#121417` | `#181818` | `#0a0a12` | `#181818` |
+| `surface` | `#1c1f24` | `#222222` | `#15141f` | `#222222` |
+| `text` | `#e8eaed` | `#ffffff` | `#f1eef9` | `#ffffff` |
+| `muted` | `#9aa0a6` | `#b0b0b0` | `#9a90bd` | `#b0b0b0` |
+| `border` | `#33373d` | `#3c3c3c` | `#302c47` | `#3c3c3c` |
+| `accent` | `#5b9cff` | `#7b9981` | `#ff2d78` | `#7b9981` |
+| `accentText` | `#0b1220` | `#ffffff` | `#12060d` | `#ffffff` |
+| `error` | `#ff6b6b` | `#ff5252` | `#ff5c5c` | `#ff5252` |
+| `success` | `#6fcf97` | `#96be4d` | `#00e5ff` | `#96be4d` |
+| `font` | `system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif` | `Roboto, sans-serif` | `system-ui, 'Segoe UI', Roboto, sans-serif` | `Roboto, sans-serif` |
+
+`custom` starts from `default`:
+
+```json
+{ "crawlSpace": { "api": "...", "theme": "custom", "colors": { "accent": "#e91e63", "font": "Georgia, serif" } } }
+```
+
+Each color is checked with `CSS.supports('color', ...)` and the font with `CSS.supports('font-family', ...)`; a missing or invalid one keeps `default`'s, with a warning for the invalid ones. An unknown theme is `default`, with a warning.
+
+## Restyling
+
+The theme is set as custom properties on each element, and a page's own rules win over them:
+
+```css
+crawl-space-button,
+crawl-space-dialog {
+  --cs-accent: #e91e63;
+}
+```
+
+The properties are `--cs-background`, `--cs-surface`, `--cs-text`, `--cs-muted`, `--cs-border`, `--cs-accent`, `--cs-accent-text`, `--cs-error`, `--cs-success` and `--cs-font`. The button itself is a part:
+
+```css
+crawl-space-button::part(button) {
+  border-radius: 0;
+  text-transform: uppercase;
+}
+```
+
+## Setup per library
+
+The elements are plain custom elements. Tell a framework's template compiler they aren't its components:
+
+**Vue** (`vite.config.ts`):
+
+```ts
+vue({
+  template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('crawl-space-') } },
+});
+```
+
+**Angular**: add `CUSTOM_ELEMENTS_SCHEMA` to the `schemas` of each standalone component (or module) whose template uses `<crawl-space-button>`.
+
+**React 19** renders custom elements as they are; declare the button for JSX once, in a `.d.ts`:
+
+```ts
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'crawl-space-button': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
+        tab?: 'submit' | 'active' | 'qa';
+        floating?: boolean;
+      };
+    }
+  }
+}
+```
+
+## HTTP API
+
+Any server can back it. brocodetech's `/api/crawl-space/:app` routes are the reference implementation. Every request sends `Accept: application/json`, and `Authorization: Bearer <token>` when `getToken` returns a token.
+
+### `POST {api}{paths.reports}`
+
+Sends a report.
+
+```json
+{ "type": "bug", "description": "The save is gone", "context": { "Version": "1.4.0", "Page": "/play" } }
+```
+
+- `type` is `bug` or `question`. `description` is cleaned with `sanitizeText` and at most `maxLength` long. `context` is left out when the user unticks the details.
+- `201` with `{ "id": 12 }` on success. `429` tells the user to try again in a minute; any other status is a failure, and the text is kept so they can resend.
+
+### `GET {api}{paths.reports}`
+
+```json
+{ "mine": [Report], "active": [Report] }
+```
+
+- `mine` is the signed-in user's reports in every status (brocodetech leaves out ones resolved or dismissed more than 30 days ago), empty when there's no token. Its `answer` is shown.
+- `active` is everyone else's reports being worked on.
+
+A `Report` is `{ id, type, status, description, answer, createdAt, updatedAt }`: `id` a number or string, `status` one of `new`, `in_progress`, `resolved` and `dismissed`, `answer` a string or null, and the dates ISO 8601.
+
+### `GET {api}{paths.qa}`
+
+An array of `{ id, question, answer, updatedAt }`.
+
+### What the client trusts
+
+Responses are checked: a malformed item is dropped, fields the contract doesn't name are ignored, and a malformed body is a failed load. Everything from the API and from users is rendered as text, never markup. The server stays the authority: it should validate and limit what it accepts, limit how often an address can post, and never put a reporter's account, email or details in a public response.
+
+An API on another origin than the site must allow the site's origin in CORS, for `GET` and `POST` with the `Content-Type` and `Authorization` headers.
+
+## API
+
+| Export | |
+|---|---|
+| `createCrawlSpace(options)` | Sets everything up and returns `{ open(tab?), close() }`. |
+| `sanitizeText(text, maxLength)` | Cleans text a user typed: NFC, no control, zero-width or bidi characters, `\n` line ends, runs of three or more blank lines collapsed to one, trimmed, and at most `maxLength` UTF-16 units (never ending in half of a surrogate pair). |
+| Types | `CrawlSpaceConfig`, `CrawlSpaceOptions`, `CrawlSpaceController`, `CrawlSpaceTab`, `CrawlSpaceTheme`, `CrawlSpaceColors`, `CrawlSpacePosition`, `CrawlSpaceDetail`, `CrawlSpaceContextEntry`, `CrawlSpaceSubmission`, `CrawlSpaceReport`, `CrawlSpaceReports`, `CrawlSpaceReportType`, `CrawlSpaceReportStatus`, `CrawlSpaceQaItem`. |
+
+The dialog is a native modal `<dialog>`: it sits above everything on the page, Escape closes it, focus stays inside while it's open and goes back to what opened it. The arrow keys, Home and End move between the tabs.
+
+## License
+
+MIT - see [LICENSE](./LICENSE).
+
+## Changelog
+
+### [2026.0.0] - 2026-11-04
+
+#### Added
+- Initial release.
+- `createCrawlSpace(options)`, with `open(tab?)` and `close()`, the `<crawl-space-button>` element and the floating button.
+- The Submit, Active and Q&A tabs, against the documented HTTP API.
+- Details from `getContext` the user can change or clear before sending (`{ value, editable: true }`).
+- The `default`, `brocode`, `rombie`, `taut-wad` and `custom` themes, the `--cs-*` properties and `::part(button)`.
+- `sanitizeText(text, maxLength)`.

package/dist/cjs/api.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.joinUrl = joinUrl;
+exports.createApiClient = createApiClient;
+const TYPES = ['bug', 'question'];
+const STATUSES = ['new', 'in_progress', 'resolved', 'dismissed'];
+const FAILED = { ok: false, reason: 'failed' };
+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;
+}
+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/cjs/button.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineButton = defineButton;
+const css_js_1 = require("./css.js");
+const dom_js_1 = require("./dom.js");
+const options_js_1 = require("./options.js");
+function defineButton(getHost) {
+    return class CrawlSpaceButton extends HTMLElement {
+        root;
+        label = document.createTextNode('');
+        constructor() {
+            super();
+            this.root = this.attachShadow({ mode: 'open', delegatesFocus: true });
+            const button = (0, dom_js_1.h)('button', { type: 'button', part: 'button' }, (0, dom_js_1.h)('slot', {}, this.label));
+            button.addEventListener('click', () => getHost().open((0, options_js_1.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, css_js_1.BUTTON_CSS);
+            this.label.data = host.options.title;
+            if (this.hasAttribute('floating'))
+                this.dataset.position = host.options.floating ?? 'bottom-right';
+        }
+    };
+}

package/dist/cjs/context.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTEXT_LIMITS = void 0;
+exports.collectContext = collectContext;
+const sanitize_js_1 = require("./sanitize.js");
+exports.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';
+}
+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 === exports.CONTEXT_LIMITS.maxEntries)
+            break;
+        if (typeof rawValue !== 'string')
+            continue;
+        const label = (0, sanitize_js_1.sanitizeText)(rawLabel, exports.CONTEXT_LIMITS.maxKeyLength);
+        const value = (0, sanitize_js_1.sanitizeText)(rawValue, exports.CONTEXT_LIMITS.maxValueLength);
+        if (label === '' || value === '' || seen.has(label))
+            continue;
+        seen.add(label);
+        entries.push({ label, value, editable });
+    }
+    return entries;
+}

package/dist/cjs/crawl-space.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCrawlSpace = createCrawlSpace;
+const api_js_1 = require("./api.js");
+const button_js_1 = require("./button.js");
+const dialog_js_1 = require("./dialog.js");
+const options_js_1 = require("./options.js");
+const styles_js_1 = require("./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);
+}
+function createCrawlSpace(options) {
+    if (typeof window === 'undefined' || typeof customElements === 'undefined')
+        return NOOP;
+    const resolved = (0, options_js_1.resolveOptions)(options);
+    const target = window;
+    const existing = target[KEY];
+    if (existing) {
+        existing.options = resolved;
+        existing.api = (0, api_js_1.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: (0, api_js_1.createApiClient)(resolved),
+        styles: (0, styles_js_1.createStyles)(resolved.colors),
+        connected: new Set(),
+        dialog: null,
+        floating: null,
+        open: (tab) => openDialog(state, tab),
+        controller: {
+            open: (tab) => openDialog(state, (0, options_js_1.toTab)(tab)),
+            close: () => state.dialog?.hide(),
+        },
+    };
+    target[KEY] = state;
+    if (!customElements.get('crawl-space-dialog'))
+        customElements.define('crawl-space-dialog', (0, dialog_js_1.defineDialog)(getState));
+    if (!customElements.get('crawl-space-button'))
+        customElements.define('crawl-space-button', (0, button_js_1.defineButton)(getState));
+    syncFloating(state);
+    return state.controller;
+}

package/dist/cjs/css.js

@@ -0,0 +1,104 @@
+"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; }
+`;