Display

session.display.render([
  {type: "text",  id: "stats", box: {x: 12, y: 9, w: 200, h: 40},   text: "863 m · 11 min"},
  {type: "image", id: "map",   box: {x: 335, y: 14, w: 150, h: 150}, data: mapPng},
  {type: "rect",  id: "frame", box: {x: 4, y: 4, w: 490, h: 210},   style: {border: 2, radius: 6}},
]);

session.display.render([
  {type: "svg", id: "arrow", box: {x: 40, y: 40, w: 60, h: 60}, d: "M0 0 L10 20 L20 0 Z",
   rotation: 90},
]);

import type {RenderElement} from "@glassly/miniapp/background";

const content: RenderElement[] = [/* what the miniapp is showing */];
const card = (x: number): RenderElement[] => [
  {type: "rect", id: "card", box: {x, y: 70, w: 300, h: 150}, style: {fill: true, color: 2, radius: 10},
   depth: 8, transition: {durationMs: 350, easing: "ease-out"}},
  {type: "text", id: "card-title", box: {x: x + 16, y: 82, w: 268, h: 30}, text: "Incoming call",
   style: {font: "builtin"}, depth: 8, transition: {durationMs: 350, easing: "ease-out"}},
];
// Move within the canvas, then await the final transition.
await session.display.render([...content, ...card(20)]);
await session.display.render([...content, ...card(252)]);
// remove the card's elements (or park them again first) to take it away.

session.display.render([
  {type: "circle", id: "ball", box: {x: 40, y: 100, w: 30, h: 30}, style: {fill: true},
   transition: {durationMs: 300, easing: "ease-in-out"}},
])
// later: the same id at a new box glides there over 300 ms
session.display.render([
  {type: "circle", id: "ball", box: {x: 400, y: 100, w: 30, h: 30}, style: {fill: true},
   transition: {durationMs: 300, easing: "ease-in-out"}},
])

session.display.render([
  {type: "image", id: "map", box: {x: 0, y: 0, w: 120, h: 120, anchor: "bottom-right"}, data: mapPng},
]);

const d = session.capabilities?.display;
session.display.render([
  {type: "text", id: "caption", box: {x: 0, y: 0, w: d?.width ?? 576, h: d?.height ?? 288}, text},
]);

session.display.render([]);

const result = await session.display.render(elements);
// result.status: "displayed" (the host accepted the frame) or "blocked"
//                (another app owns the display, or the request failed;
//                result.reason says why)
// result.degraded: true when the phone adjusted the scene for the device
// result.dropped: ids of elements the phone had to drop
// result.presented: true once the glasses have shown this frame's content
//                and its transitions finished; absent on legacy/degraded
//                paths, where "displayed" just means sent
// result.superseded: a newer render() from this app landed before this one
//                 was reported; its content is what's on screen

const d = session.capabilities?.display;
session.display.render([
  {type: "text", id: "message", box: {x: 0, y: 0, w: d?.width ?? 576, h: d?.height ?? 288}, text: "Saved"},
], {durationMs: 2000});

import { monoTextRows, LatestRenderScheduler } from "@glassly/miniapp";

import {G2_PROFILE, TextMeasurer, TextWrapper, pixelArtPng, pixelArtSize} from "@glassly/miniapp/display";

const measurer = new TextMeasurer(G2_PROFILE);
const wrapper = new TextWrapper(measurer);
const wrapped = wrapper.wrap("Next stop: Market Street", {
  maxWidthPx: 280, maxLines: 2, breakMode: "word",
});
const arrow = ["..#..", ".###.", "#####", "..#.."] as const;

await session.display.render([
  {type: "text", id: "directions", box: {x: 12, y: 12, w: 280, h: 80}, text: wrapped.lines.join("\n")},
  {type: "image", id: "arrow", box: {x: 300, y: 12, ...pixelArtSize(arrow)}, data: pixelArtPng(arrow)},
]);

// In a dashboard miniapp's background handler:
session.display.onViewChange(({view, reason}) => {
  if (view === "main") {
    // The page closed, the role moved to another miniapp, or eligibility changed.
    void session.input.setClaimedGestures([], {scope: "page"});
  }
  console.log(view, reason);
});

if (session.capabilities?.display?.views?.includes("dashboard")) {
  const result = await session.display.showView("dashboard");
  if (result.status === "shown") {
    await session.input.setClaimedGestures(["single_tap", "swipe_up"], {scope: "page"});
    await session.display.render([
      {type: "text", id: "page-title", box: {x: 12, y: 12, w: 300, h: 40}, text: "Dashboard page"},
    ], {view: "dashboard"});
  }
}

// When your page closes:
await session.input.setClaimedGestures([], {scope: "page"});
await session.display.showView("main");

if (session.capabilities?.hasNativeNavigation) {
  await session.display.sendNativeNavInfo({
    directionIcon: 3,          // firmware direction-icon index, 0…35
    distance: "500 m",
    roadName: "Market St",
    spendTime: "11 min",       // remaining trip duration
    remainDistance: "0.9 km",
    etaTime: "18:18",
    speed: "5 km/h",
  });
}