From 4c90223474915f604d108c48203e3add59e76f63 Mon Sep 17 00:00:00 2001
From: flop <flop@cttue.de>
Date: Fri, 22 May 2026 17:41:00 +0200
Subject: [PATCH] refactor: move to mithril

---
 ts/bun.lock       |    8 +
 ts/package.json   |    4 +
 ts/src/browser.ts | 1042 +++++++++++++++++++++------------------------
 ts/style.css      |    3 +
 4 files changed, 508 insertions(+), 549 deletions(-)

diff --git a/ts/bun.lock b/ts/bun.lock
index 434fd0d..940f010 100644
--- a/ts/bun.lock
+++ b/ts/bun.lock
@@ -4,6 +4,10 @@
   "workspaces": {
     "": {
       "name": "libmonoformat",
+      "dependencies": {
+        "@types/mithril": "^2.2.8",
+        "mithril": "^2.3.8",
+      },
       "devDependencies": {
         "@types/bun": "latest",
       },
@@ -15,10 +19,14 @@
   "packages": {
     "@types/bun": ["@types/bun@1.3.14", "", { "dependencies": { "bun-types": "1.3.14" } }, "sha512-h1hFqFVcvAvD9j9K7ZW7vd82aSA+rTdznZa+5bwvCwqSB1jmmfLcbIWhOLx1/+boy/xmjgCs/OMUL8hRJSmnPw=="],
 
+    "@types/mithril": ["@types/mithril@2.2.8", "", {}, "sha512-FN9Tv1+Nlr0LNPGnIL/xOxLJfu5WW2n8HAFeo4yxF+/O0per/8g080xlXoo+xj8baowAcfsNI3k80DxyLY34gQ=="],
+
     "@types/node": ["@types/node@25.7.0", "", { "dependencies": { "undici-types": "~7.21.0" } }, "sha512-z+pdZyxE+RTQE9AcboAZCb4otwcrvgHD+GlBpPgn0emDVt0ohrTMhAwlr2Wd9nZ+nihhYFxO2pThz3C5qSu2Eg=="],
 
     "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
 
+    "mithril": ["mithril@2.3.8", "", {}, "sha512-za/Yo7qXEckjm5syrSfaaI9Utf4tCUT3T1IOIYqH6Lrj7G0OZuYYLAY9SV4ygoaAf0+CNqU92MBt+7pmo53JVQ=="],
+
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
     "undici-types": ["undici-types@7.21.0", "", {}, "sha512-w9IMgQrz4O0YN1LtB7K5P63vhlIOvC7opSmouCJ+ZywlPAlO9gIkJ+otk6LvGpAs2wg4econaCz3TvQ9xPoyuQ=="],
diff --git a/ts/package.json b/ts/package.json
index 1b8399c..1efbac5 100644
--- a/ts/package.json
+++ b/ts/package.json
@@ -11,5 +11,9 @@
   },
   "peerDependencies": {
     "typescript": "^5"
+  },
+  "dependencies": {
+    "@types/mithril": "^2.2.8",
+    "mithril": "^2.3.8"
   }
 }
diff --git a/ts/src/browser.ts b/ts/src/browser.ts
index 591c16f..1b22ce2 100644
--- a/ts/src/browser.ts
+++ b/ts/src/browser.ts
@@ -1,671 +1,615 @@
-// 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.
+// browser.ts - Mithril entry point
+// Built by: bun build src/browser.ts --target browser --outfile public/mono-display.js
 
+import m from "mithril";
 import * as MonoDisplay from "./index";
 import { MonoDisplayFile } from "./file";
 import { cycleTheme } from "./themes";
 
-// Expose on globalThis (= window in browser, globalThis elsewhere)
 (globalThis as typeof globalThis & { MonoDisplay: typeof MonoDisplay }).MonoDisplay = MonoDisplay;
 
-
 const W = 120, H = 60;
+
+// --- State -------------------------------------------------------------------
 let file: MonoDisplayFile = new MonoDisplayFile([]);
-let activeSecIndex:number|null = null, activeElIndex:number|null = null;
-let currentFilename = 'untitled';
+let activeSecIndex: number | null = null;
+let activeElIndex: number | null = null;
+let currentFilename = "untitled";
 let isDirty = false;
 
-// --- Element type definitions ------------------------------------------------
+// --- Element metadata --------------------------------------------------------
 type ElFieldMeta = { key: string; label: string; type: string; default: any; full?: boolean };
-type ElFlagMeta = { key: string; label: string, default?: boolean; };
+type ElFlagMeta = { key: string; label: string; default?: boolean };
+
 const EL_FIELDS: Partial<Record<MonoDisplay.ElementTypeName, ElFieldMeta[]>> = {
   Image2D: [
-    { 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: "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: [
-    { 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: [] },
+    { 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: [
-    { 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' },
+    { 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: H },
+    { key: "fontIndex", label: "Font",     type: "font",   default: 0 },
   ],
   HScrollText: [
-    { 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' },
+    { 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: H },
+    { key: "scrollSpeed", label: "Scroll speed", type: "number", default: 50 },
+    { key: "fontIndex",   label: "Font",         type: "font",   default: 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' },
+    { 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: H },
+    { key: "scrollSpeed", label: "Scroll speed", type: "number", default: 50 },
+    { key: "fontIndex",   label: "Font",         type: "font",   default: 0 },
   ],
   CurrentTime: [
-    { 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' },
+    { 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: H },
+    { key: "utcOffsetMinutes", label: "UTC offset (min)", type: "number", default: 0 },
+    { key: "fontIndex",        label: "Font",             type: "font",   default: 0 },
   ],
 };
+
 const EL_FLAGS: Partial<Record<MonoDisplay.ElementTypeName, ElFlagMeta[]>> = {
-  HScrollText: [{ key: 'endless', label: 'Endless' }, { key: 'invertDirection', label: 'Invert direction' }],
-  CurrentTime: [{ key: 'clock12h', label: '12h mode' , default: false}, { key: 'showHours', label: 'Show hours', default:true}, { key: 'showSeconds', label: 'Show seconds' , default:true}],
+  HScrollText: [
+    { key: "endless",         label: "Endless" },
+    { key: "invertDirection", label: "Invert direction" },
+  ],
+  CurrentTime: [
+    { key: "clock12h",    label: "12h mode",      default: false },
+    { key: "showHours",   label: "Show hours",    default: true },
+    { key: "showSeconds", label: "Show seconds",  default: true },
+  ],
 };
-const EL_TYPES: MonoDisplay.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: string, buttons: {
-  primary?: boolean,
-  label: string,
-  action: boolean,
-}[]) {
-  // buttons: [{label,primary,action}]
+
+const EL_TYPES: MonoDisplay.ElementType[] = Object.keys(EL_FIELDS).map(
+  (x) => MonoDisplay.StringToElementType[x as MonoDisplay.ElementTypeName]
+);
+
+const DEFAULT_FONTS = ["Font 1", "Font 2", "Font 3", "Font 4", "Font 5"];
+
+// --- Confirm dialog ----------------------------------------------------------
+function showConfirm(
+  msg: string,
+  buttons: { label: string; primary?: boolean; action: boolean }[]
+): Promise<boolean> {
   return new Promise(resolve => {
-    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');
-    if(btns) btns.innerHTML = '';
+    const overlay = document.getElementById("confirm-overlay");
+    const msgEl   = document.getElementById("confirm-msg");
+    const btnsEl  = document.getElementById("confirm-btns");
+    if (msgEl)  msgEl.textContent = msg;
+    if (btnsEl) btnsEl.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); };
-      if(btns) btns.appendChild(el);
+      const btn = document.createElement("button");
+      btn.className = "cb" + (b.primary ? " primary" : "");
+      btn.textContent = b.label;
+      btn.onclick = () => { overlay?.classList.remove("show"); resolve(b.action); };
+      btnsEl?.appendChild(btn);
     });
-    overlay?.classList.add('show');
+    overlay?.classList.add("show");
   });
 }
 
-// --- Dirty tracking -----------------------------------------------------------
+// --- Dirty tracking ----------------------------------------------------------
 function markDirty() {
   isDirty = true;
-  document.getElementById('filename').classList.add('dirty');
+  document.getElementById("filename")?.classList.add("dirty");
 }
 function markClean() {
   isDirty = false;
-  document.getElementById('filename').classList.remove('dirty');
+  document.getElementById("filename")?.classList.remove("dirty");
 }
-async function guardDirty() {
+async function guardDirty(): Promise<boolean> {
   if (!isDirty || !file.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 showConfirm(
+    "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 getElementId(elementIndex: number): string {
-  return `Element-${elementIndex}`;
+function newSec(): MonoDisplay.MonoFormatElementsAlways {
+  return {
+    sectionType: MonoDisplay.SectionType.ElementsAlways, elements: [], flags: {
+      clearBuffer: true,
+      drawBack: true,
+      drawFront: true,
+  } };
 }
-function getSectionId(sectionIndex: number): string {
-  return `Section-${sectionIndex}`;
+
+function createNewElement(type: MonoDisplay.ElementType): MonoDisplay.MonoFormatElement {
+  const fields: Record<string, any> = {};
+  (EL_FIELDS[MonoDisplay.ElementTypeToString[type]] as ElFieldMeta[] || [])
+    .forEach(f => (fields[f.key] = f.default));
+  const flags: Record<string, any> = {};
+  (EL_FLAGS[MonoDisplay.ElementTypeToString[type]] as ElFlagMeta[] || [])
+    .forEach(f => (flags[f.key] = f.default ?? false));
+  return { type, ...fields, flags } as MonoDisplay.MonoFormatElement;
 }
-function newSec() {
-  return {
-    sectionType: MonoDisplay.SectionType.ElementsAlways,
-    elements: [],
-    flags: {},
-  };
+
+function getSectionByIndex(i: number | null): MonoDisplay.MonoFormatSection | undefined {
+  return i !== null ? file.sections[i] : undefined;
 }
-function createNewElement(type: MonoDisplay.ElementType) : MonoDisplay.MonoFormatElement {
-  const fields:Record<string,any> = {};
-  (EL_FIELDS[MonoDisplay.ElementTypeToString[type]] as any[] || [])
-    .forEach((f: ElFieldMeta) => fields[f.key] = f.default);
-  const flags:Record<string,any>  = {};
-  (EL_FLAGS[MonoDisplay.ElementTypeToString[type]] as any[] || [])
-    .forEach((f: ElFlagMeta) => flags[f.key] = f.default || false);
-  return {
-    type,
-    ...fields,
-    flags,
-  } as MonoDisplay.MonoFormatElement;
+
+function getElementByIndex(si: number, ei: number): MonoDisplay.MonoFormatElement | undefined {
+  const s = getSectionByIndex(si);
+  return s && "elements" in s ? s.elements[ei] : undefined;
 }
-function getSectionByIndex(sectionIndex: number | null): MonoDisplay.MonoFormatSection | undefined {
-  return file.sections.find((s,index) => index === sectionIndex)
+
+function getCustomFonts(): { fontname: string; index: number }[] {
+  return file.sections
+    .filter(s => s.sectionType === MonoDisplay.SectionType.CustomFont)
+    .map((_, i) => ({ fontname: `CustomFont ${i}`, index: 0x8000 + i }));
 }
 
-function getElementByIndex(sectionIndex: number, elementIndex: number): MonoDisplay.MonoFormatElement | undefined {
-  const section = getSectionByIndex(sectionIndex);
-  if(section && "elements" in section)
-    return section.elements.find((e, index) => index == elementIndex)
-  return undefined;
+function elSummary(el: MonoDisplay.MonoFormatElement): string {
+  switch (el.type) {
+    case MonoDisplay.ElementType.ClippedText:
+    case MonoDisplay.ElementType.HScrollText:
+      return el.text.slice(0, 24) + (el.text.length > 24 ? "..." : "");
+    case MonoDisplay.ElementType.CurrentTime:
+    case MonoDisplay.ElementType.Image2D:
+    case MonoDisplay.ElementType.HorizontalScroll:
+    case MonoDisplay.ElementType.VerticalScroll:
+      return `${(el as any).xOffset ?? 0}, ${(el as any).yOffset ?? 0}`;
+    default:
+      return el.type.toString();
+  }
 }
 
 // --- Mutations ----------------------------------------------------------------
 function addSection() {
-  const s = newSec(); file.sections.push(s);
-  activeSecIndex = file.sections.length-1; activeElIndex = null;
-  markDirty(); renderHTML(); triggerPreview();
+  file.sections.push(newSec());
+  activeSecIndex = file.sections.length - 1;
+  activeElIndex = null;
+  markDirty(); triggerPreview(); m.redraw();
 }
-function removeSection(sectionIndex:number) {
-  file.sections = file.sections.filter((section, index) => index !== sectionIndex);
-  if (activeSecIndex === sectionIndex) {
+
+function removeSection(si: number) {
+  file.sections.splice(si, 1);
+  if (activeSecIndex === si) {
     activeSecIndex = file.sections.length ? file.sections.length - 1 : null;
     activeElIndex = null;
   }
-  markDirty(); renderHTML(); triggerPreview();
+  markDirty(); triggerPreview();
 }
-function toggleSection(sectionIndex: number): void {
-  const s = getSectionByIndex(sectionIndex);
-  if (!s) return;
-  activeSecIndex = sectionIndex;
-  renderHTML();
-  updateMeta();
+
+function toggleSection(si: number) {
+  activeSecIndex = si;
 }
-function setSectionFlag(flag, val) {
-  if (!activeSecIndex) return;
+
+function setSectionFlag(flag: string, val: boolean) {
+  if (activeSecIndex === null) return;
   const s = getSectionByIndex(activeSecIndex);
   if (!s) return;
-  s.flags[flag] = val;
-  markDirty();
-  triggerPreview();
+  (s as any).flags[flag] = val;
+  markDirty(); triggerPreview();
 }
-function addElement(sectionIndex: number) {
-  const s = getSectionByIndex(sectionIndex);
+
+function setSectionField(si: number, key: string, val: any) {
+  const s = getSectionByIndex(si);
   if (!s) return;
-  if (!("elements" in s)) return;
-  s.elements.push(createNewElement(MonoDisplay.ElementType.HScrollText));
-  activeElIndex = s.elements.length;
-  activeSecIndex = sectionIndex;
-  markDirty();
-  renderHTML();
-  triggerPreview();
+  (s as any)[key] = val;
+  markDirty(); triggerPreview();
 }
 
-function removeElement(sectionIndex:number, elementIndex:number) {
-  const s = getSectionByIndex(sectionIndex);
-  if (!s) return;
-  if (!("elements" in s)) return;
-  s.elements = s.elements.filter((e,i) => i != elementIndex);
-  if (activeElIndex)
-    activeElIndex = null;
-  markDirty();
-  renderHTML();
-  triggerPreview();
+function setSectionType(si: number, sectionType: string) {
+  const sec = getSectionByIndex(si);
+  if (!sec) return;
+  (sec as any).sectionType = MonoDisplay.StringToSectionType[sectionType as MonoDisplay.SectionTypeName];
+  if ((sec as any).sectionType === MonoDisplay.SectionType.CustomFont) {
+    (sec as any).fontData = new Uint8Array();
+    delete (sec as any).elements;
+    delete (sec as any).flags;
+  } else {
+    (sec as any).elements = [];
+    (sec as any).flags = {};
+    delete (sec as any).fontData;
+  }
+  markDirty(); triggerPreview();
 }
-function selectElement(sectionIndex:number, elementIndex:number) {
-  activeSecIndex = sectionIndex;
-  activeElIndex = activeElIndex &&
-    activeElIndex === sectionIndex &&
-    activeElIndex === elementIndex ?
-      null : elementIndex;
-  renderHTML();
+
+function addElement(si: number) {
+  const s = getSectionByIndex(si);
+  if (!s || !("elements" in s)) return;
+  s.elements.push(createNewElement(MonoDisplay.ElementType.HScrollText));
+  activeElIndex = s.elements.length - 1;
+  activeSecIndex = si;
+  markDirty(); triggerPreview();
 }
-function changeElType(sectionIndex:number, elementIndex:number, typeString: MonoDisplay.ElementTypeName) {
-  const el = getElementByIndex(sectionIndex, elementIndex); if (!el) return;
-  const fresh = createNewElement(MonoDisplay.StringToElementType[typeString]);
-  setElementByElement(el, fresh);
-  markDirty(); renderHTML(); triggerPreview();
+
+function removeElement(si: number, ei: number) {
+  const s = getSectionByIndex(si);
+  if (!s || !("elements" in s)) return;
+  s.elements.splice(ei, 1);
+  activeElIndex = null;
+  markDirty(); triggerPreview();
 }
 
-function setElementByElement(el: MonoDisplay.MonoFormatElement, source:MonoDisplay.MonoFormatElement ) {
-  el.type = source.type;
-  for (const [key, value] of Object.entries(source)) {
-    (el as any)[key as any] = value;
+function selectElement(si: number, ei: number) {
+  if (activeSecIndex === si && activeElIndex === ei) {
+    activeElIndex = null;
+  } else {
+    activeSecIndex = si;
+    activeElIndex = ei;
   }
-  return el;
 }
 
-function setElField(sectionIndex:number, elementIndex:number, key:string, val:any) {
-  const el = getElementByIndex(sectionIndex, elementIndex); if (!el) return;
-  el[key] = val;
+function changeElType(si: number, ei: number, typeString: MonoDisplay.ElementTypeName) {
+  const el = getElementByIndex(si, ei);
+  if (!el) return;
+  const fresh = createNewElement(MonoDisplay.StringToElementType[typeString]);
+  Object.assign(el, fresh);
   markDirty(); triggerPreview();
 }
-function setElFlag(sectionIndex:number, elementIndex:number, key:string, val:any) {
-  const el = getElementByIndex(sectionIndex, elementIndex); if (!el) return;
-  el.flags[key] = val;
+
+function setElField(si: number, ei: number, key: string, val: any) {
+  const el = getElementByIndex(si, ei);
+  if (!el) return;
+  (el as any)[key] = val;
   markDirty(); triggerPreview();
 }
-function setSectionType(sectionIndex: number, sectionType: string) {
-  const sec = getSectionByIndex(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 = {};
-    }
-    markDirty(); triggerPreview();
-  }
+
+function setElFlag(si: number, ei: number, key: string, val: any) {
+  const el = getElementByIndex(si, ei);
+  if (!el) return;
+  (el as any).flags[key] = val;
+  markDirty(); triggerPreview();
 }
 
-// --- Load demo into editor state ---------------------------------------------
-const DEMO = {
+// --- DEMO --------------------------------------------------------------------
+const DEMO: Record<string, () => MonoDisplayFile> = {
   Checkerboard() {
     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(
-      [{
-        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
-        }
-      }]);
+    for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) pixels[y * W + x] = (x + y) % 2;
+    return new MonoDisplayFile([{
+      sectionType: MonoDisplay.SectionType.ElementsAlways,
+      elements: [{ type: MonoDisplay.ElementType.Image2D, image: { pixels, height: H, width: W }, xOffset: 0, yOffset: 0 }],
+      flags: { clearBuffer: true, drawFront: true, drawBack: true },
+    }]);
   },
   Blink() {
-    return new MonoDisplayFile(
-      [{
-        sectionType: MonoDisplay.SectionType.ElementsAlways,
-        elements:[{
-          type: ElementType.Animation, width: W, height: H, updateInterval: 12,
-          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
-        }
-      }]);
+    return new MonoDisplayFile([{
+      sectionType: MonoDisplay.SectionType.ElementsAlways,
+      elements: [{
+        type: MonoDisplay.ElementType.Animation, width: W, height: H, updateInterval: 12, 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() {
-    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
-        }
-      }]);
+    return new MonoDisplayFile([{
+      sectionType: MonoDisplay.SectionType.ElementsAlways,
+      elements: [{ type: MonoDisplay.ElementType.ClippedText, fontIndex: 0, text: "Hello, World!", xOffset: 0, yOffset: 16, width: 60, height: 10 }],
+      flags: { clearBuffer: true, drawFront: true, drawBack: true },
+    }]);
   },
   Scrolltext() {
-    return new MonoDisplayFile(
-      [{
-        sectionType: MonoDisplay.SectionType.ElementsAlways,
-        elements: [{
-          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
-        }
-      }]);
+    return new MonoDisplayFile([{
+      sectionType: MonoDisplay.SectionType.ElementsAlways,
+      elements: [{
+        type: MonoDisplay.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() {
-    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
-        }
-      }]);
+    return new MonoDisplayFile([{
+      sectionType: MonoDisplay.SectionType.ElementsAlways,
+      elements: [
+        { type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: {},                               xOffset: 0,  yOffset: 8,  width: W, height: 16, utcOffsetMinutes: 120 },
+        { type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: { clock12h: true },               xOffset: 40, yOffset: 16, width: W, height: 16, utcOffsetMinutes: 120 },
+        { type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: { clock12h: true, showHours: true }, xOffset: 0, yOffset: 24, width: W, height: 16, utcOffsetMinutes: 120 },
+        { type: MonoDisplay.ElementType.CurrentTime, fontIndex: 0, flags: { clock12h: true, showHours: false }, xOffset: 40, yOffset: 32, width: W, height: 16, utcOffsetMinutes: 120 },
+        { type: MonoDisplay.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;
-  Object.entries(DEMO).forEach((entry: [demoName:string, demoFileFunc: () => MonoDisplayFile]) => {
-    const [demoName, demoFileFunc] = entry;
-    const btn = document.createElement('button');
-    btn.className = 'tb-btn'; btn.textContent = demoName;
-    btn.onclick = async () => {
-      const ok = await guardDirty();
-      if (!ok) return;
-      // load into editor
-      file = demoFileFunc();
-      activeSecIndex = null;
-      activeElIndex = null;
-      currentFilename = demoName.toLowerCase();
-      document.getElementById('filename').textContent = currentFilename;
-      markClean(); renderHTML();
-      triggerPreview();
-      if (activeBtn) activeBtn.style.color = '';
-      btn.style.color = '#33ff66'; activeBtn = btn;
-    };
-    wrap.appendChild(btn);
-  });
-}
-
-// --- 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((section, index, sections) => renderHTMLSection(index)).join('');
-}
-
-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(${sectionIndex})">
-<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>
-${section.sectionType == MonoDisplay.SectionType.ElementsTimespan ? `
-  <div class="el-list">${
-      Object.entries({ "Start Time": "startTimestamp", "Stop Time":"endTimestamp"}).map(([label, key]) => {
-        return `<div class="field id="timespan">
-              <label>${label}</label>
-      <input type="datetime-local" value="${(section as any)[key]}" onchange="setSectionField(${sectionIndex}, '${key}',this.value)" />
-    </div>`;
-      }).join("")
-}</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(${sectionIndex})">+ 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(${sectionIndex})">
-<span class="sec-arrow">▶</span>
-<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">
-?
-</div>`: ''}
-</div>`;
-    }
-  }
-}
-
-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(${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">
-  ${fieldsGrid}
-</div>
-${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>
-${isActive ? activeRender : ``}
-</div>`;
-}
-
-function elSummary(el: MonoDisplay.MonoFormatElement) {
-  switch (el.type) {
-    case MonoDisplay.ElementType.ClippedText:
-    case MonoDisplay.ElementType.HScrollText:
-      // case ElementType.VScrollText:
-      return esc(el.text.slice(0, 24) + (el.text.length > 24 ? '...' : ''));
-    case MonoDisplay.ElementType.CurrentTime:
-    case MonoDisplay.ElementType.Image2D:
-    case MonoDisplay.ElementType.HorizontalScroll:
-    case MonoDisplay.ElementType.VerticalScroll:
-      return `${el.xOffset ?? 0}, ${el.yOffset ?? 0}`;
-
-    case MonoDisplay.ElementType.Animation:
-    case MonoDisplay.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 section = getSectionByIndex(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 -----------------------------------------------------------------
+let previewTimer: ReturnType<typeof setTimeout> | null = null;
 
-// --- Preview ------------------------------------------------------------------
-let previewTimer = null;
 function triggerPreview() {
-  clearTimeout(previewTimer);
-  previewTimer = setTimeout(() => { try { buildPreview(); } catch (e) { console.warn('preview', e); } }, 150);
+  if (previewTimer) clearTimeout(previewTimer);
+  previewTimer = setTimeout(() => {
+    try { buildPreview(); } catch (e) { console.warn("preview", e); }
+  }, 150);
 }
+
 function buildPreview() {
   if (!window.MonoDisplay) return;
   if (!window._mdDriver)
-    window._mdDriver = new MonoDisplay.MonoDisplayDriver('canvas_root', { onColor: '#EC0', offColor: '#000', fps: 25 });
-  const s = file.sections[activeSecIndex || 0];
+    window._mdDriver = new MonoDisplay.MonoDisplayDriver("canvas_root", { onColor: "#EC0", offColor: "#000", fps: 25 });
   window._mdDriver.load(() => Promise.resolve(file.toBuffer()));
-  // now update the sections
-  renderHTML();
 }
 
-// --- Load / Export ------------------------------------------------------------
-function loadBin(input: { files: any[]; value: string; }) {
-  const binFile = input.files[0]; if (!binFile) return;
+// --- Load / Export -----------------------------------------------------------
+function loadBin(input: HTMLInputElement) {
+  const binFile = input.files?.[0];
+  if (!binFile) return;
   currentFilename = binFile.name;
-  document.getElementById('filename').textContent = binFile.name;
+  const filenameEl = document.getElementById("filename");
+  if (filenameEl) filenameEl.textContent = binFile.name;
   const reader = new FileReader();
   reader.onload = e => {
-    const arrayBuf = e.target.result;
     try {
-      file = new window.MonoDisplay.MonoDisplayParser().parse(arrayBuf);
+      file = new window.MonoDisplay.MonoDisplayParser().parse(e.target!.result as ArrayBuffer);
       activeSecIndex = null;
       activeElIndex = null;
       triggerPreview();
+      m.redraw();
     } catch (err) {
-      console.warn('Could not parse sections from bin:', err);
+      console.warn("Could not parse sections from bin:", err);
     }
   };
   reader.readAsArrayBuffer(binFile);
-  input.value = ''; markClean();
+  input.value = "";
+  markClean();
 }
+
 function exportBin() {
-  if (!window.MonoDisplay) { alert('MonoDisplay library not loaded.'); return; }
-  const blob = new Blob([file.toBuffer() as any], { type: 'application/octet-stream' });
-  const a = document.createElement('a');
+  if (!window.MonoDisplay) { alert("MonoDisplay library not loaded."); return; }
+  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';
-  a.click(); markClean();
+  a.download = currentFilename.replace(/\.bin$/, "") + ".bin";
+  a.click();
+  markClean();
+}
+
+// --- Mithril Components -------------------------------------------------------
+
+function FieldInput(si: number, ei: number, field: ElFieldMeta, el: MonoDisplay.MonoFormatElement): m.Vnode {
+  const val = (el as any)[field.key] ?? field.default;
+  switch (field.type) {
+    case "text":
+      return m("textarea", {
+        onchange: (e: Event) => setElField(si, ei, field.key, (e.target as HTMLTextAreaElement).value),
+      }, val);
+    case "font":
+      return m("select", {
+        onchange: (e: Event) => setElField(si, ei, field.key, +(e.target as HTMLSelectElement).value),
+      }, [
+        ...DEFAULT_FONTS.map((name, i) => m("option", { value: i, selected: val === i }, name)),
+        ...getCustomFonts().map(cf => m("option", { value: cf.index, selected: val === cf.index }, cf.fontname)),
+      ]);
+    default:
+      return m("input[type=number]", {
+        value: val,
+        onchange: (e: Event) => setElField(si, ei, field.key, +(e.target as HTMLInputElement).value),
+      });
+  }
 }
 
+const ElementItem: m.Component<{ si: number; ei: number; el: MonoDisplay.MonoFormatElement }> = {
+  view({ attrs: { si, ei, el } }) {
+    const isActive = activeSecIndex === si && activeElIndex === ei;
+    const typeStr = MonoDisplay.ElementTypeToString[el.type];
+    const fields = EL_FIELDS[typeStr] || [];
+    const flags  = EL_FLAGS[typeStr]  || [];
+
+    return m(".el-item", { class: isActive ? "active" : "" },
+      m(".el-item-hdr", { onclick: () => selectElement(si, ei) },
+        m("span.el-type", typeStr),
+        m("span.el-name", elSummary(el)),
+        m("button.x-btn", {
+          title: "Remove element",
+          onclick: (e: Event) => { e.stopPropagation(); removeElement(si, ei); },
+        }, "X"),
+      ),
+      isActive && m(".el-fields",
+        m(".field.full",
+          m("label", "Type"),
+          m("select", {
+            onchange: (e: Event) => changeElType(si, ei, (e.target as HTMLSelectElement).value as MonoDisplay.ElementTypeName),
+          },
+            EL_TYPES.map(t =>
+              m("option", { value: MonoDisplay.ElementTypeToString[t], selected: t === el.type }, MonoDisplay.ElementTypeToString[t])
+            )
+          ),
+        ),
+        m(".fields-grid",
+          fields.map(field =>
+            m(`.field${field.full ? ".full" : ""}`,
+              m("label", field.label),
+              FieldInput(si, ei, field, el),
+            )
+          )
+        ),
+        flags.length ? m(".field.full",
+          m("label", "Flags"),
+          m(".flags-row",
+            flags.map(flag =>
+              m("label.flag-check",
+                m("input[type=checkbox]", {
+                  checked: !!(el as any).flags?.[flag.key],
+                  onchange: (e: Event) => setElFlag(si, ei, flag.key, (e.target as HTMLInputElement).checked),
+                }),
+                " " + flag.label,
+              )
+            )
+          ),
+        ) : null,
+      ),
+    );
+  },
+};
+
+const SectionCard: m.Component<{ si: number }> = {
+  view({ attrs: { si } }) {
+    const section = file.sections[si];
+    if (!section) return null;
+    const isActive = activeSecIndex === si;
+    const typeStr  = MonoDisplay.SectionTypeToString[section.sectionType];
+
+    const hdr = m(`.sec-hdr${isActive ? ".active" : ""}`, { onclick: () => toggleSection(si) },
+      m("span.sec-arrow", "▶"),
+      m("span.sec-label", typeStr),
+      m("button.x-btn", {
+        title: "Remove section",
+        onclick: (e: Event) => { e.stopPropagation(); removeSection(si); },
+      }, "X"),
+    );
+
+    if (section.sectionType === MonoDisplay.SectionType.CustomFont) {
+      return m(`.sec-card.open${isActive ? ".active" : ""}`,
+        m(`.sec-hdr${isActive ? ".active" : ""}`, { onclick: () => toggleSection(si) },
+          m("span.sec-arrow", "▶"),
+          m("span.sec-label", "Custom Font"),
+          m("span.sec-badge", "1 el"),
+          m("button.x-btn", {
+            title: "Remove section",
+            onclick: (e: Event) => { e.stopPropagation(); removeSection(si); },
+          }, "X"),
+        ),
+        m(".el-list", "?"),
+      );
+    }
+
+    const elSection = section as MonoDisplay.MonoFormatElementsAlways | MonoDisplay.MonoFormatElementsTimespan;
+
+    return m(`.sec-card.open${isActive ? ".active" : ""}`,
+      m(`.sec-hdr${isActive ? ".active" : ""}`, { onclick: () => toggleSection(si) },
+        m("span.sec-arrow", "▶"),
+        m("span.sec-label", typeStr),
+        m("span.sec-badge", `${elSection.elements.length} el`),
+        m("button.x-btn", {
+          title: "Remove section",
+          onclick: (e: Event) => { e.stopPropagation(); removeSection(si); },
+        }, "X"),
+      ),
+      section.sectionType === MonoDisplay.SectionType.ElementsTimespan
+        ? m(".el-list",
+            ([ ["Start Time", "startTimestamp"], ["Stop Time", "endTimestamp"] ] as [string, string][])
+              .map(([label, key]) =>
+                m(".field",
+                  m("label", label),
+                  m("input[type=datetime-local]", {
+                    value: (section as any)[key],
+                    onchange: (e: Event) => setSectionField(si, key, (e.target as HTMLInputElement).value),
+                  }),
+                )
+              )
+          )
+        : null,
+      m(".el-list",
+        elSection.elements.map((el, ei) => m(ElementItem, { key: String(ei), si, ei, el })),
+        m("button.add-el", { onclick: () => addElement(si) }, "+ add element"),
+      ),
+    );
+  },
+};
+
+const SectionsList: m.Component = {
+  view() {
+    if (!file.sections.length)
+      return m(".empty-state", m.trust("No sections yet.<br/>Use <b>Add section</b> to get started."));
+    if (activeSecIndex === null && file.sections.length === 1) activeSecIndex = 0;
+    return m("", file.sections.map((_, si) => m(SectionCard, { key: String(si), si })));
+  },
+};
+
+const MetaPanel: m.Component = {
+  view() {
+    const section = getSectionByIndex(activeSecIndex);
+    return m("",
+      m(".meta-row",
+        m("label", "Selected section"),
+        section
+          ? m("select.meta-val.green", {
+              value: MonoDisplay.SectionTypeToString[section.sectionType],
+              onchange: (e: Event) =>
+                activeSecIndex !== null && setSectionType(activeSecIndex, (e.target as HTMLSelectElement).value),
+            },
+              Object.values(MonoDisplay.SectionTypeToString).map(name =>
+                m("option", { value: name }, name)
+              )
+            )
+          : m("span.meta-val.green", "-"),
+      ),
+      m(".meta-row",
+        m("label", "Elements"),
+        m("span.meta-val", section && "elements" in section ? `${section.elements.length} element(s)` : "-"),
+      ),
+      m(".meta-row",
+        m("label", "Section flags"),
+        (["drawFront", "drawBack", "clearBuffer"] as const).map((flag, i) =>
+          m("label.flag-check", { style: i > 0 ? "margin-left:-8px" : "" },
+            m("input[type=checkbox]", {
+              checked: section ? !!(section as any).flags?.[flag] : false,
+              onchange: (e: Event) => setSectionFlag(flag, (e.target as HTMLInputElement).checked),
+            }),
+            " " + flag,
+          )
+        ),
+      ),
+    );
+  },
+};
+
+let activeDemoName: string | null = null;
+
+const DemoButtons: m.Component = {
+  view() {
+    return Object.entries(DEMO).map(([name, fn]) =>
+      m("button.tb-btn", {
+          style: activeDemoName === name ? "color:#33ff66" : "",
+          onclick: async () => {
+            const ok = await guardDirty();
+            if (!ok) return;
+            file = fn();
+            activeSecIndex = null;
+            activeElIndex = null;
+            currentFilename = name.toLowerCase();
+            const filenameEl = document.getElementById("filename");
+            if (filenameEl) filenameEl.textContent = currentFilename;
+            activeDemoName = name;
+            markClean();
+            triggerPreview();
+            m.redraw();
+          },
+        }, name)
+    );
+  },
+};
 
+// --- Mount --------------------------------------------------------------------
+m.mount(document.getElementById("sections-wrap")!, SectionsList);
+m.mount(document.getElementById("demo-btns")!,     DemoButtons);
+m.mount(document.getElementById("sec-meta")!,      MetaPanel);
 
-// --- Init ---------------------------------------------------------------------
-// Pin all functions referenced from inline HTML onclick/onchange strings so
-// Bun's bundler does not tree-shake them as unreachable dead code.
-Object.assign(window, {
-  loadBin, exportBin,
-  addSection, removeSection, toggleSection, setSectionFlag,
-  addElement, removeElement, selectElement,
-  changeElType, setElField, setElFlag, setSectionType,
-  cycleTheme,
-});
+// Expose globals referenced by topbar inline handlers
+Object.assign(window, { loadBin, exportBin, addSection, cycleTheme });
 
 triggerPreview();
-if (window.MonoDisplay) { initDemos(); }
-else { const iv = setInterval(() => { if (window.MonoDisplay) { clearInterval(iv); initDemos(); } }, 100); }
diff --git a/ts/style.css b/ts/style.css
index 65e6be8..103ddd2 100644
--- a/ts/style.css
+++ b/ts/style.css
@@ -252,6 +252,9 @@ body {
   gap: 5px;
   margin-top: 6px
 }
+#demo-btns > div {
+  display: contents;
+}
 
 #sec-meta {
   background: var(--bg-sunken);