lit-rdf 0.1.0

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "lit-rdf",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "prepare": "husky",
+    "lint": "eslint . --quiet --ignore-path .gitignore",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsc",
+    "prepack": "npm run build",
+    "release": "changeset publish"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.d.ts"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./components/*.js": "./src/components/*.js",
+    "./converter.js": "./src/converter.js",
+    "./constructor.js": "./src/constructor.js",
+    "./mixins.js": "./src/mixins.js",
+    "./controllers.js": "./src/controllers.js",
+    "./runtime/*.js": "./src/runtime/*.js"
+  },
+  "dependencies": {
+    "@lit/context": "^1.1.6",
+    "@rdfjs-elements/lit-helpers": "^0.3.13",
+    "@rdfjs/data-model": "^2.1.1",
+    "@rdfjs/types": "^2",
+    "@zazuko/env": "^3.0.1",
+    "@zazuko/prefixes": "^2.6.1",
+    "clownface": "^2.0.3",
+    "clownface-shacl-path": "^2.4.0",
+    "is-url": "^1.2.4",
+    "lit": "^3",
+    "sparql-path-parser": "^0.1.1"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.0",
+    "@chromatic-com/storybook": "^5.0.1",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@storybook/addon-docs": "^10.2.12",
+    "@storybook/addon-vitest": "^10.2.12",
+    "@storybook/web-components-vite": "^10.2.12",
+    "@tpluscode/eslint-config": "^0.6.4",
+    "@types/clownface": "^2.0.10",
+    "@types/is-url": "^1.2.32",
+    "@types/rdfjs__data-model": "^2.0.9",
+    "@typescript-eslint/eslint-plugin": "^7",
+    "@typescript-eslint/parser": "^7",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "eslint-import-resolver-typescript": "^2",
+    "eslint-plugin-storybook": "^10.2.12",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "playwright": "^1.58.2",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "storybook": "^10.2.12",
+    "string-to-stream": "^3.0.1",
+    "typescript": "^5",
+    "util": "^0.12.5",
+    "vitest": "^4.0.18"
+  },
+  "lint-staged": {
+    "*.{js,ts}": [
+      "eslint --fix --quiet"
+    ]
+  }
+}

package/src/components/data-graph.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import type { AnyPointer } from 'clownface';
+declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithEnvironment> & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithGraph>;
+export default class extends default_base {
+    parent: AnyPointer | undefined;
+    render(): unknown;
+}
+export {};

package/src/components/data-graph.js

@@ -0,0 +1,26 @@
+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, LitElement } from 'lit';
+import { consume } from '@lit/context';
+import { customElement, state } from 'lit/decorators.js';
+import { dataset } from '../context.js';
+import { consumeEnvironment } from '../mixins/environment.js';
+import { provideGraph } from '../mixins/graph.js';
+let default_1 = class extends provideGraph(consumeEnvironment(LitElement)) {
+    render() {
+        return html `
+            <slot></slot>`;
+    }
+};
+__decorate([
+    consume({ context: dataset, subscribe: true }),
+    state()
+], default_1.prototype, "parent", void 0);
+default_1 = __decorate([
+    customElement('data-graph')
+], default_1);
+export default default_1;

package/src/components/focus-node.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+import type { MultiPointer } from 'clownface';
+export default class extends LitElement {
+    static styles: import("lit").CSSResult;
+    focusNode: MultiPointer | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/components/focus-node.js

@@ -0,0 +1,28 @@
+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 { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { provide } from '@lit/context';
+import { focusNode as context } from '../context.js';
+let default_1 = class extends LitElement {
+    static { this.styles = css `
+        :host {
+            display: contents !important;
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    provide({ context }),
+    state()
+], default_1.prototype, "focusNode", void 0);
+default_1 = __decorate([
+    customElement('focus-node')
+], default_1);
+export default default_1;

package/src/components/rdf-environment.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithEnvironment>;
+export default class extends default_base {
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/components/rdf-environment.js

@@ -0,0 +1,23 @@
+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, LitElement } from 'lit';
+import env from '@zazuko/env/web.js';
+import { customElement } from 'lit/decorators.js';
+import { provideEnvironment } from '../mixins.js';
+let default_1 = class extends provideEnvironment(LitElement) {
+    constructor() {
+        super();
+        this.rdf = env;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+default_1 = __decorate([
+    customElement('rdf-environment')
+], default_1);
+export default default_1;

package/src/components/resource-label.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import type { NamedNode } from '@rdfjs/types';
+declare const ResourceLabel_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithFocusNode>;
+export declare class ResourceLabel extends ResourceLabel_base {
+    property: NamedNode;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/components/resource-label.js

@@ -0,0 +1,31 @@
+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, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js';
+import rdf from '@rdfjs/data-model';
+import { consumeFocusNode } from '../mixins/focusNode.js';
+import { toNamedNode } from '../converter.js';
+let ResourceLabel = class ResourceLabel extends consumeFocusNode(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.property = rdf.namedNode('http://www.w3.org/2000/01/rdf-schema#label');
+    }
+    render() {
+        if (!this.focusNode) {
+            return html ``;
+        }
+        return html `${localizedLabel(this.focusNode, { property: this.property })}`;
+    }
+};
+__decorate([
+    property({ type: Object, converter: toNamedNode })
+], ResourceLabel.prototype, "property", void 0);
+ResourceLabel = __decorate([
+    customElement('resource-label')
+], ResourceLabel);
+export { ResourceLabel };

package/src/components/resource-link.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+import type { NamedNode } from '@rdfjs/types';
+declare const ResourceLink_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithFocusNode>;
+export declare class ResourceLink extends ResourceLink_base {
+    property?: NamedNode;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/components/resource-link.js

@@ -0,0 +1,36 @@
+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, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { findNodes } from 'clownface-shacl-path';
+import { consumeFocusNode } from '../mixins/focusNode.js';
+import { toPropertyPath } from '../converter.js';
+let ResourceLink = class ResourceLink extends consumeFocusNode(LitElement) {
+    render() {
+        if (!this.focusNode) {
+            return html `
+                <slot></slot>`;
+        }
+        let href;
+        if (this.property) {
+            href = findNodes(this.focusNode, this.property).value;
+        }
+        if (!href) {
+            href = this.focusNode.value;
+        }
+        return html `<a href="${href}">
+            <slot></slot>
+        </a>`;
+    }
+};
+__decorate([
+    property({ type: Object, converter: toPropertyPath })
+], ResourceLink.prototype, "property", void 0);
+ResourceLink = __decorate([
+    customElement('resource-link')
+], ResourceLink);
+export { ResourceLink };

package/src/components/target-node.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import type { NamedNode } from '@rdfjs/types';
+declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithFocusNode>;
+export default class extends default_base {
+    static styles: import("lit").CSSResult;
+    orderBy: NamedNode | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/components/target-node.js

@@ -0,0 +1,30 @@
+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 { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { provide } from '@lit/context';
+import { provideTargetNode } from '../mixins/targetNode.js';
+import { toNamedNode } from '../converter.js';
+import { sortCriteria } from '../context.js';
+let default_1 = class extends provideTargetNode(LitElement) {
+    static { this.styles = css `
+        :host {
+            display: contents !important;
+        }
+    `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Object, attribute: 'order-by', converter: toNamedNode }),
+    provide({ context: sortCriteria })
+], default_1.prototype, "orderBy", void 0);
+default_1 = __decorate([
+    customElement('target-node')
+], default_1);
+export default default_1;

package/src/components/traverse-graph.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import type { GraphPointer, MultiPointer } from 'clownface';
+declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<{
+    objectNode: MultiPointer | undefined;
+}>;
+export default class extends default_base {
+    static styles: import("lit").CSSResult;
+    renderObjectNode?: (node: GraphPointer) => unknown;
+    renderObjectNodes?: (nodes: MultiPointer) => unknown;
+    render(): unknown;
+}
+export {};

package/src/components/traverse-graph.js

@@ -0,0 +1,38 @@
+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 { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { traverseGraph } from '../mixins/traverseGraph.js';
+let default_1 = class extends traverseGraph(LitElement) {
+    static { this.styles = css `
+        :host {
+            display: contents;
+        }
+    `; }
+    render() {
+        if (!this.objectNode || this.objectNode.terms.length === 0) {
+            return html `<slot name="empty"></slot>`;
+        }
+        if (this.renderObjectNodes) {
+            return this.renderObjectNodes(this.objectNode);
+        }
+        if (this.renderObjectNode) {
+            return html `${this.objectNode.map(node => this.renderObjectNode(node))}`;
+        }
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], default_1.prototype, "renderObjectNode", void 0);
+__decorate([
+    property({ type: Object })
+], default_1.prototype, "renderObjectNodes", void 0);
+default_1 = __decorate([
+    customElement('traverse-graph')
+], default_1);
+export default default_1;

package/src/constructor.d.ts

@@ -0,0 +1,13 @@
+import type { LitElement } from 'lit';
+import type { AnyPointer, MultiPointer } from 'clownface';
+import type { Environment } from './context.js';
+export type LitElementConstructor<T = {}> = new (...args: any[]) => T & LitElement;
+export type WithGraph = {
+    graph: AnyPointer | undefined;
+};
+export type WithEnvironment = {
+    rdf: Environment;
+};
+export type WithFocusNode = {
+    focusNode: MultiPointer | undefined;
+};

package/src/constructor.js

@@ -0,0 +1 @@
+export {};

package/src/context.d.ts

@@ -0,0 +1,19 @@
+import type { AnyPointer, MultiPointer } from 'clownface';
+import type env from '@zazuko/env/web.js';
+import type { NamedNode } from '@rdfjs/types';
+export type Environment = typeof env;
+export declare const environment: {
+    __context__: import("@zazuko/env-core").DerivedEnvironment<import("@rdfjs/environment/Environment.js").Environment<import("@rdfjs/data-model/Factory.js").default | import("@rdfjs/formats/Factory.js").FormatsFactory | import("@rdfjs/term-map/Factory.js").TermMapFactory | import("@tpluscode/rdf-ns-builders").default | import("clownface/Factory.js").default | import("@rdfjs/term-set/Factory.js").TermSetFactory | import("@rdfjs/namespace/Factory.js").NamespaceFactory | import("@rdfjs/traverser/Factory.js").TraverserFactory>, import("@rdfjs/environment/Environment.js").Environment<{
+        dataset: import("@zazuko/env/lib/DatasetFactory.js").FactoryMethod<import("@zazuko/env/lib/Dataset.js").Dataset>;
+        init(this: import("@rdfjs/environment/Environment.js").Environment<import("@rdfjs/data-model/Factory.js").default | import("@rdfjs/formats/Factory.js").FormatsFactory | import("@rdfjs/term-map/Factory.js").TermMapFactory | import("@zazuko/env/lib/DatasetFactory.js").DatasetFactory<import("@zazuko/env/lib/Dataset.js").Dataset>>): void;
+    }>>;
+};
+export declare const dataset: {
+    __context__: AnyPointer<import("clownface").AnyContext, import("@rdfjs/types").DatasetCore<import("@rdfjs/types").Quad, import("@rdfjs/types").Quad>> | undefined;
+};
+export declare const focusNode: {
+    __context__: MultiPointer | undefined;
+};
+export declare const sortCriteria: {
+    __context__: NamedNode<string> | undefined;
+};

package/src/context.js

@@ -0,0 +1,5 @@
+import { createContext } from '@lit/context';
+export const environment = createContext(Symbol('environment'));
+export const dataset = createContext(Symbol('dataset'));
+export const focusNode = createContext(Symbol('focus-node'));
+export const sortCriteria = createContext(Symbol('focus-node-sort'));

package/src/controllers/FocusNode.d.ts

@@ -0,0 +1,9 @@
+import type { ReactiveControllerHost } from 'lit';
+import type { GraphPointer, MultiPointer } from 'clownface';
+export declare class FocusNode {
+    private focusNodeConsumer;
+    private sortCriteriaConsumer;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    get pointer(): MultiPointer | undefined;
+    get array(): GraphPointer[] | undefined;
+}

package/src/controllers/FocusNode.js

@@ -0,0 +1,27 @@
+import { ContextConsumer } from '@lit/context';
+import { focusNode, sortCriteria } from '../context.js';
+export class FocusNode {
+    constructor(host) {
+        this.focusNodeConsumer = new ContextConsumer(host, {
+            context: focusNode,
+            subscribe: true,
+        });
+        this.sortCriteriaConsumer = new ContextConsumer(host, {
+            context: sortCriteria,
+            subscribe: true,
+        });
+    }
+    get pointer() {
+        return this.focusNodeConsumer.value;
+    }
+    get array() {
+        const array = this.pointer?.toArray();
+        const sortPredicate = this.sortCriteriaConsumer.value;
+        if (!array || !sortPredicate) {
+            return array;
+        }
+        return array.sort((left, right) => {
+            return left.out(sortPredicate).value?.localeCompare(right.out(sortPredicate).value || '') || 0;
+        });
+    }
+}

package/src/controllers.d.ts

@@ -0,0 +1 @@
+export { FocusNode } from './controllers/FocusNode.js';

package/src/controllers.js

@@ -0,0 +1 @@
+export { FocusNode } from './controllers/FocusNode.js';

package/src/converter.d.ts

@@ -0,0 +1,3 @@
+import type { ComplexAttributeConverter } from 'lit';
+export declare const toNamedNode: ComplexAttributeConverter;
+export declare const toPropertyPath: ComplexAttributeConverter;

package/src/converter.js

@@ -0,0 +1,26 @@
+import isUrl from 'is-url';
+import rdf from '@rdfjs/data-model';
+import { expand, shrink } from '@zazuko/prefixes';
+import { parse } from 'sparql-path-parser';
+export const toNamedNode = {
+    fromAttribute(value) {
+        if (typeof value === 'undefined' || value === null) {
+            throw new Error('NamedNode converter: value is null');
+        }
+        if (isUrl(value)) {
+            return rdf.namedNode(value);
+        }
+        return rdf.namedNode(expand(value));
+    },
+    toAttribute({ value }) {
+        return shrink(value);
+    },
+};
+export const toPropertyPath = {
+    fromAttribute(value, type) {
+        if (typeof value === 'undefined' || value === null) {
+            throw new Error('PropertyPath converter: value is null');
+        }
+        return parse(value);
+    },
+};

package/src/index.d.ts

@@ -0,0 +1,6 @@
+import './components/data-graph.js';
+import './components/traverse-graph.js';
+import './components/focus-node.js';
+import './components/target-node.js';
+import './components/resource-label.js';
+import './components/resource-link.js';

package/src/index.js

@@ -0,0 +1,6 @@
+import './components/data-graph.js';
+import './components/traverse-graph.js';
+import './components/focus-node.js';
+import './components/target-node.js';
+import './components/resource-label.js';
+import './components/resource-link.js';

package/src/mixins/environment.d.ts

@@ -0,0 +1,3 @@
+import type { LitElementConstructor, WithEnvironment } from '../constructor.js';
+export declare function consumeEnvironment<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithEnvironment>;
+export declare function provideEnvironment<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithEnvironment>;

package/src/mixins/environment.js

@@ -0,0 +1,32 @@
+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 { consume, provide } from '@lit/context';
+import { state } from 'lit/decorators.js';
+import { environment as context } from '../context.js';
+export function consumeEnvironment(base) {
+    class Impl extends base {
+        constructor(...args) {
+            super(...args);
+        }
+    }
+    __decorate([
+        consume({ context })
+    ], Impl.prototype, "rdf", void 0);
+    return Impl;
+}
+export function provideEnvironment(base) {
+    class Impl extends base {
+        constructor(...args) {
+            super(...args);
+        }
+    }
+    __decorate([
+        state(),
+        provide({ context })
+    ], Impl.prototype, "rdf", void 0);
+    return Impl;
+}

package/src/mixins/focusNode.d.ts

@@ -0,0 +1,2 @@
+import type { LitElementConstructor, WithFocusNode } from '../constructor.js';
+export declare function consumeFocusNode<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithFocusNode>;

package/src/mixins/focusNode.js

@@ -0,0 +1,20 @@
+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 { consume } from '@lit/context';
+import { focusNode as context } from '../context.js';
+import { consumeEnvironment } from './environment.js';
+export function consumeFocusNode(base) {
+    class Impl extends consumeEnvironment(base) {
+        constructor(...args) {
+            super(...args);
+        }
+    }
+    __decorate([
+        consume({ context, subscribe: true })
+    ], Impl.prototype, "focusNode", void 0);
+    return Impl;
+}

package/src/mixins/graph.d.ts

@@ -0,0 +1,3 @@
+import type { LitElementConstructor, WithGraph } from '../constructor.js';
+export declare function provideGraph<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithGraph>;
+export declare function consumeGraph<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithGraph>;

package/src/mixins/graph.js

@@ -0,0 +1,33 @@
+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 { consume, provide } from '@lit/context';
+import { state } from 'lit/decorators.js';
+import { dataset } from '../context.js';
+export function provideGraph(base) {
+    class WithGraphProvider extends base {
+        constructor(...args) {
+            super(...args);
+        }
+    }
+    __decorate([
+        provide({ context: dataset }),
+        state()
+    ], WithGraphProvider.prototype, "graph", void 0);
+    return WithGraphProvider;
+}
+export function consumeGraph(base) {
+    class WithGraphConsumer extends base {
+        constructor(...args) {
+            super(...args);
+        }
+    }
+    __decorate([
+        consume({ context: dataset, subscribe: true }),
+        state()
+    ], WithGraphConsumer.prototype, "graph", void 0);
+    return WithGraphConsumer;
+}

package/src/mixins/targetNode.d.ts

@@ -0,0 +1,2 @@
+import type { LitElementConstructor, WithFocusNode } from '../constructor.js';
+export declare function provideTargetNode<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithFocusNode>;

package/src/mixins/targetNode.js

@@ -0,0 +1,69 @@
+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 { property, state } from 'lit/decorators.js';
+import { provide } from '@lit/context';
+import { focusNode } from '../context.js';
+import { toNamedNode } from '../converter.js';
+import { consumeEnvironment } from './environment.js';
+import { consumeGraph } from './graph.js';
+export function provideTargetNode(base) {
+    class DataBound extends consumeGraph(consumeEnvironment(base)) {
+        constructor(...args) {
+            super(...args);
+        }
+        willUpdate(_changedProperties) {
+            if (_changedProperties.has('graph')) {
+                this.setFocusNode();
+            }
+        }
+        updated(_changedProperties) {
+            if (_changedProperties.has('graph')) {
+                this.setFocusNode();
+            }
+        }
+        setFocusNode() {
+            if (this.graph) {
+                const found = this.findFocusNode();
+                if (found?.terms.length) {
+                    this.focusNode = found;
+                }
+            }
+        }
+        findFocusNode() {
+            if (this.targetNode) {
+                return this.graph?.node(this.targetNode);
+            }
+            if (this.targetClass) {
+                return this.graph?.has(this.rdf.ns.rdf.type, this.targetClass);
+            }
+            if (this.targetSubjectsOf) {
+                return this.graph?.in(this.targetSubjectsOf);
+            }
+            if (this.targetObjectsOf) {
+                return this.graph?.out(this.targetObjectsOf);
+            }
+            return undefined;
+        }
+    }
+    __decorate([
+        property({ type: Object, converter: toNamedNode, attribute: 'target-objects-of' })
+    ], DataBound.prototype, "targetObjectsOf", void 0);
+    __decorate([
+        property({ type: Object, converter: toNamedNode, attribute: 'target-subjects-of' })
+    ], DataBound.prototype, "targetSubjectsOf", void 0);
+    __decorate([
+        property({ type: Object, converter: toNamedNode, attribute: 'target-class' })
+    ], DataBound.prototype, "targetClass", void 0);
+    __decorate([
+        property({ type: Object, converter: toNamedNode, attribute: 'target-node' })
+    ], DataBound.prototype, "targetNode", void 0);
+    __decorate([
+        provide({ context: focusNode }),
+        state()
+    ], DataBound.prototype, "focusNode", void 0);
+    return DataBound;
+}

package/src/mixins/traverseGraph.d.ts

@@ -0,0 +1,5 @@
+import type { MultiPointer } from 'clownface';
+import type { LitElementConstructor } from '../constructor.js';
+export declare function traverseGraph<T extends LitElementConstructor>(Base: T): T & LitElementConstructor<{
+    objectNode: MultiPointer | undefined;
+}>;

package/src/mixins/traverseGraph.js

@@ -0,0 +1,37 @@
+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 { property } from 'lit/decorators.js';
+import { findNodes } from 'clownface-shacl-path';
+import { provide } from '@lit/context';
+import { focusNode as context } from '../context.js';
+import { toPropertyPath } from '../converter.js';
+import { consumeFocusNode } from './focusNode.js';
+export function traverseGraph(Base) {
+    class TraverseGraph extends consumeFocusNode(Base) {
+        constructor(...args) {
+            super(...args);
+        }
+        willUpdate(_changedProperties) {
+            if (_changedProperties.has('focusNode') || _changedProperties.has('propertyPath')) {
+                this.setObjectNode();
+            }
+        }
+        setObjectNode() {
+            if (this.propertyPath && this.focusNode) {
+                this.objectNode = findNodes(this.focusNode, this.propertyPath);
+            }
+        }
+    }
+    __decorate([
+        property({ type: Object, converter: toPropertyPath, attribute: 'property-path' })
+    ], TraverseGraph.prototype, "propertyPath", void 0);
+    __decorate([
+        provide({ context }),
+        property()
+    ], TraverseGraph.prototype, "objectNode", void 0);
+    return TraverseGraph;
+}

package/src/mixins.d.ts

@@ -0,0 +1,3 @@
+export { consumeFocusNode } from './mixins/focusNode.js';
+export { provideGraph } from './mixins/graph.js';
+export { provideEnvironment, consumeEnvironment } from './mixins/environment.js';

package/src/mixins.js

@@ -0,0 +1,3 @@
+export { consumeFocusNode } from './mixins/focusNode.js';
+export { provideGraph } from './mixins/graph.js';
+export { provideEnvironment, consumeEnvironment } from './mixins/environment.js';

package/src/runtime/data-graph.d.ts

@@ -0,0 +1,9 @@
+import factory from '@zazuko/env/web.js';
+import type { Quad } from '@rdfjs/types';
+declare global {
+    interface Window {
+        graphs?: Record<string, (options: {
+            factory: typeof factory;
+        }) => Quad[]>;
+    }
+}

package/src/runtime/data-graph.js

@@ -0,0 +1,8 @@
+import factory from '@zazuko/env/web.js';
+document.querySelectorAll('[data-graph]').forEach((el) => {
+    const graphName = el.getAttribute('data-graph');
+    if (graphName && window.graphs?.[graphName]) {
+        const dataset = factory.dataset(window.graphs[graphName]({ factory }));
+        el.graph = factory.clownface({ dataset });
+    }
+});