@owomark/view 0.1.6 → 0.1.7

package/dist/preview-render.worker.js

@@ -0,0 +1,369 @@
+// src/worker/renderer-registry.ts
+import { runtimeBlockRegistry } from "@owomark/core";
+
+// src/renderer/side-annotation-renderer.ts
+import { SIDE_ANNOTATION_RENDERER_KEY_BY_TYPE } from "@owomark/core/semantic/syntax";
+
+// src/renderer/default-renderer.ts
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var SAFE_URL_PATTERN = /^(?:https?:|mailto:|#|\/)/i;
+function sanitizeUrl(url) {
+  return SAFE_URL_PATTERN.test(url) ? url : "";
+}
+function stripCommonBlockquotePrefixes(raw) {
+  let lines = raw.split("\n");
+  let depth = 0;
+  while (lines.length > 0 && lines.every((line) => line.trim() === "" || /^ {0,3}>\s?/.test(line))) {
+    lines = lines.map((line) => line.trim() === "" ? line : line.replace(/^ {0,3}>\s?/, ""));
+    depth += 1;
+  }
+  return {
+    depth,
+    content: lines.join("\n")
+  };
+}
+function wrapInBlockquotes(content, depth) {
+  let wrapped = content;
+  for (let index = 0; index < depth; index += 1) {
+    wrapped = `<blockquote>${wrapped}</blockquote>`;
+  }
+  return wrapped;
+}
+function extractHeadingText(raw) {
+  const { depth, content } = stripCommonBlockquotePrefixes(raw);
+  const setextMatch = content.match(/^([^\n]+)\n {0,3}(?:=+|-+)\s*$/);
+  if (setextMatch) {
+    return {
+      depth,
+      text: setextMatch[1]
+    };
+  }
+  return {
+    depth,
+    text: content.replace(/^#{1,6}\s*/, "")
+  };
+}
+function renderInline(text) {
+  let html = escapeHtml(text);
+  html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
+  html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  html = html.replace(/_(.+?)_/g, "<em>$1</em>");
+  html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) => `<img src="${sanitizeUrl(src)}" alt="${alt}" />`);
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, href) => `<a href="${sanitizeUrl(href)}">${label}</a>`);
+  return html;
+}
+function renderBlockDefault(block) {
+  switch (block.kind) {
+    case "paragraph": {
+      const content = renderInline(block.raw);
+      if (block.raw.trim() === "") return "";
+      return `<p>${content}</p>`;
+    }
+    case "heading": {
+      const level = block.headingLevel ?? 1;
+      const { depth, text } = extractHeadingText(block.raw);
+      return wrapInBlockquotes(`<h${level}>${renderInline(text)}</h${level}>`, depth);
+    }
+    case "code-fence": {
+      const lines = block.raw.split("\n");
+      const openMatch = lines[0]?.match(/^[`~]{3,}(.*)/);
+      const lang = openMatch?.[1]?.trim().split(/\s+/)[0] || "";
+      const closeFenceIdx = lines.length - 1;
+      const hasCloseFence = closeFenceIdx > 0 && /^[`~]{3,}\s*$/.test(lines[closeFenceIdx]);
+      const codeLines = lines.slice(1, hasCloseFence ? closeFenceIdx : void 0);
+      const code = escapeHtml(codeLines.join("\n"));
+      const langAttr = lang ? ` class="language-${lang}"` : "";
+      return `<pre data-source-line-start="${block.startLine}" data-source-line-end="${block.endLine}" data-block-id="${block.blockId}"><code${langAttr}>${code}</code></pre>`;
+    }
+    case "unordered-list": {
+      const items = block.raw.split("\n").filter((line) => line.trim()).map((line) => {
+        const text = line.replace(/^\s*[-*+]\s+/, "");
+        return `<li>${renderInline(text)}</li>`;
+      });
+      return `<ul>${items.join("")}</ul>`;
+    }
+    case "ordered-list": {
+      const items = block.raw.split("\n").filter((line) => line.trim()).map((line) => {
+        const text = line.replace(/^\s*\d+\.\s+/, "");
+        return `<li>${renderInline(text)}</li>`;
+      });
+      return `<ol>${items.join("")}</ol>`;
+    }
+    case "blockquote": {
+      const lines = block.raw.split("\n").map((line) => line.replace(/^\s*>\s?/, ""));
+      const content = lines.map((line) => `<p>${renderInline(line)}</p>`).join("");
+      return `<blockquote>${content}</blockquote>`;
+    }
+    case "thematic-break":
+      return "<hr />";
+    case "table":
+    case "math-block":
+    case "html-block":
+    case "custom":
+      return `<div>${escapeHtml(block.raw)}</div>`;
+  }
+}
+
+// src/renderer/side-annotation-renderer.ts
+function escapeHtml2(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttribute(text) {
+  return escapeHtml2(text).replace(/'/g, "&#39;");
+}
+function svgSegment(className, width, height, body, extraAttrs = "") {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" class="${className}"${extraAttrs}>${body}</svg>`;
+}
+function stretchLineDiv() {
+  return '<div class="side-svg-line"></div>';
+}
+function segmented(width, axisPx, segments, extraClass = "") {
+  const className = ["side-annotation-svg", "side-svg-segmented", extraClass].filter(Boolean).join(" ");
+  return `<div class="${className}" style="width:${width};--side-svg-axis:${axisPx}px">${segments.join("")}</div>`;
+}
+function svgPath(d, extra = "") {
+  return `<path d="${d}" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"${extra}></path>`;
+}
+function svgLine(x1, y1, x2, y2, extra = "") {
+  return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"${extra}></line>`;
+}
+function svgPolyline(points, extra = "") {
+  return `<polyline points="${points}" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" shape-rendering="geometricPrecision"${extra}></polyline>`;
+}
+function makeSvgForSideType(sideType, orphan) {
+  const rendererKey = SIDE_ANNOTATION_RENDERER_KEY_BY_TYPE[sideType] ?? sideType;
+  if (orphan) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="4" viewBox="0 0 4 100" preserveAspectRatio="none" class="side-annotation-svg side-svg-vline">${svgLine(2, "2", 2, "98", ' vector-effect="non-scaling-stroke"')}</svg>`;
+  }
+  switch (rendererKey) {
+    case "brace":
+      return segmented("12px", 6, [
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 1 0.75 C 3.5 0.75, 6 2.5, 6 5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 12, 8, svgPath("M 6 0 C 6 2.5, 11 4, 11 4 C 11 4, 6 5.5, 6 8")),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 6 0.75 C 6 3.5, 3.5 5.25, 1 5.25"))
+      ]);
+    case "left-brace":
+      return segmented("12px", 6, [
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 11 0.75 C 8.5 0.75, 6 2.5, 6 5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 12, 8, svgPath("M 6 0 C 6 2.5, 1 4, 1 4 C 1 4, 6 5.5, 6 8")),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 6 0.75 C 6 3.5, 8.5 5.25, 11 5.25"))
+      ]);
+    case "bracket":
+      return segmented("8px", 4, [
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("1,0.75 4,0.75 4,5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("4,0.75 4,5.25 1,5.25"))
+      ], "side-svg-bracket");
+    case "left-bracket":
+      return segmented("8px", 4, [
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("7,0.75 4,0.75 4,5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("4,0.75 4,5.25 7,5.25"))
+      ], "side-svg-left-bracket");
+    case "line":
+    case "warning":
+    case "question":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="4" viewBox="0 0 4 100" preserveAspectRatio="none" class="side-annotation-svg side-svg-vline">${svgLine(2, "2", 2, "98", ' vector-effect="non-scaling-stroke"')}</svg>`;
+    case "dash":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="4" viewBox="0 0 20 4" class="side-annotation-svg side-svg-dash">${svgLine(1, "2", 19, "2")}</svg>`;
+    case "arrow":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16" class="side-annotation-svg side-svg-arrow">${svgPath("M 1 8 L 20 8 M 16 3 L 21 8 L 16 13")}</svg>`;
+    case "fat-arrow":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16" class="side-annotation-svg side-svg-fat-arrow">${svgPath("M 1 5 L 16 5 M 1 11 L 16 11 M 15 2 L 22 8 L 15 14")}</svg>`;
+    case "wave-arrow":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="16" viewBox="0 0 28 16" class="side-annotation-svg side-svg-wave-arrow">${svgPath("M 1 8 C 4 3, 8 13, 12 8 C 16 3, 20 8, 20 8 M 18 3 L 23 8 L 18 13")}</svg>`;
+    case "brace-arrow":
+      return segmented("12px", 6, [
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 1 0.75 C 3.5 0.75, 6 2.5, 6 5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 12, 8, `${svgLine(6, "0", 6, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 6 4 L 19 4 M 16 1.5 L 20 4 L 16 6.5")}`, ' overflow="visible"'),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 6 0.75 C 6 3.5, 3.5 5.25, 1 5.25"))
+      ], "side-svg-compound-arrow");
+    case "brace-fat-arrow":
+      return segmented("12px", 6, [
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 1 0.75 C 3.5 0.75, 6 2.5, 6 5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 12, 8, `${svgLine(6, "0", 6, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 6 2.5 L 14 2.5 M 6 5.5 L 14 5.5 M 13 0.5 L 18 4 L 13 7.5")}`, ' overflow="visible"'),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 6 0.75 C 6 3.5, 3.5 5.25, 1 5.25"))
+      ], "side-svg-compound-arrow");
+    case "bracket-arrow":
+      return segmented("8px", 4, [
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("1,0.75 4,0.75 4,5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 8, 8, `${svgLine(4, "0", 4, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 4 4 L 17 4 M 14 1.5 L 18 4 L 14 6.5")}`, ' overflow="visible"'),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("4,0.75 4,5.25 1,5.25"))
+      ], "side-svg-bracket side-svg-compound-arrow");
+    case "bracket-fat-arrow":
+      return segmented("8px", 4, [
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("1,0.75 4,0.75 4,5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 8, 8, `${svgLine(4, "0", 4, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 4 2.5 L 13 2.5 M 4 5.5 L 13 5.5 M 12 0.5 L 17 4 L 12 7.5")}`, ' overflow="visible"'),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("4,0.75 4,5.25 1,5.25"))
+      ], "side-svg-bracket side-svg-compound-arrow");
+    case "line-arrow":
+      return segmented("4px", 2, [
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 4, 8, `${svgLine(2, "0", 2, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 2 4 L 15 4 M 12 1.5 L 16 4 L 12 6.5")}`, ' overflow="visible"'),
+        stretchLineDiv()
+      ], "side-svg-compound-arrow");
+    case "line-fat-arrow":
+      return segmented("4px", 2, [
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 4, 8, `${svgLine(2, "0", 2, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 2 2.5 L 11 2.5 M 2 5.5 L 11 5.5 M 10 0.5 L 15 4 L 10 7.5")}`, ' overflow="visible"'),
+        stretchLineDiv()
+      ], "side-svg-compound-arrow");
+    case "brace-warning":
+    case "brace-question":
+      return makeSvgForSideType("brace", false);
+    default:
+      return "";
+  }
+}
+function toPreviewKind(type) {
+  switch (type) {
+    case "heading":
+      return "heading";
+    case "unordered-list":
+      return "unordered-list";
+    case "ordered-list":
+      return "ordered-list";
+    case "blockquote":
+      return "blockquote";
+    case "code-fence":
+      return "code-fence";
+    case "thematic-break":
+      return "thematic-break";
+    case "math-block":
+      return "math-block";
+    case "table":
+      return "table";
+    case "html-block":
+      return "html-block";
+    default:
+      return "paragraph";
+  }
+}
+function renderMainBlocks(block) {
+  const rawMembers = Array.isArray(block.attributes?.mainBlocks) ? block.attributes?.mainBlocks : [];
+  return rawMembers.map((entry, index) => {
+    if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
+      return "";
+    }
+    const type = typeof entry.type === "string" ? entry.type : "paragraph";
+    const raw = typeof entry.raw === "string" ? entry.raw : "";
+    const memberBlock = {
+      blockId: `${block.blockId}:member:${index}`,
+      kind: toPreviewKind(type),
+      raw,
+      startLine: block.startLine,
+      endLine: block.endLine,
+      renderKey: `${block.renderKey}:member:${index}`
+    };
+    if (type === "heading" && typeof entry.headingLevel === "number") {
+      memberBlock.headingLevel = entry.headingLevel;
+    }
+    if (type === "code-fence" && typeof entry.language === "string") {
+      memberBlock.language = entry.language;
+    }
+    return renderBlockDefault(memberBlock);
+  }).join("");
+}
+function isSideAnnotationPreviewBlock(block) {
+  return block.kind === "custom" && block.attributes?.customBlockKey === "side-annotation";
+}
+function renderSideAnnotationPreviewBlock(block) {
+  if (!isSideAnnotationPreviewBlock(block)) {
+    return `<div>${escapeHtml2(block.raw)}</div>`;
+  }
+  const sideType = typeof block.attributes?.sideType === "string" ? block.attributes.sideType : "plain";
+  const annotationText = typeof block.attributes?.annotationText === "string" ? block.attributes.annotationText : "";
+  const orphan = Boolean(block.attributes?.orphan);
+  const className = ["side-annotation", `side-type-${sideType}`, orphan ? "side-orphan" : ""].filter(Boolean).join(" ");
+  const asideClass = ["side-annotation-aside", orphan ? "side-annotation-orphan" : ""].filter(Boolean).join(" ");
+  const decoration = makeSvgForSideType(sideType, orphan);
+  const mainHtml = renderMainBlocks(block);
+  const textHtml = annotationText ? `<span class="side-annotation-text">${escapeHtml2(annotationText)}</span>` : "";
+  return [
+    `<div class="${className}" data-side-type="${escapeAttribute(sideType)}"${orphan ? ' data-side-orphan="true"' : ""}${annotationText ? ` data-side-text="${escapeAttribute(annotationText)}"` : ""}>`,
+    `<div class="side-annotation-main">${mainHtml}</div>`,
+    `<div class="${asideClass}">${decoration}${textHtml}</div>`,
+    "</div>"
+  ].join("");
+}
+
+// src/worker/renderer-registry.ts
+var workerRenderers = /* @__PURE__ */ new Map();
+for (const descriptor of runtimeBlockRegistry.list()) {
+  if (descriptor.workerRendererId !== "builtin:side-annotation") {
+    continue;
+  }
+  workerRenderers.set(descriptor.workerRendererId, (block) => ({
+    kind: "html",
+    html: renderSideAnnotationPreviewBlock(block)
+  }));
+}
+function getWorkerRenderer(rendererId) {
+  return workerRenderers.get(rendererId) ?? null;
+}
+
+// src/worker/preview-render.worker.ts
+var cancelledIds = /* @__PURE__ */ new Set();
+async function handleRender(req) {
+  if (cancelledIds.has(req.taskId)) {
+    cancelledIds.delete(req.taskId);
+    return;
+  }
+  try {
+    const renderer = getWorkerRenderer(req.rendererId);
+    if (!renderer) {
+      throw new Error(`Unknown worker renderer: ${req.rendererId}`);
+    }
+    if (cancelledIds.has(req.taskId)) {
+      cancelledIds.delete(req.taskId);
+      return;
+    }
+    const result = await renderer(req.block, req.context);
+    if (cancelledIds.has(req.taskId)) {
+      cancelledIds.delete(req.taskId);
+      return;
+    }
+    const response = result.kind === "html" && result.html != null ? { taskId: req.taskId, ok: true, html: result.html } : { taskId: req.taskId, ok: false, error: "Renderer returned non-html result in worker context" };
+    self.postMessage(response);
+  } catch (error) {
+    if (cancelledIds.has(req.taskId)) {
+      cancelledIds.delete(req.taskId);
+      return;
+    }
+    self.postMessage({
+      taskId: req.taskId,
+      ok: false,
+      error: error instanceof Error ? error.message : String(error)
+    });
+  }
+}
+self.onmessage = (e) => {
+  const msg = e.data;
+  switch (msg.type) {
+    case "render":
+      void handleRender(msg);
+      break;
+    case "cancel":
+      cancelledIds.add(msg.taskId);
+      break;
+    case "cancel-all":
+      cancelledIds.clear();
+      break;
+  }
+};

package/dist/{types-DsL_4tUb.d.ts → types-D4TVpyP7.d.ts}

@@ -1,4 +1,4 @@
-import { OwoMarkSharedState, PreviewBlockKind, PreviewBlock } from '@owomark/core';
+import { OwoMarkSharedState, PreviewBlock, PreviewBlockKind } from '@owomark/core';
 
 type PreviewRenderPhase = 'idle' | 'rendering' | 'highlighting' | 'ready' | 'error';
 type PreviewCacheEntry = {
@@ -37,6 +37,11 @@ type PreviewRendererDefinition = {
     priority: PreviewTaskPriority;
     render: PreviewBlockRenderer;
     version: string;
+    workerRendererId?: string;
+    /**
+     * @deprecated Dynamic worker module URLs are incompatible with static
+     * bundlers such as Next.js Turbopack. Prefer `workerRendererId`.
+     */
     workerModuleUrl?: string;
 };
 type PreviewBlockRenderer = (block: PreviewBlock, context: PreviewRenderContext) => Promise<PreviewRenderResult> | PreviewRenderResult;
@@ -45,15 +50,20 @@ type PreviewBlockMetadata = {
     priority: PreviewTaskPriority;
     heavy?: boolean;
 };
+type PreviewRendererTarget = {
+    kind: PreviewBlockKind;
+    customBlockKey?: string | null;
+};
+type PreviewRendererRegistryLookup = PreviewBlock | PreviewRendererTarget;
 type PreviewRendererRegistry = {
-    get(kind: PreviewBlockKind): PreviewRendererDefinition | null;
-    register(kind: PreviewBlockKind, renderer: PreviewRendererDefinition): void;
-    unregister(kind: PreviewBlockKind): void;
-    registerMetadata(kind: PreviewBlockKind, meta: PreviewBlockMetadata): void;
-    isHeavy(kind: PreviewBlockKind): boolean;
-    getMode(kind: PreviewBlockKind): PreviewRendererMode | null;
-    getPriority(kind: PreviewBlockKind): PreviewTaskPriority | null;
-    listRegistered(): PreviewBlockKind[];
+    get(target: PreviewRendererRegistryLookup): PreviewRendererDefinition | null;
+    register(target: PreviewRendererTarget, renderer: PreviewRendererDefinition): void;
+    unregister(target: PreviewRendererTarget): void;
+    registerMetadata(target: PreviewRendererTarget, meta: PreviewBlockMetadata): void;
+    isHeavy(target: PreviewRendererRegistryLookup): boolean;
+    getMode(target: PreviewRendererRegistryLookup): PreviewRendererMode | null;
+    getPriority(target: PreviewRendererRegistryLookup): PreviewTaskPriority | null;
+    listRegistered(): PreviewRendererTarget[];
 };
 type PreviewTaskScheduler = {
     submitWorkerTask(block: PreviewBlock, rendererDef: PreviewRendererDefinition, context: PreviewRenderContext): Promise<string>;
@@ -90,4 +100,4 @@ type OwoMarkPreviewEngine = {
     getRenderedVersion(): number;
 };
 
-export type { OwoMarkPreviewEngineOptions as O, PreviewRendererRegistry as P, OwoMarkPreviewEngine as a, PreviewTaskScheduler as b, PreviewBlockMetadata as c, PreviewBlockRenderer as d, PreviewCacheEntry as e, PreviewRenderContext as f, PreviewRenderPhase as g, PreviewRenderResult as h, PreviewRendererDefinition as i, PreviewRendererMode as j, PreviewStrategy as k, PreviewTaskPriority as l };
+export type { OwoMarkPreviewEngineOptions as O, PreviewRendererRegistry as P, OwoMarkPreviewEngine as a, PreviewTaskScheduler as b, PreviewBlockMetadata as c, PreviewBlockRenderer as d, PreviewCacheEntry as e, PreviewRenderContext as f, PreviewRenderPhase as g, PreviewRenderResult as h, PreviewRendererDefinition as i, PreviewRendererMode as j, PreviewRendererRegistryLookup as k, PreviewRendererTarget as l, PreviewStrategy as m, PreviewTaskPriority as n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owomark/view",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Rendering engine, preview engine, DOM view layer, and official base theme for OwoMark.",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,7 +62,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@owomark/core": "^0.1.6"
+    "@owomark/core": "^0.1.7"
   },
   "devDependencies": {
     "tsup": "^8.5.1"

package/src/style.css

@@ -4,8 +4,10 @@
 
 /* Structural: editor base styles consuming --owo-editor-* tokens */
 @import './theme/owomark.css';
+@import './theme/cards.css';
 @import './theme/side-annotation.css';
 @import './theme/slash-menu.css';
+@import './theme/toolbar.css';
 
 /* Aesthetic: token value assignments for light and dark presets */
 @import './theme/light.css';

package/src/theme/cards.css

@@ -0,0 +1,50 @@
+.owo-cards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin: 1rem 0 1.5rem;
+}
+
+.owo-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--owo-preview-card-border, var(--owo-border, #e2e8f0));
+  border-radius: 0.875rem;
+  background: var(--owo-preview-card-bg, var(--owo-surface-raised, #f8fafc));
+  box-shadow: var(--owo-preview-card-shadow, 0 10px 30px rgba(15, 23, 42, 0.06));
+}
+
+.owo-card-title {
+  margin: 0;
+  color: var(--owo-preview-card-title, var(--owo-text, #111827));
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.owo-card-body > :first-child {
+  margin-top: 0;
+}
+
+.owo-card-body > :last-child {
+  margin-bottom: 0;
+}
+
+.owo-card[data-owo-card-tone="info"] {
+  background: color-mix(in srgb, var(--owo-brand, #2563eb) 7%, var(--owo-preview-card-bg, #f8fafc));
+  border-color: color-mix(in srgb, var(--owo-brand, #2563eb) 22%, var(--owo-preview-card-border, #e2e8f0));
+}
+
+.owo-card[data-owo-card-tone="warning"] {
+  background: color-mix(in srgb, var(--owo-warning, #f59e0b) 9%, var(--owo-preview-card-bg, #f8fafc));
+  border-color: color-mix(in srgb, var(--owo-warning, #f59e0b) 26%, var(--owo-preview-card-border, #e2e8f0));
+}
+
+@media (max-width: 768px) {
+  .owo-cards {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/src/theme/dark.css

@@ -56,6 +56,8 @@
   --owo-syntax-link-url: #89b4fa;
   --owo-syntax-inline-code: #94e2d5;
   --owo-syntax-inline-code-bg: rgba(88, 91, 112, 0.35);
+  --owo-syntax-custom-inline: #f9e2af;
+  --owo-syntax-custom-inline-bg: rgba(250, 179, 135, 0.2);
   --owo-syntax-code-fence: #7f849c;
   --owo-syntax-code-lang: #fab387;
   --owo-syntax-list-marker: #fab387;

package/src/theme/light.css

@@ -56,6 +56,8 @@
   --owo-syntax-link-url: #2563eb;
   --owo-syntax-inline-code: #0f766e;
   --owo-syntax-inline-code-bg: rgba(148, 163, 184, 0.16);
+  --owo-syntax-custom-inline: #92400e;
+  --owo-syntax-custom-inline-bg: rgba(250, 204, 21, 0.18);
   --owo-syntax-code-fence: #64748b;
   --owo-syntax-code-lang: #ea580c;
   --owo-syntax-list-marker: #ea580c;

package/src/theme/owomark.css

@@ -101,6 +101,12 @@
   color: var(--owo-editor-text, #1f2937);
 }
 
+.owo-syntax-custom-inline {
+  color: var(--owo-syntax-custom-inline, var(--owo-editor-text, currentColor));
+  background-color: var(--owo-syntax-custom-inline-bg, rgba(250, 204, 21, 0.18));
+  border-radius: 0.2em;
+}
+
 .owo-syntax-inline-code {
   color: var(--owo-syntax-inline-code, #0f766e);
   background-color: var(--owo-syntax-inline-code-bg, rgba(148, 163, 184, 0.16));

package/src/theme/preview.css

@@ -149,7 +149,22 @@
   gap: 0;
 }
 
+.owomark-prose figure[data-rehype-pretty-code-figure] {
+  margin-top: var(--owo-preview-code-block-margin-top, 0.5rem);
+  margin-bottom: var(--owo-preview-code-block-margin-bottom, 0.5rem);
+}
+
+.owomark-prose figure[data-rehype-pretty-code-figure] pre {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.owomark-prose .owo-async-code-block[data-owo-code-block-state="loading"] pre {
+  opacity: 0.82;
+}
+
 .owomark-prose pre.shiki span[data-line] {
+  display: block;
   min-height: var(--owo-preview-code-line-min-height, 1.5rem);
 }
 

package/src/theme/toolbar.css

@@ -0,0 +1,104 @@
+/* OwoMark Toolbar — Component quick-insert buttons */
+
+.owo-toolbar__components-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px;
+  background: var(--owo-toolbar-bg, #f8fafc);
+  border: 1px solid var(--owo-toolbar-border, #e2e8f0);
+  border-radius: 6px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  color: var(--owo-toolbar-text, #334155);
+}
+
+.owo-toolbar__component-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: none;
+  border-radius: 4px;
+  background: var(--owo-toolbar-button-bg, transparent);
+  color: var(--owo-toolbar-text, #334155);
+  font-size: 13px;
+  font-family: inherit;
+  line-height: 1.4;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.1s, box-shadow 0.1s;
+  user-select: none;
+}
+
+.owo-toolbar__component-button:hover {
+  background: var(--owo-toolbar-button-hover-bg, rgba(15, 23, 42, 0.06));
+  box-shadow: 0 0 0 1px var(--owo-toolbar-border, #e2e8f0);
+}
+
+.owo-toolbar__component-button:active {
+  background: var(--owo-toolbar-button-active-bg, rgba(37, 99, 235, 0.1));
+}
+
+.owo-toolbar__component-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--owo-toolbar-icon, #475569);
+}
+
+.owo-toolbar__component-label {
+  font-weight: 500;
+}
+
+/* --- Collapsed popover trigger (responsive) --- */
+
+.owo-toolbar__collapse-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: none;
+  border-radius: 4px;
+  background: var(--owo-toolbar-button-bg, transparent);
+  color: var(--owo-toolbar-text, #334155);
+  font-size: 13px;
+  font-family: inherit;
+  line-height: 1.4;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.1s;
+  user-select: none;
+}
+
+.owo-toolbar__collapse-trigger:hover {
+  background: var(--owo-toolbar-button-hover-bg, rgba(15, 23, 42, 0.06));
+}
+
+/* --- Popover panel --- */
+
+.owo-toolbar__popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 140px;
+  padding: 4px;
+  margin-top: 4px;
+  background: var(--owo-toolbar-bg, #f8fafc);
+  border: 1px solid var(--owo-toolbar-border, #e2e8f0);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.owo-toolbar__popover .owo-toolbar__component-button {
+  width: 100%;
+  justify-content: flex-start;
+}