@loadmap/editor 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jaime Rojas
+
+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

@@ -1,3 +1,12 @@
-# Temporary Holding Version
+# @loadmap/editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+`<LoadmapEditor>`: a `.loadmap` definition in CodeMirror next to its live diagram, with errors under the line,
+completions, share links, download, and a menu of templates to start from.
+
+```tsx
+import { LoadmapEditor } from '@loadmap/editor'
+
+;<LoadmapEditor initial={source} onChange={saveDraft} />
+```
+
+Docs and a live editor: https://jaim3r0jas.github.io/loadmap/ · MIT

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+import { TEMPLATES, Template } from "./templates.js";
+import { HighlightStyle, StreamLanguage } from "@codemirror/language";
+import { Extension } from "@codemirror/state";
+import { CompileOptions, CompileResult, HostFunctions } from "@loadmap/dsl";
+import { LoadmapHandle, Theme } from "@loadmap/react";
+import { ReactNode, Ref } from "react";
+import { ParamValue } from "@loadmap/core";
+/** What a page can drive from outside. */
+interface LoadmapEditorHandle {
+  source(): string;
+  /** Replaces the whole text, e.g. with an example. */
+  setSource(source: string): void;
+  /** The preview, once a version has compiled. */
+  loadmap(): LoadmapHandle | null;
+  /** The hash of a link to this definition at the current values: `v1.…&load=30`. */
+  shareHash(): Promise<string>;
+}
+interface LoadmapEditorProps {
+  /** The text to start from. */
+  initial: string;
+  /** Values to start the preview at; texts (from a shared link) are read by each parameter's kind. */
+  values?: Readonly<Record<string, ParamValue>>;
+  /** Functions formulas may call beyond the built-in ones. */
+  functions?: HostFunctions;
+  theme?: Theme;
+  /** Every change of the text: a page can keep a draft. */
+  onChange?: (source: string) => void;
+  /** Called with a share hash. Default: puts it in the address bar and copies the link. */
+  onShare?: (hash: string) => void | Promise<void>;
+  /** More buttons for the bar: export, record. */
+  actions?: ReactNode;
+  /** The starters in the "New from template" menu; false hides it. Default: the six that come with the editor. */
+  templates?: readonly Template[] | false;
+  /** The name the downloaded file takes, without ".loadmap". Default: the title. */
+  fileName?: string;
+  ref?: Ref<LoadmapEditorHandle>;
+}
+/** A text editor for a `.loadmap` definition next to its live diagram. */
+export declare function LoadmapEditor({ initial, values, functions, theme, onChange, onShare, actions, fileName, templates, ref }: LoadmapEditorProps): import("react").JSX.Element;
+interface State {
+  /** Inside a template that runs past the end of the line. */
+  template: boolean;
+  /** The last token was a statement's keyword: the next name is what it declares. */
+  declares: boolean;
+}
+/** Highlighting that reads the language the way the parser's lexer does. */
+export declare const loadmapStream: StreamLanguage<State>;
+export declare const loadmapHighlight: HighlightStyle;
+/**
+ * The language for CodeMirror: highlighting, inline errors from the checker and autocomplete. `onResult` hears every
+ * compile the linter runs (after a pause in typing), so a preview can follow without compiling twice.
+ */
+export declare function loadmapLanguage(o?: CompileOptions & {
+  onResult?: (source: string, result: CompileResult) => void;
+  delay?: number;
+}): Extension;
+/** The editor's layout. It sits inside `.lm`, so it takes loadmap's theme tokens; the preview nests its own `.lm`. */
+export declare const EDITOR_CSS = "\n.lme { grid-template-rows: auto minmax(0, 1fr); }\n.lme-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n.lme-grow { flex: 1; }\n.lme-status { font: 500 .8rem var(--lm-font); color: var(--lm-drop); }\n.lme-status[data-ok=\"true\"] { color: var(--lm-ok); }\n.lme-note { font-size: .8rem; color: var(--lm-muted); }\n.lme-split { display: grid; grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; min-width: 0; }\n@container (max-width: 980px) { .lme-split { grid-template-columns: minmax(0, 1fr); } }\n.lme-left { display: grid; gap: 8px; min-width: 0; position: sticky; top: 8px; }\n@container (max-width: 980px) { .lme-left { position: static; } }\n.lme-code { background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 8px; overflow: hidden; min-width: 0; }\n.lme-code .cm-editor { height: min(78vh, 900px); font: 13px/1.5 var(--lm-mono); color: var(--lm-fg); background: var(--lm-surface); }\n@container (max-width: 980px) { .lme-code .cm-editor { height: 55vh; } }\n.lme-code .cm-editor.cm-focused { outline: 2px solid var(--lm-accent); outline-offset: -2px; }\n.lme-code .cm-scroller { font-family: var(--lm-mono); }\n.lme-code .cm-gutters { background: var(--lm-bg); color: var(--lm-muted); border-right: 1px solid var(--lm-line); }\n.lme-code .cm-activeLine { background: color-mix(in srgb, var(--lm-accent-soft) 45%, transparent); }\n.lme-code .cm-activeLineGutter { background: var(--lm-accent-soft); }\n.lme-code .cm-cursor { border-left-color: var(--lm-fg); }\n.lme-code .cm-selectionBackground, .lme-code .cm-focused .cm-selectionBackground { background: var(--lm-accent-soft) !important; }\n.lme-code .cm-tooltip { background: var(--lm-surface); color: var(--lm-fg); border: 1px solid var(--lm-line); border-radius: 6px; font-family: var(--lm-font); }\n.lme-code .cm-tooltip-autocomplete ul li[aria-selected] { background: var(--lm-accent); color: var(--lm-surface); }\n.lme-code .cm-completionInfo { max-width: 340px; white-space: pre-wrap; font-size: .78rem; }\n.lme-code .cm-diagnostic { font-family: var(--lm-font); font-size: .8rem; }\n.lme-code .cm-diagnostic-error { border-left-color: var(--lm-drop); }\n.lme-code .cm-diagnostic-warning { border-left-color: var(--lm-warn); }\n.lme-code .cm-lintRange-error { background-image: none; text-decoration: wavy underline var(--lm-drop); text-underline-offset: 3px; }\n.lme-code .cm-lintRange-warning { background-image: none; text-decoration: wavy underline var(--lm-warn); text-underline-offset: 3px; }\n.lme-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 22vh; overflow: auto; }\n.lme-problems button { all: unset; display: block; cursor: pointer; font-size: .8rem; padding: 4px 8px; border-left: 3px solid var(--lm-drop); background: var(--lm-surface); border-radius: 0 4px 4px 0; }\n.lme-problems li[data-severity=\"warning\"] button { border-left-color: var(--lm-warn); }\n.lme-problems button:focus-visible { outline: 2px solid var(--lm-accent); }\n.lme-problems small { display: block; color: var(--lm-muted); }\n.lme-at { font-family: var(--lm-mono); color: var(--lm-muted); }\n.lme-preview { min-width: 0; position: relative; }\n.lme-preview > .lm { padding: 0; }\n.lme-preview[data-stale] > .lm { opacity: .55; }\n.lme-stale { margin: 0 0 8px; font-size: .8rem; color: var(--lm-warn); }\n.lme-empty { margin: 0; padding: 40px 16px; text-align: center; color: var(--lm-muted); border: 1px dashed var(--lm-line); border-radius: 8px; }\n";
+export declare function injectEditorStyles(doc?: Document): void;
+export { type LoadmapEditorHandle, type LoadmapEditorProps, TEMPLATES, type Template };

package/dist/index.js

@@ -0,0 +1,517 @@
+import { t as TEMPLATES } from "./templates-D8CUjoNO.js";
+import { defaultKeymap, history, historyKeymap, indentWithTab, isolateHistory } from "@codemirror/commands";
+import { HighlightStyle, StreamLanguage, bracketMatching, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+import { EditorState } from "@codemirror/state";
+import { EditorView, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers } from "@codemirror/view";
+import { compile, completions, encodeShare, problems } from "@loadmap/dsl";
+import { BUILTINS, Reporter, SCHEMA, lex } from "@loadmap/dsl/internal";
+import { Loadmap } from "@loadmap/react";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { autocompletion } from "@codemirror/autocomplete";
+import { lintGutter, linter } from "@codemirror/lint";
+import { tags } from "@lezer/highlight";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/language.ts
+const KEYWORDS = new Set(Object.keys(SCHEMA).filter(Boolean));
+const FUNCTIONS = new Set(Object.keys(BUILTINS));
+function template(stream, state) {
+	while (!stream.eol()) {
+		const c = stream.next();
+		if (c === "\\") stream.next();
+		else if (c === "`") {
+			state.template = false;
+			return;
+		}
+	}
+	state.template = true;
+}
+/** Highlighting that reads the language the way the parser's lexer does. */
+const loadmapStream = StreamLanguage.define({
+	name: "loadmap",
+	startState: () => ({
+		template: false,
+		declares: false
+	}),
+	token(stream, state) {
+		if (state.template) {
+			template(stream, state);
+			return "string";
+		}
+		if (stream.eatSpace()) return null;
+		const declares = state.declares;
+		state.declares = false;
+		if (stream.match("#")) {
+			stream.skipToEnd();
+			return "comment";
+		}
+		if (stream.match(/^"(?:[^"\\]|\\.)*"?/) || stream.match(/^'(?:[^'\\]|\\.)*'?/)) return "string";
+		if (stream.eat("`")) {
+			template(stream, state);
+			return "string";
+		}
+		if (stream.match(/^\d[\d_]*(\.\d[\d_]*)?([eE][+-]?\d+)?/)) return "number";
+		if (stream.match("->")) return "operator";
+		if (stream.match(/^[A-Za-z_]\w*/)) {
+			const w = stream.current();
+			if (w === "true" || w === "false") return "atom";
+			if (stream.match(/^\s*:/, false)) return "property";
+			const head = stream.string.slice(0, stream.start).trimEnd();
+			if (KEYWORDS.has(w) && (head === "" || head.endsWith("{") || head.endsWith(";"))) {
+				state.declares = true;
+				return "keyword";
+			}
+			if (declares) return "def";
+			if (FUNCTIONS.has(w) && stream.match(/^\s*\(/, false)) return "builtin";
+			return "variable";
+		}
+		stream.next();
+		return null;
+	},
+	languageData: { commentTokens: { line: "#" } }
+});
+const loadmapHighlight = HighlightStyle.define([
+	{
+		tag: tags.keyword,
+		color: "var(--lm-accent)",
+		fontWeight: "600"
+	},
+	{
+		tag: tags.definition(tags.variableName),
+		color: "var(--lm-fg)",
+		fontWeight: "600"
+	},
+	{
+		tag: tags.propertyName,
+		color: "var(--lm-alt)"
+	},
+	{
+		tag: tags.string,
+		color: "var(--lm-ok)"
+	},
+	{
+		tag: [
+			tags.number,
+			tags.bool,
+			tags.atom
+		],
+		color: "var(--lm-warn)"
+	},
+	{
+		tag: tags.comment,
+		color: "var(--lm-muted)",
+		fontStyle: "italic"
+	},
+	{
+		tag: tags.operator,
+		color: "var(--lm-accent)"
+	},
+	{
+		tag: tags.standard(tags.variableName),
+		color: "var(--lm-accent)"
+	}
+]);
+/**
+* The language for CodeMirror: highlighting, inline errors from the checker and autocomplete. `onResult` hears every
+* compile the linter runs (after a pause in typing), so a preview can follow without compiling twice.
+*/
+function loadmapLanguage(o = {}) {
+	let last = null;
+	const result = (source) => {
+		if (last?.source !== source) last = {
+			source,
+			result: compile(source, o)
+		};
+		return last.result;
+	};
+	const lint = (view) => {
+		const source = view.state.doc.toString();
+		const r = result(source);
+		o.onResult?.(source, r);
+		const end = source.length;
+		return problems(r).map((d) => ({
+			from: Math.min(d.from, end),
+			to: Math.min(Math.max(d.to, d.from), end),
+			severity: d.severity,
+			message: d.hint ? `${d.message}: ${d.hint}` : d.message
+		}));
+	};
+	const complete = (ctx) => {
+		const source = ctx.state.doc.toString();
+		const c = completions(source, ctx.pos, result(source));
+		const typed = c.from < c.to || /[.:>]\s*$/.test(source.slice(Math.max(0, c.from - 3), c.from));
+		if (!c.options.length || !ctx.explicit && !typed) return null;
+		return {
+			from: c.from,
+			to: c.to,
+			options: c.options,
+			validFor: /^\w*$/
+		};
+	};
+	return [
+		loadmapStream,
+		syntaxHighlighting(loadmapHighlight),
+		linter(lint, { delay: o.delay ?? 150 }),
+		lintGutter(),
+		autocompletion({
+			override: [complete],
+			activateOnTyping: true
+		})
+	];
+}
+// src/styles.ts
+/** The editor's layout. It sits inside `.lm`, so it takes loadmap's theme tokens; the preview nests its own `.lm`. */
+const EDITOR_CSS = `
+.lme { grid-template-rows: auto minmax(0, 1fr); }
+.lme-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.lme-grow { flex: 1; }
+.lme-status { font: 500 .8rem var(--lm-font); color: var(--lm-drop); }
+.lme-status[data-ok="true"] { color: var(--lm-ok); }
+.lme-note { font-size: .8rem; color: var(--lm-muted); }
+.lme-split { display: grid; grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; min-width: 0; }
+@container (max-width: 980px) { .lme-split { grid-template-columns: minmax(0, 1fr); } }
+.lme-left { display: grid; gap: 8px; min-width: 0; position: sticky; top: 8px; }
+@container (max-width: 980px) { .lme-left { position: static; } }
+.lme-code { background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 8px; overflow: hidden; min-width: 0; }
+.lme-code .cm-editor { height: min(78vh, 900px); font: 13px/1.5 var(--lm-mono); color: var(--lm-fg); background: var(--lm-surface); }
+@container (max-width: 980px) { .lme-code .cm-editor { height: 55vh; } }
+.lme-code .cm-editor.cm-focused { outline: 2px solid var(--lm-accent); outline-offset: -2px; }
+.lme-code .cm-scroller { font-family: var(--lm-mono); }
+.lme-code .cm-gutters { background: var(--lm-bg); color: var(--lm-muted); border-right: 1px solid var(--lm-line); }
+.lme-code .cm-activeLine { background: color-mix(in srgb, var(--lm-accent-soft) 45%, transparent); }
+.lme-code .cm-activeLineGutter { background: var(--lm-accent-soft); }
+.lme-code .cm-cursor { border-left-color: var(--lm-fg); }
+.lme-code .cm-selectionBackground, .lme-code .cm-focused .cm-selectionBackground { background: var(--lm-accent-soft) !important; }
+.lme-code .cm-tooltip { background: var(--lm-surface); color: var(--lm-fg); border: 1px solid var(--lm-line); border-radius: 6px; font-family: var(--lm-font); }
+.lme-code .cm-tooltip-autocomplete ul li[aria-selected] { background: var(--lm-accent); color: var(--lm-surface); }
+.lme-code .cm-completionInfo { max-width: 340px; white-space: pre-wrap; font-size: .78rem; }
+.lme-code .cm-diagnostic { font-family: var(--lm-font); font-size: .8rem; }
+.lme-code .cm-diagnostic-error { border-left-color: var(--lm-drop); }
+.lme-code .cm-diagnostic-warning { border-left-color: var(--lm-warn); }
+.lme-code .cm-lintRange-error { background-image: none; text-decoration: wavy underline var(--lm-drop); text-underline-offset: 3px; }
+.lme-code .cm-lintRange-warning { background-image: none; text-decoration: wavy underline var(--lm-warn); text-underline-offset: 3px; }
+.lme-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 22vh; overflow: auto; }
+.lme-problems button { all: unset; display: block; cursor: pointer; font-size: .8rem; padding: 4px 8px; border-left: 3px solid var(--lm-drop); background: var(--lm-surface); border-radius: 0 4px 4px 0; }
+.lme-problems li[data-severity="warning"] button { border-left-color: var(--lm-warn); }
+.lme-problems button:focus-visible { outline: 2px solid var(--lm-accent); }
+.lme-problems small { display: block; color: var(--lm-muted); }
+.lme-at { font-family: var(--lm-mono); color: var(--lm-muted); }
+.lme-preview { min-width: 0; position: relative; }
+.lme-preview > .lm { padding: 0; }
+.lme-preview[data-stale] > .lm { opacity: .55; }
+.lme-stale { margin: 0 0 8px; font-size: .8rem; color: var(--lm-warn); }
+.lme-empty { margin: 0; padding: 40px 16px; text-align: center; color: var(--lm-muted); border: 1px dashed var(--lm-line); border-radius: 8px; }
+`;
+function injectEditorStyles(doc = document) {
+	if (doc.getElementById("loadmap-editor-css")) return;
+	const el = doc.createElement("style");
+	el.id = "loadmap-editor-css";
+	el.textContent = EDITOR_CSS;
+	doc.head.appendChild(el);
+}
+// src/LoadmapEditor.tsx
+/** A text editor for a `.loadmap` definition next to its live diagram. */
+function LoadmapEditor({ initial, values, functions, theme, onChange, onShare, actions, fileName, templates = TEMPLATES, ref }) {
+	useEffect(() => injectEditorStyles(), []);
+	const [state, setState] = useState(() => {
+		const result = compile(initial, { functions });
+		return {
+			source: initial,
+			result,
+			good: result.definition ?? null,
+			goodKey: fingerprint(initial)
+		};
+	});
+	const [note, setNote] = useState("");
+	const host = useRef(null);
+	const view = useRef(null);
+	const preview = useRef(null);
+	const shown = useRef(values ?? {});
+	const fresh = useRef(false);
+	const loaded = useRef(initial);
+	const latest = useRef({
+		onChange,
+		functions
+	});
+	latest.current = {
+		onChange,
+		functions
+	};
+	const accept = (source, result) => {
+		const h = preview.current;
+		if (fresh.current) fresh.current = false;
+		else if (h) shown.current = h.values();
+		setState((prev) => {
+			if (prev.source === source && prev.result === result) return prev;
+			if (!result.definition) return {
+				...prev,
+				source,
+				result
+			};
+			const key = fingerprint(source);
+			if (key === prev.goodKey && prev.good) return {
+				...prev,
+				source,
+				result
+			};
+			return {
+				source,
+				result,
+				good: result.definition,
+				goodKey: key
+			};
+		});
+	};
+	const acceptRef = useRef(accept);
+	acceptRef.current = accept;
+	useEffect(() => {
+		if (!host.current) return;
+		const v = new EditorView({
+			parent: host.current,
+			state: EditorState.create({
+				doc: initial,
+				extensions: [
+					lineNumbers(),
+					highlightActiveLineGutter(),
+					highlightActiveLine(),
+					history(),
+					indentOnInput(),
+					bracketMatching(),
+					keymap.of([
+						...defaultKeymap,
+						...historyKeymap,
+						indentWithTab
+					]),
+					EditorState.tabSize.of(2),
+					EditorView.lineWrapping,
+					EditorView.contentAttributes.of({ "aria-label": "loadmap definition" }),
+					loadmapLanguage({
+						functions: latest.current.functions,
+						onResult: (source, result) => acceptRef.current(source, result)
+					}),
+					EditorView.updateListener.of((u) => {
+						if (u.docChanged) latest.current.onChange?.(u.state.doc.toString());
+					})
+				]
+			})
+		});
+		view.current = v;
+		return () => {
+			v.destroy();
+			view.current = null;
+		};
+	}, []);
+	const def = state.good;
+	/** A whole new text, from its own defaults. One transaction: undo brings the old text back. */
+	const replace = (source) => {
+		const v = view.current;
+		if (!v) return;
+		loaded.current = source;
+		shown.current = {};
+		fresh.current = true;
+		v.dispatch({
+			changes: {
+				from: 0,
+				to: v.state.doc.length,
+				insert: source
+			},
+			selection: { anchor: 0 },
+			annotations: isolateHistory.of("full")
+		});
+	};
+	const startFrom = (t) => {
+		const text = view.current?.state.doc.toString();
+		if (text != null && text !== loaded.current && !window.confirm(`Replace your text with “${t.title}”?`)) return;
+		replace(t.source);
+		setNote(`New from “${t.title}”`);
+	};
+	const shareHash = async () => {
+		const h = preview.current;
+		const changed = {};
+		if (h && def) {
+			const defaults = def.model.defaults();
+			for (const [k, v] of Object.entries(h.values())) if (defaults[k] !== v) changed[k] = v;
+		}
+		return encodeShare(view.current?.state.doc.toString() ?? state.source, changed);
+	};
+	useImperativeHandle(ref, () => ({
+		source: () => view.current?.state.doc.toString() ?? state.source,
+		setSource: replace,
+		loadmap: () => preview.current,
+		shareHash
+	}));
+	const share = async () => {
+		const hash = await shareHash();
+		if (onShare) await onShare(hash);
+		else {
+			window.history.replaceState(null, "", `#${hash}`);
+			try {
+				await navigator.clipboard.writeText(location.href);
+				setNote("Link copied");
+			} catch {
+				setNote("Link in the address bar");
+			}
+		}
+	};
+	const save = () => {
+		const text = view.current?.state.doc.toString() ?? state.source;
+		const name = fileName ?? slug(def?.model.title ?? "") ?? "diagram";
+		const a = document.createElement("a");
+		a.href = URL.createObjectURL(new Blob([text], { type: "text/plain" }));
+		a.download = `${name || "diagram"}.loadmap`;
+		a.click();
+		setTimeout(() => URL.revokeObjectURL(a.href), 1e3);
+	};
+	const goTo = (d) => {
+		const v = view.current;
+		if (!v) return;
+		v.dispatch({
+			selection: { anchor: Math.min(d.from, v.state.doc.length) },
+			scrollIntoView: true
+		});
+		v.focus();
+	};
+	useEffect(() => {
+		if (!note) return;
+		const t = setTimeout(() => setNote(""), 2500);
+		return () => clearTimeout(t);
+	}, [note]);
+	const list = problems(state.result);
+	const errors = list.filter((d) => d.severity === "error").length;
+	const warnings = list.length - errors;
+	const stale = !state.result.ok && !!def;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lm lme",
+		"data-theme": theme === "auto" || !theme ? void 0 : theme,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "lme-bar",
+			children: [
+				/* @__PURE__ */ jsx("output", {
+					className: "lme-status",
+					"data-ok": errors === 0,
+					children: errors === 0 && warnings === 0 ? "No problems" : [count(errors, "error"), count(warnings, "warning")].filter(Boolean).join(" · ")
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "lme-note",
+					"aria-live": "polite",
+					children: note
+				}),
+				/* @__PURE__ */ jsx("span", { className: "lme-grow" }),
+				templates && templates.length > 0 && /* @__PURE__ */ jsxs("select", {
+					className: "lm-btn",
+					"aria-label": "New from template",
+					value: "",
+					onChange: (e) => {
+						const t = templates.find((x) => x.id === e.target.value);
+						if (t) startFrom(t);
+					},
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "New from template…"
+					}), templates.map((t) => /* @__PURE__ */ jsx("option", {
+						value: t.id,
+						title: t.summary,
+						children: t.title
+					}, t.id))]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "lm-btn",
+					onClick: share,
+					children: "Share link"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "lm-btn",
+					onClick: save,
+					children: "Download .loadmap"
+				}),
+				actions
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "lme-split",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "lme-left",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "lme-code",
+					ref: host
+				}), list.length > 0 && /* @__PURE__ */ jsx("ul", {
+					className: "lme-problems",
+					children: list.map((d) => /* @__PURE__ */ jsx("li", {
+						"data-severity": d.severity,
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => goTo(d),
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									className: "lme-at",
+									children: [
+										d.line,
+										":",
+										d.column
+									]
+								}),
+								" ",
+								d.message,
+								d.hint && /* @__PURE__ */ jsx("small", { children: d.hint })
+							]
+						})
+					}, `${d.from}:${d.message}`))
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "lme-preview",
+				"data-stale": stale || void 0,
+				children: [stale && /* @__PURE__ */ jsx("p", {
+					className: "lme-stale",
+					children: "Showing the last version without errors."
+				}), def ? /* @__PURE__ */ jsx(Loadmap, {
+					ref: preview,
+					model: def.model,
+					view: def.view,
+					theme,
+					...pageOptions(def),
+					initial: valuesFor(def.model, shown.current)
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "lme-empty",
+					children: "Fix the errors on the left to see the diagram."
+				})]
+			})]
+		})]
+	});
+}
+/** The definition's page options, leaving out the unset ones so `<Loadmap>` keeps its defaults. */
+function pageOptions(def) {
+	const { speed, direction, assumptions } = def.options;
+	return {
+		...speed != null ? { speed } : {},
+		...direction ? { direction } : {},
+		...assumptions.length ? { assumptions } : {}
+	};
+}
+/** The tokens of the text: two texts with the same tokens define the same diagram. */
+function fingerprint(source) {
+	return lex(source, new Reporter(source)).map((t) => t.text).join("
");
+}
+/**
+* The values that still fit the model: known names, options that still exist, numbers within range. A text (from a
+* link) is read by the parameter's kind, so "20" can be the number 20 or the option "20".
+*/
+function valuesFor(model, v) {
+	const out = {};
+	for (const { id, def } of model.params) {
+		if (!Object.hasOwn(v, id)) continue;
+		const x = v[id];
+		if (def.kind === "select") {
+			const o = def.options.find((o) => o === x || String(o) === String(x));
+			if (o !== void 0) out[id] = o;
+		}
+		if (def.kind === "switch" && (x === true || x === "true" || x === false || x === "false")) out[id] = x === true || x === "true";
+		if (def.kind === "range" || def.kind === "load") {
+			const n = typeof x === "number" ? x : typeof x === "string" && x.trim() !== "" ? Number(x) : NaN;
+			if (Number.isFinite(n)) out[id] = Math.min(def.max, Math.max(def.min, n));
+		}
+	}
+	return out;
+}
+const count = (n, word) => n ? `${n} ${word}${n > 1 ? "s" : ""}` : "";
+const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || void 0;
+export { EDITOR_CSS, LoadmapEditor, TEMPLATES, injectEditorStyles, loadmapHighlight, loadmapLanguage, loadmapStream };

package/dist/templates-D8CUjoNO.js

@@ -0,0 +1,41 @@
+// src/templates.ts
+/** Starters for "New from template": each compiles, keeps its expectations and lays out without collisions. */
+const TEMPLATES = [
+	{
+		id: "web-app",
+		title: "Web app and database",
+		summary: "App pods in front of one database.",
+		source: "loadmap 1\n# A web app on a few pods in front of one database: the smallest useful model. Replace the numbers with yours; every\n# capacity says where it came from, so the page tells which ones are guesses.\ntitle: \"Web app and database\"\nspeed: 10\nassume: \"1× is today's busiest hour.\"\n\nload \"Traffic, × today\" { max: 50; default: 1 }\n\nparam pods \"App pods\" { options: [2, 3, 4, 6, 8]; default: 3 }\nparam cache \"Cache sessions in memory\" {\n  hint: \"two queries a request instead of five\"\n  default: false\n}\n\nscenario \"Today\" {}\nscenario \"Proposed\" { pods: 6; cache: true }\ngrowth { rate: 0.05; per: month; asOf: \"2026-11-01\" }\n\nexpect \"Today keeps 2×\" { target: 2 }\nexpect \"Proposed keeps 4×\" { scenario: Proposed; target: 4 }\n\nlet queries = cache ? 2 : 5\n\nflow requests \"requests\" {\n  unit: \"request\"\n  rate: 150 * load\n  route: lb -> app -> db\n  from: browsers\n  color: accent\n}\n\nnode browsers \"Browsers\"\n\nnode lb \"Load balancer\" {\n  pass\n  short: \"the load balancer\"\n  demand: flows.requests\n  capacity: measured(10_000, \"req/s\", \"the provider's documented limit\")\n  over: \"new connections are refused\"\n}\n\npool app \"App\" `${pods} pods × 4 workers` {\n  workers { pods: pods; perPod: 4 }\n  short: \"the app pods\"\n  plural: true\n  demand: flows.requests * 0.004\n  capacity: measured(pods * 1, \"cores\", \"pod CPU limit\")\n  over: \"requests queue and time out\"\n  describe: `${pods} pods, 1 core each, 4 ms of CPU a request`\n}\n\nnode db \"Postgres\" \"primary\" {\n  shape: cylinder\n  store\n  short: \"the database\"\n  demand: flows.requests * queries\n  capacity: estimated(6_000 ± 30%, \"queries/s\", \"a load test from last year\")\n  over: \"queries queue on the primary and every page slows down\"\n}\n\nbrowsers -> lb: \"HTTPS\"\nlb -> app\napp -> db: `${compact(flows.requests * queries)} queries/s`\n"
+	},
+	{
+		id: "read-replicas",
+		title: "Reads on replicas",
+		summary: "Reads on replicas, writes on a primary that ships them on.",
+		source: "loadmap 1\n# Reads go to replicas, writes to the primary, and the primary also ships every write to each replica. More replicas\n# take reads off each other but add replication work on the primary.\ntitle: \"Reads on replicas\"\nspeed: 10\nassume: \"1× is today's busiest hour; reads and writes grow together.\"\n\nload \"Traffic, × today\" { max: 50; default: 1 }\n\nparam pods \"API pods\" { options: [2, 4, 6, 8]; default: 4 }\nparam replicas \"Read replicas\" { options: [1, 2, 3, 4]; default: 2 }\n\nscenario \"Today\" {}\nscenario \"Two more replicas\" { replicas: 4 }\ngrowth { rate: 0.04; per: month; asOf: \"2026-11-01\" }\n\nexpect \"Today keeps 2×\" { target: 2 }\n\nflow reads \"reads\" {\n  unit: \"read\"\n  rate: 1_200 * load\n  route: api -> replicas\n  from: clients\n  color: accent\n}\n\nflow writes \"writes\" {\n  unit: \"write\"\n  rate: 90 * load\n  priority: 1\n  route: api -> primary\n  from: clients\n  color: alt\n}\n\nnode clients \"Clients\" \"web and mobile\"\n\npool api \"API\" `${pods} pods` {\n  workers { pods: pods; perPod: 8 }\n  short: \"the API\"\n  demand: (flows.reads + flows.writes) * 0.0005\n  capacity: measured(pods * 1, \"cores\", \"pod CPU limit\")\n  over: \"requests queue in the API\"\n}\n\nnode replicas \"Read replicas\" `${replicas} replicas` {\n  shape: cylinder\n  store\n  short: \"the read replicas\"\n  plural: true\n  demand: flows.reads\n  capacity: estimated(replicas * 4_000 ± 30%, \"queries/s\", \"about 4,000 reads/s per replica\")\n  over: \"reads slow down and fall behind the primary\"\n}\n\nnode primary \"Primary\" \"writes\" {\n  shape: cylinder\n  store\n  short: \"the primary\"\n  # every write is applied here and shipped to each replica\n  demand: flows.writes * (1 + 0.25 * replicas)\n  capacity: estimated(1_500 ± 30%, \"writes/s\", \"vendor sizing for this instance\")\n  over: \"writes queue and replication lag grows\"\n  describe: `${replicas} replicas to ship to`\n}\n\nclients -> api\napi -> replicas: \"reads\"\napi -> primary: \"writes\"\nprimary -> replicas: \"replication\"\n"
+	},
+	{
+		id: "queue-workers",
+		title: "Queue and workers",
+		summary: "An API that queues jobs for a pool of workers.",
+		source: "loadmap 1\n# Requests are accepted fast and done later: an API puts jobs on a queue, a pool of workers drains it, and each job\n# ends in the database. Past capacity the queue grows instead of requests failing.\ntitle: \"Queue and workers\"\nspeed: 10\nassume: \"1× is the peak hour of an ordinary day.\"\n\nload \"Jobs, × today\" { max: 100; default: 5 }\n\nparam pods \"Worker pods\" { options: [2, 3, 4, 6, 8]; default: 3 }\nparam threads \"Threads per pod\" { options: [4, 8, 16]; default: 8 }\n\nscenario \"Today\" {}\nscenario \"Proposed\" { pods: 6 }\ngrowth { rate: 0.06; per: month; asOf: \"2026-11-01\" }\n\nexpect \"Today keeps 10×\" { target: 10 }\nexpect \"Proposed keeps 20×\" { scenario: Proposed; target: 20 }\n\nflow jobs \"jobs\" {\n  unit: \"job\"\n  rate: 20 * load\n  route: api -> topic -> workers -> db\n  from: clients\n  color: accent\n}\n\nnode clients \"Clients\"\n\nnode api \"API\" {\n  pass\n  short: \"the API\"\n  demand: flows.jobs\n  capacity: measured(3_000, \"req/s\", \"load test, March\")\n  over: \"clients get 503s\"\n}\n\ncluster broker \"Queue\" \"jobs topic\" {\n  members: 3\n  memberLabel: `broker ${i}`\n  queue topic { partitions { jobs: pods * threads } }\n  short: \"the queue\"\n  demand: flows.jobs * 4 / 1000\n  capacity: estimated(30, \"MB/s\", \"vendor sizing guide\")\n  over: \"producing slows down and the API backs up\"\n}\n\npool workers \"Workers\" `${pods} pods × ${threads} threads` {\n  workers { pods: pods; perPod: threads }\n  short: \"the workers\"\n  plural: true\n  demand: flows.jobs * 0.01\n  capacity: measured(pods * 2, \"cores\", \"pod CPU limit\")\n  over: \"jobs wait in the queue and the lag keeps growing\"\n  describe: `${pods} pods, 2 cores each, 10 ms of CPU a job`\n}\n\nnode db \"Database\" {\n  shape: cylinder\n  store\n  short: \"the database\"\n  demand: flows.jobs * 3\n  capacity: estimated(5_000 ± 30%, \"writes/s\")\n  over: \"writes queue and the workers stall on them\"\n}\n\nclients -> api: \"POST /jobs\"\napi -> broker: `${compact(flows.jobs)} jobs/s`\nbroker -> workers\nworkers -> db\n"
+	},
+	{
+		id: "notifications",
+		title: "Notification fan-out",
+		summary: "One event, several messages, a quota per provider.",
+		source: "loadmap 1\n# One event becomes several messages: a sender pool turns events into push notifications, emails and texts, and each\n# provider has a quota of its own. The quota that runs out first is usually not the one with the most traffic.\ntitle: \"Notification fan-out\"\nspeed: 10\nassume: \"1× is a normal weekday peak; a campaign is a preset.\"\n\nload \"Events, × today\" { max: 100; default: 1 }\n\nparam pods \"Sender pods\" { options: [2, 4, 6]; default: 2 }\nparam emailShare \"Events that also send an email\" { options: [0.1, 0.3, 0.6]; default: 0.3 }\nparam smsPlan \"SMS plan (messages/s)\" { options: [10, 50, 200]; default: 10 }\n\npreset \"Campaign\" { load: 20; emailShare: 0.6 }\n\nscenario \"Today\" {}\nscenario \"Bigger SMS plan\" { smsPlan: 200 }\ngrowth { rate: 0.08; per: month; asOf: \"2026-11-01\" }\n\nexpect \"Today keeps 1.5×\" { target: 1.5 }\n\nflow events \"events\" {\n  unit: \"event\"\n  rate: 60 * load\n  route: api -> topic -> senders -> dispatch\n  from: apps\n  color: accent\n}\n\nnode apps \"Your services\"\n\nnode api \"Events API\" {\n  pass\n  short: \"the events API\"\n  demand: flows.events\n  capacity: measured(2_000, \"req/s\", \"load test\")\n  over: \"events are rejected\"\n}\n\ncluster broker \"Queue\" \"events topic\" {\n  members: 3\n  memberLabel: `broker ${i}`\n  queue topic { partitions { events: pods * 8 } }\n}\n\npool senders \"Senders\" `${pods} pods × 8` {\n  workers { pods: pods; perPod: 8 }\n  short: \"the senders\"\n  plural: true\n  demand: flows.events * (1 + emailShare + 0.05) * 0.003\n  capacity: measured(pods * 1, \"cores\", \"pod CPU limit\")\n  over: \"notifications wait in the queue and arrive late\"\n}\n\nnode dispatch \"Dispatch\" {\n  fanout {\n    events -> push: 1\n    events -> email: emailShare\n    events -> sms: 0.05\n  }\n}\n\nnode push \"Push service\" \"APNs and FCM\" {\n  sink\n  short: \"the push service\"\n  demand: flows.events\n  capacity: estimated(5_000, \"messages/s\", \"provider guidance\")\n  over: \"pushes are throttled and arrive late\"\n}\n\nnode email \"Email provider\" {\n  sink\n  short: \"the email provider\"\n  demand: flows.events * emailShare\n  capacity: measured(200, \"messages/s\", \"plan quota\")\n  over: \"emails queue at the provider; past the daily cap they are dropped\"\n}\n\nnode sms \"SMS provider\" `${smsPlan}/s plan` {\n  sink\n  short: \"the SMS provider\"\n  demand: flows.events * 0.05\n  capacity: measured(smsPlan, \"messages/s\", \"plan quota\")\n  over: \"texts are rejected with 429s\"\n}\n\napps -> api\napi -> broker\nbroker -> senders\nsenders -> dispatch\ndispatch -> push\ndispatch -> email\ndispatch -> sms\n"
+	},
+	{
+		id: "batch-import",
+		title: "Batch import",
+		summary: "Upload, store, parse and load into a warehouse in batches.",
+		source: "loadmap 1\n# Files are uploaded, stored, parsed into rows and loaded into a warehouse in batches. Bigger batches cost the\n# warehouse less per row; more parsers only help until the warehouse is the limit.\ntitle: \"Batch import\"\nspeed: 10\nassume: \"1× is the nightly import; files average 5,000 rows.\"\n\nload \"Files, × today\" { max: 50; default: 1 }\n\nparam parsers \"Parser pods\" { options: [2, 4, 8, 12]; default: 4 }\nparam rows \"Rows per insert\" { options: [100, 1_000, 5_000]; default: 1_000 }\n\nscenario \"Today\" {}\nscenario \"Bigger batches\" { rows: 5_000; parsers: 8 }\ngrowth { rate: 0.1; per: month; asOf: \"2026-11-01\" }\n\nexpect \"Today keeps 2×\" { target: 2 }\n\nflow files \"files\" {\n  unit: \"file\"\n  rate: 4 * load\n  route: upload -> bucket -> parsers -> warehouse\n  from: partners\n  color: accent\n}\n\nnode partners \"Partners\" \"SFTP and HTTPS\"\n\nnode upload \"Upload API\" {\n  pass\n  short: \"the upload API\"\n  demand: flows.files\n  capacity: measured(200, \"files/s\", \"load test\")\n  over: \"uploads fail and partners retry\"\n}\n\nnode bucket \"Object store\" {\n  pass\n  short: \"the object store\"\n  demand: flows.files * 2\n  capacity: measured(3_500, \"requests/s\", \"provider limit per prefix\")\n  over: \"writes get 503 slow-downs\"\n}\n\npool parsers \"Parsers\" `${parsers} pods` {\n  workers { pods: parsers; perPod: 2 }\n  short: \"the parsers\"\n  plural: true\n  demand: flows.files * 0.1\n  capacity: measured(parsers * 1, \"cores\", \"pod CPU limit\")\n  over: \"files wait in the bucket and the import runs into the morning\"\n  describe: `${parsers} pods, 100 ms of CPU a file`\n}\n\nnode warehouse \"Warehouse\" {\n  shape: cylinder\n  store\n  short: \"the warehouse\"\n  demand: flows.files * 5_000 / rows\n  capacity: estimated(200 ± 30%, \"inserts/s\", \"a test on a smaller instance\")\n  over: \"inserts queue and the import misses its window\"\n}\n\npartners -> upload\nupload -> bucket\nbucket -> parsers\nparsers -> warehouse: `${compact(rows)} rows an insert`\n"
+	},
+	{
+		id: "third-party-api",
+		title: "Third-party API with a quota",
+		summary: "A vendor’s rate limit, a cache, and a bigger plan.",
+		source: "loadmap 1\n# Your service depends on someone else's API with a rate quota. A cache in front cuts the calls; the plan sets the\n# quota. Which one buys more headroom for the money is the question this answers.\ntitle: \"Third-party API with a quota\"\nspeed: 10\nassume: \"1× is today's busiest minute.\"\n\nload \"Traffic, × today\" { max: 100; default: 1 }\n\nparam pods \"Service pods\" { options: [2, 4, 6]; default: 2 }\nparam hit \"Cache hit ratio\" { options: [0, 0.5, 0.8]; default: 0 }\nparam quota \"Vendor plan (requests/s)\" { options: [50, 200, 1_000]; default: 50 }\n\nscenario \"Today\" {}\nscenario \"Add a cache\" { hit: 0.8 }\nscenario \"Bigger plan\" { quota: 200 }\ngrowth { rate: 0.05; per: month; asOf: \"2026-11-01\" }\n\nexpect \"Today keeps 1.5×\" { target: 1.5 }\n\nlet calls = flows.lookups * (1 - hit)\n\nflow lookups \"lookups\" {\n  unit: \"lookup\"\n  rate: 15 * load\n  route: service -> vendor\n  from: users\n  color: accent\n}\n\nnode users \"Users\"\n\npool service \"Your service\" `${pods} pods` {\n  workers { pods: pods; perPod: 8 }\n  short: \"your service\"\n  demand: flows.lookups * 0.01\n  capacity: measured(pods * 1, \"cores\", \"pod CPU limit\")\n  over: \"requests queue in your service\"\n}\n\nnode vendor \"Vendor API\" `${quota} req/s plan` {\n  store\n  short: \"the vendor API\"\n  demand: calls\n  capacity: measured(quota, \"req/s\", \"the plan's rate limit\")\n  over: \"calls get 429s and lookups fail\"\n  describe: hit > 0 ? `${hit * 100} % served from the cache` : \"every lookup calls it\"\n}\n\nusers -> service\nservice -> vendor: `${compact(calls)} calls/s`\n"
+	}
+];
+export { TEMPLATES as t };

package/dist/templates.d.ts

@@ -0,0 +1,9 @@
+export interface Template {
+  id: string;
+  title: string;
+  /** One line for a menu or a gallery card. */
+  summary: string;
+  source: string;
+}
+/** Starters for "New from template": each compiles, keeps its expectations and lays out without collisions. */
+export declare const TEMPLATES: readonly Template[];

package/dist/templates.js

@@ -0,0 +1 @@
+export { t as TEMPLATES } from "./templates-D8CUjoNO.js";

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@loadmap/editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "<LoadmapEditor>: a .loadmap editor next to its live diagram, with inline errors, completions and share links.",
+  "keywords": [
+    "loadmap",
+    "editor",
+    "codemirror",
+    "react"
+  ],
+  "license": "MIT",
+  "author": "Jaime Rojas",
+  "homepage": "https://jaim3r0jas.github.io/loadmap/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jaim3r0jas/loadmap.git",
+    "directory": "packages/editor"
+  },
+  "bugs": "https://github.com/jaim3r0jas/loadmap/issues",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./templates": {
+      "types": "./dist/templates.d.ts",
+      "import": "./dist/templates.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.4",
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.15",
+    "@lezer/highlight": "^1.2.5",
+    "@loadmap/core": "0.1.0",
+    "@loadmap/dsl": "0.1.0",
+    "@loadmap/react": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
 }