@fiodos/web-core 0.1.9 → 0.1.10

package/dist/cjs/orb/mountOrb.js

@@ -42,8 +42,11 @@ const CSS = `
 .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;}
-.fyodos-thought{position:absolute;appearance:none;display:inline-block;width:max-content;max-width:min(280px,70vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;line-height:1.25;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.22);animation:fyodos-thought-in .18s ease-out;}
+.fyodos-thought{position:absolute;appearance:none;box-sizing:border-box;display:flex;align-items:center;width:max-content;max-width:min(280px,70vw);white-space:nowrap;overflow:hidden;text-align:left;line-height:1.25;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.22);animation:fyodos-thought-in .18s ease-out;}
 @keyframes fyodos-thought-in{from{opacity:0;transform:translateY(4px) scale(0.96)}to{opacity:1;transform:none}}
+@keyframes fyodos-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
+.fyodos-thought-track{display:flex;flex-shrink:0;width:max-content;will-change:transform;}
+.fyodos-thought-track>span{flex-shrink:0;padding-right:48px;white-space:nowrap;}
 @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)}}
@@ -170,19 +173,32 @@ function mountOrb(controller, options = {}) {
     let chipEl = null;
     // Thought bubble: a short, screen-aware CTA beside the orb. Created once and
     // shown/hidden by syncThoughtBubble; tapping it opens the keyboard.
-    const thoughtBubbleEl = document.createElement('button');
-    thoughtBubbleEl.type = 'button';
+    const thoughtBubbleEl = document.createElement('div');
     thoughtBubbleEl.className = 'fyodos-thought';
+    thoughtBubbleEl.setAttribute('role', 'button');
+    thoughtBubbleEl.tabIndex = 0;
     thoughtBubbleEl.style.display = 'none';
     thoughtBubbleEl.addEventListener('click', () => {
         haptics.trigger('orbTap');
         controller.primeAudio();
         if (enableTextInput) {
-            openTextPanel();
+            const prompt = resolveCurrentBubblePrompt();
+            openTextPanel(prompt
+                ? (0, core_1.bubblePromptToAffirmative)(prompt, {
+                    locale: controller.config.locale,
+                    messages: controller.messages,
+                })
+                : undefined);
             return;
         }
         void controller.toggleListening();
     });
+    thoughtBubbleEl.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            thoughtBubbleEl.click();
+        }
+    });
     anchor.appendChild(thoughtBubbleEl);
     container.appendChild(root);
     // ── Position (dashboard position; user drag is SESSION-only, never persisted) ─
@@ -450,9 +466,14 @@ function mountOrb(controller, options = {}) {
         // STAYS OPEN. This is the unified, reference-matching behaviour.
         void controller.submitTextTurn(value);
     }
-    function openTextPanel() {
+    function openTextPanel(seed, autoSend = false) {
         controller.cancelAll();
+        const draft = seed?.trim() ?? '';
+        textInput.value = draft;
         setBubble(true);
+        if (autoSend && draft) {
+            queueMicrotask(() => submitText());
+        }
     }
     // ── Keyboard chip (rebuilt when theme changes / visibility toggles) ──────────
     // Appears beside the ACTIVE orb — whether listening for real (voice granted)
@@ -490,26 +511,62 @@ function mountOrb(controller, options = {}) {
     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 });
     }
+    // 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
+    // shrinking the font or truncating — the bubble keeps a constant height.
+    function layoutThoughtContent(prompt) {
+        const t = bubbleTheme;
+        const { padH } = (0, core_1.resolveBubblePadding)(t);
+        // Measure the natural (single-copy) text width at the base font size.
+        thoughtBubbleEl.style.width = '';
+        thoughtBubbleEl.textContent = prompt;
+        const measured = thoughtBubbleEl.scrollWidth;
+        const viewport = typeof window !== 'undefined' ? window.innerWidth : 280;
+        const maxW = Math.min(280, viewport * 0.7);
+        const overflow = measured > maxW - t.borderWidth * 2;
+        if (!overflow) {
+            thoughtBubbleEl.style.width = '';
+            return;
+        }
+        const textWidth = Math.max(0, measured - padH * 2);
+        const durationSec = Math.max(4, (textWidth + 48) / 30);
+        thoughtBubbleEl.style.width = `${maxW}px`;
+        thoughtBubbleEl.textContent = '';
+        const track = document.createElement('div');
+        track.className = 'fyodos-thought-track';
+        track.style.animation = `fyodos-marquee ${durationSec}s linear infinite`;
+        const first = document.createElement('span');
+        first.textContent = prompt;
+        const second = document.createElement('span');
+        second.textContent = prompt;
+        second.setAttribute('aria-hidden', 'true');
+        track.appendChild(first);
+        track.appendChild(second);
+        thoughtBubbleEl.appendChild(track);
+    }
     function applyThoughtBubbleTheme() {
         const t = bubbleTheme;
-        const { fontPx, padV, padH, approxHeight } = (0, core_1.resolveBubblePadding)(t);
-        const shapeStyle = (0, core_1.resolveBubbleShapeStyle)(t, approxHeight);
+        const { fontPx, padH, approxHeight } = (0, core_1.resolveBubblePadding)(t);
+        const shapeCss = (0, core_1.bubbleShapeToCss)(t, approxHeight);
         thoughtBubbleEl.style.fontSize = `${fontPx}px`;
-        thoughtBubbleEl.style.padding = `${padV}px ${padH}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}`;
-        thoughtBubbleEl.style.borderRadius =
-            shapeStyle.borderRadius != null ? `${shapeStyle.borderRadius}px` : '';
-        thoughtBubbleEl.style.borderTopLeftRadius =
-            shapeStyle.borderTopLeftRadius != null ? `${shapeStyle.borderTopLeftRadius}px` : '';
-        thoughtBubbleEl.style.borderTopRightRadius =
-            shapeStyle.borderTopRightRadius != null ? `${shapeStyle.borderTopRightRadius}px` : '';
-        thoughtBubbleEl.style.borderBottomLeftRadius =
-            shapeStyle.borderBottomLeftRadius != null ? `${shapeStyle.borderBottomLeftRadius}px` : '';
-        thoughtBubbleEl.style.borderBottomRightRadius =
-            shapeStyle.borderBottomRightRadius != null ? `${shapeStyle.borderBottomRightRadius}px` : '';
-        thoughtBubbleEl.style.clipPath = shapeStyle.clipPath ?? '';
+        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);
     }
     function positionThoughtBubble() {
         const dep = (0, core_1.resolveOrbDeployment)(effectivePosition());
@@ -539,11 +596,12 @@ function mountOrb(controller, options = {}) {
             thoughtBubbleEl.style.display = 'none';
             return;
         }
-        thoughtBubbleEl.textContent = prompt;
-        thoughtBubbleEl.setAttribute('aria-label', ui.orbLabel);
+        thoughtBubbleEl.setAttribute('aria-label', prompt);
+        // Display before measuring so `scrollWidth` (used to detect overflow) is real.
+        thoughtBubbleEl.style.display = 'flex';
         applyThoughtBubbleTheme();
+        layoutThoughtContent(prompt);
         positionThoughtBubble();
-        thoughtBubbleEl.style.display = 'block';
     }
     // ── Overlays (confirmation + consent) ────────────────────────────────────────
     let overlayEl = null;

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.9";
+export declare const SDK_VERSION = "0.1.10";
 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.9';
+exports.SDK_VERSION = '0.1.10';
 exports.SDK_PACKAGE = '@fiodos/web-core';

package/dist/esm/orb/mountOrb.js

@@ -16,7 +16,7 @@
  *  - 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, matchRouteIntent, resolveBubblePrompt, resolveBubbleTheme, resolveBubblePadding, resolveBubbleShapeStyle, resolveOrbAnchorPx, resolveOrbDeployment, snapOrbScreenPositionToSide, viewportPixelsToOrbScreenPosition, } from '@fiodos/core';
+import { DEFAULT_ORB_SCREEN_POSITION, createWebOrbHaptics, matchRouteIntent, resolveBubblePrompt, bubblePromptToAffirmative, resolveBubbleTheme, resolveBubblePadding, bubbleShapeToCss, resolveOrbAnchorPx, 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';
@@ -39,8 +39,11 @@ const CSS = `
 .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;}
-.fyodos-thought{position:absolute;appearance:none;display:inline-block;width:max-content;max-width:min(280px,70vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;line-height:1.25;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.22);animation:fyodos-thought-in .18s ease-out;}
+.fyodos-thought{position:absolute;appearance:none;box-sizing:border-box;display:flex;align-items:center;width:max-content;max-width:min(280px,70vw);white-space:nowrap;overflow:hidden;text-align:left;line-height:1.25;font-weight:500;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.22);animation:fyodos-thought-in .18s ease-out;}
 @keyframes fyodos-thought-in{from{opacity:0;transform:translateY(4px) scale(0.96)}to{opacity:1;transform:none}}
+@keyframes fyodos-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
+.fyodos-thought-track{display:flex;flex-shrink:0;width:max-content;will-change:transform;}
+.fyodos-thought-track>span{flex-shrink:0;padding-right:48px;white-space:nowrap;}
 @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)}}
@@ -167,19 +170,32 @@ export function mountOrb(controller, options = {}) {
     let chipEl = null;
     // Thought bubble: a short, screen-aware CTA beside the orb. Created once and
     // shown/hidden by syncThoughtBubble; tapping it opens the keyboard.
-    const thoughtBubbleEl = document.createElement('button');
-    thoughtBubbleEl.type = 'button';
+    const thoughtBubbleEl = document.createElement('div');
     thoughtBubbleEl.className = 'fyodos-thought';
+    thoughtBubbleEl.setAttribute('role', 'button');
+    thoughtBubbleEl.tabIndex = 0;
     thoughtBubbleEl.style.display = 'none';
     thoughtBubbleEl.addEventListener('click', () => {
         haptics.trigger('orbTap');
         controller.primeAudio();
         if (enableTextInput) {
-            openTextPanel();
+            const prompt = resolveCurrentBubblePrompt();
+            openTextPanel(prompt
+                ? bubblePromptToAffirmative(prompt, {
+                    locale: controller.config.locale,
+                    messages: controller.messages,
+                })
+                : undefined);
             return;
         }
         void controller.toggleListening();
     });
+    thoughtBubbleEl.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            thoughtBubbleEl.click();
+        }
+    });
     anchor.appendChild(thoughtBubbleEl);
     container.appendChild(root);
     // ── Position (dashboard position; user drag is SESSION-only, never persisted) ─
@@ -447,9 +463,14 @@ export function mountOrb(controller, options = {}) {
         // STAYS OPEN. This is the unified, reference-matching behaviour.
         void controller.submitTextTurn(value);
     }
-    function openTextPanel() {
+    function openTextPanel(seed, autoSend = false) {
         controller.cancelAll();
+        const draft = seed?.trim() ?? '';
+        textInput.value = draft;
         setBubble(true);
+        if (autoSend && draft) {
+            queueMicrotask(() => submitText());
+        }
     }
     // ── Keyboard chip (rebuilt when theme changes / visibility toggles) ──────────
     // Appears beside the ACTIVE orb — whether listening for real (voice granted)
@@ -487,26 +508,62 @@ export function mountOrb(controller, options = {}) {
     function resolveCurrentBubblePrompt() {
         return resolveBubblePrompt(matchRouteIntent(currentRoute, controller.config.manifest.routes), controller.messages, { locale: controller.config.locale, 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
+    // shrinking the font or truncating — the bubble keeps a constant height.
+    function layoutThoughtContent(prompt) {
+        const t = bubbleTheme;
+        const { padH } = resolveBubblePadding(t);
+        // Measure the natural (single-copy) text width at the base font size.
+        thoughtBubbleEl.style.width = '';
+        thoughtBubbleEl.textContent = prompt;
+        const measured = thoughtBubbleEl.scrollWidth;
+        const viewport = typeof window !== 'undefined' ? window.innerWidth : 280;
+        const maxW = Math.min(280, viewport * 0.7);
+        const overflow = measured > maxW - t.borderWidth * 2;
+        if (!overflow) {
+            thoughtBubbleEl.style.width = '';
+            return;
+        }
+        const textWidth = Math.max(0, measured - padH * 2);
+        const durationSec = Math.max(4, (textWidth + 48) / 30);
+        thoughtBubbleEl.style.width = `${maxW}px`;
+        thoughtBubbleEl.textContent = '';
+        const track = document.createElement('div');
+        track.className = 'fyodos-thought-track';
+        track.style.animation = `fyodos-marquee ${durationSec}s linear infinite`;
+        const first = document.createElement('span');
+        first.textContent = prompt;
+        const second = document.createElement('span');
+        second.textContent = prompt;
+        second.setAttribute('aria-hidden', 'true');
+        track.appendChild(first);
+        track.appendChild(second);
+        thoughtBubbleEl.appendChild(track);
+    }
     function applyThoughtBubbleTheme() {
         const t = bubbleTheme;
-        const { fontPx, padV, padH, approxHeight } = resolveBubblePadding(t);
-        const shapeStyle = resolveBubbleShapeStyle(t, approxHeight);
+        const { fontPx, padH, approxHeight } = resolveBubblePadding(t);
+        const shapeCss = bubbleShapeToCss(t, approxHeight);
         thoughtBubbleEl.style.fontSize = `${fontPx}px`;
-        thoughtBubbleEl.style.padding = `${padV}px ${padH}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}`;
-        thoughtBubbleEl.style.borderRadius =
-            shapeStyle.borderRadius != null ? `${shapeStyle.borderRadius}px` : '';
-        thoughtBubbleEl.style.borderTopLeftRadius =
-            shapeStyle.borderTopLeftRadius != null ? `${shapeStyle.borderTopLeftRadius}px` : '';
-        thoughtBubbleEl.style.borderTopRightRadius =
-            shapeStyle.borderTopRightRadius != null ? `${shapeStyle.borderTopRightRadius}px` : '';
-        thoughtBubbleEl.style.borderBottomLeftRadius =
-            shapeStyle.borderBottomLeftRadius != null ? `${shapeStyle.borderBottomLeftRadius}px` : '';
-        thoughtBubbleEl.style.borderBottomRightRadius =
-            shapeStyle.borderBottomRightRadius != null ? `${shapeStyle.borderBottomRightRadius}px` : '';
-        thoughtBubbleEl.style.clipPath = shapeStyle.clipPath ?? '';
+        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);
     }
     function positionThoughtBubble() {
         const dep = resolveOrbDeployment(effectivePosition());
@@ -536,11 +593,12 @@ export function mountOrb(controller, options = {}) {
             thoughtBubbleEl.style.display = 'none';
             return;
         }
-        thoughtBubbleEl.textContent = prompt;
-        thoughtBubbleEl.setAttribute('aria-label', ui.orbLabel);
+        thoughtBubbleEl.setAttribute('aria-label', prompt);
+        // Display before measuring so `scrollWidth` (used to detect overflow) is real.
+        thoughtBubbleEl.style.display = 'flex';
         applyThoughtBubbleTheme();
+        layoutThoughtContent(prompt);
         positionThoughtBubble();
-        thoughtBubbleEl.style.display = 'block';
     }
     // ── Overlays (confirmation + consent) ────────────────────────────────────────
     let overlayEl = null;

package/dist/esm/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.9";
+export declare const SDK_VERSION = "0.1.10";
 export declare const SDK_PACKAGE = "@fiodos/web-core";

package/dist/esm/version.js

@@ -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 const SDK_VERSION = '0.1.9';
+export const SDK_VERSION = '0.1.10';
 export const SDK_PACKAGE = '@fiodos/web-core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiodos/web-core",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Framework-agnostic browser layer for the Fiodos agent: a vanilla AgentController (orchestrator), DOM adapters (navigation/voice/storage), HTTP client and decision engine over @fiodos/core. Shared base for @fiodos/vue, @fiodos/svelte and @fiodos/angular (no framework imports).",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {