@north-light/crouter 0.3.198 → 0.3.200

package/dist/pages/elements/table.js

@@ -1,1043 +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.
- */
-import { controlStyle, focusRingStyle, writingBoxStyle } from '../controls.js';
-import { registerElement } from '../register.js';
-import { readSlotConfig, readSlotId } from '../slot-config.js';
-import { respond, savedIds, savedResponse } from '../host.js';
-import { adoptComments, anchorLabel, canRecordComments, findComment, setComment } from '../comments.js';
-import { applyReadOnly, isReadOnly } from '../readonly.js';
-import { registerSlotResponse } from '../responses.js';
-/** The gap between a comment trigger and the editor that opens off it. */
-const EDITOR_GAP = 4;
-/**
- * The motion the table's control-shaped things wear. A column toggle, a comment trigger and
- * the editor's two buttons are all controls, so their timing chains through the family's
- * `--crtr-control-transition` before reaching the kit default; a row is not a control, so its
- * tint animation carries an element token alone.
- */
-const TOGGLE_MOTION = 'var(--crtr-table-column-toggle-transition, var(--crtr-control-transition, 120ms ease))';
-const ROW_MOTION = 'var(--crtr-table-row-transition, 120ms ease)';
-const TRIGGER_MOTION = 'var(--crtr-table-comment-trigger-transition, var(--crtr-control-transition, 120ms ease))';
-const COMMENT_BUTTON_MOTION = 'var(--crtr-table-comment-button-transition, var(--crtr-control-transition, 120ms ease))';
-const COMMENT_BUBBLE = 'M3.25 3.5h9.5A1.75 1.75 0 0 1 14.5 5.25v5A1.75 1.75 0 0 1 12.75 12H7.4l-3.15 2.36A.5.5 0 0 1 3.5 14v-2H3.25A1.75 1.75 0 0 1 1.5 10.25v-5A1.75 1.75 0 0 1 3.25 3.5Z';
-const STYLE = `
-  :host {
-    display: block;
-  }
-
-  /* The positioning context for the comment editor, and the ONLY one. The editor cannot live
-     inside the container: that box clips to its own rounded corners, so a popover anchored to
-     a row was cut off at the table's edge instead of floating over it. The frame has no paint
-     and no clipping, so the editor overlays whatever the table sits on. */
-  [part="frame"] {
-    position: relative;
-  }
-
-  /* Flat: the table sits in the flow of the page. A shadow in this bundle means floating —
-     the comment editor, and nothing else here. */
-  [part="container"] {
-    background: var(--crtr-table-container-fill, var(--crtr-color-background));
-    border: var(--crtr-table-container-border-width, 1px)
-      var(--crtr-table-container-border-style, solid)
-      var(--crtr-table-container-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-table-container-radius, var(--crtr-radius-medium));
-    overflow: hidden;
-  }
-
-  /* Inside the border, not outside it: the container is full-bleed, so an outset ring is
-     clipped at the edges of the frame the host gives the page and draws only three sides.
-     That is why this is NOT the shared control focus family — it is a focusable region rather
-     than a control, and it says so with its own inset outline. */
-  [part="container"]:focus-visible {
-    outline: var(--crtr-table-container-focus-outline, 2px solid var(--crtr-color-focus));
-    outline-offset: var(--crtr-table-container-focus-outline-offset, -2px);
-  }
-
-  /* Typography here is the element's host typography, not a second set of knobs: font stays
-     literal inherit so --crtr-table-font-family, --crtr-table-font-size and
-     --crtr-table-line-height reach the table, and the colour reads the host's own
-     --crtr-table-color, whose fallback is the colour this rule used to hard-code. */
-  [part="table"] {
-    width: 100%;
-    border-collapse: collapse;
-    font: inherit;
-    color: var(--crtr-table-color, var(--crtr-color-text));
-  }
-
-  [part="caption"] {
-    caption-side: top;
-    padding: var(--crtr-table-caption-padding, var(--crtr-space-3) var(--crtr-space-3) var(--crtr-space-2));
-    text-align: left;
-    color: var(--crtr-table-caption-text-color, var(--crtr-color-text-muted));
-  }
-
-  th {
-    padding: var(--crtr-table-header-padding, var(--crtr-space-2) var(--crtr-space-3));
-    text-align: left;
-    font-weight: var(--crtr-table-header-font-weight, 600);
-    color: var(--crtr-table-header-text-color, var(--crtr-color-text-muted));
-    /* A tinted header reads as the table's own chrome; the column-selected tint still wins,
-       on specificity (0-1-0 against this 0-0-1). */
-    background: var(--crtr-table-header-fill, var(--crtr-color-surface));
-    border-bottom: var(--crtr-table-header-border-width, 1px)
-      var(--crtr-table-header-border-style, solid)
-      var(--crtr-table-header-border-color, var(--crtr-color-border));
-    white-space: nowrap;
-  }
-
-  th[data-align="right"] {
-    text-align: right;
-  }
-
-  [part="header-cell-inner"] {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--crtr-table-header-gap, var(--crtr-space-1));
-  }
-
-  th[data-align="right"] [part="header-cell-inner"] {
-    flex-direction: row-reverse;
-  }
-
-  [part="column-toggle"] {
-    font: var(--crtr-table-column-toggle-font, inherit);
-    font-weight: var(--crtr-table-column-toggle-font-weight, 600);
-    color: var(--crtr-table-column-toggle-text-color, inherit);
-    background: var(--crtr-table-column-toggle-fill, transparent);
-    border: var(--crtr-table-column-toggle-border-width, 1px)
-      var(--crtr-table-column-toggle-border-style, solid)
-      var(--crtr-table-column-toggle-border-color, transparent);
-    border-radius: var(--crtr-table-column-toggle-radius, var(--crtr-radius-small));
-    padding: var(--crtr-table-column-toggle-padding, var(--crtr-space-1) var(--crtr-space-2));
-    /* The toggle is pulled back out of its own padding so the header label sits where an
-       unselectable one does; a host that repads the toggle repays this too. */
-    margin: var(--crtr-table-column-toggle-margin, calc(var(--crtr-space-1) * -1) calc(var(--crtr-space-2) * -1));
-    cursor: pointer;
-    transition: color ${TOGGLE_MOTION}, background-color ${TOGGLE_MOTION}, border-color ${TOGGLE_MOTION};
-  }
-
-  [part="column-toggle"]:hover {
-    background: var(--crtr-table-column-toggle-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-  [part="column-toggle"][aria-pressed="true"] {
-    color: var(--crtr-table-column-toggle-selected-text-color, var(--crtr-color-text));
-    background: var(--crtr-table-column-toggle-selected-fill,
-      color-mix(in srgb, var(--crtr-color-accent) 10%, transparent));
-    border-color: var(--crtr-table-column-toggle-selected-border-color,
-      color-mix(in srgb, var(--crtr-color-accent) 45%, transparent));
-  }
-
-  [part="column-toggle"][aria-pressed="true"]:hover {
-    background: var(--crtr-table-column-toggle-selected-hover-fill,
-      color-mix(in srgb, var(--crtr-color-accent) 14%, transparent));
-  }
-
-${focusRingStyle({ scope: 'table-column-toggle' }, '[part="column-toggle"]')}
-${focusRingStyle({ scope: 'table-comment-trigger' }, '[part="comment-trigger"]')}
-
-  [part="row"] {
-    border-bottom: var(--crtr-table-row-border-width, 1px)
-      var(--crtr-table-row-border-style, solid)
-      var(--crtr-table-row-border-color, color-mix(in srgb, var(--crtr-color-border) 60%, transparent));
-    transition: background-color ${ROW_MOTION};
-  }
-
-  [part="row"]:last-child {
-    border-bottom: var(--crtr-table-row-last-border, none);
-  }
-
-  [part="row"]:hover,
-  [part="row"][data-active="true"] {
-    background: var(--crtr-table-row-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-  [part="row"][data-state="selected"] {
-    background: var(--crtr-table-row-selected-fill, color-mix(in srgb, var(--crtr-color-accent) 10%, transparent));
-  }
-
-  [part="row"][data-state="selected"]:hover,
-  [part="row"][data-state="selected"][data-active="true"] {
-    background: var(--crtr-table-row-selected-hover-fill,
-      color-mix(in srgb, var(--crtr-color-accent) 14%, transparent));
-  }
-
-  /* Inset for the same reason the container's is: a row runs the full width of the table. */
-  [part="row"]:focus-visible {
-    outline: var(--crtr-table-row-focus-outline, 2px solid var(--crtr-color-focus));
-    outline-offset: var(--crtr-table-row-focus-outline-offset, -2px);
-  }
-
-  td {
-    padding: var(--crtr-table-cell-padding, var(--crtr-space-2) var(--crtr-space-3));
-    vertical-align: middle;
-  }
-
-  td[data-align="right"] {
-    text-align: right;
-    font-variant-numeric: var(--crtr-table-cell-numeric-font-variant, tabular-nums);
-  }
-
-  td[data-mono="true"] {
-    font-family: var(--crtr-table-cell-mono-font-family, var(--crtr-font-mono));
-    font-size: var(--crtr-table-cell-mono-font-size, 0.8125em);
-  }
-
-  [data-column-selected="true"] {
-    background: var(--crtr-table-column-selected-fill, color-mix(in srgb, var(--crtr-color-accent) 6%, transparent));
-  }
-
-  [part="select-cell"],
-  [part="select-head"] {
-    width: 1px;
-    padding-right: var(--crtr-table-select-cell-padding-right, 0);
-  }
-
-  [part="comment-cell"],
-  [part="comment-head"] {
-    width: 1px;
-    text-align: right;
-    padding-left: var(--crtr-table-comment-cell-padding-left, 0);
-  }
-
-  /* One scope over both selectors: the header's select-all IS the row control, drawn once in
-     the head, and they are meant to be indistinguishable. */
-  ${controlStyle({ scope: 'table-selection' }, '[part="row-control"]', '[part="select-all"]')}
-
-  /* A page that can no longer take an answer keeps its selection legible and drops every
-     affordance that says it could still be changed. */
-  [part="column-toggle"]:disabled {
-    cursor: default;
-  }
-
-  [part="column-toggle"]:disabled:hover {
-    color: var(--crtr-table-column-toggle-disabled-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-table-column-toggle-disabled-fill, none);
-  }
-
-  /* One size knob for a square button, and one for the glyph in it — width and height are one
-     visual decision each. The opacity is the reveal-on-hover mechanic, which is behaviour. */
-  [part="comment-trigger"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--crtr-table-comment-trigger-size, 1.5em);
-    height: var(--crtr-table-comment-trigger-size, 1.5em);
-    padding: var(--crtr-table-comment-trigger-padding, 0);
-    color: var(--crtr-table-comment-trigger-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-table-comment-trigger-fill, transparent);
-    border: var(--crtr-table-comment-trigger-border-width, 0)
-      var(--crtr-table-comment-trigger-border-style, none)
-      var(--crtr-table-comment-trigger-border-color, currentColor);
-    border-radius: var(--crtr-table-comment-trigger-radius, var(--crtr-radius-small));
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity ${TRIGGER_MOTION}, color ${TRIGGER_MOTION}, background-color ${TRIGGER_MOTION};
-  }
-
-  [part="comment-trigger"] svg {
-    width: var(--crtr-table-comment-trigger-icon-size, 0.875em);
-    height: var(--crtr-table-comment-trigger-icon-size, 0.875em);
-  }
-
-  /* The path geometry stays the icon's anatomy; its paint is component styling. Attribute
-     selectors preserve the filled-comment state that syncState writes while allowing both
-     appearances to inherit document-root overrides through this shadow root. */
-  [part="comment-trigger"] path {
-    stroke: var(--crtr-table-comment-trigger-icon-stroke, currentColor);
-    stroke-width: var(--crtr-table-comment-trigger-icon-stroke-width, 1.25);
-    stroke-linejoin: var(--crtr-table-comment-trigger-icon-stroke-linejoin, round);
-  }
-
-  [part="comment-trigger"] path[fill="none"] {
-    fill: var(--crtr-table-comment-trigger-icon-fill, none);
-  }
-
-  [part="comment-trigger"] path[fill="currentColor"] {
-    fill: var(--crtr-table-comment-trigger-commented-icon-fill, currentColor);
-  }
-
-  [part="comment-trigger"][data-has-comment="true"] {
-    color: var(--crtr-table-comment-trigger-commented-text-color, var(--crtr-color-accent));
-    opacity: 1;
-  }
-
-  [part="comment-trigger"]:hover {
-    background: var(--crtr-table-comment-trigger-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-  tr:hover [part="comment-trigger"],
-  tr:focus-within [part="comment-trigger"],
-  tr[data-active="true"] [part="comment-trigger"],
-  [part="comment-trigger"]:focus-visible,
-  [part="comment-trigger"][data-open="true"] {
-    opacity: 1;
-  }
-
-  /* A floating panel over the page, not a box in the table's layout: the background token
-     rather than the surface tint, so it reads as lifted off whatever it covers. */
-  [part="comment-editor"] {
-    position: absolute;
-    z-index: 5;
-    box-sizing: border-box;
-    width: var(--crtr-table-comment-editor-width, min(20em, 100%));
-    display: grid;
-    gap: var(--crtr-table-comment-editor-gap, var(--crtr-space-2));
-    padding: var(--crtr-table-comment-editor-padding, var(--crtr-space-3));
-    background: var(--crtr-table-comment-editor-fill, var(--crtr-color-background));
-    border: var(--crtr-table-comment-editor-border-width, 1px)
-      var(--crtr-table-comment-editor-border-style, solid)
-      var(--crtr-table-comment-editor-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-table-comment-editor-radius, var(--crtr-radius-medium));
-    box-shadow: var(--crtr-table-comment-editor-shadow, var(--crtr-shadow));
-  }
-
-  [part="comment-editor"][hidden] {
-    display: none;
-  }
-
-  /* The editor's own prose, in the page's voice. It was set in caps mono, which shouted a
-     row id at someone who had just clicked that row. */
-  [part="comment-target"] {
-    margin: var(--crtr-table-comment-target-margin, 0);
-    font-size: var(--crtr-table-comment-target-font-size, 0.875em);
-    color: var(--crtr-table-comment-target-text-color, var(--crtr-color-text-muted));
-  }
-
-${writingBoxStyle({ scope: 'table-comment-input' }, '[part="comment-input"]')}
-  [part="comment-input"] {
-    min-height: var(--crtr-table-comment-input-min-height, 4.5em);
-    resize: vertical;
-  }
-
-  [part="comment-actions"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--crtr-table-comment-actions-gap, var(--crtr-space-2));
-  }
-
-  [part="comment-hint"] {
-    font-size: var(--crtr-table-comment-hint-font-size, 0.875em);
-    color: var(--crtr-table-comment-hint-text-color, var(--crtr-color-text-muted));
-  }
-
-  /* The chrome both editor buttons share reads one scope — a person sees one pair of buttons —
-     and each button's own paint carries its own. */
-  [part="comment-cancel"],
-  [part="comment-save"] {
-    font: var(--crtr-table-comment-button-font, inherit);
-    font-size: var(--crtr-table-comment-button-font-size, 0.875em);
-    padding: var(--crtr-table-comment-button-padding, var(--crtr-space-1) var(--crtr-space-2));
-    border-radius: var(--crtr-table-comment-button-radius, var(--crtr-radius-small));
-    border: var(--crtr-table-comment-button-border-width, 1px)
-      var(--crtr-table-comment-button-border-style, solid)
-      var(--crtr-table-comment-button-border-color, var(--crtr-color-border));
-    cursor: pointer;
-    transition: color ${COMMENT_BUTTON_MOTION}, background-color ${COMMENT_BUTTON_MOTION},
-      border-color ${COMMENT_BUTTON_MOTION};
-  }
-
-  [part="comment-cancel"] {
-    color: var(--crtr-table-comment-cancel-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-table-comment-cancel-fill, transparent);
-    border-color: var(--crtr-table-comment-cancel-border-color,
-      var(--crtr-table-comment-button-border-color, transparent));
-  }
-
-  [part="comment-cancel"]:hover {
-    color: var(--crtr-table-comment-cancel-hover-text-color, var(--crtr-color-text));
-    background: var(--crtr-table-comment-cancel-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-  [part="comment-save"] {
-    color: var(--crtr-table-comment-save-text-color, var(--crtr-color-accent-contrast));
-    background: var(--crtr-table-comment-save-fill, var(--crtr-color-accent));
-    border-color: var(--crtr-table-comment-save-border-color,
-      var(--crtr-table-comment-button-border-color, var(--crtr-color-accent)));
-  }
-
-  /* Mixing 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="comment-save"]:hover {
-    background: var(--crtr-table-comment-save-hover-fill,
-      color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
-    border-color: var(--crtr-table-comment-save-hover-border-color,
-      color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
-  }
-
-${focusRingStyle({ scope: 'table-comment-cancel' }, '[part="comment-cancel"]')}
-${focusRingStyle({ scope: 'table-comment-save' }, '[part="comment-save"]')}
-
-  /* One scope over both: a loading line and an unavailable notice are the same box, saying
-     the table has nothing to show yet or ever. */
-  [part="status"],
-  [part="unavailable"] {
-    padding: var(--crtr-table-notice-padding, var(--crtr-space-3));
-    color: var(--crtr-table-notice-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-table-notice-fill, var(--crtr-color-surface));
-    border: var(--crtr-table-notice-border-width, 1px)
-      var(--crtr-table-notice-border-style, solid)
-      var(--crtr-table-notice-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-table-notice-radius, var(--crtr-radius-medium));
-  }
-
-  [part="reason"] {
-    color: var(--crtr-table-reason-text-color, var(--crtr-color-text));
-    font-family: var(--crtr-table-reason-font-family, var(--crtr-font-mono));
-  }
-
-  [part="empty"] {
-    padding: var(--crtr-table-empty-padding, var(--crtr-space-3));
-    color: var(--crtr-table-empty-text-color, var(--crtr-color-text-muted));
-    text-align: center;
-  }
-`;
-/** A cell value the schema allows, as the string a table shows. */
-function cellText(value) {
-    if (value === undefined || value === null)
-        return '';
-    return typeof value === 'string' ? value : String(value);
-}
-function isPlainObject(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-function commentIcon() {
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('viewBox', '0 0 16 16');
-    svg.setAttribute('aria-hidden', 'true');
-    svg.setAttribute('focusable', 'false');
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttribute('d', COMMENT_BUBBLE);
-    path.setAttribute('fill', 'none');
-    path.setAttribute('stroke', 'currentColor');
-    path.setAttribute('stroke-width', '1.25');
-    path.setAttribute('stroke-linejoin', 'round');
-    svg.append(path);
-    return svg;
-}
-function isTextEntry(target) {
-    if (!(target instanceof HTMLElement))
-        return false;
-    return target.closest('input[type="text"], textarea, [contenteditable="true"]') !== null;
-}
-class CrtrTableElement extends HTMLElement {
-    /** The host marks a resolved or canceled page `inert`; that is this element's read-only signal. */
-    static observedAttributes = ['inert'];
-    #root;
-    #slotId;
-    #config;
-    #rows = [];
-    #selectedRowIds = [];
-    #selectedColumnIds = [];
-    #comments = [];
-    #activeRowId = null;
-    #editorAnchor = null;
-    #editorTrigger;
-    #container;
-    /** The editor's positioning context — the unclipped wrapper around the container. */
-    #frame;
-    #editor;
-    #editorTarget;
-    #editorInput;
-    #editorHint;
-    #selectAll;
-    #rowParts = new Map();
-    #columnParts = new Map();
-    #wholeComment;
-    constructor() {
-        super();
-        this.#root = this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        const read = readSlotConfig(this);
-        if (read.status !== 'ok') {
-            this.#renderUnavailable(read.reason);
-            return;
-        }
-        const config = read.config;
-        if (!Array.isArray(config.columns) || config.columns.length === 0) {
-            this.#renderUnavailable('table config has no columns');
-            return;
-        }
-        this.#config = config;
-        this.#slotId = readSlotId(this);
-        // Only a selectable table bears a response — the host rejects a map naming a display-only
-        // slot — and the modes are known here before rendering.
-        if (this.#slotId !== undefined && (this.#rowSelect !== 'none' || this.#columnSelect !== 'none')) {
-            registerSlotResponse(this, this.#slotId, () => this.#response());
-        }
-        this.#rows = config.rows ?? [];
-        this.#hydrate();
-        this.#renderTable();
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            this.#syncReadOnly();
-    }
-    /**
-     * Repainted after every state sync, because a rebuild replaces the controls. Column
-     * toggles are buttons rather than inputs, so they are named here; the mutation paths
-     * refuse anyway, and this is what makes the refusal visible.
-     */
-    #syncReadOnly() {
-        const readOnly = isReadOnly(this);
-        applyReadOnly(this.#root, readOnly);
-        for (const parts of this.#columnParts.values()) {
-            if (parts.toggle !== undefined)
-                parts.toggle.disabled = readOnly;
-        }
-        // A page can go read-only while the composer is open — the host sets `inert` on a ticket
-        // that resolves under it. A box that can no longer save is closed rather than left there
-        // taking words nothing will keep.
-        if (readOnly && this.#editorAnchor !== null)
-            this.#closeEditor();
-    }
-    /**
-     * Seed local state from the answer the host is already holding, so a reopened page shows
-     * the rows and columns that were picked. It runs once rows are known because a saved id is
-     * only honoured while it still names something on
-     * screen. The select modes are re-imposed for the same reason.
-     */
-    #hydrate() {
-        if (this.#slotId === undefined)
-            return;
-        const saved = savedResponse(this.#slotId);
-        if (saved === undefined)
-            return;
-        const rows = this.#orderRows(savedIds(saved.selectedRowIds));
-        const columns = this.#orderColumns(savedIds(saved.selectedColumnIds));
-        this.#selectedRowIds = this.#rowSelect === 'none' ? [] : this.#rowSelect === 'single' ? rows.slice(0, 1) : rows;
-        this.#selectedColumnIds =
-            this.#columnSelect === 'none' ? [] : this.#columnSelect === 'single' ? columns.slice(0, 1) : columns;
-        const rowIds = new Set(this.#rows.map((row) => row.id));
-        const columnIds = new Set((this.#config?.columns ?? []).map((column) => column.id));
-        this.#comments = adoptComments(saved.comments).filter((comment) => {
-            if (comment.anchor.kind === 'row')
-                return rowIds.has(comment.anchor.rowId);
-            if (comment.anchor.kind === 'column')
-                return columnIds.has(comment.anchor.columnId);
-            return true;
-        });
-    }
-    // ── the response ───────────────────────────────────────────────────────────────────────
-    get #rowSelect() {
-        return this.#config?.rowSelect ?? 'none';
-    }
-    get #columnSelect() {
-        return this.#config?.columnSelect ?? 'none';
-    }
-    #response() {
-        return {
-            selectedRowIds: [...this.#selectedRowIds],
-            selectedColumnIds: [...this.#selectedColumnIds],
-            comments: [...this.#comments],
-        };
-    }
-    /** Every user change hands the host this slot's complete current response, never a delta. */
-    #commit() {
-        this.#syncState();
-        if (this.#slotId !== undefined)
-            respond(this.#slotId, this.#response());
-    }
-    /** Selection stays in the order the agent authored, not the order the user clicked. */
-    #orderRows(ids) {
-        return this.#rows.map((row) => row.id).filter((id) => ids.includes(id));
-    }
-    #orderColumns(ids) {
-        return (this.#config?.columns ?? []).map((column) => column.id).filter((id) => ids.includes(id));
-    }
-    #setRowSelected(rowId, selected) {
-        const mode = this.#rowSelect;
-        if (mode === 'none' || isReadOnly(this))
-            return;
-        if (mode === 'single') {
-            this.#selectedRowIds = selected ? [rowId] : [];
-        }
-        else {
-            this.#selectedRowIds = this.#orderRows(selected ? [...this.#selectedRowIds, rowId] : this.#selectedRowIds.filter((id) => id !== rowId));
-        }
-        this.#commit();
-    }
-    #toggleRow(rowId) {
-        if (this.#rowSelect === 'single') {
-            this.#setRowSelected(rowId, true);
-            return;
-        }
-        this.#setRowSelected(rowId, !this.#selectedRowIds.includes(rowId));
-    }
-    #setColumnSelected(columnId, selected) {
-        const mode = this.#columnSelect;
-        if (mode === 'none' || isReadOnly(this))
-            return;
-        if (mode === 'single') {
-            this.#selectedColumnIds = selected ? [columnId] : [];
-        }
-        else {
-            this.#selectedColumnIds = this.#orderColumns(selected ? [...this.#selectedColumnIds, columnId] : this.#selectedColumnIds.filter((id) => id !== columnId));
-        }
-        this.#commit();
-    }
-    #toggleColumn(columnId) {
-        this.#setColumnSelected(columnId, !this.#selectedColumnIds.includes(columnId));
-    }
-    #setAllRows(selected) {
-        if (this.#rowSelect !== 'multi' || isReadOnly(this))
-            return;
-        this.#selectedRowIds = selected ? this.#rows.map((row) => row.id) : [];
-        this.#commit();
-    }
-    // ── rendering ──────────────────────────────────────────────────────────────────────────
-    #reset() {
-        this.#root.replaceChildren();
-        this.#rowParts.clear();
-        this.#columnParts.clear();
-        this.#container = undefined;
-        this.#frame = undefined;
-        this.#editor = undefined;
-        this.#editorTrigger = undefined;
-        this.#editorAnchor = null;
-        this.#selectAll = undefined;
-        this.#wholeComment = undefined;
-        const style = document.createElement('style');
-        style.textContent = STYLE;
-        this.#root.append(style);
-    }
-    #renderUnavailable(reason) {
-        this.#reset();
-        const box = document.createElement('div');
-        box.part.add('unavailable');
-        box.setAttribute('role', 'status');
-        const detail = document.createElement('span');
-        detail.part.add('reason');
-        detail.textContent = reason;
-        box.append('Table unavailable: ', detail);
-        this.#root.append(box);
-    }
-    #renderTable() {
-        const config = this.#config;
-        if (config === undefined)
-            return;
-        this.#reset();
-        const container = document.createElement('div');
-        container.part.add('container');
-        container.tabIndex = 0;
-        container.addEventListener('keydown', (event) => this.#onKeyDown(event));
-        container.addEventListener('focus', () => {
-            if (this.#activeRowId === null && this.#rows.length > 0) {
-                this.#activeRowId = this.#rows[0].id;
-                this.#syncState();
-            }
-        });
-        this.#container = container;
-        const table = document.createElement('table');
-        table.part.add('table');
-        if (config.label !== undefined && config.label !== '') {
-            const caption = document.createElement('caption');
-            caption.part.add('caption');
-            caption.textContent = config.label;
-            table.append(caption);
-        }
-        table.append(this.#buildHead(config), this.#buildBody(config));
-        container.append(table);
-        if (this.#rows.length === 0) {
-            const empty = document.createElement('div');
-            empty.part.add('empty');
-            empty.textContent = 'No rows.';
-            container.append(empty);
-        }
-        const frame = document.createElement('div');
-        frame.part.add('frame');
-        frame.append(container);
-        if (this.#commentable)
-            frame.append(this.#buildEditor());
-        this.#frame = frame;
-        this.#root.append(frame);
-        this.#syncState();
-    }
-    #buildHead(config) {
-        const head = document.createElement('thead');
-        const tr = document.createElement('tr');
-        tr.part.add('header-row');
-        if (this.#rowSelect !== 'none') {
-            const th = document.createElement('th');
-            th.part.add('select-head');
-            th.setAttribute('scope', 'col');
-            if (this.#rowSelect === 'multi') {
-                const all = document.createElement('input');
-                all.type = 'checkbox';
-                all.part.add('select-all');
-                all.setAttribute('aria-label', 'Select every row');
-                all.addEventListener('change', () => this.#setAllRows(all.checked));
-                this.#selectAll = all;
-                th.append(all);
-            }
-            tr.append(th);
-        }
-        for (const column of config.columns) {
-            const th = document.createElement('th');
-            th.part.add('column-header');
-            th.setAttribute('scope', 'col');
-            th.dataset.columnHeader = column.id;
-            if (column.align === 'right')
-                th.dataset.align = 'right';
-            const inner = document.createElement('span');
-            inner.part.add('header-cell-inner');
-            let toggle;
-            if (this.#columnSelect === 'none') {
-                const label = document.createElement('span');
-                label.textContent = column.label;
-                inner.append(label);
-            }
-            else {
-                toggle = document.createElement('button');
-                toggle.type = 'button';
-                toggle.part.add('column-toggle');
-                toggle.dataset.columnToggle = column.id;
-                toggle.setAttribute('aria-pressed', 'false');
-                toggle.setAttribute('aria-label', `Select the ${column.label} column`);
-                toggle.textContent = column.label;
-                toggle.addEventListener('click', () => this.#toggleColumn(column.id));
-                inner.append(toggle);
-            }
-            const comment = this.#commentable
-                ? this.#buildCommentTrigger({ kind: 'column', columnId: column.id }, `the ${column.label} column`)
-                : undefined;
-            if (comment !== undefined)
-                inner.append(comment);
-            th.append(inner);
-            tr.append(th);
-            this.#columnParts.set(column.id, { toggle, ...(comment === undefined ? {} : { comment }), cells: [], head: th });
-        }
-        // The trailing column exists to hold the whole-table trigger; without comments there is
-        // nothing to put in it, and an empty column would just be a stripe of dead width.
-        if (this.#commentable) {
-            const trailing = document.createElement('th');
-            trailing.part.add('comment-head');
-            trailing.setAttribute('scope', 'col');
-            this.#wholeComment = this.#buildCommentTrigger({ kind: 'whole' }, 'this table');
-            trailing.append(this.#wholeComment);
-            tr.append(trailing);
-        }
-        head.append(tr);
-        return head;
-    }
-    #buildBody(config) {
-        const body = document.createElement('tbody');
-        for (const row of this.#rows) {
-            const tr = document.createElement('tr');
-            tr.part.add('row');
-            tr.dataset.rowId = row.id;
-            tr.tabIndex = -1;
-            tr.addEventListener('mouseenter', () => this.#setActiveRow(row.id));
-            tr.addEventListener('focusin', () => this.#setActiveRow(row.id));
-            let control;
-            if (this.#rowSelect !== 'none') {
-                const td = document.createElement('td');
-                td.part.add('select-cell');
-                const input = document.createElement('input');
-                input.type = this.#rowSelect === 'single' ? 'radio' : 'checkbox';
-                input.part.add('row-control');
-                if (this.#rowSelect === 'single')
-                    input.name = `${this.#slotId ?? 'crtr-table'}-row`;
-                input.value = row.id;
-                input.setAttribute('aria-label', `Select row ${row.id}`);
-                input.addEventListener('change', () => this.#setRowSelected(row.id, input.checked));
-                control = input;
-                td.append(input);
-                tr.append(td);
-            }
-            for (const column of config.columns) {
-                const td = document.createElement('td');
-                td.part.add('cell');
-                td.dataset.columnId = column.id;
-                if (column.align === 'right')
-                    td.dataset.align = 'right';
-                if (column.mono === true)
-                    td.dataset.mono = 'true';
-                td.textContent = cellText(row.cells[column.id]);
-                tr.append(td);
-                this.#columnParts.get(column.id)?.cells.push(td);
-            }
-            let comment;
-            if (this.#commentable) {
-                const commentCell = document.createElement('td');
-                commentCell.part.add('comment-cell');
-                comment = this.#buildCommentTrigger({ kind: 'row', rowId: row.id }, `row ${row.id}`);
-                commentCell.append(comment);
-                tr.append(commentCell);
-            }
-            body.append(tr);
-            this.#rowParts.set(row.id, { tr, ...(control === undefined ? {} : { control }), ...(comment === undefined ? {} : { comment }) });
-        }
-        return body;
-    }
-    /** Whether this table can keep a comment — see `canRecordComments`. */
-    get #commentable() {
-        return canRecordComments(this.#slotId);
-    }
-    #buildCommentTrigger(anchor, target) {
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.part.add('comment-trigger');
-        button.setAttribute('aria-label', `Comment on ${target}`);
-        button.dataset.commentTarget = target;
-        button.append(commentIcon());
-        button.addEventListener('click', () => this.#openEditor(anchor, button));
-        return button;
-    }
-    #buildEditor() {
-        const editor = document.createElement('div');
-        editor.part.add('comment-editor');
-        editor.hidden = true;
-        editor.setAttribute('role', 'dialog');
-        editor.setAttribute('aria-label', 'Comment');
-        const target = document.createElement('p');
-        target.part.add('comment-target');
-        editor.append(target);
-        const input = document.createElement('textarea');
-        input.part.add('comment-input');
-        input.placeholder = 'What should the agent know about this?';
-        input.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                this.#saveComment();
-            }
-            else if (event.key === 'Escape') {
-                event.preventDefault();
-                this.#closeEditor();
-            }
-        });
-        editor.append(input);
-        const actions = document.createElement('div');
-        actions.part.add('comment-actions');
-        const hint = document.createElement('span');
-        hint.part.add('comment-hint');
-        actions.append(hint);
-        const buttons = document.createElement('span');
-        const cancel = document.createElement('button');
-        cancel.type = 'button';
-        cancel.part.add('comment-cancel');
-        cancel.textContent = 'Cancel';
-        cancel.addEventListener('click', () => this.#closeEditor());
-        const save = document.createElement('button');
-        save.type = 'button';
-        save.part.add('comment-save');
-        save.textContent = 'Save';
-        save.addEventListener('click', () => this.#saveComment());
-        buttons.append(cancel, ' ', save);
-        actions.append(buttons);
-        editor.append(actions);
-        this.#editor = editor;
-        this.#editorTarget = target;
-        this.#editorInput = input;
-        this.#editorHint = hint;
-        return editor;
-    }
-    // ── comments ───────────────────────────────────────────────────────────────────────────
-    #openEditor(anchor, trigger) {
-        const editor = this.#editor;
-        const frame = this.#frame;
-        // A composer opens only where its comment can land: never on a read-only page, whose
-        // textareas are already `readOnly`, so the box would take focus and refuse every keystroke.
-        if (editor === undefined || frame === undefined || !this.#commentable || isReadOnly(this))
-            return;
-        this.#editorAnchor = anchor;
-        this.#editorTrigger = trigger;
-        const existing = findComment(this.#comments, anchor);
-        // The box is seeded from the saved comment every time it opens, so an abandoned edit
-        // never leaks into the next one.
-        if (this.#editorInput !== undefined)
-            this.#editorInput.value = existing?.text ?? '';
-        if (this.#editorTarget !== undefined) {
-            this.#editorTarget.textContent = `Comment on ${trigger.dataset.commentTarget ?? anchorLabel(anchor)}`;
-        }
-        if (this.#editorHint !== undefined)
-            this.#editorHint.textContent = existing === undefined ? '⌘↵ to save' : 'empty to delete';
-        const bounds = frame.getBoundingClientRect();
-        const rect = trigger.getBoundingClientRect();
-        editor.hidden = false;
-        editor.style.right = `${Math.max(0, bounds.right - rect.right)}px`;
-        // Below the trigger by default; above it when the viewport has no room below and does
-        // have room above. Measured after unhiding, because a hidden panel has no height.
-        editor.style.top = '0px';
-        const height = editor.getBoundingClientRect().height;
-        const below = rect.bottom + EDITOR_GAP + height <= window.innerHeight;
-        const above = rect.top - EDITOR_GAP - height >= 0;
-        editor.style.top =
-            !below && above
-                ? `${rect.top - EDITOR_GAP - height - bounds.top}px`
-                : `${rect.bottom + EDITOR_GAP - bounds.top}px`;
-        this.#syncState();
-        this.#editorInput?.focus();
-    }
-    /**
-     * Closing hands focus back to the trigger that opened the editor. Without it the keyboard
-     * grammar dies on save: the focused Save button is inside the panel being hidden, so focus
-     * falls out of the element entirely and j/k/x/c stop arriving.
-     */
-    #closeEditor() {
-        const trigger = this.#editorTrigger;
-        this.#editorAnchor = null;
-        this.#editorTrigger = undefined;
-        if (this.#editor !== undefined)
-            this.#editor.hidden = true;
-        this.#syncState();
-        trigger?.focus();
-    }
-    #saveComment() {
-        const anchor = this.#editorAnchor;
-        if (anchor === null || isReadOnly(this))
-            return;
-        this.#comments = setComment(this.#comments, anchor, this.#editorInput?.value ?? '');
-        this.#closeEditor();
-        this.#commit();
-    }
-    // ── interaction ────────────────────────────────────────────────────────────────────────
-    #setActiveRow(rowId) {
-        if (this.#activeRowId === rowId)
-            return;
-        this.#activeRowId = rowId;
-        this.#syncState();
-    }
-    #focusRow(rowId) {
-        const parts = this.#rowParts.get(rowId);
-        (parts?.control ?? parts?.tr)?.focus();
-    }
-    /**
-     * The kit's classic list grammar: j/k move (wrapping) and carry DOM focus with them, x
-     * selects, c comments. A key pressed on a column toggle acts on that column instead, since
-     * the header IS the column. Modified keys and anything typed in the comment box pass through.
-     */
-    #onKeyDown(event) {
-        if (event.metaKey || event.ctrlKey || event.altKey)
-            return;
-        const target = event.composedPath()[0] ?? event.target;
-        if (isTextEntry(target))
-            return;
-        const key = event.key.toLowerCase();
-        if (key !== 'j' && key !== 'k' && key !== 'x' && key !== 'c')
-            return;
-        // Anything focused inside a header cell — the toggle or that column's comment trigger —
-        // acts on the column, because the header IS the column.
-        const columnId = target instanceof HTMLElement ? target.closest('[data-column-header]')?.dataset.columnHeader : undefined;
-        if (columnId !== undefined && (key === 'x' || key === 'c')) {
-            event.preventDefault();
-            if (key === 'x')
-                this.#toggleColumn(columnId);
-            else {
-                const comment = this.#columnParts.get(columnId)?.comment;
-                if (comment !== undefined)
-                    this.#openEditor({ kind: 'column', columnId }, comment);
-            }
-            return;
-        }
-        const ids = this.#rows.map((row) => row.id);
-        if (ids.length === 0)
-            return;
-        const currentId = this.#activeRowId ?? this.#selectedRowIds[this.#selectedRowIds.length - 1] ?? ids[0];
-        if (key === 'j' || key === 'k') {
-            event.preventDefault();
-            const index = Math.max(0, ids.indexOf(currentId));
-            const nextId = ids[(index + (key === 'j' ? 1 : -1) + ids.length) % ids.length];
-            this.#setActiveRow(nextId);
-            this.#focusRow(nextId);
-            return;
-        }
-        event.preventDefault();
-        if (key === 'x') {
-            this.#toggleRow(currentId);
-            return;
-        }
-        const comment = this.#rowParts.get(currentId)?.comment;
-        if (comment !== undefined)
-            this.#openEditor({ kind: 'row', rowId: currentId }, comment);
-    }
-    // ── state → DOM ────────────────────────────────────────────────────────────────────────
-    #syncCommentTrigger(button, anchor) {
-        const comment = findComment(this.#comments, anchor);
-        const target = button.dataset.commentTarget ?? anchorLabel(anchor);
-        button.dataset.hasComment = comment === undefined ? 'false' : 'true';
-        button.setAttribute('aria-label', comment === undefined ? `Comment on ${target}` : `Edit comment on ${target}`);
-        button.title = comment?.text ?? '';
-        const path = button.querySelector('path');
-        path?.setAttribute('fill', comment === undefined ? 'none' : 'currentColor');
-        button.dataset.open = this.#isEditorAnchor(anchor) ? 'true' : 'false';
-    }
-    #isEditorAnchor(anchor) {
-        const current = this.#editorAnchor;
-        if (current === null || current.kind !== anchor.kind)
-            return false;
-        if (current.kind === 'row' && anchor.kind === 'row')
-            return current.rowId === anchor.rowId;
-        if (current.kind === 'column' && anchor.kind === 'column')
-            return current.columnId === anchor.columnId;
-        return current.kind === 'whole';
-    }
-    #syncState() {
-        for (const [rowId, parts] of this.#rowParts) {
-            const selected = this.#selectedRowIds.includes(rowId);
-            if (selected)
-                parts.tr.dataset.state = 'selected';
-            else
-                delete parts.tr.dataset.state;
-            parts.tr.dataset.active = this.#activeRowId === rowId ? 'true' : 'false';
-            parts.tr.setAttribute('aria-selected', selected ? 'true' : 'false');
-            if (parts.control !== undefined)
-                parts.control.checked = selected;
-            if (parts.comment !== undefined)
-                this.#syncCommentTrigger(parts.comment, { kind: 'row', rowId });
-        }
-        for (const [columnId, parts] of this.#columnParts) {
-            const selected = this.#selectedColumnIds.includes(columnId);
-            parts.toggle?.setAttribute('aria-pressed', selected ? 'true' : 'false');
-            parts.head.dataset.columnSelected = selected ? 'true' : 'false';
-            for (const cell of parts.cells)
-                cell.dataset.columnSelected = selected ? 'true' : 'false';
-            if (parts.comment !== undefined)
-                this.#syncCommentTrigger(parts.comment, { kind: 'column', columnId });
-        }
-        if (this.#wholeComment !== undefined)
-            this.#syncCommentTrigger(this.#wholeComment, { kind: 'whole' });
-        if (this.#selectAll !== undefined) {
-            const all = this.#rows.length > 0 && this.#selectedRowIds.length === this.#rows.length;
-            this.#selectAll.checked = all;
-            this.#selectAll.indeterminate = this.#selectedRowIds.length > 0 && !all;
-        }
-        this.#syncReadOnly();
-    }
-}
-registerElement('crtr-table', CrtrTableElement);