@pinepaper.studio/mcp-server 1.6.27 → 1.6.29

package/dist/vendor/design/ui-kit-runtime.js

@@ -36,682 +36,682 @@
 export const UI_KIT_SYMBOLS = ["UIKit."];
 /** The sentinel the runtime defines; code that carries it already has the kit. */
 export const UI_KIT_SENTINEL = "__PP_UI_KIT__";
-export const UI_KIT_RUNTIME = String.raw `// --- PINEPAPER UI KIT (attached automatically; do not paste) -------------------
-var __PP_UI_KIT__ = true;
-var UIKit = (function () {
-  var P = (typeof PinePaper !== 'undefined' && PinePaper) ? PinePaper : (typeof app !== 'undefined' ? app : null);
-  var PJ = (typeof paper !== 'undefined' && paper) ? paper : null;
-  var DEFAULT = {
-    name: '',
-    colors: { primary: '#0a84ff', secondary: '#5e5ce6', accent: '#34c759', background: '#f2f2f7', text: '#1c1c1e' },
-    fonts: { heading: 'Geist', body: 'Geist', mono: 'Geist Mono' },
-    radius: 1
-  };
-  var brand = null;          // the kit set by UIKit.brand(), or captured from applyBrandKit
-  var kitEnd = 0;            // the last keyframe time any component asked for
-  var minDuration = 0;       // UIKit.duration(D)
-  var HOLD = 1.5;            // seconds the last state is held on screen
-
-  // ---------- colour --------------------------------------------------------
-  function isColour(c) { return typeof c === 'string' && /^(#[0-9a-f]{3,8}|rgba?\(|hsla?\()/i.test(c.trim()); }
-  function rgb(hex) {
-    var h = String(hex || '').trim().replace('#', '');
-    if (h.length === 3 || h.length === 4) h = h.charAt(0) + h.charAt(0) + h.charAt(1) + h.charAt(1) + h.charAt(2) + h.charAt(2);
-    var n = parseInt(h.slice(0, 6), 16);
-    if (!isFinite(n)) return [128, 128, 128];
-    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
-  }
-  function hex(c) {
-    function p(v) { v = Math.max(0, Math.min(255, Math.round(v))); return (v < 16 ? '0' : '') + v.toString(16); }
-    return '#' + p(c[0]) + p(c[1]) + p(c[2]);
-  }
-  function mix(a, b, t) { var x = rgb(a), y = rgb(b); return hex([x[0] + (y[0] - x[0]) * t, x[1] + (y[1] - x[1]) * t, x[2] + (y[2] - x[2]) * t]); }
-  function lum(c) {
-    var v = rgb(c).map(function (u) { u /= 255; return u <= 0.03928 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4); });
-    return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2];
-  }
-  function contrast(a, b) { var x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); }
-  /** White or near-black, whichever reads on this colour. */
-  function ink(on) { return contrast('#ffffff', on) >= contrast('#111111', on) ? '#ffffff' : '#111111'; }
-
-  // ---------- theme -----------------------------------------------------------
-  function theme() {
-    var k = brand || {};
-    var c = k.colors || {};
-    var f = k.fonts || {};
-    var primary = isColour(c.primary) ? c.primary : DEFAULT.colors.primary;
-    var secondary = isColour(c.secondary) ? c.secondary : (brand ? primary : DEFAULT.colors.secondary);
-    var accent = isColour(c.accent) ? c.accent : (brand ? secondary : DEFAULT.colors.accent);
-    var radius = k.radius;
-    if (radius === 'sharp') radius = 0.35; else if (radius === 'soft') radius = 1; else if (radius === 'round') radius = 1.35;
-    radius = (typeof radius === 'number' && isFinite(radius)) ? Math.max(0, Math.min(2, radius)) : 1;
-    return {
-      branded: !!brand,
-      name: k.name || '',
-      primary: primary, secondary: secondary, accent: accent,
-      background: isColour(c.background) ? c.background : DEFAULT.colors.background,
-      text: isColour(c.text) ? c.text : DEFAULT.colors.text,
-      heading: f.heading || DEFAULT.fonts.heading,
-      body: f.body || f.heading || DEFAULT.fonts.body,
-      mono: f.mono || DEFAULT.fonts.mono,
-      radius: radius
-    };
-  }
-
-  // ---------- canvas & timeline ----------------------------------------------
-  /**
-   * The frame the render draws. PinePaper.canvas is the Studio shell's property and a render engine may
-   * not define it (the browser engine did not: a 1080x1920 phone was sized and centred for 1280x720,
-   * #81), so the engine's own artboard and then paper's view are asked before the 1280x720 guess.
-   */
-  function canvas() {
-    var w = 0, h = 0;
-    function take(c) { if (!w && c && +c.width > 0 && +c.height > 0) { w = +c.width; h = +c.height; } }
-    try { if (P) take(P.canvas); } catch (e) {}
-    try { if (P && typeof P.getCanvasSize === 'function') take(P.getCanvasSize()); } catch (e) {}
-    try { if (P) take(P.canvasSize); } catch (e) {}
-    try { if (PJ && PJ.view) take(PJ.view.bounds); } catch (e) {}
-    return { width: w || 1280, height: h || 720 };
-  }
-  /** The canvas background, when the engine says what it is: text placed straight on the canvas reads against it. */
-  function ground() {
-    try { var b = P && (P.backgroundColor || P.background); if (isColour(b)) return b; } catch (e) {}
-    return null;
-  }
-  function note(t) { if (t > kitEnd) kitEnd = t; }
-  function play() {
-    var D = Math.max(minDuration, kitEnd > 0 ? kitEnd + HOLD : 0);
-    if (D > 0 && P && P.playKeyframeTimeline) { try { P.playKeyframeTimeline(D, false); } catch (e) {} }
-  }
-
-  // ---------- primitives --------------------------------------------------------
-  function made(list, id) { if (id !== undefined && id !== null) list.push({ id: id }); return id; }
-  function rect(list, x, y, w, h, r, fill, extra) {
-    var o = { x: x, y: y, width: Math.max(0.5, w), height: Math.max(0.5, h), radius: Math.max(0, Math.min(r, Math.min(w, h) / 2)) };
-    if (fill === null) o.fillColor = null; else o.color = fill;
-    if (extra) for (var k in extra) o[k] = extra[k];
-    var id = made(list, P.create('rectangle', o));
-    list[list.length - 1].cy = y;
-    return id;
-  }
-  function circle(list, x, y, r, fill, extra) {
-    var o = { x: x, y: y, radius: r, color: fill };
-    if (extra) for (var k in extra) o[k] = extra[k];
-    var id = made(list, P.create('circle', o));
-    list[list.length - 1].cy = y;
-    return id;
-  }
-  /** pathData authored around the origin with a bounding box centred on it, so x/y IS the centre. */
-  function path(list, x, y, d, fill, extra) {
-    var o = { x: x, y: y, pathData: d, closed: true, fillColor: fill, color: fill };
-    if (extra) for (var k in extra) o[k] = extra[k];
-    var id = made(list, P.create('path', o));
-    list[list.length - 1].cy = y;
-    return id;
-  }
-  /** Text: x is the left edge for align 'left', the right edge for 'right', the centre otherwise; y is the centre. */
-  function text(list, content, x, y, size, fill, weight, align, family, extra) {
-    var o = { x: x, y: y, content: String(content), fontSize: size, color: fill, fontFamily: family, fontWeight: String(weight || 400), justification: align || 'center' };
-    if (extra) for (var k in extra) o[k] = extra[k];
-    var id = made(list, P.create('text', o));
-    list[list.length - 1].cy = y;
-    return id;
-  }
-  var measured = {};
-  function measure(str, size, weight, family) {
-    str = String(str);
-    var key = size + '|' + weight + '|' + family + '|' + str;
-    if (measured[key] !== undefined) return measured[key];
-    return (measured[key] = measureNow(str, size, weight, family));
-  }
-  function measureNow(str, size, weight, family) {
-    if (PJ && PJ.PointText) {
-      try {
-        var t = new PJ.PointText({ content: str, fontSize: size, fontWeight: String(weight || 400), fontFamily: family });
-        var w = t.bounds.width; t.remove();
-        if (w > 0 && isFinite(w)) return w;
-      } catch (e) {}
-    }
-    return str.length * size * 0.54;
-  }
-  /** Greedy word wrap into at most maxLines lines, the last one ellipsised if it had to be cut. */
-  function wrap(str, maxWidth, size, weight, family, maxLines) {
-    var words = String(str || '').split(/\s+/).filter(Boolean), lines = [], cur = '';
-    for (var i = 0; i < words.length; i++) {
-      var trial = cur ? cur + ' ' + words[i] : words[i];
-      if (measure(trial, size, weight, family) <= maxWidth || !cur) cur = trial;
-      else { lines.push(cur); cur = words[i]; if (lines.length === maxLines) { cur = ''; lines[maxLines - 1] += ' ' + words.slice(i).join(' '); break; } }
-    }
-    if (cur) lines.push(cur);
-    if (lines.length > maxLines) lines = lines.slice(0, maxLines);
-    for (var j = 0; j < lines.length; j++) lines[j] = fit(lines[j], maxWidth, size, weight, family);
-    return lines;
-  }
-  function fit(str, maxWidth, size, weight, family) {
-    str = String(str);
-    if (measure(str, size, weight, family) <= maxWidth) return str;
-    while (str.length > 1 && measure(str + '…', size, weight, family) > maxWidth) str = str.slice(0, -1);
-    return str.replace(/\s+$/, '') + '…';
-  }
-
-  // ---------- motion ------------------------------------------------------------
-  /**
-   * One addAnimation per item, carrying every animated property in every key: a second track on the
-   * same item fights the first. keys: [{ t, opacity, dy, scale }] — dy is relative to the item's own
-   * creation y, so a whole component moves together.
-   */
-  function animate(list, keys, easing) {
-    if (!keys || !keys.length || !P || !P.addAnimation) return;
-    keys = keys.slice().sort(function (a, b) { return a.t - b.t; });
-    if (keys[0].t > 0) keys.unshift(copy(keys[0], 0));
-    // Every key carries every property that any key animates: a property missing from one key has no
-    // value to interpolate from. y is animated only when something actually moves, so a component
-    // that merely fades never has its items re-placed.
-    var moves = keys.some(function (k) { return k.dy; });
-    var props = ['opacity', 'dy', 'scale'];
-    props.forEach(function (p) {
-      var any = keys.some(function (k) { return k[p] !== undefined; });
-      if (!any) return;
-      var first; for (var a = 0; a < keys.length; a++) if (keys[a][p] !== undefined) { first = keys[a][p]; break; }
-      var cur = first;
-      keys = keys.map(function (k) { var c = copy(k, k.t); if (c[p] === undefined) c[p] = cur; else cur = c[p]; return c; });
-    });
-    if (!moves) keys = keys.map(function (k) { var c = copy(k, k.t); delete c.dy; return c; });
-    var last = keys[keys.length - 1].t;
-    for (var i = 0; i < list.length; i++) {
-      var it = list[i];
-      var frames = keys.map(function (k) {
-        var props = {};
-        if (k.opacity !== undefined) props.opacity = k.opacity * (it.alpha === undefined ? 1 : it.alpha);
-        if (k.dy !== undefined && it.cy !== undefined) props.y = it.cy + k.dy;
-        if (k.scale !== undefined) props.scale = k.scale;
-        return { time: k.t, properties: props, easing: k.easing || easing || 'easeOut' };
-      });
-      try { P.addAnimation(it.id, frames, { duration: Math.max(last, 0.01), loop: false }); } catch (e) {}
-    }
-    note(last);
-  }
-  function copy(k, t) { var o = {}; for (var p in k) o[p] = k[p]; o.t = t; return o; }
-  /** Opacity window: hidden until at, in over fade, out at until. */
-  function windowKeys(at, fade, until, rise) {
-    var keys = [];
-    at = +at || 0; fade = fade === undefined ? 0.4 : +fade; rise = +rise || 0;
-    if (at > 0 || rise) {
-      keys.push({ t: Math.max(0, at), opacity: 0, dy: rise });
-      keys.push({ t: Math.max(0, at) + fade, opacity: 1, dy: 0 });
-    }
-    if (until !== undefined && until !== null && isFinite(until)) {
-      if (!keys.length) keys.push({ t: 0, opacity: 1, dy: 0 });
-      keys.push({ t: +until, opacity: 1, dy: 0 });
-      keys.push({ t: +until + fade, opacity: 0, dy: 0 });
-    }
-    return keys;
-  }
-  function settle(list, o, rise) {
-    var keys = windowKeys(o.at, o.fade, o.until, rise);
-    if (keys.length) animate(list, keys);
-    play();
-  }
-  function ids(list) { return list.map(function (it) { return it.id; }); }
-  function glyphAlpha(list, a) { list[list.length - 1].alpha = a; }
-
-  // ---------- phone -------------------------------------------------------------
-  // Drawn in iPhone points (screen 390 x 844) and scaled: the phone is the unit every other component
-  // placed on it inherits through phone.s.
-  var FRAME_W = 414, FRAME_H = 868, BEZEL = 12, SCREEN_W = 390, SCREEN_H = 844;
-
-  function phone(o) {
-    o = o || {};
-    var th = theme(), cv = canvas();
-    var maxH = cv.height * (cv.height > cv.width ? 0.78 : 0.88);
-    var H = +o.height || Math.min(maxH, cv.width * 0.9 * FRAME_H / FRAME_W);
-    var s = H / FRAME_H, W = FRAME_W * s;
-    var cx = o.x === undefined ? cv.width / 2 : +o.x, cy = o.y === undefined ? cv.height / 2 : +o.y;
-    var dark = o.dark !== false;
-    var frameCol = isColour(o.frame) ? o.frame : '#1d1d1f';
-    var sw = SCREEN_W * s, sh = SCREEN_H * s, sl = cx - sw / 2, st = cy - sh / 2;
-    var wall = o.wallpaper;
-    var stops = Array.isArray(wall) ? wall.filter(isColour) : (isColour(wall) ? [wall] : [th.primary, mix(th.secondary, '#000000', 0.45)]);
-    if (!stops.length) stops = [th.primary, mix(th.secondary, '#000000', 0.45)];
-    var avg = stops.length > 1 ? mix(stops[0], stops[stops.length - 1], 0.5) : stops[0];
-    var onWall = isColour(o.ink) ? o.ink : ink(avg);
-    var list = [];
-
-    // body, buttons, glass
-    rect(list, cx + 6 * s, cy + 14 * s, W, FRAME_H * s, 66 * s, '#000000', { opacity: 0.28 }); glyphAlpha(list, 0.28);
-    var btn = '#2a2a2d';
-    rect(list, cx - W / 2 - 1.5 * s, st + 160 * s, 4 * s, 34 * s, 2 * s, btn);
-    rect(list, cx - W / 2 - 1.5 * s, st + 235 * s, 4 * s, 62 * s, 2 * s, btn);
-    rect(list, cx - W / 2 - 1.5 * s, st + 310 * s, 4 * s, 62 * s, 2 * s, btn);
-    rect(list, cx + W / 2 + 1.5 * s, st + 270 * s, 4 * s, 98 * s, 2 * s, btn);
-    rect(list, cx, cy, W, FRAME_H * s, 66 * s, frameCol, { strokeColor: mix(frameCol, '#ffffff', 0.22), strokeWidth: Math.max(1, 2 * s) });
-    var fill = stops.length > 1
-      ? { gradient: { stops: stops }, origin: [sl, st], destination: [sl + sw * 0.6, st + sh] }
-      : stops[0];
-    var screenId = rect(list, cx, cy, sw, sh, 54 * s, fill);
-
-    // status bar + Dynamic Island
-    var sbY = st + 29 * s;
-    if (o.island !== false) rect(list, cx, sbY, 124 * s, 36 * s, 18 * s, '#000000');
-    if (o.statusBar !== false) {
-      text(list, o.time || '9:41', sl + 66 * s, sbY, 17 * s, onWall, 600, 'center', th.body);
-      var bx = sl + sw - 92 * s;
-      for (var i = 0; i < 4; i++) rect(list, bx + i * 5.2 * s, sbY + (4 - i) * 1.4 * s, 3.2 * s, (5 + i * 2.8) * s, 1 * s, onWall);
-      // wi-fi: three nested fans, drawn as one centred path
-      var r1 = 7.6 * s, r2 = 4.9 * s, r3 = 2.2 * s;
-      var fan = function (r, r0) {
-        var a0 = -Math.PI * 0.78, a1 = -Math.PI * 0.22, pts = [];
-        for (var k = 0; k <= 8; k++) { var a = a0 + (a1 - a0) * k / 8; pts.push([Math.cos(a) * r, Math.sin(a) * r + 3.6 * s]); }
-        for (var m = 8; m >= 0; m--) { var b = a0 + (a1 - a0) * m / 8; pts.push([Math.cos(b) * r0, Math.sin(b) * r0 + 3.6 * s]); }
-        return 'M ' + pts.map(function (p) { return p[0].toFixed(2) + ' ' + p[1].toFixed(2); }).join(' L ') + ' Z';
-      };
-      path(list, sl + sw - 64 * s, sbY - 1 * s, fan(r1, r1 - 1.9 * s) + ' ' + fan(r2, r2 - 1.9 * s) + ' ' + fan(r3, 0.01), onWall);
-      rect(list, sl + sw - 37 * s, sbY, 25 * s, 12 * s, 3.6 * s, null, { strokeColor: onWall, strokeWidth: Math.max(0.8, 1.1 * s), opacity: 0.45 }); glyphAlpha(list, 0.45);
-      rect(list, sl + sw - 38.2 * s, sbY, 19.6 * s, 8 * s, 2 * s, onWall);
-      rect(list, sl + sw - 22.6 * s, sbY, 1.6 * s, 4 * s, 0.8 * s, onWall, { opacity: 0.45 }); glyphAlpha(list, 0.45);
-    }
+export const UI_KIT_RUNTIME = ("// --- PINEPAPER UI KIT (attached automatically; do not paste) -------------------\nvar __PP_UI_KIT__ = true;\nvar UIKit = (function () {\n  var P = (typeof PinePaper !== 'undefined' && PinePaper) ? PinePaper : (typeof app !== 'undefined' ? app : null);\n  var PJ = (typeof paper !== 'undefined' && paper) ? paper : null;\n  var DEFAULT = {\n    name: '',\n    colors: { primary: '#0a84ff', secondary: '#5e5ce6', accent: '#34c759', background: '#f2f2f7', text: '#1c1c1e' },\n    fonts: { heading: 'Geist', body: 'Geist', mono: 'Geist Mono' },\n    radius: 1\n  };\n  var brand = null;          // the kit set by UIKit.brand(), or captured from applyBrandKit\n  var kitEnd = 0;            // the las" +
+"t keyframe time any component asked for\n  var minDuration = 0;       // UIKit.duration(D)\n  var HOLD = 1.5;            // seconds the last state is held on screen\n\n  // ---------- colour --------------------------------------------------------\n  function isColour(c) { return typeof c === 'string' && /^(#[0-9a-f]{3,8}|rgba?\\(|hsla?\\()/i.test(c.trim()); }\n  function rgb(hex) {\n    var h = String(hex || '').trim().replace('#', '');\n    if (h.length === 3 || h.length === 4) h = h.charAt(0) + h.charAt(0) + h.charAt(1) + h.charAt(1) + h.charAt(2) + h.charAt(2);\n    var n = parseInt(h.slice(0, 6), 16);\n    if (!isFinite(n)) return [128, 128, 128];\n    return [(n >> 16) & 255, (n >> 8" +
+") & 255, n & 255];\n  }\n  function hex(c) {\n    function p(v) { v = Math.max(0, Math.min(255, Math.round(v))); return (v < 16 ? '0' : '') + v.toString(16); }\n    return '#' + p(c[0]) + p(c[1]) + p(c[2]);\n  }\n  function mix(a, b, t) { var x = rgb(a), y = rgb(b); return hex([x[0] + (y[0] - x[0]) * t, x[1] + (y[1] - x[1]) * t, x[2] + (y[2] - x[2]) * t]); }\n  function lum(c) {\n    var v = rgb(c).map(function (u) { u /= 255; return u <= 0.03928 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4); });\n    return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2];\n  }\n  function contrast(a, b) { var x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); }\n  /** White" +
+" or near-black, whichever reads on this colour. */\n  function ink(on) { return contrast('#ffffff', on) >= contrast('#111111', on) ? '#ffffff' : '#111111'; }\n\n  // ---------- theme -----------------------------------------------------------\n  function theme() {\n    var k = brand || {};\n    var c = k.colors || {};\n    var f = k.fonts || {};\n    var primary = isColour(c.primary) ? c.primary : DEFAULT.colors.primary;\n    var secondary = isColour(c.secondary) ? c.secondary : (brand ? primary : DEFAULT.colors.secondary);\n    var accent = isColour(c.accent) ? c.accent : (brand ? secondary : DEFAULT.colors.accent);\n    var radius = k.radius;\n    if (radius === 'sharp') radius = 0.35; e" +
+"lse if (radius === 'soft') radius = 1; else if (radius === 'round') radius = 1.35;\n    radius = (typeof radius === 'number' && isFinite(radius)) ? Math.max(0, Math.min(2, radius)) : 1;\n    return {\n      branded: !!brand,\n      name: k.name || '',\n      primary: primary, secondary: secondary, accent: accent,\n      background: isColour(c.background) ? c.background : DEFAULT.colors.background,\n      text: isColour(c.text) ? c.text : DEFAULT.colors.text,\n      heading: f.heading || DEFAULT.fonts.heading,\n      body: f.body || f.heading || DEFAULT.fonts.body,\n      mono: f.mono || DEFAULT.fonts.mono,\n      radius: radius\n    };\n  }\n\n  // ---------- canvas & timeline ------------" +
+"----------------------------------\n  /**\n   * The frame the render draws. PinePaper.canvas is the Studio shell's property and a render engine may\n   * not define it (the browser engine did not: a 1080x1920 phone was sized and centred for 1280x720,\n   * #81), so the engine's own artboard and then paper's view are asked before the 1280x720 guess.\n   */\n  function canvas() {\n    var w = 0, h = 0;\n    function take(c) { if (!w && c && +c.width > 0 && +c.height > 0) { w = +c.width; h = +c.height; } }\n    try { if (P) take(P.canvas); } catch (e) {}\n    try { if (P && typeof P.getCanvasSize === 'function') take(P.getCanvasSize()); } catch (e) {}\n    try { if (P) take(P.canvasSize); } c" +
+"atch (e) {}\n    try { if (PJ && PJ.view) take(PJ.view.bounds); } catch (e) {}\n    return { width: w || 1280, height: h || 720 };\n  }\n  /** The canvas background, when the engine says what it is: text placed straight on the canvas reads against it. */\n  function ground() {\n    try { var b = P && (P.backgroundColor || P.background); if (isColour(b)) return b; } catch (e) {}\n    return null;\n  }\n  function note(t) { if (t > kitEnd) kitEnd = t; }\n  function play() {\n    var D = Math.max(minDuration, kitEnd > 0 ? kitEnd + HOLD : 0);\n    if (D > 0 && P && P.playKeyframeTimeline) { try { P.playKeyframeTimeline(D, false); } catch (e) {} }\n  }\n\n  // ---------- primitives ------------" +
+"--------------------------------------------\n  function made(list, id) { if (id !== undefined && id !== null) list.push({ id: id }); return id; }\n  function rect(list, x, y, w, h, r, fill, extra) {\n    var o = { x: x, y: y, width: Math.max(0.5, w), height: Math.max(0.5, h), radius: Math.max(0, Math.min(r, Math.min(w, h) / 2)) };\n    if (fill === null) o.fillColor = null; else o.color = fill;\n    if (extra) for (var k in extra) o[k] = extra[k];\n    var id = made(list, P.create('rectangle', o));\n    list[list.length - 1].cy = y;\n    return id;\n  }\n  function circle(list, x, y, r, fill, extra) {\n    var o = { x: x, y: y, radius: r, color: fill };\n    if (extra) for (var k in extra" +
+") o[k] = extra[k];\n    var id = made(list, P.create('circle', o));\n    list[list.length - 1].cy = y;\n    return id;\n  }\n  /** pathData authored around the origin with a bounding box centred on it, so x/y IS the centre. */\n  function path(list, x, y, d, fill, extra) {\n    var o = { x: x, y: y, pathData: d, closed: true, fillColor: fill, color: fill };\n    if (extra) for (var k in extra) o[k] = extra[k];\n    var id = made(list, P.create('path', o));\n    list[list.length - 1].cy = y;\n    return id;\n  }\n  /** Text: x is the left edge for align 'left', the right edge for 'right', the centre otherwise; y is the centre. */\n  function text(list, content, x, y, size, fill, weight, ali" +
+"gn, family, extra) {\n    var o = { x: x, y: y, content: String(content), fontSize: size, color: fill, fontFamily: family, fontWeight: String(weight || 400), justification: align || 'center' };\n    if (extra) for (var k in extra) o[k] = extra[k];\n    var id = made(list, P.create('text', o));\n    list[list.length - 1].cy = y;\n    return id;\n  }\n  var measured = {};\n  function measure(str, size, weight, family) {\n    str = String(str);\n    var key = size + '|' + weight + '|' + family + '|' + str;\n    if (measured[key] !== undefined) return measured[key];\n    return (measured[key] = measureNow(str, size, weight, family));\n  }\n  function measureNow(str, size, weight, family) {\n  " +
+"  if (PJ && PJ.PointText) {\n      try {\n        var t = new PJ.PointText({ content: str, fontSize: size, fontWeight: String(weight || 400), fontFamily: family });\n        var w = t.bounds.width; t.remove();\n        if (w > 0 && isFinite(w)) return w;\n      } catch (e) {}\n    }\n    return str.length * size * 0.54;\n  }\n  /** Greedy word wrap into at most maxLines lines, the last one ellipsised if it had to be cut. */\n  function wrap(str, maxWidth, size, weight, family, maxLines) {\n    var words = String(str || '').split(/\\s+/).filter(Boolean), lines = [], cur = '';\n    for (var i = 0; i < words.length; i++) {\n      var trial = cur ? cur + ' ' + words[i] : words[i];\n      if (m" +
+"easure(trial, size, weight, family) <= maxWidth || !cur) cur = trial;\n      else { lines.push(cur); cur = words[i]; if (lines.length === maxLines) { cur = ''; lines[maxLines - 1] += ' ' + words.slice(i).join(' '); break; } }\n    }\n    if (cur) lines.push(cur);\n    if (lines.length > maxLines) lines = lines.slice(0, maxLines);\n    for (var j = 0; j < lines.length; j++) lines[j] = fit(lines[j], maxWidth, size, weight, family);\n    return lines;\n  }\n  function fit(str, maxWidth, size, weight, family) {\n    str = String(str);\n    if (measure(str, size, weight, family) <= maxWidth) return str;\n    while (str.length > 1 && measure(str + '…', size, weight, family) > maxWidth) str = str" +
+".slice(0, -1);\n    return str.replace(/\\s+$/, '') + '…';\n  }\n\n  // ---------- motion ------------------------------------------------------------\n  /**\n   * One addAnimation per item, carrying every animated property in every key: a second track on the\n   * same item fights the first. keys: [{ t, opacity, dy, scale }] — dy is relative to the item's own\n   * creation y, so a whole component moves together.\n   */\n  function animate(list, keys, easing) {\n    if (!keys || !keys.length || !P || !P.addAnimation) return;\n    keys = keys.slice().sort(function (a, b) { return a.t - b.t; });\n    if (keys[0].t > 0) keys.unshift(copy(keys[0], 0));\n    // Every key carries every property" +
+" that any key animates: a property missing from one key has no\n    // value to interpolate from. y is animated only when something actually moves, so a component\n    // that merely fades never has its items re-placed.\n    var moves = keys.some(function (k) { return k.dy; });\n    var props = ['opacity', 'dy', 'scale'];\n    props.forEach(function (p) {\n      var any = keys.some(function (k) { return k[p] !== undefined; });\n      if (!any) return;\n      var first; for (var a = 0; a < keys.length; a++) if (keys[a][p] !== undefined) { first = keys[a][p]; break; }\n      var cur = first;\n      keys = keys.map(function (k) { var c = copy(k, k.t); if (c[p] === undefined) c[p] = cur; else " +
+"cur = c[p]; return c; });\n    });\n    if (!moves) keys = keys.map(function (k) { var c = copy(k, k.t); delete c.dy; return c; });\n    var last = keys[keys.length - 1].t;\n    for (var i = 0; i < list.length; i++) {\n      var it = list[i];\n      var frames = keys.map(function (k) {\n        var props = {};\n        if (k.opacity !== undefined) props.opacity = k.opacity * (it.alpha === undefined ? 1 : it.alpha);\n        if (k.dy !== undefined && it.cy !== undefined) props.y = it.cy + k.dy;\n        if (k.scale !== undefined) props.scale = k.scale;\n        return { time: k.t, properties: props, easing: k.easing || easing || 'easeOut' };\n      });\n      try { P.addAnimation(it.id, fra" +
+"mes, { duration: Math.max(last, 0.01), loop: false }); } catch (e) {}\n    }\n    note(last);\n  }\n  function copy(k, t) { var o = {}; for (var p in k) o[p] = k[p]; o.t = t; return o; }\n  /** Opacity window: hidden until at, in over fade, out at until. */\n  function windowKeys(at, fade, until, rise) {\n    var keys = [];\n    at = +at || 0; fade = fade === undefined ? 0.4 : +fade; rise = +rise || 0;\n    if (at > 0 || rise) {\n      keys.push({ t: Math.max(0, at), opacity: 0, dy: rise });\n      keys.push({ t: Math.max(0, at) + fade, opacity: 1, dy: 0 });\n    }\n    if (until !== undefined && until !== null && isFinite(until)) {\n      if (!keys.length) keys.push({ t: 0, opacity: 1, dy" +
+": 0 });\n      keys.push({ t: +until, opacity: 1, dy: 0 });\n      keys.push({ t: +until + fade, opacity: 0, dy: 0 });\n    }\n    return keys;\n  }\n  function settle(list, o, rise) {\n    var keys = windowKeys(o.at, o.fade, o.until, rise);\n    if (keys.length) animate(list, keys);\n    play();\n  }\n  function ids(list) { return list.map(function (it) { return it.id; }); }\n  function glyphAlpha(list, a) { list[list.length - 1].alpha = a; }\n\n  // ---------- phone -------------------------------------------------------------\n  // Drawn in iPhone points (screen 390 x 844) and scaled: the phone is the unit every other component\n  // placed on it inherits through phone.s.\n  var FRAME_W" +
+" = 414, FRAME_H = 868, BEZEL = 12, SCREEN_W = 390, SCREEN_H = 844;\n\n  function phone(o) {\n    o = o || {};\n    var th = theme(), cv = canvas();\n    var maxH = cv.height * (cv.height > cv.width ? 0.78 : 0.88);\n    var H = +o.height || Math.min(maxH, cv.width * 0.9 * FRAME_H / FRAME_W);\n    var s = H / FRAME_H, W = FRAME_W * s;\n    var cx = o.x === undefined ? cv.width / 2 : +o.x, cy = o.y === undefined ? cv.height / 2 : +o.y;\n    var dark = o.dark !== false;\n    var frameCol = isColour(o.frame) ? o.frame : '#1d1d1f';\n    var sw = SCREEN_W * s, sh = SCREEN_H * s, sl = cx - sw / 2, st = cy - sh / 2;\n    var wall = o.wallpaper;\n    var stops = Array.isArray(wall) ? wall.filter(isC" +
+"olour) : (isColour(wall) ? [wall] : [th.primary, mix(th.secondary, '#000000', 0.45)]);\n    if (!stops.length) stops = [th.primary, mix(th.secondary, '#000000', 0.45)];\n    var avg = stops.length > 1 ? mix(stops[0], stops[stops.length - 1], 0.5) : stops[0];\n    var onWall = isColour(o.ink) ? o.ink : ink(avg);\n    var list = [];\n\n    // body, buttons, glass\n    rect(list, cx + 6 * s, cy + 14 * s, W, FRAME_H * s, 66 * s, '#000000', { opacity: 0.28 }); glyphAlpha(list, 0.28);\n    var btn = '#2a2a2d';\n    rect(list, cx - W / 2 - 1.5 * s, st + 160 * s, 4 * s, 34 * s, 2 * s, btn);\n    rect(list, cx - W / 2 - 1.5 * s, st + 235 * s, 4 * s, 62 * s, 2 * s, btn);\n    rect(list, cx - W / 2 -" +
+" 1.5 * s, st + 310 * s, 4 * s, 62 * s, 2 * s, btn);\n    rect(list, cx + W / 2 + 1.5 * s, st + 270 * s, 4 * s, 98 * s, 2 * s, btn);\n    rect(list, cx, cy, W, FRAME_H * s, 66 * s, frameCol, { strokeColor: mix(frameCol, '#ffffff', 0.22), strokeWidth: Math.max(1, 2 * s) });\n    var fill = stops.length > 1\n      ? { gradient: { stops: stops }, origin: [sl, st], destination: [sl + sw * 0.6, st + sh] }\n      : stops[0];\n    var screenId = rect(list, cx, cy, sw, sh, 54 * s, fill);\n\n    // status bar + Dynamic Island\n    var sbY = st + 29 * s;\n    if (o.island !== false) rect(list, cx, sbY, 124 * s, 36 * s, 18 * s, '#000000');\n    if (o.statusBar !== false) {\n      text(list, o.time || " +
+"'9:41', sl + 66 * s, sbY, 17 * s, onWall, 600, 'center', th.body);\n      var bx = sl + sw - 92 * s;\n      for (var i = 0; i < 4; i++) rect(list, bx + i * 5.2 * s, sbY + (4 - i) * 1.4 * s, 3.2 * s, (5 + i * 2.8) * s, 1 * s, onWall);\n      // wi-fi: three nested fans, drawn as one centred path\n      var r1 = 7.6 * s, r2 = 4.9 * s, r3 = 2.2 * s;\n      var fan = function (r, r0) {\n        var a0 = -Math.PI * 0.78, a1 = -Math.PI * 0.22, pts = [];\n        for (var k = 0; k <= 8; k++) { var a = a0 + (a1 - a0) * k / 8; pts.push([Math.cos(a) * r, Math.sin(a) * r + 3.6 * s]); }\n        for (var m = 8; m >= 0; m--) { var b = a0 + (a1 - a0) * m / 8; pts.push([Math.cos(b) * r0, Math.sin(b) * r0" +
+" + 3.6 * s]); }\n        return 'M ' + pts.map(function (p) { return p[0].toFixed(2) + ' ' + p[1].toFixed(2); }).join(' L ') + ' Z';\n      };\n      path(list, sl + sw - 64 * s, sbY - 1 * s, fan(r1, r1 - 1.9 * s) + ' ' + fan(r2, r2 - 1.9 * s) + ' ' + fan(r3, 0.01), onWall);\n      rect(list, sl + sw - 37 * s, sbY, 25 * s, 12 * s, 3.6 * s, null, { strokeColor: onWall, strokeWidth: Math.max(0.8, 1.1 * s), opacity: 0.45 }); glyphAlpha(list, 0.45);\n      rect(list, sl + sw - 38.2 * s, sbY, 19.6 * s, 8 * s, 2 * s, onWall);\n      rect(list, sl + sw - 22.6 * s, sbY, 1.6 * s, 4 * s, 0.8 * s, onWall, { opacity: 0.45 }); glyphAlpha(list, 0.45);\n    }\n\n    // lock screen\n    var lock = o.lockS" +
+"creen !== false;\n    if (lock) {\n      text(list, o.date || 'Tuesday, June 9', cx, st + 118 * s, 21 * s, onWall, 600, 'center', th.body, { opacity: 0.88 }); glyphAlpha(list, 0.88);\n      text(list, o.clock || o.time || '9:41', cx, st + 196 * s, 98 * s, onWall, 700, 'center', th.heading);\n      var gl = onWall === '#ffffff' ? '#ffffff' : '#000000';\n      circle(list, sl + 66 * s, st + sh - 92 * s, 25 * s, gl, { opacity: 0.18 }); glyphAlpha(list, 0.18);\n      circle(list, sl + sw - 66 * s, st + sh - 92 * s, 25 * s, gl, { opacity: 0.18 }); glyphAlpha(list, 0.18);\n      // torch and camera glyphs, centred on the origin\n      path(list, sl + 66 * s, st + sh - 92 * s, 'M ' + (-4 * s) + '" +
+" ' + (-10 * s) + ' L ' + (4 * s) + ' ' + (-10 * s) + ' L ' + (4 * s) + ' ' + (-4 * s) + ' L ' + (2 * s) + ' ' + (0) + ' L ' + (2 * s) + ' ' + (10 * s) + ' L ' + (-2 * s) + ' ' + (10 * s) + ' L ' + (-2 * s) + ' ' + (0) + ' L ' + (-4 * s) + ' ' + (-4 * s) + ' Z', onWall);\n      rect(list, sl + sw - 66 * s, st + sh - 92 * s, 22 * s, 16 * s, 4 * s, onWall);\n      circle(list, sl + sw - 66 * s, st + sh - 92 * s, 4.6 * s, gl === '#ffffff' ? mix(avg, '#000000', 0.2) : '#ffffff');\n    }\n    if (o.homeIndicator !== false) rect(list, cx, st + sh - 9 * s, 136 * s, 5 * s, 2.5 * s, onWall);\n\n    settle(list, o);\n    var ph = {\n      kind: 'phone', s: s, x: cx, y: cy, width: W, height: FRAME_H *" +
+" s, ink: onWall, dark: dark,\n      screen: { x: cx, y: cy, width: sw, height: sh, left: sl, top: st, right: sl + sw, bottom: st + sh, id: screenId },\n      /** Canvas position of a point given in phone-screen points (0..390, 0..844). */\n      at: function (px, py) { return { x: sl + px * s, y: st + py * s }; },\n      ids: ids(list)\n    };\n    return ph;\n  }\n\n  // ---------- notifications -------------------------------------------------------\n  function cardTheme(o, th) {\n    var dark = !!o.dark;\n    return dark\n      ? { bg: '#1c1c1e', alpha: 0.78, title: '#ffffff', body: '#ebebf5', meta: '#ebebf5', metaA: 0.6 }\n      : { bg: '#ffffff', alpha: 0.82, title: '#111111', body: '" +
+"#1c1c1e', meta: '#3c3c43', metaA: 0.6 };\n  }\n  /**\n   * Build one notification's items at slot-0 position and return them with their height. Not animated.\n   */\n  function noteItems(n, i, x, top, width, s, th, ct) {\n    var list = [];\n    var pad = 14 * s, icon = 38 * s, fsT = 15 * s, fsB = 15 * s, fsM = 13 * s;\n    var textLeft = x - width / 2 + pad + icon + 12 * s, textW = width / 2 + x - pad - textLeft;\n    var title = n.title || n.app || 'Notification';\n    var lines = wrap(n.body || '', textW, fsB, 400, th.body, n.lines || 2);\n    var h = pad * 2 + fsT * 1.25 + lines.length * fsB * 1.28;\n    h = Math.max(h, icon + pad * 2);\n    var cy = top + h / 2;\n    var colours = [th" +
+".primary, th.accent, th.secondary];\n    var ic = isColour(n.color) ? n.color : colours[i % colours.length];\n    rect(list, x, cy, width, h, 24 * s * th.radius, ct.bg, { opacity: ct.alpha }); glyphAlpha(list, ct.alpha);\n    var ix = x - width / 2 + pad + icon / 2;\n    rect(list, ix, cy, icon, icon, 9.5 * s * th.radius, ic);\n    text(list, (n.icon || String(n.app || title).charAt(0) || '•').slice(0, 2), ix, cy, 19 * s, ink(ic), 700, 'center', th.heading);\n    var metaText = n.time || 'now';\n    var metaW = measure(metaText, fsM, 400, th.body);\n    var tY = top + pad + fsT * 0.62;\n    text(list, fit(title, textW - metaW - 10 * s, fsT, 600, th.body), textLeft, tY, fsT, ct.title, 600, " +
+"'left', th.body);\n    text(list, metaText, x + width / 2 - pad, tY, fsM, ct.meta, 400, 'right', th.body, { opacity: ct.metaA }); glyphAlpha(list, ct.metaA);\n    for (var l = 0; l < lines.length; l++) text(list, lines[l], textLeft, tY + fsT * 0.66 + fsB * 0.64 + l * fsB * 1.28, fsB, ct.body, 400, 'left', th.body);\n    return { list: list, h: h };\n  }\n  /**\n   * A stack of notifications arriving one by one. Newest on top pushes the others down (iOS), or\n   * newest: 'bottom' to append below. phoneOrOpts may be a phone from UIKit.phone() — the stack then\n   * sits under the clock and inherits its scale — or plain options { x, y(top), width, scale }.\n   */\n  function notifications(ph" +
+"oneOrOpts, items, o) {\n    o = o || {};\n    // notifications(phone, items, opts) | notifications(items, opts) | notifications({ items, x, y, ... })\n    var th = theme(), ph = phoneOrOpts && phoneOrOpts.kind === 'phone' ? phoneOrOpts : null;\n    if (!ph && Array.isArray(phoneOrOpts)) { o = items || {}; items = phoneOrOpts; }\n    else if (!ph && phoneOrOpts && typeof phoneOrOpts === 'object') { o = phoneOrOpts; items = o.items; }\n    o = o || {};\n    if (!ph && o.phone && o.phone.kind === 'phone') ph = o.phone;\n    items = (items || []).map(function (n) { return typeof n === 'string' ? { title: n } : (n || {}); });\n    var cv = canvas();\n    var s = ph ? ph.s : (+o.scale || Math.mi" +
+"n(cv.width, cv.height) / 720);\n    var width = +o.width || (ph ? ph.screen.width - 24 * s : 360 * s);\n    var x = o.x !== undefined ? +o.x : (ph ? ph.screen.x : cv.width / 2);\n    var top = o.y !== undefined ? +o.y : (ph ? ph.screen.top + 300 * s : cv.height * 0.25);\n    var gap = (o.gap === undefined ? 8 : +o.gap) * s;\n    var start = o.start === undefined ? 0.6 : +o.start, stagger = o.stagger === undefined ? 0.9 : +o.stagger;\n    var newestTop = o.newest !== 'bottom';\n    var ct = cardTheme(o, th);\n    var built = [];\n    for (var i = 0; i < items.length; i++) built.push(noteItems(items[i], i, x, top, width, s, th, ct));\n    var times = items.map(function (n, k) { return n.at !" +
+"== undefined ? +n.at : start + k * stagger; });\n    var IN = 0.45, RISE = -16 * s;\n    var all = [];\n    for (var j = 0; j < built.length; j++) {\n      // y offset of card j once card k has arrived\n      var offset = function (k) {\n        if (!newestTop) { var d0 = 0; for (var m0 = 0; m0 < j; m0++) d0 += built[m0].h + gap; return d0; }\n        var d = 0; for (var m = j + 1; m <= k; m++) d += built[m].h + gap; return d;\n      };\n      var keys = [{ t: 0, opacity: 0, dy: offset(j) + RISE }, { t: times[j], opacity: 0, dy: offset(j) + RISE },\n        { t: times[j] + IN, opacity: 1, dy: offset(j) }];\n      if (newestTop) for (var k = j + 1; k < built.length; k++) {\n        keys.pus" +
+"h({ t: times[k], opacity: 1, dy: offset(k - 1) });\n        keys.push({ t: times[k] + IN, opacity: 1, dy: offset(k) });\n      }\n      if (o.until !== undefined) { keys.push({ t: +o.until, opacity: 1, dy: offset(built.length - 1) }); keys.push({ t: +o.until + 0.4, opacity: 0, dy: offset(built.length - 1) }); }\n      if (times[j] <= 0 && !newestTop && o.until === undefined) keys = [];\n      animate(built[j].list, keys);\n      all = all.concat(built[j].list);\n    }\n    play();\n    var total = 0; for (var q = 0; q < built.length; q++) total += built[q].h + (q ? gap : 0);\n    return { kind: 'notifications', ids: ids(all), cards: built.map(function (b) { return ids(b.list); }), arrivals" +
+": times,\n      top: top, bottom: top + total, height: total, doneAt: times.length ? times[times.length - 1] + IN : 0 };\n  }\n  function notification(o) {\n    o = o || {};\n    return notifications({ phone: o.phone, items: [o], x: o.x, y: o.y, width: o.width, scale: o.scale, dark: o.dark, start: o.at === undefined ? 0 : o.at, until: o.until });\n  }\n\n  // ---------- prompt box ------------------------------------------------------------\n  /**\n   * A chat input that types its prompt. text types from typeAt at cps characters a second, a caret\n   * follows the last character, and the send button presses when typing finishes.\n   */\n  function promptBox(o) {\n    o = o || {};\n    var " +
+"th = theme(), cv = canvas(), ph = o.phone && o.phone.kind === 'phone' ? o.phone : null;\n    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);\n    var width = +o.width || (ph ? ph.screen.width - 32 * s : Math.min(cv.width * 0.6, 640 * s));\n    var height = +o.height || 56 * s;\n    var x = o.x !== undefined ? +o.x : (ph ? ph.screen.x : cv.width / 2);\n    var y = o.y !== undefined ? +o.y : (ph ? ph.screen.bottom - 172 * s : cv.height * 0.6);\n    var dark = !!o.dark;\n    var bg = dark ? '#1c1c1e' : '#ffffff', stroke = dark ? '#3a3a3c' : '#d1d1d6';\n    var fg = dark ? '#ffffff' : (contrast(th.text, '#ffffff') >= 4.5 ? th.text : '#111111');\n    var fs = +o.fontSize " +
+"|| Math.round(height * 0.31 * 10) / 10;\n    var r = Math.min(height / 2, height / 2 * th.radius);\n    var list = [];\n    if (o.glow !== false) { rect(list, x, y, width + 10 * s, height + 10 * s, r + 5 * s, th.primary, { opacity: 0.16 }); glyphAlpha(list, 0.16); }\n    rect(list, x, y + 3 * s, width, height, r, '#000000', { opacity: dark ? 0.35 : 0.08 }); glyphAlpha(list, dark ? 0.35 : 0.08);\n    rect(list, x, y, width, height, r, bg, { strokeColor: stroke, strokeWidth: Math.max(1, 1.2 * s) });\n    var left = x - width / 2 + height * 0.36;\n    if (o.attach !== false) {\n      var pr = height * 0.2;\n      path(list, left + pr, y, 'M ' + (-pr) + ' ' + (-0.9 * s) + ' L ' + pr + ' ' + (-" +
+"0.9 * s) + ' L ' + pr + ' ' + (0.9 * s) + ' L ' + (-pr) + ' ' + (0.9 * s) + ' Z M ' + (-0.9 * s) + ' ' + (-pr) + ' L ' + (0.9 * s) + ' ' + (-pr) + ' L ' + (0.9 * s) + ' ' + pr + ' L ' + (-0.9 * s) + ' ' + pr + ' Z', fg, { opacity: 0.55 }); glyphAlpha(list, 0.55);\n      left += pr * 2 + height * 0.24;\n    }\n    var bR = height * 0.36, bX = x + width / 2 - height * 0.14 - bR;\n    var textW = bX - bR - 10 * s - left;\n    // The whole prompt is typed. A line longer than the field scrolls, as a real input does: the field\n    // shows the END of what has been typed behind a leading ellipsis, so no word of the prompt is lost.\n    var full = String(o.text || '').slice(0, 400);\n    var show" +
+"n = function (str) {\n      if (measure(str, fs, 400, th.body) <= textW) return str;\n      var t = str;\n      while (t.length > 1 && measure('\\u2026' + t, fs, 400, th.body) > textW) t = t.slice(1);\n      return '\\u2026' + t;\n    };\n    var placeholder = fit(o.placeholder || 'Ask anything', textW, fs, 400, th.body);\n    var typeAt = o.typeAt === undefined ? (+o.at || 0) + 0.8 : +o.typeAt;\n    var cps = +o.cps || 22;\n    var doneAt = typeAt + full.length / cps;\n    var baseList = list;\n    var phList = [];\n    text(phList, placeholder, left, y, fs, fg, 400, 'left', th.body, { opacity: 0.4 }); glyphAlpha(phList, 0.4);\n    var typed = [];\n    var typedId = null;\n    var caretH " +
+"= fs * 1.25;\n    var caret = [];\n    var caretId = rect(caret, left + 1 * s, y, Math.max(1.5, 2 * s), caretH, 1 * s, th.primary);\n    var btn = [];\n    circle(btn, bX, y, bR, th.primary);\n    var a = bR * 0.5, sh = Math.max(1.2, 1.9 * s);\n    path(btn, bX, y, 'M 0 ' + (-a) + ' L ' + (a * 0.85) + ' ' + (-a * 0.15) + ' L ' + (a * 0.85 - sh) + ' ' + (-a * 0.15 + sh) + ' L ' + (sh / 2) + ' ' + (-a + sh * 1.6) + ' L ' + (sh / 2) + ' ' + a + ' L ' + (-sh / 2) + ' ' + a + ' L ' + (-sh / 2) + ' ' + (-a + sh * 1.6) + ' L ' + (-a * 0.85 + sh) + ' ' + (-a * 0.15 + sh) + ' L ' + (-a * 0.85) + ' ' + (-a * 0.15) + ' Z', ink(th.primary));\n\n    // TYPING IS A RUN OF PREFIX LINES, each shown for it" +
+"s own instant. One text item stepping its\n    // its content was tried first and measured wrong: the engine re-places a text item after a content\n    // change (it keeps a captured position, not the left edge), so the line slid left out of the box, and\n    // keyframing x did not pin it either. A text created at x with justification 'left' DOES start at x\n    // (measured), and a prefix that never changes never moves. Long prompts step two or more characters\n    // at a time so a sentence stays a few dozen items.\n    var stepN = Math.max(1, Math.ceil(full.length / 48));\n    var cuts = [];\n    for (var c = stepN; c < full.length; c += stepN) cuts.push(c);\n    if (full.length) cuts." +
+"push(full.length);\n    var EPS = 0.001;\n    var endT = o.until !== undefined ? +o.until : null;\n    for (var q = 0; q < cuts.length; q++) {\n      var one = [];\n      typedId = text(one, shown(full.slice(0, cuts[q])), left, y, fs, fg, 400, 'left', th.body);\n      typed.push(one[0]);\n      var tOn = typeAt + cuts[q] / cps, tOff = q + 1 < cuts.length ? typeAt + cuts[q + 1] / cps : endT;\n      var kf = [{ time: 0, properties: { opacity: 0 }, easing: 'linear' }, { time: Math.max(0, tOn - EPS), properties: { opacity: 0 }, easing: 'linear' }, { time: tOn, properties: { opacity: 1 }, easing: 'linear' }];\n      if (tOff !== null) {\n        var fadeOut = q + 1 < cuts.length ? EPS : 0.4;\n " +
+"       kf.push({ time: tOff, properties: { opacity: 1 }, easing: 'linear' }, { time: tOff + fadeOut, properties: { opacity: 0 }, easing: 'linear' });\n      }\n      try { P.addAnimation(typedId, kf, { duration: Math.max(kf[kf.length - 1].time, 0.01), loop: false }); } catch (e) {}\n      note(kf[kf.length - 1].time);\n    }\n\n    // caret: follows the measured end of each prefix, then blinks\n    var step = Math.max(1, Math.ceil(full.length / 40));\n    var ck = [{ time: 0, properties: { x: left + 1 * s, opacity: o.at ? 0 : 1 } }];\n    if (o.at) ck.push({ time: +o.at + 0.4, properties: { x: left + 1 * s, opacity: 1 } });\n    if (typeAt > 0) ck.push({ time: typeAt, properties: { x: left" +
+" + 1 * s, opacity: 1 } });\n    for (var c2 = step; c2 <= full.length; c2 += step) ck.push({ time: typeAt + c2 / cps, properties: { x: left + measure(shown(full.slice(0, c2)), fs, 400, th.body) + 2.5 * s, opacity: 1 } });\n    var endX = left + measure(shown(full), fs, 400, th.body) + 2.5 * s;\n    ck.push({ time: doneAt, properties: { x: endX, opacity: 1 } });\n    var blinkUntil = o.until !== undefined ? +o.until : doneAt + (o.blink === undefined ? 2 : +o.blink);\n    for (var bt = doneAt + 0.5, on = false; bt < blinkUntil; bt += 0.5, on = !on) ck.push({ time: bt, properties: { x: endX, opacity: on ? 1 : 0 }, easing: 'linear' });\n    if (o.until !== undefined) ck.push({ time: +o.until +" +
+" 0.4, properties: { x: endX, opacity: 0 } });\n    try { P.addAnimation(caretId, ck.map(function (k) { k.easing = k.easing || 'linear'; return k; }), { duration: Math.max(ck[ck.length - 1].time, 0.01), loop: false }); } catch (e) {}\n    note(ck[ck.length - 1].time);\n\n    // placeholder leaves as the first character lands\n    var phKeys = windowKeys(o.at, 0.4, null);\n    phKeys.push({ t: Math.max(typeAt, (+o.at || 0) + 0.4), opacity: 1 }, { t: Math.max(typeAt, (+o.at || 0) + 0.4) + 0.12, opacity: 0 });\n    if (full.length) animate(phList, phKeys, 'linear'); else settle(phList, o);\n    settle(baseList, o);\n    // the send button presses when typing finishes\n    var press = o.press =" +
+"== false || !full.length ? null : doneAt + 0.35;\n    var bk = windowKeys(o.at, 0.4, o.until);\n    if (press !== null) {\n      if (!bk.length) bk.push({ t: 0, opacity: 1 });\n      bk.push({ t: press, opacity: 1, scale: 1 }, { t: press + 0.12, opacity: 1, scale: 0.86 }, { t: press + 0.3, opacity: 1, scale: 1 });\n      bk.sort(function (p, q) { return p.t - q.t; });\n      for (var z = 0; z < bk.length; z++) if (bk[z].scale === undefined) bk[z].scale = 1;\n    }\n    if (bk.length) animate(btn, bk);\n    play();\n    var all = baseList.concat(phList, typed, caret, btn);\n    return { kind: 'promptBox', ids: ids(all), textId: typedId, typeAt: typeAt, doneAt: doneAt, pressAt: press,\n     " +
+" x: x, y: y, width: width, height: height, top: y - height / 2, bottom: y + height / 2 };\n  }\n\n  // ---------- toggle ----------------------------------------------------------------\n  function toggle(o) {\n    o = o || {};\n    var th = theme(), cv = canvas(), ph = o.phone && o.phone.kind === 'phone' ? o.phone : null;\n    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);\n    var h = (+o.size || 31) * s, w = h * 51 / 31;\n    var x = o.x !== undefined ? +o.x : cv.width / 2, y = o.y !== undefined ? +o.y : cv.height / 2;\n    var dark = !!o.dark;\n    var onCol = isColour(o.color) ? o.color : (th.branded ? th.accent : '#34c759');\n    var offCol = dark ? '#39393d' " +
+": '#e9e9eb';\n    var startOn = !!o.on, flip = o.switchAt === undefined || o.switchAt === null ? null : +o.switchAt;\n    var list = [];\n    var labelIds = [];\n    if (o.label) {\n      var lbl = [];\n      text(lbl, o.label, x - w / 2 - 14 * s, y, 17 * s, isColour(o.labelColor) ? o.labelColor : (ph ? ph.ink : (dark ? '#ffffff' : (ground() ? ink(ground()) : th.text))), 500, 'right', th.body);\n      labelIds = lbl; list = list.concat(lbl);\n    }\n    var base = [];\n    rect(base, x, y, w, h, h / 2, offCol);\n    var onTrack = [];\n    rect(onTrack, x, y, w, h, h / 2, onCol);\n    var kr = h / 2 - 2 * s, kxOff = x - w / 2 + 2 * s + kr, kxOn = x + w / 2 - 2 * s - kr;\n    var knob = [];" +
+"\n    circle(knob, startOn ? kxOn : kxOff, y + 1.5 * s, kr, '#000000', { opacity: 0.16 }); glyphAlpha(knob, 0.16);\n    circle(knob, startOn ? kxOn : kxOff, y, kr, '#ffffff');\n    var win = windowKeys(o.at, o.fade, o.until);\n    if (labelIds.length && win.length) animate(labelIds, win);\n    if (win.length) animate(base, win);\n    // on-track opacity and knob x, together with the appearance window\n    var times = [0];\n    win.forEach(function (k) { times.push(k.t); });\n    if (flip !== null) times.push(flip, flip + 0.28);\n    times = times.filter(function (t, i, a) { return a.indexOf(t) === i; }).sort(function (a, b) { return a - b; });\n    var vis = function (t) {\n      if (!win." +
+"length) return 1;\n      var v = win[0].opacity;\n      for (var i = 0; i < win.length; i++) if (win[i].t <= t) v = win[i].opacity;\n      for (var j = 1; j < win.length; j++) if (t > win[j - 1].t && t < win[j].t) { var f = (t - win[j - 1].t) / (win[j].t - win[j - 1].t); v = win[j - 1].opacity + (win[j].opacity - win[j - 1].opacity) * f; }\n      return v;\n    };\n    var state = function (t) { if (flip === null || t <= flip) return startOn ? 1 : 0; if (t >= flip + 0.28) return startOn ? 0 : 1; return startOn ? 1 - (t - flip) / 0.28 : (t - flip) / 0.28; };\n    if (win.length || flip !== null) {\n      try { P.addAnimation(onTrack[0].id, times.map(function (t) { return { time: t, properti" +
+"es: { opacity: vis(t) * state(t) }, easing: 'easeInOut' }; }), { duration: Math.max(times[times.length - 1], 0.01), loop: false }); } catch (e) {}\n      knob.forEach(function (it) {\n        try { P.addAnimation(it.id, times.map(function (t) { return { time: t, properties: { opacity: vis(t) * (it.alpha === undefined ? 1 : it.alpha), x: kxOff + (kxOn - kxOff) * state(t) }, easing: 'easeInOut' }; }), { duration: Math.max(times[times.length - 1], 0.01), loop: false }); } catch (e) {}\n      });\n      note(times[times.length - 1]);\n    } else if (!startOn) {\n      try { P.modifyItem(onTrack[0].id, { opacity: 0 }); } catch (e) {}\n    }\n    play();\n    list = list.concat(base, onTrack, kn" +
+"ob);\n    return { kind: 'toggle', ids: ids(list), on: flip === null ? startOn : !startOn, switchAt: flip, x: x, y: y, width: w, height: h };\n  }\n\n  // ---------- calendar card ------------------------------------------------------------\n  function calendarCard(o) {\n    o = o || {};\n    var th = theme(), cv = canvas(), ph = o.phone && o.phone.kind === 'phone' ? o.phone : null;\n    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);\n    var width = +o.width || (ph ? ph.screen.width - 32 * s : 340 * s);\n    var x = o.x !== undefined ? +o.x : (ph ? ph.screen.x : cv.width / 2);\n    var events = (o.events || [{ time: '10:00', title: 'Launch review' }, { time: '13:30" +
+"', title: 'Design sync' }]).slice(0, 5);\n    var pad = 18 * s, rowH = 46 * s, headH = 74 * s;\n    var h = pad + headH + events.length * rowH + pad * 0.6;\n    var top = o.y !== undefined ? +o.y - h / 2 : (ph ? ph.screen.top + 300 * s : cv.height / 2 - h / 2);\n    var dark = !!o.dark;\n    var bg = dark ? '#1c1c1e' : '#ffffff', fg = dark ? '#ffffff' : '#111111', sub = dark ? '#ebebf5' : '#3c3c43';\n    var left = x - width / 2 + pad;\n    var list = [];\n    rect(list, x, top + h / 2 + 4 * s, width, h, 24 * s * th.radius, '#000000', { opacity: 0.1 }); glyphAlpha(list, 0.1);\n    rect(list, x, top + h / 2, width, h, 24 * s * th.radius, bg, { opacity: o.glass ? 0.84 : 1 }); if (o.glass) gl" +
+"yphAlpha(list, 0.84);\n    text(list, String(o.day || 'Tuesday').toUpperCase(), left, top + pad + 8 * s, 13 * s, th.primary, 700, 'left', th.body);\n    text(list, String(o.date === undefined ? 9 : o.date), left, top + pad + 44 * s, 40 * s, fg, 500, 'left', th.heading);\n    if (o.month) { text(list, String(o.month), x + width / 2 - pad, top + pad + 8 * s, 13 * s, sub, 500, 'right', th.body, { opacity: 0.7 }); glyphAlpha(list, 0.7); }\n    var colours = [th.primary, th.accent, th.secondary];\n    for (var i = 0; i < events.length; i++) {\n      var ev = events[i] || {}, ry = top + pad + headH + i * rowH + rowH / 2;\n      var col = isColour(ev.color) ? ev.color : colours[i % colours.length" +
+"];\n      rect(list, x, ry, width - pad * 2 + 4 * s, rowH - 8 * s, 8 * s * th.radius, col, { opacity: 0.14 }); glyphAlpha(list, 0.14);\n      rect(list, left + 2 * s, ry, 4 * s, rowH - 16 * s, 2 * s, col);\n      text(list, fit(ev.title || 'Event', width - pad * 2 - 90 * s, 15 * s, 600, th.body), left + 14 * s, ry - 7 * s, 15 * s, fg, 600, 'left', th.body);\n      text(list, String(ev.time || ''), left + 14 * s, ry + 10 * s, 12 * s, sub, 400, 'left', th.body, { opacity: 0.75 }); glyphAlpha(list, 0.75);\n    }\n    settle(list, o, o.rise === undefined ? (o.at ? 14 * s : 0) : +o.rise);\n    return { kind: 'calendarCard', ids: ids(list), x: x, top: top, bottom: top + h, height: h, width: widt" +
+"h };\n  }\n\n  // ---------- ad card ---------------------------------------------------------------------\n  function adCard(o) {\n    o = o || {};\n    var th = theme(), cv = canvas(), ph = o.phone && o.phone.kind === 'phone' ? o.phone : null;\n    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);\n    var width = +o.width || (ph ? ph.screen.width - 24 * s : 360 * s);\n    var x = o.x !== undefined ? +o.x : (ph ? ph.screen.x : cv.width / 2);\n    var pad = 14 * s, headH = 52 * s, mediaH = width * (o.aspect === 'square' ? 1 : 0.75), footH = 64 * s;\n    var h = headH + mediaH + footH;\n    var top = o.y !== undefined ? +o.y - h / 2 : (ph ? ph.screen.top + 110 * s : cv" +
+".height / 2 - h / 2);\n    var dark = !!o.dark;\n    var bg = dark ? '#1c1c1e' : '#ffffff', fg = dark ? '#ffffff' : '#111111', sub = dark ? '#ebebf5' : '#3c3c43';\n    var name = o.brandName || th.name || 'Your Brand';\n    var list = [];\n    var R = 20 * s * th.radius;\n    rect(list, x, top + h / 2 + 5 * s, width, h, R, '#000000', { opacity: 0.12 }); glyphAlpha(list, 0.12);\n    rect(list, x, top + h / 2, width, h, R, bg);\n    var left = x - width / 2 + pad, av = 32 * s;\n    circle(list, left + av / 2, top + headH / 2, av / 2, th.primary);\n    text(list, (o.logo || name.charAt(0)).slice(0, 2), left + av / 2, top + headH / 2, 15 * s, ink(th.primary), 700, 'center', th.heading);\n    t" +
+"ext(list, fit(name, width - av - pad * 3 - 20 * s, 15 * s, 600, th.body), left + av + 10 * s, top + headH / 2 - 8 * s, 15 * s, fg, 600, 'left', th.body);\n    text(list, o.sponsored === false ? (o.handle || '') : (o.sponsoredLabel || 'Sponsored'), left + av + 10 * s, top + headH / 2 + 9 * s, 12 * s, sub, 400, 'left', th.body, { opacity: 0.7 }); glyphAlpha(list, 0.7);\n    for (var d = 0; d < 3; d++) circle(list, x + width / 2 - pad - 4 * s - d * 6 * s, top + headH / 2, 1.8 * s, sub);\n    var mTop = top + headH, mStops = Array.isArray(o.media) ? o.media.filter(isColour) : (isColour(o.media) ? [o.media] : [th.primary, th.secondary]);\n    if (!mStops.length) mStops = [th.primary, th.seconda" +
+"ry];\n    var mFill = mStops.length > 1 ? { gradient: { stops: mStops }, origin: [x - width / 2, mTop], destination: [x + width / 2, mTop + mediaH] } : mStops[0];\n    rect(list, x, mTop + mediaH / 2, width, mediaH, 0, mFill);\n    var mInk = ink(mStops.length > 1 ? mix(mStops[0], mStops[mStops.length - 1], 0.5) : mStops[0]);\n    var hl = wrap(o.headline || 'Meet the new way to work', width - pad * 4, 30 * s, 700, th.heading, 3);\n    var hlTop = mTop + mediaH / 2 - (hl.length - 1) * 30 * s * 0.6;\n    for (var l = 0; l < hl.length; l++) text(list, hl[l], x, hlTop + l * 30 * s * 1.2, 30 * s, mInk, 700, 'center', th.heading);\n    var fy = mTop + mediaH + footH / 2;\n    var cta = o.cta ||" +
+" 'Learn more';\n    var ctaFs = 14 * s, ctaW = measure(cta, ctaFs, 600, th.body) + 28 * s, ctaH = 34 * s;\n    var ctaX = x + width / 2 - pad - ctaW / 2;\n    text(list, fit(o.body || name, width - ctaW - pad * 3, 14 * s, 500, th.body), left, fy, 14 * s, fg, 500, 'left', th.body);\n    rect(list, ctaX, fy, ctaW, ctaH, Math.min(ctaH / 2, 10 * s * th.radius * 1.7), th.primary);\n    text(list, cta, ctaX, fy, ctaFs, ink(th.primary), 600, 'center', th.body);\n    settle(list, o, o.rise === undefined ? (o.at ? 18 * s : 0) : +o.rise);\n    return { kind: 'adCard', ids: ids(list), x: x, top: top, bottom: top + h, height: h, width: width };\n  }\n\n  // ---------- brand ---------------------------" +
+"----------------------------------------------\n  /** Set the brand the kit draws in: the brand kit's own shape { name, colors: { primary, secondary,\n   *  accent, background, text }, fonts: { heading, body }, radius: 'sharp'|'soft'|'round'|number }. */\n  function setBrand(kit) {\n    if (kit === null) { brand = null; return theme(); }\n    if (kit && typeof kit === 'object') {\n      var colours = kit.colors || kit.colours || {};\n      if (Array.isArray(colours)) colours = { primary: colours[0], secondary: colours[1], accent: colours[2] };\n      brand = { name: kit.name || '', colors: colours, fonts: kit.fonts || {}, radius: kit.radius };\n    }\n    return theme();\n  }\n  // A brand" +
+" kit applied in code also becomes the kit's brand. Wrapped once, and the engine's own\n  // behaviour is kept exactly: the wrapper records and then calls through.\n  try {\n    if (P && typeof P.applyBrandKit === 'function' && !P.applyBrandKit.__uiKit) {\n      var orig = P.applyBrandKit;\n      var wrapped = function (kit) { try { if (kit && kit.colors && kit.colors.primary) setBrand(kit); } catch (e) {} return orig.apply(this, arguments); };\n      wrapped.__uiKit = true;\n      P.applyBrandKit = wrapped;\n    }\n  } catch (e) {}\n\n  return {\n    version: '1.0.0',\n    brand: setBrand,\n    theme: theme,\n    duration: function (D) { if (D !== undefined) { minDuration = +D || 0; play()" +
+"; } return Math.max(minDuration, kitEnd > 0 ? kitEnd + HOLD : 0); },\n    phone: phone,\n    notifications: notifications,\n    notification: notification,\n    promptBox: promptBox,\n    toggle: toggle,\n    calendarCard: calendarCard,\n    adCard: adCard\n  };\n})();\n// --- END PINEPAPER UI KIT -----------------------------------------------------------\n"
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-    // lock screen
-    var lock = o.lockScreen !== false;
-    if (lock) {
-      text(list, o.date || 'Tuesday, June 9', cx, st + 118 * s, 21 * s, onWall, 600, 'center', th.body, { opacity: 0.88 }); glyphAlpha(list, 0.88);
-      text(list, o.clock || o.time || '9:41', cx, st + 196 * s, 98 * s, onWall, 700, 'center', th.heading);
-      var gl = onWall === '#ffffff' ? '#ffffff' : '#000000';
-      circle(list, sl + 66 * s, st + sh - 92 * s, 25 * s, gl, { opacity: 0.18 }); glyphAlpha(list, 0.18);
-      circle(list, sl + sw - 66 * s, st + sh - 92 * s, 25 * s, gl, { opacity: 0.18 }); glyphAlpha(list, 0.18);
-      // torch and camera glyphs, centred on the origin
-      path(list, sl + 66 * s, st + sh - 92 * s, 'M ' + (-4 * s) + ' ' + (-10 * s) + ' L ' + (4 * s) + ' ' + (-10 * s) + ' L ' + (4 * s) + ' ' + (-4 * s) + ' L ' + (2 * s) + ' ' + (0) + ' L ' + (2 * s) + ' ' + (10 * s) + ' L ' + (-2 * s) + ' ' + (10 * s) + ' L ' + (-2 * s) + ' ' + (0) + ' L ' + (-4 * s) + ' ' + (-4 * s) + ' Z', onWall);
-      rect(list, sl + sw - 66 * s, st + sh - 92 * s, 22 * s, 16 * s, 4 * s, onWall);
-      circle(list, sl + sw - 66 * s, st + sh - 92 * s, 4.6 * s, gl === '#ffffff' ? mix(avg, '#000000', 0.2) : '#ffffff');
-    }
-    if (o.homeIndicator !== false) rect(list, cx, st + sh - 9 * s, 136 * s, 5 * s, 2.5 * s, onWall);
-
-    settle(list, o);
-    var ph = {
-      kind: 'phone', s: s, x: cx, y: cy, width: W, height: FRAME_H * s, ink: onWall, dark: dark,
-      screen: { x: cx, y: cy, width: sw, height: sh, left: sl, top: st, right: sl + sw, bottom: st + sh, id: screenId },
-      /** Canvas position of a point given in phone-screen points (0..390, 0..844). */
-      at: function (px, py) { return { x: sl + px * s, y: st + py * s }; },
-      ids: ids(list)
-    };
-    return ph;
-  }
-
-  // ---------- notifications -------------------------------------------------------
-  function cardTheme(o, th) {
-    var dark = !!o.dark;
-    return dark
-      ? { bg: '#1c1c1e', alpha: 0.78, title: '#ffffff', body: '#ebebf5', meta: '#ebebf5', metaA: 0.6 }
-      : { bg: '#ffffff', alpha: 0.82, title: '#111111', body: '#1c1c1e', meta: '#3c3c43', metaA: 0.6 };
-  }
-  /**
-   * Build one notification's items at slot-0 position and return them with their height. Not animated.
-   */
-  function noteItems(n, i, x, top, width, s, th, ct) {
-    var list = [];
-    var pad = 14 * s, icon = 38 * s, fsT = 15 * s, fsB = 15 * s, fsM = 13 * s;
-    var textLeft = x - width / 2 + pad + icon + 12 * s, textW = width / 2 + x - pad - textLeft;
-    var title = n.title || n.app || 'Notification';
-    var lines = wrap(n.body || '', textW, fsB, 400, th.body, n.lines || 2);
-    var h = pad * 2 + fsT * 1.25 + lines.length * fsB * 1.28;
-    h = Math.max(h, icon + pad * 2);
-    var cy = top + h / 2;
-    var colours = [th.primary, th.accent, th.secondary];
-    var ic = isColour(n.color) ? n.color : colours[i % colours.length];
-    rect(list, x, cy, width, h, 24 * s * th.radius, ct.bg, { opacity: ct.alpha }); glyphAlpha(list, ct.alpha);
-    var ix = x - width / 2 + pad + icon / 2;
-    rect(list, ix, cy, icon, icon, 9.5 * s * th.radius, ic);
-    text(list, (n.icon || String(n.app || title).charAt(0) || '•').slice(0, 2), ix, cy, 19 * s, ink(ic), 700, 'center', th.heading);
-    var metaText = n.time || 'now';
-    var metaW = measure(metaText, fsM, 400, th.body);
-    var tY = top + pad + fsT * 0.62;
-    text(list, fit(title, textW - metaW - 10 * s, fsT, 600, th.body), textLeft, tY, fsT, ct.title, 600, 'left', th.body);
-    text(list, metaText, x + width / 2 - pad, tY, fsM, ct.meta, 400, 'right', th.body, { opacity: ct.metaA }); glyphAlpha(list, ct.metaA);
-    for (var l = 0; l < lines.length; l++) text(list, lines[l], textLeft, tY + fsT * 0.66 + fsB * 0.64 + l * fsB * 1.28, fsB, ct.body, 400, 'left', th.body);
-    return { list: list, h: h };
-  }
-  /**
-   * A stack of notifications arriving one by one. Newest on top pushes the others down (iOS), or
-   * newest: 'bottom' to append below. phoneOrOpts may be a phone from UIKit.phone() — the stack then
-   * sits under the clock and inherits its scale — or plain options { x, y(top), width, scale }.
-   */
-  function notifications(phoneOrOpts, items, o) {
-    o = o || {};
-    // notifications(phone, items, opts) | notifications(items, opts) | notifications({ items, x, y, ... })
-    var th = theme(), ph = phoneOrOpts && phoneOrOpts.kind === 'phone' ? phoneOrOpts : null;
-    if (!ph && Array.isArray(phoneOrOpts)) { o = items || {}; items = phoneOrOpts; }
-    else if (!ph && phoneOrOpts && typeof phoneOrOpts === 'object') { o = phoneOrOpts; items = o.items; }
-    o = o || {};
-    if (!ph && o.phone && o.phone.kind === 'phone') ph = o.phone;
-    items = (items || []).map(function (n) { return typeof n === 'string' ? { title: n } : (n || {}); });
-    var cv = canvas();
-    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);
-    var width = +o.width || (ph ? ph.screen.width - 24 * s : 360 * s);
-    var x = o.x !== undefined ? +o.x : (ph ? ph.screen.x : cv.width / 2);
-    var top = o.y !== undefined ? +o.y : (ph ? ph.screen.top + 300 * s : cv.height * 0.25);
-    var gap = (o.gap === undefined ? 8 : +o.gap) * s;
-    var start = o.start === undefined ? 0.6 : +o.start, stagger = o.stagger === undefined ? 0.9 : +o.stagger;
-    var newestTop = o.newest !== 'bottom';
-    var ct = cardTheme(o, th);
-    var built = [];
-    for (var i = 0; i < items.length; i++) built.push(noteItems(items[i], i, x, top, width, s, th, ct));
-    var times = items.map(function (n, k) { return n.at !== undefined ? +n.at : start + k * stagger; });
-    var IN = 0.45, RISE = -16 * s;
-    var all = [];
-    for (var j = 0; j < built.length; j++) {
-      // y offset of card j once card k has arrived
-      var offset = function (k) {
-        if (!newestTop) { var d0 = 0; for (var m0 = 0; m0 < j; m0++) d0 += built[m0].h + gap; return d0; }
-        var d = 0; for (var m = j + 1; m <= k; m++) d += built[m].h + gap; return d;
-      };
-      var keys = [{ t: 0, opacity: 0, dy: offset(j) + RISE }, { t: times[j], opacity: 0, dy: offset(j) + RISE },
-        { t: times[j] + IN, opacity: 1, dy: offset(j) }];
-      if (newestTop) for (var k = j + 1; k < built.length; k++) {
-        keys.push({ t: times[k], opacity: 1, dy: offset(k - 1) });
-        keys.push({ t: times[k] + IN, opacity: 1, dy: offset(k) });
-      }
-      if (o.until !== undefined) { keys.push({ t: +o.until, opacity: 1, dy: offset(built.length - 1) }); keys.push({ t: +o.until + 0.4, opacity: 0, dy: offset(built.length - 1) }); }
-      if (times[j] <= 0 && !newestTop && o.until === undefined) keys = [];
-      animate(built[j].list, keys);
-      all = all.concat(built[j].list);
-    }
-    play();
-    var total = 0; for (var q = 0; q < built.length; q++) total += built[q].h + (q ? gap : 0);
-    return { kind: 'notifications', ids: ids(all), cards: built.map(function (b) { return ids(b.list); }), arrivals: times,
-      top: top, bottom: top + total, height: total, doneAt: times.length ? times[times.length - 1] + IN : 0 };
-  }
-  function notification(o) {
-    o = o || {};
-    return notifications({ phone: o.phone, items: [o], x: o.x, y: o.y, width: o.width, scale: o.scale, dark: o.dark, start: o.at === undefined ? 0 : o.at, until: o.until });
-  }
-
-  // ---------- prompt box ------------------------------------------------------------
-  /**
-   * A chat input that types its prompt. text types from typeAt at cps characters a second, a caret
-   * follows the last character, and the send button presses when typing finishes.
-   */
-  function promptBox(o) {
-    o = o || {};
-    var th = theme(), cv = canvas(), ph = o.phone && o.phone.kind === 'phone' ? o.phone : null;
-    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);
-    var width = +o.width || (ph ? ph.screen.width - 32 * s : Math.min(cv.width * 0.6, 640 * s));
-    var height = +o.height || 56 * s;
-    var x = o.x !== undefined ? +o.x : (ph ? ph.screen.x : cv.width / 2);
-    var y = o.y !== undefined ? +o.y : (ph ? ph.screen.bottom - 172 * s : cv.height * 0.6);
-    var dark = !!o.dark;
-    var bg = dark ? '#1c1c1e' : '#ffffff', stroke = dark ? '#3a3a3c' : '#d1d1d6';
-    var fg = dark ? '#ffffff' : (contrast(th.text, '#ffffff') >= 4.5 ? th.text : '#111111');
-    var fs = +o.fontSize || Math.round(height * 0.31 * 10) / 10;
-    var r = Math.min(height / 2, height / 2 * th.radius);
-    var list = [];
-    if (o.glow !== false) { rect(list, x, y, width + 10 * s, height + 10 * s, r + 5 * s, th.primary, { opacity: 0.16 }); glyphAlpha(list, 0.16); }
-    rect(list, x, y + 3 * s, width, height, r, '#000000', { opacity: dark ? 0.35 : 0.08 }); glyphAlpha(list, dark ? 0.35 : 0.08);
-    rect(list, x, y, width, height, r, bg, { strokeColor: stroke, strokeWidth: Math.max(1, 1.2 * s) });
-    var left = x - width / 2 + height * 0.36;
-    if (o.attach !== false) {
-      var pr = height * 0.2;
-      path(list, left + pr, y, 'M ' + (-pr) + ' ' + (-0.9 * s) + ' L ' + pr + ' ' + (-0.9 * s) + ' L ' + pr + ' ' + (0.9 * s) + ' L ' + (-pr) + ' ' + (0.9 * s) + ' Z M ' + (-0.9 * s) + ' ' + (-pr) + ' L ' + (0.9 * s) + ' ' + (-pr) + ' L ' + (0.9 * s) + ' ' + pr + ' L ' + (-0.9 * s) + ' ' + pr + ' Z', fg, { opacity: 0.55 }); glyphAlpha(list, 0.55);
-      left += pr * 2 + height * 0.24;
-    }
-    var bR = height * 0.36, bX = x + width / 2 - height * 0.14 - bR;
-    var textW = bX - bR - 10 * s - left;
-    // The whole prompt is typed. A line longer than the field scrolls, as a real input does: the field
-    // shows the END of what has been typed behind a leading ellipsis, so no word of the prompt is lost.
-    var full = String(o.text || '').slice(0, 400);
-    var shown = function (str) {
-      if (measure(str, fs, 400, th.body) <= textW) return str;
-      var t = str;
-      while (t.length > 1 && measure('\u2026' + t, fs, 400, th.body) > textW) t = t.slice(1);
-      return '\u2026' + t;
-    };
-    var placeholder = fit(o.placeholder || 'Ask anything', textW, fs, 400, th.body);
-    var typeAt = o.typeAt === undefined ? (+o.at || 0) + 0.8 : +o.typeAt;
-    var cps = +o.cps || 22;
-    var doneAt = typeAt + full.length / cps;
-    var baseList = list;
-    var phList = [];
-    text(phList, placeholder, left, y, fs, fg, 400, 'left', th.body, { opacity: 0.4 }); glyphAlpha(phList, 0.4);
-    var typed = [];
-    var typedId = null;
-    var caretH = fs * 1.25;
-    var caret = [];
-    var caretId = rect(caret, left + 1 * s, y, Math.max(1.5, 2 * s), caretH, 1 * s, th.primary);
-    var btn = [];
-    circle(btn, bX, y, bR, th.primary);
-    var a = bR * 0.5, sh = Math.max(1.2, 1.9 * s);
-    path(btn, bX, y, 'M 0 ' + (-a) + ' L ' + (a * 0.85) + ' ' + (-a * 0.15) + ' L ' + (a * 0.85 - sh) + ' ' + (-a * 0.15 + sh) + ' L ' + (sh / 2) + ' ' + (-a + sh * 1.6) + ' L ' + (sh / 2) + ' ' + a + ' L ' + (-sh / 2) + ' ' + a + ' L ' + (-sh / 2) + ' ' + (-a + sh * 1.6) + ' L ' + (-a * 0.85 + sh) + ' ' + (-a * 0.15 + sh) + ' L ' + (-a * 0.85) + ' ' + (-a * 0.15) + ' Z', ink(th.primary));
-
-    // TYPING IS A RUN OF PREFIX LINES, each shown for its own instant. One text item stepping its
-    // its content was tried first and measured wrong: the engine re-places a text item after a content
-    // change (it keeps a captured position, not the left edge), so the line slid left out of the box, and
-    // keyframing x did not pin it either. A text created at x with justification 'left' DOES start at x
-    // (measured), and a prefix that never changes never moves. Long prompts step two or more characters
-    // at a time so a sentence stays a few dozen items.
-    var stepN = Math.max(1, Math.ceil(full.length / 48));
-    var cuts = [];
-    for (var c = stepN; c < full.length; c += stepN) cuts.push(c);
-    if (full.length) cuts.push(full.length);
-    var EPS = 0.001;
-    var endT = o.until !== undefined ? +o.until : null;
-    for (var q = 0; q < cuts.length; q++) {
-      var one = [];
-      typedId = text(one, shown(full.slice(0, cuts[q])), left, y, fs, fg, 400, 'left', th.body);
-      typed.push(one[0]);
-      var tOn = typeAt + cuts[q] / cps, tOff = q + 1 < cuts.length ? typeAt + cuts[q + 1] / cps : endT;
-      var kf = [{ time: 0, properties: { opacity: 0 }, easing: 'linear' }, { time: Math.max(0, tOn - EPS), properties: { opacity: 0 }, easing: 'linear' }, { time: tOn, properties: { opacity: 1 }, easing: 'linear' }];
-      if (tOff !== null) {
-        var fadeOut = q + 1 < cuts.length ? EPS : 0.4;
-        kf.push({ time: tOff, properties: { opacity: 1 }, easing: 'linear' }, { time: tOff + fadeOut, properties: { opacity: 0 }, easing: 'linear' });
-      }
-      try { P.addAnimation(typedId, kf, { duration: Math.max(kf[kf.length - 1].time, 0.01), loop: false }); } catch (e) {}
-      note(kf[kf.length - 1].time);
-    }
 
-    // caret: follows the measured end of each prefix, then blinks
-    var step = Math.max(1, Math.ceil(full.length / 40));
-    var ck = [{ time: 0, properties: { x: left + 1 * s, opacity: o.at ? 0 : 1 } }];
-    if (o.at) ck.push({ time: +o.at + 0.4, properties: { x: left + 1 * s, opacity: 1 } });
-    if (typeAt > 0) ck.push({ time: typeAt, properties: { x: left + 1 * s, opacity: 1 } });
-    for (var c2 = step; c2 <= full.length; c2 += step) ck.push({ time: typeAt + c2 / cps, properties: { x: left + measure(shown(full.slice(0, c2)), fs, 400, th.body) + 2.5 * s, opacity: 1 } });
-    var endX = left + measure(shown(full), fs, 400, th.body) + 2.5 * s;
-    ck.push({ time: doneAt, properties: { x: endX, opacity: 1 } });
-    var blinkUntil = o.until !== undefined ? +o.until : doneAt + (o.blink === undefined ? 2 : +o.blink);
-    for (var bt = doneAt + 0.5, on = false; bt < blinkUntil; bt += 0.5, on = !on) ck.push({ time: bt, properties: { x: endX, opacity: on ? 1 : 0 }, easing: 'linear' });
-    if (o.until !== undefined) ck.push({ time: +o.until + 0.4, properties: { x: endX, opacity: 0 } });
-    try { P.addAnimation(caretId, ck.map(function (k) { k.easing = k.easing || 'linear'; return k; }), { duration: Math.max(ck[ck.length - 1].time, 0.01), loop: false }); } catch (e) {}
-    note(ck[ck.length - 1].time);
-
-    // placeholder leaves as the first character lands
-    var phKeys = windowKeys(o.at, 0.4, null);
-    phKeys.push({ t: Math.max(typeAt, (+o.at || 0) + 0.4), opacity: 1 }, { t: Math.max(typeAt, (+o.at || 0) + 0.4) + 0.12, opacity: 0 });
-    if (full.length) animate(phList, phKeys, 'linear'); else settle(phList, o);
-    settle(baseList, o);
-    // the send button presses when typing finishes
-    var press = o.press === false || !full.length ? null : doneAt + 0.35;
-    var bk = windowKeys(o.at, 0.4, o.until);
-    if (press !== null) {
-      if (!bk.length) bk.push({ t: 0, opacity: 1 });
-      bk.push({ t: press, opacity: 1, scale: 1 }, { t: press + 0.12, opacity: 1, scale: 0.86 }, { t: press + 0.3, opacity: 1, scale: 1 });
-      bk.sort(function (p, q) { return p.t - q.t; });
-      for (var z = 0; z < bk.length; z++) if (bk[z].scale === undefined) bk[z].scale = 1;
-    }
-    if (bk.length) animate(btn, bk);
-    play();
-    var all = baseList.concat(phList, typed, caret, btn);
-    return { kind: 'promptBox', ids: ids(all), textId: typedId, typeAt: typeAt, doneAt: doneAt, pressAt: press,
-      x: x, y: y, width: width, height: height, top: y - height / 2, bottom: y + height / 2 };
-  }
-
-  // ---------- toggle ----------------------------------------------------------------
-  function toggle(o) {
-    o = o || {};
-    var th = theme(), cv = canvas(), ph = o.phone && o.phone.kind === 'phone' ? o.phone : null;
-    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);
-    var h = (+o.size || 31) * s, w = h * 51 / 31;
-    var x = o.x !== undefined ? +o.x : cv.width / 2, y = o.y !== undefined ? +o.y : cv.height / 2;
-    var dark = !!o.dark;
-    var onCol = isColour(o.color) ? o.color : (th.branded ? th.accent : '#34c759');
-    var offCol = dark ? '#39393d' : '#e9e9eb';
-    var startOn = !!o.on, flip = o.switchAt === undefined || o.switchAt === null ? null : +o.switchAt;
-    var list = [];
-    var labelIds = [];
-    if (o.label) {
-      var lbl = [];
-      text(lbl, o.label, x - w / 2 - 14 * s, y, 17 * s, isColour(o.labelColor) ? o.labelColor : (ph ? ph.ink : (dark ? '#ffffff' : (ground() ? ink(ground()) : th.text))), 500, 'right', th.body);
-      labelIds = lbl; list = list.concat(lbl);
-    }
-    var base = [];
-    rect(base, x, y, w, h, h / 2, offCol);
-    var onTrack = [];
-    rect(onTrack, x, y, w, h, h / 2, onCol);
-    var kr = h / 2 - 2 * s, kxOff = x - w / 2 + 2 * s + kr, kxOn = x + w / 2 - 2 * s - kr;
-    var knob = [];
-    circle(knob, startOn ? kxOn : kxOff, y + 1.5 * s, kr, '#000000', { opacity: 0.16 }); glyphAlpha(knob, 0.16);
-    circle(knob, startOn ? kxOn : kxOff, y, kr, '#ffffff');
-    var win = windowKeys(o.at, o.fade, o.until);
-    if (labelIds.length && win.length) animate(labelIds, win);
-    if (win.length) animate(base, win);
-    // on-track opacity and knob x, together with the appearance window
-    var times = [0];
-    win.forEach(function (k) { times.push(k.t); });
-    if (flip !== null) times.push(flip, flip + 0.28);
-    times = times.filter(function (t, i, a) { return a.indexOf(t) === i; }).sort(function (a, b) { return a - b; });
-    var vis = function (t) {
-      if (!win.length) return 1;
-      var v = win[0].opacity;
-      for (var i = 0; i < win.length; i++) if (win[i].t <= t) v = win[i].opacity;
-      for (var j = 1; j < win.length; j++) if (t > win[j - 1].t && t < win[j].t) { var f = (t - win[j - 1].t) / (win[j].t - win[j - 1].t); v = win[j - 1].opacity + (win[j].opacity - win[j - 1].opacity) * f; }
-      return v;
-    };
-    var state = function (t) { if (flip === null || t <= flip) return startOn ? 1 : 0; if (t >= flip + 0.28) return startOn ? 0 : 1; return startOn ? 1 - (t - flip) / 0.28 : (t - flip) / 0.28; };
-    if (win.length || flip !== null) {
-      try { P.addAnimation(onTrack[0].id, times.map(function (t) { return { time: t, properties: { opacity: vis(t) * state(t) }, easing: 'easeInOut' }; }), { duration: Math.max(times[times.length - 1], 0.01), loop: false }); } catch (e) {}
-      knob.forEach(function (it) {
-        try { P.addAnimation(it.id, times.map(function (t) { return { time: t, properties: { opacity: vis(t) * (it.alpha === undefined ? 1 : it.alpha), x: kxOff + (kxOn - kxOff) * state(t) }, easing: 'easeInOut' }; }), { duration: Math.max(times[times.length - 1], 0.01), loop: false }); } catch (e) {}
-      });
-      note(times[times.length - 1]);
-    } else if (!startOn) {
-      try { P.modifyItem(onTrack[0].id, { opacity: 0 }); } catch (e) {}
-    }
-    play();
-    list = list.concat(base, onTrack, knob);
-    return { kind: 'toggle', ids: ids(list), on: flip === null ? startOn : !startOn, switchAt: flip, x: x, y: y, width: w, height: h };
-  }
-
-  // ---------- calendar card ------------------------------------------------------------
-  function calendarCard(o) {
-    o = o || {};
-    var th = theme(), cv = canvas(), ph = o.phone && o.phone.kind === 'phone' ? o.phone : null;
-    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);
-    var width = +o.width || (ph ? ph.screen.width - 32 * s : 340 * s);
-    var x = o.x !== undefined ? +o.x : (ph ? ph.screen.x : cv.width / 2);
-    var events = (o.events || [{ time: '10:00', title: 'Launch review' }, { time: '13:30', title: 'Design sync' }]).slice(0, 5);
-    var pad = 18 * s, rowH = 46 * s, headH = 74 * s;
-    var h = pad + headH + events.length * rowH + pad * 0.6;
-    var top = o.y !== undefined ? +o.y - h / 2 : (ph ? ph.screen.top + 300 * s : cv.height / 2 - h / 2);
-    var dark = !!o.dark;
-    var bg = dark ? '#1c1c1e' : '#ffffff', fg = dark ? '#ffffff' : '#111111', sub = dark ? '#ebebf5' : '#3c3c43';
-    var left = x - width / 2 + pad;
-    var list = [];
-    rect(list, x, top + h / 2 + 4 * s, width, h, 24 * s * th.radius, '#000000', { opacity: 0.1 }); glyphAlpha(list, 0.1);
-    rect(list, x, top + h / 2, width, h, 24 * s * th.radius, bg, { opacity: o.glass ? 0.84 : 1 }); if (o.glass) glyphAlpha(list, 0.84);
-    text(list, String(o.day || 'Tuesday').toUpperCase(), left, top + pad + 8 * s, 13 * s, th.primary, 700, 'left', th.body);
-    text(list, String(o.date === undefined ? 9 : o.date), left, top + pad + 44 * s, 40 * s, fg, 500, 'left', th.heading);
-    if (o.month) { text(list, String(o.month), x + width / 2 - pad, top + pad + 8 * s, 13 * s, sub, 500, 'right', th.body, { opacity: 0.7 }); glyphAlpha(list, 0.7); }
-    var colours = [th.primary, th.accent, th.secondary];
-    for (var i = 0; i < events.length; i++) {
-      var ev = events[i] || {}, ry = top + pad + headH + i * rowH + rowH / 2;
-      var col = isColour(ev.color) ? ev.color : colours[i % colours.length];
-      rect(list, x, ry, width - pad * 2 + 4 * s, rowH - 8 * s, 8 * s * th.radius, col, { opacity: 0.14 }); glyphAlpha(list, 0.14);
-      rect(list, left + 2 * s, ry, 4 * s, rowH - 16 * s, 2 * s, col);
-      text(list, fit(ev.title || 'Event', width - pad * 2 - 90 * s, 15 * s, 600, th.body), left + 14 * s, ry - 7 * s, 15 * s, fg, 600, 'left', th.body);
-      text(list, String(ev.time || ''), left + 14 * s, ry + 10 * s, 12 * s, sub, 400, 'left', th.body, { opacity: 0.75 }); glyphAlpha(list, 0.75);
-    }
-    settle(list, o, o.rise === undefined ? (o.at ? 14 * s : 0) : +o.rise);
-    return { kind: 'calendarCard', ids: ids(list), x: x, top: top, bottom: top + h, height: h, width: width };
-  }
-
-  // ---------- ad card ---------------------------------------------------------------------
-  function adCard(o) {
-    o = o || {};
-    var th = theme(), cv = canvas(), ph = o.phone && o.phone.kind === 'phone' ? o.phone : null;
-    var s = ph ? ph.s : (+o.scale || Math.min(cv.width, cv.height) / 720);
-    var width = +o.width || (ph ? ph.screen.width - 24 * s : 360 * s);
-    var x = o.x !== undefined ? +o.x : (ph ? ph.screen.x : cv.width / 2);
-    var pad = 14 * s, headH = 52 * s, mediaH = width * (o.aspect === 'square' ? 1 : 0.75), footH = 64 * s;
-    var h = headH + mediaH + footH;
-    var top = o.y !== undefined ? +o.y - h / 2 : (ph ? ph.screen.top + 110 * s : cv.height / 2 - h / 2);
-    var dark = !!o.dark;
-    var bg = dark ? '#1c1c1e' : '#ffffff', fg = dark ? '#ffffff' : '#111111', sub = dark ? '#ebebf5' : '#3c3c43';
-    var name = o.brandName || th.name || 'Your Brand';
-    var list = [];
-    var R = 20 * s * th.radius;
-    rect(list, x, top + h / 2 + 5 * s, width, h, R, '#000000', { opacity: 0.12 }); glyphAlpha(list, 0.12);
-    rect(list, x, top + h / 2, width, h, R, bg);
-    var left = x - width / 2 + pad, av = 32 * s;
-    circle(list, left + av / 2, top + headH / 2, av / 2, th.primary);
-    text(list, (o.logo || name.charAt(0)).slice(0, 2), left + av / 2, top + headH / 2, 15 * s, ink(th.primary), 700, 'center', th.heading);
-    text(list, fit(name, width - av - pad * 3 - 20 * s, 15 * s, 600, th.body), left + av + 10 * s, top + headH / 2 - 8 * s, 15 * s, fg, 600, 'left', th.body);
-    text(list, o.sponsored === false ? (o.handle || '') : (o.sponsoredLabel || 'Sponsored'), left + av + 10 * s, top + headH / 2 + 9 * s, 12 * s, sub, 400, 'left', th.body, { opacity: 0.7 }); glyphAlpha(list, 0.7);
-    for (var d = 0; d < 3; d++) circle(list, x + width / 2 - pad - 4 * s - d * 6 * s, top + headH / 2, 1.8 * s, sub);
-    var mTop = top + headH, mStops = Array.isArray(o.media) ? o.media.filter(isColour) : (isColour(o.media) ? [o.media] : [th.primary, th.secondary]);
-    if (!mStops.length) mStops = [th.primary, th.secondary];
-    var mFill = mStops.length > 1 ? { gradient: { stops: mStops }, origin: [x - width / 2, mTop], destination: [x + width / 2, mTop + mediaH] } : mStops[0];
-    rect(list, x, mTop + mediaH / 2, width, mediaH, 0, mFill);
-    var mInk = ink(mStops.length > 1 ? mix(mStops[0], mStops[mStops.length - 1], 0.5) : mStops[0]);
-    var hl = wrap(o.headline || 'Meet the new way to work', width - pad * 4, 30 * s, 700, th.heading, 3);
-    var hlTop = mTop + mediaH / 2 - (hl.length - 1) * 30 * s * 0.6;
-    for (var l = 0; l < hl.length; l++) text(list, hl[l], x, hlTop + l * 30 * s * 1.2, 30 * s, mInk, 700, 'center', th.heading);
-    var fy = mTop + mediaH + footH / 2;
-    var cta = o.cta || 'Learn more';
-    var ctaFs = 14 * s, ctaW = measure(cta, ctaFs, 600, th.body) + 28 * s, ctaH = 34 * s;
-    var ctaX = x + width / 2 - pad - ctaW / 2;
-    text(list, fit(o.body || name, width - ctaW - pad * 3, 14 * s, 500, th.body), left, fy, 14 * s, fg, 500, 'left', th.body);
-    rect(list, ctaX, fy, ctaW, ctaH, Math.min(ctaH / 2, 10 * s * th.radius * 1.7), th.primary);
-    text(list, cta, ctaX, fy, ctaFs, ink(th.primary), 600, 'center', th.body);
-    settle(list, o, o.rise === undefined ? (o.at ? 18 * s : 0) : +o.rise);
-    return { kind: 'adCard', ids: ids(list), x: x, top: top, bottom: top + h, height: h, width: width };
-  }
-
-  // ---------- brand -------------------------------------------------------------------------
-  /** Set the brand the kit draws in: the brand kit's own shape { name, colors: { primary, secondary,
-   *  accent, background, text }, fonts: { heading, body }, radius: 'sharp'|'soft'|'round'|number }. */
-  function setBrand(kit) {
-    if (kit === null) { brand = null; return theme(); }
-    if (kit && typeof kit === 'object') {
-      var colours = kit.colors || kit.colours || {};
-      if (Array.isArray(colours)) colours = { primary: colours[0], secondary: colours[1], accent: colours[2] };
-      brand = { name: kit.name || '', colors: colours, fonts: kit.fonts || {}, radius: kit.radius };
-    }
-    return theme();
-  }
-  // A brand kit applied in code also becomes the kit's brand. Wrapped once, and the engine's own
-  // behaviour is kept exactly: the wrapper records and then calls through.
-  try {
-    if (P && typeof P.applyBrandKit === 'function' && !P.applyBrandKit.__uiKit) {
-      var orig = P.applyBrandKit;
-      var wrapped = function (kit) { try { if (kit && kit.colors && kit.colors.primary) setBrand(kit); } catch (e) {} return orig.apply(this, arguments); };
-      wrapped.__uiKit = true;
-      P.applyBrandKit = wrapped;
-    }
-  } catch (e) {}
-
-  return {
-    version: '1.0.0',
-    brand: setBrand,
-    theme: theme,
-    duration: function (D) { if (D !== undefined) { minDuration = +D || 0; play(); } return Math.max(minDuration, kitEnd > 0 ? kitEnd + HOLD : 0); },
-    phone: phone,
-    notifications: notifications,
-    notification: notification,
-    promptBox: promptBox,
-    toggle: toggle,
-    calendarCard: calendarCard,
-    adCard: adCard
-  };
-})();
-// --- END PINEPAPER UI KIT -----------------------------------------------------------
-`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
 /** Does this code call the kit without carrying it? */
 export function usesUiKit(code) {
     const src = String(code ?? "");