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

- 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>
2026-09-30 16:50:22 +05:30
1 parent bec9ef2889
commit c0ac38c572
@@ -0,0 +1,34 @@
+// Composed reference using the shipped UI components.
+page DesignProfile {
+  state saved = false
+  seo {
+    title = "Workspace example"
+  }
+  view {
+    <div class="workspace-preview">
+      <header class="workspace-topbar">
+        <a class="workspace-brand" href="/preview/workspace"><span class="workspace-mark">W</span>WRNexus<span class="workspace-preview-label">Example</span></a>
+        <nav aria-label="Preview tools"><a href="/components/button">Components</a><button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"><span class="icon-[lucide--sun]" aria-hidden="true"></span></button><button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"><span class="icon-[lucide--moon]" aria-hidden="true"></span></button><span class="workspace-avatar" aria-label="Sample user">JD</span></nav>
+      </header>
+        <div class="workspace-shell">
+          <aside class="workspace-sidebar">
+            <div class="workspace-organization"><span class="workspace-avatar">S</span><div><strong>Studio workspace</strong><small>Personal account</small></div></div>
+            <nav aria-label="Workspace preview"><span class="workspace-nav-label">WORKSPACE</span><a href="/preview/workspace" aria-current="false"><span class="icon-[lucide--layout-dashboard]" aria-hidden="true"></span>Overview</a><a href="/preview/profile" aria-current="page"><span class="icon-[lucide--user-round]" aria-hidden="true"></span>Profile &amp; preferences</a><a href="/preview/sign-in"><span class="icon-[lucide--log-in]" aria-hidden="true"></span>Sign in preview</a></nav>
+            <a class="workspace-library-link" href="/">Browse component library <span aria-hidden="true">↗</span></a>
+          </aside>
+          <main class="workspace-main">
+
+              <PageHeader title="Profile & preferences" description="The details that make this workspace yours." variant="minimal" borderBottom="false" maxWidth="full" />
+              <form class="workspace-settings" @submit="event.preventDefault(); saved = true">
+                <section class="workspace-settings-section"><div><h2>Personal details</h2><p>How you appear to your team.</p></div><div class="workspace-fields"><div class="workspace-field-row"><Input id="preview-first" name="firstName" label="First name" value="Jamie" required="true" /><Input id="preview-last" name="lastName" label="Last name" value="Davis" required="true" /></div><Input id="profile-email" name="email" label="Email address" type="email" value="jamie@example.com" required="true" /><Input id="preview-role" name="role" label="Role" value="Product designer" /></div></section>
+                <section class="workspace-settings-section"><div><h2>Notifications</h2><p>Choose what you want to hear about.</p></div><div class="workspace-fields"><Checkbox name="updates" label="Product updates" description="New features and improvements to your workspace." checked="true" /><Checkbox name="activity" label="Workspace activity" description="Invitations and important team updates." checked="true" /></div></section>
+                <div class="workspace-settings-actions"><span role="status">{saved ? "Preview saved. No account data was changed." : "Changes apply to this preview only."}</span><Button label="Save changes" type="submit" /></div>
+              </form>
+
+            <footer class="workspace-footer"><span>© 2026 WRNexus</span><span>Sample workspace · Light &amp; dark preview</span></footer>
+          </main>
+        </div>
+
+    </div>
+  }
+}
@@ -0,0 +1,30 @@
+// Composed reference using the shipped UI components.
+page DesignLogin {
+  state saved = false
+  seo {
+    title = "Workspace example"
+  }
+  view {
+    <div class="workspace-preview">
+      <header class="workspace-topbar">
+        <a class="workspace-brand" href="/preview/workspace"><span class="workspace-mark">W</span>WRNexus<span class="workspace-preview-label">Example</span></a>
+        <nav aria-label="Preview tools"><a href="/components/button">Components</a><button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"><span class="icon-[lucide--sun]" aria-hidden="true"></span></button><button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"><span class="icon-[lucide--moon]" aria-hidden="true"></span></button><span class="workspace-avatar" aria-label="Sample user">JD</span></nav>
+      </header>
+        <main class="workspace-login">
+          <section class="workspace-login-form" aria-label="Sign in preview">
+            <span class="workspace-kicker">YOUR WORKSPACE, CONNECTED</span>
+            <h1>Welcome back</h1><p>Sign in to manage your workspace.</p>
+            <form @submit="event.preventDefault(); saved = true">
+              <Input id="preview-email" name="email" label="Email address" type="email" placeholder="you@company.com" required="true" />
+              <TogglePassword id="preview-password" name="password" label="Password" placeholder="Enter your password" required="true" />
+              <Button type="submit" label="Sign in" fullWidth="true" />
+            </form>
+            {#if saved}<p class="workspace-feedback" role="status">Preview complete. No sign-in request was sent.</p>{/if}
+            <a href="/preview/workspace">Explore the workspace preview <span aria-hidden="true">→</span></a>
+          </section>
+          <aside class="workspace-login-aside"><span class="workspace-kicker">BUILT FOR YOUR EVERYDAY</span><h2>A little less busy.<br />A lot more focused.</h2><p>Your team, services, and account.<br />Together in one thoughtful workspace.</p><div class="workspace-login-lines" aria-hidden="true"></div><small>One identity. Every workspace.</small></aside>
+        </main>
+
+    </div>
+  }
+}
@@ -0,0 +1,35 @@
+// Composed reference using the shipped UI components.
+page DesignSystem {
+  state saved = false
+  seo {
+    title = "Workspace example"
+  }
+  view {
+    <div class="workspace-preview">
+      <header class="workspace-topbar">
+        <a class="workspace-brand" href="/preview/workspace"><span class="workspace-mark">W</span>WRNexus<span class="workspace-preview-label">Example</span></a>
+        <nav aria-label="Preview tools"><a href="/components/button">Components</a><button type="button" data-design-mode="light" data-wrn-theme-set="light" aria-label="Light theme"><span class="icon-[lucide--sun]" aria-hidden="true"></span></button><button type="button" data-design-mode="dark" data-wrn-theme-set="dark" aria-label="Dark theme"><span class="icon-[lucide--moon]" aria-hidden="true"></span></button><span class="workspace-avatar" aria-label="Sample user">JD</span></nav>
+      </header>
+        <div class="workspace-shell">
+          <aside class="workspace-sidebar">
+            <div class="workspace-organization"><span class="workspace-avatar">S</span><div><strong>Studio workspace</strong><small>Personal account</small></div></div>
+            <nav aria-label="Workspace preview"><span class="workspace-nav-label">WORKSPACE</span><a href="/preview/workspace" aria-current="page"><span class="icon-[lucide--layout-dashboard]" aria-hidden="true"></span>Overview</a><a href="/preview/profile" aria-current="false"><span class="icon-[lucide--user-round]" aria-hidden="true"></span>Profile &amp; preferences</a><a href="/preview/sign-in"><span class="icon-[lucide--log-in]" aria-hidden="true"></span>Sign in preview</a></nav>
+            <a class="workspace-library-link" href="/">Browse component library <span aria-hidden="true">↗</span></a>
+          </aside>
+          <main class="workspace-main">
+
+              <PageHeader title="Your workspace" description="Everything you need to keep moving, in one place." variant="minimal" borderBottom="false" maxWidth="full" />
+              <section class="workspace-welcome"><span class="workspace-avatar workspace-avatar--large">JD</span><div><h2>Good morning, Jamie</h2><p>Here’s what’s happening with your account.</p></div><Button label="Edit profile" href="/preview/profile" variant="secondary" size="sm" /></section>
+              <section class="workspace-metrics" aria-label="Account summary"><MetricCard label="Workspaces" value="3" description="One place for every project" hover="none" /><MetricCard label="Team members" value="12" description="Working better, together" hover="none" /><MetricCard label="Connected services" value="4" description="All services operational" hover="none" /><MetricCard label="Account security" value="Protected" description="Two-step verification enabled" hover="none" class="workspace-security-metric" /></section>
+              <div class="workspace-overview-grid">
+                <section class="workspace-section"><header><div><h2>Make yourself at home</h2><p>A few small steps to get your workspace ready.</p></div><span class="workspace-status">2 of 3 complete</span></header><div class="workspace-steps"><div><span class="workspace-step-icon workspace-step-icon--done">✓</span><div><strong>Complete your profile</strong><p>Your team knows who you are.</p></div><span class="workspace-muted">Done</span></div><div><span class="workspace-step-icon workspace-step-icon--done">✓</span><div><strong>Secure your account</strong><p>An extra layer of protection is enabled.</p></div><span class="workspace-muted">Done</span></div><div><span class="workspace-step-icon">3</span><div><strong>Invite your team</strong><p>Bring the right people into your workspace.</p></div><Modal triggerLabel="Invite member" title="Invite a teammate" description="A shared workspace starts with your team." confirmLabel="Done" closeOnConfirm="true"><div class="workspace-fields"><Input id="invite-email" name="inviteEmail" type="email" label="Email address" placeholder="teammate@company.com" /><p class="workspace-muted">This is a design preview. No invitation will be sent.</p></div></Modal></div></div></section>
+                <section class="workspace-section"><header><div><h2>Account status</h2><p>A little peace of mind.</p></div><span class="icon-[lucide--shield-check] workspace-status-icon" aria-hidden="true"></span></header><dl class="workspace-status-list"><div><dt>Email address</dt><dd>Verified</dd></div><div><dt>Two-step verification</dt><dd>Enabled</dd></div><div><dt>Recovery method</dt><dd>Added</dd></div></dl><a class="workspace-text-link" href="/preview/profile">Manage your preferences <span aria-hidden="true">→</span></a></section>
+              </div>
+              <section class="workspace-services"><header><h2>Your services</h2><p>Simple tools for the work that matters.</p></header><div class="workspace-service-grid"><Card title="Business email" description="A professional inbox for every conversation." icon="icon-[lucide--mail]" actionLabel="Explore forms" actionHref="/forms" /><Card title="Team workspace" description="Keep your people and projects connected." icon="icon-[lucide--users]" actionLabel="Explore tables" actionHref="/components/data-table" /><Card title="Scheduling" description="Make room for your next great idea." icon="icon-[lucide--calendar-days]" actionLabel="Explore calendar" actionHref="/components/date-picker" /></div></section>
+            <footer class="workspace-footer"><span>© 2026 WRNexus</span><span>Sample workspace · Light &amp; dark preview</span></footer>
+          </main>
+        </div>
+
+    </div>
+  }
+}