@xhub-short/ui 1.0.0-beta.24 → 1.0.0-beta.26

package/dist/chunk-UTLVQ3FL.js

@@ -1,244 +0,0 @@
-import { useState, useRef, useCallback } from 'react';
-
-// src/hooks/usePinchZoom.ts
-var DEFAULT_MIN_SCALE = 1;
-var DEFAULT_MAX_SCALE = 3;
-var PINCH_THRESHOLD = 5;
-var ZOOM_THRESHOLD = 1.05;
-var RESET_ANIMATION_MS = 200;
-function getTouchDistance(t1, t2) {
-  const dx = t1.clientX - t2.clientX;
-  const dy = t1.clientY - t2.clientY;
-  return Math.sqrt(dx * dx + dy * dy);
-}
-function getTouchMidpoint(t1, t2) {
-  return {
-    x: (t1.clientX + t2.clientX) / 2,
-    y: (t1.clientY + t2.clientY) / 2
-  };
-}
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
-function usePinchZoom({
-  containerRef,
-  minScale = DEFAULT_MIN_SCALE,
-  maxScale = DEFAULT_MAX_SCALE,
-  disabled = false,
-  onZoomStart,
-  onZoomEnd,
-  onZoomReset
-}) {
-  const [scale, setScale] = useState(1);
-  const [translateX, setTranslateX] = useState(0);
-  const [translateY, setTranslateY] = useState(0);
-  const [isPinching, setIsPinching] = useState(false);
-  const isAnimatingRef = useRef(false);
-  const scaleRef = useRef(1);
-  const txRef = useRef(0);
-  const tyRef = useRef(0);
-  const initialDistanceRef = useRef(0);
-  const baseScaleRef = useRef(1);
-  const pinchActivatedRef = useRef(false);
-  const lastPanRef = useRef(null);
-  const isPanningRef = useRef(false);
-  const contentElementRef = useRef(null);
-  const rafRef = useRef(null);
-  const applyTransform = useCallback(
-    (s, tx, ty) => {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-      }
-      rafRef.current = requestAnimationFrame(() => {
-        const el = contentElementRef.current ?? containerRef.current?.firstElementChild;
-        if (el instanceof HTMLElement) {
-          contentElementRef.current = el;
-          el.style.transform = `scale(${s}) translate(${tx}px, ${ty}px)`;
-        }
-        rafRef.current = null;
-      });
-    },
-    [containerRef]
-  );
-  const clampTranslation = useCallback(
-    (tx, ty, currentScale) => {
-      if (currentScale <= 1) return { x: 0, y: 0 };
-      const container = containerRef.current;
-      if (!container) return { x: tx, y: ty };
-      const rect = container.getBoundingClientRect();
-      const maxTx = (currentScale - 1) * rect.width / (2 * currentScale);
-      const maxTy = (currentScale - 1) * rect.height / (2 * currentScale);
-      return {
-        x: clamp(tx, -maxTx, maxTx),
-        y: clamp(ty, -maxTy, maxTy)
-      };
-    },
-    [containerRef]
-  );
-  const handleTouchStart = useCallback(
-    (e) => {
-      if (disabled) return;
-      const touches = e.touches;
-      if (touches.length === 2) {
-        const t0 = touches[0];
-        const t1 = touches[1];
-        if (!t0 || !t1) return;
-        e.preventDefault();
-        const distance = getTouchDistance(t0, t1);
-        initialDistanceRef.current = distance;
-        baseScaleRef.current = scaleRef.current;
-        pinchActivatedRef.current = false;
-        isPanningRef.current = false;
-        lastPanRef.current = null;
-        setIsPinching(true);
-        onZoomStart?.();
-        return;
-      }
-      if (touches.length === 1 && scaleRef.current > ZOOM_THRESHOLD) {
-        const t0 = touches[0];
-        if (!t0) return;
-        e.preventDefault();
-        isPanningRef.current = true;
-        lastPanRef.current = {
-          x: t0.clientX,
-          y: t0.clientY
-        };
-      }
-    },
-    [disabled, onZoomStart]
-  );
-  const handleTouchMove = useCallback(
-    (e) => {
-      if (disabled) return;
-      const touches = e.touches;
-      if (touches.length === 2) {
-        const t0 = touches[0];
-        const t1 = touches[1];
-        if (!t0 || !t1) return;
-        e.preventDefault();
-        const distance = getTouchDistance(t0, t1);
-        if (!pinchActivatedRef.current && Math.abs(distance - initialDistanceRef.current) < PINCH_THRESHOLD) {
-          return;
-        }
-        pinchActivatedRef.current = true;
-        const ratio = distance / initialDistanceRef.current;
-        const newScale = clamp(baseScaleRef.current * ratio, minScale, maxScale);
-        const container = containerRef.current;
-        if (container) {
-          const rect = container.getBoundingClientRect();
-          const midpoint = getTouchMidpoint(t0, t1);
-          const centerX = rect.left + rect.width / 2;
-          const centerY = rect.top + rect.height / 2;
-          const offsetX = (midpoint.x - centerX) / newScale;
-          const offsetY = (midpoint.y - centerY) / newScale;
-          const scaleDelta = newScale - scaleRef.current;
-          const newTx = txRef.current - offsetX * scaleDelta / newScale;
-          const newTy = tyRef.current - offsetY * scaleDelta / newScale;
-          const clamped = clampTranslation(newTx, newTy, newScale);
-          txRef.current = clamped.x;
-          tyRef.current = clamped.y;
-        }
-        scaleRef.current = newScale;
-        applyTransform(newScale, txRef.current, tyRef.current);
-        return;
-      }
-      if (touches.length === 1 && isPanningRef.current && lastPanRef.current) {
-        const t0 = touches[0];
-        if (!t0) return;
-        e.preventDefault();
-        const dx = (t0.clientX - lastPanRef.current.x) / scaleRef.current;
-        const dy = (t0.clientY - lastPanRef.current.y) / scaleRef.current;
-        lastPanRef.current = {
-          x: t0.clientX,
-          y: t0.clientY
-        };
-        const newTx = txRef.current + dx;
-        const newTy = tyRef.current + dy;
-        const clamped = clampTranslation(newTx, newTy, scaleRef.current);
-        txRef.current = clamped.x;
-        tyRef.current = clamped.y;
-        applyTransform(scaleRef.current, clamped.x, clamped.y);
-      }
-    },
-    [disabled, minScale, maxScale, containerRef, applyTransform, clampTranslation]
-  );
-  const handleTouchEnd = useCallback(
-    (e) => {
-      if (disabled) return;
-      const touches = e.touches;
-      if (touches.length === 0) {
-        isPanningRef.current = false;
-        lastPanRef.current = null;
-        if (scaleRef.current < ZOOM_THRESHOLD) {
-          scaleRef.current = 1;
-          txRef.current = 0;
-          tyRef.current = 0;
-          applyTransform(1, 0, 0);
-        }
-        setScale(scaleRef.current);
-        setTranslateX(txRef.current);
-        setTranslateY(tyRef.current);
-        setIsPinching(false);
-        onZoomEnd?.(scaleRef.current);
-        return;
-      }
-      if (touches.length === 1 && scaleRef.current > ZOOM_THRESHOLD) {
-        const t0 = touches[0];
-        if (!t0) return;
-        isPanningRef.current = true;
-        lastPanRef.current = {
-          x: t0.clientX,
-          y: t0.clientY
-        };
-        setIsPinching(false);
-      }
-    },
-    [disabled, applyTransform, onZoomEnd]
-  );
-  const resetZoom = useCallback(() => {
-    if (scaleRef.current <= 1 && txRef.current === 0 && tyRef.current === 0) {
-      return;
-    }
-    isAnimatingRef.current = true;
-    scaleRef.current = 1;
-    txRef.current = 0;
-    tyRef.current = 0;
-    setScale(1);
-    setTranslateX(0);
-    setTranslateY(0);
-    const el = contentElementRef.current ?? containerRef.current?.firstElementChild;
-    if (el instanceof HTMLElement) {
-      el.style.transition = `transform ${RESET_ANIMATION_MS}ms ease-out`;
-      el.style.transform = "scale(1) translate(0px, 0px)";
-      setTimeout(() => {
-        el.style.transition = "";
-        isAnimatingRef.current = false;
-      }, RESET_ANIMATION_MS);
-    } else {
-      isAnimatingRef.current = false;
-    }
-    onZoomReset?.();
-  }, [containerRef, onZoomReset]);
-  const isZoomed = scale > ZOOM_THRESHOLD;
-  const contentStyle = {
-    transform: scale !== 1 || translateX !== 0 || translateY !== 0 ? `scale(${scale}) translate(${translateX}px, ${translateY}px)` : void 0,
-    transformOrigin: "center center",
-    willChange: isZoomed || isPinching ? "transform" : void 0,
-    touchAction: isZoomed ? "none" : void 0
-  };
-  const handlers = {
-    onTouchStart: handleTouchStart,
-    onTouchMove: handleTouchMove,
-    onTouchEnd: handleTouchEnd
-  };
-  return {
-    handlers,
-    contentStyle,
-    isZoomed,
-    isPinching,
-    resetZoom,
-    scale
-  };
-}
-
-export { usePinchZoom };

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

@@ -1,39 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-interface ZoomableContainerProps {
-    /** Content to make zoomable */
-    children: ReactNode;
-    /** When this value changes, zoom resets to 1x (e.g., video index) */
-    resetOnChange?: unknown;
-    /** Minimum scale (default: 1) */
-    minScale?: number;
-    /** Maximum scale (default: 3) */
-    maxScale?: number;
-    /** Whether zoom is disabled (default: false) */
-    disabled?: boolean;
-    /** Called when zoom gesture starts */
-    onZoomStart?: () => void;
-    /** Called when zoom gesture ends */
-    onZoomEnd?: (scale: number) => void;
-    /** Called when zoom resets */
-    onZoomReset?: () => void;
-    /** Called when zoomed state changes (for parent to disable tap/swipe) */
-    onZoomedChange?: (isZoomed: boolean) => void;
-    /** Additional class name */
-    className?: string;
-    /** Test ID */
-    testId?: string;
-}
-declare function ZoomableContainerBase({ children, resetOnChange, minScale, maxScale, disabled, onZoomStart, onZoomEnd, onZoomReset, onZoomedChange, className, testId, }: ZoomableContainerProps): React.ReactElement;
-declare const ZoomableContainer: react.MemoExoticComponent<typeof ZoomableContainerBase>;
-
-/**
- * ZoomableContainer CSS
- *
- * Styles for the pinch-to-zoom container.
- * Uses CSS-in-TS pattern consistent with other components.
- */
-declare const ZOOMABLE_CONTAINER_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ZoomableContainer\n * Wraps content to enable pinch-to-zoom gesture\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-zoomable-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  /* Prevent browser's default pinch-zoom on the container */\n  touch-action: pan-y;\n}\n\n/* When zoomed, take full touch control */\n.sv-zoomable-container--zoomed {\n  touch-action: none;\n}\n\n/* Content wrapper that receives the transform */\n.sv-zoomable-container__content {\n  width: 100%;\n  height: 100%;\n  transform-origin: center center;\n}\n\n/* GPU acceleration during gesture */\n.sv-zoomable-container--active .sv-zoomable-container__content {\n  will-change: transform;\n}\n";
-
-export { ZOOMABLE_CONTAINER_CSS, ZoomableContainer, type ZoomableContainerProps };

package/dist/components/ZoomableContainer/index.js

@@ -1 +0,0 @@
-export { ZOOMABLE_CONTAINER_CSS, ZoomableContainer } from '../../chunk-TJCPW4AO.js';