From 1831ef6f957120f75ae821bb639d9dd0aeb5f3fd Mon Sep 17 00:00:00 2001
From: flop <flop@cttue.de>
Date: Fri, 22 May 2026 18:37:12 +0200
Subject: [PATCH] feat: fix dark/light style

---
 ts/dist_old/index.html | 1042 ++++++++++++++++++++++++++++++++++++++++
 ts/style.css           |   12 +-
 2 files changed, 1053 insertions(+), 1 deletion(-)
 create mode 100644 ts/dist_old/index.html
diff --git a/ts/dist_old/index.html b/ts/dist_old/index.html
new file mode 100644
index 0000000..69c5157
--- /dev/null
+++ b/ts/dist_old/index.html
@@ -0,0 +1,1042 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>MonoDisplay Editor</title>
+  <style>
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0
+    }
+
+    body {
+      background: #111;
+      color: #ccc;
+      font-family: monospace;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      font-size: 12px
+    }
+
+    #topbar {
+      height: 36px;
+      background: #1a1a1a;
+      border-bottom: 1px solid #2a2a2a;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0 12px;
+      flex-shrink: 0
+    }
+
+    #topbar .app-name {
+      color: #555;
+      font-size: 11px;
+      letter-spacing: .12em;
+      text-transform: uppercase;
+      margin-right: 4px
+    }
+
+    .tb-btn {
+      background: #161616;
+      color: #888;
+      border: 1px solid #2d2d2d;
+      border-radius: 3px;
+      padding: 3px 10px;
+      font-family: monospace;
+      font-size: 11px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      white-space: nowrap
+    }
+
+    .tb-btn:hover {
+      background: #222;
+      color: #bbb;
+      border-color: #444
+    }
+
+    .tb-btn svg {
+      width: 13px;
+      height: 13px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 1.8;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      flex-shrink: 0
+    }
+
+    #file-input {
+      display: none
+    }
+
+    #filename {
+      color: #3a3a3a;
+      font-size: 11px;
+      margin-left: 2px;
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap
+    }
+
+    .tb-sep {
+      width: 1px;
+      height: 18px;
+      background: #2a2a2a
+    }
+
+    .dirty {
+      color: #886622 !important
+    }
+
+    #main {
+      flex: 1;
+      display: flex;
+      min-height: 0
+    }
+
+    #left {
+      width: 48%;
+      border-right: 1px solid #1e1e1e;
+      display: flex;
+      flex-direction: column;
+      padding: 14px;
+      gap: 10px;
+      overflow-y: auto;
+      flex-shrink: 0
+    }
+
+    #display-box {
+      width: 100%;
+      aspect-ratio: 2/1;
+      background: #000;
+      border: 1px solid #2a2a2a;
+      border-radius: 3px;
+      overflow: hidden
+    }
+
+    #canvas_root {
+      width: 100%;
+      height: 100%;
+      display: block;
+      image-rendering: pixelated;
+      image-rendering: crisp-edges
+    }
+
+    .pv-label {
+      font-size: 10px;
+      color: #333;
+      letter-spacing: .1em;
+      text-transform: uppercase
+    }
+
+    #demo-btns {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      margin-top: 6px
+    }
+
+    #sec-meta {
+      background: #141414;
+      border: 1px solid #1e1e1e;
+      border-radius: 3px;
+      padding: 8px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px
+    }
+
+    .meta-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 11px
+    }
+
+    .meta-row label {
+      color: #444;
+      min-width: 90px
+    }
+
+    .meta-val {
+      color: #666
+    }
+
+    .green {
+      color: #33ff66
+    }
+
+    .flag-check {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 11px;
+      color: #555;
+      cursor: pointer
+    }
+
+    .flag-check input {
+      accent-color: #33ff66;
+      cursor: pointer
+    }
+
+    #right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden
+    }
+
+    #right-hdr {
+      height: 36px;
+      background: #141414;
+      border-bottom: 1px solid #1e1e1e;
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      gap: 6px;
+      flex-shrink: 0
+    }
+
+    #right-hdr .rh-title {
+      flex: 1;
+      color: #444;
+      font-size: 11px;
+      letter-spacing: .08em;
+      text-transform: uppercase
+    }
+
+    #sections-wrap {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px
+    }
+
+    .empty-state {
+      color: #2e2e2e;
+      font-size: 11px;
+      padding: 28px 16px;
+      text-align: center;
+      line-height: 2
+    }
+
+    /* section card */
+    .sec-card {
+      border: 1px solid #222;
+      border-radius: 3px;
+      margin-bottom: 5px;
+      overflow: hidden
+    }
+
+    .sec-card.active {
+      border-color: #2b3d2b
+    }
+
+    .sec-hdr {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      padding: 6px 8px;
+      cursor: pointer;
+      user-select: none;
+      background: #161616;
+      position: relative
+    }
+
+    .sec-hdr:hover {
+      background: #1b1b1b
+    }
+
+    .sec-card.active .sec-hdr {
+      background: #182018
+    }
+
+    .sec-arrow {
+      color: #333;
+      font-size: 13px;
+      line-height: 1;
+      transition: transform .12s;
+      flex-shrink: 0
+    }
+
+    .sec-card.open .sec-arrow {
+      transform: rotate(90deg)
+    }
+
+    .sec-label {
+      flex: 1;
+      color: #777;
+      font-size: 11px
+    }
+
+    .sec-badge {
+      font-size: 10px;
+      color: #33ff66;
+      border: 1px solid #2b3d2b;
+      background: #141e14;
+      border-radius: 2px;
+      padding: 1px 6px;
+      flex-shrink: 0
+    }
+
+    /* red ×  — section & element */
+    .x-btn {
+      background: none;
+      border: none;
+      color: #2a2a2a;
+      cursor: pointer;
+      font-size: 15px;
+      line-height: 1;
+      padding: 2px 5px;
+      border-radius: 2px;
+      flex-shrink: 0;
+      transition: color .1s, background .1s
+    }
+
+    .x-btn:hover {
+      color: #ff4444;
+      background: #1e1010
+    }
+
+    /* element */
+    .el-list {
+      background: #0f0f0f;
+      border-top: 1px solid #1c1c1c;
+      padding: 6px
+    }
+
+    .el-item {
+      border: 1px solid #1e1e1e;
+      border-radius: 3px;
+      background: #141414;
+      margin-bottom: 4px;
+      overflow: hidden
+    }
+
+    .el-item.active {
+      border-color: #33ff66
+    }
+
+    .el-item-hdr {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 8px;
+      cursor: pointer
+    }
+
+    .el-item-hdr:hover {
+      background: #1a1a1a
+    }
+
+    .el-type {
+      font-size: 10px;
+      color: #666;
+      border: 1px solid #252525;
+      border-radius: 2px;
+      padding: 1px 6px;
+      flex-shrink: 0
+    }
+
+    .el-item.active .el-type {
+      color: #33ff66;
+      border-color: #2b3d2b
+    }
+
+    .el-name {
+      flex: 1;
+      color: #555;
+      font-size: 11px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 120px
+    }
+
+    .el-fields {
+      padding: 6px 8px 8px;
+      border-top: 1px solid #1a1a1a;
+      display: flex;
+      flex-direction: column;
+      gap: 5px
+    }
+
+    .fields-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4px 10px
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 2px
+    }
+
+    .field.full {
+      grid-column: 1/-1
+    }
+
+    .field>label {
+      font-size: 10px;
+      color: #444
+    }
+
+    .field input[type=text],
+    .field input[type=number],
+    .field select,
+    .field textarea {
+      background: #0a0a0a;
+      color: #999;
+      border: 1px solid #222;
+      border-radius: 2px;
+      padding: 3px 6px;
+      font-family: monospace;
+      font-size: 11px;
+      width: 100%;
+      outline: none
+    }
+
+    .field input:focus,
+    .field select:focus,
+    .field textarea:focus {
+      border-color: #33ff66;
+      color: #ccc
+    }
+
+    .field textarea {
+      resize: vertical;
+      min-height: 44px;
+      line-height: 1.4
+    }
+
+    .field select option {
+      background: #1a1a1a;
+      color: #aaa
+    }
+
+    .flags-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding: 2px 0
+    }
+
+    .add-el {
+      background: transparent;
+      color: #333;
+      border: 1px dashed #222;
+      border-radius: 3px;
+      padding: 5px 8px;
+      font-family: monospace;
+      font-size: 11px;
+      cursor: pointer;
+      width: 100%;
+      text-align: center;
+      margin-top: 2px
+    }
+
+    .add-el:hover {
+      color: #888;
+      border-color: #444
+    }
+
+    /* confirm dialog */
+    #confirm-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, .6);
+      z-index: 100;
+      align-items: center;
+      justify-content: center
+    }
+
+    #confirm-overlay.show {
+      display: flex
+    }
+
+    #confirm-box {
+      background: #1a1a1a;
+      border: 1px solid #333;
+      border-radius: 4px;
+      padding: 20px 24px;
+      max-width: 340px;
+      width: 90%;
+      display: flex;
+      flex-direction: column;
+      gap: 14px
+    }
+
+    #confirm-msg {
+      color: #aaa;
+      font-size: 12px;
+      line-height: 1.6
+    }
+
+    #confirm-btns {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end
+    }
+
+    .cb {
+      background: #161616;
+      color: #888;
+      border: 1px solid #2d2d2d;
+      border-radius: 3px;
+      padding: 4px 14px;
+      font-family: monospace;
+      font-size: 11px;
+      cursor: pointer
+    }
+
+    .cb:hover {
+      background: #222;
+      color: #bbb
+    }
+
+    .cb.primary {
+      border-color: #2b3d2b;
+      color: #33ff66
+    }
+
+    .cb.primary:hover {
+      background: #182018
+    }
+  </style>
+</head>
+
+<body>
+
+  <div id="topbar">
+    <span class="app-name">MonoDisplay</span>
+    <div class="tb-sep"></div>
+    <button class="tb-btn" onclick="document.getElementById('file-input').click()">
+      <svg viewBox="0 0 24 24">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+        <polyline points="17 8 12 3 7 8" />
+        <line x1="12" y1="3" x2="12" y2="15" />
+      </svg>
+      Load .bin
+    </button>
+    <input type="file" id="file-input" accept=".bin" onchange="loadBin(this)" />
+    <button class="tb-btn" onclick="exportBin()">
+      <svg viewBox="0 0 24 24">
+        <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>
+      Export .bin
+    </button>
+    <div class="tb-sep"></div>
+    <button class="tb-btn" onclick="addSection()">
+      <svg viewBox="0 0 24 24">
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+      Add section
+    </button>
+    <span id="filename">untitled</span>
+  </div>
+
+  <div id="main">
+    <div id="left">
+      <span class="pv-label">preview · 120 × 60</span>
+      <div id="display-box">
+        <canvas id="canvas_root" width="120" height="60"></canvas>
+      </div>
+      <span class="pv-label">demos</span>
+      <div id="demo-btns"></div>
+      <div id="sec-meta">
+        <div class="meta-row">
+          <label>Selected section</label>
+          <span class="meta-val green" id="meta-name">—</span>
+        </div>
+        <div class="meta-row">
+          <label>Elements</label>
+          <span class="meta-val" id="meta-count">—</span>
+        </div>
+        <div class="meta-row">
+          <label>Section flags</label>
+          <label class="flag-check">
+            <input type="checkbox" id="flag-drawFront" onchange="setSectionFlag('drawFront',this.checked)" />
+            drawFront
+          </label>
+          <label class="flag-check" style="margin-left:8px">
+            <input type="checkbox" id="flag-clearBuffer" onchange="setSectionFlag('clearBuffer',this.checked)" />
+            clearBuffer
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div id="right">
+      <div id="right-hdr">
+        <span class="rh-title">sections</span>
+      </div>
+      <div id="sections-wrap">
+        <div class="empty-state">No sections yet.<br />Use <b>Add section</b> to get started.</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- confirm dialog -->
+  <div id="confirm-overlay">
+    <div id="confirm-box">
+      <div id="confirm-msg"></div>
+      <div id="confirm-btns"></div>
+    </div>
+  </div>
+
+  <script src="./public/mono-display.js"></script>
+  <script>
+    const W = 120, H = 60;
+    let sections = [];
+    let activeSec = null, activeEl = null;
+    let secCounter = 0, elCounter = 0;
+    let currentFilename = 'untitled';
+    let isDirty = false;
+
+    // ─── Element type definitions ────────────────────────────────────────────────
+    const EL_TYPES = ['Image2D', 'Animation', 'ClippedText', 'HScrollText', 'CurrentTime'];
+    const EL_FIELDS = {
+      Image2D: [
+        { k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 0 },
+        { k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: H },
+      ],
+      Animation: [
+        { k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 0 },
+        { k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: H },
+        { k: 'updateInterval', l: 'Update interval', t: 'number', d: 12 },
+      ],
+      ClippedText: [
+        { k: 'text', l: 'Text', t: 'text', d: 'Hello, World!', full: true },
+        { k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 32 },
+        { k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: 16 },
+      ],
+      HScrollText: [
+        { k: 'text', l: 'Text', t: 'text', d: 'Scrolling text — ', full: true },
+        { k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 32 },
+        { k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: 16 },
+        { k: 'scrollSpeed', l: 'Scroll speed', t: 'number', d: 50 },
+      ],
+      CurrentTime: [
+        { k: 'xOffset', l: 'X offset', t: 'number', d: 0 }, { k: 'yOffset', l: 'Y offset', t: 'number', d: 8 },
+        { k: 'width', l: 'Width', t: 'number', d: W }, { k: 'height', l: 'Height', t: 'number', d: 16 },
+        { k: 'utcOffsetMinutes', l: 'UTC offset (min)', t: 'number', d: 0 },
+      ],
+    };
+    const EL_FLAGS = {
+      Image2D: [], Animation: [], ClippedText: [],
+      HScrollText: [{ k: 'endless', l: 'Endless' }, { k: 'invertDirection', l: 'Invert direction' }],
+      CurrentTime: [{ k: 'clock12h', l: '12h mode' }, { k: 'showHours', l: 'Show hours' }, { k: 'showSeconds', l: 'Show seconds' }],
+    };
+
+    // ─── Confirm dialog ───────────────────────────────────────────────────────────
+    function confirm(msg, buttons) {
+      // buttons: [{label,primary,action}]
+      return new Promise(resolve => {
+        const overlay = document.getElementById('confirm-overlay');
+        document.getElementById('confirm-msg').textContent = msg;
+        const btns = document.getElementById('confirm-btns');
+        btns.innerHTML = '';
+        buttons.forEach(b => {
+          const el = document.createElement('button');
+          el.className = 'cb' + (b.primary ? ' primary' : '');
+          el.textContent = b.label;
+          el.onclick = () => { overlay.classList.remove('show'); resolve(b.action); };
+          btns.appendChild(el);
+        });
+        overlay.classList.add('show');
+      });
+    }
+
+    // ─── Dirty tracking ───────────────────────────────────────────────────────────
+    function markDirty() {
+      isDirty = true;
+      document.getElementById('filename').classList.add('dirty');
+    }
+    function markClean() {
+      isDirty = false;
+      document.getElementById('filename').classList.remove('dirty');
+    }
+    async function guardDirty() {
+      if (!isDirty || !sections.length) return true;
+      const action = await confirm(
+        'You have unsaved changes. Loading a demo will replace the current editor state.',
+        [{ label: 'Cancel', action: false }, { label: 'Load anyway', primary: true, action: true }]
+      );
+      return action;
+    }
+
+    // ─── Helpers ─────────────────────────────────────────────────────────────────
+    function newSec() {
+      secCounter++;
+      return {
+        id: 's' + secCounter, name: 'Section ' + secCounter, open: true,
+        flags: { drawFront: true, clearBuffer: true }, elements: []
+      };
+    }
+    function newEl(type) {
+      elCounter++;
+      const fields = {};
+      (EL_FIELDS[type] || []).forEach(f => fields[f.k] = f.d);
+      const flags = {};
+      (EL_FLAGS[type] || []).forEach(f => flags[f.k] = false);
+      return { id: 'e' + elCounter, type, fields, flags };
+    }
+    function getSec(id) { return sections.find(s => s.id === id) }
+    function getEl(secId, elId) { const s = getSec(secId); return s && s.elements.find(e => e.id === elId) }
+
+    // ─── Mutations ────────────────────────────────────────────────────────────────
+    function addSection() {
+      const s = newSec(); sections.push(s);
+      activeSec = s.id; activeEl = null;
+      markDirty(); render(); triggerPreview();
+    }
+    function removeSection(id) {
+      sections = sections.filter(s => s.id !== id);
+      if (activeSec === id) { activeSec = sections.length ? sections[sections.length - 1].id : null; activeEl = null; }
+      markDirty(); render(); triggerPreview();
+    }
+    function toggleSection(id) {
+      const s = getSec(id); if (!s) return;
+      s.open = !s.open; activeSec = id; render(); updateMeta();
+    }
+    function setSectionFlag(flag, val) {
+      if (!activeSec) return;
+      const s = getSec(activeSec); if (!s) return;
+      s.flags[flag] = val; markDirty(); triggerPreview();
+    }
+    function addElement(secId) {
+      const s = getSec(secId); if (!s) return;
+      const el = newEl(EL_TYPES[0]); s.elements.push(el);
+      activeSec = secId; activeEl = { secId, elId: el.id };
+      markDirty(); render(); triggerPreview();
+    }
+    function removeElement(secId, elId) {
+      const s = getSec(secId); if (!s) return;
+      s.elements = s.elements.filter(e => e.id !== elId);
+      if (activeEl && activeEl.secId === secId && activeEl.elId === elId) activeEl = null;
+      markDirty(); render(); triggerPreview();
+    }
+    function selectElement(secId, elId) {
+      activeSec = secId;
+      activeEl = activeEl && activeEl.secId === secId && activeEl.elId === elId ? null : { secId, elId };
+      render();
+    }
+    function changeElType(secId, elId, type) {
+      const el = getEl(secId, elId); if (!el) return;
+      const fresh = newEl(type);
+      el.type = type; el.fields = fresh.fields; el.flags = fresh.flags;
+      markDirty(); render(); triggerPreview();
+    }
+    function setElField(secId, elId, key, val) {
+      const el = getEl(secId, elId); if (!el) return;
+      el.fields[key] = val; markDirty(); triggerPreview();
+    }
+    function setElFlag(secId, elId, key, val) {
+      const el = getEl(secId, elId); if (!el) return;
+      el.flags[key] = val; markDirty(); triggerPreview();
+    }
+
+    // ─── Load demo into editor state ─────────────────────────────────────────────
+    const DEMO_DEFS = [
+      {
+        label: 'Checkerboard', build() {
+          const s = newSec(); s.name = 'Checkerboard';
+          const el = newEl('Image2D');
+          s.elements.push(el);
+          s.flags = { drawFront: false, clearBuffer: false };
+          return [s];
+        }
+      },
+      {
+        label: 'Blink', build() {
+          const s = newSec(); s.name = 'Blink'; s.flags = { drawFront: true, clearBuffer: true };
+          const el = newEl('Animation'); el.fields.updateInterval = 12;
+          s.elements.push(el); return [s];
+        }
+      },
+      {
+        label: 'Text', build() {
+          const s = newSec(); s.name = 'Text'; s.flags = { drawFront: true, clearBuffer: true };
+          const el = newEl('ClippedText'); el.fields.text = 'Hello, World!'; el.fields.yOffset = 32;
+          s.elements.push(el); return [s];
+        }
+      },
+      {
+        label: 'Scrolltext', build() {
+          const s = newSec(); s.name = 'Scrolltext'; s.flags = { drawFront: true, clearBuffer: true };
+          const el = newEl('HScrollText');
+          el.fields.text = 'MONO DISPLAY — scrolling ticker — 🚀 ';
+          el.fields.yOffset = 32; el.fields.scrollSpeed = 50;
+          el.flags.endless = true; el.flags.invertDirection = false;
+          s.elements.push(el); return [s];
+        }
+      },
+      {
+        label: 'Time', build() {
+          const s = newSec(); s.name = 'Time'; s.flags = { drawFront: true, clearBuffer: true };
+          const defs = [
+            { flags: {}, yOffset: 8 }, { flags: { clock12h: true }, xOffset: 40, yOffset: 16 },
+            { flags: { clock12h: true, showHours: true }, yOffset: 24 },
+            { flags: { clock12h: true, showHours: false }, xOffset: 40, yOffset: 32 },
+            { flags: { clock12h: true, showSeconds: true }, xOffset: 120, yOffset: 32 },
+          ];
+          defs.forEach(d => {
+            const el = newEl('CurrentTime');
+            Object.assign(el.fields, { utcOffsetMinutes: 120, xOffset: d.xOffset || 0, yOffset: d.yOffset });
+            el.flags = d.flags; s.elements.push(el);
+          });
+          return [s];
+        }
+      },
+    ];
+
+    // ─── Preview via MonoDisplayFile (same as original demos) ────────────────────
+    const DEMO_PREVIEWS = {
+      Checkerboard() {
+        const { MonoDisplayFile, ElementType } = window.MonoDisplay;
+        const pixels = new Uint8Array(W * H);
+        for (let y = 0; y < H; y++)for (let x = 0; x < W; x++)pixels[y * W + x] = (x + y) % 2;
+        return new MonoDisplayFile({
+          width: W, height: H,
+          elements_always: [{ type: ElementType.Image2D, pixels, width: W, height: H }]
+        }).toBuffer();
+      },
+      Blink() {
+        const { MonoDisplayFile, ElementType } = window.MonoDisplay;
+        return new MonoDisplayFile({
+          elements_always: {
+            flags: { drawFront: true, clearBuffer: true },
+            elements: [{
+              type: ElementType.Animation, width: W, height: H, updateInterval: 12,
+              frames: [{ pixels: new Uint8Array(W * H).fill(1) }, { pixels: new Uint8Array(W * H).fill(0) }]
+            }]
+          }
+        }).toBuffer();
+      },
+      Text() {
+        const { MonoDisplayFile, ElementType } = window.MonoDisplay;
+        return new MonoDisplayFile({
+          elements_always: {
+            flags: { drawFront: true, clearBuffer: true },
+            elements: [{ type: ElementType.ClippedText, text: 'Hello, World!', xOffset: 0, yOffset: 32, width: W, height: 16 }]
+          }
+        }).toBuffer();
+      },
+      Scrolltext() {
+        const { MonoDisplayFile, ElementType } = window.MonoDisplay;
+        return new MonoDisplayFile({
+          elements_always: {
+            flags: { drawFront: true, clearBuffer: true },
+            elements: [{
+              type: ElementType.HScrollText, text: 'MONO DISPLAY — scrolling ticker — 🚀 ',
+              xOffset: 0, yOffset: 32, width: W, height: 16, scrollSpeed: 50, flags: { endless: true, invertDirection: false }
+            }]
+          }
+        }).toBuffer();
+      },
+      Time() {
+        const { MonoDisplayFile, ElementType } = window.MonoDisplay;
+        return new MonoDisplayFile({
+          elements_always: {
+            flags: { drawFront: true, clearBuffer: true }, elements: [
+              { flags: {}, type: ElementType.CurrentTime, xOffset: 0, yOffset: 8, width: W, height: 16, utcOffsetMinutes: 120 },
+              { flags: { clock12h: true }, type: ElementType.CurrentTime, xOffset: 40, yOffset: 16, width: W, height: 16, utcOffsetMinutes: 120 },
+              { flags: { clock12h: true, showHours: true }, type: ElementType.CurrentTime, xOffset: 0, yOffset: 24, width: W, height: 16, utcOffsetMinutes: 120 },
+              { flags: { clock12h: true, showHours: false }, type: ElementType.CurrentTime, xOffset: 40, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 },
+              { flags: { clock12h: true, showSeconds: true }, type: ElementType.CurrentTime, xOffset: 120, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 },
+            ]
+          }
+        }).toBuffer();
+      },
+    };
+
+    function initDemos() {
+      const wrap = document.getElementById('demo-btns');
+      let activeBtn = null;
+      DEMO_DEFS.forEach(d => {
+        const btn = document.createElement('button');
+        btn.className = 'tb-btn'; btn.textContent = d.label;
+        btn.onclick = async () => {
+          const ok = await guardDirty();
+          if (!ok) return;
+          // load into editor
+          sections = d.build();
+          activeSec = sections[0]?.id || null; activeEl = null;
+          currentFilename = d.label.toLowerCase();
+          document.getElementById('filename').textContent = currentFilename;
+          markClean(); render();
+          // drive preview with full fidelity build
+          if (!window._mdDriver)
+            window._mdDriver = new window.MonoDisplay.MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 });
+          window._mdDriver.load(() => Promise.resolve(DEMO_PREVIEWS[d.label]()));
+          if (activeBtn) activeBtn.style.color = '';
+          btn.style.color = '#33ff66'; activeBtn = btn;
+        };
+        wrap.appendChild(btn);
+      });
+    }
+
+    // ─── Render ───────────────────────────────────────────────────────────────────
+    function render() {
+      updateMeta();
+      const wrap = document.getElementById('sections-wrap');
+      if (!sections.length) {
+        wrap.innerHTML = '<div class="empty-state">No sections yet.<br/>Use <b>Add section</b> to get started.</div>';
+        return;
+      }
+      wrap.innerHTML = sections.map(s => renderSection(s)).join('');
+    }
+
+    function renderSection(s) {
+      const isActive = activeSec === s.id, isOpen = s.open;
+      return `
+<div class="sec-card${isActive ? ' active' : ''}${isOpen ? ' open' : ''}" id="sc-${s.id}">
+  <div class="sec-hdr${isActive ? ' active' : ''}" onclick="toggleSection('${s.id}')">
+    <span class="sec-arrow">▶</span>
+    <span class="sec-label">${esc(s.name)}</span>
+    <span class="sec-badge">${s.elements.length} el</span>
+    <button class="x-btn" title="Remove section" onclick="event.stopPropagation();removeSection('${s.id}')">×</button>
+  </div>
+  ${isOpen ? `
+  <div class="el-list">
+    ${s.elements.map(el => renderElement(s.id, el)).join('')}
+    <button class="add-el" onclick="addElement('${s.id}')">+ add element</button>
+  </div>`: ''}
+</div>`;
+    }
+
+    function renderElement(secId, el) {
+      const isActive = activeEl && activeEl.secId === secId && activeEl.elId === el.id;
+      const fields = EL_FIELDS[el.type] || [];
+      const flags = EL_FLAGS[el.type] || [];
+      return `
+<div class="el-item${isActive ? ' active' : ''}" id="eli-${el.id}">
+  <div class="el-item-hdr" onclick="selectElement('${secId}','${el.id}')">
+    <span class="el-type">${el.type}</span>
+    <span class="el-name">${elSummary(el)}</span>
+    <button class="x-btn" title="Remove element" onclick="event.stopPropagation();removeElement('${secId}','${el.id}')">×</button>
+  </div>
+  ${isActive ? `
+  <div class="el-fields">
+    <div class="field full">
+      <label>Type</label>
+      <select onchange="changeElType('${secId}','${el.id}',this.value)">
+        ${EL_TYPES.map(t => `<option value="${t}"${t === el.type ? ' selected' : ''}>${t}</option>`).join('')}
+      </select>
+    </div>
+    <div class="fields-grid">
+      ${fields.map(f => `
+      <div class="field${f.full ? ' full' : ''}">
+        <label>${f.l}</label>
+        ${f.t === 'text'
+          ? `<textarea onchange="setElField('${secId}','${el.id}','${f.k}',this.value)">${esc(el.fields[f.k] ?? f.d)}</textarea>`
+          : `<input type="number" value="${el.fields[f.k] ?? f.d}" onchange="setElField('${secId}','${el.id}','${f.k}',+this.value)"/>`
+        }
+      </div>`).join('')}
+    </div>
+    ${flags.length ? `
+    <div class="field full">
+      <label>Flags</label>
+      <div class="flags-row">
+        ${flags.map(f => `
+        <label class="flag-check">
+          <input type="checkbox" ${el.flags[f.k] ? 'checked' : ''} onchange="setElFlag('${secId}','${el.id}','${f.k}',this.checked)"/>
+          ${f.l}
+        </label>`).join('')}
+      </div>
+    </div>`: ''}
+  </div>`: ''}
+</div>`;
+    }
+
+    function elSummary(el) {
+      if (el.fields.text) return esc(el.fields.text.slice(0, 24) + (el.fields.text.length > 24 ? '…' : ''));
+      return `${el.fields.xOffset ?? 0}, ${el.fields.yOffset ?? 0}`;
+    }
+    function esc(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') }
+
+    function updateMeta() {
+      const s = activeSec ? getSec(activeSec) : null;
+      document.getElementById('meta-name').textContent = s ? s.name : '—';
+      document.getElementById('meta-count').textContent = s ? s.elements.length + ' element(s)' : '—';
+      document.getElementById('flag-drawFront').checked = s ? !!s.flags.drawFront : false;
+      document.getElementById('flag-clearBuffer').checked = s ? !!s.flags.clearBuffer : false;
+    }
+
+    // ─── Preview ──────────────────────────────────────────────────────────────────
+    let previewTimer = null;
+    function triggerPreview() {
+      clearTimeout(previewTimer);
+      previewTimer = setTimeout(() => { try { buildPreview(); } catch (e) { console.warn('preview', e); } }, 150);
+    }
+    function buildPreview() {
+      if (!window.MonoDisplay) return;
+      const { MonoDisplayDriver, MonoDisplayFile, ElementType } = window.MonoDisplay;
+      if (!window._mdDriver)
+        window._mdDriver = new MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 });
+      const s = activeSec ? getSec(activeSec) : sections[0];
+      if (!s || !s.elements.length) {
+        window._mdDriver.load(() => Promise.resolve(new MonoDisplayFile({ elements_always: [] }).toBuffer()));
+        return;
+      }
+      const elDefs = s.elements.map(el => ({ type: ElementType[el.type], ...el.fields, flags: el.flags })).filter(e => e.type != null);
+      window._mdDriver.load(() => Promise.resolve(
+        new MonoDisplayFile({ elements_always: { flags: s.flags, elements: elDefs } }).toBuffer()
+      ));
+    }
+
+    // ─── Load / Export ────────────────────────────────────────────────────────────
+    function loadBin(input) {
+      const file = input.files[0]; if (!file) return;
+      currentFilename = file.name;
+      document.getElementById('filename').textContent = file.name;
+      const reader = new FileReader();
+      reader.onload = e => {
+        const buf = new Uint8Array(e.target.result);
+        if (!window._mdDriver && window.MonoDisplay)
+          window._mdDriver = new window.MonoDisplay.MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 });
+        if (window._mdDriver) window._mdDriver.load(() => Promise.resolve(buf));
+      };
+      reader.readAsArrayBuffer(file);
+      input.value = ''; markClean();
+    }
+    function exportBin() {
+      if (!window.MonoDisplay) { alert('MonoDisplay library not loaded.'); return; }
+      const { MonoDisplayFile, ElementType } = window.MonoDisplay;
+      const s = activeSec ? getSec(activeSec) : sections[0];
+      if (!s) { alert('Nothing to export.'); return; }
+      const elDefs = s.elements.map(el => ({ type: ElementType[el.type], ...el.fields, flags: el.flags })).filter(e => e.type != null);
+      const buf = new MonoDisplayFile({ elements_always: { flags: s.flags, elements: elDefs } }).toBuffer();
+      const blob = new Blob([buf], { type: 'application/octet-stream' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = currentFilename.replace(/\.bin$/, '') + '.bin';
+      a.click(); markClean();
+    }
+
+    // ─── Init ─────────────────────────────────────────────────────────────────────
+    render();
+    if (window.MonoDisplay) { initDemos(); }
+    else { const iv = setInterval(() => { if (window.MonoDisplay) { clearInterval(iv); initDemos(); } }, 100); }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/ts/style.css b/ts/style.css
index 1644311..49a023e 100644
--- a/ts/style.css
+++ b/ts/style.css
@@ -331,6 +331,14 @@ canvas.pixel-editor {
   color: var(--ac)
 }
 
+select.meta-val {
+  background: var(--bg-input);
+  color: var(--ac);
+  border: 1px solid var(--bd-inner);
+  border-radius: 3px;
+  padding: 1px 4px;
+}
+
 .flag-check {
   display: flex;
   align-items: center;
@@ -413,7 +421,8 @@ canvas.pixel-editor {
   background: var(--bg-hover)
 }
 
-.sec-card.active .sec-hdr {
+.sec-card.active .sec-hdr,
+.sec-hdr.active {
   background: var(--bg-active)
 }
 
@@ -550,6 +559,7 @@ canvas.pixel-editor {
 
 .field input[type=text],
 .field input[type=number],
+.field input[type=datetime-local],
 .field select,
 .field textarea {
   background: var(--bg-input);
