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

app/pages/components/nav.wrn
+233 -213
View File
@@ -35,118 +35,123 @@ page NavDetail {
<div class="playground-preview-source" data-playground-preview><Nav color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' label='{playground_label}' collapsible='{playground_collapsible}' toggleLabel='{playground_toggleLabel}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Nav
items='[
<span>&#123;</span>
"id": "nav-0-1",
"key": "nav-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#nav-demo",
"actionHref": "#nav-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "nav-0-2",
"key": "nav-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#nav-demo",
"actionHref": "#nav-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
label="Nav"
toggleLabel="Nav"
/&gt;</code></pre>
<pre><code data-playground-code>page NavExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"id": "nav-0-1",
"key": "nav-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#nav-demo",
"actionHref": "#nav-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "nav-0-2",
"key": "nav-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#nav-demo",
"actionHref": "#nav-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Nav
items="<span>&#123;</span>items<span>&#125;</span>"
label="Nav"
toggleLabel="Nav"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -275,41 +280,46 @@ page NavDetail {
<div class="demo-workbench">
<div id="nav-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Nav size="default" items='[{"label":"Home","href":"/","value":"home","icon":"icon-[lucide--house]"},{"label":"Inbox","href":"/inbox","value":"inbox","badge":"9"},{"label":"Reports","href":"/reports","value":"reports"},{"label":"Archive","href":"/archive","value":"archive","disabled":true}]' active="inbox" label="Nav" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Horizontal links usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Nav
items='[
<span>&#123;</span>
"label": "Home",
"href": "/",
"value": "home",
"icon": "icon-[lucide--house]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Inbox",
"href": "/inbox",
"value": "inbox",
"badge": "9"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Reports",
"href": "/reports",
"value": "reports"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Archive",
"href": "/archive",
"value": "archive",
"disabled": true
<span>&#125;</span>
]'
active="inbox"
label="Nav"
toggleLabel="Nav"
/&gt;</code></pre>
<pre><code>page NavExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Home",
"href": "/",
"value": "home",
"icon": "icon-[lucide--house]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Inbox",
"href": "/inbox",
"value": "inbox",
"badge": "9"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Reports",
"href": "/reports",
"value": "reports"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Archive",
"href": "/archive",
"value": "archive",
"disabled": true
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Nav
items="<span>&#123;</span>items<span>&#125;</span>"
active="inbox"
label="Nav"
toggleLabel="Nav"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -321,51 +331,56 @@ page NavDetail {
<div class="demo-workbench">
<div id="nav-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Nav size="sm" items='[{"label":"Home","href":"/","value":"home"},{"label":"Products","value":"products","items":[{"label":"Overview","href":"/p","value":"p-overview"},{"label":"Platform","value":"p-platform","items":[{"label":"Runtime","href":"/p/runtime","value":"runtime"},{"label":"Compiler","href":"/p/compiler","value":"compiler"}]}]}]' active="p-overview" label="Compact example" collapsible="true" toggleLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Nested submenus usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Nav
size="sm"
items='[
<span>&#123;</span>
"label": "Home",
"href": "/",
"value": "home"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Products",
"value": "products",
"items": [
<span>&#123;</span>
"label": "Overview",
"href": "/p",
"value": "p-overview"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Platform",
"value": "p-platform",
"items": [
<span>&#123;</span>
"label": "Runtime",
"href": "/p/runtime",
"value": "runtime"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Compiler",
"href": "/p/compiler",
"value": "compiler"
<span>&#125;</span>
]
<span>&#125;</span>
]
<span>&#125;</span>
]'
active="p-overview"
label="Compact example"
toggleLabel="Compact example"
/&gt;</code></pre>
<pre><code>page NavExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Home",
"href": "/",
"value": "home"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Products",
"value": "products",
"items": [
<span>&#123;</span>
"label": "Overview",
"href": "/p",
"value": "p-overview"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Platform",
"value": "p-platform",
"items": [
<span>&#123;</span>
"label": "Runtime",
"href": "/p/runtime",
"value": "runtime"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Compiler",
"href": "/p/compiler",
"value": "compiler"
<span>&#125;</span>
]
<span>&#125;</span>
]
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Nav
size="sm"
items="<span>&#123;</span>items<span>&#125;</span>"
active="p-overview"
label="Compact example"
toggleLabel="Compact example"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -377,39 +392,44 @@ page NavDetail {
<div class="demo-workbench">
<div id="nav-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Nav size="lg" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"label":"Team","href":"/team","value":"team","icon":"icon-[lucide--users]"},{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]' active="team" orientation="vertical" label="Advanced example" collapsible="false" toggleLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Vertical rail usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Nav
size="lg"
items='[
<span>&#123;</span>
"label": "Dashboard",
"href": "/",
"value": "dash",
"icon": "icon-[lucide--gauge]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Team",
"href": "/team",
"value": "team",
"icon": "icon-[lucide--users]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Settings",
"href": "/settings",
"value": "settings",
"icon": "icon-[lucide--settings]"
<span>&#125;</span>
]'
active="team"
orientation="vertical"
label="Advanced example"
collapsible="false"
toggleLabel="Advanced example"
/&gt;</code></pre>
<pre><code>page NavExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Dashboard",
"href": "/",
"value": "dash",
"icon": "icon-[lucide--gauge]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Team",
"href": "/team",
"value": "team",
"icon": "icon-[lucide--users]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Settings",
"href": "/settings",
"value": "settings",
"icon": "icon-[lucide--settings]"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Nav
size="lg"
items="<span>&#123;</span>items<span>&#125;</span>"
active="team"
orientation="vertical"
label="Advanced example"
collapsible="false"
toggleLabel="Advanced example"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article></div></section>