npm - @mohammadhprp/system-prompt - Versions diffs - 0.10.1 - Mend

@mohammadhprp/system-prompt 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (347) hide show

package/framework/skills/diagram-design/assets/example-loop-terminal.html ADDED Viewed

@@ -0,0 +1,347 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The self-improving loop · Terminal</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&amp;display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      :root {
+        --page: #0a0a0a;
+        --paper: #141414;
+        --bar: #1b1b1b;
+        --border: #2b2b2b;
+        --ink: #f5f5f5;
+        --muted: #9a9a9a;
+        --soft: #5c5c5c;
+        --accent: #ff5a36;
+        --accent-tint: rgba(255, 90, 54, 0.12);
+        --mono: "Geist Mono", ui-monospace, monospace;
+      }
+      body {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 2rem;
+        background: var(--page);
+        font-family: var(--mono);
+      }
+      .terminal {
+        width: 100%;
+        max-width: 1200px;
+        background: var(--paper);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        overflow: hidden;
+      }
+      .titlebar {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 16px;
+        background: var(--bar);
+        border-bottom: 1px solid var(--border);
+      }
+      .dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--soft);
+      }
+      .dot.accent {
+        background: var(--accent);
+      }
+      .titlebar-name {
+        flex: 1;
+        text-align: center;
+        color: var(--muted);
+        font: 500 0.7rem var(--mono);
+        letter-spacing: 0.04em;
+        margin-right: 46px;
+      }
+      .frame {
+        padding: 2.25rem 2.5rem 2.5rem;
+      }
+      .prompt {
+        display: flex;
+        gap: 0.6em;
+        margin-bottom: 0.9rem;
+        color: var(--muted);
+        font: 500 0.8rem var(--mono);
+        letter-spacing: 0.01em;
+      }
+      .prompt .sign {
+        color: var(--accent);
+      }
+      h1 {
+        margin-bottom: 1.5rem;
+        color: var(--ink);
+        font: 700 clamp(1.5rem, 2.2vw + 0.8rem, 2.05rem)/1.2 var(--mono);
+        letter-spacing: -0.01em;
+      }
+      h1::before {
+        content: "# ";
+        color: var(--soft);
+      }
+      svg {
+        display: block;
+        width: 100%;
+        min-width: 900px;
+      }
+      .ring {
+        fill: none;
+        stroke: var(--muted);
+        stroke-width: 1.2;
+      }
+      .spoke {
+        fill: none;
+        stroke: var(--soft);
+        stroke-width: 1;
+        stroke-dasharray: 5 4;
+      }
+      .station {
+        fill: var(--paper);
+        stroke: var(--ink);
+        stroke-width: 1;
+      }
+      .station.focal {
+        fill: var(--accent-tint);
+        stroke: var(--accent);
+        stroke-width: 1.4;
+      }
+      .hub {
+        fill: var(--ink);
+      }
+      .node-name {
+        fill: var(--ink);
+        font: 600 14px var(--mono);
+        text-anchor: middle;
+      }
+      .focal-name {
+        fill: var(--accent);
+      }
+      .sublabel {
+        fill: var(--muted);
+        font: 400 9.5px var(--mono);
+        text-anchor: middle;
+      }
+      .hub-name {
+        fill: var(--paper);
+        font: 700 18px var(--mono);
+        text-anchor: middle;
+      }
+      .hub-sub {
+        fill: var(--paper);
+        opacity: 0.7;
+        font: 400 9.5px var(--mono);
+        text-anchor: middle;
+      }
+      .arrow-label {
+        fill: var(--muted);
+        font: 500 9px var(--mono);
+        letter-spacing: 0.08em;
+        text-anchor: middle;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="terminal">
+      <div class="titlebar">
+        <div class="dot accent"></div>
+        <div class="dot"></div>
+        <div class="dot"></div>
+        <div class="titlebar-name">loop.sh — self-improving-loop</div>
+      </div>
+      <main class="frame">
+        <p class="prompt">
+          <span class="sign">$</span> diagram-design render --type loop
+        </p>
+        <h1>The self-improving loop</h1>
+        <svg
+          viewBox="0 0 1040 680"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-labelledby="loop-title loop-desc"
+        >
+          <title id="loop-title">The self-improving loop</title>
+          <desc id="loop-desc">
+            Six stations flow clockwise from Capture through Learn and back to
+            Capture. Each station writes shared state into one central memory
+            hub, with Decide highlighted as the human approval gate.
+          </desc>
+          <defs>
+            <pattern
+              id="dots"
+              width="22"
+              height="22"
+              patternUnits="userSpaceOnUse"
+            >
+              <circle cx="1" cy="1" r="0.9" fill="rgba(255,255,255,0.08)" />
+            </pattern>
+            <marker
+              id="arrow"
+              markerWidth="8"
+              markerHeight="6"
+              refX="7"
+              refY="3"
+              orient="auto"
+            >
+              <polygon points="0 0, 8 3, 0 6" fill="#9a9a9a" />
+            </marker>
+            <marker
+              id="arrow-soft"
+              markerWidth="8"
+              markerHeight="6"
+              refX="7"
+              refY="3"
+              orient="auto"
+            >
+              <polygon points="0 0, 8 3, 0 6" fill="#5c5c5c" />
+            </marker>
+          </defs>
+          <rect width="1040" height="680" fill="#141414" />
+          <rect width="1040" height="680" fill="url(#dots)" opacity="0.7" />
+          <!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
+          <path
+            class="ring"
+            d="M600 113.726 A240 240 0 0 1 704.969 187.073"
+            marker-end="url(#arrow)"
+          />
+          <path
+            class="ring"
+            d="M743.285 252 A240 240 0 0 1 743.722 426.882"
+            marker-end="url(#arrow)"
+          />
+          <path
+            class="ring"
+            d="M705.731 492 A240 240 0 0 1 601.130 565.871"
+            marker-end="url(#arrow)"
+          />
+          <path
+            class="ring"
+            d="M440 566.274 A240 240 0 0 1 335.031 492.927"
+            marker-end="url(#arrow)"
+          />
+          <path
+            class="ring"
+            d="M296.715 428 A240 240 0 0 1 296.278 253.118"
+            marker-end="url(#arrow)"
+          />
+          <path
+            class="ring"
+            d="M334.269 188 A240 240 0 0 1 438.870 114.129"
+            marker-end="url(#arrow)"
+          />
+          <!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
+          <path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)" />
+          <path
+            class="spoke"
+            d="M672 252 L616 284"
+            marker-end="url(#arrow-soft)"
+          />
+          <path
+            class="spoke"
+            d="M672 428 L616 396"
+            marker-end="url(#arrow-soft)"
+          />
+          <path class="spoke" d="M520 548 V400" marker-end="url(#arrow-soft)" />
+          <path
+            class="spoke"
+            d="M368 428 L424 396"
+            marker-end="url(#arrow-soft)"
+          />
+          <path
+            class="spoke"
+            d="M368 252 L424 284"
+            marker-end="url(#arrow-soft)"
+          />
+          <!-- Curated spoke labels sit beside the line with an 8px visible gap. -->
+          <rect x="530" y="199" width="52" height="17" rx="4" fill="#141414" />
+          <text x="556" y="211.5" class="arrow-label">SIGNALS</text>
+          <rect x="457" y="463" width="58" height="17" rx="4" fill="#141414" />
+          <text x="486" y="475.5" class="arrow-label">OUTCOMES</text>
+          <!-- Stations -->
+          <rect class="station" x="440" y="68" width="160" height="64" rx="6" />
+          <text x="520" y="96.5" class="node-name">Capture</text>
+          <text x="520" y="116.5" class="sublabel">signals in / intake</text>
+          <rect
+            class="station"
+            x="648"
+            y="188"
+            width="160"
+            height="64"
+            rx="6"
+          />
+          <text x="728" y="216.5" class="node-name">Research</text>
+          <text x="728" y="236.5" class="sublabel">evidence pulled</text>
+          <rect
+            class="station focal"
+            x="648"
+            y="428"
+            width="160"
+            height="64"
+            rx="6"
+          />
+          <text x="728" y="456.5" class="node-name focal-name">Decide</text>
+          <text x="728" y="476.5" class="sublabel">human approves</text>
+          <rect
+            class="station"
+            x="440"
+            y="548"
+            width="160"
+            height="64"
+            rx="6"
+          />
+          <text x="520" y="576.5" class="node-name">Act</text>
+          <text x="520" y="596.5" class="sublabel">work ships</text>
+          <rect
+            class="station"
+            x="232"
+            y="428"
+            width="160"
+            height="64"
+            rx="6"
+          />
+          <text x="312" y="456.5" class="node-name">Measure</text>
+          <text x="312" y="476.5" class="sublabel">outcomes logged</text>
+          <rect
+            class="station"
+            x="232"
+            y="188"
+            width="160"
+            height="64"
+            rx="6"
+          />
+          <text x="312" y="216.5" class="node-name">Learn</text>
+          <text x="312" y="236.5" class="sublabel">playbook updated</text>
+          <!-- The one shared-state hub. -->
+          <rect class="hub" x="420" y="288" width="200" height="104" rx="8" />
+          <text x="520" y="337.5" class="hub-name">Shared memory</text>
+          <text x="520" y="360.5" class="hub-sub">one record, every loop</text>
+        </svg>
+      </main>
+    </div>
+  </body>
+</html>

package/framework/skills/diagram-design/assets/example-loop.html ADDED Viewed

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>The self-improving loop</title>
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --paper: #f5f5f5; --ink: #2d3142; --muted: #4f5d75; --soft: #7a8399;
+      --accent: #eb6c36; --accent-tint: rgba(235,108,54,0.08); --link: #2e5aa8;
+      --sans: 'Geist', system-ui, sans-serif; --serif: 'Instrument Serif', serif;
+      --mono: 'Geist Mono', ui-monospace, monospace;
+    }
+    body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--paper); color: var(--ink); font-family: var(--sans); }
+    .frame { width: 100%; max-width: 1200px; }
+    .eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.66rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
+    h1 { margin-bottom: 1.5rem; color: var(--ink); font: 400 clamp(1.5rem, 2.4vw + 0.75rem, 2rem)/1.15 var(--serif); letter-spacing: -0.02em; }
+    svg { display: block; width: 100%; min-width: 900px; }
+    .ring { fill: none; stroke: var(--muted); stroke-width: 1.2; }
+    .spoke { fill: none; stroke: var(--soft); stroke-width: 1; stroke-dasharray: 5 4; }
+    .station { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
+    .station.focal { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.2; }
+    .hub { fill: var(--ink); }
+    .node-name { fill: var(--ink); font: 600 12px var(--sans); text-anchor: middle; }
+    .focal-name { fill: var(--accent); }
+    .sublabel { fill: var(--soft); font: 400 8px var(--mono); text-anchor: middle; }
+    .hub-name { fill: var(--paper); font: 600 16px var(--sans); text-anchor: middle; }
+    .hub-sub { fill: var(--paper); opacity: 0.72; font: 400 8px var(--mono); text-anchor: middle; }
+    .arrow-label { fill: var(--soft); font: 400 8px var(--mono); letter-spacing: 0.06em; text-anchor: middle; }
+  </style>
+</head>
+<body>
+  <main class="frame">
+    <p class="eyebrow">Loop · Diagram Design</p>
+    <h1>The self-improving loop</h1>
+    <svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-title loop-desc">
+      <title id="loop-title">The self-improving loop</title>
+      <desc id="loop-desc">Six stations flow clockwise from Capture through Learn and back to Capture. Each station writes shared state into one central memory hub, with Decide highlighted as the human approval gate.</desc>
+      <defs>
+        <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="0.9" fill="rgba(45,49,66,0.10)"/></pattern>
+        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/></marker>
+        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#eb6c36"/></marker>
+        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#2e5aa8"/></marker>
+        <marker id="arrow-soft" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#7a8399"/></marker>
+      </defs>
+      <rect width="1040" height="680" fill="#f5f5f5"/>
+      <rect width="1040" height="680" fill="url(#dots)" opacity="0.55"/>
+      <!-- Solid clockwise ring: six arcs on the same r=240 station circle. -->
+      <path class="ring" d="M600 113.726 A240 240 0 0 1 704.969 187.073" marker-end="url(#arrow)"/>
+      <path class="ring" d="M743.285 252 A240 240 0 0 1 743.722 426.882" marker-end="url(#arrow)"/>
+      <path class="ring" d="M705.731 492 A240 240 0 0 1 601.130 565.871" marker-end="url(#arrow)"/>
+      <path class="ring" d="M440 566.274 A240 240 0 0 1 335.031 492.927" marker-end="url(#arrow)"/>
+      <path class="ring" d="M296.715 428 A240 240 0 0 1 296.278 253.118" marker-end="url(#arrow)"/>
+      <path class="ring" d="M334.269 188 A240 240 0 0 1 438.870 114.129" marker-end="url(#arrow)"/>
+      <!-- Dashed write-backs: station inner edge to 6px before the hub stroke. -->
+      <path class="spoke" d="M520 132 V280" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M672 252 L616 284" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M672 428 L616 396" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M520 548 V400" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M368 428 L424 396" marker-end="url(#arrow-soft)"/>
+      <path class="spoke" d="M368 252 L424 284" marker-end="url(#arrow-soft)"/>
+      <!-- Curated spoke labels sit beside the line with an 8px visible gap. -->
+      <rect x="532" y="200" width="48" height="16" rx="4" fill="#f5f5f5"/>
+      <text x="556" y="212" class="arrow-label">SIGNALS</text>
+      <rect x="460" y="464" width="52" height="16" rx="4" fill="#f5f5f5"/>
+      <text x="486" y="476" class="arrow-label">OUTCOMES</text>
+      <!-- Stations -->
+      <rect class="station" x="440" y="68" width="160" height="64" rx="6"/>
+      <text x="520" y="96" class="node-name">Capture</text><text x="520" y="116" class="sublabel">signals in / intake</text>
+      <rect class="station" x="648" y="188" width="160" height="64" rx="6"/>
+      <text x="728" y="216" class="node-name">Research</text><text x="728" y="236" class="sublabel">evidence pulled</text>
+      <rect class="station focal" x="648" y="428" width="160" height="64" rx="6"/>
+      <text x="728" y="456" class="node-name focal-name">Decide</text><text x="728" y="476" class="sublabel">human approves</text>
+      <rect class="station" x="440" y="548" width="160" height="64" rx="6"/>
+      <text x="520" y="576" class="node-name">Act</text><text x="520" y="596" class="sublabel">work ships</text>
+      <rect class="station" x="232" y="428" width="160" height="64" rx="6"/>
+      <text x="312" y="456" class="node-name">Measure</text><text x="312" y="476" class="sublabel">outcomes logged</text>
+      <rect class="station" x="232" y="188" width="160" height="64" rx="6"/>
+      <text x="312" y="216" class="node-name">Learn</text><text x="312" y="236" class="sublabel">playbook updated</text>
+      <!-- The one shared-state hub. -->
+      <rect class="hub" x="420" y="288" width="200" height="104" rx="8"/>
+      <text x="520" y="336" class="hub-name">Shared memory</text>
+      <text x="520" y="360" class="hub-sub">one record, every loop</text>
+    </svg>
+  </main>
+</body>
+</html>

package/framework/skills/diagram-design/assets/example-medallion-dark.html ADDED Viewed

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>E-commerce analytics · Medallion · Dark</title>
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --paper: #2d3142; --paper-2: #393e53; --ink: #f5f5f5; --muted: #bfc0c0;
+      --soft: #8e98ac; --rule: rgba(245,245,245,0.12); --accent: #f08a59;
+      --accent-tint: rgba(240,138,89,0.10); --link: #6a95d8;
+      --sans: 'Geist', system-ui, sans-serif; --serif: 'Instrument Serif', serif;
+      --mono: 'Geist Mono', ui-monospace, monospace;
+    }
+    body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: var(--paper); color: var(--ink); font-family: var(--sans); }
+    .frame { width: 100%; max-width: 1200px; }
+    .eyebrow { margin-bottom: 0.5rem; color: var(--muted); font: 500 0.66rem var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
+    h1 { margin-bottom: 1.5rem; color: var(--ink); font: 400 clamp(1.5rem, 2.4vw + 0.75rem, 2rem)/1.15 var(--serif); letter-spacing: -0.02em; }
+    svg { display: block; width: 100%; min-width: 1040px; }
+    .tier-title { fill: var(--ink); font: 600 13px var(--sans); text-anchor: middle; }
+    .bucket, .field-value, .example-value { fill: var(--muted); font: 400 9px var(--mono); }
+    .bucket { text-anchor: middle; }
+    .field-value { color: var(--muted); }
+    .focal-text { fill: var(--accent); }
+    .field-label { fill: var(--ink); font: 600 11px var(--sans); }
+    .example-label, .arc-label, .path-tag { font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
+    .example-label { fill: var(--soft); font-size: 8px; }
+    .arc-label { font-size: 10px; text-anchor: middle; }
+    .path-title { fill: var(--ink); font: 600 11px var(--sans); }
+    .path-sub { fill: var(--muted); font: 400 9px var(--mono); }
+  </style>
+</head>
+<body>
+  <main class="frame">
+    <p class="eyebrow">Medallion · Diagram Design</p>
+    <h1>Five-tier e-commerce analytics storage</h1>
+    <svg viewBox="0 0 1040 548" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="medallion-title medallion-desc">
+      <title id="medallion-title">Five-tier e-commerce analytics medallion</title>
+      <desc id="medallion-desc">Clickstream events and order records move from raw storage through anonymized, staging, and aggregated tiers before lifecycle archiving.</desc>
+      <defs>
+        <marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#bfc0c0"/></marker>
+        <marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#f08a59"/></marker>
+        <marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6a95d8"/></marker>
+        <clipPath id="clip-raw"><rect x="16" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-anon"><rect x="204" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-stage"><rect x="392" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-aggregate"><rect x="580" y="80" width="172" height="380" rx="6"/></clipPath>
+        <clipPath id="clip-archive"><rect x="768" y="80" width="172" height="380" rx="6"/></clipPath>
+      </defs>
+      <rect width="1040" height="548" fill="#2d3142"/>
+      <!-- Promotion arcs are the medallion type's required connector grammar. -->
+      <path d="M102 80 C102 0 290 0 290 80" fill="none" stroke="#bfc0c0" stroke-width="1.4" marker-end="url(#arrow)"/>
+      <path d="M290 80 C290 0 478 0 478 80" fill="none" stroke="#bfc0c0" stroke-width="1.4" marker-end="url(#arrow)"/>
+      <path d="M478 80 C478 0 666 0 666 80" fill="none" stroke="#f08a59" stroke-width="1.6" marker-end="url(#arrow-accent)"/>
+      <path d="M666 80 C666 0 854 0 854 80" fill="none" stroke="#bfc0c0" stroke-width="1.4" stroke-dasharray="4,3" marker-end="url(#arrow)"/>
+      <text x="196" y="50" class="arc-label" fill="#bfc0c0">MASK IDS</text>
+      <text x="384" y="50" class="arc-label" fill="#bfc0c0">CLEAN + JOIN</text>
+      <text x="572" y="50" class="arc-label" fill="#f08a59">AGGREGATE</text>
+      <text x="760" y="50" class="arc-label" fill="#bfc0c0">LIFECYCLE</text>
+      <!-- Raw -->
+      <rect x="16" y="80" width="172" height="380" rx="6" fill="rgba(245,245,245,0.04)"/>
+      <rect x="16" y="80" width="172" height="50" fill="rgba(142,152,172,0.16)" clip-path="url(#clip-raw)"/>
+      <rect x="16" y="80" width="172" height="380" rx="6" fill="none" stroke="#bfc0c0"/>
+      <text x="102" y="106" class="tier-title">Raw</text>
+      <text x="102" y="144" class="bucket">raw-commerce</text>
+      <text x="32" y="180" class="field-label">Tool</text>
+      <foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">NiFi ingest</div></foreignObject>
+      <text x="32" y="220" class="field-label">Format</text>
+      <foreignObject x="32" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">JSON · Parquet</div></foreignObject>
+      <text x="32" y="260" class="field-label">Writer</text>
+      <foreignObject x="32" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>
+      <text x="32" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="32" y="374" class="example-value">clickstream events</text>
+      <text x="32" y="388" class="example-value">order records</text>
+      <!-- Anonymized -->
+      <rect x="204" y="80" width="172" height="380" rx="6" fill="rgba(245,245,245,0.04)"/>
+      <rect x="204" y="80" width="172" height="50" fill="rgba(245,245,245,0.08)" clip-path="url(#clip-anon)"/>
+      <rect x="204" y="80" width="172" height="380" rx="6" fill="none" stroke="rgba(245,245,245,0.30)"/>
+      <text x="290" y="106" class="tier-title">Anonymized</text>
+      <text x="290" y="144" class="bucket">anon-commerce</text>
+      <text x="220" y="180" class="field-label">Tool</text>
+      <foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino SQL</div></foreignObject>
+      <text x="220" y="220" class="field-label">Format</text>
+      <foreignObject x="220" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · partitioned</div></foreignObject>
+      <text x="220" y="260" class="field-label">Writer</text>
+      <foreignObject x="220" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>
+      <text x="220" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="220" y="374" class="example-value">session pseudonyms</text>
+      <text x="220" y="388" class="example-value">masked customer IDs</text>
+      <!-- Staging -->
+      <rect x="392" y="80" width="172" height="380" rx="6" fill="rgba(245,245,245,0.04)"/>
+      <rect x="392" y="80" width="172" height="50" fill="rgba(245,245,245,0.08)" clip-path="url(#clip-stage)"/>
+      <rect x="392" y="80" width="172" height="380" rx="6" fill="none" stroke="rgba(245,245,245,0.30)"/>
+      <text x="478" y="106" class="tier-title">Staging</text>
+      <text x="478" y="144" class="bucket">staging-commerce</text>
+      <text x="408" y="180" class="field-label">Tool</text>
+      <foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino · notebooks</div></foreignObject>
+      <text x="408" y="220" class="field-label">Format</text>
+      <foreignObject x="408" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · cleaned</div></foreignObject>
+      <text x="408" y="260" class="field-label">Writer</text>
+      <foreignObject x="408" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>
+      <text x="408" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="408" y="374" class="example-value">joined order facts</text>
+      <text x="408" y="388" class="example-value">validated event rows</text>
+      <!-- Aggregated focal tier -->
+      <rect x="580" y="80" width="172" height="380" rx="6" fill="rgba(240,138,89,0.12)"/>
+      <rect x="580" y="80" width="172" height="50" fill="rgba(240,138,89,0.20)" clip-path="url(#clip-aggregate)"/>
+      <rect x="580" y="80" width="172" height="380" rx="6" fill="none" stroke="#f08a59" stroke-width="1.6"/>
+      <text x="666" y="106" class="tier-title">Aggregated</text>
+      <text x="666" y="144" class="bucket focal-text">analytics-marts</text>
+      <text x="596" y="180" class="field-label">Tool</text>
+      <foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino INSERT</div></foreignObject>
+      <text x="596" y="220" class="field-label">Format</text>
+      <foreignObject x="596" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · metrics</div></foreignObject>
+      <text x="596" y="260" class="field-label">Writer</text>
+      <foreignObject x="596" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>
+      <text x="596" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="596" y="374" class="example-value focal-text">daily conversion rate</text>
+      <text x="596" y="388" class="example-value focal-text">revenue by channel</text>
+      <!-- Archive -->
+      <rect x="768" y="80" width="172" height="380" rx="6" fill="rgba(245,245,245,0.06)"/>
+      <rect x="768" y="80" width="172" height="50" fill="rgba(142,152,172,0.24)" clip-path="url(#clip-archive)"/>
+      <rect x="768" y="80" width="172" height="380" rx="6" fill="none" stroke="#bfc0c0" stroke-dasharray="5,3"/>
+      <text x="854" y="106" class="tier-title">Archive</text>
+      <text x="854" y="144" class="bucket">archive-commerce</text>
+      <text x="784" y="180" class="field-label">Tool</text>
+      <foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Object storage lifecycle</div></foreignObject>
+      <text x="784" y="220" class="field-label">Format</text>
+      <foreignObject x="784" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Cold tier · immutable</div></foreignObject>
+      <text x="784" y="260" class="field-label">Writer</text>
+      <foreignObject x="784" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>
+      <text x="784" y="360" class="example-label">E-COMMERCE EXAMPLE</text>
+      <text x="784" y="374" class="example-value">retained clickstream</text>
+      <text x="784" y="388" class="example-value">closed order snapshots</text>
+      <!-- Write-method paths -->
+      <rect x="16" y="476" width="460" height="56" rx="6" fill="rgba(245,245,245,0.04)" stroke="rgba(245,245,245,0.20)"/>
+      <rect x="24" y="482" width="64" height="12" rx="2" fill="none" stroke="rgba(245,245,245,0.30)" stroke-width="0.8"/>
+      <text x="56" y="491" class="path-tag" fill="#f5f5f5" font-size="7" text-anchor="middle">SQL PATH</text>
+      <text x="96" y="506" class="path-title">Trino INSERT INTO … SELECT</text>
+      <text x="96" y="522" class="path-sub">filter · join · aggregate — repeatable transforms</text>
+      <rect x="492" y="476" width="460" height="56" rx="6" fill="rgba(245,245,245,0.04)" stroke="rgba(245,245,245,0.20)"/>
+      <rect x="500" y="482" width="96" height="12" rx="2" fill="none" stroke="rgba(245,245,245,0.30)" stroke-width="0.8"/>
+      <text x="548" y="491" class="path-tag" fill="#f5f5f5" font-size="7" text-anchor="middle">NOTEBOOK PATH</text>
+      <text x="604" y="506" class="path-title">Python notebooks on object storage</text>
+      <text x="604" y="522" class="path-sub">explore · validate · model — interactive analysis</text>
+    </svg>
+  </main>
+</body>
+</html>