@vmz/vmz 0.3.12 → 0.3.14

package/dist/document/document-base-css.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Framework-owned document base stylesheet (`assets/vmz-document.css`).
+ *
+ * The single canonical document surface for every site: sidebar + article +
+ * toc grid, article type scale, code/table/quote blocks, island shells and the
+ * responsive breakpoints. Structural colors come from `--vmz-*` semantic tokens
+ * only (site brand flows in through the compiled `vmz-designs.css`); syntax
+ * colors inside code blocks come from the Shiki theme and stay identical on
+ * every site. Sites do not ship document stylesheets.
+ *
+ * House rules: pure-white base with near-black blocks for
+ * rhythm, body text ≥ 16px, small text ≥ 12px at weight ≥ 400, no uppercase
+ * letter-spaced micro labels, no 3D / volumetric surfaces.
+ */
+export declare const DOCUMENT_BASE_CSS = "/* vmz document layer \u2014 canonical document surface (token-driven). */\n\n.site--docs {\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n    background: var(--vmz-surface-paper, #ffffff);\n}\n\n.site--docs > .doc-body {\n    flex: 1 0 auto;\n    display: grid;\n    grid-template-columns: 17rem minmax(0, 1fr);\n    align-items: start;\n    width: 100%;\n    max-width: 94rem;\n    margin: 0 auto;\n}\n\n/* Sidebar -------------------------------------------------------------- */\n\n.doc-sidebar {\n    position: sticky;\n    top: var(--vmz-layout-header-height-compact, 3.5rem);\n    align-self: start;\n    max-height: calc(100vh - var(--vmz-layout-header-height-compact, 3.5rem));\n    overflow-y: auto;\n    padding: 2rem 1.25rem 3rem 1.5rem;\n    border-right: 1px solid var(--vmz-line-default, #e5e6eb);\n}\n\n/* Density activation lives in this framework layer: sites only ship tokens. */\n\n:where([data-density=\"compact\"]) .doc-sidebar {\n    padding-top: var(--vmz-density-compact-padding-y, 1.5rem);\n    padding-bottom: 2rem;\n}\n\n:where([data-density=\"dense\"]) .doc-sidebar {\n    padding-top: var(--vmz-density-dense-padding-y, 1rem);\n    padding-bottom: 1.5rem;\n}\n\n.doc-sidebar__label {\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--vmz-text-muted, #6b7178);\n    margin: 0 0 var(--vmz-density-control-padding-y, 0.75rem);\n}\n\n.doc-subnav ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: grid;\n    gap: 2px;\n}\n\n.doc-subnav a {\n    display: block;\n    padding: 0.4375rem 0.625rem;\n    font-size: 0.875rem;\n    line-height: 1.45;\n    color: var(--vmz-text-steel, #51565d);\n    text-decoration: none;\n    border-left: 2px solid transparent;\n    border-radius: 0 4px 4px 0;\n    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;\n}\n\n.doc-subnav a:hover {\n    color: var(--vmz-text-ink, #1f2329);\n    background: var(--vmz-surface-mist, #f7f8fa);\n    text-decoration: none;\n}\n\n.doc-subnav a[aria-current=\"page\"] {\n    color: var(--vmz-brand-primary, #1677ff);\n    border-left-color: var(--vmz-brand-primary, #1677ff);\n    background: var(--vmz-surface-paper, #ffffff);\n    font-weight: 500;\n}\n\n.doc-search {\n    margin-top: 1rem;\n    padding-top: 0.75rem;\n    border-top: 1px solid var(--vmz-line-default, #e5e6eb);\n    position: relative;\n}\n\n.doc-search__input {\n    width: 100%;\n    box-sizing: border-box;\n    padding: 0.4375rem 0.625rem;\n    font-size: 0.875rem;\n    line-height: 1.4;\n    color: var(--vmz-text-ink, #1f2329);\n    background: var(--vmz-surface-paper, #ffffff);\n    border: 1px solid var(--vmz-line-default, #e5e6eb);\n    border-radius: 6px;\n}\n\n.doc-search__input:focus-visible {\n    outline: 2px solid var(--vmz-brand-primary, #1677ff);\n    outline-offset: 1px;\n}\n\n.doc-search__results {\n    list-style: none;\n    margin: 0.375rem 0 0;\n    padding: 0.25rem;\n    display: grid;\n    gap: 1px;\n    background: var(--vmz-surface-paper, #ffffff);\n    border: 1px solid var(--vmz-line-default, #e5e6eb);\n    border-radius: 6px;\n    max-height: 16rem;\n    overflow-y: auto;\n}\n\n.doc-search__results[hidden] {\n    display: none;\n}\n\n.doc-search__results a {\n    display: block;\n    padding: 0.375rem 0.5rem;\n    font-size: 0.8125rem;\n    line-height: 1.4;\n    color: var(--vmz-text-steel, #51565d);\n    text-decoration: none;\n    border-radius: 4px;\n    overflow-wrap: break-word;\n}\n\n.doc-search__ctx {\n    color: var(--vmz-text-muted, #6b7178);\n}\n\n.doc-search__results li[aria-selected=\"true\"] a,\n.doc-search__results a:hover {\n    background: var(--vmz-surface-mist, #f7f8fa);\n    color: var(--vmz-text-ink, #1f2329);\n}\n\n.doc-search__empty {\n    padding: 0.375rem 0.5rem;\n    font-size: 0.8125rem;\n    color: var(--vmz-text-muted, #6b7178);\n}\n\n.doc-search__hint {\n    margin: 0.375rem 0 0;\n    font-size: 0.75rem;\n    line-height: 1.5;\n    color: var(--vmz-text-muted, #6b7178);\n}\n\n/* Content grid --------------------------------------------------------- */\n\n.doc-content {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) 13rem;\n    gap: 3rem;\n    padding: 3rem 3rem 4rem;\n    min-width: 0;\n}\n\n.doc-content > main {\n    min-width: 0;\n    max-width: 46rem;\n}\n\n/* Breadcrumb ----------------------------------------------------------- */\n\n.doc-breadcrumb {\n    font-size: 0.875rem;\n    line-height: 1.5;\n    color: var(--vmz-text-muted, #6b7178);\n    margin: 0 0 2rem;\n    display: flex;\n    gap: 0.375rem;\n    align-items: baseline;\n}\n\n.doc-breadcrumb a {\n    color: var(--vmz-text-steel, #51565d);\n    text-decoration: none;\n}\n\n.doc-breadcrumb a:hover {\n    color: var(--vmz-brand-primary, #1677ff);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n}\n\n.doc-breadcrumb [aria-current] {\n    color: var(--vmz-text-ink, #1f2329);\n    font-weight: 500;\n}\n\n/* On this page --------------------------------------------------------- */\n\n.toc {\n    position: sticky;\n    top: calc(var(--vmz-layout-header-height-compact, 3.5rem) + 1.25rem);\n    align-self: start;\n    order: 2;\n    border-left: 1px solid var(--vmz-line-subtle, #f0f1f3);\n    padding-left: 1rem;\n}\n\n.toc__label {\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--vmz-text-muted, #6b7178);\n    margin: 0 0 0.5rem;\n}\n\n.toc ol {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: grid;\n    gap: 0.25rem;\n}\n\n.toc a {\n    color: var(--vmz-text-steel, #51565d);\n    text-decoration: none;\n    display: block;\n    line-height: 1.4;\n    font-size: 0.75rem;\n}\n\n.toc a:hover {\n    color: var(--vmz-brand-primary, #1677ff);\n}\n\n.toc .h3 {\n    padding-left: 0.75rem;\n    color: var(--vmz-text-muted, #6b7178);\n}\n\n/* Article typography --------------------------------------------------- */\n\n.doc-content main h1 {\n    font-family: var(--vmz-font-display, var(--vmz-font-sans, sans-serif));\n    font-size: clamp(2rem, 2.8vw, 2.5rem);\n    font-weight: 650;\n    letter-spacing: -0.03em;\n    line-height: 1.12;\n    margin: 0 0 1.25rem;\n    color: var(--vmz-text-ink, #1f2329);\n}\n\n.doc-content main h2 {\n    font-size: 1.4375rem;\n    letter-spacing: -0.02em;\n    margin: 3rem 0 0.875rem;\n    color: var(--vmz-text-ink, #1f2329);\n}\n\n.doc-content main h3 {\n    font-size: 1.125rem;\n    margin: 2rem 0 0.5rem;\n    color: var(--vmz-text-ink, #1f2329);\n}\n\n.doc-content main h4 {\n    font-size: 1rem;\n    margin: 1.75rem 0 0.375rem;\n    color: var(--vmz-text-ink, #1f2329);\n}\n\n.doc-content main p,\n.doc-content main li {\n    font-size: 1rem;\n    line-height: 1.75;\n    color: var(--vmz-text-steel, #51565d);\n}\n\n.doc-content main p {\n    margin: 0 0 1.125rem;\n}\n\n.doc-content main ul,\n.doc-content main ol {\n    margin: 0 0 1.25rem;\n    padding-left: 1.375rem;\n}\n\n.doc-content main li + li {\n    margin-top: 0.375rem;\n}\n\n.doc-content main li::marker {\n    color: var(--vmz-line-strong, #c9cdd4);\n}\n\n.doc-content main a {\n    color: var(--vmz-brand-primary, #1677ff);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    text-decoration-color: var(--vmz-line-strong, #c9cdd4);\n    overflow-wrap: break-word;\n}\n\n.doc-content main a:hover {\n    text-decoration-color: var(--vmz-brand-primary, #1677ff);\n}\n\n.doc-content main strong {\n    color: var(--vmz-text-ink, #1f2329);\n    font-weight: 600;\n}\n\n.doc-content main hr {\n    border: 0;\n    border-top: 1px solid var(--vmz-line-default, #e5e6eb);\n    margin: 1.75rem 0;\n}\n\n/* Inline code */\n.doc-content main :not(pre) > code {\n    font-family: var(--vmz-font-mono, ui-monospace, monospace);\n    font-size: 0.875rem;\n    color: var(--vmz-text-ink, #1f2329);\n    background: var(--vmz-surface-mist, #f7f8fa);\n    border: 1px solid var(--vmz-line-subtle, #f0f1f3);\n    border-radius: 4px;\n    padding: 0.0625rem 0.3125rem;\n    word-break: break-word;\n}\n\n/* Code blocks: near-black surface, token chrome, theme-owned syntax colors */\n.doc-content main pre {\n    position: relative;\n    margin: 0 0 1.375rem;\n    padding: 1.125rem 1.25rem;\n    overflow-x: auto;\n    border: 1px solid var(--vmz-line-default, #e5e6eb);\n    border-radius: 8px;\n    background: var(--vmz-surface-code, #0f1115);\n    color: var(--vmz-text-on-ink, #f7f8fa);\n    font-size: 0.84375rem;\n    line-height: 1.7;\n    tab-size: 4;\n}\n\n/* Copy button (injected by assets/vmz-document.js; hidden without JS) */\n.doc-copy {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    padding: 0.1875rem 0.5rem;\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1.4;\n    color: var(--vmz-text-muted, #6b7178);\n    background: var(--vmz-surface-mist, #f7f8fa);\n    border: 1px solid var(--vmz-line-default, #e5e6eb);\n    border-radius: 4px;\n    cursor: pointer;\n    opacity: 0;\n    transition: opacity 120ms ease;\n}\n\npre:hover .doc-copy,\npre:focus-within .doc-copy,\n.doc-copy:focus-visible {\n    opacity: 1;\n}\n\n.doc-copy--done {\n    color: var(--vmz-status-success-accent, #237804);\n}\n\n/* Heading self anchors (build-time, no-JS usable) */\n.h-anchor {\n    margin-left: 0.4em;\n    font-size: 0.8em;\n    font-weight: 400;\n    text-decoration: none;\n    color: var(--vmz-text-muted, #6b7178);\n    opacity: 0;\n    transition: opacity 120ms ease;\n}\n\n.doc-content main h2:hover .h-anchor,\n.doc-content main h3:hover .h-anchor,\n.doc-content main h4:hover .h-anchor,\n.h-anchor:focus-visible {\n    opacity: 1;\n}\n\n.doc-content main pre code {\n    font-family: var(--vmz-font-mono, ui-monospace, monospace);\n    font-size: inherit;\n    background: transparent;\n    border: 0;\n    padding: 0;\n    color: inherit;\n}\n\n/* Tables */\n.doc-content main table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin: 0.75rem 0 1.5rem;\n    font-size: 0.9375rem;\n    border: 1px solid var(--vmz-line-default, #e5e6eb);\n    border-radius: 10px;\n    display: block;\n    overflow-x: auto;\n}\n\n.doc-content main thead th {\n    background: var(--vmz-surface-mist, #f7f8fa);\n    border-bottom: 1px solid var(--vmz-line-default, #e5e6eb);\n    font-size: 0.8125rem;\n    font-weight: 600;\n    color: var(--vmz-text-muted, #6b7178);\n    text-align: left;\n    padding: 0.6875rem 1rem;\n    white-space: nowrap;\n}\n\n.doc-content main td,\n.doc-content main tbody th {\n    border-bottom: 1px solid var(--vmz-line-subtle, #f0f1f3);\n    padding: 0.6875rem 1rem;\n    vertical-align: top;\n    line-height: 1.6;\n    color: var(--vmz-text-steel, #51565d);\n}\n\n.doc-content main tbody tr:last-child td {\n    border-bottom: 0;\n}\n\n.doc-content main tbody tr:hover td {\n    background: var(--vmz-surface-fill, #fafbfc);\n}\n\n.doc-content main td code {\n    font-size: 0.8125rem;\n}\n\n/* Blockquote / callouts */\n.doc-content main blockquote {\n    margin: 0 0 1.25rem;\n    padding: 0.875rem 1.125rem;\n    border: 1px solid var(--vmz-line-default, #e5e6eb);\n    border-left: 3px solid var(--vmz-brand-primary, #1677ff);\n    border-radius: 0 8px 8px 0;\n    background: var(--vmz-surface-mist, #f7f8fa);\n    font-size: 1rem;\n    color: var(--vmz-text-steel, #51565d);\n}\n\n.doc-content main blockquote p {\n    margin: 0;\n    font-size: 1rem;\n}\n\n.doc-content main .warn {\n    background: var(--vmz-status-warning-background, #fff7e6);\n    border: 1px solid var(--vmz-status-warning-border, #ffe7ba);\n    border-left: 3px solid var(--vmz-status-warning-accent, #d48806);\n    color: var(--vmz-status-warning-foreground, #ad6800);\n    padding: 0.875rem 1.125rem;\n    border-radius: 0 8px 8px 0;\n    margin: 0 0 1.25rem;\n    font-size: 0.9375rem;\n    line-height: 1.65;\n}\n\n.doc-content main .warn p {\n    color: inherit;\n    font-size: inherit;\n    margin: 0;\n}\n\n/* Playground / island shells */\n.doc-content main [data-vmz-island],\n.doc-content main .doc-playground {\n    border: 1px solid var(--vmz-line-default, #e5e6eb);\n    border-radius: var(--vmz-radius-xs, 4px);\n    background: var(--vmz-surface-fill, #fafbfc);\n    padding: 0.75rem;\n    margin: 0 0 1rem;\n}\n\n.doc-content main .doc-playground-source,\n.doc-content main .doc-playground-fallback {\n    font-size: 0.8125rem;\n    color: var(--vmz-text-muted, #6b7178);\n}\n\n/* Standalone mount emits the same .site.site--docs > .doc-body skeleton as\n   the integrated shell \u2014 no second DOM shape. */\n\n.skip-link {\n    position: absolute;\n    left: -999px;\n    top: 0.75rem;\n    z-index: 50;\n    padding: 0.45rem 0.75rem;\n    background: var(--vmz-brand-primary, #1677ff);\n    color: var(--vmz-text-on-brand, #ffffff);\n    text-decoration: none;\n}\n\n.skip-link:focus {\n    left: 0.75rem;\n}\n\n/* Responsive ------------------------------------------------------------ */\n\n@media (max-width: 1100px) {\n    .doc-content {\n        grid-template-columns: minmax(0, 1fr);\n        padding: 1.75rem 1.5rem 2.5rem;\n    }\n\n    .toc {\n        position: static;\n        order: -1;\n        border-left: 0;\n        border-bottom: 1px solid var(--vmz-line-subtle, #f0f1f3);\n        padding: 0 0 0.75rem;\n        margin-bottom: 1.5rem;\n    }\n}\n\n@media (max-width: 860px) {\n    .site--docs > .doc-body,\n    body > .doc-body {\n        grid-template-columns: 1fr;\n    }\n\n    .doc-sidebar {\n        position: static;\n        max-height: none;\n        border-right: 0;\n        border-bottom: 1px solid var(--vmz-line-default, #e5e6eb);\n        padding: 1rem;\n    }\n\n    .doc-content {\n        padding: 1.25rem 1rem 2rem;\n    }\n\n    .doc-content main h1 {\n        font-size: 1.375rem;\n    }\n\n    .doc-content main pre {\n        font-size: 0.75rem;\n    }\n}\n";

package/dist/document/document-base-css.js

@@ -0,0 +1,578 @@
+/**
+ * Framework-owned document base stylesheet (`assets/vmz-document.css`).
+ *
+ * The single canonical document surface for every site: sidebar + article +
+ * toc grid, article type scale, code/table/quote blocks, island shells and the
+ * responsive breakpoints. Structural colors come from `--vmz-*` semantic tokens
+ * only (site brand flows in through the compiled `vmz-designs.css`); syntax
+ * colors inside code blocks come from the Shiki theme and stay identical on
+ * every site. Sites do not ship document stylesheets.
+ *
+ * House rules: pure-white base with near-black blocks for
+ * rhythm, body text ≥ 16px, small text ≥ 12px at weight ≥ 400, no uppercase
+ * letter-spaced micro labels, no 3D / volumetric surfaces.
+ */
+export const DOCUMENT_BASE_CSS = `/* vmz document layer — canonical document surface (token-driven). */
+
+.site--docs {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--vmz-surface-paper, #ffffff);
+}
+
+.site--docs > .doc-body {
+    flex: 1 0 auto;
+    display: grid;
+    grid-template-columns: 17rem minmax(0, 1fr);
+    align-items: start;
+    width: 100%;
+    max-width: 94rem;
+    margin: 0 auto;
+}
+
+/* Sidebar -------------------------------------------------------------- */
+
+.doc-sidebar {
+    position: sticky;
+    top: var(--vmz-layout-header-height-compact, 3.5rem);
+    align-self: start;
+    max-height: calc(100vh - var(--vmz-layout-header-height-compact, 3.5rem));
+    overflow-y: auto;
+    padding: 2rem 1.25rem 3rem 1.5rem;
+    border-right: 1px solid var(--vmz-line-default, #e5e6eb);
+}
+
+/* Density activation lives in this framework layer: sites only ship tokens. */
+
+:where([data-density="compact"]) .doc-sidebar {
+    padding-top: var(--vmz-density-compact-padding-y, 1.5rem);
+    padding-bottom: 2rem;
+}
+
+:where([data-density="dense"]) .doc-sidebar {
+    padding-top: var(--vmz-density-dense-padding-y, 1rem);
+    padding-bottom: 1.5rem;
+}
+
+.doc-sidebar__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--vmz-text-muted, #6b7178);
+    margin: 0 0 var(--vmz-density-control-padding-y, 0.75rem);
+}
+
+.doc-subnav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 2px;
+}
+
+.doc-subnav a {
+    display: block;
+    padding: 0.4375rem 0.625rem;
+    font-size: 0.875rem;
+    line-height: 1.45;
+    color: var(--vmz-text-steel, #51565d);
+    text-decoration: none;
+    border-left: 2px solid transparent;
+    border-radius: 0 4px 4px 0;
+    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
+}
+
+.doc-subnav a:hover {
+    color: var(--vmz-text-ink, #1f2329);
+    background: var(--vmz-surface-mist, #f7f8fa);
+    text-decoration: none;
+}
+
+.doc-subnav a[aria-current="page"] {
+    color: var(--vmz-brand-primary, #1677ff);
+    border-left-color: var(--vmz-brand-primary, #1677ff);
+    background: var(--vmz-surface-paper, #ffffff);
+    font-weight: 500;
+}
+
+.doc-search {
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--vmz-line-default, #e5e6eb);
+    position: relative;
+}
+
+.doc-search__input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.4375rem 0.625rem;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    color: var(--vmz-text-ink, #1f2329);
+    background: var(--vmz-surface-paper, #ffffff);
+    border: 1px solid var(--vmz-line-default, #e5e6eb);
+    border-radius: 6px;
+}
+
+.doc-search__input:focus-visible {
+    outline: 2px solid var(--vmz-brand-primary, #1677ff);
+    outline-offset: 1px;
+}
+
+.doc-search__results {
+    list-style: none;
+    margin: 0.375rem 0 0;
+    padding: 0.25rem;
+    display: grid;
+    gap: 1px;
+    background: var(--vmz-surface-paper, #ffffff);
+    border: 1px solid var(--vmz-line-default, #e5e6eb);
+    border-radius: 6px;
+    max-height: 16rem;
+    overflow-y: auto;
+}
+
+.doc-search__results[hidden] {
+    display: none;
+}
+
+.doc-search__results a {
+    display: block;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--vmz-text-steel, #51565d);
+    text-decoration: none;
+    border-radius: 4px;
+    overflow-wrap: break-word;
+}
+
+.doc-search__ctx {
+    color: var(--vmz-text-muted, #6b7178);
+}
+
+.doc-search__results li[aria-selected="true"] a,
+.doc-search__results a:hover {
+    background: var(--vmz-surface-mist, #f7f8fa);
+    color: var(--vmz-text-ink, #1f2329);
+}
+
+.doc-search__empty {
+    padding: 0.375rem 0.5rem;
+    font-size: 0.8125rem;
+    color: var(--vmz-text-muted, #6b7178);
+}
+
+.doc-search__hint {
+    margin: 0.375rem 0 0;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: var(--vmz-text-muted, #6b7178);
+}
+
+/* Content grid --------------------------------------------------------- */
+
+.doc-content {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 13rem;
+    gap: 3rem;
+    padding: 3rem 3rem 4rem;
+    min-width: 0;
+}
+
+.doc-content > main {
+    min-width: 0;
+    max-width: 46rem;
+}
+
+/* Breadcrumb ----------------------------------------------------------- */
+
+.doc-breadcrumb {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--vmz-text-muted, #6b7178);
+    margin: 0 0 2rem;
+    display: flex;
+    gap: 0.375rem;
+    align-items: baseline;
+}
+
+.doc-breadcrumb a {
+    color: var(--vmz-text-steel, #51565d);
+    text-decoration: none;
+}
+
+.doc-breadcrumb a:hover {
+    color: var(--vmz-brand-primary, #1677ff);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.doc-breadcrumb [aria-current] {
+    color: var(--vmz-text-ink, #1f2329);
+    font-weight: 500;
+}
+
+/* On this page --------------------------------------------------------- */
+
+.toc {
+    position: sticky;
+    top: calc(var(--vmz-layout-header-height-compact, 3.5rem) + 1.25rem);
+    align-self: start;
+    order: 2;
+    border-left: 1px solid var(--vmz-line-subtle, #f0f1f3);
+    padding-left: 1rem;
+}
+
+.toc__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--vmz-text-muted, #6b7178);
+    margin: 0 0 0.5rem;
+}
+
+.toc ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.25rem;
+}
+
+.toc a {
+    color: var(--vmz-text-steel, #51565d);
+    text-decoration: none;
+    display: block;
+    line-height: 1.4;
+    font-size: 0.75rem;
+}
+
+.toc a:hover {
+    color: var(--vmz-brand-primary, #1677ff);
+}
+
+.toc .h3 {
+    padding-left: 0.75rem;
+    color: var(--vmz-text-muted, #6b7178);
+}
+
+/* Article typography --------------------------------------------------- */
+
+.doc-content main h1 {
+    font-family: var(--vmz-font-display, var(--vmz-font-sans, sans-serif));
+    font-size: clamp(2rem, 2.8vw, 2.5rem);
+    font-weight: 650;
+    letter-spacing: -0.03em;
+    line-height: 1.12;
+    margin: 0 0 1.25rem;
+    color: var(--vmz-text-ink, #1f2329);
+}
+
+.doc-content main h2 {
+    font-size: 1.4375rem;
+    letter-spacing: -0.02em;
+    margin: 3rem 0 0.875rem;
+    color: var(--vmz-text-ink, #1f2329);
+}
+
+.doc-content main h3 {
+    font-size: 1.125rem;
+    margin: 2rem 0 0.5rem;
+    color: var(--vmz-text-ink, #1f2329);
+}
+
+.doc-content main h4 {
+    font-size: 1rem;
+    margin: 1.75rem 0 0.375rem;
+    color: var(--vmz-text-ink, #1f2329);
+}
+
+.doc-content main p,
+.doc-content main li {
+    font-size: 1rem;
+    line-height: 1.75;
+    color: var(--vmz-text-steel, #51565d);
+}
+
+.doc-content main p {
+    margin: 0 0 1.125rem;
+}
+
+.doc-content main ul,
+.doc-content main ol {
+    margin: 0 0 1.25rem;
+    padding-left: 1.375rem;
+}
+
+.doc-content main li + li {
+    margin-top: 0.375rem;
+}
+
+.doc-content main li::marker {
+    color: var(--vmz-line-strong, #c9cdd4);
+}
+
+.doc-content main a {
+    color: var(--vmz-brand-primary, #1677ff);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: var(--vmz-line-strong, #c9cdd4);
+    overflow-wrap: break-word;
+}
+
+.doc-content main a:hover {
+    text-decoration-color: var(--vmz-brand-primary, #1677ff);
+}
+
+.doc-content main strong {
+    color: var(--vmz-text-ink, #1f2329);
+    font-weight: 600;
+}
+
+.doc-content main hr {
+    border: 0;
+    border-top: 1px solid var(--vmz-line-default, #e5e6eb);
+    margin: 1.75rem 0;
+}
+
+/* Inline code */
+.doc-content main :not(pre) > code {
+    font-family: var(--vmz-font-mono, ui-monospace, monospace);
+    font-size: 0.875rem;
+    color: var(--vmz-text-ink, #1f2329);
+    background: var(--vmz-surface-mist, #f7f8fa);
+    border: 1px solid var(--vmz-line-subtle, #f0f1f3);
+    border-radius: 4px;
+    padding: 0.0625rem 0.3125rem;
+    word-break: break-word;
+}
+
+/* Code blocks: near-black surface, token chrome, theme-owned syntax colors */
+.doc-content main pre {
+    position: relative;
+    margin: 0 0 1.375rem;
+    padding: 1.125rem 1.25rem;
+    overflow-x: auto;
+    border: 1px solid var(--vmz-line-default, #e5e6eb);
+    border-radius: 8px;
+    background: var(--vmz-surface-code, #0f1115);
+    color: var(--vmz-text-on-ink, #f7f8fa);
+    font-size: 0.84375rem;
+    line-height: 1.7;
+    tab-size: 4;
+}
+
+/* Copy button (injected by assets/vmz-document.js; hidden without JS) */
+.doc-copy {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 0.1875rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1.4;
+    color: var(--vmz-text-muted, #6b7178);
+    background: var(--vmz-surface-mist, #f7f8fa);
+    border: 1px solid var(--vmz-line-default, #e5e6eb);
+    border-radius: 4px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 120ms ease;
+}
+
+pre:hover .doc-copy,
+pre:focus-within .doc-copy,
+.doc-copy:focus-visible {
+    opacity: 1;
+}
+
+.doc-copy--done {
+    color: var(--vmz-status-success-accent, #237804);
+}
+
+/* Heading self anchors (build-time, no-JS usable) */
+.h-anchor {
+    margin-left: 0.4em;
+    font-size: 0.8em;
+    font-weight: 400;
+    text-decoration: none;
+    color: var(--vmz-text-muted, #6b7178);
+    opacity: 0;
+    transition: opacity 120ms ease;
+}
+
+.doc-content main h2:hover .h-anchor,
+.doc-content main h3:hover .h-anchor,
+.doc-content main h4:hover .h-anchor,
+.h-anchor:focus-visible {
+    opacity: 1;
+}
+
+.doc-content main pre code {
+    font-family: var(--vmz-font-mono, ui-monospace, monospace);
+    font-size: inherit;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    color: inherit;
+}
+
+/* Tables */
+.doc-content main table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 0.75rem 0 1.5rem;
+    font-size: 0.9375rem;
+    border: 1px solid var(--vmz-line-default, #e5e6eb);
+    border-radius: 10px;
+    display: block;
+    overflow-x: auto;
+}
+
+.doc-content main thead th {
+    background: var(--vmz-surface-mist, #f7f8fa);
+    border-bottom: 1px solid var(--vmz-line-default, #e5e6eb);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--vmz-text-muted, #6b7178);
+    text-align: left;
+    padding: 0.6875rem 1rem;
+    white-space: nowrap;
+}
+
+.doc-content main td,
+.doc-content main tbody th {
+    border-bottom: 1px solid var(--vmz-line-subtle, #f0f1f3);
+    padding: 0.6875rem 1rem;
+    vertical-align: top;
+    line-height: 1.6;
+    color: var(--vmz-text-steel, #51565d);
+}
+
+.doc-content main tbody tr:last-child td {
+    border-bottom: 0;
+}
+
+.doc-content main tbody tr:hover td {
+    background: var(--vmz-surface-fill, #fafbfc);
+}
+
+.doc-content main td code {
+    font-size: 0.8125rem;
+}
+
+/* Blockquote / callouts */
+.doc-content main blockquote {
+    margin: 0 0 1.25rem;
+    padding: 0.875rem 1.125rem;
+    border: 1px solid var(--vmz-line-default, #e5e6eb);
+    border-left: 3px solid var(--vmz-brand-primary, #1677ff);
+    border-radius: 0 8px 8px 0;
+    background: var(--vmz-surface-mist, #f7f8fa);
+    font-size: 1rem;
+    color: var(--vmz-text-steel, #51565d);
+}
+
+.doc-content main blockquote p {
+    margin: 0;
+    font-size: 1rem;
+}
+
+.doc-content main .warn {
+    background: var(--vmz-status-warning-background, #fff7e6);
+    border: 1px solid var(--vmz-status-warning-border, #ffe7ba);
+    border-left: 3px solid var(--vmz-status-warning-accent, #d48806);
+    color: var(--vmz-status-warning-foreground, #ad6800);
+    padding: 0.875rem 1.125rem;
+    border-radius: 0 8px 8px 0;
+    margin: 0 0 1.25rem;
+    font-size: 0.9375rem;
+    line-height: 1.65;
+}
+
+.doc-content main .warn p {
+    color: inherit;
+    font-size: inherit;
+    margin: 0;
+}
+
+/* Playground / island shells */
+.doc-content main [data-vmz-island],
+.doc-content main .doc-playground {
+    border: 1px solid var(--vmz-line-default, #e5e6eb);
+    border-radius: var(--vmz-radius-xs, 4px);
+    background: var(--vmz-surface-fill, #fafbfc);
+    padding: 0.75rem;
+    margin: 0 0 1rem;
+}
+
+.doc-content main .doc-playground-source,
+.doc-content main .doc-playground-fallback {
+    font-size: 0.8125rem;
+    color: var(--vmz-text-muted, #6b7178);
+}
+
+/* Standalone mount emits the same .site.site--docs > .doc-body skeleton as
+   the integrated shell — no second DOM shape. */
+
+.skip-link {
+    position: absolute;
+    left: -999px;
+    top: 0.75rem;
+    z-index: 50;
+    padding: 0.45rem 0.75rem;
+    background: var(--vmz-brand-primary, #1677ff);
+    color: var(--vmz-text-on-brand, #ffffff);
+    text-decoration: none;
+}
+
+.skip-link:focus {
+    left: 0.75rem;
+}
+
+/* Responsive ------------------------------------------------------------ */
+
+@media (max-width: 1100px) {
+    .doc-content {
+        grid-template-columns: minmax(0, 1fr);
+        padding: 1.75rem 1.5rem 2.5rem;
+    }
+
+    .toc {
+        position: static;
+        order: -1;
+        border-left: 0;
+        border-bottom: 1px solid var(--vmz-line-subtle, #f0f1f3);
+        padding: 0 0 0.75rem;
+        margin-bottom: 1.5rem;
+    }
+}
+
+@media (max-width: 860px) {
+    .site--docs > .doc-body,
+    body > .doc-body {
+        grid-template-columns: 1fr;
+    }
+
+    .doc-sidebar {
+        position: static;
+        max-height: none;
+        border-right: 0;
+        border-bottom: 1px solid var(--vmz-line-default, #e5e6eb);
+        padding: 1rem;
+    }
+
+    .doc-content {
+        padding: 1.25rem 1rem 2rem;
+    }
+
+    .doc-content main h1 {
+        font-size: 1.375rem;
+    }
+
+    .doc-content main pre {
+        font-size: 0.75rem;
+    }
+}
+`;

package/dist/document/document-build.d.ts

@@ -7,6 +7,7 @@ export interface BuildDocumentsOpts {
     strict?: boolean;
     engines?: {
         markdown?: string;
+        code?: string;
     };
 }
 export interface BuildDocumentsPageResult {