@fusion.dev/helix-headless 0.115.0 → 0.117.0

package/dist/element-events.generated.js

@@ -87,6 +87,13 @@ registerElementEvents({
         'toggle',
     ],
     'helix-headless-filter-menu': ['helix-facet'],
+    'helix-headless-graph': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-graph-pan',
+        'helix-graph-ready',
+        'helix-graph-zoom',
+    ],
     'helix-headless-heatmap': ['helix-resize'],
     'helix-headless-image': ['error', 'load'],
     'helix-headless-input': ['change', 'helix-before-change', 'input'],

package/dist/graph/index.d.ts

@@ -0,0 +1,3 @@
+export type { Adjacency, Entry, GraphLink, GraphNode, Relation } from './root/graph-model.js';
+export { adjacencyOf, entriesOf, nameOf, sortedOf, within } from './root/graph-model.js';
+export { HelixHeadlessGraph } from './root/graph-root.js';

package/dist/graph/index.js

@@ -0,0 +1,2 @@
+export { adjacencyOf, entriesOf, nameOf, sortedOf, within } from './root/graph-model.js';
+export { HelixHeadlessGraph } from './root/graph-root.js';

package/dist/graph/root/graph-model.d.ts

@@ -0,0 +1,63 @@
+/** One note in a graph. */
+export interface GraphNode {
+    /** Unique in the graph, and what `active` and a link's ends name. */
+    id: string;
+    /** What the note is called. Its `id` where it has none. */
+    label?: string | undefined;
+    /** A kind the note belongs to, such as a tag, which a renderer colors it by. */
+    group?: string | undefined;
+    /** How large the renderer draws it, relative to the others. */
+    size?: number | undefined;
+    /** Where the note stands, where the page already knows. Laid out where it does not. */
+    x?: number | undefined;
+    /** Where the note stands, where the page already knows. Laid out where it does not. */
+    y?: number | undefined;
+}
+/** One link between two notes, from `source` to `target`. */
+export interface GraphLink {
+    source: string;
+    target: string;
+    /** What the link says, such as "cites". */
+    label?: string | undefined;
+}
+/** Which notes each note links to and is linked from. */
+export type Adjacency = Map<string, {
+    from: Set<string>;
+    to: Set<string>;
+}>;
+/** How a note in the list stands to the selected one. */
+export type Relation = 'both' | 'from' | 'selected' | 'to';
+/** One row of the list: a note, and how it stands to the selected one where it does. */
+export interface Entry {
+    node: GraphNode;
+    relation?: Relation | undefined;
+}
+/** A note's name, its `id` where it has no label. */
+export declare const nameOf: (node: GraphNode) => string;
+/**
+ * Which notes each note links to and is linked from, in one pass over the
+ * links. A link naming a note that is not in the graph is kept: the list
+ * shows notes and not links, so it does no harm, and a page adding the note a
+ * moment later finds its links already counted.
+ */
+export declare const adjacencyOf: (links: readonly GraphLink[]) => Adjacency;
+/**
+ * The notes within `depth` links of `from`, whichever way each link runs, the
+ * note itself included: the local graph.
+ *
+ * **Both ways, as a reader thinks of a note's neighborhood**: a note that
+ * cites this one is as near to it as one this one cites.
+ */
+export declare const within: (adjacency: Adjacency, from: string, depth: number) => Set<string>;
+/**
+ * The list's rows, in the order a reader wants them: the selected note, then
+ * the notes it links to and from, then every other note, each part in the
+ * order of its names, and only the notes `shown` holds and `query` matches.
+ *
+ * **The neighborhood first**, because it is what a reader came to the graph
+ * for and what a picture of it shows by its lines, which a list has to say in
+ * its order instead.
+ */
+export declare const entriesOf: (sorted: readonly GraphNode[], adjacency: Adjacency, active: string, query: string, shown?: ReadonlySet<string>) => Entry[];
+/** The notes in the order of their names, as the page's language orders words. */
+export declare const sortedOf: (nodes: readonly GraphNode[], lang?: string) => GraphNode[];

package/dist/graph/root/graph-model.js

@@ -0,0 +1,75 @@
+export const nameOf = (node) => node.label || node.id;
+export const adjacencyOf = (links) => {
+    const adjacency = new Map();
+    const at = (id) => {
+        let found = adjacency.get(id);
+        if (!found) {
+            found = { from: new Set(), to: new Set() };
+            adjacency.set(id, found);
+        }
+        return found;
+    };
+    for (const { source, target } of links) {
+        if (source === target) {
+            continue;
+        }
+        at(source).to.add(target);
+        at(target).from.add(source);
+    }
+    return adjacency;
+};
+export const within = (adjacency, from, depth) => {
+    const reached = new Set([from]);
+    let edge = [from];
+    for (let step = 0; step < depth && edge.length > 0; step++) {
+        const next = [];
+        for (const id of edge) {
+            const near = adjacency.get(id);
+            for (const one of [...(near?.to ?? []), ...(near?.from ?? [])]) {
+                if (!reached.has(one)) {
+                    reached.add(one);
+                    next.push(one);
+                }
+            }
+        }
+        edge = next;
+    }
+    return reached;
+};
+export const entriesOf = (sorted, adjacency, active, query, shown) => {
+    const wanted = query.trim().toLocaleLowerCase();
+    const kept = (node) => (!shown || shown.has(node.id)) &&
+        (wanted === '' || nameOf(node).toLocaleLowerCase().includes(wanted));
+    const near = adjacency.get(active);
+    const relationOf = (id) => {
+        if (id === active) {
+            return 'selected';
+        }
+        const to = near?.to.has(id) === true;
+        const from = near?.from.has(id) === true;
+        return to && from ? 'both' : to ? 'to' : from ? 'from' : undefined;
+    };
+    const first = [];
+    const neighbors = [];
+    const rest = [];
+    for (const node of sorted) {
+        if (!kept(node)) {
+            continue;
+        }
+        const relation = relationOf(node.id);
+        if (relation === 'selected') {
+            first.push({ node, relation });
+        }
+        else if (relation) {
+            neighbors.push({ node, relation });
+        }
+        else {
+            rest.push({ node });
+        }
+    }
+    return [...first, ...neighbors, ...rest];
+};
+export const sortedOf = (nodes, lang) => {
+    const collator = new Intl.Collator(lang || undefined, { numeric: true, sensitivity: 'base' });
+    return [...nodes].sort((one, other) => collator.compare(nameOf(one), nameOf(other)));
+};

package/dist/graph/root/graph-root.d.ts

@@ -0,0 +1,189 @@
+import { HelixElement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { type GraphLink, type GraphNode } from './graph-model.js';
+declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
+/**
+ * @summary A frame around a graph of notes drawn by another library, and the list that makes it readable.
+ *
+ * @description
+ * Helix draws no graph. A force layout of thousands of notes is physics and
+ * WebGL, which a renderer such as Sigma.js does. Put the renderer's box in the
+ * frame, draw `nodes` and `links` in it, and answer the frame's pan and zoom
+ * events by moving the drawing.
+ *
+ * What the frame adds is what a drawing of a graph cannot do: a list of every
+ * note beside it, which is the graph for a screen reader and a quick way to
+ * find a note for anyone. The selected note comes first, then the notes it
+ * links to and from, then every other note, and the search field narrows it.
+ * Selecting a note in the list or in the drawing is the same selection.
+ *
+ * Set `depth` to show the local graph: only the notes within that many links
+ * of the selected one.
+ *
+ * `nodes` and `links` are properties, never markup: a graph of ten thousand
+ * notes as ten thousand elements would cost what the renderer exists to save.
+ * The list draws only the rows in view.
+ *
+ * The list scrolls on this tier. It carries `data-scroller`, and `core` ships
+ * `[data-scroller] { overflow: auto }` into every shadow root. You still need
+ * to set a block size on the list, or it grows to hold every row.
+ *
+ * @since 0.116.0
+ * @status experimental
+ * @category media
+ * @aliases Knowledge graph, Network, Note graph, Second brain
+ * @documentation https://fusion.dev/helix/components/graph
+ *
+ * @slot - The renderer's box, which the drawing is made in.
+ * @slot filter-icon - The icon in the search field. Defaults to a magnifying glass.
+ * @slot footer - Content below the graph.
+ * @slot header - Content above the graph.
+ *
+ * @event {HelixActivateEvent} helix-activate - A note was selected, in the list or in the drawing. The detail's `value` is its `id`.
+ * @event {HelixBeforeActivateEvent} helix-before-activate - A note is about to be selected. Cancelable: cancel it to keep the selection in your own state.
+ * @event {HelixGraphPanEvent} helix-graph-pan - A pan button or arrow key was pressed. Move the drawing.
+ * @event {HelixGraphReadyEvent} helix-graph-ready - The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not.
+ * @event {HelixGraphZoomEvent} helix-graph-zoom - A zoom button or key was pressed. Zoom the drawing.
+ *
+ * @csspart after - The room the notes after those drawn would take, so the list scrolls its whole length.
+ * @csspart before - The room the notes before those drawn would take.
+ * @csspart body - The drawing beside the list, or above it where the frame is narrow.
+ * @csspart controls - The group the pan and zoom buttons sit in.
+ * @csspart count - How many notes the list holds, which a search narrows, at the end of the search bar.
+ * @csspart filter-icon - The icon beside the search field.
+ * @csspart filter-mark - The default icon beside the search field, shown when none is slotted.
+ * @csspart footer - The strip below the graph.
+ * @csspart fullscreen - The button that makes the graph fill the screen.
+ * @csspart header - The strip above the graph.
+ * @csspart list - The list of notes, which draws only the rows in view.
+ * @csspart live - What screen readers hear when a search changes how many notes there are.
+ * @csspart note - One note in the list.
+ * @csspart note-cursor - The note the keyboard is on in the list.
+ * @csspart note-linked - A note linked to or from the selected one.
+ * @csspart note-name - A note's name in the list.
+ * @csspart note-relation - How a note stands to the selected one, such as "Linked from Alpha".
+ * @csspart note-selected - The selected note, first in the list.
+ * @csspart pan-down - The button that moves the graph down.
+ * @csspart pan-end - The button that moves the graph toward the end of a line of text: right in English.
+ * @csspart pan-start - The button that moves the graph toward the start of a line of text: left in English.
+ * @csspart pan-up - The button that moves the graph up.
+ * @csspart panel - The search field and the list, beside the drawing or below it.
+ * @csspart region - The frame: the drawing, its controls and the list.
+ * @csspart search - The bar holding the icon, the search field and the count.
+ * @csspart search-field - The field that finds a note by its name.
+ * @csspart stage - The drawing and its controls.
+ * @csspart viewport - The box the renderer draws in.
+ * @csspart zoom-in - The zoom in button.
+ * @csspart zoom-out - The zoom out button.
+ *
+ * @cssstate fullscreen - The graph fills the screen.
+ * @cssstate idle - The user has been still long enough for the header and footer to fade.
+ * @cssstate ready - The graph has been drawn whole, after `helix-graph-ready`.
+ */
+export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
+    /** What the list says of a note's count, with `{count}`. */
+    countLabel: string;
+    /**
+     * How many links from the selected note to show, for its local graph. Unset
+     * shows every note. The list holds what the drawing shows.
+     */
+    depth?: number;
+    /**
+     * The graph's name, read by screen readers, such as "Research notes".
+     * Required.
+     */
+    label: string;
+    /** How a note linked both to and from the selected one is described, with `{note}`. */
+    linkedBothLabel: string;
+    /** How a note the selected one links to is described, with `{note}`, the selected note's name. */
+    linkedFromLabel: string;
+    /** The links between notes, each from `source` to `target`. A property, never an attribute. */
+    links: readonly GraphLink[];
+    /** How a note that links to the selected one is described, with `{note}`. */
+    linksToLabel: string;
+    /** The notes. A property, never an attribute. */
+    nodes: readonly GraphNode[];
+    /** The list's name, read by screen readers. */
+    notesLabel: string;
+    /** The search field's name. */
+    searchLabel: string;
+    /** How the selected note is described in the list. */
+    selectedLabel: string;
+    /** What the search field holds. */
+    private query;
+    /** The row the keyboard is on, as an index into the list. */
+    private cursor;
+    /** Which notes link to and from each, read again when `links` changes. */
+    private adjacency;
+    /** The notes in the order of their names, read again when `nodes` changes. */
+    private sorted;
+    /** The list's rows, read again when anything they come from changes. */
+    private entries;
+    /** The notes the local graph keeps, or every note where there is no `depth`. */
+    private kept;
+    /** Whether the graph has been drawn whole, which `drawn()` says. */
+    private whole;
+    /** How many notes there were when the count was last said. */
+    private said;
+    private readonly virtualize;
+    /**
+     * @internal The notes the drawing shows, for the code that draws it: those
+     * within `depth` of the selected note, or `undefined` for every note.
+     */
+    get shown(): ReadonlySet<string> | undefined;
+    /** Whether the graph has been drawn whole. For code that runs after `helix-graph-ready`. */
+    get ready(): boolean;
+    /**
+     * Says the graph has been drawn whole, or with `false`, that it no longer
+     * is. Call it when the renderer's layout has settled and the graph is
+     * finished. The first call after
+     * the graph was not drawn sends `helix-graph-ready` and turns on
+     * `:state(ready)`.
+     */
+    drawn(whole?: boolean): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    protected panEvent(detail: ViewportPanDetail): Event;
+    protected zoomEvent(detail: ViewportZoomDetail): Event;
+    protected get restingControls(): string;
+    protected get restingControlsLabel(): string;
+    /** How many notes the list holds, in the page's numbers. */
+    private countText;
+    /** How a row stands to the selected note, in words, or nothing where it does not. */
+    private relationText;
+    /** Selects the note a row names, through the request a page can refuse. */
+    private choose;
+    /**
+     * Moves the keyboard to a row, and the list to show it.
+     *
+     * **Scrolled by the row's own box where it is drawn, and by the estimate
+     * where it is not**, so a jump to the end of ten thousand notes lands there
+     * and the row is drawn by the update the scroll asks for.
+     */
+    private moveTo;
+    /**
+     * The keys in the list. **Kept from the frame**, whose arrows pan the
+     * drawing: a reader moving through the list was moving the graph under it.
+     */
+    private readonly handleListKeydown;
+    /**
+     * The search field's keys, which belong to the field and never pan the
+     * graph. Escape empties a search that has words in it, and passes through
+     * an empty one to whatever the page does with it.
+     */
+    private readonly handleSearchKeydown;
+    private readonly handleSearch;
+    /**
+     * The mark in the search field, behind a seam: a slot for the page, and a
+     * method for the tier above, as the listbox's filter has.
+     */
+    protected renderFilterIcon(): TemplateResult;
+    private renderRows;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-graph': HelixHeadlessGraph;
+    }
+}
+export {};

package/dist/graph/root/graph-root.js

@@ -0,0 +1,321 @@
+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 { customElement, fillTemplate, formatNumbers, HelixElement, HelixGraphPanEvent, HelixGraphReadyEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, VirtualizeController, } from '@fusion.dev/helix-core';
+import { magnifyingGlass } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { adjacencyOf, entriesOf, nameOf, sortedOf, within, } from './graph-model.js';
+const PAGE = 10;
+let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinControllerActive(HelixElement)) {
+    constructor() {
+        super(...arguments);
+        this.countLabel = '{count} notes';
+        this.label = '';
+        this.linkedBothLabel = 'Linked both ways with {note}';
+        this.linkedFromLabel = 'Linked from {note}';
+        this.links = [];
+        this.linksToLabel = 'Links to {note}';
+        this.nodes = [];
+        this.notesLabel = 'Notes';
+        this.searchLabel = 'Find a note';
+        this.selectedLabel = 'Selected';
+        this.query = '';
+        this.cursor = 0;
+        this.adjacency = new Map();
+        this.sorted = [];
+        this.entries = [];
+        this.whole = false;
+        this.said = '';
+        this.virtualize = new VirtualizeController(this, {
+            container: () => this.partNamed('list'),
+            count: () => this.entries.length,
+            estimate: () => 32,
+            rows: () => [...(this.renderRoot.querySelectorAll?.('[data-index]') ?? [])].map((element) => ({
+                element: element,
+                index: Number(element.dataset.index),
+            })),
+        });
+        this.handleListKeydown = (event) => {
+            const moves = {
+                ArrowDown: this.cursor + 1,
+                ArrowUp: this.cursor - 1,
+                End: this.entries.length - 1,
+                Home: 0,
+                PageDown: this.cursor + PAGE,
+                PageUp: this.cursor - PAGE,
+            };
+            if (event.key in moves) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveTo(moves[event.key]);
+                return;
+            }
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.choose(this.cursor);
+            }
+        };
+        this.handleSearchKeydown = (event) => {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.partNamed('list')?.focus();
+            }
+            if (event.key === 'Escape') {
+                if (this.query === '') {
+                    return;
+                }
+                event.preventDefault();
+                this.query = '';
+            }
+            event.stopPropagation();
+        };
+        this.handleSearch = (event) => {
+            this.query = event.target.value;
+        };
+    }
+    get shown() {
+        return this.kept;
+    }
+    get ready() {
+        return this.whole;
+    }
+    drawn(whole = true) {
+        if (whole === this.whole) {
+            return;
+        }
+        this.whole = whole;
+        this.toggleState('ready', whole);
+        if (whole) {
+            this.dispatchEvent(new HelixGraphReadyEvent());
+        }
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('fullscreen', this.filled);
+        this.toggleState('idle', this.resting);
+        if (changed.has('links')) {
+            this.adjacency = adjacencyOf(this.links);
+        }
+        if (changed.has('nodes')) {
+            this.sorted = sortedOf(this.nodes, this.closest?.('[lang]')?.getAttribute('lang') ?? '');
+        }
+        if (changed.has('active') || changed.has('depth') || changed.has('links')) {
+            this.kept =
+                typeof this.depth === 'number' && this.active !== ''
+                    ? within(this.adjacency, this.active, Math.max(0, this.depth))
+                    : undefined;
+        }
+        if (['nodes', 'links', 'active', 'depth', 'query'].some((name) => changed.has(name))) {
+            this.entries = entriesOf(this.sorted, this.adjacency, this.active, this.query, this.kept);
+            this.cursor = 0;
+            const list = this.partNamed('list');
+            if (list) {
+                list.scrollTop = 0;
+            }
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.virtualize.measure();
+        if (changed.has('query') && changed.get('query') !== undefined) {
+            this.said = this.countText();
+        }
+    }
+    panEvent(detail) {
+        return new HelixGraphPanEvent(detail);
+    }
+    zoomEvent(detail) {
+        return new HelixGraphZoomEvent(detail);
+    }
+    get restingControls() {
+        return 'zoom fullscreen';
+    }
+    get restingControlsLabel() {
+        return 'Graph controls';
+    }
+    countText() {
+        const lang = this.closest?.('[lang]')?.getAttribute('lang') ?? '';
+        return fillTemplate(this.countLabel, { count: formatNumbers(lang)(this.entries.length) });
+    }
+    relationText(entry) {
+        const selected = this.nodes.find((node) => node.id === this.active);
+        const note = selected ? nameOf(selected) : '';
+        switch (entry.relation) {
+            case 'selected':
+                return this.selectedLabel;
+            case 'to':
+                return fillTemplate(this.linkedFromLabel, { note });
+            case 'from':
+                return fillTemplate(this.linksToLabel, { note });
+            case 'both':
+                return fillTemplate(this.linkedBothLabel, { note });
+            default:
+                return '';
+        }
+    }
+    choose(index) {
+        const entry = this.entries[index];
+        if (entry) {
+            this.requestActive(entry.node.id);
+        }
+    }
+    moveTo(index) {
+        const last = this.entries.length - 1;
+        this.cursor = Math.min(Math.max(index, 0), Math.max(last, 0));
+        const list = this.partNamed('list');
+        if (!list) {
+            return;
+        }
+        const row = this.renderRoot.querySelector?.(`[data-index="${this.cursor}"]`);
+        if (row) {
+            row.scrollIntoView?.({ block: 'nearest' });
+        }
+        else {
+            list.scrollTop = this.cursor * 32;
+        }
+        this.virtualize.measure();
+    }
+    renderFilterIcon() {
+        return html `<slot name="filter-icon">
+      <svg part="filter-mark" fill="currentColor" viewBox=${magnifyingGlass.viewBox}>
+        ${unsafeSVG(magnifyingGlass.content)}
+      </svg>
+    </slot>`;
+    }
+    renderRows() {
+        const { first, last } = this.virtualize.window;
+        const total = this.entries.length;
+        return this.entries.slice(first, last).map((entry, offset) => {
+            const index = first + offset;
+            const relation = this.relationText(entry);
+            const chosen = entry.relation === 'selected';
+            return html `<div
+        part="note${chosen ? ' note-selected' : entry.relation ? ' note-linked' : ''}${index === this.cursor ? ' note-cursor' : ''}"
+        role="option"
+        id=${`note-${index}`}
+        data-index=${index}
+        aria-selected=${chosen ? 'true' : 'false'}
+        aria-posinset=${index + 1}
+        aria-setsize=${total}
+        aria-description=${relation || nothing}
+        @click=${() => {
+                this.cursor = index;
+                this.choose(index);
+            }}
+      >
+        <span part="note-name">${nameOf(entry.node)}</span>
+        ${relation ? html `<span part="note-relation" aria-hidden="true">${relation}</span>` : nothing}
+      </div>`;
+        });
+    }
+    render() {
+        const { after, before } = this.virtualize.window;
+        const cursor = this.entries.length > 0 ? `note-${this.cursor}` : nothing;
+        return html `<div
+      part="region"
+      role="group"
+      aria-label=${this.label || this.getAttribute?.('aria-label') || 'Graph'}
+      tabindex="0"
+      @focusin=${this.idle.stir}
+      @keydown=${this.handleKeydown}
+      @pointerleave=${this.idle.leave}
+      @pointermove=${this.idle.stir}
+    >
+      <div part="header">
+        <slot name="header"></slot>
+      </div>
+      <div part="body">
+        <div part="stage">
+          <div part="viewport">
+            <slot></slot>
+          </div>
+          ${this.renderControls()}
+        </div>
+        <div part="panel">
+          <div part="search">
+            <span part="filter-icon" aria-hidden="true">${this.renderFilterIcon()}</span>
+            <input
+              part="search-field"
+              type="text"
+              autocomplete="off"
+              spellcheck="false"
+              aria-label=${this.searchLabel}
+              placeholder=${this.searchLabel}
+              .value=${this.query}
+              @input=${this.handleSearch}
+              @keydown=${this.handleSearchKeydown}
+            />
+            <span part="count" aria-hidden="true">${this.countText()}</span>
+          </div>
+          <div
+            part="list"
+            role="listbox"
+            tabindex="0"
+            data-scroller
+            aria-label=${this.notesLabel}
+            aria-activedescendant=${cursor}
+            @keydown=${this.handleListKeydown}
+            @scroll=${() => this.virtualize.measure()}
+          >
+            <div part="before" style="block-size: ${before}px"></div>
+            ${this.renderRows()}
+            <div part="after" style="block-size: ${after}px"></div>
+          </div>
+        </div>
+      </div>
+      <div part="footer">
+        <slot name="footer"></slot>
+      </div>
+      <span part="live" role="status">${this.said}</span>
+    </div>`;
+    }
+};
+__decorate([
+    property({ attribute: 'count-label' })
+], HelixHeadlessGraph.prototype, "countLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessGraph.prototype, "depth", void 0);
+__decorate([
+    property()
+], HelixHeadlessGraph.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'linked-both-label' })
+], HelixHeadlessGraph.prototype, "linkedBothLabel", void 0);
+__decorate([
+    property({ attribute: 'linked-from-label' })
+], HelixHeadlessGraph.prototype, "linkedFromLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessGraph.prototype, "links", void 0);
+__decorate([
+    property({ attribute: 'links-to-label' })
+], HelixHeadlessGraph.prototype, "linksToLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessGraph.prototype, "nodes", void 0);
+__decorate([
+    property({ attribute: 'notes-label' })
+], HelixHeadlessGraph.prototype, "notesLabel", void 0);
+__decorate([
+    property({ attribute: 'search-label' })
+], HelixHeadlessGraph.prototype, "searchLabel", void 0);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessGraph.prototype, "selectedLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessGraph.prototype, "query", void 0);
+__decorate([
+    state()
+], HelixHeadlessGraph.prototype, "cursor", void 0);
+HelixHeadlessGraph = __decorate([
+    customElement('helix-headless-graph')
+], HelixHeadlessGraph);
+export { HelixHeadlessGraph };

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';
 export * from './format-date/index.js';
+export * from './graph/index.js';
 export * from './heatmap/index.js';
 export * from './icon/index.js';
 export * from './icon-button/index.js';