@musecat/uikit 0.1.1

package/packages/Frameworks/Dialog/hooks/useDialogPosition.ts

@@ -0,0 +1,298 @@
+import { useViewportHeight } from "@musecat/functionkit";
+import { useCallback, useLayoutEffect, useState } from "react";
+import { SizePX } from "@/packages/Frameworks/_shared/sizing";
+import type { OffsetConfig } from "@/packages/Frameworks/Dialog/Dialog.types";
+
+export type PopoverPlacement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "right";
+
+interface UseDialogPositionProps {
+  open: boolean;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  contentRef: React.RefObject<HTMLElement | null>;
+  placement?: PopoverPlacement;
+  strategy?: "anchored" | "center-selected";
+  selectedItemSelector?: string;
+  matchAnchorWidth?: boolean;
+  coverAnchor?: boolean;
+  gap?: number;
+  margin?: number;
+  recalcKey?: string | number;
+  offset?: OffsetConfig;
+}
+
+export function useDialogPosition(props: UseDialogPositionProps) {
+  const { height: viewportHeight } = useViewportHeight();
+  const {
+    open,
+    anchorRef,
+    contentRef,
+    placement = "bottom-start",
+    strategy = "anchored",
+    selectedItemSelector = '[data-selected="true"]',
+    matchAnchorWidth = false,
+    coverAnchor = false,
+    gap = 12,
+    margin = 8,
+    offset,
+  } = props;
+  const [topValue, setTopValue] = useState<number | null>(null);
+  const [leftValue, setLeftValue] = useState<number | null>(null);
+  const [maxHeightValue, setMaxHeightValue] = useState(400);
+  const [isPositionReady, setIsPositionReady] = useState(false);
+  const [computedWidth, setComputedWidth] = useState<number | null>(null);
+  const [resolvedPlacement, setResolvedPlacement] =
+    useState<string>("bottom-left");
+
+  const _toPx = useCallback(
+    (value: number | string | undefined, fallback: number) => {
+      if (typeof window === "undefined") return fallback;
+      const rootFont =
+        parseFloat(
+          window.getComputedStyle(document.documentElement).fontSize,
+        ) || 16;
+      if (typeof value === "string") {
+        const normalized = value.trim().toLowerCase();
+        const numeric = parseFloat(normalized);
+        if (Number.isNaN(numeric)) return fallback;
+        if (normalized.endsWith("px")) return numeric;
+        if (normalized.endsWith("vh"))
+          return window.innerHeight * (numeric / 100);
+        if (normalized.endsWith("vw"))
+          return window.innerWidth * (numeric / 100);
+      }
+      return SizePX(value, fallback, rootFont);
+    },
+    [],
+  );
+
+  const getPlacementPosition = useCallback(
+    (
+      row: "top" | "middle" | "bottom",
+      col: "left" | "center" | "right",
+      anchorRect: DOMRect,
+      contentRect: DOMRect,
+    ) => {
+      const controlTop = anchorRect.top;
+      const controlLeft = anchorRect.left;
+      const controlHeight = anchorRect.height;
+      const controlWidth = anchorRect.width;
+      const contentHeight = contentRect.height;
+      const contentWidth = contentRect.width;
+
+      const top =
+        row === "top"
+          ? controlTop - contentHeight - gap
+          : row === "middle"
+            ? controlTop + (controlHeight - contentHeight) / 2
+            : controlTop + controlHeight + gap;
+
+      const left =
+        col === "left"
+          ? row === "middle"
+            ? controlLeft - contentWidth - gap
+            : controlLeft
+          : col === "center"
+            ? controlLeft + (controlWidth - contentWidth) / 2
+            : row === "middle"
+              ? controlLeft + controlWidth + gap
+              : controlLeft + controlWidth - contentWidth;
+
+      return { top, left };
+    },
+    [gap],
+  );
+
+  const updatePosition = useCallback(() => {
+    if (!open || !anchorRef.current || !contentRef.current) return;
+
+    const anchorEl = anchorRef.current;
+    const contentEl = contentRef.current;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    const contentRect = {
+      width: contentEl.offsetWidth || contentEl.clientWidth || 0,
+      height: contentEl.offsetHeight || contentEl.clientHeight || 0,
+    } as DOMRect;
+
+    if (matchAnchorWidth) {
+      setComputedWidth(anchorRect.width);
+    } else {
+      setComputedWidth(null);
+    }
+
+    let preferredTop = 0;
+    let preferredLeft = 0;
+    let finalPlacement = resolvedPlacement;
+
+    let row: "top" | "middle" | "bottom" = "bottom";
+    let col: "left" | "center" | "right" = "left";
+
+    if (placement === "top") {
+      row = "top";
+      col = "center";
+    } else if (placement === "top-start") {
+      row = "top";
+      col = "left";
+    } else if (placement === "top-end") {
+      row = "top";
+      col = "right";
+    } else if (placement === "bottom") {
+      row = "bottom";
+      col = "center";
+    } else if (placement === "bottom-start") {
+      row = "bottom";
+      col = "left";
+    } else if (placement === "bottom-end") {
+      row = "bottom";
+      col = "right";
+    } else if (placement === "left") {
+      row = "middle";
+      col = "left";
+    } else if (placement === "right") {
+      row = "middle";
+      col = "right";
+    }
+
+    if (strategy === "center-selected") {
+      const selectedEl = contentEl.querySelector(
+        selectedItemSelector,
+      ) as HTMLElement | null;
+      const firstOptionEl = contentEl.querySelector(
+        '[role="option"]',
+      ) as HTMLElement | null;
+      const targetEl = selectedEl ?? firstOptionEl;
+      if (targetEl) {
+        const controlCenterY = anchorRect.top + anchorRect.height / 2;
+        const targetCenterY = targetEl.offsetTop + targetEl.offsetHeight / 2;
+        preferredTop = controlCenterY - targetCenterY;
+      } else {
+        preferredTop = anchorRect.bottom + gap;
+      }
+      preferredLeft = anchorRect.left;
+      finalPlacement = "bottom-left";
+    } else {
+      const pos = getPlacementPosition(row, col, anchorRect, contentRect);
+      preferredTop = pos.top;
+      preferredLeft = pos.left;
+      finalPlacement = `${row}-${col}`;
+    }
+
+    if (coverAnchor) {
+      if (row === "bottom") {
+        preferredTop -= anchorRect.height + gap;
+      } else if (row === "top") {
+        preferredTop += anchorRect.height + gap;
+      } else if (row === "middle") {
+        if (col === "left") {
+          preferredLeft += anchorRect.width + gap;
+        } else if (col === "right") {
+          preferredLeft -= anchorRect.width + gap;
+        }
+      }
+    }
+
+    if (offset) {
+      const offsetX = _toPx(offset.x, 0);
+      const offsetY = _toPx(offset.y, 0);
+      preferredLeft += offsetX;
+      preferredTop += offsetY;
+    }
+
+    const minTop = margin;
+    const maxTop =
+      (viewportHeight || window.innerHeight) - margin - contentRect.height;
+    const nextTop = Math.max(minTop, Math.min(maxTop, preferredTop));
+    const minLeft = margin;
+    const maxLeft =
+      (window.visualViewport?.width ?? window.innerWidth) -
+      margin -
+      contentRect.width;
+    const nextLeft = Math.max(minLeft, Math.min(maxLeft, preferredLeft));
+
+    setTopValue(nextTop);
+    setLeftValue(nextLeft);
+    setResolvedPlacement(finalPlacement);
+
+    const availableHeight =
+      strategy === "center-selected"
+        ? (viewportHeight || window.innerHeight) - margin * 2
+        : row === "top"
+          ? anchorRect.top - gap - margin
+          : row === "bottom"
+            ? (viewportHeight || window.innerHeight) -
+              margin -
+              (anchorRect.bottom + gap)
+            : (viewportHeight || window.innerHeight) - margin * 2;
+    setMaxHeightValue(Math.max(100, availableHeight));
+  }, [
+    open,
+    anchorRef,
+    contentRef,
+    placement,
+    strategy,
+    selectedItemSelector,
+    matchAnchorWidth,
+    coverAnchor,
+    gap,
+    margin,
+    offset,
+    resolvedPlacement,
+    getPlacementPosition,
+    viewportHeight,
+    _toPx,
+  ]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setIsPositionReady(false);
+      setTopValue(null);
+      setLeftValue(null);
+      return;
+    }
+    let raf = 0;
+    const schedule = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        updatePosition();
+        setIsPositionReady(true);
+      });
+    };
+
+    schedule();
+
+    const contentEl = contentRef.current;
+    const anchorEl = anchorRef.current;
+    let resizeObserver: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => schedule());
+      if (contentEl) resizeObserver.observe(contentEl);
+      if (anchorEl) resizeObserver.observe(anchorEl);
+    }
+
+    window.addEventListener("resize", schedule);
+    window.addEventListener("scroll", schedule, true);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", schedule, true);
+    };
+  }, [open, updatePosition, anchorRef, contentRef]);
+
+  return {
+    topValue,
+    leftValue,
+    maxHeightValue,
+    resolvedPlacement,
+    computedWidth,
+    isPositionReady,
+  };
+}

package/packages/Frameworks/Dialog/hooks/useSheetDrag.ts

@@ -0,0 +1,325 @@
+"use client";
+
+import { animate, type MotionValue, useDragControls } from "motion/react";
+import { useCallback, useRef } from "react";
+import { toPx } from "@/packages/Frameworks/Dialog/hooks/useSheetGeometry";
+import { motionTransitions } from "@/packages/Frameworks/Motion/Motion.presets";
+
+const CLOSE_VELOCITY = 900;
+const CLOSE_DISTANCE_RATIO = 0.34;
+const SNAP_VELOCITY_PROJECTION = 0.18;
+
+export interface DragHandlers {
+  handleDragEnd: (
+    _: MouseEvent | TouchEvent | PointerEvent,
+    info: { offset: { y: number }; velocity: { y: number } },
+  ) => void;
+  handleContentPointerDown: (e: React.PointerEvent) => void;
+  handleContentPointerMove: (e: React.PointerEvent) => void;
+  handleContentPointerUp: (e: React.PointerEvent) => void;
+  handleContentPointerCancel: () => void;
+}
+
+export interface UseSheetDragInput {
+  y: MotionValue<number>;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  config?: {
+    disableDrag?: boolean;
+    freeDrag?: boolean;
+    min?: number | string;
+    snapPoints?: number[];
+  };
+  viewportHeight: number;
+  getViewportHeight: () => number;
+  sheetHeightPx: number;
+  isFreeDrag: boolean;
+  minPx: number;
+  maxPx: number;
+  maxSnap: number;
+  normalizedSnapPoints: number[];
+  resolvedFreeDragHeightPx: number;
+  isMinDefault: boolean;
+  snapIndex: number;
+  currentSnap: number;
+  getTargetYForSnap: (snap: number) => number;
+  getGapHiddenY: (
+    currentSnap: number,
+    isFreeDrag: boolean,
+    getTargetYForSnap: (snap: number) => number,
+  ) => number;
+  close: () => void;
+  cancelEntranceAnimation: () => void;
+  onSnapIndexChange?: (index: number) => void;
+  onDragStateChange?: (dragging: boolean) => void;
+}
+
+export function useSheetDrag({
+  y,
+  scrollRef,
+  config,
+  viewportHeight,
+  getViewportHeight,
+  sheetHeightPx,
+  isFreeDrag,
+  minPx,
+  maxPx,
+  maxSnap,
+  normalizedSnapPoints,
+  resolvedFreeDragHeightPx,
+  isMinDefault,
+  snapIndex,
+  currentSnap,
+  getTargetYForSnap,
+  getGapHiddenY,
+  close,
+  cancelEntranceAnimation,
+  onSnapIndexChange,
+  onDragStateChange,
+}: UseSheetDragInput): DragHandlers {
+  const _dragControls = useDragControls();
+  const contentDraggingRef = useRef(false);
+  const contentPointerActiveRef = useRef(false);
+  const isScrollAtTopOnDownRef = useRef(false);
+  const contentDragStartY = useRef(0);
+  const contentDragSheetStartY = useRef(0);
+  const contentDragPrevY = useRef(0);
+  const contentDragPrevTime = useRef(0);
+
+  const handleDragEnd = useCallback(
+    (
+      _: MouseEvent | TouchEvent | PointerEvent,
+      info: { offset: { y: number }; velocity: { y: number } },
+    ) => {
+      const currentVh = viewportHeight || getViewportHeight();
+      const currentY = y.get();
+      const projectedY = currentY + info.velocity.y * SNAP_VELOCITY_PROJECTION;
+
+      if (isFreeDrag) {
+        const calculatedMinPx = toPx(
+          config?.min,
+          currentVh,
+          toPx("7.2rem", currentVh, 115.2),
+        );
+        const projectedHeightPx = resolvedFreeDragHeightPx - projectedY;
+
+        if (
+          config?.min === undefined &&
+          !isMinDefault &&
+          (info.velocity.y > CLOSE_VELOCITY ||
+            projectedHeightPx < calculatedMinPx * (1 - CLOSE_DISTANCE_RATIO))
+        ) {
+          onDragStateChange?.(false);
+          close();
+          return;
+        }
+
+        const minTargetY = Math.max(
+          0,
+          resolvedFreeDragHeightPx - calculatedMinPx,
+        );
+        const maxTargetY = 0;
+        const targetY = Math.max(maxTargetY, Math.min(minTargetY, projectedY));
+
+        animate(y, targetY, motionTransitions.sheet.snap);
+        onDragStateChange?.(false);
+        return;
+      }
+
+      const projectedSnap = maxSnap - projectedY / currentVh;
+      const minSnap = normalizedSnapPoints[0] ?? 0.5;
+      const isAtLowestSnap = snapIndex === 0;
+      let releasedBelow: boolean;
+      if (normalizedSnapPoints.length === 1) {
+        releasedBelow = projectedY > (sheetHeightPx || currentVh) * 0.5;
+      } else {
+        releasedBelow = projectedSnap < minSnap * (1 - CLOSE_DISTANCE_RATIO);
+      }
+      const flickDown = info.velocity.y > CLOSE_VELOCITY && projectedY > 0;
+      if (
+        isAtLowestSnap &&
+        config?.min === undefined &&
+        (releasedBelow || flickDown)
+      ) {
+        onDragStateChange?.(false);
+        close();
+        return;
+      }
+
+      const nextIndex = normalizedSnapPoints.reduce(
+        (closestIndex, snap, index) => {
+          const closestDist = Math.abs(
+            normalizedSnapPoints[closestIndex] - projectedSnap,
+          );
+          return Math.abs(snap - projectedSnap) < closestDist
+            ? index
+            : closestIndex;
+        },
+        snapIndex,
+      );
+
+      onSnapIndexChange?.(nextIndex);
+      const targetY = getTargetYForSnap(normalizedSnapPoints[nextIndex]);
+      animate(y, targetY, motionTransitions.sheet.snap);
+      onDragStateChange?.(false);
+    },
+    [
+      close,
+      maxSnap,
+      normalizedSnapPoints,
+      snapIndex,
+      viewportHeight,
+      y,
+      getTargetYForSnap,
+      getViewportHeight,
+      isFreeDrag,
+      config?.min,
+      resolvedFreeDragHeightPx,
+      sheetHeightPx,
+      isMinDefault,
+      onSnapIndexChange,
+      onDragStateChange,
+    ],
+  );
+
+  const handleContentPointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (config?.disableDrag) return;
+      contentPointerActiveRef.current = true;
+      onDragStateChange?.(true);
+
+      const el = scrollRef?.current;
+      isScrollAtTopOnDownRef.current = el ? el.scrollTop <= 1 : true;
+
+      y.stop();
+      cancelEntranceAnimation();
+      const baseY = isFreeDrag ? 0 : getTargetYForSnap(currentSnap);
+      y.jump(baseY);
+      contentDraggingRef.current = false;
+      contentDragStartY.current = e.clientY;
+      contentDragSheetStartY.current = baseY;
+      contentDragPrevY.current = e.clientY;
+      contentDragPrevTime.current = performance.now();
+    },
+    [
+      config?.disableDrag,
+      y,
+      isFreeDrag,
+      getTargetYForSnap,
+      currentSnap,
+      cancelEntranceAnimation,
+      onDragStateChange,
+      scrollRef,
+    ],
+  );
+
+  const handleContentPointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (config?.disableDrag) return;
+      if (!contentPointerActiveRef.current) return;
+      if (!isScrollAtTopOnDownRef.current) return;
+      const el = scrollRef?.current;
+      if (!el) return;
+
+      if (contentDraggingRef.current) {
+        e.preventDefault();
+        const deltaY = e.clientY - contentDragStartY.current;
+        const maxDragY =
+          isFreeDrag || config?.min !== undefined
+            ? Math.max(0, resolvedFreeDragHeightPx - minPx)
+            : Number.POSITIVE_INFINITY;
+        y.set(
+          Math.min(
+            maxDragY,
+            Math.max(0, contentDragSheetStartY.current + deltaY),
+          ),
+        );
+        contentDragPrevY.current = e.clientY;
+        contentDragPrevTime.current = performance.now();
+        return;
+      }
+
+      if (el.scrollTop > 1) return;
+      const deltaY = e.clientY - contentDragStartY.current;
+      if (deltaY <= 4) return;
+
+      contentDraggingRef.current = true;
+      e.preventDefault();
+      el.setPointerCapture(e.pointerId);
+      el.scrollTop = 0;
+      el.style.touchAction = "none";
+    },
+    [
+      config?.disableDrag,
+      y,
+      isFreeDrag,
+      config?.min,
+      resolvedFreeDragHeightPx,
+      minPx,
+      scrollRef?.current,
+    ],
+  );
+
+  const handleContentPointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      contentPointerActiveRef.current = false;
+      const el = scrollRef?.current;
+      if (el) {
+        el.style.touchAction = "";
+        try {
+          el.releasePointerCapture(e.pointerId);
+        } catch {}
+      }
+
+      if (!contentDraggingRef.current) return;
+      contentDraggingRef.current = false;
+
+      const dt = Math.max(1, performance.now() - contentDragPrevTime.current);
+      const dy = e.clientY - contentDragPrevY.current;
+      const velocity = (dy / dt) * 1000;
+
+      handleDragEnd(e as any, {
+        offset: { y: y.get() - contentDragSheetStartY.current },
+        velocity: { y: velocity },
+      });
+    },
+    [y, handleDragEnd, scrollRef?.current],
+  );
+
+  const handleContentPointerCancel = useCallback(() => {
+    contentPointerActiveRef.current = false;
+    if (!contentDraggingRef.current) return;
+    contentDraggingRef.current = false;
+    const el = scrollRef?.current;
+    if (!el) return;
+    el.style.touchAction = "";
+    const currentVh = viewportHeight || getViewportHeight();
+    const snapTargetY = isFreeDrag
+      ? Math.max(
+          0,
+          resolvedFreeDragHeightPx -
+            toPx(config?.min, currentVh, toPx("7.2rem", currentVh, 115.2)),
+        )
+      : getTargetYForSnap(currentSnap);
+    animate(y, Math.max(0, snapTargetY), motionTransitions.sheet.snap);
+    onDragStateChange?.(false);
+  }, [
+    isFreeDrag,
+    config?.min,
+    viewportHeight,
+    resolvedFreeDragHeightPx,
+    y,
+    getTargetYForSnap,
+    currentSnap,
+    getViewportHeight,
+    onDragStateChange,
+    scrollRef?.current,
+  ]);
+
+  return {
+    handleDragEnd,
+    handleContentPointerDown,
+    handleContentPointerMove,
+    handleContentPointerUp,
+    handleContentPointerCancel,
+  };
+}