terminoir 0.15.0 → 0.16.0

package/README.md

@@ -159,7 +159,8 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `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 |
-| `EditableText` | A name you click to rename in place (Enter or click away saves, Escape cancels); `PageHeader` and `ListItem` take `onrename` for the same |
+| `OptionsEditor` | Notion-style option list for select/status values: drag to reorder, click a name to rename, colour and delete from each row's menu, type to add; `ChipSelect` takes `oncreate` to add one from its search |
+| `EditableText` | A name you click to rename in place (Enter or click away saves, Escape cancels); `PageHeader`, `ListItem` and `PropertyRow` take `onrename` for the same |
 | `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` |

package/dist/components/ChipSelect.svelte

@@ -3,6 +3,7 @@
   import { cn } from '../utils/cn.js';
   import type { ChipSelectGroup, ChipSelectOption } from '../utils/componentTypes.js';
   import { moveIndex } from '../utils/listNav.js';
+  import { matchingOptions, namesOption } from '../utils/options.js';
   import Chip from './Chip.svelte';
   import NavIcon from './NavIcon.svelte';
 
@@ -14,6 +15,7 @@
     placeholder = 'Empty',
     clearable = true,
     onchange,
+    oncreate,
     class: className = '',
   }: {
     /** Accessible name, e.g. the property name. */
@@ -27,30 +29,43 @@
     /** Offer a "Clear" entry when something is selected. */
     clearable?: boolean;
     onchange: (value: string) => void;
+    /** Offers "Create …" for a search that names no option; called with the trimmed name. */
+    oncreate?: (label: string) => void;
     class?: string;
   } = $props();
 
   const uid = $props.id();
   const CLEAR = { id: '', label: 'Clear' } satisfies ChipSelectOption;
+  const CREATE_ID = '\u0000create';
 
   let open = $state(false);
   let active = $state(-1);
   let root: HTMLDivElement | undefined = $state();
   let trigger: HTMLButtonElement | undefined = $state();
-  let list: HTMLUListElement | undefined = $state();
+  let search: HTMLInputElement | undefined = $state();
+  let query = $state('');
 
   const selected = $derived(options.find((o) => o.id === value));
+  const visible = $derived(matchingOptions(options, query));
   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) })),
+    { id: '', label: '', options: visible.filter((o) => !o.group || !groups.some((g) => g.id === o.group)) },
+    ...groups.map((g) => ({ ...g, options: visible.filter((o) => o.group === g.id) })),
   ].filter((section) => section.options.length));
-  const choices = $derived([...sections.flatMap((s) => s.options), ...(clearable && selected ? [CLEAR] : [])]);
+  const create = $derived<ChipSelectOption | null>(
+    oncreate && query.trim() && !namesOption(options, query) ? { id: CREATE_ID, label: query.trim() } : null,
+  );
+  const choices = $derived([
+    ...sections.flatMap((s) => s.options),
+    ...(create ? [create] : []),
+    ...(clearable && selected && !query.trim() ? [CLEAR] : []),
+  ]);
 
   async function show() {
     open = true;
+    query = '';
     active = Math.max(0, choices.findIndex((o) => o.id === value));
     await tick();
-    list?.focus();
+    search?.focus();
   }
 
   function hide() {
@@ -60,20 +75,25 @@
 
   function choose(option: ChipSelectOption | undefined) {
     if (!option) return;
-    if (option.id !== value) onchange(option.id);
+    if (option.id === CREATE_ID) oncreate?.(option.label);
+    else if (option.id !== value) onchange(option.id);
     hide();
   }
 
+  function onSearchInput() {
+    active = choices.length ? 0 : -1;
+  }
+
   function onTriggerKeydown(event: KeyboardEvent) {
     if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
     event.preventDefault();
     void show();
   }
 
-  function onListKeydown(event: KeyboardEvent) {
+  function onSearchKeydown(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 === ' ') {
+    } else if (event.key === 'Enter') {
       choose(choices[active]);
     } else if (event.key === 'Escape') {
       hide();
@@ -99,7 +119,7 @@
 
 {#snippet item(option: ChipSelectOption)}
   {@const index = choices.indexOf(option)}
-  <!-- Listbox pattern: focus stays on the list, which handles arrow keys and Enter. -->
+  <!-- Combobox pattern: focus stays in the search field, which handles arrow keys and Enter. -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <li
     id={`${uid}-opt-${index}`}
@@ -112,6 +132,8 @@
   >
     {#if option === CLEAR}
       <span class="terminoir-chip-select__clear"><NavIcon name="xmark" /> {CLEAR.label}</span>
+    {:else if option.id === CREATE_ID}
+      <span class="terminoir-chip-select__clear">Create <Chip color="grey">{option.label}</Chip></span>
     {:else}
       <Chip color={option.color ?? 'grey'}>{option.label}</Chip>
       {#if option.id === value}<NavIcon name="check" class="terminoir-chip-select__check" />{/if}
@@ -137,21 +159,32 @@
     {/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>
+    <div class="terminoir-chip-select__popover glass-popover">
+      <input
+        bind:this={search}
+        class="terminoir-chip-select__search"
+        role="combobox"
+        aria-label={`Search ${label}`}
+        aria-controls={`${uid}-list`}
+        aria-expanded="true"
+        aria-autocomplete="list"
+        aria-activedescendant={active >= 0 ? `${uid}-opt-${active}` : undefined}
+        placeholder={oncreate ? 'Search or create…' : 'Search…'}
+        autocomplete="off"
+        bind:value={query}
+        oninput={onSearchInput}
+        onkeydown={onSearchKeydown}
+      />
+      <ul id={`${uid}-list`} class="terminoir-chip-select__list" role="listbox" aria-label={label}>
+        {#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 create}{@render item(create)}{/if}
+        {#if choices.includes(CLEAR)}{@render item(CLEAR)}{/if}
+        {#if !choices.length}<li role="presentation" class="terminoir-chip-select__heading">No matches</li>{/if}
+      </ul>
+    </div>
   {/if}
 </div>
 
@@ -183,16 +216,32 @@
     color: var(--muted-foreground);
     opacity: 0.7;
   }
-  .terminoir-chip-select__list {
+  .terminoir-chip-select__popover {
     position: absolute;
     top: calc(100% + var(--space-1));
     left: 0;
     z-index: 40;
     min-width: 12rem;
+    padding: var(--space-1);
+  }
+  .terminoir-chip-select__search {
+    box-sizing: border-box;
+    width: 100%;
+    margin-bottom: var(--space-1);
+    padding: 0.35rem 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+    border-radius: calc(var(--radius-control) - 0.2rem);
+    background: transparent;
+    color: var(--foreground);
+    font: inherit;
+    font-size: 0.8125rem;
+  }
+  .terminoir-chip-select__search:focus { outline: none; border-color: var(--ring); }
+  .terminoir-chip-select__list {
     max-height: 18rem;
     overflow-y: auto;
     margin: 0;
-    padding: var(--space-1);
+    padding: 0;
     list-style: none;
   }
   .terminoir-chip-select__heading {

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

@@ -11,6 +11,8 @@ type $$ComponentProps = {
     /** Offer a "Clear" entry when something is selected. */
     clearable?: boolean;
     onchange: (value: string) => void;
+    /** Offers "Create …" for a search that names no option; called with the trimmed name. */
+    oncreate?: (label: string) => void;
     class?: string;
 };
 declare const ChipSelect: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/EditableText.svelte

@@ -55,6 +55,14 @@
     }
   }
 
+  /**
+   * Clicking away saves, but only once the event that moved focus is over: a page that blurs
+   * fields on Escape (in the capture phase) must not save what Escape is about to cancel.
+   */
+  function commitAfterBlur() {
+    setTimeout(() => void commit(false));
+  }
+
   function onkeydown(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       event.preventDefault();
@@ -75,7 +83,7 @@
     bind:value={draft}
     use:focusAndSelect
     {onkeydown}
-    onblur={() => void commit(false)}
+    onblur={commitAfterBlur}
   />
 {:else}
   <button

package/dist/components/MenuItems.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { MenuItem } from '../utils/menu.js';
+  import { labelColor } from '../utils/palette.js';
   import NavIcon from './NavIcon.svelte';
 
   let { items, onselect }: { items: MenuItem[]; onselect: (item: MenuItem) => void } = $props();
@@ -9,19 +10,33 @@
   <li role="none">
     <button
       type="button"
-      role="menuitem"
+      role={item.checked === undefined ? 'menuitem' : 'menuitemradio'}
+      aria-checked={item.checked}
       class="terminoir-menu__item terminoir-focusable"
       class:terminoir-menu__item--danger={item.tone === 'danger'}
       disabled={item.disabled}
       onclick={() => onselect(item)}
     >
+      {#if item.color}<span class="terminoir-menu__dot" style:background={labelColor(item.color)} aria-hidden="true"></span>{/if}
       {#if item.icon}<NavIcon name={item.icon} />{/if}
       <span>{item.label}</span>
+      {#if item.checked}<NavIcon name="check" class="terminoir-menu__check" />{/if}
     </button>
   </li>
 {/each}
 
 <style>
+  .terminoir-menu__dot {
+    flex-shrink: 0;
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 999px;
+  }
+  .terminoir-menu__item :global(.terminoir-menu__check) {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
   .terminoir-menu__item {
     display: flex;
     align-items: center;

package/dist/components/OptionsEditor.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import { moveTo, nearestIndex } from '../utils/layout.js';
+  import type { MenuItem } from '../utils/menu.js';
+  import { nextOptionColor, optionLabelError, type EditableOption } from '../utils/options.js';
+  import { LABEL_PALETTE } from '../utils/palette.js';
+  import Chip from './Chip.svelte';
+  import DropdownMenu from './DropdownMenu.svelte';
+  import EditableText from './EditableText.svelte';
+  import FieldMessage from './FieldMessage.svelte';
+  import Input from './Input.svelte';
+  import NavIcon from './NavIcon.svelte';
+
+  let {
+    label,
+    options,
+    onchange,
+    colors = Object.keys(LABEL_PALETTE),
+    placeholder = 'Add an option…',
+    trailing,
+    class: className = '',
+  }: {
+    /** Accessible name of the list, e.g. "Status options". */
+    label: string;
+    options: EditableOption[];
+    /** The whole list after any change: add, rename, recolour, reorder or delete. New options get their name as id. */
+    onchange: (options: EditableOption[]) => void;
+    /** Palette names offered in each option's menu. */
+    colors?: readonly string[];
+    placeholder?: string;
+    /** Extra control per row, before its menu (e.g. a status group). */
+    trailing?: Snippet<[EditableOption, number]>;
+    class?: string;
+  } = $props();
+
+  const uid = $props.id();
+  let draft = $state<EditableOption[] | null>(null);
+  const shown = $derived(draft ?? options);
+  let newLabel = $state('');
+  let error = $state<string | undefined>();
+  let list: HTMLUListElement | undefined = $state();
+
+  function add() {
+    const name = newLabel.trim();
+    if (!name) return;
+    error = optionLabelError(options, name) ?? undefined;
+    if (error) return;
+    onchange([...options, { id: name, label: name, color: nextOptionColor(options, colors) }]);
+    newLabel = '';
+  }
+
+  function update(id: string, patch: Partial<EditableOption>) {
+    onchange(options.map((o) => (o.id === id ? { ...o, ...patch } : o)));
+  }
+
+  function rename(option: EditableOption, name: string) {
+    error = optionLabelError(options, name, option.id) ?? undefined;
+    if (!error) update(option.id, { label: name });
+  }
+
+  function remove(id: string) {
+    onchange(options.filter((o) => o.id !== id));
+  }
+
+  function moveBy(id: string, delta: number) {
+    const from = options.findIndex((o) => o.id === id);
+    onchange(moveTo(options, id, from + delta));
+  }
+
+  function startDrag(event: PointerEvent, id: string) {
+    const handle = event.currentTarget as HTMLElement;
+    handle.setPointerCapture(event.pointerId);
+    draft = options.slice();
+    const rows = () => [...(list?.querySelectorAll<HTMLElement>(':scope > li') ?? [])];
+    const move = (e: PointerEvent) => {
+      const centres = rows().map((row) => {
+        const r = row.getBoundingClientRect();
+        return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+      });
+      if (draft) draft = moveTo(draft, id, nearestIndex(centres, centres[0]?.x ?? 0, e.clientY));
+    };
+    const end = () => {
+      handle.removeEventListener('pointermove', move);
+      handle.removeEventListener('pointerup', end);
+      handle.removeEventListener('pointercancel', end);
+      if (draft) onchange(draft);
+      draft = null;
+    };
+    handle.addEventListener('pointermove', move);
+    handle.addEventListener('pointerup', end);
+    handle.addEventListener('pointercancel', end);
+  }
+
+  function keyMove(event: KeyboardEvent, id: string) {
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+    event.preventDefault();
+    moveBy(id, event.key === 'ArrowUp' ? -1 : 1);
+  }
+
+  function capitalized(name: string): string {
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  }
+
+  function menu(option: EditableOption, index: number): MenuItem[] {
+    return [
+      { id: 'up', label: 'Move up', icon: 'arrow-up', disabled: index === 0, onSelect: () => moveBy(option.id, -1) },
+      { id: 'down', label: 'Move down', icon: 'arrow-down', disabled: index === options.length - 1, onSelect: () => moveBy(option.id, 1) },
+      ...colors.map((color) => ({
+        id: `color-${color}`,
+        label: capitalized(color),
+        color,
+        checked: (option.color ?? 'grey') === color,
+        onSelect: () => update(option.id, { color }),
+      })),
+      { id: 'delete', label: 'Delete', icon: 'trash', tone: 'danger' as const, onSelect: () => remove(option.id) },
+    ];
+  }
+
+  function onAddKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    add();
+  }
+</script>
+
+<div class={cn('terminoir-options', className)}>
+  {#if shown.length}
+    <ul bind:this={list} class={cn('terminoir-options__list', draft && 'terminoir-options__list--dragging')} aria-label={label}>
+      {#each shown as option, index (option.id)}
+        <li class="terminoir-options__row">
+          <button
+            type="button"
+            class="terminoir-options__handle terminoir-focusable"
+            aria-label={`Move ${option.label} (drag, or use up and down arrows)`}
+            title="Drag to reorder"
+            onpointerdown={(event) => startDrag(event, option.id)}
+            onkeydown={(event) => keyMove(event, option.id)}
+          >
+            <NavIcon name="grip-vertical" />
+          </button>
+          <span class="terminoir-options__name">
+            <Chip color={option.color ?? 'grey'}>
+              <EditableText value={option.label} label={`Rename ${option.label}`} onrename={(name) => rename(option, name)} />
+            </Chip>
+          </span>
+          {#if trailing}<span class="terminoir-options__trailing">{@render trailing(option, index)}</span>{/if}
+          <DropdownMenu label={`${option.label} settings`} icon="ellipsis" iconOnly align="end" items={menu(option, index)} />
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  <Input
+    label={`Add to ${label}`}
+    hideLabel
+    quiet
+    {placeholder}
+    autocomplete="off"
+    bind:value={newLabel}
+    oninput={() => (error = undefined)}
+    onkeydown={onAddKeydown}
+    onblur={add}
+    aria-describedby={error ? `${uid}-error` : undefined}
+  />
+  <FieldMessage id={`${uid}-error`} {error} />
+</div>
+
+<style>
+  .terminoir-options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .terminoir-options__list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .terminoir-options__list--dragging { cursor: grabbing; user-select: none; }
+  .terminoir-options__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-height: 2.25rem;
+    min-width: 0;
+    border-radius: var(--radius-control);
+  }
+  .terminoir-options__row:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
+  .terminoir-options__handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.75rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: grab;
+    touch-action: none;
+  }
+  .terminoir-options__name {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+  .terminoir-options__name :global(.terminoir-chip) { max-width: 100%; min-width: 0; }
+  .terminoir-options__name :global(.terminoir-chip__label) { min-width: 0; overflow: hidden; }
+  .terminoir-options__trailing {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import { type EditableOption } from '../utils/options.js';
+type $$ComponentProps = {
+    /** Accessible name of the list, e.g. "Status options". */
+    label: string;
+    options: EditableOption[];
+    /** The whole list after any change: add, rename, recolour, reorder or delete. New options get their name as id. */
+    onchange: (options: EditableOption[]) => void;
+    /** Palette names offered in each option's menu. */
+    colors?: readonly string[];
+    placeholder?: string;
+    /** Extra control per row, before its menu (e.g. a status group). */
+    trailing?: Snippet<[EditableOption, number]>;
+    class?: string;
+};
+declare const OptionsEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type OptionsEditor = ReturnType<typeof OptionsEditor>;
+export default OptionsEditor;

package/dist/components/PropertyRow.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils/cn.js';
+  import EditableText from './EditableText.svelte';
   import NavIcon from './NavIcon.svelte';
 
   let {
@@ -8,6 +9,7 @@
     icon,
     class: className = '',
     children,
+    onrename,
   }: {
     label: string;
     /** NavIcon name hinting at the value's kind, e.g. `calendar`. */
@@ -15,13 +17,17 @@
     class?: string;
     /** One value control, rendered with its own label hidden. */
     children?: Snippet;
+    /** Makes the label editable in place (renames the property). */
+    onrename?: (label: string) => void | Promise<void>;
   } = $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 class={cn('terminoir-property-row__text', onrename && 'terminoir-property-row__text--editable')}>
+      {#if onrename}<EditableText value={label} label={`Rename ${label}`} {onrename} />{:else}{label}{/if}
+    </span>
   </span>
   <div class="terminoir-property-row__value">{@render children?.()}</div>
 </div>
@@ -62,6 +68,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  /* Room for the rename field's border, which the truncating label would clip. */
+  .terminoir-property-row__text--editable { padding: 1px 0.3rem; margin: -1px -0.3rem; }
   .terminoir-property-row__value {
     min-width: 0;
   }

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

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     class?: string;
     /** One value control, rendered with its own label hidden. */
     children?: Snippet;
+    /** Makes the label editable in place (renames the property). */
+    onrename?: (label: string) => void | Promise<void>;
 };
 declare const PropertyRow: import("svelte").Component<$$ComponentProps, {}, "">;
 type PropertyRow = ReturnType<typeof PropertyRow>;

package/dist/index.d.ts

@@ -85,6 +85,8 @@ export { default as MarkdownEditor } from './components/MarkdownEditor.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';
 export { default as EditableText } from './components/EditableText.svelte';
+export { default as OptionsEditor } from './components/OptionsEditor.svelte';
+export type { EditableOption } from './utils/options.js';
 export type { PickerOption } from './utils/componentTypes.js';
 export { default as RadioCards } from './components/RadioCards.svelte';
 export type { RadioCardOption } from './utils/componentTypes.js';

package/dist/index.js

@@ -77,6 +77,7 @@ export { default as MarkdownEditor } from './components/MarkdownEditor.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';
 export { default as EditableText } from './components/EditableText.svelte';
+export { default as OptionsEditor } from './components/OptionsEditor.svelte';
 export { default as RadioCards } from './components/RadioCards.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
 // Overlays

package/dist/utils/menu.d.ts

@@ -6,5 +6,9 @@ export type MenuItem = {
     /** `danger` for destructive actions (delete, revoke). */
     tone?: 'default' | 'danger';
     disabled?: boolean;
+    /** A colour dot before the label (palette name or CSS colour), e.g. to pick a colour. */
+    color?: string;
+    /** Marks the current choice with a check after the label. */
+    checked?: boolean;
     onSelect?: () => void;
 };

package/dist/utils/options.d.ts

@@ -0,0 +1,19 @@
+/** Helpers for user-defined option lists (select and status values). */
+export type EditableOption = {
+    id: string;
+    label: string;
+    /** Palette name or CSS colour; grey when unset. */
+    color?: string;
+};
+/** Why `label` cannot name an option (blank, or another option has it), or null when it can. */
+export declare function optionLabelError(options: EditableOption[], label: string, exceptId?: string): string | null;
+/** The colour a new option gets: the palette in turn, so neighbours differ. */
+export declare function nextOptionColor(options: EditableOption[], colors: readonly string[]): string | undefined;
+/** Whether a search names an option exactly (ignoring case and spaces), so no "Create" is offered. */
+export declare function namesOption(options: {
+    label: string;
+}[], query: string): boolean;
+/** Options whose label contains the search (ignoring case); all of them for an empty search. */
+export declare function matchingOptions<T extends {
+    label: string;
+}>(options: T[], query: string): T[];

package/dist/utils/options.js

@@ -0,0 +1,23 @@
+/** Helpers for user-defined option lists (select and status values). */
+/** Why `label` cannot name an option (blank, or another option has it), or null when it can. */
+export function optionLabelError(options, label, exceptId) {
+    const name = label.trim().toLowerCase();
+    if (!name)
+        return 'Give the option a name.';
+    const taken = options.some((o) => o.id !== exceptId && o.label.trim().toLowerCase() === name);
+    return taken ? 'There is already an option with that name.' : null;
+}
+/** The colour a new option gets: the palette in turn, so neighbours differ. */
+export function nextOptionColor(options, colors) {
+    return colors.length ? colors[options.length % colors.length] : undefined;
+}
+/** Whether a search names an option exactly (ignoring case and spaces), so no "Create" is offered. */
+export function namesOption(options, query) {
+    const name = query.trim().toLowerCase();
+    return options.some((o) => o.label.trim().toLowerCase() === name);
+}
+/** Options whose label contains the search (ignoring case); all of them for an empty search. */
+export function matchingOptions(options, query) {
+    const needle = query.trim().toLowerCase();
+    return needle ? options.filter((o) => o.label.toLowerCase().includes(needle)) : options;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminoir",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Terminoir — Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",