@artemis-studio/plugin-sdk 2026.9.45 → 2026.9.46

package/index.js

@@ -8,6 +8,7 @@ export const ActionMenuItem = outsideStudio('ActionMenuItem');
 export const ApiError = outsideStudio('ApiError');
 export const CONTRACT = outsideStudio('CONTRACT');
 export const CapabilityGate = outsideStudio('CapabilityGate');
+export const CodeEditor = outsideStudio('CodeEditor');
 export const ConfirmByTyping = outsideStudio('ConfirmByTyping');
 export const METRIC_RANGES = outsideStudio('METRIC_RANGES');
 export const MetricChart = outsideStudio('MetricChart');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artemis-studio/plugin-sdk",
-  "version": "2026.9.45",
+  "version": "2026.9.46",
   "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/kernel/feature.d.ts

@@ -5,7 +5,7 @@ import type { AnyRoute } from '@tanstack/react-router';
 import type { NavGroupId } from './nav/groups.ts';
 import type { SlotContributions } from './slots.ts';
 /** The extension contract version, shared with the backend's `Contract.VERSION` (ADR-0070). */
-export declare const CONTRACT = 2;
+export declare const CONTRACT = 3;
 /** The module ids the backend manifest reports. A frontend feature uses the same id as its backend module. */
 export declare const FEATURE_IDS: readonly ["security", "audit", "settings", "stream", "broker", "clusters", "governance", "scrape", "mcp", "queues", "resources", "messages", "routing", "metrics", "alerting", "events", "rr", "sql", "brokerconfig", "flow", "triage", "bulk", "transfer", "setupreview", "apitokens", "plugins", "identity-local", "identity-oidc"];
 export type FeatureId = (typeof FEATURE_IDS)[number];

package/types/sdk/index.d.ts

@@ -18,6 +18,7 @@ export { ActionMenuItem } from '../ui/ActionMenuItem.tsx';
 export { CapabilityGate } from '../ui/CapabilityGate.tsx';
 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 { NodeOutcomeSummary, OutcomeSummary, type OutcomeRow } from '../ui/NodeOutcomeSummary.tsx';
 export { Pager } from '../ui/Pager.tsx';

package/types/ui/CodeEditor.d.ts

@@ -0,0 +1,21 @@
+import { type CodeDiagnostic } from './codeDiagnostics.ts';
+export type { CodeDiagnostic };
+export interface CodeEditorProps {
+    value: string;
+    /** Omitted, the editor is read-only. */
+    onChange?: (value: string) => void;
+    language: 'yaml' | 'json';
+    diagnostics?: CodeDiagnostic[];
+    readOnly?: boolean;
+    /** The visible label, which is also the editor's accessible name. */
+    label: string;
+    minHeight?: number;
+}
+/**
+ * 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.
+ */
+export declare function CodeEditor({ value, onChange, language, diagnostics, readOnly, label, minHeight, }: CodeEditorProps): import("react").JSX.Element;

package/types/ui/codeDiagnostics.d.ts

@@ -0,0 +1,11 @@
+import type { Diagnostic } from '@codemirror/lint';
+import type { EditorState } from '@codemirror/state';
+/** A problem at a 1-based line and column, as a server validator reports it. */
+export interface CodeDiagnostic {
+    line: number;
+    column: number;
+    message: string;
+    severity: 'error' | 'warning';
+}
+/** A 1-based line and column, clamped into the document, as a one-character range. */
+export declare function toCodeMirror(state: EditorState, d: CodeDiagnostic): Diagnostic;

package/types/ui/codeMirrorTheme.d.ts

@@ -0,0 +1,9 @@
+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.
+ */
+export declare const codeHighlight: HighlightStyle;
+export declare const codeTheme: import("@codemirror/state").Extension;