Sumber kebenaran progress per komponen. Update file ini setiap komponen berubah status. Untuk kenapa dan arsitektur, baca ADR. Untuk bagaimana spec engine, baca
engine/docs/features/*.md.
Last updated: 2026-06-30 (Block Catalog candidate matrix 0.1 accepted as ADR-017/018 baseline. 44 candidates mapped against existing packages/ui and packages/ui-flutter. Status: 8 schema-preset-only, 21 existing-component-needs-binding, 10 component-gap, 2 contract-gap, 1 adapter-gap, 1 duplicate-alias, 1 excluded. 5 foundational work items required before any Ready entry. ADR-017 and ADR-018 promoted to Accepted after final read-through and minor review edits. Grill decisions captured for Flutter parity, web Markdown, export/registry gaps, ADR-014 boundary, and provider adapters.)
The Block Catalog is a metadata layer that classifies reusable page blocks by capability category, usage channel, and behavioral capabilities. It is matrix-first: sprints/package-ui-elementor/block-catalog-candidate-matrix.json version 0.1 is the accepted baseline for ADR-017/018, and sprints/package-ui-elementor/block-catalog-parity-matrix.md is the readable report. ADR-017 and ADR-018 are Accepted and define the catalog architecture plus data/action/reactivity contract.
Candidate counts by status (2026-06-30):
| Status | Count |
|---|---|
schema-preset-only |
8 |
existing-component-needs-binding |
21 |
component-gap |
10 |
contract-gap |
2 |
adapter-gap |
1 |
duplicate-alias |
1 |
excluded |
1 |
| Total | 44 |
Required foundational work before any Ready entry:
foundation.block-catalog-types— BlockCatalogEntry/Ready/Candidate types in@bitcode/ui-schema.foundation.action-source— ActionSource, ActionAdapter, ActionResult, ActionError, ActionEffect, ActionRunner.foundation.portable-expression-ast— Portable expression types + built-in function registry.foundation.block-renderer—BcBlockRendererthin layer overBcRendererwith schema/component strategies.foundation.validation-tooling— build-time and runtime validators enforcing no-stub, web+Flutter availability, and gate contracts.
Top-level capability categories (8): content, data, interaction, commerce, workflow, builder, analytics, navigation. account is a subcategory/tag.
Reclassification rule from review session: blocks with action-trigger semantics must not be marked schema-preset-only; they belong in existing-component-needs-binding until ActionSource/ActionRunner are available. After this rule was applied, content.cta, content.pricing-table, and commerce.product-detail were reclassified.
Flutter parity decision: BcAvatar, BcBadge, BcProgress, and BcKpi are referenced in candidate mappings but their Flutter counterparts are not currently in the Flutter component file list. The resolved direction is to add canonical Flutter widgets with source, tests, and barrel exports before Ready, not to remap them to generic primitives just to pass parity.
Export/registry gaps blocking Ready validation: BcShare and BcGridView source files exist but are not exported from packages/ui/src/index.ts. Treat these as export/registry bugs, not component-gaps. Matrix rows that depend on these (content.social-links, data.record-list, commerce.product-grid) must remain non-Ready until the public exports are fixed.
Workflow Diagram is split:
workflow.diagram-viewer(schema-preset-only): static process graph usingBcChartGraph/BcSteps.workflow.diagram-editor(component-gap): dedicated authoring component with drag, edges, properties, persistence, undo/redo.
Web Markdown decision: content.rich-text keeps BcMarkdown as a canonical mapping. Web must add BcMarkdown source, tests, and public export before markdown-backed rich text can be Ready.
ADR-014 boundary decision: Block Catalog owns catalog entries, presets, Ready gates, and generic data/action contracts. Endpoint, model, permission, realtime, persistence, and engine feature wiring for chatter/activity/export/wizard/pivot/notification/builders remain ADR-014 scope.
Provider adapter decision: Core Ready Catalog ships generic adapter contracts and mock/local adapters for tests only. Provider SDKs and commercial-vendor integrations stay in plugin packages.
Commerce blocks reuse generic record list/detail: commerce.product-grid and commerce.product-detail are documented as Ready Catalog entries that reuse data.record-list/data.record-detail with commerce schema variants, plus add-to-cart ActionSource.
v1.0.0-rc1 candidate — all Phase A-C acceptance criteria met, 0 test failures:
| Phase | Status | Evidence |
|---|---|---|
| A1 Runtime Test Foundation | ✅ Complete | Runtime tests across all components. All 24 bugs (BC-001 s/d BC-024) fixed. |
| A2 Stencil Parity Audit | ✅ Complete | docs/stencil-parity-matrix.md (7345 lines, 127 Stencil → 176 Mitosis, 81.1% coverage, 1771 gaps documented). |
| A3 Demo App Browser Verification | ✅ Complete | 11 Playwright E2E tests pass (BC-017, BC-024, BC-002, Phase B1 reactivity). Demo app runs in Chromium. |
| A4 4-Layer Data Source Uniformity | ✅ Complete | local/fetcher/url/model with consistent error/retry/abort semantics. 25 new data-source tests. 5 consuming components updated. |
| B1 Reactivity E2E | ✅ Complete | 5 end-to-end reactive scenario tests pass (cascade, conditional visibility, validation effects, onChange firing, cleanup no-leak). |
| B2 A11y Runtime Verification | ✅ Complete | 151 component a11y runtime tests generated (Phase B2 C1 enforcement). All 20 bugs (BC-025 s/d BC-044) fixed: 7 P0 render crashes + 13 P1 a11y violations. BC-045 wontfix (jsdom iframe limitation). |
| B3 Edge Case Hardening | ✅ Complete | All 45 bug log entries (BC-001 s/d BC-045) resolved: 44 fixed, 1 wontfix. 0 test failures across all suites. |
| C1 ADR Promotion | ✅ Complete | ADR-001, ADR-003, ADR-004 promoted to Accepted. 8/10 ADRs now Accepted. |
| C2 Parity Matrix Gate | ✅ Complete | Stencil + antd/Prime matrices frozen as formal gates. |
| C3 DoD Sign-Off | ✅ Complete | docs/components-progress.md updated with Phase C verification status. |
| D1 Contract Audit (Blocking) | ✅ Complete | scripts/contract-audit.mjs rewritten with Props-interface-aware parsing. 0 violations in blocking mode (down from 44 warnings). Fixed 3 genuine handler signature violations (BcHoverCard onOpenChange, BcDataTable onSelectionChange/onExpandedChange). |
| D2 Per-Component Docs | ✅ Complete | scripts/generate-component-docs.mjs parses each .lite.tsx + .contract.ts to produce structured markdown. 153 generated + 24 hand-curated P0 preserved = 177 component docs in docs/api/ with categorized sitemap. |
| D3 Framework Integration Guides | ✅ Complete | 4 guides in docs/guides/ (React, Vue, React Native, Stencil) with adapter-mapping appendices mapping each ADR-007 contract concept to framework idioms. |
Test totals (2026-06-22): 1558 source + 797 runtime (13 skipped — jsdom iframe/canvas limitations) + 11 E2E = 2366 tests, 0 failures.
Contract audit: 0 violations in blocking mode (npm run audit:contract).
Documentation: 177 per-component API docs (docs/api/) + 4 framework integration guides (docs/guides/) + categorized sitemap.
Build: 179 components × 4 targets (React, Vue, React Native, Stencil), 0 reformat failures, 202 .ts files synced per target via sync-regular-ts.mjs.
Tag: packages/ui@v1.0.0-rc1 ready for tagging (0 test failures, all BC bugs resolved).
ADR-006 Universal Component Strategy mengubah model tier komponen:
- 2 tier baru: Pure (1 source Mitosis) vs Adapt (web + native impl, kontrak sama).
- Semua komponen wajib jalan di 4 target: Stencil (legacy frozen), React, Vue, React Native.
- Tidak ada lagi "Tier 3 platform-only" — semua komponen wajib universal di caller side.
- Phase 0 spike wajib selesai sebelum P0 ekspansi (lihat section "Phase 0" di bawah).
Lihat ADR-006 untuk detail lengkap.
ADR-008 Contract-First API Freeze menahan ekspansi fitur packages/ui sampai Core Integration Surface lolos gate kontrak baru. Status Contract ✅, A11y ✅, dan Done ✅ di tabel lama adalah progress historis berdasarkan ADR-002/006, bukan klaim final enterprise-ready menurut ADR-008.
Execution checklist: components-contract-matrix.md.
Core Integration Surface yang wajib diaudit dulu:
- Form controls:
BcInput,BcSelect,BcCombobox,BcCheckbox,BcToggle,BcSegmented,BcNumberField,BcDateField,BcTimeField,BcMultiSelect. - Forms/reactive:
BcForm,BcReactiveScope,ReactiveStore, field wrappers. - Overlays:
BcDialog,BcAlertDialog,BcDrawer,BcPopover,BcTooltip,BcDropdown,BcContextMenu,BcCommand. - Navigation/layout behavior:
BcTabs,BcAccordion,BcDisclosure,BcSplitter. - Data:
BcDataTable,BcList, collection selection contracts. - Metadata/infrastructure:
BcRenderer,FieldResolver,UiSchema,AppProvider, config/context, tokens/theme, portal/focus utilities, Web Component event bridge.
| Gate | Status | Notes |
|---|---|---|
| Contract Matrix | ✅ | All Core Integration Surface components have ADR-008 contracts in components-contract-matrix.md. |
| Semantic Events | ✅ | BcChangeMeta/BcChangeHandler in core/types. All P0 components emit semantic events (onValueChange, onCheckedChange, onOpenChange, onAction, etc.) with reason + source. Legacy onChange kept as compatibility alias. |
| Controlled State | ✅ | All stateful P0 components support value/defaultValue, open/defaultOpen, checked/defaultChecked, or model equivalents. |
| Slots / Parts | ✅ | 25 Core Integration Surface source components wired across all surfaces. All components with source implementations now have Runtime Part Resolution. Remaining infrastructure items (BcReactiveScope, Field wrappers, Collection contracts, FieldResolver, UiSchema, Config/context, Tokens/theme) now have formal ADR-008 contracts with Parts/Methods/A11y/AdapterMapping defined. |
| Imperative Methods | ✅ | Methods typed per contract (focus/blur/validate/reset/submit/open/close/scrollToIndex/exportCsv). |
| A11y Behavior Contract | ✅ | All P0 interactive components define role, ARIA, keyboard, mobile equivalent in contract files. |
| Adapter Mapping | ✅ | All P0 contracts include React/Vue/RN/Stencil/Tauri/Flutter adapter mapping interfaces. |
| Compatibility Tests | ✅ | 2389 tests pass (1575 source + 797 runtime + 17 touch/mobile) including ADR-008 contract surface, semantic event, a11y wiring, ADR-007 migration tests, WC event bridge, Runtime Part Resolution helper tests, Data/View wiring tests, Overlay/Navigation/Layout rollout tests, formal contract freeze tests, Phase A4 data-source uniformity tests, Phase B1 reactivity E2E scenarios, Phase A3 Playwright browser verification, contract-audit blocking mode (0 violations), touch target audit (0 violations across 9 native files), gesture/haptics contract tests, and mobile overlay verification. |
Phase 5b.2 status: ✅ Complete for the targeted P1 Flutter batch.
| Widget | Group | Flutter implementation | Test coverage | Status |
|---|---|---|---|---|
| BcDisclosure | data-display | packages/ui-flutter/lib/src/components/bc_disclosure.dart |
packages/ui-flutter/test/bc_disclosure_test.dart |
✅ Complete |
| BcPortal | primitives | packages/ui-flutter/lib/src/components/bc_portal.dart |
packages/ui-flutter/test/bc_portal_test.dart |
✅ Complete |
| BcFieldDuration | forms | packages/ui-flutter/lib/src/components/bc_field_duration.dart |
packages/ui-flutter/test/bc_field_duration_test.dart |
✅ Complete |
| BcFieldTableSelect | forms | packages/ui-flutter/lib/src/components/bc_field_table_select.dart |
packages/ui-flutter/test/bc_field_table_select_test.dart |
✅ Complete |
| BcFieldMorph | forms | packages/ui-flutter/lib/src/components/bc_field_morph.dart |
packages/ui-flutter/test/bc_field_morph_test.dart |
✅ Complete |
| BcFieldDynLink | forms | packages/ui-flutter/lib/src/components/bc_field_dyn_link.dart |
packages/ui-flutter/test/bc_field_dyn_link_test.dart |
✅ Complete |
| BcLookupModal | datatable | packages/ui-flutter/lib/src/components/bc_lookup_modal.dart |
packages/ui-flutter/test/bc_lookup_modal_test.dart |
✅ Complete |
| BcViewGantt | views | packages/ui-flutter/lib/src/components/bc_view_gantt.dart |
packages/ui-flutter/test/bc_view_gantt_test.dart |
✅ Complete |
| BcNotification | feedback | packages/ui-flutter/lib/src/components/bc_notification.dart |
packages/ui-flutter/test/bc_notification_test.dart |
✅ Complete |
| BcTour | feedback | packages/ui-flutter/lib/src/components/bc_tour.dart |
packages/ui-flutter/test/bc_tour_test.dart |
✅ Complete |
| BcInplace | data-display | packages/ui-flutter/lib/src/components/bc_inplace.dart |
packages/ui-flutter/test/bc_inplace_test.dart |
✅ Complete |
| BcMeterGroup | feedback | packages/ui-flutter/lib/src/components/bc_meter_group.dart |
packages/ui-flutter/test/bc_meter_group_test.dart |
✅ Complete |
| BcAspectRatio | primitives | packages/ui-flutter/lib/src/components/bc_aspect_ratio.dart |
packages/ui-flutter/test/bc_aspect_ratio_test.dart |
✅ Complete |
| BcFlex | layout | packages/ui-flutter/lib/src/components/bc_flex.dart |
packages/ui-flutter/test/bc_flex_test.dart |
✅ Complete |
Gate evidence: 738 Flutter tests pass, flutter analyze returns 0 errors/warnings (info hints only, 4 pre-existing deprecation hints in bc_disclosure_test.dart from another worker's file), build_runner succeeds, and the mission validation gate reports 252/252 assertions passed.
Phase 5c status: ✅ Complete — full Mitosis↔Flutter parity achieved.
Summary: All remaining ~78 hand-written Flutter widgets completed across 7 milestones (M1 primitives/layout through M7 gate/misc). 130 total widget files covering all 11 component groups. 1158 tests pass (119 test files). 297/297 validation assertions passed. BcChangeReason enum covers all 18 lifecycle values. 132 barrel exports verified.
Milestone breakdown:
| Milestone | Widgets | Tests | Assertions | Key widgets |
|---|---|---|---|---|
| M1: Primitives + Layout | 18 | 86 | 65 | BcStack, BcBox, BcFlex, BcSplitter, BcSidebar, BcCenter, BcSquare, BcCircle, BcSlot, BcPortal, BcVisuallyHidden, BcBackdrop, BcLoadingOverlay |
| M2: Forms + Overlays | 22 | 112 | 45 | BcInput, BcSelect, BcCheckbox, BcToggle, BcDialog, BcDrawer, BcPopover, BcTooltip, BcDropdown, BcCombobox, BcMultiSelect, BcNumberField, BcDateField, BcTimeField |
| M3: Navigation + Data Display | 20 | 44 | 44 | BcTabs, BcAccordion, BcBreadcrumb, BcPagination, BcMenubar, BcMegaMenu, BcSearch, BcFavorites, BcDescriptions, BcStatistic, BcCarousel, BcOrgChart |
| M4: Views + Charts | 15 | 98 | 38 | BcForm, BcList, BcDataTable, BcKanbanBoard, BcChart, BcSparkline, BcViewGantt, BcViewMap, BcViewReport, BcViewEditor |
| M5: Feedback + Media | 18 | 108 | 38 | BcNotification, BcTour, BcEmpty, BcResult, BcToastQueue, BcViewerPdf, BcViewerImage, BcViewerVideo, BcViewerAudio, BcGalleria |
| M6: Social + Print + Misc | 12 | 88 | 35 | BcChatter, BcActivity, BcTimelineSocial, BcExport, BcPrint, BcReportLink, BcCommand, BcMarkdown, BcQRCode, BcWatermark, BcSpeedDial, BcKbd |
| M7: Gate + Misc | 19 | 68 | 32 | BcColorArea, BcColorWheel, BcColorSlider, BcColorSwatch, BcColorPicker, BcRangeSlider, BcDropZone, BcSignature, BcBarcode, BcGeo, BcCode, BcJson, BcRichText, BcTagsInput |
Quality gates passed:
flutter test: 1158 tests pass across 119 test filesflutter analyze: 0 errors, 0 warnings (4 pre-existing info hints)build_runner: succeeds (freezed + json_serializable codegen)- Validation: 297/297 assertions passed across all 7 milestones
- Barrel exports: 132 verified across all widget groups
- BcChangeReason exhaustiveness: 18/18 values
- Fixed
onReorder→onReorderItemdeprecation in BcViewEditor for Flutter 3.44.1
Infrastructure (Phase 5a foundation, still in use):
- Pure-Dart reactive engine (
core/reactive_store.dart) - Material Design 3 token bridge (
theme/bc_theme.dart) - UiSchema types + FieldResolver (
schema/) - 17 infrastructure files total
| Bucket | Total Target | Stencil ✅ | Mitosis ✅ | Contract ✅ | A11y ✅ | Done (semua) |
|---|---|---|---|---|---|---|
| Phase 0 (Spike & Cleanup) | 6 tasks | – | – | – | – | 0 |
| P0 (ERP-Critical) | 22 | 13 | 22 | 22 | 22 | 22 |
| P1 (High Value) | 58 | 40 | 58 | 58 | 58 | 58 |
| P2 (Polish) | 29 | 14 | 29 | 29 | 29 | 29 |
| Total komponen visual | 109 | 67 | 109 | 109 | 109 | 109 |
| Charts unified rebuild | 1 | – | 1 | 1 | 1 | 1 |
Status: 110 / 110 component-tier complete. All ~110 enterprise components
production-ready, including unified BcChart that collapses 26 Stencil chart
variants into a single component driven by type prop.
Test totals: 1508 source-level tests, 0 failures. Build: 151/151 components across react/vue/reactNative/stencil; 149 exported via barrel.
* 127 Stencil = 128 folder, beberapa overlap target / akan disatukan saat porting. Stencil frozen post-ADR-006 (tidak dapat fitur baru).
- Tier (Pure/Adapt) = klasifikasi implementasi per ADR-006 Section 2 (Pure = 1 source
.lite.tsx, Adapt =.web.tsx+.native.tsxmanual) - Stencil = ada di
packages/components/src/components/(legacy, frozen post-ADR-006) - Mitosis = ada di
packages/ui/src/components/sebagai.lite.tsx(Pure) atau.web.tsx+.native.tsx(Adapt) - Contract =
BcXxx.contract.tsada + sesuai Section 4 ADR-002 (Field/DataView/Overlay) + ADR-006 Section 5. Untuk Core Integration Surface, ini belum cukup sampai ADR-008 Contract Matrix selesai. - A11y = aria roles + keyboard nav (web) + screen reader test (web+mobile) + touch target ≥44px. Untuk Core Integration Surface, ini belum cukup sampai ADR-008 A11y Behavior Contract selesai.
- Done = semua kolom ✅ + 4-target build pass + token-based + smoke test pass per ADR-006 Section 5 DoD. Untuk Core Integration Surface,
Donehistoris harus diaudit ulang lewat ADR-008 gate sebelum disebut enterprise-ready final. –= tidak applicable?= belum diaudit
- Komponen baru selesai → ubah baris di tabel + update Ringkasan.
- Jangan tandai Done sebelum semua sub-cell ✅ sesuai ADR-006 Section 5 DoD.
- Status Mitosis = "ada filenya" (
.lite.tsxuntuk Pure,.web.tsx+.native.tsxuntuk Adapt). - Status Contract/A11y = "sudah diverifikasi sesuai ADR-002 + ADR-006".
- Kalau komponen di-rename / di-merge → tambah catatan di kolom Notes, jangan hapus baris.
Wajib selesai sebelum ekspansi ke P0 (per ADR-006 Section 6).
| # | Task | Status | Notes |
|---|---|---|---|
| 1 | Drop Lynx artifacts (output/lynx/, scripts/lynx-*.mjs, demos/lynx-app/) |
✅ | Artifacts already removed; ADR-001 §15 marked superseded by ADR-006 (2026-06-14) |
| 2 | Auto-generate token pipeline (scripts/generate-tokens.mjs) |
✅ | tokens:generate + tokens:check (CI guard); emits tailwind.preset.cjs, tailwind.theme.css, nativewind.preset.cjs, tokens.ts from theme.css. NativeWind preset now exposes 25 color keys (incl info) + dark palette via __rawPalette.dark. |
| 3 | Tambah RN target ke Mitosis (mitosis.config.js + package.json exports) |
✅ | targets:[stencil,react,vue,reactNative], stylesType:'native-wind'. Mitosis 0.13.1 NATIVE_WIND_STYLES_PLUGIN had [object Object] bug for dynamic class bindings — fixed via patch-package (patches/@builder.io+mitosis+0.13.1.patch). Verified: 65/65 RN outputs emit proper static className="..." or dynamic className={\tpl`}. Package exports ./native+react-native/nativewind` peerDeps added. |
| 4 | Build resolver setup (Vite .web.tsx + Metro .native.tsx) |
✅ | Vite extensions:['.web.tsx',...] configured. demos/rn-app/scripts/resolver-check.mjs replays both bundlers' algorithms — 3/3 PASS. |
| 5 | PoC Pure component (BcStack atau BcBadge) jalan di 4 target | ✅ | BcStack authored. Mitosis emits 66/66 components × 4 targets. Contract tests 16/16 PASS (react/vue/reactNative/stencil). RN output uses <View className={...}>, no [object Object] regression. |
| 6 | PoC Adapt component (BcPopover atau BcDrawer) di-resolve correctly | ✅ | src/components/adapt-poc/popover/ with shared BcPopover.contract.ts, web (<span> + absolute positioning), native (Modal bottom sheet). Resolver smoke 3/3 PASS. Contract tests 8/8 PASS. |
Acceptance gate Phase 0: Semua 6 task done + ADR-006 di-update dengan temuan konkret (replace "estimasi" jadi "verified") + ADR-006 di-promote dari "Proposed pending spike" jadi "Accepted".
Setelah Phase 0 done, urutan build P0:
- BcSlot + BcPortal + BcVisuallyHidden (P0 fondasi a11y, Pure) — dipakai semua overlay.
- BcStack family (Stack/XStack/YStack/Box) (P0 fondasi layout, Pure) — dipakai banyak komponen lain.
- BcBackdrop + BcLoadingOverlay + BcToastQueue (P0 fondasi feedback, mostly Pure).
- BcForm + BcList (P0 view inti, Pure with adapt sub-component) — jantung low-code ERP.
- BcDataTable upgrade (P0, ADR-003 Section 4, Adapt — web grid vs MobileList) — gold standard grid.
Setelah 5 ini selesai, baru lanjut P0 standalone (Steps, Accordion, Drawer, ContextMenu, dll — campuran Pure/Adapt).
Kolom Tier = klasifikasi ADR-006 Section 2 (P=Pure, A=Adapt). Estimasi awal — boleh berubah saat implementasi kalau ternyata Pure tidak feasible.
| # | Component | Group | Tier | Stencil | Mitosis | Contract | A11y | Done | Notes |
|---|---|---|---|---|---|---|---|---|---|
| 1 | BcForm | views | P+A* | ✅ bc-view-form |
✅ views/form |
✅ | Reactive engine ADR-004 Level 1 opt-in via reactions prop. Validation: required + min/max + email + pattern (silent invalid-pattern fallback). Render gates on meta.visible/disabled/required. 14 source-level tests pass. |
||
| 2 | BcList | views | P | ✅ bc-view-list |
✅ views/list |
✅ | ✅ | 4-layer DataSource integration with idle/loading/error/empty/ready states. Custom renderItem slot. Pagination with disabled boundary + a11y labels. 14 source-level tests pass. | |
| 3 | BcDataTable | views | A | ✅ bc-datatable |
✅ data/datatable |
✅ | ✅ | ✅ | Enterprise A1+A2+A3+A4 fully render-integrated: multi-sort+filter+search+a11y; selection+column ops; tree-flatten+group+aggregate+virtualize (chevron+indent, group header/body/footer, virtualized scroll container with absolute-index reindexing); inline edit (cell-mode dblclick → input with Enter/Escape, row-mode Edit/Save/Cancel action column with totalColumnCount accounting); CSV export; state persistence; visual context menu overlay with default Copy row action. 10 pure engines: engine/{sort,filter,columns,selection,tree,group,virtualize,edit,export,persistence}.ts. All 16 ADR-003 §4 must-haves have engine + state + render integration. 193 tests pass (109 engine + 84 source-level + contract). |
| 4 | BcDescriptions | data-display | P | ❌ | ✅ data-display/descriptions |
✅ | grid layout, span per item, em-dash placeholder; source-level tests pass | ||
| 5 | BcSteps / BcStepper | navigation | P | ❌ | ✅ navigation/steps |
✅ | ✅ | aria-current=step on active marker, clickable gate, token-driven colors | |
| 6 | BcAccordion / BcCollapse | layout | P | ❌ | ✅ layout/accordion |
✅ | ✅ | aria-expanded reflects open, single/multi-expand, chevron rotates with transition | |
| 7 | BcContextMenu | overlays | A | ❌ | ✅ overlays/contextmenu |
✅ | ✅ | ✅ | Adapt split landed: web mitosis (right-click anchored menu) + BcContextMenu.native.tsx (300ms long-press → bottom action sheet via Modal+Pressable). role=menu/menuitem, backdrop dismiss, separators+danger token. |
| 8 | BcSplitter | layout | A | ❌ | ✅ layout/splitter |
✅ | ✅ | Currently Pure shape; Adapt split (mobile stacked-collapse) deferred. PointerEvents drag + ArrowKey nudge, aria-label on handle, token-driven palette. 11 tests pass. | |
| 9 | BcDrawer | overlays | A | ❌ | ✅ overlays/drawer |
✅ | ✅ | ✅ | Adapt split landed: web mitosis (4 placements side panel) + BcDrawer.native.tsx (idiomatic bottom sheet regardless of placement, optional close button, backdrop honors closeOnOverlay). |
| 10 | BcTransfer | forms | P | ❌ | ✅ forms/transfer |
✅ | ✅ | Dual-list, aria-labeled move buttons, disabled gates triple-checked, token surface | |
| 11 | BcCascader | forms | A | ❌ | ✅ forms/cascader |
✅ | ✅ | ✅ | Adapt split landed: web mitosis (anchored side-by-side columns popover) + BcCascader.native.tsx (full-screen sheet stepping one column at a time with ‹ Back button). onChange fires only on leaf, popover tokens, FieldChangeEvent. |
| 12 | BcTreeSelect | forms | A | ❌ | ✅ forms/treeselect |
✅ | ✅ | ✅ | Adapt split landed: web mitosis (anchored dropdown with flattened tree) + BcTreeSelect.native.tsx (bottom sheet wrapping a flattened ScrollView with same expand/collapse + indent semantics). FieldChangeEvent fires for any node (leaf or branch). |
| 13 | BcStatistic | data-display | P | ❌ | ✅ data-display/statistic |
✅ | trend coloring via semantic tokens, tabular-nums, decorative arrows aria-hidden | ||
| 14 | BcEmpty | feedback | P | ❌ | ✅ feedback/empty |
✅ | ✅ | default SVG illustration + icon override, decorative visuals aria-hidden, action | |
| 15 | BcResult | feedback | P | ❌ | ✅ feedback/result |
✅ | ✅ | 7 status variants (success/error/warning/info/404/403/500), semantic token colors, action | |
| 16 | BcOtp / BcPin | forms | P | ❌ | ✅ forms/otp |
✅ | ✅ | semantic fieldset/legend, per-box aria-label, inputmode=numeric, numeric guard, FieldChangeEvent + onComplete | |
| 17 | BcSlot | primitives | P | ❌ | ✅ primitives/slot |
✅ | – | Composition primitive; display:contents wrapper, source-level tests pass |
|
| 18 | BcPortal | primitives | A | ❌ | ✅ primitives/portal |
✅ | – | Adapt: web createPortal (SSR-safe + Esc → onRequestClose), native Modal; 11/11 contract tests pass |
|
| 19 | BcVisuallyHidden | primitives | P | ❌ | ✅ primitives/visually-hidden |
✅ | ✅ | sr-only utility, focus-restore variant, no aria-hidden (kept in a11y tree) |
|
| 20 | BcStack family (Stack/XStack/YStack/Box) | primitives | P | ❌ | ✅ all four | ✅ all four | – | BcStack (Phase 0) + new BcXStack/BcYStack/BcBox primitives. Each enforces fixed direction (XStack=row, YStack=col) or layout-participating box. 27 tests pass across the family. | |
| 21 | BcBackdrop / BcLoadingOverlay | feedback | P | ❌ | ✅ feedback/{backdrop,loading-overlay} |
✅ | ✅ | Backdrop: dim layer + dismissable + reduced-motion; LoadingOverlay: aria-busy + role=status + sr-only label | |
| 22 | BcToastQueue (Sonner-style) | overlays | P | ❌ | ✅ overlays/toast-queue |
✅ | ✅ | Stacked toast host + BcToastQueueController headless helper (push/dismiss/clear, severity sugar, dedupe by id, maxRetained drop). role=region + aria-live=polite, pointer-events-none container, motion-reduce respect. 21 tests pass (12 source + 9 controller). |
P0 Tier breakdown (estimasi): 14 Pure + 7 Adapt + 1 Hybrid (BcForm).
P0 status: 13/22 ada di Stencil (legacy frozen), 19/22 ada di Mitosis (skeleton + 5 fondasi baru), 5/22 contract+a11y verified, 0/22 verified Done (DoD §5 butuh Mitosis build smoke + e2e). Fondasi 5/6 (#17–#19, #21) selesai source+contract+test. Sisa fondasi: BcStack family ekstension (#20) + BcToastQueue (#22).
Update 2026-06-14 — Fase C batch 1. Five missing P0 primitives landed source-side: BcSlot, BcPortal (Adapt), BcVisuallyHidden, BcBackdrop, BcLoadingOverlay. 38 new source-level contract tests pass (no Mitosis-build dependency). Each follows the BcStack/BcPopover convention:
BcXxx.contract.ts+BcXxx.lite.tsx(Pure) orBcXxx.{web,native}.tsx+index.ts(Adapt) +BcXxx.test.ts. Tokens drift check passes.
Update 2026-06-14 — Fase C batch 2. Six existing P0 skeletons gained
BcXxx.contract.ts+ source-levelBcXxx.test.tswithout source rewrites: BcDescriptions (#4), BcSteps (#5), BcAccordion (#6), BcStatistic (#13), BcEmpty (#14), BcResult (#15). +46 source-level tests pass — verifying token-only colors, aria attributes, semantic state markers, and contract surface. Total cumulative: 136 pass / 11 fail (the 11 failing tests remain the pre-existing BcStack output-level checks awaitingnpm run build).
Update 2026-06-14 — Fase C batch 3. Six more P0 skeletons gained contract+tests: BcDrawer (#9, source fix
bg-black/50→bg-foreground/50for token compliance), BcTransfer (#10), BcCascader (#11), BcTreSelect (#12), BcOtp (#16), BcContextMenu (#7). +57 source-level tests pass. Adapt-marked components (BcContextMenu, BcDrawer, BcCascader, BcTreSelect) currently live as Pure.lite.tsx; the Adapt split (web/native) is deferred untilBcPortalis wired and per-component native UX is designed. Total cumulative: 193 pass / 11 fail.
Update 2026-06-14 — Fase C batch khusus (BcForm + BcList). The two view "jantung low-code" components gained contracts+tests. BcForm (#1): BcFormContract pulls Reaction from core/reactive — Level 0 controlled validation + Level 1 reactive engine wiring both verified at source level (14 tests). Render gates on meta.visible/disabled/required composability. BcList (#2): BcListContract pulls DataSource from core/types — 4-layer source/data fallback, full lifecycle status union (idle/loading/error/empty/ready), pagination clamping, custom renderItem slot (14 tests). Total cumulative: 220 pass / 11 fail. 15/22 P0 components now have contract + source-level tests; 6 partial Adapt-target conversions deferred + BcDataTable enterprise upgrade + BcSplitter & BcStack-family + BcToastQueue remain.
Update 2026-06-14 — Fase C subset 1 (BcSplitter + Stack family + BcToastQueue). Closes the remaining P0 skeleton + family backlog. BcSplitter (#8): contract + 11 tests. BcStack family (#20): BcXStack/BcYStack/BcBox added as new primitives (3 source + 3 contract + 3 test). XStack locks
flex-row, YStack locksflex-col(Tamagui XStack/YStack convention), BcBox layout-participating wrapper distinct from BcSlot'sdisplay:contents. BcToastQueue (#22): brand-new Sonner-style stacked toast host with companionBcToastQueueControllerheadless helper. The controller owns push/dismiss/clear + severity sugar + id-based dedupe + maxRetained drop. Component renders the controlled list at one of 6 viewport corners, schedules per-entry timers inonMount/onUpdate/onUnMount, dispatchesonDismiss(id)so the controller drops the entry. +52 tests (11 splitter + 20 stack family + 21 toast queue). Total cumulative: 272 pass / 11 fail. 18/22 P0 components now have contract + source-level tests. Only BcDataTable enterprise upgrade (#3, ADR-003 §4) and the four deferred Adapt splits remain in P0.
Update 2026-06-14 — Fase C subset 2 / BcDataTable A1 (multi-sort + filter + search + a11y). First commit of the BcDataTable enterprise upgrade per ADR-003 §4. Engine extraction: pure headless modules
engine/sort.ts(multi-rule comparator, 3-state cycle helper, locale-aware string + null-aware compare) andengine/filter.ts(12 operators: eq/neq/gt/gte/lt/lte/like/startsWith/endsWith/in/notIn/between/isNull/isNotNull, plusapplyGlobalSearch). Both reusable for BcList / BcTree. Component upgrade: source rewrite ofBcDataTable.lite.tsxadds multi-sort with Shift+click and 1-based priority badges (gated when ≥2 rules), per-column filter row gated on at least onefilterablecolumn, global search input above the table, a11yaria-sorton every sortable header +tabIndex+ Enter/Space keyboard toggle. Server mode forwards sort/filter/search viaFetchParams. Side-effect-in-getter bug from earlier source fixed by splittinglocalProcessed(search→filter→sort) fromlocalView(paginated slice). +49 tests (15 sort engine + 16 filter engine + 18 source-level). Total cumulative: 321 pass / 11 fail. A2/A3/A4 (column ops + virtualization + inline edit) follow in next commits.
Update 2026-06-14 — Fase C subset 2 / BcDataTable A2 (column ops + selection). Second commit of the enterprise upgrade. Engine extraction:
engine/columns.ts(ColumnState + show-hide + reorder + resize + pin with auto re-derived order so left-pinned sort first, right-pinned last) andengine/selection.ts(single/multi/checkbox modes; ctrl-toggle, shift-range from anchor index; headertoggleAllVisible+isAllVisibleSelected+isSomeVisibleSelectedfor tri-state checkbox). Component upgrade: header gains an optional leading checkbox column with tri-statearia-checked(true/false/mixed); rows exposearia-selectedand a visualbg-accent/50cue when selected; clicks dispatch throughhandleRowSelectClickhonouring ctrl/meta + shift modifiers. Header drag-drop reorder gated onreorderable(HTML5 drag withtext/bc-colmime), PointerEvent column resize handle (min 40px floor) gated onresizable, column visibility menu gated onshowColumnTogglewitharia-haspopup/aria-expanded.defaultGetRowIdfalls back fromrow.idto the row index when no accessor is supplied. +43 tests (13 columns engine + 16 selection engine + 14 source-level). Total cumulative: 364 pass / 11 fail. A3 (virtualization + tree-table + grouping) and A4 (inline edit + export + state persistence + context menu) follow.
Update 2026-06-14 — Fase C subset 2 / BcDataTable A3 (engines: virtualization + tree + grouping). Third commit of the enterprise upgrade. Three new pure engines:
engine/tree.ts(depth-first flatten with cycle break at 64 levels,expandAllskips leaves,toggleExpandwith stable Set),engine/group.ts(stable bucket order from first-occurrence with rows preserving source order; aggregates: sum/avg/count/min/max with numeric/Date/string-coercion, NaN min/max for empty numeric set),engine/virtualize.ts(computeWindowmath: top/middle/bottom with overscan, scrollTop clamping for overshoot+negative, paddingTop+visible*rowHeight+paddingBottom invariant). Component wiring:treeRowsgetter calls flattenTree with currentexpandedTreeKeys,toggleTreeRowemitsonExpandedChange;groupedRowsgetter calls groupRows withgroupBy + aggregates;virtualWindow+virtualRows+handleVirtualScrollrecompute on scroll; defaults applied (rowHeight=36, viewportHeight=400, overscan=5). Contract re-exports new engine types. Render integration (virtualized scroll container, tree chevron + indent, group header/footer rows) deferred to a dedicated A3-render sub-commit so this batch stays focused on engine correctness + component state wiring. +34 tests (10 tree + 8 group + 8 virtualize + 11 source-level). Total cumulative: 398 pass / 11 fail. A4 follows.
Update 2026-06-14 — Fase C subset 2 / BcDataTable A4 (inline edit + export + persistence + context menu). Fourth and final engine commit of the enterprise upgrade. Three new pure engines:
engine/edit.ts(cell-mode + row-mode with per-row staged-changes Map; commitCell/commitRow return diffs the caller applies; cancelCell/cancelRow drop staging cleanly; isCellEditing/isRowEditing pinpoint matchers),engine/export.ts(RFC 4180 CSV serializer with UTF-8 BOM for Excel double-click, custom delimiter/newline/header opts, per-column format() callback, Date→ISO + object→JSON coercion, no DOM/filesystem touches),engine/persistence.ts(versioned PersistedState snapshot, serialize/deserialize that returns null on bad input rather than throwing, injectable PersistenceStorage interface so localStorage/sessionStorage/memory/server-side all work, createMemoryStorage helper for tests + SSR fallback). Component wiring: edit handlers gate on editMode prop, commitCellEdit fires onCellChange only when there's a diff, commitRowEdit fires onRowChange only when buffer non-empty; triggerCsvDownload guards ontypeof document+URL.createObjectURL(SSR/RN-safe no-op) and only includes visible columns via columnStates filter; restorePersistedState runs in onMount before loadData so the initial fetch picks up restored sort/filter/search; persistNow + restorePersistedState both early-return when storage/key are missing; row right-click wires through onContextMenu when showRowContextMenu is true. Export CSV button gated onexportablewith aria-label. Contract re-exports EditMode, CellRef, ExportColumn, ExportOptions, PersistenceStorage, PersistedState. +49 tests (13 edit + 11 export + 11 persistence + 14 source-level). Total cumulative: 447 pass / 11 fail. All 16 ADR-003 §4 must-haves now have engine + state wiring; A3/A4 render integration (virtualized scroll, tree chevron, group rows, cell input) follow as separate render sub-commits.
Update 2026-06-15 — BcDataTable A3-render (virtualized scroll + tree chevron + group rows). Render integration of the A3 engines into
BcDataTable.lite.tsx.bodyModediscriminator ('group' | 'tree' | 'virtual' | 'plain') routes the tbody to one of four render branches per ADR-003 §4 row 7-9; precedence is group > tree > virtual > plain so a grouped tree-table gracefully degrades to grouped rows (a future render sub-commit may layer them). Tree branch rendersstate.treeRowswitharia-level={depth+1}+aria-expandedon<tr>, a chevron<button>in the first column gated onhasChildren(split into two<Show>branches because Mitosis 0.13.1's Stencil generator chokes on ternary-with-unicode-string literals), 16px-per-depth indent on column 0, andstopPropagationon the chevron click so toggling expand never fires row select. Group branch renders three nested<For>blocks: header rows (data-bc-group-header, full-widthcolSpanshowing field+value+count), body rows per group (data-bc-group-row), and an optional footer row gated onshowGroupFooterwhose cells call the newaggregateValueFor(group, key)helper. Aggregate formatter centralised on state (formatAggregate(value, kind)): NaN sentinel renders as em-dash, sum/avg usetoFixed(2)for non-integers, count is plain integer, min/max plain. Virtual branch wraps the existing<table>in a scroll container capped toviewportHeightwithonScroll → handleVirtualScroll, emits<tr aria-hidden>spacers above and below the rendered window with explicitheightso the native scrollbar reflects the full dataset, and reindexes every row by the absolutestartIndex + rowIdxso checkbox / aria-selected stay correct after scroll.totalColumnCountgetter centralises base-cols-plus-selection-slot math used by every full-width row (loading / error / empty / group header / virtual spacer); legacy inline calc replaced. +9 source-level tests asserting bodyMode discriminator, tree chevron + indent, group header/body/footer wiring, virtualized container + spacers + absolute row index. Total cumulative: 467 pass / 0 fail. Mitosis full-glob build green: 76/76 components compile across react/vue/reactNative/stencil. A4-render (cell input + row edit UI + ctxmenu visual) follows as the next sub-commit.
Update 2026-06-15 — BcDataTable A4-render (inline edit + row actions + visual context menu). Closes the BcDataTable enterprise upgrade.
cellAsInput(row, idx, field)discriminator unifies cell-edit (editMode === 'cell'+ active cell match) and row-edit (editMode === 'row'+ active row match) into one boolean so every body branch (plain / tree / virtual / group body) toggles between<span>and<input>identically.editingCellValueprefers the staged-changes buffer over the row source so typing survives across renders. Cell-mode triggers viaonDblClickon the<td>(gated oneditMode === 'cell'); the input wiresonInput → stageEdit,onBlur → commitCellEdit, andonKeyDown → handleCellEditKey(Enter commits, Escape cancels). Row-mode adds an action column at the rightmost edge of every body branch: an "Edit" button when not editing, a "Save / Cancel" pair when editing. The header gains an<th>Actions</th>slot and the per-column-filter row gains a matching empty<th>so widths line up;totalColumnCountnow adds the action column too so loading / error / empty / group-header / group-footer / virtualized spacers all span correctly. Group-footer rows pad the action slot with an empty<td>so aggregate values keep aligning with their data column. Visual context menu upgrades the existinghandleRowContextMenufrom callback-only to also opening a positioned overlay:{contextMenuOpen, contextMenuX/Y, contextMenuRow, contextMenuRowIndex}state drives a fixed-position<ul role="menu">with a "Copy row" action that writes tab-separated visible-column values tonavigator.clipboard(SSR / RN safe via typeof guard). A backdrop catches clicks outside the menu viacloseContextMenu(). +9 source-level tests assertingcellAsInput/cellEditActive/rowEditActivediscriminators, dblclick wiring, Edit / Save / Cancel button labels, totalColumnCount action-column accounting, virtualized + tree branches indexing, and context-menu open / close / copy-row clipboard guard. Total cumulative: 476 pass / 0 fail. Mitosis full-glob build green: 76/76. All 16 ADR-003 §4 must-haves now have engines + state + render integration; BcDataTable upgrade complete.
Update 2026-06-15 — Adapt splits for BcContextMenu / BcDrawer / BcCascader / BcTreeSelect (ADR-006 §2.2). Closes the four "Adapt" components left in P0. Each component now ships a hand-written
BcXxx.native.tsxnext to its.lite.tsxweb source; both impls conform to the sharedBcXxx.contract.ts. The web target keeps the mitosis-builtoutput/react/.../BcXxx.tsx(right-click menu, side panel, anchored columns popover, anchored tree dropdown). The RN target gets the hand-tuned mobile UX via a new post-build scriptscripts/apply-adapt-overrides.mjsthat copies each.native.tsxover the mitosis-generatedoutput/react-native/.../BcXxx.tsx. Vue + Stencil targets stay on the web mitosis output (Adapt is a web-vs-mobile split, not a third dimension). BcContextMenu.native.tsx: Modal+Pressable bottom sheet that opens on a 300ms long-press (mobile equivalent of right-click); items support icon/separator/disabled/danger same as the web menu. BcDrawer.native.tsx: Modal-anchored bottom sheet regardless ofplacementprop (idiomatic on iOS + Android), close button optional, backdrop dismiss honorscloseOnOverlay. BcCascader.native.tsx: full-screen sheet that walks one column at a time with a‹ Backstep-up button — matches the dominant mobile picker pattern;onChangestill emits aFieldChangeEventonly on leaf selection. BcTreeSelect.native.tsx: bottom sheet wrapping a flattenedScrollViewwith the same expand/collapse + indent semantics as the web dropdown. +22 source-level tests (5+5+6+6) asserting per-component file presence, contract import, RN-only primitives, mobile-pattern marker (long-press / bottom-sheet / Back button / flatten helper), anddata-bc-platform="native"parity marker.scripts/apply-adapt-overrides.mjsis idempotent, fails loud when a.native.tsxis missing, prepends an "AUTO-COPIED" banner to the generated mirror; wired intonpm run buildbetweenfix-react-outputandgenerate-index. Total cumulative: 498 pass / 0 fail. Mitosis full-glob build still green: 76/76. All 22 P0 components (5 fondasi + 6 batch 2 + 6 batch 3 + BcForm + BcList + BcSplitter + BcStack family + BcToastQueue + BcDataTable) now have full contract + source-level tests + (where applicable) Adapt split. P0 surface complete.
Update 2026-06-15 — Fase D / BcRenderer (ADR-005 Phases 1-3 landed). Schema-driven UI compositor lives at
core/renderer/.UiSchemadocument is domain-agnostic (no BitCode coupling) so the renderer is genuinely standalone — JsonForms-style usage works out of the box. Six schema kinds:'form'wires<BcForm>with fields + reactions;'detail'is the same form rendereddisabled + hideSubmit;'list'wires<BcDataTable>withcolumns_def/data/source/pageSize;'section'+'grid'are grouping wrappers that recurse via<BcRenderer>(CSSgrid-template-columns: repeat(N, minmax(0, 1fr)));'custom'emits a sentinel<div data-bc-renderer-custom data-payload={...}>for host-portal replacement.FieldTypediscriminator (input / textarea / select / number / date / toggle / checkbox / email / password / url / tel) maps to<BcForm>'s native input string viaresolveFieldType. Resolver helpers (resolveField,resolveFields,defaultFieldResolver) are pure TS so consumers can pre-process schemas before handing them to the renderer (this is how custom field types likelookup/signatureplug in — Mitosis cannot do runtime dynamic dispatch, so pre-processing is the deliberate extension story). Reactivity rides through unchanged:schema.reactionsforwarded into<BcForm>'s existing reactive engine (Level 1 per ADR-004), so all four effect kinds (DATA / VALIDATION / UI / VALUE) work without renderer changes.scripts/generate-index.mjsupdated to also scansrc/core/renderer/and to mirror non-components/source paths into the per-target output barrels. +22 tests (file presence +resolveFieldTypemappings +resolveFieldfield-by-field semantics +resolveFieldspurity + barrel re-exports + per-kind source-level branching + section/grid recursion + grid-template-columns wiring + custom-sentinel data attributes). Total cumulative: 520 pass / 0 fail. Mitosis full-glob build green: 77/77 components.@bitcode/uiis now a complete schema-driven UI library: standalone usage = JsonForms parity; BitCode integration = engine mapsmodels/*.json->UiSchemaand feeds it to<BcRenderer>. Phase 4 (BitCode JSON transformer) lives in the BitCode engine, outside@bitcode/uiscope.
Update 2026-06-15 — Batch 1A: P1 Forms skeleton-existing → contract+tests landed. Six P1 Forms components that already had
.lite.tsxskeletons gained matchingBcXxx.contract.ts+ source-level tests at the same DoD bar as P0: BcSegmented (10 tests; role=tablist + tab + aria-selected, sm/md/lg sizes, FieldChangeEvent, controlled/uncontrolled), BcMentions (12 tests; @-prefix token detector with whitespace-close, case-insensitivelabel||valuefilter, pick replaces token withprefix+value+space, emits both onChange + onSelect), BcSlider (13 tests; native<input type="range">for free keyboard a11y, gradient-driven track via--bc-primary/--bc-mutedtokens, Number coercion guard, aria-label fallback, tabular-nums value display), BcCombobox (12 tests; role=combobox + aria-expanded, case-insensitive trim filter with empty-query short-circuit, focus reopens popover, emptyText empty state, label inserted but stable value emitted on pick), BcColorPicker (13 tests; native<input type="color">for system color pickers, preset swatches withring-2 ring-ringactive halo, button type="button" guard so swatches do not submit forms, uppercase tabular-nums hex display), BcRate (13 tests; role=radiogroup + per-star aria-pressed + numeric aria-label, antd-style click-to-clear, sm/md/lg icon sizing,text-warningtoken for filled stars (no hardcoded yellow), decorative SVG aria-hidden, hover affordance gated on!disabled && !readonly). All six wireFieldChangeEventconsistently with name/value/oldValue/timestamp shape. +73 source-level tests total. Cumulative: 593 pass / 0 fail. Mitosis full-glob build still green: 77/77. 6/22 P1 Forms now contract+test verified (existing skeletons promoted; net-new + Stencil migrate cohorts follow).
Update 2026-06-15 — Batch 1B: P1 Forms net-new (7 components from scratch). Seven brand-new P1 Forms components authored with skeleton + contract + tests at P0-DoD bar: BcToggleGroup (10 tests; Radix-style multi-toggle, single mode click-to-clear or multi mode indexOf-splice, aria-pressed, sm/md/lg), BcNumberField (14 tests; locale-aware numeric input using Intl.NumberFormat, type=text+inputMode=decimal, ArrowUp/Down step nudge, min/max clamp, tabular-nums, suffix slot), BcDateField (11 tests; input-only date using type=text+Intl.DateTimeFormat, isValidISO via regex+Date.parse, aria-invalid reflects validity, Enter/blur commit), BcTimeField (10 tests; input-only time validating HH:mm(:ss) with 0-23/0-59 range check, aria-invalid, tabular-nums), BcMultiSelect (12 tests; tag-style dropdown with removable chips, role=combobox+option+aria-selected, maxSelected guard, case-insensitive filter, emits string[]), BcRangeSlider (12 tests; dual-thumb min/max using two overlapping native range inputs with [&::-webkit-slider-thumb]:pointer-events-auto Tailwind arbitrary variants, cross-guard prevents thumbs passing, emits [number, number] tuple), BcDropZone (14 tests; drag-and-drop file upload region with role=button, maxSize + accept MIME validation, maxFiles guard, role=alert error, file list with remove buttons, B/KB/MB/GB size formatter). Discovered two new Mitosis 0.13.1 bugs during this batch and applied established workarounds: (a) get accessor at file top-level (outside useStore) triggers BABEL_PARSE_ERROR MissingSemicolon — removed the unused accessor from BcNumberField; (b) JSDoc /** */ block headers above the component function + inline JSDoc on state members collapse into adjacent code lines in the React generator output, breaking Prettier TS parser — stripped JSDoc from BcDropZone via scripts/strip-inline-comments.mjs + manual removal of the component header. +83 source-level tests total. Cumulative: 676 pass / 0 fail. Mitosis full-glob build green: 84/84 components across react/vue/reactNative/stencil; 82 exported via barrel. 13/22 P1 Forms now contract+test verified (Batch 1A existing skeletons + Batch 1B net-new). Stencil migrate cohort (8 components: TagsInput/RichText/Code/File/Json/Signature/Barcode/Geo) follows.
Update 2026-06-18 — ADR-008 Core Integration Surface hardening complete. Three parallel workstreams landed simultaneously: (1) WC event bridge wired into 19 source components via dispatchBcEvent alongside semantic callbacks (BcTooltip skipped: CSS-only). (2) Source implementations created for 5 contract-only form controls (BcSegmented, BcNumberField, BcDateField, BcTimeField, BcMultiSelect) each with partClass + data-part + controlled/uncontrolled + semantic events + 93 new tests. (3) Formal ADR-008 contract freeze for 4 infra/metadata surfaces (BcRenderer, ReactiveStore, AppProvider, BcPortal) with Parts/Methods/WebComponentEvents/A11yContract/AdapterMapping. Total cumulative: 1488 pass / 0 fail. Mitosis build green: 151 components, 149 exports, 4 targets. Core Integration Surface Slots/Parts gate is now ✅ for all components with source implementations.
| Component | Group | Stencil | Mitosis | Contract | A11y | Notes |
|---|---|---|---|---|---|---|
| BcSegmented | forms | ❌ | ✅ | ✅ | ✅ | Net-new. role=tablist + role=tab + aria-selected; controlled/uncontrolled; sm/md/lg sizes; FieldChangeEvent. 10 source-level tests pass. |
| BcMentions | forms | ❌ | ✅ | ✅ | ✅ | Untuk Chatter. @-prefix token detector + filtered popover; whitespace closes; pick replaces token with prefix+value+space; emits onChange + onSelect. 12 source-level tests pass. |
| BcSlider | forms | ❌ | ✅ forms/slider |
✅ | ✅ | Net-new. Native <input type="range"> for free a11y; %-driven gradient track via --bc-primary/--bc-muted; aria-label fallback; tabular-nums value display. 13 source-level tests pass. |
| BcRangeSlider | forms | ❌ | ✅ forms/rangeslider |
✅ | ✅ | Net-new. Dual-thumb min/max range slider; two overlapping native range inputs with webkit-slider-thumb pointer-events layering; cross-guard prevents thumbs passing each other; emits [number, number] tuple. 12 tests pass. |
| BcCombobox / BcAutocomplete | forms | ❌ | ✅ forms/combobox |
✅ | ✅ | Net-new. role=combobox + aria-expanded; case-insensitive trim filter; focus reopens; emptyText state; FieldChangeEvent on pick (label inserted, value emitted). 12 source-level tests pass. |
| BcMultiSelect | forms | ❌ | ✅ forms/multiselect |
✅ | ✅ | Net-new. Tag-style multi-choice dropdown; selected items as removable chips; role=combobox+option+aria-selected; maxSelected guard; case-insensitive filter; emits string[]. 12 tests pass. |
| BcColorPicker | forms | ✅ bc-field-color |
✅ forms/colorpicker |
✅ | ✅ | Migrate + reuse. Native <input type="color"> for system pickers; preset swatches with active ring; tabular-nums uppercase hex; FieldChangeEvent. 13 source-level tests pass. |
| BcRate | forms | ✅ bc-field-rating |
✅ forms/rate |
✅ | ✅ | role=radiogroup + aria-pressed per star; click-to-clear (antd idiom); sm/md/lg sizes; warning token (no hardcoded yellow); decorative SVG aria-hidden. 13 source-level tests pass. |
| BcTagsInput | forms | ✅ bc-field-tags |
✅ forms/tagsinput |
✅ | ✅ | Migrate. Free-form tag input; Enter/comma to add; Backspace on empty removes last; chips with remove buttons; maxTags guard; emits string[]. 11 tests pass. |
| BcRichText | forms | ✅ bc-field-richtext |
✅ forms/richtext |
✅ | ✅ | Migrate. contentEditable div (not textarea); role=textbox + aria-multiline; hidden input for form submission; minHeight from rows prop; token-driven palette. 8 tests pass. |
| BcCode | forms | ✅ bc-field-code |
✅ forms/code |
✅ | ✅ | Migrate. Monospace textarea with spellcheck=false; language badge (pointer-events-none); fontFamily via --bc-font-mono CSS var; tabular-nums. 7 tests pass. |
| BcFile | forms | ✅ bc-field-file |
✅ forms/file |
✅ | ✅ | Migrate. Native file input with file: pseudo-element token styling; maxSize validation; file list with remove buttons (type=button); B/KB/MB size formatting; role=alert error. 8 tests pass. |
| BcJson | forms | ✅ bc-field-json |
✅ forms/json |
✅ | ✅ | Migrate. Monospace textarea with JSON.parse validation; onBlur pretty-prints valid JSON; aria-invalid reflects validity; role=alert error on invalid; tabular-nums. 8 tests pass. |
| BcSignature | forms | ✅ bc-field-signature |
✅ forms/signature |
✅ | ✅ | Migrate. Canvas + PointerEvents for stylus/finger; strokeStyle via --bc-foreground token; touch-none for mobile; Clear button gated on disabled/!hasInk; emits dataURL via toDataURL. 10 tests pass. |
| BcBarcode | forms | ✅ bc-field-barcode |
✅ forms/barcode |
✅ | ✅ | Migrate. Monospace input with autocomplete=off; format hint on data-bc-barcode-format for consumer libraries (JsBarcode/bwip-js); display area role=img with tracking-wider; tabular-nums. 7 tests pass. |
| BcGeo | forms | ✅ bc-field-geo |
✅ forms/geo |
✅ | ✅ | Migrate. Lat/lng input pair with step=any; Number.isNaN guard; emits { lat, lng } object in FieldChangeEvent; tabular-nums; distinct aria-labels for lat vs lng. 9 tests pass. |
| BcDateField (input-only) | forms | ❌ | ✅ forms/datefield |
✅ | ✅ | Net-new. Input-only date field (react-aria DateField); type=text with Intl.DateTimeFormat for display; isValidISO via regex+Date.parse; aria-invalid reflects validity. 11 tests pass. |
| BcTimeField (input-only) | forms | ❌ | ✅ forms/timefield |
✅ | ✅ | Net-new. Input-only time field (react-aria TimeField); type=text with HH:mm(:ss) validation + range check (h 0-23, m 0-59); aria-invalid reflects validity. 10 tests pass. |
| BcNumberField (locale-aware) | forms | ❌ | ✅ forms/numberfield |
✅ | ✅ | Net-new. Locale-aware numeric input (react-aria NumberField); type=text + inputMode=decimal; Intl.NumberFormat for display; parse strips grouping separators; ArrowUp/Down nudge by step; min/max clamp; tabular-nums. 14 tests pass. |
| BcDropZone | forms | ❌ | ✅ forms/dropzone |
✅ | ✅ | Net-new. Drag-and-drop file upload region (react-aria DropZone); role=button + drag event wiring; maxSize + accept MIME validation; maxFiles guard; role=alert error; file list with remove buttons; B/KB/MB/GB size formatting. 14 tests pass. |
| BcToggleGroup | forms | ❌ | ✅ forms/togglegroup |
✅ | ✅ | Net-new. Multi-toggle button group (Radix ToggleGroup); role=group + aria-pressed per toggle; single mode click-to-clear (empty string), multi mode indexOf splice pattern; sm/md/lg sizes. 10 tests pass. |
| Component | Group | Stencil | Mitosis | Contract | A11y | Notes |
|---|---|---|---|---|---|---|
| BcCommand (palette) | overlays | ❌ | ✅ overlays/command |
✅ | ✅ | Net-new. cmdk-style command palette; role=dialog+aria-modal+combobox+listbox+option; ArrowDown/Up/Enter/Escape keyboard nav; group-by support; case-insensitive filter; backdrop close. 12 tests pass. |
| BcMenubar | navigation | ❌ | ✅ navigation/menubar |
✅ | ✅ | Net-new. Horizontal menu bar; role=menubar+menu+menuitem+separator; aria-haspopup+aria-expanded; toggle pattern (-1 = closed); separator + disabled items. 9 tests pass. |
| BcMegaMenu | navigation | ❌ | ✅ navigation/megamenu |
✅ | ✅ | Net-new. Wide multi-column dropdown; role=menu+menuitem; opens on hover (onMouseEnter) + click; CSS grid with column count; per-link description support. 9 tests pass. |
| BcNavigationMenu | navigation | ❌ | ✅ navigation/navigationmenu |
✅ | ✅ | Net-new. Radix-style nav; conditional aria-haspopup based on links presence; inline panel (not dropdown) below bar; 2-col grid layout; pickRoot vs pickLink dispatch. 9 tests pass. |
| BcAffix | navigation | ❌ | ✅ navigation/affix |
✅ | ✅ | Net-new. Sticky element via getBoundingClientRect; offsetTop or offsetBottom modes; scroll+resize listeners (passive); onChange fires only on state change; SSR-safe. 11 tests pass. |
| BcAnchor | navigation | ❌ | ✅ navigation/anchor |
✅ | ✅ | Net-new. In-page nav with smooth scroll; aria-current=true on active; vertical (border-l) vs horizontal layouts; SSR-safe (typeof document guard). 9 tests pass. |
| BcBackTop | navigation | ❌ | ✅ navigation/backtop |
✅ | ✅ | Net-new. Floating back-to-top button; visibility gated on scrollY > visibilityHeight; passive scroll listener with onMount/onUnMount lifecycle; SSR-safe. 9 tests pass. |
| BcBreadcrumb | navigation | ❌ | ✅ navigation/breadcrumb |
✅ | ✅ | aria-label=Breadcrumb on nav; aria-current=page on active item; separator aria-hidden; configurable separator string. 7 tests pass. |
| BcPagination | navigation | ❌ | ✅ navigation/pagination |
✅ | ✅ | Sibling-count windowed pages with -1/-2 ellipsis sentinels; First/Prev/Next/Last all aria-labeled; aria-current=page; goTo guards on disabled+out-of-range. 9 tests pass. |
| BcDropdown | navigation | ❌ | ✅ navigation/dropdown |
✅ | ✅ | Trigger via Mitosis Slot; aria-haspopup=menu + aria-expanded; role=menu/menuitem; 4 placement variants (top/bottom × start/end); separators + disabled items. 9 tests pass. |
| Component | Group | Stencil | Mitosis | Contract | A11y | Notes |
|---|---|---|---|---|---|---|
| BcNotification | feedback | ❌ | ✅ feedback/notification |
✅ | ✅ | Net-new. 4 status (info/success/warning/error) with semantic tokens; role=alert+aria-live=assertive for error/warning, role=status+polite for info/success; closable+actionLabel optional. 8 tests pass. |
| BcTour | feedback | ❌ | ✅ feedback/tour |
✅ | ✅ | Net-new. Onboarding tour with steps; role=dialog+aria-modal+aria-labelledby; setStep clamps [0,total-1]; isLast triggers onFinish; tabular-nums step counter. 11 tests pass. |
| BcAlertDialog | overlays | ✅ bc-dialog-alert |
✅ overlays/alertdialog |
✅ | ✅ | role=alertdialog + aria-modal + aria-labelledby/describedby; default and destructive variants use bg-primary / bg-destructive tokens (no hardcoded red); backdrop bg-foreground (no bg-black). 9 tests pass. |
| BcPrompt | overlays | ✅ bc-dialog-prompt |
✅ overlays/prompt |
✅ | ✅ | role=dialog with input; Enter submits + Escape cancels; required guard prevents submit on empty trim; autofocus + focus-visible ring. 10 tests pass. |
| BcWizard | overlays | ✅ bc-dialog-wizard |
✅ overlays/wizard |
✅ | ✅ | Multi-step dialog with stepper; aria-current=step on active; canAdvance gate hook; setStep clamps; data-bc-wizard-step exposes index; Slot for body. Schema-driven content (renderStepContent callback, ADR-005 §2), per-step validation (client+server, ADR-004 ValidationRule), icon per step, skippable steps, onFinish(mergedValues), finishAction (ADR-018). 18 source + 2 RTL tests pass. |
| BcHoverCard | overlays | ❌ | ✅ overlays/hovercard |
✅ | ✅ | Net-new. role=tooltip; opens on hover AND focus (keyboard equivalent); openDelay/closeDelay timers with clearTimeout; 4 placement variants; controlled+uncontrolled. 11 tests pass. |
| BcActionsheet | overlays | ❌ | ✅ overlays/actionsheet |
✅ | ✅ | Net-new mobile bottom-sheet (gluestack parity); items-end anchored; role=dialog+aria-modal; role=list+menuitem; destructive items via text-destructive token; backdrop bg-foreground. 9 tests pass. |
| BcAdapt | overlays | ❌ | ❌ | – | – | NEW Tier 3 responsive contract |
| Component | Group | Stencil | Mitosis | Contract | A11y | Notes |
|---|---|---|---|---|---|---|
| BcCarousel | data-display | ❌ | ✅ data-display/carousel |
✅ | ✅ | role=region + aria-roledescription=carousel; data-bc-carousel-index; arrows + dots gated on count>1; bg-foreground caption (no bg-black/text-white). 10 tests pass. |
| BcOrgChart | data-display | ❌ | ✅ data-display/orgchart |
✅ | ✅ | Net-new HRM critical. role=tree+treeitem+aria-level+aria-expanded; flat-render via depth (Mitosis-safe); 64-level cycle break; chevron stopPropagation; avatar alt="" decorative. 10 tests pass. |
| BcInplace | data-display | ❌ | ✅ data-display/inplace |
✅ | ✅ | Net-new inline edit. enter/commit/cancel state; Enter+blur commits, Escape cancels; withButtons mode for explicit Save/Cancel; FieldChangeEvent only when draft != oldValue. 11 tests pass. |
| BcAspectRatio | primitives | ❌ | ✅ primitives/aspectratio |
✅ | ✅ | Net-new Radix primitive. CSS aspect-ratio property; absolute inset-0 child wrapper for full-cover content; uses Mitosis Slot. 6 tests pass. |
| BcDisclosure / BcDisclosureGroup | data-display | ❌ | ✅ data-display/disclosure |
✅ | ✅ | Net-new react-aria spec-correct. WAI-ARIA pattern: button wrapped in h3, aria-expanded+aria-controls, panel role=region; group with role=group + data-exclusive flag. 10 tests pass. |
| BcTagGroup (read-only) | data-display | ❌ | ✅ data-display/taggroup |
✅ | ✅ | Net-new react-aria. role=list+listitem; 5 variants via semantic tokens (success/warning/destructive/info/default); optional remove buttons with aria-label. 8 tests pass. |
| BcFlex | layout | ❌ | ✅ layout/flex |
✅ | ✅ | Net-new layout primitive. 4 directions, 5 align, 6 justify, 3 wrap, gap scale 0-12, inline-flex mode; data-direction marker; uses Mitosis Slot. 9 tests pass. |
| BcSparkline | charts | ❌ | ✅ charts/sparkline |
✅ | ✅ | Net-new MUI X parity. SVG line/bar variants with currentColor; preserveAspectRatio=none; bounds.range fallback to 1; optional last-point dot; role=img wrapper + aria-label. 11 tests pass. |
| Component | Stencil | Mitosis | Notes |
|---|---|---|
| BcViewerPdf | ✅ | ✅ media/viewer-pdf | iframe + lazy + #toolbar=0 toggle. 7 tests. |
| BcViewerImage | ✅ | ✅ media/viewer-image | object-fit variants + zoom toggle + lazy/decoding=async. 8 tests. |
| BcViewerDocument | ✅ | ✅ media/viewer-document | Office Online + Google Docs engines + sandbox + encodeURIComponent. 6 tests. |
| BcViewerVideo | ✅ | ✅ media/viewer-video |
| Component | Group | Stencil | Mitosis | Verified Done |
|---|---|---|---|---|
| BcWatermark | data-display | ❌ | ✅ | ✅ data-display/watermark SVG data-URI tile + currentColor + aria-hidden overlay. 9 tests. |
| BcQRCode | data-display | ❌ | ✅ | ✅ data-display/qrcode endpoint template + status overlay + token-driven bg-background. 10 tests. |
| BcSpeedDial | overlays | ❌ | ✅ | ✅ overlays/speeddial aria-haspopup=menu + 4 placement classes + rotate-45 trigger glyph. 10 tests. |
| BcKbd | primitives | ❌ | ✅ | ✅ primitives/kbd semantic + 2 sizes + monospace + token palette. 8 tests. |
| BcVirtualScroller | views | ❌ | ✅ | ✅ views/virtual-scroller role=list + configurable height/itemHeight. 6 tests. |
| BcKnob | forms | ❌ | ✅ | ✅ forms/knob role=slider + valuemin/max/now/disabled + range fallback. 7 tests. |
| BcMeterGroup | feedback | ❌ | ✅ | ✅ feedback/meter-group role=meter + 5 variants via semantic tokens + width %. 6 tests. |
| BcDock | navigation | ❌ | ✅ | ✅ navigation/dock nav role=menubar + aria-current=page + sr-only label. 7 tests. |
| BcGalleria | media | ❌ | ✅ | ✅ media/galleria figure/figcaption + thumbnail strip + lazy/decoding. 7 tests. |
| BcViewGantt | views | ✅ | ✅ | ✅ views/gantt role=grid+row+gridcell + bar position from start*unitWidth + progress %. 7 tests. |
| BcViewMap | views | ✅ | ✅ | ✅ views/map OpenStreetMap embed + lat/lng/zoom + bbox offsets + sandbox. 6 tests. |
| BcViewReport | views | ✅ | ✅ | ✅ views/report article + print: utility classes + section aria-labelledby + Slot. 8 tests. |
| BcViewEditor | views | ✅ | ✅ | ✅ views/editor data-language + textarea + spellcheck=false + char count. 8 tests. |
| BcViewActivity | views | ✅ | ✅ | ✅ views/activity role=log + aria-live=polite + ordered list + . 7 tests. |
| BcExport | ✅ | ✅ | ✅ print/export role=group + per-format aria-label + data-format markers. 7 tests. |
|
| BcPivot | analytics | ✅ | ✅ | ✅ analytics/pivot role=region + aria-label + expandable rows + totals + grand total + no-data state. 14 tests. |
| BcNotificationCenter | interaction | ✅ | ✅ | ✅ interaction/notification-center bell button aria-label + aria-expanded + role=dialog dropdown + unread badge + mark-all-read + mark-read per item + infinite scroll + loading/error/empty states. 21 tests. |
| BcNotificationItem | interaction | — | ✅ | ✅ 6 variants (info/warning/error/success/mention/message) with semantic icon + token-driven palette + role=article + unread dot + mark-read button + tabular-nums timestamp. Covered by BcNotificationCenter tests. |
| BcPrint | ✅ | ✅ | ✅ print/print 3 variants (default/outline/ghost) + data-target marker. 7 tests. |
|
| BcReportLink | ✅ | ✅ | ✅ print/report-link external rel=noopener noreferrer + format badge aria-hidden. 7 tests. |
|
| BcSearch | navigation | ✅ | ✅ | ✅ navigation/search role=search + listbox/option + aria-controls + autocomplete=off. 8 tests. |
| BcFavorites | navigation | ✅ | ✅ | ✅ navigation/favorites per-item Remove aria-label + text-warning star (no hardcoded yellow). 8 tests. |
| BcColorArea | forms | ❌ | ✅ | ✅ forms/color-area role=slider + SV gradient driven by hue + thumb position. 7 tests. |
| BcColorWheel | forms | ❌ | ✅ | ✅ forms/color-wheel conic-gradient ring + role=slider 0..360 + rotate(deg) thumb. 6 tests. |
| BcColorSlider | forms | ❌ | ✅ | ✅ forms/color-slider range input + custom gradient + accent-primary token. 6 tests. |
| BcColorSwatch | forms | ❌ | ✅ | ✅ forms/color-swatch button + aria-pressed + ring-offset on selected. 7 tests. |
| BcImage | data-display | ❌ | ✅ | ✅ data-display/image 3 fit modes + lazy/decoding=async + role=img placeholder. 6 tests. |
| BcCenter | primitives | ❌ | ✅ | ✅ primitives/center grid place-items-center + inline variant + Slot. 5 tests. |
| BcSquare | primitives | ❌ | ✅ | ✅ primitives/square size→width+height + rounded toggle + Slot. 5 tests. |
| BcCircle | primitives | ❌ | ✅ | ✅ primitives/circle rounded-full + role=img + aria-label + Slot. 4 tests. |
| BcPanelMenu | navigation | ❌ | ✅ | ✅ navigation/panel-menu role=tree+treeitem + aria-expanded + chevron rotate-90. 7 tests. |
| BcTieredMenu | navigation | ❌ | ✅ | ✅ navigation/tiered-menu role=menu+menuitem + aria-haspopup + left-full submenu. 7 tests. |
| BcSlideMenu | navigation | ❌ | ✅ | ✅ navigation/slide-menu path[] reduces nested level + Back button + leaf vs push detection. 7 tests. |
| BcSidebar | layout | ❌ | ✅ | ✅ layout/sidebar data-collapsed/side markers + width swap + glyph via state (Mitosis ternary literal workaround). 8 tests. |
29 komponen yang tadinya "Coming Soon" di demo React di-port full-feature
ke Mitosis (.lite.tsx Pure / .web.tsx+.native.tsx Adapt) + Flutter
parity (iOS Cupertino + Android Material via FPW). Lihat handoff
handoffs/2026-06-29-ui-stub-completion-and-flutter-review.md.
| Component | Group | Stencil | Mitosis | Verified Done |
|---|---|---|---|---|
| BcAlert | feedback | ❌ | ✅ | ✅ feedback/alert 4 severity (info/success/warning/error) + role=alert/status + aria-live + dismissible + hideIcon. Scope-distinct from BcNotification (no auto-dismiss, no action button). 12 source tests + 9 Flutter tests. |
| BcChip | data | ❌ | ✅ | ✅ data/chip 6 variants + avatar (URL or initials) + controlled/uncontrolled removed + resolveControllable + dispatchBcEvent. 12 source tests + 9 Flutter tests. |
| BcPrintArea | ❌ | ✅ | ✅ print/print-area auto-inject @media print isolation (idempotent) + role=region + aria-label + onReady. 10 source tests + 4 Flutter tests. |
|
| BcPrintPreview | ❌ | ✅ | ✅ print/print-preview iframe preview + trigger button (window.print fallback) + hideToolbar + onError + onUpdate rewrites content. 12 source tests + 6 Flutter tests. |
|
| BcTextField | forms | ❌ | ✅ | ✅ forms/text-field multiline auto-grow (computeRows clamp) + maxLength enforcement + showCount + prefix/suffix slot + resolveControllable + onEnter (single-line only). 16 source tests + 14 Flutter tests. |
| Component | Group | Stencil | Mitosis | Verified Done |
|---|---|---|---|---|
| BcLike | social | ❌ | ✅ | ✅ social/like like/unlike toggle + count + aria-pressed + resolveControllable + dispatchBcEvent. 11 source tests + 8 Flutter tests. |
| BcFollow | social | ❌ | ✅ | ✅ social/follow follow/unfollow toggle + count + custom labels + aria-pressed + resolveControllable + secondary/primary tokens. 12 source tests + 7 Flutter tests. |
| BcComment | social | ❌ | ✅ | ✅ social/comment role=article + avatar (URL/initials) + replyable form (Enter submits/Shift+Enter newline) + trimmed submit guard + whitespace-pre-wrap body. 12 source tests + 9 Flutter tests. |
| BcShare | social | ❌ | ✅ (Adapt) | ✅ social/share Web Share API with copy-link fallback dialog (web) + Share.share module (RN) + onShare outcomes (shared/dismissed/error/unavailable) + AbortError as dismissed + Flutter delegates to caller (dependency-free). 17 source tests + 5 Flutter tests. |
| Component | Group | Stencil | Mitosis | Verified Done |
|---|---|---|---|---|
| BcNativeButton | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-button 5 variants + haptic (RN) + loading + block + 44px touch target. Platform-aware via Pressable (RN) + PlatformElevatedButton (Flutter). 12 source tests + 8 Flutter tests. |
| BcNativeInput | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-input controlled/uncontrolled value + secureTextEntry + 7 keyboardType + label. Flutter: typedef alias to BcInput (zero duplication). 12 source tests + 3 Flutter tests. |
| BcNativeSelect | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-select options + placeholder + controlled value. iOS CupertinoPicker wheel / Android Material dropdown. Flutter: typedef alias to BcSelect. 11 source tests + 3 Flutter tests. |
| BcNativeSwitch | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-switch role=switch + aria-checked + controlled/uncontrolled + toggle reasons. Flutter: typedef alias to BcToggle. 12 source tests + 7 Flutter tests. |
| BcNativeSlider | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-slider role=slider + aria-valuemin/max/now + drag/commit reasons. Flutter: typedef alias to BcSlider. 13 source tests + 5 Flutter tests. |
| BcNativePicker | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-picker controlled open+value + title + iOS CupertinoPicker wheel / Android Material dialog. Flutter: show() static via showCupertinoModalPopup/showDialog. 14 source tests + 8 Flutter tests. |
| BcNativeAlert | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-alert role=alertdialog + confirm/cancel + focus trap. Flutter: show() via showPlatformDialog (CupertinoAlertDialog/AlertDialog). 12 source tests + 4 Flutter tests. |
| BcNativeActionSheet | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-actionsheet role=dialog + items + destructive + disabled. Flutter: show() via showCupertinoModalPopup (CupertinoActionSheet) / showModalBottomSheet. 13 source tests + 8 Flutter tests. |
| BcNativeModal | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-modal role=dialog + 3 presentation styles (fullscreen/formSheet/pageSheet) + focus trap + Slot. Flutter: controlled-open widget via showGeneralDialog. 12 source tests + 6 Flutter tests. |
| BcNativeToast | adapt-poc | ❌ | ✅ (Adapt) | ✅ adapt-poc/native-toast role=status + aria-live=polite + auto-close timer + actionLabel. Flutter: controlled-open widget with SnackBar-like overlay. 14 source tests + 8 Flutter tests. |
| Component | Group | Stencil | Mitosis | Verified Done |
|---|---|---|---|---|
| BcLightbox | media | ❌ | ✅ (Adapt) | ✅ media/lightbox full-screen gallery + keyboard nav (Esc/arrows) + touch swipe + role=dialog + focus trap + resolveControllable open/index. 16 source tests + 8 Flutter tests. |
| BcMap | media | ❌ | ✅ (Adapt) | ✅ media/map Leaflet lazy-load + markers + role=application + aria-label. Flutter dependency-free (caller wires google_maps_flutter). 14 source tests + 6 Flutter tests. |
| BcWebcam | media | ❌ | ✅ (Adapt) | ✅ media/webcam getUserMedia + canvas capture + track cleanup on unmount + permission error state. Flutter dependency-free (caller wires camera plugin). 15 source tests + 6 Flutter tests. |
| Component | Group | Stencil | Mitosis | Verified Done |
|---|---|---|---|---|
| BcDetailView | views | ❌ | ✅ (Pure) | ✅ views/detail master-detail renderer with field grid (dl/dt/dd) + tabs + action buttons + formatValue (boolean/date/currency) + role=region + onAction/bc-action dispatch. 14 source tests + 6 Flutter tests. |
| BcGridView | views | ❌ | ✅ (Adapt) | ✅ views/grid spreadsheet-like grid with role=grid/row/gridcell + arrow-key cell nav + click-to-edit cells (web) / display-only rows (native) + onCellChange with row/col meta. 18 source tests + 4 Flutter tests. |
| BcTreeView | views | ❌ | ✅ (Adapt) | ✅ views/tree-view hierarchical tree with role=tree/treeitem + aria-expanded/selected + arrow-key nav + flattenTree helper + controlled/uncontrolled expand/select. 19 source tests + 5 Flutter tests. |
| BcKanbanView | views | ❌ | ✅ (Adapt) | ✅ views/kanban-view HTML5 DnD board (web) + long-press select + tap column to move (native) + onCardMove with from/to meta + priority token borders. 18 source tests + 5 Flutter tests. |
| BcCalendarView | views | ❌ | ✅ (Adapt) | ✅ views/calendar-view month/week/day views with event overlay + prev/next/today nav + role=application + onDateSelect/onEventClick/onViewChange. 20 source tests + 6 Flutter tests. |
| BcDashboard | views | ❌ | ✅ (Pure) | ✅ views/dashboard CSS grid of widget cards + configurable columns/gap + renderWidget delegate + default placeholder + onWidgetClick/bc-action dispatch + loading/empty states. 16 source tests + 6 Flutter tests. |
26 chart variants Stencil (area, bar, boxplot, candlestick, custom, funnel,
gauge, graph, heatmap, kpi, line, mixed, parallel, pictorialbar, pie, pivot,
polar, progress, radar, sankey, scatter, scorecard, sunburst, themeriver, tree,
treemap) collapsed into 1 standalone component BcChart driven by
discriminator prop type.
| Component | Group | Stencil | Mitosis | Verified Done |
|---|---|---|---|---|
| BcChart | charts | 26 (frozen) | ✅ | ✅ charts/chart 26-type discriminator + lazy await import('echarts') + SSR guard + onMount/onUpdate/onUnMount lifecycle + role=img + aria-busy + token-driven default palette. 12 component-level tests + 17 helpers tests + 23 factory tests = 52 tests. Flutter (ADR-015 ✅ F1+F2+F3+F4): flutter_echarts wrapper (288 lines, replaces 912-line CustomPaint) + Dart contract port at lib/src/core/chart/ with 36 golden-fixture parity tests (0 diff) + 34 helper assertions + 29 widget-contract tests (WC-001..012, RG-001..002); 26-value BcChartType enum with doughnut→pie alias; Semantics a11y wrapper; backward-compat legacy props preserved. |
Architecture highlights:
- Lazy-load: ECharts loaded via dynamic import only on web mount.
Listed as optional
peerDependency(echarts >=5.4); caller installs. - SSR-safe: bails out when
typeof window === 'undefined'. - Pure option factory:
contracts/chart-option/factory.tstranslates(type, data, flags) -> ECharts optiondeterministically; covered by 24 unit tests per type. No DOM/runtime needed. (Extracted fromcomponents/charts/chart/options/tosrc/contracts/chart-option/so the contract is shared across UI targets; a re-export barrel preserves the historical./optionsimport path.) - Token-driven palette:
DEFAULT_PALETTEuseshsl(var(--bc-*))semantic CSS vars, no hex constants. - Errors via callback:
onErrorinstead of console; consistent with P0 DoD bar.
| Status | Count |
|---|---|
| Stencil ada | 26 (legacy frozen post-ADR-006) |
| Mitosis ada | 1 (BcChart) |
| Verified Done | 1 |
Bukan komponen visual. Tracker ini hanya untuk awareness.
| Item | Status | Notes |
|---|---|---|
core/providers/AppProvider |
✅ | AppConfigStore + BcAppContext + attachSystemThemeWatcher + Mitosis .lite.tsx. 9/9 unit test pass. ADR-013 Phase 1 ✅: consumption surface added — useAppContext + useAppConfigStore hooks (core/hooks/use-app-context.ts, 10/10 tests) exported from hooks + root barrels; Flutter parity AppConfigStore + BcAppConfig InheritedWidget + AppConfigSnapshot + BcApp wiring. |
core/hooks/ subset P0 (8 hooks) |
✅ | Implementasi headless: useId/useDisclosure/resolveControllable/DebouncedValue/copyToClipboard/createMediaQueryWatcher/createFocusTrap/createElementSizeObserver. 13/13 unit test pass. ADR-013 Phase 2 ✅: adopted by P0 overlay/navigation components — BcDialog + BcDrawer (resolveControllable + createFocusTrap), BcPopover + BcDropdown (resolveControllable + useDisclosure), BcTooltip (CSS-only hover, documented exclusion). |
core/hooks/ subset P1 (6 hooks) |
❌ | useHover, useFocusVisible, useEventListener, useThrottledCallback, useLocalStorage, useIsomorphicLayoutEffect |
core/animation/ contract |
AnimationProps + ANIMATION_DEFAULT exported. Implementasi per-tier (CSS transition / RN Animated) belum. |
|
core/adapt/ contract |
AdaptProps + isPlatformCondition + canonical breakpoints. Implementasi runtime (Popover→Sheet) belum. |
Update 2026-06-14 — Fase A done. Cross-tier infrastructure (ADR-002 §9) skeleton landed in
packages/ui/src/core/{providers,hooks,animation,adapt}/with unit-test coverage. Adoption into 22 P0 components is the next gate.
Update 2026-06-14 — Fase B done (partial). Reactive engine (ADR-004) gained scope resolution (
$self/$parent/$root/$index),Evaluatorplug-in interface (Phase E slot),BcReactiveScopeLevel 2 wrapper, and opt-in integration intoBcForm(reactions+onReactiveChangeprops). 10 new tests pass on top of the existing 6. Repeater (Phase B per ADR-004) and BitCode JSON feed (Phase D) remain pending.
Update 2026-06-18 — ADR-008 hardening: collection types, BcDataTable ADR-007 migration, WC event bridge. Three ADR-008 acceptance criteria progressed: (1)
BcKey/BcSelectioncollection types added tocore/types.tsper ADR-007 Section 9 (key-based APIs instead of index-only). (2) BcDataTable source migration frominitialXprops to ADR-007 controlled/uncontrolled pairs:sortModel/defaultSortModel/onSortModelChange,filterModel/defaultFilterModel/onFilterModelChange,selectedKeys/defaultSelectedKeys,expandedKeys/defaultExpandedKeys,onColumnStateChange. LegacyinitialSort/initialFilters/initialSelected/initialExpandedandonSortChange/onFilterChange/onColumnsChangekept as@deprecatedaliases for backward compatibility. WC events renamed tobc-sort-model-change,bc-filter-model-change,bc-column-state-change. (3) Web Component event bridge implemented ascore/wc-event-bridge.tswithdispatchBcEvent()(SSR/RN-safe CustomEvent dispatch withbubbles: true, composed: true),buildMeta()helper, andBC_EVENTSconstants covering all 14 ADR-007 semantic event names. Slots/Parts wiring investigated: Mitosis 0.13.1 lacks native slot composition forslotPropspassthrough, so per-component wiring deferred until Mitosis supports it or a renderProp workaround is viable. +23 new tests (15 BcDataTable ADR-007 migration + 10 WC event bridge - 2 overlap). Total cumulative: 1411 pass / 0 fail.
Update 2026-06-18 — Runtime Part Resolution landed for first Core Integration Surface cohort. ADR-007 Section 6.1 implementation added as
core/part-props.ts:partClass()(additive className concat),partAttr()(explicit data/aria attr lookup),partStyle()(inline style lookup). 7 source components wired: BcInput (root/label/control/input/description/error), BcSelect (root), BcCombobox (root), BcCheckbox (root/control), BcToggle (root), BcDialog (overlay/content), BcPopover (root). All wired elements emitdata-part. This solves slotProps passthrough without Mitosis spread, without plugin/fork, and remains Flutter-portable as pure functions. +28 helper tests. Total cumulative: 1439 pass / 0 fail. Mitosis full build green: 151 components, 149 exports, 4 targets (React/Vue/Stencil/RN).
Update 2026-06-18 — Runtime Part Resolution Data/View rollout. The Data/View family now has ADR-007 §6.1 wiring: BcForm (root/field/label/control/description/error/actions/submitButton), BcList (root/item/pagination/empty/loading/error), and BcDataTable (root/toolbar/search/header/headerCell/body/row/cell/loading/error/empty/pagination/contextMenu). Contract props
className+slotPropswere added where missing so source and contract stay aligned. +3 source-level wiring tests. Total cumulative: 1442 pass / 0 fail. Mitosis full build remains green: 151 components, 149 exports, 4 targets.
Update 2026-06-18 — Runtime Part Resolution Overlay/Navigation/Layout rollout. The next P0 cohort now has ADR-007 §6.1 wiring: BcAlertDialog, BcDrawer, BcTooltip, BcDropdown, BcContextMenu, BcCommand, BcTabs, BcAccordion, BcDisclosure, and BcSplitter. Each component exposes
className+slotPropsin source when previously contract-only and uses additivepartClass()plusdata-parton named parts. Added aggregate rollout tests covering all 10 components. +3 source-level tests. Total cumulative: 1445 pass / 0 fail. Mitosis full build remains green: 151 components, 149 exports, 4 targets.
Update 2026-06-26 — ADR-013 Phase 2: Hooks P0 Adoption. Five overlay/navigation components refactored to consume existing P0 headless hooks instead of ad-hoc
useStoreopen-state logic, preserving public API, events, and contracts: BcDialog + BcDrawer (resolveControllablefor controlled/uncontrolled open +createFocusTrapfor modal focus lifecycle with eager SSR-safe init), BcPopover + BcDropdown (resolveControllable+useDisclosure/DisclosureController withopenCell+reactiveOpen+onOpenChangereason meta), and BcTooltip (documented CSS-only-hover exclusion —group-hover:visible/opacity, no JS open state). All components gainedopen/defaultOpen/onOpenChangecontrolled props where applicable. Source-text tests updated to assert hook adoption; noas any/@ts-ignoreintroduced. Total cumulative: 1604 source tests pass / 0 fail; 147 runtime tests pass / 0 fail. Mitosis full build green: 179 components, 4 targets.
Bukan komponen, tapi prasyarat. Tracker ringkas:
| Phase | Status | Notes |
|---|---|---|
| Phase 0 (ADR-006) — Spike & Cleanup | ❌ | Active — see "Phase 0" section above |
| Phase 1 — Fondasi (token auto-gen, contract template, exports map) | ❌ | Sebagian setup ada (tokens/*), butuh auto-gen pipeline |
| Phase 2 — Perbaiki komponen rusak (BcDataTable, BcInput refactor, BcSelect a11y) | ❌ | Per ADR-002 Section 6 Findings Register |
| Phase 3 — P0 Fondasi a11y/layout (#17-22 di tabel P0) | ❌ | Pasca Phase 0 spike sukses |
| Phase 4 — P0 Views (BcForm, BcList) + DataTable upgrade | ❌ | Jantung ERP |
| Phase 5 — P0 sisanya (Steps, Drawer, ContextMenu, Cascader, dll) | ❌ | — |
| Phase 6 — P1 ekspansi | ❌ | Setelah P0 stabil |
| Phase 7 — P2 polish | ❌ | Opsional, after P1 |
| Phase 8 — Tier B/C (Tamagui/gluestack/Flutter codegen) | ❌ | Per ADR-002, tetap ditunda |
| Phase 5a — Flutter Adapter (ADR-011) | ✅ | Pure-Dart reactive engine + 24 FPW/Material widgets + token bridge + 41 tests. See packages/ui-flutter/. |
| Phase 5b.1 — UiSchema Types + Stub Generator (ADR-011) | ✅ | UiSchema types port (freezed + json_serializable, 4 source + 8 generated files), FieldResolver, contract→Dart stub generator (32 contracts scanned, 8 P1 stubs generated, 24 P0 protected), 55 Dart schema tests + 80 Node.js generator tests. 96 total Flutter tests. dart analyze lib/ clean. |
| Phase 5b.2 — P1 Flutter Widget Completion (ADR-011) | ✅ | 8 targeted P1 Flutter widgets complete: BcDisclosure, BcPortal, BcFieldDuration, BcFieldTableSelect, BcFieldMorph, BcFieldDynLink, BcLookupModal, BcViewGantt. Generator fixes landed for extends clause walking and Promise<T> to Future<T> mapping. 416 Flutter tests pass, flutter analyze returns 0 errors/warnings (info hints only), build_runner succeeds, 252/252 validation assertions passed. |
| Phase 5c — Full Flutter Parity (ADR-011) | ✅ | All remaining ~78 hand-written Flutter widgets for full Mitosis↔Flutter parity. 130 total widget files across 11 groups (primitives, layout, forms, overlays, navigation, data-display, feedback, views, charts, media, social, print). 1158 tests pass (119 test files), 297/297 validation assertions passed across 7 milestones (M1 primitives/layout through M7 gate/misc). BcChangeReason exhaustiveness: 18/18 values. 132 barrel exports verified. flutter analyze 0 errors/warnings, build_runner succeeds. Fixed onReorder→onReorderItem deprecation in BcViewEditor for Flutter 3.44.1. |
-
Mitosis 59 komponen ≠ 59 komponen siap pakai. Sebagian besar masih skeleton (
.lite.tsxdengan logic minimal). Status ✅ di kolom "Mitosis" hanya berarti file ada — bukan berarti contract/a11y/token sudah lengkap. -
Stencil 127 komponen masih production-ready dan dipakai engine BitCode sekarang. Migrasi ke Mitosis tidak menghapus Stencil sampai engine konsumsi output Mitosis (sesuai ADR-002 dan arahan stakeholder).
-
Yang membuat komponen Done bukan jumlah file, tapi: contract penuh + a11y verified + token-based + Tier A pass + tests + docs. Prinsip ini dari ADR-002 Section 5.3 Definition of Done.
-
Tracker ini stale kalau tidak diupdate. Update bersamaan dengan setiap commit yang menyentuh
packages/ui/.
Lihat ADR-017 dan ADR-018.
Candidate matrix + parity report: sprints/package-ui-elementor/block-catalog-candidate-matrix.json + block-catalog-parity-matrix.md.
| Gate | Status | Notes |
|---|---|---|
BlockCatalogEntry types in @bitcode/ui-schema |
In Progress (P1 done) | P1 landed: canonical types, enums, policies, capability normalization, minimal shape validator, 2 Candidate fixtures. No Ready promotion. Next: P2 Portable Expression AST. Amends ADR-003 (metadata layer, no source taxonomy change). |
BcBlockRenderer thin layer over BcRenderer |
Foundation landed (P4) | 2026-07-01 (Agent H): portable engine in @bitcode/ui-schema/block-renderer/ emits RENDER PLANS only (never framework output); web binding in packages/ui/core/block-renderer/ translates plans into BcRenderer/registry output; Dart contract mirror in packages/ui-flutter/. Registry stores metadata only. Action bindings deferred (not executed at render). 29 engine tests + 5 web registry tests pass. No entries promoted to Ready — this is the renderer foundation only; full Flutter widget + per-category catalog sources are follow-ups. |
| ActionSource / ActionResult / ActionEffect / ActionLifecycle | Pending | Locks cross-platform mutation contract. Required by Ready entries that use action-trigger / action-source. |
| Portable Expression AST + built-in function registry | Pending | Locks cross-platform reaction descriptor. Required by Ready entries that use reactive. |
| Catalog validators (build-time + runtime) | Pending | Build-time is CI-blocking; runtime throws typed BlockCapabilityError. |
Export/registry fixes (BcShare, BcGridView) |
Pending | Source-only roots are blocking dependents in Ready Catalog. |
Flutter parity audit (BcAvatar, BcBadge, BcProgress, BcKpi) |
Pending | Add canonical Flutter equivalents with source, tests, and barrel exports before promotion; do not degrade presets to generic primitives just to pass parity. |
| Ready Catalog completeness gate | Pending | All 44 Candidate entries promoted to Ready (or explicitly aliased / excluded) per ADR-017 Section 7 before the catalog can be declared complete. |
No-stub principle: Per ADR-017 Section 7 and stakeholder quality principles, entries marked Ready must render fully on web and Flutter with no placeholder, banner, or mocked-out input. Candidate entries that cannot clear every gate stay in the Candidate Catalog only.
All 9 ADR-014 features are implemented across 4 phases with full engine API, web (Mitosis), and Flutter parity.
| # | Feature | Component | Engine | Web | Flutter | Phase |
|---|---|---|---|---|---|---|
| 5 | Comment & Mention | BcChatter (upgrade) | ✅ comment.json + CommentService + @mention parser | ✅ BcChatter.lite.tsx | ✅ bc_chatter.dart | 1 |
| 6 | Activity Feed | BcActivity (upgrade) | ✅ ActivityService + GET /api/v1/activity | ✅ BcActivity.lite.tsx | ✅ bc_activity.dart | 1 |
| 7 | Export Data | BcExport (upgrade) | ✅ ExportService + POST /export (CSV/XLSX/JSON) | ✅ BcExport.lite.tsx | ✅ bc_export.dart | 1 |
| 4 | Multi-Step Wizard | BcWizard (upgrade) | ✅ wizard view type + process transitions | ✅ BcWizard.lite.tsx | ✅ bc_wizard.dart | 1 |
| 2 | SPA Foundation | BcRenderer (existing) | ✅ render:"spa" + JSON envelope | ✅ spa-runtime.ts | ✅ spa_runtime.dart | 2 |
| 8 | Pivot Table | BcPivot (new) | ✅ PivotService + POST /pivot (OLAP) | ✅ BcPivot.lite.tsx | ✅ bc_pivot.dart | 3 |
| 9 | Notification | BcNotificationCenter (new) | ✅ notification.json + NotificationService + WS push | ✅ BcNotificationCenter.lite.tsx | ✅ bc_notification_center.dart | 3 |
| 1 | Form Builder | BcFormBuilder (new) | ✅ ViewValidator + POST /admin/views/validate | ✅ BcFormBuilder.lite.tsx | ✅ bc_form_builder.dart | 4 |
| 2 | Workflow Builder | BcWorkflowBuilder (new) | ✅ ProcessValidator + POST /admin/processes/validate | ✅ BcWorkflowBuilder.lite.tsx | ✅ bc_workflow_builder.dart | 4 |
| 3 | Schema Builder | BcSchemaBuilder (new) | ✅ ModelValidator + POST /admin/models/validate | ✅ BcSchemaBuilder.lite.tsx | ✅ bc_schema_builder.dart | 4 |
Block Catalog entries: BcPivot (analytics), BcNotificationCenter (interaction), BcBuilder/FormBuilder/WorkflowBuilder/SchemaBuilder (builder) registered as candidate entries in packages/ui-schema/src/block-catalog/categories/.
i18n: All user-facing strings use i18n keys across 11 locales (en, id, ar, de, es, fr, ja, ko, pt-BR, ru, zh-CN) in engine/embedded/modules/base/i18n/.
Permissions: Export honors CanExport group permission. Pivot honors CanRead/CanSelect. Comments/notifications/activity honor group-based read/write. Builders are admin-only.