@streamscloud/kit 0.88.0 → 0.89.1

package/dist/core/index.d.ts

@@ -2,5 +2,5 @@ export type { CursorPayload, CursorResult } from './cursor-result';
 export { ContinuationToken } from './continuation-token';
 export { Deferred } from './deferred';
 export { AppEvent, EventDispatcher } from './event-dispatcher';
-export { generateHandle } from './handle-generator';
 export { createGQLClient } from './graphql';
+export { generateHandle, HANDLE_DEFAULT_MAX_LENGTH, HANDLE_PATTERN } from './url-name';

package/dist/core/index.js

@@ -2,5 +2,5 @@
 export { ContinuationToken } from './continuation-token';
 export { Deferred } from './deferred';
 export { AppEvent, EventDispatcher } from './event-dispatcher';
-export { generateHandle } from './handle-generator';
 export { createGQLClient } from './graphql';
+export { generateHandle, HANDLE_DEFAULT_MAX_LENGTH, HANDLE_PATTERN } from './url-name';

package/dist/core/url-name.d.ts

@@ -0,0 +1,4 @@
+export declare const HANDLE_DEFAULT_MAX_LENGTH = 80;
+export declare const HANDLE_PATTERN: RegExp;
+/** Mirrors the backend's `UrlName.From` (AnyAscii, same version on both sides) — the server compares names by this handle, so keep both in lockstep. */
+export declare const generateHandle: (text: string | null | undefined, maxLength?: number) => string;

package/dist/core/url-name.js

@@ -0,0 +1,19 @@
+import anyAscii from 'any-ascii';
+export const HANDLE_DEFAULT_MAX_LENGTH = 80;
+export const HANDLE_PATTERN = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+const STARTS_WITH_SYMBOL = /^\p{S}/u;
+const graphemes = new Intl.Segmenter('und', { granularity: 'grapheme' });
+const dropSymbols = (text) => Array.from(graphemes.segment(text), ({ segment }) => segment)
+    .filter((segment) => !STARTS_WITH_SYMBOL.test(segment))
+    .join('');
+/** Mirrors the backend's `UrlName.From` (AnyAscii, same version on both sides) — the server compares names by this handle, so keep both in lockstep. */
+export const generateHandle = (text, maxLength = HANDLE_DEFAULT_MAX_LENGTH) => {
+    if (!text) {
+        return '';
+    }
+    const handle = anyAscii(dropSymbols(text))
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+    return handle.length <= maxLength ? handle : handle.slice(0, maxLength).replace(/-+$/, '');
+};

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/core/validation/validation-schemas/handle-validations.js

@@ -1,8 +1,8 @@
+import { HANDLE_PATTERN } from '../../url-name';
 import { ValidationLocalization } from './validation-localization';
 import * as yup from 'yup';
 const DEFAULT_MIN_LENGTH = 3;
 const DEFAULT_MAX_LENGTH = 30;
-const HANDLE_REGEX = /^[a-z_]([a-z0-9_]|[.-](?![.-]))*[a-z0-9_]$/;
 const resolveHandleLength = (lengthValidation) => ({
     minLength: lengthValidation?.minLength ?? DEFAULT_MIN_LENGTH,
     maxLength: lengthValidation?.maxLength ?? DEFAULT_MAX_LENGTH
@@ -10,7 +10,7 @@ const resolveHandleLength = (lengthValidation) => ({
 /** Value-level rules of `handleValidationSchema` — within length bounds and matching the handle format. */
 export const isValidHandle = (value, lengthValidation) => {
     const { minLength, maxLength } = resolveHandleLength(lengthValidation);
-    return value.length >= minLength && value.length <= maxLength && HANDLE_REGEX.test(value);
+    return value.length >= minLength && value.length <= maxLength && HANDLE_PATTERN.test(value);
 };
 export const handleValidationSchema = (lengthValidation) => {
     const msg = new ValidationLocalization();
@@ -20,5 +20,5 @@ export const handleValidationSchema = (lengthValidation) => {
         .required(msg.required)
         .min(minLength, msg.minLength(minLength))
         .max(maxLength, msg.maxLength(maxLength))
-        .test('handle-format', msg.badFormat, (val) => !!val && HANDLE_REGEX.test(val));
+        .test('handle-format', msg.badFormat, (val) => !!val && HANDLE_PATTERN.test(val));
 };

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.88.0",
+  "version": "0.89.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -488,6 +488,7 @@
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@fontsource/source-sans-pro": "^5.2.5",
     "@urql/core": "^6.0.1",
+    "any-ascii": "^0.3.3",
     "cleave-zen": "^0.0.17",
     "colord": "^2.9.3",
     "dequal": "^2.0.3",
@@ -518,6 +519,7 @@
     "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^26.6.1",
     "@urql/core": "^6.0.1",
+    "any-ascii": "^0.3.3",
     "autoprefixer": "^10.6.1",
     "cleave-zen": "^0.0.17",
     "colord": "^2.9.3",

package/dist/core/handle-generator.d.ts

@@ -1 +0,0 @@
-export declare const generateHandle: (base: string | null | undefined) => string;

package/dist/core/handle-generator.js

@@ -1,32 +0,0 @@
-const SPEC_SYMBOLS = [
-    { symbol: 'å', replacement: 'a' },
-    { symbol: 'Å', replacement: 'A' },
-    { symbol: 'æ', replacement: 'ae' },
-    { symbol: 'Æ', replacement: 'Ae' },
-    { symbol: 'ø', replacement: 'o' },
-    { symbol: 'Ø', replacement: 'O' },
-    { symbol: 'ö', replacement: 'o' },
-    { symbol: 'Ö', replacement: 'O' },
-    { symbol: 'ä', replacement: 'a' },
-    { symbol: 'Ä', replacement: 'A' }
-];
-export const generateHandle = (base) => {
-    if (!base) {
-        return '';
-    }
-    let handle = base;
-    // Replace nordic/special chars
-    for (const { symbol, replacement } of SPEC_SYMBOLS) {
-        handle = handle.replace(new RegExp(symbol, 'g'), replacement);
-    }
-    handle = handle
-        // Insert hyphen before uppercase (camelCase → kebab-case)
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        // Lowercase
-        .toLowerCase()
-        // Replace any non-alphanumeric with hyphen
-        .replace(/[^a-z0-9]+/g, '-')
-        // Remove leading/trailing hyphens
-        .replace(/^-+|-+$/g, '');
-    return handle;
-};