@uurtech/jdf 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uurtech/jdf",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Render JDF (JSON Document Format) documents in the browser. Drop-in replacement for embedding PDFs — point at a .jdf file and it appears on the page, fully styled, searchable, with a clickable TOC.",
   "license": "MIT",
   "author": "Ugur Kazdal <ugur@uurtech.com>",

package/src/jdfjs.css

@@ -360,3 +360,6 @@ select.jdfjs-form-control {
 .jdfjs-dark .jdfjs-form-control:disabled {
   background: #1f2937;
 }
+
+/* Unknown element type — same visible fallback as the desktop reader, never a silent drop. */
+.jdfjs-unknown { font-size: 10px; color: #9ca3af; font-family: ui-monospace, Menlo, monospace; }

package/src/renderers/element.ts

@@ -47,8 +47,15 @@ export function renderElement(el: Element, ctx: RenderContext): HTMLElement | nu
     case "checkbox": inner = renderFormCheckbox(el, ctx); break;
     case "select": inner = renderFormSelect(el, ctx); break;
     case "signature": inner = renderFormSignature(el, ctx); break;
+    default: {
+      // Same visible fallback as the desktop reader — an element must never vanish silently.
+      inner = document.createElement("div");
+      inner.className = "jdfjs-unknown";
+      inner.textContent = `[unknown: ${(el as any).type}]`;
+    }
   }
   if (!inner) return null;
+  wrap.dataset.jdfType = String((el as any).type);
   wrap.appendChild(inner);
   return wrap;
 }
@@ -96,6 +103,7 @@ function textTag(h: TextElement["heading"]): keyof HTMLElementTagNameMap {
 // ── richtext ────────────────────────────────────────────────────────────────
 function renderRichText(el: RichTextElement, ctx: RenderContext): HTMLElement {
   const p = document.createElement("p");
+  p.style.whiteSpace = "pre-wrap"; // keep "\n" line breaks (folded paragraphs) — same as the reader
   p.className = "jdfjs-richtext";
   p.style.margin = "0";
   applyStyle(p, resolveStyle(el.style, ctx.styles));
@@ -234,7 +242,9 @@ function renderImage(el: ImageElement, ctx: RenderContext): HTMLElement {
   wrap.style.height = "100%";
   const img = document.createElement("img");
   img.src = imageSrc(el, ctx.resources);
-  img.alt = el.alt || "";
+  // A caption written by `jdf describe` doubles as accessible text and hover title, so the text RAG indexes is the text the reader sees.
+  img.alt = el.alt || el.caption || "";
+  if (el.caption) img.title = el.caption;
   img.style.display = "block";
   img.style.width = "100%";
   img.style.height = "100%";

package/src/utils/style.ts

@@ -1,3 +1,4 @@
+import { unitToPx } from "@jdf/core";
 import type { Style, StyleRef } from "@jdf/core";
 
 function paddingToCss(p: NonNullable<Style["padding"]>): string {
@@ -16,6 +17,8 @@ export function styleToCss(style: Style): Record<string, string> {
   if (style.color) css["color"] = style.color;
   if (style.backgroundColor) css["background-color"] = style.backgroundColor;
   if (style.textAlign) css["text-align"] = style.textAlign;
+  if (style.lineHeight) css["line-height"] = String(style.lineHeight); // unitless, same as the reader
+  if (style.textIndent) css["text-indent"] = `${unitToPx(style.textIndent)}px`;
   if (style.textDecoration) {
     const td = style.textDecoration === "strikethrough" ? "line-through" : style.textDecoration;
     css["text-decoration"] = td;