From 85ca7dd31844381b8fb4feb6f11b4bf93a59afb2 Mon Sep 17 00:00:00 2001
From: flop <flop@cttue.de>
Date: Tue, 19 May 2026 16:13:09 +0200
Subject: [PATCH] fix: rework most of the UI

---
 ts/index.html     |   6 +-
 ts/src/browser.ts | 729 +++++++++++++++++++++++++++-------------------
 ts/src/file.ts    | 166 ++++++++---
 ts/src/types.ts   | 219 +++-----------
 4 files changed, 595 insertions(+), 525 deletions(-)

diff --git a/ts/index.html b/ts/index.html
index 9a3bb41..8ed80f1 100644
--- a/ts/index.html
+++ b/ts/index.html
@@ -68,7 +68,11 @@
             <input type="checkbox" id="flag-drawFront" onchange="setSectionFlag('drawFront',this.checked)" />
             drawFront
           </label>
-          <label class="flag-check" style="margin-left:8px">
+          <label class="flag-check" style="margin-left:-8px">
+            <input type="checkbox" id="flag-drawBack" onchange="setSectionFlag('drawBack',this.checked)" />
+            drawBack
+          </label>
+          <label class="flag-check" style="margin-left:-8px">
             <input type="checkbox" id="flag-clearBuffer" onchange="setSectionFlag('clearBuffer',this.checked)" />
             clearBuffer
           </label>
diff --git a/ts/src/browser.ts b/ts/src/browser.ts
index 22f5c8a..9d5a4dd 100644
--- a/ts/src/browser.ts
+++ b/ts/src/browser.ts
@@ -1,65 +1,99 @@
+// browser.ts — IIFE-style browser entry point
+// Built by:  bun build src/browser.ts --target browser --outfile public/mono-display.js
+// Attaches everything to window.MonoDisplay so inline <script> tags can use it
+// without ES module syntax.
+
+import * as MonoDisplay from "./index";
+import { MonoDisplayFile } from "./file";
 import { cycleTheme } from "./themes";
-import type { ElementType } from "./types";
+import { ElementType } from "./types";
+
+// Expose on globalThis (= window in browser, globalThis elsewhere)
+(globalThis as typeof globalThis & { MonoDisplay: typeof MonoDisplay }).MonoDisplay = MonoDisplay;
+
 
 const W = 120, H = 60;
-let file = { sections: [] as any[] };
-let activeSec = null, activeEl = null;
-let secCounter = 0, elCounter = 0;
+let file: MonoDisplayFile = new MonoDisplayFile([]);
+let activeSecIndex:number|null = null, activeElIndex:number|null = null;
 let currentFilename = 'untitled';
 let isDirty = false;
 
 // --- Element type definitions ------------------------------------------------
-type ElFieldMeta = { k: string; l: string; t: string; d: any; full?: boolean };
-type ElFlagMeta  = { k: string; l: string };
+type ElFieldMeta = { key: string; label: string; type: string; default: any; full?: boolean };
+type ElFlagMeta  = { key: string; label: string };
 const EL_FIELDS: Partial<Record<keyof typeof ElementType, ElFieldMeta[]>> = {
   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 },
+    { key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 0 },
+    { key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 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 },
+    { key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 0 },
+    { key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: H },
+    { key: 'updateInterval', label: 'Update interval', type: 'number', default: 12 },
+    { key: 'frames', label: 'Frames', type: 'list', default: [] },
   ],
   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 },
+    { key: 'text', label: 'Text', type: 'text', default: 'Hello, World!', full: true },
+    { key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 32 },
+    { key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 16 },
+    { key: 'fontIndex', label: 'Font', type: 'font', default: 'Font 0' },
   ],
   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 },
+    { key: 'text', label: 'Text', type: 'text', default: 'Scrolling text - ', full: true },
+    { key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 32 },
+    { key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 16 },
+    { key: 'scrollSpeed', label: 'Scroll speed', type: 'number', default: 50 },
+    { key: 'fontIndex', label: 'Font', type: 'font', default: 'Font 0' },
+  ],
+  VScrollText: [
+    { key: 'text', label: 'Text', type: 'text', default: 'Scrolling text - ', full: true },
+    { key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 32 },
+    { key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 16 },
+    { key: 'scrollSpeed', label: 'Scroll speed', type: 'number', default: 50 },
+    { key: 'fontIndex', label: 'Font', type: 'font', default: 'Font 0' },
   ],
   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 },
+    { key: 'xOffset', label: 'X offset', type: 'number', default: 0 }, { key: 'yOffset', label: 'Y offset', type: 'number', default: 8 },
+    { key: 'width', label: 'Width', type: 'number', default: W }, { key: 'height', label: 'Height', type: 'number', default: 16 },
+    { key: 'utcOffsetMinutes', label: 'UTC offset (min)', type: 'number', default: 0 },
+    { key: 'fontIndex', label: 'Font', type: 'font', default: 'Font 0' },
   ],
 };
 const EL_FLAGS: Partial<Record<keyof typeof ElementType, ElFlagMeta[]>> = {
-  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' }],
+  HScrollText: [{ key: 'endless', label: 'Endless' }, { key: 'invertDirection', label: 'Invert direction' }],
+  CurrentTime: [{ key: 'clock12h', label: '12h mode' }, { key: 'showHours', label: 'Show hours' }, { key: 'showSeconds', label: 'Show seconds' }],
 };
-const EL_TYPES = Object.keys(EL_FIELDS);
+const EL_TYPES: ElementType[] = Object.keys(EL_FIELDS).map((x: string) => MonoDisplay.StringToElementType[x as MonoDisplay.ElementTypeName]);
+
+const DEFAULT_FONTS = [
+  "Font 1",
+  "Font 2",
+  "Font 3",
+  "Font 4",
+  "Font 5",
+]
 
 // --- Confirm dialog -----------------------------------------------------------
-function confirm(msg, buttons) {
+function confirm(msg: string, buttons: {
+  primary?: boolean,
+  label: string,
+  action: boolean,
+}[]) {
   // buttons: [{label,primary,action}]
   return new Promise(resolve => {
-    const overlay = document.getElementById('confirm-overlay');
-    document.getElementById('confirm-msg').textContent = msg;
+    const overlay: HTMLElement | null = document.getElementById('confirm-overlay');
+    const confirm = document.getElementById('confirm-msg');
+    if(confirm) confirm.textContent = msg;
     const btns = document.getElementById('confirm-btns');
-    btns.innerHTML = '';
+    if(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);
+      el.onclick = () => { overlay?.classList.remove('show'); resolve(b.action); };
+      if(btns) btns.appendChild(el);
     });
-    overlay.classList.add('show');
+    overlay?.classList.add('show');
   });
 }
 
@@ -82,209 +116,265 @@ async function guardDirty() {
 }
 
 // --- Helpers -----------------------------------------------------------------
+function getElementId(elementIndex: number): string {
+  return `Element-${elementIndex}`;
+}
+function getSectionId(sectionIndex: number): string {
+  return `Section-${sectionIndex}`;
+}
 function newSec() {
-  secCounter++;
   return {
-    id: 's' + secCounter, name: 'Section ' + secCounter, open: true,
-    flags: { drawFront: true, clearBuffer: true }, elements: []
+    sectionType: MonoDisplay.SectionType.ElementsAlways,
+    elements: [],
+    flags: {},
   };
 }
-function newEl(type) {
-  elCounter++;
+function newEl(type: MonoDisplay.ElementType) {
   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 };
+  return { type, fields, flags };
+}
+function getSec(sectionIndex: number | null) {
+  return file.sections.find((s,index) => index === sectionIndex)
+}
+
+function getEl(sectionIndex: number, elementIndex: number) {
+  const section = getSec(sectionIndex);
+  return section && "elements" in section && section.elements.find((e, index) => index == elementIndex)
 }
-function getSec(id) { return file.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(); file.sections.push(s);
-  activeSec = s.id; activeEl = null;
-  markDirty(); render(); triggerPreview();
+  activeSecIndex = file.sections.length-1; activeElIndex = null;
+  markDirty(); renderHTML(); triggerPreview();
 }
-function removeSection(id) {
-  file.sections = file.sections.filter(s => s.id !== id);
-  if (activeSec === id) { activeSec = file.sections.length ? file.sections[file.sections.length - 1].id : null; activeEl = null; }
-  markDirty(); render(); triggerPreview();
+function removeSection(sectionIndex:number) {
+  file.sections = file.sections.filter((section, index) => index !== sectionIndex);
+  if (activeSecIndex === sectionIndex) {
+    activeSecIndex = file.sections.length ? file.sections.length - 1 : null;
+    activeElIndex = null;
+  }
+  markDirty(); renderHTML(); triggerPreview();
 }
 function toggleSection(id) {
   const s = getSec(id); if (!s) return;
-  s.open = !s.open; activeSec = id; render(); updateMeta();
+  s.open = !s.open; activeSecIndex = id; renderHTML(); updateMeta();
 }
 function setSectionFlag(flag, val) {
-  if (!activeSec) return;
-  const s = getSec(activeSec); if (!s) return;
+  if (!activeSecIndex) return;
+  const s = getSec(activeSecIndex); if (!s) return;
   s.flags[flag] = val; markDirty(); triggerPreview();
 }
-function addElement(secId) {
+function addElement(sectionIndex:number) {
   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();
+  activeSecIndex = secId; activeElIndex = { secId, elId: el.id };
+  markDirty(); renderHTML(); triggerPreview();
 }
-function removeElement(secId, elId) {
-  const s = getSec(secId); if (!s) return;
+
+function removeElement(sectionIndex:number, elementIndex:number) {
+  const s = getSec(sectionIndex); 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();
+  if (activeElIndex && activeElIndex.secId === secId && activeElIndex.elId === elId) activeElIndex = null;
+  markDirty(); renderHTML(); triggerPreview();
 }
-function selectElement(secId, elId) {
-  activeSec = secId;
-  activeEl = activeEl && activeEl.secId === secId && activeEl.elId === elId ? null : { secId, elId };
-  render();
+function selectElement(sectionIndex:number, elementIndex:number) {
+  activeSecIndex = sectionIndex;
+  activeElIndex = activeElIndex &&
+    activeElIndex === sectionIndex &&
+    activeElIndex === elementIndex ?
+      null : elementIndex;
+  renderHTML();
 }
-function changeElType(secId, elId, type) {
-  const el = getEl(secId, elId); if (!el) return;
+function changeElType(sectionIndex:number, elementIndex:number, typeString: string) {
+  const el = getEl(sectionIndex, elementIndex); if (!el) return;
+  const type = MonoDisplay.StringToElementType[typeString as MonoDisplay.ElementTypeName];
   const fresh = newEl(type);
   el.type = type; el.fields = fresh.fields; el.flags = fresh.flags;
-  markDirty(); render(); triggerPreview();
+  markDirty(); renderHTML(); triggerPreview();
 }
-function setElField(secId, elId, key, val) {
-  const el = getEl(secId, elId); if (!el) return;
-  el.fields[key] = val; markDirty(); triggerPreview();
+function setElField(sectionIndex:number, elementIndex:number, key:string, val:any) {
+  const el = getEl(sectionIndex, elementIndex); if (!el) return;
+  el[key] = val;
+  markDirty(); triggerPreview();
 }
-function setElFlag(secId, elId, key, val) {
-  const el = getEl(secId, elId); if (!el) return;
-  el.flags[key] = val; markDirty(); triggerPreview();
+function setElFlag(sectionIndex:number, elementIndex:number, key:string, val:any) {
+  const el = getEl(sectionIndex, elementIndex); 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: true, 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];
+function setSectionType(sectionIndex: number, sectionType: string) {
+  const sec = getSec(sectionIndex);
+  if (sec) {
+    sec.sectionType = MonoDisplay.StringToSectionType[sectionType as MonoDisplay.SectionTypeName];
+    if (sec.sectionType == MonoDisplay.SectionType.CustomFont) {
+      sec.fontData = new Uint8Array();
+    } else {
+      sec.elements = [];
+      sec.flags = {};
     }
-  },
-  {
-    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];
-    }
-  },
-];
+    markDirty(); triggerPreview();
+  }
+}
 
-// --- Preview via MonoDisplayFile (same as original demos) --------------------
-const DEMO_PREVIEWS = {
+// --- Load demo into editor state ---------------------------------------------
+const DEMO = {
   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();
+    return new MonoDisplayFile(
+      [{
+        sectionType: MonoDisplay.SectionType.ElementsAlways,
+        elements: [{
+          type: ElementType.Image2D,
+          image: {
+            pixels,
+            height: H,
+            width: W,
+          },
+          xOffset: 0, yOffset: 0,
+        }],
+        flags: {
+          clearBuffer: true,
+          drawFront: true,
+          drawBack: true
+        }
+      }]);
   },
   Blink() {
-    const { MonoDisplayFile, ElementType } = window.MonoDisplay;
-    return new MonoDisplayFile({
-      elements_always: {
-        flags: { drawFront: true, clearBuffer: true },
-        elements: [{
+    return new MonoDisplayFile(
+      [{
+        sectionType: MonoDisplay.SectionType.ElementsAlways,
+        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();
+          xOffset: 0,
+          yOffset: 0,
+          frames: [{
+            pixels: new Uint8Array(W * H).fill(1),
+            width: 0,
+            height: 0
+          }, {
+            pixels: new Uint8Array(W * H).fill(0),
+            width: 0,
+            height: 0
+          }]
+        }],
+        flags: {
+          clearBuffer: true,
+          drawFront: true,
+          drawBack: true
+        }
+      }]);
   },
   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();
+    return new MonoDisplayFile(
+      [{
+        sectionType: MonoDisplay.SectionType.ElementsAlways,
+        elements: [{
+          type: ElementType.ClippedText,
+          fontIndex: 0,
+          text: 'Hello, World!',
+          xOffset: 0, yOffset: 32,
+          width: W, height: 16
+        }],
+        flags: {
+          clearBuffer: true,
+          drawFront: true,
+          drawBack: true
+        }
+      }]);
   },
   Scrolltext() {
-    const { MonoDisplayFile, ElementType } = window.MonoDisplay;
-    return new MonoDisplayFile({
-      elements_always: {
-        flags: { drawFront: true, clearBuffer: true },
+    return new MonoDisplayFile(
+      [{
+        sectionType: MonoDisplay.SectionType.ElementsAlways,
         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();
+          type: ElementType.HScrollText,
+          fontIndex: 0,
+          text: 'MONO DISPLAY - scrolling ticker - 🚀 ',
+          xOffset: 0, yOffset: 32,
+          width: W, height: 16,
+          scrollSpeed: 50,
+          flags: {
+            endless: true,
+            invertDirection: false,
+            padStart: false,
+            padEnd: false
+          }
+        }],
+        flags: {
+          clearBuffer: true,
+          drawFront: true,
+          drawBack: true
+        }
+      }]);
   },
   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: 80, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 },
-        ]
-      }
-    }).toBuffer();
+    return new MonoDisplayFile(
+      [{
+        sectionType: MonoDisplay.SectionType.ElementsAlways,
+        elements: [
+          {
+            type: ElementType.CurrentTime,
+            fontIndex: 0,
+            flags: {},
+            xOffset: 0, yOffset: 8, width: W, height: 16, utcOffsetMinutes: 120
+          },
+          {
+            type: ElementType.CurrentTime,
+            fontIndex: 0,
+            flags: { clock12h: true },
+            xOffset: 40, yOffset: 16, width: W, height: 16, utcOffsetMinutes: 120
+          },
+          {
+            type: ElementType.CurrentTime,
+            fontIndex: 0,
+            flags: { clock12h: true, showHours: true },
+            xOffset: 0, yOffset: 24, width: W, height: 16, utcOffsetMinutes: 120
+          },
+          {
+            type: ElementType.CurrentTime,
+            flags: { clock12h: true, showHours: false },
+            fontIndex: 0,
+            xOffset: 40, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120
+          },
+          {
+            type: ElementType.CurrentTime,
+            fontIndex: 0,
+            flags: { clock12h: true, showSeconds: true },
+            xOffset: 80, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120
+          },
+        ],
+        flags: {
+          clearBuffer: true,
+          drawFront: true,
+          drawBack: true
+        }
+      }]);
   },
 };
 
 function initDemos() {
   const wrap = document.getElementById('demo-btns');
   let activeBtn = null;
-  DEMO_DEFS.forEach(d => {
+  Object.entries(DEMO).forEach((entry: [demoName:string, demoFileFunc: () => MonoDisplayFile]) => {
+    const [demoName, demoFileFunc] = entry;
     const btn = document.createElement('button');
-    btn.className = 'tb-btn'; btn.textContent = d.label;
+    btn.className = 'tb-btn'; btn.textContent = demoName;
     btn.onclick = async () => {
       const ok = await guardDirty();
       if (!ok) return;
       // load into editor
-      file.sections = d.build();
-      activeSec = file.sections[0]?.id || null; activeEl = null;
-      currentFilename = d.label.toLowerCase();
+      file = demoFileFunc();
+      activeSecIndex = null;
+      activeElIndex = null;
+      currentFilename = demoName.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]()));
+      markClean(); renderHTML();
+      triggerPreview();
       if (activeBtn) activeBtn.style.color = '';
       btn.style.color = '#33ff66'; activeBtn = btn;
     };
@@ -293,90 +383,189 @@ function initDemos() {
 }
 
 // --- Render -------------------------------------------------------------------
-function render() {
+function renderHTML() {
   updateMeta();
   const wrap = document.getElementById('sections-wrap');
   if (!file.sections.length) {
     wrap.innerHTML = '<div class="empty-state">No sections yet.<br/>Use <b>Add section</b> to get started.</div>';
     return;
   }
-  wrap.innerHTML = file.sections.map(s => renderSection(s)).join('');
+  wrap.innerHTML = file.sections.map((section, index, sections) => renderHTMLSection(index)).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}')">
+function renderHTMLSection(sectionIndex: number) {
+  const section = file.sections.at(sectionIndex);
+  if (!section) return ``;
+  if (activeSecIndex == null && file.sections.length == 1) activeSecIndex = 0;
+  const isActive = activeSecIndex === sectionIndex, isOpen = true;
+  const sectionId = getSectionId(sectionIndex);
+  switch (section.sectionType) {
+    case MonoDisplay.SectionType.ElementsAlways:
+    case MonoDisplay.SectionType.ElementsTimespan:
+    return `
+<div class="sec-card${isActive ? ' active' : ''}${isOpen ? ' open' : ''}" id="${sectionId}">
+<div class="sec-hdr${isActive ? ' active' : ''}" onclick="toggleSection('${sectionId}')">
+<span class="sec-arrow">▶</span>
+<span class="sec-label">${MonoDisplay.SectionTypeToString[section.sectionType]}</span>
+<span class="sec-badge">${section.elements.length} el</span>
+<button class="x-btn" title="Remove section" onclick="event.stopPropagation();removeSection(${sectionIndex})">X</button>
+</div>
+${isOpen ? `
+<div class="el-list">
+${section.elements.map((el: MonoDisplay.MonoFormatElement, index:number) => renderHTMLElement(sectionIndex, index, el)).join('')}
+<button class="add-el" onclick="addElement('${sectionId}')">+ add element</button>
+</div>`: ''}
+</div>`;
+    case MonoDisplay.SectionType.CustomFont: {
+    return `
+<div class="sec-card${isActive ? ' active' : ''}${isOpen ? ' open' : ''}" id="${sectionId}">
+<div class="sec-hdr${isActive ? ' active' : ''}" onclick="toggleSection('${sectionId}')">
 <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>
+<span class="sec-label">Custom Font</span>
+<span class="sec-badge">1 el</span>
+<button class="x-btn" title="Remove section" onclick="event.stopPropagation();removeSection(${sectionIndex})">X</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 ? `
+function renderHTMLElement(sectionIndex: number, elementIndex: number, el: MonoDisplay.MonoFormatElement) {
+  const section = file.sections.at(sectionIndex);
+  const currentSectionElements: any[] = section && "elements" in section ? section.elements: [];
+  if (activeElIndex == null && currentSectionElements.length == 1) activeElIndex = 0;
+  const isActive = activeElIndex == elementIndex && activeSecIndex == sectionIndex;
+  const elementId = getElementId(elementIndex);
+  const sectionId = getSectionId(sectionIndex);
+  const typeString = MonoDisplay.ElementTypeToString[el.type];
+  const fields = EL_FIELDS[typeString] || [];
+  const flags = EL_FLAGS[typeString] || [];
+  const getCustomFonts = ():{fontname:string, index:number}[] => {
+    return file.sections
+      .filter(section => section.sectionType == MonoDisplay.SectionType.CustomFont)
+      .map((fontSection, index) => {
+        return {
+          fontname: `CustomFont ${index}`,
+          index: 0x8000 + index,
+        };
+      });
+  }
+  function renderHTMLField(field: ElFieldMeta) {
+    switch (field.type) {
+      case 'text': {
+        return `<textarea
+          onchange="setElField(${sectionIndex},${elementIndex},'${field.key}',this.value)"
+          >${esc(el[field.key] ?? field.default)}</textarea>`
+      }
+      case 'font': {
+        return `<select onchange="setElField(${sectionIndex},${elementIndex},'${field.key}',+this.value)">
+        ${DEFAULT_FONTS.map((fontname, index) => `<option value="${index}" >${fontname}</option>`).join("")}
+        ${getCustomFonts().map((k:{fontname:string, index:number}) => `<option value="${k.index}" >${k.fontname}</option>`).join("")}
+        </select>
+        `;
+      }
+      default:
+        return `<input type="number"
+        value="${el[field.key as string] ?? field.default}"
+        onchange="setElField(${sectionIndex},${elementIndex},'${field.key}',+this.value)"
+        />`;
+    }
+  }
+  function renderHTMLFlag(el: MonoDisplay.MonoFormatElement & {flags: Record<string, any>}, flag: ElFlagMeta | null) {
+    if (el.flags && flag)
+      return `
+    <label class="flag-check">
+      <input type="checkbox" ${el.flags[flag.key] ? 'checked' : ''}
+        onchange="setElFlag(${sectionIndex},${elementIndex},'${flag.key}',this.checked)"
+      />
+      ${flag.label}
+    </label>`;
+    return ``;
+  }
+
+  const fieldsGrid = fields.map(field => `
+  <div class="field${field.full ? ' full' : ''}">
+    <label>${field.label}</label>
+    ${renderHTMLField(field)}
+  </div>`).join('');
+
+  const flagsGrid = flags.length ? `
+<div class="field full">
+  <label>Flags</label>
+  <div class="flags-row">
+    ${flags.map(flag => renderHTMLFlag(el, flag)).join('')}
+  </div>
+</div>`: ``;
+
+  const activeRender = `
 <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 onchange="changeElType(${sectionIndex},${elementIndex},this.value)">
+    ${EL_TYPES.map(t => `<option value="${MonoDisplay.ElementTypeToString[t]}"${t === el.type ? ' selected' : ''}>${MonoDisplay.ElementTypeToString[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('')}
+  ${fieldsGrid}
 </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('')}
+${flagsGrid}
+</div>`;
+
+  return `
+<div class="el-item${isActive ? ' active' : ''}" id="${elementId}">
+  <div class="el-item-hdr" onclick="selectElement(${sectionIndex},${elementIndex})">
+    <span class="el-type">${MonoDisplay.ElementTypeToString[el.type]}</span>
+    <span class="el-name">${elSummary(el)}</span>
+    <button class="x-btn" title="Remove element" onclick="event.stopPropagation();removeElement(${sectionIndex},${elementIndex})">X</button>
   </div>
-</div>`: ''}
-</div>`: ''}
+${isActive ? activeRender : ``}
 </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 elSummary(el: MonoDisplay.MonoFormatElement) {
+  switch (el.type) {
+    case ElementType.ClippedText:
+    case ElementType.HScrollText:
+      // case ElementType.VScrollText:
+      return esc(el.text.slice(0, 24) + (el.text.length > 24 ? '...' : ''));
+    case ElementType.CurrentTime:
+    case ElementType.Image2D:
+    case ElementType.HorizontalScroll:
+    case ElementType.VerticalScroll:
+      return `${el.xOffset ?? 0}, ${el.yOffset ?? 0}`;
+
+    case ElementType.Animation:
+    case ElementType.Line:
+      return `${el.type.toString()}`;
+    default:
+      return "?";
+  }
 }
 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;
+  const section = getSec(activeSecIndex);
+  const sectionSelection = document.getElementById('meta-name');
+  if (sectionSelection) {
+    if (section) {
+      const options = Object.entries(MonoDisplay.SectionTypeToString)
+        .map((element, index) => `<option value=${element[1]}>${element[1]}</option>`)
+        .join("");
+      sectionSelection.innerHTML = `<select id="section-type-selection" onchange="setSectionType(activeSecIndex, this.value)">
+    ${options}
+    </select>`;
+    } else {
+      sectionSelection.innerHTML = "-";
+    }
+  }
+  document.getElementById('meta-count').textContent = section && "elements" in section ? section.elements.length + ' element(s)' : '-';
+  document.getElementById('flag-drawFront').checked = section ? !!section.flags.drawFront : false;
+  document.getElementById('flag-drawBack').checked = section ? !!section.flags.drawBack : false;
+  document.getElementById('flag-clearBuffer').checked = section ? !!section.flags.clearBuffer : false;
 }
 
 // --- Preview ------------------------------------------------------------------
@@ -387,80 +576,27 @@ function triggerPreview() {
 }
 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) : file.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()
-  ));
+    window._mdDriver = new MonoDisplay.MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 });
+  const s = file.sections[activeSecIndex || 0];
+  window._mdDriver.load(() => Promise.resolve(file.toBuffer()));
+  // now update the sections
+  renderHTML();
 }
 
 // --- Load / Export ------------------------------------------------------------
-function parsedToSections(parsedSecs) {
-  const TYPE_MAP = { 1: 'Image2D', 2: 'Animation', 16: 'ClippedText', 17: 'HScrollText', 32: 'CurrentTime' };
-  return parsedSecs
-    .filter(s => s.sectionType === 1 || s.sectionType === 2)
-    .map(s => {
-      secCounter++;
-      const elements = (s.elements || []).map(el => {
-        const typeName = TYPE_MAP[el.type];
-        if (!typeName) return null;
-        elCounter++;
-        let fields = {}, flags = {};
-        switch (typeName) {
-          case 'Image2D':
-            fields = { xOffset: el.xOffset, yOffset: el.yOffset, width: el.image?.width ?? W, height: el.image?.height ?? H, pixels: el.image?.pixels };
-            break;
-          case 'Animation':
-            fields = { xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height, updateInterval: el.updateInterval, frames: el.frames };
-            break;
-          case 'ClippedText':
-            fields = { text: el.text, xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height };
-            break;
-          case 'HScrollText':
-            fields = { text: el.text, xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height, scrollSpeed: el.scrollSpeed };
-            flags = { endless: !!el.flags?.endless, invertDirection: !!el.flags?.invertDirection };
-            break;
-          case 'CurrentTime':
-            fields = { xOffset: el.xOffset, yOffset: el.yOffset, width: el.width, height: el.height, utcOffsetMinutes: el.utcOffsetMinutes };
-            flags = { clock12h: !!el.flags?.clock12h, showHours: !!el.flags?.showHours, showSeconds: !!el.flags?.showSeconds };
-            break;
-        }
-        return { id: 'e' + elCounter, type: typeName, fields, flags };
-      }).filter(Boolean);
-      return {
-        id: 's' + secCounter,
-        name: 'Section ' + secCounter,
-        open: true,
-        flags: { drawFront: !!s.flags?.drawFront, clearBuffer: !!s.flags?.clearBuffer },
-        elements
-      };
-    });
-}
-
-function loadBin(input) {
+function loadBin(input: { files: any[]; value: string; }) {
   const binFile = input.files[0]; if (!binFile) return;
   currentFilename = binFile.name;
   document.getElementById('filename').textContent = binFile.name;
   const reader = new FileReader();
   reader.onload = e => {
     const arrayBuf = e.target.result;
-    const buf = new Uint8Array(arrayBuf);
-    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));
     try {
-      const parsed = new window.MonoDisplay.MonoDisplayParser().parse(arrayBuf);
-      file.sections = parsedToSections(parsed.sections);
-      activeSec = file.sections.length ? file.sections[0].id : null;
-      activeEl = null;
-      render();
+      file = new window.MonoDisplay.MonoDisplayParser().parse(arrayBuf);
+      activeSecIndex = null;
+      activeElIndex = null;
+      triggerPreview();
     } catch (err) {
       console.warn('Could not parse sections from bin:', err);
     }
@@ -470,12 +606,7 @@ function loadBin(input) {
 }
 function exportBin() {
   if (!window.MonoDisplay) { alert('MonoDisplay library not loaded.'); return; }
-  const { MonoDisplayFile, ElementType } = window.MonoDisplay;
-  const s = activeSec ? getSec(activeSec) : file.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 blob = new Blob([file.toBuffer() as any], { type: 'application/octet-stream' });
   const a = document.createElement('a');
   a.href = URL.createObjectURL(blob);
   a.download = currentFilename.replace(/\.bin$/, '') + '.bin';
@@ -491,10 +622,10 @@ Object.assign(window, {
   loadBin, exportBin,
   addSection, removeSection, toggleSection, setSectionFlag,
   addElement, removeElement, selectElement,
-  changeElType, setElField, setElFlag,
+  changeElType, setElField, setElFlag, setSectionType,
   cycleTheme,
 });
 
-render();
+triggerPreview();
 if (window.MonoDisplay) { initDemos(); }
 else { const iv = setInterval(() => { if (window.MonoDisplay) { clearInterval(iv); initDemos(); } }, 100); }
diff --git a/ts/src/file.ts b/ts/src/file.ts
index 8ea4431..940997b 100644
--- a/ts/src/file.ts
+++ b/ts/src/file.ts
@@ -4,41 +4,68 @@
 
 import { packedSize, packPixels, pad32 } from "./helper";
 import { MONOFORMAT_MAGIC_HEADER } from "./parser";
-import { ElementType, SectionType, type AnimationElement, type ClippedTextElement, type CurrentTimeElement, type DrawElement, type ElementsAlwaysDescriptor, type HScrollElement, type HScrollTextElement, type Image2DElement, type LineElement, type MonoDisplayFileDescriptor, type ScrollElementFlags, type SectionFlags, type VScrollElement } from "./types";
+import {
+  ElementType,
+  SectionType,
+  type MonoFormatAnimation,
+  type MonoFormatClippedText,
+  type MonoFormatCurrentTime,
+  type MonoFormatCustomFont,
+  type MonoFormatElement,
+  type MonoFormatElementsAlways,
+  type MonoFormatElementsTimespan,
+  type MonoFormatFile,
+  type MonoFormatHScroll,
+  type MonoFormatHScrollText,
+  type MonoFormatImage2D,
+  type MonoFormatLine,
+  type MonoFormatScrollElementFlags,
+  type MonoFormatSection,
+  type MonoFormatVScroll,
+} from "./types";
 
 /**
  * Encodes a MonoDisplayFileDescriptor to a valid .bin ArrayBuffer.
  *
- * elements_always → Section type 1 (ElementsAlways).
+ * elements_always -> Section type 1 (ElementsAlways).
  *   Pass a DrawElement[] or { flags, elements }.
  *   Default flags: drawFront=true, drawBack=false, clearBuffer=false.
  *
  * PLAN: encode ElementsTimespan sections, CustomFont sections.
  */
-export class MonoDisplayFile {
-  private desc: MonoDisplayFileDescriptor;
+export class MonoDisplayFile implements MonoFormatFile {
+  constructor(public sections: MonoFormatSection[], public version: number = 1) {
 
-  constructor(descriptor: MonoDisplayFileDescriptor) {
-    this.desc = descriptor;
   }
 
   toBuffer(): Uint8Array<ArrayBufferLike> {
     const sections: Uint8Array[] = [];
 
-    // Section 1: elements always
-    const alwaysDesc = this.desc.elements_always;
-    if (alwaysDesc) {
-      const isArray  = Array.isArray(alwaysDesc);
-      const elements = isArray ? alwaysDesc as DrawElement[] : (alwaysDesc as ElementsAlwaysDescriptor).elements;
-      const flags    = isArray ? undefined : (alwaysDesc as ElementsAlwaysDescriptor).flags;
-      sections.push(this.#encodeElementsSection(SectionType.ElementsAlways, flags, elements));
+    for (const section of this.sections) {
+      switch (section.sectionType) {
+        case SectionType.ElementsAlways:
+        {
+          sections.push(this.#encodeElementsAlwaysSection(section));
+          break;
+        }
+        case SectionType.ElementsTimespan:
+        {
+          sections.push(this.#encodeElementsTimespanSection(section));
+          break;
+        }
+        case SectionType.CustomFont: {
+          sections.push(this.#encodeCustomFont(section));
+          break;
+        }
+      }
     }
 
+
     // File header (12 bytes)
     const hdrBuf  = new ArrayBuffer(12);
     const hdrView = new DataView(hdrBuf);
     hdrView.setUint32(0, MONOFORMAT_MAGIC_HEADER, true);
-    hdrView.setUint32(4, 1,     true); // version
+    hdrView.setUint32(4, this.version,    true); // version
     hdrView.setUint16(8, sections.length, true);
     hdrView.setUint16(10, 0,    true); // reserved
 
@@ -47,36 +74,85 @@ export class MonoDisplayFile {
 
   // --- section encoders ---
 
-  #encodeElementsSection(
-    type: SectionType.ElementsAlways | SectionType.ElementsTimespan,
-    flags: SectionFlags | undefined,
-    elements: DrawElement[],
+  #encodeElementsAlwaysSection(
+    section: MonoFormatElementsAlways,
   ): Uint8Array {
     const flagBits =
-      (flags?.drawFront  ?? true  ? 0x01 : 0) |
-      (flags?.drawBack   ?? false ? 0x02 : 0) |
-      (flags?.clearBuffer ?? false ? 0x04 : 0);
+      (section.flags.drawFront  ?? true  ? 0x01 : 0) |
+      (section.flags.drawBack   ?? false ? 0x02 : 0) |
+      (section.flags.clearBuffer ?? false ? 0x04 : 0);
 
-    const encodedEls = elements.map(el => this.#encodeElement(el));
+    const encodedEls = section.elements.map(el => this.#encodeElement(el));
     const sectionDataSize = 4 + encodedEls.reduce((s, e) => s + e.byteLength, 0);
     // sectionSize (in header) = 4 (header) + sectionDataSize
     const sectionSize = 4 + sectionDataSize;
 
     const hdr = new Uint8Array(4 + 4); // section header (4) + section sub-header (4)
     const v   = new DataView(hdr.buffer);
-    v.setUint8(0, type);
+    v.setUint8(0, section.sectionType);
+    v.setUint8(1,  sectionSize        & 0xFF);
+    v.setUint8(2, (sectionSize >> 8)  & 0xFF);
+    v.setUint8(3, (sectionSize >> 16) & 0xFF);
+    v.setUint16(4, flagBits,        true); // flags
+    v.setUint16(6, section.elements.length, true); // numElements
+
+    return this.#concat(hdr, ...encodedEls);
+  }
+
+  #encodeElementsTimespanSection(
+    section: MonoFormatElementsTimespan,
+  ): Uint8Array {
+    const flagBits =
+      (section.flags.drawFront  ?? true  ? 0x01 : 0) |
+      (section.flags.drawBack   ?? false ? 0x02 : 0) |
+      (section.flags.clearBuffer ?? false ? 0x04 : 0);
+
+    const encodedEls = section.elements.map(el => this.#encodeElement(el));
+    const sectionDataSize = 4 + encodedEls.reduce((s, e) => s + e.byteLength, 0);
+    // sectionSize (in header) = 4 (header) + sectionDataSize
+    const sectionSize = 4 + sectionDataSize;
+
+    const hdr = new Uint8Array(4 + 5*4); // section header (4) + section sub-header (4)
+    const v   = new DataView(hdr.buffer);
+    v.setUint8(0, section.sectionType);
     v.setUint8(1,  sectionSize        & 0xFF);
     v.setUint8(2, (sectionSize >> 8)  & 0xFF);
     v.setUint8(3, (sectionSize >> 16) & 0xFF);
     v.setUint16(4, flagBits,        true); // flags
-    v.setUint16(6, elements.length, true); // numElements
+    v.setUint16(6, section.elements.length, true); // numElements
+
+    // section.startTimestamp.valueOf()
+    const startTimestampLow = 0, startTimestampHigh = 0, endTimestampLow = 0, endTimestampHigh = 0;
+    v.setUint32(8, startTimestampLow, true); // flags
+    v.setUint32(12, startTimestampHigh, true); // numElements
+    v.setUint32(16, endTimestampLow, true); // numElements
+    v.setUint32(20, endTimestampHigh, true); // numElements
 
     return this.#concat(hdr, ...encodedEls);
   }
 
+  #encodeCustomFont(
+    section: MonoFormatCustomFont,
+  ): Uint8Array {
+
+    const sectionSize = 4 + section.fontData.length;
+    const hdr = new Uint8Array(4 + 4); // section header (4) + section sub-header (4)
+    const v   = new DataView(hdr.buffer);
+    v.setUint8(0, section.sectionType);
+    v.setUint8(1,  sectionSize        & 0xFF);
+    v.setUint8(2, (sectionSize >> 8)  & 0xFF);
+    v.setUint8(3, (sectionSize >> 16) & 0xFF);
+    v.setUint8(4,  section.fontData.length        & 0xFF);
+    v.setUint8(5, (section.fontData.length >> 8)  & 0xFF);
+    v.setUint8(6, (section.fontData.length >> 16) & 0xFF);
+    v.setUint8(7, 0);
+
+    return this.#concat(hdr, section.fontData);
+  }
+
   // --- element encoders ---
 
-  #encodeElement(el: DrawElement): Uint8Array {
+  #encodeElement(el: MonoFormatElement): Uint8Array {
     switch (el.type) {
       case ElementType.Image2D:          return this.#encodeImage2D(el);
       case ElementType.Animation:        return this.#encodeAnimation(el);
@@ -90,8 +166,8 @@ export class MonoDisplayFile {
     }
   }
 
-  #encodeImage2D(el: Image2DElement): Uint8Array {
-    const packed  = packPixels(el.pixels, el.width, el.height);
+  #encodeImage2D(el: MonoFormatImage2D): Uint8Array {
+    const packed  = packPixels(el.image.pixels, el.image.width, el.image.height);
     const fixed   = 12; // bytes before pixel data
     const rawSize = fixed + packed.byteLength;
     const total   = rawSize + pad32(rawSize);
@@ -100,14 +176,14 @@ export class MonoDisplayFile {
     v.setUint16(0, ElementType.Image2D, true);
     v.setUint16(2, el.xOffset ?? 0,     true);
     v.setUint16(4, el.yOffset ?? 0,     true);
-    v.setUint16(6, el.width,            true);
-    v.setUint16(8, el.height,           true);
+    v.setUint16(6, el.image.width,      true);
+    v.setUint16(8, el.image.height,     true);
     v.setUint16(10, 0,                  true); // reserved
     out.set(packed, 12);
     return out;
   }
 
-  #encodeAnimation(el: AnimationElement): Uint8Array {
+  #encodeAnimation(el: MonoFormatAnimation): Uint8Array {
     const frameBytes = packedSize(el.width, el.height);
     const fixed   = 16;
     const rawSize = fixed + el.frames.length * frameBytes;
@@ -130,7 +206,7 @@ export class MonoDisplayFile {
     return out;
   }
 
-  #encodeScrollFlags(f: ScrollElementFlags | undefined): number {
+  #encodeScrollFlags(f: MonoFormatScrollElementFlags | undefined): number {
     return (
       (f?.endless         ? 0x01 : 0) |
       (f?.invertDirection ? 0x02 : 0) |
@@ -139,8 +215,8 @@ export class MonoDisplayFile {
     );
   }
 
-  #encodeHScroll(el: HScrollElement): Uint8Array {
-    const packed  = packPixels(el.pixels, el.contentWidth, el.height);
+  #encodeHScroll(el: MonoFormatHScroll): Uint8Array {
+    const packed  = packPixels(el.content.pixels, el.contentWidth, el.height);
     const fixed   = 16;
     const rawSize = fixed + packed.byteLength;
     const total   = rawSize + pad32(rawSize);
@@ -159,8 +235,8 @@ export class MonoDisplayFile {
     return out;
   }
 
-  #encodeVScroll(el: VScrollElement): Uint8Array {
-    const packed  = packPixels(el.pixels, el.width, el.contentHeight);
+  #encodeVScroll(el: MonoFormatVScroll): Uint8Array {
+    const packed  = packPixels(el.content.pixels, el.width, el.contentHeight);
     const fixed   = 16;
     const rawSize = fixed + packed.byteLength;
     const total   = rawSize + pad32(rawSize);
@@ -179,7 +255,7 @@ export class MonoDisplayFile {
     return out;
   }
 
-  #encodeLine(el: LineElement): Uint8Array {
+  #encodeLine(el: MonoFormatLine): Uint8Array {
     // 12 bytes, already 32-bit aligned
     const out = new Uint8Array(12);
     const v   = new DataView(out.buffer);
@@ -193,7 +269,7 @@ export class MonoDisplayFile {
     return out;
   }
 
-  #encodeClippedText(el: ClippedTextElement): Uint8Array {
+  #encodeClippedText(el: MonoFormatClippedText): Uint8Array {
     const enc     = new TextEncoder().encode(el.text);
     const fixed   = 14; // 2+2+2+2+2+2+2
     const rawSize = fixed + enc.byteLength;
@@ -211,7 +287,7 @@ export class MonoDisplayFile {
     return out;
   }
 
-  #encodeHScrollText(el: HScrollTextElement): Uint8Array {
+  #encodeHScrollText(el: MonoFormatHScrollText): Uint8Array {
     const enc     = new TextEncoder().encode(el.text);
     const fixed   = 16; // 2+2+2+2+2+1+1+2+2
     const rawSize = fixed + enc.byteLength;
@@ -231,7 +307,7 @@ export class MonoDisplayFile {
     return out;
   }
 
-  #encodeCurrentTime(el: CurrentTimeElement): Uint8Array {
+  #encodeCurrentTime(el: MonoFormatCurrentTime): Uint8Array {
     // Fixed 16 bytes, already 32-bit aligned
     const out = new Uint8Array(16);
     const v   = new DataView(out.buffer);
@@ -278,6 +354,14 @@ export async function loadBinFile(url: string): Promise<ArrayBuffer> {
  * Build a single-element-always .bin buffer containing one Image2D element.
  * Convenience for tests; for production use MonoDisplayFile directly.
  */
-export function buildBinBuffer(el: Image2DElement): Uint8Array {
-  return new MonoDisplayFile({ elements_always: [el] }).toBuffer();
+export function buildBinBuffer(el: MonoFormatImage2D): Uint8Array {
+  return new MonoDisplayFile([{
+    sectionType: SectionType.ElementsAlways,
+    elements: [el],
+    flags: {
+      drawFront: true,
+      drawBack: true,
+      clearBuffer: true,
+    },
+  }]).toBuffer();
 }
diff --git a/ts/src/types.ts b/ts/src/types.ts
index 0ca2cf4..e95a7d7 100644
--- a/ts/src/types.ts
+++ b/ts/src/types.ts
@@ -22,6 +22,19 @@ export enum SectionType {
   /** U8G2-format custom font used by draw elements in this file */
   CustomFont = 32,
 }
+export type SectionTypeName = keyof typeof SectionType;
+
+export const SectionTypeToString = Object.fromEntries(
+  (Object.keys(SectionType) as SectionTypeName[])
+    .filter(k => isNaN(Number(k)))
+    .map(k => [SectionType[k], k])
+) as Record<SectionType, SectionTypeName>;
+
+export const StringToSectionType = Object.fromEntries(
+  (Object.keys(SectionType) as SectionTypeName[])
+    .filter(k => isNaN(Number(k)))
+    .map(k => [k, SectionType[k]])
+) as Record<SectionTypeName, SectionType>;
 
 export enum ElementType {
   Image2D = 1,
@@ -31,15 +44,29 @@ export enum ElementType {
   Line = 5,
   ClippedText = 16,
   HScrollText = 17,
+  VScrollText = 18,
   CurrentTime = 32,
 }
 
+export type ElementTypeName = keyof typeof ElementType;
+
+export const ElementTypeToString = Object.fromEntries(
+  (Object.keys(ElementType) as ElementTypeName[])
+    .filter(k => isNaN(Number(k)))
+    .map(k => [ElementType[k], k])
+) as Record<ElementType, ElementTypeName>;
+
+export const StringToElementType = Object.fromEntries(
+  (Object.keys(ElementType) as ElementTypeName[])
+    .filter(k => isNaN(Number(k)))
+    .map(k => [k, ElementType[k]])
+) as Record<ElementTypeName, ElementType>;
 // ---------------------------------------------------------------------------
 // Section flags (section types 1 and 2)
 // ---------------------------------------------------------------------------
 
 /** Bit-field flags for ElementsAlways / ElementsTimespan sections. */
-export interface SectionFlags {
+export interface MonoFormatSectionFlags {
   /** Bit 0 - render elements onto the front-side buffer. */
   drawFront?: boolean;
   /** Bit 1 - render elements onto the back-side buffer. */
@@ -53,7 +80,7 @@ export interface SectionFlags {
 // Scroll element flags (HorizontalScroll / VerticalScroll / HScrollText)
 // ---------------------------------------------------------------------------
 
-export interface ScrollElementFlags {
+export interface MonoFormatScrollElementFlags {
   /** Bit 0 - wrap content endlessly. */
   endless?: boolean;
   /** Bit 1 - reverse scroll direction. */
@@ -69,7 +96,7 @@ export interface ScrollElementFlags {
 // CurrentTime element flags
 // ---------------------------------------------------------------------------
 
-export interface CurrentTimeFlags {
+export interface MonoFormatCurrentTimeFlags {
   /** Bit 0 - use 12-hour clock (default 24-hour). */
   clock12h?: boolean;
   /** Bit 1 - show hours. */
@@ -85,7 +112,7 @@ export interface CurrentTimeFlags {
 // Line element flags
 // ---------------------------------------------------------------------------
 
-export interface LineFlags {
+export interface MonoFormatLineFlags {
   /** Bit 0 - invert pixel values along the line. */
   invertPixels?: boolean;
   // Bits 1-7: reserved.
@@ -116,174 +143,15 @@ export function customFontOrdinal(fontIndex: FontIndex): number {
   return fontIndex - CUSTOM_FONT_BASE;
 }
 
-// ---------------------------------------------------------------------------
-// User-facing element descriptors  (MonoDisplayFile / builder input)
-// Pixels are 1 byte/pixel (0 = off, 1 = on) in the API; packed to 1bpp on
-// serialisation.
-// ---------------------------------------------------------------------------
-
-export interface Image2DElement {
-  type: ElementType.Image2D;
-  /** Row-major, 1 byte/pixel (0 = off, 1 = on). Packed to 1bpp on write. */
-  pixels: Uint8Array;
-  width: number;
-  height: number;
-  xOffset?: number; // default 0
-  yOffset?: number; // default 0
-}
-
-export interface AnimationFrameDescriptor {
-  /** 1 byte/pixel, same dimensions as the parent AnimationElement. */
-  pixels: Uint8Array;
-}
-
-export interface AnimationElement {
-  type: ElementType.Animation;
-  width: number;
-  height: number;
-  frames: AnimationFrameDescriptor[];
-  /**
-   * Advance frame every (updateInterval + 1) ticks.
-   * 0 = every tick, 1 = every 2nd tick, ..., 65535 = every 65536th tick.
-   * Default 0.
-   */
-  updateInterval?: number;
-  xOffset?: number;
-  yOffset?: number;
-}
-
-export interface HScrollElement {
-  type: ElementType.HorizontalScroll;
-  /** Viewport width in pixels. */
-  width: number;
-  /** Viewport height in pixels. */
-  height: number;
-  /** Scrolling content pixels (contentWidth × height), 1 byte/pixel. */
-  pixels: Uint8Array;
-  contentWidth: number;
-  /**
-   * Scroll speed byte SS; moves (SS + 1) / 16 pixels per tick.
-   * Range 0-255. Default 0 (= 1/16 px/tick).
-   */
-  scrollSpeed?: number;
-  flags?: ScrollElementFlags;
-  xOffset?: number;
-  yOffset?: number;
-}
-
-export interface VScrollElement {
-  type: ElementType.VerticalScroll;
-  /** Viewport width in pixels. */
-  width: number;
-  /** Viewport height in pixels. */
-  height: number;
-  /** Scrolling content pixels (width × contentHeight), 1 byte/pixel. */
-  pixels: Uint8Array;
-  contentHeight: number;
-  /** Scroll speed byte SS; moves (SS + 1) / 16 pixels per tick. Default 0. */
-  scrollSpeed?: number;
-  flags?: ScrollElementFlags;
-  xOffset?: number;
-  yOffset?: number;
-}
-
-export interface LineElement {
-  type: ElementType.Line;
-  xOrigin: number;
-  yOrigin: number;
-  xTarget: number;
-  yTarget: number;
-  /** Reserved by spec; writers MUST write 0. */
-  lineStyle?: number;
-  invertPixels?: boolean; // flags bit 0
-}
-
-export interface ClippedTextElement {
-  type: ElementType.ClippedText;
-  text: string; // UTF-8
-  width: number;
-  height: number;
-  /** 0-32767 = built-in font; 0x8000+ = custom font in file. Default 0. */
-  fontIndex?: FontIndex;
-  xOffset?: number;
-  yOffset?: number;
-}
-
-export interface HScrollTextElement {
-  type: ElementType.HScrollText;
-  text: string; // UTF-8
-  width: number;
-  height: number;
-  scrollSpeed?: number;  // SS byte, default 0
-  fontIndex?: FontIndex;
-  flags?: ScrollElementFlags;
-  xOffset?: number;
-  yOffset?: number;
-}
-
-export interface CurrentTimeElement {
-  type: ElementType.CurrentTime;
-  width: number;
-  height: number;
-  /** 0-32767 = built-in font; 0x8000+ = custom font in file. Default 0. */
-  fontIndex?: FontIndex;
-  /**
-   * UTC offset in whole minutes (signed 16-bit integer).
-   * e.g. UTC+5:30 → 330, UTC-8 → -480.
-   */
-  utcOffsetMinutes?: number;
-  flags?: CurrentTimeFlags;
-  xOffset?: number;
-  yOffset?: number;
-}
-
-export type DrawElement =
-  | Image2DElement
-  | AnimationElement
-  | HScrollElement
-  | VScrollElement
-  | LineElement
-  | ClippedTextElement
-  | HScrollTextElement
-  | CurrentTimeElement;
-
 // ---------------------------------------------------------------------------
 // Section descriptors  (MonoDisplayFile / builder input)
 // ---------------------------------------------------------------------------
 
-export interface ElementsAlwaysDescriptor {
-  flags?: SectionFlags;
-  elements: DrawElement[];
-}
-
-export interface ElementsTimespanDescriptor {
-  flags?: SectionFlags;
-  elements: DrawElement[];
-  /** POSIX timestamp (seconds) - section visible when now >= startTimestamp. */
-  startTimestamp: bigint;
-  /** POSIX timestamp (seconds) - section visible when now < endTimestamp. */
-  endTimestamp: bigint;
-}
-
 export interface CustomFontDescriptor {
   /** Raw U8G2 font data. */
   fontData: Uint8Array;
 }
 
-/**
- * Top-level descriptor passed to MonoDisplayFile.
- *
- * Sections are written in the order they appear here.
- * Custom fonts MUST appear before any element that references them.
- */
-export interface MonoDisplayFileDescriptor {
-  /** Section type 1 - drawn every render tick. */
-  elements_always?: DrawElement[] | ElementsAlwaysDescriptor;
-  /** Section type 2 - drawn only within the given timestamp window. */
-  elements_timespan?: ElementsTimespanDescriptor[];
-  /** Section type 32 - embedded U8G2 custom fonts. */
-  custom_fonts?: CustomFontDescriptor[];
-}
 
 // ---------------------------------------------------------------------------
 // MonoFormat types  (MonoDisplayParser output → renderer input)
@@ -314,12 +182,6 @@ export interface MonoFormatAnimation {
   frames: MonoFormatPixelImage[];
 }
 
-export interface MonoFormatScrollFlags {
-  endless: boolean;
-  invertDirection: boolean;
-  padStart: boolean;
-  padEnd: boolean;
-}
 
 export interface MonoFormatHScroll {
   type: ElementType.HorizontalScroll;
@@ -329,7 +191,7 @@ export interface MonoFormatHScroll {
   height: number;
   contentWidth: number;
   scrollSpeed: number;
-  flags: MonoFormatScrollFlags;
+  flags: MonoFormatScrollElementFlags;
   content: MonoFormatPixelImage;
 }
 
@@ -341,7 +203,7 @@ export interface MonoFormatVScroll {
   height: number;
   contentHeight: number;
   scrollSpeed: number;
-  flags: MonoFormatScrollFlags;
+  flags: MonoFormatScrollElementFlags;
   content: MonoFormatPixelImage;
 }
 
@@ -373,17 +235,10 @@ export interface MonoFormatHScrollText {
   height: number;
   scrollSpeed: number;
   fontIndex: FontIndex;
-  flags: MonoFormatScrollFlags;
+  flags: MonoFormatScrollElementFlags;
   text: string;
 }
 
-export interface MonoFormatCurrentTimeFlags {
-  clock12h: boolean;
-  showHours: boolean;
-  showMinutes: boolean;
-  showSeconds: boolean;
-}
-
 export interface MonoFormatCurrentTime {
   type: ElementType.CurrentTime;
   xOffset: number;
@@ -406,11 +261,7 @@ export type MonoFormatElement =
   | MonoFormatHScrollText
   | MonoFormatCurrentTime;
 
-export interface MonoFormatSectionFlags {
-  drawFront: boolean;
-  drawBack: boolean;
-  clearBuffer: boolean;
-}
+
 
 export interface MonoFormatElementsAlways {
   sectionType: SectionType.ElementsAlways;