@heyramzi/ui 2.23.0 → 3.0.0

package/COMPONENTS.md

@@ -3,7 +3,7 @@
 Every component in `@heyramzi/ui`, one line each. Import a component from its subpath, e.g.
 `import { Button } from "@heyramzi/ui/shadcn/button"`.
 
-The style layer lives in [`src/tokens.css`](./src/tokens.css) and the motion CSS in
+The style layer lives in [`src/tokens`](./src/tokens) and the motion CSS in
 [`src/animations`](./src/animations). Components that already exist in
 [shadcn-svelte](https://shadcn-svelte.com) are linked there from the root README.
 
@@ -64,31 +64,31 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 - `copy` — CopyButton, copyText, copyRichText, htmlToPlainText, Copied
 - `data-table` — SortableHead, Pagination, InfiniteScroll, RowContextMenu, TableSkeleton, and the sort, page and filter helpers
 - `hold-to-confirm` — HoldToConfirm, press and hold to confirm
-- `icon` — Icon, a Phosphor component at a size
-- `language-flag` — LanguageFlag
-- `list-page` — ListPageShell, MasterDetail, GroupedList, RailRow and the rest of the master-detail page kit, NoticeBar, EmptyState, FilterPopover, setSectionHost
-- `toolbar` — Toolbar: one row at any width; search, tabs and the view switch fold into menus in a narrow pane
-- `locale-switch` — LocaleSwitch, a language switch on SegmentedFilter
+- `language-flag` — LanguageFlag, LANGUAGE_FLAGS (code to `/flags/*.svg`, also a SegmentedFilter option's `image`)
+- `list-page` — ListPageShell, MasterDetail, GroupedList, RailRow and the rest of the master-detail page kit, DetailPanel, ToolbarSearch, toolbarTriggerClass, NoticeBar, EmptyState, FilterPopover, setSectionHost
+- `toolbar` — Toolbar: one row at any width; search, tabs and the view switch fold into menus in a narrow pane. Its search box is `list-page`'s ToolbarSearch
 - `mark` — Mark, a logo or photo glyph with an initial fallback
 - `open-in` — OpenIn, a link out to a tool that takes the tool's name, label and mark as a prop
 - `picker` — Picker, MarkPicker, pickerTriggerClass, a command palette at popover scale
 - `docs` — DocPage, OnThisPage, ScrollSpy: one page anatomy for documentation, an icon, title and summary header, a reading column and a contents rail that becomes a bar on a narrow pane
 - `section-card` — SectionCard, a card with a fixed-height header, an h3 title, optional actions and a line under it
-- `section-header` — SectionHeader, a section label with a count chip, a line of description and actions
+- `section-header` — SectionHeader, a section label with a count chip, a line of description and actions; SectionLabel, the label alone
 - `field-row` — FieldRow, a labelled control with its action button at the control's height
 - `table-view` — TableView, a read-only table from columns and rows: numeric columns, footer row, custom cell; opt-in: `bare`, sortable heads (`column.sortable`, bind `sort`; the caller orders `rows`), `rowHref` (a real link over the row; `onRowLink` opens in place on a plain click), `onRowClick`, `selectable` + bind `selected`, `rowMenu` (context-menu items), `group` (a `null` key sits with no header) + `groupHeader` + `collapsible`, `subRow` + `expanded`, `loading` (skeleton rows in the frame), `empty`, `trailing`, `head`, and per-column `hideBelow`, `sticky`, `interactive`, `class`
 - `segmented` — AnimatedTabs (pill or underline), SegmentedFilter, SegmentedNav, SectionRuns, one bordered track with a sliding pill, a badge note and an overflow menu
-- `theme` — ThemeProvider, mode, userPrefersMode, setMode, toggleMode, resetMode: the one light and dark system (mode-watcher, optional peer). Mount `<ThemeProvider initial onChange themeColors modeStorageKey />` once; flip with `toggleMode()`, read `mode.current`. Pair with `theme-toggle`'s `revealTheme(event, toggleMode)` for the wipe
+- `theme` — ThemeProvider, mode, userPrefersMode, setMode, toggleMode, resetMode: the one light and dark system (mode-watcher, optional peer). Mount `<ThemeProvider initial onModeChange themeColors modeStorageKey />` once; flip with `toggleMode()`, read `mode.current`. Pair with `revealTheme(event, toggleMode)` from `@heyramzi/ui/lib/theme-transition.js` for the wipe
 - `star-rating-input` — StarRatingInput
 - `svg` — Svg, an SVG file imported with `?raw`
 
 ## Effects (`src/effects`)
 
-- `interactive-hover-button` — InteractiveHoverButton, a dot that grows into the fill
+Named exports from `@heyramzi/ui/effects/<name>`, e.g.
+`import { Marquee } from "@heyramzi/ui/effects/marquee"`.
 
+- `interactive-hover-button` — InteractiveHoverButton, a dot that grows into the fill
 - `animated-beam` — AnimatedBeam, AnimatedBeamProps, AnchorPosition
-- `border-beam` — BorderBeam
-- `image-comparison` — ImageComparison, a before/after wipe with a bindable position, side badges and a hint sweep
+- `border-beam` — BorderBeam, sizePresets, sizeThemePresets, themeColors and their types
+- `image-comparison` — ImageComparison, ComparisonImage, a before/after wipe with a bindable position, side badges and a hint sweep
 - `image-reveal` — ImageReveal, ImageRevealProps, ImageRevealHandle
 - `magnetic` — magnetic
 - `magic-card` — MagicCard. Props: `glow`, `radius`, `class`, `contentClass`; the glow colour is `--magic-card-glow` set on `class`.
@@ -97,7 +97,7 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 - `reveal` — InView, AnimatedGroup, TextEffect, observeInView, RevealPreset, RevealPer
 - `shader-gradient` — ShaderGradient, ShaderGradientProps, ShaderGradientUniforms
 - `spotlight` — Spotlight
-- `theme-toggle` — ThemeToggle, revealTheme. Props: `isDark`, `mode` (`light`, `dark`, `system`; swaps in the Monitor icon), `onToggle`, `variant` (`outline`, `ghost`, `inverted`, `slide`; `inverted` boolean is an alias; `slide` is a pill with a moving thumb, coloured by `--theme-toggle-thumb-light`, `--theme-toggle-thumb-dark`, `--theme-toggle-track`, `--theme-toggle-glow` and friends set on `class`), `size`, `label`, `title`, `skipTransition`, `class`. `revealTheme(event, apply, { skip, duration, easing })` is the circular wipe on its own: `import { revealTheme } from "@heyramzi/ui"` (the `./lib/*` subpath points at `.js` and the source is `.ts`).
+- `theme-toggle` — ThemeToggle. Props: `isDark`, `mode` (`light`, `dark`, `system`; swaps in the Monitor icon), `onToggle`, `variant` (`outline`, `ghost`, `inverted`, `slide`; `inverted` boolean is an alias; `slide` is a pill with a moving thumb, coloured by `--theme-toggle-thumb-light`, `--theme-toggle-thumb-dark`, `--theme-toggle-track`, `--theme-toggle-glow` and friends set on `class`), `size`, `label`, `title`, `skipTransition`, `class`. `revealTheme(event, apply, { skip, duration, easing })` is the circular wipe on its own: `import { revealTheme } from "@heyramzi/ui/lib/theme-transition.js"` (every `./lib` subpath ends in `.js`, though the source is `.ts`).
 
 ## Animations (`src/animations`)
 
@@ -121,16 +121,17 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 
 ## AI and chat (`src/ai`)
 
+Imported from `@heyramzi/ui/ai/<name>`, e.g. `import { AiButton } from "@heyramzi/ui/ai/ai-button"`.
+
 - `ai-button` — AiButton
-- `confirmation` — Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction
+- `confirmation` — Confirmation, ConfirmationTitle, ConfirmationState (`when` names the kind it shows), ConfirmationActions, ConfirmationAction, type ConfirmationKind
 - `generation-progress` — GenerationProgress
 - `loading-state` — PixelLoader
 - `prompt-input` — PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit
 - `reasoning` — Reasoning, ReasoningTrigger, ReasoningContent
 - `response` — Response
 - `suggestion` — Suggestion, Suggestions
-- `thinking-dots` — ThinkingDots
-- `typing-dots` — TypingDots
+- `typing-dots` — TypingDots. A `label` makes it a `role="status"` line
 - `voice-waveform` — VoiceWaveform
 
 ## Record (`src/record`)

package/README.md

@@ -81,13 +81,14 @@ runes only.
 
 ## Using a component
 
-Import from a subpath:
+Import a named export from its subpath. There's no package root and no default export, and
+each name has exactly one path:
 
 ```svelte
 <script lang="ts">
   import { Button } from "@heyramzi/ui/shadcn/button";
   import { Card, CardHeader, CardTitle, CardContent } from "@heyramzi/ui/shadcn/card";
-  import Marquee from "@heyramzi/ui/effects/marquee/Marquee.svelte";
+  import { Marquee } from "@heyramzi/ui/effects/marquee";
 </script>
 ```
 
@@ -99,14 +100,14 @@ Many components take their content through snippets, so you keep full control:
 
 ## Sound
 
-`@heyramzi/ui/lib/sound` gives the kit's controls interaction sounds from
+`@heyramzi/ui/lib/sound.js` gives the kit's controls interaction sounds from
 [cuelume](https://cuelume.dev). They're off until the person turns them on, and the choice is
 saved in their browser. Start it once in the root layout:
 
 ```svelte
 <script lang="ts">
   import { onMount } from "svelte";
-  import { startSound } from "@heyramzi/ui/lib/sound";
+  import { startSound } from "@heyramzi/ui/lib/sound.js";
 
   onMount(() => startSound());
 </script>

package/dist/ai/confirmation/index.js

@@ -1,11 +1,8 @@
 import Confirmation from "../../../src/ai/confirmation/Confirmation.svelte";
 import ConfirmationTitle from "../../../src/ai/confirmation/ConfirmationTitle.svelte";
-import ConfirmationRequest from "../../../src/ai/confirmation/ConfirmationRequest.svelte";
-import ConfirmationAccepted from "../../../src/ai/confirmation/ConfirmationAccepted.svelte";
-import ConfirmationRejected from "../../../src/ai/confirmation/ConfirmationRejected.svelte";
-import ConfirmationFailed from "../../../src/ai/confirmation/ConfirmationFailed.svelte";
+import ConfirmationState from "../../../src/ai/confirmation/ConfirmationState.svelte";
 import ConfirmationActions from "../../../src/ai/confirmation/ConfirmationActions.svelte";
 import ConfirmationAction from "../../../src/ai/confirmation/ConfirmationAction.svelte";
-export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationFailed, ConfirmationActions, ConfirmationAction, 
+export { Confirmation, ConfirmationTitle, ConfirmationState, ConfirmationActions, ConfirmationAction, 
 //
- Confirmation as Root, ConfirmationTitle as Title, ConfirmationRequest as Request, ConfirmationAccepted as Accepted, ConfirmationRejected as Rejected, ConfirmationFailed as Failed, ConfirmationActions as Actions, ConfirmationAction as Action };
+ Confirmation as Root, ConfirmationTitle as Title, ConfirmationState as State, ConfirmationActions as Actions, ConfirmationAction as Action };

package/dist/canvas/index.js

@@ -2,7 +2,6 @@
 // Svelte components are imported by path, like "@heyramzi/ui/canvas/ui/canvas-grid.svelte".
 export * from "./types.js";
 export * from "./plugin.js";
-export { tryCatch, tryCatchAsync } from "../lib/result.js";
 export * from "./ops/ops.js";
 export * from "./headless/alignment.js";
 export * from "./headless/canvas-cleanup.js";

package/dist/canvas/pen/node-name.svelte.js

@@ -0,0 +1,25 @@
+// A pen node's accessible name. Svelte Flow puts `ariaLabel` on the focusable node wrapper,
+// so the name has to live on the node object and follow its words as they're edited.
+import { useSvelteFlow } from "@xyflow/svelte";
+import { untrack } from "svelte";
+const cap = (word) => word.charAt(0).toUpperCase() + word.slice(1);
+/** "Idea" for a text, "Rectangle: Idea" for a labelled shape, "Pen stroke" for a drawing. */
+export function penNodeName(kind, data) {
+	if (kind === "text") return data.text?.trim() || "Empty text";
+	if (kind === "stroke") return `${cap(data.tool ?? "pen")} stroke`;
+	const shape = cap(data.shape ?? "shape");
+	const label = data.label?.trim();
+	return label ? `${shape}: ${label}` : shape;
+}
+/** Keeps node `id`'s ariaLabel equal to `name()`. Call it from a node component. */
+export function useNodeName(id, name) {
+	const { getNode, updateNode } = useSvelteFlow();
+	$effect(() => {
+		const nodeId = id();
+		const label = name();
+		// untrack: updateNode reads the node list, and tracking it would rerun this on every write.
+		untrack(() => {
+			if (getNode(nodeId)?.ariaLabel !== label) updateNode(nodeId, { ariaLabel: label });
+		});
+	});
+}

package/dist/canvas/ui/tools.js

@@ -1,5 +1,6 @@
 // The tool bar's tools, their keys and the shortcut list the help panel renders.
 // Pure data and two lookups, so the keyboard, the bar and the panel can't disagree.
+import { isEditingTarget } from "../editor/keymap.js";
 import { PEN_DEFAULTS } from "../pen/types.js";
 /** Every tool with its single-letter key. Shapes share one bar button but keep a key each. */
 export const TOOLS = [
@@ -53,6 +54,12 @@ const TOOL_BY_KEY = new Map(TOOLS.map((tool) => [tool.key.toLowerCase(), tool.id
 export function toolForKey(key) {
 	return TOOL_BY_KEY.get(key.toLowerCase()) ?? null;
 }
+/** The tool a key press picks: the tooltip's bare letter, never with a modifier or while a field has focus. */
+export function resolveToolKey(event) {
+	if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return null;
+	if (isEditingTarget(event.target)) return null;
+	return toolForKey(event.key);
+}
 export function keyForTool(tool) {
 	return TOOLS.find((entry) => entry.id === tool)?.key ?? "";
 }

package/dist/charts/chart-a11y.js

@@ -0,0 +1,59 @@
+/** Builds the table and summary every cartesian chart hands to ChartPlot. A missing value reads `empty`. */
+export function chartTable(data, x, series, format, { xLabel = "", empty = "No data" } = {}) {
+	const xs = data.map(x);
+	const rows = data.map((d, i) => ({
+		x: xs[i],
+		cells: series.map((s) => {
+			const n = numeric(s.value(d));
+			return n == null ? empty : (s.format ?? format)(n);
+		})
+	}));
+	const lines = series.map((s) => seriesLine(s.label, data.map((d) => numeric(s.value(d))), s.format ?? format));
+	const range = xs.length === 0 ? "No data" : xs.length === 1 ? xs[0] : `${xs[0]} to ${xs.at(-1)}`;
+	return {
+		xLabel,
+		columns: series.map((s) => s.label),
+		rows,
+		summary: xs.length === 0 ? "No data." : [`${range}.`, ...lines].join(" ")
+	};
+}
+function numeric(v) {
+	if (v == null) return null;
+	const n = Number(v);
+	return Number.isFinite(n) ? n : null;
+}
+function seriesLine(label, values, format) {
+	const nums = values.filter((n) => n != null);
+	if (nums.length === 0) return `${label}: no data.`;
+	let low = nums[0];
+	let high = nums[0];
+	for (const n of nums) {
+		if (n < low) low = n;
+		if (n > high) high = n;
+	}
+	const ends = `first ${format(nums[0])}, last ${format(nums[nums.length - 1])}`;
+	return `${label}: ${ends}, low ${format(low)}, high ${format(high)}.`;
+}
+/** What one row reads as when the arrow keys land on it, like "Mar: Revenue $4,100, Cost $2,100". */
+export function rowSummary(table, i) {
+	const row = table.rows[i];
+	if (!row) return "";
+	return `${row.x}: ${table.columns.map((c, j) => `${c} ${row.cells[j]}`).join(", ")}`;
+}
+/**
+* The point a key moves to from `at`, where -1 is none yet. `undefined` means the key isn't the
+* plot's, and `null` means Escape cleared the point.
+*/
+export function nextPoint(key, at, count) {
+	if (count === 0) return undefined;
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowDown": return at < 0 ? 0 : Math.min(at + 1, count - 1);
+		case "ArrowLeft":
+		case "ArrowUp": return at < 0 ? count - 1 : Math.max(at - 1, 0);
+		case "Home": return 0;
+		case "End": return count - 1;
+		case "Escape": return at < 0 ? undefined : null;
+		default: return undefined;
+	}
+}

package/dist/charts/dashboard/index.js

@@ -1,8 +1,5 @@
-export { default as DataPanel } from "../../../src/charts/dashboard/data-panel.svelte";
-export { default as DataSortHead } from "../../../src/charts/dashboard/data-sort-head.svelte";
 export { default as DataTable } from "../../../src/charts/dashboard/data-table.svelte";
 export { default as RatingChip } from "../../../src/charts/dashboard/rating-chip.svelte";
-export { default as DashboardEmpty } from "../../../src/charts/dashboard/dashboard-empty.svelte";
 export { default as DashboardSection } from "../../../src/charts/dashboard/dashboard-section.svelte";
 export { default as PanelGrid } from "../../../src/charts/dashboard/panel-grid.svelte";
 export { default as PeriodFilter } from "../../../src/charts/dashboard/period-filter.svelte";

package/dist/charts/primitives/chart-utils.js

@@ -13,6 +13,20 @@ export function getPayloadConfigFromPayload(config, item, key) {
 	}
 	return configLabelKey in config ? config[configLabelKey] : config[key];
 }
+const compact = new Intl.NumberFormat(undefined, {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+/**
+* An axis tick formatter. "1,000,000" overflows the 48px gutter and the gap between ticks, so a
+* label over 6 characters falls back to "1M"; the tooltip keeps the full value.
+*/
+export function valueTick(format) {
+	return (v) => {
+		const full = format(v);
+		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+	};
+}
 const chartContextKey = Symbol("chart-context");
 export function setChartContext(value) {
 	return setContext(chartContextKey, value);

package/dist/components/chip/index.js

@@ -1 +1,2 @@
+export { default as CountChip } from "../../../src/components/chip/count-chip.svelte";
 export { default as TagChip } from "../../../src/components/chip/tag-chip.svelte";

package/dist/components/data-table/menu-key.js

@@ -0,0 +1,19 @@
+/**
+* Shift+F10 or the ContextMenu key sends Bits UI's ContextMenu the `contextmenu` event Safari
+* never fires for a key. Preventing the key stops Chrome sending a second one.
+*/
+export function openMenuFromKey(event) {
+	const menuKey = event.key === "ContextMenu" || event.shiftKey && event.key === "F10";
+	if (!menuKey || event.defaultPrevented) return;
+	event.preventDefault();
+	const row = event.currentTarget;
+	const box = row.getBoundingClientRect();
+	row.dispatchEvent(new MouseEvent("contextmenu", {
+		bubbles: true,
+		cancelable: true,
+		clientX: box.left + 16,
+		clientY: box.top + box.height
+	}));
+}
+/** What a row with a menu tells a screen reader about the keys that open it. */
+export const MENU_KEYS = "Shift+F10 ContextMenu";

package/dist/components/language-flag/flags.js

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

package/dist/components/language-flag/index.js

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

package/dist/components/list-page/index.js

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

package/dist/components/theme/index.js

@@ -3,5 +3,4 @@
 * layout, or the no-flash script never runs.
 */
 export { default as ThemeProvider } from "../../../src/components/theme/theme-provider.svelte";
-export { revealTheme } from "../../lib/theme-transition.js";
 export { mode, resetMode, setMode, systemPrefersMode, toggleMode, userPrefersMode } from "mode-watcher";

package/dist/components/toolbar/index.js

@@ -1,7 +1,5 @@
 /**
-* One toolbar row for a list page. Wide, it shows search, tabs and a view switch inline. Narrow,
-* each of those folds into a menu and the row never wraps.
+* One toolbar row for a list page: search, tabs and a view switch inline, folded into menus when
+* narrow, never wrapping. `ToolbarSearch` lives in list-page.
 */
 export { default as Toolbar } from "../../../src/components/toolbar/toolbar.svelte";
-export { default as ToolbarSearch } from "../../../src/components/toolbar/toolbar-search.svelte";
-export { toolbarTriggerClass } from "./toolbar-trigger.js";

package/dist/components/work-parts/index.js

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

package/dist/editor/block-move.js

@@ -0,0 +1,40 @@
+import { Extension } from "@tiptap/core";
+import { Fragment } from "@tiptap/pm/model";
+import { NodeSelection, Selection, TextSelection } from "@tiptap/pm/state";
+/**
+* Swaps the top-level block holding the selection with its neighbour, the same block the drag
+* handle moves. Null at the top or bottom of the document.
+*/
+export function moveBlock(state, dir) {
+	const { selection, doc } = state;
+	const index = selection.$from.index(0);
+	const other = index + dir;
+	if (other < 0 || other >= doc.childCount) return null;
+	const node = doc.child(index);
+	const start = selection.$from.posAtIndex(index, 0);
+	const neighbour = doc.child(other);
+	const from = dir === 1 ? start : start - neighbour.nodeSize;
+	const to = from + node.nodeSize + neighbour.nodeSize;
+	const pair = dir === 1 ? [neighbour, node] : [node, neighbour];
+	const tr = state.tr.replaceWith(from, to, Fragment.fromArray(pair));
+	const moved = dir === 1 ? from + neighbour.nodeSize : from;
+	const shift = moved - start;
+	const next = selection instanceof NodeSelection ? NodeSelection.create(tr.doc, selection.from + shift) : selection instanceof TextSelection ? TextSelection.create(tr.doc, selection.anchor + shift, selection.head + shift) : Selection.near(tr.doc.resolve(selection.head + shift));
+	return tr.setSelection(next).scrollIntoView();
+}
+/** Alt+Shift+Up and Down: the keyboard way to do what the drag handle does. */
+export const BlockMove = Extension.create({
+	name: "blockMove",
+	addKeyboardShortcuts() {
+		const run = (dir) => () => {
+			const tr = moveBlock(this.editor.state, dir);
+			if (!tr) return false;
+			this.editor.view.dispatch(tr);
+			return true;
+		};
+		return {
+			"Alt-Shift-ArrowUp": run(-1),
+			"Alt-Shift-ArrowDown": run(1)
+		};
+	}
+});

package/dist/editor/doc-blocks.js

@@ -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>`;
 const anchorsKey = new PluginKey("headingAnchors");
@@ -14,7 +15,7 @@ export const HeadingAnchors = Extension.create({
 	addOptions() {
 		return {
 			label: "Copy link",
-			oncopy: undefined
+			onCopy: undefined
 		};
 	},
 	addProseMirrorPlugins() {
@@ -48,10 +49,10 @@ export const HeadingAnchors = Extension.create({
 						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);
+							options.onCopy?.(url, id);
 						});
 						return button;
 					}, {

package/dist/editor/extensions.js

@@ -6,6 +6,7 @@ import { DragHandle } from "@tiptap/extension-drag-handle";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
 import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
 import { BlockIdExtension } from "./block-id.js";
+import { BlockMove } from "./block-move.js";
 import { CodeBlockChrome, HeadingAnchors } from "./doc-blocks.js";
 const CmsBlock = TiptapNode.create({
 	name: "cmsBlock",
@@ -114,6 +115,17 @@ function dedupeExtensions(extensions) {
 	});
 }
 const DRAG_DOTS = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="2.5" cy="2.5" r="1" fill="currentColor"/><circle cx="2.5" cy="6" r="1" fill="currentColor"/><circle cx="2.5" cy="9.5" r="1" fill="currentColor"/><circle cx="6" cy="2.5" r="1" fill="currentColor"/><circle cx="6" cy="6" r="1" fill="currentColor"/><circle cx="6" cy="9.5" r="1" fill="currentColor"/></svg>`;
+/** The stock Image has no align, so the image toolbar's choice was dropped. content.css reads data-align. */
+const AlignedImage = Image.extend({ addAttributes() {
+	return {
+		...this.parent?.(),
+		align: {
+			default: null,
+			parseHTML: (el) => el.getAttribute("data-align"),
+			renderHTML: (attrs) => attrs.align ? { "data-align": attrs.align } : {}
+		}
+	};
+} });
 function dragHandle() {
 	return DragHandle.configure({ render() {
 		const el = document.createElement("div");
@@ -142,7 +154,7 @@ export function buildExtensions({ preset, placeholder, blockIds, anchors = false
 		...full ? [
 			CmsBlock,
 			Youtube,
-			Image.configure({ inline: false }),
+			AlignedImage.configure({ inline: false }),
 			TaskList,
 			TaskItem.configure({ nested: true }),
 			Table.configure({ resizable: false }),
@@ -154,6 +166,7 @@ export function buildExtensions({ preset, placeholder, blockIds, anchors = false
 		...anchors ? [HeadingAnchors.configure(anchors)] : [],
 		Placeholder.configure({ placeholder }),
 		dragHandle(),
+		BlockMove,
 		...blockIds ? [BlockIdExtension] : []
 	]);
 }

package/dist/effects/animated-beam/path-calculator.svelte.js

@@ -15,14 +15,21 @@ export function usePathCalculator() {
 		const containerRect = containerRef.getBoundingClientRect();
 		const rectA = fromRef.getBoundingClientRect();
 		const rectB = toRef.getBoundingClientRect();
+		// 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) => 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);
 		svgDimensions = {
-			width: containerRect.width,
-			height: containerRect.height
+			width: containerRect.width / scaleX,
+			height: containerRect.height / scaleY
 		};
-		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;
+		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.
 		// The quadratic put its single control point at `midY` minus `curvature`, which for a fan into one node lands past the far end:
 		// the top beam dove below the hub and crossed the middle beam before arriving, and three beams bundled into a lens for the last stretch.

package/dist/effects/border-beam/index.js

@@ -0,0 +1,2 @@
+export { default as BorderBeam } from "../../../src/effects/border-beam/BorderBeam.svelte";
+export { sizePresets, sizeThemePresets, themeColors } from "./presets.js";

package/dist/effects/image-comparison/index.js

@@ -0,0 +1 @@
+export { default as ImageComparison } from "../../../src/effects/image-comparison/ImageComparison.svelte";

package/dist/effects/interactive-hover-button/index.js

@@ -0,0 +1 @@
+export { default as InteractiveHoverButton } from "../../../src/effects/interactive-hover-button/InteractiveHoverButton.svelte";

package/dist/effects/magic-card/index.js

@@ -0,0 +1 @@
+export { default as MagicCard } from "../../../src/effects/magic-card/MagicCard.svelte";

package/dist/effects/marquee/index.js

@@ -0,0 +1 @@
+export { default as Marquee } from "../../../src/effects/marquee/Marquee.svelte";

package/dist/effects/progressive-blur/index.js

@@ -0,0 +1 @@
+export { default as ProgressiveBlur } from "../../../src/effects/progressive-blur/ProgressiveBlur.svelte";

package/dist/effects/spotlight/index.js

@@ -0,0 +1 @@
+export { default as Spotlight } from "../../../src/effects/spotlight/Spotlight.svelte";

package/dist/effects/theme-toggle/index.js

@@ -0,0 +1 @@
+export { default as ThemeToggle } from "../../../src/effects/theme-toggle/ThemeToggle.svelte";

package/dist/inbox/index.js

@@ -1,5 +1,5 @@
 export { default as ThreadInbox } from "../../src/inbox/thread-inbox.svelte";
 export { NO_FILTER, actorNames, entryLine, filterThreads, inboxKeyOf, isPending, resolveInboxLabels, snoozeChoices, subjectTypes, threadsOf } from "./logic.js";
 export { ALL, DEFAULT_INBOX_LABELS } from "./types.js";
-// The approval card a pinned proposal is drawn with, and the types its `proposal` field carries.
+// The approval card a pinned proposal is drawn with. Its `proposal` types come from `./work/inbox`.
 export { default as InboxCard } from "../../src/work/inbox/inbox-card.svelte";

package/dist/lib/dates.js

@@ -0,0 +1,41 @@
+/** "Oct 23" in the caller's locale. */
+export function shortDate(at, { locale, timeZone, year } = {}) {
+	return new Intl.DateTimeFormat(locale, {
+		month: "short",
+		day: "numeric",
+		year: year ? "numeric" : undefined,
+		timeZone
+	}).format(new Date(at));
+}
+const UNITS = [
+	[31536e3, "year"],
+	[2592e3, "month"],
+	[604800, "week"],
+	[86400, "day"],
+	[3600, "hour"],
+	[60, "minute"]
+];
+/** "3 days ago", "in 2 weeks", "now": the largest whole unit between `at` and `now`. */
+export function relativeTime(at, now = Date.now(), { locale, style = "long" } = {}) {
+	const seconds = Math.round((new Date(at).getTime() - new Date(now).getTime()) / 1e3);
+	const age = Math.abs(seconds);
+	const rtf = new Intl.RelativeTimeFormat(locale, {
+		numeric: "auto",
+		style
+	});
+	for (const [size, unit] of UNITS) {
+		if (age >= size) return rtf.format(Math.round(seconds / size), unit);
+	}
+	return rtf.format(0, "second");
+}
+/** The calendar day of a moment as `YYYY-MM-DD`, in the given zone or the viewer's own. Today by default. */
+export function localDay(at = new Date(), timeZone) {
+	const parts = new Intl.DateTimeFormat("en-US", {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		timeZone
+	}).formatToParts(new Date(at));
+	const part = (type) => parts.find((p) => p.type === type)?.value ?? "";
+	return `${part("year")}-${part("month")}-${part("day")}`;
+}

package/dist/lib/focus.js

@@ -0,0 +1,15 @@
+import { tick } from "svelte";
+/**
+* Focuses the first target that takes focus, a selector under root or an element, once Svelte
+* has rendered. A moved keyed item or opened pane is a new node.
+*/
+export async function focusAfterRender(root, ...targets) {
+	await tick();
+	for (const target of targets) {
+		const el = typeof target === "string" ? root?.querySelector(target) : target;
+		if (!el?.isConnected) continue;
+		el.focus();
+		if (document.activeElement === el) return el;
+	}
+	return undefined;
+}

package/dist/lib/panel.js

@@ -1,6 +1,6 @@
 /** The one panel shell: a titled box holding a table, a chart or a stack. */
-// WHY tokens, not markup: `DetailPanel` and `DataPanel` draw the same box with
-// different props, and their edges drifted because the classes were typed twice.
+// Tokens beside `panel.svelte`, because skeletons and hand-built cards draw this
+// same edge without the panel's header.
 // Dashboards used `Card`, so /ads had a ring and a shadow where /social had a
 // hairline. Flat, one hairline, `rounded-xl`.
 export const panelShellClass = "overflow-hidden rounded-xl border border-border bg-card";