@fiodos/web-core 0.1.12 → 0.1.15

package/dist/cjs/orb/mountOrb.js

@@ -30,8 +30,23 @@ const CSS = `
 .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{position:absolute;top:4px;right:6px;z-index:1;display:flex;align-items:center;justify-content:center;border:none;background:transparent;font-size:18px;line-height:18px;width:28px;height:28px;cursor:pointer;padding:0;opacity:.75;}
+.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;transition:width .25s cubic-bezier(0.22,1,0.36,1),max-height .25s cubic-bezier(0.22,1,0.36,1);cursor:zoom-in;}
+.fyodos-bubble--expanded{width:min(560px,calc(100vw - 32px));max-height:min(620px,75vh);cursor:auto;}
+.fyodos-bubble-user,.fyodos-bubble-reply{cursor:text;}
+.fyodos-bubble-row{cursor:default;}
+.fyodos-bubble--expanded .fyodos-bubble-scroll{padding:22px 24px 8px;gap:10px;}
+.fyodos-bubble--expanded .fyodos-bubble-exchanges{gap:14px;}
+.fyodos-bubble--expanded .fyodos-bubble-exchange{gap:9px;}
+.fyodos-bubble--expanded .fyodos-bubble-exchange:first-child .fyodos-bubble-user{padding-right:0;}
+.fyodos-bubble--expanded .fyodos-bubble-user{font-size:14.5px;line-height:21px;}
+.fyodos-bubble--expanded .fyodos-bubble-reply{font-size:17px;line-height:25px;}
+.fyodos-bubble--expanded .fyodos-bubble-row{padding:12px 16px;gap:10px;}
+.fyodos-bubble--expanded .fyodos-bubble-busy{padding:8px 24px;}
+.fyodos-bubble--expanded .fyodos-bubble-row input{padding:12px 14px;font-size:16px;}
+.fyodos-bubble--expanded .fyodos-bubble-mic,.fyodos-bubble--expanded .fyodos-bubble-row button{width:38px;height:38px;min-width:38px;font-size:19px;}
+.fyodos-bubble-close,.fyodos-bubble-unexpand{position:absolute;top:4px;z-index:1;display:flex;align-items:center;justify-content:center;border:none;background:transparent;font-size:18px;line-height:18px;width:28px;height:28px;cursor:pointer;padding:0;opacity:.75;}
+.fyodos-bubble-close{right:6px;}
+.fyodos-bubble-unexpand{right:38px;display:none;}
 .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;min-height:18px;scrollbar-width:none;-ms-overflow-style:none;}
 .fyodos-bubble-scroll::-webkit-scrollbar{display:none;width:0;height:0;}
@@ -198,12 +213,13 @@ function mountOrb(controller, options = {}) {
             const prompt = resolveCurrentBubblePrompt();
             openTextPanel(prompt
                 ? (0, core_1.bubblePromptToAffirmative)(prompt, {
-                    locale: controller.config.locale,
+                    locale: currentBubbleLocale(),
                     messages: controller.messages,
                 })
                 : undefined);
             return;
         }
+        userTriedVoice = true;
         void controller.toggleListening();
     });
     thoughtBubbleEl.addEventListener('keydown', (event) => {
@@ -373,10 +389,22 @@ function mountOrb(controller, options = {}) {
     btn.addEventListener('lostpointercapture', onPointerUp);
     // ── Text bubble ─────────────────────────────────────────────────────────────
     let bubbleOpen = false;
+    // Reduced (default) size stays exactly as before. Tapping any EMPTY area of
+    // the panel (not a message, not the input row, not a button — so text stays
+    // selectable/copyable) grows it to the expanded layout; shrinking back is an
+    // explicit tap on `unexpandBtn` next to the close button.
+    let bubbleExpanded = 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;
+    // True once the user actually ATTEMPTED voice (tapped the orb/bubble to
+    // listen). The voiceBlocked→keyboard fallback in render() must only fire for
+    // a mic that failed MID-ATTEMPT: the upfront Permissions-API detection also
+    // sets voiceBlocked at mount (e.g. the site has the mic permission denied),
+    // and without this guard the conversation panel would pop open on page load
+    // with zero interaction.
+    let userTriedVoice = false;
     const bubble = document.createElement('div');
     bubble.className = 'fyodos-bubble';
     bubble.style.display = 'none';
@@ -409,6 +437,19 @@ function mountOrb(controller, options = {}) {
     closeBtn.textContent = '×';
     closeBtn.setAttribute('aria-label', 'Close');
     closeBtn.addEventListener('click', () => setBubble(false));
+    // Collapse button — only shown while expanded, right next to the close
+    // button (same minimalist style). Tapping an empty area of the panel is
+    // what EXPANDS it; shrinking back is always an explicit, discoverable tap.
+    const unexpandBtn = document.createElement('button');
+    unexpandBtn.type = 'button';
+    unexpandBtn.className = 'fyodos-bubble-unexpand';
+    unexpandBtn.innerHTML =
+        '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7"></path></svg>';
+    unexpandBtn.setAttribute('aria-label', 'Collapse');
+    unexpandBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        setBubbleExpanded(false);
+    });
     // Loading row shown at the top while an older page of the session history
     // streams in (scroll-to-top pagination).
     const loaderRow = document.createElement('div');
@@ -432,6 +473,12 @@ function mountOrb(controller, options = {}) {
             signature.endsWith(renderedSignature);
         const fromBottom = exchangeScroll.scrollHeight - exchangeScroll.scrollTop;
         renderedSignature = signature;
+        // Theme colors INLINE at node creation: the embed lives inside arbitrary
+        // host pages (e.g. Shopify themes) whose CSS sets `color` on everything,
+        // so a freshly-rendered message must never wait for the next
+        // applyBubbleTheme() pass to become readable (it would inherit the host's
+        // ink — black on our dark panel — until the next config poll).
+        const t = { ...DEFAULT_MODAL_THEME, ...(modalTheme ?? {}) };
         exchangeList.replaceChildren();
         for (const ex of exchanges) {
             const block = document.createElement('div');
@@ -439,11 +486,13 @@ function mountOrb(controller, options = {}) {
             const user = document.createElement('div');
             user.className = 'fyodos-bubble-user';
             user.textContent = ex.userText;
+            user.style.color = t.bodyColor;
             block.append(user);
             if (ex.replyText) {
                 const reply = document.createElement('div');
                 reply.className = 'fyodos-bubble-reply';
                 reply.textContent = ex.replyText;
+                reply.style.color = t.titleColor;
                 block.append(reply);
             }
             exchangeList.append(block);
@@ -550,7 +599,8 @@ function mountOrb(controller, options = {}) {
         if (active) {
             micBtn.style.background = accent;
             micBtn.style.border = 'none';
-            micBtn.style.color = '#000';
+            // Ink readable on the (customizable) accent — dark accents need light ink.
+            micBtn.style.color = (0, core_1.fiodosInputInkColor)(accent);
             micBtn.style.borderRadius = sendRadius;
         }
         else {
@@ -562,8 +612,71 @@ function mountOrb(controller, options = {}) {
         micBtn.setAttribute('aria-label', active ? ui.micStopLabel : ui.micLabel);
         micBtn.title = active ? ui.micStopLabel : ui.micLabel;
     }
-    bubble.append(closeBtn, exchangeScroll, busyRow, inputRow);
+    bubble.append(closeBtn, unexpandBtn, exchangeScroll, busyRow, inputRow);
     anchor.appendChild(bubble);
+    function setBubbleExpanded(expanded) {
+        if (bubbleExpanded === expanded)
+            return;
+        bubbleExpanded = expanded;
+        bubble.classList.toggle('fyodos-bubble--expanded', expanded);
+        unexpandBtn.style.display = expanded ? 'flex' : 'none';
+        positionBubble();
+    }
+    // Tap-to-expand: a plain click on the panel grows it. Text selection is
+    // never broken: a drag-selection is a move (threshold guard), a double/
+    // triple-click word/paragraph selection cancels the pending expand (detail
+    // guard + delay), and any active selection blocks it. Controls (input row,
+    // buttons) never expand.
+    let bubbleTapX = 0;
+    let bubbleTapY = 0;
+    let pendingExpandTimer = null;
+    const TAP_MOVE_THRESHOLD = 8;
+    const hasActiveSelection = () => {
+        const selection = typeof window !== 'undefined' ? window.getSelection?.() : null;
+        return !!selection && !selection.isCollapsed && selection.toString().length > 0;
+    };
+    const cancelPendingExpand = () => {
+        if (pendingExpandTimer != null) {
+            window.clearTimeout(pendingExpandTimer);
+            pendingExpandTimer = null;
+        }
+    };
+    bubble.addEventListener('pointerdown', (e) => {
+        bubbleTapX = e.clientX;
+        bubbleTapY = e.clientY;
+    });
+    bubble.addEventListener('click', (e) => {
+        if (bubbleExpanded)
+            return;
+        const target = e.target;
+        if (target?.closest('.fyodos-bubble-row, .fyodos-bubble-close, .fyodos-bubble-unexpand, button, input, a')) {
+            return;
+        }
+        const moved = Math.hypot(e.clientX - bubbleTapX, e.clientY - bubbleTapY);
+        if (moved > TAP_MOVE_THRESHOLD)
+            return;
+        // Double/triple click is a word/paragraph selection gesture, never expand
+        // (it also cancels the pending expand from its own first click).
+        if (e.detail > 1) {
+            cancelPendingExpand();
+            return;
+        }
+        cancelPendingExpand();
+        const overText = !!target?.closest('.fyodos-bubble-user, .fyodos-bubble-reply');
+        if (!overText && !hasActiveSelection()) {
+            // Genuinely empty area, nothing selected — expand immediately.
+            setBubbleExpanded(true);
+            return;
+        }
+        // Over message text, or a selection may still be collapsing: expand after
+        // a short delay, re-checking the selection right before — a double-click's
+        // second click or a real selection cancels it.
+        pendingExpandTimer = window.setTimeout(() => {
+            pendingExpandTimer = null;
+            if (!hasActiveSelection())
+                setBubbleExpanded(true);
+        }, 280);
+    });
     // Initial placement (after the bubble exists, so applyDeployment can lay it out).
     reposition();
     function applyBubbleTheme() {
@@ -574,6 +687,7 @@ function mountOrb(controller, options = {}) {
         if (modalTheme?.borderRadius != null)
             bubble.style.borderRadius = `${modalTheme.borderRadius}px`;
         closeBtn.style.color = t.bodyColor;
+        unexpandBtn.style.color = t.bodyColor;
         exchangeList.querySelectorAll('.fyodos-bubble-user').forEach((node) => {
             node.style.color = t.bodyColor;
         });
@@ -585,6 +699,9 @@ function mountOrb(controller, options = {}) {
         textInput.style.color = (0, core_1.fiodosInputInkColor)(inputBg);
         textInput.style.setProperty('--fyodos-input-placeholder', (0, core_1.fiodosInputMutedInkColor)(inputBg));
         sendBtn.style.background = accent;
+        // The glyph (↑ / ◼) must stay readable on ANY published accent: dark ink
+        // on light accents, light ink on dark ones (never the hardcoded black).
+        sendBtn.style.color = (0, core_1.fiodosInputInkColor)(accent);
         sendBtn.style.borderRadius = `${modalTheme?.sendButtonRadius ?? 10}px`;
         syncMicButton();
         busyRow.querySelectorAll('span').forEach((s) => {
@@ -608,8 +725,18 @@ function mountOrb(controller, options = {}) {
             controller.resetBubbleWindow();
             // Closing the panel returns the orb to idle (also clears mic fallback).
             micFallbackActive = false;
+            // Always re-open at the reduced size.
+            cancelPendingExpand();
+            setBubbleExpanded(false);
         }
         syncChip(controller.getState());
+        // Re-resolve the thought bubble NOW: closing the panel must bring the
+        // screen-aware CTA back immediately. Nothing else is guaranteed to run
+        // right after close (controller state does not change on close, the route
+        // poll only fires on changes, the config poll every ~12s) — without this
+        // the orb sat "naked" until some unrelated event. Opening hides it (the
+        // resolver returns null while the panel is open), so one call covers both.
+        syncThoughtBubble(controller.getState());
     }
     function submitText() {
         // While a turn is in flight the button is a STOP button; never start a new
@@ -674,8 +801,22 @@ function mountOrb(controller, options = {}) {
         applyDeployment();
     }
     // ── Thought bubble (screen-aware CTA beside the orb) ─────────────────────────
+    // LIVE locale: re-read the host app's active language on every resolution so
+    // the bubble text (analyzer `bubblePrompts` translations) follows the app's
+    // language switcher without remounting. Falls back to the mount-time locale.
+    function currentBubbleLocale() {
+        try {
+            const live = controller.config.getLocale?.();
+            if (typeof live === 'string' && live.trim())
+                return live.trim();
+        }
+        catch {
+            /* live locale read is best-effort */
+        }
+        return controller.config.locale;
+    }
     function resolveCurrentBubblePrompt() {
-        return (0, core_1.resolveBubblePrompt)((0, core_1.matchRouteIntent)(currentRoute, controller.config.manifest.routes), controller.messages, { locale: controller.config.locale, actions: controller.config.manifest.actions });
+        return (0, core_1.resolveBubblePrompt)((0, core_1.matchRouteIntent)(currentRoute, controller.config.manifest.routes), controller.messages, { locale: currentBubbleLocale(), actions: controller.config.manifest.actions });
     }
     // Render the CTA on ONE line at its NATURAL size. When the phrase is too long
     // to fit the max width, scroll it (marquee, right-to-left, looping) instead of
@@ -710,29 +851,17 @@ function mountOrb(controller, options = {}) {
         track.appendChild(second);
         thoughtBubbleEl.appendChild(track);
     }
-    function applyThoughtBubbleTheme() {
+    function applyThoughtBubbleTheme(widthPx) {
         const t = bubbleTheme;
         const { fontPx, padH, approxHeight } = (0, core_1.resolveBubblePadding)(t);
-        const shapeCss = (0, core_1.bubbleShapeToCss)(t, approxHeight);
+        const shapeCss = (0, core_1.bubbleShapeToCss)(t, approxHeight, 1, widthPx);
         thoughtBubbleEl.style.fontSize = `${fontPx}px`;
         thoughtBubbleEl.style.height = `${approxHeight}px`;
         thoughtBubbleEl.style.padding = `0 ${padH}px`;
         thoughtBubbleEl.style.color = t.textColor;
         thoughtBubbleEl.style.background = t.backgroundColor;
         thoughtBubbleEl.style.border = `${t.borderWidth}px solid ${t.borderColor}`;
-        const setImportant = (prop, value) => {
-            if (!value) {
-                thoughtBubbleEl.style.removeProperty(prop);
-                return;
-            }
-            thoughtBubbleEl.style.setProperty(prop, value, 'important');
-        };
-        setImportant('border-radius', shapeCss.borderRadius);
-        setImportant('border-top-left-radius', shapeCss.borderTopLeftRadius);
-        setImportant('border-top-right-radius', shapeCss.borderTopRightRadius);
-        setImportant('border-bottom-left-radius', shapeCss.borderBottomLeftRadius);
-        setImportant('border-bottom-right-radius', shapeCss.borderBottomRightRadius);
-        setImportant('clip-path', shapeCss.clipPath);
+        (0, core_1.applyBubbleShapeCss)(thoughtBubbleEl, shapeCss);
     }
     function positionThoughtBubble() {
         const dep = (0, core_1.resolveOrbDeployment)(effectivePosition());
@@ -767,6 +896,11 @@ function mountOrb(controller, options = {}) {
         thoughtBubbleEl.style.display = 'flex';
         applyThoughtBubbleTheme();
         layoutThoughtContent(prompt);
+        if (bubbleTheme.shape === 'cloud') {
+            const widthPx = thoughtBubbleEl.offsetWidth;
+            if (widthPx > 0)
+                applyThoughtBubbleTheme(widthPx);
+        }
         positionThoughtBubble();
     }
     // ── Overlays (confirmation + consent) ────────────────────────────────────────
@@ -897,6 +1031,7 @@ function mountOrb(controller, options = {}) {
         // denied/blocked, in which case we skip voice and go straight to the keyboard.
         if (controller.voiceAvailable && voiceInputEnabled) {
             micFallbackActive = false;
+            userTriedVoice = true;
             void controller.toggleListening();
             return;
         }
@@ -908,6 +1043,7 @@ function mountOrb(controller, options = {}) {
             openTextPanel();
             return;
         }
+        userTriedVoice = true;
         void controller.toggleListening();
     };
     sendBtn.onclick = () => {
@@ -946,11 +1082,15 @@ function mountOrb(controller, options = {}) {
     // 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.
+        // Mic just became unusable MID-ATTEMPT (no Permissions API): fall back to
+        // the keyboard so the user always has a working channel. Guarded by
+        // userTriedVoice: the upfront permission detection also sets voiceBlocked
+        // right at mount (site-level mic denial), and that must NEVER auto-open
+        // the conversation panel on page load — the user did nothing yet; their
+        // first orb tap will route to the keyboard via the voiceAvailable check.
         if (state.voiceBlocked && !lastVoiceBlocked) {
             lastVoiceBlocked = true;
-            if (enableTextInput && !bubbleOpen && !state.isBusy) {
+            if (userTriedVoice && enableTextInput && !bubbleOpen && !state.isBusy) {
                 openTextPanel();
                 return;
             }
@@ -1019,9 +1159,11 @@ function mountOrb(controller, options = {}) {
     }
     const unsubscribe = controller.subscribe(render);
     render(controller.getState());
-    // Track the current route so the thought bubble re-resolves its CTA on
-    // navigation. No universal navigation event exists, so poll + listen to
-    // popstate / visibility for snappier updates.
+    // Track the current route AND the app's live locale so the thought bubble
+    // re-resolves its CTA on navigation and on language switches. No universal
+    // navigation/i18n event exists, so poll + listen to popstate / visibility
+    // for snappier updates.
+    let lastBubbleLocale = currentBubbleLocale();
     const readRoute = () => {
         let next = null;
         try {
@@ -1030,8 +1172,10 @@ function mountOrb(controller, options = {}) {
         catch {
             /* navigation read is best-effort */
         }
-        if (next !== currentRoute) {
+        const nextLocale = currentBubbleLocale();
+        if (next !== currentRoute || nextLocale !== lastBubbleLocale) {
             currentRoute = next;
+            lastBubbleLocale = nextLocale;
             syncThoughtBubble(controller.getState());
         }
     };

package/dist/cjs/orb/orbView.js

@@ -78,9 +78,15 @@ function buildDoubleBorder(opts) {
     root.appendChild(mid);
     return { root, fill };
 }
-// ── Brand mark (port of FiodosOrbMark) ───────────────────────────────────────
-function buildOrbMark(orbSize) {
-    const { bars, color, radius } = (0, core_1.resolveFiodosOrbMarkBars)(orbSize);
+/**
+ * Fiodos brand mark (idle, no logo). Breathes very gently on web — a
+ * direct port of the landing hero orbs' waveform easing (see
+ * `fiodosOrbMarkIdleHalfHeight` in @fiodos/core) — deliberately subtler than
+ * and distinct from the volume-reactive waveform shown while listening.
+ * Tinted with the same "audio color" (waveformColor) as that waveform.
+ */
+function buildOrbMark(orbSize, markColor) {
+    const { bars, color, radius } = (0, core_1.resolveFiodosOrbMarkAnimatedBars)(orbSize, markColor);
     const svg = svgEl('svg', {
         width: orbSize,
         height: orbSize,
@@ -88,10 +94,31 @@ function buildOrbMark(orbSize) {
         'aria-hidden': 'true',
     });
     svg.style.display = 'block';
-    for (const b of bars) {
-        svg.appendChild(svgEl('rect', { x: b.x, y: b.y, width: b.width, height: b.height, rx: radius, ry: radius, fill: color }));
-    }
-    return svg;
+    const rects = bars.map((b) => {
+        const rect = svgEl('rect', { x: b.x, y: b.y, width: b.width, height: b.height, rx: radius, ry: radius, fill: color });
+        svg.appendChild(rect);
+        return rect;
+    });
+    let raf = 0;
+    return {
+        el: svg,
+        start() {
+            const t0 = performance.now();
+            const loop = (now) => {
+                raf = requestAnimationFrame(loop);
+                const t = (now - t0) / 1000;
+                bars.forEach((b, i) => {
+                    const half = (0, core_1.fiodosOrbMarkIdleHalfHeight)(t, i, b.baseHalfHeight, b.maxHalfHeight);
+                    rects[i].setAttribute('y', (b.centerY - half).toFixed(2));
+                    rects[i].setAttribute('height', (2 * half).toFixed(2));
+                });
+            };
+            raf = requestAnimationFrame(loop);
+        },
+        stop() {
+            cancelAnimationFrame(raf);
+        },
+    };
 }
 // ── Waveform (port of VoiceWaveform: 9 bars, bell profile, rAF) ───────────────
 const WAVE_BARS = 9;
@@ -382,6 +409,7 @@ function createOrbVisual(initial) {
     let volume = 0;
     let fillEl = null;
     let waveform = null;
+    let markAnim = null;
     function rebuild() {
         const size = appearance.size ?? exports.DEFAULT_ORB_APPEARANCE.size;
         const fill = (0, core_1.resolveOrbBackgroundColor)({
@@ -393,6 +421,8 @@ function createOrbVisual(initial) {
         const interiorColor = (0, core_1.resolveInnerBorderColor)(appearance.innerBorderColor);
         waveform?.stop();
         waveform = null;
+        markAnim?.stop();
+        markAnim = null;
         wrapper.replaceChildren();
         const { root, fill: fillNode } = buildDoubleBorder({
             fillDiameter: size,
@@ -414,6 +444,8 @@ function createOrbVisual(initial) {
         const waveColor = appearance.waveformColor ?? '#ffffff';
         waveform?.stop();
         waveform = null;
+        markAnim?.stop();
+        markAnim = null;
         fillEl.replaceChildren();
         // The "speaking" feedback now lives INSIDE the fill (a pulsing logo, or the
         // rings + dot when there's no photo) to mirror the dashboard editor, so the
@@ -458,7 +490,9 @@ function createOrbVisual(initial) {
             return;
         }
         if (state === 'idle') {
-            fillEl.appendChild(buildOrbMark(size));
+            markAnim = buildOrbMark(size, appearance.waveformColor);
+            fillEl.appendChild(markAnim.el);
+            markAnim.start();
         }
     }
     rebuild();

package/dist/cjs/orb/publishedConfig.d.ts

@@ -60,7 +60,9 @@ export interface WatchPublishedConfigOptions {
 }
 /**
  * Starts watching the published config. Returns an unsubscribe function.
- * Best-effort: a failed fetch reports `null` (the orb keeps its current/default
- * look) and never throws into the host app.
+ * Best-effort: a failed fetch is SILENTLY skipped — the orb keeps its
+ * last-known-good (or cached) look instead of reverting to the default — and
+ * never throws into the host app. `onChange(null)` is reported ONLY when the
+ * backend confirms nothing is published.
  */
 export declare function watchPublishedConfig(controller: AgentController, options: WatchPublishedConfigOptions): () => void;

package/dist/cjs/orb/publishedConfig.js

@@ -14,6 +14,38 @@ exports.watchPublishedConfig = watchPublishedConfig;
  */
 const core_1 = require("@fiodos/core");
 const orbView_1 = require("./orbView");
+/**
+ * Last-known-good published config, persisted so the customized orb survives
+ * page reloads during a backend outage and shows instantly on the next visit.
+ * Best-effort: storage failures (private mode, quota) are ignored.
+ */
+const PUBLISHED_CONFIG_CACHE_KEY = 'fyodos:published-config:v1';
+function readCachedPublishedConfig() {
+    try {
+        if (typeof window === 'undefined' || !window.localStorage)
+            return null;
+        const raw = window.localStorage.getItem(PUBLISHED_CONFIG_CACHE_KEY);
+        return raw ? JSON.parse(raw) : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeCachedPublishedConfig(published) {
+    try {
+        if (typeof window === 'undefined' || !window.localStorage)
+            return;
+        if (published) {
+            window.localStorage.setItem(PUBLISHED_CONFIG_CACHE_KEY, JSON.stringify(published));
+        }
+        else {
+            window.localStorage.removeItem(PUBLISHED_CONFIG_CACHE_KEY);
+        }
+    }
+    catch {
+        /* best-effort cache */
+    }
+}
 function toResolved(props, published) {
     const enabled = published.orbEnabled !== false;
     const theme = props.theme;
@@ -48,8 +80,10 @@ function toResolved(props, published) {
 }
 /**
  * Starts watching the published config. Returns an unsubscribe function.
- * Best-effort: a failed fetch reports `null` (the orb keeps its current/default
- * look) and never throws into the host app.
+ * Best-effort: a failed fetch is SILENTLY skipped — the orb keeps its
+ * last-known-good (or cached) look instead of reverting to the default — and
+ * never throws into the host app. `onChange(null)` is reported ONLY when the
+ * backend confirms nothing is published.
  */
 function watchPublishedConfig(controller, options) {
     const fetcher = controller.config.backend.fetchPublishedConfig;
@@ -58,18 +92,33 @@ function watchPublishedConfig(controller, options) {
         return () => { };
     }
     let cancelled = false;
+    // Hydrate from the local cache so the customized orb shows instantly (and
+    // survives page loads while the backend is unreachable). The first network
+    // response below overwrites it as the source of truth.
+    const cached = readCachedPublishedConfig();
+    if (cached) {
+        options.onChange(toResolved((0, core_1.mapPublishedConfigToOrbProps)(cached), cached));
+    }
     const load = async () => {
         try {
             const res = await fetcher.call(controller.config.backend);
             if (cancelled)
                 return;
-            options.onChange(res.published
-                ? toResolved((0, core_1.mapPublishedConfigToOrbProps)(res.published), res.published)
-                : null);
+            if (res.published) {
+                options.onChange(toResolved((0, core_1.mapPublishedConfigToOrbProps)(res.published), res.published));
+                writeCachedPublishedConfig(res.published);
+            }
+            else {
+                // A SUCCESSFUL response with nothing published: the project truly has
+                // no custom design, so the defaults are correct.
+                options.onChange(null);
+                writeCachedPublishedConfig(null);
+            }
         }
         catch {
-            if (!cancelled)
-                options.onChange(null);
+            // Transient failure (timeout, network blip after hours open, backend
+            // redeploy…): keep the current appearance. The next successful poll
+            // refreshes it.
         }
     };
     void load();

package/dist/cjs/version.d.ts

@@ -5,5 +5,5 @@
  * Auto-generated by scripts/sync-sdk-version.mjs from package.json. Do not edit
  * by hand — change package.json `version` and re-run the sync/release script.
  */
-export declare const SDK_VERSION = "0.1.12";
+export declare const SDK_VERSION = "0.1.15";
 export declare const SDK_PACKAGE = "@fiodos/web-core";

package/dist/cjs/version.js

@@ -8,5 +8,5 @@ exports.SDK_PACKAGE = exports.SDK_VERSION = void 0;
  * Auto-generated by scripts/sync-sdk-version.mjs from package.json. Do not edit
  * by hand — change package.json `version` and re-run the sync/release script.
  */
-exports.SDK_VERSION = '0.1.12';
+exports.SDK_VERSION = '0.1.15';
 exports.SDK_PACKAGE = '@fiodos/web-core';