@heyramzi/ui 2.23.0 → 2.24.0

package/src/components/data-table/sortable-head.svelte

@@ -1,4 +1,10 @@
 <script lang="ts" generics="T">
+	/*
+	 * The one sortable column head, for TableView, the dashboard DataTable and hand-built
+	 * tables. Every sortable head shows its caret: hover-only makes people hunt.
+	 */
+
+	// ========================= IMPORTS
 	import type { Snippet } from "svelte";
 	import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
@@ -8,21 +14,36 @@
 	interface Props {
 		key: keyof T & string;
 		sort: SortState<T>;
+		/** Called on click and on Enter/Space. Choosing the next direction is the caller's. */
 		onSort: (key: keyof T & string) => void;
+		/** Numbers right-align to their digits, so their caret leads the label. */
+		numeric?: boolean;
+		/** The long form of an abbreviated head, as the browser tooltip. */
+		title?: string;
 		class?: string;
+		style?: string;
 		children: Snippet;
 	}
 
 	// ========================= PROPS
-	let { key, sort, onSort, class: className, children }: Props = $props();
+	let {
+		key,
+		sort,
+		onSort,
+		numeric = false,
+		title,
+		class: className,
+		style,
+		children,
+	}: Props = $props();
 
 	// ========================= DERIVED
-	let active = $derived(sort?.key === key);
-	let direction = $derived<SortDirection | null>(sort && active ? sort.direction : null);
+	let direction = $derived<SortDirection | null>(sort?.key === key ? sort.direction : null);
 	let ariaSort = $derived<"ascending" | "descending" | "none">(
 		direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
 	);
 
+	// ========================= FUNCTIONS
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
@@ -33,9 +54,14 @@
 
 <th
 	data-slot="table-head"
+	scope="col"
+	{title}
+	{style}
 	class={cn(
 		"text-muted-foreground h-8 px-2 text-left align-middle text-xs font-medium whitespace-nowrap select-none",
 		"cursor-pointer transition-colors duration-quick ease-smooth-out hover:bg-foreground/4 motion-reduce:transition-none",
+		"outline-none focus-visible:shadow-(--ring-focus-inset)",
+		numeric && "text-right",
 		className,
 	)}
 	tabindex="0"
@@ -43,14 +69,23 @@
 	onclick={() => onSort(key)}
 	onkeydown={handleKeydown}
 >
-	<span class="inline-flex items-center gap-1">
-		{@render children()}
-		{#if direction === "asc"}
-			<CaretUp class="size-3.5 text-foreground" weight="bold" />
-		{:else if direction === "desc"}
-			<CaretDown class="size-3.5 text-foreground" weight="bold" />
+	<!-- Pinned to the line's top, not its baseline: a leading caret gave the span the icon's foot
+	     as its baseline and lifted a numeric label 1.5px above the plain heads beside it. -->
+	<span class="inline-flex items-center gap-1 align-top">
+		{#if numeric}
+			{@render caret()}{@render children()}
 		{:else}
-			<CaretUpDown class="size-3.5 text-muted-foreground" />
+			{@render children()}{@render caret()}
 		{/if}
 	</span>
 </th>
+
+{#snippet caret()}
+	{#if direction === "asc"}
+		<CaretUp class="size-3.5 shrink-0 text-foreground" weight="bold" aria-hidden="true" />
+	{:else if direction === "desc"}
+		<CaretDown class="size-3.5 shrink-0 text-foreground" weight="bold" aria-hidden="true" />
+	{:else}
+		<CaretUpDown class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+	{/if}
+{/snippet}

package/src/components/language-flag/flags.ts

@@ -0,0 +1,5 @@
+/** Language code to flag image. The host serves these files from /flags. */
+export const LANGUAGE_FLAGS: Record<string, string> = {
+  en: "/flags/US.svg",
+  fr: "/flags/FR.svg",
+};

package/src/components/language-flag/index.ts

@@ -1 +1,2 @@
 export { default as LanguageFlag } from "./language-flag.svelte";
+export { LANGUAGE_FLAGS } from "./flags.js";

package/src/components/language-flag/language-flag.svelte

@@ -3,22 +3,14 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../../lib/utils.js";
-
-	// =========================
-	// CONSTANTS
-	// =========================
-	// The host serves these files from /flags. Pass `flags` for another set or path.
-	const DEFAULT_FLAGS: Record<string, string> = {
-		en: "/flags/US.svg",
-		fr: "/flags/FR.svg",
-	};
+	import { LANGUAGE_FLAGS } from "./flags.js";
 
 	// =========================
 	// PROPS
 	// =========================
 	interface Props {
 		language: string;
-		/** Language code to image URL. */
+		/** Language code to image URL, for another set or path. */
 		flags?: Record<string, string>;
 		size?: "sm" | "md";
 		showLabel?: boolean;
@@ -27,7 +19,7 @@
 
 	let {
 		language,
-		flags = DEFAULT_FLAGS,
+		flags = LANGUAGE_FLAGS,
 		size = "sm",
 		showLabel = false,
 		class: className,

package/src/components/list-page/empty-state.svelte

@@ -2,8 +2,10 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import type { Snippet } from "svelte";
 	import { Button } from "../../shadcn/button/index.js";
 	import * as Empty from "../../shadcn/empty/index.js";
+	import { cn } from "../../lib/utils.js";
 	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 
 	// =========================
@@ -12,25 +14,93 @@
 	interface Props {
 		icon?: PhosphorIcon;
 		iconWeight?: IconWeight;
+		/** Replaces the muted colour of a bare icon. Ignored by the tile, which stays foreground. */
+		iconClass?: string;
 		title: string;
 		description?: string;
 		actionLabel?: string;
 		actionHref?: string;
 		onAction?: () => void;
+		/** Several ways out, drawn in one row after the single action. */
+		actions?: Snippet;
+		/** `card` fills the white panel; `dashed` frames a whole dashboard section. */
+		surface?: "plain" | "card" | "dashed";
+		/** `sm` fits a 280px rail: a bare icon and one line of small type. */
+		size?: "default" | "sm";
+		class?: string;
 	}
 
+	/** A null `icon` draws the icon in a white tile. */
+	type Look = {
+		root: string;
+		icon: string | null;
+		header: string;
+		title: string;
+		description: string;
+	};
+
 	// =========================
 	// PROPS
 	// =========================
 	let {
 		icon: Icon,
 		iconWeight,
+		iconClass,
 		title,
 		description,
 		actionLabel,
 		actionHref,
 		onAction,
+		actions,
+		surface = "plain",
+		size = "default",
+		class: className,
 	}: Props = $props();
+
+	// =========================
+	// CONSTANTS
+	// =========================
+	// A white tile, not a brand tint: the accent marks the one action (DESIGN.md rule 1).
+	const PAGE: Look = {
+		root: "py-16",
+		icon: null,
+		header: "max-w-md",
+		title: "font-heading text-base font-semibold text-balance [overflow-wrap:anywhere]",
+		description: "",
+	};
+
+	const RAIL: Look = {
+		root: "gap-2 px-6 py-12",
+		icon: "size-6",
+		header: "max-w-none",
+		title: "",
+		description: "max-w-56 text-xs leading-relaxed",
+	};
+
+	// A dashed box stands in for a whole dashboard section, so it takes a heading's size.
+	const SECTION: Look = {
+		root: "p-10 text-wrap",
+		icon: "size-10",
+		header: "max-w-md gap-1.5",
+		title: "font-heading text-lg font-semibold tracking-normal",
+		description: "text-sm",
+	};
+
+	// A framed box sizes as a block, so a caller's `m-4` insets it instead of pushing it 32px wide.
+	const SURFACE: Record<NonNullable<Props["surface"]>, string> = {
+		plain: "",
+		card: "w-auto flex-initial bg-card",
+		dashed: "w-auto flex-initial border-2 border-border",
+	};
+
+	// =========================
+	// DERIVED
+	// =========================
+	let look = $derived(size === "sm" ? RAIL : surface === "dashed" ? SECTION : PAGE);
+	// Dashboard empties carry their own `t-enter`, and a rail empty flips on every filter keystroke.
+	let reveal = $derived(look === PAGE);
+	let heading = $derived(look === SECTION);
+	let hasAction = $derived(Boolean(actionLabel && (actionHref || onAction)));
 </script>
 
 <!-- =========================== -->
@@ -38,29 +108,37 @@
 <!-- =========================== -->
 <!-- transitions-dev texts reveal: the parts arrive in reading order, so the page reads as
      loaded and empty. Reduced motion keeps the fade. -->
-<Empty.Root class="t-empty py-16">
-	<Empty.Header class="max-w-md">
-		{#if Icon}
-			<!-- A white tile, not a brand tint: the accent marks the one action (DESIGN.md
-			     rule 1), and the button below is it. -->
+<Empty.Root class={cn(reveal && "t-empty", look.root, SURFACE[surface], className)}>
+	{#if Icon && look.icon}
+		<Icon
+			weight={iconWeight}
+			class={cn(look.icon, iconClass ?? "text-muted-foreground")}
+			aria-hidden="true"
+		/>
+	{/if}
+	<Empty.Header class={look.header}>
+		{#if Icon && !look.icon}
 			<Empty.Media class="mb-3 size-12 rounded-xl bg-card text-foreground shadow-card">
 				<Icon weight={iconWeight} class="size-6" />
 			</Empty.Media>
 		{/if}
-		<Empty.Title class="font-heading text-base font-semibold text-balance [overflow-wrap:anywhere]"
-			>{title}</Empty.Title
+		<Empty.Title
+			class={look.title}
+			role={heading ? "heading" : undefined}
+			aria-level={heading ? 2 : undefined}>{title}</Empty.Title
 		>
 		{#if description}
-			<Empty.Description>{description}</Empty.Description>
+			<Empty.Description class={look.description}>{description}</Empty.Description>
 		{/if}
 	</Empty.Header>
-	{#if actionLabel && (actionHref || onAction)}
-		<Empty.Content>
-			{#if actionHref}
+	{#if hasAction || actions}
+		<Empty.Content class="max-w-md flex-row flex-wrap justify-center gap-2">
+			{#if hasAction && actionHref}
 				<Button href={actionHref}>{actionLabel}</Button>
-			{:else}
+			{:else if hasAction}
 				<Button onclick={onAction}>{actionLabel}</Button>
 			{/if}
+			{@render actions?.()}
 		</Empty.Content>
 	{/if}
 </Empty.Root>

package/src/components/list-page/filter-popover.svelte

@@ -8,6 +8,7 @@
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
 	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+	import CountChip from "../chip/count-chip.svelte";
 	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 	// phosphor-svelte v2 (resolved here) and v3 (what consumers run) differ only in
@@ -70,11 +71,7 @@
 			{@render trailing()}
 		{/if}
 		{#if hasCount}
-			<span
-				class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand/12 px-1 text-xs leading-none font-semibold text-brand tabular-nums dark:text-brand-light"
-			>
-				{count.toLocaleString()}
-			</span>
+			<CountChip {count} size="sm" tone="brand" class="ml-0.5" />
 		{/if}
 	</Popover.Trigger>
 	<Popover.Content class={cn("p-2", width, contentClass)} {align}>

package/src/components/list-page/grouped-list.svelte

@@ -6,6 +6,7 @@
 	import { SvelteSet } from "svelte/reactivity";
 	import { CaretDown, Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -110,10 +111,7 @@
 					/>
 					{@render header(group, { collapsed: isCollapsed })}
 					{#if getCount}
-						<span
-							class="rounded-full bg-foreground/6 px-1.5 text-xs leading-5 font-medium text-muted-foreground tabular-nums"
-							>{getCount(group)}</span
-						>
+						<CountChip count={getCount(group)} />
 					{/if}
 				</button>
 				{#if actions}

package/src/components/list-page/index.ts

@@ -1,6 +1,5 @@
-export { default as DetailEmpty } from "./detail-empty.svelte";
 export { default as DetailHeader } from "./detail-header.svelte";
-export { default as DetailPanel } from "./detail-panel.svelte";
+export { default as DetailPanel } from "../../lib/panel.svelte";
 export { default as DetailRow } from "./detail-row.svelte";
 export { default as DetailStack } from "./detail-stack.svelte";
 export { default as EmptyState } from "./empty-state.svelte";
@@ -9,7 +8,6 @@ export { default as PrevNext } from "./prev-next.svelte";
 export { stepTo } from "./step.js";
 export { default as NoticeBar } from "./notice-bar.svelte";
 export { default as RailBody } from "./rail-body.svelte";
-export { default as RailEmpty } from "./rail-empty.svelte";
 export { default as RailHead } from "./rail-head.svelte";
 export { default as RailRow } from "./rail-row.svelte";
 export { default as SectionLabel } from "../section-header/section-label.svelte";

package/src/components/section-header/section-header.svelte

@@ -4,6 +4,7 @@
 	// =========================
 	import type { Snippet } from "svelte";
 	import SectionLabel from "./section-label.svelte";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -36,12 +37,7 @@
 		<svelte:element this={`h${level}`} class="flex items-center gap-2">
 			<SectionLabel class="min-w-0 [overflow-wrap:anywhere]">{title}</SectionLabel>
 			{#if count !== undefined}
-				<span
-					class="shrink-0 rounded-full bg-foreground/6 px-1.5 py-0.5 text-xs leading-none font-medium tabular-nums text-muted-foreground"
-					aria-label={`${count.toLocaleString()} ${countLabel}`}
-				>
-					{count.toLocaleString()}
-				</span>
+				<CountChip {count} size="sm" aria-label={`${count.toLocaleString()} ${countLabel}`} />
 			{/if}
 		</svelte:element>
 		{#if description}

package/src/components/segmented/segment.svelte

@@ -30,8 +30,8 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../../lib/utils.js";
-	import { Icon } from "../icon/index.js";
 	import { Mark } from "../mark/index.js";
+	import CountChip from "../chip/count-chip.svelte";
 
 	// =========================
 	// TYPES
@@ -47,7 +47,7 @@
 	// =========================
 	// PROPS
 	// =========================
-	let { label, count, icon, image, done = false, badge, active = false }: Props = $props();
+	let { label, count, icon: Icon, image, done = false, badge, active = false }: Props = $props();
 
 	// =========================
 	// DERIVED
@@ -69,8 +69,8 @@
 			auto && "group-data-[state=active]/segment:opacity-100",
 		)}
 	/>
-{:else if icon}
-	<Icon {icon} size={16} class="shrink-0" />
+{:else if Icon}
+	<Icon size={16} class="shrink-0" />
 {/if}
 
 {label}
@@ -80,21 +80,15 @@
 {/if}
 
 {#if count != null}
-	<span
-		class={cn(
-			// WHY 16px, not 18: inside a 22px segment, 18 read as a chip nested in the pill.
-
-			// WHY min-width equals height with 4px padding: `min-w-5 px-1.5` made a digit
-			// 20 by 18, so `rounded-full` drew an ellipse.
-			"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xs leading-none font-medium tabular-nums",
-			"bg-foreground/8 text-muted-foreground",
-			on && "bg-brand/14 text-brand",
-			auto &&
-				"group-data-[state=active]/segment:bg-brand/14 group-data-[state=active]/segment:text-brand",
-		)}
-	>
-		{count.toLocaleString()}
-	</span>
+	<!-- WHY 16px, not 18: inside a 22px segment, 18 read as a chip nested in the pill. -->
+	<CountChip
+		{count}
+		size="sm"
+		tone={on ? "brand" : "neutral"}
+		class={auto
+			? "group-data-[state=active]/segment:bg-brand/12 group-data-[state=active]/segment:text-brand dark:group-data-[state=active]/segment:text-brand-light"
+			: undefined}
+	/>
 {:else if done}
 	<span
 		class={cn(

package/src/components/segmented/segmented-filter.svelte

@@ -13,7 +13,6 @@
 		splitSegments,
 	} from "./collapse.js";
 	import { segmentedTriggerClass } from "./segmented.js";
-	import { Icon } from "../icon/index.js";
 	import { Mark } from "../mark/index.js";
 	import { CaretDown } from "phosphor-svelte";
 	import { Picker } from "../picker/index.js";
@@ -162,7 +161,7 @@
 							)}
 						/>
 					{:else if markOnly && option.icon}
-						<Icon icon={option.icon} size={16} class="shrink-0" />
+						<option.icon size={16} class="shrink-0" />
 					{:else}
 						<Segment
 							label={option.label}

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

@@ -11,12 +11,12 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
+	import { CaretDown } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import * as Table from "../../shadcn/table/index.js";
 	import * as ContextMenu from "../../shadcn/context-menu/index.js";
 	import { Checkbox } from "../../shadcn/checkbox/index.js";
-	import { TableSkeleton } from "../data-table/index.js";
+	import { SortableHead, TableSkeleton } from "../data-table/index.js";
 	import { toggleSort, type SortState } from "../data-table/data-table.js";
 
 	// =========================
@@ -174,12 +174,6 @@
 		return value === null || value === undefined ? "" : String(value);
 	}
 
-	function ariaSort(column: TableColumn<Row>): "ascending" | "descending" | "none" | undefined {
-		if (!column.sortable) return undefined;
-		if (sort?.key !== column.key) return "none";
-		return sort.direction === "asc" ? "ascending" : "descending";
-	}
-
 	function toggleRow(row: Row, on: boolean) {
 		const next = new Set(selected);
 		if (on) next.add(rowKey(row));
@@ -358,43 +352,35 @@
 					</Table.Head>
 				{/if}
 				{#each columns as column (column.key)}
-					<Table.Head
-						class={cn(
-							"whitespace-normal",
-							column.numeric && "text-end",
-							column.sortable && "h-8 p-0",
-							column.hideBelow && HIDE[column.hideBelow],
-							column.sticky && "bg-card sticky left-0 z-20",
-							column.headClass ?? column.class,
-						)}
-						style={column.width ? `width: ${column.width}` : undefined}
-						aria-sort={ariaSort(column)}
-					>
-						{#if column.sortable}
-							{@const dir = sort?.key === column.key ? sort.direction : null}
-							<button
-								type="button"
-								class={cn(
-									"t-press transition-colors duration-quick ease-smooth-out hover:bg-foreground/4 flex h-8 w-full items-center gap-1 px-2 text-xs font-medium outline-none focus-visible:shadow-(--ring-focus-inset)",
-									column.numeric ? "justify-end" : "justify-start",
-								)}
-								onclick={() => (sort = toggleSort(sort, column.key as keyof Row & string))}
-							>
-								{#if head}{@render head(column)}{:else}{column.label}{/if}
-								{#if dir === "asc"}
-									<CaretUp class="text-foreground size-3.5" weight="bold" aria-hidden="true" />
-								{:else if dir === "desc"}
-									<CaretDown class="text-foreground size-3.5" weight="bold" aria-hidden="true" />
-								{:else}
-									<CaretUpDown class="text-muted-foreground size-3.5" aria-hidden="true" />
-								{/if}
-							</button>
-						{:else if head}
-							{@render head(column)}
-						{:else}
-							{column.label}
-						{/if}
-					</Table.Head>
+					{@const headClass = cn(
+						"whitespace-normal",
+						column.numeric && "text-end",
+						column.hideBelow && HIDE[column.hideBelow],
+						column.sticky && "bg-card sticky left-0 z-20",
+						column.headClass ?? column.class,
+					)}
+					{@const headStyle = column.width ? `width: ${column.width}` : undefined}
+					{#if column.sortable}
+						<!-- A sticky head keeps its card under the hover tint, or rows show through it. -->
+						<SortableHead
+							key={column.key as keyof Row & string}
+							{sort}
+							onSort={(key) => (sort = toggleSort(sort, key))}
+							numeric={column.numeric}
+							class={cn(
+								headClass,
+								column.sticky &&
+									"hover:bg-[color-mix(in_oklab,var(--color-foreground)_4%,var(--color-card))]",
+							)}
+							style={headStyle}
+						>
+							{#if head}{@render head(column)}{:else}{column.label}{/if}
+						</SortableHead>
+					{:else}
+						<Table.Head class={headClass} style={headStyle}>
+							{#if head}{@render head(column)}{:else}{column.label}{/if}
+						</Table.Head>
+					{/if}
 				{/each}
 				{#if rowHref}
 					<th class="w-0 p-0"><span class="sr-only">Open</span></th>

package/src/components/table-view/table-view.test.ts

@@ -64,14 +64,17 @@ describe("TableView extensions", () => {
     { key: "total", label: "Total", numeric: true, sortable: true },
   ];
 
-  it("sorts from a head button and sets aria-sort", () => {
+  it("sorts from a head, by click or Enter, and sets aria-sort", () => {
     const { target, done } = render({ columns: sortable, sort: { key: "name", direction: "asc" } });
-    const heads = target.querySelectorAll("thead th");
+    const heads = target.querySelectorAll<HTMLElement>("thead th");
     expect(heads[0].getAttribute("aria-sort")).toBe("ascending");
     expect(heads[1].getAttribute("aria-sort")).toBe("none");
-    (heads[1].querySelector("button") as HTMLButtonElement).click();
+    heads[1].click();
     flushSync();
     expect(target.querySelectorAll("thead th")[1].getAttribute("aria-sort")).toBe("ascending");
+    heads[1].dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    flushSync();
+    expect(target.querySelectorAll("thead th")[1].getAttribute("aria-sort")).toBe("descending");
     done();
   });
 

package/src/components/work-parts/group-head.svelte

@@ -3,7 +3,7 @@
 	import { Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
-	import CountChip from "./count-chip.svelte";
+	import CountChip from "../chip/count-chip.svelte";
 
 	interface Props {
 		label: string;

package/src/components/work-parts/index.ts

@@ -1,4 +1,4 @@
-export { default as CountChip } from "./count-chip.svelte";
+export { default as CountChip } from "../chip/count-chip.svelte";
 export { default as GroupHead } from "./group-head.svelte";
 export { default as PropertyRow } from "./property-row.svelte";
 export { default as WorkCard } from "./work-card.svelte";

package/src/editor/doc-blocks.ts

@@ -5,6 +5,7 @@
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { copyText } from "../components/copy/clipboard.js";
 import { anchorIds } from "./anchors.js";
 
 const LINK_ICON = `<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M240 88.23a54.43 54.43 0 0 1-16 37L189.25 160a54.27 54.27 0 0 1-38.63 16h-.05A54.63 54.63 0 0 1 96 119.84a8 8 0 0 1 16 .45A38.62 38.62 0 0 0 150.58 160a38.4 38.4 0 0 0 27.31-11.31l34.75-34.75a38.63 38.63 0 0 0-54.63-54.63l-11 11A8 8 0 0 1 135.7 59l11-11a54.65 54.65 0 0 1 77.3 0A54.86 54.86 0 0 1 240 88.23ZM109 185.66l-11 11A38.41 38.41 0 0 1 70.6 208a38.63 38.63 0 0 1-27.29-65.94L78 107.31a38.63 38.63 0 0 1 54.63 0 8 8 0 0 0 11.31-11.31 54.65 54.65 0 0 0-77.3 0L32 130.75A54.62 54.62 0 0 0 70.56 224a54.28 54.28 0 0 0 38.64-16l11-11a8 8 0 0 0-11.2-11.34Z"/></svg>`;
@@ -59,7 +60,7 @@ export const HeadingAnchors = Extension.create<HeadingAnchorsOptions>({
                     button.addEventListener("click", () => {
                       const { origin, pathname, search } = window.location;
                       const url = `${origin}${pathname}${search}#${id}`;
-                      void navigator.clipboard?.writeText(url).catch(() => {});
+                      void copyText(url);
                       button.dataset.copied = "true";
                       setTimeout(() => delete button.dataset.copied, 1400);
                       options.oncopy?.(url, id);

package/src/effects/animated-beam/path-calculator.svelte.ts

@@ -34,12 +34,26 @@ export function usePathCalculator() {
     const rectA = fromRef.getBoundingClientRect();
     const rectB = toRef.getBoundingClientRect();
 
-    svgDimensions = { width: containerRect.width, height: containerRect.height };
+    // A scaled ancestor shrinks every rect, but the SVG draws in the container's own pixels.
+    // Divide the scale out, or the beams stop short of their nodes.
+    const scaleX = containerRef.offsetWidth ? containerRect.width / containerRef.offsetWidth : 1;
+    const scaleY = containerRef.offsetHeight ? containerRect.height / containerRef.offsetHeight : 1;
+    const local = (rect: DOMRect) =>
+      new DOMRect(
+        (rect.left - containerRect.left) / scaleX,
+        (rect.top - containerRect.top) / scaleY,
+        rect.width / scaleX,
+        rect.height / scaleY,
+      );
+    const a = local(rectA);
+    const b = local(rectB);
 
-    const startX = anchorX(rectA, containerRect.left, fromAnchor, startXOffset);
-    const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
-    const endX = anchorX(rectB, containerRect.left, toAnchor, endXOffset);
-    const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+    svgDimensions = { width: containerRect.width / scaleX, height: containerRect.height / scaleY };
+
+    const startX = anchorX(a, 0, fromAnchor, startXOffset);
+    const startY = a.top + a.height / 2 + startYOffset;
+    const endX = anchorX(b, 0, toAnchor, endXOffset);
+    const endY = b.top + b.height / 2 + endYOffset;
 
     // A cubic with horizontal handles, not a quadratic through a raised midpoint.