@even-toolkit/create-even-app 1.1.0

package/templates/media/src/screens/AudioScreen.tsx

@@ -0,0 +1,78 @@
+import { Card, ListItem, ScreenHeader, Button, useDrawerHeader } from 'even-toolkit/web'
+import { IcEditPlay, IcEditPause } from 'even-toolkit/web/icons/svg-icons'
+import { useMedia } from '../contexts/MediaContext'
+
+export function AudioScreen() {
+  const { audioTracks, selectedTrackId, setSelectedTrackId } = useMedia()
+
+  useDrawerHeader({ title: 'Audio' })
+
+  const selectedTrack = audioTracks.find((t) => t.id === selectedTrackId)
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <ScreenHeader
+        title="Audio"
+        subtitle={`${audioTracks.length} track${audioTracks.length !== 1 ? 's' : ''}`}
+      />
+
+      <div className="rounded-[6px] overflow-hidden divide-y divide-border">
+        {audioTracks.map((track) => (
+          <ListItem
+            key={track.id}
+            title={track.title}
+            subtitle={track.artist}
+            trailing={
+              <div className="flex items-center gap-3">
+                <span className="text-[11px] tracking-[-0.11px] text-text-dim tabular-nums">
+                  {track.duration}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setSelectedTrackId(selectedTrackId === track.id ? null : track.id)
+                  }}
+                  className="w-8 h-8 rounded-full bg-accent text-text-highlight"
+                >
+                  {selectedTrackId === track.id ? (
+                    <IcEditPause width={14} height={14} />
+                  ) : (
+                    <IcEditPlay width={14} height={14} />
+                  )}
+                </Button>
+              </div>
+            }
+            onPress={() => setSelectedTrackId(track.id)}
+          />
+        ))}
+      </div>
+
+      {selectedTrack && (
+        <Card className="p-3 mt-3">
+          <div className="flex items-center gap-3">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setSelectedTrackId(null)}
+              className="shrink-0 w-10 h-10 rounded-full bg-accent text-text-highlight"
+            >
+              <IcEditPause width={16} height={16} />
+            </Button>
+            <div className="flex-1 min-w-0">
+              <p className="text-[15px] tracking-[-0.15px] text-text truncate">{selectedTrack.title}</p>
+              <p className="text-[11px] tracking-[-0.11px] text-text-dim">{selectedTrack.artist}</p>
+            </div>
+            <span className="text-[13px] tracking-[-0.13px] text-text-dim tabular-nums shrink-0">
+              {selectedTrack.duration}
+            </span>
+          </div>
+          <div className="mt-2 h-1 bg-surface rounded-full overflow-hidden">
+            <div className="h-full bg-accent rounded-full w-1/3" />
+          </div>
+        </Card>
+      )}
+    </main>
+  )
+}

package/templates/media/src/screens/GalleryScreen.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { CategoryFilter, BottomSheet, Card, ScreenHeader, Button, useDrawerHeader } from 'even-toolkit/web'
+import { IcGuideChevronSmallBack, IcGuideChevronSmallDrillIn } from 'even-toolkit/web/icons/svg-icons'
+import { useMedia } from '../contexts/MediaContext'
+import { ALL_FILTER, CATEGORIES, type CategoryFilter as CategoryFilterType } from '../types'
+
+const FILTER_OPTIONS = [ALL_FILTER, ...CATEGORIES]
+
+export function GalleryScreen() {
+  const { filteredGallery, selectedCategory, setSelectedCategory, gridColumns } = useMedia()
+  const [viewerIndex, setViewerIndex] = useState<number | null>(null)
+
+  useDrawerHeader({})
+
+  const selectedItem = viewerIndex !== null ? filteredGallery[viewerIndex] : null
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <ScreenHeader
+        title="Gallery"
+        subtitle={`${filteredGallery.length} item${filteredGallery.length !== 1 ? 's' : ''}`}
+      />
+
+      <CategoryFilter
+        categories={FILTER_OPTIONS}
+        selected={selectedCategory}
+        onSelect={(c) => setSelectedCategory(c as CategoryFilterType)}
+      />
+
+      <div className={`grid gap-3 ${gridColumns === 2 ? 'grid-cols-2' : 'grid-cols-3'}`}>
+        {filteredGallery.map((item, index) => (
+          <Card
+            key={item.id}
+            className="overflow-hidden cursor-pointer"
+            onClick={() => setViewerIndex(index)}
+          >
+            <div
+              className="w-full aspect-square rounded-[6px]"
+              style={{ background: item.gradient }}
+            />
+            <div className="p-2">
+              <p className="text-[13px] tracking-[-0.13px] text-text truncate">{item.title}</p>
+              <p className="text-[11px] tracking-[-0.11px] text-text-dim">{item.date}</p>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      <BottomSheet open={viewerIndex !== null} onClose={() => setViewerIndex(null)}>
+        {selectedItem && (
+          <div className="px-4 pb-2">
+            <div
+              className="w-full aspect-video rounded-[6px] mb-3"
+              style={{ background: selectedItem.gradient }}
+            />
+            <div className="flex items-center justify-between mb-2">
+              <div>
+                <p className="text-[17px] tracking-[-0.17px] text-text">{selectedItem.title}</p>
+                <p className="text-[13px] tracking-[-0.13px] text-text-dim">
+                  {selectedItem.category} &middot; {selectedItem.date}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center justify-between pt-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  if (viewerIndex !== null && viewerIndex > 0) setViewerIndex(viewerIndex - 1)
+                }}
+                disabled={viewerIndex === 0}
+                className="flex items-center gap-1 text-[13px] tracking-[-0.13px] text-text-dim"
+              >
+                <IcGuideChevronSmallBack width={16} height={16} />
+                Previous
+              </Button>
+              <span className="text-[11px] tracking-[-0.11px] text-text-dim tabular-nums">
+                {viewerIndex !== null ? viewerIndex + 1 : 0} / {filteredGallery.length}
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  if (viewerIndex !== null && viewerIndex < filteredGallery.length - 1) setViewerIndex(viewerIndex + 1)
+                }}
+                disabled={viewerIndex === filteredGallery.length - 1}
+                className="flex items-center gap-1 text-[13px] tracking-[-0.13px] text-text-dim"
+              >
+                Next
+                <IcGuideChevronSmallDrillIn width={16} height={16} />
+              </Button>
+            </div>
+          </div>
+        )}
+      </BottomSheet>
+    </main>
+  )
+}

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

@@ -0,0 +1,86 @@
+import { useState } from 'react'
+import { SettingsGroup, Toggle, ListItem, Card, Button, Divider, useDrawerHeader } from 'even-toolkit/web'
+import { useMedia } from '../contexts/MediaContext'
+
+export function Settings() {
+  const { gridColumns, setGridColumns, uploads, clearUploads } = useMedia()
+  const [confirmClear, setConfirmClear] = useState(false)
+
+  useDrawerHeader({ title: 'Settings', backTo: '/' })
+
+  function handleClearCache() {
+    if (!confirmClear) {
+      setConfirmClear(true)
+      return
+    }
+    clearUploads()
+    setConfirmClear(false)
+  }
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-6">
+      <SettingsGroup label="Display">
+        <Card className="p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-[15px] tracking-[-0.15px] text-text">Grid Columns</p>
+              <p className="text-[11px] tracking-[-0.11px] text-text-dim mt-0.5">
+                Toggle between 2 and 3 column layout
+              </p>
+            </div>
+            <Toggle
+              checked={gridColumns === 2}
+              onChange={(v) => setGridColumns(v ? 2 : 3)}
+            />
+          </div>
+          <Divider />
+          <div>
+            <p className="text-[15px] tracking-[-0.15px] text-text">Thumbnail Size</p>
+            <p className="text-[11px] tracking-[-0.11px] text-text-dim mt-0.5">
+              {gridColumns === 2 ? 'Large thumbnails (2 columns)' : 'Compact thumbnails (3 columns)'}
+            </p>
+          </div>
+        </Card>
+      </SettingsGroup>
+
+      <SettingsGroup label="Storage">
+        <Card className="divide-y divide-border">
+          <div>
+            <ListItem
+              title={confirmClear ? 'Tap again to confirm' : 'Clear Cache'}
+              subtitle={`${uploads.length} uploaded file${uploads.length !== 1 ? 's' : ''} cached`}
+              onPress={handleClearCache}
+            />
+            {confirmClear && (
+              <div className="px-4 pb-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full"
+                  onClick={() => setConfirmClear(false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </div>
+          <ListItem
+            title="Storage Used"
+            subtitle="In-memory only (no persistent storage)"
+          />
+        </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 media gallery app for Even Realities G2 smart glasses. Browse photos, listen to audio, and manage uploads.
+          </p>
+        </Card>
+      </SettingsGroup>
+    </main>
+  )
+}

package/templates/media/src/screens/UploadScreen.tsx

@@ -0,0 +1,95 @@
+import { FileUpload, EmptyState, ListItem, Card, Button, ScreenHeader, useDrawerHeader } from 'even-toolkit/web'
+import { IcEditUploadToCloud, IcEditTrash } from 'even-toolkit/web/icons/svg-icons'
+import { useMedia } from '../contexts/MediaContext'
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function formatTime(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`
+  return new Date(timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+export function UploadScreen() {
+  const { uploads, addUpload, removeUpload, clearUploads } = useMedia()
+
+  useDrawerHeader({ title: 'Upload' })
+
+  function handleFiles(files: File[]) {
+    files.forEach((file) => {
+      addUpload(file.name, formatSize(file.size), file.type || 'unknown')
+    })
+  }
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <ScreenHeader
+        title="Upload"
+        subtitle="Add media to your library"
+        actions={
+          uploads.length > 0 ? (
+            <Button variant="ghost" size="sm" onClick={clearUploads}>
+              Clear All
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <FileUpload
+        onFiles={handleFiles}
+        accept="image/*,audio/*,video/*"
+        multiple
+        label="Drop media files or tap to browse"
+      />
+
+      {uploads.length === 0 ? (
+        <EmptyState
+          icon={<IcEditUploadToCloud width={48} height={48} />}
+          title="No uploads yet"
+          description="Use the drop zone above to add photos, audio, or video files to your media library."
+        />
+      ) : (
+        <div>
+          <p className="text-[13px] tracking-[-0.13px] text-text-dim mb-2">
+            Recent Uploads ({uploads.length})
+          </p>
+          <Card className="rounded-[6px] overflow-hidden divide-y divide-border">
+            {uploads.map((upload) => (
+              <ListItem
+                key={upload.id}
+                title={upload.name}
+                subtitle={`${upload.size} \u00b7 ${upload.type}`}
+                trailing={
+                  <div className="flex items-center gap-2">
+                    <span className="text-[11px] tracking-[-0.11px] text-text-dim">
+                      {formatTime(upload.timestamp)}
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        removeUpload(upload.id)
+                      }}
+                      className="text-text-dim hover:text-negative"
+                    >
+                      <IcEditTrash width={16} height={16} />
+                    </Button>
+                  </div>
+                }
+              />
+            ))}
+          </Card>
+        </div>
+      )}
+    </main>
+  )
+}

package/templates/media/src/types.ts

@@ -0,0 +1,29 @@
+export type MediaCategory = 'Photos' | 'Artwork' | 'Screenshots'
+
+export interface GalleryItem {
+  id: string
+  title: string
+  category: MediaCategory
+  date: string
+  gradient: string
+}
+
+export interface AudioTrack {
+  id: string
+  title: string
+  artist: string
+  duration: string
+  durationSeconds: number
+}
+
+export interface UploadItem {
+  id: string
+  name: string
+  size: string
+  type: string
+  timestamp: number
+}
+
+export const CATEGORIES: MediaCategory[] = ['Photos', 'Artwork', 'Screenshots']
+export const ALL_FILTER = 'All'
+export type CategoryFilter = typeof ALL_FILTER | MediaCategory

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

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

package/templates/media/template.json

@@ -0,0 +1,7 @@
+{
+  "name": "media",
+  "displayName": "Media Gallery",
+  "description": "A media gallery app with photo grid, audio player, file uploads, and glass display",
+  "tags": ["media", "gallery", "audio", "photos"],
+  "components": ["DrawerShell", "Card", "ListItem", "CategoryFilter", "BottomSheet", "ImageViewer", "AudioPlayer", "FileUpload", "EmptyState", "SettingsGroup", "Toggle", "Button", "ScreenHeader"]
+}

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

@@ -0,0 +1,50 @@
+import { Routes, Route } from 'react-router'
+import { AppShell, NavHeader, ScreenHeader, Card, Button, SectionHeader, ListItem } from 'even-toolkit/web'
+import { AppGlasses } from './glass/AppGlasses'
+
+function Home() {
+  return (
+    <AppShell header={<NavHeader title="{{DISPLAY_NAME}}" />}>
+      <div className="px-3 pt-4 pb-8 space-y-3">
+        <ScreenHeader
+          title="Welcome"
+          subtitle="Your G2 glasses app is ready"
+        />
+
+        <Card>
+          <ListItem
+            title="Get started"
+            subtitle="Edit src/App.tsx to build your app"
+          />
+          <ListItem
+            title="Components"
+            subtitle="55+ React components from even-toolkit"
+          />
+          <ListItem
+            title="Glasses SDK"
+            subtitle="G2 display, gestures, and speech-to-text"
+          />
+        </Card>
+
+        <SectionHeader title="Quick links" />
+        <div className="flex gap-2">
+          <Button variant="highlight" size="sm" onClick={() => window.open('https://www.npmjs.com/package/even-toolkit', '_blank')}>
+            Toolkit Docs
+          </Button>
+          <Button variant="highlight" size="sm" onClick={() => window.open('https://even-demo.vercel.app', '_blank')}>
+            Component Demo
+          </Button>
+        </div>
+      </div>
+      <AppGlasses />
+    </AppShell>
+  )
+}
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/*" element={<Home />} />
+    </Routes>
+  )
+}

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