terminoir 0.4.0 → 0.5.0

package/dist/components/IconField.svelte

@@ -7,19 +7,43 @@
     label = 'Icon',
     value = $bindable('inbox' as IconPickerId | string),
     options = ICON_PICKER_OPTIONS,
+    compact = false,
     class: className = '',
   }: {
     label?: string;
     value?: string;
     options?: ReadonlyArray<{ id: string; label: string }>;
+    /** A button showing the current icon that opens the grid in a popover (for forms). */
+    compact?: boolean;
     class?: string;
   } = $props();
 
-  const groupId = `terminoir-icon-field-${Math.random().toString(36).slice(2, 8)}`;
+  const groupId = $props.id();
+  let open = $state(false);
+  let root: HTMLDivElement | undefined = $state();
+  const current = $derived(options.find((o) => o.id === value));
+
+  function pick(id: string) {
+    value = id;
+    open = false;
+  }
+
+  $effect(() => {
+    if (!open) return;
+    const onPointer = (event: PointerEvent) => {
+      if (root && !root.contains(event.target as Node)) open = false;
+    };
+    const onKey = (event: KeyboardEvent) => event.key === 'Escape' && (open = false);
+    document.addEventListener('pointerdown', onPointer);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onPointer);
+      document.removeEventListener('keydown', onKey);
+    };
+  });
 </script>
 
-<fieldset class={cn('terminoir-icon-field glass-palette', className)} aria-labelledby={`${groupId}-label`}>
-  <legend id={`${groupId}-label`} class="terminoir-field__label">{label}</legend>
+{#snippet grid()}
   <div class="terminoir-icon-field__grid" role="radiogroup" aria-label={label}>
     {#each options as option (option.id)}
       <button
@@ -30,10 +54,61 @@
         aria-checked={value === option.id}
         aria-label={option.label}
         title={option.label}
-        onclick={() => (value = option.id)}
+        onclick={() => pick(option.id)}
       >
         <NavIcon name={option.id} />
       </button>
     {/each}
   </div>
-</fieldset>
+{/snippet}
+
+{#if compact}
+  <div bind:this={root} class={cn('terminoir-field terminoir-icon-field--compact', className)}>
+    <span id={`${groupId}-label`} class="terminoir-field__label">{label}</span>
+    <button
+      type="button"
+      class="terminoir-icon-field__trigger terminoir-input terminoir-focusable"
+      aria-labelledby={`${groupId}-label`}
+      aria-haspopup="dialog"
+      aria-expanded={open}
+      onclick={() => (open = !open)}
+    >
+      {#if value}<NavIcon name={value} />{/if}
+      <span>{current?.label ?? (value ? value : 'Choose an icon')}</span>
+    </button>
+    {#if open}
+      <div class="terminoir-icon-field__popover glass-popover" role="dialog" aria-label={label}>
+        {@render grid()}
+      </div>
+    {/if}
+  </div>
+{:else}
+  <fieldset class={cn('terminoir-icon-field glass-palette', className)} aria-labelledby={`${groupId}-label`}>
+    <legend id={`${groupId}-label`} class="terminoir-field__label">{label}</legend>
+    {@render grid()}
+  </fieldset>
+{/if}
+
+<style>
+  .terminoir-icon-field--compact { position: relative; }
+  .terminoir-icon-field__trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    text-align: left;
+    cursor: pointer;
+  }
+  .terminoir-icon-field__popover {
+    position: absolute;
+    top: calc(100% + var(--space-1));
+    left: 0;
+    z-index: 40;
+    padding: var(--space-2);
+    width: max-content;
+    max-width: 18rem;
+  }
+  .terminoir-icon-field__popover .terminoir-icon-field__grid {
+    grid-template-columns: repeat(6, 2.5rem);
+    margin-top: 0;
+  }
+</style>

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

@@ -5,6 +5,8 @@ type $$ComponentProps = {
         id: string;
         label: string;
     }>;
+    /** A button showing the current icon that opens the grid in a popover (for forms). */
+    compact?: boolean;
     class?: string;
 };
 declare const IconField: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/Inline.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8;
+
+  let {
+    gap = 2,
+    align = 'center',
+    justify = 'start',
+    wrap = true,
+    fill = false,
+    class: className = '',
+    children,
+    ...rest
+  }: {
+    /** Spacing between children, as a `--space-*` step. */
+    gap?: Gap;
+    align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+    /** Children share the row equally (e.g. two inputs side by side). */
+    fill?: boolean;
+    class?: string;
+    children?: Snippet;
+  } & Record<string, unknown> = $props();
+
+  const JUSTIFY = { start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between' };
+  const ALIGN = { start: 'flex-start', center: 'center', end: 'flex-end', baseline: 'baseline', stretch: 'stretch' };
+</script>
+
+<div
+  class={cn('terminoir-inline', fill && 'terminoir-inline--fill', className)}
+  style:gap={`var(--space-${gap})`}
+  style:align-items={ALIGN[align]}
+  style:justify-content={JUSTIFY[justify]}
+  style:flex-wrap={wrap ? 'wrap' : 'nowrap'}
+  {...rest}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .terminoir-inline {
+    display: flex;
+    min-width: 0;
+  }
+  .terminoir-inline--fill > :global(*) {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8;
+type $$ComponentProps = {
+    /** Spacing between children, as a `--space-*` step. */
+    gap?: Gap;
+    align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+    /** Children share the row equally (e.g. two inputs side by side). */
+    fill?: boolean;
+    class?: string;
+    children?: Snippet;
+} & Record<string, unknown>;
+declare const Inline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Inline = ReturnType<typeof Inline>;
+export default Inline;

package/dist/components/Input.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import { cn } from '../utils/cn.js';
+  import FieldMessage from './FieldMessage.svelte';
 
   let {
     label,
+    hideLabel = false,
+    quiet = false,
+    width,
+    hint,
+    error,
     id,
     value = $bindable(''),
     placeholder = '',
@@ -11,6 +17,15 @@
     ...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;
+    /** Fixed width for compact fields (e.g. `4rem` for a page number); fills the row otherwise. */
+    width?: string;
+    hint?: string;
+    /** Error text; also marks the input invalid. */
+    error?: string;
     id?: string;
     value?: string;
     placeholder?: string;
@@ -18,17 +33,22 @@
     class?: string;
   } & Record<string, unknown> = $props();
 
-  const inputId = $derived(id ?? `terminoir-input-${Math.random().toString(36).slice(2, 8)}`);
+  const fallbackId = $props.id();
+  const inputId = $derived(id ?? fallbackId);
+  const messageId = $derived(`${inputId}-message`);
 </script>
 
-<div class={cn('terminoir-field', className)}>
-  <label class="terminoir-field__label" for={inputId}>{label}</label>
+<div class={cn('terminoir-field', quiet && 'terminoir-field--quiet', className)} style:width>
+  <label class={cn('terminoir-field__label', hideLabel && 'terminoir-sr-only')} for={inputId}>{label}</label>
   <input
     id={inputId}
     class="terminoir-input terminoir-focusable"
     bind:value
     {placeholder}
     {disabled}
+    aria-invalid={error ? true : undefined}
+    aria-describedby={error || hint ? messageId : undefined}
     {...rest}
   />
+  <FieldMessage id={messageId} {hint} {error} />
 </div>

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

@@ -1,5 +1,14 @@
 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;
+    /** Fixed width for compact fields (e.g. `4rem` for a page number); fills the row otherwise. */
+    width?: string;
+    hint?: string;
+    /** Error text; also marks the input invalid. */
+    error?: string;
     id?: string;
     value?: string;
     placeholder?: string;

package/dist/components/List.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    label,
+    bordered = true,
+    class: className = '',
+    children,
+  }: {
+    /** Accessible list name. */
+    label?: string;
+    /** Card-style border around the rows; off for lists inside other surfaces. */
+    bordered?: boolean;
+    class?: string;
+    /** `ListItem`s. */
+    children?: Snippet;
+  } = $props();
+</script>
+
+<ul class={cn('terminoir-list', bordered && 'terminoir-list--bordered', className)} aria-label={label}>
+  {@render children?.()}
+</ul>
+
+<style>
+  .terminoir-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+  .terminoir-list--bordered {
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+  }
+  .terminoir-list--bordered > :global(li + li) {
+    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Accessible list name. */
+    label?: string;
+    /** Card-style border around the rows; off for lists inside other surfaces. */
+    bordered?: boolean;
+    class?: string;
+    /** `ListItem`s. */
+    children?: Snippet;
+};
+declare const List: import("svelte").Component<$$ComponentProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/ListItem.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    title,
+    description,
+    active = false,
+    onclick,
+    class: className = '',
+    leading,
+    trailing,
+    children,
+    ...rest
+  }: {
+    title?: string;
+    description?: string;
+    /** Highlighted row (keyboard focus in a listbox, current selection). */
+    active?: boolean;
+    /** Makes the whole row a button. Keep `trailing` free of other buttons when set. */
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+    leading?: Snippet;
+    trailing?: Snippet;
+    /** Replaces title/description for custom content. */
+    children?: Snippet;
+  } & Record<string, unknown> = $props();
+</script>
+
+{#snippet body()}
+  {#if leading}<span class="terminoir-list-item__leading">{@render leading()}</span>{/if}
+  <span class="terminoir-list-item__text">
+    {#if children}
+      {@render children()}
+    {:else}
+      {#if title}<span class="terminoir-list-item__title">{title}</span>{/if}
+      {#if description}<span class="terminoir-list-item__description">{description}</span>{/if}
+    {/if}
+  </span>
+  {#if trailing}<span class="terminoir-list-item__trailing">{@render trailing()}</span>{/if}
+{/snippet}
+
+<li class={cn('terminoir-list-item', active && 'terminoir-list-item--active', className)} {...rest}>
+  {#if onclick}
+    <button type="button" class="terminoir-list-item__row terminoir-list-item__button terminoir-focusable" {onclick}>
+      {@render body()}
+    </button>
+  {:else}
+    <div class="terminoir-list-item__row">{@render body()}</div>
+  {/if}
+</li>
+
+<style>
+  .terminoir-list-item { min-width: 0; }
+  .terminoir-list-item__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    width: 100%;
+    min-height: 2.75rem;
+    padding: 0.5rem 0.85rem;
+    box-sizing: border-box;
+  }
+  .terminoir-list-item__button {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    border-radius: 0;
+  }
+  .terminoir-list-item__button:hover,
+  .terminoir-list-item--active > .terminoir-list-item__row {
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+  }
+  .terminoir-list-item__leading {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: 1.25rem;
+    color: var(--muted-foreground);
+  }
+  .terminoir-list-item__text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+  }
+  .terminoir-list-item__title {
+    font-size: 0.875rem;
+    color: var(--foreground);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .terminoir-list-item__description {
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .terminoir-list-item__trailing {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+    color: var(--muted-foreground);
+    font-size: 0.8125rem;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    /** Highlighted row (keyboard focus in a listbox, current selection). */
+    active?: boolean;
+    /** Makes the whole row a button. Keep `trailing` free of other buttons when set. */
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+    leading?: Snippet;
+    trailing?: Snippet;
+    /** Replaces title/description for custom content. */
+    children?: Snippet;
+} & Record<string, unknown>;
+declare const ListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/components/MenuItems.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { MenuItem } from '../utils/menu.js';
+  import NavIcon from './NavIcon.svelte';
+
+  let { items, onselect }: { items: MenuItem[]; onselect: (item: MenuItem) => void } = $props();
+</script>
+
+{#each items as item (item.id)}
+  <li role="none">
+    <button
+      type="button"
+      role="menuitem"
+      class="terminoir-menu__item terminoir-focusable"
+      class:terminoir-menu__item--danger={item.tone === 'danger'}
+      disabled={item.disabled}
+      onclick={() => onselect(item)}
+    >
+      {#if item.icon}<NavIcon name={item.icon} />{/if}
+      <span>{item.label}</span>
+    </button>
+  </li>
+{/each}
+
+<style>
+  .terminoir-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    text-align: left;
+    border: 0;
+    background: transparent;
+    color: var(--foreground);
+    border-radius: calc(var(--radius) - 4px);
+    padding: 0.45rem 0.6rem;
+    font: inherit;
+    font-size: 0.875rem;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .terminoir-menu__item:hover:not(:disabled) { background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+  .terminoir-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
+  .terminoir-menu__item--danger { color: var(--destructive); }
+</style>

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

@@ -0,0 +1,8 @@
+import type { MenuItem } from '../utils/menu.js';
+type $$ComponentProps = {
+    items: MenuItem[];
+    onselect: (item: MenuItem) => void;
+};
+declare const MenuItems: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuItems = ReturnType<typeof MenuItems>;
+export default MenuItems;

package/dist/components/NavSection.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    title,
+    class: className = '',
+    action,
+    children,
+  }: {
+    title: string;
+    class?: string;
+    /** Small trailing control, e.g. an IconButton to add an entry. */
+    action?: Snippet;
+    /** AppShellNavLink rows. */
+    children?: Snippet;
+  } = $props();
+</script>
+
+<nav class={cn('terminoir-nav-section', className)} aria-label={title}>
+  <div class="terminoir-nav-section__head">
+    <span class="terminoir-nav-section__title">{title}</span>
+    {#if action}{@render action()}{/if}
+  </div>
+  <div class="terminoir-nav-section__items">{@render children?.()}</div>
+</nav>
+
+<style>
+  .terminoir-nav-section { display: flex; flex-direction: column; gap: var(--space-1); }
+  .terminoir-nav-section__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 1.75rem;
+    padding-left: 0.65rem;
+  }
+  .terminoir-nav-section__title {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+  .terminoir-nav-section__items { display: flex; flex-direction: column; gap: 0.1rem; }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    class?: string;
+    /** Small trailing control, e.g. an IconButton to add an entry. */
+    action?: Snippet;
+    /** AppShellNavLink rows. */
+    children?: Snippet;
+};
+declare const NavSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavSection = ReturnType<typeof NavSection>;
+export default NavSection;

package/dist/components/Page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    width = 'default',
+    fill = false,
+    class: className = '',
+    children,
+    ...rest
+  }: {
+    /** Readable column width; `full` spans the stage. */
+    width?: 'narrow' | 'default' | 'wide' | 'full';
+    /** Edge-to-edge and full height with no padding, for canvases (graphs, viewers, calendars). */
+    fill?: boolean;
+    class?: string;
+    children?: Snippet;
+  } & Record<string, unknown> = $props();
+</script>
+
+<div class={cn('terminoir-page', `terminoir-page--${width}`, fill && 'terminoir-page--fill', className)} {...rest}>
+  {@render children?.()}
+</div>
+
+<style>
+  .terminoir-page {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+    width: 100%;
+    margin-inline: auto;
+    padding: var(--space-6) var(--space-6) var(--space-10);
+    box-sizing: border-box;
+    min-width: 0;
+  }
+  .terminoir-page--narrow { max-width: 40rem; }
+  .terminoir-page--default { max-width: 56rem; }
+  .terminoir-page--wide { max-width: 80rem; }
+  .terminoir-page--full { max-width: none; }
+  .terminoir-page--fill {
+    max-width: none;
+    height: 100%;
+    padding: 0;
+    gap: 0;
+    position: relative;
+  }
+  @media (max-width: 700px) {
+    .terminoir-page:not(.terminoir-page--fill) {
+      padding: var(--space-4) var(--space-4) var(--space-8);
+      gap: var(--space-5);
+    }
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Readable column width; `full` spans the stage. */
+    width?: 'narrow' | 'default' | 'wide' | 'full';
+    /** Edge-to-edge and full height with no padding, for canvases (graphs, viewers, calendars). */
+    fill?: boolean;
+    class?: string;
+    children?: Snippet;
+} & Record<string, unknown>;
+declare const Page: import("svelte").Component<$$ComponentProps, {}, "">;
+type Page = ReturnType<typeof Page>;
+export default Page;