@north-light/crouter 0.3.198 → 0.3.200

package/dist/pages/elements/pages.d.ts

@@ -1,30 +0,0 @@
-/**
- * `<crtr-pages>` / `<crtr-page>` — the page's own pager, and the only thing that submits.
- *
- * A response-bearing page wraps its slots in exactly one `<crtr-pages>` containing one or
- * more `<crtr-page>` steps. This element shows one step at a time, carries the step
- * progress and the forward/back affordances, and renders the submit affordance on the
- * final step — the in-document chrome, and nothing else. Dismiss and save are host chrome
- * (a frame around the page, not markup inside it) and never appear here.
- *
- * **Flipping steps is the same motion as flipping tickets, one level down.** The inbox is
- * a pager over pending pages; this is a pager over the steps of one page. So the grammar is
- * deliberately the narrow one both levels share — go to the next unit of work, go back to
- * the previous one, submit — with no third way to move. `n` / `p` are the keys, matching the
- * terminal page panel's within-page motion (`src/clients/inbox/tui/input.ts`), because the
- * kit's `j` / `k` / `x` / `c` belong to the items *inside* a slot and a pager that stole them
- * would make one keystroke mean two levels at once. Submit is `⌘`/`Ctrl` + `Enter` — the
- * inbox's own submit chord, unchanged, because submitting an answer is literally the same
- * act at both levels. The step dots are an indicator, not a control: a page is answered by
- * walking it, not by jumping around it.
- *
- * A single-step page renders no pager chrome at all — no progress, no forward/back — just
- * the submit affordance, because there is nothing to flip.
- *
- * Both elements paint entirely through `--crtr-page-*` component tokens — the same element
- * scope `bundle.css` gives `crtr-pages` and `crtr-page`, because a person looking at the page
- * sees one thing. The pager's buttons are the bundle's ordinary buttons, so their focus ring
- * and their motion chain through the shared `--crtr-control-*` family before falling back to
- * the kit default.
- */
-export {};

package/dist/pages/elements/pages.js

@@ -1,377 +0,0 @@
-/**
- * `<crtr-pages>` / `<crtr-page>` — the page's own pager, and the only thing that submits.
- *
- * A response-bearing page wraps its slots in exactly one `<crtr-pages>` containing one or
- * more `<crtr-page>` steps. This element shows one step at a time, carries the step
- * progress and the forward/back affordances, and renders the submit affordance on the
- * final step — the in-document chrome, and nothing else. Dismiss and save are host chrome
- * (a frame around the page, not markup inside it) and never appear here.
- *
- * **Flipping steps is the same motion as flipping tickets, one level down.** The inbox is
- * a pager over pending pages; this is a pager over the steps of one page. So the grammar is
- * deliberately the narrow one both levels share — go to the next unit of work, go back to
- * the previous one, submit — with no third way to move. `n` / `p` are the keys, matching the
- * terminal page panel's within-page motion (`src/clients/inbox/tui/input.ts`), because the
- * kit's `j` / `k` / `x` / `c` belong to the items *inside* a slot and a pager that stole them
- * would make one keystroke mean two levels at once. Submit is `⌘`/`Ctrl` + `Enter` — the
- * inbox's own submit chord, unchanged, because submitting an answer is literally the same
- * act at both levels. The step dots are an indicator, not a control: a page is answered by
- * walking it, not by jumping around it.
- *
- * A single-step page renders no pager chrome at all — no progress, no forward/back — just
- * the submit affordance, because there is nothing to flip.
- *
- * Both elements paint entirely through `--crtr-page-*` component tokens — the same element
- * scope `bundle.css` gives `crtr-pages` and `crtr-page`, because a person looking at the page
- * sees one thing. The pager's buttons are the bundle's ordinary buttons, so their focus ring
- * and their motion chain through the shared `--crtr-control-*` family before falling back to
- * the kit default.
- */
-import { focusRingStyle } from '../controls.js';
-import { registerElement } from '../register.js';
-import { reportSlotResponses } from '../responses.js';
-function hostBridge() {
-    return window.crtr;
-}
-const NO_HOST_REASON = 'Submit is unavailable — this page is not connected to a host.';
-const PAGE_STYLE = `
-  :host {
-    display: block;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  [part="page"] {
-    display: grid;
-    gap: var(--crtr-page-step-gap, var(--crtr-space-3));
-  }
-
-  /* A step takes focus programmatically when the pager flips to it, so it wears no ring by
-     default — a host that wants one sets the outline rather than patching around it. The
-     pager focuses the element itself, not the inner div, so the rule has to sit on the host:
-     on [part="page"] it would never match and every step change would paint a UA ring. */
-  :host(:focus) {
-    outline: var(--crtr-page-step-focus-outline, none);
-  }
-`;
-const PAGES_STYLE = `
-  :host {
-    display: block;
-  }
-
-  [part="container"] {
-    display: grid;
-    gap: var(--crtr-page-container-gap, var(--crtr-space-4));
-  }
-
-  [part="chrome"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--crtr-page-chrome-gap, var(--crtr-space-3));
-    padding-top: var(--crtr-page-chrome-padding-top, var(--crtr-space-3));
-    border-top: var(--crtr-page-chrome-border-width, 1px)
-      var(--crtr-page-chrome-border-style, solid)
-      var(--crtr-page-chrome-border-color, var(--crtr-color-border));
-  }
-
-  [part="container"][data-steps="1"] [part="chrome"] {
-    justify-content: flex-end;
-  }
-
-  [part="progress"] {
-    display: flex;
-    align-items: center;
-    gap: var(--crtr-page-progress-gap, var(--crtr-space-2));
-    color: var(--crtr-page-progress-text-color, var(--crtr-color-text-muted));
-  }
-
-  [part="progress-track"] {
-    display: flex;
-    align-items: center;
-    gap: var(--crtr-page-progress-track-gap, var(--crtr-space-1));
-  }
-
-  [part="progress-step"] {
-    width: var(--crtr-page-progress-step-width, var(--crtr-space-2));
-    height: var(--crtr-page-progress-step-height, var(--crtr-space-1));
-    border-radius: var(--crtr-page-progress-step-radius, var(--crtr-radius-small));
-    background: var(--crtr-page-progress-step-fill, var(--crtr-color-border));
-  }
-
-  [part="progress-step"][data-state="complete"] {
-    background: var(--crtr-page-progress-step-complete-fill, var(--crtr-color-text-muted));
-  }
-
-  [part="progress-step"][data-state="current"] {
-    width: var(--crtr-page-progress-step-current-width, var(--crtr-space-4));
-    background: var(--crtr-page-progress-step-current-fill, var(--crtr-color-accent));
-  }
-
-  [part="actions"] {
-    display: flex;
-    align-items: center;
-    gap: var(--crtr-page-actions-gap, var(--crtr-space-2));
-  }
-
-  button {
-    font: var(--crtr-page-button-font, inherit);
-    color: var(--crtr-page-button-text-color, var(--crtr-color-text));
-    background: var(--crtr-page-button-fill, var(--crtr-color-surface));
-    border: var(--crtr-page-button-border-width, 1px)
-      var(--crtr-page-button-border-style, solid)
-      var(--crtr-page-button-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-page-button-radius, var(--crtr-radius-small));
-    padding: var(--crtr-page-button-padding, var(--crtr-space-2) var(--crtr-space-3));
-    cursor: pointer;
-    transition: color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease)),
-      background-color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease)),
-      border-color var(--crtr-page-button-transition, var(--crtr-control-transition, 120ms ease));
-  }
-
-  button:hover:not(:disabled) {
-    background: var(--crtr-page-button-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-${focusRingStyle({ scope: 'page-button' }, 'button')}
-  button:disabled {
-    cursor: not-allowed;
-    opacity: var(--crtr-page-button-disabled-opacity, var(--crtr-control-disabled-opacity, 0.5));
-  }
-
-  [part="submit"] {
-    color: var(--crtr-page-submit-text-color, var(--crtr-color-accent-contrast));
-    background: var(--crtr-page-submit-fill, var(--crtr-color-accent));
-    border-color: var(--crtr-page-submit-border-color, var(--crtr-color-accent));
-  }
-
-  /* Mixing the accent toward the text colour darkens on a light token set and lightens on a
-     dark one — a brightness filter moves the wrong way on one of them. */
-  [part="submit"]:hover:not(:disabled) {
-    background: var(--crtr-page-submit-hover-fill, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
-    border-color: var(--crtr-page-submit-hover-border-color, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
-  }
-
-  [part="notice"] {
-    color: var(--crtr-page-notice-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-page-notice-font-size, 0.875em);
-  }
-
-  [part="notice"][data-state="error"] {
-    color: var(--crtr-page-notice-error-text-color, var(--crtr-color-danger));
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-`;
-/** One step of a page. Bare on its own; the pager shows and hides it. */
-class CrtrPageElement extends HTMLElement {
-    constructor() {
-        super();
-        const root = this.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = PAGE_STYLE;
-        const page = document.createElement('div');
-        page.part.add('page');
-        page.append(document.createElement('slot'));
-        root.append(style, page);
-    }
-}
-class CrtrPagesElement extends HTMLElement {
-    static observedAttributes = ['disabled', 'submit-label'];
-    #steps = [];
-    #index = 0;
-    #state = 'idle';
-    #error = null;
-    #container = document.createElement('div');
-    #chrome = document.createElement('div');
-    #progress = document.createElement('div');
-    #progressLabel = document.createElement('span');
-    #progressTrack = document.createElement('span');
-    #actions = document.createElement('div');
-    #notice = document.createElement('span');
-    #prev = document.createElement('button');
-    #next = document.createElement('button');
-    #submit = document.createElement('button');
-    #children = new MutationObserver(() => {
-        this.#collectSteps();
-        this.#render();
-    });
-    constructor() {
-        super();
-        const root = this.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = PAGES_STYLE;
-        const steps = document.createElement('div');
-        steps.part.add('steps');
-        steps.append(document.createElement('slot'));
-        this.#container.part.add('container');
-        this.#chrome.part.add('chrome');
-        this.#progress.part.add('progress');
-        this.#progress.setAttribute('role', 'status');
-        this.#progress.setAttribute('aria-live', 'polite');
-        this.#progressLabel.part.add('progress-label');
-        this.#progressTrack.part.add('progress-track');
-        this.#progressTrack.setAttribute('aria-hidden', 'true');
-        this.#progress.append(this.#progressLabel, this.#progressTrack);
-        this.#prev.part.add('prev');
-        this.#prev.type = 'button';
-        this.#prev.textContent = 'Back';
-        this.#prev.addEventListener('click', () => this.#go(-1));
-        this.#next.part.add('next');
-        this.#next.type = 'button';
-        this.#next.textContent = 'Next';
-        this.#next.addEventListener('click', () => this.#go(1));
-        this.#submit.part.add('submit');
-        this.#submit.type = 'button';
-        this.#submit.addEventListener('click', () => void this.#runSubmit());
-        this.#notice.part.add('notice');
-        this.#actions.part.add('actions');
-        this.#actions.append(this.#notice, this.#prev, this.#next, this.#submit);
-        this.#chrome.append(this.#progress, this.#actions);
-        this.#container.append(steps, this.#chrome);
-        root.append(style, this.#container);
-    }
-    connectedCallback() {
-        this.#collectSteps();
-        this.#children.observe(this, { childList: true });
-        this.ownerDocument.addEventListener('keydown', this.#onKeydown);
-        this.#render();
-    }
-    disconnectedCallback() {
-        this.#children.disconnect();
-        this.ownerDocument.removeEventListener('keydown', this.#onKeydown);
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            this.#render();
-    }
-    #collectSteps() {
-        this.#steps = [...this.children].filter((child) => child instanceof HTMLElement && child.tagName === 'CRTR-PAGE');
-        for (const step of this.#steps) {
-            if (!step.hasAttribute('tabindex'))
-                step.setAttribute('tabindex', '-1');
-        }
-        this.#index = Math.min(this.#index, Math.max(0, this.#steps.length - 1));
-    }
-    get #isFinalStep() {
-        return this.#index >= this.#steps.length - 1;
-    }
-    #go(delta, focus = true) {
-        const next = this.#index + delta;
-        if (next < 0 || next >= this.#steps.length || next === this.#index)
-            return;
-        this.#index = next;
-        this.#error = null;
-        this.#render();
-        if (focus)
-            this.#steps[this.#index]?.focus();
-    }
-    async #runSubmit() {
-        if (this.#state !== 'idle' || this.hasAttribute('disabled') || !this.#isFinalStep)
-            return;
-        const bridge = hostBridge();
-        if (typeof bridge?.submit !== 'function') {
-            this.#error = NO_HOST_REASON;
-            this.#render();
-            return;
-        }
-        this.#state = 'submitting';
-        this.#error = null;
-        this.#render();
-        try {
-            // The host has only heard from the slots the person changed. A submit sends the whole
-            // page, so every response-bearing slot reports what it is currently showing first —
-            // an untouched slot's answer is what it shows, not an omission.
-            reportSlotResponses();
-            await bridge.submit();
-            this.#state = 'submitted';
-        }
-        catch (error) {
-            this.#state = 'idle';
-            this.#error = error instanceof Error ? error.message : 'Submit failed.';
-        }
-        this.#render();
-    }
-    #onKeydown = (event) => {
-        if (event.defaultPrevented)
-            return;
-        const path = event.composedPath();
-        // One `<crtr-pages>` per document, so the pager listens document-wide — but never steals
-        // a key that belongs to another pager's subtree (a page rendering a page).
-        if (path.some((node) => node instanceof HTMLElement && node.tagName === 'CRTR-PAGES' && node !== this))
-            return;
-        // The submit chord is modified, so it cannot type a character and fires even from a
-        // textarea — exactly the rule the inbox's own ⌘↵ follows.
-        if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-            if (!this.#isFinalStep)
-                return;
-            event.preventDefault();
-            void this.#runSubmit();
-            return;
-        }
-        if (event.metaKey || event.ctrlKey || event.altKey || isTextEntry(path))
-            return;
-        const key = event.key.toLowerCase();
-        if (key !== 'n' && key !== 'p')
-            return;
-        event.preventDefault();
-        this.#go(key === 'n' ? 1 : -1);
-    };
-    #render() {
-        const total = this.#steps.length;
-        const multiStep = total > 1;
-        const current = Math.min(this.#index, Math.max(0, total - 1));
-        for (const [position, step] of this.#steps.entries()) {
-            step.toggleAttribute('hidden', position !== current);
-        }
-        this.#container.dataset['steps'] = String(Math.max(1, total));
-        this.#container.dataset['step'] = String(current + 1);
-        this.#progress.hidden = !multiStep;
-        if (multiStep) {
-            const label = this.#steps[current]?.getAttribute('label')?.trim();
-            this.#progressLabel.textContent = label
-                ? `Step ${current + 1} of ${total} · ${label}`
-                : `Step ${current + 1} of ${total}`;
-            this.#progressTrack.replaceChildren(...this.#steps.map((_step, position) => {
-                const dot = document.createElement('span');
-                dot.part.add('progress-step');
-                dot.dataset['state'] = position === current ? 'current' : position < current ? 'complete' : 'upcoming';
-                return dot;
-            }));
-        }
-        this.#prev.hidden = !multiStep;
-        this.#prev.disabled = current === 0;
-        this.#next.hidden = !multiStep || this.#isFinalStep;
-        this.#next.disabled = false;
-        this.#submit.hidden = !this.#isFinalStep;
-        const bridgeReady = typeof hostBridge()?.submit === 'function';
-        this.#submit.disabled = !bridgeReady || this.#state !== 'idle' || this.hasAttribute('disabled');
-        this.#submit.textContent =
-            this.#state === 'submitting'
-                ? 'Submitting…'
-                : this.#state === 'submitted'
-                    ? 'Submitted'
-                    : this.getAttribute('submit-label')?.trim() || 'Submit';
-        const notice = this.#error ??
-            (this.#state === 'submitted'
-                ? 'Your response was submitted.'
-                : !bridgeReady && this.#isFinalStep
-                    ? NO_HOST_REASON
-                    : null);
-        this.#notice.hidden = notice === null;
-        this.#notice.textContent = notice ?? '';
-        this.#notice.dataset['state'] = this.#error === null ? 'info' : 'error';
-    }
-}
-/** A key typed into writing is writing, never navigation. */
-function isTextEntry(path) {
-    return path.some((node) => node instanceof HTMLElement &&
-        (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement || node.isContentEditable));
-}
-registerElement('crtr-page', CrtrPageElement);
-registerElement('crtr-pages', CrtrPagesElement);

package/dist/pages/elements/slot.d.ts

@@ -1,26 +0,0 @@
-/**
- * `<crtr-slot>` — the one escape element, for kinds crtr does not own.
- *
- * A page may carry a slot whose `kind` belongs to the product hosting the page (a Northlight
- * workspace component, say) rather than to this kit. crtr validated only that such a slot has
- * an id, a kind, and an object config; it never invents an element for a kind it cannot
- * render. So every one of them arrives as
- * `<crtr-slot kind="product-kind" slot-id="…"><script type="application/json">…</script></crtr-slot>`,
- * and this element does exactly two things: ask the host to render the kind into a mount
- * point, and — when the host has no renderer for it, or there is no host at all — say so by
- * name instead of leaving a hole in the page.
- *
- * The mount point is a light-DOM child, surfaced through the shadow root's `<slot>`. Host
- * content styles itself from the document it is mounted into, and putting it behind this
- * element's shadow boundary would cut it off from that; the JSON config child stays where it
- * is, untouched, so a re-mount reads the same config.
- *
- * A mounted component owns its own answer: it talks to `window.crtr` itself, and this element
- * never invents a response shape for a kind whose shape only the product knows.
- *
- * The unavailable notice is the only thing this element paints, and every value in it is read
- * through a `--crtr-slot-*` component token so a host can restyle the notice without touching
- * crtr. There is no shared family behind these: nothing else in the bundle draws a notice, so
- * each chain is one layer over the kit default.
- */
-export {};

package/dist/pages/elements/slot.js

@@ -1,112 +0,0 @@
-/**
- * `<crtr-slot>` — the one escape element, for kinds crtr does not own.
- *
- * A page may carry a slot whose `kind` belongs to the product hosting the page (a Northlight
- * workspace component, say) rather than to this kit. crtr validated only that such a slot has
- * an id, a kind, and an object config; it never invents an element for a kind it cannot
- * render. So every one of them arrives as
- * `<crtr-slot kind="product-kind" slot-id="…"><script type="application/json">…</script></crtr-slot>`,
- * and this element does exactly two things: ask the host to render the kind into a mount
- * point, and — when the host has no renderer for it, or there is no host at all — say so by
- * name instead of leaving a hole in the page.
- *
- * The mount point is a light-DOM child, surfaced through the shadow root's `<slot>`. Host
- * content styles itself from the document it is mounted into, and putting it behind this
- * element's shadow boundary would cut it off from that; the JSON config child stays where it
- * is, untouched, so a re-mount reads the same config.
- *
- * A mounted component owns its own answer: it talks to `window.crtr` itself, and this element
- * never invents a response shape for a kind whose shape only the product knows.
- *
- * The unavailable notice is the only thing this element paints, and every value in it is read
- * through a `--crtr-slot-*` component token so a host can restyle the notice without touching
- * crtr. There is no shared family behind these: nothing else in the bundle draws a notice, so
- * each chain is one layer over the kit default.
- */
-import { mountWorkspaceComponent } from '../host.js';
-import { registerElement } from '../register.js';
-import { readSlotConfig } from '../slot-config.js';
-const STYLE = `
-  :host {
-    display: block;
-  }
-
-  /* Flat: this sits in the flow of the page. A shadow in this bundle means floating. */
-  [part="unavailable"] {
-    padding: var(--crtr-slot-unavailable-padding, var(--crtr-space-3));
-    color: var(--crtr-slot-unavailable-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-slot-unavailable-fill, var(--crtr-color-surface));
-    border: var(--crtr-slot-unavailable-border-width, 1px)
-      var(--crtr-slot-unavailable-border-style, solid)
-      var(--crtr-slot-unavailable-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-slot-unavailable-radius, var(--crtr-radius-medium));
-  }
-
-  [part="unavailable"][hidden] {
-    display: none;
-  }
-
-  [part="kind"] {
-    color: var(--crtr-slot-kind-text-color, var(--crtr-color-text));
-    font-family: var(--crtr-slot-kind-font-family, var(--crtr-font-mono));
-  }
-
-  [part="reason"] {
-    display: block;
-    margin-top: var(--crtr-slot-reason-gap, var(--crtr-space-1));
-    font-size: var(--crtr-slot-reason-font-size, 0.875em);
-  }
-`;
-class CrtrSlotElement extends HTMLElement {
-    #unavailable = document.createElement('div');
-    #kind = document.createElement('span');
-    #reason = document.createElement('span');
-    #mount = document.createElement('div');
-    #started = false;
-    constructor() {
-        super();
-        const root = this.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = STYLE;
-        this.#unavailable.part.add('unavailable');
-        this.#unavailable.setAttribute('role', 'status');
-        this.#kind.part.add('kind');
-        this.#reason.part.add('reason');
-        this.#unavailable.append('Component unavailable: ', this.#kind, this.#reason);
-        // Hidden until the mount attempt resolves, so a host that does render this kind never
-        // flashes an unavailable state on the way in.
-        this.#unavailable.hidden = true;
-        this.#mount.part.add('mount');
-        root.append(style, document.createElement('slot'), this.#unavailable);
-    }
-    connectedCallback() {
-        if (this.#started)
-            return;
-        this.#started = true;
-        const kind = this.getAttribute('kind')?.trim() ?? '';
-        this.#kind.textContent = kind === '' ? 'unknown' : kind;
-        if (kind === '') {
-            this.#showUnavailable('This slot names no component kind.');
-            return;
-        }
-        const read = readSlotConfig(this);
-        if (read.status !== 'ok') {
-            this.#showUnavailable(read.reason);
-            return;
-        }
-        this.append(this.#mount);
-        void this.#attemptMount(kind, read.config);
-    }
-    async #attemptMount(kind, config) {
-        const outcome = await mountWorkspaceComponent(this.#mount, kind, config);
-        if (outcome === 'mounted')
-            return;
-        this.#mount.remove();
-        this.#showUnavailable('This page is open somewhere that cannot render it.');
-    }
-    #showUnavailable(reason) {
-        this.#reason.textContent = reason;
-        this.#unavailable.hidden = false;
-    }
-}
-registerElement('crtr-slot', CrtrSlotElement);

package/dist/pages/elements/table.d.ts

@@ -1,36 +0,0 @@
-/**
- * `<crtr-table>` — a dataset the agent wants the user to pick from.
- *
- * Rows and columns are independently selectable, single or multi, because the two questions
- * an agent asks of a table are "which of these records" and "which of these fields", and they
- * are not the same question. Row selection wears a real checkbox or radio in a leading cell;
- * column selection turns the header into a pressed toggle, since a column has no natural row
- * to hang a checkbox on and the header IS the column.
- *
- * Anchored comments use the same one-per-anchor algebra as every other element: a row anchor
- * in each row's trailing cell, a column anchor beside each header label, and a `whole` anchor
- * in the trailing header cell for the table itself. Triggers stay invisible until the row is
- * hovered or focused, or until a comment is actually there.
- *
- * Ported from the agent interaction kit's `agent-table.tsx` (northlight `3705fe9e2`), with the
- * kit's `classic-list-keys` grammar — j/k move, x selects, c comments — reimplemented here
- * over the shadow root.
- *
- * ## Styling
- *
- * Every styling value below is read through a `--crtr-table-*` component token, so a host
- * restyles this element without touching crtr — custom properties inherit through the shadow
- * boundary, which is the whole mechanism. The parts a person can name each own a scope:
- * `container`, `caption`, `header`, `column-toggle`, `row`, `cell`, `selection` (the row
- * control and the header's select-all, deliberately one thing), `comment-trigger`,
- * `comment-editor`, `comment-input`, `comment-button` and its `comment-cancel` /
- * `comment-save` paint, `notice`, `reason`, `empty`. Where a shared recipe draws the value the
- * chain is `--crtr-table-<part>-<knob>` over the family's `--crtr-control-*` and then the kit
- * default; every default stays inline at the rule that spends it, and no token is declared
- * anywhere, which is what keeps the kit's own look when a host sets nothing.
- *
- * Layout and behaviour stay literal: `display`, positioning, the shrink-to-content column
- * widths, text alignment, and the trigger's reveal-on-hover `opacity` are anatomy rather than
- * paint, so they are not knobs.
- */
-export {};