@heyramzi/ui 1.53.0 → 1.54.0

package/src/components/section-card/section-card.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "@heyramzi/utils";
+	import * as Card from "../../shadcn/card/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		title: string;
+		/** Controls at the far end of the header. */
+		actions?: Snippet;
+		/** No padding in the body, so a table runs edge to edge under the header. */
+		flush?: boolean;
+		class?: string;
+		children: Snippet;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { title, actions, flush = false, class: className, children }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- WHY a fixed header height: a card with an action in its header and one
+     without sat 12px apart on the same page. -->
+<!-- =========================== -->
+<Card.Root class={cn("gap-0 py-0", className)}>
+	<header class="flex min-h-14 items-center justify-between gap-3 border-b px-4 py-3 sm:px-6">
+		<Card.Title as="h3" class="text-base font-medium">{title}</Card.Title>
+		{#if actions}
+			<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+		{/if}
+	</header>
+	<div class={flush ? "" : "p-4 sm:p-6"}>
+		{@render children()}
+	</div>
+</Card.Root>

package/src/components/section-header/index.ts

@@ -0,0 +1 @@
+export { default as SectionHeader } from "./section-header.svelte";

package/src/components/section-header/section-header.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import SectionLabel from "../list-page/section-label.svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		title: string;
+		/** How many things the section holds. Drawn as a chip next to the title. */
+		count?: number;
+		/** What the count counts, for a screen reader: "lines". */
+		countLabel?: string;
+		/** One line under the title. */
+		description?: string;
+		/** A control at the far end of the row. */
+		actions?: Snippet;
+		/** The heading level. Sections under a page title are 2. */
+		level?: 2 | 3;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { title, count, countLabel = "items", description, actions, level = 2 }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<header class="flex items-end justify-between gap-3">
+	<div class="min-w-0 space-y-1">
+		<svelte:element this={`h${level}`} class="flex items-center gap-2">
+			<SectionLabel>{title}</SectionLabel>
+			{#if count !== undefined}
+				<span
+					class="rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
+					aria-label={`${count} ${countLabel}`}
+				>
+					{count}
+				</span>
+			{/if}
+		</svelte:element>
+		{#if description}
+			<p class="text-sm text-muted-foreground">{description}</p>
+		{/if}
+	</div>
+	{#if actions}
+		<div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+	{/if}
+</header>

package/src/components/section-header/section-header.test.ts

@@ -0,0 +1,25 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import SectionHeader from "./section-header.svelte";
+
+function render(props: Record<string, unknown>) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(SectionHeader, { target, props: { title: "Lines", ...props } });
+  flushSync();
+  return { target, done: () => { void unmount(app); target.remove(); } };
+}
+
+describe("SectionHeader", () => {
+  it("draws the count as a chip a screen reader can name", () => {
+    const { target, done } = render({ count: 3, countLabel: "lines" });
+    expect(target.querySelector("[aria-label='3 lines']")).not.toBeNull();
+    done();
+  });
+
+  it("takes its heading level", () => {
+    const { target, done } = render({ level: 3 });
+    expect(target.querySelector("h3")).not.toBeNull();
+    done();
+  });
+});

package/src/components/segmented/animated-tabs.svelte

@@ -40,7 +40,7 @@
 	// WHY re-declare `value` and `onValueChange`: the primitive types them as a
 	// bare `string`, so fourteen pages cast back to their union. Generic now, the
 	// one narrowing happens here.
-	type Props = Omit<TabsPrimitive.RootProps, "value" | "onValueChange"> & {
+	interface Props extends Omit<TabsPrimitive.RootProps, "value" | "onValueChange"> {
 		tabs: readonly TabDef<T>[];
 		value?: T;
 		onValueChange?: (value: T) => void;
@@ -67,7 +67,7 @@
 		max?: number;
 		// What the menu segment says. Translate at the call site.
 		moreLabel?: string;
-	};
+	}
 
 	let {
 		ref = $bindable(null),

package/src/components/segmented/collapse.test.ts

@@ -47,3 +47,13 @@ describe("splitSegments", () => {
     expect(splitSegments(items, 2, 5).hidden).toEqual([]);
   });
 });
+
+describe("resolveSegmentMax", () => {
+  it("turns none into a limit nothing reaches, so no tail folds", async () => {
+    const { resolveSegmentMax, splitSegments } = await import("./collapse.js");
+    const items = Array.from({ length: 20 }, (_, i) => i);
+    expect(resolveSegmentMax("none")).toBe(Number.POSITIVE_INFINITY);
+    expect(resolveSegmentMax(4)).toBe(4);
+    expect(splitSegments(items, resolveSegmentMax("none"), 15).hidden).toEqual([]);
+  });
+});

package/src/components/segmented/collapse.ts

@@ -37,3 +37,8 @@ export function splitSegments<S>(
     hidden: items.filter((_, i) => i >= slots - 1 && i !== activeIndex),
   };
 }
+
+/** `"none"` draws every segment: the row scrolls sideways instead of folding a tail into a menu. */
+export function resolveSegmentMax(max: number | "none"): number {
+  return max === "none" ? Number.POSITIVE_INFINITY : max;
+}

package/src/components/segmented/segment.svelte

@@ -36,13 +36,13 @@ import { Mark } from "../mark/index.js";
 // =========================
 // TYPES
 // =========================
-type Props = SegmentContent & {
+interface Props extends SegmentContent {
 	/**
 	 * `true`/`false` when the caller owns the state. `"auto"` when bits-ui owns it
 	 * in a `data-state` on the trigger, and the stylesheet answers.
 	 */
 	active?: boolean | "auto";
-};
+}
 
 // =========================
 // PROPS

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

@@ -7,13 +7,13 @@ import Segment from "./segment.svelte";
 import type { TabDef } from "./animated-tabs.svelte";
 import SegmentedTrack from "./segmented-track.svelte";
 import SegmentedOverflow from "./segmented-overflow.svelte";
-import { SEGMENT_MAX, splitSegments } from "./collapse.js";
+import { SEGMENT_MAX, resolveSegmentMax, splitSegments } from "./collapse.js";
 import { segmentedTriggerClass } from "./segmented.js";
 
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// WHY: picks which rows are listed, with no panel of its own. That's a
 	// segmented control, not a tab set.
 
@@ -33,8 +33,9 @@ type Props = {
 	/** Fill the row rather than sit at its natural width. On for the list-page
 	 *  filter strip, off for a segment sitting in a toolbar beside others. */
 	block?: boolean;
-	/** Objects the row may draw before its tail becomes a menu. See `collapse.ts`. */
-	max?: number;
+	/** Objects the row may draw before its tail becomes a menu. See `collapse.ts`.
+	 *  `"none"` never folds. */
+	max?: number | "none";
 	/** What the menu segment says. Translate at the call site. */
 	moreLabel?: string;
 	class?: string;
@@ -70,7 +71,7 @@ let merged = $derived(
 let split = $derived(
 	splitSegments(
 		merged,
-		max,
+		resolveSegmentMax(max),
 		merged.findIndex((option) => option.value === value),
 	),
 );

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

@@ -17,7 +17,7 @@ import { segmentedTriggerClass } from "./segmented.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	// WHY a third component: tabs are a `tablist`, filters a `group` of toggles,
 	// and this goes to sibling pages, so it's a `nav` of links with `aria-current`.
 

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

@@ -18,7 +18,7 @@ import type { SegmentContent } from "./segment.svelte";
 
 // WHY never active: `splitSegments` pulls the current item into a visible slot,
 // so this never fights bits-ui's `data-state="open"`.
-type Props = {
+interface Props {
 	items: readonly (SegmentContent & { value: V })[];
 	onSelect: (value: V) => void;
 	/** What the segment says. Translate at the call site. */

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

@@ -10,7 +10,7 @@ import { slidingPill } from "../../lib/sliding-pill.js";
 // =========================
 // TYPES
 // =========================
-type Props = {
+interface Props {
 	/** Fill the row rather than sit at its natural width. */
 	fill?: boolean;
 	/** `pill`, a bordered well with a travelling highlight, or `underline`, a travelling rule. */
@@ -86,12 +86,17 @@ let {
 	.track :global(.ui-segment[data-state="active"] + .ui-segment)::before,
 	.track :global(.ui-segment[aria-current="page"] + .ui-segment)::before,
 	.track :global(.ui-segment[aria-pressed="true"] + .ui-segment)::before,
-	.track :global([data-slot="tabs-list"]:has(> .ui-segment:last-child[data-state="active"]) + .ui-segment)::before,
-	.track :global(.ui-segment:hover)::before,
-	.track :global(.ui-segment:hover + .ui-segment)::before {
+	.track :global([data-slot="tabs-list"]:has(> .ui-segment:last-child[data-state="active"]) + .ui-segment)::before {
 		opacity: 0;
 	}
 
+	@media (hover: hover) and (pointer: fine) {
+		.track :global(.ui-segment:hover)::before,
+		.track :global(.ui-segment:hover + .ui-segment)::before {
+			opacity: 0;
+		}
+	}
+
 	/* The label's colour lands with the pill, on the same fast step. */
 	.track :global(.ui-segment) {
 		transition:
@@ -169,6 +174,26 @@ let {
 		box-shadow: inset 0 -2px 0 var(--segmented-rule, var(--color-foreground));
 	}
 
+	/* On a coarse pointer the well is 44px and its segments fill it, so the hit area is the strip.
+	   A clipped well can't hold a hit area that hangs outside it. The border becomes a ring drawn
+	   over the segments, and the pill keeps its 2px gap inside that ring. */
+	@media (any-pointer: coarse) {
+		.track[data-variant="pill"]::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			z-index: 2;
+			border: 1px solid var(--color-border);
+			border-radius: inherit;
+			pointer-events: none;
+		}
+
+		.track[data-variant="pill"] .pill {
+			top: 3px;
+			bottom: 3px;
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.pill {
 			transition: opacity var(--duration-quick) var(--ease-smooth-out);

package/src/components/segmented/segmented.test.ts

@@ -7,7 +7,7 @@ describe("segmentedTrackClass", () => {
     for (const variant of ["pill", "underline"] as const) {
       const classes = segmentedTrackClass({ variant }).split(" ");
       expect(classes).toContain("h-7");
-      expect(classes).toContain("any-pointer-coarse:h-10");
+      expect(classes).toContain("any-pointer-coarse:h-11");
     }
   });
 

package/src/components/segmented/segmented.ts

@@ -15,12 +15,12 @@ export const segmentedTrackClass = tv({
   // drew 30px beside a 28px button. One toolbar row came out at five heights.
 
   // WHY no size variant: `sm` drew 24px, and every tab control must share one height.
-  base: "h-7 any-pointer-coarse:h-10 shrink-0 items-stretch",
+  base: "h-7 any-pointer-coarse:h-11 shrink-0 items-stretch",
   variants: {
     // `pill`: a bordered well with a travelling highlight. `underline`: bare
     // labels over one hairline, the active one marked by a rule that travels.
     variant: {
-      pill: "overflow-hidden rounded-lg border border-border p-0.5",
+      pill: "overflow-hidden rounded-lg border border-border p-0.5 any-pointer-coarse:border-0 any-pointer-coarse:px-[3px] any-pointer-coarse:py-0",
       underline: "gap-5 border-b border-border",
     },
     // Fill the row rather than sit at its natural width. For a narrow rail.

package/src/components/star-rating-input/star-rating-input.svelte

@@ -25,7 +25,7 @@ const POP_WINDOW_MS = 350 + 4 * 40;
 import { Star } from "phosphor-svelte";
 import { cn } from "@heyramzi/utils";
 
-type Props = {
+interface Props {
 	/** Current rating value (0 = unrated). */
 	value: number;
 	/** Maximum rating. Defaults to 5. */
@@ -187,8 +187,10 @@ function handleLeave() {
 		box-shadow: 0 0 0 2px var(--color-ring);
 	}
 
-	.hit-button:not(.is-disabled):hover {
-		transform: scale(1.1);
+	@media (hover: hover) and (pointer: fine) {
+		.hit-button:not(.is-disabled):hover {
+			transform: scale(1.1);
+		}
 	}
 
 	.hit-button:not(.is-disabled):active {
@@ -248,9 +250,14 @@ function handleLeave() {
 			transition: none;
 		}
 
-		.hit-button:not(.is-disabled):hover,
 		.hit-button:not(.is-disabled):active {
 			transform: none;
 		}
+
+		@media (hover: hover) and (pointer: fine) {
+			.hit-button:not(.is-disabled):hover {
+				transform: none;
+			}
+		}
 	}
 </style>

package/src/components/table-view/index.ts

@@ -0,0 +1,3 @@
+export { default as TableView } from "./table-view.svelte";
+export type { TableCell } from "./table-view.svelte";
+export type { TableColumn } from "./types.js";

package/src/components/table-view/table-view.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { TableColumn } from "./types.js";
+
+	export type TableCell<Row> = { row: Row; column: TableColumn<Row>; value: unknown; text: string };
+	export type { TableColumn };
+</script>
+
+<script lang="ts" generics="Row extends object">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "@heyramzi/utils";
+	import * as Table from "../../shadcn/table/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		columns: TableColumn<Row>[];
+		rows: Row[];
+		/** What names a row, so a filter keeps its rows in place. */
+		rowKey: (row: Row) => string;
+		/** What the table is, for a screen reader. */
+		label: string;
+		/** A totals row, drawn under the body in the same columns. */
+		footer?: Row;
+		/** Draws a cell its own way. Print `text` for the plain case. */
+		cell?: Snippet<[TableCell<Row>]>;
+		rowClass?: (row: Row) => string | undefined;
+		/** Below this width the table scrolls sideways inside its frame. */
+		minWidth?: string;
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { columns, rows, rowKey, label, footer, cell, rowClass, minWidth = "0", class: className }: Props = $props();
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	const key = (column: TableColumn<Row>) => column.key;
+
+	function textOf(column: TableColumn<Row>, row: Row): string {
+		const value = (row as Record<string, unknown>)[key(column)];
+		if (column.format) return column.format(value, row);
+		return value === null || value === undefined ? "" : String(value);
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#snippet body(row: Row)}
+	{#each columns as column (column.key)}
+		<Table.Cell
+			class={cn(
+				"align-top",
+				column.numeric ? "text-end tabular-nums" : "whitespace-normal",
+				column.muted && "text-muted-foreground",
+			)}
+		>
+			{#if cell}
+				{@render cell({ row, column, value: (row as Record<string, unknown>)[column.key], text: textOf(column, row) })}
+			{:else}
+				{textOf(column, row)}
+			{/if}
+		</Table.Cell>
+	{/each}
+{/snippet}
+
+<div class={cn("overflow-hidden rounded-xl border", className)}>
+	<Table.Root aria-label={label} style={`min-width: ${minWidth}`} class="min-w-0">
+		<Table.Header>
+			<Table.Row>
+				{#each columns as column (column.key)}
+					<Table.Head
+						class={cn("whitespace-normal", column.numeric && "text-end")}
+						style={column.width ? `width: ${column.width}` : undefined}
+					>
+						{column.label}
+					</Table.Head>
+				{/each}
+			</Table.Row>
+		</Table.Header>
+		<Table.Body>
+			{#each rows as row (rowKey(row))}
+				<Table.Row class={rowClass?.(row)}>
+					{@render body(row)}
+				</Table.Row>
+			{/each}
+		</Table.Body>
+		{#if footer}
+			<Table.Footer>
+				<Table.Row>
+					{@render body(footer)}
+				</Table.Row>
+			</Table.Footer>
+		{/if}
+	</Table.Root>
+</div>

package/src/components/table-view/table-view.test.ts

@@ -0,0 +1,53 @@
+import { createRawSnippet, flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import TableView from "./table-view.svelte";
+
+type Row = { id: string; name: string; total: number };
+const rows: Row[] = [
+  { id: "a", name: "Audit", total: 1200 },
+  { id: "b", name: "Build", total: 4800 },
+];
+
+function render(extra: Record<string, unknown> = {}) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(TableView<Row>, {
+    target,
+    props: {
+      label: "Lines",
+      rows,
+      rowKey: (row: Row) => row.id,
+      columns: [
+        { key: "name", label: "Name" },
+        { key: "total", label: "Total", numeric: true, format: (v: unknown) => `$${v}` },
+      ],
+      ...extra,
+    },
+  });
+  flushSync();
+  return { target, done: () => { void unmount(app); target.remove(); } };
+}
+
+describe("TableView", () => {
+  it("names the table and prints each row through its column's format", () => {
+    const { target, done } = render();
+    expect(target.querySelector("table")?.getAttribute("aria-label")).toBe("Lines");
+    const cells = [...target.querySelectorAll("tbody td")].map((td) => td.textContent?.trim());
+    expect(cells).toEqual(["Audit", "$1200", "Build", "$4800"]);
+    done();
+  });
+
+  it("right-aligns a numeric column and draws a footer in the same columns", () => {
+    const { target, done } = render({ footer: { id: "t", name: "Total", total: 6000 } });
+    expect(target.querySelector("thead th:last-child")?.className).toContain("text-end");
+    expect(target.querySelector("tfoot")?.textContent).toContain("$6000");
+    done();
+  });
+
+  it("lets a caller draw a cell", () => {
+    const cell = createRawSnippet(() => ({ render: () => `<b>x</b>` }));
+    const { target, done } = render({ cell });
+    expect(target.querySelectorAll("tbody b").length).toBe(4);
+    done();
+  });
+});

package/src/components/table-view/types.ts

@@ -0,0 +1,14 @@
+/** One column of a `TableView`. */
+export interface TableColumn<Row> {
+	/** The key of the value in the row. */
+	key: string;
+	label: string;
+	/** A number or an amount: right-aligned, tabular figures, never wraps. */
+	numeric?: boolean;
+	/** Turns the raw value into the text shown. A string value that has no `format` prints as it is. A money column passes its own currency formatter. */
+	format?: (value: unknown, row: Row) => string;
+	/** A column width such as `"30%"` or `"8rem"`. Leave it out and the table shares the rest. */
+	width?: string;
+	/** Draws the column in the muted colour. */
+	muted?: boolean;
+}

package/src/components/theme/index.ts

@@ -0,0 +1,17 @@
+/**
+ * The one light and dark system: mode-watcher's store and no-flash script, behind one provider.
+ * Mount `ThemeProvider` once in the root layout, flip the mode with `toggleMode` or `setMode`, and
+ * read it from `mode.current` or `userPrefersMode.current`. `ThemeToggle` and `revealTheme`
+ * draw the control and the wipe.
+ */
+export { default as ThemeProvider } from "./theme-provider.svelte";
+export { revealTheme } from "../../lib/theme-transition.js";
+export {
+  mode,
+  resetMode,
+  setMode,
+  systemPrefersMode,
+  toggleMode,
+  userPrefersMode,
+  type UserPrefersMode,
+} from "mode-watcher";

package/src/components/theme/theme-provider.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { ModeWatcher, userPrefersMode, type UserPrefersMode } from "mode-watcher";
+	import type { ComponentProps } from "svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	type WatcherProps = ComponentProps<typeof ModeWatcher>;
+
+	interface Props extends Omit<WatcherProps, "defaultMode"> {
+		/**
+		 * The choice the server already knows, for a browser that has none stored. A stored
+		 * choice wins, so it seeds a first visit and never overrides a click.
+		 */
+		initial?: UserPrefersMode;
+		/**
+		 * Fires when the person changes the mode, never on load. An app that saves the choice
+		 * on its server posts it here.
+		 */
+		onChange?: (mode: UserPrefersMode) => void;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { initial = "system", onChange, synchronousModeChanges = true, ...watcher }: Props = $props();
+
+	// =========================
+	// EFFECTS
+	// =========================
+	// The first run is the mode read from storage on mount, which nobody chose.
+	let seen: UserPrefersMode | null = null;
+	$effect(() => {
+		const next = userPrefersMode.current;
+		if (seen !== null && next !== seen) onChange?.(next);
+		seen = next;
+	});
+</script>
+
+<!-- WHY it renders ModeWatcher and nothing else: its inline head script sets the class and
+     colour-scheme before the first paint, so there is no flash and no cookie to read.
+     WHY synchronous: `revealTheme` snapshots the page the moment its callback returns, so the
+     class has to be on the root by then. -->
+<ModeWatcher defaultMode={initial} {synchronousModeChanges} {...watcher} />