@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/radio/cmp.radio-card.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">const { selected, title, description, disabled = false, name, on } = $props();
+const handleClick = (event) => {
+    event.stopPropagation();
+    if (disabled || selected) {
+        return;
+    }
+    on?.change?.();
+};
+</script>
+
+<button
+  type="button"
+  class="radio-card"
+  class:radio-card--on={selected}
+  class:radio-card--disabled={disabled}
+  role="radio"
+  aria-checked={selected}
+  aria-label={name ?? title}
+  disabled={disabled}
+  onclick={handleClick}>
+  <span class="radio-card__dot" aria-hidden="true">
+    {#if selected}<span class="radio-card__inner"></span>{/if}
+  </span>
+  <span class="radio-card__body">
+    <span class="radio-card__title">{title}</span>
+    {#if description}<span class="radio-card__description">{description}</span>{/if}
+  </span>
+</button>
+
+<!--
+@component
+RadioCard — a Radio rendered as a tappable card with a title and optional description. Use
+for high-stakes one-of-N selections where each option needs more explanation than a single
+label line (plan picker, account type, theme picker).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--radio-card--background` | Card background | per state |
+| `--sc-kit--radio-card--border-color` | Card border color | per state |
+| `--sc-kit--radio-card--border-color--hover` | Border color on hover (off state) | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--radio-card--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
+| `--sc-kit--radio-card--padding-block` | Vertical padding | `var(--sc-kit--space--3)` (12px) |
+| `--sc-kit--radio-card--padding-inline` | Horizontal padding | `0.875rem` (14px) |
+| `--sc-kit--radio-card--gap` | Gap between dot and body | `0.625rem` (10px) |
+| `--sc-kit--radio-card--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+| `--sc-kit--radio-card--title--color` | Title color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--radio-card--title--font-size` | Title font size | `var(--sc-kit--font-size--md)` |
+| `--sc-kit--radio-card--title--font-weight` | Title font weight | `var(--sc-kit--font-weight--medium)` |
+| `--sc-kit--radio-card--description--color` | Description color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--radio-card--description--font-size` | Description font size | `var(--sc-kit--font-size--sm)` |
+| `--sc-kit--radio-card--description--line-height` | Description line height | `var(--sc-kit--line-height--sm)` |
+| `--sc-kit--radio-card--dot--size` | Dot width/height | `1.125rem` (18px) |
+| `--sc-kit--radio-card--dot--inner-size` | Inner dot width/height | `0.5rem` (8px) |
+| `--sc-kit--radio-card--dot--border-color` | Dot border color | per state |
+| `--sc-kit--radio-card--dot--background` | Dot background | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--radio-card--dot--inner-color` | Inner dot color (selected) | `var(--sc-kit--color--accent)` |
+-->
+
+<style>.radio-card {
+  --_card--background: var(--sc-kit--radio-card--background, var(--sc-kit--color--bg--panel));
+  --_card--border-color: var(--sc-kit--radio-card--border-color, var(--sc-kit--color--border--field));
+  --_card--border-color-hover: var(--sc-kit--radio-card--border-color--hover, var(--sc-kit--color--border--strong));
+  --_card--border-radius: var(--sc-kit--radio-card--border-radius, var(--sc-kit--radius--md));
+  --_card--padding-block: var(--sc-kit--radio-card--padding-block, var(--sc-kit--space--3));
+  --_card--padding-inline: var(--sc-kit--radio-card--padding-inline, 0.875rem);
+  --_card--gap: var(--sc-kit--radio-card--gap, 0.625rem);
+  --_card--focus-ring-color: var(--sc-kit--radio-card--focus-ring-color, var(--sc-kit--color--border--focus));
+  --_card--title-color: var(--sc-kit--radio-card--title--color, var(--sc-kit--color--text--primary));
+  --_card--title-font-size: var(--sc-kit--radio-card--title--font-size, var(--sc-kit--font-size--md));
+  --_card--title-font-weight: var(--sc-kit--radio-card--title--font-weight, var(--sc-kit--font-weight--medium));
+  --_card--description-color: var(--sc-kit--radio-card--description--color, var(--sc-kit--color--text--muted));
+  --_card--description-font-size: var(--sc-kit--radio-card--description--font-size, var(--sc-kit--font-size--sm));
+  --_card--description-line-height: var(--sc-kit--radio-card--description--line-height, var(--sc-kit--line-height--sm));
+  --_card--dot-size: var(--sc-kit--radio-card--dot--size, 1.125rem);
+  --_card--dot-inner-size: var(--sc-kit--radio-card--dot--inner-size, 0.5rem);
+  --_card--dot-border-color: var(--sc-kit--radio-card--dot--border-color, var(--sc-kit--color--border--strong));
+  --_card--dot-background: var(--sc-kit--radio-card--dot--background, var(--sc-kit--color--bg--field));
+  --_card--dot-inner-color: var(--sc-kit--radio-card--dot--inner-color, var(--sc-kit--color--accent));
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--_card--gap);
+  width: 100%;
+  padding-block: var(--_card--padding-block);
+  padding-inline: var(--_card--padding-inline);
+  text-align: left;
+  color: inherit;
+  background: var(--_card--background);
+  border: 1px solid var(--_card--border-color);
+  border-radius: var(--_card--border-radius);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.radio-card:hover:not(.radio-card--disabled):not(.radio-card--on) {
+  --sc-kit--radio-card--border-color: var(--_card--border-color-hover);
+  --sc-kit--radio-card--dot--border-color: var(--sc-kit--color--accent);
+}
+.radio-card:focus-visible {
+  outline: 2px solid var(--_card--focus-ring-color);
+  outline-offset: 2px;
+}
+.radio-card--on {
+  --sc-kit--radio-card--border-color: var(--sc-kit--color--accent);
+  --sc-kit--radio-card--background: var(--sc-kit--color--accent--softer);
+  --sc-kit--radio-card--dot--border-color: var(--sc-kit--color--accent);
+}
+.radio-card--disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.radio-card__dot {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_card--dot-size);
+  height: var(--_card--dot-size);
+  margin-top: 0.125rem;
+  background: var(--_card--dot-background);
+  border: 1.5px solid var(--_card--dot-border-color);
+  border-radius: var(--sc-kit--radius--circle);
+  transition: border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.radio-card__inner {
+  width: var(--_card--dot-inner-size);
+  height: var(--_card--dot-inner-size);
+  background: var(--_card--dot-inner-color);
+  border-radius: var(--sc-kit--radius--circle);
+}
+.radio-card__body {
+  display: inline-flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.radio-card__title {
+  color: var(--_card--title-color);
+  font-size: var(--_card--title-font-size);
+  font-weight: var(--_card--title-font-weight);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.radio-card__description {
+  color: var(--_card--description-color);
+  font-size: var(--_card--description-font-size);
+  line-height: var(--_card--description-line-height);
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}</style>

package/dist/ui/radio/cmp.radio-card.svelte.d.ts

@@ -0,0 +1,43 @@
+type Props = {
+    /** True when this card is the selected one in its group. Parent computes it. */
+    selected: boolean;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+    /** Accessible name override (forwarded to `aria-label`). Defaults to `title`. */
+    name?: string;
+    on?: {
+        change?: () => void;
+    };
+};
+/**
+ * RadioCard — a Radio rendered as a tappable card with a title and optional description. Use
+ * for high-stakes one-of-N selections where each option needs more explanation than a single
+ * label line (plan picker, account type, theme picker).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--radio-card--background` | Card background | per state |
+ * | `--sc-kit--radio-card--border-color` | Card border color | per state |
+ * | `--sc-kit--radio-card--border-color--hover` | Border color on hover (off state) | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--radio-card--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--radio-card--padding-block` | Vertical padding | `var(--sc-kit--space--3)` (12px) |
+ * | `--sc-kit--radio-card--padding-inline` | Horizontal padding | `0.875rem` (14px) |
+ * | `--sc-kit--radio-card--gap` | Gap between dot and body | `0.625rem` (10px) |
+ * | `--sc-kit--radio-card--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+ * | `--sc-kit--radio-card--title--color` | Title color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--radio-card--title--font-size` | Title font size | `var(--sc-kit--font-size--md)` |
+ * | `--sc-kit--radio-card--title--font-weight` | Title font weight | `var(--sc-kit--font-weight--medium)` |
+ * | `--sc-kit--radio-card--description--color` | Description color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--radio-card--description--font-size` | Description font size | `var(--sc-kit--font-size--sm)` |
+ * | `--sc-kit--radio-card--description--line-height` | Description line height | `var(--sc-kit--line-height--sm)` |
+ * | `--sc-kit--radio-card--dot--size` | Dot width/height | `1.125rem` (18px) |
+ * | `--sc-kit--radio-card--dot--inner-size` | Inner dot width/height | `0.5rem` (8px) |
+ * | `--sc-kit--radio-card--dot--border-color` | Dot border color | per state |
+ * | `--sc-kit--radio-card--dot--background` | Dot background | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--radio-card--dot--inner-color` | Inner dot color (selected) | `var(--sc-kit--color--accent)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/radio/cmp.radio.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">const { selected, label, disabled = false, title, name, on } = $props();
+const ariaLabel = $derived(typeof label === 'string' ? label : name);
+const handleClick = (event) => {
+    event.stopPropagation();
+    if (disabled || selected) {
+        return;
+    }
+    on?.change?.();
+};
+export {};
+</script>
+
+<label class="radio" class:radio--on={selected} class:radio--disabled={disabled} title={title}>
+  <button type="button" class="radio__dot" role="radio" aria-checked={selected} aria-label={ariaLabel} disabled={disabled} onclick={handleClick}>
+    {#if selected}<span class="radio__inner" aria-hidden="true"></span>{/if}
+  </button>
+  {#if typeof label === 'string'}
+    <span class="radio__label">{label}</span>
+  {:else if label}
+    <span class="radio__label">{@render label()}</span>
+  {/if}
+</label>
+
+<!--
+@component
+Radio (dot style) — one option in an N-of-1 exclusive group. The parent owns the group state
+and computes `selected` for each Radio; clicking fires `on.change()` so the parent can update
+its state to this option's value. Pair with `RadioCard` for option-card layouts.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--radio--size` | Dot width and height | `1rem` |
+| `--sc-kit--radio--border-color` | Border color | per state |
+| `--sc-kit--radio--border-color--hover` | Border color on hover (off state) | `var(--sc-kit--color--accent)` |
+| `--sc-kit--radio--background` | Dot background | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--radio--inner-color` | Inner dot color (selected) | `var(--sc-kit--color--accent)` |
+| `--sc-kit--radio--inner-size` | Inner dot diameter | `0.5rem` (8px) |
+| `--sc-kit--radio--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+| `--sc-kit--radio--gap` | Gap between dot and label | `var(--sc-kit--space--2)` |
+| `--sc-kit--radio--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |
+| `--sc-kit--radio--label--line-height` | Label line height | `var(--sc-kit--line-height--md)` |
+| `--sc-kit--radio--label--color` | Label color | `var(--sc-kit--color--text--primary)` |
+-->
+
+<style>.radio {
+  --_radio--size: var(--sc-kit--radio--size, 1rem);
+  --_radio--border-color: var(--sc-kit--radio--border-color, var(--sc-kit--color--border--strong));
+  --_radio--border-color-hover: var(--sc-kit--radio--border-color--hover, var(--sc-kit--color--accent));
+  --_radio--background: var(--sc-kit--radio--background, var(--sc-kit--color--bg--field));
+  --_radio--inner-color: var(--sc-kit--radio--inner-color, var(--sc-kit--color--accent));
+  --_radio--inner-size: var(--sc-kit--radio--inner-size, 0.5rem);
+  --_radio--focus-ring-color: var(--sc-kit--radio--focus-ring-color, var(--sc-kit--color--border--focus));
+  --_radio--gap: var(--sc-kit--radio--gap, var(--sc-kit--space--2));
+  --_radio--label-font-size: var(--sc-kit--radio--label--font-size, var(--sc-kit--font-size--md));
+  --_radio--label-line-height: var(--sc-kit--radio--label--line-height, var(--sc-kit--line-height--md));
+  --_radio--label-color: var(--sc-kit--radio--label--color, var(--sc-kit--color--text--primary));
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_radio--gap);
+  max-width: 100%;
+  cursor: pointer;
+  user-select: none;
+}
+.radio--on {
+  --sc-kit--radio--border-color: var(--sc-kit--color--accent);
+}
+.radio:hover:not(.radio--disabled):not(.radio--on) {
+  --sc-kit--radio--border-color: var(--_radio--border-color-hover);
+}
+.radio--disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.radio__dot {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_radio--size);
+  height: var(--_radio--size);
+  padding: 0;
+  background: var(--_radio--background);
+  border: 1.5px solid var(--_radio--border-color);
+  border-radius: var(--sc-kit--radius--circle);
+  cursor: inherit;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.radio__dot:focus-visible {
+  outline: 2px solid var(--_radio--focus-ring-color);
+  outline-offset: 2px;
+}
+.radio__inner {
+  width: var(--_radio--inner-size);
+  height: var(--_radio--inner-size);
+  background: var(--_radio--inner-color);
+  border-radius: var(--sc-kit--radius--circle);
+}
+.radio__label {
+  min-width: 0;
+  font-size: var(--_radio--label-font-size);
+  line-height: var(--_radio--label-line-height);
+  color: var(--_radio--label-color);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.radio__label :global([contenteditable]) {
+  user-select: text;
+}
+.radio__label {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

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

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** True when this radio is the selected one in its group. Parent computes it. */
+    selected: boolean;
+    /** Label: plain text or a snippet for rich content. */
+    label?: string | Snippet;
+    disabled?: boolean;
+    title?: string;
+    /** Accessible name fallback when `label` is a snippet (forwarded to `aria-label`). */
+    name?: string;
+    on?: {
+        change?: () => void;
+    };
+};
+/**
+ * Radio (dot style) — one option in an N-of-1 exclusive group. The parent owns the group state
+ * and computes `selected` for each Radio; clicking fires `on.change()` so the parent can update
+ * its state to this option's value. Pair with `RadioCard` for option-card layouts.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--radio--size` | Dot width and height | `1rem` |
+ * | `--sc-kit--radio--border-color` | Border color | per state |
+ * | `--sc-kit--radio--border-color--hover` | Border color on hover (off state) | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--radio--background` | Dot background | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--radio--inner-color` | Inner dot color (selected) | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--radio--inner-size` | Inner dot diameter | `0.5rem` (8px) |
+ * | `--sc-kit--radio--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+ * | `--sc-kit--radio--gap` | Gap between dot and label | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--radio--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |
+ * | `--sc-kit--radio--label--line-height` | Label line height | `var(--sc-kit--line-height--md)` |
+ * | `--sc-kit--radio--label--color` | Label color | `var(--sc-kit--color--text--primary)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './cmp.radio.svelte';
+export { default as RadioCard } from './cmp.radio-card.svelte';

package/dist/ui/radio/index.js

@@ -0,0 +1,2 @@
+export { default as Radio } from './cmp.radio.svelte';
+export { default as RadioCard } from './cmp.radio-card.svelte';

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

@@ -0,0 +1,283 @@
+<script lang="ts">import { AppTheme } from '../../core/theme';
+import { HtmlHelper } from '../../core/utils';
+import { InputEmojiPicker } from '../_internal/input-emoji-picker';
+import { HtmlBlock } from '../html-block';
+import { RichTextInputLocalization } from './rich-text-input-localization';
+import { addValidatedLinkButton } from './validated-link-button';
+import { onDestroy, onMount } from 'svelte';
+const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, autofocus = false, rows = 0, placeholder = '', options, conf, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const id = `ti-${crypto.randomUUID()}`;
+let elementRef = $state.raw(undefined);
+let toolbarRef = $state.raw(undefined);
+let editorRef = $state.raw(null);
+let lastVal;
+let everFocused = false;
+/** Insert an emoji at the current selection (or at the end if the editor was never focused). */
+const insertEmoji = (emojiChar) => {
+    if (!editorRef) {
+        return;
+    }
+    if (!everFocused) {
+        editorRef.selection.select(editorRef.getBody(), true);
+        editorRef.selection.collapse(false);
+    }
+    setTimeout(() => editorRef?.execCommand('mceInsertContent', false, emojiChar));
+};
+/** Imperative API via `bind:this`. */
+export const focus = () => editorRef?.focus();
+export const getContent = () => editorRef?.getContent() ?? '';
+export const setContent = (val) => {
+    if (!editorRef) {
+        return;
+    }
+    editorRef.setContent(val);
+    lastVal = val;
+};
+$effect(() => {
+    if (editorRef && lastVal !== value) {
+        setContent(value ?? '');
+    }
+});
+$effect(() => {
+    if (editorRef) {
+        editorRef.mode.set(disabled || readonly || inert ? 'readonly' : 'design');
+    }
+});
+const applyChange = (editor) => {
+    lastVal = editor.getContent();
+    on?.change?.(lastVal);
+};
+onMount(async () => {
+    const loc = new RichTextInputLocalization();
+    const { default: hugerte } = await import('hugerte');
+    await Promise.all([
+        import('hugerte/models/dom'),
+        import('hugerte/themes/silver'),
+        AppTheme.isDarkMode ? import('hugerte/skins/ui/oxide-dark/skin.js') : import('hugerte/skins/ui/oxide/skin.js'),
+        import('hugerte/skins/ui/oxide/content.inline.js'),
+        import('hugerte/icons/default'),
+        import('hugerte/plugins/advlist'),
+        import('hugerte/plugins/link'),
+        import('hugerte/plugins/lists'),
+        import('hugerte/plugins/table')
+    ]);
+    const initOptions = {
+        target: elementRef,
+        inline: true,
+        // Skin CSS is injected at build time via the `.js` imports above; `skin_url: 'default'`
+        // keeps HugeRTE's runtime skin pipeline happy (anything else either fetches a 404 or
+        // breaks toolbar rendering). `content_css: false` skips the redundant content-CSS
+        // fetch — inline mode renders into our host DOM, no iframe content CSS needed.
+        skin_url: 'default',
+        content_css: false,
+        fixed_toolbar_container: options?.fixedToolbarId ? `#${options.fixedToolbarId}` : undefined,
+        fixed_toolbar_container_target: options?.fixedToolbarId ? undefined : toolbarRef,
+        menubar: false,
+        auto_focus: autofocus ? id : undefined,
+        placeholder,
+        readonly: disabled || readonly || inert,
+        toolbar: 'undo redo | blocks | fontfamily fontsize | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | lineheight | table | validatedlink',
+        toolbar_persist: options?.persistToolbar,
+        plugins: ['advlist', 'link', 'lists', '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_family_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',
+        font_size_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,
+        paste_preprocess: (_, args) => {
+            if (args.internal) {
+                return;
+            }
+            const text = HtmlHelper.stripHtml(args.content);
+            const lines = text.split('\n');
+            args.content = lines.map((line) => `<p>${line || '&nbsp;'}</p>`).join('');
+        },
+        ...conf,
+        setup: (editor) => {
+            editorRef = editor;
+            editor.on('init', () => {
+                if (rows && editor.bodyElement) {
+                    const body = editor.bodyElement;
+                    const styles = getComputedStyle(body);
+                    const lineHeight = parseFloat(styles.lineHeight) || parseFloat(styles.fontSize) * 1.4;
+                    body.style.minHeight = `${lineHeight * rows}px`;
+                }
+                editor.on('change input undo redo', () => applyChange(editor));
+            });
+            editor.on('blur', () => {
+                HtmlHelper.clearSelection();
+                on?.blur?.();
+            });
+            editor.on('focus', () => {
+                everFocused = true;
+                on?.focus?.();
+            });
+            addValidatedLinkButton(editor, loc);
+            on?.mounted?.({ editor, insertEmoji });
+            if (typeof conf?.setup === 'function') {
+                conf.setup(editor);
+            }
+        }
+    };
+    await hugerte.init(initOptions);
+});
+onDestroy(() => {
+    editorRef?.destroy();
+    editorRef = null;
+});
+const onEmojiSelected = (emojiChar) => insertEmoji(emojiChar);
+</script>
+
+<div
+  class="rich-text-input rich-text-input--{size}"
+  class:rich-text-input--disabled={disabled}
+  class:rich-text-input--readonly={readonly}
+  class:rich-text-input--inert={inert}
+  class:rich-text-input--error={error}
+  class:rich-text-input--borderless={borderless}
+  aria-label={ariaLabel}
+  aria-describedby={ariaDescribedby}
+  aria-required={ariaRequired ? 'true' : undefined}>
+  <div class="rich-text-input__toolbar" bind:this={toolbarRef}></div>
+  <HtmlBlock>
+    <div class="rich-text-input__input" id={id} bind:this={elementRef}></div>
+  </HtmlBlock>
+  {#if emoji}
+    <span class="rich-text-input__emoji">
+      <InputEmojiPicker on={{ select: onEmojiSelected }} />
+    </span>
+  {/if}
+</div>
+
+<!--
+@component
+Rich text editor powered by HugeRTE (MIT fork of TinyMCE 6). Inline mode with a fixed
+toolbar container (the `<span class="rich-text-input__toolbar">` slot above the editor
+body, or an external host element addressed by `options.fixedToolbarId`). Imperative
+`focus()` / `getContent()` / `setContent(val)` exposed via `bind:this`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--rich-text-input--root--font-size` | Root font size (drives em-based sizing) | per size |
+| `--sc-kit--rich-text-input--width` | Container width | `100%` |
+| `--sc-kit--rich-text-input--min-height` | Minimum body height | `2em` |
+| `--sc-kit--rich-text-input--padding-block` | Vertical padding | `0.5em` |
+| `--sc-kit--rich-text-input--padding-inline` | Horizontal padding | `0.5em` |
+| `--sc-kit--rich-text-input--background` | Background color | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--rich-text-input--background--disabled` | Disabled background | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--rich-text-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--rich-text-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--rich-text-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+| `--sc-kit--rich-text-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--rich-text-input--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
+| `--sc-kit--rich-text-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | `var(--sc-kit--color--text--placeholder)` |
+-->
+
+<style>.rich-text-input {
+  --_rti--root-font-size: var(--sc-kit--rich-text-input--root--font-size, 1rem);
+  --_rti--padding-block: var(--sc-kit--rich-text-input--padding-block, 0.5em);
+  --_rti--padding-inline: var(--sc-kit--rich-text-input--padding-inline, 0.75em);
+  --_rti--width: var(--sc-kit--rich-text-input--width, 100%);
+  --_rti--min-height: var(--sc-kit--rich-text-input--min-height, 2em);
+  --_rti--background: var(--sc-kit--rich-text-input--background, var(--sc-kit--color--bg--field));
+  --_rti--background-disabled: var(--sc-kit--rich-text-input--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_rti--border-color: var(--sc-kit--rich-text-input--border-color, var(--sc-kit--color--border--field));
+  --_rti--border-color-hover: var(--sc-kit--rich-text-input--border-color--hover, var(--sc-kit--color--border--strong));
+  --_rti--border-color-error: var(--sc-kit--rich-text-input--border-color--error, var(--sc-kit--color--danger));
+  --_rti--border-radius: var(--sc-kit--rich-text-input--border-radius, var(--sc-kit--radius--sm));
+  --_rti--underline-color: var(--sc-kit--rich-text-input--underline-color, transparent);
+  --_rti--color: var(--sc-kit--rich-text-input--color, var(--sc-kit--color--text--primary));
+  --_rti--placeholder-color: var(--sc-kit--rich-text-input--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.rich-text-input:where(:hover), .rich-text-input:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.rich-text-input {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  width: var(--_rti--width);
+  max-width: 100%;
+  font-size: var(--_rti--root-font-size);
+  background: var(--_rti--background);
+  border: 1px solid var(--_rti--border-color);
+  border-radius: var(--_rti--border-radius);
+  color: var(--_rti--color);
+  cursor: text;
+  box-shadow: inset 0 -0.13em var(--_rti--underline-color);
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.rich-text-input--sm {
+  --sc-kit--rich-text-input--root--font-size: 0.8125rem;
+}
+.rich-text-input--md {
+  --sc-kit--rich-text-input--root--font-size: 0.875rem;
+}
+.rich-text-input--lg {
+  --sc-kit--rich-text-input--root--font-size: 1rem;
+}
+.rich-text-input:where(:hover) {
+  --sc-kit--rich-text-input--border-color: var(--_rti--border-color-hover);
+}
+.rich-text-input:where(:focus-within) {
+  --sc-kit--rich-text-input--underline-color: var(--sc-kit--color--accent);
+}
+.rich-text-input--error {
+  --sc-kit--rich-text-input--border-color: var(--_rti--border-color-error);
+  --sc-kit--rich-text-input--underline-color: var(--sc-kit--color--danger);
+}
+.rich-text-input--disabled, .rich-text-input--readonly, .rich-text-input--inert {
+  --sc-kit--rich-text-input--border-color: unset;
+  --sc-kit--rich-text-input--underline-color: unset;
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+  cursor: default;
+}
+.rich-text-input--disabled {
+  --sc-kit--rich-text-input--background: var(--_rti--background-disabled);
+  --sc-kit--rich-text-input--color: var(--sc-kit--color--text--muted);
+}
+.rich-text-input--borderless {
+  --sc-kit--rich-text-input--background: transparent;
+  --sc-kit--rich-text-input--border-color: transparent;
+  --sc-kit--rich-text-input--underline-color: transparent;
+  box-shadow: none;
+}
+.rich-text-input__toolbar {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+}
+.rich-text-input__input {
+  min-height: var(--_rti--min-height);
+  padding: var(--_rti--padding-block) var(--_rti--padding-inline);
+  background: transparent;
+  outline: none;
+}
+.rich-text-input :global(.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before) {
+  inset-inline-start: var(--_rti--padding-inline);
+  inset-block-start: var(--_rti--padding-block);
+  color: var(--_rti--placeholder-color);
+}
+.rich-text-input__emoji {
+  position: absolute;
+  inset-inline-end: 0.5rem;
+  inset-block-end: 0.25rem;
+}
+
+:global(.tox-hugerte-inline .tox-editor-header) {
+  border-radius: 0.375em !important;
+  overflow: hidden;
+}
+
+:global(.tox .tox-collection__item-label) {
+  white-space: nowrap;
+}</style>