@json-to-office/core-pptx 0.8.0 → 0.8.4

package/dist/components/image.d.ts

@@ -12,8 +12,8 @@ interface ImageComponentProps {
     h?: number | string;
     sizing?: {
         type: string;
-        w?: number;
-        h?: number;
+        w?: number | string;
+        h?: number | string;
     };
     rotate?: number;
     rounding?: boolean;
@@ -32,6 +32,6 @@ interface ImageComponentProps {
     };
     alt?: string;
 }
-export declare function renderImageComponent(slide: PptxGenJS.Slide, props: ImageComponentProps, theme: PptxThemeConfig, warnings?: PipelineWarning[]): Promise<void>;
+export declare function renderImageComponent(slide: PptxGenJS.Slide, props: ImageComponentProps, theme: PptxThemeConfig, warnings?: PipelineWarning[], slideWidth?: number, slideHeight?: number): Promise<void>;
 export {};
 //# sourceMappingURL=image.d.ts.map

package/dist/components/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/components/image.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA2BjE,UAAU,mBAAmB;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,SAAS,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAqCD,wBAAsB,oBAAoB,CACxC,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE,eAAe,EACtB,QAAQ,CAAC,EAAE,eAAe,EAAE,GAC3B,OAAO,CAAC,IAAI,CAAC,CA8Gf"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/components/image.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA8BjE,UAAU,mBAAmB;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,SAAS,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AA2DD,wBAAsB,oBAAoB,CACxC,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,KAAK,EAAE,mBAAmB,EAC1B,KAAK,EAAE,eAAe,EACtB,QAAQ,CAAC,EAAE,eAAe,EAAE,EAC5B,UAAU,SAAK,EACf,WAAW,SAAM,GAChB,OAAO,CAAC,IAAI,CAAC,CA+Jf"}

package/dist/components/index.d.ts

@@ -2,13 +2,12 @@
  * PPTX Component Renderers
  */
 import type PptxGenJS from 'pptxgenjs';
-import type { PptxThemeConfig, PptxComponentInput, PipelineWarning, SlideContext } from '../types';
-import type { ServicesConfig } from '@json-to-office/shared';
+import type { PptxThemeConfig, PptxComponentInput, PipelineWarning, SlideRenderContext } from '../types';
 export { renderTextComponent } from './text';
 export { renderImageComponent } from './image';
 export { renderShapeComponent } from './shape';
 export { renderTableComponent } from './table';
 export { renderHighchartsComponent } from './highcharts';
 export { renderChartComponent } from './chart';
-export declare function renderComponent(slide: PptxGenJS.Slide, component: PptxComponentInput, theme: PptxThemeConfig, pptx: PptxGenJS, warnings?: PipelineWarning[], slideCtx?: SlideContext, services?: ServicesConfig): Promise<void>;
+export declare function renderComponent(slide: PptxGenJS.Slide, component: PptxComponentInput, theme: PptxThemeConfig, pptx: PptxGenJS, warnings?: PipelineWarning[], ctx?: SlideRenderContext): Promise<void>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AACvC,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,YAAY,EACb,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAS7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAsB,eAAe,CACnC,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,SAAS,EAAE,kBAAkB,EAC7B,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,SAAS,EACf,QAAQ,CAAC,EAAE,eAAe,EAAE,EAC5B,QAAQ,CAAC,EAAE,YAAY,EACvB,QAAQ,CAAC,EAAE,cAAc,GACxB,OAAO,CAAC,IAAI,CAAC,CAuCf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AACvC,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EACnB,MAAM,UAAU,CAAC;AASlB,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAsB,eAAe,CACnC,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,SAAS,EAAE,kBAAkB,EAC7B,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,SAAS,EACf,QAAQ,CAAC,EAAE,eAAe,EAAE,EAC5B,GAAG,CAAC,EAAE,kBAAkB,GACvB,OAAO,CAAC,IAAI,CAAC,CA8Cf"}

package/dist/core/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/core/render.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,EACV,qBAAqB,EACrB,eAAe,EAEhB,MAAM,UAAU,CAAC;AAUlB,wBAAsB,kBAAkB,CACtC,SAAS,EAAE,qBAAqB,EAChC,QAAQ,CAAC,EAAE,eAAe,EAAE,GAC3B,OAAO,CAAC,SAAS,CAAC,CAuOpB"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/core/render.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,EACV,qBAAqB,EACrB,eAAe,EAGhB,MAAM,UAAU,CAAC;AAUlB,wBAAsB,kBAAkB,CACtC,SAAS,EAAE,qBAAqB,EAChC,QAAQ,CAAC,EAAE,eAAe,EAAE,GAC3B,OAAO,CAAC,SAAS,CAAC,CAyOpB"}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export declare function getPptxCoreVersion(): string;
 export { generatePresentation, generateBufferFromJson, generateBufferWithWarnings, generateAndSaveFromJson, generateFromFile, savePresentation, isPresentationComponentDefinition, PresentationGenerator, } from './core/generator';
 export type { GenerationOptions, GenerationResult } from './core/generator';
-export type { PptxComponentInput, PresentationComponentDefinition, SlideComponentDefinition, ProcessedPresentation, ProcessedSlide, PptxThemeConfig, PipelineWarning, SlideContext, } from './types';
+export type { PptxComponentInput, PresentationComponentDefinition, SlideComponentDefinition, ProcessedPresentation, ProcessedSlide, PptxThemeConfig, PipelineWarning, SlideContext, SlideRenderContext, } from './types';
 export { isPresentationComponent, isSlideComponent } from './types';
 export { W as WarningCodes } from './utils/warn';
 export type { WarningCode } from './utils/warn';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C;AAGD,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,0BAA0B,EAC1B,uBAAuB,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,iCAAiC,EACjC,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAG5E,YAAY,EACV,kBAAkB,EAClB,+BAA+B,EAC/B,wBAAwB,EACxB,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,eAAe,EACf,YAAY,GACb,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGpE,OAAO,EAAE,CAAC,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGxE,OAAO,EACL,eAAe,EACf,aAAa,EACb,2BAA2B,EAC3B,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,gCAAgC,EAChC,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAElB,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,4BAA4B,EAC5B,qBAAqB,IAAI,2BAA2B,EACpD,4BAA4B,EAC5B,sBAAsB,IAAI,4BAA4B,EACtD,oBAAoB,IAAI,0BAA0B,EAClD,gBAAgB,IAAI,sBAAsB,EAC1C,0BAA0B,EAC1B,oBAAoB,EACpB,0BAA0B,EAC1B,6BAA6B,EAC7B,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,eAAe,IAAI,qBAAqB,GACzC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,eAAe,GAChB,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C;AAGD,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,0BAA0B,EAC1B,uBAAuB,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,iCAAiC,EACjC,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAG5E,YAAY,EACV,kBAAkB,EAClB,+BAA+B,EAC/B,wBAAwB,EACxB,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,eAAe,EACf,YAAY,EACZ,kBAAkB,GACnB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGpE,OAAO,EAAE,CAAC,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGxE,OAAO,EACL,eAAe,EACf,aAAa,EACb,2BAA2B,EAC3B,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,gCAAgC,EAChC,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAElB,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,4BAA4B,EAC5B,qBAAqB,IAAI,2BAA2B,EACpD,4BAA4B,EAC5B,sBAAsB,IAAI,4BAA4B,EACtD,oBAAoB,IAAI,0BAA0B,EAClD,gBAAgB,IAAI,sBAAsB,EAC1C,0BAA0B,EAC1B,oBAAoB,EACpB,0BAA0B,EAC1B,6BAA6B,EAC7B,sBAAsB,EACtB,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,eAAe,IAAI,qBAAqB,GACzC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,eAAe,GAChB,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -25,7 +25,8 @@ var W = {
   PLACEHOLDER_NO_POSITION: "PLACEHOLDER_NO_POSITION",
   THEME_COLOR_FALLBACK: "THEME_COLOR_FALLBACK",
   UNKNOWN_COLOR: "UNKNOWN_COLOR",
-  GRID_POSITION_CLAMPED: "GRID_POSITION_CLAMPED"
+  GRID_POSITION_CLAMPED: "GRID_POSITION_CLAMPED",
+  IMAGE_ZERO_BOX: "IMAGE_ZERO_BOX"
 };
 function warn(warnings, code, message, extra) {
   if (warnings) {
@@ -516,7 +517,8 @@ import probe from "probe-image-size";
 function isPrivateUrl(urlStr) {
   try {
     const { hostname } = new URL(urlStr);
-    if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1" || hostname === "[::1]" || hostname.startsWith("10.") || hostname.startsWith("192.168.") || hostname.startsWith("169.254.") || hostname.endsWith(".local") || hostname.endsWith(".internal")) return true;
+    if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1" || hostname === "[::1]" || hostname.startsWith("10.") || hostname.startsWith("192.168.") || hostname.startsWith("169.254.") || hostname.endsWith(".local") || hostname.endsWith(".internal"))
+      return true;
     if (hostname.startsWith("172.")) {
       const second = parseInt(hostname.split(".")[1], 10);
       if (second >= 16 && second <= 31) return true;
@@ -546,30 +548,75 @@ async function probeImageSize(imagePath, warnings) {
     const result = await probe(createReadStream(resolved));
     return result ? { width: result.width, height: result.height } : void 0;
   } catch (err) {
-    warn(warnings, W.IMAGE_PROBE_FAILED, `Image probe failed: ${err instanceof Error ? err.message : String(err)}`, { component: "image" });
+    warn(
+      warnings,
+      W.IMAGE_PROBE_FAILED,
+      `Image probe failed: ${err instanceof Error ? err.message : String(err)}`,
+      { component: "image" }
+    );
     return void 0;
   }
 }
-async function renderImageComponent(slide, props, theme, warnings) {
+function resolveDimension(value, axisLength) {
+  if (typeof value === "number") return value;
+  if (value.endsWith("%")) {
+    const pct = parseFloat(value);
+    return !Number.isNaN(pct) && pct >= 0 ? pct / 100 * axisLength : 0;
+  }
+  const n = Number(value);
+  return Number.isNaN(n) ? 0 : n;
+}
+async function renderImageComponent(slide, props, theme, warnings, slideWidth = 10, slideHeight = 7.5) {
   const opts = {};
+  const source = props.path || props.base64;
+  if (!source) {
+    warn(
+      warnings,
+      W.IMAGE_NO_SOURCE,
+      "Image component missing both path and base64",
+      { component: "image" }
+    );
+    return;
+  }
   if (props.path) {
     opts.path = props.path;
-  } else if (props.base64) {
-    opts.data = props.base64;
   } else {
-    warn(warnings, W.IMAGE_NO_SOURCE, "Image component missing both path and base64", { component: "image" });
-    return;
+    opts.data = props.base64;
   }
   if (props.x !== void 0) opts.x = props.x;
   if (props.y !== void 0) opts.y = props.y;
   if (props.w !== void 0) opts.w = props.w;
   if (props.h !== void 0) opts.h = props.h;
+  const hasW = props.w !== void 0;
+  const hasH = props.h !== void 0;
+  const needsProbe = hasW !== hasH && !props.sizing || props.sizing?.type === "contain" || props.sizing?.type === "cover";
+  const intrinsic = needsProbe ? await probeImageSize(source, warnings) : void 0;
+  if (hasW !== hasH && !props.sizing) {
+    if (intrinsic && intrinsic.width > 0 && intrinsic.height > 0) {
+      const aspect = intrinsic.width / intrinsic.height;
+      if (hasW && !hasH) {
+        const wInches = resolveDimension(props.w, slideWidth);
+        opts.w = wInches;
+        opts.h = wInches / aspect;
+      } else {
+        const hInches = resolveDimension(props.h, slideHeight);
+        opts.h = hInches;
+        opts.w = hInches * aspect;
+      }
+    }
+  }
   if (props.sizing && (props.sizing.type === "contain" || props.sizing.type === "cover")) {
-    const source = props.path || props.base64;
-    const intrinsic = source ? await probeImageSize(source, warnings) : void 0;
-    const boxW = Number(props.sizing.w ?? props.w);
-    const boxH = Number(props.sizing.h ?? props.h);
-    if (intrinsic && !isNaN(boxW) && !isNaN(boxH)) {
+    const boxW = resolveDimension(props.sizing.w ?? props.w ?? 0, slideWidth);
+    const boxH = resolveDimension(props.sizing.h ?? props.h ?? 0, slideHeight);
+    if (boxW <= 0 || boxH <= 0) {
+      warn(
+        warnings,
+        W.IMAGE_ZERO_BOX,
+        `Image sizing box resolved to zero (${boxW}x${boxH})`,
+        { component: "image" }
+      );
+    }
+    if (intrinsic && intrinsic.width > 0 && intrinsic.height > 0 && boxW > 0 && boxH > 0) {
       const imgAspect = intrinsic.width / intrinsic.height;
       if (props.sizing.type === "contain") {
         const boxAspect = boxW / boxH;
@@ -581,8 +628,8 @@ async function renderImageComponent(slide, props, theme, warnings) {
           fitH = boxH;
           fitW = boxH * imgAspect;
         }
-        const baseX = Number(props.x ?? 0);
-        const baseY = Number(props.y ?? 0);
+        const baseX = resolveDimension(props.x ?? 0, slideWidth);
+        const baseY = resolveDimension(props.y ?? 0, slideHeight);
         opts.x = baseX + (boxW - fitW) / 2;
         opts.y = baseY + (boxH - fitH) / 2;
         opts.w = fitW;
@@ -598,8 +645,8 @@ async function renderImageComponent(slide, props, theme, warnings) {
   } else if (props.sizing) {
     opts.sizing = {
       ...props.sizing,
-      w: props.sizing.w ?? props.w,
-      h: props.sizing.h ?? props.h
+      w: resolveDimension(props.sizing.w ?? props.w ?? 0, slideWidth),
+      h: resolveDimension(props.sizing.h ?? props.h ?? 0, slideHeight)
     };
   }
   if (props.rotate !== void 0) opts.rotate = props.rotate;
@@ -1050,16 +1097,23 @@ function renderChartComponent(slide, props, theme, _pptx, warnings) {
 }
 
 // src/components/index.ts
-async function renderComponent(slide, component, theme, pptx, warnings, slideCtx, services) {
+async function renderComponent(slide, component, theme, pptx, warnings, ctx) {
   if (component.enabled === false) return;
   const { name, props } = component;
   const p = props;
   switch (name) {
     case "text":
-      renderTextComponent(slide, p, theme, warnings, slideCtx);
+      renderTextComponent(slide, p, theme, warnings, ctx?.slideCtx);
       break;
     case "image":
-      await renderImageComponent(slide, p, theme, warnings);
+      await renderImageComponent(
+        slide,
+        p,
+        theme,
+        warnings,
+        ctx?.slideWidth,
+        ctx?.slideHeight
+      );
       break;
     case "shape":
       renderShapeComponent(slide, p, theme, pptx, warnings);
@@ -1073,7 +1127,7 @@ async function renderComponent(slide, component, theme, pptx, warnings, slideCtx
         p,
         theme,
         warnings,
-        services?.highcharts
+        ctx?.services?.highcharts
       );
       break;
     case "chart":
@@ -1159,6 +1213,12 @@ async function renderPresentation(processed, warnings) {
       totalSlides,
       pageNumberFormat: processed.pageNumberFormat
     };
+    const renderCtx = {
+      slideCtx,
+      services: processed.services,
+      slideWidth: processed.slideWidth,
+      slideHeight: processed.slideHeight
+    };
     const slide = slideData.template ? pptx.addSlide({ masterName: slideData.template }) : pptx.addSlide();
     if (slideData.background) {
       if (slideData.background.color) {
@@ -1198,8 +1258,7 @@ async function renderPresentation(processed, warnings) {
           processed.theme,
           pptx,
           warnings,
-          slideCtx,
-          processed.services
+          renderCtx
         );
       }
     }
@@ -1217,8 +1276,7 @@ async function renderPresentation(processed, warnings) {
         processed.theme,
         pptx,
         warnings,
-        slideCtx,
-        processed.services
+        renderCtx
       );
     }
     if (slideData.placeholders) {
@@ -1264,8 +1322,7 @@ async function renderPresentation(processed, warnings) {
             processed.theme,
             pptx,
             warnings,
-            slideCtx,
-            processed.services
+            renderCtx
           );
         }
       } else {
@@ -1291,8 +1348,7 @@ async function renderPresentation(processed, warnings) {
               processed.theme,
               pptx,
               warnings,
-              slideCtx,
-              processed.services
+              renderCtx
             );
           } else {
             warn(