@aceshooting/lyra-ui 3.8.0 → 4.0.0

package/dist/components/graph/graph.class.js

@@ -27,7 +27,7 @@ const EXPAND_KEY_INTERVAL_MS = 500; // window for a double-Enter/Space to count
 const EXPAND_BADGE_R = 5; // world px, the "+" badge circle radius
 const EXPAND_BADGE_OFFSET = Math.SQRT1_2; // places the badge at the node's edge, diagonally upper-right
 const FOCUS_HALO_PADDING = 6; // world px added to the node's own radius for the halo ring
-const HULL_PADDING = 24; // world px; CSS mirrors this via stroke-width: 2 * --lyra-size-24px
+const HULL_PADDING = 24; // world px; CSS mirrors this via stroke-width: 2 * --lr-size-24px
 const CANVAS_NODE_LABEL_MIN_ZOOM = 0.5; // canvas-only declutter -- node labels draw only at/above this scale
 /**
  * Tiny deterministic PRNG (mulberry32, public-domain) used only when `seed`
@@ -62,7 +62,7 @@ const MIN_RADIUS = 6;
 const MAX_RADIUS = 24;
 /**
  * Rejects a `GraphNode.color` that could break out of the single
- * `--lyra-node-fill` custom-property declaration it's assigned to — `;`,
+ * `--lr-node-fill` custom-property declaration it's assigned to — `;`,
  * `{`, and `}` are all a value needs to terminate that declaration and start
  * another. This matters even though the node fill is set via Lit's
  * `styleMap` directive (not raw string interpolation): `styleMap`'s first
@@ -80,10 +80,10 @@ function normalizeLinkDash(dash) {
     return dash.join(' ');
 }
 /** Assigns a typed node with no explicit color a slot from the ordered categorical fallback
- *  palette, cycling every 8 entries (`--lyra-graph-cat-1`…`--lyra-graph-cat-8`). `index` is the
+ *  palette, cycling every 8 entries (`--lr-graph-cat-1`…`--lr-graph-cat-8`). `index` is the
  *  node's `GraphNodeType`'s position in `nodeTypes`, not the node's own index in `nodes`. */
 function categoricalPaletteColor(index) {
-    return `var(--lyra-graph-cat-${(index % 8) + 1})`;
+    return `var(--lr-graph-cat-${(index % 8) + 1})`;
 }
 /** side = r * sqrt(pi), area-matched to a circle of radius r (side^2 = pi*r^2). Half-side is what
  *  the path data actually needs, since both shapes are drawn centered on the origin and
@@ -103,7 +103,7 @@ function diamondPath(r) {
     return `M 0 ${-d} L ${d} 0 L 0 ${d} L ${-d} 0 Z`;
 }
 /**
- * `<lyra-graph>` — a force-directed node-link diagram with pan/zoom/drag.
+ * `<lr-graph>` — a force-directed node-link diagram with pan/zoom/drag.
  * Requires the optional peer deps `d3-force`/`d3-drag`/`d3-zoom`/`d3-selection`
  * (lazy-loaded; a consumer who never uses this component pays zero d3 cost).
  *
@@ -139,27 +139,27 @@ function diamondPath(r) {
  * offscreen `part="cursor-item"` button per node/link/hull, driving the identical roving-tabindex
  * logic as `renderer="svg"`.
  *
- * @customElement lyra-graph
- * @event lyra-node-click - `detail: { id, x, y }`, where `x` and `y` are the
+ * @customElement lr-graph
+ * @event lr-node-click - `detail: { id, x, y }`, where `x` and `y` are the
  *   node's current coordinates in the graph's local drawing space.
- * @event lyra-link-click - `detail: { source, target, id? }`.
- * @event lyra-node-enter - A node was hovered. `detail: { id }`. Suppressed while dragging or
+ * @event lr-link-click - `detail: { source, target, id? }`.
+ * @event lr-node-enter - A node was hovered. `detail: { id }`. Suppressed while dragging or
  *   panning. Also toggles a `data-hovered` attribute on that node's `[part="node"]` element for
  *   pure-CSS theming (not a substitute for this event — a consumer computing its own
  *   adjacency-based highlight needs the id, which only the event carries).
- * @event lyra-node-leave - The hover from `lyra-node-enter` ended. `detail: { id }`.
- * @event lyra-link-enter - A link was hovered. `detail: { source, target, id? }`. Same
- *   suppression/`data-hovered` behavior as `lyra-node-enter`.
- * @event lyra-link-leave - The hover from `lyra-link-enter` ended. `detail: { source, target, id?
+ * @event lr-node-leave - The hover from `lr-node-enter` ended. `detail: { id }`.
+ * @event lr-link-enter - A link was hovered. `detail: { source, target, id? }`. Same
+ *   suppression/`data-hovered` behavior as `lr-node-enter`.
+ * @event lr-link-leave - The hover from `lr-link-enter` ended. `detail: { source, target, id?
  *   }`.
- * @event lyra-node-expand - A node was double-activated (native `dblclick`, or two Enter/Space
+ * @event lr-node-expand - A node was double-activated (native `dblclick`, or two Enter/Space
  *   activations of the same focused node within 500ms). `detail: { id }`. Fires for any node
  *   regardless of `GraphNode.expandable` -- that flag only controls the visual "+" affordance and
  *   spoken "expandable" suffix.
- * @event lyra-selection-change - `detail: { nodeIds, linkIds }`. Fires when `selectionMode` is not
+ * @event lr-selection-change - `detail: { nodeIds, linkIds }`. Fires when `selectionMode` is not
  *   `'none'` and the user activates/clears a node or link. The component never assigns
- *   `selectedNodeIds`/`selectedLinkIds` itself -- controlled, mirroring `lyra-heatmap.selectedCell`.
- * @event lyra-community-click - A hull was activated. `detail: { id }`.
+ *   `selectedNodeIds`/`selectedLinkIds` itself -- controlled, mirroring `lr-heatmap.selectedCell`.
+ * @event lr-community-click - A hull was activated. `detail: { id }`.
  * @csspart base - The graph wrapper.
  * @csspart svg - The graph SVG.
  * @csspart node - A graph node.
@@ -178,18 +178,21 @@ function diamondPath(r) {
  * @csspart tooltip - The hover tooltip (`renderer="canvas"` only; the SVG `<title>` replacement).
  * @csspart cursor-items - The container of offscreen keyboard-roving items (`renderer="canvas"` only).
  * @csspart cursor-item - An offscreen keyboard-roving item (`renderer="canvas"`'s a11y virtual cursor).
- * @cssprop [--lyra-node-fill=var(--lyra-color-brand)] - Default node fill, overridden per-node by `GraphNode.color`.
- * @cssprop [--lyra-link-color=var(--lyra-color-border)] - Default link stroke, overridden per-link by a link's own `color`.
- * @cssprop [--lyra-graph-cat-1..8] - Ordered categorical fallback palette for a typed node with no
+ * @cssprop [--lr-node-fill=var(--lr-color-brand)] - Default node fill, overridden per-node by `GraphNode.color`.
+ * @cssprop [--lr-link-color=var(--lr-color-border)] - Default link stroke, overridden per-link by a link's own `color`.
+ * @cssprop [--lr-graph-cat-1..8] - Ordered categorical fallback palette for a typed node with no
  *   `GraphNodeType.color`, assigned by the type's index in `nodeTypes` (wraps every 8 entries).
- *   Declared centrally in `tokens.styles.ts` so `<lyra-graph>` and any future `<lyra-graph-legend>`-
+ *   Declared centrally in `tokens.styles.ts` so `<lr-graph>` and any future `<lr-graph-legend>`-
  *   style component resolve the identical default.
- * @cssprop [--lyra-graph-edge-label-halo=var(--lyra-color-surface)] - Legibility halo (`stroke`)
+ * @cssprop [--lr-graph-edge-label-halo=var(--lr-color-surface)] - Legibility halo (`stroke`)
  *   behind a drawn edge label, painted under the fill via `paint-order: stroke`.
- * @cssprop [--lyra-graph-focus-halo-color=var(--lyra-color-brand)] - `focus-halo` stroke color.
- * @cssprop [--lyra-graph-selected-color=var(--lyra-color-success)] - Selected node/link stroke.
- * @cssprop [--lyra-graph-hull-fill=var(--lyra-color-brand)] - Hull fill/stroke color.
- * @cssprop [--lyra-graph-hull-opacity=0.12] - Hull element opacity (composites fill+stroke as one
+ * @cssprop [--lr-graph-focus-halo-color=var(--lr-color-brand)] - `focus-halo` stroke color.
+ * @cssprop [--lr-graph-selected-color=var(--lr-color-success)] - Selected node/link stroke.
+ * @cssprop [--lr-graph-dimmed-opacity=1] - Opacity applied to a node/link when
+ *   `dimmedNodeIds`/`dimmedLinkIds` includes its id (both SVG and canvas renderers). `1` (the
+ *   default) is a no-op -- an unset host sees no visual change.
+ * @cssprop [--lr-graph-hull-fill=var(--lr-color-brand)] - Hull fill/stroke color.
+ * @cssprop [--lr-graph-hull-opacity=0.12] - Hull element opacity (composites fill+stroke as one
  *   group, avoiding a double-opacity seam at the fill/stroke boundary).
  */
 export class LyraGraph extends LyraElement {
@@ -247,12 +250,22 @@ export class LyraGraph extends LyraElement {
          *  (`part="focus-halo"`) around the node while set. See `focusNode()` for the imperative twin. */
         this.focusId = null;
         /** `'none'` (default) preserves today's behavior exactly -- no `aria-pressed`/`data-selected`,
-         *  no `lyra-selection-change`. Controlled, mirroring `lyra-heatmap.selectedCell`: the component
+         *  no `lr-selection-change`. Controlled, mirroring `lr-heatmap.selectedCell`: the component
          *  never mutates `selectedNodeIds`/`selectedLinkIds` itself, only emits intent; the host assigns
          *  them back. */
         this.selectionMode = 'none';
         this.selectedNodeIds = [];
         this.selectedLinkIds = [];
+        /** Node ids to render dimmed (`data-dimmed` on the matching `[part="node"]`, themeable via
+         *  `--lr-graph-dimmed-opacity`). Controlled, mirroring `selectedNodeIds`/`selectedLinkIds`: the
+         *  component never assigns this itself, only renders it -- a host typically computes it from a
+         *  `lr-node-enter`/`lr-link-enter` hover (the complement of the hovered id's neighbor set,
+         *  computed from the host's own `links` array) and assigns the result back. Empty (the default)
+         *  renders every node at full opacity, unchanged from today. */
+        this.dimmedNodeIds = [];
+        /** Same contract as `dimmedNodeIds`, for links. A link's dimming key is the same `linkKey()`
+         *  value (`GraphLink.id`, else `` `${source}->${target}` ``) `selectedLinkIds` already uses. */
+        this.dimmedLinkIds = [];
         this.arrowMarkerId = nextId('graph-arrow');
         /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
         this.loading = true;
@@ -430,7 +443,7 @@ export class LyraGraph extends LyraElement {
             // sibling listener on the very same target -- would not suppress it). Matches svg mode's own
             // onNodeDblClick(), which stops the equivalent bubble-phase echo on the svg one level up.
             e.stopImmediatePropagation();
-            this.emit('lyra-node-expand', { id: node.id });
+            this.emit('lr-node-expand', { id: node.id });
         };
         /** Suppresses hover events/`data-hovered` while a node drag is in progress (tracked from the
          *  existing d3-drag `.on('start')`/`.on('end')` handlers in `applyInteractions()`) — a drag
@@ -561,7 +574,7 @@ export class LyraGraph extends LyraElement {
     }
     /** Resolution precedence: `node.color` (existing, most specific) > matched `GraphNodeType.color`
      *  > the ordered categorical fallback palette by the type's index in `nodeTypes` > (returns
-     *  `undefined`, letting the untyped `--lyra-node-fill` token default apply). Both data-driven
+     *  `undefined`, letting the untyped `--lr-node-fill` token default apply). Both data-driven
      *  color sources pass the existing `sanitizeNodeColor()`. */
     nodeFill(node) {
         const ownColor = sanitizeNodeColor(node.color);
@@ -627,10 +640,10 @@ export class LyraGraph extends LyraElement {
         return convexHull(members.map((n) => ({ x: n.x ?? 0, y: n.y ?? 0 })));
     }
     onCommunityClick(community) {
-        this.emit('lyra-community-click', { id: community.id });
+        this.emit('lr-community-click', { id: community.id });
     }
     cameraTransitionMs() {
-        const parsed = parseFloat(getComputedStyle(this).getPropertyValue('--lyra-transition-base'));
+        const parsed = parseFloat(getComputedStyle(this).getPropertyValue('--lr-transition-base'));
         return Number.isFinite(parsed) ? parsed : 180;
     }
     cancelCameraTween() {
@@ -840,7 +853,7 @@ export class LyraGraph extends LyraElement {
     }
     /** Canvas 2D's `fillStyle`/`strokeStyle` don't accept a raw `var(--x)` string the way an inline
      *  SVG `style` attribute does -- resolves it to the actual cascaded color via `getComputedStyle`
-     *  first (the same "canvas can't consume var() directly" resolution `<lyra-heatmap>` already
+     *  first (the same "canvas can't consume var() directly" resolution `<lr-heatmap>` already
      *  uses for its own canvas-drawn tokens). `value` untouched when it isn't a bare `var(...)` ref
      *  (a literal `GraphNode.color`/`GraphLink.color` hex/rgb string already resolves fine as-is). */
     resolveCssColorValue(value, cs) {
@@ -850,12 +863,12 @@ export class LyraGraph extends LyraElement {
         return cs.getPropertyValue(match[1]).trim() || value;
     }
     buildCanvasScene(cs) {
-        const hullFillDefault = cs.getPropertyValue('--lyra-graph-hull-fill').trim() || cs.getPropertyValue('--lyra-color-brand').trim();
+        const hullFillDefault = cs.getPropertyValue('--lr-graph-hull-fill').trim() || cs.getPropertyValue('--lr-color-brand').trim();
         const hulls = this.visibleCommunities().map((entry) => ({
             d: hullPathD(this.communityHull(entry.members)),
             fill: sanitizeNodeColor(entry.community.color) ?? hullFillDefault,
         }));
-        const linkColorDefault = cs.getPropertyValue('--lyra-link-color').trim() || cs.getPropertyValue('--lyra-color-border').trim();
+        const linkColorDefault = cs.getPropertyValue('--lr-link-color').trim() || cs.getPropertyValue('--lr-color-border').trim();
         const links = this.simLinks.map((l) => {
             const coords = this.linkCoordinates(l);
             const own = sanitizeNodeColor(l.color);
@@ -869,6 +882,7 @@ export class LyraGraph extends LyraElement {
                 dash: l.dash,
                 directed: l.directed,
                 selected: this.isSelected('link', this.linkKey(l)),
+                dimmed: this.isDimmed('link', this.linkKey(l)),
             };
         });
         const edgeLabels = this.showEdgeLabels && this.canvasCamera.k >= this.safeEdgeLabelMinZoom
@@ -884,7 +898,7 @@ export class LyraGraph extends LyraElement {
                 .filter((l) => !l.tooLong)
                 .map(({ x, y, text }) => ({ x, y, text }))
             : [];
-        const nodeFillDefault = cs.getPropertyValue('--lyra-node-fill').trim() || cs.getPropertyValue('--lyra-color-brand').trim();
+        const nodeFillDefault = cs.getPropertyValue('--lr-node-fill').trim() || cs.getPropertyValue('--lr-color-brand').trim();
         const nodes = this.simNodes.map((n) => {
             const fill = this.nodeFill(n);
             return {
@@ -894,6 +908,7 @@ export class LyraGraph extends LyraElement {
                 shape: this.nodeShape(n),
                 fill: fill ? this.resolveCssColorValue(fill, cs) : nodeFillDefault,
                 selected: this.isSelected('node', n.id),
+                dimmed: this.isDimmed('node', n.id),
             };
         });
         const nodeLabels = this.simNodes
@@ -916,18 +931,19 @@ export class LyraGraph extends LyraElement {
                 ? { x: activeNode.x ?? 0, y: activeNode.y ?? 0, r: this.nodeRadius(activeNode) + 4 }
                 : undefined,
             showNodeLabels: this.canvasCamera.k >= CANVAS_NODE_LABEL_MIN_ZOOM,
-            haloColor: cs.getPropertyValue('--lyra-graph-focus-halo-color').trim() || cs.getPropertyValue('--lyra-color-brand').trim(),
-            selectedColor: cs.getPropertyValue('--lyra-graph-selected-color').trim() || cs.getPropertyValue('--lyra-color-success').trim(),
-            labelColor: cs.getPropertyValue('--lyra-color-text').trim(),
-            labelHaloColor: cs.getPropertyValue('--lyra-graph-edge-label-halo').trim() || cs.getPropertyValue('--lyra-color-surface').trim(),
-            font: `${this.edgeLabelFontPx()}px ${cs.getPropertyValue('--lyra-font').trim() || 'sans-serif'}`,
+            haloColor: cs.getPropertyValue('--lr-graph-focus-halo-color').trim() || cs.getPropertyValue('--lr-color-brand').trim(),
+            selectedColor: cs.getPropertyValue('--lr-graph-selected-color').trim() || cs.getPropertyValue('--lr-color-success').trim(),
+            dimmedOpacity: Number(cs.getPropertyValue('--lr-graph-dimmed-opacity').trim()) || 1,
+            labelColor: cs.getPropertyValue('--lr-color-text').trim(),
+            labelHaloColor: cs.getPropertyValue('--lr-graph-edge-label-halo').trim() || cs.getPropertyValue('--lr-color-surface').trim(),
+            font: `${this.edgeLabelFontPx()}px ${cs.getPropertyValue('--lr-font').trim() || 'sans-serif'}`,
         };
     }
     /** Sizes the backing store to the canvas's own rendered CSS box (`clientWidth`/`clientHeight`,
      *  themselves stretched to fill the host via `[part="base"]`/`[part="canvas"]`'s `100%` sizing)
      *  times `devicePixelRatio`, only touching `width`/`height` when the target actually changed --
      *  reassigning either unconditionally would implicitly clear the canvas and reset its transform
-     *  on every single draw, even a pure pan/zoom repaint. Mirrors `<lyra-heatmap>`'s own DPR-scaled
+     *  on every single draw, even a pure pan/zoom repaint. Mirrors `<lr-heatmap>`'s own DPR-scaled
      *  backing-store convention (`watchDpr()`/`onDprChange()`), adapted to `setTransform()` (an
      *  absolute reset) rather than a relative `scale()`, since this canvas -- unlike heatmap's, which
      *  always resizes its backing store on every draw -- only resizes conditionally. */
@@ -1094,6 +1110,9 @@ export class LyraGraph extends LyraElement {
     isSelected(kind, id) {
         return kind === 'node' ? this.selectedNodeIds.includes(id) : this.selectedLinkIds.includes(id);
     }
+    isDimmed(kind, id) {
+        return kind === 'node' ? this.dimmedNodeIds.includes(id) : this.dimmedLinkIds.includes(id);
+    }
     linkKey(link) {
         const source = typeof link.source === 'object' ? link.source.id : String(link.source);
         const target = typeof link.target === 'object' ? link.target.id : String(link.target);
@@ -1107,10 +1126,10 @@ export class LyraGraph extends LyraElement {
         const selected = this.isSelected(kind, id);
         if (this.selectionMode === 'single' || !toggle) {
             if (this.selectionMode === 'single' && selected) {
-                this.emit('lyra-selection-change', { nodeIds: [], linkIds: [] });
+                this.emit('lr-selection-change', { nodeIds: [], linkIds: [] });
                 return;
             }
-            this.emit('lyra-selection-change', kind === 'node' ? { nodeIds: [id], linkIds: [] } : { nodeIds: [], linkIds: [id] });
+            this.emit('lr-selection-change', kind === 'node' ? { nodeIds: [id], linkIds: [] } : { nodeIds: [], linkIds: [id] });
             return;
         }
         const nodeIds = kind === 'node'
@@ -1123,14 +1142,14 @@ export class LyraGraph extends LyraElement {
                 ? this.selectedLinkIds.filter((x) => x !== id)
                 : [...this.selectedLinkIds, id]
             : this.selectedLinkIds;
-        this.emit('lyra-selection-change', { nodeIds, linkIds });
+        this.emit('lr-selection-change', { nodeIds, linkIds });
     }
     clearSelection() {
         if (this.selectionMode === 'none')
             return;
         if (!this.selectedNodeIds.length && !this.selectedLinkIds.length)
             return;
-        this.emit('lyra-selection-change', { nodeIds: [], linkIds: [] });
+        this.emit('lr-selection-change', { nodeIds: [], linkIds: [] });
     }
     willUpdate(changed) {
         // rebuildSimulation() (re)assigns the simNodes/simLinks reactive
@@ -1627,7 +1646,7 @@ export class LyraGraph extends LyraElement {
      *  `layeredLayout()` util (2r x 2r boxes, `gapY = linkDistance`, `gapX = 12`), centers the
      *  drawing in `width` x `height`, and skips forceSimulation() entirely -- no `this.simulation`,
      *  no ticking, no `prevById` carry-over (deterministic input -> output makes it unnecessary; a
-     *  structural change simply recomputes wholesale). `lyra-graph` never passes `fixedPositions`. */
+     *  structural change simply recomputes wholesale). `lr-graph` never passes `fixedPositions`. */
     rebuildLayeredLayout(visible) {
         const boxes = visible.map((n) => {
             const r = this.nodeRadius(n);
@@ -1667,7 +1686,7 @@ export class LyraGraph extends LyraElement {
         this.announceHiddenNodeCount(nodes.length);
     }
     onNodeClick(node, e) {
-        this.emit('lyra-node-click', { id: node.id, x: node.x ?? 0, y: node.y ?? 0 });
+        this.emit('lr-node-click', { id: node.id, x: node.x ?? 0, y: node.y ?? 0 });
         this.emitSelectionIntent('node', node.id, !!(e?.ctrlKey || e?.metaKey));
     }
     /** Returns a node's current position in the graph's local drawing space. */
@@ -1680,26 +1699,26 @@ export class LyraGraph extends LyraElement {
     onLinkClick(link, e) {
         const source = typeof link.source === 'object' ? link.source.id : String(link.source);
         const target = typeof link.target === 'object' ? link.target.id : String(link.target);
-        this.emit('lyra-link-click', { source, target, ...(link.id ? { id: link.id } : {}) });
+        this.emit('lr-link-click', { source, target, ...(link.id ? { id: link.id } : {}) });
         this.emitSelectionIntent('link', this.linkKey(link), !!(e?.ctrlKey || e?.metaKey));
     }
     onNodeEnter(node, e) {
         if (this.isDragging || this.isPanning || this.isCameraTweening)
             return;
         e.currentTarget.setAttribute('data-hovered', '');
-        this.emit('lyra-node-enter', { id: node.id });
+        this.emit('lr-node-enter', { id: node.id });
     }
     onNodeLeave(node, e) {
         if (this.isDragging || this.isPanning || this.isCameraTweening)
             return;
         e.currentTarget.removeAttribute('data-hovered');
-        this.emit('lyra-node-leave', { id: node.id });
+        this.emit('lr-node-leave', { id: node.id });
     }
     onNodeDblClick(node, e) {
         // Stops the dblclick from also reaching the svg's own d3-zoom double-click-to-zoom-in
         // listener -- background double-click (not on a node) keeps that default behavior.
         e.stopPropagation();
-        this.emit('lyra-node-expand', { id: node.id });
+        this.emit('lr-node-expand', { id: node.id });
     }
     onLinkEnter(link, e) {
         if (this.isDragging || this.isPanning || this.isCameraTweening)
@@ -1707,7 +1726,7 @@ export class LyraGraph extends LyraElement {
         e.currentTarget.setAttribute('data-hovered', '');
         const source = typeof link.source === 'object' ? link.source.id : String(link.source);
         const target = typeof link.target === 'object' ? link.target.id : String(link.target);
-        this.emit('lyra-link-enter', { source, target, ...(link.id ? { id: link.id } : {}) });
+        this.emit('lr-link-enter', { source, target, ...(link.id ? { id: link.id } : {}) });
     }
     onLinkLeave(link, e) {
         if (this.isDragging || this.isPanning || this.isCameraTweening)
@@ -1715,7 +1734,7 @@ export class LyraGraph extends LyraElement {
         e.currentTarget.removeAttribute('data-hovered');
         const source = typeof link.source === 'object' ? link.source.id : String(link.source);
         const target = typeof link.target === 'object' ? link.target.id : String(link.target);
-        this.emit('lyra-link-leave', { source, target, ...(link.id ? { id: link.id } : {}) });
+        this.emit('lr-link-leave', { source, target, ...(link.id ? { id: link.id } : {}) });
     }
     nodeAccessibleText(node) {
         let text = node.accessibleLabel || node.label || node.id;
@@ -1776,7 +1795,7 @@ export class LyraGraph extends LyraElement {
         };
     }
     edgeLabelFontPx() {
-        const raw = getComputedStyle(this).getPropertyValue('--lyra-font-size-2xs').trim();
+        const raw = getComputedStyle(this).getPropertyValue('--lr-font-size-2xs').trim();
         const parsed = parseFloat(raw);
         if (!Number.isFinite(parsed))
             return 10;
@@ -1791,7 +1810,7 @@ export class LyraGraph extends LyraElement {
         const ctx = getScratchCtx();
         let width;
         if (ctx) {
-            const fontFamily = getComputedStyle(this).getPropertyValue('--lyra-font').trim() || 'sans-serif';
+            const fontFamily = getComputedStyle(this).getPropertyValue('--lr-font').trim() || 'sans-serif';
             ctx.font = `${this.edgeLabelFontPx()}px ${fontFamily}`;
             width = ctx.measureText(text).width;
         }
@@ -1885,7 +1904,7 @@ export class LyraGraph extends LyraElement {
      * backward one to the previous, in flat array order (`simNodes` then
      * `simLinks`) — the same `forwardKey`/`backwardKey` swap this library's
      * other "physical arrow key drives sequential previous/next" components
-     * (`<lyra-tabs>`, `<lyra-slider>`, `<lyra-segmented>`) apply under RTL.
+     * (`<lr-tabs>`, `<lr-slider>`, `<lr-segmented>`) apply under RTL.
      * `ArrowDown`/`ArrowUp` always mean next/previous regardless of direction.
      */
     onGraphKeyDown(e, index, activate) {
@@ -1898,7 +1917,7 @@ export class LyraGraph extends LyraElement {
                 if (this.lastKeyActivateIndex === index && now - this.lastKeyActivateTime <= EXPAND_KEY_INTERVAL_MS) {
                     const node = this.simNodes[index];
                     if (node)
-                        this.emit('lyra-node-expand', { id: node.id });
+                        this.emit('lr-node-expand', { id: node.id });
                     this.lastKeyActivateIndex = null;
                 }
                 else {
@@ -1932,10 +1951,10 @@ export class LyraGraph extends LyraElement {
         if (this.loading) {
             return html `
         <div part="base">
-          <lyra-skeleton
+          <lr-skeleton
             variant="rect"
-            style=${`--lyra-skeleton-w:${this.safeWidth}px;--lyra-skeleton-h:${this.safeHeight}px`}
-          ></lyra-skeleton>
+            style=${`--lr-skeleton-w:${this.safeWidth}px;--lr-skeleton-h:${this.safeHeight}px`}
+          ></lr-skeleton>
         </div>
       `;
         }
@@ -2086,7 +2105,7 @@ export class LyraGraph extends LyraElement {
                   tabindex=${this.normalizedGraphItem() === itemIndex ? '0' : '-1'}
                   aria-label=${label}
                   d=${hullPathD(hull)}
-                  style=${styleMap(fill ? { '--lyra-graph-hull-fill': fill } : {})}
+                  style=${styleMap(fill ? { '--lr-graph-hull-fill': fill } : {})}
                   @click=${() => this.onCommunityClick(entry.community)}
                   @focus=${() => this.onGraphItemFocus(itemIndex)}
                   @keydown=${(e) => this.onGraphKeyDown(e, itemIndex, () => this.onCommunityClick(entry.community))}
@@ -2107,10 +2126,11 @@ export class LyraGraph extends LyraElement {
                   aria-label=${this.linkAccessibleText(l)}
                   aria-pressed=${this.selectionMode !== 'none' ? String(this.isSelected('link', this.linkKey(l))) : nothing}
                   ?data-selected=${this.isSelected('link', this.linkKey(l))}
+                  ?data-dimmed=${this.isDimmed('link', this.linkKey(l))}
                   stroke-width=${l.width ?? 1.5}
                   stroke-dasharray=${dash ?? nothing}
                   marker-end=${l.directed ? `url(#${this.arrowMarkerId})` : nothing}
-                  style=${styleMap(color ? { '--lyra-link-color': color } : {})}
+                  style=${styleMap(color ? { '--lr-link-color': color } : {})}
                   x1=${coordinates.x1}
                   y1=${coordinates.y1}
                   x2=${coordinates.x2}
@@ -2152,7 +2172,7 @@ export class LyraGraph extends LyraElement {
             // an empty string), an untyped/unknown-type node must render with NO style
             // attribute at all -- not just an empty one -- so hasAttribute('style') distinguishes
             // "no fill override" from "fill override present" for consumers/tests probing the DOM.
-            const style = fill ? styleMap({ '--lyra-node-fill': fill }) : nothing;
+            const style = fill ? styleMap({ '--lr-node-fill': fill }) : nothing;
             const title = n.description ? svg `<title>${n.description}</title>` : nothing;
             const shapeEl = shape === 'circle'
                 ? svg `<circle
@@ -2162,6 +2182,7 @@ export class LyraGraph extends LyraElement {
                       aria-label=${label}
                       aria-pressed=${this.selectionMode !== 'none' ? String(this.isSelected('node', n.id)) : nothing}
                       ?data-selected=${this.isSelected('node', n.id)}
+                      ?data-dimmed=${this.isDimmed('node', n.id)}
                       r=${this.nodeRadius(n)}
                       cx=${n.x ?? 0}
                       cy=${n.y ?? 0}
@@ -2180,6 +2201,7 @@ export class LyraGraph extends LyraElement {
                       aria-label=${label}
                       aria-pressed=${this.selectionMode !== 'none' ? String(this.isSelected('node', n.id)) : nothing}
                       ?data-selected=${this.isSelected('node', n.id)}
+                      ?data-dimmed=${this.isDimmed('node', n.id)}
                       d=${shape === 'square' ? squarePath(this.nodeRadius(n)) : diamondPath(this.nodeRadius(n))}
                       transform="translate(${n.x ?? 0},${n.y ?? 0})"
                       style=${style}
@@ -2285,6 +2307,12 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], LyraGraph.prototype, "selectedLinkIds", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraGraph.prototype, "dimmedNodeIds", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraGraph.prototype, "dimmedLinkIds", void 0);
 __decorate([
     state()
 ], LyraGraph.prototype, "loading", void 0);