terminoir 0.4.0 → 0.5.0

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

@@ -0,0 +1,8 @@
+import type { DescriptionItem } from '../utils/componentTypes.js';
+type $$ComponentProps = {
+    items: DescriptionItem[];
+    class?: string;
+};
+declare const DescriptionList: import("svelte").Component<$$ComponentProps, {}, "">;
+type DescriptionList = ReturnType<typeof DescriptionList>;
+export default DescriptionList;

package/dist/components/Dialog.svelte

@@ -18,7 +18,8 @@
     onclose?: () => void;
   } = $props();
 
-  const titleId = $derived(labelledBy ?? `terminoir-dialog-title-${Math.random().toString(36).slice(2, 8)}`);
+  const fallbackId = $props.id();
+  const titleId = $derived(labelledBy ?? fallbackId);
 
   function onBackdropClick(event: MouseEvent) {
     if (event.target === event.currentTarget) {

package/dist/components/Disclosure.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    summary,
+    open = $bindable(false),
+    class: className = '',
+    children,
+  }: {
+    summary: string;
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<details class={cn('terminoir-disclosure', className)} bind:open>
+  <summary class="terminoir-disclosure__summary terminoir-focusable">{summary}</summary>
+  <div class="terminoir-disclosure__body">
+    {@render children?.()}
+  </div>
+</details>
+
+<style>
+  .terminoir-disclosure__summary {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    list-style: none;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--muted-foreground);
+    border-radius: var(--radius-control);
+  }
+  .terminoir-disclosure__summary::-webkit-details-marker { display: none; }
+  .terminoir-disclosure__summary::before {
+    content: '';
+    width: 0.4rem;
+    height: 0.4rem;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    transform: rotate(-45deg);
+    transition: transform var(--duration-fast) ease;
+  }
+  .terminoir-disclosure[open] > .terminoir-disclosure__summary::before { transform: rotate(45deg); }
+  .terminoir-disclosure__summary:hover { color: var(--foreground); }
+  .terminoir-disclosure__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding-top: var(--space-3);
+  }
+</style>

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

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

package/dist/components/DocumentViewer.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  import type { ViewerMark } from '../utils/componentTypes.js';
+
+  let {
+    viewport = $bindable(),
+    page = $bindable(),
+    marks = [],
+    onmarkclick,
+    onpagepointerup,
+    error,
+    busy = false,
+    class: className = '',
+    toolbar,
+    children,
+  }: {
+    /** The scrolling area (measure it to fit pages to width). */
+    viewport?: HTMLDivElement;
+    /** The page layer marks are positioned against (use for selection maths). */
+    page?: HTMLDivElement;
+    /** Highlights drawn over the page. */
+    marks?: ViewerMark[];
+    onmarkclick?: (id: string) => void;
+    onpagepointerup?: (event: PointerEvent) => void;
+    /** Replaces the page with an error message. */
+    error?: string | null;
+    busy?: boolean;
+    class?: string;
+    /** Page navigation, zoom, download… */
+    toolbar?: Snippet;
+    /** The rendered page, e.g. a `<canvas>`. */
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('terminoir-viewer', className)} aria-busy={busy}>
+  {#if toolbar}<div class="terminoir-viewer__toolbar">{@render toolbar()}</div>{/if}
+  {#if error}
+    <p class="terminoir-viewer__error" role="alert">{error}</p>
+  {:else}
+    <div class="terminoir-viewer__viewport" bind:this={viewport}>
+      <div class="terminoir-viewer__page" bind:this={page} role="presentation" onpointerup={onpagepointerup}>
+        {@render children?.()}
+        {#each marks as mark (mark.id)}
+          <button
+            type="button"
+            class="terminoir-viewer__mark"
+            style:left={`${mark.x * 100}%`}
+            style:top={`${mark.y * 100}%`}
+            style:width={`${mark.w * 100}%`}
+            style:height={`${mark.h * 100}%`}
+            style:background={mark.color ?? 'rgba(250, 204, 21, 0.35)'}
+            aria-label={mark.label ?? 'Highlight'}
+            onclick={() => onmarkclick?.(mark.id)}
+          ></button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .terminoir-viewer {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--card) 35%, var(--background));
+    overflow: hidden;
+  }
+  .terminoir-viewer__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    border-bottom: 1px solid var(--border);
+  }
+  .terminoir-viewer__viewport {
+    overflow: auto;
+    max-height: min(72vh, 900px);
+    padding: var(--space-2);
+  }
+  .terminoir-viewer__page {
+    position: relative;
+    display: block;
+    width: max-content;
+    margin: 0 auto;
+  }
+  .terminoir-viewer__page :global(canvas) {
+    display: block;
+    border-radius: calc(var(--radius) - 4px);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
+  }
+  .terminoir-viewer__mark {
+    position: absolute;
+    border: 0;
+    padding: 0;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .terminoir-viewer__error { margin: var(--space-4); color: var(--destructive); font-size: 0.875rem; }
+</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { ViewerMark } from '../utils/componentTypes.js';
+type $$ComponentProps = {
+    /** The scrolling area (measure it to fit pages to width). */
+    viewport?: HTMLDivElement;
+    /** The page layer marks are positioned against (use for selection maths). */
+    page?: HTMLDivElement;
+    /** Highlights drawn over the page. */
+    marks?: ViewerMark[];
+    onmarkclick?: (id: string) => void;
+    onpagepointerup?: (event: PointerEvent) => void;
+    /** Replaces the page with an error message. */
+    error?: string | null;
+    busy?: boolean;
+    class?: string;
+    /** Page navigation, zoom, download… */
+    toolbar?: Snippet;
+    /** The rendered page, e.g. a `<canvas>`. */
+    children?: Snippet;
+};
+declare const DocumentViewer: import("svelte").Component<$$ComponentProps, {}, "viewport" | "page">;
+type DocumentViewer = ReturnType<typeof DocumentViewer>;
+export default DocumentViewer;

package/dist/components/Drawer.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import NavIcon from './NavIcon.svelte';
+
+  let {
+    open = $bindable(false),
+    title,
+    side = 'right',
+    width = '28rem',
+    onclose,
+    class: className = '',
+    children,
+    footer,
+  }: {
+    open?: boolean;
+    title: string;
+    side?: 'left' | 'right';
+    /** Panel width on wide screens; phones always get the full width. */
+    width?: string;
+    onclose?: () => void;
+    class?: string;
+    children?: Snippet;
+    /** Sticky action row at the bottom. */
+    footer?: Snippet;
+  } = $props();
+
+  const titleId = $props.id();
+
+  function close() {
+    open = false;
+    onclose?.();
+  }
+
+  $effect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => event.key === 'Escape' && close();
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  });
+</script>
+
+{#if open}
+  <div class="terminoir-drawer-backdrop" role="presentation" onclick={(e) => e.target === e.currentTarget && close()}>
+    <div
+      class={cn('terminoir-drawer glass-modal', `terminoir-drawer--${side}`, className)}
+      style:--terminoir-drawer-width={width}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <header class="terminoir-drawer__head">
+        <h2 id={titleId} class="terminoir-drawer__title">{title}</h2>
+        <button type="button" class="terminoir-drawer__close terminoir-focusable" aria-label="Close" onclick={close}>
+          <NavIcon name="xmark" />
+        </button>
+      </header>
+      <div class="terminoir-drawer__body">{@render children?.()}</div>
+      {#if footer}<footer class="terminoir-drawer__footer">{@render footer()}</footer>{/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .terminoir-drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    background: rgba(0, 0, 0, 0.3);
+  }
+  .terminoir-drawer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: min(100%, var(--terminoir-drawer-width));
+    display: flex;
+    flex-direction: column;
+    border-radius: 0;
+  }
+  .terminoir-drawer--right { right: 0; }
+  .terminoir-drawer--left { left: 0; }
+  .terminoir-drawer__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    border-bottom: 1px solid var(--border);
+  }
+  .terminoir-drawer__title { margin: 0; font-size: 1rem; font-weight: 600; }
+  .terminoir-drawer__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+  }
+  .terminoir-drawer__close:hover { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+  .terminoir-drawer__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+  .terminoir-drawer__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-5);
+    border-top: 1px solid var(--border);
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title: string;
+    side?: 'left' | 'right';
+    /** Panel width on wide screens; phones always get the full width. */
+    width?: string;
+    onclose?: () => void;
+    class?: string;
+    children?: Snippet;
+    /** Sticky action row at the bottom. */
+    footer?: Snippet;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/DropdownMenu.svelte

@@ -1,32 +1,33 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils/cn.js';
-
-  export type MenuItem = {
-    id: string;
-    label: string;
-    disabled?: boolean;
-    onSelect?: () => void;
-  };
+  import type { MenuItem } from '../utils/menu.js';
+  import MenuItems from './MenuItems.svelte';
+  import NavIcon from './NavIcon.svelte';
 
   let {
     label = 'Menu',
+    icon,
+    iconOnly = false,
+    align = 'start',
     items = [],
     class: className = '',
     children,
   }: {
+    /** Trigger text, or its accessible name when `iconOnly`. */
     label?: string;
+    /** NavIcon name on the trigger, e.g. `ellipsis`. */
+    icon?: string;
+    iconOnly?: boolean;
+    /** Which trigger edge the menu lines up with. */
+    align?: 'start' | 'end';
     items?: MenuItem[];
     class?: string;
     children?: Snippet;
   } = $props();
 
   let open = $state(false);
-  let triggerEl: HTMLButtonElement | undefined = $state();
-
-  function toggle() {
-    open = !open;
-  }
+  let root: HTMLDivElement | undefined = $state();
 
   function select(item: MenuItem) {
     if (item.disabled) return;
@@ -34,76 +35,59 @@
     open = false;
   }
 
-  function onKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') open = false;
-  }
+  $effect(() => {
+    if (!open) return;
+    const onPointer = (event: PointerEvent) => {
+      if (root && !root.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>
 
-<div class={cn('terminoir-menu', className)} onkeydown={onKeydown}>
+<div bind:this={root} class={cn('terminoir-menu', className)}>
   <button
     type="button"
-    bind:this={triggerEl}
-    class="terminoir-btn terminoir-btn--outline terminoir-btn--sm terminoir-focusable"
+    class={cn(
+      'terminoir-btn terminoir-btn--ghost terminoir-btn--sm terminoir-focusable',
+      iconOnly && 'terminoir-menu__icon-trigger',
+    )}
     aria-haspopup="menu"
     aria-expanded={open}
-    onclick={toggle}
+    aria-label={iconOnly ? label : undefined}
+    title={iconOnly ? label : undefined}
+    onclick={() => (open = !open)}
   >
-    {label}
+    {#if icon}<NavIcon name={icon} />{/if}
+    {#if !iconOnly}{label}{/if}
   </button>
   {#if open}
-    <ul class="terminoir-menu__list glass-popover" role="menu">
-      {#each items as item (item.id)}
-        <li role="none">
-          <button
-            type="button"
-            role="menuitem"
-            class="terminoir-menu__item terminoir-focusable"
-            disabled={item.disabled}
-            onclick={() => select(item)}
-          >
-            {item.label}
-          </button>
-        </li>
-      {/each}
+    <ul class="terminoir-menu__list glass-popover" class:terminoir-menu__list--end={align === 'end'} role="menu">
+      <MenuItems {items} onselect={select} />
       {@render children?.()}
     </ul>
   {/if}
 </div>
 
 <style>
-  .terminoir-menu {
-    position: relative;
-    display: inline-block;
-  }
-
+  .terminoir-menu { position: relative; display: inline-block; }
+  .terminoir-menu__icon-trigger { padding-inline: 0.5rem; }
   .terminoir-menu__list {
     position: absolute;
-    top: calc(100% + var(--space-2));
+    top: calc(100% + var(--space-1));
     left: 0;
-    min-width: 10rem;
+    min-width: 11rem;
     margin: 0;
-    padding: var(--space-2);
+    padding: var(--space-1);
     list-style: none;
     z-index: 35;
   }
-
-  .terminoir-menu__item {
-    width: 100%;
-    text-align: left;
-    border: 0;
-    background: transparent;
-    border-radius: calc(var(--radius) - 4px);
-    padding: 0.45rem 0.55rem;
-    font: inherit;
-    cursor: pointer;
-  }
-
-  .terminoir-menu__item:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--accent) 70%, transparent);
-  }
-
-  .terminoir-menu__item:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+  .terminoir-menu__list--end { left: auto; right: 0; }
 </style>

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

@@ -1,12 +1,13 @@
 import type { Snippet } from 'svelte';
-export type MenuItem = {
-    id: string;
-    label: string;
-    disabled?: boolean;
-    onSelect?: () => void;
-};
+import type { MenuItem } from '../utils/menu.js';
 type $$ComponentProps = {
+    /** Trigger text, or its accessible name when `iconOnly`. */
     label?: string;
+    /** NavIcon name on the trigger, e.g. `ellipsis`. */
+    icon?: string;
+    iconOnly?: boolean;
+    /** Which trigger edge the menu lines up with. */
+    align?: 'start' | 'end';
     items?: MenuItem[];
     class?: string;
     children?: Snippet;

package/dist/components/FieldMessage.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  let { id, hint, error }: { id: string; hint?: string; error?: string } = $props();
+</script>
+
+{#if error}
+  <p {id} class="terminoir-field__hint terminoir-field__hint--error" role="alert">{error}</p>
+{:else if hint}
+  <p {id} class="terminoir-field__hint">{hint}</p>
+{/if}

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    id: string;
+    hint?: string;
+    error?: string;
+};
+declare const FieldMessage: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldMessage = ReturnType<typeof FieldMessage>;
+export default FieldMessage;

package/dist/components/FileButton.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    onselect,
+    accept,
+    multiple = false,
+    variant = 'secondary',
+    size = 'md',
+    disabled = false,
+    class: className = '',
+    children,
+  }: {
+    /** Called with the chosen files; the input resets so the same file can be picked again. */
+    onselect: (files: File[]) => void;
+    /** e.g. `application/pdf,image/*`. */
+    accept?: string;
+    multiple?: boolean;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+
+  let input: HTMLInputElement | undefined = $state();
+
+  function onchange() {
+    const files = [...(input?.files ?? [])];
+    if (input) input.value = '';
+    if (files.length) onselect(files);
+  }
+</script>
+
+<button
+  type="button"
+  class={cn('terminoir-btn terminoir-focusable glass-interactive', `terminoir-btn--${variant}`, `terminoir-btn--${size}`, className)}
+  {disabled}
+  onclick={() => input?.click()}
+>
+  {@render children?.()}
+</button>
+<input bind:this={input} class="terminoir-sr-only" type="file" tabindex="-1" aria-hidden="true" {accept} {multiple} {onchange} />

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Called with the chosen files; the input resets so the same file can be picked again. */
+    onselect: (files: File[]) => void;
+    /** e.g. `application/pdf,image/*`. */
+    accept?: string;
+    multiple?: boolean;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet;
+};
+declare const FileButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileButton = ReturnType<typeof FileButton>;
+export default FileButton;

package/dist/components/FormRow.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    label,
+    for: htmlFor,
+    hint,
+    class: className = '',
+    children,
+  }: {
+    label: string;
+    /** Id of the control, so clicking the label focuses it. */
+    for?: string;
+    hint?: string;
+    class?: string;
+    /** One control, rendered with its own label hidden (`hideLabel`). */
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('terminoir-form-row', className)}>
+  <label class="terminoir-form-row__label" for={htmlFor}>{label}</label>
+  <div class="terminoir-form-row__control">
+    {@render children?.()}
+    {#if hint}<p class="terminoir-form-row__hint">{hint}</p>{/if}
+  </div>
+</div>
+
+<style>
+  .terminoir-form-row {
+    display: grid;
+    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
+    align-items: center;
+    gap: var(--space-2) var(--space-4);
+    min-height: 2.5rem;
+  }
+  .terminoir-form-row__label {
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .terminoir-form-row__control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .terminoir-form-row__hint {
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+  @media (max-width: 700px) {
+    .terminoir-form-row {
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--space-1);
+    }
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    /** Id of the control, so clicking the label focuses it. */
+    for?: string;
+    hint?: string;
+    class?: string;
+    /** One control, rendered with its own label hidden (`hideLabel`). */
+    children?: Snippet;
+};
+declare const FormRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormRow = ReturnType<typeof FormRow>;
+export default FormRow;