@streamscloud/kit 0.89.0 → 0.89.1

package/dist/core/utils/html-helper.d.ts

@@ -11,6 +11,16 @@ export declare class HtmlHelper {
      * swallow the space in "hello world" as it is typed.
      */
     static trimElementValue(element: HTMLInputElement | HTMLTextAreaElement): boolean;
+    /**
+     * Rewrites a field's current value in place through `clean`, keeping the caret after the same
+     * character, and returns whether it changed. Dispatches nothing — the caller emits.
+     */
+    static cleanElementValue(element: HTMLInputElement | HTMLTextAreaElement, clean: (text: string) => string): boolean;
+    /**
+     * `paste` handler for a text field: when `clean` changes the pasted text, inserts the cleaned text instead as one
+     * native edit, so Cmd+Z undoes the paste like any other.
+     */
+    static pasteCleanedText(event: ClipboardEvent, clean: (text: string) => string): void;
     static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
     /**
      * Sanitizes SVG markup and serializes it as XML, valid both inline in HTML and as a standalone `image/svg+xml` file.

package/dist/core/utils/html-helper.js

@@ -93,6 +93,43 @@ export class HtmlHelper {
         element.value = trimmed;
         return true;
     }
+    /**
+     * Rewrites a field's current value in place through `clean`, keeping the caret after the same
+     * character, and returns whether it changed. Dispatches nothing — the caller emits.
+     */
+    static cleanElementValue(element, clean) {
+        const cleaned = clean(element.value);
+        if (cleaned === element.value) {
+            return false;
+        }
+        const caret = element.selectionEnd === null ? null : clean(element.value.slice(0, element.selectionEnd)).length;
+        element.value = cleaned;
+        if (caret !== null && document.activeElement === element) {
+            element.setSelectionRange(caret, caret);
+        }
+        return true;
+    }
+    /**
+     * `paste` handler for a text field: when `clean` changes the pasted text, inserts the cleaned text instead as one
+     * native edit, so Cmd+Z undoes the paste like any other.
+     */
+    static pasteCleanedText(event, clean) {
+        const text = event.clipboardData?.getData('text/plain');
+        if (!text) {
+            return;
+        }
+        const cleaned = clean(text);
+        if (cleaned === text) {
+            return;
+        }
+        event.preventDefault();
+        const field = event.currentTarget;
+        // Without it the browser merges the insert into the typing before it, and Cmd+Z undoes both at once.
+        if (field.selectionStart !== null && field.selectionEnd !== null) {
+            field.setSelectionRange(field.selectionStart, field.selectionEnd, field.selectionDirection ?? undefined);
+        }
+        document.execCommand('insertText', false, cleaned);
+    }
     static pasteIntoInput(value, element) {
         if (element.selectionStart || element.selectionStart === 0) {
             const startPos = element.selectionStart;

package/dist/core/utils/string-helper.d.ts

@@ -7,6 +7,16 @@ export declare class StringHelper {
     static toKebabCase(str: string): string;
     static toSnakeCase(str: string): string;
     static truncate(str: string, length: number): string;
+    /**
+     * Text for a single-line field: every line break (CR, LF, CRLF, VT, FF, NEL, U+2028, U+2029) and tab
+     * becomes a space; every other control character (C0, DEL, C1) is dropped.
+     */
+    static toSingleLineText(text: string): string;
+    /**
+     * Text for a multi-line field: every line break (CRLF, lone CR, VT, FF, NEL, U+2028, U+2029) becomes `\n`;
+     * `\n` and tab stay; every other control character (C0, DEL, C1) is dropped.
+     */
+    static toMultilineText(text: string): string;
     static capitalizeFirstLetter(word: string): string;
     static toFileSizeString(sizeBytes: number): string;
 }

package/dist/core/utils/string-helper.js

@@ -50,6 +50,20 @@ export class StringHelper {
         str = str.slice(0, length) + '...';
         return str;
     }
+    /**
+     * Text for a single-line field: every line break (CR, LF, CRLF, VT, FF, NEL, U+2028, U+2029) and tab
+     * becomes a space; every other control character (C0, DEL, C1) is dropped.
+     */
+    static toSingleLineText(text) {
+        return text.replace(/\r\n|[\n\r\t\v\f\u0085\p{Zl}\p{Zp}]/gu, ' ').replace(/\p{Cc}/gu, '');
+    }
+    /**
+     * Text for a multi-line field: every line break (CRLF, lone CR, VT, FF, NEL, U+2028, U+2029) becomes `\n`;
+     * `\n` and tab stay; every other control character (C0, DEL, C1) is dropped.
+     */
+    static toMultilineText(text) {
+        return text.replace(/\r\n?|[\v\f\u0085\p{Zl}\p{Zp}]/gu, '\n').replace(/[^\P{Cc}\n\t]/gu, '');
+    }
     static capitalizeFirstLetter(word) {
         return word.charAt(0).toUpperCase() + word.slice(1);
     }

package/dist/ui/input/cmp.input.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { HtmlHelper } from '../../core/utils';
+<script lang="ts">import { HtmlHelper, StringHelper } from '../../core/utils';
 import { InputClearButton } from '../_internal/input-clear-button';
 import { InputEmojiPicker } from '../_internal/input-emoji-picker';
 import { InputPasswordToggle } from '../_internal/input-password-toggle';
@@ -25,6 +25,9 @@ const handleInput = () => {
     if (!inputEl) {
         return;
     }
+    if (type !== 'password') {
+        HtmlHelper.cleanElementValue(inputEl, StringHelper.toSingleLineText);
+    }
     on?.input?.(inputEl.value);
 };
 const applyTrim = () => {
@@ -71,6 +74,11 @@ const handleBlur = () => {
     }
     on?.blur?.();
 };
+const handlePaste = (event) => {
+    if (type !== 'password') {
+        HtmlHelper.pasteCleanedText(event, StringHelper.toSingleLineText);
+    }
+};
 const handleKeydown = (event) => {
     // Input only — the native `change` Enter fires next announces the commit; emitting it here doubles it.
     if (event.key === 'Enter' && !event.isComposing) {
@@ -133,6 +141,7 @@ const focusInput = () => inputEl?.focus();
     aria-required={ariaRequired ? 'true' : undefined}
     oninput={handleInput}
     onchange={handleChange}
+    onpaste={handlePaste}
     onblur={handleBlur}
     onfocus={() => on?.focus?.()}
     onkeydown={handleKeydown} />
@@ -173,6 +182,9 @@ Leading / trailing whitespace is stripped at every commit point — `change`, bl
 value the consumer receives always matches what the field shows. Typing is untouched. Pass
 `trim={false}` to opt out; `type="password"` never trims.
 
+Entered text is cleaned as it arrives — typed, pasted, dropped or autofilled: line breaks and tabs
+become spaces, other control characters are dropped. `type="password"` is never cleaned.
+
 Two snippet slots widen the chrome: `prefix` for a full-height segmented leading addon (see
 `WebsiteInput`), and `suffix` for a free-form trailing addon rendered before any trailing icons
 or the clear button (see `HandleInput`'s availability pill).

package/dist/ui/input/cmp.input.svelte.d.ts

@@ -10,6 +10,9 @@ import type { InputProps } from './types';
  * value the consumer receives always matches what the field shows. Typing is untouched. Pass
  * `trim={false}` to opt out; `type="password"` never trims.
  *
+ * Entered text is cleaned as it arrives — typed, pasted, dropped or autofilled: line breaks and tabs
+ * become spaces, other control characters are dropped. `type="password"` is never cleaned.
+ *
  * Two snippet slots widen the chrome: `prefix` for a full-height segmented leading addon (see
  * `WebsiteInput`), and `suffix` for a free-form trailing addon rendered before any trailing icons
  * or the clear button (see `HandleInput`'s availability pill).

package/dist/ui/textarea/cmp.textarea.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { HtmlHelper } from '../../core/utils';
+<script lang="ts">import { HtmlHelper, StringHelper } from '../../core/utils';
 import { InputEmojiPicker } from '../_internal/input-emoji-picker';
 const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, singleLine = false, submitOnEnter = false, trim = true, placeholder = '', name = '', id = null, autofocus = false, maxLength = null, rows = 3, autoresize = true, maxRows = 12, autocomplete, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on } = $props();
 let textareaEl = $state.raw(undefined);
-const sanitizeLineBreaks = (text) => text.replace(/[\r\n]+/g, ' ');
-const valueParsed = $derived(singleLine && value ? sanitizeLineBreaks(value) : (value ?? ''));
+const cleanText = $derived(singleLine ? StringHelper.toSingleLineText : StringHelper.toMultilineText);
+const valueParsed = $derived(singleLine && value ? cleanText(value) : (value ?? ''));
 const effectiveRows = $derived(singleLine ? 1 : rows);
 const trimOnCommit = $derived(trim && !disabled && !readonly && !inert);
 /** Imperative API exposed via `bind:this` on `<Textarea>`. */
@@ -38,6 +38,7 @@ const handleInput = () => {
     if (!textareaEl) {
         return;
     }
+    HtmlHelper.cleanElementValue(textareaEl, cleanText);
     resize();
     on?.input?.(textareaEl.value);
 };
@@ -62,21 +63,11 @@ const handleChange = () => {
     on?.change?.(textareaEl.value);
 };
 const handleBeforeInput = (e) => {
-    if (!singleLine || !textareaEl) {
-        return;
-    }
-    if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
-        e.preventDefault();
-        return;
-    }
-    if (e.data && /[\r\n]/.test(e.data)) {
+    if (singleLine && (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph')) {
         e.preventDefault();
-        const start = textareaEl.selectionStart;
-        const end = textareaEl.selectionEnd;
-        textareaEl.setRangeText(sanitizeLineBreaks(e.data), start, end, 'end');
-        textareaEl.dispatchEvent(new Event('input', { bubbles: true }));
     }
 };
+const handlePaste = (e) => HtmlHelper.pasteCleanedText(e, cleanText);
 const handleKeydown = (e) => {
     if (submitOnEnter && e.key === 'Enter' && !e.isComposing && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
         e.preventDefault();
@@ -134,6 +125,7 @@ const focusTextarea = () => textareaEl?.focus();
     oninput={handleInput}
     onchange={handleChange}
     onbeforeinput={handleBeforeInput}
+    onpaste={handlePaste}
     onkeydown={handleKeydown}
     onblur={handleBlur}
     onfocus={() => on?.focus?.()}></textarea>
@@ -157,6 +149,10 @@ point — `change`, blur, and before `on.submit` — so the value the consumer r
 what the field shows. Blank lines inside the text are left alone. Typing is untouched. Pass
 `trim={false}` to opt out.
 
+Entered text is cleaned as it arrives — typed, pasted or dropped: every line break (including Word's
+soft break) becomes `\n`, other control characters except tab are dropped. In `singleLine` mode line breaks and tabs
+become spaces instead.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

package/dist/ui/textarea/cmp.textarea.svelte.d.ts

@@ -67,6 +67,10 @@ type Props = {
  * what the field shows. Blank lines inside the text are left alone. Typing is untouched. Pass
  * `trim={false}` to opt out.
  *
+ * Entered text is cleaned as it arrives — typed, pasted or dropped: every line break (including Word's
+ * soft break) becomes `\n`, other control characters except tab are dropped. In `singleLine` mode line breaks and tabs
+ * become spaces instead.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.89.0",
+  "version": "0.89.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",