@genesislcap/ai-assistant 14.461.0 → 14.461.2

package/dist/dts/components/flowing-waves-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flowing-waves-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/flowing-waves-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,cAAc,EAAQ,MAAM,uBAAuB,CAAC;AA6GjF;;;;;;;;;;;;;;;GAeG;AACH,qBAwDa,uBAAwB,SAAQ,cAAc;IAKzD,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,SAAS,CAAC,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAC,CAAmB;IAErC,iBAAiB;IAQjB,oBAAoB;IAQpB,OAAO,CAAC,IAAI;IAmBZ;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,SAAS;CA6BzB"}
+{"version":3,"file":"flowing-waves-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/flowing-waves-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,cAAc,EAAQ,MAAM,uBAAuB,CAAC;AAiHjF;;;;;;;;;;;;;;;GAeG;AACH,qBA0Da,uBAAwB,SAAQ,cAAc;IAKzD,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,SAAS,CAAC,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAC,CAAmB;IAErC,iBAAiB;IAQjB,oBAAoB;IAQpB,OAAO,CAAC,IAAI;IAmBZ;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,SAAS;CA6BzB"}

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

@@ -1 +1 @@
-{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM,iDA83BlB,CAAC"}
+{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM,iDAq4BlB,CAAC"}

package/dist/esm/components/flowing-waves-indicator.js

@@ -2,9 +2,15 @@ var AiFlowingWavesIndicator_1;
 import { __decorate } from "tslib";
 import { css, customElement, GenesisElement, html } from '@genesislcap/web-core';
 import { AI_COLOUR_AMBER, AI_COLOUR_CYAN, AI_COLOUR_PINK, AI_COLOUR_VIOLET, } from '../styles/ai-colours';
-/** SVG coordinate space the bands are drawn in (aspect matches the host box). */
+/**
+ * SVG coordinate space the bands are drawn in. The bands stretch to fill the
+ * host box (the band SVGs use `preserveAspectRatio="none"`), so this aspect need
+ * not match the host's. `VIEW_H` is kept just tall enough to bound the crests,
+ * leaving minimal dead space above/below the line — otherwise the waves float in
+ * the vertical middle of the host and read as sitting too low beside the avatar.
+ */
 const VIEW_W = 225;
-const VIEW_H = 90;
+const VIEW_H = 50;
 const CENTRE_Y = VIEW_H / 2;
 /** Number of samples traced across each band. */
 const POINTS = 90;
@@ -64,9 +70,7 @@ const BANDS = [
 // `mix-blend-mode: screen`, which composites reliably between HTML-level layers
 // but NOT between sibling SVG <path>/<g> elements in many browsers — hence one
 // svg per band rather than four paths in a single svg.
-const bandLayersMarkup = BANDS.map((_b, i) => `<svg class="layer band-layer" viewBox="0 0 ${VIEW_W} ${VIEW_H}">` +
-    `<path class="band b${i + 1}" data-band="${i}" />` +
-    `</svg>`).join('');
+const bandLayersMarkup = BANDS.map((_b, i) => `<svg class="layer band-layer" viewBox="0 0 ${VIEW_W} ${VIEW_H}" preserveAspectRatio="none"><path class="band b${i + 1}" data-band="${i}" /></svg>`).join('');
 /**
  * Animated "flowing waves" loading indicator — coloured organic waves (in the
  * four brand colours) whose bumps swell, shrink, merge and split across a line,
@@ -171,7 +175,9 @@ AiFlowingWavesIndicator = AiFlowingWavesIndicator_1 = __decorate([
     :host {
       display: inline-block;
       width: 180px;
-      height: 72px;
+      /* Height matches the message avatar (32px) so the wave line sits level
+         with it. The bands stretch to fill via preserveAspectRatio="none". */
+      height: 32px;
     }
 
     /* Transparent — sits directly on the chat surface (no backdrop). 'isolation:

package/dist/esm/main/main.styles.js

@@ -851,6 +851,13 @@ export const styles = css `
     padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
   }
 
+  /* The flowing-waves host is the avatar's height (32px), so drop the top padding
+     the shared rule adds — that keeps the wave line level with the avatar instead
+     of dropping it toward the row's vertical centre. */
+  .thinking-flowing-waves {
+    padding-top: 0;
+  }
+
   .thinking-caption {
     font-size: var(--type-ramp-minus-1-font-size, 12px);
     line-height: var(--type-ramp-minus-1-line-height, 16px);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ai-assistant",
   "description": "Genesis AI Assistant micro-frontend",
-  "version": "14.461.0",
+  "version": "14.461.2",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/ai-assistant.d.ts",
@@ -64,24 +64,24 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.461.0",
-    "@genesislcap/genx": "14.461.0",
-    "@genesislcap/rollup-builder": "14.461.0",
-    "@genesislcap/ts-builder": "14.461.0",
-    "@genesislcap/uvu-playwright-builder": "14.461.0",
-    "@genesislcap/vite-builder": "14.461.0",
-    "@genesislcap/webpack-builder": "14.461.0",
+    "@genesislcap/foundation-testing": "14.461.2",
+    "@genesislcap/genx": "14.461.2",
+    "@genesislcap/rollup-builder": "14.461.2",
+    "@genesislcap/ts-builder": "14.461.2",
+    "@genesislcap/uvu-playwright-builder": "14.461.2",
+    "@genesislcap/vite-builder": "14.461.2",
+    "@genesislcap/webpack-builder": "14.461.2",
     "@types/dompurify": "^3.0.5",
     "@types/marked": "^5.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "14.461.0",
-    "@genesislcap/foundation-logger": "14.461.0",
-    "@genesislcap/foundation-redux": "14.461.0",
-    "@genesislcap/foundation-ui": "14.461.0",
-    "@genesislcap/foundation-utils": "14.461.0",
-    "@genesislcap/rapid-design-system": "14.461.0",
-    "@genesislcap/web-core": "14.461.0",
+    "@genesislcap/foundation-ai": "14.461.2",
+    "@genesislcap/foundation-logger": "14.461.2",
+    "@genesislcap/foundation-redux": "14.461.2",
+    "@genesislcap/foundation-ui": "14.461.2",
+    "@genesislcap/foundation-utils": "14.461.2",
+    "@genesislcap/rapid-design-system": "14.461.2",
+    "@genesislcap/web-core": "14.461.2",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3"
   },
@@ -93,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d87c27bf9e91f6f5d1cf51992e7892df9434c9be"
+  "gitHead": "7999f5af9df17157002c463d10fe75a14ac43521"
 }

package/src/components/flowing-waves-indicator.ts

@@ -6,9 +6,15 @@ import {
   AI_COLOUR_VIOLET,
 } from '../styles/ai-colours';
 
-/** SVG coordinate space the bands are drawn in (aspect matches the host box). */
+/**
+ * SVG coordinate space the bands are drawn in. The bands stretch to fill the
+ * host box (the band SVGs use `preserveAspectRatio="none"`), so this aspect need
+ * not match the host's. `VIEW_H` is kept just tall enough to bound the crests,
+ * leaving minimal dead space above/below the line — otherwise the waves float in
+ * the vertical middle of the host and read as sitting too low beside the avatar.
+ */
 const VIEW_W = 225;
-const VIEW_H = 90;
+const VIEW_H = 50;
 const CENTRE_Y = VIEW_H / 2;
 /** Number of samples traced across each band. */
 const POINTS = 90;
@@ -102,9 +108,7 @@ const BANDS: BandConfig[] = [
 // svg per band rather than four paths in a single svg.
 const bandLayersMarkup = BANDS.map(
   (_b, i) =>
-    `<svg class="layer band-layer" viewBox="0 0 ${VIEW_W} ${VIEW_H}">` +
-    `<path class="band b${i + 1}" data-band="${i}" />` +
-    `</svg>`,
+    `<svg class="layer band-layer" viewBox="0 0 ${VIEW_W} ${VIEW_H}" preserveAspectRatio="none"><path class="band b${i + 1}" data-band="${i}" /></svg>`,
 ).join('');
 
 /**
@@ -132,7 +136,9 @@ const bandLayersMarkup = BANDS.map(
     :host {
       display: inline-block;
       width: 180px;
-      height: 72px;
+      /* Height matches the message avatar (32px) so the wave line sits level
+         with it. The bands stretch to fill via preserveAspectRatio="none". */
+      height: 32px;
     }
 
     /* Transparent — sits directly on the chat surface (no backdrop). 'isolation:

package/src/main/main.styles.ts

@@ -857,6 +857,13 @@ export const styles = css`
     padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
   }
 
+  /* The flowing-waves host is the avatar's height (32px), so drop the top padding
+     the shared rule adds — that keeps the wave line level with the avatar instead
+     of dropping it toward the row's vertical centre. */
+  .thinking-flowing-waves {
+    padding-top: 0;
+  }
+
   .thinking-caption {
     font-size: var(--type-ramp-minus-1-font-size, 12px);
     line-height: var(--type-ramp-minus-1-line-height, 16px);