@dorsk/tsumikit 0.82.1 → 0.82.2

package/README.md

@@ -944,6 +944,36 @@ opaque and the blur is dropped; `prefers-contrast: more` also uses the opaque sc
 </Backdrop>
 ```
 
+### Masked spans while typing (Textarea `segments`)
+
+`Textarea` (and `Composer`, which forwards it) accepts `segments`, a function that splits the
+current value into spans for a mirror overlay rendered behind a text-transparent native textarea.
+Each segment's `text` is rendered verbatim so glyph widths match 1:1; `mask: true` keeps the span's
+layout but hides its glyphs under a token fill (`--textarea-mask` overrides it); `class` is added
+to the span. The texts must concatenate back to the value. Caret, selection, IME composition, undo,
+autoresize and scrolling stay native. The overlay is `aria-hidden`: assistive tech and the form
+still get the raw value. Without `segments` the Textarea renders exactly as before.
+
+```svelte
+<script lang="ts">
+	import { Textarea } from '@dorsk/tsumikit';
+	const TAG = /(<redacted>)([\s\S]*?)(<\/redacted>)/g;
+	function segments(text: string) {
+		const out = [];
+		let last = 0;
+		for (const m of text.matchAll(TAG)) {
+			if (m.index > last) out.push({ text: text.slice(last, m.index) });
+			out.push({ text: m[1], class: 'tag' }, { text: m[2], mask: true }, { text: m[3], class: 'tag' });
+			last = m.index + m[0].length;
+		}
+		if (last < text.length) out.push({ text: text.slice(last) });
+		return out;
+	}
+</script>
+
+<Textarea bind:value autoresize {segments} aria-label="Message" />
+```
+
 ### Breakpoints
 
 One list for every media query: `sm` 40rem (640px), `md` 48rem (768px), `lg`

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.82.1",
+  "version": "0.82.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",