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

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

@@ -4,6 +4,7 @@ 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";
@@ -84,10 +85,10 @@ renderTextChunk_fn = function(child) {
   return html`<div class="text-chunk">${unsafeHTML(renderedHtml)}</div>`;
 };
 isMcpAppToolCall_fn = function(toolCall) {
-  return !!toolCall.uiResource || this.tools?.get(toolCall.name)?.mcpApp !== void 0;
+  return rendersAsMcpAppWidget(toolCall) || this.tools?.get(toolCall.name)?.mcpApp !== void 0;
 };
 renderToolCall_fn = function(toolCall) {
-  if (toolCall.uiResource) {
+  if (rendersAsMcpAppWidget(toolCall)) {
     return keyed(
       toolCall.id,
       html`<forge-ai-mcp-app
@@ -199,7 +200,7 @@ thinkingIndicator_get = function() {
     }
     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 !!child.data.uiResource && isUnsettled;
+      return rendersAsMcpAppWidget(child.data) && isUnsettled;
     }
     return isUnsettled;
   });

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/agent-adapter.d.ts

@@ -1,4 +1,4 @@
-import { ChatMessage, FileUploadCallbacks, McpAppUiResource, McpToolResult, ToolDefinition } from './types.js';
+import { ChatMessage, FileUploadCallbacks, McpAppUiResource, McpToolResult, AnyToolDefinition } from './types.js';
 import { EventEmitter, Subscription } from './event-emitter.js';
 export interface MessageStartEvent {
     messageId: string;
@@ -167,7 +167,7 @@ export interface ActivityDeltaAgentEvent {
 }
 export declare abstract class AgentAdapter {
     protected _state: AdapterState;
-    protected _tools: ToolDefinition[];
+    protected _tools: AnyToolDefinition[];
     protected _events: {
         runStarted: EventEmitter<void>;
         runFinished: EventEmitter<void>;
@@ -235,14 +235,14 @@ export declare abstract class AgentAdapter {
     disposeMcpAppView?(params: {
         toolCallId: string;
     }): void;
-    setTools(tools: ToolDefinition[]): void;
-    getTools(): ToolDefinition[];
+    setTools(tools: AnyToolDefinition[]): void;
+    getTools(): AnyToolDefinition[];
     /**
      * Tools to forward to the backend agent, excluding MCP-app tools (`ToolDefinition.mcpApp`).
      * MCP-app tools are a host-internal mechanism for streaming a UI resource into an existing
      * tool call — the model never calls them directly, so they must never reach the agent.
      */
-    getModelFacingTools(): ToolDefinition[];
+    getModelFacingTools(): AnyToolDefinition[];
     getState(): AdapterState;
     get isConnected(): boolean;
     get isConnecting(): boolean;

package/dist/ai-chatbot/agent-runner.d.ts

@@ -1,12 +1,12 @@
 import { AgentAdapter } from './agent-adapter.js';
-import { ChatMessage, ToolCall, ToolDefinition } from './types.js';
+import { ChatMessage, ToolCall, AnyToolDefinition } from './types.js';
 export interface AgentRunnerConfig {
     /** The adapter instance that handles communication with the AI model */
     adapter: AgentAdapter;
     /** The user prompt to send to the agent */
     prompt: string;
     /** Optional tools the agent can call during execution */
-    tools?: ToolDefinition[];
+    tools?: AnyToolDefinition[];
     /** Execution mode: 'one-shot' stops after first response, 'multi-turn' allows tool usage loops. @default 'one-shot' */
     mode?: 'one-shot' | 'multi-turn';
     /** Maximum conversation turns in multi-turn mode to prevent infinite loops. @default 20 */

package/dist/ai-chatbot/ai-chatbot-base.d.ts

@@ -10,7 +10,7 @@ import { ForgeAiSuggestionsEventData, Suggestion } from '../ai-suggestions';
 import { ForgeAiVoiceInputResultEvent } from '../ai-voice-input';
 import { AgentAdapter } from './agent-adapter.js';
 import { ChatbotCoreController } from '../core/chatbot-core-controller.js';
-import { Agent, ChatMessage, ClientMessageInput, ContextItem, HeadingLevel, MessageItem, SlashCommand, ThreadState, ToolDefinition } from './types.js';
+import { Agent, ChatMessage, ClientMessageInput, ContextItem, HeadingLevel, MessageItem, SlashCommand, ThreadState, ToolCall, AnyToolDefinition } from './types.js';
 export type FeatureToggle = 'on' | 'off';
 export declare abstract class AiChatbotBase extends LitElement {
     #private;
@@ -56,8 +56,9 @@ export declare abstract class AiChatbotBase extends LitElement {
     protected _coreController: ChatbotCoreController;
     protected get _isStreaming(): boolean;
     protected get _isUploading(): boolean;
-    protected get _tools(): Map<string, ToolDefinition>;
+    protected get _tools(): Map<string, AnyToolDefinition>;
     protected get _messageItems(): MessageItem[];
+    protected get _toolCalls(): ToolCall[];
     protected get _hasMessages(): boolean;
     protected get _allContextItems(): ContextItem[];
     connectedCallback(): void;

package/dist/ai-chatbot/ai-chatbot-base.mjs

@@ -140,6 +140,17 @@ class AiChatbotBase extends LitElement {
   get _messageItems() {
     return this._coreController?.messageItems ?? [];
   }
+  get _toolCalls() {
+    return this._messageItems.flatMap((item) => {
+      if (item.type === "toolCall") {
+        return [item.data];
+      }
+      if (item.type === "assistant") {
+        return item.data.children.flatMap((child) => child.type === "toolCall" ? [child.data] : []);
+      }
+      return [];
+    });
+  }
   get _hasMessages() {
     return this._coreController?.hasMessages ?? false;
   }

package/dist/ai-chatbot/ai-chatbot-tool-call.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult, nothing, PropertyValues, CSSResult } from 'lit';
-import { ToolCall, ToolDefinition } from './types.js';
+import { ToolCall, AnyToolDefinition } from './types.js';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-chatbot-tool-call': AiChatbotToolCallComponent;
@@ -13,7 +13,7 @@ export declare class AiChatbotToolCallComponent extends LitElement {
     #private;
     static styles: CSSResult;
     toolCall: ToolCall;
-    toolDefinition?: ToolDefinition;
+    toolDefinition?: AnyToolDefinition;
     updated(changedProperties: PropertyValues<this>): void;
     render(): TemplateResult | typeof nothing;
 }

package/dist/ai-chatbot/ai-chatbot-tool-call.mjs

@@ -1,7 +1,10 @@
 import { unsafeCSS, LitElement, nothing, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import { ContextConsumer } from "@lit/context";
+import { toolCanvasHostContext, createToolCanvas, requestCanvasOpen, requestCanvasClose, resolveToolCanvasInline, resolveToolCanvasIcon, resolveToolCanvasTitle, resolveToolCanvasSubtitle, resolveToolCanvasActionLabel } from "./tool-canvas.mjs";
 import { shouldShowToolRenderer } from "./utils.mjs";
+import "../ai-artifact-card/ai-artifact-card.mjs";
 import styles from "./ai-chatbot-tool-call.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,7 +24,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 _customRendererRef, _renderedElement, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get, dispatchScrollRequest_fn, customRenderer_get, replaceRenderedElement_fn;
+var _customRendererRef, _renderedElement, _renderedCanvas, _canvasHostConsumer, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get, presentation_get, isOpenInCanvas_get, _canvasControls, canvas_get, showsArtifactCard_get, artifactCard_fn, dispatchScrollRequest_fn, customRenderer_get, replaceRenderedElement_fn;
 const AiChatbotToolCallComponentTagName = "forge-ai-chatbot-tool-call";
 let AiChatbotToolCallComponent = class extends LitElement {
   constructor() {
@@ -29,27 +32,40 @@ let AiChatbotToolCallComponent = class extends LitElement {
     __privateAdd(this, _AiChatbotToolCallComponent_instances);
     __privateAdd(this, _customRendererRef, createRef());
     __privateAdd(this, _renderedElement);
+    __privateAdd(this, _renderedCanvas);
+    __privateAdd(this, _canvasHostConsumer, new ContextConsumer(this, {
+      context: toolCanvasHostContext,
+      subscribe: true,
+      callback: () => this.requestUpdate()
+    }));
+    __privateAdd(this, _canvasControls);
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (!changedProperties.has("toolCall") && !changedProperties.has("toolDefinition")) {
-      return;
-    }
     const container = __privateGet(this, _customRendererRef).value;
     if (!container || !__privateGet(this, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get)) {
       return;
     }
     const renderer = this.toolDefinition?.renderer;
+    const canvas = __privateGet(this, _AiChatbotToolCallComponent_instances, canvas_get);
+    const mounted = container.childNodes.length > 0;
+    const changed = changedProperties.has("toolCall") || changedProperties.has("toolDefinition");
     if (renderer?.elementTag) {
-      if (__privateGet(this, _renderedElement) instanceof HTMLElement && __privateGet(this, _renderedElement).tagName.toLowerCase() === renderer.elementTag) {
-        __privateGet(this, _renderedElement).toolCall = this.toolCall;
+      if (mounted && __privateGet(this, _renderedElement) instanceof HTMLElement && __privateGet(this, _renderedElement).tagName.toLowerCase() === renderer.elementTag) {
+        const existing = __privateGet(this, _renderedElement);
+        existing.toolCall = this.toolCall;
+        existing.presentation = __privateGet(this, _AiChatbotToolCallComponent_instances, presentation_get);
+        existing.canvas = canvas;
         return;
       }
       const element = document.createElement(renderer.elementTag);
       element.toolCall = this.toolCall;
+      element.presentation = __privateGet(this, _AiChatbotToolCallComponent_instances, presentation_get);
+      element.canvas = canvas;
       __privateMethod(this, _AiChatbotToolCallComponent_instances, replaceRenderedElement_fn).call(this, container, element);
-    } else if (renderer?.render) {
-      __privateMethod(this, _AiChatbotToolCallComponent_instances, replaceRenderedElement_fn).call(this, container, renderer.render(this.toolCall));
+    } else if (renderer?.render && (changed || !mounted || canvas !== __privateGet(this, _renderedCanvas))) {
+      __privateSet(this, _renderedCanvas, canvas);
+      __privateMethod(this, _AiChatbotToolCallComponent_instances, replaceRenderedElement_fn).call(this, container, renderer.render(this.toolCall, { presentation: __privateGet(this, _AiChatbotToolCallComponent_instances, presentation_get), canvas }));
     }
   }
   render() {
@@ -58,10 +74,68 @@ let AiChatbotToolCallComponent = class extends LitElement {
 };
 _customRendererRef = /* @__PURE__ */ new WeakMap();
 _renderedElement = /* @__PURE__ */ new WeakMap();
+_renderedCanvas = /* @__PURE__ */ new WeakMap();
+_canvasHostConsumer = /* @__PURE__ */ new WeakMap();
 _AiChatbotToolCallComponent_instances = /* @__PURE__ */ new WeakSet();
 shouldRenderCustom_get = function() {
   return shouldShowToolRenderer(this.toolCall, this.toolDefinition);
 };
+presentation_get = function() {
+  if (!this.toolDefinition?.canvas) {
+    return "inline";
+  }
+  return __privateGet(this, _canvasHostConsumer).value?.presentation ?? "inline";
+};
+isOpenInCanvas_get = function() {
+  return __privateGet(this, _canvasHostConsumer).value?.openToolCallId === this.toolCall.id;
+};
+_canvasControls = /* @__PURE__ */ new WeakMap();
+canvas_get = function() {
+  const available = __privateGet(this, _AiChatbotToolCallComponent_instances, presentation_get) === "inline-expandable";
+  const isOpen = __privateGet(this, _AiChatbotToolCallComponent_instances, isOpenInCanvas_get);
+  if (__privateGet(this, _canvasControls)?.available !== available || __privateGet(this, _canvasControls).isOpen !== isOpen) {
+    __privateSet(this, _canvasControls, createToolCanvas({
+      available,
+      isOpen: () => __privateGet(this, _AiChatbotToolCallComponent_instances, isOpenInCanvas_get),
+      open: (options) => requestCanvasOpen(this, {
+        toolCallId: this.toolCall.id,
+        toolName: this.toolCall.name,
+        title: options?.title
+      }),
+      close: () => requestCanvasClose(this, { toolCallId: this.toolCall.id })
+    }));
+  }
+  return __privateGet(this, _canvasControls);
+};
+showsArtifactCard_get = function() {
+  if (!this.toolDefinition || __privateGet(this, _AiChatbotToolCallComponent_instances, presentation_get) !== "inline-expandable") {
+    return false;
+  }
+  switch (resolveToolCanvasInline(this.toolDefinition)) {
+    case "card":
+      return true;
+    case "card-while-open":
+      return __privateGet(this, _AiChatbotToolCallComponent_instances, isOpenInCanvas_get);
+    default:
+      return false;
+  }
+};
+artifactCard_fn = function(toolDefinition) {
+  const active = __privateGet(this, _AiChatbotToolCallComponent_instances, isOpenInCanvas_get);
+  const icon = resolveToolCanvasIcon(this.toolCall, toolDefinition);
+  icon?.setAttribute("slot", "icon");
+  return html`
+      <forge-ai-artifact-card
+        title-text=${resolveToolCanvasTitle(this.toolCall, toolDefinition)}
+        .subtitleText=${resolveToolCanvasSubtitle(this.toolCall, toolDefinition) ?? ""}
+        action-label=${resolveToolCanvasActionLabel(this.toolCall, toolDefinition, active)}
+        asset-id=${this.toolCall.id}
+        ?active=${active}
+        @forge-ai-artifact-card-open=${() => __privateGet(this, _AiChatbotToolCallComponent_instances, canvas_get).toggle()}>
+        ${icon ?? nothing}
+      </forge-ai-artifact-card>
+    `;
+};
 dispatchScrollRequest_fn = function() {
   this.dispatchEvent(
     new CustomEvent("forge-ai-message-thread-scroll-request", {
@@ -71,10 +145,14 @@ dispatchScrollRequest_fn = function() {
   );
 };
 customRenderer_get = function() {
-  const renderer = this.toolDefinition?.renderer;
-  if (!renderer || !__privateGet(this, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get)) {
+  const toolDefinition = this.toolDefinition;
+  const renderer = toolDefinition?.renderer;
+  if (!toolDefinition || !renderer || !__privateGet(this, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get)) {
     return nothing;
   }
+  if (__privateGet(this, _AiChatbotToolCallComponent_instances, showsArtifactCard_get)) {
+    return __privateMethod(this, _AiChatbotToolCallComponent_instances, artifactCard_fn).call(this, toolDefinition);
+  }
   if (renderer.elementTag || renderer.render) {
     return html`<div ${ref(__privateGet(this, _customRendererRef))}></div>`;
   }

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

@@ -1,7 +1,8 @@
-import { TemplateResult, CSSResult } from 'lit';
+import { PropertyValues, TemplateResult, CSSResult } from 'lit';
 import { AiMessageThreadComponent } from '../ai-message-thread';
 import { AiPromptComponent } from '../ai-prompt';
 import { AiChatbotBase } from './ai-chatbot-base.js';
+import { CanvasOpenEventData, OpenCanvasOptions } from '../core/canvas-controller.js';
 import { Agent, ChatMessage, ForgeAiChatbotThreadSelectEventData, ForgeAiChatbotThreadSearchEventData, ForgeAiChatbotThreadLoadMoreEventData, ForgeAiChatbotThreadRenameEventData, ForgeAiChatbotThreadDeleteEventData, ForgeAiChatbotContextRemoveEventData, Thread } from './types.js';
 import { Ref } from 'lit/directives/ref.js';
 declare global {
@@ -35,6 +36,8 @@ declare global {
         'forge-ai-chatbot-thread-delete': CustomEvent<ForgeAiChatbotThreadDeleteEventData>;
         'forge-ai-chatbot-context-remove': CustomEvent<ForgeAiChatbotContextRemoveEventData>;
         'forge-ai-chatbot-thread-retry': CustomEvent<void>;
+        'forge-ai-chatbot-canvas-open': CustomEvent<CanvasOpenEventData>;
+        'forge-ai-chatbot-canvas-close': CustomEvent<void>;
     }
 }
 export interface ForgeAiChatbotMessageEventData {
@@ -102,12 +105,15 @@ export declare const AiChatbotComponentTagName: keyof HTMLElementTagNameMap;
  * @property {FeatureToggle} exportOption - Controls the export-conversation header action. `'on'` (default) shows it when messages exist; `'off'` hides it entirely.
  * @property {string | null} selectedThreadId - The id of the currently selected thread. Set this to highlight a thread in the conversations panel (e.g. when restoring a conversation loaded from the backend). Updated internally when a thread is selected or a new chat starts.
  * @property {boolean} threadsLoading - When true, shows a loading indicator in the conversations panel's recent chats list while threads are loading (default: false)
+ * @property {string} canvasTitle - Default title for the artifact canvas modal, used when the open request does not supply one
  * @property {string | undefined} threadsError - Message describing a failed thread load. When set, the conversations panel shows the message with a retry button instead of its empty state or loading indicator. The conversations button also shows an error badge so the failure is visible with the panel closed. If threads are already loaded the list stays visible and the message renders as a compact single line with a retry - at the bottom of the list when a page was in flight, otherwise above it. Clear it once a load succeeds.
  *
  * @cssproperty --forge-ai-chatbot-icon-color - The fill color for the AI icon. Defaults to `tertiary`.
  * @cssproperty --forge-ai-chatbot-suggestion-background - The background color for suggestion buttons. Defaults to `tertiary-container`.
  * @cssproperty --forge-ai-chatbot-suggestion-foreground - The text color for suggestion buttons. Defaults to `on-tertiary-container`.
  * @cssproperty --forge-ai-chatbot-header-title-color - The color of the header title text. Defaults to `currentColor`.
+ * @cssproperty --forge-ai-chatbot-canvas-width - Width of the artifact canvas modal (default: 80vw).
+ * @cssproperty --forge-ai-chatbot-canvas-height - Height of the artifact canvas modal (default: 80vh).
  *
  * @event {CustomEvent<void>} forge-ai-chatbot-connected - Fired when adapter connects
  * @event {CustomEvent<void>} forge-ai-chatbot-disconnected - Fired when adapter disconnects
@@ -132,6 +138,8 @@ export declare const AiChatbotComponentTagName: keyof HTMLElementTagNameMap;
  * @event {CustomEvent<ForgeAiChatbotThreadRenameEventData>} forge-ai-chatbot-thread-rename - Fired when user renames a thread. Cancelable - if prevented, call onSuccess() to commit or onError() to revert.
  * @event {CustomEvent<ForgeAiChatbotThreadDeleteEventData>} forge-ai-chatbot-thread-delete - Fired when user deletes a thread. Cancelable - if prevented, call onSuccess() to commit deletion or onError() to revert. Otherwise optimistically removed.
  * @event {CustomEvent<void>} forge-ai-chatbot-thread-retry - Fired when the retry button in the conversations panel's error state is clicked. Re-request the threads and clear threadsError once the load succeeds
+ * @event {CustomEvent<CanvasOpenEventData>} forge-ai-chatbot-canvas-open - Fired before the canvas modal opens or replaces its content. Cancelable - prevents the canvas from opening
+ * @event {CustomEvent<void>} forge-ai-chatbot-canvas-close - Fired when the canvas modal closes. Cancelable only for user or `closeCanvas()` initiated closes; closes caused by clearing the thread cannot be prevented
  */
 export declare class AiChatbotComponent extends AiChatbotBase {
     #private;
@@ -148,11 +156,26 @@ export declare class AiChatbotComponent extends AiChatbotBase {
     selectedThreadId: string | null;
     threadsLoading: boolean;
     threadsError?: string;
+    canvasTitle?: string;
     protected _messageThreadRef: Ref<AiMessageThreadComponent>;
     protected _promptRef: Ref<AiPromptComponent>;
     protected _handleInfo(): void;
     sendMessage(content: string, files?: File[]): Promise<void>;
     focus(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    get canvasOpen(): boolean;
+    /**
+     * Opens the artifact canvas in a modal over the chatbot, or swaps its content if already open.
+     * Returns false when the open event is prevented.
+     */
+    openCanvas(options?: OpenCanvasOptions): boolean;
+    /**
+     * Closes the artifact canvas. Returns false if it was not open or the close event was prevented.
+     */
+    closeCanvas(): boolean;
+    clearMessages(): boolean;
+    setMessages(messages: ChatMessage[]): void;
     showConversations(): void;
     hideConversations(): void;
     /**