@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/forms/RichTextEditor/RichTextEditor.theme.d.ts

@@ -1,61 +1,17 @@
-import { RichTextEditorTheme, ColorOption } from "./RichTextEditor.types";
+import type { RichTextEditorTheme } from "./RichTextEditor.types";
 /**
- * Legacy 10-entry color list — kept for backwards compat with consumers that
- * import `colorOptions` directly. The RichTextEditor's color picker now uses
- * the full Tailwind spectrum below.
- */
-export declare const colorOptions: ColorOption[];
-/**
- * Tailwind shade scale (same for every family). Used by both the picker
- * UI and the `getTailwindShadeTokens` utility below.
- */
-export declare const TAILWIND_SHADE_LABELS: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
-/**
- * The 22 Tailwind color families, in spectrum order.
- * Tailwind v4 exposes each shade as `--color-{family}-{shade}` automatically,
- * so we render swatches via `var(--color-...)` instead of hardcoding hex.
- */
-export declare const TAILWIND_COLOR_FAMILIES: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
-/**
- * Returns shade tokens for a given Tailwind family.
+ * RichTextEditor theme.
  *
- * @example
- * getTailwindShadeTokens("slate")
- * // → ["slate-50", "slate-100", "slate-200", ..., "slate-950"]
- */
-export declare const getTailwindShadeTokens: (family: string) => string[];
-/**
- * Resolves a Tailwind shade token to a CSS color value usable in inline
- * styles for swatch backgrounds. Reads `--color-{token}` directly; modern
- * browsers accept the resulting `oklch(...)` (or fallback `rgb()`) in
- * `background-color` without normalization.
+ * The bordered shell reuses `formsBaseTheme`'s inset-box-shadow border and state
+ * variants verbatim, so the editor's resting/hover/focus/invalid edges are
+ * pixel-identical to Input, Textarea and Select (CLAUDE.md §9).
  *
- * SSR-safe: returns `var(--color-{token})` literal when document is absent.
- */
-export declare const resolveTailwindColor: (token: string) => string;
-/**
- * Tailwind v4 only emits `--color-{family}-{shade}` CSS vars for shades that
- * appear as utility classes in source. Since the picker resolves them at
- * runtime via `var(...)`, we need every shade present. This sentinel string
- * lists `bg-{family}-{shade}` for the full 22×11 palette so Tailwind's
- * content scanner emits all CSS variables. Not used at runtime.
- */
-export declare const _TAILWIND_PALETTE_KEEPALIVE: string;
-/**
- * The two non-family base colors users always reach for, shown in their own row
- * above the spectrum.
- *
- * `value` is the resolved background color (used to paint the swatch);
- * `token` is the Tailwind shade fragment used to build the `text-{token}`
- * class applied to the editor content.
- */
-export declare const MONO_COLORS: {
-    name: string;
-    value: string;
-    token: string;
-}[];
-export declare const _RTE_CLASSES_KEEPALIVE: string;
-/**
- * Rich Text Editor theme - extends common forms base theme for consistency
+ * 🔴 No typography or colour maps here, and no Tailwind "keepalive" sentinel.
+ * The previous implementation applied formatting via runtime `classList.add` of
+ * utility classes (`font-bold`, `text-rose-500`, `leading-relaxed`), which meant
+ * stored HTML only rendered correctly inside a Tailwind build that had scanned a
+ * 242-entry sentinel string. Formatting is now semantic markup, styled by the
+ * `[&_x]:` descendant rules below — so the content is portable and the CSS is
+ * bounded.
  */
 export declare const richTextEditorTheme: RichTextEditorTheme;

package/dist/components/forms/RichTextEditor/RichTextEditor.theme.js

@@ -1,129 +1,71 @@
-"use client";
 import { formsBaseTheme } from '../forms.theme.js';
 
 /**
- * Tailwind shade scale (same for every family). Used by both the picker
- * UI and the `getTailwindShadeTokens` utility below.
- */
-const TAILWIND_SHADE_LABELS = [
-    "50",
-    "100",
-    "200",
-    "300",
-    "400",
-    "500",
-    "600",
-    "700",
-    "800",
-    "900",
-    "950",
-];
-/**
- * The 22 Tailwind color families, in spectrum order.
- * Tailwind v4 exposes each shade as `--color-{family}-{shade}` automatically,
- * so we render swatches via `var(--color-...)` instead of hardcoding hex.
- */
-const TAILWIND_COLOR_FAMILIES = [
-    "slate",
-    "gray",
-    "zinc",
-    "neutral",
-    "stone",
-    "red",
-    "orange",
-    "amber",
-    "yellow",
-    "lime",
-    "green",
-    "emerald",
-    "teal",
-    "cyan",
-    "sky",
-    "blue",
-    "indigo",
-    "violet",
-    "purple",
-    "fuchsia",
-    "pink",
-    "rose",
-];
-/**
- * Returns shade tokens for a given Tailwind family.
+ * RichTextEditor theme.
  *
- * @example
- * getTailwindShadeTokens("slate")
- * // → ["slate-50", "slate-100", "slate-200", ..., "slate-950"]
- */
-const getTailwindShadeTokens = (family) => TAILWIND_SHADE_LABELS.map((shade) => `${family}-${shade}`);
-/**
- * Resolves a Tailwind shade token to a CSS color value usable in inline
- * styles for swatch backgrounds. Reads `--color-{token}` directly; modern
- * browsers accept the resulting `oklch(...)` (or fallback `rgb()`) in
- * `background-color` without normalization.
+ * The bordered shell reuses `formsBaseTheme`'s inset-box-shadow border and state
+ * variants verbatim, so the editor's resting/hover/focus/invalid edges are
+ * pixel-identical to Input, Textarea and Select (CLAUDE.md §9).
  *
- * SSR-safe: returns `var(--color-{token})` literal when document is absent.
- */
-const resolveTailwindColor = (token) => {
-    const cssVar = `--color-${token}`;
-    if (typeof window === "undefined")
-        return `var(${cssVar})`;
-    const resolved = getComputedStyle(document.documentElement)
-        .getPropertyValue(cssVar)
-        .trim();
-    return resolved || `var(${cssVar})`;
-};
-/**
- * The two non-family base colors users always reach for, shown in their own row
- * above the spectrum.
- *
- * `value` is the resolved background color (used to paint the swatch);
- * `token` is the Tailwind shade fragment used to build the `text-{token}`
- * class applied to the editor content.
- */
-const MONO_COLORS = [
-    { name: "white", value: "#ffffff", token: "white" },
-    { name: "black", value: "#000000", token: "black" },
-];
-/**
- * Rich Text Editor theme - extends common forms base theme for consistency
+ * 🔴 No typography or colour maps here, and no Tailwind "keepalive" sentinel.
+ * The previous implementation applied formatting via runtime `classList.add` of
+ * utility classes (`font-bold`, `text-rose-500`, `leading-relaxed`), which meant
+ * stored HTML only rendered correctly inside a Tailwind build that had scanned a
+ * 242-entry sentinel string. Formatting is now semantic markup, styled by the
+ * `[&_x]:` descendant rules below — so the content is portable and the CSS is
+ * bounded.
  */
 const richTextEditorTheme = {
-    // Base container styles - inherited from common form theme
     wrapperStyle: formsBaseTheme.wrapperStyle,
-    // Container with common input group style + RTE-specific overrides
-    containerStyle: `${formsBaseTheme.inputGroupBaseStyle} flex-col min-h-[120px] overflow-hidden`,
-    // Editor content area - extends common control base style
-    editorStyle: `${formsBaseTheme.controlBaseStyle} min-h-[100px] px-3 py-2 resize-none overflow-y-auto [&_p]:my-1 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_strong]:font-semibold [&_em]:italic [&_u]:underline data-[state=disabled]:cursor-not-allowed empty:before:content-[attr(data-placeholder)] empty:before:text-[var(--color-text-placeholder)] empty:before:pointer-events-none`,
-    // Toolbar styling (docked variant)
-    // `rounded-t-[var(--form-radius)]` matches the container's radius so the
-    // toolbar's own bg/backdrop-blur respects the top corners — prevents the
-    // 1px bleed past the parent's `overflow-hidden` clip in Safari/Chromium.
-    toolbarStyle: "flex items-center m-0.5 gap-0.5 p-0.5 rounded-[var(--form-radius)] dark:bg-[var(--color-surface)]/0",
-    // Toolbar styling (floating variant — selection-anchored)
-    floatingToolbarStyle: "flex items-center gap-1 p-1 rounded-xl border border-[var(--color-border)] backdrop-blur-md overflow-hidden",
-    // Toolbar button — single source of truth via data-[state=active]
-    // (aria-pressed remains as proper ARIA on toggle buttons, but styling is decoupled)
-    toolbarButtonStyle: "inline-flex items-center justify-center rounded-[calc(var(--radius-base)*0.85)] border border-transparent bg-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-secondary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:border-[var(--color-border)] data-[state=active]:shadow-inner",
-    // Dropdown surface (visual only — positioning handled at use site via portal)
-    dropdownStyle: "min-w-[120px] max-h-[18rem] overflow-y-auto py-1 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
-    // Dropdown item — uses data-[active=true] for selected state
-    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary-900)] data-[active=true]:dark:bg-[var(--color-primary-400)]/10 data-[active=true]:dark:text-[var(--color-primary-400)]",
-    // Separator between toolbar sections
-    separatorStyle: "w-px h-6 bg-[var(--color-border)] mx-1",
-    // Color picker layout — column of family rows, plus optional Recent + Mono rows
-    colorPickerStyle: "flex flex-col gap-1 p-2 w-fit",
-    // Color swatch button (original size + rounding)
-    colorSwatchStyle: "size-6 rounded-[calc(var(--radius-base)*0.75)] cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-1 data-[active=true]:ring-2 data-[active=true]:ring-[var(--color-primary)] data-[active=true]:ring-offset-1 border border-[var(--color-border)]",
-    // Size variants - use common form sizes for consistency
-    sizes: {
-        sm: `${formsBaseTheme.sizes.sm.text} min-h-[80px]`,
-        md: `${formsBaseTheme.sizes.md.text} min-h-[120px]`,
-        lg: `${formsBaseTheme.sizes.lg.text} min-h-[160px]`,
+    // The shell is a content-bearing container, so its radius is CAPPED (§3) — it
+    // must not scale uncapped with --radius-base the way a control does.
+    containerStyle: "relative flex flex-col overflow-hidden bg-[var(--field-fill)] " +
+        "rounded-[min(calc(var(--radius-base)*1.5),var(--surface-radius-cap-sm))] " +
+        "shadow-[inset_0_0_0_1px_var(--color-border)] " +
+        "focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
+        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 " +
+        "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
+        "transition-[box-shadow] duration-[var(--motion-duration-fast)] " +
+        "dark:focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-500)] " +
+        "dark:focus-within:ring-[var(--color-primary-500)]/20",
+    containerStates: {
+        default: "",
+        disabled: formsBaseTheme.states.disabled,
+        invalid: formsBaseTheme.states.invalid,
+    },
+    toolbarStyle: "flex flex-wrap items-center gap-1 p-1.5 " +
+        "border-b border-[var(--color-border)]",
+    // Descendant rules style the semantic markup the editor produces. This is the
+    // ONLY place editor content is styled — nothing is written into the HTML.
+    editorStyle: "w-full overflow-y-auto outline-none text-[var(--color-text-primary)] " +
+        "focus:outline-none " +
+        "[&_h1]:text-2xl [&_h1]:font-semibold [&_h1]:mb-2 " +
+        "[&_h2]:text-xl [&_h2]:font-semibold [&_h2]:mb-2 " +
+        "[&_h3]:text-lg [&_h3]:font-semibold [&_h3]:mb-1.5 " +
+        "[&_h4]:text-base [&_h4]:font-semibold [&_h4]:mb-1.5 " +
+        "[&_p]:mb-2 last:[&_p]:mb-0 " +
+        "[&_ul]:list-disc [&_ul]:pl-5 [&_ul]:mb-2 " +
+        "[&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:mb-2 " +
+        "[&_li]:mb-0.5 " +
+        "[&_a]:text-[var(--color-primary)] [&_a]:underline [&_a]:underline-offset-2 " +
+        "[&_blockquote]:border-l-2 [&_blockquote]:border-[var(--color-border-secondary)] " +
+        "[&_blockquote]:pl-3 [&_blockquote]:text-[var(--color-text-secondary)] [&_blockquote]:mb-2 " +
+        "[&_code]:rounded-[var(--radius-base)] [&_code]:bg-[var(--color-surface-sunken)] " +
+        "[&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[0.9em] " +
+        "[&_pre]:rounded-[min(calc(var(--radius-base)*1.5),var(--surface-radius-cap-xs))] " +
+        "[&_pre]:bg-[var(--color-surface-sunken)] [&_pre]:p-3 [&_pre]:mb-2 [&_pre]:overflow-x-auto",
+    editorSizes: {
+        sm: "px-[var(--form-px-sm)] py-[var(--form-py-sm)] text-[length:var(--form-text-size-sm)]/[var(--form-line-height-sm)]",
+        md: "px-[var(--form-px-md)] py-[var(--form-py-md)] text-[length:var(--form-text-size-md)]/[var(--form-line-height-md)]",
+        lg: "px-[var(--form-px-lg)] py-[var(--form-py-lg)] text-[length:var(--form-text-size-lg)]/[var(--form-line-height-lg)]",
     },
-    // State variants - inherited from common form theme
-    states: formsBaseTheme.states,
-    // Helper text styles - inherited from common form theme
-    helperText: formsBaseTheme.helperText,
+    separatorStyle: "mx-0.5 h-5 w-px shrink-0 bg-[var(--color-border)]",
+    // `:empty` alone is unreliable in a contentEditable (browsers leave a stray
+    // <br>), so the editor sets data-empty from its own value check.
+    placeholderStyle: "before:content-[attr(data-placeholder)] before:pointer-events-none " +
+        "before:absolute before:text-[var(--color-text-placeholder)]",
+    helperTextStyle: "mt-1.5 text-xs text-[var(--color-text-secondary)]",
+    errorTextStyle: "mt-1.5 text-xs text-[var(--color-danger)]",
 };
 
-export { MONO_COLORS, TAILWIND_COLOR_FAMILIES, TAILWIND_SHADE_LABELS, getTailwindShadeTokens, resolveTailwindColor, richTextEditorTheme };
+export { richTextEditorTheme };

package/dist/components/forms/RichTextEditor/RichTextEditor.types.d.ts

@@ -1,18 +1,11 @@
 import React from 'react';
-import type { SurfaceElevation } from '../../../theme/SurfaceContext';
 /**
- * Rich Text Editor component props
- * @property {RichTextEditorSize} size - The size of the editor
- * @property {RichTextEditorState} state - The state of the editor (default, disabled, invalid)
- * @property {string} label - Optional label text for the editor
- * @property {string} helperText - Optional helper text displayed below the editor
- * @property {string} value - The HTML content value
- * @property {function} onChange - Callback when content changes
- * @property {string} placeholder - Placeholder text when editor is empty
- * @property {boolean} required - Whether the editor is required
- * @property {number} minHeight - Minimum height of the editor in pixels
- * @property {number} maxHeight - Maximum height of the editor in pixels
- * @property {ToolbarConfig} toolbar - Toolbar configuration
+ * Rich Text Editor component props.
+ *
+ * 🔴 Per CLAUDE.md §9, `className`, `ref` and `...rest` all target the PRIMARY
+ * FUNCTIONAL ELEMENT — here the contentEditable surface — exactly as `className`
+ * targets the inner `<input>` on `Input`. The wrapper, bordered shell and toolbar
+ * each get their own explicit prop.
  */
 export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> {
     /** The size of the editor */
@@ -29,63 +22,53 @@ export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivEl
      * unaffected/still shown as normal otherwise.
      */
     errorMessage?: React.ReactNode;
-    /** The HTML content value */
+    /**
+     * The HTML content value. Always sanitized before it reaches the DOM.
+     *
+     * Serialized as portable semantic HTML (`<h2>`, `<strong>`, `<ul>`) with no
+     * framework classes or inline styles, so stored content renders identically
+     * outside this library.
+     */
     value?: string;
-    /** Callback when content changes */
+    /** Callback when content changes. Receives sanitized HTML. */
     onChange?: (value: string) => void;
     /** Placeholder text when editor is empty */
     placeholder?: string;
-    /** Additional class name for the editor */
+    /** Class name for the editable surface (the primary element). */
     className?: string;
+    /** Class name for the outer wrapper (label + field + helper text). */
+    wrapperClassName?: string;
+    /** Class name for the bordered editor shell (toolbar + editable surface). */
+    containerClassName?: string;
+    /** Class name for the toolbar. */
+    toolbarClassName?: string;
     /** Additional class name for the label */
     labelClassName?: string;
     /** Additional class name for the helper text */
     helperTextClassName?: string;
-    /** Additional class name for the wrapper */
-    wrapperClassName?: string;
-    /** Additional class name for the editor container */
-    editorClassName?: string;
     /** Whether the editor is required */
     required?: boolean;
-    /** Minimum height of the editor in pixels */
+    /** Minimum height of the editable surface in pixels */
     minHeight?: number;
-    /** Maximum height of the editor in pixels */
+    /** Maximum height of the editable surface in pixels */
     maxHeight?: number;
     /** Toolbar configuration */
     toolbar?: ToolbarConfig;
     /** Component-level theme overrides */
     theme?: RichTextEditorThemeOverrides;
     /**
-     * Custom list of font families shown by the `fontFamily` toolbar tool.
-     * If omitted, ships with a curated default set (system Default + 8 Google Fonts).
-     * Provide your own list when you self-host fonts or want a custom curation.
-     */
-    fontFamilies?: FontFamilyOption[];
-    /**
-     * Whether the editor should lazy-load Google Fonts when picked.
-     * Defaults to `true`. Set to `false` if you load fonts yourself
-     * (e.g. via `next/font` or a `<link>` in your app head) — the picker still
-     * applies the font, but no network request is fired.
-     */
-    loadFontsOnDemand?: boolean;
-    /**
-     * Optional HTML sanitizer function applied before setting innerHTML.
-     * Receives raw HTML string, must return sanitized HTML string.
-     * Recommended: pass DOMPurify.sanitize for robust XSS protection.
-     * If not provided, a basic built-in sanitizer strips script tags and on* event handlers.
+     * Optional HTML sanitizer, replacing the built-in one on every write path
+     * (`value`, paste, drop, and the value handed to `onChange`).
+     *
+     * The built-in sanitizer is a strict deny-by-default allowlist and is safe for
+     * content authored in this editor. If you render hostile third-party HTML,
+     * pass a hardened sanitizer instead.
      *
      * @example
      * import DOMPurify from 'dompurify';
      * <RichTextEditor sanitize={DOMPurify.sanitize} />
      */
     sanitize?: (html: string) => string;
-    /**
-     * Pin the floating toolbar / dropdown surface elevation rung (overrides the
-     * automatic relative lift) — a rung number (1–8) or a semantic alias.
-     */
-    elevation?: SurfaceElevation;
-    /** `false` opts out of the relative lift — paints at the floating surface's base rung. */
-    lift?: boolean;
 }
 export type RichTextEditorSize = 'sm' | 'md' | 'lg';
 export type RichTextEditorState = 'default' | 'disabled' | 'invalid';
@@ -95,107 +78,60 @@ export type RichTextEditorState = 'default' | 'disabled' | 'invalid';
 export interface ToolbarConfig {
     /** Whether to show the toolbar */
     show?: boolean;
-    /** Position of the toolbar */
-    position?: 'top' | 'floating';
-    /** Which tools to show in the toolbar */
+    /** Which tools to show, in order. Defaults to `DEFAULT_TOOLBAR_TOOLS`. */
     tools?: ToolbarTool[];
     /** Custom toolbar className */
     className?: string;
 }
 /**
- * Available toolbar tools
- */
-export type ToolbarTool = 'bold' | 'italic' | 'underline' | 'fontWeight' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'letterSpacing' | 'textColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'undo' | 'redo' | 'separator';
-/**
- * Font family option used by the RichTextEditor font picker.
- * - `key` is the stable identifier matched against the current selection.
- * - `family` is the canonical Google Fonts family name (used to build the load URL).
- *   Omit for system fonts (e.g. "Default" or "Sans") — they will not be lazy-loaded.
- * - `stack` is the CSS font-family value applied to the selection. Always include
- *   safe fallbacks so text remains readable while the font is loading.
- * - `weights` is the optional list of weights to request (defaults to all 9).
+ * Available toolbar tools.
+ *
+ * Deliberately semantic: this editor produces meaning (headings, lists, quotes),
+ * not typography. Font family/size/weight/colour controls were removed — they
+ * forced formatting to serialize as framework utility classes, which made stored
+ * content unrenderable outside a Tailwind context.
  */
-export interface FontFamilyOption {
-    key: string;
-    label: string;
-    stack: string;
-    family?: string;
-    weights?: number[];
-}
-export type RichTextFontSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-export type RichTextFontWeightKey = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
-export type RichTextLineHeightKey = 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
-export type RichTextLetterSpacingKey = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
+export type ToolbarTool = 'blockStyle' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'link' | 'bulletList' | 'orderedList' | 'blockquote' | 'code' | 'clearFormat' | 'undo' | 'redo' | 'separator';
+/** Block-level style applied to the selection's containing block. */
+export type BlockStyle = 'paragraph' | 'h1' | 'h2' | 'h3' | 'h4';
 /**
- * Text formatting state
+ * The formatting active at the current selection.
+ *
+ * Read by walking the selection's ancestors (see `editorState.ts`) rather than
+ * via `document.queryCommandState`, which is unreliable for block-level state.
  */
 export interface FormattingState {
     bold: boolean;
     italic: boolean;
     underline: boolean;
-    textAlign: 'left' | 'center' | 'right' | 'justify';
-    fontSize: RichTextFontSizeKey;
-    fontWeight: RichTextFontWeightKey;
-    fontFamily: string;
-    lineHeight: RichTextLineHeightKey;
-    letterSpacing: RichTextLetterSpacingKey;
-    textColor: string;
+    strikethrough: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    blockquote: boolean;
+    code: boolean;
+    /** `href` of the anchor containing the selection, or `null`. */
+    link: string | null;
+    block: BlockStyle;
 }
-/**
- * Color palette for text color picker
- */
-export interface ColorOption {
-    label: string;
-    value: string;
-    className: string;
-}
-/**
- * Theme overrides for the RichTextEditor component
- */
 export interface RichTextEditorThemeOverrides {
-    /** Base wrapper style */
     wrapperStyle?: string;
-    /** Editor container style */
     containerStyle?: string;
-    /** ContentEditable element style */
-    editorStyle?: string;
-    /** Toolbar container style (docked variant) */
     toolbarStyle?: string;
-    /** Floating toolbar container style (selection-anchored variant) */
-    floatingToolbarStyle?: string;
-    /** Toolbar button style */
-    toolbarButtonStyle?: string;
-    /** Size variants */
-    sizes?: Partial<Record<RichTextEditorSize, string>>;
-    /** State variants */
-    states?: {
-        default?: string;
-        disabled?: string;
-        invalid?: string;
-    };
-    /** Helper text style */
-    helperText?: string;
+    editorStyle?: string;
+    separatorStyle?: string;
+    placeholderStyle?: string;
+    helperTextStyle?: string;
+    errorTextStyle?: string;
 }
-/**
- * Complete theme structure for RichTextEditor component
- */
 export interface RichTextEditorTheme {
     wrapperStyle: string;
     containerStyle: string;
-    editorStyle: string;
+    containerStates: Record<RichTextEditorState, string>;
     toolbarStyle: string;
-    floatingToolbarStyle: string;
-    toolbarButtonStyle: string;
-    dropdownStyle: string;
-    dropdownItemStyle: string;
+    editorStyle: string;
+    editorSizes: Record<RichTextEditorSize, string>;
     separatorStyle: string;
-    colorPickerStyle: string;
-    colorSwatchStyle: string;
-    sizes: Record<RichTextEditorSize, string>;
-    states: {
-        default: string;
-        disabled: string;
-        invalid: string;
-    };
-    helperText: string;
+    placeholderStyle: string;
+    helperTextStyle: string;
+    errorTextStyle: string;
 }

package/dist/components/forms/RichTextEditor/RichTextLinkField.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface RichTextLinkFieldProps {
+    /** Existing href when editing a link, `null` when creating one. */
+    initialHref: string | null;
+    onApply: (href: string) => void;
+    onRemove: () => void;
+    onCancel: () => void;
+    className?: string;
+}
+/**
+ * Inline link editor, revealed under the toolbar.
+ *
+ * Deliberately NOT a portaled popover: this row appears while the user's text
+ * selection must stay intact, and an anchored overlay adds focus-restore and
+ * placement problems for no benefit at this size. The row takes focus on open
+ * and returns it to the editor when it closes.
+ */
+export declare const RichTextLinkField: React.FC<RichTextLinkFieldProps>;

package/dist/components/forms/RichTextEditor/RichTextLinkField.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { Check, Trash, X } from '@phosphor-icons/react';
+import { Button } from '../../core/Button/Button.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Inline link editor, revealed under the toolbar.
+ *
+ * Deliberately NOT a portaled popover: this row appears while the user's text
+ * selection must stay intact, and an anchored overlay adds focus-restore and
+ * placement problems for no benefit at this size. The row takes focus on open
+ * and returns it to the editor when it closes.
+ */
+const RichTextLinkField = ({ initialHref, onApply, onRemove, onCancel, className, }) => {
+    const [href, setHref] = useState(initialHref !== null && initialHref !== void 0 ? initialHref : "");
+    const inputRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+    }, []);
+    const apply = () => {
+        const trimmed = href.trim();
+        if (trimmed)
+            onApply(trimmed);
+        else
+            onCancel();
+    };
+    return (jsxs("div", { className: cn("flex items-center gap-1.5 border-b border-[var(--color-border)] p-1.5", className), children: [jsx(Input, { ref: inputRef, size: "sm", type: "url", value: href, placeholder: "https://example.com", "aria-label": "Link URL", inputGroupClassName: "flex-1", onValueChange: setHref, onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        apply();
+                    }
+                    else if (event.key === "Escape") {
+                        event.preventDefault();
+                        onCancel();
+                    }
+                } }), jsx(Button, { type: "button", iconOnly: true, size: "sm", variant: "ghost", color: "mono", "aria-label": "Apply link", iconStart: jsx(Check, {}), onClick: apply }), initialHref !== null && (jsx(Button, { type: "button", iconOnly: true, size: "sm", variant: "ghost", color: "danger", "aria-label": "Remove link", iconStart: jsx(Trash, {}), onClick: onRemove })), jsx(Button, { type: "button", iconOnly: true, size: "sm", variant: "ghost", color: "mono", "aria-label": "Cancel", iconStart: jsx(X, {}), onClick: onCancel })] }));
+};
+RichTextLinkField.displayName = "RichTextLinkField";
+
+export { RichTextLinkField };

package/dist/components/forms/RichTextEditor/RichTextToolbar.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { BlockStyle, FormattingState, RichTextEditorSize, ToolbarTool } from "./RichTextEditor.types";
+/** The compact default: block style, inline marks, links, lists, history. */
+export declare const DEFAULT_TOOLBAR_TOOLS: ToolbarTool[];
+export interface RichTextToolbarProps {
+    tools: ToolbarTool[];
+    formatting: FormattingState;
+    disabled: boolean;
+    size: RichTextEditorSize;
+    className?: string;
+    /** Invoked for every button-shaped tool. */
+    onCommand: (tool: Exclude<ToolbarTool, "blockStyle" | "separator">) => void;
+    onBlockChange: (block: BlockStyle) => void;
+}
+export declare const RichTextToolbar: React.FC<RichTextToolbarProps>;