@dorsk/tsumikit 0.80.0 → 0.80.2

package/dist/components/atoms/Artwork.svelte

@@ -4,7 +4,7 @@
 	// initials (or an icon) when there is no source or it fails to load. Width
 	// comes from `size`, height from `aspect`; `status` overlays a Dot/Badge in
 	// the bottom-right corner.
-	import type { Snippet } from 'svelte';
+	import { untrack, type Snippet } from 'svelte';
 	import { artworkGradient, initials as initialsOf } from '../../artwork';
 	import Icon from './Icon.svelte';
 	import type { IconName } from './Icon.svelte';
@@ -51,23 +51,27 @@
 		...rest
 	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
-	let failed = $state(false);
-	$effect(() => {
-		src;
-		srcset;
-		failed = false;
-	});
+	const source = $derived(`${src ?? ''} ${srcset ?? ''}`);
+	let failedSource = $state<string | null>(null);
 
 	const key = $derived(seed ?? alt);
-	const showImage = $derived(Boolean(src) && !failed);
+	const showImage = $derived(Boolean(src) && failedSource !== source);
 	const tile = $derived(showImage ? undefined : alt.trim() ? 'named' : 'decorative');
 	const gradient = $derived(showImage ? undefined : artworkGradient(key));
 	const text = $derived(fallback === 'initials' ? initialsOf(key) : '');
 
 	function fail() {
-		failed = true;
+		failedSource = source;
 		onerror?.();
 	}
+
+	function watchLoad(img: HTMLImageElement) {
+		img.addEventListener('error', fail);
+		untrack(() => {
+			if (img.complete && img.naturalWidth === 0) fail();
+		});
+		return () => img.removeEventListener('error', fail);
+	}
 </script>
 
 <div
@@ -83,7 +87,7 @@
 	{...rest}
 >
 	{#if showImage}
-		<img {src} {srcset} {sizes} {alt} class="img fit-{fit}" loading="lazy" decoding="async" onerror={fail} />
+		<img {src} {srcset} {sizes} {alt} class="img fit-{fit}" loading="lazy" decoding="async" {@attach watchLoad} />
 	{:else if fallback === 'initials' && text}
 		<span class="initials" aria-hidden="true">{text}</span>
 	{:else if fallback === 'icon'}

package/dist/components/atoms/Artwork.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { IconName } from './Icon.svelte';
 type Own = {
     src?: string | null;

package/dist/components/atoms/Link.svelte

@@ -35,14 +35,14 @@
 		{href}
 		class="link tone-{tone} underline-{underline} align-{align} {klass}"
 		data-tsu="Link"
-		{...rest}>{@render children?.()}</a
+		{...rest}><span class="link-text"><span class="link-ink">{@render children?.()}</span></span></a
 	>
 {:else}
 	<button
 		class="link tone-{tone} underline-{underline} align-{align} {klass}"
 		data-tsu="Link"
 		{...rest}
-		type="button">{@render children?.()}</button
+		type="button"><span class="link-text"><span class="link-ink">{@render children?.()}</span></span></button
 	>
 {/if}
 
@@ -102,44 +102,52 @@
 		--link-hold: var(--dur-instant);
 	}
 
-	/* Sweep line: the underline fills in from the left and leaves to the right. */
+	/* Sweep line: the underline fills in from the left and leaves to the right. Both variants paint
+	   on the inline .link-ink so they follow the text whatever box the app gives .link. */
 	.link:not(.underline-none):not(:global([data-fx-link]:not([data-fx-link='sweep'])) *),
 	:global([data-fx-link='sweep']) .link:not(.underline-none):not(:global([data-fx-link='sweep'] [data-fx-link]:not([data-fx-link='sweep'])) *) {
 		--link-base: 0%;
 		text-decoration: none;
-		background-image:
-			linear-gradient(currentColor, currentColor),
-			linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
-		background-repeat: no-repeat;
-		background-position: var(--link-on, 100%) 100%, 0 100%;
-		background-size: var(--link-draw, 0%) 1.5px, var(--link-base) 1px;
-		transition:
-			color var(--dur-fast) ease,
-			background-size var(--dur-fast) var(--ease-out);
 		&.underline-always {
 			--link-base: 100%;
 		}
+		.link-ink {
+			background-image:
+				linear-gradient(currentColor, currentColor),
+				linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
+			background-repeat: no-repeat;
+			background-position: var(--link-on, 100%) 100%, 0 100%;
+			background-size: var(--link-draw, 0%) 1.5px, var(--link-base) 1px;
+			transition: background-size var(--dur-fast) var(--ease-out);
+		}
 	}
 
 	/* Highlighter: a marker swipes in behind the words and fades on leave. */
 	:global([data-fx-link='highlight']) .link:not(.underline-none):not(:global([data-fx-link='highlight'] [data-fx-link]:not([data-fx-link='highlight'])) *) {
 		margin-inline: -0.18em;
 		padding-inline: 0.18em;
-		border-radius: 0.2em 0.35em 0.25em 0.4em;
-		background-image: linear-gradient(100deg, var(--link-mark), color-mix(in srgb, var(--link-mark) 70%, transparent));
-		background-repeat: no-repeat;
-		background-size: var(--link-draw, 0%) 100%;
 		text-decoration-color: var(--link-deco, color-mix(in srgb, currentColor 45%, transparent));
 		text-underline-offset: 0.2em;
 		transition:
 			color var(--dur-fast) ease,
 			text-decoration-color var(--dur-fast) ease,
-			--link-mark var(--link-in, var(--dur-exit)) ease,
-			background-size var(--link-grow, var(--dur-instant)) var(--ease-out) var(--link-hold, var(--dur-exit));
+			--link-mark var(--link-in, var(--dur-exit)) ease;
+		.link-text,
+		.link-ink {
+			margin-inline: -0.18em;
+			padding-inline: 0.18em;
+		}
+		.link-ink {
+			border-radius: 0.2em 0.35em 0.25em 0.4em;
+			background-image: linear-gradient(100deg, var(--link-mark), color-mix(in srgb, var(--link-mark) 70%, transparent));
+			background-repeat: no-repeat;
+			background-size: var(--link-draw, 0%) 100%;
+			transition: background-size var(--link-grow, var(--dur-instant)) var(--ease-out) var(--link-hold, var(--dur-exit));
+		}
 	}
 	@property --link-mark {
 		syntax: '<color>';
-		inherits: false;
+		inherits: true;
 		initial-value: transparent;
 	}
 	@media (pointer: coarse) {

package/dist/components/layouts/NavBar.svelte

@@ -38,6 +38,7 @@
 		placement = 'inline',
 		orientation = 'stacked',
 		variant = 'flush',
+		labels = 'fit',
 		maxWidth,
 		class: klass = '',
 		style: styleProp = '',
@@ -57,6 +58,13 @@
 		orientation?: 'stacked' | 'inline';
 		/** 'floating' = rounded elevated card inset from the edges. */
 		variant?: 'flush' | 'floating';
+		/**
+		 * Stacked labels that run out of room. 'fit' shrinks the font down to
+		 * `--navbar-label-min` (10px) so the longest word fits, then wraps to two
+		 * lines, then ellipsis. 'truncate' = one line with ellipsis at full size.
+		 * 'full' never clips: labels spill past their item.
+		 */
+		labels?: 'fit' | 'truncate' | 'full';
 		/** Caps and centres the row of items. */
 		maxWidth?: string;
 		class?: string;
@@ -64,6 +72,23 @@
 		[key: string]: unknown;
 	} = $props();
 
+	// Widest word across the labels in em, rounded up from typical UI sans metrics.
+	const charEm = (c: string) =>
+		/[ijlI.,:;!|']/.test(c) ? 0.28
+		: /[frtJ]/.test(c) ? 0.4
+		: /[mwMW]/.test(c) ? 0.94
+		: /[A-Z]/.test(c) ? 0.72
+		: /[0-9]/.test(c) ? 0.58
+		: /[a-z]/.test(c) ? 0.6
+		: c >= '\u2e80' ? 1
+		: 0.62;
+	const labelEm = $derived(
+		Math.max(
+			1,
+			...items.flatMap((item) => item.label.split(/\s+/).map((w) => [...w].reduce((sum, c) => sum + charEm(c), 0)))
+		).toFixed(2)
+	);
+
 	const hasBadge = (badge: NavBarItem['badge']) =>
 		badge !== undefined && badge !== null && badge !== '' && badge !== 0;
 
@@ -151,11 +176,11 @@
 <nav
 	data-tsu="NavBar"
 	aria-label={label}
-	class="navbar {klass}"
+	class="navbar labels-{labels} {klass}"
 	class:bar={placement === 'bar'}
 	class:floating={variant === 'floating'}
 	class:stacked={orientation === 'stacked'}
-	style="{maxWidth ? `--navbar-max: ${maxWidth};` : ''}{styleProp}"
+	style="--navbar-label-em: {labelEm};{maxWidth ? ` --navbar-max: ${maxWidth};` : ''}{styleProp}"
 	{...rest}
 >
 	<div class="navbar-row">
@@ -314,6 +339,28 @@
 	.stacked .navbar-label {
 		max-width: 100%;
 	}
+	.stacked.labels-fit :is(.navbar-inner, .navbar-side) {
+		gap: 0;
+	}
+	.stacked.labels-fit .navbar-link {
+		container-type: inline-size;
+		contain-intrinsic-inline-size: 4rem;
+		padding-inline: 0;
+	}
+	.stacked.labels-fit .navbar-label {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		font-size: clamp(var(--navbar-label-min, calc(0.625rem * var(--fs-scale))), 100cqi / var(--navbar-label-em), 1em);
+		line-height: var(--lh-tight);
+		text-align: center;
+		white-space: normal;
+	}
+	.labels-full .navbar-label {
+		max-width: none;
+		overflow: visible;
+	}
 	.navbar-badge {
 		position: absolute;
 		top: -0.35rem;

package/dist/components/layouts/NavBar.svelte.d.ts

@@ -33,6 +33,13 @@ type $$ComponentProps = {
     orientation?: 'stacked' | 'inline';
     /** 'floating' = rounded elevated card inset from the edges. */
     variant?: 'flush' | 'floating';
+    /**
+     * Stacked labels that run out of room. 'fit' shrinks the font down to
+     * `--navbar-label-min` (10px) so the longest word fits, then wraps to two
+     * lines, then ellipsis. 'truncate' = one line with ellipsis at full size.
+     * 'full' never clips: labels spill past their item.
+     */
+    labels?: 'fit' | 'truncate' | 'full';
     /** Caps and centres the row of items. */
     maxWidth?: string;
     class?: string;

package/dist/components/molecules/LookPicker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ComponentProps } from 'svelte';
 	import SegmentedControl, { type SegmentOption } from './SegmentedControl.svelte';
+	import { browser } from '../../env';
 	import { theme } from '../../stores/theme.svelte';
 	import { LOOKS, type LookId } from '../../theme-mode';
 
@@ -40,7 +41,7 @@
 </script>
 
 {#snippet option(o: SegmentOption)}
-	<span class="look">
+	<span class="look" data-look-option={o.value}>
 		<span class="name">{o.label}</span>
 		{#if experimentalLabel && tagged.has(o.value)}<span class="tag">{experimentalLabel}</span>{/if}
 	</span>
@@ -48,7 +49,7 @@
 
 <SegmentedControl
 	{options}
-	value={theme.look}
+	value={browser ? theme.look : undefined}
 	onchange={(v) => {
 		theme.setLook(v);
 		onchange?.(theme.look);
@@ -75,6 +76,18 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	/* Prerendered markup selects nothing; until hydration the look prepainted on <html> shows as selected. */
+	:global(:root:not([data-look]) .look-picker:not(:has(.selected)) .seg-item:has(> [data-look-option='default'])),
+	:global(:root[data-look='depth'] .look-picker:not(:has(.selected)) .seg-item:has(> [data-look-option='depth'])),
+	:global(:root[data-look='tactile'] .look-picker:not(:has(.selected)) .seg-item:has(> [data-look-option='tactile'])),
+	:global(:root[data-look='editorial'] .look-picker:not(:has(.selected)) .seg-item:has(> [data-look-option='editorial'])) {
+		color: var(--text);
+		background: var(--thumb-fill);
+		box-shadow: var(--thumb-shadow);
+	}
+	:global(:root[data-look='editorial'] .look-picker:not(:has(.selected)) .seg-item:has(> [data-look-option='editorial'])) {
+		color: var(--bg);
+	}
 	.tag {
 		flex: none;
 		padding: 0 var(--sp-1);

package/dist/components/molecules/SectionHeader.svelte

@@ -258,6 +258,8 @@
 		border: 0;
 		background: none;
 		font: inherit;
+		text-transform: inherit;
+		letter-spacing: inherit;
 		color: inherit;
 		text-align: start;
 		cursor: pointer;

package/dist/components/molecules/ThemePicker.svelte

@@ -5,9 +5,12 @@
 	// (--c-bg, --c-surface, --c-text, --c-accent; the derived --bg etc. are
 	// resolved once at :root and would not re-scope). The root default theme
 	// has no [data-theme] block, so its swatch carries the :root values.
+	// Prerendered, the trigger swatch is unscoped: it shows the theme prepainted
+	// on <html> until hydration.
 	import type { ComponentProps } from 'svelte';
 	import type { AnchorAttributes } from '../../anchor';
 	import Popover from './Popover.svelte';
+	import { browser } from '../../env';
 	import { type ThemeDef, theme } from '../../stores/theme.svelte';
 	import { AUTO_THEME } from '../../theme-mode';
 
@@ -63,7 +66,9 @@
 	);
 	const named = (id: string) => theme.all.find((t) => t.id === id)?.label ?? id;
 	const autoCaption = $derived(`${autoLabel} · ${named(theme.pref.light)} / ${named(theme.pref.dark)}`);
-	const title = $derived(isAuto ? `${autoLabel} · ${theme.label}` : `Theme: ${theme.label}`);
+	const title = $derived(
+		!browser ? 'Theme' : isAuto ? `${autoLabel} · ${theme.label}` : `Theme: ${theme.label}`
+	);
 	const caption = $derived(
 		hoveredAuto || (isAuto && !hovered)
 			? autoCaption
@@ -71,7 +76,7 @@
 	);
 </script>
 
-{#snippet swatch(id: string)}
+{#snippet swatch(id: string | undefined)}
 	<span class="swatch" data-theme={id} aria-hidden="true">
 		<i class="q bg"></i><i class="q surface"></i><i class="q text"></i><i class="q accent"></i>
 	</span>
@@ -94,7 +99,7 @@
 	triggerClass={klass}
 	style={styleProp}
 >
-	{#snippet trigger()}<span class="trigger" data-tsu="ThemePicker" {title}>{@render swatch(theme.current)}{#if isAuto}<span class="auto-dot" aria-hidden="true">◐</span>{/if}</span>{/snippet}
+	{#snippet trigger()}<span class="trigger" data-tsu="ThemePicker" {title}>{@render swatch(browser ? theme.current : undefined)}{#if isAuto}<span class="auto-dot" aria-hidden="true">◐</span>{/if}</span>{/snippet}
 	<div class="panel">
 		{#each groups as g (g.mode)}
 			<div class="group-label">{g.label}</div>

package/dist/looks/tactile.css

@@ -316,12 +316,12 @@
   transition-duration: var(--dur-press);
   transition-timing-function: var(--ease-out);
 }
-:root[data-look="tactile"] .row {
+:root[data-look="tactile"] [data-tsu="RadioGroup"] .row {
   border-color: transparent;
   border-radius: var(--r-lg);
   background: var(--bg-elevated-2);
 }
-:root[data-look="tactile"] .row.selected {
+:root[data-look="tactile"] [data-tsu="RadioGroup"] .row.selected {
   border-color: transparent;
   background: color-mix(in oklab, var(--accent) 12%, var(--bg-elevated));
 }

package/dist/markdown.js

@@ -89,7 +89,9 @@ function inline(s, autolink) {
 function splitRow(row) {
     const cells = [];
     let cur = '';
-    const t = row.trim().replace(/^\|/, '').replace(/\|$/, '');
+    let t = row.trim();
+    if (t.startsWith('|'))
+        t = t.slice(1);
     for (let i = 0; i < t.length; i++) {
         if (t[i] === '\\' && t[i + 1] === '|') {
             cur += '|';
@@ -102,32 +104,57 @@ function splitRow(row) {
         else
             cur += t[i];
     }
-    cells.push(cur);
+    if (cur.trim() || !cells.length)
+        cells.push(cur);
     return cells;
 }
-const TABLE_RE = /(?:^|\n)([ \t]*\|.+\|[ \t]*)\n([ \t]*\|(?:[ \t]*:?-+:?[ \t]*\|)+[ \t]*)\n((?:[ \t]*\|.*\|[ \t]*(?:\n|$))+)/g;
+const hasPipe = (line) => /(?:^|[^\\])\|/.test(line);
+const DELIM_CELL = /^\s*:?-+:?\s*$/;
+const TABLE_BREAK = new RegExp(`^\\s*(?:$|#{1,6}(?:\\s|$)|&gt;|(?:[-*+]|\\d{1,9}[.)])\\s|(?:-{3,}|\\*{3,}|_{3,})\\s*$|${BLOCK_L}\\d+${BLOCK_R}\\s*$)`);
 function table(header, delim, body, autolink) {
-    const aligns = splitRow(delim).map((c) => {
+    const aligns = delim.map((c) => {
         const l = c.trim().startsWith(':');
         const r = c.trim().endsWith(':');
         return r && l ? 'center' : r ? 'right' : l ? 'left' : '';
     });
-    const cell = (txt, i, tag) => {
-        const a = aligns[i] ? ` style="text-align:${aligns[i]}"` : '';
-        return `<${tag}${a}>${inline(txt.trim(), autolink)}</${tag}>`;
+    const row = (line, tag) => {
+        const cells = splitRow(line);
+        const html = aligns.map((a, i) => {
+            const style = a ? ` style="text-align:${a}"` : '';
+            return `<${tag}${style}>${inline((cells[i] ?? '').trim(), autolink)}</${tag}>`;
+        });
+        return `<tr>${html.join('')}</tr>`;
     };
-    const head = `<tr>${splitRow(header)
-        .map((c, i) => cell(c, i, 'th'))
-        .join('')}</tr>`;
-    const rows = body
-        .split('\n')
-        .filter((r) => r.trim())
-        .map((r) => `<tr>${splitRow(r)
-        .map((c, i) => cell(c, i, 'td'))
-        .join('')}</tr>`)
-        .join('');
+    const head = row(header, 'th');
+    const rows = body.map((r) => row(r, 'td')).join('');
     return `<table><thead>${head}</thead><tbody>${rows}</tbody></table>`;
 }
+// GFM pipe tables on escaped text: a header row, a delimiter row with the
+// same cell count, then rows up to a blank line or the start of another block.
+function tables(s, saved, autolink) {
+    const lines = s.split('\n');
+    const out = [];
+    for (let i = 0; i < lines.length; i++) {
+        const head = lines[i];
+        const next = lines[i + 1];
+        if (next === undefined || !hasPipe(head) || !hasPipe(next) || TABLE_BREAK.test(head)) {
+            out.push(head);
+            continue;
+        }
+        const delim = splitRow(next);
+        const cols = splitRow(head);
+        if (!delim.every((c) => DELIM_CELL.test(c)) || cols.length !== delim.length) {
+            out.push(head);
+            continue;
+        }
+        let j = i + 2;
+        while (j < lines.length && !TABLE_BREAK.test(lines[j]))
+            j++;
+        out.push('', stash(saved, table(head, delim, lines.slice(i + 2, j), autolink)), '');
+        i = j - 1;
+    }
+    return out.join('\n');
+}
 // Block pass over the escaped, inline-rendered lines. Produces paragraphs,
 // headings, lists, blockquotes and rules; stashed blocks stay opaque.
 function blocks(lines) {
@@ -209,7 +236,7 @@ function blocks(lines) {
     return out.join('');
 }
 export function renderMarkdown(src, opts = {}) {
-    const tables = opts.tables !== false;
+    const withTables = opts.tables !== false;
     const autolink = opts.autolink !== false;
     const saved = [];
     let s = stripAnsi(src.replace(/\r\n?/g, '\n'));
@@ -221,9 +248,8 @@ export function renderMarkdown(src, opts = {}) {
         return stash(saved, `<pre${attr}><code>${body}</code></pre>`);
     });
     s = escapeHtml(s);
-    if (tables) {
-        s = s.replace(TABLE_RE, (_m, header, delim, body) => `\n${stash(saved, table(header, delim, body, autolink))}\n`);
-    }
+    if (withTables)
+        s = tables(s, saved, autolink);
     s = inline(s, autolink);
     s = blocks(s.split('\n'));
     return restore(s, saved);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.80.0",
+  "version": "0.80.2",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",