terminoir 0.4.0 → 0.5.1

package/dist/components/CalendarGrid.svelte

@@ -0,0 +1,260 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import {
+    addDays,
+    calendarRange,
+    eventsOn,
+    layoutDay,
+    monthGrid,
+    sameDay,
+    startOfWeek,
+    type CalendarEvent,
+    type CalendarMode,
+  } from '../utils/calendar.js';
+
+  const HOURS = Array.from({ length: 24 }, (_, h) => h);
+  const MONTH_CELL_LIMIT = 3;
+  const SCROLL_TO_HOUR = 7;
+
+  let {
+    mode = 'week',
+    anchor,
+    events,
+    onEventClick,
+    class: className = '',
+  }: {
+    mode?: CalendarMode;
+    /** Any date inside the week or month to show. */
+    anchor: Date;
+    events: CalendarEvent[];
+    onEventClick?: (event: CalendarEvent) => void;
+    class?: string;
+  } = $props();
+
+  const today = new Date();
+  const range = $derived(calendarRange(anchor, mode));
+  /** Seven days from the Monday that starts the visible week (or the first row of the month). */
+  const weekDays = $derived(Array.from({ length: 7 }, (_, i) => addDays(startOfWeek(range.start), i)));
+  const monthDays = $derived(monthGrid(range.start));
+
+  let scroller: HTMLDivElement | undefined = $state();
+
+  $effect(() => {
+    if (mode === 'week' && scroller) scroller.scrollTop = (scroller.scrollHeight / 24) * SCROLL_TO_HOUR;
+  });
+
+  function time(d: Date): string {
+    return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+  }
+
+  function hourLabel(h: number): string {
+    return new Date(2000, 0, 1, h).toLocaleTimeString(undefined, { hour: 'numeric' });
+  }
+</script>
+
+{#snippet chip(event: CalendarEvent, showTime: boolean, compact = false)}
+  <button
+    type="button"
+    class="terminoir-cal__event terminoir-focusable"
+    class:terminoir-cal__event--muted={event.muted}
+    class:terminoir-cal__event--compact={compact}
+    style:--event-color={event.color}
+    title={event.title}
+    disabled={!onEventClick}
+    onclick={() => onEventClick?.(event)}
+  >
+    {#if showTime && !event.allDay}<span class="terminoir-cal__time">{time(event.start)}</span>{/if}
+    <span class="terminoir-cal__title">{event.title}</span>
+  </button>
+{/snippet}
+
+{#if mode === 'week'}
+  <div class={cn('terminoir-cal terminoir-cal--week', className)}>
+    <div class="terminoir-cal__week-head">
+      <div></div>
+      {#each weekDays as day (day.getTime())}
+        <div class="terminoir-cal__day-head" class:terminoir-cal__day-head--today={sameDay(day, today)}>
+          <span>{day.toLocaleDateString(undefined, { weekday: 'short' })}</span>
+          <strong>{day.getDate()}</strong>
+        </div>
+      {/each}
+      <div class="terminoir-cal__gutter-label">all-day</div>
+      {#each weekDays as day (day.getTime())}
+        <div class="terminoir-cal__allday">
+          {#each eventsOn(events, day).filter((e) => e.allDay) as event (event.id)}{@render chip(event, false)}{/each}
+        </div>
+      {/each}
+    </div>
+    <div class="terminoir-cal__scroller" bind:this={scroller}>
+      <div class="terminoir-cal__week-body">
+        <div class="terminoir-cal__gutter">
+          {#each HOURS as h (h)}<div class="terminoir-cal__hour-label">{h === 0 ? '' : hourLabel(h)}</div>{/each}
+        </div>
+        {#each weekDays as day (day.getTime())}
+          <div class="terminoir-cal__day-col" class:terminoir-cal__day-col--today={sameDay(day, today)}>
+            {#each layoutDay(eventsOn(events, day).filter((e) => !e.allDay)) as placed (placed.event.id)}
+              <div
+                class="terminoir-cal__timed"
+                style:top={`${placed.top}%`}
+                style:height={`${placed.height}%`}
+                style:left={`calc(${(placed.lane / placed.lanes) * 100}% + 2px)`}
+                style:width={`calc(${100 / placed.lanes}% - 4px)`}
+              >
+                {@render chip(placed.event, true, placed.compact)}
+              </div>
+            {/each}
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class={cn('terminoir-cal terminoir-cal--month', className)}>
+    {#each weekDays as day (day.getTime())}
+      <div class="terminoir-cal__dow">{day.toLocaleDateString(undefined, { weekday: 'short' })}</div>
+    {/each}
+    {#each monthDays as day (day.getTime())}
+      {@const dayEvents = eventsOn(events, day)}
+      <div class="terminoir-cal__cell" class:terminoir-cal__cell--outside={day.getMonth() !== range.start.getMonth()}>
+        <span class="terminoir-cal__daynum" class:terminoir-cal__daynum--today={sameDay(day, today)}>{day.getDate()}</span>
+        {#each dayEvents.slice(0, MONTH_CELL_LIMIT) as event (event.id)}{@render chip(event, true)}{/each}
+        {#if dayEvents.length > MONTH_CELL_LIMIT}
+          <span class="terminoir-cal__more">+{dayEvents.length - MONTH_CELL_LIMIT} more</span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .terminoir-cal {
+    --cal-line: color-mix(in srgb, var(--border) 70%, transparent);
+    --cal-hour: 3rem;
+    font-size: 0.8125rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    min-width: 0;
+  }
+  /* Fixed viewport-relative height so the hours scroll inside the grid (it opens near 7am). */
+  .terminoir-cal--week { display: flex; flex-direction: column; height: min(72dvh, 52rem); min-height: 24rem; }
+  .terminoir-cal__week-head,
+  .terminoir-cal__week-body {
+    display: grid;
+    grid-template-columns: 3.5rem repeat(7, minmax(0, 1fr));
+  }
+  .terminoir-cal__week-head { border-bottom: 1px solid var(--border); }
+  .terminoir-cal__day-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: var(--space-1);
+    padding: var(--space-2) 0;
+    color: var(--muted-foreground);
+  }
+  .terminoir-cal__day-head strong { font-size: 1rem; color: var(--foreground); font-weight: 600; }
+  .terminoir-cal__day-head--today strong { color: var(--primary); }
+  .terminoir-cal__gutter-label {
+    font-size: 0.6875rem;
+    color: var(--muted-foreground);
+    text-align: right;
+    padding: var(--space-1) var(--space-2);
+  }
+  .terminoir-cal__allday {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 2px;
+    min-height: 1.75rem;
+    border-left: 1px solid var(--cal-line);
+  }
+  .terminoir-cal__scroller { flex: 1; overflow-y: auto; min-height: 0; }
+  .terminoir-cal__week-body { height: calc(var(--cal-hour) * 24); }
+  .terminoir-cal__gutter { display: grid; grid-template-rows: repeat(24, var(--cal-hour)); }
+  .terminoir-cal__hour-label {
+    font-size: 0.6875rem;
+    color: var(--muted-foreground);
+    text-align: right;
+    padding-right: var(--space-2);
+    transform: translateY(-0.5em);
+  }
+  .terminoir-cal__day-col {
+    position: relative;
+    border-left: 1px solid var(--cal-line);
+    background-image: linear-gradient(var(--cal-line) 1px, transparent 1px);
+    background-size: 100% var(--cal-hour);
+  }
+  .terminoir-cal__day-col--today { background-color: color-mix(in srgb, var(--primary) 4%, transparent); }
+  .terminoir-cal__timed { position: absolute; display: flex; }
+  .terminoir-cal__timed .terminoir-cal__event { align-items: flex-start; height: 100%; flex-direction: column; gap: 0; }
+  .terminoir-cal__timed .terminoir-cal__event--compact {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--space-1);
+    padding-block: 0;
+    font-size: 0.6875rem;
+    line-height: 1;
+  }
+  .terminoir-cal__event {
+    --event-color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    width: 100%;
+    min-width: 0;
+    padding: 0.15rem 0.35rem;
+    border: 0;
+    border-left: 3px solid var(--event-color);
+    border-radius: calc(var(--radius-control) - 0.3rem);
+    background: color-mix(in srgb, var(--event-color) 16%, var(--background));
+    color: var(--foreground);
+    font: inherit;
+    font-size: 0.75rem;
+    text-align: left;
+    overflow: hidden;
+    cursor: pointer;
+  }
+  .terminoir-cal__event:disabled { cursor: default; }
+  .terminoir-cal__event--muted { opacity: 0.6; background: transparent; }
+  .terminoir-cal__time { color: var(--muted-foreground); flex-shrink: 0; }
+  .terminoir-cal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+  .terminoir-cal--month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+  .terminoir-cal__dow {
+    padding: var(--space-2);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+    border-bottom: 1px solid var(--border);
+  }
+  .terminoir-cal__cell {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-height: 6rem;
+    padding: var(--space-1);
+    border-top: 1px solid var(--cal-line);
+    border-left: 1px solid var(--cal-line);
+    min-width: 0;
+  }
+  .terminoir-cal__cell:nth-child(7n + 1) { border-left: 0; }
+  .terminoir-cal__cell--outside { background: color-mix(in srgb, var(--foreground) 2%, transparent); }
+  .terminoir-cal__cell--outside .terminoir-cal__daynum { color: var(--muted-foreground); }
+  .terminoir-cal__daynum {
+    align-self: flex-end;
+    min-width: 1.5rem;
+    padding: 0 0.3rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    text-align: center;
+  }
+  .terminoir-cal__daynum--today { background: var(--primary); color: var(--primary-foreground); }
+  .terminoir-cal__more { font-size: 0.6875rem; color: var(--muted-foreground); padding-left: 0.35rem; }
+  @media (max-width: 700px) {
+    .terminoir-cal__day-head span { display: none; }
+    .terminoir-cal__cell { min-height: 4rem; }
+    .terminoir-cal__cell .terminoir-cal__event .terminoir-cal__time { display: none; }
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import { type CalendarEvent, type CalendarMode } from '../utils/calendar.js';
+type $$ComponentProps = {
+    mode?: CalendarMode;
+    /** Any date inside the week or month to show. */
+    anchor: Date;
+    events: CalendarEvent[];
+    onEventClick?: (event: CalendarEvent) => void;
+    class?: string;
+};
+declare const CalendarGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarGrid = ReturnType<typeof CalendarGrid>;
+export default CalendarGrid;

package/dist/components/CanvasStage.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    stage = $bindable(),
+    host = $bindable(),
+    label,
+    class: className = '',
+    overlay,
+    panel,
+    children,
+  }: {
+    /** The full-size stage element (observe it for size changes). */
+    stage?: HTMLDivElement;
+    /** Empty full-size element for a canvas library to mount into. */
+    host?: HTMLDivElement;
+    /** Accessible description of the canvas. */
+    label: string;
+    class?: string;
+    /** Small floating card, top right (filters, legend, counts). */
+    overlay?: Snippet;
+    /** Detail panel on the right; a bottom sheet on phones. */
+    panel?: Snippet;
+    /** Content drawn over the canvas instead of a library (e.g. an error). */
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div bind:this={stage} class={cn('terminoir-canvas-stage', className)}>
+  <div bind:this={host} class="terminoir-canvas-stage__host" role="img" aria-label={label}></div>
+  {@render children?.()}
+  {#if overlay}
+    <div class="terminoir-canvas-stage__overlay glass-popover">{@render overlay()}</div>
+  {/if}
+  {#if panel}
+    <aside class="terminoir-canvas-stage__panel glass-popover">{@render panel()}</aside>
+  {/if}
+</div>
+
+<style>
+  .terminoir-canvas-stage {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 20rem;
+    overflow: hidden;
+    background: var(--background);
+  }
+  .terminoir-canvas-stage__host { position: absolute; inset: 0; }
+  .terminoir-canvas-stage__host :global(canvas) { display: block; }
+  .terminoir-canvas-stage__overlay,
+  .terminoir-canvas-stage__panel {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+  }
+  .terminoir-canvas-stage__overlay {
+    top: var(--space-3);
+    right: var(--space-3);
+    width: min(17rem, calc(100% - 2 * var(--space-3)));
+  }
+  .terminoir-canvas-stage__panel {
+    top: var(--space-3);
+    right: var(--space-3);
+    bottom: var(--space-3);
+    width: min(22rem, calc(100% - 2 * var(--space-3)));
+    overflow-y: auto;
+  }
+  @media (max-width: 700px) {
+    .terminoir-canvas-stage__panel {
+      top: auto;
+      left: var(--space-3);
+      width: auto;
+      max-height: 55%;
+    }
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** The full-size stage element (observe it for size changes). */
+    stage?: HTMLDivElement;
+    /** Empty full-size element for a canvas library to mount into. */
+    host?: HTMLDivElement;
+    /** Accessible description of the canvas. */
+    label: string;
+    class?: string;
+    /** Small floating card, top right (filters, legend, counts). */
+    overlay?: Snippet;
+    /** Detail panel on the right; a bottom sheet on phones. */
+    panel?: Snippet;
+    /** Content drawn over the canvas instead of a library (e.g. an error). */
+    children?: Snippet;
+};
+declare const CanvasStage: import("svelte").Component<$$ComponentProps, {}, "stage" | "host">;
+type CanvasStage = ReturnType<typeof CanvasStage>;
+export default CanvasStage;

package/dist/components/Centered.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    width = '24rem',
+    class: className = '',
+    children,
+  }: {
+    /** Max width of the centred column. */
+    width?: string;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<!-- Full-viewport centred column: sign-in, loading and error screens. -->
+<div class={cn('terminoir-centered', className)}>
+  <div class="terminoir-centered__column" style:max-width={width}>{@render children?.()}</div>
+</div>
+
+<style>
+  .terminoir-centered {
+    min-height: 100dvh;
+    display: grid;
+    place-items: center;
+    padding: var(--space-6) var(--space-4);
+    box-sizing: border-box;
+  }
+  .terminoir-centered__column {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Max width of the centred column. */
+    width?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Centered: import("svelte").Component<$$ComponentProps, {}, "">;
+type Centered = ReturnType<typeof Centered>;
+export default Centered;

package/dist/components/Checkbox.svelte

@@ -3,30 +3,82 @@
 
   let {
     label,
+    hideLabel = false,
+    hint,
     checked = $bindable(false),
+    strikeWhenChecked = false,
     disabled = false,
     class: className = '',
     id,
     ...rest
   }: {
     label: string;
+    /** Keep the label for screen readers only. */
+    hideLabel?: boolean;
+    hint?: string;
     checked?: boolean;
+    /** Strike through the label when checked (task lists). */
+    strikeWhenChecked?: boolean;
     disabled?: boolean;
     class?: string;
     id?: string;
   } & Record<string, unknown> = $props();
 
-  const inputId = $derived(id ?? `terminoir-checkbox-${Math.random().toString(36).slice(2, 8)}`);
+  const fallbackId = $props.id();
+  const inputId = $derived(id ?? fallbackId);
 </script>
 
-<label class={cn('terminoir-field', className)} style="flex-direction: row; align-items: center;">
-  <input
-    id={inputId}
-    type="checkbox"
-    class="terminoir-focusable"
-    bind:checked
-    {disabled}
-    {...rest}
-  />
-  <span class="terminoir-field__label">{label}</span>
-</label>
+<div class={cn('terminoir-checkbox', className)}>
+  <label class="terminoir-checkbox__row" for={inputId}>
+    <input
+      id={inputId}
+      type="checkbox"
+      class="terminoir-checkbox__input terminoir-focusable"
+      bind:checked
+      {disabled}
+      {...rest}
+    />
+    <span
+      class={cn(
+        'terminoir-checkbox__label',
+        hideLabel && 'terminoir-sr-only',
+        strikeWhenChecked && checked && 'terminoir-checkbox__label--done',
+      )}
+    >
+      {label}
+    </span>
+  </label>
+  {#if hint}<p class="terminoir-field__hint terminoir-checkbox__hint">{hint}</p>{/if}
+</div>
+
+<style>
+  .terminoir-checkbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .terminoir-checkbox__row {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+    cursor: pointer;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+  .terminoir-checkbox__input {
+    margin: 0.15rem 0 0;
+    accent-color: var(--primary);
+    flex-shrink: 0;
+  }
+  .terminoir-checkbox__label {
+    color: var(--foreground);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .terminoir-checkbox__label--done {
+    color: var(--muted-foreground);
+    text-decoration: line-through;
+  }
+  .terminoir-checkbox__hint { padding-left: 1.5rem; }
+</style>

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

@@ -1,6 +1,11 @@
 type $$ComponentProps = {
     label: string;
+    /** Keep the label for screen readers only. */
+    hideLabel?: boolean;
+    hint?: string;
     checked?: boolean;
+    /** Strike through the label when checked (task lists). */
+    strikeWhenChecked?: boolean;
     disabled?: boolean;
     class?: string;
     id?: string;

package/dist/components/Chip.svelte

@@ -5,19 +5,34 @@
 
   let {
     tone = 'default',
+    color,
+    onremove,
+    removeLabel = 'Remove',
+    onclick,
     class: className = '',
     children,
     ...rest
   }: {
     tone?: ChipTone;
+    /** Dot colour before the text (palette name or CSS colour), e.g. a select option colour. */
+    color?: string;
+    /** Shows a × button; called when it is pressed. */
+    onremove?: () => void;
+    /** Accessible name of the × button, e.g. "Remove Rosa". */
+    removeLabel?: string;
+    /** Makes the chip text a button (e.g. open the linked item). */
+    onclick?: (event: MouseEvent) => void;
     class?: string;
     children?: import('svelte').Snippet;
   } & Record<string, unknown> = $props();
+
+  const PALETTE = new Set(['grey', 'gray', 'blue', 'green', 'red', 'yellow', 'orange', 'purple', 'pink', 'teal']);
+  const dot = $derived(color ? (PALETTE.has(color) ? `var(--chip-${color === 'gray' ? 'grey' : color})` : color) : undefined);
 </script>
 
 <span
   class={cn(
-    'terminoir-card__chip glass-chip',
+    'terminoir-card__chip terminoir-chip',
     tone === 'overdue' && 'terminoir-card__chip--overdue',
     tone === 'today' && 'terminoir-card__chip--today',
     tone === 'done' && 'terminoir-card__chip--done',
@@ -25,5 +40,78 @@
   )}
   {...rest}
 >
-  {@render children?.()}
+  {#if dot}<span class="terminoir-chip__dot" style:background={dot} aria-hidden="true"></span>{/if}
+  {#if onclick}
+    <button type="button" class="terminoir-chip__label terminoir-focusable" {onclick}>{@render children?.()}</button>
+  {:else}
+    <span class="terminoir-chip__label">{@render children?.()}</span>
+  {/if}
+  {#if onremove}
+    <button type="button" class="terminoir-chip__remove terminoir-focusable" aria-label={removeLabel} onclick={onremove}>×</button>
+  {/if}
 </span>
+
+<style>
+  .terminoir-chip {
+    --chip-grey: #8b8f98;
+    --chip-blue: #5b8def;
+    --chip-green: #3fae6a;
+    --chip-red: #e5534b;
+    --chip-yellow: #d4a72c;
+    --chip-orange: #e0823d;
+    --chip-purple: #9b6bdf;
+    --chip-pink: #d9669f;
+    --chip-teal: #2fa7a0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    max-width: 100%;
+    min-width: 0;
+    line-height: 1.35;
+  }
+  .terminoir-chip:not(.terminoir-card__chip--overdue):not(.terminoir-card__chip--today):not(.terminoir-card__chip--done) {
+    background: color-mix(in srgb, var(--foreground) 7%, transparent);
+    border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
+  }
+  .terminoir-chip__dot {
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: 999px;
+    flex-shrink: 0;
+  }
+  .terminoir-chip__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  button.terminoir-chip__label {
+    border: 0;
+    padding: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  button.terminoir-chip__label:hover { text-decoration: underline; }
+  .terminoir-chip__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    margin-right: -0.2rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--muted-foreground);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .terminoir-chip__remove:hover {
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--foreground) 12%, transparent);
+  }
+</style>

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

@@ -1,6 +1,14 @@
 type ChipTone = 'default' | 'overdue' | 'today' | 'done';
 type $$ComponentProps = {
     tone?: ChipTone;
+    /** Dot colour before the text (palette name or CSS colour), e.g. a select option colour. */
+    color?: string;
+    /** Shows a × button; called when it is pressed. */
+    onremove?: () => void;
+    /** Accessible name of the × button, e.g. "Remove Rosa". */
+    removeLabel?: string;
+    /** Makes the chip text a button (e.g. open the linked item). */
+    onclick?: (event: MouseEvent) => void;
     class?: string;
     children?: import('svelte').Snippet;
 } & Record<string, unknown>;