@popcraft/kit 0.25.0 → 0.26.1

package/dist/chunks/chunk-W4E7Z3DG.js

@@ -0,0 +1,738 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  coverArt,
+  portraitArt
+} from "./chunk-OVOMTPXM.js";
+import {
+  onColor
+} from "./chunk-RIXFGFXG.js";
+import {
+  keyCamera,
+  onZone,
+  world
+} from "./chunk-H6EKEJV4.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  presetPaint,
+  shaderPreset
+} from "./chunk-E6EMPOWS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/app/music/build.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var W = 402;
+var H = 874;
+var MINI_TABS = 718;
+var MINI_PLAIN = 776;
+var MAP = { from: 1100, step: 1e3 };
+var SONG_FROM = 1e3;
+var REORDER = { from: 1100, to: 2100 };
+var FOLD = { from: 1400, to: 2e3, distance: 160 };
+var secondsOf = (mmss) => {
+  const [m, s] = mmss.split(":").map(Number);
+  return m * 60 + s;
+};
+var songMs = (theme) => secondsOf(theme.length) * 1e3;
+var shadow = (k, role, blur, y, a) => ({ type: "DROP_SHADOW", color: k.color(role, a), offset: { x: 0, y }, blur, spread: 0, visible: true });
+var blurFx = (radius) => ({ type: "LAYER_BLUR", radius, visible: true });
+function buildMusicApp(theme) {
+  const k = new Kit(theme.app, preset("iphone-17"));
+  const c = theme.colors;
+  const zoneRoles = {};
+  theme.zones.forEach((z, i) => {
+    zoneRoles[`zone${i + 1}`] = z.color;
+    zoneRoles[`onZone${i + 1}`] = onColor(z.color, "#FFFFFF", "#111111");
+    zoneRoles[`glow${i + 1}`] = z.glow;
+  });
+  k.brand({
+    paper: c.paper,
+    text: c.text,
+    onPaper: c.onPaper,
+    primary: c.primary,
+    onPrimary: onColor(c.primary, "#FFFFFF", "#0B0B12"),
+    surface: c.surface,
+    onSurface: c.onSurface,
+    dim: c.dim,
+    line: c.line,
+    raised: c.raised,
+    ...zoneRoles
+  }, { name: theme.app, track: theme.track, artist: theme.artist, album: theme.album });
+  const fam = theme.type.family;
+  const T = (name, size, weight, lh, extra = {}) => k.textStyle(name, { size, fontWeight: weight, lineHeight: lh, fontFamily: fam, ...extra });
+  T("Status 15", 15, 600, 20);
+  T("Display 34", 34, theme.type.heavy, 40, { letterSpacing: theme.type.tracking });
+  T("Title 26", 26, theme.type.heavy, 32, { letterSpacing: theme.type.tracking / 2 });
+  T("Title 20", 20, 700, 26);
+  T("Row 16", 16, 600, 22);
+  T("Body 16", 16, 400, 24);
+  T("Meta 13", 13, 500, 18);
+  T("Label 12", 12, 700, 16, theme.type.caps ? { letterSpacing: 1.2, textCase: "UPPER" } : { letterSpacing: 0.2 });
+  T("Button 16", 16, 700, 22);
+  T("Tab 12", 12, 600, 16);
+  T("Centre 13", 13, 600, 18, { textAlign: "CENTER" });
+  k.component("Button", { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, align: "CENTER", padding: { top: 15, right: 28, bottom: 15, left: 28 }, props: { Label: theme.copy.begin } }, (id) => {
+    k.propText(id, "Label", { style: "Button 16", color: "onPrimary", autoWidth: true });
+  });
+  k.component("Wide button", { direction: "HORIZONTAL", width: 354, fill: "primary", radius: 999, align: "CENTER", justify: "CENTER", padding: { top: 16, right: 24, bottom: 16, left: 24 }, props: { Label: theme.copy.begin } }, (id) => {
+    k.propText(id, "Label", { style: "Button 16", color: "onPrimary", autoWidth: true });
+  });
+  k.component("Chip", { direction: "HORIZONTAL", width: "HUG", fill: "raised", radius: 999, align: "CENTER", padding: { top: 8, right: 14, bottom: 8, left: 14 }, props: { Label: "Next" } }, (id) => {
+    k.propText(id, "Label", { style: "Meta 13", color: "onSurface", autoWidth: true });
+  });
+  k.component("Track row", { direction: "HORIZONTAL", width: 354, height: 56, gap: 14, align: "CENTER", props: { Index: "1", Title: "Track", Artist: "Artist", Time: "3:00" } }, (id) => {
+    k.propText(id, "Index", { style: "Meta 13", color: "dim", width: 18 });
+    const words = k.stack(id, { gap: 2, width: 250, name: "Words" });
+    k.propText(words, "Title", { style: "Row 16", color: "onSurface" });
+    k.propText(words, "Artist", { style: "Meta 13", color: "dim" });
+    k.propText(id, "Time", { style: "Meta 13", color: "dim", autoWidth: true });
+  });
+  k.variantSet("Mood chip", "State", ["Off", "On"], { direction: "HORIZONTAL", width: "HUG", radius: 999, gap: 8, align: "CENTER", padding: { top: 10, right: 16, bottom: 10, left: 14 }, props: { Label: "Late night" } }, (state, id) => {
+    k.ellipse(id, state === "On" ? 10 : 6, state === "On" ? "onPrimary" : "dim", { name: "Dot" });
+    k.propText(id, "Label", { style: "Meta 13", color: state === "On" ? "onPrimary" : "onSurface", autoWidth: true });
+  }, (state) => ({ fill: state === "On" ? "primary" : "raised" }));
+  k.changeTo("Mood chip/Off", "ON_CLICK", "Mood chip/On", 260, "EASE_OUT");
+  k.changeTo("Mood chip/On", "ON_CLICK", "Mood chip/Off", 220, "EASE_OUT");
+  k.variantSet("Follow", "State", ["Follow", "Following"], { direction: "HORIZONTAL", width: "HUG", radius: 999, gap: 6, align: "CENTER", padding: { top: 9, right: 18, bottom: 9, left: 18 }, stroke: { color: "line", width: 1.5 } }, (state, id) => {
+    k.text(id, state, { style: "Meta 13", color: state === "Following" ? "onPrimary" : "text", autoWidth: true, name: "Label" });
+  }, (state) => ({ fill: state === "Following" ? "primary" : [] }));
+  k.changeTo("Follow/Follow", "ON_CLICK", "Follow/Following", 260);
+  k.changeTo("Follow/Following", "ON_CLICK", "Follow/Follow", 220);
+  playButton(k);
+  likeButton(k);
+  volumeSlider(k);
+  const s = {
+    introA: k.sheet,
+    introB: k.addScreen("Moods"),
+    home: k.addScreen("Home"),
+    zones: theme.zones.map((z) => k.addScreen(z.name)),
+    album: k.addScreen("Album"),
+    now: k.addScreen("Now playing"),
+    queue: k.addScreen("Queue"),
+    search: k.addScreen("Search"),
+    library: k.addScreen("Library"),
+    artist: k.addScreen("Artist")
+  };
+  k.nameSheet(s.introA, "Welcome");
+  const all = [s.introA, s.introB, s.home, ...s.zones, s.album, s.now, s.queue, s.search, s.library, s.artist];
+  for (const id of all) {
+    k.flowSheet(id, 0, 0, "paper");
+    k.patch(id, { clipsContent: true });
+    backdrop(k, id, theme);
+  }
+  const full = { x: 0, y: 0, width: W, height: H };
+  const albumArt = coverArt(theme.art, 1, theme.palettes.album);
+  const zoneArt = theme.zones.map((z, i) => coverArt(theme.art, 10 + i, [z.color, theme.colors.paper, z.glow, "#FFFFFF"]));
+  const extraArt = theme.palettes.extra.map((p, i) => coverArt(theme.art, 20 + i, p));
+  const portrait = portraitArt(theme.art, 3, theme.palettes.portrait);
+  const cover = (parent, size, at, radius, url = albumArt, name = "Cover") => {
+    const id = k.photo(parent, size, size, { radius, ground: "raised", name, absolute: at });
+    k.patch(k.node(id).childIds[1], { fills: [{ type: "IMAGE", imageUrl: url, scaleMode: "FILL", opacity: 1, visible: true }] });
+    return id;
+  };
+  const nowCover = (parent, size, at, radius) => {
+    const id = cover(parent, size, at, radius);
+    k.share(id, "cover");
+    return id;
+  };
+  {
+    const id = s.introA;
+    k.timeline(id, { duration: 2200, fps: 30 });
+    world(k, id, theme, { at: centreOf(theme), zoom: theme.world.zoom.introA, box: full, focus: { x: W / 2, y: 330 } });
+    scrim(k, id, 0, 70, 0.7);
+    scrim(k, id, 430, H - 430, 0.8);
+    statusBar(k, id);
+    const mark = k.frame(id, { x: W / 2 - 28, y: 452, width: 56, height: 56 }, { name: "App mark", fill: "primary", radius: 18, effects: [shadow(k, "primary", 30, 10, 0.45)] });
+    appMark(k, mark);
+    const copy = k.stack(id, { gap: 12, width: 354, align: "CENTER", name: "Welcome copy", absolute: { x: 24, y: 530 } });
+    k.text(copy, "{{brand.name}}", { style: "Label 12", color: "onPaper", align: "CENTER", name: "App name" });
+    k.text(copy, theme.copy.introTitle, { style: "Display 34", color: "text", align: "CENTER", name: "Welcome title" });
+    k.text(copy, theme.copy.introBody, { style: "Body 16", color: "onPaper", align: "CENTER", name: "Welcome body" });
+    const begin = k.instance(id, "Wide button", { Label: theme.copy.begin }, { name: "Begin", absolute: { x: 24, y: 774 } });
+    stepDots(k, id, 0);
+    k.link(begin, s.introB, "SMART_ANIMATE", { duration: 1100, easing: "EASE_IN_OUT", stagger: 70 });
+    k.link(id, s.introB, "SMART_ANIMATE", { trigger: "ON_DRAG", direction: "LEFT", duration: 1100, easing: "EASE_IN_OUT", stagger: 70 });
+    k.cues(id, [
+      { layer: "App mark", preset: "pop-in", at: 300 },
+      { layer: "App name", preset: "fade-in", at: 500 },
+      { layer: "Welcome title", preset: "words-in", at: 600 },
+      { layer: "Welcome body", preset: "rise-in", at: 1e3 },
+      { layer: "Begin", preset: "rise-in", at: 1200 }
+    ]);
+    k.flowStart(id, `${theme.app} prototype`);
+  }
+  {
+    const id = s.introB;
+    k.timeline(id, { duration: 1800, fps: 30 });
+    world(k, id, theme, onZone(theme, 1, theme.world.zoom.introB, full, { focus: { x: W / 2, y: 250 } }));
+    scrim(k, id, 0, 70, 0.7);
+    scrim(k, id, 400, H - 400, 0.8);
+    statusBar(k, id);
+    const copy = k.stack(id, { gap: 10, width: 354, name: "Moods copy", absolute: { x: 24, y: 424 } });
+    k.text(copy, theme.copy.moodsTitle, { style: "Display 34", color: "text", name: "Moods title" });
+    k.text(copy, theme.copy.moodsBody, { style: "Body 16", color: "onPaper", name: "Moods body" });
+    const chips = k.stack(id, { direction: "HORIZONTAL", wrap: true, gap: 10, width: 354, name: "Mood chips", absolute: { x: 24, y: 588 } });
+    theme.copy.moods.forEach((m, i) => k.instance(chips, i === 1 || i === 4 ? "Mood chip/On" : "Mood chip", { Label: m }, { name: "Mood" }));
+    const go = k.instance(id, "Wide button", { Label: "Start listening" }, { name: "Continue", absolute: { x: 24, y: 774 } });
+    stepDots(k, id, 1);
+    k.link(go, s.home, "SMART_ANIMATE", { duration: 1200, easing: "EASE_IN_OUT", stagger: 60 });
+    k.link(id, s.home, "SMART_ANIMATE", { trigger: "ON_DRAG", direction: "LEFT", duration: 1200, easing: "EASE_IN_OUT", stagger: 60 });
+    k.link(id, null, "SMART_ANIMATE", { trigger: "ON_DRAG", direction: "RIGHT", navigation: "BACK", duration: 1e3 });
+    k.cues(id, [
+      { layer: "Moods title", preset: "words-in", at: 200 },
+      { layer: "Moods body", preset: "rise-in", at: 500 },
+      { layer: "Mood", preset: "pop-in", at: 650, stagger: { delay: 60 } },
+      { layer: "Continue", preset: "rise-in", at: 1e3 }
+    ]);
+  }
+  const mapBox = { x: 0, y: 150, width: W, height: 340 };
+  const mapCam = (i) => onZone(theme, i, 1, mapBox, { focus: { x: W / 2, y: 150 } });
+  {
+    const id = s.home;
+    const stops = theme.zones.map((_, i) => MAP.from + i * MAP.step);
+    k.timeline(id, { duration: stops[stops.length - 1], fps: 30, markers: stops.map((t, i) => ({ id: `zone-${i + 1}`, t, kind: "pause", label: theme.zones[i].name })) });
+    const map = world(k, id, theme, mapCam(0));
+    scrim(k, id, 0, mapBox.y, 0.85);
+    scrim(k, id, mapBox.y + mapBox.height, H - mapBox.y - mapBox.height, 0.85);
+    statusBar(k, id);
+    const head = k.stack(id, { gap: 4, width: 300, name: "Greeting", absolute: { x: 24, y: 62 } });
+    k.text(head, theme.copy.greeting, { style: "Title 26", color: "text", name: "Greeting title" });
+    k.text(head, `{{brand.name}} \xB7 ${theme.zones.length} worlds to explore`, { style: "Meta 13", color: "onPaper", name: "Greeting line" });
+    theme.zones.forEach((_, i) => {
+      const z = k.named(map.id, `Zone ${i + 1}`)[0];
+      k.link(z, s.zones[i], "SMART_ANIMATE", { duration: 1100, easing: "EASE_IN_OUT", stagger: 40 });
+    });
+    const span = theme.zones.length - 1;
+    k.timelineControl(map.id, "ON_DRAG", { op: "SCRUB", axis: "X", distance: -Math.round(zoneGap(theme) * span), span: [stops[0], stops[span]], release: "SNAP", glide: 420 });
+    keyCamera(k, map.layers, theme, stops.map((t, i) => ({ t, cam: mapCam(i) })));
+    const label = k.stack(id, { direction: "HORIZONTAL", gap: 10, align: "CENTER", width: 354, name: "Zone caption", absolute: { x: 24, y: 494 } });
+    const name = k.text(label, theme.zones[0].name, { style: "Row 16", color: "text", autoWidth: true, name: "Zone name" });
+    const count = k.text(label, `1 / ${theme.zones.length}`, { style: "Meta 13", color: "onPaper", autoWidth: true, name: "Zone count" });
+    const halfway = (i) => i === 0 ? stops[0] : stops[i] - MAP.step / 2;
+    k.animate(name, "text.content", theme.zones.map((z, i) => ({ t: halfway(i), v: z.name, ease: ease.hold })));
+    k.animate(count, "text.content", theme.zones.map((_, i) => ({ t: halfway(i), v: `${i + 1} / ${theme.zones.length}`, ease: ease.hold })));
+    const dots = k.frame(id, { x: W - 24 - 70, y: 500, width: 70, height: 8 }, { name: "Zone dots" });
+    theme.zones.forEach((_, j) => {
+      const dot = k.rect(dots, 8, 8, "line", { radius: 4, name: `Dot ${j + 1}`, absolute: { x: j * 14, y: 0 } });
+      const on = k.rect(dots, 8, 8, "primary", { radius: 4, name: `Dot ${j + 1} on`, absolute: { x: j * 14, y: 0 }, opacity: j === 0 ? 1 : 0 });
+      void dot;
+      k.animate(on, "opacity", stops.map((t, i) => ({ t, v: i === j ? 1 : 0, ...i < stops.length - 1 ? { ease: ease.linear } : {} })));
+    });
+    const next = k.frame(id, { x: W - 24 - 40, y: 60, width: 40, height: 40 }, { name: "Next zone", fill: "raised", radius: 20 });
+    chevron(k, next, "right", "onSurface");
+    k.timelineControl(next, "ON_CLICK", { op: "SEEK", to: "NEXT", span: [stops[0], stops[span]], glide: 700 });
+    k.text(id, "Jump back in", { style: "Label 12", color: "onPaper", name: "Jump label", absolute: { x: 24, y: 530 }, width: 200 });
+    const card = k.frame(id, { x: 24, y: 556, width: 354, height: 138 }, { name: "Jump back card", fill: "surface", radius: theme.radius, effects: [shadow(k, "text", 30, 14, 0.18)] });
+    nowCover(card, 106, { x: 16, y: 16 }, Math.max(8, theme.radius - 8));
+    const words = k.stack(card, { gap: 4, width: 200, name: "Card words", absolute: { x: 138, y: 22 } });
+    k.text(words, "{{brand.album}}", { style: "Title 20", color: "onSurface", name: "Card album" });
+    k.text(words, "{{brand.artist}}", { style: "Meta 13", color: "dim", name: "Card artist" });
+    k.instance(card, "Chip", { Label: "Side A \xB7 12 min left" }, { name: "Card chip", absolute: { x: 138, y: 90 } });
+    k.link(card, s.album, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    miniPlayer(k, id, theme, MINI_TABS, s.now);
+    tabBar(k, id, theme, 0, s);
+    k.cues(id, [
+      { layer: "Greeting title", preset: "rise-in", at: 150 },
+      { layer: "Greeting line", preset: "fade-in", at: 300 },
+      { layer: "Zone caption", preset: "fade-in", at: 400 },
+      { layer: "Jump back card", preset: "rise-in", at: 450 },
+      { layer: "Next zone", preset: "pop-in", at: 500 }
+    ]);
+  }
+  s.zones.forEach((id, i) => {
+    const z = theme.zones[i];
+    k.timeline(id, { duration: 1800, fps: 30 });
+    const glow = k.ellipse(id, 320, `zone${i + 1}`, { name: "Zone glow", absolute: { x: W / 2 - 160, y: 70 }, opacity: 0.35, effects: [blurFx(60)] });
+    k.share(glow, `zone-${i + 1}`);
+    world(k, id, theme, onZone(theme, i, theme.world.zoom.zone, full, { focus: { x: W / 2, y: 230 } }));
+    scrim(k, id, 0, 112, 0.72);
+    statusBar(k, id);
+    backButton(k, id, theme);
+    k.text(id, `World ${i + 1} of ${theme.zones.length}`, { style: "Label 12", color: "text", align: "CENTER", width: 200, name: "World count", absolute: { x: W / 2 - 100, y: 72 } });
+    const sheet = k.frame(id, { x: 0, y: 400, width: W, height: H - 400 + 40 }, { name: "Zone sheet", fill: "surface", radius: 30, effects: [shadow(k, "text", 40, -8, 0.22)] });
+    k.rect(sheet, 64, 6, `zone${i + 1}`, { radius: 3, name: "Zone band", absolute: { x: W / 2 - 32, y: 12 } });
+    const words = k.stack(sheet, { gap: 6, width: 354, name: "Zone words", absolute: { x: 24, y: 32 } });
+    k.text(words, z.name, { style: "Title 26", color: "onSurface", name: "Zone title" });
+    k.text(words, z.tagline, { style: "Body 16", color: "dim", name: "Zone tagline" });
+    const actions = k.stack(sheet, { direction: "HORIZONTAL", gap: 10, align: "CENTER", width: 354, name: "Zone actions", absolute: { x: 24, y: 128 } });
+    const play = k.instance(actions, "Button", { Label: "Play this world" }, { name: "Play zone" });
+    const nextZone = (i + 1) % theme.zones.length;
+    const hop = k.instance(actions, "Chip", { Label: "Next world" }, { name: "Next world" });
+    k.link(play, s.now, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    k.link(hop, s.zones[nextZone], "SMART_ANIMATE", { duration: 1200, easing: "EASE_IN_OUT", stagger: 50 });
+    const list = k.stack(sheet, { gap: 0, width: 354, name: "Zone tracks", absolute: { x: 24, y: 190 } });
+    z.tracks.slice(0, 3).forEach((t, j) => {
+      const row = k.instance(list, "Track row", { Index: String(j + 1), Title: t[0], Artist: t[1], Time: t[2] }, { name: "Zone track", width: "FILL" });
+      k.link(row, s.now, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    });
+    miniPlayer(k, id, theme, MINI_PLAIN, s.now);
+    k.link(id, null, "SMART_ANIMATE", { trigger: "ON_DRAG", direction: "RIGHT", navigation: "BACK", duration: 1e3 });
+    k.cues(id, [
+      { layer: "Zone sheet", preset: "rise-in", at: 200, params: { distance: 120 } },
+      { layer: "Zone words", preset: "rise-in", at: 400 },
+      { layer: "Zone actions", preset: "rise-in", at: 520 },
+      { layer: "Zone track", preset: "rise-in", at: 620, stagger: { delay: 70 } },
+      { layer: "World count", preset: "fade-in", at: 300 }
+    ]);
+  });
+  {
+    const id = s.album;
+    k.timeline(id, { duration: 1600, fps: 30 });
+    world(k, id, theme, onZone(theme, theme.albumZone, theme.world.zoom.album, full, { opacity: 0.4, focus: { x: W / 2, y: 230 } }));
+    scrim(k, id, 0, 104, 0.6);
+    scrim(k, id, 340, H - 340, 0.82);
+    statusBar(k, id);
+    backButton(k, id, theme);
+    nowCover(id, 236, { x: (W - 236) / 2, y: 104 }, theme.radius);
+    const words = k.stack(id, { gap: 4, width: 354, align: "CENTER", name: "Album words", absolute: { x: 24, y: 360 } });
+    k.text(words, "{{brand.album}}", { style: "Title 26", color: "text", align: "CENTER", name: "Album title" });
+    const by = k.text(words, "{{brand.artist}}", { style: "Row 16", color: "text", align: "CENTER", name: "Album artist" });
+    k.text(words, `Album \xB7 ${theme.albumYear} \xB7 ${theme.albumTracks.length} songs`, { style: "Meta 13", color: "onPaper", align: "CENTER", name: "Album meta" });
+    k.link(by, s.artist, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    const panel = k.frame(id, { x: 16, y: 470, width: W - 32, height: 290 }, { name: "Album panel", fill: "surface", radius: theme.radius });
+    const play = k.instance(panel, "Button", { Label: "Play album" }, { name: "Play album", absolute: { x: 16, y: 16 } });
+    k.instance(panel, "Chip", { Label: "Shuffle" }, { name: "Shuffle", absolute: { x: 180, y: 23 } });
+    k.link(play, s.now, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    const list = k.stack(panel, { width: 338, name: "Album tracks", absolute: { x: 16, y: 84 } });
+    theme.albumTracks.slice(0, 3).forEach((t, j) => {
+      const row = k.instance(list, "Track row", { Index: String(j + 1), Title: t[0], Artist: t[1], Time: t[2] }, { name: "Album track", width: "FILL" });
+      k.link(row, s.now, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    });
+    miniPlayer(k, id, theme, MINI_PLAIN, s.now);
+    k.link(id, null, "SMART_ANIMATE", { trigger: "ON_DRAG", direction: "RIGHT", navigation: "BACK", duration: 800 });
+    k.cues(id, [
+      { layer: "Album words", preset: "rise-in", at: 250 },
+      { layer: "Album panel", preset: "rise-in", at: 400, params: { distance: 80 } },
+      { layer: "Album track", preset: "rise-in", at: 550, stagger: { delay: 60 } }
+    ]);
+  }
+  {
+    const id = s.now;
+    const song = songMs(theme);
+    const end = SONG_FROM + song;
+    const sectionAt = theme.sections.map((_, i) => Math.round(SONG_FROM + song * i / theme.sections.length));
+    k.timeline(id, { duration: end, fps: 30, markers: theme.sections.map((name, i) => ({ id: `section-${i + 1}`, t: sectionAt[i], label: name })) });
+    world(k, id, theme, onZone(theme, theme.albumZone, theme.world.zoom.now, full, { opacity: 0.35, focus: { x: W / 2, y: 290 } }));
+    const bloom = k.ellipse(id, 460, `glow${theme.albumZone + 1}`, { name: "Bloom", absolute: { x: W / 2 - 230, y: 64 }, opacity: 0.32, effects: [blurFx(80)] });
+    scrim(k, id, 0, 112, 0.6);
+    scrim(k, id, 474, H - 474, 0.82);
+    statusBar(k, id);
+    const min = k.frame(id, { x: 20, y: 60, width: 40, height: 40 }, { name: "Minimize", fill: "raised", radius: 20 });
+    chevron(k, min, "down", "onSurface");
+    k.link(min, null, "SMART_ANIMATE", { navigation: "BACK", duration: 800, easing: "EASE_IN_OUT" });
+    const from = k.stack(id, { gap: 2, width: 240, align: "CENTER", name: "Playing from", absolute: { x: W / 2 - 120, y: 62 } });
+    k.text(from, "Playing from", { style: "Label 12", color: "text", align: "CENTER", name: "From label" });
+    k.text(from, theme.zones[theme.albumZone].name, { style: "Centre 13", color: "text", name: "From zone" });
+    nowCover(id, 338, { x: 32, y: 124 }, theme.radius + 4);
+    const info = k.stack(id, { gap: 4, width: 270, name: "Track info", absolute: { x: 32, y: 488 } });
+    k.text(info, "{{brand.track}}", { style: "Title 26", color: "text", name: "Now title" });
+    const by = k.text(info, "{{brand.artist}}", { style: "Body 16", color: "onPaper", name: "Now artist" });
+    k.link(by, s.artist, "SMART_ANIMATE", { duration: 900, easing: "EASE_IN_OUT", stagger: 40 });
+    k.instance(id, "Like", {}, { name: "Like", absolute: { x: W - 32 - 44, y: 494 } });
+    const bar = k.frame(id, { x: 32, y: 578, width: 338, height: 44 }, { name: "Scrubber" });
+    k.rect(bar, 338, 4, "line", { radius: 2, name: "Progress track", absolute: { x: 0, y: 8 } });
+    const fill = k.rect(bar, 1, 4, "primary", { radius: 2, name: "Progress fill", absolute: { x: 0, y: 8 } });
+    const knob = k.ellipse(bar, 16, "primary", { name: "Knob", absolute: { x: -8, y: 2 }, effects: [shadow(k, "primary", 10, 0, 0.6)] });
+    const section = k.text(bar, theme.sections[0], { style: "Meta 13", color: "onPaper", name: "Section", absolute: { x: 0, y: 22 }, width: 200 });
+    k.text(bar, theme.length, { style: "Meta 13", color: "onPaper", align: "RIGHT", name: "Length", absolute: { x: 238, y: 22 }, width: 100 });
+    k.animate(fill, "width", [{ t: SONG_FROM, v: 1, ease: ease.linear }, { t: end, v: 338 }]);
+    k.animate(knob, "x", [{ t: SONG_FROM, v: -8, ease: ease.linear }, { t: end, v: 330 }]);
+    k.animate(section, "text.content", theme.sections.map((name, i) => ({ t: sectionAt[i], v: name, ease: ease.hold })));
+    k.timelineControl(bar, "ON_DRAG", { op: "SCRUB", axis: "X", distance: 338, span: [SONG_FROM, end], release: "PLAY" });
+    const transport = k.frame(id, { x: 32, y: 640, width: 338, height: 80 }, { name: "Transport" });
+    const prev = k.frame(transport, { x: 38, y: 16, width: 48, height: 48 }, { name: "Previous", radius: 24 });
+    skipGlyph(k, prev, -1);
+    const playing = k.instance(transport, "Play button", {}, { name: "Play", absolute: { x: 129, y: 0 } });
+    const next = k.frame(transport, { x: 252, y: 16, width: 48, height: 48 }, { name: "Next", radius: 24 });
+    skipGlyph(k, next, 1);
+    k.timelineControl(prev, "ON_CLICK", { op: "SEEK", to: "PREV", span: [SONG_FROM, end], glide: 500 });
+    k.timelineControl(next, "ON_CLICK", { op: "SEEK", to: "NEXT", span: [SONG_FROM, end], glide: 500 });
+    k.timelineControl(playing, "ON_CLICK", { op: "TOGGLE", span: [SONG_FROM, end] });
+    const vol = k.frame(id, { x: 32, y: 736, width: 338, height: 28 }, { name: "Volume row" });
+    speaker(k, vol, 0, "onPaper", false);
+    const slider = k.instance(vol, "Volume", {}, { name: "Volume", absolute: { x: 34, y: 4 }, playback: { trigger: "manual", range: ["vol-rest", "vol-max"] } });
+    k.timelineControl(slider, "ON_DRAG", { op: "SCRUB", target: "INSTANCE", axis: "X", distance: 270, span: [0, 1e3], release: "HOLD" });
+    speaker(k, vol, 314, "onPaper", true);
+    const foot = k.stack(id, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", width: 338, name: "Player footer", absolute: { x: 32, y: 792 } });
+    const devices = k.instance(foot, "Chip", { Label: "This phone" }, { name: "Devices" });
+    void devices;
+    const queue = k.instance(foot, "Chip", { Label: "Up next" }, { name: "Open queue" });
+    k.link(queue, s.queue, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 50 });
+    k.link(id, null, "SMART_ANIMATE", { trigger: "ON_DRAG", direction: "DOWN", navigation: "BACK", duration: 800 });
+    k.cues(id, [
+      { layer: "Bloom", preset: "scale-in", at: 0, params: { duration: 900 } },
+      { layer: "Playing from", preset: "fade-in", at: 200 },
+      { layer: "Track info", preset: "rise-in", at: 300 },
+      { layer: "Like", preset: "pop-in", at: 450 },
+      { layer: "Scrubber", preset: "fade-in", at: 450 },
+      { layer: "Transport", preset: "rise-in", at: 500 },
+      { layer: "Volume row", preset: "fade-in", at: 650 },
+      { layer: "Player footer", preset: "fade-in", at: 750 }
+    ]);
+    k.behave(bloom, "opacity", [{ kind: "sine", amp: 0.12, freq: 0.25 }]);
+  }
+  {
+    const id = s.queue;
+    k.timeline(id, { duration: REORDER.to, fps: 30, markers: [{ id: "queue-start", t: REORDER.from, kind: "pause", label: "As it was" }, { id: "queue-moved", t: REORDER.to, label: "Moved up" }] });
+    world(k, id, theme, onZone(theme, theme.albumZone, theme.world.zoom.queue, full, { opacity: 0.3, focus: { x: W / 2, y: 180 } }));
+    scrim(k, id, 0, H, 0.7);
+    statusBar(k, id);
+    const min = k.frame(id, { x: 20, y: 60, width: 40, height: 40 }, { name: "Minimize", fill: "raised", radius: 20 });
+    chevron(k, min, "down", "onSurface");
+    k.link(min, null, "SMART_ANIMATE", { navigation: "BACK", duration: 800, easing: "EASE_IN_OUT" });
+    k.text(id, "Up next", { style: "Title 26", color: "text", name: "Queue title", absolute: { x: 76, y: 62 }, width: 280 });
+    const card = k.frame(id, { x: 16, y: 120, width: W - 32, height: 80 }, { name: "Queue now", fill: "surface", radius: theme.radius });
+    nowCover(card, 56, { x: 12, y: 12 }, 10);
+    const words = k.stack(card, { gap: 2, width: 230, name: "Queue now words", absolute: { x: 82, y: 18 } });
+    k.text(words, "{{brand.track}}", { style: "Row 16", color: "onSurface", name: "Queue now title" });
+    k.text(words, "{{brand.artist}}", { style: "Meta 13", color: "dim", name: "Queue now artist" });
+    equalizer(k, card, { x: W - 32 - 40, y: 30 }, "primary");
+    k.link(card, null, "SMART_ANIMATE", { navigation: "BACK", duration: 800, easing: "EASE_IN_OUT" });
+    k.text(id, "Next in queue", { style: "Label 12", color: "onPaper", name: "Queue label", absolute: { x: 24, y: 222 }, width: 200 });
+    k.text(id, "Drag a song by its grip", { style: "Meta 13", color: "onPaper", align: "RIGHT", name: "Queue hint", absolute: { x: 178, y: 221 }, width: 200 });
+    const rows = k.frame(id, { x: 16, y: 248, width: W - 32, height: 5 * 76 }, { name: "Queue list" });
+    const ROW = 76;
+    const made = theme.queue.slice(0, 5).map((t, j) => {
+      const row = k.frame(rows, { x: 0, y: j * ROW, width: W - 32, height: ROW - 8 }, { name: `Queue row ${j + 1}`, fill: "surface", radius: 16 });
+      grip(k, row, { x: 14, y: 24 });
+      const pic = k.picture(row, extraArt[j % extraArt.length], 44, 44, { radius: 10, name: "Queue art", absolute: { x: 44, y: 12 } });
+      void pic;
+      const w = k.stack(row, { gap: 2, width: 220, name: "Queue words", absolute: { x: 100, y: 13 } });
+      k.text(w, t[0], { style: "Row 16", color: "onSurface", name: "Queue song" });
+      k.text(w, t[1], { style: "Meta 13", color: "dim", name: "Queue artist" });
+      k.text(row, t[2], { style: "Meta 13", color: "dim", align: "RIGHT", name: "Queue time", absolute: { x: W - 32 - 60, y: 25 }, width: 44 });
+      return row;
+    });
+    const lift = made[3];
+    k.animate(lift, "y", [{ t: REORDER.from, v: 3 * ROW, ease: ease.linear }, { t: REORDER.to, v: 0 }]);
+    k.animate(lift, "scaleX", [{ t: REORDER.from, v: 1, ease: ease.out("cubic") }, { t: (REORDER.from + REORDER.to) / 2, v: 1.04, ease: ease.inOut("cubic") }, { t: REORDER.to, v: 1 }]);
+    k.animate(lift, "scaleY", [{ t: REORDER.from, v: 1, ease: ease.out("cubic") }, { t: (REORDER.from + REORDER.to) / 2, v: 1.04, ease: ease.inOut("cubic") }, { t: REORDER.to, v: 1 }]);
+    for (let j = 0; j < 3; j++) k.animate(made[j], "y", [{ t: REORDER.from + j * 90, v: j * ROW, ease: ease.inOut("cubic") }, { t: REORDER.to - (2 - j) * 90, v: (j + 1) * ROW }]);
+    k.patch(rows, { childIds: [...k.node(rows).childIds.filter((x) => x !== lift), lift] });
+    k.patch(lift, { effects: [shadow(k, "text", 24, 10, 0.25)] });
+    k.timelineControl(lift, "ON_DRAG", { op: "SCRUB", axis: "Y", distance: -3 * ROW, span: [REORDER.from, REORDER.to], release: "SNAP", glide: 300 });
+    k.cues(id, [
+      { layer: "Queue title", preset: "rise-in", at: 150 },
+      { layer: "Queue now", preset: "rise-in", at: 250 },
+      { layer: "Queue label", preset: "fade-in", at: 350 },
+      { layer: "Queue hint", preset: "fade-in", at: 400 },
+      { layer: "Queue list", preset: "rise-in", at: 400, params: { distance: 60 } }
+    ]);
+  }
+  {
+    const id = s.search;
+    k.timeline(id, { duration: FOLD.to, fps: 30, markers: [{ id: "fold-open", t: FOLD.from, kind: "pause", label: "Open" }, { id: "fold-closed", t: FOLD.to, label: "Folded" }] });
+    world(k, id, theme, { at: centreOf(theme), zoom: theme.world.zoom.search, box: full, opacity: 0.35 });
+    scrim(k, id, 0, H, 0.7);
+    statusBar(k, id);
+    const title = k.text(id, "Search", { style: "Display 34", color: "text", name: "Search title", absolute: { x: 24, y: 58 }, width: 300 });
+    const field = k.frame(id, { x: 24, y: 112, width: 354, height: 48 }, { name: "Search field", fill: "raised", radius: 14 });
+    magnifier(k, field, { x: 14, y: 14 }, "dim");
+    k.text(field, theme.copy.searchHint, { style: "Body 16", color: "dim", name: "Search hint", absolute: { x: 46, y: 12 }, width: 290 });
+    const browse = k.stack(id, { gap: 14, padding: { top: 8, right: 24, bottom: 24, left: 24 }, width: W, height: 530, clip: true, name: "Browse", absolute: { x: 0, y: 176 } });
+    k.patch(browse, { overflowScrolling: "VERTICAL" });
+    k.text(browse, "Worlds", { style: "Label 12", color: "onPaper", name: "Browse label" });
+    const grid = k.stack(browse, { direction: "HORIZONTAL", wrap: true, gap: 14, name: "Tiles" });
+    theme.zones.forEach((z, i) => {
+      const tile = k.stack(grid, { width: 170, height: 104, radius: theme.radius, fill: `zone${i + 1}`, padding: 14, gap: 2, justify: "MAX", clip: true, name: `Tile ${i + 1}` });
+      k.text(tile, z.name, { style: "Row 16", color: `onZone${i + 1}`, name: "Tile name" });
+      k.text(tile, `${z.tracks.length} tracks`, { style: "Meta 13", color: `onZone${i + 1}`, name: "Tile count" });
+      k.share(tile, `zone-${i + 1}`);
+      k.link(tile, s.zones[i], "SMART_ANIMATE", { duration: 1100, easing: "EASE_IN_OUT", stagger: 40 });
+    });
+    k.text(browse, "Recently played", { style: "Label 12", color: "onPaper", name: "Recent label" });
+    const recent = k.stack(browse, { gap: 8, name: "Recent" });
+    const recents = [...theme.queue, ...theme.albumTracks].slice(0, 6);
+    recents.forEach((t, j) => {
+      const row = k.stack(recent, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: 8, radius: 14, fill: "surface", name: "Recent row" });
+      k.picture(row, extraArt[(j + 1) % extraArt.length], 40, 40, { radius: 8, name: "Recent art" });
+      const w = k.stack(row, { gap: 0, width: 260, name: "Recent words" });
+      k.text(w, t[0], { style: "Row 16", color: "onSurface", name: "Recent song" });
+      k.text(w, t[1], { style: "Meta 13", color: "dim", name: "Recent artist" });
+      k.link(row, s.now, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    });
+    k.animate(title, "opacity", [{ t: FOLD.from, v: 1, ease: ease.linear }, { t: FOLD.from + 300, v: 0 }]);
+    k.patch(title, { anchorX: 0, anchorY: 0 });
+    k.animate(title, "scaleX", [{ t: FOLD.from, v: 1, ease: ease.linear }, { t: FOLD.to, v: 0.7 }]);
+    k.animate(title, "scaleY", [{ t: FOLD.from, v: 1, ease: ease.linear }, { t: FOLD.to, v: 0.7 }]);
+    k.animate(field, "y", [{ t: FOLD.from, v: 112, ease: ease.linear }, { t: FOLD.to, v: 62 }]);
+    k.animate(browse, "y", [{ t: FOLD.from, v: 176, ease: ease.linear }, { t: FOLD.to, v: 126 }]);
+    k.animate(browse, "height", [{ t: FOLD.from, v: 530, ease: ease.linear }, { t: FOLD.to, v: 580 }]);
+    k.timelineControl(browse, "ON_SCROLL", { op: "SCRUB", axis: "Y", distance: FOLD.distance, span: [FOLD.from, FOLD.to] });
+    miniPlayer(k, id, theme, MINI_TABS, s.now);
+    tabBar(k, id, theme, 1, s);
+    k.cues(id, [
+      { layer: "Search field", preset: "fade-in", at: 100 },
+      { layer: "Tiles", preset: "rise-in", at: 250, params: { distance: 40 } },
+      { layer: "Recent row", preset: "rise-in", at: 400, stagger: { delay: 60 } }
+    ]);
+  }
+  {
+    const id = s.library;
+    k.timeline(id, { duration: 1400, fps: 30 });
+    world(k, id, theme, onZone(theme, 3, theme.world.zoom.library, full, { opacity: 0.3 }));
+    scrim(k, id, 0, H, 0.7);
+    statusBar(k, id);
+    k.text(id, "Library", { style: "Display 34", color: "text", name: "Library title", absolute: { x: 24, y: 58 }, width: 280 });
+    const avatar = k.photo(id, 40, 40, { radius: 20, ground: "raised", name: "Avatar", absolute: { x: W - 64, y: 62 } });
+    k.patch(k.node(avatar).childIds[1], { fills: [{ type: "IMAGE", imageUrl: portraitArt(theme.art, 9, theme.palettes.extra[1] ?? theme.palettes.portrait), scaleMode: "FILL", opacity: 1, visible: true }] });
+    shelf(k, theme, s, extraArt, portrait, zoneArt);
+    k.instance(id, "Shelf", {}, { name: "Shelf", absolute: { x: 24, y: 116 } });
+    miniPlayer(k, id, theme, MINI_TABS, s.now);
+    tabBar(k, id, theme, 2, s);
+    k.cues(id, [{ layer: "Library title", preset: "rise-in", at: 100 }, { layer: "Shelf", preset: "rise-in", at: 250, params: { distance: 40 } }]);
+  }
+  {
+    const id = s.artist;
+    k.timeline(id, { duration: 1600, fps: 30 });
+    world(k, id, theme, onZone(theme, 2, theme.world.zoom.artist, full, { opacity: 0.35 }));
+    const hero = k.photo(id, W, 360, { radius: 0, ground: "raised", name: "Artist photo", absolute: { x: 0, y: 0 } });
+    k.patch(k.node(hero).childIds[1], { fills: [{ type: "IMAGE", imageUrl: portrait, scaleMode: "FILL", opacity: 1, visible: true }] });
+    k.rect(id, W, 160, [k.gradient({ from: "paper", to: "paper", fromOpacity: 0, toOpacity: 1, angle: 90 })], { name: "Photo fade", absolute: { x: 0, y: 200 } });
+    scrim(k, id, 360, H - 360, 0.82);
+    statusBar(k, id);
+    backButton(k, id, theme);
+    const head = k.stack(id, { gap: 4, width: 354, name: "Artist head", absolute: { x: 24, y: 296 } });
+    k.text(head, "{{brand.artist}}", { style: "Display 34", color: "text", name: "Artist name" });
+    k.text(head, `${theme.artistListeners} monthly listeners`, { style: "Meta 13", color: "onPaper", name: "Artist listeners" });
+    const row = k.stack(id, { direction: "HORIZONTAL", gap: 10, align: "CENTER", width: 354, name: "Artist actions", absolute: { x: 24, y: 382 } });
+    k.instance(row, "Follow", {}, { name: "Follow" });
+    const shuffle = k.instance(row, "Button", { Label: "Shuffle play" }, { name: "Shuffle play" });
+    k.link(shuffle, s.now, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    k.text(id, theme.artistBio, { style: "Body 16", color: "onPaper", name: "Artist bio", absolute: { x: 24, y: 446 }, width: 354 });
+    const panel = k.frame(id, { x: 16, y: 552, width: W - 32, height: 290 }, { name: "Artist panel", fill: "surface", radius: theme.radius });
+    k.text(panel, "Popular", { style: "Label 12", color: "dim", name: "Popular label", absolute: { x: 16, y: 16 }, width: 200 });
+    const list = k.stack(panel, { width: 338, name: "Popular tracks", absolute: { x: 16, y: 38 } });
+    theme.albumTracks.slice(0, 4).forEach((t, j) => {
+      const r = k.instance(list, "Track row", { Index: String(j + 1), Title: t[0], Artist: t[1], Time: t[2] }, { name: "Popular track", width: "FILL" });
+      k.link(r, s.now, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+    });
+    k.link(id, null, "SMART_ANIMATE", { trigger: "ON_DRAG", direction: "RIGHT", navigation: "BACK", duration: 800 });
+    k.cues(id, [
+      { layer: "Artist photo", preset: "scale-in", at: 0, params: { duration: 900, amount: 1.15 } },
+      { layer: "Artist head", preset: "rise-in", at: 250 },
+      { layer: "Artist actions", preset: "rise-in", at: 380 },
+      { layer: "Artist bio", preset: "fade-in", at: 480 },
+      { layer: "Artist panel", preset: "rise-in", at: 520, params: { distance: 60 } }
+    ]);
+  }
+  const order = [s.introA, s.introB, s.home, s.album, s.now, s.queue, ...s.zones, s.search, s.library, s.artist];
+  order.forEach((id, i) => k.patch(id, { x: i % 5 * (W + 120), y: Math.floor(i / 5) * (H + 160) }));
+  k.setCover(s.home);
+  const doc = k.finish();
+  return { doc: { ...doc, settings: { ...doc.settings, showAdvance: { on: "click" } } }, screens: s };
+}
+var centreOf = (theme) => {
+  const z = theme.world.zones;
+  return { x: z.reduce((a, p) => a + p.x, 0) / z.length, y: z.reduce((a, p) => a + p.y, 0) / z.length };
+};
+var zoneGap = (theme) => {
+  const z = theme.world.zones;
+  return Math.hypot(z[z.length - 1].x - z[0].x, z[z.length - 1].y - z[0].y) / (z.length - 1);
+};
+function backdrop(k, id, theme) {
+  const p = shaderPreset(theme.backdrop.shader);
+  if (!p) throw new Error(`no shader preset "${theme.backdrop.shader}"`);
+  const fill = presetPaint({ id: "f1", type: "SHADER", visible: true, opacity: 1 }, p, theme.backdrop.params);
+  k.rect(id, W, H, [fill], { name: "Backdrop", absolute: { x: 0, y: 0 }, opacity: theme.backdrop.opacity });
+}
+function statusBar(k, parent) {
+  const bar = k.stack(parent, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", width: W, padding: { top: 14, right: 28, bottom: 8, left: 34 }, name: "Status bar", absolute: { x: 0, y: 0 } });
+  k.text(bar, "9:41", { style: "Status 15", color: "text", autoWidth: true, name: "Time" });
+  const right = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", name: "Indicators" });
+  const bars = k.stack(right, { direction: "HORIZONTAL", width: "HUG", gap: 2, align: "MAX", name: "Signal" });
+  for (const h of [4, 6, 8, 10]) k.rect(bars, 3, h, "text", { radius: 1, name: "Bar" });
+  const bat = k.stack(right, { direction: "HORIZONTAL", width: 24, height: 12, radius: 3, padding: 2, stroke: { color: "text", width: 1 }, name: "Battery" });
+  k.rect(bat, 16, 8, "text", { radius: 1.5, name: "Charge" });
+}
+function scrim(k, parent, y, height, opacity) {
+  k.rect(parent, W + 80, height + (y > 0 ? 40 : 0), "paper", { name: "Scrim", absolute: { x: -40, y: y > 0 ? y - 40 : y }, opacity, effects: [blurFx(36)] });
+}
+function stepDots(k, parent, at) {
+  const f = k.frame(parent, { x: W / 2 - 17, y: 750, width: 34, height: 6 }, { name: "Steps" });
+  k.rect(f, at === 0 ? 20 : 6, 6, at === 0 ? "primary" : "line", { radius: 3, name: "Step 1", absolute: { x: 0, y: 0 } });
+  k.rect(f, at === 1 ? 20 : 6, 6, at === 1 ? "primary" : "line", { radius: 3, name: "Step 2", absolute: { x: at === 0 ? 28 : 14, y: 0 } });
+}
+function appMark(k, mark) {
+  k.ellipse(mark, 30, [], { name: "Mark ring", stroke: { color: "onPrimary", width: 3 }, absolute: { x: 13, y: 13 } });
+  k.ellipse(mark, 10, "onPrimary", { name: "Mark dot", absolute: { x: 23, y: 23 } });
+}
+function backButton(k, parent, _theme) {
+  const b = k.frame(parent, { x: 20, y: 60, width: 40, height: 40 }, { name: "Back", fill: "raised", radius: 20 });
+  chevron(k, b, "left", "onSurface");
+  k.link(b, null, "SMART_ANIMATE", { navigation: "BACK", duration: 1e3, easing: "EASE_IN_OUT", stagger: 40 });
+  return b;
+}
+function chevron(k, parent, dir, color) {
+  const pts = dir === "left" ? [{ x: 10, y: 2 }, { x: 3, y: 9 }, { x: 10, y: 16 }] : dir === "right" ? [{ x: 4, y: 2 }, { x: 11, y: 9 }, { x: 4, y: 16 }] : [{ x: 2, y: 5 }, { x: 9, y: 12 }, { x: 16, y: 5 }];
+  const box = dir === "down" ? { w: 18, h: 16 } : { w: 14, h: 18 };
+  k.vector(parent, box.w, box.h, [{ closed: false, points: pts }], color, { name: "Chevron", strokeWidth: 2.5, absolute: { x: 20 - box.w / 2, y: 20 - box.h / 2 } });
+}
+function skipGlyph(k, parent, dir) {
+  const tri = dir > 0 ? [{ x: 0, y: 0 }, { x: 16, y: 10 }, { x: 0, y: 20 }] : [{ x: 16, y: 0 }, { x: 0, y: 10 }, { x: 16, y: 20 }];
+  k.vector(parent, 16, 20, [{ closed: true, points: tri }], "text", { name: "Skip arrow", absolute: { x: dir > 0 ? 13 : 19, y: 14 } });
+  k.rect(parent, 3, 20, "text", { radius: 1.5, name: "Skip bar", absolute: { x: dir > 0 ? 31 : 14, y: 14 } });
+}
+function speaker(k, parent, x, color, loud) {
+  k.rect(parent, 6, 8, color, { radius: 1, name: "Speaker", absolute: { x, y: 10 } });
+  k.vector(parent, 8, 16, [{ closed: true, points: [{ x: 0, y: 5 }, { x: 8, y: 0 }, { x: 8, y: 16 }, { x: 0, y: 11 }] }], color, { name: "Cone", absolute: { x: x + 4, y: 6 } });
+  if (loud) k.vector(parent, 6, 14, [{ closed: false, points: [{ x: 1, y: 1 }, { x: 5, y: 7 }, { x: 1, y: 13 }] }], color, { name: "Wave", strokeWidth: 2, absolute: { x: x + 14, y: 7 } });
+}
+function magnifier(k, parent, at, color) {
+  k.ellipse(parent, 15, [], { name: "Lens", stroke: { color, width: 2.5 }, absolute: at });
+  const handle = k.rect(parent, 7, 2.5, color, { radius: 1.25, name: "Handle", absolute: { x: at.x + 12, y: at.y + 15 } });
+  k.patch(handle, { rotation: -45 });
+}
+function grip(k, parent, at) {
+  for (let i = 0; i < 3; i++) k.rect(parent, 16, 2.5, "dim", { radius: 1.25, name: "Grip line", absolute: { x: at.x, y: at.y + i * 6 } });
+}
+function equalizer(k, parent, at, color) {
+  const eq = k.frame(parent, { ...at, width: 20, height: 18 }, { name: "Equalizer" });
+  [0.9, 0.55, 0.75].forEach((h, i) => {
+    const b = k.rect(eq, 4, 18, color, { radius: 2, name: "EQ bar", absolute: { x: i * 7, y: 0 } });
+    k.patch(b, { anchorX: 0.5, anchorY: 1, scaleY: h });
+    k.behave(b, "scaleY", [{ kind: "sine", amp: 0.35, freq: 1.3 + i * 0.4, phase: i * 0.3 }]);
+  });
+}
+function miniPlayer(k, parent, theme, y, now) {
+  const m = k.frame(parent, { x: 12, y, width: W - 24, height: 64 }, { name: "Mini player", fill: "raised", radius: 18, effects: [shadow(k, "text", 24, 10, 0.25)] });
+  const art = k.photo(m, 44, 44, { radius: 10, ground: "raised", name: "Cover", absolute: { x: 10, y: 10 } });
+  k.patch(k.node(art).childIds[1], { fills: [{ type: "IMAGE", imageUrl: coverArt(theme.art, 1, theme.palettes.album), scaleMode: "FILL", opacity: 1, visible: true }] });
+  k.share(art, "cover");
+  const words = k.stack(m, { gap: 0, width: 230, name: "Mini words", absolute: { x: 66, y: 12 } });
+  k.text(words, "{{brand.track}}", { style: "Row 16", color: "onSurface", name: "Mini title" });
+  k.text(words, "{{brand.artist}}", { style: "Meta 13", color: "dim", name: "Mini artist" });
+  equalizer(k, m, { x: W - 24 - 46, y: 23 }, "primary");
+  k.rect(m, W - 24 - 36, 2, "line", { radius: 1, name: "Mini track", absolute: { x: 18, y: 60 } });
+  k.rect(m, Math.round((W - 60) * 0.34), 2, "primary", { radius: 1, name: "Mini progress", absolute: { x: 18, y: 60 } });
+  k.link(m, now, "SMART_ANIMATE", { duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+  k.link(m, now, "SMART_ANIMATE", { trigger: "ON_DRAG", direction: "UP", duration: 800, easing: "EASE_IN_OUT", stagger: 40 });
+  return m;
+}
+function tabBar(k, parent, theme, active, s) {
+  const bar = k.frame(parent, { x: 0, y: H - 82, width: W, height: 82 }, { name: "Tab bar", fill: "surface" });
+  k.rect(bar, W, 1, "line", { name: "Tab rule", absolute: { x: 0, y: 0 } });
+  const TAB = W / 3;
+  k.rect(bar, 36, 4, "primary", { radius: 2, name: "Tab indicator", absolute: { x: Math.round(TAB * active + TAB / 2 - 18), y: 6 } });
+  const tabs = [["Home", s.home], ["Search", s.search], ["Library", s.library]];
+  tabs.forEach(([label, to], i) => {
+    const t = k.frame(bar, { x: Math.round(TAB * i), y: 8, width: Math.round(TAB), height: 56 }, { name: `Tab ${label}` });
+    const ink = i === active ? "onSurface" : "dim";
+    const ico = k.frame(t, { x: Math.round(TAB / 2 - 12), y: 8, width: 24, height: 24 }, { name: "Tab icon" });
+    if (i === 0) {
+      k.vector(ico, 20, 9, [{ closed: true, points: [{ x: 10, y: 0 }, { x: 20, y: 9 }, { x: 0, y: 9 }] }], ink, { name: "Roof", absolute: { x: 2, y: 2 } });
+      k.rect(ico, 14, 11, ink, { radius: 2, name: "House", absolute: { x: 5, y: 11 } });
+    } else if (i === 1) magnifier(k, ico, { x: 2, y: 2 }, ink);
+    else for (let j = 0; j < 3; j++) k.rect(ico, 4, 18 - j * 2, ink, { radius: 1.5, name: "Spine", absolute: { x: 3 + j * 7, y: 3 + j * 2 } });
+    k.text(t, label, { style: "Tab 12", color: ink, align: "CENTER", width: Math.round(TAB), name: "Tab label", absolute: { x: 0, y: 36 } });
+    if (i !== active) k.link(t, to, "SMART_ANIMATE", { duration: 500, easing: "EASE_IN_OUT", stagger: 30 });
+  });
+  void theme;
+}
+function playButton(k) {
+  k.variantSet("Play button", "State", ["Playing", "Paused"], { width: 80, height: 80, radius: 40 }, (state, id) => {
+    const p = state === "Playing";
+    k.ellipse(id, p ? 96 : 80, "primary", { name: "Halo", absolute: { x: p ? -8 : 0, y: p ? -8 : 0 }, opacity: p ? 0.25 : 0 });
+    k.ellipse(id, 80, "primary", { name: "Disc", absolute: { x: 0, y: 0 } });
+    const l = k.rect(id, 7, 26, "onPrimary", { radius: 2, name: "Bar left", absolute: { x: 29, y: 27 }, opacity: p ? 1 : 0 });
+    const r = k.rect(id, 7, 26, "onPrimary", { radius: 2, name: "Bar right", absolute: { x: 44, y: 27 }, opacity: p ? 1 : 0 });
+    if (!p) {
+      k.patch(l, { rotation: -30, x: 34 });
+      k.patch(r, { rotation: 30, x: 39 });
+    }
+    const tri = k.vector(id, 26, 30, [{ closed: true, points: [{ x: 0, y: 0 }, { x: 26, y: 15 }, { x: 0, y: 30 }] }], "onPrimary", { name: "Triangle", absolute: { x: 30, y: 25 }, opacity: p ? 0 : 1 });
+    if (p) k.patch(tri, { rotation: -90, scaleX: 0.4, scaleY: 0.4 });
+  });
+  k.changeTo("Play button/Playing", "ON_CLICK", "Play button/Paused", 280, "EASE_OUT");
+  k.changeTo("Play button/Paused", "ON_CLICK", "Play button/Playing", 280, "EASE_OUT");
+}
+function likeButton(k) {
+  const SPARKS = 8;
+  k.variantSet("Like", "State", ["Off", "On"], { width: 44, height: 44 }, (state, id) => {
+    const on = state === "On";
+    const heart = k.frame(id, { x: 10, y: 11, width: 24, height: 22 }, { name: "Heart" });
+    k.patch(heart, { scaleX: on ? 1.1 : 1, scaleY: on ? 1.1 : 1 });
+    const ink = on ? "primary" : "dim";
+    k.ellipse(heart, 13, ink, { name: "Lobe left", absolute: { x: 0, y: 0 } });
+    k.ellipse(heart, 13, ink, { name: "Lobe right", absolute: { x: 11, y: 0 } });
+    const tip = k.rect(heart, 13, 13, ink, { radius: 2, name: "Tip", absolute: { x: 5.5, y: 6 } });
+    k.patch(tip, { rotation: 45 });
+    for (let i = 0; i < SPARKS; i++) {
+      const a = i / SPARKS * Math.PI * 2;
+      const sp = k.ellipse(id, 5, i % 2 ? "primary" : "glow1", { name: `Spark ${i + 1}`, absolute: { x: 19.5, y: 19.5 }, opacity: 0 });
+      if (on) {
+        const dx = Math.round(Math.cos(a) * 26), dy = Math.round(Math.sin(a) * 26);
+        k.animate(sp, "translateX", [{ t: 0, v: 0, ease: ease.out("expo") }, { t: 520, v: dx }]);
+        k.animate(sp, "translateY", [{ t: 0, v: 0, ease: ease.out("expo") }, { t: 520, v: dy }]);
+        k.animate(sp, "opacity", [{ t: 0, v: 0, ease: ease.linear }, { t: 60, v: 1, ease: ease.out("quad") }, { t: 600, v: 0 }]);
+      }
+    }
+    if (on) {
+      k.animate(heart, "scaleX", [{ t: 0, v: 0.6, ease: ease.back(2.2) }, { t: 420, v: 1.1 }]);
+      k.animate(heart, "scaleY", [{ t: 0, v: 0.6, ease: ease.back(2.2) }, { t: 420, v: 1.1 }]);
+    }
+  }, (state) => state === "On" ? { timeline: { duration: 700 } } : {});
+  k.changeTo("Like/Off", "ON_CLICK", "Like/On", 160, "EASE_OUT");
+  k.changeTo("Like/On", "ON_CLICK", "Like/Off", 200, "EASE_OUT");
+}
+function volumeSlider(k) {
+  const WIDTH = 270;
+  k.component("Volume", { width: WIDTH, height: 20, timeline: { duration: 1e3, markers: [{ id: "vol-rest", t: 650, label: "Rest" }, { id: "vol-max", t: 1e3, label: "Full" }] } }, (id) => {
+    k.rect(id, WIDTH, 4, "line", { radius: 2, name: "Volume track", absolute: { x: 0, y: 8 } });
+    const fill = k.rect(id, Math.round(WIDTH * 0.65), 4, "onPaper", { radius: 2, name: "Volume fill", absolute: { x: 0, y: 8 } });
+    const knob = k.ellipse(id, 14, "text", { name: "Volume knob", absolute: { x: Math.round(WIDTH * 0.65) - 7, y: 3 } });
+    k.animate(fill, "width", [{ t: 0, v: 1, ease: ease.linear }, { t: 1e3, v: WIDTH }]);
+    k.animate(knob, "x", [{ t: 0, v: -7, ease: ease.linear }, { t: 1e3, v: WIDTH - 7 }]);
+  });
+}
+function shelf(k, theme, s, art, portrait, zoneArt) {
+  const STATES = ["Playlists", "Artists", "Albums"];
+  const SEG = 354 / 3;
+  const ids = k.variantSet("Shelf", "Tab", STATES, { width: 354, height: 560 }, (state, id) => {
+    const at = STATES.indexOf(state);
+    const seg = k.frame(id, { x: 0, y: 0, width: 354, height: 40 }, { name: "Segments", fill: "raised", radius: 20 });
+    k.rect(seg, Math.round(SEG - 8), 32, "primary", { radius: 16, name: "Pill", absolute: { x: Math.round(SEG * at + 4), y: 4 } });
+    STATES.forEach((label, j) => k.text(seg, label, { style: "Centre 13", color: j === at ? "onPrimary" : "onSurface", width: Math.round(SEG), name: `Segment ${label}`, absolute: { x: Math.round(SEG * j), y: 11 } }));
+    const rows = state === "Playlists" ? theme.zones.map((z) => [z.name, `Playlist \xB7 ${z.tracks.length} songs`]) : state === "Artists" ? theme.library.artists : theme.library.albums;
+    const list = k.frame(id, { x: 0, y: 56, width: 354, height: 5 * 72 }, { name: "Shelf list" });
+    rows.slice(0, 5).forEach((r, j) => {
+      const row = k.frame(list, { x: 0, y: j * 72, width: 354, height: 64 }, { name: `Shelf row ${j + 1}`, fill: "surface", radius: 16 });
+      const round = state === "Artists";
+      k.picture(row, state === "Playlists" ? zoneArt[j % zoneArt.length] : round && j === 0 ? portrait : art[(j + at) % art.length], 44, 44, { radius: round ? 22 : 10, name: "Shelf art", absolute: { x: 10, y: 10 } });
+      const w = k.stack(row, { gap: 0, width: 270, name: "Shelf words", absolute: { x: 66, y: 12 } });
+      k.text(w, r[0], { style: "Row 16", color: "onSurface", name: "Shelf title" });
+      k.text(w, r[1], { style: "Meta 13", color: "dim", name: "Shelf line" });
+      const to = state === "Playlists" ? s.zones[j % s.zones.length] : state === "Artists" ? j === 0 ? s.artist : null : j === 0 ? s.album : null;
+      if (to) k.link(row, to, "SMART_ANIMATE", { duration: 1e3, easing: "EASE_IN_OUT", stagger: 40 });
+    });
+  });
+  for (const from of STATES) for (const to of STATES) {
+    if (from === to) continue;
+    const seg = k.named(ids[from], `Segment ${to}`)[0];
+    k.changeTo(`Shelf/${from}`, "ON_CLICK", `Shelf/${to}`, 360, "EASE_IN_OUT", seg);
+  }
+}
+
+export {
+  W,
+  H,
+  MAP,
+  SONG_FROM,
+  REORDER,
+  FOLD,
+  songMs,
+  buildMusicApp,
+  zoneGap
+};