@fusedashlabs/widgets 0.3.1 → 0.4.1

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

@@ -30,30 +30,130 @@ const networkGraphStyles = css`
     font-size: 0.875rem;
   }
 
-  /* Legend — value buckets as half bubbles, with a two-thumb size filter. */
+  /* Overlay — same layout as map-chart bubble legend. */
   .graph-legend {
-    flex-shrink: 0;
-    /* The largest bubble overhangs the bar by half its diameter (3xl → ~19px). */
-    margin: 26px 0 8px;
+    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: inline-flex;
+    display: flex;
+    width: 100%;
   }
   .legend-bucket {
     position: relative;
-    width: 40px;
+    flex: 1;
+    min-width: 0;
     height: 12px;
-    /* FuseDash tints the track with its label grey; the literal is the fallback
-       for engines without color-mix. */
-    background: #6c758429;
-    background: color-mix(in srgb, var(--ui9000-color-text-muted, #6c7584) 16%, transparent);
-    border-right: 1px solid var(--ui9000-color-border, #e5e7eb);
-    opacity: 1;
+    background-color: var(--bucket-fill, #6c758429);
   }
-  .legend-bucket[data-muted] {
-    opacity: 0.3;
+  .legend-bucket[data-qualitative] {
+    border-right: 1px solid var(--ui9000-color-border, #e5e7eb);
   }
   .legend-bucket:first-child {
     border-top-left-radius: 8px;
@@ -64,32 +164,51 @@ const networkGraphStyles = css`
     border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
   }
-  /* Top half of a circle sitting on the bar, sized like the node it stands for. */
-  .legend-bucket::before {
+  .legend-bucket[data-muted] {
+    opacity: 0.3;
+  }
+  .legend-bucket[data-bubble]::before,
+  .legend-bucket[data-bubble]::after {
     content: '';
     position: absolute;
     top: -2px;
     left: 50%;
-    width: var(--bubble-size);
-    height: var(--bubble-size);
     transform: translate(-50%, -50%);
     border-radius: 100%;
-    background: #6c758429;
-    background: color-mix(in srgb, var(--ui9000-color-text-muted, #6c7584) 16%, transparent);
     -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 {
-    width: 40px;
+    flex: 1;
+    min-width: 0;
     padding-right: 5px;
-    font-size: 9px;
+    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;
@@ -97,53 +216,54 @@ const networkGraphStyles = css`
   .legend-value:last-child {
     text-align: end;
   }
-
   .legend-range {
     position: absolute;
-    inset: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 12px;
+    z-index: 100;
     pointer-events: none;
   }
-  .legend-range input {
+  .legend-range-track {
     position: absolute;
-    left: 0;
-    bottom: -4px;
+    top: 0;
     width: 100%;
     height: 12px;
-    margin: 0;
-    padding: 0;
-    background: none;
-    appearance: none;
-    -webkit-appearance: none;
+    cursor: pointer;
+    touch-action: none;
     pointer-events: none;
   }
-  .legend-range input:focus-visible {
-    outline: 2px solid var(--ui9000-color-primary, #473dd9);
-    outline-offset: 2px;
-  }
-  .legend-range input::-webkit-slider-thumb {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 8px;
-    height: 16px;
-    border: 1px solid var(--ui9000-color-border, #e5e7eb);
-    border-radius: 3px;
-    background: var(--ui9000-color-surface, #fff);
-    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
-    cursor: ew-resize;
+  .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-range input::-moz-range-thumb {
-    width: 8px;
-    height: 16px;
-    border: 1px solid var(--ui9000-color-border, #e5e7eb);
-    border-radius: 3px;
-    background: var(--ui9000-color-surface, #fff);
-    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
-    cursor: ew-resize;
-    pointer-events: auto;
+  .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-range input::-moz-range-track {
-    background: none;
+  .legend-thumb:focus-visible {
+    outline: 2px solid var(--ui9000-color-primary, #473dd9);
+    outline-offset: 2px;
   }
 `;
 export {

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

@@ -1 +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  /* Legend — value buckets as half bubbles, with a two-thumb size filter. */\n  .graph-legend {\n    flex-shrink: 0;\n    /* The largest bubble overhangs the bar by half its diameter (3xl → ~19px). */\n    margin: 26px 0 8px;\n    user-select: none;\n  }\n  .legend-scale {\n    position: relative;\n    display: inline-flex;\n  }\n  .legend-bucket {\n    position: relative;\n    width: 40px;\n    height: 12px;\n    /* FuseDash tints the track with its label grey; the literal is the fallback\n       for engines without color-mix. */\n    background: #6c758429;\n    background: color-mix(in srgb, var(--ui9000-color-text-muted, #6c7584) 16%, transparent);\n    border-right: 1px solid var(--ui9000-color-border, #e5e7eb);\n    opacity: 1;\n  }\n  .legend-bucket[data-muted] {\n    opacity: 0.3;\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  /* Top half of a circle sitting on the bar, sized like the node it stands for. */\n  .legend-bucket::before {\n    content: '';\n    position: absolute;\n    top: -2px;\n    left: 50%;\n    width: var(--bubble-size);\n    height: var(--bubble-size);\n    transform: translate(-50%, -50%);\n    border-radius: 100%;\n    background: #6c758429;\n    background: color-mix(in srgb, var(--ui9000-color-text-muted, #6c7584) 16%, transparent);\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  }\n  .legend-values {\n    display: flex;\n    padding-top: 6px;\n  }\n  .legend-value {\n    width: 40px;\n    padding-right: 5px;\n    font-size: 9px;\n    line-height: 16px;\n    text-align: center;\n    color: var(--ui9000-color-text-muted, #6c7584);\n  }\n  .legend-value:first-child {\n    text-align: start;\n  }\n  .legend-value:last-child {\n    text-align: end;\n  }\n\n  .legend-range {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n  .legend-range input {\n    position: absolute;\n    left: 0;\n    bottom: -4px;\n    width: 100%;\n    height: 12px;\n    margin: 0;\n    padding: 0;\n    background: none;\n    appearance: none;\n    -webkit-appearance: none;\n    pointer-events: none;\n  }\n  .legend-range input:focus-visible {\n    outline: 2px solid var(--ui9000-color-primary, #473dd9);\n    outline-offset: 2px;\n  }\n  .legend-range input::-webkit-slider-thumb {\n    appearance: none;\n    -webkit-appearance: none;\n    width: 8px;\n    height: 16px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 3px;\n    background: var(--ui9000-color-surface, #fff);\n    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);\n    cursor: ew-resize;\n    pointer-events: auto;\n  }\n  .legend-range input::-moz-range-thumb {\n    width: 8px;\n    height: 16px;\n    border: 1px solid var(--ui9000-color-border, #e5e7eb);\n    border-radius: 3px;\n    background: var(--ui9000-color-surface, #fff);\n    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);\n    cursor: ew-resize;\n    pointer-events: auto;\n  }\n  .legend-range input::-moz-range-track {\n    background: none;\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;"}
+{"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

@@ -7,9 +7,11 @@ export declare class Ui9000NetworkGraph extends Ui9000ChartElement {
     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;
@@ -31,6 +33,8 @@ export declare class Ui9000NetworkGraph extends Ui9000ChartElement {
     private model;
     private draw;
     private setRange;
+    private startThumbDrag;
+    private stopLegendDrag;
     private renderLegend;
     render(): import('lit-html').TemplateResult<1>;
 }

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

@@ -1 +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;AAyB7F,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;IAEjD,oFAAoF;IACpF,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,UAAU,CAAK;IAEd,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAS5B,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,YAAY;IAwDX,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAI3C"}
+{"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

@@ -8,6 +8,7 @@ import { stopNetworkGraph, resizeNetworkGraph, renderNetworkGraph, updateNetwork
 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;
@@ -20,7 +21,8 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const LEGEND_BUBBLE_RATIO = 1.2;
+const LEGEND_BUBBLE_SIZES = [10, 15, 20, 25, 30, 35, 40];
+const MUTED_LEGEND_FILL = "#6C758429";
 let Ui9000NetworkGraph = class extends Ui9000ChartElement {
   constructor() {
     super(...arguments);
@@ -29,6 +31,7 @@ let Ui9000NetworkGraph = class extends Ui9000ChartElement {
     this._empty = false;
     this._ranges = [];
     this._range = { ...FULL_RANGE };
+    this._legendOpen = true;
     this._activeNodeId = null;
     this._model = null;
     this._raf = 0;
@@ -44,6 +47,7 @@ let Ui9000NetworkGraph = class extends Ui9000ChartElement {
     (_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();
@@ -124,14 +128,51 @@ let Ui9000NetworkGraph = class extends Ui9000ChartElement {
     });
   }
   setRange(edge, raw) {
-    const next = { ...this._range, [edge]: raw };
-    if (next.leftSlider >= next.rightSlider) return;
+    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;
@@ -139,46 +180,79 @@ let Ui9000NetworkGraph = class extends Ui9000ChartElement {
     const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();
     return html`
       <div class="graph-legend" part="legend">
-        <div class="legend-scale">
-          ${this._ranges.map((range, index) => {
+        <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-muted=${muted}
-              style="--bubble-size:${range.radius * LEGEND_BUBBLE_RATIO}px"
-            ></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 class="legend-range">
-            <input
-              type="range"
-              aria-label="Smallest node size shown"
-              min="0"
-              max=${last}
-              step="1"
-              .value=${String(leftSlider)}
-              @input=${(e) => this.setRange("leftSlider", Number(e.target.value))}
-            />
-            <input
-              type="range"
-              aria-label="Largest node size shown"
-              min="0"
-              max=${last}
-              step="1"
-              .value=${String(rightSlider)}
-              @input=${(e) => this.setRange("rightSlider", Number(e.target.value))}
-            />
-          </div>
-        </div>
-        <div class="legend-values">
-          ${this._ranges.map(
+                      </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
-            >`
+                          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>
+            </div>` : nothing}
       </div>
     `;
   }
@@ -187,8 +261,8 @@ let Ui9000NetworkGraph = class extends Ui9000ChartElement {
       <div class="widget-shell" part="shell">
         ${this.renderShellHeader(this.headerTitle())}
         <div class="widget-body">
-          ${this.renderLegend()}
           <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}
@@ -214,6 +288,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], Ui9000NetworkGraph.prototype, "_range", 2);
+__decorateClass([
+  state()
+], Ui9000NetworkGraph.prototype, "_legendOpen", 2);
 Ui9000NetworkGraph = __decorateClass([
   customElement("ui9000-network-graph")
 ], Ui9000NetworkGraph);

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

@@ -1 +1 @@
-{"version":3,"file":"ui9000-network-graph.js","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  FULL_RANGE,\n  formatLegendValue,\n  legendRanges,\n  normalizeNetworkGraphData,\n  visibleNodeIds,\n  type NetworkGraphInput,\n  type NetworkGraphModel,\n  type NetworkLegendRange,\n  type NetworkRange,\n} from '../lib/index.js';\nimport {\n  renderNetworkGraph,\n  resizeNetworkGraph,\n  stopNetworkGraph,\n  updateNetworkGraphVisibility,\n} from '../render/draw.js';\nimport { networkGraphStyles } from './styles.js';\n\n/** Legend bubbles are drawn at 1.2x the node radius they stand for (client). */\nconst LEGEND_BUBBLE_RATIO = 1.2;\n\n@customElement('ui9000-network-graph')\nexport class Ui9000NetworkGraph extends Ui9000ChartElement {\n  static override styles = [networkGraphStyles, chartShellStyles];\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _ranges: NetworkLegendRange[] = [];\n\n  @state()\n  private _range: NetworkRange = { ...FULL_RANGE };\n\n  /** Non-reactive: selection is owned by the draw layer, redrawing would reset it. */\n  private _activeNodeId: string | null = null;\n\n  private _model: NetworkGraphModel | null = null;\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n  private _resizeRaf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleResize());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    cancelAnimationFrame(this._resizeRaf);\n    const root = this.chartRoot();\n    if (root) stopNetworkGraph(root);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (changed.has('dataJson')) {\n      // New buckets: the old slider window and selection no longer mean anything.\n      this._range = { ...FULL_RANGE };\n      this._activeNodeId = null;\n      this._model = null;\n    }\n    if (changed.has('showTooltip') && !this.showTooltip) {\n      this._labelTooltip = null;\n    }\n    if (this.shouldRedraw(changed)) this.scheduleDraw();\n  }\n\n  /**\n   * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force\n   * layout (same class of rule as filter/resize staying in place).\n   */\n  private shouldRedraw(changed: PropertyValues): boolean {\n    if (!chartPropsChanged(changed)) return false;\n    for (const key of changed.keys()) {\n      if (typeof key !== 'string' || key.startsWith('_')) continue;\n      if (key === 'showLegend' || key === 'showTooltip') continue;\n      return true;\n    }\n    return false;\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  /**\n   * A resize only re-frames the settled layout — re-running the force ticks\n   * would reshuffle the graph every time the chat pane changes width.\n   */\n  private scheduleResize(): void {\n    cancelAnimationFrame(this._resizeRaf);\n    this._resizeRaf = requestAnimationFrame(() => {\n      const root = this.chartRoot();\n      if (!root) return;\n      if (!resizeNetworkGraph(root, root.clientWidth, root.clientHeight)) this.draw();\n    });\n  }\n\n  private chartRoot(): HTMLElement | null {\n    return (this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null) ?? null;\n  }\n\n  private model(): NetworkGraphModel {\n    if (!this._model) {\n      this._model = normalizeNetworkGraphData(\n        parseJsonAttr<NetworkGraphInput | null>(this.dataJson, null),\n      );\n    }\n    return this._model;\n  }\n\n  private draw(): void {\n    const root = this.chartRoot();\n    if (!root) return;\n\n    const model = this.model();\n    this._empty = model.nodes.length === 0;\n    this._ranges = legendRanges(model.breakpoints);\n\n    if (this._empty) {\n      stopNetworkGraph(root);\n      root.replaceChildren();\n      return;\n    }\n\n    renderNetworkGraph(root, {\n      model,\n      visibleIds: visibleNodeIds(model, this._range),\n      width: root.clientWidth,\n      height: root.clientHeight,\n      theme: readThemeFromElement(this),\n      activeNodeId: this._activeNodeId,\n      onSelect: (id) => {\n        this._activeNodeId = id;\n      },\n    });\n  }\n\n  private setRange(edge: 'leftSlider' | 'rightSlider', raw: number): void {\n    const next = { ...this._range, [edge]: raw };\n    if (next.leftSlider >= next.rightSlider) return;\n    // `_range` is internal state, so `updated()` re-renders the legend without\n    // scheduling a redraw — the filter is pushed into the live graph instead.\n    this._range = next;\n    const root = this.chartRoot();\n    if (!root) return;\n    const visible = visibleNodeIds(this.model(), next);\n    if (!updateNetworkGraphVisibility(root, visible)) this.scheduleDraw();\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._empty || this._ranges.length < 2) return nothing;\n    const { leftSlider, rightSlider } = this._range;\n    const last = this._ranges.length;\n    const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();\n\n    return html`\n      <div class=\"graph-legend\" part=\"legend\">\n        <div class=\"legend-scale\">\n          ${this._ranges.map((range, index) => {\n            const muted = !(leftSlider <= index && index < rightSlider);\n            return html`<span\n              class=\"legend-bucket\"\n              ?data-muted=${muted}\n              style=\"--bubble-size:${range.radius * LEGEND_BUBBLE_RATIO}px\"\n            ></span>`;\n          })}\n          <div class=\"legend-range\">\n            <input\n              type=\"range\"\n              aria-label=\"Smallest node size shown\"\n              min=\"0\"\n              max=${last}\n              step=\"1\"\n              .value=${String(leftSlider)}\n              @input=${(e: Event) =>\n                this.setRange('leftSlider', Number((e.target as HTMLInputElement).value))}\n            />\n            <input\n              type=\"range\"\n              aria-label=\"Largest node size shown\"\n              min=\"0\"\n              max=${last}\n              step=\"1\"\n              .value=${String(rightSlider)}\n              @input=${(e: Event) =>\n                this.setRange('rightSlider', Number((e.target as HTMLInputElement).value))}\n            />\n          </div>\n        </div>\n        <div class=\"legend-values\">\n          ${this._ranges.map(\n            (range) => html`<span\n              class=\"legend-value\"\n              @mouseenter=${this.showTooltip\n                ? (e: MouseEvent) => onAxisLabelHover?.(String(range.start), e)\n                : undefined}\n              @mouseleave=${this.showTooltip ? onAxisLabelLeave : undefined}\n              >${formatLegendValue(range.start, 2)}</span\n            >`,\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          ${this.renderLegend()}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                Network graph requires a nodes and links payload.\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-network-graph': Ui9000NetworkGraph;\n  }\n}\n\nexport function registerNetworkGraph(): void {\n  if (!customElements.get('ui9000-network-graph')) {\n    customElements.define('ui9000-network-graph', Ui9000NetworkGraph);\n  }\n}\n\nregisterNetworkGraph();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-network-graph.js","sources":["../../../../src/components/network-graph/element/ui9000-network-graph.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  FULL_RANGE,\n  formatLegendValue,\n  legendRanges,\n  normalizeNetworkGraphData,\n  rangeTrackOffset,\n  slideThumb,\n  sliderIndexFromPointer,\n  thumbTrackPercent,\n  visibleNodeIds,\n  type NetworkGraphInput,\n  type NetworkGraphModel,\n  type NetworkLegendRange,\n  type NetworkRange,\n} from '../lib/index.js';\nimport {\n  renderNetworkGraph,\n  resizeNetworkGraph,\n  stopNetworkGraph,\n  updateNetworkGraphVisibility,\n} from '../render/draw.js';\nimport { networkGraphStyles } from './styles.js';\n\n/** Same diameters as map `DEFAULT_BUBBLES_RADIUS` (7 size steps). */\nconst LEGEND_BUBBLE_SIZES = [10, 15, 20, 25, 30, 35, 40];\nconst MUTED_LEGEND_FILL = '#6C758429';\n\n@customElement('ui9000-network-graph')\nexport class Ui9000NetworkGraph extends Ui9000ChartElement {\n  static override styles = [networkGraphStyles, chartShellStyles];\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @state()\n  private _empty = false;\n\n  @state()\n  private _ranges: NetworkLegendRange[] = [];\n\n  @state()\n  private _range: NetworkRange = { ...FULL_RANGE };\n\n  @state()\n  private _legendOpen = true;\n\n  /** Non-reactive: selection is owned by the draw layer, redrawing would reset it. */\n  private _activeNodeId: string | null = null;\n\n  private _model: NetworkGraphModel | null = null;\n  private _legendDrag?: {\n    thumb: HTMLElement;\n    move: (e: PointerEvent) => void;\n    up: (e: PointerEvent) => void;\n  };\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n  private _resizeRaf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleResize());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    cancelAnimationFrame(this._resizeRaf);\n    this.stopLegendDrag();\n    const root = this.chartRoot();\n    if (root) stopNetworkGraph(root);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (changed.has('dataJson')) {\n      // New buckets: the old slider window and selection no longer mean anything.\n      this._range = { ...FULL_RANGE };\n      this._activeNodeId = null;\n      this._model = null;\n    }\n    if (changed.has('showTooltip') && !this.showTooltip) {\n      this._labelTooltip = null;\n    }\n    if (this.shouldRedraw(changed)) this.scheduleDraw();\n  }\n\n  /**\n   * Legend / tooltip are Lit chrome. Toggling them must not re-settle the force\n   * layout (same class of rule as filter/resize staying in place).\n   */\n  private shouldRedraw(changed: PropertyValues): boolean {\n    if (!chartPropsChanged(changed)) return false;\n    for (const key of changed.keys()) {\n      if (typeof key !== 'string' || key.startsWith('_')) continue;\n      if (key === 'showLegend' || key === 'showTooltip') continue;\n      return true;\n    }\n    return false;\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  /**\n   * A resize only re-frames the settled layout — re-running the force ticks\n   * would reshuffle the graph every time the chat pane changes width.\n   */\n  private scheduleResize(): void {\n    cancelAnimationFrame(this._resizeRaf);\n    this._resizeRaf = requestAnimationFrame(() => {\n      const root = this.chartRoot();\n      if (!root) return;\n      if (!resizeNetworkGraph(root, root.clientWidth, root.clientHeight)) this.draw();\n    });\n  }\n\n  private chartRoot(): HTMLElement | null {\n    return (this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null) ?? null;\n  }\n\n  private model(): NetworkGraphModel {\n    if (!this._model) {\n      this._model = normalizeNetworkGraphData(\n        parseJsonAttr<NetworkGraphInput | null>(this.dataJson, null),\n      );\n    }\n    return this._model;\n  }\n\n  private draw(): void {\n    const root = this.chartRoot();\n    if (!root) return;\n\n    const model = this.model();\n    this._empty = model.nodes.length === 0;\n    this._ranges = legendRanges(model.breakpoints);\n\n    if (this._empty) {\n      stopNetworkGraph(root);\n      root.replaceChildren();\n      return;\n    }\n\n    renderNetworkGraph(root, {\n      model,\n      visibleIds: visibleNodeIds(model, this._range),\n      width: root.clientWidth,\n      height: root.clientHeight,\n      theme: readThemeFromElement(this),\n      activeNodeId: this._activeNodeId,\n      onSelect: (id) => {\n        this._activeNodeId = id;\n      },\n    });\n  }\n\n  private setRange(edge: 'leftSlider' | 'rightSlider', raw: number): void {\n    const next = slideThumb(this._range, edge, raw, this._ranges.length);\n    if (next.leftSlider === this._range.leftSlider && next.rightSlider === this._range.rightSlider) {\n      return;\n    }\n    this._range = next;\n    const root = this.chartRoot();\n    if (!root) return;\n    const visible = visibleNodeIds(this.model(), next);\n    if (!updateNetworkGraphVisibility(root, visible)) this.scheduleDraw();\n  }\n\n  private startThumbDrag(edge: 'leftSlider' | 'rightSlider', e: PointerEvent): void {\n    const thumb = e.currentTarget;\n    if (!(thumb instanceof HTMLElement)) return;\n    const track = thumb.parentElement;\n    if (!track) return;\n    e.preventDefault();\n    e.stopPropagation();\n    thumb.setPointerCapture(e.pointerId);\n    this.stopLegendDrag();\n\n    const move = (ev: PointerEvent) => {\n      const index = sliderIndexFromPointer(\n        ev.clientX,\n        track.getBoundingClientRect(),\n        this._ranges.length,\n      );\n      this.setRange(edge, index);\n    };\n    const up = (ev: PointerEvent) => {\n      if (thumb.hasPointerCapture(ev.pointerId)) thumb.releasePointerCapture(ev.pointerId);\n      this.stopLegendDrag();\n    };\n    thumb.addEventListener('pointermove', move);\n    thumb.addEventListener('pointerup', up);\n    thumb.addEventListener('pointercancel', up);\n    this._legendDrag = { thumb, move, up };\n    move(e);\n  }\n\n  private stopLegendDrag(): void {\n    const drag = this._legendDrag;\n    if (!drag) return;\n    drag.thumb.removeEventListener('pointermove', drag.move);\n    drag.thumb.removeEventListener('pointerup', drag.up);\n    drag.thumb.removeEventListener('pointercancel', drag.up);\n    this._legendDrag = undefined;\n  }\n\n  private renderLegend() {\n    if (!this.showLegend || this._empty || this._ranges.length < 2) return nothing;\n    const { leftSlider, rightSlider } = this._range;\n    const last = this._ranges.length;\n    const { onAxisLabelHover, onAxisLabelLeave } = this.axisLabelHandlers();\n\n    return html`\n      <div class=\"graph-legend\" part=\"legend\">\n        <div class=\"legend-panel-header\">\n          <p class=\"legend-kicker\">Legend</p>\n          <button\n            type=\"button\"\n            class=\"legend-chevron\"\n            aria-expanded=${this._legendOpen}\n            aria-label=${this._legendOpen ? 'Collapse legend' : 'Expand legend'}\n            @click=${() => {\n              this._legendOpen = !this._legendOpen;\n            }}\n          ></button>\n        </div>\n        ${this._legendOpen\n          ? html`<div class=\"legend-layers\">\n              <div class=\"legend-layer\">\n                <div class=\"legend-details\">\n                  <div class=\"legend-scale\" data-kind=\"bubbles\">\n                    <div class=\"legend-colors\" data-qualitative>\n                      <div class=\"legend-range\">\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"left:${rangeTrackOffset('left', leftSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Smallest node size shown\"\n                            style=\"left:${thumbTrackPercent(leftSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('leftSlider', e)}\n                          ></button>\n                        </div>\n                        <div\n                          class=\"legend-range-track\"\n                          style=\"right:${rangeTrackOffset('right', rightSlider, last)}\"\n                        >\n                          <button\n                            type=\"button\"\n                            class=\"legend-thumb\"\n                            aria-label=\"Largest node size shown\"\n                            style=\"left:${thumbTrackPercent(rightSlider, last)}\"\n                            @pointerdown=${(e: PointerEvent) => this.startThumbDrag('rightSlider', e)}\n                          ></button>\n                        </div>\n                      </div>\n                      <div class=\"legend-buckets\">\n                        ${this._ranges.map((_range, index) => {\n                          const muted = !(leftSlider <= index && index < rightSlider);\n                          const bubble = LEGEND_BUBBLE_SIZES[index] ?? 12;\n                          const inner = bubble - 15 > 0 ? bubble - 15 : 0;\n                          return html`<span\n                            class=\"legend-bucket\"\n                            ?data-bubble=${true}\n                            ?data-inner=${inner > 0}\n                            ?data-qualitative=${true}\n                            ?data-muted=${muted}\n                            style=\"background:${MUTED_LEGEND_FILL};--bubble-size:${bubble}px;--inner-size:${inner}px\"\n                          ></span>`;\n                        })}\n                      </div>\n                    </div>\n                    <div class=\"legend-values\">\n                      ${this._ranges.map(\n                        (range) => html`<span\n                          class=\"legend-value\"\n                          @mouseenter=${this.showTooltip\n                            ? (e: MouseEvent) => onAxisLabelHover?.(String(range.start), e)\n                            : undefined}\n                          @mouseleave=${this.showTooltip ? onAxisLabelLeave : undefined}\n                          >${formatLegendValue(range.start, 2)}</span\n                        >`,\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(this.headerTitle())}\n        <div class=\"widget-body\">\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this.renderLegend()}\n          ${this._empty\n            ? html`<div class=\"empty\" part=\"empty\">\n                Network graph requires a nodes and links payload.\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-network-graph': Ui9000NetworkGraph;\n  }\n}\n\nexport function registerNetworkGraph(): void {\n  if (!customElements.get('ui9000-network-graph')) {\n    customElements.define('ui9000-network-graph', Ui9000NetworkGraph);\n  }\n}\n\nregisterNetworkGraph();\n"],"names":[],"mappings":"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"}