@classic-homes/theme-svelte 1.32.0 → 1.34.0

package/dist/lib/components/KanbanBoard.svelte

@@ -0,0 +1,519 @@
+<script lang="ts" module>
+  /** One column of the board */
+  export interface KanbanColumn {
+    id: string;
+    title: string;
+    /** Muted line under the title */
+    description?: string;
+  }
+
+  /** A card dropped somewhere new: `index` is its position in `to`, other cards counted without it */
+  export interface KanbanMove<T> {
+    item: T;
+    from: string;
+    to: string;
+    index: number;
+  }
+
+  /** Attributes to spread on the `<button>` that acts as a card's drag handle */
+  export interface KanbanHandleProps {
+    type: 'button';
+    'aria-label': string;
+    'aria-roledescription': string;
+    'aria-describedby': string;
+    'aria-pressed': boolean;
+    'aria-disabled': boolean | undefined;
+    'data-kanban-handle': string;
+    onpointerdown: (event: PointerEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+    onblur: () => void;
+  }
+
+  export interface KanbanCardContext<T> {
+    item: T;
+    column: KanbanColumn;
+    /** Spread on a `<button>` inside the card: `<button {...handle}>` */
+    handle: KanbanHandleProps;
+    /** The card is being dragged or is picked up by the keyboard */
+    dragging: boolean;
+  }
+</script>
+
+<script lang="ts" generics="T">
+  import { tick, type Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  /**
+   * KanbanBoard - cards in columns, moved between columns by drag or keyboard.
+   *
+   * Each card renders its own drag handle by spreading `handle` on a button,
+   * so the rest of the card stays clickable. Pointer: press and drag the
+   * handle; the column under the pointer is the target. Keyboard: focus the
+   * handle, Space or Enter to pick the card up, Left/Right to change column
+   * (Up/Down, Home/End within it when `sortable`), Space/Enter to drop, Escape
+   * to put it back. Every move is announced.
+   *
+   * The board never moves cards itself: it calls `onMove` once per drop and
+   * renders whatever `items` / `getColumn` say next — a parent that ignores
+   * the move snaps the card back.
+   */
+  interface Props {
+    columns: KanbanColumn[];
+    items: T[];
+    /** Stable key for each card */
+    getKey: (item: T) => string | number;
+    /** Id of the column the card is in; cards matching no column are not shown */
+    getColumn: (item: T) => string;
+    /** A card was dropped in a new place (once per drop) */
+    onMove: (move: KanbanMove<T>) => void;
+    /** Renders one card; spread `handle` on its drag-handle button */
+    card: Snippet<[KanbanCardContext<T>]>;
+    /** Replaces the default header (title, count, description) */
+    columnHeader?: Snippet<[{ column: KanbanColumn; items: T[] }]>;
+    /** Shown in a column with no cards */
+    columnEmpty?: Snippet<[{ column: KanbanColumn }]>;
+    /** Whether a card may go to a column; refused columns dim and are skipped */
+    canDrop?: (item: T, to: string) => boolean;
+    /** Cards can be reordered within a column; otherwise a move lands at the end */
+    sortable?: boolean;
+    /** Accessible name of the board, e.g. "Designer assignments" */
+    label: string;
+    /** Name used in announcements and handle labels */
+    getItemLabel?: (item: T) => string;
+    /** Turns moving off; handles stay rendered but do nothing */
+    disabled?: boolean;
+    class?: string;
+    columnClass?: string;
+    cardClass?: string;
+  }
+
+  let {
+    columns,
+    items,
+    getKey,
+    getColumn,
+    onMove,
+    card: cardSnippet,
+    columnHeader,
+    columnEmpty,
+    canDrop,
+    sortable = false,
+    label,
+    getItemLabel = () => 'Card',
+    disabled = false,
+    class: className,
+    columnClass,
+    cardClass,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const instructionsId = `kanban-${uid}-help`;
+
+  let boardEl: HTMLDivElement | undefined = $state();
+  let scrollerEl: HTMLDivElement | undefined = $state();
+  let announcement = $state('');
+
+  interface Drag {
+    key: string;
+    item: T;
+    mode: 'pointer' | 'keyboard';
+    from: string;
+    fromIndex: number;
+    to: string;
+    index: number;
+  }
+  let drag = $state<Drag | null>(null);
+
+  // Pointer bookkeeping: drag starts after a few pixels, so a click is a click
+  let pressed: { key: string; item: T; x: number; y: number } | null = null;
+  let grabOffset = { x: 0, y: 0 };
+  let ghost = $state<{ x: number; y: number; width: number } | null>(null);
+  // Set while a keyboard move re-renders the card, so its blur doesn't cancel
+  let moving = false;
+
+  const DRAG_THRESHOLD = 4;
+  const EDGE = 48;
+
+  const keyOf = (item: T) => String(getKey(item));
+
+  const byColumn = $derived.by(() => {
+    const map = new Map<string, T[]>(columns.map((c) => [c.id, []]));
+    for (const item of items) map.get(getColumn(item))?.push(item);
+    return map;
+  });
+
+  const columnTitle = (id: string) => columns.find((c) => c.id === id)?.title ?? id;
+  const allowed = (item: T, to: string, from: string) =>
+    to === from || !canDrop || canDrop(item, to);
+
+  type Entry = { kind: 'card'; item: T; key: string } | { kind: 'placeholder'; key: string };
+
+  /** A column's cards, with the dragged card (keyboard) or a placeholder (pointer) at its preview spot */
+  function entries(columnId: string): Entry[] {
+    const cards = byColumn.get(columnId) ?? [];
+    const list: Entry[] = cards
+      .filter((item) => !drag || keyOf(item) !== drag.key)
+      .map((item) => ({ kind: 'card', item, key: keyOf(item) }));
+    if (drag && drag.to === columnId) {
+      const at = Math.min(drag.index, list.length);
+      list.splice(
+        at,
+        0,
+        drag.mode === 'keyboard'
+          ? { kind: 'card', item: drag.item, key: drag.key }
+          : { kind: 'placeholder', key: `placeholder-${drag.key}` }
+      );
+    }
+    return list;
+  }
+
+  /** Cards in `to` other than the dragged one: the last index a card can land at */
+  function othersIn(to: string): number {
+    return (byColumn.get(to) ?? []).filter((item) => !drag || keyOf(item) !== drag.key).length;
+  }
+
+  /** Where a card lands in `to` when the user didn't pick a spot: back in place, else the end */
+  function naturalIndex(to: string): number {
+    return drag && to === drag.from ? drag.fromIndex : othersIn(to);
+  }
+
+  function announce(message: string) {
+    announcement = '';
+    queueMicrotask(() => (announcement = message));
+  }
+
+  function positionText(to: string, index: number) {
+    return sortable
+      ? `${columnTitle(to)}, position ${index + 1} of ${othersIn(to) + 1}`
+      : columnTitle(to);
+  }
+
+  function begin(item: T, mode: Drag['mode']) {
+    const from = getColumn(item);
+    const key = keyOf(item);
+    const fromIndex = (byColumn.get(from) ?? []).findIndex((i) => keyOf(i) === key);
+    drag = { key, item, mode, from, fromIndex, to: from, index: fromIndex };
+  }
+
+  /** Ends the drag; `commit` reports a real move to the parent */
+  function finish(commit: boolean) {
+    const d = drag;
+    drag = null;
+    ghost = null;
+    pressed = null;
+    stopPointer();
+    if (!d || !commit) return false;
+    const moved = d.to !== d.from || (sortable && d.index !== d.fromIndex);
+    if (moved) onMove({ item: d.item, from: d.from, to: d.to, index: d.index });
+    return moved;
+  }
+
+  async function focusHandle(key: string) {
+    await tick();
+    boardEl?.querySelector<HTMLElement>(`[data-kanban-handle="${CSS.escape(key)}"]`)?.focus();
+  }
+
+  async function keyboardMove(to: string, index: number) {
+    if (!drag) return;
+    moving = true;
+    drag.to = to;
+    drag.index = index;
+    announce(`${getItemLabel(drag.item)} moved to ${positionText(to, index)}.`);
+    await focusHandle(drag.key);
+    moving = false;
+  }
+
+  /** The next column in `step` direction this card may go to */
+  function nextColumn(step: 1 | -1): string | null {
+    if (!drag) return null;
+    const at = columns.findIndex((c) => c.id === drag!.to);
+    for (let i = at + step; i >= 0 && i < columns.length; i += step) {
+      if (allowed(drag.item, columns[i].id, drag.from)) return columns[i].id;
+    }
+    return null;
+  }
+
+  // Pointer: the column and slot under the pointer
+  function locate(x: number, y: number): { to: string; index: number } | null {
+    if (!drag || !boardEl) return null;
+    const hit = document.elementFromPoint(x, y)?.closest<HTMLElement>('[data-kanban-column]');
+    if (!hit || !boardEl.contains(hit)) return null;
+    const to = hit.dataset.kanbanColumn!;
+    if (!allowed(drag.item, to, drag.from)) return null;
+    if (!sortable) return { to, index: naturalIndex(to) };
+    const cards = Array.from(
+      hit.querySelectorAll<HTMLElement>('[data-kanban-card]:not([data-kanban-placeholder])')
+    );
+    const index = cards.filter((el) => {
+      const rect = el.getBoundingClientRect();
+      return rect.top + rect.height / 2 < y;
+    }).length;
+    return { to, index };
+  }
+
+  function autoScroll(x: number, y: number) {
+    if (scrollerEl) {
+      const rect = scrollerEl.getBoundingClientRect();
+      if (x < rect.left + EDGE) scrollerEl.scrollLeft -= 16;
+      else if (x > rect.right - EDGE) scrollerEl.scrollLeft += 16;
+    }
+    const list = document
+      .elementFromPoint(x, y)
+      ?.closest<HTMLElement>('[data-kanban-column]')
+      ?.querySelector<HTMLElement>('[data-kanban-list]');
+    if (list) {
+      const rect = list.getBoundingClientRect();
+      if (y < rect.top + EDGE) list.scrollTop -= 16;
+      else if (y > rect.bottom - EDGE) list.scrollTop += 16;
+    }
+  }
+
+  function handleProps(item: T, key: string): KanbanHandleProps {
+    const name = getItemLabel(item);
+    const grabbed = drag?.key === key && drag.mode === 'keyboard';
+    return {
+      type: 'button',
+      'aria-label': `Move ${name}`,
+      'aria-roledescription': 'draggable card handle',
+      'aria-describedby': instructionsId,
+      'aria-pressed': grabbed,
+      'aria-disabled': disabled || undefined,
+      'data-kanban-handle': key,
+      onpointerdown(event) {
+        if (disabled || event.button !== 0 || drag) return;
+        event.preventDefault();
+        pressed = { key, item, x: event.clientX, y: event.clientY };
+        const rect = (event.currentTarget as HTMLElement)
+          .closest<HTMLElement>('[data-kanban-card]')
+          ?.getBoundingClientRect();
+        grabOffset = rect
+          ? { x: event.clientX - rect.left, y: event.clientY - rect.top }
+          : { x: 0, y: 0 };
+        ghost = rect ? { x: rect.left, y: rect.top, width: rect.width } : null;
+        // Window listeners, not pointer capture: the card leaves its column while dragged
+        window.addEventListener('pointermove', onWindowMove);
+        window.addEventListener('pointerup', onWindowUp);
+        window.addEventListener('pointercancel', onWindowCancel);
+        window.addEventListener('keydown', onWindowKey);
+      },
+      onkeydown(event) {
+        if (disabled) return;
+        const picked = drag?.key === key && drag.mode === 'keyboard';
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+          if (picked) {
+            const to = drag!.to;
+            const index = drag!.index;
+            finish(true);
+            announce(`${name} dropped in ${positionText(to, index)}.`);
+            void focusHandle(key);
+          } else if (!drag) {
+            begin(item, 'keyboard');
+            announce(
+              `${name} picked up in ${columnTitle(drag!.from)}. Use the arrow keys to move it, Space to drop, Escape to cancel.`
+            );
+          }
+          return;
+        }
+        if (!picked || !drag) return;
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          const from = drag.from;
+          moving = true;
+          finish(false);
+          announce(`Move cancelled. ${name} is back in ${columnTitle(from)}.`);
+          void focusHandle(key).then(() => (moving = false));
+        } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          event.preventDefault();
+          const to = nextColumn(event.key === 'ArrowLeft' ? -1 : 1);
+          if (to)
+            void keyboardMove(to, sortable ? Math.min(drag.index, othersIn(to)) : naturalIndex(to));
+        } else if (sortable && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+          event.preventDefault();
+          const index = drag.index + (event.key === 'ArrowUp' ? -1 : 1);
+          if (index >= 0 && index <= othersIn(drag.to)) void keyboardMove(drag.to, index);
+        } else if (sortable && (event.key === 'Home' || event.key === 'End')) {
+          event.preventDefault();
+          void keyboardMove(drag.to, event.key === 'Home' ? 0 : othersIn(drag.to));
+        }
+      },
+      onblur() {
+        // Focus leaving a picked-up card (other than our own re-render) cancels the move
+        if (moving || drag?.key !== key || drag.mode !== 'keyboard') return;
+        const from = drag.from;
+        finish(false);
+        announce(`Move cancelled. ${name} is back in ${columnTitle(from)}.`);
+      },
+    };
+  }
+
+  function onWindowMove(event: PointerEvent) {
+    if (!pressed) return;
+    if (!drag) {
+      const moved = Math.hypot(event.clientX - pressed.x, event.clientY - pressed.y);
+      if (moved < DRAG_THRESHOLD) return;
+      begin(pressed.item, 'pointer');
+    }
+    if (!drag || drag.mode !== 'pointer') return;
+    if (ghost) {
+      ghost.x = event.clientX - grabOffset.x;
+      ghost.y = event.clientY - grabOffset.y;
+    }
+    autoScroll(event.clientX, event.clientY);
+    const spot = locate(event.clientX, event.clientY);
+    drag.to = spot?.to ?? drag.from;
+    drag.index = spot?.index ?? drag.fromIndex;
+  }
+
+  function onWindowUp() {
+    if (drag?.mode === 'pointer') {
+      const d = drag;
+      // The click that ends a drag shouldn't open the card under the pointer
+      window.addEventListener('click', swallowClick, { capture: true, once: true });
+      setTimeout(() => window.removeEventListener('click', swallowClick, { capture: true }), 0);
+      if (finish(true)) announce(`${getItemLabel(d.item)} dropped in ${columnTitle(d.to)}.`);
+    } else {
+      finish(false);
+    }
+  }
+
+  function onWindowCancel() {
+    finish(false);
+  }
+
+  function onWindowKey(event: KeyboardEvent) {
+    if (event.key !== 'Escape' || drag?.mode !== 'pointer') return;
+    event.preventDefault();
+    const d = drag;
+    finish(false);
+    announce(`Move cancelled. ${getItemLabel(d.item)} is back in ${columnTitle(d.from)}.`);
+  }
+
+  function swallowClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  function stopPointer() {
+    window.removeEventListener('pointermove', onWindowMove);
+    window.removeEventListener('pointerup', onWindowUp);
+    window.removeEventListener('pointercancel', onWindowCancel);
+    window.removeEventListener('keydown', onWindowKey);
+  }
+
+  $effect(() => stopPointer);
+
+  const noop = () => {};
+  /** The floating copy's handle: same look, no behaviour */
+  const inertHandle = (item: T): KanbanHandleProps => ({
+    ...handleProps(item, ''),
+    'data-kanban-handle': '',
+    onpointerdown: noop,
+    onkeydown: noop,
+    onblur: noop,
+  });
+
+  const draggedColumn = $derived(
+    drag ? (columns.find((c) => c.id === drag!.to) ?? columns[0]) : null
+  );
+</script>
+
+<div bind:this={boardEl} role="group" aria-label={label} class={cn('relative', className)}>
+  <div bind:this={scrollerEl} class="overflow-x-auto pb-2">
+    <div class="flex min-w-max gap-3">
+      {#each columns as column (column.id)}
+        {@const cards = byColumn.get(column.id) ?? []}
+        {@const list = entries(column.id)}
+        {@const refused = !!drag && !allowed(drag.item, column.id, drag.from)}
+        {@const target = !!drag && drag.to === column.id && drag.to !== drag.from}
+        <section
+          data-kanban-column={column.id}
+          aria-label="{column.title}, {cards.length} {cards.length === 1 ? 'card' : 'cards'}"
+          data-drop-target={target || undefined}
+          data-drop-refused={refused || undefined}
+          class={cn(
+            'flex w-72 shrink-0 flex-col rounded-lg border border-border bg-muted/30 transition-[opacity,box-shadow] duration-150',
+            target && 'ring-2 ring-primary/40',
+            refused && 'opacity-50',
+            columnClass
+          )}
+        >
+          {#if columnHeader}
+            {@render columnHeader({ column, items: cards })}
+          {:else}
+            <header class="border-b border-border px-3 py-2">
+              <div class="flex items-baseline gap-2">
+                <h3 class="min-w-0 flex-1 truncate text-sm font-semibold" title={column.title}>
+                  {column.title}
+                </h3>
+                <span class="text-sm tabular-nums text-muted-foreground">{cards.length}</span>
+              </div>
+              {#if column.description}
+                <p class="mt-0.5 text-xs text-muted-foreground">{column.description}</p>
+              {/if}
+            </header>
+          {/if}
+          <ul data-kanban-list class="flex min-h-24 flex-1 flex-col gap-2 overflow-y-auto p-2">
+            {#each list as entry (entry.key)}
+              {#if entry.kind === 'placeholder'}
+                <li
+                  data-kanban-card
+                  data-kanban-placeholder
+                  aria-hidden="true"
+                  class="min-h-16 rounded-md border-2 border-dashed border-primary/40 bg-primary/5"
+                ></li>
+              {:else}
+                {@const dragging = drag?.key === entry.key}
+                <li
+                  data-kanban-card={entry.key}
+                  data-dragging={dragging || undefined}
+                  class={cn(
+                    'rounded-md',
+                    dragging && drag?.mode === 'keyboard' && 'ring-2 ring-primary',
+                    cardClass
+                  )}
+                >
+                  {@render cardSnippet({
+                    item: entry.item,
+                    column,
+                    handle: handleProps(entry.item, entry.key),
+                    dragging,
+                  })}
+                </li>
+              {/if}
+            {/each}
+            {#if list.length === 0 && columnEmpty}
+              <li class="list-none">{@render columnEmpty({ column })}</li>
+            {/if}
+          </ul>
+        </section>
+      {/each}
+    </div>
+  </div>
+
+  {#if drag?.mode === 'pointer' && ghost && draggedColumn}
+    <div
+      aria-hidden="true"
+      class="pointer-events-none fixed left-0 top-0 z-50 rotate-1 opacity-95 shadow-lg"
+      style:width="{ghost.width}px"
+      style:transform="translate({ghost.x}px, {ghost.y}px)"
+    >
+      <div class={cn('rounded-md', cardClass)}>
+        {@render cardSnippet({
+          item: drag.item,
+          column: draggedColumn,
+          handle: inertHandle(drag.item),
+          dragging: true,
+        })}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<p id={instructionsId} class="sr-only">
+  Press Space or Enter to pick up a card, the left and right arrow keys to change column{sortable
+    ? ', up and down to change its place in the column'
+    : ''}, Space or Enter to drop, Escape to cancel.
+</p>
+<div class="sr-only" role="status" aria-live="assertive" aria-atomic="true">{announcement}</div>

package/dist/lib/components/KanbanBoard.svelte.d.ts

@@ -0,0 +1,93 @@
+/** One column of the board */
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    /** Muted line under the title */
+    description?: string;
+}
+/** A card dropped somewhere new: `index` is its position in `to`, other cards counted without it */
+export interface KanbanMove<T> {
+    item: T;
+    from: string;
+    to: string;
+    index: number;
+}
+/** Attributes to spread on the `<button>` that acts as a card's drag handle */
+export interface KanbanHandleProps {
+    type: 'button';
+    'aria-label': string;
+    'aria-roledescription': string;
+    'aria-describedby': string;
+    'aria-pressed': boolean;
+    'aria-disabled': boolean | undefined;
+    'data-kanban-handle': string;
+    onpointerdown: (event: PointerEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+    onblur: () => void;
+}
+export interface KanbanCardContext<T> {
+    item: T;
+    column: KanbanColumn;
+    /** Spread on a `<button>` inside the card: `<button {...handle}>` */
+    handle: KanbanHandleProps;
+    /** The card is being dragged or is picked up by the keyboard */
+    dragging: boolean;
+}
+import { type Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        columns: KanbanColumn[];
+        items: T[];
+        /** Stable key for each card */
+        getKey: (item: T) => string | number;
+        /** Id of the column the card is in; cards matching no column are not shown */
+        getColumn: (item: T) => string;
+        /** A card was dropped in a new place (once per drop) */
+        onMove: (move: KanbanMove<T>) => void;
+        /** Renders one card; spread `handle` on its drag-handle button */
+        card: Snippet<[KanbanCardContext<T>]>;
+        /** Replaces the default header (title, count, description) */
+        columnHeader?: Snippet<[{
+            column: KanbanColumn;
+            items: T[];
+        }]>;
+        /** Shown in a column with no cards */
+        columnEmpty?: Snippet<[{
+            column: KanbanColumn;
+        }]>;
+        /** Whether a card may go to a column; refused columns dim and are skipped */
+        canDrop?: (item: T, to: string) => boolean;
+        /** Cards can be reordered within a column; otherwise a move lands at the end */
+        sortable?: boolean;
+        /** Accessible name of the board, e.g. "Designer assignments" */
+        label: string;
+        /** Name used in announcements and handle labels */
+        getItemLabel?: (item: T) => string;
+        /** Turns moving off; handles stay rendered but do nothing */
+        disabled?: boolean;
+        class?: string;
+        columnClass?: string;
+        cardClass?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const KanbanBoard: $$IsomorphicComponent;
+type KanbanBoard<T> = InstanceType<typeof KanbanBoard<T>>;
+export default KanbanBoard;

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -13,6 +13,7 @@
   import type { Snippet } from 'svelte';
   import type { NavItem } from '../../../types/layout.js';
   import { cn } from '../../../utils.js';
+  import { truncateTitle } from '../../../utils/truncate-title.js';
   import { sidebarStore } from '../../../stores/sidebar.svelte.js';
   import Icon, { type IconName } from '../../Icon.svelte';
   import SidebarNavItem from './SidebarNavItem.svelte';
@@ -195,13 +196,13 @@
   highlight: { before: string; match: string; after: string } | null
 )}
   {#if highlight}
-    <span class="flex-1 min-w-0 truncate">
+    <span class="flex-1 min-w-0 truncate" use:truncateTitle={name}>
       {highlight.before}<mark class="bg-yellow-200 dark:bg-yellow-900 text-inherit rounded px-0.5"
         >{highlight.match}</mark
       >{highlight.after}
     </span>
   {:else}
-    <span class="flex-1 min-w-0 truncate">{name}</span>
+    <span class="flex-1 min-w-0 truncate" use:truncateTitle={name}>{name}</span>
   {/if}
 {/snippet}
 

package/dist/lib/components/layout/sidebar/SidebarSection.svelte

@@ -9,6 +9,7 @@
   import type { Snippet } from 'svelte';
   import type { NavSection, NavItem } from '../../../types/layout.js';
   import { cn } from '../../../utils.js';
+  import { truncateTitle } from '../../../utils/truncate-title.js';
   import { sidebarStore } from '../../../stores/sidebar.svelte.js';
   import SidebarNavItem from './SidebarNavItem.svelte';
 
@@ -93,7 +94,7 @@
         aria-expanded={isExpanded}
         aria-controls={`sidebar-section-${section.id}`}
       >
-        <span class="truncate">{section.title}</span>
+        <span class="truncate" use:truncateTitle={section.title}>{section.title}</span>
         <svg
           class={cn(
             'h-4 w-4 shrink-0',
@@ -119,6 +120,7 @@
           'mb-2 px-4 text-xs font-semibold uppercase tracking-wider overflow-hidden truncate',
           isLight ? 'text-muted-foreground' : 'text-sidebar-foreground/60'
         )}
+        use:truncateTitle={section.title}
       >
         {section.title}
       </h2>

package/dist/lib/index.d.ts

@@ -68,6 +68,7 @@ export { default as SegmentedControl, type SegmentedControlOption, } from './com
 export { default as ViewToggle, type ViewToggleOption, defaultViewToggleOptions, } from './components/ViewToggle.svelte';
 export { default as Sheet } from './components/Sheet.svelte';
 export { default as SortableList, type SortableHandleProps, type SortableItemContext, } from './components/SortableList.svelte';
+export { default as KanbanBoard, type KanbanCardContext, type KanbanColumn, type KanbanHandleProps, type KanbanMove, } from './components/KanbanBoard.svelte';
 export { Studio, StudioBar, StudioOutline, StudioCanvas, StudioCanvasItem, StudioInspector, StudioInspectorSection, StudioPage, SaveStatus, IssuesButton, InsertPalette, getStudioContext, type StudioOutlineEntry, type StudioInspectorTab, type SaveState, type StudioIssue, type InsertPaletteItem, type InsertPaletteGroup, type StudioContext, type StudioLayout, } from './components/studio/index.js';
 export { AspectRatio, Image, Video, Audio, MediaEmbed, MediaGrid, MediaCarousel, Lightbox, } from './components/media/index.js';
 export type { MediaGridColumns } from './components/media/MediaGrid.svelte';

package/dist/lib/index.js

@@ -83,6 +83,8 @@ export { default as ViewToggle, defaultViewToggleOptions, } from './components/V
 export { default as Sheet } from './components/Sheet.svelte';
 // Reorderable list
 export { default as SortableList, } from './components/SortableList.svelte';
+// Kanban board: cards moved between columns by drag or keyboard
+export { default as KanbanBoard, } from './components/KanbanBoard.svelte';
 // Studio - full-screen editor frame (outline, canvas, inspector)
 export { Studio, StudioBar, StudioOutline, StudioCanvas, StudioCanvasItem, StudioInspector, StudioInspectorSection, StudioPage, SaveStatus, IssuesButton, InsertPalette, getStudioContext, } from './components/studio/index.js';
 // Media Components

package/dist/lib/utils/truncate-title.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Full-text tooltip for `truncate`d labels.
+ */
+import type { Action } from 'svelte/action';
+/**
+ * Sets the element's native `title` to `text` while its content is cut off
+ * by an ellipsis, and removes it when the text fits. Measured on hover rather
+ * than observed, so it costs nothing until someone points at it and stays
+ * right as the container resizes. (The accessible name is the text itself,
+ * so screen readers already get the full label.)
+ */
+export declare const truncateTitle: Action<HTMLElement, string>;

package/dist/lib/utils/truncate-title.js

@@ -0,0 +1,30 @@
+/**
+ * Full-text tooltip for `truncate`d labels.
+ */
+/**
+ * Sets the element's native `title` to `text` while its content is cut off
+ * by an ellipsis, and removes it when the text fits. Measured on hover rather
+ * than observed, so it costs nothing until someone points at it and stays
+ * right as the container resizes. (The accessible name is the text itself,
+ * so screen readers already get the full label.)
+ */
+export const truncateTitle = (node, text) => {
+    let current = text;
+    function sync() {
+        if (node.scrollWidth > node.clientWidth)
+            node.title = current;
+        else
+            node.removeAttribute('title');
+    }
+    node.addEventListener('pointerenter', sync);
+    return {
+        update(next) {
+            current = next;
+            if (node.hasAttribute('title'))
+                sync();
+        },
+        destroy() {
+            node.removeEventListener('pointerenter', sync);
+        },
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.32.0",
+  "version": "1.34.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",