@cube-drone/marquee-html-renderer 0.3.0 → 0.5.0

package/dist/render.js

@@ -323,6 +323,33 @@ function directive(name, attrs, nodes, ctx) {
             // only inside the other two, which is exactly when you want it).
             // Physical directions, deliberately: predictable beats logical.
             return `<div class="mq-${name}">${inner}</div>`;
+        case "spoiler":
+            // The block form of the [spoiler] span: hide a whole region (an image,
+            // a paragraph) behind the same blur, same reveal-on-hover. Reuses the
+            // mq-spoiler class - the CSS is element-agnostic.
+            return `<div class="mq-spoiler mq-spoiler-block" tabindex="0">${inner}</div>`;
+        case "conflict":
+            // Versioned-document conflict: a container of two-or-more :::variant
+            // alternatives, synthesized by an embedder at read time (never authored
+            // by hand, never parsed back). The unknown-container shrug keeps it
+            // lossless on a renderer that predates it - the variants' words survive,
+            // stacked - so this rendering is pure presentation over that guarantee.
+            return `<div class="mq-conflict">${inner}</div>`;
+        case "variant": {
+            // One alternative. label/when are advisory display text, shown VERBATIM
+            // (reformatting a timestamp would make two renderers disagree - the
+            // differential-rendering hazard); role=base marks the common ancestor.
+            const head = [];
+            if (attrs["label"] !== undefined) {
+                head.push(`<span class="mq-variant-label">${escapeText(attrs["label"])}</span>`);
+            }
+            if (attrs["when"] !== undefined) {
+                head.push(`<span class="mq-variant-when">${escapeText(attrs["when"])}</span>`);
+            }
+            const cls = attrs["role"] === "base" ? "mq-variant mq-variant-base" : "mq-variant";
+            const headHtml = head.length === 0 ? "" : `<div class="mq-variant-head">${head.join(" ")}</div>`;
+            return `<div class="${cls}">${headHtml}${inner}</div>`;
+        }
     }
     // Unknown vocabulary: a container renders its children with an affordance
     // that something wrapped them; a leaf renders the inert placeholder.
@@ -397,6 +424,13 @@ function span(name, attrs, nodes, ctx) {
             return `<small>${inner}</small>`;
         case "big":
             return `<big>${inner}</big>`; // obsolete and eternal, like <font>
+        case "spoiler":
+            // The content is present and never eaten - just blurred, revealed on
+            // hover/focus (the static renderer has no JS to gate a click). An
+            // interactive renderer turns the same class into click-to-reveal.
+            // Degrades, like everything, to readable content: no stylesheet means
+            // a visible spoiler, which beats a hidden one.
+            return `<span class="mq-spoiler" tabindex="0">${inner}</span>`;
         case "size": {
             const value = attrs["size"];
             if (value !== undefined && /^[1-7]$/.test(value)) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cube-drone/marquee-html-renderer",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Reference static HTML renderer for the Marquee markup language",
   "license": "MPL-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cube-drone/marqueemarkup.git",
-    "directory": "ts/html_renderer"
+    "directory": "ts/marquee-html-renderer"
   },
   "type": "module",
   "engines": {
@@ -35,12 +35,12 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@cube-drone/marquee-parser": "^0.3.0"
+    "@cube-drone/marquee-parser": "^0.5.0"
   },
   "devDependencies": {
-    "@cube-drone/marquee-css": "^0.3.0",
-    "@cube-drone/marquee-fonts": "^0.3.0",
-    "@cube-drone/marquee-turbolink": "^0.3.0",
+    "@cube-drone/marquee-css": "^0.5.0",
+    "@cube-drone/marquee-fonts": "^0.5.0",
+    "@cube-drone/marquee-turbolink": "^0.5.0",
     "@types/node": "^24.0.0",
     "typescript": "^5.9.0"
   }

package/src/render.ts

@@ -357,6 +357,33 @@ function directive(name: string, attrs: Attrs, nodes: Node[], ctx: Ctx): string
       // only inside the other two, which is exactly when you want it).
       // Physical directions, deliberately: predictable beats logical.
       return `<div class="mq-${name}">${inner}</div>`;
+    case "spoiler":
+      // The block form of the [spoiler] span: hide a whole region (an image,
+      // a paragraph) behind the same blur, same reveal-on-hover. Reuses the
+      // mq-spoiler class - the CSS is element-agnostic.
+      return `<div class="mq-spoiler mq-spoiler-block" tabindex="0">${inner}</div>`;
+    case "conflict":
+      // Versioned-document conflict: a container of two-or-more :::variant
+      // alternatives, synthesized by an embedder at read time (never authored
+      // by hand, never parsed back). The unknown-container shrug keeps it
+      // lossless on a renderer that predates it - the variants' words survive,
+      // stacked - so this rendering is pure presentation over that guarantee.
+      return `<div class="mq-conflict">${inner}</div>`;
+    case "variant": {
+      // One alternative. label/when are advisory display text, shown VERBATIM
+      // (reformatting a timestamp would make two renderers disagree - the
+      // differential-rendering hazard); role=base marks the common ancestor.
+      const head: string[] = [];
+      if (attrs["label"] !== undefined) {
+        head.push(`<span class="mq-variant-label">${escapeText(attrs["label"])}</span>`);
+      }
+      if (attrs["when"] !== undefined) {
+        head.push(`<span class="mq-variant-when">${escapeText(attrs["when"])}</span>`);
+      }
+      const cls = attrs["role"] === "base" ? "mq-variant mq-variant-base" : "mq-variant";
+      const headHtml = head.length === 0 ? "" : `<div class="mq-variant-head">${head.join(" ")}</div>`;
+      return `<div class="${cls}">${headHtml}${inner}</div>`;
+    }
   }
   // Unknown vocabulary: a container renders its children with an affordance
   // that something wrapped them; a leaf renders the inert placeholder.
@@ -433,6 +460,13 @@ function span(name: string, attrs: Attrs, nodes: Node[], ctx: Ctx): string {
       return `<small>${inner}</small>`;
     case "big":
       return `<big>${inner}</big>`; // obsolete and eternal, like <font>
+    case "spoiler":
+      // The content is present and never eaten - just blurred, revealed on
+      // hover/focus (the static renderer has no JS to gate a click). An
+      // interactive renderer turns the same class into click-to-reveal.
+      // Degrades, like everything, to readable content: no stylesheet means
+      // a visible spoiler, which beats a hidden one.
+      return `<span class="mq-spoiler" tabindex="0">${inner}</span>`;
     case "size": {
       const value = attrs["size"];
       if (value !== undefined && /^[1-7]$/.test(value)) {