@heyramzi/ui 2.15.1 → 2.16.1

package/COMPONENTS.md

@@ -136,6 +136,7 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 ## 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
+- `record-rail` — RecordRail, RecordRailTab. A record's side rail split into tabs (fields in one, a comment thread in the next), each with an optional count. A single tab draws no strip
 
 ---
 

package/dist/record/index.js

@@ -8,6 +8,7 @@ export { default as RecordTimeline } from "../../src/record/record-timeline.svel
 export { default as ProjectList } from "../../src/record/project-list.svelte";
 export { default as FieldSection } from "../../src/record/field-section.svelte";
 export { default as InfoList } from "../../src/record/info-list.svelte";
+export { default as RecordRail } from "../../src/record/record-rail.svelte";
 export { DEFAULT_RECORD_FILTERS, DEFAULT_RECORD_KINDS } from "./kinds.js";
 export { DEFAULT_RECORD_LABELS, resolveLabels } from "./types.js";
 export { activeProjects, dayRelation, eventsForFilter, filterCounts, foldGroups, groupEventsByDay, groupSteps, latestWhereWeAre, localDay, mergeClientEvents, nextAcrossProjects, nudgeStep, reorderIds, rollupProjects, stepMarkers, stepProgress } from "./logic.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.15.1",
+  "version": "2.16.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/record/index.ts

@@ -8,6 +8,8 @@ export { default as RecordTimeline } from "./record-timeline.svelte";
 export { default as ProjectList } from "./project-list.svelte";
 export { default as FieldSection } from "./field-section.svelte";
 export { default as InfoList } from "./info-list.svelte";
+export { default as RecordRail } from "./record-rail.svelte";
+export type { RecordRailTab } from "./record-rail.svelte";
 
 export { DEFAULT_RECORD_FILTERS, DEFAULT_RECORD_KINDS } from "./kinds.js";
 export { DEFAULT_RECORD_LABELS, resolveLabels } from "./types.js";

package/src/record/record-rail.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../lib/utils.js";
+	import * as Tabs from "../shadcn/tabs/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	export interface RecordRailTab {
+		id: string;
+		label: string;
+		/** Drawn beside the label, such as the number of comments. Hidden at 0 or when left out. */
+		count?: number;
+		content: Snippet;
+	}
+
+	interface Props {
+		tabs: RecordRailTab[];
+		/** The open tab's id. Defaults to the first tab. */
+		value?: string;
+		/** Names the tab list for a screen reader, such as "Task sidebar". */
+		label: string;
+		class?: string;
+		/** Classes for the strip that holds the tab list. */
+		listClass?: string;
+		/** Classes for each tab's panel. */
+		contentClass?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		tabs,
+		value = $bindable(),
+		label,
+		class: className,
+		listClass,
+		contentClass,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	// WHY a fallback and not a write: the caller may hand over a new tab set where the open id is gone.
+	let open = $derived(tabs.some((tab) => tab.id === value) ? value : tabs[0]?.id);
+</script>
+
+<!-- A record's side rail with tabs: the fields in one, a thread or a log in the next,
+     so the thread sits beside the record and not a screen below it. One tab draws no strip. -->
+<Tabs.Root value={open} onValueChange={(next) => (value = next)} class={cn("min-w-0 gap-0", className)}>
+	{#if tabs.length > 1}
+		<div class={cn("pb-3", listClass)}>
+			<Tabs.List size="sm" class="w-full" aria-label={label}>
+				{#each tabs as tab (tab.id)}
+					<Tabs.Trigger value={tab.id}>
+						{tab.label}
+						{#if tab.count}
+							<span class="text-xs tabular-nums text-muted-foreground">{tab.count}</span>
+						{/if}
+					</Tabs.Trigger>
+				{/each}
+			</Tabs.List>
+		</div>
+	{/if}
+	{#each tabs as tab (tab.id)}
+		<Tabs.Content value={tab.id} class={cn("min-w-0", contentClass)}>
+			{@render tab.content()}
+		</Tabs.Content>
+	{/each}
+</Tabs.Root>

package/src/thread/thread-body.svelte

@@ -17,7 +17,8 @@
 <div class="flex flex-col items-start gap-1">
 	<p
 		class={cn(
-			"text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty",
+			// A long unbroken word, such as a class name, otherwise widens a narrow rail.
+			"max-w-full text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty wrap-break-word",
 			long && !open && "line-clamp-6",
 			className,
 		)}

package/src/thread/thread.svelte

@@ -46,6 +46,8 @@
 		onAnchor?: (comment: ThreadComment) => void;
 		/** Whose comments carry the edit and delete buttons. A rich comment can't be edited here. */
 		canEdit?: (comment: ThreadComment) => boolean;
+		/** False hides the visible title, for a thread already named by its tab. Screen readers still get it. */
+		heading?: boolean;
 		class?: string;
 	}
 
@@ -66,6 +68,7 @@
 		onResolve,
 		onAnchor,
 		canEdit = () => false,
+		heading = true,
 		class: className,
 	}: Props = $props();
 
@@ -273,8 +276,8 @@
 {/snippet}
 
 <section aria-label={labels.title} class={cn("flex flex-col gap-3", className)}>
-	<div class="flex h-7 items-center justify-between">
-		<h2 class="text-xs font-medium text-muted-foreground">{labels.title}</h2>
+	<div class={cn("flex h-7 items-center justify-between", !heading && resolved === 0 && "sr-only")}>
+		<h2 class={cn("text-xs font-medium text-muted-foreground", !heading && "sr-only")}>{labels.title}</h2>
 		{#if resolved > 0}
 			<button
 				type="button"

package/src/work/kanban-board.svelte

@@ -366,8 +366,11 @@
 		opacity: 1;
 	}
 
-	/* clip, not hidden: the margin lets a lifted card's shadow out while the fold stays shut. */
+	/* clip, not hidden: the margin lets a lifted card's shadow out while the fold stays shut.
+	   relative: a card's sr-only labels are absolute, and clip only cuts what this box contains.
+	   Without it they hang below a shut fold and the page scrolls past its last lane (TSK-1617). */
 	.kanban-fold-inner {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: 0.375rem;