@heyramzi/ui 2.15.0 → 2.16.0

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/lib/motion.js

@@ -0,0 +1,22 @@
+/**
+* Motion tokens for code that needs a number: a Svelte `flip`, `slide` or `fade`, a timer. The
+* CSS in `tokens/craft.css` owns the values; these mirror it for the server render and for a
+* page that never loaded the tokens.
+*/
+export const DURATION_MS = {
+	quick: 150,
+	fast: 250,
+	slow: 300
+};
+/** A duration token in ms, read off a mounted element; both `ms` and `s` parse. */
+export function tokenMs(el, name, fallback) {
+	const raw = getComputedStyle(el).getPropertyValue(name).trim();
+	const n = Number.parseFloat(raw);
+	if (Number.isNaN(n)) return fallback;
+	return raw.endsWith("ms") ? n : n * 1e3;
+}
+/** `--duration-<token>` in ms off the root, so a token edit retimes the JS motion too. */
+export function durationMs(token) {
+	if (typeof document === "undefined") return DURATION_MS[token];
+	return tokenMs(document.documentElement, `--duration-${token}`, DURATION_MS[token]);
+}

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.0",
+  "version": "2.16.0",
   "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/lib/motion.ts

@@ -0,0 +1,26 @@
+/**
+ * Motion tokens for code that needs a number: a Svelte `flip`, `slide` or `fade`, a timer. The
+ * CSS in `tokens/craft.css` owns the values; these mirror it for the server render and for a
+ * page that never loaded the tokens.
+ */
+export const DURATION_MS = {
+  quick: 150,
+  fast: 250,
+  slow: 300,
+} as const;
+
+export type DurationToken = keyof typeof DURATION_MS;
+
+/** A duration token in ms, read off a mounted element; both `ms` and `s` parse. */
+export function tokenMs(el: Element, name: string, fallback: number): number {
+  const raw = getComputedStyle(el).getPropertyValue(name).trim();
+  const n = Number.parseFloat(raw);
+  if (Number.isNaN(n)) return fallback;
+  return raw.endsWith("ms") ? n : n * 1000;
+}
+
+/** `--duration-<token>` in ms off the root, so a token edit retimes the JS motion too. */
+export function durationMs(token: DurationToken): number {
+  if (typeof document === "undefined") return DURATION_MS[token];
+  return tokenMs(document.documentElement, `--duration-${token}`, DURATION_MS[token]);
+}

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/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;