@musecat/functionkit 1.0.0

package/utils/clipboardShare.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import type {
+  NavigatorClipboardProps,
+  NavigatorClipboardResult,
+  NavigatorShareProps,
+  NavigatorShareResult,
+} from "./clipboardShare.types";
+
+export function NavigatorClipboard({
+  text,
+}: NavigatorClipboardProps): Promise<NavigatorClipboardResult> {
+  return navigator.clipboard.writeText(text).then(
+    () => ({ success: true }),
+    () => ({ success: false }),
+  );
+}
+
+export function NavigatorShare({
+  title,
+  text,
+  link,
+}: NavigatorShareProps): Promise<NavigatorShareResult> {
+  if (navigator.share) {
+    return navigator.share({ title, text, url: link }).then(
+      () => ({ success: true, method: "share" }),
+      (error) => {
+        if (error instanceof DOMException && error.name === "AbortError") {
+          return { success: false, method: "share" };
+        }
+        return clipboardFallback(link);
+      },
+    );
+  }
+
+  return clipboardFallback(link);
+}
+
+function clipboardFallback(link: string): Promise<NavigatorShareResult> {
+  if (navigator.clipboard) {
+    return navigator.clipboard.writeText(link).then(
+      () => ({ success: true, method: "clipboard" }),
+      () => ({ success: false, method: "unsupported" }),
+    );
+  }
+  return Promise.resolve({ success: false, method: "unsupported" });
+}

package/utils/clipboardShare.types.ts

@@ -0,0 +1,18 @@
+export type NavigatorClipboardProps = {
+  text: string;
+};
+
+export type NavigatorShareProps = {
+  title: string;
+  text: string;
+  link: string;
+};
+
+export type NavigatorClipboardResult = {
+  success: boolean;
+};
+
+export type NavigatorShareResult = {
+  success: boolean;
+  method: "share" | "clipboard" | "unsupported";
+};

package/utils/floatingMotion.ts

@@ -0,0 +1,99 @@
+export type FloatingMotionMode =
+  | "anchored"
+  | "center-selected"
+  | "modal-center"
+  | "mobile-sheet";
+
+export type FloatingPlacement =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "middle-left"
+  | "middle-center"
+  | "middle-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+export interface FloatingMotionPreset {
+  enterMs: number;
+  exitMs: number;
+  ease: string;
+}
+
+export const getFloatingMotionPreset = (
+  mode: FloatingMotionMode,
+): FloatingMotionPreset => {
+  if (mode === "mobile-sheet") {
+    return {
+      enterMs: 360,
+      exitMs: 280,
+      ease: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+    };
+  }
+
+  if (mode === "modal-center") {
+    return {
+      enterMs: 340,
+      exitMs: 260,
+      ease: "cubic-bezier(0.22, 1, 0.36, 1)",
+    };
+  }
+
+  if (mode === "center-selected") {
+    return {
+      enterMs: 190,
+      exitMs: 140,
+      ease: "cubic-bezier(0.2, 0, 0, 1)",
+    };
+  }
+
+  return {
+    enterMs: 230,
+    exitMs: 170,
+    ease: "cubic-bezier(0.16, 1, 0.3, 1)",
+  };
+};
+
+export const getFloatingTransformOrigin = (
+  placement?: FloatingPlacement,
+): string => {
+  if (!placement) return "top center";
+
+  const [row, col] = placement.split("-") as [
+    "top" | "middle" | "bottom",
+    "left" | "center" | "right",
+  ];
+  const y = row === "top" ? "bottom" : row === "bottom" ? "top" : "center";
+  const x = col === "right" ? "right" : col === "left" ? "left" : "center";
+
+  return `${y} ${x}`;
+};
+
+export const getFloatingHiddenTransform = ({
+  mode,
+  placement,
+}: {
+  mode: FloatingMotionMode;
+  placement?: FloatingPlacement;
+}): string => {
+  if (mode === "mobile-sheet") return "translateY(1.8rem) scale(1)";
+  if (mode === "modal-center") return "translateY(.8rem) scale(.94)";
+  if (mode === "center-selected") return "translateY(.45rem) scale(.99)";
+  if (!placement) return "translateY(.4rem) scale(.975)";
+
+  const [row, col] = placement.split("-") as [
+    "top" | "middle" | "bottom",
+    "left" | "center" | "right",
+  ];
+
+  if (row === "top") return "translateY(.4rem) scale(.975)";
+  if (row === "bottom") return "translateY(-.4rem) scale(.975)";
+
+  if (row === "middle") {
+    if (col === "left") return "translateX(.4rem) scale(.975)";
+    if (col === "right") return "translateX(-.4rem) scale(.975)";
+  }
+
+  return "translateY(.4rem) scale(.975)";
+};

package/utils/keyboardTarget.ts

@@ -0,0 +1,13 @@
+"use client";
+
+export function isEditableKeyboardTarget(target: HTMLElement) {
+  return (
+    target.isContentEditable ||
+    target.tagName === "TEXTAREA" ||
+    target.tagName === "SELECT" ||
+    (target.tagName === "INPUT" &&
+      (target as HTMLInputElement).type !== "button" &&
+      (target as HTMLInputElement).type !== "checkbox" &&
+      (target as HTMLInputElement).type !== "radio")
+  );
+}

package/utils/mergeRefs.ts

@@ -0,0 +1,15 @@
+import type { Ref, RefCallback } from "react";
+
+type ReactRef<T> = Ref<T> | undefined | null;
+
+export function mergeRefs<T>(...refs: ReactRef<T>[]): RefCallback<T> {
+  return (value: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref && "current" in ref) {
+        (ref as { current: T | null }).current = value;
+      }
+    }
+  };
+}

package/utils/seen.ts

@@ -0,0 +1,29 @@
+export const SEEN_STORAGE_KEY = "seen";
+
+type SeenMap = Partial<Record<string, boolean>>;
+
+export function parseSeen(raw: string | null): SeenMap {
+  if (!raw) return {};
+
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return {};
+    }
+
+    return parsed as SeenMap;
+  } catch {
+    return {};
+  }
+}
+
+export function hasSeenKey(raw: string | null, key: string) {
+  const map = parseSeen(raw);
+  return map[key] === true;
+}
+
+export function buildSeenValue(raw: string | null, key: string): string {
+  const map = parseSeen(raw);
+  map[key] = true;
+  return JSON.stringify(map);
+}

package/utils/subscribeKeyboardHeight.ts

@@ -0,0 +1,54 @@
+"use client";
+
+type SubscribeKeyboardHeightOptions = {
+  callback: (height: number) => void;
+  immediate?: boolean;
+  throttleMs?: number;
+};
+
+export function subscribeKeyboardHeight({
+  callback,
+  immediate = false,
+  throttleMs = 16,
+}: SubscribeKeyboardHeightOptions) {
+  let ticking = false;
+  let lastHeight = 0;
+
+  const notify = (height: number) => {
+    if (ticking) return;
+    ticking = true;
+
+    const run = () => {
+      if (height !== lastHeight) {
+        lastHeight = height;
+        callback(height);
+      }
+      ticking = false;
+    };
+
+    if (throttleMs > 0) {
+      setTimeout(run, throttleMs);
+    } else {
+      run();
+    }
+  };
+
+  const handleResize = () => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const diff = window.innerHeight - vv.height;
+    notify(diff > 0 ? diff : 0);
+  };
+
+  if (immediate) handleResize();
+
+  window.visualViewport?.addEventListener("resize", handleResize);
+  window.visualViewport?.addEventListener("scroll", handleResize);
+
+  return {
+    unsubscribe() {
+      window.visualViewport?.removeEventListener("resize", handleResize);
+      window.visualViewport?.removeEventListener("scroll", handleResize);
+    },
+  };
+}