@dooc-dev/dooc 0.0.0-stage → 0.0.2

package/dist/core/files.d.ts

@@ -0,0 +1,15 @@
+export interface FileLayout {
+    defaultLayout: boolean;
+    documents: Record<string, string>;
+    order: string[];
+    icons?: Record<string, string>;
+}
+export declare const MAX_FILE_UPLOAD_BYTES: number;
+export declare const localFile: (value: unknown) => value is string;
+export declare const isDocumentFileName: (value: unknown) => value is string;
+export declare const suggestDocFileName: (title: string) => string;
+export declare const fileExtension: (file: string) => string;
+export declare const defaultFilePath: (file: string) => string;
+export declare const docFile: (id: string, layout?: FileLayout) => string;
+export declare const parseFileLayout: (value: unknown) => FileLayout;
+export declare const docIconFile: (id: string, layout?: FileLayout) => string;

package/dist/core/files.js

@@ -0,0 +1,59 @@
+export const MAX_FILE_UPLOAD_BYTES = 64 * 1024 * 1024;
+export const localFile = (value) => typeof value === "string" &&
+    value.length > 0 &&
+    !/[\\:?#]/.test(value) &&
+    [...value].every((char) => char.charCodeAt(0) >= 32) &&
+    value.split("/").every((part) => !!part && !part.startsWith("."));
+export const isDocumentFileName = (value) => localFile(value) && !value.includes("/") && value.endsWith(".md");
+export const suggestDocFileName = (title) => {
+    const name = [...title]
+        .filter((char) => char.charCodeAt(0) >= 32)
+        .join("")
+        .replace(/[\\/:?#]+/g, "-")
+        .trim()
+        .replace(/^\.+/, "");
+    return name ? (name.endsWith(".md") ? name : `${name}.md`) : "";
+};
+export const fileExtension = (file) => {
+    const name = file.split("/").pop() ?? file;
+    return name.includes(".") ? name.slice(name.lastIndexOf(".") + 1).toLowerCase() : "other";
+};
+export const defaultFilePath = (file) => `files/${fileExtension(file)}/${file.split("/").pop()}`;
+export const docFile = (id, layout) => layout && Object.hasOwn(layout.documents, id)
+    ? layout.documents[id]
+    : `content/${id}.md`;
+export const parseFileLayout = (value) => {
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        throw new Error("files must be an object");
+    const v = value;
+    if (Object.keys(v).some((key) => !["defaultLayout", "documents", "order", "icons"].includes(key)) ||
+        (v.defaultLayout !== undefined && typeof v.defaultLayout !== "boolean"))
+        throw new Error("Invalid file layout");
+    const documents = v.documents ?? {};
+    const order = v.order ?? [];
+    const icons = v.icons;
+    if (icons !== undefined &&
+        (!icons ||
+            typeof icons !== "object" ||
+            Array.isArray(icons) ||
+            Object.entries(icons).some(([id, file]) => !/^[a-z0-9][a-z0-9-]*$/.test(id) || !localFile(file) || !file.endsWith(".svg"))))
+        throw new Error("Invalid icon paths");
+    if (!documents ||
+        typeof documents !== "object" ||
+        Array.isArray(documents) ||
+        Object.entries(documents).some(([id, file]) => !/^[a-z0-9][a-z0-9-]*$/.test(id) || !localFile(file) || !file.endsWith(".md")) ||
+        new Set(Object.values(documents)).size !== Object.keys(documents).length ||
+        !Array.isArray(order) ||
+        order.some((file) => !localFile(file)) ||
+        new Set(order).size !== order.length)
+        throw new Error("Invalid file paths or order");
+    return {
+        defaultLayout: v.defaultLayout !== false,
+        documents: documents,
+        order,
+        ...(icons ? { icons: icons } : {}),
+    };
+};
+export const docIconFile = (id, layout) => layout?.icons && Object.hasOwn(layout.icons, id)
+    ? layout.icons[id]
+    : `icons/${id}.svg`;

package/dist/core/flow-base-css.generated.d.ts

@@ -0,0 +1 @@
+export declare const XYFLOW_BASE_CSS = "/* this will be exported as base.css and can be used for a basic styling */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-border-default: 1px solid #bbb;\n  --xy-node-border-selected-default: 1px solid #555;\n\n  --xy-handle-background-color-default: #333;\n\n  --xy-selection-background-color-default: rgba(150, 150, 180, 0.1);\n  --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #555;\n  --xy-background-pattern-lines-color-default: #333;\n  --xy-background-pattern-cross-color-default: #333;\n  --xy-node-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n  touch-action: none;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n/* Arrowhead marker styles - use CSS custom properties as default */\n.react-flow__arrowhead polyline {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__arrowhead polyline.arrowclosed {\n  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__pane.selection .react-flow__panel {\n  pointer-events: none;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  color: var(--xy-node-color, var(--xy-node-color-default));\n}\n.react-flow__node-input.selected,\n  .react-flow__node-input:focus,\n  .react-flow__node-input:focus-visible,\n  .react-flow__node-default.selected,\n  .react-flow__node-default:focus,\n  .react-flow__node-default:focus-visible,\n  .react-flow__node-output.selected,\n  .react-flow__node-output:focus,\n  .react-flow__node-output:focus-visible,\n  .react-flow__node-group.selected,\n  .react-flow__node-group:focus,\n  .react-flow__node-group:focus-visible {\n    outline: none;\n    border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));\n  }\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n";

package/dist/core/flow-base-css.generated.js

@@ -0,0 +1,4 @@
+// Generated — do not edit by hand (`pnpm run build:css` = build-flow-css.ts
+// copies it from @xyflow/react/dist/base.css). A structure-only stylesheet; colors come from
+// `--doc-*` injected by the consumer (React Flow's default theme = style.css is not included).
+export const XYFLOW_BASE_CSS = "/* this will be exported as base.css and can be used for a basic styling */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-border-default: 1px solid #bbb;\n  --xy-node-border-selected-default: 1px solid #555;\n\n  --xy-handle-background-color-default: #333;\n\n  --xy-selection-background-color-default: rgba(150, 150, 180, 0.1);\n  --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #555;\n  --xy-background-pattern-lines-color-default: #333;\n  --xy-background-pattern-cross-color-default: #333;\n  --xy-node-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n  touch-action: none;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n/* Arrowhead marker styles - use CSS custom properties as default */\n.react-flow__arrowhead polyline {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__arrowhead polyline.arrowclosed {\n  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__pane.selection .react-flow__panel {\n  pointer-events: none;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  color: var(--xy-node-color, var(--xy-node-color-default));\n}\n.react-flow__node-input.selected,\n  .react-flow__node-input:focus,\n  .react-flow__node-input:focus-visible,\n  .react-flow__node-default.selected,\n  .react-flow__node-default:focus,\n  .react-flow__node-default:focus-visible,\n  .react-flow__node-output.selected,\n  .react-flow__node-output:focus,\n  .react-flow__node-output:focus-visible,\n  .react-flow__node-group.selected,\n  .react-flow__node-group:focus,\n  .react-flow__node-group:focus-visible {\n    outline: none;\n    border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));\n  }\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n";

package/dist/core/flow-css.d.ts

@@ -0,0 +1,9 @@
+export declare const FLOW_STYLE_ID = "doc-sg-flow-css";
+/** Full text of the injected stylesheet (base.css + extra rules that map onto `--doc-*`). */
+export declare const SCHEMA_GRAPH_FLOW_CSS = "/* this will be exported as base.css and can be used for a basic styling */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-border-default: 1px solid #bbb;\n  --xy-node-border-selected-default: 1px solid #555;\n\n  --xy-handle-background-color-default: #333;\n\n  --xy-selection-background-color-default: rgba(150, 150, 180, 0.1);\n  --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #555;\n  --xy-background-pattern-lines-color-default: #333;\n  --xy-background-pattern-cross-color-default: #333;\n  --xy-node-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n  touch-action: none;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n/* Arrowhead marker styles - use CSS custom properties as default */\n.react-flow__arrowhead polyline {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__arrowhead polyline.arrowclosed {\n  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n}\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__pane.selection .react-flow__panel {\n  pointer-events: none;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-15px) translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-15px) translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  color: var(--xy-node-color, var(--xy-node-color-default));\n}\n.react-flow__node-input.selected,\n  .react-flow__node-input:focus,\n  .react-flow__node-input:focus-visible,\n  .react-flow__node-default.selected,\n  .react-flow__node-default:focus,\n  .react-flow__node-default:focus-visible,\n  .react-flow__node-output.selected,\n  .react-flow__node-output:focus,\n  .react-flow__node-output:focus-visible,\n  .react-flow__node-group.selected,\n  .react-flow__node-group:focus,\n  .react-flow__node-group:focus-visible {\n    outline: none;\n    border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));\n  }\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n\n.doc-sg-flow .react-flow__controls {\n    border-radius: 6px;\n    overflow: hidden;\n    box-shadow: 0 1px 3px color-mix(in srgb, var(--doc-fg, #000000) 14%, transparent);\n}\n.doc-sg-flow .react-flow__controls-button {\n    border: none;\n    border-bottom: 1px solid var(--doc-border, #dde3eb);\n    background: var(--doc-panel, #ffffff);\n    color: var(--doc-fg-3, #5b6271);\n    cursor: pointer;\n}\n.doc-sg-flow .react-flow__controls-button:last-child {\n    border-bottom: none;\n}\n.doc-sg-flow .react-flow__controls-button:hover {\n    background: color-mix(in srgb, var(--doc-fg, #000000) 7%, var(--doc-panel, #ffffff));\n    color: var(--doc-fg, #000000);\n}\n.doc-sg-flow .react-flow__controls-button:disabled {\n    opacity: 0.45;\n}\n";
+/**
+ * Injected once, when a graph is first mounted (no-op if already present).
+ * Placed at the start of head = laid down as a base layer weaker than the consumer's
+ * stylesheets, so it doesn't override the caller's CSS (theme / its own React Flow usage).
+ */
+export declare const injectSchemaGraphCss: (doc: Document) => void;

package/dist/core/flow-css.js

@@ -0,0 +1,54 @@
+// Layer that lets the mount layer inject the schema graph (React Flow) stylesheet itself.
+// Without its plain CSS, React Flow loses both the absolute positioning of nodes and the
+// placement of Controls / MiniMap (the figure collapses to just the dotted background), so
+// consumers importing the `./flow` subpath aren't asked to ship the CSS (React embedding meets
+// the same conditions as the global bundle).
+//
+// Only **base.css (structure only)** is included; React Flow's default theme (style.css) is not
+// used: this repo's convention is that colors come from the `--doc-*` variables the consumer
+// injects (same as `var(--doc-*)` in figures). Including the default theme would mix light-only
+// chrome into dark-theme docs and clash with the caller's palette.
+// Only what inline styles can't reach (the Controls buttons = plain `<button>`) is patched,
+// scoped under `.doc-sg-flow` so that a React Flow the consumer uses separately isn't affected.
+import { XYFLOW_BASE_CSS } from "./flow-base-css.generated.js";
+export const FLOW_STYLE_ID = "doc-sg-flow-css";
+const THEME_CSS = `
+.doc-sg-flow .react-flow__controls {
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--doc-fg, #000000) 14%, transparent);
+}
+.doc-sg-flow .react-flow__controls-button {
+    border: none;
+    border-bottom: 1px solid var(--doc-border, #dde3eb);
+    background: var(--doc-panel, #ffffff);
+    color: var(--doc-fg-3, #5b6271);
+    cursor: pointer;
+}
+.doc-sg-flow .react-flow__controls-button:last-child {
+    border-bottom: none;
+}
+.doc-sg-flow .react-flow__controls-button:hover {
+    background: color-mix(in srgb, var(--doc-fg, #000000) 7%, var(--doc-panel, #ffffff));
+    color: var(--doc-fg, #000000);
+}
+.doc-sg-flow .react-flow__controls-button:disabled {
+    opacity: 0.45;
+}
+`;
+/** Full text of the injected stylesheet (base.css + extra rules that map onto `--doc-*`). */
+export const SCHEMA_GRAPH_FLOW_CSS = `${XYFLOW_BASE_CSS}${THEME_CSS}`;
+/**
+ * Injected once, when a graph is first mounted (no-op if already present).
+ * Placed at the start of head = laid down as a base layer weaker than the consumer's
+ * stylesheets, so it doesn't override the caller's CSS (theme / its own React Flow usage).
+ */
+export const injectSchemaGraphCss = (doc) => {
+    if (doc.getElementById(FLOW_STYLE_ID) != null) {
+        return;
+    }
+    const style = doc.createElement("style");
+    style.id = FLOW_STYLE_ID;
+    style.textContent = SCHEMA_GRAPH_FLOW_CSS;
+    doc.head.prepend(style);
+};

package/dist/core/graph-common.d.ts

@@ -0,0 +1,32 @@
+/** Coordinates are rounded to one decimal place (keeps the SVG stable and short). */
+export declare const round1: (v: number) => number;
+/** Estimated rendered width (px) of a string. scale = actual font size / 12. */
+export declare const textW: (s: string, scale?: number) => number;
+/**
+ * Dependency depth = the level of the column band. `deps[i]` = the set of elements i depends on
+ * (the caller decides which direction counts as "dependency" — schema uses "referenced target",
+ * graph uses "incoming source").
+ * Elements with no dependencies get 0; otherwise 1 + max(level of dependencies).
+ * A memoized (settled) DFS plus an in-progress set (onStack) detects cycles; back-edges to an
+ * ancestor still being explored don't contribute (they stay -1 and are ignored), so recursion is
+ * cut off deterministically. Levels are settled in order from index 0, so the same input always
+ * yields the same levels.
+ */
+export declare const depthLevels: (deps: readonly ReadonlySet<number>[]) => number[];
+/**
+ * Splits a tall column into several columns (so it doesn't grow too tall). Takes box heights
+ * (in original order); returns the positions per column (indices into the input array) — the
+ * split is greedy = deterministic.
+ */
+export declare const splitByHeight: (heights: readonly number[], gapY: number, maxColH: number) => number[][];
+/**
+ * Orthogonal path (horizontal from the source → vertical along the corridor (cx) → horizontal to
+ * the target). Corners are rounded with quadratic curves. Degenerates to a single straight line
+ * when sy ≈ ty.
+ */
+export declare const orthPath: (sx: number, sy: number, cx: number, ty: number, tx: number, corner: number) => string;
+/**
+ * String → deterministic short id (djb2). Callers pass the model serialized as JSON; the result
+ * namespaces SVG classes / marker ids (= multiple graphs on the same page don't collide).
+ */
+export declare const hashId: (src: string) => string;

package/dist/core/graph-common.js

@@ -0,0 +1,113 @@
+// Layout helpers shared by the two DSLs that draw static SVG graphs (`schemath` = ER diagram /
+// `graphth` = relationship graph); browser-safe, no dependencies. Text-width estimation, band
+// (level) assignment, column splitting, orthogonal paths and namespace uids are the rules behind
+// "same input, same picture", so they live here as the SoT instead of being written twice.
+/** Coordinates are rounded to one decimal place (keeps the SVG stable and short). */
+export const round1 = (v) => Math.round(v * 10) / 10;
+// Full-width characters (CJK / full-width symbols) count as double width. Approximates 12px mono
+// (font metrics can't be measured, so this is an estimate = deterministic).
+const charW = (code) => (code > 0x2e7f ? 12 : 6.7);
+/** Estimated rendered width (px) of a string. scale = actual font size / 12. */
+export const textW = (s, scale = 1) => [...s].reduce((sum, ch) => sum + charW(ch.codePointAt(0) ?? 0) * scale, 0);
+/**
+ * Dependency depth = the level of the column band. `deps[i]` = the set of elements i depends on
+ * (the caller decides which direction counts as "dependency" — schema uses "referenced target",
+ * graph uses "incoming source").
+ * Elements with no dependencies get 0; otherwise 1 + max(level of dependencies).
+ * A memoized (settled) DFS plus an in-progress set (onStack) detects cycles; back-edges to an
+ * ancestor still being explored don't contribute (they stay -1 and are ignored), so recursion is
+ * cut off deterministically. Levels are settled in order from index 0, so the same input always
+ * yields the same levels.
+ */
+export const depthLevels = (deps) => {
+    const level = new Array(deps.length).fill(0);
+    const settled = new Array(deps.length).fill(false);
+    const onStack = new Array(deps.length).fill(false);
+    const levelOf = (i) => {
+        if (settled[i]) {
+            return level[i] ?? 0;
+        }
+        if (onStack[i]) {
+            // back-edge (cycle) — this dependency doesn't contribute to the level.
+            return -1;
+        }
+        onStack[i] = true;
+        let max = -1;
+        for (const d of deps[i] ?? []) {
+            max = Math.max(max, levelOf(d));
+        }
+        onStack[i] = false;
+        const result = max < 0 ? 0 : max + 1;
+        level[i] = result;
+        settled[i] = true;
+        return result;
+    };
+    deps.forEach((_, i) => {
+        levelOf(i);
+    });
+    return level;
+};
+/**
+ * Splits a tall column into several columns (so it doesn't grow too tall). Takes box heights
+ * (in original order); returns the positions per column (indices into the input array) — the
+ * split is greedy = deterministic.
+ */
+export const splitByHeight = (heights, gapY, maxColH) => {
+    const all = heights.map((_, i) => i);
+    const total = heights.reduce((a, b) => a + b, 0) + gapY * Math.max(0, heights.length - 1);
+    const count = Math.max(1, Math.ceil(total / maxColH));
+    if (count === 1) {
+        return [all];
+    }
+    const target = total / count;
+    const cols = [];
+    let col = [];
+    let colH = 0;
+    for (const i of all) {
+        const h = heights[i] ?? 0;
+        if (col.length > 0 && colH + h > target && cols.length < count - 1) {
+            cols.push(col);
+            col = [];
+            colH = 0;
+        }
+        col.push(i);
+        colH += h + gapY;
+    }
+    cols.push(col);
+    return cols;
+};
+/**
+ * Orthogonal path (horizontal from the source → vertical along the corridor (cx) → horizontal to
+ * the target). Corners are rounded with quadratic curves. Degenerates to a single straight line
+ * when sy ≈ ty.
+ */
+export const orthPath = (sx, sy, cx, ty, tx, corner) => {
+    const p = (x, y) => `${round1(x)},${round1(y)}`;
+    if (Math.abs(sy - ty) < 0.6) {
+        return `M${p(sx, sy)} L${p(tx, ty)}`;
+    }
+    const outDir = cx >= sx ? 1 : -1;
+    const inDir = tx >= cx ? 1 : -1;
+    const vDir = ty > sy ? 1 : -1;
+    const r1 = Math.min(corner, Math.abs(cx - sx), Math.abs(ty - sy) / 2);
+    const r2 = Math.min(corner, Math.abs(tx - cx), Math.abs(ty - sy) / 2);
+    return [
+        `M${p(sx, sy)}`,
+        `L${p(cx - outDir * r1, sy)}`,
+        `Q${p(cx, sy)} ${p(cx, sy + vDir * r1)}`,
+        `L${p(cx, ty - vDir * r2)}`,
+        `Q${p(cx, ty)} ${p(cx + inDir * r2, ty)}`,
+        `L${p(tx, ty)}`,
+    ].join(" ");
+};
+/**
+ * String → deterministic short id (djb2). Callers pass the model serialized as JSON; the result
+ * namespaces SVG classes / marker ids (= multiple graphs on the same page don't collide).
+ */
+export const hashId = (src) => {
+    let hash = 5381;
+    for (let i = 0; i < src.length; i += 1) {
+        hash = (hash * 33 + src.charCodeAt(i)) | 0;
+    }
+    return (hash >>> 0).toString(36);
+};

package/dist/core/graph.d.ts

@@ -0,0 +1,117 @@
+/** Edge kind = line style. solid / dashed are directed (with arrow); undirected has no arrow. */
+export declare const GRAPH_EDGE_KINDS: readonly ["solid", "dashed", "undirected"];
+export type GraphEdgeKind = (typeof GRAPH_EDGE_KINDS)[number];
+/** A single node. If label is omitted, the id is used as the label. No region = not in a frame. */
+export interface GraphNode {
+    id: string;
+    label: string;
+    region?: string;
+}
+export interface GraphEdge {
+    from: string;
+    to: string;
+    kind: GraphEdgeKind;
+    label?: string;
+}
+/**
+ * Group = one frame. With label = a region (the nodes tagged with that name; drawn as a dashed
+ * frame + heading); without label = a standalone group of one node that has no region (no frame
+ * drawn). regions partitions all nodes, ordered by first occurrence in the source (= vertical
+ * stacking order within a band).
+ */
+export interface GraphRegion {
+    label?: string;
+    nodes: string[];
+}
+export interface GraphModel {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    regions: GraphRegion[];
+}
+/** Error with a DSL line number (0-indexed, relative to the start of the DSL). */
+export interface GraphParseError {
+    line: number;
+    message: string;
+}
+export interface GraphParseResult {
+    model: GraphModel;
+    errors: GraphParseError[];
+}
+/**
+ * Node / edge DSL → graph model + errors. The model is returned as a partial result even when
+ * there are errors (so the preview can show "validation errors + as much as can be drawn" at once).
+ */
+export declare const parseGraphSource: (source: string) => GraphParseResult;
+/** model → deterministic short id (namespace for SVG classes / marker ids). */
+export declare const graphUid: (model: GraphModel) => string;
+export interface GraphLayoutNode {
+    id: string;
+    /** Index into model.nodes (key for linked hover highlighting). */
+    index: number;
+    label: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    /** Label baseline y / center x (the renderer places it with text-anchor=middle). */
+    baseline: number;
+    textX: number;
+    /** Corner radius of the box. */
+    radius: number;
+}
+export interface GraphLayoutRegion {
+    label: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    /** Member node ids (declaration order). */
+    members: string[];
+}
+export interface GraphLayoutEdge {
+    /** Node index (an index into model.nodes, not into GraphLayout.nodes). */
+    from: number;
+    to: number;
+    kind: GraphEdgeKind;
+    /** SVG path d (3 orthogonal segments, rounded corners). */
+    d: string;
+    label?: string;
+    labelX?: number;
+    labelY?: number;
+    /** Label alignment — centered above a straight line; right of the vertical leg if bent. */
+    labelAnchor?: "middle" | "start";
+}
+export interface GraphLayout {
+    width: number;
+    height: number;
+    regions: GraphLayoutRegion[];
+    nodes: GraphLayoutNode[];
+    edges: GraphLayoutEdge[];
+    /** Baseline y of the legend (only when there are dashed / undirected edges). */
+    legendY?: number;
+}
+/**
+ * Legend text (shown only when there are dashed / undirected edges). html.ts places the
+ * markup, but layout also needs the text length to keep the canvas at least this wide (= so the
+ * text isn't cut off on a narrow graph), so the text is declared here, in one place.
+ */
+export declare const GRAPH_LEGEND = "Solid = dependency / dashed = optional or async / no arrow = undirected / hover to highlight related edges";
+/** Left edge of the legend / group labels (used by the renderer). */
+export declare const GRAPH_LAYOUT_MARGIN: 16;
+/** Minimum gap between groups stacked in the same band (tests use it to check non-overlap). */
+export declare const GRAPH_GAP_REGION_Y: 40;
+/** Height / padding of a group frame's label area (tests use it to derive the "label top"). */
+export declare const GRAPH_FRAME_LABEL_H: 22;
+export declare const GRAPH_FRAME_PAD: 13;
+/**
+ * Graph model → deterministic layout. Dagre's compound graph computes node / region positions and
+ * sizes. Edges are then routed between the placed boxes by routeGraphEdges, which keeps the
+ * per-kind SVG representation and the hover indices. The Dagre graph is built in model
+ * declaration order, so the same input always yields the same coordinates.
+ */
+export declare const layoutGraph: (model: GraphModel) => GraphLayout;
+/**
+ * Boxes + edges → routes. A pure function so that layout (at build time) and a future interactive
+ * UI that moves boxes share the same rules (= a single SoT for how edges are drawn).
+ */
+export declare const routeGraphEdges: (boxes: readonly GraphLayoutNode[], edges: readonly GraphEdge[]) => GraphLayoutEdge[];