@avodado/render 0.1.2 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +131 -53
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ import { Document, BlockType, BlockDataMap } from '@avodado/core';
|
|
|
11
11
|
* standalone HTML produced by {@link renderDocument} (or copied verbatim into
|
|
12
12
|
* a static stylesheet).
|
|
13
13
|
*/
|
|
14
|
-
declare const houseCss = "*{box-sizing:border-box;margin:0;padding:0;}\nhtml{scroll-behavior:smooth;}\n/* Design tokens live on :root so a theme (applied as :root overrides) reaches\n the whole page \u2014 body chrome included, not just .docskin content. */\n:root{\n /* Default = \"textbook\": warm cream paper, deep academic navy, terracotta accent,\n classic serif display + body. Bigger headings for a printed-page feel. */\n --navy:#233a5e; --navy-tint:#c4d0e2; --blue:#2f5c8f; --light-blue:#e8eef6;\n --charcoal:#211f1a; --slate:#4a463d; --gray:#8a8475; --light-gray:#f2efe6;\n --rule:#e4dccb; --highlight:#9c4a2f; --highlight-soft:#f3e4dc;\n --positive:#3f7d4e; --positive-soft:#e3efe2; --negative:#a13b2e; --negative-soft:#f4e0db;\n --purple:#5b4a8a; --purple-soft:#ebe6f3; --teal:#2f6f6a; --teal-soft:#e0eeec; --white:#fcfbf7;\n --radius:4px;\n --font-display:\"Inter\",\"SF Pro Display\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif;\n --font-body:\"Inter\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif;\n --font-mono:\"SF Mono\",ui-monospace,Menlo,Consolas,\"Courier New\",monospace;\n}\nbody{background:var(--white);color:var(--charcoal);font-family:var(--font-body);font-size:15px;line-height:1.6;}\n.docskin{\n background:var(--white); color:var(--charcoal); font-family:var(--font-body); font-size:15px; line-height:1.6;\n max-width:1180px; margin:0 auto; padding:0 56px 128px;\n}\n.docskin .cover-bar{height:8px;background:var(--navy);margin:0 -56px 36px;}\n.docskin .cover-pad{padding:0 0 40px;margin-bottom:56px;border-bottom:1px solid var(--rule);}\n.docskin .cover-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray);font-weight:600;margin-bottom:32px;}\n.docskin .cover-meta .accent{color:var(--highlight);}\n.docskin .cover-title{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5.2vw,62px);line-height:1.08;letter-spacing:-.015em;color:var(--navy);margin:0 0 22px;}\n.docskin .cover-sub{font-size:19px;line-height:1.55;color:var(--slate);max-width:860px;margin:0 0 36px;}\n.docskin .section{padding:0;margin-bottom:64px;}\n.docskin .section > *:last-child{margin-bottom:0;}\n.docskin .section-num{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--highlight);font-weight:700;margin-bottom:8px;}\n.docskin .section-head{margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid var(--navy);}\n.docskin .section-head .section-title{border-bottom:0;padding-bottom:0;margin-bottom:14px;}\n.docskin .section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.15;letter-spacing:-.01em;color:var(--navy);margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--navy);}\n.docskin .section-lede{font-size:15.5px;color:var(--slate);line-height:1.6;max-width:860px;margin:0;}\n.docskin .section-block{margin-bottom:64px;}\n.docskin .section-block:last-child{margin-bottom:0;}\n.docskin .diagram{margin:28px 0 36px;border:1px solid var(--rule);background:var(--white);padding:22px 26px 18px;border-radius:var(--radius);}\n.docskin .diagram-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px dashed var(--rule);}\n.docskin .diagram-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;padding:3px 9px;background:var(--navy);color:var(--white);letter-spacing:.08em;text-transform:uppercase;}\n.docskin .diagram-tag.post{background:var(--navy);} .docskin .diagram-tag.get{background:var(--positive);} .docskin .diagram-tag.c4{background:var(--blue);}\n.docskin .diagram-title{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--charcoal);flex:1;}\n.docskin .diagram-fignum{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;font-weight:700;}\n.docskin .diagram-desc{font-size:13px;color:var(--slate);margin:0 0 12px;}\n.docskin .diagram svg{display:block;margin:0 auto;max-width:100%;height:auto;}\n/* sequence */\n.docskin .lane-head{fill:var(--navy);} .docskin .lane-head.ext{fill:var(--slate);}\n.docskin .lane-head-text{fill:var(--white);font-family:var(--font-body);font-size:12px;font-weight:700;text-anchor:middle;}\n.docskin .lane-head-sub{fill:var(--navy-tint);font-family:var(--font-mono);font-size:9px;text-anchor:middle;letter-spacing:.06em;}\n.docskin .lane-head-sub.ext{fill:#cbd5e1;}\n.docskin .lifeline{stroke:var(--gray);stroke-width:1;stroke-dasharray:3 3;}\n.docskin .activation{fill:var(--light-blue);stroke:var(--navy);stroke-width:1;} .docskin .activation.pg{fill:var(--positive-soft);stroke:var(--positive);}\n.docskin .msg-line{stroke:var(--charcoal);stroke-width:1.2;fill:none;}\n.docskin .msg-line.dashed{stroke-dasharray:5 3;} .docskin .msg-line.err{stroke:var(--negative);stroke-width:1.4;}\n.docskin .msg-text{fill:var(--charcoal);font-family:var(--font-mono);font-size:10.5px;}\n.docskin .msg-text.em{fill:var(--navy);font-weight:700;} .docskin .msg-text.err{fill:var(--negative);font-weight:700;} .docskin .msg-text.note{fill:var(--gray);font-style:italic;}\n.docskin .step-badge{fill:var(--navy);} .docskin .step-badge.err{fill:var(--negative);}\n.docskin .step-badge-text{fill:var(--white);font-family:var(--font-mono);font-size:10px;font-weight:700;text-anchor:middle;}\n.docskin .seq-steps{margin-top:16px;padding:14px 18px;background:var(--light-gray);border:1px solid var(--rule);}\n.docskin .seq-steps-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy);font-weight:700;margin-bottom:8px;}\n.docskin .seq-steps ol{list-style:none;counter-reset:step;padding:0;margin:0;}\n.docskin .seq-steps li{counter-increment:step;padding:7px 0 8px 40px;position:relative;border-bottom:1px solid var(--rule);}\n.docskin .seq-steps li:last-child{border-bottom:none;}\n.docskin .seq-steps li::before{content:counter(step);position:absolute;left:0;top:7px;width:26px;height:20px;background:var(--navy);color:var(--white);font-family:var(--font-mono);font-size:11px;font-weight:700;text-align:center;line-height:20px;border-radius:2px;}\n.docskin .seq-steps li.err::before{background:var(--negative);}\n.docskin .step-actor{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--navy);margin-right:8px;text-transform:uppercase;letter-spacing:.06em;}\n.docskin .step-actor.err{color:var(--negative);}\n.docskin .step-summary{font-size:13px;color:var(--charcoal);}\n/* c4 */\n.docskin .c4-name{font-family:var(--font-display);font-size:14px;font-weight:700;}\n.docskin .c4-tech{font-family:var(--font-mono);font-size:9.5px;}\n.docskin .c4-desc{font-family:var(--font-body);font-size:10px;}\n.docskin .c4-chip{font-family:var(--font-body);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}\n.docskin .edge-label{font-family:var(--font-body);font-size:9.5px;fill:var(--slate);text-anchor:middle;}\n.docskin .edge-label.err{fill:var(--negative);font-weight:700;}\n.docskin .c4-boundary{fill:none;stroke:var(--navy);stroke-width:1.4;stroke-dasharray:8 5;}\n.docskin .c4-boundary-label{font-family:var(--font-body);font-size:10px;font-weight:700;fill:var(--navy);letter-spacing:.08em;text-transform:uppercase;}\n.docskin .legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule);}\n.docskin .legend .item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--slate);}\n.docskin .legend .sw{width:13px;height:13px;border-radius:3px;}\n/* code block */\n.docskin .code-block{margin:12px 0 16px;border:1px solid var(--rule);}\n.docskin .code-header{display:flex;justify-content:space-between;padding:6px 14px;background:var(--light-gray);font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--slate);border-bottom:1px solid var(--rule);letter-spacing:.04em;}\n.docskin .code-block pre{padding:14px 16px;font-family:var(--font-mono);font-size:12px;line-height:1.55;color:var(--charcoal);overflow-x:auto;background:var(--white);white-space:pre;margin:0;}\n.docskin .code-block .kw{color:var(--navy);font-weight:700;} .docskin .code-block .com{color:var(--gray);font-style:italic;}\n.docskin .code-block .str{color:var(--positive);} .docskin .code-block .num{color:var(--purple);} .docskin .code-block .fn{color:var(--blue);} .docskin .code-block .ty{color:var(--teal);}\n/* er */\n.docskin .er-head-text{fill:var(--white);font-family:var(--font-display);font-size:13px;font-weight:700;text-anchor:middle;}\n.docskin .er-col{font-family:var(--font-mono);font-size:10.5px;fill:var(--charcoal);} .docskin .er-col.dim{fill:var(--gray);}\n.docskin .er-key{font-family:var(--font-mono);font-size:9px;font-weight:700;fill:var(--navy);} .docskin .er-key.fk{fill:var(--highlight);}\n.docskin .er-rowline{stroke:var(--light-gray);stroke-width:1;}\n/* block / state / flow shared text */\n.docskin .blk-name{font-family:var(--font-display);font-size:13px;font-weight:700;}\n.docskin .blk-tech{font-family:var(--font-mono);font-size:9.5px;}\n.docskin .blk-chip{font-family:var(--font-body);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}\n.docskin .grp-label{font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}\n.docskin .sm-name{font-family:var(--font-display);font-size:13px;font-weight:700;text-anchor:middle;}\n.docskin .fc-label{font-family:var(--font-display);font-size:12px;font-weight:700;text-anchor:middle;}\n.docskin .endpoint-card{border:1px solid var(--rule);margin:16px 0;padding:18px 22px;background:var(--white);}\n.docskin .endpoint-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--rule);}\n.docskin .endpoint-method{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:4px 10px;color:var(--white);letter-spacing:.08em;text-transform:uppercase;}\n.docskin .endpoint-method.get{background:var(--positive);} .docskin .endpoint-method.post{background:var(--navy);} .docskin .endpoint-method.patch{background:var(--highlight);} .docskin .endpoint-method.delete{background:var(--negative);} .docskin .endpoint-method.put{background:var(--blue);}\n.docskin .endpoint-path{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--charcoal);flex:1;}\n.docskin .endpoint-status{font-family:var(--font-mono);font-size:11.5px;color:var(--positive);font-weight:700;}\n.docskin .endpoint-desc{font-size:13px;color:var(--slate);margin:0 0 8px;}\n.docskin .endpoint-card h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--highlight);margin:14px 0 6px;}\n.docskin .endpoint-card ul{margin:0 0 0 20px;} .docskin .endpoint-card li{font-size:13px;margin-bottom:3px;}\n.docskin code{font-family:var(--font-mono);font-size:.86em;background:var(--light-gray);padding:2px 6px;border-radius:2px;border:1px solid var(--rule);}\n.docskin .transition-table{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:12px;}\n.docskin .transition-table thead{background:var(--navy);color:#fff;}\n.docskin .transition-table th{text-align:left;padding:8px 10px;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;}\n.docskin .transition-table td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top;}\n.docskin .pill{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;padding:2px 7px;border-radius:2px;text-transform:uppercase;}\n.docskin .pill-init{background:var(--light-gray);color:var(--slate);border:1px solid var(--rule);}\n.docskin .pill-active{background:var(--positive-soft);color:var(--positive);border:1px solid var(--positive);}\n.docskin .pill-wait{background:var(--highlight-soft);color:var(--highlight);border:1px solid var(--highlight);}\n.docskin .pill-end{background:var(--charcoal);color:#fff;}\n/* presentation: comparison table */\n.docskin .pres-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px;}\n.docskin .pres-table thead{background:var(--navy);color:#fff;}\n.docskin .pres-table th{padding:9px 12px;text-align:left;font-family:var(--font-body);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}\n.docskin .pres-table th.r,.docskin .pres-table td.r{text-align:right;} .docskin .pres-table th.c,.docskin .pres-table td.c{text-align:center;}\n.docskin .pres-table th.hi{background:var(--highlight);}\n.docskin .pres-table td{padding:9px 12px;border-bottom:1px solid var(--rule);}\n.docskin .pres-table tbody tr:nth-child(even){background:var(--light-gray);}\n.docskin .pres-table td.lead{font-weight:700;color:var(--navy);font-family:var(--font-display);}\n.docskin .pres-table td.hi{background:var(--highlight-soft);}\n.docskin .cell-pos{color:var(--positive);font-weight:700;} .docskin .cell-neg{color:var(--negative);font-weight:700;} .docskin .cell-warn{color:var(--highlight);font-weight:700;} .docskin .cell-muted{color:var(--gray);}\n.docskin .badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;}\n.docskin .badge.yes{background:var(--positive-soft);color:var(--positive);} .docskin .badge.no{background:var(--negative-soft);color:var(--negative);}\n.docskin .tbl-note{font-size:11px;color:var(--gray);font-style:italic;margin-top:6px;}\n/* presentation: stat cards */\n.docskin .stat-row{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0;}\n.docskin .stat-card{flex:1 1 150px;border:1px solid var(--rule);border-top:3px solid var(--navy);padding:16px 18px;background:var(--white);}\n.docskin .stat-value{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--navy);line-height:1;}\n.docskin .stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--gray);font-weight:700;margin-top:8px;}\n.docskin .stat-delta{font-family:var(--font-mono);font-size:12px;font-weight:700;margin-top:6px;}\n.docskin .stat-delta.up{color:var(--positive);} .docskin .stat-delta.down{color:var(--negative);} .docskin .stat-delta.flat{color:var(--gray);}\n/* presentation: timeline */\n.docskin .tl{position:relative;margin:18px 0;padding-left:8px;}\n.docskin .tl::before{content:\"\";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--rule);}\n.docskin .tl-item{position:relative;padding:0 0 18px 30px;}\n.docskin .tl-item:last-child{padding-bottom:0;}\n.docskin .tl-dot{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--rule);box-sizing:border-box;}\n.docskin .tl-dot.done{background:var(--positive);border-color:var(--positive);} .docskin .tl-dot.current{background:var(--highlight);border-color:var(--highlight);} .docskin .tl-dot.next{border-color:var(--navy);}\n.docskin .tl-date{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--highlight);text-transform:uppercase;letter-spacing:.06em;}\n.docskin .tl-label{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--navy);margin:1px 0 2px;}\n.docskin .tl-desc{font-size:12.5px;color:var(--slate);}\n/* presentation: quadrant */\n.docskin .quad-axis{stroke:var(--charcoal);stroke-width:1.5;}\n.docskin .quad-end{font-family:var(--font-body);font-size:10px;font-weight:700;fill:var(--gray);text-transform:uppercase;letter-spacing:.06em;}\n.docskin .quad-title{font-family:var(--font-body);font-size:11px;font-weight:700;fill:var(--navy);text-transform:uppercase;letter-spacing:.08em;}\n.docskin .quad-pt-label{font-family:var(--font-body);font-size:11px;font-weight:700;fill:var(--charcoal);}\n.docskin .toc{margin:18px 0 6px;padding:14px 20px;background:var(--light-gray);border:1px solid var(--rule);border-left:4px solid var(--highlight);}\n.docskin .toc-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy);font-weight:700;margin-bottom:8px;}\n.docskin .toc ol{margin:0;padding-left:20px;} .docskin .toc li{font-size:13px;margin-bottom:4px;color:var(--slate);}\n.docskin .toc li span{color:var(--gray);font-family:var(--font-mono);font-size:11px;}\n/* swimlane */\n.docskin .sl-lane-label{font-family:var(--font-display);font-size:12px;font-weight:700;fill:#fff;}\n.docskin .sl-step{font-family:var(--font-body);font-size:11px;font-weight:700;text-anchor:middle;}\n/* callouts */\n.docskin .callout{border:1px solid var(--rule);border-left:4px solid var(--navy);padding:12px 16px;margin:10px 0;}\n.docskin .callout.note{border-left-color:var(--navy);background:var(--light-blue);} .docskin .callout.tip{border-left-color:var(--positive);background:var(--positive-soft);} .docskin .callout.warn{border-left-color:var(--highlight);background:var(--highlight-soft);} .docskin .callout.danger{border-left-color:var(--negative);background:var(--negative-soft);}\n.docskin .callout-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:4px;}\n.docskin .callout.note .callout-title{color:var(--navy);} .docskin .callout.tip .callout-title{color:var(--positive);} .docskin .callout.warn .callout-title{color:#b45309;} .docskin .callout.danger .callout-title{color:var(--negative);}\n.docskin .callout-body{font-size:13px;color:var(--slate);}\n/* prose */\n.docskin .prose h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.015em;color:var(--navy);margin:40px 0 14px;padding-bottom:12px;border-bottom:2px solid var(--navy);}\n.docskin .prose h2:first-child{margin-top:0;}\n.docskin .prose h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.005em;color:var(--navy);margin:36px 0 12px;}\n.docskin .prose h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--highlight);margin:22px 0 8px;}\n.docskin .prose p{font-size:14px;color:var(--charcoal);margin:0 0 14px;line-height:1.6;max-width:880px;}\n.docskin .prose ul,.docskin .prose ol{margin:0 0 14px 22px;}\n.docskin .prose li{font-size:13.5px;color:var(--charcoal);margin-bottom:4px;max-width:880px;line-height:1.55;}\n.docskin .prose blockquote{border-left:3px solid var(--highlight);padding:4px 14px;margin:14px 0;color:var(--slate);font-style:italic;font-family:var(--font-display);}\n.docskin .prose code{font-family:var(--font-mono);font-size:.86em;background:var(--light-gray);padding:2px 6px;border-radius:2px;color:var(--charcoal);border:1px solid var(--rule);}\n.docskin .prose strong{font-weight:700;color:var(--charcoal);}\n.docskin .prose em{font-style:italic;}\n/* glossary */\n.docskin .glossary{margin:10px 0;}\n.docskin .glossary .row{display:grid;grid-template-columns:170px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);}\n.docskin .glossary dt{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--navy);}\n.docskin .glossary dd{margin:0;font-size:13px;color:var(--slate);}\n/* pros / cons */\n.docskin .pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0;}\n.docskin .pc-col{border:1px solid var(--rule);padding:14px 16px;}\n.docskin .pc-col.pro{border-top:3px solid var(--positive);} .docskin .pc-col.con{border-top:3px solid var(--negative);}\n.docskin .pc-head{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:8px;}\n.docskin .pc-col.pro .pc-head{color:var(--positive);} .docskin .pc-col.con .pc-head{color:var(--negative);}\n.docskin .pc-item{font-size:13px;color:var(--slate);padding:4px 0 4px 22px;position:relative;}\n.docskin .pc-item::before{position:absolute;left:0;top:4px;font-weight:700;}\n.docskin .pc-col.pro .pc-item::before{content:\"\\2713\";color:var(--positive);} .docskin .pc-col.con .pc-item::before{content:\"\\2717\";color:var(--negative);}\n/* current / target */\n.docskin .ct{display:flex;align-items:stretch;margin:12px 0;}\n.docskin .ct-panel{flex:1;border:1px solid var(--rule);padding:14px 18px;}\n.docskin .ct-panel.cur{background:var(--light-gray);} .docskin .ct-panel.tgt{border-top:3px solid var(--navy);}\n.docskin .ct-arrow{display:flex;align-items:center;padding:0 14px;color:var(--highlight);font-size:22px;font-weight:700;}\n.docskin .ct-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--gray);margin-bottom:8px;}\n.docskin .ct-panel.tgt .ct-label{color:var(--navy);}\n.docskin .ct-item{font-size:13px;color:var(--slate);padding:3px 0;}\n/* kanban */\n.docskin .kanban{display:flex;gap:14px;margin:12px 0;overflow-x:auto;}\n.docskin .kan-col{flex:1 1 0;min-width:150px;background:var(--light-gray);border:1px solid var(--rule);}\n.docskin .kan-head{background:var(--navy);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:8px 12px;}\n.docskin .kan-card{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--highlight);margin:8px;padding:9px 11px;}\n.docskin .kan-card-title{font-size:13px;font-weight:700;color:var(--charcoal);}\n.docskin .kan-card-tag{display:inline-block;font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);margin-top:4px;}\n/* pass 2 chart labels */\n.docskin .dfd-name{font-family:var(--font-display);font-size:12px;font-weight:700;text-anchor:middle;}\n.docskin .dfd-num{font-family:var(--font-mono);font-size:9px;font-weight:700;}\n.docskin .gantt-label{font-family:var(--font-body);font-size:11px;fill:var(--charcoal);}\n.docskin .gantt-head{font-family:var(--font-mono);font-size:9.5px;fill:var(--gray);text-anchor:middle;}\n.docskin .funnel-label{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;text-anchor:middle;}\n.docskin .funnel-val{font-family:var(--font-mono);font-size:11px;fill:#fff;text-anchor:middle;opacity:.9;}\n.docskin .pyr-label{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;text-anchor:middle;}\n.docskin .pyr-desc{font-family:var(--font-body);font-size:10px;fill:#fff;text-anchor:middle;opacity:.85;}\n/* indented tree */\n.docskin .tree-list{margin:10px 0;font-size:13px;}\n.docskin .tree-row{display:flex;align-items:baseline;padding:3px 0;}\n.docskin .tree-row .tw{color:var(--gray);margin-right:8px;font-family:var(--font-mono);font-size:11px;}\n.docskin .tree-row.branch .tw{color:var(--navy);}\n.docskin .tree-row .tlabel{color:var(--charcoal);font-family:var(--font-mono);}\n.docskin .tree-row.branch .tlabel{font-weight:700;color:var(--navy);}\n.docskin .tree-row .tnote{color:var(--gray);font-size:11px;margin-left:10px;font-family:var(--font-body);font-style:italic;}\n/* agenda */\n.docskin .agenda{margin:10px 0;}\n.docskin .agenda-row{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);}\n.docskin .agenda-time{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--navy);}\n.docskin .agenda-dur{font-family:var(--font-mono);font-size:10px;color:var(--gray);margin-top:2px;}\n.docskin .agenda-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--charcoal);}\n.docskin .agenda-owner{font-size:10.5px;color:var(--highlight);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-left:8px;}\n.docskin .agenda-desc{font-size:12.5px;color:var(--slate);margin-top:2px;}\n/* tracker */\n.docskin .trk{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px;}\n.docskin .trk thead{background:var(--navy);color:#fff;} .docskin .trk th{padding:8px 10px;text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}\n.docskin .trk td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:middle;}\n.docskin .trk tr.done .trk-task{text-decoration:line-through;color:var(--gray);}\n.docskin .st{display:inline-block;font-family:var(--font-mono);font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em;}\n.docskin .st.todo{background:var(--light-gray);color:var(--slate);border:1px solid var(--rule);} .docskin .st.doing{background:var(--highlight-soft);color:#b45309;} .docskin .st.done{background:var(--positive-soft);color:var(--positive);} .docskin .st.blocked{background:var(--negative-soft);color:var(--negative);}\n.docskin .pri{font-family:var(--font-mono);font-size:10px;font-weight:700;} .docskin .pri.high{color:var(--negative);} .docskin .pri.med{color:var(--highlight);} .docskin .pri.low{color:var(--gray);}\n/* cluster */\n.docskin .cl-head{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;}\n.docskin .cl-kind{font-family:var(--font-mono);font-size:9px;fill:#cfe0f3;text-anchor:end;text-transform:uppercase;letter-spacing:.06em;}\n/* user story */\n.docskin .story{border:1px solid var(--rule);border-left:4px solid var(--navy);padding:18px 22px;margin:12px 0;background:var(--white);}\n.docskin .story-stmt{font-family:var(--font-display);font-size:18px;line-height:1.55;color:var(--charcoal);}\n.docskin .story-stmt b{color:var(--navy);}\n.docskin .story-meta{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}\n.docskin .story-chip{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:3px;background:var(--light-gray);color:var(--slate);border:1px solid var(--rule);}\n.docskin .ac-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--highlight);font-weight:700;margin:16px 0 8px;}\n.docskin .ac-item{border:1px solid var(--rule);padding:10px 14px;margin-bottom:8px;background:var(--white);}\n.docskin .gwt{display:grid;grid-template-columns:60px 1fr;gap:4px 12px;font-size:13px;}\n.docskin .gwt .k{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding-top:1px;}\n.docskin .gwt .k.g{color:var(--positive);} .docskin .gwt .k.w{color:var(--navy);} .docskin .gwt .k.t{color:var(--highlight);}\n.docskin .gwt .v{color:var(--charcoal);}\n.docskin .links-row{display:flex;gap:8px;flex-wrap:wrap;}\n.docskin .link-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--navy);border:1px solid var(--navy);background:var(--white);padding:5px 11px;border-radius:20px;cursor:pointer;}\n.docskin .link-chip .lt{color:var(--gray);font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;}\n.docskin .footer{margin-top:8px;padding:18px 32px 28px;border-top:2px solid var(--navy);font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;font-weight:700;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}\n.docskin .footer .accent{color:var(--highlight);}\n.docskin .layer-label{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;}\n.docskin .uml-name{font-family:var(--font-display);font-size:13px;font-weight:700;text-anchor:middle;fill:#0a3a6e;}\n.docskin .uml-stereo{font-family:var(--font-body);font-size:9px;font-style:italic;text-anchor:middle;fill:#6b7280;}\n.docskin .uml-row{font-family:var(--font-mono);font-size:10.5px;fill:var(--charcoal);}\n.docskin .uml-sep{stroke:#0e54a1;stroke-width:1;}\n.docskin .ft-note{font-family:var(--font-mono);font-size:9px;}\n.docskin .tree-link{stroke:#9ca3af;stroke-width:1.3;fill:none;}\n/* wireframe / UI mockups */\n.docskin .wf-h{font-family:var(--font-display);font-size:18px;font-weight:700;}\n.docskin .wf-sub{font-family:var(--font-body);font-size:12px;font-weight:600;}\n.docskin .wf-btn{font-family:var(--font-body);font-size:11px;font-weight:700;fill:#fff;}\n.docskin .wf-ph-text{font-family:var(--font-body);font-size:10px;fill:var(--gray);}\n.docskin .wf-status{font-family:var(--font-mono);font-size:9px;fill:var(--charcoal);font-weight:700;}\n.docskin .wf-url{font-family:var(--font-mono);font-size:8.5px;fill:var(--gray);}\n.docskin .wf-tab{font-family:var(--font-body);font-size:8px;}\n.docskin .wf-caption{font-family:var(--font-mono);font-size:10px;fill:var(--gray);letter-spacing:.04em;}\n/* parse error */\n.docskin .err{font-family:var(--font-mono);font-size:12px;color:var(--negative);background:#fdf2f2;border:1px solid #f3c9c9;padding:8px 12px;margin:12px 0;white-space:pre-wrap;}";
|
|
14
|
+
declare const houseCss = "*{box-sizing:border-box;margin:0;padding:0;}\nhtml{scroll-behavior:smooth;}\n/* Design tokens live on :root so a theme (applied as :root overrides) reaches\n the whole page \u2014 body chrome included, not just .docskin content. */\n:root{\n /* Default = \"textbook\": warm cream paper, deep academic navy, terracotta accent,\n classic serif display + body. Bigger headings for a printed-page feel. */\n --navy:#233a5e; --navy-tint:#c4d0e2; --blue:#2f5c8f; --light-blue:#e8eef6;\n --charcoal:#211f1a; --slate:#4a463d; --gray:#8a8475; --light-gray:#f2efe6;\n --rule:#e4dccb; --highlight:#9c4a2f; --highlight-soft:#f3e4dc;\n --positive:#3f7d4e; --positive-soft:#e3efe2; --negative:#a13b2e; --negative-soft:#f4e0db;\n --purple:#5b4a8a; --purple-soft:#ebe6f3; --teal:#2f6f6a; --teal-soft:#e0eeec; --white:#fcfbf7;\n --radius:4px;\n --font-display:\"Inter\",\"SF Pro Display\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif;\n --font-body:\"Inter\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif;\n --font-mono:\"SF Mono\",ui-monospace,Menlo,Consolas,\"Courier New\",monospace;\n}\nbody{background:var(--white);color:var(--charcoal);font-family:var(--font-body);font-size:15px;line-height:1.6;}\n.docskin{\n background:var(--white); color:var(--charcoal); font-family:var(--font-body); font-size:15px; line-height:1.6;\n max-width:1180px; margin:0 auto; padding:0 56px 128px;\n}\n.docskin .cover-bar{height:8px;background:var(--navy);margin:0 -56px 36px;}\n.docskin .cover-pad{padding:0 0 40px;margin-bottom:56px;border-bottom:1px solid var(--rule);}\n.docskin .cover-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gray);font-weight:600;margin-bottom:32px;}\n.docskin .cover-meta .accent{color:var(--highlight);}\n.docskin .cover-title{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5.2vw,62px);line-height:1.08;letter-spacing:-.015em;color:var(--navy);margin:0 0 22px;}\n.docskin .cover-sub{font-size:19px;line-height:1.55;color:var(--slate);max-width:860px;margin:0 0 36px;}\n.docskin .section{padding:0;margin-bottom:64px;}\n.docskin .section > *:last-child{margin-bottom:0;}\n.docskin .section-num{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--highlight);font-weight:700;margin-bottom:8px;}\n.docskin .section-head{margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid var(--navy);}\n.docskin .section-head .section-title{border-bottom:0;padding-bottom:0;margin-bottom:14px;}\n.docskin .section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.15;letter-spacing:-.01em;color:var(--navy);margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--navy);}\n.docskin .section-lede{font-size:15.5px;color:var(--slate);line-height:1.6;max-width:860px;margin:0;}\n.docskin .section-block{margin-bottom:64px;}\n.docskin .section-block:last-child{margin-bottom:0;}\n.docskin .diagram{margin:28px 0 36px;border:1px solid var(--rule);background:var(--white);padding:22px 26px 18px;border-radius:var(--radius);}\n.docskin .diagram-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px dashed var(--rule);}\n.docskin .diagram-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;padding:3px 9px;background:var(--navy);color:var(--white);letter-spacing:.08em;text-transform:uppercase;}\n.docskin .diagram-tag.post{background:var(--navy);} .docskin .diagram-tag.get{background:var(--positive);} .docskin .diagram-tag.c4{background:var(--blue);}\n.docskin .diagram-title{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--charcoal);flex:1;}\n.docskin .diagram-fignum{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;font-weight:700;}\n.docskin .diagram-desc{font-size:13px;color:var(--slate);margin:0 0 12px;}\n.docskin .diagram svg{display:block;margin:0 auto;max-width:100%;height:auto;}\n/* sequence */\n.docskin .lane-head{fill:var(--navy);} .docskin .lane-head.ext{fill:var(--slate);}\n.docskin .lane-head-text{fill:var(--white);font-family:var(--font-body);font-size:12px;font-weight:700;text-anchor:middle;}\n.docskin .lane-head-sub{fill:var(--navy-tint);font-family:var(--font-mono);font-size:9px;text-anchor:middle;letter-spacing:.06em;}\n.docskin .lane-head-sub.ext{fill:#cbd5e1;}\n.docskin .lifeline{stroke:var(--gray);stroke-width:1;stroke-dasharray:3 3;}\n.docskin .activation{fill:var(--light-blue);stroke:var(--navy);stroke-width:1;} .docskin .activation.pg{fill:var(--positive-soft);stroke:var(--positive);}\n.docskin .msg-line{stroke:var(--charcoal);stroke-width:1.2;fill:none;}\n.docskin .msg-line.dashed{stroke-dasharray:5 3;} .docskin .msg-line.err{stroke:var(--negative);stroke-width:1.4;}\n.docskin .msg-text{fill:var(--charcoal);font-family:var(--font-mono);font-size:10.5px;}\n.docskin .msg-text.em{fill:var(--navy);font-weight:700;} .docskin .msg-text.err{fill:var(--negative);font-weight:700;} .docskin .msg-text.note{fill:var(--gray);font-style:italic;}\n.docskin .step-badge{fill:var(--navy);} .docskin .step-badge.err{fill:var(--negative);}\n.docskin .step-badge-text{fill:var(--white);font-family:var(--font-mono);font-size:10px;font-weight:700;text-anchor:middle;}\n.docskin .seq-steps{margin-top:16px;padding:14px 18px;background:var(--light-gray);border:1px solid var(--rule);}\n.docskin .seq-steps-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy);font-weight:700;margin-bottom:8px;}\n.docskin .seq-steps ol{list-style:none;counter-reset:step;padding:0;margin:0;}\n.docskin .seq-steps li{counter-increment:step;padding:7px 0 8px 40px;position:relative;border-bottom:1px solid var(--rule);}\n.docskin .seq-steps li:last-child{border-bottom:none;}\n.docskin .seq-steps li::before{content:counter(step);position:absolute;left:0;top:7px;width:26px;height:20px;background:var(--navy);color:var(--white);font-family:var(--font-mono);font-size:11px;font-weight:700;text-align:center;line-height:20px;border-radius:2px;}\n.docskin .seq-steps li.err::before{background:var(--negative);}\n.docskin .step-actor{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--navy);margin-right:8px;text-transform:uppercase;letter-spacing:.06em;}\n.docskin .step-actor.err{color:var(--negative);}\n.docskin .step-summary{font-size:13px;color:var(--charcoal);}\n/* c4 */\n.docskin .c4-name{font-family:var(--font-display);font-size:14px;font-weight:700;}\n.docskin .c4-tech{font-family:var(--font-mono);font-size:9.5px;}\n.docskin .c4-desc{font-family:var(--font-body);font-size:10px;}\n.docskin .c4-chip{font-family:var(--font-body);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}\n.docskin .edge-label{font-family:var(--font-body);font-size:9.5px;fill:var(--slate);text-anchor:middle;}\n.docskin .edge-label.err{fill:var(--negative);font-weight:700;}\n.docskin .c4-boundary{fill:none;stroke:var(--navy);stroke-width:1.4;stroke-dasharray:8 5;}\n.docskin .c4-boundary-label{font-family:var(--font-body);font-size:10px;font-weight:700;fill:var(--navy);letter-spacing:.08em;text-transform:uppercase;}\n.docskin .legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule);}\n.docskin .legend .item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--slate);}\n.docskin .legend .sw{width:13px;height:13px;border-radius:3px;}\n/* code block */\n.docskin .code-block{margin:12px 0 16px;border:1px solid var(--rule);}\n.docskin .code-header{display:flex;justify-content:space-between;padding:6px 14px;background:var(--light-gray);font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--slate);border-bottom:1px solid var(--rule);letter-spacing:.04em;}\n.docskin .code-block pre{padding:14px 16px;font-family:var(--font-mono);font-size:12px;line-height:1.55;color:var(--charcoal);overflow-x:auto;background:var(--white);white-space:pre;margin:0;}\n.docskin .code-block .kw{color:var(--navy);font-weight:700;} .docskin .code-block .com{color:var(--gray);font-style:italic;}\n.docskin .code-block .str{color:var(--positive);} .docskin .code-block .num{color:var(--purple);} .docskin .code-block .fn{color:var(--blue);} .docskin .code-block .ty{color:var(--teal);}\n/* er */\n.docskin .er-head-text{fill:var(--white);font-family:var(--font-display);font-size:13px;font-weight:700;text-anchor:middle;}\n.docskin .er-col{font-family:var(--font-mono);font-size:10.5px;fill:var(--charcoal);} .docskin .er-col.dim{fill:var(--gray);}\n.docskin .er-key{font-family:var(--font-mono);font-size:9px;font-weight:700;fill:var(--navy);} .docskin .er-key.fk{fill:var(--highlight);}\n.docskin .er-rowline{stroke:var(--light-gray);stroke-width:1;}\n/* block / state / flow shared text */\n.docskin .blk-name{font-family:var(--font-display);font-size:13px;font-weight:700;}\n.docskin .blk-tech{font-family:var(--font-mono);font-size:9.5px;}\n.docskin .blk-chip{font-family:var(--font-body);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}\n.docskin .grp-label{font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}\n.docskin .sm-name{font-family:var(--font-display);font-size:13px;font-weight:700;text-anchor:middle;}\n.docskin .fc-label{font-family:var(--font-display);font-size:12px;font-weight:700;text-anchor:middle;}\n.docskin .endpoint-card{border:1px solid var(--rule);margin:16px 0;padding:18px 22px;background:var(--white);}\n.docskin .endpoint-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--rule);}\n.docskin .endpoint-method{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:4px 10px;color:var(--white);letter-spacing:.08em;text-transform:uppercase;}\n.docskin .endpoint-method.get{background:var(--positive);} .docskin .endpoint-method.post{background:var(--navy);} .docskin .endpoint-method.patch{background:var(--highlight);} .docskin .endpoint-method.delete{background:var(--negative);} .docskin .endpoint-method.put{background:var(--blue);}\n.docskin .endpoint-path{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--charcoal);flex:1;}\n.docskin .endpoint-status{font-family:var(--font-mono);font-size:11.5px;color:var(--positive);font-weight:700;}\n.docskin .endpoint-desc{font-size:13px;color:var(--slate);margin:0 0 8px;}\n.docskin .endpoint-card h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--highlight);margin:14px 0 6px;}\n.docskin .endpoint-card ul{margin:0 0 0 20px;} .docskin .endpoint-card li{font-size:13px;margin-bottom:3px;}\n.docskin code{font-family:var(--font-mono);font-size:.86em;background:var(--light-gray);padding:2px 6px;border-radius:2px;border:1px solid var(--rule);}\n.docskin .transition-table{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:12px;}\n.docskin .transition-table thead{background:var(--navy);color:#fff;}\n.docskin .transition-table th{text-align:left;padding:8px 10px;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;}\n.docskin .transition-table td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top;}\n.docskin .pill{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;padding:2px 7px;border-radius:2px;text-transform:uppercase;}\n.docskin .pill-init{background:var(--light-gray);color:var(--slate);border:1px solid var(--rule);}\n.docskin .pill-active{background:var(--positive-soft);color:var(--positive);border:1px solid var(--positive);}\n.docskin .pill-wait{background:var(--highlight-soft);color:var(--highlight);border:1px solid var(--highlight);}\n.docskin .pill-end{background:var(--charcoal);color:#fff;}\n/* presentation: comparison table */\n.docskin .pres-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px;}\n.docskin .pres-table thead{background:var(--navy);color:#fff;}\n.docskin .pres-table th{padding:9px 12px;text-align:left;font-family:var(--font-body);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}\n.docskin .pres-table th.r,.docskin .pres-table td.r{text-align:right;} .docskin .pres-table th.c,.docskin .pres-table td.c{text-align:center;}\n.docskin .pres-table th.hi{background:var(--highlight);}\n.docskin .pres-table td{padding:9px 12px;border-bottom:1px solid var(--rule);}\n.docskin .pres-table tbody tr:nth-child(even){background:var(--light-gray);}\n.docskin .pres-table td.lead{font-weight:700;color:var(--navy);font-family:var(--font-display);}\n.docskin .pres-table td.hi{background:var(--highlight-soft);}\n.docskin .cell-pos{color:var(--positive);font-weight:700;} .docskin .cell-neg{color:var(--negative);font-weight:700;} .docskin .cell-warn{color:var(--highlight);font-weight:700;} .docskin .cell-muted{color:var(--gray);}\n.docskin .badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;}\n.docskin .badge.yes{background:var(--positive-soft);color:var(--positive);} .docskin .badge.no{background:var(--negative-soft);color:var(--negative);}\n.docskin .tbl-note{font-size:11px;color:var(--gray);font-style:italic;margin-top:6px;}\n/* presentation: stat cards */\n.docskin .stat-row{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0;}\n.docskin .stat-card{flex:1 1 150px;border:1px solid var(--rule);border-top:3px solid var(--navy);padding:16px 18px;background:var(--white);}\n.docskin .stat-value{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--navy);line-height:1;}\n.docskin .stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--gray);font-weight:700;margin-top:8px;}\n.docskin .stat-delta{font-family:var(--font-mono);font-size:12px;font-weight:700;margin-top:6px;}\n.docskin .stat-delta.up{color:var(--positive);} .docskin .stat-delta.down{color:var(--negative);} .docskin .stat-delta.flat{color:var(--gray);}\n/* presentation: timeline */\n.docskin .tl{position:relative;margin:18px 0;padding-left:8px;}\n.docskin .tl::before{content:\"\";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--rule);}\n.docskin .tl-item{position:relative;padding:0 0 18px 30px;}\n.docskin .tl-item:last-child{padding-bottom:0;}\n.docskin .tl-dot{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--white);border:3px solid var(--rule);box-sizing:border-box;}\n.docskin .tl-dot.done{background:var(--positive);border-color:var(--positive);} .docskin .tl-dot.current{background:var(--highlight);border-color:var(--highlight);} .docskin .tl-dot.next{border-color:var(--navy);}\n.docskin .tl-date{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--highlight);text-transform:uppercase;letter-spacing:.06em;}\n.docskin .tl-label{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--navy);margin:1px 0 2px;}\n.docskin .tl-desc{font-size:12.5px;color:var(--slate);}\n/* presentation: quadrant */\n.docskin .quad-axis{stroke:var(--charcoal);stroke-width:1.5;}\n.docskin .quad-end{font-family:var(--font-body);font-size:10px;font-weight:700;fill:var(--gray);text-transform:uppercase;letter-spacing:.06em;}\n.docskin .quad-title{font-family:var(--font-body);font-size:11px;font-weight:700;fill:var(--navy);text-transform:uppercase;letter-spacing:.08em;}\n.docskin .quad-pt-label{font-family:var(--font-body);font-size:11px;font-weight:700;fill:var(--charcoal);}\n.docskin .toc{margin:18px 0 6px;padding:14px 20px;background:var(--light-gray);border:1px solid var(--rule);border-left:4px solid var(--highlight);border-radius:0 var(--radius) var(--radius) 0;}\n.docskin .toc-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy);font-weight:700;margin-bottom:8px;}\n.docskin .toc ol{margin:0;padding-left:20px;} .docskin .toc li{font-size:13px;margin-bottom:4px;color:var(--slate);}\n.docskin .toc li span{color:var(--gray);font-family:var(--font-mono);font-size:11px;}\n/* swimlane */\n.docskin .sl-lane-label{font-family:var(--font-display);font-size:12px;font-weight:700;fill:#fff;}\n.docskin .sl-step{font-family:var(--font-body);font-size:11px;font-weight:700;text-anchor:middle;}\n/* callouts */\n.docskin .callout{border:1px solid var(--rule);border-left:4px solid var(--navy);padding:12px 16px;margin:10px 0;border-radius:0 var(--radius) var(--radius) 0;}\n.docskin .callout.note{border-left-color:var(--navy);background:var(--light-blue);} .docskin .callout.tip{border-left-color:var(--positive);background:var(--positive-soft);} .docskin .callout.warn{border-left-color:var(--highlight);background:var(--highlight-soft);} .docskin .callout.danger{border-left-color:var(--negative);background:var(--negative-soft);}\n.docskin .callout-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:4px;}\n.docskin .callout.note .callout-title{color:var(--navy);} .docskin .callout.tip .callout-title{color:var(--positive);} .docskin .callout.warn .callout-title{color:#b45309;} .docskin .callout.danger .callout-title{color:var(--negative);}\n.docskin .callout-body{font-size:13px;color:var(--slate);}\n/* prose */\n.docskin .prose h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.015em;color:var(--navy);margin:40px 0 14px;padding-bottom:12px;border-bottom:2px solid var(--navy);}\n.docskin .prose h2:first-child{margin-top:0;}\n.docskin .prose h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.005em;color:var(--navy);margin:36px 0 12px;}\n.docskin .prose h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--highlight);margin:22px 0 8px;}\n.docskin .prose p{font-size:14px;color:var(--charcoal);margin:0 0 14px;line-height:1.6;max-width:880px;}\n.docskin .prose ul,.docskin .prose ol{margin:0 0 14px 22px;}\n.docskin .prose li{font-size:13.5px;color:var(--charcoal);margin-bottom:4px;max-width:880px;line-height:1.55;}\n.docskin .prose blockquote{border-left:3px solid var(--highlight);padding:4px 14px;margin:14px 0;color:var(--slate);font-style:italic;font-family:var(--font-display);}\n.docskin .prose code{font-family:var(--font-mono);font-size:.86em;background:var(--light-gray);padding:2px 6px;border-radius:2px;color:var(--charcoal);border:1px solid var(--rule);}\n.docskin .prose strong{font-weight:700;color:var(--charcoal);}\n.docskin .prose em{font-style:italic;}\n/* glossary */\n.docskin .glossary{margin:10px 0;}\n.docskin .glossary .row{display:grid;grid-template-columns:170px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);}\n.docskin .glossary dt{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--navy);}\n.docskin .glossary dd{margin:0;font-size:13px;color:var(--slate);}\n/* pros / cons */\n.docskin .pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0;}\n.docskin .pc-col{border:1px solid var(--rule);padding:14px 16px;}\n.docskin .pc-col.pro{border-top:3px solid var(--positive);} .docskin .pc-col.con{border-top:3px solid var(--negative);}\n.docskin .pc-head{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:8px;}\n.docskin .pc-col.pro .pc-head{color:var(--positive);} .docskin .pc-col.con .pc-head{color:var(--negative);}\n.docskin .pc-item{font-size:13px;color:var(--slate);padding:4px 0 4px 22px;position:relative;}\n.docskin .pc-item::before{position:absolute;left:0;top:4px;font-weight:700;}\n.docskin .pc-col.pro .pc-item::before{content:\"\\2713\";color:var(--positive);} .docskin .pc-col.con .pc-item::before{content:\"\\2717\";color:var(--negative);}\n/* current / target */\n.docskin .ct{display:flex;align-items:stretch;margin:12px 0;}\n.docskin .ct-panel{flex:1;border:1px solid var(--rule);padding:14px 18px;}\n.docskin .ct-panel.cur{background:var(--light-gray);} .docskin .ct-panel.tgt{border-top:3px solid var(--navy);}\n.docskin .ct-arrow{display:flex;align-items:center;padding:0 14px;color:var(--highlight);font-size:22px;font-weight:700;}\n.docskin .ct-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--gray);margin-bottom:8px;}\n.docskin .ct-panel.tgt .ct-label{color:var(--navy);}\n.docskin .ct-item{font-size:13px;color:var(--slate);padding:3px 0;}\n/* kanban */\n.docskin .kanban{display:flex;gap:14px;margin:12px 0;overflow-x:auto;}\n.docskin .kan-col{flex:1 1 0;min-width:150px;background:var(--light-gray);border:1px solid var(--rule);}\n.docskin .kan-head{background:var(--navy);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:8px 12px;}\n.docskin .kan-card{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--highlight);margin:8px;padding:9px 11px;border-radius:0 var(--radius) var(--radius) 0;}\n.docskin .kan-card-title{font-size:13px;font-weight:700;color:var(--charcoal);}\n.docskin .kan-card-tag{display:inline-block;font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);margin-top:4px;}\n/* pass 2 chart labels */\n.docskin .dfd-name{font-family:var(--font-display);font-size:12px;font-weight:700;text-anchor:middle;}\n.docskin .dfd-num{font-family:var(--font-mono);font-size:9px;font-weight:700;}\n.docskin .gantt-label{font-family:var(--font-body);font-size:11px;fill:var(--charcoal);}\n.docskin .gantt-head{font-family:var(--font-mono);font-size:9.5px;fill:var(--gray);text-anchor:middle;}\n.docskin .funnel-label{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;text-anchor:middle;}\n.docskin .funnel-val{font-family:var(--font-mono);font-size:11px;fill:#fff;text-anchor:middle;opacity:.9;}\n.docskin .pyr-label{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;text-anchor:middle;}\n.docskin .pyr-desc{font-family:var(--font-body);font-size:10px;fill:#fff;text-anchor:middle;opacity:.85;}\n/* indented tree */\n.docskin .tree-list{margin:10px 0;font-size:13px;}\n.docskin .tree-row{display:flex;align-items:baseline;padding:3px 0;}\n.docskin .tree-row .tw{color:var(--gray);margin-right:8px;font-family:var(--font-mono);font-size:11px;}\n.docskin .tree-row.branch .tw{color:var(--navy);}\n.docskin .tree-row .tlabel{color:var(--charcoal);font-family:var(--font-mono);}\n.docskin .tree-row.branch .tlabel{font-weight:700;color:var(--navy);}\n.docskin .tree-row .tnote{color:var(--gray);font-size:11px;margin-left:10px;font-family:var(--font-body);font-style:italic;}\n/* agenda */\n.docskin .agenda{margin:10px 0;}\n.docskin .agenda-row{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--rule);}\n.docskin .agenda-time{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--navy);}\n.docskin .agenda-dur{font-family:var(--font-mono);font-size:10px;color:var(--gray);margin-top:2px;}\n.docskin .agenda-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--charcoal);}\n.docskin .agenda-owner{font-size:10.5px;color:var(--highlight);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-left:8px;}\n.docskin .agenda-desc{font-size:12.5px;color:var(--slate);margin-top:2px;}\n/* tracker */\n.docskin .trk{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px;}\n.docskin .trk thead{background:var(--navy);color:#fff;} .docskin .trk th{padding:8px 10px;text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}\n.docskin .trk td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:middle;}\n.docskin .trk tr.done .trk-task{text-decoration:line-through;color:var(--gray);}\n.docskin .st{display:inline-block;font-family:var(--font-mono);font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em;}\n.docskin .st.todo{background:var(--light-gray);color:var(--slate);border:1px solid var(--rule);} .docskin .st.doing{background:var(--highlight-soft);color:#b45309;} .docskin .st.done{background:var(--positive-soft);color:var(--positive);} .docskin .st.blocked{background:var(--negative-soft);color:var(--negative);}\n.docskin .pri{font-family:var(--font-mono);font-size:10px;font-weight:700;} .docskin .pri.high{color:var(--negative);} .docskin .pri.med{color:var(--highlight);} .docskin .pri.low{color:var(--gray);}\n/* cluster */\n.docskin .cl-head{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;}\n.docskin .cl-kind{font-family:var(--font-mono);font-size:9px;fill:#cfe0f3;text-anchor:end;text-transform:uppercase;letter-spacing:.06em;}\n/* user story */\n.docskin .story{border:1px solid var(--rule);border-left:4px solid var(--navy);padding:18px 22px;margin:12px 0;background:var(--white);border-radius:0 var(--radius) var(--radius) 0;}\n.docskin .story-stmt{font-family:var(--font-display);font-size:18px;line-height:1.55;color:var(--charcoal);}\n.docskin .story-stmt b{color:var(--navy);}\n.docskin .story-meta{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}\n.docskin .story-chip{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:3px;background:var(--light-gray);color:var(--slate);border:1px solid var(--rule);}\n.docskin .ac-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--highlight);font-weight:700;margin:16px 0 8px;}\n.docskin .ac-item{border:1px solid var(--rule);padding:10px 14px;margin-bottom:8px;background:var(--white);}\n.docskin .gwt{display:grid;grid-template-columns:60px 1fr;gap:4px 12px;font-size:13px;}\n.docskin .gwt .k{font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding-top:1px;}\n.docskin .gwt .k.g{color:var(--positive);} .docskin .gwt .k.w{color:var(--navy);} .docskin .gwt .k.t{color:var(--highlight);}\n.docskin .gwt .v{color:var(--charcoal);}\n.docskin .links-row{display:flex;gap:8px;flex-wrap:wrap;}\n.docskin .link-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--navy);border:1px solid var(--navy);background:var(--white);padding:5px 11px;border-radius:20px;cursor:pointer;}\n.docskin .link-chip .lt{color:var(--gray);font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;}\n.docskin .footer{margin-top:8px;padding:18px 32px 28px;border-top:2px solid var(--navy);font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;font-weight:700;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}\n.docskin .footer .accent{color:var(--highlight);}\n.docskin .layer-label{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;}\n.docskin .uml-name{font-family:var(--font-display);font-size:11.5px;font-weight:700;text-anchor:middle;fill:var(--navy);}\n.docskin .uml-stereo{font-family:var(--font-body);font-size:8.5px;font-style:italic;text-anchor:middle;fill:var(--gray);}\n.docskin .uml-row{font-family:var(--font-mono);font-size:9.5px;fill:var(--charcoal);}\n.docskin .uml-sep{stroke:var(--rule);stroke-width:1;}\n.docskin .ft-note{font-family:var(--font-mono);font-size:9px;}\n.docskin .tree-link{stroke:#9ca3af;stroke-width:1.3;fill:none;}\n/* wireframe / UI mockups */\n.docskin .wf-h{font-family:var(--font-display);font-size:18px;font-weight:700;}\n.docskin .wf-sub{font-family:var(--font-body);font-size:12px;font-weight:600;}\n.docskin .wf-btn{font-family:var(--font-body);font-size:11px;font-weight:700;fill:#fff;}\n.docskin .wf-ph-text{font-family:var(--font-body);font-size:10px;fill:var(--gray);}\n.docskin .wf-status{font-family:var(--font-mono);font-size:9px;fill:var(--charcoal);font-weight:700;}\n.docskin .wf-url{font-family:var(--font-mono);font-size:8.5px;fill:var(--gray);}\n.docskin .wf-tab{font-family:var(--font-body);font-size:8px;}\n.docskin .wf-caption{font-family:var(--font-mono);font-size:10px;fill:var(--gray);letter-spacing:.04em;}\n/* parse error */\n.docskin .err{font-family:var(--font-mono);font-size:12px;color:var(--negative);background:#fdf2f2;border:1px solid #f3c9c9;padding:8px 12px;margin:12px 0;white-space:pre-wrap;}";
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* HTML entity escaping, matching the reference renderer's `esc` semantics.
|
package/dist/index.js
CHANGED
|
@@ -154,7 +154,7 @@ body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);
|
|
|
154
154
|
.docskin .quad-end{font-family:var(--font-body);font-size:10px;font-weight:700;fill:var(--gray);text-transform:uppercase;letter-spacing:.06em;}
|
|
155
155
|
.docskin .quad-title{font-family:var(--font-body);font-size:11px;font-weight:700;fill:var(--navy);text-transform:uppercase;letter-spacing:.08em;}
|
|
156
156
|
.docskin .quad-pt-label{font-family:var(--font-body);font-size:11px;font-weight:700;fill:var(--charcoal);}
|
|
157
|
-
.docskin .toc{margin:18px 0 6px;padding:14px 20px;background:var(--light-gray);border:1px solid var(--rule);border-left:4px solid var(--highlight);}
|
|
157
|
+
.docskin .toc{margin:18px 0 6px;padding:14px 20px;background:var(--light-gray);border:1px solid var(--rule);border-left:4px solid var(--highlight);border-radius:0 var(--radius) var(--radius) 0;}
|
|
158
158
|
.docskin .toc-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy);font-weight:700;margin-bottom:8px;}
|
|
159
159
|
.docskin .toc ol{margin:0;padding-left:20px;} .docskin .toc li{font-size:13px;margin-bottom:4px;color:var(--slate);}
|
|
160
160
|
.docskin .toc li span{color:var(--gray);font-family:var(--font-mono);font-size:11px;}
|
|
@@ -162,7 +162,7 @@ body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);
|
|
|
162
162
|
.docskin .sl-lane-label{font-family:var(--font-display);font-size:12px;font-weight:700;fill:#fff;}
|
|
163
163
|
.docskin .sl-step{font-family:var(--font-body);font-size:11px;font-weight:700;text-anchor:middle;}
|
|
164
164
|
/* callouts */
|
|
165
|
-
.docskin .callout{border:1px solid var(--rule);border-left:4px solid var(--navy);padding:12px 16px;margin:10px 0;}
|
|
165
|
+
.docskin .callout{border:1px solid var(--rule);border-left:4px solid var(--navy);padding:12px 16px;margin:10px 0;border-radius:0 var(--radius) var(--radius) 0;}
|
|
166
166
|
.docskin .callout.note{border-left-color:var(--navy);background:var(--light-blue);} .docskin .callout.tip{border-left-color:var(--positive);background:var(--positive-soft);} .docskin .callout.warn{border-left-color:var(--highlight);background:var(--highlight-soft);} .docskin .callout.danger{border-left-color:var(--negative);background:var(--negative-soft);}
|
|
167
167
|
.docskin .callout-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:4px;}
|
|
168
168
|
.docskin .callout.note .callout-title{color:var(--navy);} .docskin .callout.tip .callout-title{color:var(--positive);} .docskin .callout.warn .callout-title{color:#b45309;} .docskin .callout.danger .callout-title{color:var(--negative);}
|
|
@@ -205,7 +205,7 @@ body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);
|
|
|
205
205
|
.docskin .kanban{display:flex;gap:14px;margin:12px 0;overflow-x:auto;}
|
|
206
206
|
.docskin .kan-col{flex:1 1 0;min-width:150px;background:var(--light-gray);border:1px solid var(--rule);}
|
|
207
207
|
.docskin .kan-head{background:var(--navy);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:8px 12px;}
|
|
208
|
-
.docskin .kan-card{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--highlight);margin:8px;padding:9px 11px;}
|
|
208
|
+
.docskin .kan-card{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--highlight);margin:8px;padding:9px 11px;border-radius:0 var(--radius) var(--radius) 0;}
|
|
209
209
|
.docskin .kan-card-title{font-size:13px;font-weight:700;color:var(--charcoal);}
|
|
210
210
|
.docskin .kan-card-tag{display:inline-block;font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);margin-top:4px;}
|
|
211
211
|
/* pass 2 chart labels */
|
|
@@ -245,7 +245,7 @@ body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);
|
|
|
245
245
|
.docskin .cl-head{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;}
|
|
246
246
|
.docskin .cl-kind{font-family:var(--font-mono);font-size:9px;fill:#cfe0f3;text-anchor:end;text-transform:uppercase;letter-spacing:.06em;}
|
|
247
247
|
/* user story */
|
|
248
|
-
.docskin .story{border:1px solid var(--rule);border-left:4px solid var(--navy);padding:18px 22px;margin:12px 0;background:var(--white);}
|
|
248
|
+
.docskin .story{border:1px solid var(--rule);border-left:4px solid var(--navy);padding:18px 22px;margin:12px 0;background:var(--white);border-radius:0 var(--radius) var(--radius) 0;}
|
|
249
249
|
.docskin .story-stmt{font-family:var(--font-display);font-size:18px;line-height:1.55;color:var(--charcoal);}
|
|
250
250
|
.docskin .story-stmt b{color:var(--navy);}
|
|
251
251
|
.docskin .story-meta{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
|
|
@@ -262,10 +262,10 @@ body{background:var(--white);color:var(--charcoal);font-family:var(--font-body);
|
|
|
262
262
|
.docskin .footer{margin-top:8px;padding:18px 32px 28px;border-top:2px solid var(--navy);font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;font-weight:700;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
|
|
263
263
|
.docskin .footer .accent{color:var(--highlight);}
|
|
264
264
|
.docskin .layer-label{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;}
|
|
265
|
-
.docskin .uml-name{font-family:var(--font-display);font-size:
|
|
266
|
-
.docskin .uml-stereo{font-family:var(--font-body);font-size:
|
|
267
|
-
.docskin .uml-row{font-family:var(--font-mono);font-size:
|
|
268
|
-
.docskin .uml-sep{stroke
|
|
265
|
+
.docskin .uml-name{font-family:var(--font-display);font-size:11.5px;font-weight:700;text-anchor:middle;fill:var(--navy);}
|
|
266
|
+
.docskin .uml-stereo{font-family:var(--font-body);font-size:8.5px;font-style:italic;text-anchor:middle;fill:var(--gray);}
|
|
267
|
+
.docskin .uml-row{font-family:var(--font-mono);font-size:9.5px;fill:var(--charcoal);}
|
|
268
|
+
.docskin .uml-sep{stroke:var(--rule);stroke-width:1;}
|
|
269
269
|
.docskin .ft-note{font-family:var(--font-mono);font-size:9px;}
|
|
270
270
|
.docskin .tree-link{stroke:#9ca3af;stroke-width:1.3;fill:none;}
|
|
271
271
|
/* wireframe / UI mockups */
|
|
@@ -2124,11 +2124,12 @@ function renderErd(data) {
|
|
|
2124
2124
|
const lo = Math.min(sx, tx) + 10;
|
|
2125
2125
|
const hi = Math.max(sx, tx) - 10;
|
|
2126
2126
|
const midX = hi > lo ? clamp((sx + tx) / 2, lo, hi) : (sx + tx) / 2;
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2127
|
+
const card = parseCard(r.card);
|
|
2128
|
+
s += `<path d="M${round(sx)},${round(fkY)} H${round(midX)} V${round(pkY)} H${round(tx)}" fill="none" stroke="var(--gray)" stroke-width="1.5"/>` + crowFoot(sx, fkY, rightward ? 1 : -1, card.fromMany) + crowFoot(tx, pkY, rightward ? -1 : 1, card.toMany);
|
|
2129
|
+
if (r.label !== void 0 && r.label !== "") {
|
|
2130
|
+
const w2 = Math.max(30, r.label.length * 6.4);
|
|
2130
2131
|
const cy = (fkY + pkY) / 2;
|
|
2131
|
-
s += `<rect x="${round(midX - w2 / 2)}" y="${round(cy - 9)}" width="${w2}" height="18" rx="9" fill="var(--white)" stroke="var(--rule)"/><text x="${round(midX)}" y="${round(cy + 3)}" class="edge-label">${escapeHtml(r.
|
|
2132
|
+
s += `<rect x="${round(midX - w2 / 2)}" y="${round(cy - 9)}" width="${round(w2)}" height="18" rx="9" fill="var(--white)" stroke="var(--rule)"/><text x="${round(midX)}" y="${round(cy + 3)}" class="edge-label">${escapeHtml(r.label)}</text>`;
|
|
2132
2133
|
}
|
|
2133
2134
|
});
|
|
2134
2135
|
for (const b of boxes) {
|
|
@@ -2180,9 +2181,19 @@ function pickFkIndex(columns, toName) {
|
|
|
2180
2181
|
});
|
|
2181
2182
|
return (match ?? first).i;
|
|
2182
2183
|
}
|
|
2183
|
-
function
|
|
2184
|
-
|
|
2185
|
-
|
|
2184
|
+
function parseCard(card) {
|
|
2185
|
+
if (card === void 0) return { fromMany: true, toMany: false };
|
|
2186
|
+
const parts = card.split(":");
|
|
2187
|
+
const many = (p2) => p2 !== void 0 && p2.trim().toUpperCase() !== "1";
|
|
2188
|
+
return { fromMany: many(parts[0]), toMany: many(parts[1]) };
|
|
2189
|
+
}
|
|
2190
|
+
function crowFoot(bx, y, outward, many) {
|
|
2191
|
+
if (many) {
|
|
2192
|
+
const ax = bx + outward * 14;
|
|
2193
|
+
return `<path d="M${round(ax)},${round(y)} L${round(bx)},${round(y - 7)} M${round(ax)},${round(y)} L${round(bx)},${round(y)} M${round(ax)},${round(y)} L${round(bx)},${round(y + 7)}" fill="none" stroke="var(--navy)" stroke-width="1.4" stroke-linecap="round"/>`;
|
|
2194
|
+
}
|
|
2195
|
+
const tx = bx + outward * 9;
|
|
2196
|
+
return `<line x1="${round(tx)}" y1="${round(y - 6)}" x2="${round(tx)}" y2="${round(y + 6)}" stroke="var(--navy)" stroke-width="1.4" stroke-linecap="round"/>`;
|
|
2186
2197
|
}
|
|
2187
2198
|
var clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
|
|
2188
2199
|
var round = (n) => Math.round(n * 10) / 10;
|
|
@@ -2718,7 +2729,52 @@ function edgePill(p2, label, err = false) {
|
|
|
2718
2729
|
if (label === void 0 || label === "") return "";
|
|
2719
2730
|
const w2 = Math.max(26, label.length * 5.4);
|
|
2720
2731
|
const errClass = err ? " err" : "";
|
|
2721
|
-
return `<g><rect x="${p2.lx - w2 / 2}" y="${p2.ly - 9}" width="${w2}" height="18" rx="9" fill="
|
|
2732
|
+
return `<g><rect x="${p2.lx - w2 / 2}" y="${p2.ly - 9}" width="${w2}" height="18" rx="9" fill="var(--white)" stroke="var(--rule)"/><text x="${p2.lx}" y="${p2.ly + 3}" class="edge-label${errClass}">${escapeHtml(label)}</text></g>`;
|
|
2733
|
+
}
|
|
2734
|
+
|
|
2735
|
+
// src/blocks/autoLayout.ts
|
|
2736
|
+
function ensureGrid(items, edges, rankdir) {
|
|
2737
|
+
const allPlaced = items.length > 0 && items.every((n) => n.col !== void 0 && n.row !== void 0);
|
|
2738
|
+
if (allPlaced) {
|
|
2739
|
+
return items.map((n) => ({ ...n, col: n.col, row: n.row }));
|
|
2740
|
+
}
|
|
2741
|
+
const grid = autoGrid(
|
|
2742
|
+
items.map((n) => n.id),
|
|
2743
|
+
edges,
|
|
2744
|
+
rankdir
|
|
2745
|
+
);
|
|
2746
|
+
return items.map((n) => {
|
|
2747
|
+
const g = grid.get(n.id) ?? { col: 1, row: 1 };
|
|
2748
|
+
return { ...n, col: g.col, row: g.row };
|
|
2749
|
+
});
|
|
2750
|
+
}
|
|
2751
|
+
function autoGrid(ids, edges, rankdir) {
|
|
2752
|
+
const idSet = new Set(ids);
|
|
2753
|
+
const g = new To.graphlib.Graph();
|
|
2754
|
+
g.setGraph({ rankdir, nodesep: 16, ranksep: 16, marginx: 0, marginy: 0 });
|
|
2755
|
+
g.setDefaultEdgeLabel(() => ({}));
|
|
2756
|
+
for (const id of ids) g.setNode(id, { width: 10, height: 10 });
|
|
2757
|
+
for (const e of edges) {
|
|
2758
|
+
if (e.from !== e.to && idSet.has(e.from) && idSet.has(e.to)) g.setEdge(e.from, e.to);
|
|
2759
|
+
}
|
|
2760
|
+
To.layout(g);
|
|
2761
|
+
const pos = ids.map((id) => {
|
|
2762
|
+
const n = g.node(id);
|
|
2763
|
+
return { id, x: Math.round(n?.x ?? 0), y: Math.round(n?.y ?? 0) };
|
|
2764
|
+
});
|
|
2765
|
+
const out = /* @__PURE__ */ new Map();
|
|
2766
|
+
if (rankdir === "TB") {
|
|
2767
|
+
const ranks = [...new Set(pos.map((p2) => p2.y))].sort((a, b) => a - b);
|
|
2768
|
+
ranks.forEach((yv, ri) => {
|
|
2769
|
+
pos.filter((p2) => p2.y === yv).sort((a, b) => a.x - b.x).forEach((p2, ci) => out.set(p2.id, { col: ci + 1, row: ri + 1 }));
|
|
2770
|
+
});
|
|
2771
|
+
} else {
|
|
2772
|
+
const ranks = [...new Set(pos.map((p2) => p2.x))].sort((a, b) => a - b);
|
|
2773
|
+
ranks.forEach((xv, ci) => {
|
|
2774
|
+
pos.filter((p2) => p2.x === xv).sort((a, b) => a.y - b.y).forEach((p2, ri) => out.set(p2.id, { col: ci + 1, row: ri + 1 }));
|
|
2775
|
+
});
|
|
2776
|
+
}
|
|
2777
|
+
return out;
|
|
2722
2778
|
}
|
|
2723
2779
|
|
|
2724
2780
|
// src/blocks/flow.ts
|
|
@@ -2736,8 +2792,8 @@ function flowStyle(kind) {
|
|
|
2736
2792
|
}
|
|
2737
2793
|
var ERR_LABEL_RE = /^(no|fail|error|reject)/i;
|
|
2738
2794
|
function renderFlowSvg(data) {
|
|
2739
|
-
const nodes = data.nodes ?? [];
|
|
2740
2795
|
const edges = data.edges ?? [];
|
|
2796
|
+
const nodes = ensureGrid(data.nodes ?? [], edges, "TB");
|
|
2741
2797
|
const cellW = 176;
|
|
2742
2798
|
const cellH = 70;
|
|
2743
2799
|
const gapX = 60;
|
|
@@ -2759,6 +2815,7 @@ function renderFlowSvg(data) {
|
|
|
2759
2815
|
const width = padX * 2 + cols * cellW + (cols - 1) * gapX;
|
|
2760
2816
|
const height = padTop + rows * cellH + (rows - 1) * gapY + padBot;
|
|
2761
2817
|
let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>Flowchart</title>`;
|
|
2818
|
+
const labels = [];
|
|
2762
2819
|
for (const e of edges) {
|
|
2763
2820
|
const A2 = byId.get(e.from);
|
|
2764
2821
|
const B2 = byId.get(e.to);
|
|
@@ -2768,7 +2825,8 @@ function renderFlowSvg(data) {
|
|
|
2768
2825
|
const stroke = isErr ? "#991b1b" : "#1a1a2e";
|
|
2769
2826
|
const marker = isErr ? "gErr" : "gArrow";
|
|
2770
2827
|
const sw = isErr ? 1.6 : 1.4;
|
|
2771
|
-
s += `<
|
|
2828
|
+
s += `<path d="${p2.d}" fill="none" stroke="${stroke}" stroke-width="${sw}" marker-end="url(#${marker})"/>`;
|
|
2829
|
+
labels.push(edgePill(p2, e.label, isErr));
|
|
2772
2830
|
}
|
|
2773
2831
|
for (const n of nodes) {
|
|
2774
2832
|
const r = rectFor2(n);
|
|
@@ -2789,6 +2847,7 @@ function renderFlowSvg(data) {
|
|
|
2789
2847
|
).join("");
|
|
2790
2848
|
s += `<g filter="url(#gshadow)">${shape}${texts}</g>`;
|
|
2791
2849
|
}
|
|
2850
|
+
s += labels.join("");
|
|
2792
2851
|
s += `</svg>`;
|
|
2793
2852
|
return s;
|
|
2794
2853
|
}
|
|
@@ -2828,8 +2887,8 @@ function pillCls(kind) {
|
|
|
2828
2887
|
return "pill pill-active";
|
|
2829
2888
|
}
|
|
2830
2889
|
function renderState(data) {
|
|
2831
|
-
const states = data.states ?? [];
|
|
2832
2890
|
const trans = data.transitions ?? [];
|
|
2891
|
+
const states = ensureGrid(data.states ?? [], trans, "LR");
|
|
2833
2892
|
const cellW = 168;
|
|
2834
2893
|
const cellH = 64;
|
|
2835
2894
|
const gapX = 74;
|
|
@@ -2843,6 +2902,7 @@ function renderState(data) {
|
|
|
2843
2902
|
const height = padTop * 2 + rows * cellH + (rows - 1) * gapY + padBot;
|
|
2844
2903
|
const byId = new Map(states.map((s2) => [s2.id, s2]));
|
|
2845
2904
|
let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>State machine</title>`;
|
|
2905
|
+
const labels = [];
|
|
2846
2906
|
for (const t of trans) {
|
|
2847
2907
|
const A2 = byId.get(t.from);
|
|
2848
2908
|
const B2 = byId.get(t.to);
|
|
@@ -2850,14 +2910,16 @@ function renderState(data) {
|
|
|
2850
2910
|
const label = t.event + (t.guard !== void 0 ? ` ${t.guard}` : "");
|
|
2851
2911
|
if (t.from === t.to) {
|
|
2852
2912
|
const r = rectFor(A2, cellW, cellH, gapX, gapY, padX, padTop);
|
|
2853
|
-
s += `<
|
|
2913
|
+
s += `<path d="M ${r.cx - 12} ${r.y} C ${r.cx - 30} ${r.y - 32}, ${r.cx + 30} ${r.y - 32}, ${r.cx + 12} ${r.y}" fill="none" stroke="#1a1a2e" stroke-width="1.3" marker-end="url(#gArrow)"/>`;
|
|
2914
|
+
labels.push(edgePill({ lx: r.cx, ly: r.y - 28 }, label));
|
|
2854
2915
|
continue;
|
|
2855
2916
|
}
|
|
2856
2917
|
const p2 = ortho(
|
|
2857
2918
|
rectFor(A2, cellW, cellH, gapX, gapY, padX, padTop),
|
|
2858
2919
|
rectFor(B2, cellW, cellH, gapX, gapY, padX, padTop)
|
|
2859
2920
|
);
|
|
2860
|
-
s += `<
|
|
2921
|
+
s += `<path d="${p2.d}" fill="none" stroke="#1a1a2e" stroke-width="1.3" marker-end="url(#gArrow)"/>`;
|
|
2922
|
+
labels.push(edgePill(p2, label));
|
|
2861
2923
|
}
|
|
2862
2924
|
for (const st2 of states) {
|
|
2863
2925
|
const r = rectFor(st2, cellW, cellH, gapX, gapY, padX, padTop);
|
|
@@ -2871,6 +2933,7 @@ function renderState(data) {
|
|
|
2871
2933
|
s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="23" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/><text x="${r.cx}" y="${r.cy + 4.5}" class="sm-name" fill="#1a1a2e">${escapeHtml(st2.name ?? "")}</text></g>`;
|
|
2872
2934
|
}
|
|
2873
2935
|
}
|
|
2936
|
+
s += labels.join("");
|
|
2874
2937
|
s += `</svg>`;
|
|
2875
2938
|
const name = (id) => byId.get(id)?.name ?? id;
|
|
2876
2939
|
const rows2 = trans.map(
|
|
@@ -2901,12 +2964,12 @@ function dfdStyle(kind) {
|
|
|
2901
2964
|
}
|
|
2902
2965
|
}
|
|
2903
2966
|
function renderDfd(data) {
|
|
2904
|
-
const nodes = data.nodes ?? [];
|
|
2905
2967
|
const edges = data.edges ?? [];
|
|
2906
|
-
const
|
|
2907
|
-
const
|
|
2908
|
-
const
|
|
2909
|
-
const
|
|
2968
|
+
const nodes = ensureGrid(data.nodes ?? [], edges, "LR");
|
|
2969
|
+
const cellW = 148;
|
|
2970
|
+
const cellH = 66;
|
|
2971
|
+
const gapX = 104;
|
|
2972
|
+
const gapY = 54;
|
|
2910
2973
|
const padX = 26;
|
|
2911
2974
|
const padTop = 26;
|
|
2912
2975
|
const padBot = 20;
|
|
@@ -2919,12 +2982,14 @@ function renderDfd(data) {
|
|
|
2919
2982
|
const width = padX * 2 + cols * cellW + (cols - 1) * gapX;
|
|
2920
2983
|
const height = padTop + rows * cellH + (rows - 1) * gapY + padBot;
|
|
2921
2984
|
let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>Data-flow diagram</title>`;
|
|
2985
|
+
const labels = [];
|
|
2922
2986
|
for (const e of edges) {
|
|
2923
2987
|
const A2 = byId.get(e.from);
|
|
2924
2988
|
const B2 = byId.get(e.to);
|
|
2925
2989
|
if (!A2 || !B2) continue;
|
|
2926
2990
|
const p2 = ortho(rectFor2(A2), rectFor2(B2));
|
|
2927
|
-
s += `<
|
|
2991
|
+
s += `<path d="${p2.d}" fill="none" stroke="#1a1a2e" stroke-width="1.4" marker-end="url(#gArrow)"/>`;
|
|
2992
|
+
labels.push(edgePill(p2, e.label));
|
|
2928
2993
|
}
|
|
2929
2994
|
for (const n of nodes) {
|
|
2930
2995
|
const r = rectFor2(n);
|
|
@@ -2941,6 +3006,7 @@ function renderDfd(data) {
|
|
|
2941
3006
|
const num = n.num !== void 0 && k2 === "process" ? `<text x="${r.x + 12}" y="${r.y + 18}" class="dfd-num" fill="${st2.text}">${escapeHtml(n.num)}</text>` : "";
|
|
2942
3007
|
s += `<g filter="url(#gshadow)">${shape}${num}<text x="${r.x + r.w / 2}" y="${r.y + r.h / 2 + 4}" class="dfd-name" fill="${st2.text}">${escapeHtml(n.name)}</text></g>`;
|
|
2943
3008
|
}
|
|
3009
|
+
s += labels.join("");
|
|
2944
3010
|
s += `</svg>`;
|
|
2945
3011
|
return diagramFrame(
|
|
2946
3012
|
{
|
|
@@ -3424,8 +3490,8 @@ var LEGEND = [
|
|
|
3424
3490
|
{ sw: "#f3f4f6", label: "External" }
|
|
3425
3491
|
];
|
|
3426
3492
|
function renderC4(data) {
|
|
3427
|
-
const nodes = data.nodes ?? [];
|
|
3428
3493
|
const edges = data.edges ?? [];
|
|
3494
|
+
const nodes = ensureGrid(data.nodes ?? [], edges, "TB");
|
|
3429
3495
|
const byId = new Map(nodes.map((n) => [n.id, n]));
|
|
3430
3496
|
const cellW = 212;
|
|
3431
3497
|
const cellH = 102;
|
|
@@ -3457,6 +3523,7 @@ function renderC4(data) {
|
|
|
3457
3523
|
}
|
|
3458
3524
|
}
|
|
3459
3525
|
let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>C4 diagram</title>${boundarySvg}`;
|
|
3526
|
+
const labels = [];
|
|
3460
3527
|
for (const e of edges) {
|
|
3461
3528
|
const A2 = byId.get(e.from);
|
|
3462
3529
|
const B2 = byId.get(e.to);
|
|
@@ -3469,7 +3536,8 @@ function renderC4(data) {
|
|
|
3469
3536
|
marker: "gArrow",
|
|
3470
3537
|
err: false
|
|
3471
3538
|
};
|
|
3472
|
-
s += `<
|
|
3539
|
+
s += `<path d="${p2.d}" fill="none" stroke="${st2.stroke}" stroke-width="${st2.sw}" stroke-dasharray="${st2.dash}" marker-end="url(#${st2.marker})"/>`;
|
|
3540
|
+
labels.push(edgePill(p2, e.label, st2.err));
|
|
3473
3541
|
}
|
|
3474
3542
|
for (const n of nodes) {
|
|
3475
3543
|
const r = rectFor2(n);
|
|
@@ -3480,8 +3548,9 @@ function renderC4(data) {
|
|
|
3480
3548
|
const strokeAttr = st2.solid === true ? "none" : st2.accent;
|
|
3481
3549
|
const dashAttr = st2.dash !== void 0 ? ` stroke-dasharray="${st2.dash}"` : "";
|
|
3482
3550
|
const stripe = st2.solid === true ? "" : `<rect x="${r.x}" y="${r.y}" width="5" height="${r.h}" rx="2" fill="${st2.accent}"/>`;
|
|
3483
|
-
const
|
|
3484
|
-
const
|
|
3551
|
+
const gx = r.x + r.w - 26;
|
|
3552
|
+
const personGlyph = n.kind === "person" ? `<g fill="${st2.text}"><circle cx="${gx + 7}" cy="${r.y + 18}" r="6"/><path d="M ${gx} ${r.y + 33} a 7 8 0 0 1 14 0 z"/></g>` : "";
|
|
3553
|
+
const chipX = px;
|
|
3485
3554
|
const chipFill = st2.solid === true ? st2.sub : st2.accent;
|
|
3486
3555
|
const techLine = n.tech !== void 0 ? `<text x="${px}" y="${r.y + 60}" class="c4-tech" fill="${st2.sub}">${escapeHtml(n.tech)}</text>` : "";
|
|
3487
3556
|
const descLines = desc.map(
|
|
@@ -3524,16 +3593,16 @@ function umlRel(kind) {
|
|
|
3524
3593
|
}
|
|
3525
3594
|
}
|
|
3526
3595
|
function renderUml(data) {
|
|
3527
|
-
const classes = data.classes ?? [];
|
|
3528
3596
|
const rels = data.rels ?? [];
|
|
3529
|
-
const
|
|
3530
|
-
const
|
|
3531
|
-
const
|
|
3532
|
-
const
|
|
3533
|
-
const
|
|
3534
|
-
const
|
|
3535
|
-
const
|
|
3536
|
-
const
|
|
3597
|
+
const classes = ensureGrid(data.classes ?? [], rels, "TB");
|
|
3598
|
+
const colW = 170;
|
|
3599
|
+
const gapX = 54;
|
|
3600
|
+
const gapY = 44;
|
|
3601
|
+
const padX = 24;
|
|
3602
|
+
const padTop = 28;
|
|
3603
|
+
const padBot = 20;
|
|
3604
|
+
const rowH = 15;
|
|
3605
|
+
const headH = (c) => 24 + (c.stereotype !== void 0 ? 11 : 0);
|
|
3537
3606
|
const compH = (list) => (list !== void 0 && list.length > 0 ? list.length * rowH : 6) + 8;
|
|
3538
3607
|
const clsH = (c) => headH(c) + compH(c.attrs) + compH(c.methods);
|
|
3539
3608
|
const cols = Math.max(1, ...classes.map((c) => c.col));
|
|
@@ -3559,6 +3628,7 @@ function renderUml(data) {
|
|
|
3559
3628
|
const width = padX * 2 + cols * colW + (cols - 1) * gapX;
|
|
3560
3629
|
const height = acc - gapY + padBot;
|
|
3561
3630
|
let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>UML class diagram</title><defs><marker id="umlTri" viewBox="0 0 14 14" refX="13" refY="7" markerWidth="15" markerHeight="15" orient="auto-start-reverse"><path d="M1,1 L13,7 L1,13 z" fill="#fff" stroke="#1a1a2e" stroke-width="1.2"/></marker><marker id="umlDiaF" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="20" markerHeight="12" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="#1a1a2e"/></marker><marker id="umlDiaH" viewBox="0 0 20 12" refX="19" refY="6" markerWidth="20" markerHeight="12" orient="auto-start-reverse"><path d="M1,6 L10,1 L19,6 L10,11 z" fill="#fff" stroke="#1a1a2e" stroke-width="1.2"/></marker><marker id="umlOpen" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="12" markerHeight="12" orient="auto-start-reverse"><path d="M1,1 L11,6 L1,11" fill="none" stroke="#1a1a2e" stroke-width="1.3"/></marker></defs>`;
|
|
3631
|
+
const labels = [];
|
|
3562
3632
|
for (const rl of rels) {
|
|
3563
3633
|
const A2 = byId.get(rl.from);
|
|
3564
3634
|
const B2 = byId.get(rl.to);
|
|
@@ -3567,7 +3637,8 @@ function renderUml(data) {
|
|
|
3567
3637
|
const st2 = umlRel(rl.kind);
|
|
3568
3638
|
const start = st2.start !== void 0 ? ` marker-start="url(#${st2.start})"` : "";
|
|
3569
3639
|
const end = st2.end !== void 0 ? ` marker-end="url(#${st2.end})"` : "";
|
|
3570
|
-
s += `<
|
|
3640
|
+
s += `<path d="${p2.d}" fill="none" stroke="#1a1a2e" stroke-width="1.3" stroke-dasharray="${st2.dash}"${start}${end}/>`;
|
|
3641
|
+
labels.push(edgePill(p2, rl.label));
|
|
3571
3642
|
}
|
|
3572
3643
|
for (const c of classes) {
|
|
3573
3644
|
const r = rectFor2(c);
|
|
@@ -3581,8 +3652,9 @@ function renderUml(data) {
|
|
|
3581
3652
|
const methods = (c.methods ?? []).map(
|
|
3582
3653
|
(m, j2) => `<text x="${r.x + 10}" y="${r.y + hh + aH + 14 + j2 * rowH}" class="uml-row">${escapeHtml(m)}</text>`
|
|
3583
3654
|
).join("");
|
|
3584
|
-
s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="3" fill="
|
|
3655
|
+
s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="3" fill="var(--white)" stroke="var(--navy)" stroke-width="1.3"/>` + stereo + `<text x="${r.x + r.w / 2}" y="${nameY}" class="uml-name">${escapeHtml(c.name)}</text><line x1="${r.x}" y1="${r.y + hh}" x2="${r.x + r.w}" y2="${r.y + hh}" class="uml-sep"/>` + attrs + `<line x1="${r.x}" y1="${r.y + hh + aH}" x2="${r.x + r.w}" y2="${r.y + hh + aH}" class="uml-sep"/>` + methods + `</g>`;
|
|
3585
3656
|
}
|
|
3657
|
+
s += labels.join("");
|
|
3586
3658
|
s += `</svg>`;
|
|
3587
3659
|
return diagramFrame(
|
|
3588
3660
|
{
|
|
@@ -3908,13 +3980,13 @@ function renderGrid(data) {
|
|
|
3908
3980
|
const groups = data.groups ?? [];
|
|
3909
3981
|
const nodes = data.nodes ?? [];
|
|
3910
3982
|
const edges = data.edges ?? [];
|
|
3911
|
-
const cellW =
|
|
3912
|
-
const cellH =
|
|
3983
|
+
const cellW = 178;
|
|
3984
|
+
const cellH = 80;
|
|
3913
3985
|
const gapX = 56;
|
|
3914
|
-
const gapY =
|
|
3915
|
-
const padX =
|
|
3916
|
-
const padTop =
|
|
3917
|
-
const padBot =
|
|
3986
|
+
const gapY = 62;
|
|
3987
|
+
const padX = 32;
|
|
3988
|
+
const padTop = 46;
|
|
3989
|
+
const padBot = 28;
|
|
3918
3990
|
const cols = Math.max(
|
|
3919
3991
|
1,
|
|
3920
3992
|
...nodes.map((n) => (n.col ?? 1) + ((n.w ?? 1) - 1)),
|
|
@@ -3955,13 +4027,15 @@ function renderGrid(data) {
|
|
|
3955
4027
|
const label = isContainer ? `<rect x="${r.x + (r.w - badgeW) / 2}" y="${r.y - 1}" width="${badgeW}" height="20" rx="10" fill="${col}"/><text x="${r.x + r.w / 2}" y="${r.y + 13}" class="grp-label" fill="#fff" text-anchor="middle">${escapeHtml(g.label)}</text>` : `<path d="M${r.x} ${r.y + 20} L${r.x} ${r.y + 10} a10 10 0 0 1 10 -10 h${badgeW - 10} v20 z" fill="${col}"/><text x="${r.x + badgeW / 2}" y="${r.y + 14}" class="grp-label" fill="#fff" text-anchor="middle">${escapeHtml(g.label)}</text>`;
|
|
3956
4028
|
s += `<g>${zone}${label}</g>`;
|
|
3957
4029
|
}
|
|
4030
|
+
const labels = [];
|
|
3958
4031
|
for (const e of edges) {
|
|
3959
4032
|
const A2 = byId.get(e.from);
|
|
3960
4033
|
const B2 = byId.get(e.to);
|
|
3961
4034
|
if (!A2 || !B2) continue;
|
|
3962
4035
|
const p2 = ortho(rectFor2(A2), rectFor2(B2));
|
|
3963
4036
|
const st2 = GEDGE[e.kind ?? "solid"] ?? GEDGE["solid"] ?? FALLBACK_EDGE;
|
|
3964
|
-
s += `<
|
|
4037
|
+
s += `<path d="${p2.d}" fill="none" stroke="${st2.stroke}" stroke-width="${st2.sw}" stroke-dasharray="${st2.dash}" marker-end="url(#${st2.marker})"/>`;
|
|
4038
|
+
labels.push(edgePill(p2, e.label, st2.err));
|
|
3965
4039
|
}
|
|
3966
4040
|
for (const n of nodes) {
|
|
3967
4041
|
const r = rectFor2(n);
|
|
@@ -3972,6 +4046,7 @@ function renderGrid(data) {
|
|
|
3972
4046
|
const tech = n.tech !== void 0 ? `<text x="${nx}" y="${r.y + (gl.length > 0 ? 50 : 60)}" class="blk-tech" fill="${st2.accent}">${escapeHtml(n.tech)}</text>` : "";
|
|
3973
4047
|
s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="9" fill="${st2.fill}" stroke="${st2.accent}" stroke-width="1.2"/><rect x="${r.x}" y="${r.y}" width="5" height="${r.h}" rx="2" fill="${st2.accent}"/>` + gl + chip + `<text x="${nx}" y="${r.y + (gl.length > 0 ? 34 : 44)}" class="blk-name" fill="${st2.text}">${escapeHtml(n.name)}</text>` + tech + `</g>`;
|
|
3974
4048
|
}
|
|
4049
|
+
s += labels.join("");
|
|
3975
4050
|
s += `</svg>`;
|
|
3976
4051
|
return s;
|
|
3977
4052
|
}
|
|
@@ -4013,22 +4088,24 @@ function renderLayered(data) {
|
|
|
4013
4088
|
});
|
|
4014
4089
|
});
|
|
4015
4090
|
});
|
|
4016
|
-
let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>Layered architecture</title><rect x="${outerPad}" y="${outerPad}" width="${width - outerPad * 2}" height="${height - outerPad * 2}" rx="12" fill="none" stroke="
|
|
4091
|
+
let s = `<svg viewBox="0 0 ${width} ${height}" role="img"><title>Layered architecture</title><rect x="${outerPad}" y="${outerPad}" width="${width - outerPad * 2}" height="${height - outerPad * 2}" rx="12" fill="none" stroke="var(--navy)" stroke-width="1.5"/>`;
|
|
4017
4092
|
if (data.systemLabel !== void 0) {
|
|
4018
|
-
s += `<text x="${outerPad + 14}" y="${outerPad + 18}" class="grp-label" fill="
|
|
4093
|
+
s += `<text x="${outerPad + 14}" y="${outerPad + 18}" class="grp-label" fill="var(--navy)">${escapeHtml(data.systemLabel)}</text>`;
|
|
4019
4094
|
}
|
|
4020
4095
|
for (let i = 0; i < layers.length; i++) {
|
|
4021
4096
|
const L2 = layers[i];
|
|
4022
4097
|
if (L2 === void 0) continue;
|
|
4023
|
-
s += `<g><rect x="${innerX}" y="${bandY(i)}" width="${labelW + bandInnerW}" height="${bandH}" rx="6" fill="
|
|
4098
|
+
s += `<g><rect x="${innerX}" y="${bandY(i)}" width="${labelW + bandInnerW}" height="${bandH}" rx="6" fill="var(--light-gray)" stroke="var(--rule)"/><rect x="${innerX}" y="${bandY(i)}" width="${labelW}" height="${bandH}" rx="6" fill="var(--navy)"/><rect x="${innerX + labelW - 8}" y="${bandY(i)}" width="8" height="${bandH}" fill="var(--navy)"/><text x="${innerX + 14}" y="${bandY(i) + bandH / 2 + 4}" class="layer-label">${escapeHtml(L2.label)}</text></g>`;
|
|
4024
4099
|
}
|
|
4100
|
+
const labels = [];
|
|
4025
4101
|
for (const e of edges) {
|
|
4026
4102
|
const A2 = rects.get(e.from);
|
|
4027
4103
|
const B2 = rects.get(e.to);
|
|
4028
4104
|
if (!A2 || !B2) continue;
|
|
4029
4105
|
const p2 = ortho(A2, B2);
|
|
4030
4106
|
const st2 = GEDGE[e.kind ?? "solid"] ?? GEDGE["solid"] ?? FALLBACK_EDGE;
|
|
4031
|
-
s += `<
|
|
4107
|
+
s += `<path d="${p2.d}" fill="none" stroke="${st2.stroke}" stroke-width="${st2.sw}" stroke-dasharray="${st2.dash}" marker-end="url(#${st2.marker})"/>`;
|
|
4108
|
+
labels.push(edgePill(p2, e.label, st2.err));
|
|
4032
4109
|
}
|
|
4033
4110
|
for (const n of nodes) {
|
|
4034
4111
|
const r = rects.get(n.id);
|
|
@@ -4039,6 +4116,7 @@ function renderLayered(data) {
|
|
|
4039
4116
|
const tech = n.tech !== void 0 ? `<text x="${nx}" y="${r.y + 42}" class="blk-tech" fill="${st2.accent}">${escapeHtml(n.tech)}</text>` : "";
|
|
4040
4117
|
s += `<g filter="url(#gshadow)"><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="8" fill="${st2.fill}" stroke="${st2.accent}" stroke-width="1.2"/><rect x="${r.x}" y="${r.y}" width="5" height="${r.h}" rx="2" fill="${st2.accent}"/>` + gl + `<text x="${nx}" y="${r.y + (n.tech !== void 0 ? 26 : 33)}" class="blk-name" fill="${st2.text}">${escapeHtml(n.name)}</text>` + tech + `</g>`;
|
|
4041
4118
|
}
|
|
4119
|
+
s += labels.join("");
|
|
4042
4120
|
s += `</svg>`;
|
|
4043
4121
|
return s;
|
|
4044
4122
|
}
|