@genesislcap/ai-assistant 15.28.0 → 15.28.1-FUI-0.7

package/dist/custom-elements.json

@@ -1209,6 +1209,21 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "activeChanged",
+              "description": "Start/stop with `active`, so an idle overlay costs nothing.\n\nGuarded on `isConnected` because FAST invokes attribute-changed callbacks during\ninitialisation, before the element is in the document — `connectedCallback` is what decides\nfor an element that mounts already-active."
+            },
+            {
+              "kind": "method",
+              "name": "startAnimation",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "stopAnimation",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "tick",

package/dist/dts/components/chat-bubble/chat-bubble.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-bubble.template.d.ts","sourceRoot":"","sources":["../../../../src/components/chat-bubble/chat-bubble.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,YAAY,EAAQ,MAAM,uBAAuB,CAAC;AACvF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAgBlD,eAAO,MAAM,oBAAoB,QAAO,YAAY,CAAC,YAAY,CAiDhE,CAAC"}
+{"version":3,"file":"chat-bubble.template.d.ts","sourceRoot":"","sources":["../../../../src/components/chat-bubble/chat-bubble.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,YAAY,EAAQ,MAAM,uBAAuB,CAAC;AACvF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAgBlD,eAAO,MAAM,oBAAoB,QAAO,YAAY,CAAC,YAAY,CAmDhE,CAAC"}

package/dist/dts/components/halo-overlay.d.ts

@@ -31,8 +31,18 @@ export declare class AiHaloOverlay extends GenesisElement {
     private angle;
     private lastTime?;
     private animFrame?;
+    /**
+     * Start/stop with `active`, so an idle overlay costs nothing.
+     *
+     * Guarded on `isConnected` because FAST invokes attribute-changed callbacks during
+     * initialisation, before the element is in the document — `connectedCallback` is what decides
+     * for an element that mounts already-active.
+     */
+    activeChanged(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private startAnimation;
+    private stopAnimation;
     private tick;
 }
 //# sourceMappingURL=halo-overlay.d.ts.map

package/dist/dts/components/halo-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"halo-overlay.d.ts","sourceRoot":"","sources":["../../../src/components/halo-overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,cAAc,EAAQ,MAAM,uBAAuB,CAAC;AAwBvF;;;;;;;;;;;;GAYG;AACH,qBA0Ea,aAAc,SAAQ,cAAc;IACpB,MAAM,EAAE,OAAO,CAAS;IACnD,+FAA+F;IACpC,KAAK,EAAE,MAAM,CAAsB;IAC9F,qDAAqD;IAC/C,SAAS,EAAE,IAAI,GAAG,KAAK,CAAQ;IACrC,0CAA0C;IAE1C,UAAU,EAAE,MAAM,CAA4B;IAC9C,+CAA+C;IAE/C,WAAW,EAAE,MAAM,CAA6B;IAChD,2GAA2G;IAE3G,UAAU,EAAE,MAAM,CAA4B;IAE9C,iBAAiB;IAIjB,kBAAkB;IAIlB,iBAAiB;IAUjB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAO;IAEhD,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,QAAQ,CAAC,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAC,CAAS;IAE3B,iBAAiB;IAKjB,oBAAoB;IAUpB,OAAO,CAAC,IAAI;CAiBb"}
+{"version":3,"file":"halo-overlay.d.ts","sourceRoot":"","sources":["../../../src/components/halo-overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,cAAc,EAAQ,MAAM,uBAAuB,CAAC;AAwBvF;;;;;;;;;;;;GAYG;AACH,qBA0Ea,aAAc,SAAQ,cAAc;IACpB,MAAM,EAAE,OAAO,CAAS;IACnD,+FAA+F;IACpC,KAAK,EAAE,MAAM,CAAsB;IAC9F,qDAAqD;IAC/C,SAAS,EAAE,IAAI,GAAG,KAAK,CAAQ;IACrC,0CAA0C;IAE1C,UAAU,EAAE,MAAM,CAA4B;IAC9C,+CAA+C;IAE/C,WAAW,EAAE,MAAM,CAA6B;IAChD,2GAA2G;IAE3G,UAAU,EAAE,MAAM,CAA4B;IAE9C,iBAAiB;IAIjB,kBAAkB;IAIlB,iBAAiB;IAkBjB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAO;IAEhD,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,QAAQ,CAAC,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAC,CAAS;IAE3B;;;;;;OAMG;IACH,aAAa;IAMb,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,IAAI;CAiBb"}

package/dist/dts/main/main.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAEV,WAAW,EAGZ,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAuC,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAQ1F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAyHpD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,wBAAwB,kDAWpC,CAAC;AAoJF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,oBAAoB,GAAI,GAAG,qBAAqB,KAAG,MAYlD,CAAC;AAEf;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,mBAAmB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,mBAAmB,GAAI,GAAG,qBAAqB,KAAG,MAAM,GAAG,IACpB,CAAC;AAyJrD,eAAO,MAAM,6BAA6B,GACxC,oBAAoB,MAAM,KACzB,YAAY,CAAC,qBAAqB,CA2qBpC,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAEV,WAAW,EAGZ,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAuC,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAQ1F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAsIpD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,wBAAwB,kDAWpC,CAAC;AAoJF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,oBAAoB,GAAI,GAAG,qBAAqB,KAAG,MAYlD,CAAC;AAEf;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,mBAAmB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,mBAAmB,GAAI,GAAG,qBAAqB,KAAG,MAAM,GAAG,IACpB,CAAC;AAyJrD,eAAO,MAAM,6BAA6B,GACxC,oBAAoB,MAAM,KACzB,YAAY,CAAC,qBAAqB,CA8rBpC,CAAC"}

package/dist/dts/suggestions/chat-suggestions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-suggestions.d.ts","sourceRoot":"","sources":["../../../src/suggestions/chat-suggestions.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,EAMf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAuJ3D,qBAKa,eAAgB,SAAQ,cAAc;IAEjD,KAAK,EAAE,gBAAgB,CAAsB;IAE7C;;;;OAIG;IACkD,UAAU,UAAS;IAExE,YAAY,IAAI,IAAI;IAKpB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;CAGhD"}
+{"version":3,"file":"chat-suggestions.d.ts","sourceRoot":"","sources":["../../../src/suggestions/chat-suggestions.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,EAMf,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAwJ3D,qBAKa,eAAgB,SAAQ,cAAc;IAEjD,KAAK,EAAE,gBAAgB,CAAsB;IAE7C;;;;OAIG;IACkD,UAAU,UAAS;IAExE,YAAY,IAAI,IAAI;IAKpB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;CAGhD"}

package/dist/esm/components/chat-bubble/chat-bubble.template.js

@@ -17,6 +17,7 @@ export const AiChatBubbleTemplate = () => {
     ${when((x) => !x.dialogOpen, html `
         <div
           class="bubble ${(x) => (x.hovered ? 'hovered' : '')}"
+          part="bubble"
           style="${(x) => `translate: ${x.bubbleLeft}px ${x.bubbleTop}px`}"
           ${ref('bubbleEl')}
           @mousedown="${(x, c) => x.onBubbleMouseDown(c.event)}"
@@ -27,8 +28,8 @@ export const AiChatBubbleTemplate = () => {
               <img src="${(x) => x.imageSrc}" alt="AI" draggable="false" />
             `)}
           ${when((x) => !x.imageSrc, genesisIconTemplate)}
-          <div class="pulse-ring"></div>
-          <div class="tooltip" style="${(x) => x.tooltipStyle}" ${ref('tooltipEl')}>
+          <div class="pulse-ring" part="pulse-ring"></div>
+          <div class="tooltip" part="tooltip" style="${(x) => x.tooltipStyle}" ${ref('tooltipEl')}>
             ${(x) => x.title}
           </div>
         </div>
@@ -41,11 +42,12 @@ export const AiChatBubbleTemplate = () => {
     (x) => (x.dialogOpen ? [x] : []), html `
         <div
           class="dialog"
+          part="dialog"
           style="${(x) => `translate: ${x.dialogLeft}px ${x.dialogTop}px; width: ${x.dialogWidth}px; height: ${x.dialogHeight}px`}"
           @chat-header-mousedown="${(x, c) => x.onDialogHeaderMouseDown(c.event)}"
           ${ref('dialogEl')}
         >
-          <div class="dialog-content">
+          <div class="dialog-content" part="dialog-content">
             <slot name="dialog-content" ${slotted('dialogContent')}></slot>
           </div>
         </div>

package/dist/esm/components/halo-overlay.js

@@ -55,17 +55,45 @@ let AiHaloOverlay = AiHaloOverlay_1 = class AiHaloOverlay extends GenesisElement
     glowSpreadChanged() {
         this.style.setProperty('--halo-glow-spread', `${this.glowSpread}%`);
     }
+    /**
+     * Start/stop with `active`, so an idle overlay costs nothing.
+     *
+     * Guarded on `isConnected` because FAST invokes attribute-changed callbacks during
+     * initialisation, before the element is in the document — `connectedCallback` is what decides
+     * for an element that mounts already-active.
+     */
+    activeChanged() {
+        if (!this.isConnected)
+            return;
+        if (this.active)
+            this.startAnimation();
+        else
+            this.stopAnimation();
+    }
     connectedCallback() {
         super.connectedCallback();
-        this.tick();
+        if (this.active)
+            this.startAnimation();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.stopAnimation();
+    }
+    startAnimation() {
+        // Re-entrant: `activeChanged` can fire for a value that is already applied, and a second
+        // scheduled frame would double the rotation speed and leak the first handle.
+        if (this.animFrame !== undefined)
+            return;
+        this.tick();
+    }
+    stopAnimation() {
         if (this.animFrame !== undefined) {
             cancelAnimationFrame(this.animFrame);
             this.animFrame = undefined;
         }
-        // Reset the clock so a later reconnect doesn't apply one huge time delta.
+        // Reset the clock so a later restart doesn't apply one huge time delta. `angle` is
+        // deliberately NOT reset: the halo fades out on opacity, so resuming from where it stopped
+        // avoids a visible jump when it comes back.
         this.lastTime = undefined;
     }
     tick(now) {
@@ -86,11 +114,19 @@ let AiHaloOverlay = AiHaloOverlay_1 = class AiHaloOverlay extends GenesisElement
         this.animFrame = requestAnimationFrame((t) => this.tick(t));
     }
 };
-// TODO: The rAF loop is fine for demos but has two drawbacks vs a pure CSS @property animation:
-// 1. It runs on the main thread, so heavy JS work can cause the animation to stutter.
-// 2. The loop ticks even when `active` is false (idle cost is negligible but non-zero).
-// Once @property inside Shadow DOM has solid cross-browser support, consider switching back
-// to a CSS @keyframes approach and removing connectedCallback/disconnectedCallback/tick().
+// TODO: The rAF loop is fine for demos but runs on the main thread, so heavy JS work can cause
+// the animation to stutter. Once @property inside Shadow DOM has solid cross-browser support,
+// consider switching back to a CSS @keyframes approach and removing
+// connectedCallback/disconnectedCallback/tick().
+//
+// The loop is GATED ON `active` (see startAnimation/stopAnimation). It used to tick
+// unconditionally from connectedCallback, which was written off as "negligible but non-zero"
+// idle cost — that undersold it. Every tick writes `--halo-angle` as an INLINE STYLE, so an
+// idle overlay mutates its own style attribute ~60x a second for the lifetime of the page.
+// Hosts mount these permanently and only toggle `active` (activity-halo and the assistant's
+// own chrome both do), so a typical app had several overlays rewriting inline styles forever
+// while showing nothing. The visible cost is in devtools: the Elements panel repaints on every
+// mutation, which makes inspecting or live-editing anywhere in the tree impractical.
 AiHaloOverlay.FULL_ROTATION_DEG = 360;
 __decorate([
     attr({ mode: 'boolean' })

package/dist/esm/main/main.template.js

@@ -47,10 +47,19 @@ const assistantAvatarTemplate = html `
     const parent = c.parent;
     return parent.imageSrc
         ? html `
-          <img src="${() => parent.imageSrc}" alt="Assistant" class="avatar-img" />
+          <img
+            src="${() => parent.imageSrc}"
+            alt="Assistant"
+            class="avatar-img"
+            part="avatar-img"
+          />
         `
         : html `
-          <span class="avatar-icon" :innerHTML="${() => parent.assistantIconSafe}"></span>
+          <span
+            class="avatar-icon"
+            part="avatar-icon"
+            :innerHTML="${() => parent.assistantIconSafe}"
+          ></span>
         `;
 }}
 `;
@@ -59,10 +68,14 @@ const userAvatarTemplate = html `
     const parent = c.parent;
     return parent.userImageSrc
         ? html `
-          <img src="${() => parent.userImageSrc}" alt="You" class="avatar-img" />
+          <img src="${() => parent.userImageSrc}" alt="You" class="avatar-img" part="avatar-img" />
         `
         : html `
-          <span class="avatar-icon" :innerHTML="${() => parent.userIconSafe}"></span>
+          <span
+            class="avatar-icon"
+            part="avatar-icon"
+            :innerHTML="${() => parent.userIconSafe}"
+          ></span>
         `;
 }}
 `;
@@ -513,7 +526,10 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
         <div
           class="message-row ${(m) => messageType(m)} ${(m) => m.interaction ? `present-${interactionPresentation(m)}` : ''}"
         >
-          <div class="avatar ${(m) => messageType(m)}">
+          <div
+            class="avatar ${(m) => messageType(m)}"
+            part="${(m) => `avatar avatar-${messageType(m)}`}"
+          >
             ${when(
     // Keyed on messageType (not raw role) so a synthetic-user message,
     // which renders as 'user', gets the user avatar rather than the
@@ -528,8 +544,8 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
     // A 'bare' interaction owns its full presentation — suppress the
     // host sender label. Every other message keeps it.
     (m) => !(m.interaction && interactionPresentation(m) === 'bare'), html `
-                <div class="sender">
-                  <span class="sender-label">
+                <div class="sender" part="sender">
+                  <span class="sender-label" part="sender-label">
                     ${(m, c) => {
         var _a;
         return messageType(m) === 'ai-function' &&
@@ -547,7 +563,7 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
         c.parent.timestampDisplay !== 'off', messageTimestampTemplate)}
                 </div>
               `)}
-            <div class="content">
+            <div class="content" part="content">
               ${when((m) => m.content, html `
                   <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
                 `)}
@@ -833,12 +849,27 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
             ${when((x) => !!x.headerTitle, html `
                 <span class="chat-title" part="chat-title">${(x) => x.headerTitle}</span>
               `)}
+            <!--
+              The two buttons below re-publish rapid-button's inner parts (control, content) into
+              THIS component's part namespace via exportparts.
+
+              Without it they are unreachable by an embedding app: part() crosses exactly one shadow
+              boundary, and the control sits two away (app -> foundation-ai-assistant ->
+              rapid-button -> control). Exposing only the button host leaves an app able to size the
+              box but not the padded control inside it, which is how Genesis Create ended up sizing
+              the host and clipping the overflow to flatten these buttons - a workaround for a
+              missing hook rather than a styling choice.
+
+              Named with the owning button as a prefix so the namespace stays legible as more parts
+              are exported, and so control does not collide across buttons.
+            -->
             <div class="header-actions" part="header-actions">
               <slot name="header-actions-extra"></slot>
               ${when((x) => !!x.popoutMode, html `
                   <${buttonTag}
                     class="popout-button"
                     part="popout-button"
+                    exportparts="control: popout-button-control, content: popout-button-content"
                     appearance="stealth"
                     title="${(x) => (x.popoutMode === 'expand' ? 'Expand to panel' : 'Pop back to bubble')}"
                     ?disabled=${(x) => x.hasActivePendingInteraction}
@@ -848,6 +879,7 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
               <${buttonTag}
                 class="settings-button"
                 part="settings-button"
+                exportparts="control: settings-button-control, content: settings-button-content"
                 appearance="stealth"
                 title="Settings"
                 aria-haspopup="dialog"

package/dist/esm/suggestions/chat-suggestions.js

@@ -3,17 +3,18 @@ import { attr, customElement, GenesisElement, observable, html, css, repeat, whe
 const PILL_ANIMATION_STAGGER_MS = 70;
 const template = html `
   ${when((x) => x.state.status === 'loading', html `
-      <div class="suggestions-container">
+      <div class="suggestions-container" part="suggestions-container">
         ${repeat(() => Array.from({ length: 3 }), html `
-            <div class="suggestion-placeholder"></div>
+            <div class="suggestion-placeholder" part="suggestion-placeholder"></div>
           `)}
       </div>
     `)}
   ${when((x) => x.state.status === 'loaded', html `
-      <div class="suggestions-container">
+      <div class="suggestions-container" part="suggestions-container">
         ${repeat((x) => x.state.suggestions, html `
             <button
               class="suggestion-pill"
+              part="suggestion-pill"
               style="animation-delay: ${(_, c) => c.index * PILL_ANIMATION_STAGGER_MS}ms"
               @click="${(suggestion, c) => c.parent.handleSuggestionClick(suggestion)}"
             >

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ai-assistant",
   "description": "Genesis AI Assistant micro-frontend",
-  "version": "15.28.0",
+  "version": "15.28.1-FUI-0.7",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/ai-assistant.d.ts",
@@ -74,26 +74,26 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "15.28.0",
-    "@genesislcap/genx": "15.28.0",
-    "@genesislcap/rollup-builder": "15.28.0",
-    "@genesislcap/ts-builder": "15.28.0",
-    "@genesislcap/uvu-playwright-builder": "15.28.0",
-    "@genesislcap/vite-builder": "15.28.0",
-    "@genesislcap/webpack-builder": "15.28.0",
+    "@genesislcap/foundation-testing": "15.28.1-FUI-0.7",
+    "@genesislcap/genx": "15.28.1-FUI-0.7",
+    "@genesislcap/rollup-builder": "15.28.1-FUI-0.7",
+    "@genesislcap/ts-builder": "15.28.1-FUI-0.7",
+    "@genesislcap/uvu-playwright-builder": "15.28.1-FUI-0.7",
+    "@genesislcap/vite-builder": "15.28.1-FUI-0.7",
+    "@genesislcap/webpack-builder": "15.28.1-FUI-0.7",
     "@types/dompurify": "^3.0.5",
     "@types/marked": "^5.0.2",
     "esbuild": "0.25.12"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "15.28.0",
-    "@genesislcap/foundation-logger": "15.28.0",
-    "@genesislcap/foundation-notifications": "15.28.0",
-    "@genesislcap/foundation-redux": "15.28.0",
-    "@genesislcap/foundation-ui": "15.28.0",
-    "@genesislcap/foundation-utils": "15.28.0",
-    "@genesislcap/rapid-design-system": "15.28.0",
-    "@genesislcap/web-core": "15.28.0",
+    "@genesislcap/foundation-ai": "15.28.1-FUI-0.7",
+    "@genesislcap/foundation-logger": "15.28.1-FUI-0.7",
+    "@genesislcap/foundation-notifications": "15.28.1-FUI-0.7",
+    "@genesislcap/foundation-redux": "15.28.1-FUI-0.7",
+    "@genesislcap/foundation-ui": "15.28.1-FUI-0.7",
+    "@genesislcap/foundation-utils": "15.28.1-FUI-0.7",
+    "@genesislcap/rapid-design-system": "15.28.1-FUI-0.7",
+    "@genesislcap/web-core": "15.28.1-FUI-0.7",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3"
   },