@genesislcap/ai-assistant 15.19.0 → 15.19.1

package/src/components/chat-interaction-wrapper/chat-interaction-wrapper.ts

@@ -1,243 +0,0 @@
-import type { InteractionResult } from '@genesislcap/foundation-ai';
-import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
-import { createInteractionContext } from '../../state/interaction-context';
-import type { AiChatInteraction, AiChatWidget } from '../../types/ai-chat-widget';
-import type { InteractionContext } from '../../types/interaction-context';
-import { logger } from '../../utils/logger';
-import { AiChatInteractionWrapperStyles } from './chat-interaction-wrapper.styles';
-import { AiChatInteractionWrapperTemplate } from './chat-interaction-wrapper.template';
-
-/** Structural view of the assistant host, pierced across the wrapper's shadow boundary. */
-type InteractionHost = {
-  isEngaged?: boolean;
-  getInteractionContext?: (id: string) => InteractionContext | undefined;
-};
-
-export type ChatInteractionEventsMap = {
-  'interaction-completed': InteractionResult<unknown> & { interactionId: string };
-  'interaction-cost': { interactionId: string; costUsd: number };
-};
-
-/**
- * Detail payload for the `interaction-completed` event.
- * @public
- */
-export type InteractionCompletedEventDetail = ChatInteractionEventsMap['interaction-completed'];
-
-/**
- * Detail payload for the `interaction-cost` event — a POSITIVE DELTA in USD, not a running total.
- * @public
- */
-export type InteractionCostEventDetail = ChatInteractionEventsMap['interaction-cost'];
-
-/**
- * Hosts an interactive AI chat sub-component by tag name.
- * @public
- *
- * @fires interaction-completed - Fired when the interaction finishes. detail: `InteractionCompletedEventDetail`
- * @fires interaction-cost - Fired when a widget spends money AFTER resolving. detail: `InteractionCostEventDetail`
- */
-@customElement({
-  name: 'ai-chat-interaction-wrapper',
-  template: AiChatInteractionWrapperTemplate,
-  styles: AiChatInteractionWrapperStyles,
-})
-export class AiChatInteractionWrapper extends GenesisElement {
-  /** @internal */
-  @observable componentName: string = '';
-  /** @internal */
-  @observable data: any;
-  /** @internal */
-  @observable interactionId: string = '';
-  /** The resolved result once the interaction has completed. Forwarded to the rendered component. @internal */
-  @observable resolved: InteractionResult<unknown> | undefined = undefined;
-  /** @internal */
-  container!: HTMLElement;
-
-  /** Observes the rendered widget for mid-lifecycle size changes — see {@link observeWidgetResize}. */
-  private _resizeObserver?: ResizeObserver;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.renderComponent();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._resizeObserver?.disconnect();
-    this._resizeObserver = undefined;
-  }
-
-  componentNameChanged() {
-    this.renderComponent();
-  }
-
-  /**
-   * Re-render the hosted widget when the interaction identity changes. This
-   * ensures widgets don't go stale with them being rendered with `recycle: true`
-   * when messages are dynamically filtered, showing/hiding thinking/tool calls
-   *
-   * `interactionId` is a per-interaction UUID, so it changes exactly when the
-   * hosted interaction does. Property bindings apply in template order
-   * (componentName, data, interactionId), so `data` is already rebound by the
-   * time this fires and the fresh widget is built with the correct data.
-   */
-  interactionIdChanged() {
-    this.renderComponent();
-  }
-
-  resolvedChanged() {
-    const element = this.container?.firstElementChild as (AiChatWidget & HTMLElement) | null;
-    // The interaction just resolved: forward the resolved descriptor to the LIVE widget
-    // in place, preserving its DOM/state (no re-create). If no matching element exists
-    // yet (e.g. a history re-render straight into the resolved state), render it fresh.
-    if (element && element.tagName?.toLowerCase() === this.componentName) {
-      if (this.resolved) {
-        element.interaction = { status: 'resolved', data: this.data, result: this.resolved };
-      }
-    } else if (this.resolved) {
-      this.renderComponent();
-    }
-  }
-
-  /**
-   * Watch the rendered widget element for box-size changes. When the widget
-   * grows or shrinks mid-lifecycle (e.g. expanding a "More info" panel,
-   * appending an SSE status row, revealing generated code), bubble a
-   * `request-scroll-to-bottom` event so `FoundationAiAssistant` re-snaps to
-   * the bottom. `scrollToBottom` respects `_userScrolledAway`, so a user
-   * reading old messages is not yanked back.
-   *
-   * The first ResizeObserver callback fires synchronously with the initial
-   * size when `observe()` is called; we skip it so freshly-rendered widgets
-   * don't double up with the existing `handleMessagesUpdate` auto-scroll for
-   * new messages.
-   */
-  private observeWidgetResize(element: Element) {
-    this._resizeObserver?.disconnect();
-    let initialFireSkipped = false;
-    this._resizeObserver = new ResizeObserver(() => {
-      if (!initialFireSkipped) {
-        initialFireSkipped = true;
-        return;
-      }
-      this.dispatchEvent(
-        new CustomEvent('request-scroll-to-bottom', { bubbles: true, composed: true }),
-      );
-    });
-    this._resizeObserver.observe(element);
-  }
-
-  private renderComponent() {
-    if (!this.container || !this.componentName) return;
-
-    // Clear children without using innerHTML
-    this._resizeObserver?.disconnect();
-    this._resizeObserver = undefined;
-    this.container.replaceChildren();
-
-    if (!customElements.get(this.componentName)) {
-      logger.warn(
-        `Interactive component "${this.componentName}" is not registered in the customElements registry.`,
-      );
-      const errorDiv = document.createElement('div');
-      errorDiv.textContent = `Error: Component "${this.componentName}" is not available in this application.`;
-      this.container.appendChild(errorDiv);
-      return;
-    }
-
-    try {
-      // Pierce the wrapper's shadow boundary to read host state: `isEngaged` (gates
-      // autofocus) and the driver-owned interaction context. Single-view model
-      // (GENC-1351): one assistant view always renders the live widget.
-      const root = this.getRootNode();
-      const host = root instanceof ShadowRoot ? (root.host as InteractionHost) : null;
-
-      const element = document.createElement(this.componentName) as AiChatWidget & HTMLElement;
-
-      // GENC-1390: the widget's whole input surface is the discriminated interaction
-      // descriptor + its stable id. Rebuilt on every (re)mount; the pending variant's
-      // `interactionContext` is the SAME driver-owned object across remounts, which is
-      // what lets a widget's live state survive the element teardown/recreate.
-      element.interactionId = this.interactionId;
-      element.interaction = this.buildInteraction(host);
-
-      // Handle completion from the inner component. Guard against re-emission if the
-      // interaction was already resolved (auto-resolve widgets fire on connectedCallback
-      // when rendering history).
-      element.addEventListener('interaction-completed', (e: CustomEvent) => {
-        e.stopPropagation();
-        if (this.resolved) return;
-
-        this.$emit('interaction-completed', {
-          interactionId: this.interactionId,
-          ...e.detail,
-        });
-      });
-
-      /**
-       * Spend the widget incurs AFTER it has resolved.
-       *
-       * Deliberately NOT guarded by `this.resolved`, which is the entire point: a widget that
-       * resolves early so the assistant stops waiting can stay interactive for minutes and do more
-       * paid work for the user. The completion listener above is guarded because a second
-       * RESOLUTION would be wrong; a second charge is simply true, and before this event that spend
-       * had no way to reach the total the user is shown.
-       */
-      element.addEventListener('interaction-cost', (e: CustomEvent) => {
-        e.stopPropagation();
-        // Forwarded UNVALIDATED. `recordExternalCost` already rejects anything that is not a
-        // positive finite amount AND records why it dropped it; validating here as well made that
-        // trace unreachable through the event path — which is a widget's only way in — so a widget
-        // emitting NaN or a negative got silently nothing, anywhere. One validator, one trace.
-        this.$emit('interaction-cost', {
-          interactionId: this.interactionId,
-          costUsd: e.detail?.costUsd,
-        });
-      });
-
-      this.container.appendChild(element as unknown as Node);
-      this.observeWidgetResize(element as unknown as Element);
-    } catch (e) {
-      logger.error(`Failed to create interactive component: ${this.componentName}`, e);
-      const errorDiv = document.createElement('div');
-      errorDiv.textContent = `Error: Could not load component ${this.componentName}`;
-      this.container.appendChild(errorDiv);
-    }
-  }
-
-  /**
-   * Project the wrapper's current `data`/`resolved`/`interactionId` into the
-   * discriminated {@link AiChatInteraction} the widget consumes (GENC-1390).
-   */
-  private buildInteraction(host: InteractionHost | null): AiChatInteraction {
-    if (this.resolved) {
-      return { status: 'resolved', data: this.data, result: this.resolved };
-    }
-    // Pending. The driver creates a live context for EVERY pending interaction BEFORE the widget
-    // mounts, returns the SAME instance on every remount, and drops it the instant the interaction
-    // resolves (see `ChatDriver.resolveInteraction`). So a MISSING context is not "pending, context
-    // lost" — it means this interaction is no longer live: it has resolved/evicted (the `resolved`
-    // binding above can lag a render behind that during a layout rebuild), or the widget was rendered
-    // outside the normal host flow (e.g. a unit test). In none of those cases may a `once`-guarded
-    // side effect run — re-firing one re-opened a just-closed side panel, whose layout rebuild
-    // re-mounted the widget, which re-opened it… a tab-locking loop (GENC-1390). Fall back to an
-    // INERT context (disposed up front, so `once` refuses and `state`/subscribers are inert) rather
-    // than a live throwaway, so the widget degrades safely instead of re-running its open-once effect.
-    let interactionContext = host?.getInteractionContext?.(this.interactionId);
-    if (!interactionContext) {
-      logger.warn(
-        `No live InteractionContext for interaction "${this.interactionId}"; using an inert context (once-guarded effects will not run).`,
-      );
-      const handle = createInteractionContext(this.interactionId);
-      handle.dispose();
-      interactionContext = handle.context;
-    }
-    return {
-      status: 'pending',
-      data: this.data,
-      shouldAutoFocus: !!host?.isEngaged,
-      interactionContext,
-    };
-  }
-}

package/src/components/chat-interaction-wrapper/index.ts

@@ -1,3 +0,0 @@
-export * from './chat-interaction-wrapper';
-export * from './chat-interaction-wrapper.styles';
-export * from './chat-interaction-wrapper.template';

package/src/components/chat-markdown/chat-markdown.ts

@@ -1,89 +0,0 @@
-import { css, customElement, GenesisElement, html, observable } from '@genesislcap/web-core';
-import DOMPurify from 'dompurify';
-import { marked } from 'marked';
-
-const styles = css`
-  :host {
-    display: block;
-    font-size: var(--type-ramp-base-font-size);
-    line-height: var(--type-ramp-base-line-height);
-  }
-
-  p {
-    margin: 0 0 calc(var(--design-unit, 4) * 2px);
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  ul,
-  ol {
-    margin: 0 0 calc(var(--design-unit, 4) * 2px);
-    padding-left: calc(var(--design-unit, 4) * 5px);
-  }
-
-  code {
-    background-color: var(--neutral-fill-rest);
-    padding: 2px 4px;
-    border-radius: calc(var(--design-unit, 4) * 0.5px);
-    font-family: monospace;
-  }
-
-  pre {
-    background-color: var(--neutral-fill-rest);
-    padding: calc(var(--design-unit, 4) * 2px);
-    border-radius: calc(var(--design-unit, 4) * 1px);
-    overflow-x: auto;
-    border: 1px solid var(--neutral-stroke-rest);
-    margin: calc(var(--design-unit, 4) * 2px) 0;
-  }
-
-  pre code {
-    background-color: transparent;
-    padding: 0;
-    border-radius: 0;
-    border: none;
-    font-family: inherit;
-    color: inherit;
-  }
-
-  table {
-    display: block;
-    overflow-x: auto;
-    border-collapse: collapse;
-    max-width: 100%;
-    margin: calc(var(--design-unit, 4) * 2px) 0;
-  }
-
-  th,
-  td {
-    border: 1px solid var(--neutral-stroke-rest);
-    padding: calc(var(--design-unit, 4) * 1px) calc(var(--design-unit, 4) * 2.5px);
-    white-space: nowrap;
-  }
-
-  th {
-    background-color: var(--neutral-fill-stealth-rest);
-    font-weight: 600;
-  }
-`;
-
-@customElement({
-  name: 'ai-chat-markdown',
-  template: html<AiChatMarkdown>`
-    <div :innerHTML="${(x) => x.renderMarkdown()}"></div>
-  `,
-  styles,
-})
-export class AiChatMarkdown extends GenesisElement {
-  /** The markdown string to render. */
-  @observable content: string = '';
-
-  /** @internal */
-  renderMarkdown() {
-    if (!this.content) return '';
-    const rawHtml = marked.parse(this.content) as string;
-    return DOMPurify.sanitize(rawHtml);
-  }
-}

package/src/components/chat-markdown/index.ts

@@ -1 +0,0 @@
-export * from './chat-markdown';

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

@@ -1,286 +0,0 @@
-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. 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 = 50;
-const CENTRE_Y = VIEW_H / 2;
-/** Number of samples traced across each band. */
-const POINTS = 90;
-/** Fraction of the width over which thickness ramps from 0 up to full. */
-const EDGE = 0.16;
-/** Global multiplier on the harmonic drift speeds — raise to morph faster. */
-const MORPH_SPEED = 3;
-/** Global multiplier on the harmonic frequencies — raise for narrower peaks. */
-const FREQ_SCALE = 2;
-/** Milliseconds in one second. */
-const MS_PER_SECOND = 1000;
-/** Baseline frame rate (fps) the harmonic speeds are tuned against. */
-const BASELINE_FPS = 60;
-/**
- * Frame duration (ms) at the baseline rate. The morph is driven by elapsed
- * wall-clock time divided by this — not by the rAF callback count — so it
- * advances at a constant real-world rate regardless of the display's refresh
- * rate or dropped frames. At the baseline rate the resulting frame index
- * matches the old per-callback counter, preserving the current look.
- */
-const FRAME_MS = MS_PER_SECOND / BASELINE_FPS;
-/**
- * Half-thickness (viewBox units) each band keeps even between peaks, so the
- * waves emerge from a continuous line rather than leaving gaps. The four bands
- * overlap along this line and screen-blend to white.
- */
-const LINE_THICKNESS = 1.2;
-/**
- * Amplitude boost added toward the middle of the width (a hump that is 0 at the
- * ends, max in the centre). Makes peaks more likely to pop up centrally, while
- * still allowing tall crests to appear nearer the edges.
- */
-const CENTRE_BIAS = 4;
-
-/** One sine component of a band's thickness profile. */
-interface Harmonic {
-  /** Cycles across the band width. */
-  freq: number;
-  /** Contribution to the half-thickness, in viewBox units. */
-  amp: number;
-  /** Phase drift per frame (radians); differing speeds make the bumps morph. */
-  speed: number;
-  /** Starting phase offset. */
-  phase: number;
-}
-
-/**
- * One band's thickness profile: a baseline plus a few sine harmonics. Because
- * the harmonics drift at different speeds, their sum continually changes shape —
- * bumps grow, shrink, merge and split — and where the sum dips below zero the
- * band pinches to nothing, so a wave may have a single bump one moment and
- * several the next. A different harmonic mix per band keeps the colours from
- * lining up.
- */
-interface BandConfig {
-  /**
-   * Vertical offset the harmonics oscillate around. Negative values act as a
-   * threshold: only the taller crests clear zero, so the band shows fewer,
-   * narrower, isolated peaks (the small ripples between crests are clipped away).
-   */
-  baseline: number;
-  harmonics: Harmonic[];
-}
-
-const BANDS: BandConfig[] = [
-  {
-    baseline: -4,
-    harmonics: [
-      { freq: 1.0, amp: 11, speed: 0.03, phase: 0.0 },
-      { freq: 2.3, amp: 6, speed: -0.021, phase: 1.3 },
-      { freq: 3.4, amp: 3, speed: 0.041, phase: 2.7 },
-    ],
-  },
-  {
-    baseline: -4,
-    harmonics: [
-      { freq: 1.3, amp: 10, speed: -0.026, phase: 0.8 },
-      { freq: 2.0, amp: 7, speed: 0.034, phase: 2.1 },
-      { freq: 3.1, amp: 3, speed: -0.045, phase: 0.4 },
-    ],
-  },
-  {
-    baseline: -4,
-    harmonics: [
-      { freq: 0.9, amp: 9, speed: 0.038, phase: 1.9 },
-      { freq: 2.6, amp: 6, speed: 0.019, phase: 3.0 },
-      { freq: 3.7, amp: 3, speed: -0.03, phase: 0.6 },
-    ],
-  },
-  {
-    baseline: -4,
-    harmonics: [
-      { freq: 1.1, amp: 8, speed: -0.034, phase: 2.4 },
-      { freq: 2.4, amp: 5, speed: 0.027, phase: 0.2 },
-      { freq: 3.2, amp: 3, speed: 0.048, phase: 1.5 },
-    ],
-  },
-];
-
-// Each band is its own stacked <svg> LAYER. The white-on-overlap effect uses
-// `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}" 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,
- * tapering to nothing at both ends. Where the colours overlap they blend
- * additively toward white.
- *
- * Visual sibling of the dots loading indicator; interchangeable with the other
- * loading styles for the "assistant is working" state.
- *
- * @example
- * ```html
- * <ai-flowing-waves-indicator></ai-flowing-waves-indicator>
- * ```
- *
- * @beta
- */
-@customElement({
-  name: 'ai-flowing-waves-indicator',
-  template: html<AiFlowingWavesIndicator>`
-    <div class="flow" role="img" aria-label="Assistant is working">${bandLayersMarkup}</div>
-  `,
-  styles: css`
-    :host {
-      display: inline-block;
-      width: 180px;
-      /* 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:
-       isolate' scopes the band layers' 'screen' blend to each other, so where
-       colours overlap they add toward white, while the group still composites
-       normally onto the page (works on light and dark, no wash-out). */
-    .flow {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      isolation: isolate;
-    }
-
-    .layer {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    .band-layer {
-      mix-blend-mode: screen;
-    }
-
-    .band {
-      filter: drop-shadow(0 0 1.5px currentColor);
-    }
-    .band.b1 {
-      color: ${AI_COLOUR_AMBER};
-      fill: ${AI_COLOUR_AMBER};
-    }
-    .band.b2 {
-      color: ${AI_COLOUR_PINK};
-      fill: ${AI_COLOUR_PINK};
-    }
-    .band.b3 {
-      color: ${AI_COLOUR_CYAN};
-      fill: ${AI_COLOUR_CYAN};
-    }
-    .band.b4 {
-      color: ${AI_COLOUR_VIOLET};
-      fill: ${AI_COLOUR_VIOLET};
-    }
-  `,
-})
-export class AiFlowingWavesIndicator extends GenesisElement {
-  // A rAF loop morphs the band shapes: pure CSS can't continuously reshape the
-  // bumps (different sizes appearing at different times), and the per-frame sine
-  // sums are cheap. Same approach as the sine-tracing waves indicator. The morph
-  // is keyed to elapsed wall-clock time (see FRAME_MS), not the rAF callback
-  // count, so it holds a constant speed even when frames are dropped.
-
-  private startTime?: number;
-  private animFrame?: number;
-  private bandPaths?: SVGPathElement[];
-
-  connectedCallback() {
-    super.connectedCallback();
-    // Guard against a reconnect starting a second concurrent loop.
-    if (this.animFrame === undefined) {
-      this.tick();
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.animFrame !== undefined) {
-      cancelAnimationFrame(this.animFrame);
-      this.animFrame = undefined;
-    }
-    // Reset the clock so a later reconnect restarts the morph cleanly at frame 0.
-    this.startTime = undefined;
-  }
-
-  private tick(now?: number) {
-    // Stop ticking once disconnected (belt-and-braces alongside the cancel in
-    // disconnectedCallback) so no frames are scheduled while detached.
-    if (!this.isConnected) {
-      this.animFrame = undefined;
-      return;
-    }
-    if (!this.bandPaths) {
-      const paths = this.shadowRoot?.querySelectorAll<SVGPathElement>('.band');
-      if (paths?.length) this.bandPaths = Array.from(paths);
-    }
-    // Anchor to the first real rAF timestamp; the initial synchronous call (no
-    // timestamp) renders frame 0. `frame` is then elapsed time in 60fps frames.
-    if (now !== undefined && this.startTime === undefined) this.startTime = now;
-    const frame =
-      now === undefined || this.startTime === undefined ? 0 : (now - this.startTime) / FRAME_MS;
-    this.bandPaths?.forEach((path, i) => {
-      const cfg = BANDS[i];
-      if (cfg) path.setAttribute('d', AiFlowingWavesIndicator.buildBand(cfg, frame));
-    });
-    this.animFrame = requestAnimationFrame((t) => this.tick(t));
-  }
-
-  /**
-   * Trace one band for the given frame: a baseline-plus-harmonics half-thickness
-   * profile, clamped at 0 (so the band pinches to nothing between bumps) and
-   * tapered to 0 at both ends.
-   */
-  private static buildBand(cfg: BandConfig, frame: number): string {
-    const top: Array<[number, number]> = [];
-    const bottom: Array<[number, number]> = [];
-    for (let i = 0; i <= POINTS; i += 1) {
-      const u = i / POINTS;
-      const x = u * VIEW_W;
-      // Plateau edge taper: 0 at both ends, full across the middle.
-      const edge = Math.min(1, Math.min(u, 1 - u) / EDGE);
-      // Sum the drifting harmonics, then clamp so dips pinch the band to nothing.
-      let wave = 0;
-      for (const h of cfg.harmonics) {
-        wave +=
-          h.amp *
-          Math.sin(u * Math.PI * 2 * h.freq * FREQ_SCALE + frame * h.speed * MORPH_SPEED + h.phase);
-      }
-      // Hump that favours the middle (0 at the ends, 1 at the centre).
-      const centre = Math.sin(Math.PI * u);
-      const env = edge * (LINE_THICKNESS + Math.max(0, cfg.baseline + wave + CENTRE_BIAS * centre));
-      top.push([x, CENTRE_Y - env]);
-      bottom.push([x, CENTRE_Y + env]);
-    }
-    let d = `M${top[0][0].toFixed(1)} ${top[0][1].toFixed(1)}`;
-    for (let i = 1; i < top.length; i += 1)
-      d += ` L${top[i][0].toFixed(1)} ${top[i][1].toFixed(1)}`;
-    for (let i = bottom.length - 1; i >= 0; i -= 1) {
-      d += ` L${bottom[i][0].toFixed(1)} ${bottom[i][1].toFixed(1)}`;
-    }
-    return `${d} Z`;
-  }
-}