@lobehub/ui 5.24.0 → 5.26.0

package/es/Image/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    actionsHidden: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 0;\n    `,\n    actionsVisible: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 1;\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      ${lobeStaticStylish.variantFilledWithoutHover};\n    `,\n    image: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: auto;\n      height: auto;\n    `,\n    mask: css`\n      ${lobeStaticStylish.blur};\n      backdrop-filter: blur(8px);\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    preview: css`\n      .${prefixCls}-image-preview-mask {\n        background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n      }\n\n      .${prefixCls}-image-preview-close {\n        color: ${cssVar.colorTextDescription};\n        background: ${cssVar.colorBgContainer};\n        box-shadow: ${cssVar.boxShadowTertiary};\n\n        svg {\n          stroke: ${cssVar.colorTextDescription};\n        }\n\n        &:hover {\n          color: ${cssVar.colorText};\n          background: ${cssVar.colorBgContainer};\n\n          svg {\n            stroke: ${cssVar.colorText};\n          }\n        }\n      }\n\n      .${prefixCls}-image-preview-img {\n        width: 100%;\n      }\n\n      .${prefixCls}-image-preview-switch {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 32px;\n        height: 32px;\n        padding: 0;\n\n        color: ${cssVar.colorTextDescription};\n\n        background: ${cssVar.colorBgContainer};\n        box-shadow: ${cssVar.boxShadowTertiary};\n\n        svg {\n          transform: scale(0.75);\n        }\n\n        &:hover {\n          color: ${cssVar.colorText};\n          background: ${cssVar.colorBgContainer};\n        }\n      }\n\n      .${prefixCls}-image-preview-switch-disabled {\n        display: none;\n      }\n\n      .ant-image-preview-progress {\n        color: ${cssVar.colorTextDescription};\n      }\n\n      img {\n        min-width: 100%;\n      }\n    `,\n    root: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      line-height: 1;\n\n      .${prefixCls}-image-cover {\n        display: none !important;\n      }\n\n      &:hover {\n        .actions-hidden {\n          opacity: 1;\n        }\n      }\n    `,\n    toolbar: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      padding: 4px;\n      border-color: ${cssVar.colorFillTertiary};\n      border-radius: ${cssVar.borderRadiusLG};\n    `,\n\n    wrapper: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      height: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,eAAe,GAAG;;;;;;;;;;EAUlB,gBAAgB,GAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,GAAG;;;;;;;;EAQV,MAAM,GAAG;QACLA,cAAkB,KAAK;;;EAG3B,UAAUA,cAAkB;EAC5B,SAAS,GAAG;SACP,UAAU;yCACsB,OAAO,cAAc;;;SAGrD,UAAU;iBACF,OAAO,qBAAqB;sBACvB,OAAO,iBAAiB;sBACxB,OAAO,kBAAkB;;;oBAG3B,OAAO,qBAAqB;;;;mBAI7B,OAAO,UAAU;wBACZ,OAAO,iBAAiB;;;sBAG1B,OAAO,UAAU;;;;;SAK9B,UAAU;;;;SAIV,UAAU;;;;;;;;;iBASF,OAAO,qBAAqB;;sBAEvB,OAAO,iBAAiB;sBACxB,OAAO,kBAAkB;;;;;;;mBAO5B,OAAO,UAAU;wBACZ,OAAO,iBAAiB;;;;SAIvC,UAAU;;;;;iBAKF,OAAO,qBAAqB;;;;;;;EAOzC,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;;;SAIlC,UAAU;;;;;;;;;;EAUf,SAAS,GAAG;QACRA,cAAkB,4BAA4B;;sBAEhC,OAAO,kBAAkB;uBACxB,OAAO,eAAe;;EAGzC,SAAS,GAAG;;;;;;CAMd;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  // Bare viewer controls float directly over arbitrary image content; the\n  // theme-side halo (light halo around dark icons in light mode and vice\n  // versa) is what keeps them readable without a container panel.\n  const controlHalo = `drop-shadow(0 0 2px ${cssVar.colorBgLayout}) drop-shadow(0 1px 6px ${cssVar.colorBgLayout})`;\n  return {\n    actionsHidden: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 0;\n    `,\n    actionsVisible: css`\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: 1;\n    `,\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\n      ${lobeStaticStylish.variantFilledWithoutHover};\n    `,\n    image: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: auto;\n      height: auto;\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    previewable: css`\n      cursor: zoom-in;\n    `,\n    root: css`\n      cursor: pointer;\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      width: fit-content;\n      border-radius: ${cssVar.borderRadius};\n\n      line-height: 1;\n\n      &:hover {\n        .actions-hidden {\n          opacity: 1;\n        }\n      }\n    `,\n    toolbar: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-end: 16px;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n    `,\n    // The glass lives on the icon row, not the toolbar itself: tooltips and\n    // the more-menu portal into the toolbar element, and an ancestor\n    // backdrop-filter/filter would distort those popups too.\n    toolbarRow: css`\n      padding-block: 4px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);\n      backdrop-filter: blur(12px);\n    `,\n    toolbarPercentage: css`\n      cursor: pointer;\n      user-select: none;\n\n      min-width: 44px;\n      height: 36px;\n      padding-inline: 8px;\n      border-radius: 999px;\n\n      font-size: 12px;\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorTextTertiary};\n\n      transition:\n        color 400ms ${cssVar.motionEaseOut},\n        background 100ms ${cssVar.motionEaseOut};\n\n      &:hover {\n        color: ${cssVar.colorTextSecondary};\n        background: ${cssVar.colorFillTertiary};\n      }\n    `,\n\n    viewerBackdrop: css`\n      position: fixed;\n      inset: 0;\n\n      opacity: 0;\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\n      backdrop-filter: blur(8px);\n    `,\n    viewerChrome: css`\n      pointer-events: none;\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n    `,\n    viewerChromeIdle: css`\n      pointer-events: none;\n      position: absolute;\n      inset: 0;\n      transition:\n        opacity 200ms ${cssVar.motionEaseOut},\n        visibility 200ms;\n\n      &[data-idle-hidden] {\n        visibility: hidden;\n        opacity: 0;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    viewerClose: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-start: 16px;\n      inset-inline-end: 16px;\n\n      filter: ${controlHalo};\n    `,\n    viewerCounter: css`\n      pointer-events: none;\n\n      position: absolute;\n      inset-block-start: 16px;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      padding-block: 4px;\n      padding-inline: 12px;\n      border-radius: 999px;\n\n      font-size: 12px;\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorTextSecondary};\n\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);\n      backdrop-filter: blur(12px);\n    `,\n    viewerImage: css`\n      will-change: transform;\n      cursor: zoom-out;\n      user-select: none;\n\n      position: absolute;\n      transform-origin: center center;\n\n      object-fit: contain;\n\n      -webkit-user-drag: none;\n    `,\n    viewerNavButton: css`\n      pointer-events: auto;\n\n      position: absolute;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n\n      filter: ${controlHalo};\n    `,\n    viewerNavNext: css`\n      inset-inline-end: 16px;\n    `,\n    viewerNavPrev: css`\n      inset-inline-start: 16px;\n    `,\n    viewerPopup: css`\n      position: fixed;\n      inset: 0;\n      overflow: hidden;\n      outline: none;\n    `,\n    wrapper: css`\n      position: relative;\n      overflow: hidden;\n      max-width: 100%;\n      height: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'filled',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const FALLBACK_DARK =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\nexport const FALLBACK_LIGHT =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAI5D,MAAM,cAAc,uBAAuB,OAAO,cAAc,0BAA0B,OAAO,cAAc;CAC/G,OAAO;EACL,eAAe,GAAG;;;;;;;;;;EAUlB,gBAAgB,GAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,GAAG;;;;;;;;EAQV,UAAUA,cAAkB;EAC5B,aAAa,GAAG;;;EAGhB,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;;;;;;;;;EAUvC,SAAS,GAAG;;;;;;;;EAWZ,YAAY,GAAG;;;;;uCAKoB,OAAO,cAAc;;;EAGxD,mBAAmB,GAAG;;;;;;;;;;;eAWX,OAAO,kBAAkB;;;sBAGlB,OAAO,cAAc;2BAChB,OAAO,cAAc;;;iBAG/B,OAAO,mBAAmB;sBACrB,OAAO,kBAAkB;;;EAI3C,gBAAgB,GAAG;;;;;uCAKgB,OAAO,cAAc;;;EAGxD,cAAc,GAAG;;;;;;EAMjB,kBAAkB,GAAG;;;;;wBAKD,OAAO,cAAc;;;;;;;;;;;;EAYzC,aAAa,GAAG;;;;;;;gBAOJ,YAAY;;EAExB,eAAe,GAAG;;;;;;;;;;;;;;eAcP,OAAO,mBAAmB;;uCAEF,OAAO,cAAc;;;EAGxD,aAAa,GAAG;;;;;;;;;;;;EAYhB,iBAAiB,GAAG;;;;;;;gBAOR,YAAY;;EAExB,eAAe,GAAG;;;EAGlB,eAAe,GAAG;;;EAGlB,aAAa,GAAG;;;;;;EAMhB,SAAS,GAAG;;;;;;CAMd;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}

package/es/Image/type.d.mts

@@ -1,27 +1,19 @@
-import { CSSProperties, ReactNode, Ref } from "react";
-import { ImageProps } from "antd";
-import { PreviewConfig } from "antd/es/image/index.js";
-import { GroupPreviewConfig } from "antd/es/image/PreviewGroup.js";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
 //#region src/Image/type.d.ts
-interface PreviewGroupPreviewOptions extends GroupPreviewConfig {
+interface ImagePreviewOptions {
+  maxScale?: number;
+  onOpenChange?: (open: boolean) => void;
+  src?: string;
   toolbarAddon?: ReactNode;
 }
-interface PreviewGroupProps {
-  children?: ReactNode;
-  enable?: boolean;
-  items?: string[];
-  preview?: boolean | PreviewGroupPreviewOptions;
-}
-interface ImagePreviewOptions extends PreviewConfig {
-  toolbarAddon?: ReactNode;
-}
-interface ImageProps$1 extends Omit<ImageProps, 'preview'> {
+type ImageProps = Omit<ComponentProps<'img'>, 'width' | 'height'> & {
   actions?: ReactNode;
   alwaysShowActions?: boolean;
   classNames?: {
     image?: string;
     wrapper?: string;
   };
+  height?: number | string;
   isLoading?: boolean;
   maxHeight?: number | string;
   maxWidth?: number | string;
@@ -35,9 +27,14 @@ interface ImageProps$1 extends Omit<ImageProps, 'preview'> {
     image?: CSSProperties;
     wrapper?: CSSProperties;
   };
-  toolbarAddon?: ReactNode;
   variant?: 'borderless' | 'filled' | 'outlined';
+  width?: number | string;
+};
+interface PreviewGroupProps {
+  children?: ReactNode;
+  enable?: boolean;
+  preview?: boolean | ImagePreviewOptions;
 }
 //#endregion
-export { ImagePreviewOptions, ImageProps$1 as ImageProps, PreviewGroupPreviewOptions, PreviewGroupProps };
+export { ImagePreviewOptions, ImageProps, PreviewGroupProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Image/viewer/GalleryNav.mjs

@@ -0,0 +1,44 @@
+"use client";
+import Center from "../../Flex/Center.mjs";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { styles } from "../style.mjs";
+import image_default from "../../i18n/resources/en/image.mjs";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/Image/viewer/GalleryNav.tsx
+const GalleryNav = memo(({ current, hasNext, hasPrev, next, prev, total }) => {
+	const { t } = useTranslation(image_default);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		hasPrev && /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx(styles.viewerNavButton, styles.viewerNavPrev),
+			icon: ChevronLeft,
+			size: "large",
+			title: t("image.prev"),
+			onClick: prev
+		}),
+		hasNext && /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx(styles.viewerNavButton, styles.viewerNavNext),
+			icon: ChevronRight,
+			size: "large",
+			title: t("image.next"),
+			onClick: next
+		}),
+		/* @__PURE__ */ jsxs(Center, {
+			horizontal: true,
+			className: styles.viewerCounter,
+			children: [
+				current + 1,
+				" / ",
+				total
+			]
+		})
+	] });
+});
+GalleryNav.displayName = "GalleryNav";
+//#endregion
+export { GalleryNav as default };
+
+//# sourceMappingURL=GalleryNav.mjs.map

package/es/Image/viewer/GalleryNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryNav.mjs","names":["imageMessages"],"sources":["../../../src/Image/viewer/GalleryNav.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Center } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles } from '../style';\n\nexport interface GalleryNavProps {\n  current: number;\n  hasNext: boolean;\n  hasPrev: boolean;\n  next: () => void;\n  prev: () => void;\n  total: number;\n}\n\nconst GalleryNav = memo<GalleryNavProps>(({ current, hasNext, hasPrev, next, prev, total }) => {\n  const { t } = useTranslation(imageMessages);\n\n  return (\n    <>\n      {hasPrev && (\n        <ActionIcon\n          className={cx(styles.viewerNavButton, styles.viewerNavPrev)}\n          icon={ChevronLeft}\n          size={'large'}\n          title={t('image.prev')}\n          onClick={prev}\n        />\n      )}\n      {hasNext && (\n        <ActionIcon\n          className={cx(styles.viewerNavButton, styles.viewerNavNext)}\n          icon={ChevronRight}\n          size={'large'}\n          title={t('image.next')}\n          onClick={next}\n        />\n      )}\n      <Center horizontal className={styles.viewerCounter}>\n        {current + 1} / {total}\n      </Center>\n    </>\n  );\n});\n\nGalleryNav.displayName = 'GalleryNav';\n\nexport default GalleryNav;\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,aAAa,MAAuB,EAAE,SAAS,SAAS,SAAS,MAAM,MAAM,YAAY;CAC7F,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,OACE,qBAAA,YAAA,EAAA,UAAA;EACG,WACC,oBAAC,YAAD;GACE,WAAW,GAAG,OAAO,iBAAiB,OAAO,aAAa;GAC1D,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY;GACrB,SAAS;EACV,CAAA;EAEF,WACC,oBAAC,YAAD;GACE,WAAW,GAAG,OAAO,iBAAiB,OAAO,aAAa;GAC1D,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY;GACrB,SAAS;EACV,CAAA;EAEH,qBAAC,QAAD;GAAQ,YAAA;GAAW,WAAW,OAAO;GAArC,UAAA;IACG,UAAU;IAAE;IAAI;GACX;;CACR,EAAA,CAAA;AAEN,CAAC;AAED,WAAW,cAAc"}

package/es/Image/viewer/ImageViewer.mjs

@@ -0,0 +1,275 @@
+"use client";
+import { MotionComponent } from "../../MotionProvider/index.mjs";
+import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import { useLayerZIndex } from "../../base-ui/zIndex/useLayerZIndex.mjs";
+import { styles } from "../style.mjs";
+import { ToastHost } from "../../base-ui/Toast/imperative.mjs";
+import { computeFit, unrotatedRect } from "./geometry.mjs";
+import { beginClosePreview, endClosePreview } from "./registry.mjs";
+import { useFinalFocus } from "./useFinalFocus.mjs";
+import { useFlipTransition } from "./useFlipTransition.mjs";
+import { useViewerGestures } from "./useViewerGestures.mjs";
+import { readNatural, useGalleryNav } from "./useGalleryNav.mjs";
+import { useRefitTransition } from "./useRefitTransition.mjs";
+import { useZoomPan } from "./useZoomPan.mjs";
+import ViewerChrome from "./ViewerChrome.mjs";
+import { memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMergeRefs } from "react-merge-refs";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/Image/viewer/ImageViewer.tsx
+const readViewport = () => ({
+	height: window.innerHeight,
+	width: window.innerWidth
+});
+const prefersReducedMotion = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+const ImageViewer = memo(({ entries, index, openerFocusElement, token }) => {
+	const openerEntry = entries[index];
+	const appElement = useAppElement();
+	const motionComponent = use(MotionComponent);
+	const [animated] = useState(() => !!motionComponent && !prefersReducedMotion());
+	const { ref: layerRef, zIndex } = useLayerZIndex("modal");
+	const [currentIndex, setCurrentIndex] = useState(index);
+	const currentEntry = entries[currentIndex];
+	const currentEntryRef = useRef(currentEntry);
+	currentEntryRef.current = currentEntry;
+	const [source, setSource] = useState(openerEntry.src);
+	const [natural, setNatural] = useState(() => readNatural(openerEntry.element));
+	const [viewport, setViewport] = useState(readViewport);
+	const closeRef = useRef(null);
+	const requestClose = useCallback(() => closeRef.current?.(), []);
+	const isClosingIndirectRef = useRef(() => false);
+	const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);
+	const fillViewport = Boolean(currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src);
+	const { canZoomIn, canZoomOut, dragBy, dragEnd, escIntent, flipHorizontal, flipVertical, flipX, flipY, handleDoubleClick, handleWheel, isClean, isZoomed, reset, resetCloseTracking, rotate, rotateLeft, rotateRight, rotation, scale, setNatural: syncZoomNatural, setViewport: syncZoomViewport, x, y, zoomIn, zoomOut } = useZoomPan({
+		fillViewport,
+		isClosing: isClosingIndirect,
+		maxScale: currentEntry.options.maxScale,
+		natural,
+		onCloseRequest: requestClose,
+		viewport
+	});
+	const fitRect = useMemo(() => computeFit(natural, viewport, rotation, fillViewport), [
+		natural,
+		viewport,
+		rotation,
+		fillViewport
+	]);
+	const fitRectRef = useRef(fitRect);
+	fitRectRef.current = fitRect;
+	const getFitRect = useCallback(() => fitRectRef.current, []);
+	const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);
+	const viewportRef = useRef(viewport);
+	viewportRef.current = viewport;
+	const getViewportWidth = useCallback(() => viewportRef.current.width, []);
+	const getCloseSource = useCallback(() => currentEntryRef.current.element, []);
+	const transform = useMemo(() => ({
+		flipX,
+		flipY,
+		rotate,
+		scale,
+		x,
+		y
+	}), [
+		flipX,
+		flipY,
+		rotate,
+		scale,
+		x,
+		y
+	]);
+	const handleClosed = useCallback(() => endClosePreview(token), [token]);
+	const { backdropRef, chromeRef, close, imageRef: flipImageRef, isClosing, isTransitioning, switchTo } = useFlipTransition({
+		animated,
+		getCloseSource,
+		getFitRect,
+		getViewportWidth,
+		onClosed: handleClosed,
+		source: openerEntry.element,
+		transform
+	});
+	isClosingIndirectRef.current = isClosing;
+	useRefitTransition({
+		animated,
+		fillViewport,
+		isTransitioning,
+		natural,
+		rotation,
+		scale,
+		viewport,
+		x,
+		y
+	});
+	const finalFocus = useFinalFocus(openerFocusElement);
+	const isCleanRef = useRef(isClean);
+	isCleanRef.current = isClean;
+	const handleClose = useCallback(() => {
+		beginClosePreview(token);
+		close({ fade: !isCleanRef.current });
+	}, [close, token]);
+	closeRef.current = handleClose;
+	const handleDialogOpenChange = useCallback((open, eventDetails) => {
+		if (open) return;
+		if (isClosing()) return;
+		if (eventDetails.reason === "escape-key" && escIntent() === "reset") {
+			eventDetails.cancel();
+			reset();
+			return;
+		}
+		handleClose();
+	}, [
+		escIntent,
+		handleClose,
+		isClosing,
+		reset
+	]);
+	const gestures = useViewerGestures({
+		dragBy,
+		dragEnd,
+		handleDoubleClick,
+		handleWheel,
+		isClean,
+		isZoomed,
+		onClose: handleClose,
+		reset,
+		zoomIn,
+		zoomOut
+	});
+	const { hasNext, hasPrev, next, prev } = useGalleryNav({
+		cancelPendingClose: gestures.cancelPendingClose,
+		currentIndex,
+		entries,
+		flipX,
+		flipY,
+		resetCloseTracking,
+		rotate,
+		scale,
+		setCurrentIndex,
+		setNatural,
+		setSource,
+		switchTo,
+		syncZoomNatural,
+		x,
+		y
+	});
+	const popupNodeRef = useRef(null);
+	const popupRef = useMergeRefs([
+		layerRef,
+		gestures.popupRef,
+		popupNodeRef
+	]);
+	const imageRef = useMergeRefs([flipImageRef, gestures.imageRef]);
+	const handleLoad = useCallback((event) => {
+		const loaded = event.currentTarget;
+		if (!loaded.naturalWidth || !loaded.naturalHeight) return;
+		const next = {
+			height: loaded.naturalHeight,
+			width: loaded.naturalWidth
+		};
+		setNatural((prev) => prev.width === next.width && prev.height === next.height ? prev : next);
+		syncZoomNatural(next);
+	}, [syncZoomNatural]);
+	useEffect(() => {
+		const handleResize = () => {
+			const next = readViewport();
+			setViewport(next);
+			syncZoomViewport(next);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, [syncZoomViewport]);
+	useEffect(() => {
+		const { previewSrc, src } = currentEntry;
+		if (!previewSrc || previewSrc === src) return;
+		let cancelled = false;
+		const loader = new window.Image();
+		const handleLoaded = () => {
+			if (!cancelled) setSource(previewSrc);
+		};
+		loader.addEventListener("load", handleLoaded);
+		loader.src = previewSrc;
+		return () => {
+			cancelled = true;
+			loader.removeEventListener("load", handleLoaded);
+		};
+	}, [currentEntry]);
+	useEffect(() => () => {
+		if (!openerEntry.element.isConnected) endClosePreview(token);
+	}, [openerEntry, token]);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		modal: true,
+		open: true,
+		onOpenChange: handleDialogOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container: appElement ?? void 0,
+			children: [
+				/* @__PURE__ */ jsx(Dialog.Backdrop, {
+					className: styles.viewerBackdrop,
+					ref: backdropRef,
+					style: zIndex === void 0 ? void 0 : { zIndex },
+					onClick: gestures.onSurfaceClick
+				}),
+				/* @__PURE__ */ jsxs(Dialog.Popup, {
+					"aria-label": currentEntry.element.alt || void 0,
+					className: styles.viewerPopup,
+					finalFocus,
+					initialFocus: popupNodeRef,
+					ref: popupRef,
+					style: zIndex === void 0 ? void 0 : { zIndex: zIndex + 1 },
+					tabIndex: -1,
+					onClick: gestures.onSurfaceClick,
+					onPointerCancel: gestures.onPointerFinish,
+					onPointerDown: gestures.onPointerDown,
+					onPointerMove: gestures.onPointerMove,
+					onPointerUp: gestures.onPointerFinish,
+					children: [/* @__PURE__ */ jsx("img", {
+						alt: currentEntry.element.alt,
+						className: styles.viewerImage,
+						ref: imageRef,
+						src: source,
+						style: {
+							cursor: gestures.cursor,
+							height: imageRect.height,
+							left: imageRect.x,
+							top: imageRect.y,
+							width: imageRect.width
+						},
+						onClick: gestures.onImageClick,
+						onDoubleClick: gestures.onImageDoubleClick,
+						onLoad: handleLoad
+					}), /* @__PURE__ */ jsx(ViewerChrome, {
+						canZoomIn,
+						canZoomOut,
+						chromeRef,
+						current: currentIndex,
+						fitRect,
+						flipHorizontal,
+						flipVertical,
+						hasNext,
+						hasPrev,
+						natural,
+						next,
+						prev,
+						reset,
+						rotateLeft,
+						rotateRight,
+						rotation,
+						scale,
+						source,
+						toolbarAddon: currentEntry.options.toolbarAddon,
+						total: entries.length,
+						zoomIn,
+						zoomOut,
+						onClose: handleClose
+					})]
+				}),
+				/* @__PURE__ */ jsx(ToastHost, { root: appElement ?? void 0 })
+			]
+		})
+	});
+});
+ImageViewer.displayName = "ImageViewer";
+//#endregion
+export { ImageViewer as default };
+
+//# sourceMappingURL=ImageViewer.mjs.map

package/es/Image/viewer/ImageViewer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewer.mjs","names":[],"sources":["../../../src/Image/viewer/ImageViewer.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\nimport {\n  memo,\n  type SyntheticEvent,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport { ToastHost } from '@/base-ui/Toast';\nimport { useLayerZIndex } from '@/base-ui/zIndex';\nimport { MotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from '../style';\nimport { computeFit, type Size, unrotatedRect } from './geometry';\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\nimport { useFinalFocus } from './useFinalFocus';\nimport { useFlipTransition } from './useFlipTransition';\nimport { readNatural, useGalleryNav } from './useGalleryNav';\nimport { useRefitTransition } from './useRefitTransition';\nimport { useViewerGestures } from './useViewerGestures';\nimport { useZoomPan } from './useZoomPan';\nimport ViewerChrome from './ViewerChrome';\n\nexport interface ImageViewerProps {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\n\nconst prefersReducedMotion = () =>\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\n  const openerEntry = entries[index];\n  const appElement = useAppElement();\n  const motionComponent = use(MotionComponent);\n  const [animated] = useState(() => !!motionComponent && !prefersReducedMotion());\n\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\n\n  const [currentIndex, setCurrentIndex] = useState(index);\n  const currentEntry = entries[currentIndex];\n  const currentEntryRef = useRef(currentEntry);\n  currentEntryRef.current = currentEntry;\n\n  const [source, setSource] = useState(openerEntry.src);\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\n  const [viewport, setViewport] = useState<Size>(readViewport);\n\n  const closeRef = useRef<(() => void) | null>(null);\n  const requestClose = useCallback(() => closeRef.current?.(), []);\n\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\n  // but that state only exists once useFlipTransition (below) has run — and it\n  // needs useZoomPan's own transform values first. Break the cycle with a\n  // stable indirection: the ref is repointed at the real isClosing once it's\n  // available, written directly during render like the other *Ref fields here.\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\n\n  const fillViewport = Boolean(\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\n  );\n\n  const {\n    canZoomIn,\n    canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    setNatural: syncZoomNatural,\n    setViewport: syncZoomViewport,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  } = useZoomPan({\n    fillViewport,\n    isClosing: isClosingIndirect,\n    maxScale: currentEntry.options.maxScale,\n    natural,\n    onCloseRequest: requestClose,\n    viewport,\n  });\n\n  const fitRect = useMemo(\n    () => computeFit(natural, viewport, rotation, fillViewport),\n    [natural, viewport, rotation, fillViewport],\n  );\n  const fitRectRef = useRef(fitRect);\n  fitRectRef.current = fitRect;\n  const getFitRect = useCallback(() => fitRectRef.current, []);\n\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\n\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\n\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\n\n  const transform = useMemo(\n    () => ({ flipX, flipY, rotate, scale, x, y }),\n    [flipX, flipY, rotate, scale, x, y],\n  );\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\n\n  const {\n    backdropRef,\n    chromeRef,\n    close,\n    imageRef: flipImageRef,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  } = useFlipTransition({\n    animated,\n    getCloseSource,\n    getFitRect,\n    getViewportWidth,\n    onClosed: handleClosed,\n    source: openerEntry.element,\n    transform,\n  });\n  isClosingIndirectRef.current = isClosing;\n\n  useRefitTransition({\n    animated,\n    fillViewport,\n    isTransitioning,\n    natural,\n    rotation,\n    scale,\n    viewport,\n    x,\n    y,\n  });\n  const finalFocus = useFinalFocus(openerFocusElement);\n\n  const isCleanRef = useRef(isClean);\n  isCleanRef.current = isClean;\n\n  const handleClose = useCallback(() => {\n    beginClosePreview(token);\n    close({ fade: !isCleanRef.current });\n  }, [close, token]);\n  closeRef.current = handleClose;\n\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\n    (open, eventDetails) => {\n      if (open) return;\n      // Base UI fires this on every Esc regardless of whether we're already\n      // mid-close (our Dialog.Root's open prop never actually flips to\n      // false), so without this guard a second Esc during the close window\n      // reads escIntent() off the close spring's mid-flight scale, decides\n      // 'reset', and cancels the close animation out from under itself.\n      if (isClosing()) return;\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\n        eventDetails.cancel();\n        reset();\n        return;\n      }\n      handleClose();\n    },\n    [escIntent, handleClose, isClosing, reset],\n  );\n\n  const gestures = useViewerGestures({\n    dragBy,\n    dragEnd,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    onClose: handleClose,\n    reset,\n    zoomIn,\n    zoomOut,\n  });\n\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\n    cancelPendingClose: gestures.cancelPendingClose,\n    currentIndex,\n    entries,\n    flipX,\n    flipY,\n    resetCloseTracking,\n    rotate,\n    scale,\n    setCurrentIndex,\n    setNatural,\n    setSource,\n    switchTo,\n    syncZoomNatural,\n    x,\n    y,\n  });\n\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\n\n  const handleLoad = useCallback(\n    (event: SyntheticEvent<HTMLImageElement>) => {\n      const loaded = event.currentTarget;\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\n      setNatural((prev) =>\n        prev.width === next.width && prev.height === next.height ? prev : next,\n      );\n      syncZoomNatural(next);\n    },\n    [syncZoomNatural],\n  );\n\n  useEffect(() => {\n    const handleResize = () => {\n      const next = readViewport();\n      setViewport(next);\n      syncZoomViewport(next);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [syncZoomViewport]);\n\n  useEffect(() => {\n    const { previewSrc, src } = currentEntry;\n    if (!previewSrc || previewSrc === src) return;\n    let cancelled = false;\n    const loader = new window.Image();\n    const handleLoaded = () => {\n      if (!cancelled) setSource(previewSrc);\n    };\n    loader.addEventListener('load', handleLoaded);\n    loader.src = previewSrc;\n    return () => {\n      cancelled = true;\n      loader.removeEventListener('load', handleLoaded);\n    };\n  }, [currentEntry]);\n\n  useEffect(\n    () => () => {\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\n      if (thumbnailWasRemoved) endClosePreview(token);\n    },\n    [openerEntry, token],\n  );\n\n  return (\n    <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\n      <Dialog.Portal container={appElement ?? undefined}>\n        <Dialog.Backdrop\n          className={styles.viewerBackdrop}\n          ref={backdropRef}\n          style={zIndex === undefined ? undefined : { zIndex }}\n          onClick={gestures.onSurfaceClick}\n        />\n        <Dialog.Popup\n          aria-label={currentEntry.element.alt || undefined}\n          className={styles.viewerPopup}\n          finalFocus={finalFocus}\n          // Focus the popup itself instead of Base UI's default (the first\n          // tabbable — the close button): a focus-visible close button pins\n          // the idle auto-hide open forever and pops its tooltip on open.\n          initialFocus={popupNodeRef}\n          ref={popupRef}\n          style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\n          tabIndex={-1}\n          onClick={gestures.onSurfaceClick}\n          onPointerCancel={gestures.onPointerFinish}\n          onPointerDown={gestures.onPointerDown}\n          onPointerMove={gestures.onPointerMove}\n          onPointerUp={gestures.onPointerFinish}\n        >\n          <img\n            alt={currentEntry.element.alt}\n            className={styles.viewerImage}\n            ref={imageRef}\n            src={source}\n            style={{\n              cursor: gestures.cursor,\n              height: imageRect.height,\n              left: imageRect.x,\n              top: imageRect.y,\n              width: imageRect.width,\n            }}\n            onClick={gestures.onImageClick}\n            onDoubleClick={gestures.onImageDoubleClick}\n            onLoad={handleLoad}\n          />\n          <ViewerChrome\n            canZoomIn={canZoomIn}\n            canZoomOut={canZoomOut}\n            chromeRef={chromeRef}\n            current={currentIndex}\n            fitRect={fitRect}\n            flipHorizontal={flipHorizontal}\n            flipVertical={flipVertical}\n            hasNext={hasNext}\n            hasPrev={hasPrev}\n            natural={natural}\n            next={next}\n            prev={prev}\n            reset={reset}\n            rotateLeft={rotateLeft}\n            rotateRight={rotateRight}\n            rotation={rotation}\n            scale={scale}\n            source={source}\n            toolbarAddon={currentEntry.options.toolbarAddon}\n            total={entries.length}\n            zoomIn={zoomIn}\n            zoomOut={zoomOut}\n            onClose={handleClose}\n          />\n        </Dialog.Popup>\n        <ToastHost root={appElement ?? undefined} />\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\n\nImageViewer.displayName = 'ImageViewer';\n\nexport default ImageViewer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,sBAA4B;CAAE,QAAQ,OAAO;CAAa,OAAO,OAAO;AAAW;AAEzF,MAAM,6BACJ,OAAO,aAAa,kCAAkC,CAAC,CAAC,WAAW;AAErE,MAAM,cAAc,MAAwB,EAAE,SAAS,OAAO,oBAAoB,YAAY;CAC5F,MAAM,cAAc,QAAQ;CAC5B,MAAM,aAAa,cAAc;CACjC,MAAM,kBAAkB,IAAI,eAAe;CAC3C,MAAM,CAAC,YAAY,eAAe,CAAC,CAAC,mBAAmB,CAAC,qBAAqB,CAAC;CAE9E,MAAM,EAAE,KAAK,UAAU,WAAW,eAA+B,OAAO;CAExE,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,eAAe,QAAQ;CAC7B,MAAM,kBAAkB,OAAO,YAAY;CAC3C,gBAAgB,UAAU;CAE1B,MAAM,CAAC,QAAQ,aAAa,SAAS,YAAY,GAAG;CACpD,MAAM,CAAC,SAAS,cAAc,eAAqB,YAAY,YAAY,OAAO,CAAC;CACnF,MAAM,CAAC,UAAU,eAAe,SAAe,YAAY;CAE3D,MAAM,WAAW,OAA4B,IAAI;CACjD,MAAM,eAAe,kBAAkB,SAAS,UAAU,GAAG,CAAC,CAAC;CAO/D,MAAM,uBAAuB,aAA4B,KAAK;CAC9D,MAAM,oBAAoB,kBAAkB,qBAAqB,QAAQ,GAAG,CAAC,CAAC;CAE9E,MAAM,eAAe,QACnB,aAAa,cAAc,aAAa,eAAe,aAAa,GACtE;CAEA,MAAM,EACJ,WACA,YACA,QACA,SACA,WACA,gBACA,cACA,OACA,OACA,mBACA,aACA,SACA,UACA,OACA,oBACA,QACA,YACA,aACA,UACA,OACA,YAAY,iBACZ,aAAa,kBACb,GACA,GACA,QACA,YACE,WAAW;EACb;EACA,WAAW;EACX,UAAU,aAAa,QAAQ;EAC/B;EACA,gBAAgB;EAChB;CACF,CAAC;CAED,MAAM,UAAU,cACR,WAAW,SAAS,UAAU,UAAU,YAAY,GAC1D;EAAC;EAAS;EAAU;EAAU;CAAY,CAC5C;CACA,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CACrB,MAAM,aAAa,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAE3D,MAAM,YAAY,cAAc,cAAc,SAAS,QAAQ,GAAG,CAAC,SAAS,QAAQ,CAAC;CAErF,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CACtB,MAAM,mBAAmB,kBAAkB,YAAY,QAAQ,OAAO,CAAC,CAAC;CAExE,MAAM,iBAAiB,kBAAkB,gBAAgB,QAAQ,SAAS,CAAC,CAAC;CAE5E,MAAM,YAAY,eACT;EAAE;EAAO;EAAO;EAAQ;EAAO;EAAG;CAAE,IAC3C;EAAC;EAAO;EAAO;EAAQ;EAAO;EAAG;CAAC,CACpC;CACA,MAAM,eAAe,kBAAkB,gBAAgB,KAAK,GAAG,CAAC,KAAK,CAAC;CAEtE,MAAM,EACJ,aACA,WACA,OACA,UAAU,cACV,WACA,iBACA,aACE,kBAAkB;EACpB;EACA;EACA;EACA;EACA,UAAU;EACV,QAAQ,YAAY;EACpB;CACF,CAAC;CACD,qBAAqB,UAAU;CAE/B,mBAAmB;EACjB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,cAAc,kBAAkB;CAEnD,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CAErB,MAAM,cAAc,kBAAkB;EACpC,kBAAkB,KAAK;EACvB,MAAM,EAAE,MAAM,CAAC,WAAW,QAAQ,CAAC;CACrC,GAAG,CAAC,OAAO,KAAK,CAAC;CACjB,SAAS,UAAU;CAEnB,MAAM,yBAAyB,aAC5B,MAAM,iBAAiB;EACtB,IAAI,MAAM;EAMV,IAAI,UAAU,GAAG;EACjB,IAAI,aAAa,WAAW,gBAAgB,UAAU,MAAM,SAAS;GACnE,aAAa,OAAO;GACpB,MAAM;GACN;EACF;EACA,YAAY;CACd,GACA;EAAC;EAAW;EAAa;EAAW;CAAK,CAC3C;CAEA,MAAM,WAAW,kBAAkB;EACjC;EACA;EACA;EACA;EACA;EACA;EACA,SAAS;EACT;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,SAAS,SAAS,MAAM,SAAS,cAAc;EACrD,oBAAoB,SAAS;EAC7B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,WAAW,aAA6B;EAAC;EAAU,SAAS;EAAU;CAAY,CAAC;CACzF,MAAM,WAAW,aAA+B,CAAC,cAAc,SAAS,QAAQ,CAAC;CAEjF,MAAM,aAAa,aAChB,UAA4C;EAC3C,MAAM,SAAS,MAAM;EACrB,IAAI,CAAC,OAAO,gBAAgB,CAAC,OAAO,eAAe;EACnD,MAAM,OAAO;GAAE,QAAQ,OAAO;GAAe,OAAO,OAAO;EAAa;EACxE,YAAY,SACV,KAAK,UAAU,KAAK,SAAS,KAAK,WAAW,KAAK,SAAS,OAAO,IACpE;EACA,gBAAgB,IAAI;CACtB,GACA,CAAC,eAAe,CAClB;CAEA,gBAAgB;EACd,MAAM,qBAAqB;GACzB,MAAM,OAAO,aAAa;GAC1B,YAAY,IAAI;GAChB,iBAAiB,IAAI;EACvB;EACA,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa,OAAO,oBAAoB,UAAU,YAAY;CAChE,GAAG,CAAC,gBAAgB,CAAC;CAErB,gBAAgB;EACd,MAAM,EAAE,YAAY,QAAQ;EAC5B,IAAI,CAAC,cAAc,eAAe,KAAK;EACvC,IAAI,YAAY;EAChB,MAAM,SAAS,IAAI,OAAO,MAAM;EAChC,MAAM,qBAAqB;GACzB,IAAI,CAAC,WAAW,UAAU,UAAU;EACtC;EACA,OAAO,iBAAiB,QAAQ,YAAY;EAC5C,OAAO,MAAM;EACb,aAAa;GACX,YAAY;GACZ,OAAO,oBAAoB,QAAQ,YAAY;EACjD;CACF,GAAG,CAAC,YAAY,CAAC;CAEjB,sBACc;EAEV,IAAI,CADyB,YAAY,QAAQ,aACxB,gBAAgB,KAAK;CAChD,GACA,CAAC,aAAa,KAAK,CACrB;CAEA,OACE,oBAAC,OAAO,MAAR;EAAa,OAAA;EAAM,MAAA;EAAK,cAAc;EACpC,UAAA,qBAAC,OAAO,QAAR;GAAe,WAAW,cAAc,KAAA;GAAxC,UAAA;IACE,oBAAC,OAAO,UAAR;KACE,WAAW,OAAO;KAClB,KAAK;KACL,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO;KACnD,SAAS,SAAS;IACnB,CAAA;IACD,qBAAC,OAAO,OAAR;KACE,cAAY,aAAa,QAAQ,OAAO,KAAA;KACxC,WAAW,OAAO;KACN;KAIZ,cAAc;KACd,KAAK;KACL,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,QAAQ,SAAS,EAAE;KAC/D,UAAU;KACV,SAAS,SAAS;KAClB,iBAAiB,SAAS;KAC1B,eAAe,SAAS;KACxB,eAAe,SAAS;KACxB,aAAa,SAAS;KAfxB,UAAA,CAiBE,oBAAC,OAAD;MACE,KAAK,aAAa,QAAQ;MAC1B,WAAW,OAAO;MAClB,KAAK;MACL,KAAK;MACL,OAAO;OACL,QAAQ,SAAS;OACjB,QAAQ,UAAU;OAClB,MAAM,UAAU;OAChB,KAAK,UAAU;OACf,OAAO,UAAU;MACnB;MACA,SAAS,SAAS;MAClB,eAAe,SAAS;MACxB,QAAQ;KACT,CAAA,GACD,oBAAC,cAAD;MACa;MACC;MACD;MACX,SAAS;MACA;MACO;MACF;MACL;MACA;MACA;MACH;MACA;MACC;MACK;MACC;MACH;MACH;MACC;MACR,cAAc,aAAa,QAAQ;MACnC,OAAO,QAAQ;MACP;MACC;MACT,SAAS;KACV,CAAA,CACW;;IACd,oBAAC,WAAD,EAAW,MAAM,cAAc,KAAA,EAAY,CAAA;GAC9B;;CACJ,CAAA;AAEjB,CAAC;AAED,YAAY,cAAc"}

package/es/Image/viewer/PreviewOutlet.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { usePreviewSession } from "./registry.mjs";
+import ImageViewer from "./ImageViewer.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Image/viewer/PreviewOutlet.tsx
+const PreviewOutlet = ({ elementRef }) => {
+	const session = usePreviewSession(elementRef);
+	if (!session) return null;
+	return /* @__PURE__ */ jsx(ImageViewer, {
+		entries: session.entries,
+		index: session.index,
+		openerFocusElement: session.openerFocusElement,
+		token: session.token
+	}, session.token);
+};
+//#endregion
+export { PreviewOutlet as default };
+
+//# sourceMappingURL=PreviewOutlet.mjs.map

package/es/Image/viewer/PreviewOutlet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewOutlet.mjs","names":[],"sources":["../../../src/Image/viewer/PreviewOutlet.tsx"],"sourcesContent":["'use client';\n\nimport type { RefObject } from 'react';\n\nimport ImageViewer from './ImageViewer';\nimport { usePreviewSession } from './registry';\n\nexport interface PreviewOutletProps {\n  elementRef: RefObject<HTMLImageElement | null>;\n}\n\nconst PreviewOutlet = ({ elementRef }: PreviewOutletProps) => {\n  const session = usePreviewSession(elementRef);\n  if (!session) return null;\n  return (\n    <ImageViewer\n      entries={session.entries}\n      index={session.index}\n      key={session.token}\n      openerFocusElement={session.openerFocusElement}\n      token={session.token}\n    />\n  );\n};\n\nexport default PreviewOutlet;\n"],"mappings":";;;;;AAWA,MAAM,iBAAiB,EAAE,iBAAqC;CAC5D,MAAM,UAAU,kBAAkB,UAAU;CAC5C,IAAI,CAAC,SAAS,OAAO;CACrB,OACE,oBAAC,aAAD;EACE,SAAS,QAAQ;EACjB,OAAO,QAAQ;EAEf,oBAAoB,QAAQ;EAC5B,OAAO,QAAQ;CAChB,GAHM,QAAQ,KAGd;AAEL"}