@aceshooting/lyra-ui 3.6.0 → 3.8.0

package/dist/components/emoji-picker/emoji-picker.class.js

@@ -0,0 +1,285 @@
+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 } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { FormAssociated } from '../../internal/form-associated.js';
+import { nextId } from '../../internal/a11y.js';
+import { styles } from './emoji-picker.styles.js';
+import { loadEmojiDataCached } from './emoji-data-loader.js';
+class EmojiPickerBase extends LyraElement {
+}
+/**
+ * `<lyra-emoji-picker>` — a searchable, keyboard-navigable, form-associated emoji picker. In the
+ * same "zero/optional-peer dependency" spirit as `<lyra-lite-chart>`/`<lyra-heatmap>`: `groups` is
+ * fully consumer-suppliable (this component ships no emoji data of its own), with an *optional*
+ * convenience auto-loader for a default set — see `emoji-data-loader.ts` and the class doc there for
+ * exactly what that covers.
+ *
+ * Keyboard model: the grid is a roving-tabindex listbox (a single Tab stop — only the active emoji
+ * is tabbable). Arrow keys move the active option (Left/Right follow reading direction and swap
+ * under RTL; Up/Down move by one visual row, measured from the live wrap layout), Home/End jump to
+ * the first/last option, and Enter/Space picks. The search input doubles as a `role="combobox"`
+ * over the same listbox: the arrow keys and Enter also work there while focus stays in the input,
+ * with `aria-activedescendant` tracking the active option.
+ *
+ * @customElement lyra-emoji-picker
+ * @event lyra-change - An emoji was picked. `detail: { emoji: string }`.
+ * @csspart base - The root wrapper.
+ * @csspart search - The search/filter `<input>` (`role="combobox"` over the grid).
+ * @csspart grid - The keyboard-navigable emoji grid.
+ * @csspart group-label - Each group's heading, rendered above its emojis.
+ * @csspart emoji - Each emoji's own `<button>`; meets the shared minimum tappable size
+ *   (`--lyra-icon-button-size`) without enlarging the rendered emoji glyph itself.
+ * @csspart empty - The empty-state message, shown when the search matches nothing.
+ */
+export class LyraEmojiPicker extends FormAssociated(EmojiPickerBase) {
+    constructor() {
+        super(...arguments);
+        /** The full, ungrouped data set to search/render. Consumer-supplied — this component ships no
+         *  emoji data of its own. Empty (the default) renders no groups/emojis at all, just the search
+         *  input and an empty state. See `emoji-data-loader.ts` for an optional convenience loader. */
+        this.groups = [];
+        /** Accessible name forwarded from the host to the internal emoji listbox. Empty falls back to
+         *  the localized default grid label. */
+        this.accessibleLabel = '';
+        /** Injectable loader seam -- overridden directly by tests with a synchronous fake instead of
+         *  needing the real `emoji-picker-element-data` package to load in the test browser (mirrors
+         *  `LyraPdfViewer`'s `loadLibrary` field / `LyraQrCode`'s `loadLibrary` field). */
+        this.loadGroups = loadEmojiDataCached;
+        this.queryText = '';
+        // Deliberately non-reactive: pointer hover and arrow keys retarget the active option many times
+        // a second, and a reactive property here would re-render the entire (potentially ~2000-button)
+        // grid on every step. `setActiveIndex()` patches only the affected buttons imperatively instead;
+        // the `live()` bindings in `render()` reconcile the template against that imperative state
+        // whenever a real re-render (a query/groups change) happens.
+        this.activeIndex = 0;
+        this.gridId = nextId('emoji-picker-grid');
+        // Lowercased search haystack per item, computed once per item object -- re-joining and
+        // re-lowercasing every item on every keystroke dominates filter cost for large sets. Keyed by
+        // item identity in a WeakMap, so replacing `groups` invalidates naturally (stale entries are
+        // simply collected).
+        this.haystacks = new WeakMap();
+        this.onSearchInput = (event) => {
+            this.queryText = event.target.value;
+            this.activeIndex = 0;
+        };
+        // Shared between the search input (combobox idiom: focus stays in the input while
+        // `aria-activedescendant` tracks the active option) and the grid itself (roving tabindex: focus
+        // follows the active option).
+        this.onNavigationKeyDown = (event) => {
+            const items = this.flatItems;
+            if (items.length === 0)
+                return;
+            const inSearch = event.currentTarget === this.searchEl;
+            // "Forward" follows reading direction: the wrapped flex grid mirrors under RTL, so the arrow
+            // that moves visually toward the line end swaps with it.
+            const forwardKey = this.effectiveDirection === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = this.effectiveDirection === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+            let target;
+            if (event.key === forwardKey)
+                target = this.activeIndex + 1;
+            else if (event.key === backwardKey)
+                target = this.activeIndex - 1;
+            else if (event.key === 'ArrowDown')
+                target = this.activeIndex + this.columnsPerRow();
+            else if (event.key === 'ArrowUp')
+                target = this.activeIndex - this.columnsPerRow();
+            // In the input, Home/End keep their native caret meaning.
+            else if (event.key === 'Home' && !inSearch)
+                target = 0;
+            else if (event.key === 'End' && !inSearch)
+                target = items.length - 1;
+            else if (event.key === 'Enter' || (event.key === ' ' && !inSearch)) {
+                // Space only picks from the grid -- in the search input it types a literal space.
+                event.preventDefault();
+                const item = items[this.activeIndex];
+                if (item)
+                    this.pick(item);
+                return;
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+            this.setActiveIndex(target, !inSearch);
+        };
+        // Keeps the active option in lockstep with real focus, so Enter/Space always activates the
+        // focused button -- focus can land on any option without passing through the arrow-key path
+        // (Shift+Tab back into the grid, a consumer's own `focus()` call).
+        this.onGridFocusIn = (event) => {
+            const button = event.target;
+            if (!(button instanceof HTMLButtonElement))
+                return;
+            const index = this.optionButtons().indexOf(button);
+            if (index >= 0 && index !== this.activeIndex)
+                this.setActiveIndex(index, false);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // Only auto-loads when the consumer hasn't already supplied groups directly -- an explicit
+        // `groups` (even an empty array set intentionally) always wins, matching the "consumer-supplied
+        // data takes precedence over any built-in default" convention this library uses elsewhere (e.g.
+        // <lyra-lite-chart>'s pointText falling back to a built-in template only when unset).
+        if (this.groups.length > 0)
+            return;
+        void this.loadGroups().then((loaded) => {
+            if (!this.isConnected || !loaded || this.groups.length > 0)
+                return;
+            this.groups = loaded;
+        });
+    }
+    haystackFor(item) {
+        let haystack = this.haystacks.get(item);
+        if (haystack === undefined) {
+            haystack = [item.name, ...(item.shortcodes ?? [])].join(' ').toLowerCase();
+            this.haystacks.set(item, haystack);
+        }
+        return haystack;
+    }
+    get filteredGroups() {
+        const q = this.queryText.trim().toLowerCase();
+        if (!q)
+            return this.groups;
+        return this.groups
+            .map((group) => ({
+            ...group,
+            emojis: group.emojis.filter((item) => this.haystackFor(item).includes(q)),
+        }))
+            .filter((group) => group.emojis.length > 0);
+    }
+    get flatItems() {
+        return this.filteredGroups.flatMap((group) => group.emojis);
+    }
+    optionButtons() {
+        return [...this.renderRoot.querySelectorAll('[part="emoji"]')];
+    }
+    /** Options in the first rendered row. Measured from live layout at call time because the
+     *  flex-wrap column count is fluid (container width, emoji font metrics). */
+    columnsPerRow() {
+        const buttons = this.optionButtons();
+        if (buttons.length === 0)
+            return 1;
+        const firstTop = buttons[0].offsetTop;
+        let columns = 0;
+        for (const button of buttons) {
+            if (button.offsetTop !== firstTop)
+                break;
+            columns += 1;
+        }
+        return Math.max(1, columns);
+    }
+    /** Moves the active option (clamped), updating only the affected buttons plus the combobox's
+     *  `aria-activedescendant` — no re-render. `focusTarget` distinguishes the grid's roving-focus
+     *  idiom (focus follows the active option) from the search input's combobox idiom (focus stays
+     *  in the input). */
+    setActiveIndex(next, focusTarget) {
+        const buttons = this.optionButtons();
+        if (buttons.length === 0)
+            return;
+        this.activeIndex = Math.max(0, Math.min(next, buttons.length - 1));
+        const target = buttons[this.activeIndex];
+        const previous = this.renderRoot.querySelector('[part="emoji"][data-active]');
+        if (previous && previous !== target) {
+            previous.tabIndex = -1;
+            previous.setAttribute('aria-selected', 'false');
+            previous.removeAttribute('data-active');
+        }
+        target.tabIndex = 0;
+        target.setAttribute('aria-selected', 'true');
+        target.setAttribute('data-active', '');
+        this.searchEl?.setAttribute('aria-activedescendant', target.id);
+        target.scrollIntoView({ block: 'nearest' });
+        if (focusTarget)
+            target.focus();
+    }
+    pick(item) {
+        this.value = item.emoji;
+        this.emit('lyra-change', { emoji: item.emoji });
+    }
+    updated(changed) {
+        if (!changed.has('queryText') && !changed.has('groups'))
+            return;
+        const buttons = this.optionButtons();
+        if (buttons.length === 0) {
+            // No options: the combobox must not reference a nonexistent descendant.
+            this.searchEl?.removeAttribute('aria-activedescendant');
+            return;
+        }
+        if (this.activeIndex >= buttons.length)
+            this.activeIndex = 0;
+        // The grid just re-rendered: re-assert the active option's imperative state (tabindex,
+        // aria-selected, aria-activedescendant) against the fresh DOM and keep it scrolled into view.
+        this.setActiveIndex(this.activeIndex, false);
+    }
+    render() {
+        const items = this.flatItems;
+        let index = -1;
+        return html `
+      <div part="base">
+        <input
+          part="search"
+          type="search"
+          role="combobox"
+          aria-expanded="true"
+          aria-autocomplete="list"
+          .value=${this.queryText}
+          aria-label=${this.localize('emojiPickerSearchLabel')}
+          aria-controls=${this.gridId}
+          @input=${this.onSearchInput}
+          @keydown=${this.onNavigationKeyDown}
+        />
+        <div
+          part="grid"
+          id=${this.gridId}
+          role="listbox"
+          aria-label=${this.accessibleLabel || this.localize('emojiPickerGridLabel')}
+          @keydown=${this.onNavigationKeyDown}
+          @focusin=${this.onGridFocusIn}
+        >
+          ${items.length === 0
+            ? html `<div part="empty">${this.localize('emojiPickerEmpty')}</div>`
+            : this.filteredGroups.map((group) => html `
+                  <div part="group-label">${group.label}</div>
+                  ${group.emojis.map((item) => {
+                index++;
+                const itemIndex = index;
+                return html `<button
+                      type="button"
+                      part="emoji"
+                      id=${`${this.gridId}-item-${itemIndex}`}
+                      role="option"
+                      tabindex=${live(itemIndex === this.activeIndex ? '0' : '-1')}
+                      aria-selected=${live(itemIndex === this.activeIndex ? 'true' : 'false')}
+                      aria-label=${item.name}
+                      ?data-active=${live(itemIndex === this.activeIndex)}
+                      @click=${() => this.pick(item)}
+                      @mouseenter=${() => this.setActiveIndex(itemIndex, false)}
+                    >${item.emoji}</button>`;
+            })}
+                `)}
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraEmojiPicker.prototype, "groups", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], LyraEmojiPicker.prototype, "accessibleLabel", void 0);
+__decorate([
+    state()
+], LyraEmojiPicker.prototype, "queryText", void 0);
+__decorate([
+    query('[part="search"]')
+], LyraEmojiPicker.prototype, "searchEl", void 0);
+//# sourceMappingURL=emoji-picker.class.js.map

package/dist/components/emoji-picker/emoji-picker.class.js.map

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

package/dist/components/emoji-picker/emoji-picker.d.ts

@@ -0,0 +1,2 @@
+export * from './emoji-picker.class.js';
+//# sourceMappingURL=emoji-picker.d.ts.map

package/dist/components/emoji-picker/emoji-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.d.ts","sourceRoot":"","sources":["../../../src/components/emoji-picker/emoji-picker.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist/components/emoji-picker/emoji-picker.js

@@ -0,0 +1,5 @@
+export * from './emoji-picker.class.js';
+import { LyraEmojiPicker } from './emoji-picker.class.js';
+import { defineElement } from '../../internal/prefix.js';
+defineElement('emoji-picker', LyraEmojiPicker);
+//# sourceMappingURL=emoji-picker.js.map

package/dist/components/emoji-picker/emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.js","sourceRoot":"","sources":["../../../src/components/emoji-picker/emoji-picker.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC"}

package/dist/components/emoji-picker/emoji-picker.styles.d.ts

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

package/dist/components/emoji-picker/emoji-picker.styles.d.ts.map

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

package/dist/components/emoji-picker/emoji-picker.styles.js

@@ -0,0 +1,70 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    padding: var(--lyra-space-s);
+    background: var(--lyra-color-surface);
+  }
+  [part='search'] {
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius-xs);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    font: inherit;
+  }
+  [part='search']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='grid'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--lyra-space-2xs);
+    max-block-size: var(--lyra-size-16rem);
+    overflow-y: auto;
+  }
+  [part='group-label'] {
+    flex-basis: 100%;
+    padding-block: var(--lyra-space-2xs);
+    color: var(--lyra-color-text-quiet);
+    font-size: var(--lyra-font-size-xs);
+    font-weight: var(--lyra-font-weight-semibold);
+  }
+  [part='emoji'] {
+    /* Keep the glyph compact (font-size is unaffected by the box growing) while giving the
+       interactive box the shared minimum target size -- same "small glyph, padded hit box"
+       pattern as lyra-code-block's/lyra-json-viewer's [part='toggle']. */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--lyra-size-2rem);
+    block-size: var(--lyra-size-2rem);
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    border: none;
+    border-radius: var(--lyra-radius-xs);
+    background: transparent;
+    font-size: var(--lyra-font-size-lg);
+    cursor: pointer;
+  }
+  [part='emoji']:hover,
+  [part='emoji'][data-active] {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='empty'] {
+    flex-basis: 100%;
+    padding: var(--lyra-space-m);
+    text-align: center;
+    color: var(--lyra-color-text-quiet);
+  }
+`;
+//# sourceMappingURL=emoji-picker.styles.js.map

package/dist/components/emoji-picker/emoji-picker.styles.js.map

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

package/dist/components/entity-card/entity-card.class.d.ts

@@ -0,0 +1,81 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../result-card/result-field.class.js';
+import '../badge/badge.class.js';
+import '../chip/chip.class.js';
+import '../button/button.class.js';
+import '../empty/empty.class.js';
+/** One knowledge-graph entity, as consumed by every knowledge-graph explorer component. Field
+ *  names deliberately mirror `lyra-graph`'s node shape (`type`, `communityId`), so
+ *  `{ ...graphNode, label: graphNode.label ?? graphNode.id }` adapts a graph node into a
+ *  `LyraEntity` with no mapping table. */
+export interface LyraEntity {
+    id: string;
+    label: string;
+    /** Matches a `nodeTypes[].id` on the paired `lyra-graph`. */
+    type?: string;
+    description?: string;
+    /** Key/value dossier rows, rendered in insertion order. */
+    properties?: Record<string, string | number>;
+    /** Relationship count (in + out). */
+    degree?: number;
+    communityId?: string;
+}
+/** The exact `lyra-graph.nodeTypes` entry shape -- see `lyra-graph-legend`'s identical local
+ *  alias for why this isn't imported from `lyra-graph` itself. */
+type NodeTypeStyle = {
+    id: string;
+    label: string;
+    color?: string;
+    shape?: 'circle' | 'square' | 'diamond';
+};
+export interface LyraEntityCardEventMap {
+    'lyra-entity-activate': CustomEvent<{
+        id: string;
+    }>;
+}
+/**
+ * `<lyra-entity-card>` — a dossier card for one `LyraEntity`: type badge, description, key/value
+ * property rows, degree, community chip, plus a built-in "focus in graph" action. Never fetches or
+ * focuses a graph itself — `lyra-entity-activate` is a request a host routes into `lyra-graph`'s
+ * `focusNode(id, { zoom? })`.
+ *
+ * @customElement lyra-entity-card
+ * @slot - Extra body content below the property rows (e.g. a `lyra-neighbor-list`).
+ * @slot actions - Extra header actions alongside the built-in focus button.
+ * @event lyra-entity-activate - The built-in focus button was activated. `detail: { id }`.
+ * @csspart base - The outer bordered container.
+ * @csspart header - The header row wrapping the type badge, title, and actions.
+ * @csspart type-badge - The resolved entity-type badge.
+ * @csspart title - The entity's label, `role="heading" aria-level="3"` by default.
+ * @csspart description - The entity's description text.
+ * @csspart properties - The wrapper around every property/degree/community row.
+ * @csspart property - One key/value dossier row.
+ * @csspart degree - The relationship-count row.
+ * @csspart community - The community-chip row.
+ * @csspart actions - The wrapper around the `actions` slot and the built-in focus button.
+ * @csspart focus-button - The built-in "Focus in graph" button.
+ * @csspart empty - The empty state shown when `entity` is `null`.
+ */
+export declare class LyraEntityCard extends LyraElement<LyraEntityCardEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** `null` renders the shared `lyra-empty` `noData` state. */
+    entity: LyraEntity | null;
+    /** `lyra-graph` `nodeTypes` pass-through used to resolve the type badge's label and swatch
+     *  color; an unresolvable `entity.type` renders as its raw id in a neutral badge. */
+    types: NodeTypeStyle[];
+    /** Display label for `entity.communityId`'s chip; falls back to the raw id. */
+    communityLabel: string;
+    /** Hides the built-in focus action on pages with no graph. */
+    showFocusButton: boolean;
+    private resolvedType;
+    private onFocusClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-entity-card': LyraEntityCard;
+    }
+}
+export {};
+//# sourceMappingURL=entity-card.class.d.ts.map

package/dist/components/entity-card/entity-card.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-card.class.d.ts","sourceRoot":"","sources":["../../../src/components/entity-card/entity-card.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,sCAAsC,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AAEjC;;;0CAG0C;AAC1C,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC7C,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;kEACkE;AAClE,KAAK,aAAa,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;CAAE,CAAC;AAE5G,MAAM,WAAW,sBAAsB;IACrC,sBAAsB,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACrD;AAwBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,cAAe,SAAQ,WAAW,CAAC,sBAAsB,CAAC;IACrE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,6DAA6D;IAC7B,MAAM,EAAE,UAAU,GAAG,IAAI,CAAQ;IACjE;yFACqF;IACrD,KAAK,EAAE,aAAa,EAAE,CAAM;IAC5D,+EAA+E;IACnC,cAAc,SAAM;IAChE,8DAA8D;IACD,eAAe,UAAQ;IAEpF,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY,CAElB;IAEF,MAAM,IAAI,cAAc,CAuDvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/entity-card/entity-card.class.js

@@ -0,0 +1,148 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { styles } from './entity-card.styles.js';
+import '../result-card/result-field.class.js';
+import '../badge/badge.class.js';
+import '../chip/chip.class.js';
+import '../button/button.class.js';
+import '../empty/empty.class.js';
+function sanitizeTypeColor(color) {
+    return color != null && !/[;{}]/.test(color) ? color : undefined;
+}
+/** Derives themeable `--lyra-badge-*` overrides from a data-driven type color -- the same "type
+ *  color is data-driven by design" exception `lyra-graph`'s `nodeTypes` colors already have,
+ *  applied here to the type badge only; every other color in this component comes from tokens. */
+function typeBadgeStyle(color) {
+    const safe = sanitizeTypeColor(color);
+    if (!safe)
+        return {};
+    return {
+        '--lyra-badge-color': safe,
+        // 8% (not the 16% other quiet-tint recipes in this codebase use) -- WCAG AA 4.5:1 text
+        // contrast must hold for *any* data-driven type color against --lyra-color-surface. 16%
+        // measurably fails it for saturated hues (e.g. #7c3aed lands at 4.46:1, confirmed via axe),
+        // and even 10% isn't safe margin for every hue in this palette -- e.g.
+        // --lyra-theme-color-chart-1 (#8250df) lands at 4.42:1. 8% clears 4.5:1 for both with margin.
+        '--lyra-badge-background': `color-mix(in srgb, ${safe} 8%, var(--lyra-color-surface))`,
+        '--lyra-badge-border': safe,
+    };
+}
+/**
+ * `<lyra-entity-card>` — a dossier card for one `LyraEntity`: type badge, description, key/value
+ * property rows, degree, community chip, plus a built-in "focus in graph" action. Never fetches or
+ * focuses a graph itself — `lyra-entity-activate` is a request a host routes into `lyra-graph`'s
+ * `focusNode(id, { zoom? })`.
+ *
+ * @customElement lyra-entity-card
+ * @slot - Extra body content below the property rows (e.g. a `lyra-neighbor-list`).
+ * @slot actions - Extra header actions alongside the built-in focus button.
+ * @event lyra-entity-activate - The built-in focus button was activated. `detail: { id }`.
+ * @csspart base - The outer bordered container.
+ * @csspart header - The header row wrapping the type badge, title, and actions.
+ * @csspart type-badge - The resolved entity-type badge.
+ * @csspart title - The entity's label, `role="heading" aria-level="3"` by default.
+ * @csspart description - The entity's description text.
+ * @csspart properties - The wrapper around every property/degree/community row.
+ * @csspart property - One key/value dossier row.
+ * @csspart degree - The relationship-count row.
+ * @csspart community - The community-chip row.
+ * @csspart actions - The wrapper around the `actions` slot and the built-in focus button.
+ * @csspart focus-button - The built-in "Focus in graph" button.
+ * @csspart empty - The empty state shown when `entity` is `null`.
+ */
+export class LyraEntityCard extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** `null` renders the shared `lyra-empty` `noData` state. */
+        this.entity = null;
+        /** `lyra-graph` `nodeTypes` pass-through used to resolve the type badge's label and swatch
+         *  color; an unresolvable `entity.type` renders as its raw id in a neutral badge. */
+        this.types = [];
+        /** Display label for `entity.communityId`'s chip; falls back to the raw id. */
+        this.communityLabel = '';
+        /** Hides the built-in focus action on pages with no graph. */
+        this.showFocusButton = true;
+        this.onFocusClick = () => {
+            if (this.entity)
+                this.emit('lyra-entity-activate', { id: this.entity.id });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    resolvedType(type) {
+        return this.types.find((t) => t.id === type);
+    }
+    render() {
+        if (!this.entity) {
+            return html `<div part="base"><lyra-empty part="empty" heading=${this.localize('noData')}></lyra-empty></div>`;
+        }
+        const entity = this.entity;
+        const titleText = entity.label || this.localize('untitledEntity');
+        const resolved = entity.type ? this.resolvedType(entity.type) : undefined;
+        const badgeLabel = resolved?.label ?? entity.type;
+        const properties = Object.entries(entity.properties ?? {});
+        const ariaLevel = this.getAttribute('aria-level') || '3';
+        // The degree/community rows route their localized labels through `lyra-result-field`'s
+        // `label` prop, exactly like the plain `property` rows above: the label/value separator is
+        // presentation that belongs to `lyra-result-field` (a single, locale-adjustable place), not a
+        // literal joined into this template. The community *value* stays slotted because it's rich
+        // content (a chip), which the default slot handles by design.
+        return html `
+      <div part="base">
+        <div part="header">
+          ${badgeLabel
+            ? html `<lyra-badge part="type-badge" style=${styleMap(typeBadgeStyle(resolved?.color))}
+                >${badgeLabel}</lyra-badge
+              >`
+            : nothing}
+          <span part="title" role="heading" aria-level=${ariaLevel}>${titleText}</span>
+          <div part="actions">
+            <slot name="actions"></slot>
+            ${this.showFocusButton
+            ? html `<lyra-button part="focus-button" size="s" @click=${this.onFocusClick}
+                  >${this.localize('focusInGraph')}</lyra-button
+                >`
+            : nothing}
+          </div>
+        </div>
+        ${entity.description ? html `<p part="description">${entity.description}</p>` : nothing}
+        <div part="properties">
+          ${properties.map(([key, value]) => html `<lyra-result-field part="property" label=${key} value=${String(value)}></lyra-result-field>`)}
+          ${entity.degree != null
+            ? html `<lyra-result-field
+                part="degree"
+                label=${this.localize('entityDegree')}
+                value=${String(entity.degree)}
+              ></lyra-result-field>`
+            : nothing}
+          ${entity.communityId
+            ? html `<lyra-result-field part="community" label=${this.localize('entityCommunity')}
+                ><lyra-chip>${this.communityLabel || entity.communityId}</lyra-chip></lyra-result-field
+              >`
+            : nothing}
+        </div>
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraEntityCard.prototype, "entity", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraEntityCard.prototype, "types", void 0);
+__decorate([
+    property({ attribute: 'community-label' })
+], LyraEntityCard.prototype, "communityLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-focus-button' })
+], LyraEntityCard.prototype, "showFocusButton", void 0);
+//# sourceMappingURL=entity-card.class.js.map

package/dist/components/entity-card/entity-card.class.js.map

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

package/dist/components/entity-card/entity-card.d.ts

@@ -0,0 +1,7 @@
+export * from './entity-card.class.js';
+import '../result-card/result-field.js';
+import '../badge/badge.js';
+import '../chip/chip.js';
+import '../button/button.js';
+import '../empty/empty.js';
+//# sourceMappingURL=entity-card.d.ts.map