terminoir 0.6.0 → 0.8.0

package/README.md

@@ -14,7 +14,7 @@ To try unreleased changes in an app, `pnpm link /path/to/terminoir` from the app
 
 ### Releasing
 
-Bump `version` (semver: new component or prop → minor; breaking prop/CSS change → major), then `npm publish` (`prepublishOnly` builds and tests). Apps bump their `terminoir` range to adopt.
+Bump `version` (semver: new component or prop → minor; breaking prop/CSS change → major), then push `main`. The `Publish` workflow (`.github/workflows/publish.yml`) publishes any version not yet on npm via trusted publishing (`prepublishOnly` checks, builds and tests first); don't publish from a laptop. Apps bump their `terminoir` range to adopt.
 
 Peer dependency: **Svelte 5** (for components). Optional **React 18–19** for `terminoir/react`. CSS-only consumers can import styles without JS.
 
@@ -152,12 +152,18 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `NavSection` | Sidebar section with title and action |
 | `DataTable` | Columns, `cell` snippet, clickable rows, `hideOnMobile`, empty state |
 | `List`, `ListItem`, `DescriptionList`, `FormRow` | Rows with leading/trailing slots; key–value pairs; label-left form rows |
-| `SearchPicker` | Debounced async combobox (`search(q)`), keyboard navigation |
+| `SearchPicker` | Debounced async combobox (`search(q)`), keyboard navigation; grows to fill a row after chips |
+| `PropertyRow` | Compact icon + label row for inline-edited values (record properties); hover highlights the row |
+| `ChipSelect`, `DateField` | Value shown as a coloured `Chip` that opens a grouped option list (`ChipSelectOption`, `ChipSelectGroup`); date shown as "Today" / "Tomorrow" / weekday / "Nov 12" (`dayLabel`), `deadline` tints past and today, opens the native picker, Backspace clears |
 | `TitleInput`, `FileButton`, `RadioCards` | Borderless heading input; button that opens a file picker; card-style radio group |
 | `CalendarGrid` | Week (scrolling hours) and month grids; `CalendarEvent` with `muted`/`color`; helpers `calendarRange`, `shiftCalendar`, `eventsOn` |
 | `CanvasStage`, `DocumentViewer` | Full-bleed canvas host with floating overlay and side panel; paged viewer with toolbar and highlight marks |
 | `AccentSwatches` | `bind:value` accent hex from `ACCENT_PALETTE` |
 | `GroupedList`, `SegmentBar` | Items in labelled groups with a colour dot and count, "Show n more" past `limit`, `collapsed` groups behind a toggle (e.g. finished items); a thin bar of proportional coloured segments |
+| `Timeline` | Gantt rows: a title column and bars from `start` to `end` (inclusive, or one day) on a shared day scale, grouped under headings, today marked; `TimelineItem` |
+| `BucketGrid` | Board columns or a 2×2 `quadrants` grid of drop zones with a heading, colour dot and count; the caller renders cards (`children(bucket)`) and sets `dragType`; `ondrop(key, payload)`, `droppable: false` refuses drops |
+| `GridLayout` | Items in reading order on a 12-column grid: drag the move handle (`children(item, handle)` renders it where you want) to reorder, drag the right edge to change span (`minSpan`); arrow keys do both; `onchange(items)` on release |
+| `ExpressionEditor` | Scratch-style block editor for a typed expression tree from an op catalogue (`ExpressionOp`: returns, slots with kinds, params); slots only offer ops whose result fits; params named `key` pick from `fields`; plain-English reading underneath (`describeExpression`) |
 
 `labelColor(name)` resolves palette names (`green`, `gray`…, see `LABEL_PALETTE`) or passes CSS colours through; `Chip`, `GroupedList` and `SegmentBar` share it.
 

package/dist/components/BucketGrid.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
+
+  export type Bucket = {
+    key: string;
+    label: string;
+    /** Palette name or CSS colour for the heading dot. */
+    color?: string | null;
+    count: number;
+    /** False to refuse drops (e.g. an Unsorted cell that cannot be written). */
+    droppable?: boolean;
+  };
+
+  /**
+   * Board columns or a 2x2 matrix of drop zones. Callers render each bucket's cards with
+   * `children` and make them draggable with `dragType`; `ondrop` gets the dropped payload.
+   */
+  let {
+    buckets,
+    layout = 'columns',
+    dragType,
+    label,
+    ondrop,
+    children,
+    class: className = '',
+  }: {
+    buckets: Bucket[];
+    /** `columns` side by side (wrapping on phones), or `quadrants` (2x2, first four buckets). */
+    layout?: 'columns' | 'quadrants';
+    /** The `DataTransfer` type the cards set; other drags are ignored. */
+    dragType: string;
+    /** Accessible name for the grid. */
+    label: string;
+    ondrop: (bucketKey: string, payload: string) => void;
+    children: Snippet<[Bucket]>;
+    class?: string;
+  } = $props();
+
+  let over = $state<string | null>(null);
+
+  function accepts(event: DragEvent, bucket: Bucket): boolean {
+    return bucket.droppable !== false && !!event.dataTransfer?.types.includes(dragType);
+  }
+
+  function dragOver(event: DragEvent, bucket: Bucket) {
+    if (!accepts(event, bucket)) return;
+    event.preventDefault();
+    over = bucket.key;
+  }
+
+  function drop(event: DragEvent, bucket: Bucket) {
+    over = null;
+    if (!accepts(event, bucket)) return;
+    event.preventDefault();
+    const payload = event.dataTransfer?.getData(dragType);
+    if (payload) ondrop(bucket.key, payload);
+  }
+</script>
+
+<div class={cn('terminoir-buckets', `terminoir-buckets--${layout}`, className)} role="group" aria-label={label}>
+  {#each buckets as bucket (bucket.key)}
+    <section
+      class="terminoir-buckets__zone"
+      class:terminoir-buckets__zone--over={over === bucket.key}
+      aria-label={bucket.label}
+      ondragover={(event) => dragOver(event, bucket)}
+      ondragleave={() => (over = over === bucket.key ? null : over)}
+      ondrop={(event) => drop(event, bucket)}
+    >
+      <header class="terminoir-buckets__head">
+        <span class="terminoir-buckets__dot" style:background={labelColor(bucket.color) ?? 'var(--muted-foreground)'}></span>
+        <span class="terminoir-buckets__label">{bucket.label}</span>
+        <span class="terminoir-buckets__count">{bucket.count}</span>
+      </header>
+      <div class="terminoir-buckets__items">{@render children(bucket)}</div>
+    </section>
+  {/each}
+</div>
+
+<style>
+  .terminoir-buckets { display: grid; gap: var(--space-3); min-width: 0; }
+  .terminoir-buckets--columns { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
+  .terminoir-buckets--quadrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  @media (max-width: 640px) {
+    .terminoir-buckets--quadrants { grid-template-columns: minmax(0, 1fr); }
+  }
+  .terminoir-buckets__zone {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-width: 0;
+    padding: var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--foreground) 3%, transparent);
+    transition: border-color 120ms ease, background 120ms ease;
+  }
+  .terminoir-buckets__zone--over {
+    border-color: var(--primary);
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+  }
+  .terminoir-buckets__head { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; }
+  .terminoir-buckets__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
+  .terminoir-buckets__label { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .terminoir-buckets__count { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+  .terminoir-buckets__items { display: flex; flex-direction: column; gap: var(--space-2); min-height: 2.5rem; }
+</style>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+export type Bucket = {
+    key: string;
+    label: string;
+    /** Palette name or CSS colour for the heading dot. */
+    color?: string | null;
+    count: number;
+    /** False to refuse drops (e.g. an Unsorted cell that cannot be written). */
+    droppable?: boolean;
+};
+type $$ComponentProps = {
+    buckets: Bucket[];
+    /** `columns` side by side (wrapping on phones), or `quadrants` (2x2, first four buckets). */
+    layout?: 'columns' | 'quadrants';
+    /** The `DataTransfer` type the cards set; other drags are ignored. */
+    dragType: string;
+    /** Accessible name for the grid. */
+    label: string;
+    ondrop: (bucketKey: string, payload: string) => void;
+    children: Snippet<[Bucket]>;
+    class?: string;
+};
+declare const BucketGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type BucketGrid = ReturnType<typeof BucketGrid>;
+export default BucketGrid;

package/dist/components/ChipSelect.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import type { ChipSelectGroup, ChipSelectOption } from '../utils/componentTypes.js';
+  import { moveIndex } from '../utils/listNav.js';
+  import Chip from './Chip.svelte';
+  import NavIcon from './NavIcon.svelte';
+
+  let {
+    label,
+    value = '',
+    options,
+    groups = [],
+    placeholder = 'Empty',
+    clearable = true,
+    onchange,
+    class: className = '',
+  }: {
+    /** Accessible name, e.g. the property name. */
+    label: string;
+    /** Selected option id; empty string for none. */
+    value?: string;
+    options: ChipSelectOption[];
+    /** Headings, in order, for options with a `group`; ungrouped options come first. */
+    groups?: ChipSelectGroup[];
+    placeholder?: string;
+    /** Offer a "Clear" entry when something is selected. */
+    clearable?: boolean;
+    onchange: (value: string) => void;
+    class?: string;
+  } = $props();
+
+  const uid = $props.id();
+  const CLEAR = { id: '', label: 'Clear' } satisfies ChipSelectOption;
+
+  let open = $state(false);
+  let active = $state(-1);
+  let root: HTMLDivElement | undefined = $state();
+  let trigger: HTMLButtonElement | undefined = $state();
+  let list: HTMLUListElement | undefined = $state();
+
+  const selected = $derived(options.find((o) => o.id === value));
+  const sections = $derived([
+    { id: '', label: '', options: options.filter((o) => !o.group || !groups.some((g) => g.id === o.group)) },
+    ...groups.map((g) => ({ ...g, options: options.filter((o) => o.group === g.id) })),
+  ].filter((section) => section.options.length));
+  const choices = $derived([...sections.flatMap((s) => s.options), ...(clearable && selected ? [CLEAR] : [])]);
+
+  async function show() {
+    open = true;
+    active = Math.max(0, choices.findIndex((o) => o.id === value));
+    await tick();
+    list?.focus();
+  }
+
+  function hide() {
+    open = false;
+    trigger?.focus();
+  }
+
+  function choose(option: ChipSelectOption | undefined) {
+    if (!option) return;
+    if (option.id !== value) onchange(option.id);
+    hide();
+  }
+
+  function onTriggerKeydown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    event.preventDefault();
+    void show();
+  }
+
+  function onListKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      active = moveIndex(active, event.key === 'ArrowDown' ? 1 : -1, choices.length);
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      choose(choices[active]);
+    } else if (event.key === 'Escape') {
+      hide();
+    } else if (event.key === 'Tab') {
+      open = false;
+      return;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  $effect(() => {
+    if (!open) return;
+    const onPointer = (event: PointerEvent) => {
+      if (root && !root.contains(event.target as Node)) open = false;
+    };
+    document.addEventListener('pointerdown', onPointer);
+    return () => document.removeEventListener('pointerdown', onPointer);
+  });
+</script>
+
+{#snippet item(option: ChipSelectOption)}
+  {@const index = choices.indexOf(option)}
+  <!-- Listbox pattern: focus stays on the list, which handles arrow keys and Enter. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <li
+    id={`${uid}-opt-${index}`}
+    role="option"
+    aria-selected={option.id === value}
+    class="terminoir-chip-select__option"
+    class:terminoir-chip-select__option--active={index === active}
+    onpointermove={() => (active = index)}
+    onclick={() => choose(option)}
+  >
+    {#if option === CLEAR}
+      <span class="terminoir-chip-select__clear"><NavIcon name="xmark" /> {CLEAR.label}</span>
+    {:else}
+      <Chip color={option.color ?? 'grey'}>{option.label}</Chip>
+      {#if option.id === value}<NavIcon name="check" class="terminoir-chip-select__check" />{/if}
+    {/if}
+  </li>
+{/snippet}
+
+<div bind:this={root} class={cn('terminoir-chip-select', className)}>
+  <button
+    bind:this={trigger}
+    type="button"
+    class="terminoir-chip-select__trigger terminoir-focusable"
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-label={`${label}: ${selected?.label ?? placeholder}`}
+    onclick={() => (open ? hide() : void show())}
+    onkeydown={onTriggerKeydown}
+  >
+    {#if selected}
+      <Chip color={selected.color ?? 'grey'}>{selected.label}</Chip>
+    {:else}
+      <span class="terminoir-chip-select__placeholder">{placeholder}</span>
+    {/if}
+  </button>
+  {#if open}
+    <ul
+      bind:this={list}
+      class="terminoir-chip-select__list glass-popover terminoir-focusable"
+      role="listbox"
+      aria-label={label}
+      aria-activedescendant={active >= 0 ? `${uid}-opt-${active}` : undefined}
+      tabindex="-1"
+      onkeydown={onListKeydown}
+    >
+      {#each sections as section (section.id)}
+        {#if section.label}<li role="presentation" class="terminoir-chip-select__heading">{section.label}</li>{/if}
+        {#each section.options as option (option.id)}{@render item(option)}{/each}
+      {/each}
+      {#if clearable && selected}{@render item(CLEAR)}{/if}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .terminoir-chip-select {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+  }
+  .terminoir-chip-select__trigger {
+    display: inline-flex;
+    align-items: center;
+    width: max-content;
+    max-width: 100%;
+    min-height: 1.85rem;
+    padding: 0.15rem 0.35rem;
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .terminoir-chip-select__trigger:hover {
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+  }
+  .terminoir-chip-select__placeholder {
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+    opacity: 0.7;
+  }
+  .terminoir-chip-select__list {
+    position: absolute;
+    top: calc(100% + var(--space-1));
+    left: 0;
+    z-index: 40;
+    min-width: 12rem;
+    max-height: 18rem;
+    overflow-y: auto;
+    margin: 0;
+    padding: var(--space-1);
+    list-style: none;
+  }
+  .terminoir-chip-select__heading {
+    padding: 0.5rem 0.6rem 0.25rem;
+    font-size: 0.6875rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+  .terminoir-chip-select__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: 0.35rem 0.5rem;
+    border-radius: calc(var(--radius-control) - 0.2rem);
+    cursor: pointer;
+  }
+  .terminoir-chip-select__option--active {
+    background: color-mix(in srgb, var(--foreground) 8%, transparent);
+  }
+  .terminoir-chip-select__option :global(.terminoir-chip-select__check) {
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+  .terminoir-chip-select__clear {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { ChipSelectGroup, ChipSelectOption } from '../utils/componentTypes.js';
+type $$ComponentProps = {
+    /** Accessible name, e.g. the property name. */
+    label: string;
+    /** Selected option id; empty string for none. */
+    value?: string;
+    options: ChipSelectOption[];
+    /** Headings, in order, for options with a `group`; ungrouped options come first. */
+    groups?: ChipSelectGroup[];
+    placeholder?: string;
+    /** Offer a "Clear" entry when something is selected. */
+    clearable?: boolean;
+    onchange: (value: string) => void;
+    class?: string;
+};
+declare const ChipSelect: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChipSelect = ReturnType<typeof ChipSelect>;
+export default ChipSelect;

package/dist/components/DateField.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { dayLabel, dayUrgency, parseYmd } from '../utils/dayLabel.js';
+  import Chip from './Chip.svelte';
+
+  let {
+    label,
+    value = '',
+    deadline = false,
+    placeholder = 'Empty',
+    onchange,
+    class: className = '',
+  }: {
+    /** Accessible name, e.g. the property name. */
+    label: string;
+    /** `YYYY-MM-DD`, or empty for no date. */
+    value?: string;
+    /** Colour past dates as overdue and today as due today. */
+    deadline?: boolean;
+    placeholder?: string;
+    /** Called with `YYYY-MM-DD`, or an empty string when cleared. */
+    onchange: (value: string) => void;
+    class?: string;
+  } = $props();
+
+  let picker: HTMLInputElement | undefined = $state();
+
+  const date = $derived(parseYmd(value));
+  const tone = $derived.by(() => {
+    if (!deadline || !date) return 'default';
+    const urgency = dayUrgency(date);
+    return urgency === 'past' ? 'overdue' : urgency === 'today' ? 'today' : 'default';
+  });
+  const fullDate = $derived(date?.toLocaleDateString(undefined, { dateStyle: 'full' }) ?? '');
+
+  function openPicker() {
+    if (!picker) return;
+    try {
+      picker.showPicker();
+    } catch {
+      picker.focus();
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if ((event.key === 'Backspace' || event.key === 'Delete') && value) {
+      event.preventDefault();
+      onchange('');
+    }
+  }
+</script>
+
+<span class={cn('terminoir-date-field', className)}>
+  <button
+    type="button"
+    class="terminoir-date-field__trigger terminoir-focusable"
+    aria-label={`${label}: ${fullDate || placeholder}`}
+    title={fullDate || undefined}
+    onclick={openPicker}
+    onkeydown={onKeydown}
+  >
+    {#if date}
+      <Chip {tone}>{dayLabel(date)}</Chip>
+    {:else}
+      <span class="terminoir-date-field__placeholder">{placeholder}</span>
+    {/if}
+  </button>
+  {#if date}
+    <button type="button" class="terminoir-date-field__clear terminoir-focusable" aria-label={`Clear ${label}`} onclick={() => onchange('')}>×</button>
+  {/if}
+  <input
+    bind:this={picker}
+    class="terminoir-date-field__picker"
+    type="date"
+    tabindex="-1"
+    aria-hidden="true"
+    {value}
+    onchange={(event) => onchange(event.currentTarget.value)}
+  />
+</span>
+
+<style>
+  .terminoir-date-field {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+  .terminoir-date-field__trigger {
+    display: inline-flex;
+    align-items: center;
+    width: max-content;
+    min-height: 1.85rem;
+    padding: 0.15rem 0.35rem;
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .terminoir-date-field__trigger:hover {
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+  }
+  .terminoir-date-field__placeholder {
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+    opacity: 0.7;
+  }
+  .terminoir-date-field__clear {
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--muted-foreground);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+  .terminoir-date-field:hover .terminoir-date-field__clear,
+  .terminoir-date-field__clear:focus-visible {
+    opacity: 1;
+  }
+  .terminoir-date-field__clear:hover {
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  }
+  /* Kept rendered (not display:none) so showPicker() can anchor the native picker under the trigger. */
+  .terminoir-date-field__picker {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    /** Accessible name, e.g. the property name. */
+    label: string;
+    /** `YYYY-MM-DD`, or empty for no date. */
+    value?: string;
+    /** Colour past dates as overdue and today as due today. */
+    deadline?: boolean;
+    placeholder?: string;
+    /** Called with `YYYY-MM-DD`, or an empty string when cleared. */
+    onchange: (value: string) => void;
+    class?: string;
+};
+declare const DateField: import("svelte").Component<$$ComponentProps, {}, "">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;