@heyramzi/ui 3.0.0 → 3.2.0

package/src/slides/Slide.svelte

@@ -152,19 +152,19 @@
 			transition-delay: 0s;
 		}
 
-		/* The overview shows every slide. They all leave the stack at once and settle in turn, later ones slower. */
-		:global(.deck[data-view="overview"]) .slide {
+		/*
+		 * The overview shows every slide. Opening and closing move them as one rigid grid, like a
+		 * camera pulling back or pushing in, so no slide gets its own delay.
+		 */
+		:global(.deck[data-view="overview"]) .slide,
+		:global(.deck[data-zoom]) .slide {
 			visibility: visible;
+			transition-delay: 0s;
 		}
-		:global(.deck[data-morphing]) .slide {
+		:global(.deck[data-zoom="run"]) .slide {
 			transition:
-				visibility 0s linear calc(var(--deck-t-morph) + 10 * var(--deck-stagger)),
-				transform calc(var(--deck-t-morph) + min(var(--i), 10) * var(--deck-stagger))
-					var(--deck-ease);
-		}
-		/* Opening shows the slides at once, so only closing waits before hiding them. */
-		:global(.deck[data-morphing][data-view="overview"]) .slide {
-			transition-delay: 0s;
+				visibility 0s,
+				transform var(--deck-t-zoom) var(--deck-ease);
 		}
 
 		.slide__surface {
@@ -178,11 +178,17 @@
 			font-family: var(--deck-font);
 			animation: var(--deck-t-slide) var(--deck-ease) backwards;
 		}
-		:global(.deck[data-view="overview"]) .slide__surface {
+		/* Framed on one slide the grid looks like that slide, so it keeps a slide's square corners. */
+		:global(.deck[data-view="overview"]:not([data-zoom="hold"])) .slide__surface {
 			/* Design px, so divide by the scale to get the same corner on every thumbnail. */
 			border-radius: calc(10px / var(--slide-scale, 1));
 			box-shadow: 0 0 0 calc(1px / var(--slide-scale, 1)) var(--deck-line);
 		}
+		:global(.deck[data-zoom="run"]) .slide__surface {
+			transition:
+				border-radius var(--deck-t-zoom) var(--deck-ease),
+				box-shadow var(--deck-t-zoom) var(--deck-ease);
+		}
 
 		.slide__surface[data-align="center"],
 		.slide__surface[data-align="start"] {

package/src/slides/deck-controller.svelte.ts

@@ -44,16 +44,34 @@ export type ControllerOptions = {
   labels?: Partial<DeckLabels>;
   /** Wraps a position change so a View Transition can snapshot around it. */
   transition?: (update: () => void) => void;
+  /** How long the overview zoom plays, in ms. 0, or left out, swaps at once. */
+  zoomMs?: () => number;
 };
 
+/**
+ * The overview zoom while it plays. `index` is the slide the camera frames. `framed` puts that
+ * slide in its full-size spot with the grid around it, and `running` lets the boxes transition.
+ */
+export type Zoom = { index: number; framed: boolean; running: boolean };
+
 /** Height the controls bar takes at the bottom of the overview, in px. */
 const CONTROLS_ROOM = 56;
 
-/** How long the overview morph flag stays up, a little past the longest stagger. */
-const MORPH_MS = 900;
-
 const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
+/**
+ * Where `cell` lands when the camera moves `target` onto `fit`. Every box shares one scale and
+ * shift, and a transform tween is linear in both, so the grid stays rigid while it zooms.
+ */
+function frame(cell: Box, target: Box, fit: Box): Box {
+  const k = fit.scale / target.scale;
+  return {
+    x: fit.x + (cell.x - target.x) * k,
+    y: fit.y + (cell.y - target.y) * k,
+    scale: cell.scale * k,
+  };
+}
+
 function isEditable(el: HTMLElement) {
   return el.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName);
 }
@@ -71,12 +89,13 @@ export class DeckController {
   /** The highlighted thumbnail in the overview, as an index among the visible slides. */
   cursor = $state(0);
   direction = $state<1 | -1>(1);
-  morphing = $state(false);
+  zoom = $state<Zoom | null>(null);
   size = $state<Size>({ w: 0, h: 0 });
 
   readonly options!: ControllerOptions;
   #listeners = new Set<Listener>();
   #timer: ReturnType<typeof setTimeout> | undefined;
+  #frame = 0;
 
   constructor(options: ControllerOptions) {
     this.options = options;
@@ -116,8 +135,13 @@ export class DeckController {
 
   /** Where slide `index` sits right now: centred to fit, or in its overview cell. */
   boxOf(index: number): Box | undefined {
-    if (!this.overview) return this.fit;
-    return this.grid.boxes[this.visible.indexOf(index)];
+    const zoom = this.zoom;
+    const cell = this.grid.boxes[this.visible.indexOf(index)];
+    if (zoom?.framed) {
+      const target = this.grid.boxes[this.visible.indexOf(zoom.index)];
+      return cell && target ? frame(cell, target, this.fit) : this.fit;
+    }
+    return this.overview || zoom ? cell : this.fit;
   }
 
   register(entry: SlideEntry): () => void {
@@ -137,7 +161,7 @@ export class DeckController {
   }
 
   mount(): () => void {
-    return () => clearTimeout(this.#timer);
+    return () => this.#stopZoom();
   }
 
   /** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
@@ -150,14 +174,16 @@ export class DeckController {
     this.options.step = position.step;
   }
 
-  commit(target: Position | null, source: Source = "local") {
+  /** `animate: false` skips the slide transition, for a move the overview zoom already shows. */
+  commit(target: Position | null, source: Source = "local", animate = true) {
     if (!target) return;
     const from = this.position;
     const to = settle(this.slides, target);
     if (to.index === from.index && to.step === from.step) return;
     this.direction = to.index >= from.index ? 1 : -1;
     const apply = () => this.#write(to);
-    if (to.index !== from.index && this.options.transition) this.options.transition(apply);
+    if (animate && to.index !== from.index && this.options.transition)
+      this.options.transition(apply);
     else apply();
     for (const listener of this.#listeners) listener(to, source);
   }
@@ -174,25 +200,45 @@ export class DeckController {
     this.commit({ index, step }, source);
   }
 
+  /**
+   * Opening zooms the camera out from the current slide to the whole grid. Closing zooms into
+   * the current slide, so `select` moves there first.
+   */
   toggleOverview(force?: boolean) {
     const open = force ?? !this.overview;
     if (open === this.overview) return;
-    if (open) this.cursor = Math.max(0, this.visible.indexOf(this.position.index));
+    const index = this.position.index;
+    if (open) this.cursor = Math.max(0, this.visible.indexOf(index));
     this.view = open ? "overview" : "slide";
-    this.#morph();
+    this.#stopZoom();
+    const ms = this.options.zoomMs?.() ?? 0;
+    if (ms <= 0 || !this.visible.includes(index)) return;
+
+    /*
+     * Each way paints its start state first and moves on a later frame. Moved in the same
+     * flush, a style read in between (the overview handing focus back) commits the boxes
+     * before the transition rule is on, and the zoom jumps to its end.
+     */
+    this.zoom = { index, framed: open, running: !open };
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = requestAnimationFrame(() => {
+        this.zoom = { index, framed: !open, running: true };
+        this.#timer = setTimeout(() => this.#stopZoom(), ms);
+      });
+    });
   }
 
   /** Leaves the overview on slide `index`. Picking the current slide keeps its step. */
   select(index: number) {
-    this.toggleOverview(false);
     const keep = index === this.position.index;
-    this.go(index, keep ? this.position.step : 0);
+    this.commit({ index, step: keep ? this.position.step : 0 }, "local", false);
+    this.toggleOverview(false);
   }
 
-  #morph() {
-    this.morphing = true;
+  #stopZoom() {
     clearTimeout(this.#timer);
-    this.#timer = setTimeout(() => (this.morphing = false), MORPH_MS);
+    cancelAnimationFrame(this.#frame);
+    this.zoom = null;
   }
 
   #moveCursor(to: number) {

package/src/slides/layout.ts

@@ -25,7 +25,8 @@ function scaleFor(
 ): number {
   const rows = Math.ceil(count / cols);
   const byWidth = (view.w - 2 * pad - (cols - 1) * gap) / cols / canvas.w;
-  const byHeight = (view.h - 2 * pad - (rows - 1) * gap) / rows / canvas.h;
+  /* Every row, the last too, keeps a gap under it for its numbers. */
+  const byHeight = (view.h - 2 * pad - rows * gap) / rows / canvas.h;
   return Math.min(byWidth, byHeight);
 }
 
@@ -47,7 +48,7 @@ export function gridBoxes(view: Size, canvas: Canvas, count: number): Grid {
   const cellH = canvas.h * scale;
   const rows = Math.ceil(count / cols);
   const left = (view.w - (cols * cellW + (cols - 1) * gap)) / 2;
-  const top = (view.h - (rows * cellH + (rows - 1) * gap)) / 2;
+  const top = (view.h - rows * (cellH + gap)) / 2;
 
   const boxes = Array.from({ length: count }, (_, i) => ({
     x: left + (i % cols) * (cellW + gap),

package/src/slides/theme.css

@@ -2,7 +2,8 @@
 
 /*
  * Everything global to a deck, in design px since the whole canvas scales, and in flat
- * hex because Chromium's PDF pipeline shifts oklch.
+ * hex because Chromium's PDF pipeline shifts oklch. The accent comes from the host app's
+ * `--primary`, which is often oklch, so it goes through `color-mix(in srgb)` to land as sRGB.
  */
 
 @layer components {
@@ -12,8 +13,30 @@
 
     --deck-bg: light-dark(#f2f1ec, #0e1014);
     --deck-fg: light-dark(#15171b, #f3f1ea);
-    --deck-accent: light-dark(#3e6b00, #c8f15a);
-    --deck-on-accent: light-dark(#f6f6f0, #0e1014);
+    /* Without a `--primary` the accent is the deck's own ink, so nothing ships a colour the app never chose. */
+    /*
+     * `--primary` follows the page's theme and the deck sets its own scheme: a dark deck on a
+     * light page got the page's dark primary on a dark slide (2.7:1). The brand pair is picked
+     * by the deck's scheme; `--primary` is the fallback for an app without the kit palette.
+     */
+    --deck-accent: color-mix(
+      in srgb,
+      light-dark(
+          var(--brand-primary, var(--primary, #15171b)),
+          var(--brand-primary-on-dark, var(--primary, #f3f1ea))
+        )
+        100%,
+      #000
+    );
+    --deck-on-accent: color-mix(
+      in srgb,
+      light-dark(
+          var(--brand-primary-foreground, var(--primary-foreground, #f6f6f0)),
+          var(--brand-primary-foreground-on-dark, var(--primary-foreground, #0e1014))
+        )
+        100%,
+      #000
+    );
     --deck-muted: color-mix(in srgb, var(--deck-fg) 66%, transparent);
     --deck-line: color-mix(in srgb, var(--deck-fg) 14%, transparent);
     --deck-surface: color-mix(in srgb, var(--deck-fg) 6%, transparent);
@@ -32,6 +55,8 @@
 
     --deck-t-slide: var(--duration-fast, 250ms);
     --deck-t-morph: var(--duration-slow, 300ms);
+    /* The overview zoom moves the whole canvas, so it takes the overlay length, not the UI ceiling. */
+    --deck-t-zoom: var(--duration-overlay, 500ms);
     --deck-t-quick: var(--duration-quick, 150ms);
     --deck-stagger: var(--duration-stagger, 40ms);
     --deck-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
@@ -124,8 +149,12 @@
     animation-name: deck-zoom;
   }
 
-  .deck[data-morphing] .slide__surface {
-    animation: none !important;
+  /*
+   * The zoom already shows the slide arriving, so its enter animation finishes at once. A
+   * 0s duration, not `animation: none`, which would replay the enter when the zoom ends.
+   */
+  .deck[data-zoom] .slide__surface {
+    animation-duration: 0s !important;
   }
 
   /* A morph runs on the whole page, so it gets the deck's timing while it plays. */

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)}