v2.0.0

VC Shell v2.0.0 is the first stable release of the 2.x series, consolidating 35 alpha iterations into a production-ready foundation for VirtoCommerce admin applications.

Highlights

defineBlade() Macro & Blade Registry

A new defineBlade() macro (powered by a Vite plugin) replaces manual defineOptions + prop wiring. Blades auto-register in a global bladeConfigRegistry, enabling declarative menu items, route generation, and typed options — all with zero boilerplate.

Compositional VcDataTable

VcDataTable is now the primary table component with a full composable architecture: useTableColumns, useDataTableSort, useDataTablePagination, useDataTableState (persistence), inline editing with VeeValidate, weight-based column sizing with ResizeObserver auto-scaling, row reorder via drag-and-drop, and column-position row actions.

VcTableAdapter preserves backward compatibility with the legacy VcTable API.

@vc-shell/migrate CLI

A new migration CLI with 25+ jscodeshift AST transforms automates the v1 → v2 upgrade: defineBlade, useBladeForm, useBlade(), notification rewiring, NSwag class-to-interface, icon audit, and more. Generates a structured MIGRATION_REPORT.md with before/after examples.

Notification System Redesign

Three-level architecture: NotificationStore → ToastController (progress/auto/silent modes) → useBladeNotifications (auto-cleanup per blade). SignalR wired at the store level. Module-level notification templates via defineAppModule({ notifications }).

useBlade() Unified API

Single composable replacing scattered blade utilities: openBlade, closeSelf, callParent, coverWith, onActivated/onDeactivated lifecycle hooks, custom banners (addBanner/removeBanner), and typed TOptions generic.

New Composables

Composable	Purpose
useBlade()	Unified blade lifecycle, navigation, and banners
useBladeForm	Form state — dirty tracking, save/reset, markReady for prefilled data
useBladeWidgets / useWidget	Declarative widget registration with headless mode
defineBladeContext / injectBladeContext	Typed blade ↔ widget communication
useDataTableSort	Table sort state management
useDataTablePagination	Table pagination state
useDataTableState	Table state persistence (columns, sort, filters)
useAssetsManager	Asset upload, reorder, remove with batch concurrency
useSelectDataSource	Select data source with built-in cache layer
useResponsive	Reactive breakpoints (replaces $isMobile/$isDesktop global properties)
useConnectionStatus	Online/offline network detection
useSlowNetworkDetection	Slow network detection via effectiveType + request timing
useWebVitals	Web Vitals metrics collection
usePopup	Popup/dialog management
useNotificationStore	Global notification state
useNotificationContext	Scoped notification access via provide/inject
useBladeNotifications	Blade-scoped notifications with auto-cleanup

New & Redesigned Components

Component	What's new
VcDataTable	Compositional table replacing VcTable
VcImageUpload	Single-image upload component
VcSkeleton	Circle and block shape variants with configurable dimensions
VcBlade	Skeleton loading placeholders instead of spinner overlay
VcToast	Stacking support with two-phase dismissal animations
VcBanner	Refactored with enhanced styling
VcGallery	Redesigned — filmstrip layout, slide-up tray, dark preview, swiper, mobile UX
VcIcon	Lucide icons as standard (FontAwesome/Material deprecated)
VcLoading	Bar sweep loader replacing dots
Dashboard Charts	Chart components with Unovis integration
App Hub	Search, app switcher, and widgets panel
Settings Menu Item	Submenu slot with responsive desktop/mobile behavior

App Hub & Sidebar Redesign

New App Hub with search, app switcher, and widgets panel. Sidebar gains a search bar, tabbed Menu/Hub switcher with swipe gestures on mobile, and badge support for menu items.

Module Federation Packages

Extracted @vc-shell/mf-host and @vc-shell/mf-module packages with mfHostConfig() Vite helper, shared dependency deduplication, and hash-based cache busting for module assets.

Performance & Network Resilience

Deferred AppInsights/SignalR to post-paint, offline detection, slow network detection with effectiveType channel, 30s fetch timeout, and web-vitals integration.

Design System Updates

Lucide icons as the standard, z-index token scale, overlay/shadow/surface/glass design tokens, skeleton loading (blade-level + table column-aware), and bar sweep loader.

API Client Generator

Simple mode (.ts only by default), Interface-first generation, .NET 9/10 runtime support, NSwag 14.6.3.

---

Migration from v1.x

Recommended: AI-assisted migration via @vc-shell/vc-app-skill

The fastest way to migrate is with the @vc-shell/vc-app-skill — an AI coding skill for Claude Code, Cursor, Gemini CLI, OpenCode, and Codex. It runs the CLI migrator under the hood, but also handles steps that require manual intervention: API client regeneration (NSwag class → interface), useBladeForm / useBladeWidgets refactors, notification system rewiring, icon replacements, and more.

# Install the skill
npx @vc-shell/vc-app-skill@alpha install

# Then in your AI tool:
/vc-app migrate

The /vc-app migrate command orchestrates the full migration pipeline:

1. Runs @vc-shell/migrate CLI for mechanical AST transforms
2. Regenerates API clients with Interface-style output
3. Parses MIGRATION_REPORT.md and dispatches AI agents for manual refactors
4. Verifies with vue-tsc and yarn build, iteratively fixes errors
5. Formats code with Prettier

CLI-only migration

If you prefer a manual approach, the @vc-shell/migrate CLI handles mechanical transforms:

npx @vc-shell/migrate --from 1.2.3

This produces a MIGRATION_REPORT.md with automated changes and a list of manual steps you'll need to complete yourself. See the migration guide for details.

---

Full Changelog

See CHANGELOG.md for the complete list of 700+ changes since v1.2.3.