@heyramzi/ui 3.8.0 → 3.9.1

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/dist/lib/safe-href.js

@@ -0,0 +1,13 @@
+// WHY: Svelte writes an href into the page as given, and following an <a href="javascript:...">
+// (or setting location to one) runs that script in the page's origin, with the viewer's session.
+const SCRIPT_SCHEME = /^(?:javascript|vbscript):/i;
+/**
+* The href as given, or undefined when following it would run script. App routes, https,
+* mailto and app schemes like descript: pass, so a link a component builds from data stays a link.
+*/
+export function safeHref(href) {
+	if (!href) return undefined;
+	// WHY: the URL parser drops tabs, newlines and leading spaces or control bytes, so " java\tscript:" is javascript:.
+	const probe = [...href].filter((c) => c.charCodeAt(0) > 32 && c.charCodeAt(0) !== 127).join("");
+	return SCRIPT_SCHEME.test(probe) ? undefined : href;
+}

package/dist/record/fields.js

@@ -4,6 +4,20 @@ import { formatDay, formatMoney } from "./format.js";
 function hasOptions(field) {
 	return field.type === "choice" || field.type === "multi";
 }
+const WEB_PROTOCOLS = new Set([
+	"http:",
+	"https:",
+	"mailto:"
+]);
+/** A url field's link: http, https or mailto only. Anything else, javascript: above all, shows as text. */
+function webLink(text) {
+	try {
+		const url = new URL(text);
+		return WEB_PROTOCOLS.has(url.protocol) ? url.href : undefined;
+	} catch {
+		return undefined;
+	}
+}
 function isEmpty(value) {
 	return value == null || value === "" || Array.isArray(value) && value.length === 0;
 }
@@ -107,7 +121,7 @@ export function fieldRow(field, value, ctx = {}) {
 				break;
 			case "url":
 				row.value = String(value).replace(/^https?:\/\/(www\.)?/, "").replace(/\/$/, "");
-				row.href = String(value);
+				row.href = webLink(String(value));
 				break;
 			case "email":
 				row.value = String(value);

package/package.json

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

@@ -42,6 +42,7 @@
 	 * optional pager. A row opens by `rowHref` or `onRowClick`, stretched over the row from the lead.
 	 */
 	import { cn } from "../../lib/utils.js";
+	import { safeHref } from "../../lib/safe-href.js";
 	import RatingChip from "./rating-chip.svelte";
 	import Hint from "./hint.svelte";
 	import {
@@ -216,7 +217,7 @@
 					<tr class={cn(dataTrClass, "group", opens && "relative cursor-pointer")}>
 						<td class={cn(dataTdClass, "py-3")}>
 							{#if rowHref}
-								<a href={rowHref(row)} class={stretch}>{@render lead(row)}</a>
+								<a href={safeHref(rowHref(row))} class={stretch}>{@render lead(row)}</a>
 							{:else if onRowClick}
 								<button type="button" class={stretch} onclick={() => onRowClick(row)}>
 									{@render lead(row)}

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/data-table/row-context-menu.svelte

@@ -6,6 +6,7 @@
 	import { HoldToConfirm } from "../hold-to-confirm/index.js";
 	import { ArrowUpRight, Copy, LinkSimple, Trash } from "phosphor-svelte";
 	import { copyText } from "../copy/clipboard.js";
+	import { safeHref } from "../../lib/safe-href.js";
 	import type { Snippet } from "svelte";
 	import { MENU_KEYS, openMenuFromKey } from "./menu-key.js";
 
@@ -42,7 +43,8 @@
 	// FUNCTIONS
 	// =========================
 	function handleOpen() {
-		if (href) window.location.href = href;
+		const target = safeHref(href);
+		if (target) window.location.href = target;
 	}
 
 	// WHY the whole URL and not the path: what leaves this menu is pasted into a
@@ -68,7 +70,7 @@
 		{/snippet}
 	</ContextMenu.Trigger>
 	<ContextMenu.Content class="w-48">
-		{#if href}
+		{#if safeHref(href)}
 			<ContextMenu.Item onclick={handleOpen}>
 				<ArrowUpRight aria-hidden="true" size={14} />
 				Open

package/src/components/open-in/open-in.svelte

@@ -25,6 +25,7 @@
 	// =========================
 	import { ArrowSquareOut } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import { safeHref } from "../../lib/safe-href.js";
 	import { buttonVariants } from "../../shadcn/button/index.js";
 
 	// =========================
@@ -78,7 +79,7 @@
 	onkeydown={(e) => e.stopPropagation()}
 >
 	<a
-		{href}
+		href={safeHref(href)}
 		target="_blank"
 		rel="noopener noreferrer"
 		aria-label={action}

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/inbox/thread-inbox.svelte

@@ -38,6 +38,7 @@
 	} from "../thread/index.js";
 	import InboxCard from "../work/inbox/inbox-card.svelte";
 	import { whenOf } from "../work/inbox/inbox-logic.js";
+	import { safeHref } from "../lib/safe-href.js";
 	import type { InboxItem, InboxVerdict } from "../work/inbox/inbox-types.js";
 	import {
 		NO_FILTER,
@@ -490,8 +491,8 @@
 								<Check aria-hidden="true" />{labels.clear}
 							</Button>
 						{/if}
-						{#if current.subject.href}
-							<Button size="sm" variant="ghost" href={current.subject.href}>
+						{#if safeHref(current.subject.href)}
+							<Button size="sm" variant="ghost" href={safeHref(current.subject.href)}>
 								<ArrowSquareOut aria-hidden="true" />{labels.open}
 							</Button>
 						{/if}

package/src/lib/safe-href.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vite-plus/test";
+import { safeHref } from "./safe-href.js";
+
+describe("safeHref", () => {
+  it.each([
+    "/clients/42",
+    "#notes",
+    "https://example.com/a?b=1",
+    "mailto:hi@example.com",
+    "tel:+33123456789",
+    "descript://project/abc",
+  ])("keeps %s, which runs no script", (href) => {
+    expect(safeHref(href)).toBe(href);
+  });
+
+  // The record url finding's payload, and the spellings the URL parser reads as the same scheme.
+  it.each([
+    "javascript:alert(document.domain)",
+    "JavaScript:alert(1)",
+    " javascript:alert(1)",
+    "java\tscript:alert(1)",
+    "java\nscript:alert(1)",
+    "\u0001javascript:alert(1)",
+    "vbscript:msgbox(1)",
+  ])("drops %j, which runs script when followed", (href) => {
+    expect(safeHref(href)).toBeUndefined();
+  });
+
+  it("treats a missing href as no link", () => {
+    expect(safeHref(null)).toBeUndefined();
+    expect(safeHref(undefined)).toBeUndefined();
+    expect(safeHref("")).toBeUndefined();
+  });
+});

package/src/lib/safe-href.ts

@@ -0,0 +1,14 @@
+// WHY: Svelte writes an href into the page as given, and following an <a href="javascript:...">
+// (or setting location to one) runs that script in the page's origin, with the viewer's session.
+const SCRIPT_SCHEME = /^(?:javascript|vbscript):/i;
+
+/**
+ * The href as given, or undefined when following it would run script. App routes, https,
+ * mailto and app schemes like descript: pass, so a link a component builds from data stays a link.
+ */
+export function safeHref(href: string | null | undefined): string | undefined {
+  if (!href) return undefined;
+  // WHY: the URL parser drops tabs, newlines and leading spaces or control bytes, so " java\tscript:" is javascript:.
+  const probe = [...href].filter((c) => c.charCodeAt(0) > 32 && c.charCodeAt(0) !== 127).join("");
+  return SCRIPT_SCHEME.test(probe) ? undefined : href;
+}

package/src/record/fields.ts

@@ -15,6 +15,18 @@ function hasOptions(field: FieldDef): field is Extract<FieldDef, { type: "choice
 
 export type FieldValues = Record<string, FieldValue | undefined>;
 
+const WEB_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+
+/** A url field's link: http, https or mailto only. Anything else, javascript: above all, shows as text. */
+function webLink(text: string): string | undefined {
+  try {
+    const url = new URL(text);
+    return WEB_PROTOCOLS.has(url.protocol) ? url.href : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 function isEmpty(value: FieldValue | undefined): boolean {
   return value == null || value === "" || (Array.isArray(value) && value.length === 0);
 }
@@ -144,7 +156,7 @@ export function fieldRow(
         row.value = String(value)
           .replace(/^https?:\/\/(www\.)?/, "")
           .replace(/\/$/, "");
-        row.href = String(value);
+        row.href = webLink(String(value));
         break;
       case "email":
         row.value = String(value);

package/src/record/info-list.svelte

@@ -14,6 +14,7 @@
 	import { TagsInput } from "../components/tags-input/index.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import { resolveLabels, type InfoRow, type RecordLabels } from "./types.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	// =========================
 	// PROPS
@@ -171,9 +172,9 @@
 		<StatusBadge tone={row.tone} capitalize={false} class="w-fit max-w-full"
 			>{row.value}</StatusBadge
 		>
-	{:else if row.href && row.value}
+	{:else if safeHref(row.href) && row.value}
 		<a
-			href={row.href}
+			href={safeHref(row.href)}
 			title={row.value}
 			class={cn(
 				"min-w-0 truncate text-sm font-medium underline-offset-2 hover:underline",

package/src/record/info-list.test.ts

@@ -0,0 +1,26 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import InfoList from "./info-list.svelte";
+
+describe("InfoList", () => {
+  // A host can fill InfoRow.href itself, so the list checks the scheme at the anchor too.
+  it("draws a javascript: href as plain text and keeps an https one a link", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const app = mount(InfoList, {
+      target,
+      props: {
+        rows: [
+          { label: "Website", value: "click me", href: "javascript:alert(document.domain)" },
+          { label: "Docs", value: "example.com", href: "https://example.com/" },
+        ],
+      },
+    });
+    flushSync();
+    const hrefs = [...target.querySelectorAll("a")].map((a) => a.getAttribute("href"));
+    expect(hrefs).toEqual(["https://example.com/"]);
+    expect(target.textContent).toContain("click me");
+    void unmount(app);
+    target.remove();
+  });
+});

package/src/record/next-up.svelte

@@ -10,6 +10,7 @@
 	import { formatRange } from "./format.js";
 	import { todayIso } from "../work/dates.js";
 	import { resolveLabels, type RecordLabels, type RecordNext } from "./types.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	// =========================
 	// PROPS
@@ -61,8 +62,8 @@
 				>{when}</span
 			>
 		{/if}
-		{#if next.href}
-			<a href={next.href} class="min-w-0 truncate underline-offset-2 hover:underline"
+		{#if safeHref(next.href)}
+			<a href={safeHref(next.href)} class="min-w-0 truncate underline-offset-2 hover:underline"
 				>{next.label}</a
 			>
 		{:else}

package/src/record/project-list.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../lib/utils.js";
+	import { safeHref } from "../lib/safe-href.js";
 	import { Progress } from "../shadcn/progress/index.js";
 	import { TONE_TEXT } from "../lib/tone.js";
 	import StatusBadge from "../status/status-badge.svelte";
@@ -115,10 +116,11 @@
 	<ul class={cn("flex flex-col gap-1", className)}>
 		{#each projects as project (project.id)}
 			{@const active = project.id === activeId}
+			{@const href = safeHref(project.href)}
 			<li>
-				{#if project.href}
+				{#if href}
 					<a
-						href={project.href}
+						{href}
 						aria-current={active ? "page" : undefined}
 						class={cn(
 							"flex flex-col gap-1.5 rounded-lg px-2 py-2 transition-colors any-pointer-coarse:py-3",

package/src/record/record-header.svelte

@@ -8,6 +8,7 @@
 	import type { Tone } from "../lib/tone.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import { gutterClass } from "./gutter.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	// =========================
 	// PROPS
@@ -45,7 +46,7 @@
 <header class={cn("flex flex-col gap-2 border-b border-border py-3", gutterClass, className)}>
 	{#if parent}
 		<a
-			href={parent.href}
+			href={safeHref(parent.href)}
 			class="-ml-1 inline-flex min-h-6 w-fit max-w-full items-center gap-0.5 rounded-sm text-sm text-muted-foreground transition-colors hover:text-foreground any-pointer-coarse:min-h-11"
 		>
 			<CaretLeft class="size-3.5 shrink-0" aria-hidden="true" />

package/src/record/record-timeline.svelte

@@ -14,6 +14,7 @@
 	import { DEFAULT_RECORD_FILTERS, DEFAULT_RECORD_KINDS } from "./kinds.js";
 	import { formatDayHeader, formatMoney, formatTime } from "./format.js";
 	import { measureClamp } from "./measure-clamp.js";
+	import { safeHref } from "../lib/safe-href.js";
 	import {
 		dayRelation,
 		eventsForFilter,
@@ -172,9 +173,9 @@
 										{@render custom(event)}
 									{:else}
 										<p class="text-sm leading-snug font-medium wrap-anywhere">
-											{#if event.href}
+											{#if safeHref(event.href)}
 												<a
-													href={event.href}
+													href={safeHref(event.href)}
 													class="-my-1 inline-block py-1 underline-offset-2 hover:underline"
 													>{event.title}</a
 												>
@@ -235,7 +236,7 @@
 										{#if showProject && event.projectName}
 											<Badge
 												variant="outline"
-												href={event.projectHref ?? undefined}
+												href={safeHref(event.projectHref)}
 												class="max-w-48 truncate"
 											>
 												{event.projectName}

package/src/record/record.test.ts

@@ -423,6 +423,25 @@ describe("fields", () => {
     expect(saved).toEqual([["budget", 9000]]);
   });
 
+  // The audit's finding: a url field rendered whatever scheme an editor saved as a live link.
+  it("links a url field only to http, https or mailto, and shows anything else as text", () => {
+    const site: FieldDef = { key: "site", label: "Website", type: "url" };
+    expect(fieldRow(site, "https://www.example.com/").href).toBe("https://www.example.com/");
+    expect(fieldRow(site, "http://example.com").href).toBe("http://example.com/");
+    expect(fieldRow(site, "mailto:hi@example.com").href).toBe("mailto:hi@example.com");
+    for (const hostile of [
+      "javascript:alert(document.domain)",
+      " javascript:alert(1)",
+      "java\tscript:alert(1)",
+      "data:text/html,<script>alert(1)</script>",
+      "vbscript:msgbox(1)",
+    ]) {
+      const row = fieldRow(site, hostile);
+      expect(row.href).toBeUndefined();
+      expect(row.value).toBe(hostile);
+    }
+  });
+
   it("leaves a row read-only when no onSave is given, and empty values undrawn", () => {
     const row = fieldRow(size, null);
     expect(row.onSave).toBeUndefined();

package/src/record/where-we-are.svelte

@@ -11,6 +11,7 @@
 	import { formatAge } from "./format.js";
 	import { measureClamp } from "./measure-clamp.js";
 	import { resolveLabels, type RecordLabels } from "./types.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	// =========================
 	// PROPS
@@ -74,9 +75,9 @@
 			>
 				<span class="font-medium text-foreground">{t.whereWeAre}</span>
 				{#if project}
-					{#if project.href}
+					{#if safeHref(project.href)}
 						<a
-							href={project.href}
+							href={safeHref(project.href)}
 							class="font-medium text-foreground underline-offset-2 hover:underline"
 							>{project.name}</a
 						>

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,6 +1,8 @@
 <script lang="ts">
 	import * as TraceUI from "../shadcn/trace/index.js";
+	import { TagChip } from "../components/chip/index.js";
 	import type { ThreadEvent } from "./types.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	interface Props {
 		events: ThreadEvent[];
@@ -8,6 +10,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 +31,28 @@
 				<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)}
+					{@const recordHref = safeHref(record.href)}
+					{before}{#if recordHref}<a
+							href={recordHref}
+							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/triage/triage-task.svelte

@@ -2,6 +2,7 @@
 	import { Button } from "../shadcn/button/index.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import { cn } from "../lib/utils.js";
+	import { safeHref } from "../lib/safe-href.js";
 	import {
 		DEFAULT_TRIAGE_TASK_LABELS,
 		type TriageOutcome,
@@ -72,7 +73,7 @@
 			<StatusBadge tone={outcome.tone} capitalize={false}>{outcome.label}</StatusBadge>
 			{#if task}
 				<a
-					href={task.url}
+					href={safeHref(task.url)}
 					target="_blank"
 					rel="noreferrer"
 					class="text-primary min-w-0 text-xs [overflow-wrap:anywhere] hover:underline"

package/src/work/inbox/inbox-card.svelte

@@ -32,6 +32,7 @@
 	import { FolderSimple } from "phosphor-svelte";
 	import { Copied } from "../../components/copy/copied.svelte.js";
 	import type { InboxDraftEdits, InboxItem, InboxVerdict } from "./inbox-types.js";
+	import { safeHref } from "../../lib/safe-href.js";
 
 	interface Props {
 		item: InboxItem;
@@ -261,9 +262,9 @@
 					{/if}
 					<span class={FACT}>
 						<!-- The linked record is a chip inside the line, a link when the project has a page. -->
-						{#if item.project.href}
+						{#if safeHref(item.project.href)}
 							<a
-								href={item.project.href}
+								href={safeHref(item.project.href)}
 								class={workLooks.chipLink}
 								aria-label="Project: {item.project.name}"
 							>

package/src/work/inbox/inbox-trace.svelte

@@ -2,6 +2,7 @@
 	import { Brain } from "phosphor-svelte";
 	import * as Trace from "../../shadcn/trace/index.js";
 	import type { InboxTrace } from "./inbox-types.js";
+	import { safeHref } from "../../lib/safe-href.js";
 
 	interface Props {
 		trace: InboxTrace;
@@ -30,12 +31,13 @@
 	</Trace.CollapsibleTrigger>
 	<Trace.CollapsibleContent class="mt-3 mb-0 ml-0 border-l-2 pr-0 pl-3">
 		<div class="flex flex-col gap-3">
-			{#if label || trace.source.href}
+			{#if label || safeHref(trace.source.href)}
 				<p class="text-foreground">
 					{label}
-					{#if trace.source.href}
-						<a href={trace.source.href} class="text-foreground underline underline-offset-2"
-							>Open source</a
+					{#if safeHref(trace.source.href)}
+						<a
+							href={safeHref(trace.source.href)}
+							class="text-foreground underline underline-offset-2">Open source</a
 						>
 					{/if}
 				</p>

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;