release: WRNexusJS 0.8.0

2026-08-02 23:18:51 +05:30
parent 87507edf59
commit 586a6db8ff
625 changed files with 243608 additions and 11210 deletions
@@ -0,0 +1,77 @@
+page PlatformShowcase {
+  layout = "public"
+  render = "hybrid"
+  hydrate = "load"
+
+  state active = "Admin"
+
+  view {
+    <main class="platform-showcase">
+      <header>
+        <span class="eyebrow">Reactive primitives</span>
+        <h1>Reactive platform showcase</h1>
+        <p>Switch a dynamic component and verify transition and portal rendering.</p>
+      </header>
+      <section class="showcase-card">
+        <button type="button" @click='active = active === "Admin" ? "Guest" : "Admin"'>Switch component</button>
+        <Transition name="fade">
+          <Component is={active}>
+            <section class="component-case" data-component-case="Admin"><strong>Administrator tools</strong><p>Manage users, permissions, and platform settings.</p></section>
+            <section class="component-case" data-component-case="Guest"><strong>Guest dashboard</strong><p>Explore the public workspace and available resources.</p></section>
+          </Component>
+        </Transition>
+      </section>
+      <div id="showcase-modal" class="portal-target" aria-live="polite"></div>
+      <Portal to="#showcase-modal"><p>Portaled content rendered in its target.</p></Portal>
+    </main>
+  }
+
+  style {
+    .platform-showcase {
+      display: grid;
+      max-width: 58rem;
+      gap: 1.25rem;
+      margin: 3rem auto;
+    }
+
+    .platform-showcase header,
+    .showcase-card,
+    .component-case {
+      display: grid;
+      gap: 0.75rem;
+    }
+
+    .eyebrow {
+      color: var(--wire-color-primary);
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+
+    .showcase-card,
+    .portal-target {
+      padding: 1.25rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-lg);
+      background: var(--wire-color-surface);
+    }
+
+    .showcase-card button {
+      width: fit-content;
+      padding: 0.7rem 1rem;
+      border: 0;
+      border-radius: var(--wire-radius-md);
+      background: var(--wire-color-primary);
+      color: var(--wire-color-primary-contrast);
+      cursor: pointer;
+    }
+
+    .fade-enter-active {
+      animation: platform-fade 180ms ease-out;
+    }
+
+    @keyframes platform-fade {
+      from { opacity: 0; transform: translateY(0.25rem); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  }
+}