@fusedashlabs/widgets 0.2.0 → 0.4.0

package/dist/components/network-graph/element/styles.js

@@ -0,0 +1,272 @@
+import { css } from "lit";
+const networkGraphStyles = css`
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 320px;
+    color: var(--ui9000-color-text, #111827);
+    font-family: var(--ui9000-font-family, system-ui, sans-serif);
+    box-sizing: border-box;
+  }
+  .chart-root {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    border-radius: 12px;
+    background: var(--ui9000-color-surface-muted, #f9faff);
+    overflow: hidden;
+    touch-action: pan-y;
+  }
+  .empty {
+    display: grid;
+    place-items: center;
+    flex: 1;
+    min-height: inherit;
+    padding: 8px;
+    text-align: center;
+    color: var(--ui9000-color-text-muted, #6b7280);
+    font-size: 0.875rem;
+  }
+
+  /* Overlay — same layout as map-chart bubble legend. */
+  .graph-legend {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    z-index: 10;
+    width: max-content;
+    min-width: 360px;
+    max-width: calc(100% - 20px);
+    max-height: 50%;
+    display: flex;
+    flex-direction: column;
+    padding: 8px 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: var(--ui9000-color-surface, #ffffff);
+    border: 1px solid var(--ui9000-color-border, #e5e7eb);
+    border-radius: 8px;
+    box-shadow:
+      0 2px 4px 0 #141c2c0f,
+      0 4px 8px 2px #141c2c0f;
+    user-select: none;
+    pointer-events: auto;
+  }
+  .legend-panel-header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 6px 12px;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--ui9000-color-border, #e5e7eb);
+  }
+  .graph-legend:not(:has(.legend-layers)) .legend-panel-header {
+    border-bottom: none;
+  }
+  .legend-kicker {
+    margin: 0;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 0.88px;
+    text-transform: uppercase;
+    color: var(--ui9000-color-text, #111827);
+  }
+  .legend-chevron {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 0;
+    background: transparent
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238f95a0' stroke-width='1.25'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
+      center / 16px no-repeat;
+    cursor: pointer;
+    transition: transform 0.5s;
+  }
+  .legend-chevron[aria-expanded='false'] {
+    transform: rotate(180deg);
+  }
+  .legend-layers {
+    overflow-y: auto;
+    overflow-x: visible;
+    width: 100%;
+  }
+  .legend-layer {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--ui9000-color-border, #e5e7eb);
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .legend-layer:last-child {
+    border-bottom: none;
+  }
+  .legend-details {
+    margin-top: 8px;
+  }
+  .legend-scale {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    padding-top: 8px;
+  }
+  .legend-scale[data-kind='bubbles'] {
+    padding-top: 30px;
+  }
+  .legend-colors {
+    display: flex;
+    position: relative;
+    width: 100%;
+  }
+  .legend-colors[data-qualitative]::after {
+    content: '';
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    top: calc(50% + 1px);
+    height: 1px;
+    transform: translateY(-50%);
+    border-top: 1px dashed #8f95a0;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .legend-buckets {
+    position: relative;
+    display: flex;
+    width: 100%;
+  }
+  .legend-bucket {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    height: 12px;
+    background-color: var(--bucket-fill, #6c758429);
+  }
+  .legend-bucket[data-qualitative] {
+    border-right: 1px solid var(--ui9000-color-border, #e5e7eb);
+  }
+  .legend-bucket:first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  .legend-bucket:last-child {
+    border-right: none;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+  .legend-bucket[data-muted] {
+    opacity: 0.3;
+  }
+  .legend-bucket[data-bubble]::before,
+  .legend-bucket[data-bubble]::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 100%;
+    -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
+    mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);
+    z-index: 1;
+  }
+  .legend-bucket[data-bubble]::before {
+    width: var(--bubble-size, 12px);
+    height: var(--bubble-size, 12px);
+    background-color: #6c758429;
+  }
+  .legend-bucket[data-bubble]::after {
+    display: none;
+    width: var(--inner-size, 0px);
+    height: var(--inner-size, 0px);
+    border: 1px solid var(--ui9000-color-border, #8f95a0);
+    background: transparent;
+  }
+  .legend-bucket[data-bubble][data-inner]::after {
+    display: block;
+  }
+  .legend-values {
+    display: flex;
+    width: 100%;
+    padding-top: 6px;
+  }
+  .legend-value {
+    flex: 1;
+    min-width: 0;
+    padding-right: 5px;
+    font-size: 8px;
+    font-weight: 400;
+    line-height: 16px;
+    text-align: center;
+    color: var(--ui9000-color-text-muted, #6c7584);
+    user-select: none;
+  }
+  .legend-value:first-child {
+    text-align: start;
+  }
+  .legend-value:last-child {
+    text-align: end;
+  }
+  .legend-range {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 12px;
+    z-index: 100;
+    pointer-events: none;
+  }
+  .legend-range-track {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 12px;
+    cursor: pointer;
+    touch-action: none;
+    pointer-events: none;
+  }
+  .legend-thumb {
+    position: absolute;
+    top: 1px;
+    z-index: 2;
+    box-sizing: border-box;
+    width: 10px;
+    height: 10px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: var(--ui9000-color-text, #141c2c);
+    box-shadow: 0 0 0 1px inset var(--ui9000-color-surface, #ffffff);
+    transform: translateX(-50%);
+    cursor: pointer;
+    pointer-events: auto;
+    touch-action: none;
+  }
+  .legend-thumb::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+  }
+  .legend-thumb:hover,
+  .legend-thumb:active {
+    border: 2px solid var(--ui9000-color-border, #8f95a0);
+    background: var(--ui9000-color-surface, #ffffff);
+  }
+  .legend-thumb:focus-visible {
+    outline: 2px solid var(--ui9000-color-primary, #473dd9);
+    outline-offset: 2px;
+  }
+`;
+export {
+  networkGraphStyles
+};
+//# sourceMappingURL=styles.js.map

package/dist/components/network-graph/element/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/network-graph/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const networkGraphStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    min-height: 320px;\n    color: var(--ui9000-color-text, #111827);\n    font-family: var(--ui9000-font-family, system-ui, sans-serif);\n    box-sizing: border-box;\n  }\n  .chart-root {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    border-radius: 12px;\n    background: var(--ui9000-color-surface-muted, #f9faff);\n    overflow: hidden;\n    touch-action: pan-y;\n  }\n  .empty {\n    display: grid;\n    place-items: center;\n    flex: 1;\n    min-height: inherit;\n    padding: 8px;\n    text-align: center;\n    color: var(--ui9000-color-text-muted, #6b7280);\n    font-size: 0.875rem;\n  }\n\n  /* Overlay — same layout as map-chart bubble legend. */\n  .graph-legend {\n    position: absolute;\n    right: 5px;\n    bottom: 5px;\n    z-index: 10;\n    width: max-content;\n    min-width: 360px;\n    max-width: calc(100% - 20px);\n    max-height: 50%;\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    overflow: hidden;\n    box-sizing: border-box;\n    background: var(--ui9000-color-surface, #ffffff);\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 8px;\n    box-shadow:\n      0 2px 4px 0 #141c2c0f,\n      0 4px 8px 2px #141c2c0f;\n    user-select: none;\n    pointer-events: auto;\n  }\n  .legend-panel-header {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    padding: 6px 12px;\n    box-sizing: border-box;\n    border-bottom: 1px solid var(--ui9000-color-border, #e5e7eb);\n  }\n  .graph-legend:not(:has(.legend-layers)) .legend-panel-header {\n    border-bottom: none;\n  }\n  .legend-kicker {\n    margin: 0;\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 11px;\n    font-weight: 400;\n    line-height: 12px;\n    letter-spacing: 0.88px;\n    text-transform: uppercase;\n    color: var(--ui9000-color-text, #111827);\n  }\n  .legend-chevron {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    padding: 0;\n    border: 0;\n    background: transparent\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238f95a0' stroke-width='1.25'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E\")\n      center / 16px no-repeat;\n    cursor: pointer;\n    transition: transform 0.5s;\n  }\n  .legend-chevron[aria-expanded='false'] {\n    transform: rotate(180deg);\n  }\n  .legend-layers {\n    overflow-y: auto;\n    overflow-x: visible;\n    width: 100%;\n  }\n  .legend-layer {\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--ui9000-color-border, #e5e7eb);\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .legend-layer:last-child {\n    border-bottom: none;\n  }\n  .legend-details {\n    margin-top: 8px;\n  }\n  .legend-scale {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    width: 100%;\n    padding-top: 8px;\n  }\n  .legend-scale[data-kind='bubbles'] {\n    padding-top: 30px;\n  }\n  .legend-colors {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n  .legend-colors[data-qualitative]::after {\n    content: '';\n    position: absolute;\n    left: 8px;\n    right: 8px;\n    top: calc(50% + 1px);\n    height: 1px;\n    transform: translateY(-50%);\n    border-top: 1px dashed #8f95a0;\n    z-index: 10;\n    pointer-events: none;\n  }\n  .legend-buckets {\n    position: relative;\n    display: flex;\n    width: 100%;\n  }\n  .legend-bucket {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n    height: 12px;\n    background-color: var(--bucket-fill, #6c758429);\n  }\n  .legend-bucket[data-qualitative] {\n    border-right: 1px solid var(--ui9000-color-border, #e5e7eb);\n  }\n  .legend-bucket:first-child {\n    border-top-left-radius: 8px;\n    border-bottom-left-radius: 8px;\n  }\n  .legend-bucket:last-child {\n    border-right: none;\n    border-top-right-radius: 8px;\n    border-bottom-right-radius: 8px;\n  }\n  .legend-bucket[data-muted] {\n    opacity: 0.3;\n  }\n  .legend-bucket[data-bubble]::before,\n  .legend-bucket[data-bubble]::after {\n    content: '';\n    position: absolute;\n    top: -2px;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border-radius: 100%;\n    -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);\n    mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 100%);\n    z-index: 1;\n  }\n  .legend-bucket[data-bubble]::before {\n    width: var(--bubble-size, 12px);\n    height: var(--bubble-size, 12px);\n    background-color: #6c758429;\n  }\n  .legend-bucket[data-bubble]::after {\n    display: none;\n    width: var(--inner-size, 0px);\n    height: var(--inner-size, 0px);\n    border: 1px solid var(--ui9000-color-border, #8f95a0);\n    background: transparent;\n  }\n  .legend-bucket[data-bubble][data-inner]::after {\n    display: block;\n  }\n  .legend-values {\n    display: flex;\n    width: 100%;\n    padding-top: 6px;\n  }\n  .legend-value {\n    flex: 1;\n    min-width: 0;\n    padding-right: 5px;\n    font-size: 8px;\n    font-weight: 400;\n    line-height: 16px;\n    text-align: center;\n    color: var(--ui9000-color-text-muted, #6c7584);\n    user-select: none;\n  }\n  .legend-value:first-child {\n    text-align: start;\n  }\n  .legend-value:last-child {\n    text-align: end;\n  }\n  .legend-range {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 12px;\n    z-index: 100;\n    pointer-events: none;\n  }\n  .legend-range-track {\n    position: absolute;\n    top: 0;\n    width: 100%;\n    height: 12px;\n    cursor: pointer;\n    touch-action: none;\n    pointer-events: none;\n  }\n  .legend-thumb {\n    position: absolute;\n    top: 1px;\n    z-index: 2;\n    box-sizing: border-box;\n    width: 10px;\n    height: 10px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: var(--ui9000-color-text, #141c2c);\n    box-shadow: 0 0 0 1px inset var(--ui9000-color-surface, #ffffff);\n    transform: translateX(-50%);\n    cursor: pointer;\n    pointer-events: auto;\n    touch-action: none;\n  }\n  .legend-thumb::before {\n    content: '';\n    position: absolute;\n    inset: -4px;\n  }\n  .legend-thumb:hover,\n  .legend-thumb:active {\n    border: 2px solid var(--ui9000-color-border, #8f95a0);\n    background: var(--ui9000-color-surface, #ffffff);\n  }\n  .legend-thumb:focus-visible {\n    outline: 2px solid var(--ui9000-color-primary, #473dd9);\n    outline-offset: 2px;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/components/network-graph/element/ui9000-network-graph.d.ts

@@ -0,0 +1,47 @@
+import { PropertyValues } from 'lit';
+import { Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';
+export declare class Ui9000NetworkGraph extends Ui9000ChartElement {
+    static styles: import('lit').CSSResult[];
+    showLegend: boolean;
+    showTooltip: boolean;
+    private _empty;
+    private _ranges;
+    private _range;
+    private _legendOpen;
+    /** Non-reactive: selection is owned by the draw layer, redrawing would reset it. */
+    private _activeNodeId;
+    private _model;
+    private _legendDrag?;
+    private _resizeObserver?;
+    private _raf;
+    private _resizeRaf;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    /**
+     * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force
+     * layout (same class of rule as filter/resize staying in place).
+     */
+    private shouldRedraw;
+    private scheduleDraw;
+    /**
+     * A resize only re-frames the settled layout — re-running the force ticks
+     * would reshuffle the graph every time the chat pane changes width.
+     */
+    private scheduleResize;
+    private chartRoot;
+    private model;
+    private draw;
+    private setRange;
+    private startThumbDrag;
+    private stopLegendDrag;
+    private renderLegend;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui9000-network-graph': Ui9000NetworkGraph;
+    }
+}
+export declare function registerNetworkGraph(): void;
+//# sourceMappingURL=ui9000-network-graph.d.ts.map

package/dist/components/network-graph/element/ui9000-network-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-network-graph.d.ts","sourceRoot":"","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AA8B7F,qBACa,kBAAmB,SAAQ,kBAAkB;IACxD,OAAgB,MAAM,4BAA0C;IAGhE,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,OAAO,CAAC,MAAM,CAAS;IAGvB,OAAO,CAAC,OAAO,CAA4B;IAG3C,OAAO,CAAC,MAAM,CAAmC;IAGjD,OAAO,CAAC,WAAW,CAAQ;IAE3B,oFAAoF;IACpF,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,WAAW,CAAC,CAIlB;IACF,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,UAAU,CAAK;IAEd,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAa/C;;;OAGG;IACH,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAKpB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,IAAI;IA2BZ,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,YAAY;IAyFX,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}

package/dist/components/network-graph/element/ui9000-network-graph.js

@@ -0,0 +1,307 @@
+import { nothing, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { readThemeFromElement } from "../../../context/widget-context.js";
+import { Ui9000ChartElement } from "../../../element/ui9000-chart-base.js";
+import { parseJsonAttr } from "../../../utils/chart-helpers.js";
+import { chartPropsChanged } from "../../../utils/lit-draw.js";
+import { stopNetworkGraph, resizeNetworkGraph, renderNetworkGraph, updateNetworkGraphVisibility } from "../render/draw.js";
+import { networkGraphStyles } from "./styles.js";
+import { FULL_RANGE, legendRanges, visibleNodeIds } from "../lib/domain.js";
+import { normalizeNetworkGraphData } from "../lib/normalize.js";
+import { slideThumb, rangeTrackOffset, thumbTrackPercent, sliderIndexFromPointer } from "../lib/legend.js";
+import { formatLegendValue } from "../lib/format.js";
+import { chartShellStyles } from "../../../element/chart-shell-styles.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const LEGEND_BUBBLE_SIZES = [10, 15, 20, 25, 30, 35, 40];
+const MUTED_LEGEND_FILL = "#6C758429";
+let Ui9000NetworkGraph = class extends Ui9000ChartElement {
+  constructor() {
+    super(...arguments);
+    this.showLegend = true;
+    this.showTooltip = true;
+    this._empty = false;
+    this._ranges = [];
+    this._range = { ...FULL_RANGE };
+    this._legendOpen = true;
+    this._activeNodeId = null;
+    this._model = null;
+    this._raf = 0;
+    this._resizeRaf = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver(() => this.scheduleResize());
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    cancelAnimationFrame(this._raf);
+    cancelAnimationFrame(this._resizeRaf);
+    this.stopLegendDrag();
+    const root = this.chartRoot();
+    if (root) stopNetworkGraph(root);
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (changed.has("dataJson")) {
+      this._range = { ...FULL_RANGE };
+      this._activeNodeId = null;
+      this._model = null;
+    }
+    if (changed.has("showTooltip") && !this.showTooltip) {
+      this._labelTooltip = null;
+    }
+    if (this.shouldRedraw(changed)) this.scheduleDraw();
+  }
+  /**
+   * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force
+   * layout (same class of rule as filter/resize staying in place).
+   */
+  shouldRedraw(changed) {
+    if (!chartPropsChanged(changed)) return false;
+    for (const key of changed.keys()) {
+      if (typeof key !== "string" || key.startsWith("_")) continue;
+      if (key === "showLegend" || key === "showTooltip") continue;
+      return true;
+    }
+    return false;
+  }
+  scheduleDraw() {
+    cancelAnimationFrame(this._raf);
+    this._raf = requestAnimationFrame(() => this.draw());
+  }
+  /**
+   * A resize only re-frames the settled layout — re-running the force ticks
+   * would reshuffle the graph every time the chat pane changes width.
+   */
+  scheduleResize() {
+    cancelAnimationFrame(this._resizeRaf);
+    this._resizeRaf = requestAnimationFrame(() => {
+      const root = this.chartRoot();
+      if (!root) return;
+      if (!resizeNetworkGraph(root, root.clientWidth, root.clientHeight)) this.draw();
+    });
+  }
+  chartRoot() {
+    var _a;
+    return ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chart-root")) ?? null;
+  }
+  model() {
+    if (!this._model) {
+      this._model = normalizeNetworkGraphData(
+        parseJsonAttr(this.dataJson, null)
+      );
+    }
+    return this._model;
+  }
+  draw() {
+    const root = this.chartRoot();
+    if (!root) return;
+    const model = this.model();
+    this._empty = model.nodes.length === 0;
+    this._ranges = legendRanges(model.breakpoints);
+    if (this._empty) {
+      stopNetworkGraph(root);
+      root.replaceChildren();
+      return;
+    }
+    renderNetworkGraph(root, {
+      model,
+      visibleIds: visibleNodeIds(model, this._range),
+      width: root.clientWidth,
+      height: root.clientHeight,
+      theme: readThemeFromElement(this),
+      activeNodeId: this._activeNodeId,
+      onSelect: (id) => {
+        this._activeNodeId = id;
+      }
+    });
+  }
+  setRange(edge, raw) {
+    const next = slideThumb(this._range, edge, raw, this._ranges.length);
+    if (next.leftSlider === this._range.leftSlider && next.rightSlider === this._range.rightSlider) {
+      return;
+    }
+    this._range = next;
+    const root = this.chartRoot();
+    if (!root) return;
+    const visible = visibleNodeIds(this.model(), next);
+    if (!updateNetworkGraphVisibility(root, visible)) this.scheduleDraw();
+  }
+  startThumbDrag(edge, e) {
+    const thumb = e.currentTarget;
+    if (!(thumb instanceof HTMLElement)) return;
+    const track = thumb.parentElement;
+    if (!track) return;
+    e.preventDefault();
+    e.stopPropagation();
+    thumb.setPointerCapture(e.pointerId);
+    this.stopLegendDrag();
+    const move = (ev) => {
+      const index = sliderIndexFromPointer(
+        ev.clientX,
+        track.getBoundingClientRect(),
+        this._ranges.length
+      );
+      this.setRange(edge, index);
+    };
+    const up = (ev) => {
+      if (thumb.hasPointerCapture(ev.pointerId)) thumb.releasePointerCapture(ev.pointerId);
+      this.stopLegendDrag();
+    };
+    thumb.addEventListener("pointermove", move);
+    thumb.addEventListener("pointerup", up);
+    thumb.addEventListener("pointercancel", up);
+    this._legendDrag = { thumb, move, up };
+    move(e);
+  }
+  stopLegendDrag() {
+    const drag = this._legendDrag;
+    if (!drag) return;
+    drag.thumb.removeEventListener("pointermove", drag.move);
+    drag.thumb.removeEventListener("pointerup", drag.up);
+    drag.thumb.removeEventListener("pointercancel", drag.up);
+    this._legendDrag = void 0;
+  }
+  renderLegend() {
+    if (!this.showLegend || this._empty || this._ranges.length < 2) return nothing;
+    const { leftSlider, rightSlider } = this._range;
+    const last = this._ranges.length;
+    const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();
+    return html`
+      <div class="graph-legend" part="legend">
+        <div class="legend-panel-header">
+          <p class="legend-kicker">Legend</p>
+          <button
+            type="button"
+            class="legend-chevron"
+            aria-expanded=${this._legendOpen}
+            aria-label=${this._legendOpen ? "Collapse legend" : "Expand legend"}
+            @click=${() => {
+      this._legendOpen = !this._legendOpen;
+    }}
+          ></button>
+        </div>
+        ${this._legendOpen ? html`<div class="legend-layers">
+              <div class="legend-layer">
+                <div class="legend-details">
+                  <div class="legend-scale" data-kind="bubbles">
+                    <div class="legend-colors" data-qualitative>
+                      <div class="legend-range">
+                        <div
+                          class="legend-range-track"
+                          style="left:${rangeTrackOffset("left", leftSlider, last)}"
+                        >
+                          <button
+                            type="button"
+                            class="legend-thumb"
+                            aria-label="Smallest node size shown"
+                            style="left:${thumbTrackPercent(leftSlider, last)}"
+                            @pointerdown=${(e) => this.startThumbDrag("leftSlider", e)}
+                          ></button>
+                        </div>
+                        <div
+                          class="legend-range-track"
+                          style="right:${rangeTrackOffset("right", rightSlider, last)}"
+                        >
+                          <button
+                            type="button"
+                            class="legend-thumb"
+                            aria-label="Largest node size shown"
+                            style="left:${thumbTrackPercent(rightSlider, last)}"
+                            @pointerdown=${(e) => this.startThumbDrag("rightSlider", e)}
+                          ></button>
+                        </div>
+                      </div>
+                      <div class="legend-buckets">
+                        ${this._ranges.map((_range, index) => {
+      const muted = !(leftSlider <= index && index < rightSlider);
+      const bubble = LEGEND_BUBBLE_SIZES[index] ?? 12;
+      const inner = bubble - 15 > 0 ? bubble - 15 : 0;
+      return html`<span
+                            class="legend-bucket"
+                            ?data-bubble=${true}
+                            ?data-inner=${inner > 0}
+                            ?data-qualitative=${true}
+                            ?data-muted=${muted}
+                            style="background:${MUTED_LEGEND_FILL};--bubble-size:${bubble}px;--inner-size:${inner}px"
+                          ></span>`;
+    })}
+                      </div>
+                    </div>
+                    <div class="legend-values">
+                      ${this._ranges.map(
+      (range) => html`<span
+                          class="legend-value"
+                          @mouseenter=${this.showTooltip ? (e) => onAxisLabelHover == null ? void 0 : onAxisLabelHover(String(range.start), e) : void 0}
+                          @mouseleave=${this.showTooltip ? onAxisLabelLeave : void 0}
+                          >${formatLegendValue(range.start, 2)}</span
+                        >`
+    )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>` : nothing}
+      </div>
+    `;
+  }
+  render() {
+    return html`
+      <div class="widget-shell" part="shell">
+        ${this.renderShellHeader(this.headerTitle())}
+        <div class="widget-body">
+          <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
+          ${this.renderLegend()}
+          ${this._empty ? html`<div class="empty" part="empty">
+                Network graph requires a nodes and links payload.
+              </div>` : nothing}
+          ${this.renderShellLabelTooltip()}
+        </div>
+      </div>
+    `;
+  }
+};
+Ui9000NetworkGraph.styles = [networkGraphStyles, chartShellStyles];
+__decorateClass([
+  property({ type: Boolean, attribute: "show-legend" })
+], Ui9000NetworkGraph.prototype, "showLegend", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-tooltip" })
+], Ui9000NetworkGraph.prototype, "showTooltip", 2);
+__decorateClass([
+  state()
+], Ui9000NetworkGraph.prototype, "_empty", 2);
+__decorateClass([
+  state()
+], Ui9000NetworkGraph.prototype, "_ranges", 2);
+__decorateClass([
+  state()
+], Ui9000NetworkGraph.prototype, "_range", 2);
+__decorateClass([
+  state()
+], Ui9000NetworkGraph.prototype, "_legendOpen", 2);
+Ui9000NetworkGraph = __decorateClass([
+  customElement("ui9000-network-graph")
+], Ui9000NetworkGraph);
+function registerNetworkGraph() {
+  if (!customElements.get("ui9000-network-graph")) {
+    customElements.define("ui9000-network-graph", Ui9000NetworkGraph);
+  }
+}
+registerNetworkGraph();
+export {
+  Ui9000NetworkGraph,
+  registerNetworkGraph
+};
+//# sourceMappingURL=ui9000-network-graph.js.map