terminoir 0.5.0 → 0.6.0

package/README.md

@@ -157,6 +157,9 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `CalendarGrid` | Week (scrolling hours) and month grids; `CalendarEvent` with `muted`/`color`; helpers `calendarRange`, `shiftCalendar`, `eventsOn` |
 | `CanvasStage`, `DocumentViewer` | Full-bleed canvas host with floating overlay and side panel; paged viewer with toolbar and highlight marks |
 | `AccentSwatches` | `bind:value` accent hex from `ACCENT_PALETTE` |
+| `GroupedList`, `SegmentBar` | Items in labelled groups with a colour dot and count, "Show n more" past `limit`, `collapsed` groups behind a toggle (e.g. finished items); a thin bar of proportional coloured segments |
+
+`labelColor(name)` resolves palette names (`green`, `gray`…, see `LABEL_PALETTE`) or passes CSS colours through; `Chip`, `GroupedList` and `SegmentBar` share it.
 
 ### Utilities (typed, tree-shakeable)
 

package/dist/components/CalendarGrid.svelte

@@ -3,8 +3,8 @@
   import {
     addDays,
     calendarRange,
-    dayLayout,
     eventsOn,
+    layoutDay,
     monthGrid,
     sameDay,
     startOfWeek,
@@ -52,11 +52,12 @@
   }
 </script>
 
-{#snippet chip(event: CalendarEvent, showTime: boolean)}
+{#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}
@@ -91,10 +92,15 @@
         </div>
         {#each weekDays as day (day.getTime())}
           <div class="terminoir-cal__day-col" class:terminoir-cal__day-col--today={sameDay(day, today)}>
-            {#each eventsOn(events, day).filter((e) => !e.allDay) as event (event.id)}
-              {@const layout = dayLayout(event)}
-              <div class="terminoir-cal__timed" style:top={`${layout.top}%`} style:height={`${layout.height}%`}>
-                {@render chip(event, true)}
+            {#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>
@@ -179,8 +185,17 @@
     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; left: 2px; right: 2px; display: flex; }
+  .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;

package/dist/components/Chip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
 
   type ChipTone = 'default' | 'overdue' | 'today' | 'done';
 
@@ -26,8 +27,7 @@
     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);
+  const dot = $derived(labelColor(color));
 </script>
 
 <span
@@ -53,15 +53,6 @@
 
 <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;

package/dist/components/Dialog.svelte

@@ -28,19 +28,27 @@
     }
   }
 
-  function onKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      open = false;
-      onclose?.();
-    }
-  }
+  let dialogEl: HTMLDivElement | undefined = $state();
 
+  /** Escape closes from anywhere, not only when focus is already inside the dialog. */
   $effect(() => {
     if (!open || typeof document === 'undefined') return;
     const prev = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        open = false;
+        onclose?.();
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    queueMicrotask(() => {
+      const first = dialogEl?.querySelector<HTMLElement>('input, select, textarea, button, [tabindex]:not([tabindex="-1"])');
+      (first ?? dialogEl)?.focus();
+    });
     return () => {
       document.body.style.overflow = prev;
+      document.removeEventListener('keydown', onKey);
     };
   });
 </script>
@@ -50,9 +58,9 @@
     class="terminoir-dialog-backdrop"
     role="presentation"
     onclick={onBackdropClick}
-    onkeydown={onKeydown}
   >
     <div
+      bind:this={dialogEl}
       class={cn('terminoir-dialog glass-modal terminoir-focusable', className)}
       role="dialog"
       aria-modal="true"

package/dist/components/GroupedList.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
+  import Disclosure from './Disclosure.svelte';
+  import List from './List.svelte';
+  import ListItem from './ListItem.svelte';
+
+  export type GroupedListItem = {
+    id: string;
+    title: string;
+    /** Short text on the right, e.g. a date. */
+    meta?: string;
+    metaTone?: 'muted' | 'danger' | 'warning';
+  };
+
+  export type GroupedListGroup = {
+    key: string;
+    label: string;
+    /** Palette name or CSS colour for the heading dot. */
+    color?: string | null;
+    /** Folded behind a "Label (n)" toggle, e.g. finished items. */
+    collapsed?: boolean;
+    items: GroupedListItem[];
+  };
+
+  let {
+    groups,
+    label,
+    limit = 6,
+    onselect,
+    class: className = '',
+  }: {
+    /** Shown in order; empty groups are skipped. One group with an empty label renders as a plain list. */
+    groups: GroupedListGroup[];
+    /** Accessible name for the lists. */
+    label: string;
+    /** Rows per open group before a "Show n more" button. */
+    limit?: number;
+    onselect?: (id: string) => void;
+    class?: string;
+  } = $props();
+
+  let expanded = $state<Record<string, boolean>>({});
+
+  const visible = $derived(groups.filter((g) => g.items.length > 0));
+  const open = $derived(visible.filter((g) => !g.collapsed));
+  const folded = $derived(visible.filter((g) => g.collapsed));
+
+  function rows(group: GroupedListGroup): GroupedListItem[] {
+    return expanded[group.key] || group.items.length <= limit + 1 ? group.items : group.items.slice(0, limit);
+  }
+</script>
+
+{#snippet items(group: GroupedListGroup, all: boolean)}
+  <List label={group.label ? `${label}: ${group.label}` : label} bordered={false}>
+    {#each all ? group.items : rows(group) as item (item.id)}
+      <ListItem title={item.title} onclick={onselect ? () => onselect(item.id) : undefined}>
+        {#snippet trailing()}
+          {#if item.meta}
+            <span class={cn('terminoir-grouped-list__meta', item.metaTone && `terminoir-grouped-list__meta--${item.metaTone}`)}>{item.meta}</span>
+          {/if}
+        {/snippet}
+      </ListItem>
+    {/each}
+  </List>
+  {#if !all && rows(group).length < group.items.length}
+    <button type="button" class="terminoir-grouped-list__more terminoir-focusable" onclick={() => (expanded[group.key] = true)}>
+      Show {group.items.length - rows(group).length} more
+    </button>
+  {/if}
+{/snippet}
+
+<div class={cn('terminoir-grouped-list', className)}>
+  {#each open as group (group.key)}
+    <div class="terminoir-grouped-list__group">
+      {#if group.label}
+        <div class="terminoir-grouped-list__heading">
+          {#if labelColor(group.color)}<span class="terminoir-grouped-list__dot" style:background={labelColor(group.color)} aria-hidden="true"></span>{/if}
+          <span>{group.label}</span>
+          <span class="terminoir-grouped-list__count">{group.items.length}</span>
+        </div>
+      {/if}
+      {@render items(group, false)}
+    </div>
+  {/each}
+  {#each folded as group (group.key)}
+    <Disclosure summary={`${group.label} (${group.items.length})`}>
+      {@render items(group, true)}
+    </Disclosure>
+  {/each}
+</div>
+
+<style>
+  .terminoir-grouped-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    min-width: 0;
+  }
+  .terminoir-grouped-list__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .terminoir-grouped-list__heading {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--muted-foreground);
+  }
+  .terminoir-grouped-list__dot {
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: 999px;
+    flex-shrink: 0;
+  }
+  .terminoir-grouped-list__count {
+    font-variant-numeric: tabular-nums;
+    opacity: 0.75;
+  }
+  .terminoir-grouped-list__group :global(.terminoir-list-item__row) {
+    min-height: 2.25rem;
+    padding: 0.3rem 0.5rem;
+    border-radius: var(--radius-control);
+  }
+  .terminoir-grouped-list__meta {
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--muted-foreground);
+    white-space: nowrap;
+  }
+  .terminoir-grouped-list__meta--danger { color: var(--destructive); }
+  .terminoir-grouped-list__meta--warning { color: var(--status-today); }
+  .terminoir-grouped-list__more {
+    align-self: flex-start;
+    border: 0;
+    background: transparent;
+    color: var(--muted-foreground);
+    font: inherit;
+    font-size: 0.8125rem;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    border-radius: var(--radius-control);
+  }
+  .terminoir-grouped-list__more:hover { color: var(--foreground); }
+</style>

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

@@ -0,0 +1,29 @@
+export type GroupedListItem = {
+    id: string;
+    title: string;
+    /** Short text on the right, e.g. a date. */
+    meta?: string;
+    metaTone?: 'muted' | 'danger' | 'warning';
+};
+export type GroupedListGroup = {
+    key: string;
+    label: string;
+    /** Palette name or CSS colour for the heading dot. */
+    color?: string | null;
+    /** Folded behind a "Label (n)" toggle, e.g. finished items. */
+    collapsed?: boolean;
+    items: GroupedListItem[];
+};
+type $$ComponentProps = {
+    /** Shown in order; empty groups are skipped. One group with an empty label renders as a plain list. */
+    groups: GroupedListGroup[];
+    /** Accessible name for the lists. */
+    label: string;
+    /** Rows per open group before a "Show n more" button. */
+    limit?: number;
+    onselect?: (id: string) => void;
+    class?: string;
+};
+declare const GroupedList: import("svelte").Component<$$ComponentProps, {}, "">;
+type GroupedList = ReturnType<typeof GroupedList>;
+export default GroupedList;

package/dist/components/SegmentBar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
+
+  export type Segment = { label: string; count: number; color?: string | null };
+
+  let {
+    segments,
+    label,
+    class: className = '',
+  }: {
+    /** In order; zero counts are skipped. Colours are palette names or CSS colours. */
+    segments: Segment[];
+    /** Accessible name, e.g. "Status of 30 linked tasks". */
+    label: string;
+    class?: string;
+  } = $props();
+
+  const total = $derived(segments.reduce((sum, s) => sum + Math.max(0, s.count), 0));
+  const shown = $derived(segments.filter((s) => s.count > 0));
+  const summary = $derived(shown.map((s) => `${s.label} ${s.count}`).join(', '));
+</script>
+
+{#if total > 0}
+  <div class={cn('terminoir-segment-bar', className)} role="img" aria-label={`${label}: ${summary}`}>
+    {#each shown as segment (segment.label)}
+      <span
+        class="terminoir-segment-bar__part"
+        style:flex-grow={segment.count}
+        style:background={labelColor(segment.color) ?? 'color-mix(in srgb, var(--foreground) 22%, transparent)'}
+        title={`${segment.label}: ${segment.count}`}
+      ></span>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .terminoir-segment-bar {
+    display: flex;
+    gap: 2px;
+    width: 100%;
+    height: 0.375rem;
+    border-radius: 999px;
+    overflow: hidden;
+  }
+  .terminoir-segment-bar__part {
+    flex-basis: 0;
+    min-width: 0.375rem;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+export type Segment = {
+    label: string;
+    count: number;
+    color?: string | null;
+};
+type $$ComponentProps = {
+    /** In order; zero counts are skipped. Colours are palette names or CSS colours. */
+    segments: Segment[];
+    /** Accessible name, e.g. "Status of 30 linked tasks". */
+    label: string;
+    class?: string;
+};
+declare const SegmentBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type SegmentBar = ReturnType<typeof SegmentBar>;
+export default SegmentBar;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { cn } from './utils/cn.js';
 export { ACCENT_PALETTE, accentFromString, type AccentColor } from './utils/accent.js';
+export { LABEL_PALETTE, labelColor, type LabelColor } from './utils/palette.js';
 export { ICON_PICKER_OPTIONS, NAV_ICON_NAMES, iconClassName, type IconPickerId } from './utils/icons.js';
 export { readStorage, writeStorage, namespacedKey } from './utils/storage.js';
 export { FONT_REGISTRY, FONT_PICKER_UI_OPTIONS, UI_FONT_OPTIONS, CODE_FONT_OPTIONS, applyFontPreferences, loadFontPreferences, persistFontPreferences, getFontOption, type FontOption, type FontPreferences, type FontCategory, } from './utils/fonts.js';
@@ -45,6 +46,10 @@ 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 GroupedList } from './components/GroupedList.svelte';
+export type { GroupedListGroup, GroupedListItem } from './components/GroupedList.svelte';
+export { default as SegmentBar } from './components/SegmentBar.svelte';
+export type { Segment } from './components/SegmentBar.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';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { cn } from './utils/cn.js';
 export { ACCENT_PALETTE, accentFromString } from './utils/accent.js';
+export { LABEL_PALETTE, labelColor } from './utils/palette.js';
 export { ICON_PICKER_OPTIONS, NAV_ICON_NAMES, iconClassName } from './utils/icons.js';
 export { readStorage, writeStorage, namespacedKey } from './utils/storage.js';
 export { FONT_REGISTRY, FONT_PICKER_UI_OPTIONS, UI_FONT_OPTIONS, CODE_FONT_OPTIONS, applyFontPreferences, loadFontPreferences, persistFontPreferences, getFontOption, } from './utils/fonts.js';
@@ -44,6 +45,8 @@ 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 GroupedList } from './components/GroupedList.svelte';
+export { default as SegmentBar } from './components/SegmentBar.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';

package/dist/utils/calendar.d.ts

@@ -26,10 +26,23 @@ export declare function calendarRange(anchor: Date, mode: CalendarMode): {
 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. */
+/** 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[];

package/dist/utils/calendar.js

@@ -46,10 +46,18 @@ 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. */
+/** Whether `event` shows on `day`: timed events on their start day, all-day events on every day they span. */
+function occursOn(event, day) {
+    if (!event.allDay)
+        return sameDay(event.start, day);
+    const dayStart = startOfDay(day).getTime();
+    const end = Math.max(event.end.getTime(), addDays(startOfDay(event.start), 1).getTime());
+    return startOfDay(event.start).getTime() <= dayStart && dayStart < end;
+}
+/** Events showing on `day` (multi-day all-day events on each day), all-day first, then by start time. */
 export function eventsOn(events, day) {
     return events
-        .filter((e) => sameDay(e.start, day))
+        .filter((e) => occursOn(e, 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. */
@@ -59,3 +67,39 @@ export function dayLayout(event) {
     const top = (minutes / MINUTES_PER_DAY) * 100;
     return { top, height: Math.min((duration / MINUTES_PER_DAY) * 100, 100 - top) };
 }
+const COMPACT_MAX_MINUTES = 30;
+/** Lay out a day's timed events so overlapping ones sit side by side instead of on top of each other. */
+export function layoutDay(events) {
+    const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime() || b.end.getTime() - a.end.getTime());
+    const placed = [];
+    let group = [];
+    let laneEnds = [];
+    let groupEnd = -Infinity;
+    const closeGroup = () => {
+        for (const item of group)
+            item.lanes = laneEnds.length;
+        group = [];
+        laneEnds = [];
+    };
+    for (const event of sorted) {
+        const start = event.start.getTime();
+        const end = Math.max(event.end.getTime(), start + MIN_EVENT_MINUTES * 60000);
+        if (start >= groupEnd)
+            closeGroup();
+        let lane = laneEnds.findIndex((laneEnd) => laneEnd <= start);
+        if (lane === -1) {
+            lane = laneEnds.length;
+            laneEnds.push(end);
+        }
+        else {
+            laneEnds[lane] = end;
+        }
+        groupEnd = Math.max(groupEnd, end);
+        const minutes = (event.end.getTime() - start) / 60000;
+        const item = { event, ...dayLayout(event), lane, lanes: 1, compact: minutes <= COMPACT_MAX_MINUTES };
+        group.push(item);
+        placed.push(item);
+    }
+    closeGroup();
+    return placed;
+}

package/dist/utils/palette.d.ts

@@ -0,0 +1,15 @@
+/** Named colours for user-chosen labels (select options, tags). Shared by Chip, GroupedList, SegmentBar. */
+export declare const LABEL_PALETTE: {
+    readonly grey: "#8b8f98";
+    readonly blue: "#5b8def";
+    readonly green: "#3fae6a";
+    readonly red: "#e5534b";
+    readonly yellow: "#d4a72c";
+    readonly orange: "#e0823d";
+    readonly purple: "#9b6bdf";
+    readonly pink: "#d9669f";
+    readonly teal: "#2fa7a0";
+};
+export type LabelColor = keyof typeof LABEL_PALETTE;
+/** CSS colour for a palette name (`gray` = `grey`) or any CSS colour; undefined stays undefined. */
+export declare function labelColor(color: string | null | undefined): string | undefined;

package/dist/utils/palette.js

@@ -0,0 +1,19 @@
+/** Named colours for user-chosen labels (select options, tags). Shared by Chip, GroupedList, SegmentBar. */
+export const LABEL_PALETTE = {
+    grey: '#8b8f98',
+    blue: '#5b8def',
+    green: '#3fae6a',
+    red: '#e5534b',
+    yellow: '#d4a72c',
+    orange: '#e0823d',
+    purple: '#9b6bdf',
+    pink: '#d9669f',
+    teal: '#2fa7a0',
+};
+/** CSS colour for a palette name (`gray` = `grey`) or any CSS colour; undefined stays undefined. */
+export function labelColor(color) {
+    if (!color)
+        return undefined;
+    const name = color === 'gray' ? 'grey' : color;
+    return name in LABEL_PALETTE ? LABEL_PALETTE[name] : color;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminoir",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Terminoir \u2014 Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",