@dooc-dev/dooc 0.0.0-stage → 0.0.2

package/dist/core/schema-graph-flow.js

@@ -0,0 +1,379 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Interactive UI for the schema graph (`schemath`), built on React Flow. Handles zoom / pan /
+// box drag & drop / expanded view / minimap. It starts from the same model and the same initial
+// layout as the static SVG (html.ts), so the picture stays continuous; without JS / before
+// mounting, the static SVG stays readable as-is (fallback).
+//
+// Positions and edge connections are decided by pure functions (layout / `schemaFlowEdges` in
+// schema-graph.ts); this file only maps them onto React Flow (= the SoT for geometry and
+// semantics isn't scattered into the UI lib side).
+// Styling is self-contained via inline styles + `var(--doc-*)` (no extra CSS on the consumer
+// side. React Flow's own stylesheet = the structure-only base.css is injected by the mount layer
+// (`flow-css.ts`) — colors come from the `--doc-*` the consumer injects, so React Flow's default
+// theme isn't loaded).
+import { applyNodeChanges, Background, BackgroundVariant, BaseEdge, ControlButton, Controls, Handle, MarkerType, MiniMap, Position, ReactFlow, ReactFlowProvider, useReactFlow, } from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { routeSchemaEdges, schemaFlowEdges, } from "./schema-graph.js";
+const STORE_PREFIX = "docs:sg:";
+const FRAME_PAD = 14;
+const FG = "var(--doc-fg, #000000)";
+const FG2 = "var(--doc-fg-2, #2a3140)";
+const FG3 = "var(--doc-fg-3, #5b6271)";
+const FG4 = "var(--doc-fg-4, #9099a8)";
+const BORDER = "var(--doc-border, #dde3eb)";
+const PANEL = "var(--doc-panel, #ffffff)";
+const ACCENT = "var(--doc-accent-2, #0277bd)";
+const ACCENT2 = "var(--doc-accent, #1b4994)";
+const MONO = "ui-monospace,SFMono-Regular,Menlo,Consolas,monospace";
+const readPositions = (uid) => {
+    try {
+        const raw = window.localStorage.getItem(`${STORE_PREFIX}${uid}`);
+        return raw == null ? {} : JSON.parse(raw);
+    }
+    catch {
+        return {};
+    }
+};
+const writePositions = (uid, positions) => {
+    try {
+        if (Object.keys(positions).length === 0) {
+            window.localStorage.removeItem(`${STORE_PREFIX}${uid}`);
+            return;
+        }
+        window.localStorage.setItem(`${STORE_PREFIX}${uid}`, JSON.stringify(positions));
+    }
+    catch {
+        // Keep interactions working even when storage can't be written (private mode etc.).
+    }
+};
+/** Draws the same obstacle-avoiding path as the static SVG in React Flow too. */
+const PathEdgeView = ({ id, data, style, markerEnd, interactionWidth, }) => (_jsx(BaseEdge, { id: id, path: data?.path ?? "", style: style, markerEnd: markerEnd, interactionWidth: interactionWidth }));
+const rowType = (kind) => ({
+    fontSize: 10.5,
+    color: kind === "pk" ? ACCENT : kind === "scalar" ? FG3 : ACCENT2,
+    whiteSpace: "nowrap",
+});
+// Table box (same structure as the static SVG box: header / field rows / note rows). Each fk row
+// gets a left/right pair of source handles; the edge picks one based on the target's position.
+const TableNodeView = ({ data, selected }) => {
+    const { box, dim } = data;
+    return (_jsxs("div", { style: {
+            width: box.w,
+            minHeight: box.h,
+            fontFamily: MONO,
+            background: PANEL,
+            border: `1px solid ${selected ? ACCENT : BORDER}`,
+            borderRadius: 10,
+            boxShadow: selected ? `0 0 0 1px ${ACCENT}` : "none",
+            opacity: dim ? 0.45 : 1,
+            overflow: "hidden",
+            cursor: "grab",
+        }, children: [_jsx("div", { style: {
+                    height: box.headerH,
+                    lineHeight: `${box.headerH}px`,
+                    padding: "0 11px",
+                    fontSize: 12.5,
+                    color: FG,
+                    background: `color-mix(in srgb, ${ACCENT} 10%, transparent)`,
+                    borderBottom: `1px solid ${BORDER}`,
+                }, children: box.name }), box.rows.map((row) => row.kind === "note" ? (_jsx("div", { style: {
+                    padding: "0 11px",
+                    fontSize: 10.5,
+                    lineHeight: "19px",
+                    color: FG4,
+                }, children: row.label }, `n:${row.label}`)) : (_jsxs("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    gap: 14,
+                    padding: "0 11px",
+                    lineHeight: "19px",
+                }, children: [_jsx("span", { style: { fontSize: 11.5, color: FG2, whiteSpace: "nowrap" }, children: row.label }), _jsx("span", { style: rowType(row.kind), children: row.type })] }, `f:${row.label}`))), box.rows
+                .filter((r) => r.fieldIndex != null && (r.kind === "fk" || r.kind === "fkList"))
+                .flatMap((r) => [
+                _jsx(Handle, { id: `f${r.fieldIndex}r`, type: "source", position: Position.Right, style: { top: r.dy, opacity: 0, width: 1, height: 1, minWidth: 1 }, isConnectable: false }, `sr${r.fieldIndex}`),
+                _jsx(Handle, { id: `f${r.fieldIndex}l`, type: "source", position: Position.Left, style: { top: r.dy, opacity: 0, width: 1, height: 1, minWidth: 1 }, isConnectable: false }, `sl${r.fieldIndex}`),
+            ]), _jsx(Handle, { id: "tl", type: "target", position: Position.Left, style: { top: box.headerH / 2, opacity: 0, width: 1, height: 1, minWidth: 1 }, isConnectable: false }), _jsx(Handle, { id: "tr", type: "target", position: Position.Right, style: { top: box.headerH / 2, opacity: 0, width: 1, height: 1, minWidth: 1 }, isConnectable: false })] }));
+};
+// Group frame (a labeled `###`). A background node that isn't interactive.
+const FrameNodeView = ({ data, width, height }) => (_jsxs("div", { style: { width, height, position: "relative", pointerEvents: "none" }, children: [_jsx("div", { style: {
+                position: "absolute",
+                inset: 0,
+                border: `1px dashed ${BORDER}`,
+                borderRadius: 14,
+                background: `color-mix(in srgb, ${FG} 3%, transparent)`,
+            } }), _jsx("div", { style: {
+                position: "absolute",
+                top: -18,
+                left: 4,
+                fontFamily: MONO,
+                fontSize: 11.5,
+                color: FG3,
+            }, children: data.label })] }));
+const nodeTypes = { sgTable: TableNodeView, sgFrame: FrameNodeView };
+const edgeTypes = { sgPath: PathEdgeView };
+// Icons for the extra Controls buttons (drawn as SVG, since font-dependent symbols render as
+// tofu in some environments).
+const IconExpand = () => (_jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M4 4h7v2H6v5H4V4zm9 0h7v7h-2V6h-5V4zM4 13h2v5h5v2H4v-7zm14 0h2v7h-7v-2h5v-5z" }) }));
+const IconShrink = () => (_jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M6 10h5V5H9v3H6v2zm7-5v5h5V8h-3V5h-2zM6 14v2h3v3h2v-5H6zm7 0v5h2v-3h3v-2h-5z" }) }));
+const IconReset = () => (_jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M12 5V2L7 6l5 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z" }) }));
+const IconSource = () => (_jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0 4.6-4.6-4.6-4.6L16 6l6 6-6 6z" }) }));
+const srcBtnStyle = {
+    font: "inherit",
+    fontSize: 11,
+    fontFamily: MONO,
+    color: FG3,
+    background: "transparent",
+    border: `1px solid ${BORDER}`,
+    borderRadius: 6,
+    padding: "2px 8px",
+    cursor: "pointer",
+};
+/**
+ * Viewer that shows the raw table DSL as-is (CodeBlock equivalent). Overlaid on the graph, it is
+ * only for reading / copying the source text (no editing = the graph never rewrites the DSL).
+ */
+const SourceView = ({ source, onClose }) => {
+    const [copied, setCopied] = useState(false);
+    const copy = useCallback(() => {
+        navigator.clipboard
+            ?.writeText(source)
+            .then(() => {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1200);
+        })
+            .catch(() => {
+            /* Ignore clipboard rejection (permission / non-secure context). */
+        });
+    }, [source]);
+    return (_jsxs("div", { style: {
+            position: "absolute",
+            inset: 0,
+            zIndex: 6,
+            background: PANEL,
+            display: "flex",
+            flexDirection: "column",
+        }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    padding: "6px 10px",
+                    borderBottom: `1px solid ${BORDER}`,
+                }, children: [_jsx("span", { style: { fontFamily: MONO, fontSize: 11, color: FG3 }, children: "table DSL" }), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", onClick: copy, style: srcBtnStyle, title: "copy", children: copied ? "copied" : "copy" }), _jsx("button", { type: "button", onClick: onClose, style: srcBtnStyle, title: "Back to graph (Esc)", children: "graph" })] }), _jsx("pre", { style: {
+                    margin: 0,
+                    flex: 1,
+                    overflow: "auto",
+                    padding: "12px 14px",
+                    fontFamily: MONO,
+                    fontSize: 12,
+                    lineHeight: 1.65,
+                    color: FG2,
+                    whiteSpace: "pre",
+                }, children: source })] }));
+};
+/** Refits each group frame to its members' bounding box (frames stay meaningful after drags). */
+const withFrames = (nodes, data) => {
+    const tables = nodes.filter((n) => n.type === "sgTable");
+    const byName = new Map(tables.map((n) => [n.id, n]));
+    return nodes.map((node) => {
+        if (node.type !== "sgFrame") {
+            return node;
+        }
+        const group = data.groups[Number(node.id.slice("frame:".length))];
+        const members = (group?.members ?? [])
+            .map((name) => byName.get(name))
+            .filter((n) => n != null);
+        if (group == null || members.length === 0) {
+            return node;
+        }
+        const b = members.reduce((acc, n) => ({
+            x1: Math.min(acc.x1, n.position.x),
+            y1: Math.min(acc.y1, n.position.y),
+            x2: Math.max(acc.x2, n.position.x + n.data.box.w),
+            y2: Math.max(acc.y2, n.position.y + n.data.box.h),
+        }), {
+            x1: Number.POSITIVE_INFINITY,
+            y1: Number.POSITIVE_INFINITY,
+            x2: Number.NEGATIVE_INFINITY,
+            y2: Number.NEGATIVE_INFINITY,
+        });
+        return {
+            ...node,
+            position: { x: b.x1 - FRAME_PAD, y: b.y1 - FRAME_PAD },
+            width: b.x2 - b.x1 + FRAME_PAD * 2,
+            height: b.y2 - b.y1 + FRAME_PAD * 2,
+        };
+    });
+};
+/** Initial nodes (frames → tables, so frames sit behind). Uses saved positions when present. */
+const initialNodes = (data, positions) => {
+    const frames = data.groups.map((g, i) => ({
+        id: `frame:${i}`,
+        type: "sgFrame",
+        position: { x: g.x, y: g.y },
+        width: g.w,
+        height: g.h,
+        data: { label: g.label },
+        draggable: false,
+        selectable: false,
+        focusable: false,
+        zIndex: -1,
+    }));
+    const tables = data.nodes.map((box) => {
+        const p = positions[box.name];
+        return {
+            id: box.name,
+            type: "sgTable",
+            position: p == null ? { x: box.x, y: box.y } : { x: p[0], y: p[1] },
+            data: { box, dim: false },
+        };
+    });
+    return withFrames([...frames, ...tables], data);
+};
+const FlowInner = ({ data, height }) => {
+    const { fitView } = useReactFlow();
+    // Fold changes in with applyNodeChanges to keep the dimensions React Flow measured
+    // (`measured`) (recreating nodes on every render leaves drag uninitialized = RF error #015).
+    const [nodes, setNodes] = useState(() => initialNodes(data, readPositions(data.uid)));
+    const [hover, setHover] = useState(null);
+    const [expanded, setExpanded] = useState(false);
+    const [showSource, setShowSource] = useState(false);
+    const onNodesChange = useCallback((changes) => {
+        setNodes((prev) => withFrames(applyNodeChanges(changes, prev), data));
+    }, [data]);
+    // Hover linkage (dimming unrelated boxes) swaps only `data` (keeps `measured` intact).
+    useEffect(() => {
+        setNodes((prev) => {
+            const related = new Set();
+            if (hover != null) {
+                related.add(hover);
+                for (const e of data.edges) {
+                    if (e.from === hover) {
+                        related.add(e.to);
+                    }
+                    if (e.to === hover) {
+                        related.add(e.from);
+                    }
+                }
+            }
+            return prev.map((node) => {
+                if (node.type !== "sgTable") {
+                    return node;
+                }
+                const dim = hover != null && !related.has(node.id);
+                return dim === node.data.dim ? node : { ...node, data: { ...node.data, dim } };
+            });
+        });
+    }, [hover, data.edges]);
+    const edges = useMemo(() => {
+        const tableNodes = nodes.filter((n) => n.type === "sgTable");
+        const placed = tableNodes.map((n) => ({
+            name: n.id,
+            index: n.data.box.index,
+            x: n.position.x,
+            y: n.position.y,
+            w: n.data.box.w,
+            h: n.data.box.h,
+            headerH: n.data.box.headerH,
+            rows: n.data.box.rows.map((row) => ({
+                y: n.position.y + row.dy,
+                fieldIndex: row.fieldIndex,
+            })),
+        }));
+        const paths = routeSchemaEdges(placed, data.edges);
+        return schemaFlowEdges(placed, data.edges).map((e, i) => {
+            const active = hover != null && (e.from === hover || e.to === hover);
+            return {
+                id: e.id,
+                source: e.from,
+                target: e.to,
+                sourceHandle: `f${e.fieldIndex}${e.sourceSide}`,
+                targetHandle: e.targetSide === "l" ? "tl" : "tr",
+                type: "sgPath",
+                data: { path: paths[i]?.d ?? "" },
+                markerEnd: {
+                    type: MarkerType.ArrowClosed,
+                    width: 14,
+                    height: 14,
+                    color: active ? ACCENT : FG3,
+                },
+                style: {
+                    stroke: active ? ACCENT : `color-mix(in srgb, ${FG} 30%, transparent)`,
+                    strokeWidth: active ? 1.8 : 1.2,
+                    strokeDasharray: e.list ? "5 4" : undefined,
+                    opacity: hover == null || active ? 1 : 0.12,
+                },
+                zIndex: active ? 1 : 0,
+            };
+        });
+    }, [nodes, data.edges, hover]);
+    // Save the rearrangement when a drag ends (localStorage, per graph uid).
+    const onNodeDragStop = useCallback(() => {
+        setNodes((prev) => {
+            const positions = {};
+            for (const node of prev) {
+                if (node.type === "sgTable") {
+                    positions[node.id] = [Math.round(node.position.x), Math.round(node.position.y)];
+                }
+            }
+            writePositions(data.uid, positions);
+            return prev;
+        });
+    }, [data.uid]);
+    // Clamp the fit-view zoom (fitting a wide graph as-is squashes the text, so don't shrink too
+    // far: aim for a size that is readable while fitting, and let the user pan / zoom the rest).
+    const fitOptions = useMemo(() => expanded
+        ? { padding: 0.04, minZoom: 0.3, maxZoom: 1.4, duration: 150 }
+        : { padding: 0.06, minZoom: 0.55, maxZoom: 1, duration: 150 }, [expanded]);
+    const reset = useCallback(() => {
+        writePositions(data.uid, {});
+        setNodes(initialNodes(data, {}));
+        window.setTimeout(() => fitView(fitOptions), 0);
+    }, [data, fitView, fitOptions]);
+    // Expanded view = full screen (Esc exits). If the source table is open, Esc closes it first.
+    useEffect(() => {
+        if (!expanded && !showSource) {
+            return;
+        }
+        const onKey = (ev) => {
+            if (ev.key !== "Escape") {
+                return;
+            }
+            if (showSource) {
+                setShowSource(false);
+                return;
+            }
+            setExpanded(false);
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [expanded, showSource]);
+    useEffect(() => {
+        // Re-fit the whole graph right after the viewport frame changes (expanded view waits a
+        // little for the layout to settle).
+        const t = window.setTimeout(() => fitView(fitOptions), expanded ? 60 : 20);
+        return () => window.clearTimeout(t);
+    }, [expanded, fitView, fitOptions]);
+    const wrapStyle = expanded
+        ? {
+            position: "fixed",
+            inset: 0,
+            zIndex: 9998,
+            background: "var(--doc-bg, #ffffff)",
+        }
+        : {
+            position: "relative",
+            width: "100%",
+            height: height ?? "min(62vh, 520px)",
+            border: `1px solid ${BORDER}`,
+            borderRadius: 10,
+            overflow: "hidden",
+        };
+    return (_jsxs("div", { style: wrapStyle, children: [showSource && data.source != null ? (_jsx(SourceView, { source: data.source, onClose: () => setShowSource(false) })) : null, _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesChange: onNodesChange, onNodeDragStop: onNodeDragStop, onNodeMouseEnter: (_, node) => setHover(node.type === "sgTable" ? node.id : null), onNodeMouseLeave: () => setHover(null), fitView: true, fitViewOptions: fitOptions, minZoom: 0.1, maxZoom: 4, nodesConnectable: false, edgesFocusable: false, proOptions: { hideAttribution: true }, style: { background: "transparent" }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 22, size: 1, color: FG4 }), _jsxs(Controls, { showInteractive: false, children: [_jsx(ControlButton, { onClick: () => setExpanded((v) => !v), title: expanded ? "Close expanded view (Esc)" : "Expand view", children: expanded ? _jsx(IconShrink, {}) : _jsx(IconExpand, {}) }), _jsx(ControlButton, { onClick: reset, title: "Reset layout", children: _jsx(IconReset, {}) }), data.source == null ? null : (_jsx(ControlButton, { onClick: () => setShowSource(true), title: "Show raw tables (DSL)", children: _jsx(IconSource, {}) }))] }), _jsx(MiniMap, { pannable: true, zoomable: true, nodeStrokeWidth: 2, bgColor: PANEL, maskColor: `color-mix(in srgb, ${FG} 8%, transparent)`, nodeColor: `color-mix(in srgb, ${FG} 22%, transparent)`, nodeStrokeColor: BORDER, style: {
+                            width: 150,
+                            height: 96,
+                            border: `1px solid ${BORDER}`,
+                            borderRadius: 6,
+                        } })] })] }));
+};
+/** Interactive UI for the schema graph (React Flow). Pass the static SVG's payload as-is. */
+export const SchemaGraphFlow = (props) => (_jsx(ReactFlowProvider, { children: _jsx(FlowInner, { ...props }) }));

package/dist/core/schema-graph-mount.d.ts

@@ -0,0 +1,9 @@
+/** Undoes a mount (unmount + restore the static SVG). */
+export type SchemaGraphDispose = () => void;
+/** Replaces schema graphs under root with interactive graphs (already-mounted ones are skipped). */
+export declare const mountSchemaGraphs: (root?: ParentNode) => SchemaGraphDispose;
+/**
+ * Watches root and also makes graphs inserted later (HMR body replacement / edit's live render)
+ * interactive. The returned function stops watching.
+ */
+export declare const watchSchemaGraphs: (root?: (ParentNode & Node) | Document) => SchemaGraphDispose;

package/dist/core/schema-graph-mount.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Mount layer that replaces the static SVG (output of `docHtml`) with an interactive React Flow
+// graph. The diagram is readable without JS, so this is progressive enhancement (only graphs
+// that mount successfully become interactive).
+// Two kinds of consumer: script tag (viewer etc. = the global bundle calls watch) and
+// React embed (the consumer's component calls mount). On either path, this layer injects the
+// React Flow stylesheet (`flow-css.ts`) — consumers aren't required to ship the CSS.
+import { createRoot } from "react-dom/client";
+import { injectSchemaGraphCss } from "./flow-css.js";
+import { SchemaGraphFlow } from "./schema-graph-flow.js";
+const MOUNTED = "sgMounted";
+const mountOne = (svg) => {
+    const payload = svg.dataset.sgLayout;
+    if (payload == null || svg.dataset[MOUNTED] === "1") {
+        return undefined;
+    }
+    let data;
+    try {
+        data = JSON.parse(payload);
+    }
+    catch {
+        return undefined;
+    }
+    if (data.nodes.length === 0) {
+        return undefined;
+    }
+    svg.dataset[MOUNTED] = "1";
+    // Without its CSS, React Flow loses absolute positioning (boxes fly out of the frame and
+    // Controls / MiniMap stack at the top), so ensure the stylesheet before hiding the static SVG.
+    injectSchemaGraphCss(svg.ownerDocument);
+    const host = svg.ownerDocument.createElement("div");
+    host.className = "doc-sg-flow";
+    svg.parentElement?.insertBefore(host, svg);
+    // Keep the static SVG in the DOM as a fallback (print / JS disabled); only hide it.
+    svg.style.display = "none";
+    let root = createRoot(host);
+    root.render(_jsx(SchemaGraphFlow, { data: data }));
+    return () => {
+        root?.unmount();
+        root = undefined;
+        host.remove();
+        svg.style.removeProperty("display");
+        delete svg.dataset[MOUNTED];
+    };
+};
+/** Replaces schema graphs under root with interactive graphs (already-mounted ones are skipped). */
+export const mountSchemaGraphs = (root = document) => {
+    const disposers = [];
+    for (const svg of root.querySelectorAll("svg[data-sg-layout]")) {
+        const dispose = mountOne(svg);
+        if (dispose != null) {
+            disposers.push(dispose);
+        }
+    }
+    return () => {
+        for (const dispose of disposers) {
+            dispose();
+        }
+    };
+};
+/**
+ * Watches root and also makes graphs inserted later (HMR body replacement / edit's live render)
+ * interactive. The returned function stops watching.
+ */
+export const watchSchemaGraphs = (root = document) => {
+    const mounted = new Map();
+    const mount = (node) => {
+        const svgs = [...node.querySelectorAll("svg[data-sg-layout]")];
+        if (node instanceof SVGSVGElement && node.matches("svg[data-sg-layout]")) {
+            svgs.unshift(node);
+        }
+        for (const svg of svgs) {
+            const dispose = mountOne(svg);
+            if (dispose)
+                mounted.set(svg, dispose);
+        }
+    };
+    mount(root);
+    const observer = new MutationObserver((records) => {
+        // Look only at added subtrees instead of scanning the whole document on every keystroke.
+        for (const [svg, dispose] of mounted) {
+            if (!root.contains(svg)) {
+                dispose();
+                mounted.delete(svg);
+            }
+        }
+        for (const record of records) {
+            for (const node of record.addedNodes) {
+                if (node instanceof Element && root.contains(node))
+                    mount(node);
+            }
+        }
+    });
+    observer.observe(root instanceof Document ? (root.body ?? root) : root, {
+        childList: true,
+        subtree: true,
+    });
+    return () => {
+        observer.disconnect();
+        for (const dispose of mounted.values()) {
+            dispose();
+        }
+        mounted.clear();
+    };
+};