@synetics/ui 0.7.0-alpha

package/src/showcase/routing/components/guard-demo.syn

@@ -0,0 +1,75 @@
+/**
+ * Guard Demo
+ * router.beforeEach(guard) — block navigation when form is dirty
+ * B-03 resolved: API is beforeEach, NOT beforeNavigate
+ */
+
+import { createSignal, useRouter, onCleanup, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+export component GuardDemo() {
+  const router = useRouter();
+  const [isDirty, setIsDirty] = createSignal(false);
+  const [blocked, setBlocked] = createSignal(false);
+  const [navLog, setNavLog] = createSignal<string[]>([]);
+
+  const ts = () => new Date().toLocaleTimeString('en-US', { hour12: false });
+  const log = (msg: string) => setNavLog((prev) => [`[${ts()}] ${msg}`, ...prev].slice(0, 8));
+
+  // Register guard — returns an unsubscribe fn
+  const unsubscribe = router.beforeEach((to, from) => {
+    if (isDirty()) {
+      setBlocked(true);
+      log(`🚫 BLOCKED: ${from} → ${to} (form is dirty)`);
+      return false;
+    }
+    setBlocked(false);
+    log(`✅ ALLOWED: ${from} → ${to}`);
+    return true;
+  });
+
+  onCleanup(unsubscribe);
+
+  const tryNavigate = async () => {
+    await router.navigate('/showcase/routing/guard-target');
+  };
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">5️⃣ Navigation Guard — beforeEach</h3>
+      <p class="demo-desc">
+        <code>router.beforeEach((to, from) ={'>'} boolean)</code> — returning <code>false</code> cancels navigation.
+        Guard removed via the returned unsubscribe function on cleanup.
+      </p>
+
+      <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;">
+        <label style="display: flex; align-items: center; gap: 8px; color: #e5e7eb; cursor: pointer;">
+          <input
+            type="checkbox"
+            checked={isDirty()}
+            onChange={(e) => setIsDirty((e.target as HTMLInputElement).checked)}
+          />
+          <span>Simulate dirty form</span>
+        </label>
+
+        <button class="submit-btn" onClick={tryNavigate}>
+          Navigate → /showcase/routing/guard-target
+        </button>
+      </div>
+
+      <div class="state-panel" style="margin-bottom: 8px;">
+        <span class={`badge ${isDirty() ? 'badge--on' : 'badge--off'}`} style="margin-right: 8px;">
+          {isDirty() ? '✏️ dirty' : '✔ clean'}
+        </span>
+        <Show when={blocked()}>
+          <span class="badge badge--on" style="background: #7f1d1d; color: #fca5a5;">🚫 last navigation blocked</span>
+        </Show>
+      </div>
+
+      <Show when={navLog().length > 0}>
+        <pre class="result-pre" style="font-size: 11px; max-height: 120px; overflow-y: auto;">
+          {navLog().join('\n')}
+        </pre>
+      </Show>
+    </div>
+  );
+}

package/src/showcase/routing/components/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Routing Components Index
+ */
+
+export { GuardDemo } from './guard-demo.syn';
+export { NavigationDemo } from './navigation-demo.syn';
+export { NestedOutletDemo } from './nested-outlet-demo.syn';
+export { ParamsDemo } from './params-demo.syn';
+export { QueryDemo } from './query-demo.syn';

package/src/showcase/routing/components/navigation-demo.syn

@@ -0,0 +1,47 @@
+/**
+ * Navigation Demo
+ * router.navigate(path) · history back/forward
+ */
+
+import { createSignal, useRouter, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+export component NavigationDemo() {
+  const router = useRouter();
+  const [navLog, setNavLog] = createSignal<string[]>([]);
+
+  const ts = () => new Date().toLocaleTimeString('en-US', { hour12: false });
+
+  const go = async (path: string) => {
+    setNavLog((prev) => [`[${ts()}] navigate("${path}")`, ...prev].slice(0, 8));
+    await router.navigate(path);
+    setNavLog((prev) => [`[${ts()}] ✅ now at: ${router.location.pathname}`, ...prev].slice(0, 8));
+  };
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">1️⃣ Programmatic Navigate</h3>
+      <p class="demo-desc">
+        <code>router.navigate(path)</code> — returns a <code>Promise</code> that resolves after transition.
+      </p>
+
+      <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;">
+        {['/showcase/routing', '/showcase/home', '/showcase/about', '/showcase/routing/params'].map((p) => (
+          <button class="submit-btn" onClick={() => go(p)} style="font-size: 12px; padding: 6px 10px;">
+            → {p}
+          </button>
+        ))}
+      </div>
+
+      <div class="state-panel">
+        <strong style="color: #94a3b8; font-size: 12px;">Current path</strong>
+        <p style="color: #60a5fa; font-family: monospace;">{router.location.pathname}</p>
+      </div>
+
+      <Show when={navLog().length > 0}>
+        <pre class="result-pre" style="font-size: 11px; max-height: 120px; overflow-y: auto;">
+          {navLog().join('\n')}
+        </pre>
+      </Show>
+    </div>
+  );
+}

package/src/showcase/routing/components/nested-outlet-demo.syn

@@ -0,0 +1,73 @@
+/**
+ * Nested Outlet Demo
+ * Parent route renders <Outlet /> — child routes render into the outlet slot
+ * Demonstrates multi-level routing composition
+ */
+
+import { createSignal, useRouter, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+const ChildOne = () => (
+  <div style="padding: 12px; background: #0f172a; border-radius: 6px; border-left: 3px solid #34d399;">
+    <strong style="color: #34d399;">Child Route A</strong>
+    <p style="color: #9ca3af; font-size: 13px; margin-top: 4px;">Rendered inside the parent {"<Outlet />"} slot</p>
+  </div>
+);
+
+const ChildTwo = () => (
+  <div style="padding: 12px; background: #0f172a; border-radius: 6px; border-left: 3px solid #f59e0b;">
+    <strong style="color: #f59e0b;">Child Route B</strong>
+    <p style="color: #9ca3af; font-size: 13px; margin-top: 4px;">Swapped reactively — parent layout stays intact</p>
+  </div>
+);
+
+const ParentLayout = (props: { children: JSX.Element }) => (
+  <div style="padding: 16px; background: #1e293b; border-radius: 8px; border: 1px solid #334155;">
+    <p style="color: #60a5fa; font-size: 13px; margin-bottom: 12px;">
+      📐 Parent layout (persistent) — active child renders below ↓
+    </p>
+    {props.children}
+  </div>
+);
+
+export component NestedOutletDemo() {
+  const router = useRouter();
+  const [active, setActive] = createSignal<'a' | 'b' | null>(null);
+
+  const go = async (child: 'a' | 'b') => {
+    setActive(child);
+    await router.navigate(`/showcase/routing/nested/${child}`);
+  };
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">4️⃣ Nested Outlet</h3>
+      <p class="demo-desc">
+        Parent component keeps its layout. Children swap reactively inside it.
+        Switching children does NOT unmount the parent.
+      </p>
+
+      <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+        <button class="submit-btn" onClick={() => go('a')} style={active() === 'a' ? 'outline: 2px solid #34d399;' : ''}>
+          Child A
+        </button>
+        <button class="submit-btn" onClick={() => go('b')} style={active() === 'b' ? 'outline: 2px solid #f59e0b;' : ''}>
+          Child B
+        </button>
+      </div>
+
+      <ParentLayout>
+        <Show when={active() === 'a'}>
+          <ChildOne />
+        </Show>
+        <Show when={active() === 'b'}>
+          <ChildTwo />
+        </Show>
+      </ParentLayout>
+
+      <p style="color: #6b7280; font-size: 12px; margin-top: 8px;">
+        Active child: <code style="color: #e5e7eb;">{active() ?? 'none'}</code>
+        — path: <code style="color: #e5e7eb;">{router.location.pathname}</code>
+      </p>
+    </div>
+  );
+}

package/src/showcase/routing/components/params-demo.syn

@@ -0,0 +1,54 @@
+/**
+ * Params Demo
+ * useRoute() — currentParams reactive on path change
+ * Simulates /user/:id navigation and reads params.id
+ */
+
+import { createSignal, useRouter, useParams, createEffect, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+export component ParamsDemo() {
+  const router = useRouter();
+  const [paramHistory, setParamHistory] = createSignal<string[]>([]);
+
+  const ids = [1, 2, 3, 42, 99];
+
+  const navigateTo = async (id: number) => {
+    await router.navigate(`/showcase/routing/user/${id}`);
+  };
+
+  createEffect(() => {
+    const params = useParams();
+    if (params?.id) {
+      const ts = new Date().toLocaleTimeString('en-US', { hour12: false });
+      setParamHistory((prev) => [`[${ts}] id = ${params.id}`, ...prev].slice(0, 8));
+    }
+  });
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">2️⃣ Route Params — /user/:id</h3>
+      <p class="demo-desc">
+        <code>useParams()</code> — reactive on every navigation.
+      </p>
+
+      <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+        {ids.map((id) => (
+          <button class="submit-btn" onClick={() => navigateTo(id)} style="font-size: 12px;">
+            id={id}
+          </button>
+        ))}
+      </div>
+
+      <div class="state-panel" style="margin-bottom: 8px;">
+        <strong style="color: #94a3b8; font-size: 12px;">Current params</strong>
+        <pre class="result-pre">{JSON.stringify(useParams(), null, 2)}</pre>
+      </div>
+
+      <Show when={paramHistory().length > 0}>
+        <pre class="result-pre" style="font-size: 11px; max-height: 100px; overflow-y: auto;">
+          {paramHistory().join('\n')}
+        </pre>
+      </Show>
+    </div>
+  );
+}

package/src/showcase/routing/components/query-demo.syn

@@ -0,0 +1,63 @@
+/**
+ * Query Params Demo
+ * useSearchParams() — [get, set] tuple, reactive read/write
+ */
+
+import { createSignal, useLocation, useSearchParams, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+export component QueryDemo() {
+  const location = useLocation();
+  const [, setSearch] = useSearchParams();
+  const [inputVal, setInputVal] = createSignal('');
+
+  const applyQuery = () => {
+    const q = inputVal().trim();
+    if (!q) return;
+    setSearch({ q, page: '1' });
+  };
+
+  const clearQuery = () => {
+    setSearch({});
+    setInputVal('');
+  };
+
+  // Derive a plain object from the reactive location.search string for display.
+  // location.search is a reactive getter — updates whenever the URL changes.
+  const currentParams = () => {
+    const raw = location.search;
+    if (!raw || raw === '?') return {};
+    return Object.fromEntries(new URLSearchParams(raw.replace(/^\?/, '')));
+  };
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">3️⃣ Search Params</h3>
+      <p class="demo-desc">
+        <code>useSearchParams()</code> returns a reactive <code>[get, set]</code> tuple.
+        Changes update <code>window.location.search</code> without navigation.
+      </p>
+
+      <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+        <input
+          class="field-input"
+          type="text"
+          placeholder="search term…"
+          value={inputVal()}
+          onInput={(e) => setInputVal((e.target as HTMLInputElement).value)}
+          style="flex: 1; padding: 6px 10px; background: #1a1a1a; border: 1px solid #374151; border-radius: 4px; color: #e5e7eb;"
+        />
+        <button class="submit-btn" onClick={applyQuery}>Set ?q=…</button>
+        <button class="submit-btn" onClick={clearQuery} style="background: #374151;">Clear</button>
+      </div>
+
+      <div class="state-panel">
+        <strong style="color: #94a3b8; font-size: 12px;">Current search params</strong>
+        <pre class="result-pre">{JSON.stringify(currentParams(), null, 2)}</pre>
+      </div>
+
+      <p style="font-size: 12px; color: #6b7280; margin-top: 8px;">
+        Check browser address bar — <code>?q=…&amp;page=1</code> updates reactively.
+      </p>
+    </div>
+  );
+}

package/src/showcase/routing/routing-test.syn

@@ -0,0 +1,102 @@
+/**
+ * P1-03 Router Showcase
+ * navigate · route params · search params · nested Outlet · beforeEach guard
+ */
+
+import { createSignal, ShowRegistry as Show } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { DemoButton } from '../common/components/demo-button.syn';
+import { NavigationDemo } from './components/navigation-demo.syn';
+import { ParamsDemo } from './components/params-demo.syn';
+import { QueryDemo } from './components/query-demo.syn';
+import { NestedOutletDemo } from './components/nested-outlet-demo.syn';
+import { GuardDemo } from './components/guard-demo.syn';
+
+export component RoutingTestPage() {
+  const [showNav, setShowNav] = createSignal(false);
+  const [showParams, setShowParams] = createSignal(false);
+  const [showQuery, setShowQuery] = createSignal(false);
+  const [showOutlet, setShowOutlet] = createSignal(false);
+  const [showGuard, setShowGuard] = createSignal(false);
+
+  return (
+    <div>
+      <PageHeader
+        title="Router — Full Navigation Surface"
+        emoji="🧭"
+        description="P1-03 · navigate · params · query · Outlet · beforeEach guard"
+      />
+
+      <DemoSection
+        title="1️⃣ Programmatic Navigation"
+        description="router.navigate(path) — Promise-based, history-aware."
+        borderColor="#3b82f6"
+      >
+        <DemoButton
+          label={showNav() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowNav((v) => !v)}
+        />
+        <Show when={showNav()}>
+          <NavigationDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="2️⃣ Route Params"
+        description="useRoute() + router.currentParams — reactive on every path change."
+        borderColor="#8b5cf6"
+      >
+        <DemoButton
+          label={showParams() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowParams((v) => !v)}
+        />
+        <Show when={showParams()}>
+          <ParamsDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="3️⃣ Search / Query Params"
+        description="useSearchParams() [get, set] tuple — updates window.location.search reactively."
+        borderColor="#10b981"
+      >
+        <DemoButton
+          label={showQuery() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowQuery((v) => !v)}
+        />
+        <Show when={showQuery()}>
+          <QueryDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="4️⃣ Nested Outlet"
+        description="Parent layout persists. <Outlet /> renders matched child route."
+        borderColor="#f59e0b"
+      >
+        <DemoButton
+          label={showOutlet() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowOutlet((v) => !v)}
+        />
+        <Show when={showOutlet()}>
+          <NestedOutletDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="5️⃣ Navigation Guard — beforeEach"
+        description="router.beforeEach((to, from) => boolean) — blocks nav when form is dirty. Guard cleaned up via returned unsubscribe fn."
+        borderColor="#ef4444"
+      >
+        <DemoButton
+          label={showGuard() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowGuard((v) => !v)}
+        />
+        <Show when={showGuard()}>
+          <GuardDemo />
+        </Show>
+      </DemoSection>
+    </div>
+  );
+}

package/src/showcase/ssr/components/escape-demo.syn

@@ -0,0 +1,80 @@
+/**
+ * Escape Demo
+ * escapeHtml / escapeAttribute — XSS field verification
+ * Input containing <script> tags → confirm output is escaped
+ */
+
+import { createSignal, escapeHtml, escapeAttribute, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+const XSS_PAYLOAD = '<script>alert("XSS")</script>';
+const ATTR_PAYLOAD = '" onmouseover="alert(1)"';
+const UNICODE_PAYLOAD = 'Hello & "world" \'test\' <value>';
+
+interface IEscapeCase { label: string; input: string; fn: (s: string) => string }
+
+const cases: IEscapeCase[] = [
+  { label: 'escapeHtml — XSS script tag', input: XSS_PAYLOAD, fn: escapeHtml },
+  { label: 'escapeAttribute — attribute injection', input: ATTR_PAYLOAD, fn: escapeAttribute },
+  { label: 'escapeHtml — HTML entities', input: UNICODE_PAYLOAD, fn: escapeHtml },
+];
+
+export component EscapeDemo() {
+  const [custom, setCustom] = createSignal('');
+  const escapedCustom = () => (custom() ? escapeHtml(custom()) : null);
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">2️⃣ escapeHtml / escapeAttribute — XSS Guard</h3>
+      <p class="demo-desc">
+        Every user-controlled value passed to <code>renderToString</code> is sanitised via
+        <code>escapeHtml</code> (text nodes) and <code>escapeAttribute</code> (attribute values).
+        The table below proves the output is inert.
+      </p>
+
+      <div style="overflow-x: auto;">
+        <table style="width: 100%; border-collapse: collapse; font-size: 12px; font-family: monospace;">
+          <thead>
+            <tr style="color: #6b7280; text-align: left;">
+              <th style="padding: 6px 8px; border-bottom: 1px solid #374151;">Function</th>
+              <th style="padding: 6px 8px; border-bottom: 1px solid #374151;">Input (raw)</th>
+              <th style="padding: 6px 8px; border-bottom: 1px solid #374151;">Output (escaped)</th>
+              <th style="padding: 6px 8px; border-bottom: 1px solid #374151;">Safe?</th>
+            </tr>
+          </thead>
+          <tbody>
+            {cases.map((c) => {
+              const output = c.fn(c.input);
+              const safe = !output.includes('<script') && !output.includes('onmouseover');
+              return (
+                <tr style="border-bottom: 1px solid #1f2937;">
+                  <td style="padding: 6px 8px; color: #60a5fa;">{c.label}</td>
+                  <td style="padding: 6px 8px; color: #f87171;">{c.input}</td>
+                  <td style="padding: 6px 8px; color: #34d399;">{output}</td>
+                  <td style="padding: 6px 8px;">{safe ? '✅' : '❌'}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div style="margin-top: 14px;">
+        <p style="color: #94a3b8; font-size: 12px; margin-bottom: 6px;">Custom input:</p>
+        <input
+          class="field-input"
+          type="text"
+          placeholder="Type anything with <, >, &, quotes…"
+          value={custom()}
+          onInput={(e) => setCustom((e.target as HTMLInputElement).value)}
+          style="width: 100%; padding: 6px 10px; background: #1a1a1a; border: 1px solid #374151; border-radius: 4px; color: #e5e7eb; font-size: 13px;"
+        />
+        <Show when={escapedCustom()}>
+          <div class="state-panel" style="margin-top: 8px;">
+            <p style="color: #6b7280; font-size: 11px; margin-bottom: 3px;">escapeHtml output:</p>
+            <code style="color: #34d399; font-size: 13px;">{escapedCustom()}</code>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/showcase/ssr/components/hydrate-demo.syn

@@ -0,0 +1,142 @@
+/**
+ * Hydrate Demo
+ * SSR output → innerHTML injection → hydrate() call in sandboxed <div>
+ *
+ * B-07 NOTE: hydrate() is partially implemented — it logs a warning and falls back to
+ * a mount-based approach. This demo documents that behaviour and verifies the call
+ * path executes without throwing errors.
+ * Ref: packages/synetics.dev/src/ssr/hydrate.ts
+ */
+
+import { createSignal, renderToString, hydrate, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+const StaticCounter = () => {
+  return {
+    type: 'div',
+    props: {
+      'data-hydrate-root': 'true',
+      children: [
+        { type: 'p', props: { 'data-testid': 'ssr-label', children: ['Server-rendered count: 0'] } },
+        { type: 'button', props: { 'data-testid': 'ssr-btn', children: ['Increment (post-hydrate)'] } },
+      ],
+    },
+  };
+};
+
+export component HydrateDemo() {
+  const [ssrHtml, setSsrHtml] = createSignal<string | null>(null);
+  const [hydrated, setHydrated] = createSignal(false);
+  const [hydrationLog, setHydrationLog] = createSignal<string[]>([]);
+  const [sandboxRef, setSandboxRef] = createSignal<HTMLDivElement | null>(null);
+
+  const log = (msg: string) => {
+    const ts = new Date().toLocaleTimeString('en-US', { hour12: false });
+    setHydrationLog((prev) => [`[${ts}] ${msg}`, ...prev].slice(0, 10));
+  };
+
+  const stepRender = () => {
+    try {
+      const result = renderToString(StaticCounter, { serializeState: false });
+      const html = (result as any)?.html ?? JSON.stringify(result);
+      setSsrHtml(html);
+      log('✅ renderToString complete');
+
+      const sandbox = sandboxRef();
+      if (sandbox) {
+        sandbox.innerHTML = typeof html === 'string' ? html : String(html);
+        log('✅ injected as innerHTML into sandbox div');
+      }
+    } catch (e) {
+      log(`❌ renderToString error: ${e}`);
+    }
+  };
+
+  const stepHydrate = () => {
+    const sandbox = sandboxRef();
+    if (!sandbox) {
+      log('❌ sandbox ref not ready');
+      return;
+    }
+
+    // Intercept console.warn to capture the B-07 partial-implementation message
+    const originalWarn = console.warn;
+    const collected: string[] = [];
+    console.warn = (...args: unknown[]) => {
+      collected.push(args.map(String).join(' '));
+      originalWarn(...args);
+    };
+
+    try {
+      hydrate(StaticCounter, sandbox);
+      setHydrated(true);
+      if (collected.length > 0) {
+        log(`⚠️ hydrate() warning: ${collected[0]}`);
+      } else {
+        log('✅ hydrate() completed without warnings');
+      }
+    } catch (e) {
+      log(`❌ hydrate() threw: ${e}`);
+    } finally {
+      console.warn = originalWarn;
+    }
+  };
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">4️⃣ SSR → hydrate() Lifecycle</h3>
+
+      <div
+        style="background: #172554; border: 1px solid #1e40af; border-radius: 6px; padding: 10px; margin-bottom: 14px;"
+      >
+        <strong style="color: #93c5fd; font-size: 12px;">B-07 Status</strong>
+        <p style="color: #bfdbfe; font-size: 12px; margin-top: 4px; margin-bottom: 0;">
+          <code>hydrate()</code> is partially implemented — it logs a warning and has a TODO for full
+          DOM reconciliation. This demo exercises the call path, captures the warning, and verifies
+          no exception is thrown. Track: <code>packages/synetics.dev/src/ssr/hydrate.ts</code>.
+        </p>
+      </div>
+
+      <p class="demo-desc">
+        Step 1: <code>renderToString</code> → inject into sandbox <code>{'<div>'}</code>.
+        Step 2: call <code>hydrate(component, target)</code> → verify no throw + capture warnings.
+      </p>
+
+      <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+        <button class="submit-btn" onClick={stepRender} disabled={ssrHtml() !== null}>
+          1️⃣ renderToString + inject
+        </button>
+        <button class="submit-btn" onClick={stepHydrate} disabled={!ssrHtml() || hydrated()}>
+          2️⃣ hydrate()
+        </button>
+        <button
+          class="submit-btn"
+          onClick={() => {
+            setSsrHtml(null);
+            setHydrated(false);
+            setHydrationLog([]);
+            const sandbox = sandboxRef();
+            if (sandbox) sandbox.innerHTML = '';
+          }}
+          style="background: #374151;"
+        >
+          ↺ Reset
+        </button>
+      </div>
+
+      <div
+        ref={(el: HTMLDivElement) => setSandboxRef(el)}
+        style="min-height: 60px; background: #0f172a; border: 1px dashed #334155; border-radius: 6px; padding: 12px; margin-bottom: 12px;"
+      >
+        <p style="color: #4b5563; font-size: 12px; font-style: italic;">
+          Sandbox div — SSR HTML injected here
+        </p>
+      </div>
+
+      <Show when={hydrationLog().length > 0}>
+        <pre class="result-pre" style="font-size: 11px; max-height: 140px; overflow-y: auto;">
+          {hydrationLog().join('\n')}
+        </pre>
+      </Show>
+    </div>
+  );
+}