/* @component-map
 * App — Main container, handles layout and view switching
 * Header — App title and user info pill
 * Stats — Displays open/in-progress/completed counts
 * Filters — Filter buttons for ticket status and priority
 * AddTicket — Form to create new tickets
 * TicketList — Renders filtered and sorted ticket cards
 * TicketCard — Individual ticket with check, status menu, edit, delete
 * EditModal — Modal overlay for editing a ticket
 * ActivityLog — Recent activity log section
 * @end-component-map */

import { useAuth, useCollection, useState } from '@deplixo/sdk';
import { Header } from './components/Header.jsx';
import { Stats } from './components/Stats.jsx';
import { Filters } from './components/Filters.jsx';
import { AddTicket } from './components/AddTicket.jsx';
import { TicketList } from './components/TicketList.jsx';
import { EditModal } from './components/EditModal.jsx';
import { ActivityLog } from './components/ActivityLog.jsx';

function App() {
  const { user, loading: authLoading } = useAuth();
  const { items: tickets, loading: ticketsLoading, add: addTicketItem, update: updateTicket, remove: removeTicket } = useCollection('tickets');
  const { items: activity, loading: activityLoading, add: addActivity } = useCollection('activity');
  const [currentFilter, setCurrentFilter] = useState('all');
  const [editingId, setEditingId] = useState(null);

  if (authLoading || !user) return <div className="loading">Loading...</div>;

  return (
    <div className="app">
      <Header user={user} /><script>!function(){var w=console.warn;console.warn=function(){if(typeof arguments[0]==="string"&&arguments[0].indexOf("in-browser Babel transformer")!==-1)return;w.apply(console,arguments)}}()</script><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="theme-color" content="#5046e5"><meta property="og:title" content="duotasks"><meta property="og:description" content="A shared todo app for two friends. Create, update, and complete tickets with full accountability — track who did what, when."><meta property="og:image" content="https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b/preview.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:url" content="https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b/"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="duotasks"><meta name="twitter:description" content="A shared todo app for two friends. Create, update, and complete tickets with full accountability — track who did what, when."><meta name="twitter:image" content="https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b/preview.png"><meta name="description" content="A shared todo app for two friends. Create, update, and complete tickets with full accountability — track who did what, when."><meta name="robots" content="noindex, nofollow"><link rel="deplixo-source" href="/75743060-3551-4061-ad49-500e66b5264b/source"><link rel="manifest" href="https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b/manifest.json"><link rel="icon" type="image/png" sizes="32x32" href="https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b/icon-32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b/icon-16.png"><link rel="apple-touch-icon" sizes="180x180" href="https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b/icon-180.png"><script>window.__deplixo_mode="private";</script><script defer src="https://analytics.brightwingsystems.com/script.js" data-website-id="599e20a5-6a35-4ea8-bfce-0af71a6caa66" data-tag="75743060-3551-4061-ad49-500e66b5264b"></script><script>
(function () {
  var appId = "75743060-3551-4061-ad49-500e66b5264b";
  var apiBase = "/api/v1";

  // ═══════════════════════════════════════════════════════════════════════════════
  // Initialization / Mobile Fixes / Cookies
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Mobile viewport lock — prevent iOS auto-zoom on inputs ────── */
  var _mobileStyle = document.createElement('style');
  _mobileStyle.textContent = '@supports (-webkit-touch-callout:none){input,textarea,select{font-size:max(16px,1em)!important}}body{touch-action:manipulation;-webkit-text-size-adjust:100%;}';
  document.head.appendChild(_mobileStyle);

  /* ── Cookie helpers ─────────────────────────────────────────────── */
  function getCookie(name) {
    var match = document.cookie.match(new RegExp("(?:^|; )" + name + "=([^;]*)"));
    return match ? decodeURIComponent(match[1]) : null;
  }

  function setCookie(name, value) {
    document.cookie =
      name +
      "=" +
      encodeURIComponent(value) +
      ";path=/;max-age=63072000;SameSite=Lax";
  }

  // ═══════════════════════════════════════════════════════════════════════════════
  // Workspace marker
  // ═══════════════════════════════════════════════════════════════════════════════
  // The owner-only workspace iframe (and the popped-out workspace tab)
  // loads with ?ws=1 in the URL. Sticky via sessionStorage so SPA
  // navigations inside the iframe don't lose the flag. Every API call
  // out of this page tags the request with X-Deplixo-Workspace: 1 so
  // the server can route reads/writes to the shadow DB only when the
  // request actually came from a workspace context — the per-app
  // cookie alone is not specific enough (it travels with every tab on
  // the origin, including a regular top-level visit to the bare app
  // URL by the owner).
  var _wsKey = "bw_ws_" + appId;
  var _isWorkspace = /[?&]ws=1\b/.test(window.location.search);
  try {
    if (_isWorkspace) {
      sessionStorage.setItem(_wsKey, "1");
    } else if (sessionStorage.getItem(_wsKey) === "1") {
      _isWorkspace = true;
    }
  } catch (_) { /* sessionStorage may be unavailable */ }

  if (_isWorkspace) {
    var _origFetch = window.fetch.bind(window);
    window.fetch = function (input, init) {
      var url = typeof input === "string" ? input : (input && input.url) || "";
      // Only tag same-origin Deplixo API calls. Don't leak the header
      // to third-party endpoints the app may fetch directly.
      var isApi =
        url.indexOf("/api/v1/") === 0 ||
        url.indexOf(window.location.origin + "/api/v1/") === 0;
      if (!isApi) return _origFetch(input, init);
      init = init || {};
      var hdrs = init.headers;
      if (hdrs instanceof Headers) {
        hdrs.set("X-Deplixo-Workspace", "1");
      } else if (Array.isArray(hdrs)) {
        hdrs.push(["X-Deplixo-Workspace", "1"]);
      } else {
        init.headers = Object.assign({}, hdrs || {}, { "X-Deplixo-Workspace": "1" });
      }
      return _origFetch(input, init);
    };
  }

  // ═══════════════════════════════════════════════════════════════════════════════
  // Visitor Identity
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Visitor ID (global cookie) ─────────────────────────────────── */
  var visitorId = getCookie("bw_visitor_id");
  if (!visitorId) {
    visitorId = (crypto.randomUUID ? crypto.randomUUID() : ("10000000-1000-4000-8000-100000000000").replace(/[018]/g, function(c) { return (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16); }));
    setCookie("bw_visitor_id", visitorId);
  }

  /* ── State ──────────────────────────────────────────────────────── */
  var visitorName = null;
  var identityPromise = null;
  var _sse = null;
  var _listeners = [];
  var _readyResolve;
  var _readyPromise = new Promise(function (r) {
    _readyResolve = r;
  });

  window.deplixo = window.deplixo || {};
  window.deplixo.user = {
    id: visitorId, name: null,
    firstName: null, lastName: null, username: null,
    displayName: null,
  };
  window.deplixo.ready = _readyPromise;

  // ═══════════════════════════════════════════════════════════════════════════════
  // Auto-fill Name Inputs
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Auto-fill LLM-generated name inputs after identity is ready ── */
  _readyPromise.then(function () {
    // Wait for DOM to be ready too (LLM code may not have rendered yet)
    var _fillNames = function () {
      var u = window.deplixo.user;
      if (!u.name) return;
      // Match inputs by placeholder or name/id attributes
      var namePatterns = /^(name|full.?name|display.?name|your.?name|user.?name|nick.?name)$/i;
      var firstPatterns = /^(first.?name|fname|given.?name)$/i;
      var lastPatterns = /^(last.?name|lname|surname|family.?name)$/i;
      var userPatterns = /^(username|user.?id|handle)$/i;
      // IDs/names that look like person-name fields should NOT be auto-filled
      // if they're prefixed with a non-person noun (e.g. choreName, taskName, itemName)
      var nonPersonPrefix = /^(chore|task|item|product|project|recipe|event|pet|team|group|company|room|channel|board|game|playlist|song|movie|book|place|city|store|brand|category|tag|label|title|subject|topic|goal|habit|workout|exercise|meal|dish|ingredient|plant|card|ticket|order)/i;

      document.querySelectorAll('input[type="text"], input:not([type])').forEach(function (el) {
        if (el.value) return; // Don't overwrite existing values

        // Check if the input's id suggests a non-person "name" field
        var elId = el.id || '';
        if (nonPersonPrefix.test(elId)) return;

        // Also check the associated label text for non-person context
        var labelText = '';
        if (elId) {
          var label = document.querySelector('label[for="' + elId + '"]');
          if (label) labelText = label.textContent.trim().toLowerCase();
        }
        if (!labelText && el.closest('label')) {
          labelText = el.closest('label').textContent.trim().toLowerCase();
        }
        // Skip if label says "chore name", "task name", etc.
        if (labelText && nonPersonPrefix.test(labelText)) return;

        if (firstPatterns.test(el.placeholder) || firstPatterns.test(el.name) || firstPatterns.test(el.id)) {
          el.value = u.firstName || '';
        } else if (lastPatterns.test(el.placeholder) || lastPatterns.test(el.name) || lastPatterns.test(el.id)) {
          el.value = u.lastName || '';
        } else if (userPatterns.test(el.placeholder) || userPatterns.test(el.name) || userPatterns.test(el.id)) {
          el.value = u.username || u.name || '';
        } else if (namePatterns.test(el.placeholder) || namePatterns.test(el.name) || namePatterns.test(el.id)) {
          el.value = u.name || '';
        }
      });
    };
    // Run after a short delay to let LLM-generated code render
    if (document.readyState === 'complete') {
      setTimeout(_fillNames, 100);
    } else {
      window.addEventListener('load', function () { setTimeout(_fillNames, 100); });
    }
  });

  // ═══════════════════════════════════════════════════════════════════════════════
  // Console Capture & Error Reporting
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Console capture + error reporting ───────────────────────────── */
  var _logBuffer = [];
  var _LOG_FLUSH_INTERVAL = 3000;
  var _LOG_MAX_BUFFER = 50;
  var _LOG_MAX_MSG = 4096;
  var _noLogs = document.documentElement.hasAttribute("data-deplixo-nologs");

  if (!_noLogs) {
    // Preserve originals so dev tools still work
    var _origConsole = {
      log: console.log.bind(console),
      info: console.info.bind(console),
      warn: console.warn.bind(console),
      error: console.error.bind(console),
      debug: console.debug.bind(console),
    };

    function _captureLog(level, args) {
      var msg = Array.prototype.map.call(args, function (a) {
        if (typeof a === "string") return a;
        try { return JSON.stringify(a); } catch (e) { return String(a); }
      }).join(" ");
      if (msg.length > _LOG_MAX_MSG) msg = msg.slice(0, _LOG_MAX_MSG);
      _logBuffer.push({ level: level, source: "client", message: msg, visitor_id: visitorId });
      if (_logBuffer.length >= _LOG_MAX_BUFFER) _flushLogs();
    }

    ["log", "info", "warn", "error", "debug"].forEach(function (level) {
      var mapped = level === "log" ? "info" : level;
      console[level] = function () {
        _origConsole[level].apply(console, arguments);
        _captureLog(mapped, arguments);
      };
    });

    // Global error handlers
    window.addEventListener("error", function (e) {
      _captureLog("error", [e.message || "Unknown error"]);
      // Also report to self-healing endpoint
      _reportAppError(e.message, e.error && e.error.stack || "", window.location.href);
    });

    window.addEventListener("unhandledrejection", function (e) {
      var msg = e.reason && e.reason.message || String(e.reason);
      _captureLog("error", ["Unhandled rejection: " + msg]);
      _reportAppError(msg, e.reason && e.reason.stack || "", window.location.href);
    });

    function _flushLogs() {
      if (!_logBuffer.length) return;
      var batch = _logBuffer.splice(0, _LOG_MAX_BUFFER);
      try {
        navigator.sendBeacon(
          apiBase + "/logs/" + appId + "/ingest",
          new Blob([JSON.stringify({ entries: batch })], { type: "application/json" })
        );
      } catch (e) { /* silent */ }
    }

    function _reportAppError(message, stack, url) {
      try {
        navigator.sendBeacon(
          apiBase + "/logs/" + appId + "/error",
          new Blob([JSON.stringify({ message: message, stack: stack || "", url: url || "" })], { type: "application/json" })
        );
      } catch (e) { /* silent */ }
    }

    setInterval(_flushLogs, _LOG_FLUSH_INTERVAL);
    window.addEventListener("beforeunload", _flushLogs);
  }

  // Expose manual logging + flush for testing
  window.deplixo.log = {
    info: function (msg) { console.info(msg); },
    warn: function (msg) { console.warn(msg); },
    error: function (msg) { console.error(msg); },
    debug: function (msg) { console.debug(msg); },
    flush: function () { if (!_noLogs) _flushLogs(); },
  };

  // Convenience alias: type `logger.debug("hello")` in the console
  window.logger = window.deplixo.log;

  // ═══════════════════════════════════════════════════════════════════════════════
  // API Helpers
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── API helpers ────────────────────────────────────────────────── */
  var _retryDelays = [500, 1500, 3000];

  function _fetchRetry(url, opts, attempt) {
    attempt = attempt || 0;
    return fetch(url, opts).then(function (r) {
      if (r.status === 503 && attempt < _retryDelays.length) {
        return new Promise(function (resolve) {
          setTimeout(resolve, _retryDelays[attempt]);
        }).then(function () {
          return _fetchRetry(url, opts, attempt + 1);
        });
      }
      return r;
    }).catch(function (e) {
      if (attempt < _retryDelays.length) {
        return new Promise(function (resolve) {
          setTimeout(resolve, _retryDelays[attempt]);
        }).then(function () {
          return _fetchRetry(url, opts, attempt + 1);
        });
      }
      throw e;
    });
  }

  /* ── Storage limit modal (shown to end users when writes fail) ──── */
  var _limitModalShown = false;
  var _limitModalDismissedAt = 0;

  function _showLimitModal() {
    var now = Date.now();
    // Debounce: don't re-show within 60s of dismissal
    if (_limitModalShown || (now - _limitModalDismissedAt < 60000)) return;
    if (document.getElementById('deplixo-limit-modal')) return;
    _limitModalShown = true;

    var overlay = document.createElement('div');
    overlay.id = 'deplixo-limit-modal';
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:999999;font-family:system-ui,-apple-system,sans-serif;';
    var card = document.createElement('div');
    card.style.cssText = 'background:#fff;border-radius:12px;padding:28px 32px;max-width:420px;width:90%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);';
    card.innerHTML =
      '<div style="font-size:2rem;margin-bottom:12px;">&#9888;&#65039;</div>' +
      '<h3 style="margin:0 0 8px;font-size:1.1rem;color:#1a1a2e;">Storage limit reached</h3>' +
      '<p style="margin:0 0 20px;font-size:0.9rem;color:#6b7280;line-height:1.5;">' +
        'This app has reached its storage limit. The app creator has been notified. ' +
        'You can still browse the app, but new data can\'t be saved right now.' +
      '</p>' +
      '<button id="deplixo-limit-dismiss" style="background:#6c5ce7;color:#fff;border:none;padding:8px 24px;border-radius:8px;font-size:0.9rem;font-weight:600;cursor:pointer;">OK</button>';
    overlay.appendChild(card);
    document.body.appendChild(overlay);

    document.getElementById('deplixo-limit-dismiss').onclick = function () {
      overlay.remove();
      _limitModalShown = false;
      _limitModalDismissedAt = Date.now();
    };
    overlay.onclick = function (e) {
      if (e.target === overlay) {
        overlay.remove();
        _limitModalShown = false;
        _limitModalDismissedAt = Date.now();
      }
    };
  }

  /* ── Credits exhausted modal (shown to end users when AI/email blocked) ── */
  var _creditsModalShown = false;
  var _creditsModalDismissedAt = 0;

  function _showCreditsExhaustedModal() {
    var now = Date.now();
    if (_creditsModalShown || (now - _creditsModalDismissedAt < 60000)) return;
    if (document.getElementById('deplixo-credits-modal')) return;
    _creditsModalShown = true;

    var overlay = document.createElement('div');
    overlay.id = 'deplixo-credits-modal';
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:999999;font-family:system-ui,-apple-system,sans-serif;';
    var card = document.createElement('div');
    card.style.cssText = 'background:#fff;border-radius:12px;padding:28px 32px;max-width:420px;width:90%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2);';
    card.innerHTML =
      '<div style="font-size:2rem;margin-bottom:12px;">&#9888;&#65039;</div>' +
      '<h3 style="margin:0 0 8px;font-size:1.1rem;color:#1a1a2e;">Features temporarily unavailable</h3>' +
      '<p style="margin:0 0 20px;font-size:0.9rem;color:#6b7280;line-height:1.5;">' +
        'This app\'s AI and email features are temporarily unavailable. ' +
        'The app creator has been notified.' +
      '</p>' +
      '<button id="deplixo-credits-dismiss" style="background:#6c5ce7;color:#fff;border:none;padding:8px 24px;border-radius:8px;font-size:0.9rem;font-weight:600;cursor:pointer;">OK</button>';
    overlay.appendChild(card);
    document.body.appendChild(overlay);

    document.getElementById('deplixo-credits-dismiss').onclick = function () {
      overlay.remove();
      _creditsModalShown = false;
      _creditsModalDismissedAt = Date.now();
    };
    overlay.onclick = function (e) {
      if (e.target === overlay) {
        overlay.remove();
        _creditsModalShown = false;
        _creditsModalDismissedAt = Date.now();
      }
    };
  }

  function _api(method, path, body) {
    var opts = { method: method, headers: { "Content-Type": "application/json" } };
    if (body !== undefined) opts.body = JSON.stringify(body);
    return _fetchRetry(apiBase + path, opts)
      .then(function (r) {
        if (r.status === 413 || (r.status === 400 && method !== "GET")) {
          return r.json().then(function (data) {
            if (r.status === 413 || data.over_quota || data.over_limit) {
              _showLimitModal();
            }
            return {};
          }).catch(function () {
            if (r.status === 413) _showLimitModal();
            return {};
          });
        }
        if (!r.ok) {
          console.warn("[deplixo] API error:", r.status);
          return {};
        }
        return r.json();
      })
      .catch(function (e) {
        console.warn("[deplixo] API fetch failed:", e.message);
        return {};
      });
  }

  // ═══════════════════════════════════════════════════════════════════════════════
  // Name Fields & Identity
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Name field helpers ──────────────────────────────────────────── */
  function _setUserName(fullName, authData) {
    /* Populate all name fields on deplixo.user.
       authData (optional): {firstName, lastName, username} from OAuth. */
    var u = window.deplixo.user;
    u.name = fullName || null;
    u.displayName = fullName || null;
    if (authData && authData.firstName) {
      u.firstName = authData.firstName;
      u.lastName = authData.lastName || '';
      u.username = authData.username || '';
    } else if (fullName) {
      // Compute from full name
      var parts = fullName.trim().split(/\s+/);
      u.firstName = parts[0] || '';
      u.lastName = parts.slice(1).join(' ') || '';
      u.username = fullName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
    }
  }

  /* ── Mode-based identity setup ───────────────────────────────────── */
  var _mode = window.__deplixo_mode || 'private';
  var _authUser = window.__deplixo_auth || null;

  window.deplixo.user.mode = _mode;

  if (_mode === 'group' && _authUser) {
    // Group + login mode: identity from Deplixo OAuth login
    window.deplixo.user.id = _authUser.id;
    window.deplixo.user.email = _authUser.email;
    window.deplixo.user.role = _authUser.role;
    window.deplixo.user.avatar_url = _authUser.avatar_url || '';
    _setUserName(_authUser.name, _authUser);
    visitorName = _authUser.name;
    _readyResolve();
  } else if (_mode === 'group' && window.__deplixo_shared) {
    // Group mode: name comes from server-side gate screen
    visitorName = window.__deplixo_shared.name;
    _setUserName(visitorName);
    _readyResolve();
  } else if (_mode === 'private' && window.__deplixo_owner) {
    // Private mode: owner name injected server-side
    _setUserName(window.__deplixo_owner);
    visitorName = window.__deplixo_owner;
    _readyResolve();
  } else if (_authUser) {
    // Legacy: auth_enabled without app_mode
    _setUserName(_authUser.name, _authUser);
    window.deplixo.user.avatar_url = _authUser.avatar_url || '';
    visitorName = _authUser.name;
    _readyResolve();
  } else {
    // Legacy fallback: check visitor registration via API
    _fetchRetry(apiBase + "/db/" + appId + "/visitor?visitor_id=" + encodeURIComponent(visitorId))
      .then(function (r) {
        if (!r.ok) return {};
        return r.json();
      })
      .then(function (d) {
        if (d.visitor_id && d.display_name) {
          visitorName = d.display_name;
          window.deplixo.user.name = visitorName;
        }
        _readyResolve();
        // Legacy eager identity: show modal for old apps with __deplixo_needs_identity
        if (window.__deplixo_needs_identity && !visitorName && !_authUser) {
          ensureIdentity();
        }
      })
      .catch(function () {
        _readyResolve();
      });
  }

  /* ── Identity modal ─────────────────────────────────────────────── */
  function showModal() {
    return new Promise(function (resolve) {
      var overlay = document.createElement("div");
      overlay.id = "bw-id-overlay";
      overlay.innerHTML =
        '<div style="position:fixed!important;inset:0!important;background:rgba(0,0,0,0.6)!important;z-index:9999999!important;display:flex!important;align-items:center!important;justify-content:center!important;font-family:system-ui,-apple-system,sans-serif!important;">' +
        '<div style="background:#1a1a2e!important;color:#e0e0e0!important;border-radius:16px!important;padding:32px!important;max-width:360px!important;width:90vw!important;text-align:center!important;box-shadow:0 8px 32px rgba(0,0,0,0.4)!important;">' +
        '<div style="margin-bottom:16px!important;"><img src="https://deplixo.com/static/images/deplixo-logo.png" alt="" style="width:40px!important;height:40px!important;border-radius:8px!important;vertical-align:middle!important;"> <span style="font-size:18px!important;font-weight:700!important;vertical-align:middle!important;margin-left:8px!important;">Deplixo</span></div>' +
        '<p style="font-size:14px!important;color:#aaa!important;margin:0 0 20px!important;">This app saves data. Pick a name so others can tell who&#39;s who.</p>' +
        '<input id="bw-id-input" type="text" maxlength="50" placeholder="Your display name" style="width:100%!important;box-sizing:border-box!important;padding:10px 14px!important;border-radius:8px!important;border:1px solid #333!important;background:#111!important;color:#fff!important;font-size:15px!important;outline:none!important;margin-bottom:8px!important;">' +
        '<div id="bw-id-err" style="color:#ff6b6b!important;font-size:13px!important;min-height:20px!important;margin-bottom:8px!important;"></div>' +
        '<button id="bw-id-btn" style="width:100%!important;padding:10px!important;border:none!important;border-radius:8px!important;background:#905AE8!important;color:#fff!important;font-size:15px!important;font-weight:600!important;cursor:pointer!important;">Continue</button>' +
        '<a id="bw-id-link-toggle" href="#" style="display:block!important;margin-top:12px!important;color:#888!important;font-size:12px!important;text-decoration:none!important;">Already used this app on another device?</a>' +
        "</div></div>";
      document.body.appendChild(overlay);
      var inp = document.getElementById("bw-id-input");
      var btn = document.getElementById("bw-id-btn");
      var err = document.getElementById("bw-id-err");
      var linkToggle = document.getElementById("bw-id-link-toggle");
      var isLinkMode = false;

      function setLinkMode(on) {
        isLinkMode = on;
        if (on) {
          inp.placeholder = "Enter your existing name";
          btn.textContent = "Link this device";
          linkToggle.textContent = "New here? Pick a name instead";
        } else {
          inp.placeholder = "Your display name";
          btn.textContent = "Continue";
          linkToggle.textContent = "Already used this app on another device?";
        }
        inp.value = "";
        err.textContent = "";
      }

      linkToggle.onclick = function (e) {
        e.preventDefault();
        setLinkMode(!isLinkMode);
        inp.focus();
      };

      function submit() {
        var name = inp.value.trim();
        if (!name) {
          err.textContent = isLinkMode ? "Enter your existing name." : "Please enter a name.";
          return;
        }
        btn.disabled = true;
        btn.textContent = "...";
        var endpoint = isLinkMode ? "/db/" + appId + "/link-visitor" : "/db/" + appId + "/register-visitor";
        _fetchRetry(apiBase + endpoint, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ visitor_id: visitorId, display_name: name }),
        })
          .then(function (r) {
            return r.json().then(function (d) {
              return { ok: r.ok, status: r.status, data: d };
            });
          })
          .then(function (res) {
            if (res.ok) {
              visitorName = res.data.display_name;
              window.deplixo.user.name = visitorName;
              overlay.remove();
              resolve();
            } else {
              err.textContent = res.data.error || "Something went wrong";
              btn.disabled = false;
              btn.textContent = isLinkMode ? "Link this device" : "Continue";
            }
          })
          .catch(function (error) {
            err.textContent = "Network error - please try again.";
            btn.disabled = false;
            btn.textContent = isLinkMode ? "Link this device" : "Continue";
          });
      }
      btn.onclick = submit;
      inp.onkeydown = function (e) {
        if (e.key === "Enter") submit();
      };
      inp.focus();
    });
  }

  /* ── Ensure identity before writes ──────────────────────────────── */
  function ensureIdentity() {
    return Promise.resolve();
  }

  // ═══════════════════════════════════════════════════════════════════════════════
  // SSE Connection Management
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── SSE setup ─────────────────────────────────────────────────── */
  var _sseWasConnected = false;
  var _sseReconnectCallbacks = [];

  function ensureSSE() {
    if (_sse && _sse.readyState !== 2) return;
    if (_sse) {
      _sse.close();
      _sse = null;
    }
    var wasConnected = _sseWasConnected;
    _sse = new EventSource(apiBase + "/db/" + appId + "/stream");
    _sse.onopen = function () {
      if (wasConnected) {
        // SSE reconnected after a drop — notify collections to catch up
        _sseReconnectCallbacks.forEach(function (fn) {
          try { fn(); } catch (e) {}
        });
      }
      _sseWasConnected = true;
    };
    _sse.onmessage = function (e) {
      try {
        var d = JSON.parse(e.data);
        _listeners.forEach(function (fn) {
          fn(d);
        });
        // Dispatch broadcast events
        if (d.action === "broadcast" && d.key) {
          var bcHandlers = _broadcastHandlers[d.key] || [];
          bcHandlers.forEach(function (h) {
            try {
              h(d.value, d.author);
            } catch (err) {
              console.error("Broadcast handler error:", err);
            }
          });
        }
        // Dispatch webhook events
        if (d.action === "webhook" && d.key && _webhookHandlers) {
          var handlers = _webhookHandlers[d.key] || [];
          handlers.forEach(function (h) {
            try {
              h(d.value);
            } catch (err) {
              console.error("Webhook handler error:", err);
            }
          });
        }
        // Dispatch presence events
        if (d.action && d.action.indexOf("presence:") === 0 && _presenceCallbacks.length) {
          _presenceCallbacks.forEach(function(cb) {
            try { cb({action: d.action, userId: d.key, data: d.value}); } catch(e) {}
          });
        }
        // Dispatch notification events
        if (d.action === "notification") {
          var nVisitorId = window.deplixo.user ? window.deplixo.user.id : (document.cookie.match(/bw_visitor_id=([^;]+)/) || [])[1] || '';
          if (d.key === nVisitorId) {
            // Spread notification fields at top level AND include as .notification
            // for backward compat with apps using ({ notification }) destructuring.
            var nPayload = d.value || {};
            nPayload.notification = d.value;
            _notifCallbacks.forEach(function(cb) {
              try { cb(nPayload); } catch(e) {}
            });
          }
        }
        // Dispatch reaction events
        if (d.action === "reaction" && _reactionCallbacks.length) {
          _reactionCallbacks.forEach(function(cb) {
            try { cb({entryId: d.key, type: d.value.type, counts: d.value.counts, toggled: d.value.toggled}); } catch(e) {}
          });
        }
        // Dispatch timer events
        if (d.action && d.action.indexOf("timer:") === 0) {
          if (d.action === "timer:expire" && _timerExpireCallbacks[d.key]) {
            _timerExpireCallbacks[d.key].forEach(function(cb) {
              try { cb({name: d.key}); } catch(e) {}
            });
          }
        }
      } catch (ex) {}
    };
    _sse.onerror = function () {
      _sse.close();
      _sse = null;
      // Check if the app still exists before reconnecting — stops the
      // infinite reconnect loop for deleted/expired apps.
      fetch(apiBase + "/db/" + appId + "/collections/", { method: "HEAD" })
        .then(function (r) {
          if (r.status === 404) return; // app gone, stop reconnecting
          setTimeout(function () { ensureSSE(); }, 3000);
        })
        .catch(function () {
          // Network error — retry anyway
          setTimeout(function () { ensureSSE(); }, 3000);
        });
    };
  }

  /* ── Public identity API (multi-user apps call this explicitly) ── */
  window.deplixo.ensureIdentity = ensureIdentity;

  // ═══════════════════════════════════════════════════════════════════════════════
  // Collections API
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Data API ─────────────────────────────────────────────────── */
  window.deplixo.db = {
    /* ── Collection API ────────────────────────────────────────────── */
    collection: function (name, opts) {
      // Room scoping: { room: roomId } prefixes collection name for isolation
      if (opts && opts.room) {
        name = '_room_' + opts.room + '_' + name;
      }
      var cPath = "/collections/" + appId + "/" + encodeURIComponent(name);
      var _colListeners = [];
      var _eventBuffer = [];  // Buffer events before onChange is registered

      /* Eagerly bind SSE listener so events are buffered even before onChange */
      _ensureColSSE();

      /* Apply config if options provided */
      if (opts && (opts.permissions || opts.uniquePerUser || opts.history)) {
        _api("PUT", cPath + "/config", {
          permissions: opts.permissions || "open",
          unique_per_user: !!opts.uniquePerUser,
          history: !!opts.history,
        });
      }

      /* Wrap entries so entry.fieldName transparently reads entry.value.fieldName */
      var _entryTopKeys = { id: 1, value: 1, author: 1, created_at: 1, updated_at: 1, created: 1 };
      function _wrapEntry(entry) {
        if (!entry || typeof entry !== 'object' || !entry.value || typeof Proxy === 'undefined') return entry;
        return new Proxy(entry, {
          get: function (target, prop) {
            if (prop in target || prop in _entryTopKeys || typeof prop === 'symbol') return target[prop];
            // Transparently read from .value
            if (target.value && prop in target.value) return target.value[prop];
            return target[prop];
          }
        });
      }
      function _wrapEntries(entries) {
        return entries.map(_wrapEntry);
      }

      function _ensureColSSE() {
        ensureSSE();
        if (!_colListeners._bound) {
          _listeners.push(function (d) {
            if (d.table === name) {
              var parsed = null;
              if (d.value)
                try {
                  parsed = JSON.parse(d.value);
                } catch (e) {}
              var action = d.action || "";
              if (action.indexOf("collection_") === 0) action = action.slice(11);
              var evt = {
                action: action,
                id: (parsed && parsed.id) || null,
                value: (parsed && parsed.value) || null,
                author: (parsed && parsed.author) || null,
              };
              if (_colListeners.length > 0) {
                _colListeners.forEach(function (fn) { fn(evt); });
              } else {
                // Buffer events until onChange is registered (max 100)
                if (_eventBuffer.length < 100) _eventBuffer.push(evt);
              }
            }
          });
          // On SSE reconnect, fire a synthetic "reconnect" event so apps can refetch
          _sseReconnectCallbacks.push(function () {
            _colListeners.forEach(function (fn) {
              try { fn({ action: "reconnect", id: null, value: null, author: null }); } catch (e) {}
            });
          });
          _colListeners._bound = true;
        }
      }

      /* Auto-unwrap { value: X } to X — common AI-generated pattern where
         apps call add({ value: data }) but the SDK already wraps in value. */
      function _unwrapValue(data) {
        if (data && typeof data === 'object' && !Array.isArray(data)) {
          var keys = Object.keys(data);
          if (keys.length === 1 && keys[0] === 'value') return data.value;
        }
        return data;
      }

      var coll = {
        add: function (data) {
          data = _unwrapValue(data);
          var go = function () {
            var body = {
              value: data,
              visitor_id: visitorId,
              visitor_name: visitorName,
            };
            return _api("POST", cPath + "/add", body).then(_wrapEntry);
          };
          return go();
        },
        addIfEmpty: function (data) {
          data = _unwrapValue(data);
          var go = function () {
            var body = {
              value: data,
              visitor_id: visitorId,
              visitor_name: visitorName,
            };
            return _api("POST", cPath + "/add-if-empty", body).then(_wrapEntry);
          };
          return go();
        },
        list: function (options) {
          var body = options || {};
          return _api("POST", cPath + "/list", body).then(function (d) {
            return _wrapEntries(d.entries || []);
          });
        },
        get: function (id) {
          return _api("GET", cPath + "/entry/" + encodeURIComponent(id)).then(_wrapEntry).catch(function () {
            // ID lookup failed — try as a _set_key (for .set() compat alias usage)
            return coll.list({ where: { "value._set_key": id }, limit: 1 }).then(function (items) {
              if (items.length > 0) return items[0];  // already wrapped by list()
              return null;
            });
          });
        },
        update: function (id, data) {
          data = _unwrapValue(data);
          var go = function () {
            var body = {
              value: data,
              visitor_id: visitorId,
            };
            return _api("PUT", cPath + "/entry/" + encodeURIComponent(id), body).then(_wrapEntry);
          };
          return go();
        },
        remove: function (id) {
          var go = function () {
            var qs = "?visitor_id=" + encodeURIComponent(visitorId);
            return _api(
              "DELETE",
              cPath +
                "/entry/" +
                encodeURIComponent(id) +
                qs
            );
          };
          return go();
        },
        count: function (options) {
          var qs =
            options && options.groupBy
              ? "?group_by=" + encodeURIComponent(options.groupBy)
              : "";
          return _api("GET", cPath + "/count" + qs).then(function (d) {
            return d.count;
          });
        },
        aggregate: function (aggs) {
          var body = { aggregations: aggs };
          return _api("POST", cPath + "/aggregate", body).then(
            function (d) {
              return d.result || {};
            }
          );
        },
        search: function (query, limit) {
          var body = {
            query: query,
            limit: limit || 50,
          };
          return _api("POST", cPath + "/search", body).then(function (d) {
            return _wrapEntries(d.entries || []);
          });
        },
        onChange: function (cb) {
          _colListeners.push(cb);
          _ensureColSSE();
          // Replay any events that were buffered before this listener was registered
          if (_eventBuffer.length > 0) {
            var buffered = _eventBuffer.splice(0);
            buffered.forEach(function (evt) { try { cb(evt); } catch (e) {} });
          }
        },
        offChange: function (cb) {
          if (cb) {
            var idx = _colListeners.indexOf(cb);
            if (idx !== -1) _colListeners.splice(idx, 1);
          } else {
            _colListeners.length = 0;
          }
        },
        history: function(entryId, opts) {
          opts = opts || {};
          var qs = '?limit=' + (opts.limit || 50);
          if (opts.offset) qs += '&offset=' + opts.offset;
          return _api('GET', '/history/' + appId + '/' + encodeURIComponent(name) + '/entry/' + encodeURIComponent(entryId) + qs)
            .then(function(d) { return d.history || []; });
        },
        activity: function(opts) {
          opts = opts || {};
          var qs = '?limit=' + (opts.limit || 50);
          if (opts.offset) qs += '&offset=' + opts.offset;
          return _api('GET', '/history/' + appId + '/' + encodeURIComponent(name) + '/activity' + qs)
            .then(function(d) { return d.activity || []; });
        },
        /* ── Compatibility aliases ─────────────────────────────────── */
        /* These align with method names LLMs commonly generate.      */
        /* All are silent (no console warnings) — they just work.     */
        getAll: function (options) { return coll.list(options); },
        getOne: function (id) { return coll.get(id); },
        fetchAll: function (options) { return coll.list(options); },
        findAll: function (options) { return coll.list(options); },
        set: function (keyOrId, data) {
          // Key-value upsert: stores _set_key in value so get/delete can find it.
          // .get(key) has a matching _set_key fallback.
          return coll.get(keyOrId).then(function (entry) {
            if (entry && entry.id) return coll.update(entry.id, data);
            // Not found — create new entry with _set_key
            return coll.add(Object.assign({}, data, { _set_key: keyOrId }));
          }).catch(function () {
            // get() failed (invalid ID format) — treat as key-value key
            return coll.list({ where: { "value._set_key": keyOrId }, limit: 1 }).then(function (items) {
              if (items.length > 0) {
                return coll.update(items[0].id, Object.assign({}, data, { _set_key: keyOrId }));
              }
              return coll.add(Object.assign({}, data, { _set_key: keyOrId }));
            });
          });
        },
        "delete": function (id) {
          // Supports both entry IDs and _set_key values (from .set())
          return coll.remove(id).catch(function () {
            // remove(id) failed — try as a _set_key
            return coll.list({ where: { "value._set_key": id }, limit: 1 }).then(function (items) {
              if (items.length > 0) return coll.remove(items[0].id);
            });
          });
        },
        put: function (id, data) { return coll.update(id, data); },
        doc: function (id) { return coll.get(id); },
        find: function (query) {
          return coll.search(typeof query === 'string' ? query : JSON.stringify(query));
        },
        save: function (data) { return coll.add(data); },
        create: function (data) { return coll.add(data); },
        destroy: function (id) { return coll.remove(id); },
      };
      return coll;
    },
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // File Upload
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── File upload ────────────────────────────────────────────────── */
  window.deplixo.upload = function (file) {
    // Read local data URL in parallel for instant image preview
    var dataUrlPromise = new Promise(function (resolve) {
      if (file instanceof Blob && file.type && file.type.startsWith("image/")) {
        var reader = new FileReader();
        reader.onload = function () { resolve(reader.result); };
        reader.onerror = function () { resolve(null); };
        reader.readAsDataURL(file);
      } else {
        resolve(null);
      }
    });

    // Upload to CDN
    var form = new FormData();
    form.append("file", file);
    var uploadPromise = fetch(apiBase + "/apps/" + appId + "/upload", {
      method: "POST",
      body: form,
    }).then(function (r) {
      if (!r.ok)
        return r.json().then(function (d) {
          throw new Error(d.error || "Upload failed");
        });
      return r.json();
    });

    // Return { url, filename, size, dataUrl }
    return Promise.all([uploadPromise, dataUrlPromise]).then(function (results) {
      var data = results[0];
      data.dataUrl = results[1]; // base64 data URL for images, null otherwise
      return data;
    });
  };
  window.deplixo.uploads = {
    list: function () {
      return fetch(apiBase + "/apps/" + appId + "/uploads")
        .then(function (r) {
          return r.json();
        })
        .then(function (d) {
          return d.files;
        });
    },
    delete: function (fn) {
      return fetch(
        apiBase + "/apps/" + appId + "/uploads/" + encodeURIComponent(fn),
        { method: "DELETE" }
      ).then(function (r) {
        return r.json();
      });
    },
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // SQL API
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── SQL API ──────────────────────────────────────────────────── */
  window.deplixo.sql = {
    query: function (sql, params) {
      return _api("POST", "/sql/" + appId + "/query", {
        sql: sql,
        params: params || [],
      }).then(function (d) {
        return d.rows || [];
      });
    },
    run: function (sql, params) {
      return _api("POST", "/sql/" + appId + "/run", {
        sql: sql,
        params: params || [],
      });
    },
    exec: function (sql) {
      return _api("POST", "/sql/" + appId + "/exec", { sql: sql });
    },
    transaction: function (statements) {
      return _api("POST", "/sql/" + appId + "/transaction", {
        statements: statements,
      }).then(function (d) {
        return d.results || [];
      });
    },
    onChange: function (cb) {
      _listeners.push(function (d) {
        if (d.table === "sql") cb(d);
      });
      ensureSSE();
    },
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Proxy
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Proxy ─────────────────────────────────────────────────────── */
  window.deplixo.proxy = function (url, options) {
    options = options || {};
    return _api("POST", "/proxy/" + appId + "/", {
      url: url,
      method: options.method || "GET",
      headers: options.headers || {},
      body: options.body || null,
    });
  };

  // deplixo.fetch(url, options) — canonical alias for deplixo.proxy.
  // LLMs reach for fetch() by instinct; this hits the same proxy
  // endpoint (SSRF-protected, domain allowlisted, ${SECRET_NAME}
  // substitution in headers). Identical signature.
  window.deplixo.fetch = window.deplixo.proxy;

  // ═══════════════════════════════════════════════════════════════════════════════
  // Privacy
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Delete My Data ────────────────────────────────────────────── */
  window.deplixo.deleteMyData = function () {
    return fetch(apiBase + "/privacy/" + appId + "/visitor-data", {
      method: "DELETE",
      credentials: "same-origin",
    })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        // Clear the visitor cookie
        document.cookie = "bw_visitor_id=;path=/;max-age=0;SameSite=Lax";
        visitorId = null;
        visitorName = null;
        return data;
      });
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // AI (Prompt / Stream)
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── AI ───────────────────────────────────────────────────────── */
  window.deplixo.ai = {
    prompt: function (input) {
      var body;
      var wantJson = false;
      if (typeof input === "string") {
        body = { user: input, stream: true };
      } else {
        wantJson = !!input.json;
        body = {
          user: input.user || input.prompt || "",
          system: input.system || null,
          json_mode: wantJson,
          stream: true,
        };
      }
      return fetch(apiBase + "/ai/" + appId + "/prompt", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      }).then(function (response) {
        if (response.status === 402) {
          return response.json().then(function (errData) {
            if (errData.error === 'free_taste_exhausted') {
              if (!document.getElementById('deplixo-save-prompt')) {
                var overlay = document.createElement('div');
                overlay.id = 'deplixo-save-prompt';
                overlay.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#5046e5,#7c3aed);color:#fff;padding:12px 20px;font-family:system-ui,-apple-system,sans-serif;font-size:14px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:999999;box-shadow:0 -4px 12px rgba(0,0,0,0.2);';
                overlay.innerHTML = '<span>AI features require saving this app</span>' +
                  (errData.claim_url ? '<a href="' + errData.claim_url + '" style="background:#fff;color:#5046e5;padding:6px 20px;border-radius:6px;font-weight:600;text-decoration:none;font-size:13px;">Save to my apps</a>' : '');
                document.body.appendChild(overlay);
              }
              throw new Error('Free AI calls exhausted. Save this app to continue using AI features.');
            }
            if (errData.error === 'credits_exhausted') {
              _showCreditsExhaustedModal();
              var e = new Error(errData.message || 'Credits exhausted');
              e.code = errData.error;
              e.data = errData;
              throw e;
            }
            var e = new Error(errData.message || errData.error);
            e.code = errData.error;
            e.data = errData;
            throw e;
          });
        }
        if (!response.ok) {
          // Non-streaming JSON error response
          var ct = response.headers.get("content-type") || "";
          if (ct.indexOf("application/json") !== -1) {
            return response.json().then(function (d) {
              if (d.error) {
                var e = new Error(d.message || d.error);
                e.code = d.error;
                e.data = d;
                throw e;
              }
              throw new Error("AI request failed (HTTP " + response.status + ")");
            });
          }
          throw new Error("AI request failed (HTTP " + response.status + ")");
        }
        // Buffer the SSE stream and resolve with the final text
        var reader = response.body.getReader();
        var decoder = new TextDecoder();
        var fullText = "";
        function pump() {
          return reader.read().then(function (r) {
            if (r.done) return fullText;
            var text = decoder.decode(r.value, { stream: true });
            var lines = text.split(String.fromCharCode(10));
            for (var i = 0; i < lines.length; i++) {
              var line = lines[i];
              if (!line.startsWith("data: ")) continue;
              try {
                var chunk = JSON.parse(line.slice(6));
                if (chunk.text) fullText += chunk.text;
                if (chunk.error) {
                  var e = new Error(chunk.message || chunk.error);
                  e.code = chunk.error;
                  throw e;
                }
              } catch (pe) {
                if (pe.code) throw pe;
              }
            }
            return pump();
          });
        }
        return pump();
      }).then(function (text) {
        if (text == null || text === "") throw new Error("AI request failed");
        if (wantJson) {
          var parsed;
          // If the API already parsed it (returned object), use directly
          if (typeof text === "object" && text !== null) {
            parsed = text;
          } else {
            // Strip markdown code fences some models add
            var cleaned = typeof text === "string" ? text.trim() : "";
            if (cleaned.indexOf("```") === 0) {
              var nl = cleaned.indexOf("\n");
              cleaned = nl > -1 ? cleaned.slice(nl + 1) : cleaned.slice(3);
              if (cleaned.lastIndexOf("```") === cleaned.length - 3) cleaned = cleaned.slice(0, -3).trim();
            }
            try { parsed = JSON.parse(cleaned); } catch (e) { return text; }
          }
          // Auto-unwrap: LLMs with json_mode often wrap arrays in a single-key
          // object like {"ideas": [...]} — unwrap to the array the caller expects.
          if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
            var keys = Object.keys(parsed);
            if (keys.length === 1 && Array.isArray(parsed[keys[0]])) {
              return parsed[keys[0]];
            }
          }
          return parsed;
        }
        return text;
      });
    },
    stream: function (input) {
      var body;
      if (typeof input === "string") {
        body = { user: input, stream: true };
      } else {
        body = {
          user: input.user || input.prompt || "",
          system: input.system || null,
          json_mode: false,
          stream: true,
        };
      }
      var url = apiBase + "/ai/" + appId + "/prompt";
      return fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      }).then(function (resp) {
        if (resp.status === 402) {
          return resp.json().then(function (errData) {
            if (errData.error === 'free_taste_exhausted') {
              if (!document.getElementById('deplixo-save-prompt')) {
                var overlay = document.createElement('div');
                overlay.id = 'deplixo-save-prompt';
                overlay.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#5046e5,#7c3aed);color:#fff;padding:12px 20px;font-family:system-ui,-apple-system,sans-serif;font-size:14px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:999999;box-shadow:0 -4px 12px rgba(0,0,0,0.2);';
                overlay.innerHTML = '<span>AI features require saving this app</span>' +
                  (errData.claim_url ? '<a href="' + errData.claim_url + '" style="background:#fff;color:#5046e5;padding:6px 20px;border-radius:6px;font-weight:600;text-decoration:none;font-size:13px;">Save to my apps</a>' : '');
                document.body.appendChild(overlay);
              }
              throw new Error('Free AI calls exhausted. Save this app to continue using AI features.');
            }
            if (errData.error === 'credits_exhausted') {
              _showCreditsExhaustedModal();
              var e = new Error(errData.message || 'Credits exhausted');
              e.code = errData.error;
              e.data = errData;
              throw e;
            }
            var e = new Error(errData.message || errData.error);
            e.code = errData.error;
            e.data = errData;
            throw e;
          });
        }
        if (!resp.ok) throw new Error("AI request failed (HTTP " + resp.status + ")");
        var ct = resp.headers.get("content-type") || "";
        if (ct.indexOf("application/json") !== -1) {
          return resp.json().then(function (d) {
            if (d.error) {
              var e = new Error(d.message || d.error);
              e.code = d.error;
              e.data = d;
              throw e;
            }
            throw new Error("Unexpected response");
          });
        }
        var reader = resp.body.getReader();
        var decoder = new TextDecoder();
        return {
          [Symbol.asyncIterator]: function () {
            return {
              next: function () {
                return reader.read().then(function (r) {
                  if (r.done) return { done: true };
                  var text = decoder.decode(r.value, { stream: true });
                  var chunks = text
                    .split(String.fromCharCode(10))
                    .filter(function (l) {
                      return l.startsWith("data: ");
                    })
                    .map(function (l) {
                      try {
                        return JSON.parse(l.slice(6));
                      } catch (e) {
                        return null;
                      }
                    })
                    .filter(Boolean);
                  var combined = "";
                  chunks.forEach(function (c) {
                    if (c.text) combined += c.text;
                  });
                  return { done: false, value: combined };
                });
              },
            };
          },
        };
      });
    },
    /**
     * Structured-output AI lookup. Pass a `prompt` and an `example`
     * object showing the shape you want back; lookup() synthesizes the
     * JSON-mode prompt, parses the response, validates that the
     * example's top-level keys are present, and retries once on parse
     * failure with the parse error appended to the prompt.
     *
     * On success: resolves with a parsed object.
     * On total failure: throws an Error with .cause = { attempts: [...] }.
     *
     * Use the React wrapper `useAILookup({ example })` for hook-shaped
     * loading/error state. Plans/ai-thick-components.md.
     */
    lookup: function (input) {
      var prompt = (input && input.prompt) || "";
      var example = (input && input.example) || {};
      var retries = input && typeof input.retries === "number" ? input.retries : 1;
      if (!prompt || typeof prompt !== "string") {
        return Promise.reject(new Error("ai.lookup: 'prompt' is required (string)"));
      }
      if (!example || typeof example !== "object" || Array.isArray(example)) {
        return Promise.reject(new Error("ai.lookup: 'example' must be a plain object showing the desired shape"));
      }

      var requiredKeys = Object.keys(example);
      var exampleJson = JSON.stringify(example, null, 2);

      function buildSystem(extraNote) {
        var sys =
          "You return a JSON object exactly matching this shape:\n" +
          exampleJson +
          "\n\nRules:\n" +
          "- Return ONLY the JSON object, no prose, no markdown fences.\n" +
          "- All top-level keys shown must be present.\n" +
          "- The example values are illustrative; replace with real data for the user's request.\n" +
          "- Arrays in the example show the element shape; return as many real items as the request implies.";
        if (extraNote) sys += "\n\nNote: " + extraNote;
        return sys;
      }

      var attempts = [];

      function attempt(extraNote) {
        return window.deplixo.ai.prompt({
          user: prompt,
          system: buildSystem(extraNote),
          json: true,
        }).then(function (raw) {
          // prompt() with json:true already tries JSON.parse, returning
          // the parsed object on success or the raw string on failure.
          var parsed = raw;
          var parseErr = null;
          if (typeof raw === "string") {
            try {
              parsed = JSON.parse(raw);
            } catch (e) {
              parseErr = String(e && e.message || e);
            }
          }
          if (parseErr || !parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
            attempts.push({ raw: raw, error: parseErr || "not a JSON object" });
            return null;
          }
          // Validate top-level keys from example are present
          var missing = [];
          for (var i = 0; i < requiredKeys.length; i++) {
            if (!(requiredKeys[i] in parsed)) missing.push(requiredKeys[i]);
          }
          if (missing.length) {
            attempts.push({ raw: raw, error: "missing keys: " + missing.join(", ") });
            return { _retry: "Your previous reply was missing required keys: " + missing.join(", ") + ". Return all of them." };
          }
          return { ok: parsed };
        });
      }

      function tryOnce(extraNote, remaining) {
        return attempt(extraNote).then(function (result) {
          if (result && result.ok) return result.ok;
          if (remaining > 0) {
            var lastErr = attempts[attempts.length - 1];
            var note = (result && result._retry) ||
              ("Your previous reply wasn't valid JSON: " + (lastErr && lastErr.error) + ". Return ONLY the JSON object.");
            return tryOnce(note, remaining - 1);
          }
          var err = new Error("ai.lookup: failed after " + (retries + 1) + " attempt(s)");
          err.cause = { attempts: attempts };
          throw err;
        });
      }

      return tryOnce(null, retries);
    },
    // Aliases — AI-generated apps commonly use these names
    chat: function (input) {
      console.warn('[deplixo] .chat() is a compatibility alias. Prefer .prompt().');
      return window.deplixo.ai.prompt(input);
    },
    generate: function (input) {
      console.warn('[deplixo] .generate() is a compatibility alias. Prefer .prompt().');
      return window.deplixo.ai.prompt(input);
    },
    ask: function (input) {
      console.warn('[deplixo] .ask() is a compatibility alias. Prefer .prompt().');
      return window.deplixo.ai.prompt(input);
    },
    complete: function (input) {
      console.warn('[deplixo] .complete() is a compatibility alias. Prefer .prompt().');
      return window.deplixo.ai.prompt(input);
    },
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Auth
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Auth namespace ───────────────────────────────────────────── */
  // _authUser declared earlier (line 76) for eager identity detection
  var _authCallbacks = [];

  window.deplixo.auth = {
    get user() { return _authUser; },
    get isAuthenticated() { return !!_authUser; },
    requireLogin: function () {
      return new Promise(function (resolve, reject) {
        if (_authUser) { resolve(_authUser); return; }
        // Check with server
        fetch(apiBase + "/auth/" + appId + "/me", { credentials: "include" })
          .then(function (r) { return r.json(); })
          .then(function (data) {
            if (data.authenticated) {
              _authUser = data.user;
              _authCallbacks.forEach(function (cb) { cb(_authUser); });
              resolve(_authUser);
            } else {
              window.location.href = "/auth/" + appId + "/login/";
            }
          })
          .catch(reject);
      });
    },
    logout: function () {
      window.location.href = "/auth/" + appId + "/logout/";
    },
    onAuthChange: function (cb) {
      _authCallbacks.push(cb);
    },
    // Aliases — AI-generated apps commonly use these names
    me: function () {
      if (_authUser) return Promise.resolve({ authenticated: true, user: _authUser });
      return fetch(apiBase + "/auth/" + appId + "/me", { credentials: "include" })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          if (data.authenticated) {
            _authUser = data.user;
            _authCallbacks.forEach(function (cb) { cb(_authUser); });
          }
          return data;
        })
        .catch(function () { return { authenticated: false }; });
    },
    signIn: function () { return window.deplixo.auth.requireLogin(); },
    signOut: function () { return window.deplixo.auth.logout(); },
    login: function () {
      console.warn('[deplixo] .login() is a compatibility alias. Prefer .requireLogin().');
      return window.deplixo.auth.requireLogin();
    },
    register: function () {
      console.warn('[deplixo] .register() is a compatibility alias. Deplixo handles registration within the login flow. Use .requireLogin().');
      return window.deplixo.auth.requireLogin();
    },
    getUser: function () {
      if (_authUser) return Promise.resolve(_authUser);
      return fetch(apiBase + "/auth/" + appId + "/me", { credentials: "include" })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          if (data.authenticated) {
            _authUser = data.user;
            return _authUser;
          }
          return null;
        })
        .catch(function () { return null; });
    },
    updateProfile: function (data) {
      return fetch(apiBase + "/auth/" + appId + "/profile", {
        method: "POST", credentials: "include",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(data)
      }).then(function (r) { return r.json(); })
        .then(function (res) {
          if (res.name) _authUser.name = res.name;
          if (res.avatar_url !== undefined) _authUser.avatar_url = res.avatar_url;
          window.deplixo.user.name = _authUser.name;
          window.deplixo.user.avatar_url = _authUser.avatar_url || '';
          _authCallbacks.forEach(function (cb) { cb(_authUser); });
          return _authUser;
        });
    },
    hasRole: function (role) {
      return _authUser && _authUser.role === role;
    },
    requireRole: function (role) {
      if (!_authUser) {
        return window.deplixo.auth.requireLogin().then(function (user) {
          if (user.role !== role) {
            throw new Error("Access denied: requires role '" + role + "' but you have '" + user.role + "'");
          }
          return user;
        });
      }
      if (_authUser.role !== role) {
        return Promise.reject(new Error("Access denied: requires role '" + role + "' but you have '" + _authUser.role + "'"));
      }
      return Promise.resolve(_authUser);
    }
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Avatar
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Avatar utility (initials-based fallback) ────────────────── */
  window.deplixo.avatar = function (name, size) {
    size = size || 40;
    var initials = (name || '?').split(' ').map(function (w) { return w[0]; }).join('').slice(0, 2).toUpperCase();
    var colors = ['#E57373','#64B5F6','#81C784','#FFD54F','#BA68C8','#4DD0E1','#FF8A65','#A1887F'];
    var hash = 0;
    for (var i = 0; i < (name || '').length; i++) hash = (name || '').charCodeAt(i) + ((hash << 5) - hash);
    var bg = colors[Math.abs(hash) % colors.length];
    return 'data:image/svg+xml,' + encodeURIComponent(
      '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size + '">' +
      '<rect fill="' + bg + '" width="' + size + '" height="' + size + '" rx="' + (size / 2) + '"/>' +
      '<text x="50%" y="50%" dy=".35em" fill="#fff" text-anchor="middle" font-family="system-ui" font-size="' + (size * 0.4) + '">' + initials + '</text></svg>'
    );
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Broadcast API
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Broadcast namespace (ephemeral real-time messages) ──────── */
  var _broadcastHandlers = {};

  window.deplixo.broadcast = {
    send: function (type, data) {
      var vid = window.deplixo.user
        ? window.deplixo.user.id
        : (document.cookie.match(/bw_visitor_id=([^;]+)/) || [])[1] || "";
      return fetch(apiBase + "/broadcast/" + appId + "/send", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({
          type: type,
          data: data || {},
          visitor_id: vid,
        }),
      }).then(function (r) {
        return r.json();
      });
    },

    on: function (type, handler) {
      if (!_broadcastHandlers[type]) _broadcastHandlers[type] = [];
      _broadcastHandlers[type].push(handler);
      ensureSSE();
    },

    off: function (type, handler) {
      if (!_broadcastHandlers[type]) return;
      if (handler) {
        _broadcastHandlers[type] = _broadcastHandlers[type].filter(function (h) {
          return h !== handler;
        });
      } else {
        delete _broadcastHandlers[type];
      }
    },

    // Aliases — AI-generated apps commonly use these names
    emit: function (type, data) {
      console.warn('[deplixo] .emit() is a compatibility alias. Prefer .send().');
      return window.deplixo.broadcast.send(type, data);
    },
    listen: function (type, handler) {
      console.warn('[deplixo] .listen() is a compatibility alias. Prefer .on().');
      return window.deplixo.broadcast.on(type, handler);
    },
    subscribe: function (type, handler) {
      console.warn('[deplixo] .subscribe() is a compatibility alias. Prefer .on().');
      return window.deplixo.broadcast.on(type, handler);
    },
    publish: function (type, data) {
      console.warn('[deplixo] .publish() is a compatibility alias. Prefer .send().');
      return window.deplixo.broadcast.send(type, data);
    },
    unsubscribe: function (type, handler) {
      console.warn('[deplixo] .unsubscribe() is a compatibility alias. Prefer .off().');
      return window.deplixo.broadcast.off(type, handler);
    },
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Webhooks
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Webhooks namespace ────────────────────────────────────────── */
  var _webhookHandlers = {};

  window.deplixo.webhooks = {
    on: function (name, handler) {
      if (!_webhookHandlers[name]) _webhookHandlers[name] = [];
      _webhookHandlers[name].push(handler);
      ensureSSE();
    },
    list: function (name, opts) {
      opts = opts || {};
      var limit = opts.limit || 50;
      var offset = opts.offset || 0;
      return fetch(
        apiBase +
          "/hooks/" +
          appId +
          "/" +
          encodeURIComponent(name) +
          "?limit=" +
          limit +
          "&offset=" +
          offset
      )
        .then(function (r) {
          return r.json();
        })
        .then(function (data) {
          return data.items || [];
        });
    },
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Cron
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Cron namespace (read-only from client) ─────────────────── */
  window.deplixo.cron = {
    list: function() {
        return fetch(apiBase + "/cron/" + appId + "/jobs")
            .then(function(r) { return r.json(); })
            .then(function(data) { return data.jobs || []; });
    },
    pause: function(name) {
        return fetch(apiBase + "/cron/" + appId + "/jobs/" + encodeURIComponent(name) + "/pause", {
            method: "POST", credentials: "include"
        }).then(function(r) { return r.json(); });
    },
    resume: function(name) {
        return fetch(apiBase + "/cron/" + appId + "/jobs/" + encodeURIComponent(name) + "/resume", {
            method: "POST", credentials: "include"
        }).then(function(r) { return r.json(); });
    }
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Triggers
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Triggers namespace ─────────────────────────────────────── */
  window.deplixo.triggers = {
    list: function () {
      return fetch(apiBase + "/triggers/" + appId + "/")
        .then(function (r) { return r.json(); })
        .then(function (data) { return data.triggers || []; });
    },
    pause: function (name) {
      return fetch(apiBase + "/triggers/" + appId + "/" + encodeURIComponent(name) + "/pause", {
        method: "POST", credentials: "include"
      }).then(function (r) { return r.json(); });
    },
    resume: function (name) {
      return fetch(apiBase + "/triggers/" + appId + "/" + encodeURIComponent(name) + "/resume", {
        method: "POST", credentials: "include"
      }).then(function (r) { return r.json(); });
    },
    history: function (name) {
      var url = apiBase + "/triggers/" + appId + "/history";
      if (name) url = apiBase + "/triggers/" + appId + "/" + encodeURIComponent(name) + "/history";
      return fetch(url, { credentials: "include" })
        .then(function (r) { return r.json(); })
        .then(function (data) { return data.history || []; });
    },
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Presence API
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Presence namespace ─────────────────────────────────────── */
  var _presenceCallbacks = [];
  var _presenceHeartbeat = null;

  window.deplixo.presence = {
    join: function(opts) {
      opts = opts || {};
      var pVisitorId = window.deplixo.user ? window.deplixo.user.id : (document.cookie.match(/bw_visitor_id=([^;]+)/) || [])[1] || 'anon';
      var payload = {
        visitor_id: pVisitorId,
        name: opts.name || (window.deplixo.user ? window.deplixo.user.name : '') || '',
        status: opts.status || 'online',
        avatar: opts.avatar || '',
        room: opts._room || ''
      };

      // Start heartbeat — stops automatically if the app is deleted (404)
      if (_presenceHeartbeat) clearInterval(_presenceHeartbeat);
      _presenceHeartbeat = setInterval(function() {
        fetch(apiBase + '/presence/' + appId + '/heartbeat', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          credentials: 'include',
          body: JSON.stringify(payload)
        }).then(function(r) {
          if (r.status === 404) clearInterval(_presenceHeartbeat);
        }).catch(function() {});
      }, 15000);

      // Send leave on page unload
      window.addEventListener('beforeunload', function() {
        navigator.sendBeacon(apiBase + '/presence/' + appId + '/leave',
          new Blob([JSON.stringify(payload)], {type: 'application/json'}));
      });

      return fetch(apiBase + '/presence/' + appId + '/join', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify(payload)
      }).then(function(r) { return r.json(); });
    },

    leave: function() {
      if (_presenceHeartbeat) { clearInterval(_presenceHeartbeat); _presenceHeartbeat = null; }
      var pVisitorId = window.deplixo.user ? window.deplixo.user.id : (document.cookie.match(/bw_visitor_id=([^;]+)/) || [])[1] || 'anon';
      return fetch(apiBase + '/presence/' + appId + '/leave', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({visitor_id: pVisitorId})
      }).then(function(r) { return r.json(); });
    },

    list: function() {
      return fetch(apiBase + '/presence/' + appId + '/list', {credentials: 'include'})
        .then(function(r) { return r.json(); })
        .then(function(data) { return data.users || []; });
    },

    update: function(opts) {
      // Update status/name without re-joining
      var pVisitorId = window.deplixo.user ? window.deplixo.user.id : (document.cookie.match(/bw_visitor_id=([^;]+)/) || [])[1] || 'anon';
      return fetch(apiBase + '/presence/' + appId + '/heartbeat', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({visitor_id: pVisitorId, name: opts.name || '', status: opts.status || 'online', avatar: opts.avatar || ''})
      }).then(function(r) { return r.json(); });
    },

    onChange: function(cb) {
      _presenceCallbacks.push(cb);
      ensureSSE();
    }
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Notifications
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Notifications namespace ────────────────────────────────── */
  var _notifCallbacks = [];

  window.deplixo.notifications = {
    send: function(targetId, opts) {
      opts = opts || {};
      return fetch(apiBase + '/notifications/' + appId + '/send', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({
          target_id: targetId,
          type: opts.type || 'info',
          title: opts.title || '',
          body: opts.body || '',
          data: opts.data || {}
        })
      }).then(function(r) { return r.json(); });
    },

    list: function(opts) {
      opts = opts || {};
      var nVisitorId = opts.visitor_id || (window.deplixo.user ? window.deplixo.user.id : (document.cookie.match(/bw_visitor_id=([^;]+)/) || [])[1] || '');
      var params = 'visitor_id=' + encodeURIComponent(nVisitorId);
      if (opts.unread_only) params += '&unread_only=true';
      if (opts.limit) params += '&limit=' + opts.limit;
      return fetch(apiBase + '/notifications/' + appId + '/list?' + params, {credentials: 'include'})
        .then(function(r) { return r.json(); });
    },

    markRead: function(ids) {
      var nVisitorId = window.deplixo.user ? window.deplixo.user.id : (document.cookie.match(/bw_visitor_id=([^;]+)/) || [])[1] || '';
      return fetch(apiBase + '/notifications/' + appId + '/mark-read', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({
          visitor_id: nVisitorId,
          notification_ids: ids || []
        })
      }).then(function(r) { return r.json(); });
    },

    onChange: function(cb) {
      _notifCallbacks.push(cb);
      ensureSSE();
    },

    requestPermission: async function() {
      if (!('serviceWorker' in navigator) || !('PushManager' in window)) return false;
      var permission = await Notification.requestPermission();
      if (permission !== 'granted') return false;

      var reg = await navigator.serviceWorker.register('/static/push-sw.js');
      var vapidResp = await fetch(apiBase + '/push/vapid-key');
      var vapidData = await vapidResp.json();

      var subscription = await reg.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: deplixo._urlBase64ToUint8Array(vapidData.public_key)
      });

      var keys = subscription.toJSON().keys;
      await fetch(apiBase + '/push/' + appId + '/subscribe', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({
          visitor_id: visitorId,
          endpoint: subscription.endpoint,
          p256dh: keys.p256dh,
          auth_key: keys.auth
        })
      });

      return true;
    },

    hasPush: async function() {
      var r = await fetch(apiBase + '/push/' + appId + '/status?visitor_id=' + encodeURIComponent(visitorId), {credentials: 'include'});
      var data = await r.json();
      return data.has_push;
    },

    showPrompt: function(opts) {
      opts = opts || {};
      // Don't show if already subscribed
      this.hasPush().then(function(has) {
        if (has) return;

        // Don't show if dismissed this session
        if (sessionStorage.getItem('deplixo_push_prompt_dismissed')) return;

        var msg = opts.message || 'Get notified when something new happens';
        var pos = opts.position || 'bottom';

        var banner = document.createElement('div');
        banner.id = 'deplixo-push-prompt';
        banner.style.cssText = 'position:fixed;' + (pos === 'top' ? 'top:0;' : 'bottom:0;') +
          'left:0;right:0;z-index:999999;display:flex;align-items:center;justify-content:center;gap:12px;' +
          'padding:14px 20px;background:#8b5cf6;color:#fff;font-family:-apple-system,BlinkMacSystemFont,' +
          '"Segoe UI",Roboto,sans-serif;font-size:14px;box-shadow:0 -2px 10px rgba(0,0,0,0.15);';

        var text = document.createElement('span');
        text.textContent = msg;
        text.style.flex = '1';

        var enableBtn = document.createElement('button');
        enableBtn.textContent = 'Enable';
        enableBtn.style.cssText = 'background:#fff;color:#8b5cf6;border:none;padding:8px 16px;' +
          'border-radius:6px;font-weight:600;font-size:14px;cursor:pointer;';

        var dismissBtn = document.createElement('button');
        dismissBtn.textContent = 'Not now';
        dismissBtn.style.cssText = 'background:transparent;color:rgba(255,255,255,0.8);border:none;' +
          'padding:8px 12px;font-size:13px;cursor:pointer;';

        var self = window.deplixo.notifications;
        enableBtn.onclick = function() {
          banner.remove();
          self.requestPermission();
        };
        dismissBtn.onclick = function() {
          banner.remove();
          sessionStorage.setItem('deplixo_push_prompt_dismissed', '1');
        };

        banner.appendChild(text);
        banner.appendChild(enableBtn);
        banner.appendChild(dismissBtn);
        document.body.appendChild(banner);
      });
    },

    broadcast: async function(opts) {
      opts = opts || {};
      var r = await fetch(apiBase + '/notifications/' + appId + '/broadcast', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({title: opts.title || '', body: opts.body || '', type: opts.type || 'info', data: opts.data || {}})
      });
      return r.json();
    },

    stats: async function() {
      var r = await fetch(apiBase + '/notifications/' + appId + '/stats', {credentials: 'include'});
      return r.json();
    }
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // VAPID Key Helper
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── VAPID key helper ────────────────────────────────────────── */
  window.deplixo._showCreditsExhaustedModal = _showCreditsExhaustedModal;

  window.deplixo._urlBase64ToUint8Array = function(base64String) {
    var padding = '='.repeat((4 - base64String.length % 4) % 4);
    var base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    var rawData = atob(base64);
    var outputArray = new Uint8Array(rawData.length);
    for (var i = 0; i < rawData.length; i++) {
      outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Reactions
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Reactions namespace ──────────────────────────────────────── */
  var _reactionCallbacks = [];

  window.deplixo.reactions = {
    toggle: function(entryId, type) {
      var vid = window.deplixo.user ? window.deplixo.user.id : '';
      return fetch(apiBase + '/reactions/' + appId + '/toggle', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({entry_id: entryId, reaction_type: type || 'like', visitor_id: vid})
      }).then(function(r) { return r.json(); });
    },
    get: function(entryId) {
      var vid = window.deplixo.user ? window.deplixo.user.id : '';
      return fetch(apiBase + '/reactions/' + appId + '/get?entry_id=' + encodeURIComponent(entryId) + '&visitor_id=' + encodeURIComponent(vid), {credentials: 'include'})
        .then(function(r) { return r.json(); });
    },
    onChange: function(cb) {
      _reactionCallbacks.push(cb);
      ensureSSE();
    }
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Timers
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Timers namespace ─────────────────────────────────────────── */
  var _timerExpireCallbacks = {};

  window.deplixo.timers = {
    start: function(name, duration) {
      return fetch(apiBase + '/timers/' + appId + '/start', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({name: name, duration: duration || 0})
      }).then(function(r) { return r.json(); });
    },
    pause: function(name) {
      return fetch(apiBase + '/timers/' + appId + '/pause', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({name: name})
      }).then(function(r) { return r.json(); });
    },
    resume: function(name) {
      return fetch(apiBase + '/timers/' + appId + '/resume', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({name: name})
      }).then(function(r) { return r.json(); });
    },
    status: function(name) {
      return fetch(apiBase + '/timers/' + appId + '/status?name=' + encodeURIComponent(name), {credentials: 'include'})
        .then(function(r) { return r.json(); });
    },
    onExpire: function(name, cb) {
      if (!_timerExpireCallbacks[name]) _timerExpireCallbacks[name] = [];
      _timerExpireCallbacks[name].push(cb);
      ensureSSE();
    }
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Forms
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Forms namespace ──────────────────────────────────────────── */
  window.deplixo.forms = {
    create: function(name, schema) {
      return fetch(apiBase + '/forms/' + appId + '/create', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({name: name, schema: schema})
      }).then(function(r) { return r.json(); });
    },
    submit: function(name, data) {
      var vid = window.deplixo.user ? window.deplixo.user.id : '';
      var vname = window.deplixo.user ? window.deplixo.user.name : '';
      return fetch(apiBase + '/forms/' + appId + '/' + encodeURIComponent(name) + '/submit', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify({data: data, visitor_id: vid, visitor_name: vname})
      }).then(function(r) {
        return r.json().then(function(d) {
          if (!r.ok) { var e = new Error(d.error || 'Validation failed'); e.errors = d.errors; throw e; }
          return d;
        });
      });
    },
    list: function(name, opts) {
      opts = opts || {};
      var qs = '?limit=' + (opts.limit || 50);
      if (opts.offset) qs += '&offset=' + opts.offset;
      return fetch(apiBase + '/forms/' + appId + '/' + encodeURIComponent(name) + '/list' + qs, {credentials: 'include'})
        .then(function(r) { return r.json(); })
        .then(function(d) { return d.submissions || []; });
    },
    schema: function(name) {
      return fetch(apiBase + '/forms/' + appId + '/' + encodeURIComponent(name) + '/schema', {credentials: 'include'})
        .then(function(r) { return r.json(); });
    }
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Rooms
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── Rooms ──────────────────────────────────────────────────── */
  /* Rooms provide multiplayer isolation: presence, broadcast, and onReady
     are scoped per room. Data storage uses deplixo.db.collection() with
     the { room: room.id } option for room-scoped data. */
  window.deplixo.rooms = {
    join: function(roomId) {
      var _host = null;
      var _isHost = false;
      var _onReadyFired = false;

      var room = {
        id: roomId,
        get host() { return _host; },
        get isHost() { return _isHost; },
        presence: {
          join: function(opts) {
            opts = opts || {};
            opts._room = roomId;
            return window.deplixo.presence.join(opts);
          },
          list: function() {
            return fetch(apiBase + '/presence/' + appId + '/list?room=' + encodeURIComponent(roomId), {credentials: 'include'})
              .then(function(r) { return r.json(); })
              .then(function(data) { return data.users || []; });
          },
          onChange: function(cb) {
            window.deplixo.presence.onChange(function(evt) { cb(evt); });
          },
          leave: function() {
            return window.deplixo.presence.leave();
          }
        },
        collection: function(name, opts) {
          opts = opts || {};
          opts.room = roomId;
          return window.deplixo.db.collection(name, opts);
        },
        broadcast: {
          send: function(type, data) {
            return window.deplixo.broadcast.send('room:' + roomId + ':' + type, data);
          },
          on: function(type, handler) {
            window.deplixo.broadcast.on('room:' + roomId + ':' + type, handler);
          },
          off: function(type, handler) {
            window.deplixo.broadcast.off('room:' + roomId + ':' + type, handler);
          }
        },
        onReady: function(minPlayers, callback) {
          var checkReady = function() {
            room.presence.list().then(function(users) {
              if (_onReadyFired || users.length < minPlayers) return;
              var sorted = users.slice().sort(function(a, b) {
                return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
              });
              _host = sorted[0].id;
              _isHost = (sorted[0].id === visitorId);
              if (_isHost) {
                _onReadyFired = true;
                var mapped = users.map(function(u) {
                  return { userId: u.id, data: { name: u.name, status: u.status, avatar: u.avatar } };
                });
                callback(mapped);
              }
            });
          };
          room.presence.onChange(function() { checkReady(); });
          checkReady();
        },
        leave: function() {
          room.presence.leave();
        }
      };
      return room;
    },

    create: function(opts) {
      opts = opts || {};
      var roomId = opts.id || (Date.now().toString(36) + Math.random().toString(36).slice(2, 7));
      return window.deplixo.db.collection('_rooms').add({
        roomId: roomId,
        name: opts.name || roomId,
        createdAt: Date.now(),
        maxUsers: opts.maxUsers || 0,
      }).then(function(result) {
        return { id: roomId, dbId: result.id };
      });
    },

    list: function() {
      return window.deplixo.db.collection('_rooms').list()
        .then(function(items) {
          return items.map(function(item) {
            return { id: item.value.roomId, name: item.value.name, dbId: item.id };
          });
        });
    }
  };

  // ═══════════════════════════════════════════════════════════════════════════════
  // Notification Bell (Platform-Injected UI)
  // ═══════════════════════════════════════════════════════════════════════════════

  // Notification bell UI removed — notifications are now integrated into the
  // Deplixo FAB (server-injected in _serve_ui.py). The SDK notification APIs
  // (deplixo.notifications.send/list/markRead/onChange) remain unchanged.

  // ═══════════════════════════════════════════════════════════════════════════════
  // SSE Lifecycle Management
  // ═══════════════════════════════════════════════════════════════════════════════

  /* ── SSE lifecycle management ─────────────────────────────────── */
  // Reconnect when tab regains focus
  document.addEventListener("visibilitychange", function () {
    if (document.visibilityState !== "visible") return;
    if (_sse && _sse.readyState === 2) ensureSSE();
  });
  // Close SSE on page unload to free server resources immediately
  window.addEventListener("beforeunload", function () {
    if (_sse) { _sse.close(); _sse = null; }
  });
})();
</script>
<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  var _scriptCache = {};
  var _cssCache = {};

  /**
   * Lazy-load an external script by URL.
   * Returns a cached promise if already loading/loaded.
   * @param {string} url - CDN URL of the script
   * @param {string} globalName - Global variable the script exposes (e.g. "Chart")
   * @returns {Promise} Resolves when the script is loaded
   */
  d._loadScript = function (url, globalName) {
    if (_scriptCache[url]) return _scriptCache[url];
    if (globalName && window[globalName]) {
      _scriptCache[url] = Promise.resolve(window[globalName]);
      return _scriptCache[url];
    }
    _scriptCache[url] = new Promise(function (resolve, reject) {
      var s = document.createElement("script");
      s.src = url;
      s.async = true;
      s.onload = function () {
        resolve(globalName ? window[globalName] : undefined);
      };
      s.onerror = function () {
        delete _scriptCache[url];
        console.warn("[deplixo] Failed to load script:", url);
        reject(new Error("Failed to load script: " + url));
      };
      document.head.appendChild(s);
    });
    return _scriptCache[url];
  };

  /**
   * Lazy-load a CSS stylesheet by URL.
   * Returns a cached promise if already loading/loaded.
   * @param {string} url - CDN URL of the stylesheet
   * @returns {Promise} Resolves when the stylesheet is loaded
   */
  d._loadCSS = function (url) {
    if (_cssCache[url]) return _cssCache[url];
    _cssCache[url] = new Promise(function (resolve, reject) {
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = url;
      link.onload = function () {
        resolve();
      };
      link.onerror = function () {
        delete _cssCache[url];
        console.warn("[deplixo] Failed to load CSS:", url);
        reject(new Error("Failed to load CSS: " + url));
      };
      document.head.appendChild(link);
    });
    return _cssCache[url];
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  d.camera = {
    /**
     * Start a live camera viewfinder in a container element.
     * Returns a controller with capture() and stop() methods.
     * @param {HTMLElement} el - Container element for the video preview
     * @param {object} opts - { facing: "user"|"environment", width, height }
     * @returns {Promise<{capture: Function, stop: Function, video: HTMLVideoElement}>}
     */
    start: function (el, opts) {
      opts = opts || {};
      var facing = opts.facing || "user";
      var width = opts.width || 640;
      var height = opts.height || 480;

      // Stop any existing camera stream on this container (React re-renders)
      if (el._deplixoCamera) {
        try { el._deplixoCamera.stop(); } catch (e) {}
        el._deplixoCamera = null;
      }

      return navigator.mediaDevices
        .getUserMedia({
          video: { facingMode: facing, width: width, height: height },
        })
        .then(function (stream) {
          var video = document.createElement("video");
          video.setAttribute("playsinline", "true");
          video.autoplay = true;
          video.muted = true;
          video.style.width = "100%";
          video.style.maxWidth = width + "px";
          video.style.borderRadius = "8px";
          video.style.display = "block";
          if (facing === "user") {
            video.style.transform = "scaleX(-1)";
          }
          el.appendChild(video);

          return new Promise(function (resolve, reject) {
            video.onloadedmetadata = function () {
              video.play();
              var controller = {
                video: video,
                /**
                 * Capture the current frame as a JPEG Blob.
                 * @returns {Promise<Blob>}
                 */
                capture: function () {
                  return new Promise(function (res) {
                    var canvas = document.createElement("canvas");
                    canvas.width = video.videoWidth || width;
                    canvas.height = video.videoHeight || height;
                    var ctx = canvas.getContext("2d");
                    if (ctx) {
                      if (facing === "user") {
                        ctx.translate(canvas.width, 0);
                        ctx.scale(-1, 1);
                      }
                      ctx.drawImage(video, 0, 0);
                    }
                    if (canvas.toBlob) {
                      canvas.toBlob(function (blob) {
                        res(blob);
                      }, "image/jpeg", 0.92);
                    } else {
                      res(new Blob([], { type: "image/jpeg" }));
                    }
                  });
                },
                /**
                 * Stop the camera stream and remove the video element.
                 */
                stop: function () {
                  stream.getTracks().forEach(function (t) {
                    t.stop();
                  });
                  video.remove();
                  el._deplixoCamera = null;
                },
              };
              el._deplixoCamera = controller;
              resolve(controller);
            };
            video.onerror = function () {
              stream.getTracks().forEach(function (t) {
                t.stop();
              });
              video.remove();
              reject(new Error("Video element failed"));
            };
            video.srcObject = stream;
          });
        });
    },

    /**
     * Take a single photo using the device camera (one-shot, no preview).
     * @param {object} opts - { facing: "user"|"environment", width, height }
     * @returns {Promise<Blob>} JPEG image blob
     */
    photo: function (opts) {
      opts = opts || {};
      var facing = opts.facing || "environment";
      var width = opts.width || 640;
      var height = opts.height || 480;

      return navigator.mediaDevices
        .getUserMedia({
          video: { facingMode: facing, width: width, height: height },
        })
        .then(function (stream) {
          return new Promise(function (resolve, reject) {
            var video = document.createElement("video");
            video.setAttribute("playsinline", "true");
            video.width = width;
            video.height = height;

            video.onloadedmetadata = function () {
              video.play();
              // Small delay to let camera auto-adjust
              setTimeout(function () {
                var canvas = document.createElement("canvas");
                canvas.width = video.videoWidth || width;
                canvas.height = video.videoHeight || height;
                var ctx = canvas.getContext("2d");
                if (ctx) {
                  ctx.drawImage(video, 0, 0);
                }
                stream.getTracks().forEach(function (t) {
                  t.stop();
                });
                if (canvas.toBlob) {
                  canvas.toBlob(function (blob) {
                    resolve(blob);
                  }, "image/jpeg");
                } else {
                  resolve(new Blob([], { type: "image/jpeg" }));
                }
              }, 200);
            };

            video.onerror = function () {
              stream.getTracks().forEach(function (t) {
                t.stop();
              });
              reject(new Error("Video element failed"));
            };

            video.srcObject = stream;
          });
        });
    },

    /**
     * Scan using the camera (alias for deplixo.qr.scan for convenience).
     * @returns {Promise<string>}
     */
    scan: function () {
      if (d.qr && d.qr.scan) return d.qr.scan();
      return Promise.reject(new Error("QR scanning not available"));
    },
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  var CHART_CDN =
    "https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js";

  /**
   * Create a Chart.js chart inside a container element.
   * Chart.js is lazy-loaded from CDN on first use.
   * @param {HTMLElement} el - Container element
   * @param {object} config - Chart.js config { type, data, options }
   * @returns {Promise<Chart>} The Chart.js instance
   */
  d.chart = function (el, config) {
    return d._loadScript(CHART_CDN, "Chart").then(function (Chart) {
      // Destroy any existing chart on this container (React re-renders)
      if (el._deplixoChart) {
        try { el._deplixoChart.destroy(); } catch (e) {}
        el._deplixoChart = null;
      }
      el.innerHTML = '';
      var canvas = document.createElement("canvas");
      el.appendChild(canvas);
      var chart = new Chart(canvas.getContext("2d"), config);
      el._deplixoChart = chart;
      return chart;
    });
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  /**
   * Create a rich text editor inside a container element.
   * @param {HTMLElement} el - Container element
   * @param {object} opts - { placeholder, toolbar, content }
   * @returns {object} { getContent, setContent, onChange }
   */
  d.editor = function (el, opts) {
    opts = opts || {};
    var _changeCallbacks = [];

    // Clean up any existing editor in this container (React re-renders)
    if (el._deplixoEditor) {
      el.innerHTML = '';
      el._deplixoEditor = null;
    }

    // Build toolbar
    var toolbar = document.createElement("div");
    toolbar.className = "deplixo-editor-toolbar";
    toolbar.style.cssText =
      "display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid #ddd;background:#f8f8f8;border-radius:8px 8px 0 0;flex-wrap:wrap;";

    var buttons =
      opts.toolbar || ["bold", "italic", "underline", "link", "ul", "ol", "heading"];
    var btnDefs = {
      bold: { cmd: "bold", label: "<b>B</b>" },
      italic: { cmd: "italic", label: "<i>I</i>" },
      underline: { cmd: "underline", label: "<u>U</u>" },
      strikethrough: { cmd: "strikeThrough", label: "<s>S</s>" },
      link: { cmd: "createLink", label: "&#128279;", prompt: true },
      ul: { cmd: "insertUnorderedList", label: "&#8226;" },
      ol: { cmd: "insertOrderedList", label: "1." },
      heading: { cmd: "formatBlock", label: "H", value: "h2" },
    };

    buttons.forEach(function (name) {
      var def = btnDefs[name];
      if (!def) return;
      var btn = document.createElement("button");
      btn.type = "button";
      btn.innerHTML = def.label;
      btn.style.cssText =
        "border:1px solid #ccc;background:#fff;border-radius:4px;padding:4px 8px;cursor:pointer;font-size:13px;min-width:28px;";
      btn.title = name;
      btn.addEventListener("click", function (e) {
        e.preventDefault();
        if (def.prompt) {
          var val = prompt("Enter URL:");
          if (val) document.execCommand(def.cmd, false, val);
        } else if (def.value) {
          document.execCommand(def.cmd, false, def.value);
        } else {
          document.execCommand(def.cmd, false, null);
        }
      });
      toolbar.appendChild(btn);
    });

    // Build editable area
    var editable = document.createElement("div");
    editable.className = "deplixo-editor-content";
    editable.contentEditable = "true";
    editable.style.cssText =
      "min-height:150px;padding:12px;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;outline:none;font-family:inherit;line-height:1.6;";
    if (opts.placeholder) {
      editable.setAttribute("data-placeholder", opts.placeholder);
    }
    if (opts.content) {
      editable.innerHTML = opts.content;
    }

    // Listen for changes
    editable.addEventListener("input", function () {
      _changeCallbacks.forEach(function (cb) {
        cb(editable.innerHTML);
      });
    });

    el.appendChild(toolbar);
    el.appendChild(editable);

    var instance = {
      /** Get the HTML content of the editor */
      getContent: function () {
        return editable.innerHTML;
      },
      /** Set the HTML content of the editor */
      setContent: function (html) {
        editable.innerHTML = html;
      },
      /** Register a callback for content changes */
      onChange: function (cb) {
        _changeCallbacks.push(cb);
      },
      /** The editable DOM element */
      element: editable,
      /** The toolbar DOM element */
      toolbarElement: toolbar,
      /** Destroy the editor and clean up */
      destroy: function () {
        el.innerHTML = '';
        el._deplixoEditor = null;
        _changeCallbacks = [];
      },
    };
    el._deplixoEditor = instance;
    return instance;
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;
  var appId = "75743060-3551-4061-ad49-500e66b5264b";
  var apiBase = "/api/v1";

  d.email = {};

  /**
   * Send an email from this app. Costs platform credits.
   * @param {object} opts - { to, subject, body, html, reply_to }
   * @returns {Promise<{status, message_id, credits_used, credits_remaining}>}
   */
  d.email.send = function (opts) {
    opts = opts || {};
    if (!opts.to) return Promise.reject(new Error("email.send: 'to' is required"));
    if (!opts.subject) return Promise.reject(new Error("email.send: 'subject' is required"));
    // Accept common aliases for 'body' (LLMs naturally use 'text', 'message', 'content')
    if (!opts.body) opts.body = opts.text || opts.message || opts.content || "";
    if (!opts.body && !opts.html)
      return Promise.reject(new Error("email.send: 'body' or 'html' is required"));

    var payload = {
      to: opts.to,
      subject: opts.subject,
      body: opts.body || "",
      html: opts.html || "",
    };
    if (opts.reply_to) payload.reply_to = opts.reply_to;

    return fetch(apiBase + "/email/" + appId + "/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    }).then(function (r) {
      return r.json().then(function (data) {
        if (!r.ok) {
          if (r.status === 402 && data.error === 'credits_exhausted' && d._showCreditsExhaustedModal) {
            d._showCreditsExhaustedModal();
          }
          var err = new Error(data.message || data.error || "Email send failed");
          err.code = data.error;
          err.credits_remaining = data.credits_remaining;
          throw err;
        }
        return data;
      });
    });
  };

  /**
   * Register an email address (opt-in). Stores email in the app's database.
   * @param {string} email - Email address to register
   * @param {string} [name] - Optional display name
   * @returns {Promise<{status, email}>}
   */
  d.email.register = function (email, name) {
    if (!email) return Promise.reject(new Error("email.register: email is required"));
    return fetch(apiBase + "/email/" + appId + "/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email: email, name: name || "" }),
    }).then(function (r) {
      return r.json().then(function (data) {
        if (!r.ok) throw new Error(data.message || "Registration failed");
        return data;
      });
    });
  };

  /**
   * Check if an email address is registered for this app.
   * @param {string} email - Email address to check
   * @returns {Promise<boolean>}
   */
  d.email.isRegistered = function (email) {
    if (!email) return Promise.resolve(false);
    return fetch(apiBase + "/email/" + appId + "/check?email=" + encodeURIComponent(email), {
      credentials: "include",
    }).then(function (r) {
      return r.json();
    }).then(function (data) {
      return !!data.registered;
    });
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  /* ── Shared helpers ─────────────────────────────────────────────── */
  function _extractYouTubeId(videoId) {
    var match = videoId.match(
      /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/
    );
    return match ? match[1] : videoId;
  }

  function _youtubeAttrs(opts) {
    return {
      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
      sandbox: "allow-scripts allow-same-origin allow-popups",
    };
  }

  d.embed = {
    /**
     * Embed a YouTube video.
     * If `el` is provided, appends an iframe to it and returns the iframe.
     * If `el` is null/undefined, returns an HTML string for use in templates.
     * @param {HTMLElement|null} el - Container element (or null for HTML string)
     * @param {string} videoId - YouTube video ID or full URL
     * @param {object} opts - { width, height, autoplay }
     * @returns {HTMLIFrameElement|string}
     */
    youtube: function (el, videoId, opts) {
      opts = opts || {};
      var id = _extractYouTubeId(videoId);
      var src = "https://www.youtube.com/embed/" + id;
      if (opts.autoplay) src += "?autoplay=1";
      var w = opts.width || "100%";
      var h = opts.height || "315";
      var attrs = _youtubeAttrs(opts);

      // HTML string mode — for use in template literals
      if (!el) {
        return '<iframe src="' + src + '" width="' + w + '" height="' + h + '"'
          + ' frameborder="0" allow="' + attrs.allow + '"'
          + ' allowfullscreen sandbox="' + attrs.sandbox + '"'
          + ' style="max-width:100%;border:none;"></iframe>';
      }

      var iframe = document.createElement("iframe");
      iframe.src = src;
      iframe.width = w;
      iframe.height = h;
      iframe.frameBorder = "0";
      iframe.allow = attrs.allow;
      iframe.allowFullscreen = true;
      iframe.setAttribute("sandbox", attrs.sandbox);
      iframe.style.maxWidth = "100%";
      el.appendChild(iframe);
      return iframe;
    },

    /**
     * Embed a CodePen.
     * If `el` is null, returns an HTML string.
     * @param {HTMLElement|null} el - Container element (or null for HTML string)
     * @param {string} penUrl - CodePen URL (e.g. "https://codepen.io/user/pen/abc123")
     * @param {object} opts - { height, theme, defaultTab }
     * @returns {HTMLIFrameElement|string}
     */
    codepen: function (el, penUrl, opts) {
      opts = opts || {};
      var embedUrl = penUrl.replace("/pen/", "/embed/");
      var params = [];
      params.push("theme-id=" + (opts.theme || "dark"));
      params.push("default-tab=" + (opts.defaultTab || "result"));
      embedUrl += "?" + params.join("&");
      var h = opts.height || "400";
      var sandbox = "allow-scripts allow-same-origin allow-popups allow-forms";

      if (!el) {
        return '<iframe src="' + embedUrl + '" width="100%" height="' + h + '"'
          + ' frameborder="0" sandbox="' + sandbox + '"'
          + ' style="max-width:100%;border:none;"></iframe>';
      }

      var iframe = document.createElement("iframe");
      iframe.src = embedUrl;
      iframe.width = "100%";
      iframe.height = h;
      iframe.frameBorder = "0";
      iframe.setAttribute("sandbox", sandbox);
      iframe.style.maxWidth = "100%";
      el.appendChild(iframe);
      return iframe;
    },

    /**
     * Embed any URL in a sandboxed iframe.
     * If `el` is null, returns an HTML string.
     * @param {HTMLElement|null} el - Container element (or null for HTML string)
     * @param {string} url - URL to embed
     * @param {object} opts - { width, height, sandbox }
     * @returns {HTMLIFrameElement|string}
     */
    iframe: function (el, url, opts) {
      opts = opts || {};
      var w = opts.width || "100%";
      var h = opts.height || "500";
      var sandbox = opts.sandbox || "allow-scripts allow-same-origin";

      if (!el) {
        return '<iframe src="' + url + '" width="' + w + '" height="' + h + '"'
          + ' frameborder="0" sandbox="' + sandbox + '"'
          + ' style="max-width:100%;border:none;"></iframe>';
      }

      var iframe = document.createElement("iframe");
      iframe.src = url;
      iframe.width = w;
      iframe.height = h;
      iframe.frameBorder = "0";
      iframe.setAttribute("sandbox", sandbox);
      iframe.style.maxWidth = "100%";
      el.appendChild(iframe);
      return iframe;
    },
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  /**
   * Trigger a file download in the browser.
   */
  function _download(filename, content, mimeType) {
    var blob = new Blob([content], { type: mimeType });
    var url = URL.createObjectURL(blob);
    var a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }

  d.export = {
    /**
     * Export data as CSV (RFC 4180 compliant).
     * @param {Array<object>} data - Array of objects
     * @param {string} filename - Download filename (default: "export.csv")
     * @param {object} opts - { columns: string[], delimiter: string }
     */
    csv: function (data, filename, opts) {
      if (!data || !data.length) return;
      opts = opts || {};
      var delim = opts.delimiter || ",";
      var cols = opts.columns || Object.keys(data[0]);

      function escapeField(val) {
        if (val == null) return "";
        var s = String(val);
        if (s.indexOf(delim) !== -1 || s.indexOf('"') !== -1 || s.indexOf("\n") !== -1) {
          return '"' + s.replace(/"/g, '""') + '"';
        }
        return s;
      }

      var lines = [cols.map(escapeField).join(delim)];
      for (var i = 0; i < data.length; i++) {
        var row = [];
        for (var j = 0; j < cols.length; j++) {
          row.push(escapeField(data[i][cols[j]]));
        }
        lines.push(row.join(delim));
      }
      _download(filename || "export.csv", lines.join("\r\n"), "text/csv;charset=utf-8");
    },

    /**
     * Export data as JSON.
     * @param {*} data - Any JSON-serializable data
     * @param {string} filename - Download filename (default: "export.json")
     */
    json: function (data, filename) {
      _download(
        filename || "export.json",
        JSON.stringify(data, null, 2),
        "application/json"
      );
    },

    /**
     * Export arbitrary content as a file.
     * @param {string} filename - Download filename
     * @param {string|Blob} content - File content
     * @param {string} mimeType - MIME type (default: "text/plain")
     */
    file: function (filename, content, mimeType) {
      if (content instanceof Blob) {
        var url = URL.createObjectURL(content);
        var a = document.createElement("a");
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      } else {
        _download(filename, content, mimeType || "text/plain");
      }
    },

    /**
     * Take a screenshot of an element using html2canvas (lazy-loaded).
     * @param {HTMLElement} el - Element to capture
     * @param {object} opts - html2canvas options
     * @returns {Promise<string>} Data URL of the screenshot
     */
    screenshot: function (el, opts) {
      return d
        ._loadScript(
          "https://cdn.jsdelivr.net/npm/html2canvas@1/dist/html2canvas.min.js",
          "html2canvas"
        )
        .then(function (html2canvas) {
          return html2canvas(el, opts || {});
        })
        .then(function (canvas) {
          return canvas.toDataURL("image/png");
        });
    },
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  var LEAFLET_JS =
    "https://cdn.jsdelivr.net/npm/leaflet@1.9/dist/leaflet.js";
  var LEAFLET_CSS =
    "https://cdn.jsdelivr.net/npm/leaflet@1.9/dist/leaflet.css";

  var _leafletReady = null;

  function _ensureLeaflet() {
    if (_leafletReady) return _leafletReady;
    _leafletReady = Promise.all([
      d._loadScript(LEAFLET_JS, "L"),
      d._loadCSS(LEAFLET_CSS),
    ]).then(function (results) {
      return results[0]; // L
    });
    return _leafletReady;
  }

  /**
   * Create a Leaflet map inside a container element.
   * @param {HTMLElement} el - Container element (must have explicit height)
   * @param {object} opts - { center: [lat, lng], zoom, tiles, geolocate }
   *   geolocate defaults to true — map auto-centers on user's location.
   *   Pass geolocate: false to disable.
   * @returns {Promise<L.Map>} The Leaflet map instance with addMarker helper
   */
  d.map = function (el, opts) {
    opts = opts || {};
    return _ensureLeaflet().then(function (L) {
      var center = (Array.isArray(opts.center) && isFinite(opts.center[0]) && isFinite(opts.center[1]))
        ? opts.center : [51.505, -0.09];
      var zoom = opts.zoom || 13;
      // Destroy any existing map on this container (React re-renders, hot reload)
      if (el._deplixoMap) {
        try { el._deplixoMap.remove(); } catch (e) {}
        el._deplixoMap = null;
      } else if (el._leaflet_id) {
        el._leaflet_id = undefined;
        while (el.firstChild) el.removeChild(el.firstChild);
      }
      var map = L.map(el).setView(center, zoom);

      var tileUrl =
        opts.tiles ||
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
      L.tileLayer(tileUrl, {
        attribution:
          '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 19,
      }).addTo(map);

      /**
       * Helper to add a marker.
       * @param {number} lat
       * @param {number} lng
       * @param {string} popup - Optional popup text
       * @returns {L.Marker}
       */
      map.addMarker = function (lat, lng, popup) {
        if (!isFinite(lat) || !isFinite(lng)) return null;
        var marker = L.marker([lat, lng]).addTo(map);
        if (popup) marker.bindPopup(popup);
        return marker;
      };

      el._deplixoMap = map;

      // Auto-center on user's location unless explicitly disabled
      if (opts.geolocate !== false && navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (pos) {
          map.setView([pos.coords.latitude, pos.coords.longitude], zoom);
        }, function () { /* denied or unavailable — stay at default */ });
      }

      return map;
    });
  };

  /* ── Geolocation helper ─────────────────────────────────────── */
  d.location = {
    /**
     * Get the user's current position.
     * @param {object} opts - PositionOptions (enableHighAccuracy, timeout, maximumAge)
     * @returns {Promise<{lat: number, lng: number, accuracy: number}>}
     */
    get: function (opts) {
      return new Promise(function (resolve, reject) {
        if (!navigator.geolocation) {
          reject(new Error("Geolocation not supported"));
          return;
        }
        navigator.geolocation.getCurrentPosition(
          function (pos) {
            resolve({
              lat: pos.coords.latitude,
              lng: pos.coords.longitude,
              latitude: pos.coords.latitude,
              longitude: pos.coords.longitude,
              accuracy: pos.coords.accuracy,
            });
          },
          function (err) {
            reject(new Error(err.message || "Geolocation failed"));
          },
          opts
        );
      });
    },
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  var PDF_CDN =
    "https://cdn.jsdelivr.net/npm/html2pdf.js@0.10/dist/html2pdf.bundle.min.js";

  d.pdf = {
    /**
     * Create a PDF from an HTML element and trigger download.
     * html2pdf.js is lazy-loaded from CDN on first use.
     * @param {HTMLElement} el - Element to convert to PDF
     * @param {object} opts - { filename, margin, image, html2canvas, jsPDF }
     * @returns {Promise<void>}
     */
    create: function (el, opts) {
      opts = opts || {};
      return d._loadScript(PDF_CDN, "html2pdf").then(function (html2pdf) {
        var config = {
          margin: opts.margin || 10,
          filename: opts.filename || "document.pdf",
          image: opts.image || { type: "jpeg", quality: 0.98 },
          html2canvas: opts.html2canvas || { scale: 2, useCORS: true },
          jsPDF: opts.jsPDF || { unit: "mm", format: "a4", orientation: "portrait" },
          // Critical default — without this html2pdf renders the
          // element to a single canvas and slices at the A4 boundary,
          // cropping content past the first page. Apps with multi-card
          // / multi-section content (portrait reports, invoices,
          // receipts) only get page 1 in the output. The 'css' mode
          // honours `page-break-*` CSS rules; 'legacy' adds simple
          // table/row/list-item splitting; 'avoid: ...' lets callers
          // protect specific blocks (cards, headings) from mid-element
          // splits.
          pagebreak: opts.pagebreak || {
            mode: ["css", "legacy"],
            avoid: opts.avoid || [".value-card", ".pdf-avoid-break"],
          },
        };
        return html2pdf().set(config).from(el).save();
      });
    },

    /**
     * Preview a PDF in an iframe without downloading.
     * @param {HTMLElement} el - Element to convert to PDF
     * @param {HTMLElement} container - Container for the preview iframe
     * @param {object} opts - Same as create()
     * @returns {Promise<HTMLIFrameElement>}
     */
    preview: function (el, container, opts) {
      opts = opts || {};
      return d._loadScript(PDF_CDN, "html2pdf").then(function (html2pdf) {
        var config = {
          margin: opts.margin || 10,
          image: opts.image || { type: "jpeg", quality: 0.98 },
          html2canvas: opts.html2canvas || { scale: 2, useCORS: true },
          jsPDF: opts.jsPDF || { unit: "mm", format: "a4", orientation: "portrait" },
          pagebreak: opts.pagebreak || {
            mode: ["css", "legacy"],
            avoid: opts.avoid || [".value-card", ".pdf-avoid-break"],
          },
        };
        return html2pdf()
          .set(config)
          .from(el)
          .outputPdf("bloburl")
          .then(function (blobUrl) {
            var iframe = document.createElement("iframe");
            iframe.src = blobUrl;
            iframe.width = "100%";
            iframe.height = opts.height || "600";
            iframe.style.border = "none";
            container.appendChild(iframe);
            return iframe;
          });
      });
    },
  };
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  var QR_CDN =
    "https://cdn.jsdelivr.net/npm/qr-creator@1/dist/qr-creator.min.js";
  var HTML5_QR_CDN =
    "https://cdn.jsdelivr.net/npm/html5-qrcode@2.3.8/html5-qrcode.min.js";

  d.qr = {
    /**
     * Generate a QR code and append it to a container element.
     * @param {HTMLElement} el - Container element
     * @param {string} text - Text/URL to encode
     * @param {object} opts - { size, color, background }
     * @returns {Promise<HTMLCanvasElement>}
     */
    generate: function (el, text, opts) {
      opts = opts || {};
      return d._loadScript(QR_CDN, "QrCreator").then(function (QrCreator) {
        var canvas = document.createElement("canvas");
        QrCreator.render(
          {
            text: text,
            radius: 0,
            ecLevel: "M",
            fill: opts.color || "#000000",
            background: opts.background || "#ffffff",
            size: opts.size || 200,
          },
          canvas
        );
        el.appendChild(canvas);
        return canvas;
      });
    },

    /**
     * Generate a QR code and return it as a data URL.
     * @param {string} text - Text/URL to encode
     * @param {object} opts - { size, color, background }
     * @returns {Promise<string>} Data URL
     */
    toDataURL: function (text, opts) {
      opts = opts || {};
      return d._loadScript(QR_CDN, "QrCreator").then(function (QrCreator) {
        var canvas = document.createElement("canvas");
        QrCreator.render(
          {
            text: text,
            radius: 0,
            ecLevel: "M",
            fill: opts.color || "#000000",
            background: opts.background || "#ffffff",
            size: opts.size || 200,
          },
          canvas
        );
        return canvas.toDataURL("image/png");
      });
    },

    /**
     * Scan a QR code or barcode using the camera.
     *
     * Opens a full-screen camera overlay with viewfinder. The user points
     * their camera at a code and it auto-detects and returns the value.
     * Works on all modern browsers including iOS Safari.
     *
     * Uses native BarcodeDetector where available (Chrome/Edge/Android),
     * falls back to html5-qrcode library (iOS Safari, Firefox, etc).
     *
     * @param {object} opts - Optional settings
     * @param {string[]} opts.formats - Barcode formats to detect.
     *   Default: QR, EAN-13, EAN-8, UPC-A, UPC-E, Code 128, Code 39, etc.
     * @returns {Promise<string>} Decoded text from the code
     */
    scan: function (opts) {
      opts = opts || {};

      // Decide which scanning engine to use
      if (window.BarcodeDetector) {
        return _scanWithNative(opts);
      } else {
        return _scanWithLibrary(opts);
      }
    },
  };

  // ── Shared: Full-screen camera overlay ──────────────────────────

  function _createScanOverlay() {
    var overlay = document.createElement("div");
    overlay.id = "deplixo-scan-overlay";
    overlay.style.cssText =
      "position:fixed;inset:0;z-index:999999;background:#000;" +
      "display:flex;flex-direction:column;align-items:center;" +
      "justify-content:center;font-family:system-ui,-apple-system,sans-serif;";

    // Status text
    var status = document.createElement("div");
    status.id = "deplixo-scan-status";
    status.style.cssText =
      "color:#fff;font-size:16px;margin-bottom:16px;text-align:center;" +
      "padding:0 24px;";
    status.textContent = "Starting camera\u2026";
    overlay.appendChild(status);

    // Viewfinder container
    var viewfinder = document.createElement("div");
    viewfinder.id = "deplixo-scan-viewfinder";
    viewfinder.style.cssText =
      "width:min(90vw,400px);height:min(90vw,400px);position:relative;" +
      "border-radius:16px;overflow:hidden;background:#111;";
    overlay.appendChild(viewfinder);

    // Scanning indicator (animated border)
    var indicator = document.createElement("div");
    indicator.style.cssText =
      "position:absolute;inset:0;border:3px solid rgba(99,102,241,0.6);" +
      "border-radius:16px;pointer-events:none;z-index:1;" +
      "animation:deplixo-scan-pulse 1.5s ease-in-out infinite;";
    viewfinder.appendChild(indicator);

    // Cancel button
    var cancel = document.createElement("button");
    cancel.textContent = "Cancel";
    cancel.style.cssText =
      "margin-top:24px;padding:12px 32px;border:none;border-radius:12px;" +
      "background:rgba(255,255,255,0.15);color:#fff;font-size:16px;" +
      "font-weight:600;cursor:pointer;backdrop-filter:blur(4px);";
    overlay.appendChild(cancel);

    // Pulse animation
    var style = document.createElement("style");
    style.textContent =
      "@keyframes deplixo-scan-pulse{" +
      "0%,100%{border-color:rgba(99,102,241,0.3);}" +
      "50%{border-color:rgba(99,102,241,0.8);}" +
      "}";
    overlay.appendChild(style);

    document.body.appendChild(overlay);

    return {
      overlay: overlay,
      viewfinder: viewfinder,
      status: status,
      cancel: cancel,
      destroy: function () {
        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
      },
    };
  }

  // ── Native BarcodeDetector path (Chrome, Edge, Android) ─────────

  function _scanWithNative(opts) {
    var formats = opts.formats || [
      "qr_code", "ean_13", "ean_8", "upc_a", "upc_e",
      "code_128", "code_39", "codabar", "itf",
    ];

    var ui = _createScanOverlay();
    var stream = null;
    var cancelled = false;
    var timerId = null;

    return new Promise(function (resolve, reject) {
      function cleanup() {
        cancelled = true;
        if (timerId) clearTimeout(timerId);
        if (stream) {
          stream.getTracks().forEach(function (t) { t.stop(); });
        }
        ui.destroy();
      }

      ui.cancel.onclick = function () {
        cleanup();
        reject(new Error("Scan cancelled"));
      };

      navigator.mediaDevices
        .getUserMedia({ video: { facingMode: "environment" } })
        .then(function (s) {
          if (cancelled) { s.getTracks().forEach(function (t) { t.stop(); }); return; }
          stream = s;

          var video = document.createElement("video");
          video.srcObject = stream;
          video.setAttribute("playsinline", "true");
          video.autoplay = true;
          video.muted = true;
          video.style.cssText = "width:100%;height:100%;object-fit:cover;";
          ui.viewfinder.appendChild(video);
          ui.status.textContent = "Point camera at a barcode or QR code";

          var detector = new BarcodeDetector({ formats: formats });
          var attempts = 0;
          var maxAttempts = 150; // ~15 seconds

          function tryDetect() {
            if (cancelled) return;
            detector.detect(video)
              .then(function (codes) {
                if (cancelled) return;
                if (codes.length > 0) {
                  cleanup();
                  resolve(codes[0].rawValue);
                } else if (++attempts < maxAttempts) {
                  timerId = setTimeout(tryDetect, 100);
                } else {
                  cleanup();
                  reject(new Error("No code found — try moving closer or improving lighting"));
                }
              })
              .catch(function (err) {
                cleanup();
                reject(err);
              });
          }

          video.onloadedmetadata = function () {
            video.play();
            timerId = setTimeout(tryDetect, 300);
          };
        })
        .catch(function (err) {
          cleanup();
          reject(new Error("Camera access denied or unavailable"));
        });
    });
  }

  // ── html5-qrcode fallback (iOS Safari, Firefox, etc) ────────────

  function _scanWithLibrary(opts) {
    var ui = _createScanOverlay();
    var scanner = null;
    var cancelled = false;

    return d._loadScript(HTML5_QR_CDN, "Html5Qrcode").then(function () {
      if (cancelled) { ui.destroy(); return Promise.reject(new Error("Scan cancelled")); }

      // html5-qrcode needs a div with an ID
      ui.viewfinder.id = "deplixo-scan-reader";
      ui.status.textContent = "Point camera at a barcode or QR code";

      var Html5Qrcode = window.Html5Qrcode;
      scanner = new Html5Qrcode("deplixo-scan-reader");

      return new Promise(function (resolve, reject) {
        function cleanup() {
          cancelled = true;
          if (scanner) {
            try { scanner.stop().catch(function () {}); } catch (e) {}
          }
          ui.destroy();
        }

        ui.cancel.onclick = function () {
          cleanup();
          reject(new Error("Scan cancelled"));
        };

        var config = {
          fps: 10,
          qrbox: function (viewfinderWidth, viewfinderHeight) {
            var size = Math.min(viewfinderWidth, viewfinderHeight) * 0.8;
            return { width: size, height: size };
          },
          formatsToSupport: _html5QrFormats(opts.formats),
        };

        scanner.start(
          { facingMode: "environment" },
          config,
          function onSuccess(decodedText) {
            cleanup();
            resolve(decodedText);
          },
          function onFailure() {
            // Ignore per-frame failures — keep scanning
          }
        ).catch(function (err) {
          cleanup();
          reject(new Error("Camera access denied or unavailable"));
        });
      });
    }).catch(function (err) {
      ui.destroy();
      return Promise.reject(err);
    });
  }

  // Map our format names to html5-qrcode format enum values
  function _html5QrFormats(formats) {
    if (!window.Html5QrcodeSupportedFormats) return undefined;
    var F = window.Html5QrcodeSupportedFormats;
    var map = {
      "qr_code": F.QR_CODE,
      "ean_13": F.EAN_13,
      "ean_8": F.EAN_8,
      "upc_a": F.UPC_A,
      "upc_e": F.UPC_E,
      "code_128": F.CODE_128,
      "code_39": F.CODE_39,
      "codabar": F.CODABAR,
      "itf": F.ITF,
    };
    if (!formats) return undefined; // html5-qrcode scans all by default
    var result = [];
    formats.forEach(function (f) {
      if (map[f] !== undefined) result.push(map[f]);
    });
    return result.length > 0 ? result : undefined;
  }
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  /**
   * Share content via Web Share API with clipboard fallback.
   * @param {object} opts - { title, text, url }
   * @returns {Promise<string>} "shared" if Web Share used, "copied" if clipboard fallback
   */
  d.share = function (opts) {
    opts = opts || {};
    if (navigator.share) {
      return navigator
        .share({
          title: opts.title || "",
          text: opts.text || "",
          url: opts.url || window.location.href,
        })
        .then(function () {
          return "shared";
        })
        .catch(function () {
          return _clipboardFallback(opts.url || window.location.href);
        });
    }
    return _clipboardFallback(opts.url || window.location.href);
  };

  function _clipboardFallback(url) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      return navigator.clipboard.writeText(url).then(function () {
        return "copied";
      });
    }
    // Last resort: execCommand
    var ta = document.createElement("textarea");
    ta.value = url;
    ta.style.position = "fixed";
    ta.style.left = "-9999px";
    document.body.appendChild(ta);
    ta.select();
    document.execCommand("copy");
    document.body.removeChild(ta);
    return Promise.resolve("copied");
  }
})();
</script>

<script>
(function () {
  var d = window.deplixo || {};
  window.deplixo = d;

  var _ctx = null;
  var _loaded = {};

  function _getCtx() {
    if (!_ctx) _ctx = new AudioContext();
    return _ctx;
  }

  /* ── Built-in sound definitions (Web Audio synth) ───────────── */
  var BUILTIN_SOUNDS = {
    ping: { freq: 880, dur: 0.15, type: "sine" },
    pop: { freq: 520, dur: 0.1, type: "sine" },
    click: { freq: 1200, dur: 0.05, type: "square" },
    ding: { freq: 660, dur: 0.3, type: "sine" },
    error: { freq: 200, dur: 0.3, type: "sawtooth" },
    success: { freq: 880, dur: 0.2, type: "triangle" },
    whoosh: { freq: 400, dur: 0.2, type: "sine", sweep: 1200 },
    beep: { freq: 1000, dur: 0.12, type: "square" },
  };

  function _playBuiltin(name) {
    var def = BUILTIN_SOUNDS[name];
    if (!def) {
      console.warn("[deplixo] Unknown built-in sound:", name);
      return;
    }
    var ctx = _getCtx();
    var osc = ctx.createOscillator();
    var gain = ctx.createGain();
    osc.type = def.type;
    osc.frequency.setValueAtTime(def.freq, ctx.currentTime);
    if (def.sweep) {
      osc.frequency.linearRampToValueAtTime(
        def.freq + def.sweep,
        ctx.currentTime + def.dur
      );
    }
    gain.gain.setValueAtTime(0.3, ctx.currentTime);
    gain.gain.linearRampToValueAtTime(0, ctx.currentTime + def.dur);
    osc.connect(gain);
    gain.connect(ctx.destination);
    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + def.dur);
  }

  d.sound = {
    /**
     * Play a built-in sound or a loaded audio URL.
     * Built-in sounds are prefixed with "@": deplixo.sound.play("@ping")
     * @param {string} name - "@ping", "@pop", etc. or a loaded sound name
     */
    play: function (name) {
      if (name.charAt(0) === "@") {
        _playBuiltin(name.slice(1));
        return;
      }
      var audio = _loaded[name];
      if (!audio) {
        console.warn("[deplixo] Sound not loaded:", name);
        return;
      }
      audio.currentTime = 0;
      audio.play().catch(function () {});
    },

    /**
     * Load an audio file for later playback.
     * @param {string} name - Name to reference later
     * @param {string} url - URL of the audio file
     * @returns {Promise<void>}
     */
    load: function (name, url) {
      return new Promise(function (resolve, reject) {
        var audio = new Audio(url);
        audio.preload = "auto";
        audio.addEventListener("canplaythrough", function () {
          _loaded[name] = audio;
          resolve();
        });
        audio.addEventListener("error", function () {
          reject(new Error("Failed to load audio: " + url));
        });
        audio.load();
      });
    },

    /**
     * Stop a loaded sound.
     * @param {string} name - Name of the loaded sound
     */
    stop: function (name) {
      var audio = _loaded[name];
      if (audio) {
        audio.pause();
        audio.currentTime = 0;
      }
    },

    /** List available built-in sound names */
    builtins: Object.keys(BUILTIN_SOUNDS),
  };
})();
</script>
<script>if("serviceWorker"in navigator)navigator.serviceWorker.register("/75743060-3551-4061-ad49-500e66b5264b/sw.js")</script>
      <Stats tickets={tickets} />
      <Filters currentFilter={currentFilter} setCurrentFilter={setCurrentFilter} />
      <AddTicket addTicket={addTicketItem} addActivity={addActivity} />
      <TicketList
        tickets={tickets}
        loading={ticketsLoading}
        currentFilter={currentFilter}
        user={user}
        updateTicket={updateTicket}
        removeTicket={removeTicket}
        addActivity={addActivity}
        onEdit={setEditingId}
      />
      <EditModal
        editingId={editingId}
        tickets={tickets}
        updateTicket={updateTicket}
        addActivity={addActivity}
        onClose={() => setEditingId(null)}
      />
      <ActivityLog activity={activity} user={user} loading={activityLoading} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);


<!-- Deplixo FAB + Share Overlay + About Modal -->
<div id="bw-fab-wrap" style="position:fixed!important;bottom:20px!important;left:20px!important;z-index:999999!important;font-family:system-ui,-apple-system,sans-serif!important;">
  <div id="bw-fab-menu" style="display:none!important;position:absolute!important;bottom:56px!important;left:0!important;background:#1a1a2e!important;border-radius:12px!important;padding:6px 0!important;box-shadow:0 4px 20px rgba(0,0,0,0.4)!important;min-width:160px!important;">
    <div id="bw-fab-share" style="display:flex!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;cursor:pointer!important;border-radius:8px!important;transition:background .15s!important;" onmouseover="this.style.background='#2a2a4e'" onmouseout="this.style.background='transparent'"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0!important;"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg><span style="font-size:13px!important;color:#e0e0e0!important;white-space:nowrap!important;">Share</span></div><div id="bw-fab-copy" style="display:flex!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;cursor:pointer!important;border-radius:8px!important;transition:background .15s!important;" onmouseover="this.style.background='#2a2a4e'" onmouseout="this.style.background='transparent'"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0!important;"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 21V11l-9-8"/><path d="M21 3l-9 8"/></svg><span style="font-size:13px!important;color:#e0e0e0!important;white-space:nowrap!important;">Fork It</span></div><div id="bw-fab-notif" style="display:flex!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;cursor:pointer!important;border-radius:8px!important;transition:background .15s!important;" onmouseover="this.style.background='#2a2a4e'" onmouseout="this.style.background='transparent'"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0!important;"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span style="font-size:13px!important;color:#e0e0e0!important;white-space:nowrap!important;">Notifications</span><span id="bw-fab-notif-count" style="display:none!important;background:#ef4444!important;color:#fff!important;font-size:10px!important;font-weight:700!important;min-width:16px!important;height:16px!important;border-radius:8px!important;align-items:center!important;justify-content:center!important;padding:0 4px!important;margin-left:auto!important;"></span></div><div id="bw-fab-install" style="display:none!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;cursor:pointer!important;border-radius:8px!important;transition:background .15s!important;" onmouseover="this.style.background='#2a2a4e'" onmouseout="this.style.background='transparent'"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0!important;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg><span style="font-size:13px!important;color:#e0e0e0!important;white-space:nowrap!important;">Install App</span></div><div id="bw-fab-dismiss" style="display:flex!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;cursor:pointer!important;border-radius:8px!important;transition:background .15s!important;" onmouseover="this.style.background='#2a2a4e'" onmouseout="this.style.background='transparent'"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0!important;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg><span style="font-size:13px!important;color:#e0e0e0!important;white-space:nowrap!important;">Dismiss</span></div><div style="border-top:1px solid #333!important;margin:4px 0!important;"></div><a href="https://deplixo.com/privacy/" target="_blank" rel="noopener" style="display:flex!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;cursor:pointer!important;border-radius:8px!important;text-decoration:none!important;transition:background .15s!important;" onmouseover="this.style.background='#2a2a4e'" onmouseout="this.style.background='transparent'"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0!important;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><span style="font-size:13px!important;color:#e0e0e0!important;white-space:nowrap!important;">Privacy</span></a><div id="bw-fab-about" style="display:flex!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;cursor:pointer!important;border-radius:8px!important;transition:background .15s!important;" onmouseover="this.style.background='#2a2a4e'" onmouseout="this.style.background='transparent'"><img src="https://deplixo.com/static/images/android-chrome-192x192.4c11bd8be85a.png" alt="Deplixo" style="width:16px!important;height:16px!important;border-radius:3px!important;flex-shrink:0!important;"><span style="font-size:13px!important;color:#e0e0e0!important;white-space:nowrap!important;">About Deplixo</span></div>
  </div>
  <button id="bw-fab-btn" style="width:48px!important;height:48px!important;border-radius:50%!important;background:rgba(26,26,46,0.75)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,0.15)!important;cursor:grab!important;box-shadow:0 2px 12px rgba(0,0,0,0.35)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;transition:transform .15s!important;touch-action:none!important;position:relative!important;" onmouseover="if(!this.dragging)this.style.transform='scale(1.1)'" onmouseout="if(!this.dragging)this.style.transform='scale(1)'">
    <img src="https://deplixo.com/static/images/android-chrome-192x192.4c11bd8be85a.png" alt="Deplixo" style="width:34px!important;height:34px!important;border-radius:50%!important;pointer-events:none!important;">
    <span id="bw-fab-badge" style="display:none!important;position:absolute!important;top:-4px!important;right:-4px!important;background:#ef4444!important;color:#fff!important;font-size:11px!important;font-weight:700!important;min-width:18px!important;height:18px!important;border-radius:9px!important;align-items:center!important;justify-content:center!important;padding:0 4px!important;pointer-events:none!important;box-shadow:0 1px 3px rgba(0,0,0,0.3)!important;"></span>
  </button>
</div>

<div id="bw-share-overlay" style="display:none!important;position:fixed!important;inset:0!important;background:rgba(0,0,0,0.85)!important;z-index:9999999!important;align-items:center!important;justify-content:center!important;font-family:system-ui,-apple-system,sans-serif!important;">
  <button id="bw-share-close" style="position:absolute!important;top:16px!important;right:16px!important;background:none!important;border:none!important;color:#fff!important;font-size:28px!important;cursor:pointer!important;padding:8px!important;line-height:1!important;z-index:1!important;">&times;</button>
  <div style="text-align:center!important;padding:24px!important;max-width:340px!important;width:90vw!important;">
    <div style="font-size:18px!important;font-weight:600!important;color:#fff!important;margin-bottom:20px!important;">duotasks</div>
    <img src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&amp;data=https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b" alt="QR Code" style="width:200px!important;height:200px!important;border-radius:12px!important;background:#fff!important;padding:8px!important;margin-bottom:16px!important;">
    <div style="font-size:12px!important;color:#888!important;font-family:monospace!important;word-break:break-all!important;margin-bottom:20px!important;">https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b</div>
    <div style="display:flex!important;gap:10px!important;justify-content:center!important;flex-wrap:wrap!important;">
      <button id="bw-copy-btn" style="background:#905AE8!important;color:#fff!important;border:none!important;border-radius:8px!important;padding:10px 20px!important;font-size:14px!important;font-weight:600!important;cursor:pointer!important;">Copy Link</button>
      <button id="bw-native-share" style="display:none!important;background:#333!important;color:#fff!important;border:none!important;border-radius:8px!important;padding:10px 20px!important;font-size:14px!important;font-weight:600!important;cursor:pointer!important;">Share</button>
    </div>
  </div>
</div>

<div id="bw-about-overlay" style="display:none!important;position:fixed!important;inset:0!important;background:rgba(0,0,0,0.85)!important;z-index:9999999!important;align-items:center!important;justify-content:center!important;font-family:system-ui,-apple-system,sans-serif!important;">
  <button id="bw-about-close" style="position:absolute!important;top:16px!important;right:16px!important;background:none!important;border:none!important;color:#fff!important;font-size:28px!important;cursor:pointer!important;padding:8px!important;line-height:1!important;z-index:1!important;">&times;</button>
  <div style="text-align:center!important;padding:40px 28px!important;max-width:380px!important;width:90vw!important;">
    <img src="https://deplixo.com/static/images/android-chrome-192x192.4c11bd8be85a.png" alt="Deplixo" style="width:72px!important;height:72px!important;border-radius:16px!important;margin-bottom:20px!important;">
    <div style="font-size:26px!important;font-weight:700!important;color:#fff!important;margin-bottom:8px!important;">Deplixo</div>
    <div style="font-size:16px!important;color:#905AE8!important;font-weight:600!important;margin-bottom:24px!important;">Turn ideas into shareable apps</div>
    <p style="font-size:15px!important;color:#ccc!important;line-height:1.7!important;margin:0 0 12px!important;">This app was built with AI and hosted on Deplixo.</p>
    <p style="font-size:15px!important;color:#ccc!important;line-height:1.7!important;margin:0 0 16px!important;">You can do the same &mdash; just describe what you want and get a working app in under a minute.</p>
    <p style="font-size:15px!important;color:#fff!important;font-weight:600!important;margin:0 0 28px!important;">No coding. No signup. Completely free.</p>
    <a href="https://deplixo.com/" target="_blank" rel="noopener" style="display:inline-block!important;background:#905AE8!important;color:#fff!important;border:none!important;border-radius:10px!important;padding:14px 40px!important;font-size:16px!important;font-weight:700!important;cursor:pointer!important;text-decoration:none!important;transition:background .15s!important;" onmouseover="this.style.background='#7c3aed'" onmouseout="this.style.background='#905AE8'">Learn More</a>
  </div>
</div>
<div id="bw-copy-overlay" style="display:none!important;position:fixed!important;inset:0!important;background:rgba(0,0,0,0.85)!important;z-index:9999999!important;align-items:center!important;justify-content:center!important;font-family:system-ui,-apple-system,sans-serif!important;">
  <button id="bw-copy-close" style="position:absolute!important;top:16px!important;right:16px!important;background:none!important;border:none!important;color:#fff!important;font-size:28px!important;cursor:pointer!important;padding:8px!important;line-height:1!important;z-index:1!important;">&times;</button>
  <div style="text-align:center!important;padding:40px 28px!important;max-width:380px!important;width:90vw!important;">
    <div style="width:56px!important;height:56px!important;border-radius:14px!important;background:rgba(144,90,232,0.15)!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto 20px!important;">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#905AE8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3h5v5"/><path d="M8 3H3v5"/><path d="M12 21V11l-9-8"/><path d="M21 3l-9 8"/></svg>
    </div>
    <div style="font-size:22px!important;font-weight:700!important;color:#fff!important;margin-bottom:10px!important;">Fork It</div>
    <p style="font-size:15px!important;color:#ccc!important;line-height:1.7!important;margin:0 0 8px!important;">Fork <strong style="color:#fff!important;">duotasks</strong> to your account.</p>
    <p style="font-size:13px!important;color:#888!important;line-height:1.6!important;margin:0 0 28px!important;">You&rsquo;ll get your own version to customize and edit freely. The original app won&rsquo;t be affected.</p>
    <div id="bw-copy-error" style="display:none!important;background:rgba(239,68,68,0.15)!important;border:1px solid rgba(239,68,68,0.3)!important;border-radius:8px!important;padding:10px 14px!important;margin-bottom:16px!important;font-size:13px!important;color:#f87171!important;"></div>
    <div style="display:flex!important;gap:10px!important;justify-content:center!important;">
      <button id="bw-copy-cancel" style="background:#333!important;color:#fff!important;border:none!important;border-radius:10px!important;padding:13px 28px!important;font-size:15px!important;font-weight:600!important;cursor:pointer!important;transition:background .15s!important;" onmouseover="this.style.background='#444'" onmouseout="this.style.background='#333'">Cancel</button>
      <button id="bw-copy-confirm" style="background:#905AE8!important;color:#fff!important;border:none!important;border-radius:10px!important;padding:13px 28px!important;font-size:15px!important;font-weight:700!important;cursor:pointer!important;transition:background .15s!important;" onmouseover="this.style.background='#7c3aed'" onmouseout="this.style.background='#905AE8'">Fork to My Account</button>
    </div>
  </div>
</div>

<div id="bw-install-overlay" style="display:none!important;position:fixed!important;inset:0!important;background:rgba(0,0,0,0.85)!important;z-index:9999999!important;align-items:center!important;justify-content:center!important;font-family:system-ui,-apple-system,sans-serif!important;">
  <button id="bw-install-close" style="position:absolute!important;top:16px!important;right:16px!important;background:none!important;border:none!important;color:#fff!important;font-size:28px!important;cursor:pointer!important;padding:8px!important;line-height:1!important;z-index:1!important;">&times;</button>
  <div style="text-align:center!important;padding:40px 28px!important;max-width:380px!important;width:90vw!important;">
    <div style="width:56px!important;height:56px!important;border-radius:14px!important;background:rgba(144,90,232,0.15)!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto 20px!important;">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#905AE8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
    </div>
    <div style="font-size:22px!important;font-weight:700!important;color:#fff!important;margin-bottom:10px!important;">Install App</div>
    <p style="font-size:15px!important;color:#ccc!important;line-height:1.7!important;margin:0 0 24px!important;">Add <strong style="color:#fff!important;">duotasks</strong> to your home screen for quick access &mdash; just like a native app.</p>
    <div style="text-align:left!important;background:rgba(255,255,255,0.05)!important;border-radius:12px!important;padding:20px!important;margin-bottom:28px!important;">
      <div style="display:flex!important;align-items:flex-start!important;gap:14px!important;margin-bottom:16px!important;">
        <div style="width:28px!important;height:28px!important;border-radius:8px!important;background:rgba(144,90,232,0.2)!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;font-size:14px!important;font-weight:700!important;color:#905AE8!important;">1</div>
        <div>
          <div style="font-size:14px!important;font-weight:600!important;color:#fff!important;margin-bottom:2px!important;">Tap the Share button</div>
          <div style="font-size:13px!important;color:#888!important;">The square icon with an arrow pointing up <span style="font-size:16px!important;vertical-align:middle!important;">&#xFE0E;&#x2934;&#xFE0E;</span></div>
        </div>
      </div>
      <div style="display:flex!important;align-items:flex-start!important;gap:14px!important;">
        <div style="width:28px!important;height:28px!important;border-radius:8px!important;background:rgba(144,90,232,0.2)!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;font-size:14px!important;font-weight:700!important;color:#905AE8!important;">2</div>
        <div>
          <div style="font-size:14px!important;font-weight:600!important;color:#fff!important;margin-bottom:2px!important;">Tap &ldquo;Add to Home Screen&rdquo;</div>
          <div style="font-size:13px!important;color:#888!important;">Scroll down in the share sheet to find it</div>
        </div>
      </div>
    </div>
    <button id="bw-install-ok" style="background:#905AE8!important;color:#fff!important;border:none!important;border-radius:10px!important;padding:13px 40px!important;font-size:15px!important;font-weight:700!important;cursor:pointer!important;transition:background .15s!important;" onmouseover="this.style.background='#7c3aed'" onmouseout="this.style.background='#905AE8'">Got it</button>
  </div>
</div>

<div id="bw-notif-overlay" style="display:none!important;position:fixed!important;inset:0!important;background:rgba(0,0,0,0.85)!important;z-index:9999999!important;align-items:center!important;justify-content:center!important;font-family:system-ui,-apple-system,sans-serif!important;">
  <button id="bw-notif-close" style="position:absolute!important;top:16px!important;right:16px!important;background:none!important;border:none!important;color:#fff!important;font-size:28px!important;cursor:pointer!important;padding:8px!important;line-height:1!important;z-index:1!important;">&times;</button>
  <div style="max-width:400px!important;width:90vw!important;max-height:80vh!important;display:flex!important;flex-direction:column!important;">
    <div id="bw-notif-list-view">
      <div style="display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:16px!important;">
        <div style="font-size:20px!important;font-weight:700!important;color:#fff!important;">Notifications</div>
        <button id="bw-notif-mark-all" style="background:none!important;border:none!important;color:#905AE8!important;font-size:13px!important;cursor:pointer!important;padding:4px 8px!important;">Mark all read</button>
      </div>
      <div id="bw-notif-items" style="overflow-y:auto!important;max-height:60vh!important;border-radius:12px!important;background:rgba(255,255,255,0.05)!important;">
        <div style="padding:32px!important;text-align:center!important;color:#888!important;font-size:14px!important;">Loading...</div>
      </div>
    </div>
    <div id="bw-notif-detail-view" style="display:none!important;">
      <button id="bw-notif-back" style="background:none!important;border:none!important;color:#905AE8!important;font-size:14px!important;cursor:pointer!important;padding:4px 0!important;margin-bottom:12px!important;display:flex!important;align-items:center!important;gap:6px!important;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        Back
      </button>
      <div id="bw-notif-detail-title" style="font-size:18px!important;font-weight:700!important;color:#fff!important;margin-bottom:12px!important;"></div>
      <div id="bw-notif-detail-body" style="font-size:15px!important;color:#ccc!important;line-height:1.7!important;overflow-y:auto!important;max-height:55vh!important;white-space:pre-wrap!important;word-wrap:break-word!important;"></div>
    </div>
  </div>
</div>



<script>
(function(){
  var fabBtn=document.getElementById('bw-fab-btn');
  var fabMenu=document.getElementById('bw-fab-menu');
  var fabWrap=document.getElementById('bw-fab-wrap');
  var shareItem=document.getElementById('bw-fab-share');
  var aboutItem=document.getElementById('bw-fab-about');
  var dismissItem=document.getElementById('bw-fab-dismiss');
  var copyItem=document.getElementById('bw-fab-copy');
  var shareOverlay=document.getElementById('bw-share-overlay');
  var aboutOverlay=document.getElementById('bw-about-overlay');
  var shareClose=document.getElementById('bw-share-close');
  var aboutClose=document.getElementById('bw-about-close');
  var copyBtn=document.getElementById('bw-copy-btn');
  var nativeShare=document.getElementById('bw-native-share');
  var appUrl="https://deplixo.com/75743060-3551-4061-ad49-500e66b5264b";
  var appTitle="duotasks";
  var menuOpen=false;

  /* --- Drag to move --- */
  var isDragging=false,didDrag=false,startX,startY,origX,origY;
  function getPos(){
    var r=fabWrap.getBoundingClientRect();
    return {x:r.left,y:r.top};
  }
  function onDragStart(ex,ey){
    isDragging=true;didDrag=false;
    var p=getPos();
    startX=ex;startY=ey;origX=p.x;origY=p.y;
    fabBtn.style.cursor='grabbing';
    fabBtn.dragging=true;
  }
  function onDragMove(ex,ey){
    if(!isDragging)return;
    var dx=ex-startX,dy=ey-startY;
    if(!didDrag&&Math.abs(dx)<5&&Math.abs(dy)<5)return;
    didDrag=true;
    var nx=origX+dx,ny=origY+dy;
    var bw=fabWrap.offsetWidth,bh=fabWrap.offsetHeight;
    nx=Math.max(0,Math.min(window.innerWidth-bw,nx));
    ny=Math.max(0,Math.min(window.innerHeight-bh,ny));
    fabWrap.style.setProperty('left',nx+'px','important');
    fabWrap.style.setProperty('top',ny+'px','important');
    fabWrap.style.setProperty('right','auto','important');
    fabWrap.style.setProperty('bottom','auto','important');
    /* Flip menu above/below based on position */
    if(ny>window.innerHeight/2){
      fabMenu.style.setProperty('bottom','56px','important');
      fabMenu.style.removeProperty('top');
    }else{
      fabMenu.style.setProperty('top','56px','important');
      fabMenu.style.setProperty('bottom','auto','important');
    }
  }
  function onDragEnd(){
    isDragging=false;
    fabBtn.style.cursor='grab';
    fabBtn.dragging=false;
  }
  fabBtn.addEventListener('mousedown',function(e){e.preventDefault();onDragStart(e.clientX,e.clientY);});
  document.addEventListener('mousemove',function(e){onDragMove(e.clientX,e.clientY);});
  document.addEventListener('mouseup',function(){onDragEnd();});
  fabBtn.addEventListener('touchstart',function(e){var t=e.touches[0];onDragStart(t.clientX,t.clientY);},{passive:true});
  document.addEventListener('touchmove',function(e){if(isDragging){e.preventDefault();var t=e.touches[0];onDragMove(t.clientX,t.clientY);}},{passive:false});
  document.addEventListener('touchend',function(){onDragEnd();});

  /* Toggle menu (only if not dragged) */
  fabBtn.addEventListener('click',function(e){
    if(didDrag)return;
    e.stopPropagation();
    menuOpen=!menuOpen;
    fabMenu.style.setProperty('display',menuOpen?'block':'none','important');
  });

  /* Close menu on outside click */
  document.addEventListener('click',function(e){
    if(menuOpen&&!fabMenu.contains(e.target)){
      menuOpen=false;
      fabMenu.style.setProperty('display','none','important');
    }
  });

  function openOverlay(el){
    menuOpen=false;
    fabMenu.style.setProperty('display','none','important');
    el.style.setProperty('display','flex','important');
  }
  function closeOverlay(el){
    el.style.setProperty('display','none','important');
  }

  /* Share overlay */
  shareItem.addEventListener('click',function(){ if(typeof umami!=='undefined')umami.track('app-share',{app_id:'75743060-3551-4061-ad49-500e66b5264b',app_title:appTitle}); openOverlay(shareOverlay); });
  shareClose.addEventListener('click',function(){ closeOverlay(shareOverlay); });
  shareOverlay.addEventListener('click',function(e){ if(e.target===shareOverlay) closeOverlay(shareOverlay); });

  /* About overlay */
  aboutItem.addEventListener('click',function(){ openOverlay(aboutOverlay); });
  aboutClose.addEventListener('click',function(){ closeOverlay(aboutOverlay); });
  aboutOverlay.addEventListener('click',function(e){ if(e.target===aboutOverlay) closeOverlay(aboutOverlay); });

  /* Dismiss FAB */
  if(dismissItem){
    dismissItem.addEventListener('click',function(){
      menuOpen=false;
      fabMenu.style.setProperty('display','none','important');
      fabWrap.style.setProperty('display','none','important');
      /* Show toast */
      var toast=document.createElement('div');
      toast.textContent='Menu dismissed — refresh to bring it back';
      toast.style.cssText='position:fixed!important;bottom:24px!important;left:50%!important;transform:translateX(-50%)!important;background:#1a1a2e!important;color:#e0e0e0!important;padding:12px 24px!important;border-radius:10px!important;font-size:14px!important;font-family:system-ui,-apple-system,sans-serif!important;box-shadow:0 4px 16px rgba(0,0,0,0.4)!important;z-index:9999999!important;opacity:1!important;transition:opacity .4s!important;';
      document.body.appendChild(toast);
      setTimeout(function(){toast.style.opacity='0';setTimeout(function(){toast.remove();},400);},3000);
    });
  }

  /* Copy App */
  var copyOverlay=document.getElementById('bw-copy-overlay');
  var copyClose=document.getElementById('bw-copy-close');
  var copyCancel=document.getElementById('bw-copy-cancel');
  var copyConfirm=document.getElementById('bw-copy-confirm');
  var copyError=document.getElementById('bw-copy-error');

  function closeCopyModal(){ closeOverlay(copyOverlay); copyError.style.setProperty('display','none','important'); copyConfirm.disabled=false; copyConfirm.textContent='Fork to My Account'; }
  if(copyClose) copyClose.addEventListener('click',closeCopyModal);
  if(copyCancel) copyCancel.addEventListener('click',closeCopyModal);
  if(copyOverlay) copyOverlay.addEventListener('click',function(e){ if(e.target===copyOverlay) closeCopyModal(); });

  if(copyItem){
    copyItem.addEventListener('click',function(){
      if(typeof umami!=='undefined')umami.track('app-fork',{app_id:'75743060-3551-4061-ad49-500e66b5264b',app_title:appTitle});
      menuOpen=false;
      fabMenu.style.setProperty('display','none','important');
      openOverlay(copyOverlay);
    });
  }

  if(copyConfirm){
    copyConfirm.addEventListener('click',function(){
      copyConfirm.disabled=true;
      copyConfirm.textContent='Forking…';
      copyError.style.setProperty('display','none','important');
      fetch('/api/v1/apps/75743060-3551-4061-ad49-500e66b5264b/copy',{method:'POST',credentials:'same-origin'})
      .then(function(r){return r.json()})
      .then(function(d){
        if(d.error){
          if(d.error.indexOf('limit')>-1){
            copyError.textContent=d.error;
            copyError.style.setProperty('display','block','important');
            copyConfirm.disabled=false;
            copyConfirm.textContent='Fork to My Account';
            return;
          }
          window.location.href='/accounts/login/?next=/75743060-3551-4061-ad49-500e66b5264b/fork-edit';
        }else if(d.claim_url){
          window.location.href=d.claim_url;
        }else{
          window.location.href='/build/edit/'+d.app_id+'/';
        }
      })
      .catch(function(){window.location.href='/accounts/login/?next=/75743060-3551-4061-ad49-500e66b5264b/fork-edit';});
    });
  }

  /* Copy link */
  copyBtn.addEventListener('click',function(){
    if(navigator.clipboard){
      navigator.clipboard.writeText(appUrl).then(function(){
        copyBtn.textContent='Copied!';
        setTimeout(function(){copyBtn.textContent='Copy Link'},2000);
      });
    }else{
      var t=document.createElement('textarea');
      t.value=appUrl;t.style.position='fixed';t.style.left='-9999px';
      document.body.appendChild(t);t.select();document.execCommand('copy');
      document.body.removeChild(t);
      copyBtn.textContent='Copied!';
      setTimeout(function(){copyBtn.textContent='Copy Link'},2000);
    }
  });

  /* Native share (mobile) */
  if(navigator.share){
    nativeShare.style.setProperty('display','inline-block','important');
    nativeShare.addEventListener('click',function(){
      navigator.share({title:appTitle,url:appUrl}).catch(function(){});
    });
  }

  /* Install App (PWA) */
  var installItem=document.getElementById('bw-fab-install');
  var installOverlay=document.getElementById('bw-install-overlay');
  var installClose=document.getElementById('bw-install-close');
  var installOk=document.getElementById('bw-install-ok');
  var deferredPrompt=null;
  var isIos=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream;
  var isStandalone=window.matchMedia('(display-mode:standalone)').matches||navigator.standalone;

  function closeInstallModal(){ closeOverlay(installOverlay); }
  if(installClose) installClose.addEventListener('click',closeInstallModal);
  if(installOk) installOk.addEventListener('click',closeInstallModal);
  if(installOverlay) installOverlay.addEventListener('click',function(e){ if(e.target===installOverlay) closeInstallModal(); });

  if(!isStandalone){
    /* Chrome/Android: capture beforeinstallprompt */
    window.addEventListener('beforeinstallprompt',function(e){
      e.preventDefault();
      deferredPrompt=e;
      installItem.style.setProperty('display','flex','important');
    });

    /* iOS Safari: show with tap-to-instructions */
    if(isIos){
      installItem.style.setProperty('display','flex','important');
    }

    installItem.addEventListener('click',function(){
      if(typeof umami!=='undefined')umami.track('app-install',{app_id:'75743060-3551-4061-ad49-500e66b5264b',app_title:appTitle});
      menuOpen=false;
      fabMenu.style.setProperty('display','none','important');
      if(deferredPrompt){
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then(function(){deferredPrompt=null;});
      }else if(isIos){
        openOverlay(installOverlay);
      }
    });

    /* Hide after successful install */
    window.addEventListener('appinstalled',function(){
      installItem.style.setProperty('display','none','important');
      deferredPrompt=null;
    });
  }

  /* ── Notification badge + overlay (merged into FAB) ── */
  var notifItem=document.getElementById('bw-fab-notif');
  var notifOverlay=document.getElementById('bw-notif-overlay');
  var notifClose=document.getElementById('bw-notif-close');
  var notifItems=document.getElementById('bw-notif-items');
  var notifMarkAll=document.getElementById('bw-notif-mark-all');
  var notifListView=document.getElementById('bw-notif-list-view');
  var notifDetailView=document.getElementById('bw-notif-detail-view');
  var notifDetailTitle=document.getElementById('bw-notif-detail-title');
  var notifDetailBody=document.getElementById('bw-notif-detail-body');
  var notifBack=document.getElementById('bw-notif-back');
  var fabBadge=document.getElementById('bw-fab-badge');
  var menuNotifCount=document.getElementById('bw-fab-notif-count');
  var notifFallbackHref='/notify';
  var bwNotifAppUsesNotifications=false;
  var bwNotifCache=[];

  function bwEscHtml(s){var d=document.createElement('div');d.textContent=s;return d.innerHTML;}

  function bwUpdateBadge(count){
    if(fabBadge){
      fabBadge.style.setProperty('display',count>0?'flex':'none','important');
      fabBadge.textContent=count>99?'99+':String(count);
    }
    if(menuNotifCount){
      menuNotifCount.style.setProperty('display',count>0?'flex':'none','important');
      menuNotifCount.textContent=count>99?'99+':String(count);
    }
  }

  function bwRenderNotifList(items){
    if(items.length===0){
      notifItems.innerHTML='<div style="padding:32px!important;text-align:center!important;color:#888!important;font-size:14px!important;">No notifications yet</div>';
      return;
    }
    notifItems.innerHTML=items.map(function(n,i){
      var bg=n.is_read?'transparent':'rgba(144,90,232,0.12)';
      var fw=n.is_read?'400':'600';
      var bodyPreview=n.body?(n.body.length>80?n.body.substring(0,80)+'…':n.body):'';
      return '<div data-nidx="'+i+'" style="display:flex!important;align-items:flex-start!important;gap:12px!important;padding:14px 16px!important;cursor:pointer!important;border-bottom:1px solid rgba(255,255,255,0.06)!important;background:'+bg+'!important;transition:background .15s!important;" onmouseover="this.style.background=\'rgba(255,255,255,0.08)\'" onmouseout="this.style.background=\''+bg+'\'">' +
        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="'+(n.is_read?'#666':'#905AE8')+'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0!important;margin-top:2px!important;"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>' +
        '<div style="min-width:0!important;flex:1!important;">' +
        '<div style="font-size:14px!important;font-weight:'+fw+'!important;color:#fff!important;">'+bwEscHtml(n.title||'')+'</div>' +
        (bodyPreview?'<div style="font-size:12px!important;color:#999!important;margin-top:2px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;">'+bwEscHtml(bodyPreview)+'</div>':'') +
        '</div>' +
        (n.is_read?'':'<div style="width:8px!important;height:8px!important;border-radius:50%!important;background:#905AE8!important;flex-shrink:0!important;margin-top:6px!important;"></div>') +
        '</div>';
    }).join('');
    notifItems.querySelectorAll('[data-nidx]').forEach(function(el){
      el.addEventListener('click',function(){
        var idx=parseInt(el.getAttribute('data-nidx'));
        var n=bwNotifCache[idx];
        if(!n)return;
        if(n.id&&!n.is_read)window.deplixo.notifications.markRead([parseInt(n.id)]).then(function(){bwRefreshNotifs();});
        notifDetailTitle.textContent=n.title||'';
        notifDetailBody.textContent=n.body||'No additional details.';
        notifListView.style.setProperty('display','none','important');
        notifDetailView.style.setProperty('display','block','important');
      });
    });
  }

  function bwRefreshNotifs(){
    if(!window.deplixo||!window.deplixo.notifications)return;
    window.deplixo.notifications.list({limit:20}).then(function(result){
      bwUpdateBadge(result.unread_count||0);
      bwNotifCache=result.items||[];
      bwRenderNotifList(bwNotifCache);
    });
  }

  function bwOpenNotifOverlay(){
    menuOpen=false;
    fabMenu.style.setProperty('display','none','important');
    notifListView.style.setProperty('display','block','important');
    notifDetailView.style.setProperty('display','none','important');
    notifOverlay.style.setProperty('display','flex','important');
    bwRefreshNotifs();
  }

  /* Notification menu item handler */
  if(notifItem){
    notifItem.addEventListener('click',function(){
      if(bwNotifAppUsesNotifications){
        bwOpenNotifOverlay();
      }else{
        window.open(notifFallbackHref,'_blank');
        menuOpen=false;
        fabMenu.style.setProperty('display','none','important');
      }
    });
  }

  /* Notification overlay close */
  if(notifClose) notifClose.addEventListener('click',function(){ closeOverlay(notifOverlay); });
  if(notifOverlay) notifOverlay.addEventListener('click',function(e){ if(e.target===notifOverlay) closeOverlay(notifOverlay); });

  /* Back button (detail → list) */
  if(notifBack) notifBack.addEventListener('click',function(){
    notifDetailView.style.setProperty('display','none','important');
    notifListView.style.setProperty('display','block','important');
  });

  /* Mark all read */
  if(notifMarkAll) notifMarkAll.addEventListener('click',function(){
    if(window.deplixo&&window.deplixo.notifications){
      window.deplixo.notifications.markRead([]).then(function(){ bwRefreshNotifs(); });
    }
  });

  /* Check if this app uses notifications — if so, enable badge + inline modal */
  function bwInitNotifBadge(){
    if(!window.deplixo||!window.deplixo.notifications)return;
    window.deplixo.notifications.list({limit:1}).then(function(result){
      if(!result)return;
      bwNotifAppUsesNotifications=true;
      bwUpdateBadge(result.unread_count||0);
      /* Listen for real-time updates */
      window.deplixo.notifications.onChange(function(){
        window.deplixo.notifications.list({limit:1}).then(function(r){
          bwUpdateBadge(r.unread_count||0);
        });
      });
    }).catch(function(){});
  }
  /* Wait for SDK to be ready */
  if(window.deplixo&&window.deplixo.notifications){
    bwInitNotifBadge();
  }else{
    var bwNotifTimer=setInterval(function(){
      if(window.deplixo&&window.deplixo.notifications){
        clearInterval(bwNotifTimer);
        bwInitNotifBadge();
      }
    },500);
    setTimeout(function(){clearInterval(bwNotifTimer);},15000);
  }
})();
</script>