@wbc-ui/core2 1.0.0-r15 → 1.0.0-r16

package/README.md

@@ -104,7 +104,7 @@ A **Vue 2.7+ plugin** that implements the **"UI as Data"** paradigm. You feed it
 
 ---
 
-## Teasing Examples
+## Usage Examples
 
 ### Level 1 — Hello World
 ```html
@@ -271,35 +271,15 @@ For a longer walkthrough with worked examples, see the documentation hub at [wbc
 
 <details>
 <summary>Mermaid diagram (interactive fallback)</summary>
-<div align="center">
-
-```mermaid
-flowchart TD
-    Data("Input<br>(JSON / Array / String)") --> WBC["&lt;WBC :item='data' /&gt;"]
-    WBC --> Detect{"Detect Type"}
-
-    Detect -- "Str" --> RS[renderString]
-    Detect -- "Obj" --> RO[renderObject]
-    Detect -- "Arr" --> RA[renderArray]
-    Detect -- "File" --> RF[renderFile]
-    Detect -- "Fn"  --> RFn[renderFunction]
-
-    RS & RO & RA & RF & RFn --> Chain
-
-    subgraph Chain["Decorator Chain"]
-        direction LR
-        A[Focus] --> B[RTL] --> C[Select] --> D[wbCode] --> E[Flattener]
-    end
-
-    Chain --> VNodes["Reactive VNodes"]
-    VNodes --> DOM(("DOM"))
-```
-
-</div>
+<p align="center">
+  <img src="./assets/mermaid-architecture.png"
+       alt="Architecture diagram"
+       width="680"/>
+</p>
 </details>
 
 - **6 renderers** dispatch based on JavaScript type
-- **Pipe `|` syntax** for inline styling: `"Hello|text-h4 primary--text|/docs|html"`
+- **Pipe syntax** for inline styling: `Hello text-h4 primary--text /docs html`
 - **`dive: true`** activates reactive mode — every property becomes a function of `(ctx)` state
 - **Post-processing decorators** apply focus mode, RTL, selection overlays, and code rendering
 
@@ -380,6 +360,10 @@ flowchart TD
 
 ## 🌐 Ecosystem
 
+<p align="center">
+  <img src="./assets/ecosystem-map.svg" alt="@wbc-ui ecosystem map — core2 at center with 8 satellite packages" width="780"/>
+</p>
+
 `@wbc-ui/core2` is the foundation of the **@wbc-ui** monorepo. Every package below is published to npm and depends on `core2`:
 
 | Package | What it adds | Status |

package/assets/ecosystem-map.svg

@@ -0,0 +1,155 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 480" width="780" height="480">
+  <defs>
+    <linearGradient id="bgEco" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#0d0d14"/>
+      <stop offset="100%" stop-color="#1a1a2e"/>
+    </linearGradient>
+    <linearGradient id="coreGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#1976D2"/>
+      <stop offset="100%" stop-color="#0D47A1"/>
+    </linearGradient>
+    <linearGradient id="codeGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#43A047"/>
+      <stop offset="100%" stop-color="#2E7D32"/>
+    </linearGradient>
+    <linearGradient id="chartGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#E53935"/>
+      <stop offset="100%" stop-color="#C62828"/>
+    </linearGradient>
+    <linearGradient id="dvGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#FB8C00"/>
+      <stop offset="100%" stop-color="#E65100"/>
+    </linearGradient>
+    <linearGradient id="latexGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#8E24AA"/>
+      <stop offset="100%" stop-color="#6A1B9A"/>
+    </linearGradient>
+    <linearGradient id="mermaidGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#00ACC1"/>
+      <stop offset="100%" stop-color="#00838F"/>
+    </linearGradient>
+    <linearGradient id="alertGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#FDD835"/>
+      <stop offset="100%" stop-color="#F9A825"/>
+    </linearGradient>
+    <linearGradient id="pressGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#5E35B1"/>
+      <stop offset="100%" stop-color="#4527A0"/>
+    </linearGradient>
+    <linearGradient id="payGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#00897B"/>
+      <stop offset="100%" stop-color="#00695C"/>
+    </linearGradient>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="shadowEco">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.3"/>
+    </filter>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&amp;display=swap');
+      .sans { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }
+    </style>
+  </defs>
+
+  <!-- Background -->
+  <rect width="780" height="480" rx="10" fill="url(#bgEco)"/>
+
+  <!-- Subtle radial grid circles -->
+  <circle cx="390" cy="250" r="80" fill="none" stroke="#1e1e3a" stroke-width="0.5"/>
+  <circle cx="390" cy="250" r="155" fill="none" stroke="#1e1e3a" stroke-width="0.5" stroke-dasharray="4,4"/>
+
+  <!-- Title -->
+  <text x="390" y="30" text-anchor="middle" class="sans" font-weight="900" font-size="15" fill="#cdd6f4" letter-spacing="1.5">@wbc-ui ECOSYSTEM</text>
+  <text x="390" y="50" text-anchor="middle" class="sans" font-size="11" fill="#585870">Every package depends on core2 · Published to npm · MIT Licensed</text>
+
+  <!-- Connector lines from center to each satellite (drawn BEHIND nodes) -->
+  <!-- code2: top-left -->
+  <line x1="390" y1="250" x2="220" y2="130" stroke="#43A047" stroke-width="1.5" opacity="0.35"/>
+  <!-- chart2: top -->
+  <line x1="390" y1="250" x2="390" y2="100" stroke="#E53935" stroke-width="1.5" opacity="0.35"/>
+  <!-- dataviewer2: top-right -->
+  <line x1="390" y1="250" x2="560" y2="130" stroke="#FB8C00" stroke-width="1.5" opacity="0.35"/>
+  <!-- latex2: right -->
+  <line x1="390" y1="250" x2="610" y2="250" stroke="#8E24AA" stroke-width="1.5" opacity="0.35"/>
+  <!-- mermaid2: bottom-right -->
+  <line x1="390" y1="250" x2="560" y2="370" stroke="#00ACC1" stroke-width="1.5" opacity="0.35"/>
+  <!-- alert2: bottom -->
+  <line x1="390" y1="250" x2="390" y2="400" stroke="#FDD835" stroke-width="1.5" opacity="0.35"/>
+  <!-- press2: bottom-left -->
+  <line x1="390" y1="250" x2="220" y2="370" stroke="#5E35B1" stroke-width="1.5" opacity="0.35"/>
+  <!-- pay2: left -->
+  <line x1="390" y1="250" x2="170" y2="250" stroke="#00897B" stroke-width="1.5" opacity="0.35"/>
+
+  <!-- ═══════════════════ CENTER NODE — core2 ═══════════════════ -->
+  <circle cx="390" cy="250" r="52" fill="url(#coreGrad)" filter="url(#glow)"/>
+  <text x="390" y="243" text-anchor="middle" class="sans" font-weight="900" font-size="14" fill="#ffffff">core2</text>
+  <text x="390" y="260" text-anchor="middle" class="sans" font-size="9" fill="#BBDEFB">UI as Data engine</text>
+  <text x="390" y="273" text-anchor="middle" class="sans" font-size="8" fill="#90CAF9">6 renderers · pipe |</text>
+
+  <!-- ═══════ SATELLITE: code2 (top-left) ═══════ -->
+  <g filter="url(#shadowEco)">
+    <circle cx="220" cy="130" r="38" fill="url(#codeGrad)"/>
+    <text x="220" y="125" text-anchor="middle" class="sans" font-weight="700" font-size="12" fill="#fff">code2</text>
+    <text x="220" y="140" text-anchor="middle" class="sans" font-size="8" fill="#C8E6C9">Monaco Editor</text>
+  </g>
+
+  <!-- ═══════ SATELLITE: chart2 (top) ═══════ -->
+  <g filter="url(#shadowEco)">
+    <circle cx="390" cy="100" r="38" fill="url(#chartGrad)"/>
+    <text x="390" y="95" text-anchor="middle" class="sans" font-weight="700" font-size="12" fill="#fff">chart2</text>
+    <text x="390" y="110" text-anchor="middle" class="sans" font-size="8" fill="#FFCDD2">ECharts</text>
+  </g>
+
+  <!-- ═══════ SATELLITE: dataviewer2 (top-right) ═══════ -->
+  <g filter="url(#shadowEco)">
+    <circle cx="560" cy="130" r="38" fill="url(#dvGrad)"/>
+    <text x="560" y="122" text-anchor="middle" class="sans" font-weight="700" font-size="11" fill="#fff">dataviewer2</text>
+    <text x="560" y="138" text-anchor="middle" class="sans" font-size="8" fill="#FFE0B2">JSON explorer</text>
+  </g>
+
+  <!-- ═══════ SATELLITE: latex2 (right) ═══════ -->
+  <g filter="url(#shadowEco)">
+    <circle cx="610" cy="250" r="38" fill="url(#latexGrad)"/>
+    <text x="610" y="245" text-anchor="middle" class="sans" font-weight="700" font-size="12" fill="#fff">latex2</text>
+    <text x="610" y="260" text-anchor="middle" class="sans" font-size="8" fill="#E1BEE7">Math render</text>
+  </g>
+
+  <!-- ═══════ SATELLITE: mermaid2 (bottom-right) ═══════ -->
+  <g filter="url(#shadowEco)">
+    <circle cx="560" cy="370" r="38" fill="url(#mermaidGrad)"/>
+    <text x="560" y="365" text-anchor="middle" class="sans" font-weight="700" font-size="11" fill="#fff">mermaid2</text>
+    <text x="560" y="380" text-anchor="middle" class="sans" font-size="8" fill="#B2EBF2">Diagrams</text>
+  </g>
+
+  <!-- ═══════ SATELLITE: alert2 (bottom) ═══════ -->
+  <g filter="url(#shadowEco)">
+    <circle cx="390" cy="400" r="38" fill="url(#alertGrad)"/>
+    <text x="390" y="395" text-anchor="middle" class="sans" font-weight="700" font-size="12" fill="#4E342E">alert2</text>
+    <text x="390" y="410" text-anchor="middle" class="sans" font-size="8" fill="#795548">Toasts / Notifs</text>
+  </g>
+
+  <!-- ═══════ SATELLITE: press2 (bottom-left) ═══════ -->
+  <g filter="url(#shadowEco)">
+    <circle cx="220" cy="370" r="38" fill="url(#pressGrad)"/>
+    <text x="220" y="365" text-anchor="middle" class="sans" font-weight="700" font-size="12" fill="#fff">press2</text>
+    <text x="220" y="380" text-anchor="middle" class="sans" font-size="8" fill="#D1C4E9">Docs engine</text>
+  </g>
+
+  <!-- ═══════ SATELLITE: pay2 (left) ═══════ -->
+  <g filter="url(#shadowEco)">
+    <circle cx="170" cy="250" r="38" fill="url(#payGrad)"/>
+    <text x="170" y="245" text-anchor="middle" class="sans" font-weight="700" font-size="12" fill="#fff">pay2</text>
+    <text x="170" y="260" text-anchor="middle" class="sans" font-size="8" fill="#B2DFDB">Fiat + Crypto</text>
+  </g>
+
+  <!-- Bottom legend strip -->
+  <rect x="0" y="455" width="780" height="25" fill="#0a0a12"/>
+  <text x="390" y="471" text-anchor="middle" class="sans" font-size="10" fill="#585870">
+    npm install @wbc-ui/core2  ·  Vue.use(wbcCore)  ·  Extensions auto-register into the engine
+  </text>
+</svg>

package/dist/build-info.json

@@ -1,8 +1,8 @@
 {
   "package": "@wbc-ui/core2",
-  "version": "1.0.0-r15",
+  "version": "1.0.0-r16",
   "tier": "free",
-  "builtAt": "2026-05-31T21:47:58.583Z",
+  "builtAt": "2026-06-01T19:16:25.830Z",
   "commit": null,
   "node": "v24.15.0"
 }

package/dist/core2.es.js

@@ -532,13 +532,6 @@ function Hc(e, t, r, n, i, { insideHeadersVN: u, insideFootersVN: a, extChildren
     {
       ref: "rawHtml",
       class: "markdown-body " + (n == null ? void 0 : n.class) || "",
-      directives: [
-        {
-          name: "highlight",
-          value: void 0,
-          modifiers: {}
-        }
-      ],
       ...n,
       on: e.itemListeners,
       key: `main-key-${e.computedKey}`
@@ -11964,14 +11957,7 @@ const Qd = {
                 if (typeof H == "string" && (H != null && H.startsWith("./")) ? z = "WBC" : z == "MD" && typeof H == "string" && (H = this.MarkdownIt.render(H)), this.isNonEmpty(Q) ? ie = t("WBLink", {
                   ...z == "MD" ? {
                     ...F,
-                    class: "markdown-body " + ((F == null ? void 0 : F.class) || ""),
-                    directives: [
-                      {
-                        name: "highlight",
-                        value: void 0,
-                        modifiers: {}
-                      }
-                    ]
+                    class: "markdown-body " + ((F == null ? void 0 : F.class) || "")
                   } : F,
                   props: {
                     to: this.strToObj(y[2]),
@@ -12074,14 +12060,7 @@ const Qd = {
                       {
                         ...z == "MD" ? {
                           ...F,
-                          class: "markdown-body " + ((F == null ? void 0 : F.class) || ""),
-                          directives: [
-                            {
-                              name: "highlight",
-                              value: void 0,
-                              modifiers: {}
-                            }
-                          ]
+                          class: "markdown-body " + ((F == null ? void 0 : F.class) || "")
                         } : {},
                         ...B
                       },
@@ -12151,7 +12130,7 @@ const Qd = {
   },
   created() {
     typeof this.html_ == "string" && (this.html_ = this.html_.replace(
-      /<!--\s*(\[\[~?\{\s*comp:\s*['"]meta['"][\s\S]*?\}\]\])\s*-->/g,
+      /<!--\s*(\[\[[\s\S]*?\]\])\s*-->/g,
       "$1"
     )), this.html_ = this.protectCodeRegions(this.html_), this.html_ = this.charCoding(this.html_, [
       ["<p>", "<p>[["],
@@ -12180,7 +12159,7 @@ var r1 = /* @__PURE__ */ ao(
   t1,
   !1,
   null,
-  "f790a94c"
+  "15a0d0d3"
 );
 const ju = r1.exports, qr = In.default || In, Bo = Xi.default || Xi;
 qr.prototype.hasOwnProperty("$store") || qr.use(Bo);