etudes 5.0.0 → 5.2.0

package/components/FlatSVG.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * The SVG string markup, i.e. "<svg>...</svg>".
@@ -37,7 +37,7 @@ export type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {
  * will attempt to sanitize the markup (i.e. stripping useless attributes)
  * according to the props specified.
  */
-export declare const FlatSVG: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const FlatSVG: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /**
      * The SVG string markup, i.e. "<svg>...</svg>".
      */
@@ -46,27 +46,27 @@ export declare const FlatSVG: React.ForwardRefExoticComponent<React.HTMLAttribut
      * Specifies whether the 'class' should be removed in the SVG root node and
      * all of its child nodes.
      */
-    shouldStripClasses?: boolean | undefined;
+    shouldStripClasses?: boolean;
     /**
      * Specifies whether extraneous attributes should be removed from the SVG root
      * node. The `whitelistedAttributes` prop defines what attributes should be
      * kept.
      */
-    shouldStripExtraneousAttributes?: boolean | undefined;
+    shouldStripExtraneousAttributes?: boolean;
     /**
      * Specifies whether the 'id' attribute should be removed in the SVG root node
      * and all of its child nodes.
      */
-    shouldStripIds?: boolean | undefined;
+    shouldStripIds?: boolean;
     /**
      * Specifies whether the 'style' atribute and any <style> nodes should be
      * removed in the SVG root node and all of its child nodes.
      */
-    shouldStripStyles?: boolean | undefined;
+    shouldStripStyles?: boolean;
     /**
      * Specifies attribute names to exclude from being stripped if
      * `shouldStripExtraneousAttributes` is enabled. By default, only `viewBox` is
      * whitelisted.
      */
-    whitelistedAttributes?: string[] | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+    whitelistedAttributes?: string[];
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/FlatSVG.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -57,8 +34,9 @@ var __values = (this && this.__values) || function(o) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlatSVG = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var fast_xml_parser_1 = require("fast-xml-parser");
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 /**
  * A component whose root element wraps an SVG markup. When wrapping the SVG, it
  * will attempt to sanitize the markup (i.e. stripping useless attributes)
@@ -109,7 +87,7 @@ exports.FlatSVG = (0, react_1.forwardRef)(function (_a, ref) {
         var xml = parser.parse(svg);
         return builder.build(xml);
     };
-    return (react_1.default.createElement("figure", __assign({}, props, { "data-component": 'flat-svg', ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() } })));
+    return ((0, jsx_runtime_1.jsx)("figure", __assign({}, props, { ref: ref, dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, "data-component": 'flat-svg' })));
 });
 Object.defineProperty(exports.FlatSVG, 'displayName', { value: 'FlatSVG', writable: false });
 //# sourceMappingURL=FlatSVG.js.map

package/components/FlatSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["components/FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAuD;AACvD,6CAA8D;AAyC9D;;;;GAIG;AACU,QAAA,OAAO,GAAG,IAAA,kBAAU,EAA+B,UAAC,EAQhE,EAAE,GAAG;IAPJ,IAAA,GAAG,SAAA,EACH,0BAAyB,EAAzB,kBAAkB,mBAAG,IAAI,KAAA,EACzB,uCAAsC,EAAtC,+BAA+B,mBAAG,IAAI,KAAA,EACtC,sBAAqB,EAArB,cAAc,mBAAG,IAAI,KAAA,EACrB,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACxB,6BAAmC,EAAnC,qBAAqB,mBAAG,CAAC,SAAS,CAAC,KAAA,EAChC,KAAK,cAPuD,gIAQhE,CADS;IAER,IAAM,mBAAmB,GAAG,IAAI,CAAA;IAEhC,IAAM,eAAe,GAAG;QACtB,IAAM,MAAM,GAAG,IAAI,2BAAS,CAAC;YAC3B,mBAAmB,qBAAA;YACnB,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,IAAI;YACvB,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,UAAC,OAAO,EAAE,KAAK,EAAE,KAAK;;gBAC/B,IAAI,iBAAiB,IAAI,OAAO,KAAK,OAAO;oBAAE,OAAO,KAAK,CAAA;gBAE1D,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;oBAEpC,KAAuB,IAAA,cAAA,SAAA,SAAS,CAAA,oCAAA,2DAAE,CAAC;wBAA9B,IAAM,QAAQ,sBAAA;wBACjB,IAAI,cAAc,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,OAAI;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBACnG,IAAI,kBAAkB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBAC1G,IAAI,iBAAiB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;oBAC3G,CAAC;;;;;;;;;gBAED,OAAO,OAAO,CAAA;YAChB,CAAC;SACF,CAAC,CAAA;QAEF,IAAM,OAAO,GAAG,IAAI,4BAAU,CAAC;YAC7B,mBAAmB,qBAAA;YACnB,MAAM,EAAE,IAAI;YACZ,gBAAgB,EAAE,KAAK;SACxB,CAAC,CAAA;QAEF,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAE7B,OAAO,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,OAAO,CACL,qDACM,KAAK,sBACM,UAAU,EACzB,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,IACtD,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,eAAO,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA","sourcesContent":["import { XMLBuilder, XMLParser } from 'fast-xml-parser'\nimport React, { forwardRef, type HTMLAttributes } from 'react'\n\nexport type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  svg: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and\n   * all of its child nodes.\n   */\n  shouldStripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root\n   * node. The `whitelistedAttributes` prop defines what attributes should be\n   * kept.\n   */\n  shouldStripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node\n   * and all of its child nodes.\n   */\n  shouldStripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be\n   * removed in the SVG root node and all of its child nodes.\n   */\n  shouldStripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if\n   * `shouldStripExtraneousAttributes` is enabled. By default, only `viewBox` is\n   * whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it\n * will attempt to sanitize the markup (i.e. stripping useless attributes)\n * according to the props specified.\n */\nexport const FlatSVG = forwardRef<HTMLDivElement, FlatSVGProps>(({\n  svg,\n  shouldStripClasses = true,\n  shouldStripExtraneousAttributes = true,\n  shouldStripIds = true,\n  shouldStripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  const attributeNamePrefix = '@_'\n\n  const sanitizedMarkup = () => {\n    const parser = new XMLParser({\n      attributeNamePrefix,\n      ignoreAttributes: false,\n      ignoreDeclaration: true,\n      ignorePiTags: true,\n      removeNSPrefix: true,\n      trimValues: true,\n      updateTag: (tagName, jPath, attrs) => {\n        if (shouldStripStyles && tagName === 'style') return false\n\n        const attrNames = Object.keys(attrs)\n\n        for (const attrName of attrNames) {\n          if (shouldStripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`) delete attrs[attrName]\n          if (shouldStripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`) delete attrs[attrName]\n          if (shouldStripStyles && attrName.toLowerCase() === `${attributeNamePrefix}style`) delete attrs[attrName]\n        }\n\n        return tagName\n      },\n    })\n\n    const builder = new XMLBuilder({\n      attributeNamePrefix,\n      format: true,\n      ignoreAttributes: false,\n    })\n\n    const xml = parser.parse(svg)\n\n    return builder.build(xml)\n  }\n\n  return (\n    <figure\n      {...props}\n      data-component='flat-svg'\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n    />\n  )\n})\n\nObject.defineProperty(FlatSVG, 'displayName', { value: 'FlatSVG', writable: false })\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["components/FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAuD;AACvD,+BAAuD;AAyCvD;;;;GAIG;AACU,QAAA,OAAO,GAAG,IAAA,kBAAU,EAA+B,UAAC,EAQhE,EAAE,GAAG;IAPJ,IAAA,GAAG,SAAA,EACH,0BAAyB,EAAzB,kBAAkB,mBAAG,IAAI,KAAA,EACzB,uCAAsC,EAAtC,+BAA+B,mBAAG,IAAI,KAAA,EACtC,sBAAqB,EAArB,cAAc,mBAAG,IAAI,KAAA,EACrB,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACxB,6BAAmC,EAAnC,qBAAqB,mBAAG,CAAC,SAAS,CAAC,KAAA,EAChC,KAAK,cAPuD,gIAQhE,CADS;IAER,IAAM,mBAAmB,GAAG,IAAI,CAAA;IAEhC,IAAM,eAAe,GAAG;QACtB,IAAM,MAAM,GAAG,IAAI,2BAAS,CAAC;YAC3B,mBAAmB,qBAAA;YACnB,gBAAgB,EAAE,KAAK;YACvB,iBAAiB,EAAE,IAAI;YACvB,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,UAAC,OAAO,EAAE,KAAK,EAAE,KAAK;;gBAC/B,IAAI,iBAAiB,IAAI,OAAO,KAAK,OAAO;oBAAE,OAAO,KAAK,CAAA;gBAE1D,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;oBAEpC,KAAuB,IAAA,cAAA,SAAA,SAAS,CAAA,oCAAA,2DAAE,CAAC;wBAA9B,IAAM,QAAQ,sBAAA;wBACjB,IAAI,cAAc,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,OAAI;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBACnG,IAAI,kBAAkB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;wBAC1G,IAAI,iBAAiB,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,UAAG,mBAAmB,UAAO;4BAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;oBAC3G,CAAC;;;;;;;;;gBAED,OAAO,OAAO,CAAA;YAChB,CAAC;SACF,CAAC,CAAA;QAEF,IAAM,OAAO,GAAG,IAAI,4BAAU,CAAC;YAC7B,mBAAmB,qBAAA;YACnB,MAAM,EAAE,IAAI;YACZ,gBAAgB,EAAE,KAAK;SACxB,CAAC,CAAA;QAEF,IAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAE7B,OAAO,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,OAAO,CACL,8CACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,oBACvC,UAAU,IACzB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,eAAO,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA","sourcesContent":["import { XMLBuilder, XMLParser } from 'fast-xml-parser'\nimport { forwardRef, type HTMLAttributes } from 'react'\n\nexport type FlatSVGProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  svg: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and\n   * all of its child nodes.\n   */\n  shouldStripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root\n   * node. The `whitelistedAttributes` prop defines what attributes should be\n   * kept.\n   */\n  shouldStripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node\n   * and all of its child nodes.\n   */\n  shouldStripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be\n   * removed in the SVG root node and all of its child nodes.\n   */\n  shouldStripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if\n   * `shouldStripExtraneousAttributes` is enabled. By default, only `viewBox` is\n   * whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it\n * will attempt to sanitize the markup (i.e. stripping useless attributes)\n * according to the props specified.\n */\nexport const FlatSVG = forwardRef<HTMLDivElement, FlatSVGProps>(({\n  svg,\n  shouldStripClasses = true,\n  shouldStripExtraneousAttributes = true,\n  shouldStripIds = true,\n  shouldStripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  const attributeNamePrefix = '@_'\n\n  const sanitizedMarkup = () => {\n    const parser = new XMLParser({\n      attributeNamePrefix,\n      ignoreAttributes: false,\n      ignoreDeclaration: true,\n      ignorePiTags: true,\n      removeNSPrefix: true,\n      trimValues: true,\n      updateTag: (tagName, jPath, attrs) => {\n        if (shouldStripStyles && tagName === 'style') return false\n\n        const attrNames = Object.keys(attrs)\n\n        for (const attrName of attrNames) {\n          if (shouldStripIds && attrName.toLowerCase() === `${attributeNamePrefix}id`) delete attrs[attrName]\n          if (shouldStripClasses && attrName.toLowerCase() === `${attributeNamePrefix}class`) delete attrs[attrName]\n          if (shouldStripStyles && attrName.toLowerCase() === `${attributeNamePrefix}style`) delete attrs[attrName]\n        }\n\n        return tagName\n      },\n    })\n\n    const builder = new XMLBuilder({\n      attributeNamePrefix,\n      format: true,\n      ignoreAttributes: false,\n    })\n\n    const xml = parser.parse(svg)\n\n    return builder.build(xml)\n  }\n\n  return (\n    <figure\n      {...props}\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      data-component='flat-svg'\n    />\n  )\n})\n\nObject.defineProperty(FlatSVG, 'displayName', { value: 'FlatSVG', writable: false })\n"]}

package/components/Image.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import { type Size } from 'spase';
 export type ImageProps = Omit<HTMLAttributes<HTMLImageElement>, 'alt' | 'srcSet' | 'sizes' | 'src' | 'loading' | 'onLoadStart'> & {
     /**
@@ -71,15 +71,15 @@ export type ImageProps = Omit<HTMLAttributes<HTMLImageElement>, 'alt' | 'srcSet'
      */
     onSizeChange?: (size?: Size) => void;
 };
-export declare const Image: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "sizes" | "onLoadStart" | "alt" | "loading"> & {
+export declare const Image: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "sizes" | "onLoadStart" | "alt" | "loading"> & {
     /**
      * Optional alt text.
      */
-    alt?: string | undefined;
+    alt?: string;
     /**
      * Loading mode for the image.
      */
-    loadingMode?: "none" | "lazy" | "preload" | undefined;
+    loadingMode?: "none" | "lazy" | "preload";
     /**
      * Descriptor for the `srcset` attribute of the `<img>` element. If `sizes` is
      * also provided, then each entry in this list must have a `width` value and
@@ -95,14 +95,14 @@ export declare const Image: React.ForwardRefExoticComponent<Omit<React.HTMLAttri
          * integer. If set, leave `pixelDensity` unspecified (only one of `width` or
          * `pixelDensity` can be specified).
          */
-        width?: number | undefined;
+        width?: number;
         /**
          * Optional pixel density of the image expressed as a positive floating
          * number. If set, leave `width` unspecified (only one of `width` or
          * `pixelDensity` can be specified.
          */
-        pixelDensity?: number | undefined;
-    }[] | undefined;
+        pixelDensity?: number;
+    }[];
     /**
      * Descriptor for the `sizes` attribute of the `<img>` element.
      */
@@ -112,33 +112,33 @@ export declare const Image: React.ForwardRefExoticComponent<Omit<React.HTMLAttri
          * 100px`). Note that this must be omitted for the last item in this list of
          * sizes.
          */
-        mediaCondition?: string | undefined;
+        mediaCondition?: string;
         /**
          * A CSS size value indicating the size of the image's slot on the page,
          * i.e. `100px`, `100vw`, `50%`, etc.
          */
         width: string;
-    }[] | undefined;
+    }[];
     /**
      * Fallback image URL for browsers that do not support the `srcset` attribute.
      */
-    src?: string | undefined;
+    src?: string;
     /**
      * Handler invoked when image load begins.
      */
-    onLoadStart?: (() => void) | undefined;
+    onLoadStart?: () => void;
     /**
      * Handler invoked when image load completes.
      */
-    onLoadComplete?: (() => void) | undefined;
+    onLoadComplete?: () => void;
     /**
      * Handler invoked when image load encounters an error.
      */
-    onLoadError?: (() => void) | undefined;
+    onLoadError?: () => void;
     /**
      * Handler invoked when the size of the loaded image changes.
      *
      * @param size Size of the loaded image.
      */
-    onSizeChange?: ((size?: Size) => void) | undefined;
-} & React.RefAttributes<HTMLImageElement>>;
+    onSizeChange?: (size?: Size) => void;
+} & import("react").RefAttributes<HTMLImageElement>>;

package/components/Image.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -46,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var useImageSize_1 = require("../hooks/useImageSize");
 exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
     var alt = _a.alt, _b = _a.loadingMode, loadingMode = _b === void 0 ? 'preload' : _b, sizes = _a.sizes, fallbackSrc = _a.src, srcSet = _a.srcSet, onLoadStart = _a.onLoadStart, onLoadComplete = _a.onLoadComplete, onLoadError = _a.onLoadError, onSizeChange = _a.onSizeChange, props = __rest(_a, ["alt", "loadingMode", "sizes", "src", "srcSet", "onLoadStart", "onLoadComplete", "onLoadError", "onSizeChange"]);
@@ -92,7 +70,7 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
     (0, react_1.useEffect)(function () {
         onSizeChange === null || onSizeChange === void 0 ? void 0 : onSizeChange(size);
     }, [size]);
-    return (react_1.default.createElement("img", __assign({}, props, { ref: ref, alt: alt, "data-component": 'image', loading: loadingMode === 'lazy' ? 'lazy' : 'eager', srcSet: srcSetValue, sizes: sizesValue, src: fallbackSrc })));
+    return ((0, jsx_runtime_1.jsx)("img", __assign({}, props, { ref: ref, alt: alt, "data-component": 'image', loading: loadingMode === 'lazy' ? 'lazy' : 'eager', sizes: sizesValue, src: fallbackSrc, srcSet: srcSetValue })));
 });
 Object.defineProperty(exports.Image, 'displayName', { value: 'Image', writable: false });
 //# sourceMappingURL=Image.js.map

package/components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"/","sources":["components/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, type HTMLAttributes } from 'react'\nimport { type Size } from 'spase'\nimport { useImageSize } from '../hooks/useImageSize'\n\nexport type ImageProps = Omit<HTMLAttributes<HTMLImageElement>, 'alt' | 'srcSet' | 'sizes' | 'src' | 'loading' | 'onLoadStart'> & {\n  /**\n   * Optional alt text.\n   */\n  alt?: string\n\n  /**\n   * Loading mode for the image.\n   */\n  loadingMode?: 'none' | 'lazy' | 'preload'\n\n  /**\n   * Descriptor for the `srcset` attribute of the `<img>` element. If `sizes` is\n   * also provided, then each entry in this list must have a `width` value and\n   * no `pixelDensity` value.\n   */\n  srcSet?: {\n    /**\n     * A URL specifying an image location.\n     */\n    src: string\n\n    /**\n     * Optional intrinsic width (in pixels) of the image expressed as a positive\n     * integer. If set, leave `pixelDensity` unspecified (only one of `width` or\n     * `pixelDensity` can be specified).\n     */\n    width?: number\n\n    /**\n     * Optional pixel density of the image expressed as a positive floating\n     * number. If set, leave `width` unspecified (only one of `width` or\n     * `pixelDensity` can be specified.\n     */\n    pixelDensity?: number\n  }[]\n\n  /**\n   * Descriptor for the `sizes` attribute of the `<img>` element.\n   */\n  sizes?: {\n    /**\n     * Optional media query condition (without brackets, i.e. `max-width:\n     * 100px`). Note that this must be omitted for the last item in this list of\n     * sizes.\n     */\n    mediaCondition?: string\n\n    /**\n     * A CSS size value indicating the size of the image's slot on the page,\n     * i.e. `100px`, `100vw`, `50%`, etc.\n     */\n    width: string\n  }[]\n\n  /**\n   * Fallback image URL for browsers that do not support the `srcset` attribute.\n   */\n  src?: string\n\n  /**\n   * Handler invoked when image load begins.\n   */\n  onLoadStart?: () => void\n\n  /**\n   * Handler invoked when image load completes.\n   */\n  onLoadComplete?: () => void\n\n  /**\n   * Handler invoked when image load encounters an error.\n   */\n  onLoadError?: () => void\n\n  /**\n   * Handler invoked when the size of the loaded image changes.\n   *\n   * @param size Size of the loaded image.\n   */\n  onSizeChange?: (size?: Size) => void\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(({\n  alt,\n  loadingMode = 'preload',\n  sizes,\n  src: fallbackSrc,\n  srcSet,\n  onLoadStart,\n  onLoadComplete,\n  onLoadError,\n  onSizeChange,\n  ...props\n}, ref) => {\n  const srcSetValue = srcSet?.map(({ pixelDensity, src, width }) => {\n    if (sizes && width === undefined) throw Error('`width` must be specified if `sizes` is specified')\n    if (width !== undefined && pixelDensity !== undefined) throw Error('Only one of `width` or `pixelDensity` can be specified.')\n\n    let t = src\n\n    if (width !== undefined) {\n      const w = Math.floor(width)\n\n      if (!isFinite(w) || String(w) !== String(width) || w <= 0) throw Error('The specified width must be a positive integer greater than 0')\n\n      t += ` ${w}w`\n    }\n    else if (pixelDensity !== undefined) {\n      if (!isFinite(pixelDensity) || pixelDensity <= 0) throw Error('The specified pixel density must be a positive floating number than 0')\n\n      t += ` ${pixelDensity}x`\n    }\n\n    return t\n  }).join(', ')\n\n  const sizesValue = sizes?.map(({ mediaCondition, width }, idx) => {\n    const isLast = idx === sizes.length - 1\n    let t = width\n\n    if (isLast && mediaCondition) throw Error('The last item in `sizes` must not have a `mediaCondition` specified.')\n    if (mediaCondition) t = `${mediaCondition} ${t}`\n\n    return t\n  }).join(', ')\n\n  const size = useImageSize({\n    src: fallbackSrc,\n    srcSet: srcSetValue,\n    sizes: sizesValue,\n  }, {\n    onLoadStart,\n    onLoadComplete,\n    onLoadError,\n  })\n\n  useEffect(() => {\n    onSizeChange?.(size)\n  }, [size])\n\n  return (\n    <img\n      {...props}\n      ref={ref}\n      alt={alt}\n      data-component='image'\n      loading={loadingMode === 'lazy' ? 'lazy' : 'eager'}\n      srcSet={srcSetValue}\n      sizes={sizesValue}\n      src={fallbackSrc}\n    />\n  )\n})\n\nObject.defineProperty(Image, 'displayName', { value: 'Image', writable: false })\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"/","sources":["components/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, type HTMLAttributes } from 'react'\nimport { type Size } from 'spase'\nimport { useImageSize } from '../hooks/useImageSize'\n\nexport type ImageProps = Omit<HTMLAttributes<HTMLImageElement>, 'alt' | 'srcSet' | 'sizes' | 'src' | 'loading' | 'onLoadStart'> & {\n  /**\n   * Optional alt text.\n   */\n  alt?: string\n\n  /**\n   * Loading mode for the image.\n   */\n  loadingMode?: 'none' | 'lazy' | 'preload'\n\n  /**\n   * Descriptor for the `srcset` attribute of the `<img>` element. If `sizes` is\n   * also provided, then each entry in this list must have a `width` value and\n   * no `pixelDensity` value.\n   */\n  srcSet?: {\n    /**\n     * A URL specifying an image location.\n     */\n    src: string\n\n    /**\n     * Optional intrinsic width (in pixels) of the image expressed as a positive\n     * integer. If set, leave `pixelDensity` unspecified (only one of `width` or\n     * `pixelDensity` can be specified).\n     */\n    width?: number\n\n    /**\n     * Optional pixel density of the image expressed as a positive floating\n     * number. If set, leave `width` unspecified (only one of `width` or\n     * `pixelDensity` can be specified.\n     */\n    pixelDensity?: number\n  }[]\n\n  /**\n   * Descriptor for the `sizes` attribute of the `<img>` element.\n   */\n  sizes?: {\n    /**\n     * Optional media query condition (without brackets, i.e. `max-width:\n     * 100px`). Note that this must be omitted for the last item in this list of\n     * sizes.\n     */\n    mediaCondition?: string\n\n    /**\n     * A CSS size value indicating the size of the image's slot on the page,\n     * i.e. `100px`, `100vw`, `50%`, etc.\n     */\n    width: string\n  }[]\n\n  /**\n   * Fallback image URL for browsers that do not support the `srcset` attribute.\n   */\n  src?: string\n\n  /**\n   * Handler invoked when image load begins.\n   */\n  onLoadStart?: () => void\n\n  /**\n   * Handler invoked when image load completes.\n   */\n  onLoadComplete?: () => void\n\n  /**\n   * Handler invoked when image load encounters an error.\n   */\n  onLoadError?: () => void\n\n  /**\n   * Handler invoked when the size of the loaded image changes.\n   *\n   * @param size Size of the loaded image.\n   */\n  onSizeChange?: (size?: Size) => void\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(({\n  alt,\n  loadingMode = 'preload',\n  sizes,\n  src: fallbackSrc,\n  srcSet,\n  onLoadStart,\n  onLoadComplete,\n  onLoadError,\n  onSizeChange,\n  ...props\n}, ref) => {\n  const srcSetValue = srcSet?.map(({ pixelDensity, src, width }) => {\n    if (sizes && width === undefined) throw Error('`width` must be specified if `sizes` is specified')\n    if (width !== undefined && pixelDensity !== undefined) throw Error('Only one of `width` or `pixelDensity` can be specified.')\n\n    let t = src\n\n    if (width !== undefined) {\n      const w = Math.floor(width)\n\n      if (!isFinite(w) || String(w) !== String(width) || w <= 0) throw Error('The specified width must be a positive integer greater than 0')\n\n      t += ` ${w}w`\n    }\n    else if (pixelDensity !== undefined) {\n      if (!isFinite(pixelDensity) || pixelDensity <= 0) throw Error('The specified pixel density must be a positive floating number than 0')\n\n      t += ` ${pixelDensity}x`\n    }\n\n    return t\n  }).join(', ')\n\n  const sizesValue = sizes?.map(({ mediaCondition, width }, idx) => {\n    const isLast = idx === sizes.length - 1\n    let t = width\n\n    if (isLast && mediaCondition) throw Error('The last item in `sizes` must not have a `mediaCondition` specified.')\n    if (mediaCondition) t = `${mediaCondition} ${t}`\n\n    return t\n  }).join(', ')\n\n  const size = useImageSize({\n    src: fallbackSrc,\n    srcSet: srcSetValue,\n    sizes: sizesValue,\n  }, {\n    onLoadStart,\n    onLoadComplete,\n    onLoadError,\n  })\n\n  useEffect(() => {\n    onSizeChange?.(size)\n  }, [size])\n\n  return (\n    <img\n      {...props}\n      ref={ref}\n      alt={alt}\n      data-component='image'\n      loading={loadingMode === 'lazy' ? 'lazy' : 'eager'}\n      sizes={sizesValue}\n      src={fallbackSrc}\n      srcSet={srcSetValue}\n    />\n  )\n})\n\nObject.defineProperty(Image, 'displayName', { value: 'Image', writable: false })\n"]}

package/components/MasonryGrid.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { type HTMLAttributes } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type MasonryGridProps = {
     areSectionsAligned?: boolean;
@@ -25,5 +25,5 @@ export type MasonryGridProps = {
  * rows*, whereas in a horizontally oriented grid, *number of sections* refers
  * to the *number of columns*.
  */
-export declare const MasonryGrid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & MasonryGridProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MasonryGrid: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & MasonryGridProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/components/MasonryGrid.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -85,8 +62,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MasonryGrid = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var clsx_1 = __importDefault(require("clsx"));
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var spase_1 = require("spase");
 var useResizeEffect_1 = require("../hooks/useResizeEffect");
 var utils_1 = require("../utils");
@@ -270,8 +248,7 @@ exports.MasonryGrid = (0, react_1.forwardRef)(function (_a, ref) {
     }, [children]);
     var fixedClassNames = getFixedClassNames({ orientation: orientation });
     var fixedStyles = getFixedStyles({ orientation: orientation, minHeight: minHeight, minWidth: minWidth });
-    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'masonry-grid' }),
-        react_1.default.createElement("div", { ref: bodyRef, style: fixedStyles.body }, children)));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'masonry-grid', children: (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, style: fixedStyles.body, children: children }) })));
 });
 Object.defineProperty(exports.MasonryGrid, 'displayName', { value: 'MasonryGrid', writable: false });
 function getFixedClassNames(_a) {

package/components/MasonryGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["components/MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react'\nimport { Rect, Size } from 'spase'\nimport { useResizeEffect } from '../hooks/useResizeEffect'\nimport { asClassNameDict, asStyleDict } from '../utils'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type MasonryGridProps = {\n  areSectionsAligned?: boolean\n  horizontalSpacing?: number\n  isReversed?: boolean\n  orientation?: Orientation\n  sections?: number\n  verticalSpacing?: number\n}\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * This is a React component that arranges all of its immediate children in a\n * masonry grid. Refrain from assigning CSS styles to it via `className` or\n * `style` property, though they are still handled if absolutely necessary.\n * Customize the grid via its supported properties. The grid can be in either\n * vertical or horizontal orientation. The length of every child element\n * *parallel to the direction of the orientation* is automatically set according\n * to the number of sections specified for the grid. This means that in an\n * horizontally oriented grid, the *width* of each child element is\n * automatically set, whereas in a vertically oriented grid the *height* of each\n * child element is automatically set. Additionally, the *number of sections*\n * corresponds to the maximum the number of child elements present in the\n * direction that is parallel to the orientation of the grid. Hence, in a\n * vertically oriented grid, *number of secitons* refers to the *number of\n * rows*, whereas in a horizontally oriented grid, *number of sections* refers\n * to the *number of columns*.\n */\nexport const MasonryGrid = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & MasonryGridProps>(({\n  areSectionsAligned = false,\n  children,\n  className,\n  horizontalSpacing = 0,\n  isReversed = false,\n  orientation = 'vertical',\n  sections = 3,\n  verticalSpacing = 0,\n  ...props\n}, ref) => {\n  const bodyRef = useRef<HTMLDivElement>(null)\n\n  const [minWidth, setMinWidth] = useState(NaN)\n  const [minHeight, setMinHeight] = useState(NaN)\n  const [maxWidth, setMaxWidth] = useState(NaN)\n  const [maxHeight, setMaxHeight] = useState(NaN)\n\n  const getCurrentWidth = () => Rect.from(bodyRef.current)?.width ?? 0\n\n  const getCurrentHeight = () => Rect.from(bodyRef.current)?.height ?? 0\n\n  const repositionChildren = () => {\n    const rootNode = bodyRef.current\n\n    if (!rootNode) return\n\n    const nodes = rootNode.children\n    const numSections = sections\n\n    if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n    if (orientation === 'vertical') {\n      const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (const child of Array.from(nodes)) {\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n        child.style.position = 'absolute'\n        child.style.width = `calc(${100 / numSections * base}% - ${horizontalSpacing * (numSections - 1) / numSections * base}px + ${horizontalSpacing * (base - 1)}px)`\n        child.style.height = ''\n        child.style.left = `calc(${100 / numSections * colIdx}% - ${horizontalSpacing * (numSections - 1) / numSections * colIdx}px + ${horizontalSpacing * colIdx}px)`\n        child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n        }\n\n        if (areSectionsAligned && colIdx + base === numSections) {\n          const m = computeMaxLength(sectionHeights)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionHeights[j] = m\n          }\n        }\n      }\n\n      const w = getCurrentWidth()\n      const h = computeMaxLength(sectionHeights, numSections)\n\n      setMinWidth(w)\n      setMinHeight(h)\n\n      if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n      if (isReversed) {\n        for (const child of Array.from(nodes)) {\n          if (!(child instanceof HTMLElement)) continue\n\n          const x = parseFloat(child.style.left)\n\n          child.style.left = `${w - x - parseFloat(child.style.width)}px`\n        }\n      }\n    }\n    else {\n      const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (const child of Array.from(nodes)) {\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n        child.style.position = 'absolute'\n        child.style.width = ''\n        child.style.height = `calc(${100 / numSections * base}% - ${verticalSpacing * (numSections - 1) / numSections * base}px + ${verticalSpacing * (base - 1)}px)`\n        child.style.top = `calc(${100 / numSections * rowIdx}% - ${verticalSpacing * (numSections - 1) / numSections * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n        child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n        }\n\n        if (areSectionsAligned && rowIdx + base === numSections) {\n          const m = computeMaxLength(sectionWidths)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionWidths[j] = m\n          }\n        }\n      }\n\n      const h = getCurrentHeight()\n      const w = computeMaxLength(sectionWidths, numSections)\n\n      setMinHeight(h)\n      setMinWidth(w)\n\n      if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n      if (isReversed) {\n        for (const child of Array.from(nodes)) {\n          if (!(child instanceof HTMLElement)) continue\n\n          const y = parseFloat(child.style.top)\n\n          child.style.top = `${h - y - parseFloat(child.style.height)}px`\n        }\n      }\n    }\n  }\n\n  useResizeEffect(bodyRef, {\n    onResize: element => {\n      const maxSize = Rect.from(element)?.size ?? new Size()\n      const currWidth = getCurrentWidth()\n      const currHeight = getCurrentHeight()\n\n      if (minWidth !== currWidth || minHeight !== currHeight || maxSize.width !== maxWidth || maxSize.height !== maxHeight) {\n        repositionChildren()\n        setMaxWidth(maxSize.width)\n        setMaxHeight(maxSize.height)\n      }\n    },\n  }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n  useEffect(() => {\n    const imageSources = getAllImageSources(bodyRef.current?.innerHTML)\n\n    if (imageSources.length === 0) return repositionChildren()\n\n    const numImages = imageSources.length\n\n    for (let i = 0; i < numImages; i++) {\n      const src = imageSources[i]\n      const image = new Image()\n      image.src = src\n      image.onload = () => repositionChildren()\n    }\n  }, [children])\n\n  const fixedClassNames = getFixedClassNames({ orientation })\n  const fixedStyles = getFixedStyles({ orientation, minHeight, minWidth })\n\n  return (\n    <div {...props} ref={ref} className={clsx(className, fixedClassNames.root)} data-component='masonry-grid'>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {children}\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(MasonryGrid, 'displayName', { value: 'MasonryGrid', writable: false })\n\nfunction getFixedClassNames({ orientation = 'horizontal' }) {\n  return asClassNameDict({\n    root: clsx(orientation),\n  })\n}\n\nfunction getFixedStyles({ orientation = 'horizontal', minHeight = NaN, minWidth = NaN }) {\n  return asStyleDict({\n    body: {\n      height: orientation === 'horizontal' ? '100%' : 'auto',\n      minHeight: orientation === 'vertical' && !isNaN(minHeight) ? `${minHeight}px` : '',\n      minWidth: orientation === 'horizontal' && !isNaN(minWidth) ? `${minWidth}px` : '',\n      padding: '0',\n      width: orientation === 'horizontal' ? 'auto' : '100%',\n    },\n  })\n}\n\n/**\n * Computes the index and current length of the next available section for a\n * specific base value, based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths An array of the current section lengths.\n * @param base The base value of the item to be inserted into the grid, and to\n *             be used to evaluate the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be\n *          length if a new item were to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n  const numSections = currentSectionLengths.length\n\n  let sectionIdx = NaN\n  let minLength = Infinity\n\n  for (let i = 0; i < numSections; i++) {\n    const length = currentSectionLengths[i]\n    const isShorter = length < minLength\n    const isEligibleSection = i + base <= numSections\n    let hasRoomInSubsequentSections = true\n\n    for (let j = 1; j < base; j++) {\n      if (currentSectionLengths[i + j] > length) {\n        hasRoomInSubsequentSections = false\n      }\n    }\n\n    if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n      sectionIdx = i\n      minLength = length\n    }\n  }\n\n  if (isNaN(sectionIdx)) {\n    return [0, computeMaxLength(currentSectionLengths, base)]\n  }\n  else {\n    return [sectionIdx, minLength]\n  }\n}\n\n/**\n * A helper function that computes the max section length of an array of section\n * lengths. Only the first n = `base` sections are inspected.\n *\n * @param currentSectionLengths An array of section lengths.\n * @param base The number representing the first n sections to inspect. Any\n *             non-numerical values will be ignored and return value will be\n *             based on all sections. A `base` value will be clamped between 1\n *             and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n  let arr = currentSectionLengths\n\n  if (base !== undefined && base !== null && !isNaN(base)) {\n    arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n  }\n\n  return arr.reduce((out, curr, i) => curr > out ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element The HTML element.\n * @param numSections Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of\n *          sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n  const classList = element.classList\n\n  for (const c of Array.from(classList)) {\n    if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n      const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n      if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n    }\n  }\n\n  return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n  if (!htmlString) return []\n\n  const regexImg = /<img.*?src=([\"'])(.*?)\\1/g\n  const regexSrc = /<img.*?src=([\"'])(.*?)\\1/\n  const imageTags = regexImg.exec(htmlString) ?? []\n\n  const out: string[] = []\n\n  for (const tag of imageTags) {\n    const src = regexSrc.exec(tag)?.[2]\n\n    if (!src) continue\n\n    out.push(src)\n  }\n\n  return out\n}\n"]}
+{"version":3,"file":"MasonryGrid.js","sourceRoot":"/","sources":["components/MasonryGrid.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react'\nimport { Rect, Size } from 'spase'\nimport { useResizeEffect } from '../hooks/useResizeEffect'\nimport { asClassNameDict, asStyleDict } from '../utils'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type MasonryGridProps = {\n  areSectionsAligned?: boolean\n  horizontalSpacing?: number\n  isReversed?: boolean\n  orientation?: Orientation\n  sections?: number\n  verticalSpacing?: number\n}\n\nconst BASE_MODIFIER_CLASS_PREFIX = 'base-'\n\n/**\n * This is a React component that arranges all of its immediate children in a\n * masonry grid. Refrain from assigning CSS styles to it via `className` or\n * `style` property, though they are still handled if absolutely necessary.\n * Customize the grid via its supported properties. The grid can be in either\n * vertical or horizontal orientation. The length of every child element\n * *parallel to the direction of the orientation* is automatically set according\n * to the number of sections specified for the grid. This means that in an\n * horizontally oriented grid, the *width* of each child element is\n * automatically set, whereas in a vertically oriented grid the *height* of each\n * child element is automatically set. Additionally, the *number of sections*\n * corresponds to the maximum the number of child elements present in the\n * direction that is parallel to the orientation of the grid. Hence, in a\n * vertically oriented grid, *number of secitons* refers to the *number of\n * rows*, whereas in a horizontally oriented grid, *number of sections* refers\n * to the *number of columns*.\n */\nexport const MasonryGrid = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & MasonryGridProps>(({\n  areSectionsAligned = false,\n  children,\n  className,\n  horizontalSpacing = 0,\n  isReversed = false,\n  orientation = 'vertical',\n  sections = 3,\n  verticalSpacing = 0,\n  ...props\n}, ref) => {\n  const bodyRef = useRef<HTMLDivElement>(null)\n\n  const [minWidth, setMinWidth] = useState(NaN)\n  const [minHeight, setMinHeight] = useState(NaN)\n  const [maxWidth, setMaxWidth] = useState(NaN)\n  const [maxHeight, setMaxHeight] = useState(NaN)\n\n  const getCurrentWidth = () => Rect.from(bodyRef.current)?.width ?? 0\n\n  const getCurrentHeight = () => Rect.from(bodyRef.current)?.height ?? 0\n\n  const repositionChildren = () => {\n    const rootNode = bodyRef.current\n\n    if (!rootNode) return\n\n    const nodes = rootNode.children\n    const numSections = sections\n\n    if (numSections <= 0) throw new Error('You must specifiy a minimum of 1 section(s) (a.k.a. row(s) for horizontal orientation, column(s) for vertical orientation) for a MasonryGrid instance')\n\n    if (orientation === 'vertical') {\n      const sectionHeights: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (const child of Array.from(nodes)) {\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [colIdx, y] = computeNextAvailableSectionAndLengthByBase(sectionHeights, base)\n\n        child.style.position = 'absolute'\n        child.style.width = `calc(${100 / numSections * base}% - ${horizontalSpacing * (numSections - 1) / numSections * base}px + ${horizontalSpacing * (base - 1)}px)`\n        child.style.height = ''\n        child.style.left = `calc(${100 / numSections * colIdx}% - ${horizontalSpacing * (numSections - 1) / numSections * colIdx}px + ${horizontalSpacing * colIdx}px)`\n        child.style.top = `${y + (y === 0 ? 0 : verticalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionHeights[colIdx + j] = y + (y === 0 ? 0 : verticalSpacing) + (Rect.from(child)?.height ?? 0)\n        }\n\n        if (areSectionsAligned && colIdx + base === numSections) {\n          const m = computeMaxLength(sectionHeights)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionHeights[j] = m\n          }\n        }\n      }\n\n      const w = getCurrentWidth()\n      const h = computeMaxLength(sectionHeights, numSections)\n\n      setMinWidth(w)\n      setMinHeight(h)\n\n      if (!isNaN(h)) rootNode.style.height = `${h}px`\n\n      if (isReversed) {\n        for (const child of Array.from(nodes)) {\n          if (!(child instanceof HTMLElement)) continue\n\n          const x = parseFloat(child.style.left)\n\n          child.style.left = `${w - x - parseFloat(child.style.width)}px`\n        }\n      }\n    }\n    else {\n      const sectionWidths: number[] = [...new Array(numSections)].map(() => 0)\n\n      for (const child of Array.from(nodes)) {\n        if (!(child instanceof HTMLElement)) continue\n\n        const base = computeBaseFromElement(child, sections)\n        const [rowIdx, x] = computeNextAvailableSectionAndLengthByBase(sectionWidths, base)\n\n        child.style.position = 'absolute'\n        child.style.width = ''\n        child.style.height = `calc(${100 / numSections * base}% - ${verticalSpacing * (numSections - 1) / numSections * base}px + ${verticalSpacing * (base - 1)}px)`\n        child.style.top = `calc(${100 / numSections * rowIdx}% - ${verticalSpacing * (numSections - 1) / numSections * rowIdx}px + ${verticalSpacing * rowIdx}px)`\n        child.style.left = `${x + (x === 0 ? 0 : horizontalSpacing)}px`\n\n        for (let j = 0; j < base; j++) {\n          sectionWidths[rowIdx + j] = x + (x === 0 ? 0 : horizontalSpacing) + (Rect.from(child)?.width ?? 0)\n        }\n\n        if (areSectionsAligned && rowIdx + base === numSections) {\n          const m = computeMaxLength(sectionWidths)\n\n          for (let j = 0; j < numSections; j++) {\n            sectionWidths[j] = m\n          }\n        }\n      }\n\n      const h = getCurrentHeight()\n      const w = computeMaxLength(sectionWidths, numSections)\n\n      setMinHeight(h)\n      setMinWidth(w)\n\n      if (!isNaN(w)) rootNode.style.width = `${w}px`\n\n      if (isReversed) {\n        for (const child of Array.from(nodes)) {\n          if (!(child instanceof HTMLElement)) continue\n\n          const y = parseFloat(child.style.top)\n\n          child.style.top = `${h - y - parseFloat(child.style.height)}px`\n        }\n      }\n    }\n  }\n\n  useResizeEffect(bodyRef, {\n    onResize: element => {\n      const maxSize = Rect.from(element)?.size ?? new Size()\n      const currWidth = getCurrentWidth()\n      const currHeight = getCurrentHeight()\n\n      if (minWidth !== currWidth || minHeight !== currHeight || maxSize.width !== maxWidth || maxSize.height !== maxHeight) {\n        repositionChildren()\n        setMaxWidth(maxSize.width)\n        setMaxHeight(maxSize.height)\n      }\n    },\n  }, [areSectionsAligned, horizontalSpacing, isReversed, sections, verticalSpacing])\n\n  useEffect(() => {\n    const imageSources = getAllImageSources(bodyRef.current?.innerHTML)\n\n    if (imageSources.length === 0) return repositionChildren()\n\n    const numImages = imageSources.length\n\n    for (let i = 0; i < numImages; i++) {\n      const src = imageSources[i]\n      const image = new Image()\n      image.src = src\n      image.onload = () => repositionChildren()\n    }\n  }, [children])\n\n  const fixedClassNames = getFixedClassNames({ orientation })\n  const fixedStyles = getFixedStyles({ orientation, minHeight, minWidth })\n\n  return (\n    <div {...props} ref={ref} className={clsx(className, fixedClassNames.root)} data-component='masonry-grid'>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {children}\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(MasonryGrid, 'displayName', { value: 'MasonryGrid', writable: false })\n\nfunction getFixedClassNames({ orientation = 'horizontal' }) {\n  return asClassNameDict({\n    root: clsx(orientation),\n  })\n}\n\nfunction getFixedStyles({ orientation = 'horizontal', minHeight = NaN, minWidth = NaN }) {\n  return asStyleDict({\n    body: {\n      height: orientation === 'horizontal' ? '100%' : 'auto',\n      minHeight: orientation === 'vertical' && !isNaN(minHeight) ? `${minHeight}px` : '',\n      minWidth: orientation === 'horizontal' && !isNaN(minWidth) ? `${minWidth}px` : '',\n      padding: '0',\n      width: orientation === 'horizontal' ? 'auto' : '100%',\n    },\n  })\n}\n\n/**\n * Computes the index and current length of the next available section for a\n * specific base value, based on a provided array of existing section lengths.\n *\n * @param currentSectionLengths An array of the current section lengths.\n * @param base The base value of the item to be inserted into the grid, and to\n *             be used to evaluate the next available section.\n *\n * @returns An array consiting of the computed section index and its to-be\n *          length if a new item were to be placed in it.\n */\nfunction computeNextAvailableSectionAndLengthByBase(currentSectionLengths: number[], base: number): [number, number] {\n  const numSections = currentSectionLengths.length\n\n  let sectionIdx = NaN\n  let minLength = Infinity\n\n  for (let i = 0; i < numSections; i++) {\n    const length = currentSectionLengths[i]\n    const isShorter = length < minLength\n    const isEligibleSection = i + base <= numSections\n    let hasRoomInSubsequentSections = true\n\n    for (let j = 1; j < base; j++) {\n      if (currentSectionLengths[i + j] > length) {\n        hasRoomInSubsequentSections = false\n      }\n    }\n\n    if (isShorter && isEligibleSection && hasRoomInSubsequentSections) {\n      sectionIdx = i\n      minLength = length\n    }\n  }\n\n  if (isNaN(sectionIdx)) {\n    return [0, computeMaxLength(currentSectionLengths, base)]\n  }\n  else {\n    return [sectionIdx, minLength]\n  }\n}\n\n/**\n * A helper function that computes the max section length of an array of section\n * lengths. Only the first n = `base` sections are inspected.\n *\n * @param currentSectionLengths An array of section lengths.\n * @param base The number representing the first n sections to inspect. Any\n *             non-numerical values will be ignored and return value will be\n *             based on all sections. A `base` value will be clamped between 1\n *             and the maximum length of the array of section lengths.\n *\n * @returns The max section length.\n */\nfunction computeMaxLength(currentSectionLengths: number[], base?: number): number {\n  let arr = currentSectionLengths\n\n  if (base !== undefined && base !== null && !isNaN(base)) {\n    arr = arr.slice(0, Math.max(1, Math.min(base, currentSectionLengths.length)))\n  }\n\n  return arr.reduce((out, curr, i) => curr > out ? curr : out, 0)\n}\n\n/**\n * Computes the base value of an element from its classes.\n *\n * @param element The HTML element.\n * @param numSections Total number of sections.\n *\n * @returns The computed base value that is clamped between 1 and max number of\n *          sections.\n */\nfunction computeBaseFromElement(element: HTMLElement, numSections: number): number {\n  const classList = element.classList\n\n  for (const c of Array.from(classList)) {\n    if (c.startsWith(BASE_MODIFIER_CLASS_PREFIX)) {\n      const base = parseFloat(c.replace(BASE_MODIFIER_CLASS_PREFIX, ''))\n      if (!isNaN(base)) return Math.min(Math.max(base, 1), numSections)\n    }\n  }\n\n  return 1\n}\n\n/**\n * Scans an HTML string and returns all the image sources.\n *\n * @param htmlString The HTML string.\n *\n * @returns The image sources.\n */\nfunction getAllImageSources(htmlString?: string): string[] {\n  if (!htmlString) return []\n\n  const regexImg = /<img.*?src=([\"'])(.*?)\\1/g\n  const regexSrc = /<img.*?src=([\"'])(.*?)\\1/\n  const imageTags = regexImg.exec(htmlString) ?? []\n\n  const out: string[] = []\n\n  for (const tag of imageTags) {\n    const src = regexSrc.exec(tag)?.[2]\n\n    if (!src) continue\n\n    out.push(src)\n  }\n\n  return out\n}\n"]}

package/components/Panorama.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import { Size } from 'spase';
 export type PanoramaHTMLAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'>;
 export type PanoramaProps = {
@@ -74,4 +74,4 @@ export type PanoramaProps = {
 /**
  * A component containing a pannable 360° panorama image. The angle supports two-way binding.
  */
-export declare const Panorama: React.ForwardRefExoticComponent<PanoramaHTMLAttributes & PanoramaProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Panorama: import("react").ForwardRefExoticComponent<PanoramaHTMLAttributes & PanoramaProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/Panorama.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -62,7 +39,8 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panorama = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var spase_1 = require("spase");
 var useDragValueEffect_1 = require("../hooks/useDragValueEffect");
 var useImageSize_1 = require("../hooks/useImageSize");
@@ -118,8 +96,7 @@ exports.Panorama = (0, react_1.forwardRef)(function (_a, ref) {
         onImageSizeChange === null || onImageSizeChange === void 0 ? void 0 : onImageSizeChange(imageSize);
     }, [imageSize === null || imageSize === void 0 ? void 0 : imageSize.width, imageSize === null || imageSize === void 0 ? void 0 : imageSize.height]);
     var fixedStyles = getFixedStyles({ src: src, displacement: displacement });
-    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, "data-component": 'panorama' }),
-        react_1.default.createElement("div", { ref: bodyRef, style: fixedStyles.body })));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-component": 'panorama', children: (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, style: fixedStyles.body }) })));
 });
 Object.defineProperty(exports.Panorama, 'displayName', { value: 'Panorama', writable: false });
 function getFixedStyles(_a) {

package/components/Panorama.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["components/Panorama.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA2F;AAC3F,+BAA4B;AAC5B,kEAAgE;AAChE,sDAAoD;AACpD,4CAA0C;AAC1C,kCAAsC;AAsFtC;;GAEG;AACU,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAAyD,UAAC,EAc3F,EAAE,GAAG;IAbJ,IAAA,aAAwB,EAAjB,aAAa,mBAAG,CAAC,KAAA,EACxB,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,GAAG,SAAA,EACH,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA,EACd,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,iBAAiB,uBAAA,EACd,KAAK,cAbkF,4LAc3F,CADS;IAER,IAAM,6BAA6B,GAAG,UAAC,eAAuB,EAAE,EAAU,EAAE,EAAU;QACpF,IAAM,eAAe,GAAG,eAAe,GAAG,EAAE,GAAG,KAAK,CAAA;QAEpD,OAAO,eAAe,CAAA;IACxB,CAAC,CAAA;IAED,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAC5C,IAAM,QAAQ,GAAG,IAAA,iBAAO,EAAC,OAAO,CAAC,CAAA;IACjC,IAAM,SAAS,GAAG,IAAA,2BAAY,EAAC,EAAE,GAAG,KAAA,EAAE,EAAE;QACtC,WAAW,EAAE,gBAAgB;QAC7B,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,gBAAgB;KAC9B,CAAC,CAAA;IACI,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,aAAa,CAAC,IAAA,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAA;IAE3C,IAAA,KAAuE,IAAA,uCAAkB,EAAC,OAAO,EAAE;QACvG,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,6BAA6B;QACxC,WAAW,aAAA;QACX,SAAS,WAAA;KACV,CAAC,EALM,KAAA,wBAAwB,EAAX,UAAU,QAAA,EAAG,KAAA,mBAAsC,EAA9B,YAAY,QAAA,EAAE,eAAe,QAKrE,CAAA;IAEF,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,CAAC,SAAS;YAAE,OAAM;QAEpC,IAAM,eAAe,GAAG,wBAAwB,CAAC,aAAa,EAAE,SAAS,EAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;QAErG,IAAI,eAAe,KAAK,YAAY,EAAE,CAAC;YACrC,eAAe,CAAC,eAAe,CAAC,CAAA;QAClC,CAAC;QAED,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;YAC5B,QAAQ,CAAC,aAAa,CAAC,CAAA;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;IAE3E,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS;YAAE,OAAM;QAErC,IAAM,QAAQ,GAAG,wBAAwB,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;QAE7F,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;IAE1E,IAAA,iBAAS,EAAC;QACR,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,EAAE,UAAU,CAAC,CAAA;QAClC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,GAAG,GAAG,EAAE,UAAU,CAAC,CAAA;IAC7C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAA,iBAAS,EAAC;QACR,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,SAAS,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,CAAC,CAAA;IAEzC,IAAM,WAAW,GAAG,cAAc,CAAC,EAAE,GAAG,KAAA,EAAE,YAAY,cAAA,EAAE,CAAC,CAAA;IAEzD,OAAO,CACL,kDAAS,KAAK,IAAE,GAAG,EAAE,GAAG,oBAAiB,UAAU;QACjD,uCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,GAAG,CACzC,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,gBAAQ,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;AAEtF,SAAS,cAAc,CAAC,EAAgC;QAA9B,WAAQ,EAAR,GAAG,mBAAG,EAAE,KAAA,EAAE,oBAAkB,EAAlB,YAAY,mBAAG,GAAG,KAAA;IACpD,OAAO,IAAA,mBAAW,EAAC;QACjB,IAAI,EAAE;YACJ,eAAe,EAAE,cAAO,GAAG,MAAG;YAC9B,mBAAmB,EAAE,UAAG,CAAC,YAAY,OAAI;YACzC,gBAAgB,EAAE,QAAQ;YAC1B,cAAc,EAAE,WAAW;YAC3B,MAAM,EAAE,MAAM;YACd,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,YAAkB,EAAE,UAAgB;IACtD,IAAO,aAAa,GAA6B,YAAY,MAAzC,EAAU,cAAc,GAAK,YAAY,OAAjB,CAAiB;IAC7D,IAAQ,YAAY,GAAK,UAAU,OAAf,CAAe;IAE3C,IAAI,cAAc,IAAI,CAAC;QAAE,OAAO,IAAI,YAAI,EAAE,CAAA;IAE1C,IAAM,WAAW,GAAG,YAAY,GAAG,cAAc,CAAA;IACjD,IAAM,WAAW,GAAG,WAAW,GAAG,aAAa,CAAA;IAE/C,OAAO,IAAI,YAAI,CAAC,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;AAC9C,CAAC;AAED,SAAS,wBAAwB,CAAC,KAAa,EAAE,iBAAuB,EAAE,aAAmB,EAAE,UAAkB;IACvG,IAAO,UAAU,GAAK,kBAAkB,CAAC,iBAAiB,EAAE,aAAa,CAAC,MAAzD,CAAyD;IAC1E,IAAO,cAAc,GAAK,aAAa,MAAlB,CAAkB;IAC/C,IAAM,MAAM,GAAG,cAAc,GAAG,UAAU,CAAA;IAE1C,OAAO,KAAK,GAAG,GAAG,GAAG,UAAU,GAAG,MAAM,CAAA;AAC1C,CAAC;AAED,SAAS,wBAAwB,CAAC,YAAoB,EAAE,iBAAuB,EAAE,aAAmB,EAAE,UAAkB;IAC9G,IAAO,UAAU,GAAK,kBAAkB,CAAC,iBAAiB,EAAE,aAAa,CAAC,MAAzD,CAAyD;IAC1E,IAAO,cAAc,GAAK,aAAa,MAAlB,CAAkB;IAC/C,IAAM,MAAM,GAAG,cAAc,GAAG,UAAU,CAAA;IAE1C,IAAI,KAAK,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,UAAU,GAAG,GAAG,CAAA;IACnE,OAAO,KAAK,GAAG,CAAC;QAAE,KAAK,IAAI,GAAG,CAAA;IAE9B,OAAO,KAAK,CAAA;AACd,CAAC","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react'\nimport { Size } from 'spase'\nimport { useDragValueEffect } from '../hooks/useDragValueEffect'\nimport { useImageSize } from '../hooks/useImageSize'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict } from '../utils'\n\nexport type PanoramaHTMLAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'>\n\nexport type PanoramaProps = {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or\n   * 360, the `zeroAnchor` position of the image is at the left bound of the\n   * component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is expressed a multiplier of the number of pixels\n   * dragged, i.e. when set to 1, the image will shift the same amount of pixels\n   * that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src?: string\n\n  /**\n   * A decimal percentage of the image width indicating where 0° should be,\n   * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of\n   * the image is at the left edge of the component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from\n   * the `angle` prop being changed or from the image being dragged.\n   *\n   * @param position The current position.\n   * @param isDragging Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when the angle changes. This can either be invoked from the\n   * `angle` prop being changed or from the image being dragged. When `angle` is\n   * being double-binded, ensure that the value is only being set by this\n   * handler when `isDragging` is `true` to avoid potential update overflow.\n   *\n   * @param angle The current angle.\n   * @param isDragging Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onLoadImageStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   */\n  onLoadImageComplete?: () => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onLoadImageError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the\n   * loaded image. When no images are loaded yet, the size is `undefined`.\n   *\n   * @param size The actual size of the loaded iamge. If no images are loaded\n   *               yet, the size is `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n */\nexport const Panorama = forwardRef<HTMLDivElement, PanoramaHTMLAttributes & PanoramaProps>(({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onLoadImageStart,\n  onLoadImageComplete,\n  onLoadImageError,\n  onImageSizeChange,\n  ...props\n}, ref) => {\n  const mapDragPositionToDisplacement = (currentPosition: number, dx: number, dy: number): number => {\n    const newDisplacement = currentPosition - dx * speed\n\n    return newDisplacement\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const bodyRect = useRect(bodyRef)\n  const imageSize = useImageSize({ src }, {\n    onLoadStart: onLoadImageStart,\n    onLoadComplete: onLoadImageComplete,\n    onLoadError: onLoadImageError,\n  })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragValueEffect(bodyRef, {\n    initialValue: 0,\n    transform: mapDragPositionToDisplacement,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, bodyRect.size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, imageSize, bodyRect.width, bodyRect.height, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, bodyRect.size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, bodyRect.width, bodyRect.height, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  useEffect(() => {\n    onImageSizeChange?.(imageSize)\n  }, [imageSize?.width, imageSize?.height])\n\n  const fixedStyles = getFixedStyles({ src, displacement })\n\n  return (\n    <div {...props} ref={ref} data-component='panorama'>\n      <div ref={bodyRef} style={fixedStyles.body}/>\n    </div>\n  )\n})\n\nObject.defineProperty(Panorama, 'displayName', { value: 'Panorama', writable: false })\n\nfunction getFixedStyles({ src = '', displacement = NaN }) {\n  return asStyleDict({\n    body: {\n      backgroundImage: `url(${src})`,\n      backgroundPositionX: `${-displacement}px`,\n      backgroundRepeat: 'repeat',\n      backgroundSize: 'auto 100%',\n      height: '100%',\n      touchAction: 'none',\n      width: '100%',\n    },\n  })\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth * zeroAnchor\n\n  return angle / 360 * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth * zeroAnchor\n\n  let angle = (displacement + offset) % imageWidth / imageWidth * 360\n  while (angle < 0) angle += 360\n\n  return angle\n}\n"]}
+{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["components/Panorama.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAoF;AACpF,+BAA4B;AAC5B,kEAAgE;AAChE,sDAAoD;AACpD,4CAA0C;AAC1C,kCAAsC;AAsFtC;;GAEG;AACU,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAAyD,UAAC,EAc3F,EAAE,GAAG;IAbJ,IAAA,aAAwB,EAAjB,aAAa,mBAAG,CAAC,KAAA,EACxB,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,GAAG,SAAA,EACH,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA,EACd,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,iBAAiB,uBAAA,EACd,KAAK,cAbkF,4LAc3F,CADS;IAER,IAAM,6BAA6B,GAAG,UAAC,eAAuB,EAAE,EAAU,EAAE,EAAU;QACpF,IAAM,eAAe,GAAG,eAAe,GAAG,EAAE,GAAG,KAAK,CAAA;QAEpD,OAAO,eAAe,CAAA;IACxB,CAAC,CAAA;IAED,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAC5C,IAAM,QAAQ,GAAG,IAAA,iBAAO,EAAC,OAAO,CAAC,CAAA;IACjC,IAAM,SAAS,GAAG,IAAA,2BAAY,EAAC,EAAE,GAAG,KAAA,EAAE,EAAE;QACtC,WAAW,EAAE,gBAAgB;QAC7B,cAAc,EAAE,mBAAmB;QACnC,WAAW,EAAE,gBAAgB;KAC9B,CAAC,CAAA;IACI,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,aAAa,CAAC,IAAA,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAA;IAE3C,IAAA,KAAuE,IAAA,uCAAkB,EAAC,OAAO,EAAE;QACvG,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,6BAA6B;QACxC,WAAW,aAAA;QACX,SAAS,WAAA;KACV,CAAC,EALM,KAAA,wBAAwB,EAAX,UAAU,QAAA,EAAG,KAAA,mBAAsC,EAA9B,YAAY,QAAA,EAAE,eAAe,QAKrE,CAAA;IAEF,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,CAAC,SAAS;YAAE,OAAM;QAEpC,IAAM,eAAe,GAAG,wBAAwB,CAAC,aAAa,EAAE,SAAS,EAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;QAErG,IAAI,eAAe,KAAK,YAAY,EAAE,CAAC;YACrC,eAAe,CAAC,eAAe,CAAC,CAAA;QAClC,CAAC;QAED,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;YAC5B,QAAQ,CAAC,aAAa,CAAC,CAAA;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;IAE3E,IAAA,iBAAS,EAAC;QACR,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS;YAAE,OAAM;QAErC,IAAM,QAAQ,GAAG,wBAAwB,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;QAE7F,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;IAE1E,IAAA,iBAAS,EAAC;QACR,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,EAAE,UAAU,CAAC,CAAA;QAClC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,GAAG,GAAG,EAAE,UAAU,CAAC,CAAA;IAC7C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAA,iBAAS,EAAC;QACR,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,SAAS,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,CAAC,CAAC,CAAA;IAEzC,IAAM,WAAW,GAAG,cAAc,CAAC,EAAE,GAAG,KAAA,EAAE,YAAY,cAAA,EAAE,CAAC,CAAA;IAEzD,OAAO,CACL,2CAAS,KAAK,IAAE,GAAG,EAAE,GAAG,oBAAiB,UAAU,YACjD,gCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,GAAG,IACzC,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,gBAAQ,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;AAEtF,SAAS,cAAc,CAAC,EAAgC;QAA9B,WAAQ,EAAR,GAAG,mBAAG,EAAE,KAAA,EAAE,oBAAkB,EAAlB,YAAY,mBAAG,GAAG,KAAA;IACpD,OAAO,IAAA,mBAAW,EAAC;QACjB,IAAI,EAAE;YACJ,eAAe,EAAE,cAAO,GAAG,MAAG;YAC9B,mBAAmB,EAAE,UAAG,CAAC,YAAY,OAAI;YACzC,gBAAgB,EAAE,QAAQ;YAC1B,cAAc,EAAE,WAAW;YAC3B,MAAM,EAAE,MAAM;YACd,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,YAAkB,EAAE,UAAgB;IACtD,IAAO,aAAa,GAA6B,YAAY,MAAzC,EAAU,cAAc,GAAK,YAAY,OAAjB,CAAiB;IAC7D,IAAQ,YAAY,GAAK,UAAU,OAAf,CAAe;IAE3C,IAAI,cAAc,IAAI,CAAC;QAAE,OAAO,IAAI,YAAI,EAAE,CAAA;IAE1C,IAAM,WAAW,GAAG,YAAY,GAAG,cAAc,CAAA;IACjD,IAAM,WAAW,GAAG,WAAW,GAAG,aAAa,CAAA;IAE/C,OAAO,IAAI,YAAI,CAAC,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAA;AAC9C,CAAC;AAED,SAAS,wBAAwB,CAAC,KAAa,EAAE,iBAAuB,EAAE,aAAmB,EAAE,UAAkB;IACvG,IAAO,UAAU,GAAK,kBAAkB,CAAC,iBAAiB,EAAE,aAAa,CAAC,MAAzD,CAAyD;IAC1E,IAAO,cAAc,GAAK,aAAa,MAAlB,CAAkB;IAC/C,IAAM,MAAM,GAAG,cAAc,GAAG,UAAU,CAAA;IAE1C,OAAO,KAAK,GAAG,GAAG,GAAG,UAAU,GAAG,MAAM,CAAA;AAC1C,CAAC;AAED,SAAS,wBAAwB,CAAC,YAAoB,EAAE,iBAAuB,EAAE,aAAmB,EAAE,UAAkB;IAC9G,IAAO,UAAU,GAAK,kBAAkB,CAAC,iBAAiB,EAAE,aAAa,CAAC,MAAzD,CAAyD;IAC1E,IAAO,cAAc,GAAK,aAAa,MAAlB,CAAkB;IAC/C,IAAM,MAAM,GAAG,cAAc,GAAG,UAAU,CAAA;IAE1C,IAAI,KAAK,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,UAAU,GAAG,GAAG,CAAA;IACnE,OAAO,KAAK,GAAG,CAAC;QAAE,KAAK,IAAI,GAAG,CAAA;IAE9B,OAAO,KAAK,CAAA;AACd,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from 'react'\nimport { Size } from 'spase'\nimport { useDragValueEffect } from '../hooks/useDragValueEffect'\nimport { useImageSize } from '../hooks/useImageSize'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict } from '../utils'\n\nexport type PanoramaHTMLAttributes = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'>\n\nexport type PanoramaProps = {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or\n   * 360, the `zeroAnchor` position of the image is at the left bound of the\n   * component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is expressed a multiplier of the number of pixels\n   * dragged, i.e. when set to 1, the image will shift the same amount of pixels\n   * that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src?: string\n\n  /**\n   * A decimal percentage of the image width indicating where 0° should be,\n   * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of\n   * the image is at the left edge of the component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from\n   * the `angle` prop being changed or from the image being dragged.\n   *\n   * @param position The current position.\n   * @param isDragging Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when the angle changes. This can either be invoked from the\n   * `angle` prop being changed or from the image being dragged. When `angle` is\n   * being double-binded, ensure that the value is only being set by this\n   * handler when `isDragging` is `true` to avoid potential update overflow.\n   *\n   * @param angle The current angle.\n   * @param isDragging Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onLoadImageStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   */\n  onLoadImageComplete?: () => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onLoadImageError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the\n   * loaded image. When no images are loaded yet, the size is `undefined`.\n   *\n   * @param size The actual size of the loaded iamge. If no images are loaded\n   *               yet, the size is `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n */\nexport const Panorama = forwardRef<HTMLDivElement, PanoramaHTMLAttributes & PanoramaProps>(({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onLoadImageStart,\n  onLoadImageComplete,\n  onLoadImageError,\n  onImageSizeChange,\n  ...props\n}, ref) => {\n  const mapDragPositionToDisplacement = (currentPosition: number, dx: number, dy: number): number => {\n    const newDisplacement = currentPosition - dx * speed\n\n    return newDisplacement\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const bodyRect = useRect(bodyRef)\n  const imageSize = useImageSize({ src }, {\n    onLoadStart: onLoadImageStart,\n    onLoadComplete: onLoadImageComplete,\n    onLoadError: onLoadImageError,\n  })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragValueEffect(bodyRef, {\n    initialValue: 0,\n    transform: mapDragPositionToDisplacement,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, bodyRect.size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, imageSize, bodyRect.width, bodyRect.height, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, bodyRect.size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, bodyRect.width, bodyRect.height, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  useEffect(() => {\n    onImageSizeChange?.(imageSize)\n  }, [imageSize?.width, imageSize?.height])\n\n  const fixedStyles = getFixedStyles({ src, displacement })\n\n  return (\n    <div {...props} ref={ref} data-component='panorama'>\n      <div ref={bodyRef} style={fixedStyles.body}/>\n    </div>\n  )\n})\n\nObject.defineProperty(Panorama, 'displayName', { value: 'Panorama', writable: false })\n\nfunction getFixedStyles({ src = '', displacement = NaN }) {\n  return asStyleDict({\n    body: {\n      backgroundImage: `url(${src})`,\n      backgroundPositionX: `${-displacement}px`,\n      backgroundRepeat: 'repeat',\n      backgroundSize: 'auto 100%',\n      height: '100%',\n      touchAction: 'none',\n      width: '100%',\n    },\n  })\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth * zeroAnchor\n\n  return angle / 360 * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth * zeroAnchor\n\n  let angle = (displacement + offset) % imageWidth / imageWidth * 360\n  while (angle < 0) angle += 360\n\n  return angle\n}\n"]}