@dorsk/tsumikit 0.35.1 → 0.37.0

package/dist/components/molecules/GitRef.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Tone } from '../../tone';
+export type PrState = 'open' | 'merged' | 'closed' | 'draft';
+export type PullRequest = {
+    url: string;
+    owner?: string;
+    repo?: string;
+    number: number;
+    state?: PrState;
+};
+export type DiffStats = {
+    additions: number;
+    deletions: number;
+};
+export declare const PR_TONE: Record<PrState, Tone>;
+export declare function prLabel(pr: PullRequest): string;
+type $$ComponentProps = {
+    branch?: string;
+    pr?: PullRequest;
+    diff?: DiffStats;
+    /** Cap on the branch chip; the name truncates with an ellipsis past it. */
+    maxWidth?: string;
+    /** `auto` drops chip text below 18rem of the nearest `.cq` container,
+     *  `glyph` always shows icon-only; the full text stays in the tooltip. */
+    collapse?: 'auto' | 'never' | 'glyph';
+    class?: string;
+    [key: string]: unknown;
+};
+declare const GitRef: import("svelte").Component<$$ComponentProps, {}, "">;
+type GitRef = ReturnType<typeof GitRef>;
+export default GitRef;

package/dist/components/molecules/Menu.svelte

@@ -5,6 +5,9 @@
 		icon?: import('../atoms/Icon.svelte').IconName;
 		danger?: boolean;
 		disabled?: boolean;
+		/** Free-form trailing pill ("admin", "pro", "beta"…), rendered as a Badge after the label. */
+		tag?: string;
+		tagTone?: import('svelte').ComponentProps<typeof import('../atoms/Badge.svelte').default>['tone'];
 	}
 </script>
 
@@ -13,10 +16,12 @@
 	// `menuitem`s navigable with ↑/↓/Home/End, activated with Enter/Space (and
 	// click). Selecting an item runs its action and closes the menu. Focus moves
 	// to the first item when the menu opens. Escape / click-outside close it
-	// (inherited from the native popover).
+	// (inherited from the native popover). An item's `tag` renders as a soft
+	// Badge pill after the label; the `tag` snippet replaces that pill.
 	import type { ComponentProps, Snippet } from 'svelte';
 	import Popover from './Popover.svelte';
 	import Icon from '../atoms/Icon.svelte';
+	import Badge from '../atoms/Badge.svelte';
 
 	type PopoverProps = ComponentProps<typeof Popover>;
 	type TriggerChrome = Pick<
@@ -40,6 +45,7 @@
 		label,
 		items,
 		trigger,
+		tag,
 		placement = 'bottom-start',
 		variant,
 		tone,
@@ -58,6 +64,8 @@
 		label: string;
 		items: MenuItem[];
 		trigger: Snippet;
+		/** Custom trailing content for items that carry a `tag`. */
+		tag?: Snippet<[MenuItem]>;
 		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 	} & TriggerChrome = $props();
 
@@ -133,6 +141,15 @@
 			>
 				{#if item.icon}<Icon name={item.icon} />{/if}
 				<span>{item.label}</span>
+				{#if item.tag !== undefined}
+					{#if tag}
+						{@render tag(item)}
+					{:else}
+						<span class="menu-tag">
+							<Badge size="xs" tone={item.tagTone ?? 'neutral'} border={false}>{item.tag}</Badge>
+						</span>
+					{/if}
+				{/if}
 			</button>
 		{/each}
 	</div>
@@ -166,6 +183,12 @@
 	.menu-item.danger {
 		color: var(--danger);
 	}
+	.menu-tag {
+		display: inline-flex;
+		flex: none;
+		margin-inline-start: auto;
+		padding-inline-start: var(--sp-3);
+	}
 	.menu-item:disabled {
 		opacity: 0.45;
 		cursor: not-allowed;

package/dist/components/molecules/Menu.svelte.d.ts

@@ -4,6 +4,9 @@ export interface MenuItem {
     icon?: import('../atoms/Icon.svelte').IconName;
     danger?: boolean;
     disabled?: boolean;
+    /** Free-form trailing pill ("admin", "pro", "beta"…), rendered as a Badge after the label. */
+    tag?: string;
+    tagTone?: import('svelte').ComponentProps<typeof import('../atoms/Badge.svelte').default>['tone'];
 }
 import type { ComponentProps, Snippet } from 'svelte';
 import Popover from './Popover.svelte';
@@ -13,6 +16,8 @@ type $$ComponentProps = {
     label: string;
     items: MenuItem[];
     trigger: Snippet;
+    /** Custom trailing content for items that carry a `tag`. */
+    tag?: Snippet<[MenuItem]>;
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 } & TriggerChrome;
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/RadioGroup.svelte

@@ -3,40 +3,78 @@
 		value: string;
 		label: string;
 		hint?: string;
+		description?: string;
+		note?: string;
 		disabled?: boolean;
 	}
 </script>
 
 <script lang="ts">
-	// Radio group built on native <input type="radio"> sharing one `name`, so the
-	// browser handles single-selection, arrow-key navigation and form
-	// participation. Wrapped in a labelled `radiogroup` with token-styled dots.
-	// `value` is bindable.
+	import type { Snippet } from 'svelte';
+
+	// Native <input type="radio"> sharing one `name`: the browser handles
+	// single-selection, arrow keys and form participation. `variant="rows"`
+	// turns each option into a bordered row with optional trailing `action`
+	// (outside the label, so clicking it never toggles) and a `below` panel.
 	let {
 		options,
 		value = $bindable(),
 		name = `radio-${Math.random().toString(36).slice(2, 8)}`,
 		label,
+		variant = 'list',
+		action,
+		below,
 		class: klass = ''
 	}: {
 		options: RadioOption[];
 		value?: string;
 		name?: string;
 		label: string;
+		variant?: 'list' | 'rows';
+		action?: Snippet<[RadioOption]>;
+		below?: Snippet<[RadioOption]>;
 		class?: string;
 	} = $props();
 </script>
 
-<div role="radiogroup" aria-label={label} class="radio-group {klass}" data-tsu="RadioGroup">
+<div
+	role="radiogroup"
+	aria-label={label}
+	class="radio-group {klass}"
+	class:rows={variant === 'rows'}
+	data-tsu="RadioGroup"
+	data-variant={variant}
+>
 	{#each options as o (o.value)}
-		<label class="radio" class:disabled={o.disabled}>
-			<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} />
-			<span class="dot-ctl" aria-hidden="true"></span>
-			<span class="texts">
-				<span class="label-text">{o.label}</span>
-				{#if o.hint}<span class="hint">{o.hint}</span>{/if}
-			</span>
-		</label>
+		{#if variant === 'rows'}
+			<div class="row-wrap">
+				<div class="row" class:selected={o.value === value} class:disabled={o.disabled}>
+					<label class="radio">
+						<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} />
+						<span class="dot-ctl" aria-hidden="true"></span>
+						<span class="texts">
+							<span class="label-line">
+								<span class="label-text">{o.label}</span>
+								{#if o.note}<span class="note">{o.note}</span>{/if}
+							</span>
+							{#if o.description}<span class="description">{o.description}</span>{/if}
+							{#if o.hint}<span class="hint">{o.hint}</span>{/if}
+						</span>
+					</label>
+					{#if action}<span class="action">{@render action(o)}</span>{/if}
+				</div>
+				{#if below}<div class="below">{@render below(o)}</div>{/if}
+			</div>
+		{:else}
+			<label class="radio" class:disabled={o.disabled}>
+				<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} />
+				<span class="dot-ctl" aria-hidden="true"></span>
+				<span class="texts">
+					<span class="label-text">{o.label}</span>
+					{#if o.hint}<span class="hint">{o.hint}</span>{/if}
+				</span>
+			</label>
+		{/if}
 	{/each}
 </div>
 
@@ -54,8 +92,12 @@
 		font-size: var(--fs-sm);
 		color: var(--text);
 	}
-	.radio.disabled {
+	.radio.disabled,
+	.row.disabled .radio {
 		cursor: not-allowed;
+	}
+	.radio.disabled,
+	.row.disabled {
 		opacity: 0.45;
 	}
 	input {
@@ -102,9 +144,73 @@
 		display: flex;
 		flex-direction: column;
 		gap: 1px;
+		min-width: 0;
 	}
 	.hint {
 		font-size: var(--fs-xs);
 		color: var(--text-faint);
 	}
+
+	.rows {
+		gap: var(--sp-1);
+	}
+	.row-wrap {
+		display: flex;
+		flex-direction: column;
+	}
+	.row {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--sp-2);
+		padding: var(--pad, var(--sp-2) var(--sp-3));
+		border: 1px solid var(--border);
+		border-radius: var(--r-md);
+		transition:
+			border-color 0.12s var(--ease),
+			background-color 0.12s var(--ease);
+	}
+	.row.selected {
+		border-color: var(--accent-dim);
+		background: var(--bg-elevated);
+	}
+	.row .radio {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.row .texts {
+		flex: 1 1 auto;
+	}
+	.label-line {
+		display: flex;
+		align-items: baseline;
+		gap: var(--sp-2);
+		min-width: 0;
+	}
+	.row .label-text {
+		font-weight: 600;
+	}
+	.note {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+		white-space: nowrap;
+	}
+	.description {
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.action {
+		flex: none;
+		margin-left: auto;
+		display: flex;
+		align-items: center;
+	}
+	.below {
+		padding: var(--sp-2) 0 0 var(--sp-3);
+	}
+	.below:empty {
+		display: none;
+	}
 </style>

package/dist/components/molecules/RadioGroup.svelte.d.ts

@@ -2,13 +2,19 @@ export interface RadioOption {
     value: string;
     label: string;
     hint?: string;
+    description?: string;
+    note?: string;
     disabled?: boolean;
 }
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     options: RadioOption[];
     value?: string;
     name?: string;
     label: string;
+    variant?: 'list' | 'rows';
+    action?: Snippet<[RadioOption]>;
+    below?: Snippet<[RadioOption]>;
     class?: string;
 };
 declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/molecules/SectionHeader.svelte

@@ -4,7 +4,8 @@
 	// it, `sticky` pins it under the app header and publishes its height as
 	// `--section-header-h` on the parent so sibling sticky content can offset
 	// itself. `collapsible` turns the title into a disclosure button that
-	// toggles the `children` block rendered beneath.
+	// toggles the `children` block rendered beneath. `variant="group"` is the
+	// non-wrapping list-group row: `lead` · title · count · flexible rule · actions.
 	import type { Snippet } from 'svelte';
 	import Heading from '../atoms/Heading.svelte';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
@@ -16,6 +17,8 @@
 	let {
 		title,
 		label,
+		variant = 'default',
+		lead,
 		level = 2,
 		size,
 		subtitle,
@@ -36,6 +39,9 @@
 		title?: string;
 		/** Alias for `title`. */
 		label?: string;
+		variant?: 'default' | 'group';
+		/** Leading content before the title (status dot, badge); group rows. */
+		lead?: Snippet;
 		level?: 1 | 2 | 3 | 4;
 		size?: Size;
 		subtitle?: string;
@@ -76,6 +82,7 @@
 	data-tsu="SectionHeader"
 	class="section-header sh-{tone} {klass}"
 	class:sh-divider={divider}
+	class:sh-group={variant === 'group'}
 	class:sh-sticky={sticky}
 	class:sh-uppercase={uppercase}
 	class:sh-open={open}
@@ -99,6 +106,9 @@
 		{#if subtitle}
 			<Text variant="caption" class="sh-subtitle">{subtitle}</Text>
 		{/if}
+		{#if variant === 'group'}
+			<span class="sh-rule" aria-hidden="true"></span>
+		{/if}
 		{#if actions}
 			<div class="sh-actions">{@render actions()}</div>
 		{/if}
@@ -109,6 +119,9 @@
 </div>
 
 {#snippet head()}
+	{#if lead}
+		<span class="sh-lead">{@render lead()}</span>
+	{/if}
 	{#if hue !== undefined}
 		<span class="sh-swatch" style:--sh-hue={hue} aria-hidden="true"></span>
 	{/if}
@@ -148,6 +161,27 @@
 		padding-bottom: var(--sp-2);
 		border-bottom: 1px solid var(--border);
 	}
+	.sh-group > .sh-row {
+		flex-wrap: nowrap;
+		gap: var(--sp-2);
+	}
+	.sh-lead {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		flex: none;
+	}
+	.sh-rule {
+		flex: 1 1 auto;
+		min-width: var(--sp-4);
+		height: 1px;
+		background: var(--border);
+	}
+	.sh-group .sh-actions {
+		flex: none;
+		flex-wrap: nowrap;
+		margin-inline-start: 0;
+	}
 	.sh-sticky {
 		position: sticky;
 		top: var(--sticky-offset, var(--header-h, 0));

package/dist/components/molecules/SectionHeader.svelte.d.ts

@@ -6,6 +6,9 @@ type $$ComponentProps = {
     title?: string;
     /** Alias for `title`. */
     label?: string;
+    variant?: 'default' | 'group';
+    /** Leading content before the title (status dot, badge); group rows. */
+    lead?: Snippet;
     level?: 1 | 2 | 3 | 4;
     size?: Size;
     subtitle?: string;

package/dist/components/molecules/Timestamp.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	// A timestamp you can read five ways and inspect in one place. Inline it
-	// renders in the chosen `mode` (date / time / datetime / relative / iso),
+	// A timestamp you can read six ways and inspect in one place. Inline it
+	// renders in the chosen `mode` (date / time / datetime / relative / iso /
+	// short-iso),
 	// in the viewer's zone or UTC via the `utc` flag; by default clicking it
 	// opens a popover that lays out the same instant as ISO-UTC, local, relative,
 	// the IANA zone and the unix epoch — so the one value answers "when,
@@ -45,8 +46,8 @@
 		value: TimeInput | null | undefined;
 		/** Inline display mode. Default 'datetime'. */
 		mode?: TimestampMode;
-		/** Render the date/time/datetime modes in UTC rather than the viewer's
-		 *  zone. Default false. Ignored by 'iso' (always UTC) and 'relative'
+		/** Render the date/time/datetime/short-iso modes in UTC rather than the
+		 *  viewer's zone. Default false. Ignored by 'iso' (always UTC) and 'relative'
 		 *  (zoneless). Handy for calendar-date fields, where a local midnight-UTC
 		 *  value would otherwise show the wrong day. */
 		utc?: boolean;
@@ -101,7 +102,8 @@
 		{ id: 'time', name: 'Time' },
 		{ id: 'datetime', name: 'Date+time' },
 		{ id: 'relative', name: 'Relative' },
-		{ id: 'iso', name: 'ISO' }
+		{ id: 'iso', name: 'ISO' },
+		{ id: 'short-iso', name: 'YYYY-MM-DD' }
 	];
 
 	const rows = $derived(

package/dist/components/molecules/Timestamp.svelte.d.ts

@@ -7,8 +7,8 @@ type $$ComponentProps = {
     value: TimeInput | null | undefined;
     /** Inline display mode. Default 'datetime'. */
     mode?: TimestampMode;
-    /** Render the date/time/datetime modes in UTC rather than the viewer's
-     *  zone. Default false. Ignored by 'iso' (always UTC) and 'relative'
+    /** Render the date/time/datetime/short-iso modes in UTC rather than the
+     *  viewer's zone. Default false. Ignored by 'iso' (always UTC) and 'relative'
      *  (zoneless). Handy for calendar-date fields, where a local midnight-UTC
      *  value would otherwise show the wrong day. */
     utc?: boolean;

package/dist/components/molecules/WorkingDir.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	// Working-directory chip that abbreviates fish-style as its slot narrows:
+	// ancestors shrink to their first letter left → right, then the leaf alone,
+	// then the leaf ellipsised down to `minLeaf` chars. Candidate generation
+	// lives in `$lib/working-dir`; this component only measures and picks.
+	import Badge from '../atoms/Badge.svelte';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import { copyToClipboard } from '../../clipboard';
+	import { normalizeWorkingDir, workingDirCandidates } from '../../working-dir';
+
+	let {
+		path,
+		minLeaf = 18,
+		mono = true,
+		full = false,
+		icon = 'folder',
+		title,
+		copy = false,
+		copiedLabel = 'Copied',
+		oncopy,
+		class: klass = '',
+		style = ''
+	}: {
+		path: string;
+		/** Char floor the chip reserves so the (truncated) leaf is always legible. */
+		minLeaf?: number;
+		mono?: boolean;
+		/** Skip the fit algorithm: render the whole path and size to content. */
+		full?: boolean;
+		icon?: IconName;
+		/** Defaults to the full path. */
+		title?: string;
+		/** Render as a button that copies the full path on click. */
+		copy?: boolean;
+		copiedLabel?: string;
+		oncopy?: (ok: boolean) => void;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const normalized = $derived(normalizeWorkingDir(path));
+	const candidates = $derived(workingDirCandidates(path, { minLeaf }));
+
+	let avail = $state(Infinity);
+	let chPx = $state(8);
+	let chrome = $state(0);
+	let rail: HTMLSpanElement | undefined = $state();
+	let txt: HTMLSpanElement | undefined = $state();
+	let probe: HTMLSpanElement | undefined = $state();
+	let status = $state('');
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => {
+		if (!rail || full) return;
+		const measure = () => {
+			avail = rail!.clientWidth;
+			if (probe) chPx = probe.getBoundingClientRect().width / 10 || chPx;
+			const badgeEl = txt?.parentElement;
+			if (badgeEl && txt) chrome = Math.max(0, badgeEl.offsetWidth - txt.offsetWidth);
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(rail);
+		return () => ro.disconnect();
+	});
+
+	const shown = $derived.by(() => {
+		if (full) return normalized;
+		const budget = Math.max(0, avail - chrome - 1);
+		return candidates.find((c) => c.length * chPx <= budget) ?? candidates[candidates.length - 1];
+	});
+
+	async function onclick(e: MouseEvent) {
+		e.stopPropagation();
+		const ok = await copyToClipboard(normalized);
+		oncopy?.(ok);
+		status = ok ? copiedLabel : 'Copy failed';
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			status = '';
+		}, 1500);
+	}
+</script>
+
+<span
+	data-tsu="WorkingDir"
+	class="rail {klass}"
+	class:full
+	bind:this={rail}
+	{style}
+>
+	<Badge
+		as={copy ? 'button' : 'span'}
+		{mono}
+		style="min-width:0;max-width:100%;overflow:hidden;text-align:left"
+		title={title ?? normalized}
+		onpointerdown={copy ? (e: PointerEvent) => e.stopPropagation() : undefined}
+		onclick={copy ? onclick : undefined}
+	>
+		<Icon name={icon} />
+		<span class="text" bind:this={txt}>{shown}</span>
+		{#if !full}
+			<span class="probe" bind:this={probe} aria-hidden="true">{'0'.repeat(10)}</span>
+		{/if}
+	</Badge>
+	{#if copy}
+		<span class="sr-only" role="status" aria-live="polite">{status}</span>
+	{/if}
+</span>
+
+<style>
+	.rail {
+		display: flex;
+		align-items: center;
+		flex: 1 1 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+	.rail.full {
+		flex: none;
+		max-width: 100%;
+	}
+	.text {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+	.probe {
+		position: absolute;
+		visibility: hidden;
+		white-space: pre;
+		pointer-events: none;
+	}
+</style>

package/dist/components/molecules/WorkingDir.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type IconName } from '../atoms/Icon.svelte';
+type $$ComponentProps = {
+    path: string;
+    /** Char floor the chip reserves so the (truncated) leaf is always legible. */
+    minLeaf?: number;
+    mono?: boolean;
+    /** Skip the fit algorithm: render the whole path and size to content. */
+    full?: boolean;
+    icon?: IconName;
+    /** Defaults to the full path. */
+    title?: string;
+    /** Render as a button that copies the full path on click. */
+    copy?: boolean;
+    copiedLabel?: string;
+    oncopy?: (ok: boolean) => void;
+    class?: string;
+    style?: string;
+};
+declare const WorkingDir: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorkingDir = ReturnType<typeof WorkingDir>;
+export default WorkingDir;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox.svelte';
 export { default as Dot } from './components/atoms/Dot.svelte';
+export { default as Gauge, type GaugeTone } from './components/atoms/Gauge.svelte';
 export { default as Heading } from './components/atoms/Heading.svelte';
 export type { IconName } from './components/atoms/Icon.svelte';
 export { default as Icon } from './components/atoms/Icon.svelte';
@@ -16,6 +17,7 @@ export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
 export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, type ProgressSegment, } from './components/atoms/SegmentedProgress.svelte';
+export type { SelectOption } from './components/atoms/Select.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
@@ -27,6 +29,7 @@ export { default as AppShell } from './components/layouts/AppShell.svelte';
 export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
+export { default as MasterDetail } from './components/layouts/MasterDetail.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
 export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
@@ -35,15 +38,19 @@ export { default as Stack } from './components/layouts/Stack.svelte';
 export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { type BreadcrumbItem, default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as Callout } from './components/molecules/Callout.svelte';
+export { default as CapBar } from './components/molecules/CapBar.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
+export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 export { default as Field } from './components/molecules/Field.svelte';
+export { default as Fieldset } from './components/molecules/Fieldset.svelte';
 export { default as FileButton } from './components/molecules/FileButton.svelte';
 export { default as FilterInput, type FilterInputContext, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
+export { type DiffStats, default as GitRef, type PrState, type PullRequest, } from './components/molecules/GitRef.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
 export { default as KeyValue, type KeyValueRow, type KeyValueTone, } from './components/molecules/KeyValue.svelte';
 export { default as LoadMore } from './components/molecules/LoadMore.svelte';
@@ -64,6 +71,7 @@ export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
+export { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
@@ -74,3 +82,4 @@ export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type T
 export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { canonicalTone, type Tone } from './tone';
 export { type TruncateMode, type TruncateOptions, truncate } from './truncate';
+export { normalizeWorkingDir, type WorkingDirOptions, workingDirCandidates } from './working-dir';