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/list.wrn
+196 -176
View File
@@ -33,118 +33,123 @@ page ListDetail {
<div class="playground-preview-source" data-playground-preview><List size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' 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;List
title="List example"
description="A polished default list for a modern application."
items='[
<span>&#123;</span>
"id": "list-0-1",
"key": "list-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": "#list-demo",
"actionHref": "#list-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": "list-0-2",
"key": "list-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#list-demo",
"actionHref": "#list-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>
]'
/&gt;</code></pre>
<pre><code data-playground-code>page ListExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"id": "list-0-1",
"key": "list-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": "#list-demo",
"actionHref": "#list-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": "list-0-2",
"key": "list-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#list-demo",
"actionHref": "#list-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;List
title="List example"
description="A polished default list for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
/&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>
@@ -273,32 +278,37 @@ page ListDetail {
<div class="demo-workbench">
<div id="list-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"><List size="default" title="Citizen resources" description="Commonly requested public information." items='[{"label":"Report crime","href":"#report","icon":"icon-[lucide--shield-alert]"},{"label":"Track complaint","href":"#track","icon":"icon-[lucide--scan-search]"},{"label":"Certificates","href":"#certificates","icon":"icon-[lucide--file-check-2]"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Linked resource list 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;List
title="Citizen resources"
description="Commonly requested public information."
items='[
<span>&#123;</span>
"label": "Report crime",
"href": "#report",
"icon": "icon-[lucide--shield-alert]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Track complaint",
"href": "#track",
"icon": "icon-[lucide--scan-search]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Certificates",
"href": "#certificates",
"icon": "icon-[lucide--file-check-2]"
<span>&#125;</span>
]'
/&gt;</code></pre>
<pre><code>page ListExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Report crime",
"href": "#report",
"icon": "icon-[lucide--shield-alert]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Track complaint",
"href": "#track",
"icon": "icon-[lucide--scan-search]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Certificates",
"href": "#certificates",
"icon": "icon-[lucide--file-check-2]"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;List
title="Citizen resources"
description="Commonly requested public information."
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -310,31 +320,36 @@ page ListDetail {
<div class="demo-workbench">
<div id="list-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"><List size="sm" title="Current status" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"Application received","status":"Complete"},{"label":"Verification","status":"In progress"},{"label":"Decision","status":"Pending"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact status list 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;List
size="sm"
title="Current status"
description="A compact configuration for dashboards and dense product surfaces."
items='[
<span>&#123;</span>
"label": "Application received",
"status": "Complete"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Verification",
"status": "In progress"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Decision",
"status": "Pending"
<span>&#125;</span>
]'
variant="soft"
/&gt;</code></pre>
<pre><code>page ListExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Application received",
"status": "Complete"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Verification",
"status": "In progress"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Decision",
"status": "Pending"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;List
size="sm"
title="Current status"
description="A compact configuration for dashboards and dense product surfaces."
items="<span>&#123;</span>items<span>&#125;</span>"
variant="soft"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -346,31 +361,36 @@ page ListDetail {
<div class="demo-workbench">
<div id="list-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"><List size="lg" title="Service requests" description="Recent requests and their current status." items='[{"label":"Address verification","description":"Submitted yesterday","status":"Review","href":"#request-1"},{"label":"Character certificate","description":"Submitted 3 days ago","status":"Approved","href":"#request-2"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Rich action list 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;List
size="lg"
title="Service requests"
description="Recent requests and their current status."
items='[
<span>&#123;</span>
"label": "Address verification",
"description": "Submitted yesterday",
"status": "Review",
"href": "#request-1"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Character certificate",
"description": "Submitted 3 days ago",
"status": "Approved",
"href": "#request-2"
<span>&#125;</span>
]'
variant="raised"
/&gt;</code></pre>
<pre><code>page ListExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Address verification",
"description": "Submitted yesterday",
"status": "Review",
"href": "#request-1"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Character certificate",
"description": "Submitted 3 days ago",
"status": "Approved",
"href": "#request-2"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;List
size="lg"
title="Service requests"
description="Recent requests and their current status."
items="<span>&#123;</span>items<span>&#125;</span>"
variant="raised"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article></div></section>