@heyramzi/ui 2.5.0 → 2.7.0

package/COMPONENTS.md

@@ -133,6 +133,10 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 - `typing-dots` — TypingDots
 - `voice-waveform` — VoiceWaveform
 
+## Record (`src/record`)
+
+- `info-list` — InfoList. An editable label and value `<dl>`; `layout="row"` makes it a read-only band of items that wrap and truncate, with `term`, `content` and `action` snippets per row and a `trailing` snippet after the list
+
 ---
 
 Skipped on purpose: brand assets (logos, marks, brand renderer), kanban, list, gantt and status (they live in `@heyramzi/ui/tasks`), and charts

package/package.json

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

package/src/brand/index.ts

@@ -29,6 +29,14 @@ export type BrandColors = {
   surfaceLight?: CssColor;
   /** Borders on a light page. */
   lineLight?: CssColor;
+  /** The key button on a light page. Falls back to the near-black neutral. */
+  primary?: CssColor;
+  /** Text on the key button on a light page. */
+  primaryForeground?: CssColor;
+  /** The key button on a dark page. Falls back to paper. */
+  primaryOnDark?: CssColor;
+  /** Text on the key button on a dark page. */
+  primaryForegroundOnDark?: CssColor;
 };
 
 export type BrandFonts = {
@@ -61,6 +69,10 @@ const COLOR_VARS = {
   paper: "--brand-paper",
   surfaceLight: "--brand-surface-light",
   lineLight: "--brand-line-light",
+  primary: "--brand-primary",
+  primaryForeground: "--brand-primary-foreground",
+  primaryOnDark: "--brand-primary-on-dark",
+  primaryForegroundOnDark: "--brand-primary-foreground-on-dark",
 } as const satisfies Record<keyof BrandColors, string>;
 
 const FONT_VARS = {

package/src/canvas/headless/canvas-cleanup.test.ts

@@ -3,7 +3,7 @@ import { sortParentsFirst, stripCallbacks } from "./canvas-cleanup.js";
 import { makeNode } from "../test-utils.js";
 import type { CanvasNode } from "../types.js";
 
-/** Read serialized data as a loose record: these tests exercise old fields
+/** Read serialized data as a loose record: these tests exercise legacy fields
  * that are no longer part of any per-type shape but must survive the denylist. */
 function loose(node: { data: unknown }): Record<string, unknown> {
   return node.data as Record<string, unknown>;

package/src/canvas/ops/ops.ts

@@ -36,7 +36,7 @@ export const patchNodeOp = z.object({
   kind: z.literal("patchNode"),
   nodeId: z.string().min(1),
   data: z.record(z.string(), z.unknown()).optional(),
-  // Merged into the node's style object. A CSS-string style from an old save is replaced
+  // Merged into the node's style object. A legacy CSS-string style is replaced
   // wholesale (there is nothing sane to merge into).
   style: z.record(z.string(), z.unknown()).optional(),
   width: z.number().optional(),

package/src/icons/trades.ts

@@ -15,7 +15,7 @@
  */
 
 /*
- * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
+ * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not legacy ` @tabler/icons-svelte`).
  */
 
 import {

package/src/record/info-list.svelte

@@ -2,6 +2,7 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import type { Snippet } from "svelte";
 	import { Check, CaretUpDown } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
 	import { Button } from "../shadcn/button/index.js";
@@ -23,9 +24,32 @@
 		/** A heading over the list. Left out, nothing is drawn. */
 		title?: string | null;
 		labels?: Partial<RecordLabels>;
+		/**
+		 * `list` is the editable label and value grid. `row` is a read-only band of items that
+		 * wrap, with values that truncate. Rows ignore `onSave` there and keep their empty ones.
+		 */
+		layout?: "list" | "row";
+		/** `row` only. Where the label sits against its value. */
+		labelPosition?: "above" | "beside";
+		/** `row` only. Classes for the `<dl>`, to set a grid or a gap. */
+		listClass?: string;
+		/** `row` only. Classes for each item, to cap its width. */
+		itemClass?: string;
+		/** `row` only. Sits after the list on the same line, a button for the whole band. */
+		trailing?: Snippet;
 		class?: string;
 	}
-	let { rows, title = null, labels, class: className }: Props = $props();
+	let {
+		rows,
+		title = null,
+		labels,
+		layout = "list",
+		labelPosition = "above",
+		listClass,
+		itemClass,
+		trailing,
+		class: className,
+	}: Props = $props();
 
 	// =========================
 	// STATE
@@ -42,9 +66,13 @@
 	let t = $derived(resolveLabels(labels));
 	// A read-only row with nothing in it is noise. An editable one stays, as the way to fill it.
 	let shown = $derived(
-		rows.filter(
+		(layout === "row" ? rows.filter((r) => !r.divider) : rows).filter(
 			(r) =>
-				r.divider || r.onSave || (r.value != null && r.value !== "") || (r.chips?.length ?? 0) > 0,
+				layout === "row" ||
+				r.divider ||
+				r.onSave ||
+				(r.value != null && r.value !== "") ||
+				(r.chips?.length ?? 0) > 0,
 		),
 	);
 	// Past this many options a plain list is slower than typing.
@@ -135,7 +163,7 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-{#snippet display(row: InfoRow)}
+{#snippet display(row: InfoRow, clamp = false)}
 	{#if row.chips?.length}
 		<span class="flex flex-wrap items-center gap-1">
 			{#each row.chips as chip (chip.label)}
@@ -147,12 +175,17 @@
 	{:else if row.href && row.value}
 		<a
 			href={row.href}
-			class="min-w-0 truncate text-sm font-medium underline-offset-2 hover:underline">{row.value}</a
+			class={cn(
+				"min-w-0 truncate text-sm font-medium underline-offset-2 hover:underline",
+				clamp &&
+					"rounded-xs focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+			)}>{row.value}</a
 		>
 	{:else if row.value}
 		<span
 			class={cn(
-				"min-w-0 text-sm font-medium tabular-nums wrap-anywhere whitespace-pre-line",
+				"min-w-0 text-sm font-medium tabular-nums",
+				clamp ? "truncate" : "wrap-anywhere whitespace-pre-line",
 				row.muted && "text-muted-foreground",
 			)}>{row.value}</span
 		>
@@ -215,7 +248,54 @@
 	</Popover.Root>
 {/snippet}
 
-{#if shown.length > 0}
+{#if layout === "row" && (shown.length > 0 || trailing)}
+	<div class={cn("flex items-start justify-between gap-4", className)}>
+		<dl class={cn("flex min-w-0 flex-1 flex-wrap gap-x-8 gap-y-2", listClass)}>
+			{#each shown as row (keyOf(row))}
+				<div
+					class={cn(
+						"min-w-0",
+						labelPosition === "beside" && "flex items-baseline gap-2",
+						itemClass,
+					)}
+				>
+					<dt
+						class={cn(
+							"flex items-center gap-1.5 text-xs text-muted-foreground",
+							labelPosition === "beside" && "shrink-0",
+						)}
+					>
+						{#if row.term}
+							{@render row.term()}
+						{:else}
+							{#if row.icon}
+								{@const Icon = row.icon}
+								<Icon class="size-3.5 shrink-0" aria-hidden="true" />
+							{/if}
+							{row.label}
+						{/if}
+					</dt>
+					<dd
+						class="flex min-w-0 items-center gap-1.5"
+						title={row.content ? undefined : (row.value ?? undefined)}
+					>
+						{#if row.content}
+							{@render row.content()}
+						{:else if isEmpty(row)}
+							<span class="min-w-0 truncate text-sm text-muted-foreground" title={row.placeholder}
+								>{row.placeholder ?? "-"}</span
+							>
+						{:else}
+							{@render display(row, true)}
+						{/if}
+						{@render row.action?.()}
+					</dd>
+				</div>
+			{/each}
+		</dl>
+		{@render trailing?.()}
+	</div>
+{:else if shown.length > 0}
 	<div class={cn("flex flex-col gap-2", className)}>
 		{#if title}
 			<h2 class="text-xs font-medium tracking-wide text-muted-foreground uppercase">{title}</h2>

package/src/record/types.ts

@@ -1,5 +1,6 @@
 // The view types of a client or project record. Plain data in, nothing loaded:
 // the host maps its own rows onto these and passes them down.
+import type { Snippet } from "svelte";
 import type { PhosphorIcon } from "../lib/icon-types.js";
 import type { Tone } from "../lib/tone.js";
 
@@ -186,6 +187,12 @@ export type InfoRow = {
   /** Without it the row is read-only. A multi row passes the picked keys. */
   onSave?: (value: string | string[]) => void | Promise<void>;
   divider?: boolean;
+  /** `layout="row"` only. Replaces the label text inside the `<dt>` (key chips, say). `label` still names the row. */
+  term?: Snippet;
+  /** `layout="row"` only. Replaces the drawn value with arbitrary content. A row with one is never hidden for lacking a value. */
+  content?: Snippet;
+  /** `layout="row"` only. Draws after the value, inside the `<dd>`. */
+  action?: Snippet;
 };
 
 /** A kind of event: how its filter chip and its default row read. */

package/src/shadcn/card/card-title.svelte

@@ -2,7 +2,11 @@
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../lib/utils.js";
 
-	// WHY: card titles default to a div, so pass `as="h2"` on real section titles or a page of cards has no headings for screen readers (WCAG 2.4.6).
+	// WHY: card titles render as a div by default for backwards compatibility,
+
+	// but a page whose sections are all cards ends up with no headings below the h1, so screen readers cannot navigate it by heading (WCAG 2.4.6).
+
+	// Pass `as="h2"` on real section titles.
 	let {
 		ref = $bindable(null),
 		class: className,

package/src/tokens/palette.css

@@ -38,6 +38,12 @@
   --brand-surface-light: oklch(0.99 0 0); /* Cards on a light page */
   --brand-line-light: oklch(0.91 0 0); /* Borders on a light page */
 
+  /* The key button. Each theme has its own pair, since a hue lifted for dark needs dark text. */
+  --brand-primary: var(--gray-900);
+  --brand-primary-foreground: var(--gray-50);
+  --brand-primary-on-dark: var(--brand-paper);
+  --brand-primary-foreground-on-dark: var(--gray-900);
+
   /* === Tint scales ===
      Mixed from the three hues so `--brand` alone yields 100 to 800; 400 is the colour lifted
      for dark, 600 the colour itself. */
@@ -220,8 +226,8 @@
   --color-popover: var(--brand-surface-light);
   --color-popover-foreground: var(--gray-900);
 
-  --color-primary: var(--gray-900);
-  --color-primary-foreground: var(--gray-50);
+  --color-primary: var(--brand-primary);
+  --color-primary-foreground: var(--brand-primary-foreground);
 
   --color-secondary: var(--gray-100);
   --color-secondary-foreground: var(--gray-900);
@@ -320,8 +326,8 @@
   --color-popover: var(--brand-surface);
   --color-popover-foreground: var(--brand-paper);
 
-  --color-primary: var(--brand-paper);
-  --color-primary-foreground: var(--gray-900);
+  --color-primary: var(--brand-primary-on-dark);
+  --color-primary-foreground: var(--brand-primary-foreground-on-dark);
 
   --color-secondary: var(--brand-raised);
   --color-secondary-foreground: var(--brand-paper);