@fusedashlabs/widgets 0.5.0 → 0.6.0

package/dist/element/chart-shell-render.js

@@ -1,13 +1,24 @@
 import { nothing, html } from "lit";
 import { headerTitleDisplay } from "../utils/chart-shell.js";
+import { iconOverflow, iconDownload, iconPage, iconFeedback, iconTable, iconRemove, iconChat, iconSettings } from "./header-icons.js";
+import { resolveHeaderChrome, headerMenuHandler } from "./widget-header.js";
+const DASH_ITEM_ICONS = {
+  "view-table": iconTable,
+  "provide-feedback": iconFeedback,
+  "save-report": iconPage,
+  "download-image": iconDownload
+};
 function renderWidgetHeader(options) {
   const displayTitle = headerTitleDisplay(options.title);
-  return html`
-    <div class="widget-header" part="header">
-      <div class="widget-title" part="title" title=${options.title}>
-        ${displayTitle}
-      </div>
-      <div class="widget-actions">
+  const handlers = options.handlers ?? {};
+  const chrome = resolveHeaderChrome(options.variant ?? "chat", handlers);
+  const runItem = (item) => {
+    var _a, _b;
+    (_a = headerMenuHandler(item, handlers)) == null ? void 0 : _a();
+    if (item.fallbackDownload) (_b = options.onDownload) == null ? void 0 : _b.call(options);
+    options.onMenuClose();
+  };
+  const menu = chrome.showMenu ? html`<div class="menu-anchor">
         <button
           class="menu-btn"
           part="menu-button"
@@ -16,23 +27,75 @@ function renderWidgetHeader(options) {
           aria-expanded=${options.menuOpen ? "true" : "false"}
           @click=${options.onMenuToggle}
         >
-          ⋮
+          ${iconOverflow}
         </button>
         ${options.menuOpen ? html`<div class="menu-dropdown" part="menu">
-              <button
-                class="menu-item"
-                type="button"
-                @click=${(e) => {
+              ${chrome.items.map(
+    (item) => html`<button
+                  class="menu-item"
+                  type="button"
+                  data-action=${item.id}
+                  @click=${(e) => {
+      e.stopPropagation();
+      runItem(item);
+    }}
+                >
+                  ${DASH_ITEM_ICONS[item.id] ?? nothing}
+                  ${item.label}
+                </button>`
+  )}
+              ${chrome.showRemove ? html`<div class="menu-divider"></div>
+                    <button
+                      class="menu-item menu-item--remove"
+                      type="button"
+                      data-action="remove"
+                      @click=${(e) => {
     var _a;
     e.stopPropagation();
-    (_a = options.onDownload) == null ? void 0 : _a.call(options);
+    (_a = handlers.onRemove) == null ? void 0 : _a.call(handlers);
     options.onMenuClose();
   }}
-              >
-                Download image
-              </button>
+                    >
+                      ${iconRemove} Remove
+                    </button>` : nothing}
             </div>` : nothing}
-      </div>
+      </div>` : nothing;
+  const chatButton = chrome.showChat ? html`<button
+        class="icon-btn"
+        part="chat-button"
+        type="button"
+        aria-label="Open chat"
+        @click=${(e) => {
+    var _a;
+    e.stopPropagation();
+    (_a = handlers.onOpenChat) == null ? void 0 : _a.call(handlers);
+  }}
+      >
+        ${iconChat}
+      </button>` : nothing;
+  const settingsButton = chrome.showSettings ? html`<button
+        class="settings-btn"
+        part="settings-button"
+        type="button"
+        aria-label="Widget settings"
+        @click=${(e) => {
+    var _a;
+    e.stopPropagation();
+    (_a = handlers.onOpenSettings) == null ? void 0 : _a.call(handlers);
+  }}
+      >
+        ${iconSettings}
+      </button>` : nothing;
+  const actions = chrome.variant === "dash" ? html`<div class="widget-actions" data-screenshot-ignore>
+          ${chrome.showChat || chrome.showMenu ? html`<div class="hover-actions" data-open=${options.menuOpen ? "true" : "false"}>
+                ${chatButton} ${menu}
+              </div>` : nothing}
+          ${settingsButton}
+        </div>` : html`<div class="widget-actions" data-screenshot-ignore>${menu}</div>`;
+  return html`
+    <div class="widget-header" part="header" data-variant=${chrome.variant}>
+      <div class="widget-title" part="title" title=${options.title}>${displayTitle}</div>
+      ${actions}
     </div>
   `;
 }
@@ -47,9 +110,7 @@ function renderLabelTooltip(tooltip) {
   </div>`;
 }
 function dispatchChartDownload(host) {
-  host.dispatchEvent(
-    new CustomEvent("ui9000-download", { bubbles: true, composed: true })
-  );
+  host.dispatchEvent(new CustomEvent("ui9000-download", { bubbles: true, composed: true }));
 }
 export {
   dispatchChartDownload,

package/dist/element/chart-shell-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-shell-render.js","sources":["../../src/element/chart-shell-render.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\n\nimport type { LabelTooltipState } from '../utils/chart-shell.js';\nimport { headerTitleDisplay } from '../utils/chart-shell.js';\n\nexport function renderWidgetHeader(options: {\n  title: string;\n  menuOpen: boolean;\n  onMenuToggle: (e: Event) => void;\n  onMenuClose: () => void;\n  onDownload?: () => void;\n}): TemplateResult | typeof nothing {\n  const displayTitle = headerTitleDisplay(options.title);\n  return html`\n    <div class=\"widget-header\" part=\"header\">\n      <div class=\"widget-title\" part=\"title\" title=${options.title}>\n        ${displayTitle}\n      </div>\n      <div class=\"widget-actions\">\n        <button\n          class=\"menu-btn\"\n          part=\"menu-button\"\n          type=\"button\"\n          aria-label=\"Chart menu\"\n          aria-expanded=${options.menuOpen ? 'true' : 'false'}\n          @click=${options.onMenuToggle}\n        >\n          ⋮\n        </button>\n        ${options.menuOpen\n          ? html`<div class=\"menu-dropdown\" part=\"menu\">\n              <button\n                class=\"menu-item\"\n                type=\"button\"\n                @click=${(e: Event) => {\n                  e.stopPropagation();\n                  options.onDownload?.();\n                  options.onMenuClose();\n                }}\n              >\n                Download image\n              </button>\n            </div>`\n          : nothing}\n      </div>\n    </div>\n  `;\n}\n\nexport function renderLabelTooltip(tooltip: LabelTooltipState): TemplateResult | typeof nothing {\n  if (!tooltip) return nothing;\n  return html`<div\n    class=\"label-tooltip\"\n    part=\"label-tooltip\"\n    style=\"left:${tooltip.x}px;top:${tooltip.y}px\"\n  >\n    ${tooltip.text}\n  </div>`;\n}\n\nexport function dispatchChartDownload(host: HTMLElement): void {\n  host.dispatchEvent(\n    new CustomEvent('ui9000-download', { bubbles: true, composed: true }),\n  );\n}\n"],"names":[],"mappings":";;AAKO,SAAS,mBAAmB,SAMC;AAClC,QAAM,eAAe,mBAAmB,QAAQ,KAAK;AACrD,SAAO;AAAA;AAAA,qDAE4C,QAAQ,KAAK;AAAA,UACxD,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQI,QAAQ,WAAW,SAAS,OAAO;AAAA,mBAC1C,QAAQ,YAAY;AAAA;AAAA;AAAA;AAAA,UAI7B,QAAQ,WACN;AAAA;AAAA;AAAA;AAAA,yBAIa,CAAC,MAAa;;AACrB,MAAE,gBAAA;AACF,kBAAQ,eAAR;AACA,YAAQ,YAAA;AAAA,EACV,CAAC;AAAA;AAAA;AAAA;AAAA,sBAKL,OAAO;AAAA;AAAA;AAAA;AAInB;AAEO,SAAS,mBAAmB,SAA6D;AAC9F,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO;AAAA;AAAA;AAAA,kBAGS,QAAQ,CAAC,UAAU,QAAQ,CAAC;AAAA;AAAA,MAExC,QAAQ,IAAI;AAAA;AAElB;AAEO,SAAS,sBAAsB,MAAyB;AAC7D,OAAK;AAAA,IACH,IAAI,YAAY,mBAAmB,EAAE,SAAS,MAAM,UAAU,MAAM;AAAA,EAAA;AAExE;"}
+{"version":3,"file":"chart-shell-render.js","sources":["../../src/element/chart-shell-render.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\n\nimport type { LabelTooltipState } from '../utils/chart-shell.js';\nimport { headerTitleDisplay } from '../utils/chart-shell.js';\nimport {\n  iconChat,\n  iconDownload,\n  iconFeedback,\n  iconOverflow,\n  iconPage,\n  iconRemove,\n  iconSettings,\n  iconTable,\n} from './header-icons.js';\nimport {\n  headerMenuHandler,\n  resolveHeaderChrome,\n  type HeaderMenuItem,\n  type WidgetHeaderHandlers,\n  type WidgetHeaderVariant,\n} from './widget-header.js';\n\nconst DASH_ITEM_ICONS: Record<string, TemplateResult> = {\n  'view-table': iconTable,\n  'provide-feedback': iconFeedback,\n  'save-report': iconPage,\n  'download-image': iconDownload,\n};\n\nexport function renderWidgetHeader(options: {\n  title: string;\n  variant?: WidgetHeaderVariant;\n  menuOpen: boolean;\n  handlers?: WidgetHeaderHandlers;\n  onMenuToggle: (e: Event) => void;\n  onMenuClose: () => void;\n  onDownload?: () => void;\n}): TemplateResult | typeof nothing {\n  const displayTitle = headerTitleDisplay(options.title);\n  const handlers = options.handlers ?? {};\n  const chrome = resolveHeaderChrome(options.variant ?? 'chat', handlers);\n  const runItem = (item: HeaderMenuItem) => {\n    headerMenuHandler(item, handlers)?.();\n    if (item.fallbackDownload) options.onDownload?.();\n    options.onMenuClose();\n  };\n\n  const menu = chrome.showMenu\n    ? html`<div class=\"menu-anchor\">\n        <button\n          class=\"menu-btn\"\n          part=\"menu-button\"\n          type=\"button\"\n          aria-label=\"Chart menu\"\n          aria-expanded=${options.menuOpen ? 'true' : 'false'}\n          @click=${options.onMenuToggle}\n        >\n          ${iconOverflow}\n        </button>\n        ${options.menuOpen\n          ? html`<div class=\"menu-dropdown\" part=\"menu\">\n              ${chrome.items.map(\n                (item) => html`<button\n                  class=\"menu-item\"\n                  type=\"button\"\n                  data-action=${item.id}\n                  @click=${(e: Event) => {\n                    e.stopPropagation();\n                    runItem(item);\n                  }}\n                >\n                  ${DASH_ITEM_ICONS[item.id] ?? nothing}\n                  ${item.label}\n                </button>`,\n              )}\n              ${chrome.showRemove\n                ? html`<div class=\"menu-divider\"></div>\n                    <button\n                      class=\"menu-item menu-item--remove\"\n                      type=\"button\"\n                      data-action=\"remove\"\n                      @click=${(e: Event) => {\n                        e.stopPropagation();\n                        handlers.onRemove?.();\n                        options.onMenuClose();\n                      }}\n                    >\n                      ${iconRemove} Remove\n                    </button>`\n                : nothing}\n            </div>`\n          : nothing}\n      </div>`\n    : nothing;\n\n  const chatButton = chrome.showChat\n    ? html`<button\n        class=\"icon-btn\"\n        part=\"chat-button\"\n        type=\"button\"\n        aria-label=\"Open chat\"\n        @click=${(e: Event) => {\n          e.stopPropagation();\n          handlers.onOpenChat?.();\n        }}\n      >\n        ${iconChat}\n      </button>`\n    : nothing;\n\n  const settingsButton = chrome.showSettings\n    ? html`<button\n        class=\"settings-btn\"\n        part=\"settings-button\"\n        type=\"button\"\n        aria-label=\"Widget settings\"\n        @click=${(e: Event) => {\n          e.stopPropagation();\n          handlers.onOpenSettings?.();\n        }}\n      >\n        ${iconSettings}\n      </button>`\n    : nothing;\n\n  const actions =\n    chrome.variant === 'dash'\n      ? html`<div class=\"widget-actions\" data-screenshot-ignore>\n          ${chrome.showChat || chrome.showMenu\n            ? html`<div class=\"hover-actions\" data-open=${options.menuOpen ? 'true' : 'false'}>\n                ${chatButton} ${menu}\n              </div>`\n            : nothing}\n          ${settingsButton}\n        </div>`\n      : html`<div class=\"widget-actions\" data-screenshot-ignore>${menu}</div>`;\n\n  return html`\n    <div class=\"widget-header\" part=\"header\" data-variant=${chrome.variant}>\n      <div class=\"widget-title\" part=\"title\" title=${options.title}>${displayTitle}</div>\n      ${actions}\n    </div>\n  `;\n}\n\nexport function renderLabelTooltip(tooltip: LabelTooltipState): TemplateResult | typeof nothing {\n  if (!tooltip) return nothing;\n  return html`<div\n    class=\"label-tooltip\"\n    part=\"label-tooltip\"\n    style=\"left:${tooltip.x}px;top:${tooltip.y}px\"\n  >\n    ${tooltip.text}\n  </div>`;\n}\n\nexport function dispatchChartDownload(host: HTMLElement): void {\n  host.dispatchEvent(new CustomEvent('ui9000-download', { bubbles: true, composed: true }));\n}\n"],"names":[],"mappings":";;;;AAsBA,MAAM,kBAAkD;AAAA,EACtD,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,kBAAkB;AACpB;AAEO,SAAS,mBAAmB,SAQC;AAClC,QAAM,eAAe,mBAAmB,QAAQ,KAAK;AACrD,QAAM,WAAW,QAAQ,YAAY,CAAA;AACrC,QAAM,SAAS,oBAAoB,QAAQ,WAAW,QAAQ,QAAQ;AACtE,QAAM,UAAU,CAAC,SAAyB;;AACxC,4BAAkB,MAAM,QAAQ,MAAhC;AACA,QAAI,KAAK,iBAAkB,eAAQ,eAAR;AAC3B,YAAQ,YAAA;AAAA,EACV;AAEA,QAAM,OAAO,OAAO,WAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMoB,QAAQ,WAAW,SAAS,OAAO;AAAA,mBAC1C,QAAQ,YAAY;AAAA;AAAA,YAE3B,YAAY;AAAA;AAAA,UAEd,QAAQ,WACN;AAAA,gBACI,OAAO,MAAM;AAAA,IACb,CAAC,SAAS;AAAA;AAAA;AAAA,gCAGM,KAAK,EAAE;AAAA,2BACZ,CAAC,MAAa;AACrB,QAAE,gBAAA;AACF,cAAQ,IAAI;AAAA,IACd,CAAC;AAAA;AAAA,oBAEC,gBAAgB,KAAK,EAAE,KAAK,OAAO;AAAA,oBACnC,KAAK,KAAK;AAAA;AAAA,EAAA,CAEf;AAAA,gBACC,OAAO,aACL;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKa,CAAC,MAAa;;AACrB,MAAE,gBAAA;AACF,mBAAS,aAAT;AACA,YAAQ,YAAA;AAAA,EACV,CAAC;AAAA;AAAA,wBAEC,UAAU;AAAA,iCAEhB,OAAO;AAAA,sBAEb,OAAO;AAAA,gBAEb;AAEJ,QAAM,aAAa,OAAO,WACtB;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKW,CAAC,MAAa;;AACrB,MAAE,gBAAA;AACF,mBAAS,eAAT;AAAA,EACF,CAAC;AAAA;AAAA,UAEC,QAAQ;AAAA,mBAEZ;AAEJ,QAAM,iBAAiB,OAAO,eAC1B;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKW,CAAC,MAAa;;AACrB,MAAE,gBAAA;AACF,mBAAS,mBAAT;AAAA,EACF,CAAC;AAAA;AAAA,UAEC,YAAY;AAAA,mBAEhB;AAEJ,QAAM,UACJ,OAAO,YAAY,SACf;AAAA,YACI,OAAO,YAAY,OAAO,WACxB,4CAA4C,QAAQ,WAAW,SAAS,OAAO;AAAA,kBAC3E,UAAU,IAAI,IAAI;AAAA,wBAEtB,OAAO;AAAA,YACT,cAAc;AAAA,kBAElB,0DAA0D,IAAI;AAEpE,SAAO;AAAA,4DACmD,OAAO,OAAO;AAAA,qDACrB,QAAQ,KAAK,IAAI,YAAY;AAAA,QAC1E,OAAO;AAAA;AAAA;AAGf;AAEO,SAAS,mBAAmB,SAA6D;AAC9F,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO;AAAA;AAAA;AAAA,kBAGS,QAAQ,CAAC,UAAU,QAAQ,CAAC;AAAA;AAAA,MAExC,QAAQ,IAAI;AAAA;AAElB;AAEO,SAAS,sBAAsB,MAAyB;AAC7D,OAAK,cAAc,IAAI,YAAY,mBAAmB,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAC1F;"}

package/dist/element/chart-shell-styles.d.ts

@@ -1,3 +1,7 @@
-/** FuseDash WidgetWrapper chrome — padding, header, menu (MCP chat / Storybook). */
+/**
+ * Chat draws its own card (padding + border). Dashboard charts sit in the
+ * client WidgetWrapper, which is already that zone — dash sends only the
+ * header and the plot.
+ */
 export declare const chartShellStyles: import('lit').CSSResult;
 //# sourceMappingURL=chart-shell-styles.d.ts.map

package/dist/element/chart-shell-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-shell-styles.d.ts","sourceRoot":"","sources":["../../src/element/chart-shell-styles.ts"],"names":[],"mappings":"AAEA,oFAAoF;AACpF,eAAO,MAAM,gBAAgB,yBAgO5B,CAAC"}
+{"version":3,"file":"chart-shell-styles.d.ts","sourceRoot":"","sources":["../../src/element/chart-shell-styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,yBAuV5B,CAAC"}

package/dist/element/chart-shell-styles.js

@@ -20,6 +20,46 @@ const chartShellStyles = css`
     background: transparent;
   }
 
+  :host([header-variant='dash']) .widget-shell {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  /*
+   * Dashboard cells already have a height. The chart fills that cell.
+   * A 220px host min-height plus an inner scrollport made the column and
+   * the plot scroll at the same time.
+   */
+  :host([embedded]),
+  :host([header-variant='dash']) {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :host([embedded]) .widget-shell,
+  :host([header-variant='dash']) .widget-shell {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :host([embedded]) .widget-body,
+  :host([header-variant='dash']) .widget-body,
+  :host([embedded]) .widget-body > .chart-body,
+  :host([header-variant='dash']) .widget-body > .chart-body,
+  :host([embedded]) .widget-body > .chart-root,
+  :host([header-variant='dash']) .widget-body > .chart-root,
+  :host([embedded]) .chart-body,
+  :host([header-variant='dash']) .chart-body,
+  :host([embedded]) .chart-scroll,
+  :host([header-variant='dash']) .chart-scroll,
+  :host([embedded]) .chart-root,
+  :host([header-variant='dash']) .chart-root {
+    min-height: 0;
+  }
+
   .widget-header {
     display: flex;
     align-items: flex-start;
@@ -44,23 +84,81 @@ const chartShellStyles = css`
 
   .widget-actions {
     position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
     flex-shrink: 0;
   }
 
-  .menu-btn {
+  .hover-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  /* Dashboard: chat + overflow stay hidden until the widget is hovered or the menu is open. */
+  .widget-header[data-variant='dash'] .hover-actions {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .widget-shell:hover .widget-header[data-variant='dash'] .hover-actions,
+  .widget-header[data-variant='dash'] .hover-actions[data-open='true'] {
+    opacity: 1;
+  }
+
+  .menu-anchor {
+    position: relative;
+  }
+
+  .menu-btn,
+  .icon-btn,
+  .settings-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
     padding: 0;
     border: 1px solid var(--ui9000-color-border, #e5e7eb);
-    border-radius: 8px;
     background: rgba(255, 255, 255, 0.92);
     color: var(--ui9000-color-text-muted, #6b7280);
+    cursor: pointer;
+  }
+
+  .menu-btn svg,
+  .icon-btn svg,
+  .settings-btn svg,
+  .menu-item svg {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    display: block;
+  }
+
+  .menu-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
     font-size: 18px;
     line-height: 1;
-    cursor: pointer;
+  }
+
+  .widget-header[data-variant='dash'] .menu-btn,
+  .widget-header[data-variant='dash'] .icon-btn {
+    width: auto;
+    height: 24px;
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 16px;
+  }
+
+  .settings-btn {
+    height: 24px;
+    padding: 4px;
+    border-radius: 24px;
+    background: var(--ui9000-color-surface, #fff);
+    box-shadow:
+      0 2px 2px rgb(0 0 0 / 6%),
+      0 2px 4px 1px rgb(0 0 0 / 4%);
   }
 
   .menu-btn:hover {
@@ -70,7 +168,7 @@ const chartShellStyles = css`
 
   .menu-dropdown {
     position: absolute;
-    top: 36px;
+    top: calc(100% + 4px);
     right: 0;
     z-index: 5;
     min-width: 170px;
@@ -83,8 +181,16 @@ const chartShellStyles = css`
     overflow: hidden;
   }
 
+  .widget-header[data-variant='dash'] .menu-dropdown {
+    min-width: 192px;
+    border-radius: 8px;
+    padding: 8px 0;
+  }
+
   .menu-item {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 8px;
     width: 100%;
     padding: 10px 14px;
     border: none;
@@ -95,6 +201,19 @@ const chartShellStyles = css`
     cursor: pointer;
   }
 
+  .widget-header[data-variant='dash'] .menu-item {
+    padding: 4px 12px;
+    min-height: 32px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .menu-divider {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--ui9000-color-border, #e5e7eb);
+  }
+
   .menu-item:hover {
     background: var(--ui9000-color-surface-muted, #f3f4f6);
   }

package/dist/element/chart-shell-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-shell-styles.js","sources":["../../src/element/chart-shell-styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/** FuseDash WidgetWrapper chrome — padding, header, menu (MCP chat / Storybook). */\nexport const chartShellStyles = css`\n  .widget-shell {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    box-sizing: border-box;\n    padding: 12px 16px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 8px;\n    background: var(--ui9000-color-surface, #ffffff);\n  }\n\n  :host([embedded]) .widget-shell {\n    padding: 8px 10px 4px;\n    border: none;\n    border-radius: 0;\n    background: transparent;\n  }\n\n  .widget-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 8px;\n    flex-shrink: 0;\n    margin-bottom: 8px;\n    min-width: 0;\n  }\n\n  .widget-title {\n    flex: 1;\n    min-width: 0;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: var(--ui9000-color-text, #111827);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .widget-actions {\n    position: relative;\n    flex-shrink: 0;\n  }\n\n  .menu-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 8px;\n    background: rgba(255, 255, 255, 0.92);\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 18px;\n    line-height: 1;\n    cursor: pointer;\n  }\n\n  .menu-btn:hover {\n    background: #fff;\n    border-color: var(--ui9000-color-border-strong, #d1d5db);\n  }\n\n  .menu-dropdown {\n    position: absolute;\n    top: 36px;\n    right: 0;\n    z-index: 5;\n    min-width: 170px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 10px;\n    background: #fff;\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 10%),\n      0 4px 6px -4px rgb(0 0 0 / 10%);\n    overflow: hidden;\n  }\n\n  .menu-item {\n    display: block;\n    width: 100%;\n    padding: 10px 14px;\n    border: none;\n    background: transparent;\n    text-align: left;\n    font-size: 13px;\n    color: var(--ui9000-color-text, #111827);\n    cursor: pointer;\n  }\n\n  .menu-item:hover {\n    background: var(--ui9000-color-surface-muted, #f3f4f6);\n  }\n\n  .widget-body {\n    flex: 1 1 auto;\n    /* Chat/MCP hosts often set only min-height on :host; nested panes set this var to 0. */\n    min-height: var(--ui9000-plot-min-height, 240px);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Default plot slot — charts may nest further (box/bar scroll). */\n  .widget-body > .chart-root {\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n\n  .widget-body > .chart-body {\n    flex: 1 1 auto;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n\n  .chart-legend {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 8px 16px;\n    flex-shrink: 0;\n    margin-bottom: 8px;\n    font-size: 11px;\n    line-height: 1.2;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n\n  .legend-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    white-space: nowrap;\n  }\n\n  .legend-swatch {\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    flex-shrink: 0;\n  }\n\n  .legend-line {\n    position: relative;\n    display: inline-block;\n    width: 14px;\n    height: 2px;\n    border-radius: 1px;\n    background: var(--legend-color, #473dd9);\n    flex-shrink: 0;\n  }\n\n  .legend-line--dashed {\n    background: transparent;\n    border-top: 2px dashed var(--legend-color, #6c7584);\n    height: 0;\n  }\n\n  .legend-dot {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  /* FuseDash ChartLegend legendType=\"palette\" — Low / High sequential ramp. */\n  .legend-palette {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n    padding-top: 8px;\n    padding-bottom: 12px;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.2;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n\n  .legend-palette-swatches {\n    display: flex;\n    align-items: center;\n  }\n\n  .legend-palette-swatch {\n    width: 14px;\n    height: 8px;\n    flex-shrink: 0;\n  }\n\n  .legend-palette-swatch:first-child {\n    border-top-left-radius: 8px;\n    border-bottom-left-radius: 8px;\n  }\n\n  .legend-palette-swatch:last-child {\n    border-top-right-radius: 8px;\n    border-bottom-right-radius: 8px;\n  }\n\n  .label-tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 4;\n    max-width: min(320px, 90vw);\n    padding: 2px 5px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 5px;\n    font-size: 11px;\n    line-height: 1.35;\n    background: var(--ui9000-color-surface, #fff);\n    color: var(--ui9000-color-text-muted, #6c7584);\n    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);\n    transform: translate(-50%, calc(-100% - 8px));\n    white-space: nowrap;\n  }\n`;\n"],"names":[],"mappings":";AAGO,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"chart-shell-styles.js","sources":["../../src/element/chart-shell-styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Chat draws its own card (padding + border). Dashboard charts sit in the\n * client WidgetWrapper, which is already that zone — dash sends only the\n * header and the plot.\n */\nexport const chartShellStyles = css`\n  .widget-shell {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    box-sizing: border-box;\n    padding: 12px 16px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 8px;\n    background: var(--ui9000-color-surface, #ffffff);\n  }\n\n  :host([embedded]) .widget-shell {\n    padding: 8px 10px 4px;\n    border: none;\n    border-radius: 0;\n    background: transparent;\n  }\n\n  :host([header-variant='dash']) .widget-shell {\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    background: transparent;\n  }\n\n  /*\n   * Dashboard cells already have a height. The chart fills that cell.\n   * A 220px host min-height plus an inner scrollport made the column and\n   * the plot scroll at the same time.\n   */\n  :host([embedded]),\n  :host([header-variant='dash']) {\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  :host([embedded]) .widget-shell,\n  :host([header-variant='dash']) .widget-shell {\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  :host([embedded]) .widget-body,\n  :host([header-variant='dash']) .widget-body,\n  :host([embedded]) .widget-body > .chart-body,\n  :host([header-variant='dash']) .widget-body > .chart-body,\n  :host([embedded]) .widget-body > .chart-root,\n  :host([header-variant='dash']) .widget-body > .chart-root,\n  :host([embedded]) .chart-body,\n  :host([header-variant='dash']) .chart-body,\n  :host([embedded]) .chart-scroll,\n  :host([header-variant='dash']) .chart-scroll,\n  :host([embedded]) .chart-root,\n  :host([header-variant='dash']) .chart-root {\n    min-height: 0;\n  }\n\n  .widget-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 8px;\n    flex-shrink: 0;\n    margin-bottom: 8px;\n    min-width: 0;\n  }\n\n  .widget-title {\n    flex: 1;\n    min-width: 0;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    color: var(--ui9000-color-text, #111827);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .widget-actions {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n  }\n\n  .hover-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  /* Dashboard: chat + overflow stay hidden until the widget is hovered or the menu is open. */\n  .widget-header[data-variant='dash'] .hover-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .widget-shell:hover .widget-header[data-variant='dash'] .hover-actions,\n  .widget-header[data-variant='dash'] .hover-actions[data-open='true'] {\n    opacity: 1;\n  }\n\n  .menu-anchor {\n    position: relative;\n  }\n\n  .menu-btn,\n  .icon-btn,\n  .settings-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    background: rgba(255, 255, 255, 0.92);\n    color: var(--ui9000-color-text-muted, #6b7280);\n    cursor: pointer;\n  }\n\n  .menu-btn svg,\n  .icon-btn svg,\n  .settings-btn svg,\n  .menu-item svg {\n    width: 16px;\n    height: 16px;\n    flex: 0 0 16px;\n    display: block;\n  }\n\n  .menu-btn {\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n    font-size: 18px;\n    line-height: 1;\n  }\n\n  .widget-header[data-variant='dash'] .menu-btn,\n  .widget-header[data-variant='dash'] .icon-btn {\n    width: auto;\n    height: 24px;\n    padding: 4px 6px;\n    border-radius: 4px;\n    font-size: 16px;\n  }\n\n  .settings-btn {\n    height: 24px;\n    padding: 4px;\n    border-radius: 24px;\n    background: var(--ui9000-color-surface, #fff);\n    box-shadow:\n      0 2px 2px rgb(0 0 0 / 6%),\n      0 2px 4px 1px rgb(0 0 0 / 4%);\n  }\n\n  .menu-btn:hover {\n    background: #fff;\n    border-color: var(--ui9000-color-border-strong, #d1d5db);\n  }\n\n  .menu-dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    right: 0;\n    z-index: 5;\n    min-width: 170px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 10px;\n    background: #fff;\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 10%),\n      0 4px 6px -4px rgb(0 0 0 / 10%);\n    overflow: hidden;\n  }\n\n  .widget-header[data-variant='dash'] .menu-dropdown {\n    min-width: 192px;\n    border-radius: 8px;\n    padding: 8px 0;\n  }\n\n  .menu-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 10px 14px;\n    border: none;\n    background: transparent;\n    text-align: left;\n    font-size: 13px;\n    color: var(--ui9000-color-text, #111827);\n    cursor: pointer;\n  }\n\n  .widget-header[data-variant='dash'] .menu-item {\n    padding: 4px 12px;\n    min-height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .menu-divider {\n    height: 1px;\n    margin: 4px 0;\n    background: var(--ui9000-color-border, #e5e7eb);\n  }\n\n  .menu-item:hover {\n    background: var(--ui9000-color-surface-muted, #f3f4f6);\n  }\n\n  .widget-body {\n    flex: 1 1 auto;\n    /* Chat/MCP hosts often set only min-height on :host; nested panes set this var to 0. */\n    min-height: var(--ui9000-plot-min-height, 240px);\n    position: relative;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Default plot slot — charts may nest further (box/bar scroll). */\n  .widget-body > .chart-root {\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n\n  .widget-body > .chart-body {\n    flex: 1 1 auto;\n    min-height: var(--ui9000-plot-min-height, 240px);\n  }\n\n  .chart-legend {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 8px 16px;\n    flex-shrink: 0;\n    margin-bottom: 8px;\n    font-size: 11px;\n    line-height: 1.2;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n\n  .legend-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    white-space: nowrap;\n  }\n\n  .legend-swatch {\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    flex-shrink: 0;\n  }\n\n  .legend-line {\n    position: relative;\n    display: inline-block;\n    width: 14px;\n    height: 2px;\n    border-radius: 1px;\n    background: var(--legend-color, #473dd9);\n    flex-shrink: 0;\n  }\n\n  .legend-line--dashed {\n    background: transparent;\n    border-top: 2px dashed var(--legend-color, #6c7584);\n    height: 0;\n  }\n\n  .legend-dot {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  /* FuseDash ChartLegend legendType=\"palette\" — Low / High sequential ramp. */\n  .legend-palette {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n    padding-top: 8px;\n    padding-bottom: 12px;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.2;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n\n  .legend-palette-swatches {\n    display: flex;\n    align-items: center;\n  }\n\n  .legend-palette-swatch {\n    width: 14px;\n    height: 8px;\n    flex-shrink: 0;\n  }\n\n  .legend-palette-swatch:first-child {\n    border-top-left-radius: 8px;\n    border-bottom-left-radius: 8px;\n  }\n\n  .legend-palette-swatch:last-child {\n    border-top-right-radius: 8px;\n    border-bottom-right-radius: 8px;\n  }\n\n  .label-tooltip {\n    position: absolute;\n    pointer-events: none;\n    z-index: 4;\n    max-width: min(320px, 90vw);\n    padding: 2px 5px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 5px;\n    font-size: 11px;\n    line-height: 1.35;\n    background: var(--ui9000-color-surface, #fff);\n    color: var(--ui9000-color-text-muted, #6c7584);\n    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);\n    transform: translate(-50%, calc(-100% - 8px));\n    white-space: nowrap;\n  }\n`;\n"],"names":[],"mappings":";AAOO,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/element/chart-tooltip-portal.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Chart hover tooltip and axis-label tooltip, ported from the client.
+ * Both are mounted on document.body so dashboard overflow does not clip them.
+ *
+ * Hover card matches `@fuselab-creative/design-system` Tooltip plus the
+ * label/value rows from the client TooltipContent.
+ * Axis-label chip matches `Widgets/components/LabelTooltip`.
+ */
+export type ChartTooltipRow = {
+    label: string;
+    value: string;
+};
+export type ChartTooltipContent = {
+    title?: string;
+    rows: ChartTooltipRow[];
+};
+type PointerEventLike = {
+    pageX: number;
+    pageY: number;
+    clientX: number;
+    clientY: number;
+};
+export declare function presentChartTooltip(owner: HTMLElement, event: PointerEventLike, content: ChartTooltipContent): void;
+export declare function dismissChartTooltip(owner: HTMLElement): void;
+export declare function presentLabelTooltip(owner: HTMLElement, event: PointerEventLike, text: string): void;
+export declare function dismissLabelTooltip(owner: HTMLElement): void;
+export declare function dismissTooltips(owner: HTMLElement): void;
+export {};
+//# sourceMappingURL=chart-tooltip-portal.d.ts.map

package/dist/element/chart-tooltip-portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip-portal.d.ts","sourceRoot":"","sources":["../../src/element/chart-tooltip-portal.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAsPF,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,mBAAmB,GAC3B,IAAI,CAaN;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAI5D;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,MAAM,GACX,IAAI,CAQN;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAI5D;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAGxD"}