@steffolino/diagram-kit-element 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stefan Stretz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+# @steffolino/diagram-kit-element
+
+`<diagram-kit-view>` — the framework-agnostic way to embed an interactive
+diagram-kit graph. It's a real Custom Element (Web Component), so it works
+with a plain `<script type="module">` import in React, Vue, Angular, or no
+framework at all.
+
+```ts
+import '@steffolino/diagram-kit-element'
+import { fromYaml } from '@steffolino/diagram-kit-adapters'
+
+const graph = fromYaml(yamlSource)
+const el = document.createElement('diagram-kit-view')
+el.graph = graph
+document.body.appendChild(el)
+```
+
+Or declaratively, with the graph assigned from a script:
+
+```html
+<diagram-kit-view id="view" layout-mode="structural" mode="dark"></diagram-kit-view>
+<script type="module">
+  import '@steffolino/diagram-kit-element'
+  document.getElementById('view').graph = myGraph
+</script>
+```
+
+Renders via `@steffolino/diagram-kit-static`'s `renderSvg` (no React dependency), and
+supports the same `layout-mode`, `mode`, `preset`, `padding`,
+`colorize-nodes`, `direction`, and `detail-placement` attributes as the
+React `<DiagramView />`'s equivalent props.
+
+Part of the diagram-kit monorepo. See the repo root README for the full
+picture.

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import type { DiagramGraph, DiagramTheme } from '@steffolino/diagram-kit-core';
+/**
+ * `<diagram-kit-view>` — the framework-agnostic way to embed an interactive
+ * diagram-kit graph: works with a plain <script type="module"> import in any
+ * app (React, Vue, Angular, or no framework at all), since it's just a DOM
+ * element once registered.
+ *
+ * Usage:
+ *   import '@steffolino/diagram-kit-element'
+ *   const el = document.createElement('diagram-kit-view')
+ *   el.graph = myGraph
+ *   document.body.appendChild(el)
+ *
+ * Or declaratively, with the graph assigned from a script:
+ *   <diagram-kit-view id="view" layout-mode="structural" mode="dark"></diagram-kit-view>
+ *   <script type="module">
+ *     document.getElementById('view').graph = myGraph
+ *   </script>
+ */
+export declare class DiagramKitElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): readonly string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get graph(): DiagramGraph | null;
+    set graph(value: DiagramGraph | null);
+    get theme(): DiagramTheme | null;
+    set theme(value: DiagramTheme | null);
+}
+/** Registers `<diagram-kit-view>` (or a custom tag name) as a Custom Element. Safe to call more than once. */
+export declare function defineDiagramKitElement(tagName?: string): void;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAe,YAAY,EAAiB,MAAM,8BAA8B,CAAA;AA0C1G;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;;IAChD,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;;IAqCD,iBAAiB,IAAI,IAAI;IAIzB,wBAAwB,IAAI,IAAI;IAKhC,IAAI,KAAK,IAAI,YAAY,GAAG,IAAI,CAE/B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,EAInC;IAED,IAAI,KAAK,IAAI,YAAY,GAAG,IAAI,CAE/B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,EAGnC;CA6DF;AAED,8GAA8G;AAC9G,wBAAgB,uBAAuB,CAAC,OAAO,SAAqB,GAAG,IAAI,CAI1E"}

package/dist/index.js

@@ -0,0 +1,174 @@
+import { defaultTheme, themePresets } from '@steffolino/diagram-kit-core';
+import { renderSvg } from '@steffolino/diagram-kit-static';
+const OBSERVED_ATTRIBUTES = ['layout-mode', 'mode', 'preset', 'padding', 'colorize-nodes', 'direction', 'detail-placement'];
+const STYLES = `
+  :host { display: block; position: relative; }
+  .dk-svg-wrap { width: 100%; height: 100%; overflow: auto; }
+  .dk-svg-wrap svg [data-node-id] { cursor: pointer; }
+  .dk-panel {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    max-width: 280px;
+    background: #fff;
+    border: 1px solid #DADCE0;
+    border-radius: 8px;
+    padding: 12px 30px 12px 14px;
+    font: 13px system-ui, sans-serif;
+    color: #1F2328;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    display: none;
+  }
+  .dk-panel.dk-panel-open { display: block; }
+  .dk-panel-close {
+    position: absolute;
+    top: 6px;
+    right: 8px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 14px;
+    color: #5B6270;
+    padding: 0;
+    line-height: 1;
+  }
+  .dk-panel-title { font-weight: 600; margin: 0 0 4px; }
+  .dk-panel-category { font-size: 11px; color: #5B6270; margin: 0 0 6px; }
+  .dk-panel-detail { margin: 0; }
+`;
+/**
+ * `<diagram-kit-view>` — the framework-agnostic way to embed an interactive
+ * diagram-kit graph: works with a plain <script type="module"> import in any
+ * app (React, Vue, Angular, or no framework at all), since it's just a DOM
+ * element once registered.
+ *
+ * Usage:
+ *   import '@steffolino/diagram-kit-element'
+ *   const el = document.createElement('diagram-kit-view')
+ *   el.graph = myGraph
+ *   document.body.appendChild(el)
+ *
+ * Or declaratively, with the graph assigned from a script:
+ *   <diagram-kit-view id="view" layout-mode="structural" mode="dark"></diagram-kit-view>
+ *   <script type="module">
+ *     document.getElementById('view').graph = myGraph
+ *   </script>
+ */
+export class DiagramKitElement extends HTMLElement {
+    static get observedAttributes() {
+        return OBSERVED_ATTRIBUTES;
+    }
+    #graph = null;
+    #theme = null;
+    #wrap;
+    #panel;
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = STYLES;
+        root.appendChild(style);
+        this.#wrap = document.createElement('div');
+        this.#wrap.className = 'dk-svg-wrap';
+        root.appendChild(this.#wrap);
+        this.#panel = document.createElement('div');
+        this.#panel.className = 'dk-panel';
+        root.appendChild(this.#panel);
+        this.#wrap.addEventListener('click', (event) => {
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            const nodeGroup = target.closest('[data-node-id]');
+            if (!nodeGroup)
+                return;
+            const nodeId = nodeGroup.getAttribute('data-node-id');
+            const node = this.#graph?.nodes.find((n) => n.id === nodeId);
+            if (!node)
+                return;
+            if (this.getAttribute('detail-placement') !== 'inline')
+                this.#showPanel(node);
+            this.dispatchEvent(new CustomEvent('node-click', { detail: { nodeId: node.id, node }, bubbles: true, composed: true }));
+        });
+    }
+    connectedCallback() {
+        this.#render();
+    }
+    attributeChangedCallback() {
+        this.#panel.classList.remove('dk-panel-open');
+        this.#render();
+    }
+    get graph() {
+        return this.#graph;
+    }
+    set graph(value) {
+        this.#graph = value;
+        this.#panel.classList.remove('dk-panel-open');
+        this.#render();
+    }
+    get theme() {
+        return this.#theme;
+    }
+    set theme(value) {
+        this.#theme = value;
+        this.#render();
+    }
+    #showPanel(node) {
+        this.#panel.innerHTML = '';
+        const close = document.createElement('button');
+        close.type = 'button';
+        close.className = 'dk-panel-close';
+        close.setAttribute('aria-label', 'Close');
+        close.textContent = '✕';
+        close.addEventListener('click', () => this.#panel.classList.remove('dk-panel-open'));
+        this.#panel.appendChild(close);
+        const title = document.createElement('p');
+        title.className = 'dk-panel-title';
+        title.textContent = node.label;
+        this.#panel.appendChild(title);
+        if (node.category) {
+            const category = document.createElement('p');
+            category.className = 'dk-panel-category';
+            category.textContent = node.badge ? `${node.category} · ${node.badge}` : node.category;
+            this.#panel.appendChild(category);
+        }
+        if (node.detail) {
+            const detail = document.createElement('p');
+            detail.className = 'dk-panel-detail';
+            detail.textContent = node.detail;
+            this.#panel.appendChild(detail);
+        }
+        this.#panel.classList.add('dk-panel-open');
+    }
+    #render() {
+        if (!this.#graph) {
+            this.#wrap.innerHTML = '';
+            return;
+        }
+        const layoutMode = this.getAttribute('layout-mode') ?? 'graph';
+        const mode = this.getAttribute('mode') ?? 'light';
+        const presetName = this.getAttribute('preset');
+        const theme = this.#theme ?? (presetName && themePresets[presetName] ? themePresets[presetName] : defaultTheme);
+        const paddingAttr = this.getAttribute('padding');
+        const padding = paddingAttr ? Number(paddingAttr) : 24;
+        const colorizeNodes = this.hasAttribute('colorize-nodes');
+        const direction = this.getAttribute('direction');
+        const options = {
+            layoutMode,
+            theme,
+            mode,
+            padding,
+            colorizeNodes,
+            detailPlacement: this.getAttribute('detail-placement') === 'inline' ? 'inline' : 'panel',
+            layout: direction ? { direction } : undefined,
+        };
+        this.#wrap.innerHTML = renderSvg(this.#graph, options);
+    }
+}
+/** Registers `<diagram-kit-view>` (or a custom tag name) as a Custom Element. Safe to call more than once. */
+export function defineDiagramKitElement(tagName = 'diagram-kit-view') {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, DiagramKitElement);
+    }
+}
+defineDiagramKitElement();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@steffolino/diagram-kit-element",
+  "version": "0.1.0",
+  "description": "Framework-agnostic Custom Element (Web Component) for embedding interactive diagram-kit graphs in any app — React, Vue, Angular, or plain HTML.",
+  "license": "MIT",
+  "author": "Stefan Stretz",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/steffolino/diagram-kit.git",
+    "directory": "packages/element"
+  },
+  "homepage": "https://github.com/steffolino/diagram-kit/tree/master/packages/element#readme",
+  "bugs": "https://github.com/steffolino/diagram-kit/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "diagram",
+    "custom-element",
+    "web-component",
+    "graph",
+    "visualization"
+  ],
+  "type": "module",
+  "sideEffects": true,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@steffolino/diagram-kit-static": "0.1.0",
+    "@steffolino/diagram-kit-core": "0.1.0"
+  },
+  "devDependencies": {
+    "happy-dom": "^15.11.7",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}