@dorsk/tsumikit 0.2.10 → 0.2.12

package/dist/components/atoms/Textarea.svelte

@@ -5,6 +5,11 @@
 	// switches to the monospace family. `autoresize` opts into the grow-with-
 	// content action without the call-site wiring `use:` itself. `bind:el`
 	// exposes the underlying element for focus/measure.
+	//
+	// `resize` replaces the native (un-themeable) resize grip with our own drag
+	// handle on the top or bottom edge, styled like the Modal/AppShell grips: a
+	// centered pill that's a thicker portion of the border. `autoresize` wins —
+	// content-driven sizing leaves no manual handle.
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { autoresize as autoresizeAction } from '../../autoresize';
 
@@ -12,6 +17,9 @@
 		mono?: boolean;
 		autoresize?: boolean;
 		size?: 'sm' | 'md';
+		/** Manual resize handle edge, or 'none' to disable. Ignored when
+		 *  `autoresize` is set. Defaults to a bottom handle. */
+		resize?: 'none' | 'top' | 'bottom';
 		/** Error state: danger border + aria-invalid (also styles if a consumer
 		 *  sets aria-invalid directly). */
 		invalid?: boolean;
@@ -24,38 +32,100 @@
 		mono = false,
 		autoresize = false,
 		size = 'md',
+		resize = 'bottom',
 		invalid = false,
 		class: klass = '',
 		value = $bindable(),
 		el = $bindable(null),
 		...rest
 	}: Props = $props();
+
+	const showHandle = $derived(!autoresize && resize !== 'none');
+
+	// --- manual resize drag (mirrors AppShell/Modal: rAF-throttled pointer drag) ---
+	let dragging = $state(false);
+	let rafId = 0;
+	let startY = 0;
+	let startH = 0;
+	let lastY = 0;
+
+	function startDrag(e: PointerEvent) {
+		if (!el) return;
+		dragging = true;
+		startY = lastY = e.clientY;
+		startH = el.offsetHeight;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		e.preventDefault();
+	}
+	function onDrag(e: PointerEvent) {
+		if (!dragging || !el) return;
+		lastY = e.clientY;
+		if (rafId) return;
+		rafId = requestAnimationFrame(() => {
+			rafId = 0;
+			if (!el) return;
+			// Top handle grows upward (drag up = taller), bottom grows downward.
+			const delta = resize === 'top' ? startY - lastY : lastY - startY;
+			el.style.height = `${Math.max(0, startH + delta)}px`;
+		});
+	}
+	function endDrag(e: PointerEvent) {
+		if (!dragging) return;
+		dragging = false;
+		if (rafId) {
+			cancelAnimationFrame(rafId);
+			rafId = 0;
+		}
+		try {
+			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		} catch {
+			/* already released */
+		}
+	}
 </script>
 
-{#if autoresize}
-	<textarea
-		bind:this={el}
-		class="textarea {klass}"
-		class:mono
-		class:textarea-sm={size === 'sm'}
-		bind:value
-		use:autoresizeAction={typeof value === 'string' ? value : ''}
-		{...rest}
-		aria-invalid={invalid || undefined}
-	></textarea>
-{:else}
-	<textarea
-		bind:this={el}
-		class="textarea {klass}"
-		class:mono
-		class:textarea-sm={size === 'sm'}
-		bind:value
-		{...rest}
-		aria-invalid={invalid || undefined}
-	></textarea>
-{/if}
+<div class="textarea-wrap" class:dragging>
+	{#if autoresize}
+		<textarea
+			bind:this={el}
+			class="textarea {klass}"
+			class:mono
+			class:textarea-sm={size === 'sm'}
+			bind:value
+			use:autoresizeAction={typeof value === 'string' ? value : ''}
+			{...rest}
+			aria-invalid={invalid || undefined}
+		></textarea>
+	{:else}
+		<textarea
+			bind:this={el}
+			class="textarea {klass}"
+			class:mono
+			class:textarea-sm={size === 'sm'}
+			bind:value
+			{...rest}
+			aria-invalid={invalid || undefined}
+		></textarea>
+	{/if}
+	{#if showHandle}
+		<div
+			class="resize-handle resize-{resize}"
+			onpointerdown={startDrag}
+			onpointermove={onDrag}
+			onpointerup={endDrag}
+			onpointercancel={endDrag}
+			role="separator"
+			aria-orientation="horizontal"
+			aria-label="Resize"
+		></div>
+	{/if}
+</div>
 
 <style>
+	.textarea-wrap {
+		position: relative;
+		display: flex;
+	}
 	.textarea {
 		width: 100%;
 		padding: var(--sp-3);
@@ -64,8 +134,11 @@
 		border-radius: var(--r-md);
 		color: var(--text);
 		transition: border-color 0.12s var(--ease);
-		resize: vertical;
-		min-height: 5rem;
+		/* Custom handle replaces the native grip; never show the native one. */
+		resize: none;
+		/* Match the single-row height of Button/Input so a `rows={1}` textarea
+		   lines up with them; the native `rows` attribute grows it from here. */
+		min-height: 2.5rem;
 		font-family: inherit;
 	}
 	.textarea:focus {
@@ -75,7 +148,7 @@
 	.textarea-sm {
 		padding: var(--sp-2);
 		font-size: var(--fs-sm);
-		min-height: 4rem;
+		min-height: 2rem;
 	}
 	.textarea[aria-invalid='true'],
 	.textarea[aria-invalid='true']:focus {
@@ -84,4 +157,43 @@
 	.mono {
 		font-family: var(--font-mono);
 	}
+
+	/* Drag handle: a thin full-width strip on an edge, with a centered pill grip
+	   (a thicker portion of the border) that brightens to the accent on hover /
+	   while dragging — mirroring the Modal and AppShell resize grips. */
+	.resize-handle {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 12px;
+		cursor: ns-resize;
+		touch-action: none;
+	}
+	.resize-bottom {
+		bottom: 0;
+	}
+	.resize-top {
+		top: 0;
+	}
+	.resize-handle::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 28px;
+		height: 3px;
+		border-radius: 999px;
+		background: var(--border-strong);
+		transition: background 0.12s var(--ease);
+	}
+	.resize-bottom::after {
+		bottom: 3px;
+	}
+	.resize-top::after {
+		top: 3px;
+	}
+	.resize-handle:hover::after,
+	.dragging .resize-handle::after {
+		background: var(--accent);
+	}
 </style>

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

@@ -3,6 +3,9 @@ type Props = HTMLTextareaAttributes & {
     mono?: boolean;
     autoresize?: boolean;
     size?: 'sm' | 'md';
+    /** Manual resize handle edge, or 'none' to disable. Ignored when
+     *  `autoresize` is set. Defaults to a bottom handle. */
+    resize?: 'none' | 'top' | 'bottom';
     /** Error state: danger border + aria-invalid (also styles if a consumer
      *  sets aria-invalid directly). */
     invalid?: boolean;

package/dist/components/molecules/Dropzone.svelte

@@ -1,24 +1,40 @@
 <script lang="ts">
 	// Drag-and-drop file area with a click/keyboard fallback to the file dialog.
 	// Emits chosen/dropped files via `onfiles`. Filters by `accept` (extensions
-	// or mime patterns). Dependency-free; the whole zone is a labelled button so
-	// it's keyboard-operable, and a visually-hidden <input type=file> backs it.
+	// or mime patterns). Dependency-free.
+	//
+	// Two modes:
+	//  - Default (box): the whole zone is a labelled button so it's
+	//    keyboard-operable, backed by a visually-hidden <input type=file>.
+	//    Children, if passed, render inside the dashed box.
+	//  - Overlay (`overlay`): wraps interactive content. Children render in
+	//    normal flow (no box model, no click hijack); the dashed border + label
+	//    paint as an absolutely-positioned layer only while a file is dragged
+	//    over. Drop-only — the browse affordance stays on the host (e.g. a
+	//    FileButton). Use this to make a whole surface/drawer/window a drop
+	//    target.
 	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
 
 	let {
 		onfiles,
+		onactive,
 		accept,
 		multiple = true,
 		disabled = false,
+		overlay = false,
 		label = 'Drop files here',
 		hint = 'or click to browse',
 		children
 	}: {
 		onfiles: (files: File[]) => void;
+		/** Fired when the drag-over (active) state changes — host can dim/highlight. */
+		onactive?: (active: boolean) => void;
 		accept?: string;
 		multiple?: boolean;
 		disabled?: boolean;
+		/** Wrap interactive content; show the drop UI as an overlay only while dragging. */
+		overlay?: boolean;
 		label?: string;
 		hint?: string;
 		children?: Snippet;
@@ -27,6 +43,19 @@
 	let over = $state(false);
 	let input = $state<HTMLInputElement | null>(null);
 
+	// Depth counter for robust enter/leave detection — dragenter/dragleave fire
+	// for every child element the cursor crosses, so a naive boolean flickers.
+	let depth = 0;
+
+	function setOver(next: boolean) {
+		if (over === next) return;
+		over = next;
+		onactive?.(next);
+	}
+	function hasFiles(e: DragEvent): boolean {
+		return Array.from(e.dataTransfer?.types ?? []).includes('Files');
+	}
+
 	function accepted(files: File[]): File[] {
 		if (!accept) return files;
 		const pats = accept.split(',').map((s) => s.trim().toLowerCase());
@@ -46,54 +75,91 @@
 		if (!multiple) files = files.slice(0, 1);
 		if (files.length) onfiles(files);
 	}
+
+	function onDragEnter(e: DragEvent) {
+		if (disabled || !hasFiles(e)) return;
+		depth++;
+		if (depth === 1) setOver(true);
+	}
+	function onDragLeave(e: DragEvent) {
+		if (disabled || !hasFiles(e)) return;
+		depth = Math.max(0, depth - 1);
+		if (depth === 0) setOver(false);
+	}
+	function onDragOver(e: DragEvent) {
+		if (disabled) return;
+		// preventDefault is required or `drop` never fires.
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+	}
 	function onDrop(e: DragEvent) {
 		e.preventDefault();
-		over = false;
+		depth = 0;
+		setOver(false);
 		if (disabled) return;
 		emit(e.dataTransfer?.files);
 	}
 </script>
 
-<div
-	class="dz"
-	class:over
-	class:disabled
-	role="button"
-	tabindex={disabled ? -1 : 0}
-	aria-label="{label}. {hint}"
-	aria-disabled={disabled || undefined}
-	ondragover={(e) => {
-		e.preventDefault();
-		if (!disabled) over = true;
-	}}
-	ondragleave={() => (over = false)}
-	ondrop={onDrop}
-	onclick={() => !disabled && input?.click()}
-	onkeydown={(e) => {
-		if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
-			e.preventDefault();
-			input?.click();
-		}
-	}}
->
-	<input
-		bind:this={input}
-		class="sr-only"
-		type="file"
-		{accept}
-		{multiple}
-		{disabled}
-		tabindex="-1"
-		onchange={(e) => emit((e.currentTarget as HTMLInputElement).files)}
-	/>
-	{#if children}
-		{@render children()}
-	{:else}
-		<Icon name="upload" size={28} />
-		<span class="dz-label">{label}</span>
-		<span class="dz-hint">{hint}</span>
-	{/if}
-</div>
+{#if overlay}
+	<div
+		class="dz-host"
+		class:over
+		class:disabled
+		role="presentation"
+		ondragenter={onDragEnter}
+		ondragleave={onDragLeave}
+		ondragover={onDragOver}
+		ondrop={onDrop}
+	>
+		{@render children?.()}
+		{#if over}
+			<div class="dz-overlay" aria-hidden="true">
+				<Icon name="upload" size={28} />
+				<span class="dz-label">{label}</span>
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div
+		class="dz"
+		class:over
+		class:disabled
+		role="button"
+		tabindex={disabled ? -1 : 0}
+		aria-label="{label}. {hint}"
+		aria-disabled={disabled || undefined}
+		ondragenter={onDragEnter}
+		ondragleave={onDragLeave}
+		ondragover={onDragOver}
+		ondrop={onDrop}
+		onclick={() => !disabled && input?.click()}
+		onkeydown={(e) => {
+			if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+				e.preventDefault();
+				input?.click();
+			}
+		}}
+	>
+		<input
+			bind:this={input}
+			class="sr-only"
+			type="file"
+			{accept}
+			{multiple}
+			{disabled}
+			tabindex="-1"
+			onchange={(e) => emit((e.currentTarget as HTMLInputElement).files)}
+		/>
+		{#if children}
+			{@render children()}
+		{:else}
+			<Icon name="upload" size={28} />
+			<span class="dz-label">{label}</span>
+			<span class="dz-hint">{hint}</span>
+		{/if}
+	</div>
+{/if}
 
 <style>
 	.dz {
@@ -129,6 +195,37 @@
 		opacity: 0.45;
 		cursor: not-allowed;
 	}
+
+	/* Overlay mode: don't impose a box model on the host layout. The wrapper is
+	   a positioning context for the absolute overlay; otherwise it passes
+	   through (full size, transparent). */
+	.dz-host {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		min-width: 0;
+		width: 100%;
+		height: 100%;
+	}
+	.dz-overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 10;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		text-align: center;
+		color: var(--text);
+		background: color-mix(in srgb, var(--accent) 12%, transparent);
+		border: 2px dashed var(--accent);
+		border-radius: var(--r-lg);
+		pointer-events: none;
+		backdrop-filter: blur(1px);
+	}
+
 	.dz-label {
 		font-weight: var(--fw-medium);
 		font-size: var(--fs-sm);

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

@@ -1,9 +1,13 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     onfiles: (files: File[]) => void;
+    /** Fired when the drag-over (active) state changes — host can dim/highlight. */
+    onactive?: (active: boolean) => void;
     accept?: string;
     multiple?: boolean;
     disabled?: boolean;
+    /** Wrap interactive content; show the drop UI as an overlay only while dragging. */
+    overlay?: boolean;
     label?: string;
     hint?: string;
     children?: Snippet;

package/dist/components/molecules/FileButton.svelte

@@ -98,10 +98,11 @@
 		padding: var(--sp-2);
 		aspect-ratio: 1;
 	}
-	/* Emoji glyph tracks the text size like the SVG Icon does (1em). */
+	/* Emoji glyph is bumped above the text size — at 1em a paperclip is hard to
+	   read, so render it a touch larger for legibility. */
 	.emoji {
 		display: inline-flex;
-		font-size: 1em;
+		font-size: 1.35em;
 		line-height: 1;
 	}
 	.file-btn.primary {

package/package.json

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