@stll/folio-core 0.0.1-placeholder.0 → 0.1.0

package/dist/utils/formatToStyle.d.ts

@@ -0,0 +1,103 @@
+import { document_d_exports } from "../types/document.js";
+import { ColorValue } from "../types/colors.js";
+import { Properties } from "csstype";
+
+//#region src/utils/formatToStyle.d.ts
+type CSSProperties = Properties<string | number>;
+/**
+ * Convert TextFormatting to CSS properties for a run/span
+ *
+ * @param formatting - Text formatting from OOXML
+ * @param theme - Theme for resolving colors and fonts
+ * @returns React CSSProperties
+ */
+declare function textToStyle(formatting: document_d_exports.TextFormatting | undefined | null, theme?: document_d_exports.Theme | null): CSSProperties;
+/**
+ * Convert ParagraphFormatting to CSS properties
+ *
+ * @param formatting - Paragraph formatting from OOXML
+ * @param theme - Theme for resolving colors
+ * @returns React CSSProperties
+ */
+declare function paragraphToStyle(formatting: document_d_exports.ParagraphFormatting | undefined | null, theme?: document_d_exports.Theme | null): CSSProperties;
+/**
+ * Convert a BorderSpec to CSS border properties
+ *
+ * @param border - Border specification
+ * @param side - 'Top' | 'Bottom' | 'Left' | 'Right' | '' for all
+ * @param theme - Theme for color resolution
+ * @returns Partial CSSProperties with border styles
+ */
+declare function borderToStyle(border: document_d_exports.BorderSpec | undefined | null, side?: "Top" | "Bottom" | "Left" | "Right" | "", theme?: document_d_exports.Theme | null): CSSProperties;
+/**
+ * Convert ShadingProperties to background color
+ *
+ * @param shading - Shading properties
+ * @param theme - Theme for color resolution
+ * @returns CSS color string or empty string
+ */
+declare function resolveShadingFill(shading: document_d_exports.ShadingProperties | undefined | null, theme?: document_d_exports.Theme | null): string;
+/**
+ * Merge multiple CSSProperties objects
+ *
+ * Later objects override earlier ones for conflicting properties.
+ *
+ * @param styles - Array of CSSProperties objects
+ * @returns Merged CSSProperties
+ */
+declare function mergeStyles(...styles: (CSSProperties | undefined | null)[]): CSSProperties;
+/**
+ * Get CSS for a table cell based on formatting
+ *
+ * @param formatting - Table cell formatting
+ * @param theme - Theme for color resolution
+ * @returns CSSProperties for the cell
+ */
+declare function tableCellToStyle(formatting: {
+  verticalAlign?: "top" | "center" | "bottom";
+  textDirection?: string;
+  shading?: document_d_exports.ShadingProperties;
+  borders?: {
+    top?: document_d_exports.BorderSpec;
+    bottom?: document_d_exports.BorderSpec;
+    left?: document_d_exports.BorderSpec;
+    right?: document_d_exports.BorderSpec;
+  };
+  margins?: {
+    top?: {
+      value: number;
+      type: string;
+    };
+    bottom?: {
+      value: number;
+      type: string;
+    };
+    left?: {
+      value: number;
+      type: string;
+    };
+    right?: {
+      value: number;
+      type: string;
+    };
+  };
+} | undefined | null, theme?: document_d_exports.Theme | null): CSSProperties;
+/**
+ * Get CSS for page/section container
+ *
+ * @param sectionProps - Section properties
+ * @returns CSSProperties for the page container
+ */
+declare function sectionToStyle(sectionProps: {
+  pageWidth?: number;
+  pageHeight?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  background?: {
+    color?: ColorValue;
+  };
+} | undefined | null, theme?: document_d_exports.Theme | null): CSSProperties;
+//#endregion
+export { borderToStyle, mergeStyles, paragraphToStyle, resolveShadingFill, sectionToStyle, tableCellToStyle, textToStyle };

package/dist/utils/formatToStyle.js

@@ -0,0 +1,289 @@
+import { eighthsToPixels, formatPx, halfPointsToPixels, halfPointsToPoints, twipsToPixels } from "./units.js";
+import { resolveFontFamily, resolveThemeFont } from "./fontResolver.js";
+import { resolveColor, resolveHighlightToCss, resolveShadingColor } from "./colorResolver.js";
+//#region src/utils/formatToStyle.ts
+/**
+* Convert TextFormatting to CSS properties for a run/span
+*
+* @param formatting - Text formatting from OOXML
+* @param theme - Theme for resolving colors and fonts
+* @returns React CSSProperties
+*/
+function textToStyle(formatting, theme) {
+	if (!formatting) return {};
+	const style = {};
+	if (formatting.fontFamily) {
+		let fontName = null;
+		if (formatting.fontFamily.asciiTheme && theme?.fontScheme) fontName = resolveThemeFont(formatting.fontFamily.asciiTheme, theme.fontScheme);
+		if (!fontName) fontName = formatting.fontFamily.ascii || formatting.fontFamily.hAnsi || formatting.fontFamily.eastAsia || formatting.fontFamily.cs || null;
+		if (fontName) style.fontFamily = resolveFontFamily(fontName).cssFallback;
+	}
+	if (formatting.fontSize !== void 0) style.fontSize = `${halfPointsToPoints(formatting.fontSize)}pt`;
+	if (formatting.bold) style.fontWeight = "bold";
+	if (formatting.italic) style.fontStyle = "italic";
+	if (formatting.color) style.color = resolveColor(formatting.color, theme);
+	if (formatting.highlight && formatting.highlight !== "none") style.backgroundColor = resolveHighlightToCss(formatting.highlight);
+	if (formatting.shading) {
+		const shadingBg = resolveShadingFill(formatting.shading, theme);
+		if (shadingBg && style.backgroundColor === void 0) style.backgroundColor = shadingBg;
+	}
+	const decorations = [];
+	const decorationStyles = [];
+	const decorationColors = [];
+	if (formatting.underline && formatting.underline.style !== "none") {
+		decorations.push("underline");
+		const underlineStyle = mapUnderlineStyle(formatting.underline.style);
+		if (underlineStyle !== "solid") decorationStyles.push(underlineStyle);
+		if (formatting.underline.color) decorationColors.push(resolveColor(formatting.underline.color, theme));
+	}
+	if (formatting.strike) decorations.push("line-through");
+	if (formatting.doubleStrike) decorations.push("line-through");
+	if (decorations.length > 0) {
+		style.textDecoration = decorations.join(" ");
+		if (decorationStyles.length > 0) style.textDecorationStyle = decorationStyles[0];
+		if (decorationColors.length > 0) style.textDecorationColor = decorationColors[0];
+	}
+	if (formatting.vertAlign) switch (formatting.vertAlign) {
+		case "superscript":
+			style.verticalAlign = "super";
+			style.fontSize ??= "0.83em";
+			break;
+		case "subscript":
+			style.verticalAlign = "sub";
+			style.fontSize ??= "0.83em";
+			break;
+		case "baseline": break;
+		default: break;
+	}
+	if (formatting.position !== void 0 && formatting.position !== 0) {
+		const positionPx = halfPointsToPixels(formatting.position);
+		style.position = "relative";
+		style.top = formatPx(-positionPx);
+	}
+	if (formatting.allCaps) style.textTransform = "uppercase";
+	else if (formatting.smallCaps) style.fontVariant = "small-caps";
+	if (formatting.spacing !== void 0 && formatting.spacing !== 0) style.letterSpacing = formatPx(twipsToPixels(formatting.spacing));
+	if (formatting.scale !== void 0 && formatting.scale !== 100) {
+		style.transform = `scaleX(${formatting.scale / 100})`;
+		style.display = "inline-block";
+	}
+	if (formatting.hidden) style.display = "none";
+	if (formatting.emboss) style.textShadow = "1px 1px 1px rgba(255,255,255,0.5), -1px -1px 1px rgba(0,0,0,0.3)";
+	if (formatting.imprint) style.textShadow = "-1px -1px 1px rgba(255,255,255,0.5), 1px 1px 1px rgba(0,0,0,0.3)";
+	if (formatting.outline) {
+		style.WebkitTextStroke = "1px currentColor";
+		style.WebkitTextFillColor = "transparent";
+	}
+	if (formatting.shadow && !formatting.emboss && !formatting.imprint) style.textShadow = "1px 1px 2px rgba(0,0,0,0.3)";
+	if (formatting.rtl) style.direction = "rtl";
+	return style;
+}
+/**
+* Convert ParagraphFormatting to CSS properties
+*
+* @param formatting - Paragraph formatting from OOXML
+* @param theme - Theme for resolving colors
+* @returns React CSSProperties
+*/
+function paragraphToStyle(formatting, theme) {
+	if (!formatting) return {};
+	const style = {};
+	if (formatting.alignment) style.textAlign = mapAlignment(formatting.alignment);
+	if (formatting.beforeAutospacing) style.marginTop = formatPx(14);
+	else if (formatting.spaceBefore !== void 0) style.marginTop = formatPx(twipsToPixels(formatting.spaceBefore));
+	if (formatting.afterAutospacing) style.marginBottom = formatPx(14);
+	else if (formatting.spaceAfter !== void 0) style.marginBottom = formatPx(twipsToPixels(formatting.spaceAfter));
+	if (formatting.lineSpacing !== void 0 && formatting.lineSpacing > 0) if (formatting.lineSpacingRule === "exact") {
+		const exactPx = twipsToPixels(formatting.lineSpacing);
+		if (exactPx > 0) style.lineHeight = formatPx(exactPx);
+	} else if (formatting.lineSpacingRule === "atLeast") {
+		const atLeastPx = twipsToPixels(formatting.lineSpacing);
+		if (atLeastPx > 0) {
+			style.minHeight = formatPx(atLeastPx);
+			style.lineHeight = formatPx(atLeastPx);
+		}
+	} else {
+		const lineMultiplier = formatting.lineSpacing / 240;
+		if (lineMultiplier > 0) style.lineHeight = lineMultiplier.toString();
+	}
+	if (formatting.indentLeft !== void 0) style.marginLeft = formatPx(twipsToPixels(formatting.indentLeft));
+	if (formatting.indentRight !== void 0) style.marginRight = formatPx(twipsToPixels(formatting.indentRight));
+	if (formatting.indentFirstLine !== void 0) style.textIndent = formatPx(twipsToPixels(formatting.indentFirstLine));
+	if (formatting.borders) {
+		if (formatting.borders.top) Object.assign(style, borderToStyle(formatting.borders.top, "Top", theme));
+		if (formatting.borders.bottom) Object.assign(style, borderToStyle(formatting.borders.bottom, "Bottom", theme));
+		if (formatting.borders.left) Object.assign(style, borderToStyle(formatting.borders.left, "Left", theme));
+		if (formatting.borders.right) Object.assign(style, borderToStyle(formatting.borders.right, "Right", theme));
+	}
+	if (formatting.shading) {
+		const bgColor = resolveShadingFill(formatting.shading, theme);
+		if (bgColor) style.backgroundColor = bgColor;
+	}
+	if (formatting.bidi) style.direction = "rtl";
+	if (formatting.pageBreakBefore) style.breakBefore = "page";
+	if (formatting.keepNext) style.breakAfter = "avoid";
+	if (formatting.keepLines) style.breakInside = "avoid";
+	return style;
+}
+/**
+* Convert a BorderSpec to CSS border properties
+*
+* @param border - Border specification
+* @param side - 'Top' | 'Bottom' | 'Left' | 'Right' | '' for all
+* @param theme - Theme for color resolution
+* @returns Partial CSSProperties with border styles
+*/
+function borderToStyle(border, side = "", theme) {
+	if (!border || border.style === "none" || border.style === "nil") return {};
+	const style = {};
+	const widthPx = border.size !== void 0 && border.size !== 0 ? eighthsToPixels(border.size) : 1;
+	const color = border.color ? resolveColor(border.color, theme) : "#000000";
+	const cssStyle = mapBorderStyle(border.style);
+	const widthKey = `border${side}Width`;
+	const styleKey = `border${side}Style`;
+	const colorKey = `border${side}Color`;
+	Object.assign(style, {
+		[colorKey]: color,
+		[styleKey]: cssStyle,
+		[widthKey]: formatPx(Math.max(1, widthPx))
+	});
+	return style;
+}
+/**
+* Convert ShadingProperties to background color
+*
+* @param shading - Shading properties
+* @param theme - Theme for color resolution
+* @returns CSS color string or empty string
+*/
+function resolveShadingFill(shading, theme) {
+	if (!shading) return "";
+	if (shading.pattern === "nil") return "";
+	if (shading.fill) {
+		if (shading.fill.auto) return "";
+		if (shading.fill.rgb === "auto" || shading.fill.rgb === "FFFFFF") return "";
+		return resolveShadingColor(shading.fill, theme);
+	}
+	if (shading.pattern === "solid" && shading.color) return resolveShadingColor(shading.color, theme);
+	if (shading.pattern && shading.pattern.startsWith("pct") && shading.color) return resolveShadingColor(shading.color, theme);
+	return "";
+}
+/**
+* Map OOXML underline style to CSS text-decoration-style
+*/
+function mapUnderlineStyle(underlineStyle) {
+	switch (underlineStyle) {
+		case "double": return "double";
+		case "dotted":
+		case "dottedHeavy": return "dotted";
+		case "dash":
+		case "dashedHeavy":
+		case "dashLong":
+		case "dashLongHeavy":
+		case "dotDash":
+		case "dashDotHeavy":
+		case "dotDotDash":
+		case "dashDotDotHeavy": return "dashed";
+		case "wave":
+		case "wavyHeavy":
+		case "wavyDouble": return "wavy";
+		default: return "solid";
+	}
+}
+/**
+* Map OOXML paragraph alignment to CSS text-align
+*/
+function mapAlignment(alignment) {
+	switch (alignment) {
+		case "center": return "center";
+		case "right": return "right";
+		case "both":
+		case "distribute": return "justify";
+		default: return "left";
+	}
+}
+/**
+* Map OOXML border style to CSS border-style
+*/
+function mapBorderStyle(borderStyle) {
+	switch (borderStyle) {
+		case "none":
+		case "nil": return "none";
+		case "double":
+		case "triple": return "double";
+		case "dotted": return "dotted";
+		case "dashed":
+		case "dashSmallGap": return "dashed";
+		case "threeDEmboss": return "ridge";
+		case "threeDEngrave": return "groove";
+		case "outset": return "outset";
+		case "inset": return "inset";
+		default: return "solid";
+	}
+}
+/**
+* Merge multiple CSSProperties objects
+*
+* Later objects override earlier ones for conflicting properties.
+*
+* @param styles - Array of CSSProperties objects
+* @returns Merged CSSProperties
+*/
+function mergeStyles(...styles) {
+	const result = {};
+	for (const style of styles) if (style) Object.assign(result, style);
+	return result;
+}
+/**
+* Get CSS for a table cell based on formatting
+*
+* @param formatting - Table cell formatting
+* @param theme - Theme for color resolution
+* @returns CSSProperties for the cell
+*/
+function tableCellToStyle(formatting, theme) {
+	if (!formatting) return {};
+	const style = {};
+	if (formatting.verticalAlign) style.verticalAlign = formatting.verticalAlign;
+	if (formatting.textDirection && (formatting.textDirection.includes("rl") || formatting.textDirection.includes("Rl"))) style.direction = "rtl";
+	if (formatting.shading) {
+		const bgColor = resolveShadingFill(formatting.shading, theme);
+		if (bgColor) style.backgroundColor = bgColor;
+	}
+	if (formatting.borders) {
+		if (formatting.borders.top) Object.assign(style, borderToStyle(formatting.borders.top, "Top", theme));
+		if (formatting.borders.bottom) Object.assign(style, borderToStyle(formatting.borders.bottom, "Bottom", theme));
+		if (formatting.borders.left) Object.assign(style, borderToStyle(formatting.borders.left, "Left", theme));
+		if (formatting.borders.right) Object.assign(style, borderToStyle(formatting.borders.right, "Right", theme));
+	}
+	if (formatting.margins) {
+		if (formatting.margins.top?.value !== void 0 && formatting.margins.top.value !== 0) style.paddingTop = formatPx(twipsToPixels(formatting.margins.top.value));
+		if (formatting.margins.bottom?.value !== void 0 && formatting.margins.bottom.value !== 0) style.paddingBottom = formatPx(twipsToPixels(formatting.margins.bottom.value));
+		if (formatting.margins.left?.value !== void 0 && formatting.margins.left.value !== 0) style.paddingLeft = formatPx(twipsToPixels(formatting.margins.left.value));
+		if (formatting.margins.right?.value !== void 0 && formatting.margins.right.value !== 0) style.paddingRight = formatPx(twipsToPixels(formatting.margins.right.value));
+	}
+	return style;
+}
+/**
+* Get CSS for page/section container
+*
+* @param sectionProps - Section properties
+* @returns CSSProperties for the page container
+*/
+function sectionToStyle(sectionProps, theme) {
+	if (!sectionProps) return {};
+	const style = {};
+	if (sectionProps.pageWidth !== void 0 && sectionProps.pageWidth !== 0) style.width = formatPx(twipsToPixels(sectionProps.pageWidth));
+	if (sectionProps.pageHeight !== void 0 && sectionProps.pageHeight !== 0) style.minHeight = formatPx(twipsToPixels(sectionProps.pageHeight));
+	if (sectionProps.marginTop !== void 0 && sectionProps.marginTop !== 0) style.paddingTop = formatPx(twipsToPixels(sectionProps.marginTop));
+	if (sectionProps.marginBottom !== void 0 && sectionProps.marginBottom !== 0) style.paddingBottom = formatPx(twipsToPixels(sectionProps.marginBottom));
+	if (sectionProps.marginLeft !== void 0 && sectionProps.marginLeft !== 0) style.paddingLeft = formatPx(twipsToPixels(sectionProps.marginLeft));
+	if (sectionProps.marginRight !== void 0 && sectionProps.marginRight !== 0) style.paddingRight = formatPx(twipsToPixels(sectionProps.marginRight));
+	if (sectionProps.background?.color) {
+		const bgColor = resolveColor(sectionProps.background.color, theme);
+		if (bgColor) style.backgroundColor = bgColor;
+	}
+	return style;
+}
+//#endregion
+export { borderToStyle, mergeStyles, paragraphToStyle, resolveShadingFill, sectionToStyle, tableCellToStyle, textToStyle };

package/dist/utils/headerFooter.d.ts

@@ -0,0 +1,74 @@
+import { document_d_exports } from "../types/document.js";
+
+//#region src/utils/headerFooter.d.ts
+type HeaderFooterPosition = "header" | "footer";
+/**
+ * The resolved header/footer slots for the active document, plus the
+ * relationship ids that save/remove must target (the *displayed* slot's rId,
+ * not necessarily `finalSectionProperties`).
+ */
+type HeaderFooterResolution = {
+  headerContent: document_d_exports.HeaderFooter | null;
+  footerContent: document_d_exports.HeaderFooter | null;
+  firstPageHeaderContent: document_d_exports.HeaderFooter | null;
+  firstPageFooterContent: document_d_exports.HeaderFooter | null;
+  hasTitlePg: boolean;
+  activeHeaderRId: string | null;
+  activeFooterRId: string | null;
+  activeFirstHeaderRId: string | null;
+  activeFirstFooterRId: string | null;
+};
+/**
+ * Resolve the header/footer content (and the active relationship ids) for a
+ * parsed package. Returns the empty resolution when no package is loaded.
+ */
+declare const resolveHeaderFooterContent: (pkg: document_d_exports.DocxPackage | undefined) => HeaderFooterResolution;
+/**
+ * The section properties that drive the rendered chrome, with `titlePg` merged
+ * in when title-page mode was inferred from header/footer references.
+ */
+declare const resolveEffectiveSectionProperties: (documentBody: document_d_exports.DocumentBody | undefined, hasTitlePg: boolean) => document_d_exports.SectionProperties | undefined;
+/** Pick the relationship id for the slot a save/remove targets. */
+declare const pickActiveHeaderFooterRId: (resolution: HeaderFooterResolution, position: HeaderFooterPosition, isFirstPage: boolean) => string | null;
+/**
+ * Build a Document with a fresh empty header/footer for the given slot, wired
+ * into `finalSectionProperties` via a new reference. Returns null when the
+ * document has no final section properties to attach the reference to.
+ */
+declare const createEmptyHeaderFooter: (document: document_d_exports.Document, position: HeaderFooterPosition, isFirstPage: boolean) => document_d_exports.Document | null;
+type SaveHeaderFooterArgs = {
+  document: document_d_exports.Document;
+  position: HeaderFooterPosition;
+  isFirstPage: boolean; /** The relationship id the displayed slot resolves to (`pickActiveHeaderFooterRId`). */
+  activeRId: string; /** The serialised header/footer body (from the live PM doc). */
+  blocks: document_d_exports.BlockContent[];
+};
+/**
+ * Serialise edited header/footer content into a new Document. A brand-new
+ * HeaderFooter inside a brand-new Map keeps every earlier history entry's
+ * Document untouched so undo can step back to the pre-edit state. Returns null
+ * when the target header/footer cannot be found.
+ */
+declare const saveHeaderFooterContent: ({
+  document,
+  position,
+  isFirstPage,
+  activeRId,
+  blocks
+}: SaveHeaderFooterArgs) => document_d_exports.Document | null;
+type RemoveHeaderFooterArgs = {
+  document: document_d_exports.Document;
+  position: HeaderFooterPosition; /** The relationship id the displayed slot resolves to (`pickActiveHeaderFooterRId`). */
+  activeRId: string;
+};
+/**
+ * Remove a header/footer and drop its reference from every section that points
+ * at it, returning the new Document.
+ */
+declare const removeHeaderFooter: ({
+  document,
+  position,
+  activeRId
+}: RemoveHeaderFooterArgs) => document_d_exports.Document;
+//#endregion
+export { HeaderFooterPosition, HeaderFooterResolution, RemoveHeaderFooterArgs, SaveHeaderFooterArgs, createEmptyHeaderFooter, pickActiveHeaderFooterRId, removeHeaderFooter, resolveEffectiveSectionProperties, resolveHeaderFooterContent, saveHeaderFooterContent };