@fiodos/web-core 0.1.0

package/dist/esm/orb/mountOrb.js

@@ -0,0 +1,691 @@
+/**
+ * Vanilla DOM orb — the framework-free floating assistant that Vue, Svelte and
+ * Angular mount through createFiodosAgent. It is UNIFIED with the reference
+ * (React Native QuickBite) and @fiodos/react:
+ *
+ *  - VISUAL: the rich orb (outward double border + glow, solid fill, brand mark /
+ *    logo, listening waveform, thinking spinner, speaking pulse) via `orbView`,
+ *    reusing the SAME @fiodos/core math — not a basic circle.
+ *  - CONFIG: reads the dashboard-published config (color/size/glow/logo/keyboard
+ *    chip/screen position) in real time via `watchPublishedConfig`, exactly like
+ *    the reference, instead of ignoring it.
+ *  - TEXT: a text bubble that STAYS OPEN after sending and shows the agent's
+ *    reply (the current exchange) with a busy state — fixing the bug where the
+ *    bar vanished and nothing answered. Typed turns are silent (reply is shown,
+ *    not spoken), matching the reference.
+ *  - CONFIRMATIONS: the same security model (manifest decides; strict phrase /
+ *    deliberate tap for payment-grade; loose "yes" never resolves strict).
+ */
+import { DEFAULT_ORB_SCREEN_POSITION, createWebOrbHaptics, resolveOrbLayerInsets, resolveOrbDeployment, snapOrbScreenPositionToSide, viewportPixelsToOrbScreenPosition, } from '@fiodos/core';
+import { buildKeyboardChip, createOrbVisual, DEFAULT_ORB_APPEARANCE, } from './orbView.js';
+import { watchPublishedConfig } from './publishedConfig.js';
+const STYLE_ID = 'fyodos-orb-styles';
+const CSS = `
+.fyodos-orb-root{position:fixed;display:inline-flex;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;touch-action:none;}
+.fyodos-orb-btn{appearance:none;border:none;background:transparent;padding:0;cursor:pointer;line-height:0;display:inline-flex;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
+.fyodos-orb-btn img{pointer-events:none;-webkit-user-drag:none;user-select:none;}
+.fyodos-orb-btn:focus-visible{outline:2px solid #8ab6ff;outline-offset:4px;border-radius:50%;}
+.fyodos-orb-anchor{position:relative;display:inline-flex;}
+.fyodos-bubble{position:absolute;display:flex;flex-direction:column;width:min(320px,calc(100vw - 48px));max-height:340px;overflow:hidden;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,0.28);border:1px solid rgba(160,180,220,0.22);animation:fyodos-fade-in .14s ease-out;}
+.fyodos-bubble-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;font-size:18px;line-height:18px;width:28px;height:28px;min-width:28px;min-height:28px;margin-top:-10px;margin-right:-10px;cursor:pointer;padding:0;opacity:.75;}
+.fyodos-bubble-user-row{display:flex;flex-direction:row;align-items:flex-start;gap:6px;}
+.fyodos-bubble-scroll{overflow-y:auto;padding:12px 14px 4px;display:flex;flex-direction:column;gap:6px;}
+.fyodos-bubble-user{flex:1;min-width:0;font-size:13px;line-height:18px;opacity:.75;}
+.fyodos-bubble-reply{font-size:15px;line-height:21px;white-space:pre-wrap;}
+.fyodos-bubble-busy{display:flex;gap:5px;padding:8px 14px;align-items:center;}
+.fyodos-bubble-busy span{width:6px;height:6px;border-radius:50%;opacity:.5;animation:fyodos-blink 1s infinite;}
+.fyodos-bubble-busy span:nth-child(2){animation-delay:.18s;}
+.fyodos-bubble-busy span:nth-child(3){animation-delay:.36s;}
+.fyodos-bubble-row{display:flex;gap:8px;align-items:flex-end;padding:8px 10px;border-top:1px solid rgba(160,180,220,0.18);}
+.fyodos-bubble-row input{flex:1;border:1px solid rgba(15,23,42,0.12);outline:none;border-radius:10px;padding:9px 11px;font-size:15px;}
+.fyodos-bubble-row button{appearance:none;border:none;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;font-size:17px;font-weight:700;line-height:1;color:#000;cursor:pointer;}
+@keyframes fyodos-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+@keyframes fyodos-blink{0%,100%{opacity:.25}50%{opacity:.9}}
+@keyframes fy-spin{to{transform:rotate(360deg)}}
+@keyframes fy-opulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
+.fyodos-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,6,12,0.6);}
+.fyodos-modal{width:min(420px,100%);border-radius:16px;padding:22px 24px;box-shadow:0 24px 60px rgba(0,0,0,0.5);}
+.fyodos-modal h3{margin:0 0 10px;font-size:17px;font-weight:600;}
+.fyodos-modal p{margin:0 0 14px;font-size:14px;line-height:1.5;}
+.fyodos-modal .fyodos-hint{font-size:12.5px;font-style:italic;opacity:.75;margin-bottom:16px;}
+.fyodos-modal-actions{display:flex;gap:10px;justify-content:flex-end;}
+.fyodos-btn-ghost{appearance:none;border:1px solid rgba(160,180,220,0.25);background:transparent;border-radius:999px;padding:10px 16px;font-size:13px;cursor:pointer;}
+.fyodos-btn-primary{appearance:none;border:none;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;color:#fff;cursor:pointer;}
+`;
+function ensureStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(STYLE_ID))
+        return;
+    const el = document.createElement('style');
+    el.id = STYLE_ID;
+    el.textContent = CSS;
+    document.head.appendChild(el);
+}
+function cornerToPosition(corner) {
+    switch (corner) {
+        case 'bottom-left':
+            return { x: 0, y: 1 };
+        case 'top-right':
+            return { x: 1, y: 0 };
+        case 'top-left':
+            return { x: 0, y: 0 };
+        case 'bottom-right':
+        default:
+            return { x: 1, y: 1 };
+    }
+}
+const DEFAULT_MODAL_THEME = {
+    cardBackgroundColor: '#0b0f1a',
+    cardBorderColor: 'rgba(160,180,220,0.2)',
+    titleColor: '#e7ecf7',
+    bodyColor: '#b9c4dd',
+};
+export function mountOrb(controller, options = {}) {
+    if (typeof document === 'undefined') {
+        return { unmount() { } };
+    }
+    ensureStyles();
+    const container = options.container ?? document.body;
+    const zIndex = options.zIndex ?? 2147483000;
+    const enableTextInput = options.enableTextInput !== false;
+    const usePublishedPosition = options.usePublishedPosition !== false;
+    const ui = controller.ui;
+    // Best-effort upfront mic-permission detection: when the browser reports the
+    // microphone as DENIED, flag it so the very first orb tap opens the keyboard
+    // directly (unified "mic off → keyboard" behaviour). Falls back to the speech
+    // error path on browsers without the Permissions API (Firefox/Safari).
+    if (controller.config.voice.isRecognitionAvailable()) {
+        const perms = navigator.permissions;
+        perms
+            ?.query?.({ name: 'microphone' })
+            .then((status) => {
+            controller.markVoiceBlocked(status.state === 'denied');
+            status.onchange = () => controller.markVoiceBlocked(status.state === 'denied');
+        })
+            .catch(() => {
+            /* Permissions API unsupported — rely on the speech-error fallback */
+        });
+    }
+    // Subtle haptic feedback on every relevant orb interaction (silent no-op on
+    // browsers without the Vibration API — desktop, iOS Safari).
+    const haptics = createWebOrbHaptics();
+    // ── Effective appearance: defaults ← published ← explicit option overrides ──
+    let publishedAppearance = null;
+    let chipTheme = null;
+    let modalTheme;
+    let screenPosition = options.corner
+        ? cornerToPosition(options.corner)
+        : { ...DEFAULT_ORB_SCREEN_POSITION };
+    function effectiveAppearance() {
+        const base = { ...DEFAULT_ORB_APPEARANCE, ...(publishedAppearance ?? {}) };
+        if (options.accent) {
+            base.accentColor = options.accent;
+            base.colorKey = 'custom';
+            base.backgroundColor = options.accent;
+            base.glowColor = options.accent;
+        }
+        if (options.size)
+            base.size = options.size;
+        return base;
+    }
+    // ── DOM scaffold ────────────────────────────────────────────────────────────
+    const root = document.createElement('div');
+    root.className = 'fyodos-orb-root';
+    root.style.zIndex = String(zIndex);
+    const anchor = document.createElement('div');
+    anchor.className = 'fyodos-orb-anchor';
+    const orbVisual = createOrbVisual(effectiveAppearance());
+    const btn = document.createElement('button');
+    btn.className = 'fyodos-orb-btn';
+    btn.type = 'button';
+    btn.setAttribute('aria-label', ui.orbLabel);
+    btn.appendChild(orbVisual.element);
+    anchor.appendChild(btn);
+    root.appendChild(anchor);
+    let chipEl = null;
+    container.appendChild(root);
+    // ── Position (dashboard position; user drag is SESSION-only, never persisted) ─
+    // The orb ALWAYS starts at the dashboard-published position on every load.
+    // `draggedPosition` overrides it only for the current session while the user
+    // drags it around; reloading resets to the dashboard position by design.
+    let draggedPosition = null;
+    function orbDiameterPx() {
+        return effectiveAppearance().size ?? DEFAULT_ORB_APPEARANCE.size;
+    }
+    function effectivePosition() {
+        return draggedPosition ?? screenPosition;
+    }
+    function reposition() {
+        const size = orbDiameterPx();
+        const insets = resolveOrbLayerInsets({
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight,
+            orbDiameter: size,
+            position: effectivePosition(),
+        });
+        const left = Math.max(8, window.innerWidth - insets.right - size);
+        const top = Math.max(8, window.innerHeight - insets.bottom - size);
+        root.style.left = `${left}px`;
+        root.style.top = `${top}px`;
+        root.style.right = '';
+        root.style.bottom = '';
+        applyDeployment();
+    }
+    // ── Smart deployment: the chip expands toward the FREE side beside the orb ───
+    // The conversation bubble is NOT positioned here — it is always anchored to the
+    // bottom of the (visual) viewport, centred, above the keyboard (see
+    // positionBubble), independent of where the orb sits.
+    function applyDeployment() {
+        const dep = resolveOrbDeployment(effectivePosition());
+        // Keyboard chip (vertically centred beside the orb, on the free side)
+        if (chipEl) {
+            chipEl.style.position = 'absolute';
+            chipEl.style.top = '50%';
+            chipEl.style.transform = 'translateY(-50%)';
+            if (dep.horizontal === 'left') {
+                chipEl.style.right = 'calc(100% + 10px)';
+                chipEl.style.left = '';
+            }
+            else {
+                chipEl.style.left = 'calc(100% + 10px)';
+                chipEl.style.right = '';
+            }
+        }
+    }
+    window.addEventListener('resize', reposition);
+    // Keep the conversation bar above the keyboard as the visual viewport resizes
+    // (keyboard open/close) or scrolls on mobile browsers.
+    const visualViewport = window.visualViewport;
+    const onViewportChange = () => {
+        if (bubbleOpen)
+            positionBubble();
+    };
+    visualViewport?.addEventListener('resize', onViewportChange);
+    visualViewport?.addEventListener('scroll', onViewportChange);
+    // ── Drag (mouse / touch via Pointer Events). Tap vs drag by movement gate. ───
+    const DRAG_THRESHOLD = 6;
+    let dragging = false;
+    let suppressClick = false;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let originLeft = 0;
+    let originTop = 0;
+    function onPointerDown(e) {
+        if (e.button != null && e.button !== 0)
+            return;
+        const rect = root.getBoundingClientRect();
+        originLeft = rect.left;
+        originTop = rect.top;
+        dragStartX = e.clientX;
+        dragStartY = e.clientY;
+        dragging = false;
+        try {
+            btn.setPointerCapture(e.pointerId);
+        }
+        catch {
+            /* capture best-effort */
+        }
+    }
+    function onPointerMove(e) {
+        if (!btn.hasPointerCapture?.(e.pointerId))
+            return;
+        const dx = e.clientX - dragStartX;
+        const dy = e.clientY - dragStartY;
+        if (!dragging && Math.hypot(dx, dy) < DRAG_THRESHOLD)
+            return;
+        dragging = true;
+        e.preventDefault();
+        const size = orbDiameterPx();
+        const margin = 8;
+        const maxLeft = window.innerWidth - margin - size;
+        const maxTop = window.innerHeight - margin - size;
+        const left = Math.min(maxLeft, Math.max(margin, originLeft + dx));
+        const top = Math.min(maxTop, Math.max(margin, originTop + dy));
+        root.style.left = `${left}px`;
+        root.style.top = `${top}px`;
+        root.style.right = '';
+        root.style.bottom = '';
+        draggedPosition = viewportPixelsToOrbScreenPosition({
+            centerX: left + size / 2,
+            centerY: top + size / 2,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight,
+            orbDiameter: size,
+        });
+        applyDeployment();
+    }
+    function onPointerUp(e) {
+        try {
+            btn.releasePointerCapture(e.pointerId);
+        }
+        catch {
+            /* release best-effort */
+        }
+        if (dragging) {
+            suppressClick = true;
+            dragging = false;
+            // AssistiveTouch-style: the orb only rests on the left/right edge. Keep
+            // the vertical position the user dropped at, snap x to the nearest side,
+            // and glide there smoothly (no hard jump).
+            draggedPosition = snapOrbScreenPositionToSide(draggedPosition ?? effectivePosition());
+            root.style.transition = 'left 220ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1)';
+            reposition();
+            window.setTimeout(() => {
+                root.style.transition = '';
+            }, 260);
+        }
+    }
+    btn.draggable = false;
+    btn.addEventListener('dragstart', (e) => e.preventDefault());
+    btn.addEventListener('pointerdown', onPointerDown);
+    btn.addEventListener('pointermove', onPointerMove);
+    btn.addEventListener('pointerup', onPointerUp);
+    btn.addEventListener('pointercancel', onPointerUp);
+    // `lostpointercapture` fires when capture is released — including IMPLICITLY
+    // when the pointer crosses into the browser chrome (tabs/address bar at the
+    // top), where the page never receives `pointerup`. Without this the orb stayed
+    // stranded mid-screen after dragging it into the top region (the "snap fails in
+    // the upper half" bug). The `if (dragging)` guard inside onPointerUp dedupes
+    // the normal release path (which fires both pointerup and lostpointercapture).
+    btn.addEventListener('lostpointercapture', onPointerUp);
+    // ── Text bubble ─────────────────────────────────────────────────────────────
+    let bubbleOpen = false;
+    // When the mic is denied/unavailable, tapping the orb still puts it in the
+    // SAME "active/listening" visual state and reveals the keyboard chip — the
+    // user is never blocked, text is always an open avenue (Change 1).
+    let micFallbackActive = false;
+    const bubble = document.createElement('div');
+    bubble.className = 'fyodos-bubble';
+    bubble.style.display = 'none';
+    // The conversation bar is always anchored to the bottom-centre of the visual
+    // viewport, just above the on-screen keyboard, regardless of the orb position
+    // (so it is never off-screen at the top nor skewed to one side). On mobile the
+    // visualViewport shrinks when the keyboard opens; we track that to stay above it.
+    function viewportBottomInset() {
+        const vv = window.visualViewport;
+        if (!vv)
+            return 0;
+        return Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+    }
+    function positionBubble() {
+        bubble.style.position = 'fixed';
+        bubble.style.left = '50%';
+        bubble.style.right = '';
+        bubble.style.top = '';
+        bubble.style.transform = 'translateX(-50%)';
+        bubble.style.bottom = `${viewportBottomInset() + 16}px`;
+        bubble.style.zIndex = String(zIndex + 5);
+    }
+    const exchangeScroll = document.createElement('div');
+    exchangeScroll.className = 'fyodos-bubble-scroll';
+    const userRow = document.createElement('div');
+    userRow.className = 'fyodos-bubble-user-row';
+    const userLine = document.createElement('div');
+    userLine.className = 'fyodos-bubble-user';
+    const closeBtn = document.createElement('button');
+    closeBtn.type = 'button';
+    closeBtn.className = 'fyodos-bubble-close';
+    closeBtn.textContent = '×';
+    closeBtn.setAttribute('aria-label', 'Close');
+    closeBtn.addEventListener('click', () => setBubble(false));
+    userRow.append(userLine, closeBtn);
+    const replyLine = document.createElement('div');
+    replyLine.className = 'fyodos-bubble-reply';
+    exchangeScroll.append(userRow, replyLine);
+    const busyRow = document.createElement('div');
+    busyRow.className = 'fyodos-bubble-busy';
+    busyRow.append(document.createElement('span'), document.createElement('span'), document.createElement('span'));
+    const inputRow = document.createElement('div');
+    inputRow.className = 'fyodos-bubble-row';
+    const textInput = document.createElement('input');
+    textInput.type = 'text';
+    textInput.placeholder = ui.textPlaceholder;
+    const sendBtn = document.createElement('button');
+    // Unified send affordance: an up-arrow glyph on the accent square (parity
+    // with the dashboard preview and every native SDK), not a text label.
+    sendBtn.textContent = '↑';
+    sendBtn.setAttribute('aria-label', ui.sendLabel);
+    inputRow.append(textInput, sendBtn);
+    bubble.append(exchangeScroll, busyRow, inputRow);
+    anchor.appendChild(bubble);
+    // Initial placement (after the bubble exists, so applyDeployment can lay it out).
+    reposition();
+    function applyBubbleTheme() {
+        const t = { ...DEFAULT_MODAL_THEME, ...(modalTheme ?? {}) };
+        const accent = modalTheme?.primaryButtonColor ?? effectiveAppearance().accentColor;
+        bubble.style.background = t.cardBackgroundColor;
+        bubble.style.borderColor = t.cardBorderColor;
+        if (modalTheme?.borderRadius != null)
+            bubble.style.borderRadius = `${modalTheme.borderRadius}px`;
+        userLine.style.color = t.bodyColor;
+        replyLine.style.color = t.titleColor;
+        closeBtn.style.color = t.bodyColor;
+        textInput.style.background = '#fff';
+        textInput.style.color = '#0f172a';
+        sendBtn.style.background = accent;
+        sendBtn.style.borderRadius = `${modalTheme?.sendButtonRadius ?? 10}px`;
+        busyRow.querySelectorAll('span').forEach((s) => {
+            s.style.background = accent;
+        });
+    }
+    function setBubble(open) {
+        bubbleOpen = open;
+        bubble.style.display = open ? 'flex' : 'none';
+        if (open) {
+            applyBubbleTheme();
+            positionBubble();
+            textInput.focus();
+        }
+        else {
+            // Closing the panel returns the orb to idle (also clears mic fallback).
+            micFallbackActive = false;
+        }
+        syncChip(controller.getState());
+    }
+    function submitText() {
+        // While a turn is in flight the button is a STOP button; never start a new
+        // turn from Enter until the current one is cancelled.
+        if (controller.getState().isBusy)
+            return;
+        const value = textInput.value.trim();
+        if (!value)
+            return;
+        haptics.trigger('send');
+        textInput.value = '';
+        // Silent turn: the reply is SHOWN in the bubble (not spoken), and the bubble
+        // STAYS OPEN. This is the unified, reference-matching behaviour.
+        void controller.submitTextTurn(value);
+    }
+    function openTextPanel() {
+        controller.cancelAll();
+        setBubble(true);
+    }
+    // ── Keyboard chip (rebuilt when theme changes / visibility toggles) ──────────
+    // Appears beside the ACTIVE orb — whether listening for real (voice granted)
+    // or in the mic-denied fallback — and always deploys toward the free side.
+    function syncChip(state) {
+        const show = enableTextInput &&
+            !bubbleOpen &&
+            (state.phase === 'listening' || micFallbackActive);
+        if (!show) {
+            if (chipEl) {
+                chipEl.remove();
+                chipEl = null;
+            }
+            return;
+        }
+        if (chipEl) {
+            applyDeployment();
+            return;
+        }
+        const appearance = effectiveAppearance();
+        chipEl = buildKeyboardChip({
+            theme: chipTheme ?? {},
+            accentColor: appearance.accentColor,
+            backgroundColor: appearance.backgroundColor,
+            label: ui.keyboardChipLabel,
+            onClick: () => {
+                haptics.trigger('keyboardChip');
+                openTextPanel();
+            },
+        });
+        anchor.appendChild(chipEl);
+        applyDeployment();
+    }
+    // ── Overlays (confirmation + consent) ────────────────────────────────────────
+    let overlayEl = null;
+    function clearOverlay() {
+        if (overlayEl) {
+            overlayEl.remove();
+            overlayEl = null;
+        }
+    }
+    function themedModal() {
+        const t = { ...DEFAULT_MODAL_THEME, ...(modalTheme ?? {}) };
+        const overlay = document.createElement('div');
+        overlay.className = 'fyodos-overlay';
+        overlay.style.zIndex = String(zIndex + 10);
+        const modal = document.createElement('div');
+        modal.className = 'fyodos-modal';
+        modal.style.background = t.cardBackgroundColor;
+        modal.style.border = `1px solid ${t.cardBorderColor}`;
+        modal.style.color = t.titleColor;
+        modal.setAttribute('role', 'dialog');
+        modal.setAttribute('aria-modal', 'true');
+        overlay.appendChild(modal);
+        return { overlay, modal };
+    }
+    function showConfirm(message, hint) {
+        clearOverlay();
+        const t = { ...DEFAULT_MODAL_THEME, ...(modalTheme ?? {}) };
+        const accent = modalTheme?.primaryButtonColor ?? effectiveAppearance().accentColor;
+        const { overlay, modal } = themedModal();
+        const h = document.createElement('h3');
+        h.textContent = ui.confirmTitle;
+        const p = document.createElement('p');
+        p.style.color = t.bodyColor;
+        p.textContent = message;
+        modal.append(h, p);
+        if (hint) {
+            const hintEl = document.createElement('div');
+            hintEl.className = 'fyodos-hint';
+            hintEl.style.color = t.bodyColor;
+            hintEl.textContent = hint;
+            modal.append(hintEl);
+        }
+        const actions = document.createElement('div');
+        actions.className = 'fyodos-modal-actions';
+        const cancel = document.createElement('button');
+        cancel.className = 'fyodos-btn-ghost';
+        cancel.style.color = t.bodyColor;
+        cancel.textContent = ui.cancelLabel;
+        cancel.onclick = () => controller.cancelPendingAction();
+        const confirm = document.createElement('button');
+        confirm.className = 'fyodos-btn-primary';
+        confirm.style.background = accent;
+        confirm.textContent = ui.confirmLabel;
+        confirm.onclick = () => void controller.confirmPendingAction();
+        actions.append(cancel, confirm);
+        modal.append(actions);
+        overlay.onclick = (e) => {
+            if (e.target === overlay)
+                controller.cancelPendingAction();
+        };
+        container.appendChild(overlay);
+        overlayEl = overlay;
+    }
+    function showConsent() {
+        clearOverlay();
+        const t = { ...DEFAULT_MODAL_THEME, ...(modalTheme ?? {}) };
+        const accent = modalTheme?.primaryButtonColor ?? effectiveAppearance().accentColor;
+        const { overlay, modal } = themedModal();
+        const h = document.createElement('h3');
+        h.textContent = ui.consentTitle;
+        const p = document.createElement('p');
+        p.style.color = t.bodyColor;
+        p.textContent = ui.consentBody;
+        const actions = document.createElement('div');
+        actions.className = 'fyodos-modal-actions';
+        const decline = document.createElement('button');
+        decline.className = 'fyodos-btn-ghost';
+        decline.style.color = t.bodyColor;
+        decline.textContent = ui.consentDecline;
+        decline.onclick = () => controller.declineConsent();
+        const accept = document.createElement('button');
+        accept.className = 'fyodos-btn-primary';
+        accept.style.background = accent;
+        accept.textContent = ui.consentAccept;
+        accept.onclick = () => void controller.acceptConsent();
+        actions.append(decline, accept);
+        modal.append(h, p, actions);
+        container.appendChild(overlay);
+        overlayEl = overlay;
+    }
+    // ── Event wiring ────────────────────────────────────────────────────────────
+    btn.onclick = () => {
+        // Swallow the click that ends a drag (so dragging never opens the orb).
+        if (suppressClick) {
+            suppressClick = false;
+            return;
+        }
+        // Unlock audio playback within this user gesture so the spoken reply is
+        // allowed/audible on mobile browsers (must happen before any await).
+        controller.primeAudio();
+        const state = controller.getState();
+        // Tapping the orb while it is processing/thinking CANCELS the in-flight turn
+        // (aborts the request, no reply is delivered) and returns the orb to idle.
+        if (state.showThinking) {
+            haptics.trigger('orbTap');
+            controller.cancelAll();
+            return;
+        }
+        haptics.trigger('orbTap');
+        if (bubbleOpen) {
+            setBubble(false);
+            return;
+        }
+        // `voiceAvailable` is dynamic: the Web Speech API may be present yet the mic
+        // denied/blocked, in which case we skip voice and go straight to the keyboard.
+        if (controller.voiceAvailable) {
+            micFallbackActive = false;
+            void controller.toggleListening();
+            return;
+        }
+        // No microphone: skip the intermediate "active + chip" step and open the
+        // keyboard + conversation bar DIRECTLY — text is the only useful channel,
+        // so tapping the orb goes straight to it (Change 2, unified across SDKs).
+        if (enableTextInput) {
+            micFallbackActive = false;
+            openTextPanel();
+            return;
+        }
+        void controller.toggleListening();
+    };
+    sendBtn.onclick = () => {
+        // Send (arrow) while idle; Stop (square) while a turn is processing — tapping
+        // it cancels the in-flight turn so the user can type/send another message.
+        if (controller.getState().isBusy) {
+            haptics.trigger('orbTap');
+            controller.cancelAll();
+            textInput.focus();
+            return;
+        }
+        submitText();
+    };
+    textInput.onkeydown = (e) => {
+        if (e.key === 'Enter')
+            submitText();
+        if (e.key === 'Escape')
+            setBubble(false);
+    };
+    if (!enableTextInput) {
+        if (chipEl)
+            chipEl.style.display = 'none';
+    }
+    // ── Render from controller state ─────────────────────────────────────────────
+    let lastConfirm = null;
+    let lastConsent = false;
+    let lastVoiceBlocked = false;
+    // Track phase transitions to fire haptics: start/stop listening + response.
+    let lastPhase = null;
+    function render(state) {
+        // Mic just became unusable mid-attempt (no Permissions API): fall back to the
+        // keyboard so the user always has a working channel.
+        if (state.voiceBlocked && !lastVoiceBlocked) {
+            lastVoiceBlocked = true;
+            if (enableTextInput && !bubbleOpen && !state.isBusy) {
+                openTextPanel();
+                return;
+            }
+        }
+        else if (!state.voiceBlocked) {
+            lastVoiceBlocked = false;
+        }
+        if (state.phase !== lastPhase) {
+            if (state.phase === 'listening')
+                haptics.trigger('listenStart');
+            else if (lastPhase === 'listening')
+                haptics.trigger('listenStop');
+            // Answer delivered: leaving "thinking" (to speaking for voice, or back to
+            // idle for a silent text reply) means the orb produced its response.
+            if (lastPhase === 'thinking')
+                haptics.trigger('response');
+            lastPhase = state.phase;
+        }
+        const visual = state.showThinking
+            ? 'thinking'
+            : state.showWaveform || micFallbackActive
+                ? 'listening'
+                : state.phase === 'speaking'
+                    ? 'speaking'
+                    : 'idle';
+        orbVisual.applyState(visual, state.volumeLevel);
+        // Text bubble: show the current exchange + busy state.
+        if (bubbleOpen) {
+            const ex = state.lastExchange;
+            exchangeScroll.style.display = 'flex';
+            userLine.textContent = ex?.userText ?? '';
+            replyLine.textContent = ex?.replyText ?? '';
+            replyLine.style.display = ex?.replyText ? 'block' : 'none';
+            busyRow.style.display = state.showThinking ? 'flex' : 'none';
+            // Send (arrow) ↔ Stop (square): while busy the action becomes "cancel".
+            const busy = state.isBusy;
+            sendBtn.textContent = busy ? '◼' : '↑';
+            sendBtn.setAttribute('aria-label', busy ? ui.cancelLabel : ui.sendLabel);
+            sendBtn.style.opacity = '1';
+            sendBtn.disabled = false;
+        }
+        syncChip(state);
+        if (state.confirmationMessage !== lastConfirm) {
+            lastConfirm = state.confirmationMessage;
+            if (state.confirmationMessage)
+                showConfirm(state.confirmationMessage, state.confirmationVoiceHint);
+            else if (!state.consentModalVisible)
+                clearOverlay();
+        }
+        if (state.consentModalVisible !== lastConsent) {
+            lastConsent = state.consentModalVisible;
+            if (state.consentModalVisible)
+                showConsent();
+            else if (!state.confirmationMessage)
+                clearOverlay();
+        }
+    }
+    const unsubscribe = controller.subscribe(render);
+    render(controller.getState());
+    // ── Live dashboard config ────────────────────────────────────────────────────
+    const stopWatch = watchPublishedConfig(controller, {
+        pollMs: options.appearancePollMs,
+        onChange: (config) => {
+            if (config) {
+                publishedAppearance = config.appearance;
+                chipTheme = config.keyboardChip;
+                modalTheme = config.modalTheme;
+                if (usePublishedPosition && config.screenPosition)
+                    screenPosition = config.screenPosition;
+            }
+            orbVisual.applyAppearance(effectiveAppearance());
+            reposition();
+            if (chipEl) {
+                chipEl.remove();
+                chipEl = null;
+            }
+            syncChip(controller.getState());
+            if (bubbleOpen)
+                applyBubbleTheme();
+        },
+    });
+    return {
+        unmount() {
+            unsubscribe();
+            stopWatch();
+            window.removeEventListener('resize', reposition);
+            visualViewport?.removeEventListener('resize', onViewportChange);
+            visualViewport?.removeEventListener('scroll', onViewportChange);
+            clearOverlay();
+            chipEl?.remove();
+            root.remove();
+        },
+    };
+}