@marianmeres/stuic 3.134.0 → 3.136.0

package/dist/components/CommentInput/index.css

@@ -1,36 +1,23 @@
 /******************************************************************************
   CommentInput
 
-  A GitHub-style comment box: a raw-markdown textarea with Write/Preview tabs and
-  a submit footer. Field chrome (label/description/validation/sizing) comes from
-  the shared InputWrap, so it matches the `Field*` family; everything specific to
-  the box lives here.
-
-  Tokens follow the library convention: a component token that falls back to the
-  shared `--stuic-input-*` token, then to a global default — so the box inherits
-  input theming for free but can be retargeted on its own.
+  A GitHub-style comment composer built on top of `MarkdownEditor` (a rich
+  WYSIWYG / source surface) with an avatar gutter and a submit/cancel footer.
+
+  The editor card, formatting toolbar, mode toggle and field chrome
+  (label / description / validation / sizing / theming) all come from
+  `MarkdownEditor` and its shared `InputWrap` — so the box inherits the
+  `--stuic-markdown-editor-*` / `--stuic-input-*` theming for free. This
+  stylesheet only lays out the gutter + footer and tightens the spacing so the
+  editor and its buttons read as a single composer unit.
 ******************************************************************************/
 
 .stuic-comment-input {
-	--_radius: var(
-		--stuic-comment-input-radius,
-		var(--stuic-input-radius, var(--stuic-radius))
-	);
-	--_border-color: var(
-		--stuic-comment-input-border,
-		var(--stuic-input-border, currentColor)
-	);
-	--_bg: var(--stuic-comment-input-bg, var(--stuic-input-bg, transparent));
-	--_pad-x: var(
-		--stuic-comment-input-padding-x,
-		var(--stuic-input-padding-x-md, 0.75rem)
-	);
-	--_pad-y: var(--stuic-comment-input-padding-y, var(--stuic-input-padding-y-md, 0.5rem));
-	--_min-height: var(--stuic-comment-input-min-height, 5rem);
-	--_font-size: var(
-		--stuic-comment-input-font-size,
-		var(--stuic-input-font-size-md, 0.9375rem)
-	);
+	/* The embedded MarkdownEditor defaults to a tall editing surface (12rem md);
+	   for a comment composer we want the lighter, GitHub-like proportions of the
+	   original box. Funnel a comment-scoped token into the editor's min-height var
+	   so it stays themeable (and still overridable via the editor token directly). */
+	--stuic-markdown-editor-min-height: var(--stuic-comment-input-min-height, 5rem);
 
 	display: flex;
 	align-items: flex-start;
@@ -39,31 +26,24 @@
 	min-width: 0;
 }
 
+.stuic-comment-input[data-size="sm"] {
+	--stuic-comment-input-min-height: 4rem;
+}
+.stuic-comment-input[data-size="lg"] {
+	--stuic-comment-input-min-height: 7rem;
+}
+
 .stuic-comment-input-avatar {
 	flex: 0 0 auto;
 	padding-top: 0.125rem;
 }
 
-/* The bordered card — focus ring lives here, not on the avatar row. */
-.stuic-comment-input-editor {
+.stuic-comment-input-main {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
 	min-width: 0;
 	max-width: 100%;
-	background: var(--_bg);
-	border: var(--stuic-border-width, 1px) solid var(--_border-color);
-	border-radius: var(--_radius);
-	color: var(--stuic-input-text, inherit);
-	overflow: hidden;
-	transition: border-color var(--stuic-transition, 150ms);
-}
-
-.stuic-comment-input-editor:focus-within {
-	border-color: var(
-		--stuic-comment-input-border-focus,
-		var(--stuic-input-border-focus, currentColor)
-	);
 }
 
 .stuic-comment-input.disabled {
@@ -71,196 +51,12 @@
 	pointer-events: none;
 }
 
-/* --- Tab bar -------------------------------------------------------------- */
-.stuic-comment-input-bar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 0.5rem;
-	padding: 0.25rem 0.375rem;
-	background: var(--stuic-comment-input-bar-bg, transparent);
-}
-
-.stuic-comment-input-tabs {
-	display: flex;
-	align-items: center;
-	gap: 0.125rem;
-}
-
-.stuic-comment-input-tabs button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	height: 2rem;
-	padding: 0 0.625rem;
-	font-size: 0.8125rem;
-	line-height: 1;
-	color: inherit;
-	opacity: 0.7;
-	background: transparent;
-	border: none;
-	border-radius: var(--stuic-radius, 0.375rem);
-	transition:
-		background-color var(--stuic-transition, 150ms),
-		opacity var(--stuic-transition, 150ms);
-}
-
-.stuic-comment-input-tabs button:hover:not(:disabled) {
-	background: var(--stuic-comment-input-tab-hover-bg, rgb(0 0 0 / 0.06));
-}
-
-.stuic-comment-input-tabs button[data-active="true"] {
-	opacity: 1;
-	font-weight: 600;
-	background: var(--stuic-comment-input-tab-active-bg, rgb(0 0 0 / 0.06));
-}
-
-.stuic-comment-input-tabs button:disabled {
-	opacity: 0.4;
-}
-
-.stuic-comment-input-hint {
-	font-size: 0.75rem;
-	opacity: 0.5;
-	padding-right: 0.25rem;
-}
-
-:root.dark .stuic-comment-input-tabs button:hover:not(:disabled),
-:root.dark .stuic-comment-input-tabs button[data-active="true"] {
-	background: var(--stuic-comment-input-tab-active-bg, rgb(255 255 255 / 0.08));
-}
-
-@media (pointer: coarse) {
-	.stuic-comment-input-tabs button {
-		height: 2.5rem;
-	}
-}
-
-/* --- Surface (textarea + preview share the same box) ---------------------- */
-.stuic-comment-input-surface {
-	min-width: 0;
-}
-
-/* The inactive tab panel is removed via the `hidden` attribute; the explicit
-   rule guarantees it collapses regardless of any utility-layer display. The
-   write panel stays in the DOM while hidden so its textarea still submits and
-   validates. */
-.stuic-comment-input-panel[hidden] {
-	display: none;
-}
-
-.stuic-comment-input-textarea {
-	display: block;
-	width: 100%;
-	min-height: var(--_min-height);
-	max-width: 100%;
-	margin: 0;
-	padding: var(--_pad-y) var(--_pad-x);
-	font-size: var(--_font-size);
-	line-height: 1.6;
-	color: inherit;
-	background: transparent;
-	border: none;
-	outline: none;
-	box-shadow: none;
-	resize: none;
-}
-
-/* --- Preview -------------------------------------------------------------- */
-.stuic-comment-input-preview {
-	min-height: var(--_min-height);
-	padding: var(--_pad-y) var(--_pad-x);
-	font-size: var(--_font-size);
-	line-height: 1.6;
-	overflow-wrap: break-word;
-}
-
-.stuic-comment-input-preview-empty {
-	opacity: 0.5;
-	font-style: italic;
-}
-
-.stuic-comment-input-preview > * + * {
-	margin-top: 0.75em;
-}
-.stuic-comment-input-preview h1 {
-	font-size: 1.5em;
-	font-weight: 700;
-	line-height: 1.2;
-}
-.stuic-comment-input-preview h2 {
-	font-size: 1.3em;
-	font-weight: 700;
-	line-height: 1.25;
-}
-.stuic-comment-input-preview h3 {
-	font-size: 1.15em;
-	font-weight: 600;
-}
-.stuic-comment-input-preview ul,
-.stuic-comment-input-preview ol {
-	padding-left: 1.5em;
-}
-.stuic-comment-input-preview ul {
-	list-style: disc;
-}
-.stuic-comment-input-preview ol {
-	list-style: decimal;
-}
-.stuic-comment-input-preview a {
-	text-decoration: underline;
-}
-.stuic-comment-input-preview blockquote {
-	padding-left: 1em;
-	border-left: 3px solid var(--_border-color);
-	opacity: 0.85;
-}
-.stuic-comment-input-preview code {
-	font-family: var(
-		--stuic-comment-input-font-mono,
-		ui-monospace,
-		SFMono-Regular,
-		Menlo,
-		monospace
-	);
-	font-size: 0.9em;
-	padding: 0.1em 0.3em;
-	border-radius: 0.25rem;
-	background: var(--stuic-comment-input-code-bg, rgb(0 0 0 / 0.06));
-}
-.stuic-comment-input-preview pre {
-	font-family: var(
-		--stuic-comment-input-font-mono,
-		ui-monospace,
-		SFMono-Regular,
-		Menlo,
-		monospace
-	);
-	padding: 0.75em 1em;
-	border-radius: var(--stuic-radius, 0.375rem);
-	background: var(--stuic-comment-input-code-bg, rgb(0 0 0 / 0.06));
-	overflow-x: auto;
-}
-.stuic-comment-input-preview pre code {
-	padding: 0;
-	background: transparent;
-}
-.stuic-comment-input-preview hr {
-	border: none;
-	border-top: var(--stuic-border-width, 1px) solid var(--_border-color);
-}
-.stuic-comment-input-preview table {
-	border-collapse: collapse;
-}
-.stuic-comment-input-preview th,
-.stuic-comment-input-preview td {
-	border: var(--stuic-border-width, 1px) solid var(--_border-color);
-	padding: 0.25em 0.5em;
-}
-
-:root.dark .stuic-comment-input-preview code,
-:root.dark .stuic-comment-input-preview pre {
-	background: var(--stuic-comment-input-code-bg, rgb(255 255 255 / 0.08));
+/* The embedded MarkdownEditor wraps itself in InputWrap, which adds a bottom
+   margin meant for standalone fields. Inside the composer we want the footer to
+   sit directly beneath the editor, so collapse that margin — the footer adds its
+   own small top gap instead. */
+.stuic-comment-input-main > .stuic-input {
+	margin-bottom: 0;
 }
 
 /* --- Footer (button row) -------------------------------------------------- */
@@ -269,7 +65,7 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: 0.5rem;
-	padding: 0.5rem;
+	padding-top: var(--stuic-comment-input-footer-gap, 0.5rem);
 }
 
 .stuic-comment-input-footer-start,
@@ -282,29 +78,3 @@
 .stuic-comment-input-footer-end {
 	margin-left: auto;
 }
-
-/* --- Size variants -------------------------------------------------------- */
-.stuic-comment-input[data-size="sm"] {
-	--_pad-x: var(--stuic-comment-input-padding-x, var(--stuic-input-padding-x-sm, 0.5rem));
-	--_pad-y: var(
-		--stuic-comment-input-padding-y,
-		var(--stuic-input-padding-y-sm, 0.375rem)
-	);
-	--_font-size: var(
-		--stuic-comment-input-font-size,
-		var(--stuic-input-font-size-sm, 0.8125rem)
-	);
-	--_min-height: var(--stuic-comment-input-min-height, 4rem);
-}
-.stuic-comment-input[data-size="lg"] {
-	--_pad-x: var(--stuic-comment-input-padding-x, var(--stuic-input-padding-x-lg, 1rem));
-	--_pad-y: var(
-		--stuic-comment-input-padding-y,
-		var(--stuic-input-padding-y-lg, 0.75rem)
-	);
-	--_font-size: var(
-		--stuic-comment-input-font-size,
-		var(--stuic-input-font-size-lg, 1.0625rem)
-	);
-	--_min-height: var(--stuic-comment-input-min-height, 7rem);
-}

package/dist/components/CommentInput/index.d.ts

@@ -1,2 +1 @@
-export { default as CommentInput, type Props as CommentInputProps, type CommentInputMode, } from "./CommentInput.svelte";
-export type { MarkdownRenderer } from "./_internal/render.js";
+export { default as CommentInput, type Props as CommentInputProps, type CommentInputMode, DEFAULT_COMMENT_TOOLBAR, } from "./CommentInput.svelte";

package/dist/components/CommentInput/index.js

@@ -1 +1 @@
-export { default as CommentInput, } from "./CommentInput.svelte";
+export { default as CommentInput, DEFAULT_COMMENT_TOOLBAR, } from "./CommentInput.svelte";

package/dist/components/Input/FieldAssets.svelte

@@ -187,6 +187,15 @@
 		 * reserved for file drops); full keyboard + aria-live announcements. Default `false`.
 		 */
 		ordered?: boolean;
+		/**
+		 * Opt-in: allow pasting image/file data from the clipboard (Ctrl/Cmd-V) into
+		 * the field. Focus-scoped — the paste is consumed only while the field (or a
+		 * control inside it) holds focus; clicking anywhere in the field focuses it,
+		 * so no Tab is needed. Routed through the same validation + upload path as
+		 * drag and the file picker, so `accept`, `cardinality` and `processAssets`
+		 * all apply. No-op unless `processAssets` is provided. Default `false`.
+		 */
+		pasteable?: boolean;
 		//
 		classWrap?: string;
 	}
@@ -252,6 +261,7 @@
 		classControls = "",
 		isLoading = false,
 		ordered = false,
+		pasteable = false,
 		parseValue = (strigifiedModels: string) => {
 			const val = strigifiedModels ?? "[]";
 			try {
@@ -280,6 +290,10 @@
 	let inputEl = $state<HTMLInputElement>()!;
 	// Outer wrapper for scrollIntoView and focus targeting.
 	let wrapEl: HTMLDivElement | undefined = $state();
+	// The asset grid container, which lives INSIDE InputWrap's `.input-wrap` box.
+	// `focusForPaste` focuses this (not `wrapEl`, an ancestor) so the `:focus-within`
+	// ring on `.input-wrap` actually lights up on click.
+	let gridEl: HTMLDivElement | undefined = $state();
 	let hiddenInputEl: HTMLInputElement | undefined = $state();
 	let assetsPreview: AssetsPreview = $state()!;
 
@@ -412,6 +426,160 @@
 		focusMovedButton(to, to < from ? "prev" : "next");
 	}
 
+	// Funnels every file source (drop, picker, paste) through one path so they all
+	// share the same accept/cardinality checks, optimistic tiles and processAssets
+	// upload. Accepts a plain File[] too (paste builds one); the spread normalizes
+	// both it and a FileList.
+	function handleIncomingFiles(files: FileList | File[] | null, wasDrop = false) {
+		clog.debug(`processFiles`, wasDrop ? "[DROPPED]" : "", files);
+
+		// Copy the File objects into a stable array, then IMMEDIATELY release the
+		// hidden <input type="file">'s retained FileList. A native file input
+		// keeps its FileList after a selection until it is reset (form reset or
+		// `value = ""`), and its `change` event (wired by the `fileDropzone`
+		// action) calls back into this handler. Without this reset, any later
+		// stray `change` re-runs this with the SAME file still in `inputEl.files`,
+		// pushing a duplicate optimistic asset and firing a real re-upload.
+		// `onSubmitValidityCheck` used to dispatch exactly such a synthetic
+		// `change` on submit (now fixed there too — belt and braces). Clearing
+		// also restores the ability to re-select the same file twice in a row (an
+		// unchanged value emits no `change`). The blob URLs we create below are
+		// independent of the input, so clearing here is safe.
+		const incoming = [...(files ?? [])];
+		if (inputEl) inputEl.value = "";
+
+		// Nothing to consume — a cancelled picker, or a stray/synthetic `change`
+		// on an already-cleared input. Bail before touching state or calling
+		// processAssets (which would otherwise run with an empty batch).
+		if (!incoming.length) return;
+
+		if (accept && incoming.some((f) => !is_accepted_type(accept, f.type))) {
+			const msg = t("invalid_type", { accept });
+			if (notifications) notifications.error(msg);
+			else alert(msg);
+			return;
+		}
+
+		const cardErrMsg = t("cardinality_reached", { max: cardinality });
+		// `>=` (not `>`): refuse the moment the field already holds `cardinality`
+		// assets, instead of optimistically adding one past the limit and relying
+		// on the validator to reject it afterwards (the off-by-one that made the
+		// single-cardinality symptom loud).
+		if (assets.length >= cardinality) {
+			if (notifications) notifications.error(cardErrMsg);
+			else alert(cardErrMsg);
+			return;
+		}
+
+		const toBeProcessed: FieldAsset[] = [];
+
+		for (const file of incoming) {
+			if (assets.length >= cardinality) {
+				notifications ? notifications.error(cardErrMsg) : alert(cardErrMsg);
+				break;
+			}
+
+			// this create a unique blob url, which we'll use as id as well
+			const url = URL.createObjectURL(file);
+			const asset: FieldAsset = {
+				id: url,
+				url: { thumb: url, full: url, original: url },
+				type: file.type,
+				name: file.name,
+				meta: { isUploading: true },
+			};
+
+			// ASAP optimistic UI update
+			assets.push(asset);
+
+			// prepare data for server upload
+			toBeProcessed.push(asset);
+		}
+		value = serializeValue(assets);
+
+		if (typeof processAssets === "function") {
+			isUploading = true;
+			processAssets(toBeProcessed, onProgress)
+				.then((uploaded: FieldAssetWithBlobUrl[]) => {
+					// clog("uploaded", uploaded);
+					for (const ass of uploaded ?? []) {
+						ass.meta ??= {};
+						ass.meta.isUploading = false;
+						if (ass.blobUrl) {
+							const idx = assets.findIndex((a) => a.id === ass.blobUrl);
+							if (idx > -1) {
+								ass.meta ??= {};
+								ass.meta.isUploading = false;
+								assets[idx] = ass;
+							} else {
+								clog.error(`Asset idx ${idx} not found?!?`, ass);
+							}
+						} else {
+							clog.warn(`Missing blobUrl in`, ass);
+						}
+					}
+					value = serializeValue(assets);
+				})
+				.catch((e) => notifications?.error(`${e}`))
+				.finally(() => (isUploading = false));
+		}
+	}
+
+	// --- Clipboard paste (opt-in via `pasteable`) -------------------------------
+	// Focus-scoped: the paste listener lives on the field wrapper, so it only fires
+	// while the field (or a control inside it) holds focus. `focusForPaste` focuses
+	// the wrapper on any click within it, so a click + Ctrl/Cmd-V works with no Tab.
+	// Pasted files go through `handleIncomingFiles`, inheriting accept/cardinality
+	// validation and the processAssets upload — no synthetic `change` event.
+	function extractClipboardFiles(e: ClipboardEvent): File[] {
+		const dt = e.clipboardData;
+		if (!dt) return [];
+		const out: File[] = [];
+		// Prefer items (lets us keep only file-kind entries, e.g. a pasted
+		// screenshot); fall back to `.files` for browsers that only populate that.
+		for (let i = 0; i < (dt.items?.length ?? 0); i++) {
+			const it = dt.items[i];
+			if (it?.kind === "file") {
+				const f = it.getAsFile();
+				if (f) out.push(f);
+			}
+		}
+		if (!out.length && dt.files?.length) out.push(...dt.files);
+		return out;
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		if (!pasteable || typeof processAssets !== "function") return;
+		const files = extractClipboardFiles(e);
+		if (!files.length) return; // let plain-text pastes etc. pass through
+		e.preventDefault();
+		handleIncomingFiles(files);
+	}
+
+	// Focus the wrapper on any click inside it so a following paste lands here.
+	// Capture phase: fires even though the inner thumbnail/control buttons
+	// stopPropagation, and even in browsers that don't focus <button> on click
+	// (Safari/Firefox on macOS). Skipped when focus is already inside the field —
+	// paste bubbles from any focused descendant anyway.
+	function focusForPaste() {
+		if (!pasteable || !wrapEl) return;
+		if (wrapEl.contains(document.activeElement)) return;
+		// Focus a node INSIDE `.input-wrap` (the grid) so its `:focus-within` ring
+		// shows; fall back to the wrapper when the grid isn't mounted (loading).
+		(gridEl ?? wrapEl).focus({ preventScroll: true });
+	}
+
+	$effect(() => {
+		if (!pasteable || !wrapEl) return;
+		const el = wrapEl;
+		el.addEventListener("paste", handlePaste);
+		el.addEventListener("click", focusForPaste, true);
+		return () => {
+			el.removeEventListener("paste", handlePaste);
+			el.removeEventListener("click", focusForPaste, true);
+		};
+	});
+
 	onDestroy(() => {
 		try {
 			assets.forEach((a) => {
@@ -437,7 +605,11 @@
 			<!-- screen-reader announcements for reorder actions -->
 			<div class="sr-only" aria-live="polite" aria-atomic="true">{liveAnnouncement}</div>
 		{/if}
-		<div class={["p-2 flex items-center gap-0.5 flex-wrap"]}>
+		<div
+			class="p-2 flex items-center gap-0.5 flex-wrap w-full focus:outline-none"
+			bind:this={gridEl}
+			tabindex="-1"
+		>
 			{#each assets as asset, idx (asset.id)}
 				{@const { thumb, full, original } = asset_urls(asset)}
 				{@const _is_img = isImage(asset.type ?? thumb)}
@@ -571,100 +743,7 @@
 	use:fileDropzone={() => ({
 		enabled: typeof processAssets === "function",
 		inputEl,
-		processFiles(files: FileList | null, wasDrop?: boolean) {
-			clog.debug(`processFiles`, wasDrop ? "[DROPPED]" : "", files);
-
-			// Copy the File objects into a stable array, then IMMEDIATELY release the
-			// hidden <input type="file">'s retained FileList. A native file input
-			// keeps its FileList after a selection until it is reset (form reset or
-			// `value = ""`), and its `change` event (wired by the `fileDropzone`
-			// action) calls back into this handler. Without this reset, any later
-			// stray `change` re-runs processFiles with the SAME file still in
-			// `inputEl.files`, pushing a duplicate optimistic asset and firing a real
-			// re-upload. `onSubmitValidityCheck` used to dispatch exactly such a
-			// synthetic `change` on submit (now fixed there too — belt and braces).
-			// Clearing also restores the ability to re-select the same file twice in
-			// a row (an unchanged value emits no `change`). The blob URLs we create
-			// below are independent of the input, so clearing here is safe.
-			const incoming = [...(files ?? [])];
-			if (inputEl) inputEl.value = "";
-
-			// Nothing to consume — a cancelled picker, or a stray/synthetic `change`
-			// on an already-cleared input. Bail before touching state or calling
-			// processAssets (which would otherwise run with an empty batch).
-			if (!incoming.length) return;
-
-			if (accept && incoming.some((f) => !is_accepted_type(accept, f.type))) {
-				const msg = t("invalid_type", { accept });
-				if (notifications) notifications.error(msg);
-				else alert(msg);
-				return;
-			}
-
-			const cardErrMsg = t("cardinality_reached", { max: cardinality });
-			// `>=` (not `>`): refuse the moment the field already holds `cardinality`
-			// assets, instead of optimistically adding one past the limit and relying
-			// on the validator to reject it afterwards (the off-by-one that made the
-			// single-cardinality symptom loud).
-			if (assets.length >= cardinality) {
-				if (notifications) notifications.error(cardErrMsg);
-				else alert(cardErrMsg);
-				return;
-			}
-
-			const toBeProcessed: FieldAsset[] = [];
-
-			for (const file of incoming) {
-				if (assets.length >= cardinality) {
-					notifications ? notifications.error(cardErrMsg) : alert(cardErrMsg);
-					break;
-				}
-
-				// this create a unique blob url, which we'll use as id as well
-				const url = URL.createObjectURL(file);
-				const asset: FieldAsset = {
-					id: url,
-					url: { thumb: url, full: url, original: url },
-					type: file.type,
-					name: file.name,
-					meta: { isUploading: true },
-				};
-
-				// ASAP optimistic UI update
-				assets.push(asset);
-
-				// prepare data for server upload
-				toBeProcessed.push(asset);
-			}
-			value = serializeValue(assets);
-
-			if (typeof processAssets === "function") {
-				isUploading = true;
-				processAssets(toBeProcessed, onProgress)
-					.then((uploaded: FieldAssetWithBlobUrl[]) => {
-						// clog("uploaded", uploaded);
-						for (const ass of uploaded ?? []) {
-							ass.meta ??= {};
-							ass.meta.isUploading = false;
-							if (ass.blobUrl) {
-								const idx = assets.findIndex((a) => a.id === ass.blobUrl);
-								if (idx > -1) {
-									ass.meta ??= {};
-									ass.meta.isUploading = false;
-									assets[idx] = ass;
-								} else {
-									clog.error(`Asset idx ${idx} not found?!?`, ass);
-								}
-							} else {
-								clog.warn(`Missing blobUrl in`, ass);
-							}
-						}
-						value = serializeValue(assets);
-					})
-					.catch((e) => notifications?.error(`${e}`))
-					.finally(() => (isUploading = false));
-			}
-		},
+		processFiles: handleIncomingFiles,
 		allowClick: !assets?.length,
 	})}
 >
@@ -684,7 +763,11 @@
 		{classLabel}
 		{classLabelBox}
 		{classInputBox}
-		{classInputBoxWrap}
+		classInputBoxWrap={twMerge(
+			pasteable &&
+				"focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--stuic-color-ring)",
+			classInputBoxWrap
+		)}
 		{classInputBoxWrapInvalid}
 		{classDescBox}
 		{classDescBoxToggle}

package/dist/components/Input/FieldAssets.svelte.d.ts

@@ -75,6 +75,15 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
      * reserved for file drops); full keyboard + aria-live announcements. Default `false`.
      */
     ordered?: boolean;
+    /**
+     * Opt-in: allow pasting image/file data from the clipboard (Ctrl/Cmd-V) into
+     * the field. Focus-scoped — the paste is consumed only while the field (or a
+     * control inside it) holds focus; clicking anywhere in the field focuses it,
+     * so no Tab is needed. Routed through the same validation + upload path as
+     * drag and the file picker, so `accept`, `cardinality` and `processAssets`
+     * all apply. No-op unless `processAssets` is provided. Default `false`.
+     */
+    pasteable?: boolean;
     classWrap?: string;
 }
 declare const FieldAssets: import("svelte").Component<Props, {