@even-toolkit/create-even-app 1.1.0

package/templates/chat/src/screens/ChatScreen.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+import { ChatContainer, ChatInput, ChatThinking, VoiceInput } from 'even-toolkit/web'
+import type { ChatMessage } from 'even-toolkit/web'
+import { useChat } from '../contexts/ChatContext'
+
+export function ChatScreen() {
+  const { messages, isLoading, settings, sendMessage } = useChat()
+  const [inputValue, setInputValue] = useState('')
+
+  const handleSend = () => {
+    const trimmed = inputValue.trim()
+    if (!trimmed) return
+    sendMessage(trimmed)
+    setInputValue('')
+  }
+
+  const handleVoiceTranscript = (text: string) => {
+    if (text.trim()) {
+      sendMessage(text.trim())
+    }
+  }
+
+  // Map app messages to toolkit ChatMessage format
+  const chatMessages: ChatMessage[] = messages.map((msg) => ({
+    id: msg.id,
+    role: msg.role,
+    content: msg.content,
+    timestamp: msg.timestamp,
+  }))
+
+  // Add thinking indicator when loading
+  if (isLoading) {
+    chatMessages.push({
+      id: 'thinking',
+      role: 'assistant',
+      content: '',
+      thinking: 'Composing a response...',
+    })
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <ChatContainer
+        messages={chatMessages}
+        className="flex-1 min-h-0"
+        input={
+          <div className="flex items-end gap-2 p-3 bg-bg border-t border-border/30">
+            {settings.voiceEnabled && (
+              <VoiceInput
+                onTranscript={handleVoiceTranscript}
+                className="shrink-0"
+              />
+            )}
+            <div className="flex-1 flex items-end gap-2">
+              <ChatInput
+                value={inputValue}
+                onChange={setInputValue}
+                onSend={handleSend}
+                placeholder="Ask anything..."
+                disabled={isLoading}
+                className="flex-1 !p-0 !bg-transparent"
+              />
+            </div>
+          </div>
+        }
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,88 @@
+import { SettingsGroup, ListItem, Toggle, Select, Input } from 'even-toolkit/web'
+import { useChat } from '../contexts/ChatContext'
+
+const PROVIDER_OPTIONS = [
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'anthropic', label: 'Anthropic' },
+  { value: 'local', label: 'Local Model' },
+]
+
+export function Settings() {
+  const { settings, setSettings, clearMessages } = useChat()
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-6">
+      {/* AI Provider */}
+      <SettingsGroup label="AI Provider">
+        <ListItem
+          title="Provider"
+          trailing={
+            <Select
+              options={PROVIDER_OPTIONS}
+              value={settings.provider}
+              onValueChange={(v) => setSettings({ ...settings, provider: v as 'openai' | 'anthropic' | 'local' })}
+            />
+          }
+        />
+        <div className="px-4 py-3 space-y-1.5">
+          <span className="text-[13px] tracking-[-0.13px] text-text-dim">API Key</span>
+          <Input
+            value={settings.apiKey}
+            onChange={(e) => setSettings({ ...settings, apiKey: e.target.value })}
+            type="password"
+            placeholder="Enter your API key"
+          />
+          <p className="text-[11px] tracking-[-0.11px] text-text-dim">
+            {settings.provider === 'local' ? 'No API key needed for local models.' : 'Your key is stored locally and never shared.'}
+          </p>
+        </div>
+      </SettingsGroup>
+
+      {/* Voice */}
+      <SettingsGroup label="Voice">
+        <ListItem
+          title="Enable voice input"
+          subtitle="Use microphone to send messages"
+          trailing={
+            <Toggle
+              checked={settings.voiceEnabled}
+              onChange={(v) => setSettings({ ...settings, voiceEnabled: v })}
+            />
+          }
+        />
+      </SettingsGroup>
+
+      {/* Display */}
+      <SettingsGroup label="Display">
+        <ListItem
+          title="Dark mode"
+          subtitle="Use dark color scheme"
+          trailing={
+            <Toggle
+              checked={settings.darkMode}
+              onChange={(v) => setSettings({ ...settings, darkMode: v })}
+            />
+          }
+        />
+      </SettingsGroup>
+
+      {/* Data */}
+      <SettingsGroup label="Data">
+        <div onClick={clearMessages}>
+          <ListItem
+            title="Clear conversation"
+            subtitle="Remove all messages from the current session"
+          />
+        </div>
+      </SettingsGroup>
+
+      {/* About */}
+      <SettingsGroup label="About">
+        <ListItem
+          title="{{DISPLAY_NAME}} v1.0.0"
+          subtitle="AI chat for G2 smart glasses"
+        />
+      </SettingsGroup>
+    </main>
+  )
+}

package/templates/chat/src/types.ts

@@ -0,0 +1,13 @@
+export interface Message {
+  id: string
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  timestamp: number
+}
+
+export interface ChatSettings {
+  provider: 'openai' | 'anthropic' | 'local'
+  apiKey: string
+  voiceEnabled: boolean
+  darkMode: boolean
+}

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

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

package/templates/chat/template.json

@@ -0,0 +1,7 @@
+{
+  "name": "chat",
+  "displayName": "AI Chat",
+  "description": "AI chat interface with ChatContainer, voice input, and G2 glasses display",
+  "tags": ["ai", "chat", "voice"],
+  "components": ["AppShell", "NavHeader", "Button", "ChatContainer", "ChatBubble", "ChatInput", "ChatThinking", "VoiceInput", "SettingsGroup", "ListItem", "Select", "Toggle", "Input"]
+}

package/templates/chat/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/chat/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/chat/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/dashboard/README.md

@@ -0,0 +1,17 @@
+# {{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
+```
+
+## Build for Even Hub
+
+```bash
+npm run build
+npx @evenrealities/evenhub-cli pack app.json dist
+```

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

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import { AppShell, NavBar } from 'even-toolkit/web'
+import { OverviewScreen } from './screens/OverviewScreen'
+import { ChartsScreen } from './screens/ChartsScreen'
+import { SettingsScreen } from './screens/SettingsScreen'
+import { AppGlasses } from './glass/AppGlasses'
+
+const tabs = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'charts', label: 'Charts' },
+  { id: 'settings', label: 'Settings' },
+]
+
+export function App() {
+  const [tab, setTab] = useState('overview')
+
+  return (
+    <AppShell header={<NavBar items={tabs} activeId={tab} onNavigate={setTab} />}>
+      <AppGlasses />
+      <div className="px-3 pt-4 pb-8">
+        {tab === 'overview' && <OverviewScreen />}
+        {tab === 'charts' && <ChartsScreen />}
+        {tab === 'settings' && <SettingsScreen />}
+      </div>
+    </AppShell>
+  )
+}

package/templates/dashboard/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/dashboard/src/glass/AppGlasses.tsx

@@ -0,0 +1,53 @@
+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: ['{{DISPLAY_NAME}} Dashboard'],
+    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/dashboard/src/glass/screens/home.ts

@@ -0,0 +1,23 @@
+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/dashboard/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/dashboard/src/glass/shared.ts

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

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

@@ -0,0 +1,22 @@
+import { createSplash, TILE_PRESETS } from 'even-toolkit/splash'
+
+export function renderSplash(ctx: CanvasRenderingContext2D, w: number, h: number) {
+  const fg = '#e0e0e0'
+  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}}', w / 2, 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/dashboard/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/dashboard/src/screens/ChartsScreen.tsx

@@ -0,0 +1,99 @@
+import { ScreenHeader, LineChart, BarChart, PieChart, Card } from 'even-toolkit/web'
+import type { LineChartPoint, BarChartItem, PieChartItem } from 'even-toolkit/web'
+
+/* ── Monthly revenue data (12 months) ─────────────────────────── */
+
+const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const revenueData: LineChartPoint[] = [
+  { x: 0, y: 28400, label: 'Jan' },
+  { x: 1, y: 31200, label: 'Feb' },
+  { x: 2, y: 29800, label: 'Mar' },
+  { x: 3, y: 34600, label: 'Apr' },
+  { x: 4, y: 37100, label: 'May' },
+  { x: 5, y: 35800, label: 'Jun' },
+  { x: 6, y: 39200, label: 'Jul' },
+  { x: 7, y: 41500, label: 'Aug' },
+  { x: 8, y: 40100, label: 'Sep' },
+  { x: 9, y: 44300, label: 'Oct' },
+  { x: 10, y: 46800, label: 'Nov' },
+  { x: 11, y: 48200, label: 'Dec' },
+]
+
+/* ── Weekly breakdown (7 days) ─────────────────────────────────── */
+
+const weeklyData: BarChartItem[] = [
+  { label: 'Mon', value: 8420 },
+  { label: 'Tue', value: 9150 },
+  { label: 'Wed', value: 8780 },
+  { label: 'Thu', value: 9340 },
+  { label: 'Fri', value: 7860 },
+  { label: 'Sat', value: 4120 },
+  { label: 'Sun', value: 3580 },
+]
+
+/* ── Traffic sources (pie/donut) ───────────────────────────────── */
+
+const trafficSources: PieChartItem[] = [
+  { label: 'Organic Search', value: 4280, color: 'var(--color-accent)' },
+  { label: 'Direct', value: 2140, color: 'var(--color-positive)' },
+  { label: 'Social Media', value: 1630, color: 'var(--color-text-dim)' },
+  { label: 'Referral', value: 890, color: 'var(--color-border)' },
+]
+
+/* ── Component ─────────────────────────────────────────────────── */
+
+export function ChartsScreen() {
+  return (
+    <div className="flex flex-col gap-6">
+      <ScreenHeader title="Charts" />
+
+      {/* Revenue trend */}
+      <div className="flex flex-col gap-3">
+        <div className="flex items-baseline justify-between">
+          <div className="text-[13px] tracking-[-0.13px] text-text-dim">Monthly Revenue</div>
+          <div className="text-[11px] tracking-[-0.11px] text-text-dim">Jan - Dec 2025</div>
+        </div>
+        <Card className="p-4 overflow-hidden">
+          <LineChart
+            data={revenueData}
+            height={220}
+            showArea
+            showGrid
+            showLabels
+            color="var(--color-accent)"
+          />
+        </Card>
+      </div>
+
+      {/* Weekly breakdown */}
+      <div className="flex flex-col gap-3">
+        <div className="flex items-baseline justify-between">
+          <div className="text-[13px] tracking-[-0.13px] text-text-dim">Weekly Revenue</div>
+          <div className="text-[11px] tracking-[-0.11px] text-text-dim">This week</div>
+        </div>
+        <Card className="p-4 overflow-hidden">
+          <BarChart
+            data={weeklyData}
+            height={200}
+            showLabels
+            color="var(--color-accent)"
+          />
+        </Card>
+      </div>
+
+      {/* Traffic sources donut */}
+      <div className="flex flex-col gap-3">
+        <div className="text-[13px] tracking-[-0.13px] text-text-dim">Traffic Sources</div>
+        <Card className="p-4 flex justify-center">
+          <PieChart
+            data={trafficSources}
+            size={180}
+            donut
+            centerLabel="8,940"
+          />
+        </Card>
+      </div>
+    </div>
+  )
+}