@zigrivers/scaffold 3.29.0 → 3.30.0

package/content/guides/dashboard/index.md

@@ -0,0 +1,264 @@
+---
+title: Dashboard & Design System
+topic: dashboard
+description: The pipeline dashboard, its panels, the design-token system, and how to customize it safely
+category: tools
+order: 50
+---
+
+## What the dashboard is
+
+Each dashboard is a single, self-contained HTML file that visualizes where a
+Scaffold build stands: which pipeline steps are done and what to run next.
+Everything is inlined (CSS, JS, data); there are no CDN fonts, stylesheets, or
+scripts, so the file works offline and renders identically wherever you open it.
+
+:::callout{type=warning}
+**Two different producers — this guide documents the bash generator.** Scaffold
+has two distinct dashboard surfaces that do **not** share markup, CSS, or
+features:
+
+- **`scaffold dashboard`** (the user-facing CLI) renders HTML from
+  `src/dashboard/template.ts` + `generator.ts`. It has its own inline `<style>`
+  block (classes like `.container`, `.phase-header`, `.summary-cards`), a
+  **Decision Log** section, and standalone-command cards. It does **not** read
+  `lib/dashboard-theme.css`, has **no** Beads task section, and does **not**
+  inject the Build-Observability panels. The CLI writes the HTML to a temp file
+  (or `--output <path>`) and opens it via `open` / `xdg-open` / `start`
+  (:cite[src/cli/commands/dashboard.ts:64-66]).
+- **`scripts/generate-dashboard.sh`** is the visual-test fixture that
+  `make dashboard-test` runs. It embeds `lib/dashboard-theme.css`, renders a
+  Beads task section, and injects the two Build-Observability panels. Its
+  classes (`.phase-hdr`, `.pcard`, `.beads-section`) and design tokens are
+  exclusive to this surface.
+
+The rest of this guide documents the **`scripts/generate-dashboard.sh`**
+surface — the one used for visual verification and the one that carries the
+`lib/dashboard-theme.css` token system. The panels, classes, design tokens, and
+inline JS described below belong to that generator, **not** to the
+`scaffold dashboard` CLI command.
+:::
+
+## Reading the dashboard
+
+The page is built top-to-bottom by the inline renderer in the generator. From
+the header down:
+
+| Region | Classes | What it shows |
+| --- | --- | --- |
+| Header | `.header`, `.header-meta`, `.theme-toggle` | Title, profile badge, project name + timestamp, light/dark toggle |
+| Status legend | `.status-legend` | The four pipeline status badges (Done / Likely Done / Skipped / Pending) |
+| Progress bar | `.progress-bar`, `.seg-done`, `.seg-likely`, `.seg-skip` | Proportional completion rail |
+| Summary cards | `.cards`, `.card`, `.card-num` | Counts: completed, likely, skipped, pending, total, Beads-open |
+| What's Next | `.next-banner`, `.next-cmd` | The recommended next command, with a copy button |
+| Phases | `.phase`, `.phase-hdr`, `.pcard` | Collapsible phase sections, one prompt card per step |
+| Beads Tasks | `.beads-section`, `.beads-filters` (container), `.beads-filter` (buttons) | Filterable task list (status + priority), cards open a detail modal |
+| Build Progress / Audit | `#build-progress`, `#build-audit` | The two Build-Observability panels (only when populated) |
+
+The header, legend, progress bar, summary cards, and What's Next banner are all
+emitted in sequence by the renderer (:cite[scripts/generate-dashboard.sh:505-544]).
+
+### The Build-Observability panels
+
+After the pipeline content, the generator shells out to Build Observability and
+splices its HTML fragments into the page between named HTML comment markers
+(`<!-- observe:progress -->` … `<!-- /observe:progress -->` and the audit pair),
+preferring a local `dist/index.js` build and falling back to a global `scaffold`
+binary (:cite[scripts/generate-dashboard.sh:872-887]):
+
+```bash
+scaffold observe progress --render=dashboard-fragment       # → #build-progress panel
+scaffold observe audit   --render=dashboard-fragment-audit  # → #build-audit panel
+```
+
+Each renders as a `<section class="panel">` — `#build-progress` for the live
+timeline and `#build-audit` (carrying `data-verdict` and `data-threshold`) for
+audit findings. If neither a local build nor a global `scaffold` is available the
+markers stay empty and the panels simply don't appear. See the
+[Build Observability guide](../observability/index.md){mode=advisory} for what
+those panels report.
+
+### Filters and modals (the inline JS)
+
+The dashboard is interactive without any framework — a handful of vanilla
+functions are inlined at the foot of the generated HTML:
+
+- **Collapse a phase** — clicking a `.phase-hdr` calls `togglePhase()`, which
+  toggles `.closed` on the header (rotating its arrow) and `.hidden` on the next
+  sibling list (:cite[scripts/generate-dashboard.sh:825-828]).
+- **Copy a command** — clicking a `.pcmd` calls `copyCmd()`, which writes the
+  `data-cmd` value to the clipboard and flashes the `.copied` state for 1.5 s
+  (:cite[scripts/generate-dashboard.sh:829-838]).
+- **Filter Beads** — `filterBeads()` switches the active status filter and
+  `filterBeadsPrio()` toggles priority filters; cards carry `data-bead-status`
+  and `data-bead-priority` so the filters can show/hide them
+  (:cite[scripts/generate-dashboard.sh:733-741]).
+- **Beads task detail modal** — `openBeadModal(id)` builds a `.modal-overlay`
+  detail view for a Beads task (status, priority, deps, timestamps); close via
+  the X, Escape, or a backdrop click
+  (:cite[scripts/generate-dashboard.sh:756-816]).
+- **Prompt detail modal** — clicking a prompt card calls `openModal(slug)`,
+  which renders the full prompt content for that pipeline step in the same
+  `.modal-overlay` shell (:cite[scripts/generate-dashboard.sh:693-710]).
+- **Audit finding filters** — on load, `initAuditFilters()` finds the
+  `#build-audit` section, reads its `data-threshold`, and wires the
+  `[data-filter]` buttons to show/hide `.finding` rows by severity rank
+  (:cite[scripts/generate-dashboard.sh:839-863]).
+
+## The design-token system
+
+`lib/dashboard-theme.css` defines a shared set of CSS custom properties for
+colors, spacing, sizes, and radii. Component styles should prefer these tokens
+via `var(--token)` — that is what keeps light and dark mode in lockstep and the
+surface coherent. The contract is "prefer tokens," not "tokens only": the file
+still contains some component-level raw values (e.g. `#fff`, gradient stop hex
+colors, `rgba(...)`, and a few one-off pixel values like `99px`, `720px`, and
+`130px`). Promote a raw value to a token when it needs light/dark parity or
+reuse; leave genuinely one-off structural values inline rather than minting a
+single-use token.
+
+### Colors — light + dark parity
+
+The light palette is declared on `:root` (:cite[lib/dashboard-theme.css:11-35]),
+and every color token has a matching override under `[data-theme="dark"]`
+(:cite[lib/dashboard-theme.css:98-120]). Dark mode is not a filter — backgrounds
+go dramatically darker, text lightens but stays slightly warm, and accents shift
+lighter for contrast on dark surfaces.
+
+:::filter-table
+| token | light | dark | role |
+| --- | --- | --- | --- |
+| `--bg` | `#f5f6fa` | `#0f1117` | Page background |
+| `--bg-card` | `#ffffff` | `#1a1d2e` | Card / panel surface |
+| `--bg-inset` | `#e8eaf2` | `#141724` | Recessed elements (copy buttons, inputs) |
+| `--text` | `#1a1d2e` | `#e2e5f0` | Primary text |
+| `--text-muted` | `#6b7294` | `#7c82a8` | Secondary text |
+| `--border` | `#dde0ed` | `#2a2f45` | Default borders |
+| `--accent` | `#4f46e5` | `#818cf8` | Primary interactive color |
+| `--green` | `#059669` | `#34d399` | Completed status |
+| `--blue` | `#2563eb` | `#60a5fa` | Likely-completed status |
+| `--yellow` | `#d97706` | `#fbbf24` | Warnings / blocked |
+| `--gray` | `#9ca3af` | `#6b7294` | Skipped status |
+:::
+
+Each status color (`--green`, `--blue`, `--yellow`, `--gray`) also has `-bg` and
+`-border` companions used by badges and status dots, so a status reads correctly
+on both card and inset surfaces.
+
+:::callout{type=note}
+The table above is a high-level subset of the most visible status and surface
+tokens — not the complete set. `lib/dashboard-theme.css` (and
+`docs/design-system.md` §2) also define many component-specific semantic tokens
+such as `--bg-hover`, `--text-faint`, the `--next-*`, `--progress-*`,
+`--shadow-*`, `--accent-hover` / `--accent-glow`, and `--border-light`. Consult
+the CSS file and §2 for the full system.
+:::
+
+### Spacing — the `--sp-*` scale
+
+All spacing comes from an 8-step scale on a 4px base
+(:cite[lib/dashboard-theme.css:63-71]). There are no ad-hoc margins or paddings;
+layout is composed entirely from these:
+
+| token | value | typical use |
+| --- | --- | --- |
+| `--sp-1` | `4px` | minimal gaps (dot margin) |
+| `--sp-2` | `8px` | tight gaps (badge padding) |
+| `--sp-3` | `12px` | card gap, prompt-card padding |
+| `--sp-4` | `16px` | card inner padding, section gap |
+| `--sp-5` | `20px` | banner padding |
+| `--sp-6` | `24px` | section margin, page side padding |
+| `--sp-8` | `32px` | page top/bottom padding |
+| `--sp-10` | `40px` | major section separation, footer |
+
+### Typography, radius & layout
+
+The font stacks are system-only (no web fonts): `--font-sans` for body and
+headings, `--font-mono` for commands, counts, and step numbers
+(:cite[lib/dashboard-theme.css:74-75]). Sizes run on a `--text-xs` … `--text-2xl`
+scale (:cite[lib/dashboard-theme.css:76-81]), paired with `--lh-*` line heights,
+`--fw-*` weights, and `--ls-*` letter-spacing tokens. Surfaces use `--radius`
+(10px) for cards/panels and `--radius-sm` (6px) for buttons and code blocks
+(:cite[lib/dashboard-theme.css:26]); content is centered within `--max-w` (960px)
+(:cite[lib/dashboard-theme.css:93]). Depth comes from a four-step shadow scale,
+with `--shadow-lg` reserved for modals and overlays
+(:cite[lib/dashboard-theme.css:61]).
+
+## Customizing the dashboard safely
+
+The dashboard's coherence is enforced by convention, not by a build step — so the
+rules in `docs/design-system.md` are load-bearing (with the §6.1 caveat noted
+below). Follow the add-a-token / add-a-component flow and stay inside the token
+system.
+
+:::callout{type=warning}
+**Two rules that are never optional.** (1) **Prefer tokens for anything that
+needs light/dark parity** — never hardcode a color, theme-dependent value, or
+font name in a component style; if you need a value that doesn't exist, add a
+*token* first. (Purely structural one-offs may stay inline — see the token
+section above.) (2) **Always ship both modes** —
+every new color token needs a `:root` value *and* a `[data-theme="dark"]`
+override, and every change must be checked in light *and* dark. Skipping the dark
+override leaves the token undefined in dark mode and breaks the surface.
+:::
+
+To add a token: declare it on `:root` in the light section of
+`lib/dashboard-theme.css`, add the dark override under `[data-theme="dark"]`,
+then reference it as `var(--token)`. Note that `docs/design-system.md` §6.1 is
+stale here — it still says to add the dark override to a
+`@media (prefers-color-scheme: dark)` block, but no such block exists in
+`lib/dashboard-theme.css`; the dark tokens live only under the `[data-theme="dark"]`
+attribute selector. Follow the code, not §6.1. To add a component: add its styles to the right section of the
+theme file, reuse existing tokens (add new ones first if needed), wire its markup
+into the generator JS, and document it in §3. New components should reuse
+established patterns — for example, collapsible sections reuse the same
+`.phase-hdr` + `togglePhase()` mechanism as pipeline phases, and detail views
+reuse `.modal-overlay`.
+
+Also avoid: `!important` (restructure selectors instead), any second theme
+mechanism (the `[data-theme]` toggle is the only one), and external resource
+references — the generated HTML must stay self-contained. Dark mode is driven by
+the inline bootstrap that reads `localStorage.getItem('scaffold-theme')`, falling
+back to `prefers-color-scheme` on first visit
+(:cite[scripts/generate-dashboard.sh:438]), and the `.theme-toggle` button flips
+the `[data-theme]` attribute and persists the choice via
+`localStorage.setItem('scaffold-theme', …)`
+(:cite[scripts/generate-dashboard.sh:817-823]).
+
+## Visual testing
+
+Reference guides are verified manually with a screenshot, and the dashboard
+itself is verified the same way: after any change to
+`scripts/generate-dashboard.sh`, `lib/dashboard-theme.css`, or a dashboard test,
+render it and look at it in a browser. There is no pixel-diff gate — a human (or
+an agent driving Playwright MCP) confirms the rendering.
+
+```bash
+make dashboard-test   # writes tests/screenshots/dashboard-test.html
+```
+
+Then drive Playwright MCP over the generated file: `browser_navigate` to its
+`file://` path, `browser_resize` to 1280×800 then 375×812, take a
+`browser_take_screenshot` at each. For dark mode, don't rely on emulating
+`prefers-color-scheme` after the page has loaded — the inline bootstrap reads it
+only once, so the page stays on whatever `[data-theme]` is already set. Instead,
+either set `localStorage('scaffold-theme', 'dark')` and reload, or click the
+`.theme-toggle` button; then confirm
+`document.documentElement.dataset.theme === 'dark'` **before** capturing the
+dark screenshots (and clear/set the key back for light shots). Also exercise the
+interactive bits (expand/collapse a phase, a Beads filter, a modal), and
+`browser_snapshot` to sanity-check accessibility.
+
+The minimum coverage for any dashboard change is desktop + mobile in both light
+and dark mode, plus the interactive elements, compared against the committed
+baselines.
+
+| Path | Role |
+| --- | --- |
+| `tests/screenshots/dashboard-test.html` | Generated test fixture (from `make dashboard-test`) |
+| `tests/screenshots/baseline/` | Committed baselines |
+| `tests/screenshots/current/` | New screenshots (gitignored); name `{feature}_{viewport}_{state}.png` |
+
+Update a baseline only for an intentional visual change — copy the new shot from
+`current/` to `baseline/` and commit it. Full workflow and naming live in
+`docs/tdd-standards.md` §7 and the design rules in `docs/design-system.md`.

package/content/guides/index.html

@@ -1089,7 +1089,7 @@ figure.mermaid svg .edgeLabel text { fill: var(--text-muted); color: var(--text-
 </header>
 <div class="layout">
   <aside class="rail"><nav class="toc" aria-label="Table of contents"><ul><li class="toc-2"><a href="#guides">Guides</a></li></ul></nav></aside>
-  <main class="content"><h2 id="guides">Guides</h2><ul class="guide-index"><li><a href="mmr/index.html"><strong>MMR Reference</strong></a><span class="cat">tools</span><p>Multi-Model Review — independent AI reviewers, reconciliation, and verdict gating</p></li></ul></main>
+  <main class="content"><h2 id="guides">Guides</h2><ul class="guide-index"><li><a href="concepts/index.html"><strong>Concepts &amp; Glossary</strong></a><span class="cat">concepts</span><p>The shared vocabulary — worktrees, phases, lenses, verdicts, and the rest — that the other guides assume</p></li><li><a href="mmr/index.html"><strong>MMR Reference</strong></a><span class="cat">tools</span><p>Multi-Model Review — independent AI reviewers, reconciliation, and verdict gating</p></li><li><a href="pipeline/index.html"><strong>The Scaffold Pipeline</strong></a><span class="cat">concepts</span><p>The 16-phase meta-prompt pipeline — phases, dependencies, conditional steps, methodology depth, and how to navigate it</p></li><li><a href="cli/index.html"><strong>Scaffold CLI Reference</strong></a><span class="cat">reference</span><p>Every scaffold command grouped by purpose — setup, navigation, observability, knowledge, validation, version</p></li><li><a href="install/index.html"><strong>Install, Update &amp; Adopt</strong></a><span class="cat">reference</span><p>Installing via npm/Homebrew/plugin, keeping current, and adopting scaffold into a new or existing project</p></li><li><a href="review-workflow/index.html"><strong>The Code-Review Workflow</strong></a><span class="cat">workflows</span><p>When and how to run multi-model review — entry points, input modes, verdicts, the round limit, and degraded mode</p></li><li><a href="observability/index.html"><strong>Build Observability</strong></a><span class="cat">tools</span><p>A durable ledger of build decisions, fused with git/GitHub/MMR/state and audited against the planning docs by nine lenses</p></li><li><a href="knowledge-freshness/index.html"><strong>Knowledge Freshness</strong></a><span class="cat">tools</span><p>How knowledge entries stay current, how coverage gaps surface as Lens-I findings, and how the daily cron, five PR gates, and source allowlist keep the KB grounded</p></li><li><a href="multi-agent/index.html"><strong>Parallel Agents &amp; Worktrees</strong></a><span class="cat">workflows</span><p>Running agents in parallel — worktree setup/teardown, the ledger-harvest coupling, and the build-phase entry points</p></li><li><a href="dashboard/index.html"><strong>Dashboard &amp; Design System</strong></a><span class="cat">tools</span><p>The pipeline dashboard, its panels, the design-token system, and how to customize it safely</p></li><li><a href="knowledge/index.html"><strong>Knowledge Base</strong></a><span class="cat">reference</span><p>What the knowledge base is, how entries are injected during assembly, and how to author or override them</p></li></ul></main>
 </div>
 <script>(function(){
   var LS_KEY = 'guide-theme';

package/content/guides/install/.diagrams/diagram-0.svg

@@ -0,0 +1 @@
+<svg id="my-svg" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 477.609px; background-color: transparent;" viewBox="0 0 477.609375 579.2156372070312" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#000000;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#my-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#my-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:1px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#666;stroke:#666;}#my-svg .marker.cross{stroke:#666;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg p{margin:0;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#000000;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span{color:#333;}#my-svg .cluster-label span p{background-color:transparent;}#my-svg .label text,#my-svg span{fill:#000000;color:#000000;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#eee;stroke:#999;stroke-width:1px;}#my-svg .rough-node .label text,#my-svg .node .label text,#my-svg .image-shape .label,#my-svg .icon-shape .label{text-anchor:middle;}#my-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#my-svg .rough-node .label,#my-svg .node .label,#my-svg .image-shape .label,#my-svg .icon-shape .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .root .anchor path{fill:#666!important;stroke-width:0;stroke:#666;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#666;stroke-width:1px;}#my-svg .flowchart-link{stroke:#666;fill:none;}#my-svg .edgeLabel{background-color:white;text-align:center;}#my-svg .edgeLabel p{background-color:white;}#my-svg .edgeLabel rect{opacity:0.5;background-color:white;fill:white;}#my-svg .labelBkg{background-color:rgba(255, 255, 255, 0.5);}#my-svg .cluster rect{fill:hsl(0, 0%, 98.9215686275%);stroke:#707070;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span{color:#333;}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(-160, 0%, 93.3333333333%);border:1px solid #707070;border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#000000;}#my-svg rect.text{fill:none;stroke-width:0;}#my-svg .icon-shape,#my-svg .image-shape{background-color:white;text-align:center;}#my-svg .icon-shape p,#my-svg .image-shape p{background-color:white;padding:2px;}#my-svg .icon-shape .label rect,#my-svg .image-shape .label rect{opacity:0.5;background-color:white;fill:white;}#my-svg .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#my-svg .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#my-svg .node .neo-node{stroke:#999;}#my-svg [data-look="neo"].node rect,#my-svg [data-look="neo"].cluster rect,#my-svg [data-look="neo"].node polygon{stroke:url(#my-svg-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg [data-look="neo"].node path{stroke:url(#my-svg-gradient);stroke-width:1px;}#my-svg [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg [data-look="neo"].node .neo-line path{stroke:#999;filter:none;}#my-svg [data-look="neo"].node circle{stroke:url(#my-svg-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg [data-look="neo"].node circle .state-start{fill:#000000;}#my-svg [data-look="neo"].icon-shape .icon{fill:url(#my-svg-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg [data-look="neo"].icon-shape .icon-neo path{stroke:url(#my-svg-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="my-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-pointEnd-margin" class="marker flowchart-v2" viewBox="0 0 11.5 14" refX="11.5" refY="7" markerUnits="userSpaceOnUse" markerWidth="10.5" markerHeight="14" orient="auto"><path d="M 0 0 L 11.5 7 L 0 14 z" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-pointStart-margin" class="marker flowchart-v2" viewBox="0 0 11.5 14" refX="1" refY="7" markerUnits="userSpaceOnUse" markerWidth="11.5" markerHeight="14" orient="auto"><polygon points="0,7 11.5,14 11.5,0" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-circleEnd-margin" class="marker flowchart-v2" viewBox="0 0 10 10" refY="5" refX="12.25" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-circleStart-margin" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-2" refY="5" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-crossEnd-margin" class="marker cross flowchart-v2" viewBox="0 0 15 15" refX="17.7" refY="7.5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 1,1 L 14,14 M 1,14 L 14,1" class="arrowMarkerPath" style="stroke-width: 2.5;"/></marker><marker id="my-svg_flowchart-v2-crossStart-margin" class="marker cross flowchart-v2" viewBox="0 0 15 15" refX="-3.5" refY="7.5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 1,1 L 14,14 M 1,14 L 14,1" class="arrowMarkerPath" style="stroke-width: 2.5; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M247.137,57L247.137,61.167C247.137,65.333,247.137,73.667,247.137,81.333C247.137,89,247.137,96,247.137,99.5L247.137,103" id="my-svg-L_A_B_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_B_0" data-points="W3sieCI6MjQ3LjEzNjcxODc1LCJ5Ijo1N30seyJ4IjoyNDcuMTM2NzE4NzUsInkiOjgyfSx7IngiOjI0Ny4xMzY3MTg3NDk5OTk5NywieSI6MTA2Ljk5OTk5OTk5OTk5OTk3fV0=" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/><path d="M195.088,280.567L182.446,295.325C169.804,310.083,144.519,339.599,131.877,359.774C119.234,379.949,119.234,390.782,119.234,396.199L119.234,401.616" id="my-svg-L_B_C_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_B_C_0" data-points="W3sieCI6MTk1LjA4ODE3ODk3NTIzMTI0LCJ5IjoyODAuNTY3MDkxMzI4NzQ2ODd9LHsieCI6MTE5LjIzNDM3NSwieSI6MzY5LjExNTYzMTEwMzUxNTZ9LHsieCI6MTE5LjIzNDM3NSwieSI6NDA1LjYxNTYzMTEwMzUxNTZ9XQ==" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/><path d="M299.185,280.567L311.828,295.325C324.47,310.083,349.754,339.599,362.397,359.774C375.039,379.949,375.039,390.782,375.039,396.199L375.039,401.616" id="my-svg-L_B_D_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_B_D_0" data-points="W3sieCI6Mjk5LjE4NTI1ODUyNDc2ODc2LCJ5IjoyODAuNTY3MDkxMzI4NzQ2OX0seyJ4IjozNzUuMDM5MDYyNSwieSI6MzY5LjExNTYzMTEwMzUxNTZ9LHsieCI6Mzc1LjAzOTA2MjUsInkiOjQwNS42MTU2MzExMDM1MTU2fV0=" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/><path d="M119.234,472.216L119.234,476.382C119.234,480.549,119.234,488.882,129.379,496.975C139.523,505.068,159.812,512.92,169.957,516.846L180.101,520.772" id="my-svg-L_C_E_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_C_E_0" data-points="W3sieCI6MTE5LjIzNDM3NSwieSI6NDcyLjIxNTYyOTU3NzYzNjd9LHsieCI6MTE5LjIzNDM3NSwieSI6NDk3LjIxNTYyOTU3NzYzNjd9LHsieCI6MTgzLjgzMTUxODMwODA4MDgsInkiOjUyMi4yMTU2Mjk1Nzc2MzY3fV0=" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/><path d="M375.039,472.216L375.039,476.382C375.039,480.549,375.039,488.882,364.895,496.975C354.75,505.068,334.461,512.92,324.317,516.846L314.172,520.772" id="my-svg-L_D_E_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_D_E_0" data-points="W3sieCI6Mzc1LjAzOTA2MjUsInkiOjQ3Mi4yMTU2Mjk1Nzc2MzY3fSx7IngiOjM3NS4wMzkwNjI1LCJ5Ijo0OTcuMjE1NjI5NTc3NjM2N30seyJ4IjozMTAuNDQxOTE5MTkxOTE5MTcsInkiOjUyMi4yMTU2Mjk1Nzc2MzY3fV0=" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_A_B_0" transform="translate(0, 0)"><text y="-10.1" text-anchor="middle"><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em" text-anchor="middle"/></text></g></g><g><rect class="background" style="stroke: none"/></g><g class="edgeLabel" transform="translate(119.234375, 369.1156311035156)"><g class="label" data-id="L_B_C_0" transform="translate(0, -10.5)"><g><rect class="background" style="" x="-58.1171875" y="-1" width="116.234375" height="23"/><text y="-10.1" text-anchor="middle" style=""><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em" text-anchor="middle"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">No</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> /</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> brand</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> new</tspan></tspan></text></g></g></g><g class="edgeLabel" transform="translate(375.0390625, 369.1156311035156)"><g class="label" data-id="L_B_D_0" transform="translate(0, -10.5)"><g><rect class="background" style="" x="-74.15625" y="-1" width="148.3125" height="23"/><text y="-10.1" text-anchor="middle" style=""><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em" text-anchor="middle"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">Yes,</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> already</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> written</tspan></tspan></text></g></g></g><g class="edgeLabel"><g class="label" data-id="L_C_E_0" transform="translate(0, 0)"><text y="-10.1" text-anchor="middle"><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em" text-anchor="middle"/></text></g></g><g><rect class="background" style="stroke: none"/></g><g class="edgeLabel"><g class="label" data-id="L_D_E_0" transform="translate(0, 0)"><text y="-10.1" text-anchor="middle"><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em" text-anchor="middle"/></text></g></g><g><rect class="background" style="stroke: none"/></g></g><g class="nodes"><g class="node default" id="my-svg-flowchart-A-0" data-look="classic" transform="translate(247.13671875, 32.5)"><rect class="basic label-container" style="" x="-114.078125" y="-24.5" width="228.15625" height="49"/><g class="label" style="" transform="translate(0, -9.5)"><rect/><g><rect class="background" style="stroke: none"/><text y="-10.1" style=""><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">New</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> or</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> existing</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> project</tspan></tspan></text></g></g></g><g class="node default" id="my-svg-flowchart-B-1" data-look="classic" transform="translate(247.13671875, 219.8078155517578)"><polygon points="112.80781173706055,0 225.6156234741211,-112.80781173706055 112.80781173706055,-225.6156234741211 0,-112.80781173706055" class="label-container" transform="translate(-112.30781173706055, 112.80781173706055)"/><g class="label" style="" transform="translate(0, -18.299999237060547)"><rect/><g><rect class="background" style="stroke: none"/><text y="-10.1" style=""><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">Have</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> matching</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> docs</tspan></tspan><tspan class="text-outer-tspan row" x="0" y="1em" dy="1.1em"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">PRD,</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> tech-stack,</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> etc.?</tspan></tspan></text></g></g></g><g class="node default" id="my-svg-flowchart-C-3" data-look="classic" transform="translate(119.234375, 438.9156303405762)"><rect class="basic label-container" style="" x="-111.234375" y="-33.29999923706055" width="222.46875" height="66.5999984741211"/><g class="label" style="" transform="translate(0, -18.299999237060547)"><rect/><g><rect class="background" style="stroke: none"/><text y="-10.1" style=""><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">scaffold</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> init</tspan></tspan><tspan class="text-outer-tspan row" x="0" y="1em" dy="1.1em"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">wizard</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> +</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> config</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> +</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> skills</tspan></tspan></text></g></g></g><g class="node default" id="my-svg-flowchart-D-5" data-look="classic" transform="translate(375.0390625, 438.9156303405762)"><rect class="basic label-container" style="" x="-94.5703125" y="-33.29999923706055" width="189.140625" height="66.5999984741211"/><g class="label" style="" transform="translate(0, -18.299999237060547)"><rect/><g><rect class="background" style="stroke: none"/><text y="-10.1" style=""><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">scaffold</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> init,</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> then</tspan></tspan><tspan class="text-outer-tspan row" x="0" y="1em" dy="1.1em"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">scaffold</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> adopt</tspan></tspan></text></g></g></g><g class="node default" id="my-svg-flowchart-E-7" data-look="classic" transform="translate(247.13671875, 546.7156295776367)"><rect class="basic label-container" style="" x="-88.8359375" y="-24.5" width="177.671875" height="49"/><g class="label" style="" transform="translate(0, -9.5)"><rect/><g><rect class="background" style="stroke: none"/><text y="-10.1" style=""><tspan class="text-outer-tspan row" x="0" y="-0.1em" dy="1.1em"><tspan font-style="normal" class="text-inner-tspan" font-weight="normal">Run</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> the</tspan><tspan font-style="normal" class="text-inner-tspan" font-weight="normal"> pipeline</tspan></tspan></text></g></g></g></g></g></g><defs><filter id="my-svg-drop-shadow" height="130%" width="130%"><feDropShadow dx="4" dy="4" stdDeviation="0" flood-opacity="0.06" flood-color="#000000"/></filter></defs><defs><filter id="my-svg-drop-shadow-small" height="150%" width="150%"><feDropShadow dx="2" dy="2" stdDeviation="0" flood-opacity="0.06" flood-color="#000000"/></filter></defs><linearGradient id="my-svg-gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="hsl(0, 0%, 83.3333333333%)" stop-opacity="1"/><stop offset="100%" stop-color="hsl(0, 0%, 88.9215686275%)" stop-opacity="1"/></linearGradient></svg>

package/content/guides/install/.diagrams/manifest.json

@@ -0,0 +1,3 @@
+{
+  "diagram-0": "dc3730a602c62e30"
+}