@north-light/crouter 0.3.198 → 0.3.199

package/dist/pages/elements/cards.js

@@ -1,915 +0,0 @@
-/**
- * `<crtr-cards>` — the choice `options` makes, when each candidate has enough body to
- * deserve its own surface: a meeting slot, a vendor, a search result.
- *
- * This is a port of the agent interaction kit's `cards` component, not a new design. The
- * selection treatment is the kit's selectable-surface recipe — a hairline surface that
- * answers the pointer and goes accent-toned once chosen — carrying the kit's selection
- * control and the kit's comment affordance. Navigation is the kit's classic list grammar
- * (`j`/`k` move, `x` selects, `c` comments), so a card grid, an option list and a table
- * are all driven the same way.
- *
- * Data arrives inline as `cards`. The element never touches the network: a page source file
- * is read and embedded once at submit, before this element renders.
- *
- * ## Every value here is a `--crtr-cards-*` token
- *
- * The card surface, its heading, its tag, the comment affordance and the three notice states
- * are all painted through `var(--crtr-cards-<part>-<knob>, <kit default>)`, so a host restyles
- * this element by setting properties on the document root — custom properties inherit into
- * shadow roots, which is the whole mechanism. The shared control, writing-box and focus
- * recipes carry their own element layer through the `{ scope }` each call passes, so the
- * card's radio reads `--crtr-cards-control-*` over the family's `--crtr-control-box-*`.
- *
- * Defaults stay inline at the rule that spends them and no `--crtr-cards-*` token is ever
- * declared: an unset token is what carries the kit default down the chain, which is why an
- * unstyled page renders exactly as it did before any of this existed.
- */
-import { adoptComments, canRecordComments, findComment, setComment } from '../comments.js';
-import { controlStyle, focusRingStyle, writingBoxStyle } from '../controls.js';
-import { respond, savedIds, savedResponse } from '../host.js';
-import { applyReadOnly, isReadOnly } from '../readonly.js';
-import { registerElement } from '../register.js';
-import { registerSlotResponse } from '../responses.js';
-import { readSlotConfig, readSlotId } from '../slot-config.js';
-const STYLE = `
-  :host {
-    display: block;
-    /* Column count answers the element's own width, not the viewport: a slot can sit in
-       a narrow rail on a wide screen. */
-    container-type: inline-size;
-  }
-
-  [part~="container"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--crtr-cards-container-gap, var(--crtr-space-1));
-  }
-
-  /* The question reads as the agent's own prose above its control, matching the table's
-     caption rather than shouting over the cards it introduces. The container's gap is a
-     hairline, so the breathing room under the prompt is the prompt's own. */
-  [part~="label"] {
-    margin: 0 0 var(--crtr-cards-label-gap, var(--crtr-space-2));
-    color: var(--crtr-cards-label-text-color, var(--crtr-color-text-muted));
-  }
-
-  /* The column count is anatomy rather than paint — a container query cannot read a custom
-     property, so the breakpoint below stays a literal. */
-  [part~="grid"] {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--crtr-cards-grid-gap, var(--crtr-space-3));
-  }
-
-  @container (min-width: 30rem) {
-    [part~="grid"] {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    [part~="grid"][data-columns="3"] {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
-  [part~="card"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--crtr-cards-card-gap, var(--crtr-space-2));
-    padding: var(--crtr-cards-card-padding, var(--crtr-space-3));
-    color: var(--crtr-cards-card-text-color, var(--crtr-color-text));
-    background: var(--crtr-cards-card-fill, var(--crtr-color-surface));
-    border: var(--crtr-cards-card-border-width, 1px)
-      var(--crtr-cards-card-border-style, solid)
-      var(--crtr-cards-card-border-color, color-mix(in srgb, var(--crtr-color-border) 60%, transparent));
-    border-radius: var(--crtr-cards-card-radius, var(--crtr-radius-medium));
-    /* The whole card is the target, not just its heading — see the click handler. */
-    cursor: pointer;
-    transition: background-color var(--crtr-cards-card-transition, 120ms ease),
-      border-color var(--crtr-cards-card-transition, 120ms ease);
-  }
-
-  [part~="card"]:has([part~="control"]:disabled) {
-    cursor: default;
-  }
-
-  [part~="card"]:hover,
-  [part~="card"][part~="active"] {
-    background: var(--crtr-cards-card-hover-fill, var(--crtr-color-surface-hover));
-    border-color: var(--crtr-cards-card-hover-border-color, var(--crtr-color-border));
-  }
-
-  [part~="card"][part~="selected"] {
-    background: var(--crtr-cards-card-selected-fill, color-mix(in srgb, var(--crtr-color-accent) 10%, transparent));
-    border-color: var(--crtr-cards-card-selected-border-color, color-mix(in srgb, var(--crtr-color-accent) 45%, transparent));
-  }
-
-  [part~="card"][part~="selected"]:hover,
-  [part~="card"][part~="selected"][part~="active"] {
-    background: var(--crtr-cards-card-selected-hover-fill, color-mix(in srgb, var(--crtr-color-accent) 14%, transparent));
-  }
-
-  [part~="card-header"] {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--crtr-cards-card-header-gap, var(--crtr-space-2));
-  }
-
-  /* The label carries the click target, so the whole heading toggles the native control
-     the way the kit's Label does — and the comment button stays its own control. */
-  [part~="card-label"] {
-    display: flex;
-    flex: 1;
-    align-items: flex-start;
-    gap: var(--crtr-cards-card-label-gap, var(--crtr-space-2));
-    min-width: 0;
-    font: var(--crtr-cards-card-label-font, inherit);
-    cursor: pointer;
-  }
-
-  ${controlStyle({ scope: 'cards-control' }, '[part~="control"]')}
-
-  /* Centred on the card's title line, which sets its own tighter line-height. The box size
-     is read back through --control-box, the local the recipe above resolves it into, so a
-     host that resizes the control keeps it centred without touching this offset. */
-  [part~="control"] {
-    margin-top: var(--crtr-cards-control-offset, calc((1.35em - var(--control-box)) / 2));
-  }
-
-  [part~="card-heading"] {
-    display: grid;
-    flex: 1;
-    gap: var(--crtr-cards-card-heading-gap, calc(var(--crtr-space-1) / 2));
-    min-width: 0;
-  }
-
-  [part~="card-title"] {
-    font-weight: var(--crtr-cards-card-title-font-weight, 500);
-    line-height: var(--crtr-cards-card-title-line-height, 1.35);
-  }
-
-  [part~="card-subtitle"] {
-    color: var(--crtr-cards-card-subtitle-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-cards-card-subtitle-font-size, 0.875em);
-  }
-
-  [part~="card-body"] {
-    margin: var(--crtr-cards-card-body-margin, 0);
-    color: var(--crtr-cards-card-body-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-cards-card-body-font-size, 0.875em);
-    line-height: var(--crtr-cards-card-body-line-height, 1.6);
-  }
-
-  [part~="tag"] {
-    align-self: flex-start;
-    padding: var(--crtr-cards-tag-padding, 0 var(--crtr-space-1));
-    color: var(--crtr-cards-tag-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-cards-tag-font-size, 0.75em);
-    line-height: var(--crtr-cards-tag-line-height, 1.7);
-    border: var(--crtr-cards-tag-border-width, 1px)
-      var(--crtr-cards-tag-border-style, solid)
-      var(--crtr-cards-tag-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-cards-tag-radius, var(--crtr-radius-small));
-  }
-
-  [part~="card"][part~="selected"] [part~="tag"] {
-    color: var(--crtr-cards-tag-selected-text-color, var(--crtr-color-accent));
-    background: var(--crtr-cards-tag-selected-fill, color-mix(in srgb, var(--crtr-color-accent) 10%, transparent));
-    border-color: var(--crtr-cards-tag-selected-border-color, color-mix(in srgb, var(--crtr-color-accent) 45%, transparent));
-  }
-
-  /* The affordance is quiet until you reach for it, and stays visible once a note lives
-     there — that presence is the whole "there is a comment here" signal. */
-  [part~="comment-button"] {
-    flex: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* One knob: the affordance is a square, so its width and height are the same value. */
-    width: var(--crtr-cards-comment-button-size, 1.5em);
-    height: var(--crtr-cards-comment-button-size, 1.5em);
-    padding: var(--crtr-cards-comment-button-padding, 0);
-    color: var(--crtr-cards-comment-button-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-cards-comment-button-fill, none);
-    border: var(--crtr-cards-comment-button-border-width, 1px)
-      var(--crtr-cards-comment-button-border-style, solid)
-      var(--crtr-cards-comment-button-border-color, transparent);
-    border-radius: var(--crtr-cards-comment-button-radius, var(--crtr-radius-small));
-    cursor: pointer;
-    opacity: var(--crtr-cards-comment-button-resting-opacity, 0);
-    transition: opacity var(--crtr-cards-comment-button-transition, var(--crtr-control-transition, 120ms ease)),
-      color var(--crtr-cards-comment-button-transition, var(--crtr-control-transition, 120ms ease)),
-      background-color var(--crtr-cards-comment-button-transition, var(--crtr-control-transition, 120ms ease));
-  }
-
-  [part~="comment-button"] svg {
-    width: var(--crtr-cards-comment-button-icon-size, 0.875em);
-    height: var(--crtr-cards-comment-button-icon-size, 0.875em);
-    fill: var(--crtr-cards-comment-button-icon-fill, none);
-    stroke: var(--crtr-cards-comment-button-icon-stroke-color, currentColor);
-    stroke-width: var(--crtr-cards-comment-button-icon-stroke-width, 2);
-    stroke-linecap: var(--crtr-cards-comment-button-icon-line-cap, round);
-    stroke-linejoin: var(--crtr-cards-comment-button-icon-line-join, round);
-    /* The glyph is never the event target: a repaint that swaps it mid-press would
-       otherwise leave mousedown and mouseup on different nodes and eat the click. */
-    pointer-events: none;
-  }
-
-  [part~="comment-button"]:hover {
-    color: var(--crtr-cards-comment-button-hover-text-color, var(--crtr-color-text));
-    background: var(--crtr-cards-comment-button-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-  [part~="comment-button"][part~="has-comment"] {
-    color: var(--crtr-cards-comment-button-noted-text-color, var(--crtr-color-accent));
-  }
-
-${focusRingStyle({ scope: 'cards-comment-button' }, '[part~="comment-button"]')}
-  [part~="card"]:hover [part~="comment-button"],
-  [part~="card"]:focus-within [part~="comment-button"],
-  [part~="comment-button"]:focus-visible,
-  [part~="comment-button"][part~="has-comment"] {
-    opacity: var(--crtr-cards-comment-button-revealed-opacity, 1);
-  }
-
-  [part~="comment-editor"] {
-    display: grid;
-    gap: var(--crtr-cards-comment-editor-gap, var(--crtr-space-2));
-    width: 100%;
-    padding: var(--crtr-cards-comment-editor-padding, var(--crtr-space-2));
-    text-align: var(--crtr-cards-comment-editor-text-align, left);
-    background: var(--crtr-cards-comment-editor-fill, var(--crtr-color-background));
-    border: var(--crtr-cards-comment-editor-border-width, 1px)
-      var(--crtr-cards-comment-editor-border-style, solid)
-      var(--crtr-cards-comment-editor-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-cards-comment-editor-radius, var(--crtr-radius-small));
-    cursor: auto;
-  }
-
-  /* The editor's own prose, in the page's voice — not a caps-mono field label shouting a
-     card id at someone who just clicked that card. */
-  [part~="comment-subject"] {
-    color: var(--crtr-cards-comment-subject-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-cards-comment-subject-font-size, 0.875em);
-  }
-
-  [part~="comment-hint"] {
-    color: var(--crtr-cards-comment-hint-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-cards-comment-hint-font-size, 0.875em);
-  }
-
-${writingBoxStyle({ scope: 'cards-comment-input' }, '[part~="comment-input"]')}
-  [part~="comment-input"] {
-    min-height: var(--crtr-cards-comment-input-min-height, 4.5em);
-    resize: vertical;
-  }
-
-  [part~="comment-actions"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--crtr-cards-comment-actions-gap, var(--crtr-space-2));
-  }
-
-  [part~="comment-buttons"] {
-    display: flex;
-    gap: var(--crtr-cards-comment-buttons-gap, var(--crtr-space-1));
-  }
-
-  [part~="comment-cancel"] {
-    padding: var(--crtr-cards-comment-cancel-padding, var(--crtr-space-1) var(--crtr-space-2));
-    color: var(--crtr-cards-comment-cancel-text-color, var(--crtr-color-text-muted));
-    font: var(--crtr-cards-comment-cancel-font, inherit);
-    font-size: var(--crtr-cards-comment-cancel-font-size, 0.875em);
-    background: var(--crtr-cards-comment-cancel-fill, none);
-    border: var(--crtr-cards-comment-cancel-border-width, 1px)
-      var(--crtr-cards-comment-cancel-border-style, solid)
-      var(--crtr-cards-comment-cancel-border-color, transparent);
-    border-radius: var(--crtr-cards-comment-cancel-radius, var(--crtr-radius-small));
-    cursor: pointer;
-    transition: color var(--crtr-cards-comment-cancel-transition, var(--crtr-control-transition, 120ms ease)),
-      background-color var(--crtr-cards-comment-cancel-transition, var(--crtr-control-transition, 120ms ease)),
-      border-color var(--crtr-cards-comment-cancel-transition, var(--crtr-control-transition, 120ms ease));
-  }
-
-  [part~="comment-cancel"]:hover {
-    color: var(--crtr-cards-comment-cancel-hover-text-color, var(--crtr-color-text));
-    background: var(--crtr-cards-comment-cancel-hover-fill, var(--crtr-color-surface-hover));
-  }
-
-  [part~="comment-save"] {
-    padding: var(--crtr-cards-comment-save-padding, var(--crtr-space-1) var(--crtr-space-2));
-    color: var(--crtr-cards-comment-save-text-color, var(--crtr-color-accent-contrast));
-    font: var(--crtr-cards-comment-save-font, inherit);
-    font-size: var(--crtr-cards-comment-save-font-size, 0.875em);
-    background: var(--crtr-cards-comment-save-fill, var(--crtr-color-accent));
-    border: var(--crtr-cards-comment-save-border-width, 1px)
-      var(--crtr-cards-comment-save-border-style, solid)
-      var(--crtr-cards-comment-save-border-color, var(--crtr-color-accent));
-    border-radius: var(--crtr-cards-comment-save-radius, var(--crtr-radius-small));
-    cursor: pointer;
-    transition: color var(--crtr-cards-comment-save-transition, var(--crtr-control-transition, 120ms ease)),
-      background-color var(--crtr-cards-comment-save-transition, var(--crtr-control-transition, 120ms ease)),
-      border-color var(--crtr-cards-comment-save-transition, var(--crtr-control-transition, 120ms ease));
-  }
-
-  /* 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-cards-comment-save-hover-fill, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
-    border-color: var(--crtr-cards-comment-save-hover-border-color, color-mix(in srgb, var(--crtr-color-accent) 88%, var(--crtr-color-text)));
-  }
-
-${focusRingStyle({ scope: 'cards-comment-cancel' }, '[part~="comment-cancel"]')}
-${focusRingStyle({ scope: 'cards-comment-save' }, '[part~="comment-save"]')}
-  /* These sit in the flow of the page rather than above it, so they carry no elevation —
-     a shadow in this bundle means floating (a popover, an editor). Each state keeps its own
-     scope even though their kit defaults match: one scope never names two different parts. */
-  [part~="unavailable"] {
-    padding: var(--crtr-cards-unavailable-padding, var(--crtr-space-3));
-    color: var(--crtr-cards-unavailable-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-cards-unavailable-fill, var(--crtr-color-surface));
-    border: var(--crtr-cards-unavailable-border-width, 1px)
-      var(--crtr-cards-unavailable-border-style, solid)
-      var(--crtr-cards-unavailable-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-cards-unavailable-radius, var(--crtr-radius-medium));
-  }
-
-  [part~="empty"] {
-    padding: var(--crtr-cards-empty-padding, var(--crtr-space-3));
-    color: var(--crtr-cards-empty-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-cards-empty-fill, var(--crtr-color-surface));
-    border: var(--crtr-cards-empty-border-width, 1px)
-      var(--crtr-cards-empty-border-style, solid)
-      var(--crtr-cards-empty-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-cards-empty-radius, var(--crtr-radius-medium));
-  }
-
-  [part~="loading"] {
-    padding: var(--crtr-cards-loading-padding, var(--crtr-space-3));
-    color: var(--crtr-cards-loading-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-cards-loading-fill, var(--crtr-color-surface));
-    border: var(--crtr-cards-loading-border-width, 1px)
-      var(--crtr-cards-loading-border-style, solid)
-      var(--crtr-cards-loading-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-cards-loading-radius, var(--crtr-radius-medium));
-  }
-
-  [part~="kind"] {
-    color: var(--crtr-cards-kind-text-color, var(--crtr-color-text));
-    font-family: var(--crtr-cards-kind-font-family, var(--crtr-font-mono));
-  }
-
-  [part~="reason"] {
-    display: block;
-    margin-top: var(--crtr-cards-reason-gap, var(--crtr-space-1));
-    font-size: var(--crtr-cards-reason-font-size, 0.875em);
-  }
-`;
-/**
- * A card is a plain `{ id, title }` record; everything else is optional prose. This mirrors
- * `cardSchema`, which is strict — an unknown key means the data is not a card, so a typo
- * surfaces as an unavailable state rather than a silently dropped field.
- */
-const CARD_KEYS = new Set(['id', 'title', 'subtitle', 'body', 'tag']);
-function normalizeCard(raw) {
-    if (raw === null || typeof raw !== 'object' || Array.isArray(raw))
-        return null;
-    const value = raw;
-    if (typeof value.id !== 'string' || value.id === '')
-        return null;
-    if (typeof value.title !== 'string' || value.title === '')
-        return null;
-    for (const key of ['subtitle', 'body', 'tag']) {
-        if (value[key] !== undefined && typeof value[key] !== 'string')
-            return null;
-    }
-    for (const key of Object.keys(value)) {
-        if (!CARD_KEYS.has(key))
-            return null;
-    }
-    return {
-        id: value.id,
-        title: value.title,
-        subtitle: value.subtitle,
-        body: value.body,
-        tag: value.tag,
-    };
-}
-/** A card list, or `null` when the data is not one. Ids must be unique — selection keys off them. */
-function normalizeCards(raw) {
-    if (!Array.isArray(raw))
-        return null;
-    const cards = [];
-    const seen = new Set();
-    for (const entry of raw) {
-        const card = normalizeCard(entry);
-        if (card === null || seen.has(card.id))
-            return null;
-        seen.add(card.id);
-        cards.push(card);
-    }
-    return cards;
-}
-const CONFIG_KEYS = new Set(['label', 'cards', 'mode', 'columns']);
-/** Ids are scoped to this element's shadow root, so one constant is unique everywhere. */
-const LABEL_ID = 'prompt-label';
-/** Mirrors strict `cardsConfigSchema`, so this element accepts exactly what the agent may send. */
-function normalizeConfig(raw) {
-    for (const key of Object.keys(raw)) {
-        if (!CONFIG_KEYS.has(key))
-            return { status: 'invalid', reason: `unknown config property "${key}"` };
-    }
-    const label = raw.label;
-    if (label !== undefined && typeof label !== 'string')
-        return { status: 'invalid', reason: 'label must be a string' };
-    const mode = raw.mode;
-    if (mode !== 'single' && mode !== 'multi')
-        return { status: 'invalid', reason: 'mode must be "single" or "multi"' };
-    const columns = raw.columns;
-    if (columns !== undefined && columns !== 2 && columns !== 3) {
-        return { status: 'invalid', reason: 'columns must be 2 or 3' };
-    }
-    let cards;
-    if (raw.cards !== undefined) {
-        const parsed = normalizeCards(raw.cards);
-        if (parsed === null)
-            return { status: 'invalid', reason: 'cards must be a list of uniquely identified cards' };
-        cards = parsed;
-    }
-    return {
-        status: 'ok',
-        config: { label: label, cards, mode, columns },
-    };
-}
-/**
- * Typing in the comment box is ordinary writing — the list grammar keeps out of it. A card's
- * own radio or checkbox is not prose, so `j`/`k`/`x`/`c` still reach the grid from there.
- */
-function isTextEntry(target) {
-    if (target instanceof HTMLTextAreaElement)
-        return true;
-    if (target instanceof HTMLElement && target.isContentEditable)
-        return true;
-    if (!(target instanceof HTMLInputElement))
-        return false;
-    return target.type !== 'checkbox' && target.type !== 'radio';
-}
-const SVG_NS = 'http://www.w3.org/2000/svg';
-/** The comment glyph: a speech square, gaining a line of text once a note lives there. */
-function commentIcon(hasComment) {
-    const svg = document.createElementNS(SVG_NS, 'svg');
-    svg.setAttribute('viewBox', '0 0 24 24');
-    svg.setAttribute('aria-hidden', 'true');
-    const bubble = document.createElementNS(SVG_NS, 'path');
-    bubble.setAttribute('d', 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z');
-    svg.append(bubble);
-    const marks = hasComment
-        ? [
-            ['7', '9', '17', '9'],
-            ['7', '13', '13', '13'],
-        ]
-        : [
-            ['12', '7', '12', '13'],
-            ['9', '10', '15', '10'],
-        ];
-    for (const [x1, y1, x2, y2] of marks) {
-        const line = document.createElementNS(SVG_NS, 'line');
-        line.setAttribute('x1', x1 ?? '0');
-        line.setAttribute('y1', y1 ?? '0');
-        line.setAttribute('x2', x2 ?? '0');
-        line.setAttribute('y2', y2 ?? '0');
-        svg.append(line);
-    }
-    return svg;
-}
-/** The prompt above the grid, or nothing when the agent asked its question elsewhere. */
-function buildLabel(text) {
-    if (text === undefined || text === '')
-        return null;
-    const label = document.createElement('p');
-    label.part.add('label');
-    label.id = LABEL_ID;
-    label.textContent = text;
-    return label;
-}
-/** Radio groups are keyed by name, so every element on a page needs its own. */
-let groupCounter = 0;
-class CrtrCardsElement extends HTMLElement {
-    /** The host marks a resolved or canceled page `inert`; that is this element's read-only signal. */
-    static observedAttributes = ['inert'];
-    #container = document.createElement('div');
-    #group;
-    #config = null;
-    /** The rendered prompt, kept across repaints because every render replaces the container. */
-    #label = null;
-    #cards = [];
-    #slotId;
-    // Response state. Authoritative for rendering; `respond()` only asks the host to save it.
-    #selected = [];
-    #comments = [];
-    #activeId = null;
-    #nodes = new Map();
-    #open = null;
-    #editor = null;
-    constructor() {
-        super();
-        groupCounter += 1;
-        this.#group = `crtr-cards-${groupCounter}`;
-        const root = this.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = STYLE;
-        this.#container.part.add('container');
-        this.#container.addEventListener('keydown', (event) => this.#onKeyDown(event));
-        root.append(style, this.#container);
-    }
-    connectedCallback() {
-        const read = readSlotConfig(this);
-        if (read.status !== 'ok') {
-            this.#renderUnavailable(read.reason);
-            return;
-        }
-        const normalized = normalizeConfig(read.config);
-        if (normalized.status !== 'ok') {
-            this.#renderUnavailable(normalized.reason);
-            return;
-        }
-        this.#config = normalized.config;
-        this.#slotId = readSlotId(this);
-        // Registered before render: the pager reports every response-bearing slot
-        // at submit, whether or not the person ever selected a card.
-        if (this.#slotId !== undefined)
-            registerSlotResponse(this, this.#slotId, () => this.#response());
-        this.#label = buildLabel(normalized.config.label);
-        this.#cards = normalized.config.cards ?? [];
-        this.#hydrate();
-        this.#build();
-    }
-    attributeChangedCallback() {
-        if (this.isConnected)
-            this.#syncReadOnly();
-    }
-    /** Repainted after every build, because a rebuild replaces the controls. */
-    #syncReadOnly() {
-        const readOnly = isReadOnly(this);
-        applyReadOnly(this.#container, readOnly);
-        if (readOnly && this.#open !== null)
-            this.#closeEditor(false);
-    }
-    /**
-     * Seed local state from the answer the host is already holding, so a reopened page shows
-     * the cards that were picked. `#build` is what drops ids the current data no longer has,
-     * so this only has to re-impose single-select.
-     */
-    #hydrate() {
-        if (this.#slotId === undefined)
-            return;
-        const saved = savedResponse(this.#slotId);
-        if (saved === undefined)
-            return;
-        const ids = this.#cards.map((card) => card.id).filter((id) => savedIds(saved.selectedCardIds).includes(id));
-        this.#selected = this.#config?.mode === 'single' ? ids.slice(0, 1) : ids;
-        this.#comments = adoptComments(saved.comments);
-    }
-    // ---------------------------------------------------------------- rendering
-    #renderUnavailable(reason) {
-        this.#nodes.clear();
-        this.#open = null;
-        this.#editor = null;
-        const box = document.createElement('div');
-        box.part.add('unavailable');
-        box.setAttribute('role', 'status');
-        const kind = document.createElement('span');
-        kind.part.add('kind');
-        kind.textContent = 'cards';
-        const detail = document.createElement('span');
-        detail.part.add('reason');
-        detail.textContent = reason;
-        box.append('Component unavailable: ', kind, detail);
-        this.#setContent(box);
-    }
-    #renderStatus(part, text) {
-        const box = document.createElement('div');
-        box.part.add(part);
-        box.setAttribute('role', 'status');
-        box.textContent = text;
-        this.#setContent(box);
-    }
-    /** Every repaint replaces the container's children, so the prompt is re-laid each time. */
-    #setContent(content) {
-        if (this.#label === null)
-            this.#container.replaceChildren(content);
-        else
-            this.#container.replaceChildren(this.#label, content);
-    }
-    /** Builds the grid once per data load; every later change repaints in place. */
-    #build() {
-        const config = this.#config;
-        if (config === null)
-            return;
-        this.#nodes.clear();
-        this.#open = null;
-        this.#editor = null;
-        // A selection or comment carried over from a previous data load can only name a card
-        // that is still here — true even when the new load has no cards at all.
-        const ids = new Set(this.#cards.map((card) => card.id));
-        this.#selected = this.#selected.filter((id) => ids.has(id));
-        this.#comments = this.#comments.filter((comment) => comment.anchor.kind !== 'card' || ids.has(comment.anchor.cardId));
-        if (this.#cards.length === 0) {
-            this.#renderStatus('empty', 'No cards to choose from.');
-            return;
-        }
-        const grid = document.createElement('div');
-        grid.part.add('grid');
-        if (config.columns === 3)
-            grid.dataset.columns = '3';
-        if (this.#label !== null) {
-            // A named group of choices: single-select is a radio group, multi a plain group.
-            grid.setAttribute('role', config.mode === 'single' ? 'radiogroup' : 'group');
-            grid.setAttribute('aria-labelledby', LABEL_ID);
-        }
-        grid.append(...this.#cards.map((card) => this.#buildCard(card, config.mode, this.#group)));
-        this.#setContent(grid);
-        this.#paint();
-    }
-    #buildCard(card, mode, group) {
-        const root = document.createElement('div');
-        root.part.add('card');
-        root.dataset.cardId = card.id;
-        const header = document.createElement('div');
-        header.part.add('card-header');
-        // The surface is presentational; the real radio / checkbox is the control, so a
-        // native radio group's arrow keys, Enter and Space all behave as they always do.
-        const label = document.createElement('label');
-        label.part.add('card-label');
-        const control = document.createElement('input');
-        control.part.add('control');
-        control.type = mode === 'single' ? 'radio' : 'checkbox';
-        control.name = group;
-        control.value = card.id;
-        control.addEventListener('change', () => this.#toggle(card.id, control.checked));
-        control.addEventListener('focus', () => this.#setActive(card.id, false));
-        const heading = document.createElement('span');
-        heading.part.add('card-heading');
-        const title = document.createElement('span');
-        title.part.add('card-title');
-        title.textContent = card.title;
-        heading.append(title);
-        if (card.subtitle !== undefined && card.subtitle !== '') {
-            const subtitle = document.createElement('span');
-            subtitle.part.add('card-subtitle');
-            subtitle.textContent = card.subtitle;
-            heading.append(subtitle);
-        }
-        let commentButton;
-        if (canRecordComments(this.#slotId)) {
-            commentButton = document.createElement('button');
-            commentButton.type = 'button';
-            commentButton.part.add('comment-button');
-            commentButton.addEventListener('click', (event) => {
-                event.stopPropagation();
-                this.#setActive(card.id, false);
-                this.#toggleEditor({ kind: 'card', cardId: card.id }, card.title, root, null);
-            });
-        }
-        label.append(control, heading);
-        header.append(label);
-        if (commentButton !== undefined)
-            header.append(commentButton);
-        root.append(header);
-        if (card.body !== undefined && card.body !== '') {
-            const body = document.createElement('p');
-            body.part.add('card-body');
-            body.textContent = card.body;
-            root.append(body);
-        }
-        let tag = null;
-        if (card.tag !== undefined && card.tag !== '') {
-            tag = document.createElement('span');
-            tag.part.add('tag');
-            tag.textContent = card.tag;
-            root.append(tag);
-        }
-        root.addEventListener('mouseenter', () => this.#setActive(card.id, false));
-        root.addEventListener('mouseleave', () => {
-            if (this.#activeId === card.id)
-                this.#setActive(null, false);
-        });
-        root.addEventListener('focusin', () => this.#setActive(card.id, false));
-        // The whole card is the choice, not just its heading: a click on the body, the tag, or
-        // the padding around them picks the card. A click that went through the label is left
-        // alone — the native control has already toggled from it, and toggling again here would
-        // undo the user's own click. The comment button and the editor stop propagation, so a
-        // press on either never reaches this. A press that ends a text selection is someone
-        // reading the card, not choosing it.
-        root.addEventListener('click', (event) => {
-            if (control.disabled)
-                return;
-            if (event.composedPath().includes(label))
-                return;
-            if (document.getSelection()?.isCollapsed === false)
-                return;
-            this.#setActive(card.id, false);
-            this.#toggle(card.id, !this.#selected.includes(card.id));
-        });
-        this.#nodes.set(card.id, {
-            root,
-            control,
-            ...(commentButton === undefined ? {} : { commentButton }),
-            tag,
-        });
-        return root;
-    }
-    /** Repaints selection, activity and comment presence without rebuilding the grid. */
-    #paint() {
-        const mode = this.#config?.mode ?? 'multi';
-        const tabbableId = mode === 'single' ? (this.#selected[0] ?? this.#cards[0]?.id) : undefined;
-        for (const card of this.#cards) {
-            const node = this.#nodes.get(card.id);
-            if (node === undefined)
-                continue;
-            const selected = this.#selected.includes(card.id);
-            node.root.part.toggle('selected', selected);
-            node.root.part.toggle('active', this.#activeId === card.id);
-            node.control.checked = selected;
-            // A radio group holds one tab stop; an unselected group still needs an entry point.
-            node.control.tabIndex = mode === 'single' && card.id !== tabbableId ? -1 : 0;
-            const comment = findComment(this.#comments, { kind: 'card', cardId: card.id });
-            if (node.commentButton !== undefined)
-                this.#paintCommentButton(node.commentButton, comment, card.title);
-        }
-        this.#syncReadOnly();
-    }
-    #paintCommentButton(button, comment, target) {
-        const has = comment !== undefined;
-        const glyphChanged = button.part.contains('has-comment') !== has;
-        button.part.toggle('has-comment', has);
-        button.setAttribute('aria-label', has ? `Edit comment on ${target}` : `Comment on ${target}`);
-        // The saved note reads on hover, so a comment is legible without opening its editor.
-        if (has)
-            button.title = comment.text;
-        else
-            button.removeAttribute('title');
-        // Paint runs on every hover and focus change; only a real change touches the DOM.
-        if (glyphChanged || button.childElementCount === 0)
-            button.replaceChildren(commentIcon(has));
-    }
-    // ------------------------------------------------------------- interaction
-    #setActive(id, focus) {
-        if (this.#activeId === id && !focus)
-            return;
-        this.#activeId = id;
-        this.#paint();
-        if (focus && id !== null)
-            this.#nodes.get(id)?.control.focus();
-    }
-    #toggle(cardId, selected) {
-        if (this.#config === null || isReadOnly(this))
-            return;
-        if (this.#config.mode === 'single') {
-            // Radio semantics: choosing a card replaces the answer, and re-choosing keeps it.
-            this.#selected = [cardId];
-        }
-        else {
-            const next = selected
-                ? [...this.#selected, cardId]
-                : this.#selected.filter((id) => id !== cardId);
-            // Selection reads back in the order the agent authored the cards, not click order.
-            this.#selected = this.#cards.map((card) => card.id).filter((id) => next.includes(id));
-        }
-        this.#paint();
-        this.#emit();
-    }
-    #onKeyDown(event) {
-        if (event.metaKey || event.ctrlKey || event.altKey)
-            return;
-        if (isTextEntry(event.target))
-            return;
-        const ids = this.#cards.map((card) => card.id);
-        if (ids.length === 0)
-            return;
-        const key = event.key.toLowerCase();
-        const currentId = this.#activeId ?? this.#selected[this.#selected.length - 1] ?? ids[0] ?? '';
-        if (key === 'j' || key === 'k') {
-            event.preventDefault();
-            const index = Math.max(0, ids.indexOf(currentId));
-            const step = key === 'j' ? 1 : -1;
-            const nextId = ids[(index + step + ids.length) % ids.length];
-            if (nextId !== undefined)
-                this.#setActive(nextId, true);
-            return;
-        }
-        if (key === 'x') {
-            event.preventDefault();
-            this.#toggle(currentId, this.#config?.mode === 'single' ? true : !this.#selected.includes(currentId));
-            return;
-        }
-        if (key === 'c') {
-            event.preventDefault();
-            const card = this.#cards.find((entry) => entry.id === currentId);
-            const node = this.#nodes.get(currentId);
-            if (card === undefined || node?.commentButton === undefined)
-                return;
-            this.#setActive(currentId, false);
-            this.#toggleEditor({ kind: 'card', cardId: card.id }, card.title, node.root, null);
-        }
-        // Enter, Space and the arrow keys are left to the native radio / checkbox, exactly as
-        // the kit leaves them — this handler only adds the list grammar on top.
-    }
-    // ----------------------------------------------------------------- comments
-    /** Opens the editor for `anchor`, or closes it when it is already the open one. */
-    #toggleEditor(anchor, target, mount, after) {
-        if (mount === null || !canRecordComments(this.#slotId) || isReadOnly(this))
-            return;
-        const openAnchor = this.#open?.anchor;
-        const sameAnchor = openAnchor !== undefined &&
-            openAnchor.kind === anchor.kind &&
-            (anchor.kind !== 'card' || (openAnchor.kind === 'card' && openAnchor.cardId === anchor.cardId));
-        this.#closeEditor(false);
-        if (sameAnchor)
-            return;
-        this.#openEditor({ anchor, target, mount, after });
-    }
-    #openEditor(open) {
-        const editor = document.createElement('div');
-        editor.part.add('comment-editor');
-        // The editor lives inside the card it comments on; a click in it is not a card click.
-        editor.addEventListener('click', (event) => event.stopPropagation());
-        const subject = document.createElement('p');
-        subject.part.add('comment-subject');
-        subject.textContent = `Comment on ${open.target}`;
-        const input = document.createElement('textarea');
-        input.part.add('comment-input');
-        input.placeholder = 'What should the agent know about this?';
-        // Seeded from the saved comment every time it opens, so an abandoned edit never leaks.
-        input.value = findComment(this.#comments, open.anchor)?.text ?? '';
-        const actions = document.createElement('div');
-        actions.part.add('comment-actions');
-        const hint = document.createElement('span');
-        hint.part.add('comment-hint');
-        hint.textContent = findComment(this.#comments, open.anchor) !== undefined ? 'empty to delete' : '⌘↵ to save';
-        const buttons = document.createElement('div');
-        buttons.part.add('comment-buttons');
-        const cancel = document.createElement('button');
-        cancel.type = 'button';
-        cancel.part.add('comment-cancel');
-        cancel.textContent = 'Cancel';
-        cancel.addEventListener('click', () => this.#closeEditor(true));
-        const save = document.createElement('button');
-        save.type = 'button';
-        save.part.add('comment-save');
-        save.textContent = 'Save';
-        save.addEventListener('click', () => this.#commitComment(input.value));
-        buttons.append(cancel, save);
-        actions.append(hint, buttons);
-        input.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                this.#commitComment(input.value);
-                return;
-            }
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.#closeEditor(true);
-            }
-        });
-        editor.append(subject, input, actions);
-        if (open.after !== null)
-            open.after.after(editor);
-        else
-            open.mount.append(editor);
-        this.#open = open;
-        this.#editor = editor;
-        input.focus();
-    }
-    #closeEditor(restoreFocus) {
-        const open = this.#open;
-        this.#editor?.remove();
-        this.#editor = null;
-        this.#open = null;
-        if (!restoreFocus || open === null)
-            return;
-        if (open.anchor.kind === 'card')
-            this.#nodes.get(open.anchor.cardId)?.control.focus();
-    }
-    #commitComment(text) {
-        const open = this.#open;
-        if (open === null || isReadOnly(this))
-            return;
-        this.#comments = setComment(this.#comments, open.anchor, text);
-        this.#closeEditor(true);
-        this.#paint();
-        this.#emit();
-    }
-    // ----------------------------------------------------------------- response
-    #response() {
-        return { selectedCardIds: [...this.#selected], comments: this.#comments.map((comment) => ({ ...comment })) };
-    }
-    /** Every user change hands the host this slot's complete current response, never a delta. */
-    #emit() {
-        if (this.#slotId === undefined)
-            return;
-        respond(this.#slotId, this.#response());
-    }
-}
-registerElement('crtr-cards', CrtrCardsElement);