even-toolkit 1.4.1 → 1.5.0

package/glasses/action-bar.ts

@@ -4,8 +4,8 @@
  * Renders a row of named buttons with triangle indicators:
  *   ▶Timer◀  ▷Scroll◁  Steps
  *
- * - Active button (mode entered): filled triangles ▶Name◀
- * - Selected button (hovering in button-select mode): empty triangles ▷Name◁
+ * - Selected button (current highlight): empty triangles ▷Name◁
+ * - Active button (entered mode, not highlighted): filled triangles ▶Name◀
  * - Inactive button: plain  Name
  */
 
@@ -27,11 +27,11 @@ export function buildActionBar(
 
   return buttons.map((name, i) => {
     if (activeIdx === i) {
-      // Active mode: filled triangles
+      // Active/confirmed button: filled triangles
       return `\u25B6${name}\u25C0`;
     }
-    if (activeIdx < 0 && i === selectedIndex) {
-      // Hovering in button-select mode: empty triangles
+    if (i === selectedIndex) {
+      // Scroll highlight on a non-active button: empty triangles
       return `\u25B7${name}\u25C1`;
     }
     return ` ${name} `;
@@ -39,7 +39,7 @@ export function buildActionBar(
 }
 
 /**
- * Build a static action bar (empty triangles on selected).
+ * Build a static action bar (filled triangles on selected).
  * Useful for screens like recipe detail or completion where there's no mode switching.
  */
 export function buildStaticActionBar(
@@ -48,7 +48,7 @@ export function buildStaticActionBar(
 ): string {
   return buttons.map((name, i) => {
     if (i === selectedIndex) {
-      return `\u25B7${name}\u25C1`;
+      return `\u25B6${name}\u25C0`;
     }
     return ` ${name} `;
   }).join(' ');

package/glasses/action-map.ts

@@ -1,7 +1,7 @@
 import type { EvenHubEvent } from '@evenrealities/even_hub_sdk';
 import { OsEventTypeList } from '@evenrealities/even_hub_sdk';
 import type { GlassAction } from './types';
-import { tryConsumeTap, isScrollSuppressed, isScrollDebounced } from './gestures';
+import { tryConsumeTap, shouldIgnoreScroll } from './gestures';
 
 export function mapGlassEvent(event: EvenHubEvent): GlassAction | null {
   if (!event) return null;
@@ -24,10 +24,10 @@ function mapEvent(event: { eventType?: number; currentSelectItemIndex?: number }
       if (!tryConsumeTap('double')) return null;
       return { type: 'GO_BACK' };
     case OsEventTypeList.SCROLL_TOP_EVENT:
-      if (isScrollDebounced('prev') || isScrollSuppressed()) return null;
+      if (shouldIgnoreScroll('prev')) return null;
       return { type: 'HIGHLIGHT_MOVE', direction: 'up' };
     case OsEventTypeList.SCROLL_BOTTOM_EVENT:
-      if (isScrollDebounced('next') || isScrollSuppressed()) return null;
+      if (shouldIgnoreScroll('next')) return null;
       return { type: 'HIGHLIGHT_MOVE', direction: 'down' };
     default:
       // Simulator omits eventType for CLICK_EVENT (value 0).

package/glasses/gestures.ts

@@ -10,6 +10,14 @@ const SCROLL_SUPPRESS_AFTER_TEXT_MS = 80;
 
 let lastTapTime = 0;
 let lastTapKind: 'tap' | 'double' | null = null;
+let bypassNextScrollChecks = false;
+
+function consumeExternalScrollBypass(): boolean {
+  const g = globalThis as typeof globalThis & { __evenAllowImmediateScrollOnce?: boolean };
+  if (!g.__evenAllowImmediateScrollOnce) return false;
+  g.__evenAllowImmediateScrollOnce = false;
+  return true;
+}
 
 export function tryConsumeTap(kind: 'tap' | 'double'): boolean {
   const now = Date.now();
@@ -31,6 +39,10 @@ export function tryConsumeTap(kind: 'tap' | 'double'): boolean {
 }
 
 export function isScrollSuppressed(): boolean {
+  if (bypassNextScrollChecks || consumeExternalScrollBypass()) {
+    bypassNextScrollChecks = false;
+    return false;
+  }
   return Date.now() - lastTapTime < SCROLL_SUPPRESS_AFTER_TAP_MS;
 }
 
@@ -46,6 +58,12 @@ export function notifyTextUpdate(): void {
 export function isScrollDebounced(direction: 'prev' | 'next'): boolean {
   const now = Date.now();
 
+  if (bypassNextScrollChecks || consumeExternalScrollBypass()) {
+    lastScrollTime = now;
+    lastScrollDir = direction;
+    return false;
+  }
+
   // Suppress scrolls briefly after a text update (G2 re-layout fires spurious events)
   if (now - textUpdateTime < SCROLL_SUPPRESS_AFTER_TEXT_MS) return true;
 
@@ -58,3 +76,35 @@ export function isScrollDebounced(direction: 'prev' | 'next'): boolean {
   lastScrollDir = direction;
   return false;
 }
+
+/** Shared scroll gate so a single bypass applies to the full event. */
+export function shouldIgnoreScroll(direction: 'prev' | 'next'): boolean {
+  const now = Date.now();
+  const bypassed = bypassNextScrollChecks || consumeExternalScrollBypass();
+
+  if (bypassed) {
+    bypassNextScrollChecks = false;
+    lastScrollTime = now;
+    lastScrollDir = direction;
+    return false;
+  }
+
+  if (now - lastTapTime < SCROLL_SUPPRESS_AFTER_TAP_MS) return true;
+  if (now - textUpdateTime < SCROLL_SUPPRESS_AFTER_TEXT_MS) return true;
+
+  const threshold =
+    direction === lastScrollDir ? SAME_DIRECTION_DEBOUNCE_MS : DIRECTION_CHANGE_DEBOUNCE_MS;
+
+  if (now - lastScrollTime < threshold) return true;
+
+  lastScrollTime = now;
+  lastScrollDir = direction;
+  return false;
+}
+
+/** Allow the next scroll event through immediately after a tap-driven mode change. */
+export function armImmediateScroll(): void {
+  bypassNextScrollChecks = true;
+  lastScrollTime = 0;
+  lastScrollDir = null;
+}

package/glasses/glass-chat-display.ts

@@ -0,0 +1,152 @@
+/**
+ * Chat/terminal output display builder for G2 glasses.
+ * Optimized for reading streaming AI output on a 10-line text display.
+ *
+ * Line type prefixes:
+ *   > user prompt
+ *   >> tool call
+ *   + collapsed thinking
+ *   - expanded thinking header
+ *   ! error
+ *   (no prefix) assistant text
+ */
+
+import type { DisplayData, DisplayLine } from './types';
+import { line, glassHeader } from './types';
+import { applyScrollIndicators } from './text-utils';
+
+export interface ChatLine {
+  type: 'prompt' | 'text' | 'tool' | 'thinking-collapsed' | 'thinking-expanded' | 'thinking-body' | 'error' | 'system';
+  text: string;
+}
+
+/**
+ * Format a single ChatLine into one or more display strings,
+ * word-wrapping at maxChars.
+ */
+export function formatChatLine(chatLine: ChatLine, maxChars = 44): string[] {
+  const { type, text } = chatLine;
+
+  let prefix: string;
+  switch (type) {
+    case 'prompt':
+      prefix = '> ';
+      break;
+    case 'tool':
+      prefix = '>> ';
+      break;
+    case 'thinking-collapsed':
+      prefix = '+ ';
+      break;
+    case 'thinking-expanded':
+      prefix = '- ';
+      break;
+    case 'thinking-body':
+      prefix = '  ';
+      break;
+    case 'error':
+      prefix = '! ';
+      break;
+    case 'system':
+      prefix = '= ';
+      break;
+    case 'text':
+    default:
+      prefix = '';
+      break;
+  }
+
+  const available = maxChars - prefix.length;
+  if (text.length <= available) {
+    return [`${prefix}${text}`];
+  }
+
+  // Word-wrap: try to break at word boundaries
+  const lines: string[] = [];
+  let remaining = text;
+  let isFirst = true;
+
+  while (remaining.length > 0) {
+    const pfx = isFirst ? prefix : ' '.repeat(prefix.length);
+    const avail = maxChars - pfx.length;
+
+    if (remaining.length <= avail) {
+      lines.push(`${pfx}${remaining}`);
+      break;
+    }
+
+    // Find last space within available width
+    let breakAt = remaining.lastIndexOf(' ', avail);
+    if (breakAt <= 0) breakAt = avail; // no space found, hard break
+
+    lines.push(`${pfx}${remaining.slice(0, breakAt)}`);
+    remaining = remaining.slice(breakAt).trimStart();
+    isFirst = false;
+  }
+
+  return lines;
+}
+
+export interface ChatDisplayOptions {
+  /** Header title, e.g. "CLAUDE · opus · running" */
+  title: string;
+  /** Action bar string from buildStaticActionBar() */
+  actionBar: string;
+  /** Ordered chat lines to display */
+  chatLines: ChatLine[];
+  /** Scroll offset from bottom. 0 = show latest. Positive = scrolled up. */
+  scrollOffset: number;
+  /** Number of visible content lines. Default: 7 (10 total - 3 header) */
+  contentSlots?: number;
+  /** Max chars per line. Default: 44 */
+  maxChars?: number;
+}
+
+/**
+ * Build a complete chat display for G2 glasses.
+ * Auto-scrolls to bottom (latest content) unless scrollOffset > 0.
+ * Returns DisplayData with header + scrollable content.
+ */
+export function buildChatDisplay(opts: ChatDisplayOptions): DisplayData {
+  const {
+    title,
+    actionBar,
+    chatLines,
+    scrollOffset,
+    contentSlots = 7,
+    maxChars = 44,
+  } = opts;
+
+  const lines = [...glassHeader(title, actionBar)];
+
+  // Format all chat lines into display strings
+  const allLines: string[] = [];
+  for (const cl of chatLines) {
+    allLines.push(...formatChatLine(cl, maxChars));
+  }
+
+  if (allLines.length === 0) {
+    lines.push(line('  Waiting for output...', 'meta'));
+    return { lines };
+  }
+
+  // Scroll from bottom: offset 0 = show last contentSlots lines
+  const totalLines = allLines.length;
+  const maxFromBottom = Math.max(0, totalLines - contentSlots);
+  const clampedOffset = Math.min(scrollOffset, maxFromBottom);
+  const start = Math.max(0, totalLines - contentSlots - clampedOffset);
+
+  const visible = allLines.slice(start, start + contentSlots);
+  const contentDisplayLines: DisplayLine[] = visible.map((t) => line(t, 'normal'));
+
+  applyScrollIndicators(
+    contentDisplayLines,
+    start,
+    totalLines,
+    contentSlots,
+    (t) => line(t, 'meta'),
+  );
+
+  lines.push(...contentDisplayLines);
+  return { lines };
+}

package/glasses/glass-format.ts

@@ -0,0 +1,75 @@
+/**
+ * Glass display formatting constants and helpers.
+ * Safe Unicode characters confirmed working on G2 LVGL display.
+ * Inspired by tesla-even-g2 formatting patterns.
+ */
+
+/** Middle dot · field separator */
+export const SEP = '\u00B7';
+
+/** Single right-pointing angle › drill-in indicator */
+export const DRILL = '\u203A';
+
+/** Single left-pointing angle ‹ back prefix */
+export const BACK_CHAR = '\u2039';
+
+/** En-dash – result separator */
+export const DASH = '\u2013';
+
+/** Heavy horizontal ═ filled progress bar segment */
+export const BAR_FILL = '\u2501';
+
+/** Light horizontal ─ empty progress bar segment */
+export const BAR_EMPTY = '\u2500';
+
+/**
+ * Join non-empty values with · separator.
+ * Falsy values are filtered out.
+ *
+ * @example fieldJoin('CLAUDE', 'opus', 'running') → "CLAUDE · opus · running"
+ * @example fieldJoin('HOSTS', false, '2 total') → "HOSTS · 2 total"
+ */
+export function fieldJoin(...parts: (string | undefined | null | false)[]): string {
+  return parts.filter(Boolean).join(` ${SEP} `);
+}
+
+/**
+ * Render an ASCII progress bar.
+ * Uses ═ for filled and ─ for empty.
+ *
+ * @example progressBar(67) → "═══════───"
+ * @example progressBar(30, 20) → "══════──────────────"
+ */
+export function progressBar(percent: number, width = 10): string {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const filled = Math.round((clamped / 100) * width);
+  return BAR_FILL.repeat(filled) + BAR_EMPTY.repeat(width - filled);
+}
+
+/**
+ * Format a key · value pair, truncating value if needed.
+ *
+ * @example kvLine('Language', 'EN') → "Language · EN"
+ */
+export function kvLine(label: string, value: string, maxWidth = 44): string {
+  const sep = ` ${SEP} `;
+  const available = maxWidth - label.length - sep.length;
+  const val = value.length > available ? value.slice(0, available - 1) + '~' : value;
+  return `${label}${sep}${val}`;
+}
+
+/**
+ * Append › drill-in indicator to a label.
+ *
+ * @example drillLabel('Sessions') → "Sessions ›"
+ */
+export function drillLabel(text: string): string {
+  return `${text} ${DRILL}`;
+}
+
+/**
+ * Build a "‹ Back" label for menu items.
+ */
+export function backLabel(): string {
+  return `${BACK_CHAR} Back`;
+}

package/glasses/index.ts

@@ -13,3 +13,5 @@ export * from './glass-display-builders';
 export * from './glass-mode';
 export * from './glass-router';
 export * from './glass-screen-router';
+export * from './glass-format';
+export * from './glass-chat-display';

package/glasses/useGlasses.ts

@@ -71,7 +71,7 @@ export function useGlasses<S>(config: UseGlassesConfig<S>): void {
       // Build display text from lines
       const data = configRef.current.toDisplayData(snapshot, nav);
       const text = data.lines.map(l => {
-        if (l.style === 'separator') return '\u2500'.repeat(28) + '\n';
+        if (l.style === 'separator') return '\u2500'.repeat(28);
         if (l.inverted) return `\u25B6 ${l.text}`;
         return `  ${l.text}`;
       }).join('\n');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "even-toolkit",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Design system & component library for Even Realities G2 smart glasses apps — 55+ web components, 191 pixel-art icons, glasses SDK bridge, and design tokens.",
   "type": "module",
   "main": "./dist/glasses/index.js",
@@ -102,6 +102,14 @@
       "types": "./dist/glasses/glass-screen-router.d.ts",
       "import": "./dist/glasses/glass-screen-router.js"
     },
+    "./glass-format": {
+      "types": "./dist/glasses/glass-format.d.ts",
+      "import": "./dist/glasses/glass-format.js"
+    },
+    "./glass-chat-display": {
+      "types": "./dist/glasses/glass-chat-display.d.ts",
+      "import": "./dist/glasses/glass-chat-display.js"
+    },
     "./web": {
       "types": "./dist/web/index.d.ts",
       "import": "./dist/web/index.js"
@@ -353,6 +361,7 @@
     "glasses",
     "stt",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {

package/stt/providers/deepgram.ts

@@ -28,6 +28,7 @@ export class DeepgramProvider implements STTProvider {
   private language = 'en';
   private modelId = 'nova-2';
   private ws: WebSocket | null = null;
+  private suppressSocketEvents = false;
 
   private transcriptCbs: Array<(t: STTTranscript) => void> = [];
   private stateCbs: Array<(s: STTState) => void> = [];
@@ -51,8 +52,9 @@ export class DeepgramProvider implements STTProvider {
 
   start(): void {
     if (this.ws) {
-      this.closeSocket();
+      this.closeSocket(true);
     }
+    this.suppressSocketEvents = false;
 
     const params = new URLSearchParams({
       model: this.modelId,
@@ -98,6 +100,7 @@ export class DeepgramProvider implements STTProvider {
     };
 
     this.ws.onerror = (event) => {
+      if (this.suppressSocketEvents) return;
       sttLog('deepgram: WebSocket error', event);
       const err: STTError = {
         code: 'network',
@@ -110,6 +113,11 @@ export class DeepgramProvider implements STTProvider {
 
     this.ws.onclose = () => {
       this.ws = null;
+      if (this.suppressSocketEvents) {
+        this.suppressSocketEvents = false;
+        this.setState('idle');
+        return;
+      }
       if (this._state === 'listening') {
         this.setState('idle');
       }
@@ -140,15 +148,15 @@ export class DeepgramProvider implements STTProvider {
       // Send close message per Deepgram protocol
       this.ws.send(JSON.stringify({ type: 'CloseStream' }));
     }
-    this.closeSocket();
+    this.closeSocket(true);
   }
 
   abort(): void {
-    this.closeSocket();
+    this.closeSocket(true);
   }
 
   dispose(): void {
-    this.closeSocket();
+    this.closeSocket(true);
     this.transcriptCbs = [];
     this.stateCbs = [];
     this.errorCbs = [];
@@ -171,10 +179,18 @@ export class DeepgramProvider implements STTProvider {
 
   // ── Private ──
 
-  private closeSocket(): void {
-    if (this.ws) {
-      try { this.ws.close(); } catch { /* ignore */ }
+  private closeSocket(silent = false): void {
+    const socket = this.ws;
+    if (socket) {
       this.ws = null;
+      if (silent) {
+        this.suppressSocketEvents = true;
+        socket.onopen = null;
+        socket.onmessage = null;
+        socket.onerror = null;
+        socket.onclose = null;
+      }
+      try { socket.close(); } catch { /* ignore */ }
     }
     this.setState('idle');
   }

package/web/components/dialog.tsx

@@ -21,6 +21,9 @@ interface DialogProps {
 function Dialog({ open, onClose, title, icon, children, actions, className }: DialogProps) {
   const [visible, setVisible] = React.useState(false);
   const [closing, setClosing] = React.useState(false);
+  const stopPropagation = React.useCallback((event: React.SyntheticEvent) => {
+    event.stopPropagation();
+  }, []);
 
   React.useEffect(() => {
     if (open) {
@@ -42,11 +45,27 @@ function Dialog({ open, onClose, title, icon, children, actions, className }: Di
     return () => document.removeEventListener('keydown', handler);
   }, [visible, onClose]);
 
+  React.useEffect(() => {
+    if (!visible) return;
+    const prevBodyOverflow = document.body.style.overflow;
+    const prevHtmlOverflow = document.documentElement.style.overflow;
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prevBodyOverflow;
+      document.documentElement.style.overflow = prevHtmlOverflow;
+    };
+  }, [visible]);
+
   if (!visible) return null;
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center px-6"
+      className="fixed inset-0 z-50 flex items-center justify-center px-6 overscroll-contain"
+      onTouchStartCapture={stopPropagation}
+      onTouchMoveCapture={stopPropagation}
+      onTouchEndCapture={stopPropagation}
+      onWheelCapture={stopPropagation}
       style={{ animation: closing ? 'fadeOut 200ms ease forwards' : 'fadeIn 200ms ease' }}
     >
       <div className="absolute inset-0 bg-overlay" onClick={onClose} />

package/web/components/drawer-shell.tsx

@@ -0,0 +1,145 @@
+import { useState, useCallback, useMemo, type ReactNode } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import { SideDrawer, DrawerTrigger, DrawerHeaderContext } from './side-drawer';
+import type { SideDrawerItem, DrawerHeaderConfig } from './side-drawer';
+import { NavHeader } from './nav-header';
+import { Button } from './button';
+
+interface DrawerShellProps {
+  items: SideDrawerItem[];
+  bottomItems?: SideDrawerItem[];
+  title?: string;
+  footer?: ReactNode;
+  width?: number;
+  getPageTitle: (pathname: string) => string;
+  deriveActiveId: (pathname: string) => string;
+  isNestedRoute?: (pathname: string) => boolean;
+  getBackPath?: (pathname: string) => string;
+  backIcon?: ReactNode;
+  className?: string;
+}
+
+const DEFAULT_BACK_ICON = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+function DrawerShell({
+  items,
+  bottomItems,
+  title,
+  footer,
+  width,
+  getPageTitle,
+  deriveActiveId,
+  isNestedRoute,
+  getBackPath,
+  backIcon = DEFAULT_BACK_ICON,
+  className,
+}: DrawerShellProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [headerOverride, setHeaderOverride] = useState<DrawerHeaderConfig | null>(null);
+
+  const handleNavigate = useCallback((id: string) => {
+    navigate(id);
+    setDrawerOpen(false);
+  }, [navigate]);
+
+  const allItemIds = useMemo(() => {
+    const ids = new Set(items.map((i) => i.id));
+    if (bottomItems) bottomItems.forEach((i) => ids.add(i.id));
+    return ids;
+  }, [items, bottomItems]);
+
+  const pathname = location.pathname;
+  const activeId = deriveActiveId(pathname);
+
+  // Determine if nested: either explicit function or check if path matches any item id
+  const nested = isNestedRoute
+    ? isNestedRoute(pathname)
+    : !allItemIds.has(pathname);
+
+  // Resolve header values (screen overrides > defaults)
+  const headerTitle = headerOverride?.title ?? getPageTitle(pathname);
+  const headerHidden = headerOverride?.hidden ?? false;
+
+  const handleBack = useCallback(() => {
+    const explicit = headerOverride?.backTo ?? getBackPath?.(pathname);
+    if (explicit) {
+      navigate(explicit);
+    } else {
+      // Use browser history to go back to the actual previous page
+      navigate(-1);
+    }
+  }, [navigate, headerOverride?.backTo, getBackPath, pathname]);
+
+  const defaultLeft = nested
+    ? (
+        <Button variant="ghost" size="icon" onClick={handleBack}>
+          {backIcon}
+        </Button>
+      )
+    : <DrawerTrigger onClick={() => setDrawerOpen(true)} />;
+
+  const headerLeft = headerOverride?.left ?? (headerOverride?.backTo
+    ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate(headerOverride.backTo!)}
+        >
+          {backIcon}
+        </Button>
+      )
+    : defaultLeft);
+
+  const headerRight = headerOverride?.right ?? undefined;
+  const headerBelow = headerOverride?.below ?? undefined;
+  const headerFooter = headerOverride?.footer ?? undefined;
+
+  // Context value
+  const ctxValue = useMemo(() => ({
+    setHeader: (config: DrawerHeaderConfig) => setHeaderOverride(config),
+    resetHeader: () => setHeaderOverride(null),
+  }), []);
+
+  return (
+    <SideDrawer
+      open={drawerOpen}
+      onClose={() => setDrawerOpen(false)}
+      onNavigate={handleNavigate}
+      activeId={activeId}
+      items={items}
+      bottomItems={bottomItems}
+      title={title}
+      footer={footer}
+      width={width}
+      className={className}
+    >
+      <DrawerHeaderContext.Provider value={ctxValue}>
+        <div className="flex flex-col h-full">
+          {!headerHidden && (
+            <div className="shrink-0">
+              <NavHeader title={headerTitle} left={headerLeft} right={headerRight} />
+              {headerBelow}
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <Outlet />
+          </div>
+          {headerFooter && (
+            <div className="shrink-0">
+              {headerFooter}
+            </div>
+          )}
+        </div>
+      </DrawerHeaderContext.Provider>
+    </SideDrawer>
+  );
+}
+
+export { DrawerShell };
+export type { DrawerShellProps };