@heyramzi/ui 2.21.1 → 2.22.1

package/dist/components/list-page/toolbar-density.js

@@ -0,0 +1,26 @@
+import { getContext, setContext } from "svelte";
+// WHY context: the shell owns the measurement and 26 pages render their tabs
+// through a snippet, so a prop would be an edit on every page.
+const KEY = Symbol("list-page.toolbar-density");
+export function setToolbarDensity(density) {
+	setContext(KEY, density);
+}
+/** Undefined outside a list-page toolbar, where nothing ever folds. */
+export function getToolbarDensity() {
+	return getContext(KEY);
+}
+/**
+* The width a row needs to sit on one line with every child at its natural
+* size. Read in one synchronous pass, so the browser never paints the probe.
+*/
+// WHY `max-content` on a probe, not the row's own width: the row is sized by
+// its container, so reading it back always says "it fits" (see collapse.ts).
+export function naturalRowWidth(row) {
+	const { width, flexWrap } = row.style;
+	row.style.width = "max-content";
+	row.style.flexWrap = "nowrap";
+	const needed = row.getBoundingClientRect().width;
+	row.style.width = width;
+	row.style.flexWrap = flexWrap;
+	return needed;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.21.1",
+  "version": "2.22.1",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/canvas/ui/canvas-grid.svelte

@@ -16,6 +16,9 @@
 		color?: string;
 	}
 
+	/** x, y, width, height in device pixels. */
+	type Rect = [number, number, number, number];
+
 	// =========================
 	// CONSTANTS
 	// =========================
@@ -58,6 +61,16 @@
 	// Pan redraws every frame, so a tile is built once per size and colour.
 	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- render cache written inside the draw effect, never rendered
 	const tiles = new Map<string, HTMLCanvasElement>();
+	// What the canvas holds now, its origin in device pixels. Plain: only the draw effect reads it.
+	let painted: {
+		zoom: number;
+		ratio: number;
+		fill: string;
+		w: number;
+		h: number;
+		x: number;
+		y: number;
+	} | null = null;
 
 	function dotTile(step: number, radius: number, fill: string) {
 		const key = `${step}:${radius.toFixed(2)}:${fill}`;
@@ -77,21 +90,20 @@
 		return tile;
 	}
 
+	/** Fills the given device-pixel rects with the dots, the grid's origin at `originX`, `originY`. */
 	// fallow-ignore-next-line complexity
-	function draw(
-		element: HTMLCanvasElement,
-		view: { x: number; y: number; zoom: number },
+	function paint(
+		context: CanvasRenderingContext2D,
+		zoom: number,
 		fill: string,
+		originX: number,
+		originY: number,
+		rects: Rect[],
 	) {
-		const context = element.getContext("2d");
-		if (!context) return;
-		context.setTransform(1, 0, 0, 1, 0, 0);
-		context.clearRect(0, 0, element.width, element.height);
-
 		for (let level = 0; level < LEVELS; level++) {
-			const spacing = gap * 2 ** level * view.zoom;
+			const spacing = gap * 2 ** level * zoom;
 			// A coarser level draws bigger dots, so zooming out reads as moving away.
-			const screenRadius = (size / 2) * 2 ** level * view.zoom;
+			const screenRadius = (size / 2) * 2 ** level * zoom;
 			const radius = Math.min(MAX_RADIUS, Math.max(MIN_RADIUS, screenRadius)) * ratio;
 			const last = level === LEVELS - 1;
 			const alpha = last ? 1 : smoothstep(FADE_START, FADE_END, spacing);
@@ -102,16 +114,64 @@
 			const pattern = context.createPattern(dotTile(tileSize, radius / scale, fill), "repeat");
 			if (!pattern) return;
 			pattern.setTransform(
-				new DOMMatrix([scale, 0, 0, scale, view.x * ratio - step / 2, view.y * ratio - step / 2]),
+				new DOMMatrix([scale, 0, 0, scale, originX - step / 2, originY - step / 2]),
 			);
 			context.globalAlpha = alpha;
 			context.fillStyle = pattern;
-			context.fillRect(0, 0, element.width, element.height);
+			for (const [x, y, w, h] of rects) context.fillRect(x, y, w, h);
 			if (alpha >= 0.999) break;
 		}
 		context.globalAlpha = 1;
 	}
 
+	/** The strips a shift of `dx`, `dy` uncovers: a column on one side and a row on the other. */
+	function uncovered(dx: number, dy: number, w: number, h: number): Rect[] {
+		const rects: Rect[] = [];
+		if (dx > 0) rects.push([0, 0, dx, h]);
+		if (dx < 0) rects.push([w + dx, 0, -dx, h]);
+		if (dy > 0) rects.push([0, 0, w, dy]);
+		if (dy < 0) rects.push([0, h + dy, w, -dy]);
+		return rects;
+	}
+
+	// A pan moves the pixels already drawn and paints only the strip it uncovered; anything else repaints it all.
+	// fallow-ignore-next-line complexity
+	function draw(
+		element: HTMLCanvasElement,
+		view: { x: number; y: number; zoom: number },
+		fill: string,
+	) {
+		const context = element.getContext("2d");
+		if (!context) return;
+		const { width: w, height: h } = element;
+		const x = view.x * ratio;
+		const y = view.y * ratio;
+		const last = painted;
+		const same =
+			last &&
+			last.zoom === view.zoom &&
+			last.ratio === ratio &&
+			last.fill === fill &&
+			last.w === w &&
+			last.h === h;
+		// Whole pixels only, so the shifted dots stay sharp; the rest waits for the next pan or zoom, never past half a pixel.
+		const dx = same ? Math.round(x - last.x) : 0;
+		const dy = same ? Math.round(y - last.y) : 0;
+		if (same && Math.abs(dx) < w && Math.abs(dy) < h) {
+			if (!dx && !dy) return;
+			context.globalCompositeOperation = "copy";
+			context.drawImage(element, dx, dy);
+			context.globalCompositeOperation = "source-over";
+			painted = { ...last, x: last.x + dx, y: last.y + dy };
+			paint(context, view.zoom, fill, painted.x, painted.y, uncovered(dx, dy, w, h));
+			return;
+		}
+		context.setTransform(1, 0, 0, 1, 0, 0);
+		context.clearRect(0, 0, w, h);
+		painted = { zoom: view.zoom, ratio, fill, w, h, x, y };
+		paint(context, view.zoom, fill, x, y, [[0, 0, w, h]]);
+	}
+
 	// =========================
 	// EFFECTS
 	// =========================

package/src/components/list-page/list-page-shell.svelte

@@ -8,6 +8,7 @@
 	import { pageGutterClass } from "../../lib/layout.js";
 	import { getSectionHost } from "./section-host.js";
 	import SectionRuns from "../segmented/section-runs.svelte";
+	import { naturalRowWidth, setToolbarDensity } from "./toolbar-density.js";
 	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
 	// =========================
@@ -67,6 +68,16 @@
 	// =========================
 	// Null off an app shell, where the toolbar just has no section strip to draw.
 	const section = getSectionHost();
+	let row = $state<HTMLElement>();
+	let tabsBox = $state<HTMLElement>();
+	// True when the row at full size would wrap. The tabs then draw as one
+	// dropdown, the first control with a smaller self that still does its job.
+	let compact = $state(false);
+	setToolbarDensity({
+		get compact() {
+			return compact;
+		},
+	});
 
 	// =========================
 	// DERIVED
@@ -90,6 +101,37 @@
 		if (!hasToolbar) return;
 		return section?.claim();
 	});
+	// One row, never two (Ramzi, 9 Nov 2026): /tasks at 1500px put its status
+	// tabs and actions on a second line under search and filters.
+	// WHY the tabs' full width is remembered: once folded, the row only holds the
+	// dropdown, and a probe of it would say the full strip fits when it doesn't.
+	$effect(() => {
+		if (!row) return;
+		const el = row;
+		let fullTabs = 0;
+		let frame = 0;
+		const measure = () => {
+			frame = 0;
+			const needed = naturalRowWidth(el);
+			const tabs = tabsBox?.getBoundingClientRect().width ?? 0;
+			if (!compact) fullTabs = tabs;
+			const full = compact ? needed - tabs + fullTabs : needed;
+			compact = full > el.clientWidth + 0.5;
+		};
+		// A frame's delay folds a burst of resizes into one probe and keeps the
+		// observer from looping on its own state change.
+		const schedule = () => (frame ||= requestAnimationFrame(measure));
+		const observer = new ResizeObserver(schedule);
+		observer.observe(el);
+		for (const child of el.children) observer.observe(child);
+		// Scheduled, not called: a direct call would make this effect track
+		// `compact` and rerun on every fold, dropping the remembered width.
+		schedule();
+		return () => {
+			observer.disconnect();
+			cancelAnimationFrame(frame);
+		};
+	});
 	// The shared gutter from `lib/layout.ts`. A typed one put the search field
 	// 8px left of the section tabs above it.
 	let outerClass = $derived(
@@ -127,7 +169,16 @@
 			<div
 				class="@container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-card/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-card/70"
 			>
-				<div class={cn("flex flex-wrap items-center gap-2", toolbarClass)}>
+				<!-- Folded and still short of room, the row stops wrapping and the
+				     filters strip scrolls, since it's the one part that already can. -->
+				<div
+					bind:this={row}
+					class={cn(
+						"flex flex-wrap items-center gap-2",
+						compact && "@3xl/toolbar:flex-nowrap",
+						toolbarClass,
+					)}
+				>
 					<!-- The section tabs lead: which page comes before which slice of it.
 					     One row replaces two rows that held four controls. -->
 					{#if section?.strip}
@@ -148,10 +199,14 @@
 							class={cn(
 								"order-2 flex min-w-0 flex-wrap items-center gap-2 @3xl/toolbar:order-3",
 								hasLeading ? "@3xl/toolbar:ms-auto" : "flex-1",
+								compact && "@3xl/toolbar:shrink-0",
 							)}
 						>
 							{#if tabs}
-								<div class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}>
+								<div
+									bind:this={tabsBox}
+									class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}
+								>
 									{@render tabs()}
 								</div>
 							{/if}

package/src/components/list-page/toolbar-density.ts

@@ -0,0 +1,38 @@
+import { getContext, setContext } from "svelte";
+
+/**
+ * Whether the list-page toolbar has run out of room. `ListPageShell` measures
+ * its row and sets this; a control inside it reads it and draws a smaller self.
+ */
+export interface ToolbarDensity {
+  readonly compact: boolean;
+}
+
+// WHY context: the shell owns the measurement and 26 pages render their tabs
+// through a snippet, so a prop would be an edit on every page.
+const KEY = Symbol("list-page.toolbar-density");
+
+export function setToolbarDensity(density: ToolbarDensity): void {
+  setContext(KEY, density);
+}
+
+/** Undefined outside a list-page toolbar, where nothing ever folds. */
+export function getToolbarDensity(): ToolbarDensity | undefined {
+  return getContext<ToolbarDensity | undefined>(KEY);
+}
+
+/**
+ * The width a row needs to sit on one line with every child at its natural
+ * size. Read in one synchronous pass, so the browser never paints the probe.
+ */
+// WHY `max-content` on a probe, not the row's own width: the row is sized by
+// its container, so reading it back always says "it fits" (see collapse.ts).
+export function naturalRowWidth(row: HTMLElement): number {
+  const { width, flexWrap } = row.style;
+  row.style.width = "max-content";
+  row.style.flexWrap = "nowrap";
+  const needed = row.getBoundingClientRect().width;
+  row.style.width = width;
+  row.style.flexWrap = flexWrap;
+  return needed;
+}

package/src/components/segmented/segmented-filter.svelte

@@ -15,6 +15,10 @@
 	import { segmentedTriggerClass } from "./segmented.js";
 	import { Icon } from "../icon/index.js";
 	import { Mark } from "../mark/index.js";
+	import { CaretDown } from "phosphor-svelte";
+	import { Picker } from "../picker/index.js";
+	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+	import { getToolbarDensity } from "../list-page/toolbar-density.js";
 
 	// =========================
 	// TYPES
@@ -87,6 +91,20 @@
 		),
 	);
 
+	// Inside a list-page toolbar that ran out of room, the strip folds into one
+	// dropdown that names the current option. See `ListPageShell`.
+	const density = getToolbarDensity();
+	let folded = $derived(density?.compact === true);
+	let current = $derived(merged.find((option) => option.value === value) ?? merged[0]);
+	let pickerOptions = $derived(
+		merged.map((option) => ({
+			value: option.value,
+			label: option.label,
+			hint: option.count != null ? String(option.count) : undefined,
+			icon: option.icon,
+		})),
+	);
+
 	function pick(next: T) {
 		value = next;
 		onValueChange?.(next);
@@ -98,53 +116,71 @@
 <!-- =========================== -->
 <!-- WHY scroll, not wrap: it's one object. Past `max` the tail collapses into
      a menu first, so scrolling is the last resort. -->
-<div
-	class={cn("no-scrollbar flex max-w-full min-w-0 overflow-x-auto", className)}
-	role="group"
-	aria-label={ariaLabel}
->
-	<SegmentedTrack fill={block}>
-		{#each split.visible as option (option.value)}
-			{@const active = value === option.value}
-			{@const markOnly = iconOnly && Boolean(option.image || option.icon)}
-			<button
-				type="button"
-				class={segmentedTriggerClass({ fill: block, active })}
-				onclick={() => pick(option.value)}
-				aria-pressed={active}
-				aria-label={markOnly ? option.label : undefined}
-				title={markOnly ? option.label : undefined}
-			>
-				<!-- WHY the mark is drawn here, not by `Segment`: `Segment` always
+{#if folded && current}
+	<Picker
+		options={pickerOptions}
+		{value}
+		onSelect={pick}
+		triggerClass={toolbarTriggerClass({ className: "group/segment text-foreground" })}
+		triggerLabel={`${ariaLabel}: ${current.label}`}
+		align="end"
+	>
+		{#snippet trigger()}
+			<Segment label={current.label} count={current.count} icon={current.icon} active />
+			<CaretDown
+				class="size-3 shrink-0 opacity-60 transition-transform duration-150 group-data-[state=open]/segment:rotate-180"
+			/>
+		{/snippet}
+	</Picker>
+{:else}
+	<div
+		class={cn("no-scrollbar flex max-w-full min-w-0 overflow-x-auto", className)}
+		role="group"
+		aria-label={ariaLabel}
+	>
+		<SegmentedTrack fill={block}>
+			{#each split.visible as option (option.value)}
+				{@const active = value === option.value}
+				{@const markOnly = iconOnly && Boolean(option.image || option.icon)}
+				<button
+					type="button"
+					class={segmentedTriggerClass({ fill: block, active })}
+					onclick={() => pick(option.value)}
+					aria-pressed={active}
+					aria-label={markOnly ? option.label : undefined}
+					title={markOnly ? option.label : undefined}
+				>
+					<!-- WHY the mark is drawn here, not by `Segment`: `Segment` always
 				     writes the label, and a count or dot beside a bare mark reads as noise. -->
-				{#if markOnly && option.image}
-					<Mark
-						src={option.image}
-						label={option.label}
-						class={cn(
-							"opacity-75 transition-opacity duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-hover/segment:opacity-100",
-							active && "opacity-100",
-						)}
-					/>
-				{:else if markOnly && option.icon}
-					<Icon icon={option.icon} size={16} class="shrink-0" />
-				{:else}
-					<Segment
-						label={option.label}
-						count={option.count}
-						icon={option.icon}
-						image={option.image}
-						done={option.done}
-						badge={option.badge}
-						{active}
-					/>
+					{#if markOnly && option.image}
+						<Mark
+							src={option.image}
+							label={option.label}
+							class={cn(
+								"opacity-75 transition-opacity duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-hover/segment:opacity-100",
+								active && "opacity-100",
+							)}
+						/>
+					{:else if markOnly && option.icon}
+						<Icon icon={option.icon} size={16} class="shrink-0" />
+					{:else}
+						<Segment
+							label={option.label}
+							count={option.count}
+							icon={option.icon}
+							image={option.image}
+							done={option.done}
+							badge={option.badge}
+							{active}
+						/>
+					{/if}
+				</button>
+			{/each}
+			{#snippet after()}
+				{#if split.hidden.length > 0}
+					<SegmentedOverflow items={split.hidden} onSelect={pick} label={moreLabel} fill={block} />
 				{/if}
-			</button>
-		{/each}
-		{#snippet after()}
-			{#if split.hidden.length > 0}
-				<SegmentedOverflow items={split.hidden} onSelect={pick} label={moreLabel} fill={block} />
-			{/if}
-		{/snippet}
-	</SegmentedTrack>
-</div>
+			{/snippet}
+		</SegmentedTrack>
+	</div>
+{/if}