@oxeo/visual 0.0.0-stage → 0.2.0

package/dist/render/html.d.ts

@@ -0,0 +1,8 @@
+import type { ZoneConfig } from '../config';
+export interface RenderPageOptions {
+    zones: ZoneConfig[];
+    mapSvg: string;
+    data: unknown;
+    meta: string;
+}
+export declare const renderPage: ({ zones, mapSvg, data, meta }: RenderPageOptions) => string;

package/dist/render/html.js

@@ -0,0 +1,211 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderPage = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const ts = __importStar(require("typescript"));
+const palette_1 = require("./palette");
+const svg_1 = require("./svg");
+const clientScript = () => {
+    const compiled = path.join(__dirname, 'client.js');
+    if (fs.existsSync(compiled))
+        return fs.readFileSync(compiled, 'utf8');
+    const source = fs.readFileSync(path.join(__dirname, 'client.ts'), 'utf8');
+    return ts.transpileModule(source, {
+        compilerOptions: {
+            target: ts.ScriptTarget.ES2019,
+            module: ts.ModuleKind.None,
+            removeComments: true
+        }
+    }).outputText;
+};
+const pageCss = `
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { height: 100%; }
+body { margin: 0; background: var(--xv-bg); color: var(--xv-text); font: 400 13px/1.45 ${svg_1.UI}; -webkit-font-smoothing: antialiased; }
+code { font-family: ${svg_1.MONO}; font-size: 0.92em; background: var(--xv-surface-2); padding: 1px 4px; border-radius: 3px; }
+button { font: inherit; color: inherit; }
+:focus-visible { outline: 2px solid var(--xv-accent); outline-offset: 1px; }
+
+.xv-app { position: fixed; inset: 0; }
+.xv-stage { position: absolute; inset: 0; overflow: hidden; background: var(--xv-bg); cursor: grab; touch-action: none; user-select: none; }
+.xv-stage.is-panning { cursor: grabbing; }
+.xv-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+
+/* Плавающие подложки поверх карты, как в Miro: карта занимает всё окно */
+.xv-float { position: absolute; top: 12px; z-index: 6; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px; background: var(--xv-surface); border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--xv-text) 7%, transparent), 0 2px 6px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.07); cursor: auto; user-select: none; }
+.xv-float-left { left: 12px; }
+.xv-float-right { right: 12px; }
+.xv-divider { width: 1px; height: 22px; margin: 0 2px; background: var(--xv-line); flex: none; }
+.xv-meta { padding: 0 8px 0 2px; color: var(--xv-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.xv-ctl-label { padding-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xv-muted); }
+.xv-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--xv-surface-2); border-radius: 7px; }
+.xv-seg button { height: 28px; border: 0; background: transparent; color: var(--xv-muted); font-size: 12px; font-weight: 500; line-height: 1; padding: 0 10px; border-radius: 5px; cursor: pointer; }
+.xv-seg button:hover { color: var(--xv-text); }
+.xv-seg button[aria-pressed='true'] { background: var(--xv-surface); color: var(--xv-text); box-shadow: 0 0 0 1px var(--xv-line), 0 1px 2px rgb(0 0 0 / 0.06); }
+.xv-tool { height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; font-weight: 500; cursor: pointer; }
+.xv-tool:hover { background: var(--xv-surface-2); }
+.xv-tool[aria-expanded='true'] { background: var(--xv-accent-quiet); color: var(--xv-accent); }
+.xv-search { position: relative; display: flex; align-items: center; }
+.xv-search-icon { position: absolute; left: 10px; color: var(--xv-faint); pointer-events: none; }
+.xv-search input { width: 260px; height: 32px; padding: 0 40px 0 32px; border: 0; border-radius: 6px; background: var(--xv-surface-2); color: var(--xv-text); font: 13px ${svg_1.UI}; }
+.xv-search input::placeholder { color: var(--xv-faint); }
+.xv-search-count { position: absolute; right: 10px; font: 500 11px ${svg_1.MONO}; color: var(--xv-muted); pointer-events: none; }
+.xv-zoom { position: absolute; left: 12px; bottom: 12px; padding: 3px 8px; border-radius: 4px; background: color-mix(in srgb, var(--xv-surface) 88%, transparent); color: var(--xv-muted); font: 500 11px ${svg_1.MONO}; pointer-events: none; }
+
+.xv-map .xv-card, .xv-map .xv-edge { cursor: pointer; transition: opacity 0.12s; }
+.xv-map .xv-row:hover .xv-row-bg { fill: color-mix(in srgb, var(--xv-accent) 8%, transparent); }
+.xv-map.has-focus .xv-edge:not(.is-on) { opacity: 0.07; }
+.xv-map.has-focus .xv-card:not(.is-on) { opacity: 0.3; }
+.xv-map .xv-edge.is-on .xv-edge-line { stroke-width: 2.4; opacity: 1; }
+.xv-map .xv-edge.xv-own.is-on .xv-edge-line { stroke-width: 3; }
+.xv-map .xv-card.is-selected .xv-card-bg { stroke: var(--xv-accent); stroke-width: 2.5; }
+.xv-map.has-search .xv-card:not(.match) { opacity: 0.25; }
+.xv-map .xv-card.match .xv-card-bg { stroke: var(--xv-match); stroke-width: 3; }
+.xv-map .xv-row.match .xv-row-bg { fill: color-mix(in srgb, var(--xv-match) 35%, transparent); }
+.xv-map.is-locked .xv-card:not(.is-on) { opacity: 0.16; cursor: default; }
+.xv-map.is-locked .xv-card:not(.is-on) .xv-row:hover .xv-row-bg { fill: transparent; }
+.xv-map.is-locked .xv-edge:not(.is-on) { opacity: 0.04; pointer-events: none; }
+.xv-map .xv-row.is-pinned .xv-row-bg { fill: color-mix(in srgb, var(--xv-accent) 24%, transparent); stroke: var(--xv-accent); stroke-width: 1; }
+.xv-map .xv-row.is-pinned .xv-row-label { fill: var(--xv-accent); font-weight: 600; }
+.xv-map .xv-row.is-linked .xv-row-bg { fill: color-mix(in srgb, var(--xv-accent) 12%, transparent); }
+.xv-map .xv-edges[data-layer='nohub'] { visibility: hidden; }
+.xv-map.mode-shortcuts .xv-edges[data-layer='all'] { visibility: hidden; }
+.xv-map.mode-shortcuts .xv-edges[data-layer='nohub'] { visibility: visible; }
+.xv-map.mode-shortcuts .xv-edges[data-layer='all'] .xv-edge.xv-hub.is-on { visibility: visible; }
+.xv-map.lod-far .xv-row, .xv-map.lod-far .xv-card-title, .xv-map.lod-far .xv-card-badge, .xv-map.lod-far .xv-file-label { display: none; }
+.xv-map.lod-far .xv-card-far { display: inline; }
+.xv-map.lod-far .xv-zone-title { font-size: clamp(20px, calc(16px * var(--xv-inv, 1)), 76px); }
+.xv-map.lod-far .xv-zone-meta { font-size: clamp(12px, calc(10px * var(--xv-inv, 1)), 36px); }
+.xv-map.lod-far .xv-edge-line { stroke-width: 2.6; }
+
+.xv-legend { position: absolute; top: 64px; right: 12px; z-index: 5; width: 320px; max-width: calc(100% - 24px); max-height: calc(100% - 76px); overflow: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 16px; background: var(--xv-surface); border: 1px solid var(--xv-line-strong); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.12); cursor: auto; user-select: text; }
+.xv-legend section h3 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--xv-muted); }
+.lg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
+.lg-close { width: 26px; height: 26px; border: 0; border-radius: 5px; background: none; color: var(--xv-muted); font-size: 18px; line-height: 1; cursor: pointer; }
+.lg-close:hover { background: var(--xv-surface-2); color: var(--xv-text); }
+.quiet { color: var(--xv-muted); font-size: 12px; margin: 0; }
+.zone-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--t); flex: none; }
+.ent-link { padding: 0; border: 0; background: none; color: var(--t, var(--xv-accent)); font: 600 12px ${svg_1.MONO}; cursor: pointer; }
+.ent-link:hover { text-decoration: underline; }
+.del { display: inline-block; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font: 500 10px/16px ${svg_1.MONO}; color: var(--xv-text); }
+.del.cascade { color: #d62828; }
+.del.set-null, .del.unlink { color: var(--xv-muted); border-style: dashed; }
+.legend { display: flex; flex-direction: column; gap: 6px; }
+.lg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; color: var(--xv-muted); }
+.lg span { color: var(--xv-text); }
+.lg small { display: block; color: var(--xv-muted); font-size: 11px; }
+.zones { display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; }
+.zone-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 6px; border: 0; border-radius: 5px; background: none; text-align: left; cursor: pointer; font-size: 13px; }
+.zone-row:hover { background: var(--xv-surface-2); }
+.zone-row .zone-dot { width: 10px; height: 10px; }
+.keys { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--xv-muted); }
+kbd { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 6px; border: 1px solid var(--xv-line-strong); border-bottom-width: 2px; border-radius: 4px; font: 500 11px/18px ${svg_1.MONO}; color: var(--xv-text); text-align: center; }
+.foot { font-size: 11px; }
+
+.xv-tip { position: fixed; z-index: 50; max-width: 520px; max-height: calc(100vh - 16px); overflow: hidden; padding: 8px 10px; border: 1px solid var(--xv-line-strong); border-radius: 6px; background: var(--xv-surface); box-shadow: 0 8px 24px rgb(0 0 0 / 0.14); font-size: 12px; line-height: 1.5; pointer-events: none; }
+.xv-tip b { font-family: ${svg_1.MONO}; font-weight: 600; }
+.xv-tip .muted { color: var(--xv-muted); }
+.xv-tip .tip-code { margin: 6px 0 2px; padding: 5px 7px; border-radius: 4px; background: var(--xv-surface-2); font: 11px/1.5 ${svg_1.MONO}; color: var(--xv-text); overflow-wrap: anywhere; }
+.xv-tip .tip-dec { color: var(--xv-accent); font-weight: 600; }
+.xv-tip .tip-zone { font-weight: 600; }
+.xv-tip .tip-doc { margin: 6px 0; line-height: 1.5; white-space: pre-line; }
+.xv-tip .tip-meta { color: var(--xv-muted); }
+.xv-tip .tip-impact { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--xv-line); display: flex; flex-direction: column; gap: 3px; }
+.xv-tip code { font-size: 11px; }
+.xv-tip .tip-pre { margin: 6px 0 2px; padding: 7px 9px; border-radius: 4px; background: var(--xv-surface-2); font: 11px/1.5 ${svg_1.MONO}; color: var(--xv-text); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
+.xv-tip .ts-c { color: var(--xv-muted); font-style: italic; }
+.xv-tip .ts-s { color: var(--xv-code-string); }
+.xv-tip .ts-k { color: var(--xv-accent); }
+.xv-tip .ts-t { color: var(--xv-code-type); }
+
+@media (max-width: 720px) {
+  .xv-float-left { right: 12px; }
+  .xv-float-left .xv-divider, .xv-meta { display: none; }
+  .xv-search, .xv-search input { width: 100%; }
+  .xv-search { flex: 1; }
+  .xv-float-right { top: 64px; }
+  .xv-legend { top: 116px; max-height: calc(100% - 128px); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .xv-map .xv-card, .xv-map .xv-edge { transition: none; }
+}
+`;
+const renderPage = ({ zones, mapSvg, data, meta }) => {
+    const json = JSON.stringify(data).replace(/</g, '\\u003c');
+    return `<!doctype html>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<title>Карта схемы</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" />
+<style>${(0, palette_1.pageThemeCss)(zones)}
+${svg_1.mapCss}
+${pageCss}</style>
+<div class="xv-app">
+  <main class="xv-stage" id="xv-stage" aria-label="Карта схемы">
+${mapSvg}
+    <div class="xv-float xv-float-left">
+      <label class="xv-search">
+        <svg class="xv-search-icon" width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M11 11 L14.5 14.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+        <input id="xv-search" type="search" autocomplete="off" spellcheck="false" placeholder="Коллекция или поле…" aria-label="Поиск по коллекциям и полям" />
+        <span class="xv-search-count" id="xv-search-count"></span>
+      </label>
+      <span class="xv-divider" aria-hidden="true"></span>
+      <span class="xv-meta">${meta}</span>
+    </div>
+    <div class="xv-float xv-float-right">
+      <span class="xv-ctl-label">Хабы</span>
+      <div class="xv-seg">
+        <button type="button" data-hub-mode="lines">Линии</button>
+        <button type="button" data-hub-mode="shortcuts">Ярлыки</button>
+      </div>
+      <span class="xv-divider" aria-hidden="true"></span>
+      <button type="button" class="xv-tool" id="xv-legend-toggle" aria-controls="xv-legend" aria-expanded="false">Легенда</button>
+    </div>
+    <div class="xv-zoom" id="xv-zoom"></div>
+    <aside class="xv-legend" id="xv-legend" aria-label="Легенда" hidden></aside>
+  </main>
+</div>
+<div class="xv-tip" id="xv-tip" hidden></div>
+<pre id="xv-debug" hidden></pre>
+<script id="xv-data" type="application/json">${json}</script>
+<script>${clientScript()}</script>
+`;
+};
+exports.renderPage = renderPage;

package/dist/render/palette.d.ts

@@ -0,0 +1,4 @@
+import type { ZoneConfig } from '../config';
+export declare const zoneVar: (id: string) => string;
+export declare const pageThemeCss: (zones: ZoneConfig[]) => string;
+export declare const svgThemeCss: (zones: ZoneConfig[]) => string;

package/dist/render/palette.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgThemeCss = exports.pageThemeCss = exports.zoneVar = void 0;
+const LIGHT = {
+    bg: '#f6f6f7',
+    surface: '#ffffff',
+    surface2: '#f1f1f3',
+    line: '#e4e4e7',
+    lineStrong: '#d4d4d8',
+    text: '#18181b',
+    muted: '#63636e',
+    faint: '#a1a1aa',
+    onZone: '#ffffff',
+    accent: '#2563eb',
+    accentQuiet: '#e0eafd',
+    match: '#f2b200',
+    codeString: '#a1501b',
+    codeType: '#0f7f77'
+};
+const DARK = {
+    bg: '#0c0c0e',
+    surface: '#151518',
+    surface2: '#1f1f23',
+    line: '#2a2a2f',
+    lineStrong: '#3a3a41',
+    text: '#f2f2f3',
+    muted: '#a3a3ad',
+    faint: '#6c6c75',
+    onZone: '#0c0c0e',
+    accent: '#6ea2ff',
+    accentQuiet: '#1a2944',
+    match: '#f4c64a',
+    codeString: '#f0a868',
+    codeType: '#5fd4c4'
+};
+const zoneVar = (id) => `--xv-zone-${id.replace(/[^A-Za-z0-9_-]/g, '_')}`;
+exports.zoneVar = zoneVar;
+const declarations = (palette, zones, dark) => [
+    dark ? 'color-scheme: dark;' : '',
+    `--xv-bg: ${palette.bg};`,
+    `--xv-surface: ${palette.surface};`,
+    `--xv-surface-2: ${palette.surface2};`,
+    `--xv-line: ${palette.line};`,
+    `--xv-line-strong: ${palette.lineStrong};`,
+    `--xv-text: ${palette.text};`,
+    `--xv-muted: ${palette.muted};`,
+    `--xv-faint: ${palette.faint};`,
+    `--xv-on-zone: ${palette.onZone};`,
+    `--xv-accent: ${palette.accent};`,
+    `--xv-accent-quiet: ${palette.accentQuiet};`,
+    `--xv-match: ${palette.match};`,
+    `--xv-code-string: ${palette.codeString};`,
+    `--xv-code-type: ${palette.codeType};`,
+    ...zones.map((z) => `${(0, exports.zoneVar)(z.id)}: ${dark ? (z.colorDark ?? z.color) : z.color};`)
+]
+    .filter(Boolean)
+    .join(' ');
+const pageThemeCss = (zones) => `
+:root { ${declarations(LIGHT, zones, false)} }
+@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { ${declarations(DARK, zones, true)} } }
+:root[data-theme='dark'] { ${declarations(DARK, zones, true)} }`;
+exports.pageThemeCss = pageThemeCss;
+const svgThemeCss = (zones) => `
+.xv-root { ${declarations(LIGHT, zones, false)} }
+@media (prefers-color-scheme: dark) { .xv-root { ${declarations(DARK, zones, true)} } }`;
+exports.svgThemeCss = svgThemeCss;

package/dist/render/svg.d.ts

@@ -0,0 +1,20 @@
+import type { Spacing, VisualConfig } from '../config';
+import { type Placement } from '../layout/place';
+import type { Route } from '../layout/route';
+export declare const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace";
+export declare const UI = "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+export declare const mapCss = "\n.xv-map { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace; }\n.xv-zone-bg { fill: color-mix(in srgb, var(--z) 7%, var(--xv-bg)); stroke: color-mix(in srgb, var(--z) 32%, var(--xv-bg)); stroke-width: 1; }\n.xv-zone-title { font: 600 20px Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; fill: var(--z); letter-spacing: -0.01em; }\n.xv-zone-meta { font: 500 12px Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; fill: var(--xv-muted); letter-spacing: 0; }\n.xv-file-bg { fill: color-mix(in srgb, var(--z) 2%, var(--xv-surface)); stroke: color-mix(in srgb, var(--z) 40%, var(--xv-surface)); stroke-width: 1; stroke-dasharray: 4 3; }\n.xv-file-label { font-size: 11px; font-weight: 600; fill: var(--z); }\n.xv-file-label .ns { font-weight: 400; fill: var(--xv-muted); }\n.xv-edge { color: var(--z); }\n.xv-edge-line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; opacity: 0.9; }\n.xv-edge.xv-soft .xv-edge-line { stroke-dasharray: 5 4; }\n.xv-edge.xv-own .xv-edge-line { stroke-width: 2; }\n.xv-edge-end { fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }\n.xv-edge-end.hollow { fill: var(--xv-surface); }\n.xv-edge-end.open { fill: none; }\n.xv-edge-hit { fill: none; stroke: transparent; stroke-width: 9; }\n.xv-card-bg { fill: var(--xv-surface); stroke: color-mix(in srgb, var(--z) 50%, var(--xv-line)); stroke-width: 1; }\n.xv-card-head { fill: var(--z); }\n.xv-card-title { font-size: 13px; font-weight: 600; fill: var(--xv-on-zone); }\n.xv-card-badge { font-size: 10px; font-weight: 500; fill: var(--xv-on-zone); opacity: 0.85; }\n.xv-row-sep { stroke: color-mix(in srgb, var(--z) 10%, var(--xv-line)); stroke-width: 1; }\n.xv-row-bg { fill: transparent; }\n.xv-row text { font-size: 11px; }\n.xv-row-label { fill: var(--xv-text); }\n.xv-row-label .q { fill: var(--xv-muted); }\n.xv-row-detail { fill: var(--xv-muted); }\n.xv-row-detail.rel { fill: var(--t); font-weight: 500; }\n.xv-row.id .xv-row-label { font-weight: 600; }\n.xv-row.block .xv-row-label, .xv-row.variant .xv-row-label { font-weight: 600; }\n.xv-row.block .xv-row-detail, .xv-row.variant .xv-row-detail { font-style: italic; }\n.xv-block-box { stroke: color-mix(in srgb, var(--z) 45%, var(--xv-line)); stroke-width: 1; }\n.xv-block-rule { stroke: color-mix(in srgb, var(--z) 45%, var(--xv-line)); stroke-width: 1; }\n.xv-row.block .xv-row-label { fill: color-mix(in srgb, var(--z) 70%, var(--xv-text)); }\n.xv-variant-band { fill: color-mix(in srgb, var(--z) 14%, var(--xv-surface)); }\n.xv-card-far { display: none; font-weight: 600; fill: var(--xv-text); dominant-baseline: hanging; font-size: min(var(--fit), calc(13px * var(--xv-inv, 1))); }\n";
+export interface MapLayers {
+    all: Route[];
+    nohub: Route[];
+}
+export interface RenderMapOptions {
+    config: VisualConfig;
+    spacing: Spacing;
+    placement: Placement;
+    layers: MapLayers;
+    hubs: Set<string>;
+    sourcesCount: Map<string, number>;
+    standalone?: boolean;
+}
+export declare const renderMapSvg: ({ config, spacing, placement, layers, hubs, sourcesCount, standalone }: RenderMapOptions) => string;

package/dist/render/svg.js

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMapSvg = exports.mapCss = exports.UI = exports.MONO = void 0;
+const cards_1 = require("../layout/cards");
+const place_1 = require("../layout/place");
+const palette_1 = require("./palette");
+const text_1 = require("../text");
+exports.MONO = `'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace`;
+exports.UI = `Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif`;
+exports.mapCss = `
+.xv-map { font-family: ${exports.MONO}; }
+.xv-zone-bg { fill: color-mix(in srgb, var(--z) 7%, var(--xv-bg)); stroke: color-mix(in srgb, var(--z) 32%, var(--xv-bg)); stroke-width: 1; }
+.xv-zone-title { font: 600 ${place_1.ZONE_TITLE_FONT}px ${exports.UI}; fill: var(--z); letter-spacing: -0.01em; }
+.xv-zone-meta { font: 500 ${place_1.ZONE_META_FONT}px ${exports.UI}; fill: var(--xv-muted); letter-spacing: 0; }
+.xv-file-bg { fill: color-mix(in srgb, var(--z) 2%, var(--xv-surface)); stroke: color-mix(in srgb, var(--z) 40%, var(--xv-surface)); stroke-width: 1; stroke-dasharray: 4 3; }
+.xv-file-label { font-size: ${place_1.FILE_LABEL_FONT}px; font-weight: 600; fill: var(--z); }
+.xv-file-label .ns { font-weight: 400; fill: var(--xv-muted); }
+.xv-edge { color: var(--z); }
+.xv-edge-line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; opacity: 0.9; }
+.xv-edge.xv-soft .xv-edge-line { stroke-dasharray: 5 4; }
+.xv-edge.xv-own .xv-edge-line { stroke-width: 2; }
+.xv-edge-end { fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
+.xv-edge-end.hollow { fill: var(--xv-surface); }
+.xv-edge-end.open { fill: none; }
+.xv-edge-hit { fill: none; stroke: transparent; stroke-width: 9; }
+.xv-card-bg { fill: var(--xv-surface); stroke: color-mix(in srgb, var(--z) 50%, var(--xv-line)); stroke-width: 1; }
+.xv-card-head { fill: var(--z); }
+.xv-card-title { font-size: ${cards_1.HEADER_FONT}px; font-weight: 600; fill: var(--xv-on-zone); }
+.xv-card-badge { font-size: 10px; font-weight: 500; fill: var(--xv-on-zone); opacity: 0.85; }
+.xv-row-sep { stroke: color-mix(in srgb, var(--z) 10%, var(--xv-line)); stroke-width: 1; }
+.xv-row-bg { fill: transparent; }
+.xv-row text { font-size: ${cards_1.ROW_FONT}px; }
+.xv-row-label { fill: var(--xv-text); }
+.xv-row-label .q { fill: var(--xv-muted); }
+.xv-row-detail { fill: var(--xv-muted); }
+.xv-row-detail.rel { fill: var(--t); font-weight: 500; }
+.xv-row.id .xv-row-label { font-weight: 600; }
+.xv-row.block .xv-row-label, .xv-row.variant .xv-row-label { font-weight: 600; }
+.xv-row.block .xv-row-detail, .xv-row.variant .xv-row-detail { font-style: italic; }
+.xv-block-box { stroke: color-mix(in srgb, var(--z) 45%, var(--xv-line)); stroke-width: 1; }
+.xv-block-rule { stroke: color-mix(in srgb, var(--z) 45%, var(--xv-line)); stroke-width: 1; }
+.xv-row.block .xv-row-label { fill: color-mix(in srgb, var(--z) 70%, var(--xv-text)); }
+.xv-variant-band { fill: color-mix(in srgb, var(--z) 14%, var(--xv-surface)); }
+.xv-card-far { display: none; font-weight: 600; fill: var(--xv-text); dominant-baseline: hanging; font-size: min(var(--fit), calc(13px * var(--xv-inv, 1))); }
+`;
+const r1 = (n) => Math.round(n * 10) / 10;
+const hatchId = (zone) => `xv-hatch-${zone.replace(/[^A-Za-z0-9_-]/g, '_')}`;
+const unit = (a, b) => {
+    const dx = b[0] - a[0];
+    const dy = b[1] - a[1];
+    const len = Math.hypot(dx, dy) || 1;
+    return [dx / len, dy / len];
+};
+const roundedPath = (input, trimStart, trimEnd, radius = 7) => {
+    const points = input.map((p) => [...p]);
+    const length = (a, b) => Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (points.length >= 2) {
+        const start = Math.min(trimStart, length(points[0], points[1]) - 1);
+        const d0 = unit(points[0], points[1]);
+        points[0] = [points[0][0] + d0[0] * start, points[0][1] + d0[1] * start];
+        const n = points.length - 1;
+        const end = Math.min(trimEnd, length(points[n - 1], points[n]) - 1);
+        const d1 = unit(points[n - 1], points[n]);
+        points[n] = [points[n][0] - d1[0] * end, points[n][1] - d1[1] * end];
+    }
+    let d = `M${r1(points[0][0])},${r1(points[0][1])}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const [prev, corner, next] = [points[i - 1], points[i], points[i + 1]];
+        const inLen = Math.hypot(corner[0] - prev[0], corner[1] - prev[1]);
+        const outLen = Math.hypot(next[0] - corner[0], next[1] - corner[1]);
+        const r = Math.min(radius, inLen / 2, outLen / 2);
+        const a = unit(corner, prev);
+        const b = unit(corner, next);
+        d += ` L${r1(corner[0] + a[0] * r)},${r1(corner[1] + a[1] * r)}`;
+        d += ` Q${r1(corner[0])},${r1(corner[1])} ${r1(corner[0] + b[0] * r)},${r1(corner[1] + b[1] * r)}`;
+    }
+    const last = points[points.length - 1];
+    return `${d} L${r1(last[0])},${r1(last[1])}`;
+};
+const ARROW = 9;
+const DIAMOND = 11;
+const CROW = 10;
+const decorations = (relation, points) => {
+    const parts = [];
+    const [s, s1] = [points[0], points[1]];
+    const [e1, e] = [points[points.length - 2], points[points.length - 1]];
+    const out = unit(s, s1);
+    const inn = unit(e1, e);
+    const perp = (d) => [-d[1], d[0]];
+    const at = (p, d, along, side = 0) => {
+        const n = perp(d);
+        return `${r1(p[0] + d[0] * along + n[0] * side)},${r1(p[1] + d[1] * along + n[1] * side)}`;
+    };
+    if (relation.kind === 'own') {
+        const cls = relation.onDelete === 'cascade' ? '' : ' hollow';
+        parts.push(`<path class="xv-edge-end${cls}" d="M${at(s, out, 0)} L${at(s, out, DIAMOND / 2, 4)} L${at(s, out, DIAMOND)} L${at(s, out, DIAMOND / 2, -4)} Z"/>`);
+        return { parts, trimStart: DIAMOND, trimEnd: 0 };
+    }
+    const cls = relation.nullable ? ' hollow' : '';
+    parts.push(`<path class="xv-edge-end${cls}" d="M${at(e, inn, 0)} L${at(e, inn, -ARROW, 4.5)} L${at(e, inn, -ARROW, -4.5)} Z"/>`);
+    if (relation.kind === 'set') {
+        parts.push(`<path class="xv-edge-end open" d="M${at(s, out, 0, 5)} L${at(s, out, CROW)} L${at(s, out, 0, -5)} M${at(s, out, 0)} L${at(s, out, CROW)}"/>`);
+    }
+    return { parts, trimStart: 0, trimEnd: ARROW };
+};
+const renderMapSvg = ({ config, spacing, placement, layers, hubs, sourcesCount, standalone }) => {
+    const zoneOf = (key) => placement.cards.get(key)?.zone ?? '?';
+    const zoneStyle = (zone) => `--z: var(${(0, palette_1.zoneVar)(zone)})`;
+    const out = [];
+    out.push(`<svg xmlns="http://www.w3.org/2000/svg" class="xv-map xv-root" viewBox="0 0 ${Math.ceil(placement.width)} ${Math.ceil(placement.height)}" width="${Math.ceil(placement.width)}" height="${Math.ceil(placement.height)}">`);
+    if (standalone) {
+        out.push(`<style>${(0, palette_1.svgThemeCss)(config.zones)}${exports.mapCss}</style>`);
+        out.push(`<rect width="100%" height="100%" style="fill: var(--xv-bg)"/>`);
+    }
+    out.push('<defs>');
+    for (const zone of placement.zones) {
+        const color = `var(${(0, palette_1.zoneVar)(zone.zone.id)})`;
+        out.push(`<pattern id="${hatchId(zone.zone.id)}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">` +
+            `<line x1="0" y1="0" x2="0" y2="6" style="stroke: ${color}; stroke-width: 1.5; stroke-opacity: 0.4"/></pattern>`);
+    }
+    out.push('</defs>');
+    out.push('<g class="xv-zones">');
+    for (const box of placement.zones) {
+        out.push(`<g class="xv-zone" data-zone="${(0, text_1.escapeXml)(box.zone.id)}" style="${zoneStyle(box.zone.id)}">` +
+            `<rect class="xv-zone-bg" x="${r1(box.x)}" y="${r1(box.y)}" width="${r1(box.w)}" height="${r1(box.h)}" rx="14"/>` +
+            `<text class="xv-zone-title" x="${r1(box.x + spacing.zonePadX)}" y="${r1(box.y + 38)}">${(0, text_1.escapeXml)(`${box.zone.id} · ${box.zone.title}`)}<tspan class="xv-zone-meta" dx="12">${(0, text_1.escapeXml)(box.meta)}</tspan></text></g>`);
+    }
+    out.push('</g>');
+    out.push('<g class="xv-files">');
+    for (const box of placement.files) {
+        const label = (0, place_1.fileLabel)(box.file, box.namespace);
+        const ns = box.namespace ? `<tspan class="ns"> · ${(0, text_1.escapeXml)(box.namespace)}</tspan>` : '';
+        out.push(`<g class="xv-file" data-file="${(0, text_1.escapeXml)(box.file)}" style="${zoneStyle(box.zone)}">` +
+            `<rect class="xv-file-bg" x="${r1(box.x)}" y="${r1(box.y)}" width="${r1(box.w)}" height="${r1(box.h)}" rx="8"/>` +
+            `<text class="xv-file-label" x="${r1(box.x + spacing.filePadX)}" y="${r1(box.y + 21)}" data-label="${(0, text_1.escapeXml)(label)}">${(0, text_1.escapeXml)(box.file)}${ns}</text></g>`);
+    }
+    out.push('</g>');
+    for (const [layer, routes] of Object.entries(layers)) {
+        out.push(`<g class="xv-edges" data-layer="${layer}">`);
+        for (const { relation, points } of routes) {
+            if (points.length < 2)
+                continue;
+            const zone = relation.kind === 'own' ? zoneOf(relation.source) : zoneOf(relation.target);
+            const soft = relation.onDelete === 'set-null' || relation.onDelete === 'unlink';
+            const { parts, trimStart, trimEnd } = decorations(relation, points);
+            const classes = [
+                'xv-edge',
+                `xv-${relation.kind}`,
+                soft ? 'xv-soft' : '',
+                hubs.has(relation.target) && relation.kind !== 'own' ? 'xv-hub' : ''
+            ];
+            const full = roundedPath(points, 0, 0);
+            out.push(`<g class="${classes.filter(Boolean).join(' ')}" data-id="${(0, text_1.escapeXml)(relation.id)}" data-source="${(0, text_1.escapeXml)(relation.source)}" data-target="${(0, text_1.escapeXml)(relation.target)}" data-field="${(0, text_1.escapeXml)(relation.field)}" style="${zoneStyle(zone)}">` +
+                `<path class="xv-edge-hit" d="${full}"/>` +
+                `<path class="xv-edge-line" d="${roundedPath(points, trimStart, trimEnd)}"/>` +
+                parts.join('') +
+                '</g>');
+        }
+        out.push('</g>');
+    }
+    out.push('<g class="xv-cards">');
+    for (const [key, placed] of placement.cards) {
+        const card = placed.card;
+        const { width: w, height: h } = card;
+        const hr = spacing.cardHeader;
+        const sources = sourcesCount.get(key) ?? 0;
+        const badge = hubs.has(key) ? `хаб · ${sources}` : '';
+        const farFit = Math.min(140, (w - 24) / ([...key].length * 0.6));
+        out.push(`<g class="xv-card${hubs.has(key) ? ' hub' : ''}" data-key="${(0, text_1.escapeXml)(key)}" transform="translate(${r1(placed.x)} ${r1(placed.y)})" style="${zoneStyle(placed.zone)}">` +
+            `<rect class="xv-card-bg" width="${w}" height="${h}" rx="6"/>` +
+            `<path class="xv-card-head" d="M0,6 Q0,0 6,0 H${w - 6} Q${w},0 ${w},6 V${hr} H0 Z"/>` +
+            `<text class="xv-card-title" x="${spacing.cardPadX}" y="${hr / 2 + 4.5}">${(0, text_1.escapeXml)(key)}</text>` +
+            (badge
+                ? `<text class="xv-card-badge" x="${w - spacing.cardPadX}" y="${hr / 2 + 4}" text-anchor="end">${badge}</text>`
+                : ''));
+        const plain = (row) => row !== undefined && row.kind !== 'block' && row.kind !== 'variant';
+        card.rows.forEach((row, i) => {
+            const { y, h: rowH } = row;
+            const base = y + rowH / 2 + 4;
+            const level = (0, cards_1.rowLevel)(row);
+            const inset = (0, cards_1.boxInset)(level);
+            const pad = (0, cards_1.textInset)(level, spacing);
+            const isRelation = row.kind === 'ref' || row.kind === 'set' || row.kind === 'own' || row.kind === 'owner';
+            const detailStyle = isRelation && row.target ? ` style="--t: var(${(0, palette_1.zoneVar)(zoneOf(row.target))})"` : '';
+            const label = (0, text_1.escapeXml)(row.label) + (row.nullable ? '<tspan class="q">?</tspan>' : '');
+            let band = '';
+            if (row.kind === 'block') {
+                const x1 = inset + 0.5;
+                const x2 = w - inset - 0.5;
+                const bottom = (row.boxBottom ?? y + rowH) - 0.5;
+                const top = y + 0.5;
+                const head = y + rowH;
+                band =
+                    `<rect class="xv-block-box" x="${x1}" y="${top}" width="${r1(x2 - x1)}" height="${r1(bottom - top)}" rx="5" style="fill: color-mix(in srgb, var(--z) ${3 + 5 * level}%, var(--xv-surface))"/>` +
+                        `<path class="xv-block-head" d="M${x1},${head} V${top + 5} Q${x1},${top} ${x1 + 5},${top} H${x2 - 5} Q${x2},${top} ${x2},${top + 5} V${head} Z" style="fill: url(#${hatchId(placed.zone)})"/>` +
+                        `<line class="xv-block-rule" x1="${x1}" x2="${x2}" y1="${head}" y2="${head}"/>`;
+            }
+            else if (row.kind === 'variant') {
+                band = `<rect class="xv-variant-band" x="0.5" y="${y + 0.5}" width="${w - 1}" height="${rowH - 1}"/>`;
+            }
+            const prev = card.rows[i - 1];
+            const separated = plain(row) && plain(prev) && prev.y + prev.h === y;
+            out.push(`<g class="xv-row ${row.kind}" data-path="${(0, text_1.escapeXml)(row.path)}"${row.target ? ` data-target="${(0, text_1.escapeXml)(row.target)}"` : ''}>` +
+                band +
+                (separated
+                    ? `<line class="xv-row-sep" x1="${inset}" x2="${w - inset}" y1="${y}" y2="${y}"/>`
+                    : '') +
+                `<rect class="xv-row-bg" x="${inset + 0.5}" y="${y + 0.5}" width="${w - inset * 2 - 1}" height="${rowH - 1}"/>` +
+                `<text class="xv-row-label" x="${pad}" y="${base}">${label}</text>` +
+                (row.detail
+                    ? `<text class="xv-row-detail${isRelation ? ' rel' : ''}" x="${w - pad}" y="${base}" text-anchor="end"${detailStyle}>${(0, text_1.escapeXml)(row.detail)}</text>`
+                    : '') +
+                '</g>');
+        });
+        out.push(`<text class="xv-card-far" x="${w / 2}" y="${hr + 10}" text-anchor="middle" style="--fit: ${r1(farFit)}px">${(0, text_1.escapeXml)(key)}</text>`);
+        out.push('</g>');
+    }
+    out.push('</g>');
+    out.push('</svg>');
+    return out.join('\n');
+};
+exports.renderMapSvg = renderMapSvg;

package/dist/scheme-meta.d.ts

@@ -0,0 +1,90 @@
+type Primitive = {
+    type: 'string' | 'number' | 'boolean' | 'json';
+    nullable?: boolean;
+} | {
+    type: 'array';
+    itemType: 'number' | 'string' | 'json';
+} | {
+    type: 'enum' | 'literal';
+    values: (string | number)[];
+    nullable?: boolean;
+};
+export interface ModelProperties {
+    properties: PropertyMeta[];
+    references: RelationMeta[];
+}
+export interface EmbeddedMeta extends ModelProperties {
+    type: 'embedded';
+}
+export interface PropertyMeta {
+    target: Function;
+    propertyKey: string;
+    primitive: Primitive | EmbeddedMeta;
+}
+export interface RelationMeta {
+    target: Function;
+    refType: string;
+    propertyKey: string;
+    referenceModel: () => Function;
+}
+interface BaseModelScheme extends ModelProperties {
+    target: Function;
+    name: string;
+    identifier: {
+        propertyKey: string;
+        options: {
+            type: string;
+        };
+    };
+}
+export interface DiscriminatorScheme extends ModelProperties {
+    target: Function;
+    name: string;
+    value: string;
+}
+export type ModelScheme = (BaseModelScheme & {
+    type: 'base';
+}) | (BaseModelScheme & {
+    type: 'discriminated';
+    discriminatorKey: string;
+    discriminators: DiscriminatorScheme[];
+});
+export type TargetRef = {
+    refType: 'reference-to';
+    model: string;
+    nullable: boolean;
+} | {
+    refType: 'reference-set';
+    model: string;
+} | {
+    refType: 'has-many';
+    model: string;
+    cleanupBehavior?: 'cascade' | 'restrict';
+    modelBelongsToProperty: string;
+} | {
+    refType: 'belongs-to';
+    model: string;
+} | {
+    refType: 'owner' | 'owner-fallback';
+    model: string;
+};
+export type TargetRefs = Record<string, TargetRef>;
+export interface ReferenceScheme {
+    commonRefs: TargetRefs;
+    discriminatorRefs?: Record<string, TargetRefs>;
+    inverseRefs: {
+        model: string;
+        modelConsumerProperty: string;
+        onDeleteBehavior: 'restrict' | 'set-null' | 'unlink';
+    }[];
+}
+export interface SchemeSource {
+    collectionsScheme: Record<string, {
+        name: string;
+    }>;
+    models: Record<string, {
+        scheme: ModelScheme;
+        refscheme: ReferenceScheme;
+    }>;
+}
+export {};

package/dist/scheme-meta.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/text.d.ts

@@ -0,0 +1,2 @@
+export declare const plural: (n: number, forms: [string, string, string]) => string;
+export declare const escapeXml: (text: string) => string;