@qualified-salesforce/web 0.0.1-oidc-bootstrap → 0.1.1

package/css/widget/multimodal_v2/index.split-css.panda.css

@@ -737,8 +737,8 @@
     padding: 0 16px 0 8px;
   }
 
-  .q-eUlsAQ {
-    padding: 0 8px;
+  .q-dqRdNH {
+    padding: 0;
   }
 
   .q-ffAOcM {
@@ -795,10 +795,6 @@
     border: 1.5px solid #d7dde2;
   }
 
-  .q-dqRdNH {
-    padding: 0;
-  }
-
   .q-kgRGeM {
     margin: -1px;
   }
@@ -999,6 +995,10 @@
     border: 1px solid \$colors\.border;
   }
 
+  .q-kWIjhW {
+    font: inherit;
+  }
+
   .q-gPyWWT {
     border: 1px solid;
   }
@@ -1284,6 +1284,16 @@
     gap: 10px;
   }
 
+  .q-cfDrIW {
+    border-radius: 16px;
+    border-radius: var(--q-dxfumK);
+  }
+
+  .q-iainBx {
+    gap: 16px;
+    gap: var(--q-jugHdA);
+  }
+
   .q-hMIFSa {
     transition: background-color .2s;
   }
@@ -1441,11 +1451,6 @@
     gap: 24px;
   }
 
-  .q-iainBx {
-    gap: 16px;
-    gap: var(--q-jugHdA);
-  }
-
   .q-bMcXFr {
     border-radius: 8px;
     border-radius: var(--q-control-border-radius, 8px);
@@ -1618,6 +1623,23 @@
     transition: opacity .2s, box-shadow .2s, transform .2s;
   }
 
+  .q-bkgpAA {
+    inset-inline: 16px;
+  }
+
+  .q-NGWtr {
+    inset-inline: 8px;
+  }
+
+  .q-DHTGQ {
+    inset-inline: -20px;
+  }
+
+  .q-fNJrUv {
+    border-radius: 8px;
+    border-radius: var(--q-bewZvn);
+  }
+
   .q-brKOqO {
     overscroll-behavior: contain;
   }
@@ -2212,6 +2234,18 @@
     resize: none;
   }
 
+  .q-kGHEMe {
+    align-self: flex-start;
+  }
+
+  .q-cOEFXT {
+    transform: rotate(180deg);
+  }
+
+  .q-kTBjet {
+    align-items: stretch;
+  }
+
   .q-bSTPIv {
     box-shadow: 0 8px 32px #0000004d;
   }
@@ -2233,14 +2267,27 @@
     transform-origin: bottom;
   }
 
-  .q-loatqo {
-    background-color: #fff6;
+  .q-jcVpEa {
+    line-height: 22px;
   }
 
   .q-iCfjvi {
     flex-grow: 1;
   }
 
+  .q-gasSYy {
+    flex-wrap: wrap;
+  }
+
+  .q-loatqo {
+    background-color: #fff6;
+  }
+
+  .q-hdUyV {
+    background-color: #e6e9ec;
+    background-color: var(--q-gjomaU);
+  }
+
   .q-eIsAcC {
     -webkit-user-select: none;
     user-select: none;
@@ -2263,18 +2310,10 @@
     transform: translateY(8px);
   }
 
-  .q-gasSYy {
-    flex-wrap: wrap;
-  }
-
   .q-hxBzcr {
     align-items: flex-end;
   }
 
-  .q-kTBjet {
-    align-items: stretch;
-  }
-
   .q-hYhvQY {
     box-shadow: none;
     box-shadow: var(--q-jLtLHp);
@@ -2337,10 +2376,6 @@
     container-name: bookerPanel;
   }
 
-  .q-cOEFXT {
-    transform: rotate(180deg);
-  }
-
   .q-hBOzJB {
     color: #e4251b;
   }
@@ -2592,10 +2627,6 @@
     background-color: #2dd272;
   }
 
-  .q-kGHEMe {
-    align-self: flex-start;
-  }
-
   .q-iMVOnP {
     align-self: center;
   }
@@ -2608,10 +2639,6 @@
     line-height: 14px;
   }
 
-  .q-jcVpEa {
-    line-height: 22px;
-  }
-
   .q-krbBcV {
     white-space: normal;
   }
@@ -2714,6 +2741,45 @@
     justify-content: flex-start;
   }
 
+  .q-bGTgkg {
+    appearance: none;
+  }
+
+  .q-vNRpm {
+    -webkit-appearance: none;
+  }
+
+  .q-jKfYXo {
+    text-align: inherit;
+  }
+
+  .q-irWrst {
+    background-color: #66a8eb;
+    background-color: var(--q-btpljM);
+  }
+
+  .q-gXqRpG {
+    opacity: .45;
+  }
+
+  .q-bMGTxJ {
+    opacity: .75;
+  }
+
+  .q-cqCfxu {
+    -o-object-position: top;
+    object-position: top;
+  }
+
+  .q-boLblZ {
+    filter: blur(12px);
+  }
+
+  .q-hwlKiV {
+    background-color: #152229;
+    background-color: var(--q-ckoJkw);
+  }
+
   .q-fLVKVB {
     scrollbar-width: none;
   }
@@ -2965,6 +3031,10 @@
     height: 48px;
   }
 
+  .q-eRLSQw {
+    width: 48px;
+  }
+
   .q-iWjbPW {
     width: 24px;
   }
@@ -3010,6 +3080,10 @@
     height: 64px;
   }
 
+  .q-cCoqvZ {
+    max-width: 100%;
+  }
+
   .q-dxbJmu {
     min-height: 0;
   }
@@ -3018,14 +3092,52 @@
     width: auto;
   }
 
-  .q-cCoqvZ {
-    max-width: 100%;
-  }
-
   .q-jJlZBc {
     max-height: 100%;
   }
 
+  .q-niSFv {
+    border-bottom-left-radius: 0;
+  }
+
+  .q-gqcmcs {
+    border-bottom-right-radius: 0;
+  }
+
+  .q-hnYqHC {
+    max-height: calc(100% - 124px);
+  }
+
+  .q-dQsKWZ {
+    max-height: calc(100% - 172px);
+  }
+
+  .q-dQrOvv {
+    border-bottom-left-radius: 16px;
+    border-bottom-left-radius: var(--q-dxfumK);
+  }
+
+  .q-kZnTsk {
+    border-bottom-right-radius: 16px;
+    border-bottom-right-radius: var(--q-dxfumK);
+  }
+
+  .q-fSNeID {
+    border-top-left-radius: 0;
+  }
+
+  .q-lmIybk {
+    border-top-right-radius: 0;
+  }
+
+  .q-kEmBGl {
+    min-height: 124px;
+  }
+
+  .q-eeWvqi {
+    min-height: 172px;
+  }
+
   .q-ipiJSk {
     width: 8px;
   }
@@ -3520,6 +3632,41 @@
     border-top-left-radius: 4px;
   }
 
+  .q-cBlWNH {
+    min-height: 32px;
+  }
+
+  .q-kJvXpK {
+    padding-top: 12px;
+    padding-top: var(--q-cXTyBO);
+  }
+
+  .q-dlHacb {
+    top: 6px;
+  }
+
+  .q-iHDoAO {
+    top: -20px;
+  }
+
+  .q-bYDZOv {
+    width: calc(100% + 40px);
+  }
+
+  .q-jQmYcu {
+    height: calc(100% + 40px);
+  }
+
+  .q-lnCtVe {
+    right: 8px;
+    right: var(--q-cSaSxh);
+  }
+
+  .q-jgAsJt {
+    bottom: 8px;
+    bottom: var(--q-cSaSxh);
+  }
+
   .q-ilCorh {
     line-clamp: 1;
   }
@@ -3789,10 +3936,19 @@
     color: var(--q-ekJvRZ);
   }
 
+  .q-eHRSUh:empty {
+    display: none;
+  }
+
   .q-ldTxnm[data-active="true"] {
     background-color: #fffffff2;
   }
 
+  .q-hmyJss[data-active="true"] {
+    background-color: #0070d2;
+    background-color: var(--q-bebYds);
+  }
+
   .q-bEFJjx:disabled {
     opacity: .6;
   }
@@ -4487,6 +4643,12 @@
     background: #e6e9ec;
   }
 
+  .q-kEebOH:is(:hover, :focus-visible) [data-component-name="Button.StyledButton"] {
+    background: #fff linear-gradient(#0070d2e6, #0070d2e6);
+    background: linear-gradient(var(--q-bQGTFq),var(--q-bQGTFq)) #fff;
+    background: linear-gradient(var(--q-bQGTFq),var(--q-bQGTFq)) var(--q-button-hover-background-layer, #fff);
+  }
+
   .q-fRIQMO:focus-visible {
     outline: 2px solid #0070d2;
     outline: 2px solid var(--q-bebYds);
@@ -4549,6 +4711,11 @@
     outline: none;
   }
 
+  .q-hHgwIf:is(:hover, :focus-visible) [data-component-name="Button.StyledButton"] {
+    border-color: #0000;
+    border-color: var(--q-eBDiUw);
+  }
+
   .q-jtPCJn:has(select:focus-visible) {
     outline: 2px solid #0070d2;
     outline: 2px solid var(--q-bebYds);
@@ -4626,6 +4793,10 @@
     visibility: visible;
   }
 
+  .q-kELdYL:is(:hover, :focus-visible) [data-component-name="Button.StyledButton"] {
+    color: var(--q-kHrcNZ);
+  }
+
   .q-iayYaR:has(select:focus-visible) {
     outline-offset: -2px;
   }
@@ -4636,11 +4807,16 @@
     background: linear-gradient(var(--q-bQGTFq),var(--q-bQGTFq)) var(--q-button-hover-background-layer, #fff);
   }
 
+  .q-hnauCG:hover {
+    background: none;
+    background: var(--q-cWcXnW);
+  }
+
   .q-jjvLow:hover {
     background: #e6e9ec;
   }
 
-  .q-hKPjHd:hover, .q-ixOhNh:hover:not(:disabled) {
+  .q-ixOhNh:hover:not(:disabled), .q-hKPjHd:hover {
     background: #0000000f;
   }
 
@@ -4689,6 +4865,10 @@
     color: var(--q-kHrcNZ);
   }
 
+  .q-crUTNY:hover {
+    box-shadow: none;
+  }
+
   .q-MuFSQ:hover {
     color: var(--q-ckoJkw);
   }
@@ -4880,10 +5060,6 @@
       height: 100%;
     }
 
-    .q-gfNJoW {
-      height: 40%;
-    }
-
     .q-jMeGMD {
       height: 50%;
     }
@@ -4914,7 +5090,7 @@
       height: 24px;
     }
 
-    .q-cAmJVr > [part="multimodal"], .q-kSIGpb > [part="multimodal"] {
+    .q-kSIGpb > [part="multimodal"], .q-cAmJVr > [part="multimodal"] {
       padding: 0;
     }
 
@@ -4926,7 +5102,28 @@
       z-index: 1001;
     }
 
-    .q-cEUyLT > [part="toolbar"], .q-kxvSgE > [part="chat"], .q-kxvSgE > [part="input"], .q-kxvSgE > [part="privacy"] {
+    .q-kxvSgE > [part="chat"], .q-kxvSgE > [part="input"], .q-kxvSgE > [part="privacy"] {
+      display: none;
+    }
+
+    .q-iNDLkz > [part="artifact"] {
+      background-color: #00000080;
+    }
+
+    .q-isJuhH > [part="artifact"] {
+      -webkit-backdrop-filter: blur(2px);
+      backdrop-filter: blur(2px);
+    }
+
+    .q-cbBLhX > [part="artifact"] {
+      z-index: 2;
+    }
+
+    .q-gTaxHS > [part="multimodal"] {
+      z-index: 3;
+    }
+
+    .q-cEUyLT > [part="toolbar"] {
       display: none;
     }
 
@@ -5007,13 +5204,30 @@
       width: 100%;
     }
 
-    .q-kdQNtG > [part="artifact"] {
-      height: 60%;
+    .q-xjpwZ > [part="artifact"] {
+      height: 100%;
     }
 
     .q-gZeTFg > [part="artifact"] {
       height: 80%;
     }
+
+    .q-hSCbuw > [part="multimodal"] {
+      bottom: 24px;
+      bottom: calc(24px + var(--q-bottom-offset, 0px));
+    }
+
+    .q-iWYrFM > [part="multimodal"] {
+      right: 24px;
+    }
+
+    .q-gUeaVj > [part="multimodal"] {
+      width: fit-content;
+    }
+
+    .q-bEbKWC > [part="multimodal"] {
+      height: auto;
+    }
   }
 
   @container bookerPanel (width <= 720px) {
@@ -5178,7 +5392,7 @@
       transform: translateY(calc(-100% - 8px));
     }
 
-    .q-eQFZen > [data-chat-controls], .q-lgmAsb > [part="controls"] {
+    .q-lgmAsb > [part="controls"], .q-eQFZen > [data-chat-controls] {
       opacity: 1;
     }
 
@@ -5235,6 +5449,10 @@
     .q-iLwSqI {
       opacity: .14;
     }
+
+    .q-bfvFLs:hover {
+      transform: none;
+    }
   }
 }
 

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "@qualified-salesforce/web",
-  "version": "0.0.1-oidc-bootstrap",
-  "description": "Embeddable Qualified messenger widget for self-hosted deployments.",
+  "version": "0.1.1",
+  "description": "Embeddable Qualified messenger widget (text-only ESM build).",
   "license": "SEE LICENSE IN LICENSE.txt",
+  "private": false,
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FatbearLabs/fireball.git",
+    "directory": "npm-package/package-esm"
+  },
   "exports": {
-    ".": "./packs/widget/esm/index.js",
+    ".": {
+      "types": "./packs/widget/esm/index.d.ts",
+      "default": "./packs/widget/esm/index.js"
+    },
     "./qualified.css": "./packs/widget/esm/qualified.css"
   },
   "sideEffects": [
@@ -16,5 +25,10 @@
     "./widget/multimodal_v2/index.panda.js",
     "./widget/utils/native_globals.js",
     "./packs/widget/esm/index.js"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": false,
+    "tag": "next"
+  }
 }

package/packs/widget/api/docking/viewport_lock.js

@@ -205,6 +205,29 @@ function swapMarginWithPadding(body) {
     whenBodyAvailable((body)=>{
         markOverflowTraps(body);
         observeBodyChildList(body);
+        reScanOnLoad(body);
+    });
+}
+/**
+ * Re-runs {@link markOverflowTraps} once the document has finished loading.
+ *
+ * Both of the scan's decisions read layout that late content can still change:
+ * whether an element clips overflowing content, and whether `<body>` ends up
+ * scrollable (see {@link restoreStrandedScrollers}). A pass that runs while
+ * images / async sections are still arriving can therefore miss a trap, or
+ * roll one back that should have stood.
+ *
+ * Nothing else closes that window: the childList observer is skipped once the
+ * document is complete and disconnects after
+ * {@link OVERFLOW_TRAP_OBSERVER_LIFETIME_MS}, and `reEvaluate` only re-enters
+ * on host navigation. `applyOnce` keeps repeated `reEvaluate` calls from
+ * stacking listeners.
+ */ function reScanOnLoad(body) {
+    if (document.readyState === "complete") return;
+    applyOnce(body, "" + DOCKING_PROXY_MARKER + "_overflow_trap_load", (b)=>{
+        __nativeWindowAddEventListener("load", ()=>markOverflowTraps(b), {
+            once: true
+        });
     });
 }
 /** Bounds the MutationObserver's lifetime so long-lived pages don't keep re-scanning. */ const OVERFLOW_TRAP_OBSERVER_LIFETIME_MS = 5000;
@@ -235,6 +258,11 @@ function swapMarginWithPadding(body) {
  * its art keeps its clip, but low enough to catch tall content sections
  * (~1.4× viewport) that would otherwise trap the wheel.
  */ const SHELL_PASS_THROUGH_VIEWPORT_RATIO = 1.25;
+/**
+ * Margin by which `scrollHeight` must exceed `clientHeight` before an element
+ * counts as having overflowing content. Covers sub-pixel rounding and
+ * scrollbar-gutter reservation.
+ */ const SCROLL_OVERFLOW_SLACK_PX = 4;
 /**
  * Walks body's subtree post-order, marking each qualifying scroll trap. Post-
  * order is load-bearing: marking an inner trap exposes its previously-clipped
@@ -255,6 +283,10 @@ function swapMarginWithPadding(body) {
     for (const el of body.querySelectorAll("[" + OVERFLOW_TRAP_ATTRIBUTE + "]")){
         el.removeAttribute(OVERFLOW_TRAP_ATTRIBUTE);
     }
+    // Scroll containers this pass clipped, with the range each one lost, so
+    // {@link restoreStrandedScrollers} can tell a real handoff to `<body>` from
+    // one that left the content unreachable.
+    const clipped = [];
     const visit = (el, depth)=>{
         if (depth < OVERFLOW_TRAP_MAX_DEPTH) {
             for (const child of el.children){
@@ -262,12 +294,72 @@ function swapMarginWithPadding(body) {
             }
         }
         if (isOverflowTrap(el, depth, dims)) {
+            // Measure before the write — the attribute changes the computed overflow.
+            const lostRange = scrollRangeOf(el);
+            if (lostRange > 0) clipped.push({
+                el,
+                lostRange
+            });
             el.setAttribute(OVERFLOW_TRAP_ATTRIBUTE, "");
         }
     };
     for (const child of body.children){
         if (child instanceof HTMLElement) visit(child, 1);
     }
+    restoreStrandedScrollers(body, clipped);
+}
+/**
+ * How far `el` can currently be scrolled, or 0 when it is not a functioning
+ * scroll container.
+ *
+ * A `hidden` / `clip` trap scores 0 even when its content overflows: it eats
+ * the wheel without ever scrolling, so opening it up cannot take scrolling
+ * away. Only `auto` / `scroll` elements can lose something.
+ */ function scrollRangeOf(el) {
+    const { overflowY } = getComputedStyle(el);
+    if (!/auto|scroll/.test(overflowY)) return 0;
+    const range = el.scrollHeight - el.clientHeight;
+    return range > SCROLL_OVERFLOW_SLACK_PX ? range : 0;
+}
+/**
+ * Undoes trap marks that took the page's scrolling away without giving
+ * `<body>` anything to scroll in exchange.
+ *
+ * Opening up an `overflow-y: auto` shell is only sound when its content can
+ * flow into body's scroll range once the clip is lifted. On a host whose shell
+ * chain is pinned to the viewport (`height: 100vh` the whole way down) it
+ * cannot: the marked element keeps its fixed height, body's `scrollHeight`
+ * never grows, and `overflow: clip` has meanwhile destroyed the only scroller
+ * on the page — so the document freezes and the visitor can't reach the
+ * content below the fold.
+ *
+ * Only marks on live scroll containers roll back. A `hidden` / `clip` trap
+ * never scrolled, so opening it up can't take scrolling away, and leaving
+ * those marked preserves the original heuristic's behaviour.
+ *
+ * The handoff is judged by range rather than by "body scrolls at all": a
+ * pinned shell can carry a little unrelated body overflow (a banner, a
+ * stray footer) while the clipped scroller gave up hundreds of pixels, and
+ * treating those few pixels as success would leave the content unreachable.
+ * `<body>` has to gain at least as much range as the largest clipped
+ * scroller lost. Largest rather than total, since nested scrollers overlap
+ * and summing them would demand range the page never had.
+ *
+ * A zero-height body means layout isn't available (jsdom, or a pass that ran
+ * before first paint) and the comparison would be meaningless, so leave the
+ * marks alone — `markOverflowTraps` is idempotent and later passes re-decide
+ * against real numbers.
+ */ function restoreStrandedScrollers(body, clipped) {
+    if (clipped.length === 0) return;
+    if (body.clientHeight === 0) return;
+    // This read flushes the attribute writes above, so body's scrollHeight
+    // already reflects the clipped descendants.
+    const bodyRange = body.scrollHeight - body.clientHeight;
+    const lostRange = Math.max(...clipped.map((c)=>c.lostRange));
+    if (bodyRange >= lostRange) return;
+    for (const { el } of clipped){
+        el.removeAttribute(OVERFLOW_TRAP_ATTRIBUTE);
+    }
 }
 function isOverflowTrap(el, depth, dims) {
     const { overflowY, position } = getComputedStyle(el);
@@ -284,8 +376,7 @@ function isOverflowTrap(el, depth, dims) {
     if (position && position !== "static" && position !== "relative") return false;
     if (el.offsetWidth < dims.minW) return false;
     // Active trap: full-size clipper with currently-overflowing content.
-    // 4px slack covers sub-pixel rounding and scrollbar-gutter reservation.
-    if (el.offsetHeight >= dims.minH && el.scrollHeight > el.clientHeight + 4) {
+    if (el.offsetHeight >= dims.minH && el.scrollHeight > el.clientHeight + SCROLL_OVERFLOW_SLACK_PX) {
         return true;
     }
     // Page-shell pass-through: tall clipper whose scrollHeight === clientHeight