@wbc-ui/core2 1.0.0-r06 → 1.0.0-r07

package/assets/engine-flow.svg

@@ -0,0 +1,89 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 420" width="780" height="420">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#f8fafc"/>
+      <stop offset="100%" stop-color="#e2e8f0"/>
+    </linearGradient>
+    <linearGradient id="blue" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1976D2"/>
+      <stop offset="100%" stop-color="#0D47A1"/>
+    </linearGradient>
+    <linearGradient id="green" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#43A047"/>
+      <stop offset="100%" stop-color="#2E7D32"/>
+    </linearGradient>
+    <filter id="shadow">
+      <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-opacity="0.12"/>
+    </filter>
+    <marker id="arrowBlue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto">
+      <path d="M0,0 L10,5 L0,10" fill="#1976D2"/>
+    </marker>
+    <marker id="arrowGreen" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto">
+      <path d="M0,0 L10,5 L0,10" fill="#2E7D32"/>
+    </marker>
+  </defs>
+
+  <rect width="780" height="420" rx="10" fill="url(#bg)"/>
+
+  <!-- Title -->
+  <text x="390" y="28" text-anchor="middle" font-family="Arial,sans-serif" font-weight="900" font-size="16" fill="#1a202c">WBC Rendering Engine — Detection → Dispatch → Decorate → Output</text>
+
+  <!-- Stage labels -->
+  <text x="108" y="45" text-anchor="middle" font-family="Arial" font-size="9" fill="#94A3B8" font-weight="700">INPUT</text>
+  <text x="338" y="45" text-anchor="middle" font-family="Arial" font-size="9" fill="#94A3B8" font-weight="700">DISPATCH</text>
+  <text x="585" y="45" text-anchor="middle" font-family="Arial" font-size="9" fill="#94A3B8" font-weight="700">RENDER</text>
+  <text x="585" y="300" text-anchor="middle" font-family="Arial" font-size="9" fill="#94A3B8" font-weight="700">DECORATE</text>
+  <text x="585" y="398" text-anchor="middle" font-family="Arial" font-size="9" fill="#94A3B8" font-weight="700">OUTPUT</text>
+
+  <!-- ── Row 1: Input ── -->
+  <rect x="20" y="55" width="176" height="38" rx="6" fill="white" stroke="#1976D2" stroke-width="1.5" filter="url(#shadow)"/>
+  <text x="108" y="71" text-anchor="middle" font-family="monospace" font-weight="700" font-size="12" fill="#1565C0">Input: data</text>
+  <text x="108" y="85" text-anchor="middle" font-family="Arial" font-size="9" fill="#64748B">JSON · string · file</text>
+
+  <!-- Arrow input → detection (ends at detection edge) -->
+  <line x1="196" y1="74" x2="252" y2="74" stroke="#1976D2" stroke-width="1.8" marker-end="url(#arrowBlue)"/>
+
+  <!-- ── Row 2: Type Detection ── -->
+  <rect x="260" y="52" width="156" height="44" rx="6" fill="url(#blue)" filter="url(#shadow)"/>
+  <text x="338" y="70" text-anchor="middle" font-family="Arial" font-weight="700" font-size="12" fill="white">Type Detection</text>
+  <text x="338" y="88" text-anchor="middle" font-family="monospace" font-size="9" fill="#BBDEFB">string ? object ? array ? file ?</text>
+
+  <!-- Branch arrows detection → renderers (all end at renderer left edge x=500) -->
+  <line x1="416" y1="62" x2="492" y2="88" stroke="#43A047" stroke-width="1.5"/>
+  <line x1="416" y1="74" x2="492" y2="162" stroke="#1976D2" stroke-width="1.5"/>
+  <line x1="416" y1="86" x2="492" y2="236" stroke="#7B1FA2" stroke-width="1.5"/>
+
+  <!-- ── Renderers ── -->
+  <rect x="500" y="62" width="170" height="52" rx="5" fill="#E8F5E9" stroke="#43A047" stroke-width="1.2"/>
+  <text x="585" y="84" text-anchor="middle" font-family="monospace" font-weight="700" font-size="10" fill="#2E7D32">renderString</text>
+  <text x="585" y="102" text-anchor="middle" font-family="Arial" font-size="8" fill="#4CAF50">pipe | syntax</text>
+
+  <rect x="500" y="136" width="170" height="52" rx="5" fill="#E3F2FD" stroke="#1976D2" stroke-width="1.2"/>
+  <text x="585" y="158" text-anchor="middle" font-family="monospace" font-weight="700" font-size="10" fill="#1565C0">renderObject</text>
+  <text x="585" y="176" text-anchor="middle" font-family="Arial" font-size="8" fill="#1976D2">{ comp, options, items }</text>
+
+  <rect x="500" y="210" width="170" height="52" rx="5" fill="#F3E5F5" stroke="#7B1FA2" stroke-width="1.2"/>
+  <text x="585" y="232" text-anchor="middle" font-family="monospace" font-weight="700" font-size="10" fill="#6A1B9A">renderArray·File·Func·Prim</text>
+  <text x="585" y="250" text-anchor="middle" font-family="Arial" font-size="8" fill="#8E24AA">lists / images / code / values</text>
+
+  <!-- Arrow renderers merge → decorator (from LAST box bottom=262 to decorator top=302) -->
+  <line x1="585" y1="262" x2="585" y2="295" stroke="#64748B" stroke-width="1.5"/>
+  <polygon points="580,290 585,300 590,290" fill="#64748B"/>
+
+  <!-- ── Decorator Chain ── -->
+  <rect x="500" y="302" width="170" height="60" rx="5" fill="white" stroke="#7986CB" stroke-width="1.5" filter="url(#shadow)"/>
+  <text x="585" y="322" text-anchor="middle" font-family="Arial" font-weight="700" font-size="10" fill="#3949AB">Decorator Chain</text>
+  <text x="585" y="340" text-anchor="middle" font-family="monospace" font-size="8" fill="#7986CB">Focus → RTL → Select →</text>
+  <text x="585" y="354" text-anchor="middle" font-family="monospace" font-size="8" fill="#7986CB">wbCode → Flattener</text>
+
+  <!-- Arrow decorator → output (from decorator bottom=362 to output top=388) -->
+  <line x1="585" y1="362" x2="585" y2="378" stroke="#43A047" stroke-width="2" marker-end="url(#arrowGreen)"/>
+
+  <!-- ── Output ── -->
+  <rect x="530" y="388" width="110" height="30" rx="5" fill="url(#green)" filter="url(#shadow)"/>
+  <text x="585" y="407" text-anchor="middle" font-family="Arial" font-weight="700" font-size="10" fill="white">VNodes → DOM</text>
+
+  <!-- Vertical flow guide lines -->
+  <line x1="338" y1="96" x2="338" y2="330" stroke="#64748B" stroke-width="0.8" stroke-dasharray="5,4" opacity="0.25"/>
+  <line x1="338" y1="330" x2="500" y2="330" stroke="#7986CB" stroke-width="0.8" stroke-dasharray="5,4" opacity="0.25"/>
+</svg>

package/assets/hero-input-output.spec.md

@@ -0,0 +1,193 @@
+# Spec — `hero-input-output.svg` (README hero asset)
+
+> **Status:** Authoritative spec for the still image embedded at [README.md:27-29](../../README.md#L27-L29).
+> **Decision history:** vhs-screencast approach attempted 2026-05-19 → rejected (terminal frame reads as "CLI tool", not "UI engine"). This spec replaces it.
+> **Owner:** open — designer / DS V4 Pro / human can produce; spec is tool-agnostic.
+
+---
+
+## 1. Purpose
+
+A single image that, in **one glance**, proves the core @wbc-ui/core2 pitch:
+
+> *"You write `<WBC :item='...'>` once. The engine renders real Material Design UI."*
+
+The reader on `npmjs.com/package/@wbc-ui/core2` has 2-3 seconds before scrolling. The hero asset must do its job in that window — no animation, no waiting, no terminal.
+
+## 2. Composition (the only thing that matters)
+
+**Split-screen still, 16:9-ish, ≈1280×640 logical pixels.**
+
+```
+┌─────────────────────────────────┬─────────────────────────────────┐
+│                                 │                                 │
+│   LEFT — "WHAT YOU WRITE"       │   RIGHT — "WHAT GETS RENDERED"  │
+│   (monospace code, dark bg)     │   (real-looking Vuetify UI)     │
+│                                 │                                 │
+│   <WBC :item="…"/>              │   [Material card + content]     │
+│                                 │                                 │
+└─────────────────────────────────┴─────────────────────────────────┘
+       ↑ source-of-truth                   ↑ DOM result
+```
+
+**Centre divider:** a thin vertical line + a single `→` arrow at vertical centre. NOT animated. The arrow is the visual claim.
+
+**Heading band (full-width, above the split):** small text — `<WBC :item="…" />  ·  one component, real DOM` — centred, secondary colour.
+
+## 3. The 5 scenarios — pick ONE for the still
+
+A previous attempt tried to cram all 5 into a single frame. **Don't.** A still shows ONE pairing; if more is needed, that's option C (animated SVG / Lottie) and a separate sub-plan.
+
+**Recommended for hero:** **Scenario 4 — JSON → VCard**. It's the most visually convincing because the gap between "looks like a tiny config" and "renders as a polished Material card" is the largest. The other scenarios are documented here so future variants (or scenario rotation) have a single source.
+
+| # | Scenario | LEFT (source) | RIGHT (rendered) | Why this one |
+|---|---|---|---|---|
+| 1 | Hello World | `<WBC :item="'Welcome to @wbc-ui/core2\|text-h3 primary--text'" />` | A large blue heading reading **Welcome to @wbc-ui/core2** | Cleanest demo of pipe-syntax, but visually thin |
+| 2 | Link | `<WBC :item="'Read the docs\|text-h6\|/docs'" />` | A blue underlined h6 link reading **Read the docs** | Tiny on screen, weak hero |
+| 3 | File → image | `<WBC :item="'./hero.png\|rounded elevation-4'" />` | An actual image with rounded corners + drop shadow | Visually strong but requires a real source image |
+| **4** | **JSON → VCard ⭐** | A pretty-printed 5-line object: `{ comp: 'VCard', options: { props: { elevation: 4 }, html: '<h2>Q3 Revenue</h2><p>+24% YoY</p>' } }` | A Material VCard with title, body text, light grey background, elevation-4 shadow | **Strongest visual claim — pick this** |
+| 5 | Markdown | `<WBC :item="'./landing.md'" />` | A rendered markdown page (TOC sidebar, syntax-highlighted code block) | Best for the docs section, NOT the hero (too dense) |
+
+## 4. Visual specification (Scenario 4 — the chosen still)
+
+### Left half — source pane
+
+- **Background:** `#1e1e2e` (Catppuccin Mocha base) or any IDE-dark.
+- **Font:** monospace, **16–18 px**, soft white (`#cdd6f4`).
+- **Code block — exact content (no truncation):**
+
+  ```vue
+  <WBC :item="{
+    comp: 'VCard',
+    options: {
+      props: { elevation: 4 },
+      html: '<h2>Q3 Revenue</h2><p>+24% YoY</p>',
+      class: 'pa-4'
+    }
+  }" />
+  ```
+
+- **Syntax colours (light hint):** tag-name purple, attribute teal, string yellow-amber. Don't over-decorate.
+- **Padding:** ≥ 32 px on all sides.
+
+### Right half — rendered pane
+
+- **Background:** `#f5f5f5` (light Material surface) — the visual contrast with the left side IS the claim.
+- **Card to render:** Material `<v-card class="pa-4" elevation="4">` with:
+  - **Title (`h2`):** "Q3 Revenue" — 24 px, dark-grey, semibold.
+  - **Body (`p`):** "+24% YoY" — 16 px, success-green (`#1976D2` or `#43A047`). Optionally add a tiny up-arrow `▲`.
+  - **Card size:** ~ 260 × 120 px logical.
+  - **Drop shadow:** Material elevation-4 (soft, offset-y ≈ 4 px, blur ≈ 12 px, opacity ≈ 0.16).
+- **Card position:** vertically + horizontally centred in the right pane.
+- **Padding:** ≥ 32 px on all sides.
+
+### Centre divider
+
+- **Vertical line:** 1 px, `#3b3b4f` (mid-tone — visible on both sides).
+- **Arrow:** at vertical centre, slightly larger circle (24 px) containing a `→` glyph in white. Background of circle: `#1976D2` (the WBC primary).
+
+### Top band (above the split)
+
+- Full width, ~ 48 px tall.
+- Background: `#0d0d14` (deeper than left pane) → seamless transition to dark side.
+- Centred text: `<WBC :item="…" />` (monospace, 18 px, dimmed white) `·` `one component, real DOM` (sans-serif, 14 px, secondary).
+
+## 5. Format & size budget
+
+| Property | Target |
+|---|---|
+| **Format** | SVG strongly preferred (scales, ≤ 30 KB possible). PNG @ 2× acceptable. AVIF if hosting allows. |
+| **Logical size** | 1280 × 640 |
+| **File size** | ≤ 80 KB SVG / ≤ 250 KB PNG. **Hard ceiling: 400 KB** (anything above and the npm page degrades on 3G). |
+| **Aspect** | 2:1 — matches the `<img width="780">` slot already reserved in README. |
+| **Colour space** | sRGB. No CMYK. No P3. |
+| **Background** | Two-tone (dark left, light right) — must NOT be transparent (npm light-mode breaks transparent assets). |
+
+## 6. Production paths (pick one)
+
+| Path | Tool | Time | Output | Notes |
+|---|---|---|---|---|
+| **A** | Hand-rolled SVG | 1–2 h | `hero-input-output.svg` | Most precise, smallest file. Editable in text editor for tweaks. **Best for owner/lead.** |
+| **B** | Figma → export SVG | 1 h | `hero-input-output.svg` | Fastest visual iteration if you already use Figma. Watch exported size (often bloated). |
+| **C** | Excalidraw → export PNG/SVG | 30 min | `hero-input-output.svg` | Lowest fidelity but fastest. Hand-drawn style may not match the rest of the README. |
+| **D** | Real screenshot of the live demo | 15 min | `hero-input-output.png` | Take a 1280×640 screenshot of `demo.wbc-ui.com` rendering Scenario 4, then composite the source code on the left in any image editor. Most authentic but tied to the current demo's exact theme. |
+| **E** | AI-image generation | 5 min | `hero-input-output.png` | NOT recommended — AI image models reliably get monospace code wrong and produce uncanny Material cards. |
+
+## 7. Verification checklist (before embedding)
+
+- [ ] File at `docs/media/hero-input-output.svg` (or `.png`)
+- [ ] File size ≤ 400 KB
+- [ ] Renders correctly in **GitHub light mode** (no transparent bg surprises)
+- [ ] Renders correctly in **GitHub dark mode** (the dark left pane stays visually distinct from GitHub's `#0d1117` background — add a 1-px outer border if needed)
+- [ ] Source code on left is **readable at 780 px wide** (the README slot width) — letter height ≥ 14 px on a typical laptop screen
+- [ ] Material card on right does NOT bleed off the canvas
+- [ ] Logical 2:1 aspect ratio preserved
+- [ ] No proprietary fonts embedded (use system monospace + sans-serif fallback chains)
+
+## 8. README integration (when ready)
+
+Once the file exists:
+
+```html
+<!-- replace the current TODO-commented block at README.md:27-29 -->
+<p align="center">
+  <img src="docs/media/hero-input-output.svg"
+       alt="@wbc-ui/core2 — write &lt;WBC :item='...'&gt;, render real Material UI"
+       width="780"/>
+</p>
+```
+
+(Note: `<` and `>` in the `alt` attribute must be HTML-entity-escaped or quoted with `'…'` — npm's alt-text renderer is strict.)
+
+## 9. What this spec replaces
+
+- **Killed:** vhs `.tape` approach (`docs/media/hero-pipe-syntax.tape` — deleted 2026-05-19 13:21).
+- **Killed:** terminal-screencast GIF (`docs/media/hero-pipe-syntax.gif` — deleted 2026-05-19 13:21).
+- **Killed:** sub-plan rows 7.1–7.4 (vhs recording chain — cancelled in plan).
+- **Replaced by:** sub-plan rows 7.5–7.7 (produce SVG · embed · verify).
+
+## 10. Future variants (not for v1)
+
+- **Animated SVG** rotating through Scenarios 1, 3, 4, 5 — half-day production, hold for v1.1 of the README.
+- **Locale variants** (Arabic RTL hero) — defer to `/wbTranslate` pass.
+- **Tier variants** (free vs pro hero) — defer; the existing `tier-badges.svg` already covers tier signalling.
+
+---
+
+## 🔍 Validation (QA) — *(Opus 4.7 via Claude Code — 13:48)*
+
+> **Validator:** Opus 4.7 (same model as author — self-validation bias acknowledged) · **Mode:** PASS ✅ · **Score: 8/10**
+> **Note:** appending here because per the wbValid template, the spec IS the task 7.5 deliverable; there is no separate `tasks/task_7.5/` report folder.
+
+### What I checked
+
+| Criterion | Result |
+|---|---|
+| File exists at the path the plan claims | ✅ `docs/media/hero-input-output.spec.md` (9,063 bytes) |
+| Section count matches report claim ("10 sections") | ✅ `grep -c '^## '` = 10 |
+| Standalone-readable (no plan-file dependency) | ✅ — verified by re-reading sections 1–10 without context |
+| Composition spec unambiguous (designer could execute) | ⚠️ §2 abstract; §4 detailed but missing reference image |
+| Scenario chosen (one of the 5)? | ✅ Scenario 4 — JSON → VCard — explicitly marked ⭐ in §3 |
+| Size budget concrete? | ✅ ≤ 80 KB SVG / ≤ 250 KB PNG / hard ceiling 400 KB |
+| Production paths recommend a default? | ❌ §6 lists A/B/C/D/E but doesn't pick. **Defect.** |
+| Failure modes pre-empted? | ✅ Path E (AI image-gen) explicitly rejected; transparent-bg + dark-mode + npm-alt-escaping all flagged |
+| Verification checklist actionable? | ✅ §7 — 8 boxes, all concrete |
+| README-integration snippet provided? | ✅ §8 — drop-in HTML with escaped `<` / `>` warning |
+
+### Defects (the 2-point deduction)
+
+| # | Defect | Severity | Note |
+|---|---|---|---|
+| D1 | §6 surveys 5 production paths but doesn't recommend a default. A spec should opine, not just enumerate. | −1.0 | Recommend stating "Path A (hand-rolled SVG) is the default; pick another only if you have a specific reason." |
+| D2 | §2 composition is described in prose + a rough ASCII frame; a designer would still have to imagine the result. A 10-line richer ASCII mockup (with the actual code snippet on the left side and a sketch of the card on the right) would close the gap. | −0.5 | Low-cost fix: replace lines 30-40 with a richer mockup. |
+| D3 | §3 scenario table mentions "future scenario rotation" but §10 doesn't tie back to that. Minor consistency issue, not blocking. | −0.5 | One-line cross-reference would resolve. |
+
+### Why 8/10 and not lower
+
+The spec is a genuine working document. A designer or a model hand-rolling SVG could open it and produce something usable on a first attempt. The defects above are improvements, not blockers. None of the production paths in §6 are wrong — D1 is "the spec is under-opinionated," not "the spec is incorrect."
+
+### Suggested follow-up
+
+Fold D1 + D2 fixes into the next spec edit (before kicking off 7.6, not after). Cost: 5-10 min, no new plan row needed — they're micro-edits.
+
+**Verdict:** ✅ PASS — spec is production-ready; could be sharper with two small revisions.

package/assets/hero-input-output.svg

@@ -0,0 +1,165 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 640" width="1280" height="640">
+  <defs>
+    <!-- Material elevation-4 shadow filter -->
+    <filter id="elevation4" x="-10%" y="-10%" width="130%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000" flood-opacity="0.16"/>
+    </filter>
+    <!-- Monospace font stack -->
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&amp;family=Inter:wght@400;500;600&amp;display=swap');
+      .mono { font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; }
+      .sans { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; }
+    </style>
+  </defs>
+
+  <!-- ═══════════════════════════════════════════ -->
+  <!-- TOP BAND — full width, 48px tall            -->
+  <!-- ═══════════════════════════════════════════ -->
+  <rect x="0" y="0" width="1280" height="48" fill="#0d0d14"/>
+  <!-- Monospace part -->
+  <text x="520" y="30" class="mono" font-size="16" fill="#8a8aa0" text-anchor="end">
+    &lt;WBC :item="…" /&gt;
+  </text>
+  <!-- Separator dot -->
+  <text x="540" y="30" class="sans" font-size="14" fill="#4a4a5e" text-anchor="middle">·</text>
+  <!-- Sans-serif part -->
+  <text x="560" y="30" class="sans" font-size="14" fill="#6c6c80" text-anchor="start">
+    one component, real DOM
+  </text>
+
+  <!-- ═══════════════════════════════════════════ -->
+  <!-- LEFT PANE — dark code editor background     -->
+  <!-- ═══════════════════════════════════════════ -->
+  <rect x="0" y="48" width="636" height="592" fill="#1e1e2e"/>
+
+  <!-- Subtle "WHAT YOU WRITE" label -->
+  <text x="40" y="88" class="sans" font-size="11" fill="#585870" font-weight="500" letter-spacing="1.5">
+    WHAT YOU WRITE
+  </text>
+
+  <!-- Code block — Scenario 4: JSON → VCard -->
+  <!-- Line 1: <WBC :item="{ -->
+  <text x="56" y="150" class="mono" font-size="16">
+    <tspan fill="#cba6f7">&lt;</tspan><tspan fill="#89b4fa">WBC</tspan>
+    <tspan fill="#a6e3a1"> :item</tspan><tspan fill="#cdd6f4">=</tspan><tspan fill="#f9e2af">"</tspan><tspan fill="#cdd6f4">{</tspan>
+  </text>
+
+  <!-- Line 2:   comp: 'VCard', -->
+  <text x="56" y="180" class="mono" font-size="16">
+    <tspan fill="#cdd6f4">    comp</tspan><tspan fill="#89b4fa">:</tspan>
+    <tspan fill="#f9e2af"> 'VCard'</tspan><tspan fill="#cdd6f4">,</tspan>
+  </text>
+
+  <!-- Line 3:   options: { -->
+  <text x="56" y="210" class="mono" font-size="16">
+    <tspan fill="#cdd6f4">    options</tspan><tspan fill="#89b4fa">:</tspan>
+    <tspan fill="#cdd6f4"> {</tspan>
+  </text>
+
+  <!-- Line 4:     props: { elevation: 4 }, -->
+  <text x="56" y="240" class="mono" font-size="16">
+    <tspan fill="#cdd6f4">      props</tspan><tspan fill="#89b4fa">:</tspan>
+    <tspan fill="#cdd6f4"> { </tspan><tspan fill="#cdd6f4">elevation</tspan><tspan fill="#89b4fa">:</tspan>
+    <tspan fill="#fab387"> 4</tspan><tspan fill="#cdd6f4"> },</tspan>
+  </text>
+
+  <!-- Line 5:     html: '<h2>Q3 Revenue</h2> -->
+  <text x="56" y="270" class="mono" font-size="16">
+    <tspan fill="#cdd6f4">      html</tspan><tspan fill="#89b4fa">:</tspan>
+    <tspan fill="#f9e2af"> '&lt;h2&gt;Q3 Revenue&lt;/h2&gt;</tspan>
+  </text>
+
+  <!-- Line 6:           <p>+24% YoY</p>', -->
+  <text x="56" y="300" class="mono" font-size="16">
+    <tspan fill="#f9e2af">            &lt;p&gt;+24% YoY&lt;/p&gt;'</tspan><tspan fill="#cdd6f4">,</tspan>
+  </text>
+
+  <!-- Line 7:     class: 'pa-4' -->
+  <text x="56" y="330" class="mono" font-size="16">
+    <tspan fill="#cdd6f4">      class</tspan><tspan fill="#89b4fa">:</tspan>
+    <tspan fill="#f9e2af"> 'pa-4'</tspan>
+  </text>
+
+  <!-- Line 8:   } -->
+  <text x="56" y="360" class="mono" font-size="16">
+    <tspan fill="#cdd6f4">    }</tspan>
+  </text>
+
+  <!-- Line 9: }" /> -->
+  <text x="56" y="390" class="mono" font-size="16">
+    <tspan fill="#cdd6f4">  }</tspan><tspan fill="#f9e2af">"</tspan>
+    <tspan fill="#cdd6f4"> </tspan><tspan fill="#cba6f7">/&gt;</tspan>
+  </text>
+
+  <!-- Line numbers (subtle) -->
+  <text x="40" y="150" class="mono" font-size="12" fill="#45475a" text-anchor="end">1</text>
+  <text x="40" y="180" class="mono" font-size="12" fill="#45475a" text-anchor="end">2</text>
+  <text x="40" y="210" class="mono" font-size="12" fill="#45475a" text-anchor="end">3</text>
+  <text x="40" y="240" class="mono" font-size="12" fill="#45475a" text-anchor="end">4</text>
+  <text x="40" y="270" class="mono" font-size="12" fill="#45475a" text-anchor="end">5</text>
+  <text x="40" y="300" class="mono" font-size="12" fill="#45475a" text-anchor="end">6</text>
+  <text x="40" y="330" class="mono" font-size="12" fill="#45475a" text-anchor="end">7</text>
+  <text x="40" y="360" class="mono" font-size="12" fill="#45475a" text-anchor="end">8</text>
+  <text x="40" y="390" class="mono" font-size="12" fill="#45475a" text-anchor="end">9</text>
+
+  <!-- Subtle filename tab -->
+  <rect x="56" y="105" width="130" height="26" rx="4" fill="#313244"/>
+  <text x="70" y="122" class="mono" font-size="11" fill="#89b4fa">App.vue</text>
+  <circle cx="172" cy="118" r="3" fill="#45475a"/>
+
+  <!-- ═══════════════════════════════════════════ -->
+  <!-- CENTRE DIVIDER — line + arrow               -->
+  <!-- ═══════════════════════════════════════════ -->
+  <line x1="640" y1="48" x2="640" y2="640" stroke="#3b3b4f" stroke-width="1"/>
+
+  <!-- Arrow circle at vertical centre -->
+  <circle cx="640" cy="344" r="18" fill="#1976D2"/>
+  <text x="640" y="351" class="sans" font-size="20" fill="#ffffff" text-anchor="middle" font-weight="600">→</text>
+
+  <!-- ═══════════════════════════════════════════ -->
+  <!-- RIGHT PANE — light Material surface          -->
+  <!-- ═══════════════════════════════════════════ -->
+  <rect x="644" y="48" width="636" height="592" fill="#f5f5f5"/>
+
+  <!-- Subtle "WHAT GETS RENDERED" label -->
+  <text x="680" y="88" class="sans" font-size="11" fill="#9e9e9e" font-weight="500" letter-spacing="1.5">
+    WHAT GETS RENDERED
+  </text>
+
+  <!-- Material VCard — centred in right pane -->
+  <!-- Card background with elevation-4 shadow -->
+  <rect x="832" y="264" width="280" height="160" rx="8" fill="#ffffff" filter="url(#elevation4)"/>
+
+  <!-- Card inner padding area -->
+  <!-- Title: Q3 Revenue -->
+  <text x="856" y="308" class="sans" font-size="24" fill="#212121" font-weight="600">
+    Q3 Revenue
+  </text>
+
+  <!-- Divider line inside card -->
+  <line x1="856" y1="320" x2="1088" y2="320" stroke="#e0e0e0" stroke-width="1"/>
+
+  <!-- Body: +24% YoY with up arrow -->
+  <text x="856" y="368" class="sans" font-size="32" fill="#43A047" font-weight="600">
+    <tspan fill="#66BB6A" font-size="18">▲ </tspan>+24% YoY
+  </text>
+
+  <!-- Subtle "Vuetify Material" badge below the card -->
+  <rect x="906" y="440" width="130" height="24" rx="12" fill="#e8eaf6"/>
+  <text x="971" y="456" class="sans" font-size="10" fill="#5c6bc0" text-anchor="middle" font-weight="500">
+    Vuetify · Material UI
+  </text>
+
+  <!-- Browser chrome hint — dots in top-right corner -->
+  <circle cx="700" cy="118" r="5" fill="#e0e0e0"/>
+  <circle cx="716" cy="118" r="5" fill="#e0e0e0"/>
+  <circle cx="732" cy="118" r="5" fill="#e0e0e0"/>
+  <!-- URL bar hint -->
+  <rect x="750" y="112" width="180" height="12" rx="6" fill="#eeeeee"/>
+  <text x="840" y="122" class="mono" font-size="8" fill="#9e9e9e" text-anchor="middle">localhost:5173</text>
+
+  <!-- ═══════════════════════════════════════════ -->
+  <!-- OUTER BORDER (1px, spec §7 dark-mode safe)   -->
+  <!-- ═══════════════════════════════════════════ -->
+  <rect x="0" y="0" width="1280" height="640" rx="0" fill="none" stroke="#2a2a3c" stroke-width="1"/>
+</svg>

package/assets/tier-badges.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 70" width="560" height="70">
+  <defs>
+    <linearGradient id="free" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#43A047"/>
+      <stop offset="100%" stop-color="#66BB6A"/>
+    </linearGradient>
+    <linearGradient id="pro" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#7B1FA2"/>
+      <stop offset="100%" stop-color="#AB47BC"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Free badge -->
+  <rect x="0" y="0" width="270" height="70" rx="10" fill="url(#free)"/>
+  <text x="135" y="28" text-anchor="middle" font-family="Arial,sans-serif" font-weight="900" font-size="18" fill="white">🆓 FREE</text>
+  <text x="135" y="48" text-anchor="middle" font-family="Arial,sans-serif" font-weight="600" font-size="11" fill="#C8E6C9">Builder · 3 hooks · 10 depth</text>
+  <text x="135" y="63" text-anchor="middle" font-family="Arial,sans-serif" font-size="9" fill="#A5D6A7">Render everything. Publish anywhere.</text>
+
+  <!-- Arrow -->
+  <text x="280" y="42" text-anchor="middle" font-size="20" fill="#64748B">→</text>
+
+  <!-- Pro badge -->
+  <rect x="290" y="0" width="270" height="70" rx="10" fill="url(#pro)"/>
+  <text x="425" y="28" text-anchor="middle" font-family="Arial,sans-serif" font-weight="900" font-size="18" fill="white">💎 PRO</text>
+  <text x="425" y="48" text-anchor="middle" font-family="Arial,sans-serif" font-weight="600" font-size="11" fill="#E1BEE7">Architect · 7 hooks · Unlimited</text>
+  <text x="425" y="63" text-anchor="middle" font-family="Arial,sans-serif" font-size="9" fill="#CE93D8">Command states. Extract everything.</text>
+</svg>

package/dist/build-info.json

@@ -1,8 +1,8 @@
 {
   "package": "@wbc-ui/core2",
-  "version": "1.0.0-r06",
+  "version": "1.0.0-r07",
   "tier": "free",
-  "builtAt": "2026-05-20T20:00:41.970Z",
+  "builtAt": "2026-05-20T20:09:12.939Z",
   "commit": null,
   "node": "v24.15.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wbc-ui/core2",
-  "version": "1.0.0-r06",
+  "version": "1.0.0-r07",
   "description": "Advanced Dynamic UI Engine for Vue 2 — Part of the @wbc-ui ecosystem",
   "author": "Wissem Boughamoura <wissemb11@gmail.com> (https://www.wi-bg.com)",
   "homepage": "https://wbc-ui.com",
@@ -30,6 +30,7 @@
     "README.md",
     "LICENSE",
     "logo/",
+    "assets/",
     "vite-plugin.mjs",
     "wbc.webpack.js"
   ],