@even-toolkit/create-even-app 1.1.0

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

@@ -0,0 +1,54 @@
+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'
+
+const deriveScreen = createScreenMapper([
+  { pattern: '/', screen: 'home' },
+], 'home')
+
+const homeTiles = getHomeTiles(appSplash)
+
+export function AppGlasses() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const flashPhase = useFlashPhase(deriveScreen(location.pathname) === 'home')
+
+  const snapshotRef = useMemo(() => ({
+    current: null as AppSnapshot | null,
+  }), [])
+
+  const snapshot: AppSnapshot = {
+    items: ['Welcome to {{DISPLAY_NAME}}', 'Edit App.tsx to get started'],
+    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/minimal/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/minimal/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/minimal/src/glass/shared.ts

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

package/templates/minimal/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/minimal/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>,
+)

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

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

package/templates/minimal/template.json

@@ -0,0 +1,7 @@
+{
+  "name": "minimal",
+  "displayName": "Clean Starter",
+  "description": "Minimal app with AppShell, NavHeader, and a welcome screen",
+  "tags": ["starter", "simple"],
+  "components": ["AppShell", "NavHeader", "Button", "Card", "ScreenHeader"]
+}

package/templates/minimal/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/minimal/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/minimal/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/notes/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/notes/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/notes/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/notes/src/App.tsx

@@ -0,0 +1,25 @@
+import { Routes, Route } from 'react-router'
+import { Shell } from './layouts/shell'
+import { NotesProvider } from './contexts/NotesContext'
+import { NoteList } from './screens/NoteList'
+import { NoteDetail } from './screens/NoteDetail'
+import { NoteForm } from './screens/NoteForm'
+import { Settings } from './screens/Settings'
+import { AppGlasses } from './glass/AppGlasses'
+
+export function App() {
+  return (
+    <NotesProvider>
+      <Routes>
+        <Route element={<Shell />}>
+          <Route path="/" element={<NoteList />} />
+          <Route path="/note/:id" element={<NoteDetail />} />
+          <Route path="/new" element={<NoteForm />} />
+          <Route path="/note/:id/edit" element={<NoteForm />} />
+          <Route path="/settings" element={<Settings />} />
+        </Route>
+      </Routes>
+      <AppGlasses />
+    </NotesProvider>
+  )
+}

package/templates/notes/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/notes/src/contexts/NotesContext.tsx

@@ -0,0 +1,140 @@
+import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from 'react'
+import type { Note, NoteCategory, CategoryFilter } from '../types'
+import { ALL_FILTER } from '../types'
+
+interface NotesContextValue {
+  notes: Note[]
+  addNote: (title: string, content: string, category: NoteCategory) => Note
+  updateNote: (id: string, title: string, content: string, category: NoteCategory) => void
+  deleteNote: (id: string) => void
+  searchQuery: string
+  setSearchQuery: (q: string) => void
+  selectedCategory: CategoryFilter
+  setSelectedCategory: (c: CategoryFilter) => void
+  filteredNotes: Note[]
+  compactView: boolean
+  setCompactView: (v: boolean) => void
+}
+
+const NotesContext = createContext<NotesContextValue | null>(null)
+
+const STORAGE_KEY = '{{APP_NAME}}-notes'
+const SETTINGS_KEY = '{{APP_NAME}}-settings'
+
+function generateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
+}
+
+const SAMPLE_NOTES: Note[] = [
+  {
+    id: 'sample-1',
+    title: 'Meeting Notes',
+    content: 'Discussed Q2 roadmap with the team. Key decisions:\n\n- Launch new dashboard by end of April\n- Prioritize mobile experience improvements\n- Schedule design review for next Wednesday\n- Allocate two sprints for performance optimization',
+    category: 'Work',
+    createdAt: Date.now() - 86400000 * 2,
+    updatedAt: Date.now() - 86400000 * 2,
+  },
+  {
+    id: 'sample-2',
+    title: 'Recipe Ideas',
+    content: 'Try making sourdough bread this weekend. Need to get a starter going by Thursday at the latest.\n\nIngredients to pick up:\n- Bread flour (King Arthur)\n- Sea salt\n- Dutch oven if I can find one on sale',
+    category: 'Personal',
+    createdAt: Date.now() - 86400000,
+    updatedAt: Date.now() - 86400000,
+  },
+  {
+    id: 'sample-3',
+    title: 'App Feature',
+    content: 'What if we added voice-to-text note creation using the G2 glasses microphone? Could use the even-toolkit STT module with web-speech provider for real-time transcription.\n\nWould need:\n- Mic permission handling\n- Visual feedback on glasses display\n- Auto-punctuation',
+    category: 'Ideas',
+    createdAt: Date.now() - 3600000,
+    updatedAt: Date.now() - 3600000,
+  },
+]
+
+function loadNotes(): Note[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw)
+      if (Array.isArray(parsed) && parsed.length > 0) return parsed
+    }
+  } catch { /* ignore */ }
+  return SAMPLE_NOTES
+}
+
+function loadSettings(): { compactView: boolean } {
+  try {
+    const raw = localStorage.getItem(SETTINGS_KEY)
+    if (raw) return JSON.parse(raw)
+  } catch { /* ignore */ }
+  return { compactView: false }
+}
+
+export function NotesProvider({ children }: { children: ReactNode }) {
+  const [notes, setNotes] = useState<Note[]>(loadNotes)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<CategoryFilter>(ALL_FILTER)
+  const [compactView, setCompactView] = useState(() => loadSettings().compactView)
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(notes))
+  }, [notes])
+
+  useEffect(() => {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify({ compactView }))
+  }, [compactView])
+
+  const addNote = useCallback((title: string, content: string, category: NoteCategory): Note => {
+    const now = Date.now()
+    const note: Note = { id: generateId(), title, content, category, createdAt: now, updatedAt: now }
+    setNotes((prev) => [note, ...prev])
+    return note
+  }, [])
+
+  const updateNote = useCallback((id: string, title: string, content: string, category: NoteCategory) => {
+    setNotes((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, title, content, category, updatedAt: Date.now() } : n)),
+    )
+  }, [])
+
+  const deleteNote = useCallback((id: string) => {
+    setNotes((prev) => prev.filter((n) => n.id !== id))
+  }, [])
+
+  const filteredNotes = notes.filter((note) => {
+    const matchesCategory = selectedCategory === ALL_FILTER || note.category === selectedCategory
+    const query = searchQuery.toLowerCase()
+    const matchesSearch =
+      !query ||
+      note.title.toLowerCase().includes(query) ||
+      note.content.toLowerCase().includes(query)
+    return matchesCategory && matchesSearch
+  })
+
+  return (
+    <NotesContext.Provider
+      value={{
+        notes,
+        addNote,
+        updateNote,
+        deleteNote,
+        searchQuery,
+        setSearchQuery,
+        selectedCategory,
+        setSelectedCategory,
+        filteredNotes,
+        compactView,
+        setCompactView,
+      }}
+    >
+      {children}
+    </NotesContext.Provider>
+  )
+}
+
+export function useNotes() {
+  const ctx = useContext(NotesContext)
+  if (!ctx) throw new Error('useNotes must be used within NotesProvider')
+  return ctx
+}

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

@@ -0,0 +1,58 @@
+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 { useNotes } from '../contexts/NotesContext'
+
+const deriveScreen = createScreenMapper([
+  { pattern: '/', screen: 'home' },
+], 'home')
+
+const homeTiles = getHomeTiles(appSplash)
+
+export function AppGlasses() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { notes } = useNotes()
+  const flashPhase = useFlashPhase(deriveScreen(location.pathname) === 'home')
+
+  const snapshotRef = useMemo(() => ({
+    current: null as AppSnapshot | null,
+  }), [])
+
+  const snapshot: AppSnapshot = {
+    items: notes.length > 0
+      ? notes.map((n) => n.title)
+      : ['No notes yet'],
+    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/notes/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/notes/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/notes/src/glass/shared.ts

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

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

@@ -0,0 +1,24 @@
+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)
+
+  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/notes/src/layouts/shell.tsx

@@ -0,0 +1,36 @@
+import { DrawerShell } from 'even-toolkit/web'
+import type { SideDrawerItem } from 'even-toolkit/web'
+
+const MENU_ITEMS: SideDrawerItem[] = [
+  { id: '/', label: 'Notes', section: 'Notes' },
+]
+
+const BOTTOM_ITEMS: SideDrawerItem[] = [
+  { id: '/settings', label: 'Settings', section: 'App' },
+]
+
+function getPageTitle(pathname: string): string {
+  if (pathname === '/') return '{{DISPLAY_NAME}}'
+  if (pathname === '/new') return 'New Note'
+  if (pathname.includes('/edit')) return 'Edit Note'
+  if (pathname.startsWith('/note/')) return 'Note'
+  if (pathname === '/settings') return 'Settings'
+  return 'Notes'
+}
+
+function deriveActiveId(pathname: string): string {
+  if (pathname === '/settings') return '/settings'
+  return '/'
+}
+
+export function Shell() {
+  return (
+    <DrawerShell
+      items={MENU_ITEMS}
+      bottomItems={BOTTOM_ITEMS}
+      title="{{DISPLAY_NAME}}"
+      getPageTitle={getPageTitle}
+      deriveActiveId={deriveActiveId}
+    />
+  )
+}