@bayonai/rich-text-editor 0.1.2 → 1.0.0

package/dist/react/{BlockActionTool.d.ts → tools/BlockActionTool.d.ts}

@@ -1,5 +1,5 @@
 import type { PointerEvent } from "react";
-import type { BlockActionToolPlacement } from "./blockActionToolState";
+import { type BlockActionToolPlacement } from "../tools/blockActionToolState";
 type BlockActionToolProps = {
     activeBlockId: string | null;
     draggedBlockId: string | null;

package/dist/react/{BlockActionTool.js → tools/BlockActionTool.js}

@@ -1,13 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { CloseIcon, CopyIcon, CutIcon, DeleteIcon, DragHandleIcon, } from "./RichTextIcons.js";
+import { CloseIcon, CopyIcon, CutIcon, DeleteIcon, DragHandleIcon, } from "../icons/RichTextIcons.js";
+import { getBlockActionToolRenderTop, } from "../tools/blockActionToolState.js";
 export function BlockActionTool({ activeBlockId, draggedBlockId, onAction, onHoverChange, onPointerDragEnd, onPointerDragMove, onPointerDragStart, onToggleMenu, placement, }) {
     const menuOpen = activeBlockId === placement.blockId;
     const dragging = draggedBlockId === placement.blockId;
     const pointerStartRef = useRef(null);
     const suppressClickRef = useRef(false);
-    return (_jsxs("div", { className: `bayon-rte-block-tool${menuOpen ? " bayon-rte-block-tool--menu-open" : ""}`, "data-block-action-tool": placement.blockId, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => onHoverChange(false), style: { "--bayon-rte-block-tool-top": `${placement.top}px` }, children: [menuOpen ? (_jsx("button", { "aria-label": "Close block actions", className: "bayon-rte-icon-button bayon-rte-block-handle bayon-rte-block-handle--menu-open", onClick: () => onToggleMenu(placement.blockId), onMouseDown: (event) => event.preventDefault(), title: "Close block actions", type: "button", children: _jsx(CloseIcon, { size: 19 }) })) : (_jsx("button", { "aria-label": "Block actions", "aria-pressed": dragging, className: `bayon-rte-icon-button bayon-rte-block-handle${dragging ? " bayon-rte-block-handle--dragging" : ""}`, onClick: () => {
+    return (_jsxs("div", { className: `bayon-rte-block-tool${menuOpen ? " bayon-rte-block-tool--menu-open" : ""}${placement.blockType === "image" ? " bayon-rte-block-tool--image" : ""}`, "data-block-action-tool": placement.blockId, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => onHoverChange(false), style: {
+            "--bayon-rte-block-tool-left": `${placement.left}px`,
+            "--bayon-rte-block-tool-top": `${getBlockActionToolRenderTop(placement)}px`,
+        }, children: [menuOpen ? (_jsx("button", { "aria-label": "Close block actions", className: "bayon-rte-icon-button bayon-rte-block-handle bayon-rte-block-handle--menu-open", onClick: () => onToggleMenu(placement.blockId), onMouseDown: (event) => event.preventDefault(), title: "Close block actions", type: "button", children: _jsx(CloseIcon, { size: 19 }) })) : (_jsx("button", { "aria-label": "Block actions", "aria-pressed": dragging, className: `bayon-rte-icon-button bayon-rte-block-handle${dragging ? " bayon-rte-block-handle--dragging" : ""}`, onClick: () => {
                     if (suppressClickRef.current) {
                         suppressClickRef.current = false;
                         return;

package/dist/react/tools/LinkCreationInput.d.ts

@@ -0,0 +1,9 @@
+type LinkCreationInputProps = {
+    left: number;
+    onCancel: () => void;
+    onSubmit: (href: string) => void;
+    placement: "above" | "below";
+    top: number;
+};
+export declare function LinkCreationInput({ left, onCancel, onSubmit, placement, top, }: LinkCreationInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/tools/LinkCreationInput.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { CloseIcon, LinkIcon } from "../icons/RichTextIcons.js";
+// Renders the focused URL input used by selection link creation.
+export function LinkCreationInput({ left, onCancel, onSubmit, placement, top, }) {
+    const inputRef = useRef(null);
+    const [href, setHref] = useState("https://");
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    function handleSubmit(event) {
+        event.preventDefault();
+        submitHref();
+    }
+    function submitHref() {
+        const nextHref = href.trim();
+        if (!nextHref) {
+            return;
+        }
+        onSubmit(nextHref);
+    }
+    function guardButtonMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onCancel();
+        }
+    }
+    return (_jsxs("form", { "aria-label": "Create link", className: `bayon-rte-link-input bayon-rte-link-input--${placement}`, onSubmit: handleSubmit, style: {
+            "--bayon-rte-link-input-left": `${left}px`,
+            "--bayon-rte-link-input-top": `${top}px`,
+        }, children: [_jsx("input", { "aria-label": "Link URL", className: "bayon-rte-link-input__field", onChange: (event) => setHref(event.target.value), onKeyDown: handleKeyDown, placeholder: "Paste or type a URL", ref: inputRef, type: "url", value: href }), _jsx("button", { "aria-label": "Apply link", className: "bayon-rte-icon-button bayon-rte-link-input__action", onClick: submitHref, onMouseDown: guardButtonMouseDown, title: "Apply link", type: "button", children: _jsx(LinkIcon, { size: 16 }) }), _jsx("button", { "aria-label": "Cancel link", className: "bayon-rte-icon-button bayon-rte-link-input__action", onClick: onCancel, onMouseDown: guardButtonMouseDown, title: "Cancel link", type: "button", children: _jsx(CloseIcon, { size: 16 }) })] }));
+}

package/dist/react/{SelectionFormatToolbar.d.ts → tools/SelectionFormatToolbar.d.ts}

@@ -1,4 +1,4 @@
-import { BoldIcon, CodeIcon, ItalicIcon, LinkIcon, QuoteIcon, TitleIcon } from "./RichTextIcons";
+import { BoldIcon, CodeIcon, ItalicIcon, LinkIcon, QuoteIcon, TitleIcon } from "../icons/RichTextIcons";
 export declare const selectionActions: readonly [{
     readonly command: "bold";
     readonly icon: typeof BoldIcon;
@@ -28,7 +28,8 @@ export type SelectionCommand = (typeof selectionActions)[number]["command"];
 type SelectionFormatToolbarProps = {
     left: number;
     onAction: (command: SelectionCommand) => void;
+    placement: "above" | "below";
     top: number;
 };
-export declare function SelectionFormatToolbar({ left, onAction, top, }: SelectionFormatToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectionFormatToolbar({ left, onAction, placement, top, }: SelectionFormatToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/react/{SelectionFormatToolbar.js → tools/SelectionFormatToolbar.js}

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BoldIcon, CodeIcon, ItalicIcon, LinkIcon, QuoteIcon, TitleIcon, } from "./RichTextIcons.js";
+import { BoldIcon, CodeIcon, ItalicIcon, LinkIcon, QuoteIcon, TitleIcon, } from "../icons/RichTextIcons.js";
 export const selectionActions = [
     { command: "bold", icon: BoldIcon, label: "Bold" },
     { command: "italic", icon: ItalicIcon, label: "Italic" },
@@ -10,8 +10,8 @@ export const selectionActions = [
     { command: "code", icon: CodeIcon, label: "Code" },
 ];
 // Renders the floating toolbar used to format the current text selection.
-export function SelectionFormatToolbar({ left, onAction, top, }) {
-    return (_jsx("div", { className: "bayon-rte-toolbar", style: {
+export function SelectionFormatToolbar({ left, onAction, placement, top, }) {
+    return (_jsx("div", { className: `bayon-rte-toolbar bayon-rte-toolbar--${placement}`, style: {
             "--bayon-rte-toolbar-left": `${left}px`,
             "--bayon-rte-toolbar-top": `${top}px`,
         }, children: selectionActions.map(({ command, icon: Icon, label }, index) => (_jsx("button", { "aria-label": label, className: `bayon-rte-icon-button bayon-rte-toolbar__button${index === 3 ? " bayon-rte-toolbar__button--divider" : ""}`, onClick: () => onAction(command), onMouseDown: (event) => event.preventDefault(), title: label, type: "button", children: _jsx(Icon, { size: 18 }) }, command))) }));

package/dist/react/tools/SpecialBlockOption.d.ts

@@ -0,0 +1,9 @@
+import type { SpecialBlockAction } from "../tools/SpecialBlockTool";
+type SpecialBlockOptionProps = {
+    action: SpecialBlockAction;
+    disabled?: boolean;
+    onInsert: (action: SpecialBlockAction) => void;
+    title?: string;
+};
+export declare function SpecialBlockOption({ action, disabled, onInsert, title, }: SpecialBlockOptionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/tools/SpecialBlockOption.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Renders one selectable special-block action inside the insertion tool.
+export function SpecialBlockOption({ action, disabled = false, onInsert, title = action.label, }) {
+    const Icon = action.icon;
+    const label = disabled ? `${action.label} unavailable` : action.label;
+    return (_jsx("button", { "aria-label": label, className: "bayon-rte-icon-button bayon-rte-special-button", disabled: disabled, onClick: () => onInsert(action), onMouseDown: (event) => event.preventDefault(), title: title, type: "button", children: _jsx(Icon, { size: 18 }) }));
+}

package/dist/react/tools/SpecialBlockTool.d.ts

@@ -0,0 +1,91 @@
+import { type RichTextEditorEntitlements, type RichTextEditorFeatureId, type RichTextFeatureGate, type RichTextLockedFeatureMode } from "../../core/features";
+import { BulletListIcon, CodeIcon, DataObjectIcon, DividerIcon, ImageIcon, PasteIcon, QuoteIcon, TitleIcon, ToggleIcon } from "../icons/RichTextIcons";
+type PasteSpecialBlockAction = {
+    icon: typeof PasteIcon;
+    kind: "paste";
+    label: "Paste";
+    selectDefault: false;
+};
+type ImageUploadSpecialBlockAction = {
+    featureId: "image-upload";
+    fallbackHtml: string;
+    icon: typeof ImageIcon;
+    kind: "image-upload";
+    label: "Image";
+    selectDefault: true;
+};
+type InsertSpecialBlockAction = {
+    featureId?: RichTextEditorFeatureId;
+    focusPosition?: "start" | "end";
+    focusSelector?: string;
+    html: string;
+    icon: (typeof specialBlockIcons)[number];
+    label: string;
+    selectDefault: boolean;
+};
+declare const specialBlockIcons: readonly [typeof ImageIcon, typeof QuoteIcon, typeof TitleIcon, typeof BulletListIcon, typeof ToggleIcon, typeof CodeIcon, typeof DataObjectIcon, typeof DividerIcon];
+export type SpecialBlockAction = PasteSpecialBlockAction | ImageUploadSpecialBlockAction | InsertSpecialBlockAction;
+export declare const specialBlockActions: readonly [{
+    readonly icon: typeof PasteIcon;
+    readonly kind: "paste";
+    readonly label: "Paste";
+    readonly selectDefault: false;
+}, {
+    readonly featureId: "image-upload";
+    readonly fallbackHtml: "<figure data-placeholder=\"image\"><p>Image placeholder</p></figure>";
+    readonly icon: typeof ImageIcon;
+    readonly kind: "image-upload";
+    readonly label: "Image";
+    readonly selectDefault: true;
+}, {
+    readonly html: "<blockquote data-placeholder=\"quote\"></blockquote>";
+    readonly icon: typeof QuoteIcon;
+    readonly label: "Quote";
+    readonly selectDefault: true;
+}, {
+    readonly html: "<h2>Title</h2>";
+    readonly icon: typeof TitleIcon;
+    readonly label: "Title";
+    readonly selectDefault: true;
+}, {
+    readonly html: "<ul data-rich-text-children=\"\"><li data-rich-text-bullet=\"\"><div data-rich-text-row=\"\"><span data-bullet-marker=\"\" contenteditable=\"false\" aria-hidden=\"true\"></span><span data-bullet-label=\"\" data-placeholder=\"List item\"></span></div></li></ul>";
+    readonly icon: typeof BulletListIcon;
+    readonly label: "Bullet list";
+    readonly selectDefault: false;
+}, {
+    readonly focusPosition: "start";
+    readonly focusSelector: "[data-toggle-label]";
+    readonly html: "<ul data-rich-text-children=\"\"><li data-rich-text-toggle=\"\" data-toggle-collapsed=\"false\"><div data-rich-text-row=\"\"><button aria-label=\"Collapse toggle\" class=\"bayon-rte-toggle-button\" contenteditable=\"false\" data-toggle-collapse=\"\" title=\"Collapse toggle\" type=\"button\"><span class=\"bayon-rte-toggle-caret\" aria-hidden=\"true\"></span></button><span data-toggle-label=\"\" data-placeholder=\"Toggle title\"></span></div><div data-toggle-content=\"\" data-placeholder=\"Toggle content\"></div></li></ul>";
+    readonly icon: typeof ToggleIcon;
+    readonly label: "Toggle";
+    readonly selectDefault: false;
+}, {
+    readonly html: "<pre><code>Code block</code></pre>";
+    readonly icon: typeof CodeIcon;
+    readonly label: "Code block";
+    readonly selectDefault: true;
+}, {
+    readonly html: "<pre><code>Embedded HTML</code></pre>";
+    readonly icon: typeof DataObjectIcon;
+    readonly label: "Embedded HTML";
+    readonly selectDefault: true;
+}, {
+    readonly html: "<hr>";
+    readonly icon: typeof DividerIcon;
+    readonly label: "Divider";
+    readonly selectDefault: false;
+}];
+type SpecialBlockToolProps = {
+    features?: RichTextEditorEntitlements;
+    lockedFeatureMode?: RichTextLockedFeatureMode;
+    onFeatureGate?: (gate: RichTextFeatureGate) => void;
+    onHoverChange: (hovering: boolean) => void;
+    onInsert: (action: SpecialBlockAction) => void;
+    onOpenChange: (open: boolean) => void;
+    open: boolean;
+    toolHover: boolean;
+    top: number;
+    visible: boolean;
+};
+export declare function SpecialBlockTool({ features, lockedFeatureMode, onFeatureGate, onHoverChange, onInsert, onOpenChange, open, toolHover, top, visible, }: SpecialBlockToolProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/tools/SpecialBlockTool.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getRichTextFeatureAccess, } from "../../core/features.js";
+import { AddIcon, BulletListIcon, CloseIcon, CodeIcon, DataObjectIcon, DividerIcon, ImageIcon, PasteIcon, QuoteIcon, TitleIcon, ToggleIcon, } from "../icons/RichTextIcons.js";
+import { SpecialBlockOption } from "./SpecialBlockOption.js";
+const specialBlockIcons = [
+    ImageIcon,
+    QuoteIcon,
+    TitleIcon,
+    BulletListIcon,
+    ToggleIcon,
+    CodeIcon,
+    DataObjectIcon,
+    DividerIcon,
+];
+export const specialBlockActions = [
+    {
+        icon: PasteIcon,
+        kind: "paste",
+        label: "Paste",
+        selectDefault: false,
+    },
+    {
+        featureId: "image-upload",
+        fallbackHtml: '<figure data-placeholder="image"><p>Image placeholder</p></figure>',
+        icon: ImageIcon,
+        kind: "image-upload",
+        label: "Image",
+        selectDefault: true,
+    },
+    {
+        html: '<blockquote data-placeholder="quote"></blockquote>',
+        icon: QuoteIcon,
+        label: "Quote",
+        selectDefault: true,
+    },
+    {
+        html: "<h2>Title</h2>",
+        icon: TitleIcon,
+        label: "Title",
+        selectDefault: true,
+    },
+    {
+        html: '<ul data-rich-text-children=""><li data-rich-text-bullet=""><div data-rich-text-row=""><span data-bullet-marker="" contenteditable="false" aria-hidden="true"></span><span data-bullet-label="" data-placeholder="List item"></span></div></li></ul>',
+        icon: BulletListIcon,
+        label: "Bullet list",
+        selectDefault: false,
+    },
+    {
+        focusPosition: "start",
+        focusSelector: "[data-toggle-label]",
+        html: '<ul data-rich-text-children=""><li data-rich-text-toggle="" data-toggle-collapsed="false"><div data-rich-text-row=""><button aria-label="Collapse toggle" class="bayon-rte-toggle-button" contenteditable="false" data-toggle-collapse="" title="Collapse toggle" type="button"><span class="bayon-rte-toggle-caret" aria-hidden="true"></span></button><span data-toggle-label="" data-placeholder="Toggle title"></span></div><div data-toggle-content="" data-placeholder="Toggle content"></div></li></ul>',
+        icon: ToggleIcon,
+        label: "Toggle",
+        selectDefault: false,
+    },
+    {
+        html: "<pre><code>Code block</code></pre>",
+        icon: CodeIcon,
+        label: "Code block",
+        selectDefault: true,
+    },
+    {
+        html: "<pre><code>Embedded HTML</code></pre>",
+        icon: DataObjectIcon,
+        label: "Embedded HTML",
+        selectDefault: true,
+    },
+    {
+        html: "<hr>",
+        icon: DividerIcon,
+        label: "Divider",
+        selectDefault: false,
+    },
+];
+// Renders the floating insertion control for image, quote, title, code, and divider blocks.
+export function SpecialBlockTool({ features, lockedFeatureMode = "hide", onFeatureGate, onHoverChange, onInsert, onOpenChange, open, toolHover, top, visible, }) {
+    const actionItems = specialBlockActions
+        .map((action) => ({
+        access: getSpecialBlockActionAccess(features, action),
+        action,
+    }))
+        .filter((item) => item.access.enabled ||
+        !hasSpecialBlockActionFeature(item.action) ||
+        lockedFeatureMode === "disabled");
+    return (_jsxs("div", { "aria-hidden": !visible, className: `bayon-rte-special-tool${visible ? " bayon-rte-special-tool--visible" : ""}`, onMouseEnter: () => onHoverChange(true), onMouseLeave: () => {
+            onHoverChange(false);
+            onOpenChange(false);
+        }, style: { "--bayon-rte-special-tool-top": `${top}px` }, children: [_jsx("button", { "aria-label": open ? "Close special blocks" : "Add special block", "aria-expanded": open, className: "bayon-rte-icon-button bayon-rte-special-button bayon-rte-special-toggle", onClick: () => onOpenChange(!open), style: {
+                    transform: visible
+                        ? "scale(1) rotate(0deg)"
+                        : "scale(0.84) rotate(-12deg)",
+                }, title: open ? "Close special blocks" : "Add special block", type: "button", children: open ? _jsx(CloseIcon, { size: 20 }) : _jsx(AddIcon, { size: 20 }) }), open ? (_jsx("div", { className: "bayon-rte-special-tool__actions", children: actionItems.map(({ access, action }) => {
+                    const disabled = !access.enabled;
+                    return (_jsx(SpecialBlockOption, { action: action, disabled: disabled, onInsert: disabled
+                            ? () => onFeatureGate?.({
+                                featureId: access.featureId,
+                                label: access.label,
+                                reason: access.reason,
+                            })
+                            : onInsert, title: disabled
+                            ? `${access.label}: ${getLockedFeatureTitle(access)}`
+                            : action.label }, action.label));
+                }) })) : null] }));
+}
+function getSpecialBlockActionAccess(features, action) {
+    return hasSpecialBlockActionFeature(action)
+        ? getRichTextFeatureAccess(features, action.featureId)
+        : { enabled: true };
+}
+function hasSpecialBlockActionFeature(action) {
+    return "featureId" in action;
+}
+function getLockedFeatureTitle(access) {
+    if (access.enabled) {
+        return access.label;
+    }
+    if (access.reason === "premium") {
+        return "Premium feature";
+    }
+    if (access.reason === "unavailable") {
+        return "Unavailable";
+    }
+    return "Disabled";
+}

package/dist/react/{TranscriptionControl.d.ts → tools/TranscriptionControl.d.ts}

@@ -3,6 +3,10 @@ type TranscriptionControlProps = {
     language?: string;
     onTranscript: (text: string) => void;
 };
+type SpeechRecognitionSupport = {
+    reason: "available" | "missing-api" | "mobile-safari";
+    supported: boolean;
+};
 export declare function TranscriptionControl({ disabled, language, onTranscript, }: TranscriptionControlProps): import("react/jsx-runtime").JSX.Element;
 export declare function getTranscriptionControlState({ disabled, errorMessage, lastInserted, recording, supported, }: {
     disabled: boolean;
@@ -16,4 +20,9 @@ export declare function getTranscriptionControlState({ disabled, errorMessage, l
     statusLabel: string | null;
     tone: "error" | "ready" | "recording" | "success" | "unavailable";
 };
+export declare function resolveSpeechRecognitionSupport({ hasSpeechRecognition, hasWebkitSpeechRecognition, userAgent, }: {
+    hasSpeechRecognition: boolean;
+    hasWebkitSpeechRecognition: boolean;
+    userAgent: string;
+}): SpeechRecognitionSupport;
 export {};

package/dist/react/{TranscriptionControl.js → tools/TranscriptionControl.js}

@@ -1,35 +1,36 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { MicIcon, StopIcon } from "./RichTextIcons.js";
+import { MicIcon, StopIcon } from "../icons/RichTextIcons.js";
 export function TranscriptionControl({ disabled = false, language, onTranscript, }) {
     const recognitionRef = useRef(null);
     const [errorMessage, setErrorMessage] = useState(null);
     const [lastInserted, setLastInserted] = useState(false);
     const [recording, setRecording] = useState(false);
-    const recognitionSupported = typeof window === "undefined" || Boolean(getSpeechRecognitionConstructor());
+    const recognitionSupport = getSpeechRecognitionSupport();
     const controlState = getTranscriptionControlState({
         disabled,
         errorMessage,
         lastInserted,
         recording,
-        supported: recognitionSupported,
+        supported: recognitionSupport.supported,
     });
     useEffect(() => {
         return () => {
-            recognitionRef.current?.stop();
+            stopRecognitionInstance(recognitionRef.current);
             recognitionRef.current = null;
         };
     }, []);
     function stopRecording() {
-        recognitionRef.current?.stop();
+        stopRecognitionInstance(recognitionRef.current);
         recognitionRef.current = null;
         setRecording(false);
         setLastInserted(false);
     }
     function startRecording() {
+        const support = getSpeechRecognitionSupport();
         const Recognition = getSpeechRecognitionConstructor();
-        if (!Recognition || disabled) {
+        if (!support.supported || !Recognition || disabled) {
             setErrorMessage("Browser transcription is unavailable.");
             setLastInserted(false);
             return;
@@ -59,8 +60,17 @@ export function TranscriptionControl({ disabled = false, language, onTranscript,
         recognitionRef.current = recognition;
         setErrorMessage(null);
         setLastInserted(false);
-        setRecording(true);
-        recognition.start();
+        try {
+            recognition.start();
+            setRecording(true);
+        }
+        catch (error) {
+            console.warn("[rich-text-editor] Failed to start browser transcription.", error);
+            recognitionRef.current = null;
+            setErrorMessage("Transcription stopped.");
+            setLastInserted(false);
+            setRecording(false);
+        }
     }
     return (_jsxs("div", { "aria-label": "Browser transcription", className: `bayon-rte-transcription bayon-rte-transcription--${controlState.tone}`, children: [_jsx("button", { "aria-label": controlState.buttonLabel, "aria-pressed": recording, className: `bayon-rte-icon-button bayon-rte-transcription__button${recording ? " bayon-rte-transcription__button--recording" : ""}`, disabled: controlState.disabled, onClick: () => (recording ? stopRecording() : startRecording()), title: controlState.buttonLabel, type: "button", children: recording ? _jsx(StopIcon, { size: 18 }) : _jsx(MicIcon, { size: 18 }) }), controlState.statusLabel ? (_jsxs("small", { className: "bayon-rte-transcription__status", role: "status", children: [_jsx("span", { "aria-hidden": "true", className: "bayon-rte-transcription__dot" }), controlState.statusLabel] })) : null] }));
 }
@@ -109,7 +119,58 @@ function getSpeechRecognitionConstructor() {
         return null;
     }
     const speechWindow = window;
-    return speechWindow.SpeechRecognition ?? speechWindow.webkitSpeechRecognition ?? null;
+    return (speechWindow.SpeechRecognition ??
+        speechWindow.webkitSpeechRecognition ??
+        null);
+}
+function getSpeechRecognitionSupport() {
+    if (typeof window === "undefined") {
+        return {
+            reason: "available",
+            supported: true,
+        };
+    }
+    const speechWindow = window;
+    return resolveSpeechRecognitionSupport({
+        hasSpeechRecognition: Boolean(speechWindow.SpeechRecognition),
+        hasWebkitSpeechRecognition: Boolean(speechWindow.webkitSpeechRecognition),
+        userAgent: window.navigator.userAgent,
+    });
+}
+export function resolveSpeechRecognitionSupport({ hasSpeechRecognition, hasWebkitSpeechRecognition, userAgent, }) {
+    if (!hasSpeechRecognition && !hasWebkitSpeechRecognition) {
+        return {
+            reason: "missing-api",
+            supported: false,
+        };
+    }
+    if (hasWebkitSpeechRecognition && isMobileSafariUserAgent(userAgent)) {
+        return {
+            reason: "mobile-safari",
+            supported: false,
+        };
+    }
+    return {
+        reason: "available",
+        supported: true,
+    };
+}
+function isMobileSafariUserAgent(userAgent) {
+    const normalizedUserAgent = userAgent.toLowerCase();
+    const isIosMobile = /\b(iphone|ipod|ipad)\b/.test(normalizedUserAgent) ||
+        (normalizedUserAgent.includes("macintosh") &&
+            normalizedUserAgent.includes("mobile"));
+    const isSafari = normalizedUserAgent.includes("safari");
+    const isOtherIosBrowser = /\b(crios|fxios|edgios|opios)\b/.test(normalizedUserAgent);
+    return isIosMobile && isSafari && !isOtherIosBrowser;
+}
+function stopRecognitionInstance(recognition) {
+    try {
+        recognition?.stop();
+    }
+    catch (error) {
+        console.warn("[rich-text-editor] Failed to stop browser transcription.", error);
+    }
 }
 function readFinalTranscript(event) {
     let text = "";

package/dist/react/tools/blockActionToolState.d.ts

@@ -0,0 +1,41 @@
+import type { BlockDropPlacement } from "../editor/blockActions";
+export type BlockActionToolPlacement = {
+    ancestorBlockIds?: string[];
+    blockId: string;
+    blockType?: string;
+    bottom: number;
+    depth?: number;
+    dropRole?: "content" | "row";
+    left: number;
+    top: number;
+    toolTop?: number;
+};
+export type BlockActionToolVisibilityState = {
+    activeBlockId: string | null;
+    draggedBlockId: string | null;
+    focusedBlockId: string | null;
+    hoveredBlockId: string | null;
+};
+export type PointerDragDropResult = {
+    dropTarget: {
+        placement: BlockDropPlacement;
+        targetBlockId: string;
+    };
+    status: "valid";
+} | {
+    dropTarget?: {
+        placement: BlockDropPlacement;
+        targetBlockId: string;
+    };
+    status: "invalid";
+};
+export declare function getBlockActionToolAnchorTop(blockType: string, top: number): number;
+export declare function getBlockActionToolRenderTop(placement: Pick<BlockActionToolPlacement, "toolTop" | "top">): number;
+export declare function getVisibleBlockActionToolPlacements(placements: BlockActionToolPlacement[], state: BlockActionToolVisibilityState): BlockActionToolPlacement[];
+export declare function getPointerDropTarget(placements: BlockActionToolPlacement[], draggedBlockId: string, pointerClientY: number, pointerClientX?: number): {
+    placement: BlockDropPlacement;
+    targetBlockId: string;
+} | null;
+export declare function getPointerDragDropResult(placements: BlockActionToolPlacement[], draggedBlockId: string, pointerClientY: number, pointerClientX?: number): PointerDragDropResult;
+export declare function getPointerHoverLaneBlockId(placements: BlockActionToolPlacement[], pointerTop: number, pointerLeft: number): string | null;
+export declare function getUniqueBlockActionToolPlacements(placements: BlockActionToolPlacement[]): BlockActionToolPlacement[];