@ttt-productions/mobile-core 0.0.1 → 0.0.2

package/dist/viewport/useViewportHeightVars.js

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { isBrowser } from "../env";
+/**
+ * Sets:
+ *  --ttt-vh: 1% of *layout* viewport height (window.innerHeight)
+ *  --ttt-dvh: 1% of *visual* viewport height (visualViewport.height when available)
+ *
+ * Use in CSS:
+ *  height: calc(var(--ttt-dvh, var(--ttt-vh, 1vh)) * 100);
+ */
+export function useViewportHeightVars() {
+    useEffect(() => {
+        if (!isBrowser)
+            return;
+        const apply = () => {
+            const vh = window.innerHeight * 0.01;
+            document.documentElement.style.setProperty("--ttt-vh", `${vh}px`);
+            const dvh = (window.visualViewport?.height ?? window.innerHeight) * 0.01;
+            document.documentElement.style.setProperty("--ttt-dvh", `${dvh}px`);
+        };
+        apply();
+        window.addEventListener("resize", apply, { passive: true });
+        window.visualViewport?.addEventListener("resize", apply, { passive: true });
+        return () => {
+            window.removeEventListener("resize", apply);
+            window.visualViewport?.removeEventListener("resize", apply);
+        };
+    }, []);
+}
+//# sourceMappingURL=useViewportHeightVars.js.map

package/dist/viewport/useViewportHeightVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewportHeightVars.js","sourceRoot":"","sources":["../../src/viewport/useViewportHeightVars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;YACrC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;YAElE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,IAAI,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;YACzE,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,GAAG,IAAI,CAAC,CAAC;QACtE,CAAC,CAAC;QAEF,KAAK,EAAE,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5E,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YAC5C,MAAM,CAAC,cAAc,EAAE,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/dist/viewport/useVisualViewport.d.ts

@@ -0,0 +1,11 @@
+export declare function useVisualViewport(): {
+    width: number;
+    height: number;
+    scale: number;
+    offsetTop: number;
+    offsetLeft: number;
+    pageTop: number;
+    pageLeft: number;
+    visualViewport: VisualViewport | null;
+};
+//# sourceMappingURL=useVisualViewport.d.ts.map

package/dist/viewport/useVisualViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisualViewport.d.ts","sourceRoot":"","sources":["../../src/viewport/useVisualViewport.ts"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB;;;;;;;;;EAsChC"}

package/dist/viewport/useVisualViewport.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { hasVisualViewport, isBrowser } from "../env";
+export function useVisualViewport() {
+    const vv = isBrowser && hasVisualViewport ? window.visualViewport : null;
+    const [state, setState] = useState(() => ({
+        width: vv?.width ?? 0,
+        height: vv?.height ?? 0,
+        scale: vv?.scale ?? 1,
+        offsetTop: vv?.offsetTop ?? 0,
+        offsetLeft: vv?.offsetLeft ?? 0,
+        pageTop: vv?.pageTop ?? 0,
+        pageLeft: vv?.pageLeft ?? 0,
+    }));
+    useEffect(() => {
+        if (!vv)
+            return;
+        const onChange = () => setState({
+            width: vv.width,
+            height: vv.height,
+            scale: vv.scale,
+            offsetTop: vv.offsetTop,
+            offsetLeft: vv.offsetLeft,
+            pageTop: vv.pageTop,
+            pageLeft: vv.pageLeft,
+        });
+        onChange();
+        vv.addEventListener("resize", onChange, { passive: true });
+        vv.addEventListener("scroll", onChange, { passive: true });
+        return () => {
+            vv.removeEventListener("resize", onChange);
+            vv.removeEventListener("scroll", onChange);
+        };
+    }, [vv]);
+    return { visualViewport: vv, ...state };
+}
+//# sourceMappingURL=useVisualViewport.js.map

package/dist/viewport/useVisualViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisualViewport.js","sourceRoot":"","sources":["../../src/viewport/useVisualViewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEtD,MAAM,UAAU,iBAAiB;IAC/B,MAAM,EAAE,GAAG,SAAS,IAAI,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,cAAe,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QACxC,KAAK,EAAE,EAAE,EAAE,KAAK,IAAI,CAAC;QACrB,MAAM,EAAE,EAAE,EAAE,MAAM,IAAI,CAAC;QACvB,KAAK,EAAE,EAAE,EAAE,KAAK,IAAI,CAAC;QACrB,SAAS,EAAE,EAAE,EAAE,SAAS,IAAI,CAAC;QAC7B,UAAU,EAAE,EAAE,EAAE,UAAU,IAAI,CAAC;QAC/B,OAAO,EAAE,EAAE,EAAE,OAAO,IAAI,CAAC;QACzB,QAAQ,EAAE,EAAE,EAAE,QAAQ,IAAI,CAAC;KAC5B,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,QAAQ,CAAC;YACP,KAAK,EAAE,EAAE,CAAC,KAAK;YACf,MAAM,EAAE,EAAE,CAAC,MAAM;YACjB,KAAK,EAAE,EAAE,CAAC,KAAK;YACf,SAAS,EAAE,EAAE,CAAC,SAAS;YACvB,UAAU,EAAE,EAAE,CAAC,UAAU;YACzB,OAAO,EAAE,EAAE,CAAC,OAAO;YACnB,QAAQ,EAAE,EAAE,CAAC,QAAQ;SACtB,CAAC,CAAC;QAEL,QAAQ,EAAE,CAAC;QACX,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3D,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YAC3C,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAET,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,CAAC;AAC1C,CAAC"}

package/package.json

@@ -1,20 +1,43 @@
 {
-  "name": "@ttt-productions/mobile-core",
-  "version": "0.0.1",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ttt-productions/ttt-packages.git",
-    "directory": "packages/mobile-core"
-  },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    }
-  }
+    "name": "@ttt-productions/mobile-core",
+    "version": "0.0.2",
+    "description": "Shared mobile utilities and responsive helpers for TTT Productions apps",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ttt-productions/ttt-packages.git",
+        "directory": "packages/mobile-core"
+    },
+    "type": "module",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "sideEffects": false,
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        }
+    },
+    "scripts": {
+        "build": "tsc",
+        "clean": "rm -rf dist *.tsbuildinfo",
+        "typecheck": "tsc --noEmit",
+        "prepublishOnly": "npm run clean && npm run build"
+    },
+    "peerDependencies": {
+        "react": ">=19.0.0",
+        "react-dom": ">=19.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "typescript": "^5.8.3"
+    },
+    "author": "DJ (TTT Productions)",
+    "license": "MIT"
 }

package/src/ios/useNoRubberBand.ts

@@ -1,20 +0,0 @@
-import { useEffect } from "react";
-import { isBrowser, isIOS } from "../env";
-
-/**
- * Prevents iOS rubber-band scroll on the document by limiting overscroll chaining.
- * Use sparingly (e.g., full-screen experiences).
- */
-export function useNoRubberBand(enabled: boolean) {
-  useEffect(() => {
-    if (!isBrowser || !isIOS || !enabled) return;
-
-    const el = document.documentElement;
-    const prev = el.style.overscrollBehaviorY as any;
-    (el.style as any).overscrollBehaviorY = "none";
-
-    return () => {
-      (el.style as any).overscrollBehaviorY = prev;
-    };
-  }, [enabled]);
-}

package/src/keyboard/KeyboardAvoidingView.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { useKeyboard } from "./useKeyboard";
-
-type Props = React.HTMLAttributes<HTMLDivElement> & {
-  /**
-   * If true, adds padding-bottom equal to keyboard height while open.
-   * Good default for forms.
-   */
-  padding?: boolean;
-  /**
-   * Adds extra px to bottom padding.
-   */
-  offset?: number;
-};
-
-/**
- * Desktop-safe: does nothing when keyboard is not detected.
- */
-export function KeyboardAvoidingView({ padding = true, offset = 0, style, ...rest }: Props) {
-  const k = useKeyboard();
-  const pb = padding && k.isOpen ? k.height + offset : 0;
-
-  return <div {...rest} style={{ ...style, paddingBottom: (style as any)?.paddingBottom ?? pb }} />;
-}

package/src/keyboard/focusOrder.ts

@@ -1,20 +0,0 @@
-export function getFocusableInputs(root: HTMLElement | Document = document) {
-  const el = root instanceof Document ? root : root;
-  const list = Array.from(
-    el.querySelectorAll<HTMLElement>(
-      'input, textarea, select, [contenteditable="true"], [data-ttt-input]'
-    )
-  ).filter((n) => !n.hasAttribute("disabled") && n.tabIndex !== -1);
-
-  // DOM order is usually correct; allow explicit override
-  list.sort((a, b) => {
-    const ao = Number(a.getAttribute("data-input-order") ?? "0");
-    const bo = Number(b.getAttribute("data-input-order") ?? "0");
-    if (ao && bo) return ao - bo;
-    if (ao) return -1;
-    if (bo) return 1;
-    return 0;
-  });
-
-  return list;
-}

package/src/keyboard/useInputNavigation.ts

@@ -1,44 +0,0 @@
-import { useCallback } from "react";
-import { getFocusableInputs } from "./focusOrder";
-
-type Options = {
-  root?: HTMLElement | null; // scope inputs
-  onDone?: () => void;
-};
-
-/**
- * Attach to inputs:
- *  onKeyDown={nav.onKeyDown}
- *  onSubmitEditing={nav.onSubmitEditing} (optional)
- *
- * Also supports explicit ordering via data-input-order.
- */
-export function useInputNavigation(opts?: Options) {
-  const root = opts?.root ?? null;
-
-  const focusNext = useCallback(() => {
-    const scope = root ?? document;
-    const inputs = getFocusableInputs(scope as any);
-    const active = document.activeElement as HTMLElement | null;
-    const idx = active ? inputs.indexOf(active) : -1;
-    const next = inputs[idx + 1];
-
-    if (next) next.focus();
-    else opts?.onDone?.();
-  }, [root, opts]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Enter") {
-        // allow textarea newlines
-        const el = e.currentTarget as HTMLElement;
-        if (el.tagName.toLowerCase() === "textarea") return;
-        e.preventDefault();
-        focusNext();
-      }
-    },
-    [focusNext]
-  );
-
-  return { focusNext, onKeyDown };
-}

package/src/keyboard/useKeepFocusedInputVisible.ts

@@ -1,41 +0,0 @@
-import { useEffect } from "react";
-import { isBrowser } from "../env";
-import { useKeyboard } from "./useKeyboard";
-
-/**
- * When keyboard opens, ensure focused element is visible within visual viewport.
- * - iOS Safari often hides the caret behind the keyboard.
- */
-export function useKeepFocusedInputVisible(opts?: {
-  extraOffset?: number; // px
-  scrollBehavior?: ScrollBehavior; // "smooth" | "auto"
-}) {
-  const { isOpen } = useKeyboard();
-  const extraOffset = opts?.extraOffset ?? 12;
-  const behavior = opts?.scrollBehavior ?? "smooth";
-
-  useEffect(() => {
-    if (!isBrowser) return;
-    if (!isOpen) return;
-
-    const el = document.activeElement as HTMLElement | null;
-    if (!el) return;
-
-    // only inputs-ish
-    const tag = el.tagName.toLowerCase();
-    const isInput =
-      tag === "input" || tag === "textarea" || tag === "select" || el.isContentEditable || el.hasAttribute("data-ttt-input");
-    if (!isInput) return;
-
-    const vv = window.visualViewport;
-    const vvH = vv?.height ?? window.innerHeight;
-    const rect = el.getBoundingClientRect();
-    const bottom = rect.bottom;
-    const limit = vvH - extraOffset;
-
-    if (bottom > limit) {
-      const delta = bottom - limit;
-      window.scrollBy({ top: delta, behavior });
-    }
-  }, [isOpen, extraOffset, behavior]);
-}

package/src/keyboard/useKeyboard.ts

@@ -1,74 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { hasVisualViewport, isBrowser } from "../env";
-import type { KeyboardState } from "../types";
-
-/**
- * Best effort keyboard detection:
- * - iOS Safari: visualViewport.height shrinks when keyboard shows
- * - fallback: focusin/focusout heuristics + innerHeight snapshots
- */
-export function useKeyboard(): KeyboardState {
-  const [baseline, setBaseline] = useState<number>(() => (isBrowser ? window.innerHeight : 0));
-  const [height, setHeight] = useState(0);
-  const [open, setOpen] = useState(false);
-  const [source, setSource] = useState<KeyboardState["source"]>("fallback");
-
-  useEffect(() => {
-    if (!isBrowser) return;
-
-    const setBaseIfNeeded = () => {
-      // update baseline when keyboard likely closed
-      const vvH = window.visualViewport?.height ?? window.innerHeight;
-      const inner = window.innerHeight;
-      const candidate = Math.max(vvH, inner);
-      setBaseline((b) => (Math.abs(candidate - b) > 40 ? candidate : b));
-    };
-
-    const onVV = () => {
-      const vvH = window.visualViewport?.height ?? window.innerHeight;
-      const delta = Math.max(0, Math.round(baseline - vvH));
-      const isOpen = delta > 80; // threshold
-      setSource("visualViewport");
-      setHeight(isOpen ? delta : 0);
-      setOpen(isOpen);
-      if (!isOpen) setBaseIfNeeded();
-    };
-
-    const onFocusIn = () => {
-      // baseline snapshot on focus to reduce false positives
-      setBaseline((b) => Math.max(b, window.innerHeight));
-    };
-    const onFocusOut = () => {
-      // allow baseline update shortly after blur
-      setTimeout(setBaseIfNeeded, 50);
-      setTimeout(() => {
-        setOpen(false);
-        setHeight(0);
-      }, 250);
-    };
-
-    if (hasVisualViewport) {
-      window.visualViewport!.addEventListener("resize", onVV, { passive: true });
-      window.visualViewport!.addEventListener("scroll", onVV, { passive: true });
-      onVV();
-    }
-
-    window.addEventListener("focusin", onFocusIn, { passive: true } as any);
-    window.addEventListener("focusout", onFocusOut, { passive: true } as any);
-    window.addEventListener("orientationchange", setBaseIfNeeded, { passive: true });
-
-    setBaseIfNeeded();
-
-    return () => {
-      if (hasVisualViewport) {
-        window.visualViewport!.removeEventListener("resize", onVV);
-        window.visualViewport!.removeEventListener("scroll", onVV);
-      }
-      window.removeEventListener("focusin", onFocusIn as any);
-      window.removeEventListener("focusout", onFocusOut as any);
-      window.removeEventListener("orientationchange", setBaseIfNeeded);
-    };
-  }, [baseline]);
-
-  return useMemo(() => ({ isOpen: open, height, source }), [open, height, source]);
-}

package/src/safe-area/SafeArea.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-type Props = React.HTMLAttributes<HTMLDivElement> & {
-  top?: boolean;
-  bottom?: boolean;
-  left?: boolean;
-  right?: boolean;
-};
-
-export function SafeArea({ top, bottom, left, right, style, ...rest }: Props) {
-  return (
-    <div
-      {...rest}
-      style={{
-        ...style,
-        paddingTop: top ? "env(safe-area-inset-top)" : (style as any)?.paddingTop,
-        paddingBottom: bottom ? "env(safe-area-inset-bottom)" : (style as any)?.paddingBottom,
-        paddingLeft: left ? "env(safe-area-inset-left)" : (style as any)?.paddingLeft,
-        paddingRight: right ? "env(safe-area-inset-right)" : (style as any)?.paddingRight,
-      }}
-    />
-  );
-}

package/src/safe-area/useSafeAreaInsets.ts

@@ -1,44 +0,0 @@
-import { useEffect, useState } from "react";
-import type { Insets } from "../types";
-import { isBrowser } from "../env";
-
-/**
- * Uses CSS env(safe-area-inset-*) by writing them to CSS vars and reading computed values.
- * Works on iOS Safari; harmless elsewhere.
- */
-export function useSafeAreaInsets(): Insets {
-  const [insets, setInsets] = useState<Insets>({ top: 0, right: 0, bottom: 0, left: 0 });
-
-  useEffect(() => {
-    if (!isBrowser) return;
-
-    const el = document.documentElement;
-
-    // set vars once
-    el.style.setProperty("--ttt-sai-top", "env(safe-area-inset-top)");
-    el.style.setProperty("--ttt-sai-right", "env(safe-area-inset-right)");
-    el.style.setProperty("--ttt-sai-bottom", "env(safe-area-inset-bottom)");
-    el.style.setProperty("--ttt-sai-left", "env(safe-area-inset-left)");
-
-    const read = () => {
-      const cs = getComputedStyle(el);
-      const px = (v: string) => Math.max(0, Math.round(parseFloat(v || "0")));
-      setInsets({
-        top: px(cs.getPropertyValue("--ttt-sai-top")),
-        right: px(cs.getPropertyValue("--ttt-sai-right")),
-        bottom: px(cs.getPropertyValue("--ttt-sai-bottom")),
-        left: px(cs.getPropertyValue("--ttt-sai-left")),
-      });
-    };
-
-    read();
-    window.addEventListener("resize", read, { passive: true });
-    window.addEventListener("orientationchange", read, { passive: true });
-    return () => {
-      window.removeEventListener("resize", read);
-      window.removeEventListener("orientationchange", read);
-    };
-  }, []);
-
-  return insets;
-}

package/src/scroll/useScrollLock.ts

@@ -1,37 +0,0 @@
-import { useEffect } from "react";
-import { isBrowser } from "../env";
-
-/**
- * Locks body scroll (mobile sheet/modal fix).
- * - preserves current scroll position
- * - iOS safe enough for common cases
- */
-export function useScrollLock(locked: boolean) {
-  useEffect(() => {
-    if (!isBrowser) return;
-    if (!locked) return;
-
-    const { body } = document;
-    const scrollY = window.scrollY;
-
-    const prev = {
-      position: body.style.position,
-      top: body.style.top,
-      width: body.style.width,
-      overflowY: body.style.overflowY,
-    };
-
-    body.style.position = "fixed";
-    body.style.top = `-${scrollY}px`;
-    body.style.width = "100%";
-    body.style.overflowY = "scroll";
-
-    return () => {
-      body.style.position = prev.position;
-      body.style.top = prev.top;
-      body.style.width = prev.width;
-      body.style.overflowY = prev.overflowY;
-      window.scrollTo(0, scrollY);
-    };
-  }, [locked]);
-}

package/src/types.ts

@@ -1,8 +0,0 @@
-export type Insets = { top: number; right: number; bottom: number; left: number };
-
-export type KeyboardState = {
-  isOpen: boolean;
-  height: number; // px
-  // best-effort: iOS visualViewport + focus heuristics
-  source: "visualViewport" | "fallback";
-};

package/src/viewport/useViewportHeightVars.ts

@@ -1,32 +0,0 @@
-import { useEffect } from "react";
-import { isBrowser } from "../env";
-
-/**
- * Sets:
- *  --ttt-vh: 1% of *layout* viewport height (window.innerHeight)
- *  --ttt-dvh: 1% of *visual* viewport height (visualViewport.height when available)
- *
- * Use in CSS:
- *  height: calc(var(--ttt-dvh, var(--ttt-vh, 1vh)) * 100);
- */
-export function useViewportHeightVars() {
-  useEffect(() => {
-    if (!isBrowser) return;
-
-    const apply = () => {
-      const vh = window.innerHeight * 0.01;
-      document.documentElement.style.setProperty("--ttt-vh", `${vh}px`);
-
-      const dvh = (window.visualViewport?.height ?? window.innerHeight) * 0.01;
-      document.documentElement.style.setProperty("--ttt-dvh", `${dvh}px`);
-    };
-
-    apply();
-    window.addEventListener("resize", apply, { passive: true });
-    window.visualViewport?.addEventListener("resize", apply, { passive: true });
-    return () => {
-      window.removeEventListener("resize", apply);
-      window.visualViewport?.removeEventListener("resize", apply);
-    };
-  }, []);
-}

package/src/viewport/useVisualViewport.ts

@@ -1,42 +0,0 @@
-import { useEffect, useState } from "react";
-import { hasVisualViewport, isBrowser } from "../env";
-
-export function useVisualViewport() {
-  const vv = isBrowser && hasVisualViewport ? window.visualViewport! : null;
-
-  const [state, setState] = useState(() => ({
-    width: vv?.width ?? 0,
-    height: vv?.height ?? 0,
-    scale: vv?.scale ?? 1,
-    offsetTop: vv?.offsetTop ?? 0,
-    offsetLeft: vv?.offsetLeft ?? 0,
-    pageTop: vv?.pageTop ?? 0,
-    pageLeft: vv?.pageLeft ?? 0,
-  }));
-
-  useEffect(() => {
-    if (!vv) return;
-
-    const onChange = () =>
-      setState({
-        width: vv.width,
-        height: vv.height,
-        scale: vv.scale,
-        offsetTop: vv.offsetTop,
-        offsetLeft: vv.offsetLeft,
-        pageTop: vv.pageTop,
-        pageLeft: vv.pageLeft,
-      });
-
-    onChange();
-    vv.addEventListener("resize", onChange, { passive: true });
-    vv.addEventListener("scroll", onChange, { passive: true });
-
-    return () => {
-      vv.removeEventListener("resize", onChange);
-      vv.removeEventListener("scroll", onChange);
-    };
-  }, [vv]);
-
-  return { visualViewport: vv, ...state };
-}