terminoir 0.4.0 → 0.5.0

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

@@ -0,0 +1,26 @@
+export default Spacer;
+type Spacer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Spacer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Stack.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+
+  let {
+    gap = 4,
+    align = 'stretch',
+    class: className = '',
+    children,
+    ...rest
+  }: {
+    /** Spacing between children, as a `--space-*` step. */
+    gap?: Gap;
+    align?: 'stretch' | 'start' | 'center' | 'end';
+    class?: string;
+    children?: Snippet;
+  } & Record<string, unknown> = $props();
+</script>
+
+<div
+  class={cn('terminoir-stack', className)}
+  style:gap={`var(--space-${gap})`}
+  style:align-items={align === 'stretch' ? 'stretch' : align === 'center' ? 'center' : `flex-${align}`}
+  {...rest}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .terminoir-stack {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+type $$ComponentProps = {
+    /** Spacing between children, as a `--space-*` step. */
+    gap?: Gap;
+    align?: 'stretch' | 'start' | 'center' | 'end';
+    class?: string;
+    children?: Snippet;
+} & Record<string, unknown>;
+declare const Stack: import("svelte").Component<$$ComponentProps, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

package/dist/components/Switch.svelte

@@ -3,6 +3,7 @@
 
   let {
     label,
+    hideLabel = false,
     checked = $bindable(false),
     disabled = false,
     class: className = '',
@@ -10,17 +11,20 @@
     ...rest
   }: {
     label: string;
+    /** Keep the label for screen readers only (e.g. a switch inside a list row). */
+    hideLabel?: boolean;
     checked?: boolean;
     disabled?: boolean;
     class?: string;
     id?: string;
   } & Record<string, unknown> = $props();
 
-  const inputId = $derived(id ?? `terminoir-switch-${Math.random().toString(36).slice(2, 8)}`);
+  const fallbackId = $props.id();
+  const inputId = $derived(id ?? fallbackId);
 </script>
 
 <label class={cn('terminoir-switch', className)}>
-  <span class="terminoir-field__label">{label}</span>
+  <span class={cn('terminoir-field__label', hideLabel && 'terminoir-sr-only')}>{label}</span>
   <input
     id={inputId}
     type="checkbox"

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

@@ -1,5 +1,7 @@
 type $$ComponentProps = {
     label: string;
+    /** Keep the label for screen readers only (e.g. a switch inside a list row). */
+    hideLabel?: boolean;
     checked?: boolean;
     disabled?: boolean;
     class?: string;

package/dist/components/Tabs.svelte

@@ -14,6 +14,8 @@
     children?: Snippet;
   } = $props();
 
+  const uid = $props.id();
+
   $effect.pre(() => {
     if (!value && tabs[0]) value = tabs[0].id;
   });
@@ -25,9 +27,9 @@
       <button
         type="button"
         role="tab"
-        id={`tab-${tab.id}`}
+        id={`${uid}-tab-${tab.id}`}
         aria-selected={value === tab.id}
-        aria-controls={`panel-${tab.id}`}
+        aria-controls={`${uid}-panel-${tab.id}`}
         class="terminoir-tabs__trigger terminoir-focusable"
         onclick={() => (value = tab.id)}
       >
@@ -38,8 +40,8 @@
   {#each tabs as tab (tab.id)}
     <div
       role="tabpanel"
-      id={`panel-${tab.id}`}
-      aria-labelledby={`tab-${tab.id}`}
+      id={`${uid}-panel-${tab.id}`}
+      aria-labelledby={`${uid}-tab-${tab.id}`}
       hidden={value !== tab.id}
       class="terminoir-tabs__panel"
     >

package/dist/components/Text.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    as = 'p',
+    tone = 'default',
+    size = 'md',
+    weight = 'normal',
+    truncate = false,
+    mono = false,
+    class: className = '',
+    children,
+    ...rest
+  }: {
+    as?: 'p' | 'span' | 'div' | 'small';
+    tone?: 'default' | 'muted' | 'danger' | 'success' | 'warning';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    weight?: 'normal' | 'medium' | 'semibold';
+    /** Single line with an ellipsis. */
+    truncate?: boolean;
+    mono?: boolean;
+    class?: string;
+    children?: Snippet;
+  } & Record<string, unknown> = $props();
+</script>
+
+<svelte:element
+  this={as}
+  class={cn(
+    'terminoir-text',
+    `terminoir-text--${tone}`,
+    `terminoir-text--${size}`,
+    `terminoir-text--${weight}`,
+    truncate && 'terminoir-text--truncate',
+    mono && 'terminoir-text--mono',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .terminoir-text {
+    margin: 0;
+    min-width: 0;
+    line-height: 1.5;
+  }
+  .terminoir-text--default { color: var(--foreground); }
+  .terminoir-text--muted { color: var(--muted-foreground); }
+  .terminoir-text--danger { color: var(--destructive); }
+  .terminoir-text--success { color: var(--status-done); }
+  .terminoir-text--warning { color: var(--status-today); }
+  .terminoir-text--xs { font-size: 0.75rem; }
+  .terminoir-text--sm { font-size: 0.8125rem; }
+  .terminoir-text--md { font-size: 0.875rem; }
+  .terminoir-text--lg { font-size: 1rem; }
+  .terminoir-text--normal { font-weight: 400; }
+  .terminoir-text--medium { font-weight: 500; }
+  .terminoir-text--semibold { font-weight: 600; }
+  .terminoir-text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .terminoir-text--mono { font-family: var(--font-mono); }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    as?: 'p' | 'span' | 'div' | 'small';
+    tone?: 'default' | 'muted' | 'danger' | 'success' | 'warning';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    weight?: 'normal' | 'medium' | 'semibold';
+    /** Single line with an ellipsis. */
+    truncate?: boolean;
+    mono?: boolean;
+    class?: string;
+    children?: Snippet;
+} & Record<string, unknown>;
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/Textarea.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
   import { cn } from '../utils/cn.js';
+  import FieldMessage from './FieldMessage.svelte';
 
   let {
     label,
+    hideLabel = false,
+    quiet = false,
+    hint,
+    error,
     id,
     value = $bindable(''),
     rows = 4,
@@ -12,6 +17,12 @@
     ...rest
   }: {
     label: string;
+    /** Keep the label for screen readers only. */
+    hideLabel?: boolean;
+    /** Borderless until hovered or focused, for inline editing (property rows). */
+    quiet?: boolean;
+    hint?: string;
+    error?: string;
     id?: string;
     value?: string;
     rows?: number;
@@ -20,11 +31,13 @@
     class?: string;
   } & Record<string, unknown> = $props();
 
-  const inputId = $derived(id ?? `terminoir-textarea-${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)}>
+  <label class={cn('terminoir-field__label', hideLabel && 'terminoir-sr-only')} for={inputId}>{label}</label>
   <textarea
     id={inputId}
     class="terminoir-textarea terminoir-focusable"
@@ -32,6 +45,9 @@
     {rows}
     {placeholder}
     {disabled}
+    aria-invalid={error ? true : undefined}
+    aria-describedby={error || hint ? messageId : undefined}
     {...rest}
   ></textarea>
+  <FieldMessage id={messageId} {hint} {error} />
 </div>

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

@@ -1,5 +1,11 @@
 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;
+    hint?: string;
+    error?: string;
     id?: string;
     value?: string;
     rows?: number;

package/dist/components/TitleInput.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+
+  let {
+    label,
+    value = $bindable(''),
+    placeholder = 'Untitled',
+    class: className = '',
+    ...rest
+  }: {
+    /** Accessible name; not shown (the title itself is the heading). */
+    label: string;
+    value?: string;
+    placeholder?: string;
+    class?: string;
+  } & Record<string, unknown> = $props();
+
+  /** Titles are one line: Enter commits instead of inserting a newline. */
+  function onkeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      (event.currentTarget as HTMLTextAreaElement).blur();
+    }
+  }
+</script>
+
+<textarea
+  class={cn('terminoir-title-input terminoir-focusable', className)}
+  aria-label={label}
+  rows="1"
+  bind:value
+  {placeholder}
+  {onkeydown}
+  {...rest}
+></textarea>
+
+<style>
+  .terminoir-title-input {
+    width: 100%;
+    margin: 0;
+    padding: 0.1rem 0.25rem;
+    margin-inline: -0.25rem;
+    border: 1px solid transparent;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: var(--foreground);
+    font: inherit;
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+    resize: none;
+    field-sizing: content;
+    overflow: hidden;
+  }
+  .terminoir-title-input:hover { border-color: color-mix(in srgb, var(--foreground) 10%, transparent); }
+  .terminoir-title-input:focus-visible { outline: none; border-color: var(--ring); }
+  .terminoir-title-input::placeholder { color: var(--muted-foreground); }
+  @media (max-width: 700px) {
+    .terminoir-title-input { font-size: 1.375rem; }
+  }
+</style>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Accessible name; not shown (the title itself is the heading). */
+    label: string;
+    value?: string;
+    placeholder?: string;
+    class?: string;
+} & Record<string, unknown>;
+declare const TitleInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TitleInput = ReturnType<typeof TitleInput>;
+export default TitleInput;

package/dist/index.d.ts

@@ -17,10 +17,10 @@ export { default as CardGrid } from './components/CardGrid.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as Chip } from './components/Chip.svelte';
 export { default as CommandPalette } from './components/CommandPalette.svelte';
-export type { CommandItem } from './components/CommandPalette.svelte';
+export type { CommandItem } from './utils/commands.js';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
-export type { MenuItem } from './components/DropdownMenu.svelte';
+export type { MenuItem } from './utils/menu.js';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as FontPicker } from './components/FontPicker.svelte';
 export { default as NavIcon } from './components/NavIcon.svelte';
@@ -38,3 +38,36 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as Toaster } from './components/Toaster.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Page } from './components/Page.svelte';
+export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as Section } from './components/Section.svelte';
+export { default as Stack } from './components/Stack.svelte';
+export { default as Inline } from './components/Inline.svelte';
+export { default as Text } from './components/Text.svelte';
+export { default as Disclosure } from './components/Disclosure.svelte';
+export { default as NavSection } from './components/NavSection.svelte';
+export { default as Spacer } from './components/Spacer.svelte';
+export { default as Centered } from './components/Centered.svelte';
+export { default as Prose } from './components/Prose.svelte';
+export { default as CanvasStage } from './components/CanvasStage.svelte';
+export { default as CalendarGrid } from './components/CalendarGrid.svelte';
+export { default as DocumentViewer } from './components/DocumentViewer.svelte';
+export type { ViewerMark } from './utils/componentTypes.js';
+export { default as DataTable } from './components/DataTable.svelte';
+export type { DataColumn } from './utils/componentTypes.js';
+export { default as List } from './components/List.svelte';
+export { default as ListItem } from './components/ListItem.svelte';
+export { default as DescriptionList } from './components/DescriptionList.svelte';
+export type { DescriptionItem } from './utils/componentTypes.js';
+export { default as FormRow } from './components/FormRow.svelte';
+export { default as SearchPicker } from './components/SearchPicker.svelte';
+export { default as FileButton } from './components/FileButton.svelte';
+export { default as TitleInput } from './components/TitleInput.svelte';
+export type { PickerOption } from './utils/componentTypes.js';
+export { default as RadioCards } from './components/RadioCards.svelte';
+export type { RadioCardOption } from './utils/componentTypes.js';
+export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export type { SegmentOption } from './utils/componentTypes.js';
+export { default as ContextMenu } from './components/ContextMenu.svelte';
+export { default as Drawer } from './components/Drawer.svelte';
+export { addDays, calendarRange, eventsOn, sameDay, shiftCalendar, startOfDay, startOfWeek, type CalendarEvent, type CalendarMode, } from './utils/calendar.js';

package/dist/index.js

@@ -36,3 +36,34 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as Textarea } from './components/Textarea.svelte';
 export { default as Toaster } from './components/Toaster.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
+// Layout
+export { default as Page } from './components/Page.svelte';
+export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as Section } from './components/Section.svelte';
+export { default as Stack } from './components/Stack.svelte';
+export { default as Inline } from './components/Inline.svelte';
+export { default as Text } from './components/Text.svelte';
+export { default as Disclosure } from './components/Disclosure.svelte';
+export { default as NavSection } from './components/NavSection.svelte';
+export { default as Spacer } from './components/Spacer.svelte';
+export { default as Centered } from './components/Centered.svelte';
+export { default as Prose } from './components/Prose.svelte';
+export { default as CanvasStage } from './components/CanvasStage.svelte';
+export { default as CalendarGrid } from './components/CalendarGrid.svelte';
+export { default as DocumentViewer } from './components/DocumentViewer.svelte';
+// Data display
+export { default as DataTable } from './components/DataTable.svelte';
+export { default as List } from './components/List.svelte';
+export { default as ListItem } from './components/ListItem.svelte';
+export { default as DescriptionList } from './components/DescriptionList.svelte';
+export { default as FormRow } from './components/FormRow.svelte';
+// Inputs
+export { default as SearchPicker } from './components/SearchPicker.svelte';
+export { default as FileButton } from './components/FileButton.svelte';
+export { default as TitleInput } from './components/TitleInput.svelte';
+export { default as RadioCards } from './components/RadioCards.svelte';
+export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+// Overlays
+export { default as ContextMenu } from './components/ContextMenu.svelte';
+export { default as Drawer } from './components/Drawer.svelte';
+export { addDays, calendarRange, eventsOn, sameDay, shiftCalendar, startOfDay, startOfWeek, } from './utils/calendar.js';

package/dist/utils/calendar.d.ts

@@ -0,0 +1,35 @@
+/** Wall-clock calendar helpers (local time zone) for week and month views. */
+export type CalendarMode = 'week' | 'month';
+export type CalendarEvent = {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    allDay: boolean;
+    /** Dimmed (e.g. "free" / transparent events). */
+    muted?: boolean;
+    /** Accent colour (palette name or CSS colour). */
+    color?: string;
+};
+export declare const MINUTES_PER_DAY: number;
+export declare function startOfDay(d: Date): Date;
+/** Monday of the week containing `d`. */
+export declare function startOfWeek(d: Date): Date;
+export declare function addDays(d: Date, n: number): Date;
+export declare function sameDay(a: Date, b: Date): boolean;
+/** Visible range `[start, end)` around `anchor`: a Monday-start week or a calendar month. */
+export declare function calendarRange(anchor: Date, mode: CalendarMode): {
+    start: Date;
+    end: Date;
+};
+/** Move the anchor by `delta` weeks or months. */
+export declare function shiftCalendar(anchor: Date, mode: CalendarMode, delta: number): Date;
+/** Six Monday-start weeks covering the month of `monthStart`. */
+export declare function monthGrid(monthStart: Date): Date[];
+/** Events starting on `day`, all-day first, then by start time. */
+export declare function eventsOn(events: CalendarEvent[], day: Date): CalendarEvent[];
+/** Vertical position of a timed event in a day column, as percentages of the day. */
+export declare function dayLayout(event: CalendarEvent): {
+    top: number;
+    height: number;
+};

package/dist/utils/calendar.js

@@ -0,0 +1,61 @@
+/** Wall-clock calendar helpers (local time zone) for week and month views. */
+export const MINUTES_PER_DAY = 24 * 60;
+const MIN_EVENT_MINUTES = 15;
+const MONTH_GRID_DAYS = 42;
+export function startOfDay(d) {
+    const x = new Date(d);
+    x.setHours(0, 0, 0, 0);
+    return x;
+}
+/** Monday of the week containing `d`. */
+export function startOfWeek(d) {
+    const x = startOfDay(d);
+    const day = x.getDay();
+    x.setDate(x.getDate() + (day === 0 ? -6 : 1 - day));
+    return x;
+}
+export function addDays(d, n) {
+    const x = new Date(d);
+    x.setDate(x.getDate() + n);
+    return x;
+}
+export function sameDay(a, b) {
+    return startOfDay(a).getTime() === startOfDay(b).getTime();
+}
+/** Visible range `[start, end)` around `anchor`: a Monday-start week or a calendar month. */
+export function calendarRange(anchor, mode) {
+    if (mode === 'week') {
+        const start = startOfWeek(anchor);
+        return { start, end: addDays(start, 7) };
+    }
+    return {
+        start: new Date(anchor.getFullYear(), anchor.getMonth(), 1),
+        end: new Date(anchor.getFullYear(), anchor.getMonth() + 1, 1),
+    };
+}
+/** Move the anchor by `delta` weeks or months. */
+export function shiftCalendar(anchor, mode, delta) {
+    if (mode === 'week')
+        return addDays(anchor, 7 * delta);
+    const x = new Date(anchor);
+    x.setMonth(x.getMonth() + delta);
+    return x;
+}
+/** Six Monday-start weeks covering the month of `monthStart`. */
+export function monthGrid(monthStart) {
+    const first = startOfWeek(monthStart);
+    return Array.from({ length: MONTH_GRID_DAYS }, (_, i) => addDays(first, i));
+}
+/** Events starting on `day`, all-day first, then by start time. */
+export function eventsOn(events, day) {
+    return events
+        .filter((e) => sameDay(e.start, day))
+        .sort((a, b) => Number(b.allDay) - Number(a.allDay) || a.start.getTime() - b.start.getTime());
+}
+/** Vertical position of a timed event in a day column, as percentages of the day. */
+export function dayLayout(event) {
+    const minutes = (event.start.getTime() - startOfDay(event.start).getTime()) / 60000;
+    const duration = Math.max(MIN_EVENT_MINUTES, (event.end.getTime() - event.start.getTime()) / 60000);
+    const top = (minutes / MINUTES_PER_DAY) * 100;
+    return { top, height: Math.min((duration / MINUTES_PER_DAY) * 100, 100 - top) };
+}

package/dist/utils/commands.d.ts

@@ -0,0 +1,22 @@
+export type CommandItem = {
+    id: string;
+    label: string;
+    /** Secondary text on the right, e.g. a type name or shortcut. */
+    hint?: string;
+    /** Extra words that match the query but are not shown. */
+    keywords?: string;
+    /** Rows with the same group are listed together under that heading. */
+    group?: string;
+    /** NavIcon name shown before the label. */
+    icon?: string;
+    iconColor?: string;
+    onSelect?: () => void;
+};
+export type CommandGroup = {
+    group: string | undefined;
+    items: CommandItem[];
+};
+/** Case-insensitive substring match on label + keywords; an empty query keeps everything. */
+export declare function filterCommands(items: CommandItem[], query: string): CommandItem[];
+/** Group rows by `group`, keeping first-seen group order and row order within groups. */
+export declare function groupCommands(items: CommandItem[]): CommandGroup[];

package/dist/utils/commands.js

@@ -0,0 +1,17 @@
+/** Case-insensitive substring match on label + keywords; an empty query keeps everything. */
+export function filterCommands(items, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return items;
+    return items.filter((item) => `${item.label} ${item.keywords ?? ''}`.toLowerCase().includes(needle));
+}
+/** Group rows by `group`, keeping first-seen group order and row order within groups. */
+export function groupCommands(items) {
+    const groups = new Map();
+    for (const item of items) {
+        const rows = groups.get(item.group) ?? [];
+        rows.push(item);
+        groups.set(item.group, rows);
+    }
+    return [...groups].map(([group, rows]) => ({ group, items: rows }));
+}

package/dist/utils/componentTypes.d.ts

@@ -0,0 +1,41 @@
+export type DataColumn = {
+    key: string;
+    label: string;
+    /** CSS width, e.g. `8rem` or `30%`. */
+    width?: string;
+    align?: 'start' | 'end';
+    /** Hide below 700px so phone tables keep their key columns. */
+    hideOnMobile?: boolean;
+};
+export type PickerOption = {
+    id: string;
+    label: string;
+    description?: string;
+    /** NavIcon name. */
+    icon?: string;
+    iconColor?: string;
+};
+export type RadioCardOption = {
+    value: string;
+    label: string;
+    description?: string;
+};
+export type SegmentOption = {
+    value: string;
+    label: string;
+};
+export type DescriptionItem = {
+    term: string;
+    detail: string | number;
+    tone?: 'default' | 'danger' | 'success';
+};
+export type ViewerMark = {
+    id: string;
+    /** Position and size as fractions (0–1) of the page. */
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    color?: string;
+    label?: string;
+};

package/dist/utils/componentTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/listNav.d.ts

@@ -0,0 +1,2 @@
+/** Move a highlighted row by `delta`, wrapping around a list of `length` rows (-1 when empty). */
+export declare function moveIndex(current: number, delta: number, length: number): number;

package/dist/utils/listNav.js

@@ -0,0 +1,8 @@
+/** Move a highlighted row by `delta`, wrapping around a list of `length` rows (-1 when empty). */
+export function moveIndex(current, delta, length) {
+    if (length <= 0)
+        return -1;
+    if (current < 0)
+        return delta > 0 ? 0 : length - 1;
+    return (((current + delta) % length) + length) % length;
+}