@tnotesjs/ui 0.1.1 → 0.1.3

package/README.md

@@ -40,13 +40,36 @@ Published packages should depend on the npm version of `@tnotesjs/ui`, not `file
 
 ## Components
 
+### Shared rendering contract
+
+Core and Desk import the same token, prose, code-block, and code-group implementation. The
+`SHARED_CODE_GROUP_CONTRACT` fixture is exercised in both repositories' CI suites so changes to
+fence metadata, line numbering, titles, or generated markup cannot drift silently.
+
+| Syntax / capability                                       | Core page                              | Desk visual edit                                        | Desk read-only        | Desk source        |
+| --------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------- | --------------------- | ------------------ |
+| Markdown prose (headings, links, lists, tables, quotes)   | Shared `prose.css`                     | Shared typography + editor hit areas                    | Shared `prose.css`    | Canonical Markdown |
+| Fenced code + lazy Shiki language loading                 | Shared                                 | Shared in code-group previews; CodeMirror while editing | Shared                | Byte-preserved     |
+| `::: code-group`                                          | Shared `CodeGroup`                     | Shared atomic preview                                   | Shared                | Byte-preserved     |
+| `:line-numbers`, `:line-numbers=N`, `:no-line-numbers`    | Yes                                    | Yes                                                     | Yes                   | Byte-preserved     |
+| `{N}` fence line highlights                               | Yes                                    | Yes (CodeMirror)                                        | Yes                   | Byte-preserved     |
+| Shiki `[!code]` annotations                               | No (aligned with Desk)                 | No                                                      | No                    | Shown as source    |
+| Inline `<Badge>`                                          | Shared `Badge`                         | Shared inline projection                                | Shared                | Byte-preserved     |
+| `NotesTable`                                              | Shared component via Core data adapter | Shared component projection                             | Shared                | Byte-preserved     |
+| Math                                                      | TNotes SSG MathJax pipeline            | Milkdown/KaTeX                                          | Milkdown/KaTeX        | Byte-preserved     |
+| Image lightbox, navigation, zoom, and pan                 | Shared `ImagePreview`                  | Shared `ImagePreview`                                   | Shared `ImagePreview` | N/A                |
+| Mermaid / Mindmap / Footprints / BilibiliVideo / WordList | Shared                                 | Shared projection                                       | Shared                | Byte-preserved     |
+
+The hosts may add editing handles, navigation offsets, or knowledge-base data adapters. They must
+not redefine the shared color tokens, prose typography, or code rendering shell.
+
 ### `BilibiliVideo` — `<BilibiliVideo id="BVxxxx" />`
 
-| Prop | Default | Notes |
-|------|---------|--------|
-| `id` | required | BV id |
-| `autoplay` | `false` | Embed URL sends `autoplay=0` unless enabled |
-| `muted` | `false` | Embed URL sends `muted=0\|1` |
+| Prop       | Default  | Notes                                       |
+| ---------- | -------- | ------------------------------------------- |
+| `id`       | required | BV id                                       |
+| `autoplay` | `false`  | Embed URL sends `autoplay=0` unless enabled |
+| `muted`    | `false`  | Embed URL sends `muted=0\|1`                |
 
 ```md
 <BilibiliVideo id="BV1QR4y1y7GG" :autoplay="true" :muted="true" />
@@ -54,13 +77,13 @@ Published packages should depend on the npm version of `@tnotesjs/ui`, not `file
 
 ### `WordList` — `<WordList :words="[…]" />`
 
-| Prop | Default | Notes |
-|------|---------|--------|
-| `words` | `[]` | Word strings |
-| `needSort` | `false` | Sort A→Z by first letter |
-| `wordsBaseUrl` | TNotes.en-words blob URL | Optional host override |
-| `wordsRawBaseUrl` | TNotes.en-words raw URL | Optional host override |
-| `features` | `WORD_LIST_FEATURES_FULL` | Capability flags (see below) |
+| Prop              | Default                   | Notes                        |
+| ----------------- | ------------------------- | ---------------------------- |
+| `words`           | `[]`                      | Word strings                 |
+| `needSort`        | `false`                   | Sort A→Z by first letter     |
+| `wordsBaseUrl`    | en-words blob URL         | Optional host override       |
+| `wordsRawBaseUrl` | en-words raw URL          | Optional host override       |
+| `features`        | `WORD_LIST_FEATURES_FULL` | Capability flags (see below) |
 
 ```md
 <WordList :words="['cancel', 'salary']" :needSort="true" />
@@ -68,30 +91,30 @@ Published packages should depend on the npm version of `@tnotesjs/ui`, not `file
 
 **Features presets** (no consumer/`host` field — capability-based):
 
-| Preset | Cards | Fetch word data | Menu Pin | Menu Auto Show Card |
-|--------|-------|-----------------|----------|---------------------|
-| `WORD_LIST_FEATURES_FULL` (default) | ✓ | ✓ | ✓ | ✓ |
-| `WORD_LIST_FEATURES_STATIC` | — | — | — | — |
+| Preset                              | Cards | Fetch word data | Menu Pin | Menu Auto Show Card |
+| ----------------------------------- | ----- | --------------- | -------- | ------------------- |
+| `WORD_LIST_FEATURES_FULL` (default) | ✓     | ✓               | ✓        | ✓                   |
+| `WORD_LIST_FEATURES_STATIC`         | —     | —               | —        | —                   |
 
 ### `Mermaid`
 
 Shared diagram preview for core (`tn:dev`) and Desk. Markdown fence language: `mermaid`.
 
-| Prop | Default | Notes |
-|------|---------|--------|
-| `source` | `''` | Plain Mermaid text (Desk) |
-| `graph` | `''` | URI-encoded source (VitePress fence) |
-| `id` | auto | Mermaid render id |
-| `center` | `false` | From fence keyword `center`; omit → not centered |
-| `isDark` | auto | Or pass explicitly |
-| `securityLevel` | `'loose'` | Desk preview uses `'strict'` |
-| `enableCopy` | `true` | Hover copy action |
-| `enableFullscreen` | `true` | Hover fullscreen action |
-| `enableCenterToggle` | `true` | Hover center toggle (left of fullscreen) |
+| Prop                 | Default   | Notes                                            |
+| -------------------- | --------- | ------------------------------------------------ |
+| `source`             | `''`      | Plain Mermaid text (Desk)                        |
+| `graph`              | `''`      | URI-encoded source (VitePress fence)             |
+| `id`                 | auto      | Mermaid render id                                |
+| `center`             | `false`   | From fence keyword `center`; omit → not centered |
+| `isDark`             | auto      | Or pass explicitly                               |
+| `securityLevel`      | `'loose'` | Same default for Desk and site preview           |
+| `enableCopy`         | `true`    | Hover copy action                                |
+| `enableFullscreen`   | `true`    | Hover fullscreen action                          |
+| `enableCenterToggle` | `true`    | Hover center toggle (left of fullscreen)         |
 
 Fence:
 
-- `` ```mermaid `` → not centered  
-- `` ```mermaid center `` → centered  
+- ` ```mermaid ` → not centered
+- ` ```mermaid center ` → centered
 
 Icons for the toggle live in `src/components/Mermaid/icons/` (`icon__center_on.svg` / `icon__center_off.svg`).

package/dist/code/highlight.d.ts

@@ -0,0 +1,42 @@
+import { HighlighterCore } from 'shiki/core';
+
+interface CodeMeta {
+    language: string;
+    title: string;
+    lineNumbers: boolean;
+    startLine: number;
+    highlightedLines: number[];
+}
+/**
+ * A single cross-repository fixture. Core and Desk both consume this contract in
+ * their own test suites, so a parser or DOM change cannot silently diverge.
+ */
+declare const SHARED_CODE_GROUP_CONTRACT: {
+    readonly source: string;
+    readonly items: readonly [{
+        readonly info: "js:line-numbers=4 {2} [one.js]";
+        readonly code: "console.log(1)\nconsole.log(2)";
+        readonly title: "one.js";
+        readonly language: "js";
+        readonly lineNumbers: true;
+        readonly startLine: 4;
+        readonly highlightedLines: readonly [2];
+    }, {
+        readonly info: "ts:no-line-numbers [two.ts]";
+        readonly code: "const value: number = 2";
+        readonly title: "two.ts";
+        readonly language: "ts";
+        readonly lineNumbers: false;
+        readonly startLine: 1;
+        readonly highlightedLines: readonly [];
+    }];
+};
+declare function parseCodeMeta(info?: string, defaultLineNumbers?: boolean): CodeMeta;
+declare function normalizeCodeLanguage(language: string): string;
+/** One engine and one grammar cache for build-time and browser consumers. */
+declare function prepareCodeHighlighter(languages?: string[]): Promise<HighlighterCore>;
+/** Markdown renderers prewarm document languages before their synchronous render pass. */
+declare function highlightCodeSync(code: string, info?: string): string;
+declare function highlightCode(code: string, info?: string): Promise<string>;
+
+export { type CodeMeta, SHARED_CODE_GROUP_CONTRACT, highlightCode, highlightCodeSync, normalizeCodeLanguage, parseCodeMeta, prepareCodeHighlighter };

package/dist/code/highlight.js

@@ -0,0 +1,138 @@
+// src/code/highlight.ts
+import {
+  createHighlighterCore
+} from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { bundledLanguages, bundledLanguagesAlias } from "shiki/langs";
+var SHARED_CODE_GROUP_CONTRACT = {
+  source: [
+    "::: code-group",
+    "```js:line-numbers=4 {2} [one.js]",
+    "console.log(1)",
+    "console.log(2)",
+    "```",
+    "```ts:no-line-numbers [two.ts]",
+    "const value: number = 2",
+    "```",
+    ":::"
+  ].join("\n"),
+  items: [
+    {
+      info: "js:line-numbers=4 {2} [one.js]",
+      code: "console.log(1)\nconsole.log(2)",
+      title: "one.js",
+      language: "js",
+      lineNumbers: true,
+      startLine: 4,
+      highlightedLines: [2]
+    },
+    {
+      info: "ts:no-line-numbers [two.ts]",
+      code: "const value: number = 2",
+      title: "two.ts",
+      language: "ts",
+      lineNumbers: false,
+      startLine: 1,
+      highlightedLines: []
+    }
+  ]
+};
+function parseCodeMeta(info = "", defaultLineNumbers = true) {
+  const language = info.trim().match(/^[^\s{\[]+/)?.[0]?.split(":")[0] || "text";
+  const highlightedLines = /* @__PURE__ */ new Set();
+  const ranges = info.match(/\{([\d,\s-]+)\}/)?.[1] || "";
+  for (const range of ranges.split(",")) {
+    const match = range.trim().match(/^(\d+)(?:-(\d+))?$/);
+    if (!match) continue;
+    const start = Number(match[1]);
+    const end = Number(match[2] ?? start);
+    if (start < 1 || end < start || end - start > 1e4) continue;
+    for (let line = start; line <= end; line++) highlightedLines.add(line);
+  }
+  return {
+    language,
+    title: info.match(/\[([^\]]*)\]/)?.[1]?.trim() || "",
+    lineNumbers: /:no-line-numbers\b/.test(info) ? false : /:line-numbers\b/.test(info) || defaultLineNumbers,
+    startLine: Math.max(1, Number(info.match(/:line-numbers=(\d+)/)?.[1] || 1)),
+    highlightedLines: [...highlightedLines].sort((a, b) => a - b)
+  };
+}
+var singleton;
+var ready;
+var loading = /* @__PURE__ */ new Map();
+function normalizeCodeLanguage(language) {
+  const id = language.toLowerCase();
+  if (id === "plain" || id === "txt" || id === "plaintext" || !id)
+    return "text";
+  if (id in bundledLanguages || id in bundledLanguagesAlias) return id;
+  return "text";
+}
+async function prepareCodeHighlighter(languages = []) {
+  singleton ??= createHighlighterCore({
+    engine: createJavaScriptRegexEngine(),
+    themes: [
+      import("shiki/themes/github-light.mjs"),
+      import("shiki/themes/github-dark.mjs")
+    ],
+    langs: []
+  }).then((highlighter2) => ready = highlighter2);
+  const highlighter = await singleton;
+  await Promise.all(
+    languages.map(async (requested) => {
+      const language = normalizeCodeLanguage(requested);
+      if (language === "text" || highlighter.getLoadedLanguages().includes(language))
+        return;
+      let pending = loading.get(language);
+      if (!pending) {
+        const loader = bundledLanguages[language] ?? bundledLanguagesAlias[language];
+        if (!loader) return;
+        pending = highlighter.loadLanguage(loader).then(() => void 0);
+        loading.set(language, pending);
+        pending.catch(() => loading.delete(language));
+      }
+      await pending;
+    })
+  );
+  return highlighter;
+}
+function transformers(meta) {
+  return [
+    {
+      name: "tnotes-code-meta",
+      pre(node) {
+        this.addClassToHast(node, "tn-code-highlight");
+        node.properties.tabindex = 0;
+      },
+      line(node, line) {
+        node.properties["data-line"] = String(meta.startLine + line - 1);
+        if (meta.highlightedLines.includes(line))
+          this.addClassToHast(node, "highlighted");
+      }
+    }
+  ];
+}
+function highlightCodeSync(code, info = "") {
+  if (!ready)
+    throw new Error("Call prepareCodeHighlighter before rendering Markdown");
+  const meta = parseCodeMeta(info);
+  const normalizedLanguage = normalizeCodeLanguage(meta.language);
+  const language = ready.getLoadedLanguages().includes(normalizedLanguage) ? normalizedLanguage : "text";
+  return ready.codeToHtml(code.replace(/\n$/, ""), {
+    lang: language,
+    themes: { light: "github-light", dark: "github-dark" },
+    defaultColor: false,
+    transformers: transformers(meta)
+  });
+}
+async function highlightCode(code, info = "") {
+  await prepareCodeHighlighter([parseCodeMeta(info).language]);
+  return highlightCodeSync(code, info);
+}
+export {
+  SHARED_CODE_GROUP_CONTRACT,
+  highlightCode,
+  highlightCodeSync,
+  normalizeCodeLanguage,
+  parseCodeMeta,
+  prepareCodeHighlighter
+};

package/dist/components/Footprints/parse.d.ts

@@ -0,0 +1,17 @@
+/** Parse `::: footprints` containers into props for the shared Footprints UI. */
+interface FootprintsPayload {
+    times: number[];
+    paragraphs: string[];
+    images: string[];
+    otherInfo: string;
+}
+/** `2025-01-22 23:47` / `2025-01-22` → [y,m,d,h?,min?,s?] */
+declare function parseFootprintsDatetime(meta: string): number[];
+/**
+ * Parse a full container source (`::: footprints …` … `:::`).
+ */
+declare function parseFootprintsSource(source: string): FootprintsPayload;
+/** Rebuild canonical `::: footprints` source from structured fields. */
+declare function rebuildFootprintsSource(payload: FootprintsPayload): string;
+
+export { type FootprintsPayload, parseFootprintsDatetime, parseFootprintsSource, rebuildFootprintsSource };

package/dist/components/Footprints/parse.js

@@ -0,0 +1,105 @@
+// src/components/Footprints/parse.ts
+function parseFootprintsDatetime(meta) {
+  const m = meta.trim().match(
+    /^(\d{4})-(\d{1,2})-(\d{1,2})(?:\s+(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?$/
+  );
+  if (!m) return [];
+  const parts = [Number(m[1]), Number(m[2]), Number(m[3])];
+  if (m[4] !== void 0) {
+    parts.push(Number(m[4]), Number(m[5]));
+    if (m[6] !== void 0) parts.push(Number(m[6]));
+  }
+  return parts;
+}
+function formatDatetime(times) {
+  if (times.length < 2) return "";
+  const [y, m, d, h, min, s] = times;
+  let out = `${String(y).padStart(4, "0")}-${String(m).padStart(2, "0")}`;
+  if (d !== void 0) out += `-${String(d).padStart(2, "0")}`;
+  if (h !== void 0 && min !== void 0) {
+    out += ` ${String(h).padStart(2, "0")}:${String(min).padStart(2, "0")}`;
+    if (s !== void 0) out += `:${String(s).padStart(2, "0")}`;
+  }
+  return out;
+}
+function parseFootprintsSource(source) {
+  const normalized = source.replace(/\r\n?/g, "\n");
+  const lines = normalized.split("\n");
+  const open = lines[0]?.match(/^ {0,3}:{3,}\s*footprints(?:\s+(.*))?$/i);
+  const times = parseFootprintsDatetime((open?.[1] ?? "").trim());
+  let end = lines.length - 1;
+  while (end > 0 && !/^ {0,3}:{3,}\s*$/.test(lines[end])) end -= 1;
+  const bodyLines = lines.slice(1, end);
+  const paragraphs = [];
+  const images = [];
+  let otherInfo = "";
+  let buf = [];
+  let inOther = false;
+  const flush = () => {
+    const text = buf.join("\n").trim();
+    buf = [];
+    if (!text) return;
+    if (inOther) {
+      otherInfo = otherInfo ? `${otherInfo}
+${text}` : text;
+      return;
+    }
+    const imgOnly = text.match(/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)$/);
+    if (imgOnly) {
+      images.push(imgOnly[2]);
+      return;
+    }
+    const parts = text.split("\n");
+    let allImg = true;
+    const blockImgs = [];
+    for (const line of parts) {
+      const m = line.trim().match(/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)$/);
+      if (m) blockImgs.push(m[2]);
+      else if (line.trim()) {
+        allImg = false;
+        break;
+      }
+    }
+    if (allImg && blockImgs.length) {
+      images.push(...blockImgs);
+      return;
+    }
+    paragraphs.push(text);
+  };
+  for (const line of bodyLines) {
+    if (line.trim() === "---") {
+      flush();
+      inOther = true;
+      continue;
+    }
+    if (line.trim() === "") {
+      flush();
+      continue;
+    }
+    buf.push(line);
+  }
+  flush();
+  return { times, paragraphs, images, otherInfo };
+}
+function rebuildFootprintsSource(payload) {
+  const meta = formatDatetime(payload.times);
+  const open = meta ? `::: footprints ${meta}` : "::: footprints";
+  const chunks = [open, ""];
+  for (const p of payload.paragraphs) {
+    chunks.push(p, "");
+  }
+  for (const src of payload.images) {
+    chunks.push(`![](${src})`, "");
+  }
+  if (payload.otherInfo.trim()) {
+    chunks.push("---", "", payload.otherInfo.trim(), "");
+  }
+  chunks.push(":::");
+  return `${chunks.join("\n")}
+`;
+}
+export {
+  parseFootprintsDatetime,
+  parseFootprintsSource,
+  rebuildFootprintsSource
+};

package/dist/components/Mindmap/markdown.d.ts

@@ -0,0 +1,20 @@
+interface MindmapFenceOptions {
+    title?: string;
+    initialExpandLevel?: number;
+}
+interface MindmapReference {
+    path: string;
+    title?: string;
+}
+/** Parse the canonical `mindmap [title] 2` fence metadata. */
+declare function parseMindmapFence(openLine: string): MindmapFenceOptions | null;
+/** @deprecated Mindmap fences no longer resolve `<<<` includes; kept for body-include parsers / tests. */
+declare function parseMindmapReference(line: string): MindmapReference | null;
+interface NormalizeMindmapOptions {
+    title?: string;
+    defaultTitle?: string;
+}
+/** Ensure canonical mindmap Markdown has exactly one H1 root title. */
+declare function normalizeMindmapMarkdown(source: string, options?: NormalizeMindmapOptions): string;
+
+export { type MindmapFenceOptions, type MindmapReference, type NormalizeMindmapOptions, normalizeMindmapMarkdown, parseMindmapFence, parseMindmapReference };

package/dist/components/Mindmap/markdown.js

@@ -0,0 +1,60 @@
+// src/components/Mindmap/markdown.ts
+function cleanHeadingText(value) {
+  return value.trim().replace(/\s+#+\s*$/, "").trim();
+}
+function parseMindmapFence(openLine) {
+  const fenceBody = openLine.trim().replace(/^`+\s*/, "");
+  const nameMatch = fenceBody.match(/^mindmap(?=\s|\[|$)/);
+  if (!nameMatch) return null;
+  let rest = fenceBody.slice(nameMatch[0].length).trim();
+  const options = {};
+  const titleMatch = rest.match(/\[([^\]]+)\]/);
+  if (titleMatch) {
+    options.title = cleanHeadingText(titleMatch[1]) || void 0;
+    rest = `${rest.slice(0, titleMatch.index)} ${rest.slice((titleMatch.index ?? 0) + titleMatch[0].length)}`.trim();
+  }
+  if (rest && !/^\d+$/.test(rest)) return null;
+  if (rest) {
+    options.initialExpandLevel = Math.max(1, Number(rest));
+  }
+  return options;
+}
+function parseMindmapReference(line) {
+  const match = line.trim().match(/^<<<\s+(.+?)\s*$/);
+  if (!match) return null;
+  let rest = match[1].trim();
+  let title;
+  const titleMatch = rest.match(/\s+\[([^\]]+)\]\s*$/);
+  if (titleMatch) {
+    title = cleanHeadingText(titleMatch[1]) || void 0;
+    rest = rest.slice(0, titleMatch.index).trim();
+  }
+  const path = rest.replace(/^(?:"([\s\S]*)"|'([\s\S]*)')$/, "$1$2").trim();
+  return path ? { path, title } : null;
+}
+function normalizeMindmapMarkdown(source, options = {}) {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  let existingTitle = "";
+  let rootIndex = -1;
+  for (let index = 0; index < lines.length; index++) {
+    const match = lines[index].match(/^\s{0,3}#(?!#)\s+(.+?)\s*$/);
+    if (!match) continue;
+    existingTitle = cleanHeadingText(match[1]);
+    rootIndex = index;
+    break;
+  }
+  const rootTitle = cleanHeadingText(options.title || existingTitle || options.defaultTitle || "root") || "root";
+  const body = lines.filter((_, index) => index !== rootIndex);
+  while (body[0]?.trim() === "") body.shift();
+  while (body[body.length - 1]?.trim() === "") body.pop();
+  return body.length > 0 ? `# ${rootTitle}
+
+${body.join("\n")}
+` : `# ${rootTitle}
+`;
+}
+export {
+  normalizeMindmapMarkdown,
+  parseMindmapFence,
+  parseMindmapReference
+};

package/dist/markdown/image.d.ts

@@ -0,0 +1,33 @@
+/** Shared image caption, width, and alignment helpers for SSG and Desk. */
+type ImageAlign = 'left' | 'center' | 'right';
+interface ImageMarkdown {
+    alt: string;
+    src: string;
+    title?: string;
+    /** Normalized CSS size, e.g. `50%` or `400px`. Empty means natural width. */
+    width?: string;
+    /** Omitted or `left` is the default and is not written to markdown. */
+    align?: ImageAlign;
+}
+interface ImageAttrs {
+    width: string;
+    align: ImageAlign;
+    rest: string;
+}
+declare function normalizeImageAlign(raw: string): ImageAlign;
+declare function parseImageAttrs(text: string): ImageAttrs;
+declare function parseImageWidthAttr(text: string): {
+    width: string;
+    rest: string;
+};
+declare function normalizeImageWidth(raw: string): string;
+/** Logical CSS px for a pasted bitmap, folding device pixel ratio (4K/retina). */
+declare function pasteDisplayWidthPx(naturalWidth: number, devicePixelRatio?: number): string;
+declare function formatImageWidthAttr(width: string): string;
+declare function formatImageAttrs(attrs: {
+    width?: string;
+    align?: ImageAlign | string;
+}): string;
+declare function serializeImageMarkdown(image: ImageMarkdown): string;
+
+export { type ImageAlign, type ImageAttrs, type ImageMarkdown, formatImageAttrs, formatImageWidthAttr, normalizeImageAlign, normalizeImageWidth, parseImageAttrs, parseImageWidthAttr, pasteDisplayWidthPx, serializeImageMarkdown };

package/dist/markdown/image.js

@@ -0,0 +1,83 @@
+// src/markdown/image.ts
+var ATTR_BLOCK = /^\s*\{([^}]*)\}\s*$/i;
+function normalizeImageAlign(raw) {
+  const value = raw.trim().toLowerCase();
+  if (value === "center" || value === "middle") return "center";
+  if (value === "right") return "right";
+  return "left";
+}
+function parseImageAttrs(text) {
+  const match = text.match(ATTR_BLOCK);
+  if (!match) return { width: "", align: "left", rest: text };
+  const body = match[1].trim();
+  if (!body) return { width: "", align: "left", rest: "" };
+  if (!/(?:^|[\s,])(?:w|width|align|a)\s*=/i.test(` ${body}`)) {
+    return { width: "", align: "left", rest: text };
+  }
+  let width = "";
+  let align = "left";
+  for (const part of body.split(/[\s,]+/).filter(Boolean)) {
+    const eq = part.indexOf("=");
+    if (eq < 0) continue;
+    const key = part.slice(0, eq).trim().toLowerCase();
+    const value = part.slice(eq + 1).trim();
+    if (key === "w" || key === "width") width = normalizeImageWidth(value);
+    else if (key === "align" || key === "a") align = normalizeImageAlign(value);
+  }
+  return { width, align, rest: "" };
+}
+function parseImageWidthAttr(text) {
+  const parsed = parseImageAttrs(text);
+  return { width: parsed.width, rest: parsed.rest };
+}
+function normalizeImageWidth(raw) {
+  const value = raw.trim();
+  if (!value) return "";
+  const pixels = value.match(/^(\d+(?:\.\d+)?)px$/i);
+  if (pixels) {
+    const amount2 = Number(pixels[1]);
+    if (!Number.isFinite(amount2) || amount2 < 16) return "";
+    return `${Math.round(amount2)}px`;
+  }
+  const percent = value.match(/^(\d+(?:\.\d+)?)%?$/);
+  if (!percent) return "";
+  const amount = Number(percent[1]);
+  if (!Number.isFinite(amount) || amount <= 0 || amount > 100) return "";
+  const normalized = Number.isInteger(amount) ? String(amount) : String(Math.round(amount * 100) / 100);
+  return `${normalized}%`;
+}
+function pasteDisplayWidthPx(naturalWidth, devicePixelRatio = 1) {
+  if (!Number.isFinite(naturalWidth) || naturalWidth <= 0) return "";
+  const dpr = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
+  return normalizeImageWidth(`${Math.round(naturalWidth / dpr)}px`);
+}
+function formatImageWidthAttr(width) {
+  return formatImageAttrs({ width, align: "left" });
+}
+function formatImageAttrs(attrs) {
+  const width = normalizeImageWidth(attrs.width ?? "");
+  const align = normalizeImageAlign(attrs.align ?? "");
+  const parts = [];
+  if (width) parts.push(`w=${width}`);
+  if (align !== "left") parts.push(`align=${align}`);
+  return parts.length > 0 ? `{${parts.join(" ")}}` : "";
+}
+function serializeImageMarkdown(image) {
+  const alt = image.alt.replaceAll("[", "").replaceAll("]", "");
+  const title = image.title?.trim() ? ` "${image.title.replaceAll('"', "")}"` : "";
+  const suffix = formatImageAttrs({
+    width: image.width ?? "",
+    align: image.align ?? "left"
+  });
+  return `![${alt}](${image.src}${title})${suffix ? ` ${suffix}` : ""}`;
+}
+export {
+  formatImageAttrs,
+  formatImageWidthAttr,
+  normalizeImageAlign,
+  normalizeImageWidth,
+  parseImageAttrs,
+  parseImageWidthAttr,
+  pasteDisplayWidthPx,
+  serializeImageMarkdown
+};