npm - @zenuml/core - Versions diffs - 3.47.8 → 3.48.0 - Mend

@zenuml/core 3.47.8 → 3.48.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 (204) hide show

package/dist/cloud-icons-eHuugVSv.js.map +1 -0
package/dist/zenuml.esm.mjs +2153 -2156
package/dist/zenuml.esm.mjs.map +1 -0
package/dist/zenuml.js +82 -82
package/dist/zenuml.js.map +1 -0
package/package.json +11 -1
package/src/cli/zenuml.ts +1164 -0
package/.agents/skills/babysit-pr/SKILL.md +0 -223
package/.agents/skills/babysit-pr/agents/openai.yaml +0 -7
package/.agents/skills/dia-scoring/SKILL.md +0 -139
package/.agents/skills/dia-scoring/agents/openai.yaml +0 -7
package/.agents/skills/dia-scoring/references/selectors-and-keys.md +0 -253
package/.agents/skills/land-pr/SKILL.md +0 -120
package/.agents/skills/propagate-core-release/SKILL.md +0 -205
package/.agents/skills/propagate-core-release/agents/openai.yaml +0 -7
package/.agents/skills/propagate-core-release/references/downstreams.md +0 -42
package/.agents/skills/ship-branch/SKILL.md +0 -105
package/.agents/skills/submit-branch/SKILL.md +0 -76
package/.agents/skills/validate-branch/SKILL.md +0 -72
package/.claude/commands/README.md +0 -162
package/.claude/commands/analyze.md +0 -101
package/.claude/commands/clarify.md +0 -158
package/.claude/commands/code-review.md +0 -322
package/.claude/commands/constitution.md +0 -73
package/.claude/commands/create-docs.md +0 -309
package/.claude/commands/full-context.md +0 -121
package/.claude/commands/gemini-consult.md +0 -164
package/.claude/commands/handoff.md +0 -146
package/.claude/commands/implement.md +0 -56
package/.claude/commands/plan.md +0 -43
package/.claude/commands/refactor.md +0 -188
package/.claude/commands/specify.md +0 -21
package/.claude/commands/tasks.md +0 -62
package/.claude/commands/update-docs.md +0 -314
package/.claude/hooks/README.md +0 -270
package/.claude/hooks/config/sensitive-patterns.json +0 -86
package/.claude/hooks/gemini-context-injector.sh +0 -129
package/.claude/hooks/mcp-security-scan.sh +0 -147
package/.claude/hooks/notify.sh +0 -103
package/.claude/hooks/setup/hook-setup.md +0 -96
package/.claude/hooks/setup/settings.json.template +0 -63
package/.claude/hooks/sounds/complete.wav +0 -0
package/.claude/hooks/sounds/input-needed.wav +0 -0
package/.claude/hooks/subagent-context-injector.sh +0 -65
package/.claude/skills/babysit-pr/SKILL.md +0 -223
package/.claude/skills/babysit-pr/agents/openai.yaml +0 -7
package/.claude/skills/dia-scoring/SKILL.md +0 -139
package/.claude/skills/dia-scoring/agents/openai.yaml +0 -7
package/.claude/skills/dia-scoring/references/selectors-and-keys.md +0 -253
package/.claude/skills/emoji-eval/SKILL.md +0 -187
package/.claude/skills/land-pr/SKILL.md +0 -120
package/.claude/skills/propagate-core-release/SKILL.md +0 -205
package/.claude/skills/propagate-core-release/agents/openai.yaml +0 -7
package/.claude/skills/propagate-core-release/references/downstreams.md +0 -42
package/.claude/skills/ship-branch/SKILL.md +0 -105
package/.claude/skills/submit-branch/SKILL.md +0 -76
package/.claude/skills/validate-branch/SKILL.md +0 -72
package/.claude/skills/zenuml-ux-research/SKILL.md +0 -183
package/.claude/skills/zenuml-ux-research/references/assertion-catalog.md +0 -261
package/.claude/skills/zenuml-ux-research/references/best-practices-overview.md +0 -56
package/.claude/skills/zenuml-ux-research/references/report-template.md +0 -89
package/.claude/skills/zenuml-ux-research/references/scenarios/edit-message-label.md +0 -37
package/.claude/skills/zenuml-ux-research/references/scenarios/insert-message.md +0 -36
package/.claude/skills/zenuml-ux-research/references/scenarios/insert-participant.md +0 -31
package/.claude/skills/zenuml-ux-research/references/scenarios/rename-participant.md +0 -33
package/.claude/skills/zenuml-ux-research/references/scenarios/undo-insert.md +0 -35
package/.devcontainer/devcontainer.json +0 -21
package/.dockerignore +0 -19
package/.eslintrc.js +0 -39
package/.git-blame-ignore-revs +0 -6
package/.kiro/hooks/README.md +0 -38
package/.kiro/hooks/session-sound-notification.js +0 -44
package/.kiro/hooks/session-sound-notification.json +0 -23
package/.mcp.json.example +0 -17
package/.nvmrc +0 -1
package/.prettierignore +0 -4
package/.prettierrc +0 -1
package/.specify/memory/constitution.md +0 -33
package/.specify/scripts/bash/check-prerequisites.sh +0 -166
package/.specify/scripts/bash/common.sh +0 -113
package/.specify/scripts/bash/create-new-feature.sh +0 -97
package/.specify/scripts/bash/setup-plan.sh +0 -60
package/.specify/scripts/bash/update-agent-context.sh +0 -728
package/.specify/templates/agent-file-template.md +0 -23
package/.specify/templates/plan-template.md +0 -219
package/.specify/templates/spec-template.md +0 -116
package/.specify/templates/tasks-template.md +0 -127
package/.storybook/main.ts +0 -25
package/.storybook/preview.ts +0 -29
package/.watchmanconfig +0 -3
package/AGENTS.md +0 -26
package/CLAUDE.md +0 -124
package/DEPLOYMENT.md +0 -62
package/Dockerfile +0 -36
package/IMPLEMENTATION_PLAN.md +0 -163
package/Integration/vanilla-js/index.html +0 -42
package/MCP-ASSISTANT-RULES.md +0 -85
package/README_CN.md +0 -15
package/TUTORIAL.md +0 -116
package/antlr/antlr-4.11.1-complete.jar +0 -0
package/bun.lock +0 -1544
package/bunfig.toml +0 -52
package/docs/UNICODE_SUPPORT.md +0 -179
package/docs/ai-context/deployment-infrastructure.md +0 -21
package/docs/ai-context/docs-overview.md +0 -89
package/docs/ai-context/handoff.md +0 -174
package/docs/ai-context/project-structure.md +0 -160
package/docs/ai-context/system-integration.md +0 -21
package/docs/asciidoc/contributor.adoc +0 -54
package/docs/asciidoc/create-my-own-theme.adoc +0 -149
package/docs/asciidoc/images/creation-component.png +0 -0
package/docs/asciidoc/images/creation-rtl.png +0 -0
package/docs/asciidoc/images/message-arrow-rtl.png +0 -0
package/docs/asciidoc/images/occurrence.png +0 -0
package/docs/asciidoc/images/return-message-conflict.png +0 -0
package/docs/asciidoc/images/shift-up-half-the-height.png +0 -0
package/docs/asciidoc/images/three-layer-info-arch.png +0 -0
package/docs/asciidoc/images/vertical-alignment.svg +0 -1
package/docs/asciidoc/images/vertically-aligning.png +0 -0
package/docs/asciidoc/index.adoc +0 -277
package/docs/asciidoc/theme-debug-web-app.png +0 -0
package/docs/asciidoc/tutorial.adoc +0 -22
package/docs/asciidoc/user-css.png +0 -0
package/docs/async-vs-sync-parser-rules.md +0 -81
package/docs/divider-parser-allow-spaces.md +0 -38
package/docs/highlighting-messages.md +0 -52
package/docs/images/editor-sample.png +0 -0
package/docs/inherited-vs-provided-from.md +0 -64
package/docs/parser/Assignment.md +0 -8
package/docs/parser/PARSER_IMPROVEMENTS_CC.md +0 -425
package/docs/parser/grammar_review_gemini.md +0 -116
package/docs/participants-function.md +0 -25
package/docs/responsive-participant-margin.md +0 -52
package/docs/starter.md +0 -9
package/docs/superpowers/plans/2026-03-27-e2e-test-reorg.md +0 -698
package/docs/superpowers/plans/2026-03-30-emoji-support.md +0 -1220
package/docs/superpowers/plans/2026-03-30-self-correcting-scoring.md +0 -206
package/docs/superpowers/plans/2026-04-15-keyboard-editing-on-diagram.md +0 -1992
package/docs/superpowers/plans/2026-04-15-zenuml-ux-research-skill.md +0 -1452
package/docs/ux-research/.gitkeep +0 -0
package/docs/ux-research/2026-04-15-rename-participant.md +0 -156
package/docs/ux-research/2026-04-18-insert-participant.md +0 -151
package/docs/width-translate-and-offsets.md +0 -62
package/docs/xss.md +0 -59
package/e2e/data/compare-cases.js +0 -1090
package/e2e/data/diff-algorithm.js +0 -199
package/e2e/fixtures/create-message.html +0 -26
package/e2e/fixtures/editable-label.html +0 -35
package/e2e/fixtures/editable-span.html +0 -122
package/e2e/fixtures/empty-diagram.html +0 -23
package/e2e/fixtures/fixture.html +0 -31
package/e2e/fixtures/insert-participant.html +0 -23
package/e2e/fixtures/reorder-cross-fragment.html +0 -31
package/e2e/fixtures/reorder-fragment.html +0 -29
package/e2e/fixtures/reorder-message.html +0 -27
package/e2e/fixtures/svg-test.html +0 -21
package/e2e/fixtures/type-switch.html +0 -29
package/e2e/tools/canonical-history.html +0 -908
package/e2e/tools/compare-case.html +0 -371
package/e2e/tools/compare.html +0 -35
package/e2e/tools/native-diff-ext/background.js +0 -60
package/e2e/tools/native-diff-ext/bridge.js +0 -26
package/e2e/tools/native-diff-ext/content.js +0 -194
package/e2e/tools/svg-preview.html +0 -56
package/embed.html +0 -193
package/eslint.config.mjs +0 -35
package/firebase-debug.log +0 -108
package/iframe-container-demo/diagram.html +0 -124
package/iframe-container-demo/host.html +0 -817
package/index.html +0 -771
package/mermaid-zenuml-async-spa-auth.png +0 -0
package/mermaid-zenuml-async-spa-auth.snapshot.md +0 -96
package/newsletter/unicode-support-announcement.md +0 -134
package/playground/creation.html +0 -53
package/playground/message.html +0 -63
package/playwright.config.ts +0 -40
package/renderer.html +0 -366
package/scripts/analyze-compare-case/collect-data.mjs +0 -1134
package/scripts/analyze-compare-case/config.mjs +0 -102
package/scripts/analyze-compare-case/geometry.mjs +0 -101
package/scripts/analyze-compare-case/native-diff.mjs +0 -224
package/scripts/analyze-compare-case/output.mjs +0 -74
package/scripts/analyze-compare-case/panel-diff.mjs +0 -114
package/scripts/analyze-compare-case/report.mjs +0 -162
package/scripts/analyze-compare-case/residual-scopes.mjs +0 -347
package/scripts/analyze-compare-case/scoring.mjs +0 -829
package/scripts/analyze-compare-case.mjs +0 -149
package/scripts/bump-version.js +0 -117
package/scripts/snapshot-dual.js +0 -173
package/scripts/update-snapshots.js +0 -70
package/skills/dia-scoring/SKILL.md +0 -129
package/skills/dia-scoring/agents/openai.yaml +0 -7
package/skills/dia-scoring/references/selectors-and-keys.md +0 -253
package/tailwind.config.js +0 -126
package/test-compression.html +0 -274
package/test-mermaid-zenuml.html +0 -57
package/test-setup.ts +0 -124
package/test-url-params.html +0 -192
package/tsconfig.app.json +0 -31
package/tsconfig.node.json +0 -24
package/tsconfig.test.json +0 -9
package/vite.config.lib.ts +0 -93
package/vite.config.ts +0 -84
package/wrangler.toml +0 -18

package/index.html DELETED Viewed

@@ -1,771 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> -->
-    <!-- <link
-      rel="preload stylesheet"
-      as="style"
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
-    /> -->
-    <style id="zenumlstyle">
-      /* Custom styles for the diagram */
-    </style>
-    <link
-      rel="stylesheet"
-      href="/vendor/highlightjs/github-dark.min.css"
-    />
-    <script src="/vendor/codemirror/codemirror.min.js"></script>
-    <link
-      rel="stylesheet"
-      href="/vendor/codemirror/codemirror.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="/vendor/codemirror/material-darker.min.css"
-    />
-    <title>ZenUML Dev Workbench</title>
-    <style>
-      :root {
-        --bg: #0f172a;
-        --bg-alt: #111827;
-        --panel: #ffffff;
-        --panel-alt: #f8fafc;
-        --panel-muted: #eef2f7;
-        --ink: #0f172a;
-        --muted: #526072;
-        --line: #d7deea;
-        --line-strong: #c4cedd;
-        --accent: #0f766e;
-        --accent-strong: #115e59;
-        --danger: #991b1b;
-        --shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
-        --radius-lg: 14px;
-        --radius-md: 10px;
-        --editor-width: 420px;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        min-height: 100%;
-      }
-      body {
-        font-family:
-          "SF Pro Text",
-          "Segoe UI",
-          system-ui,
-          sans-serif;
-        color: var(--ink);
-        background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
-      }
-      a {
-        color: inherit;
-      }
-      code,
-      .CodeMirror,
-      .tool-chip,
-      .tool-button,
-      .tool-link,
-      .stats-text,
-      .toolbar-label {
-        font-family:
-          "IBM Plex Mono",
-          "SFMono-Regular",
-          "Menlo",
-          "Monaco",
-          "Consolas",
-          monospace;
-      }
-      .app-shell {
-        min-height: 100vh;
-        display: grid;
-        grid-template-rows: auto 1fr;
-        gap: 12px;
-        padding: 14px;
-      }
-      .toolbar {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) auto;
-        align-items: center;
-        gap: 16px;
-        padding: 12px 14px;
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: var(--radius-lg);
-        background: rgba(15, 23, 42, 0.9);
-        color: #e5edf8;
-        box-shadow: var(--shadow);
-      }
-      .toolbar-title {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: baseline;
-        gap: 12px;
-      }
-      .toolbar-title strong {
-        font-size: 15px;
-        font-weight: 700;
-        letter-spacing: 0.01em;
-      }
-      .toolbar-title span {
-        color: #9fb1c7;
-        font-size: 12px;
-      }
-      .toolbar-actions {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-      .toolbar-label {
-        color: #9fb1c7;
-        font-size: 11px;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-      .workspace {
-        min-height: 0;
-        display: grid;
-        grid-template-columns: minmax(280px, var(--editor-width)) 10px minmax(320px, 1fr) minmax(320px, 1fr);
-        gap: 12px;
-        align-items: stretch;
-      }
-      .panel {
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-        min-width: 0;
-        overflow: hidden;
-        border-radius: var(--radius-lg);
-        border: 1px solid var(--line);
-        background: var(--panel);
-        box-shadow: var(--shadow);
-      }
-      .workspace-resizer {
-        position: relative;
-        min-height: 0;
-        border-radius: 999px;
-        background: rgba(148, 163, 184, 0.28);
-        cursor: col-resize;
-        touch-action: none;
-      }
-      .workspace-resizer::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        margin: auto;
-        width: 4px;
-        height: 56px;
-        border-radius: 999px;
-        background: rgba(15, 118, 110, 0.22);
-      }
-      .workspace-resizer:hover,
-      .workspace.is-resizing .workspace-resizer {
-        background: rgba(15, 118, 110, 0.2);
-      }
-      .workspace.is-resizing {
-        user-select: none;
-      }
-      .panel-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 14px;
-        padding: 12px 14px;
-        border-bottom: 1px solid var(--line);
-        background: var(--panel-alt);
-      }
-      .panel-title {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-      }
-      .panel-title h2,
-      .panel-title h3 {
-        margin: 0;
-        font-size: 14px;
-        letter-spacing: 0.01em;
-      }
-      .panel-title p {
-        margin: 0;
-        color: var(--muted);
-        font-size: 12px;
-        line-height: 1.3;
-      }
-      .panel-actions {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        gap: 8px;
-      }
-      .tool-button,
-      .tool-chip,
-      .tool-link {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        appearance: none;
-        border: 1px solid var(--line);
-        border-radius: 8px;
-        padding: 8px 10px;
-        background: #fff;
-        color: var(--ink);
-        cursor: pointer;
-        text-decoration: none;
-        transition:
-          border-color 160ms ease,
-          background 160ms ease;
-        font-size: 11px;
-        letter-spacing: 0.03em;
-        white-space: nowrap;
-      }
-      .tool-button:hover,
-      .tool-chip:hover,
-      .tool-link:hover {
-        border-color: var(--line-strong);
-        background: var(--panel-muted);
-      }
-      .toolbar .tool-chip,
-      .toolbar .tool-link {
-        background: rgba(15, 23, 42, 0.55);
-        border-color: rgba(159, 177, 199, 0.25);
-        color: #e5edf8;
-      }
-      .toolbar .tool-chip:hover,
-      .toolbar .tool-link:hover {
-        background: rgba(30, 41, 59, 0.95);
-        border-color: rgba(191, 209, 230, 0.4);
-      }
-      .tool-chip.is-active {
-        background: var(--accent);
-        border-color: var(--accent-strong);
-        color: #f8fffe;
-      }
-      .tool-button.primary {
-        background: var(--accent);
-        border-color: var(--accent-strong);
-        color: #f8fffe;
-      }
-      .panel-body {
-        flex: 1;
-        min-height: 0;
-      }
-      .editor-body {
-        background: #1d1d1b;
-      }
-      .CodeMirror {
-        font-size: 14px;
-        height: 100%;
-        overflow: hidden;
-      }
-      .CodeMirror-scroll {
-        padding: 1rem;
-      }
-      .zenuml .CodeMirror .CodeMirror-cursor {
-        border-color: #fff;
-        border-left-width: 2px;
-      }
-      .preview-surface {
-        height: 100%;
-        overflow: auto;
-        padding: 12px;
-        background: var(--panel-muted);
-      }
-      .html-surface {
-        position: relative;
-      }
-      .preview-stage {
-        min-height: 100%;
-        padding: 10px;
-        border-radius: var(--radius-md);
-        border: 1px solid var(--line);
-        background: #fff;
-      }
-      .preview-stage pre {
-        margin: 0;
-      }
-      .preview-stage svg {
-        display: block;
-      }
-      .svg-stage {
-        display: block;
-      }
-      #svg-container {
-        width: max-content;
-        margin: 0 auto;
-        min-width: 100%;
-        min-height: 100%;
-        display: grid;
-        place-items: center;
-      }
-      #svg-container svg {
-        display: block;
-        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
-      }
-      .stats-text {
-        color: #9fb1c7;
-        font-size: 11px;
-      }
-      .svg-error {
-        display: grid;
-        place-items: center;
-        min-height: 240px;
-        padding: 20px;
-        border-radius: var(--radius-md);
-        border: 1px dashed #d4b4b4;
-        color: var(--danger);
-        background: #fff7f7;
-        text-align: center;
-        line-height: 1.6;
-      }
-      .workspace.mode-svg,
-      .workspace.mode-dom {
-        grid-template-columns: minmax(280px, var(--editor-width)) 10px minmax(720px, 1fr);
-      }
-      .workspace.mode-svg .html-panel,
-      .workspace.mode-dom .svg-panel {
-        display: none;
-      }
-      @media (max-width: 1440px) {
-        .workspace,
-        .workspace.mode-svg,
-        .workspace.mode-dom {
-          grid-template-columns: minmax(280px, var(--editor-width)) 10px minmax(320px, 1fr);
-        }
-        .workspace.mode-split .svg-panel {
-          grid-column: 3;
-        }
-      }
-      @media (max-width: 1024px) {
-        .app-shell {
-          padding: 10px;
-        }
-        .toolbar {
-          grid-template-columns: 1fr;
-          align-items: start;
-        }
-        .workspace,
-        .workspace.mode-svg,
-        .workspace.mode-dom {
-          grid-template-columns: 1fr;
-        }
-        .workspace-resizer {
-          display: none;
-        }
-        .workspace.mode-split .svg-panel {
-          grid-column: auto;
-        }
-        .panel {
-          min-height: 360px;
-        }
-      }
-    </style>
-    <script src="/vendor/tailwindcss/tailwindcss.js"></script>
-  </head>
-  <body>
-    <div class="app-shell">
-      <header class="toolbar">
-        <div class="toolbar-title">
-          <strong>ZenUML Dev Workbench</strong>
-          <span>default to native SVG, switch to DOM or split only when needed</span>
-        </div>
-        <div class="toolbar-actions">
-          <span class="toolbar-label">View</span>
-          <button id="view-svg" class="tool-chip">SVG</button>
-          <button id="view-dom" class="tool-chip">DOM</button>
-          <button id="view-split" class="tool-chip">Split</button>
-          <span class="toolbar-label">Editing</span>
-          <button class="tool-chip" data-flag="enableParticipantInsertion" title="Toggle ParticipantInsertControls (+ between participants)">+ Participant</button>
-          <button class="tool-chip" data-flag="enableMessageInsertion" title="Toggle Occurrence drag-to-create + GapHandleZone message handles">+ Message</button>
-          <button class="tool-chip" data-flag="enableDividerInsertion" title="Toggle GapHandleZone divider button">+ Divider</button>
-          <button class="tool-chip" data-flag="enableParticipantStyleEditing" title="Toggle ParticipantStylePanel (color/type)">Style Participant</button>
-          <button id="width-provider-toggle" class="tool-chip"></button>
-          <span id="svg-stats" class="stats-text">SVG: waiting</span>
-          <a class="tool-link" href="/e2e/tools/compare.html" target="_blank" rel="noreferrer">
-            Compare Cases
-          </a>
-          <a class="tool-link" href="/e2e/tools/svg-preview.html" target="_blank" rel="noreferrer">
-            SVG Only
-          </a>
-        </div>
-      </header>
-      <main class="workspace mode-svg" id="workspace">
-          <article class="panel editor-panel">
-            <div class="panel-header">
-              <div class="panel-title">
-                <h2>Editor</h2>
-                <p>Persisted in <code>localStorage</code>.</p>
-              </div>
-              <div class="panel-actions">
-                <button onclick="loadExample('basic')" class="tool-button">Basic</button>
-                <button onclick="loadExample('advanced')" class="tool-button">Advanced</button>
-                <button onclick="clearEditor()" class="tool-button">Clear</button>
-                <button onclick="exportDiagram()" class="tool-button primary">Export PNG</button>
-              </div>
-            </div>
-            <div class="panel-body editor-body">
-              <textarea id="text" style="display: none"></textarea>
-            </div>
-          </article>
-          <div
-            id="editor-resizer"
-            class="workspace-resizer"
-            role="separator"
-            aria-orientation="vertical"
-            aria-label="Resize editor"
-          ></div>
-          <article class="panel html-panel">
-            <div class="panel-header">
-              <div class="panel-title">
-                <h3>DOM preview</h3>
-                <p><code>window.zenUml.render()</code> output.</p>
-              </div>
-            </div>
-            <div class="panel-body preview-surface html-surface">
-              <div class="preview-stage">
-                <pre class="zenuml"></pre>
-              </div>
-            </div>
-          </article>
-          <article class="panel svg-panel">
-            <div class="panel-header">
-              <div class="panel-title">
-                <h3>Native SVG preview</h3>
-                <p><code>renderToSvg()</code> output.</p>
-              </div>
-            </div>
-            <div class="panel-body preview-surface svg-surface">
-              <div class="preview-stage svg-stage">
-                <div id="svg-container"></div>
-              </div>
-            </div>
-          </article>
-      </main>
-    </div>
-    <script type="module">
-      import { waitUntil, debounce } from "./src/utils.ts";
-      import { createConfig } from "./src/config.ts";
-      import { toPng } from "html-to-image";
-      import { renderToSvg } from "./src/svg/renderToSvg.ts";
-      const editor = CodeMirror.fromTextArea(document.getElementById("text"), {
-        lineNumbers: true,
-        singleCursorHeightPerLine: false,
-        theme: "material-darker",
-        mode: "text/plain",
-        autofocus: true,
-      });
-      const svgContainer = document.getElementById("svg-container");
-      const svgStats = document.getElementById("svg-stats");
-      const workspace = document.getElementById("workspace");
-      const editorResizer = document.getElementById("editor-resizer");
-      const viewButtons = {
-        svg: document.getElementById("view-svg"),
-        dom: document.getElementById("view-dom"),
-        split: document.getElementById("view-split"),
-      };
-      const minEditorWidth = 280;
-      function clampEditorWidth(nextWidth) {
-        const maxEditorWidth = Math.max(minEditorWidth, Math.floor(window.innerWidth * 0.72));
-        return Math.min(Math.max(nextWidth, minEditorWidth), maxEditorWidth);
-      }
-      function setEditorWidth(nextWidth) {
-        const clampedWidth = clampEditorWidth(nextWidth);
-        document.documentElement.style.setProperty("--editor-width", `${clampedWidth}px`);
-        localStorage.setItem("zenuml-workbench-editor-width", String(clampedWidth));
-      }
-      function setViewMode(mode) {
-        const validMode = ["svg", "dom", "split"].includes(mode) ? mode : "svg";
-        workspace.classList.remove("mode-svg", "mode-dom", "mode-split");
-        workspace.classList.add(`mode-${validMode}`);
-        Object.entries(viewButtons).forEach(([key, button]) => {
-          button.classList.toggle("is-active", key === validMode);
-        });
-        localStorage.setItem("zenuml-workbench-view", validMode);
-      }
-      const FLAG_KEYS = [
-        "enableParticipantInsertion",
-        "enableMessageInsertion",
-        "enableDividerInsertion",
-        "enableParticipantStyleEditing",
-      ];
-      const FLAG_STORAGE_PREFIX = "zenuml-workbench-flag-";
-      function readFlag(key) {
-        const stored = localStorage.getItem(FLAG_STORAGE_PREFIX + key);
-        // Default ON in the workbench so dev experience matches main.tsx.
-        return stored === null ? true : stored === "true";
-      }
-      function writeFlag(key, value) {
-        localStorage.setItem(FLAG_STORAGE_PREFIX + key, String(value));
-      }
-      function readFlags() {
-        return Object.fromEntries(FLAG_KEYS.map((k) => [k, readFlag(k)]));
-      }
-      function syncFlagButtons() {
-        document.querySelectorAll("[data-flag]").forEach((btn) => {
-          btn.classList.toggle("is-active", readFlag(btn.dataset.flag));
-        });
-      }
-      const updateHtmlPreview = debounce((content) => {
-        const config = createConfig({
-          ...readFlags(),
-          onContentChange: (code) => editor.setValue(code),
-        });
-        window.zenUml.render(content, config).then((r) => {
-          window.parentLogger
-            .child({ name: "index.html" })
-            .debug("render resolved", r);
-        });
-      }, 400);
-      document.querySelectorAll("[data-flag]").forEach((btn) => {
-        btn.addEventListener("click", () => {
-          const key = btn.dataset.flag;
-          writeFlag(key, !readFlag(key));
-          syncFlagButtons();
-          updateHtmlPreview(editor.getValue());
-        });
-      });
-      syncFlagButtons();
-      const updateSvgPreview = debounce((content) => {
-        try {
-          const t0 = performance.now();
-          const result = renderToSvg(content);
-          const dt = (performance.now() - t0).toFixed(1);
-          if (!result.svg || result.width === 0 || result.height === 0) {
-            svgContainer.innerHTML = `
-              <div class="svg-error">
-                Native SVG output is empty for the current input.
-              </div>
-            `;
-            svgStats.textContent = "SVG: empty";
-            return;
-          }
-          svgContainer.innerHTML = result.svg;
-          svgStats.textContent = `SVG ${result.width}x${result.height} | ${dt}ms`;
-        } catch (error) {
-          console.error("Failed to render native SVG preview:", error);
-          svgContainer.innerHTML = `
-            <div class="svg-error">
-              Native SVG preview failed. Check the console for details.
-            </div>
-          `;
-          svgStats.textContent = "SVG: error";
-        }
-      }, 180);
-      Object.entries(viewButtons).forEach(([mode, button]) => {
-        button.addEventListener("click", () => setViewMode(mode));
-      });
-      editorResizer.addEventListener("pointerdown", (event) => {
-        if (window.innerWidth <= 1024) {
-          return;
-        }
-        event.preventDefault();
-        workspace.classList.add("is-resizing");
-        editorResizer.setPointerCapture(event.pointerId);
-        const onPointerMove = (moveEvent) => {
-          setEditorWidth(moveEvent.clientX - workspace.getBoundingClientRect().left);
-        };
-        const stopResize = () => {
-          workspace.classList.remove("is-resizing");
-          editorResizer.removeEventListener("pointermove", onPointerMove);
-          editorResizer.removeEventListener("pointerup", stopResize);
-          editorResizer.removeEventListener("pointercancel", stopResize);
-        };
-        editorResizer.addEventListener("pointermove", onPointerMove);
-        editorResizer.addEventListener("pointerup", stopResize);
-        editorResizer.addEventListener("pointercancel", stopResize);
-      });
-      window.addEventListener("resize", () => {
-        const savedWidth = Number(localStorage.getItem("zenuml-workbench-editor-width"));
-        if (savedWidth) {
-          setEditorWidth(savedWidth);
-        }
-      });
-      editor.on("change", function (cm) {
-        const content = cm.getValue();
-        updateSvgPreview(content);
-        waitUntil(
-          () => window.zenUml,
-          () => {
-            updateHtmlPreview(content);
-            // Save to localStorage
-            localStorage.setItem("zenuml-cm-code", content);
-          },
-        );
-      });
-      // Example data
-      const examples = {
-        basic: `Alice -> Bob: Hello Bob!
-Bob -> Alice: Hello Alice!`,
-        advanced: `title Online Shopping
-participant Customer
-participant WebApp
-participant PaymentService
-participant Database
-Customer -> WebApp: Browse products
-WebApp -> Database: Query products
-Database --> WebApp: Return products
-WebApp --> Customer: Display products
-Customer -> WebApp: Add to cart
-WebApp -> Database: Update cart
-Database --> WebApp: Cart updated
-WebApp --> Customer: Show cart
-Customer -> WebApp: Checkout
-WebApp -> PaymentService: Process payment
-PaymentService --> WebApp: Payment confirmed
-WebApp -> Database: Create order
-Database --> WebApp: Order created
-WebApp --> Customer: Order confirmation`,
-      };
-      // Global functions
-      window.loadExample = function (type) {
-        editor.setValue(examples[type] || examples.basic);
-      };
-      window.clearEditor = function () {
-        editor.setValue("");
-      };
-      window.exportDiagram = async function () {
-        const element = document.querySelector(".zenuml");
-        if (element) {
-          try {
-            const dataUrl = await toPng(element);
-            const link = document.createElement("a");
-            link.download = "sequence-diagram.png";
-            link.href = dataUrl;
-            link.click();
-          } catch (error) {
-            console.error("Failed to export diagram:", error);
-          }
-        }
-      };
-      // Load saved code from localStorage or default example
-      const savedCode = localStorage.getItem("zenuml-cm-code");
-      if (savedCode) {
-        editor.setValue(savedCode);
-      } else {
-        editor.setValue(examples.basic);
-      }
-      const savedEditorWidth = Number(localStorage.getItem("zenuml-workbench-editor-width"));
-      if (savedEditorWidth) {
-        setEditorWidth(savedEditorWidth);
-      }
-      setViewMode(localStorage.getItem("zenuml-workbench-view") || "svg");
-    </script>
-    <script type="module">
-      const params = new URLSearchParams(location.search);
-      const wp = params.get("WIDTH_PROVIDER") || import.meta.env.VITE_WIDTH_PROVIDER || "browser";
-      const toggle = document.getElementById("width-provider-toggle");
-      const isCanvas = wp === "canvas";
-      toggle.textContent = "WIDTH: " + wp;
-      toggle.classList.toggle("is-active", isCanvas);
-      toggle.title = "Click to switch to " + (isCanvas ? "browser" : "canvas");
-      toggle.addEventListener("click", () => {
-        const next = isCanvas ? "browser" : "canvas";
-        params.set("WIDTH_PROVIDER", next);
-        location.search = params.toString();
-      });
-    </script>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>