@bearmenu/ui 0.8.15 → 0.8.17

package/src/hooks/use-haptic.test.tsx

@@ -1,80 +1,75 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { act, renderHook } from "@testing-library/react";
-import { useHaptic } from "./use-haptic";
+import { isIos, useHaptic } from "./use-haptic";
 
-const hapticSwitch = () => document.body.querySelector<HTMLInputElement>("input[type=checkbox][switch]");
+const IOS_UA =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 26_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Mobile/15E148 Safari/604.1";
+const IPAD_AS_MAC_UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Safari/605.1.15";
 
-describe("useHaptic", () => {
+describe("isIos", () => {
   afterEach(() => {
     vi.restoreAllMocks();
   });
 
-  describe("on iOS Safari (no Vibration API, switch supported)", () => {
-    beforeEach(() => {
-      Object.defineProperty(HTMLInputElement.prototype, "switch", { value: false, configurable: true });
-    });
-
-    afterEach(() => {
-      Reflect.deleteProperty(HTMLInputElement.prototype, "switch");
-      hapticSwitch()?.parentElement?.remove();
-    });
-
-    it("reports support", () => {
-      const { result } = renderHook(() => useHaptic());
-      expect(result.current.isSupported).toBe(true);
-    });
+  it("is false in jsdom", () => {
+    expect(isIos()).toBe(false);
+  });
 
-    it("toggles one hidden switch through its label on every trigger", () => {
-      const { result } = renderHook(() => useHaptic());
+  it("matches an iPhone user agent", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(IOS_UA);
+    expect(isIos()).toBe(true);
+  });
 
-      act(() => result.current.trigger("light"));
-      const input = hapticSwitch();
-      expect(input).not.toBeNull();
-      expect(input?.checked).toBe(true);
-      expect(input?.parentElement?.getAttribute("aria-hidden")).toBe("true");
+  it("matches an iPad presenting as a Mac by its touch points", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(IPAD_AS_MAC_UA);
+    vi.spyOn(navigator, "platform", "get").mockReturnValue("MacIntel");
+    Object.defineProperty(navigator, "maxTouchPoints", { value: 5, configurable: true });
+    expect(isIos()).toBe(true);
+    Reflect.deleteProperty(navigator, "maxTouchPoints");
+  });
+});
 
-      act(() => result.current.trigger("light"));
-      expect(document.body.querySelectorAll("input[switch]")).toHaveLength(1);
-      expect(input?.checked).toBe(false);
-    });
+describe("useHaptic", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    Reflect.deleteProperty(navigator, "vibrate");
+  });
 
-    it("collapses every style to the one tick WebKit has", () => {
-      const { result } = renderHook(() => useHaptic());
+  it("reports support on iOS without adding anything to the DOM — the switch lives in the control", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(IOS_UA);
+    const debug = vi.spyOn(console, "debug").mockImplementation(() => {});
+    const { result } = renderHook(() => useHaptic());
 
-      act(() => result.current.trigger("heavy"));
-      expect(hapticSwitch()?.checked).toBe(true);
-      act(() => result.current.trigger("success"));
-      expect(hapticSwitch()?.checked).toBe(false);
-    });
+    expect(result.current.isSupported).toBe(true);
+    expect(result.current.platform).toBe("ios");
+    act(() => result.current.trigger("light"));
+    expect(document.body.querySelector("input[switch]")).toBeNull();
+    expect(debug).toHaveBeenCalled();
   });
 
-  describe("without any haptic API", () => {
-    it("reports no support and renders no switch", () => {
-      const debug = vi.spyOn(console, "debug").mockImplementation(() => {});
-      const { result } = renderHook(() => useHaptic());
+  it("reports no support without any haptic API", () => {
+    const debug = vi.spyOn(console, "debug").mockImplementation(() => {});
+    const { result } = renderHook(() => useHaptic());
 
-      expect(result.current.isSupported).toBe(false);
-      act(() => result.current.trigger("light"));
-      expect(hapticSwitch()).toBeNull();
-      expect(debug).toHaveBeenCalled();
-    });
+    expect(result.current.isSupported).toBe(false);
+    act(() => result.current.trigger("light"));
+    expect(debug).toHaveBeenCalled();
   });
 
-  describe("with the Vibration API", () => {
-    afterEach(() => {
-      Reflect.deleteProperty(navigator, "vibrate");
-    });
+  it("vibrates through navigator.vibrate where it exists", () => {
+    const vibrate = vi.fn();
+    Object.defineProperty(navigator, "vibrate", { value: vibrate, configurable: true });
+    const { result } = renderHook(() => useHaptic());
 
-    it("prefers navigator.vibrate over the switch", () => {
-      const vibrate = vi.fn();
-      Object.defineProperty(navigator, "vibrate", { value: vibrate, configurable: true });
-      Object.defineProperty(HTMLInputElement.prototype, "switch", { value: false, configurable: true });
-      const { result } = renderHook(() => useHaptic());
+    act(() => result.current.trigger("medium"));
+    expect(vibrate).toHaveBeenCalledWith(20);
+  });
 
-      act(() => result.current.trigger("medium"));
-      expect(vibrate).toHaveBeenCalledWith(20);
-      expect(hapticSwitch()).toBeNull();
-      Reflect.deleteProperty(HTMLInputElement.prototype, "switch");
-    });
+  it("keeps trigger referentially stable across renders", () => {
+    const { result, rerender } = renderHook(() => useHaptic());
+    const first = result.current.trigger;
+    rerender();
+    expect(result.current.trigger).toBe(first);
   });
 });

package/src/hooks/use-haptic.ts

@@ -10,6 +10,21 @@ interface HapticAPI {
   trigger: (style: HapticStyle) => void;
 }
 
+/**
+ * iOS Safari, including iPadOS masquerading as a Mac. Haptics there come from
+ * `HapticSwitch`, not from `trigger`: WebKit has no Vibration API, and since
+ * iOS 26.5 the only haptic it plays is a native switch flipping under the
+ * user's own finger — a programmatic click on the switch or its label no
+ * longer counts (WebKit #65327).
+ */
+export function isIos(): boolean {
+  if (typeof navigator === "undefined") return false;
+  return (
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+  );
+}
+
 export const useHaptic = (): HapticAPI => {
   const [platform, setPlatform] = useState<"ios" | "android" | "desktop" | "unknown">("unknown");
   const [isSupported, setIsSupported] = useState(false);
@@ -17,10 +32,9 @@ export const useHaptic = (): HapticAPI => {
   useEffect(() => {
     // Detect platform
     const userAgent = navigator.userAgent.toLowerCase();
-    const isIOS = /iphone|ipad|ipod/.test(userAgent);
     const isAndroid = /android/.test(userAgent);
 
-    if (isIOS) {
+    if (isIos()) {
       setPlatform("ios");
     } else if (isAndroid) {
       setPlatform("android");
@@ -32,7 +46,7 @@ export const useHaptic = (): HapticAPI => {
     const hasVibration = "vibrate" in navigator;
     const hasTelegram = typeof window !== "undefined" && window.Telegram?.WebApp?.HapticFeedback;
 
-    setIsSupported(hasVibration || !!hasTelegram || supportsSwitchHaptic());
+    setIsSupported(hasVibration || !!hasTelegram || isIos());
   }, []);
 
   const trigger = useCallback((style: HapticStyle) => {
@@ -48,12 +62,7 @@ export const useHaptic = (): HapticAPI => {
       return;
     }
 
-    // iOS Safari has no Vibration API; the switch toggle is the only haptic it exposes
-    if (supportsSwitchHaptic()) {
-      triggerSwitchHaptic();
-      return;
-    }
-
+    // iOS: nothing to call — see HapticSwitch, which sits inside the control
     // No haptic support - silently fail
     console.debug("Haptic feedback not supported on this device");
   }, []);
@@ -108,41 +117,6 @@ function triggerVibrationAPI(style: HapticStyle) {
   navigator.vibrate(patterns[style]);
 }
 
-// Switch implementation (iOS 18+ Safari and home-screen PWAs)
-//
-// WebKit plays the system "toggle" haptic when an `<input type="checkbox" switch>`
-// flips through its label, and a programmatic `label.click()` counts. One hidden
-// switch appended to the body doubles as a haptic trigger. It is the only haptic
-// WebKit exposes, so every style collapses to that one tick here.
-// https://github.com/ionic-team/ionic-framework/issues/29942
-let hapticSwitch: HTMLLabelElement | null = null;
-
-function supportsSwitchHaptic(): boolean {
-  return typeof HTMLInputElement !== "undefined" && "switch" in HTMLInputElement.prototype;
-}
-
-function getHapticSwitch(): HTMLLabelElement {
-  if (hapticSwitch?.isConnected) return hapticSwitch;
-
-  const label = document.createElement("label");
-  const input = document.createElement("input");
-  input.type = "checkbox";
-  input.setAttribute("switch", "");
-  input.tabIndex = -1;
-  label.setAttribute("aria-hidden", "true");
-  label.style.cssText =
-    "position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none";
-  label.appendChild(input);
-  document.body.appendChild(label);
-
-  hapticSwitch = label;
-  return label;
-}
-
-function triggerSwitchHaptic() {
-  getHapticSwitch().click();
-}
-
 // Extend Window interface for TypeScript
 declare global {
   interface Window {

package/dist/chunk-SXQZ7DLH.js

@@ -1,167 +0,0 @@
-import { Separator } from './chunk-NWZGSLPU.js';
-import { Skeleton } from './chunk-XBBEX4SF.js';
-import { cn } from './chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
-import { Star, Clock, Check, MessageSquare, ChevronRight } from 'lucide-react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-function DefaultLink(_a) {
-  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
-  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
-}
-function MenuKitchenList({
-  kitchens,
-  labels,
-  onShowMore,
-  linkComponent = DefaultLink,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsx("ol", { children: kitchens.map((kitchen, index) => /* @__PURE__ */ jsxs("li", { className: "[&:first-child>div]:pt-0", children: [
-      index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsx(KitchenRow, { kitchen, labels, linkComponent })
-    ] }, kitchen.place.slug)) }),
-    onShowMore && labels.showMore && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onShowMore,
-        className: "mt-2 self-start rounded-md py-2 text-[13px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
-        children: labels.showMore
-      }
-    )
-  ] });
-}
-function KitchenRow({
-  kitchen,
-  labels,
-  linkComponent: LinkComponent
-}) {
-  const { place, dish } = kitchen;
-  const openNow = place.open_now === true;
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:flex-nowrap lg:gap-4 lg:py-3.5", children: [
-    /* @__PURE__ */ jsx(
-      LinkComponent,
-      {
-        href: kitchen.href,
-        "aria-label": labels.openVenue(place.name),
-        className: "absolute inset-0 z-[1] rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: "relative h-[46px] w-[46px] shrink-0 overflow-hidden rounded-[11px] bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]", children: [
-      place.thumbnail_url && // eslint-disable-next-line @next/next/no-img-element
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: place.thumbnail_url,
-          alt: "",
-          loading: "lazy",
-          decoding: "async",
-          className: "h-full w-full object-cover"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          title: openNow ? labels.openNow : void 0,
-          className: cn(
-            "absolute right-[5px] top-[5px] h-[7px] w-[7px] rounded-full ring-2 ring-white/85",
-            openNow ? "bg-[var(--free,oklch(0.55_0.13_155))]" : "bg-[oklch(0.8_0.01_60)]"
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none", children: [
-      /* @__PURE__ */ jsx("span", { className: "truncate text-[14.5px] font-bold tracking-[-0.01em] lg:line-clamp-2 lg:whitespace-normal lg:text-[15.5px] lg:leading-tight", children: place.name }),
-      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-xs text-muted-foreground", children: [
-        place.rating && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Star, { className: "h-[11px] w-[11px] shrink-0", "aria-hidden": true }),
-          place.rating.rating,
-          kitchen.metaLabel && " \xB7 "
-        ] }),
-        kitchen.metaLabel
-      ] }),
-      kitchen.hoursLabel && /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cn(
-            "mt-[3px] inline-flex h-[21px] w-max items-center gap-[5px] rounded-md px-2 text-[10.5px] font-bold",
-            openNow ? "bg-[oklch(0.96_0.02_155)] text-[var(--free,oklch(0.45_0.13_155))]" : "bg-muted text-muted-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Clock, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
-            kitchen.hoursLabel
-          ]
-        }
-      )
-    ] }),
-    dish && /* DESKTOP ONLY, where it is a column of its own beside the venue.
-               On the phone it wrapped to a third line under the row — kicker, dish,
-               mention count — which turned a four-line venue row into a seven-line
-               block and, ten rows down, buried the venue names the list exists to
-               be scanned for. The dish is not what a reader is choosing here; it is
-               one tap away on the venue's own page, with room to state it.
-    
-               `order-5` puts it last in the visual order without moving it in the
-               DOM, where it belongs to the venue. */
-    /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0", children: [
-      /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cn(
-            "flex items-center gap-1.5 text-[9px] font-extrabold uppercase tracking-[0.1em]",
-            dish.matched ? "text-accent" : "text-[oklch(0.72_0.01_60)]"
-          ),
-          children: [
-            dish.kicker,
-            dish.matched && dish.matchLabel && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-[5px] bg-accent-subtle px-1.5 py-px text-[10.5px] font-bold normal-case tracking-normal text-accent", children: [
-              /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
-              dish.matchLabel
-            ] })
-          ]
-        }
-      ),
-      dish.href ? /* @__PURE__ */ jsx(
-        LinkComponent,
-        {
-          href: dish.href,
-          "aria-label": labels.openDish(dish.name),
-          className: "relative z-[2] mt-0.5 block truncate font-serif text-[13.5px] italic underline decoration-[oklch(0.84_0.01_60)] decoration-1 underline-offset-[3px] transition-colors hover:text-accent hover:decoration-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:text-[15px]",
-          children: dish.name
-        }
-      ) : /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate font-serif text-[13.5px] italic lg:text-[15px]", children: dish.name }),
-      dish.meta && /* @__PURE__ */ jsxs("span", { className: "mt-[3px] flex items-center gap-1 text-[11.5px] text-muted-foreground", children: [
-        !dish.matched && /* @__PURE__ */ jsx(MessageSquare, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }),
-        dish.meta
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-[11px] lg:ml-0", children: [
-      kitchen.priceLabel && /* @__PURE__ */ jsx("span", { className: "text-base font-extrabold tabular-nums text-accent", children: kitchen.priceLabel }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "h-[15px] w-[15px] shrink-0 text-muted-foreground", "aria-hidden": true })
-    ] })
-  ] });
-}
-function MenuKitchenListSkeleton({
-  rows = 10,
-  className
-}) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), "aria-hidden": true, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { children: [
-    index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-[11px] py-3 lg:flex-nowrap lg:gap-4 lg:py-3.5", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-[46px] w-[46px] rounded-[11px] lg:h-[58px] lg:w-[58px] lg:rounded-[13px]" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5 lg:w-[226px] lg:flex-none", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[60%]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[45%]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-[21px] w-[120px] rounded-md" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-[90px]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-4 w-[70%]" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "mt-1.5 h-3 w-[40%]" })
-      ] }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-5 w-[56px] lg:ml-0" })
-    ] })
-  ] }, index)) });
-}
-
-export { MenuKitchenList, MenuKitchenListSkeleton };