WorkRoot/WorkRoot-WRNexusJSComponent
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88

Browse Source 
- Sync app, public, scripts, test and examples from the framework's
  component-showcase: redesigned component demos, marketing blocks under
  /blocks, template and preview galleries, distinct Timeline/Section
  variants, Chat Bubble receipts, a top-placement Drawer demo, and the
  playground code panel fix (objects in array props no longer blank out).
- Standalone adaptations kept: the generator and tests read
  component-reference.json from the published @wrnexus/ui, and tests use
  the published @wrnexus/compiler and @wrnexus/syntax.
- Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88,
  styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the
  playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed 2026-09-30 16:50:22 +05:30
1 parent bec9ef2889
commit c0ac38c572
171 files changed
+21983 -35658
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

showcase-manifest.json
+124 -267
View File
@@ -1,8 +1,81 @@
{
"generatedFrom": "packages/ui/component-reference.json",
"componentCount": 102,
"removed": ["AuthForm", "AuthSplitLayout", "PortalDashboard", "PublicPageShell"],
"blocks": [
{
"name": "AnnouncementBar",
"slug": "announcement-bar",
"path": "/blocks/announcement-bar"
},
{
"name": "CTASection",
"slug": "ctasection",
"path": "/blocks/ctasection"
},
{
"name": "FeatureCard",
"slug": "feature-card",
"path": "/blocks/feature-card"
},
{
"name": "FeatureGrid",
"slug": "feature-grid",
"path": "/blocks/feature-grid"
},
{
"name": "FeatureIconCard",
"slug": "feature-icon-card",
"path": "/blocks/feature-icon-card"
},
{
"name": "Footer",
"slug": "footer",
"path": "/blocks/footer"
},
{
"name": "Hero",
"slug": "hero",
"path": "/blocks/hero"
},
{
"name": "HeroActions",
"slug": "hero-actions",
"path": "/blocks/hero-actions"
},
{
"name": "MarketingSectionHeader",
"slug": "marketing-section-header",
"path": "/blocks/marketing-section-header"
},
{
"name": "MetricGrid",
"slug": "metric-grid",
"path": "/blocks/metric-grid"
},
{
"name": "PageHeader",
"slug": "page-header",
"path": "/blocks/page-header"
},
{
"name": "SectionHeader",
"slug": "section-header",
"path": "/blocks/section-header"
},
{
"name": "SplitHero",
"slug": "split-hero",
"path": "/blocks/split-hero"
},
{
"name": "StatsBar",
"slug": "stats-bar",
"path": "/blocks/stats-bar"
}
],
"componentCount": 84,
"categoryCount": 11,
"totalDemoCount": 401,
"totalDemoCount": 346,
"components": [
{
"name": "Accordion",
@@ -14,7 +87,7 @@
"propCount": 17,
"slots": [],
"events": ["change", "open", "close"],
"profiled": false
"profiled": true
},
{
"name": "AdvancedSelect",
@@ -38,44 +111,8 @@
"propCount": 21,
"slots": [],
"events": ["dismiss", "action"],
"profiled": false
},
{
"name": "AnnouncementBar",
"mount": "AnnouncementBar",
"slug": "announcement-bar",
"category": "marketing",
"purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.",
"demoCount": 3,
"propCount": 19,
"slots": [],
"events": ["dismiss"],
"profiled": true
},
{
"name": "AuthForm",
"mount": "AuthForm",
"slug": "auth-form",
"category": "core",
"purpose": "Reusable auth form component.",
"demoCount": 3,
"propCount": 13,
"slots": ["default"],
"events": ["submit", "change", "input", "focus", "blur"],
"profiled": false
},
{
"name": "AuthSplitLayout",
"mount": "AuthSplitLayout",
"slug": "auth-split-layout",
"category": "core",
"purpose": "Reusable auth split layout component.",
"demoCount": 3,
"propCount": 8,
"slots": ["aside-extra", "form"],
"events": [],
"profiled": false
},
{
"name": "Avatar",
"mount": "Avatar",
@@ -119,7 +156,7 @@
"category": "base",
"purpose": "Theme-aware, responsive badge component.",
"demoCount": 3,
"propCount": 22,
"propCount": 23,
"slots": [],
"events": ["dismiss"],
"profiled": false
@@ -131,7 +168,7 @@
"category": "base",
"purpose": "Theme-aware, responsive blockquote component.",
"demoCount": 3,
"propCount": 13,
"propCount": 14,
"slots": ["default"],
"events": [],
"profiled": false
@@ -143,7 +180,7 @@
"category": "navigation",
"purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.",
"demoCount": 3,
"propCount": 12,
"propCount": 13,
"slots": [],
"events": ["select"],
"profiled": true
@@ -155,7 +192,7 @@
"category": "base",
"purpose": "Theme-aware, responsive button component.",
"demoCount": 8,
"propCount": 25,
"propCount": 26,
"slots": ["default"],
"events": ["click", "focus", "blur"],
"profiled": false
@@ -172,27 +209,15 @@
"events": ["click", "select", "change"],
"profiled": false
},
{
"name": "CTASection",
"mount": "CTASection",
"slug": "ctasection",
"category": "marketing",
"purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.",
"demoCount": 3,
"propCount": 25,
"slots": ["default", "actions", "visual", "footer"],
"events": [],
"profiled": true
},
{
"name": "Card",
"mount": "Card",
"slug": "card",
"category": "base",
"purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots.",
"demoCount": 3,
"propCount": 31,
"slots": ["default"],
"demoCount": 7,
"propCount": 41,
"slots": ["header", "default", "footer"],
"events": ["click", "action", "navigate", "dismiss", "load", "error"],
"profiled": true
},
@@ -203,7 +228,7 @@
"category": "base",
"purpose": "Theme-aware, responsive carousel component.",
"demoCount": 3,
"propCount": 22,
"propCount": 23,
"slots": ["default"],
"events": [
"initialize",
@@ -217,7 +242,7 @@
"dragStart",
"dragEnd"
],
"profiled": false
"profiled": true
},
{
"name": "Chart",
@@ -225,11 +250,11 @@
"slug": "chart",
"category": "integrations",
"purpose": "Theme-aware, responsive chart component.",
"demoCount": 3,
"propCount": 12,
"demoCount": 2,
"propCount": 14,
"slots": ["default"],
"events": ["select", "dataPointClick", "legendToggle"],
"profiled": false
"profiled": true
},
{
"name": "ChatBubble",
@@ -262,7 +287,7 @@
"category": "integrations",
"purpose": "Theme-aware, responsive clipboard component.",
"demoCount": 3,
"propCount": 11,
"propCount": 12,
"slots": ["default"],
"events": ["copy", "success", "error"],
"profiled": false
@@ -406,7 +431,7 @@
"propCount": 25,
"slots": [],
"events": ["input", "change", "open", "close", "focus", "blur", "invalid"],
"profiled": false
"profiled": true
},
{
"name": "DeviceFrame",
@@ -450,7 +475,7 @@
"slug": "drawer",
"category": "overlays",
"purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.",
"demoCount": 3,
"demoCount": 4,
"propCount": 20,
"slots": ["trigger", "header", "default", "footer"],
"events": ["open", "close", "cancel"],
@@ -463,47 +488,11 @@
"category": "overlays",
"purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.",
"demoCount": 3,
"propCount": 17,
"propCount": 20,
"slots": ["trigger", "header", "default", "footer"],
"events": ["toggle", "open", "close", "select", "action"],
"profiled": true
},
{
"name": "FeatureCard",
"mount": "FeatureCard",
"slug": "feature-card",
"category": "marketing",
"purpose": "Present one linked feature or service with media, icon, badge, description, and action.",
"demoCount": 3,
"propCount": 28,
"slots": ["media", "icon", "default", "footer"],
"events": [],
"profiled": true
},
{
"name": "FeatureGrid",
"mount": "FeatureGrid",
"slug": "feature-grid",
"category": "layout",
"purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.",
"demoCount": 3,
"propCount": 14,
"slots": ["default"],
"events": [],
"profiled": true
},
{
"name": "FeatureIconCard",
"mount": "FeatureIconCard",
"slug": "feature-icon-card",
"category": "marketing",
"purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.",
"demoCount": 3,
"propCount": 14,
"slots": ["default", "footer"],
"events": [],
"profiled": true
},
{
"name": "FileInput",
"mount": "FileInput",
@@ -514,7 +503,7 @@
"propCount": 21,
"slots": [],
"events": ["input", "change", "focus", "blur", "select", "clear", "invalid"],
"profiled": false
"profiled": true
},
{
"name": "FileUploadProgress",
@@ -523,23 +512,11 @@
"category": "base",
"purpose": "Theme-aware, responsive file upload progress component.",
"demoCount": 3,
"propCount": 13,
"propCount": 14,
"slots": [],
"events": ["cancel", "retry", "complete"],
"profiled": false
},
{
"name": "Footer",
"mount": "Footer",
"slug": "footer",
"category": "layout",
"purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.",
"demoCount": 3,
"propCount": 8,
"slots": ["pre-footer", "post-footer", "copyright-left", "copyright-right"],
"events": ["select", "action"],
"profiled": true
},
{
"name": "Grid",
"mount": "Grid",
@@ -552,30 +529,6 @@
"events": [],
"profiled": true
},
{
"name": "Hero",
"mount": "Hero",
"slug": "hero",
"category": "marketing",
"purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.",
"demoCount": 3,
"propCount": 38,
"slots": ["eyebrow", "actions", "trust", "default", "visual", "footer"],
"events": [],
"profiled": true
},
{
"name": "HeroActions",
"mount": "HeroActions",
"slug": "hero-actions",
"category": "marketing",
"purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.",
"demoCount": 3,
"propCount": 8,
"slots": ["default"],
"events": [],
"profiled": true
},
{
"name": "Image",
"mount": "Image",
@@ -595,7 +548,7 @@
"category": "forms",
"purpose": "Theme-aware, responsive input component.",
"demoCount": 3,
"propCount": 28,
"propCount": 29,
"slots": [],
"events": ["input", "change", "focus", "blur", "invalid", "keydown", "keyup"],
"profiled": false
@@ -654,11 +607,11 @@
"slug": "legend-indicator",
"category": "base",
"purpose": "Theme-aware, responsive legend indicator component.",
"demoCount": 3,
"demoCount": 1,
"propCount": 7,
"slots": ["default"],
"events": ["toggle", "select"],
"profiled": false
"profiled": true
},
{
"name": "Link",
@@ -691,7 +644,7 @@
"category": "base",
"purpose": "Theme-aware, responsive list group component.",
"demoCount": 3,
"propCount": 7,
"propCount": 8,
"slots": ["default"],
"events": ["select", "change"],
"profiled": false
@@ -702,24 +655,12 @@
"slug": "map",
"category": "integrations",
"purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events.",
"demoCount": 3,
"propCount": 7,
"demoCount": 2,
"propCount": 16,
"slots": ["default"],
"events": ["markerClick", "select", "zoom"],
"profiled": true
},
{
"name": "MarketingSectionHeader",
"mount": "MarketingSectionHeader",
"slug": "marketing-section-header",
"category": "marketing",
"purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action.",
"demoCount": 3,
"propCount": 12,
"slots": ["icon", "actions", "default"],
"events": [],
"profiled": true
},
{
"name": "Marquee",
"mount": "Marquee",
@@ -739,9 +680,9 @@
"category": "navigation",
"purpose": "Theme-aware, responsive mega menu component.",
"demoCount": 2,
"propCount": 8,
"propCount": 21,
"slots": ["default"],
"events": ["open", "close", "select"],
"events": ["open", "close", "select", "category"],
"profiled": true
},
{
@@ -756,26 +697,14 @@
"events": ["select", "action"],
"profiled": true
},
{
"name": "MetricGrid",
"mount": "MetricGrid",
"slug": "metric-grid",
"category": "data",
"purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.",
"demoCount": 3,
"propCount": 13,
"slots": ["default"],
"events": ["select", "action"],
"profiled": true
},
{
"name": "Modal",
"mount": "Modal",
"slug": "modal",
"category": "overlays",
"purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.",
"demoCount": 3,
"propCount": 29,
"demoCount": 5,
"propCount": 30,
"slots": ["trigger", "header", "default", "footer"],
"events": ["open", "close", "cancel", "confirm"],
"profiled": true
@@ -799,23 +728,11 @@
"category": "navigation",
"purpose": "Theme-aware, responsive navbar component.",
"demoCount": 3,
"propCount": 13,
"slots": ["topbar", "actions"],
"propCount": 22,
"slots": ["topbar", "brand", "actions", "utilities"],
"events": ["toggle", "open", "close", "select", "action"],
"profiled": true
},
{
"name": "PageHeader",
"mount": "PageHeader",
"slug": "page-header",
"category": "marketing",
"purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.",
"demoCount": 3,
"propCount": 25,
"slots": ["meta", "actions", "default"],
"events": [],
"profiled": true
},
{
"name": "Pagination",
"mount": "Pagination",
@@ -823,7 +740,7 @@
"category": "navigation",
"purpose": "Theme-aware, responsive pagination component.",
"demoCount": 3,
"propCount": 12,
"propCount": 13,
"slots": ["default"],
"events": ["change", "previous", "next"],
"profiled": true
@@ -852,18 +769,6 @@
"events": ["toggle", "open", "close", "action"],
"profiled": true
},
{
"name": "PortalDashboard",
"mount": "PortalDashboard",
"slug": "portal-dashboard",
"category": "core",
"purpose": "Reusable portal dashboard component.",
"demoCount": 3,
"propCount": 14,
"slots": ["hero-action"],
"events": ["action", "navigate"],
"profiled": false
},
{
"name": "PreferenceSwitcher",
"mount": "PreferenceSwitcher",
@@ -871,7 +776,7 @@
"category": "core",
"purpose": "Reusable preference switcher component.",
"demoCount": 3,
"propCount": 9,
"propCount": 16,
"slots": [],
"events": ["theme", "color", "language"],
"profiled": false
@@ -888,18 +793,6 @@
"events": [],
"profiled": false
},
{
"name": "PublicPageShell",
"mount": "PublicPageShell",
"slug": "public-page-shell",
"category": "layout",
"purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.",
"demoCount": 3,
"propCount": 10,
"slots": ["before", "default", "after"],
"events": [],
"profiled": true
},
{
"name": "Radio",
"mount": "Radio",
@@ -918,11 +811,11 @@
"slug": "range-slider",
"category": "forms",
"purpose": "Theme-aware, responsive range slider component.",
"demoCount": 3,
"demoCount": 1,
"propCount": 26,
"slots": [],
"events": ["input", "change", "focus", "blur"],
"profiled": false
"profiled": true
},
{
"name": "Rating",
@@ -931,10 +824,10 @@
"category": "base",
"purpose": "Theme-aware, responsive rating component.",
"demoCount": 3,
"propCount": 7,
"propCount": 12,
"slots": ["default"],
"events": ["input", "change"],
"profiled": false
"profiled": true
},
{
"name": "Scrollspy",
@@ -943,7 +836,7 @@
"category": "navigation",
"purpose": "Theme-aware, responsive scrollspy component.",
"demoCount": 2,
"propCount": 7,
"propCount": 11,
"slots": ["default"],
"events": ["change"],
"profiled": true
@@ -972,18 +865,6 @@
"events": [],
"profiled": true
},
{
"name": "SectionHeader",
"mount": "SectionHeader",
"slug": "section-header",
"category": "layout",
"purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.",
"demoCount": 3,
"propCount": 10,
"slots": ["icon", "default", "actions"],
"events": [],
"profiled": true
},
{
"name": "Select",
"mount": "Select",
@@ -1003,7 +884,7 @@
"category": "navigation",
"purpose": "Theme-aware, responsive sidebar component.",
"demoCount": 2,
"propCount": 8,
"propCount": 10,
"slots": ["default", "drawer"],
"events": ["toggle", "open", "close", "select"],
"profiled": true
@@ -1032,30 +913,6 @@
"events": [],
"profiled": false
},
{
"name": "SplitHero",
"mount": "SplitHero",
"slug": "split-hero",
"category": "marketing",
"purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.",
"demoCount": 3,
"propCount": 31,
"slots": ["default", "actions", "trust", "visual"],
"events": [],
"profiled": true
},
{
"name": "StatsBar",
"mount": "StatsBar",
"slug": "stats-bar",
"category": "data",
"purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.",
"demoCount": 3,
"propCount": 10,
"slots": [],
"events": [],
"profiled": true
},
{
"name": "Stepper",
"mount": "Stepper",
@@ -1063,7 +920,7 @@
"category": "navigation",
"purpose": "Theme-aware, responsive stepper component.",
"demoCount": 5,
"propCount": 16,
"propCount": 17,
"slots": ["step-{index}", "panel-{index}", "default"],
"events": ["change", "back", "next", "skip", "finish"],
"profiled": true
@@ -1075,7 +932,7 @@
"category": "advanced-forms",
"purpose": "Theme-aware, responsive strong password component.",
"demoCount": 6,
"propCount": 27,
"propCount": 29,
"slots": [],
"events": ["input", "change", "strength"],
"profiled": false
@@ -1087,8 +944,8 @@
"category": "base",
"purpose": "Theme-aware, responsive styled icon component.",
"demoCount": 3,
"propCount": 7,
"slots": ["default"],
"propCount": 9,
"slots": [],
"events": [],
"profiled": false
},
@@ -1112,7 +969,7 @@
"purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events.",
"demoCount": 4,
"propCount": 9,
"slots": ["panel-{valueOf(item, index)}", "default"],
"slots": ["default"],
"events": ["change", "select"],
"profiled": true
},
@@ -1146,11 +1003,11 @@
"slug": "time-picker",
"category": "forms",
"purpose": "Theme-aware, responsive time picker component.",
"demoCount": 3,
"demoCount": 1,
"propCount": 26,
"slots": [],
"events": ["input", "change", "focus", "blur", "open", "close", "invalid"],
"profiled": false
"profiled": true
},
{
"name": "Timeline",
@@ -1159,7 +1016,7 @@
"category": "base",
"purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.",
"demoCount": 3,
"propCount": 7,
"propCount": 8,
"slots": ["default"],
"events": ["select"],
"profiled": true
@@ -1195,7 +1052,7 @@
"category": "advanced-forms",
"purpose": "Accessible password field with optional show and hide controls.",
"demoCount": 10,
"propCount": 24,
"propCount": 27,
"slots": [],
"events": ["input", "change", "toggle"],
"profiled": false
@@ -1243,7 +1100,7 @@
"category": "integrations",
"purpose": "Theme-aware, responsive wysiwyg editor component.",
"demoCount": 3,
"propCount": 7,
"propCount": 10,
"slots": ["default"],
"events": ["input", "change", "focus", "blur"],
"profiled": false