@dorsk/tsumikit 0.71.0 → 0.72.0

package/dist/components/molecules/SwipeRow.svelte

@@ -0,0 +1,349 @@
+<script lang="ts" module>
+	import type { IconName } from '../atoms/Icon.svelte';
+	import type { Tone } from '../../tone';
+
+	export interface SwipeAction {
+		label: string;
+		icon?: IconName;
+		tone?: Tone;
+		onaction: () => void;
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * List row with a hidden action on each side, revealed by a horizontal swipe.
+	 * A swipe past `threshold` (fraction of the row width) fires the action on
+	 * release; a shorter one snaps back. The axis is locked after a few pixels:
+	 * a drag that is more vertical than horizontal is left to the scroller.
+	 * The same actions are reachable as visually hidden buttons for keyboard
+	 * and screen-reader users.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Icon from '../atoms/Icon.svelte';
+	import { canonicalTone } from '../../tone';
+
+	type Own = {
+		children: Snippet;
+		/** Revealed on a rightward swipe. */
+		leadingAction?: SwipeAction;
+		/** Revealed on a leftward swipe. */
+		trailingAction?: SwipeAction;
+		/** Custom pane content; defaults to the action's icon and label. */
+		leading?: Snippet<[SwipeAction, boolean]>;
+		trailing?: Snippet<[SwipeAction, boolean]>;
+		/** Fraction of the row width the content must travel to fire. */
+		threshold?: number;
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+	};
+
+	let {
+		children,
+		leadingAction,
+		trailingAction,
+		leading,
+		trailing,
+		threshold = 0.35,
+		disabled = false,
+		class: klass = '',
+		style: styleProp,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	const SLOP = 8;
+	const FALLBACK_WIDTH = 320;
+
+	let offset = $state(0);
+	let dragging = $state(false);
+	let settling = $state(false);
+
+	let pointerId: number | null = null;
+	let startX = 0;
+	let startY = 0;
+	let width = $state(0);
+	let locked: 'x' | 'y' | null = null;
+	let swallowClick = false;
+	let settleTimer: ReturnType<typeof setTimeout> | undefined;
+
+	const armed = $derived(width > 0 && Math.abs(offset) >= width * threshold);
+	const side = $derived(offset > 0 ? 'leading' : offset < 0 ? 'trailing' : null);
+	const active = $derived(side === 'leading' ? leadingAction : side === 'trailing' ? trailingAction : undefined);
+	const tone = $derived(canonicalTone(active?.tone ?? 'neutral'));
+
+	function reducedMotion() {
+		return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+	}
+
+	function release(el: HTMLElement) {
+		if (pointerId !== null && typeof el.releasePointerCapture === 'function') {
+			try {
+				el.releasePointerCapture(pointerId);
+			} catch {}
+		}
+		pointerId = null;
+		locked = null;
+		dragging = false;
+	}
+
+	function settle() {
+		clearTimeout(settleTimer);
+		if (reducedMotion()) {
+			offset = 0;
+			return;
+		}
+		settling = true;
+		offset = 0;
+		settleTimer = setTimeout(() => (settling = false), 220);
+	}
+
+	function onpointerdown(e: PointerEvent) {
+		swallowClick = false;
+		if (disabled || e.button !== 0 || pointerId !== null) return;
+		if (!leadingAction && !trailingAction) return;
+		const el = e.currentTarget as HTMLElement;
+		pointerId = e.pointerId;
+		startX = e.clientX;
+		startY = e.clientY;
+		width = el.clientWidth || FALLBACK_WIDTH;
+		locked = null;
+		clearTimeout(settleTimer);
+		settling = false;
+	}
+
+	function onpointermove(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		const el = e.currentTarget as HTMLElement;
+		const dx = e.clientX - startX;
+		const dy = e.clientY - startY;
+		if (locked === null) {
+			if (Math.hypot(dx, dy) < SLOP) return;
+			if (Math.abs(dy) >= Math.abs(dx)) {
+				locked = 'y';
+				release(el);
+				return;
+			}
+			locked = 'x';
+			dragging = true;
+			swallowClick = true;
+			if (typeof el.setPointerCapture === 'function') {
+				try {
+					el.setPointerCapture(e.pointerId);
+				} catch {}
+			}
+		}
+		if (locked !== 'x') return;
+		const max = leadingAction ? width : 0;
+		const min = trailingAction ? -width : 0;
+		offset = Math.max(min, Math.min(max, dx));
+	}
+
+	function onpointerup(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		const el = e.currentTarget as HTMLElement;
+		const fire = locked === 'x' && armed ? active : undefined;
+		release(el);
+		settle();
+		fire?.onaction();
+	}
+
+	function onpointercancel(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		release(e.currentTarget as HTMLElement);
+		settle();
+	}
+
+	function onclickcapture(e: MouseEvent) {
+		if (!swallowClick) return;
+		swallowClick = false;
+		e.stopPropagation();
+		e.preventDefault();
+	}
+
+	function onlostpointercapture() {
+		if (pointerId === null) return;
+		pointerId = null;
+		locked = null;
+		dragging = false;
+		settle();
+	}
+</script>
+
+<div
+	data-tsu="SwipeRow"
+	class="swiperow {klass}"
+	class:swiperow--dragging={dragging}
+	class:swiperow--settling={settling}
+	class:swiperow--armed={armed}
+	class:swiperow--leading={side === 'leading'}
+	class:swiperow--trailing={side === 'trailing'}
+	class:swiperow-tone-accent={tone === 'accent'}
+	class:swiperow-tone-success={tone === 'ok'}
+	class:swiperow-tone-info={tone === 'info'}
+	class:swiperow-tone-warn={tone === 'warn'}
+	class:swiperow-tone-danger={tone === 'danger'}
+	style="--swiperow-x: {offset}px;{styleProp ?? ''}"
+	{onpointerdown}
+	{onpointermove}
+	{onpointerup}
+	{onpointercancel}
+	{onlostpointercapture}
+	{onclickcapture}
+	{...rest}
+>
+	{#if leadingAction}
+		<div class="swiperow-pane swiperow-pane--leading" aria-hidden="true" data-part="leading">
+			{#if leading}
+				{@render leading(leadingAction, side === 'leading' && armed)}
+			{:else}
+				{#if leadingAction.icon}<Icon name={leadingAction.icon} />{/if}
+				<span class="swiperow-pane-label">{leadingAction.label}</span>
+			{/if}
+		</div>
+	{/if}
+	{#if trailingAction}
+		<div class="swiperow-pane swiperow-pane--trailing" aria-hidden="true" data-part="trailing">
+			{#if trailing}
+				{@render trailing(trailingAction, side === 'trailing' && armed)}
+			{:else}
+				{#if trailingAction.icon}<Icon name={trailingAction.icon} />{/if}
+				<span class="swiperow-pane-label">{trailingAction.label}</span>
+			{/if}
+		</div>
+	{/if}
+	<div class="swiperow-content" data-part="content">
+		{@render children()}
+	</div>
+	{#if leadingAction || trailingAction}
+		<div class="swiperow-actions" data-part="actions">
+			{#if leadingAction}
+				<button type="button" class="swiperow-sr" data-part="leading-button" {disabled} onclick={() => leadingAction?.onaction()}>
+					{leadingAction.label}
+				</button>
+			{/if}
+			{#if trailingAction}
+				<button type="button" class="swiperow-sr" data-part="trailing-button" {disabled} onclick={() => trailingAction?.onaction()}>
+					{trailingAction.label}
+				</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.swiperow {
+		--swiperow-tone: var(--bg-elevated-2);
+		--swiperow-ink: var(--text);
+		position: relative;
+		overflow: hidden;
+		touch-action: pan-y;
+		user-select: none;
+		-webkit-user-select: none;
+	}
+	.swiperow-tone-accent {
+		--swiperow-tone: var(--accent);
+		--swiperow-ink: var(--text-on-accent);
+	}
+	.swiperow-tone-success {
+		--swiperow-tone: var(--ok);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-info {
+		--swiperow-tone: var(--info);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-warn {
+		--swiperow-tone: var(--warn);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-danger {
+		--swiperow-tone: var(--danger);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-pane {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: 0 var(--sp-4);
+		background: var(--swiperow-tone);
+		color: var(--swiperow-ink);
+		font-size: var(--fs-sm);
+		font-weight: 600;
+		visibility: hidden;
+		pointer-events: none;
+	}
+	.swiperow-pane--leading {
+		justify-content: flex-start;
+	}
+	.swiperow-pane--trailing {
+		justify-content: flex-end;
+	}
+	.swiperow--leading .swiperow-pane--leading,
+	.swiperow--trailing .swiperow-pane--trailing {
+		visibility: visible;
+	}
+	.swiperow-pane :global(svg) {
+		transition: transform 120ms var(--ease);
+	}
+	.swiperow--armed .swiperow-pane :global(svg) {
+		transform: scale(1.2);
+	}
+	.swiperow-content {
+		position: relative;
+		background: var(--bg);
+		transform: translate3d(var(--swiperow-x), 0, 0);
+		will-change: transform;
+	}
+	.swiperow--settling .swiperow-content {
+		transition: transform 200ms var(--ease);
+	}
+	.swiperow--dragging .swiperow-content {
+		cursor: grabbing;
+	}
+	.swiperow-actions {
+		position: absolute;
+		inset: 0 0 0 auto;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		padding: 0 var(--sp-2);
+		pointer-events: none;
+	}
+	.swiperow-sr {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	.swiperow-sr:focus-visible {
+		position: static;
+		width: auto;
+		height: auto;
+		margin: 0;
+		padding: var(--sp-1) var(--sp-2);
+		clip: auto;
+		pointer-events: auto;
+		font: inherit;
+		font-size: var(--fs-sm);
+		color: var(--swiperow-ink);
+		background: var(--swiperow-tone);
+		border-radius: var(--r-sm);
+		outline: 2px solid var(--accent);
+		outline-offset: 1px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.swiperow--settling .swiperow-content,
+		.swiperow-pane :global(svg) {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,37 @@
+import type { IconName } from '../atoms/Icon.svelte';
+import type { Tone } from '../../tone';
+export interface SwipeAction {
+    label: string;
+    icon?: IconName;
+    tone?: Tone;
+    onaction: () => void;
+}
+/**
+     * List row with a hidden action on each side, revealed by a horizontal swipe.
+     * A swipe past `threshold` (fraction of the row width) fires the action on
+     * release; a shorter one snaps back. The axis is locked after a few pixels:
+     * a drag that is more vertical than horizontal is left to the scroller.
+     * The same actions are reachable as visually hidden buttons for keyboard
+     * and screen-reader users.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    children: Snippet;
+    /** Revealed on a rightward swipe. */
+    leadingAction?: SwipeAction;
+    /** Revealed on a leftward swipe. */
+    trailingAction?: SwipeAction;
+    /** Custom pane content; defaults to the action's icon and label. */
+    leading?: Snippet<[SwipeAction, boolean]>;
+    trailing?: Snippet<[SwipeAction, boolean]>;
+    /** Fraction of the row width the content must travel to fire. */
+    threshold?: number;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const SwipeRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwipeRow = ReturnType<typeof SwipeRow>;
+export default SwipeRow;

package/dist/components/organisms/ConversationFeed.svelte

@@ -17,6 +17,7 @@
 		loadMoreLabel = 'Load older',
 		follow = true,
 		jumpLabel = 'Jump to latest',
+		label = 'Messages',
 		class: klass = '',
 		style: styleProp = ''
 	}: {
@@ -32,6 +33,8 @@
 		/** Stick to the bottom while the user is at the bottom. */
 		follow?: boolean;
 		jumpLabel?: string;
+		/** Accessible name of the message log. */
+		label?: string;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -41,9 +44,10 @@
 	let scroller = $state<HTMLElement | null>(null);
 	let stuck = $state(true);
 	let pending = $state(false);
+	// Keeps screen readers from announcing a history load or swap as new messages.
+	let busy = $state(false);
 	let prevFirst: string | number | undefined;
 	let prevLast: string | number | undefined;
-	let prevLength = 0;
 
 	const atBottom = (el: HTMLElement) => el.scrollHeight - el.scrollTop - el.clientHeight <= THRESHOLD;
 
@@ -64,17 +68,26 @@
 		const el = scroller;
 		const first = items.length ? key(items[0]) : undefined;
 		const last = items.length ? key(items[items.length - 1]) : undefined;
-		const length = items.length;
 		if (!el) return;
-		const prepended = prevFirst !== undefined && first !== prevFirst && length > prevLength;
-		const appended = last !== undefined && last !== prevLast;
+		const keys = prevFirst === undefined ? null : new Set(items.map(key));
+		const kept = (k: string | number | undefined) => k !== undefined && keys !== null && keys.has(k);
+		const prepended = first !== prevFirst && last === prevLast && kept(prevFirst);
+		const reset = prevLast !== undefined && !kept(prevLast) && !kept(prevFirst);
+		const appended = !reset && last !== undefined && last !== prevLast;
 		prevFirst = first;
 		prevLast = last;
-		prevLength = length;
 		const fromBottom = el.scrollHeight - el.scrollTop;
+		if (prepended || reset) {
+			busy = true;
+			requestAnimationFrame(() => requestAnimationFrame(() => (busy = false)));
+		}
 		tick().then(() => {
 			if (prepended) {
 				el.scrollTop = el.scrollHeight - fromBottom;
+			} else if (reset) {
+				pending = false;
+				if (untrack(() => follow)) scrollToBottom();
+				else el.scrollTop = 0;
 			} else if (appended) {
 				if (untrack(() => follow && stuck)) scrollToBottom();
 				else pending = true;
@@ -100,7 +113,7 @@
 		{#if items.length === 0 && empty}
 			{@render empty()}
 		{/if}
-		<div class="feed-items" {@attach pin}>
+		<div class="feed-items" role="log" aria-label={label} aria-busy={busy} {@attach pin}>
 			{#each items as entry, i (key(entry))}
 				{@render item(entry, i)}
 			{/each}
@@ -138,9 +151,10 @@
 	}
 	.jump {
 		position: absolute;
-		inset-inline-start: 50%;
+		inset-inline: 0;
 		bottom: var(--sp-3);
-		transform: translateX(-50%);
+		width: fit-content;
+		margin-inline: auto;
 		z-index: 1;
 		border-radius: var(--r-pill);
 		box-shadow: var(--shadow-md);

package/dist/components/organisms/ConversationFeed.svelte.d.ts

@@ -13,6 +13,8 @@ declare function $$render<T>(): {
         /** Stick to the bottom while the user is at the bottom. */
         follow?: boolean;
         jumpLabel?: string;
+        /** Accessible name of the message log. */
+        label?: string;
         class?: string;
         style?: string;
     };

package/dist/components/organisms/DataTable.svelte

@@ -87,9 +87,11 @@
 		/** Replaces a column's header content (e.g. a select-all checkbox). */
 		headerSnippets?: Record<string, Snippet<[Column<T>]>>;
 		empty?: string | Snippet;
+		/** Sticks within the table's own scroller, which also scrolls horizontally,
+		 *  so it only sticks when the table has a bounded height
+		 *  (e.g. `style="max-height: 60vh"`), not to the page. */
 		stickyHeader?: boolean;
-		/** Distance from the scroll container's top for the sticky header, e.g.
-		 *  `var(--header-h)` when the page header overlaps. Defaults to 0. */
+		/** Distance from the scroller's top for the sticky header. Defaults to 0. */
 		stickyOffset?: string;
 		/** `fixed` makes declared column widths authoritative (needed for truncate). */
 		layout?: 'auto' | 'fixed';
@@ -171,6 +173,13 @@
 
 	const colCount = $derived(columns.length + (rowActions ? 1 : 0));
 
+	const NESTED_CONTROL = 'a,button,input,select,textarea,label,summary,[role="button"],[contenteditable]';
+
+	function fromNestedControl(e: Event & { currentTarget: HTMLElement }): boolean {
+		const hit = (e.target as Element).closest(NESTED_CONTROL);
+		return !!hit && hit !== e.currentTarget && e.currentTarget.contains(hit);
+	}
+
 	function display(col: Column<T>, row: T): unknown {
 		if (col.get) return col.get(row);
 		return (row as Record<string, unknown>)[col.key];
@@ -245,7 +254,7 @@
 						{:else if col.sortable}
 							<button type="button" class="dt-sort" onclick={() => toggleSort(col)}>
 								<span>{col.label}</span>
-								<span class="dt-arrow" class:active={sortKey === col.key}>
+								<span class="dt-arrow" aria-hidden="true" class:active={sortKey === col.key}>
 									{sortKey === col.key ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
 								</span>
 							</button>
@@ -280,9 +289,14 @@
 						class:clickable={!!onrowclick}
 						class:toned={!!tone && tone !== 'neutral'}
 						tabindex={onrowclick ? 0 : undefined}
-						onclick={onrowclick ? () => onrowclick(row) : undefined}
+						onclick={onrowclick
+							? (e) => {
+									if (!fromNestedControl(e)) onrowclick(row);
+								}
+							: undefined}
 						onkeydown={onrowclick
 							? (e) => {
+									if (e.target !== e.currentTarget) return;
 									if (e.key === 'Enter' || e.key === ' ') {
 										e.preventDefault();
 										onrowclick(row);
@@ -432,7 +446,10 @@
 	tr.clickable:hover,
 	tr.clickable:focus-visible {
 		background: var(--bg-elevated-2);
-		outline: none;
+	}
+	tr.clickable:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: -2px;
 	}
 	td.truncate {
 		white-space: nowrap;

package/dist/components/organisms/DataTable.svelte.d.ts

@@ -38,9 +38,11 @@ declare function $$render<T>(): {
         /** Replaces a column's header content (e.g. a select-all checkbox). */
         headerSnippets?: Record<string, Snippet<[Column<T>]>>;
         empty?: string | Snippet;
+        /** Sticks within the table's own scroller, which also scrolls horizontally,
+         *  so it only sticks when the table has a bounded height
+         *  (e.g. `style="max-height: 60vh"`), not to the page. */
         stickyHeader?: boolean;
-        /** Distance from the scroll container's top for the sticky header, e.g.
-         *  `var(--header-h)` when the page header overlaps. Defaults to 0. */
+        /** Distance from the scroller's top for the sticky header. Defaults to 0. */
         stickyOffset?: string;
         /** `fixed` makes declared column widths authoritative (needed for truncate). */
         layout?: "auto" | "fixed";

package/dist/components/organisms/FilterSearchBar.svelte

@@ -29,6 +29,7 @@
 		size = 'md',
 		shape = 'square',
 		surface = 'base',
+		font = 'mono',
 		hotkey,
 		showHotkey = false,
 		grow = false,
@@ -56,6 +57,8 @@
 		size?: ControlSize;
 		shape?: 'square' | 'pill';
 		surface?: 'base' | 'raised' | 'sunken';
+		/** `sans` renders the typed text and placeholder in `--font-sans`; chips stay mono. */
+		font?: 'mono' | 'sans';
 		hotkey?: string;
 		showHotkey?: boolean;
 		grow?: boolean;
@@ -81,6 +84,7 @@
 	{size}
 	{shape}
 	{surface}
+	{font}
 	{hotkey}
 	{showHotkey}
 	{grow}

package/dist/components/organisms/FilterSearchBar.svelte.d.ts

@@ -19,6 +19,8 @@ type Own = {
     size?: ControlSize;
     shape?: 'square' | 'pill';
     surface?: 'base' | 'raised' | 'sunken';
+    /** `sans` renders the typed text and placeholder in `--font-sans`; chips stay mono. */
+    font?: 'mono' | 'sans';
     hotkey?: string;
     showHotkey?: boolean;
     grow?: boolean;

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { type ResizeHandleParams, resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
+export { default as TabBar, type TabBarItem } from './components/layouts/TabBar.svelte';
 export { default as Toolbar } from './components/layouts/Toolbar.svelte';
 export { type AccordionHeaderContext, type AccordionItem, type AccordionVariant, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { type Attachment, default as AttachmentList, } from './components/molecules/AttachmentList.svelte';
@@ -79,6 +80,7 @@ export { default as OptionButton } from './components/molecules/OptionButton.sve
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as Prose } from './components/molecules/Prose.svelte';
+export { default as PullToRefresh } from './components/molecules/PullToRefresh.svelte';
 export { default as RadialMenu, type RadialArc, } from './components/molecules/RadialMenu.svelte';
 export { default as RadioGroup, type RadioOption, } from './components/molecules/RadioGroup.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
@@ -87,6 +89,7 @@ export { default as SelectButton } from './components/molecules/SelectButton.sve
 export { default as SortableList, SORTABLE_LIST_MESSAGES, type SortableListMessages, type SortableListMove, type SortableListRowContext, } from './components/molecules/SortableList.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
+export { default as SwipeRow, type SwipeAction } from './components/molecules/SwipeRow.svelte';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';

package/dist/index.js

@@ -46,6 +46,7 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
+export { default as TabBar } from './components/layouts/TabBar.svelte';
 export { default as Toolbar } from './components/layouts/Toolbar.svelte';
 export { default as Accordion, } from './components/molecules/Accordion.svelte';
 export { default as AttachmentList, } from './components/molecules/AttachmentList.svelte';
@@ -87,6 +88,7 @@ export { default as OptionButton } from './components/molecules/OptionButton.sve
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as Prose } from './components/molecules/Prose.svelte';
+export { default as PullToRefresh } from './components/molecules/PullToRefresh.svelte';
 export { default as RadialMenu, } from './components/molecules/RadialMenu.svelte';
 export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
@@ -95,6 +97,7 @@ export { default as SelectButton } from './components/molecules/SelectButton.sve
 export { default as SortableList, SORTABLE_LIST_MESSAGES, } from './components/molecules/SortableList.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
+export { default as SwipeRow } from './components/molecules/SwipeRow.svelte';
 export { default as Tabs } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';

package/dist/markdown.js

@@ -15,6 +15,7 @@ const BLOCK_RE = new RegExp(`${BLOCK_L}(\\d+)${BLOCK_R}`, 'g');
 const SPAN_L = '\x10';
 const SPAN_R = '\x11';
 const SPAN_RE = new RegExp(`${SPAN_L}(\\d+)${SPAN_R}`, 'g');
+const BARE_URL_RE = new RegExp(`\\bhttps?://(?:&amp;|[^\\s&<>"${SPAN_L}${SPAN_R}])+`, 'g');
 // Terminal escape sequences (the ansi-regex pattern), then the remaining C0
 // controls except tab and newline, plus DEL.
 const ANSI_RE = 
@@ -62,20 +63,27 @@ function autolinkUrls(s) {
     });
     return s.replace(SPAN_RE, (_m, i) => saved[Number(i)]);
 }
-// Inline passes on already-escaped text.
+// Inline passes on already-escaped text; emphasis never reaches inside code, link tags or URLs.
 function inline(s, autolink) {
-    s = s.replace(/`([^`]+)`/g, '<code>$1</code>');
-    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-    s = s.replace(/(^|[^*\w])\*([^*\n]+)\*/g, '$1<em>$2</em>');
-    s = s.replace(/(^|[^\w])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
-    s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+    const held = [];
+    const hold = (html) => `${SPAN_L}${held.push(html) - 1}${SPAN_R}`;
+    s = s.replace(/`([^`]+)`/g, (_m, code) => hold(`<code>${code}</code>`));
     s = s.replace(/\[([^\]]+)\]\(([^\s)]+)\)/g, (m, text, url) => {
         const href = safeHref(url);
         if (!href)
             return m;
         const external = /^https?:/i.test(href) ? ' target="_blank" rel="noopener noreferrer"' : '';
-        return `<a href="${href}"${external}>${text}</a>`;
+        return `${hold(`<a href="${href}"${external}>`)}${text}${hold('</a>')}`;
+    });
+    s = s.replace(BARE_URL_RE, (raw) => {
+        const url = raw.replace(/[*_~]+$/, '');
+        return hold(url) + raw.slice(url.length);
     });
+    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    s = s.replace(/(^|[^*\w])\*([^*\n]+)\*/g, '$1<em>$2</em>');
+    s = s.replace(/(^|[^\w])_([^_\n]+)_(?!\w)/g, '$1<em>$2</em>');
+    s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+    s = s.replace(SPAN_RE, (_m, i) => held[Number(i)]);
     return autolink ? autolinkUrls(s) : s;
 }
 function splitRow(row) {