@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/chat-message/chat-message.class.js

@@ -0,0 +1,330 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import '../live-region/live-region.class.js';
+import { styles } from './chat-message.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
+// retry glyph to that module -- it's off limits here -- so this one-off icon
+// still reads as part of the same visual language as the rest of the
+// library's inline icons. Same approach lyra-checkbox's own local
+// checkmark/indeterminate glyphs take for the identical reason.
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+function retryIcon() {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox=${ICON_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${ICON_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    ><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
+  `;
+}
+/** `hour:minute` in the runtime's default locale -- the sensible baseline
+ *  this library (with no i18n system of its own) can offer without
+ *  hardcoding English strings; `formatTimestamp` overrides it. */
+function defaultFormatTimestamp(date) {
+    return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);
+}
+/** Visible (not just color-coded) text for every non-resting status --
+ *  `'sent'` renders nothing here, it's the resting state. */
+const STATUS_TEXT = {
+    sending: 'Sending…',
+    streaming: 'Responding…',
+    failed: 'Failed to send',
+};
+/**
+ * `<lyra-chat-message>` — a role-based message bubble *shell* for a chat/
+ * agent conversation surface. It renders none of the message content itself:
+ * the default slot carries whatever a consumer wants to display (plain
+ * text, a `<lyra-markdown>`, a custom template, anything at all) and this
+ * component only supplies the surrounding chrome — alignment/coloring by
+ * `role`, an avatar/badges header row, an optional collapse toggle, an
+ * attachments strip, and a status-aware footer (a live-updating status dot +
+ * text, the formatted `timestamp`, a built-in retry affordance for
+ * `status="failed"`, and an `actions` slot for everything else).
+ *
+ * No built-in copy button is rendered. Deciding what "the copyable text" of
+ * an arbitrary slotted message even means (plain text? the rendered
+ * markdown source? something else?) is exactly the kind of content
+ * interpretation this shell deliberately stays out of — slot a copy control
+ * into `actions` instead. Firing `lyra-copy` (`detail: { text }`) from that
+ * control keeps the event name consistent with `<lyra-json-viewer>`'s own
+ * copy affordance, for anything listening at the conversation-surface level.
+ *
+ * Accessibility of `status`: the current status is always available as
+ * plain visible text (`[part="status-text"]`), never color alone. A
+ * transition *to* `"failed"`, or *from* `"streaming"` to `"sent"` (a stream
+ * finishing), is additionally announced through an internal
+ * `<lyra-live-region>` (see that component's header for the throttled-
+ * announcement wiring this composes) so a screen-reader user who isn't
+ * currently focused on this message still learns about it. This differs
+ * from `<lyra-typing-indicator>`'s deliberately simpler `role="status"`
+ * approach — that component only ever has one thing to announce (its own
+ * mount); this one has a `status` that can flip between several values
+ * across a single element's lifetime, which is exactly the coalescing job
+ * `<lyra-live-region>` exists for.
+ *
+ * `role` is a message-author role (`user`/`assistant`/`system`, matching
+ * the vocabulary of every chat/completion API), *not* a WAI-ARIA role, so
+ * it reflects to a `data-role` attribute rather than the bare `role`
+ * attribute — `role="user"` would collide with `Element`'s own ARIA `role`
+ * accessor and is not a valid ARIA role token to begin with.
+ *
+ * @customElement lyra-chat-message
+ * @slot - The message body.
+ * @slot avatar - An avatar/icon for the message author.
+ * @slot badges - Small status/metric chips (e.g. token count, latency, model name) — entirely app-supplied; this component computes none of that itself.
+ * @slot actions - Action controls (e.g. copy, retry), rendered at the end of the footer.
+ * @slot attachments - File/image attachment chips, rendered below the message body.
+ * @event lyra-retry - Fired by the built-in retry button, only rendered when `status="failed"`.
+ * @event lyra-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
+ * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lyra-retry` listener flipping `status` away from `"failed"`).
+ * @csspart header - The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show.
+ * @csspart avatar - The wrapper around the `avatar` slot.
+ * @csspart badges - The wrapper around the `badges` slot.
+ * @csspart collapse-button - The built-in collapse/expand toggle (only rendered when `collapsible`).
+ * @csspart body - The wrapper around the default slot (the message content). Hidden while `collapsed`.
+ * @csspart attachments - The wrapper around the `attachments` slot.
+ * @csspart footer - The row below the message body — status, timestamp, retry, and actions. Hidden entirely when none of those have anything to show.
+ * @csspart status-indicator - A small decorative (`aria-hidden`) dot reflecting `status`; absent while `status="sent"`.
+ * @csspart status-text - The visible text twin of `status-indicator` — carries the state in text, not just color.
+ * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element.
+ * @csspart retry-button - The built-in retry button (only rendered when `status="failed"`).
+ * @csspart actions - The wrapper around the `actions` slot.
+ */
+export class LyraChatMessage extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Who authored the message. Reflects to `data-role` — see the class doc. */
+        this.role = 'assistant';
+        /** Shows the built-in collapse/expand toggle in the header. */
+        this.collapsible = false;
+        /** Whether the message body is currently hidden. Effective whenever set,
+         *  independent of `collapsible` — `collapsible` only controls whether the
+         *  built-in toggle button is rendered, mirroring `lyra-widget`'s identical
+         *  `collapsible`/`collapsed` pair. */
+        this.collapsed = false;
+        this.hasAvatarSlot = false;
+        this.hasBadgesSlot = false;
+        this.hasAttachmentsSlot = false;
+        this.hasActionsSlot = false;
+        this.bodyId = nextId('chat-message-body');
+        this._status = 'sent';
+        /** The value `status` held immediately before its current one, recorded
+         *  at the point of assignment in the setter below -- *not* derived from
+         *  Lit's `changed`/`changedProperties`, which only ever remembers the
+         *  single oldest value seen since the last completed update. Without this,
+         *  setting `status` to `"streaming"` and then immediately overwriting it
+         *  (e.g. to `"sent"`) within the same task, with no render in between,
+         *  would silently lose the `"streaming"` intermediate value before
+         *  `announceStatusChange` ever gets to see it. */
+        this.previousStatus = 'sent';
+        /** True only until the component's first completed update -- gates the
+         *  status-change announcement below so a message never announces
+         *  whatever status it happens to mount with (mirrors the same "not on
+         *  first paint" intent `willUpdate`'s `!this.hasUpdated` check has for the
+         *  slot-presence flags, except `this.hasUpdated` itself is already `true`
+         *  by the time `updated()` runs for the first time, so it can't be reused
+         *  here). */
+        this.isMounting = true;
+        this.onAvatarSlotChange = (e) => {
+            this.hasAvatarSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onBadgesSlotChange = (e) => {
+            this.hasBadgesSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onAttachmentsSlotChange = (e) => {
+            this.hasAttachmentsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onActionsSlotChange = (e) => {
+            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.toggleCollapsed = () => {
+            this.collapsed = !this.collapsed;
+            this.emit('lyra-collapse-toggle', this.collapsed);
+        };
+        this.onRetryClick = () => {
+            // A `lyra-retry` listener is documented to respond by flipping `status`
+            // away from `"failed"`, which removes this very button on the next
+            // render. Move focus to the always-rendered bubble first, synchronously,
+            // so it lands somewhere stable inside the message instead of silently
+            // reverting to `<body>` once the button it was on disappears.
+            this.bubbleEl?.focus();
+            this.emit('lyra-retry');
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    // `status` needs a hand-written accessor (see `previousStatus` below) so
+    // it's declared via `static properties` + `noAccessor` rather than
+    // `@property()` directly -- the same pattern `lyra-playback`'s `playing`
+    // uses for the identical reason (a property whose setter must run real
+    // logic on every assignment, not just on the next completed render).
+    static { this.properties = {
+        status: { reflect: true, noAccessor: true },
+    }; }
+    /** Delivery/generation state. Drives the footer's status dot/text and,
+     *  for `"failed"`, the bubble's danger treatment and the built-in retry
+     *  button. Declared via `static properties` above with a hand-written
+     *  accessor (see `previousStatus`). */
+    get status() {
+        return this._status;
+    }
+    set status(value) {
+        const old = this._status;
+        if (value === old)
+            return;
+        this.previousStatus = old;
+        this._status = value;
+        this.requestUpdate('status', old);
+    }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasAvatarSlot = this.hasSlotted('avatar');
+            this.hasBadgesSlot = this.hasSlotted('badges');
+            this.hasAttachmentsSlot = this.hasSlotted('attachments');
+            this.hasActionsSlot = this.hasSlotted('actions');
+        }
+    }
+    updated(changed) {
+        const wasMounting = this.isMounting;
+        this.isMounting = false;
+        if (!wasMounting && changed.has('status')) {
+            this.announceStatusChange(this.previousStatus);
+        }
+    }
+    hasSlotted(name) {
+        return Array.from(this.children).some((el) => el.getAttribute('slot') === name);
+    }
+    get normalizedTimestamp() {
+        if (this.timestamp === undefined)
+            return undefined;
+        const date = this.timestamp instanceof Date ? this.timestamp : new Date(this.timestamp);
+        return Number.isNaN(date.getTime()) ? undefined : date;
+    }
+    get statusText() {
+        return this.status === 'sent' ? undefined : STATUS_TEXT[this.status];
+    }
+    announceStatusChange(previous) {
+        if (previous === this.status)
+            return;
+        const region = this.liveRegion;
+        if (!region)
+            return;
+        if (this.status === 'failed') {
+            region.mode = 'assertive';
+            region.announce('Message failed to send.', { force: true });
+        }
+        else if (previous === 'streaming' && this.status === 'sent') {
+            region.mode = 'polite';
+            region.announce('Message complete.', { force: true });
+        }
+    }
+    render() {
+        const ts = this.normalizedTimestamp;
+        const formatter = this.formatTimestamp ?? defaultFormatTimestamp;
+        const statusText = this.statusText;
+        const showHeader = this.hasAvatarSlot || this.hasBadgesSlot || this.collapsible;
+        // `statusText` is already truthy whenever `status === 'failed'`, so it
+        // alone covers that case here too.
+        const showFooter = Boolean(statusText) || Boolean(ts) || this.hasActionsSlot;
+        return html `
+      <div part="bubble" tabindex="-1">
+        <div part="header" ?hidden=${!showHeader}>
+          <span part="avatar" ?hidden=${!this.hasAvatarSlot}
+            ><slot name="avatar" @slotchange=${this.onAvatarSlotChange}></slot
+          ></span>
+          <span part="badges" ?hidden=${!this.hasBadgesSlot}
+            ><slot name="badges" @slotchange=${this.onBadgesSlotChange}></slot
+          ></span>
+          ${this.collapsible
+            ? html `<button
+                part="collapse-button"
+                type="button"
+                aria-expanded=${this.collapsed ? 'false' : 'true'}
+                aria-controls=${this.bodyId}
+                aria-label=${this.localize(this.collapsed ? 'expandMessage' : 'collapseMessage')}
+                @click=${this.toggleCollapsed}
+              >
+                <span class="chevron" style=${`transform:rotate(${this.collapsed ? '0deg' : '90deg'})`}
+                  >${chevronIcon()}</span
+                >
+              </button>`
+            : nothing}
+        </div>
+        <div part="body" id=${this.bodyId} ?hidden=${this.collapsed}>
+          <slot></slot>
+        </div>
+        <div part="attachments" ?hidden=${!this.hasAttachmentsSlot}>
+          <slot name="attachments" @slotchange=${this.onAttachmentsSlotChange}></slot>
+        </div>
+        <div part="footer" ?hidden=${!showFooter}>
+          ${statusText
+            ? html `<span part="status-indicator" aria-hidden="true"></span><span part="status-text"
+                  >${statusText}</span
+                >`
+            : nothing}
+          ${ts ? html `<time part="timestamp" datetime=${ts.toISOString()}>${formatter(ts)}</time>` : nothing}
+          ${this.status === 'failed'
+            ? html `<button part="retry-button" type="button" @click=${this.onRetryClick}>
+                ${retryIcon()}<span>${this.localize('retry')}</span>
+              </button>`
+            : nothing}
+          <span part="actions" ?hidden=${!this.hasActionsSlot}
+            ><slot name="actions" @slotchange=${this.onActionsSlotChange}></slot
+          ></span>
+        </div>
+        <lyra-live-region></lyra-live-region>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true, attribute: 'data-role' })
+], LyraChatMessage.prototype, "role", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraChatMessage.prototype, "timestamp", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraChatMessage.prototype, "formatTimestamp", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraChatMessage.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraChatMessage.prototype, "collapsed", void 0);
+__decorate([
+    state()
+], LyraChatMessage.prototype, "hasAvatarSlot", void 0);
+__decorate([
+    state()
+], LyraChatMessage.prototype, "hasBadgesSlot", void 0);
+__decorate([
+    state()
+], LyraChatMessage.prototype, "hasAttachmentsSlot", void 0);
+__decorate([
+    state()
+], LyraChatMessage.prototype, "hasActionsSlot", void 0);
+__decorate([
+    query('lyra-live-region')
+], LyraChatMessage.prototype, "liveRegion", void 0);
+__decorate([
+    query('[part="bubble"]')
+], LyraChatMessage.prototype, "bubbleEl", void 0);
+//# sourceMappingURL=chat-message.class.js.map

package/dist/components/chat-message/chat-message.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.class.js","sourceRoot":"","sources":["../../../src/components/chat-message/chat-message.class.ts"],"names":[],"mappings":"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"}

package/dist/components/chat-message/chat-message.d.ts

@@ -1,141 +1,3 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-import '../live-region/live-region.js';
-export type ChatMessageRole = 'user' | 'assistant' | 'system';
-export type ChatMessageStatus = 'sending' | 'sent' | 'failed' | 'streaming';
-/**
- * `<lyra-chat-message>` — a role-based message bubble *shell* for a chat/
- * agent conversation surface. It renders none of the message content itself:
- * the default slot carries whatever a consumer wants to display (plain
- * text, a `<lyra-markdown>`, a custom template, anything at all) and this
- * component only supplies the surrounding chrome — alignment/coloring by
- * `role`, an avatar/badges header row, an optional collapse toggle, an
- * attachments strip, and a status-aware footer (a live-updating status dot +
- * text, the formatted `timestamp`, a built-in retry affordance for
- * `status="failed"`, and an `actions` slot for everything else).
- *
- * No built-in copy button is rendered. Deciding what "the copyable text" of
- * an arbitrary slotted message even means (plain text? the rendered
- * markdown source? something else?) is exactly the kind of content
- * interpretation this shell deliberately stays out of — slot a copy control
- * into `actions` instead. Firing `lyra-copy` (`detail: { text }`) from that
- * control keeps the event name consistent with `<lyra-json-viewer>`'s own
- * copy affordance, for anything listening at the conversation-surface level.
- *
- * Accessibility of `status`: the current status is always available as
- * plain visible text (`[part="status-text"]`), never color alone. A
- * transition *to* `"failed"`, or *from* `"streaming"` to `"sent"` (a stream
- * finishing), is additionally announced through an internal
- * `<lyra-live-region>` (see that component's header for the throttled-
- * announcement wiring this composes) so a screen-reader user who isn't
- * currently focused on this message still learns about it. This differs
- * from `<lyra-typing-indicator>`'s deliberately simpler `role="status"`
- * approach — that component only ever has one thing to announce (its own
- * mount); this one has a `status` that can flip between several values
- * across a single element's lifetime, which is exactly the coalescing job
- * `<lyra-live-region>` exists for.
- *
- * `role` is a message-author role (`user`/`assistant`/`system`, matching
- * the vocabulary of every chat/completion API), *not* a WAI-ARIA role, so
- * it reflects to a `data-role` attribute rather than the bare `role`
- * attribute — `role="user"` would collide with `Element`'s own ARIA `role`
- * accessor and is not a valid ARIA role token to begin with.
- *
- * @customElement lyra-chat-message
- * @slot - The message body.
- * @slot avatar - An avatar/icon for the message author.
- * @slot badges - Small status/metric chips (e.g. token count, latency, model name) — entirely app-supplied; this component computes none of that itself.
- * @slot actions - Action controls (e.g. copy, retry), rendered at the end of the footer.
- * @slot attachments - File/image attachment chips, rendered below the message body.
- * @event lyra-retry - Fired by the built-in retry button, only rendered when `status="failed"`.
- * @event lyra-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
- * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lyra-retry` listener flipping `status` away from `"failed"`).
- * @csspart header - The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show.
- * @csspart avatar - The wrapper around the `avatar` slot.
- * @csspart badges - The wrapper around the `badges` slot.
- * @csspart collapse-button - The built-in collapse/expand toggle (only rendered when `collapsible`).
- * @csspart body - The wrapper around the default slot (the message content). Hidden while `collapsed`.
- * @csspart attachments - The wrapper around the `attachments` slot.
- * @csspart footer - The row below the message body — status, timestamp, retry, and actions. Hidden entirely when none of those have anything to show.
- * @csspart status-indicator - A small decorative (`aria-hidden`) dot reflecting `status`; absent while `status="sent"`.
- * @csspart status-text - The visible text twin of `status-indicator` — carries the state in text, not just color.
- * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element.
- * @csspart retry-button - The built-in retry button (only rendered when `status="failed"`).
- * @csspart actions - The wrapper around the `actions` slot.
- */
-export declare class LyraChatMessage extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    static properties: {
-        status: {
-            reflect: boolean;
-            noAccessor: boolean;
-        };
-    };
-    /** Who authored the message. Reflects to `data-role` — see the class doc. */
-    role: ChatMessageRole;
-    /** When the message was sent/received. Accepts a `Date` or anything
-     *  `new Date()` can parse (e.g. an ISO 8601 string); invalid input is
-     *  treated the same as unset (no timestamp rendered). */
-    timestamp?: Date | string;
-    /** Overrides the default `hour:minute` rendering of `timestamp` — this
-     *  library has no i18n system of its own, so an overridable formatter is
-     *  the established way to hand locale-sensitive display back to the
-     *  consumer (mirrors `lyra-heatmap`'s `cellText`). */
-    formatTimestamp?: (date: Date) => string;
-    /** Shows the built-in collapse/expand toggle in the header. */
-    collapsible: boolean;
-    /** Whether the message body is currently hidden. Effective whenever set,
-     *  independent of `collapsible` — `collapsible` only controls whether the
-     *  built-in toggle button is rendered, mirroring `lyra-widget`'s identical
-     *  `collapsible`/`collapsed` pair. */
-    collapsed: boolean;
-    private hasAvatarSlot;
-    private hasBadgesSlot;
-    private hasAttachmentsSlot;
-    private hasActionsSlot;
-    private liveRegion?;
-    private bubbleEl?;
-    private readonly bodyId;
-    private _status;
-    /** The value `status` held immediately before its current one, recorded
-     *  at the point of assignment in the setter below -- *not* derived from
-     *  Lit's `changed`/`changedProperties`, which only ever remembers the
-     *  single oldest value seen since the last completed update. Without this,
-     *  setting `status` to `"streaming"` and then immediately overwriting it
-     *  (e.g. to `"sent"`) within the same task, with no render in between,
-     *  would silently lose the `"streaming"` intermediate value before
-     *  `announceStatusChange` ever gets to see it. */
-    private previousStatus;
-    /** True only until the component's first completed update -- gates the
-     *  status-change announcement below so a message never announces
-     *  whatever status it happens to mount with (mirrors the same "not on
-     *  first paint" intent `willUpdate`'s `!this.hasUpdated` check has for the
-     *  slot-presence flags, except `this.hasUpdated` itself is already `true`
-     *  by the time `updated()` runs for the first time, so it can't be reused
-     *  here). */
-    private isMounting;
-    /** Delivery/generation state. Drives the footer's status dot/text and,
-     *  for `"failed"`, the bubble's danger treatment and the built-in retry
-     *  button. Declared via `static properties` above with a hand-written
-     *  accessor (see `previousStatus`). */
-    get status(): ChatMessageStatus;
-    set status(value: ChatMessageStatus);
-    protected willUpdate(): void;
-    protected updated(changed: PropertyValues): void;
-    private hasSlotted;
-    private get normalizedTimestamp();
-    private get statusText();
-    private announceStatusChange;
-    private onAvatarSlotChange;
-    private onBadgesSlotChange;
-    private onAttachmentsSlotChange;
-    private onActionsSlotChange;
-    private toggleCollapsed;
-    private onRetryClick;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-chat-message': LyraChatMessage;
-    }
-}
+export * from './chat-message.class.js';
+import "../live-region/live-region.js";
+//# sourceMappingURL=chat-message.d.ts.map

package/dist/components/chat-message/chat-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat-message/chat-message.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AAGxC,OAAO,+BAA+B,CAAC"}