@heyramzi/ui 2.24.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.
 
@@ -65,28 +65,30 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 - `data-table` — SortableHead, Pagination, InfiniteScroll, RowContextMenu, TableSkeleton, and the sort, page and filter helpers
 - `hold-to-confirm` — HoldToConfirm, press and hold to confirm
 - `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, NoticeBar, EmptyState, FilterPopover, setSectionHost
-- `toolbar` — Toolbar: one row at any width; search, tabs and the view switch fold into menus in a narrow pane
+- `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`.
@@ -95,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`)
 
@@ -119,6 +121,8 @@ 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, ConfirmationState (`when` names the kind it shows), ConfirmationActions, ConfirmationAction, type ConfirmationKind
 - `generation-progress` — GenerationProgress

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/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,4 +1,3 @@
-export { default as DataPanel } from "../../../src/lib/panel.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 DashboardSection } from "../../../src/charts/dashboard/dashboard-section.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/list-page/index.js

@@ -10,7 +10,6 @@ export { default as NoticeBar } from "../../../src/components/list-page/notice-b
 export { default as RailBody } from "../../../src/components/list-page/rail-body.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/chip/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

@@ -15,7 +15,7 @@ export const HeadingAnchors = Extension.create({
 	addOptions() {
 		return {
 			label: "Copy link",
-			oncopy: undefined
+			onCopy: undefined
 		};
 	},
 	addProseMirrorPlugins() {
@@ -52,7 +52,7 @@ export const HeadingAnchors = Extension.create({
 							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/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/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/tone.js

@@ -11,9 +11,8 @@ export const TONE_CLASS = {
 	destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink"
 };
 /**
-* The scale as a quiet tint with no border: the icon and the text carry the tone, the fill only
-* groups them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
-* the canvas and vanishes there (tokens board, "what fights the new scale").
+* A quiet borderless tint: icon and text carry the tone. Neutral reads off the foreground,
+* since `bg-muted` sits 0.005 L from the canvas and vanishes there.
 */
 export const TONE_TINT = {
 	neutral: "bg-foreground/6 text-muted-foreground",
@@ -30,7 +29,7 @@ export const TONE_TEXT = {
 	info: "text-info-800 dark:text-info-400",
 	success: "text-success-800 dark:text-success-400",
 	warning: "text-warning-800 dark:text-warning-400",
-	destructive: "text-destructive"
+	destructive: "text-destructive-ink"
 };
 /** The same scale as icon color. */
 export const TONE_ICON = {

package/dist/shadcn/alert/alert-variants.js

@@ -3,7 +3,7 @@ export const alertVariants = tv({
 	base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 	variants: { variant: {
 		default: "bg-card text-card-foreground",
-		destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+		destructive: "text-destructive-ink bg-card *:data-[slot=alert-description]:text-destructive-ink [&>svg]:text-current"
 	} },
 	defaultVariants: { variant: "default" }
 });

package/dist/shadcn/attachment/context.js

@@ -0,0 +1,10 @@
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("attachment");
+/** Called by Attachment.Root: the id its Title takes, so the Trigger and Actions can point at it. */
+export function setAttachmentTitleId(id) {
+	setContext(KEY, id);
+}
+/** The enclosing card's title id, or undefined outside an Attachment.Root. */
+export function getAttachmentTitleId() {
+	return getContext(KEY);
+}

package/dist/shadcn/dropdown-menu/menu-item.js

@@ -22,7 +22,7 @@ export const menuItemClass = tv({
 	variants: {
 		variant: {
 			default: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground",
-			destructive: "text-destructive *:[svg]:text-destructive hover:bg-destructive/10 focus:bg-destructive/10 focus:text-destructive dark:hover:bg-destructive/20 dark:focus:bg-destructive/20"
+			destructive: "text-destructive-ink *:[svg]:text-destructive hover:bg-destructive/10 focus:bg-destructive/10 focus:text-destructive-ink dark:hover:bg-destructive/20 dark:focus:bg-destructive/20"
 		},
 		/** A row in a set where a sibling carries a leading mark. */
 		inset: {

package/dist/shadcn/hooks/highlighter.js

@@ -28,10 +28,66 @@ const aliases = {
 	yml: "yaml",
 	zsh: "bash"
 };
+// VS Code's pair colours an imported name too. No bundled light theme clears 4.5:1 on bg-muted.
+const THEMES = {
+	light: "light-plus",
+	dark: "dark-plus"
+};
+// The faintest code surface in each mode: a highlighted line (bg-muted), the input tint in dark.
+const SURFACES = {
+	light: [
+		232,
+		232,
+		232
+	],
+	dark: [
+		52,
+		52,
+		52
+	]
+};
+function luminance(rgb) {
+	const [r, g, b] = rgb.map((v) => {
+		const s = v / 255;
+		return s <= .04045 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+function contrast(a, b) {
+	const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+	return (hi + .05) / (lo + .05);
+}
+// Steps an opaque hex colour toward black (light) or white (dark), keeping its hue, until it reads 4.5:1.
+function readable(hex, mode) {
+	if (!/^#[\da-f]{6}(ff)?$/i.test(hex)) return hex;
+	const base = [
+		1,
+		3,
+		5
+	].map((i) => Number.parseInt(hex.slice(i, i + 2), 16));
+	let rgb = base;
+	for (let step = .01; contrast(rgb, SURFACES[mode]) < 4.5 && step <= 1; step += .01) {
+		rgb = base.map((v) => Math.round(mode === "light" ? v * (1 - step) : v + (255 - v) * step));
+	}
+	return `#${rgb.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+async function readableTheme(theme, mode) {
+	const { default: raw } = await theme;
+	return {
+		...raw,
+		tokenColors: raw.tokenColors?.map((rule) => rule.settings.foreground ? {
+			...rule,
+			settings: {
+				...rule.settings,
+				foreground: readable(rule.settings.foreground, mode)
+			}
+		} : rule)
+	};
+}
 let highlighter;
 function getHighlighter() {
 	highlighter ??= createHighlighterCore({
-		themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+		themes: [readableTheme(import("shiki/themes/light-plus.mjs"), "light"), readableTheme(import("shiki/themes/dark-plus.mjs"), "dark")],
 		langs: [],
 		engine: createJavaScriptRegexEngine({ forgiving: true })
 	});
@@ -71,10 +127,7 @@ export async function loadHighlighter(language) {
 highlight(code, state) {
 		const tokenize = (text) => shiki.codeToTokens(text, {
 			lang,
-			themes: {
-				light: "github-light",
-				dark: "github-dark"
-			},
+			themes: THEMES,
 			defaultColor: false,
 			grammarState: state
 		}).tokens;

package/dist/shadcn/sidebar/constants.js

@@ -3,4 +3,4 @@ export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 export const SIDEBAR_WIDTH = "16rem";
 export const SIDEBAR_WIDTH_MOBILE = "18rem";
 export const SIDEBAR_WIDTH_ICON = "3rem";
-export const SIDEBAR_KEYBOARD_SHORTCUT = "s";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";

package/dist/shadcn/sidebar/context.svelte.js

@@ -1,6 +1,11 @@
 import { IsMobile } from "../hooks/is-mobile.svelte.js";
 import { getContext, setContext } from "svelte";
 import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+// Cmd+B in a field means bold, so the shortcut leaves typing alone.
+function isEditable(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	return target.closest("input, textarea, [contenteditable]:not([contenteditable=\"false\"])") !== null;
+}
 class SidebarState {
 	props;
 	open = $derived.by(() => this.props.open());
@@ -8,8 +13,10 @@ class SidebarState {
 	setOpen;
 	#isMobile;
 	state = $derived.by(() => this.open ? "expanded" : "collapsed");
+	id;
 	constructor(props) {
 		this.setOpen = props.setOpen;
+		this.id = props.id;
 		this.#isMobile = new IsMobile();
 		this.props = props;
 	}
@@ -18,9 +25,13 @@ class SidebarState {
 	get isMobile() {
 		return this.#isMobile.current;
 	}
+	/** Whether the sidebar a trigger controls is showing: the sheet on a phone, the panel otherwise. */
+	get expanded() {
+		return this.#isMobile.current ? this.openMobile : this.open;
+	}
 	// Event handler to apply to the `<svelte:window>`
 	handleShortcutKeydown = (e) => {
-		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey) && !isEditable(e.target)) {
 			e.preventDefault();
 			this.toggle();
 		}