@heyramzi/ui 3.1.0 → 3.3.0

package/src/shadcn/pagination/pagination.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		...restProps
+	}: PaginationPrimitive.RootProps = $props();
+</script>
+
+<PaginationPrimitive.Root
+	bind:ref
+	bind:page
+	role="navigation"
+	aria-label="pagination"
+	data-slot="pagination"
+	{count}
+	{perPage}
+	{siblingCount}
+	class={cn("mx-auto flex w-full justify-center", className)}
+	{...restProps}
+/>

package/src/shadcn/pagination/pagination.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+declare const $$Component: import("svelte").Component<PaginationPrimitive.RootProps, {}, "ref" | "page">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/Controls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Toolbar } from "bits-ui";
 	import type { DeckController } from "./deck-controller.svelte.js";
 
 	interface Props {
@@ -26,44 +27,46 @@
 	disabled = false,
 	pressed?: boolean,
 )}
-	<button
-		type="button"
-		class="deck__button"
-		{onclick}
-		{disabled}
-		aria-label={label}
-		aria-pressed={pressed}
-	>
-		<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
-			<path
-				d={icons[icon]}
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.75"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-		</svg>
-	</button>
+	<Toolbar.Button {onclick} {disabled} aria-label={label} aria-pressed={pressed}>
+		{#snippet child({ props })}
+			<button {...props} class="deck__button">
+				<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+					<path
+						d={icons[icon]}
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.75"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</button>
+		{/snippet}
+	</Toolbar.Button>
 {/snippet}
 
-<div class="deck__controls deck__chrome">
-	{@render button("prev", deck.labels.previous, () => deck.prev(), deck.atStart)}
-	<span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
-	{@render button("next", deck.labels.next, () => deck.next(), deck.atEnd)}
-	<span class="deck__divider" aria-hidden="true"></span>
-	{@render button(
-		"overview",
-		deck.labels.overview,
-		() => deck.toggleOverview(),
-		false,
-		deck.overview,
-	)}
-	{#if onPresenter}
-		{@render button("presenter", deck.labels.presenter, onPresenter)}
-	{/if}
-	{@render button("fullscreen", deck.labels.fullscreen, onFullscreen)}
-</div>
+<!-- The arrows are the toolbar's while a control has focus, so they move along it, not the deck. -->
+<Toolbar.Root>
+	{#snippet child({ props })}
+		<div {...props} class="deck__controls deck__chrome">
+			{@render button("prev", deck.labels.previous, () => deck.prev(), deck.atStart)}
+			<span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
+			{@render button("next", deck.labels.next, () => deck.next(), deck.atEnd)}
+			<span class="deck__divider" aria-hidden="true"></span>
+			{@render button(
+				"overview",
+				deck.labels.overview,
+				() => deck.toggleOverview(),
+				false,
+				deck.overview,
+			)}
+			{#if onPresenter}
+				{@render button("presenter", deck.labels.presenter, onPresenter)}
+			{/if}
+			{@render button("fullscreen", deck.labels.fullscreen, onFullscreen)}
+		</div>
+	{/snippet}
+</Toolbar.Root>
 
 <style>
 	@layer theme, base, components, utilities;

package/src/slides/Deck.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import "./theme.css";
+	import { Progress } from "bits-ui";
 	import { flushSync, onMount, setContext, untrack } from "svelte";
 	import { attachBridge, attachChannel, attachUrlSync } from "./bridges.js";
 	import Controls from "./Controls.svelte";
@@ -205,17 +206,19 @@
 	</div>
 
 	{#if progress}
-		<div
-			class="deck__progress deck__chrome"
-			role="progressbar"
+		<Progress.Root
+			min={1}
+			max={deck.ordinal.of}
+			value={deck.ordinal.n}
 			aria-label={deck.labels.progress}
-			aria-valuemin="1"
-			aria-valuemax={deck.ordinal.of}
-			aria-valuenow={deck.ordinal.n}
 			aria-valuetext={deck.labels.slide(deck.ordinal.n, deck.ordinal.of)}
 		>
-			<div class="deck__progress-fill" style:transform="scaleX({deck.progress})"></div>
-		</div>
+			{#snippet child({ props })}
+				<div {...props} class="deck__progress deck__chrome">
+					<div class="deck__progress-fill" style:transform="scaleX({deck.progress})"></div>
+				</div>
+			{/snippet}
+		</Progress.Root>
 	{/if}
 
 	{#if controls}

package/src/thread/thread.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import { Toggle } from "bits-ui";
 	import { ArrowBendDownRight, Check, MapPin, PencilSimple, Trash } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
 	import { focusAfterRender } from "../lib/focus.js";
@@ -338,14 +339,20 @@
 			{labels.title}
 		</h2>
 		{#if resolved > 0}
-			<Button
-				variant="ghost"
-				size="sm"
-				aria-expanded={showResolved}
-				onclick={() => (showResolved = !showResolved)}
-			>
-				{showResolved ? labels.hideResolved : fillCount(labels.showResolved, resolved)}
-			</Button>
+			<!-- A filter on the list, so it reports pressed, not expanded. The wash it had as an
+			     expanded ghost button moves to aria-pressed. -->
+			<Toggle.Root bind:pressed={showResolved}>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="ghost"
+						size="sm"
+						class="aria-pressed:bg-foreground/6 aria-pressed:text-foreground"
+					>
+						{showResolved ? labels.hideResolved : fillCount(labels.showResolved, resolved)}
+					</Button>
+				{/snippet}
+			</Toggle.Root>
 		{/if}
 	</div>
 

package/src/work/detail/task-detail.svelte

@@ -159,7 +159,7 @@
 								variant="text"
 								onclick={startTitle}
 								disabled={!onTitleChange}
-								aria-label={labels.editTitle}
+								aria-label="{labels.editTitle}: {title}"
 								class={cn(
 									"group -mx-2 -my-1 px-2 py-1 text-2xl leading-tight font-semibold tracking-tight disabled:opacity-100",
 									!onTitleChange && "hover:bg-transparent",

package/src/work/gantt/gantt-task-row.svelte

@@ -140,9 +140,8 @@
 			</button>
 		{:else if !row.own}
 			<!-- A parent with no dates of its own: the span of what is below it. Not draggable. -->
-			<div
-				role="button"
-				tabindex="0"
+			<button
+				type="button"
 				aria-label="{title}, {describe(span)}"
 				title="{title}, {describe(span)}"
 				class={cn(
@@ -155,11 +154,9 @@
 				style:width="{barWidth(span, layout)}px"
 				style:height="{Math.max(layout.rowHeight - 24, 10)}px"
 				onclick={() => onSelect?.(row.id)}
-				onkeydown={(e) =>
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), onSelect?.(row.id))}
 				onpointerenter={() => onHover(row.id, true)}
 				onpointerleave={() => onHover(row.id, false)}
-			></div>
+			></button>
 		{:else}
 			<GanttBar
 				id={row.id}

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

@@ -28,6 +28,7 @@
 	import InboxTraceView from "./inbox-trace.svelte";
 	import { TagChip } from "../../components/chip/index.js";
 	import { workLooks } from "../../components/work-parts/looks.js";
+	import { measureClamp } from "../../record/measure-clamp.js";
 	import { FolderSimple } from "phosphor-svelte";
 	import { Copied } from "../../components/copy/copied.svelte.js";
 	import type { InboxDraftEdits, InboxItem, InboxVerdict } from "./inbox-types.js";
@@ -68,10 +69,7 @@
 	// for a link the host already shows.
 	let hasTrace = $derived(item.trace.evidence.length > 0 || !!why);
 	let expanded = $state(false);
-	let longCommand = $derived(
-		!!facts.command &&
-			(facts.command.text.length > 240 || facts.command.text.split("\n").length > 3),
-	);
+	let commandCut = $state(false);
 
 	let pickedDraft = $state<string>();
 	let edits = $state<InboxDraftEdits>({});
@@ -210,13 +208,17 @@
 						<!-- The padding sits on a wrapper: on the clamped box itself, the 4th line showed through it. -->
 						<div class={cn(workLooks.inset, "w-full px-2.5 py-2")}>
 							<pre
+								{@attach measureClamp(
+									() => expanded,
+									(cut) => (commandCut = cut),
+								)}
 								class={cn(
 									"text-foreground font-mono text-xs leading-5 break-words whitespace-pre-wrap",
 									!expanded && "line-clamp-3",
 								)}><span class="text-muted-foreground select-none"
 									>{facts.command.tool} </span>{facts.command.text}</pre>
 						</div>
-						{#if longCommand}
+						{#if commandCut || expanded}
 							<button
 								type="button"
 								class="text-muted-foreground hover:text-foreground text-xs underline-offset-2 hover:underline"

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. */