@even-toolkit/create-even-app 1.1.0

package/templates/tracker/src/contexts/TrackerContext.tsx

@@ -0,0 +1,193 @@
+import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from 'react'
+import type { TrackerEntry, ActivityType, GoalTargets, DayRecord } from '../types'
+import { DEFAULT_GOALS } from '../types'
+
+interface TrackerContextValue {
+  entries: TrackerEntry[]
+  goals: GoalTargets
+  setGoals: (g: GoalTargets) => void
+  addEntry: (activity: ActivityType, value: number, note: string) => TrackerEntry
+  deleteEntry: (id: string) => void
+  getTodayEntries: () => TrackerEntry[]
+  getTodayTotal: (activity: ActivityType) => number
+  getDayRecords: () => DayRecord[]
+  showCompletionBadge: boolean
+  setShowCompletionBadge: (v: boolean) => void
+}
+
+const TrackerContext = createContext<TrackerContextValue | null>(null)
+
+const ENTRIES_KEY = '{{APP_NAME}}-entries'
+const GOALS_KEY = '{{APP_NAME}}-goals'
+const SETTINGS_KEY = '{{APP_NAME}}-settings'
+
+function generateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
+}
+
+function toDateKey(ts: number): string {
+  const d = new Date(ts)
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+function todayKey(): string {
+  return toDateKey(Date.now())
+}
+
+function generateSampleData(): TrackerEntry[] {
+  const now = Date.now()
+  const DAY = 86400000
+  const entries: TrackerEntry[] = []
+
+  for (let d = 6; d >= 0; d--) {
+    const dayBase = now - d * DAY
+    const dateStart = new Date(dayBase)
+    dateStart.setHours(8, 0, 0, 0)
+    const base = dateStart.getTime()
+
+    // Water entries
+    const waterCount = d === 0 ? 6 : Math.floor(Math.random() * 4) + 5
+    for (let i = 0; i < waterCount; i++) {
+      entries.push({
+        id: generateId() + `-w${d}-${i}`,
+        activity: 'Water',
+        value: 1,
+        note: '',
+        timestamp: base + i * 3600000,
+      })
+    }
+
+    // Steps entry
+    const steps = d === 0 ? 7500 : Math.floor(Math.random() * 5000) + 6000
+    entries.push({
+      id: generateId() + `-s${d}`,
+      activity: 'Steps',
+      value: steps,
+      note: d === 0 ? '' : 'Daily walk',
+      timestamp: base + 10 * 3600000,
+    })
+
+    // Focus entry
+    const focus = d === 0 ? 45 : Math.floor(Math.random() * 30) + 30
+    entries.push({
+      id: generateId() + `-f${d}`,
+      activity: 'Focus',
+      value: focus,
+      note: d === 0 ? '' : 'Deep work session',
+      timestamp: base + 14 * 3600000,
+    })
+  }
+
+  return entries
+}
+
+function loadEntries(): TrackerEntry[] {
+  try {
+    const raw = localStorage.getItem(ENTRIES_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw)
+      if (Array.isArray(parsed) && parsed.length > 0) return parsed
+    }
+  } catch { /* ignore */ }
+  return generateSampleData()
+}
+
+function loadGoals(): GoalTargets {
+  try {
+    const raw = localStorage.getItem(GOALS_KEY)
+    if (raw) return JSON.parse(raw)
+  } catch { /* ignore */ }
+  return DEFAULT_GOALS
+}
+
+function loadSettings(): { showCompletionBadge: boolean } {
+  try {
+    const raw = localStorage.getItem(SETTINGS_KEY)
+    if (raw) return JSON.parse(raw)
+  } catch { /* ignore */ }
+  return { showCompletionBadge: true }
+}
+
+export function TrackerProvider({ children }: { children: ReactNode }) {
+  const [entries, setEntries] = useState<TrackerEntry[]>(loadEntries)
+  const [goals, setGoals] = useState<GoalTargets>(loadGoals)
+  const [showCompletionBadge, setShowCompletionBadge] = useState(() => loadSettings().showCompletionBadge)
+
+  useEffect(() => {
+    localStorage.setItem(ENTRIES_KEY, JSON.stringify(entries))
+  }, [entries])
+
+  useEffect(() => {
+    localStorage.setItem(GOALS_KEY, JSON.stringify(goals))
+  }, [goals])
+
+  useEffect(() => {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify({ showCompletionBadge }))
+  }, [showCompletionBadge])
+
+  const addEntry = useCallback((activity: ActivityType, value: number, note: string): TrackerEntry => {
+    const entry: TrackerEntry = {
+      id: generateId(),
+      activity,
+      value,
+      note,
+      timestamp: Date.now(),
+    }
+    setEntries((prev) => [entry, ...prev])
+    return entry
+  }, [])
+
+  const deleteEntry = useCallback((id: string) => {
+    setEntries((prev) => prev.filter((e) => e.id !== id))
+  }, [])
+
+  const getTodayEntries = useCallback(() => {
+    const key = todayKey()
+    return entries.filter((e) => toDateKey(e.timestamp) === key)
+  }, [entries])
+
+  const getTodayTotal = useCallback((activity: ActivityType) => {
+    const key = todayKey()
+    return entries
+      .filter((e) => toDateKey(e.timestamp) === key && e.activity === activity)
+      .reduce((sum, e) => sum + e.value, 0)
+  }, [entries])
+
+  const getDayRecords = useCallback((): DayRecord[] => {
+    const map = new Map<string, TrackerEntry[]>()
+    for (const entry of entries) {
+      const key = toDateKey(entry.timestamp)
+      const existing = map.get(key) ?? []
+      existing.push(entry)
+      map.set(key, existing)
+    }
+    return Array.from(map.entries())
+      .map(([date, dayEntries]) => ({ date, entries: dayEntries }))
+      .sort((a, b) => b.date.localeCompare(a.date))
+  }, [entries])
+
+  return (
+    <TrackerContext.Provider
+      value={{
+        entries,
+        goals,
+        setGoals,
+        addEntry,
+        deleteEntry,
+        getTodayEntries,
+        getTodayTotal,
+        getDayRecords,
+        showCompletionBadge,
+        setShowCompletionBadge,
+      }}
+    >
+      {children}
+    </TrackerContext.Provider>
+  )
+}
+
+export function useTracker() {
+  const ctx = useContext(TrackerContext)
+  if (!ctx) throw new Error('useTracker must be used within TrackerProvider')
+  return ctx
+}

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

@@ -0,0 +1,64 @@
+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 { useTracker } from '../contexts/TrackerContext'
+
+const deriveScreen = createScreenMapper([
+  { pattern: '/', screen: 'home' },
+], 'home')
+
+const homeTiles = getHomeTiles(appSplash)
+
+export function AppGlasses() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { goals, getTodayTotal } = useTracker()
+  const flashPhase = useFlashPhase(deriveScreen(location.pathname) === 'home')
+
+  const snapshotRef = useMemo(() => ({
+    current: null as AppSnapshot | null,
+  }), [])
+
+  const waterTotal = getTodayTotal('Water')
+  const stepsTotal = getTodayTotal('Steps')
+  const focusTotal = getTodayTotal('Focus')
+
+  const snapshot: AppSnapshot = {
+    items: [
+      `Water: ${waterTotal}/${goals.water}`,
+      `Steps: ${stepsTotal.toLocaleString()}/${goals.steps.toLocaleString()}`,
+      `Focus: ${focusTotal}/${goals.focus} min`,
+    ],
+    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/tracker/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/tracker/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/tracker/src/glass/shared.ts

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

package/templates/tracker/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/tracker/src/layouts/shell.tsx

@@ -0,0 +1,37 @@
+import { DrawerShell } from 'even-toolkit/web'
+import type { SideDrawerItem } from 'even-toolkit/web'
+
+const MENU_ITEMS: SideDrawerItem[] = [
+  { id: '/', label: 'Today', section: 'Tracker' },
+  { id: '/history', label: 'History', section: 'Tracker' },
+]
+
+const BOTTOM_ITEMS: SideDrawerItem[] = [
+  { id: '/settings', label: 'Settings', section: 'App' },
+]
+
+function getPageTitle(pathname: string): string {
+  if (pathname === '/') return '{{DISPLAY_NAME}}'
+  if (pathname === '/history') return 'History'
+  if (pathname === '/new') return 'New Entry'
+  if (pathname === '/settings') return 'Settings'
+  return '{{DISPLAY_NAME}}'
+}
+
+function deriveActiveId(pathname: string): string {
+  if (pathname === '/settings') return '/settings'
+  if (pathname === '/history') return '/history'
+  return '/'
+}
+
+export function Shell() {
+  return (
+    <DrawerShell
+      items={MENU_ITEMS}
+      bottomItems={BOTTOM_ITEMS}
+      title="{{DISPLAY_NAME}}"
+      getPageTitle={getPageTitle}
+      deriveActiveId={deriveActiveId}
+    />
+  )
+}

package/templates/tracker/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/tracker/src/screens/HistoryScreen.tsx

@@ -0,0 +1,106 @@
+import { useMemo } from 'react'
+import { Card, Calendar, Timeline, Badge, ScreenHeader } from 'even-toolkit/web'
+import type { CalendarEvent } from 'even-toolkit/web'
+import { useTracker } from '../contexts/TrackerContext'
+import type { DayRecord } from '../types'
+
+const ACTIVITY_COLORS: Record<string, string> = {
+  Water: 'var(--color-accent)',
+  Steps: 'var(--color-positive)',
+  Focus: 'var(--color-negative)',
+}
+
+function formatDayLabel(dateStr: string): string {
+  const d = new Date(dateStr + 'T12:00:00')
+  const today = new Date()
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+
+  if (d.toDateString() === today.toDateString()) return 'Today'
+  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
+  return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
+}
+
+function getDayCompletion(record: DayRecord, goals: { water: number; steps: number; focus: number }): number {
+  const waterTotal = record.entries.filter((e) => e.activity === 'Water').reduce((s, e) => s + e.value, 0)
+  const stepsTotal = record.entries.filter((e) => e.activity === 'Steps').reduce((s, e) => s + e.value, 0)
+  const focusTotal = record.entries.filter((e) => e.activity === 'Focus').reduce((s, e) => s + e.value, 0)
+
+  const waterPct = Math.min(waterTotal / goals.water, 1)
+  const stepsPct = Math.min(stepsTotal / goals.steps, 1)
+  const focusPct = Math.min(focusTotal / goals.focus, 1)
+
+  return Math.round(((waterPct + stepsPct + focusPct) / 3) * 100)
+}
+
+export function HistoryScreen() {
+  const { getDayRecords, goals, showCompletionBadge } = useTracker()
+  const dayRecords = getDayRecords()
+
+  // Calendar events from entries
+  const calendarEvents: CalendarEvent[] = useMemo(() => {
+    const events: CalendarEvent[] = []
+    for (const record of dayRecords) {
+      const activities = new Set(record.entries.map((e) => e.activity))
+      for (const activity of activities) {
+        const d = new Date(record.date + 'T12:00:00')
+        events.push({
+          id: `${record.date}-${activity}`,
+          title: activity,
+          start: d,
+          end: d,
+          color: ACTIVITY_COLORS[activity],
+        })
+      }
+    }
+    return events
+  }, [dayRecords])
+
+  // Recent 7 days for timeline
+  const recentDays = dayRecords.slice(0, 7)
+
+  const timelineEvents = useMemo(() => {
+    return recentDays.map((record) => {
+      const completion = getDayCompletion(record, goals)
+      const entryCount = record.entries.length
+      return {
+        id: record.date,
+        title: formatDayLabel(record.date),
+        subtitle: `${entryCount} ${entryCount === 1 ? 'entry' : 'entries'}`,
+        timestamp: `${completion}%`,
+        color: completion >= 80 ? 'var(--color-positive)' : completion >= 50 ? 'var(--color-accent)' : 'var(--color-negative)',
+      }
+    })
+  }, [recentDays, goals])
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <ScreenHeader
+        title="History"
+        subtitle={`${dayRecords.length} days tracked`}
+      />
+
+      {/* Calendar */}
+      <Card className="p-4">
+        <Calendar events={calendarEvents} />
+      </Card>
+
+      {/* Recent Activity Timeline */}
+      <Card className="p-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <p className="text-[15px] tracking-[-0.15px] text-text">Recent Activity</p>
+          {showCompletionBadge && recentDays.length > 0 && (
+            <Badge variant={getDayCompletion(recentDays[0], goals) >= 80 ? 'positive' : 'neutral'}>
+              {getDayCompletion(recentDays[0], goals)}% today
+            </Badge>
+          )}
+        </div>
+        {timelineEvents.length > 0 ? (
+          <Timeline events={timelineEvents} />
+        ) : (
+          <p className="text-[13px] tracking-[-0.13px] text-text-dim">No activity recorded yet.</p>
+        )}
+      </Card>
+    </main>
+  )
+}

package/templates/tracker/src/screens/NewEntryScreen.tsx

@@ -0,0 +1,135 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Card, Button, StepIndicator, Select, Slider, Input, Textarea, useDrawerHeader } from 'even-toolkit/web'
+import { useTracker } from '../contexts/TrackerContext'
+import { ACTIVITIES, ACTIVITY_UNITS, type ActivityType } from '../types'
+
+const ACTIVITY_OPTIONS = ACTIVITIES.map((a) => ({ value: a, label: a }))
+
+const ACTIVITY_DEFAULTS: Record<ActivityType, { min: number; max: number; step: number; initial: number }> = {
+  Water: { min: 1, max: 12, step: 1, initial: 1 },
+  Steps: { min: 500, max: 20000, step: 500, initial: 5000 },
+  Focus: { min: 5, max: 120, step: 5, initial: 25 },
+}
+
+export function NewEntryScreen() {
+  const navigate = useNavigate()
+  const { addEntry } = useTracker()
+
+  const [step, setStep] = useState(1)
+  const [activity, setActivity] = useState<ActivityType>('Water')
+  const [value, setValue] = useState(ACTIVITY_DEFAULTS.Water.initial)
+  const [note, setNote] = useState('')
+
+  useDrawerHeader({ title: 'New Entry', backTo: '/' })
+
+  function handleActivityChange(a: string) {
+    const act = a as ActivityType
+    setActivity(act)
+    setValue(ACTIVITY_DEFAULTS[act].initial)
+  }
+
+  function handleSave() {
+    addEntry(activity, value, note.trim())
+    navigate('/')
+  }
+
+  const canNext = step < 3
+  const canPrev = step > 1
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <StepIndicator
+        currentStep={step}
+        totalSteps={3}
+        onPrev={canPrev ? () => setStep((s) => s - 1) : undefined}
+        onNext={
+          step === 3
+            ? handleSave
+            : canNext
+              ? () => setStep((s) => s + 1)
+              : undefined
+        }
+        nextLabel={step === 3 ? 'Save' : undefined}
+      />
+
+      {/* Step 1: Select Activity */}
+      {step === 1 && (
+        <Card className="p-4 space-y-3">
+          <p className="text-[15px] tracking-[-0.15px] text-text">Select Activity</p>
+          <div className="space-y-1.5">
+            <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Activity type</label>
+            <Select
+              options={ACTIVITY_OPTIONS}
+              value={activity}
+              onValueChange={handleActivityChange}
+            />
+          </div>
+          <p className="text-[13px] tracking-[-0.13px] text-text-dim">
+            Track your {activity.toLowerCase()} intake for today.
+          </p>
+        </Card>
+      )}
+
+      {/* Step 2: Set Value */}
+      {step === 2 && (
+        <Card className="p-4 space-y-3">
+          <p className="text-[15px] tracking-[-0.15px] text-text">Set Value</p>
+          <div className="space-y-1.5">
+            <label className="text-[11px] tracking-[-0.11px] text-text-dim block">
+              {activity} ({ACTIVITY_UNITS[activity]})
+            </label>
+            <Slider
+              value={value}
+              onChange={setValue}
+              min={ACTIVITY_DEFAULTS[activity].min}
+              max={ACTIVITY_DEFAULTS[activity].max}
+              step={ACTIVITY_DEFAULTS[activity].step}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Exact value</label>
+            <Input
+              type="number"
+              value={String(value)}
+              onChange={(e) => {
+                const v = Number(e.target.value)
+                if (!isNaN(v) && v >= 0) setValue(v)
+              }}
+            />
+          </div>
+          <p className="text-[13px] tracking-[-0.13px] text-text-dim">
+            {value} {ACTIVITY_UNITS[activity]}
+          </p>
+        </Card>
+      )}
+
+      {/* Step 3: Add Note */}
+      {step === 3 && (
+        <Card className="p-4 space-y-3">
+          <p className="text-[15px] tracking-[-0.15px] text-text">Add Note</p>
+          <div className="space-y-1.5">
+            <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Note (optional)</label>
+            <Textarea
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder="Add a note about this entry..."
+              rows={4}
+            />
+          </div>
+          <div className="rounded-[6px] bg-surface p-3 space-y-1">
+            <p className="text-[13px] tracking-[-0.13px] text-text">Summary</p>
+            <p className="text-[11px] tracking-[-0.11px] text-text-dim">
+              {activity}: {value} {ACTIVITY_UNITS[activity]}
+            </p>
+            {note.trim() && (
+              <p className="text-[11px] tracking-[-0.11px] text-text-dim">
+                Note: {note.trim()}
+              </p>
+            )}
+          </div>
+        </Card>
+      )}
+    </main>
+  )
+}