@aceshooting/lyra-ui 29.0.2 → 29.1.0

package/dist/components/media/map/map.styles.js

@@ -1 +1 @@
-import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";const styles=css` :host { display: block; position: relative; inline-size: 100%; block-size: var(--lr-map-height, var(--lr-size-24rem)); } [part='base'] { position: relative; inline-size: 100%; block-size: 100%; } lr-skeleton { --lr-skeleton-w: 100%; --lr-skeleton-h: 100%; } [part='container'] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: hidden; } .maplibregl-canvas-container { inline-size: 100%; block-size: 100%; } .maplibregl-canvas { position: absolute; inset-block-start: 0; inset-inline-start: 0; } .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; user-select: none; } .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; } .maplibregl-canvas-container.maplibregl-touch-zoom-rotate, .maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas { touch-action: pan-x pan-y; } .maplibregl-canvas-container.maplibregl-touch-drag-pan, .maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: pinch-zoom; } .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan, .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: none; } .maplibregl-marker { position: absolute; top: 0; left: 0; inline-size: max-content; min-inline-size: var(--lr-size-1-5rem); min-block-size: var(--lr-size-1-5rem); box-sizing: border-box; will-change: transform; } .maplibregl-marker[role='button'] { cursor: pointer; } .maplibregl-marker[role='button']:hover { filter: brightness(0.9); } .maplibregl-marker[role='button']:focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } .maplibregl-popup { position: absolute; top: 0; left: 0; z-index: var(--lr-layer-content); display: flex; will-change: transform; pointer-events: none; color: var(--lr-color-text); font-family: var(--lr-font); font-size: var(--lr-font-size-sm); line-height: var(--lr-line-height-normal); } .maplibregl-popup-anchor-top, .maplibregl-popup-anchor-top-left, .maplibregl-popup-anchor-top-right { flex-direction: column; } .maplibregl-popup-anchor-bottom, .maplibregl-popup-anchor-bottom-left, .maplibregl-popup-anchor-bottom-right { flex-direction: column-reverse; } .maplibregl-popup-anchor-left { flex-direction: row; } .maplibregl-popup-anchor-right { flex-direction: row-reverse; } .maplibregl-popup-tip { inline-size: 0; block-size: 0; border: var(--lr-size-0-625rem) solid transparent; z-index: var(--lr-layer-content); } .maplibregl-popup-anchor-top .maplibregl-popup-tip { align-self: center; border-block-start: none; border-block-end-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-top-left .maplibregl-popup-tip { align-self: flex-start; border-block-start: none; border-inline-start: none; border-block-end-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { align-self: flex-end; border-block-start: none; border-inline-end: none; border-block-end-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { align-self: center; border-block-end: none; border-block-start-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip { align-self: flex-start; border-block-end: none; border-inline-start: none; border-block-start-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { align-self: flex-end; border-block-end: none; border-inline-end: none; border-block-start-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-left .maplibregl-popup-tip { align-self: center; border-inline-start: none; border-inline-end-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-right .maplibregl-popup-tip { align-self: center; border-inline-end: none; border-inline-start-color: var(--lr-color-surface-overlay); } .maplibregl-popup-content { position: relative; min-inline-size: var(--lr-icon-button-size); padding: var(--lr-space-m); padding-inline-end: calc(var(--lr-icon-button-size) + var(--lr-space-xs)); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-radius); background: var(--lr-color-surface-overlay); box-shadow: var(--lr-shadow-m); pointer-events: auto; overflow-wrap: anywhere; } .maplibregl-popup-close-button { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: inline-flex; align-items: center; justify-content: center; ${iconHitTarget} padding: 0; border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text-quiet); font: inherit; cursor: pointer; transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } .maplibregl-popup-close-button:where(:hover) { background: var(--lr-map-popup-close-button-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-map-popup-close-button-hover-color, var(--lr-color-brand)); } .maplibregl-popup-close-button:where(:active) { background: var(--lr-map-popup-close-button-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))); color: var(--lr-map-popup-close-button-active-color, var(--lr-color-brand)); } .maplibregl-popup-close-button:where(:focus-visible) { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } [part='error'] { margin: 0; padding: var(--lr-space-l); color: var(--lr-color-danger); font-size: var(--lr-font-size-md-sm); text-align: center; } [part='legend'] { position: absolute; inset-block-end: calc(var(--lr-space-s) + var(--_lr-map-controls-bottom, calc(var(--lr-space-xs) * 0))); inset-inline-start: var(--lr-space-s); z-index: var(--lr-layer-content); display: flex; flex-direction: column; min-inline-size: 0; max-inline-size: calc(100% - var(--lr-space-s) - var(--lr-space-s)); max-block-size: calc(100% - var(--lr-space-s) - var(--lr-space-s) - var(--_lr-map-controls-bottom, calc(var(--lr-space-xs) * 0)) - var(--_lr-map-controls-top, calc(var(--lr-space-xs) * 0))); overflow: auto; scrollbar-gutter: stable; box-sizing: border-box; gap: var(--lr-space-xs); padding: var(--lr-space-xs) var(--lr-space-s); background: var(--lr-color-surface); color: var(--lr-color-text); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-radius); box-shadow: var(--lr-shadow-m); font-size: var(--lr-font-size-xs); } .legend-list { display: flex; flex-direction: column; gap: var(--lr-space-xs); min-inline-size: 0; } [part='legend'] [hidden] { display: none; } button[part='legend-disclosure'] { display: flex; align-items: center; align-self: flex-start; gap: var(--lr-space-xs); box-sizing: border-box; ${iconHitTarget} min-width: 0; max-inline-size: 100%; border: none; border-radius: var(--lr-radius-xs); padding: var(--lr-size-2px) var(--lr-space-xs); background: transparent; color: inherit; font: inherit; font-weight: var(--lr-font-weight-semibold); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: var(--lr-transition-interactive); } button[part='legend-disclosure'] > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; } button[part='legend-disclosure']:where(:hover) { background: color-mix(in srgb, var(--lr-color-text) 8%, transparent); } button[part='legend-disclosure']:where(:active) { background: color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)); } button[part='legend-disclosure']:where(:focus-visible) { ${focusRing} } [part='legend-disclosure-icon'] { display: inline-flex; flex: 0 0 auto; transition: transform var(--lr-transition-fast); } :host(:dir(rtl)) [part='legend-disclosure-icon'] { transform: rotate(180deg); } button[part='legend-disclosure'][aria-expanded='true'] [part='legend-disclosure-icon'], :host(:dir(rtl)) button[part='legend-disclosure'][aria-expanded='true'] [part='legend-disclosure-icon'] { transform: rotate(90deg); } .legend-gradient { display: flex; align-items: center; gap: var(--lr-space-xs); min-inline-size: 0; } .legend-gradient .gradient-bar { flex: 1 1 var(--lr-size-6rem); inline-size: var(--lr-size-6rem); min-inline-size: 0; block-size: var(--lr-size-0-5rem); border-radius: var(--lr-size-2px); } [part='legend-lo'], [part='legend-hi'] { flex: 0 0 auto; white-space: nowrap; } :host(:dir(rtl)) .legend-gradient .gradient-bar { transform: scaleX(-1); } .legend-group, .legend-section-list { display: flex; flex-direction: column; gap: var(--lr-space-xs); min-inline-size: 0; } [part='legend-group-heading'] { min-inline-size: 0; color: var(--lr-color-text-quiet); font-weight: var(--lr-font-weight-semibold); overflow-wrap: anywhere; } .legend-row { display: flex; align-items: center; gap: var(--lr-space-xs); min-inline-size: 0; } .legend-row > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; } button[part~='legend-toggle'] { display: flex; align-items: center; gap: var(--lr-space-xs); box-sizing: border-box; ${iconHitTarget} min-width: 0; max-inline-size: 100%; border: none; border-radius: var(--lr-radius-xs); padding: var(--lr-size-2px) var(--lr-space-xs); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: var(--lr-transition-interactive); } button[part~='legend-toggle'] > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; } button[part~='legend-toggle']:where(:hover) { background: color-mix(in srgb, var(--lr-color-text) 8%, transparent); } button[part~='legend-toggle']:where(:active) { background: color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)); } button[part~='legend-toggle']:where(:focus-visible) { ${focusRing} } button[part~='legend-toggle-hidden'] [part='legend-swatch'] { opacity: var(--lr-map-legend-hidden-swatch-opacity, 0.5); } button[part~='legend-toggle-hidden'] > span:last-child { color: var(--lr-color-text-quiet); } [part='legend-swatch'] { position: relative; overflow: hidden; inline-size: var(--lr-size-0-75rem); block-size: var(--lr-size-0-75rem); box-sizing: border-box; border: var(--lr-border-width-thin) solid currentColor; border-radius: var(--lr-size-2px); flex: 0 0 auto; } [part='legend-swatch'][data-pattern='diagonal'] { border-style: dashed; } [part='legend-swatch'][data-pattern='dots'] { border-style: dotted; border-radius: 50%; } [part='legend-swatch'][data-pattern='crosshatch'] { border-style: double; border-radius: 0; } [part='legend-swatch'][data-pattern='diagonal']::before, [part='legend-swatch'][data-pattern='crosshatch']::before, [part='legend-swatch'][data-pattern='crosshatch']::after, [part='legend-swatch'][data-pattern='dots']::before { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 150%; block-size: var(--lr-border-width-thin); background: currentColor; transform: translate(-50%, -50%) rotate(-45deg); } [part='legend-swatch'][data-pattern='crosshatch']::after { transform: translate(-50%, -50%) rotate(45deg); } [part='legend-swatch'][data-pattern='dots']::before { inline-size: var(--lr-size-2px); block-size: var(--lr-size-2px); border-radius: 50%; transform: translate(-50%, -50%); } [part='legend-swatch'][data-pattern][data-icon='true'] { inline-size: var(--lr-size-1rem); block-size: var(--lr-size-1rem); border: none; border-radius: 0; background: none; } [part='legend-swatch'][data-icon='true']::before, [part='legend-swatch'][data-icon='true']::after { content: none; } .legend-icon { display: block; inline-size: 100%; block-size: 100%; } [part='legend-limit'] { min-inline-size: 0; padding-block-start: var(--lr-space-xs); border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); color: var(--lr-color-text-quiet); overflow-wrap: anywhere; } .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { position: absolute; display: flex; flex-direction: column; align-items: flex-start; max-inline-size: 100%; z-index: var(--lr-layer-content); pointer-events: none; } .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-right { align-items: flex-end; } .maplibregl-control-container:where(:has(.maplibregl-ctrl-top-left:not(:empty))):where(:has(.maplibregl-ctrl-top-right:not(:empty))) :where(.maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right), .maplibregl-control-container:where(:has(.maplibregl-ctrl-bottom-left:not(:empty))):where(:has(.maplibregl-ctrl-bottom-right:not(:empty))) :where(.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right) { max-inline-size: 50%; } .maplibregl-ctrl-top-left { inset-block-start: 0; inset-inline-start: 0; } .maplibregl-ctrl-top-right { inset-block-start: 0; inset-inline-end: 0; } .maplibregl-ctrl-bottom-left { inset-block-end: 0; inset-inline-start: 0; } .maplibregl-ctrl-bottom-right { inset-block-end: 0; inset-inline-end: 0; } .maplibregl-ctrl { box-sizing: border-box; max-inline-size: calc(100% - 2 * var(--lr-space-xs)); flex-shrink: 0; margin: var(--lr-space-xs); pointer-events: auto; transform: translate(0); } .maplibregl-ctrl-attrib { position: relative; padding: 0 var(--lr-space-xs); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-xs); } .maplibregl-ctrl-group { position: relative; display: flex; flex-direction: column; inline-size: fit-content; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); box-shadow: var(--lr-shadow); color: var(--lr-color-text); } .maplibregl-ctrl-group button { display: grid; place-items: center; ${iconHitTarget} padding: var(--lr-space-xs); border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } .maplibregl-ctrl-group button:where(:not(:first-child)) { border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border); } .maplibregl-ctrl-group button:hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); color: var(--lr-color-brand); } .maplibregl-ctrl-group button:active:where(:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } .maplibregl-ctrl-group button:focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } .maplibregl-ctrl-group button:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } .maplibregl-ctrl-icon { display: grid; place-items: center; inline-size: var(--lr-size-1em); block-size: var(--lr-size-1em); font-size: var(--lr-font-size-lg); line-height: var(--lr-line-height-none); } .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before { content: '+'; } .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before { content: '−'; } .maplibregl-ctrl-compass .maplibregl-ctrl-icon::before { content: '▲'; } .maplibregl-ctrl-scale { position: relative; box-sizing: border-box; min-inline-size: max-content; padding: var(--lr-space-2xs) var(--lr-space-xs); padding-block-end: calc(var(--lr-space-2xs) + var(--lr-space-xs)); background: var(--lr-color-surface); color: var(--lr-color-text); font-family: var(--lr-font); font-size: var(--lr-font-size-xs); text-align: center; white-space: nowrap; } .maplibregl-ctrl-scale::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: 0; box-sizing: border-box; inline-size: var(--_lr-map-scale-width, 100%); block-size: var(--lr-space-xs); border: var(--lr-border-width-medium) solid currentColor; border-block-start: 0; pointer-events: none; } .maplibregl-ctrl-attrib a { color: var(--lr-color-text-quiet); text-decoration: none; } .maplibregl-ctrl-attrib a:hover { text-decoration: underline; } .maplibregl-ctrl-attrib-inner { overflow-wrap: anywhere; } .maplibregl-ctrl-attrib-button { display: none; position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: var(--lr-icon-button-size); block-size: var(--lr-icon-button-size); padding: 0; border: 0; border-radius: var(--lr-radius-pill); background: transparent; color: var(--lr-color-text); cursor: pointer; place-items: center; transition: background-color var(--lr-transition-fast); } .maplibregl-ctrl-attrib-button::before { content: ''; display: block; inline-size: var(--lr-size-1rem); block-size: var(--lr-size-1rem); background: currentColor; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Ccircle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/%3E%3Cpath d="M12 10v7m0-10v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/%3E%3C/svg%3E') center / contain no-repeat; } .maplibregl-ctrl-attrib.maplibregl-compact { position: relative; min-block-size: var(--lr-icon-button-size); padding-inline-end: var(--lr-icon-button-size); } .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { display: none; } .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button { display: grid; } .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { display: block; } .maplibregl-ctrl-attrib-button:hover, .maplibregl-ctrl-attrib-button:active, .maplibregl-ctrl-attrib:where([open]) .maplibregl-ctrl-attrib-button { background: var(--lr-color-brand-quiet); } .maplibregl-ctrl-attrib-button:focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } .maplibregl-ctrl-attrib summary { list-style: none; appearance: none; -webkit-appearance: none; } .maplibregl-ctrl-attrib summary::-webkit-details-marker { display: none; } .maplibregl-ctrl-attrib summary::marker { content: ''; } ${glassSurface(".maplibregl-ctrl-group, .maplibregl-ctrl-scale, .maplibregl-ctrl-attrib",css`var(--lr-color-surface)`)} ${glassScrollLayerStyles} [part='legend'] > .glass-scroll-layer { margin-block-end: calc(-1 * var(--lr-space-xs)); } ${glassSurface('[part="legend"]',css`var(--lr-color-surface)`,css`var(--lr-color-surface)`,!0)} @media (forced-colors: active) { .maplibregl-ctrl-attrib-button { color: ButtonText; } .maplibregl-ctrl-attrib-button::before { forced-color-adjust: none; } [part='legend-swatch'] { background: Canvas !important; border-color: CanvasText; color: CanvasText; } [part='legend-swatch'][data-pattern='solid'] { background: CanvasText !important; } [part='legend-swatch'][data-pattern][data-icon='true'] { background: Canvas !important; } button[part~='legend-toggle-hidden'] { text-decoration-line: line-through; text-decoration-thickness: var(--lr-border-width-medium); } } `;export{styles};
+import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";const styles=css` :host { display: block; position: relative; inline-size: 100%; block-size: var(--lr-map-height, var(--lr-size-24rem)); } [part='base'] { position: relative; inline-size: 100%; block-size: 100%; } lr-skeleton { --lr-skeleton-w: 100%; --lr-skeleton-h: 100%; } [part='container'] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: hidden; } .maplibregl-canvas-container { inline-size: 100%; block-size: 100%; } .maplibregl-canvas { position: absolute; inset-block-start: 0; inset-inline-start: 0; } .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; user-select: none; } .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; } .maplibregl-canvas-container.maplibregl-touch-zoom-rotate, .maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas { touch-action: pan-x pan-y; } .maplibregl-canvas-container.maplibregl-touch-drag-pan, .maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: pinch-zoom; } .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan, .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: none; } .maplibregl-marker { color: var(--lr-color-brand); position: absolute; top: 0; left: 0; inline-size: max-content; min-inline-size: var(--lr-size-1-5rem); min-block-size: var(--lr-size-1-5rem); box-sizing: border-box; will-change: transform; } .maplibregl-marker[role='button'] { cursor: pointer; } .maplibregl-marker[role='button']:hover { filter: brightness(0.9); } .maplibregl-marker[role='button']:focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } .maplibregl-popup { position: absolute; top: 0; left: 0; z-index: var(--lr-layer-content); display: flex; will-change: transform; pointer-events: none; color: var(--lr-color-text); font-family: var(--lr-font); font-size: var(--lr-font-size-sm); line-height: var(--lr-line-height-normal); } .maplibregl-popup-anchor-top, .maplibregl-popup-anchor-top-left, .maplibregl-popup-anchor-top-right { flex-direction: column; } .maplibregl-popup-anchor-bottom, .maplibregl-popup-anchor-bottom-left, .maplibregl-popup-anchor-bottom-right { flex-direction: column-reverse; } .maplibregl-popup-anchor-left { flex-direction: row; } .maplibregl-popup-anchor-right { flex-direction: row-reverse; } .maplibregl-popup-tip { inline-size: 0; block-size: 0; border: var(--lr-size-0-625rem) solid transparent; z-index: var(--lr-layer-content); } .maplibregl-popup-anchor-top .maplibregl-popup-tip { align-self: center; border-block-start: none; border-block-end-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-top-left .maplibregl-popup-tip { align-self: flex-start; border-block-start: none; border-inline-start: none; border-block-end-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { align-self: flex-end; border-block-start: none; border-inline-end: none; border-block-end-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { align-self: center; border-block-end: none; border-block-start-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip { align-self: flex-start; border-block-end: none; border-inline-start: none; border-block-start-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { align-self: flex-end; border-block-end: none; border-inline-end: none; border-block-start-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-left .maplibregl-popup-tip { align-self: center; border-inline-start: none; border-inline-end-color: var(--lr-color-surface-overlay); } .maplibregl-popup-anchor-right .maplibregl-popup-tip { align-self: center; border-inline-end: none; border-inline-start-color: var(--lr-color-surface-overlay); } .maplibregl-popup-content { position: relative; min-inline-size: var(--lr-icon-button-size); padding: var(--lr-space-m); padding-inline-end: calc(var(--lr-icon-button-size) + var(--lr-space-xs)); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-radius); background: var(--lr-color-surface-overlay); box-shadow: var(--lr-shadow-m); pointer-events: auto; overflow-wrap: anywhere; } .maplibregl-popup-close-button { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: inline-flex; align-items: center; justify-content: center; ${iconHitTarget} padding: 0; border: 0; border-radius: var(--lr-radius); background: transparent; color: var(--lr-color-text-quiet); font: inherit; cursor: pointer; transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } .maplibregl-popup-close-button:where(:hover) { background: var(--lr-map-popup-close-button-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-map-popup-close-button-hover-color, var(--lr-color-brand)); } .maplibregl-popup-close-button:where(:active) { background: var(--lr-map-popup-close-button-active-bg, color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))); color: var(--lr-map-popup-close-button-active-color, var(--lr-color-brand)); } .maplibregl-popup-close-button:where(:focus-visible) { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } [part='error'] { margin: 0; padding: var(--lr-space-l); color: var(--lr-color-danger); font-size: var(--lr-font-size-md-sm); text-align: center; } [part='legend'] { position: absolute; inset-block-end: calc(var(--lr-space-s) + var(--_lr-map-controls-bottom, calc(var(--lr-space-xs) * 0))); inset-inline-start: var(--lr-space-s); z-index: var(--lr-layer-content); display: flex; flex-direction: column; min-inline-size: 0; max-inline-size: calc(100% - var(--lr-space-s) - var(--lr-space-s)); max-block-size: calc(100% - var(--lr-space-s) - var(--lr-space-s) - var(--_lr-map-controls-bottom, calc(var(--lr-space-xs) * 0)) - var(--_lr-map-controls-top, calc(var(--lr-space-xs) * 0))); overflow: auto; scrollbar-gutter: stable; box-sizing: border-box; gap: var(--lr-space-xs); padding: var(--lr-space-xs) var(--lr-space-s); background: var(--lr-color-surface); color: var(--lr-color-text); border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-radius); box-shadow: var(--lr-shadow-m); font-size: var(--lr-font-size-xs); } .legend-list { display: flex; flex-direction: column; gap: var(--lr-space-xs); min-inline-size: 0; } [part='legend'] [hidden] { display: none; } button[part='legend-disclosure'] { display: flex; align-items: center; align-self: flex-start; gap: var(--lr-space-xs); box-sizing: border-box; ${iconHitTarget} min-width: 0; max-inline-size: 100%; border: none; border-radius: var(--lr-radius-xs); padding: var(--lr-size-2px) var(--lr-space-xs); background: transparent; color: inherit; font: inherit; font-weight: var(--lr-font-weight-semibold); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: var(--lr-transition-interactive); } button[part='legend-disclosure'] > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; } button[part='legend-disclosure']:where(:hover) { background: color-mix(in srgb, var(--lr-color-text) 8%, transparent); } button[part='legend-disclosure']:where(:active) { background: color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)); } button[part='legend-disclosure']:where(:focus-visible) { ${focusRing} } [part='legend-disclosure-icon'] { display: inline-flex; flex: 0 0 auto; transition: transform var(--lr-transition-fast); } :host(:dir(rtl)) [part='legend-disclosure-icon'] { transform: rotate(180deg); } button[part='legend-disclosure'][aria-expanded='true'] [part='legend-disclosure-icon'], :host(:dir(rtl)) button[part='legend-disclosure'][aria-expanded='true'] [part='legend-disclosure-icon'] { transform: rotate(90deg); } .legend-gradient { display: flex; align-items: center; gap: var(--lr-space-xs); min-inline-size: 0; } .legend-gradient .gradient-bar { flex: 1 1 var(--lr-size-6rem); inline-size: var(--lr-size-6rem); min-inline-size: 0; block-size: var(--lr-size-0-5rem); border-radius: var(--lr-size-2px); } [part='legend-lo'], [part='legend-hi'] { flex: 0 0 auto; white-space: nowrap; } :host(:dir(rtl)) .legend-gradient .gradient-bar { transform: scaleX(-1); } .legend-group, .legend-section-list { display: flex; flex-direction: column; gap: var(--lr-space-xs); min-inline-size: 0; } [part='legend-group-heading'] { min-inline-size: 0; color: var(--lr-color-text-quiet); font-weight: var(--lr-font-weight-semibold); overflow-wrap: anywhere; } .legend-row { display: flex; align-items: center; gap: var(--lr-space-xs); min-inline-size: 0; } .legend-row > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; } button[part~='legend-toggle'] { display: flex; align-items: center; gap: var(--lr-space-xs); box-sizing: border-box; ${iconHitTarget} min-width: 0; max-inline-size: 100%; border: none; border-radius: var(--lr-radius-xs); padding: var(--lr-size-2px) var(--lr-space-xs); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: var(--lr-transition-interactive); } button[part~='legend-toggle'] > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; } button[part~='legend-toggle']:where(:hover) { background: color-mix(in srgb, var(--lr-color-text) 8%, transparent); } button[part~='legend-toggle']:where(:active) { background: color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)); } button[part~='legend-toggle']:where(:focus-visible) { ${focusRing} } button[part~='legend-toggle-hidden'] [part='legend-swatch'] { opacity: var(--lr-map-legend-hidden-swatch-opacity, 0.5); } button[part~='legend-toggle-hidden'] > span:last-child { color: var(--lr-color-text-quiet); } [part='legend-swatch'] { position: relative; overflow: hidden; inline-size: var(--lr-size-0-75rem); block-size: var(--lr-size-0-75rem); box-sizing: border-box; border: var(--lr-border-width-thin) solid currentColor; border-radius: var(--lr-size-2px); flex: 0 0 auto; } [part='legend-swatch'][data-pattern='diagonal'] { border-style: dashed; } [part='legend-swatch'][data-pattern='dots'] { border-style: dotted; border-radius: 50%; } [part='legend-swatch'][data-pattern='crosshatch'] { border-style: double; border-radius: 0; } [part='legend-swatch'][data-pattern='diagonal']::before, [part='legend-swatch'][data-pattern='crosshatch']::before, [part='legend-swatch'][data-pattern='crosshatch']::after, [part='legend-swatch'][data-pattern='dots']::before { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 150%; block-size: var(--lr-border-width-thin); background: currentColor; transform: translate(-50%, -50%) rotate(-45deg); } [part='legend-swatch'][data-pattern='crosshatch']::after { transform: translate(-50%, -50%) rotate(45deg); } [part='legend-swatch'][data-pattern='dots']::before { inline-size: var(--lr-size-2px); block-size: var(--lr-size-2px); border-radius: 50%; transform: translate(-50%, -50%); } [part='legend-swatch'][data-pattern][data-icon='true'] { inline-size: var(--lr-size-1rem); block-size: var(--lr-size-1rem); border: none; border-radius: 0; background: none; } [part='legend-swatch'][data-icon='true']::before, [part='legend-swatch'][data-icon='true']::after { content: none; } .legend-icon { display: block; inline-size: 100%; block-size: 100%; } [part='legend-limit'] { min-inline-size: 0; padding-block-start: var(--lr-space-xs); border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); color: var(--lr-color-text-quiet); overflow-wrap: anywhere; } .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { position: absolute; display: flex; flex-direction: column; align-items: flex-start; max-inline-size: 100%; z-index: var(--lr-layer-content); pointer-events: none; } .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-right { align-items: flex-end; } .maplibregl-control-container:where(:has(.maplibregl-ctrl-top-left:not(:empty))):where(:has(.maplibregl-ctrl-top-right:not(:empty))) :where(.maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right), .maplibregl-control-container:where(:has(.maplibregl-ctrl-bottom-left:not(:empty))):where(:has(.maplibregl-ctrl-bottom-right:not(:empty))) :where(.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right) { max-inline-size: 50%; } .maplibregl-ctrl-top-left { inset-block-start: 0; inset-inline-start: 0; } .maplibregl-ctrl-top-right { inset-block-start: 0; inset-inline-end: 0; } .maplibregl-ctrl-bottom-left { inset-block-end: 0; inset-inline-start: 0; } .maplibregl-ctrl-bottom-right { inset-block-end: 0; inset-inline-end: 0; } .maplibregl-ctrl { box-sizing: border-box; max-inline-size: calc(100% - 2 * var(--lr-space-xs)); flex-shrink: 0; margin: var(--lr-space-xs); pointer-events: auto; transform: translate(0); } .maplibregl-ctrl-attrib { position: relative; padding: 0 var(--lr-space-xs); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-xs); } .maplibregl-ctrl-group { position: relative; display: flex; flex-direction: column; inline-size: fit-content; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); box-shadow: var(--lr-shadow); color: var(--lr-color-text); } .maplibregl-ctrl-group button { display: grid; place-items: center; ${iconHitTarget} padding: var(--lr-space-xs); border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color var(--lr-transition-fast), color var(--lr-transition-fast); } .maplibregl-ctrl-group button:where(:not(:first-child)) { border-block-start: var(--lr-border-width-thin) solid var(--lr-color-border); } .maplibregl-ctrl-group button:hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); color: var(--lr-color-brand); } .maplibregl-ctrl-group button:active:where(:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } .maplibregl-ctrl-group button:focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } .maplibregl-ctrl-group button:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } .maplibregl-ctrl-icon { display: grid; place-items: center; inline-size: var(--lr-size-1em); block-size: var(--lr-size-1em); font-size: var(--lr-font-size-lg); line-height: var(--lr-line-height-none); } .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before { content: '+'; } .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before { content: '−'; } .maplibregl-ctrl-compass .maplibregl-ctrl-icon::before { content: '▲'; } .maplibregl-ctrl-scale { position: relative; box-sizing: border-box; min-inline-size: max-content; padding: var(--lr-space-2xs) var(--lr-space-xs); padding-block-end: calc(var(--lr-space-2xs) + var(--lr-space-xs)); background: var(--lr-color-surface); color: var(--lr-color-text); font-family: var(--lr-font); font-size: var(--lr-font-size-xs); text-align: center; white-space: nowrap; } .maplibregl-ctrl-scale::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-end: 0; box-sizing: border-box; inline-size: var(--_lr-map-scale-width, 100%); block-size: var(--lr-space-xs); border: var(--lr-border-width-medium) solid currentColor; border-block-start: 0; pointer-events: none; } .maplibregl-ctrl-attrib a { color: var(--lr-color-text-quiet); text-decoration: none; } .maplibregl-ctrl-attrib a:hover { text-decoration: underline; } .maplibregl-ctrl-attrib-inner { overflow-wrap: anywhere; } .maplibregl-ctrl-attrib-button { display: none; position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: var(--lr-icon-button-size); block-size: var(--lr-icon-button-size); padding: 0; border: 0; border-radius: var(--lr-radius-pill); background: transparent; color: var(--lr-color-text); cursor: pointer; place-items: center; transition: background-color var(--lr-transition-fast); } .maplibregl-ctrl-attrib-button::before { content: ''; display: block; inline-size: var(--lr-size-1rem); block-size: var(--lr-size-1rem); background: currentColor; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Ccircle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/%3E%3Cpath d="M12 10v7m0-10v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/%3E%3C/svg%3E') center / contain no-repeat; } .maplibregl-ctrl-attrib.maplibregl-compact { position: relative; min-block-size: var(--lr-icon-button-size); padding-inline-end: var(--lr-icon-button-size); } .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { display: none; } .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button { display: grid; } .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { display: block; } .maplibregl-ctrl-attrib-button:hover, .maplibregl-ctrl-attrib-button:active, .maplibregl-ctrl-attrib:where([open]) .maplibregl-ctrl-attrib-button { background: var(--lr-color-brand-quiet); } .maplibregl-ctrl-attrib-button:focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * var(--lr-focus-ring-offset)); } .maplibregl-ctrl-attrib summary { list-style: none; appearance: none; -webkit-appearance: none; } .maplibregl-ctrl-attrib summary::-webkit-details-marker { display: none; } .maplibregl-ctrl-attrib summary::marker { content: ''; } ${glassSurface(".maplibregl-ctrl-group, .maplibregl-ctrl-scale, .maplibregl-ctrl-attrib",css`var(--lr-color-surface)`)} ${glassScrollLayerStyles} [part='legend'] > .glass-scroll-layer { margin-block-end: calc(-1 * var(--lr-space-xs)); } ${glassSurface('[part="legend"]',css`var(--lr-color-surface)`,css`var(--lr-color-surface)`,!0)} @media (forced-colors: active) { .maplibregl-ctrl-attrib-button { color: ButtonText; } .maplibregl-ctrl-attrib-button::before { forced-color-adjust: none; } [part='legend-swatch'] { background: Canvas !important; border-color: CanvasText; color: CanvasText; } [part='legend-swatch'][data-pattern='solid'] { background: CanvasText !important; } [part='legend-swatch'][data-pattern][data-icon='true'] { background: Canvas !important; } button[part~='legend-toggle-hidden'] { text-decoration-line: line-through; text-decoration-thickness: var(--lr-border-width-medium); } } `;export{styles};

package/dist/components/media/video-playlist/video-playlist.class.d.ts

@@ -15,7 +15,8 @@ readonly unavailable?:boolean;}export interface LyraVideoPlaylistChangeDetail{re
 * `repeat="one"` restarts the current video and `repeat="all"` wraps the final video to the first.
 * `items` can seed deterministic playlist-row metadata for server rendering. Seeded rows are
 * visible but disabled until the browser can adopt the indexed direct video children; live child
-* metadata is authoritative after that corrective update.
+* metadata is authoritative after that corrective update. Later interactions do not inspect the
+* obsolete seed, even when all adopted children are subsequently removed.
 *
 * A child marked `inert` is unavailable: it never becomes the active video,
 * `next()`/`previous()`/automatic advancement step past it, and its playlist row renders `disabled` so the

package/dist/components/media/video-playlist/video-playlist.class.js

@@ -29,7 +29,7 @@ import{__decorate}from"tslib";import{eventCollectionSupport}from"../../../intern
           </span>
         </button>
       </li>
-    `}render(){const explicitHostLabel=hostAriaLabel(this),label=explicitHostLabel===null?this.localize("videoPlaylistLabel"):explicitHostLabel===""?"":this.localize("videoPlaylistLabel"),seededItems=Array.isArray(this.items)?this.items.filter(item=>item!==null&&typeof item=="object"):[],seededCurrent=seededItems.findIndex(item=>item.unavailable!==!0),rows=this.liveChildrenReady?this.playlistVideos.map((video,index)=>this.renderItem({title:video.title,poster:video.poster,duration:video.duration,unavailable:!this.isEnabled(video)},index,video===this.activeVideo,!this.isEnabled(video))):seededItems.map((item,index)=>this.renderItem(item,index,index===seededCurrent,!0));return html`
+    `}render(){const explicitHostLabel=hostAriaLabel(this),label=explicitHostLabel===null?this.localize("videoPlaylistLabel"):explicitHostLabel===""?"":this.localize("videoPlaylistLabel"),seededItems=!this.liveChildrenReady&&Array.isArray(this.items)?this.items.filter(item=>item!==null&&typeof item=="object"):[],seededCurrent=seededItems.findIndex(item=>item.unavailable!==!0),rows=this.liveChildrenReady?this.playlistVideos.map((video,index)=>this.renderItem({title:video.title,poster:video.poster,duration:video.duration,unavailable:!this.isEnabled(video)},index,video===this.activeVideo,!this.isEnabled(video))):seededItems.map((item,index)=>this.renderItem(item,index,index===seededCurrent,!0));return html`
       <div part="base video-playlist">
         <div data-video-stage>
           <slot @slotchange=${this.onSlotChange}></slot>

package/dist/components/overlays/chip/chip.class.d.ts

@@ -143,4 +143,4 @@ value?:string;
 /** Wraps a long label onto multiple lines instead of ellipsis-truncating it to one, matching
 *  `<lr-suggestion-chips>`'s identical opt-in. `false` (the default) reproduces today's exact
 *  single-line, ellipsis-truncated `[part="label"]`. */
-wrap:boolean;private readonly slotPresence;private cachedLabelText;private readonly labelTextObserver;private managedActionGroupRole;private pendingControlFocusRepair?;private readonly onLabelSlotChange;connectedCallback():void;private get tracksActionLabel();private syncLabelObservation;disconnectedCallback():void;adoptedCallback():void;private computeLabelText;private recomputeLabelText;private get accessibleToggleLabel();private get accessibleRemoveLabel();private onRemoveClick;private onToggleClick;private get primaryControl();focus(options?:FocusOptions):void;blur():void;click():void;protected willUpdate(changed:PropertyValues<this>):void;protected updated(changed:PropertyValues<this>):void;private syncHostActionRole;private releaseHostActionRole;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-chip':LyraChip;}}
+wrap:boolean;private readonly slotPresence;private cachedLabelText;private readonly labelTextObserver;private labelObservationReady;private pendingInitialLabelObservation?;private managedActionGroupRole;private pendingControlFocusRepair?;private readonly onLabelSlotChange;connectedCallback():void;private get tracksActionLabel();private syncLabelObservation;private scheduleInitialLabelObservation;disconnectedCallback():void;adoptedCallback():void;private computeLabelText;private recomputeLabelText;private get accessibleToggleLabel();private get accessibleRemoveLabel();private onRemoveClick;private onToggleClick;private get primaryControl();focus(options?:FocusOptions):void;blur():void;click():void;protected willUpdate(changed:PropertyValues<this>):void;protected updated(changed:PropertyValues<this>):void;private syncHostActionRole;private releaseHostActionRole;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-chip':LyraChip;}}

package/dist/components/overlays/chip/chip.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{applyComposedFocusRepair,captureComposedFocusRepair,nearestExternalFocusTarget}from"../../../internal/focus-navigation.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{closeIcon}from"../../../internal/icons.js";import{literalSetConverter}from"../../../internal/converters.js";import{semanticVariantConverter}from"../../../internal/semantic-variant.js";import{variants}from"../../../internal/variants.styles.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./chip.styles.js";import{LYRA_DEFAULT_remove,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_select}from"../../../internal/default-strings/shared.generated.js";const CHIP_SIZE=literalSetConverter(["3xs","2xs","xs","s","m","l","xl","small","medium","large"],"m"),CHIP_VARIANT=semanticVariantConverter("neutral");function sourceParent(node){if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root?root.host:null}function isClosedSourceDetailsBranch(details,branch){return details.localName!=="details"||details.hasAttribute("open")||branch===null?!1:Array.from(details.children).find(child=>child.localName==="summary")!==branch}function isSourceLabelAvailable(node){const target=node.nodeType===1?node:sourceParent(node);if(!target?.isConnected)return!1;let branch=target,current=sourceParent(target);if(isAccessibilitySubtreeExcluded(target))return!1;for(;current;){if(isAccessibilitySubtreeExcluded(current)||isClosedSourceDetailsBranch(current,branch))return!1;branch=current,current=sourceParent(current)}return!0}class LyraChip extends LyraElement{constructor(){super(...arguments),this._size="m",this._variant="neutral",this.removable=!1,this.disabled=!1,this.pill=!1,this.selected=!1,this.toggleable=!1,this.wrap=!1,this.slotPresence=new SlotPresenceController(this),this.cachedLabelText="",this.labelTextObserver=new AccessibleTextController(this,[""],()=>{this.syncHostActionRole(),this.updateBrowserDerivedState(()=>this.recomputeLabelText())},["slot","role"],!1),this.managedActionGroupRole=!1,this.onLabelSlotChange=event=>{const target=event.target;target?.nodeType!==1||target.localName!=="slot"||this.tracksActionLabel&&(this.labelTextObserver.bind(),this.updateBrowserDerivedState(()=>this.recomputeLabelText()))},this.onRemoveClick=()=>{if(this.disabled)return;const repair=captureComposedFocusRepair(this,()=>nearestExternalFocusTarget(this));this.emit("lr-remove",{value:this.value}),repair&&(!this.isConnected||!this.removable)&&applyComposedFocusRepair(repair)},this.onToggleClick=()=>{if(this.disabled)return;const selected=!this.selected;this.emit("lr-chip-toggle-request",{value:this.value,selected},{cancelable:!0}).defaultPrevented||(this.selected=selected,this.emit("lr-chip-change",{value:this.value,selected}))}}static{this.defaultStrings={...super.defaultStrings,remove:LYRA_DEFAULT_remove,removeWithContext:LYRA_DEFAULT_removeWithContext,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,variants,styles]}get size(){return this._size}set size(next){const normalized=CHIP_SIZE.normalizeReflected(this,"size",next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}get variant(){return this._variant}set variant(next){const normalized=CHIP_VARIANT.normalizeReflected(this,"variant",next),old=this._variant;old!==normalized&&(this._variant=normalized,this.requestUpdate("variant",old))}get withRemove(){return this.removable}set withRemove(next){this.removable=!!next}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onLabelSlotChange),this.syncLabelObservation();const sampleBrowserState=()=>{this.tracksActionLabel&&this.recomputeLabelText(!0,!0)};this.hasUpdated?(sampleBrowserState(),this.ownerDocument.defaultView?.queueMicrotask(()=>{this.isConnected&&this.tracksActionLabel&&this.recomputeLabelText()})):this.seedFirstRenderState(sampleBrowserState)}get tracksActionLabel(){return this.toggleable||this.removable}syncLabelObservation(){this.labelTextObserver.setEnabled(this.tracksActionLabel)}disconnectedCallback(){this.removeEventListener("slotchange",this.onLabelSlotChange),this.releaseHostActionRole(),this.pendingControlFocusRepair=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted()}computeLabelText(preferLightDom=!1){const slot=this.renderRoot?.querySelector("slot:not([name])"),lightDomNodes=this.childNodes,assigned=slot?.assignedNodes({flatten:!0})??[],direct=Array.from(lightDomNodes??[]).filter(node=>node.nodeType!==1||(node.getAttribute("slot")??"")==="");return(!preferLightDom&&assigned.length>0?assigned:direct).map(node=>composedAccessibilityText(node,{ancestorBoundary:this,isSubtreeExcluded:element=>element.getRootNode()===this.renderRoot&&element.getAttribute("part")?.split(/\s+/).includes("label")?!1:isAccessibilitySubtreeExcluded(element),requireRendered:preferLightDom?!1:node.nodeType!==1||node.localName!=="slot",shouldPruneNode:candidate=>!this.contains(candidate)&&!isSourceLabelAvailable(candidate),ignoreInheritedVisibility:!0})).join(" ").replace(/\s+/g," ").trim()}recomputeLabelText(request=!0,preferLightDom=!1){const next=this.computeLabelText(preferLightDom);next!==this.cachedLabelText&&(this.cachedLabelText=next,request&&this.requestUpdate())}get accessibleToggleLabel(){return this.cachedLabelText||this.localize("select")}get accessibleRemoveLabel(){const text=this.cachedLabelText;return text?this.localize("removeWithContext",void 0,{label:text}):this.localize("remove")}get primaryControl(){return this.renderRoot.querySelector(this.removable?'[part="remove-button"]':'[part="toggle-button"]')}focus(options){this.primaryControl?.focus(options)}blur(){this.primaryControl?.blur()}click(){const control=this.primaryControl;control?control.click():super.click()}willUpdate(changed){if(super.willUpdate(changed),changed.has("removable")&&!this.removable&&this.removeAttribute("with-remove"),(changed.has("removable")||changed.has("toggleable"))&&(this.syncLabelObservation(),this.hasUpdated&&(this.tracksActionLabel?this.recomputeLabelText(!1):this.cachedLabelText="")),this.pendingControlFocusRepair)return;const oldRemovable=changed.get("removable")??this.removable,oldToggleable=changed.get("toggleable")??this.toggleable,oldDisabled=changed.get("disabled")??this.disabled,oldMode=oldRemovable?"remove":oldToggleable?"toggle":"passive",newMode=this.removable?"remove":this.toggleable?"toggle":"passive";oldMode===newMode&&!(oldDisabled===!1&&this.disabled)||(this.pendingControlFocusRepair=captureComposedFocusRepair(this,()=>nearestExternalFocusTarget(this)??this.renderRoot.querySelector('[part="remove-button"], [part="toggle-button"]'))??void 0)}updated(changed){super.updated(changed),this.syncHostActionRole();const repair=this.pendingControlFocusRepair;if(this.pendingControlFocusRepair=void 0,!repair)return;const replacement=this.disabled?null:this.primaryControl;applyComposedFocusRepair(repair,replacement??repair.candidate)}syncHostActionRole(){const needsGroup=this.tracksActionLabel&&this.hasAttribute("aria-label");needsGroup&&!this.hasAttribute("role")?(this.setAttribute("role","group"),this.managedActionGroupRole=!0):needsGroup||this.releaseHostActionRole()}releaseHostActionRole(){this.managedActionGroupRole&&this.getAttribute("role")==="group"&&this.removeAttribute("role"),this.managedActionGroupRole=!1}render(){const toggleMode=this.toggleable&&!this.removable,pressed=this.selected&&!this.removable;return html`
+import{__decorate}from"tslib";import{AccessibleTextController}from"../../../internal/accessible-text-controller.js";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{composedAccessibilityText,isAccessibilitySubtreeExcluded}from"../../../internal/accessibility-visibility.js";import{applyComposedFocusRepair,captureComposedFocusRepair,nearestExternalFocusTarget}from"../../../internal/focus-navigation.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{closeIcon}from"../../../internal/icons.js";import{literalSetConverter}from"../../../internal/converters.js";import{semanticVariantConverter}from"../../../internal/semantic-variant.js";import{variants}from"../../../internal/variants.styles.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./chip.styles.js";import{LYRA_DEFAULT_remove,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_select}from"../../../internal/default-strings/shared.generated.js";const CHIP_SIZE=literalSetConverter(["3xs","2xs","xs","s","m","l","xl","small","medium","large"],"m"),CHIP_VARIANT=semanticVariantConverter("neutral");function sourceParent(node){if(node.parentElement)return node.parentElement;const root=node.getRootNode();return"host"in root?root.host:null}function isClosedSourceDetailsBranch(details,branch){return details.localName!=="details"||details.hasAttribute("open")||branch===null?!1:Array.from(details.children).find(child=>child.localName==="summary")!==branch}function isSourceLabelAvailable(node){const target=node.nodeType===1?node:sourceParent(node);if(!target?.isConnected)return!1;let branch=target,current=sourceParent(target);if(isAccessibilitySubtreeExcluded(target))return!1;for(;current;){if(isAccessibilitySubtreeExcluded(current)||isClosedSourceDetailsBranch(current,branch))return!1;branch=current,current=sourceParent(current)}return!0}class LyraChip extends LyraElement{constructor(){super(...arguments),this._size="m",this._variant="neutral",this.removable=!1,this.disabled=!1,this.pill=!1,this.selected=!1,this.toggleable=!1,this.wrap=!1,this.slotPresence=new SlotPresenceController(this),this.cachedLabelText="",this.labelTextObserver=new AccessibleTextController(this,[""],()=>{this.syncHostActionRole(),this.updateBrowserDerivedState(()=>this.recomputeLabelText())},["slot","role"],!1),this.labelObservationReady=!1,this.managedActionGroupRole=!1,this.onLabelSlotChange=event=>{const target=event.target;target?.nodeType!==1||target.localName!=="slot"||this.tracksActionLabel&&(this.labelTextObserver.bind(),this.updateBrowserDerivedState(()=>this.recomputeLabelText()))},this.onRemoveClick=()=>{if(this.disabled)return;const repair=captureComposedFocusRepair(this,()=>nearestExternalFocusTarget(this));this.emit("lr-remove",{value:this.value}),repair&&(!this.isConnected||!this.removable)&&applyComposedFocusRepair(repair)},this.onToggleClick=()=>{if(this.disabled)return;const selected=!this.selected;this.emit("lr-chip-toggle-request",{value:this.value,selected},{cancelable:!0}).defaultPrevented||(this.selected=selected,this.emit("lr-chip-change",{value:this.value,selected}))}}static{this.defaultStrings={...super.defaultStrings,remove:LYRA_DEFAULT_remove,removeWithContext:LYRA_DEFAULT_removeWithContext,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,variants,styles]}get size(){return this._size}set size(next){const normalized=CHIP_SIZE.normalizeReflected(this,"size",next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}get variant(){return this._variant}set variant(next){const normalized=CHIP_VARIANT.normalizeReflected(this,"variant",next),old=this._variant;old!==normalized&&(this._variant=normalized,this.requestUpdate("variant",old))}get withRemove(){return this.removable}set withRemove(next){this.removable=!!next}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onLabelSlotChange),this.hasUpdated&&(this.labelObservationReady=!0),this.syncLabelObservation();const sampleBrowserState=()=>{this.tracksActionLabel&&this.recomputeLabelText(!0,!0)};this.hasUpdated?(sampleBrowserState(),this.ownerDocument.defaultView?.queueMicrotask(()=>{this.isConnected&&this.tracksActionLabel&&this.recomputeLabelText()})):this.seedFirstRenderState(sampleBrowserState)}get tracksActionLabel(){return this.toggleable||this.removable}syncLabelObservation(){this.labelObservationReady&&this.labelTextObserver.setEnabled(this.tracksActionLabel)}scheduleInitialLabelObservation(){if(this.labelObservationReady||this.pendingInitialLabelObservation||!this.isConnected)return;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow)return;const pending={};this.pendingInitialLabelObservation=pending,ownerWindow.queueMicrotask(()=>{this.pendingInitialLabelObservation!==pending||!this.isConnected||this.ownerDocument!==ownerDocument||(this.pendingInitialLabelObservation=void 0,this.labelObservationReady=!0,this.syncLabelObservation(),this.tracksActionLabel&&this.updateBrowserDerivedState(()=>this.recomputeLabelText()))})}disconnectedCallback(){this.pendingInitialLabelObservation=void 0,this.removeEventListener("slotchange",this.onLabelSlotChange),this.releaseHostActionRole(),this.pendingControlFocusRepair=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.labelTextObserver.adopted()}computeLabelText(preferLightDom=!1){const slot=this.renderRoot?.querySelector("slot:not([name])"),lightDomNodes=this.childNodes,assigned=slot?.assignedNodes({flatten:!0})??[],direct=Array.from(lightDomNodes??[]).filter(node=>node.nodeType!==1||(node.getAttribute("slot")??"")==="");return(!preferLightDom&&assigned.length>0?assigned:direct).map(node=>composedAccessibilityText(node,{ancestorBoundary:this,isSubtreeExcluded:element=>element.getRootNode()===this.renderRoot&&element.getAttribute("part")?.split(/\s+/).includes("label")?!1:isAccessibilitySubtreeExcluded(element),requireRendered:preferLightDom?!1:node.nodeType!==1||node.localName!=="slot",shouldPruneNode:candidate=>!this.contains(candidate)&&!isSourceLabelAvailable(candidate),ignoreInheritedVisibility:!0})).join(" ").replace(/\s+/g," ").trim()}recomputeLabelText(request=!0,preferLightDom=!1){const next=this.computeLabelText(preferLightDom);next!==this.cachedLabelText&&(this.cachedLabelText=next,request&&this.requestUpdate())}get accessibleToggleLabel(){return this.cachedLabelText||this.localize("select")}get accessibleRemoveLabel(){const text=this.cachedLabelText;return text?this.localize("removeWithContext",void 0,{label:text}):this.localize("remove")}get primaryControl(){return this.renderRoot.querySelector(this.removable?'[part="remove-button"]':'[part="toggle-button"]')}focus(options){this.primaryControl?.focus(options)}blur(){this.primaryControl?.blur()}click(){const control=this.primaryControl;control?control.click():super.click()}willUpdate(changed){if(super.willUpdate(changed),this.hasUpdated&&changed.size>0&&[...changed.keys()].every(key=>key==="selected"||key==="disabled")&&this.labelTextObserver.preserveBindingForNextUpdate(),changed.has("removable")&&!this.removable&&this.removeAttribute("with-remove"),(changed.has("removable")||changed.has("toggleable"))&&(this.syncLabelObservation(),this.hasUpdated&&(this.tracksActionLabel?this.recomputeLabelText(!1):this.cachedLabelText="")),this.pendingControlFocusRepair)return;const oldRemovable=changed.get("removable")??this.removable,oldToggleable=changed.get("toggleable")??this.toggleable,oldDisabled=changed.get("disabled")??this.disabled,oldMode=oldRemovable?"remove":oldToggleable?"toggle":"passive",newMode=this.removable?"remove":this.toggleable?"toggle":"passive";oldMode===newMode&&!(oldDisabled===!1&&this.disabled)||(this.pendingControlFocusRepair=captureComposedFocusRepair(this,()=>nearestExternalFocusTarget(this)??this.renderRoot.querySelector('[part="remove-button"], [part="toggle-button"]'))??void 0)}updated(changed){super.updated(changed),this.scheduleInitialLabelObservation(),this.syncHostActionRole();const repair=this.pendingControlFocusRepair;if(this.pendingControlFocusRepair=void 0,!repair)return;const replacement=this.disabled?null:this.primaryControl;applyComposedFocusRepair(repair,replacement??repair.candidate)}syncHostActionRole(){const needsGroup=this.tracksActionLabel&&this.hasAttribute("aria-label");needsGroup&&!this.hasAttribute("role")?(this.setAttribute("role","group"),this.managedActionGroupRole=!0):needsGroup||this.releaseHostActionRole()}releaseHostActionRole(){this.managedActionGroupRole&&this.getAttribute("role")==="group"&&this.removeAttribute("role"),this.managedActionGroupRole=!1}render(){const toggleMode=this.toggleable&&!this.removable,pressed=this.selected&&!this.removable;return html`
       <span part="base">
         ${renderInertPresentation(html`<slot name="start"></slot>`,{part:"start",hidden:!this.slotPresence.has("start")})}
         ${renderInertPresentation(html`<slot @slotchange=${this.onLabelSlotChange}></slot>`,{part:"label",presentation:toggleMode})}

package/dist/components/retrieval/embedding-explorer/embedding-explorer.class.d.ts

@@ -1,6 +1,6 @@
-import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';
+import type{LyraSpatialBounds,LyraSpatialPoint,LyraSpatialPointSource,LyraSpatialBinSelectDetail}from'../../../utilities/data-spatial.js';export type{LyraSpatialBounds,LyraSpatialPointSource,LyraSpatialPoint,LyraSpatialBin,LyraSpatialQuery,LyraSpatialBinSelectDetail}from'../../../utilities/data-spatial.js';import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';
 /** A projected embedding point. Coordinates must already be projected by the host. */
-export interface EmbeddingPoint{id:string;x:number;y:number;label?:string;sourceId?:string;cluster?:string|number;}export interface LyraEmbeddingExplorerEventMap{'lr-point-select':CustomEvent<{point:EmbeddingPoint;}>;}
+export interface EmbeddingPoint{id:string;x:number;y:number;label?:string;sourceId?:string;cluster?:string|number;}export interface LyraEmbeddingExplorerEventMap{'lr-point-select':CustomEvent<{point:EmbeddingPoint;}>;'lr-spatial-bin-select':CustomEvent<LyraSpatialBinSelectDetail>;}
 /**
 * `<lr-embedding-explorer>` — a dependency-free, accessible 2D embedding projection viewer. It
 * normalizes host-provided coordinates into an SVG plot, colors optional clusters, and exposes
@@ -8,7 +8,10 @@ export interface EmbeddingPoint{id:string;x:number;y:number;label?:string;source
 * single roving tab stop. It does not run PCA/UMAP/t-SNE, fetch chunks, or mutate points.
 *
 * Public collection properties take bounded, clone-owned readonly snapshots. Create a new
-* collection and reassign it after changes; mutating the assigned array does not update the view.
+* collection and reassign it after changes, or explicitly call requestUpdate() to refresh a mutated
+* source. Oversized inputs resolve sampled identities in cancelable chunks; the last completed
+* view stays visible with aria-busy until the replacement is ready. Keep pending source arrays
+* and records unchanged, or reassign/explicitly refresh to restart their staged inspection.
 * Points with non-finite coordinates or blank ids and later valid duplicates are ignored before
 * focus, selection, rendering, or activation. The first valid point for an id wins.
 * Optional cluster membership is exposed both through the plot options' descriptions and a
@@ -16,6 +19,9 @@ export interface EmbeddingPoint{id:string;x:number;y:number;label?:string;source
 *
 * @customElement lr-embedding-explorer
 * @event lr-point-select - A point was activated. `detail: { point }`.
+* @event lr-spatial-bin-select - A density region was activated; detail contains revision, bounds and count.
+* @csspart bin - One focusable density region, distinct from representative point overlays.
+* @csspart error - Invalid or unavailable spatial source feedback.
 * @csspart base - The root wrapper.
 * @csspart plot - The SVG projection plot.
 * @csspart point - One focusable embedding point.
@@ -25,7 +31,8 @@ export interface EmbeddingPoint{id:string;x:number;y:number;label?:string;source
 * @csspart legend-label - One cluster's visible name.
 * @csspart limit - The "showing N of M" notice, present only once `points` exceeds the render
 *   cap. The rendered subset is a deterministic, evenly spaced sample of the full array (not the
-*   leading run), so the plotted distribution stays representative above the cap.
+*   leading run). The sample spans source order; it does not guarantee spatial extrema or every
+*   cluster.
 * @csspart empty - The empty state.
 * @cssprop [--lr-embedding-explorer-selected-stroke=var(--lr-color-brand)] - Stroke color of the selected point.
 * @cssprop [--lr-embedding-explorer-height=360px] - The plot's `block-size`. Set on the host from
@@ -45,10 +52,25 @@ export interface EmbeddingPoint{id:string;x:number;y:number;label?:string;source
 * @status stable
 * @since 6.2.0
 */
-export declare class LyraEmbeddingExplorer extends LyraElement<LyraEmbeddingExplorerEventMap>{static styles:import("lit").CSSResultGroup[];private _points;private pointsSource;private sampledFrom;private validPoints;private renderedPoints;private bounds;private clusters;
+export declare class LyraEmbeddingExplorer extends LyraElement<LyraEmbeddingExplorerEventMap>{static styles:import("lit").CSSResultGroup[];private spatial;private spatialWaiters;private revealToken;private _source;
+/** Indexed spatial data takes precedence over points. Metadata and payloads are immutable
+* within a revision; assignment or keyless requestUpdate explicitly rebinds. Source mode
+* requires maxRenderedPoints >= 3 and reserves two slots within that budget for exact points. */
+get source():LyraSpatialPointSource<EmbeddingPoint&LyraSpatialPoint> |null;set source(value:LyraSpatialPointSource<EmbeddingPoint&LyraSpatialPoint> |null);
+/** Visible coordinate bounds, or null for the full global domain. Noncollapsed global axes
+* require positive viewport spans; explicit bounds must stay inside the global domain. */
+viewport:LyraSpatialBounds|null;private spatialChanged;private invalidateReveal;
+/** Resolve, reveal and focus an exact original ID without selecting or emitting an event.
+* An explicit viewport pans minimally while preserving its size; a null viewport stays global.
+* Superseded, disconnected, missing or invalid requests resolve false. */
+revealSourcePoint(id:string):Promise<boolean>;private _points;private pointsSource;private sampledFrom;private pointScan?;private pointGeneration;private resumePointScan;private validPoints;private renderedPoints;private sampledPoints;private sampledPointSet;private pointPositions;private bounds;private clusters;
 /** Projected points in host order. Non-finite coordinates are omitted. An input too large for
-*  one snapshot keeps an evenly spaced sample of the whole array. */
-get points():readonly EmbeddingPoint[];set points(value:readonly EmbeddingPoint[]);
+*  one snapshot keeps an evenly spaced sample of the whole array, resolving each sampled id to
+*  its first valid source occurrence before publishing the replacement. */
+get points():readonly EmbeddingPoint[];set points(value:readonly EmbeddingPoint[]);private cancelPointScan;private publishPoints;private refreshPoints;private queuePointScan;requestUpdate(name?:PropertyKey,oldValue?:unknown,options?:Parameters<LyraElement['requestUpdate']>[2]):void;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;
+/** Maximum evenly sampled points, from 1 to 10,000; invalid values use 1,000.
+*  The selected point is additionally retained when outside the sample. */
+maxRenderedPoints:number;
 /** The selected point id. Controlled by the host. */
 selectedPointId:string;
 /**
@@ -61,4 +83,4 @@ height:string;
 /** Accessible plot name. A host aria-label takes precedence, including an empty string. */
 label:string|null;
 /** Compatibility plot name used when label is absent. */
-accessibleLabel:string|null;private activeIndex;private refocusAfterUpdate;protected willUpdate(changed:PropertyValues<this>):void;protected updated(changed:PropertyValues<this>):void;private applyHeight;private position;private announceLabel;private select;private activatePoint;private onPointKeyDown;private renderPoint;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-embedding-explorer':LyraEmbeddingExplorer;}}
+accessibleLabel:string|null;private activeIndex;private refocusAfterUpdate;protected willUpdate(changed:PropertyValues<this>):void;protected updated(changed:PropertyValues<this>):void;private applyHeight;private position;private announceLabel;private select;private activatePoint;private onPointKeyDown;private spatialActionGuard;private renderPoint;private activateBin;private renderSpatial;render():TemplateResult;}declare global{interface HTMLElementTagNameMap{'lr-embedding-explorer':LyraEmbeddingExplorer;}}

package/dist/components/retrieval/embedding-explorer/embedding-explorer.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{snapshotPublicCollection}from"../../../internal/collection-snapshot.js";import{nativeSvgTitle}from"../../../internal/svg-title.js";import{html,nothing,svg}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{firstByRetrievalIdentity}from"../retrieval-identity.js";import{extent,finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{specialistTokens}from"../../../internal/specialist-host-tokens.styles.js";import{styles}from"./embedding-explorer.styles.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{LYRA_DEFAULT_embeddingExplorerEmpty,LYRA_DEFAULT_embeddingExplorerLabel,LYRA_DEFAULT_embeddingExplorerPoint,LYRA_DEFAULT_embeddingExplorerPointLimit}from"../../../internal/default-strings/retrieval.generated.js";const WIDTH=640,HEIGHT=360,PAD=24,MAX_RENDERED_POINTS=1e3,PALETTE=["var(--lr-color-chart-1)","var(--lr-color-chart-2)","var(--lr-color-chart-3)","var(--lr-color-chart-4)","var(--lr-color-chart-5)","var(--lr-color-chart-6)","var(--lr-color-chart-7)","var(--lr-color-chart-8)"];function decimatePoints(items,max){if(items.length<=max||max<=0)return[...items];if(max===1)return[items[0]];const step=(items.length-1)/(max-1),result=[],seen=new Set;for(let i=0;i<max;i++){const index=Math.min(items.length-1,Math.round(i*step));seen.has(index)||(seen.add(index),result.push(items[index]))}return result}class LyraEmbeddingExplorer extends LyraElement{constructor(){super(...arguments),this._points=Object.freeze([]),this.pointsSource=this._points,this.sampledFrom=0,this.validPoints=[],this.renderedPoints=[],this.bounds={minX:0,maxX:0,minY:0,maxY:0},this.clusters=[],this.selectedPointId="",this.height="360px",this.label=null,this.accessibleLabel=null,this.activeIndex=0,this.refocusAfterUpdate=!1}static{this.defaultStrings={...super.defaultStrings,embeddingExplorerEmpty:LYRA_DEFAULT_embeddingExplorerEmpty,embeddingExplorerLabel:LYRA_DEFAULT_embeddingExplorerLabel,embeddingExplorerPoint:LYRA_DEFAULT_embeddingExplorerPoint,embeddingExplorerPointLimit:LYRA_DEFAULT_embeddingExplorerPointLimit}}static{this.styles=[LyraElement.styles,specialistTokens,styles]}get points(){return this._points}set points(value){if(Object.is(value,this.pointsSource)||Object.is(value,this._points))return;const previous=this._points,view=this.ownerDocument?.defaultView;let truncation,snapshot=snapshotPublicCollection(value,view,{onTruncate:report=>truncation=report});truncation&&Array.isArray(value)&&(snapshot=snapshotPublicCollection(decimatePoints(value,truncation.retained),view)),this.pointsSource=value,this.sampledFrom=truncation?.source??0,this._points=snapshot,this.requestUpdate("points",previous)}willUpdate(changed){if(super.willUpdate(changed),changed.has("points")||changed.has("selectedPointId")){this.validPoints=firstByRetrievalIdentity(Array.isArray(this.points)?this.points:[],point=>Number.isFinite(point.x)&&Number.isFinite(point.y)?point.id:void 0);const sample=new Set(decimatePoints(this.validPoints,MAX_RENDERED_POINTS));this.renderedPoints=this.validPoints.filter(point=>sample.has(point)||point.id===this.selectedPointId),this.bounds=extent(this.validPoints,point=>point.x,point=>point.y)??{minX:1/0,maxX:-1/0,minY:1/0,maxY:-1/0},this.clusters=[...new Set(this.validPoints.map(point=>String(point.cluster??"").trim()))].sort()}if(!changed.has("points"))return;const active=shadowFocusTarget(this)??null,focusedId=active?.getAttribute("data-id"),points=this.renderedPoints,matchingIndex=focusedId?points.findIndex(point=>point.id===focusedId):-1;this.activeIndex=matchingIndex>=0?matchingIndex:Math.min(this.activeIndex,Math.max(0,points.length-1)),this.refocusAfterUpdate=active?.getAttribute("part")==="point"}updated(changed){super.updated(changed),changed.has("height")&&this.applyHeight(),this.refocusAfterUpdate&&(this.refocusAfterUpdate=!1,this.renderRoot.querySelector(`[data-index="${this.activeIndex}"]`)?.focus())}applyHeight(){const height=sanitizeCssLength(this.height,"height");height?this.style.setProperty("--lr-embedding-explorer-height",height):this.style.removeProperty("--lr-embedding-explorer-height")}position(point,bounds){const{minX,maxX,minY,maxY}=bounds,x=PAD+finiteRange((point.x-minX)/(maxX-minX||1),.5,0,1)*(WIDTH-PAD*2),y=HEIGHT-PAD-finiteRange((point.y-minY)/(maxY-minY||1),.5,0,1)*(HEIGHT-PAD*2);return{x,y}}announceLabel(point,index){return this.localize("embeddingExplorerPoint",void 0,{label:point.label||point.id,index:getNumberFormat(this.effectiveLocale).format(index+1)})}select(point){this.emit("lr-point-select",{point})}activatePoint(point,index){this.activeIndex=index,this.select(point)}onPointKeyDown(event,point,index){const points=this.renderedPoints;if(event.key==="Enter"||event.key===" "){event.preventDefault(),event.repeat||this.select(point);return}const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";let next=index;if(event.key===forward||event.key==="ArrowDown")next=Math.min(points.length-1,index+1);else if(event.key===backward||event.key==="ArrowUp")next=Math.max(0,index-1);else if(event.key==="Home")next=0;else if(event.key==="End")next=points.length-1;else return;event.preventDefault(),this.activeIndex=next,this.updateComplete.then(()=>{this.renderRoot.querySelector(`[data-index="${next}"]`)?.focus()})}renderPoint(point,index,bounds,clusterIndices){const{x,y}=this.position(point,bounds),label=this.announceLabel(point,index),cluster=String(point.cluster??"").trim(),selected=point.id===this.selectedPointId;return svg`<g
+import{__decorate}from"tslib";import{SpatialSourceController,spatialContains}from"../../../internal/spatial-source-controller.js";import{snapshotPublicCollection}from"../../../internal/collection-snapshot.js";import{isPlainDataRecord,readOwnDataValue}from"../../../internal/data-descriptors.js";import{nativeSvgTitle}from"../../../internal/svg-title.js";import{html,nothing,svg}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{firstByRetrievalIdentity}from"../retrieval-identity.js";import{extent,finiteRange,finiteCount}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{specialistTokens}from"../../../internal/specialist-host-tokens.styles.js";import{styles}from"./embedding-explorer.styles.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{LYRA_DEFAULT_embeddingExplorerEmpty,LYRA_DEFAULT_embeddingExplorerLabel,LYRA_DEFAULT_embeddingExplorerPoint,LYRA_DEFAULT_embeddingExplorerPointLimit,LYRA_DEFAULT_embeddingExplorerSpatialBin,LYRA_DEFAULT_embeddingExplorerSpatialBounds,LYRA_DEFAULT_embeddingExplorerSpatialError,LYRA_DEFAULT_embeddingExplorerSpatialLoading,LYRA_DEFAULT_embeddingExplorerSpatialSummary}from"../../../internal/default-strings/retrieval.generated.js";const WIDTH=640,HEIGHT=360,PAD=24,MAX_RENDERED_POINTS=1e3,PALETTE=["var(--lr-color-chart-1)","var(--lr-color-chart-2)","var(--lr-color-chart-3)","var(--lr-color-chart-4)","var(--lr-color-chart-5)","var(--lr-color-chart-6)","var(--lr-color-chart-7)","var(--lr-color-chart-8)"];function decimatePoints(items,max){if(items.length<=max||max<=0)return[...items];if(max===1)return[items[0]];const step=(items.length-1)/(max-1),result=[],seen=new Set;for(let i=0;i<max;i++){const index=Math.min(items.length-1,Math.round(i*step));seen.has(index)||(seen.add(index),result.push(items[index]))}return result}function validPointId(point){if(!isPlainDataRecord(point))return;const id=readOwnDataValue(point,"id");return typeof id=="string"&&id.trim()&&Number.isFinite(readOwnDataValue(point,"x"))&&Number.isFinite(readOwnDataValue(point,"y"))?id:void 0}class LyraEmbeddingExplorer extends LyraElement{constructor(){super(...arguments),this.spatial=new SpatialSourceController(this,()=>this.spatialChanged(),()=>this.effectiveLocale),this.spatialWaiters=new Set,this.revealToken={},this._source=null,this.viewport=null,this._points=Object.freeze([]),this.pointsSource=this._points,this.sampledFrom=0,this.pointGeneration=0,this.resumePointScan=!1,this.validPoints=[],this.renderedPoints=[],this.sampledPoints=[],this.sampledPointSet=new Set,this.pointPositions=new Map,this.bounds={minX:0,maxX:0,minY:0,maxY:0},this.clusters=[],this.maxRenderedPoints=1e3,this.selectedPointId="",this.height="360px",this.label=null,this.accessibleLabel=null,this.activeIndex=0,this.refocusAfterUpdate=!1}static{this.defaultStrings={...super.defaultStrings,embeddingExplorerEmpty:LYRA_DEFAULT_embeddingExplorerEmpty,embeddingExplorerLabel:LYRA_DEFAULT_embeddingExplorerLabel,embeddingExplorerPoint:LYRA_DEFAULT_embeddingExplorerPoint,embeddingExplorerPointLimit:LYRA_DEFAULT_embeddingExplorerPointLimit,embeddingExplorerSpatialBin:LYRA_DEFAULT_embeddingExplorerSpatialBin,embeddingExplorerSpatialBounds:LYRA_DEFAULT_embeddingExplorerSpatialBounds,embeddingExplorerSpatialError:LYRA_DEFAULT_embeddingExplorerSpatialError,embeddingExplorerSpatialLoading:LYRA_DEFAULT_embeddingExplorerSpatialLoading,embeddingExplorerSpatialSummary:LYRA_DEFAULT_embeddingExplorerSpatialSummary}}static{this.styles=[LyraElement.styles,specialistTokens,styles]}get source(){return this._source}set source(value){const old=this._source;this._source=value,this.requestUpdate("source",old)}spatialChanged(){if(super.requestUpdate("spatial"),!this.spatial?.loading||this.spatial.error){for(const resolve of this.spatialWaiters??[])resolve();this.spatialWaiters?.clear()}}invalidateReveal(){const token=this.revealToken={};for(const resolve of this.spatialWaiters??[])resolve();return this.spatialWaiters?.clear(),token}async revealSourcePoint(id){const token=this.invalidateReveal(),epoch=this.spatial.authority.epoch,current=()=>this.revealToken===token&&this.isConnected&&this.source!==null&&this.spatial.authority.epoch===epoch;if(!current()||this.spatial.error)return!1;const point=await this.spatial.reveal(id);if(!point||!current())return!1;const viewport=this.spatial.panTo(point);if(viewport===void 0||(viewport!==this.viewport&&(this.viewport=viewport),await this.updateComplete,!current())||(this.spatial.loading&&await new Promise(resolve=>this.spatialWaiters.add(resolve)),!current()||this.spatial.error)||(await this.updateComplete,!current()))return!1;const index=this.renderedPoints.findIndex(item=>item.id===id);return index<0||(this.activeIndex=index,await this.updateComplete,!current())?!1:(this.renderRoot.querySelector(`[data-index="${index}"]`)?.focus(),shadowFocusTarget(this)?.getAttribute("data-id")===id)}get points(){return this._points}set points(value){Object.is(value,this.pointsSource)||Object.is(value,this._points)||(this.pointsSource=value,this.source===null&&this.refreshPoints())}cancelPointScan(){this.pointGeneration++,clearTimeout(this.pointScan?.timer),this.pointScan=void 0}publishPoints(snapshot,sourceLength){const previous=this._points;this.sampledFrom=sourceLength,this._points=snapshot,this.requestUpdate("points",previous)}refreshPoints(){this.cancelPointScan(),this.resumePointScan=!1;const generation=this.pointGeneration,value=this.pointsSource,view=this.ownerDocument?.defaultView;let truncation;const snapshot=snapshotPublicCollection(value,view,{onTruncate:report=>truncation=report});if(generation!==this.pointGeneration)return;if(!truncation||!Array.isArray(value)){this.publishPoints(snapshot,0);return}const candidates=new Set,count=truncation.retained;for(let index=0;index<count;index++){const position=count>1?Math.round(index*(truncation.source-1)/(count-1)):0,id=validPointId(readOwnDataValue(value,String(position)));id!==void 0&&candidates.add(id)}generation===this.pointGeneration&&(this.pointScan={source:value,length:truncation.source,candidates,winners:new Map,cursor:0},this.queuePointScan(),this.requestUpdate("pointScan"))}queuePointScan(){const scan=this.pointScan;!scan||scan.timer!==void 0||!this.isConnected||(scan.timer=setTimeout(()=>{if(scan.timer=void 0,!this.isConnected||this.pointScan!==scan)return;const end=Math.min(scan.length,scan.cursor+1e4);for(;scan.cursor<end&&scan.winners.size<scan.candidates.size;scan.cursor++){const point=readOwnDataValue(scan.source,String(scan.cursor)),id=validPointId(point);id!==void 0&&scan.candidates.has(id)&&!scan.winners.has(id)&&scan.winners.set(id,point)}if(scan.cursor<scan.length&&scan.winners.size<scan.candidates.size)this.queuePointScan();else{const snapshot=snapshotPublicCollection([...scan.winners.values()],this.ownerDocument?.defaultView);if(this.pointScan!==scan||!this.isConnected)return;this.pointScan=void 0,this.publishPoints(snapshot,scan.length)}},0))}requestUpdate(name,oldValue,options){this.spatial&&(name==="source"||name===void 0)?(this.invalidateReveal(),this.cancelPointScan(),this.spatial.bind(this.source,this.viewport,Math.max(1,finiteCount(this.maxRenderedPoints,MAX_RENDERED_POINTS,1e4)),this.selectedPointId),this.source===null&&this.pointsSource!==void 0&&this.refreshPoints()):this.source&&this.spatial?((name==="viewport"||name==="maxRenderedPoints")&&this.spatial.configure(this.viewport,Math.max(1,finiteCount(this.maxRenderedPoints,MAX_RENDERED_POINTS,1e4))),name==="selectedPointId"&&this.spatial.setSelected(this.selectedPointId)):name===void 0&&this.pointsSource!==void 0&&this.refreshPoints(),super.requestUpdate(name,oldValue,options)}connectedCallback(){super.connectedCallback(),this.source?this.spatial.bind(this.source,this.viewport,Math.max(1,finiteCount(this.maxRenderedPoints,MAX_RENDERED_POINTS,1e4)),this.selectedPointId):this.resumePointScan?this.refreshPoints():this.queuePointScan()}disconnectedCallback(){this.invalidateReveal(),this.spatial.reset(),this.spatialChanged(),this.resumePointScan=this.pointScan!==void 0,this.cancelPointScan(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.spatial.authority.adopted(),this.source&&this.spatial.bind(this.source,this.viewport,Math.max(1,finiteCount(this.maxRenderedPoints,MAX_RENDERED_POINTS,1e4)),this.selectedPointId)}willUpdate(changed){if(super.willUpdate(changed),this.source){this.renderedPoints=[...this.spatial.points()].filter(point=>!this.spatial.view||spatialContains(this.spatial.view,point)),this.activeIndex=Math.max(0,Math.min(this.activeIndex,this.renderedPoints.length+(this.spatial.result?.bins.length??0)-1));return}const previousRenderedPoints=this.renderedPoints;if(changed.has("points")&&(this.validPoints=firstByRetrievalIdentity(Array.isArray(this.points)?this.points:[],point=>Number.isFinite(point.x)&&Number.isFinite(point.y)?point.id:void 0),this.pointPositions=new Map(this.validPoints.map((point,index)=>[point.id,{point,index}])),this.bounds=extent(this.validPoints,point=>point.x,point=>point.y)??{minX:1/0,maxX:-1/0,minY:1/0,maxY:-1/0},this.clusters=[...new Set(this.validPoints.map(point=>String(point.cluster??"").trim()))].sort()),(changed.has("points")||changed.has("maxRenderedPoints"))&&(this.sampledPoints=decimatePoints(this.validPoints,Math.max(1,finiteCount(this.maxRenderedPoints,MAX_RENDERED_POINTS,1e4))),this.sampledPointSet=new Set(this.sampledPoints)),changed.has("points")||changed.has("selectedPointId")||changed.has("maxRenderedPoints")){const selected=this.pointPositions.get(this.selectedPointId);if(this.renderedPoints=this.sampledPoints,selected&&!this.sampledPointSet.has(selected.point)){const following=this.sampledPoints.findIndex(point=>this.pointPositions.get(point.id).index>selected.index),index=following<0?this.sampledPoints.length:following;this.renderedPoints=[...this.sampledPoints.slice(0,index),selected.point,...this.sampledPoints.slice(index)]}}if(!changed.has("points")&&!changed.has("maxRenderedPoints")&&previousRenderedPoints===this.renderedPoints)return;const active=shadowFocusTarget(this)??null,focusedId=active?.getAttribute("data-id"),points=this.renderedPoints,matchingIndex=focusedId?points.findIndex(point=>point.id===focusedId):-1;this.activeIndex=matchingIndex>=0?matchingIndex:Math.min(this.activeIndex,Math.max(0,points.length-1)),this.refocusAfterUpdate=active?.getAttribute("part")==="point"}updated(changed){super.updated(changed),changed.has("height")&&this.applyHeight(),this.refocusAfterUpdate&&(this.refocusAfterUpdate=!1,this.renderRoot.querySelector(`[data-index="${this.activeIndex}"]`)?.focus())}applyHeight(){const height=sanitizeCssLength(this.height,"height");height?this.style.setProperty("--lr-embedding-explorer-height",height):this.style.removeProperty("--lr-embedding-explorer-height")}position(point,bounds){const{minX,maxX,minY,maxY}=bounds;if(this.source){const ratio=(value,min,max)=>min===max?.5:Number.isFinite(max-min)?(value-min)/(max-min):(value/2-min/2)/(max/2-min/2);return{x:PAD+ratio(point.x,minX,maxX)*(WIDTH-PAD*2),y:HEIGHT-PAD-ratio(point.y,minY,maxY)*(HEIGHT-PAD*2)}}const x=PAD+finiteRange((point.x-minX)/(maxX-minX||1),.5,0,1)*(WIDTH-PAD*2),y=HEIGHT-PAD-finiteRange((point.y-minY)/(maxY-minY||1),.5,0,1)*(HEIGHT-PAD*2);return{x,y}}announceLabel(point,index){return this.localize("embeddingExplorerPoint",void 0,{label:point.label||point.id,index:getNumberFormat(this.effectiveLocale).format(index+1)})}select(point){this.source&&(this.spatial.loading||this.spatial.error)||this.emit("lr-point-select",{point})}activatePoint(point,index){this.activeIndex=index,this.select(point)}onPointKeyDown(event,point,index,current=()=>!0){const total=this.renderedPoints.length+(this.source?this.spatial.result?.bins.length??0:0);if(event.key==="Enter"||event.key===" "){event.preventDefault(),event.repeat||this.select(point);return}const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";let next=index;if(event.key===forward||event.key==="ArrowDown")next=Math.min(total-1,index+1);else if(event.key===backward||event.key==="ArrowUp")next=Math.max(0,index-1);else if(event.key==="Home")next=0;else if(event.key==="End")next=total-1;else return;event.preventDefault(),this.activeIndex=next,this.updateComplete.then(()=>{current()&&this.renderRoot.querySelector(`[data-index="${next}"]`)?.focus()})}spatialActionGuard(member){const source=this.source,model=this.spatial,binding=model.binding,result=model.result,owner=this.ownerDocument,epoch=model.authority.epoch;return event=>{const control=event?.currentTarget;return source!==null&&this.source===source&&this.isConnected&&this.ownerDocument===owner&&model.binding===binding&&model.result===result&&model.authority.epoch===epoch&&!model.loading&&!model.error&&member()&&(!event||!!control?.isConnected&&control.ownerDocument===owner&&control.getRootNode()===this.renderRoot)}}renderPoint(point,index,bounds,clusterIndices){const current=this.source?this.spatialActionGuard(()=>this.spatial.result?.points.includes(point)===!0||this.spatial.selected===point||this.spatial.revealed===point):()=>!0,{x,y}=this.position(point,bounds),label=this.announceLabel(point,this.source?point.sourceIndex:index),cluster=String(point.cluster??"").trim(),selected=point.id===this.selectedPointId;return svg`<g
       part="point"
       data-index=${index}
       data-id=${point.id}
@@ -9,9 +9,9 @@ import{__decorate}from"tslib";import{snapshotPublicCollection}from"../../../inte
       aria-selected=${selected?"true":"false"}
       aria-label=${label}
       aria-description=${cluster||nothing}
-      @click=${()=>this.activatePoint(point,index)}
-      @focus=${()=>{this.activeIndex!==index&&(this.activeIndex=index)}}
-      @keydown=${event=>this.onPointKeyDown(event,point,index)}
+      @click=${event=>{current(event)&&this.activatePoint(point,index)}}
+      @focus=${event=>{current(event)&&this.activeIndex!==index&&(this.activeIndex=index)}}
+      @keydown=${event=>current(event)&&this.onPointKeyDown(event,point,index,current)}
     >
       <line
         class="point-hit"
@@ -25,9 +25,23 @@ import{__decorate}from"tslib";import{snapshotPublicCollection}from"../../../inte
       ></line>
       <circle class="point-marker" r="6" fill=${PALETTE[(clusterIndices.get(cluster)??0)%PALETTE.length]}></circle>
       ${nativeSvgTitle(label)}
-    </g>`}render(){const points=this.validPoints,label=this.hasAttribute("aria-label")?this.getAttribute("aria-label"):this.label??this.accessibleLabel??this.localize("embeddingExplorerLabel");if(points.length===0)return html`<div part="base" role="region" aria-label=${label}>
-        <p part="empty">${this.localize("embeddingExplorerEmpty")}</p>
-      </div>`;const renderedPoints=this.renderedPoints,bounds=this.bounds,clusters=this.clusters,clusterIndices=new Map(clusters.map((cluster,index)=>[cluster,index])),visibleClusters=clusters.filter(cluster=>cluster.trim()!==""),numberFormat=getNumberFormat(this.effectiveLocale);return html`<div part="base">
+    </g>`}activateBin(bin){const binding=this.spatial.binding;!binding||this.spatial.loading||this.spatial.error||this.emit("lr-spatial-bin-select",Object.freeze({revision:binding.revision,bounds:bin.bounds,count:bin.count}))}renderSpatial(){const model=this.spatial,binding=model.binding,view=model.view,label=this.hasAttribute("aria-label")?this.getAttribute("aria-label"):this.label??this.accessibleLabel??this.localize("embeddingExplorerLabel"),number=getNumberFormat(this.effectiveLocale),formatBounds=bounds=>bounds?this.localize("embeddingExplorerSpatialBounds",void 0,{minX:number.format(bounds.minX),maxX:number.format(bounds.maxX),minY:number.format(bounds.minY),maxY:number.format(bounds.maxY)}):this.localize("embeddingExplorerEmpty"),summary=this.localize("embeddingExplorerSpatialSummary",void 0,{total:number.format(binding?.count??0),matched:number.format(model.result?.matchedCount??0),global:formatBounds(binding?.bounds),viewport:formatBounds(view)}),points=this.renderedPoints,bins=model.result?.bins??[];return html`<div part="base" role="region" aria-label=${label} aria-busy=${model.loading?"true":"false"}>
+      ${model.error?html`<p part="error">${this.localize("embeddingExplorerSpatialError")}</p>`:nothing}
+      ${view&&model.result&&!model.error?html`<svg part="plot" viewBox="0 0 ${WIDTH} ${HEIGHT}" role="listbox" aria-label=${label} aria-description=${summary} aria-disabled=${model.loading?"true":"false"}>
+        ${bins.map((bin,offset)=>{const a=this.position({id:"",x:bin.bounds.minX,y:bin.bounds.maxY},view),b=this.position({id:"",x:bin.bounds.maxX,y:bin.bounds.minY},view),index=points.length+offset,current=this.spatialActionGuard(()=>this.spatial.result?.bins.includes(bin)===!0),name=this.localize("embeddingExplorerSpatialBin",void 0,{count:number.format(bin.count),bounds:formatBounds(bin.bounds)});return svg`<g part="bin" role="option" aria-selected="false" aria-label=${name} tabindex=${index===this.activeIndex?"0":"-1"} data-index=${index}
+            @focus=${event=>{current(event)&&(this.activeIndex=index)}} @click=${event=>{current(event)&&(this.activeIndex=index,this.activateBin(bin))}}
+            @keydown=${event=>{current(event)&&(event.key==="Enter"||event.key===" "?(event.preventDefault(),event.repeat||this.activateBin(bin)):this.onPointKeyDown(event,{id:"",x:0,y:0},index,current))}}>
+            <rect class="bin-region" x=${a.x} y=${a.y} width=${b.x-a.x} height=${b.y-a.y} fill-opacity=${.15+.65*bin.count/Math.max(1,model.result.matchedCount)}></rect>
+            <line class=${bin.bounds.minX===bin.bounds.maxX||bin.bounds.minY===bin.bounds.maxY?"bin-hit bin-axis":"bin-hit"} x1=${a.x} y1=${a.y} x2=${b.x} y2=${b.y} aria-hidden="true"></line>
+            ${nativeSvgTitle(name)}
+          </g>`})}
+        ${points.map((point,index)=>this.renderPoint(point,index,view,new Map))}
+      </svg>`:nothing}
+      ${model.loading?html`<p part="limit">${this.localize("embeddingExplorerSpatialLoading")}</p>`:html`<p part="limit">${summary}</p>`}
+      ${!model.loading&&!model.error&&binding?.count===0?html`<p part="empty">${this.localize("embeddingExplorerEmpty")}</p>`:nothing}
+    </div>`}render(){if(this.source)return this.renderSpatial();const points=this.validPoints,label=this.hasAttribute("aria-label")?this.getAttribute("aria-label"):this.label??this.accessibleLabel??this.localize("embeddingExplorerLabel");if(points.length===0)return html`<div part="base" role="region" aria-label=${label} aria-busy=${this.pointScan?"true":"false"}>
+        ${this.pointScan?nothing:html`<p part="empty">${this.localize("embeddingExplorerEmpty")}</p>`}
+      </div>`;const renderedPoints=this.renderedPoints,bounds=this.bounds,clusters=this.clusters,clusterIndices=new Map(clusters.map((cluster,index)=>[cluster,index])),visibleClusters=clusters.filter(cluster=>cluster.trim()!==""),numberFormat=getNumberFormat(this.effectiveLocale);return html`<div part="base" aria-busy=${this.pointScan?"true":"false"}>
       <svg
         part="plot"
         viewBox="0 0 ${WIDTH} ${HEIGHT}"
@@ -59,4 +73,4 @@ import{__decorate}from"tslib";import{snapshotPublicCollection}from"../../../inte
                 <span part="legend-label">${cluster}</span>
               </span>`)}
           </div>`:nothing}
-    </div>`}}__decorate([property({attribute:!1})],LyraEmbeddingExplorer.prototype,"points",null),__decorate([property({attribute:"selected-point-id"})],LyraEmbeddingExplorer.prototype,"selectedPointId",void 0),__decorate([property()],LyraEmbeddingExplorer.prototype,"height",void 0),__decorate([property()],LyraEmbeddingExplorer.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraEmbeddingExplorer.prototype,"accessibleLabel",void 0),__decorate([state()],LyraEmbeddingExplorer.prototype,"activeIndex",void 0);export{LyraEmbeddingExplorer};
+    </div>`}}__decorate([property({attribute:!1,noAccessor:!0})],LyraEmbeddingExplorer.prototype,"source",null),__decorate([property({attribute:!1})],LyraEmbeddingExplorer.prototype,"viewport",void 0),__decorate([property({attribute:!1})],LyraEmbeddingExplorer.prototype,"points",null),__decorate([property({type:Number,attribute:"max-rendered-points"})],LyraEmbeddingExplorer.prototype,"maxRenderedPoints",void 0),__decorate([property({attribute:"selected-point-id"})],LyraEmbeddingExplorer.prototype,"selectedPointId",void 0),__decorate([property()],LyraEmbeddingExplorer.prototype,"height",void 0),__decorate([property()],LyraEmbeddingExplorer.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraEmbeddingExplorer.prototype,"accessibleLabel",void 0),__decorate([state()],LyraEmbeddingExplorer.prototype,"activeIndex",void 0);export{LyraEmbeddingExplorer};

package/dist/components/retrieval/embedding-explorer/embedding-explorer.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{compactContainerQuery}from"../../../internal/container-breakpoints.styles.js";const styles=css` :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); } [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-xs); } [part='plot'] { display: block; inline-size: 100%; block-size: var(--lr-embedding-explorer-height, auto); overflow: visible; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); } [part='point'] { cursor: pointer; outline: none; transition: stroke var(--lr-transition-fast), stroke-width var(--lr-transition-fast); } .point-hit { fill: none; stroke: transparent; stroke-width: var(--lr-size-24px); stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: stroke; } [part='point']:hover, [part='point']:focus-visible { outline: none; } [part='point']:hover .point-marker, [part='point']:focus-visible .point-marker { stroke: var(--lr-color-text); stroke-width: var(--lr-border-width-medium); } [part='point']:active .point-marker { stroke: var(--lr-color-text); stroke-width: var(--lr-border-width-thick); } [part='point'][data-selected='true'] .point-marker { stroke: var(--lr-embedding-explorer-selected-stroke, var(--lr-color-brand)); stroke-width: var(--lr-border-width-medium); } [part='point'][data-selected='true']:hover .point-marker, [part='point'][data-selected='true']:focus-visible .point-marker { stroke-width: var(--lr-border-width-thick); } [part='point'][data-selected='true']:active .point-marker { stroke-width: calc(var(--lr-border-width-thick) + var(--lr-border-width-thin)); } [part='legend'] { display: flex; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-s); align-items: center; color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='legend-item'] { display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-2xs); } [part='legend-swatch'] { inline-size: var(--lr-size-0-75rem); block-size: var(--lr-size-0-75rem); border-radius: var(--lr-radius-xs); flex: none; } [part='legend-label'] { min-inline-size: 0; overflow-wrap: anywhere; } [part='empty'] { margin: 0; color: var(--lr-color-text-quiet); } @container ${compactContainerQuery} { [part='plot'] { min-block-size: var(--lr-size-12rem); } } `;export{styles};
+import{css}from"lit";import{compactContainerQuery}from"../../../internal/container-breakpoints.styles.js";const styles=css` :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); } [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-xs); } [part='plot'] { display: block; inline-size: 100%; block-size: var(--lr-embedding-explorer-height, auto); overflow: visible; border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface); } [part='point'] { cursor: pointer; outline: none; transition: stroke var(--lr-transition-fast), stroke-width var(--lr-transition-fast); } .point-hit { fill: none; stroke: transparent; stroke-width: var(--lr-size-24px); stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: stroke; } [part='point']:hover, [part='point']:focus-visible { outline: none; } [part='point']:hover .point-marker, [part='point']:focus-visible .point-marker { stroke: var(--lr-color-text); stroke-width: var(--lr-border-width-medium); } [part='point']:active .point-marker { stroke: var(--lr-color-text); stroke-width: var(--lr-border-width-thick); } [part='point'][data-selected='true'] .point-marker { stroke: var(--lr-embedding-explorer-selected-stroke, var(--lr-color-brand)); stroke-width: var(--lr-border-width-medium); } [part='point'][data-selected='true']:hover .point-marker, [part='point'][data-selected='true']:focus-visible .point-marker { stroke-width: var(--lr-border-width-thick); } [part='point'][data-selected='true']:active .point-marker { stroke-width: calc(var(--lr-border-width-thick) + var(--lr-border-width-thin)); } [part='bin'] { cursor: pointer; outline: none; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); } .bin-region { fill: var(--lr-color-brand); } .bin-hit { stroke: transparent; stroke-width: var(--lr-icon-button-size); pointer-events: stroke; } .bin-axis { stroke: var(--lr-color-brand); stroke-width: var(--lr-border-width-medium); } [part='bin']:hover .bin-axis, [part='bin']:focus-visible .bin-axis { stroke: var(--lr-color-text); stroke-width: var(--lr-border-width-thick); } [part='bin']:hover .bin-region, [part='bin']:focus-visible .bin-region { stroke: var(--lr-color-text); stroke-width: var(--lr-border-width-medium); } [part='bin']:active .bin-region { stroke-width: var(--lr-border-width-thick); } [part='error'] { color: var(--lr-color-danger); } [part='legend'] { display: flex; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-s); align-items: center; color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='legend-item'] { display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-2xs); } [part='legend-swatch'] { inline-size: var(--lr-size-0-75rem); block-size: var(--lr-size-0-75rem); border-radius: var(--lr-radius-xs); flex: none; } [part='legend-label'] { min-inline-size: 0; overflow-wrap: anywhere; } [part='empty'] { margin: 0; color: var(--lr-color-text-quiet); } @container ${compactContainerQuery} { [part='plot'] { min-block-size: var(--lr-size-12rem); } } `;export{styles};

package/dist/components/retrieval/graph/graph-canvas.js

@@ -1 +1 @@
-const NO_DASH=[],hullPaths=new WeakMap;function hullPath(hull){const cached=hullPaths.get(hull);if(cached?.d===hull.d)return cached.path;const path=new Path2D(hull.d);return hullPaths.set(hull,{d:hull.d,path}),path}const HULL_STROKE_WIDTH=48,MIN_PICK_TARGET_PX=24,PICK_RASTER_GUARD_PX=2,EXPAND_BADGE_R=5,EXPAND_BADGE_OFFSET=Math.SQRT1_2;function shapeHalfSide(r){return r*Math.sqrt(Math.PI)/2}function traceShape(path,x,y,r,shape){if(shape==="circle"){path.arc(x,y,r,0,Math.PI*2);return}const s=shapeHalfSide(r);if(shape==="square"){path.rect(x-s,y-s,s*2,s*2);return}const d=s*Math.SQRT2;path.moveTo(x,y-d),path.lineTo(x+d,y),path.lineTo(x,y+d),path.lineTo(x-d,y),path.closePath()}function drawArrowhead(ctx,link){const dx=link.x2-link.x1,dy=link.y2-link.y1,len=Math.hypot(dx,dy)||1,ux=dx/len,uy=dy/len,size=Math.max(6,link.width*3),bx=link.x2-ux*size,by=link.y2-uy*size,px=-uy,py=ux;ctx.beginPath(),ctx.moveTo(link.x2,link.y2),ctx.lineTo(bx+px*size*.4,by+py*size*.4),ctx.lineTo(bx-px*size*.4,by-py*size*.4),ctx.closePath(),ctx.fillStyle=ctx.strokeStyle,ctx.fill()}function drawRing(ctx,ring,color,width){ctx.strokeStyle=color,ctx.lineWidth=width,ctx.beginPath(),ctx.arc(ring.x,ring.y,ring.r,0,Math.PI*2),ctx.stroke()}function drawKeyboardFocusCue(ctx,scene){if(ctx.strokeStyle=scene.haloColor,ctx.setLineDash([4,3]),scene.keyboardFocusLink){const link=scene.keyboardFocusLink;ctx.lineWidth=Math.max(4,link.width+4),ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke()}scene.keyboardFocusHull&&(ctx.lineWidth=4,ctx.stroke(hullPath(scene.keyboardFocusHull))),ctx.setLineDash([]),scene.keyboardFocusRing&&drawRing(ctx,scene.keyboardFocusRing,scene.haloColor,scene.borderWidths?.[1]??2)}function drawGraphScene(ctx,camera,scene){ctx.save(),ctx.transform(camera.k,0,0,camera.k,camera.x,camera.y);const hullOpacity=scene.hullOpacity??.12;for(const hull of scene.hulls){const path=hullPath(hull);ctx.globalAlpha=hullOpacity,ctx.fillStyle=hull.fill,ctx.strokeStyle=hull.fill,ctx.lineWidth=HULL_STROKE_WIDTH,ctx.lineJoin="round",ctx.lineCap="round",ctx.fill(path),ctx.stroke(path),ctx.globalAlpha=1}const dimmedOpacity=scene.dimmedOpacity??1,[thin,medium,thick]=scene.borderWidths??[1,2,3],styleLink=link=>{ctx.strokeStyle=link.selected?scene.selectedColor:link.color,ctx.lineWidth=link.selected?thick:link.width,ctx.setLineDash(link.dash??NO_DASH),ctx.globalAlpha=link.dimmed?dimmedOpacity:1};let style="";ctx.beginPath();for(const link of scene.links){if(link.width<=0)continue;const linkStyle=[link.selected||link.color,link.selected||link.width,link.dash,link.dimmed].join("|");linkStyle!==style&&(ctx.stroke(),ctx.beginPath(),styleLink(link),style=linkStyle),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2)}ctx.stroke();for(const link of scene.links)link.width<=0||!link.directed||(styleLink(link),drawArrowhead(ctx,link));if(ctx.globalAlpha=1,ctx.setLineDash([]),scene.edgeLabels.length){ctx.font=scene.font,ctx.textAlign="center",ctx.textBaseline="middle",ctx.lineWidth=thick;for(const label of scene.edgeLabels)ctx.strokeStyle=scene.labelHaloColor,ctx.strokeText(label.text,label.x,label.y),ctx.fillStyle=scene.labelColor,ctx.fillText(label.text,label.x,label.y)}for(const node of scene.nodes)ctx.globalAlpha=node.dimmed?dimmedOpacity:1,ctx.fillStyle=node.fill,ctx.beginPath(),traceShape(ctx,node.x,node.y,node.r,node.shape),ctx.fill(),node.selected&&(ctx.strokeStyle=scene.selectedColor,ctx.lineWidth=medium,ctx.stroke());if(ctx.globalAlpha=1,scene.showNodeLabels&&scene.nodeLabels.length){ctx.font=scene.font,ctx.textAlign="left",ctx.textBaseline="middle",ctx.fillStyle=scene.labelColor;for(const label of scene.nodeLabels)ctx.fillText(label.text,label.x,label.y)}const expandIndicators=scene.expandIndicators??[];if(expandIndicators.length){ctx.lineWidth=thin;for(const indicator of expandIndicators){const bx=indicator.x+indicator.r*EXPAND_BADGE_OFFSET,by=indicator.y-indicator.r*EXPAND_BADGE_OFFSET,path=new Path2D;path.arc(bx,by,EXPAND_BADGE_R,0,Math.PI*2),ctx.fillStyle=scene.expandBadgeFill??"",ctx.fill(path),ctx.strokeStyle=scene.expandBadgeStroke??"",ctx.stroke(path),ctx.strokeStyle=scene.labelColor,ctx.beginPath(),ctx.moveTo(bx-EXPAND_BADGE_R/2,by),ctx.lineTo(bx+EXPAND_BADGE_R/2,by),ctx.moveTo(bx,by-EXPAND_BADGE_R/2),ctx.lineTo(bx,by+EXPAND_BADGE_R/2),ctx.stroke()}}scene.focusHalo&&drawRing(ctx,scene.focusHalo,scene.haloColor,medium),drawKeyboardFocusCue(ctx,scene),ctx.restore()}function indexToPickColor(index){const v=index+1;return`rgb(${v>>16&255},${v>>8&255},${v&255})`}function pickColorToIndex(r,g,b){return(r<<16|g<<8|b)-1}function drawPickingScene(ctx,camera,scene){ctx.imageSmoothingEnabled=!1,ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height),ctx.save(),ctx.transform(camera.k,0,0,camera.k,camera.x,camera.y);const cameraScale=Number.isFinite(camera.k)&&Math.abs(camera.k)>0?Math.abs(camera.k):1,minimumWorldStroke=(MIN_PICK_TARGET_PX+PICK_RASTER_GUARD_PX)/cameraScale;let idx=0;for(const hull of scene.hulls){const color=indexToPickColor(idx++),path=hullPath(hull);ctx.fillStyle=color,ctx.strokeStyle=color,ctx.lineWidth=Math.max(HULL_STROKE_WIDTH,minimumWorldStroke),ctx.lineJoin="round",ctx.lineCap="round",ctx.fill(path),ctx.stroke(path)}for(const link of scene.links)ctx.strokeStyle=indexToPickColor(idx++),ctx.lineWidth=Math.max(link.width+6,8,minimumWorldStroke),ctx.lineCap="round",ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke();for(const node of scene.nodes)ctx.fillStyle=indexToPickColor(idx++),ctx.beginPath(),traceShape(ctx,node.x,node.y,Math.max(node.r,minimumWorldStroke/2),node.shape),ctx.fill();ctx.restore()}export{EXPAND_BADGE_OFFSET,EXPAND_BADGE_R,drawGraphScene,drawPickingScene,pickColorToIndex,shapeHalfSide};
+const NO_DASH=[],hullPaths=new WeakMap;function hullPath(hull){const cached=hullPaths.get(hull);if(cached?.d===hull.d)return cached.path;const path=new Path2D(hull.d);return hullPaths.set(hull,{d:hull.d,path}),path}const HULL_STROKE_WIDTH=48,MIN_PICK_TARGET_PX=24,PICK_RASTER_GUARD_PX=2,EXPAND_BADGE_R=5,EXPAND_BADGE_OFFSET=Math.SQRT1_2;function shapeHalfSide(r){return r*Math.sqrt(Math.PI)/2}function traceShape(path,x,y,r,shape){if(shape==="circle"){path.arc(x,y,r,0,Math.PI*2);return}const s=shapeHalfSide(r);if(shape==="square"){path.rect(x-s,y-s,s*2,s*2);return}const d=s*Math.SQRT2;path.moveTo(x,y-d),path.lineTo(x+d,y),path.lineTo(x,y+d),path.lineTo(x-d,y),path.closePath()}function drawArrowhead(ctx,link){const dx=link.x2-link.x1,dy=link.y2-link.y1,len=Math.hypot(dx,dy)||1,ux=dx/len,uy=dy/len,size=Math.max(6,link.width*3),bx=link.x2-ux*size,by=link.y2-uy*size,px=-uy,py=ux;ctx.beginPath(),ctx.moveTo(link.x2,link.y2),ctx.lineTo(bx+px*size*.4,by+py*size*.4),ctx.lineTo(bx-px*size*.4,by-py*size*.4),ctx.closePath(),ctx.fillStyle=ctx.strokeStyle,ctx.fill()}function drawRing(ctx,ring,color,width){ctx.strokeStyle=color,ctx.lineWidth=width,ctx.beginPath(),ctx.arc(ring.x,ring.y,ring.r,0,Math.PI*2),ctx.stroke()}function drawKeyboardFocusCue(ctx,scene){if(ctx.strokeStyle=scene.haloColor,ctx.setLineDash([4,3]),scene.keyboardFocusLink){const link=scene.keyboardFocusLink;ctx.lineWidth=Math.max(4,link.width+4),ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke()}scene.keyboardFocusHull&&(ctx.lineWidth=4,ctx.stroke(hullPath(scene.keyboardFocusHull))),ctx.setLineDash([]),scene.keyboardFocusRing&&drawRing(ctx,scene.keyboardFocusRing,scene.haloColor,scene.borderWidths?.[1]??2)}const labelWidths=new WeakMap;function measuredLabelWidth(ctx,label,font){const cached=labelWidths.get(label);if(cached?.text===label.text&&cached.font===font)return cached.width;const width=ctx.measureText(label.text).width;return labelWidths.set(label,{text:label.text,font,width}),width}function drawGraphScene(ctx,camera,scene,viewport){const outside=(x1,y1,x2,y2,padding=0)=>{if(!viewport)return!1;const left=Math.min(x1,x2)-padding,right=Math.max(x1,x2)+padding,top=Math.min(y1,y2)-padding,bottom=Math.max(y1,y2)+padding;return right*camera.k+camera.x<0||bottom*camera.k+camera.y<0||left*camera.k+camera.x>viewport.width||top*camera.k+camera.y>viewport.height};ctx.save(),ctx.transform(camera.k,0,0,camera.k,camera.x,camera.y);const hullOpacity=scene.hullOpacity??.12;for(const hull of scene.hulls){const path=hullPath(hull);ctx.globalAlpha=hullOpacity,ctx.fillStyle=hull.fill,ctx.strokeStyle=hull.fill,ctx.lineWidth=HULL_STROKE_WIDTH,ctx.lineJoin="round",ctx.lineCap="round",ctx.fill(path),ctx.stroke(path),ctx.globalAlpha=1}const dimmedOpacity=scene.dimmedOpacity??1,[thin,medium,thick]=scene.borderWidths??[1,2,3],styleLink=link=>{ctx.strokeStyle=link.selected?scene.selectedColor:link.color,ctx.lineWidth=link.selected?thick:link.width,ctx.setLineDash(link.dash??NO_DASH),ctx.globalAlpha=link.dimmed?dimmedOpacity:1};let style="";ctx.beginPath();for(const link of scene.links){if(link.width<=0||outside(link.x1,link.y1,link.x2,link.y2,Math.max(thick,link.width)*3))continue;const linkStyle=[link.selected||link.color,link.selected||link.width,link.dash,link.dimmed].join("|");linkStyle!==style&&(ctx.stroke(),ctx.beginPath(),styleLink(link),style=linkStyle),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2)}ctx.stroke();for(const link of scene.links)link.width<=0||!link.directed||outside(link.x1,link.y1,link.x2,link.y2,Math.max(6,link.width*3))||(styleLink(link),drawArrowhead(ctx,link));if(ctx.globalAlpha=1,ctx.setLineDash([]),scene.edgeLabels.length){ctx.font=scene.font,ctx.textAlign="center",ctx.textBaseline="middle",ctx.lineWidth=thick;for(const label of scene.edgeLabels){const width=measuredLabelWidth(ctx,label,scene.font);outside(label.x-width/2,label.y,label.x+width/2,label.y,Math.max(16,parseFloat(scene.font)||16)+thick)||(ctx.strokeStyle=scene.labelHaloColor,ctx.strokeText(label.text,label.x,label.y),ctx.fillStyle=scene.labelColor,ctx.fillText(label.text,label.x,label.y))}}for(const node of scene.nodes)outside(node.x,node.y,node.x,node.y,node.r*Math.SQRT2+medium)||(ctx.globalAlpha=node.dimmed?dimmedOpacity:1,ctx.fillStyle=node.fill,ctx.beginPath(),traceShape(ctx,node.x,node.y,node.r,node.shape),ctx.fill(),node.selected&&(ctx.strokeStyle=scene.selectedColor,ctx.lineWidth=medium,ctx.stroke()));if(ctx.globalAlpha=1,scene.showNodeLabels&&scene.nodeLabels.length){ctx.font=scene.font,ctx.textAlign="left",ctx.textBaseline="middle",ctx.fillStyle=scene.labelColor;for(const label of scene.nodeLabels){const width=measuredLabelWidth(ctx,label,scene.font);outside(label.x,label.y,label.x+width,label.y,Math.max(16,parseFloat(scene.font)||16))||ctx.fillText(label.text,label.x,label.y)}}const expandIndicators=scene.expandIndicators??[];if(expandIndicators.length){ctx.lineWidth=thin;for(const indicator of expandIndicators){const bx=indicator.x+indicator.r*EXPAND_BADGE_OFFSET,by=indicator.y-indicator.r*EXPAND_BADGE_OFFSET;if(outside(bx,by,bx,by,EXPAND_BADGE_R+thin))continue;const path=new Path2D;path.arc(bx,by,EXPAND_BADGE_R,0,Math.PI*2),ctx.fillStyle=scene.expandBadgeFill??"",ctx.fill(path),ctx.strokeStyle=scene.expandBadgeStroke??"",ctx.stroke(path),ctx.strokeStyle=scene.labelColor,ctx.beginPath(),ctx.moveTo(bx-EXPAND_BADGE_R/2,by),ctx.lineTo(bx+EXPAND_BADGE_R/2,by),ctx.moveTo(bx,by-EXPAND_BADGE_R/2),ctx.lineTo(bx,by+EXPAND_BADGE_R/2),ctx.stroke()}}scene.focusHalo&&drawRing(ctx,scene.focusHalo,scene.haloColor,medium),drawKeyboardFocusCue(ctx,scene),ctx.restore()}function indexToPickColor(index){const v=index+1;return`rgb(${v>>16&255},${v>>8&255},${v&255})`}function pickColorToIndex(r,g,b){return(r<<16|g<<8|b)-1}function drawPickingScene(ctx,camera,scene){ctx.imageSmoothingEnabled=!1,ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height),ctx.save(),ctx.transform(camera.k,0,0,camera.k,camera.x,camera.y);const cameraScale=Number.isFinite(camera.k)&&Math.abs(camera.k)>0?Math.abs(camera.k):1,minimumWorldStroke=(MIN_PICK_TARGET_PX+PICK_RASTER_GUARD_PX)/cameraScale;let idx=0;for(const hull of scene.hulls){const color=indexToPickColor(idx++),path=hullPath(hull);ctx.fillStyle=color,ctx.strokeStyle=color,ctx.lineWidth=Math.max(HULL_STROKE_WIDTH,minimumWorldStroke),ctx.lineJoin="round",ctx.lineCap="round",ctx.fill(path),ctx.stroke(path)}for(const link of scene.links)ctx.strokeStyle=indexToPickColor(idx++),ctx.lineWidth=Math.max(link.width+6,8,minimumWorldStroke),ctx.lineCap="round",ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke();for(const node of scene.nodes)ctx.fillStyle=indexToPickColor(idx++),ctx.beginPath(),traceShape(ctx,node.x,node.y,Math.max(node.r,minimumWorldStroke/2),node.shape),ctx.fill();ctx.restore()}export{EXPAND_BADGE_OFFSET,EXPAND_BADGE_R,drawGraphScene,drawPickingScene,pickColorToIndex,shapeHalfSide};

package/dist/components/retrieval/graph/graph-source-composition.js

@@ -0,0 +1 @@
+const states=new WeakMap;function setGraphSourceComposition(host,profile){const state=states.get(host)??{},old=state.profile;if(profile){if(typeof profile.search!="string"||profile.search.length>65536||profile.nodeTypes.length>500)throw new RangeError("Invalid graph composition filter");let units=0;for(const type of profile.nodeTypes)if(typeof type!="string"||!type.trim()||type.length>65536||(units+=type.length)>2e6)throw new RangeError("Invalid graph composition type")}old===profile||old&&profile&&old.search===profile.search&&old.empty===profile.empty&&old.accepted===profile.accepted&&old.nodeTypes.length===profile.nodeTypes.length&&old.nodeTypes.every((type,index)=>type===profile.nodeTypes[index])||(state.profile=profile?Object.freeze({...profile,nodeTypes:Object.freeze([...profile.nodeTypes])}):void 0,states.set(host,state),state.changed?.())}function resolveGraphSourceComposition(host,keys){if(keys.length>32||keys.some(key=>typeof key!="string"||key.length>65536||!/^(node|edge):.+/s.test(key)))return Promise.resolve(void 0);const state=states.get(host);return state?.profile&&!state.profile.empty?state.resolve?.(Object.freeze([...keys]))??Promise.resolve(void 0):Promise.resolve(void 0)}function focusGraphSourceComposition(host,key){const state=states.get(host);return!state?.profile||state.profile.empty||!key.startsWith("node:")||key.length>65536?Promise.resolve(void 0):state.focus?.(key)??Promise.resolve(void 0)}class GraphSourceCompositionController{constructor(host,changed,resolve,focus){this.host=host;const state=states.get(host)??{};state.changed=changed,state.resolve=resolve,state.focus=focus,states.set(host,state)}get profile(){return states.get(this.host)?.profile}}export{GraphSourceCompositionController,focusGraphSourceComposition,resolveGraphSourceComposition,setGraphSourceComposition};

package/dist/components/retrieval/graph/graph-source-controller.js

@@ -0,0 +1 @@
+import{GraphSceneController}from"../../../internal/graph-scene-controller.js";const graphSceneDomain={create:reader=>({node(value,entryPosition){const id=reader.text(reader.field(value,"id"),!0),radius=reader.field(value,"radius"),expandable=reader.flag(value,"expandable"),ownPosition=reader.position(reader.field(value,"position")),placed=reader.position(entryPosition)??ownPosition;return Object.freeze({id,...reader.texts(value,["label","accessibleLabel","description","color","type","communityId"]),...radius===void 0?{}:{radius:Math.max(6,Math.min(24,reader.number(radius)))},...expandable===void 0?{}:{expandable},...placed===void 0?{}:{position:placed}})},edge(value){const id=reader.text(reader.field(value,"id"),!0),source=reader.text(reader.field(value,"source"),!0),target=reader.text(reader.field(value,"target"),!0),width=reader.field(value,"width"),directed=reader.flag(value,"directed"),rawDash=reader.field(value,"dash");let dash;if(rawDash!==void 0){const entries=reader.array(rawDash,32);dash=Object.freeze(Array.from({length:entries.length},(_,i)=>{const item=reader.number(entries.at(i),1e6);if(item<0)throw new RangeError("Invalid scene dash");return item}))}return Object.freeze({id,source,target,...reader.texts(value,["label","accessibleLabel","description","color"]),...width===void 0?{}:{width:Math.max(0,reader.number(width,1e6))},...directed===void 0?{}:{directed},...dash===void 0?{}:{dash}})}})};class GraphSourceController extends GraphSceneController{constructor(host,options){super(host,{...options,domain:graphSceneDomain})}}export{GraphSourceController};

package/dist/components/retrieval/graph/graph-spatial-controller.js

@@ -1,4 +1,4 @@
-import{html,nothing}from"lit";import{finiteRange}from"../../../internal/numbers.js";import{nextId}from"../../../internal/a11y.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{graphLinkIdentity}from"./graph-model.js";import{fittedGraphCamera,normalizeGraphCamera,panGraphCamera,pickSpatialScene,projectSpatialPoint,projectSpatialScene,spatialNodePosition}from"./graph-spatial.js";const PAGE_SIZE=200,ORBIT_STEP=Math.PI/18;class GraphSpatialController{constructor(host,options){this.host=host,this.options=options,this.world=[],this.edges=[],this.items=[],this.communityCounts=new Map,this.worldById=new Map,this.nodeIndexById=new Map,this.currentCamera=normalizeGraphCamera(void 0,{yaw:0,pitch:0,distance:500,target:{x:0,y:0,z:0}}),this.fittedDistance=500,this.cameraInitialized=!1,this.pendingInitialFit=!1,this.visible=!0,this.notifyCamera=!1,this.contextFailed=!1,this.page=0,this.focusAfterViewChange=!1,this.instructionsId=nextId("graph-spatial-instructions"),this.pointerDown=event=>{if(!(event.button!==0||this.gesture)){this.canvas?.focus(),this.gesture={id:event.pointerId,startX:event.clientX,startY:event.clientY,x:event.clientX,y:event.clientY,moved:!1,pan:event.shiftKey};try{this.canvas?.setPointerCapture(event.pointerId)}catch{}this.setHover(void 0)}},this.pointerMove=event=>{const gesture=this.gesture;if(!gesture){this.setHover(this.hit(event.clientX,event.clientY));return}if(gesture.id!==event.pointerId)return;gesture.moved||=Math.hypot(event.clientX-gesture.startX,event.clientY-gesture.startY)>5;const dx=event.clientX-gesture.x,dy=event.clientY-gesture.y;gesture.x=event.clientX,gesture.y=event.clientY,gesture.moved&&(gesture.pan?this.changeCamera(panGraphCamera(this.currentCamera,dx,dy,this.viewport())):this.orbit(dx*.008,-dy*.008))},this.pointerUp=event=>{const gesture=this.gesture;if(!(!gesture||gesture.id!==event.pointerId)&&(this.cancelGesture(),!gesture.moved&&Math.hypot(event.clientX-gesture.startX,event.clientY-gesture.startY)<=5)){const hit=this.hit(event.clientX,event.clientY);hit&&this.options.activate(hit,event)}},this.pointerCancel=event=>{event.pointerId===this.gesture?.id&&this.cancelGesture()},this.wheel=event=>{this.host.shadowRoot?.activeElement!==this.canvas&&!this.gesture||(event.preventDefault(),this.zoom(Math.exp(-finiteRange(event.deltaY,0,-300,300)*.002)))},this.keyDown=event=>{const direction=this.options.direction()==="rtl"?-1:1,dx=event.key==="ArrowRight"?direction:event.key==="ArrowLeft"?-direction:0,dy=event.key==="ArrowDown"?1:event.key==="ArrowUp"?-1:0;dx||dy?(event.preventDefault(),event.shiftKey?this.changeCamera(panGraphCamera(this.currentCamera,dx*24,dy*24,this.viewport())):this.orbit(dx*ORBIT_STEP,-dy*ORBIT_STEP)):event.key==="+"||event.key==="="||event.key==="-"?(event.preventDefault(),this.zoom(event.key==="-"?1/1.2:1.2)):event.key==="Home"?(event.preventDefault(),this.fit()):event.key==="Escape"&&this.options.clearSelection()}}prepare(){const model=this.options.model();if(this.source!==model||this.hiddenTypes!==this.host.hiddenTypes){this.source=model,this.hiddenTypes=this.host.hiddenTypes;const hidden=new Set(this.host.hiddenTypes),allIds=new Set(model.nodes.map(node=>node.id));this.world=model.nodes.filter(node=>node.type==null||!hidden.has(node.type)).map(node=>({node,position:spatialNodePosition(node),radius:finiteRange(node.radius??15,15,6,24),shape:this.options.nodeShape(node)})),this.worldById=new Map(this.world.map(node=>[node.node.id,node])),this.nodeIndexById=new Map(this.world.map((node,index)=>[node.node.id,index])),this.edges=model.links.filter(edge=>this.worldById.has(edge.source)&&(this.worldById.has(edge.target)||!allIds.has(edge.target)));const communityMembers=new Map;for(const{node}of this.world){if(!node.communityId)continue;let members=communityMembers.get(node.communityId);members||communityMembers.set(node.communityId,members=new Set),members.add(node.id)}this.communityCounts=new Map;const communities=model.communities.filter(community=>{const members=communityMembers.get(community.id)??new Set;for(const id of community.memberIds)this.worldById.has(id)&&members.add(id);return this.communityCounts.set(community.id,members.size),members.size>0});this.items=[...this.world.map(({node})=>({kind:"node",node})),...this.edges.map(edge=>({kind:"link",edge})),...communities.map(community=>({kind:"community",community}))];const focused=this.host.shadowRoot?.activeElement;if(focused?.getAttribute("part")==="spatial-list-item"){const id=focused.getAttribute("data-node-id");id&&!this.worldById.has(id)&&(this.focusAfterViewChange=!0)}this.page=Math.min(this.page,Math.max(0,Math.ceil(this.items.length/PAGE_SIZE)-1)),this.scene=void 0,this.setHover(void 0),!this.cameraInitialized&&this.world.length&&(this.currentCamera=fittedGraphCamera(this.world,this.viewport()),this.fittedDistance=this.currentCamera.distance,this.cameraInitialized=!0,this.pendingInitialFit=!0)}this.authoredCamera!==this.host.camera&&(this.authoredCamera=this.host.camera,this.pendingInitialFit=!1,this.currentCamera=this.authoredCamera?normalizeGraphCamera(this.authoredCamera,this.currentCamera):fittedGraphCamera(this.world,this.viewport()),this.scene=void 0)}update(){if(!this.host.isConnected||this.host.view==="2d"){this.disconnect();return}this.paint=void 0;const next=this.host.renderRoot.querySelector('[part="spatial-canvas"]')??void 0;if(this.canvas!==next){this.cancelGesture(),this.resize?.disconnect(),this.intersection?.disconnect(),this.canvas=next,this.scene=void 0,this.fitInitialCanvas();try{this.context=next?.getContext("2d")??void 0}catch{this.context=void 0}next&&!this.context&&!this.contextFailed&&(this.contextFailed=!0,this.options.afterUpdate(()=>{!this.contextFailed||this.host.view!=="3d"||(this.options.unavailable(),this.host.requestUpdate())},"graph-spatial-context"));const view=this.host.ownerDocument.defaultView;if(next&&view){const Resize=view.ResizeObserver;Resize&&(this.resize=new Resize(()=>{this.fitInitialCanvas(),this.scene=void 0,this.schedule()}),this.resize.observe(next));const Intersection=view.IntersectionObserver;Intersection&&(this.intersection=new Intersection(entries=>{this.visible=entries[0]?.isIntersecting??!0,this.visible&&this.schedule()}),this.intersection.observe(next))}}this.schedule(),this.focusAfterViewChange&&(this.focusAfterViewChange=!1,(this.host.renderRoot.querySelector('[part="spatial-list-item"]')??this.host.renderRoot.querySelector('[part="spatial-canvas"]')??this.host.renderRoot.querySelector('[data-spatial-action="3d"]'))?.focus())}disconnect(){this.cancelGesture(),this.frame!==void 0&&this.frameWindow?.cancelAnimationFrame(this.frame),this.frame=void 0,this.frameWindow=void 0,this.notifyCamera=!1,this.lastKeyActivation=void 0,this.resize?.disconnect(),this.resize=void 0,this.intersection?.disconnect(),this.intersection=void 0,this.canvas=void 0,this.context=void 0,this.scene=void 0,this.hover=void 0,this.visible=!0,this.contextFailed=!1}invalidate(){this.paint=void 0,this.scene=void 0,this.schedule()}fitInitialCanvas(){!this.pendingInitialFit||!this.canvas?.clientWidth||!this.canvas.clientHeight||(this.pendingInitialFit=!1,this.currentCamera=fittedGraphCamera(this.world,this.viewport()),this.fittedDistance=this.currentCamera.distance,this.scene=void 0)}viewport(){return{width:Math.max(1,this.canvas?.clientWidth||this.options.viewport().width),height:Math.max(1,this.canvas?.clientHeight||this.options.viewport().height)}}position(id){return this.prepare(),this.worldById.get(id)?.position}screenPosition(id){if(this.host.view!=="3d"||!this.canvas)return;const node=this.worldById.get(id),point=node&&projectSpatialPoint(node.position,this.currentCamera,this.viewport());if(!point)return;const bounds=this.canvas.getBoundingClientRect(),hostBounds=this.host.getBoundingClientRect();return{x:bounds.left-hostBounds.left+point.x,y:bounds.top-hostBounds.top+point.y}}fit(padding){if(this.prepare(),!this.world.length)return;const camera=fittedGraphCamera(this.world,this.viewport(),padding);this.fittedDistance=camera.distance,this.changeCamera(camera)}focusNode(id,zoom){this.prepare();const node=this.worldById.get(id);return node?((this.host.view==="list"||this.contextFailed)&&(this.page=Math.floor((this.nodeIndexById.get(id)??0)/PAGE_SIZE),this.host.requestUpdate()),this.changeCamera({...this.currentCamera,target:node.position,distance:zoom===void 0?this.currentCamera.distance:this.fittedDistance/this.safeZoom(zoom)}),!0):!1}safeZoom(value){const min=finiteRange(this.host.minZoom,.1,.001,1e3),max=finiteRange(this.host.maxZoom,8,.001,1e3);return finiteRange(value,1,Math.min(min,max),Math.max(min,max))}zoom(factor){const zoom=this.safeZoom(this.fittedDistance/this.currentCamera.distance*factor);this.changeCamera({...this.currentCamera,distance:this.fittedDistance/zoom})}orbit(yaw,pitch){this.changeCamera({...this.currentCamera,yaw:this.currentCamera.yaw+yaw,pitch:this.currentCamera.pitch+pitch})}changeCamera(camera){this.pendingInitialFit=!1,this.currentCamera=normalizeGraphCamera(camera,this.currentCamera),this.scene=void 0,this.notifyCamera=!0,this.schedule()}schedule(){if(!this.host.isConnected||this.host.view==="2d"||this.frame!==void 0||!this.visible&&!this.notifyCamera)return;const view=this.host.ownerDocument.defaultView;view&&(this.frameWindow=view,this.frame=view.requestAnimationFrame(()=>{this.frame=void 0,this.frameWindow=void 0,!(!this.host.isConnected||this.host.view==="2d")&&(this.visible&&this.draw(),this.notifyCamera&&(this.notifyCamera=!1,this.options.cameraChanged(normalizeGraphCamera(this.currentCamera,this.currentCamera))))}))}projectedScene(){const paint=this.paint??=this.options.paint(this.world,this.edges),viewport=this.viewport(),previousEdges=this.sceneVisibleEdges;return(this.sceneViewport?.width!==viewport.width||this.sceneViewport.height!==viewport.height||!previousEdges||previousEdges.size!==paint.visibleEdges.size||[...paint.visibleEdges].some(id=>!previousEdges.has(id)))&&(this.scene=void 0),this.scene||(this.scene=projectSpatialScene(this.world,this.edges.filter(edge=>paint.visibleEdges.has(graphLinkIdentity(edge))),this.currentCamera,viewport),this.sceneViewport=viewport,this.sceneVisibleEdges=paint.visibleEdges),this.scene}draw(){const canvas=this.canvas,ctx=this.context;if(!canvas||!ctx||this.host.view!=="3d")return;const size=this.viewport(),dpr=finiteRange(this.host.ownerDocument.defaultView?.devicePixelRatio??1,1,1,4),scale=Math.min(dpr,8192/Math.max(size.width,size.height)),width=Math.max(1,Math.round(size.width*scale)),height=Math.max(1,Math.round(size.height*scale));(canvas.width!==width||canvas.height!==height)&&(canvas.width=width,canvas.height=height),ctx.setTransform(scale,0,0,scale,0,0),ctx.clearRect(0,0,size.width,size.height);const paint=this.paint??=this.options.paint(this.world,this.edges);ctx.font=`${paint.fontSize}px ${paint.font}`,ctx.textBaseline="middle";const selectedNodes=new Set(this.host.selectedNodeIds),selectedEdges=new Set(this.host.selectedEdgeIds),dimmedNodes=new Set(this.host.dimmedNodeIds),dimmedEdges=new Set(this.host.dimmedEdgeIds),zoom=this.fittedDistance/this.currentCamera.distance,scene=this.projectedScene(),projectedById=new Map(scene.nodes.map(node=>[node.node.id,node]));for(const primitive of scene.primitives){if(ctx.save(),primitive.kind==="node"){const entry=primitive.value,id=entry.node.id;ctx.globalAlpha=dimmedNodes.has(id)?paint.dimmedOpacity:1,this.drawNode(ctx,entry,paint.nodes.get(id)??paint.text),(selectedNodes.has(id)||this.host.focusNodeId===id||this.hover?.kind==="node"&&this.hover.id===id)&&(ctx.strokeStyle=paint.selected,ctx.lineWidth=2,ctx.beginPath(),ctx.arc(entry.x,entry.y,entry.screenRadius+4,0,Math.PI*2),ctx.stroke()),this.host.nodeLabels!=="none"&&(this.host.nodeLabels==="always"||zoom>=.5)&&(ctx.fillStyle=paint.text,ctx.fillText(entry.node.label??entry.node.id,entry.x+entry.screenRadius+4,entry.y)),entry.node.expandable&&(ctx.fillStyle=paint.text,ctx.fillText("+",entry.x+entry.screenRadius,entry.y-entry.screenRadius))}else{const entry=primitive.value;ctx.globalAlpha=dimmedEdges.has(entry.id)?paint.dimmedOpacity:1;const selected=selectedEdges.has(entry.id)||this.hover?.kind==="link"&&this.hover.id===entry.id;this.drawSegment(ctx,entry,selected?paint.selected:paint.edges.get(entry.id)??paint.text,selected,projectedById.get(entry.edge.target)?.screenRadius??0),entry.middle&&this.host.withEdgeLabels&&zoom>=finiteRange(this.host.edgeLabelMinZoom,.6,.001,1e3)&&entry.edge.label&&(ctx.fillStyle=paint.text,ctx.fillText(entry.edge.label,entry.a.x,entry.a.y-paint.fontSize))}ctx.restore()}}drawNode(ctx,node,fill){ctx.fillStyle=fill,ctx.beginPath();const r=node.screenRadius;if(node.shape==="circle")ctx.arc(node.x,node.y,r,0,Math.PI*2);else if(node.shape==="square"){const half=r*Math.sqrt(Math.PI)/2;ctx.rect(node.x-half,node.y-half,2*half,2*half)}else{const half=r*Math.sqrt(Math.PI/2);ctx.moveTo(node.x,node.y-half),ctx.lineTo(node.x+half,node.y),ctx.lineTo(node.x,node.y+half),ctx.lineTo(node.x-half,node.y),ctx.closePath()}ctx.fill()}drawSegment(ctx,segment,color,selected,targetRadius){const{a,b,edge}=segment;ctx.strokeStyle=color,ctx.fillStyle=color,ctx.lineWidth=finiteRange(edge.width??1.5,1.5,0,1e3)+(selected?2:0);const dash=edge.dash;if(ctx.setLineDash(segment.dangling?[4,4]:Array.isArray(dash)&&dash.length<=32&&dash.every(value=>Number.isFinite(value)&&value>=0)?[...dash]:[]),ctx.lineDashOffset=-segment.offset,ctx.beginPath(),ctx.moveTo(a.x,a.y),ctx.lineTo(b.x,b.y),ctx.stroke(),segment.last&&edge.directed){const angle=Math.atan2(b.y-a.y,b.x-a.x),inset=targetRadius,x=b.x-Math.cos(angle)*inset,y=b.y-Math.sin(angle)*inset,size=Math.max(6,ctx.lineWidth*3);ctx.beginPath(),ctx.moveTo(x,y),ctx.lineTo(x-Math.cos(angle-.45)*size,y-Math.sin(angle-.45)*size),ctx.lineTo(x-Math.cos(angle+.45)*size,y-Math.sin(angle+.45)*size),ctx.closePath(),ctx.fill()}}hit(clientX,clientY){const bounds=this.canvas?.getBoundingClientRect();if(!bounds)return;const scene=this.projectedScene();return pickSpatialScene(scene,clientX-bounds.left,clientY-bounds.top)}setHover(next){if(this.hover?.kind===next?.kind&&this.hover?.id===next?.id)return;const previous=this.hover;this.hover=next,this.canvas&&(this.canvas.title=next?.kind==="node"?this.options.nodeTooltip(next.node):next?.kind==="link"?this.options.edgeTooltip(next.edge):""),this.options.hover(previous,next),this.schedule()}cancelGesture(){const gesture=this.gesture;this.gesture=void 0,gesture&&this.canvas?.hasPointerCapture(gesture.id)&&this.canvas.releasePointerCapture(gesture.id)}changeView(view){this.cancelGesture(),view==="3d"&&(this.contextFailed=!1),this.host.view=view,this.host.requestUpdate(),this.focusAfterViewChange=!0,this.options.viewChanged()}changePage(delta){this.page=Math.max(0,Math.min(Math.ceil(this.items.length/PAGE_SIZE)-1,this.page+delta)),this.focusAfterViewChange=!0,this.host.requestUpdate()}listKeyDown(item,event){if(item.kind!=="node"||event.key!=="Enter"&&event.key!==" "||event.repeat)return;const time=this.host.ownerDocument.defaultView?.performance.now()??0;this.lastKeyActivation?.id===item.node.id&&time-this.lastKeyActivation.time<=500?(this.lastKeyActivation=void 0,this.options.expand(item.node.id)):this.lastKeyActivation={id:item.node.id,time}}activateItem(item,event){item.kind==="node"?this.options.activate({kind:"node",id:item.node.id,node:item.node},event):item.kind==="link"?this.options.activate({kind:"link",id:graphLinkIdentity(item.edge),edge:item.edge},event):this.options.community(item.community)}render(limitNotices){this.prepare();const messages=this.options.messages(),list=this.host.view==="list"||this.contextFailed,pageItems=this.items.slice(this.page*PAGE_SIZE,(this.page+1)*PAGE_SIZE),number=getNumberFormat(this.options.locale()),selectedNodes=new Set(this.host.selectedNodeIds),selectedEdges=new Set(this.host.selectedEdgeIds),button=(action,label,callback)=>html`<button type="button" part="spatial-control" data-spatial-action=${action} @click=${callback}>${label}</button>`;return html`<div part="base" class="spatial-base">
+import{html,nothing}from"lit";import{finiteRange}from"../../../internal/numbers.js";import{nextId}from"../../../internal/a11y.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{graphLinkIdentity}from"./graph-model.js";import{SpatialHitIndex,SpatialProjectionWorkspace,fittedGraphCamera,normalizeGraphCamera,panGraphCamera,projectSpatialPoint,projectSpatialScene,spatialNodePosition}from"./graph-spatial.js";const EMPTY_DASH={values:[],key:""},DANGLING_DASH={values:[4,4],key:"4,4"},selectionSets=new WeakMap;function selectedIds(ids){if(!Object.isFrozen(ids))return new Set(ids);let result=selectionSets.get(ids);return result||(result=new Set(ids),selectionSets.set(ids,result)),result}const PAGE_SIZE=200,ORBIT_STEP=Math.PI/18;class GraphSpatialController{constructor(host,options){this.host=host,this.options=options,this.world=[],this.edges=[],this.items=[],this.communityCounts=new Map,this.worldById=new Map,this.nodeIndexById=new Map,this.currentCamera=normalizeGraphCamera(void 0,{yaw:0,pitch:0,distance:500,target:{x:0,y:0,z:0}}),this.fittedDistance=500,this.cameraInitialized=!1,this.pendingInitialFit=!1,this.projectedById=new Map,this.hoverGeneration=0,this.projectionWorkspace=new SpatialProjectionWorkspace,this.edgeDashes=new WeakMap,this.textWidths=new Map,this.measuredFont="",this.visible=!0,this.notifyCamera=!1,this.contextFailed=!1,this.page=0,this.focusAfterViewChange=!1,this.instructionsId=nextId("graph-spatial-instructions"),this.pointerDown=event=>{if(!(event.button!==0||this.gesture)){this.cancelHover(),this.canvas?.focus(),this.gesture={id:event.pointerId,startX:event.clientX,startY:event.clientY,x:event.clientX,y:event.clientY,moved:!1,pan:event.shiftKey};try{this.canvas?.setPointerCapture(event.pointerId)}catch{}this.setHover(void 0)}},this.pointerMove=event=>{const gesture=this.gesture;if(!gesture){this.queueHover(event.clientX,event.clientY);return}if(gesture.id!==event.pointerId)return;gesture.moved||=Math.hypot(event.clientX-gesture.startX,event.clientY-gesture.startY)>5;const dx=event.clientX-gesture.x,dy=event.clientY-gesture.y;gesture.x=event.clientX,gesture.y=event.clientY,gesture.moved&&(gesture.pan?this.changeCamera(panGraphCamera(this.currentCamera,dx,dy,this.viewport())):this.orbit(dx*.008,-dy*.008))},this.pointerUp=event=>{const gesture=this.gesture;if(!(!gesture||gesture.id!==event.pointerId)&&(this.cancelGesture(),!gesture.moved&&Math.hypot(event.clientX-gesture.startX,event.clientY-gesture.startY)<=5)){const hit=this.hit(event.clientX,event.clientY);hit&&this.options.activate(hit,event)}},this.pointerCancel=event=>{this.cancelHover(),event.pointerId===this.gesture?.id&&this.cancelGesture()},this.wheel=event=>{this.host.shadowRoot?.activeElement!==this.canvas&&!this.gesture||(event.preventDefault(),this.zoom(Math.exp(-finiteRange(event.deltaY,0,-300,300)*.002)))},this.keyDown=event=>{const direction=this.options.direction()==="rtl"?-1:1,dx=event.key==="ArrowRight"?direction:event.key==="ArrowLeft"?-direction:0,dy=event.key==="ArrowDown"?1:event.key==="ArrowUp"?-1:0;dx||dy?(event.preventDefault(),event.shiftKey?this.changeCamera(panGraphCamera(this.currentCamera,dx*24,dy*24,this.viewport())):this.orbit(dx*ORBIT_STEP,-dy*ORBIT_STEP)):event.key==="+"||event.key==="="||event.key==="-"?(event.preventDefault(),this.zoom(event.key==="-"?1/1.2:1.2)):event.key==="Home"?(event.preventDefault(),this.fit()):event.key==="Escape"&&this.options.clearSelection()}}prepare(){const model=this.options.model();if(this.source!==model||this.hiddenTypes!==this.host.hiddenTypes){this.source=model,this.hiddenTypes=this.host.hiddenTypes;const hidden=new Set(this.host.hiddenTypes),allIds=new Set(model.nodes.map(node=>node.id));this.world=model.nodes.filter(node=>node.type==null||!hidden.has(node.type)).map(node=>({node,position:spatialNodePosition(node),radius:finiteRange(node.radius??15,15,6,24),shape:this.options.nodeShape(node)})),this.worldById=new Map(this.world.map(node=>[node.node.id,node])),this.nodeIndexById=new Map(this.world.map((node,index)=>[node.node.id,index])),this.edges=model.links.filter(edge=>this.worldById.has(edge.source)&&(this.worldById.has(edge.target)||!allIds.has(edge.target)));const communityMembers=new Map;for(const{node}of this.world){if(!node.communityId)continue;let members=communityMembers.get(node.communityId);members||communityMembers.set(node.communityId,members=new Set),members.add(node.id)}this.communityCounts=new Map;const communities=model.communities.filter(community=>{const members=communityMembers.get(community.id)??new Set;for(const id of community.memberIds)this.worldById.has(id)&&members.add(id);return this.communityCounts.set(community.id,members.size),members.size>0});this.items=[...this.world.map(({node})=>({kind:"node",node})),...this.edges.map(edge=>({kind:"link",edge})),...communities.map(community=>({kind:"community",community}))];const focused=this.host.shadowRoot?.activeElement;if(focused?.getAttribute("part")==="spatial-list-item"){const id=focused.getAttribute("data-node-id");id&&!this.worldById.has(id)&&(this.focusAfterViewChange=!0)}this.page=Math.min(this.page,Math.max(0,Math.ceil(this.items.length/PAGE_SIZE)-1)),this.scene=void 0,this.setHover(void 0),!this.cameraInitialized&&this.world.length&&(this.currentCamera=fittedGraphCamera(this.world,this.viewport()),this.fittedDistance=this.currentCamera.distance,this.cameraInitialized=!0,this.pendingInitialFit=!0)}this.authoredCamera!==this.host.camera&&(this.authoredCamera=this.host.camera,this.pendingInitialFit=!1,this.currentCamera=this.authoredCamera?normalizeGraphCamera(this.authoredCamera,this.currentCamera):fittedGraphCamera(this.world,this.viewport()),this.scene=void 0)}update(repaint=!0){if(!this.host.isConnected||this.host.view==="2d"){this.disconnect();return}repaint&&(this.paint=void 0);const next=this.host.renderRoot.querySelector('[part="spatial-canvas"]')??void 0;if(this.canvas!==next){this.cancelGesture(),this.resize?.disconnect(),this.intersection?.disconnect(),this.canvas=next,this.scene=void 0,this.fitInitialCanvas();try{this.context=next?.getContext("2d")??void 0}catch{this.context=void 0}next&&!this.context&&!this.contextFailed&&(this.contextFailed=!0,this.options.afterUpdate(()=>{!this.contextFailed||this.host.view!=="3d"||(this.options.unavailable(),this.options.repaint())},"graph-spatial-context"));const view=this.host.ownerDocument.defaultView;if(next&&view){const Resize=view.ResizeObserver;Resize&&(this.resize=new Resize(()=>{this.fitInitialCanvas(),this.scene=void 0,this.schedule()}),this.resize.observe(next));const Intersection=view.IntersectionObserver;Intersection&&(this.intersection=new Intersection(entries=>{this.visible=entries[0]?.isIntersecting??!0,this.visible&&this.schedule()}),this.intersection.observe(next))}}this.schedule(),this.focusAfterViewChange&&(this.focusAfterViewChange=!1,(this.host.renderRoot.querySelector('[part="spatial-list-item"]')??this.host.renderRoot.querySelector('[part="spatial-canvas"]')??this.host.renderRoot.querySelector('[data-spatial-action="3d"]'))?.focus())}disconnect(){this.cancelHover(),this.hitIndex=void 0,this.cancelGesture(),this.frame!==void 0&&this.frameWindow?.cancelAnimationFrame(this.frame),this.frame=void 0,this.frameWindow=void 0,this.notifyCamera=!1,this.lastKeyActivation=void 0,this.resize?.disconnect(),this.resize=void 0,this.intersection?.disconnect(),this.intersection=void 0,this.canvas=void 0,this.context=void 0,this.scene=void 0,this.hover=void 0,this.visible=!0,this.contextFailed=!1}invalidate(){this.paint=void 0,this.scene=void 0,this.schedule()}fitInitialCanvas(){!this.pendingInitialFit||!this.canvas?.clientWidth||!this.canvas.clientHeight||(this.pendingInitialFit=!1,this.currentCamera=fittedGraphCamera(this.world,this.viewport()),this.fittedDistance=this.currentCamera.distance,this.scene=void 0)}viewport(){return{width:Math.max(1,this.canvas?.clientWidth||this.options.viewport().width),height:Math.max(1,this.canvas?.clientHeight||this.options.viewport().height)}}position(id){return this.prepare(),this.worldById.get(id)?.position}screenPosition(id){if(this.host.view!=="3d"||!this.canvas)return;const node=this.worldById.get(id),point=node&&projectSpatialPoint(node.position,this.currentCamera,this.viewport());if(!point)return;const bounds=this.canvas.getBoundingClientRect(),hostBounds=this.host.getBoundingClientRect();return{x:bounds.left-hostBounds.left+point.x,y:bounds.top-hostBounds.top+point.y}}fit(padding){if(this.prepare(),!this.world.length)return;const camera=fittedGraphCamera(this.world,this.viewport(),padding);this.fittedDistance=camera.distance,this.changeCamera(camera)}focusNode(id,zoom){this.prepare();const node=this.worldById.get(id);return node?((this.host.view==="list"||this.contextFailed)&&(this.page=Math.floor((this.nodeIndexById.get(id)??0)/PAGE_SIZE),this.options.repaint()),this.changeCamera({...this.currentCamera,target:node.position,distance:zoom===void 0?this.currentCamera.distance:this.fittedDistance/this.safeZoom(zoom)}),!0):!1}safeZoom(value){const min=finiteRange(this.host.minZoom,.1,.001,1e3),max=finiteRange(this.host.maxZoom,8,.001,1e3);return finiteRange(value,1,Math.min(min,max),Math.max(min,max))}zoom(factor){const zoom=this.safeZoom(this.fittedDistance/this.currentCamera.distance*factor);this.changeCamera({...this.currentCamera,distance:this.fittedDistance/zoom})}orbit(yaw,pitch){this.changeCamera({...this.currentCamera,yaw:this.currentCamera.yaw+yaw,pitch:this.currentCamera.pitch+pitch})}changeCamera(camera){this.pendingInitialFit=!1,this.currentCamera=normalizeGraphCamera(camera,this.currentCamera),this.scene=void 0,this.notifyCamera=!0,this.schedule()}schedule(){if(!this.host.isConnected||this.host.view==="2d"||this.frame!==void 0||!this.visible&&!this.notifyCamera)return;const view=this.host.ownerDocument.defaultView;view&&(this.frameWindow=view,this.frame=view.requestAnimationFrame(()=>{this.frame=void 0,this.frameWindow=void 0,!(!this.host.isConnected||this.host.view==="2d")&&(this.visible&&this.draw(),this.notifyCamera&&(this.notifyCamera=!1,this.options.cameraChanged(normalizeGraphCamera(this.currentCamera,this.currentCamera))))}))}projectedScene(viewport=this.viewport()){const paint=this.paint??=this.options.paint(this.world,this.edges),previousEdges=this.sceneVisibleEdges;return(this.sceneViewport?.width!==viewport.width||this.sceneViewport.height!==viewport.height||!previousEdges||previousEdges!==paint.visibleEdges&&(previousEdges.size!==paint.visibleEdges.size||[...paint.visibleEdges].some(id=>!previousEdges.has(id))))&&(this.scene=void 0),this.scene||(this.scene=projectSpatialScene(this.world,this.edges.filter(edge=>paint.visibleEdges.has(graphLinkIdentity(edge))),this.currentCamera,viewport,this.projectionWorkspace),this.hitIndex=new SpatialHitIndex(this.scene),this.projectedById=new Map(this.scene.nodes.map(node=>[node.node.id,node])),this.sceneViewport=viewport),this.sceneVisibleEdges=paint.visibleEdges,this.scene}textWidth(ctx,text){this.measuredFont!==ctx.font&&(this.measuredFont=ctx.font,this.textWidths.clear());let width=this.textWidths.get(text);return width===void 0&&(width=ctx.measureText(text).width,this.textWidths.size>=1e4&&this.textWidths.delete(this.textWidths.keys().next().value),this.textWidths.set(text,width)),width}draw(){const canvas=this.canvas,ctx=this.context;if(!canvas||!ctx||this.host.view!=="3d")return;const size=this.viewport(),dpr=finiteRange(this.host.ownerDocument.defaultView?.devicePixelRatio??1,1,1,4),scale=Math.min(dpr,8192/Math.max(size.width,size.height)),width=Math.max(1,Math.round(size.width*scale)),height=Math.max(1,Math.round(size.height*scale));(canvas.width!==width||canvas.height!==height)&&(canvas.width=width,canvas.height=height),ctx.setTransform(scale,0,0,scale,0,0),ctx.clearRect(0,0,size.width,size.height);const paint=this.paint??=this.options.paint(this.world,this.edges);ctx.save(),ctx.font=`${paint.fontSize}px ${paint.font}`,ctx.textBaseline="middle";const selectedNodes=selectedIds(this.host.selectedNodeIds),selectedEdges=selectedIds(this.host.selectedEdgeIds),dimmedNodes=selectedIds(this.host.dimmedNodeIds),dimmedEdges=selectedIds(this.host.dimmedEdgeIds),zoom=this.fittedDistance/this.currentCamera.distance,scene=this.projectedScene(size),outside=(left,top,right,bottom)=>right<0||bottom<0||left>size.width||top>size.height,nodeLabels=this.host.nodeLabels!=="none"&&(this.host.nodeLabels==="always"||zoom>=.5);let strokeStyle;const flushStroke=()=>{strokeStyle!==void 0&&(ctx.stroke(),strokeStyle=void 0)};for(const primitive of scene.primitives)if(primitive.kind==="node"){const entry=primitive.value,id=entry.node.id,radius=entry.screenRadius*Math.SQRT2+Math.max(6,paint.fontSize),labelWidth=nodeLabels?this.textWidth(ctx,entry.node.label??id):0;if(outside(entry.x-radius,entry.y-radius,entry.x+radius+labelWidth,entry.y+radius))continue;flushStroke(),ctx.setLineDash([]),ctx.textAlign="left",ctx.globalAlpha=dimmedNodes.has(id)?paint.dimmedOpacity:1,this.drawNode(ctx,entry,paint.nodes.get(id)??paint.text),(selectedNodes.has(id)||this.host.focusNodeId===id||this.hover?.kind==="node"&&this.hover.id===id)&&(ctx.strokeStyle=paint.selected,ctx.lineWidth=2,ctx.beginPath(),ctx.arc(entry.x,entry.y,entry.screenRadius+4,0,Math.PI*2),ctx.stroke()),nodeLabels&&(ctx.fillStyle=paint.text,ctx.fillText(entry.node.label??entry.node.id,entry.x+entry.screenRadius+4,entry.y)),entry.node.expandable&&(ctx.fillStyle=paint.text,ctx.fillText("+",entry.x+entry.screenRadius,entry.y-entry.screenRadius))}else{const entry=primitive.value,padding=Math.max(6,finiteRange(entry.edge.width??1.5,1.5,0,1e3)*3,this.projectedById.get(entry.edge.target)?.screenRadius??0),labelPoint=entry.labelPoint??entry.a,labelWidth=entry.middle&&this.host.withEdgeLabels&&entry.edge.label?this.textWidth(ctx,entry.edge.label):0;if(outside(Math.min(entry.a.x,entry.b.x,labelWidth?labelPoint.x:entry.a.x)-padding,Math.min(entry.a.y,entry.b.y,labelWidth?labelPoint.y:entry.a.y)-padding-paint.fontSize,Math.max(entry.a.x,entry.b.x,labelWidth?labelPoint.x+labelWidth:entry.a.x)+padding,Math.max(entry.a.y,entry.b.y,labelWidth?labelPoint.y:entry.a.y)+padding))continue;const alpha=dimmedEdges.has(entry.id)?paint.dimmedOpacity:1,selected=selectedEdges.has(entry.id)||this.hover?.kind==="link"&&this.hover.id===entry.id,color=selected?paint.selected:paint.edges.get(entry.id)??paint.text,width2=finiteRange(entry.edge.width??1.5,1.5,0,1e3),labeled=entry.middle&&this.host.withEdgeLabels&&entry.edge.label,dash=this.dashPattern(entry.edge,entry.dangling),opaque=alpha===1&&(/^rgb\([\d.,\s]+\)$/.test(color)||/^#[\da-f]{6}$/i.test(color));if(!entry.edge.directed&&!labeled&&width2>0&&opaque){const style=`${color}|${width2+(selected?2:0)}|${alpha}|${dash.key}|${entry.offset}`;strokeStyle!==style&&(flushStroke(),ctx.beginPath(),strokeStyle=style,ctx.strokeStyle=color,ctx.lineWidth=width2+(selected?2:0),ctx.globalAlpha=alpha,ctx.setLineDash(dash.values),ctx.lineDashOffset=-entry.offset),ctx.moveTo(entry.a.x,entry.a.y),ctx.lineTo(entry.b.x,entry.b.y);continue}flushStroke(),ctx.globalAlpha=alpha,this.drawSegment(ctx,entry,selected?paint.selected:paint.edges.get(entry.id)??paint.text,selected,this.projectedById.get(entry.edge.target)?.screenRadius??0),entry.middle&&this.host.withEdgeLabels&&zoom>=finiteRange(this.host.edgeLabelMinZoom,.6,.001,1e3)&&entry.edge.label&&(ctx.fillStyle=paint.text,ctx.fillText(entry.edge.label,labelPoint.x,labelPoint.y-paint.fontSize))}flushStroke(),ctx.restore()}drawNode(ctx,node,fill){ctx.fillStyle=fill,ctx.beginPath();const r=node.screenRadius;if(node.shape==="circle")ctx.arc(node.x,node.y,r,0,Math.PI*2);else if(node.shape==="square"){const half=r*Math.sqrt(Math.PI)/2;ctx.rect(node.x-half,node.y-half,2*half,2*half)}else{const half=r*Math.sqrt(Math.PI/2);ctx.moveTo(node.x,node.y-half),ctx.lineTo(node.x+half,node.y),ctx.lineTo(node.x,node.y+half),ctx.lineTo(node.x-half,node.y),ctx.closePath()}ctx.fill()}dashPattern(edge,dangling){if(dangling)return DANGLING_DASH;const cached=this.edgeDashes.get(edge);if(cached)return cached;const dash=edge.dash,result=Array.isArray(dash)&&dash.length>0&&dash.length<=32&&dash.every(value=>Number.isFinite(value)&&value>=0)?{values:[...dash],key:dash.join(",")}:EMPTY_DASH;return Object.isFrozen(edge)&&this.edgeDashes.set(edge,result),result}drawSegment(ctx,segment,color,selected,targetRadius){const{a,b,edge}=segment;if(ctx.strokeStyle=color,ctx.fillStyle=color,ctx.lineWidth=finiteRange(edge.width??1.5,1.5,0,1e3)+(selected?2:0),ctx.setLineDash(this.dashPattern(edge,segment.dangling).values),ctx.lineDashOffset=-segment.offset,ctx.beginPath(),ctx.moveTo(a.x,a.y),ctx.lineTo(b.x,b.y),ctx.stroke(),segment.last&&edge.directed){const angle=Math.atan2(b.y-a.y,b.x-a.x),inset=targetRadius,x=b.x-Math.cos(angle)*inset,y=b.y-Math.sin(angle)*inset,size=Math.max(6,ctx.lineWidth*3);ctx.beginPath(),ctx.moveTo(x,y),ctx.lineTo(x-Math.cos(angle-.45)*size,y-Math.sin(angle-.45)*size),ctx.lineTo(x-Math.cos(angle+.45)*size,y-Math.sin(angle+.45)*size),ctx.closePath(),ctx.fill()}}hit(clientX,clientY){const bounds=this.canvas?.getBoundingClientRect();if(bounds)return this.projectedScene(),this.hitIndex?.hit(clientX-bounds.left,clientY-bounds.top)}cancelHover(){this.hoverGeneration++,this.hoverFrame!==void 0&&this.hoverFrameWindow?.cancelAnimationFrame(this.hoverFrame),this.hoverFrame=void 0,this.hoverFrameWindow=void 0,this.pendingHover=void 0}queueHover(x,y){if(this.pendingHover={x,y},this.hoverFrame!==void 0)return;const view=this.host.ownerDocument.defaultView;if(!view)return;const generation=this.hoverGeneration;this.hoverFrameWindow=view,this.hoverFrame=view.requestAnimationFrame(()=>{if(generation!==this.hoverGeneration)return;this.hoverFrame=void 0,this.hoverFrameWindow=void 0;const point=this.pendingHover;this.pendingHover=void 0,point&&this.host.isConnected&&this.host.view==="3d"&&!this.gesture&&this.setHover(this.hit(point.x,point.y))})}setHover(next){if(this.hover?.kind===next?.kind&&this.hover?.id===next?.id)return;const previous=this.hover;this.hover=next,this.canvas&&(this.canvas.title=next?.kind==="node"?this.options.nodeTooltip(next.node):next?.kind==="link"?this.options.edgeTooltip(next.edge):""),this.options.hover(previous,next),this.schedule()}cancelGesture(){const gesture=this.gesture;this.gesture=void 0,gesture&&this.canvas?.hasPointerCapture(gesture.id)&&this.canvas.releasePointerCapture(gesture.id)}changeView(view){this.cancelGesture(),view==="3d"&&(this.contextFailed=!1),this.host.view=view,this.options.repaint(),this.focusAfterViewChange=!0,this.options.viewChanged()}changePage(delta){this.page=Math.max(0,Math.min(Math.ceil(this.items.length/PAGE_SIZE)-1,this.page+delta)),this.focusAfterViewChange=!0,this.options.repaint()}listKeyDown(item,event){if(item.kind!=="node"||event.key!=="Enter"&&event.key!==" "||event.repeat)return;const time=this.host.ownerDocument.defaultView?.performance.now()??0;this.lastKeyActivation?.id===item.node.id&&time-this.lastKeyActivation.time<=500?(this.lastKeyActivation=void 0,this.options.expand(item.node.id)):this.lastKeyActivation={id:item.node.id,time}}activateItem(item,event){item.kind==="node"?this.options.activate({kind:"node",id:item.node.id,node:item.node},event):item.kind==="link"?this.options.activate({kind:"link",id:graphLinkIdentity(item.edge),edge:item.edge},event):this.options.community(item.community)}render(limitNotices){this.prepare();const messages=this.options.messages(),list=this.host.view==="list"||this.contextFailed,pageItems=this.items.slice(this.page*PAGE_SIZE,(this.page+1)*PAGE_SIZE),number=getNumberFormat(this.options.locale()),selectedNodes=selectedIds(this.host.selectedNodeIds),selectedEdges=selectedIds(this.host.selectedEdgeIds),button=(action,label,callback)=>html`<button type="button" part="spatial-control" data-spatial-action=${action} @click=${callback}>${label}</button>`;return html`<div part="base" class="spatial-base">
       <div part="spatial-toolbar" role="group" aria-label=${messages.controls}>
         <button type="button" part="spatial-control" data-spatial-action="3d" aria-pressed=${String(!list)} @click=${()=>this.changeView("3d")}>${messages.view3d}</button>
         <button type="button" part="spatial-control" data-spatial-action="list" aria-pressed=${String(list)} @click=${()=>this.changeView("list")}>${messages.viewList}</button>
@@ -22,7 +22,7 @@ import{html,nothing}from"lit";import{finiteRange}from"../../../internal/numbers.
       </div>`:html`<p part="spatial-instructions" id=${this.instructionsId}>${messages.instructions}</p>
         <canvas part="spatial-canvas" tabindex="0" role="img" aria-label=${this.host.accessibleLabel??this.host.label??messages.view3d}
           aria-describedby=${this.instructionsId} @pointerdown=${this.pointerDown} @pointermove=${this.pointerMove} @pointerup=${this.pointerUp}
-          @pointercancel=${this.pointerCancel} @lostpointercapture=${this.pointerCancel} @pointerleave=${()=>{this.gesture||this.setHover(void 0)}}
+          @pointercancel=${this.pointerCancel} @lostpointercapture=${this.pointerCancel} @pointerleave=${()=>{this.gesture||(this.cancelHover(),this.setHover(void 0))}}
           @wheel=${this.wheel} @keydown=${this.keyDown} @dblclick=${event=>{const hit=this.hit(event.clientX,event.clientY);hit?.kind==="node"&&this.options.expand(hit.id)}}
         ></canvas>
         ${this.world.length?nothing:html`<p part="empty">${messages.noData}</p>`}`}

package/dist/components/retrieval/graph/graph-spatial-model.js

@@ -0,0 +1 @@
+import{finiteRange}from"../../../internal/numbers.js";import{getOwnDataDescriptor}from"../../../internal/data-descriptors.js";const WORLD_LIMIT=1e6,CAMERA_LIMIT=WORLD_LIMIT*10;function own(value,key){if(value===null||typeof value!="object")return;const descriptor=getOwnDataDescriptor(value,key);return typeof descriptor=="object"?descriptor.value:void 0}function coordinate(value,fallback){return finiteRange(typeof value=="number"?value:NaN,fallback,-WORLD_LIMIT,WORLD_LIMIT)}function positionValue(value){const x=own(value,"x"),y=own(value,"y"),z=own(value,"z");if([x,y,z].every(entry=>typeof entry=="number"&&Number.isFinite(entry)))return Object.freeze({x:coordinate(x,0),y:coordinate(y,0),z:coordinate(z,0)})}function normalizeGraphCamera(value,fallback){const yaw=own(value,"yaw"),pitch=own(value,"pitch"),distance=own(value,"distance");return Object.freeze({yaw:finiteRange(typeof yaw=="number"?yaw:NaN,fallback.yaw,-CAMERA_LIMIT,CAMERA_LIMIT)%(Math.PI*2),pitch:finiteRange(typeof pitch=="number"?pitch:NaN,fallback.pitch,-Math.PI/2+.01,Math.PI/2-.01),distance:finiteRange(typeof distance=="number"?distance:NaN,fallback.distance,.01,CAMERA_LIMIT),target:positionValue(own(value,"target"))??Object.freeze({...fallback.target})})}function spatialNodePosition(node){const explicit=positionValue(own(node,"position"));if(explicit)return explicit;let hash=2166136261;for(const character of node.id)hash=Math.imul(hash^character.charCodeAt(0),16777619);const latitude=(hash>>>0)/4294967296*2-1,angle=(Math.imul(hash,2246822519)>>>0)/4294967296*Math.PI*2,radius=120+(hash>>>8)%81,ring=Math.sqrt(Math.max(0,1-latitude*latitude));return Object.freeze({x:radius*ring*Math.cos(angle),y:radius*latitude,z:radius*ring*Math.sin(angle)})}export{normalizeGraphCamera,spatialNodePosition};