@heyramzi/ui 3.1.0 → 3.2.0

package/src/work/inbox/inbox-trace.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Reasoning, ReasoningContent, ReasoningTrigger } from "../../ai/reasoning/index.js";
+	import { Brain } from "phosphor-svelte";
+	import * as Trace from "../../shadcn/trace/index.js";
 	import type { InboxTrace } from "./inbox-types.js";
 
 	interface Props {
@@ -18,13 +19,16 @@
 	);
 </script>
 
-<!-- WHY the shared Reasoning and not a local disclosure: it is already the
-     collapsed-by-default "how the agent got here" pattern, with the same chevron. -->
-<Reasoning>
-	<ReasoningTrigger class="w-auto">
-		<span>Trace{count > 0 ? ` · ${count} ${count === 1 ? "quote" : "quotes"}` : ""}</span>
-	</ReasoningTrigger>
-	<ReasoningContent>
+<Trace.Collapsible class="text-sm">
+	<Trace.CollapsibleTrigger class="gap-2">
+		<Trace.Line>
+			<Trace.Icon><Brain aria-hidden="true" /></Trace.Icon>
+			<Trace.Title
+				>Trace{count > 0 ? ` · ${count} ${count === 1 ? "quote" : "quotes"}` : ""}</Trace.Title
+			>
+		</Trace.Line>
+	</Trace.CollapsibleTrigger>
+	<Trace.CollapsibleContent class="mt-3 mb-0 ml-0 border-l-2 pr-0 pl-3">
 		<div class="flex flex-col gap-3">
 			{#if label || trace.source.href}
 				<p class="text-foreground">
@@ -54,5 +58,5 @@
 				<p><span class="text-foreground font-medium">Why:</span> {reasoning}</p>
 			{/if}
 		</div>
-	</ReasoningContent>
-</Reasoning>
+	</Trace.CollapsibleContent>
+</Trace.Collapsible>

package/src/work/kanban-board.svelte

@@ -14,6 +14,7 @@
 		type KanbanColumnView,
 	} from "./kanban-board-state.svelte.js";
 	import { Button } from "../shadcn/button/index.js";
+	import * as Collapsible from "../shadcn/collapsible/index.js";
 	import { workLooks } from "../components/work-parts/looks.js";
 	import type {
 		KanbanCardContext,
@@ -278,33 +279,47 @@
 			</div>
 		{/if}
 
-		{#if showTail}
-			<!-- The tail sits shut in a 0fr row, so opening and closing animate its height. -->
-			<div class="kanban-fold" data-open={open} inert={!open}>
-				<div class="kanban-fold-inner" role="list">
-					{#each tail as item, index (getId(item))}
-						{@render card(column, item, head.length + index, list)}
-					{/each}
-				</div>
-			</div>
-		{/if}
+		<!-- The root renders no element, so the fold and its button stay items of the column's flex well. -->
+		<Collapsible.Root
+			bind:open={() => open, (next) => (next ? board.expand(column.id) : board.collapse(column.id))}
+		>
+			{#snippet child()}
+				{#if showTail}
+					<!-- The tail sits shut in a 0fr row, so opening and closing animate its height. -->
+					<Collapsible.Content forceMount>
+						{#snippet child({ props })}
+							<div {...props} class="kanban-fold" data-open={open} inert={!open}>
+								<div class="kanban-fold-inner" role="list">
+									{#each tail as item, index (getId(item))}
+										{@render card(column, item, head.length + index, list)}
+									{/each}
+								</div>
+							</div>
+						{/snippet}
+					</Collapsible.Content>
+				{/if}
 
-		{#if dnd.showIndicatorEnd(column.id) && board.idAt(shown, shown.length - 1) !== dnd.draggedId}
-			{@render dropSlot()}
-		{/if}
+				{#if dnd.showIndicatorEnd(column.id) && board.idAt(shown, shown.length - 1) !== dnd.draggedId}
+					{@render dropSlot()}
+				{/if}
 
-		{#if tail.length > 0 || open}
-			<Button
-				variant="ghost"
-				size="sm"
-				aria-expanded={open}
-				onclick={() => (open ? board.collapse(column.id) : board.expand(column.id))}
-				class="shrink-0 justify-start gap-1.5 px-2 text-xs font-normal text-muted-foreground"
-			>
-				<KanbanFoldChevron {open} class="size-2.5" />
-				<span class="tabular-nums">{open ? lessLabel : moreLabel(tail.length)}</span>
-			</Button>
-		{/if}
+				{#if tail.length > 0 || open}
+					<Collapsible.Trigger>
+						{#snippet child({ props })}
+							<Button
+								{...props}
+								variant="ghost"
+								size="sm"
+								class="shrink-0 justify-start gap-1.5 px-2 text-xs font-normal text-muted-foreground"
+							>
+								<KanbanFoldChevron {open} class="size-2.5" />
+								<span class="tabular-nums">{open ? lessLabel : moreLabel(tail.length)}</span>
+							</Button>
+						{/snippet}
+					</Collapsible.Trigger>
+				{/if}
+			{/snippet}
+		</Collapsible.Root>
 
 		{#if columnFooter}
 			{@render columnFooter(column, context)}

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

@@ -3,6 +3,7 @@
 	import { CaretDown } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
 	import { Button } from "../shadcn/button/index.js";
+	import * as Collapsible from "../shadcn/collapsible/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";
@@ -21,79 +22,80 @@
 	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 aria-hidden="true" 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}
+<Collapsible.Root bind:open={rail.railOpen} class="kanban-rail flex w-40 shrink-0 flex-col gap-1">
+	<Collapsible.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				variant="ghost"
+				size="sm"
+				class="justify-start px-2 text-xs font-normal text-muted-foreground"
+			>
+				<span
 					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",
+						"size-2.5 transition-transform duration-fast ease-smooth-out motion-reduce:transition-none [&>svg]:size-full",
+						!rail.railOpen && "-rotate-90",
 					)}
-					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)}
+					aria-hidden="true"><CaretDown aria-hidden="true" weight="bold" /></span
 				>
-					<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}
+				{hiddenLabel}
+			</Button>
+		{/snippet}
+	</Collapsible.Trigger>
 
-			{#if columns.length > 1}
+	<Collapsible.Content 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="sm"
-					onclick={rail.showAll}
-					class="mt-1 justify-start text-xs font-normal text-muted-foreground"
+					size="lg"
+					onclick={() => rail.show(column.id)}
+					class="w-full justify-start gap-2 text-xs text-muted-foreground"
 				>
-					{showAllLabel}
+					{#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>
-			{/if}
-		</div>
-	{/if}
-</div>
+			</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}
+	</Collapsible.Content>
+</Collapsible.Root>
 
 <style>
 	/* Unlayered: the row's transition-[background-color,outline-color] utility would otherwise drop the fade out. */

package/src/work/task-list.svelte

@@ -11,6 +11,7 @@
 	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
 	import { CaretRight } from "phosphor-svelte";
 	import { Button } from "../shadcn/button/index.js";
+	import * as Collapsible from "../shadcn/collapsible/index.js";
 	import GroupHead from "../components/work-parts/group-head.svelte";
 	import { workLooks } from "../components/work-parts/looks.js";
 	import type {
@@ -182,9 +183,10 @@
 		isDroppable: canDrop,
 	});
 
-	function toggle(groupId: string): void {
+	function setOpen(groupId: string, open: boolean): void {
+		if (open !== folded.has(groupId)) return;
 		const next = new Set(folded);
-		if (next.has(groupId)) next.delete(groupId);
+		if (open) next.delete(groupId);
 		else next.add(groupId);
 		folded = next;
 		onCollapsedChange?.([...next]);
@@ -255,134 +257,153 @@
 	{@const open = !folded.has(group.id)}
 	{@const hue = group.hue ?? "var(--color-primary)"}
 	{@const context = { count, active, open, depth, hasChildren: children.length > 0 }}
-	<section
-		aria-label={group.ariaLabel ?? group.label}
-		class={cn(
-			"tl-group group/tl",
-			depth === 0 ? "border-b border-border last:border-b-0" : "border-t border-border/60",
-		)}
-		class:tl-group-active={active}
-		style:--tl-hue={hue}
-		ondragover={children.length ? undefined : (e) => dnd.onColumnDragOver(e, group.id)}
-		ondragleave={children.length ? undefined : dnd.onDragLeave}
-		ondrop={children.length ? undefined : (e) => dnd.onDrop(e, group.id)}
-	>
-		<div
-			class={cn(
-				"hover-row sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm",
-				flat ? "bg-card/90" : "bg-card/90",
-				depth === 0 && (head ? "top-9" : "top-0"),
-			)}
-			style:top={depth > 0 ? `${(head ? 2.25 : 0) + depth * 2.5}rem` : undefined}
-			style:padding-inline-start={depth > 0 ? `${0.75 + depth * 1.25}rem` : undefined}
-		>
-			{#if collapsible}
-				<Button
-					variant="ghost"
-					size="sm"
-					icon
-					aria-expanded={open}
-					aria-label="{open ? 'Fold' : 'Unfold'} {group.label}"
-					onclick={() => toggle(group.id)}
-					class="-ml-1.5 text-muted-foreground"
+	<Collapsible.Root bind:open={() => open, (next) => setOpen(group.id, next)}>
+		{#snippet child({ props })}
+			<section
+				{...props}
+				aria-label={group.ariaLabel ?? group.label}
+				class={cn(
+					"tl-group group/tl",
+					depth === 0 ? "border-b border-border last:border-b-0" : "border-t border-border/60",
+				)}
+				class:tl-group-active={active}
+				style:--tl-hue={hue}
+				ondragover={children.length ? undefined : (e) => dnd.onColumnDragOver(e, group.id)}
+				ondragleave={children.length ? undefined : dnd.onDragLeave}
+				ondrop={children.length ? undefined : (e) => dnd.onDrop(e, group.id)}
+			>
+				<div
+					class={cn(
+						"hover-row sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm",
+						flat ? "bg-card/90" : "bg-card/90",
+						depth === 0 && (head ? "top-9" : "top-0"),
+					)}
+					style:top={depth > 0 ? `${(head ? 2.25 : 0) + depth * 2.5}rem` : undefined}
+					style:padding-inline-start={depth > 0 ? `${0.75 + depth * 1.25}rem` : undefined}
 				>
-					<span
-						class="tl-chevron size-3.5 [&>svg]:size-full"
-						class:tl-chevron-open={open}
-						aria-hidden="true"
-					>
-						<CaretRight aria-hidden="true" weight="bold" />
-					</span>
-				</Button>
-			{/if}
-			{#if groupHeader}
-				{@render groupHeader(group, context)}
-			{:else}
-				<GroupHead
-					label={group.label}
-					{hue}
-					{count}
-					onAdd={onAdd ? () => onAdd(group.id) : undefined}
-					{addLabel}
-				/>
-			{/if}
-			{#if actions}
-				<div class="tl-actions row-action ms-auto flex shrink-0 items-center gap-1">
-					{@render actions(group, context)}
-				</div>
-			{/if}
-		</div>
-
-		<!-- inert: a folded group's rows leave the Tab order and the accessibility tree. -->
-		<div class="tl-fold" class:tl-fold-open={open} inert={!open}>
-			<div class="tl-fold-inner">
-				<div role="list" aria-label={group.label} class="flex flex-col pb-1.5">
-					{#each rows as item, index (getId(item))}
-						{@const id = getId(item)}
-						{@const rowId = `${uid}-row-${encodeURIComponent(id)}`}
-						{@const dropBefore =
-							dnd.showIndicatorBefore(group.id, id) &&
-							!dnd.isDragSource(id) &&
-							idAt(rows, index - 1) !== dnd.draggedId}
-						<!-- WHY: a row is a list item that takes focus for the Alt+arrow move; making it a button would hide the list from screen readers. -->
-						<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
-						<div
-							role="listitem"
-							tabindex={draggable ? 0 : undefined}
-							id={rowId}
-							data-task-row={id}
-							aria-label={getLabel?.(item)}
-							aria-labelledby={draggable && !getLabel ? rowId : undefined}
-							aria-describedby={draggable ? hintId : undefined}
-							aria-keyshortcuts={draggable ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
-							draggable={draggable ? "true" : undefined}
-							animate:flip={{ duration: () => durationMs("fast"), easing: cubicOut }}
-							ondragstart={draggable
-								? (e) => {
-										liftDragImage(e);
-										dnd.onDragStart(e, id);
-									}
-								: undefined}
-							ondragend={draggable ? () => dnd.resetDrag() : undefined}
-							ondragover={draggable
-								? (e) => dnd.onItemDragOver(e, group.id, id, idAt(rows, index + 1))
-								: undefined}
-							onkeydown={draggable ? (e) => void onRowKeyDown(e, id) : undefined}
-							style:--tl-i={Math.min(index, STAGGER_CAP)}
-							class={cn(
-								"tl-row relative mx-1.5 outline-none focus-visible:shadow-(--ring-focus)",
-								workLooks.row,
-								workLooks.rowHeight,
-								draggable && "cursor-grab active:cursor-grabbing",
-								dropBefore && "tl-drop-before",
-								dnd.isDragSource(id) && "opacity-40",
-							)}
-						>
-							{@render renderRow(item, { groupId: group.id, index })}
-						</div>
-					{/each}
-
-					{#if dnd.showIndicatorEnd(group.id) && idAt(rows, rows.length - 1) !== dnd.draggedId}
-						<div class="tl-drop-end relative mx-1.5 h-2" aria-hidden="true"></div>
+					{#if collapsible}
+						<Collapsible.Trigger>
+							{#snippet child({ props })}
+								<Button
+									{...props}
+									variant="ghost"
+									size="sm"
+									icon
+									aria-label="{open ? 'Fold' : 'Unfold'} {group.label}"
+									class="-ml-1.5 text-muted-foreground"
+								>
+									<span
+										class="tl-chevron size-3.5 [&>svg]:size-full"
+										class:tl-chevron-open={open}
+										aria-hidden="true"
+									>
+										<CaretRight aria-hidden="true" weight="bold" />
+									</span>
+								</Button>
+							{/snippet}
+						</Collapsible.Trigger>
 					{/if}
-
-					{#if groupFooter}
-						{@render groupFooter(group, context)}
+					{#if groupHeader}
+						{@render groupHeader(group, context)}
+					{:else}
+						<GroupHead
+							label={group.label}
+							{hue}
+							{count}
+							onAdd={onAdd ? () => onAdd(group.id) : undefined}
+							{addLabel}
+						/>
 					{/if}
-
-					{#if rows.length === 0 && children.length === 0 && !active}
-						<p class={cn(workLooks.rowHole, "mx-1.5 px-3 py-3 text-xs text-muted-foreground")}>
-							{emptyLabel}
-						</p>
+					{#if actions}
+						<div class="tl-actions row-action ms-auto flex shrink-0 items-center gap-1">
+							{@render actions(group, context)}
+						</div>
 					{/if}
 				</div>
 
-				{#each children as child (child.id)}
-					{@render section(child, depth + 1)}
-				{/each}
-			</div>
-		</div>
-	</section>
+				<!-- inert: a folded group's rows leave the Tab order and the accessibility tree. -->
+				<Collapsible.Content forceMount>
+					{#snippet child({ props })}
+						<div {...props} class="tl-fold" class:tl-fold-open={open}>
+							<!-- On the inner box: beside the spread Svelte writes inert as an attribute, and
+							     clearing it leaves the rows inert in the unit tests' DOM. -->
+							<div class="tl-fold-inner" inert={!open}>
+								<div role="list" aria-label={group.label} class="flex flex-col pb-1.5">
+									{#each rows as item, index (getId(item))}
+										{@const id = getId(item)}
+										{@const rowId = `${uid}-row-${encodeURIComponent(id)}`}
+										{@const dropBefore =
+											dnd.showIndicatorBefore(group.id, id) &&
+											!dnd.isDragSource(id) &&
+											idAt(rows, index - 1) !== dnd.draggedId}
+										<!-- WHY: a row is a list item that takes focus for the Alt+arrow move; making it a button would hide the list from screen readers. -->
+										<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+										<div
+											role="listitem"
+											tabindex={draggable ? 0 : undefined}
+											id={rowId}
+											data-task-row={id}
+											aria-label={getLabel?.(item)}
+											aria-labelledby={draggable && !getLabel ? rowId : undefined}
+											aria-describedby={draggable ? hintId : undefined}
+											aria-keyshortcuts={draggable ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
+											draggable={draggable ? "true" : undefined}
+											animate:flip={{ duration: () => durationMs("fast"), easing: cubicOut }}
+											ondragstart={draggable
+												? (e) => {
+														liftDragImage(e);
+														dnd.onDragStart(e, id);
+													}
+												: undefined}
+											ondragend={draggable ? () => dnd.resetDrag() : undefined}
+											ondragover={draggable
+												? (e) => dnd.onItemDragOver(e, group.id, id, idAt(rows, index + 1))
+												: undefined}
+											onkeydown={draggable ? (e) => void onRowKeyDown(e, id) : undefined}
+											style:--tl-i={Math.min(index, STAGGER_CAP)}
+											class={cn(
+												"tl-row relative mx-1.5 outline-none focus-visible:shadow-(--ring-focus)",
+												workLooks.row,
+												workLooks.rowHeight,
+												draggable && "cursor-grab active:cursor-grabbing",
+												dropBefore && "tl-drop-before",
+												dnd.isDragSource(id) && "opacity-40",
+											)}
+										>
+											{@render renderRow(item, { groupId: group.id, index })}
+										</div>
+									{/each}
+
+									{#if dnd.showIndicatorEnd(group.id) && idAt(rows, rows.length - 1) !== dnd.draggedId}
+										<div class="tl-drop-end relative mx-1.5 h-2" aria-hidden="true"></div>
+									{/if}
+
+									{#if groupFooter}
+										{@render groupFooter(group, context)}
+									{/if}
+
+									{#if rows.length === 0 && children.length === 0 && !active}
+										<p
+											class={cn(
+												workLooks.rowHole,
+												"mx-1.5 px-3 py-3 text-xs text-muted-foreground",
+											)}
+										>
+											{emptyLabel}
+										</p>
+									{/if}
+								</div>
+
+								{#each children as sub (sub.id)}
+									{@render section(sub, depth + 1)}
+								{/each}
+							</div>
+						</div>
+					{/snippet}
+				</Collapsible.Content>
+			</section>
+		{/snippet}
+	</Collapsible.Root>
 {/snippet}
 
 <div

package/src/work/task-list.svelte.test.ts

@@ -54,9 +54,12 @@ async function settle() {
   flushSync();
 }
 
-// Svelte sets inert as a property, and jsdom doesn't reflect it to the attribute.
+// jsdom doesn't reflect inert between property and attribute, and Svelte sets the attribute
+// when the element also takes a spread (the Collapsible's props), so read both.
 function insideInert(el: HTMLElement | null): boolean {
-  for (let node = el; node; node = node.parentElement) if (node.inert) return true;
+  for (let node = el; node; node = node.parentElement) {
+    if (node.inert || node.hasAttribute("inert")) return true;
+  }
   return false;
 }