@even-toolkit/create-even-app 1.1.0

package/index.js

@@ -0,0 +1,159 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = path.join(__dirname, 'templates');
+
+const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+const ask = (q) => new Promise((resolve) => rl.question(q, resolve));
+
+// ── Load available templates ──
+
+function loadTemplates() {
+  const dirs = fs.readdirSync(TEMPLATES_DIR).filter((d) =>
+    fs.statSync(path.join(TEMPLATES_DIR, d)).isDirectory() &&
+    fs.existsSync(path.join(TEMPLATES_DIR, d, 'template.json'))
+  );
+  return dirs.map((d) => {
+    const manifest = JSON.parse(fs.readFileSync(path.join(TEMPLATES_DIR, d, 'template.json'), 'utf8'));
+    return { dir: d, ...manifest };
+  });
+}
+
+// ── Interactive template picker ──
+
+async function pickTemplate(templates, preselected) {
+  if (preselected) {
+    const match = templates.find((t) => t.name === preselected || t.dir === preselected);
+    if (match) return match;
+    console.error(`Template "${preselected}" not found. Available: ${templates.map((t) => t.name).join(', ')}`);
+    process.exit(1);
+  }
+
+  console.log('\nAvailable templates:\n');
+  templates.forEach((t, i) => {
+    console.log(`  ${i + 1}. ${t.name.padEnd(14)} — ${t.description}`);
+  });
+  console.log();
+
+  const choice = await ask(`Choose a template [1-${templates.length}] (default 1): `);
+  const idx = (parseInt(choice, 10) || 1) - 1;
+  if (idx < 0 || idx >= templates.length) {
+    console.error('Invalid choice.');
+    process.exit(1);
+  }
+  return templates[idx];
+}
+
+// ── Copy directory recursively, replacing tokens ──
+
+const TOKEN_FILES = new Set([
+  'package.json', 'app.json', 'index.html', 'README.md',
+  'App.tsx', 'main.tsx', 'shell.tsx', 'splash.ts', 'AppGlasses.tsx', 'selectors.ts',
+]);
+
+function copyDir(src, dest, tokens) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    if (entry.name === 'template.json' || entry.name === 'node_modules') continue;
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath, tokens);
+    } else {
+      let content = fs.readFileSync(srcPath, 'utf8');
+      if (TOKEN_FILES.has(entry.name) || entry.name.endsWith('.tsx') || entry.name.endsWith('.ts') || entry.name.endsWith('.json') || entry.name.endsWith('.html') || entry.name.endsWith('.md')) {
+        for (const [key, value] of Object.entries(tokens)) {
+          content = content.replaceAll(key, value);
+        }
+      }
+      fs.writeFileSync(destPath, content);
+    }
+  }
+}
+
+// ── Main ──
+
+async function main() {
+  const args = process.argv.slice(2);
+  let appName = null;
+  let templateName = null;
+
+  // Parse args
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--template' || args[i] === '-t') {
+      templateName = args[++i];
+    } else if (!args[i].startsWith('-')) {
+      appName = args[i];
+    }
+  }
+
+  console.log(`
+  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+  ░  @even-toolkit/create-even-app    ░
+  ░  G2 Smart Glasses App Scaffold    ░
+  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+  `);
+
+  // App name
+  if (!appName) {
+    appName = await ask('App name (e.g. my-app): ');
+  }
+  if (!appName) {
+    console.error('App name is required.');
+    process.exit(1);
+  }
+
+  const dir = path.resolve(process.cwd(), appName);
+  if (fs.existsSync(dir)) {
+    console.error(`Directory "${appName}" already exists.`);
+    process.exit(1);
+  }
+
+  // Template selection
+  const templates = loadTemplates();
+  if (templates.length === 0) {
+    console.error('No templates found in templates/ directory.');
+    process.exit(1);
+  }
+  const template = await pickTemplate(templates, templateName);
+
+  // Package ID
+  const defaultId = `com.${appName.replace(/[^a-z0-9]/g, '')}.g2`;
+  const packageId = await ask(`Package ID (${defaultId}): `) || defaultId;
+
+  const displayName = appName
+    .split(/[-_]/)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+
+  rl.close();
+
+  console.log(`\nScaffolding "${displayName}" with "${template.name}" template...\n`);
+
+  // Copy template with token replacement
+  const tokens = {
+    '{{APP_NAME}}': appName,
+    '{{DISPLAY_NAME}}': displayName,
+    '{{DISPLAY_NAME_UPPER}}': displayName.toUpperCase(),
+    '{{PACKAGE_ID}}': packageId,
+  };
+  copyDir(path.join(TEMPLATES_DIR, template.dir), dir, tokens);
+
+  console.log(`Done! Next steps:\n`);
+  console.log(`  cd ${appName}`);
+  console.log(`  npm install`);
+  console.log(`  npm run dev\n`);
+  console.log(`  # Build for Even Hub:`);
+  console.log(`  npm run build`);
+  console.log(`  npx @evenrealities/evenhub-cli pack app.json dist\n`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@even-toolkit/create-even-app",
+  "version": "1.1.0",
+  "description": "Scaffold a new Even Realities G2 glasses app from a template gallery",
+  "type": "module",
+  "bin": {
+    "create-even-app": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "templates/"
+  ],
+  "keywords": [
+    "even-realities",
+    "even-toolkit",
+    "g2-glasses",
+    "smart-glasses",
+    "scaffold",
+    "create-app",
+    "template"
+  ],
+  "author": "fabioglimb",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fabioglimb/create-even-app"
+  }
+}

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

@@ -0,0 +1,61 @@
+import { Routes, Route, useNavigate, useLocation } from 'react-router'
+import { AppShell, NavHeader, Button } from 'even-toolkit/web'
+import { IcSettings, IcChevronBack } from 'even-toolkit/web/icons/svg-icons'
+import { ChatProvider } from './contexts/ChatContext'
+import { ChatScreen } from './screens/ChatScreen'
+import { Settings } from './screens/Settings'
+import { AppGlasses } from './glass/AppGlasses'
+
+function ChatLayout() {
+  const navigate = useNavigate()
+
+  return (
+    <AppShell
+      header={
+        <NavHeader
+          title="{{DISPLAY_NAME}}"
+          right={
+            <Button variant="ghost" size="icon" onClick={() => navigate('/settings')}>
+              <IcSettings className="w-5 h-5" />
+            </Button>
+          }
+        />
+      }
+    >
+      <ChatScreen />
+      <AppGlasses />
+    </AppShell>
+  )
+}
+
+function SettingsLayout() {
+  const navigate = useNavigate()
+
+  return (
+    <AppShell
+      header={
+        <NavHeader
+          title="Settings"
+          left={
+            <Button variant="ghost" size="icon" onClick={() => navigate('/')}>
+              <IcChevronBack className="w-5 h-5" />
+            </Button>
+          }
+        />
+      }
+    >
+      <Settings />
+    </AppShell>
+  )
+}
+
+export function App() {
+  return (
+    <ChatProvider>
+      <Routes>
+        <Route path="/" element={<ChatLayout />} />
+        <Route path="/settings" element={<SettingsLayout />} />
+      </Routes>
+    </ChatProvider>
+  )
+}

package/templates/chat/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/chat/src/contexts/ChatContext.tsx

@@ -0,0 +1,99 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react'
+import type { Message, ChatSettings } from '../types'
+
+interface ChatContextValue {
+  messages: Message[]
+  isLoading: boolean
+  settings: ChatSettings
+  setSettings: (settings: ChatSettings) => void
+  sendMessage: (content: string) => void
+  clearMessages: () => void
+}
+
+const ChatContext = createContext<ChatContextValue | null>(null)
+
+const SAMPLE_MESSAGES: Message[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: 'What can you help me with?',
+    timestamp: Date.now() - 120000,
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    content: 'I can help you with a wide range of tasks — answering questions, writing, analysis, coding, brainstorming, and more. I can also display key information on your G2 glasses for quick, hands-free reference. What would you like to work on?',
+    timestamp: Date.now() - 110000,
+  },
+  {
+    id: '3',
+    role: 'user',
+    content: 'Show me the weather forecast for today.',
+    timestamp: Date.now() - 60000,
+  },
+  {
+    id: '4',
+    role: 'assistant',
+    content: 'Here is today\'s forecast:\n\nMostly sunny, high of 22C / 72F with light winds from the northwest. UV index is moderate — sunglasses recommended (you\'re already wearing them). No rain expected until Thursday.',
+    timestamp: Date.now() - 50000,
+  },
+]
+
+const SIMULATED_RESPONSES = [
+  'That\'s a great question. Let me think about it for a moment.\n\nBased on what I know, the answer involves a few key considerations. Would you like me to go deeper into any particular aspect?',
+  'I\'ve processed your request. Here is what I found:\n\nThe information you\'re looking for can be broken down into three main areas. I\'ll summarize the key points and push them to your glasses display for quick reference.',
+  'Interesting thought. Here\'s my perspective on it:\n\nThere are multiple angles to consider here. The most important factor is understanding the context and constraints involved. Let me know if you\'d like more detail on any specific part.',
+]
+
+export function ChatProvider({ children }: { children: ReactNode }) {
+  const [messages, setMessages] = useState<Message[]>(SAMPLE_MESSAGES)
+  const [isLoading, setIsLoading] = useState(false)
+  const [settings, setSettings] = useState<ChatSettings>({
+    provider: 'openai',
+    apiKey: '',
+    voiceEnabled: true,
+    darkMode: false,
+  })
+
+  const sendMessage = useCallback((content: string) => {
+    const userMessage: Message = {
+      id: crypto.randomUUID(),
+      role: 'user',
+      content,
+      timestamp: Date.now(),
+    }
+
+    setMessages((prev) => [...prev, userMessage])
+    setIsLoading(true)
+
+    // Simulate AI response
+    const delay = 1200 + Math.random() * 1800
+    setTimeout(() => {
+      const response = SIMULATED_RESPONSES[Math.floor(Math.random() * SIMULATED_RESPONSES.length)]
+      const assistantMessage: Message = {
+        id: crypto.randomUUID(),
+        role: 'assistant',
+        content: response,
+        timestamp: Date.now(),
+      }
+      setMessages((prev) => [...prev, assistantMessage])
+      setIsLoading(false)
+    }, delay)
+  }, [])
+
+  const clearMessages = useCallback(() => {
+    setMessages([])
+  }, [])
+
+  return (
+    <ChatContext.Provider value={{ messages, isLoading, settings, setSettings, sendMessage, clearMessages }}>
+      {children}
+    </ChatContext.Provider>
+  )
+}
+
+export function useChat() {
+  const ctx = useContext(ChatContext)
+  if (!ctx) throw new Error('useChat must be used within ChatProvider')
+  return ctx
+}

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

@@ -0,0 +1,70 @@
+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 { useChat } from '../contexts/ChatContext'
+
+const deriveScreen = createScreenMapper([
+  { pattern: '/', screen: 'home' },
+  { pattern: '/settings', screen: 'home' },
+], 'home')
+
+const homeTiles = getHomeTiles(appSplash)
+
+export function AppGlasses() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { messages } = useChat()
+  const flashPhase = useFlashPhase(deriveScreen(location.pathname) === 'home')
+
+  const snapshotRef = useMemo(() => ({
+    current: null as AppSnapshot | null,
+  }), [])
+
+  // Show recent messages on the glasses display
+  const recentItems = messages
+    .slice(-6)
+    .map((msg) => {
+      const prefix = msg.role === 'user' ? 'You' : 'AI'
+      const text = msg.content.length > 60 ? msg.content.slice(0, 57) + '...' : msg.content
+      return `${prefix}: ${text}`
+    })
+
+  if (recentItems.length === 0) {
+    recentItems.push('{{DISPLAY_NAME}} ready', 'Send a message to begin')
+  }
+
+  const snapshot: AppSnapshot = {
+    items: recentItems,
+    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/chat/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/chat/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/chat/src/glass/shared.ts

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

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