@tylertech/forge-ai 0.15.2 → 0.15.3-dev.1

package/dist/ai-artifact-card-group/ai-artifact-card-group.mjs

@@ -0,0 +1,137 @@
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE } from "../ai-artifact-card/ai-artifact-card.mjs";
+import styles from "./ai-artifact-card-group.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _AiArtifactCardGroupComponent_instances, visibleCards_get, collapsedCount_get, overflowCount_get, _chevronDownIcon, _chevronUpIcon, syncCardVisibility_fn, handleSlotChange_fn, handleToggle_fn, toggle_get;
+const AiArtifactCardGroupComponentTagName = "forge-ai-artifact-card-group";
+const DEFAULT_VISIBLE_COUNT = 3;
+let AiArtifactCardGroupComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiArtifactCardGroupComponent_instances);
+    this.visibleCount = DEFAULT_VISIBLE_COUNT;
+    this.expanded = false;
+    this.showMoreText = "{count} more";
+    this.showLessText = "Show less";
+    __privateAdd(this, _chevronDownIcon, html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path
+        d="M4.5 6.75L9 11.25L13.5 6.75"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round" />
+    </svg>
+  `);
+    __privateAdd(this, _chevronUpIcon, html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path
+        d="M13.5 11.25L9 6.75L4.5 11.25"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round" />
+    </svg>
+  `);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    __privateMethod(this, _AiArtifactCardGroupComponent_instances, syncCardVisibility_fn).call(this);
+  }
+  render() {
+    return html`
+      <div class="artifact-card-group">
+        <div class="list" role="list">
+          <slot @slotchange=${__privateMethod(this, _AiArtifactCardGroupComponent_instances, handleSlotChange_fn)}></slot>
+        </div>
+        ${__privateGet(this, _AiArtifactCardGroupComponent_instances, toggle_get)}
+      </div>
+    `;
+  }
+};
+_AiArtifactCardGroupComponent_instances = /* @__PURE__ */ new WeakSet();
+visibleCards_get = function() {
+  return this._cards.filter((card) => !card.hidden);
+};
+collapsedCount_get = function() {
+  if (!Number.isFinite(this.visibleCount)) {
+    return DEFAULT_VISIBLE_COUNT;
+  }
+  return Math.max(1, Math.floor(this.visibleCount));
+};
+overflowCount_get = function() {
+  return Math.max(0, __privateGet(this, _AiArtifactCardGroupComponent_instances, visibleCards_get).length - __privateGet(this, _AiArtifactCardGroupComponent_instances, collapsedCount_get));
+};
+_chevronDownIcon = /* @__PURE__ */ new WeakMap();
+_chevronUpIcon = /* @__PURE__ */ new WeakMap();
+syncCardVisibility_fn = function() {
+  __privateGet(this, _AiArtifactCardGroupComponent_instances, visibleCards_get).forEach((card, index) => {
+    card.toggleAttribute(AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE, !this.expanded && index >= __privateGet(this, _AiArtifactCardGroupComponent_instances, collapsedCount_get));
+  });
+};
+handleSlotChange_fn = function() {
+  this.requestUpdate();
+};
+handleToggle_fn = function() {
+  this.expanded = !this.expanded;
+  this.dispatchEvent(
+    new CustomEvent("forge-ai-artifact-card-group-toggle", {
+      detail: { expanded: this.expanded },
+      bubbles: true,
+      composed: true
+    })
+  );
+};
+toggle_get = function() {
+  if (__privateGet(this, _AiArtifactCardGroupComponent_instances, overflowCount_get) === 0) {
+    return nothing;
+  }
+  const label = this.expanded ? this.showLessText : this.showMoreText.replace("{count}", String(__privateGet(this, _AiArtifactCardGroupComponent_instances, overflowCount_get)));
+  return html`
+      <button class="toggle" type="button" aria-expanded=${this.expanded} @click=${__privateMethod(this, _AiArtifactCardGroupComponent_instances, handleToggle_fn)}>
+        ${this.expanded ? __privateGet(this, _chevronUpIcon) : __privateGet(this, _chevronDownIcon)}
+        <span>${label}</span>
+        <span class="focus-indicator"></span>
+      </button>
+    `;
+};
+AiArtifactCardGroupComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: Number, attribute: "visible-count" })
+], AiArtifactCardGroupComponent.prototype, "visibleCount", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], AiArtifactCardGroupComponent.prototype, "expanded", 2);
+__decorateClass([
+  property({ attribute: "show-more-text" })
+], AiArtifactCardGroupComponent.prototype, "showMoreText", 2);
+__decorateClass([
+  property({ attribute: "show-less-text" })
+], AiArtifactCardGroupComponent.prototype, "showLessText", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "forge-ai-artifact-card", flatten: true })
+], AiArtifactCardGroupComponent.prototype, "_cards", 2);
+AiArtifactCardGroupComponent = __decorateClass([
+  customElement(AiArtifactCardGroupComponentTagName)
+], AiArtifactCardGroupComponent);
+export {
+  AiArtifactCardGroupComponent,
+  AiArtifactCardGroupComponentTagName
+};

package/dist/ai-artifact-card-group/ai-artifact-card-group.scss.mjs

@@ -0,0 +1,173 @@
+const styles = `/* prettier-ignore */
+@keyframes forge-focus-indicator-outward-grow {
+  from {
+    outline-width: 0;
+  }
+  to {
+    outline-width: var(--_focus-indicator-active-width);
+  }
+}
+@keyframes forge-focus-indicator-outward-shrink {
+  from {
+    outline-width: var(--_focus-indicator-active-width);
+  }
+}
+@keyframes forge-focus-indicator-inward-grow {
+  from {
+    border-width: 0;
+  }
+  to {
+    border-width: var(--_focus-indicator-active-width);
+  }
+}
+@keyframes forge-focus-indicator-inward-shrink {
+  from {
+    border-width: var(--_focus-indicator-active-width);
+  }
+}
+:host {
+  display: block;
+}
+
+.artifact-card-group {
+  overflow: hidden;
+  border: 1px solid var(--forge-theme-outline, #e0e0e0);
+  border-radius: var(--forge-ai-artifact-card-group-border-radius, 12px);
+  background: var(--forge-theme-surface, #ffffff);
+}
+
+/*
+ * Every row carries a top divider and the list is pulled up by one pixel so the first visible row's
+ * divider hides under the group border, whichever row that is once cards are hidden or collapsed.
+ */
+.list {
+  margin-top: -1px;
+}
+
+::slotted(*) {
+  border-top: 1px solid var(--forge-theme-outline, #e0e0e0);
+}
+
+/*
+ * Rows meeting the group's rounded corners get its inner radius for their focus rings. The bottom row only
+ * does when no toggle sits below it.
+ */
+.list ::slotted(:nth-child(1 of :not([hidden], [data-collapsed]))) {
+  --_forge-ai-artifact-card-group-start-radius: calc(var(--forge-ai-artifact-card-group-border-radius, 12px) - 1px);
+}
+
+.artifact-card-group:not(:has(.toggle)) ::slotted(:nth-last-child(1 of :not([hidden], [data-collapsed]))) {
+  --_forge-ai-artifact-card-group-end-radius: calc(var(--forge-ai-artifact-card-group-border-radius, 12px) - 1px);
+}
+
+.toggle {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
+  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));
+  font-weight: var(--forge-typography-body1-font-weight, 400);
+  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));
+  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);
+  text-transform: var(--forge-typography-body1-text-transform, inherit);
+  text-decoration: var(--forge-typography-body1-text-decoration, inherit);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--forge-spacing-xsmall, 8px);
+  width: 100%;
+  min-height: var(--forge-spacing-xxlarge, 48px);
+  padding: var(--forge-spacing-small, 12px);
+  border: none;
+  border-top: 1px solid var(--forge-theme-outline, #e0e0e0);
+  background: transparent;
+  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));
+  text-align: start;
+  cursor: pointer;
+  outline: none;
+  --_state-layer-display: var(--forge-state-layer-display, flex);
+  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));
+  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));
+  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);
+  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));
+  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);
+  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
+  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
+  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
+}
+.toggle::before {
+  opacity: 0;
+  position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  background-color: var(--_state-layer-hover-color);
+  inset: 0;
+  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
+  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);
+  content: "";
+  opacity: 0;
+  border-radius: inherit;
+}
+.toggle:hover::before {
+  background-color: var(--_state-layer-hover-color);
+  opacity: var(--_state-layer-hover-opacity);
+}
+.toggle:active::before {
+  opacity: var(--_state-layer-pressed-opacity);
+  transition-duration: var(--_state-layer-pressed-duration);
+  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
+}
+
+.toggle svg {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+}
+
+.focus-indicator {
+  position: absolute;
+  display: none;
+}
+
+/* The toggle is always the bottom row, so its lower corners follow the group's inner radius */
+.toggle:focus-visible .focus-indicator {
+  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
+  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
+  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);
+  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));
+  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));
+  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));
+  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));
+  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));
+  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));
+  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));
+  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));
+  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));
+  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);
+  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);
+  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);
+  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);
+  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);
+  animation-timing-function: var(--_focus-indicator-easing);
+  box-sizing: border-box;
+  color: var(--_focus-indicator-color);
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin-block: var(--_focus-indicator-offset-block);
+  margin-inline: var(--_focus-indicator-offset-inline);
+  animation-name: forge-focus-indicator-inward-grow, forge-focus-indicator-inward-shrink;
+  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));
+  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));
+  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));
+  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));
+  border: var(--_focus-indicator-width) solid currentColor;
+  inset: var(--_focus-indicator-inward-offset);
+  display: block;
+  --forge-focus-indicator-shape-start-start: 0px;
+  --forge-focus-indicator-shape-start-end: 0px;
+  --forge-focus-indicator-shape-end-start: calc(var(--forge-ai-artifact-card-group-border-radius, 12px) - 1px);
+  --forge-focus-indicator-shape-end-end: calc(var(--forge-ai-artifact-card-group-border-radius, 12px) - 1px);
+}`;
+export {
+  styles as default
+};

package/dist/ai-artifact-card-group/index.d.ts

@@ -0,0 +1 @@
+export * from './ai-artifact-card-group';

package/dist/ai-artifact-card-group/index.mjs

@@ -0,0 +1,5 @@
+import { AiArtifactCardGroupComponent, AiArtifactCardGroupComponentTagName } from "./ai-artifact-card-group.mjs";
+export {
+  AiArtifactCardGroupComponent,
+  AiArtifactCardGroupComponentTagName
+};

package/dist/ai-assistant-response/ai-assistant-response.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult, CSSResult } from 'lit';
-import { AssistantResponse, ToolDefinition } from '../ai-chatbot/types.js';
+import { AssistantResponse, AnyToolDefinition } from '../ai-chatbot/types.js';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-assistant-response': AiAssistantResponseComponent;
@@ -34,7 +34,7 @@ export declare class AiAssistantResponseComponent extends LitElement {
     #private;
     static styles: CSSResult;
     response: AssistantResponse;
-    tools?: Map<string, ToolDefinition>;
+    tools?: Map<string, AnyToolDefinition>;
     enableReactions: boolean;
     debugMode: boolean;
     showThinking: boolean;

package/dist/ai-assistant-response/ai-assistant-response.mjs

@@ -2,11 +2,14 @@ import { unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { keyed } from "lit/directives/keyed.js";
 import { MarkdownStreamController } from "../ai-chatbot/markdown-stream-controller.mjs";
+import { rendersAsMcpAppWidget } from "../ai-chatbot/utils.mjs";
 import "../ai-response-message-toolbar/ai-response-message-toolbar.mjs";
 import "../ai-chatbot/ai-chatbot-tool-call.mjs";
 import "../ai-tool-call-indicator/ai-tool-call-indicator.mjs";
 import "../ai-thinking-indicator/ai-thinking-indicator.mjs";
+import "../tools/ai-mcp-app/ai-mcp-app.mjs";
 import styles from "./ai-assistant-response.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,7 +29,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _internals, _markdownController, _AiAssistantResponseComponent_instances, hasVisibleContent_get, updateEmptyState_fn, renderTextChunk_fn, renderToolCall_fn, children_get, handleToolbarAction_fn, handleToolbarFeedback_fn, toolbar_get, thinkingIndicator_get;
+var _internals, _markdownController, _AiAssistantResponseComponent_instances, hasVisibleContent_get, updateEmptyState_fn, renderTextChunk_fn, isMcpAppToolCall_fn, renderToolCall_fn, children_get, handleToolbarAction_fn, handleToolbarFeedback_fn, toolbar_get, thinkingIndicator_get;
 const AiAssistantResponseComponentTagName = "forge-ai-assistant-response";
 let AiAssistantResponseComponent = class extends LitElement {
   constructor() {
@@ -81,7 +84,21 @@ renderTextChunk_fn = function(child) {
   const renderedHtml = __privateGet(this, _markdownController).getCachedHtml(child.messageId, content);
   return html`<div class="text-chunk">${unsafeHTML(renderedHtml)}</div>`;
 };
+isMcpAppToolCall_fn = function(toolCall) {
+  return rendersAsMcpAppWidget(toolCall) || this.tools?.get(toolCall.name)?.mcpApp !== void 0;
+};
 renderToolCall_fn = function(toolCall) {
+  if (rendersAsMcpAppWidget(toolCall)) {
+    return keyed(
+      toolCall.id,
+      html`<forge-ai-mcp-app
+          .toolCall=${toolCall}
+          .toolDefinition=${this.tools?.get(toolCall.name)}></forge-ai-mcp-app>`
+    );
+  }
+  if (__privateMethod(this, _AiAssistantResponseComponent_instances, isMcpAppToolCall_fn).call(this, toolCall)) {
+    return nothing;
+  }
   const toolDefinition = this.tools?.get(toolCall.name);
   if (!toolDefinition?.renderer) {
     return nothing;
@@ -113,6 +130,9 @@ children_get = function() {
     if (child.type === "text") {
       flushIndicator();
       results.push(__privateMethod(this, _AiAssistantResponseComponent_instances, renderTextChunk_fn).call(this, child));
+    } else if (__privateMethod(this, _AiAssistantResponseComponent_instances, isMcpAppToolCall_fn).call(this, child.data)) {
+      flushIndicator();
+      results.push(__privateMethod(this, _AiAssistantResponseComponent_instances, renderToolCall_fn).call(this, child.data));
     } else {
       toolBuffer.push(child.data);
     }
@@ -178,7 +198,11 @@ thinkingIndicator_get = function() {
     if (child.type !== "toolCall") {
       return false;
     }
-    return child.data.status === "parsing" || child.data.status === "executing" || child.data.status === "pending";
+    const isUnsettled = child.data.status === "parsing" || child.data.status === "executing" || child.data.status === "pending";
+    if (__privateMethod(this, _AiAssistantResponseComponent_instances, isMcpAppToolCall_fn).call(this, child.data)) {
+      return rendersAsMcpAppWidget(child.data) && isUnsettled;
+    }
+    return isUnsettled;
   });
   if (hasActiveToolCall) {
     return nothing;

package/dist/ai-canvas/ai-canvas.d.ts

@@ -0,0 +1,43 @@
+import { LitElement, TemplateResult, CSSResult } from 'lit';
+import { HeadingLevel } from '../ai-chatbot/types.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-canvas': AiCanvasComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-ai-canvas-close': CustomEvent<void>;
+    }
+}
+export declare const AiCanvasComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-canvas
+ *
+ * @summary A side panel that presents an artifact next to a conversation.
+ *
+ * @description
+ * Presentational panel with a titled header, an actions area, a close button, and a scrollable body.
+ * Form factors such as `forge-ai-chatbot-launcher` own the open/close state and layout; this component
+ * only renders the panel chrome and reports close requests.
+ *
+ * @slot title - Replaces the default title heading
+ * @slot actions - Action buttons rendered before the close button
+ * @slot - Panel body content
+ *
+ * @property {string} titleText - Title shown in the panel header. Also names the panel region for assistive technology, including when the `title` slot replaces the heading
+ * @property {HeadingLevel} headingLevel - Heading level applied to the default title (default: 2)
+ * @property {string} closeLabel - Accessible label and tooltip for the close button (default: 'Close canvas')
+ *
+ * @cssproperty --forge-ai-canvas-body-padding - Padding around the body content
+ * @cssproperty --forge-ai-canvas-border-inline-start - Border on the panel's leading edge (default: 1px solid outline)
+ *
+ * @event {CustomEvent<void>} forge-ai-canvas-close - Fired when the close button is clicked
+ */
+export declare class AiCanvasComponent extends LitElement {
+    #private;
+    static styles: CSSResult;
+    titleText: string;
+    headingLevel: HeadingLevel;
+    closeLabel: string;
+    focus(): void;
+    render(): TemplateResult;
+}

package/dist/ai-canvas/ai-canvas.mjs

@@ -0,0 +1,95 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { unsafeStatic, html as html$1 } from "lit/static-html.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../core/tooltip/tooltip.mjs";
+import styles from "./ai-canvas.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _closeButtonRef, _AiCanvasComponent_instances, handleCloseClick_fn, heading_get;
+const AiCanvasComponentTagName = "forge-ai-canvas";
+let AiCanvasComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiCanvasComponent_instances);
+    this.titleText = "";
+    this.headingLevel = 2;
+    this.closeLabel = "Close canvas";
+    __privateAdd(this, _closeButtonRef, createRef());
+  }
+  focus() {
+    __privateGet(this, _closeButtonRef).value?.focus();
+  }
+  render() {
+    return html`
+      <div class="canvas" role="region" aria-label=${ifDefined(this.titleText || void 0)}>
+        <div class="header">
+          <div class="header-start">
+            <slot name="title">${__privateGet(this, _AiCanvasComponent_instances, heading_get)}</slot>
+          </div>
+          <div class="header-end">
+            <slot name="actions"></slot>
+            <button
+              ${ref(__privateGet(this, _closeButtonRef))}
+              id="close-button"
+              type="button"
+              class="forge-icon-button forge-icon-button--medium close-button"
+              aria-label=${this.closeLabel}
+              @click=${__privateMethod(this, _AiCanvasComponent_instances, handleCloseClick_fn)}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+              </svg>
+            </button>
+            <forge-ai-tooltip for="close-button" placement="bottom">${this.closeLabel}</forge-ai-tooltip>
+          </div>
+        </div>
+        <div class="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+_closeButtonRef = /* @__PURE__ */ new WeakMap();
+_AiCanvasComponent_instances = /* @__PURE__ */ new WeakSet();
+handleCloseClick_fn = function() {
+  this.dispatchEvent(new CustomEvent("forge-ai-canvas-close", { bubbles: true, composed: true }));
+};
+heading_get = function() {
+  const tagName = unsafeStatic(`h${this.headingLevel}`);
+  return html$1`<${tagName} class="title">${this.titleText}</${tagName}>`;
+};
+AiCanvasComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ attribute: "title-text" })
+], AiCanvasComponent.prototype, "titleText", 2);
+__decorateClass([
+  property({ type: Number, attribute: "heading-level" })
+], AiCanvasComponent.prototype, "headingLevel", 2);
+__decorateClass([
+  property({ attribute: "close-label" })
+], AiCanvasComponent.prototype, "closeLabel", 2);
+AiCanvasComponent = __decorateClass([
+  customElement(AiCanvasComponentTagName)
+], AiCanvasComponent);
+export {
+  AiCanvasComponent,
+  AiCanvasComponentTagName
+};

package/dist/ai-canvas/ai-canvas.scss.mjs

@@ -0,0 +1,4 @@
+const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-icon-button {\n  --_icon-button-display:var(--forge-icon-button-display, inline-flex);\n  --_icon-button-size:var(--forge-icon-button-size, 48px);\n  --_icon-button-gap:var(--forge-icon-button-gap, 0);\n  --_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);\n  --_icon-button-background-color:var(--forge-icon-button-background-color, none);\n  --_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n  --_icon-button-cursor:var(--forge-icon-button-cursor, pointer);\n  --_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));\n  --_icon-button-border:var(--forge-icon-button-border, none);\n  --_icon-button-shadow:var(--forge-icon-button-shadow, none);\n  --_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n  --_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  --_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));\n  --_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));\n  --_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));\n  --_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));\n  --_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);\n  --_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);\n  --_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));\n  --_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));\n  --_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));\n  --_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n  --_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);\n  --_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);\n  --_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));\n  --_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n  --_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);\n  --_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));\n  --_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));\n  --_icon-button-toggle-on-background-color:var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n  --_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n  --_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n  --_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));\n  --_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));\n  --_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed);\n  --_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);\n  --_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));\n  --_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n}\n\n.forge-icon-button {\n  display: var(--_icon-button-display);\n  position: relative;\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  position: relative;\n  z-index: 0;\n  display: var(--_icon-button-display);\n  align-items: center;\n  justify-content: center;\n  gap: var(--_icon-button-gap);\n  box-sizing: border-box;\n  height: var(--_icon-button-density-large-size);\n  min-width: var(--_icon-button-density-large-size);\n  border: var(--_icon-button-border);\n  border-start-start-radius: var(--_icon-button-shape-start-start);\n  border-start-end-radius: var(--_icon-button-shape-start-end);\n  border-end-start-radius: var(--_icon-button-shape-end-start);\n  border-end-end-radius: var(--_icon-button-shape-end-end);\n  padding: var(--_icon-button-padding);\n  box-shadow: var(--_icon-button-shadow);\n  color: var(--_icon-button-icon-color);\n  background: var(--_icon-button-background-color);\n  font-size: var(--_icon-button-icon-size);\n  cursor: var(--_icon-button-cursor);\n  user-select: none;\n  transition-property: box-shadow, background;\n  transition-duration: var(--_icon-button-transition-duration);\n  transition-timing-function: var(--_icon-button-transition-timing);\n}\n\n.forge-icon-button img, .forge-icon-button svg {\n  height: var(--_icon-button-icon-size);\n  width: var(--_icon-button-icon-size);\n}\n\n.forge-icon-button svg {\n  fill: currentColor;\n}\n\n.forge-icon-button:not(:disabled) {\n  --_state-layer-display:var(--forge-state-layer-display, flex);\n  --_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n  --_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));\n  --_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);\n  --_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n  --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);\n  --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);\n  --_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);\n  --_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-icon-button:not(:disabled)::before {\n  opacity: 0;\n  position: absolute;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  background-color: var(--_state-layer-hover-color);\n  inset: 0;\n  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n  --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 100ms);\n  content: "";\n  opacity: 0;\n  border-radius: inherit;\n}\n\n.forge-icon-button:not(:disabled):hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-icon-button:not(:disabled):active::before {\n  opacity: var(--_state-layer-pressed-opacity);\n  transition-duration: var(--_state-layer-pressed-duration);\n  --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n.forge-icon-button:not(:disabled) {\n  --forge-state-layer-color: var(--_icon-button-icon-color);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n  from {\n    outline-width: 0;\n  }\n  to {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n  from {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-grow {\n  from {\n    border-width: 0;\n  }\n  to {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n  from {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n.forge-icon-button:not(:disabled) {\n  outline: none;\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n  --_focus-indicator-display:var(--forge-focus-indicator-display, flex);\n  --_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n  --_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);\n  --_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n  --_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n  --_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n  --_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n  --_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n  --_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n  --_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);\n  --_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);\n  --_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n  animation-timing-function: var(--_focus-indicator-easing);\n  box-sizing: border-box;\n  color: var(--_focus-indicator-color);\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin-block: var(--_focus-indicator-offset-block);\n  margin-inline: var(--_focus-indicator-offset-inline);\n  animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n  inset: calc(-1 * var(--_focus-indicator-outward-offset));\n  outline: var(--_focus-indicator-width) solid currentColor;\n  content: "";\n  display: block;\n}\n\n.forge-icon-button:not(:disabled) {\n  --forge-focus-indicator-color: var(--_icon-button-focus-indicator-color);\n  --forge-focus-indicator-shape: var(--_icon-button-shape);\n}\n\n.forge-icon-button:not(:disabled):where(.forge-icon-button--text, :not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))) {\n  --forge-focus-indicator-outward-offset: 0px;\n}\n\n.forge-icon-button--outlined {\n  border-width: var(--_icon-button-outlined-border-width);\n  border-style: var(--_icon-button-outlined-border-style);\n  border-color: var(--_icon-button-outlined-border-color);\n}\n\n.forge-icon-button--tonal {\n  --_icon-button-icon-color:var(--_icon-button-tonal-icon-color);\n  --_icon-button-background-color:var(--_icon-button-tonal-background-color);\n}\n\n.forge-icon-button--filled, .forge-icon-button--raised {\n  --_icon-button-icon-color:var(--_icon-button-filled-icon-color);\n  --_icon-button-background-color:var(--_icon-button-filled-background-color);\n}\n\n.forge-icon-button--raised {\n  --_icon-button-shadow:var(--_icon-button-raised-shadow);\n}\n\n.forge-icon-button--raised:hover {\n  --_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow);\n}\n\n.forge-icon-button--raised:active {\n  --_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow);\n}\n\n.forge-icon-button--squared {\n  --_icon-button-shape:var(--_icon-button-shape-squared);\n}\n\n.forge-icon-button--small {\n  --_icon-button-size:var(--_icon-button-density-small-size);\n  --_icon-button-icon-size:var(--_icon-button-density-small-icon-size);\n  --_icon-button-padding:var(--_icon-button-density-small-padding);\n}\n\n.forge-icon-button--small > * {\n  font-size: var(--_icon-button-density-small-icon-size);\n}\n\n.forge-icon-button--medium {\n  --_icon-button-size:var(--_icon-button-density-medium-size);\n  --_icon-button-padding:var(--_icon-button-density-medium-padding);\n}\n\n.forge-icon-button:disabled {\n  pointer-events: none;\n  opacity: var(--_icon-button-disabled-opacity);\n  pointer-events: auto;\n  cursor: not-allowed;\n}\n\n.forge-icon-button forge-circular-progress {\n  --forge-circular-progress-indicator-color: var(--_icon-button-icon-color);\n  --forge-circular-progress-track-color: transparent;\n  --forge-circular-progress-size: 1em;\n}\n\n:host {\n  display: block;\n  height: 100%;\n  min-inline-size: 0;\n  box-sizing: border-box;\n}\n\n.canvas {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-inline-size: 0;\n  box-sizing: border-box;\n  background-color: var(--forge-theme-surface, #ffffff);\n  border-inline-start: var(--forge-ai-canvas-border-inline-start, 1px solid var(--forge-theme-outline, #e0e0e0));\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--forge-spacing-small, 12px);\n  flex-shrink: 0;\n  min-height: 56px;\n  padding-inline: var(--forge-spacing-medium, 16px);\n  box-sizing: border-box;\n  border-block-end: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\n\n.header-start {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.title {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-heading1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-heading1-font-weight, 500);\n  line-height: var(--forge-typography-heading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-heading1-letter-spacing, 0.0178571429em);\n  text-transform: var(--forge-typography-heading1-text-transform, inherit);\n  text-decoration: var(--forge-typography-heading1-text-decoration, inherit);\n  margin: 0;\n  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.header-end {\n  display: flex;\n  align-items: center;\n  gap: var(--forge-spacing-xxsmall, 4px);\n  flex-shrink: 0;\n}\n\n.close-button,\n.close-button > svg {\n  fill: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n\n.body::-webkit-scrollbar {\n  height: var(--forge-scrollbar-height, 16px);\n  width: var(--forge-scrollbar-width, 16px);\n}\n.body::-webkit-scrollbar-track {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.body::-webkit-scrollbar-track:hover {\n  background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.body::-webkit-scrollbar-corner {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.body::-webkit-scrollbar-thumb {\n  height: var(--forge-scrollbar-thumb-min-height, 32px);\n  width: var(--forge-scrollbar-thumb-min-width, 32px);\n  border-radius: var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  border-width: var(--forge-scrollbar-border-width, 3px);\n  border-style: solid;\n  border-color: transparent;\n  background-color: var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));\n  background-clip: content-box;\n}\n.body::-webkit-scrollbar-thumb:hover {\n  background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--forge-ai-canvas-body-padding, var(--forge-spacing-medium, 16px));\n  box-sizing: border-box;\n}';
+export {
+  styles as default
+};

package/dist/ai-canvas/index.d.ts

@@ -0,0 +1 @@
+export * from './ai-canvas';

package/dist/ai-canvas/index.mjs

@@ -0,0 +1,5 @@
+import { AiCanvasComponent, AiCanvasComponentTagName } from "./ai-canvas.mjs";
+export {
+  AiCanvasComponent,
+  AiCanvasComponentTagName
+};

package/dist/ai-chatbot/ag-ui-adapter.d.ts

@@ -1,10 +1,10 @@
 import { AgentAdapter } from './agent-adapter.js';
-import { ChatMessage, ToolDefinition } from './types.js';
+import { ChatMessage, AnyToolDefinition } from './types.js';
 export interface AgUiAdapterConfig {
     url: string;
     context?: Record<string, unknown>;
     headers?: Record<string, string>;
-    tools?: ToolDefinition[];
+    tools?: AnyToolDefinition[];
 }
 export declare class AgUiAdapter extends AgentAdapter {
     #private;

package/dist/ai-chatbot/ag-ui-adapter.mjs

@@ -61,7 +61,7 @@ class AgUiAdapter extends AgentAdapter {
     const transformedMessages = this.#transformMessages(messages);
     const context = Object.keys(this.#context).length ? this.#transformContext(this.#context) : void 0;
     this.#agent.setMessages(transformedMessages);
-    const tools = this.#transformTools(this._tools);
+    const tools = this.#transformTools(this.getModelFacingTools());
     this.#agent.runAgent({ tools, context });
   }
   sendToolResult(toolCallId, result, messages) {