/wbToWBC — Live Demo ()
This is what /wbToWBC actually does on wb-labs as the workspace stands today (2026-05-05). The matrix below mirrors the exhaustive simulation, but every cell is filled from the live state of the repo.
1. Live target
| Field | Live value |
|---|---|
| Target package | core2/packages/wb-dataviewer |
| WBC core library | @wbc-ui2/wb-core — provides hooks, design tokens, tier enforcement |
| Legacy code | src/legacy/ — 6 files, partially migrated |
| Design tokens | var(--wbc-*) system in wb-core, 42 token definitions |
| Known blockers | Canvas API in customCanvas.js, native WebSocket in socketHandler.js |
2. What each argument resolves to today
| Argument | Live resolution |
|---|---|
/wbToWBC packages/wb-dataviewer/src/legacy/ -d | Dry-run: shows diff for 6 files, 4 fully migratable. |
/wbToWBC packages/wb-dataviewer/src/**/*.css -c | CSS-only: ~24 color/spacing replacements across 8 stylesheets. |
/wbToWBC packages/wb-dataviewer/src/legacy/ -s | Strict: would halt on Canvas API and WebSocket patterns. |
/wbToWBC packages/wb-dataviewer/src/legacy/GenericDashboard.vue -h -c | Full migration of one component. |
3. Pipelines on this exact workspace
/wbToWBC Live Execution Simulator
Migrate the dashboard component
/wbToWBC core2/packages/wb-dataviewer/src/legacy/GenericDashboard.vue -h -c> /wbToWBC core2/packages/wb-dataviewer/src/legacy/GenericDashboard.vue -h -c[SYSTEM] Full migration: hooks + CSS.
[AST] 1 Vue component, 3 composables, 8 CSS rules.
[CSS] 8 translations:
#4CAF50 → var(--wbc-success)
#F44336 → var(--wbc-error)
24px → var(--wbc-spacing-lg)
...
[HOOKS]
- import { ref, computed, onMounted } from 'vue'
+ import { useWbcState, useWbcComputed, useWbcLifecycle } from '@wbc-ui2/wb-core'
const items = ref([]) → const items = useWbcState([])
const total = computed(() => ...) → const total = useWbcComputed(() => ...)
onMounted(fetchData) → useWbcLifecycle('mount', fetchData)
[OK] GenericDashboard.vue migrated. Business logic unchanged.
💠 Pipeline Migrate the dashboard component
💠 Pipeline CSS token sweep across wb-dataviewer
💠 Pipeline Strict audit reveals migration blockers
4. What would refuse today
| Trigger | Live response |
|---|---|
/wbToWBC src/WBC.js | ℹ️ WBC.js is already wb-core's own code. Nothing to migrate. |
/wbToWBC src/legacy/customCanvas.js -s | ❌ Strict: Canvas API has no WBC equivalent. Manual migration required. |
/wbToWBC src/**/*.min.css -c | ⚠️ Cannot parse minified CSS. Run a formatter first. |
/wbToWBC node_modules/**/*.js | ❌ Cannot migrate third-party code. Migrate your source, not your dependencies. |
The pattern: /wbToWBC migrates the framework layer to WBC conventions while guaranteeing behavior preservation. It's the bridge from generic to proprietary — CSS tokens, ecosystem hooks, WBC imports — without touching the business logic that makes the component work.