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

package/dist/tools/ai-mcp-app/ai-mcp-app.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  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}';
+export {
+  styles as default
+};

package/dist/tools/ai-mcp-app/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ai-mcp-app.js';
+export * from './mcp-app-context.js';
+export * from './mcp-app-bridge-types.js';

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

@@ -0,0 +1,6 @@
+import { McpAppToolElement } from "./ai-mcp-app.mjs";
+import { mcpAppHostContext } from "./mcp-app-context.mjs";
+export {
+  McpAppToolElement,
+  mcpAppHostContext
+};

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

@@ -0,0 +1,61 @@
+import { McpAppHostCapabilities, McpAppHostContext, McpAppResourceCsp, McpAppResourcePermissions, ToolCall } from '../../ai-chatbot';
+import { IMcpAppBridge, McpAppViewToolResult } from './mcp-app-bridge-types.js';
+/**
+ * The view→host handler slots the element supplies; registered on the bridge BEFORE
+ * `connect()` so they are live for the very first widget request.
+ */
+export type McpAppHandlers = Pick<IMcpAppBridge, 'oncalltool' | 'onreadresource' | 'onopenlink' | 'onmessage' | 'onloggingmessage' | 'onsizechange' | 'onrequestdisplaymode' | 'onupdatemodelcontext' | 'onrequestteardown'>;
+export interface McpAppConnectConfig {
+    iframe: HTMLIFrameElement;
+    sandboxUrl: string;
+    html: string;
+    hostContext: McpAppHostContext;
+    hostCapabilities: McpAppHostCapabilities;
+    csp: McpAppResourceCsp;
+    permissions: McpAppResourcePermissions;
+    sandbox?: string;
+    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'`.
+ */
+export declare function buildCspHeader(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.
+ */
+export declare function enforcedPermissions(permissions: McpAppResourcePermissions): McpAppResourcePermissions;
+/** Map requested permissions onto the iframe `allow` attribute. */
+export declare function buildAllowAttribute(permissions: McpAppResourcePermissions): string;
+/**
+ * Build the View's `CallToolResult` from the raw MCP result + structured content — never
+ * from the model-facing `result`. When the backend omitted a field (size caps) the View
+ * gets what remains; when both are missing it gets an empty `content` array, flagged
+ * `isError` only if the tool call itself errored.
+ */
+export declare function buildViewToolResult(toolCall: ToolCall): McpAppViewToolResult;
+/**
+ * Drives an {@link IMcpAppBridge} through the sandbox handshake and the streaming
+ * tool-call lifecycle. Bridge-agnostic — talks to the interface only.
+ *
+ * The controller owns the OUTER sandbox iframe DOM (its `src` with the `?csp=` param and
+ * its `allow` attribute); the bridge owns the postMessage lifecycle.
+ */
+export declare class McpAppBridgeController {
+    #private;
+    constructor(bridge: IMcpAppBridge);
+    connect(config: McpAppConnectConfig): Promise<void>;
+    /**
+     * Reconcile the widget with the current tool-call state. Streams partial args, sends
+     * final args once, then exactly one of `tool-result` (complete/error) or
+     * `tool-cancelled` — all gated on the `initialized` handshake. Safe to call on every
+     * `toolCall` update.
+     */
+    syncToolCall(toolCall: ToolCall): void;
+    /** Forward a host-context change; the bridge holds it until the View is initialized. */
+    sendHostContextChange(hostContext: McpAppHostContext): void;
+    /** Send `ui/resource-teardown` and release the bridge; the iframe is removed without waiting for the ack. */
+    teardown(): void;
+}

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

@@ -0,0 +1,156 @@
+const PERMISSION_FEATURES = {
+  camera: "camera",
+  microphone: "microphone",
+  geolocation: "geolocation",
+  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("; ");
+}
+function enforcedPermissions(permissions) {
+  const keys = Object.keys(PERMISSION_FEATURES).filter((key) => {
+    const value = permissions[key];
+    return value !== void 0 && value !== null && value !== false;
+  });
+  return Object.fromEntries(keys.map((key) => [key, {}]));
+}
+function buildAllowAttribute(permissions) {
+  return Object.keys(enforcedPermissions(permissions)).map((key) => PERMISSION_FEATURES[key]).join("; ");
+}
+function buildViewToolResult(toolCall) {
+  const mcpResult = toolCall.mcpResultOmitted ? void 0 : toolCall.mcpResult;
+  const structuredContent = toolCall.structuredContentOmitted ? void 0 : toolCall.structuredContent;
+  const isError = mcpResult?.isError ?? (toolCall.status === "error" || void 0);
+  return {
+    content: Array.isArray(mcpResult?.content) ? mcpResult.content : [],
+    ...structuredContent !== void 0 ? { structuredContent } : {},
+    ...isError !== void 0 ? { isError } : {},
+    ...mcpResult?._meta !== void 0 ? { _meta: mcpResult._meta } : {}
+  };
+}
+class McpAppBridgeController {
+  #bridge;
+  #connected = null;
+  #lastArgsSent = null;
+  #inputSent = false;
+  #outcome = "pending";
+  constructor(bridge) {
+    this.#bridge = bridge;
+  }
+  connect(config) {
+    if (this.#connected) {
+      return this.#connected;
+    }
+    Object.assign(this.#bridge, config.handlers);
+    const { iframe, sandboxUrl, csp, permissions } = config;
+    const outerAllow = buildAllowAttribute(permissions);
+    if (outerAllow) {
+      iframe.setAttribute("allow", outerAllow);
+    } else {
+      iframe.removeAttribute("allow");
+    }
+    const sandboxWindow = iframe.contentWindow;
+    if (!sandboxWindow) {
+      return Promise.reject(new Error("sandbox iframe has no contentWindow"));
+    }
+    let sandboxOrigin;
+    try {
+      sandboxOrigin = new URL(sandboxUrl, window.location.href).origin;
+    } catch {
+      return Promise.reject(new Error(`invalid sandbox URL: ${sandboxUrl}`));
+    }
+    if (sandboxOrigin === "null" || sandboxOrigin === window.location.origin) {
+      return Promise.reject(new Error("sandbox URL must be on a distinct, non-opaque origin"));
+    }
+    this.#connected = this.#bridge.connect({
+      sandboxWindow,
+      sandboxOrigin,
+      html: config.html,
+      hostContext: config.hostContext,
+      hostCapabilities: config.hostCapabilities,
+      permissions: enforcedPermissions(permissions),
+      sandbox: config.sandbox
+    });
+    const separator = sandboxUrl.includes("?") ? "&" : "?";
+    iframe.src = `${sandboxUrl}${separator}csp=${encodeURIComponent(buildCspHeader(csp))}`;
+    return this.#connected;
+  }
+  /**
+   * Reconcile the widget with the current tool-call state. Streams partial args, sends
+   * final args once, then exactly one of `tool-result` (complete/error) or
+   * `tool-cancelled` — all gated on the `initialized` handshake. Safe to call on every
+   * `toolCall` update.
+   */
+  syncToolCall(toolCall) {
+    if (!this.#connected || this.#outcome !== "pending") {
+      return;
+    }
+    void this.#connected.then(() => {
+      if (this.#outcome !== "pending") {
+        return;
+      }
+      if (toolCall.status === "cancelled") {
+        this.#outcome = "cancel-sent";
+        this.#bridge.sendToolCancelled();
+        return;
+      }
+      const partialArgs = this.#coerceArgs(toolCall.args);
+      const partialString = JSON.stringify(partialArgs);
+      if (!this.#inputSent && Object.keys(partialArgs).length && partialString !== this.#lastArgsSent) {
+        this.#lastArgsSent = partialString;
+        this.#bridge.sendToolInputPartial(partialArgs);
+      }
+      const isFinished = toolCall.status === "complete" || toolCall.status === "error";
+      if ((toolCall.status === "executing" || isFinished) && !this.#inputSent) {
+        this.#inputSent = true;
+        this.#bridge.sendToolInput(this.#coerceArgs(toolCall.args));
+      }
+      if (isFinished) {
+        this.#outcome = "result-sent";
+        this.#bridge.sendToolResult(buildViewToolResult(toolCall));
+      }
+    });
+  }
+  /** Forward a host-context change; the bridge holds it until the View is initialized. */
+  sendHostContextChange(hostContext) {
+    if (this.#connected) {
+      this.#bridge.sendHostContextChange(hostContext);
+    }
+  }
+  /** Send `ui/resource-teardown` and release the bridge; the iframe is removed without waiting for the ack. */
+  teardown() {
+    if (!this.#connected) {
+      return;
+    }
+    this.#outcome = "torn-down";
+    this.#bridge.sendTeardown();
+  }
+  #coerceArgs(args) {
+    return args && typeof args === "object" ? args : {};
+  }
+}
+export {
+  McpAppBridgeController,
+  buildAllowAttribute,
+  buildCspHeader,
+  buildViewToolResult,
+  enforcedPermissions
+};

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

@@ -0,0 +1,123 @@
+import { McpAppDisplayMode, McpAppHostCapabilities, McpAppHostContext, McpAppResourcePermissions, McpModelContextUpdateParams, McpResourceReadParams, McpToolCallParams, McpToolResult } from '../../ai-chatbot';
+/**
+ * The host-side bridge surface `mcp-app-bridge.ts` (`McpAppBridge`) implements. The
+ * element + controller depend on this interface only.
+ */
+/**
+ * A View's `tools/call` as received by the bridge. The bridge has no widget identity;
+ * the element adds its `toolCallId` before forwarding to the host.
+ */
+export type McpAppToolCallRequest = Omit<McpToolCallParams, 'toolCallId'>;
+/** A View's `resources/read` as received by the bridge (no widget identity). */
+export type McpAppResourceReadRequest = Omit<McpResourceReadParams, 'toolCallId'>;
+/** The `CallToolResult` delivered to the View via `ui/notifications/tool-result`. */
+export interface McpAppViewToolResult extends McpToolResult {
+    structuredContent?: unknown;
+}
+/** Parameters a widget passes to `ui/open-link`. */
+export interface McpAppOpenLinkParams {
+    url: string;
+}
+/**
+ * Result of a View request the host may decline (`ui/open-link`, `ui/message`): `{}` on
+ * success, `{ isError: true }` when the host refused or could not deliver it.
+ */
+export interface McpAppRequestResult {
+    isError?: boolean;
+}
+/** Parameters a widget passes to `ui/message`. `role` is always `user` (never trusted from the View). */
+export interface McpAppMessageParams {
+    /** The View's MCP content blocks, unvalidated. */
+    content: unknown[];
+    role: 'user';
+}
+/** Parameters a widget passes to `ui/update-model-context` (no widget identity). */
+export type McpAppUpdateModelContextParams = Omit<McpModelContextUpdateParams, 'toolCallId'>;
+/** Parameters a widget passes to `ui/request-display-mode`. */
+export interface McpAppRequestDisplayModeParams {
+    mode: McpAppDisplayMode;
+    /** Modes the View declared in `ui/initialize` (`appCapabilities.availableDisplayModes`). */
+    appDisplayModes: McpAppDisplayMode[];
+}
+/** Result the host returns for a display-mode request — echoes the mode actually set. */
+export interface McpAppRequestDisplayModeResult {
+    mode: McpAppDisplayMode;
+}
+/** Payload for a widget `notifications/message` (logging). */
+export interface McpAppLoggingMessage {
+    level: string;
+    data?: unknown;
+    logger?: string;
+}
+/** Payload for a widget `size-changed` notification. */
+export interface McpAppSizeChange {
+    width?: number;
+    height: number;
+}
+/**
+ * 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
+ * `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).
+ */
+export interface McpAppBridgeConnectConfig {
+    /** The loaded outer sandbox proxy iframe's window; the bridge scopes its transport here. */
+    sandboxWindow: Window;
+    /** Origin of the sandbox proxy; only messages from it are accepted and all posts target it. */
+    sandboxOrigin: string;
+    /** The complete standalone app HTML to inject into the inner sandboxed frame. */
+    html: string;
+    /** Initial host context sent to the widget on `ui/initialize`. */
+    hostContext: McpAppHostContext;
+    /** Iframe permission policy forwarded to the inner frame via `sandbox-resource-ready`. */
+    permissions?: McpAppResourcePermissions;
+    /** Optional override for the inner iframe's `sandbox` attribute. */
+    sandbox?: string;
+    /** Advertised to the View in the `ui/initialize` result. */
+    hostCapabilities: McpAppHostCapabilities;
+}
+export interface IMcpAppBridge {
+    /**
+     * Connect to the loaded sandbox proxy: perform the `ui/initialize` handshake and send
+     * the resource in via `sandbox-resource-ready`. Resolves once the widget has sent
+     * `initialized`. The host MUST NOT send tool input before this resolves.
+     */
+    connect(config: McpAppBridgeConnectConfig): Promise<void>;
+    /** Streaming partial tool arguments (each args delta). */
+    sendToolInputPartial(args: Record<string, unknown>): void;
+    /** Final, complete tool arguments (args complete). */
+    sendToolInput(args: Record<string, unknown>): void;
+    /** The final tool result, built from the raw MCP result + structured content. */
+    sendToolResult(result: McpAppViewToolResult): void;
+    /** Notify the widget its tool call was cancelled. */
+    sendToolCancelled(reason?: string): void;
+    /**
+     * Push an updated host context (e.g. theme or container-size change). Before the View
+     * is initialized the change is held and returned from `ui/initialize` / flushed on
+     * `initialized` instead of being sent.
+     */
+    sendHostContextChange(hostContext: McpAppHostContext): void;
+    /** Notify the widget it is being torn down (`ui/resource-teardown`) and release the bridge without waiting for the ack. */
+    sendTeardown(): void;
+    /** Widget forwarded a `tools/call` to the server. Rejections become JSON-RPC errors. */
+    oncalltool?: (params: McpAppToolCallRequest) => Promise<unknown>;
+    /** Widget forwarded a `resources/read` to the server. Rejections become JSON-RPC errors. */
+    onreadresource?: (params: McpAppResourceReadRequest) => Promise<unknown>;
+    /** Widget requested opening an external link. Absent → `{ isError: true }`. */
+    onopenlink?: (params: McpAppOpenLinkParams) => Promise<McpAppRequestResult>;
+    /** Widget sent a chat message (`ui/message`). Absent → `{ isError: true }`. */
+    onmessage?: (params: McpAppMessageParams) => Promise<McpAppRequestResult>;
+    /** Widget emitted a logging message (`notifications/message`). */
+    onloggingmessage?: (params: McpAppLoggingMessage) => void;
+    /** Widget reported a size change. */
+    onsizechange?: (params: McpAppSizeChange) => void;
+    /** Widget requested a display-mode change; the host echoes the resulting mode. */
+    onrequestdisplaymode?: (params: McpAppRequestDisplayModeParams) => Promise<McpAppRequestDisplayModeResult>;
+    /** Widget requested a silent model-context update. */
+    onupdatemodelcontext?: (params: McpAppUpdateModelContextParams) => Promise<void>;
+    /** Widget asked the host to tear it down (`ui/notifications/request-teardown`). */
+    onrequestteardown?: () => void;
+}

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

@@ -0,0 +1,41 @@
+import { McpAppHostContext } from '../../ai-chatbot';
+import { IMcpAppBridge, McpAppBridgeConnectConfig, McpAppViewToolResult } from './mcp-app-bridge-types.js';
+/**
+ * Hand-rolled, zero-dependency {@link IMcpAppBridge}. A `postMessage` listener speaking
+ * JSON-RPC 2.0 directly: no SDK, no zod, no schema validation. The cross-origin sandbox
+ * iframe is the security boundary here, not message-schema checking — every inbound
+ * field is narrowed defensively before use.
+ *
+ * Drives the handshake against the sandbox proxy (`packages/ai/sandbox/sandbox.js`):
+ * `sandbox-proxy-ready` -> `sandbox-resource-ready` -> `ui/initialize` ->
+ * `ui/notifications/initialized`, then streaming `ui/notifications/*`. Forwards
+ * non-`ui/` methods (`tools/call`, `resources/read`) to the same handler slots the
+ * interface defines.
+ */
+export declare class McpAppBridge implements IMcpAppBridge {
+    #private;
+    oncalltool?: IMcpAppBridge['oncalltool'];
+    onreadresource?: IMcpAppBridge['onreadresource'];
+    onopenlink?: IMcpAppBridge['onopenlink'];
+    onmessage?: IMcpAppBridge['onmessage'];
+    onloggingmessage?: IMcpAppBridge['onloggingmessage'];
+    onsizechange?: IMcpAppBridge['onsizechange'];
+    onrequestdisplaymode?: IMcpAppBridge['onrequestdisplaymode'];
+    onupdatemodelcontext?: IMcpAppBridge['onupdatemodelcontext'];
+    onrequestteardown?: IMcpAppBridge['onrequestteardown'];
+    constructor(hostInfo: {
+        name: string;
+        version: string;
+    });
+    connect(config: McpAppBridgeConnectConfig): Promise<void>;
+    sendToolInputPartial(args: Record<string, unknown>): void;
+    sendToolInput(args: Record<string, unknown>): void;
+    sendToolResult(result: McpAppViewToolResult): void;
+    sendToolCancelled(reason?: string): void;
+    sendHostContextChange(hostContext: McpAppHostContext): void;
+    /**
+     * Send `ui/resource-teardown` and dispose immediately; the host doesn't wait for the ack,
+     * so the iframe is removed right away. A View that never initialized isn't messaged.
+     */
+    sendTeardown(): void;
+}