Preact authoring.
Compiler-level work.

import { signal, useComputed, useSignalEffect } from "@preact/signals";
import { useState } from "preact/hooks";
import { StatCard } from "./StatCard.tsx";

interface DemoRow {
  id: number;
  label: string;
}

interface DemoProps {
  rows: DemoRow[];
  compiled: {
    excerpt: string;
    full: string;
    lines: number;
    bytes: string;
  };
  stats: {
    upstream: string;
    compatibility: string;
    bundle: string;
    hydration: string;
    targets: string;
  };
  source: string;
  sourceLines: number;
  nextId(): number;
  onCommit(rows: number): void;
}

export function App({
  rows: initialRows,
  compiled,
  stats,
  source,
  sourceLines,
  nextId,
  onCommit
}: DemoProps) {
  const [count, setCount] = useState(0);
  const rows = signal(initialRows);
  const selected = signal(initialRows[0].id);
  const showFullOutput = signal(false);
  const rowCount = useComputed(() => rows.value.length);
  const compiledOutput = useComputed(() =>
    showFullOutput.value ? compiled.full : compiled.excerpt
  );
  const outputLabel = useComputed(() =>
    showFullOutput.value ? "Show focused excerpts" : "Show full emitted module"
  );

  useSignalEffect(() => {
    onCommit(rowCount.value);
  });

  return (
    <main className="showcase">
      <section className="hero">
        <div className="eyebrow">Rust + Oxc + direct DOM</div>
        <h1>Preact authoring.<br />Compiler-level work.</h1>
        <p className="lede">
          This page was rendered to HTML, hydrated, and made interactive by the
          compiler itself. No VDOM runtime ships in the browser bundle.
        </p>
        <div className="hero-actions">
          <button id="increment" className="primary" onClick={() => setCount(count + 1)}>
            Hook updates: {count}
          </button>
          <span id="hydration-result" className="runtime-status">
            Server HTML ready · hydration pending
          </span>
        </div>
      </section>

      <section className="stats" aria-label="Verified project statistics">
        <StatCard
          value={stats.upstream}
          label="upstream cases"
          detail="independently compiled"
        />
        <StatCard
          value={stats.compatibility}
          label="attributed behaviors"
          detail="exact pinned titles"
        />
        <StatCard
          value={stats.bundle}
          label="browser bundle"
          detail="Brotli compressed"
        />
        <StatCard
          value={stats.hydration}
          label="hydration model"
          detail="shared template shape"
        />
      </section>

      <section className="demo-grid">
        <article className="interactive-panel">
          <div className="section-heading">
            <div>
              <span className="section-kicker">Live compiled component</span>
              <h2>Keyed rows, direct updates</h2>
            </div>
            <strong className="row-count">{rowCount.value} rows</strong>
          </div>

          <div className="toolbar">
            <button
              id="add-row"
              onClick={() =>
                rows.value = rows.value.concat({
                  id: nextId(),
                  label: `Compiled row ${rows.value.length + 1}`
                })
              }
            >
              Add row
            </button>
            <button
              id="rotate-rows"
              onClick={() =>
                rows.value = rows.value.length > 1
                  ? rows.value.slice(1).concat(rows.value[0])
                  : rows.value
              }
            >
              Rotate identity
            </button>
          </div>

          <ul id="compiled-rows" className="compiled-rows">
            {rows.value.map(row => (
              <li
                key={row.id}
                data-id={row.id}
                className={selected.value === row.id ? "selected" : ""}
              >
                <button
                  className="row-select"
                  onClick={() => selected.value = row.id}
                >
                  <span>{row.label}</span>
                  <small>key {row.id}</small>
                </button>
                <button
                  className="row-remove"
                  aria-label={`Remove ${row.label}`}
                  onClick={() =>
                    rows.value = rows.value.filter(item => item.id !== row.id)
                  }
                >
                  ×
                </button>
              </li>
            ))}
          </ul>
        </article>

        <aside className="proof-panel">
          <span className="section-kicker">What this proves</span>
          <h2>One authored component, three real paths</h2>
          <ol>
            <li><strong>Compile</strong><span>Oxc lowers TSX into direct DOM instructions.</span></li>
            <li><strong>Render</strong><span>The same create path emits the server HTML you loaded.</span></li>
            <li><strong>Hydrate</strong><span>Existing nodes are claimed before exact bindings attach.</span></li>
          </ol>
          <div className="target-row">
            <span>Targets</span>
            <code>{stats.targets}</code>
          </div>
        </aside>
      </section>

      <section className="compiler-panel">
        <div className="compiler-heading">
          <div>
            <span className="section-kicker">Compiler x-ray</span>
            <h2>Authored TSX becomes direct DOM work</h2>
          </div>
          <p>
            Both panes come from this build. The right side is the Rust compiler's
            emitted JavaScript—not a hand-written approximation.
          </p>
        </div>

        <div className="compiler-flow">
          <article className="code-card">
            <header>
              <div>
                <span>Input</span>
                <strong>demo/src/App.tsx</strong>
              </div>
              <small>{sourceLines} lines</small>
            </header>
            <pre><code>{source}</code></pre>
          </article>

          <div className="compile-arrow" aria-hidden="true">→</div>

          <article className="code-card emitted-code">
            <header>
              <div>
                <span>Rust / Oxc output</span>
                <strong>App.compiled.mjs</strong>
              </div>
              <small>{compiled.lines} lines · {compiled.bytes}</small>
            </header>
            <pre id="compiled-output"><code>{compiledOutput.value}</code></pre>
            <button
              id="toggle-compiled-output"
              className="output-toggle"
              onClick={() => showFullOutput.value = !showFullOutput.value}
            >
              {outputLabel.value}
            </button>
          </article>
        </div>
      </section>
    </main>
  );
}