refactor: move frontend/ to examples/frontend/

The Lit + Vite HOMECORE web UI is an example consumer of the
sensing stack, not a top-level deliverable — relocate it under
examples/ alongside the other sensor and dashboard demos.

Add an entry to examples/README.md so it's discoverable.

Co-Authored-By: claude-flow <ruv@ruv.net>

examples/frontend/src/components/AppShell.ts

@@ -0,0 +1,194 @@
+/**
+ * `<hc-app-shell>` — top-level layout: sticky header + horizontal sidenav + content slot.
+ * Page shell mirrors cognitum-v0's appbar + wrap layout (ADR-131 §3).
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+export interface NavItem {
+  id: string;
+  label: string;
+  /** Raw SVG string for the icon */
+  iconSvg?: string;
+}
+
+const DEFAULT_NAV: NavItem[] = [
+  { id: 'dashboard', label: 'Dashboard' },
+  { id: 'states', label: 'States' },
+  { id: 'services', label: 'Services' },
+  { id: 'settings', label: 'Settings' },
+];
+
+@customElement('hc-app-shell')
+export class AppShell extends LitElement {
+  @property({ type: String }) locationName = 'HOMECORE';
+  @property({ type: String }) version = '0.1.0';
+  @property({ type: Array }) navItems: NavItem[] = DEFAULT_NAV;
+  @state() private activeId = 'dashboard';
+
+  static styles = css`
+    :host { display: block; min-height: 100dvh; background: var(--hc-bg, #0b0e13); }
+
+    /* ── Appbar ── */
+    .appbar {
+      position: sticky;
+      top: 0;
+      z-index: 50;
+      background: hsl(220 25% 6% / 0.9);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      border-bottom: 1px solid hsl(220 15% 18% / 0.8);
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 0 1.25rem;
+      height: 3.25rem;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-family: var(--hc-font-display, 'Outfit', system-ui, sans-serif);
+      font-weight: 600;
+      font-size: 0.9375rem;
+      color: var(--hc-text, #e6eaee);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    .brand-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 0.4rem;
+      background: var(--hc-primary, #19d4e5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--hc-primary-fg, #0b0e13);
+      font-size: 1rem;
+      font-weight: 700;
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      overflow-x: auto;
+      scrollbar-width: none;
+      flex: 1;
+      mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
+    }
+    .nav::-webkit-scrollbar { display: none; }
+
+    .nav-link {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      padding: 0.4rem 0.7rem;
+      border-radius: 0.4rem;
+      font-family: var(--hc-font-display, 'Outfit', system-ui, sans-serif);
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--hc-text-muted, #7b899d);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: color 150ms, background 150ms;
+    }
+
+    .nav-link:hover {
+      color: var(--hc-text, #e6eaee);
+      background: hsl(220 20% 14%);
+    }
+
+    .nav-link:focus-visible {
+      outline: 2px solid hsl(185 80% 50% / 0.6);
+      outline-offset: 1px;
+    }
+
+    .nav-link:active { transform: translateY(1px); }
+
+    .nav-link.active { color: var(--hc-primary, #19d4e5); }
+
+    .nav-link.active::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0.7rem;
+      right: 0.7rem;
+      height: 2px;
+      background: var(--hc-primary, #19d4e5);
+      border-radius: 9999px;
+    }
+
+    .version-chip {
+      font-family: var(--hc-font-mono, 'JetBrains Mono', monospace);
+      font-size: 0.6875rem;
+      color: var(--hc-text-muted, #7b899d);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    /* ── Main content ── */
+    main {
+      max-width: 1400px;
+      margin-inline: auto;
+      padding-inline: 1.25rem;
+      padding-block: 1.5rem;
+    }
+
+    /* ── Footer ── */
+    footer {
+      border-top: 1px solid hsl(220 15% 18%);
+      text-align: center;
+      padding: 1rem 1.25rem;
+      font-family: var(--hc-font-mono, 'JetBrains Mono', monospace);
+      font-size: 0.75rem;
+      color: var(--hc-text-muted, #7b899d);
+    }
+  `;
+
+  private onNavClick(id: string) {
+    this.activeId = id;
+    this.dispatchEvent(new CustomEvent('hc-navigate', { detail: { id }, bubbles: true, composed: true }));
+  }
+
+  render() {
+    return html`
+      <header class="appbar" part="appbar">
+        <div class="brand">
+          <div class="brand-icon" aria-hidden="true">H</div>
+          ${this.locationName}
+        </div>
+        <nav class="nav" aria-label="Primary navigation">
+          ${this.navItems.map(item => html`
+            <button
+              class="nav-link ${this.activeId === item.id ? 'active' : ''}"
+              @click=${() => this.onNavClick(item.id)}
+              aria-current=${this.activeId === item.id ? 'page' : 'false'}
+            >${item.label}</button>
+          `)}
+        </nav>
+        <span class="version-chip">v${this.version}</span>
+      </header>
+
+      <main part="content">
+        <slot></slot>
+      </main>
+
+      <footer part="footer">
+        HOMECORE &mdash; ${this.locationName} &mdash; v${this.version}
+      </footer>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'hc-app-shell': AppShell;
+  }
+}