@portel/photon 1.20.1 → 1.22.0

package/dist/photons/canvas/ui/canvas.photon.html

@@ -0,0 +1,1493 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    background: var(--color-surface, #1a1b26);
+    color: var(--color-on-surface, #e6e6e6);
+    overflow: hidden;
+    height: 100vh;
+    user-select: none;
+  }
+
+  /* ── Canvas Surface ── */
+  .canvas-surface {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    cursor: default;
+  }
+
+  /* ── Grid dots background ── */
+  .canvas-surface::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    width: 4000px;
+    height: 4000px;
+    background-image: radial-gradient(circle, var(--color-outline-variant, #333) 1px, transparent 1px);
+    background-size: 24px 24px;
+    pointer-events: none;
+    opacity: 0.3;
+  }
+
+  /* ── Canvas Element ── */
+  .ce {
+    position: absolute;
+    background: var(--color-surface-container, #1e2030);
+    border: 1px solid var(--color-outline-variant, #333);
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transition: box-shadow 0.15s ease;
+  }
+
+  .ce:hover {
+    border-color: var(--color-primary, #6366f1);
+  }
+
+  .ce.selected {
+    border-color: var(--color-primary, #6366f1);
+    box-shadow: 0 0 0 2px var(--color-primary, #6366f1);
+  }
+
+  /* ── Title Bar ── */
+  .ce-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    background: var(--color-surface-container-high, #252738);
+    cursor: grab;
+    font-size: 11px;
+    color: var(--color-on-surface-muted, #999);
+    min-height: 28px;
+    flex-shrink: 0;
+  }
+
+  .ce-bar:active { cursor: grabbing; }
+
+  .ce-bar .ce-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ce-bar .ce-format {
+    opacity: 0.5;
+    font-size: 10px;
+    font-family: var(--font-family-mono, monospace);
+  }
+
+  .ce-bar .ce-delete {
+    opacity: 0;
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 1;
+    transition: opacity 0.1s;
+  }
+
+  .ce:hover .ce-delete,
+  .ce.selected .ce-delete { opacity: 0.6; }
+  .ce-delete:hover { opacity: 1 !important; background: var(--color-error, #ef4444); color: #fff; }
+
+  /* ── Body (rendered content) ── */
+  .ce-body {
+    flex: 1;
+    overflow: auto;
+    padding: 8px;
+    min-height: 0;
+  }
+
+  /* ── Resize Handles (all corners) ── */
+  .ce-resize {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    opacity: 0;
+    transition: opacity 0.1s;
+    z-index: 2;
+  }
+
+  .ce:hover .ce-resize,
+  .ce.selected .ce-resize { opacity: 1; }
+
+  .ce-resize::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 1px;
+  }
+
+  .ce-resize-se { right: 0; bottom: 0; cursor: nwse-resize; }
+  .ce-resize-se::after { right: 2px; bottom: 2px; border-right: 2px solid var(--color-primary, #6366f1); border-bottom: 2px solid var(--color-primary, #6366f1); }
+
+  .ce-resize-sw { left: 0; bottom: 0; cursor: nesw-resize; }
+  .ce-resize-sw::after { left: 2px; bottom: 2px; border-left: 2px solid var(--color-primary, #6366f1); border-bottom: 2px solid var(--color-primary, #6366f1); }
+
+  .ce-resize-ne { right: 0; top: 0; cursor: nesw-resize; }
+  .ce-resize-ne::after { right: 2px; top: 2px; border-right: 2px solid var(--color-primary, #6366f1); border-top: 2px solid var(--color-primary, #6366f1); }
+
+  .ce-resize-nw { left: 0; top: 0; cursor: nwse-resize; }
+  .ce-resize-nw::after { left: 2px; top: 2px; border-left: 2px solid var(--color-primary, #6366f1); border-top: 2px solid var(--color-primary, #6366f1); }
+
+  /* ── Insert Button ── */
+  .insert-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: var(--color-primary, #6366f1);
+    color: #fff;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    z-index: 10000;
+    transition: transform 0.15s;
+  }
+
+  .insert-btn:hover { transform: scale(1.1); }
+
+  /* ── Format Picker ── */
+  .format-picker {
+    position: fixed;
+    bottom: 80px;
+    right: 20px;
+    width: 260px;
+    max-height: 400px;
+    overflow-y: auto;
+    background: var(--color-surface-container, #1e2030);
+    border: 1px solid var(--color-outline-variant, #333);
+    border-radius: 12px;
+    padding: 8px;
+    z-index: 10001;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+    display: none;
+  }
+
+  .format-picker.open { display: block; }
+
+  .format-picker input {
+    width: 100%;
+    padding: 8px 10px;
+    background: var(--color-surface, #1a1b26);
+    border: 1px solid var(--color-outline-variant, #333);
+    border-radius: 6px;
+    color: var(--color-on-surface, #e6e6e6);
+    font-size: 13px;
+    margin-bottom: 6px;
+    outline: none;
+  }
+
+  .format-picker input:focus { border-color: var(--color-primary, #6366f1); }
+
+  .format-item {
+    padding: 6px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .format-item:hover { background: var(--color-surface-container-high, #252738); }
+
+  .format-item .fi-name { font-weight: 500; }
+  .format-item .fi-shape { font-size: 11px; opacity: 0.5; font-family: var(--font-family-mono, monospace); }
+
+  /* ── Locked Elements ── */
+  .ce.locked {
+    opacity: 0.85;
+  }
+
+  .ce.locked .ce-bar {
+    cursor: default;
+  }
+
+  .ce-lock {
+    font-size: 10px;
+    opacity: 0.6;
+  }
+
+  /* ── Agent Colors ── */
+  .ce[data-agent="ai"] .ce-bar { border-left: 3px solid #6366f1; }
+  .ce[data-agent="human"] .ce-bar { border-left: 3px solid #22c55e; }
+  .ce[data-agent="agent-1"] .ce-bar { border-left: 3px solid #f59e0b; }
+  .ce[data-agent="agent-2"] .ce-bar { border-left: 3px solid #ec4899; }
+  .ce[data-agent="agent-3"] .ce-bar { border-left: 3px solid #06b6d4; }
+
+  /* ── Turn Banner ── */
+  .turn-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 6px 16px;
+    font-size: 12px;
+    z-index: 10002;
+    transition: background 0.2s;
+  }
+
+  .turn-banner[data-turn="human"] {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+  }
+
+  .turn-banner[data-turn="ai"] {
+    background: rgba(99, 102, 241, 0.15);
+    color: #a5b4fc;
+  }
+
+  .turn-banner .turn-msg {
+    opacity: 0.7;
+    font-style: italic;
+  }
+
+  .turn-banner .turn-pass {
+    margin-left: 12px;
+    padding: 3px 10px;
+    border-radius: 4px;
+    border: 1px solid currentColor;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font-size: 11px;
+  }
+
+  .turn-banner .turn-pass:hover {
+    background: rgba(255,255,255,0.1);
+  }
+
+  /* ── Export Button ── */
+  .export-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 80px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: var(--color-surface-container-high, #252738);
+    color: var(--color-on-surface-muted, #999);
+    border: 1px solid var(--color-outline-variant, #333);
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    z-index: 10000;
+    transition: transform 0.15s, border-color 0.15s;
+  }
+
+  .export-btn:hover {
+    transform: scale(1.1);
+    border-color: var(--color-primary, #6366f1);
+    color: var(--color-primary, #6366f1);
+  }
+
+  /* ── Timeline Bar ── */
+  .timeline-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 36px;
+    background: var(--color-surface-container-high, #252738);
+    border-top: 1px solid var(--color-outline-variant, #333);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    z-index: 10003;
+    font-size: 11px;
+    color: var(--color-on-surface-muted, #999);
+    display: none; /* hidden until timeline has data */
+  }
+
+  .timeline-bar.visible { display: flex; }
+
+  .timeline-bar .tl-label {
+    white-space: nowrap;
+    font-weight: 500;
+    min-width: 50px;
+  }
+
+  .timeline-bar input[type="range"] {
+    flex: 1;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--color-outline-variant, #333);
+    border-radius: 2px;
+    outline: none;
+  }
+
+  .timeline-bar input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--color-primary, #6366f1);
+    cursor: pointer;
+  }
+
+  .timeline-bar .tl-action {
+    font-family: var(--font-family-mono, monospace);
+    font-size: 10px;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .timeline-bar .tl-btn {
+    padding: 2px 8px;
+    border-radius: 4px;
+    border: 1px solid var(--color-outline-variant, #333);
+    background: transparent;
+    color: var(--color-on-surface-muted, #999);
+    cursor: pointer;
+    font-size: 10px;
+    white-space: nowrap;
+  }
+
+  .timeline-bar .tl-btn:hover {
+    border-color: var(--color-primary, #6366f1);
+    color: var(--color-primary, #6366f1);
+  }
+
+  .timeline-bar .tl-btn.playing {
+    border-color: var(--color-primary, #6366f1);
+    color: var(--color-primary, #6366f1);
+    background: rgba(99, 102, 241, 0.15);
+  }
+
+  .tl-speed {
+    font-size: 10px;
+    opacity: 0.6;
+    cursor: pointer;
+    min-width: 30px;
+    text-align: center;
+  }
+
+  .tl-speed:hover { opacity: 1; }
+
+  /* ── Magic Move Transitions ── */
+  .ce.magic-move {
+    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+                top 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+                width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 0.4s ease;
+  }
+
+  .ce.magic-enter {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  .ce.magic-enter-active {
+    opacity: 1;
+    transform: scale(1);
+    transition: opacity 0.4s ease, transform 0.4s ease;
+  }
+
+  .ce.magic-exit {
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    pointer-events: none;
+  }
+
+  /* ── Empty State ── */
+  .empty-state {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    color: var(--color-on-surface-muted, #888);
+    pointer-events: none;
+  }
+
+  .empty-state .hint { font-size: 14px; opacity: 0.6; }
+</style>
+
+<div class="turn-banner" id="turnBanner" data-turn="human">
+  <span id="turnAgent">human's turn</span>
+  <span class="turn-msg" id="turnMsg"></span>
+  <button class="turn-pass" id="turnPass">Pass to AI</button>
+</div>
+
+<div class="canvas-surface" id="surface"></div>
+
+<div class="empty-state" id="empty">
+  <div style="font-size: 48px; opacity: 0.3;">+</div>
+  <div class="hint">Click + to add elements, or let AI place them</div>
+</div>
+
+<button class="export-btn" id="exportBtn" title="Export as photon">&#x2B07;</button>
+<button class="insert-btn" id="insertBtn" title="Add element">+</button>
+
+<div class="format-picker" id="formatPicker">
+  <input type="text" placeholder="Search formats..." id="formatSearch">
+  <div id="formatList"></div>
+</div>
+
+<div class="timeline-bar" id="timelineBar">
+  <button class="tl-btn" id="tlPlay" title="Play/Pause">&#9654;</button>
+  <span class="tl-speed" id="tlSpeed" title="Click to cycle speed">1x</span>
+  <span class="tl-label" id="tlLabel">0 / 0</span>
+  <input type="range" id="tlSlider" min="0" max="0" value="0">
+  <span class="tl-action" id="tlAction"></span>
+  <button class="tl-btn" id="tlRestore">Restore</button>
+  <button class="tl-btn" id="tlCheckpoint">Checkpoint</button>
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  var exportBtn = document.getElementById('exportBtn');
+  var surface = document.getElementById('surface');
+  var emptyEl = document.getElementById('empty');
+  var insertBtn = document.getElementById('insertBtn');
+  var formatPicker = document.getElementById('formatPicker');
+  var formatSearch = document.getElementById('formatSearch');
+  var formatList = document.getElementById('formatList');
+  var turnBanner = document.getElementById('turnBanner');
+  var turnAgentEl = document.getElementById('turnAgent');
+  var turnMsgEl = document.getElementById('turnMsg');
+  var turnPassBtn = document.getElementById('turnPass');
+
+  // ── Scene State (local mirror) ──
+  var elements = {};   // id → { ...CanvasElement }
+  var containers = {}; // id → HTMLElement
+  var selected = null; // currently selected element ID
+  var customComponents = {}; // name → { html, defaults }
+
+  // ── Custom HTML Rendering ──
+
+  function renderCustomHTML(container, html, css) {
+    var iframe = container.querySelector('iframe.ce-custom');
+    if (!iframe) {
+      iframe = document.createElement('iframe');
+      iframe.className = 'ce-custom';
+      iframe.style.cssText = 'width:100%;height:100%;border:none;background:transparent;';
+      iframe.setAttribute('sandbox', 'allow-scripts');
+      container.innerHTML = '';
+      container.appendChild(iframe);
+    }
+    var doc = iframe.contentDocument || iframe.contentWindow.document;
+    var styleBlock = css ? '<style>' + css + '</style>' : '';
+    doc.open();
+    doc.write('<!DOCTYPE html><html><head><meta charset="utf-8">' +
+      '<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;color:#e6e6e6;background:transparent;padding:4px;font-size:13px}</style>' +
+      styleBlock + '</head><body>' + html + '</body></html>');
+    doc.close();
+  }
+
+  function bindTemplate(tpl, data) {
+    if (!data || typeof data !== 'object') return tpl;
+    return tpl.replace(/\{\{(\w+)\}\}/g, function(_, key) {
+      return data[key] !== undefined ? String(data[key]) : '';
+    });
+  }
+  var currentTurn = { agent: 'human', message: '', since: 0 };
+
+  // ── Agent color map (deterministic for unknown agents) ──
+  var AGENT_COLORS = {
+    ai: '#6366f1',
+    human: '#22c55e',
+    'agent-1': '#f59e0b',
+    'agent-2': '#ec4899',
+    'agent-3': '#06b6d4',
+  };
+  var EXTRA_COLORS = ['#f97316', '#8b5cf6', '#14b8a6', '#e11d48', '#84cc16'];
+
+  function agentColor(name) {
+    if (AGENT_COLORS[name]) return AGENT_COLORS[name];
+    // Deterministic hash for unknown agents
+    var hash = 0;
+    for (var i = 0; i < (name || '').length; i++) hash = (hash * 31 + name.charCodeAt(i)) | 0;
+    return EXTRA_COLORS[Math.abs(hash) % EXTRA_COLORS.length];
+  }
+
+  // ── Turn Banner ──
+
+  function updateTurnBanner(turn) {
+    if (!turn) return;
+    currentTurn = turn;
+    var isHuman = turn.agent === 'human';
+    turnBanner.setAttribute('data-turn', isHuman ? 'human' : 'ai');
+    turnBanner.style.borderBottom = '2px solid ' + agentColor(turn.agent);
+    turnAgentEl.textContent = turn.agent + "'s turn";
+    turnMsgEl.textContent = turn.message || '';
+    turnPassBtn.textContent = isHuman ? 'Pass to AI' : 'Take control';
+  }
+
+  turnPassBtn.addEventListener('click', function() {
+    var next = currentTurn.agent === 'human' ? 'ai' : 'human';
+    window.photon.callTool('pass', { to: next });
+  });
+
+  // ── Rendering ──
+
+  function upsertElement(el) {
+    elements[el.id] = el;
+
+    var container = containers[el.id];
+    if (!container) {
+      container = createContainer(el);
+      containers[el.id] = container;
+      surface.appendChild(container);
+    }
+
+    // Update position/size
+    container.style.left = el.x + 'px';
+    container.style.top = el.y + 'px';
+    container.style.width = el.w + 'px';
+    container.style.height = el.h + 'px';
+    container.style.zIndex = el.z;
+
+    // Update label
+    var labelEl = container.querySelector('.ce-label');
+    if (labelEl) labelEl.textContent = el.label || el.id;
+
+    var formatEl = container.querySelector('.ce-format');
+    if (formatEl) formatEl.textContent = el.format;
+
+    // Agent color on title bar
+    var agent = el.createdBy || 'ai';
+    container.setAttribute('data-agent', agent);
+    var bar = container.querySelector('.ce-bar');
+    if (bar && !AGENT_COLORS[agent]) {
+      bar.style.borderLeftColor = agentColor(agent);
+    }
+
+    // Lock state
+    var lockEl = container.querySelector('.ce-lock');
+    if (el.locked) {
+      container.classList.add('locked');
+      if (lockEl) lockEl.textContent = '\uD83D\uDD12 ' + el.locked;
+    } else {
+      container.classList.remove('locked');
+      if (lockEl) lockEl.textContent = '';
+    }
+
+    // Re-render content
+    var body = container.querySelector('.ce-body');
+    if (body && el.data !== undefined && el.data !== null) {
+      if (el.format === '_custom' && el.data.html) {
+        // AI-generated custom HTML — render in sandboxed iframe
+        renderCustomHTML(body, el.data.html, el.data.css);
+      } else if (customComponents[el.format]) {
+        // Registered custom component — template with data binding
+        var tpl = customComponents[el.format].html;
+        var rendered = bindTemplate(tpl, el.data);
+        renderCustomHTML(body, rendered);
+      } else {
+        window.photon.render(body, el.data, el.format);
+      }
+    }
+
+    updateEmpty();
+  }
+
+  function removeElement(id) {
+    delete elements[id];
+    if (containers[id]) {
+      containers[id].remove();
+      delete containers[id];
+    }
+    if (selected === id) selected = null;
+    updateEmpty();
+  }
+
+  function clearAll() {
+    for (var id in containers) containers[id].remove();
+    elements = {};
+    containers = {};
+    selected = null;
+    updateEmpty();
+  }
+
+  function updateEmpty() {
+    emptyEl.style.display = Object.keys(elements).length === 0 ? 'flex' : 'none';
+  }
+
+  // ── Create Element Container ──
+
+  function createContainer(el) {
+    var div = document.createElement('div');
+    div.className = 'ce';
+    div.setAttribute('data-id', el.id);
+
+    // Title bar
+    var bar = document.createElement('div');
+    bar.className = 'ce-bar';
+
+    var label = document.createElement('span');
+    label.className = 'ce-label';
+    label.textContent = el.label || el.id;
+
+    var fmt = document.createElement('span');
+    fmt.className = 'ce-format';
+    fmt.textContent = el.format;
+
+    var lockIcon = document.createElement('span');
+    lockIcon.className = 'ce-lock';
+
+    var del = document.createElement('span');
+    del.className = 'ce-delete';
+    del.textContent = '\u00d7';
+    del.addEventListener('click', function(e) {
+      e.stopPropagation();
+      if (elements[el.id] && elements[el.id].locked) return; // locked — no delete
+      window.photon.callTool('remove', { id: el.id });
+    });
+
+    bar.appendChild(label);
+    bar.appendChild(lockIcon);
+    bar.appendChild(fmt);
+    bar.appendChild(del);
+
+    // Double-click label to rename
+    label.addEventListener('dblclick', function(e) {
+      e.stopPropagation();
+      var current = label.textContent;
+      var input = document.createElement('input');
+      input.type = 'text';
+      input.value = current;
+      input.style.cssText = 'background:transparent;border:1px solid var(--color-primary,#6366f1);color:inherit;font:inherit;width:100%;padding:0 2px;border-radius:3px;outline:none;';
+      label.textContent = '';
+      label.appendChild(input);
+      input.focus();
+      input.select();
+
+      function commit() {
+        var val = input.value.trim() || current;
+        label.textContent = val;
+        if (val !== current) {
+          window.photon.callTool('put', { id: el.id, label: val });
+        }
+      }
+      input.addEventListener('blur', commit);
+      input.addEventListener('keydown', function(ev) {
+        if (ev.key === 'Enter') { ev.preventDefault(); input.blur(); }
+        if (ev.key === 'Escape') { input.value = current; input.blur(); }
+      });
+    });
+
+    // Body
+    var body = document.createElement('div');
+    body.className = 'ce-body';
+
+    // Resize handles (all 4 corners)
+    var corners = ['se', 'sw', 'ne', 'nw'];
+    var resizeHandles = {};
+    for (var ci = 0; ci < corners.length; ci++) {
+      var rh = document.createElement('div');
+      rh.className = 'ce-resize ce-resize-' + corners[ci];
+      resizeHandles[corners[ci]] = rh;
+      div.appendChild(rh);
+    }
+
+    div.appendChild(bar);
+    div.appendChild(body);
+
+    // ── Selection ──
+    div.addEventListener('pointerdown', function() {
+      selectElement(el.id);
+    });
+
+    // ── Drag (title bar) ──
+    setupDrag(bar, el.id);
+
+    // ── Resize (all corners) ──
+    for (var ri = 0; ri < corners.length; ri++) {
+      setupCornerResize(resizeHandles[corners[ri]], el.id, corners[ri]);
+    }
+
+    return div;
+  }
+
+  function selectElement(id) {
+    // Deselect previous
+    if (selected && containers[selected]) {
+      containers[selected].classList.remove('selected');
+    }
+    selected = id;
+    if (containers[id]) {
+      containers[id].classList.add('selected');
+      // Bring to front
+      var maxZ = 0;
+      for (var k in elements) {
+        if (elements[k].z > maxZ) maxZ = elements[k].z;
+      }
+      if (elements[id] && elements[id].z <= maxZ) {
+        var newZ = maxZ + 1;
+        elements[id].z = newZ;
+        containers[id].style.zIndex = newZ;
+        // Sync z-order to server
+        window.photon.callTool('put', { id: id, z: newZ });
+      }
+    }
+  }
+
+  // ── Drag Logic ──
+
+  function setupDrag(handle, id) {
+    var dragging = false;
+    var startX, startY, origX, origY;
+
+    handle.addEventListener('pointerdown', function(e) {
+      if (e.button !== 0) return;
+      var el = elements[id];
+      if (el && el.locked) return; // locked — no drag
+      e.preventDefault();
+      e.stopPropagation();
+      pushUndo();
+      dragging = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      origX = el ? el.x : 0;
+      origY = el ? el.y : 0;
+      handle.setPointerCapture(e.pointerId);
+      selectElement(id);
+    });
+
+    handle.addEventListener('pointermove', function(e) {
+      if (!dragging) return;
+      var dx = e.clientX - startX;
+      var dy = e.clientY - startY;
+      var newX = Math.max(0, origX + dx);
+      var newY = Math.max(0, origY + dy);
+      var container = containers[id];
+      if (container) {
+        container.style.left = newX + 'px';
+        container.style.top = newY + 'px';
+      }
+    });
+
+    handle.addEventListener('pointerup', function(e) {
+      if (!dragging) return;
+      dragging = false;
+      var dx = e.clientX - startX;
+      var dy = e.clientY - startY;
+      var newX = Math.max(0, origX + dx);
+      var newY = Math.max(0, origY + dy);
+      // Sync to server
+      window.photon.callTool('put', { id: id, x: newX, y: newY });
+    });
+  }
+
+  // ── Resize Logic (all corners) ──
+
+  function setupCornerResize(handle, id, corner) {
+    var resizing = false;
+    var startX, startY, origX, origY, origW, origH;
+
+    handle.addEventListener('pointerdown', function(e) {
+      if (e.button !== 0) return;
+      var el = elements[id];
+      if (el && el.locked) return; // locked — no resize
+      e.preventDefault();
+      e.stopPropagation();
+      pushUndo();
+      resizing = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      var el = elements[id];
+      origX = el ? el.x : 0;
+      origY = el ? el.y : 0;
+      origW = el ? el.w : 300;
+      origH = el ? el.h : 200;
+      handle.setPointerCapture(e.pointerId);
+    });
+
+    handle.addEventListener('pointermove', function(e) {
+      if (!resizing) return;
+      var dx = e.clientX - startX;
+      var dy = e.clientY - startY;
+      var result = calcCornerResize(corner, origX, origY, origW, origH, dx, dy);
+      var container = containers[id];
+      if (container) {
+        container.style.left = result.x + 'px';
+        container.style.top = result.y + 'px';
+        container.style.width = result.w + 'px';
+        container.style.height = result.h + 'px';
+      }
+    });
+
+    handle.addEventListener('pointerup', function(e) {
+      if (!resizing) return;
+      resizing = false;
+      var dx = e.clientX - startX;
+      var dy = e.clientY - startY;
+      var result = calcCornerResize(corner, origX, origY, origW, origH, dx, dy);
+      window.photon.callTool('put', { id: id, x: result.x, y: result.y, w: result.w, h: result.h });
+    });
+  }
+
+  function calcCornerResize(corner, ox, oy, ow, oh, dx, dy) {
+    var x = ox, y = oy, w = ow, h = oh;
+    if (corner === 'se') {
+      w = Math.max(120, ow + dx);
+      h = Math.max(80, oh + dy);
+    } else if (corner === 'sw') {
+      w = Math.max(120, ow - dx);
+      h = Math.max(80, oh + dy);
+      x = ox + ow - w;
+    } else if (corner === 'ne') {
+      w = Math.max(120, ow + dx);
+      h = Math.max(80, oh - dy);
+      y = oy + oh - h;
+    } else if (corner === 'nw') {
+      w = Math.max(120, ow - dx);
+      h = Math.max(80, oh - dy);
+      x = ox + ow - w;
+      y = oy + oh - h;
+    }
+    return { x: Math.max(0, x), y: Math.max(0, y), w: w, h: h };
+  }
+
+  // ── Deselect + Pan on surface click ──
+  var panning = false;
+  var panStartX, panStartY, panScrollX, panScrollY;
+
+  surface.addEventListener('pointerdown', function(e) {
+    if (e.target === surface || e.target === emptyEl || e.target.closest('.empty-state')) {
+      if (selected && containers[selected]) {
+        containers[selected].classList.remove('selected');
+      }
+      selected = null;
+
+      // Start panning
+      if (e.button === 0) {
+        panning = true;
+        panStartX = e.clientX;
+        panStartY = e.clientY;
+        panScrollX = surface.scrollLeft;
+        panScrollY = surface.scrollTop;
+        surface.style.cursor = 'grabbing';
+        surface.setPointerCapture(e.pointerId);
+      }
+    }
+  });
+
+  surface.addEventListener('pointermove', function(e) {
+    if (!panning) return;
+    var dx = e.clientX - panStartX;
+    var dy = e.clientY - panStartY;
+    surface.scrollLeft = panScrollX - dx;
+    surface.scrollTop = panScrollY - dy;
+  });
+
+  surface.addEventListener('pointerup', function() {
+    if (panning) {
+      panning = false;
+      surface.style.cursor = 'default';
+    }
+  });
+
+  // ── Undo/Redo History ──
+  var undoStack = [];  // snapshots of scene state
+  var redoStack = [];
+  var MAX_HISTORY = 50;
+
+  function snapshotScene() {
+    return JSON.stringify(elements);
+  }
+
+  function pushUndo() {
+    undoStack.push(snapshotScene());
+    if (undoStack.length > MAX_HISTORY) undoStack.shift();
+    redoStack = []; // new action clears redo
+  }
+
+  function restoreSnapshot(snapshot) {
+    var state = JSON.parse(snapshot);
+    // Remove elements not in snapshot
+    for (var id in elements) {
+      if (!(id in state)) {
+        window.photon.callTool('remove', { id: id });
+      }
+    }
+    // Upsert elements from snapshot
+    for (var sid in state) {
+      var el = state[sid];
+      window.photon.callTool('put', el);
+    }
+  }
+
+  // ── Keyboard shortcuts ──
+  document.addEventListener('keydown', function(e) {
+    // Don't handle if typing in an input
+    if (document.activeElement && document.activeElement.tagName === 'INPUT') return;
+
+    // Delete/Backspace — remove selected (unless locked)
+    if ((e.key === 'Delete' || e.key === 'Backspace') && selected) {
+      if (elements[selected] && elements[selected].locked) return;
+      pushUndo();
+      window.photon.callTool('remove', { id: selected });
+      return;
+    }
+
+    // Ctrl/Cmd+Z — Undo
+    if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+      e.preventDefault();
+      if (undoStack.length === 0) return;
+      redoStack.push(snapshotScene());
+      restoreSnapshot(undoStack.pop());
+      return;
+    }
+
+    // Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y — Redo
+    if ((e.ctrlKey || e.metaKey) && (e.key === 'Z' || e.key === 'y')) {
+      e.preventDefault();
+      if (redoStack.length === 0) return;
+      undoStack.push(snapshotScene());
+      restoreSnapshot(redoStack.pop());
+      return;
+    }
+  });
+
+  // ── Format Picker ──
+
+  var pickerOpen = false;
+
+  insertBtn.addEventListener('click', function(e) {
+    e.stopPropagation();
+    pickerOpen = !pickerOpen;
+    formatPicker.classList.toggle('open', pickerOpen);
+    if (pickerOpen) {
+      formatSearch.value = '';
+      renderFormatList('');
+      formatSearch.focus();
+    }
+  });
+
+  document.addEventListener('pointerdown', function(e) {
+    if (pickerOpen && !formatPicker.contains(e.target) && e.target !== insertBtn) {
+      pickerOpen = false;
+      formatPicker.classList.remove('open');
+    }
+  });
+
+  formatSearch.addEventListener('input', function() {
+    renderFormatList(formatSearch.value.toLowerCase());
+  });
+
+  function renderFormatList(filter) {
+    var formats = window.photon.formats || [];
+    var catalog = {};
+    // formats might be array of names or object catalog
+    if (Array.isArray(formats)) {
+      formats.forEach(function(f) { catalog[f] = { data: '' }; });
+    } else {
+      catalog = formats;
+    }
+
+    var html = '';
+    var keys = Object.keys(catalog).sort();
+    for (var i = 0; i < keys.length; i++) {
+      var name = keys[i];
+      if (filter && name.indexOf(filter) === -1) continue;
+      var spec = catalog[name] || {};
+      html += '<div class="format-item" data-format="' + name + '">'
+        + '<span class="fi-name">' + name + '</span>'
+        + '<span class="fi-shape">' + (spec.data || '').substring(0, 30) + '</span>'
+        + '</div>';
+    }
+    formatList.innerHTML = html || '<div style="padding:8px;opacity:0.5">No formats found</div>';
+
+    // Bind clicks
+    var items = formatList.querySelectorAll('.format-item');
+    for (var j = 0; j < items.length; j++) {
+      items[j].addEventListener('click', function() {
+        var fmt = this.getAttribute('data-format');
+        insertElement(fmt);
+        pickerOpen = false;
+        formatPicker.classList.remove('open');
+      });
+    }
+  }
+
+  function insertElement(format) {
+    pushUndo();
+    // Place near center of visible area
+    var scrollX = surface.scrollLeft || 0;
+    var scrollY = surface.scrollTop || 0;
+    var viewW = surface.clientWidth;
+    var viewH = surface.clientHeight;
+    var x = scrollX + Math.round(viewW / 2) - 150 + Math.round(Math.random() * 40 - 20);
+    var y = scrollY + Math.round(viewH / 2) - 100 + Math.round(Math.random() * 40 - 20);
+
+    var id = 'el_' + Date.now();
+
+    // Get example data from catalog
+    var catalog = window.photon.formats || {};
+    var spec = catalog[format];
+    var data = spec && spec.example ? spec.example : null;
+
+    window.photon.callTool('put', {
+      id: id,
+      format: format,
+      x: x,
+      y: y,
+      w: 300,
+      h: 200,
+      data: data,
+      label: format,
+    });
+  }
+
+  // ── Event Subscriptions ──
+
+  // Initial scene from main() result
+  window.photon.onResult(function(result) {
+    if (result && result.elements) {
+      for (var i = 0; i < result.elements.length; i++) {
+        upsertElement(result.elements[i]);
+      }
+    }
+    if (result && result.turn) {
+      updateTurnBanner(result.turn);
+    }
+    updateEmpty();
+  });
+
+  // Live updates from AI or other agents
+  window.photon.onEmit(function(event) {
+    if (!event) return;
+    if (event.emit === 'scene:put' && event.element) {
+      upsertElement(event.element);
+    } else if (event.emit === 'scene:remove' && event.id) {
+      removeElement(event.id);
+    } else if (event.emit === 'scene:clear') {
+      clearAll();
+    } else if (event.emit === 'turn:change' && event.turn) {
+      updateTurnBanner(event.turn);
+    } else if (event.emit === 'scene:restore' && event.elements) {
+      // Full scene replacement from timeline restore
+      clearAll();
+      for (var ri = 0; ri < event.elements.length; ri++) {
+        upsertElement(event.elements[ri]);
+      }
+      loadTimeline();
+    } else if (event.emit === 'canvas:screenshot-request') {
+      captureScreenshot();
+    } else if (event.emit === 'component:registered' && event.name) {
+      customComponents[event.name] = { html: event.html, defaults: event.defaults };
+    } else if (event.emit === 'timeline:checkpoint') {
+      loadTimeline();
+    }
+  });
+
+  // ── Screenshot Capture ──
+
+  function captureScreenshot() {
+    // Calculate bounds of all elements
+    var minX = Infinity, minY = Infinity, maxX = 0, maxY = 0;
+    for (var id in elements) {
+      var el = elements[id];
+      minX = Math.min(minX, el.x);
+      minY = Math.min(minY, el.y);
+      maxX = Math.max(maxX, el.x + el.w);
+      maxY = Math.max(maxY, el.y + el.h);
+    }
+    if (minX === Infinity) return; // empty canvas
+
+    var pad = 20;
+    var w = maxX - minX + pad * 2;
+    var h = maxY - minY + pad * 2;
+
+    var canvas = document.createElement('canvas');
+    canvas.width = w;
+    canvas.height = h;
+    var ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Background
+    ctx.fillStyle = '#1a1b26';
+    ctx.fillRect(0, 0, w, h);
+
+    // Draw each element as a simple rectangle with label
+    var sorted = Object.values(elements).sort(function(a, b) { return a.z - b.z; });
+    for (var i = 0; i < sorted.length; i++) {
+      var el = sorted[i];
+      var ex = el.x - minX + pad;
+      var ey = el.y - minY + pad;
+
+      // Card background
+      ctx.fillStyle = '#1e2030';
+      ctx.fillRect(ex, ey, el.w, el.h);
+
+      // Agent color bar
+      var color = agentColor(el.createdBy || 'ai');
+      ctx.fillStyle = color;
+      ctx.fillRect(ex, ey, 3, el.h);
+
+      // Title bar
+      ctx.fillStyle = '#252738';
+      ctx.fillRect(ex, ey, el.w, 24);
+
+      // Label text
+      ctx.fillStyle = '#e6e6e6';
+      ctx.font = '11px sans-serif';
+      ctx.fillText((el.label || el.id).substring(0, 30), ex + 8, ey + 16);
+
+      // Format badge
+      ctx.fillStyle = '#666';
+      ctx.font = '9px monospace';
+      ctx.fillText(el.format, ex + el.w - ctx.measureText(el.format).width - 8, ey + 16);
+
+      // Border
+      ctx.strokeStyle = '#333';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(ex, ey, el.w, el.h);
+
+      // Lock icon
+      if (el.locked) {
+        ctx.fillStyle = '#f59e0b';
+        ctx.font = '10px sans-serif';
+        ctx.fillText('\uD83D\uDD12', ex + el.w - 18, ey + el.h - 6);
+      }
+    }
+
+    var dataUrl = canvas.toDataURL('image/png');
+    window.photon.callTool('capture', { dataUrl: dataUrl });
+  }
+
+  // ── Export Button ──
+
+  exportBtn.addEventListener('click', function(e) {
+    e.stopPropagation();
+    var count = Object.keys(elements).length;
+    if (count === 0) return;
+
+    // Inline name input
+    var name = 'my-dashboard';
+    var input = document.createElement('input');
+    input.type = 'text';
+    input.value = name;
+    input.placeholder = 'photon name...';
+    input.style.cssText = 'position:fixed;bottom:76px;right:80px;width:200px;padding:8px 10px;background:var(--color-surface-container,#1e2030);border:1px solid var(--color-primary,#6366f1);border-radius:6px;color:var(--color-on-surface,#e6e6e6);font-size:13px;z-index:10002;outline:none;';
+    document.body.appendChild(input);
+    input.focus();
+    input.select();
+
+    function doExport() {
+      var val = input.value.trim() || name;
+      input.remove();
+      window.photon.callTool('export', { name: val }).then(function(result) {
+        if (result && result.files) {
+          // Download the files as a JSON blob
+          var blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
+          var url = URL.createObjectURL(blob);
+          var a = document.createElement('a');
+          a.href = url;
+          a.download = val + '.photon.json';
+          a.click();
+          URL.revokeObjectURL(url);
+        }
+      }).catch(function() {});
+    }
+
+    input.addEventListener('keydown', function(ev) {
+      if (ev.key === 'Enter') { ev.preventDefault(); doExport(); }
+      if (ev.key === 'Escape') { input.remove(); }
+    });
+    input.addEventListener('blur', function() {
+      setTimeout(function() { if (document.body.contains(input)) input.remove(); }, 200);
+    });
+  });
+
+  // ── Timeline Scrubber + Magic Move Playback ──
+
+  var timelineBar = document.getElementById('timelineBar');
+  var tlPlay = document.getElementById('tlPlay');
+  var tlSpeedEl = document.getElementById('tlSpeed');
+  var tlSlider = document.getElementById('tlSlider');
+  var tlLabel = document.getElementById('tlLabel');
+  var tlAction = document.getElementById('tlAction');
+  var tlRestore = document.getElementById('tlRestore');
+  var tlCheckpoint = document.getElementById('tlCheckpoint');
+
+  var timelineData = []; // from history()
+  var playbackFrames = null; // from playback() — full scene data per frame
+  var isPlaying = false;
+  var playTimer = null;
+  var playSpeed = 1; // 0.5x, 1x, 2x, 4x
+  var SPEEDS = [0.5, 1, 2, 4];
+  var speedIdx = 1;
+  var FRAME_DURATION = 1200; // ms per frame at 1x
+
+  function loadTimeline() {
+    window.photon.callTool('history', {}).then(function(result) {
+      if (!Array.isArray(result) || result.length === 0) return;
+      timelineData = result;
+      timelineBar.classList.add('visible');
+      tlSlider.max = String(result.length - 1);
+      tlSlider.value = String(result.length - 1);
+      updateTimelineLabel(result.length - 1);
+    }).catch(function() {});
+  }
+
+  function updateTimelineLabel(idx) {
+    var entry = timelineData[idx];
+    if (!entry) return;
+    tlLabel.textContent = (idx + 1) + ' / ' + timelineData.length;
+    tlAction.textContent = entry.action + ' (' + entry.elements + ' els)';
+  }
+
+  tlSlider.addEventListener('input', function() {
+    var idx = parseInt(tlSlider.value, 10);
+    updateTimelineLabel(idx);
+    if (playbackFrames && playbackFrames[idx]) {
+      magicMoveToFrame(playbackFrames[idx].elements);
+    }
+  });
+
+  // ── Play/Pause ──
+
+  tlPlay.addEventListener('click', function() {
+    if (isPlaying) {
+      stopPlayback();
+    } else {
+      startPlayback();
+    }
+  });
+
+  function startPlayback() {
+    // Load full playback data first
+    window.photon.callTool('playback', {}).then(function(frames) {
+      if (!Array.isArray(frames) || frames.length < 2) return;
+      playbackFrames = frames;
+      isPlaying = true;
+      tlPlay.innerHTML = '&#9646;&#9646;'; // pause icon
+      tlPlay.classList.add('playing');
+
+      // Start from beginning or current position
+      var startIdx = parseInt(tlSlider.value, 10);
+      if (startIdx >= frames.length - 1) startIdx = 0;
+      tlSlider.value = String(startIdx);
+
+      advanceFrame();
+    }).catch(function() {});
+  }
+
+  function stopPlayback() {
+    isPlaying = false;
+    if (playTimer) clearTimeout(playTimer);
+    playTimer = null;
+    tlPlay.innerHTML = '&#9654;'; // play icon
+    tlPlay.classList.remove('playing');
+  }
+
+  function advanceFrame() {
+    if (!isPlaying || !playbackFrames) return;
+    var idx = parseInt(tlSlider.value, 10);
+    if (idx >= playbackFrames.length - 1) {
+      stopPlayback();
+      return;
+    }
+
+    var nextIdx = idx + 1;
+    tlSlider.value = String(nextIdx);
+    updateTimelineLabel(nextIdx);
+
+    // Magic Move to next frame
+    magicMoveToFrame(playbackFrames[nextIdx].elements);
+
+    // Schedule next frame
+    var delay = Math.round(FRAME_DURATION / playSpeed);
+    playTimer = setTimeout(advanceFrame, delay);
+  }
+
+  // ── Speed Control ──
+
+  tlSpeedEl.addEventListener('click', function() {
+    speedIdx = (speedIdx + 1) % SPEEDS.length;
+    playSpeed = SPEEDS[speedIdx];
+    tlSpeedEl.textContent = playSpeed + 'x';
+  });
+
+  // ── Magic Move Engine ──
+
+  function magicMoveToFrame(frameElements) {
+    var frameMap = {};
+    for (var i = 0; i < frameElements.length; i++) {
+      frameMap[frameElements[i].id] = frameElements[i];
+    }
+
+    // Enable transitions on all existing elements
+    for (var id in containers) {
+      containers[id].classList.add('magic-move');
+    }
+
+    // Elements that exist in frame but not on canvas → appear
+    for (var fid in frameMap) {
+      var fel = frameMap[fid];
+      if (!containers[fid]) {
+        // Create container with enter animation
+        var container = createContainer(fel);
+        container.classList.add('magic-move', 'magic-enter');
+        containers[fid] = container;
+        surface.appendChild(container);
+        // Position it
+        container.style.left = fel.x + 'px';
+        container.style.top = fel.y + 'px';
+        container.style.width = fel.w + 'px';
+        container.style.height = fel.h + 'px';
+        container.style.zIndex = fel.z;
+        // Trigger enter animation
+        requestAnimationFrame(function(c) {
+          return function() {
+            c.classList.remove('magic-enter');
+            c.classList.add('magic-enter-active');
+          };
+        }(container));
+      }
+      // Update element data + position (CSS transition handles the animation)
+      elements[fid] = fel;
+      upsertElement(fel);
+    }
+
+    // Elements on canvas but not in frame → exit
+    for (var eid in elements) {
+      if (!(eid in frameMap)) {
+        var exitContainer = containers[eid];
+        if (exitContainer) {
+          exitContainer.classList.add('magic-exit');
+          // Remove after animation
+          (function(removeId, removeContainer) {
+            setTimeout(function() {
+              delete elements[removeId];
+              removeContainer.remove();
+              delete containers[removeId];
+            }, 350);
+          })(eid, exitContainer);
+        } else {
+          delete elements[eid];
+        }
+      }
+    }
+
+    updateEmpty();
+
+    // Clean up transition classes after animation completes
+    setTimeout(function() {
+      for (var cid in containers) {
+        containers[cid].classList.remove('magic-move', 'magic-enter-active');
+      }
+    }, 700);
+  }
+
+  // ── Restore ──
+
+  tlRestore.addEventListener('click', function() {
+    var idx = parseInt(tlSlider.value, 10);
+    stopPlayback();
+    window.photon.callTool('restore', { index: idx }).then(function() {
+      loadTimeline();
+    }).catch(function() {});
+  });
+
+  // ── Checkpoint ──
+
+  tlCheckpoint.addEventListener('click', function() {
+    var label = 'manual checkpoint';
+    var input = document.createElement('input');
+    input.type = 'text';
+    input.value = label;
+    input.placeholder = 'Checkpoint name...';
+    input.style.cssText = 'position:fixed;bottom:44px;right:12px;width:200px;padding:6px 8px;background:var(--color-surface-container,#1e2030);border:1px solid var(--color-primary,#6366f1);border-radius:4px;color:var(--color-on-surface,#e6e6e6);font-size:12px;z-index:10004;outline:none;';
+    document.body.appendChild(input);
+    input.focus();
+    input.select();
+
+    function doCheckpoint() {
+      var val = input.value.trim() || label;
+      input.remove();
+      window.photon.callTool('checkpoint', { label: val }).then(function() {
+        loadTimeline();
+      }).catch(function() {});
+    }
+
+    input.addEventListener('keydown', function(ev) {
+      if (ev.key === 'Enter') { ev.preventDefault(); doCheckpoint(); }
+      if (ev.key === 'Escape') { input.remove(); }
+    });
+    input.addEventListener('blur', function() {
+      setTimeout(function() { if (document.body.contains(input)) input.remove(); }, 200);
+    });
+  });
+
+  // ── Spacebar to play/pause ──
+  document.addEventListener('keydown', function(e) {
+    if (e.key === ' ' && document.activeElement && document.activeElement.tagName !== 'INPUT') {
+      if (timelineData.length > 1) {
+        e.preventDefault();
+        if (isPlaying) stopPlayback();
+        else startPlayback();
+      }
+    }
+  });
+
+  // Load registered custom components
+  setTimeout(function() {
+    window.photon.callTool('listComponents', {}).then(function(result) {
+      if (Array.isArray(result)) {
+        for (var i = 0; i < result.length; i++) {
+          var c = result[i];
+          if (c.name && c.html) {
+            customComponents[c.name] = { html: c.html, defaults: c.defaults || {} };
+          }
+        }
+      }
+    }).catch(function() {});
+  }, 100);
+
+  // Reconcile on load — fetch latest scene in case events were missed
+  setTimeout(function() {
+    window.photon.callTool('scene', {}).then(function(result) {
+      if (result && result.elements) {
+        // Clear and re-render from server truth
+        for (var id in containers) {
+          if (!result.elements.find(function(e) { return e.id === id; })) {
+            removeElement(id);
+          }
+        }
+        for (var i = 0; i < result.elements.length; i++) {
+          upsertElement(result.elements[i]);
+        }
+      }
+    }).catch(function() {});
+  }, 500);
+
+  // Load timeline after scene is ready
+  setTimeout(function() { loadTimeline(); }, 800);
+
+})();
+</script>