@even-toolkit/create-even-app 1.1.0

package/templates/notes/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/notes/src/screens/NoteDetail.tsx

@@ -0,0 +1,104 @@
+import { useParams, useNavigate } from 'react-router'
+import { Card, Badge, Button, EmptyState, useDrawerHeader } from 'even-toolkit/web'
+import { IcEdit, IcTrash } from 'even-toolkit/web/icons/svg-icons'
+import { useNotes } from '../contexts/NotesContext'
+
+const CATEGORY_BADGE_VARIANT = {
+  Personal: 'positive',
+  Work: 'accent',
+  Ideas: 'neutral',
+} as const
+
+function formatDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleDateString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+export function NoteDetail() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const { notes, deleteNote } = useNotes()
+
+  const note = notes.find((n) => n.id === id)
+
+  useDrawerHeader({
+    title: note?.title ?? 'Note',
+    backTo: '/',
+    right: note ? (
+      <div className="flex items-center gap-1">
+        <Button variant="ghost" size="icon" onClick={() => navigate(`/note/${note.id}/edit`)}>
+          <IcEdit width={20} height={20} />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => {
+            deleteNote(note.id)
+            navigate('/')
+          }}
+        >
+          <IcTrash width={20} height={20} />
+        </Button>
+      </div>
+    ) : undefined,
+  })
+
+  if (!note) {
+    return (
+      <main className="px-3 pt-4 pb-8">
+        <EmptyState
+          title="Note not found"
+          description="This note may have been deleted."
+          action={{ label: 'Back to Notes', onClick: () => navigate('/') }}
+        />
+      </main>
+    )
+  }
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <div className="flex items-center gap-2">
+        <Badge variant={CATEGORY_BADGE_VARIANT[note.category]}>{note.category}</Badge>
+      </div>
+
+      <Card className="p-4 space-y-3">
+        <p className="text-[15px] tracking-[-0.15px] text-text whitespace-pre-wrap leading-relaxed">
+          {note.content}
+        </p>
+      </Card>
+
+      <Card className="p-4 space-y-1.5">
+        <div className="flex items-center justify-between">
+          <span className="text-[11px] tracking-[-0.11px] text-text-dim">Created</span>
+          <span className="text-[11px] tracking-[-0.11px] text-text">{formatDate(note.createdAt)}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-[11px] tracking-[-0.11px] text-text-dim">Updated</span>
+          <span className="text-[11px] tracking-[-0.11px] text-text">{formatDate(note.updatedAt)}</span>
+        </div>
+      </Card>
+
+      <div className="flex gap-2">
+        <Button className="flex-1" onClick={() => navigate(`/note/${note.id}/edit`)}>
+          Edit Note
+        </Button>
+        <Button
+          variant="danger"
+          className="flex-1"
+          onClick={() => {
+            deleteNote(note.id)
+            navigate('/')
+          }}
+        >
+          Delete
+        </Button>
+      </div>
+    </main>
+  )
+}

package/templates/notes/src/screens/NoteForm.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router'
+import { Input, Textarea, Select, Button, Card, useDrawerHeader } from 'even-toolkit/web'
+import { useNotes } from '../contexts/NotesContext'
+import { CATEGORIES, type NoteCategory } from '../types'
+
+const CATEGORY_OPTIONS = CATEGORIES.map((c) => ({ value: c, label: c }))
+
+export function NoteForm() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const { notes, addNote, updateNote } = useNotes()
+
+  const existing = id ? notes.find((n) => n.id === id) : undefined
+  const isEdit = Boolean(existing)
+
+  const [title, setTitle] = useState(existing?.title ?? '')
+  const [content, setContent] = useState(existing?.content ?? '')
+  const [category, setCategory] = useState<NoteCategory>(existing?.category ?? 'Personal')
+
+  useEffect(() => {
+    if (existing) {
+      setTitle(existing.title)
+      setContent(existing.content)
+      setCategory(existing.category)
+    }
+  }, [existing])
+
+  useDrawerHeader({
+    title: isEdit ? 'Edit Note' : 'New Note',
+    backTo: isEdit && id ? `/note/${id}` : '/',
+  })
+
+  const canSave = title.trim().length > 0
+
+  function handleSave() {
+    if (!canSave) return
+    if (isEdit && id) {
+      updateNote(id, title.trim(), content.trim(), category)
+      navigate(`/note/${id}`)
+    } else {
+      const note = addNote(title.trim(), content.trim(), category)
+      navigate(`/note/${note.id}`)
+    }
+  }
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <Card className="p-4 space-y-3">
+        <div className="space-y-1.5">
+          <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Title</label>
+          <Input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Note title"
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Content</label>
+          <Textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder="Write your note..."
+            rows={8}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Category</label>
+          <Select
+            options={CATEGORY_OPTIONS}
+            value={category}
+            onValueChange={(v) => setCategory(v as NoteCategory)}
+          />
+        </div>
+      </Card>
+
+      <Button className="w-full" onClick={handleSave} disabled={!canSave}>
+        {isEdit ? 'Save Changes' : 'Create Note'}
+      </Button>
+    </main>
+  )
+}

package/templates/notes/src/screens/NoteList.tsx

@@ -0,0 +1,108 @@
+import { useNavigate } from 'react-router'
+import { SearchBar, CategoryFilter, ListItem, Badge, EmptyState, Button, ScreenHeader, useDrawerHeader } from 'even-toolkit/web'
+import { IcPlus, IcFeatQuickNote } from 'even-toolkit/web/icons/svg-icons'
+import { useNotes } from '../contexts/NotesContext'
+import { ALL_FILTER, CATEGORIES, type CategoryFilter as CategoryFilterType } from '../types'
+
+const FILTER_OPTIONS = [ALL_FILTER, ...CATEGORIES]
+
+const CATEGORY_BADGE_VARIANT = {
+  Personal: 'positive',
+  Work: 'accent',
+  Ideas: 'neutral',
+} as const
+
+function formatRelativeTime(timestamp: number): string {
+  const diff = Date.now() - timestamp
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 1) return 'Just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 7) return `${days}d ago`
+  return new Date(timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+export function NoteList() {
+  const navigate = useNavigate()
+  const {
+    filteredNotes,
+    searchQuery,
+    setSearchQuery,
+    selectedCategory,
+    setSelectedCategory,
+    deleteNote,
+    compactView,
+  } = useNotes()
+
+  useDrawerHeader({
+    right: (
+      <Button variant="ghost" size="icon" onClick={() => navigate('/new')}>
+        <IcPlus width={20} height={20} />
+      </Button>
+    ),
+  })
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <ScreenHeader
+        title="Notes"
+        subtitle={`${filteredNotes.length} note${filteredNotes.length !== 1 ? 's' : ''}`}
+      />
+
+      <SearchBar
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        placeholder="Search notes..."
+      />
+
+      <CategoryFilter
+        categories={FILTER_OPTIONS}
+        selected={selectedCategory}
+        onSelect={(c) => setSelectedCategory(c as CategoryFilterType)}
+      />
+
+      {filteredNotes.length === 0 ? (
+        <EmptyState
+          icon={<IcFeatQuickNote width={48} height={48} />}
+          title={searchQuery || selectedCategory !== ALL_FILTER ? 'No matching notes' : 'No notes yet'}
+          description={
+            searchQuery || selectedCategory !== ALL_FILTER
+              ? 'Try adjusting your search or category filter.'
+              : 'Tap the + button to create your first note.'
+          }
+          action={
+            !searchQuery && selectedCategory === ALL_FILTER
+              ? { label: 'New Note', onClick: () => navigate('/new') }
+              : undefined
+          }
+        />
+      ) : (
+        <div className="rounded-[6px] overflow-hidden divide-y divide-border">
+          {filteredNotes.map((note) => (
+            <ListItem
+              key={note.id}
+              title={note.title}
+              subtitle={
+                compactView
+                  ? undefined
+                  : note.content.split('\n')[0].slice(0, 80) + (note.content.length > 80 ? '...' : '')
+              }
+              trailing={
+                <div className="flex items-center gap-2">
+                  <Badge variant={CATEGORY_BADGE_VARIANT[note.category]}>{note.category}</Badge>
+                  <span className="text-[11px] tracking-[-0.11px] text-text-dim whitespace-nowrap">
+                    {formatRelativeTime(note.updatedAt)}
+                  </span>
+                </div>
+              }
+              onPress={() => navigate(`/note/${note.id}`)}
+              onDelete={() => deleteNote(note.id)}
+            />
+          ))}
+        </div>
+      )}
+    </main>
+  )
+}

package/templates/notes/src/screens/Settings.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { SettingsGroup, Toggle, ListItem, Card, Button, Divider, useDrawerHeader } from 'even-toolkit/web'
+import { useNotes } from '../contexts/NotesContext'
+
+export function Settings() {
+  const { notes, compactView, setCompactView } = useNotes()
+  const [confirmClear, setConfirmClear] = useState(false)
+
+  useDrawerHeader({ title: 'Settings', backTo: '/' })
+
+  function handleExport() {
+    const data = JSON.stringify(notes, null, 2)
+    const blob = new Blob([data], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `notes-export-${Date.now()}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function handleClearAll() {
+    if (!confirmClear) {
+      setConfirmClear(true)
+      return
+    }
+    localStorage.removeItem('{{APP_NAME}}-notes')
+    window.location.reload()
+  }
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-6">
+      <SettingsGroup label="Display">
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-[15px] tracking-[-0.15px] text-text">Compact View</p>
+              <p className="text-[11px] tracking-[-0.11px] text-text-dim mt-0.5">
+                Hide note previews in the list
+              </p>
+            </div>
+            <Toggle checked={compactView} onChange={setCompactView} />
+          </div>
+        </Card>
+      </SettingsGroup>
+
+      <SettingsGroup label="Data">
+        <Card className="divide-y divide-border">
+          <ListItem
+            title="Export Notes"
+            subtitle={`Export all ${notes.length} notes as JSON`}
+            onPress={handleExport}
+          />
+          <div>
+            <ListItem
+              title={confirmClear ? 'Tap again to confirm' : 'Clear All Notes'}
+              subtitle="Permanently delete all notes"
+              onPress={handleClearAll}
+            />
+            {confirmClear && (
+              <div className="px-4 pb-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full"
+                  onClick={() => setConfirmClear(false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </div>
+        </Card>
+      </SettingsGroup>
+
+      <SettingsGroup label="About">
+        <Card className="p-4 space-y-1.5">
+          <p className="text-[15px] tracking-[-0.15px] text-text">{{DISPLAY_NAME}}</p>
+          <p className="text-[13px] tracking-[-0.13px] text-text-dim">Version 1.0.0</p>
+          <Divider className="my-2" />
+          <p className="text-[11px] tracking-[-0.11px] text-text-dim">
+            A notes app for Even Realities G2 smart glasses. All data is stored locally in your browser.
+          </p>
+        </Card>
+      </SettingsGroup>
+    </main>
+  )
+}

package/templates/notes/src/types.ts

@@ -0,0 +1,14 @@
+export type NoteCategory = 'Personal' | 'Work' | 'Ideas'
+
+export interface Note {
+  id: string
+  title: string
+  content: string
+  category: NoteCategory
+  createdAt: number
+  updatedAt: number
+}
+
+export const CATEGORIES: NoteCategory[] = ['Personal', 'Work', 'Ideas']
+export const ALL_FILTER = 'All'
+export type CategoryFilter = typeof ALL_FILTER | NoteCategory

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

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

package/templates/notes/template.json

@@ -0,0 +1,7 @@
+{
+  "name": "notes",
+  "displayName": "Notes App",
+  "description": "A notes and productivity CRUD app with categories, search, and glass display",
+  "tags": ["productivity", "crud", "notes"],
+  "components": ["DrawerShell", "SearchBar", "CategoryFilter", "ListItem", "Badge", "EmptyState", "Card", "Input", "Textarea", "Select", "Button", "SettingsGroup", "Toggle", "ScreenHeader"]
+}

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

@@ -0,0 +1,24 @@
+import { Routes, Route } from 'react-router'
+import { Shell } from './layouts/shell'
+import { TrackerProvider } from './contexts/TrackerContext'
+import { TodayScreen } from './screens/TodayScreen'
+import { HistoryScreen } from './screens/HistoryScreen'
+import { NewEntryScreen } from './screens/NewEntryScreen'
+import { Settings } from './screens/Settings'
+import { AppGlasses } from './glass/AppGlasses'
+
+export function App() {
+  return (
+    <TrackerProvider>
+      <Routes>
+        <Route element={<Shell />}>
+          <Route path="/" element={<TodayScreen />} />
+          <Route path="/history" element={<HistoryScreen />} />
+          <Route path="/new" element={<NewEntryScreen />} />
+          <Route path="/settings" element={<Settings />} />
+        </Route>
+      </Routes>
+      <AppGlasses />
+    </TrackerProvider>
+  )
+}

package/templates/tracker/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;
+}