@artemis-studio/plugin-sdk 2026.9.48 → 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.48",
+  "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/CodeEditor.d.ts

@@ -10,12 +10,21 @@ export interface CodeEditorProps {
     /** The visible label, which is also the editor's accessible name. */
     label: string;
     minHeight?: number;
+    /** Past this height the editor scrolls inside itself. */
+    maxHeight?: number;
+    /** Wrap long lines instead of scrolling them sideways. */
+    lineWrapping?: boolean;
 }
 /**
- * A document editor for YAML or JSON: CodeMirror with line numbers and a lint
- * gutter, coloured from `theme.css` like the SQL console. It validates nothing
- * itself. The caller passes the server's diagnostics, which are marked at their
- * line and column and summarised in a live region, so a screen reader hears
- * that the document has problems without hunting for the marks.
+ * A document editor for YAML or JSON: CodeMirror with line numbers, folding, a
+ * lint gutter, bracket matching and search, coloured from `theme.css` like the
+ * SQL console. It validates nothing itself. The caller passes the server's
+ * diagnostics, which are marked at their line and column and summarised in a
+ * live region, so a screen reader hears that the document has problems without
+ * hunting for the marks.
+ *
+ * Tab indents, so an editable editor would otherwise trap the keyboard. Escape
+ * hands the next Tab back to the browser (CodeMirror's tab-focus mode), and the
+ * hint under the editor says so.
  */
-export declare function CodeEditor({ value, onChange, language, diagnostics, readOnly, label, minHeight, }: CodeEditorProps): import("react").JSX.Element;
+export declare function CodeEditor({ value, onChange, language, diagnostics, readOnly, label, minHeight, maxHeight, lineWrapping, }: CodeEditorProps): import("react").JSX.Element;

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/VirtualTable.d.ts

@@ -58,6 +58,11 @@ interface VirtualTableProps<T> {
     rowMenu?: RowMenu<T>;
     /** Sized to its rows, up to a short cap, instead of to the viewport: a handful of rows in a pane. */
     compact?: boolean;
+    /**
+     * Remembers the column widths each viewer sets, in this browser (ADR-0116). Stable and unique
+     * per grid; a plugin prefixes its id. Without one, widths last as long as the grid is shown.
+     */
+    storageKey?: string;
 }
 /**
  * A virtualized data grid: one CSS grid track list, declared once and shared by
@@ -81,5 +86,5 @@ interface VirtualTableProps<T> {
  * key, so a refresh or a re-sort does not move it to another row, and its row is
  * always rendered however far it is scrolled.
  */
-export declare function VirtualTable<T>({ columns, data, label, sort, onSortChange, onRowClick, rowKey, emptyLabel, rowClassName, selectable, selected, onToggleRow, onToggleAll, onAtTopChange, rowMenu, compact, }: VirtualTableProps<T>): import("react").JSX.Element;
+export declare function VirtualTable<T>({ columns, data, label, sort, onSortChange, onRowClick, rowKey, emptyLabel, rowClassName, selectable, selected, onToggleRow, onToggleAll, onAtTopChange, rowMenu, compact, storageKey, }: VirtualTableProps<T>): import("react").JSX.Element;
 export {};

package/types/ui/codeMirrorTheme.d.ts

@@ -2,8 +2,10 @@ import { HighlightStyle } from "@codemirror/language";
 /**
  * Every colour comes from `theme.css`, so the editor follows the colour scheme
  * with the rest of the console and neither scheme is inferred from the other
- * (non-negotiable #6). Four token roles: an identifier deliberately stays body
- * text, so the eye lands on what was typed rather than on the syntax.
+ * (non-negotiable #6). A SQL identifier deliberately stays body text, so the eye
+ * lands on what was typed rather than on the syntax. A YAML or JSON document is
+ * mostly keys and values, so those two carry colour, and the punctuation that
+ * holds them together steps back.
  */
 export declare const codeHighlight: HighlightStyle;
 export declare const codeTheme: import("@codemirror/state").Extension;

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>;