@withpotter/components 0.13.0-next.101

package/dist/mobile/ios-grouped-list.js

@@ -0,0 +1,65 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+function IOSGroupedList({
+  header,
+  footer,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    header && /* @__PURE__ */ jsx("p", { className: "px-4 pb-1.5 text-[var(--font-size-footnote)] font-normal text-[var(--text-secondary)]", children: header }),
+    /* @__PURE__ */ jsx("div", { className: "bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden divide-y divide-[var(--ios-separator)]", children }),
+    footer && /* @__PURE__ */ jsx("p", { className: "px-4 pt-1.5 text-[var(--font-size-caption1)] text-[var(--text-muted)]", children: footer })
+  ] });
+}
+function IOSListItem({
+  icon,
+  iconBg,
+  label,
+  detail,
+  disclosure = true,
+  href,
+  onClick,
+  destructive
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-[29px] h-[29px] rounded-[6px] flex items-center justify-center shrink-0 ${iconBg || "bg-[var(--bg-subtle)]"}`,
+        children: typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon && "render" in icon ? /* @__PURE__ */ (() => {
+          const Icon = icon;
+          return /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 text-white" });
+        })() : icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `flex-1 text-[var(--font-size-body)] ${destructive ? "text-[var(--error)]" : "text-[var(--text-primary)]"}`,
+        children: label
+      }
+    ),
+    detail && /* @__PURE__ */ jsx("span", { className: "text-[var(--font-size-body)] text-[var(--text-muted)] mr-1", children: detail }),
+    disclosure && !destructive && /* @__PURE__ */ jsx(ChevronRight, { className: "w-[14px] h-[14px] text-[var(--text-muted)] shrink-0" })
+  ] });
+  const className = "flex items-center gap-3 min-h-[44px] px-4 py-2.5 active:bg-[var(--interactive-active)] transition-colors ios-pressable";
+  if (href) {
+    return /* @__PURE__ */ jsx(Link, { href, className, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `${className} w-full text-left`,
+      children: content
+    }
+  );
+}
+export {
+  IOSGroupedList,
+  IOSListItem
+};
+//# sourceMappingURL=ios-grouped-list.js.map

package/dist/mobile/ios-grouped-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/ios-grouped-list.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight, type LucideIcon } from 'lucide-react';\nimport Link from 'next/link';\n\ninterface IOSGroupedListProps {\n  header?: string;\n  footer?: string;\n  children: React.ReactNode;\n}\n\n/**\n * iOS-style grouped list with inset separators, rounded container,\n * and optional section header/footer.\n */\nexport function IOSGroupedList({\n  header,\n  footer,\n  children,\n}: IOSGroupedListProps) {\n  return (\n    <div>\n      {header && (\n        <p className=\"px-4 pb-1.5 text-[var(--font-size-footnote)] font-normal text-[var(--text-secondary)]\">\n          {header}\n        </p>\n      )}\n      <div className=\"bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden divide-y divide-[var(--ios-separator)]\">\n        {children}\n      </div>\n      {footer && (\n        <p className=\"px-4 pt-1.5 text-[var(--font-size-caption1)] text-[var(--text-muted)]\">\n          {footer}\n        </p>\n      )}\n    </div>\n  );\n}\n\ninterface IOSListItemProps {\n  icon?: LucideIcon | React.ReactNode;\n  iconBg?: string;\n  label: string;\n  detail?: string;\n  disclosure?: boolean;\n  href?: string;\n  onClick?: () => void;\n  destructive?: boolean;\n}\n\nexport function IOSListItem({\n  icon,\n  iconBg,\n  label,\n  detail,\n  disclosure = true,\n  href,\n  onClick,\n  destructive,\n}: IOSListItemProps) {\n  const content = (\n    <>\n      {icon && (\n        <div\n          className={`w-[29px] h-[29px] rounded-[6px] flex items-center justify-center shrink-0 ${iconBg || 'bg-[var(--bg-subtle)]'}`}\n        >\n          {typeof icon === 'function' ||\n          (typeof icon === 'object' &&\n            icon !== null &&\n            '$$typeof' in icon &&\n            'render' in icon)\n            ? (() => {\n                const Icon = icon as LucideIcon;\n                return <Icon className=\"w-4 h-4 text-white\" />;\n              })()\n            : icon}\n        </div>\n      )}\n      <span\n        className={`flex-1 text-[var(--font-size-body)] ${\n          destructive ? 'text-[var(--error)]' : 'text-[var(--text-primary)]'\n        }`}\n      >\n        {label}\n      </span>\n      {detail && (\n        <span className=\"text-[var(--font-size-body)] text-[var(--text-muted)] mr-1\">\n          {detail}\n        </span>\n      )}\n      {disclosure && !destructive && (\n        <ChevronRight className=\"w-[14px] h-[14px] text-[var(--text-muted)] shrink-0\" />\n      )}\n    </>\n  );\n\n  const className =\n    'flex items-center gap-3 min-h-[44px] px-4 py-2.5 active:bg-[var(--interactive-active)] transition-colors ios-pressable';\n\n  if (href) {\n    return (\n      <Link href={href} className={className}>\n        {content}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={`${className} w-full text-left`}\n    >\n      {content}\n    </button>\n  );\n}\n"],"mappings":";AAqBI,SAwCA,UAtCI,KAFJ;AAnBJ,SAAS,oBAAqC;AAC9C,OAAO,UAAU;AAYV,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,SACE,qBAAC,SACE;AAAA,cACC,oBAAC,OAAE,WAAU,yFACV,kBACH;AAAA,IAEF,oBAAC,SAAI,WAAU,+FACZ,UACH;AAAA,IACC,UACC,oBAAC,OAAE,WAAU,yEACV,kBACH;AAAA,KAEJ;AAEJ;AAaO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,UACJ,iCACG;AAAA,YACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,6EAA6E,UAAU,uBAAuB;AAAA,QAExH,iBAAO,SAAS,cAChB,OAAO,SAAS,YACf,SAAS,QACT,cAAc,QACd,YAAY,OACT,uBAAM;AACL,gBAAM,OAAO;AACb,iBAAO,oBAAC,QAAK,WAAU,sBAAqB;AAAA,QAC9C,GAAG,IACH;AAAA;AAAA,IACN;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,uCACT,cAAc,wBAAwB,4BACxC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACC,UACC,oBAAC,UAAK,WAAU,8DACb,kBACH;AAAA,IAED,cAAc,CAAC,eACd,oBAAC,gBAAa,WAAU,uDAAsD;AAAA,KAElF;AAGF,QAAM,YACJ;AAEF,MAAI,MAAM;AACR,WACE,oBAAC,QAAK,MAAY,WACf,mBACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,SAAS;AAAA,MAEtB;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/mobile/ios-link.d.ts

@@ -0,0 +1,10 @@
+import Link from 'next/link';
+import type { ComponentProps } from 'react';
+type IOSLinkProps = ComponentProps<typeof Link>;
+/**
+ * A Link that triggers push-direction transitions on mobile.
+ * Used selectively on list item rows and navigation links
+ * where a push transition is appropriate.
+ */
+export declare function IOSLink({ href, children, onClick, ...props }: IOSLinkProps): import("react").JSX.Element;
+export {};

package/dist/mobile/ios-link.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import { useIOSNavigation } from "@withpotter/lib/ios-navigation-context";
+function IOSLink({ href, children, onClick, ...props }) {
+  const isMobile = useIsMobile();
+  const { navigateTo } = useIOSNavigation();
+  if (!isMobile) {
+    return /* @__PURE__ */ jsx(Link, { href, onClick, ...props, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: typeof href === "string" ? href : href.pathname || "",
+      onClick: (e) => {
+        e.preventDefault();
+        onClick?.(e);
+        navigateTo(typeof href === "string" ? href : href.pathname || "");
+      },
+      ...props,
+      children
+    }
+  );
+}
+export {
+  IOSLink
+};
+//# sourceMappingURL=ios-link.js.map

package/dist/mobile/ios-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/ios-link.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport type { ComponentProps } from 'react';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { useIOSNavigation } from '@withpotter/lib/ios-navigation-context';\n\ntype IOSLinkProps = ComponentProps<typeof Link>;\n\n/**\n * A Link that triggers push-direction transitions on mobile.\n * Used selectively on list item rows and navigation links\n * where a push transition is appropriate.\n */\nexport function IOSLink({ href, children, onClick, ...props }: IOSLinkProps) {\n  const isMobile = useIsMobile();\n  const { navigateTo } = useIOSNavigation();\n\n  if (!isMobile) {\n    return (\n      <Link href={href} onClick={onClick} {...props}>\n        {children}\n      </Link>\n    );\n  }\n\n  return (\n    <a\n      href={typeof href === 'string' ? href : href.pathname || ''}\n      onClick={(e) => {\n        e.preventDefault();\n        onClick?.(e as never);\n        navigateTo(typeof href === 'string' ? href : href.pathname || '');\n      }}\n      {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n    >\n      {children}\n    </a>\n  );\n}\n"],"mappings":";AAoBM;AAlBN,OAAO,UAAU;AAEjB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAS1B,SAAS,QAAQ,EAAE,MAAM,UAAU,SAAS,GAAG,MAAM,GAAiB;AAC3E,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,WAAW,IAAI,iBAAiB;AAExC,MAAI,CAAC,UAAU;AACb,WACE,oBAAC,QAAK,MAAY,SAAmB,GAAG,OACrC,UACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,OAAO,SAAS,WAAW,OAAO,KAAK,YAAY;AAAA,MACzD,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,kBAAU,CAAU;AACpB,mBAAW,OAAO,SAAS,WAAW,OAAO,KAAK,YAAY,EAAE;AAAA,MAClE;AAAA,MACC,GAAI;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/mobile/ios-screen-transition.d.ts

@@ -0,0 +1,19 @@
+interface IOSScreenTransitionProps {
+    children: React.ReactNode;
+}
+/**
+ * Wraps mobile screen content with push/pop transition animations.
+ *
+ * Strategy: every pathname or search-param change runs an animation. Browser
+ * back / forward (popstate) triggers a "pop" (slide-from-left). Any other
+ * navigation (router.push, <Link>, <a href>) triggers a "push"
+ * (slide-from-right).
+ *
+ * Search params are tracked because several mobile flows use query-string
+ * sub-routing (e.g. /dashboard/analytics?drill=sales).
+ *
+ * No-op on desktop and on the very first render (so the initial page
+ * doesn't slide in).
+ */
+export declare function IOSScreenTransition({ children }: IOSScreenTransitionProps): import("react").JSX.Element;
+export {};

package/dist/mobile/ios-screen-transition.js

@@ -0,0 +1,55 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { usePathname } from "@withpotter/lib/use-pathname";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+function IOSScreenTransition({ children }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const search = searchParams.toString();
+  const routeKey = `${pathname}?${search}`;
+  const isMobile = useIsMobile();
+  const [direction, setDirection] = useState("none");
+  const isPopRef = useRef(false);
+  const prevKeyRef = useRef(null);
+  useEffect(() => {
+    const onPopState = () => {
+      isPopRef.current = true;
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+  useEffect(() => {
+    if (prevKeyRef.current === null) {
+      prevKeyRef.current = routeKey;
+      return;
+    }
+    if (prevKeyRef.current === routeKey) return;
+    prevKeyRef.current = routeKey;
+    if (isPopRef.current) {
+      isPopRef.current = false;
+      setDirection("pop");
+    } else {
+      setDirection("push");
+    }
+  }, [routeKey]);
+  if (!isMobile) return /* @__PURE__ */ jsx(Fragment, { children });
+  const animationClass = direction === "push" ? "animate-ios-push-enter" : direction === "pop" ? "animate-ios-pop-enter" : "";
+  if (pathname === "/dashboard/settings") return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: animationClass,
+      style: {
+        willChange: direction !== "none" ? "transform, opacity" : "auto"
+      },
+      children
+    },
+    routeKey
+  );
+}
+export {
+  IOSScreenTransition
+};
+//# sourceMappingURL=ios-screen-transition.js.map

package/dist/mobile/ios-screen-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/ios-screen-transition.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { useSearchParams } from 'next/navigation';\nimport { usePathname } from '@withpotter/lib/use-pathname';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\n\ninterface IOSScreenTransitionProps {\n  children: React.ReactNode;\n}\n\n/**\n * Wraps mobile screen content with push/pop transition animations.\n *\n * Strategy: every pathname or search-param change runs an animation. Browser\n * back / forward (popstate) triggers a \"pop\" (slide-from-left). Any other\n * navigation (router.push, <Link>, <a href>) triggers a \"push\"\n * (slide-from-right).\n *\n * Search params are tracked because several mobile flows use query-string\n * sub-routing (e.g. /dashboard/analytics?drill=sales).\n *\n * No-op on desktop and on the very first render (so the initial page\n * doesn't slide in).\n */\nexport function IOSScreenTransition({ children }: IOSScreenTransitionProps) {\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n  const search = searchParams.toString();\n  const routeKey = `${pathname}?${search}`;\n\n  const isMobile = useIsMobile();\n  const [direction, setDirection] = useState<'push' | 'pop' | 'none'>('none');\n  const isPopRef = useRef(false);\n  const prevKeyRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    const onPopState = () => {\n      isPopRef.current = true;\n    };\n    window.addEventListener('popstate', onPopState);\n    return () => window.removeEventListener('popstate', onPopState);\n  }, []);\n\n  useEffect(() => {\n    if (prevKeyRef.current === null) {\n      prevKeyRef.current = routeKey;\n      return;\n    }\n    if (prevKeyRef.current === routeKey) return;\n    prevKeyRef.current = routeKey;\n\n    if (isPopRef.current) {\n      isPopRef.current = false;\n      setDirection('pop');\n    } else {\n      setDirection('push');\n    }\n  }, [routeKey]);\n\n  if (!isMobile) return <>{children}</>;\n\n  const animationClass =\n    direction === 'push'\n      ? 'animate-ios-push-enter'\n      : direction === 'pop'\n        ? 'animate-ios-pop-enter'\n        : '';\n\n  if (pathname === '/dashboard/settings') return <>{children}</>;\n\n  return (\n    <div\n      key={routeKey}\n      className={animationClass}\n      style={{\n        willChange: direction !== 'none' ? 'transform, opacity' : 'auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AA4DwB;AA1DxB,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAoBrB,SAAS,oBAAoB,EAAE,SAAS,GAA6B;AAC1E,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,gBAAgB;AACrC,QAAM,SAAS,aAAa,SAAS;AACrC,QAAM,WAAW,GAAG,QAAQ,IAAI,MAAM;AAEtC,QAAM,WAAW,YAAY;AAC7B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkC,MAAM;AAC1E,QAAM,WAAW,OAAO,KAAK;AAC7B,QAAM,aAAa,OAAsB,IAAI;AAE7C,YAAU,MAAM;AACd,UAAM,aAAa,MAAM;AACvB,eAAS,UAAU;AAAA,IACrB;AACA,WAAO,iBAAiB,YAAY,UAAU;AAC9C,WAAO,MAAM,OAAO,oBAAoB,YAAY,UAAU;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,WAAW,YAAY,MAAM;AAC/B,iBAAW,UAAU;AACrB;AAAA,IACF;AACA,QAAI,WAAW,YAAY,SAAU;AACrC,eAAW,UAAU;AAErB,QAAI,SAAS,SAAS;AACpB,eAAS,UAAU;AACnB,mBAAa,KAAK;AAAA,IACpB,OAAO;AACL,mBAAa,MAAM;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,MAAI,CAAC,SAAU,QAAO,gCAAG,UAAS;AAElC,QAAM,iBACJ,cAAc,SACV,2BACA,cAAc,QACZ,0BACA;AAER,MAAI,aAAa,sBAAuB,QAAO,gCAAG,UAAS;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,YAAY,cAAc,SAAS,uBAAuB;AAAA,MAC5D;AAAA,MAEC;AAAA;AAAA,IANI;AAAA,EAOP;AAEJ;","names":[]}

package/dist/mobile/ios-sheet.d.ts

@@ -0,0 +1,22 @@
+interface IOSSheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+}
+/**
+ * iOS-style bottom sheet: grabber handle, spring motion, drag-to-dismiss.
+ *
+ * This is the surface springs exist for. The previous implementation mutated
+ * `style.transform` imperatively on touchmove and decided dismissal from
+ * distance alone (`dy > 100`), which meant a fast flick that travelled 80px
+ * snapped back while a slow, deliberate 120px drag dismissed — the opposite of
+ * what the hand expects. It also called `setTimeout(onClose, 300)` hand-synced
+ * to a CSS duration, was touch-only, and could not be interrupted mid-flight.
+ *
+ * Springs fix all of that structurally: `onDragEnd` gets real velocity, exit is
+ * driven by AnimatePresence rather than a timer, and a drag that reverses
+ * mid-animation carries its momentum instead of restarting.
+ */
+export declare function IOSSheet({ open, title, onClose, children }: IOSSheetProps): import("react").JSX.Element;
+export {};

package/dist/mobile/ios-sheet.js

@@ -0,0 +1,58 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { springs } from "@withpotter/lib/motion";
+const DISMISS_DISTANCE_PX = 100;
+const DISMISS_VELOCITY = 500;
+function IOSSheet({ open, title, onClose, children }) {
+  const reduce = useReducedMotion();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "fixed inset-0 z-[var(--z-modal)] bg-black/40",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.18 },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "fixed bottom-0 left-0 right-0 z-[var(--z-modal)] bg-[var(--bg-base)] rounded-t-ios-xl shadow-2xl",
+        initial: reduce ? false : { y: "100%" },
+        animate: { y: 0 },
+        exit: { y: "100%" },
+        transition: springs.gentle,
+        drag: "y",
+        dragConstraints: { top: 0, bottom: 0 },
+        dragElastic: { top: 0, bottom: 0.4 },
+        dragMomentum: false,
+        onDragEnd: (_, info) => {
+          if (info.offset.y > DISMISS_DISTANCE_PX || info.velocity.y > DISMISS_VELOCITY) {
+            onClose();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2 pb-2", children: /* @__PURE__ */ jsx("div", { className: "w-9 h-[5px] bg-[var(--ios-grabber)] rounded-full" }) }),
+          title && /* @__PURE__ */ jsx("div", { className: "px-5 pb-2", children: /* @__PURE__ */ jsx("h2", { className: "text-[var(--font-size-headline)] font-semibold text-[var(--text-primary)]", children: title }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                paddingBottom: "max(env(safe-area-inset-bottom), 1rem)"
+              },
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  IOSSheet
+};
+//# sourceMappingURL=ios-sheet.js.map

package/dist/mobile/ios-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/ios-sheet.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { springs } from '@withpotter/lib/motion';\n\ninterface IOSSheetProps {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  children: React.ReactNode;\n}\n\n/** Past either of these, let go and the sheet goes. */\nconst DISMISS_DISTANCE_PX = 100;\n/** px/s. A fast flick dismisses even if it barely moved. */\nconst DISMISS_VELOCITY = 500;\n\n/**\n * iOS-style bottom sheet: grabber handle, spring motion, drag-to-dismiss.\n *\n * This is the surface springs exist for. The previous implementation mutated\n * `style.transform` imperatively on touchmove and decided dismissal from\n * distance alone (`dy > 100`), which meant a fast flick that travelled 80px\n * snapped back while a slow, deliberate 120px drag dismissed — the opposite of\n * what the hand expects. It also called `setTimeout(onClose, 300)` hand-synced\n * to a CSS duration, was touch-only, and could not be interrupted mid-flight.\n *\n * Springs fix all of that structurally: `onDragEnd` gets real velocity, exit is\n * driven by AnimatePresence rather than a timer, and a drag that reverses\n * mid-animation carries its momentum instead of restarting.\n */\nexport function IOSSheet({ open, title, onClose, children }: IOSSheetProps) {\n  const reduce = useReducedMotion();\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <>\n          <motion.div\n            className=\"fixed inset-0 z-[var(--z-modal)] bg-black/40\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.18 }}\n            onClick={onClose}\n          />\n\n          <motion.div\n            className=\"fixed bottom-0 left-0 right-0 z-[var(--z-modal)] bg-[var(--bg-base)] rounded-t-ios-xl shadow-2xl\"\n            initial={reduce ? false : { y: '100%' }}\n            animate={{ y: 0 }}\n            exit={{ y: '100%' }}\n            transition={springs.gentle}\n            drag=\"y\"\n            // Down only. Elastic gives the pull weight instead of a hard stop.\n            dragConstraints={{ top: 0, bottom: 0 }}\n            dragElastic={{ top: 0, bottom: 0.4 }}\n            dragMomentum={false}\n            onDragEnd={(_, info) => {\n              // Distance OR velocity — a flick should dismiss even if short.\n              if (\n                info.offset.y > DISMISS_DISTANCE_PX ||\n                info.velocity.y > DISMISS_VELOCITY\n              ) {\n                onClose();\n              }\n              // Otherwise `animate={{ y: 0 }}` springs it back; no branch needed.\n            }}\n          >\n            {/* Grabber */}\n            <div className=\"flex justify-center pt-2 pb-2\">\n              <div className=\"w-9 h-[5px] bg-[var(--ios-grabber)] rounded-full\" />\n            </div>\n\n            {title && (\n              <div className=\"px-5 pb-2\">\n                <h2 className=\"text-[var(--font-size-headline)] font-semibold text-[var(--text-primary)]\">\n                  {title}\n                </h2>\n              </div>\n            )}\n\n            <div\n              style={{\n                paddingBottom: 'max(env(safe-area-inset-bottom), 1rem)',\n              }}\n            >\n              {children}\n            </div>\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":";AAqCQ,mBACE,KASA,YAVF;AAnCR,SAAS,iBAAiB,QAAQ,wBAAwB;AAC1D,SAAS,eAAe;AAUxB,MAAM,sBAAsB;AAE5B,MAAM,mBAAmB;AAgBlB,SAAS,SAAS,EAAE,MAAM,OAAO,SAAS,SAAS,GAAkB;AAC1E,QAAM,SAAS,iBAAiB;AAEhC,SACE,oBAAC,mBACE,kBACC,iCACE;AAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAU;AAAA,QACV,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,MAAM,EAAE,SAAS,EAAE;AAAA,QACnB,YAAY,EAAE,UAAU,KAAK;AAAA,QAC7B,SAAS;AAAA;AAAA,IACX;AAAA,IAEA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAU;AAAA,QACV,SAAS,SAAS,QAAQ,EAAE,GAAG,OAAO;AAAA,QACtC,SAAS,EAAE,GAAG,EAAE;AAAA,QAChB,MAAM,EAAE,GAAG,OAAO;AAAA,QAClB,YAAY,QAAQ;AAAA,QACpB,MAAK;AAAA,QAEL,iBAAiB,EAAE,KAAK,GAAG,QAAQ,EAAE;AAAA,QACrC,aAAa,EAAE,KAAK,GAAG,QAAQ,IAAI;AAAA,QACnC,cAAc;AAAA,QACd,WAAW,CAAC,GAAG,SAAS;AAEtB,cACE,KAAK,OAAO,IAAI,uBAChB,KAAK,SAAS,IAAI,kBAClB;AACA,oBAAQ;AAAA,UACV;AAAA,QAEF;AAAA,QAGA;AAAA,8BAAC,SAAI,WAAU,iCACb,8BAAC,SAAI,WAAU,oDAAmD,GACpE;AAAA,UAEC,SACC,oBAAC,SAAI,WAAU,aACb,8BAAC,QAAG,WAAU,6EACX,iBACH,GACF;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,eAAe;AAAA,cACjB;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ;","names":[]}

package/dist/mobile/mobile-activity-feed.d.ts

@@ -0,0 +1,7 @@
+import type { ActivityItem } from '@withpotter/components/dashboard/activity-feed';
+interface MobileActivityFeedProps {
+    activities: ActivityItem[];
+    industryKey?: string | null;
+}
+export declare function MobileActivityFeed({ activities, industryKey, }: MobileActivityFeedProps): import("react").JSX.Element;
+export {};

package/dist/mobile/mobile-activity-feed.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import {
+  Package,
+  RefreshCw,
+  ShoppingBag,
+  Check,
+  UserPlus,
+  Star,
+  CreditCard,
+  Banknote,
+  Mail
+} from "lucide-react";
+import * as copy from "@withpotter/lib/timeline-copy";
+import { useSeenMarker } from "@withpotter/hooks/use-seen-marker";
+const ICON_MAP = {
+  product_added: { icon: Package, color: "text-blue-500 bg-blue-500/10" },
+  product_updated: { icon: RefreshCw, color: "text-blue-500 bg-blue-500/10" },
+  order_placed: { icon: ShoppingBag, color: "text-green-500 bg-green-500/10" },
+  order_completed: { icon: Check, color: "text-green-500 bg-green-500/10" },
+  member_signup: { icon: UserPlus, color: "text-amber-500 bg-amber-500/10" },
+  member_converted: { icon: Star, color: "text-brand-500 bg-brand-500/10" },
+  subscription_created: {
+    icon: CreditCard,
+    color: "text-green-500 bg-green-500/10"
+  },
+  invoice_paid: { icon: Banknote, color: "text-green-500 bg-green-500/10" },
+  invoice_sent: { icon: Mail, color: "text-blue-500 bg-blue-500/10" }
+};
+function formatRelativeTime(dateStr) {
+  const now = Date.now();
+  const date = new Date(dateStr).getTime();
+  const diffMs = now - date;
+  const diffSec = Math.floor(diffMs / 1e3);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHr = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHr / 24);
+  if (diffSec < 60) return "Just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHr < 24) return `${diffHr}h ago`;
+  if (diffDay < 7) return `${diffDay}d ago`;
+  return new Date(dateStr).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  });
+}
+function MobileActivityFeed({
+  activities,
+  industryKey
+}) {
+  const { isNew } = useSeenMarker("activity");
+  if (activities.length === 0) {
+    const empty = copy.getEmptyTimeline(industryKey ?? null);
+    return /* @__PURE__ */ jsxs("div", { className: "py-8 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)] mb-1", children: empty.heading }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: empty.subtext })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "px-1 pb-2 text-3xs font-medium text-[var(--text-muted)]", children: "Recent activity" }),
+    /* @__PURE__ */ jsx("div", { className: "bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-2", children: activities.map((activity, index) => {
+      const { icon: Icon, color } = ICON_MAP[activity.type];
+      const isLast = index === activities.length - 1;
+      const fresh = isNew(activity.timestamp);
+      const isBoundary = fresh === false && index > 0 && isNew(activities[index - 1].timestamp);
+      const content = /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+        fresh && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-label": "New since your last visit",
+            className: "absolute -ml-2 mt-3.5 h-1.5 w-1.5 rounded-full bg-[var(--brand-500)]"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${color.split(" ")[1]}`,
+              children: /* @__PURE__ */ jsx(Icon, { className: `w-4 h-4 ${color.split(" ")[0]}` })
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx("div", { className: "w-px flex-1 bg-[var(--border-subtle)] my-1" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)] leading-snug", children: activity.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] truncate mt-0.5", children: activity.description })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-3xs text-[var(--text-muted)] whitespace-nowrap flex-shrink-0 mt-0.5", children: formatRelativeTime(activity.timestamp) })
+        ] }) })
+      ] });
+      const row = activity.href ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: activity.href,
+          className: "relative block active:opacity-70 transition-opacity",
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "relative", children: content });
+      return /* @__PURE__ */ jsxs("div", { children: [
+        isBoundary && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-[var(--border-subtle)]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-3xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: "Earlier" }),
+          /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-[var(--border-subtle)]" })
+        ] }),
+        row
+      ] }, activity.id);
+    }) }) })
+  ] });
+}
+export {
+  MobileActivityFeed
+};
+//# sourceMappingURL=mobile-activity-feed.js.map

package/dist/mobile/mobile-activity-feed.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-activity-feed.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport {\n  Package,\n  RefreshCw,\n  ShoppingBag,\n  Check,\n  UserPlus,\n  Star,\n  CreditCard,\n  Banknote,\n  Mail,\n} from 'lucide-react';\nimport type { ActivityItem } from '@withpotter/components/dashboard/activity-feed';\nimport * as copy from '@withpotter/lib/timeline-copy';\nimport { useSeenMarker } from '@withpotter/hooks/use-seen-marker';\n\nconst ICON_MAP: Record<\n  ActivityItem['type'],\n  { icon: typeof Package; color: string }\n> = {\n  product_added: { icon: Package, color: 'text-blue-500 bg-blue-500/10' },\n  product_updated: { icon: RefreshCw, color: 'text-blue-500 bg-blue-500/10' },\n  order_placed: { icon: ShoppingBag, color: 'text-green-500 bg-green-500/10' },\n  order_completed: { icon: Check, color: 'text-green-500 bg-green-500/10' },\n  member_signup: { icon: UserPlus, color: 'text-amber-500 bg-amber-500/10' },\n  member_converted: { icon: Star, color: 'text-brand-500 bg-brand-500/10' },\n  subscription_created: {\n    icon: CreditCard,\n    color: 'text-green-500 bg-green-500/10',\n  },\n  invoice_paid: { icon: Banknote, color: 'text-green-500 bg-green-500/10' },\n  invoice_sent: { icon: Mail, color: 'text-blue-500 bg-blue-500/10' },\n};\n\nfunction formatRelativeTime(dateStr: string): string {\n  const now = Date.now();\n  const date = new Date(dateStr).getTime();\n  const diffMs = now - date;\n  const diffSec = Math.floor(diffMs / 1000);\n  const diffMin = Math.floor(diffSec / 60);\n  const diffHr = Math.floor(diffMin / 60);\n  const diffDay = Math.floor(diffHr / 24);\n\n  if (diffSec < 60) return 'Just now';\n  if (diffMin < 60) return `${diffMin}m ago`;\n  if (diffHr < 24) return `${diffHr}h ago`;\n  if (diffDay < 7) return `${diffDay}d ago`;\n  return new Date(dateStr).toLocaleDateString('en-US', {\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\ninterface MobileActivityFeedProps {\n  activities: ActivityItem[];\n  industryKey?: string | null;\n}\n\nexport function MobileActivityFeed({\n  activities,\n  industryKey,\n}: MobileActivityFeedProps) {\n  // Without a boundary this list re-reads as a wall on every visit: everything\n  // looks equally new, so nothing does, and the merchant scrolls hunting for\n  // the line they recognise.\n  const { isNew } = useSeenMarker('activity');\n\n  if (activities.length === 0) {\n    const empty = copy.getEmptyTimeline(industryKey ?? null);\n    return (\n      <div className=\"py-8 text-center\">\n        <p className=\"text-sm font-medium text-[var(--text-primary)] mb-1\">\n          {empty.heading}\n        </p>\n        <p className=\"text-xs text-[var(--text-tertiary)]\">{empty.subtext}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <p className=\"px-1 pb-2 text-3xs font-medium text-[var(--text-muted)]\">\n        Recent activity\n      </p>\n      <div className=\"bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden\">\n        <div className=\"px-4 py-2\">\n          {activities.map((activity, index) => {\n            const { icon: Icon, color } = ICON_MAP[activity.type];\n            const isLast = index === activities.length - 1;\n            const fresh = isNew(activity.timestamp);\n            // The first item older than the last visit carries the rule, so the\n            // merchant sees exactly where they stopped reading.\n            const isBoundary =\n              fresh === false &&\n              index > 0 &&\n              isNew(activities[index - 1].timestamp);\n\n            const content = (\n              <div className=\"flex gap-3\">\n                {/* A dot rather than a badge: the merchant is scanning a column\n                    of times, and one mark in the margin is read faster than a\n                    word they have to parse. */}\n                {fresh && (\n                  <span\n                    aria-label=\"New since your last visit\"\n                    className=\"absolute -ml-2 mt-3.5 h-1.5 w-1.5 rounded-full bg-[var(--brand-500)]\"\n                  />\n                )}\n                {/* Timeline connector */}\n                <div className=\"flex flex-col items-center\">\n                  <div\n                    className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${color.split(' ')[1]}`}\n                  >\n                    <Icon className={`w-4 h-4 ${color.split(' ')[0]}`} />\n                  </div>\n                  {!isLast && (\n                    <div className=\"w-px flex-1 bg-[var(--border-subtle)] my-1\" />\n                  )}\n                </div>\n\n                {/* Content */}\n                <div className=\"flex-1 min-w-0 pb-4\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"min-w-0\">\n                      <p className=\"text-sm font-medium text-[var(--text-primary)] leading-snug\">\n                        {activity.title}\n                      </p>\n                      <p className=\"text-xs text-[var(--text-tertiary)] truncate mt-0.5\">\n                        {activity.description}\n                      </p>\n                    </div>\n                    <span className=\"text-3xs text-[var(--text-muted)] whitespace-nowrap flex-shrink-0 mt-0.5\">\n                      {formatRelativeTime(activity.timestamp)}\n                    </span>\n                  </div>\n                </div>\n              </div>\n            );\n\n            const row = activity.href ? (\n              <Link\n                href={activity.href}\n                className=\"relative block active:opacity-70 transition-opacity\"\n              >\n                {content}\n              </Link>\n            ) : (\n              <div className=\"relative\">{content}</div>\n            );\n\n            // The rule sits above the first item older than the last visit, so\n            // the merchant sees exactly where they stopped reading rather than\n            // having to find it.\n            return (\n              <div key={activity.id}>\n                {isBoundary && (\n                  <div className=\"flex items-center gap-2 py-2\">\n                    <span className=\"h-px flex-1 bg-[var(--border-subtle)]\" />\n                    <span className=\"text-3xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n                      Earlier\n                    </span>\n                    <span className=\"h-px flex-1 bg-[var(--border-subtle)]\" />\n                  </div>\n                )}\n                {row}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-detail-header.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+/**
+ * Bridge component: publishes the mobile detail header (back chevron + title)
+ * from a frame that has to stay server-safe. Renders null — MobileShellChrome
+ * in the dashboard layout draws the actual bar.
+ *
+ * The detail twin of <MobilePageHeader>, and it exists for the same reason:
+ * DetailHeader is `hidden lg:block`, so before this a framed detail page
+ * carried no title whatsoever on a phone. <DetailPage> knows the title already;
+ * it just had no way to say so.
+ *
+ * No `onBack` is passed on purpose — the chrome falls back to `router.back()`,
+ * which is right for a page whose only back affordance is the breadcrumb trail
+ * (itself desktop-only). A route needing guarded navigation on unsaved edits
+ * keeps calling useDetailHeader itself; its effect runs after this one and wins.
+ */
+export declare function MobileDetailHeader({ title, actions, }: {
+    title: string;
+    actions?: ReactNode;
+}): null;

package/dist/mobile/mobile-detail-header.js

@@ -0,0 +1,13 @@
+"use client";
+import { useDetailHeader } from "@withpotter/hooks/use-detail-header";
+function MobileDetailHeader({
+  title,
+  actions
+}) {
+  useDetailHeader({ title, actions });
+  return null;
+}
+export {
+  MobileDetailHeader
+};
+//# sourceMappingURL=mobile-detail-header.js.map

package/dist/mobile/mobile-detail-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-detail-header.tsx"],"sourcesContent":["'use client';\n\nimport { useDetailHeader } from '@withpotter/hooks/use-detail-header';\nimport type { ReactNode } from 'react';\n\n/**\n * Bridge component: publishes the mobile detail header (back chevron + title)\n * from a frame that has to stay server-safe. Renders null — MobileShellChrome\n * in the dashboard layout draws the actual bar.\n *\n * The detail twin of <MobilePageHeader>, and it exists for the same reason:\n * DetailHeader is `hidden lg:block`, so before this a framed detail page\n * carried no title whatsoever on a phone. <DetailPage> knows the title already;\n * it just had no way to say so.\n *\n * No `onBack` is passed on purpose — the chrome falls back to `router.back()`,\n * which is right for a page whose only back affordance is the breadcrumb trail\n * (itself desktop-only). A route needing guarded navigation on unsaved edits\n * keeps calling useDetailHeader itself; its effect runs after this one and wins.\n */\nexport function MobileDetailHeader({\n  title,\n  actions,\n}: {\n  title: string;\n  actions?: ReactNode;\n}) {\n  useDetailHeader({ title, actions });\n  return null;\n}\n"],"mappings":";AAEA,SAAS,uBAAuB;AAkBzB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,kBAAgB,EAAE,OAAO,QAAQ,CAAC;AAClC,SAAO;AACT;","names":[]}

package/dist/mobile/mobile-editor-menu-context.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentType, type ReactNode } from 'react';
+export interface MobileEditorMenuItem {
+    label: string;
+    detail?: string;
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    onSelect: () => void;
+}
+export declare function MobileEditorMenuProvider({ children, }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useMobileEditorMenu(items: MobileEditorMenuItem[] | null): void;
+export declare function useMobileEditorMenuItems(): MobileEditorMenuItem[];

package/dist/mobile/mobile-editor-menu-context.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+const MobileEditorMenuContext = createContext(null);
+function MobileEditorMenuProvider({
+  children
+}) {
+  const [items, setItems] = useState([]);
+  const set = useCallback(
+    (next) => setItems(next ?? []),
+    []
+  );
+  const value = useMemo(() => ({ items, setItems: set }), [items, set]);
+  return /* @__PURE__ */ jsx(MobileEditorMenuContext.Provider, { value, children });
+}
+function useMobileEditorMenu(items) {
+  const setMenuItems = useContext(MobileEditorMenuContext)?.setItems;
+  useEffect(() => {
+    setMenuItems?.(items);
+    return () => setMenuItems?.(null);
+  }, [setMenuItems, items]);
+}
+function useMobileEditorMenuItems() {
+  return useContext(MobileEditorMenuContext)?.items ?? [];
+}
+export {
+  MobileEditorMenuProvider,
+  useMobileEditorMenu,
+  useMobileEditorMenuItems
+};
+//# sourceMappingURL=mobile-editor-menu-context.js.map

package/dist/mobile/mobile-editor-menu-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-editor-menu-context.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ComponentType,\n  type ReactNode,\n} from 'react';\n\nexport interface MobileEditorMenuItem {\n  label: string;\n  detail?: string;\n  icon: ComponentType<{ className?: string }>;\n  onSelect: () => void;\n}\n\ninterface MobileEditorMenuContextValue {\n  setItems: (items: MobileEditorMenuItem[] | null) => void;\n  items: MobileEditorMenuItem[];\n}\n\nconst MobileEditorMenuContext =\n  createContext<MobileEditorMenuContextValue | null>(null);\n\nexport function MobileEditorMenuProvider({\n  children,\n}: {\n  children: ReactNode;\n}) {\n  const [items, setItems] = useState<MobileEditorMenuItem[]>([]);\n  // Stable, so a screen registering its menu does not re-fire on every render\n  // of this provider (a fresh value each time cleared and re-set the menu).\n  const set = useCallback(\n    (next: MobileEditorMenuItem[] | null) => setItems(next ?? []),\n    [],\n  );\n  const value = useMemo(() => ({ items, setItems: set }), [items, set]);\n  return (\n    <MobileEditorMenuContext.Provider value={value}>\n      {children}\n    </MobileEditorMenuContext.Provider>\n  );\n}\n\nexport function useMobileEditorMenu(items: MobileEditorMenuItem[] | null) {\n  const setMenuItems = useContext(MobileEditorMenuContext)?.setItems;\n\n  useEffect(() => {\n    setMenuItems?.(items);\n    return () => setMenuItems?.(null);\n  }, [setMenuItems, items]);\n}\n\nexport function useMobileEditorMenuItems() {\n  return useContext(MobileEditorMenuContext)?.items ?? [];\n}\n"],"mappings":";AA0CI;AAxCJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAcP,MAAM,0BACJ,cAAmD,IAAI;AAElD,SAAS,yBAAyB;AAAA,EACvC;AACF,GAEG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiC,CAAC,CAAC;AAG7D,QAAM,MAAM;AAAA,IACV,CAAC,SAAwC,SAAS,QAAQ,CAAC,CAAC;AAAA,IAC5D,CAAC;AAAA,EACH;AACA,QAAM,QAAQ,QAAQ,OAAO,EAAE,OAAO,UAAU,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC;AACpE,SACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAC/B,UACH;AAEJ;AAEO,SAAS,oBAAoB,OAAsC;AACxE,QAAM,eAAe,WAAW,uBAAuB,GAAG;AAE1D,YAAU,MAAM;AACd,mBAAe,KAAK;AACpB,WAAO,MAAM,eAAe,IAAI;AAAA,EAClC,GAAG,CAAC,cAAc,KAAK,CAAC;AAC1B;AAEO,SAAS,2BAA2B;AACzC,SAAO,WAAW,uBAAuB,GAAG,SAAS,CAAC;AACxD;","names":[]}

package/dist/mobile/mobile-global-ui-context.d.ts

@@ -0,0 +1,12 @@
+interface MobileGlobalUiContextValue {
+    searchOpen: boolean;
+    searchQuery: string;
+    openSearch: () => void;
+    closeSearch: () => void;
+    setSearchQuery: (query: string) => void;
+}
+export declare function MobileGlobalUiProvider({ children, }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function useMobileGlobalUi(): MobileGlobalUiContextValue;
+export {};

package/dist/mobile/mobile-global-ui-context.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+const MobileGlobalUiContext = createContext(
+  null
+);
+function MobileGlobalUiProvider({
+  children
+}) {
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const openSearch = useCallback(() => setSearchOpen(true), []);
+  const closeSearch = useCallback(() => {
+    setSearchOpen(false);
+    setSearchQuery("");
+  }, []);
+  const value = useMemo(
+    () => ({
+      searchOpen,
+      searchQuery,
+      openSearch,
+      closeSearch,
+      setSearchQuery
+    }),
+    [searchOpen, searchQuery, openSearch, closeSearch]
+  );
+  return /* @__PURE__ */ jsx(MobileGlobalUiContext.Provider, { value, children });
+}
+function useMobileGlobalUi() {
+  const ctx = useContext(MobileGlobalUiContext);
+  if (!ctx) {
+    return {
+      searchOpen: false,
+      searchQuery: "",
+      openSearch: () => {
+      },
+      closeSearch: () => {
+      },
+      setSearchQuery: () => {
+      }
+    };
+  }
+  return ctx;
+}
+export {
+  MobileGlobalUiProvider,
+  useMobileGlobalUi
+};
+//# sourceMappingURL=mobile-global-ui-context.js.map

package/dist/mobile/mobile-global-ui-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-global-ui-context.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile global UI context — exposes setters to open the global search and\n * search overlay from anywhere in the mobile dashboard tree. The\n * actual modals are mounted in `dashboard/layout.tsx`.\n */\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\ninterface MobileGlobalUiContextValue {\n  searchOpen: boolean;\n  searchQuery: string;\n  openSearch: () => void;\n  closeSearch: () => void;\n  setSearchQuery: (query: string) => void;\n}\n\nconst MobileGlobalUiContext = createContext<MobileGlobalUiContextValue | null>(\n  null,\n);\n\nexport function MobileGlobalUiProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const openSearch = useCallback(() => setSearchOpen(true), []);\n  const closeSearch = useCallback(() => {\n    setSearchOpen(false);\n    setSearchQuery('');\n  }, []);\n\n  const value = useMemo<MobileGlobalUiContextValue>(\n    () => ({\n      searchOpen,\n      searchQuery,\n      openSearch,\n      closeSearch,\n      setSearchQuery,\n    }),\n    [searchOpen, searchQuery, openSearch, closeSearch],\n  );\n\n  return (\n    <MobileGlobalUiContext.Provider value={value}>\n      {children}\n    </MobileGlobalUiContext.Provider>\n  );\n}\n\nexport function useMobileGlobalUi(): MobileGlobalUiContextValue {\n  const ctx = useContext(MobileGlobalUiContext);\n  if (!ctx) {\n    // Return a noop fallback so non-mobile code can call without crashing\n    return {\n      searchOpen: false,\n      searchQuery: '',\n      openSearch: () => {},\n      closeSearch: () => {},\n      setSearchQuery: () => {},\n    };\n  }\n  return ctx;\n}\n"],"mappings":";AAsDI;AA9CJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUP,MAAM,wBAAwB;AAAA,EAC5B;AACF;AAEO,SAAS,uBAAuB;AAAA,EACrC;AACF,GAEG;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,aAAa,YAAY,MAAM,cAAc,IAAI,GAAG,CAAC,CAAC;AAC5D,QAAM,cAAc,YAAY,MAAM;AACpC,kBAAc,KAAK;AACnB,mBAAe,EAAE;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,aAAa,YAAY,WAAW;AAAA,EACnD;AAEA,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAC7B,UACH;AAEJ;AAEO,SAAS,oBAAgD;AAC9D,QAAM,MAAM,WAAW,qBAAqB;AAC5C,MAAI,CAAC,KAAK;AAER,WAAO;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAAC;AAAA,MACnB,aAAa,MAAM;AAAA,MAAC;AAAA,MACpB,gBAAgB,MAAM;AAAA,MAAC;AAAA,IACzB;AAAA,EACF;AACA,SAAO;AACT;","names":[]}