zkit-ui 2.0.5 → 2.0.6

package/dist/ui/NativeImagePreview/NativeImagePreview.web.js

@@ -35,21 +35,115 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NativeImagePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/// <reference lib="dom" />
+require("./web/styles.css");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
-let didWarnUnsupportedWeb = false;
-function warnUnsupportedWeb() {
-    if (!__DEV__ || didWarnUnsupportedWeb)
-        return;
-    didWarnUnsupportedWeb = true;
-    console.warn('[zkit-ui][NativeImagePreview] Native shared-transition preview is only available in iOS and Android native builds.');
+const utils_1 = require("./utils");
+const viewer_1 = require("./web/viewer");
+const NativeImagePreviewWebContext = React.createContext(null);
+const WebView = react_native_1.View;
+function toWebPreviewItems(items) {
+    return items.map(({ alt, height, id, poster, type, url, width }) => ({
+        alt: alt !== null && alt !== void 0 ? alt : id,
+        height,
+        id,
+        poster,
+        type,
+        url,
+        width,
+    }));
 }
-const NativeImagePreviewRoot = React.memo(function NativeImagePreview({ children, }) {
-    React.useEffect(warnUnsupportedWeb, []);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+function findPreviewSourceElement(element) {
+    var _a;
+    if (!element)
+        return null;
+    if (element instanceof HTMLImageElement || element instanceof HTMLVideoElement) {
+        return element;
+    }
+    return (_a = element.querySelector('img, video')) !== null && _a !== void 0 ? _a : element;
+}
+function toChangeMeta(meta, items) {
+    var _a;
+    return {
+        reason: meta.reason,
+        item: (_a = items[meta.index]) !== null && _a !== void 0 ? _a : null,
+    };
+}
+const NativeImagePreviewRoot = React.memo(function NativeImagePreview({ children, colorScheme = 'dark', disabled = false, items, onChange, }) {
+    const systemColorScheme = (0, react_native_1.useColorScheme)();
+    const controllerRef = React.useRef(null);
+    const sourceElementsRef = React.useRef([]);
+    const resolvedItems = React.useMemo(() => (0, utils_1.normalizeNativeImagePreviewItems)(items), [items]);
+    const webItems = React.useMemo(() => toWebPreviewItems(resolvedItems), [resolvedItems]);
+    const resolvedColorScheme = (0, utils_1.resolveNativeImagePreviewColorScheme)(colorScheme, systemColorScheme);
+    React.useEffect(() => {
+        const controller = (0, viewer_1.createNativeImagePreviewWeb)();
+        controllerRef.current = controller;
+        return () => {
+            controller.destroy();
+            controllerRef.current = null;
+        };
+    }, []);
+    const open = React.useCallback((index, onItemChange) => {
+        var _a, _b;
+        const controller = controllerRef.current;
+        if (disabled || !controller || webItems.length === 0)
+            return;
+        const value = (0, utils_1.clampPreviewIndex)(index, webItems.length);
+        const getSourceElement = (nextIndex) => { var _a; return findPreviewSourceElement((_a = sourceElementsRef.current[nextIndex]) !== null && _a !== void 0 ? _a : null); };
+        void controller.open({
+            getSourceElement,
+            index: value,
+            items: webItems,
+            objectFit: 'cover',
+            sourceElement: getSourceElement(value),
+            sourceImageSize: resolvedItems[value]
+                ? {
+                    width: (_a = resolvedItems[value].width) !== null && _a !== void 0 ? _a : 0,
+                    height: (_b = resolvedItems[value].height) !== null && _b !== void 0 ? _b : 0,
+                }
+                : null,
+            sourceObjectFit: 'cover',
+            sourceVisibility: 'hidden',
+            theme: resolvedColorScheme,
+            onChange: (nextValue, meta) => {
+                const changeMeta = toChangeMeta(meta, resolvedItems);
+                onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, changeMeta);
+                onItemChange === null || onItemChange === void 0 ? void 0 : onItemChange(nextValue, changeMeta);
+            },
+        });
+    }, [disabled, onChange, resolvedColorScheme, resolvedItems, webItems]);
+    const contextValue = React.useMemo(() => ({
+        disabled,
+        items: resolvedItems,
+        open,
+        sourceElementsRef,
+    }), [disabled, open, resolvedItems]);
+    return ((0, jsx_runtime_1.jsx)(NativeImagePreviewWebContext.Provider, { value: contextValue, children: children }));
 });
-const NativeImagePreviewItem = React.memo(function NativeImagePreviewItem({ children, style, }) {
-    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: style, children: children });
+const NativeImagePreviewItem = React.memo(function NativeImagePreviewItem({ children, disabled = false, index, onChange, style, }) {
+    const context = React.useContext(NativeImagePreviewWebContext);
+    const sourceRef = React.useCallback((node) => {
+        if (!context)
+            return;
+        context.sourceElementsRef.current[index] = node;
+    }, [context, index]);
+    const itemDisabled = !context || context.disabled || disabled || context.items.length === 0;
+    const open = React.useCallback(() => {
+        if (itemDisabled)
+            return;
+        context.open(index, onChange);
+    }, [context, index, itemDisabled, onChange]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (itemDisabled)
+            return;
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        open();
+    }, [itemDisabled, open]);
+    return ((0, jsx_runtime_1.jsx)(WebView, { ref: sourceRef, "aria-label": itemDisabled ? undefined : 'Open image preview', onClick: itemDisabled ? undefined : open, onKeyDown: itemDisabled ? undefined : handleKeyDown, role: itemDisabled ? undefined : 'button', style: style, tabIndex: itemDisabled ? undefined : 0, children: children }));
 });
 exports.NativeImagePreview = Object.assign(NativeImagePreviewRoot, {
     Item: NativeImagePreviewItem,

package/dist/ui/NativeImagePreview/context.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { NativeImagePreviewChangeMeta, NativeImagePreviewNativeItem, NativeImagePreviewNativeProps, NativeImagePreviewResolvedItem, NativeImagePreviewResolvedColorScheme } from './types';
 export type NativeImagePreviewContextValue = {
-    galleryId: string;
+    previewGroupId: string;
     items: readonly NativeImagePreviewResolvedItem[];
     nativeItems: readonly NativeImagePreviewNativeItem[];
     colorScheme: NativeImagePreviewResolvedColorScheme;

package/dist/ui/NativeImagePreview/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/ui/NativeImagePreview/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,4BAA4B,EAC5B,4BAA4B,EAC5B,6BAA6B,EAC7B,8BAA8B,EAC9B,qCAAqC,EACtC,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,8BAA8B,GAAG;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,SAAS,8BAA8B,EAAE,CAAC;IACjD,WAAW,EAAE,SAAS,4BAA4B,EAAE,CAAC;IACrD,WAAW,EAAE,qCAAqC,CAAC;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,4BAA4B,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,eAAO,MAAM,yBAAyB,sDAC4B,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/ui/NativeImagePreview/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,4BAA4B,EAC5B,4BAA4B,EAC5B,6BAA6B,EAC7B,8BAA8B,EAC9B,qCAAqC,EACtC,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,8BAA8B,GAAG;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,SAAS,8BAA8B,EAAE,CAAC;IACjD,WAAW,EAAE,SAAS,4BAA4B,EAAE,CAAC;IACrD,WAAW,EAAE,qCAAqC,CAAC;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,4BAA4B,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,eAAO,MAAM,yBAAyB,sDAC4B,CAAC"}

package/dist/ui/NativeImagePreview/types.d.ts

@@ -6,6 +6,7 @@ export type NativeImagePreviewMediaType = 'image' | 'video';
 export type NativeImagePreviewSource = ImageSourcePropType | string;
 export type NativeImagePreviewItemDescriptor = {
     id?: string;
+    alt?: string;
     type?: NativeImagePreviewMediaType;
     url?: string;
     source?: NativeImagePreviewSource;
@@ -21,6 +22,7 @@ export type NativeImagePreviewResolvedItem = {
     poster?: string;
     width?: number;
     height?: number;
+    alt?: string;
     raw: NativeImagePreviewItem;
 };
 export type NativeImagePreviewNativeItem = {
@@ -31,7 +33,7 @@ export type NativeImagePreviewNativeItem = {
     width?: number;
     height?: number;
 };
-export type NativeImagePreviewChangeReason = 'swipe';
+export type NativeImagePreviewChangeReason = 'api' | 'swipe';
 export type NativeImagePreviewChangeEventPayload = {
     currentIndex: number;
 };

package/dist/ui/NativeImagePreview/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/NativeImagePreview/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/NativeImagePreview/types.ts"],"names":[],"mappings":"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"}

package/dist/ui/NativeImagePreview/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ui/NativeImagePreview/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,eAAe,EAErB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EAEtB,4BAA4B,EAC5B,8BAA8B,EAC9B,qCAAqC,EACrC,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAejB,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,wBAAwB,GAAG,SAAS,sBAQ7C;AAoCD,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,SAAS,sBAAsB,EAAE,oCAKzC;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,8BAA8B,EAAE,GAC/C,4BAA4B,EAAE,CAShC;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAG9D;AAED,wBAAgB,oCAAoC,CAClD,WAAW,EAAE,6BAA6B,GAAG,SAAS,EACtD,iBAAiB,EAAE,eAAe,GACjC,qCAAqC,CAIvC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ui/NativeImagePreview/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,eAAe,EAErB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EAEtB,4BAA4B,EAC5B,8BAA8B,EAC9B,qCAAqC,EACrC,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAejB,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,wBAAwB,GAAG,SAAS,sBAQ7C;AAqCD,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,SAAS,sBAAsB,EAAE,oCAKzC;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,8BAA8B,EAAE,GAC/C,4BAA4B,EAAE,CAShC;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAG9D;AAED,wBAAgB,oCAAoC,CAClD,WAAW,EAAE,6BAA6B,GAAG,SAAS,EACtD,iBAAiB,EAAE,eAAe,GACjC,qCAAqC,CAIvC"}

package/dist/ui/NativeImagePreview/utils.js

@@ -40,6 +40,7 @@ function normalizePreviewItem(item, index) {
             poster,
             width: item.width,
             height: item.height,
+            alt: item.alt,
             raw: item,
         };
     }

package/dist/ui/NativeImagePreview/web/geometry.d.ts

@@ -0,0 +1,20 @@
+import type { NativeImagePreviewWebImageSize, NativeImagePreviewWebObjectFit, NativeImagePreviewWebRect } from './types';
+export type SharedElementGeometry = {
+    visibleFrame: NativeImagePreviewWebRect;
+    contentFrame: NativeImagePreviewWebRect;
+};
+export declare function rectFromDOMRect(rect: DOMRectReadOnly | NativeImagePreviewWebRect): NativeImagePreviewWebRect;
+export declare function rectFromElement(element: Element): NativeImagePreviewWebRect;
+export declare function viewportRect(): NativeImagePreviewWebRect;
+export declare function normalizeRect(input: Pick<NativeImagePreviewWebRect, 'left' | 'top' | 'width' | 'height'>): NativeImagePreviewWebRect;
+export declare function isUsableRect(rect: NativeImagePreviewWebRect | null | undefined): rect is NativeImagePreviewWebRect;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function fitRect(mediaSize: NativeImagePreviewWebImageSize, container: NativeImagePreviewWebRect, objectFit: NativeImagePreviewWebObjectFit): NativeImagePreviewWebRect;
+export declare function sharedGeometryFor(container: NativeImagePreviewWebRect, mediaSize: NativeImagePreviewWebImageSize, objectFit: NativeImagePreviewWebObjectFit): SharedElementGeometry;
+export declare function targetGeometryFor(mediaSize: NativeImagePreviewWebImageSize, container: NativeImagePreviewWebRect): SharedElementGeometry;
+export declare function intersectRects(first: NativeImagePreviewWebRect, second: NativeImagePreviewWebRect): NativeImagePreviewWebRect | null;
+export declare function lerp(start: number, end: number, progress: number): number;
+export declare function lerpRect(start: NativeImagePreviewWebRect, end: NativeImagePreviewWebRect, progress: number): NativeImagePreviewWebRect;
+export declare function easeOutCubic(t: number): number;
+export declare function easeOutQuart(t: number): number;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/ui/NativeImagePreview/web/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../../../src/ui/NativeImagePreview/web/geometry.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,8BAA8B,EAAE,8BAA8B,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEzH,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,EAAE,yBAAyB,CAAC;IACxC,YAAY,EAAE,yBAAyB,CAAC;CACzC,CAAC;AAEF,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,GAAG,yBAAyB,GAAG,yBAAyB,CAO5G;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,yBAAyB,CAE3E;AAED,wBAAgB,YAAY,IAAI,yBAAyB,CAOxD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,yBAAyB,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG,yBAAyB,CASpI;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,yBAAyB,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,yBAAyB,CAElH;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,OAAO,CACrB,SAAS,EAAE,8BAA8B,EACzC,SAAS,EAAE,yBAAyB,EACpC,SAAS,EAAE,8BAA8B,GACxC,yBAAyB,CAkB3B;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,yBAAyB,EACpC,SAAS,EAAE,8BAA8B,EACzC,SAAS,EAAE,8BAA8B,GACxC,qBAAqB,CAUvB;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,8BAA8B,EAAE,SAAS,EAAE,yBAAyB,GAAG,qBAAqB,CAWxI;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,yBAAyB,EAAE,MAAM,EAAE,yBAAyB,GAAG,yBAAyB,GAAG,IAAI,CASpI;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEzE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,yBAAyB,EAAE,GAAG,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,GAAG,yBAAyB,CAOtI;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9C"}

package/dist/ui/NativeImagePreview/web/geometry.js

@@ -0,0 +1,121 @@
+"use strict";
+/// <reference lib="dom" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rectFromDOMRect = rectFromDOMRect;
+exports.rectFromElement = rectFromElement;
+exports.viewportRect = viewportRect;
+exports.normalizeRect = normalizeRect;
+exports.isUsableRect = isUsableRect;
+exports.clamp = clamp;
+exports.fitRect = fitRect;
+exports.sharedGeometryFor = sharedGeometryFor;
+exports.targetGeometryFor = targetGeometryFor;
+exports.intersectRects = intersectRects;
+exports.lerp = lerp;
+exports.lerpRect = lerpRect;
+exports.easeOutCubic = easeOutCubic;
+exports.easeOutQuart = easeOutQuart;
+function rectFromDOMRect(rect) {
+    return normalizeRect({
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+    });
+}
+function rectFromElement(element) {
+    return rectFromDOMRect(element.getBoundingClientRect());
+}
+function viewportRect() {
+    return normalizeRect({
+        left: 0,
+        top: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+}
+function normalizeRect(input) {
+    return {
+        left: input.left,
+        top: input.top,
+        width: input.width,
+        height: input.height,
+        right: input.left + input.width,
+        bottom: input.top + input.height,
+    };
+}
+function isUsableRect(rect) {
+    return !!rect && rect.width > 1 && rect.height > 1;
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function fitRect(mediaSize, container, objectFit) {
+    if (objectFit === 'fill') {
+        return normalizeRect(container);
+    }
+    const widthScale = container.width / Math.max(1, mediaSize.width);
+    const heightScale = container.height / Math.max(1, mediaSize.height);
+    const scale = objectFit === 'cover'
+        ? Math.max(widthScale, heightScale)
+        : Math.min(widthScale, heightScale);
+    const width = mediaSize.width * scale;
+    const height = mediaSize.height * scale;
+    return normalizeRect({
+        left: container.left + (container.width - width) / 2,
+        top: container.top + (container.height - height) / 2,
+        width,
+        height,
+    });
+}
+function sharedGeometryFor(container, mediaSize, objectFit) {
+    var _a;
+    const contentFrameInWindow = fitRect(mediaSize, container, objectFit);
+    const visibleFrame = (_a = intersectRects(container, contentFrameInWindow)) !== null && _a !== void 0 ? _a : normalizeRect(container);
+    const contentFrame = normalizeRect({
+        left: contentFrameInWindow.left - visibleFrame.left,
+        top: contentFrameInWindow.top - visibleFrame.top,
+        width: contentFrameInWindow.width,
+        height: contentFrameInWindow.height,
+    });
+    return { visibleFrame, contentFrame };
+}
+function targetGeometryFor(mediaSize, container) {
+    const visibleFrame = fitRect(mediaSize, container, 'contain');
+    return {
+        visibleFrame,
+        contentFrame: normalizeRect({
+            left: 0,
+            top: 0,
+            width: visibleFrame.width,
+            height: visibleFrame.height,
+        }),
+    };
+}
+function intersectRects(first, second) {
+    const left = Math.max(first.left, second.left);
+    const top = Math.max(first.top, second.top);
+    const right = Math.min(first.right, second.right);
+    const bottom = Math.min(first.bottom, second.bottom);
+    if (right <= left || bottom <= top) {
+        return null;
+    }
+    return normalizeRect({ left, top, width: right - left, height: bottom - top });
+}
+function lerp(start, end, progress) {
+    return start + (end - start) * progress;
+}
+function lerpRect(start, end, progress) {
+    return normalizeRect({
+        left: lerp(start.left, end.left, progress),
+        top: lerp(start.top, end.top, progress),
+        width: lerp(start.width, end.width, progress),
+        height: lerp(start.height, end.height, progress),
+    });
+}
+function easeOutCubic(t) {
+    return 1 - Math.pow(1 - t, 3);
+}
+function easeOutQuart(t) {
+    return 1 - Math.pow(1 - t, 4);
+}

package/dist/ui/NativeImagePreview/web/media.d.ts

@@ -0,0 +1,6 @@
+import type { NativeImagePreviewWebImageSize, NativeImagePreviewWebMediaItem, NativeImagePreviewWebResolvedItem } from './types';
+export declare function normalizeItems(items: readonly NativeImagePreviewWebMediaItem[]): NativeImagePreviewWebResolvedItem[];
+export declare function previewSourceFor(item: NativeImagePreviewWebResolvedItem): string;
+export declare function resolveMediaSize(item: NativeImagePreviewWebResolvedItem, fallback?: NativeImagePreviewWebImageSize | null): Promise<NativeImagePreviewWebImageSize>;
+export declare function waitForElementImage(element: Element | null | undefined): Promise<void>;
+//# sourceMappingURL=media.d.ts.map

package/dist/ui/NativeImagePreview/web/media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../../src/ui/NativeImagePreview/web/media.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,8BAA8B,EAAE,8BAA8B,EAAkC,iCAAiC,EAAE,MAAM,SAAS,CAAC;AAEjK,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,8BAA8B,EAAE,GAAG,iCAAiC,EAAE,CAoBpH;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,iCAAiC,GAAG,MAAM,CAEhF;AAED,wBAAsB,gBAAgB,CACpC,IAAI,EAAE,iCAAiC,EACvC,QAAQ,CAAC,EAAE,8BAA8B,GAAG,IAAI,GAC/C,OAAO,CAAC,8BAA8B,CAAC,CAgBzC;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAgBtF"}

package/dist/ui/NativeImagePreview/web/media.js

@@ -0,0 +1,90 @@
+"use strict";
+/// <reference lib="dom" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeItems = normalizeItems;
+exports.previewSourceFor = previewSourceFor;
+exports.resolveMediaSize = resolveMediaSize;
+exports.waitForElementImage = waitForElementImage;
+function normalizeItems(items) {
+    return items
+        .map((item, index) => {
+        var _a, _b, _c, _d;
+        const src = (_b = (_a = item.src) !== null && _a !== void 0 ? _a : item.url) !== null && _b !== void 0 ? _b : '';
+        if (!src.trim()) {
+            return null;
+        }
+        const type = resolveType(item);
+        return {
+            id: (_c = item.id) !== null && _c !== void 0 ? _c : String(index),
+            type,
+            src,
+            poster: item.poster,
+            width: item.width,
+            height: item.height,
+            alt: (_d = item.alt) !== null && _d !== void 0 ? _d : `Image ${index + 1}`,
+            raw: item,
+        };
+    })
+        .filter((item) => item !== null);
+}
+function previewSourceFor(item) {
+    var _a;
+    return item.type === 'video' ? (_a = item.poster) !== null && _a !== void 0 ? _a : item.src : item.src;
+}
+async function resolveMediaSize(item, fallback) {
+    if (fallback && fallback.width > 0 && fallback.height > 0) {
+        return fallback;
+    }
+    if (item.width && item.height) {
+        return { width: item.width, height: item.height };
+    }
+    const previewSource = previewSourceFor(item);
+    if (!previewSource) {
+        return { width: 1, height: 1 };
+    }
+    try {
+        return await loadImageSize(previewSource);
+    }
+    catch {
+        return { width: 1, height: 1 };
+    }
+}
+function waitForElementImage(element) {
+    if (!(element instanceof HTMLImageElement)) {
+        return Promise.resolve();
+    }
+    if (element.complete && element.naturalWidth > 0) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+        const done = () => {
+            element.removeEventListener('load', done);
+            element.removeEventListener('error', done);
+            resolve();
+        };
+        element.addEventListener('load', done, { once: true });
+        element.addEventListener('error', done, { once: true });
+    });
+}
+function resolveType(item) {
+    var _a, _b;
+    if (item.type === 'video') {
+        return 'video';
+    }
+    const src = (_b = (_a = item.src) !== null && _a !== void 0 ? _a : item.url) !== null && _b !== void 0 ? _b : '';
+    return /\.(mp4|webm|ogg)(\?.*)?$/i.test(src) ? 'video' : 'image';
+}
+function loadImageSize(src) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.decoding = 'async';
+        image.onload = () => {
+            resolve({
+                width: image.naturalWidth || image.width || 1,
+                height: image.naturalHeight || image.height || 1,
+            });
+        };
+        image.onerror = () => reject(new Error(`Unable to load image: ${src}`));
+        image.src = src;
+    });
+}

package/dist/ui/NativeImagePreview/web/styles.css

@@ -0,0 +1,137 @@
+.native-image-preview-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2147483000;
+  width: var(--native-image-preview-vw, 100vw);
+  height: var(--native-image-preview-vh, 100vh);
+  overflow: hidden;
+  color: #fff;
+  contain: layout size paint;
+  overscroll-behavior: none;
+  touch-action: none;
+  user-select: none;
+}
+
+.native-image-preview-backdrop {
+  position: absolute;
+  inset: 0;
+  background: #000;
+  will-change: opacity;
+}
+
+.native-image-preview-theme-light .native-image-preview-backdrop {
+  background: #fff;
+}
+
+.native-image-preview-viewport {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.native-image-preview-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: var(--native-image-preview-vw, 100vw);
+  height: var(--native-image-preview-vh, 100vh);
+  will-change: transform, opacity;
+}
+
+.native-image-preview-slide {
+  position: relative;
+  display: grid;
+  flex: 0 0 var(--native-image-preview-vw, 100vw);
+  width: var(--native-image-preview-vw, 100vw);
+  height: var(--native-image-preview-vh, 100vh);
+  place-items: center;
+  overflow: hidden;
+}
+
+.native-image-preview-media {
+  display: block;
+  max-width: var(--native-image-preview-vw, 100vw);
+  max-height: var(--native-image-preview-vh, 100vh);
+  object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
+}
+
+.native-image-preview-image {
+  width: auto;
+  height: auto;
+}
+
+.native-image-preview-video {
+  width: auto;
+  height: auto;
+  background: #000;
+}
+
+.native-image-preview-close {
+  position: fixed;
+  top: max(12px, env(safe-area-inset-top));
+  left: max(12px, env(safe-area-inset-left));
+  z-index: 3;
+  display: grid;
+  width: 42px;
+  height: 42px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  cursor: pointer;
+  font-size: 30px;
+  line-height: 1;
+  backdrop-filter: blur(18px);
+}
+
+.native-image-preview-counter {
+  position: fixed;
+  right: max(14px, env(safe-area-inset-right));
+  bottom: max(18px, env(safe-area-inset-bottom));
+  z-index: 3;
+  min-width: 58px;
+  padding: 8px 11px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 720;
+  text-align: center;
+  backdrop-filter: blur(18px);
+}
+
+.native-image-preview-fly-shell {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  overflow: hidden;
+  border-radius: 0;
+  pointer-events: none;
+  transform-origin: top left;
+  will-change: transform, width, height;
+}
+
+.native-image-preview-fly-media {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  max-width: none;
+  max-height: none;
+  object-fit: fill;
+  transform-origin: top left;
+  will-change: transform, width, height;
+}
+
+.native-image-preview-fading-out {
+  opacity: 0;
+  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}

package/dist/ui/NativeImagePreview/web/transition.d.ts

@@ -0,0 +1,15 @@
+import type { NativeImagePreviewWebResolvedItem } from './types';
+import { type SharedElementGeometry } from './geometry';
+type SharedTransitionOptions = {
+    item: NativeImagePreviewWebResolvedItem;
+    from: SharedElementGeometry;
+    to: SharedElementGeometry;
+    duration?: number;
+    parent?: HTMLElement;
+    beforeStart?: () => void | Promise<void>;
+    onProgress?: (progress: number) => void;
+    beforeRemove?: () => void | Promise<void>;
+};
+export declare function animateSharedElement({ item, from, to, duration, parent, beforeStart, onProgress, beforeRemove, }: SharedTransitionOptions): Promise<void>;
+export {};
+//# sourceMappingURL=transition.d.ts.map

package/dist/ui/NativeImagePreview/web/transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../../src/ui/NativeImagePreview/web/transition.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,SAAS,CAAC;AACjE,OAAO,EAA0B,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAGhF,KAAK,uBAAuB,GAAG;IAC7B,IAAI,EAAE,iCAAiC,CAAC;IACxC,IAAI,EAAE,qBAAqB,CAAC;IAC5B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3C,CAAC;AAEF,wBAAsB,oBAAoB,CAAC,EACzC,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,QAAc,EACd,MAAsB,EACtB,WAAW,EACX,UAAU,EACV,YAAY,GACb,EAAE,uBAAuB,GAAG,OAAO,CAAC,IAAI,CAAC,CA6CzC"}