@heyramzi/ui 2.3.0 → 2.5.0

package/COMPONENTS.md

@@ -76,7 +76,7 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 - `section-card` — SectionCard, a card with a fixed-height header, an h3 title, optional actions and a line under it
 - `section-header` — SectionHeader, a section label with a count chip, a line of description and actions
 - `field-row` — FieldRow, a labelled control with its action button at the control's height
-- `table-view` — TableView, a read-only table from columns and rows: numeric columns, footer row, custom cell; opt-in: `bare`, sortable heads (`column.sortable`, bind `sort`; the caller orders `rows`), `rowHref` (a real link over the row), `onRowClick`, `selectable` + bind `selected`, `rowMenu` (context-menu items), `group` + `groupHeader` + `collapsible`, `subRow` + `expanded`, `loading` (skeleton rows in the frame), `empty`, `trailing`, `head`, and per-column `hideBelow`, `sticky`, `interactive`, `class`
+- `table-view` — TableView, a read-only table from columns and rows: numeric columns, footer row, custom cell; opt-in: `bare`, sortable heads (`column.sortable`, bind `sort`; the caller orders `rows`), `rowHref` (a real link over the row; `onRowLink` opens in place on a plain click), `onRowClick`, `selectable` + bind `selected`, `rowMenu` (context-menu items), `group` (a `null` key sits with no header) + `groupHeader` + `collapsible`, `subRow` + `expanded`, `loading` (skeleton rows in the frame), `empty`, `trailing`, `head`, and per-column `hideBelow`, `sticky`, `interactive`, `class`
 - `segmented` — AnimatedTabs (pill or underline), SegmentedFilter, SegmentedNav, SectionRuns, one bordered track with a sliding pill, a badge note and an overflow menu
 - `theme` — ThemeProvider, mode, userPrefersMode, setMode, toggleMode, resetMode: the one light and dark system (mode-watcher, optional peer). Mount `<ThemeProvider initial onChange themeColors modeStorageKey />` once; flip with `toggleMode()`, read `mode.current`. Pair with `theme-toggle`'s `revealTheme(event, toggleMode)` for the wipe
 - `star-rating-input` — StarRatingInput

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.3.0",
+  "version": "2.5.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/charts/area-chart.svelte

@@ -45,6 +45,8 @@
 		xTicks?: number;
 		/** A target drawn across the plot, like the deal a cost runs up to. */
 		reference?: ChartReference;
+		/** The headline while no point is hovered, like a period total. Defaults to the last point. */
+		resting?: { value: number; label: string };
 		class?: string;
 	}
 
@@ -65,6 +67,7 @@
 		formatX = (v) => String(v),
 		xTicks = 6,
 		reference,
+		resting,
 		class: className,
 	}: Props = $props();
 
@@ -127,7 +130,14 @@
 	aria-label="Area chart"
 	onpointerleave={() => (active = null)}
 >
-	{#if figureRows && display}
+	{#if resting && !active && series[0]}
+		<Figure
+			series={[{ value: resting.value, label: series[0].label, color: series[0].color }]}
+			eyebrow={resting.label}
+			format={formatValue}
+			size="md"
+		/>
+	{:else if figureRows && display}
 		<Figure series={figureRows} eyebrow={formatX(display[xKey])} format={formatValue} size="md" />
 	{:else}
 		<Figure value="—" eyebrow="Latest" size="md" />

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

@@ -43,6 +43,8 @@
 		sort?: SortState<Row>;
 		/** Where a row goes. Draws a real link over the row, so middle-click and cmd-click work. */
 		rowHref?: (row: Row) => string | undefined;
+		/** Runs on a plain left click of the row link. Call `event.preventDefault()` to open in place; a modified click still follows `href`. */
+		onRowLink?: (row: Row, event: MouseEvent) => void;
 		/** The link's accessible name. Defaults to the row's first column text. */
 		rowLabel?: (row: Row) => string;
 		/** Adds a checkbox column with a select-all in the head. */
@@ -53,8 +55,8 @@
 		selectRowLabel?: (row: Row) => string;
 		/** The items of a right-click menu for one row: `ContextMenu.Item`s. */
 		rowMenu?: Snippet<[Row]>;
-		/** Rows that return the same key sit under one header row. Order `rows` so a group is contiguous. */
-		group?: (row: Row) => string;
+		/** Rows that return the same key sit under one header row, and `null` rows sit with no header. Order `rows` so a group is contiguous. */
+		group?: (row: Row) => string | null;
 		/** Draws a group's header. Prints the key when left out. */
 		groupHeader?: Snippet<[TableGroup<Row>]>;
 		/** Makes each group header a button that folds its rows. */
@@ -94,6 +96,7 @@
 		class: className,
 		sort = $bindable(null),
 		rowHref,
+		onRowLink,
 		rowLabel,
 		selectable = false,
 		selected = $bindable(new Set<string>()),
@@ -127,15 +130,16 @@
 			align: column.numeric ? ("right" as const) : ("left" as const),
 		})),
 	]);
-	let entries = $derived.by<{ group: TableGroup<Row> }[]>(() => {
+	type Run = { id: string; key: string | null; rows: Row[] };
+	let entries = $derived.by<Run[]>(() => {
 		if (!group) return [];
-		const out: { group: TableGroup<Row> }[] = [];
-		let current: TableGroup<Row> | undefined;
+		const out: Run[] = [];
+		let current: Run | undefined;
 		for (const row of rows) {
 			const groupKey = group(row);
 			if (!current || current.key !== groupKey) {
-				current = { key: groupKey, rows: [] };
-				out.push({ group: current });
+				current = { id: groupKey ?? `\u0000${out.length}`, key: groupKey, rows: [] };
+				out.push(current);
 			}
 			current.rows.push(row);
 		}
@@ -204,6 +208,12 @@
 		onRowClick?.(row);
 	}
 
+	function linkClick(event: MouseEvent, row: Row) {
+		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+			return;
+		onRowLink?.(row, event);
+	}
+
 	function linkName(row: Row): string {
 		return rowLabel?.(row) ?? (columns[0] ? textOf(columns[0], row) : label);
 	}
@@ -288,6 +298,7 @@
 				<a
 					{href}
 					aria-label={linkName(row)}
+					onclick={onRowLink ? (event: MouseEvent) => linkClick(event, row) : undefined}
 					class="absolute inset-0 z-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
 				></a>
 			</td>
@@ -370,40 +381,45 @@
 			<TableSkeleton rows={skeletonRows} columns={skeletonColumns} />
 		{:else}
 			{#if group}
-				{#each entries as entry (entry.group.key)}
-					{@const folded = collapsible && collapsed.has(entry.group.key)}
+				{#each entries as entry (entry.id)}
+					{@const folded = entry.key !== null && collapsible && collapsed.has(entry.key)}
+					{@const tableGroup = { key: entry.key ?? "", rows: entry.rows }}
 					<Table.Body>
-						<Table.Row class="bg-muted/40 hover:bg-muted/40 hover:translate-y-0 hover:shadow-none">
-							<Table.Head
-								colspan={span + (rowHref ? 1 : 0)}
-								scope="colgroup"
-								class="text-foreground h-10 p-0"
+						{#if entry.key !== null}
+							<Table.Row
+								class="bg-muted/40 hover:bg-muted/40 hover:translate-y-0 hover:shadow-none"
 							>
-								{#if collapsible}
-									<button
-										type="button"
-										aria-expanded={!folded}
-										class="t-press focus-visible:ring-ring flex h-10 w-full items-center gap-2 px-2 text-start outline-none focus-visible:ring-2 focus-visible:ring-inset"
-										onclick={() => toggleGroup(entry.group.key)}
-									>
-										<CaretDown
-											class={cn(
-												"size-3.5 shrink-0 transition-transform duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] motion-reduce:transition-none",
-												folded && "-rotate-90",
-											)}
-											aria-hidden="true"
-										/>
-										{#if groupHeader}{@render groupHeader(entry.group)}{:else}{entry.group.key}{/if}
-									</button>
-								{:else}
-									<span class="flex h-10 items-center px-2">
-										{#if groupHeader}{@render groupHeader(entry.group)}{:else}{entry.group.key}{/if}
-									</span>
-								{/if}
-							</Table.Head>
-						</Table.Row>
+								<Table.Head
+									colspan={span + (rowHref ? 1 : 0)}
+									scope="colgroup"
+									class="text-foreground h-10 p-0"
+								>
+									{#if collapsible}
+										<button
+											type="button"
+											aria-expanded={!folded}
+											class="t-press focus-visible:ring-ring flex h-10 w-full items-center gap-2 px-2 text-start outline-none focus-visible:ring-2 focus-visible:ring-inset"
+											onclick={() => toggleGroup(tableGroup.key)}
+										>
+											<CaretDown
+												class={cn(
+													"size-3.5 shrink-0 transition-transform duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] motion-reduce:transition-none",
+													folded && "-rotate-90",
+												)}
+												aria-hidden="true"
+											/>
+											{#if groupHeader}{@render groupHeader(tableGroup)}{:else}{tableGroup.key}{/if}
+										</button>
+									{:else}
+										<span class="flex h-10 items-center px-2">
+											{#if groupHeader}{@render groupHeader(tableGroup)}{:else}{tableGroup.key}{/if}
+										</span>
+									{/if}
+								</Table.Head>
+							</Table.Row>
+						{/if}
 						{#if !folded}
-							{#each entry.group.rows as row (rowKey(row))}
+							{#each entry.rows as row (rowKey(row))}
 								{@render rowOrMenu(row)}
 							{/each}
 						{/if}