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

package/dist/tools/ai-mcp-app/ai-mcp-app.mjs

@@ -27,7 +27,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 _controller, _lastHostContext, _unregisterView, _containerDimensions, _hostStyles, _restorePage, _resizeFrame, _resizeObserver, _McpAppToolElement_instances, uiResource_get, hasPolicy_get, canRender_get, canConnect_get, errorBody_get, hostContext_get, toolInfo_get, hostCapabilities_get, handlers_get, setDisplayMode_fn, applyDisplayMode_fn, releasePage_fn, connect_fn, syncHostContext_fn, resolveHostStyles_fn, scheduleContainerMeasure_fn, cancelContainerMeasure_fn, readContainerDimensions_fn, measureContainer_fn, openLink_fn, settlePendingLink_fn, confirmLink_fn, dispatchMessage_fn, handleLoggingMessage_fn, handleRequestTeardown_fn, dispatchRequestDisplayMode_fn, dispatchUpdateModelContext_fn, _iframe, _promotedToolbar, linkConfirmation_get, isPromoted_get, exitToInline_fn, handleContainerKeydown_fn, bordered_get, errorArtifact_get;
+var _controller, _lastHostContext, _unregisterView, _containerDimensions, _hostStyles, _restorePage, _resizeFrame, _resizeObserver, _McpAppToolElement_instances, uiResource_get, hasPolicy_get, canRender_get, canConnect_get, isLoading_get, errorBody_get, hostContext_get, toolInfo_get, hostCapabilities_get, handlers_get, setDisplayMode_fn, applyDisplayMode_fn, releasePage_fn, connect_fn, syncHostContext_fn, resolveHostStyles_fn, scheduleContainerMeasure_fn, cancelContainerMeasure_fn, readContainerDimensions_fn, measureContainer_fn, openLink_fn, settlePendingLink_fn, confirmLink_fn, dispatchMessage_fn, handleLoggingMessage_fn, handleRequestTeardown_fn, dispatchRequestDisplayMode_fn, dispatchUpdateModelContext_fn, _iframe, _promotedToolbar, linkConfirmation_get, isPromoted_get, exitToInline_fn, handleContainerKeydown_fn, bordered_get, _loadingPlaceholder, errorArtifact_get;
 const HOST_INFO = { name: "forge-ai", version: "1.0.0" };
 const MAX_INLINE_HEIGHT = 2e3;
 const OPEN_LINK_PROTOCOLS = ["http:", "https:", "mailto:"];
@@ -138,6 +138,11 @@ let McpAppToolElement = class extends LitElement {
         </svg>
       </button>
     </div>
+  `);
+    __privateAdd(this, _loadingPlaceholder, html`
+    <div class="container loading" role="status" aria-label="Loading app">
+      <div class="forge-skeleton"></div>
+    </div>
   `);
   }
   firstUpdated() {
@@ -186,6 +191,9 @@ let McpAppToolElement = class extends LitElement {
     if (this._lifecycle === "closed") {
       return nothing;
     }
+    if (__privateGet(this, _McpAppToolElement_instances, isLoading_get)) {
+      return __privateGet(this, _loadingPlaceholder);
+    }
     if (!__privateGet(this, _McpAppToolElement_instances, canRender_get)) {
       return __privateGet(this, _McpAppToolElement_instances, errorArtifact_get);
     }
@@ -229,7 +237,13 @@ canRender_get = function() {
 canConnect_get = function() {
   return this._lifecycle === "live" && __privateGet(this, _McpAppToolElement_instances, canRender_get);
 };
+isLoading_get = function() {
+  return !__privateGet(this, _McpAppToolElement_instances, uiResource_get) && this.toolCall?.uiResourceStatus === "loading";
+};
 errorBody_get = function() {
+  if (!__privateGet(this, _McpAppToolElement_instances, uiResource_get) && this.toolCall?.uiResourceStatus === "error") {
+    return "This interactive app can't be shown because it failed to load.";
+  }
   if (!this.host?.sandboxUrl) {
     return "This interactive app can't be shown because no secure sandbox is configured.";
   }
@@ -526,6 +540,7 @@ handleContainerKeydown_fn = function(evt) {
 bordered_get = function() {
   return __privateGet(this, _McpAppToolElement_instances, uiResource_get)?.prefersBorder !== false;
 };
+_loadingPlaceholder = /* @__PURE__ */ new WeakMap();
 errorArtifact_get = function() {
   return html`
       <div class="container bordered">

package/dist/tools/ai-mcp-app/ai-mcp-app.scss.mjs

@@ -1,4 +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  margin-block: var(--forge-spacing-medium, 16px);\n  --_mcp-host-color-background-primary: var(--forge-theme-surface, #ffffff);\n  --_mcp-host-color-background-secondary: var(--forge-theme-surface-container-minimum, #f5f5f5);\n  --_mcp-host-color-background-tertiary: var(--forge-theme-surface-container-low, #ebebeb);\n  --_mcp-host-color-background-inverse: var(--forge-theme-surface-inverse, #333333);\n  --_mcp-host-color-background-info: var(--forge-theme-info-container-minimum, #f6f9fc);\n  --_mcp-host-color-background-danger: var(--forge-theme-error-container-minimum, #fcf5f6);\n  --_mcp-host-color-background-success: var(--forge-theme-success-container-minimum, #f7faf7);\n  --_mcp-host-color-background-warning: var(--forge-theme-warning-container-minimum, #fdf8f5);\n  --_mcp-host-color-text-primary: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n  --_mcp-host-color-text-secondary: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  --_mcp-host-color-text-tertiary: var(--forge-theme-text-low, rgba(0, 0, 0, 0.38));\n  --_mcp-host-color-text-inverse: var(--forge-theme-on-surface-inverse, #ffffff);\n  --_mcp-host-color-text-info: var(--forge-theme-info, #1565c0);\n  --_mcp-host-color-text-danger: var(--forge-theme-error, #b00020);\n  --_mcp-host-color-text-success: var(--forge-theme-success, #2e7d32);\n  --_mcp-host-color-text-warning: var(--forge-theme-warning, #d14900);\n  --_mcp-host-color-text-disabled: var(--forge-theme-text-lowest, rgba(0, 0, 0, 0.12));\n  --_mcp-host-color-border-primary: var(--forge-theme-outline, #e0e0e0);\n  --_mcp-host-color-border-secondary: var(--forge-theme-outline-low, #9e9e9e);\n  --_mcp-host-color-border-info: var(--forge-theme-info, #1565c0);\n  --_mcp-host-color-border-danger: var(--forge-theme-error, #b00020);\n  --_mcp-host-color-border-success: var(--forge-theme-success, #2e7d32);\n  --_mcp-host-color-border-warning: var(--forge-theme-warning, #d14900);\n  --_mcp-host-color-ring-primary: var(--forge-theme-primary, #3f51b5);\n  --_mcp-host-font-sans: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  --_mcp-host-font-weight-normal: 400;\n  --_mcp-host-font-weight-medium: 500;\n  --_mcp-host-font-weight-bold: 700;\n  --_mcp-host-font-text-xs-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n  --_mcp-host-font-text-sm-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  --_mcp-host-font-text-md-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n  --_mcp-host-font-text-lg-size: var(--forge-typography-body3-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1.125)));\n  --_mcp-host-font-text-xs-line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  --_mcp-host-font-text-sm-line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  --_mcp-host-font-text-md-line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n  --_mcp-host-font-text-lg-line-height: var(--forge-typography-body3-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.5)));\n  --_mcp-host-font-heading-sm-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  --_mcp-host-font-heading-md-size: var(--forge-typography-heading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-font-size-scale, 1)));\n  --_mcp-host-font-heading-lg-size: var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));\n  --_mcp-host-font-heading-xl-size: var(--forge-typography-heading5-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading5-font-size-scale, 1.5)));\n  --_mcp-host-font-heading-2xl-size: var(--forge-typography-heading7-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading7-font-size-scale, 2)));\n  --_mcp-host-font-heading-3xl-size: var(--forge-typography-heading8-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading8-font-size-scale, 2.25)));\n  --_mcp-host-font-heading-sm-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  --_mcp-host-font-heading-md-line-height: var(--forge-typography-heading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-line-height-scale, 1.25)));\n  --_mcp-host-font-heading-lg-line-height: var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));\n  --_mcp-host-font-heading-xl-line-height: var(--forge-typography-heading5-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading5-line-height-scale, 1.75)));\n  --_mcp-host-font-heading-2xl-line-height: var(--forge-typography-heading7-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading7-line-height-scale, 2.5)));\n  --_mcp-host-font-heading-3xl-line-height: var(--forge-typography-heading8-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading8-line-height-scale, 2.625)));\n  --_mcp-host-border-radius-xs: calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-sm: calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-md: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-lg: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-xl: calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-full: calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-width-regular: var(--forge-border-thin, 1px);\n  --_mcp-host-shadow-sm: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n  --_mcp-host-shadow-md: 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  --_mcp-host-shadow-lg: 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}\n\n.container {\n  position: relative;\n  inset: auto;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  padding: 0;\n  border: none;\n  background: inherit;\n  color: inherit;\n}\n.container.bordered {\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  overflow: hidden;\n}\n.container:popover-open {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  background: var(--forge-theme-surface, #ffffff);\n  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n}\n.container:popover-open iframe {\n  flex: 1;\n  min-height: 0;\n}\n.container.fullscreen:popover-open {\n  inset: 0;\n  width: 100vw;\n  height: 100dvh;\n  border: none;\n  border-radius: 0;\n}\n.container.fullscreen:popover-open::backdrop {\n  background: var(--forge-theme-surface, #ffffff);\n}\n.container.pip:popover-open {\n  inset: auto;\n  inset-block-end: var(--forge-spacing-medium, 16px);\n  inset-inline-end: var(--forge-spacing-medium, 16px);\n  width: min(360px, 100vw - 2 * var(--forge-spacing-medium, 16px));\n  height: 280px;\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  overflow: hidden;\n  box-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}\n\n.promoted-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  flex: none;\n  padding: var(--forge-spacing-xxsmall, 4px);\n  border-block-end: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\n\n.exit-button,\n.exit-button > svg {\n  fill: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n\niframe {\n  display: block;\n  border: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.error-icon {\n  width: 48px;\n  height: 48px;\n  fill: var(--forge-theme-outline, #e0e0e0);\n}';
+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/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n@keyframes forge-skeleton-loading {\n  25%, 100% {\n    transform: translateX(100%);\n  }\n}\n.forge-skeleton {\n  --_skeleton-animation-duration:var(--forge-skeleton-animation-duration, 1500ms);\n  --_skeleton-width:var(--forge-skeleton-width, auto);\n  --_skeleton-height:var(--forge-skeleton-height, 48px);\n  --_skeleton-background:var(--forge-skeleton-background, var(--forge-theme-surface-container, #e0e0e0));\n  --_skeleton-shape:var(--forge-skeleton-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_skeleton-margin:var(--forge-skeleton-margin, var(--forge-spacing-medium, 16px) 0);\n  --_skeleton-button-height:var(--forge-skeleton-button-height, var(--forge-button-height, 36px));\n  --_skeleton-button-width:var(--forge-skeleton-button-width, 72px);\n  --_skeleton-form-field-height:var(--forge-skeleton-form-field-height, 40px);\n  --_skeleton-form-field-width:var(--forge-skeleton-form-field-width, 256px);\n  --_skeleton-chip-height:var(--forge-skeleton-chip-height, 32px);\n  --_skeleton-chip-width:var(--forge-skeleton-chip-width, 72px);\n  --_skeleton-chip-shape:var(--forge-skeleton-chip-shape, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));\n  --_skeleton-list-item-height:var(--forge-skeleton-list-item-height, 32px);\n  --_skeleton-list-item-margin:var(--forge-skeleton-list-item-margin, 12px 8px);\n  --_skeleton-text-height:var(--forge-skeleton-text-height, 1rem);\n  --_skeleton-gradient-color:var(--forge-skeleton-gradient-color, var(--forge-theme-surface-container-low, #ebebeb));\n  --_skeleton-avatar-size:var(--forge-skeleton-avatar-size, var(--forge-avatar-size, 40px));\n  --_skeleton-avatar-shape:var(--forge-skeleton-avatar-shape, var(--forge-avatar-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1))));\n}\n\n.forge-skeleton {\n  height: var(--_skeleton-height);\n  width: var(--_skeleton-width);\n  margin: var(--_skeleton-margin);\n  border-radius: var(--_skeleton-shape);\n  background-color: var(--_skeleton-background);\n  position: relative;\n  display: block;\n  overflow: hidden;\n  box-sizing: border-box;\n  display: block;\n}\n\n.forge-skeleton::after {\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  transform: translateX(-100%);\n  background-repeat: no-repeat;\n  background-image: linear-gradient(90deg, transparent, var(--_skeleton-gradient-color), transparent);\n  animation: forge-skeleton-loading var(--_skeleton-animation-duration) ease-in infinite;\n  content: "";\n}\n\n.forge-skeleton--avatar {\n  --_skeleton-height:var(--_skeleton-avatar-size);\n  --_skeleton-width:var(--_skeleton-avatar-size);\n  --_skeleton-shape:var(--_skeleton-avatar-shape);\n}\n\n.forge-skeleton--list-item {\n  --_skeleton-height:var(--_skeleton-list-item-height);\n  --_skeleton-margin:var(--_skeleton-list-item-margin);\n}\n\n.forge-skeleton--text {\n  --_skeleton-height:var(--_skeleton-text-height);\n}\n\n.forge-skeleton--chip {\n  --_skeleton-height:var(--_skeleton-chip-height);\n  --_skeleton-width:var(--_skeleton-chip-width);\n  --_skeleton-shape:var(--_skeleton-chip-shape);\n}\n\n.forge-skeleton--button {\n  --_skeleton-height:var(--_skeleton-button-height);\n  --_skeleton-width:var(--_skeleton-button-width);\n}\n\n.forge-skeleton--form-field {\n  --_skeleton-height:var(--_skeleton-form-field-height);\n  --_skeleton-width:var(--_skeleton-form-field-width);\n}\n\n:host {\n  display: block;\n  margin-block: var(--forge-spacing-medium, 16px);\n  --_mcp-host-color-background-primary: var(--forge-theme-surface, #ffffff);\n  --_mcp-host-color-background-secondary: var(--forge-theme-surface-container-minimum, #f5f5f5);\n  --_mcp-host-color-background-tertiary: var(--forge-theme-surface-container-low, #ebebeb);\n  --_mcp-host-color-background-inverse: var(--forge-theme-surface-inverse, #333333);\n  --_mcp-host-color-background-info: var(--forge-theme-info-container-minimum, #f6f9fc);\n  --_mcp-host-color-background-danger: var(--forge-theme-error-container-minimum, #fcf5f6);\n  --_mcp-host-color-background-success: var(--forge-theme-success-container-minimum, #f7faf7);\n  --_mcp-host-color-background-warning: var(--forge-theme-warning-container-minimum, #fdf8f5);\n  --_mcp-host-color-text-primary: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n  --_mcp-host-color-text-secondary: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  --_mcp-host-color-text-tertiary: var(--forge-theme-text-low, rgba(0, 0, 0, 0.38));\n  --_mcp-host-color-text-inverse: var(--forge-theme-on-surface-inverse, #ffffff);\n  --_mcp-host-color-text-info: var(--forge-theme-info, #1565c0);\n  --_mcp-host-color-text-danger: var(--forge-theme-error, #b00020);\n  --_mcp-host-color-text-success: var(--forge-theme-success, #2e7d32);\n  --_mcp-host-color-text-warning: var(--forge-theme-warning, #d14900);\n  --_mcp-host-color-text-disabled: var(--forge-theme-text-lowest, rgba(0, 0, 0, 0.12));\n  --_mcp-host-color-border-primary: var(--forge-theme-outline, #e0e0e0);\n  --_mcp-host-color-border-secondary: var(--forge-theme-outline-low, #9e9e9e);\n  --_mcp-host-color-border-info: var(--forge-theme-info, #1565c0);\n  --_mcp-host-color-border-danger: var(--forge-theme-error, #b00020);\n  --_mcp-host-color-border-success: var(--forge-theme-success, #2e7d32);\n  --_mcp-host-color-border-warning: var(--forge-theme-warning, #d14900);\n  --_mcp-host-color-ring-primary: var(--forge-theme-primary, #3f51b5);\n  --_mcp-host-font-sans: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  --_mcp-host-font-weight-normal: 400;\n  --_mcp-host-font-weight-medium: 500;\n  --_mcp-host-font-weight-bold: 700;\n  --_mcp-host-font-text-xs-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n  --_mcp-host-font-text-sm-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  --_mcp-host-font-text-md-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n  --_mcp-host-font-text-lg-size: var(--forge-typography-body3-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1.125)));\n  --_mcp-host-font-text-xs-line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  --_mcp-host-font-text-sm-line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  --_mcp-host-font-text-md-line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n  --_mcp-host-font-text-lg-line-height: var(--forge-typography-body3-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.5)));\n  --_mcp-host-font-heading-sm-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  --_mcp-host-font-heading-md-size: var(--forge-typography-heading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-font-size-scale, 1)));\n  --_mcp-host-font-heading-lg-size: var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));\n  --_mcp-host-font-heading-xl-size: var(--forge-typography-heading5-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading5-font-size-scale, 1.5)));\n  --_mcp-host-font-heading-2xl-size: var(--forge-typography-heading7-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading7-font-size-scale, 2)));\n  --_mcp-host-font-heading-3xl-size: var(--forge-typography-heading8-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading8-font-size-scale, 2.25)));\n  --_mcp-host-font-heading-sm-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  --_mcp-host-font-heading-md-line-height: var(--forge-typography-heading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading2-line-height-scale, 1.25)));\n  --_mcp-host-font-heading-lg-line-height: var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));\n  --_mcp-host-font-heading-xl-line-height: var(--forge-typography-heading5-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading5-line-height-scale, 1.75)));\n  --_mcp-host-font-heading-2xl-line-height: var(--forge-typography-heading7-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading7-line-height-scale, 2.5)));\n  --_mcp-host-font-heading-3xl-line-height: var(--forge-typography-heading8-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading8-line-height-scale, 2.625)));\n  --_mcp-host-border-radius-xs: calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-sm: calc(var(--forge-shape-small, 2px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-md: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-lg: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-xl: calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-radius-full: calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1));\n  --_mcp-host-border-width-regular: var(--forge-border-thin, 1px);\n  --_mcp-host-shadow-sm: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n  --_mcp-host-shadow-md: 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  --_mcp-host-shadow-lg: 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}\n\n.container {\n  position: relative;\n  inset: auto;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  padding: 0;\n  border: none;\n  background: inherit;\n  color: inherit;\n}\n.container.bordered {\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  overflow: hidden;\n}\n.container:popover-open {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  background: var(--forge-theme-surface, #ffffff);\n  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n}\n.container:popover-open iframe {\n  flex: 1;\n  min-height: 0;\n}\n.container.fullscreen:popover-open {\n  inset: 0;\n  width: 100vw;\n  height: 100dvh;\n  border: none;\n  border-radius: 0;\n}\n.container.fullscreen:popover-open::backdrop {\n  background: var(--forge-theme-surface, #ffffff);\n}\n.container.pip:popover-open {\n  inset: auto;\n  inset-block-end: var(--forge-spacing-medium, 16px);\n  inset-inline-end: var(--forge-spacing-medium, 16px);\n  width: min(360px, 100vw - 2 * var(--forge-spacing-medium, 16px));\n  height: 280px;\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  overflow: hidden;\n  box-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}\n\n.loading .forge-skeleton {\n  --forge-skeleton-height: 120px;\n  --forge-skeleton-margin: 0;\n  --forge-skeleton-shape: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n}\n\n.promoted-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  flex: none;\n  padding: var(--forge-spacing-xxsmall, 4px);\n  border-block-end: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\n\n.exit-button,\n.exit-button > svg {\n  fill: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n\niframe {\n  display: block;\n  border: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.error-icon {\n  width: 48px;\n  height: 48px;\n  fill: var(--forge-theme-outline, #e0e0e0);\n}';
 export {
   styles as default
 };

package/dist/tools/ai-mcp-app/mcp-app-bridge-controller.d.ts

@@ -17,11 +17,10 @@ export interface McpAppConnectConfig {
     handlers: McpAppHandlers;
 }
 /**
- * Compose the CSP header value the sandbox server expects on `?csp=` (spec "CSP
- * Construction from Metadata"). Empty allow-lists produce the restrictive default:
- * `connect-src 'none'`, `frame-src 'none'`, `base-uri 'self'`, `object-src 'none'`.
+ * Serialize the declared CSP domains for the sandbox `?csp=` param. The sandbox origin
+ * builds the actual CSP header from these; empty lists are omitted.
  */
-export declare function buildCspHeader(csp: McpAppResourceCsp): string;
+export declare function buildCspParam(csp: McpAppResourceCsp): string;
 /**
  * The requested permissions the sandbox can enforce, normalized to the spec shape. A key
  * is requested when present (`{ camera: {} }`); `false`/`null` values are ignored.

package/dist/tools/ai-mcp-app/mcp-app-bridge-controller.mjs

@@ -5,25 +5,16 @@ const PERMISSION_FEATURES = {
   clipboardWrite: "clipboard-write"
 };
 const UNSAFE_CSP_SOURCE = /[\s;,'"]/;
-function cspSources(domains, fallback) {
-  const safe = (domains ?? []).filter((domain) => !!domain && !UNSAFE_CSP_SOURCE.test(domain));
-  return safe.length ? safe.join(" ") : fallback;
-}
-function buildCspHeader(csp) {
-  const resource = cspSources(csp.resourceDomains, "");
-  const extra = resource ? ` ${resource}` : "";
-  return [
-    "default-src 'none'",
-    `script-src 'self' 'unsafe-inline'${extra}`,
-    `style-src 'self' 'unsafe-inline'${extra}`,
-    `img-src 'self' data:${extra}`,
-    `media-src 'self' data:${extra}`,
-    `font-src 'self' data:${extra}`,
-    `connect-src ${cspSources(csp.connectDomains, "'none'")}`,
-    `frame-src ${cspSources(csp.frameDomains, "'none'")}`,
-    `base-uri ${cspSources(csp.baseUriDomains, "'self'")}`,
-    "object-src 'none'"
-  ].join("; ");
+const CSP_PARAM_KEYS = ["connectDomains", "resourceDomains", "frameDomains", "baseUriDomains"];
+function buildCspParam(csp) {
+  const declared = {};
+  for (const key of CSP_PARAM_KEYS) {
+    const safe = (csp[key] ?? []).filter((domain) => !!domain && !UNSAFE_CSP_SOURCE.test(domain));
+    if (safe.length) {
+      declared[key] = safe;
+    }
+  }
+  return JSON.stringify(declared);
 }
 function enforcedPermissions(permissions) {
   const keys = Object.keys(PERMISSION_FEATURES).filter((key) => {
@@ -90,7 +81,7 @@ class McpAppBridgeController {
       sandbox: config.sandbox
     });
     const separator = sandboxUrl.includes("?") ? "&" : "?";
-    iframe.src = `${sandboxUrl}${separator}csp=${encodeURIComponent(buildCspHeader(csp))}`;
+    iframe.src = `${sandboxUrl}${separator}csp=${encodeURIComponent(buildCspParam(csp))}`;
     return this.#connected;
   }
   /**
@@ -150,7 +141,7 @@ class McpAppBridgeController {
 export {
   McpAppBridgeController,
   buildAllowAttribute,
-  buildCspHeader,
+  buildCspParam,
   buildViewToolResult,
   enforcedPermissions
 };

package/dist/tools/ai-mcp-app/mcp-app-bridge-types.d.ts

@@ -58,7 +58,8 @@ export interface McpAppSizeChange {
  * Config for the `ui/initialize` handshake and injecting the resource into the sandbox.
  *
  * The controller owns the outer sandbox iframe DOM (setting `src` with the `?csp=` query
- * param + the outer `allow` attribute); it hands the bridge the loaded iframe's
+ * param, JSON of the declared CSP domain lists that the sandbox origin turns into the CSP
+ * header, + the outer `allow` attribute); it hands the bridge the loaded iframe's
  * `contentWindow` so the bridge can scope its transport to that window and drive the
  * `sandbox-proxy-ready` → `sandbox-resource-ready` → `initialized` handshake. All fields
  * are bridge-agnostic (no ext-apps types leak through this surface).

package/dist/tools/ai-steps/ai-steps-definition.mjs

@@ -5,6 +5,7 @@ import "@ag-ui/client";
 import "uuid";
 import "../../utils/markdown.mjs";
 import { createToolRenderer } from "../../ai-chatbot/create-tool-renderer.mjs";
+import "../../ai-chatbot/tool-canvas.mjs";
 const displayStepsTool = {
   name: "displaySteps",
   displayName: "Display Steps",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-ai",
-  "version": "0.15.3-dev.0",
+  "version": "0.15.3-dev.1",
   "description": "A library of Tyler Forge™ AI chat interface web components.",
   "license": "Apache-2.0",
   "author": "Tyler Technologies, Inc.",