terminoir 0.4.0 → 0.5.0

package/dist/components/PageHeader.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    title,
+    description,
+    class: className = '',
+    leading,
+    meta,
+    actions,
+  }: {
+    title: string;
+    description?: string;
+    class?: string;
+    /** Icon or avatar before the title. */
+    leading?: Snippet;
+    /** Small line under the title (counts, badges, breadcrumbs). */
+    meta?: Snippet;
+    /** Buttons aligned to the right. */
+    actions?: Snippet;
+  } = $props();
+</script>
+
+<header class={cn('terminoir-page-header', className)}>
+  {#if leading}
+    <div class="terminoir-page-header__leading">{@render leading()}</div>
+  {/if}
+  <div class="terminoir-page-header__text">
+    <h1 class="terminoir-page-header__title">{title}</h1>
+    {#if meta}<div class="terminoir-page-header__meta">{@render meta()}</div>{/if}
+    {#if description}<p class="terminoir-page-header__description">{description}</p>{/if}
+  </div>
+  {#if actions}
+    <div class="terminoir-page-header__actions">{@render actions()}</div>
+  {/if}
+</header>
+
+<style>
+  .terminoir-page-header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    min-width: 0;
+  }
+  .terminoir-page-header__leading {
+    display: flex;
+    align-items: center;
+    min-height: 2rem;
+    font-size: 1.25rem;
+  }
+  .terminoir-page-header__text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .terminoir-page-header__title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+    overflow-wrap: anywhere;
+  }
+  .terminoir-page-header__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--muted-foreground);
+    font-size: 0.8125rem;
+  }
+  .terminoir-page-header__description {
+    margin: 0;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    max-width: 60ch;
+  }
+  .terminoir-page-header__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    flex-shrink: 0;
+  }
+  @media (max-width: 700px) {
+    .terminoir-page-header { flex-wrap: wrap; }
+    .terminoir-page-header__title { font-size: 1.25rem; }
+  }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    description?: string;
+    class?: string;
+    /** Icon or avatar before the title. */
+    leading?: Snippet;
+    /** Small line under the title (counts, badges, breadcrumbs). */
+    meta?: Snippet;
+    /** Buttons aligned to the right. */
+    actions?: Snippet;
+};
+declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/Prose.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let { class: className = '', children }: { class?: string; children?: Snippet } = $props();
+</script>
+
+<!-- Readable long-form text (policies, help pages, rendered markdown). -->
+<div class={cn('terminoir-prose', className)}>{@render children?.()}</div>
+
+<style>
+  .terminoir-prose {
+    max-width: 44rem;
+    line-height: 1.65;
+    color: var(--foreground);
+    font-size: 0.9375rem;
+  }
+  .terminoir-prose :global(h1) { font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--space-4); line-height: 1.3; }
+  .terminoir-prose :global(h2) { font-size: 1.125rem; font-weight: 600; margin: var(--space-8) 0 var(--space-3); }
+  .terminoir-prose :global(h3) { font-size: 1rem; font-weight: 600; margin: var(--space-6) 0 var(--space-2); }
+  .terminoir-prose :global(p),
+  .terminoir-prose :global(ul),
+  .terminoir-prose :global(ol) { margin: 0 0 var(--space-4); }
+  .terminoir-prose :global(li + li) { margin-top: var(--space-1); }
+  .terminoir-prose :global(a) { color: var(--primary); text-underline-offset: 2px; }
+  .terminoir-prose :global(code) {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    padding: 0.1em 0.3em;
+    border-radius: 0.3em;
+    background: color-mix(in srgb, var(--foreground) 8%, transparent);
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    class?: string;
+    children?: Snippet;
+};
+declare const Prose: import("svelte").Component<$$ComponentProps, {}, "">;
+type Prose = ReturnType<typeof Prose>;
+export default Prose;

package/dist/components/RadioCards.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+
+  import type { RadioCardOption } from '../utils/componentTypes.js';
+
+  let {
+    label,
+    options,
+    value = $bindable(''),
+    class: className = '',
+  }: {
+    /** Group label (legend). */
+    label: string;
+    options: RadioCardOption[];
+    value?: string;
+    class?: string;
+  } = $props();
+
+  const name = $props.id();
+</script>
+
+<fieldset class={cn('terminoir-radio-cards', className)}>
+  <legend class="terminoir-field__label">{label}</legend>
+  <div class="terminoir-radio-cards__grid">
+    {#each options as option (option.value)}
+      <label class="terminoir-radio-cards__card" class:terminoir-radio-cards__card--selected={value === option.value}>
+        <input class="terminoir-sr-only" type="radio" {name} value={option.value} bind:group={value} />
+        <span class="terminoir-radio-cards__title">{option.label}</span>
+        {#if option.description}<span class="terminoir-radio-cards__description">{option.description}</span>{/if}
+      </label>
+    {/each}
+  </div>
+</fieldset>
+
+<style>
+  .terminoir-radio-cards {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-width: 0;
+  }
+  .terminoir-radio-cards__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    gap: var(--space-2);
+  }
+  .terminoir-radio-cards__card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-control);
+    cursor: pointer;
+    transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
+  }
+  .terminoir-radio-cards__card:hover { border-color: color-mix(in srgb, var(--foreground) 30%, var(--border)); }
+  .terminoir-radio-cards__card:has(input:focus-visible) { box-shadow: var(--focus-ring); }
+  .terminoir-radio-cards__card--selected {
+    border-color: var(--primary);
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+  }
+  .terminoir-radio-cards__title { font-size: 0.875rem; font-weight: 600; }
+  .terminoir-radio-cards__description { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.4; }
+</style>

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

@@ -0,0 +1,11 @@
+import type { RadioCardOption } from '../utils/componentTypes.js';
+type $$ComponentProps = {
+    /** Group label (legend). */
+    label: string;
+    options: RadioCardOption[];
+    value?: string;
+    class?: string;
+};
+declare const RadioCards: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RadioCards = ReturnType<typeof RadioCards>;
+export default RadioCards;

package/dist/components/SearchPicker.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { moveIndex } from '../utils/listNav.js';
+  import NavIcon from './NavIcon.svelte';
+
+  import type { PickerOption } from '../utils/componentTypes.js';
+
+  let {
+    label,
+    hideLabel = false,
+    quiet = false,
+    placeholder = 'Search…',
+    search,
+    onselect,
+    debounceMs = 150,
+    emptyText = 'No matches',
+    disabled = false,
+    class: className = '',
+  }: {
+    label: string;
+    /** Keep the label for screen readers only. */
+    hideLabel?: boolean;
+    /** Borderless until hovered or focused, for inline editing (property rows). */
+    quiet?: boolean;
+    placeholder?: string;
+    /** Returns options for a non-empty query. Stale responses are ignored. */
+    search: (query: string) => Promise<PickerOption[]>;
+    onselect: (option: PickerOption) => void;
+    debounceMs?: number;
+    emptyText?: string;
+    disabled?: boolean;
+    class?: string;
+  } = $props();
+
+  const uid = $props.id();
+  const listId = `${uid}-list`;
+
+  let query = $state('');
+  let options = $state<PickerOption[]>([]);
+  let open = $state(false);
+  let loading = $state(false);
+  let active = $state(-1);
+  let requestSeq = 0;
+
+  $effect(() => {
+    const q = query.trim();
+    if (!q) {
+      options = [];
+      open = false;
+      return;
+    }
+    const seq = ++requestSeq;
+    const handle = setTimeout(async () => {
+      loading = true;
+      try {
+        const found = await search(q);
+        if (seq !== requestSeq) return;
+        options = found;
+        active = found.length ? 0 : -1;
+        open = true;
+      } catch {
+        if (seq === requestSeq) options = [];
+      } finally {
+        if (seq === requestSeq) loading = false;
+      }
+    }, debounceMs);
+    return () => clearTimeout(handle);
+  });
+
+  function choose(option: PickerOption | undefined) {
+    if (!option) return;
+    onselect(option);
+    query = '';
+    open = false;
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      open = true;
+      active = moveIndex(active, event.key === 'ArrowDown' ? 1 : -1, options.length);
+    } else if (event.key === 'Enter' && open) {
+      event.preventDefault();
+      choose(options[active]);
+    } else if (event.key === 'Escape') {
+      open = false;
+    }
+  }
+</script>
+
+<div class={cn('terminoir-field terminoir-picker', quiet && 'terminoir-field--quiet', className)}>
+  <label class={cn('terminoir-field__label', hideLabel && 'terminoir-sr-only')} for={`${uid}-input`}>{label}</label>
+  <div class="terminoir-picker__anchor">
+    <input
+      id={`${uid}-input`}
+      class="terminoir-input terminoir-focusable"
+      type="search"
+      role="combobox"
+      autocomplete="off"
+      aria-expanded={open}
+      aria-controls={listId}
+      aria-autocomplete="list"
+      aria-activedescendant={open && active >= 0 ? `${uid}-opt-${active}` : undefined}
+      {placeholder}
+      {disabled}
+      bind:value={query}
+      onkeydown={onKeydown}
+      onblur={() => setTimeout(() => (open = false), 120)}
+      onfocus={() => (open = options.length > 0)}
+    />
+    {#if open}
+      <ul id={listId} class="terminoir-picker__list glass-popover" role="listbox" aria-label={label}>
+        {#each options as option, index (option.id)}
+          <!-- Combobox pattern: focus stays in the input, which handles arrow keys and Enter. -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            id={`${uid}-opt-${index}`}
+            role="option"
+            aria-selected={index === active}
+            class="terminoir-picker__option"
+            class:terminoir-picker__option--active={index === active}
+            onpointerdown={(event) => event.preventDefault()}
+            onclick={() => choose(option)}
+            onpointerenter={() => (active = index)}
+          >
+            {#if option.icon}<NavIcon name={option.icon} color={option.iconColor} />{/if}
+            <span class="terminoir-picker__label">{option.label}</span>
+            {#if option.description}<span class="terminoir-picker__description">{option.description}</span>{/if}
+          </li>
+        {:else}
+          <li class="terminoir-picker__empty" role="presentation">{loading ? 'Searching…' : emptyText}</li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .terminoir-picker__anchor { position: relative; }
+  .terminoir-picker__list {
+    position: absolute;
+    top: calc(100% + var(--space-1));
+    left: 0;
+    right: 0;
+    z-index: 40;
+    max-height: 16rem;
+    overflow-y: auto;
+    margin: 0;
+    padding: var(--space-1);
+    list-style: none;
+  }
+  .terminoir-picker__option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 0.45rem 0.6rem;
+    border-radius: calc(var(--radius-control) - 0.2rem);
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+  .terminoir-picker__option--active { background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+  .terminoir-picker__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .terminoir-picker__description { font-size: 0.75rem; color: var(--muted-foreground); flex-shrink: 0; }
+  .terminoir-picker__empty { padding: 0.5rem 0.6rem; font-size: 0.8125rem; color: var(--muted-foreground); }
+</style>

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

@@ -0,0 +1,19 @@
+import type { PickerOption } from '../utils/componentTypes.js';
+type $$ComponentProps = {
+    label: string;
+    /** Keep the label for screen readers only. */
+    hideLabel?: boolean;
+    /** Borderless until hovered or focused, for inline editing (property rows). */
+    quiet?: boolean;
+    placeholder?: string;
+    /** Returns options for a non-empty query. Stale responses are ignored. */
+    search: (query: string) => Promise<PickerOption[]>;
+    onselect: (option: PickerOption) => void;
+    debounceMs?: number;
+    emptyText?: string;
+    disabled?: boolean;
+    class?: string;
+};
+declare const SearchPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchPicker = ReturnType<typeof SearchPicker>;
+export default SearchPicker;

package/dist/components/Section.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    title,
+    description,
+    class: className = '',
+    actions,
+    children,
+    ...rest
+  }: {
+    title?: string;
+    description?: string;
+    class?: string;
+    /** Small buttons beside the heading (e.g. "Add"). */
+    actions?: Snippet;
+    children?: Snippet;
+  } & Record<string, unknown> = $props();
+</script>
+
+<section class={cn('terminoir-section', className)} {...rest}>
+  {#if title || actions}
+    <div class="terminoir-section__head">
+      <div class="terminoir-section__text">
+        {#if title}<h2 class="terminoir-section__title">{title}</h2>{/if}
+        {#if description}<p class="terminoir-section__description">{description}</p>{/if}
+      </div>
+      {#if actions}<div class="terminoir-section__actions">{@render actions()}</div>{/if}
+    </div>
+  {/if}
+  {@render children?.()}
+</section>
+
+<style>
+  .terminoir-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    min-width: 0;
+  }
+  .terminoir-section__head {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+  .terminoir-section__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .terminoir-section__title {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+  .terminoir-section__description {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+  }
+  .terminoir-section__actions {
+    display: flex;
+    gap: var(--space-2);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    class?: string;
+    /** Small buttons beside the heading (e.g. "Add"). */
+    actions?: Snippet;
+    children?: Snippet;
+} & Record<string, unknown>;
+declare const Section: import("svelte").Component<$$ComponentProps, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;

package/dist/components/SegmentedControl.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+
+  import type { SegmentOption } from '../utils/componentTypes.js';
+
+  let {
+    label,
+    options,
+    value = $bindable(''),
+    size = 'md',
+    class: className = '',
+  }: {
+    /** Accessible group name; not shown. */
+    label: string;
+    options: SegmentOption[];
+    value?: string;
+    size?: 'sm' | 'md';
+    class?: string;
+  } = $props();
+</script>
+
+<div class={cn('terminoir-segmented', `terminoir-segmented--${size}`, className)} role="radiogroup" aria-label={label}>
+  {#each options as option (option.value)}
+    <button
+      type="button"
+      role="radio"
+      aria-checked={value === option.value}
+      class="terminoir-segmented__option terminoir-focusable"
+      class:terminoir-segmented__option--active={value === option.value}
+      onclick={() => (value = option.value)}
+    >
+      {option.label}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .terminoir-segmented {
+    display: inline-flex;
+    padding: 0.2rem;
+    gap: 0.15rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-control);
+    background: color-mix(in srgb, var(--card) 40%, var(--background));
+  }
+  .terminoir-segmented__option {
+    border: 0;
+    background: transparent;
+    color: var(--muted-foreground);
+    font: inherit;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    padding: 0.3rem 0.7rem;
+    border-radius: calc(var(--radius-control) - 0.2rem);
+    cursor: pointer;
+  }
+  .terminoir-segmented--sm .terminoir-segmented__option { font-size: 0.75rem; padding: 0.2rem 0.55rem; }
+  .terminoir-segmented__option:hover { color: var(--foreground); }
+  .terminoir-segmented__option--active {
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { SegmentOption } from '../utils/componentTypes.js';
+type $$ComponentProps = {
+    /** Accessible group name; not shown. */
+    label: string;
+    options: SegmentOption[];
+    value?: string;
+    size?: 'sm' | 'md';
+    class?: string;
+};
+declare const SegmentedControl: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/components/Select.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { cn } from '../utils/cn.js';
+  import FieldMessage from './FieldMessage.svelte';
 
   let {
     label,
+    hideLabel = false,
+    quiet = false,
+    hint,
+    error,
     id,
     value = $bindable(''),
     disabled = false,
@@ -11,25 +17,37 @@
     ...rest
   }: {
     label: string;
+    /** Keep the label for screen readers only (compact rows, toolbars). */
+    hideLabel?: boolean;
+    /** Borderless until hovered or focused, for inline editing (property rows). */
+    quiet?: boolean;
+    hint?: string;
+    error?: string;
     id?: string;
     value?: string;
     disabled?: boolean;
     class?: string;
-    children?: import('svelte').Snippet;
+    /** `<option>` elements. */
+    children?: Snippet;
   } & Record<string, unknown> = $props();
 
-  const selectId = $derived(id ?? `terminoir-select-${Math.random().toString(36).slice(2, 8)}`);
+  const fallbackId = $props.id();
+  const selectId = $derived(id ?? fallbackId);
+  const messageId = $derived(`${selectId}-message`);
 </script>
 
-<div class={cn('terminoir-field', className)}>
-  <label class="terminoir-field__label" for={selectId}>{label}</label>
+<div class={cn('terminoir-field', quiet && 'terminoir-field--quiet', className)}>
+  <label class={cn('terminoir-field__label', hideLabel && 'terminoir-sr-only')} for={selectId}>{label}</label>
   <select
     id={selectId}
     class="terminoir-select terminoir-focusable"
     bind:value
     {disabled}
+    aria-invalid={error ? true : undefined}
+    aria-describedby={error || hint ? messageId : undefined}
     {...rest}
   >
     {@render children?.()}
   </select>
+  <FieldMessage id={messageId} {hint} {error} />
 </div>

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

@@ -1,10 +1,18 @@
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
+    /** Keep the label for screen readers only (compact rows, toolbars). */
+    hideLabel?: boolean;
+    /** Borderless until hovered or focused, for inline editing (property rows). */
+    quiet?: boolean;
+    hint?: string;
+    error?: string;
     id?: string;
     value?: string;
     disabled?: boolean;
     class?: string;
-    children?: import('svelte').Snippet;
+    /** `<option>` elements. */
+    children?: Snippet;
 } & Record<string, unknown>;
 declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/components/Spacer.svelte

@@ -0,0 +1,6 @@
+<!-- Fills free space in a flex column or row, e.g. to pin a footer link to the bottom of a sidebar. -->
+<div class="terminoir-spacer" aria-hidden="true"></div>
+
+<style>
+  .terminoir-spacer { flex: 1 1 auto; }
+</style>