even-toolkit 1.1.0 → 1.1.1

package/glasses/keyboard.ts

@@ -0,0 +1,64 @@
+import type { GlassAction } from './types';
+
+export function bindKeyboard(dispatch: (action: GlassAction) => void): () => void {
+  function isInteractive(el: HTMLElement): boolean {
+    const tag = el.tagName;
+    if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return true;
+    if (tag === 'BUTTON' || tag === 'A') return true;
+    if (el.closest('button, a, [role="button"]')) return true;
+    return false;
+  }
+
+  const keyHandler = (e: KeyboardEvent) => {
+    const tag = (e.target as HTMLElement).tagName;
+    if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return;
+
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        dispatch({ type: 'HIGHLIGHT_MOVE', direction: 'up' });
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        dispatch({ type: 'HIGHLIGHT_MOVE', direction: 'down' });
+        break;
+      case 'Enter':
+        e.preventDefault();
+        dispatch({ type: 'SELECT_HIGHLIGHTED' });
+        break;
+      case 'Escape':
+      case 'Backspace':
+        e.preventDefault();
+        dispatch({ type: 'GO_BACK' });
+        break;
+    }
+  };
+
+  // Mouse wheel on the glasses simulator panel for scroll navigation
+  let lastWheelTime = 0;
+  const WHEEL_DEBOUNCE_MS = 250;
+
+  const wheelHandler = (e: WheelEvent) => {
+    // Only trigger on the simulator panel (monospace pre/div), not on the web app content
+    const target = e.target as HTMLElement;
+    if (isInteractive(target)) return;
+
+    const now = Date.now();
+    if (now - lastWheelTime < WHEEL_DEBOUNCE_MS) return;
+    lastWheelTime = now;
+
+    if (e.deltaY > 0) {
+      dispatch({ type: 'HIGHLIGHT_MOVE', direction: 'down' });
+    } else if (e.deltaY < 0) {
+      dispatch({ type: 'HIGHLIGHT_MOVE', direction: 'up' });
+    }
+  };
+
+  document.addEventListener('keydown', keyHandler);
+  document.addEventListener('wheel', wheelHandler, { passive: true });
+
+  return () => {
+    document.removeEventListener('keydown', keyHandler);
+    document.removeEventListener('wheel', wheelHandler);
+  };
+}

package/glasses/layout.ts

@@ -0,0 +1,121 @@
+// ── G2 display dimensions ──
+
+export const DISPLAY_W = 576;
+export const DISPLAY_H = 288;
+export const G2_IMAGE_MAX_W = 200;
+export const G2_IMAGE_MAX_H = 100;
+
+// ── Image tile slots (for chart layout: 3 tiles across the top) ──
+
+export interface TileSlot {
+  id: number;
+  name: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  crop: { sx: number; sy: number; sw: number; sh: number };
+}
+
+export const TILE_1: TileSlot = {
+  id: 2, name: 'tile-1',
+  x: 0, y: 0, w: G2_IMAGE_MAX_W, h: G2_IMAGE_MAX_H,
+  crop: { sx: 0, sy: 0, sw: 200, sh: 100 },
+};
+
+export const TILE_2: TileSlot = {
+  id: 3, name: 'tile-2',
+  x: 200, y: 0, w: G2_IMAGE_MAX_W, h: G2_IMAGE_MAX_H,
+  crop: { sx: 200, sy: 0, sw: 200, sh: 100 },
+};
+
+export const TILE_3: TileSlot = {
+  id: 4, name: 'tile-3',
+  x: 400, y: 0, w: G2_IMAGE_MAX_W, h: G2_IMAGE_MAX_H,
+  crop: { sx: 400, sy: 0, sw: 176, sh: 100 },
+};
+
+export const IMAGE_TILES = [TILE_1, TILE_2, TILE_3];
+
+// ── Splash layout (1 centered image) ──
+
+export const SPLASH_IMG = {
+  id: 2,
+  name: 'splash',
+  x: Math.floor((DISPLAY_W - G2_IMAGE_MAX_W) / 2),
+  y: Math.floor((DISPLAY_H - G2_IMAGE_MAX_H) / 2),
+  w: G2_IMAGE_MAX_W,
+  h: G2_IMAGE_MAX_H,
+};
+
+// ── Text-only layout (full screen) ──
+
+export const TEXT_FULL = {
+  id: 1,
+  name: 'main',
+  x: 0, y: 0,
+  w: DISPLAY_W, h: DISPLAY_H,
+};
+
+// ── Viewport size per timeframe (ideal candle count for 576px chart) ──
+
+export const VIEWPORT_PER_RESOLUTION: Record<string, number> = {
+  '1': 40,   // 40 min
+  '5': 32,   // ~2.5 hours
+  '15': 28,  // ~7 hours
+  '60': 24,  // 1 day
+  'D': 28,   // ~1.5 months
+  'W': 20,   // ~5 months
+  'M': 16,   // ~1.5 years
+};
+
+// ── Chart canvas (rendered offscreen, then split into tiles) ──
+
+export const CHART_CANVAS_W = 576;
+export const CHART_CANVAS_H = 100;
+
+// ── Chart layout text container (below images) ──
+
+export const CHART_TEXT = {
+  id: 1,
+  name: 'main',
+  x: 0,
+  y: G2_IMAGE_MAX_H,
+  w: DISPLAY_W,
+  h: DISPLAY_H - G2_IMAGE_MAX_H,
+};
+
+// ── Default column positions for 3-column layout (apps can override) ──
+
+export const DEFAULT_COLUMNS = {
+  col1X: 0,
+  col1W: 192,
+  col2X: 192,
+  col2W: 192,
+  col3X: 384,
+  col3W: DISPLAY_W - 384,
+};
+
+// ── Legacy compat ──
+
+export const MAIN_SLOT = {
+  id: 1,
+  name: 'main',
+  x: 0,
+  y: 0,
+  w: DISPLAY_W,
+  h: DISPLAY_H - 2,
+};
+
+export const CONTAINER_IDS = [1, 2, 3] as const;
+
+export function dummySlot(index: number) {
+  return {
+    id: CONTAINER_IDS[index]!,
+    name: `d-${index + 1}`,
+    x: 0,
+    y: DISPLAY_H - 2,
+    w: 1,
+    h: 1,
+  };
+}

package/glasses/paginate-text.ts

@@ -0,0 +1,85 @@
+/**
+ * Text pagination utilities for G2 glasses display.
+ *
+ * Word-wraps text into lines, groups lines into pages, and generates
+ * page indicators — useful for any app that shows multi-page text content.
+ *
+ * Usage:
+ *   import { wordWrap, paginateText, pageIndicator } from 'even-toolkit/paginate-text';
+ *
+ *   const lines = wordWrap(longText, 46);
+ *   const pages = paginateText(longText, 46, 9);
+ *   const label = pageIndicator(2, pages.length);  // "Page 3/15"
+ */
+
+/**
+ * Word-wrap text to a maximum line length, breaking at word boundaries.
+ * Long words that exceed maxLen are force-split.
+ *
+ * @param text      The text to wrap
+ * @param maxLen    Maximum characters per line (default 46 — fits G2 display)
+ * @returns         Array of wrapped lines
+ */
+export function wordWrap(text: string, maxLen = 46): string[] {
+  if (!text) return [''];
+  const words = text.split(/\s+/);
+  const result: string[] = [];
+  let current = '';
+
+  for (const word of words) {
+    if (!current) {
+      current = word;
+    } else if (current.length + 1 + word.length <= maxLen) {
+      current += ' ' + word;
+    } else {
+      result.push(current);
+      current = word;
+    }
+  }
+  if (current) result.push(current);
+
+  // Force-split lines that are still too long
+  const final: string[] = [];
+  for (const ln of result) {
+    if (ln.length <= maxLen) {
+      final.push(ln);
+    } else {
+      for (let i = 0; i < ln.length; i += maxLen) {
+        final.push(ln.slice(i, i + maxLen));
+      }
+    }
+  }
+
+  return final.length > 0 ? final : [''];
+}
+
+/**
+ * Paginate text into pages of fixed line count.
+ * First word-wraps, then groups into pages.
+ *
+ * @param text          The text to paginate
+ * @param charsPerLine  Max characters per line (default 46)
+ * @param linesPerPage  Lines per page (default 9)
+ * @returns             Array of pages, each page is an array of line strings
+ */
+export function paginateText(text: string, charsPerLine = 46, linesPerPage = 9): string[][] {
+  const lines = wordWrap(text, charsPerLine);
+  const pages: string[][] = [];
+
+  for (let i = 0; i < lines.length; i += linesPerPage) {
+    pages.push(lines.slice(i, i + linesPerPage));
+  }
+
+  return pages.length > 0 ? pages : [['']];
+}
+
+/**
+ * Generate a page indicator string, e.g. "Page 3/15".
+ *
+ * @param currentIndex  Zero-based current page index
+ * @param totalPages    Total number of pages
+ * @returns             Human-readable page indicator
+ */
+export function pageIndicator(currentIndex: number, totalPages: number): string {
+  return `Page ${currentIndex + 1}/${totalPages}`;
+}

package/glasses/png-utils.ts

@@ -0,0 +1,97 @@
+/** PNG encoding: 16-color (4-bit) indexed PNG via UPNG — smallest possible files for G2. */
+import UPNG from 'upng-js';
+
+function fnv32a(bytes: Uint8Array): number {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < bytes.length; i++) {
+    hash ^= bytes[i]!;
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return hash >>> 0;
+}
+
+export interface EncodedTile {
+  bytes: Uint8Array;
+  hash: number;
+}
+
+// Cache tile canvases
+const tileCanvasCache = new Map<string, { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D }>();
+
+function getTileCtx(key: string, w: number, h: number): CanvasRenderingContext2D {
+  let cached = tileCanvasCache.get(key);
+  if (!cached || cached.canvas.width !== w || cached.canvas.height !== h) {
+    const canvas = document.createElement('canvas');
+    canvas.width = w; canvas.height = h;
+    cached = { canvas, ctx: canvas.getContext('2d')! };
+    tileCanvasCache.set(key, cached);
+  }
+  return cached.ctx;
+}
+
+// Reusable RGBA buffer for UPNG encode
+let rgbaBuf: Uint8Array | null = null;
+let rgbaBufSize = 0;
+
+function getRgbaBuf(size: number): Uint8Array {
+  if (!rgbaBuf || rgbaBufSize < size) {
+    rgbaBuf = new Uint8Array(size);
+    rgbaBufSize = size;
+  }
+  return rgbaBuf;
+}
+
+
+function encodeTile(
+  canvas: HTMLCanvasElement,
+  sx: number, sy: number, sw: number, sh: number,
+  tw: number, th: number,
+  key: string,
+): EncodedTile {
+  const ctx = getTileCtx(key, tw, th);
+  ctx.fillStyle = '#000000';
+  ctx.fillRect(0, 0, tw, th);
+  const dw = Math.min(sw, tw), dh = Math.min(sh, th);
+  ctx.drawImage(canvas, sx, sy, dw, dh, 0, 0, dw, dh);
+
+  const imgData = ctx.getImageData(0, 0, tw, th);
+  const pixels = imgData.data;
+  const pc = tw * th;
+
+  // Quantize to 16-level greyscale for 4-bit indexed PNG
+  const buf = getRgbaBuf(pc * 4);
+  for (let i = 0; i < pc; i++) {
+    const si = i * 4;
+    const lum = Math.round(0.299 * pixels[si]! + 0.587 * pixels[si + 1]! + 0.114 * pixels[si + 2]!);
+    const idx = Math.min(15, Math.round(lum / 17));
+    const v = idx * 17;
+    buf[si] = v; buf[si + 1] = v; buf[si + 2] = v; buf[si + 3] = 255;
+  }
+
+  // 16-color indexed PNG
+  const pngBuf = UPNG.encode([buf.buffer.slice(0, pc * 4) as ArrayBuffer], tw, th, 16);
+  const bytes = new Uint8Array(pngBuf);
+  return { bytes, hash: fnv32a(bytes) };
+}
+
+/** Encode all tiles from a source canvas. */
+export function encodeTilesBatch(
+  canvas: HTMLCanvasElement,
+  tiles: Array<{ crop: { sx: number; sy: number; sw: number; sh: number }; name: string }>,
+  tw: number, th: number,
+): EncodedTile[] {
+  return tiles.map((tile) =>
+    encodeTile(canvas, tile.crop.sx, tile.crop.sy, tile.crop.sw, tile.crop.sh, tw, th, tile.name)
+  );
+}
+
+/** Reset cache (no-op now, kept for API compat). */
+export function resetTileCache(): void {}
+
+/** Backward-compat: encode full canvas to PNG bytes (number[] for SDK). */
+export async function canvasToPngBytes(canvas: HTMLCanvasElement): Promise<number[]> {
+  const w = canvas.width;
+  const h = canvas.height;
+  const tile = encodeTile(canvas, 0, 0, w, h, w, h, '__full');
+  return Array.from(tile.bytes);
+}

package/glasses/splash.ts

@@ -0,0 +1,298 @@
+/**
+ * Splash screen system for G2 glasses apps.
+ *
+ * Renders a canvas-based splash image to G2 image tiles with configurable
+ * timing, tile layout, custom positioning, and a render callback.
+ *
+ * Usage:
+ *   const splash = createSplash({
+ *     render: (ctx, w, h) => {
+ *       ctx.fillStyle = '#e0e0e0';
+ *       ctx.font = 'bold 16px monospace';
+ *       ctx.textAlign = 'center';
+ *       ctx.fillText('MyApp', w/2, h/2);
+ *     },
+ *     tiles: 1,
+ *     minTimeMs: 2000,
+ *   });
+ *
+ *   // In useGlasses config:
+ *   useGlasses({ ..., splash });
+ */
+
+import { G2_IMAGE_MAX_W, G2_IMAGE_MAX_H, DISPLAY_W, DISPLAY_H, IMAGE_TILES } from './layout';
+import { encodeTilesBatch } from './png-utils';
+
+export interface TilePosition {
+  /** X position on the G2 display (0-576). Default: auto from tile index */
+  x: number;
+  /** Y position on the G2 display (0-288). Default: 0 */
+  y: number;
+  /** Tile width. Default: 200 (G2_IMAGE_MAX_W) */
+  w?: number;
+  /** Tile height. Default: 100 (G2_IMAGE_MAX_H) */
+  h?: number;
+}
+
+export interface SplashConfig {
+  /**
+   * Render callback — draw your splash on the provided canvas context.
+   * The canvas is pre-filled with black.
+   *
+   * @param ctx  Canvas 2D context
+   * @param w    Canvas width in pixels
+   * @param h    Canvas height in pixels
+   */
+  render: (ctx: CanvasRenderingContext2D, w: number, h: number) => void;
+
+  /**
+   * Number of image tiles to use (1-3).
+   * - 1: single 200x100 tile
+   * - 2: 400x100 across 2 tiles (horizontal) or 200x200 (vertical)
+   * - 3: 576x100 across 3 tiles (full width)
+   * Default: 1
+   */
+  tiles?: 1 | 2 | 3;
+
+  /**
+   * Tile layout direction.
+   * - 'horizontal': tiles placed side-by-side (default)
+   * - 'vertical': tiles stacked top-to-bottom
+   */
+  tileLayout?: 'horizontal' | 'vertical';
+
+  /**
+   * Custom tile positions on the G2 display.
+   * Override where each tile is placed. Array length must match `tiles` count.
+   *
+   * Example — center a single tile:
+   *   tilePositions: [{ x: 188, y: 94 }]  // centered on 576x288
+   *
+   * Example — 2 tiles stacked vertically:
+   *   tilePositions: [{ x: 0, y: 0 }, { x: 0, y: 100 }]
+   *
+   * Default: tiles placed side-by-side at y=0 (standard layout)
+   */
+  tilePositions?: TilePosition[];
+
+  /**
+   * Canvas size override. By default: (tiles * 200) x 100 for horizontal,
+   * 200 x (tiles * 100) for vertical.
+   * Use this when you need a different aspect ratio or resolution.
+   */
+  canvasSize?: { w: number; h: number };
+
+  /**
+   * Minimum time the splash should be visible (ms).
+   * `waitMinTime()` will delay until this time has passed since `show()`.
+   * Default: 2000
+   */
+  minTimeMs?: number;
+
+  /**
+   * Maximum time before the splash is forcefully dismissed (ms).
+   * Set to 0 for no max. Default: 5000
+   */
+  maxTimeMs?: number;
+
+  /**
+   * Menu text shown below the image (in the text container).
+   * Default: empty string (hidden)
+   */
+  menuText?: string;
+}
+
+export interface SplashHandle {
+  /** Show the splash on the glasses. Returns when the image is sent. */
+  show: (bridge: SplashBridge) => Promise<void>;
+  /** Wait until minTimeMs has elapsed since show(). Resolves immediately if already elapsed. */
+  waitMinTime: () => Promise<void>;
+  /** Clear extra splash tiles (send black). Call after waitMinTime for seamless transition. */
+  clearExtras: (bridge: SplashBridge) => Promise<void>;
+  /** Check if the splash is currently showing. */
+  isShowing: () => boolean;
+  /** Get encoded tile data (for apps that manage their own bridge). */
+  getTiles: () => { id: number; name: string; bytes: Uint8Array; x: number; y: number; w: number; h: number }[];
+}
+
+/** Minimal bridge interface needed for splash (subset of EvenHubBridge). */
+export interface SplashBridge {
+  showHomePage: (menuText: string, imageTiles?: { id: number; name: string; x: number; y: number; w: number; h: number }[]) => Promise<void>;
+  sendImage: (containerId: number, containerName: string, pngBytes: Uint8Array) => Promise<void>;
+}
+
+/**
+ * Preset tile positions for common layouts.
+ */
+export const TILE_PRESETS = {
+  /** Single tile centered on the G2 display */
+  centered1: [
+    { x: Math.floor((DISPLAY_W - G2_IMAGE_MAX_W) / 2), y: Math.floor((DISPLAY_H - G2_IMAGE_MAX_H) / 2) },
+  ] as TilePosition[],
+
+  /** Single tile top-center */
+  topCenter1: [
+    { x: Math.floor((DISPLAY_W - G2_IMAGE_MAX_W) / 2), y: 20 },
+  ] as TilePosition[],
+
+  /** 2 tiles side-by-side, centered vertically */
+  centered2: [
+    { x: Math.floor((DISPLAY_W - 400) / 2), y: Math.floor((DISPLAY_H - G2_IMAGE_MAX_H) / 2) },
+    { x: Math.floor((DISPLAY_W - 400) / 2) + G2_IMAGE_MAX_W, y: Math.floor((DISPLAY_H - G2_IMAGE_MAX_H) / 2) },
+  ] as TilePosition[],
+
+  /** 2 tiles stacked vertically, centered horizontally, near top */
+  topCenterVertical2: [
+    { x: Math.floor((DISPLAY_W - G2_IMAGE_MAX_W) / 2), y: 20 },
+    { x: Math.floor((DISPLAY_W - G2_IMAGE_MAX_W) / 2), y: 20 + G2_IMAGE_MAX_H },
+  ] as TilePosition[],
+
+  /** 3 tiles full width at top */
+  fullWidthTop: [
+    { x: 0, y: 0 },
+    { x: G2_IMAGE_MAX_W, y: 0 },
+    { x: G2_IMAGE_MAX_W * 2, y: 0 },
+  ] as TilePosition[],
+
+  /** Default: standard side-by-side at y=0 */
+  default: undefined,
+};
+
+export function createSplash(config: SplashConfig): SplashHandle {
+  const tileCount = config.tiles ?? 1;
+  const minTime = config.minTimeMs ?? 2000;
+  const maxTime = config.maxTimeMs ?? 5000;
+  const menuText = config.menuText ?? '';
+  const positions = config.tilePositions;
+  const vertical = config.tileLayout === 'vertical';
+
+  const tileW = G2_IMAGE_MAX_W;  // 200
+  const tileH = G2_IMAGE_MAX_H;  // 100
+  const canvasW = config.canvasSize?.w ?? (vertical ? tileW : tileCount * tileW);
+  const canvasH = config.canvasSize?.h ?? (vertical ? tileCount * tileH : tileH);
+
+  let showTime = 0;
+  let showing = false;
+  let encodedTiles: { id: number; name: string; bytes: Uint8Array; x: number; y: number; w: number; h: number }[] = [];
+
+  function renderAndEncode(): void {
+    const canvas = document.createElement('canvas');
+    canvas.width = canvasW;
+    canvas.height = canvasH;
+    const ctx = canvas.getContext('2d')!;
+
+    // Black background
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(0, 0, canvasW, canvasH);
+
+    // App-specific rendering
+    config.render(ctx, canvasW, canvasH);
+
+    // Encode each tile
+    encodedTiles = [];
+    for (let i = 0; i < tileCount; i++) {
+      const slot = IMAGE_TILES[i]!;
+      const pos = positions?.[i];
+      const cropX = vertical ? 0 : i * tileW;
+      const cropY = vertical ? i * tileH : 0;
+      const cropW = Math.min(tileW, canvasW - cropX);
+      const cropH = Math.min(tileH, canvasH - cropY);
+      const crop = { sx: cropX, sy: cropY, sw: cropW, sh: cropH };
+      const enc = encodeTilesBatch(canvas, [{ crop, name: slot.name }], tileW, tileH)[0]!;
+
+      encodedTiles.push({
+        id: slot.id,
+        name: slot.name,
+        bytes: enc.bytes,
+        x: pos?.x ?? slot.x,
+        y: pos?.y ?? slot.y,
+        w: pos?.w ?? tileW,
+        h: pos?.h ?? tileH,
+      });
+    }
+
+    // Fill remaining tiles with black
+    if (tileCount < 3) {
+      const black = document.createElement('canvas');
+      black.width = tileW;
+      black.height = tileH;
+      const bctx = black.getContext('2d')!;
+      bctx.fillStyle = '#000000';
+      bctx.fillRect(0, 0, tileW, tileH);
+      const blackEnc = encodeTilesBatch(black, [{ crop: { sx: 0, sy: 0, sw: tileW, sh: tileH }, name: 'black' }], tileW, tileH)[0]!;
+
+      for (let i = tileCount; i < 3; i++) {
+        const slot = IMAGE_TILES[i]!;
+        encodedTiles.push({
+          id: slot.id,
+          name: slot.name,
+          bytes: blackEnc.bytes,
+          x: slot.x,
+          y: slot.y,
+          w: tileW,
+          h: tileH,
+        });
+      }
+    }
+  }
+
+  return {
+    async show(bridge: SplashBridge): Promise<void> {
+      renderAndEncode();
+      showTime = Date.now();
+      showing = true;
+
+      // Show the home layout with all image tiles
+      const imageTiles = encodedTiles
+        .filter((_, i) => i < tileCount)
+        .map(t => ({ id: t.id, name: t.name, x: t.x, y: t.y, w: t.w, h: t.h }));
+      await bridge.showHomePage(menuText, imageTiles);
+
+      // Send only the app tiles (not black padding tiles)
+      for (let i = 0; i < tileCount; i++) {
+        const tile = encodedTiles[i]!;
+        await bridge.sendImage(tile.id, tile.name, tile.bytes);
+      }
+
+      // Auto-dismiss after maxTime
+      if (maxTime > 0) {
+        setTimeout(() => { showing = false; }, maxTime);
+      }
+    },
+
+    async waitMinTime(): Promise<void> {
+      const elapsed = Date.now() - showTime;
+      if (elapsed < minTime) {
+        await new Promise((r) => setTimeout(r, minTime - elapsed));
+      }
+      showing = false;
+    },
+
+    async clearExtras(bridge: SplashBridge): Promise<void> {
+      // Send black tiles for any extra splash tiles (e.g. tile 2 "Loading...")
+      // so they don't linger when transitioning to the home screen with fewer tiles.
+      if (encodedTiles.length === 0) return;
+      const black = document.createElement('canvas');
+      black.width = tileW;
+      black.height = tileH;
+      const bctx = black.getContext('2d')!;
+      bctx.fillStyle = '#000000';
+      bctx.fillRect(0, 0, tileW, tileH);
+      const blackEnc = encodeTilesBatch(black, [{ crop: { sx: 0, sy: 0, sw: tileW, sh: tileH }, name: 'black' }], tileW, tileH)[0]!;
+      // Clear tiles beyond what the home screen uses (tile index 1+ for vertical 2-tile splash)
+      for (let i = 1; i < encodedTiles.length; i++) {
+        const tile = encodedTiles[i]!;
+        await bridge.sendImage(tile.id, tile.name, blackEnc.bytes);
+      }
+    },
+
+    isShowing(): boolean {
+      return showing;
+    },
+
+    getTiles() {
+      if (encodedTiles.length === 0) renderAndEncode();
+      return encodedTiles;
+    },
+  };
+}

package/glasses/text-clean.ts

@@ -0,0 +1,38 @@
+/**
+ * Text cleaning utilities for G2 glasses display.
+ *
+ * The G2 supports basic Latin, Latin-1 Supplement, and common symbols.
+ * These helpers strip emojis, unsupported Unicode, and normalize whitespace
+ * so text renders cleanly on the monospace G2 display.
+ *
+ * Usage:
+ *   import { cleanForG2, normalizeWhitespace } from 'even-toolkit/text-clean';
+ *   const safe = cleanForG2('Hello 🌍 World!');  // "Hello World!"
+ */
+
+// Match emoji ranges + misc symbols + dingbats + variation selectors
+const EMOJI_RE = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{FE00}-\u{FE0F}\u{200D}\u{20E3}\u{E0020}-\u{E007F}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2702}-\u{27B0}\u{231A}-\u{231B}\u{23E9}-\u{23F3}\u{23F8}-\u{23FA}\u{25AA}-\u{25AB}\u{25B6}\u{25C0}\u{25FB}-\u{25FE}\u{2614}-\u{2615}\u{2648}-\u{2653}\u{267F}\u{2693}\u{26A1}\u{26AA}-\u{26AB}\u{26BD}-\u{26BE}\u{26C4}-\u{26C5}\u{26CE}\u{26D4}\u{26EA}\u{26F2}-\u{26F3}\u{26F5}\u{26FA}\u{26FD}\u{2934}-\u{2935}\u{2B05}-\u{2B07}\u{2B1B}-\u{2B1C}\u{2B50}\u{2B55}\u{3030}\u{303D}\u{3297}\u{3299}]/gu;
+
+// G2 supports basic Latin, Latin-1 Supplement, and some common symbols.
+// Strip anything outside printable ASCII + common Latin extended + box drawing.
+const UNSUPPORTED_RE = /[^\x20-\x7E\u00A0-\u00FF\u2010-\u2027\u2030-\u205E\u2190-\u21FF\u2500-\u257F]/g;
+
+/**
+ * Clean text for safe rendering on the G2 glasses display.
+ * Strips emojis, unsupported Unicode characters, and normalizes whitespace.
+ */
+export function cleanForG2(text: string): string {
+  return text
+    .replace(EMOJI_RE, '')
+    .replace(UNSUPPORTED_RE, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+/**
+ * Normalize whitespace only (collapse multiple spaces/newlines, trim).
+ * Does not strip Unicode — use when the text source is already safe.
+ */
+export function normalizeWhitespace(text: string): string {
+  return text.replace(/\s+/g, ' ').trim();
+}