1ch 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -1,3 +1,11 @@
+type MediaRef = {
+    tag: string;
+    src?: string;
+    alt?: string;
+    widthCells: number;
+    heightLines: number;
+    attrs?: Record<string, string>;
+};
 type Style = {
     text: string;
     color?: string;
@@ -10,6 +18,7 @@ type Style = {
     onClick?: () => void;
     noSelect?: boolean;
     cell?: number;
+    media?: MediaRef;
 };
 type Segment = string | Style;
 type Line = Segment[];
@@ -209,7 +218,6 @@ declare function tabs(names: string[], active: number, opts?: {
     separatorColor?: string;
     onSelect?: (index: number) => void;
     onClicks?: ((() => void) | undefined)[];
-    interactionIds?: (string | undefined)[];
     theme?: Theme;
 }): LayoutFn;
 declare function badge(label: string, opts?: {
@@ -482,6 +490,14 @@ type TermIRNode = {
     text: string;
     color?: string;
     action: TermAction;
+} | {
+    kind: "media";
+    tag: string;
+    src?: string;
+    alt?: string;
+    widthCells?: number;
+    heightLines?: number;
+    attrs?: Record<string, string>;
 };
 
 type ActionSeed = {

package/dist/index.js

@@ -497,20 +497,17 @@ function tabs(names, active, opts) {
       const name = names[i];
       const label = " " + (isActive ? name.toUpperCase() : name) + " ";
       const onClick = opts?.onClicks?.[i] ?? (onSelect ? () => onSelect(i) : void 0);
-      const interactionId = onClick ? opts?.interactionIds?.[i] : void 0;
       if (isActive) {
         line.push({
           text: label,
           color: opts?.activeColor ?? t?.components.tabs.activeFg,
           bg: opts?.activeBg ?? t?.components.tabs.activeBg,
-          interactionId,
           onClick
         });
       } else {
         line.push({
           text: label,
           color: opts?.inactiveColor ?? t?.components.tabs.inactiveFg,
-          interactionId,
           onClick
         });
       }
@@ -1863,6 +1860,49 @@ function registerDefaultCompilers() {
       action: ctx.actionFromElement(el, { type: "action", id, text })
     };
   });
+  htmlTagRegistry.set("img", (el) => {
+    const src = el.getAttribute("src")?.trim();
+    if (!src) return null;
+    return {
+      kind: "media",
+      tag: "img",
+      src,
+      alt: el.getAttribute("alt")?.trim() ?? void 0,
+      widthCells: parseIntegerAttrs(el, ["width"]) ?? void 0,
+      heightLines: parseIntegerAttrs(el, ["height"]) ?? void 0
+    };
+  });
+  htmlTagRegistry.set("video", (el) => {
+    const src = el.getAttribute("src")?.trim() ?? void 0;
+    const attrs = {};
+    if (el.hasAttribute("controls")) attrs.controls = "";
+    if (el.hasAttribute("autoplay")) attrs.autoplay = "";
+    if (el.hasAttribute("loop")) attrs.loop = "";
+    if (el.hasAttribute("muted")) attrs.muted = "";
+    const poster = el.getAttribute("poster")?.trim();
+    if (poster) attrs.poster = poster;
+    return {
+      kind: "media",
+      tag: "video",
+      src,
+      widthCells: parseIntegerAttrs(el, ["width"]) ?? void 0,
+      heightLines: parseIntegerAttrs(el, ["height"]) ?? void 0,
+      attrs: Object.keys(attrs).length > 0 ? attrs : void 0
+    };
+  });
+  htmlTagRegistry.set("audio", (el) => {
+    const src = el.getAttribute("src")?.trim() ?? void 0;
+    const attrs = {};
+    if (el.hasAttribute("controls")) attrs.controls = "";
+    if (el.hasAttribute("autoplay")) attrs.autoplay = "";
+    if (el.hasAttribute("loop")) attrs.loop = "";
+    return {
+      kind: "media",
+      tag: "audio",
+      src,
+      attrs: Object.keys(attrs).length > 0 ? attrs : void 0
+    };
+  });
   htmlTagRegistry.set("progress", (el, ctx) => compileBarNode(el, ctx));
   htmlTagRegistry.set("a", (el, ctx) => {
     const text = normalizeHtmlText(el.textContent ?? "");
@@ -2882,6 +2922,29 @@ function layoutFromIR(node, options) {
       return buttonLayout(node, options);
     case "link":
       return linkLayout(node, options);
+    case "media": {
+      const heightLines = node.heightLines ?? 6;
+      return (w) => {
+        const widthCells = node.widthCells != null ? Math.min(node.widthCells, w) : w;
+        const block = [];
+        const markerSeg = {
+          text: " ".repeat(widthCells),
+          media: {
+            tag: node.tag,
+            src: node.src,
+            alt: node.alt,
+            widthCells,
+            heightLines,
+            attrs: node.attrs
+          }
+        };
+        block.push(padLine([markerSeg], w));
+        for (let i = 1; i < heightLines; i++) {
+          block.push(padLine([" ".repeat(w)], w));
+        }
+        return block;
+      };
+    }
     default:
       return blank();
   }
@@ -3116,18 +3179,79 @@ function patchScrollRegion(region, lines2, meta, theme, actions, regionKey) {
   }
 }
 function patchRoot(target, units, theme, actions) {
+  const existingNonMedia = [];
+  for (const child of Array.from(target.children)) {
+    if (child.classList.contains("termui-media")) continue;
+    existingNonMedia.push(child);
+  }
   for (let unitIndex = 0; unitIndex < units.length; unitIndex++) {
     const unit = units[unitIndex];
     if (unit.kind === "line") {
-      const lineDiv = createOrReplaceChildDiv(target, unitIndex, "termui-line");
+      const existing2 = existingNonMedia[unitIndex];
+      let lineDiv;
+      if (existing2 instanceof HTMLDivElement && existing2.className === "termui-line") {
+        lineDiv = existing2;
+      } else {
+        lineDiv = document.createElement("div");
+        lineDiv.className = "termui-line";
+        if (existing2) target.replaceChild(lineDiv, existing2);
+        else target.insertBefore(lineDiv, target.querySelector(".termui-media"));
+      }
       patchLine(lineDiv, unit.line, theme, actions, `u${unitIndex}:l0`);
       continue;
     }
-    const region = createOrReplaceChildDiv(target, unitIndex, "termui-scroll-region");
+    const existing = existingNonMedia[unitIndex];
+    let region;
+    if (existing instanceof HTMLDivElement && existing.className === "termui-scroll-region") {
+      region = existing;
+    } else {
+      region = document.createElement("div");
+      region.className = "termui-scroll-region";
+      if (existing) target.replaceChild(region, existing);
+      else target.insertBefore(region, target.querySelector(".termui-media"));
+    }
     patchScrollRegion(region, unit.lines, unit.meta, theme, actions, `u${unitIndex}`);
   }
-  while (target.children.length > units.length) {
-    target.lastElementChild?.remove();
+  const nonMediaChildren = Array.from(target.children).filter(
+    (c) => !c.classList.contains("termui-media")
+  );
+  while (nonMediaChildren.length > units.length) {
+    nonMediaChildren.pop().remove();
+  }
+}
+function renderMediaOverlays(target, block) {
+  for (const old of Array.from(target.querySelectorAll(".termui-media"))) {
+    old.remove();
+  }
+  for (let lineIndex = 0; lineIndex < block.length; lineIndex++) {
+    const line = block[lineIndex];
+    let colOffset = 0;
+    for (const seg of line) {
+      if (typeof seg === "string") {
+        colOffset += seg.length;
+        continue;
+      }
+      if (seg.media) {
+        const el = document.createElement(seg.media.tag);
+        if (seg.media.src) el.setAttribute("src", seg.media.src);
+        if (seg.media.alt && seg.media.tag === "img") el.setAttribute("alt", seg.media.alt);
+        if (seg.media.attrs) {
+          for (const [k, v] of Object.entries(seg.media.attrs)) el.setAttribute(k, v);
+        }
+        el.className = "termui-media";
+        el.style.position = "absolute";
+        el.style.top = `calc(${lineIndex} * var(--cell-h))`;
+        el.style.left = `${colOffset}ch`;
+        el.style.width = `${seg.media.widthCells}ch`;
+        el.style.height = `calc(${seg.media.heightLines} * var(--cell-h))`;
+        if (seg.media.tag === "img" || seg.media.tag === "video") {
+          el.style.objectFit = "cover";
+        }
+        el.style.display = "block";
+        target.appendChild(el);
+      }
+      colOffset += seg.text.length;
+    }
   }
 }
 function renderTermBlock(target, block, theme) {
@@ -3135,6 +3259,7 @@ function renderTermBlock(target, block, theme) {
   const actions = /* @__PURE__ */ new Map();
   const units = buildRenderUnits(block);
   patchRoot(target, units, theme, actions);
+  renderMediaOverlays(target, block);
   state.actions = actions;
 }
 
@@ -3162,6 +3287,7 @@ var TERM_UI_CSS = `
 }
 .termui-root {
   white-space: pre;
+  position: relative;
 }
 .termui-line {
   line-height: var(--cell-h);
@@ -3177,6 +3303,9 @@ var TERM_UI_CSS = `
 .termui-scroll-region {
   overflow: hidden;
 }
+.termui-media {
+  pointer-events: auto;
+}
 .termui-probe {
   font: inherit;
   white-space: pre;