@heyramzi/ui 3.8.0 → 3.9.0

package/dist/charts/motion.js

@@ -10,10 +10,5 @@ export const DOMAIN_MOTION = {
 /** The tooltip sits beside the hovered point at the top of the plot, so it never chases the cursor. */
 export const TOOLTIP_TOP = 8;
 export const TOOLTIP_GAP = 16;
-/** A chart 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;
-}
+/** A chart duration token in ms, read off a mounted element. Lives in `lib/motion` now. */
+export { tokenMs } from "../lib/motion.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.8.0",
+  "version": "3.9.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/charts/motion.ts

@@ -10,10 +10,5 @@ export const DOMAIN_MOTION = { type: "tween", duration: 500, easing: cubicInOut
 export const TOOLTIP_TOP = 8;
 export const TOOLTIP_GAP = 16;
 
-/** A chart 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;
-}
+/** A chart duration token in ms, read off a mounted element. Lives in `lib/motion` now. */
+export { tokenMs } from "../lib/motion.js";

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

@@ -57,6 +57,8 @@
 		selected?: Set<string>;
 		selectAllLabel?: string;
 		selectRowLabel?: (row: Row) => string;
+		/** The hidden head of the last column, the one holding each row's link or button. */
+		openColumnLabel?: string;
 		/** The items of a row menu: `ContextMenu.Item`s. Right-click, a long press, Shift+F10 or the ContextMenu key opens it. */
 		rowMenu?: Snippet<[Row]>;
 		/** 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. */
@@ -105,6 +107,7 @@
 		selected = $bindable(new Set<string>()),
 		selectAllLabel = "Select all rows",
 		selectRowLabel,
+		openColumnLabel = "Open",
 		rowMenu,
 		group,
 		groupHeader,
@@ -408,7 +411,7 @@
 					{/if}
 				{/each}
 				{#if opens}
-					<th class="w-0 p-0"><span class="sr-only">Open</span></th>
+					<th class="w-0 p-0"><span class="sr-only">{openColumnLabel}</span></th>
 				{/if}
 			</Table.Row>
 		</Table.Header>

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

@@ -46,6 +46,8 @@ declare function $$render<Row extends object>(): {
         selected?: Set<string>;
         selectAllLabel?: string;
         selectRowLabel?: (row: Row) => string;
+        /** The hidden head of the last column, the one holding each row's link or button. */
+        openColumnLabel?: string;
         /** The items of a row menu: `ContextMenu.Item`s. Right-click, a long press, Shift+F10 or the ContextMenu key opens it. */
         rowMenu?: Snippet<[Row]>;
         /** 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. */

package/src/shadcn/alert-dialog/alert-dialog-cancel.svelte

@@ -6,6 +6,8 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		// Inside a form, a bare button submits it: Locameublé's Annuler archived the bien (TSK-2744).
+		type = "button",
 		...restProps
 	}: AlertDialogPrimitive.CancelProps = $props();
 </script>
@@ -13,6 +15,7 @@
 <AlertDialogPrimitive.Cancel
 	bind:ref
 	data-slot="alert-dialog-cancel"
+	{type}
 	class={cn(buttonVariants({ variant: "outline" }), className)}
 	{...restProps}
 />

package/src/shadcn/command/command-dialog.svelte

@@ -12,6 +12,7 @@
 		title = "Command Palette",
 		description = "Search for a command to run...",
 		showCloseButton = false,
+		closeLabel = "Close",
 		portalProps,
 		children,
 		class: className,
@@ -23,6 +24,8 @@
 			title?: string;
 			description?: string;
 			showCloseButton?: boolean;
+			/** What a screen reader calls the close button, in the app's language. */
+			closeLabel?: string;
 			class?: string;
 		} = $props();
 </script>
@@ -51,6 +54,7 @@
 		data-command-dialog="true"
 		overlayClass="t-instant"
 		{showCloseButton}
+		{closeLabel}
 		{portalProps}
 	>
 		<!-- WHY the root's opaque `bg-popover`, no glass: `.t-modal` on the content sets `will-change:

package/src/shadcn/command/command-dialog.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & With
     title?: string;
     description?: string;
     showCloseButton?: boolean;
+    /** What a screen reader calls the close button, in the app's language. */
+    closeLabel?: string;
     class?: string;
 };
 declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "open">;

package/src/shadcn/dialog/dialog-content.svelte

@@ -14,12 +14,15 @@
 		portalProps,
 		children,
 		showCloseButton = true,
+		closeLabel = "Close",
 		overlayClass,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
 		children: Snippet;
 		showCloseButton?: boolean;
+		/** What a screen reader calls the built-in close button, in the app's language. */
+		closeLabel?: string;
 		/** Classes for the backdrop this dialog mounts, which is its sibling in the
 		 *  portal and so cannot be reached from the content's own class. */
 		overlayClass?: string;
@@ -62,7 +65,7 @@
 						{...props}
 					>
 						<X aria-hidden="true" size={16} />
-						<span class="sr-only">Close</span>
+						<span class="sr-only">{closeLabel}</span>
 					</Button>
 				{/snippet}
 			</DialogPrimitive.Close>

package/src/shadcn/dialog/dialog-content.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
     children: Snippet;
     showCloseButton?: boolean;
+    /** What a screen reader calls the built-in close button, in the app's language. */
+    closeLabel?: string;
     /** Classes for the backdrop this dialog mounts, which is its sibling in the
      *  portal and so cannot be reached from the content's own class. */
     overlayClass?: string;

package/src/shadcn/dialog/dialog-footer.svelte

@@ -9,10 +9,13 @@
 		class: className,
 		children,
 		showCloseButton = false,
+		closeLabel = "Close",
 		band = false,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		showCloseButton?: boolean;
+		/** The close button's text, in the app's language. */
+		closeLabel?: string;
 		/**
 		 * Draw the footer as a band: a hairline on top and a quiet surface out to both edges
 		 * and the bottom corners. It cancels the content's `--dialog-pad` with a negative
@@ -43,7 +46,7 @@
 	{#if showCloseButton}
 		<DialogPrimitive.Close>
 			{#snippet child({ props })}
-				<Button variant="outline" {...props}>Close</Button>
+				<Button variant="outline" {...props}>{closeLabel}</Button>
 			{/snippet}
 		</DialogPrimitive.Close>
 	{/if}

package/src/shadcn/dialog/dialog-footer.svelte.d.ts

@@ -2,6 +2,8 @@ import { type WithElementRef } from "../../lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     showCloseButton?: boolean;
+    /** The close button's text, in the app's language. */
+    closeLabel?: string;
     /**
      * Draw the footer as a band: a hairline on top and a quiet surface out to both edges
      * and the bottom corners. It cancels the content's `--dialog-pad` with a negative

package/src/shadcn/input/secret-input.svelte

@@ -14,12 +14,26 @@
 		variant?: "lock" | "obfuscate";
 		value?: string;
 		class?: string;
+		/** The reveal button's name while the value is hidden, in the app's language. */
+		revealLabel?: string;
+		/** The same button's name while the value shows. */
+		hideLabel?: string;
+		/** The name of the `obfuscate` box. */
+		maskedLabel?: string;
 	};
 
 	// =========================
 	// PROPS
 	// =========================
-	let { variant = "lock", value = $bindable(""), class: className, ...rest }: Props = $props();
+	let {
+		variant = "lock",
+		value = $bindable(""),
+		class: className,
+		revealLabel = "Reveal value",
+		hideLabel = "Hide value",
+		maskedLabel = "Encrypted value",
+		...rest
+	}: Props = $props();
 
 	// =========================
 	// STATE
@@ -46,7 +60,7 @@
 			"border-input bg-muted/30 text-muted-foreground flex h-8 w-full items-center gap-2 rounded-lg border px-2.5 py-1 font-mono text-sm",
 			className,
 		)}
-		aria-label="Encrypted value"
+		aria-label={maskedLabel}
 	>
 		<LockKey aria-hidden="true" class="text-muted-foreground/70 size-3.5 shrink-0" />
 		<span class="truncate">{masked || "••••••••"}</span>
@@ -61,7 +75,7 @@
 		/>
 		<button
 			type="button"
-			aria-label={revealed ? "Hide value" : "Reveal value"}
+			aria-label={revealed ? hideLabel : revealLabel}
 			class="text-muted-foreground hover:text-foreground absolute inset-y-0 right-0 flex w-8 items-center justify-center rounded-r-lg transition-colors"
 			onclick={() => (revealed = !revealed)}
 		>

package/src/shadcn/input/secret-input.svelte.d.ts

@@ -3,6 +3,12 @@ type Props = Omit<HTMLInputAttributes, "type" | "value" | "class" | "files"> & {
     variant?: "lock" | "obfuscate";
     value?: string;
     class?: string;
+    /** The reveal button's name while the value is hidden, in the app's language. */
+    revealLabel?: string;
+    /** The same button's name while the value shows. */
+    hideLabel?: string;
+    /** The name of the `obfuscate` box. */
+    maskedLabel?: string;
 };
 declare const $$Component: import("svelte").Component<Props, {}, "value">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/shadcn/message-scroller/message-scroller-button.svelte

@@ -14,12 +14,20 @@
 		variant = "outline",
 		size = "sm",
 		onclick,
+		label,
 		...restProps
 	}: MessageScrollerPrimitive.ButtonProps & {
 		variant?: ButtonVariant;
 		size?: ButtonSize;
+		/**
+		 * What a screen reader calls the icon-only button, in the app's language.
+		 * Defaults to "Scroll to end", or "Scroll to start" when `direction="start"`.
+		 */
+		label?: string;
 	} = $props();
 
+	const srLabel = $derived(label ?? (direction === "end" ? "Scroll to end" : "Scroll to start"));
+
 	// The primitive blurs the button and it turns inert at the end, dropping focus to the page. Focus goes to the thread instead.
 	function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
 		onclick?.(event);
@@ -54,9 +62,7 @@
 					{@render children()}
 				{:else}
 					<ArrowDown aria-hidden="true" />
-					<span class="sr-only">
-						{direction === "end" ? "Scroll to end" : "Scroll to start"}
-					</span>
+					<span class="sr-only">{srLabel}</span>
 				{/if}
 			</Button>
 		{/if}

package/src/shadcn/message-scroller/message-scroller-button.svelte.d.ts

@@ -3,6 +3,11 @@ import type { ButtonSize, ButtonVariant } from "../button/index.js";
 type $$ComponentProps = MessageScrollerPrimitive.ButtonProps & {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /**
+     * What a screen reader calls the icon-only button, in the app's language.
+     * Defaults to "Scroll to end", or "Scroll to start" when `direction="start"`.
+     */
+    label?: string;
 };
 declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/shadcn/pagination/pagination-next.svelte

@@ -7,8 +7,12 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		label = "Next",
 		...restProps
-	}: PaginationPrimitive.NextButtonProps = $props();
+	}: PaginationPrimitive.NextButtonProps & {
+		/** The text beside the arrow from `sm` up. Name the button with `aria-label`. */
+		label?: string;
+	} = $props();
 </script>
 
 <PaginationPrimitive.NextButton
@@ -17,7 +21,7 @@
 	class={cn(buttonVariants({ variant: "ghost", size: "default" }), "pr-2!", className)}
 	{...restProps}
 >
-	<span class="hidden sm:block">Next</span>
+	<span class="hidden sm:block">{label}</span>
 	<CaretRight
 		aria-hidden="true"
 		data-icon="inline-end"

package/src/shadcn/pagination/pagination-next.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Pagination as PaginationPrimitive } from "bits-ui";
-declare const $$Component: import("svelte").Component<PaginationPrimitive.NextButtonProps, {}, "ref">;
+type $$ComponentProps = PaginationPrimitive.NextButtonProps & {
+    /** The text beside the arrow from `sm` up. Name the button with `aria-label`. */
+    label?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/pagination/pagination-previous.svelte

@@ -7,8 +7,12 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		label = "Previous",
 		...restProps
-	}: PaginationPrimitive.PrevButtonProps = $props();
+	}: PaginationPrimitive.PrevButtonProps & {
+		/** The text beside the arrow from `sm` up. Name the button with `aria-label`. */
+		label?: string;
+	} = $props();
 </script>
 
 <PaginationPrimitive.PrevButton
@@ -26,5 +30,5 @@
 		data-icon="inline-start"
 		class="cn-rtl-flip"
 	/>
-	<span class="hidden sm:block">Previous</span>
+	<span class="hidden sm:block">{label}</span>
 </PaginationPrimitive.PrevButton>

package/src/shadcn/pagination/pagination-previous.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Pagination as PaginationPrimitive } from "bits-ui";
-declare const $$Component: import("svelte").Component<PaginationPrimitive.PrevButtonProps, {}, "ref">;
+type $$ComponentProps = PaginationPrimitive.PrevButtonProps & {
+    /** The text beside the arrow from `sm` up. Name the button with `aria-label`. */
+    label?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/sheet/close-label.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	// An open Sheet and Dialog, for the close-label test.
+	import * as Sheet from "./index.js";
+	import * as Dialog from "../dialog/index.js";
+
+	let { closeLabel }: { closeLabel?: string } = $props();
+</script>
+
+<Sheet.Root open>
+	<Sheet.Content {closeLabel}>
+		<Sheet.Title>Sheet</Sheet.Title>
+	</Sheet.Content>
+</Sheet.Root>
+
+<Dialog.Root open>
+	<Dialog.Content {closeLabel}>
+		<Dialog.Title>Dialog</Dialog.Title>
+		<Dialog.Footer showCloseButton {closeLabel} />
+	</Dialog.Content>
+</Dialog.Root>

package/src/shadcn/sheet/close-label.test.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    closeLabel?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/sheet/close-label.test.ts

@@ -0,0 +1,44 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import Overlays from "./close-label.test.svelte";
+import SecretInput from "../input/secret-input.svelte";
+
+// A French app's Assistant panel announced "Close" (TSK-2735): each built-in label takes a prop.
+function closeNames(closeLabel?: string): string[] {
+  const app = mount(Overlays, { target: document.body, props: closeLabel ? { closeLabel } : {} });
+  flushSync();
+  const names = [
+    ...document.querySelectorAll(
+      '[data-slot="sheet-close"], [data-slot="dialog-close"], [data-slot="dialog-footer"] button',
+    ),
+  ].map((b) => b.textContent?.trim() ?? "");
+  void unmount(app);
+  return names;
+}
+
+describe("built-in close buttons", () => {
+  it("say Close by default", () => {
+    expect(closeNames()).toEqual(["Close", "Close", "Close"]);
+  });
+
+  it("say the caller's closeLabel", () => {
+    expect(closeNames("Fermer")).toEqual(["Fermer", "Fermer", "Fermer"]);
+  });
+});
+
+describe("SecretInput", () => {
+  it("names its reveal button in the caller's words", () => {
+    const target = document.createElement("div");
+    const app = mount(SecretInput, {
+      target,
+      props: { revealLabel: "Afficher", hideLabel: "Masquer" },
+    });
+    flushSync();
+    const button = target.querySelector("button");
+    expect(button?.getAttribute("aria-label")).toBe("Afficher");
+    button?.click();
+    flushSync();
+    expect(button?.getAttribute("aria-label")).toBe("Masquer");
+    void unmount(app);
+  });
+});

package/src/shadcn/sheet/sheet-content.svelte

@@ -19,6 +19,7 @@
 		class: className,
 		side = "right",
 		showCloseButton = true,
+		closeLabel = "Close",
 		floating,
 		portalProps,
 		children,
@@ -27,6 +28,8 @@
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
 		side?: Side;
 		showCloseButton?: boolean;
+		/** What a screen reader calls the built-in close button, in the app's language. */
+		closeLabel?: string;
 		/**
 		 * From `sm` up a left or right sheet floats 8px off the edge, like SidePanel;
 		 * `floating={false}` keeps it flush. A phone stays full bleed for the width.
@@ -82,7 +85,7 @@
 				{#snippet child({ props })}
 					<Button variant="ghost" class="absolute top-3 right-2" size="sm" icon {...props}>
 						<X aria-hidden="true" size={16} />
-						<span class="sr-only">Close</span>
+						<span class="sr-only">{closeLabel}</span>
 					</Button>
 				{/snippet}
 			</SheetPrimitive.Close>

package/src/shadcn/sheet/sheet-content.svelte.d.ts

@@ -9,6 +9,8 @@ type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
     portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
     side?: Side;
     showCloseButton?: boolean;
+    /** What a screen reader calls the built-in close button, in the app's language. */
+    closeLabel?: string;
     /**
      * From `sm` up a left or right sheet floats 8px off the edge, like SidePanel;
      * `floating={false}` keeps it flush. A phone stays full bleed for the width.

package/src/shadcn/sidebar/sidebar-rail.svelte

@@ -7,8 +7,12 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		label = "Toggle Sidebar",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+		/** The rail's name and hover tooltip, in the app's language. */
+		label?: string;
+	} = $props();
 
 	const sidebar = useSidebar();
 </script>
@@ -17,10 +21,10 @@
 	bind:this={ref}
 	data-sidebar="rail"
 	data-slot="sidebar-rail"
-	aria-label="Toggle Sidebar"
+	aria-label={label}
 	tabindex={-1}
 	onclick={sidebar.toggle}
-	title="Toggle Sidebar"
+	title={label}
 	class={cn(
 		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[background-color,transform,inset] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
 		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",

package/src/shadcn/sidebar/sidebar-rail.svelte.d.ts

@@ -1,5 +1,9 @@
 import { type WithElementRef } from "../../lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}, "ref">;
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    /** The rail's name and hover tooltip, in the app's language. */
+    label?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/sidebar/sidebar-trigger.svelte

@@ -9,9 +9,12 @@
 		ref = $bindable(null),
 		class: className,
 		onclick,
+		label = "Toggle Sidebar",
 		...restProps
 	}: ComponentProps<typeof Button> & {
 		onclick?: (e: MouseEvent) => void;
+		/** What a screen reader calls the icon-only button, in the app's language. */
+		label?: string;
 	} = $props();
 
 	const sidebar = useSidebar();
@@ -35,5 +38,5 @@
 	{...restProps}
 >
 	<SidebarSimple aria-hidden="true" size={16} />
-	<span class="sr-only">Toggle Sidebar</span>
+	<span class="sr-only">{label}</span>
 </Button>

package/src/shadcn/sidebar/sidebar-trigger.svelte.d.ts

@@ -2,6 +2,8 @@ import { Button } from "../button/index.js";
 import type { ComponentProps } from "svelte";
 type $$ComponentProps = ComponentProps<typeof Button> & {
     onclick?: (e: MouseEvent) => void;
+    /** What a screen reader calls the icon-only button, in the app's language. */
+    label?: string;
 };
 declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/thread/index.ts

@@ -13,6 +13,7 @@ export type {
   ThreadAuthorKind,
   ThreadComment,
   ThreadEvent,
+  ThreadEventRecord,
   ThreadItem,
   ThreadLabels,
   ThreadNode,

package/src/thread/thread-events.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import * as TraceUI from "../shadcn/trace/index.js";
+	import { TagChip } from "../components/chip/index.js";
 	import type { ThreadEvent } from "./types.js";
 
 	interface Props {
@@ -8,6 +9,16 @@
 	}
 
 	let { events, when }: Props = $props();
+
+	const TOKEN = "{record}";
+
+	// The sentence around the chip. No token puts the chip at the end, so an older event with a
+	// record and a plain title still reads in order.
+	function split(event: ThreadEvent): [string, string] {
+		const at = event.title.indexOf(TOKEN);
+		if (at < 0) return [`${event.title} `, ""];
+		return [event.title.slice(0, at), event.title.slice(at + TOKEN.length)];
+	}
 </script>
 
 <!-- ps-1 centres each 16px icon in the 24px avatar column the comments use. -->
@@ -19,9 +30,27 @@
 				<TraceUI.Icon class="mt-px"><Icon size={14} /></TraceUI.Icon>
 			{/if}
 			<!-- Wraps, not truncates: a status name can be a sentence, and a touch screen has no hover title. -->
-			<TraceUI.Title class="flex-1 whitespace-normal text-pretty [overflow-wrap:anywhere]"
-				>{event.title}</TraceUI.Title
-			>
+			<TraceUI.Title class="flex-1 whitespace-normal text-pretty [overflow-wrap:anywhere]">
+				{#if event.record}
+					{@const record = event.record}
+					{@const [before, after] = split(event)}
+					{before}{#if record.href}<a
+							href={record.href}
+							class="rounded-sm align-middle outline-none focus-visible:shadow-[var(--ring-focus)]"
+							><TagChip>
+								{#snippet icon()}{#if record.icon}{@const RecordIcon = record.icon}<RecordIcon
+											aria-hidden="true"
+										/>{/if}{/snippet}{record.label}</TagChip
+							></a
+						>{:else}<TagChip class="align-middle">
+							{#snippet icon()}{#if record.icon}{@const RecordIcon = record.icon}<RecordIcon
+										aria-hidden="true"
+									/>{/if}{/snippet}{record.label}</TagChip
+						>{/if}{after}
+				{:else}
+					{event.title}
+				{/if}
+			</TraceUI.Title>
 			<TraceUI.Description>
 				<time datetime={event.at}>{when(event)}</time>
 			</TraceUI.Description>

package/src/thread/types.ts

@@ -57,6 +57,16 @@ export type ThreadEvent = {
   /** ISO timestamp. */
   at: string;
   icon?: PhosphorIcon;
+  /** A record the sentence names, drawn as a chip inside it. Write `{record}` in `title` where
+      it goes; without the token it ends the sentence. */
+  record?: ThreadEventRecord;
+};
+
+/** A linked record inside an activity line: a task, a doc, a thread. */
+export type ThreadEventRecord = {
+  label: string;
+  href?: string;
+  icon?: PhosphorIcon;
 };
 
 /** The thread in time order: a conversation, or a run of events between two of them. */

package/src/work/task-gantt.svelte

@@ -73,6 +73,8 @@
 		/** Width of the task column in px. It never takes more than 40% of a narrow screen. */
 		labelWidth?: number;
 		labelHeading?: string;
+		/** What a screen reader calls the list of bars. */
+		timelineLabel?: string;
 		locale?: string;
 		/** Drops the card chrome (border, radius, fill) so the chart sits flat on the page. */
 		flat?: boolean;
@@ -105,6 +107,7 @@
 		rowHeight = 40,
 		labelWidth = 240,
 		labelHeading = "Task",
+		timelineLabel = "Timeline",
 		locale = "en-US",
 		flat = false,
 		class: className,
@@ -227,7 +230,7 @@
 				draggingId={drag?.id ?? null}
 			/>
 
-			<div role="list" aria-label="Timeline">
+			<div role="list" aria-label={timelineLabel}>
 				{#each rows as row, index (row.kind === "group" ? `g:${row.group.id}` : row.id)}
 					{#if row.kind === "group"}
 						<GanttGroupRow {row} {index} {layout} staggerCap={STAGGER_CAP} />

package/src/work/task-gantt.svelte.d.ts

@@ -50,6 +50,8 @@ interface Props<T> {
     /** Width of the task column in px. It never takes more than 40% of a narrow screen. */
     labelWidth?: number;
     labelHeading?: string;
+    /** What a screen reader calls the list of bars. */
+    timelineLabel?: string;
     locale?: string;
     /** Drops the card chrome (border, radius, fill) so the chart sits flat on the page. */
     flat?: boolean;