terminoir 0.6.0 → 0.8.0

package/dist/components/ExpressionEditor.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import {
+    describe,
+    emptyNode,
+    groupOps,
+    isComplete,
+    opsFor,
+    paramText,
+    parseParam,
+    setAt,
+    type ExpressionField,
+    type ExpressionKind,
+    type ExpressionNode,
+    type ExpressionOp,
+    type ExpressionPath,
+    type ExpressionSlot,
+  } from '../utils/expression.js';
+  import IconButton from './IconButton.svelte';
+  import NavIcon from './NavIcon.svelte';
+
+  /**
+   * Scratch-style block editor for a typed expression tree. Each block is one node; its slots only
+   * offer ops whose result fits, so the tree is always well-typed. A plain-English reading sits
+   * under the blocks.
+   */
+  let {
+    ops,
+    fields = [],
+    value,
+    kind = 'boolean',
+    label,
+    onchange,
+    class: className = '',
+  }: {
+    /** The op catalogue, e.g. Oyster's `GET /expressions/ops`. */
+    ops: ExpressionOp[];
+    /** Fields a `key` param can name. */
+    fields?: ExpressionField[];
+    value: ExpressionNode | null;
+    /** What the whole expression must return. */
+    kind?: ExpressionKind;
+    /** Accessible name for the editor. */
+    label: string;
+    onchange: (value: ExpressionNode | null) => void;
+    class?: string;
+  } = $props();
+
+  const NONE = '';
+  const reading = $derived(value ? describe(value, ops, fields) : 'Nothing yet');
+  const complete = $derived(value ? isComplete(value, ops) : true);
+
+  function specOf(node: ExpressionNode | null): ExpressionOp | undefined {
+    return node ? ops.find((o) => o.op === node.op) : undefined;
+  }
+
+  function update(path: ExpressionPath, next: unknown) {
+    onchange(setAt(value, path, next) as ExpressionNode | null);
+  }
+
+  function choose(path: ExpressionPath, opName: string) {
+    const spec = ops.find((o) => o.op === opName);
+    update(path, spec ? emptyNode(spec) : null);
+  }
+</script>
+
+{#snippet picker(slotKind: ExpressionKind, path: ExpressionPath, current: string, pickerLabel: string)}
+  <select
+    class="terminoir-select terminoir-expr__pick terminoir-focusable"
+    aria-label={pickerLabel}
+    value={current}
+    onchange={(e) => {
+      const select = e.currentTarget as HTMLSelectElement;
+      choose(path, select.value);
+      // An "add" picker (no current op) goes back to its prompt for the next entry.
+      if (!current) select.value = NONE;
+    }}
+  >
+    <option value={NONE}>{current ? 'Remove' : 'Choose…'}</option>
+    {#each groupOps(opsFor(slotKind, ops)) as group (group.group)}
+      <optgroup label={group.group}>
+        {#each group.ops as op (op.op)}<option value={op.op}>{op.label}</option>{/each}
+      </optgroup>
+    {/each}
+  </select>
+{/snippet}
+
+{#snippet param(node: ExpressionNode, name: string, path: ExpressionPath)}
+  {#if name === 'key'}
+    <select
+      class="terminoir-select terminoir-expr__pick terminoir-focusable"
+      aria-label="Field"
+      value={String(node.key ?? '')}
+      onchange={(e) => update([...path, 'key'], (e.currentTarget as HTMLSelectElement).value)}
+    >
+      <option value="">Field…</option>
+      {#each fields as field (field.key)}<option value={field.key}>{field.label ?? field.key}</option>{/each}
+    </select>
+  {:else}
+    <input
+      class="terminoir-input terminoir-expr__param terminoir-focusable"
+      aria-label={name}
+      placeholder={name === 'options' ? 'a, b, c' : name}
+      value={paramText(node[name])}
+      onchange={(e) => update([...path, name], parseParam(name, (e.currentTarget as HTMLInputElement).value))}
+    />
+  {/if}
+{/snippet}
+
+{#snippet slotView(node: ExpressionNode, slot: ExpressionSlot, path: ExpressionPath)}
+  <div class="terminoir-expr__slot">
+    <span class="terminoir-expr__slot-name">{slot.name}</span>
+    {#if slot.many}
+      {@const list = Array.isArray(node[slot.name]) ? (node[slot.name] as ExpressionNode[]) : []}
+      <div class="terminoir-expr__list">
+        {#each list as child, i (i)}
+          <div class="terminoir-expr__entry">
+            {@render block(child, slot.kind, [...path, slot.name, i])}
+            <IconButton label={`Remove ${slot.name} ${i + 1}`} size="sm" onclick={() => update([...path, slot.name, i], undefined)}>
+              <NavIcon name="xmark" />
+            </IconButton>
+          </div>
+        {/each}
+        {@render picker(slot.kind, [...path, slot.name, list.length], NONE, `Add to ${slot.name}`)}
+      </div>
+    {:else}
+      {@render block((node[slot.name] as ExpressionNode | null) ?? null, slot.kind, [...path, slot.name])}
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet block(node: ExpressionNode | null, slotKind: ExpressionKind, path: ExpressionPath)}
+  {@const spec = specOf(node)}
+  <div class="terminoir-expr__block" class:terminoir-expr__block--empty={!node} data-kind={spec?.returns ?? slotKind}>
+    <div class="terminoir-expr__head">
+      {@render picker(slotKind, path, node?.op ?? NONE, path.length ? `Block at ${path.join(' ')}` : 'Expression')}
+      {#if node && spec}
+        {#each spec.params as name (name)}{@render param(node, name, path)}{/each}
+      {/if}
+    </div>
+    {#if node && spec?.slots.length}
+      <div class="terminoir-expr__slots">
+        {#each spec.slots as slot (slot.name)}{@render slotView(node, slot, path)}{/each}
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+<div class={cn('terminoir-expr', className)} role="group" aria-label={label}>
+  {@render block(value, kind, [])}
+  <p class="terminoir-expr__reading" class:terminoir-expr__reading--incomplete={!complete}>
+    {reading}{#if !complete} <span>(unfinished)</span>{/if}
+  </p>
+</div>
+
+<style>
+  .terminoir-expr { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; font-size: 0.8125rem; }
+  .terminoir-expr__block {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--block-accent, var(--primary));
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--foreground) 3%, transparent);
+    min-width: 0;
+  }
+  .terminoir-expr__block[data-kind='boolean'] { --block-accent: var(--primary); }
+  .terminoir-expr__block[data-kind='number'] { --block-accent: #3b82f6; }
+  .terminoir-expr__block[data-kind='date'] { --block-accent: #f59e0b; }
+  .terminoir-expr__block[data-kind='value'],
+  .terminoir-expr__block[data-kind='text'] { --block-accent: #10b981; }
+  .terminoir-expr__block--empty { border-style: dashed; background: transparent; }
+  .terminoir-expr__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+  .terminoir-expr__pick { width: auto; min-width: 8rem; }
+  .terminoir-expr__param { width: 9rem; }
+  .terminoir-expr__slots { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-3); }
+  .terminoir-expr__slot { display: flex; flex-direction: column; gap: var(--space-1); }
+  .terminoir-expr__slot-name { color: var(--muted-foreground); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
+  .terminoir-expr__list { display: flex; flex-direction: column; gap: var(--space-2); }
+  .terminoir-expr__entry { display: flex; gap: var(--space-1); align-items: flex-start; }
+  .terminoir-expr__entry > :first-child { flex: 1; }
+  .terminoir-expr__reading { margin: 0; color: var(--muted-foreground); }
+  .terminoir-expr__reading--incomplete span { color: var(--danger, #ef4444); }
+</style>

package/dist/components/ExpressionEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type ExpressionField, type ExpressionKind, type ExpressionNode, type ExpressionOp } from '../utils/expression.js';
+type $$ComponentProps = {
+    /** The op catalogue, e.g. Oyster's `GET /expressions/ops`. */
+    ops: ExpressionOp[];
+    /** Fields a `key` param can name. */
+    fields?: ExpressionField[];
+    value: ExpressionNode | null;
+    /** What the whole expression must return. */
+    kind?: ExpressionKind;
+    /** Accessible name for the editor. */
+    label: string;
+    onchange: (value: ExpressionNode | null) => void;
+    class?: string;
+};
+declare const ExpressionEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExpressionEditor = ReturnType<typeof ExpressionEditor>;
+export default ExpressionEditor;

package/dist/components/GridLayout.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import { moveTo, nearestIndex, spanAfterDrag, type GridItem } from '../utils/layout.js';
+  import NavIcon from './NavIcon.svelte';
+
+  /**
+   * Items in reading order on a column grid. Drag an item's move handle (render `handle` where it
+   * belongs, e.g. in a header) to reorder; drag its right edge to change its column span. Both
+   * have keyboard equivalents (arrow keys). `onchange` gets the new order and spans when a drag ends.
+   */
+  let {
+    items,
+    columns = 12,
+    minSpan = 3,
+    label,
+    onchange,
+    children,
+    class: className = '',
+  }: {
+    items: GridItem[];
+    columns?: number;
+    minSpan?: number;
+    /** Accessible name for the grid. */
+    label: string;
+    onchange: (items: GridItem[]) => void;
+    children: Snippet<[GridItem, Snippet]>;
+    class?: string;
+  } = $props();
+
+  let draft = $state<GridItem[] | null>(null);
+  const shown = $derived(draft ?? items);
+  let grid: HTMLDivElement | undefined = $state();
+
+  function cells(): HTMLElement[] {
+    return grid ? [...grid.querySelectorAll<HTMLElement>(':scope > .terminoir-grid__cell')] : [];
+  }
+
+  function commit() {
+    if (draft) onchange(draft);
+    draft = null;
+  }
+
+  function startMove(event: PointerEvent, id: string) {
+    const handle = event.currentTarget as HTMLElement;
+    handle.setPointerCapture(event.pointerId);
+    draft = items.slice();
+    const move = (e: PointerEvent) => {
+      const centres = cells().map((cell) => {
+        const r = cell.getBoundingClientRect();
+        return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+      });
+      if (draft) draft = moveTo(draft, id, nearestIndex(centres, e.clientX, e.clientY));
+    };
+    const end = () => {
+      handle.removeEventListener('pointermove', move);
+      handle.removeEventListener('pointerup', end);
+      handle.removeEventListener('pointercancel', end);
+      commit();
+    };
+    handle.addEventListener('pointermove', move);
+    handle.addEventListener('pointerup', end);
+    handle.addEventListener('pointercancel', end);
+  }
+
+  function startResize(event: PointerEvent, item: GridItem) {
+    const edge = event.currentTarget as HTMLElement;
+    edge.setPointerCapture(event.pointerId);
+    const startX = event.clientX;
+    const columnWidth = (grid?.clientWidth ?? 0) / columns;
+    draft = items.slice();
+    const move = (e: PointerEvent) => {
+      const span = spanAfterDrag(item.span, e.clientX - startX, columnWidth, minSpan, columns);
+      if (draft) draft = draft.map((i) => (i.id === item.id ? { ...i, span } : i));
+    };
+    const end = () => {
+      edge.removeEventListener('pointermove', move);
+      edge.removeEventListener('pointerup', end);
+      edge.removeEventListener('pointercancel', end);
+      commit();
+    };
+    edge.addEventListener('pointermove', move);
+    edge.addEventListener('pointerup', end);
+    edge.addEventListener('pointercancel', end);
+  }
+
+  function keyMove(event: KeyboardEvent, id: string) {
+    const step = { ArrowUp: -1, ArrowLeft: -1, ArrowDown: 1, ArrowRight: 1 }[event.key];
+    if (!step) return;
+    event.preventDefault();
+    const index = items.findIndex((i) => i.id === id);
+    onchange(moveTo(items, id, index + step));
+  }
+
+  function keyResize(event: KeyboardEvent, item: GridItem) {
+    const step = { ArrowLeft: -1, ArrowRight: 1 }[event.key];
+    if (!step) return;
+    event.preventDefault();
+    const span = Math.max(minSpan, Math.min(columns, item.span + step));
+    if (span !== item.span) onchange(items.map((i) => (i.id === item.id ? { ...i, span } : i)));
+  }
+</script>
+
+<div
+  bind:this={grid}
+  class={cn('terminoir-grid', draft && 'terminoir-grid--dragging', className)}
+  style:--grid-columns={columns}
+  role="list"
+  aria-label={label}
+>
+  {#each shown as item (item.id)}
+    {#snippet handle()}
+      <button
+        type="button"
+        class="terminoir-grid__move terminoir-focusable"
+        aria-label="Move (drag, or use arrow keys)"
+        title="Drag to move"
+        onpointerdown={(event) => startMove(event, item.id)}
+        onkeydown={(event) => keyMove(event, item.id)}
+      >
+        <NavIcon name="grip-vertical" />
+      </button>
+    {/snippet}
+    <div class="terminoir-grid__cell" style:--span={Math.min(item.span, columns)} role="listitem">
+      {@render children(item, handle)}
+      <button
+        type="button"
+        class="terminoir-grid__resize terminoir-focusable"
+        aria-label={`Width ${item.span} of ${columns} columns (drag, or use left and right arrows)`}
+        title="Drag to resize"
+        onpointerdown={(event) => startResize(event, item)}
+        onkeydown={(event) => keyResize(event, item)}
+      ></button>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .terminoir-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+    gap: var(--space-4);
+    align-items: start;
+    min-width: 0;
+  }
+  .terminoir-grid__cell { position: relative; grid-column: span var(--span); min-width: 0; }
+  @media (max-width: 700px) {
+    .terminoir-grid__cell { grid-column: 1 / -1; }
+    .terminoir-grid__resize { display: none; }
+  }
+  .terminoir-grid--dragging { user-select: none; }
+  .terminoir-grid--dragging .terminoir-grid__cell { transition: none; }
+  .terminoir-grid__move {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm, 0.375rem);
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: grab;
+    touch-action: none;
+  }
+  .terminoir-grid__move:active { cursor: grabbing; }
+  .terminoir-grid__move:hover { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+  .terminoir-grid__resize {
+    position: absolute;
+    top: var(--space-3);
+    bottom: var(--space-3);
+    right: calc(var(--space-2) * -1);
+    width: var(--space-3);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: ew-resize;
+    touch-action: none;
+  }
+  .terminoir-grid__resize::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 2px;
+    border-radius: 1px;
+    background: transparent;
+    transition: background 120ms ease;
+  }
+  .terminoir-grid__resize:hover::after,
+  .terminoir-grid__resize:focus-visible::after { background: var(--primary); }
+</style>

package/dist/components/GridLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type GridItem } from '../utils/layout.js';
+type $$ComponentProps = {
+    items: GridItem[];
+    columns?: number;
+    minSpan?: number;
+    /** Accessible name for the grid. */
+    label: string;
+    onchange: (items: GridItem[]) => void;
+    children: Snippet<[GridItem, Snippet]>;
+    class?: string;
+};
+declare const GridLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type GridLayout = ReturnType<typeof GridLayout>;
+export default GridLayout;

package/dist/components/PropertyRow.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import NavIcon from './NavIcon.svelte';
+
+  let {
+    label,
+    icon,
+    class: className = '',
+    children,
+  }: {
+    label: string;
+    /** NavIcon name hinting at the value's kind, e.g. `calendar`. */
+    icon?: string;
+    class?: string;
+    /** One value control, rendered with its own label hidden. */
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('terminoir-property-row', className)}>
+  <span class="terminoir-property-row__label" title={label}>
+    {#if icon}<NavIcon name={icon} />{/if}
+    <span class="terminoir-property-row__text">{label}</span>
+  </span>
+  <div class="terminoir-property-row__value">{@render children?.()}</div>
+</div>
+
+<style>
+  .terminoir-property-row {
+    display: grid;
+    grid-template-columns: minmax(6.5rem, 9.5rem) minmax(0, 1fr);
+    align-items: center;
+    gap: var(--space-3);
+    min-height: 2.25rem;
+    padding-inline: var(--space-2);
+    margin-inline: calc(-1 * var(--space-2));
+    border-radius: var(--radius-control);
+    transition: background 120ms ease;
+  }
+  .terminoir-property-row:hover,
+  .terminoir-property-row:focus-within {
+    background: color-mix(in srgb, var(--foreground) 4%, transparent);
+  }
+  .terminoir-property-row__label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+  }
+  .terminoir-property-row__label :global(i) {
+    width: 1rem;
+    flex-shrink: 0;
+    text-align: center;
+    font-size: 0.75rem;
+    opacity: 0.75;
+  }
+  .terminoir-property-row__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .terminoir-property-row__value {
+    min-width: 0;
+  }
+</style>

package/dist/components/PropertyRow.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    /** NavIcon name hinting at the value's kind, e.g. `calendar`. */
+    icon?: string;
+    class?: string;
+    /** One value control, rendered with its own label hidden. */
+    children?: Snippet;
+};
+declare const PropertyRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type PropertyRow = ReturnType<typeof PropertyRow>;
+export default PropertyRow;

package/dist/components/SearchPicker.svelte

@@ -136,6 +136,8 @@
 </div>
 
 <style>
+  /* In a row (e.g. after selected chips) the search box takes the remaining width. */
+  .terminoir-picker { flex: 1 1 8rem; min-width: 8rem; }
   .terminoir-picker__anchor { position: relative; }
   .terminoir-picker__list {
     position: absolute;

package/dist/components/Timeline.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
+  import { timelineRows, timelineScale, todayOffset, type TimelineItem } from '../utils/timeline.js';
+
+  /** Gantt-style bars over a shared day scale; one row per item, grouped under headings. */
+  let {
+    items,
+    label,
+    onItemClick,
+    class: className = '',
+  }: {
+    items: TimelineItem[];
+    /** Accessible name for the chart. */
+    label: string;
+    onItemClick?: (item: TimelineItem) => void;
+    class?: string;
+  } = $props();
+
+  const scale = $derived(timelineScale(items));
+  const rows = $derived(timelineRows(items, scale));
+  const today = $derived(todayOffset(scale));
+
+  function day(d: Date): string {
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  }
+
+  function range(item: TimelineItem): string {
+    return item.end && item.end.getTime() !== item.start.getTime() ? `${day(item.start)} – ${day(item.end)}` : day(item.start);
+  }
+</script>
+
+<div class={cn('terminoir-timeline', className)} role="group" aria-label={label}>
+  <div class="terminoir-timeline__grid">
+    <div class="terminoir-timeline__corner" aria-hidden="true"></div>
+    <div class="terminoir-timeline__scale" aria-hidden="true">
+      {#each scale.ticks as tick (tick.date.getTime())}
+        <span class="terminoir-timeline__tick" style:left={`${tick.left}%`}>{day(tick.date)}</span>
+      {/each}
+    </div>
+    {#each rows as row (row.group ?? '')}
+      {#if row.group}<div class="terminoir-timeline__group">{row.group}</div>{/if}
+      {#each row.bars as bar (bar.item.id)}
+        <div class="terminoir-timeline__label" title={bar.item.title}>{bar.item.title}</div>
+        <div class="terminoir-timeline__track">
+          {#if today !== null}<div class="terminoir-timeline__today" style:left={`${today}%`} aria-hidden="true"></div>{/if}
+          <button
+            type="button"
+            class="terminoir-timeline__bar terminoir-focusable"
+            style:left={`${bar.left}%`}
+            style:width={`${bar.width}%`}
+            style:--bar-color={labelColor(bar.item.color) ?? 'var(--primary)'}
+            aria-label={`${bar.item.title}, ${range(bar.item)}`}
+            title={`${bar.item.title} · ${range(bar.item)}`}
+            disabled={!onItemClick}
+            onclick={() => onItemClick?.(bar.item)}
+          ></button>
+        </div>
+      {/each}
+    {/each}
+  </div>
+</div>
+
+<style>
+  .terminoir-timeline {
+    --timeline-row: 1.75rem;
+    --timeline-label: minmax(8rem, 14rem);
+    font-size: 0.8125rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow-x: auto;
+    min-width: 0;
+  }
+  .terminoir-timeline__grid {
+    display: grid;
+    grid-template-columns: var(--timeline-label) minmax(24rem, 1fr);
+    min-width: 0;
+    padding-bottom: var(--space-1);
+  }
+  .terminoir-timeline__corner,
+  .terminoir-timeline__scale { height: 1.75rem; border-bottom: 1px solid var(--border); }
+  .terminoir-timeline__scale { position: relative; color: var(--muted-foreground); font-size: 0.6875rem; }
+  .terminoir-timeline__tick {
+    position: absolute;
+    top: 0.5rem;
+    padding-left: 0.25rem;
+    border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+    white-space: nowrap;
+  }
+  .terminoir-timeline__group {
+    grid-column: 1 / -1;
+    padding: var(--space-2) var(--space-2) var(--space-1);
+    color: var(--muted-foreground);
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .terminoir-timeline__label {
+    display: flex;
+    align-items: center;
+    height: var(--timeline-row);
+    padding: 0 var(--space-2);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .terminoir-timeline__track { position: relative; height: var(--timeline-row); }
+  .terminoir-timeline__today {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--primary);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .terminoir-timeline__bar {
+    position: absolute;
+    top: 0.375rem;
+    bottom: 0.375rem;
+    min-width: 0.5rem;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--bar-color) 70%, transparent);
+    border-radius: var(--radius-pill);
+    background: color-mix(in srgb, var(--bar-color) 45%, transparent);
+    cursor: pointer;
+  }
+  .terminoir-timeline__bar:disabled { cursor: default; }
+  .terminoir-timeline__bar:hover:not(:disabled) { background: color-mix(in srgb, var(--bar-color) 65%, transparent); }
+</style>

package/dist/components/Timeline.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type TimelineItem } from '../utils/timeline.js';
+type $$ComponentProps = {
+    items: TimelineItem[];
+    /** Accessible name for the chart. */
+    label: string;
+    onItemClick?: (item: TimelineItem) => void;
+    class?: string;
+};
+declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/index.d.ts

@@ -47,6 +47,14 @@ export { default as Inline } from './components/Inline.svelte';
 export { default as Text } from './components/Text.svelte';
 export { default as Disclosure } from './components/Disclosure.svelte';
 export { default as GroupedList } from './components/GroupedList.svelte';
+export { default as Timeline } from './components/Timeline.svelte';
+export type { TimelineItem } from './utils/timeline.js';
+export { default as BucketGrid } from './components/BucketGrid.svelte';
+export type { Bucket } from './components/BucketGrid.svelte';
+export { default as GridLayout } from './components/GridLayout.svelte';
+export type { GridItem } from './utils/layout.js';
+export { default as ExpressionEditor } from './components/ExpressionEditor.svelte';
+export { describe as describeExpression, isComplete as isCompleteExpression, type ExpressionField, type ExpressionKind, type ExpressionNode, type ExpressionOp, type ExpressionSlot, } from './utils/expression.js';
 export type { GroupedListGroup, GroupedListItem } from './components/GroupedList.svelte';
 export { default as SegmentBar } from './components/SegmentBar.svelte';
 export type { Segment } from './components/SegmentBar.svelte';
@@ -65,6 +73,11 @@ export { default as ListItem } from './components/ListItem.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export type { DescriptionItem } from './utils/componentTypes.js';
 export { default as FormRow } from './components/FormRow.svelte';
+export { default as PropertyRow } from './components/PropertyRow.svelte';
+export { default as ChipSelect } from './components/ChipSelect.svelte';
+export type { ChipSelectGroup, ChipSelectOption } from './utils/componentTypes.js';
+export { default as DateField } from './components/DateField.svelte';
+export { dayLabel, dayUrgency, parseYmd, type DayUrgency } from './utils/dayLabel.js';
 export { default as SearchPicker } from './components/SearchPicker.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';