@streamscloud/kit 0.2.1 → 0.2.2

package/dist/ui/inputs/rich-text-input/cmp.rich-text-input.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">import { InputEmojiPicker, inputEmojiPickerContainer } from '../input-emoji-picker';
+import { default as TinymceInput } from './tinymce-input.svelte';
+let { value, options = undefined, debounce = 0, placeholder = undefined, autofocus = false, disabled = false, rows = 0, emoji = false, borderless = false, on } = $props();
+let insertEmojiToTinymce = $state(null);
+const onEmojiSelected = (emojiChar) => {
+    insertEmojiToTinymce?.(emojiChar);
+};
+</script>
+
+<div class="rich-text-input" class:rich-text-input--has-emoji={emoji} use:inputEmojiPickerContainer>
+  <TinymceInput
+    value={value}
+    options={options}
+    placeholder={placeholder}
+    disabled={disabled}
+    borderless={borderless}
+    rows={rows}
+    autofocus={autofocus || ''}
+    debounce={debounce}
+    on={{
+      change: (e) => on?.change?.(e),
+      mounted: (e) => (insertEmojiToTinymce = e.insertEmoji)
+    }} />
+  {#if emoji}
+    <InputEmojiPicker on={{ select: onEmojiSelected }} />
+  {/if}
+</div>
+
+<!--
+@component
+Rich text editor powered by TinyMCE with optional emoji picker support.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--rich-text-input--root--font-size` | Root font size for em scaling | `1rem` |
+| `--sc-kit--rich-text-input--width` | Container width | `100%` |
+| `--sc-kit--rich-text-input--padding--block` | Block (vertical) padding | `0.5em` |
+| `--sc-kit--rich-text-input--padding--inline` | Inline (horizontal) padding | `0.5em` |
+| `--sc-kit--rich-text-input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+| `--sc-kit--rich-text-input--background` | Background color | light-dark white/gray-900 |
+| `--sc-kit--rich-text-input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+| `--sc-kit--rich-text-input--border-color` | Border color | light-dark neutral-300/neutral-600 |
+| `--sc-kit--rich-text-input--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--rich-text-input--text--font-size` | Text font size | `0.875em` |
+| `--sc-kit--rich-text-input--text--color` | Text color | light-dark gray-800/white |
+| `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | inherited from border |
+-->
+
+<style>.rich-text-input {
+  position: relative;
+}
+.rich-text-input--has-emoji {
+  --_--input--padding-right: 1.5em;
+}</style>

package/dist/ui/inputs/rich-text-input/cmp.rich-text-input.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { RichTextInputOptions } from './types';
+type Props = {
+    /** HTML content */
+    value: string | null | undefined;
+    /** TinyMCE configuration options */
+    options?: RichTextInputOptions;
+    /** Debounce delay in ms for change events @default 0 */
+    debounce?: number;
+    placeholder?: string;
+    autofocus?: boolean;
+    disabled?: boolean;
+    /** Minimum visible rows @default 0 */
+    rows?: number;
+    /** Show emoji picker trigger */
+    emoji?: boolean;
+    /** Remove border, background, and accent shadow */
+    borderless?: boolean;
+    on: {
+        change: (value: string) => void;
+    };
+};
+/**
+ * Rich text editor powered by TinyMCE with optional emoji picker support.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--rich-text-input--root--font-size` | Root font size for em scaling | `1rem` |
+ * | `--sc-kit--rich-text-input--width` | Container width | `100%` |
+ * | `--sc-kit--rich-text-input--padding--block` | Block (vertical) padding | `0.5em` |
+ * | `--sc-kit--rich-text-input--padding--inline` | Inline (horizontal) padding | `0.5em` |
+ * | `--sc-kit--rich-text-input--accent-color` | Focus accent color | light-dark primary-500/primary-400 |
+ * | `--sc-kit--rich-text-input--background` | Background color | light-dark white/gray-900 |
+ * | `--sc-kit--rich-text-input--background--disabled` | Disabled background | light-dark neutral-50/neutral-800 |
+ * | `--sc-kit--rich-text-input--border-color` | Border color | light-dark neutral-300/neutral-600 |
+ * | `--sc-kit--rich-text-input--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--rich-text-input--text--font-size` | Text font size | `0.875em` |
+ * | `--sc-kit--rich-text-input--text--color` | Text color | light-dark gray-800/white |
+ * | `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | inherited from border |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/inputs/rich-text-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RichTextInput } from './cmp.rich-text-input.svelte';
+export type { RichTextInputOptions } from './types';

package/dist/ui/inputs/rich-text-input/index.js

@@ -0,0 +1 @@
+export { default as RichTextInput } from './cmp.rich-text-input.svelte';

package/dist/ui/inputs/rich-text-input/rich-text-input-localization.d.ts

@@ -0,0 +1,12 @@
+export declare class RichTextInputLocalization {
+    get linkButton(): string;
+    get linkDialogTitle(): string;
+    get linkUrlLabel(): string;
+    get linkTextLabel(): string;
+    get linkTargetLabel(): string;
+    get linkTargetSelf(): string;
+    get linkTargetBlank(): string;
+    get linkCancelButton(): string;
+    get linkSaveButton(): string;
+    get linkUrlInvalid(): string;
+}

package/dist/ui/inputs/rich-text-input/rich-text-input-localization.js

@@ -0,0 +1,48 @@
+import { AppLocale } from '../../../core/locale';
+const loc = {
+    linkButton: { en: 'Insert/Edit Link', no: 'Sett inn/rediger lenke' },
+    linkDialogTitle: { en: 'Insert/Edit Link', no: 'Sett inn/rediger lenke' },
+    linkUrlLabel: { en: 'URL', no: 'URL' },
+    linkTextLabel: { en: 'Text to display', no: 'Tekst a vise' },
+    linkTargetLabel: { en: 'Open link in...', no: 'Apne lenke i...' },
+    linkTargetSelf: { en: 'Current window', no: 'Gjeldende vindu' },
+    linkTargetBlank: { en: 'New window', no: 'Nytt vindu' },
+    linkCancelButton: { en: 'Cancel', no: 'Avbryt' },
+    linkSaveButton: { en: 'Save', no: 'Lagre' },
+    linkUrlInvalid: {
+        en: 'The URL you entered is not valid. Please enter a valid URL.',
+        no: 'URLen du skrev inn er ikke gyldig. Vennligst skriv inn en gyldig URL.'
+    }
+};
+export class RichTextInputLocalization {
+    get linkButton() {
+        return loc.linkButton[AppLocale.current];
+    }
+    get linkDialogTitle() {
+        return loc.linkDialogTitle[AppLocale.current];
+    }
+    get linkUrlLabel() {
+        return loc.linkUrlLabel[AppLocale.current];
+    }
+    get linkTextLabel() {
+        return loc.linkTextLabel[AppLocale.current];
+    }
+    get linkTargetLabel() {
+        return loc.linkTargetLabel[AppLocale.current];
+    }
+    get linkTargetSelf() {
+        return loc.linkTargetSelf[AppLocale.current];
+    }
+    get linkTargetBlank() {
+        return loc.linkTargetBlank[AppLocale.current];
+    }
+    get linkCancelButton() {
+        return loc.linkCancelButton[AppLocale.current];
+    }
+    get linkSaveButton() {
+        return loc.linkSaveButton[AppLocale.current];
+    }
+    get linkUrlInvalid() {
+        return loc.linkUrlInvalid[AppLocale.current];
+    }
+}

package/dist/ui/inputs/rich-text-input/tinymce-input.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">import { AppTheme } from '../../../core/theme';
+import { DomHelper, HtmlHelper, Utils } from '../../../core/utils';
+import { HtmlBlock } from '../../html-block';
+import { RichTextInputLocalization } from './rich-text-input-localization';
+import { addValidatedLinkButton } from './validated-link-button';
+import { onDestroy, onMount } from 'svelte';
+let { value, options = undefined, debounce = 0, placeholder = undefined, disabled = false, borderless = false, autofocus = 'false', modelEvents = 'change input undo redo', rows = 0, conf = undefined, on } = $props();
+const id = `ti-${crypto.randomUUID()}`;
+const fixedToolbarId = `fixed-toolbar-${id}`;
+let element;
+let editorRef = $state.raw(null);
+let everFocused = false;
+let lastVal = $state.raw(undefined);
+let tinymce;
+$effect(() => {
+    if (editorRef && lastVal !== value) {
+        setEditorValue(editorRef, value ?? '');
+    }
+});
+$effect(() => {
+    if (editorRef) {
+        editorRef.mode.set(disabled ? 'readonly' : 'design');
+    }
+});
+onMount(async () => {
+    const loc = new RichTextInputLocalization();
+    on?.mounted?.({
+        insertEmoji: (emoji) => {
+            if (!everFocused && editorRef) {
+                editorRef.selection.select(editorRef.getBody(), true);
+                editorRef.selection.collapse(false);
+            }
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    editorRef?.execCommand('mceInsertContent', false, emoji);
+                    resolve(true);
+                });
+            });
+        }
+    });
+    if (debounce) {
+        applyChange = Utils.debounce(applyChange, debounce);
+    }
+    const { default: tmi } = await import('tinymce');
+    await Promise.all([
+        import('tinymce/themes/silver'),
+        AppTheme.isDarkMode ? import('tinymce/skins/ui/oxide-dark/skin.min.css') : import('tinymce/skins/ui/oxide/skin.min.css'),
+        import('tinymce/skins/ui/oxide/content.inline.min.css'),
+        import('tinymce/icons/default'),
+        import('tinymce/plugins/link'),
+        import('tinymce/plugins/lists'),
+        import('tinymce/plugins/paste'),
+        import('tinymce/plugins/advlist'),
+        import('tinymce/plugins/table')
+    ]);
+    tinymce = tmi;
+    await tinymce.init({
+        target: element,
+        inline: true,
+        skin: false,
+        fixed_toolbar_container: `#${options?.fixedToolbarId || fixedToolbarId}`,
+        menubar: false,
+        auto_focus: autofocus,
+        placeholder: placeholder,
+        readonly: disabled,
+        toolbar: 'undo redo | formatselect | fontselect fontsizeselect | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | lineheight | table | validatedlink',
+        toolbar_persist: options?.persistToolbar,
+        plugins: ['lists', 'paste', 'advlist', 'table'],
+        advlist_bullet_styles: 'default,circle,square,disc',
+        advlist_number_styles: 'default,lower-alpha,lower-roman,upper-alpha,upper-roman',
+        lineheight_formats: '1 1.15 1.5 2 2.5 3',
+        font_formats: 'Arial=arial,helvetica,sans-serif; Comic Sans MS=comic sans ms,cursive; Courier New=courier new,courier,monospace; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,charcoal,sans-serif; Lucida Console=lucida console,monaco,monospace; Palatino Linotype=palatino linotype,book antiqua,palatino,serif; Tahoma=tahoma,geneva,sans-serif; Times New Roman=times new roman,times,serif; Trebuchet MS=trebuchet ms,sans-serif; Verdana=verdana,geneva,sans-serif',
+        fontsize_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px',
+        block_formats: 'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6',
+        contextmenu: 'link',
+        paste_data_images: false,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        paste_preprocess: (_, args) => {
+            if (!args.wordContent && !args.internal) {
+                const text = HtmlHelper.stripHtml(args.content);
+                const lines = text.split('\n');
+                args.content = '';
+                lines.forEach((line) => {
+                    if (!line) {
+                        line = '&nbsp;';
+                    }
+                    args.content += `<p>${line}</p>`;
+                });
+            }
+        },
+        ...conf,
+        setup: (editor) => {
+            editorRef = editor;
+            editor.on('init', () => {
+                if (rows) {
+                    editor.bodyElement.style.minHeight = DomHelper.calcHeightBasedOnRows(editor.bodyElement, rows);
+                }
+                editor.on(modelEvents, () => applyChange(editor));
+            });
+            editor.on('blur', () => {
+                HtmlHelper.clearSelection();
+                notifyFocused(false);
+            });
+            editor.on('focus', () => {
+                everFocused = true;
+                notifyFocused(true);
+            });
+            addValidatedLinkButton(editor, loc);
+            if (typeof conf?.setup === 'function') {
+                conf.setup(editor);
+            }
+        }
+    });
+});
+onDestroy(() => {
+    if (editorRef) {
+        tinymce.remove(editorRef);
+    }
+    editorRef = null;
+});
+const notifyFocused = (foc) => {
+    on?.focused?.(foc);
+};
+let applyChange = (editor) => {
+    lastVal = editor.getContent();
+    if (lastVal !== value) {
+        value = lastVal;
+    }
+    on?.change?.(lastVal);
+};
+const setEditorValue = (editor, val) => {
+    editor.setContent(val);
+    lastVal = val;
+};
+</script>
+
+<div class="tinymce-input" class:tinymce-input--disabled={disabled} class:tinymce-input--borderless={borderless}>
+  <span class="tinymce-input__toolbar" id={fixedToolbarId}></span>
+  <HtmlBlock>
+    <div class="tinymce-input__input" id={id} bind:this={element}></div>
+  </HtmlBlock>
+</div>
+
+<style>.tinymce-input {
+  --_tinymce-input--padding--block: var(--sc-kit--rich-text-input--padding--block, 0.5em);
+  --_tinymce-input--placeholder--color: var(--sc-kit--rich-text-input--placeholder--color, var(--_input--border-color));
+  --_--input--root--font-size: var(--sc-kit--rich-text-input--root--font-size);
+  --_--input--width: var(--sc-kit--rich-text-input--width);
+  --_--input--background: var(--sc-kit--rich-text-input--background);
+  --_--input--background--disabled: var(--sc-kit--rich-text-input--background--disabled);
+  --_--input--border-color: var(--sc-kit--rich-text-input--border-color);
+  --_--input--border-radius: var(--sc-kit--rich-text-input--border-radius);
+  --_--input--text--font-size: var(--sc-kit--rich-text-input--text--font-size);
+  --_--input--text--color: var(--sc-kit--rich-text-input--text--color);
+  --_--input--placeholder--color: var(--_tinymce-input--placeholder--color);
+  --_--input--accent-color: var(--sc-kit--rich-text-input--accent-color);
+  --_--input--padding--inline: var(--sc-kit--rich-text-input--padding--inline);
+  --_--input--padding--block: var(--_tinymce-input--padding--block);
+  --_input--root--font-size: var(--_--input--root--font-size, 1rem);
+  --_input--height: var(--_--input--height, 2em);
+  --_input--width: var(--_--input--width, 100%);
+  --_input--background: var(--_--input--background, light-dark(#ffffff, #1c1c1c));
+  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#f9fafb, #1f2937));
+  --_input--border-color: var(--_--input--border-color, light-dark(#d1d5db, #4b5563));
+  --_input--border-radius: var(--_--input--border-radius, 0.25em);
+  --_input--icon--size: var(--_--input--icon--size, 1em);
+  --_input--icon--color: var(--_--input--icon--color, var(--_input--border-color));
+  --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
+  --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
+  --_input--placeholder--color: var(--_--input--placeholder--color, var(--_input--border-color));
+  --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
+  --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
+  --_input--padding--block: var(--_--input--padding--block, 0);
+  --_input--padding-top: var(--_--input--padding-top, var(--_input--padding--block));
+  --_input--padding-right: var(--_--input--padding-right, var(--_input--padding--inline));
+  --_input--padding-bottom: var(--_--input--padding-bottom, var(--_input--padding--block));
+  --_input--padding-left: var(--_--input--padding-left, var(--_input--padding--inline));
+  font-size: var(--_input--root--font-size);
+  height: var(--_input--height);
+  color: var(--_input--text--color);
+  border: 1px solid var(--_input--border-color);
+  border-radius: var(--_input--border-radius);
+  width: var(--_input--width);
+  min-width: var(--_input--width);
+  background: var(--_input--background);
+  padding-top: var(--_input--padding-top);
+  padding-right: var(--_input--padding-right);
+  padding-bottom: var(--_input--padding-bottom);
+  padding-left: var(--_input--padding-left);
+  --_input--default-shadow-color: transparent;
+  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
+  position: relative;
+  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
+  transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.tinymce-input:focus, .tinymce-input:focus-within {
+  --_input--default-shadow-color: var(--_input--accent-color);
+}
+.tinymce-input--disabled {
+  background-color: var(--_input--background--disabled);
+  cursor: default;
+}
+.tinymce-input {
+  cursor: text;
+  min-height: 2em;
+  height: auto;
+  display: block;
+  position: relative;
+}
+.tinymce-input--borderless {
+  --_input--border-color: transparent;
+  --_input--background: transparent;
+  --_input--background--disabled: transparent;
+  --_input--accent-color: transparent;
+  --_input--explicit-shadow-color: transparent;
+  --_input--height: auto;
+}
+.tinymce-input :global(.tox-tinymce-inline .tox-editor-header) {
+  border-radius: 0.375em !important;
+  overflow: hidden;
+}
+.tinymce-input__input {
+  font-size: var(--_input--text--font-size);
+  color: var(--_input--text--color);
+}
+.tinymce-input__input::placeholder {
+  color: var(--_input--placeholder--color);
+}
+.tinymce-input__input:-webkit-autofill {
+  -webkit-text-fill-color: var(--_input--text--color) !important;
+}
+.tinymce-input__input {
+  min-height: 100%;
+  background: transparent;
+}
+.tinymce-input__input::before {
+  color: var(--_tinymce-input--placeholder--color) !important;
+}
+.tinymce-input__input:focus {
+  outline: none;
+}
+.tinymce-input__toolbar {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+}
+
+:global(.tox .tox-collection__item-label) {
+  white-space: nowrap;
+}</style>

package/dist/ui/inputs/rich-text-input/tinymce-input.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { RichTextInputOptions } from './types';
+import type { RawEditorSettings } from 'tinymce';
+type Props = {
+    value: string | null | undefined;
+    options?: RichTextInputOptions;
+    debounce?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Remove border, background, and accent shadow */
+    borderless?: boolean;
+    autofocus?: true | string;
+    modelEvents?: string;
+    rows?: number;
+    conf?: RawEditorSettings;
+    on: {
+        change: (value: string) => void;
+        focused?: (focused: boolean) => void;
+        mounted?: (data: {
+            insertEmoji: (emoji: string) => void;
+        }) => void;
+    };
+};
+declare const TinymceInput: import("svelte").Component<Props, {}, "">;
+type TinymceInput = ReturnType<typeof TinymceInput>;
+export default TinymceInput;

package/dist/ui/inputs/rich-text-input/tinymce.declarations.d.ts

@@ -0,0 +1,7 @@
+declare module 'tinymce/themes/silver';
+declare module 'tinymce/icons/default';
+declare module 'tinymce/plugins/link';
+declare module 'tinymce/plugins/lists';
+declare module 'tinymce/plugins/paste';
+declare module 'tinymce/plugins/advlist';
+declare module 'tinymce/plugins/table';

package/dist/ui/inputs/rich-text-input/types.d.ts

@@ -0,0 +1,4 @@
+export type RichTextInputOptions = {
+    persistToolbar?: boolean;
+    fixedToolbarId?: string;
+};

package/dist/ui/inputs/rich-text-input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/inputs/rich-text-input/validated-link-button.d.ts

@@ -0,0 +1,3 @@
+import type { RichTextInputLocalization } from './rich-text-input-localization';
+import type { Editor } from 'tinymce';
+export declare const addValidatedLinkButton: (editor: Editor, loc: RichTextInputLocalization) => void;

package/dist/ui/inputs/rich-text-input/validated-link-button.js

@@ -0,0 +1,78 @@
+import { validateHref } from '../../../core/utils';
+const DEFAULT_TARGET = '_blank';
+export const addValidatedLinkButton = (editor, loc) => {
+    editor.ui.registry.addButton('validatedlink', {
+        icon: 'link',
+        tooltip: loc.linkButton,
+        onAction: () => {
+            const linkNode = editor.dom.getParent(editor.selection.getNode(), 'a');
+            let initialUrl = '';
+            let initialText = '';
+            let initialTarget = DEFAULT_TARGET;
+            if (linkNode) {
+                initialUrl = linkNode.getAttribute('href') ?? '';
+                initialText = linkNode.textContent ?? '';
+                initialTarget = linkNode.getAttribute('target') ?? DEFAULT_TARGET;
+            }
+            else {
+                initialText = editor.selection.getContent({ format: 'text' }) ?? '';
+            }
+            let userChangedText = false;
+            editor.windowManager.open({
+                title: loc.linkDialogTitle,
+                body: {
+                    type: 'panel',
+                    items: [
+                        { type: 'input', name: 'url', label: loc.linkUrlLabel },
+                        { type: 'input', name: 'text', label: loc.linkTextLabel },
+                        {
+                            type: 'listbox',
+                            name: 'openIn',
+                            label: loc.linkTargetLabel,
+                            items: [
+                                { text: loc.linkTargetSelf, value: '_self' },
+                                { text: loc.linkTargetBlank, value: '_blank' }
+                            ]
+                        }
+                    ]
+                },
+                initialData: {
+                    url: initialUrl,
+                    text: initialText,
+                    openIn: initialTarget
+                },
+                buttons: [
+                    { type: 'cancel', text: loc.linkCancelButton },
+                    { type: 'submit', text: loc.linkSaveButton, primary: true }
+                ],
+                onChange: (api, details) => {
+                    if (details.name === 'text' && !userChangedText) {
+                        userChangedText = true;
+                    }
+                    if (details.name === 'url') {
+                        const data = api.getData();
+                        if (!userChangedText && !initialText) {
+                            api.setData({ text: data.url });
+                        }
+                    }
+                },
+                onSubmit: (api) => {
+                    const data = api.getData();
+                    if (!validateHref(data.url, { allowRelative: 'prefixed' }).valid) {
+                        editor.windowManager.alert(loc.linkUrlInvalid);
+                        return;
+                    }
+                    if (linkNode) {
+                        editor.dom.setAttrib(linkNode, 'href', data.url);
+                        editor.dom.setAttrib(linkNode, 'target', data.openIn);
+                        linkNode.textContent = data.text ?? data.url;
+                    }
+                    else {
+                        editor.insertContent(`<a href="${data.url}" target="${data.openIn}">${data.text ?? data.url}</a>`);
+                    }
+                    api.close();
+                }
+            });
+        }
+    });
+};

package/dist/ui/inputs/textarea/cmp.textarea-validatable.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" generics="T extends Record<string, unknown>">import { Utils } from '../../../core/utils';
+import { FormValidationHandler } from '../../../core/validation';
+import { Validatable } from '../../validatable';
+import { default as Textarea } from './cmp.textarea.svelte';
+let { name, handler, placeholder = '', debounce = 0, hidePlaceholderOnFocus = true, submitOnEnter = false, rows = 0, maxlength = 50000, id = '', disabled = false, autofocus = false, on } = $props();
+const onChange = (value) => {
+    on?.change?.(value);
+    handler.updateValidateField(name, value);
+};
+const handleChangeDebounced = $derived(debounce ? Utils.debounce(onChange, debounce) : onChange);
+</script>
+
+<Validatable handler={handler} name={name}>
+  <Textarea
+    id={id}
+    autofocus={autofocus}
+    hidePlaceholderOnFocus={hidePlaceholderOnFocus}
+    submitOnEnter={submitOnEnter}
+    rows={rows}
+    maxlength={maxlength}
+    disabled={disabled}
+    placeholder={placeholder}
+    value={handler.formStringified[name]}
+    title={!!handler.touched[name] && !!handler.errors[name] ? handler.errors[name] : ''}
+    on={{
+      change: (e) => handleChangeDebounced(e),
+      submit: () => on?.submit?.(),
+      mounted: (e) => on?.mounted?.(e)
+    }} />
+</Validatable>
+
+<!--
+@component
+Textarea wrapped with form validation.
+-->

package/dist/ui/inputs/textarea/cmp.textarea-validatable.svelte.d.ts

@@ -0,0 +1,53 @@
+import { FormValidationHandler } from '../../../core/validation';
+declare function $$render<T extends Record<string, unknown>>(): {
+    props: {
+        /** Field name in the form handler */
+        name: keyof T & string;
+        /** Form validation handler instance */
+        handler: FormValidationHandler<T>;
+        placeholder?: string;
+        /** Debounce delay in ms @default 0 */
+        debounce?: number;
+        /** Hide placeholder text when focused @default true */
+        hidePlaceholderOnFocus?: boolean;
+        /** Fire submit callback on Enter key */
+        submitOnEnter?: boolean;
+        /** Minimum visible rows @default 0 */
+        rows?: number;
+        maxlength?: number;
+        id?: string;
+        disabled?: boolean;
+        autofocus?: boolean;
+        on?: {
+            change?: (value: string) => void;
+            /** Fires on Enter when submitOnEnter is enabled */
+            submit?: () => void;
+            /** Fires after mount, provides the textarea element ref */
+            mounted?: (data: {
+                textarea: HTMLTextAreaElement;
+            }) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Textarea wrapped with form validation. */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;
+export default Cmp;