terminoir 0.4.0 → 0.5.1

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>

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,48 @@
+/** 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 showing on `day` (multi-day all-day events on each 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;
+};
+export type PlacedEvent = {
+    event: CalendarEvent;
+    /** Percent of the day from the top. */
+    top: number;
+    height: number;
+    /** Side-by-side column within its overlap group, and how many columns the group has. */
+    lane: number;
+    lanes: number;
+    /** Short enough to render as one line. */
+    compact: boolean;
+};
+/** Lay out a day's timed events so overlapping ones sit side by side instead of on top of each other. */
+export declare function layoutDay(events: CalendarEvent[]): PlacedEvent[];