@heyramzi/ui 2.13.0 → 2.15.0

package/src/work/kanban-column-head.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" generics="C extends KanbanColumnDef">
+	import type { Snippet } from "svelte";
+	import { Button } from "../shadcn/button/index.js";
+	import GroupHead from "../components/work-parts/group-head.svelte";
+	import KanbanFoldChevron from "./kanban-fold-chevron.svelte";
+	import type {
+		KanbanColumn as KanbanColumnDef,
+		KanbanColumnContext,
+	} from "./kanban-types.js";
+
+	interface Props {
+		column: C;
+		context: KanbanColumnContext;
+		/** The board's `columnHeader`. Left out, the head is GroupHead. */
+		columnHeader?: Snippet<[C, KanbanColumnContext]>;
+		onAdd?: (columnId: string) => void;
+		addLabel: string;
+		/** The column holds more cards than its cap, so the caret shows. */
+		foldable: boolean;
+		/** The caret has the column open in every lane. */
+		columnOpen: boolean;
+		onToggle: () => void;
+		expandColumnLabel: string;
+		collapseColumnLabel: string;
+	}
+
+	let {
+		column,
+		context,
+		columnHeader,
+		onAdd,
+		addLabel,
+		foldable,
+		columnOpen,
+		onToggle,
+		expandColumnLabel,
+		collapseColumnLabel,
+	}: Props = $props();
+</script>
+
+{#if columnHeader}
+	{@render columnHeader(column, context)}
+{:else}
+	<GroupHead
+		label={column.label}
+		hue={column.hue}
+		count={context.count}
+		onAdd={onAdd ? () => onAdd(column.id) : undefined}
+		{addLabel}
+	/>
+{/if}
+{#if foldable}
+	<!-- Opens the column in every lane; "Show N more" opens one. Hiding into the rail stays the header's own button. -->
+	<Button
+		variant="ghost"
+		size="sm"
+		icon
+		aria-expanded={columnOpen}
+		aria-label="{columnOpen ? collapseColumnLabel : expandColumnLabel} {column.label}"
+		onclick={onToggle}
+		class="-me-1 ms-auto size-6 shrink-0 text-muted-foreground/60 opacity-0 transition-opacity duration-(--duration-quick) hover:text-foreground focus-visible:opacity-100 [.kanban-column:hover_&]:opacity-100 [@media(hover:none)]:opacity-100"
+	>
+		<KanbanFoldChevron open={columnOpen} class="size-3" />
+	</Button>
+{/if}

package/src/work/kanban-column.svelte

@@ -49,7 +49,7 @@
 		"kanban-column flex flex-col gap-2",
 		collapsing && "kanban-column-collapsing",
 		expanding && "kanban-column-expanding",
-		!collapsing && !expanding && "w-[280px] shrink-0 min-h-0 max-sm:w-[82vw] max-sm:snap-start",
+		"min-h-0",
 		className,
 	)}
 >
@@ -73,39 +73,61 @@
 </div>
 
 <style>
+	/* Columns split the board's width equally, never under 280px (the board scrolls instead)
+	   nor over 420px (a 2-line card title stays near 55 characters a line). */
 	.kanban-column {
+		flex: 1 1 0;
+		min-width: var(--kanban-column-min, 280px);
+		max-width: var(--kanban-column-max, 420px);
 		transition: opacity var(--duration-quick, 120ms) var(--ease-smooth-out, ease-out);
 	}
 
+	/* A board under 40rem wide (a phone, a side panel) shows one column and a peek of the next, as 82vw did on a phone. */
+	@container kanban-board (width < 40rem) {
+		.kanban-column {
+			flex: 0 0 88cqw;
+			min-width: 0;
+			max-width: 88cqw;
+			scroll-snap-align: start;
+		}
+	}
+
 	.kanban-column-collapsing,
 	.kanban-column-expanding {
 		will-change: opacity;
+		overflow: hidden;
 	}
 
 	.kanban-column-collapsing {
-		flex: 0 0 0px;
-		width: 0;
-		opacity: 0;
-		overflow: hidden;
 		pointer-events: none;
+		animation: column-fold var(--duration-slow) var(--ease-smooth-out) forwards;
 	}
 
 	.kanban-column-expanding {
-		flex: 0 0 280px;
-		width: 280px;
-		animation: column-expand var(--duration-slow, 300ms) var(--ease-smooth-out, ease-out) both;
+		animation: column-unfold var(--duration-slow) var(--ease-smooth-out) both;
 	}
 
-	@keyframes column-expand {
-		from {
+	/* One end only: the other is the column's resting width, whatever the container gave it.
+	   The negative margin takes the board's gap-4 with it, so no gap is left behind. */
+	@keyframes column-fold {
+		to {
 			opacity: 0;
-			flex: 0 0 0px;
-			width: 0;
+			flex-grow: 0;
+			flex-basis: 0;
+			min-width: 0;
+			max-width: 0;
+			margin-inline-end: -1rem;
 		}
-		to {
-			opacity: 1;
-			flex: 0 0 280px;
-			width: 280px;
+	}
+
+	@keyframes column-unfold {
+		from {
+			opacity: 0;
+			flex-grow: 0;
+			flex-basis: 0;
+			min-width: 0;
+			max-width: 0;
+			margin-inline-end: -1rem;
 		}
 	}
 
@@ -113,5 +135,14 @@
 		.kanban-column-expanding {
 			animation: none;
 		}
+
+		.kanban-column-collapsing {
+			animation: none;
+			opacity: 0;
+			flex: 0 0 0;
+			min-width: 0;
+			max-width: 0;
+			margin-inline-end: -1rem;
+		}
 	}
 </style>

package/src/work/kanban-fold-chevron.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { CaretDown } from "phosphor-svelte";
+	import { cn } from "../lib/utils.js";
+
+	interface Props {
+		/** Flips the caret to point up. */
+		open: boolean;
+		class?: string;
+	}
+
+	let { open, class: className }: Props = $props();
+</script>
+
+<span
+	class={cn("kanban-fold-chevron [&>svg]:size-full", open && "kanban-fold-chevron-open", className)}
+	aria-hidden="true"><CaretDown weight="bold" /></span
+>
+
+<style>
+	.kanban-fold-chevron {
+		display: inline-flex;
+		transition: transform var(--duration-fast) var(--ease-smooth-out);
+	}
+
+	.kanban-fold-chevron-open {
+		transform: scaleY(-1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.kanban-fold-chevron {
+			transition: none;
+		}
+	}
+</style>

package/src/work/kanban-hidden-rail.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" generics="C extends KanbanColumnDef">
+	import type { Snippet } from "svelte";
+	import { CaretDown } from "phosphor-svelte";
+	import { cn } from "../lib/utils.js";
+	import { Button } from "../shadcn/button/index.js";
+	import { workLooks } from "../components/work-parts/looks.js";
+	import type { KanbanRailState } from "./kanban-rail-state.svelte.js";
+	import type { KanbanColumn as KanbanColumnDef } from "./kanban-types.js";
+
+	interface Props {
+		/** The columns folded into the rail, in board order. */
+		columns: C[];
+		rail: KanbanRailState;
+		/** How many cards a column holds. */
+		countOf: (columnId: string) => number;
+		hiddenLabel: string;
+		showAllLabel: string;
+		hiddenItem?: Snippet<[C, { count: number; active: boolean }]>;
+	}
+
+	let { columns, rail, countOf, hiddenLabel, showAllLabel, hiddenItem }: Props = $props();
+</script>
+
+<div class="kanban-rail flex w-40 shrink-0 flex-col gap-1">
+	<Button
+		variant="ghost"
+		size="sm"
+		aria-expanded={rail.railOpen}
+		onclick={() => (rail.railOpen = !rail.railOpen)}
+		class="justify-start px-2 text-xs font-normal text-muted-foreground"
+	>
+		<span
+			class={cn(
+				"size-2.5 transition-transform duration-fast ease-smooth-out motion-reduce:transition-none [&>svg]:size-full",
+				!rail.railOpen && "-rotate-90",
+			)}
+			aria-hidden="true"><CaretDown weight="bold" /></span
+		>
+		{hiddenLabel}
+	</Button>
+
+	{#if rail.railOpen}
+		<div class="flex flex-col gap-0.5">
+			{#each columns as column (column.id)}
+				{@const count = countOf(column.id)}
+				{@const over = rail.dragOverHidden === column.id}
+				{@const hue = column.hue ?? "var(--color-primary)"}
+				<div
+					role="region"
+					aria-label={column.ariaLabel ?? column.label}
+					class={cn(
+						"kanban-rail-item transition-[background-color,outline-color] duration-quick ease-smooth-out",
+						workLooks.row,
+						rail.leaving.has(column.id) && "kanban-rail-item-leaving",
+					)}
+					style:background="color-mix(in oklch, {hue}
+					{over ? 10 : 0}%, transparent)"
+					style:outline="1px solid color-mix(in oklch, {hue}
+					{over ? 28 : 0}%, transparent)"
+					ondragover={(e) => rail.onHiddenDragOver(e, column.id)}
+					ondragleave={rail.onHiddenDragLeave}
+					ondrop={(e) => rail.onHiddenDrop(e, column.id)}
+				>
+					<Button
+						variant="ghost"
+						size="lg"
+						onclick={() => rail.show(column.id)}
+						class="w-full justify-start gap-2 text-xs text-muted-foreground"
+					>
+						{#if hiddenItem}
+							{@render hiddenItem(column, { count, active: over })}
+						{:else}
+							<span class="truncate whitespace-nowrap">{column.label}</span>
+							{#if count > 0}
+								<span class="ms-auto text-xs text-muted-foreground/60 tabular-nums"
+									>{count.toLocaleString()}</span
+								>
+							{/if}
+						{/if}
+					</Button>
+				</div>
+			{/each}
+
+			{#if columns.length > 1}
+				<Button
+					variant="ghost"
+					size="sm"
+					onclick={rail.showAll}
+					class="mt-1 justify-start text-xs font-normal text-muted-foreground"
+				>
+					{showAllLabel}
+				</Button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.kanban-rail-item-leaving {
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity var(--duration-quick) var(--ease-smooth-out);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.kanban-rail-item-leaving {
+			transition: none;
+		}
+	}
+</style>

package/src/work/kanban-keyboard.ts

@@ -0,0 +1,62 @@
+import { boardOrderAt } from "./board-order.js";
+import type { KanbanBoardInput } from "./kanban-board-state.svelte.js";
+import type { KanbanColumn as KanbanColumnDef, KanbanMove } from "./kanban-types.js";
+
+export type KanbanKeyboardConfig<T, C extends KanbanColumnDef> = {
+  input: () => KanbanBoardInput<T, C>;
+  canDrop: (columnId: string) => boolean;
+  isHidden: (columnId: string) => boolean;
+  sortedByColumn: (columnId: string) => T[];
+  isCapped: (columnId: string, total: number) => boolean;
+  moveAndPin: (id: string, move: KanbanMove) => void | Promise<void>;
+};
+
+/** The card's keydown handler: Enter or Space selects, Alt + arrow moves. */
+export function createCardKeyDown<T, C extends KanbanColumnDef>(
+  config: KanbanKeyboardConfig<T, C>,
+) {
+  const { input, canDrop, isHidden, sortedByColumn, isCapped, moveAndPin } = config;
+
+  /**
+   * Alt + ArrowLeft/Right moves the focused card to the next droppable column, so
+   * keyboard and screen-reader users get drag's onMove contract.
+   */
+  return function onCardKeyDown(e: KeyboardEvent, id: string): void {
+    const { onSelect, items, getId, getColumn, columns, sortKey, dropAtTop, boardOrder } = input();
+    if (onSelect && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onSelect(id);
+      return;
+    }
+    if (!e.altKey || (e.key !== "ArrowLeft" && e.key !== "ArrowRight")) return;
+    const item = items.find((entry) => getId(entry) === id);
+    if (!item) return;
+    const current = getColumn(item);
+    const at = columns.findIndex((c) => c.id === current);
+    if (at === -1) return;
+    const dir = e.key === "ArrowRight" ? 1 : -1;
+    for (let i = at + dir; i >= 0 && i < columns.length; i += dir) {
+      const target = columns[i];
+      if (!canDrop(target.id) || isHidden(target.id) || target.id === current) continue;
+      e.preventDefault();
+      if (sortKey === "manual") {
+        const column = sortedByColumn(target.id).filter((entry) => getId(entry) !== id);
+        const atTop = dropAtTop?.(target.id) ?? isCapped(target.id, column.length + 1);
+        const index = atTop ? 0 : column.length;
+        const before = column[index - 1];
+        const after = column[index];
+        void moveAndPin(id, {
+          columnId: target.id,
+          ...(boardOrder
+            ? { boardOrder: boardOrderAt(column, index, (entry) => boardOrder(entry)) }
+            : {}),
+          beforeId: before === undefined ? null : getId(before),
+          afterId: after === undefined ? null : getId(after),
+        });
+      } else {
+        void moveAndPin(id, { columnId: target.id });
+      }
+      return;
+    }
+  };
+}

package/src/work/kanban-rail-state.svelte.ts

@@ -0,0 +1,105 @@
+import { SvelteSet } from "svelte/reactivity";
+
+export type KanbanRailConfig = {
+  /** The board's controlled `hidden`, or undefined to let the rail remember. */
+  hidden: () => string[] | undefined;
+  onHiddenChange: () => ((ids: string[]) => void) | undefined;
+  canDrop: (columnId: string) => boolean;
+  dnd: { clearDragOver: () => void; onDrop: (e: DragEvent, columnId: string) => void };
+};
+
+/** The rail of hidden columns: which are folded, the fold and unfold timing, and drops onto it. */
+export function createKanbanRailState(config: KanbanRailConfig) {
+  const { canDrop, dnd } = config;
+  let internalHidden = $state<string[]>([]);
+  let hiddenIds = $derived(config.hidden() ?? internalHidden);
+  let hiddenSet = $derived(new Set(hiddenIds));
+
+  let railOpen = $state(true);
+  let dragOverHidden = $state<string | null>(null);
+  const collapsing = new SvelteSet<string>();
+  const expanding = new SvelteSet<string>();
+  const leaving = new SvelteSet<string>();
+
+  function setHidden(next: string[]): void {
+    internalHidden = next;
+    config.onHiddenChange()?.(next);
+  }
+
+  // Fold: the column fades out first, then leaves the row and joins the rail.
+  function hide(columnId: string): void {
+    if (hiddenSet.has(columnId) || collapsing.has(columnId)) return;
+    collapsing.add(columnId);
+    setTimeout(() => {
+      setHidden([...hiddenIds, columnId]);
+      collapsing.delete(columnId);
+    }, 300);
+  }
+
+  // Unfold: the rail entry leaves, then the column grows back in.
+  function show(columnId: string): void {
+    leaving.add(columnId);
+    setTimeout(() => {
+      leaving.delete(columnId);
+      expanding.add(columnId);
+      setHidden(hiddenIds.filter((id) => id !== columnId));
+      setTimeout(() => expanding.delete(columnId), 350);
+    }, 200);
+  }
+
+  function showAll(): void {
+    for (const id of hiddenIds) leaving.add(id);
+    setTimeout(() => {
+      leaving.clear();
+      setHidden([]);
+    }, 200);
+  }
+
+  function onHiddenDragOver(e: DragEvent, columnId: string): void {
+    if (!canDrop(columnId)) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    if (dragOverHidden !== columnId) dragOverHidden = columnId;
+    dnd.clearDragOver();
+  }
+
+  function onHiddenDragLeave(e: DragEvent): void {
+    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) dragOverHidden = null;
+  }
+
+  // A card dropped on a folded column brings the column back and lands in it.
+  function onHiddenDrop(e: DragEvent, columnId: string): void {
+    dragOverHidden = null;
+    dnd.onDrop(e, columnId);
+    show(columnId);
+  }
+
+  return {
+    get hiddenSet() {
+      return hiddenSet;
+    },
+    get railOpen() {
+      return railOpen;
+    },
+    set railOpen(value: boolean) {
+      railOpen = value;
+    },
+    get dragOverHidden() {
+      return dragOverHidden;
+    },
+    set dragOverHidden(value: string | null) {
+      dragOverHidden = value;
+    },
+    collapsing,
+    expanding,
+    leaving,
+    hide,
+    show,
+    showAll,
+    onHiddenDragOver,
+    onHiddenDragLeave,
+    onHiddenDrop,
+  };
+}
+
+export type KanbanRailState = ReturnType<typeof createKanbanRailState>;

package/src/work/kanban-types.ts

@@ -56,8 +56,10 @@ export type KanbanColumnContext = {
   capped: boolean;
   /** Fold the column into the hidden rail. Needs `hidden` or `onHiddenChange` on the board. */
   hide: () => void;
-  /** Lift the `limit` so every card shows. */
+  /** Open the fold so every card shows. */
   expand: () => void;
+  /** Shut the fold back down to `limit`. */
+  collapse: () => void;
 };
 
 /** The default header renderer when no `columnHeader` snippet is given. */