@cs4alhaider/screenbook 0.1.0

package/bridge.js

@@ -0,0 +1,598 @@
+/*
+ * ScreenBook bridge — the ONLY file a screen ever includes.
+ *
+ * Dual mode:
+ *   embedded    — the ScreenBook shell drives it over postMessage (sb:* protocol)
+ *   standalone  — the screen was opened directly; the bridge self-loads the
+ *                 default theme + seed data so the screen still works alone.
+ *
+ * The shell itself also loads this file (with window.__SCREENBOOK_SHELL__ set)
+ * purely to reuse EngineKit — merge/flatten/date logic lives here exactly once.
+ */
+(function () {
+  'use strict';
+
+  var VERSION = '0.1.0';
+
+  /* ------------------------------------------------------------------ *
+   *  EngineKit — pure helpers shared by bridge (screens) and shell
+   * ------------------------------------------------------------------ */
+
+  function isPlainObject(v) {
+    return v !== null && typeof v === 'object' && !Array.isArray(v);
+  }
+
+  /* Deep merge: objects merge recursively, arrays and scalars replace. */
+  function deepMerge(base, over) {
+    if (!isPlainObject(base) || !isPlainObject(over)) {
+      return over === undefined ? base : over;
+    }
+    var out = {};
+    Object.keys(base).forEach(function (k) { out[k] = base[k]; });
+    Object.keys(over).forEach(function (k) {
+      out[k] = isPlainObject(base[k]) && isPlainObject(over[k])
+        ? deepMerge(base[k], over[k])
+        : over[k];
+    });
+    return out;
+  }
+
+  function clone(v) { return v === undefined ? v : JSON.parse(JSON.stringify(v)); }
+
+  /* Delete a dot-path ("trips.italy") from an object, in place. */
+  function removePath(obj, path) {
+    var parts = String(path).split('.');
+    var cur = obj;
+    for (var i = 0; i < parts.length - 1; i++) {
+      if (!isPlainObject(cur[parts[i]])) return;
+      cur = cur[parts[i]];
+    }
+    if (cur && typeof cur === 'object') delete cur[parts[parts.length - 1]];
+  }
+
+  /*
+   * Apply a scenario overlay to seed data:
+   *   { remove: ["path", ...], patch: {...} } — remove first, then deep-merge.
+   */
+  function applyScenario(seed, scenario) {
+    var data = clone(seed) || {};
+    if (!scenario) return data;
+    (scenario.remove || []).forEach(function (p) { removePath(data, p); });
+    if (scenario.patch) data = deepMerge(data, scenario.patch);
+    return data;
+  }
+
+  /* {{today}}, {{today+3}}, {{today-2}} → ISO YYYY-MM-DD (local time). */
+  var DATE_TOKEN = /\{\{\s*today\s*(?:([+-])\s*(\d+))?\s*\}\}/g;
+  function isoDate(offsetDays) {
+    var d = new Date();
+    d.setDate(d.getDate() + (offsetDays || 0));
+    var m = String(d.getMonth() + 1).padStart(2, '0');
+    var day = String(d.getDate()).padStart(2, '0');
+    return d.getFullYear() + '-' + m + '-' + day;
+  }
+  function resolveDateTokens(value) {
+    if (typeof value === 'string') {
+      return value.replace(DATE_TOKEN, function (_, sign, n) {
+        var off = n ? (sign === '-' ? -1 : 1) * parseInt(n, 10) : 0;
+        return isoDate(off);
+      });
+    }
+    if (Array.isArray(value)) return value.map(resolveDateTokens);
+    if (isPlainObject(value)) {
+      var out = {};
+      Object.keys(value).forEach(function (k) { out[k] = resolveDateTokens(value[k]); });
+      return out;
+    }
+    return value;
+  }
+
+  /*
+   * Flatten a token-mode object to CSS custom properties:
+   *   { color: { "ink-2": "#333" }, radius: { card: "20px" } }
+   *     → { "--color-ink-2": "#333", "--radius-card": "20px" }
+   */
+  function flattenTokens(node, prefix, out) {
+    out = out || {};
+    prefix = prefix || '';
+    if (!isPlainObject(node)) return out;
+    Object.keys(node).forEach(function (k) {
+      var v = node[k];
+      var path = prefix ? prefix + '-' + k : k;
+      if (isPlainObject(v)) flattenTokens(v, path, out);
+      else if (v !== null && v !== undefined) out['--' + path] = String(v);
+    });
+    return out;
+  }
+
+  /* Resolve a theme JSON + mode to flat CSS vars (dark deep-merges over light). */
+  function themeVars(theme, mode) {
+    var modes = (theme && theme.modes) || {};
+    var light = modes.light || {};
+    var active = mode === 'dark' ? deepMerge(light, modes.dark || {}) : light;
+    return flattenTokens(active);
+  }
+
+  /* Fallback tokens so a screen never renders unstyled (no theme reachable). */
+  var FALLBACK_THEME = {
+    id: 'fallback', title: 'Fallback',
+    modes: {
+      light: {
+        color: { accent: '#3B82D6', bg: '#F5F5F4', card: '#FFFFFF',
+                 ink: '#1C1917', 'ink-2': '#78716C', line: '#E7E5E4' },
+        font: { sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" },
+        radius: { card: '16px', chip: '999px' },
+        space: { page: '16px' }
+      },
+      dark: {
+        color: { accent: '#60A5FA', bg: '#131110', card: '#1F1C1A',
+                 ink: '#F5F5F4', 'ink-2': '#A8A29E', line: '#33302D' }
+      }
+    }
+  };
+
+  /* Safe-area insets the device chrome occupies (screens pad with these). */
+  var SAFE_AREAS = {
+    ios:     { top: '59px', bottom: '34px' },
+    android: { top: '42px', bottom: '24px' },
+    web:     { top: '0px',  bottom: '0px' },
+    none:    { top: '0px',  bottom: '0px' }
+  };
+
+  /* Compact, stable-ish CSS path for review pins ("#cart > button.buy:nth-of-type(2)"). */
+  function cssPath(el) {
+    var parts = [];
+    while (el && el.nodeType === 1 && el !== document.documentElement && parts.length < 6) {
+      if (el.id) { parts.unshift('#' + el.id); break; }
+      var part = el.tagName.toLowerCase();
+      var cls = (el.className && typeof el.className === 'string')
+        ? el.className.trim().split(/\s+/).slice(0, 2).join('.') : '';
+      if (cls) part += '.' + cls;
+      var parent = el.parentElement;
+      if (parent) {
+        var same = Array.prototype.filter.call(parent.children, function (c) {
+          return c.tagName === el.tagName;
+        });
+        if (same.length > 1) part += ':nth-of-type(' + (same.indexOf(el) + 1) + ')';
+      }
+      parts.unshift(part);
+      el = parent;
+    }
+    return parts.join(' > ');
+  }
+
+  function parseMetaFrom(doc) {
+    var el = doc.getElementById('screen-meta');
+    if (!el) return null;
+    try { return JSON.parse(el.textContent); } catch (e) { return null; }
+  }
+
+  /*
+   * i18n (v2 strings convention): key-first per-feature i18n.json —
+   *   { "slide1.title": { "en": "…", "ar": "…" }, … }
+   * Fallback chain: lang → defaultLang → the key itself. `{name}` placeholders
+   * interpolate from vars.
+   */
+  function translate(i18n, lang, defaultLang, key, vars) {
+    var entry = i18n && i18n[key];
+    var text = entry && (entry[lang] != null ? entry[lang] : entry[defaultLang]);
+    if (text == null) text = key;
+    if (vars) {
+      text = String(text).replace(/\{(\w+)\}/g, function (m, name) {
+        return vars[name] != null ? String(vars[name]) : m;
+      });
+    }
+    return text;
+  }
+
+  var EngineKit = {
+    version: VERSION,
+    deepMerge: deepMerge,
+    clone: clone,
+    removePath: removePath,
+    applyScenario: applyScenario,
+    resolveDateTokens: resolveDateTokens,
+    flattenTokens: flattenTokens,
+    themeVars: themeVars,
+    translate: translate,
+    cssPath: cssPath,
+    parseMetaFrom: parseMetaFrom,
+    isoDate: isoDate,
+    FALLBACK_THEME: FALLBACK_THEME,
+    SAFE_AREAS: SAFE_AREAS
+  };
+
+  /* Shell context: expose the kit, skip screen boot. */
+  if (window.__SCREENBOOK_SHELL__) {
+    window.EngineKit = EngineKit;
+    return;
+  }
+
+  /* ------------------------------------------------------------------ *
+   *  Screen context — boot the Engine
+   * ------------------------------------------------------------------ */
+
+  var qs = new URLSearchParams(location.search);
+  var meta = parseMetaFrom(document) || {};
+  var embedded = window.parent !== window;
+  var appliedVars = [];
+  var readyQueue = [];
+  var isReady = false;
+  var stateEmitter = {};   // key → [cb]
+  var review = { active: false, pins: [] };
+
+  var env = {
+    mode: qs.get('mode') ||
+      (window.matchMedia && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+    dir: qs.get('dir') || document.documentElement.getAttribute('dir') || 'ltr',
+    lang: qs.get('lang') || document.documentElement.getAttribute('lang') || 'en',
+    device: meta.device || 'none',
+    scenario: qs.get('scenario') || 'default',
+    theme: qs.get('theme') || null,
+    embedded: embedded
+  };
+
+  var i18nTable = null;
+  var defaultLang = 'en';
+
+  var Engine = {
+    version: VERSION,
+    kit: EngineKit,
+    meta: meta,
+    env: env,
+    data: Object.freeze({}),
+    ready: function (cb) {
+      if (typeof cb !== 'function') return;
+      if (isReady) { queueMicrotask(function () { safeCall(cb); }); }
+      else readyQueue.push(cb);
+    },
+    t: function (key, vars) {
+      return translate(i18nTable, env.lang, defaultLang, key, vars);
+    },
+    go: go,
+    toast: toast,
+    state: makeState()
+  };
+  window.Engine = Engine;
+
+  function safeCall(cb) {
+    try { cb(Engine.data); }
+    catch (err) {
+      reportError('Engine.ready callback: ' + (err && err.message ? err.message : err));
+      if (!embedded) throw err;
+    }
+  }
+
+  /* ---------------- environment application ---------------- */
+
+  function applyEnvironment(theme, data) {
+    var root = document.documentElement;
+    var vars = themeVars(theme || FALLBACK_THEME, env.mode);
+    appliedVars.forEach(function (name) {
+      if (!(name in vars)) root.style.removeProperty(name);
+    });
+    Object.keys(vars).forEach(function (name) {
+      root.style.setProperty(name, vars[name]);
+    });
+    appliedVars = Object.keys(vars);
+
+    var safe = SAFE_AREAS[env.device] || SAFE_AREAS.none;
+    root.style.setProperty('--safe-top', safe.top);
+    root.style.setProperty('--safe-bottom', safe.bottom);
+
+    root.setAttribute('data-mode', env.mode);
+    root.setAttribute('data-device', env.device);
+    root.setAttribute('dir', env.dir);
+    root.setAttribute('lang', env.lang);
+
+    if (data !== undefined) {
+      Engine.data = Object.freeze(resolveDateTokens(data) || {});
+    }
+  }
+
+  function fireReady() {
+    if (isReady) return;
+    isReady = true;
+    var queue = readyQueue.slice();
+    readyQueue.length = 0;
+    queue.forEach(safeCall);
+    send('sb:ready', { meta: meta });
+  }
+
+  /* ---------------- shared KV state (localStorage + storage events) ---------------- */
+
+  function makeState() {
+    var PREFIX = 'sb:state:';
+    var mem = {};
+
+    function read(key) {
+      try {
+        var raw = localStorage.getItem(PREFIX + key);
+        return raw === null ? undefined : JSON.parse(raw);
+      } catch (e) { return mem[key]; }
+    }
+    function emit(key, value) {
+      (stateEmitter[key] || []).forEach(function (cb) {
+        try { cb(value); } catch (e) { /* subscriber's problem */ }
+      });
+    }
+
+    window.addEventListener('storage', function (e) {
+      if (!e.key || e.key.indexOf(PREFIX) !== 0) {
+        if (e.key === null) Object.keys(stateEmitter).forEach(function (k) { emit(k, undefined); });
+        return;
+      }
+      var key = e.key.slice(PREFIX.length);
+      var value;
+      try { value = e.newValue === null ? undefined : JSON.parse(e.newValue); } catch (err) { value = undefined; }
+      mem[key] = value;
+      emit(key, value);
+    });
+
+    return {
+      get: function (key, fallback) {
+        var v = read(key);
+        if (v === undefined) v = mem[key];
+        return v === undefined ? fallback : v;
+      },
+      set: function (key, value) {
+        mem[key] = value;
+        try {
+          if (value === undefined) localStorage.removeItem(PREFIX + key);
+          else localStorage.setItem(PREFIX + key, JSON.stringify(value));
+        } catch (e) { /* memory-only fallback */ }
+        emit(key, value);
+      },
+      subscribe: function (key, cb) {
+        (stateEmitter[key] = stateEmitter[key] || []).push(cb);
+        return function () {
+          var list = stateEmitter[key] || [];
+          var i = list.indexOf(cb);
+          if (i >= 0) list.splice(i, 1);
+        };
+      },
+      keys: function () {
+        var keys = [];
+        try {
+          for (var i = 0; i < localStorage.length; i++) {
+            var k = localStorage.key(i);
+            if (k && k.indexOf(PREFIX) === 0) keys.push(k.slice(PREFIX.length));
+          }
+        } catch (e) { keys = Object.keys(mem); }
+        return keys;
+      }
+    };
+  }
+
+  /* ---------------- navigation + toast ---------------- */
+
+  function go(id) {
+    if (!id) return;
+    if (embedded) send('sb:go', { id: id });
+    else location.href = encodeURIComponent(id) + '.html' + location.search;
+  }
+
+  document.addEventListener('click', function (e) {
+    var el = e.target && e.target.closest ? e.target.closest('[data-go]') : null;
+    if (!el) return;
+    e.preventDefault();
+    go(el.getAttribute('data-go'));
+  });
+
+  var toastBox = null;
+  function toast(msg) {
+    if (!toastBox) {
+      toastBox = document.createElement('div');
+      toastBox.setAttribute('data-engine-toasts', '');
+      toastBox.style.cssText =
+        'position:fixed;left:0;right:0;bottom:calc(var(--safe-bottom, 0px) + 18px);' +
+        'display:flex;flex-direction:column;align-items:center;gap:8px;' +
+        'pointer-events:none;z-index:2147483000;';
+      document.body.appendChild(toastBox);
+    }
+    var t = document.createElement('div');
+    t.textContent = String(msg);
+    t.style.cssText =
+      'max-width:80%;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;' +
+      'font-family:var(--font-sans, sans-serif);background:var(--color-ink, #111);' +
+      'color:var(--color-bg, #fff);box-shadow:0 6px 24px rgba(0,0,0,.25);' +
+      'opacity:0;transform:translateY(8px);transition:all .22s ease;';
+    toastBox.appendChild(t);
+    requestAnimationFrame(function () { t.style.opacity = '1'; t.style.transform = 'translateY(0)'; });
+    setTimeout(function () {
+      t.style.opacity = '0'; t.style.transform = 'translateY(8px)';
+      setTimeout(function () { t.remove(); }, 250);
+    }, 2400);
+  }
+
+  /* ---------------- error reporting (selftest + shell console) ---------------- */
+
+  function send(type, payload) {
+    if (!embedded) return;
+    var msg = { type: type };
+    if (payload) Object.keys(payload).forEach(function (k) { msg[k] = payload[k]; });
+    try { window.parent.postMessage(msg, '*'); } catch (e) { /* shell gone */ }
+  }
+
+  function reportError(message) {
+    send('sb:console-error', { message: String(message) });
+  }
+
+  if (embedded) {
+    window.addEventListener('error', function (e) {
+      if (e.target && e.target !== window && e.target.tagName) {
+        reportError('Resource failed: <' + e.target.tagName.toLowerCase() + '> ' +
+          (e.target.src || e.target.href || ''));
+      } else {
+        reportError((e.message || 'Script error') +
+          (e.filename ? ' (' + e.filename.split('/').pop() + ':' + e.lineno + ')' : ''));
+      }
+    }, true);
+    window.addEventListener('unhandledrejection', function (e) {
+      reportError('Unhandled rejection: ' + (e.reason && e.reason.message ? e.reason.message : e.reason));
+    });
+    var origConsoleError = console.error;
+    console.error = function () {
+      reportError(Array.prototype.map.call(arguments, function (a) {
+        if (typeof a === 'string') return a;
+        if (a && a.stack) return String(a.stack);
+        try { return JSON.stringify(a); } catch (e) { return String(a); }
+      }).join(' '));
+      return origConsoleError.apply(console, arguments);
+    };
+  }
+
+  /* ---------------- review pins (rendered inside the screen) ---------------- */
+
+  var pinLayer = null;
+  function renderPins() {
+    if (pinLayer) { pinLayer.remove(); pinLayer = null; }
+    if (!review.active || !review.pins.length) return;
+    pinLayer = document.createElement('div');
+    pinLayer.setAttribute('data-engine-pins', '');
+    pinLayer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:2147483100;';
+    review.pins.forEach(function (pin) {
+      var dot = document.createElement('button');
+      dot.textContent = String(pin.n != null ? pin.n : '•');
+      dot.title = pin.note || '';
+      dot.style.cssText =
+        'position:absolute;left:' + (pin.xPct * 100) + '%;top:' + (pin.yPct * 100) + '%;' +
+        'transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;' +
+        'border:2px solid #fff;background:' + (pin.resolved ? '#22A06B' : '#E5484D') + ';color:#fff;' +
+        'font:700 12px/1 -apple-system,sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.35);' +
+        'pointer-events:auto;cursor:pointer;padding:0;';
+      dot.addEventListener('click', function (e) {
+        e.preventDefault(); e.stopPropagation();
+        send('sb:pin-open', { id: pin.id });
+      });
+      pinLayer.appendChild(dot);
+    });
+    document.body.appendChild(pinLayer);
+  }
+
+  function onReviewClick(e) {
+    if (!review.active) return;
+    if (e.target && e.target.closest && e.target.closest('[data-engine-pins]')) return;
+    e.preventDefault();
+    e.stopPropagation();
+    send('sb:pin-request', {
+      xPct: e.clientX / window.innerWidth,
+      yPct: e.clientY / window.innerHeight,
+      cssPath: cssPath(e.target),
+      screenW: window.innerWidth,
+      screenH: window.innerHeight
+    });
+  }
+  document.addEventListener('click', onReviewClick, true);
+
+  /* ---------------- embedded handshake / standalone self-load ---------------- */
+
+  var initDone = false;
+
+  function handleInit(msg) {
+    if (initDone && !msg.reinit) return;
+    initDone = true;
+    if (msg.mode) env.mode = msg.mode;
+    if (msg.dir) env.dir = msg.dir;
+    if (msg.lang) env.lang = msg.lang;
+    if (msg.device) env.device = msg.device;
+    if (msg.scenario) env.scenario = msg.scenario;
+    if (msg.themeId) env.theme = msg.themeId;
+    if (msg.i18n) i18nTable = msg.i18n;
+    if (msg.defaultLang) defaultLang = msg.defaultLang;
+    currentTheme = msg.theme || FALLBACK_THEME;
+    applyEnvironment(currentTheme, msg.data || {});
+    if (msg.review) { review.active = !!msg.review.active; review.pins = msg.review.pins || []; renderPins(); }
+    fireReady();
+  }
+
+  var currentTheme = null;
+
+  window.addEventListener('message', function (e) {
+    var msg = e.data;
+    if (!msg || typeof msg.type !== 'string') return;
+    switch (msg.type) {
+      case 'sb:init':
+        handleInit(msg);
+        break;
+      case 'sb:update':
+        if (msg.mode) env.mode = msg.mode;
+        if (msg.dir) env.dir = msg.dir;
+        if (msg.lang) env.lang = msg.lang;
+        if (msg.theme) currentTheme = msg.theme;
+        if (msg.themeId) env.theme = msg.themeId;
+        applyEnvironment(currentTheme || FALLBACK_THEME);
+        break;
+      case 'sb:review':
+        review.active = !!msg.active;
+        review.pins = msg.pins || [];
+        renderPins();
+        break;
+      case 'sb:ping':
+        send('sb:pong', { meta: meta });
+        break;
+    }
+  });
+
+  function fetchJSON(url) {
+    return fetch(url, { cache: 'no-store' }).then(function (r) {
+      if (!r.ok) throw new Error(r.status + ' ' + url);
+      return r.json();
+    });
+  }
+
+  function standaloneInit() {
+    if (initDone) return;
+    var root = '../../..';
+    var config = null;
+
+    fetchJSON(root + '/app.config.json')
+      .catch(function () { return null; })
+      .then(function (cfg) {
+        config = cfg || {};
+        var themeId = env.theme || (config.themes && config.themes[0]) || 'default';
+        env.theme = themeId;
+        if (!qs.get('lang') && config.defaultLanguage) env.lang = config.defaultLanguage;
+        return Promise.all([
+          fetchJSON(root + '/themes/' + themeId + '.json').catch(function () { return null; }),
+          fetchJSON('../data/seed.json').catch(function () { return {}; }),
+          fetchJSON('../data/scenarios.json').catch(function () { return null; }),
+          fetchJSON('../i18n.json').catch(function () { return null; })
+        ]);
+      })
+      .then(function (results) {
+        var theme = results[0];
+        var seed = results[1];
+        var scenarios = (results[2] && results[2].list) || [];
+        var scenario = null;
+        for (var i = 0; i < scenarios.length; i++) {
+          if (scenarios[i].id === env.scenario) { scenario = scenarios[i]; break; }
+        }
+        handleInit({
+          theme: theme,
+          data: applyScenario(seed, scenario),
+          i18n: results[3],
+          defaultLang: (config && config.defaultLanguage) || 'en'
+        });
+      })
+      .catch(function () {
+        handleInit({ theme: null, data: {} });
+      });
+  }
+
+  function boot() {
+    if (embedded) {
+      send('sb:hello', { meta: meta, url: location.pathname });
+      /* If no shell answers (iframed by something else), fall back to standalone. */
+      setTimeout(function () { if (!initDone) standaloneInit(); }, 600);
+    } else {
+      standaloneInit();
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+})();