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/marquee.wrn
+194 -174
View File
@@ -33,118 +33,123 @@ page MarqueeDetail {
<div class="playground-preview-source" data-playground-preview><Marquee 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;Marquee
title="Marquee example"
description="A polished default marquee for a modern application."
items='[
<span>&#123;</span>
"id": "marquee-0-1",
"key": "marquee-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": "#marquee-demo",
"actionHref": "#marquee-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": "marquee-0-2",
"key": "marquee-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#marquee-demo",
"actionHref": "#marquee-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 MarqueeExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"id": "marquee-0-1",
"key": "marquee-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": "#marquee-demo",
"actionHref": "#marquee-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": "marquee-0-2",
"key": "marquee-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#marquee-demo",
"actionHref": "#marquee-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;Marquee
title="Marquee example"
description="A polished default marquee 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 MarqueeDetail {
<div class="demo-workbench">
<div id="marquee-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"><Marquee size="default" title="Supported capabilities" description="A polished default marquee for a modern application." items='[{"label":"SSR"},{"label":"CSR"},{"label":"Themes"},{"label":"Accessibility"},{"label":"Responsive UI"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Partner and capability strip 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;Marquee
title="Supported capabilities"
description="A polished default marquee for a modern application."
items='[
<span>&#123;</span>
"label": "SSR"
<span>&#125;</span>,
<span>&#123;</span>
"label": "CSR"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Themes"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Accessibility"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Responsive UI"
<span>&#125;</span>
]'
/&gt;</code></pre>
<pre><code>page MarqueeExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "SSR"
<span>&#125;</span>,
<span>&#123;</span>
"label": "CSR"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Themes"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Accessibility"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Responsive UI"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Marquee
title="Supported capabilities"
description="A polished default marquee for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article>
@@ -310,28 +320,33 @@ page MarqueeDetail {
<div class="demo-workbench">
<div id="marquee-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"><Marquee size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"All services operational"},{"label":"New components published"},{"label":"Documentation updated"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact announcement ticker 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;Marquee
size="sm"
title="Compact Marquee"
description="A compact configuration for dashboards and dense product surfaces."
items='[
<span>&#123;</span>
"label": "All services operational"
<span>&#125;</span>,
<span>&#123;</span>
"label": "New components published"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Documentation updated"
<span>&#125;</span>
]'
variant="soft"
/&gt;</code></pre>
<pre><code>page MarqueeExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "All services operational"
<span>&#125;</span>,
<span>&#123;</span>
"label": "New components published"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Documentation updated"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Marquee
size="sm"
title="Compact Marquee"
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>
@@ -343,32 +358,37 @@ page MarqueeDetail {
<div class="demo-workbench">
<div id="marquee-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"><Marquee size="lg" color="info" title="Built for complete digital platforms" description="A richer configuration demonstrating additional content and hierarchy." items='[{"label":"Public portals","icon":"icon-[lucide--landmark]"},{"label":"Enterprise systems","icon":"icon-[lucide--building-2]"},{"label":"Developer tools","icon":"icon-[lucide--code-2]"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Large visual marquee 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;Marquee
size="lg"
color="info"
title="Built for complete digital platforms"
description="A richer configuration demonstrating additional content and hierarchy."
items='[
<span>&#123;</span>
"label": "Public portals",
"icon": "icon-[lucide--landmark]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Enterprise systems",
"icon": "icon-[lucide--building-2]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Developer tools",
"icon": "icon-[lucide--code-2]"
<span>&#125;</span>
]'
variant="raised"
/&gt;</code></pre>
<pre><code>page MarqueeExample <span>&#123;</span>
state items = [
<span>&#123;</span>
"label": "Public portals",
"icon": "icon-[lucide--landmark]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Enterprise systems",
"icon": "icon-[lucide--building-2]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Developer tools",
"icon": "icon-[lucide--code-2]"
<span>&#125;</span>
]
view <span>&#123;</span>
&lt;Marquee
size="lg"
color="info"
title="Built for complete digital platforms"
description="A richer configuration demonstrating additional content and hierarchy."
items="<span>&#123;</span>items<span>&#125;</span>"
variant="raised"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
</div>
</article></div></section>