@artemis-studio/plugin-sdk 2026.9.49 → 2026.9.50

package/index.js

@@ -10,6 +10,7 @@ export const CONTRACT = outsideStudio('CONTRACT');
 export const CapabilityGate = outsideStudio('CapabilityGate');
 export const CodeEditor = outsideStudio('CodeEditor');
 export const ConfirmByTyping = outsideStudio('ConfirmByTyping');
+export const DiagramView = outsideStudio('DiagramView');
 export const METRIC_RANGES = outsideStudio('METRIC_RANGES');
 export const MetricChart = outsideStudio('MetricChart');
 export const NAV_GROUPS = outsideStudio('NAV_GROUPS');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artemis-studio/plugin-sdk",
-  "version": "2026.9.49",
+  "version": "2026.9.50",
   "description": "Build the UI of an Artemis Studio plugin: typings for the Studio APIs a plugin may use, and a Vite preset.",
   "license": "Apache-2.0",
   "repository": {

package/types/sdk/index.d.ts

@@ -20,6 +20,7 @@ export { gateFor, type GateVerdict } from '../ui/capabilityGate.ts';
 export { useMe } from '../kernel/auth/api.ts';
 export { CodeEditor, type CodeDiagnostic, type CodeEditorProps } from '../ui/CodeEditor.tsx';
 export { ConfirmByTyping } from '../ui/ConfirmByTyping.tsx';
+export { DiagramView, type DiagramEdge, type DiagramNode, type DiagramViewProps } from '../ui/DiagramView.tsx';
 export { NodeOutcomeSummary, OutcomeSummary, type OutcomeRow } from '../ui/NodeOutcomeSummary.tsx';
 export { Pager } from '../ui/Pager.tsx';
 export { VirtualTable, type GridColumn } from '../ui/VirtualTable.tsx';

package/types/ui/DiagramView.d.ts

@@ -0,0 +1,25 @@
+import { type DiagramEdge, type DiagramNode } from './diagram.ts';
+export type { DiagramEdge, DiagramNode };
+export interface DiagramViewProps {
+    nodes: DiagramNode[];
+    edges: DiagramEdge[];
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    /** Which way the arrows run. Default: down. */
+    direction?: 'DOWN' | 'RIGHT';
+    /** The frame's height in pixels. Default 480. */
+    height?: number;
+    /** Names the diagram for screen readers. */
+    'aria-label': string;
+}
+/**
+ * A read-only diagram of boxes and arrows, laid out automatically (ELK layered, in a worker) and
+ * drawn in Studio's theme (ADR-0117). Nothing is dragged, connected or deleted: it shows a
+ * structure and reports which box was chosen.
+ *
+ * <p>The diagram is one tab stop. Arrow keys move between boxes in reading order, Enter or Space
+ * selects one, and the selection is announced. A box with a problem says so in words, on the box
+ * and in its accessible name, so colour is never the only signal. Positions change only when the
+ * boxes or arrows do, never when a label does.
+ */
+export declare function DiagramView({ nodes, edges, selectedId, onSelect, direction, height, 'aria-label': ariaLabel, }: DiagramViewProps): import("react").JSX.Element;

package/types/ui/diagram.d.ts

@@ -0,0 +1,31 @@
+/** The plain data `DiagramView` draws, and the words it reads out (ADR-0117). */
+/** One box of a `DiagramView`. Everything is plain data, shown as text. */
+export interface DiagramNode {
+    id: string;
+    /** The box's name, one line. */
+    label: string;
+    /** What kind of thing it is, in words ("Call a service"). Shown above the label. */
+    kind?: string;
+    /** A second line under the label ("inventory POST /reserve"). */
+    detail?: string;
+    /** Something is wrong with it: shown in words and colour, and read out with the node. */
+    state?: 'error' | 'warning';
+    /** Why, for a node with a state. */
+    reason?: string;
+}
+/** One arrow of a `DiagramView`, from `source` to `target`. */
+export interface DiagramEdge {
+    id: string;
+    source: string;
+    target: string;
+    label?: string;
+    /** Drawn dashed: a secondary path. Its meaning belongs in its label. */
+    dashed?: boolean;
+}
+/** What positions depend on: which nodes exist and how they connect. A new label moves nothing. */
+export declare function layoutSignature(nodes: DiagramNode[], edges: DiagramEdge[], direction: string): string;
+/**
+ * The accessible name of a node: kind, label and detail, the labels of the arrows into it (which a
+ * screen reader otherwise never meets), and any problem.
+ */
+export declare function nodeName(n: DiagramNode, via?: string[]): string;

package/types/ui/graph/elk.d.ts

@@ -0,0 +1,3 @@
+import type { ElkNode } from 'elkjs/lib/elk-api';
+/** Lay a graph out and return where each node goes. */
+export declare function runLayout(graph: ElkNode): Promise<ElkNode>;