@contraagent/elements 0.0.0-stage → 0.1.0

package/src/primitives/roving-focus.ts

@@ -0,0 +1,138 @@
+// One tab stop for a group of items: the arrow keys move the focus between them
+// (a roving tabindex), Tab leaves the group.
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export interface RovingFocusOptions {
+  /** The items, in order (row by row in a grid). */
+  items: () => readonly HTMLElement[];
+  /** Which arrow keys move: Left and Right, Up and Down, or both (a grid). */
+  layout: 'horizontal' | 'vertical' | 'grid';
+  /** The number of columns of a grid. */
+  columns?: () => number;
+  /** From the last item to the first and back (not in a grid). */
+  wrap?: boolean;
+  /** Called after the focus moved to `el`. */
+  onMove?: (el: HTMLElement, index: number) => void;
+}
+
+/**
+ * Where a key moves the focus among `n` items from `i`, or null when it does not
+ * move. A grid has `cols` columns: Left and Right move in the row, Up and Down in
+ * the column, Home and End to the row's ends, with Ctrl to the first and last
+ * item.
+ */
+export function rovingStep(
+  n: number,
+  i: number,
+  key: string,
+  o: { layout: RovingFocusOptions['layout']; cols?: number; wrap?: boolean; ctrl?: boolean },
+): number | null {
+  if (n <= 0) return null;
+  const to = (j: number): number | null => (j === i || j < 0 || j >= n ? null : j);
+  if (o.layout === 'grid') {
+    const cols = Math.max(1, o.cols ?? 1);
+    const row = Math.floor(i / cols) * cols;
+    switch (key) {
+      case 'ArrowRight':
+        return (i + 1) % cols && i + 1 < n ? to(i + 1) : null;
+      case 'ArrowLeft':
+        return i % cols ? to(i - 1) : null;
+      case 'ArrowDown':
+        return to(i + cols);
+      case 'ArrowUp':
+        return to(i - cols);
+      case 'Home':
+        return to(o.ctrl ? 0 : row);
+      case 'End':
+        return to(o.ctrl ? n - 1 : Math.min(row + cols, n) - 1);
+      default:
+        return null;
+    }
+  }
+  const [prev, next] = o.layout === 'horizontal' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown'];
+  const step = (s: number): number | null => (o.wrap ? to((i + s + n) % n) : to(i + s));
+  switch (key) {
+    case next:
+      return step(1);
+    case prev:
+      return step(-1);
+    case 'Home':
+      return to(0);
+    case 'End':
+      return to(n - 1);
+    default:
+      return null;
+  }
+}
+
+/**
+ * A roving tabindex over the host's items: the current item has `tabindex=0`, the
+ * others -1, and the keys of `rovingStep` move the focus. `current` follows a
+ * click or a focus too.
+ */
+export class RovingFocusController implements ReactiveController {
+  /** The index of the item that holds the tab stop. */
+  current = 0;
+
+  constructor(
+    private readonly host: ReactiveControllerHost & HTMLElement,
+    private readonly o: RovingFocusOptions,
+  ) {
+    host.addController(this);
+  }
+
+  hostConnected(): void {
+    this.host.addEventListener('keydown', this.onKey);
+    this.host.addEventListener('focusin', this.onFocus);
+  }
+
+  hostDisconnected(): void {
+    this.host.removeEventListener('keydown', this.onKey);
+    this.host.removeEventListener('focusin', this.onFocus);
+  }
+
+  hostUpdated(): void {
+    this.sync();
+  }
+
+  /** Gives the tab stop to item `i`, without moving the focus. */
+  set(i: number): void {
+    this.current = i;
+    this.sync();
+  }
+
+  private sync(): void {
+    const items = this.o.items();
+    if (!items.length) return;
+    this.current = Math.min(Math.max(0, this.current), items.length - 1);
+    items.forEach((el, j) => (el.tabIndex = j === this.current ? 0 : -1));
+  }
+
+  private indexOf(e: Event): number {
+    const items = this.o.items();
+    return items.findIndex((el) => e.composedPath().includes(el));
+  }
+
+  private readonly onFocus = (e: FocusEvent): void => {
+    const i = this.indexOf(e);
+    if (i >= 0 && i !== this.current) this.set(i);
+  };
+
+  private readonly onKey = (e: KeyboardEvent): void => {
+    const items = this.o.items();
+    const i = this.indexOf(e);
+    if (i < 0) return;
+    const j = rovingStep(items.length, i, e.key, {
+      layout: this.o.layout,
+      cols: this.o.columns?.(),
+      wrap: this.o.wrap,
+      ctrl: e.ctrlKey || e.metaKey,
+    });
+    const el = j === null ? undefined : items[j];
+    if (j === null || !el) return;
+    e.preventDefault();
+    this.set(j);
+    el.focus();
+    this.o.onMove?.(el, j);
+  };
+}

package/src/primitives/segmented.ts

@@ -0,0 +1,92 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { emit } from '../core/events.js';
+import { base } from '../styles/index.js';
+import { RovingFocusController } from './roving-focus.js';
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+  title?: string;
+  disabled?: boolean;
+  /** The option's language (`lang`), when its label is in another language than the page. */
+  lang?: string;
+}
+
+/**
+ * One choice among a few, as a row of buttons (a radio group): a click, or the
+ * arrow keys, Home and End, choose. The group is one tab stop.
+ *
+ * Its look: `--cae-segmented-radius`, `--cae-segmented-height`,
+ * `--cae-segmented-padding`, `--cae-segmented-font-size`,
+ * `--cae-segmented-divider` (the line between options) and
+ * `--cae-segmented-hover` (an option's text under the pointer), or the parts.
+ *
+ * @tagname cae-segmented
+ * @fires cae-change - `{value}`: the option the reader chose
+ * @csspart group - the row of options
+ * @csspart option - each option
+ * @csspart option-selected - the chosen option
+ */
+export class CaeSegmented extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host { display: inline-flex; vertical-align: middle; }
+      .group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--cae-segmented-radius, 6px); overflow: hidden; }
+      button { min-width: 22px; height: var(--cae-segmented-height, 20px); line-height: var(--cae-segmented-height, 20px); padding: var(--cae-segmented-padding, 0 10px);
+        margin: 0; border: 0; border-radius: 0; background: none; font-size: var(--cae-segmented-font-size, 11.5px); text-align: center;
+        color: var(--text-muted); cursor: pointer; }
+      button + button { border-left: var(--cae-segmented-divider, 1px solid var(--line)); }
+      button:hover { color: var(--cae-segmented-hover, var(--text)); }
+      button[aria-checked='true'] { background: var(--raise); color: var(--text); cursor: default; }
+      button:disabled { opacity: 0.5; cursor: default; }
+      button:focus-visible { outline-offset: -2px; }
+    `,
+  ];
+
+  @property({ attribute: false }) options: readonly SegmentedOption[] = [];
+  @property() value = '';
+  /** The group's accessible name. */
+  @property() label = '';
+
+  private readonly roving = new RovingFocusController(this, {
+    items: () => [...(this.renderRoot.querySelectorAll<HTMLButtonElement>('button:not(:disabled)') ?? [])],
+    layout: 'horizontal',
+    wrap: true,
+    onMove: (el) => this.choose(el.dataset['value'] ?? ''),
+  });
+
+  override willUpdate(): void {
+    const i = this.options.filter((o) => !o.disabled).findIndex((o) => o.value === this.value);
+    if (i >= 0) this.roving.current = i;
+  }
+
+  private choose(value: string): void {
+    if (value === this.value) return;
+    this.value = value;
+    emit(this, 'cae-change', { value });
+  }
+
+  override render() {
+    return html`<div class="group" part="group" role="radiogroup" aria-label=${this.label || nothing}>
+      ${repeat(
+        this.options,
+        (o) => o.value,
+        (o) => {
+          const on = o.value === this.value;
+          return html`<button type="button" role="radio" part=${on ? 'option option-selected' : 'option'} aria-checked=${on ? 'true' : 'false'}
+            data-value=${o.value} lang=${o.lang || nothing} title=${o.title || nothing} ?disabled=${!!o.disabled}
+            @click=${() => this.choose(o.value)}>${o.label}</button>`;
+        },
+      )}
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cae-segmented': CaeSegmented;
+  }
+}

package/src/primitives/share-bar.ts

@@ -0,0 +1,94 @@
+// A share bar: one whole, as a single 100% bar of its parts, side by side.
+import { css, html, nothing, type TemplateResult } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+export interface SharePart {
+  /** What tells the part apart (a stable key). */
+  id: string;
+  /** The part's name, the same as in the legend beside the bar. */
+  label: string;
+  /** Its amount; a part of 0 draws nothing. */
+  value: number;
+  /** Its colour: a CSS colour or `var(...)`, the same as its swatch in the legend. */
+  color: string;
+  /** The amount in words, for the tooltip (`$0.12`, `1.2k`). */
+  text?: string;
+}
+
+export interface ShareBarOptions {
+  /** The bar's accessible name. */
+  label?: string;
+  /** The smallest share (0..1) whose part is named under the bar; default 0.15. */
+  labelAt?: number;
+}
+
+/**
+ * Whole percents (0..100) for `values`, summing to exactly 100 when any is above 0
+ * (the largest remainders round up); all 0 when none is.
+ */
+export function wholePercents(values: readonly number[]): number[] {
+  const total = values.reduce((a, v) => a + Math.max(v, 0), 0);
+  if (!total) return values.map(() => 0);
+  const exact = values.map((v) => (100 * Math.max(v, 0)) / total);
+  const out = exact.map(Math.floor);
+  const order = exact.map((x, i) => [x - Math.floor(x), i] as const).sort((a, b) => b[0] - a[0] || a[1] - b[1]);
+  for (let k = 0, left = 100 - out.reduce((a, v) => a + v, 0); k < left; k++) out[order[k]![1]]! += 1;
+  return out;
+}
+
+/** A share in words: `42%`, `<1%` for a part above 0 that rounds to 0. */
+export const sharePercent = (pct: number, value: number): string => (pct === 0 && value > 0 ? '<1%' : `${pct}%`);
+
+/**
+ * The parts of a whole as one bar (`.share`, part `share`): each part a segment as
+ * wide as its share, 2px apart, in the order given (so a part keeps its place when
+ * the amounts change), with its name and share under it when it is wide enough.
+ * Hovering or focusing a segment shows its name, share and amount; each segment is
+ * a tab stop with the same words. Name every part beside the bar too (a legend or a
+ * table): a colour alone never says which part is which.
+ */
+export function shareBar(parts: readonly SharePart[], o: ShareBarOptions = {}): TemplateResult {
+  const shown = parts.filter((p) => p.value > 0);
+  const pcts = wholePercents(shown.map((p) => p.value));
+  const total = shown.reduce((a, p) => a + p.value, 0);
+  const labelAt = o.labelAt ?? 0.15;
+  const words = (p: SharePart, i: number) => [p.label, sharePercent(pcts[i]!, p.value), p.text].filter(Boolean).join(' | ');
+  return html`<div class="share" part="share">
+    <div class="share-bar" role="list" aria-label=${o.label || nothing}>
+      ${shown.map(
+        (p, i) => html`<span class="share-seg" role="listitem" tabindex="0" aria-label=${words(p, i)} data-id=${p.id}
+          data-edge=${i === 0 ? 'start' : i === shown.length - 1 ? 'end' : nothing}
+          style=${styleMap({ flexGrow: String(p.value / total), background: p.color })}
+          ><span class="share-tip" aria-hidden="true">${words(p, i)}</span></span>`,
+      )}
+    </div>
+    <div class="share-names" aria-hidden="true">
+      ${shown.map(
+        (p, i) => html`<span style=${styleMap({ flexGrow: String(p.value / total) })}
+          >${p.value / total >= labelAt ? html`<b>${p.label}</b> ${sharePercent(pcts[i]!, p.value)}` : nothing}</span>`,
+      )}
+    </div>
+  </div>`;
+}
+
+export const shareBarStyles = css`
+  .share { display: grid; gap: 6px; }
+  .share-bar, .share-names { display: flex; gap: 2px; min-width: 0; }
+  .share-bar { height: 14px; }
+  .share-seg { position: relative; flex: 0 1 0; min-width: 3px; height: 100%; border-radius: 1px; cursor: default; outline-offset: 2px; }
+  .share-seg[data-edge='start'] { border-radius: 4px 1px 1px 4px; }
+  .share-seg[data-edge='end'] { border-radius: 1px 4px 4px 1px; }
+  .share-seg:only-child { border-radius: 4px; }
+  /* A hit area taller than the bar. */
+  .share-seg::before { content: ''; position: absolute; inset: -6px 0; }
+  .share-seg:hover, .share-seg:focus-visible { box-shadow: 0 0 0 2px var(--card); }
+  .share-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2;
+    padding: 4px 8px; border-radius: var(--radius-sm); background: var(--raise); border: 1px solid var(--line2); box-shadow: 0 4px 14px var(--shadow);
+    color: var(--text); font-size: var(--font-size-sm); white-space: nowrap; pointer-events: none; }
+  .share-seg[data-edge='start'] .share-tip, .share-seg:only-child .share-tip { left: 0; transform: none; }
+  .share-seg[data-edge='end'] .share-tip { left: auto; right: 0; transform: none; }
+  .share-seg:hover .share-tip, .share-seg:focus-visible .share-tip { display: block; }
+  .share-names span { flex: 0 1 0; min-width: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font-size: var(--font-size-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
+  .share-names b { font-weight: 600; color: var(--text-2); }
+`;

package/src/primitives/states.ts

@@ -0,0 +1,28 @@
+// States and their looks: a state is an id the host chooses; `StateStyles` maps it
+// to a word, a tone and a shape, and orders the states (the legend's order).
+import type { Tone } from '../core/tone.js';
+import type { MarkShape } from './legend.js';
+
+export interface StateStyle {
+  /** The word beside a mark and in the legend. */
+  label: string;
+  tone: Tone;
+  shape: MarkShape;
+  /** Higher is more severe: what a mark standing for several items shows. */
+  rank: number;
+  /** How many items are in this state, number first ("3 failed"); default: the number and `label`. */
+  count?: (n: number) => string;
+}
+
+/** State id → look. The key order is the legend order. */
+export type StateStyles = Readonly<Record<string, StateStyle>>;
+
+/** The most severe of `states` by `styles` (an unknown state ranks lowest); '' for none. */
+export function worstState(states: Iterable<string>, styles: StateStyles): string {
+  let worst = '';
+  for (const s of states) if (worst === '' || (styles[s]?.rank ?? -Infinity) > (styles[worst]?.rank ?? -Infinity)) worst = s;
+  return worst;
+}
+
+/** How many items are in state `s`, in words. */
+export const stateCount = (styles: StateStyles, s: string, n: number): string => styles[s]?.count?.(n) ?? `${n} ${styles[s]?.label ?? s}`;

package/src/primitives/window.ts

@@ -0,0 +1,65 @@
+// Windowing: which rows of a long list of fixed-height rows are drawn, and the
+// space that stands for the rows above and below them.
+
+export interface RowWindow {
+  /** The first row drawn. */
+  from: number;
+  /** The row after the last drawn. */
+  to: number;
+  /** The height that stands for the rows above `from`. */
+  padTop: number;
+  /** The height that stands for the rows from `to` on. */
+  padBottom: number;
+}
+
+/**
+ * The rows of `total` rows of `rowHeight` px that a viewport of `viewport` px,
+ * scrolled to `scrollTop`, shows, with `overscan` more rows on each side.
+ */
+export function windowRows(total: number, scrollTop: number, viewport: number, rowHeight: number, overscan = 8): RowWindow {
+  const n = Math.max(0, Math.floor(total));
+  if (!n || rowHeight <= 0) return { from: 0, to: n, padTop: 0, padBottom: 0 };
+  const first = Math.floor(Math.max(0, scrollTop) / rowHeight);
+  const shown = Math.ceil(Math.max(0, viewport) / rowHeight) + 1;
+  const from = Math.min(n, Math.max(0, first - overscan));
+  const to = Math.min(n, Math.max(from, first + shown + overscan));
+  return { from, to, padTop: from * rowHeight, padBottom: (n - to) * rowHeight };
+}
+
+/**
+ * The rows a viewport of `viewport` px, scrolled to `scrollTop`, shows, when rows
+ * differ in height: `offsets[i]` is where row `i` starts and `offsets[total]` is
+ * the height of all of them (`rowOffsets`), with `overscan` more rows on each side.
+ */
+export function windowRowsAt(offsets: readonly number[], scrollTop: number, viewport: number, overscan = 8): RowWindow {
+  const n = Math.max(0, offsets.length - 1);
+  const all = offsets[n] ?? 0;
+  if (!n || all <= 0) return { from: 0, to: n, padTop: 0, padBottom: 0 };
+  const top = Math.max(0, scrollTop);
+  const first = rowAt(offsets, top);
+  const last = rowAt(offsets, top + Math.max(0, viewport));
+  const from = Math.max(0, first - overscan);
+  const to = Math.min(n, Math.max(from, last + 1 + overscan));
+  return { from, to, padTop: offsets[from]!, padBottom: all - offsets[to]! };
+}
+
+/** Where each of `total` rows starts, and the height of all of them last: `height(i)` is row `i`'s. */
+export function rowOffsets(total: number, height: (i: number) => number): number[] {
+  const out = new Array<number>(Math.max(0, total) + 1);
+  out[0] = 0;
+  for (let i = 0; i < total; i++) out[i + 1] = out[i]! + Math.max(0, height(i));
+  return out;
+}
+
+/** The row that holds `y`: the last `i` with `offsets[i] <= y`, at most the last row. */
+function rowAt(offsets: readonly number[], y: number): number {
+  const n = offsets.length - 1;
+  let lo = 0;
+  let hi = n - 1;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (offsets[mid]! <= y) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo;
+}

package/src/styles/chips.ts

@@ -0,0 +1,18 @@
+// Chips: a row of chips (stages: done, current, to come), a task's name, a tag, a key.
+import { css } from 'lit';
+
+export const chipStyles = css`
+  .tag { font-size: var(--font-size-xs); padding: 0 7px; border-radius: var(--radius-pill); border: 1px solid var(--line2); color: var(--text-muted); white-space: nowrap; }
+  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+  .chip { font-size: var(--font-size-sm); padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--text-muted); white-space: nowrap; }
+  .chip[data-tone='done'] { color: var(--text-2); }
+  .chip[data-tone='done'] > [aria-hidden] { color: var(--tone); font-weight: 700; }
+  .chip[data-tone='running'] { background: var(--tone); color: var(--bg); border-color: var(--tone); font-weight: 600; animation: ping 1.6s var(--ease) infinite; }
+  .chip.todo { opacity: 0.65; }
+  .taskchip { display: inline-block; font: inherit; font-family: var(--mono); font-size: var(--font-size-sm); line-height: 1.5; padding: 0 8px;
+    border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--raise); color: var(--text-2); white-space: nowrap; }
+  button.taskchip { cursor: pointer; }
+  button.taskchip:hover { border-color: var(--accent); color: var(--text); }
+  .kbd { font-family: var(--mono); font-size: var(--font-size-xs); border: 1px solid var(--line2); border-bottom-width: 2px;
+    border-radius: var(--radius-sm); padding: 0 4px; color: var(--text-muted); }
+`;

package/src/styles/facts.ts

@@ -0,0 +1,7 @@
+// Labelled facts in a row that wraps (the run's process, a task's definition).
+import { css } from 'lit';
+
+export const factStyles = css`
+  .drv-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: var(--font-size-md); }
+  .drv-facts i { font-style: normal; color: var(--text-muted); margin-right: 5px; font-size: var(--font-size-sm); }
+`;

package/src/styles/index.ts

@@ -0,0 +1,19 @@
+// The stylesheets the elements share, one job each. `base` is what every element
+// starts from; the others are opt-in, for the elements that show what they style.
+import type { CSSResult } from 'lit';
+import { chipStyles } from './chips.js';
+import { layoutStyles } from './layout.js';
+import { motionStyles } from './motion.js';
+import { resetStyles } from './reset.js';
+import { statusStyles } from './status.js';
+import { textStyles } from './text.js';
+import { tokenStyles } from './tokens.js';
+
+export { chipStyles, layoutStyles, motionStyles, resetStyles, statusStyles, textStyles, tokenStyles };
+export { prose } from './prose.js';
+export { meterStyles } from './meter.js';
+export { factStyles } from './facts.js';
+export { markStyles } from './marks.js';
+
+/** Every element's styles, in cascade order: the tokens, then the shared rules. */
+export const base: CSSResult[] = [tokenStyles, resetStyles, textStyles, statusStyles, chipStyles, layoutStyles, motionStyles];

package/src/styles/layout.ts

@@ -0,0 +1,33 @@
+// Layout: the 12-column grid, a panel, a section heading, an empty state, a
+// short clickable row. The grid is a container: its columns follow its own
+// width, not the window's.
+import { css } from 'lit';
+
+export const layoutStyles = css`
+  .g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; container-type: inline-size; }
+  .c12 { grid-column: span 12; }
+  .c7 { grid-column: span 7; }
+  .c5 { grid-column: span 5; }
+  @container (max-width: 1100px) {
+    .c7, .c5 { grid-column: span 12; }
+  }
+  .panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line);
+    border-radius: var(--radius-lg); padding: 14px 16px; min-width: 0; box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 40%, transparent); }
+  .panel > h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
+  .panel > h3 .r { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
+  .sect-h { margin: 14px 0 8px; font-size: var(--font-size-md); color: var(--text-2); font-weight: 600; }
+  .sect-h .meta { margin-left: 8px; font-weight: 400; }
+
+  .blank { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 16px; color: var(--text-muted); text-align: center; }
+  .blank .ic { font-size: 30px; opacity: 0.55; }
+  .blank b { color: var(--text-2); font-weight: 600; }
+  .blank a.lnk { text-decoration: underline; }
+  .blank.small { padding: 24px; }
+
+  /* a short clickable row (failures, launches): a button, or a row whose name (.fl-name) is the button */
+  .fl { padding: 7px 10px; border-radius: var(--radius-md); cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: baseline; }
+  button.fl { width: 100%; background: none; border: 0; color: inherit; text-align: start; }
+  .fl-name { background: none; border: 0; padding: 0; color: inherit; font-weight: 700; text-align: start; cursor: pointer; min-width: 0; }
+  .fl > .meta:last-child { grid-column: 1 / 4; overflow: hidden; text-overflow: ellipsis; }
+  .fl:hover { background: var(--raise); }
+`;

package/src/styles/marks.ts

@@ -0,0 +1,30 @@
+// A status mark: a small square or round shape in a state's look (`data-tone` for
+// its colour, `data-shape` for its shape), sized by `--m`. In a `.big` group a
+// failed mark carries ✕, and a badge (`data-n`) is written in the mark.
+import { css } from 'lit';
+
+export const markStyles = css`
+  .mark { width: var(--m); height: var(--m); padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--tone, var(--status-done)); opacity: 0.9;
+    cursor: pointer; position: relative; transition: opacity 0.2s, transform 0.15s, background 0.3s; }
+  .mark:not([data-tone]) { --tone: initial; }
+  .mark[data-tone='muted'] { opacity: 0.55; }
+  .mark[data-tone='running'] { opacity: 1; animation: breathe 1.4s ease-in-out infinite; }
+  .mark[data-shape='ring'] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tone, var(--line2)); }
+  .mark[data-shape='hatched'] { border-radius: 2px; background: repeating-linear-gradient(135deg, transparent 0 2px, color-mix(in srgb, var(--tone) 55%, transparent) 2px 3px);
+    box-shadow: inset 0 0 0 1.5px var(--tone); opacity: 1; }
+  .mark[data-shape='half'] { background: linear-gradient(0deg, var(--tone) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--tone); opacity: 1; }
+  .mark[data-shape='square'] { border-radius: 2px; opacity: 1; }
+  .big .mark[data-tone='failed']::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--bg);
+    font-size: calc(var(--m) - 3px); line-height: 1; font-weight: 700; }
+  /* A badge (a count): in the mark; a small mark has a hole instead. */
+  .mark[data-n]::after { content: ''; position: absolute; inset: 32%; border-radius: 50%; background: var(--card); }
+  .big .mark[data-n]::after { content: attr(data-n); inset: 0; display: grid; place-items: center; border-radius: 0; background: none;
+    font: 700 max(7px, calc(var(--m) - 4px)) / 1 var(--sans); color: var(--bg); letter-spacing: -0.5px; }
+  .big .mark:is(:not([data-tone]), [data-tone='attention'], [data-tone='muted'])[data-n]::after { color: var(--text); }
+  .mark:hover, .mark:focus-visible { transform: scale(1.4); outline: var(--focus-width) solid var(--text); outline-offset: 1px; z-index: 2; }
+  .mark.sel { outline: var(--focus-width) solid var(--accent); outline-offset: 2px; z-index: 2; }
+  @media (prefers-reduced-motion: reduce) {
+    .mark { transition: none; }
+    .mark[data-tone='running'] { animation: none; background: linear-gradient(90deg, var(--status-running) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--status-running); }
+  }
+`;

package/src/styles/meter.ts

@@ -0,0 +1,9 @@
+// A duration bar under a time (the task table and History).
+import { css } from 'lit';
+
+/** A duration: it measures, it does not judge (red only for a failed attempt). */
+export const meterStyles = css`
+  .jdur { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: 2px; }
+  .jdur i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--meter); }
+  .jdur i.bad { background: var(--status-failed); }
+`;

package/src/styles/motion.ts

@@ -0,0 +1,27 @@
+// Motion: the keyframes the elements use, and none of it for a reader who asks
+// for reduced motion.
+import { css } from 'lit';
+
+export const motionStyles = css`
+  .enter { animation: enter 0.5s var(--ease) both; }
+
+  @keyframes turn { to { transform: rotate(360deg); } }
+  @keyframes breathe {
+    0%, 100% { opacity: 0.45; box-shadow: 0 0 0 0 transparent; transform: scale(0.85); }
+    50% { opacity: 1; box-shadow: 0 0 0 4px var(--status-running-bg); transform: scale(1); }
+  }
+  @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-running) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
+  @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+  @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.04); box-shadow: 0 0 0 1px var(--line2); } 100% { transform: scale(1); } }
+  @keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+  @keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+  @keyframes stripes { to { background-position: 17px 0; } }
+  @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
+  @keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
+  @keyframes rowin { from { background: color-mix(in srgb, var(--text) 10%, transparent); } to { background: transparent; } }
+  @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-5px); opacity: 1; } }
+  @keyframes core-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.72); } }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important; transition: none !important; }
+  }
+`;

package/src/styles/prose.ts

@@ -0,0 +1,59 @@
+// Rendered markdown, highlighted code and JSON trees.
+import { css } from 'lit';
+
+/** Rendered markdown, highlighted code and JSON trees: transcripts, plugin files, panels. */
+export const prose = css`
+  .jtree { font-family: var(--mono); font-size: var(--font-size-md); overflow: auto; }
+  .jt { margin-left: 16px; }
+  details.jt > summary { cursor: pointer; list-style: revert; }
+  .jk { color: var(--code-name); }
+  .js { color: var(--code-string); }
+  .jn { color: var(--code-number); }
+
+  .md-p { margin: 0.15em 0; }
+  .md-gap { height: 0.5em; }
+  .md-h { font-weight: 600; margin: 0.7em 0 0.25em; }
+  .md-h1 { font-size: 1.25em; }
+  .md-h2 { font-size: 1.12em; }
+  .md-h3 { font-size: 1.03em; color: var(--text-2); }
+  .md-h4 { color: var(--text-2); }
+  .md-li { padding-left: 16px; text-indent: -12px; margin: 0.1em 0; }
+  .md-li::before { content: '• '; color: var(--text-muted); }
+  .md-ol::before { content: ''; }
+  .md-n { color: var(--text-muted); margin-right: 6px; }
+  .md-q { border-left: 3px solid var(--line2); padding-left: 10px; color: var(--text-2); margin: 0.2em 0; }
+  .md-hr { border: 0; border-top: 1px solid var(--line); margin: 0.7em 0; }
+  .md-t { border-collapse: collapse; margin: 0.4em 0; }
+  .md-t th, .md-t td { border: 1px solid var(--line); padding: 3px 9px; text-align: left; font-size: 12.5px; }
+  .md-t th { background: var(--raise); }
+  .md-doc { padding: 10px 14px; background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-md); max-height: 460px; overflow: auto; line-height: 1.55; }
+  .md-doc code, .tx code { background: var(--raise); border-radius: var(--radius-sm); padding: 0 4px; font-size: 0.92em; }
+  .md-doc pre { background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; }
+  .md-doc pre code, .tx pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
+  .md-front { margin-bottom: 10px; border-collapse: collapse; }
+  .md-front td { padding: 2px 14px 2px 0; font-size: 12.5px; border: 0; vertical-align: top; }
+  .md-front td:first-child { color: var(--text-muted); }
+  .md-tele { color: var(--text-muted); font-size: 11.5px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .df-text { background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--font-size-md);
+    white-space: pre-wrap; max-height: 420px; overflow: auto; margin: 0; }
+  .df-tog { margin-left: auto; font-size: var(--font-size-sm); color: var(--accent); border: 1px solid var(--line2); border-radius: var(--radius-pill);
+    padding: 0 9px; cursor: pointer; background: none; }
+  .df-tog:hover { background: var(--accent-bg); }
+  /* a template placeholder in a prompt */
+  .pv { color: var(--code-constant); background: color-mix(in srgb, var(--code-constant) 12%, transparent); border-radius: var(--radius-sm); padding: 0 3px; }
+  .pv.pc { color: var(--code-keyword); background: color-mix(in srgb, var(--code-keyword) 12%, transparent); }
+
+  .hl { font-family: var(--mono); }
+  .hl-k { color: var(--code-keyword); }
+  .hl-const { color: var(--code-constant); font-style: italic; }
+  .hl-s { color: var(--code-string); }
+  .hl-doc { color: var(--code-string); font-style: italic; opacity: 0.85; }
+  .hl-c { color: var(--code-comment); font-style: italic; }
+  .hl-n { color: var(--code-number); }
+  .hl-d { color: var(--code-function); }
+  .hl-f { color: var(--code-function); font-weight: 600; }
+  .hl-cls { color: var(--code-type); font-weight: 700; }
+  .hl-t { color: var(--code-type); }
+  .hl-b { color: var(--code-name); }
+  .hl-key { color: var(--code-name); }
+`;

package/src/styles/reset.ts

@@ -0,0 +1,13 @@
+// What every element's shadow root starts from: box sizing, scrollbars, the
+// selection and the focus ring.
+import { css } from 'lit';
+
+export const resetStyles = css`
+  *, *::before, *::after { box-sizing: border-box; }
+  * { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
+  *:hover { scrollbar-color: var(--text-muted) transparent; }
+  ::selection { background: var(--selection); }
+  :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
+  button { font: inherit; color: inherit; }
+  [hidden] { display: none !important; }
+`;