@fiodos/web-core 0.1.3 → 0.1.4

package/dist/cjs/orb/mountOrb.js

@@ -65,6 +65,18 @@ function ensureStyles() {
     el.textContent = CSS;
     document.head.appendChild(el);
 }
+// Content box of the layout viewport. `documentElement.clientWidth/Height`
+// EXCLUDE a classic scrollbar that occupies real width/height (Windows, some
+// Linux/Chromium); overlay scrollbars (macOS, mobile) report the same value as
+// the layout viewport. Anchoring against this — not `innerWidth` — keeps a
+// right/bottom-edge orb just INSIDE the scrollbar instead of under/over it.
+function viewportContentSize() {
+    const de = typeof document !== 'undefined' ? document.documentElement : null;
+    return {
+        width: de?.clientWidth || window.innerWidth,
+        height: de?.clientHeight || window.innerHeight,
+    };
+}
 function cornerToPosition(corner) {
     switch (corner) {
         case 'bottom-left':
@@ -161,14 +173,15 @@ function mountOrb(controller, options = {}) {
     }
     function reposition() {
         const size = orbDiameterPx();
-        const insets = (0, core_1.resolveOrbLayerInsets)({
+        const content = viewportContentSize();
+        const { left, top } = (0, core_1.resolveOrbAnchorPx)({
             viewportWidth: window.innerWidth,
             viewportHeight: window.innerHeight,
+            contentWidth: content.width,
+            contentHeight: content.height,
             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 = '';
@@ -197,6 +210,14 @@ function mountOrb(controller, options = {}) {
         }
     }
     window.addEventListener('resize', reposition);
+    // Recalc when a scrollbar appears/disappears as the page content changes (the
+    // content box shrinks/grows even when the window size doesn't), so the orb
+    // never ends up overlapped by — or detached from — the scrollbar edge.
+    let contentObserver;
+    if (typeof ResizeObserver !== 'undefined' && document.documentElement) {
+        contentObserver = new ResizeObserver(() => reposition());
+        contentObserver.observe(document.documentElement);
+    }
     // Keep the conversation bar above the keyboard as the visual viewport resizes
     // (keyboard open/close) or scrolls on mobile browsers.
     const visualViewport = window.visualViewport;
@@ -240,9 +261,10 @@ function mountOrb(controller, options = {}) {
         dragging = true;
         e.preventDefault();
         const size = orbDiameterPx();
+        const content = viewportContentSize();
         const margin = 8;
-        const maxLeft = window.innerWidth - margin - size;
-        const maxTop = window.innerHeight - margin - size;
+        const maxLeft = content.width - margin - size;
+        const maxTop = content.height - 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`;
@@ -252,8 +274,8 @@ function mountOrb(controller, options = {}) {
         draggedPosition = (0, core_1.viewportPixelsToOrbScreenPosition)({
             centerX: left + size / 2,
             centerY: top + size / 2,
-            viewportWidth: window.innerWidth,
-            viewportHeight: window.innerHeight,
+            viewportWidth: content.width,
+            viewportHeight: content.height,
             orbDiameter: size,
         });
         applyDeployment();
@@ -688,6 +710,7 @@ function mountOrb(controller, options = {}) {
             unsubscribe();
             stopWatch();
             window.removeEventListener('resize', reposition);
+            contentObserver?.disconnect();
             visualViewport?.removeEventListener('resize', onViewportChange);
             visualViewport?.removeEventListener('scroll', onViewportChange);
             clearOverlay();

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, resolveOrbLayerInsets, resolveOrbDeployment, snapOrbScreenPositionToSide, viewportPixelsToOrbScreenPosition, } from '@fiodos/core';
+import { DEFAULT_ORB_SCREEN_POSITION, createWebOrbHaptics, 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';
@@ -62,6 +62,18 @@ function ensureStyles() {
     el.textContent = CSS;
     document.head.appendChild(el);
 }
+// Content box of the layout viewport. `documentElement.clientWidth/Height`
+// EXCLUDE a classic scrollbar that occupies real width/height (Windows, some
+// Linux/Chromium); overlay scrollbars (macOS, mobile) report the same value as
+// the layout viewport. Anchoring against this — not `innerWidth` — keeps a
+// right/bottom-edge orb just INSIDE the scrollbar instead of under/over it.
+function viewportContentSize() {
+    const de = typeof document !== 'undefined' ? document.documentElement : null;
+    return {
+        width: de?.clientWidth || window.innerWidth,
+        height: de?.clientHeight || window.innerHeight,
+    };
+}
 function cornerToPosition(corner) {
     switch (corner) {
         case 'bottom-left':
@@ -158,14 +170,15 @@ export function mountOrb(controller, options = {}) {
     }
     function reposition() {
         const size = orbDiameterPx();
-        const insets = resolveOrbLayerInsets({
+        const content = viewportContentSize();
+        const { left, top } = resolveOrbAnchorPx({
             viewportWidth: window.innerWidth,
             viewportHeight: window.innerHeight,
+            contentWidth: content.width,
+            contentHeight: content.height,
             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 = '';
@@ -194,6 +207,14 @@ export function mountOrb(controller, options = {}) {
         }
     }
     window.addEventListener('resize', reposition);
+    // Recalc when a scrollbar appears/disappears as the page content changes (the
+    // content box shrinks/grows even when the window size doesn't), so the orb
+    // never ends up overlapped by — or detached from — the scrollbar edge.
+    let contentObserver;
+    if (typeof ResizeObserver !== 'undefined' && document.documentElement) {
+        contentObserver = new ResizeObserver(() => reposition());
+        contentObserver.observe(document.documentElement);
+    }
     // Keep the conversation bar above the keyboard as the visual viewport resizes
     // (keyboard open/close) or scrolls on mobile browsers.
     const visualViewport = window.visualViewport;
@@ -237,9 +258,10 @@ export function mountOrb(controller, options = {}) {
         dragging = true;
         e.preventDefault();
         const size = orbDiameterPx();
+        const content = viewportContentSize();
         const margin = 8;
-        const maxLeft = window.innerWidth - margin - size;
-        const maxTop = window.innerHeight - margin - size;
+        const maxLeft = content.width - margin - size;
+        const maxTop = content.height - 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`;
@@ -249,8 +271,8 @@ export function mountOrb(controller, options = {}) {
         draggedPosition = viewportPixelsToOrbScreenPosition({
             centerX: left + size / 2,
             centerY: top + size / 2,
-            viewportWidth: window.innerWidth,
-            viewportHeight: window.innerHeight,
+            viewportWidth: content.width,
+            viewportHeight: content.height,
             orbDiameter: size,
         });
         applyDeployment();
@@ -685,6 +707,7 @@ export function mountOrb(controller, options = {}) {
             unsubscribe();
             stopWatch();
             window.removeEventListener('resize', reposition);
+            contentObserver?.disconnect();
             visualViewport?.removeEventListener('resize', onViewportChange);
             visualViewport?.removeEventListener('scroll', onViewportChange);
             clearOverlay();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiodos/web-core",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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": {