terminoir 0.4.0 → 0.5.0

package/dist/components/CommandPalette.svelte

@@ -1,72 +1,90 @@
 <script lang="ts">
-  import Dialog from './Dialog.svelte';
-  import Input from './Input.svelte';
+  import type { Snippet } from 'svelte';
+  import { filterCommands, groupCommands, type CommandItem } from '../utils/commands.js';
+  import { moveIndex } from '../utils/listNav.js';
   import Kbd from './Kbd.svelte';
-
-  export type CommandItem = {
-    id: string;
-    label: string;
-    hint?: string;
-    keywords?: string;
-    onSelect?: () => void;
-  };
+  import NavIcon from './NavIcon.svelte';
 
   let {
     open = $bindable(false),
     items = [],
+    query = $bindable(''),
+    filter = true,
+    loading = false,
     placeholder = 'Search commands…',
+    emptyText = 'No matches',
+    hotkey = true,
+    onclose,
+    footer,
   }: {
     open?: boolean;
     items?: CommandItem[];
+    /** Current search text; bind it to drive async results. */
+    query?: string;
+    /** Filter `items` by `query` locally. Turn off when the caller supplies already-matched results. */
+    filter?: boolean;
+    /** Shows a searching state while async results load. */
+    loading?: boolean;
     placeholder?: string;
+    emptyText?: string;
+    /** Toggle with ⌘K / Ctrl+K. Turn off when the app owns that shortcut. */
+    hotkey?: boolean;
+    onclose?: () => void;
+    /** Extra content under the results (e.g. an answer panel). */
+    footer?: Snippet;
   } = $props();
 
-  let query = $state('');
+  const uid = $props.id();
+  let inputEl: HTMLInputElement | undefined = $state();
   let activeIndex = $state(0);
 
-  const filtered = $derived(
-    items.filter((item) => {
-      const hay = `${item.label} ${item.keywords ?? ''}`.toLowerCase();
-      return hay.includes(query.toLowerCase().trim());
-    }),
-  );
+  const visible = $derived(filter ? filterCommands(items, query) : items);
+  const groups = $derived(groupCommands(visible));
+  /** Flat order of rows as rendered, so arrow keys follow the grouped layout. */
+  const ordered = $derived(groups.flatMap((g) => g.items));
 
   $effect(() => {
-    if (open) {
-      query = '';
-      activeIndex = 0;
-    }
+    if (!open) return;
+    query = '';
+    activeIndex = 0;
+    queueMicrotask(() => inputEl?.focus());
   });
 
   $effect(() => {
-    if (activeIndex >= filtered.length) activeIndex = Math.max(0, filtered.length - 1);
+    if (activeIndex >= ordered.length) activeIndex = Math.max(0, ordered.length - 1);
   });
 
+  function close() {
+    open = false;
+    onclose?.();
+  }
+
   function run(item: CommandItem | undefined) {
     if (!item) return;
     item.onSelect?.();
-    open = false;
+    close();
   }
 
-  function onListKeydown(event: KeyboardEvent) {
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      activeIndex = Math.min(filtered.length - 1, activeIndex + 1);
-    } else if (event.key === 'ArrowUp') {
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      activeIndex = Math.max(0, activeIndex - 1);
+      activeIndex = Math.max(0, moveIndex(activeIndex, event.key === 'ArrowDown' ? 1 : -1, ordered.length));
     } else if (event.key === 'Enter') {
       event.preventDefault();
-      run(filtered[activeIndex]);
+      run(ordered[activeIndex]);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      close();
     }
   }
 
   $effect(() => {
-    if (typeof window === 'undefined') return;
+    if (!hotkey || typeof window === 'undefined') return;
     const onGlobal = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
         event.preventDefault();
-        open = !open;
+        if (open) close();
+        else open = true;
       }
     };
     window.addEventListener('keydown', onGlobal);
@@ -74,89 +92,152 @@
   });
 </script>
 
-<Dialog bind:open title="Command palette">
-  <div class="terminoir-command">
-    <Input label="Search" bind:value={query} {placeholder} />
-    <p class="terminoir-command__hint">
-      Navigate with <Kbd>↑</Kbd> <Kbd>↓</Kbd>, select with <Kbd>Enter</Kbd>, toggle with
-      <Kbd>⌘</Kbd><Kbd>K</Kbd>
-    </p>
-    <ul class="terminoir-command__list" role="listbox" tabindex="0" onkeydown={onListKeydown}>
-      {#each filtered as item, index (item.id)}
-        <li>
-          <button
-            type="button"
-            role="option"
-            aria-selected={index === activeIndex}
-            class="terminoir-command__item terminoir-focusable"
-            class:terminoir-command__item--active={index === activeIndex}
-            onclick={() => run(item)}
-          >
-            <span>{item.label}</span>
-            {#if item.hint}<span class="terminoir-command__hint-text">{item.hint}</span>{/if}
-          </button>
-        </li>
-      {/each}
-      {#if filtered.length === 0}
-        <li class="terminoir-command__empty">No matches</li>
-      {/if}
-    </ul>
+{#if open}
+  <div class="terminoir-command-backdrop" role="presentation" onclick={(e) => e.target === e.currentTarget && close()}>
+    <div class="terminoir-command glass-modal" role="dialog" aria-modal="true" aria-label="Command palette">
+      <div class="terminoir-command__search">
+        <NavIcon name="magnifying-glass" />
+        <input
+          bind:this={inputEl}
+          bind:value={query}
+          class="terminoir-command__input"
+          type="text"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls={`${uid}-list`}
+          aria-activedescendant={ordered.length ? `${uid}-row-${activeIndex}` : undefined}
+          aria-label="Search"
+          autocomplete="off"
+          spellcheck="false"
+          {placeholder}
+          onkeydown={onKeydown}
+        />
+        {#if loading}<span class="terminoir-command__loading" aria-live="polite">Searching…</span>{/if}
+      </div>
+      <div id={`${uid}-list`} class="terminoir-command__list" role="listbox" aria-label="Results">
+        {#each groups as group (group.group ?? '')}
+          {#if group.group}<div class="terminoir-command__group" role="presentation">{group.group}</div>{/if}
+          {#each group.items as item (item.id)}
+            {@const index = ordered.indexOf(item)}
+            <!-- Combobox pattern: focus stays in the input, which handles arrow keys and Enter. -->
+            <!-- svelte-ignore a11y_click_events_have_key_events, a11y_interactive_supports_focus -->
+            <div
+              id={`${uid}-row-${index}`}
+              role="option"
+              aria-selected={index === activeIndex}
+              class="terminoir-command__item"
+              class:terminoir-command__item--active={index === activeIndex}
+              onclick={() => run(item)}
+              onpointermove={() => (activeIndex = index)}
+            >
+              {#if item.icon}<span class="terminoir-command__icon"><NavIcon name={item.icon} color={item.iconColor} /></span>{/if}
+              <span class="terminoir-command__label">{item.label}</span>
+              {#if item.hint}<span class="terminoir-command__hint-text">{item.hint}</span>{/if}
+            </div>
+          {/each}
+        {/each}
+        {#if ordered.length === 0 && !loading && query.trim()}
+          <div class="terminoir-command__empty">{emptyText}</div>
+        {/if}
+      </div>
+      {#if footer}<div class="terminoir-command__footer">{@render footer()}</div>{/if}
+      <div class="terminoir-command__keys" aria-hidden="true">
+        <span><Kbd>↑</Kbd><Kbd>↓</Kbd> move</span>
+        <span><Kbd>↵</Kbd> open</span>
+        <span><Kbd>esc</Kbd> close</span>
+      </div>
+    </div>
   </div>
-</Dialog>
+{/if}
 
 <style>
+  .terminoir-command-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 70;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 12vh var(--space-4) var(--space-4);
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(4px);
+  }
   .terminoir-command {
+    width: min(100%, 38rem);
+    max-height: 70vh;
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
+    overflow: hidden;
   }
-
-  .terminoir-command__hint {
-    margin: 0;
-    font-size: 0.75rem;
-    color: var(--muted-foreground);
+  .terminoir-command__search {
     display: flex;
     align-items: center;
-    gap: 0.25rem;
-    flex-wrap: wrap;
+    gap: var(--space-3);
+    padding: 0 var(--space-4);
+    border-bottom: 1px solid var(--border);
+    color: var(--muted-foreground);
   }
-
+  .terminoir-command__input {
+    flex: 1;
+    min-width: 0;
+    padding: 0.95rem 0;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--foreground);
+    font: inherit;
+    font-size: 1rem;
+  }
+  .terminoir-command__loading { font-size: 0.75rem; }
   .terminoir-command__list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    max-height: 16rem;
-    overflow: auto;
-    border: 1px solid var(--border);
-    border-radius: calc(var(--radius) - 2px);
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-2);
+  }
+  .terminoir-command__group {
+    padding: var(--space-2) var(--space-2) var(--space-1);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
   }
-
   .terminoir-command__item {
-    width: 100%;
     display: flex;
-    justify-content: space-between;
-    gap: var(--space-2);
-    padding: 0.55rem 0.75rem;
-    border: 0;
-    background: transparent;
-    text-align: left;
-    font: inherit;
+    align-items: center;
+    gap: var(--space-3);
+    padding: 0.5rem 0.6rem;
+    border-radius: calc(var(--radius-control) - 0.2rem);
+    font-size: 0.875rem;
     cursor: pointer;
   }
-
-  .terminoir-command__item--active,
-  .terminoir-command__item:hover {
-    background: color-mix(in srgb, var(--accent) 75%, transparent);
+  .terminoir-command__item--active { background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+  .terminoir-command__icon { display: inline-flex; width: 1.1rem; justify-content: center; flex-shrink: 0; }
+  .terminoir-command__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
-
-  .terminoir-command__hint-text {
-    color: var(--muted-foreground);
-    font-size: 0.8125rem;
+  .terminoir-command__hint-text { color: var(--muted-foreground); font-size: 0.75rem; flex-shrink: 0; }
+  .terminoir-command__empty { padding: var(--space-6); color: var(--muted-foreground); text-align: center; font-size: 0.875rem; }
+  .terminoir-command__footer {
+    padding: var(--space-3) var(--space-4);
+    border-top: 1px solid var(--border);
+    font-size: 0.875rem;
   }
-
-  .terminoir-command__empty {
-    padding: var(--space-4);
+  .terminoir-command__keys {
+    display: flex;
+    gap: var(--space-4);
+    padding: var(--space-2) var(--space-4);
+    border-top: 1px solid var(--border);
+    font-size: 0.75rem;
     color: var(--muted-foreground);
-    text-align: center;
+  }
+  .terminoir-command__keys span { display: inline-flex; align-items: center; gap: 0.2rem; }
+  @media (max-width: 700px) {
+    .terminoir-command-backdrop { padding-top: var(--space-4); }
+    .terminoir-command__keys { display: none; }
   }
 </style>

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

@@ -1,15 +1,22 @@
-export type CommandItem = {
-    id: string;
-    label: string;
-    hint?: string;
-    keywords?: string;
-    onSelect?: () => void;
-};
+import type { Snippet } from 'svelte';
+import { type CommandItem } from '../utils/commands.js';
 type $$ComponentProps = {
     open?: boolean;
     items?: CommandItem[];
+    /** Current search text; bind it to drive async results. */
+    query?: string;
+    /** Filter `items` by `query` locally. Turn off when the caller supplies already-matched results. */
+    filter?: boolean;
+    /** Shows a searching state while async results load. */
+    loading?: boolean;
     placeholder?: string;
+    emptyText?: string;
+    /** Toggle with ⌘K / Ctrl+K. Turn off when the app owns that shortcut. */
+    hotkey?: boolean;
+    onclose?: () => void;
+    /** Extra content under the results (e.g. an answer panel). */
+    footer?: Snippet;
 };
-declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "open">;
+declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "open" | "query">;
 type CommandPalette = ReturnType<typeof CommandPalette>;
 export default CommandPalette;

package/dist/components/ContextMenu.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { MenuItem } from '../utils/menu.js';
+  import MenuItems from './MenuItems.svelte';
+
+  let {
+    open = $bindable(false),
+    x = 0,
+    y = 0,
+    label = 'Actions',
+    items,
+  }: {
+    open?: boolean;
+    /** Viewport coordinates, usually from the contextmenu event. */
+    x?: number;
+    y?: number;
+    label?: string;
+    items: MenuItem[];
+  } = $props();
+
+  let menuEl: HTMLUListElement | undefined = $state();
+
+  function select(item: MenuItem) {
+    if (item.disabled) return;
+    item.onSelect?.();
+    open = false;
+  }
+
+  $effect(() => {
+    if (!open) return;
+    queueMicrotask(() => menuEl?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus());
+    const onPointer = (event: PointerEvent) => {
+      if (menuEl && !menuEl.contains(event.target as Node)) open = false;
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') open = false;
+    };
+    document.addEventListener('pointerdown', onPointer);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('pointerdown', onPointer);
+      document.removeEventListener('keydown', onKey);
+    };
+  });
+</script>
+
+{#if open}
+  <ul
+    bind:this={menuEl}
+    class="terminoir-context-menu glass-popover"
+    role="menu"
+    aria-label={label}
+    style:left={`min(${x}px, calc(100vw - 13rem))`}
+    style:top={`min(${y}px, calc(100vh - ${items.length * 2.5 + 1}rem))`}
+  >
+    <MenuItems {items} onselect={select} />
+  </ul>
+{/if}
+
+<style>
+  .terminoir-context-menu {
+    position: fixed;
+    z-index: 80;
+    min-width: 12rem;
+    margin: 0;
+    padding: var(--space-1);
+    list-style: none;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { MenuItem } from '../utils/menu.js';
+type $$ComponentProps = {
+    open?: boolean;
+    /** Viewport coordinates, usually from the contextmenu event. */
+    x?: number;
+    y?: number;
+    label?: string;
+    items: MenuItem[];
+};
+declare const ContextMenu: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/DataTable.svelte

@@ -0,0 +1,139 @@
+<script lang="ts" generics="Row">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  import type { DataColumn } from '../utils/componentTypes.js';
+
+  let {
+    columns,
+    rows,
+    rowKey,
+    label,
+    cell,
+    onRowClick,
+    empty,
+    class: className = '',
+  }: {
+    columns: DataColumn[];
+    rows: Row[];
+    rowKey: (row: Row) => string;
+    /** Accessible table name. */
+    label: string;
+    /** Renders one cell; defaults to `String(row[column.key])`. */
+    cell?: Snippet<[Row, DataColumn]>;
+    /** Makes rows clickable and keyboard-activatable. */
+    onRowClick?: (row: Row) => void;
+    /** Shown in place of the table body when there are no rows. */
+    empty?: Snippet;
+    class?: string;
+  } = $props();
+
+  function fallback(row: Row, column: DataColumn): string {
+    const value = (row as Record<string, unknown>)[column.key];
+    return value == null ? '' : String(value);
+  }
+
+  function onRowKeydown(event: KeyboardEvent, row: Row) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onRowClick?.(row);
+    }
+  }
+</script>
+
+<div class={cn('terminoir-table-wrap', className)}>
+  <table class="terminoir-table" aria-label={label}>
+    <thead>
+      <tr>
+        {#each columns as column (column.key)}
+          <th
+            scope="col"
+            style:width={column.width}
+            class:terminoir-table__end={column.align === 'end'}
+            class:terminoir-table__mobile-hidden={column.hideOnMobile}
+          >
+            {column.label}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each rows as row (rowKey(row))}
+        <tr
+          class:terminoir-table__row--interactive={!!onRowClick}
+          tabindex={onRowClick ? 0 : undefined}
+          onclick={onRowClick ? () => onRowClick(row) : undefined}
+          onkeydown={onRowClick ? (event) => onRowKeydown(event, row) : undefined}
+        >
+          {#each columns as column (column.key)}
+            <td
+              class:terminoir-table__end={column.align === 'end'}
+              class:terminoir-table__mobile-hidden={column.hideOnMobile}
+            >
+              {#if cell}{@render cell(row, column)}{:else}{fallback(row, column)}{/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  {#if rows.length === 0 && empty}
+    <div class="terminoir-table__empty">{@render empty()}</div>
+  {/if}
+</div>
+
+<style>
+  .terminoir-table-wrap {
+    width: 100%;
+    overflow-x: auto;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+  }
+  .terminoir-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+  th {
+    position: sticky;
+    top: 0;
+    padding: 0.55rem 0.85rem;
+    text-align: left;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+    background: color-mix(in srgb, var(--card) 80%, var(--background));
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+  }
+  td {
+    padding: 0.55rem 0.85rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
+    vertical-align: middle;
+    max-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  tbody tr:last-child td { border-bottom: 0; }
+  .terminoir-table__end { text-align: right; }
+  .terminoir-table__row--interactive { cursor: pointer; }
+  .terminoir-table__row--interactive:hover td {
+    background: color-mix(in srgb, var(--foreground) 4%, transparent);
+  }
+  .terminoir-table__row--interactive:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: -2px;
+  }
+  .terminoir-table__empty {
+    padding: var(--space-8) var(--space-4);
+    text-align: center;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+  }
+  @media (max-width: 700px) {
+    .terminoir-table__mobile-hidden { display: none; }
+  }
+</style>

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { DataColumn } from '../utils/componentTypes.js';
+declare function $$render<Row>(): {
+    props: {
+        columns: DataColumn[];
+        rows: Row[];
+        rowKey: (row: Row) => string;
+        /** Accessible table name. */
+        label: string;
+        /** Renders one cell; defaults to `String(row[column.key])`. */
+        cell?: Snippet<[Row, DataColumn]>;
+        /** Makes rows clickable and keyboard-activatable. */
+        onRowClick?: (row: Row) => void;
+        /** Shown in place of the table body when there are no rows. */
+        empty?: Snippet;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<Row> = InstanceType<typeof DataTable<Row>>;
+export default DataTable;

package/dist/components/DescriptionList.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+
+  import type { DescriptionItem } from '../utils/componentTypes.js';
+
+  let {
+    items,
+    class: className = '',
+  }: {
+    items: DescriptionItem[];
+    class?: string;
+  } = $props();
+</script>
+
+<dl class={cn('terminoir-dl', className)}>
+  {#each items as item (item.term)}
+    <div class="terminoir-dl__row">
+      <dt>{item.term}</dt>
+      <dd class:terminoir-dl__danger={item.tone === 'danger'} class:terminoir-dl__success={item.tone === 'success'}>
+        {item.detail}
+      </dd>
+    </div>
+  {/each}
+</dl>
+
+<style>
+  .terminoir-dl { margin: 0; display: flex; flex-direction: column; }
+  .terminoir-dl__row {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: 0.4rem 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    font-size: 0.8125rem;
+  }
+  .terminoir-dl__row:last-child { border-bottom: 0; }
+  dt { color: var(--muted-foreground); }
+  dd { margin: 0; color: var(--foreground); font-variant-numeric: tabular-nums; text-align: right; }
+  .terminoir-dl__danger { color: var(--destructive); }
+  .terminoir-dl__success { color: var(--status-done); }
+</style>