tina4-nodejs 3.13.148 → 3.13.150

package/packages/core/public/bundled-component-provenance.json

@@ -41,8 +41,8 @@
     },
     {
       "path": "js/tina4-dev-admin.min.js",
-      "component": "tina4-dev-admin-21700e0",
-      "sha256": "0ca84246c26afb6a3243aafd1c65fa9486c076039e5d721b6f44661b3a59d7c2"
+      "component": "tina4-dev-admin-8c4617d",
+      "sha256": "6b05be06b5d76ee4126a11f019d104d3920c1e3234250cfe1966a33f34c1a234"
     }
   ]
 }

package/packages/core/public/js/tina4-dev-admin-split.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Tina4 Dev - Split</title>
+<style>
+  html,body{margin:0;height:100%;background:#0f172a;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}
+  /* One top toolbar controls both panels and the preview device. */
+  .t4-topbar{height:40px;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:0 10px;background:#0b1220;border-bottom:1px solid #1f2937}
+  .t4-brand{color:#e2e8f0;font:600 12px system-ui;margin-right:6px}
+  .t4-spacer{flex:1 1 auto}
+  .t4-devbtn{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:6px;padding:3px 9px;font:12px system-ui;cursor:pointer}
+  .t4-devbtn.active{background:#2563eb;border-color:#2563eb;color:#fff}
+  /* Icon toggle buttons: full opacity + highlight when the panel is shown,
+     dimmed when hidden. */
+  .t4-tg{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:6px;cursor:pointer;opacity:.5}
+  .t4-tg svg{width:15px;height:15px}
+  .t4-tg.active{background:#334155;color:#fff;opacity:1}
+  .t4-dim{color:#64748b;font:11px/1 ui-monospace,monospace;margin:0 6px}
+  .t4-popout{background:#0f766e;color:#fff;border:1px solid #0f766e;border-radius:6px;padding:3px 10px;font:12px system-ui;cursor:pointer;margin-left:6px}
+  .t4-split{display:flex;height:calc(100vh - 41px);width:100vw}
+  .t4-left{flex:0 0 auto;width:58%;min-width:0;height:100%;overflow:hidden}
+  .t4-left iframe{width:100%;height:100%;border:0;display:block}
+  .t4-gutter{flex:0 0 6px;cursor:col-resize;background:#1f2937}
+  .t4-gutter:hover,.t4-gutter.drag{background:#2563eb}
+  .t4-right{flex:1 1 auto;min-width:0;height:100%;overflow:hidden;display:flex;flex-direction:column}
+  /* A LIGHT backdrop so the dark device frame stands out. */
+  .t4-stage{flex:1 1 auto;min-width:0;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 32%,#f8fafc,#c3ccd9)}
+  /* The device frame - a phone/tablet bezel around the live app. overflow:hidden
+     + border-radius CLIP the app to the rounded frame, so content is contained.
+     No width/height transition: fit() measures right after a toggle, and an
+     animated size would be read mid-transition (the "clicking does nothing" bug). */
+  .t4-device{position:relative;background:#111;box-shadow:0 16px 50px rgba(15,23,42,.45);transform-origin:center center;overflow:hidden}
+  .t4-device iframe{width:100%;height:100%;border:0;display:block;background:#fff}
+  .t4-device.mobile{border:14px solid #111;border-radius:46px}
+  .t4-device.tablet{border:16px solid #111;border-radius:26px}
+  /* Desktop fills the whole preview block - no bezel, no scaling. */
+  .t4-device.desktop{border:0;border-radius:0;box-shadow:none;width:100%;height:100%}
+  .t4-hidden{display:none !important}
+  /* While dragging the gutter, let mouse events pass over the iframes. */
+  body.t4-dragging iframe{pointer-events:none}
+</style></head>
+<body>
+  <div class="t4-topbar">
+    <span class="t4-brand">Tina4 Dev</span>
+    <button class="t4-tg active" id="t4-tg-files" title="Show/hide the file navigator"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><line x1="6" y1="2.5" x2="6" y2="13.5"/></svg></button>
+    <button class="t4-tg active" id="t4-tg-editor" title="Show/hide the code editor"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="5.5,4.5 2,8 5.5,11.5"/><polyline points="10.5,4.5 14,8 10.5,11.5"/></svg></button>
+    <button class="t4-tg active" id="t4-tg-preview" title="Show/hide the preview"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><rect x="1.5" y="2.5" width="13" height="9" rx="1.5"/><line x1="5.5" y1="14" x2="10.5" y2="14"/><line x1="8" y1="11.5" x2="8" y2="14"/></svg></button>
+    <span class="t4-spacer"></span>
+    <span class="t4-dim" id="t4-dim">1440 x 900</span>
+    <button class="t4-devbtn" data-mode="mobile">Mobile</button>
+    <button class="t4-devbtn" data-mode="tablet">Tablet</button>
+    <button class="t4-devbtn active" data-mode="desktop">Desktop</button>
+    <button class="t4-popout" id="t4-popout" title="Open this view in its own window - drag it to another screen">&#8689; Pop out</button>
+  </div>
+  <div class="t4-split" id="t4-split">
+    <div class="t4-left" id="t4-left"><iframe src="/__dev" title="Tina4 Dev Admin"></iframe></div>
+    <div class="t4-gutter" id="t4-gutter"></div>
+    <div class="t4-right" id="t4-right">
+      <div class="t4-stage" id="t4-stage">
+        <div class="t4-device desktop" id="t4-device">
+          <iframe id="t4-preview" src="/" title="Live preview"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+  (function () {
+    var SIZES = { mobile: {w:390,h:844}, tablet: {w:820,h:1180}, desktop: {w:1440,h:900} };
+    var KEY = 'tina4_split_device';
+    var device = document.getElementById('t4-device');
+    var stage = document.getElementById('t4-stage');
+    var dim = document.getElementById('t4-dim');
+    var left = document.getElementById('t4-left');
+    var right = document.getElementById('t4-right');
+    var gutter = document.getElementById('t4-gutter');
+    var split = document.getElementById('t4-split');
+    var mode = 'desktop';
+    try { var saved = localStorage.getItem(KEY); if (saved && SIZES[saved]) mode = saved; } catch (_) {}
+    var leftWidth = '58%';
+
+    // ── device preview ──
+    function fit() {
+      if (right.classList.contains('t4-hidden')) return;
+      if (mode === 'desktop') {
+        // Desktop just fills the preview block - responsive, no frame, no scale.
+        device.style.transform = 'none';
+        device.style.width = '100%';
+        device.style.height = '100%';
+        var r0 = stage.getBoundingClientRect();
+        if (dim) dim.textContent = Math.round(r0.width) + ' x ' + Math.round(r0.height);
+        return;
+      }
+      var s = SIZES[mode];
+      device.style.transform = 'none';
+      device.style.width = s.w + 'px';
+      device.style.height = s.h + 'px';
+      var rect = stage.getBoundingClientRect();
+      var pad = 28;
+      var ow = device.offsetWidth, oh = device.offsetHeight;
+      var scale = Math.min((rect.width - pad) / ow, (rect.height - pad) / oh, 1);
+      if (!isFinite(scale) || scale <= 0) scale = 1;
+      device.style.transform = 'scale(' + scale + ')';
+    }
+    function setMode(m) {
+      if (!SIZES[m]) return;
+      mode = m;
+      device.className = 't4-device ' + m;
+      if (dim) dim.textContent = SIZES[m].w + ' x ' + SIZES[m].h;
+      document.querySelectorAll('.t4-devbtn').forEach(function (b) {
+        b.classList.toggle('active', b.getAttribute('data-mode') === m);
+      });
+      try { localStorage.setItem(KEY, m); } catch (_) {}
+      fit();
+    }
+    document.querySelectorAll('.t4-devbtn').forEach(function (b) {
+      b.addEventListener('click', function () { setMode(b.getAttribute('data-mode')); });
+    });
+    var pop = document.getElementById('t4-popout');
+    if (pop) pop.addEventListener('click', function () {
+      var s = SIZES[mode];
+      var w = Math.min(s.w, (screen.availWidth || 1920) - 40);
+      var h = Math.min(s.h, (screen.availHeight || 1080) - 120);
+      window.open('/', 'tina4preview_' + mode, 'width=' + w + ',height=' + h + ',menubar=no,toolbar=no,location=no');
+    });
+
+    // ── show / hide each panel (Files, Editor, Preview) ──
+    // Files (the nav) and Editor (the code area) are SEPARATE sections living
+    // inside the left /__dev SPA iframe, so hiding the editor must not take the
+    // file nav with it. They are same-origin, so we reach into the iframe and
+    // toggle its own `#editor-sidebar` (nav) and `.editor-main` (editor). The
+    // Preview is the right pane of this page.
+    var vis = { files: true, editor: true, preview: true };
+    function frameDoc() {
+      try { return document.querySelector('#t4-left iframe').contentDocument; } catch (_) { return null; }
+    }
+    function setFrameEl(sel, show) {
+      var d = frameDoc(); if (!d) return;
+      var el = d.querySelector(sel); if (el) el.style.display = show ? '' : 'none';
+    }
+    function applyPanels() {
+      setFrameEl('#editor-sidebar', vis.files);
+      setFrameEl('#editor-splitter-left', vis.files && vis.editor);
+      setFrameEl('.editor-main', vis.editor);
+      var leftEmpty = !vis.files && !vis.editor;
+      left.classList.toggle('t4-hidden', leftEmpty);
+      right.classList.toggle('t4-hidden', !vis.preview);
+      gutter.classList.toggle('t4-hidden', leftEmpty || !vis.preview);
+      if (!vis.preview) {
+        // Preview hidden: the editor/nav fills the whole width.
+        left.style.flex = '1 1 auto'; left.style.width = 'auto';
+      } else if (vis.files && !vis.editor) {
+        // Only the file nav is shown: shrink the left pane to the nav width so
+        // there is no empty gap where the editor used to be.
+        left.style.flex = '0 0 auto'; left.style.width = '250px';
+      } else {
+        left.style.flex = '0 0 auto'; left.style.width = leftWidth;
+      }
+      document.getElementById('t4-tg-files').classList.toggle('active', vis.files);
+      document.getElementById('t4-tg-editor').classList.toggle('active', vis.editor);
+      document.getElementById('t4-tg-preview').classList.toggle('active', vis.preview);
+      fit();
+    }
+    function toggle(name) {
+      // Never hide all three - at least one stays visible.
+      var n = { files: vis.files, editor: vis.editor, preview: vis.preview };
+      n[name] = !n[name];
+      if (!n.files && !n.editor && !n.preview) return;
+      vis[name] = !vis[name];
+      applyPanels();
+    }
+    document.getElementById('t4-tg-files').addEventListener('click', function () { toggle('files'); });
+    document.getElementById('t4-tg-editor').addEventListener('click', function () { toggle('editor'); });
+    document.getElementById('t4-tg-preview').addEventListener('click', function () { toggle('preview'); });
+
+    // ── drag the gutter to resize ──
+    var dragging = false;
+    gutter.addEventListener('mousedown', function (e) {
+      dragging = true;
+      document.body.classList.add('t4-dragging');
+      gutter.classList.add('drag');
+      e.preventDefault();
+    });
+    window.addEventListener('mousemove', function (e) {
+      if (!dragging) return;
+      var r = split.getBoundingClientRect();
+      var w = e.clientX - r.left;
+      w = Math.max(220, Math.min(w, r.width - 260));
+      leftWidth = w + 'px';
+      left.style.width = leftWidth;
+      fit();
+    });
+    window.addEventListener('mouseup', function () {
+      if (!dragging) return;
+      dragging = false;
+      document.body.classList.remove('t4-dragging');
+      gutter.classList.remove('drag');
+    });
+
+    window.addEventListener('resize', fit);
+    setMode(mode);
+    applyPanels();
+  })();
+  </script>
+</body></html>