@glyphlab/node-panel-react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Subtubes
+
+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,26 @@
-# Temporary Holding Version
+# @glyphlab/node-panel-react
 
-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.
+The node panel for a `@glyphlab/diagram-core` controller: the open node's Markdown content, its decision log, its code links and its Systems design answers, with editing in place, autosave, and a conflict prompt when the node changes under an edit. Peer dependencies: `react`, `zustand`, `@glyphlab/diagram-core`.
+
+```tsx
+import { createDiagramController } from '@glyphlab/diagram-core'
+import { DiagramCanvas, DiagramProvider, createDiagramInstance } from '@glyphlab/diagram-react'
+import { NodePanel, createNodePanelStore } from '@glyphlab/node-panel-react'
+import '@glyphlab/diagram-react/theme.css'
+import '@glyphlab/diagram-react/diagram.css'
+import '@glyphlab/node-panel-react/node-panel.css'
+
+const controller = createDiagramController()
+const instance = createDiagramInstance(controller)
+const panel = createNodePanelStore(controller)   // one per diagram
+
+<DiagramProvider instance={instance} slots={{ renderMarkdown, openNodeContent: (id, tab) => panel.getState().open(id, tab) }}>
+  <DiagramCanvas title="Orders" />
+</DiagramProvider>
+<NodePanel controller={controller} store={panel} renderMarkdown={renderMarkdown} />
+```
+
+- **Edits are changes to the diagram**: saving is one `controller.apply({ source: 'user' })`, so a host sees it in `controller.onChange` and can undo it.
+- **Props**: `renderMarkdown(source)` draws Markdown (plain text without it). `code` supplies the Code tab (`reveal(link)`, and optionally `problem`, `onRefresh`, `checking` for a link check). `systems={false}` hides the Systems design tab. `height` and `resizer` let the host size the panel. `renderConfirm` replaces the discard-edits dialog. `legacyAnswers` moves answers a host kept elsewhere onto the node, once.
+- **Opening a node**: `panel.getState().open(id, tab?)`, `close()`. The canvas's `openNodeContent` slot is the usual caller.
+- Call `panel.dispose()` when the controller outlives the panel.

package/index.d.ts

@@ -0,0 +1,87 @@
+import { StoreApi } from 'zustand/vanilla';
+import { DiagramController, NodeDef } from '@glyphlab/diagram-core';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface Draft {
+    title: string;
+    body: string;
+    decisions: string;
+    baseTitle: string;
+    baseBody: string;
+    baseDecisions: string;
+}
+type Latest = {
+    title: string;
+    body: string;
+    decisions: string;
+};
+type NodePanelTab = 'content' | 'decisions' | 'systems' | 'code';
+interface NodePanelState {
+    nodeId: string | null;
+    tab: NodePanelTab;
+    setTab: (tab: NodePanelTab) => void;
+    draft: Draft | null;
+    pending: {
+        nodeId: string | null;
+    } | null;
+    error: string;
+    conflict: Latest | null;
+    open: (id: string, tab?: NodePanelTab) => void;
+    close: () => void;
+    discardAndContinue: () => void;
+    keepEditing: () => void;
+    edit: () => void;
+    change: (patch: Partial<Pick<Draft, 'title' | 'body' | 'decisions'>>) => void;
+    cancel: () => void;
+    save: (options?: {
+        stayEditing?: boolean;
+        overwrite?: boolean;
+    }) => boolean;
+    takeLatest: () => void;
+}
+type NodePanelStore = StoreApi<NodePanelState> & {
+    dispose: () => void;
+};
+declare function createNodePanelStore(controller: DiagramController): NodePanelStore;
+declare function bindNodePanelAutosave(store: NodePanelStore, delay?: number): () => void;
+
+type NodeLink = NonNullable<NodeDef['links']>[number];
+interface DiscardConfirm {
+    title: string;
+    body: string;
+    confirmLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+interface NodePanelCode {
+    reveal: (link: NodeLink) => void;
+    problem?: (nodeId: string, index: number) => {
+        status: string;
+        message: string;
+    } | undefined;
+    onRefresh?: () => void;
+    checking?: boolean;
+}
+interface NodePanelProps {
+    controller: DiagramController;
+    store: NodePanelStore;
+    renderMarkdown?: (source: string) => ReactNode;
+    code?: NodePanelCode;
+    systems?: boolean;
+    legacyAnswers?: (nodeId: string) => Record<string, string> | null;
+    height?: number;
+    resizer?: ReactNode;
+    renderConfirm?: (confirm: DiscardConfirm) => ReactNode;
+}
+declare function NodePanel(props: NodePanelProps): react.JSX.Element | null;
+
+interface ChecklistProps {
+    controller: DiagramController;
+    nodeId: string;
+    legacyAnswers?: (nodeId: string) => Record<string, string> | null;
+}
+declare function Checklist({ controller, nodeId, legacyAnswers }: ChecklistProps): react.JSX.Element;
+
+export { Checklist, NodePanel, bindNodePanelAutosave, createNodePanelStore };
+export type { ChecklistProps, DiscardConfirm, NodeLink, NodePanelCode, NodePanelProps, NodePanelState, NodePanelStore, NodePanelTab };

package/index.js

@@ -0,0 +1,391 @@
+"use client";
+
+// packages/node-panel-react/src/store.ts
+import { createStore } from "zustand/vanilla";
+var isDirty = (d) => d.title !== d.baseTitle || d.body !== d.baseBody || d.decisions !== d.baseDecisions;
+var CLOSED = { nodeId: null, draft: null, pending: null, error: "", conflict: null };
+var EDITED_ELSEWHERE = "This node was edited elsewhere. Autosave is paused. Select Current or Disk changed; no changes will be merged.";
+function createNodePanelStore(controller) {
+  let applyingContent = false;
+  const nodeOf = (id) => id ? controller.stores.nodes.getState().byId[id] : void 0;
+  const store = createStore()((set, get) => {
+    const request = (nodeId) => {
+      const { draft } = get();
+      if (draft && isDirty(draft)) {
+        set({ pending: { nodeId } });
+      } else {
+        set({ nodeId, tab: "content", draft: null, pending: null, error: "", conflict: null });
+      }
+    };
+    return {
+      nodeId: null,
+      tab: "content",
+      setTab: (tab) => set({ tab }),
+      draft: null,
+      pending: null,
+      error: "",
+      conflict: null,
+      open: (id, tab) => {
+        if (get().nodeId === id) {
+          if (tab) set({ tab });
+          return;
+        }
+        if (!nodeOf(id)) {
+          set({ error: "That node no longer exists." });
+          return;
+        }
+        request(id);
+        if (tab && get().nodeId === id) set({ tab });
+      },
+      close: () => request(null),
+      discardAndContinue: () => {
+        const { pending } = get();
+        if (pending) set({ nodeId: pending.nodeId, tab: "content", draft: null, pending: null, error: "", conflict: null });
+      },
+      keepEditing: () => set({ pending: null }),
+      edit: () => {
+        const node = nodeOf(get().nodeId);
+        if (!node) {
+          set({ error: "That node no longer exists." });
+          return;
+        }
+        const decisions = node.decisions ?? "";
+        set({ draft: { title: node.title, body: node.body, decisions, baseTitle: node.title, baseBody: node.body, baseDecisions: decisions }, error: "", conflict: null });
+      },
+      change: (patch) => set((s) => s.draft ? { draft: { ...s.draft, ...patch }, error: "" } : s),
+      cancel: () => set({ draft: null, error: "", conflict: null }),
+      takeLatest: () => get().edit(),
+      save: ({ stayEditing = false, overwrite = false } = {}) => {
+        const { nodeId, draft, conflict } = get();
+        if (!nodeId || !draft) {
+          set({ error: "Open a node in edit mode before saving." });
+          return false;
+        }
+        if (conflict && !overwrite) return false;
+        const node = nodeOf(nodeId);
+        if (!node) {
+          set({ error: "That node no longer exists." });
+          return false;
+        }
+        const title = draft.title.trim();
+        if (!title) {
+          set({ error: "A node title cannot be empty." });
+          return false;
+        }
+        const expectedTitle = overwrite && conflict ? conflict.title : draft.baseTitle;
+        const expectedBody = overwrite && conflict ? conflict.body : draft.baseBody;
+        const expectedDecisions = overwrite && conflict ? conflict.decisions : draft.baseDecisions;
+        if (node.title !== expectedTitle || node.body !== expectedBody || (node.decisions ?? "") !== expectedDecisions) {
+          set({ conflict: { title: node.title, body: node.body, decisions: node.decisions ?? "" }, error: EDITED_ELSEWHERE });
+          return false;
+        }
+        const patch = {};
+        if (title !== node.title) patch.title = title;
+        if (draft.body !== node.body) patch.body = draft.body;
+        if (draft.decisions !== (node.decisions ?? "")) patch.decisions = draft.decisions;
+        if (Object.keys(patch).length > 0) {
+          applyingContent = true;
+          let result;
+          try {
+            result = controller.apply({ ops: [{ op: "updateNode", id: nodeId, patch }], summary: `Edit node "${node.title}"`, source: "user" });
+          } finally {
+            applyingContent = false;
+          }
+          if (!result.ok) {
+            set({ error: result.message });
+            return false;
+          }
+        }
+        set({ draft: stayEditing ? { title, body: draft.body, decisions: draft.decisions, baseTitle: title, baseBody: draft.body, baseDecisions: draft.decisions } : null, error: "", conflict: null });
+        return true;
+      }
+    };
+  });
+  const offLoad = controller.onLoad(() => store.setState({ ...CLOSED }));
+  const offChange = controller.onChange(() => {
+    if (applyingContent) return;
+    const { nodeId, draft, conflict } = store.getState();
+    const node = nodeOf(nodeId);
+    if (nodeId && !node) {
+      store.setState({ ...CLOSED });
+    } else if (node && draft && !conflict && (node.title !== draft.baseTitle || node.body !== draft.baseBody || (node.decisions ?? "") !== draft.baseDecisions)) {
+      if (!isDirty(draft)) {
+        store.getState().edit();
+      } else {
+        store.setState({ conflict: { title: node.title, body: node.body, decisions: node.decisions ?? "" }, error: EDITED_ELSEWHERE });
+      }
+    }
+  });
+  return Object.assign(store, { dispose: () => {
+    offLoad();
+    offChange();
+  } });
+}
+function bindNodePanelAutosave(store, delay = 750) {
+  let timer;
+  const sync = () => {
+    clearTimeout(timer);
+    const { draft, pending, error, conflict } = store.getState();
+    if (!draft || pending || error || conflict || !isDirty(draft)) return;
+    timer = setTimeout(() => store.getState().save({ stayEditing: true }), delay);
+  };
+  const unsubscribe = store.subscribe(sync);
+  sync();
+  return () => {
+    clearTimeout(timer);
+    unsubscribe();
+  };
+}
+
+// packages/node-panel-react/src/NodePanel.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useStore as useStore2 } from "zustand";
+import { LIMITS } from "@glyphlab/diagram-core";
+
+// packages/node-panel-react/src/Checklist.tsx
+import { useEffect, useRef, useState } from "react";
+import { useStore } from "zustand";
+import { CHECKLIST_ANSWER_MAX, CHECKLIST_TOTAL, DESIGN_CHECKLIST } from "@glyphlab/diagram-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var columns = (() => {
+  const left = [];
+  let count = 0;
+  for (const group of DESIGN_CHECKLIST) {
+    if (count < CHECKLIST_TOTAL / 2 - 1) {
+      left.push(group);
+      count += group.items.length;
+    }
+  }
+  return [left, DESIGN_CHECKLIST.filter((g) => !left.includes(g))];
+})();
+var save = (controller, nodeId, title, answers) => controller.apply({ ops: [{ op: "updateNode", id: nodeId, patch: { systemsDesign: answers } }], summary: `Edit Systems design of "${title}"`, source: "user" });
+function Checklist({ controller, nodeId, legacyAnswers }) {
+  const node = useStore(controller.stores.nodes, (s) => s.byId[nodeId]);
+  const values = node?.systemsDesign;
+  const done = Object.values(values ?? {}).filter((v) => v.trim()).length;
+  useEffect(() => {
+    const current = controller.stores.nodes.getState().byId[nodeId];
+    if (!current || current.systemsDesign || !legacyAnswers) return;
+    const legacy = legacyAnswers(nodeId);
+    if (legacy) save(controller, nodeId, current.title, legacy);
+  }, [nodeId]);
+  return /* @__PURE__ */ jsxs("aside", { className: "node-checklist", "aria-label": "Systems design checklist", children: [
+    /* @__PURE__ */ jsxs("h3", { children: [
+      "Systems design ",
+      /* @__PURE__ */ jsxs("span", { role: "status", children: [
+        done,
+        "/",
+        CHECKLIST_TOTAL,
+        " filled"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "node-checklist-columns", children: columns.map((groups, column) => /* @__PURE__ */ jsx("div", { className: "node-checklist-column", children: groups.map((group) => /* @__PURE__ */ jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsx("legend", { children: group.title }),
+      group.items.map((item) => /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("strong", { children: item.label }),
+        /* @__PURE__ */ jsx("small", { children: item.question }),
+        /* @__PURE__ */ jsx(Answer, { controller, nodeId, itemId: item.id, saved: values?.[item.id] ?? "" })
+      ] }, item.id))
+    ] }, group.title)) }, column)) })
+  ] });
+}
+function Answer({ controller, nodeId, itemId, saved }) {
+  const [text, setText] = useState(saved);
+  const typing = useRef(false);
+  const timer = useRef(void 0);
+  const latest = useRef(text);
+  useEffect(() => {
+    if (!typing.current) {
+      setText(saved);
+      latest.current = saved;
+    }
+  }, [saved]);
+  const commit = () => {
+    clearTimeout(timer.current);
+    typing.current = false;
+    const node = controller.stores.nodes.getState().byId[nodeId];
+    if (!node || latest.current === (node.systemsDesign?.[itemId] ?? "")) return;
+    save(controller, nodeId, node.title, { [itemId]: latest.current });
+  };
+  useEffect(() => () => {
+    if (typing.current) commit();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value: text,
+      maxLength: CHECKLIST_ANSWER_MAX,
+      onChange: (e) => {
+        typing.current = true;
+        latest.current = e.target.value;
+        setText(e.target.value);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(commit, 600);
+      },
+      onBlur: commit
+    }
+  );
+}
+
+// packages/node-panel-react/src/NodePanel.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PencilIcon = () => /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" }) });
+var CloseIcon = () => /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M6 6l12 12M18 6 6 18" }) });
+var plain = (source) => /* @__PURE__ */ jsx2("p", { className: "node-panel-plain", children: source });
+var DEFAULT_CONFIRM = (c) => /* @__PURE__ */ jsx2("div", { className: "node-panel-dialog", role: "alertdialog", "aria-modal": "true", "aria-label": c.title, children: /* @__PURE__ */ jsxs2("div", { className: "node-panel-dialog-box", children: [
+  /* @__PURE__ */ jsx2("h3", { children: c.title }),
+  /* @__PURE__ */ jsx2("p", { children: c.body }),
+  /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx2("button", { className: "node-panel-btn", type: "button", onClick: c.onCancel, children: "Keep editing" }),
+    /* @__PURE__ */ jsx2("button", { className: "node-panel-btn primary", type: "button", onClick: c.onConfirm, children: c.confirmLabel })
+  ] })
+] }) });
+function NodePanel(props) {
+  const { controller, store } = props;
+  useEffect2(() => bindNodePanelAutosave(store), [store]);
+  const nodeId = useStore2(store, (s) => s.nodeId);
+  const node = useStore2(controller.stores.nodes, (s) => nodeId ? s.byId[nodeId] : void 0);
+  if (!node) return null;
+  return /* @__PURE__ */ jsx2(Content, { ...props, node }, node.id);
+}
+function Content({ controller, store, node, renderMarkdown = plain, code, systems = true, legacyAnswers, height, resizer, renderConfirm = DEFAULT_CONFIRM }) {
+  const { draft, pending, error, conflict, tab, close, discardAndContinue, keepEditing, edit, change, cancel, save: save2, takeLatest, setTab } = useStore2(store);
+  const nodeId = node.id;
+  const decisions = node.decisions ?? "";
+  const links = node.links ?? [];
+  const ref = useRef2(null);
+  const titleRef = useRef2(null);
+  const editing = draft !== null;
+  const dirty = draft !== null && (draft.title !== draft.baseTitle || draft.body !== draft.baseBody || draft.decisions !== draft.baseDecisions);
+  const shown = tab === "systems" && !systems ? "content" : tab;
+  useEffect2(() => {
+    ref.current?.focus();
+    return () => {
+      document.querySelector(`[data-node-id="${CSS.escape(nodeId)}"] .node-expand`)?.focus({ preventScroll: true });
+    };
+  }, [nodeId]);
+  useEffect2(() => {
+    if (editing) titleRef.current?.focus();
+  }, [editing]);
+  useEffect2(() => {
+    if (!dirty) return;
+    const warn = (e) => e.preventDefault();
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
+  const tabButton = (id, label) => /* @__PURE__ */ jsx2("button", { type: "button", role: "tab", id: `node-tab-${id}`, "aria-selected": shown === id, "aria-controls": "node-panel", onClick: () => setTab(id), children: label });
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      ref,
+      className: "node-content-drawer",
+      "aria-label": "Node content",
+      tabIndex: -1,
+      style: height === void 0 ? void 0 : { height },
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          close();
+        }
+        if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && draft) {
+          e.preventDefault();
+          save2();
+        }
+      },
+      children: [
+        resizer,
+        /* @__PURE__ */ jsxs2("header", { className: "node-content-head", children: [
+          /* @__PURE__ */ jsx2("h2", { children: node.title }),
+          /* @__PURE__ */ jsx2("span", { role: "status", children: draft ? conflict ? "Autosave paused" : error ? "Unsaved" : dirty ? "Autosave pending" : "Saved" : "Node content" }),
+          draft ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2("button", { className: "node-panel-btn", type: "button", onClick: cancel, disabled: !!conflict, children: "Cancel editing" }),
+            /* @__PURE__ */ jsx2("button", { className: "node-panel-btn primary", type: "submit", form: "node-content-form", disabled: !!conflict, children: "Save node" })
+          ] }) : /* @__PURE__ */ jsxs2("button", { className: "node-panel-btn", type: "button", onClick: edit, children: [
+            /* @__PURE__ */ jsx2(PencilIcon, {}),
+            " Edit content"
+          ] }),
+          /* @__PURE__ */ jsx2("button", { className: "node-panel-icon-btn", type: "button", "aria-label": "Close node content", onClick: close, children: /* @__PURE__ */ jsx2(CloseIcon, {}) })
+        ] }),
+        error && /* @__PURE__ */ jsx2("p", { className: "node-content-error", role: "alert", children: error }),
+        conflict && /* @__PURE__ */ jsxs2("div", { className: "node-content-error", role: "group", "aria-label": "Resolve node conflict", children: [
+          /* @__PURE__ */ jsx2("span", { children: "The saved design content changed. Current keeps your draft; Disk changed loads the latest saved content." }),
+          /* @__PURE__ */ jsx2("button", { className: "node-panel-btn", type: "button", onClick: () => save2({ overwrite: true, stayEditing: true }), children: "Current" }),
+          /* @__PURE__ */ jsx2("button", { className: "node-panel-btn", type: "button", onClick: takeLatest, children: "Disk changed" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "node-content-tabs", role: "tablist", "aria-label": "Node content sections", children: [
+          tabButton("content", "Content"),
+          tabButton("decisions", /* @__PURE__ */ jsxs2(Fragment, { children: [
+            "Decisions",
+            (draft ? draft.decisions : decisions).trim() && /* @__PURE__ */ jsx2("span", { className: "node-tab-dot", role: "img", "aria-label": "has a decision log" })
+          ] })),
+          tabButton("code", /* @__PURE__ */ jsxs2(Fragment, { children: [
+            "Code",
+            links.length > 0 && /* @__PURE__ */ jsx2("span", { className: "node-tab-dot", role: "img", "aria-label": `${links.length} code links` })
+          ] })),
+          systems && tabButton("systems", "Systems design")
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "node-content-main", id: "node-panel", role: "tabpanel", "aria-labelledby": `node-tab-${shown}`, children: shown === "systems" ? /* @__PURE__ */ jsx2(Checklist, { controller, nodeId, legacyAnswers }) : shown === "code" ? /* @__PURE__ */ jsx2("div", { className: "node-content-pane", children: /* @__PURE__ */ jsx2("div", { className: "node-content-view", role: "region", "aria-label": "Code links", children: links.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "node-content-empty", children: "No code linked. Ask the assistant to link the files and lines this node describes." }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+          code?.onRefresh && /* @__PURE__ */ jsxs2("p", { className: "node-code-refresh", children: [
+            /* @__PURE__ */ jsx2("button", { type: "button", className: "node-panel-btn", disabled: code.checking, onClick: code.onRefresh, children: code.checking ? "Checking\u2026" : "Refresh" }),
+            /* @__PURE__ */ jsx2("small", { children: "Compares each link with the code now. It only reports; it changes no link." })
+          ] }),
+          /* @__PURE__ */ jsx2("ul", { className: "node-code-links", children: links.map((link, i) => {
+            const problem = code?.problem?.(nodeId, i);
+            return /* @__PURE__ */ jsxs2("li", { children: [
+              /* @__PURE__ */ jsxs2("button", { type: "button", className: "node-panel-btn", onClick: () => code?.reveal(link), children: [
+                link.repo ? `${link.repo}:` : "",
+                link.path,
+                link.lines ? `:${link.lines[0] === link.lines[1] ? link.lines[0] : `${link.lines[0]}-${link.lines[1]}`}` : ""
+              ] }),
+              link.symbol && /* @__PURE__ */ jsx2("code", { children: link.symbol }),
+              link.hash && /* @__PURE__ */ jsxs2("small", { children: [
+                "hash ",
+                link.hash
+              ] }),
+              problem && /* @__PURE__ */ jsx2("small", { className: `node-code-status link-${problem.status}`, role: "status", children: problem.message })
+            ] }, `${link.path}:${i}`);
+          }) })
+        ] }) }) }) : shown === "decisions" ? /* @__PURE__ */ jsx2("div", { className: "node-content-pane", children: draft ? /* @__PURE__ */ jsx2("form", { id: "node-content-form", className: "node-content-edit", onSubmit: (e) => {
+          e.preventDefault();
+          save2();
+        }, children: /* @__PURE__ */ jsx2("div", { className: "node-content-fields", children: /* @__PURE__ */ jsxs2("label", { className: "node-content-source", children: [
+          "Decisions (Markdown)",
+          /* @__PURE__ */ jsx2("textarea", { "aria-label": "Decision log (Markdown)", value: draft.decisions, maxLength: LIMITS.body, spellCheck: false, placeholder: "Why this choice? For example: Lambda over Fargate, ECS or Kubernetes.\n\n## Considered\n- Fargate: ...\n- ECS: ...", onChange: (e) => change({ decisions: e.target.value }) })
+        ] }) }) }) : /* @__PURE__ */ jsxs2("div", { className: "node-content-view", role: "region", "aria-label": "Decision log", children: [
+          renderMarkdown(decisions),
+          !decisions && /* @__PURE__ */ jsx2("p", { className: "node-content-empty", children: "No decisions recorded. This is optional: choose Edit content to note why this was chosen and what else was considered." })
+        ] }) }) : /* @__PURE__ */ jsx2("div", { className: "node-content-pane", children: draft ? /* @__PURE__ */ jsx2("form", { id: "node-content-form", className: "node-content-edit", onSubmit: (e) => {
+          e.preventDefault();
+          save2();
+        }, children: /* @__PURE__ */ jsxs2("div", { className: "node-content-fields", children: [
+          /* @__PURE__ */ jsxs2("label", { children: [
+            "Title",
+            /* @__PURE__ */ jsx2("input", { ref: titleRef, "aria-label": "Full node title", value: draft.title, maxLength: LIMITS.title, required: true, onChange: (e) => change({ title: e.target.value }) })
+          ] }),
+          /* @__PURE__ */ jsxs2("label", { className: "node-content-source", children: [
+            "Markdown",
+            /* @__PURE__ */ jsx2("textarea", { "aria-label": "Full node content (Markdown)", value: draft.body, maxLength: LIMITS.body, spellCheck: false, onChange: (e) => change({ body: e.target.value }) })
+          ] })
+        ] }) }) : /* @__PURE__ */ jsxs2("div", { className: "node-content-view", role: "region", "aria-label": "Full Markdown content", children: [
+          renderMarkdown(node.body),
+          !node.body && /* @__PURE__ */ jsx2("p", { className: "node-content-empty", children: "This node has no content yet. Choose Edit content to add Markdown." })
+        ] }) }) }),
+        pending && renderConfirm({
+          title: "Discard node edits?",
+          body: "Your unsaved title, Markdown and decision changes will be discarded.",
+          confirmLabel: "Discard edits",
+          onCancel: keepEditing,
+          onConfirm: discardAndContinue
+        })
+      ]
+    }
+  );
+}
+export {
+  Checklist,
+  NodePanel,
+  bindNodePanelAutosave,
+  createNodePanelStore
+};
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store.ts","../src/NodePanel.tsx","../src/Checklist.tsx"],"sourcesContent":["import { createStore } from 'zustand/vanilla'\nimport type { StoreApi } from 'zustand/vanilla'\nimport type { DiagramController } from '@glyphlab/diagram-core'\n\ninterface Draft {\n  title: string\n  body: string\n  decisions: string\n  baseTitle: string\n  baseBody: string\n  baseDecisions: string\n}\n\nconst isDirty = (d: Draft) => d.title !== d.baseTitle || d.body !== d.baseBody || d.decisions !== d.baseDecisions\n\ntype Latest = { title: string; body: string; decisions: string }\n\nexport type NodePanelTab = 'content' | 'decisions' | 'systems' | 'code'\n\nexport interface NodePanelState {\n  nodeId: string | null\n  // The section of the panel that shows.\n  tab: NodePanelTab\n  setTab: (tab: NodePanelTab) => void\n  draft: Draft | null\n  pending: { nodeId: string | null } | null\n  error: string\n  conflict: Latest | null\n  open: (id: string, tab?: NodePanelTab) => void\n  close: () => void\n  discardAndContinue: () => void\n  keepEditing: () => void\n  edit: () => void\n  change: (patch: Partial<Pick<Draft, 'title' | 'body' | 'decisions'>>) => void\n  cancel: () => void\n  save: (options?: { stayEditing?: boolean; overwrite?: boolean }) => boolean\n  takeLatest: () => void\n}\n\nexport type NodePanelStore = StoreApi<NodePanelState> & { dispose: () => void }\n\nconst CLOSED = { nodeId: null, draft: null, pending: null, error: '', conflict: null } as const\nconst EDITED_ELSEWHERE = 'This node was edited elsewhere. Autosave is paused. Select Current or Disk changed; no changes will be merged.'\n\n// The state of the node panel for one controller: which node is open, the draft being edited, and what happens when the node changes\n// under it. One per diagram, like a DiagramInstance. A change the person makes is one `controller.apply({ source: 'user' })`.\nexport function createNodePanelStore(controller: DiagramController): NodePanelStore {\n  let applyingContent = false\n  const nodeOf = (id: string | null) => (id ? controller.stores.nodes.getState().byId[id] : undefined)\n\n  const store = createStore<NodePanelState>()((set, get) => {\n    const request = (nodeId: string | null) => {\n      const { draft } = get()\n      if (draft && isDirty(draft)) {\n        set({ pending: { nodeId } })\n      } else {\n        set({ nodeId, tab: 'content', draft: null, pending: null, error: '', conflict: null })\n      }\n    }\n    return {\n      nodeId: null,\n      tab: 'content',\n      setTab: (tab) => set({ tab }),\n      draft: null,\n      pending: null,\n      error: '',\n      conflict: null,\n      open: (id, tab) => {\n        if (get().nodeId === id) {\n          if (tab) set({ tab })\n          return\n        }\n        if (!nodeOf(id)) {\n          set({ error: 'That node no longer exists.' })\n          return\n        }\n        request(id)\n        if (tab && get().nodeId === id) set({ tab })\n      },\n      close: () => request(null),\n      discardAndContinue: () => {\n        const { pending } = get()\n        if (pending) set({ nodeId: pending.nodeId, tab: 'content', draft: null, pending: null, error: '', conflict: null })\n      },\n      keepEditing: () => set({ pending: null }),\n      edit: () => {\n        const node = nodeOf(get().nodeId)\n        if (!node) {\n          set({ error: 'That node no longer exists.' })\n          return\n        }\n        const decisions = node.decisions ?? ''\n        set({ draft: { title: node.title, body: node.body, decisions, baseTitle: node.title, baseBody: node.body, baseDecisions: decisions }, error: '', conflict: null })\n      },\n      change: (patch) => set((s) => s.draft ? { draft: { ...s.draft, ...patch }, error: '' } : s),\n      cancel: () => set({ draft: null, error: '', conflict: null }),\n      takeLatest: () => get().edit(),\n      save: ({ stayEditing = false, overwrite = false } = {}) => {\n        const { nodeId, draft, conflict } = get()\n        if (!nodeId || !draft) {\n          set({ error: 'Open a node in edit mode before saving.' })\n          return false\n        }\n        if (conflict && !overwrite) return false\n        const node = nodeOf(nodeId)\n        if (!node) {\n          set({ error: 'That node no longer exists.' })\n          return false\n        }\n        const title = draft.title.trim()\n        if (!title) {\n          set({ error: 'A node title cannot be empty.' })\n          return false\n        }\n        const expectedTitle = overwrite && conflict ? conflict.title : draft.baseTitle\n        const expectedBody = overwrite && conflict ? conflict.body : draft.baseBody\n        const expectedDecisions = overwrite && conflict ? conflict.decisions : draft.baseDecisions\n        if (node.title !== expectedTitle || node.body !== expectedBody || (node.decisions ?? '') !== expectedDecisions) {\n          set({ conflict: { title: node.title, body: node.body, decisions: node.decisions ?? '' }, error: EDITED_ELSEWHERE })\n          return false\n        }\n        const patch: { title?: string; body?: string; decisions?: string } = {}\n        if (title !== node.title) patch.title = title\n        if (draft.body !== node.body) patch.body = draft.body\n        if (draft.decisions !== (node.decisions ?? '')) patch.decisions = draft.decisions\n        if (Object.keys(patch).length > 0) {\n          applyingContent = true\n          let result: ReturnType<typeof controller.apply>\n          try {\n            result = controller.apply({ ops: [{ op: 'updateNode', id: nodeId, patch }], summary: `Edit node \"${node.title}\"`, source: 'user' })\n          } finally {\n            applyingContent = false\n          }\n          if (!result.ok) {\n            set({ error: result.message })\n            return false\n          }\n        }\n        set({ draft: stayEditing ? { title, body: draft.body, decisions: draft.decisions, baseTitle: title, baseBody: draft.body, baseDecisions: draft.decisions } : null, error: '', conflict: null })\n        return true\n      },\n    }\n  })\n\n  const offLoad = controller.onLoad(() => store.setState({ ...CLOSED }))\n  const offChange = controller.onChange(() => {\n    if (applyingContent) return\n    const { nodeId, draft, conflict } = store.getState()\n    const node = nodeOf(nodeId)\n    if (nodeId && !node) {\n      store.setState({ ...CLOSED })\n    } else if (node && draft && !conflict && (node.title !== draft.baseTitle || node.body !== draft.baseBody || (node.decisions ?? '') !== draft.baseDecisions)) {\n      if (!isDirty(draft)) {\n        store.getState().edit()\n      } else {\n        store.setState({ conflict: { title: node.title, body: node.body, decisions: node.decisions ?? '' }, error: EDITED_ELSEWHERE })\n      }\n    }\n  })\n  return Object.assign(store, { dispose: () => { offLoad(); offChange() } })\n}\n\n// Saves the draft a moment after the last change, unless something needs the person's attention first. Returns the function that stops it.\nexport function bindNodePanelAutosave(store: NodePanelStore, delay = 750) {\n  let timer: ReturnType<typeof setTimeout> | undefined\n  const sync = () => {\n    clearTimeout(timer)\n    const { draft, pending, error, conflict } = store.getState()\n    if (!draft || pending || error || conflict || !isDirty(draft)) return\n    timer = setTimeout(() => store.getState().save({ stayEditing: true }), delay)\n  }\n  const unsubscribe = store.subscribe(sync)\n  sync()\n  return () => { clearTimeout(timer); unsubscribe() }\n}\n","import { useEffect, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { useStore } from 'zustand'\nimport { LIMITS } from '@glyphlab/diagram-core'\nimport type { DiagramController, NodeDef } from '@glyphlab/diagram-core'\nimport { Checklist } from './Checklist'\nimport { bindNodePanelAutosave } from './store'\nimport type { NodePanelStore } from './store'\n\nexport type NodeLink = NonNullable<NodeDef['links']>[number]\n\nexport interface DiscardConfirm {\n  title: string\n  body: string\n  confirmLabel: string\n  onConfirm: () => void\n  onCancel: () => void\n}\n\nexport interface NodePanelCode {\n  // Shows the code a link points at (opens a file, a viewer, a URL: the host decides).\n  reveal: (link: NodeLink) => void\n  // What a check of the links found about one of them, when the host runs such a check.\n  problem?: (nodeId: string, index: number) => { status: string; message: string } | undefined\n  // Shows a refresh button for the check, and calls this when it is pressed.\n  onRefresh?: () => void\n  checking?: boolean\n}\n\nexport interface NodePanelProps {\n  controller: DiagramController\n  store: NodePanelStore\n  // Draws Markdown; plain text without it.\n  renderMarkdown?: (source: string) => ReactNode\n  // The Code tab. Without it the tab lists the links and does nothing when one is pressed.\n  code?: NodePanelCode\n  // Whether the Systems design tab is there. On unless false.\n  systems?: boolean\n  // See Checklist.\n  legacyAnswers?: (nodeId: string) => Record<string, string> | null\n  // How tall the panel is, and the handle that resizes it (the panel does not know about layout).\n  height?: number\n  resizer?: ReactNode\n  // The question asked before edits are thrown away; a plain dialog without it.\n  renderConfirm?: (confirm: DiscardConfirm) => ReactNode\n}\n\nconst PencilIcon = () => (\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\" />\n  </svg>\n)\nconst CloseIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden=\"true\">\n    <path d=\"M6 6l12 12M18 6 6 18\" />\n  </svg>\n)\n\nconst plain = (source: string) => <p className=\"node-panel-plain\">{source}</p>\n\nconst DEFAULT_CONFIRM = (c: DiscardConfirm) => (\n  <div className=\"node-panel-dialog\" role=\"alertdialog\" aria-modal=\"true\" aria-label={c.title}>\n    <div className=\"node-panel-dialog-box\">\n      <h3>{c.title}</h3>\n      <p>{c.body}</p>\n      <div>\n        <button className=\"node-panel-btn\" type=\"button\" onClick={c.onCancel}>Keep editing</button>\n        <button className=\"node-panel-btn primary\" type=\"button\" onClick={c.onConfirm}>{c.confirmLabel}</button>\n      </div>\n    </div>\n  </div>\n)\n\n// The node panel: the open node's content, decision log, code links and Systems design answers, with editing, autosave and conflict handling.\n// Open a node with `store.getState().open(id, tab?)` (the canvas's `openNodeContent` slot is the usual caller); it shows nothing when none is open.\nexport function NodePanel(props: NodePanelProps) {\n  const { controller, store } = props\n  useEffect(() => bindNodePanelAutosave(store), [store])\n  const nodeId = useStore(store, (s) => s.nodeId)\n  const node = useStore(controller.stores.nodes, (s) => (nodeId ? s.byId[nodeId] : undefined))\n  if (!node) return null\n  return <Content key={node.id} {...props} node={node} />\n}\n\nfunction Content({ controller, store, node, renderMarkdown = plain, code, systems = true, legacyAnswers, height, resizer, renderConfirm = DEFAULT_CONFIRM }: NodePanelProps & { node: NodeDef }) {\n  const { draft, pending, error, conflict, tab, close, discardAndContinue, keepEditing, edit, change, cancel, save, takeLatest, setTab } = useStore(store)\n  const nodeId = node.id\n  const decisions = node.decisions ?? ''\n  const links = node.links ?? []\n  const ref = useRef<HTMLElement>(null)\n  const titleRef = useRef<HTMLInputElement>(null)\n  const editing = draft !== null\n  const dirty = draft !== null && (draft.title !== draft.baseTitle || draft.body !== draft.baseBody || draft.decisions !== draft.baseDecisions)\n  const shown = tab === 'systems' && !systems ? 'content' : tab\n  useEffect(() => {\n    ref.current?.focus()\n    return () => {\n      document.querySelector<HTMLButtonElement>(`[data-node-id=\"${CSS.escape(nodeId)}\"] .node-expand`)?.focus({ preventScroll: true })\n    }\n  }, [nodeId])\n  useEffect(() => {\n    if (editing) titleRef.current?.focus()\n  }, [editing])\n  useEffect(() => {\n    if (!dirty) return\n    const warn = (e: BeforeUnloadEvent) => e.preventDefault()\n    window.addEventListener('beforeunload', warn)\n    return () => window.removeEventListener('beforeunload', warn)\n  }, [dirty])\n  const tabButton = (id: typeof tab, label: ReactNode) => (\n    <button type=\"button\" role=\"tab\" id={`node-tab-${id}`} aria-selected={shown === id} aria-controls=\"node-panel\" onClick={() => setTab(id)}>{label}</button>\n  )\n  return (\n    <section ref={ref} className=\"node-content-drawer\" aria-label=\"Node content\" tabIndex={-1} style={height === undefined ? undefined : { height }}\n      onKeyDown={(e) => {\n        if (e.key === 'Escape') { e.stopPropagation(); close() }\n        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && draft) { e.preventDefault(); save() }\n      }}>\n      {resizer}\n      <header className=\"node-content-head\">\n        <h2>{node.title}</h2>\n        <span role=\"status\">{draft ? conflict ? 'Autosave paused' : error ? 'Unsaved' : dirty ? 'Autosave pending' : 'Saved' : 'Node content'}</span>\n        {draft ? <>\n          <button className=\"node-panel-btn\" type=\"button\" onClick={cancel} disabled={!!conflict}>Cancel editing</button>\n          <button className=\"node-panel-btn primary\" type=\"submit\" form=\"node-content-form\" disabled={!!conflict}>Save node</button>\n        </> : <button className=\"node-panel-btn\" type=\"button\" onClick={edit}><PencilIcon /> Edit content</button>}\n        <button className=\"node-panel-icon-btn\" type=\"button\" aria-label=\"Close node content\" onClick={close}><CloseIcon /></button>\n      </header>\n      {error && <p className=\"node-content-error\" role=\"alert\">{error}</p>}\n      {conflict && <div className=\"node-content-error\" role=\"group\" aria-label=\"Resolve node conflict\">\n        <span>The saved design content changed. Current keeps your draft; Disk changed loads the latest saved content.</span>\n        <button className=\"node-panel-btn\" type=\"button\" onClick={() => save({ overwrite: true, stayEditing: true })}>Current</button>\n        <button className=\"node-panel-btn\" type=\"button\" onClick={takeLatest}>Disk changed</button>\n      </div>}\n      <div className=\"node-content-tabs\" role=\"tablist\" aria-label=\"Node content sections\">\n        {tabButton('content', 'Content')}\n        {tabButton('decisions', <>Decisions{(draft ? draft.decisions : decisions).trim() && <span className=\"node-tab-dot\" role=\"img\" aria-label=\"has a decision log\" />}</>)}\n        {tabButton('code', <>Code{links.length > 0 && <span className=\"node-tab-dot\" role=\"img\" aria-label={`${links.length} code links`} />}</>)}\n        {systems && tabButton('systems', 'Systems design')}\n      </div>\n      <div className=\"node-content-main\" id=\"node-panel\" role=\"tabpanel\" aria-labelledby={`node-tab-${shown}`}>\n        {shown === 'systems' ? (\n          <Checklist controller={controller} nodeId={nodeId} legacyAnswers={legacyAnswers} />\n        ) : shown === 'code' ? (\n          <div className=\"node-content-pane\">\n            <div className=\"node-content-view\" role=\"region\" aria-label=\"Code links\">\n              {links.length === 0 ? <p className=\"node-content-empty\">No code linked. Ask the assistant to link the files and lines this node describes.</p> : (<>\n                {code?.onRefresh && <p className=\"node-code-refresh\">\n                  <button type=\"button\" className=\"node-panel-btn\" disabled={code.checking} onClick={code.onRefresh}>{code.checking ? 'Checking…' : 'Refresh'}</button>\n                  <small>Compares each link with the code now. It only reports; it changes no link.</small>\n                </p>}\n                <ul className=\"node-code-links\">\n                  {links.map((link, i) => {\n                    const problem = code?.problem?.(nodeId, i)\n                    return (\n                      <li key={`${link.path}:${i}`}>\n                        <button type=\"button\" className=\"node-panel-btn\" onClick={() => code?.reveal(link)}>\n                          {link.repo ? `${link.repo}:` : ''}{link.path}{link.lines ? `:${link.lines[0] === link.lines[1] ? link.lines[0] : `${link.lines[0]}-${link.lines[1]}`}` : ''}\n                        </button>\n                        {link.symbol && <code>{link.symbol}</code>}\n                        {link.hash && <small>hash {link.hash}</small>}\n                        {problem && <small className={`node-code-status link-${problem.status}`} role=\"status\">{problem.message}</small>}\n                      </li>\n                    )\n                  })}\n                </ul>\n              </>)}\n            </div>\n          </div>\n        ) : shown === 'decisions' ? (\n          <div className=\"node-content-pane\">\n            {draft ? (\n              <form id=\"node-content-form\" className=\"node-content-edit\" onSubmit={(e) => { e.preventDefault(); save() }}>\n                <div className=\"node-content-fields\">\n                  <label className=\"node-content-source\">Decisions (Markdown)<textarea aria-label=\"Decision log (Markdown)\" value={draft.decisions} maxLength={LIMITS.body} spellCheck={false} placeholder={'Why this choice? For example: Lambda over Fargate, ECS or Kubernetes.\\n\\n## Considered\\n- Fargate: ...\\n- ECS: ...'} onChange={(e) => change({ decisions: e.target.value })} /></label>\n                </div>\n              </form>\n            ) : <div className=\"node-content-view\" role=\"region\" aria-label=\"Decision log\">\n              {renderMarkdown(decisions)}\n              {!decisions && <p className=\"node-content-empty\">No decisions recorded. This is optional: choose Edit content to note why this was chosen and what else was considered.</p>}\n            </div>}\n          </div>\n        ) : (\n          <div className=\"node-content-pane\">\n            {draft ? (\n              <form id=\"node-content-form\" className=\"node-content-edit\" onSubmit={(e) => { e.preventDefault(); save() }}>\n                <div className=\"node-content-fields\">\n                  <label>Title<input ref={titleRef} aria-label=\"Full node title\" value={draft.title} maxLength={LIMITS.title} required onChange={(e) => change({ title: e.target.value })} /></label>\n                  <label className=\"node-content-source\">Markdown<textarea aria-label=\"Full node content (Markdown)\" value={draft.body} maxLength={LIMITS.body} spellCheck={false} onChange={(e) => change({ body: e.target.value })} /></label>\n                </div>\n              </form>\n            ) : <div className=\"node-content-view\" role=\"region\" aria-label=\"Full Markdown content\">\n              {renderMarkdown(node.body)}\n              {!node.body && <p className=\"node-content-empty\">This node has no content yet. Choose Edit content to add Markdown.</p>}\n            </div>}\n          </div>\n        )}\n      </div>\n      {pending && renderConfirm({\n        title: 'Discard node edits?',\n        body: 'Your unsaved title, Markdown and decision changes will be discarded.',\n        confirmLabel: 'Discard edits',\n        onCancel: keepEditing,\n        onConfirm: discardAndContinue,\n      })}\n    </section>\n  )\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { useStore } from 'zustand'\nimport { CHECKLIST_ANSWER_MAX, CHECKLIST_TOTAL, DESIGN_CHECKLIST } from '@glyphlab/diagram-core'\nimport type { DiagramController } from '@glyphlab/diagram-core'\n\n// The groups in two columns, in order: the first column takes groups until it holds about half of the questions.\nconst columns = (() => {\n  const left: typeof DESIGN_CHECKLIST = []\n  let count = 0\n  for (const group of DESIGN_CHECKLIST) {\n    if (count < CHECKLIST_TOTAL / 2 - 1) { left.push(group); count += group.items.length }\n  }\n  return [left, DESIGN_CHECKLIST.filter((g) => !left.includes(g))]\n})()\n\n// The answers are part of the node (and so of the design). A change is made with the same operation an agent uses, so it can be undone\n// and the agent sees it.\nconst save = (controller: DiagramController, nodeId: string, title: string, answers: Record<string, string>) =>\n  controller.apply({ ops: [{ op: 'updateNode', id: nodeId, patch: { systemsDesign: answers } }], summary: `Edit Systems design of \"${title}\"`, source: 'user' })\n\nexport interface ChecklistProps {\n  controller: DiagramController\n  nodeId: string\n  // Answers a host kept elsewhere before they lived on the node: read once for a node that has none, then put on it.\n  legacyAnswers?: (nodeId: string) => Record<string, string> | null\n}\n\nexport function Checklist({ controller, nodeId, legacyAnswers }: ChecklistProps) {\n  const node = useStore(controller.stores.nodes, (s) => s.byId[nodeId])\n  const values = node?.systemsDesign\n  const done = Object.values(values ?? {}).filter((v) => v.trim()).length\n\n  useEffect(() => {\n    const current = controller.stores.nodes.getState().byId[nodeId]\n    if (!current || current.systemsDesign || !legacyAnswers) return\n    const legacy = legacyAnswers(nodeId)\n    if (legacy) save(controller, nodeId, current.title, legacy)\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [nodeId])\n\n  return (\n    <aside className=\"node-checklist\" aria-label=\"Systems design checklist\">\n      <h3>Systems design <span role=\"status\">{done}/{CHECKLIST_TOTAL} filled</span></h3>\n      <div className=\"node-checklist-columns\">\n        {columns.map((groups, column) => (\n          <div key={column} className=\"node-checklist-column\">\n            {groups.map((group) => (\n              <fieldset key={group.title}>\n                <legend>{group.title}</legend>\n                {group.items.map((item) => (\n                  <label key={item.id}>\n                    <strong>{item.label}</strong>\n                    <small>{item.question}</small>\n                    <Answer controller={controller} nodeId={nodeId} itemId={item.id} saved={values?.[item.id] ?? ''} />\n                  </label>\n                ))}\n              </fieldset>\n            ))}\n          </div>\n        ))}\n      </div>\n    </aside>\n  )\n}\n\n// One answer. It is typed into locally and saved a moment after the last key (or when the box is left), so typing is not one undo step\n// per letter. A change made elsewhere (an agent, an undo) shows up unless the person is in the middle of typing.\nfunction Answer({ controller, nodeId, itemId, saved }: { controller: DiagramController; nodeId: string; itemId: string; saved: string }) {\n  const [text, setText] = useState(saved)\n  const typing = useRef(false)\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const latest = useRef(text)\n\n  useEffect(() => {\n    if (!typing.current) {\n      setText(saved)\n      latest.current = saved\n    }\n  }, [saved])\n\n  const commit = () => {\n    clearTimeout(timer.current)\n    typing.current = false\n    const node = controller.stores.nodes.getState().byId[nodeId]\n    if (!node || latest.current === (node.systemsDesign?.[itemId] ?? '')) return\n    save(controller, nodeId, node.title, { [itemId]: latest.current })\n  }\n  // Leaving the tab or the node while a change is waiting saves it.\n  // oxlint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => { if (typing.current) commit() }, [])\n\n  return (\n    <input\n      type=\"text\"\n      value={text}\n      maxLength={CHECKLIST_ANSWER_MAX}\n      onChange={(e) => {\n        typing.current = true\n        latest.current = e.target.value\n        setText(e.target.value)\n        clearTimeout(timer.current)\n        timer.current = setTimeout(commit, 600)\n      }}\n      onBlur={commit}\n    />\n  )\n}\n"],"mappings":"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","names":["useEffect","useRef","useStore","jsx","jsxs","useEffect","useStore","save","useRef"]}

package/node-panel.css

@@ -0,0 +1,304 @@
+/* Styles for @glyphlab/node-panel-react. They read the canvas theme's variables: --bg, --surface, --surface-2, --border, --text, --muted, --accent, --mono. */
+.node-content-drawer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  min-height: 140px;
+  max-height: 80%;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+  outline: none;
+}
+
+.node-content-head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.node-content-head h2 {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.node-content-head > span,
+.node-content-empty {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.node-panel-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12.5px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.node-panel-btn.primary {
+  color: #fff;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.node-panel-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.node-panel-icon-btn {
+  display: inline-flex;
+  padding: 4px;
+  color: var(--muted);
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.node-panel-icon-btn:hover {
+  color: var(--text);
+  background: var(--surface-2);
+}
+
+.node-panel-plain {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.node-panel-dialog {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(0 0 0 / 0.35);
+}
+
+.node-panel-dialog-box {
+  max-width: 360px;
+  padding: 16px;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.node-panel-dialog-box h3 { margin: 0 0 8px; font-size: 14px; }
+.node-panel-dialog-box p { margin: 0 0 12px; font-size: 13px; }
+.node-panel-dialog-box div { display: flex; justify-content: flex-end; gap: 8px; }
+
+.node-content-view {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+  overflow-wrap: anywhere;
+}
+
+.node-content-view {
+  flex: 1;
+}
+
+.node-content-edit {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.node-content-fields {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  min-height: 0;
+  padding: 12px;
+}
+
+.node-content-fields label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 0;
+  font-size: 12px;
+}
+
+.node-content-source {
+  flex: 1;
+}
+
+.node-content-fields input,
+.node-content-fields textarea {
+  min-width: 0;
+  padding: 8px;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font: inherit;
+}
+
+.node-content-fields textarea {
+  flex: 1;
+  min-height: 40px;
+  resize: none;
+  font-family: var(--mono, monospace);
+}
+
+.node-content-error {
+  flex: none;
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--text);
+  background: var(--surface-2);
+}
+
+@media (max-width: 760px) {
+  .node-content-head > span {
+    display: none;
+  }
+}
+
+.node-content-main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.node-content-pane {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Its own tab: it takes the whole panel. */
+.node-checklist {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  padding: 12px 16px;
+  font-size: 12px;
+}
+
+.node-checklist h3 {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 8px;
+  font-size: 13px;
+}
+
+.node-checklist h3 span {
+  color: var(--muted);
+  font-weight: normal;
+}
+
+.node-checklist fieldset {
+  margin: 0 0 10px;
+  padding: 0;
+  border: 0;
+}
+
+.node-checklist legend {
+  padding: 0;
+  margin-bottom: 4px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 11px;
+}
+
+.node-checklist label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 0;
+}
+
+.node-checklist label input {
+  margin-top: 2px;
+  padding: 5px 6px;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font: inherit;
+}
+
+.node-checklist small {
+  color: var(--muted);
+}
+
+@media (max-width: 760px) {
+  .node-checklist {
+    display: none;
+  }
+}
+
+.node-content-tabs {
+  display: flex;
+  flex: none;
+  gap: 2px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.node-content-tabs button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+}
+
+.node-content-tabs button[aria-selected='true'] {
+  border-bottom-color: var(--accent);
+  color: var(--text);
+}
+
+.node-tab-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+/* One column when the panel is too narrow for two. */
+@media (max-width: 720px) {
+  .node-checklist-columns { grid-template-columns: minmax(0, 1fr); }
+}
+
+.node-checklist-columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+  gap: 0 32px;
+}
+
+.node-code-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.node-code-links li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.node-code-links small { opacity: 0.7; }

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@glyphlab/node-panel-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The node panel for a @glyphlab/diagram-core controller, in React: a node's Markdown content, decision log, code links and Systems design answers, with editing, autosave and conflict handling.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./node-panel.css": "./node-panel.css"
+  },
+  "files": [
+    "*.js",
+    "*.js.map",
+    "*.d.ts",
+    "*.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./node-panel.css"
+  ],
+  "peerDependencies": {
+    "@glyphlab/diagram-core": "^0.1.0",
+    "react": "^19",
+    "zustand": "^5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/subtubes-io/subtubes-editor.git",
+    "directory": "packages/node-panel-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "diagram",
+    "react",
+    "system-design",
+    "glyph"
+  ]
+}