feat(design): FocusCard hero, CountdownCard, data-* palette, swipe, touch-targets

Big design pass across Home + tokens + components.

— globals.css: new data-* palette (cool/warm/hot/good/info/rose/violet/mood)
  with theme-aware variants, .grain overlay utility, .num-display
  typography helper, .hit-zone 44px wrapper, .eyebrow label, .focus-card
  base, focus-visible outline-offset 3px, space/touch scale vars.
— FocusCard.tsx: context engine — пять состояний (morning-outfit,
  tram-imminent, event-upcoming, countdown, bill-due, night, quiet).
  Auto-rotates by hour + live data. 96px display numbers, accent-mixed
  surfaces, grain overlay.
— CountdownCard.tsx + /api/countdowns: rotating 8s list, persistent
  /data/tablet-countdowns.json, full CRUD. Default seeded with Токио.
— HomeTab: replaced plain Weather hero with FocusCard, added Row 4
  with CountdownCard. Pulls trams + countdowns for the Focus context.
— Swipe between tabs: pointer-level detection on <main>, data-swipe-ignore
  bails out inside modals + note swipe-to-delete + voice overlay.
— Touch-target sweep: TopBar HA dot → 44px hit-zone, sensor chip 44px
  min-height, forecast day buttons 92px min, DeviceCard toggle 60x36,
  CalendarTab prev/next/close/list all 44x44, NotesTab buttons 44x44,
  TimerHomeWidget + 44x44, WeatherDayModal chevrons 48x48, close 48.
— Hardcoded hex → data-* tokens: TopBar sensors, TransportWidget routes
  (via color-mix), DeviceCard full rewrite (per-kind accent, glass
  removed in favor of color-mix surfaces + proper mock-state treatment),
  NotesTab palette refreshed to match dark theme.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/page.tsx

@@ -14,9 +14,13 @@ import WeatherAnimation from '@/components/WeatherAnimation'
 import VoiceOverlay from '@/components/VoiceOverlay'
 import TimerWidget from '@/components/TimerWidget'
 import TimerHomeWidget from '@/components/TimerHomeWidget'
+import FocusCard from '@/components/FocusCard'
+import CountdownCard from '@/components/CountdownCard'
 
 type Tab = 'home' | 'devices' | 'calendar' | 'notes' | 'settings'
 
+const TAB_ORDER: Tab[] = ['home', 'devices', 'calendar', 'notes', 'settings']
+
 interface WeatherData {
   temp: string
   desc: string
@@ -311,7 +315,7 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
   }
 
   return (
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
+    <div data-swipe-ignore style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} onClick={onClose}>
       <motion.div
         key={day.date}
         drag="x"
@@ -345,11 +349,12 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
           {canPrev && (
             <button
               onClick={() => go(-1)}
+              aria-label="Предыдущий день"
               style={{
                 position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)',
-                width: 36, height: 36, borderRadius: 12,
+                width: 48, height: 48, borderRadius: 14,
                 background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
-                color: 'var(--text-secondary)', zIndex: 2,
+                color: 'var(--text-secondary)', zIndex: 2, fontSize: 22,
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}
             >‹</button>
@@ -357,11 +362,12 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
           {canNext && (
             <button
               onClick={() => go(1)}
+              aria-label="Следующий день"
               style={{
                 position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
-                width: 36, height: 36, borderRadius: 12,
+                width: 48, height: 48, borderRadius: 14,
                 background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
-                color: 'var(--text-secondary)', zIndex: 2,
+                color: 'var(--text-secondary)', zIndex: 2, fontSize: 22,
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}
             >›</button>
@@ -422,7 +428,8 @@ function WeatherDayModal({ day, days, current, onClose, onChange }: {
           )}
 
           <button onClick={onClose} style={{
-            width: '100%', padding: '12px', borderRadius: 14, marginTop: 12,
+            width: '100%', padding: '16px', borderRadius: 14, marginTop: 12,
+            minHeight: 48,
             background: 'var(--surface-2)', border: '1px solid var(--border-subtle)',
             color: 'var(--text-secondary)', fontSize: 14, fontWeight: 600,
           }}>
@@ -441,6 +448,8 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
   const [calLoading, setCalLoading] = useState(true)
   const [pinnedNotes, setPinnedNotes] = useState<any[]>([])
   const [selectedDay, setSelectedDay] = useState<any>(null)
+  const [countdowns, setCountdowns] = useState<{ label: string; date: string }[]>([])
+  const [tramNext, setTramNext] = useState<{ route: string; minutes: number; direction: string } | null>(null)
 
   useEffect(() => {
     fetch('/api/calendar?range=today')
@@ -479,8 +488,58 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
         setPinnedNotes((pinned.length ? pinned : all).slice(0, 3))
       })
       .catch(() => {})
+
+    // Countdowns
+    fetch('/api/countdowns')
+      .then(r => r.json())
+      .then(d => setCountdowns((d.countdowns || []).map((c: any) => ({ label: c.label, date: c.date }))))
+      .catch(() => {})
   }, [])
 
+  // Nearest upcoming tram — refresh every 30s so FocusCard stays current
+  useEffect(() => {
+    let cancelled = false
+    const STOP_IDS = [
+      { id: '16226', direction: 'в центр' },
+      { id: '16354', direction: 'от центра' },
+    ]
+    const load = async () => {
+      try {
+        const results = await Promise.all(
+          STOP_IDS.map(s =>
+            fetch(`/api/transport?stopId=${s.id}`)
+              .then(r => r.json())
+              .then(j => (j.arrivals || []).map((a: any) => ({ ...a, direction: s.direction })))
+              .catch(() => [])
+          )
+        )
+        const all = results.flat().filter(a => typeof a.minutes === 'number' && a.minutes >= 0)
+        all.sort((a: any, b: any) => a.minutes - b.minutes)
+        if (!cancelled) {
+          setTramNext(all[0] ? {
+            route: all[0].route,
+            minutes: all[0].minutes,
+            direction: all[0].direction,
+          } : null)
+        }
+      } catch {}
+    }
+    load()
+    const t = setInterval(load, 30_000)
+    return () => { cancelled = true; clearInterval(t) }
+  }, [])
+
+  // Next event (today or tomorrow) — сейчас or nearest upcoming within next 24h
+  const nextEvent = (() => {
+    const now = Date.now()
+    const pool = [...todayEvents, ...tomorrowEvents]
+      .filter(e => !e.allDay)
+      .map(e => ({ e, t: new Date(e.start).getTime() }))
+      .filter(({ t }) => t >= now - 5 * 60_000)
+      .sort((a, b) => a.t - b.t)
+    return pool[0]?.e || null
+  })()
+
 
 
   return (
@@ -489,87 +548,19 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
       padding: '18px 22px 24px',
       display: 'flex', flexDirection: 'column', gap: 14,
     }}>
-      {/* ───── Bento row: Hero weather + Tram ───── */}
+      {/* ───── Bento row: Focus hero + Tram ───── */}
       <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 14, alignItems: 'stretch' }}>
 
-        {/* Hero weather card */}
-        {weather ? (
-          <div
-            className="card-hero"
-            onClick={() => weather?.forecast?.[0] && setSelectedDay(weather.forecast[0])}
-            style={{
-              padding: '22px 24px',
-              display: 'flex', flexDirection: 'column',
-              position: 'relative', overflow: 'hidden',
-              cursor: 'pointer',
-            }}
-          >
-            {/* Decorative animation, large, behind */}
-            <div style={{
-              position: 'absolute', top: -24, right: -12,
-              opacity: 0.14, pointerEvents: 'none',
-            }}>
-              <WeatherAnimation condition={weather.desc} size={160} />
-            </div>
-
-            <div style={{
-              fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 700,
-              textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 8,
-              position: 'relative', zIndex: 1,
-            }}>
-              Сейчас
-            </div>
-
-            <div style={{
-              display: 'flex', alignItems: 'center', gap: 12,
-              position: 'relative', zIndex: 1, marginBottom: 6,
-            }}>
-              <div style={{
-                fontSize: 64, fontWeight: 800, letterSpacing: '-3px',
-                color: 'var(--text-primary)', lineHeight: 0.9,
-                fontVariantNumeric: 'tabular-nums',
-              }}>
-                {weather.temp}°
-              </div>
-              <WeatherAnimation condition={weather.desc} size={52} />
-            </div>
-
-            <div style={{
-              fontSize: 16, color: 'var(--text-primary)', fontWeight: 600,
-              position: 'relative', zIndex: 1, marginBottom: 12,
-            }}>
-              {weather.desc}
-            </div>
-
-            <div style={{
-              display: 'flex', gap: 16, flexWrap: 'wrap',
-              marginTop: 'auto', position: 'relative', zIndex: 1,
-            }}>
-              {weather.feelsLike && (
-                <div>
-                  <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Ощущается</div>
-                  <div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.feelsLike}°</div>
-                </div>
-              )}
-              {weather.humidity && (
-                <div>
-                  <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Влажность</div>
-                  <div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.humidity}</div>
-                </div>
-              )}
-              {weather.windSpeed && (
-                <div>
-                  <div style={{ fontSize: 10, color: 'var(--text-tertiary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Ветер</div>
-                  <div style={{ fontSize: 15, color: 'var(--text-primary)', fontWeight: 700, marginTop: 2 }}>{weather.windSpeed}</div>
-                </div>
-              )}
-            </div>
-          </div>
-        ) : (
-          <div className="card-hero" style={{ padding: '22px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)', fontSize: 13 }}>
-            Загрузка погоды...
-          </div>
-        )}
+        {/* Focus — контекст-hero */}
+        <FocusCard
+          weather={weather ? { temp: weather.temp, desc: weather.desc, feelsLike: weather.feelsLike } : null}
+          tramNext={tramNext}
+          nextEvent={nextEvent ? {
+            id: nextEvent.id, title: nextEvent.title, start: nextEvent.start,
+            allDay: nextEvent.allDay, ownerName: nextEvent.ownerName, color: nextEvent.color,
+          } : null}
+          countdowns={countdowns}
+        />
 
         {/* Tram */}
         <TransportWidget />
@@ -592,28 +583,28 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
                 <button
                   onClick={() => setSelectedDay(day)}
                   style={{
-                    flex: 1, padding: '8px 4px', borderRadius: 14,
+                    flex: 1, padding: '12px 8px', borderRadius: 14,
+                    minHeight: 92,
                     background: isToday ? 'var(--surface-2)' : 'transparent',
-                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
+                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                     transition: 'background 0.2s ease',
                   }}
                 >
                   <div style={{
-                    fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
+                    fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                     color: isToday ? 'var(--accent)' : 'var(--text-tertiary)',
                   }}>
                     {isToday ? 'Сей' : d.toLocaleDateString('ru-RU', { weekday: 'short' }).replace('.', '').slice(0, 2)}
                   </div>
-                  <div style={{ fontSize: 20 }}>{getWeatherIcon(day.desc)}</div>
-                  <div style={{
-                    fontSize: 14, fontWeight: 800, color: 'var(--text-primary)',
-                    letterSpacing: '-0.5px', fontVariantNumeric: 'tabular-nums',
+                  <div style={{ fontSize: 22 }}>{getWeatherIcon(day.desc)}</div>
+                  <div className="num" style={{
+                    fontSize: 15, fontWeight: 800, color: 'var(--text-primary)',
+                    letterSpacing: '-0.5px',
                   }}>
                     {day.maxTemp}°
                   </div>
-                  <div style={{
-                    fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 500,
-                    fontVariantNumeric: 'tabular-nums',
+                  <div className="num" style={{
+                    fontSize: 12, color: 'var(--text-tertiary)', fontWeight: 500,
                   }}>
                     {day.minTemp}°
                   </div>
@@ -710,6 +701,16 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
         <TimerHomeWidget />
       </div>
 
+      {/* ───── Row 4: Countdown ───── */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'minmax(260px, 1fr) minmax(0, 2fr)',
+        gap: 14,
+      }}>
+        <CountdownCard />
+        <div /> {/* место под будущий виджет */}
+      </div>
+
       {/* Weather day detail modal */}
       {selectedDay && (
         <WeatherDayModal
@@ -1022,6 +1023,35 @@ function HomePageInner() {
     }
   }, [unlocked, resetIdle])
 
+  // Swipe between tabs — edge-initiated horizontal drag
+  const swipeStart = useRef<{ x: number; y: number; t: number; id: number } | null>(null)
+  const handlePointerDown = (e: React.PointerEvent) => {
+    // Only primary pointer / touch
+    if (e.pointerType === 'mouse' && e.button !== 0) return
+    swipeStart.current = { x: e.clientX, y: e.clientY, t: Date.now(), id: e.pointerId }
+  }
+  const handlePointerUp = (e: React.PointerEvent) => {
+    const s = swipeStart.current
+    swipeStart.current = null
+    if (!s || s.id !== e.pointerId) return
+    const dx = e.clientX - s.x
+    const dy = e.clientY - s.y
+    const dt = Date.now() - s.t
+    // Conditions: fast enough, mostly horizontal, big enough
+    const isHorizontal = Math.abs(dx) > Math.abs(dy) * 1.6
+    const isLong = Math.abs(dx) > 90
+    const isFast = dt < 600 || Math.abs(dx) > 160
+    if (!(isHorizontal && isLong && isFast)) return
+    // Don't steal swipe from elements that draggable-own (notes swipe-to-delete, weather modal, timer cards).
+    const target = e.target as HTMLElement | null
+    if (target?.closest('[data-swipe-ignore]')) return
+    const idx = TAB_ORDER.indexOf(tab)
+    if (idx < 0) return
+    const nextIdx = dx < 0 ? idx + 1 : idx - 1
+    if (nextIdx < 0 || nextIdx >= TAB_ORDER.length) return
+    setTab(TAB_ORDER[nextIdx])
+  }
+
   const devicesInRoom = DEVICES_BY_ROOM[activeRoom] || []
   const getDeviceState = (haKey?: string): boolean => {
     if (!haKey || !haStates[haKey]) return false
@@ -1072,7 +1102,12 @@ function HomePageInner() {
         }}
       />
 
-      <main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}>
+      <main
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={() => { swipeStart.current = null }}
+        style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0, position: 'relative', zIndex: 1 }}
+      >
         <TopBar sensors={sensors} haConnected={haConnected} />
 
         <AnimatePresence mode="sync" initial={false}>