@glassly/miniapp 0.1.0-dev.99 → 0.2.8-dev.445

package/src/index.ts

@@ -16,14 +16,19 @@ import {installDevReloadListenerIfDevMode} from "./dev-reload"
 installDevReloadListenerIfDevMode()
 
 export {MiniappSession, NotConnectedError} from "./session"
+export {monoTextRows} from "./modules/mono-text-rows"
+export {LatestRenderScheduler} from "./modules/latest-render-scheduler"
 export type {
   AuthUpdatePayload,
   ConnectAckPayload,
   DisplayCapabilities,
   GlassesCapabilities,
   MiniappAuthState,
+  MiniappLaunchSource,
+  MiniappPreferences,
   MiniappRequestError,
   MiniappSessionOptions,
+  MiniappUnitSystem,
   MiniappVisibility,
 } from "./session"
 export type {AuthFetchOptions, AuthModule} from "./modules/auth"
@@ -31,8 +36,8 @@ export type {AuthFetchOptions, AuthModule} from "./modules/auth"
 export {makeRequestId, parseEnvelope, serializeEnvelope} from "./envelope"
 export type {MiniappEnvelope} from "./envelope"
 
-export {getGlasslyGlobals} from "./globals"
-export type {GlasslyGlobals, MiniappCapsuleMenuRect, MiniappColorScheme, MiniappSafeAreaInsets} from "./globals"
+export {getHostGlobals} from "./globals"
+export type {HostGlobals, MiniappCapsuleMenuRect, MiniappColorScheme, MiniappSafeAreaInsets} from "./globals"
 
 export {MiniappErrorCode, MiniappRequestType, MiniappResponseType, MiniappStreamType} from "./protocol"
 export {CLOUD_STATUS_STREAM} from "./modules/cloud"
@@ -73,10 +78,18 @@ export type {
   RenderBox,
   RenderElement,
   RenderOptions,
+  DisplayViewChange,
+  DisplayViewChangeReason,
+  ShowViewResult,
   RenderRectStyle,
   RenderResult,
   RenderTextStyle,
   ViewType,
+  RenderPoint,
+  RenderShapeStyle,
+  RenderStrokeStyle,
+  RenderEasing,
+  RenderTransition,
 } from "./modules/display"
 export type {
   AccelData,
@@ -86,6 +99,7 @@ export type {
   ConnectionData,
   HeadingData,
   HeadPositionData,
+  KeyboardEventData,
   LocationData,
   NotificationDismissedData,
   PhoneNotificationData,
@@ -96,7 +110,7 @@ export type {
   VadData,
   WifiData,
 } from "./modules/events"
-export type {CalendarEvent, CalendarListOptions, CalendarListResult} from "./modules/phone"
+export type {CalendarEvent, CalendarListOptions, CalendarListResult, NotificationAppInfo} from "./modules/phone"
 export type {
   PlayAudioOptions,
   SpeakOptions,
@@ -139,6 +153,8 @@ export type {
   DownloadResult,
   ScanQrOptions,
   ScanQrResult,
+  DisplayDiagnostic,
+  DisplayDiagnosticsResult,
 } from "./modules/system"
 export type {MiniappInfo, MiniappActionInfo, MiniappCompatibility, ListMiniappsOptions} from "./modules/miniapps"
 export type {ActionContext, ActionDescriptor, ActionHandler, InvokeOptions} from "./modules/actions"
@@ -149,7 +165,6 @@ export type {DisplayManager} from "./modules/display"
 export type {MiniappsModule} from "./modules/miniapps"
 export type {ActionsModule} from "./modules/actions"
 export type {GlassesModule} from "./modules/glasses"
-export type {HeadingModule} from "./modules/heading"
 export type {
   AiModule,
   AiProvider,
@@ -164,7 +179,7 @@ export type {
   AiUsage,
 } from "./modules/ai"
 export type {ImuModule} from "./modules/imu"
-export type {InputModule} from "./modules/input"
+export type {InputModule, GestureClaimChange} from "./modules/input"
 export type {KeysModule, ApiKeyProvider} from "./modules/keys"
 export type {LocationModule} from "./modules/location"
 export type {
@@ -207,10 +222,23 @@ export type {
   TravelMode,
 } from "./modules/navigation"
 export type {PermissionsModule, PermissionErrorEvent} from "./modules/permissions"
-export type {PhoneModule, PhoneNotificationsModule, PhoneCalendarModule} from "./modules/phone"
+export type {PhoneModule, PhoneNotificationsModule, PhoneCalendarModule, PhoneHeadingModule} from "./modules/phone"
+export type {SettingsModule, SettingsChange} from "./modules/settings"
 export type {TranscriptionModule, TranscriptionConfig, TranscriptionOptions} from "./modules/transcription"
 export type {TranslationModule} from "./modules/translation"
 export type {SpeakerModule} from "./modules/speaker"
 
 // Permission types
 export type {PermissionType, PermissionRecord} from "./session"
+
+export type {LightSensorModule, LightSensorOptions, LightSensorData} from "./modules/lightSensor"
+export type {
+  CompassModule,
+  CompassOptions,
+  CompassData,
+  CompassDiagnostics,
+  CompassCalibrationData,
+} from "./modules/compass"
+
+export type {MirrorModule} from "./modules/mirror"
+export type {MirrorSnapshot, MirrorContent, MirrorElement} from "./mirror/types"

package/src/knownApps.ts

@@ -0,0 +1,170 @@
+/**
+ * The apps the notification surfaces know by id: a display name for a bare
+ * bundle id or package name and, for the glasses card, which glyph stands in
+ * for the app's icon (iOS never exposes another app's icon, and one would not
+ * survive 24px of 4-bit gray anyway). The host seeds its notification app
+ * catalog from the iOS entries and fills in names on bare ids; miniapps map
+ * the glyph names onto their own pixel art.
+ *
+ * Ids keep their real case so the catalog can hand them back; lookups are
+ * case-insensitive.
+ */
+
+export type AppGlyph =
+  | "bubble"
+  | "envelope"
+  | "calendar"
+  | "phone"
+  | "camera"
+  | "note"
+  | "pin"
+  | "clock"
+  | "play"
+  | "cart"
+  | "car"
+  | "check"
+  | "photo"
+  | "heart"
+  | "dollar"
+
+export interface KnownApp {
+  /** iOS bundle id or Android package name, real case. */
+  id: string
+  name: string
+  /** Absent: the generic message bubble. */
+  glyph?: AppGlyph
+  platform: "ios" | "android" | "both"
+}
+
+const ios = (id: string, name: string, glyph?: AppGlyph): KnownApp => ({id, name, glyph, platform: "ios"})
+const android = (id: string, name: string, glyph?: AppGlyph): KnownApp => ({id, name, glyph, platform: "android"})
+const both = (id: string, name: string, glyph?: AppGlyph): KnownApp => ({id, name, glyph, platform: "both"})
+
+export const KNOWN_APPS: KnownApp[] = [
+  // Messaging
+  ios("com.apple.MobileSMS", "Messages", "bubble"),
+  android("com.google.android.apps.messaging", "Messages", "bubble"),
+  android("com.samsung.android.messaging", "Messages", "bubble"),
+  ios("net.whatsapp.WhatsApp", "WhatsApp", "bubble"),
+  android("com.whatsapp", "WhatsApp", "bubble"),
+  ios("ph.telegra.Telegraph", "Telegram", "bubble"),
+  android("org.telegram.messenger", "Telegram", "bubble"),
+  ios("org.whispersystems.signal", "Signal", "bubble"),
+  android("org.thoughtcrime.securesms", "Signal", "bubble"),
+  ios("com.facebook.Messenger", "Messenger", "bubble"),
+  android("com.facebook.orca", "Messenger", "bubble"),
+  ios("com.tinyspeck.chatlyio", "Slack", "bubble"),
+  android("com.Slack", "Slack", "bubble"),
+  ios("com.hammerandchisel.discord", "Discord", "bubble"),
+  android("com.discord", "Discord", "bubble"),
+  ios("com.microsoft.skype.teams", "Teams", "bubble"),
+  android("com.microsoft.teams", "Teams", "bubble"),
+  ios("com.tencent.xin", "WeChat", "bubble"),
+  android("com.tencent.mm", "WeChat", "bubble"),
+  ios("jp.naver.line", "LINE", "bubble"),
+  android("jp.naver.line.android", "LINE", "bubble"),
+  ios("com.toyopagroup.picaboo", "Snapchat", "bubble"),
+  android("com.snapchat.android", "Snapchat", "bubble"),
+  // Social
+  ios("com.facebook.Facebook", "Facebook"),
+  android("com.facebook.katana", "Facebook"),
+  ios("com.atebits.Tweetie2", "X"),
+  android("com.twitter.android", "X"),
+  ios("com.linkedin.LinkedIn", "LinkedIn"),
+  android("com.linkedin.android", "LinkedIn"),
+  // Mail
+  ios("com.apple.mobilemail", "Mail", "envelope"),
+  ios("com.google.Gmail", "Gmail", "envelope"),
+  android("com.google.android.gm", "Gmail", "envelope"),
+  both("com.microsoft.Office.Outlook", "Outlook", "envelope"),
+  ios("com.readdle.smartemail", "Spark", "envelope"),
+  android("com.readdle.spark", "Spark", "envelope"),
+  ios("ch.protonmail.protonmail", "Proton Mail", "envelope"),
+  android("ch.protonmail.android", "Proton Mail", "envelope"),
+  // Calendar
+  ios("com.apple.mobilecal", "Calendar", "calendar"),
+  ios("com.google.calendar", "Google Calendar", "calendar"),
+  android("com.google.android.calendar", "Google Calendar", "calendar"),
+  android("com.samsung.android.calendar", "Calendar", "calendar"),
+  // Phone
+  ios("com.apple.mobilephone", "Phone", "phone"),
+  ios("com.apple.facetime", "FaceTime", "phone"),
+  android("com.google.android.dialer", "Phone", "phone"),
+  android("com.samsung.android.dialer", "Phone", "phone"),
+  android("com.samsung.android.incallui", "Phone", "phone"),
+  // Tasks and reminders
+  ios("com.apple.reminders", "Reminders", "check"),
+  android("com.google.android.apps.tasks", "Google Tasks", "check"),
+  android("com.todoist", "Todoist", "check"),
+  ios("com.culturedcode.ThingsiPhone", "Things", "check"),
+  // Maps and rides
+  ios("com.apple.Maps", "Maps", "pin"),
+  ios("com.google.Maps", "Google Maps", "pin"),
+  android("com.google.android.apps.maps", "Google Maps", "pin"),
+  ios("com.waze.iphone", "Waze", "pin"),
+  android("com.waze", "Waze", "pin"),
+  ios("com.ubercab.UberClient", "Uber", "car"),
+  android("com.ubercab", "Uber", "car"),
+  ios("com.zimride.instant", "Lyft", "car"),
+  android("me.lyft.android", "Lyft", "car"),
+  // Shopping and delivery
+  ios("com.amazon.Amazon", "Amazon", "cart"),
+  android("com.amazon.mShop.android.shopping", "Amazon", "cart"),
+  ios("doordash.DoorDashConsumer", "DoorDash", "cart"),
+  android("com.dd.doordash", "DoorDash", "cart"),
+  ios("com.ubercab.UberEats", "Uber Eats", "cart"),
+  android("com.ubercab.eats", "Uber Eats", "cart"),
+  // Music and video
+  ios("com.apple.Music", "Music", "note"),
+  ios("com.spotify.client", "Spotify", "note"),
+  android("com.spotify.music", "Spotify", "note"),
+  ios("com.google.ios.youtubemusic", "YouTube Music", "note"),
+  android("com.google.android.apps.youtube.music", "YouTube Music", "note"),
+  ios("com.google.ios.youtube", "YouTube", "play"),
+  android("com.google.android.youtube", "YouTube", "play"),
+  ios("com.netflix.Netflix", "Netflix", "play"),
+  android("com.netflix.mediaclient", "Netflix", "play"),
+  ios("com.zhiliaoapp.musically", "TikTok", "play"),
+  android("com.ss.android.ugc.trill", "TikTok", "play"),
+  // Photos and camera
+  ios("com.apple.mobileslideshow", "Photos", "photo"),
+  android("com.google.android.apps.photos", "Google Photos", "photo"),
+  ios("com.apple.camera", "Camera", "camera"),
+  ios("com.burbn.instagram", "Instagram", "camera"),
+  android("com.instagram.android", "Instagram", "camera"),
+  // Clock and alarms
+  ios("com.apple.mobiletimer", "Clock", "clock"),
+  android("com.google.android.deskclock", "Clock", "clock"),
+  android("com.sec.android.app.clockpackage", "Clock", "clock"),
+  // Health and fitness
+  ios("com.apple.Health", "Health", "heart"),
+  ios("com.strava.stravaride", "Strava", "heart"),
+  android("com.strava", "Strava", "heart"),
+  android("com.google.android.apps.fitness", "Google Fit", "heart"),
+  ios("com.fitbit.FitbitMobile", "Fitbit", "heart"),
+  // Payments
+  ios("com.apple.Passbook", "Wallet", "dollar"),
+  ios("net.kortina.labs.Venmo", "Venmo", "dollar"),
+  ios("com.venmo.TouchFree", "Venmo", "dollar"),
+  android("com.venmo", "Venmo", "dollar"),
+  ios("com.yourcompany.PPClient", "PayPal", "dollar"),
+  android("com.paypal.android.p2pmobile", "PayPal", "dollar"),
+  both("com.squareup.cash", "Cash App", "dollar"),
+  both("io.heckel.ntfy", "Ntfy", "bubble"),
+]
+
+const BY_ID: ReadonlyMap<string, KnownApp> = new Map(KNOWN_APPS.map((app) => [app.id.toLowerCase(), app]))
+
+export function knownApp(packageName: string | undefined): KnownApp | null {
+  if (!packageName) return null
+  return BY_ID.get(packageName.trim().toLowerCase()) ?? null
+}
+
+export function appGlyph(packageName: string | undefined): AppGlyph | null {
+  return knownApp(packageName)?.glyph ?? null
+}
+
+/** The curated display name for a bare id, when the phone did not report one. */
+export function knownAppName(packageName: string | undefined): string | null {
+  return knownApp(packageName)?.name ?? null
+}

package/src/mirror/canvas.ts

@@ -0,0 +1,322 @@
+import {sceneGeometry, geometryEqual, tweenAt, type SceneGeometry} from "./geometry"
+import type {MirrorElement, MirrorSnapshot} from "./types"
+
+interface Pose {
+  element: MirrorElement
+  from: SceneGeometry
+  to: SceneGeometry
+  start: number
+  duration: number
+  rotationFrom: number
+  rotationTo: number
+  rotationStart: number
+  rotationDuration: number
+}
+
+/** CSS cubic-bezier timing, matching the glasses mirror's easing curves. */
+export function mirrorEase(t: number, name?: string): number {
+  if (name === "linear" || t <= 0 || t >= 1) return t
+  const [x1, y1, x2, y2] =
+    name === "ease-in"
+      ? [0.42, 0, 1, 1]
+      : name === "ease-out"
+      ? [0, 0, 0.58, 1]
+      : name === "ease-in-out"
+      ? [0.42, 0, 0.58, 1]
+      : [0.25, 0.1, 0.25, 1]
+  const curve = (u: number, a: number, b: number) => 3 * (1 - u) ** 2 * u * a + 3 * (1 - u) * u ** 2 * b + u ** 3
+  let low = 0,
+    high = 1
+  for (let i = 0; i < 16; i++) {
+    const mid = (low + high) / 2
+    if (curve(mid, x1, x2) < t) low = mid
+    else high = mid
+  }
+  return curve((low + high) / 2, y1, y2)
+}
+
+function poseAt(pose: Pose, now: number): SceneGeometry {
+  const geometry = tweenAt(
+    pose.from,
+    pose.to,
+    mirrorEase(pose.duration ? Math.min(1, (now - pose.start) / pose.duration) : 1, pose.element.transition?.easing),
+  )
+  const rotationT = mirrorEase(
+    pose.rotationDuration ? Math.min(1, (now - pose.rotationStart) / pose.rotationDuration) : 1,
+    pose.element.transition?.easing,
+  )
+  return {...geometry, rotation: pose.rotationFrom + (pose.rotationTo - pose.rotationFrom) * rotationT}
+}
+
+function canTween(previous: MirrorElement, next: MirrorElement): boolean {
+  return (
+    next.change !== "created" &&
+    previous.type === next.type &&
+    previous.text === next.text &&
+    previous.data === next.data &&
+    previous.d === next.d &&
+    previous.fillRule === next.fillRule &&
+    previous.style?.fill === next.style?.fill &&
+    previous.points?.length === next.points?.length &&
+    !(next.type === "image" && (previous.box.w !== next.box.w || previous.box.h !== next.box.h))
+  )
+}
+
+/** Browser-only renderer. Feed snapshots from session.mirror through your UI channel. */
+export class MirrorCanvasRenderer {
+  private frame: MirrorSnapshot | null = null
+  private poses = new Map<string, Pose>()
+  private images = new Map<string, HTMLCanvasElement | null>()
+  private pending = new Set<string>()
+  private raf: number | null = null
+  private disposed = false
+  private readonly ctx: CanvasRenderingContext2D
+
+  constructor(private readonly canvas: HTMLCanvasElement) {
+    const ctx = canvas.getContext("2d")
+    if (!ctx) throw new Error("Canvas 2D is unavailable")
+    this.ctx = ctx
+  }
+
+  update(frame: MirrorSnapshot): void {
+    if (this.disposed || (this.frame && frame.revision < this.frame.revision)) return
+    const previous = this.frame
+    const scene = frame.content.kind === "scene" ? frame.content : null
+    const prior = previous?.content.kind === "scene" ? previous.content : null
+    const reset =
+      !prior ||
+      !scene ||
+      previous?.model !== frame.model ||
+      previous.appId !== frame.appId ||
+      previous.view !== frame.view ||
+      prior.epoch !== scene.epoch ||
+      frame.revision > previous.revision + 1
+    const now = Date.now()
+    const poses = new Map<string, Pose>()
+    for (const element of scene?.elements ?? []) {
+      const to = sceneGeometry(element)
+      const prev = reset ? undefined : this.poses.get(element.id)
+      const animate = prev && canTween(prev.element, element)
+      const duration = element.transition?.durationMs ?? 0
+      const current = prev ? poseAt(prev, now) : to
+      const sameGeometry = animate && geometryEqual(prev.to, to)
+      const sameRotation =
+        animate && prev.to.rotation === to.rotation && prev.to.pivotX === to.pivotX && prev.to.pivotY === to.pivotY
+      poses.set(element.id, {
+        element,
+        to,
+        from: sameGeometry ? prev.from : animate ? current : to,
+        start: sameGeometry ? prev.start : now,
+        duration: sameGeometry ? prev.duration : animate ? Math.min(duration, 255 * 33) : 0,
+        rotationFrom: sameRotation ? prev.rotationFrom : animate ? current.rotation : to.rotation,
+        rotationTo: to.rotation,
+        rotationStart: sameRotation ? prev.rotationStart : now,
+        rotationDuration: sameRotation ? prev.rotationDuration : animate ? Math.min(duration, 65535) : 0,
+      })
+    }
+    this.poses = poses
+    this.frame = frame
+    const used = new Set(scene?.elements.flatMap((e) => (e.data ? [e.data] : [])) ?? [])
+    if (frame.content.kind === "bitmap") used.add(frame.content.data)
+    for (const key of this.images.keys()) if (!used.has(key)) this.images.delete(key)
+    this.draw()
+  }
+
+  dispose(): void {
+    this.disposed = true
+    if (this.raf !== null) cancelAnimationFrame(this.raf)
+    this.raf = null
+    this.poses.clear()
+    this.images.clear()
+    this.pending.clear()
+  }
+
+  private image(data: string): HTMLCanvasElement | null {
+    if (this.images.has(data)) return this.images.get(data) ?? null
+    if (this.pending.has(data)) return null
+    this.pending.add(data)
+    const image = new Image()
+    image.onload = () => {
+      this.pending.delete(data)
+      if (this.disposed) return
+      const content = this.frame?.content
+      if (
+        !(content?.kind === "bitmap" && content.data === data) &&
+        !(content?.kind === "scene" && content.elements.some((e) => e.data === data))
+      )
+        return
+      const surface = document.createElement("canvas")
+      surface.width = image.naturalWidth
+      surface.height = image.naturalHeight
+      const ctx = surface.getContext("2d", {willReadFrequently: true})
+      if (!ctx) return
+      ctx.drawImage(image, 0, 0)
+      const pixels = ctx.getImageData(0, 0, surface.width, surface.height)
+      for (let i = 0; i < pixels.data.length; i += 4) {
+        const alpha =
+          ((0.2126 * pixels.data[i] + 0.7152 * pixels.data[i + 1] + 0.0722 * pixels.data[i + 2]) * pixels.data[i + 3]) /
+          255
+        pixels.data[i] = 0
+        pixels.data[i + 1] = 255
+        pixels.data[i + 2] = 136
+        pixels.data[i + 3] = alpha
+      }
+      ctx.putImageData(pixels, 0, 0)
+      this.images.set(data, surface)
+      this.draw()
+    }
+    image.onerror = () => {
+      this.pending.delete(data)
+      if (!this.disposed) this.images.set(data, null)
+    }
+    // Encoded images only: never fetch arbitrary URLs from scene data.
+    image.src = data.startsWith("data:image/")
+      ? data
+      : `data:image/${data.startsWith("Qk") ? "bmp" : "png"};base64,${data}`
+    return null
+  }
+
+  private draw(): void {
+    if (this.disposed || !this.frame) return
+    if (this.raf !== null) cancelAnimationFrame(this.raf)
+    this.raf = null
+    const {canvas, content} = this.frame
+    const w = Math.max(1, Math.round(canvas?.width ?? 1)),
+      h = Math.max(1, Math.round(canvas?.height ?? 1))
+    if (this.canvas.width !== w) this.canvas.width = w
+    if (this.canvas.height !== h) this.canvas.height = h
+    const ctx = this.ctx
+    ctx.clearRect(0, 0, w, h)
+    const now = Date.now()
+    let animating = false
+    if (content.kind === "bitmap") {
+      const image = this.image(content.data)
+      if (image) {
+        const g1 = image.width === 576 && image.height === 135
+        const x = g1 ? 29 : 0,
+          y = g1 ? 21 : 0
+        ctx.drawImage(image, x, y, image.width - x, image.height - y, 0, 0, w, h)
+      }
+    }
+    for (const pose of this.poses.values()) {
+      animating ||= now < pose.start + pose.duration || now < pose.rotationStart + pose.rotationDuration
+      this.paint(pose.element, poseAt(pose, now))
+    }
+    if (animating) this.raf = requestAnimationFrame(() => this.draw())
+  }
+
+  private paint(element: MirrorElement, g: SceneGeometry): void {
+    const ctx = this.ctx
+    ctx.save()
+    try {
+      if (g.rotation) {
+        ctx.translate(g.pivotX, g.pivotY)
+        ctx.rotate((g.rotation * Math.PI) / 180)
+        ctx.translate(-g.pivotX, -g.pivotY)
+      }
+      if (element.type === "image") {
+        const image = element.data ? this.image(element.data) : null
+        ctx.globalAlpha = g.level
+        if (image) ctx.drawImage(image, g.x, g.y, g.w, g.h)
+        return
+      }
+      if (element.type === "text") {
+        if (g.stroke > 0) {
+          const border = new Path2D()
+          border.roundRect(g.x, g.y, g.w, g.h, Math.max(0, Math.min(g.radius, g.w / 2, g.h / 2)))
+          this.path(border, false, g)
+        }
+        ctx.beginPath()
+        ctx.rect(g.x, g.y, g.w, g.h)
+        ctx.clip()
+        const mono = element.style?.font === "mono",
+          size = mono ? element.style?.fontSize || 20 : 20
+        const pitch = mono ? Math.round(size * 1.2) : 27
+        ctx.font = `${size}px ${mono ? "monospace" : "Arial, sans-serif"}`
+        const metrics = ctx.measureText("0"),
+          cell = Math.max(1, Math.round(metrics.width))
+        const ascent = metrics.fontBoundingBoxAscent || size * 0.8,
+          descent = metrics.fontBoundingBoxDescent || size * 0.2
+        const baseline = mono ? Math.round((pitch - ascent - descent) / 2 + ascent) : 22
+        ctx.fillStyle = `rgba(0,255,136,${g.level})`
+        ;(element.text ?? "").split("\n").forEach((line, row) => {
+          if (row > 0 && (mono ? 2 + row * pitch >= g.h - 2 : (row + 1) * pitch > g.h)) return
+          let x = g.x + 2
+          for (const char of line) {
+            ctx.fillText(char, x, g.y + 2 + row * pitch + baseline)
+            x += mono ? cell : this.frame?.glyphWidths[char] ?? ctx.measureText(char).width
+          }
+        })
+        return
+      }
+      let path = new Path2D()
+      const pts = g.points,
+        cx = g.x + g.w / 2,
+        cy = g.y + g.h / 2,
+        r = Math.min(g.w, g.h) / 2
+      switch (element.type) {
+        case "rect":
+          path.roundRect(g.x, g.y, g.w, g.h, Math.max(0, Math.min(g.radius, g.w / 2, g.h / 2)))
+          break
+        case "circle":
+          path.arc(cx, cy, r, 0, Math.PI * 2)
+          break
+        case "arc":
+        case "pie": {
+          const sweep = g.endDeg - g.startDeg
+          if (!sweep) return
+          if (Math.abs(sweep) >= 360) path.arc(cx, cy, r, 0, Math.PI * 2)
+          else {
+            if (element.type === "pie") path.moveTo(cx, cy)
+            path.arc(cx, cy, r, (g.startDeg * Math.PI) / 180, (g.endDeg * Math.PI) / 180, sweep < 0)
+            if (element.type === "pie") path.closePath()
+          }
+          break
+        }
+        case "line":
+        case "triangle":
+        case "quad":
+          if (pts.length < 4) return
+          path.moveTo(pts[0], pts[1])
+          for (let i = 2; i < pts.length; i += 2) path.lineTo(pts[i], pts[i + 1])
+          if (element.type !== "line") path.closePath()
+          break
+        case "bezier":
+          path.moveTo(pts[0], pts[1])
+          if (pts.length === 6) path.quadraticCurveTo(pts[2], pts[3], pts[4], pts[5])
+          else if (pts.length === 8) path.bezierCurveTo(pts[2], pts[3], pts[4], pts[5], pts[6], pts[7])
+          else return
+          break
+        case "svg":
+          if (!element.d) return
+          path = new Path2D(element.d)
+          ctx.translate(g.x, g.y)
+          ctx.scale(g.pathScale, g.pathScale)
+          break
+        default:
+          return
+      }
+      const filled =
+        element.type === "svg" ||
+        element.type === "pie" ||
+        (["rect", "circle", "triangle", "quad"].includes(element.type) && element.style?.fill === true)
+      this.path(path, filled, g, element.fillRule === "evenodd" ? "evenodd" : "nonzero")
+    } finally {
+      ctx.restore()
+    }
+  }
+
+  private path(path: Path2D, fill: boolean, g: SceneGeometry, rule: CanvasFillRule = "nonzero"): void {
+    const ctx = this.ctx
+    ctx.lineWidth = Math.max(1, g.stroke)
+    // Replace the shape's covered pixels, including level-zero erasure.
+    ctx.globalCompositeOperation = "destination-out"
+    ctx.fillStyle = ctx.strokeStyle = "black"
+    if (fill) ctx.fill(path, rule)
+    else ctx.stroke(path)
+    ctx.globalCompositeOperation = "source-over"
+    ctx.fillStyle = ctx.strokeStyle = `rgba(0,255,136,${g.level})`
+    if (fill) ctx.fill(path, rule)
+    else ctx.stroke(path)
+  }
+}