memlnaut-nisps/playground/src/App.tsx

import { Component, createSignal, onCleanup, Show } from 'solid-js';
import styles from './App.module.css';

type Route = 'home' | 'unknown';

function parseRoute(path: string): Route {
  if (path === '' || path === '/' || path === '/index.html') return 'home';
  return 'unknown';
}

const App: Component = () => {
  const [route, setRoute] = createSignal<Route>(parseRoute(window.location.pathname));

  const onPop = () => setRoute(parseRoute(window.location.pathname));
  window.addEventListener('popstate', onPop);
  onCleanup(() => window.removeEventListener('popstate', onPop));

  const navigate = (path: string) => {
    if (window.location.pathname === path) return;
    window.history.pushState({}, '', path);
    setRoute(parseRoute(path));
  };

  return (
    <div class={styles.app}>
      <header class={styles.header}>
        <strong>MEMLNaut</strong>
        <span class={styles.dim}>playground</span>
        <nav class={styles.nav}>
          <button
            type="button"
            class={route() === 'home' ? styles.active : ''}
            onClick={() => navigate('/')}
          >
            home
          </button>
        </nav>
      </header>
      <main class={styles.main}>
        <Show when={route() === 'home'}>
          <Home />
        </Show>
        <Show when={route() === 'unknown'}>
          <div class={styles.notFound}>
            <h1>404</h1>
            <p>No route at <code>{window.location.pathname}</code>.</p>
            <p>
              <a href="/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>back to home</a>
            </p>
          </div>
        </Show>
      </main>
    </div>
  );
};

const Home: Component = () => {
  return (
    <div class={styles.home}>
      <h1 class={styles.title}>MEMLNaut Playground</h1>
      <p class={styles.tagline}>
        Interactive ML control of audio. SolidJS scaffold — modes coming online in stream 9.
      </p>
      <p class={styles.note}>
        This is a fresh scaffold. Primitives, stores, ML, WASM, and audio engines are added in subsequent commits.
      </p>
    </div>
  );
};

export default App;