@dorsk/tsumikit 0.80.0 → 0.80.1

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/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.1",
   "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",