npm - orz-paged - Versions diffs - 0.1.0 - Mend

orz-paged 0.1.0

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.

Files changed (39) hide show

package/README.md +146 -0
package/assets/app.js +413 -0
package/assets/templates/article-page.md +71 -0
package/assets/templates/article-section.md +83 -0
package/assets/templates/cover-letter.md +53 -0
package/assets/templates/cv-elegant.md +93 -0
package/assets/templates/cv-modern.md +86 -0
package/assets/templates/cv.md +45 -0
package/assets/templates/exam-page.md +76 -0
package/assets/templates/exam-section.md +59 -0
package/assets/templates/letter.md +47 -0
package/assets/templates/note.md +28 -0
package/assets/templates/report-page.md +72 -0
package/assets/templates/report-section.md +80 -0
package/assets/themes/base.css +538 -0
package/assets/themes/beige-decent-1.css +103 -0
package/assets/themes/beige-decent-2.css +92 -0
package/assets/themes/light-academic-1.css +114 -0
package/assets/themes/light-academic-2.css +99 -0
package/assets/themes/light-neat-1.css +90 -0
package/assets/themes/light-neat-2.css +101 -0
package/assets/themes/light-neat-3.css +91 -0
package/dist/browser-entry.js +302 -0
package/dist/cli.js +167 -0
package/dist/doc/dynamic.js +57 -0
package/dist/doc/elements.js +813 -0
package/dist/doc/fonts.js +83 -0
package/dist/doc/nyml.js +140 -0
package/dist/doc/page-css.js +230 -0
package/dist/doc/settings.js +390 -0
package/dist/doc/templates.js +147 -0
package/dist/doc/theme-fonts.js +10 -0
package/dist/orz-paged.browser.js +1524 -0
package/dist/paged.js +31 -0
package/dist/render-paged.js +123 -0
package/dist/template.js +242 -0
package/dist/types.js +11 -0
package/orz-paged-skills/SKILL.md +547 -0
package/package.json +51 -0

package/dist/paged.js ADDED Viewed

@@ -0,0 +1,31 @@
+/**
+ * Thin wrapper around paged.js (M7). Keeps the rest of the engine ignorant of
+ * paged.js internals: it paginates a content string into a target element using
+ * a set of stylesheets, and triggers a browser print for PDF export.
+ *
+ * paged.js' `Polisher.add(...stylesheets)` accepts either a URL string (fetched)
+ * or an object `{ name: cssText }` for INLINE CSS — see node_modules/pagedjs.
+ */
+import { Previewer } from 'pagedjs';
+/**
+ * Flow `content` (body HTML) into `target` as `.pagedjs_page` boxes, applying
+ * `stylesheets` (the `@page` rules + content/theme CSS). Clears `target` first.
+ */
+export async function paginate(content, stylesheets, target) {
+    target.innerHTML = '';
+    // paged.js' Polisher appends a compiled <style data-pagedjs-inserted-styles>
+    // to <head> on every preview() and never removes the prior one. Without this
+    // cleanup, re-rendering (e.g. a theme switch) stacks each theme's :root tokens
+    // and construct rules on top of the last, so old decoration lingers and the
+    // result stops matching the selected theme. Drop the stale ones first.
+    document
+        .querySelectorAll('style[data-pagedjs-inserted-styles]')
+        .forEach((el) => el.remove());
+    const previewer = new Previewer();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    await previewer.preview(content, stylesheets, target);
+}
+/** Export to PDF via the browser's own print engine (no Puppeteer). */
+export function printDocument() {
+    window.print();
+}

package/dist/render-paged.js ADDED Viewed

@@ -0,0 +1,123 @@
+/**
+ * Assembler — A1.
+ *
+ * `assemble(source)` turns a Markdown source into a {@link PagedAssembly}: pure
+ * data (CSS, font URLs, theme, body HTML, resolved settings) that the browser
+ * engine then hands to paged.js for pagination. No DOM here.
+ *
+ * Pipeline (DESIGN §3/§6):
+ *   1. `parseDocSettings` extracts + strips the `{{nyml kind: document}}` block.
+ *   2. Merge DEFAULTS ← template layer ← user overrides → resolved settings.
+ *   3. Scan the remaining body for `{{nyml kind: element}}` blocks, render each
+ *      via `renderElement`, and replace it with a placeholder token.
+ *   4. Render the placeholdered body Markdown, then swap each placeholder for
+ *      its element's HTML (so element HTML is never re-parsed as Markdown).
+ *   5. Compose page CSS + deduped element CSS + custom CSS; collect font URLs.
+ */
+import { md } from 'orz-markdown';
+/**
+ * The curated element kinds `renderElement` knows how to render. A `{{nyml … }}`
+ * block whose `kind:` is one of these is an *element* block; any other `kind:`
+ * (e.g. `document`) is not. This is the set switched on in `doc/elements.ts`.
+ */
+const ELEMENT_KINDS = new Set([
+    'article-title',
+    'report-title',
+    'exam-title',
+    'abstract',
+    'letterhead',
+    'letter-inside-address',
+    'letter-signature',
+    'toc',
+    'cv-header',
+    'question-mc',
+    'question-open',
+    'timestamp',
+]);
+import { DEFAULTS, parseDocSettings, normalizeRawToLayer, mergeSettings, } from './doc/settings.js';
+import { resolveTemplate } from './doc/templates.js';
+import { buildPageCss } from './doc/page-css.js';
+import { fontPreset } from './doc/fonts.js';
+import { renderElement } from './doc/elements.js';
+import { scanNymlBlocks } from './doc/nyml.js';
+/** Unique placeholder token for the n-th element, kept off Markdown's radar. */
+function placeholderFor(index) {
+    return `\n\n<!--ORZEL-${index}-->\n\n`;
+}
+/**
+ * Assemble a Markdown source into a {@link PagedAssembly}.
+ */
+export function assemble(source) {
+    // 1. Document settings — strips the `kind: document` block from the body.
+    const { raw, body } = parseDocSettings(source);
+    // 2. Resolve settings: DEFAULTS ← template defaults ← user overrides.
+    const templateLayer = resolveTemplate(String(raw.template ?? ''));
+    const settings = mergeSettings(DEFAULTS, templateLayer, normalizeRawToLayer(raw));
+    // 3. Elements: scan the body, render each, splice in placeholders.
+    const ctx = {
+        renderInline: (s) => md.renderInline(s),
+        renderBlock: (s) => md.render(s),
+        settings,
+    };
+    // Element blocks are `{{nyml … }}` blocks whose `kind:` names a curated
+    // element (e.g. `article-title`, `abstract`). The `kind:` value is the
+    // ElementKind that `renderElement` switches on and `orz-el-<kind>` reflects.
+    const blocks = scanNymlBlocks(body).filter((b) => ELEMENT_KINDS.has(b.kind));
+    // dedupe element CSS by kind; collect each block's rendered HTML.
+    const cssByKind = new Map();
+    const htmlByIndex = [];
+    // Rebuild the body left-to-right, swapping each element block for a token.
+    let bodyWithPlaceholders = '';
+    let cursor = 0;
+    blocks.forEach((block, index) => {
+        bodyWithPlaceholders += body.slice(cursor, block.start);
+        bodyWithPlaceholders += placeholderFor(index);
+        cursor = block.end;
+        const placement = block.fields.placement?.trim().toLowerCase() === 'page' ? 'page' : undefined;
+        const spec = {
+            kind: block.kind,
+            fields: block.fields,
+            placement,
+        };
+        const result = renderElement(spec, ctx);
+        htmlByIndex[index] = result.html;
+        if (result.css && !cssByKind.has(spec.kind)) {
+            cssByKind.set(spec.kind, result.css);
+        }
+    });
+    bodyWithPlaceholders += body.slice(cursor);
+    // 4. Render the placeholdered body, then swap placeholders → element HTML.
+    let contentHtml = md.render(bodyWithPlaceholders);
+    htmlByIndex.forEach((html, index) => {
+        // The token survives Markdown rendering as an HTML comment; replace it.
+        contentHtml = contentHtml.replace(`<!--ORZEL-${index}-->`, html ?? '');
+    });
+    // 5. CSS: page CSS + deduped element CSS + custom CSS.
+    const elementCss = [...cssByKind.values()].join('\n');
+    const css = buildPageCss(settings) +
+        (elementCss ? '\n' + elementCss : '') +
+        (settings.customCss ? '\n' + settings.customCss : '');
+    // 6. Fonts: unique non-empty stylesheet URLs across the active presets.
+    const fontCssUrls = [];
+    const seen = new Set();
+    const addFont = (name) => {
+        if (!name)
+            return;
+        const url = fontPreset(name).cssUrl;
+        if (url && !seen.has(url)) {
+            seen.add(url);
+            fontCssUrls.push(url);
+        }
+    };
+    addFont(settings.fontPreset);
+    addFont(settings.fontHeadingPreset);
+    addFont(settings.fontMarginBoxPreset);
+    // 7. Assemble.
+    return {
+        css,
+        fontCssUrls,
+        theme: settings.theme,
+        bodyHtml: '<main class="orz-doc markdown-body">' + contentHtml + '</main>',
+        settings,
+    };
+}

package/dist/template.js ADDED Viewed

@@ -0,0 +1,242 @@
+/**
+ * Builds the self-contained `.paged.html` shell (A3):
+ *   <head>  editor-chrome CSS (the document/page CSS is applied by the engine via
+ *           paged.js' polisher, not here)
+ *   <body>  an empty #orz-pages render target, the editor chrome (edit FAB +
+ *           docked CodeMirror panel + brand header + banners), the embedded
+ *           Markdown source in <script id="orz-src">, the engine bundle (inline or
+ *           CDN), the __ORZ_PAGED__ config, the boot call, and the in-file app.
+ *
+ * The source in #orz-src is the single source of truth: the engine renders it on
+ * load and the editor re-serialises it on save (self-reproducing). Mirrors
+ * orz-slides' template (live preview = the real rendered pages).
+ */
+function escapeHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/** Prevent an embedded `</script>` in the source from closing the block. */
+function escapeForScript(s) {
+    return s.replace(/<\/(script)/gi, '<\\/$1');
+}
+/* ---------- brand (shared with orz-slides / orz-mdhtml) ---------- */
+const ORZ_LOGO = '<svg viewBox="-5 -5 180 100" xmlns="http://www.w3.org/2000/svg" class="orz-mark" aria-hidden="true"><defs><filter id="orzlogo-rough" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" result="noise"/><feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" xChannelSelector="R" yChannelSelector="G"/></filter><path d="M 20,23 C 33,16 57,17 84,13 C 111,8 137,4 153,6 C 165,7 170,13 169,25 L 167,66 C 166,79 159,87 146,89 C 121,93 92,92 60,91 C 41,90 27,92 16,89 C 6,86 1,79 1,67 L 1,50 C 1,35 7,25 20,23 Z" id="orzlogo-seal"/><filter id="orzlogo-stone" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="2" seed="11" result="noise"/><feColorMatrix in="noise" type="saturate" values="0" result="mono"/><feComponentTransfer in="mono" result="grain"><feFuncA type="table" tableValues="0 0.16"/></feComponentTransfer></filter><mask id="orzlogo-mask"><use href="#orzlogo-seal" fill="white"/><path d="M37.81 80.31Q30.44 80.31 24.50 77Q18.56 73.69 15.25 67.75Q11.94 61.81 11.94 54.19L11.94 54.19Q11.94 41.69 21.13 35.56Q30.31 29.44 43.69 29.44L43.69 29.44Q49.81 29.44 55.13 32.44Q60.44 35.44 63.69 41.06Q66.94 46.69 66.94 54.06L66.94 54.06Q66.94 62.06 62.81 68Q58.69 73.94 52 77.13Q45.31 80.31 37.81 80.31L37.81 80.31ZM36.44 73.19Q48.06 73.19 54.06 67.94Q60.06 62.69 60.06 52.56L60.06 52.56Q60.06 45.69 55.38 40.69Q50.69 35.69 42.31 35.69L42.31 35.69Q36.69 35.69 30.94 37.81Q25.19 39.94 21.44 44.19Q17.69 48.44 17.69 54.44L17.69 54.44Q17.69 59.44 20.19 63.75Q22.69 68.06 27 70.63Q31.31 73.19 36.44 73.19L36.44 73.19ZM87.94 80.19Q82.81 70.19 79.88 56.69Q76.94 43.19 76.94 33.31L76.94 33.31Q76.94 29.44 78.69 28.31L78.69 28.31Q79.69 27.69 80.19 27.69L80.19 27.69Q81.06 27.69 81.50 29.06Q81.94 30.44 82.44 34.06L82.44 34.06L83.06 38.56Q84.44 31.81 88.38 27.88Q92.31 23.94 98.06 23.94L98.06 23.94Q104.44 23.94 107.56 26.38Q110.69 28.81 110.69 34.44L110.69 34.44Q104.44 31.44 99.31 31.44L99.31 31.44Q94.44 31.44 90.94 34.06Q87.44 36.69 86.06 41.81L86.06 41.81Q84.94 45.31 84.94 48.44L84.94 48.44Q84.94 51.81 85.88 54.75Q86.81 57.69 88.81 61.94L88.81 61.94Q90.69 66.31 91.75 69.44Q92.81 72.56 92.94 76.19L92.94 76.19Q92.94 78.31 91.44 79.25Q89.94 80.19 87.94 80.19L87.94 80.19ZM160.56 66.19Q163.06 68.06 163.06 70.19L163.06 70.19Q163.06 73.56 157.31 75.81Q151.56 78.06 144.31 79.13Q137.06 80.19 132.81 80.19L132.81 80.19Q128.06 80.19 123.75 78.63Q119.44 77.06 119.44 73.19L119.44 73.19Q119.44 69.44 123.63 63.44Q127.81 57.44 133.69 51.19L133.69 51.19L117.56 51.19Q116.31 51.19 116.31 48.94L116.31 48.94Q116.31 47.19 116.69 46.50Q117.06 45.81 117.69 45.69Q118.31 45.56 120.06 45.56L120.06 45.56L139.31 45.56Q143.94 39.69 146.38 35.50Q148.81 31.31 148.81 27.69L148.81 27.69Q148.81 24.06 146.31 21.19L146.31 21.19Q142.44 20.44 138.81 20.44L138.81 20.44Q131.94 20.44 127.19 22.75Q122.44 25.06 121.94 28.81L121.94 28.81Q119.06 28.81 118.13 27.81Q117.19 26.81 117.19 24.44L117.19 24.44Q117.19 21.94 119.75 19.63Q122.31 17.31 126.94 15.88Q131.56 14.44 137.31 14.44L137.31 14.44Q142.06 14.44 147.31 15.56L147.31 15.56Q150.56 16.19 152.81 19.69Q155.06 23.19 155.06 27.44L155.06 27.44Q155.06 31.19 152.75 35.31Q150.44 39.44 145.94 45.56L145.94 45.56L152.06 45.56Q156.81 45.56 158.38 46.06Q159.94 46.56 159.94 48.06L159.94 48.06Q159.94 49.31 159.13 50.19Q158.31 51.06 157.44 51.06L157.44 51.06L140.19 51.06Q134.06 57.94 130.81 63.25Q127.56 68.56 128.19 70.81L128.19 70.81Q128.69 73.19 135.94 74.06L135.94 74.06Q144.06 74.06 149.69 72.13Q155.31 70.19 160.56 66.19L160.56 66.19Z" fill="black" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></mask></defs><g filter="url(#orzlogo-rough)"><use href="#orzlogo-seal" fill="#96d969" mask="url(#orzlogo-mask)"/><use href="#orzlogo-seal" fill="#6ea84d" opacity="0.28" filter="url(#orzlogo-stone)" mask="url(#orzlogo-mask)"/><use href="#orzlogo-seal" fill="none" stroke="#c8f7a5" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" stroke-opacity="0.42" mask="url(#orzlogo-mask)"/><use href="#orzlogo-seal" fill="none" stroke="#5f8f44" stroke-width="1.2" stroke-linejoin="round" stroke-linecap="round" stroke-opacity="0.35" mask="url(#orzlogo-mask)"/></g></svg>';
+const GH_ICON = '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>';
+/* Canonical icon set — shared, thin-stroke line icons (from the orz-markdown
+ * editor) so the same function shows the same glyph across every orz surface. */
+function ic(path) {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${path}</svg>`;
+}
+const ICON = {
+    save: ic('<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/>'),
+    print: ic('<path d="M6 9V3h12v6"/><path d="M6 18H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2"/><path d="M6 14h12v7H6z"/>'),
+    sync: ic('<path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 0 1 0 10h-2"/><path d="M8 12h8"/>'),
+    pencil: ic('<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>'),
+    collapse: ic('<path d="M15 6l-6 6 6 6"/>'),
+    template: ic('<rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 7h8M8 11h8M8 15h5"/>'),
+};
+const BRAND = '<a id="orz-brand" href="https://github.com/wangyu16/orz-paged" target="_blank" rel="noopener noreferrer" title="orz-paged on GitHub">' +
+    `<span class="orz-logo">${ORZ_LOGO}</span>` +
+    '<span class="orz-brand-name">paged</span>' +
+    `<span class="orz-gh">${GH_ICON}</span>` +
+    '</a>';
+/* ---------- chrome ---------- */
+const CHROME_CSS = `
+  html, body { margin: 0; height: 100%; background: #f0f0f2; }
+  :root { --orz-split: 44%; }
+  /* the preview is a fixed full-window scroll container; in edit mode its left
+     edge animates inward to make room for the docked editor (side-by-side). */
+  #orz-pages { box-sizing: border-box; position: fixed; inset: 0; left: 0;
+    overflow: auto; background: #f0f0f2; transition: left .22s ease; }
+  [data-mode="edit"] #orz-pages { left: calc(var(--orz-split) + 6px); }
+  /* paged.js page boxes get a subtle drop shadow + centered layout */
+  .pagedjs_pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; }
+  .pagedjs_page { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
+  @media print {
+    body { background: #fff; }
+    #orz-bar, #orz-panel, #orz-edit-fab, #orz-divider, #orz-close, .orz-banner, #orz-toast { display: none !important; }
+    #orz-pages { position: static; overflow: visible; left: 0; }
+    .pagedjs_pages { gap: 0; padding: 0; zoom: 1 !important; }
+    .pagedjs_page { box-shadow: none; }
+  }
+  #orz-edit-fab {
+    position: fixed; left: 22px; bottom: 18px; z-index: 30;
+    width: 42px; height: 42px; border: 0; border-radius: 50%;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: #2f6fe0; color: #fff; cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0,0,0,.25); opacity: .9;
+  }
+  #orz-edit-fab svg { width: 19px; height: 19px; display: block; }
+  #orz-edit-fab:hover { opacity: 1; transform: scale(1.06); }
+  [data-mode="edit"] #orz-edit-fab { display: none; }
+  #orz-divider { display: none; }
+  [data-mode="edit"] #orz-divider {
+    display: block; position: fixed; top: 0; bottom: 0; left: var(--orz-split);
+    width: 6px; z-index: 45; cursor: col-resize; background: #34383f;
+  }
+  #orz-divider:hover, #orz-divider.dragging { background: #3b82f6; }
+  #orz-panel {
+    display: flex; flex-direction: column;
+    position: fixed; left: 0; top: 0; bottom: 0; width: var(--orz-split); z-index: 40;
+    background: #1f2228; border-right: 1px solid #333; box-shadow: 2px 0 16px rgba(0,0,0,.25);
+    /* extra offset so the protruding close tab also clears the viewport */
+    transform: translateX(calc(-100% - 24px)); transition: transform .22s ease;
+  }
+  [data-mode="edit"] #orz-panel { transform: translateX(0); }
+  /* close tab — a small handle on the editor's right edge that slides it away */
+  #orz-close {
+    position: absolute; top: 50%; right: -19px; transform: translateY(-50%);
+    width: 19px; height: 48px; z-index: 46; padding: 0;
+    display: inline-flex; align-items: center; justify-content: center;
+    border: 0; border-radius: 0 8px 8px 0; background: #23262c; color: #c2c8d0;
+    cursor: pointer; box-shadow: 2px 0 8px rgba(0,0,0,.18);
+  }
+  #orz-close:hover { background: #383d45; color: #fff; }
+  #orz-close svg { width: 15px; height: 15px; display: block; }
+  #orz-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
+    padding: 7px 10px; background: #23262c; border-bottom: 1px solid #34383f; }
+  #orz-toolbar .ic { width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
+    background: transparent; border: 0; border-radius: 7px; color: #c2c8d0; cursor: pointer; font-size: 16px; }
+  #orz-toolbar .ic:hover { background: #383d45; color: #fff; }
+  #orz-toolbar .ic svg { width: 17px; height: 17px; display: block; }
+  #orz-toolbar .ic[aria-pressed="true"] { color: #3b82f6; }
+  #orz-toolbar .ic[aria-pressed="false"] { opacity: .5; }
+  #orz-toolbar .ic.primary { background: #3b82f6; color: #fff; }
+  #orz-toolbar select { font: 500 12.5px/1 system-ui, sans-serif; color: #e6e8ec; background: #34383f;
+    border: 1px solid #454b55; border-radius: 7px; padding: 6px 8px; cursor: pointer; margin: 0 2px; }
+  #orz-toolbar .orz-sep { width: 1px; height: 20px; background: #3c414a; margin: 0 5px; }
+  #orz-dyn { display: inline-flex; align-items: center; gap: 4px; }
+  #orz-dyn .orz-dyn-ctl { display: inline-flex; align-items: center; gap: 4px; }
+  #orz-dyn label { font: 600 11px/1 system-ui, sans-serif; color: #9aa3b2; text-transform: capitalize; }
+  #orz-toolbar .orz-spacer { flex: 1; }
+  #orz-brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #cdd3df; padding: 2px 7px; border-radius: 7px; }
+  #orz-brand:hover { color: #fff; background: #383d45; }
+  #orz-brand .orz-logo svg { height: 22px; width: auto; display: block; }
+  #orz-brand .orz-brand-name { font: 700 13px/1 system-ui, sans-serif; }
+  #orz-brand .orz-gh { display: inline-flex; opacity: .55; }
+  #orz-brand:hover .orz-gh { opacity: 1; }
+  #orz-brand .orz-gh svg { width: 15px; height: 15px; display: block; }
+  #orz-editor-host { flex: 1; min-height: 0; overflow: hidden; }
+  #orz-editor-host .CodeMirror { height: 100%; font-size: 14px; }
+  #orz-foot { flex: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: center;
+    font: 11.5px/1 system-ui, sans-serif; color: #8b93a0; background: #23262c; border-top: 1px solid #34383f; gap: 4px; }
+  #orz-foot a { color: #9aa3b2; text-decoration: none; }
+  #orz-foot a:hover { color: #fff; text-decoration: underline; }
+  #orz-ta { width: 100%; height: 100%; box-sizing: border-box; border: 0; padding: 10px;
+    font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; }
+  #orz-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px);
+    z-index: 70; background: #111; color: #fff; padding: 9px 16px; border-radius: 8px;
+    font: 13px system-ui, sans-serif; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
+  #orz-toast.show { opacity: .95; transform: translateX(-50%) translateY(0); }
+  /* template picker — a popover under the toolbar listing starter templates */
+  #orz-template-menu { position: absolute; left: 10px; right: 10px; top: 46px; z-index: 60;
+    max-height: 70vh; overflow: auto; padding: 8px; border-radius: 10px;
+    background: #23262c; border: 1px solid #3c414a; box-shadow: 0 8px 26px rgba(0,0,0,.4); }
+  #orz-template-menu[hidden] { display: none; }
+  #orz-template-menu .tpl-group { font: 700 10.5px/1 system-ui, sans-serif; text-transform: uppercase;
+    letter-spacing: .06em; color: #7f8896; padding: 8px 8px 4px; }
+  #orz-template-menu .tpl {
+    display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left;
+    padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; color: #dfe3ea; cursor: pointer; }
+  #orz-template-menu .tpl:hover { background: #34383f; }
+  #orz-template-menu .tpl .tpl-ic { flex: 0 0 auto; width: 30px; height: 38px; border-radius: 4px;
+    background: #fff; border: 1px solid #c9ccd2; position: relative; overflow: hidden; }
+  #orz-template-menu .tpl .tpl-ic::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px;
+    height: 7px; border-radius: 2px; background: var(--tpl-accent, #2f6fe0); }
+  #orz-template-menu .tpl .tpl-ic::after { content: ""; position: absolute; left: 4px; right: 4px; top: 15px;
+    bottom: 4px; background:
+      repeating-linear-gradient(#c7ccd4 0 1.5px, transparent 1.5px 5px); }
+  #orz-template-menu .tpl .tpl-meta { min-width: 0; }
+  #orz-template-menu .tpl .tpl-label { display: block; font: 600 13px/1.2 system-ui, sans-serif; }
+  #orz-template-menu .tpl .tpl-desc { display: block; font: 11.5px/1.35 system-ui, sans-serif; color: #98a0ae; margin-top: 2px; }
+  /* update banner — shown only in edit view (the editor triggers the check) */
+  .orz-banner { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 80;
+    display: none; align-items: center; gap: 10px; background: #2b2f36; color: #eee;
+    border: 1px solid #444; border-radius: 9px; padding: 9px 14px;
+    font: 13px/1.3 system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
+  .orz-banner.show { display: flex; }
+  .orz-banner button { font: 500 12.5px system-ui, sans-serif; color: #e6e8ec; background: #3a3f48;
+    border: 1px solid #4a505a; border-radius: 6px; padding: 5px 11px; cursor: pointer; }
+  .orz-banner button.upd-primary { background: #3b82f6; border-color: #3b82f6; color: #fff; }
+  .orz-banner button:hover { filter: brightness(1.1); }
+`;
+export function buildHtml(o) {
+    const config = {
+        mode: o.renderer.mode === 'inline' ? 'inline' : 'cdn',
+        baseCss: o.renderer.mode === 'inline' ? o.baseCss : undefined,
+        themes: o.renderer.mode === 'inline'
+            ? Object.fromEntries(o.themes.map((t) => [t.id, t.css]))
+            : undefined,
+        katexCss: o.cdn.katexCss,
+        hljsCss: o.cdn.hljsCss,
+        enhancers: { mermaidJs: o.cdn.mermaidJs, smilesJs: o.cdn.smilesJs, chartJs: o.cdn.chartJs, hljsJs: o.cdn.hljsJs },
+        // self-update: only the file's OWN version lives here (for the "is there a
+        // newer one?" comparison). The update SOURCE (packages, manifest, host) is
+        // hardcoded in app.js — never config-driven — so it can't be redirected.
+        version: o.rendererVersion,
+        // template catalog for the in-editor picker (skeleton scaffolding).
+        templates: o.templates ?? [],
+    };
+    const themeOptions = o.themes
+        .map((t) => `<option value="${escapeHtml(t.id)}">${escapeHtml(t.id)}</option>`)
+        .join('');
+    const engineTag = o.renderer.mode === 'inline'
+        ? `<script data-orz-asset="engine">${escapeForScript(o.renderer.js)}</script>`
+        : `<script data-orz-asset="engine" src="${escapeHtml(o.renderer.src)}"></script>`;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="generator" content="orz-paged ${escapeHtml(o.rendererVersion)}">
+<title>${escapeHtml(o.title)}</title>
+<style>${CHROME_CSS}</style>
+</head>
+<body>
+<div id="orz-pages" data-orz-copy></div>
+<div id="orz-divider" title="Drag to resize"></div>
+<button id="orz-edit-fab" title="Edit">${ICON.pencil}</button>
+<div id="orz-panel">
+  <div id="orz-toolbar">
+    ${BRAND}
+    <span class="orz-sep"></span>
+    <button id="orz-save" class="ic primary" title="Save (Ctrl/Cmd+S)">${ICON.save}</button>
+    <button id="orz-export" class="ic" title="Export PDF (print)">${ICON.print}</button>
+    <button id="orz-template" class="ic" title="Start from a template">${ICON.template}</button>
+    <span class="orz-spacer"></span>
+    <button id="orz-sync" class="ic" title="Sync scrolling on/off" aria-pressed="true">${ICON.sync}</button>
+    <span id="orz-dyn"></span>
+    <select id="orz-theme" title="Theme">${themeOptions}</select>
+  </div>
+  <div id="orz-template-menu" hidden></div>
+  <button id="orz-close" title="Close editor">${ICON.collapse}</button>
+  <div id="orz-editor-host"><textarea id="orz-ta" spellcheck="false"></textarea></div>
+  <div id="orz-foot">© <a href="https://markdown.orz.how" target="_blank" rel="noopener noreferrer">orz-markdown</a></div>
+</div>
+<div id="orz-update" class="orz-banner">
+  <span class="upd-text"></span>
+  <button id="orz-upd-apply" class="upd-primary">Update</button>
+  <button id="orz-upd-dismiss">Dismiss</button>
+</div>
+<div id="orz-toast"></div>
+<script type="text/markdown" id="orz-src">
+${escapeForScript(o.source)}
+</script>
+${engineTag}
+<script>${escapeForScript(o.runtime)}</script>
+<script data-orz-asset="config">window.__ORZ_PAGED__ = ${JSON.stringify(config)};</script>
+<script data-orz-asset="app">${escapeForScript(o.appJs)}</script>
+</body>
+</html>`;
+}

package/dist/types.js ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * orz-paged — LOCKED INTERFACE.
+ *
+ * Every module codes against these types and nothing else. Changing a type here
+ * ripples across the document layer, the assembler, and the engine — treat edits
+ * as a coordinated change. (Mirrors orz-slides' `src/types.ts` role.)
+ *
+ * Vocabulary follows DESIGN.md §6–§9 and docs/document-model.md (the curated
+ * subset). Lengths: margins in **mm**, font size in **pt**, line-height unitless.
+ */
+export {};