@even-toolkit/create-even-app 1.1.0

package/templates/dashboard/src/screens/OverviewScreen.tsx

@@ -0,0 +1,102 @@
+import { ScreenHeader, StatGrid, StatCard, Timeline, Card } from 'even-toolkit/web'
+import type { TimelineEvent } from 'even-toolkit/web'
+
+/* ── Stat grid data ────────────────────────────────────────────── */
+
+const kpiStats = [
+  { label: 'Revenue', value: '$48.2K', detail: '+12.4% MoM' },
+  { label: 'Users', value: '2,847', detail: '+340 this week' },
+  { label: 'Growth', value: '18.3%', detail: 'vs 14.1% prior' },
+]
+
+/* ── Stat cards with sparklines ────────────────────────────────── */
+
+const revenueSparkline = [32, 35, 33, 38, 42, 40, 44, 47, 45, 50, 48, 52]
+const usersSparkline = [180, 210, 195, 240, 260, 255, 290, 310, 305, 340, 350, 380]
+const conversionSparkline = [3.2, 3.4, 3.1, 3.6, 3.8, 3.5, 3.9, 4.1, 3.8, 4.2, 4.0, 4.3]
+
+/* ── Timeline events ───────────────────────────────────────────── */
+
+const recentActivity: TimelineEvent[] = [
+  {
+    id: '1',
+    title: 'Revenue milestone reached',
+    subtitle: 'Monthly recurring revenue crossed $48K',
+    timestamp: '2m ago',
+    color: 'var(--color-positive)',
+  },
+  {
+    id: '2',
+    title: 'New user cohort onboarded',
+    subtitle: '124 users joined from campaign #47',
+    timestamp: '18m ago',
+    color: 'var(--color-accent)',
+  },
+  {
+    id: '3',
+    title: 'Conversion rate improved',
+    subtitle: 'A/B test variant B outperformed by 0.8pp',
+    timestamp: '1h ago',
+    color: 'var(--color-positive)',
+  },
+  {
+    id: '4',
+    title: 'API latency spike detected',
+    subtitle: 'P95 latency exceeded 400ms for 12 minutes',
+    timestamp: '3h ago',
+    color: 'var(--color-negative)',
+  },
+  {
+    id: '5',
+    title: 'Weekly report generated',
+    subtitle: 'Sent to 14 stakeholders via email',
+    timestamp: '6h ago',
+  },
+]
+
+/* ── Component ─────────────────────────────────────────────────── */
+
+export function OverviewScreen() {
+  return (
+    <div className="flex flex-col gap-6">
+      <ScreenHeader title="Overview" />
+
+      {/* KPI summary row */}
+      <StatGrid stats={kpiStats} columns={3} />
+
+      {/* Trend cards */}
+      <div className="flex flex-col gap-3">
+        <div className="text-[13px] tracking-[-0.13px] text-text-dim">Trends</div>
+        <StatCard
+          label="Monthly Revenue"
+          value="$48.2K"
+          change="+12.4%"
+          trend="up"
+          sparklineData={revenueSparkline}
+        />
+        <StatCard
+          label="Active Users"
+          value="2,847"
+          change="+340"
+          trend="up"
+          sparklineData={usersSparkline}
+        />
+        <StatCard
+          label="Conversion Rate"
+          value="4.3%"
+          change="+0.3pp"
+          trend="up"
+          sparklineData={conversionSparkline}
+        />
+      </div>
+
+      {/* Recent activity */}
+      <div className="flex flex-col gap-3">
+        <div className="text-[13px] tracking-[-0.13px] text-text-dim">Recent Activity</div>
+        <Card className="p-4">
+          <Timeline events={recentActivity} />
+        </Card>
+      </div>
+    </div>
+  )
+}

package/templates/dashboard/src/screens/SettingsScreen.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { ScreenHeader, SettingsGroup, Toggle, ListItem } from 'even-toolkit/web'
+import { IcGuideChevronSmallDrillIn } from 'even-toolkit/web/icons/svg-icons'
+
+export function SettingsScreen() {
+  const [darkMode, setDarkMode] = useState(false)
+  const [autoRefresh, setAutoRefresh] = useState(true)
+  const [notifications, setNotifications] = useState(true)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ScreenHeader title="Settings" />
+
+      {/* Display settings */}
+      <SettingsGroup label="Display">
+        <ListItem
+          title="Dark Mode"
+          subtitle="Use dark color scheme"
+          trailing={<Toggle checked={darkMode} onChange={setDarkMode} />}
+        />
+        <ListItem
+          title="Auto-refresh"
+          subtitle="Update data every 30 seconds"
+          trailing={<Toggle checked={autoRefresh} onChange={setAutoRefresh} />}
+        />
+        <ListItem
+          title="Notifications"
+          subtitle="Alert on threshold breaches"
+          trailing={<Toggle checked={notifications} onChange={setNotifications} />}
+        />
+      </SettingsGroup>
+
+      {/* Data settings */}
+      <SettingsGroup label="Data">
+        <ListItem
+          title="Refresh Interval"
+          subtitle="30 seconds"
+          trailing={<IcGuideChevronSmallDrillIn width={20} height={20} className="text-text-dim" />}
+        />
+        <ListItem
+          title="Data Source"
+          subtitle="Production API"
+          trailing={<IcGuideChevronSmallDrillIn width={20} height={20} className="text-text-dim" />}
+        />
+      </SettingsGroup>
+
+      {/* About */}
+      <SettingsGroup label="About">
+        <ListItem
+          title="{{DISPLAY_NAME}}"
+          subtitle="Version 1.0.0"
+        />
+        <ListItem
+          title="Even Toolkit"
+          subtitle="v1.5.0"
+        />
+      </SettingsGroup>
+    </div>
+  )
+}

package/templates/dashboard/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/dashboard/template.json

@@ -0,0 +1,7 @@
+{
+  "name": "dashboard",
+  "displayName": "Data Dashboard",
+  "description": "Analytics dashboard with charts, stats, and timeline — built for G2 smart glasses",
+  "tags": ["dashboard", "charts", "analytics"],
+  "components": ["AppShell", "NavBar", "ScreenHeader", "StatGrid", "StatCard", "LineChart", "BarChart", "PieChart", "Timeline", "SettingsGroup", "Toggle", "ListItem", "Card"]
+}

package/templates/dashboard/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/dashboard/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "composite": true,
+    "noEmit": false,
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/dashboard/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: { '@': path.resolve(__dirname, './src') },
+    dedupe: ['react', 'react-dom', 'react-router', '@evenrealities/even_hub_sdk', '@jappyjan/even-better-sdk', 'upng-js'],
+  },
+})

package/templates/media/README.md

@@ -0,0 +1,27 @@
+# {{DISPLAY_NAME}}
+
+A G2 smart glasses app built with [even-toolkit](https://www.npmjs.com/package/even-toolkit).
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+## Test with Simulator
+
+```bash
+npx @evenrealities/evenhub-simulator@latest http://localhost:5173
+```
+
+## Build for Even Hub
+
+```bash
+npm run build
+npx @evenrealities/evenhub-cli pack app.json dist
+```
+
+Upload the generated `.ehpk` file to the Even Hub.

package/templates/media/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>{{DISPLAY_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/media/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "{{APP_NAME}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5173 --host",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@evenrealities/even_hub_sdk": "^0.0.9",
+    "@jappyjan/even-better-sdk": "^0.0.11",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.0",
+    "even-toolkit": "^1.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.2.4",
+    "react-router": "^7.0.0",
+    "tailwind-merge": "^3.0.0",
+    "upng-js": "^2.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/node": "^22.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.4.0",
+    "vite": "^5.4.0"
+  }
+}

package/templates/media/src/App.tsx

@@ -0,0 +1,24 @@
+import { Routes, Route } from 'react-router'
+import { Shell } from './layouts/shell'
+import { MediaProvider } from './contexts/MediaContext'
+import { GalleryScreen } from './screens/GalleryScreen'
+import { AudioScreen } from './screens/AudioScreen'
+import { UploadScreen } from './screens/UploadScreen'
+import { Settings } from './screens/Settings'
+import { AppGlasses } from './glass/AppGlasses'
+
+export function App() {
+  return (
+    <MediaProvider>
+      <Routes>
+        <Route element={<Shell />}>
+          <Route path="/" element={<GalleryScreen />} />
+          <Route path="/audio" element={<AudioScreen />} />
+          <Route path="/upload" element={<UploadScreen />} />
+          <Route path="/settings" element={<Settings />} />
+        </Route>
+      </Routes>
+      <AppGlasses />
+    </MediaProvider>
+  )
+}

package/templates/media/src/app.css

@@ -0,0 +1,54 @@
+@import "tailwindcss";
+@import "even-toolkit/web/theme-light.css";
+@import "even-toolkit/web/typography.css";
+@import "even-toolkit/web/utilities.css";
+@source "../src";
+@source "../node_modules/even-toolkit/web";
+@source "../node_modules/even-toolkit/dist";
+
+@theme {
+  --color-bg: var(--color-bg);
+  --color-surface: var(--color-surface);
+  --color-surface-light: var(--color-surface-light);
+  --color-surface-lighter: var(--color-surface-lighter);
+  --color-border: var(--color-border);
+  --color-border-light: var(--color-border-light);
+  --color-text: var(--color-text);
+  --color-text-dim: var(--color-text-dim);
+  --color-text-muted: var(--color-text-muted);
+  --color-text-highlight: var(--color-text-highlight);
+  --color-accent: var(--color-accent);
+  --color-accent-alpha: var(--color-accent-alpha);
+  --color-accent-warning: var(--color-accent-warning);
+  --color-positive: var(--color-positive);
+  --color-positive-alpha: var(--color-positive-alpha);
+  --color-negative: var(--color-negative);
+  --color-negative-alpha: var(--color-negative-alpha);
+  --color-overlay: var(--color-overlay);
+  --color-input-bg: var(--color-input-bg);
+  --radius-default: var(--radius-default);
+  --font-display: var(--font-display);
+  --font-body: var(--font-body);
+  --font-mono: var(--font-mono);
+}
+
+html, body {
+  background: var(--color-bg);
+  color: var(--color-text);
+  min-height: 100dvh;
+  font-family: var(--font-display);
+  -webkit-font-smoothing: antialiased;
+}
+
+#root {
+  max-width: 430px;
+  margin: 0 auto;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}

package/templates/media/src/contexts/MediaContext.tsx

@@ -0,0 +1,108 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react'
+import type { GalleryItem, AudioTrack, UploadItem, CategoryFilter } from '../types'
+import { ALL_FILTER } from '../types'
+
+interface MediaContextValue {
+  galleryItems: GalleryItem[]
+  audioTracks: AudioTrack[]
+  uploads: UploadItem[]
+  addUpload: (name: string, size: string, type: string) => void
+  removeUpload: (id: string) => void
+  clearUploads: () => void
+  selectedCategory: CategoryFilter
+  setSelectedCategory: (c: CategoryFilter) => void
+  filteredGallery: GalleryItem[]
+  selectedTrackId: string | null
+  setSelectedTrackId: (id: string | null) => void
+  gridColumns: 2 | 3
+  setGridColumns: (cols: 2 | 3) => void
+}
+
+const MediaContext = createContext<MediaContextValue | null>(null)
+
+function generateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
+}
+
+const GRADIENTS = [
+  'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+  'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+  'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+  'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
+  'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
+]
+
+const SAMPLE_GALLERY: GalleryItem[] = [
+  { id: 'g1', title: 'Mountain Sunrise', category: 'Photos', date: '2026-03-28', gradient: GRADIENTS[0] },
+  { id: 'g2', title: 'City Skyline', category: 'Photos', date: '2026-03-27', gradient: GRADIENTS[1] },
+  { id: 'g3', title: 'Abstract Waves', category: 'Artwork', date: '2026-03-26', gradient: GRADIENTS[2] },
+  { id: 'g4', title: 'Digital Garden', category: 'Artwork', date: '2026-03-25', gradient: GRADIENTS[3] },
+  { id: 'g5', title: 'App Dashboard', category: 'Screenshots', date: '2026-03-24', gradient: GRADIENTS[4] },
+  { id: 'g6', title: 'Ocean Breeze', category: 'Photos', date: '2026-03-23', gradient: GRADIENTS[5] },
+  { id: 'g7', title: 'Neon Portrait', category: 'Artwork', date: '2026-03-22', gradient: GRADIENTS[0] },
+  { id: 'g8', title: 'Settings Panel', category: 'Screenshots', date: '2026-03-21', gradient: GRADIENTS[1] },
+  { id: 'g9', title: 'Forest Trail', category: 'Photos', date: '2026-03-20', gradient: GRADIENTS[3] },
+  { id: 'g10', title: 'Pixel Mosaic', category: 'Artwork', date: '2026-03-19', gradient: GRADIENTS[4] },
+]
+
+const SAMPLE_TRACKS: AudioTrack[] = [
+  { id: 't1', title: 'Morning Light', artist: 'Ambient Waves', duration: '3:42', durationSeconds: 222 },
+  { id: 't2', title: 'Deep Focus', artist: 'Lo-Fi Beats', duration: '4:15', durationSeconds: 255 },
+  { id: 't3', title: 'Evening Calm', artist: 'Nature Sounds', duration: '5:08', durationSeconds: 308 },
+  { id: 't4', title: 'City Rain', artist: 'White Noise Co', duration: '2:56', durationSeconds: 176 },
+]
+
+export function MediaProvider({ children }: { children: ReactNode }) {
+  const [galleryItems] = useState<GalleryItem[]>(SAMPLE_GALLERY)
+  const [audioTracks] = useState<AudioTrack[]>(SAMPLE_TRACKS)
+  const [uploads, setUploads] = useState<UploadItem[]>([])
+  const [selectedCategory, setSelectedCategory] = useState<CategoryFilter>(ALL_FILTER)
+  const [selectedTrackId, setSelectedTrackId] = useState<string | null>(null)
+  const [gridColumns, setGridColumns] = useState<2 | 3>(3)
+
+  const addUpload = useCallback((name: string, size: string, type: string) => {
+    const item: UploadItem = { id: generateId(), name, size, type, timestamp: Date.now() }
+    setUploads((prev) => [item, ...prev])
+  }, [])
+
+  const removeUpload = useCallback((id: string) => {
+    setUploads((prev) => prev.filter((u) => u.id !== id))
+  }, [])
+
+  const clearUploads = useCallback(() => {
+    setUploads([])
+  }, [])
+
+  const filteredGallery = galleryItems.filter((item) => {
+    return selectedCategory === ALL_FILTER || item.category === selectedCategory
+  })
+
+  return (
+    <MediaContext.Provider
+      value={{
+        galleryItems,
+        audioTracks,
+        uploads,
+        addUpload,
+        removeUpload,
+        clearUploads,
+        selectedCategory,
+        setSelectedCategory,
+        filteredGallery,
+        selectedTrackId,
+        setSelectedTrackId,
+        gridColumns,
+        setGridColumns,
+      }}
+    >
+      {children}
+    </MediaContext.Provider>
+  )
+}
+
+export function useMedia() {
+  const ctx = useContext(MediaContext)
+  if (!ctx) throw new Error('useMedia must be used within MediaProvider')
+  return ctx
+}

package/templates/media/src/glass/AppGlasses.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { useNavigate, useLocation } from 'react-router'
+import { useGlasses } from 'even-toolkit/useGlasses'
+import { useFlashPhase } from 'even-toolkit/useFlashPhase'
+import { createScreenMapper, getHomeTiles } from 'even-toolkit/glass-router'
+import { appSplash } from './splash'
+import { toDisplayData, onGlassAction, type AppSnapshot } from './selectors'
+import type { AppActions } from './shared'
+import { useMedia } from '../contexts/MediaContext'
+
+const deriveScreen = createScreenMapper([
+  { pattern: '/', screen: 'home' },
+  { pattern: '/audio', screen: 'home' },
+  { pattern: '/upload', screen: 'home' },
+  { pattern: '/settings', screen: 'home' },
+], 'home')
+
+const homeTiles = getHomeTiles(appSplash)
+
+export function AppGlasses() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const flashPhase = useFlashPhase(deriveScreen(location.pathname) === 'home')
+  const { galleryItems } = useMedia()
+
+  const snapshotRef = useMemo(() => ({
+    current: null as AppSnapshot | null,
+  }), [])
+
+  const snapshot: AppSnapshot = {
+    items: galleryItems.map((item) => `${item.title} — ${item.category}`),
+    flashPhase,
+  }
+  snapshotRef.current = snapshot
+
+  const getSnapshot = useCallback(() => snapshotRef.current!, [snapshotRef])
+
+  const ctxRef = useRef<AppActions>({ navigate })
+  ctxRef.current = { navigate }
+
+  const handleGlassAction = useCallback(
+    (action: Parameters<typeof onGlassAction>[0], nav: Parameters<typeof onGlassAction>[1], snap: AppSnapshot) =>
+      onGlassAction(action, nav, snap, ctxRef.current),
+    [],
+  )
+
+  useGlasses({
+    getSnapshot,
+    toDisplayData,
+    onGlassAction: handleGlassAction,
+    deriveScreen,
+    appName: '{{DISPLAY_NAME_UPPER}}',
+    splash: appSplash,
+    getPageMode: (screen) => screen === 'home' ? 'home' : 'text',
+    homeImageTiles: homeTiles,
+  })
+
+  return null
+}

package/templates/media/src/glass/screens/home.ts

@@ -0,0 +1,24 @@
+import type { GlassScreen } from 'even-toolkit/glass-screen-router'
+import { buildScrollableList } from 'even-toolkit/glass-display-builders'
+import { moveHighlight } from 'even-toolkit/glass-nav'
+import type { AppSnapshot, AppActions } from '../shared'
+
+export const homeScreen: GlassScreen<AppSnapshot, AppActions> = {
+  display(snapshot, nav) {
+    return {
+      lines: buildScrollableList({
+        items: snapshot.items,
+        highlightedIndex: nav.highlightedIndex,
+        maxVisible: 5,
+        formatter: (item) => item,
+      }),
+    }
+  },
+
+  action(action, nav, snapshot) {
+    if (action.type === 'HIGHLIGHT_MOVE') {
+      return { ...nav, highlightedIndex: moveHighlight(nav.highlightedIndex, action.direction, snapshot.items.length - 1) }
+    }
+    return nav
+  },
+}

package/templates/media/src/glass/selectors.ts

@@ -0,0 +1,9 @@
+import { createGlassScreenRouter } from 'even-toolkit/glass-screen-router'
+import type { AppSnapshot, AppActions } from './shared'
+import { homeScreen } from './screens/home'
+
+export type { AppSnapshot, AppActions }
+
+export const { toDisplayData, onGlassAction } = createGlassScreenRouter<AppSnapshot, AppActions>({
+  'home': homeScreen,
+}, 'home')

package/templates/media/src/glass/shared.ts

@@ -0,0 +1,8 @@
+export interface AppSnapshot {
+  items: string[]
+  flashPhase: boolean
+}
+
+export interface AppActions {
+  navigate: (path: string) => void
+}

package/templates/media/src/glass/splash.ts

@@ -0,0 +1,25 @@
+import { createSplash, TILE_PRESETS } from 'even-toolkit/splash'
+
+export function renderSplash(ctx: CanvasRenderingContext2D, w: number, h: number) {
+  const fg = '#e0e0e0'
+  const cx = w / 2
+  const s = Math.min(w / 200, h / 200)
+
+  // Simple text-based splash — replace with pixel-art icon for your app
+  ctx.fillStyle = fg
+  ctx.font = `bold ${14 * s}px "Courier New", monospace`
+  ctx.textAlign = 'center'
+  ctx.fillText('{{DISPLAY_NAME_UPPER}}', cx, 50 * s)
+  ctx.textAlign = 'left'
+}
+
+export const appSplash = createSplash({
+  tiles: 1,
+  tileLayout: 'vertical',
+  tilePositions: TILE_PRESETS.topCenter1,
+  canvasSize: { w: 200, h: 200 },
+  minTimeMs: 0,
+  maxTimeMs: 0,
+  menuText: '',
+  render: renderSplash,
+})

package/templates/media/src/layouts/shell.tsx

@@ -0,0 +1,39 @@
+import { DrawerShell } from 'even-toolkit/web'
+import type { SideDrawerItem } from 'even-toolkit/web'
+
+const MENU_ITEMS: SideDrawerItem[] = [
+  { id: '/', label: 'Gallery', section: 'Media' },
+  { id: '/audio', label: 'Audio', section: 'Media' },
+]
+
+const BOTTOM_ITEMS: SideDrawerItem[] = [
+  { id: '/upload', label: 'Upload', section: 'App' },
+  { id: '/settings', label: 'Settings', section: 'App' },
+]
+
+function getPageTitle(pathname: string): string {
+  if (pathname === '/') return '{{DISPLAY_NAME}}'
+  if (pathname === '/audio') return 'Audio'
+  if (pathname === '/upload') return 'Upload'
+  if (pathname === '/settings') return 'Settings'
+  return '{{DISPLAY_NAME}}'
+}
+
+function deriveActiveId(pathname: string): string {
+  if (pathname === '/audio') return '/audio'
+  if (pathname === '/upload') return '/upload'
+  if (pathname === '/settings') return '/settings'
+  return '/'
+}
+
+export function Shell() {
+  return (
+    <DrawerShell
+      items={MENU_ITEMS}
+      bottomItems={BOTTOM_ITEMS}
+      title="{{DISPLAY_NAME}}"
+      getPageTitle={getPageTitle}
+      deriveActiveId={deriveActiveId}
+    />
+  )
+}

package/templates/media/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
+import { App } from './App'
+import './app.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)