@dorsk/tsumikit 0.82.1 → 0.82.3

package/dist/components/atoms/Textarea.svelte

@@ -18,11 +18,20 @@
 	// `onsubmit` fires with the value on Enter (`submitOn="enter"`, Shift+Enter
 	// still inserts a newline) or Ctrl/Meta+Enter (`submitOn="mod-enter"`, the
 	// default whenever `onsubmit` is given).
+	//
+	// `segments` opts into a mirror overlay: a layer behind the (text-transparent)
+	// textarea that renders the value split into spans, so tagged spans can show
+	// masked while the user types. The native control keeps caret, selection, IME,
+	// undo, autoresize and scrolling; the overlay shares its box, font and
+	// wrapping rules and follows its scroll offset. The raw value stays what
+	// assistive tech reads and what the form submits.
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { autoresize as autoresizeAction, rowsFloor, rowsHeight } from '../../autoresize';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
 	import { getInputGroupContext } from '../../input-group-context';
 
+	export type TextareaSegment = { text: string; mask?: boolean; class?: string };
+
 	type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
 		mono?: boolean;
 		autoresize?: boolean;
@@ -45,6 +54,11 @@
 		/** Fires with the current value on the `submitOn` key combo. */
 		onsubmit?: (value: string) => void;
 		submitOn?: 'enter' | 'mod-enter' | 'none';
+		/** Split the value into spans for the mirror overlay; the texts must
+		 *  concatenate back to the value so glyphs line up 1:1. `mask` keeps a
+		 *  span's layout but hides its glyphs under a fill; `class` is added to
+		 *  the span. Unset: no overlay, no extra DOM. */
+		segments?: (value: string) => TextareaSegment[];
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];
@@ -66,7 +80,10 @@
 		maxHeight,
 		onsubmit,
 		submitOn = 'none',
+		segments,
 		onkeydown,
+		oninput,
+		onscroll,
 		id,
 		'aria-describedby': ariaDescribedby,
 		'aria-invalid': ariaInvalid,
@@ -136,6 +153,27 @@
 		onsubmit(String(value ?? ''));
 	}
 
+	let mirror = $state<HTMLDivElement | null>(null);
+	const segs = $derived(segments ? segments(String(value ?? '')) : null);
+
+	function syncScroll() {
+		if (!el || !mirror) return;
+		mirror.scrollTop = el.scrollTop;
+		mirror.scrollLeft = el.scrollLeft;
+	}
+	function handleInput(e: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) {
+		oninput?.(e);
+		if (segs) syncScroll();
+	}
+	function handleScroll(e: UIEvent & { currentTarget: EventTarget & HTMLTextAreaElement }) {
+		onscroll?.(e);
+		if (segs) syncScroll();
+	}
+	$effect(() => {
+		void segs;
+		syncScroll();
+	});
+
 	// --- manual resize drag (mirrors AppShell/Modal: rAF-throttled pointer drag) ---
 	let dragging = $state(false);
 	let rafId = 0;
@@ -195,7 +233,23 @@
 	class:grouped={!!group}
 	class:bar={!!group?.bar}
 	data-tsu="Textarea"
+	class:mirrored={!!segs}
 >
+	{#if segs}
+		<div
+			bind:this={mirror}
+			class="mirror textarea"
+			class:mono
+			class:textarea-sm={sizeEff === 'sm'}
+			class:textarea-lg={sizeEff === 'lg'}
+			class:grouped={!!group}
+			class:bar={!!group?.bar}
+			class:capped={!!maxHeight}
+			style:max-height={maxHeight}
+			aria-hidden="true"
+			data-tsu="TextareaMirror"
+		>{#each segs as seg}<span class={seg.class} class:masked={!!seg.mask}>{seg.text}</span>{/each}<span class="tail">{'\u200b'}</span></div>
+	{/if}
 	{#if autoresize}
 		<textarea
 			bind:this={el}
@@ -206,6 +260,7 @@
 			class:grouped={!!group}
 			class:bar={!!group?.bar}
 			class:capped={!!maxHeight}
+			class:mirrored={!!segs}
 			disabled={isDisabled}
 			style:max-height={maxHeight}
 			bind:value
@@ -213,6 +268,8 @@
 			{...rest}
 			placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
+			oninput={segs || oninput ? handleInput : undefined}
+			onscroll={segs || onscroll ? handleScroll : undefined}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
 			aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
@@ -227,12 +284,15 @@
 			class:grouped={!!group}
 			class:bar={!!group?.bar}
 			class:capped={!!maxHeight}
+			class:mirrored={!!segs}
 			disabled={isDisabled}
 			style:max-height={maxHeight}
 			bind:value
 			{...rest}
 			placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
+			oninput={segs || oninput ? handleInput : undefined}
+			onscroll={segs || onscroll ? handleScroll : undefined}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
 			aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
@@ -294,6 +354,47 @@
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
 		font-family: inherit;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+		word-break: normal;
+		tab-size: 4;
+	}
+	/* Mirror overlay: same box, font and wrapping as the textarea; the textarea
+	   above it keeps its border, caret and selection but shows no glyphs. */
+	.textarea-wrap.mirrored {
+		isolation: isolate;
+	}
+	.mirror {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		box-sizing: border-box;
+		min-height: 0;
+		overflow: auto;
+		border-color: transparent;
+		box-shadow: none;
+		pointer-events: none;
+		transition: none;
+	}
+	.textarea.mirrored {
+		position: relative;
+		z-index: 1;
+		color: transparent;
+		caret-color: var(--textarea-fg, var(--text));
+		background: transparent;
+	}
+	.textarea.mirrored::selection {
+		color: transparent;
+		background: color-mix(in srgb, var(--accent) 30%, transparent);
+	}
+	.mirrored .resize-handle {
+		z-index: 2;
+	}
+	.mirror .masked {
+		color: transparent;
+		background: var(--textarea-mask, color-mix(in srgb, var(--text) 18%, transparent));
+		border-radius: var(--r-sm);
+		box-decoration-break: clone;
 	}
 	.textarea:focus {
 		outline: none;

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

@@ -1,5 +1,10 @@
 import type { ControlSize } from '../../size';
 import type { HTMLTextareaAttributes } from 'svelte/elements';
+export type TextareaSegment = {
+    text: string;
+    mask?: boolean;
+    class?: string;
+};
 type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
     mono?: boolean;
     autoresize?: boolean;
@@ -22,6 +27,11 @@ type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
     /** Fires with the current value on the `submitOn` key combo. */
     onsubmit?: (value: string) => void;
     submitOn?: 'enter' | 'mod-enter' | 'none';
+    /** Split the value into spans for the mirror overlay; the texts must
+     *  concatenate back to the value so glyphs line up 1:1. `mask` keeps a
+     *  span's layout but hides its glyphs under a fill; `class` is added to
+     *  the span. Unset: no overlay, no extra DOM. */
+    segments?: (value: string) => TextareaSegment[];
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];

package/dist/components/layouts/ResizablePanel.svelte

@@ -514,7 +514,7 @@
 		height: var(--sp-8);
 		border-radius: var(--r-pill);
 		background: var(--border-strong);
-		transform: translate(-50%, -50%);
+		translate: -50% -50%;
 		transition:
 			background var(--dur-fast) var(--ease),
 			scale var(--dur-fast) var(--ease);

package/dist/components/molecules/Composer.svelte

@@ -6,7 +6,7 @@
 	// `toolbarEnd` move attach + send into a row under the field.
 	import type { Snippet } from 'svelte';
 	import Button from '../atoms/Button.svelte';
-	import Textarea from '../atoms/Textarea.svelte';
+	import Textarea, { type TextareaSegment } from '../atoms/Textarea.svelte';
 	import AttachmentList from './AttachmentList.svelte';
 	import FileButton from './FileButton.svelte';
 	import InputGroup from './InputGroup.svelte';
@@ -26,6 +26,7 @@
 		maxHeight = '40vh',
 		rows = 1,
 		resize = 'none',
+		segments,
 		sendLabel = 'Send',
 		attachLabel = 'Attach',
 		leading,
@@ -52,6 +53,8 @@
 		rows?: number;
 		/** Manual drag handle on the top edge; `none` hides it. */
 		resize?: 'none' | 'top';
+		/** Mirror overlay segments, forwarded to the Textarea. */
+		segments?: (value: string) => TextareaSegment[];
 		sendLabel?: string;
 		attachLabel?: string;
 		leading?: Snippet;
@@ -200,6 +203,7 @@
 			{maxHeight}
 			{placeholder}
 			{resize}
+			{segments}
 			aria-label={placeholder}
 			disabled={disabled || busy}
 			{onkeydown}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type TextareaSegment } from '../atoms/Textarea.svelte';
 type $$ComponentProps = {
     value?: string;
     onsubmit: (value: string, files: File[]) => void;
@@ -17,6 +18,8 @@ type $$ComponentProps = {
     rows?: number;
     /** Manual drag handle on the top edge; `none` hides it. */
     resize?: 'none' | 'top';
+    /** Mirror overlay segments, forwarded to the Textarea. */
+    segments?: (value: string) => TextareaSegment[];
     sendLabel?: string;
     attachLabel?: string;
     leading?: Snippet;

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Swatch } from './components/atoms/Swatch.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
 export { default as Text } from './components/atoms/Text.svelte';
+export type { TextareaSegment } from './components/atoms/Textarea.svelte';
 export { default as Textarea } from './components/atoms/Textarea.svelte';
 export { default as Thinking } from './components/atoms/Thinking.svelte';
 export { default as TimeDisplay } from './components/atoms/TimeDisplay.svelte';

package/dist/styles/app.css

@@ -2,7 +2,7 @@
  * All-in-one stylesheet: Inter @font-face, tokens + built-in themes, reset + element defaults,
  * generic utilities and the syntax-highlight token mapping (global so it
  * reaches {@html} output). Import the parts individually to compose your own
- * stack — see README "Theming".
+ * stack: see docs/theming.md.
  */
 @import './font.css';
 @import './variables.css';

package/dist/styles/syntax.css

@@ -3,7 +3,7 @@
  * Class-based highlighters (highlight.js `hljs-*`, Prism `token.*`) are themed
  * here by mapping their token classes onto the --syn-* theme tokens, so colors
  * track every theme. This must be GLOBAL: Svelte scoped styles don't reach
- * {@html} content. (Shiki emits inline colors instead — see the README for how
+ * {@html} content. (Shiki emits inline colors instead; docs/components.md explains how
  * to theme it via its css-variables theme.) */
 .hljs-keyword,
 .hljs-built_in,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.82.1",
-  "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
+  "version": "0.82.3",
+  "description": "Svelte 5 UI components styled with plain CSS variables: 31 themes, WCAG AA contrast, no runtime dependencies.",
   "type": "module",
   "license": "MIT",
   "author": "Dorsk <dorsk.dev@gmail.com>",
@@ -73,7 +73,8 @@
     "design:bundle": "node .design-sync/build-bundle.mjs",
     "design:verify": "node .design-sync/verify-bundle.mjs",
     "design:clean": "rm -rf ds-bundle .ds-proto",
-    "demo:props": "node scripts/gen-demo-props.mjs"
+    "demo:props": "node scripts/gen-demo-props.mjs",
+    "readme:shots": "node scripts/readme-screenshots.mjs"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -91,6 +92,7 @@
     "esbuild-svelte": "^0.9.5",
     "jsdom": "^30.0.1",
     "lefthook": "^1.7.0",
+    "playwright": "~1.63.0",
     "publint": "^0.2.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",