@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/generation-status/generation-status.js

@@ -1,327 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing, svg, } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './generation-status.class.js';
+import { LyraGenerationStatus } from './generation-status.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './generation-status.styles.js';
-// Mirrors the shared icon set's viewBox/stroke conventions
-// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
-// stop glyph to that module -- it's off limits here -- so this one-off icon
-// still reads as part of the same visual language as the rest of the
-// library's inline icons. Identical shape to `<lyra-chat-composer>`'s own
-// local `stopIcon()` (the conventional filled-square "stop generating"
-// glyph), duplicated rather than imported since these are two independently
-// consumable components with no dependency between them.
-function stopIcon() {
-    return svg `
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      stroke="none"
-      aria-hidden="true"
-      focusable="false"
-    ><rect x="6" y="6" width="12" height="12" rx="1.5"></rect></svg>
-  `;
-}
-/** `4200` -> `"4.2s"`; `65000` -> `"1m 5s"`. Sub-minute durations get one
- *  decimal place of seconds (the common case: most single generations finish
- *  in single-digit seconds, where whole-second precision would look static
- *  between ticks); once a full minute is reached, `"Xm Ys"` reads better than
- *  a fractional-minute or a 3-4 digit seconds count. The `59.95` cutoff (not
- *  a plain `60`) exists so a value that *rounds* to `"60.0s"` at one-decimal
- *  precision is displayed as `"1m 0s"` instead -- without it, the two
- *  branches could each independently round the same instant to a different
- *  minute. */
-function formatElapsed(ms) {
-    const totalSeconds = Math.max(0, ms) / 1000;
-    if (totalSeconds < 59.95) {
-        return `${(Math.round(totalSeconds * 10) / 10).toFixed(1)}s`;
-    }
-    const wholeSeconds = Math.round(totalSeconds);
-    const minutes = Math.floor(wholeSeconds / 60);
-    const seconds = wholeSeconds % 60;
-    return `${minutes}m ${seconds}s`;
-}
-/** `340` -> `"340 tokens"`; `1` -> `"1 token"`. Same plain singular/plural
- *  ternary `<lyra-json-viewer>`'s array/object summary already uses -- this
- *  library has no general i18n/pluralization system (see
- *  `<lyra-source-list>`'s class doc for that stance), but a two-way English
- *  ternary for one fixed noun is a different, much smaller thing than a
- *  general pluralization engine, and reads better than an unconditional
- *  "1 tokens". */
-function formatTokenCount(count) {
-    const rounded = Math.max(0, Math.round(count));
-    return `${rounded} ${rounded === 1 ? 'token' : 'tokens'}`;
-}
-/** `27.4` -> `"27 tok/s"`; `3.2` -> `"3.2 tok/s"`. Same shape as this file's
- *  `formatElapsed`/`<lyra-tool-call-chip>`'s `formatDuration`: the low end of
- *  the range (where a whole-number rounding would flatten every early
- *  reading to the same "0" or "1") gets one decimal place, while anything at
- *  or above 10 tok/s rounds to a whole number, which is plenty precise for a
- *  live-updating throughput figure. */
-function formatThroughput(value) {
-    const clamped = Math.max(0, value);
-    const rounded = clamped < 10 ? Math.round(clamped * 10) / 10 : Math.round(clamped);
-    return `${rounded} tok/s`;
-}
-/**
- * String-aware boolean attribute converter for `show-stop`. Lit's built-in
- * `type: Boolean` converter is presence-based -- the attribute's mere
- * presence (regardless of its string value) maps to `true`, so a plain-
- * markup consumer writing the literal `show-stop="false"` would actually get
- * the button *shown*, the opposite of what that string reads as (the same
- * bug class `<lyra-streaming-text>`'s `optionalBooleanConverter` and
- * `<lyra-line-chart>`'s `WithoutBeginAtZero` story both document). Unlike
- * `<lyra-streaming-text>`'s tri-state converter, this property's default is
- * `true`, not "unset" -- so this one only needs two states: attribute absent
- * (or removed) -> `true` (the default); `show-stop="false"` -> `false`;
- * anything else present (no value, `="true"`, ...) -> `true`.
- */
-const showStopConverter = {
-    fromAttribute(value) {
-        return value !== 'false';
-    },
-    toAttribute(value) {
-        // `true` is this property's default, so there's nothing worth reflecting
-        // for it; only the non-default `false` needs an attribute at all.
-        return value ? null : 'false';
-    },
-};
-/**
- * `<lyra-generation-status>` — a compact, ticking status readout shown
- * alongside an in-progress AI response: elapsed time, token count, and
- * token-throughput, plus a built-in Stop button. Renders as e.g.
- * `12.3s · 340 tokens · 27 tok/s [Stop]`.
- *
- * This is deliberately a *different* concern than the already-landed
- * `<lyra-stream-status>`: that component is about transport/connection
- * health (idle/connecting/streaming/stalled, heartbeat-aware stall
- * detection), while this one is a user-facing metrics readout for a
- * generation that both components' hosts typically already know is
- * healthily in progress. Neither imports or depends on the other, and a
- * consumer building a full generation UI is expected to compose both side by
- * side rather than pick one.
- *
- * `active` drives an internal ~1s `setInterval` ticker that recomputes the
- * elapsed-time display (a plain interval is sufficient here -- unlike
- * `<lyra-stream-status>`'s stall timer, this never needs to be armed with a
- * precise deadline, only to refresh a display roughly once a second). The
- * elapsed clock's start instant is `started-at` when set (an epoch-ms
- * timestamp -- lets a host that already knows exactly when generation began,
- * e.g. from its own request-dispatch timestamp, feed that in directly and
- * survive this component being created slightly later than that instant);
- * when `started-at` is unset, this component falls back to capturing
- * `Date.now()` itself at the moment `active` flips from `false`/unset to
- * `true`, so the ticker still starts from a sensible instant with zero
- * required host bookkeeping. The ticker is cleared whenever `active` becomes
- * `false` and on disconnect; the display is left at whatever it last showed
- * (frozen, not reset to zero) -- a static "Generated in 12.3s" reads better
- * as a completed-state summary than the readout blanking out the instant
- * generation ends.
- *
- * `tokens-per-second`, when the host supplies it directly (e.g. from its own
- * smoothed/windowed rate calculation), is always used as-is. When omitted,
- * this component derives a live figure itself from `token-count` divided by
- * elapsed seconds -- but only once at least one full second of elapsed time
- * has accumulated, since dividing by a sub-second elapsed window can produce
- * wildly-swinging, misleading early readings (e.g. 3 tokens in 40ms reading
- * as "75 tok/s"). A host that wants a stable figure from the very first tick
- * should supply `tokens-per-second` itself. The tokens segment and the
- * throughput segment are independently optional: either, both, or neither
- * may render depending on what's available, per each property's own doc.
- *
- * Accessibility: this readout ticks roughly once per second while active,
- * which is exactly the kind of high-frequency update
- * `<lyra-live-region>`/`Announcer` (`../../internal/announcer.js`) exists to
- * *prevent* from being read aloud verbatim -- routing a per-second numeric
- * tick through even a throttled announcer would still narrate a new number
- * to a screen-reader user roughly once every throttle window for as long as
- * generation runs, which is noise, not information. This component
- * therefore carries no `role="status"`/`aria-live` of its own and never
- * announces anything; a host that wants generation-start/-end announced
- * should pair this with something that announces state *transitions* (e.g.
- * `<lyra-typing-indicator>`'s mount-time announcement), not this ticking
- * readout. The one genuinely actionable, infrequent control here -- the Stop
- * button -- gets a normal, always-present `aria-label`, no different from
- * any other icon-only button in this library.
- *
- * @customElement lyra-generation-status
- * @event lyra-stop - The built-in Stop button was clicked. No detail payload.
- * @csspart base - The root inline layout container.
- * @csspart elapsed - The elapsed-time segment, e.g. `"12.3s"`. Always rendered (reads `"0.0s"` before the component has ever been active).
- * @csspart tokens - The token-count segment, e.g. `"340 tokens"`. Only rendered when `token-count` is set.
- * @csspart throughput - The throughput segment, e.g. `"27 tok/s"`. Only rendered when a value is available (host-supplied or derived; see the class doc).
- * @csspart stop-button - The built-in Stop button. Only rendered while `show-stop` is true.
- */
-export class LyraGenerationStatus extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Whether generation is currently in progress. The elapsed-time ticker
-         *  runs only while this is `true` (see the class doc). */
-        this.active = false;
-        /** Whether the built-in Stop button renders at all. Defaults to `true`.
-         *  Uses {@link showStopConverter} rather than Lit's default presence-based
-         *  `type: Boolean` handling, so a plain-HTML consumer with no way to write
-         *  a `.showStop` property binding can still turn this off with
-         *  `show-stop="false"`; a Lit template can do the same with either that
-         *  attribute string or a `.showStop=${false}` property binding. */
-        this.showStop = true;
-        // Recomputed on activation and on every ~1s tick; frozen (not reset) once
-        // `active` goes false -- see the class doc's "ticker" paragraph.
-        this.elapsedMs = 0;
-        this.onStopClick = () => {
-            this.emit('lyra-stop');
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    // A re-parenting host (e.g. a virtualized/reordering list) disconnects and
-    // reconnects this element without ever toggling `active` -- `willUpdate`/
-    // `updated` only react to *changes* of `active`, so with no override here
-    // a still-active element would come back with `disconnectedCallback`'s
-    // cleared ticker never restarted, freezing the readout even though
-    // `active` (still `true`) says generation is ongoing. Restarting from
-    // `computeElapsedMs()` (rather than resuming a stale in-flight interval)
-    // matches how `startTicker()` already re-baselines on every fresh start.
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.active) {
-            this.elapsedMs = this.computeElapsedMs();
-            this.startTicker();
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.stopTicker();
-    }
-    // Recomputing `elapsedMs` here (rather than in `updated()`) matters: Lit
-    // runs `willUpdate()` *before* render, as part of the same update pass, so
-    // a property set here is picked up by this same render with no extra
-    // cycle. Setting a reactive property from inside `updated()` instead would
-    // schedule a *second* update after the first has already completed (Lit
-    // warns about exactly this in dev mode) -- meaning a caller doing
-    // `el.active = true; await el.updateComplete;` would still observe the
-    // stale pre-activation `elapsedMs` once that first promise resolves.
-    //
-    // `changed.has('active')` fires on the very first update too when the
-    // element mounts already `active` (the parsed-attribute/property value
-    // differs from the `false` field-initializer default that was seen first)
-    // -- same mechanism `<lyra-stream-status>`'s `onPhaseChanged` relies on to
-    // arm its stall timer on a `phase="streaming"` mount, so mounting this
-    // component already active correctly seeds `elapsedMs` with no separate
-    // first-update special case needed.
-    willUpdate(changed) {
-        if (changed.has('active') && this.active) {
-            if (this.validStartedAt == null)
-                this.fallbackStartMs = Date.now();
-            this.elapsedMs = this.computeElapsedMs();
-        }
-        else if (this.active && changed.has('startedAt')) {
-            // A `started-at` that arrives (or changes) mid-generation should
-            // immediately re-baseline the displayed elapsed time rather than wait
-            // up to ~1s for the next tick.
-            this.elapsedMs = this.computeElapsedMs();
-        }
-    }
-    // Starting/stopping the interval is a genuine side effect (not a reactive-
-    // property write), so it belongs in `updated()`, unlike the `elapsedMs`
-    // computation above.
-    updated(changed) {
-        if (changed.has('active')) {
-            if (this.active)
-                this.startTicker();
-            else
-                this.stopTicker();
-        }
-    }
-    startTicker() {
-        this.stopTicker();
-        // Setting `elapsedMs` here (unlike inside `updated()`, see that method's
-        // doc) is fine: an interval callback is a wholly separate future task,
-        // not a continuation of an in-progress Lit update, so this starts a
-        // normal, self-contained update cycle rather than a same-tick "second
-        // update" scheduled mid-render.
-        this.tickTimer = setInterval(() => {
-            this.elapsedMs = this.computeElapsedMs();
-        }, 1000);
-    }
-    stopTicker() {
-        if (this.tickTimer !== undefined) {
-            clearInterval(this.tickTimer);
-            this.tickTimer = undefined;
-        }
-    }
-    // `startedAt` is host-supplied and, unlike `tokenCount`/`tokensPerSecond`
-    // (both already guarded at their read sites), had no `Number.isFinite`
-    // check of its own -- a non-numeric `started-at` attribute (e.g. an
-    // ISO-8601 date string that failed the `type: Number` conversion, landing
-    // as `NaN`) would flow straight into `Date.now() - start`, permanently
-    // rendering the literal text "NaNm NaNs" with no fallback or recovery.
-    // Treating an invalid value the same as "unset" here restores this
-    // property's own documented fallback-clock behavior instead.
-    get validStartedAt() {
-        return this.startedAt != null && Number.isFinite(this.startedAt) ? this.startedAt : undefined;
-    }
-    computeElapsedMs() {
-        const start = this.validStartedAt ?? this.fallbackStartMs;
-        return start == null ? 0 : Math.max(0, Date.now() - start);
-    }
-    /** `tokens-per-second` when set; otherwise a derived figure once enough
-     *  elapsed time has accumulated for it to be meaningful; otherwise
-     *  `undefined` (the throughput segment doesn't render at all). */
-    get effectiveTokensPerSecond() {
-        if (this.tokensPerSecond != null && Number.isFinite(this.tokensPerSecond)) {
-            return this.tokensPerSecond;
-        }
-        if (this.tokenCount != null && Number.isFinite(this.tokenCount)) {
-            const elapsedSeconds = this.elapsedMs / 1000;
-            if (elapsedSeconds >= 1)
-                return this.tokenCount / elapsedSeconds;
-        }
-        return undefined;
-    }
-    render() {
-        const hasTokens = this.tokenCount != null && Number.isFinite(this.tokenCount);
-        const throughput = this.effectiveTokensPerSecond;
-        const hasThroughput = throughput !== undefined;
-        return html `
-      <div part="base">
-        <span part="elapsed">${formatElapsed(this.elapsedMs)}</span>
-        ${hasTokens ? html `<span part="tokens">${formatTokenCount(this.tokenCount)}</span>` : nothing}
-        ${hasThroughput ? html `<span part="throughput">${formatThroughput(throughput)}</span>` : nothing}
-        ${this.showStop
-            ? html `
-              <button part="stop-button" type="button" aria-label="Stop generating" @click=${this.onStopClick}>
-                ${stopIcon()}
-              </button>
-            `
-            : nothing}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraGenerationStatus.prototype, "active", void 0);
-__decorate([
-    property({ type: Number, attribute: 'started-at' })
-], LyraGenerationStatus.prototype, "startedAt", void 0);
-__decorate([
-    property({ type: Number, attribute: 'token-count' })
-], LyraGenerationStatus.prototype, "tokenCount", void 0);
-__decorate([
-    property({ type: Number, attribute: 'tokens-per-second' })
-], LyraGenerationStatus.prototype, "tokensPerSecond", void 0);
-__decorate([
-    property({ attribute: 'show-stop', converter: showStopConverter })
-], LyraGenerationStatus.prototype, "showStop", void 0);
-__decorate([
-    state()
-], LyraGenerationStatus.prototype, "elapsedMs", void 0);
 defineElement('generation-status', LyraGenerationStatus);
+//# sourceMappingURL=generation-status.js.map

package/dist/components/generation-status/generation-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generation-status.js","sourceRoot":"","sources":["../../../src/components/generation-status/generation-status.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC"}

package/dist/components/generation-status/generation-status.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=generation-status.styles.d.ts.map

package/dist/components/generation-status/generation-status.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generation-status.styles.d.ts","sourceRoot":"","sources":["../../../src/components/generation-status/generation-status.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkFlB,CAAC"}

package/dist/components/generation-status/generation-status.styles.js

@@ -10,8 +10,8 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     max-inline-size: 100%;
-    font-size: 0.8125rem;
-    line-height: 1.3;
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-snug);
     color: var(--lyra-color-text-quiet);
   }
 
@@ -38,7 +38,7 @@ export const styles = css `
   [part='tokens']::before,
   [part='throughput']::before {
     content: '·';
-    margin-inline: 0.4em;
+    margin-inline: var(--lyra-size-0-4em);
     opacity: 0.6;
   }
 
@@ -49,11 +49,11 @@ export const styles = css `
     justify-content: center;
     /* Same "shrink the shared icon-button token for a compact inline
        control" idiom as lyra-attachment-chip's retry-/remove-button. */
-    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
-    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-inline-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
+    min-block-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
     margin-inline-start: var(--lyra-space-s);
     padding: 0;
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: 50%;
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
@@ -82,3 +82,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=generation-status.styles.js.map

package/dist/components/generation-status/generation-status.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generation-status.styles.js","sourceRoot":"","sources":["../../../src/components/generation-status/generation-status.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFxB,CAAC"}

package/dist/components/graph/graph-loader.d.ts

@@ -1,16 +1,14 @@
-import type * as ForceModule from 'd3-force';
-import type * as DragModule from 'd3-drag';
-import type * as ZoomModule from 'd3-zoom';
-import type * as SelectionModule from 'd3-selection';
+import type { OptionalPeerApi } from '../../internal/optional-peer-types.js';
+type D3Module = OptionalPeerApi;
 export interface D3Modules {
-    forceSimulation: typeof ForceModule.forceSimulation;
-    forceLink: typeof ForceModule.forceLink;
-    forceManyBody: typeof ForceModule.forceManyBody;
-    forceCenter: typeof ForceModule.forceCenter;
-    forceCollide: typeof ForceModule.forceCollide;
-    drag: typeof DragModule.drag;
-    zoom: typeof ZoomModule.zoom;
-    select: typeof SelectionModule.select;
+    forceSimulation: <Node extends D3Module = D3Module>(nodes?: Iterable<Node>) => D3Module;
+    forceLink: <Node extends D3Module = D3Module, Link extends D3Module = D3Module>(links?: Iterable<Link>) => D3Module;
+    forceManyBody: <Node extends D3Module = D3Module>() => D3Module;
+    forceCenter: (x?: number, y?: number) => D3Module;
+    forceCollide: <Node extends D3Module = D3Module>(radius?: number | ((node: Node) => number)) => D3Module;
+    drag: <Element extends D3Module = D3Module, Datum extends D3Module = D3Module>() => D3Module;
+    zoom: <Element extends D3Module = D3Module, Datum extends D3Module = D3Module>() => D3Module;
+    select: <Element extends D3Module = D3Module, Datum extends D3Module = D3Module>(node?: Element) => D3Module;
 }
 /**
  * Resolves the optional peer dependencies `d3-force`/`d3-drag`/`d3-zoom`/
@@ -19,10 +17,12 @@ export interface D3Modules {
  * caught-error warning path are directly testable without needing to
  * actually uninstall any of the four packages.
  */
-export declare function loadD3Modules(importForce?: () => Promise<typeof ForceModule>, importDrag?: () => Promise<typeof DragModule>, importZoom?: () => Promise<typeof ZoomModule>, importSelection?: () => Promise<typeof SelectionModule>): Promise<D3Modules | null>;
+export declare function loadD3Modules(importForce?: () => Promise<D3Module>, importDrag?: () => Promise<D3Module>, importZoom?: () => Promise<D3Module>, importSelection?: () => Promise<D3Module>): Promise<D3Modules | null>;
 /**
  * Lazily loads the d3 peer dependencies (see `loadD3Modules()`) once per
  * page. Resolves to `null` if they aren't installed — mirrors
  * `<lyra-flag>`'s peer-dependency pattern.
  */
 export declare function loadD3(): Promise<D3Modules | null>;
+export {};
+//# sourceMappingURL=graph-loader.d.ts.map

package/dist/components/graph/graph-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-loader.d.ts","sourceRoot":"","sources":["../../../src/components/graph/graph-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAE7E,KAAK,QAAQ,GAAG,eAAe,CAAC;AAEhC,MAAM,WAAW,SAAS;IACxB,eAAe,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAAE,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC;IACxF,SAAS,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAAE,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAC5E,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,KACnB,QAAQ,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC;IAChE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,QAAQ,CAAC;IAClD,YAAY,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,KAAK,QAAQ,CAAC;IACzG,IAAI,EAAE,CAAC,OAAO,SAAS,QAAQ,GAAG,QAAQ,EAAE,KAAK,SAAS,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC;IAC7F,IAAI,EAAE,CAAC,OAAO,SAAS,QAAQ,GAAG,QAAQ,EAAE,KAAK,SAAS,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC;IAC7F,MAAM,EAAE,CAAC,OAAO,SAAS,QAAQ,GAAG,QAAQ,EAAE,KAAK,SAAS,QAAQ,GAAG,QAAQ,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,QAAQ,CAAC;CAC9G;AAED;;;;;;GAMG;AACH,wBAAsB,aAAa,CACjC,WAAW,GAAE,MAAM,OAAO,CAAC,QAAQ,CAAiD,EACpF,UAAU,GAAE,MAAM,OAAO,CAAC,QAAQ,CAAgD,EAClF,UAAU,GAAE,MAAM,OAAO,CAAC,QAAQ,CAAgD,EAClF,eAAe,GAAE,MAAM,OAAO,CAAC,QAAQ,CAAqD,GAC3F,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CA0B3B;AAID;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAKlD"}

package/dist/components/graph/graph-loader.js

@@ -42,3 +42,4 @@ export function loadD3() {
     }
     return d3Modules;
 }
+//# sourceMappingURL=graph-loader.js.map

package/dist/components/graph/graph-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-loader.js","sourceRoot":"","sources":["../../../src/components/graph/graph-loader.ts"],"names":[],"mappings":"AAiBA;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,WAAW,GAA4B,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,CAAsB,EACpF,UAAU,GAA4B,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAsB,EAClF,UAAU,GAA4B,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAsB,EAClF,eAAe,GAA4B,GAAG,EAAE,CAAC,MAAM,CAAC,cAAc,CAAsB;IAE5F,IAAI,CAAC;QACH,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAChE,WAAW,EAAE;YACb,UAAU,EAAE;YACZ,UAAU,EAAE;YACZ,eAAe,EAAE;SAClB,CAAC,CAAC;QACH,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,aAAa,EAAE,KAAK,CAAC,aAAa;YAClC,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,MAAM,EAAE,YAAY,CAAC,MAAM;SAC5B,CAAC;IACJ,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,IAAI,CACV,2EAA2E;YACzE,qGAAqG,EACvG,GAAG,CACJ,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,IAAI,SAAgD,CAAC;AAErD;;;;GAIG;AACH,MAAM,UAAU,MAAM;IACpB,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,SAAS,GAAG,aAAa,EAAE,CAAC;IAC9B,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/components/graph/graph.class.d.ts

@@ -0,0 +1,172 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../skeleton/skeleton.class.js';
+export interface GraphNode {
+    id: string;
+    label?: string;
+    /** Clamped to [6, 24] (a non-finite/missing value uses the midpoint, 15) — never rendered smaller/larger. */
+    radius?: number;
+    color?: string;
+}
+/** A link whose `target` id has no matching node renders as a short dashed stub off `source`'s
+ *  own position instead of being silently dropped -- e.g. for a wiki-style `[[link]]` reference to
+ *  a not-yet-created page. A link whose `source` id has no matching node is still dropped
+ *  entirely (there is no position to draw a stub from). */
+export interface GraphLink {
+    source: string;
+    target: string;
+    width?: number;
+}
+export interface LyraGraphEventMap {
+    'lyra-node-click': CustomEvent<{
+        id: string;
+    }>;
+    'lyra-link-click': CustomEvent<{
+        source: string;
+        target: string;
+    }>;
+}
+/**
+ * `<lyra-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).
+ *
+ * Set `seed` for a deterministic layout: node initial positions become
+ * reproducible (keyed by node id) and the settle happens synchronously
+ * instead of animating, like `prefers-reduced-motion`. `seed` only takes
+ * effect on the update that first populates `nodes`/`links` (or a later
+ * update that adds genuinely new node ids) — willUpdate() only reads it from
+ * inside rebuildSimulation(), which itself only ever assigns x/y to nodes
+ * that don't already have a settled position, so changing `seed` on an
+ * already-rendered graph is a no-op; nothing re-derives already-positioned
+ * nodes' x/y from the new value.
+ *
+ * @customElement lyra-graph
+ * @event lyra-node-click - `detail: { id }`.
+ * @event lyra-link-click - `detail: { source, target }`.
+ * @csspart base - The graph wrapper.
+ * @csspart svg - The graph SVG.
+ * @csspart node - A graph node.
+ * @csspart link - A graph link.
+ * @csspart label - A node label.
+ * @csspart live-region - The current graph item announcement.
+ * @csspart data-list - A visually hidden list alternative for graph data.
+ */
+export declare class LyraGraph extends LyraElement<LyraGraphEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    nodes: GraphNode[];
+    links: GraphLink[];
+    width: number;
+    height: number;
+    chargeStrength: number;
+    linkDistance: number;
+    minZoom: number;
+    maxZoom: number;
+    /** When set, seeds each node's initial x/y deterministically (keyed by
+     *  node id, not array index) instead of forceSimulation()'s own random
+     *  start, and settles the simulation synchronously — see rebuildSimulation().
+     *  Only takes effect on the update that first assigns a given node id an
+     *  x/y (i.e. supplied at/before `nodes`/`links` first populate, or when a
+     *  later update introduces new node ids) — changing `seed` afterwards does
+     *  not retroactively reposition already-settled nodes; there is currently
+     *  no way to make an already-rendered graph reproducible after the fact. */
+    seed?: number;
+    /** True until the lazy-loaded d3 peer dependencies have settled (success or failure). */
+    private loading;
+    private simNodes;
+    private simLinks;
+    private danglingLinks;
+    /** One roving tab stop across all nodes and links; nodes are the initial entry order. */
+    private activeGraphItem;
+    private graphLiveText;
+    private simulation?;
+    /** The live charge/link force objects, kept so chargeStrength/linkDistance
+     *  changes can retune them in place (see updated()) instead of requiring a
+     *  full rebuildSimulation(). */
+    private chargeForce?;
+    private linkForce?;
+    private d3?;
+    /** The `<svg>` currently wired up with d3-zoom (guards a one-time bind). */
+    private zoomedEl?;
+    /** The pan/zoom `<g>`, cached alongside `zoomedEl` so the zoom handler can
+     *  write the transform straight to the DOM (see applyInteractions()) instead
+     *  of round-tripping through a Lit reactive property on every pan/zoom event. */
+    private gEl?;
+    /** The live zoom behavior, kept so minZoom/maxZoom changes can retune its
+     *  scaleExtent in place (see applyInteractions()) instead of requiring the
+     *  `<svg>` to be rebound. */
+    private zoomBehavior?;
+    /** Node `<circle>`s already wired up with d3-drag; cleared on every simulation rebuild
+     *  so DOM elements Lit reuses across a rebuild get rebound to their fresh datum. */
+    private boundNodeEls;
+    /** Node/link/label DOM elements, index-aligned with simNodes/simLinks, cached
+     *  once per structural rebuild and written to directly by onTick() — this is
+     *  what lets ticks update positions without going through Lit's reactive
+     *  simNodes/simLinks properties (see rebuildSimulation()'s doc comment). */
+    private nodeEls;
+    private nodeLabelEls;
+    private linkEls;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * A caller-supplied `radius` is clamped to [MIN_RADIUS, MAX_RADIUS] (and a
+     * non-finite/NaN value falls back to the same default average as an unset
+     * one) — an unclamped 0/negative radius would render an invisibly small
+     * `<circle>` that's still `role="button" tabindex="0"`, an invisible,
+     * focusable/clickable control with no visible focus indicator.
+     */
+    private nodeRadius;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Imperatively wires up d3-zoom (pan/zoom on the `<svg>`) and d3-drag
+     * (per-node drag) against the just-rendered DOM. The zoom bind itself is a
+     * one-time guard (`zoomedEl`) — but the bound `zoomBehavior`'s
+     * `scaleExtent` is re-read from `minZoom`/`maxZoom` on every call so a
+     * post-mount change to either still takes effect. The node-drag bind +
+     * node/link/label element caching for `onTick()` only run when
+     * `changed` indicates a fresh structural render just happened, not on
+     * every call — otherwise this would re-scan the DOM via
+     * `querySelectorAll` on every Lit update, which used to include every
+     * single simulation tick. `<circle>`s already bound are skipped
+     * (`boundNodeEls`) — a WeakSet reset on every `rebuildSimulation()` so DOM
+     * nodes Lit reuses across a rebuild get rebound against their new datum
+     * instead of a stale one. The zoom handler writes the resulting transform
+     * straight to the cached `gEl` (bound once alongside `zoomedEl`, since the
+     * outer `<g>` is a static part of the template and never recreated by Lit)
+     * instead of assigning a Lit reactive property — panning/zooming fires
+     * continuously while dragging, and reassigning a `@state()` there would
+     * force a full re-render (recomputing every node/link template) on every
+     * single event, the same class of cost `onTick()` already avoids for ticks.
+     */
+    private applyInteractions;
+    /**
+     * Runs on every d3-force simulation tick (up to ~300 while a graph settles
+     * on load, continuously while a node is being dragged via
+     * `alphaTarget(0.3)`). Writes positions straight to the already-rendered
+     * DOM via `setAttribute()` instead of reassigning the reactive
+     * `simNodes`/`simLinks` properties, which would force a full Lit re-render
+     * (and, before the structural-render gate in `applyInteractions()`, an
+     * unconditional `querySelectorAll` scan) on every single frame. Writing attributes
+     * directly (rather than wrapping each element in a d3 selection just to
+     * call `.attr()`) avoids allocating a throwaway Selection per element on
+     * this component's highest-frequency code path.
+     */
+    private onTick;
+    private rebuildSimulation;
+    private onNodeClick;
+    private onLinkClick;
+    private graphItemCount;
+    private normalizedGraphItem;
+    private graphItemText;
+    private onGraphItemFocus;
+    private focusGraphItem;
+    private onGraphKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-graph': LyraGraph;
+    }
+}
+//# sourceMappingURL=graph.class.d.ts.map

package/dist/components/graph/graph.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.class.d.ts","sourceRoot":"","sources":["../../../src/components/graph/graph.class.ts"],"names":[],"mappings":"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"}