@docen/core 0.5.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Demo Macro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# @docen/core
+
+![npm version](https://img.shields.io/npm/v/@docen/core)
+![npm downloads](https://img.shields.io/npm/dw/@docen/core)
+![npm license](https://img.shields.io/npm/l/@docen/core)
+
+> Pure rendering layer mapping OOXML drawing data (image / shape / chart / smartart) to LeaferJS / ECharts elements, shared across the docx (Tiptap), pptx (LeaferJS), and xlsx (RevoGrid) editors.
+
+> Consumed by [`@docen/editor`](../editor/README.md), which mounts these elements in `<docen-image>` web components with selection, resize, and rotate UX.
+
+## Features
+
+- 🖼️ **Image** — `renderImage` / `parseImage` map OOXML `<pic:pic>` (blip + transform + srcRect crop + outline) to LeaferJS `Image` elements
+- 📐 **Geometry** — EMU ↔ px, srcRect → clip, transform math as stateless functions (reuse `@office-open/core`'s `convertEmuToPixels`)
+- 🎨 **Style** — `renderFill` / `renderOutline` map OOXML `FillOptions` / `OutlineOptions` to LeaferJS paints
+- 📤 **Export** — `exportImage` / `exportCanvas` wrap LeaferJS export (canvas → png/jpg base64) for DOCX `<a:blip>` round-trip
+- 🧩 **Headless-ready** — DOM-free functions run identically in the browser and in Node (`@leafer-ui/node`) for SSR / thumbnails
+
+## Installation
+
+```bash
+# Install with pnpm
+$ pnpm add @docen/core
+
+# Install with npm
+$ npm install @docen/core
+```
+
+## Quick Start
+
+```typescript
+import { renderImage, parseImage } from "@docen/core/image";
+import { exportImage } from "@docen/core/export";
+import { App, Image } from "leafer-ui";
+
+// Render an OOXML image to LeaferJS
+const options = renderImage({
+  src: "data:image/png;base64,...",
+  width: 400,
+  height: 300,
+  rotation: 15,
+  crop: { left: 10000, top: 5000 }, // permyriad (0–100000 per side)
+});
+
+const app = new App({ view, editor: {} });
+const image = new Image(options);
+app.add(image);
+
+// Read back the edited geometry after a user resize/rotate
+const { width, height, rotation } = parseImage(image);
+
+// Export the canvas to a base64 data URL for DOCX round-trip
+const dataUrl = await exportImage(app, "png");
+```
+
+## Architecture
+
+```
+@office-open/core   OOXML data model (read / write .docx .pptx .xlsx)
+        ↓
+@docen/core         OOXML data ↔ visual elements  (this package)
+        ↓
+@docen/editor       UI components + NodeViews + interaction
+```
+
+`@docen/core` is the visual counterpart of `@office-open/core`'s data model. It owns the `render*` (data → element) and `parse*` (element → data) mappings plus geometry math and PNG/SVG export. It deliberately owns **no editing semantics**.
+
+## License
+
+- [MIT](LICENSE) &copy; [Demo Macro](https://www.demomacro.com/)

package/dist/export.d.mts

@@ -0,0 +1,31 @@
+import { IUI } from "leafer-ui";
+
+//#region src/export.d.ts
+/** Format accepted by {@link exportImage} / {@link exportCanvas}. */
+type ExportFormat = "png" | "jpg" | "jpeg";
+/** Options forwarded to LeaferJS `element.export()`. */
+interface ExportRequestOptions {
+  /** Pixel ratio for high-DPI export (e.g. 2 for retina). Default 1. */
+  pixelRatio?: number;
+  /** JPEG quality 0–1 (ignored for png). Default 0.92. */
+  quality?: number;
+}
+/**
+ * Export a LeaferJS element to a base64 data URL.
+ *
+ * The element must come from a LeaferJS app that has loaded `@leafer-in/export`
+ * (the `@docen/editor` image/shape/chart editor components set this up). Returns
+ * a `data:image/<format>;base64,…` string ready to drop into an `<img src>` or
+ * an OOXML `<a:blip>` payload.
+ */
+declare const exportImage: (element: IUI, format?: ExportFormat, options?: ExportRequestOptions) => Promise<string>;
+/**
+ * Export a LeaferJS element synchronously.
+ *
+ * Only works when all async-loaded images in the element have finished decoding
+ * (the caller's responsibility). Prefer {@link exportImage} unless you are on a
+ * hot path that has already awaited image loads.
+ */
+declare const exportCanvas: (element: IUI, format?: ExportFormat, options?: ExportRequestOptions) => string;
+//#endregion
+export { ExportFormat, ExportRequestOptions, exportCanvas, exportImage };

package/dist/export.mjs

@@ -0,0 +1,38 @@
+//#region src/export.ts
+/** Build the LeaferJS `IExportOptions` from our simpler {@link
+*  ExportRequestOptions}. */
+const toExportOptions = (options) => ({
+	pixelRatio: options.pixelRatio ?? 1,
+	quality: options.quality ?? .92
+});
+/** Coerce a LeaferJS export result's `data` field to a base64 data URL string.
+*  Returns "" when the plugin returned a non-string (canvas / blob) — callers
+*  should then use the element's `export(filename)` form for file output. */
+const toDataUrl = (data) => typeof data === "string" ? data : "";
+/**
+* Export a LeaferJS element to a base64 data URL.
+*
+* The element must come from a LeaferJS app that has loaded `@leafer-in/export`
+* (the `@docen/editor` image/shape/chart editor components set this up). Returns
+* a `data:image/<format>;base64,…` string ready to drop into an `<img src>` or
+* an OOXML `<a:blip>` payload.
+*/
+const exportImage = async (element, format = "png", options = {}) => {
+	const fmt = format === "jpeg" ? "jpg" : format;
+	const result = await element.export(fmt, toExportOptions(options));
+	return toDataUrl(result.data);
+};
+/**
+* Export a LeaferJS element synchronously.
+*
+* Only works when all async-loaded images in the element have finished decoding
+* (the caller's responsibility). Prefer {@link exportImage} unless you are on a
+* hot path that has already awaited image loads.
+*/
+const exportCanvas = (element, format = "png", options = {}) => {
+	const fmt = format === "jpeg" ? "jpg" : format;
+	const result = element.syncExport(fmt, toExportOptions(options));
+	return toDataUrl(result.data);
+};
+//#endregion
+export { exportCanvas, exportImage };

package/dist/geometry.d.mts

@@ -0,0 +1,53 @@
+//#region src/geometry.d.ts
+/**
+ * @docen/core/geometry — pure geometry math for OOXML drawings.
+ *
+ * All functions are stateless and carry no DOM/LeaferJS dependency, so they run
+ * identically in the browser and in Node (SSR / headless export). EMU/px
+ * conversion delegates to `@office-open/core/util` so there is one source of
+ * truth for the EMU-per-pixel constant.
+ *
+ * @module
+ */
+/** Per-axis visible fraction produced by {@link cropFractions}. */
+interface CropFractions {
+  /** Visible width fraction (0–1); 1 when horizontally uncropped. */
+  visibleW: number;
+  /** Visible height fraction (0–1); 1 when vertically uncropped. */
+  visibleH: number;
+  /** Left offset fraction (0–1) of the cropped-out region. */
+  left: number;
+  /** Top offset fraction (0–1) of the cropped-out region. */
+  top: number;
+}
+/** Convert OOXML permyriad (0–100000) to a 0–1 fraction. */
+declare const permyriadToFraction: (value: number | undefined) => number;
+/** True when any side of an OOXML srcRect is non-zero. */
+declare const hasCrop: (crop: {
+  left?: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+} | null | undefined) => boolean;
+/**
+ * Resolve an OOXML srcRect (permyriad per side) into per-axis visible/offset
+ * fractions.
+ *
+ * Mirrors the math in `@docen/docx` `renderCropAttrs` so the canvas crop box
+ * matches the HTML crop box byte-for-byte. Returns `{ visibleW:1, visibleH:1,
+ * left:0, top:0 }` when nothing is cropped.
+ */
+declare const cropFractions: (crop: {
+  left?: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+} | null | undefined) => CropFractions;
+/** Convert an EMU value to CSS pixels (rounded for stable layout). */
+declare const emuToPx: (emu: number | undefined) => number;
+/** Convert CSS pixels to EMU (for writing geometry back to OOXML). */
+declare const pxToEmu: (px: number) => number;
+/** Clamp a dimension to a positive, finite number, falling back to `fallback`. */
+declare const clampDimension: (value: number | null | undefined, fallback: number) => number;
+//#endregion
+export { CropFractions, clampDimension, cropFractions, emuToPx, hasCrop, permyriadToFraction, pxToEmu };

package/dist/geometry.mjs

@@ -0,0 +1,50 @@
+import { convertEmuToPixels, convertToEmu } from "@office-open/core/util";
+//#region src/geometry.ts
+/**
+* @docen/core/geometry — pure geometry math for OOXML drawings.
+*
+* All functions are stateless and carry no DOM/LeaferJS dependency, so they run
+* identically in the browser and in Node (SSR / headless export). EMU/px
+* conversion delegates to `@office-open/core/util` so there is one source of
+* truth for the EMU-per-pixel constant.
+*
+* @module
+*/
+/** Convert OOXML permyriad (0–100000) to a 0–1 fraction. */
+const permyriadToFraction = (value) => (value ?? 0) / 1e5;
+/** True when any side of an OOXML srcRect is non-zero. */
+const hasCrop = (crop) => Boolean(crop && (crop.left || crop.top || crop.right || crop.bottom));
+/**
+* Resolve an OOXML srcRect (permyriad per side) into per-axis visible/offset
+* fractions.
+*
+* Mirrors the math in `@docen/docx` `renderCropAttrs` so the canvas crop box
+* matches the HTML crop box byte-for-byte. Returns `{ visibleW:1, visibleH:1,
+* left:0, top:0 }` when nothing is cropped.
+*/
+const cropFractions = (crop) => {
+	if (!crop) return {
+		visibleW: 1,
+		visibleH: 1,
+		left: 0,
+		top: 0
+	};
+	const left = permyriadToFraction(crop.left);
+	const top = permyriadToFraction(crop.top);
+	const right = permyriadToFraction(crop.right);
+	const bottom = permyriadToFraction(crop.bottom);
+	return {
+		visibleW: Math.max(0, 1 - left - right),
+		visibleH: Math.max(0, 1 - top - bottom),
+		left,
+		top
+	};
+};
+/** Convert an EMU value to CSS pixels (rounded for stable layout). */
+const emuToPx = (emu) => Math.round(convertEmuToPixels(emu ?? 0));
+/** Convert CSS pixels to EMU (for writing geometry back to OOXML). */
+const pxToEmu = (px) => convertToEmu(px);
+/** Clamp a dimension to a positive, finite number, falling back to `fallback`. */
+const clampDimension = (value, fallback) => typeof value === "number" && value > 0 && Number.isFinite(value) ? value : fallback;
+//#endregion
+export { clampDimension, cropFractions, emuToPx, hasCrop, permyriadToFraction, pxToEmu };

package/dist/image.d.mts

@@ -0,0 +1,73 @@
+import { IImageInputData, IUI } from "leafer-ui";
+import { OutlineOptions, SourceRectangleOptions } from "@office-open/core/drawingml";
+
+//#region src/image.d.ts
+/** Minimal subset of `ImageAttrs` (from `@docen/docx`) that the renderer needs.
+ *  Declared locally so @docen/core has no hard dependency on the docx engine —
+ *  pptx/xlsx image data can conform to the same shape. The `crop`/`outline`
+ *  fields reuse `@office-open/core`'s native types (`SourceRectangleOptions` /
+ *  `OutlineOptions`) instead of redefining them. */
+interface RenderImageInput {
+  /** Image source as a URL or `data:` URL. */
+  src: string;
+  /** X position in CSS pixels (defaults to 0). */
+  x?: number | null;
+  /** Y position in CSS pixels (defaults to 0). */
+  y?: number | null;
+  /** Display width in CSS pixels (OOXML extent already converted). */
+  width: number | null | undefined;
+  /** Display height in CSS pixels (OOXML extent already converted). */
+  height: number | null | undefined;
+  /** Clockwise rotation in degrees (OOXML `transformation.rotation`). */
+  rotation?: number | null;
+  /** OOXML srcRect crop (`a:srcRect`), permyriad per side. */
+  crop?: SourceRectangleOptions | null;
+  /** OOXML outline (`a:ln`). */
+  outline?: OutlineOptions | null;
+}
+/** Geometric fields the editor reads back after a user move/resize/rotate. */
+interface ParsedImageOutput {
+  /** X position in CSS pixels (LeaferJS local element.x). */
+  x: number;
+  /** Y position in CSS pixels (LeaferJS local element.y). */
+  y: number;
+  /** New display width in CSS pixels. */
+  width: number;
+  /** New display height in CSS pixels. */
+  height: number;
+  /** New clockwise rotation in degrees, normalized to [0, 360). */
+  rotation: number;
+}
+/**
+ * Build the LeaferJS `Image` element options (`IImageInputData`) for an OOXML
+ * image.
+ *
+ * Width / height default to 400×300 when absent (the same placeholder ratio the
+ * engine's `renderHTML` uses). Rotation is normalized to [0, 360). The OOXML
+ * outline is mapped to LeaferJS `stroke` / `strokeWidth` / `dashPattern` via
+ * {@link renderOutline}. srcRect crop is NOT included here (LeaferJS's Image
+ * ignores an unknown `crop` key) — the editor component reads `input.crop`
+ * and wraps the image in a Box{overflow:'hide'} sized via {@link renderCropBox}.
+ */
+declare const renderImage: (input: RenderImageInput) => IImageInputData;
+/** Read the user-moved/resized geometry of a LeaferJS element back into the
+ *  OOXML data shape. Use this in the editor's transform-change handler.
+ *
+ *  Reads LOCAL geometry (element.x/y/width/height) rather than `boxBounds`:
+ *  boxBounds is the world-space axis-aligned bounding box, which swaps/enlarges
+ *  under rotation — reading it after rotate() would bleed the rotated AABB back
+ *  into width/height and corrupt the exported extent. Local width/height are
+ *  unchanged by rotation (only `rotation` changes), so a pure rotate() round-
+ *  trips without dimension drift (edit == render == export). */
+declare const parseImage: (element: IUI) => ParsedImageOutput;
+/** Compute the LeaferJS inner-image size + offset that realize a srcRect crop
+ *  inside an outer box of the given width/height. Used by the editor component
+ *  to lay out a crop frame (mirrors `@docen/docx` `renderCropAttrs` math). */
+declare const renderCropBox: (crop: SourceRectangleOptions, width: number, height: number) => {
+  innerWidth: number;
+  innerHeight: number;
+  offsetX: number;
+  offsetY: number;
+};
+//#endregion
+export { ParsedImageOutput, RenderImageInput, parseImage, renderCropBox, renderImage };

package/dist/image.mjs

@@ -0,0 +1,76 @@
+import { clampDimension, cropFractions } from "./geometry.mjs";
+import { renderOutline } from "./style.mjs";
+//#region src/image.ts
+/** Default display size when width/height are missing or invalid (matches the
+*  `@docen/docx` image renderHTML placeholder ratio 4:3). */
+const DEFAULT_WIDTH = 400;
+const DEFAULT_HEIGHT = 300;
+/** Normalize a rotation in degrees to [0, 360). */
+const normalizeRotation = (deg) => {
+	if (!deg || !Number.isFinite(deg)) return 0;
+	return (deg % 360 + 360) % 360;
+};
+/**
+* Build the LeaferJS `Image` element options (`IImageInputData`) for an OOXML
+* image.
+*
+* Width / height default to 400×300 when absent (the same placeholder ratio the
+* engine's `renderHTML` uses). Rotation is normalized to [0, 360). The OOXML
+* outline is mapped to LeaferJS `stroke` / `strokeWidth` / `dashPattern` via
+* {@link renderOutline}. srcRect crop is NOT included here (LeaferJS's Image
+* ignores an unknown `crop` key) — the editor component reads `input.crop`
+* and wraps the image in a Box{overflow:'hide'} sized via {@link renderCropBox}.
+*/
+const renderImage = (input) => {
+	const width = clampDimension(input.width, DEFAULT_WIDTH);
+	const height = clampDimension(input.height, DEFAULT_HEIGHT);
+	const rotation = normalizeRotation(input.rotation);
+	const outline = renderOutline(input.outline);
+	const options = {
+		url: input.src,
+		x: input.x ?? 0,
+		y: input.y ?? 0,
+		width,
+		height,
+		rotation,
+		editable: true
+	};
+	if (outline) {
+		options.stroke = outline.stroke;
+		options.strokeWidth = outline.strokeWidth;
+		options.dashPattern = outline.dashPattern;
+	}
+	return options;
+};
+/** Read the user-moved/resized geometry of a LeaferJS element back into the
+*  OOXML data shape. Use this in the editor's transform-change handler.
+*
+*  Reads LOCAL geometry (element.x/y/width/height) rather than `boxBounds`:
+*  boxBounds is the world-space axis-aligned bounding box, which swaps/enlarges
+*  under rotation — reading it after rotate() would bleed the rotated AABB back
+*  into width/height and corrupt the exported extent. Local width/height are
+*  unchanged by rotation (only `rotation` changes), so a pure rotate() round-
+*  trips without dimension drift (edit == render == export). */
+const parseImage = (element) => ({
+	x: Math.round(element.x ?? 0),
+	y: Math.round(element.y ?? 0),
+	width: Math.round(element.width ?? 0),
+	height: Math.round(element.height ?? 0),
+	rotation: normalizeRotation(element.rotation ?? 0)
+});
+/** Compute the LeaferJS inner-image size + offset that realize a srcRect crop
+*  inside an outer box of the given width/height. Used by the editor component
+*  to lay out a crop frame (mirrors `@docen/docx` `renderCropAttrs` math). */
+const renderCropBox = (crop, width, height) => {
+	const { visibleW, visibleH, left, top } = cropFractions(crop);
+	const innerWidth = visibleW > 0 ? width / visibleW : width;
+	const innerHeight = visibleH > 0 ? height / visibleH : height;
+	return {
+		innerWidth,
+		innerHeight,
+		offsetX: -(left * innerWidth),
+		offsetY: -(top * innerHeight)
+	};
+};
+//#endregion
+export { parseImage, renderCropBox, renderImage };

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+import { ExportFormat, ExportRequestOptions, exportCanvas, exportImage } from "./export.mjs";
+import { CropFractions, clampDimension, cropFractions, emuToPx, hasCrop, permyriadToFraction, pxToEmu } from "./geometry.mjs";
+import { ParsedImageOutput, RenderImageInput, parseImage, renderCropBox, renderImage } from "./image.mjs";
+import { LeaferStroke, normalizeColorToHex, renderFill, renderOutline } from "./style.mjs";
+export { CropFractions, ExportFormat, ExportRequestOptions, LeaferStroke, ParsedImageOutput, RenderImageInput, clampDimension, cropFractions, emuToPx, exportCanvas, exportImage, hasCrop, normalizeColorToHex, parseImage, permyriadToFraction, pxToEmu, renderCropBox, renderFill, renderImage, renderOutline };

package/dist/index.mjs

@@ -0,0 +1,5 @@
+import { clampDimension, cropFractions, emuToPx, hasCrop, permyriadToFraction, pxToEmu } from "./geometry.mjs";
+import { normalizeColorToHex, renderFill, renderOutline } from "./style.mjs";
+import { parseImage, renderCropBox, renderImage } from "./image.mjs";
+import { exportCanvas, exportImage } from "./export.mjs";
+export { clampDimension, cropFractions, emuToPx, exportCanvas, exportImage, hasCrop, normalizeColorToHex, parseImage, permyriadToFraction, pxToEmu, renderCropBox, renderFill, renderImage, renderOutline };

package/dist/style.d.mts

@@ -0,0 +1,30 @@
+import { FillOptions, OutlineOptions } from "@office-open/core/drawingml";
+
+//#region src/style.d.ts
+/** Normalize any OOXML color value (bare hex, #hex, named, or { val }) to #RRGGBB.
+ *  Returns undefined for "auto" (no CSS/LeaferJS equivalent) and unrecognized input. */
+declare const normalizeColorToHex: (color: unknown) => string | undefined;
+/** OOXML fill → LeaferJS `fill` paint value (a hex color string, or undefined).
+ *  Solid fills only at this stage; none/gradient/blip/pattern return undefined. */
+declare const renderFill: (fill: FillOptions | null | undefined) => string | undefined;
+/** LeaferJS stroke properties (`IStrokeStyle` + `stroke` color), emitted by
+ *  {@link renderOutline}. These map directly onto `IUIBaseInputData` stroke
+ *  fields — no custom wrapper type. */
+interface LeaferStroke {
+  /** Hex color (#RRGGBB), defaulting to black when the OOXML color is "auto". */
+  stroke: string;
+  /** Stroke width in pixels. */
+  strokeWidth: number;
+  /** Dash pattern as a number array (Canvas `setLineDash` contract). Undefined
+   *  means a solid line (LeaferJS default) — never set it to a string, since
+   *  `ctx.setLineDash` rejects non-numeric input. */
+  dashPattern?: number[];
+}
+/** OOXML outline → LeaferJS stroke properties. `noFill` and absent outlines
+ *  return undefined. EMU widths are converted to px via the standard 9525
+ *  EMU/px ratio. The dash preset is collapsed to a `number[]` (Canvas
+ *  `setLineDash` contract) for the common OOXML dot/dash presets; full
+ *  PresetDash → dash-array mapping is stage 2. */
+declare const renderOutline: (outline: OutlineOptions | null | undefined) => LeaferStroke | undefined;
+//#endregion
+export { LeaferStroke, normalizeColorToHex, renderFill, renderOutline };

package/dist/style.mjs

@@ -0,0 +1,88 @@
+import { convertEmuToPixels } from "@office-open/core/util";
+//#region src/style.ts
+/** A small CSS-named-color table so OOXML bare hex / named colors resolve to
+*  #RRGGBB. Mirrors `@docen/docx` `normalizeColorToHex` — kept local so
+*  @docen/core has no dependency on the docx engine. */
+const CSS_COLORS = {
+	black: "#000000",
+	white: "#FFFFFF",
+	red: "#FF0000",
+	green: "#008000",
+	blue: "#0000FF",
+	yellow: "#FFFF00",
+	cyan: "#00FFFF",
+	magenta: "#FF00FF",
+	gray: "#808080",
+	grey: "#808080",
+	silver: "#C0C0C0",
+	maroon: "#800000",
+	olive: "#808000",
+	purple: "#800080",
+	teal: "#008080",
+	navy: "#000080",
+	orange: "#FFA500",
+	pink: "#FFC0CB",
+	brown: "#A52A2A",
+	lime: "#00FF00",
+	gold: "#FFD700",
+	aqua: "#00FFFF",
+	fuchsia: "#FF00FF",
+	indigo: "#4B0082",
+	violet: "#EE82EE",
+	coral: "#FF7F50",
+	salmon: "#FA8072",
+	tomato: "#FF6347"
+};
+/** Normalize any OOXML color value (bare hex, #hex, named, or { val }) to #RRGGBB.
+*  Returns undefined for "auto" (no CSS/LeaferJS equivalent) and unrecognized input. */
+const normalizeColorToHex = (color) => {
+	if (!color) return void 0;
+	if (typeof color === "object") {
+		const { val } = color;
+		return val ? normalizeColorToHex(val) : void 0;
+	}
+	if (typeof color !== "string") return void 0;
+	if (color === "auto") return void 0;
+	if (color.startsWith("#")) return color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`.toUpperCase() : color.toUpperCase();
+	if (/^[0-9A-Fa-f]{6}$/.test(color)) return `#${color.toUpperCase()}`;
+	if (/^[0-9A-Fa-f]{3}$/.test(color)) return `#${color[0]}${color[0]}${color[1]}${color[1]}${color[2]}${color[2]}`.toUpperCase();
+	return CSS_COLORS[color.toLowerCase()] ?? void 0;
+};
+/** Extract a hex color from a SolidFillOptions union member (rgb/scheme/hsl/…). */
+const solidColorValue = (color) => {
+	if (!color) return void 0;
+	if (typeof color === "string") return color;
+	const obj = color;
+	return obj.value ?? obj.val;
+};
+/** OOXML fill → LeaferJS `fill` paint value (a hex color string, or undefined).
+*  Solid fills only at this stage; none/gradient/blip/pattern return undefined. */
+const renderFill = (fill) => {
+	if (!fill) return void 0;
+	if (typeof fill === "string") return normalizeColorToHex(fill);
+	if (fill.type !== "solid") return void 0;
+	const color = typeof fill.color === "string" ? fill.color : solidColorValue(fill.color);
+	return normalizeColorToHex(color);
+};
+/** OOXML outline → LeaferJS stroke properties. `noFill` and absent outlines
+*  return undefined. EMU widths are converted to px via the standard 9525
+*  EMU/px ratio. The dash preset is collapsed to a `number[]` (Canvas
+*  `setLineDash` contract) for the common OOXML dot/dash presets; full
+*  PresetDash → dash-array mapping is stage 2. */
+const renderOutline = (outline) => {
+	if (!outline || outline.type === "noFill") return void 0;
+	const stroke = normalizeColorToHex(solidColorValue(outline.color)) ?? "#000000";
+	const emu = typeof outline.width === "number" ? outline.width : 9525;
+	const strokeWidth = Math.max(.5, convertEmuToPixels(emu));
+	const dash = outline.dash;
+	let dashPattern;
+	if (dash === "sysDot" || dash === "dot") dashPattern = [2, 4];
+	else if (dash === "sysDash" || dash === "dash" || dash === "sysDashDot") dashPattern = [8, 4];
+	return {
+		stroke,
+		strokeWidth,
+		dashPattern
+	};
+};
+//#endregion
+export { normalizeColorToHex, renderFill, renderOutline };

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@docen/core",
+  "version": "0.5.2",
+  "description": "Pure rendering layer mapping OOXML drawing data (image/shape/chart/smartart) to LeaferJS/ECharts elements, shared across docx/pptx/xlsx editors",
+  "keywords": [
+    "canvas",
+    "chart",
+    "docen",
+    "drawingml",
+    "echarts",
+    "graphics",
+    "image",
+    "leaferjs",
+    "office",
+    "ooxml",
+    "render",
+    "shape",
+    "smartart"
+  ],
+  "homepage": "https://github.com/DemoMacro/docen#readme",
+  "bugs": {
+    "url": "https://github.com/DemoMacro/docen/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Demo Macro",
+    "email": "abc@imst.xyz",
+    "url": "https://www.demomacro.com/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DemoMacro/docen.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./image": {
+      "types": "./dist/image.d.mts",
+      "import": "./dist/image.mjs"
+    },
+    "./geometry": {
+      "types": "./dist/geometry.d.mts",
+      "import": "./dist/geometry.mjs"
+    },
+    "./style": {
+      "types": "./dist/style.d.mts",
+      "import": "./dist/style.mjs"
+    },
+    "./export": {
+      "types": "./dist/export.d.mts",
+      "import": "./dist/export.mjs"
+    }
+  },
+  "dependencies": {
+    "@office-open/core": "0.10.13",
+    "leafer-ui": "2.2.0"
+  },
+  "scripts": {
+    "dev": "basis build --stub",
+    "build": "vp pack"
+  }
+}