@openpawlabs/diy-guides-ui 1.8.0 → 1.9.0

package/dist/index.d.ts

@@ -7,7 +7,13 @@ export { Callout } from "./components/Callout";
 export type { CalloutProps } from "./components/Callout";
 export { MediaFigure, mediaFigureType, MediaFigureThumbnail, MediaCropEditor, } from "./components/MediaFigure";
 export type { MediaFigureProps, MediaFigureThumbnailProps, MediaCropEditorProps, MediaAnnotation, MediaAnnotationEditing, AnnotationTool, MediaDisplayRegion, PointAnnotation, CircleAnnotation, RectangleAnnotation, } from "./components/MediaFigure";
-export { DISPLAY_REGION_ASPECT, MIN_REGION_WIDTH, displayRegionHeight, centeredDisplayRegion, clampDisplayRegion, } from "./utils/mediaCrop";
+export { DISPLAY_REGION_ASPECT, MIN_REGION_WIDTH, displayRegionHeight, displayRegionHeightPercent, displayRegionFromPixels, displayRegionToPixels, isLegacyPixelDisplayRegion, normalizeDisplayRegion, centeredDisplayRegion, clampDisplayRegion, } from "./utils/mediaCrop";
+export { GUIDE_IMAGE_VARIANT_WIDTHS, GUIDE_IMAGE_VARIANT_FORMAT, GUIDE_IMAGE_THUMBNAILS_DIR, GUIDE_IMAGE_VARIANTS_FILENAME, GUIDE_IMAGE_VARIANTS_PATH, guideImageBasename, guideImageVariantUrl, guideImageVariantWidths, resolveGuideImageSrcSet, } from "./utils/guideImageSources";
+export type { GuideImageVariantWidth, GuideImageVariantEntry, GuideImageVariantsManifest, GuideImageRole, GuideImageSrcSet, } from "./utils/guideImageSources";
+export { GuideImageVariantsProvider, useGuideImageVariants, } from "./context/guideImageVariants";
+export type { GuideImageVariantsProviderProps } from "./context/guideImageVariants";
+export { GuideResponsiveImage, useGuideImagePreferredSrc, } from "./components/GuideResponsiveImage/GuideResponsiveImage";
+export type { GuideResponsiveImageProps } from "./components/GuideResponsiveImage/GuideResponsiveImage";
 export { ToolList } from "./components/ToolList";
 export type { ToolListProps, ToolListItemProps } from "./components/ToolList";
 export { LinkButton } from "./components/LinkButton";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EACL,KAAK,WAAW,EAChB,gBAAgB,EAChB,cAAc,EACd,gBAAgB,GACjB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EACV,oBAAoB,EACpB,UAAU,GACX,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EACL,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,gBAAgB,EAChB,yBAAyB,EACzB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,cAAc,EACd,sBAAsB,EACtB,wBAAwB,EACxB,yBAAyB,EACzB,iBAAiB,EACjB,KAAK,gBAAgB,GACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,kCAAkC,EAClC,mCAAmC,EACnC,+BAA+B,EAC/B,4BAA4B,EAC5B,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/guideImageSources.d.ts

@@ -0,0 +1,73 @@
+/**
+
+ * Responsive guide image helpers: variant URL convention + manifest lookup.
+
+ *
+
+ * Generated files live under `images/thumbnails/` as `{stem}.w{width}.avif`.
+
+ * Publishers write `images/thumbnails/variants.json` via the `diy-guide-images`
+
+ * CLI; without a manifest the UI falls back to a single `src` (no speculative
+
+ * srcset).
+
+ */
+export declare const GUIDE_IMAGE_VARIANT_WIDTHS: readonly [240, 480, 800, 1600];
+export type GuideImageVariantWidth = (typeof GUIDE_IMAGE_VARIANT_WIDTHS)[number];
+export declare const GUIDE_IMAGE_VARIANT_FORMAT = "avif";
+/** Directory under `images/` that holds generated AVIF variants + the manifest. */
+export declare const GUIDE_IMAGE_THUMBNAILS_DIR = "thumbnails";
+export declare const GUIDE_IMAGE_VARIANTS_FILENAME = "variants.json";
+/** Relative path from a guide folder: `images/thumbnails/variants.json`. */
+export declare const GUIDE_IMAGE_VARIANTS_PATH = "images/thumbnails/variants.json";
+/** Per-file entry inside {@link GuideImageVariantsManifest}. */
+export interface GuideImageVariantEntry {
+    /** Intrinsic width of the canonical source. */
+    width: number;
+    /** Intrinsic height of the canonical source. */
+    height: number;
+    /** Generated AVIF widths that exist on disk (subset of {@link GUIDE_IMAGE_VARIANT_WIDTHS}). */
+    variants: number[];
+}
+/** Written under `images/thumbnails/` by `diy-guide-images`. */
+export interface GuideImageVariantsManifest {
+    version: 1;
+    format: typeof GUIDE_IMAGE_VARIANT_FORMAT;
+    widths: readonly number[];
+    /** Keyed by basename of the canonical file (e.g. `img-4614.webp`). */
+    images: Record<string, GuideImageVariantEntry>;
+}
+/** Display roles used to pick default `sizes` and preferred widths. */
+export type GuideImageRole = "thumb" | "catalog" | "display" | "hero";
+/** Basename of a guide image URL or relative path (`./images/foo.webp` → `foo.webp`). */
+export declare function guideImageBasename(src: string): string;
+/**
+
+ * Build a variant URL under `…/thumbnails/{stem}.w{width}.avif`, preserving
+
+ * query/hash on the original `src`.
+
+ */
+export declare function guideImageVariantUrl(src: string, width: number): string;
+/** Look up generated widths for `src` from a manifest, or `null` when unknown. */
+export declare function guideImageVariantWidths(src: string, manifest: GuideImageVariantsManifest | null | undefined): number[] | null;
+export interface GuideImageSrcSet {
+    /** Canonical source — always used as `<img src>` fallback / lightbox. */
+    src: string;
+    /** AVIF srcset string, or `undefined` when no variants are known. */
+    srcSet?: string;
+    /** Default `sizes` for the role. */
+    sizes: string;
+    /** Preferred single-width URL for places that only need one small file. */
+    preferredSrc: string;
+}
+/**
+
+ * Resolve srcset / sizes for a guide image. Without a manifest (or entry),
+
+ * returns the canonical `src` only — never invents URLs that may 404.
+
+ */
+export declare function resolveGuideImageSrcSet(src: string, role: GuideImageRole, manifest?: GuideImageVariantsManifest | null): GuideImageSrcSet;
+//# sourceMappingURL=guideImageSources.d.ts.map

package/dist/utils/guideImageSources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guideImageSources.d.ts","sourceRoot":"","sources":["../../src/utils/guideImageSources.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,eAAO,MAAM,0BAA0B,gCAAiC,CAAC;AAIzE,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAC;AAIjF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAIjD,mFAAmF;AAEnF,eAAO,MAAM,0BAA0B,eAAe,CAAC;AAIvD,eAAO,MAAM,6BAA6B,kBAAkB,CAAC;AAI7D,4EAA4E;AAE5E,eAAO,MAAM,yBAAyB,oCAA0E,CAAC;AAIjH,gEAAgE;AAEhE,MAAM,WAAW,sBAAsB;IAErC,+CAA+C;IAE/C,KAAK,EAAE,MAAM,CAAC;IAEd,gDAAgD;IAEhD,MAAM,EAAE,MAAM,CAAC;IAEf,+FAA+F;IAE/F,QAAQ,EAAE,MAAM,EAAE,CAAC;CAEpB;AAID,gEAAgE;AAEhE,MAAM,WAAW,0BAA0B;IAEzC,OAAO,EAAE,CAAC,CAAC;IAEX,MAAM,EAAE,OAAO,0BAA0B,CAAC;IAE1C,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAE1B,sEAAsE;IAEtE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;CAEhD;AAID,uEAAuE;AAEvE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAgCtE,yFAAyF;AAEzF,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAoBtD;AAID;;;;;;GAMG;AAEH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAcvE;AAID,kFAAkF;AAElF,wBAAgB,uBAAuB,CAErC,GAAG,EAAE,MAAM,EAEX,QAAQ,EAAE,0BAA0B,GAAG,IAAI,GAAG,SAAS,GAEtD,MAAM,EAAE,GAAG,IAAI,CAkBjB;AAID,MAAM,WAAW,gBAAgB;IAE/B,yEAAyE;IAEzE,GAAG,EAAE,MAAM,CAAC;IAEZ,qEAAqE;IAErE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oCAAoC;IAEpC,KAAK,EAAE,MAAM,CAAC;IAEd,2EAA2E;IAE3E,YAAY,EAAE,MAAM,CAAC;CAEtB;AAID;;;;;;GAMG;AAEH,wBAAgB,uBAAuB,CAErC,GAAG,EAAE,MAAM,EAEX,IAAI,EAAE,cAAc,EAEpB,QAAQ,CAAC,EAAE,0BAA0B,GAAG,IAAI,GAE3C,gBAAgB,CAsClB"}

package/dist/utils/guideImageSources.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=guideImageSources.test.d.ts.map

package/dist/utils/guideImageSources.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guideImageSources.test.d.ts","sourceRoot":"","sources":["../../src/utils/guideImageSources.test.ts"],"names":[],"mappings":""}

package/dist/utils/mediaCrop.d.ts

@@ -1,32 +1,59 @@
 import type { CSSProperties } from "react";
-/** Top-left and width of a 4:3 crop rect in intrinsic source pixels. Height is derived. */
+/**
+ * Top-left and width of a 4:3 crop rect as **percentages of the source image**
+ * (0–100). Height is derived from the 4:3 aspect against the source’s pixel size.
+ * Distinct from annotation coordinates, which are percentages of the visible frame.
+ */
 export interface MediaDisplayRegion {
-    /** Left edge in pixels from the source left. */
+    /** Left edge as a percentage (0–100) of the source width. */
+    x: number;
+    /** Top edge as a percentage (0–100) of the source height. */
+    y: number;
+    /** Width as a percentage (0–100) of the source width; height is 4:3-derived. */
+    width: number;
+}
+/** Pixel region used only for migration from legacy authored crops. */
+export interface MediaDisplayRegionPixels {
     x: number;
-    /** Top edge in pixels from the source top. */
     y: number;
-    /** Width in source pixels; height is computed as `round(width × 3 / 4)`. */
     width: number;
 }
 export declare const DISPLAY_REGION_ASPECT: number;
-/** Smallest selectable region width, in source pixels, so a crop never collapses. */
+/**
+ * Smallest selectable region width in source pixels (converted to % per source).
+ * Keeps a crop from collapsing to a point.
+ */
 export declare const MIN_REGION_WIDTH = 16;
-/** Height in source pixels for a 4:3 region with the given width. */
-export declare function displayRegionHeight(width: number): number;
+/** 4:3 height in source pixels for a pixel width. */
+export declare function displayRegionHeight(widthPx: number): number;
+/** 4:3 height as a percentage of source height for a width percentage. */
+export declare function displayRegionHeightPercent(widthPercent: number, sourceWidth: number, sourceHeight: number): number;
+/**
+ * True when a region still looks like legacy **source-pixel** coordinates
+ * (any axis above 100). Percentage regions always stay within 0–100.
+ */
+export declare function isLegacyPixelDisplayRegion(region: MediaDisplayRegion): boolean;
+/** Convert a legacy pixel region into source percentages. */
+export declare function displayRegionFromPixels(region: MediaDisplayRegionPixels, sourceWidth: number, sourceHeight: number): MediaDisplayRegion;
+/** Convert a percentage region back to source pixels (for tooling / migration). */
+export declare function displayRegionToPixels(region: MediaDisplayRegion, sourceWidth: number, sourceHeight: number): MediaDisplayRegionPixels;
+/**
+ * Normalize an incoming region: convert legacy pixel coords when detected, then
+ * clamp into a valid percentage box for the source.
+ */
+export declare function normalizeDisplayRegion(region: MediaDisplayRegion, sourceWidth: number, sourceHeight: number): MediaDisplayRegion;
 /**
- * Snap a region to integer source pixels and keep its 4:3 box fully inside the
- * source: width is bounded by both axes, then `x` / `y` are pinned so the derived
- * height fits. Use it to sanitize any externally supplied or in-progress region.
+ * Snap a percentage region and keep its 4:3 box fully inside the source.
  */
 export declare function clampDisplayRegion(region: MediaDisplayRegion, sourceWidth: number, sourceHeight: number): MediaDisplayRegion;
 /**
  * Largest centered 4:3 region for a source — the rect the fixed frame shows when
- * no `displayRegion` is set. Used as the starting selection in the crop editor so
- * opening it mirrors the current center-crop.
+ * no `displayRegion` is set. Used as the starting selection in the crop editor.
  */
 export declare function centeredDisplayRegion(sourceWidth: number, sourceHeight: number): MediaDisplayRegion;
 /**
- * CSS styles to show a 4:3 source-pixel region scaled to fill a 4:3 frame.
+ * CSS styles to show a 4:3 source region (percentages) scaled to fill a 4:3 frame.
+ * Accepts legacy pixel regions and converts them when any axis is above 100.
  * Returns `null` when the region is invalid for the given source dimensions.
  */
 export declare function getDisplayRegionStyles(region: MediaDisplayRegion, sourceWidth: number, sourceHeight: number, frameWidth: number, frameHeight: number): CSSProperties | null;

package/dist/utils/mediaCrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mediaCrop.d.ts","sourceRoot":"","sources":["../../src/utils/mediaCrop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,2FAA2F;AAC3F,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,CAAC,EAAE,MAAM,CAAC;IACV,8CAA8C;IAC9C,CAAC,EAAE,MAAM,CAAC;IACV,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C,qFAAqF;AACrF,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,qEAAqE;AACrE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD;AAKD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,kBAAkB,EAC1B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,kBAAkB,CAapB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,kBAAkB,CAWpB;AAgBD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,kBAAkB,EAC1B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,aAAa,GAAG,IAAI,CAqBtB"}
+{"version":3,"file":"mediaCrop.d.ts","sourceRoot":"","sources":["../../src/utils/mediaCrop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,CAAC,EAAE,MAAM,CAAC;IACV,6DAA6D;IAC7D,CAAC,EAAE,MAAM,CAAC;IACV,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;CACf;AAED,uEAAuE;AACvE,MAAM,WAAW,wBAAwB;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAOnC,qDAAqD;AACrD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAE3D;AAED,0EAA0E;AAC1E,wBAAgB,0BAA0B,CACxC,YAAY,EAAE,MAAM,EACpB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,MAAM,CAMR;AAoBD;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAE9E;AAED,6DAA6D;AAC7D,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,wBAAwB,EAChC,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,kBAAkB,CAapB;AAED,mFAAmF;AACnF,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,kBAAkB,EAC1B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,wBAAwB,CAM1B;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,kBAAkB,EAC1B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,kBAAkB,CAKpB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,kBAAkB,EAC1B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,kBAAkB,CAUpB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,kBAAkB,CAepB;AAgBD;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,kBAAkB,EAC1B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,aAAa,GAAG,IAAI,CA4BtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpawlabs/diy-guides-ui",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "React UI library for building open-source, iFixit-style step-by-step diy guides",
   "license": "MIT",
   "type": "module",
@@ -8,6 +8,9 @@
   "main": "./dist/diy-guides-ui.cjs",
   "module": "./dist/diy-guides-ui.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "diy-guide-images": "./bin/diy-guide-images.mjs"
+  },
   "exports": {
     ".": {
       "import": {
@@ -22,7 +25,8 @@
     "./styles": "./dist/style.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "bin"
   ],
   "sideEffects": [
     "**/*.css"
@@ -40,9 +44,16 @@
   "peerDependencies": {
     "online-3d-viewer": "^0.18.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "sharp": "^0.34.2"
+  },
+  "peerDependenciesMeta": {
+    "sharp": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "sharp": "^0.34.2",
     "@eslint/js": "^9.28.0",
     "@heroui/react": "^3.0.0",
     "@heroui/styles": "^3.0.0",
@@ -77,6 +88,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "pnpm": {
+    "onlyBuiltDependencies": ["sharp", "esbuild"]
+  },
   "dependencies": {
     "online-3d-viewer": "^0.18.0"
   }