@withpotter/components 0.13.0-next.101

package/dist/mobile/close-early.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Power, Loader2 } from "lucide-react";
+import { Button } from "@withpotter/ui-kit";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { tenantApi } from "@withpotter/lib/api/tenant";
+import { useAuth } from "@withpotter/lib/auth-context";
+function endOfToday() {
+  const end = /* @__PURE__ */ new Date();
+  end.setHours(23, 59, 59, 999);
+  return end.toISOString();
+}
+function isClosed(closedUntil) {
+  if (typeof closedUntil !== "string") return false;
+  const when = new Date(closedUntil);
+  return !Number.isNaN(when.getTime()) && when.getTime() > Date.now();
+}
+function CloseEarly() {
+  const { tenant, refreshTenant } = useAuth();
+  const { toast } = useToast();
+  const [saving, setSaving] = useState(false);
+  const settings = tenant?.settings ?? {};
+  const closed = isClosed(settings.closedUntil);
+  const set = async (closedUntil) => {
+    if (!tenant?.slug) return;
+    setSaving(true);
+    try {
+      await tenantApi.update(tenant.slug, {
+        settings: { ...settings, closedUntil }
+      });
+      await refreshTenant();
+      toast({
+        title: closedUntil ? "Closed for today" : "Open again",
+        description: closedUntil ? "New bookings stop until tomorrow. Your hours are unchanged." : "Your normal hours are back in effect."
+      });
+    } catch (err) {
+      toast({
+        title: closedUntil ? "Couldn't close" : "Couldn't reopen",
+        description: err instanceof Error ? err.message : "Check your connection and try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-md font-medium", style: { color: "var(--mb-text)" }, children: closed ? "Closed for today" : "Open for business" }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "mt-0.5 text-2xs",
+          style: { color: "var(--mb-text-tertiary)" },
+          children: closed ? "Back on your normal hours tomorrow." : "Stop taking bookings for the rest of today."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: closed ? "primary" : "secondary",
+        onClick: () => set(closed ? null : endOfToday()),
+        disabled: saving,
+        icon: saving ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Power, {}),
+        children: closed ? "Reopen" : "Close"
+      }
+    )
+  ] });
+}
+export {
+  CloseEarly
+};
+//# sourceMappingURL=close-early.js.map

package/dist/mobile/close-early.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/close-early.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Power, Loader2 } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { tenantApi } from '@withpotter/lib/api/tenant';\nimport { useAuth } from '@withpotter/lib/auth-context';\n\n/** End of today in the browser's timezone — the merchant's own day. */\nfunction endOfToday(): string {\n  const end = new Date();\n  end.setHours(23, 59, 59, 999);\n  return end.toISOString();\n}\n\nfunction isClosed(closedUntil: unknown): boolean {\n  if (typeof closedUntil !== 'string') return false;\n  const when = new Date(closedUntil);\n  return !Number.isNaN(when.getTime()) && when.getTime() > Date.now();\n}\n\n/**\n * Shut for the rest of the day, from the phone, in one press.\n *\n * A power cut at 3pm meant editing seven days of opening hours and then\n * remembering to put them back. Most merchants will do neither, so the\n * storefront kept taking bookings for a business that was shut.\n *\n * Writes `settings.closedUntil`, which the booking availability use-case reads\n * on top of the weekly hours — so the real hours are untouched, and the\n * business reopens tomorrow on its normal week with nothing to restore.\n *\n * Reopening is deliberately one press with no confirmation. Closing is the\n * cautious direction; a merchant who closed by accident should be able to undo\n * it instantly, and a merchant who meant it loses nothing by it being easy.\n */\nexport function CloseEarly() {\n  const { tenant, refreshTenant } = useAuth();\n  const { toast } = useToast();\n  const [saving, setSaving] = useState(false);\n\n  const settings = (tenant?.settings ?? {}) as Record<string, unknown>;\n  const closed = isClosed(settings.closedUntil);\n\n  const set = async (closedUntil: string | null) => {\n    if (!tenant?.slug) return;\n    setSaving(true);\n    try {\n      await tenantApi.update(tenant.slug, {\n        settings: { ...settings, closedUntil },\n      });\n      await refreshTenant();\n      toast({\n        title: closedUntil ? 'Closed for today' : 'Open again',\n        description: closedUntil\n          ? 'New bookings stop until tomorrow. Your hours are unchanged.'\n          : 'Your normal hours are back in effect.',\n      });\n    } catch (err) {\n      toast({\n        title: closedUntil ? \"Couldn't close\" : \"Couldn't reopen\",\n        description:\n          err instanceof Error\n            ? err.message\n            : 'Check your connection and try again.',\n        variant: 'destructive',\n      });\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <div className=\"min-w-0\">\n        <p className=\"text-md font-medium\" style={{ color: 'var(--mb-text)' }}>\n          {closed ? 'Closed for today' : 'Open for business'}\n        </p>\n        <p\n          className=\"mt-0.5 text-2xs\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          {closed\n            ? 'Back on your normal hours tomorrow.'\n            : 'Stop taking bookings for the rest of today.'}\n        </p>\n      </div>\n      <Button\n        variant={closed ? 'primary' : 'secondary'}\n        onClick={() => set(closed ? null : endOfToday())}\n        disabled={saving}\n        icon={saving ? <Loader2 className=\"animate-spin\" /> : <Power />}\n      >\n        {closed ? 'Reopen' : 'Close'}\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";AA2EM,SACE,KADF;AAzEN,SAAS,gBAAgB;AACzB,SAAS,OAAO,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAGxB,SAAS,aAAqB;AAC5B,QAAM,MAAM,oBAAI,KAAK;AACrB,MAAI,SAAS,IAAI,IAAI,IAAI,GAAG;AAC5B,SAAO,IAAI,YAAY;AACzB;AAEA,SAAS,SAAS,aAA+B;AAC/C,MAAI,OAAO,gBAAgB,SAAU,QAAO;AAC5C,QAAM,OAAO,IAAI,KAAK,WAAW;AACjC,SAAO,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI;AACpE;AAiBO,SAAS,aAAa;AAC3B,QAAM,EAAE,QAAQ,cAAc,IAAI,QAAQ;AAC1C,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,WAAY,QAAQ,YAAY,CAAC;AACvC,QAAM,SAAS,SAAS,SAAS,WAAW;AAE5C,QAAM,MAAM,OAAO,gBAA+B;AAChD,QAAI,CAAC,QAAQ,KAAM;AACnB,cAAU,IAAI;AACd,QAAI;AACF,YAAM,UAAU,OAAO,OAAO,MAAM;AAAA,QAClC,UAAU,EAAE,GAAG,UAAU,YAAY;AAAA,MACvC,CAAC;AACD,YAAM,cAAc;AACpB,YAAM;AAAA,QACJ,OAAO,cAAc,qBAAqB;AAAA,QAC1C,aAAa,cACT,gEACA;AAAA,MACN,CAAC;AAAA,IACH,SAAS,KAAK;AACZ,YAAM;AAAA,QACJ,OAAO,cAAc,mBAAmB;AAAA,QACxC,aACE,eAAe,QACX,IAAI,UACJ;AAAA,QACN,SAAS;AAAA,MACX,CAAC;AAAA,IACH,UAAE;AACA,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,2CACb;AAAA,yBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,OAAE,WAAU,uBAAsB,OAAO,EAAE,OAAO,iBAAiB,GACjE,mBAAS,qBAAqB,qBACjC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,UAEzC,mBACG,wCACA;AAAA;AAAA,MACN;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,SAAS,YAAY;AAAA,QAC9B,SAAS,MAAM,IAAI,SAAS,OAAO,WAAW,CAAC;AAAA,QAC/C,UAAU;AAAA,QACV,MAAM,SAAS,oBAAC,WAAQ,WAAU,gBAAe,IAAK,oBAAC,SAAM;AAAA,QAE5D,mBAAS,WAAW;AAAA;AAAA,IACvB;AAAA,KACF;AAEJ;","names":[]}

package/dist/mobile/floating-parcels.d.ts

@@ -0,0 +1,8 @@
+export declare function FloatingParcels({ settle, inline, sizeMultiplier, }?: {
+    /** Stop parcels on the floor instead of recycling them after they leave. */
+    settle?: boolean;
+    /** Render inside the caller's stacking context instead of portalling to body. */
+    inline?: boolean;
+    /** Scale parcel artwork without changing the homepage default. */
+    sizeMultiplier?: number;
+}): import("react").JSX.Element;

package/dist/mobile/floating-parcels.js

@@ -0,0 +1,245 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { BoxMark } from "@withpotter/ui-kit/box-mark";
+const placements = Array.from({ length: 30 }, (_, index) => {
+  const row = Math.floor(index / 10);
+  const column = index % 10;
+  return {
+    left: 22 + (column * 7 + row * 11) % 56,
+    top: index * 19 % 120,
+    size: 52 + index * 17 % 48,
+    rotation: -24 + index * 13 % 48,
+    drift: -20 + index * 9 % 40,
+    delay: index * 0.37 % 6,
+    duration: 3.8 + index * 11 % 17 / 10
+  };
+});
+const INITIAL_FALL_SPEED = 0.34;
+const GRAVITY = 0.065;
+function ParcelBox({
+  placement,
+  sizeMultiplier,
+  register
+}) {
+  const size = placement.size * sizeMultiplier;
+  const texture = "url(/parcel/cardboard-cc0.jpg)";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute",
+      style: {
+        left: 0,
+        top: 0,
+        width: size,
+        height: size * 0.86,
+        perspective: 500,
+        transformStyle: "preserve-3d"
+      },
+      ref: register,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative h-full w-full drop-shadow-md",
+          style: { transform: "rotateX(-8deg) rotateY(-18deg)" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-[8%_12%_8%_8%] overflow-hidden rounded-[3px]",
+                style: {
+                  backgroundImage: texture,
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  filter: "sepia(0.3) saturate(1.1) brightness(1.04)",
+                  boxShadow: "inset 0 0 0 1px color-mix(in srgb, var(--mb-border-strong, var(--border-subtle)) 42%, transparent), inset -8px -8px 12px color-mix(in srgb, var(--mb-text, var(--text-primary)) 16%, transparent)"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute left-[20%] top-[36%] w-[48%] -rotate-2 text-[var(--mb-surface,var(--bg-base))]",
+                    style: {
+                      opacity: 0.88,
+                      filter: "drop-shadow(0 1px 0 color-mix(in srgb, var(--mb-surface, var(--bg-base)) 28%, transparent))"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      BoxMark,
+                      {
+                        height: 7,
+                        className: "text-[var(--mb-surface,var(--bg-base))]"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute bottom-[8%] right-0 top-[8%] w-[20%]",
+                style: {
+                  backgroundImage: texture,
+                  backgroundPosition: "right center",
+                  backgroundSize: "cover",
+                  clipPath: "polygon(0 0, 100% 8%, 100% 92%, 0 100%)",
+                  filter: "brightness(0.82) sepia(0.28) saturate(1.05)"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function FloatingParcels({
+  settle = false,
+  inline = false,
+  sizeMultiplier = 1
+} = {}) {
+  const elements = useRef([]);
+  const activePlacements = useMemo(
+    () => settle ? placements.slice(0, 10) : placements,
+    [settle]
+  );
+  useEffect(() => {
+    const currentPlacements = settle ? placements.slice(0, 10) : placements;
+    const bodies = [];
+    let frame = 0;
+    let previous = performance.now();
+    elements.current.forEach((element, index) => {
+      const placement = currentPlacements[index];
+      if (!element || !placement) return;
+      const width = placement.size * sizeMultiplier;
+      const height = placement.size * sizeMultiplier * 0.86;
+      bodies.push({
+        element,
+        x: placement.left / 100 * window.innerWidth,
+        y: -height - placement.top,
+        vx: placement.drift * 0.018,
+        vy: INITIAL_FALL_SPEED + index % 4 * 0.06,
+        rotation: placement.rotation,
+        angularVelocity: (index % 2 ? 1 : -1) * (0.08 + index % 3 * 0.025),
+        width,
+        height,
+        collisionCooldown: 0
+      });
+    });
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      bodies.forEach((body) => {
+        const y = settle ? window.innerHeight - body.height - 18 : body.y;
+        body.element.style.transform = `translate3d(${body.x}px, ${y}px, 0) rotate(${body.rotation}deg)`;
+      });
+      return;
+    }
+    const resetBody = (body, index) => {
+      body.x = (currentPlacements[index].left + 100) % 112 * 0.01 * window.innerWidth;
+      body.y = -body.height - 80 - index % 5 * 35;
+      body.vx = currentPlacements[index].drift * 0.018;
+      body.vy = INITIAL_FALL_SPEED + index % 4 * 0.06;
+      body.angularVelocity = (index % 2 ? 1 : -1) * 0.1;
+      body.collisionCooldown = 0;
+    };
+    const animate = (now) => {
+      const step = Math.min((now - previous) / 16.667, 2);
+      previous = now;
+      bodies.forEach((body, index) => {
+        body.collisionCooldown = Math.max(0, body.collisionCooldown - step);
+        body.vy += GRAVITY * step;
+        body.x += body.vx * step;
+        body.y += body.vy * step;
+        body.rotation += body.angularVelocity * step;
+        if (body.x < -body.width * 0.6 || body.x > window.innerWidth - body.width * 0.4) {
+          body.vx *= -0.72;
+          body.x = Math.max(
+            -body.width * 0.6,
+            Math.min(window.innerWidth - body.width * 0.4, body.x)
+          );
+        }
+        if (body.y + body.height >= window.innerHeight - 18) {
+          if (settle) {
+            body.y = window.innerHeight - body.height - 18;
+            body.vy = 0;
+            body.vx *= 0.92;
+            body.angularVelocity *= 0.92;
+          } else {
+            resetBody(body, index);
+          }
+        }
+      });
+      for (let i = 0; i < bodies.length; i += 1) {
+        for (let j = i + 1; j < bodies.length; j += 1) {
+          const first = bodies[i];
+          const second = bodies[j];
+          const overlapX = Math.min(first.x + first.width, second.x + second.width) - Math.max(first.x, second.x);
+          const overlapY = Math.min(first.y + first.height, second.y + second.height) - Math.max(first.y, second.y);
+          if (overlapX <= 0 || overlapY <= 0) continue;
+          const push = Math.min(overlapY, overlapX) * 0.52;
+          const firstCenter = first.x + first.width / 2;
+          const secondCenter = second.x + second.width / 2;
+          const horizontal = Math.abs(firstCenter - secondCenter) < first.width * 0.42;
+          if (horizontal) {
+            const direction = first.y < second.y ? -1 : 1;
+            first.y += direction * push;
+            second.y -= direction * push;
+            if (first.collisionCooldown === 0 && second.collisionCooldown === 0) {
+              const impact = Math.max(
+                0.35,
+                Math.abs(first.vy - second.vy) * 0.3
+              );
+              first.vy = Math.max(0.35, first.vy - impact * direction);
+              second.vy = Math.max(0.35, second.vy + impact * direction);
+              first.vx += (second.x - first.x) * 2e-3;
+              second.vx -= (second.x - first.x) * 2e-3;
+              first.collisionCooldown = 8;
+              second.collisionCooldown = 8;
+            }
+          } else {
+            const direction = firstCenter < secondCenter ? -1 : 1;
+            first.x += direction * push;
+            second.x -= direction * push;
+            if (first.collisionCooldown === 0 && second.collisionCooldown === 0) {
+              [first.vx, second.vx] = [second.vx * 0.72, first.vx * 0.72];
+              first.collisionCooldown = 8;
+              second.collisionCooldown = 8;
+            }
+          }
+          first.angularVelocity += (second.vx - first.vx) * 0.012;
+          second.angularVelocity -= (second.vx - first.vx) * 0.012;
+        }
+      }
+      bodies.forEach((body) => {
+        body.element.style.transform = `translate3d(${body.x}px, ${body.y}px, 0) rotate(${body.rotation}deg)`;
+      });
+      frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [settle, sizeMultiplier]);
+  const layer = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: `pointer-events-none ${inline ? "absolute z-[1]" : "fixed z-[9999]"} inset-0 overflow-hidden`,
+      children: activePlacements.map((placement, index) => /* @__PURE__ */ jsx(
+        ParcelBox,
+        {
+          placement,
+          sizeMultiplier,
+          register: (element) => {
+            elements.current[index] = element;
+          }
+        },
+        index
+      ))
+    }
+  );
+  if (inline) return layer;
+  return typeof document === "undefined" ? layer : createPortal(layer, document.body);
+}
+export {
+  FloatingParcels
+};
+//# sourceMappingURL=floating-parcels.js.map

package/dist/mobile/floating-parcels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/floating-parcels.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { BoxMark } from '@withpotter/ui-kit/box-mark';\n\ninterface ParcelPlacement {\n  left: number;\n  top: number;\n  size: number;\n  rotation: number;\n  drift: number;\n  delay: number;\n  duration: number;\n}\n\nconst placements: ParcelPlacement[] = Array.from({ length: 30 }, (_, index) => {\n  const row = Math.floor(index / 10);\n  const column = index % 10;\n\n  return {\n    left: 22 + ((column * 7 + row * 11) % 56),\n    top: (index * 19) % 120,\n    size: 52 + ((index * 17) % 48),\n    rotation: -24 + ((index * 13) % 48),\n    drift: -20 + ((index * 9) % 40),\n    delay: (index * 0.37) % 6,\n    duration: 3.8 + ((index * 11) % 17) / 10,\n  };\n});\n\nconst INITIAL_FALL_SPEED = 0.34;\nconst GRAVITY = 0.065;\n\ninterface PhysicsBody {\n  element: HTMLDivElement;\n  x: number;\n  y: number;\n  vx: number;\n  vy: number;\n  rotation: number;\n  angularVelocity: number;\n  width: number;\n  height: number;\n  collisionCooldown: number;\n}\n\nfunction ParcelBox({\n  placement,\n  sizeMultiplier,\n  register,\n}: {\n  placement: ParcelPlacement;\n  sizeMultiplier: number;\n  register: (element: HTMLDivElement | null) => void;\n}) {\n  const size = placement.size * sizeMultiplier;\n  const texture = 'url(/parcel/cardboard-cc0.jpg)';\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute\"\n      style={{\n        left: 0,\n        top: 0,\n        width: size,\n        height: size * 0.86,\n        perspective: 500,\n        transformStyle: 'preserve-3d',\n      }}\n      ref={register}\n    >\n      <div\n        className=\"relative h-full w-full drop-shadow-md\"\n        style={{ transform: 'rotateX(-8deg) rotateY(-18deg)' }}\n      >\n        <div\n          className=\"absolute inset-[8%_12%_8%_8%] overflow-hidden rounded-[3px]\"\n          style={{\n            backgroundImage: texture,\n            backgroundPosition: 'center',\n            backgroundSize: 'cover',\n            filter: 'sepia(0.3) saturate(1.1) brightness(1.04)',\n            boxShadow:\n              'inset 0 0 0 1px color-mix(in srgb, var(--mb-border-strong, var(--border-subtle)) 42%, transparent), inset -8px -8px 12px color-mix(in srgb, var(--mb-text, var(--text-primary)) 16%, transparent)',\n          }}\n        >\n          <div\n            className=\"absolute left-[20%] top-[36%] w-[48%] -rotate-2 text-[var(--mb-surface,var(--bg-base))]\"\n            style={{\n              opacity: 0.88,\n              filter:\n                'drop-shadow(0 1px 0 color-mix(in srgb, var(--mb-surface, var(--bg-base)) 28%, transparent))',\n            }}\n          >\n            <BoxMark\n              height={7}\n              className=\"text-[var(--mb-surface,var(--bg-base))]\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"absolute bottom-[8%] right-0 top-[8%] w-[20%]\"\n          style={{\n            backgroundImage: texture,\n            backgroundPosition: 'right center',\n            backgroundSize: 'cover',\n            clipPath: 'polygon(0 0, 100% 8%, 100% 92%, 0 100%)',\n            filter: 'brightness(0.82) sepia(0.28) saturate(1.05)',\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport function FloatingParcels({\n  settle = false,\n  inline = false,\n  sizeMultiplier = 1,\n}: {\n  /** Stop parcels on the floor instead of recycling them after they leave. */\n  settle?: boolean;\n  /** Render inside the caller's stacking context instead of portalling to body. */\n  inline?: boolean;\n  /** Scale parcel artwork without changing the homepage default. */\n  sizeMultiplier?: number;\n} = {}) {\n  const elements = useRef<(HTMLDivElement | null)[]>([]);\n  const activePlacements = useMemo(\n    () => (settle ? placements.slice(0, 10) : placements),\n    [settle],\n  );\n\n  useEffect(() => {\n    const currentPlacements = settle ? placements.slice(0, 10) : placements;\n    const bodies: PhysicsBody[] = [];\n    let frame = 0;\n    let previous = performance.now();\n\n    elements.current.forEach((element, index) => {\n      const placement = currentPlacements[index];\n      if (!element || !placement) return;\n\n      const width = placement.size * sizeMultiplier;\n      const height = placement.size * sizeMultiplier * 0.86;\n      bodies.push({\n        element,\n        x: (placement.left / 100) * window.innerWidth,\n        y: -height - placement.top,\n        vx: placement.drift * 0.018,\n        vy: INITIAL_FALL_SPEED + (index % 4) * 0.06,\n        rotation: placement.rotation,\n        angularVelocity: (index % 2 ? 1 : -1) * (0.08 + (index % 3) * 0.025),\n        width,\n        height,\n        collisionCooldown: 0,\n      });\n    });\n\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n      bodies.forEach((body) => {\n        const y = settle ? window.innerHeight - body.height - 18 : body.y;\n        body.element.style.transform = `translate3d(${body.x}px, ${y}px, 0) rotate(${body.rotation}deg)`;\n      });\n      return;\n    }\n\n    const resetBody = (body: PhysicsBody, index: number) => {\n      body.x =\n        ((currentPlacements[index].left + 100) % 112) *\n        0.01 *\n        window.innerWidth;\n      body.y = -body.height - 80 - (index % 5) * 35;\n      body.vx = currentPlacements[index].drift * 0.018;\n      body.vy = INITIAL_FALL_SPEED + (index % 4) * 0.06;\n      body.angularVelocity = (index % 2 ? 1 : -1) * 0.1;\n      body.collisionCooldown = 0;\n    };\n\n    const animate = (now: number) => {\n      const step = Math.min((now - previous) / 16.667, 2);\n      previous = now;\n      bodies.forEach((body, index) => {\n        body.collisionCooldown = Math.max(0, body.collisionCooldown - step);\n        body.vy += GRAVITY * step;\n        body.x += body.vx * step;\n        body.y += body.vy * step;\n        body.rotation += body.angularVelocity * step;\n\n        if (\n          body.x < -body.width * 0.6 ||\n          body.x > window.innerWidth - body.width * 0.4\n        ) {\n          body.vx *= -0.72;\n          body.x = Math.max(\n            -body.width * 0.6,\n            Math.min(window.innerWidth - body.width * 0.4, body.x),\n          );\n        }\n        if (body.y + body.height >= window.innerHeight - 18) {\n          if (settle) {\n            body.y = window.innerHeight - body.height - 18;\n            body.vy = 0;\n            body.vx *= 0.92;\n            body.angularVelocity *= 0.92;\n          } else {\n            resetBody(body, index);\n          }\n        }\n      });\n\n      for (let i = 0; i < bodies.length; i += 1) {\n        for (let j = i + 1; j < bodies.length; j += 1) {\n          const first = bodies[i];\n          const second = bodies[j];\n          const overlapX =\n            Math.min(first.x + first.width, second.x + second.width) -\n            Math.max(first.x, second.x);\n          const overlapY =\n            Math.min(first.y + first.height, second.y + second.height) -\n            Math.max(first.y, second.y);\n          if (overlapX <= 0 || overlapY <= 0) continue;\n\n          const push = Math.min(overlapY, overlapX) * 0.52;\n          const firstCenter = first.x + first.width / 2;\n          const secondCenter = second.x + second.width / 2;\n          const horizontal =\n            Math.abs(firstCenter - secondCenter) < first.width * 0.42;\n\n          if (horizontal) {\n            const direction = first.y < second.y ? -1 : 1;\n            first.y += direction * push;\n            second.y -= direction * push;\n            if (\n              first.collisionCooldown === 0 &&\n              second.collisionCooldown === 0\n            ) {\n              const impact = Math.max(\n                0.35,\n                Math.abs(first.vy - second.vy) * 0.3,\n              );\n              first.vy = Math.max(0.35, first.vy - impact * direction);\n              second.vy = Math.max(0.35, second.vy + impact * direction);\n              first.vx += (second.x - first.x) * 0.002;\n              second.vx -= (second.x - first.x) * 0.002;\n              first.collisionCooldown = 8;\n              second.collisionCooldown = 8;\n            }\n          } else {\n            const direction = firstCenter < secondCenter ? -1 : 1;\n            first.x += direction * push;\n            second.x -= direction * push;\n            if (\n              first.collisionCooldown === 0 &&\n              second.collisionCooldown === 0\n            ) {\n              [first.vx, second.vx] = [second.vx * 0.72, first.vx * 0.72];\n              first.collisionCooldown = 8;\n              second.collisionCooldown = 8;\n            }\n          }\n          first.angularVelocity += (second.vx - first.vx) * 0.012;\n          second.angularVelocity -= (second.vx - first.vx) * 0.012;\n        }\n      }\n\n      bodies.forEach((body) => {\n        body.element.style.transform = `translate3d(${body.x}px, ${body.y}px, 0) rotate(${body.rotation}deg)`;\n      });\n      frame = requestAnimationFrame(animate);\n    };\n\n    frame = requestAnimationFrame(animate);\n    return () => cancelAnimationFrame(frame);\n  }, [settle, sizeMultiplier]);\n\n  const layer = (\n    <div\n      aria-hidden=\"true\"\n      className={`pointer-events-none ${\n        inline ? 'absolute z-[1]' : 'fixed z-[9999]'\n      } inset-0 overflow-hidden`}\n    >\n      {activePlacements.map((placement, index) => (\n        <ParcelBox\n          key={index}\n          placement={placement}\n          sizeMultiplier={sizeMultiplier}\n          register={(element) => {\n            elements.current[index] = element;\n          }}\n        />\n      ))}\n    </div>\n  );\n\n  if (inline) return layer;\n  return typeof document === 'undefined'\n    ? layer\n    : createPortal(layer, document.body);\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/hand-over-phone.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Hand the counter phone to whoever is working.
+ *
+ * The device behind a counter is shared, and it stays signed in as the owner
+ * all day — so every member of staff holding it has the owner's reach, and any
+ * order they touch is recorded as the owner's doing.
+ *
+ * This is a real sign-out, not a screen lock: it drops the token and clears the
+ * server cookie, so the next person has to be themselves. That matters because
+ * a lock over an owner session is theatre — the token is still on the device,
+ * and the permissions it carries are still the owner's.
+ *
+ * It is worth offering as its own thing rather than leaving people to find
+ * "Sign out", because the two read differently. Signing out sounds like leaving;
+ * this sounds like what it is — passing the shop on. `pb_last_account` survives
+ * it, so the owner taking the phone back is greeted by name rather than starting
+ * from nothing.
+ *
+ * Staff see their own dashboard once signed in: the roles already exist, and
+ * the restriction is enforced server-side rather than by hiding rows.
+ */
+export declare function HandOverPhone(): import("react").JSX.Element;

package/dist/mobile/hand-over-phone.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { UserRoundCheck, Loader2 } from "lucide-react";
+import { ListRow } from "@withpotter/components/mobile/primitives";
+import { useConfirm } from "@withpotter/ui-kit";
+import { useAuth } from "@withpotter/lib/auth-context";
+function HandOverPhone() {
+  const { logout } = useAuth();
+  const router = useRouter();
+  const confirm = useConfirm();
+  const [working, setWorking] = useState(false);
+  const hand = async () => {
+    const ok = await confirm({
+      title: "Hand over this phone?",
+      description: "You will be signed out so the next person can sign in as themselves. Their work is recorded as theirs, and they only see what their role allows.",
+      confirmLabel: "Sign out and hand over"
+    });
+    if (!ok) return;
+    setWorking(true);
+    try {
+      await logout();
+      router.replace("/login");
+    } finally {
+      setWorking(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ListRow,
+    {
+      icon: working ? Loader2 : UserRoundCheck,
+      label: working ? "Signing out\u2026" : "Hand over to staff",
+      onClick: working ? void 0 : hand
+    }
+  );
+}
+export {
+  HandOverPhone
+};
+//# sourceMappingURL=hand-over-phone.js.map

package/dist/mobile/hand-over-phone.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/hand-over-phone.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { UserRoundCheck, Loader2 } from 'lucide-react';\nimport { ListRow } from '@withpotter/components/mobile/primitives';\nimport { useConfirm } from '@withpotter/ui-kit';\nimport { useAuth } from '@withpotter/lib/auth-context';\n\n/**\n * Hand the counter phone to whoever is working.\n *\n * The device behind a counter is shared, and it stays signed in as the owner\n * all day — so every member of staff holding it has the owner's reach, and any\n * order they touch is recorded as the owner's doing.\n *\n * This is a real sign-out, not a screen lock: it drops the token and clears the\n * server cookie, so the next person has to be themselves. That matters because\n * a lock over an owner session is theatre — the token is still on the device,\n * and the permissions it carries are still the owner's.\n *\n * It is worth offering as its own thing rather than leaving people to find\n * \"Sign out\", because the two read differently. Signing out sounds like leaving;\n * this sounds like what it is — passing the shop on. `pb_last_account` survives\n * it, so the owner taking the phone back is greeted by name rather than starting\n * from nothing.\n *\n * Staff see their own dashboard once signed in: the roles already exist, and\n * the restriction is enforced server-side rather than by hiding rows.\n */\nexport function HandOverPhone() {\n  const { logout } = useAuth();\n  const router = useRouter();\n  const confirm = useConfirm();\n  const [working, setWorking] = useState(false);\n\n  const hand = async () => {\n    const ok = await confirm({\n      title: 'Hand over this phone?',\n      description:\n        'You will be signed out so the next person can sign in as themselves. Their work is recorded as theirs, and they only see what their role allows.',\n      confirmLabel: 'Sign out and hand over',\n    });\n    if (!ok) return;\n\n    setWorking(true);\n    try {\n      await logout();\n      router.replace('/login');\n    } finally {\n      setWorking(false);\n    }\n  };\n\n  return (\n    <ListRow\n      icon={working ? Loader2 : UserRoundCheck}\n      label={working ? 'Signing out…' : 'Hand over to staff'}\n      onClick={working ? undefined : hand}\n    />\n  );\n}\n"],"mappings":";AAuDI;AArDJ,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,eAAe;AACxC,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAuBjB,SAAS,gBAAgB;AAC9B,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,WAAW;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,OAAO,YAAY;AACvB,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO;AAAA,MACP,aACE;AAAA,MACF,cAAc;AAAA,IAChB,CAAC;AACD,QAAI,CAAC,GAAI;AAET,eAAW,IAAI;AACf,QAAI;AACF,YAAM,OAAO;AACb,aAAO,QAAQ,QAAQ;AAAA,IACzB,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,UAAU;AAAA,MAC1B,OAAO,UAAU,sBAAiB;AAAA,MAClC,SAAS,UAAU,SAAY;AAAA;AAAA,EACjC;AAEJ;","names":[]}

package/dist/mobile/hub-page.d.ts

@@ -0,0 +1,20 @@
+import type { LucideIcon } from 'lucide-react';
+export interface HubWidget {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    href: string;
+    /** 'large' = full width hero card, 'small' = half width (default) */
+    size?: 'large' | 'small';
+    /** Primary metric value displayed prominently */
+    metric?: string | number;
+    /** Subtext below the metric (e.g. "18 active · 4 drafts") */
+    subtext?: string;
+    /** Show alert indicator */
+    alert?: boolean;
+}
+interface HubPageProps {
+    widgets: HubWidget[];
+}
+export declare function HubPage({ widgets }: HubPageProps): import("react").JSX.Element;
+export {};

package/dist/mobile/hub-page.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { AlertTriangle, ChevronRight } from "lucide-react";
+function HubPage({ widgets }) {
+  const heroIndex = widgets.findIndex((w) => w.size === "large");
+  const hero = heroIndex >= 0 ? widgets[heroIndex] : null;
+  const rest = widgets.filter((_, i) => i !== heroIndex);
+  const pairs = [];
+  let row = [];
+  for (const widget of rest) {
+    if (widget.size === "large") {
+      if (row.length > 0) {
+        pairs.push(row);
+        row = [];
+      }
+      pairs.push([widget]);
+    } else {
+      row.push(widget);
+      if (row.length === 2) {
+        pairs.push(row);
+        row = [];
+      }
+    }
+  }
+  if (row.length > 0) pairs.push(row);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3.5", children: [
+    hero && /* @__PURE__ */ jsx(WidgetCard, { widget: hero }),
+    pairs.map((pair, i) => {
+      if (pair.length === 1 && pair[0].size === "large") {
+        return /* @__PURE__ */ jsx(WidgetCard, { widget: pair[0] }, pair[0].id);
+      }
+      return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: pair.map((widget) => /* @__PURE__ */ jsx(WidgetCard, { widget }, widget.id)) }, i);
+    })
+  ] });
+}
+function WidgetCard({ widget }) {
+  const Icon = widget.icon;
+  const isLarge = widget.size === "large";
+  const hasMetric = widget.metric != null;
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: widget.href,
+      className: `group block rounded-ios-lg border-[0.5px] border-[var(--border-default)] bg-[linear-gradient(140deg,var(--bg-muted)_0%,var(--bg-subtle)_100%)] transition duration-[var(--motion-normal)] ease-out active:scale-[0.985] ${isLarge ? "p-4 min-h-[146px]" : "p-3.5 min-h-[124px]"}`,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-ios-sm border border-[var(--border-default)] bg-[var(--bg-base)]", children: /* @__PURE__ */ jsx(Icon, { className: "h-[18px] w-[18px] text-[var(--text-secondary)]" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pt-0.5", children: [
+            widget.alert && /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 text-[var(--warning)]" }),
+            /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[var(--text-muted)] transition-transform duration-[var(--motion-normal)] ease-out group-hover:translate-x-0.5" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: isLarge ? "mt-4" : "mt-3", children: [
+          hasMetric && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `font-semibold leading-none tabular-nums text-[var(--text-primary)] ${isLarge ? "text-4xl" : "text-2xl"}`,
+              children: widget.metric
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `mt-2 font-medium text-[var(--text-primary)] ${isLarge ? "text-lg" : "text-sm"}`,
+              children: widget.label
+            }
+          ),
+          widget.subtext && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `mt-1 text-[var(--text-tertiary)] ${isLarge ? "text-sm" : "text-xs"}`,
+              children: widget.subtext
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  HubPage
+};
+//# sourceMappingURL=hub-page.js.map

package/dist/mobile/hub-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/hub-page.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport type { LucideIcon } from 'lucide-react';\nimport { AlertTriangle, ChevronRight } from 'lucide-react';\n\nexport interface HubWidget {\n  id: string;\n  label: string;\n  icon: LucideIcon;\n  href: string;\n  /** 'large' = full width hero card, 'small' = half width (default) */\n  size?: 'large' | 'small';\n  /** Primary metric value displayed prominently */\n  metric?: string | number;\n  /** Subtext below the metric (e.g. \"18 active · 4 drafts\") */\n  subtext?: string;\n  /** Show alert indicator */\n  alert?: boolean;\n}\n\ninterface HubPageProps {\n  widgets: HubWidget[];\n}\n\nexport function HubPage({ widgets }: HubPageProps) {\n  const heroIndex = widgets.findIndex((w) => w.size === 'large');\n  const hero = heroIndex >= 0 ? widgets[heroIndex] : null;\n  const rest = widgets.filter((_, i) => i !== heroIndex);\n\n  const pairs: HubWidget[][] = [];\n  let row: HubWidget[] = [];\n  for (const widget of rest) {\n    if (widget.size === 'large') {\n      if (row.length > 0) {\n        pairs.push(row);\n        row = [];\n      }\n      pairs.push([widget]);\n    } else {\n      row.push(widget);\n      if (row.length === 2) {\n        pairs.push(row);\n        row = [];\n      }\n    }\n  }\n  if (row.length > 0) pairs.push(row);\n\n  return (\n    <div className=\"space-y-3.5\">\n      {hero && <WidgetCard widget={hero} />}\n\n      {pairs.map((pair, i) => {\n        if (pair.length === 1 && pair[0].size === 'large') {\n          return <WidgetCard key={pair[0].id} widget={pair[0]} />;\n        }\n        return (\n          <div key={i} className=\"grid grid-cols-2 gap-3\">\n            {pair.map((widget) => (\n              <WidgetCard key={widget.id} widget={widget} />\n            ))}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction WidgetCard({ widget }: { widget: HubWidget }) {\n  const Icon = widget.icon;\n  const isLarge = widget.size === 'large';\n  const hasMetric = widget.metric != null;\n\n  return (\n    <Link\n      href={widget.href}\n      className={`group block rounded-ios-lg border-[0.5px] border-[var(--border-default)] bg-[linear-gradient(140deg,var(--bg-muted)_0%,var(--bg-subtle)_100%)] transition duration-[var(--motion-normal)] ease-out active:scale-[0.985] ${\n        isLarge ? 'p-4 min-h-[146px]' : 'p-3.5 min-h-[124px]'\n      }`}\n    >\n      <div className=\"flex h-full flex-col justify-between\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-ios-sm border border-[var(--border-default)] bg-[var(--bg-base)]\">\n            <Icon className=\"h-[18px] w-[18px] text-[var(--text-secondary)]\" />\n          </div>\n          <div className=\"flex items-center gap-1.5 pt-0.5\">\n            {widget.alert && (\n              <AlertTriangle className=\"size-4 text-[var(--warning)]\" />\n            )}\n            <ChevronRight className=\"size-4 text-[var(--text-muted)] transition-transform duration-[var(--motion-normal)] ease-out group-hover:translate-x-0.5\" />\n          </div>\n        </div>\n\n        <div className={isLarge ? 'mt-4' : 'mt-3'}>\n          {hasMetric && (\n            <p\n              className={`font-semibold leading-none tabular-nums text-[var(--text-primary)] ${isLarge ? 'text-4xl' : 'text-2xl'}`}\n            >\n              {widget.metric}\n            </p>\n          )}\n          <p\n            className={`mt-2 font-medium text-[var(--text-primary)] ${isLarge ? 'text-lg' : 'text-sm'}`}\n          >\n            {widget.label}\n          </p>\n          {widget.subtext && (\n            <p\n              className={`mt-1 text-[var(--text-tertiary)] ${isLarge ? 'text-sm' : 'text-xs'}`}\n            >\n              {widget.subtext}\n            </p>\n          )}\n        </div>\n      </div>\n    </Link>\n  );\n}\n"],"mappings":";AAkDI,SACW,KADX;AAhDJ,OAAO,UAAU;AAEjB,SAAS,eAAe,oBAAoB;AAqBrC,SAAS,QAAQ,EAAE,QAAQ,GAAiB;AACjD,QAAM,YAAY,QAAQ,UAAU,CAAC,MAAM,EAAE,SAAS,OAAO;AAC7D,QAAM,OAAO,aAAa,IAAI,QAAQ,SAAS,IAAI;AACnD,QAAM,OAAO,QAAQ,OAAO,CAAC,GAAG,MAAM,MAAM,SAAS;AAErD,QAAM,QAAuB,CAAC;AAC9B,MAAI,MAAmB,CAAC;AACxB,aAAW,UAAU,MAAM;AACzB,QAAI,OAAO,SAAS,SAAS;AAC3B,UAAI,IAAI,SAAS,GAAG;AAClB,cAAM,KAAK,GAAG;AACd,cAAM,CAAC;AAAA,MACT;AACA,YAAM,KAAK,CAAC,MAAM,CAAC;AAAA,IACrB,OAAO;AACL,UAAI,KAAK,MAAM;AACf,UAAI,IAAI,WAAW,GAAG;AACpB,cAAM,KAAK,GAAG;AACd,cAAM,CAAC;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,MAAI,IAAI,SAAS,EAAG,OAAM,KAAK,GAAG;AAElC,SACE,qBAAC,SAAI,WAAU,eACZ;AAAA,YAAQ,oBAAC,cAAW,QAAQ,MAAM;AAAA,IAElC,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAI,KAAK,WAAW,KAAK,KAAK,CAAC,EAAE,SAAS,SAAS;AACjD,eAAO,oBAAC,cAA4B,QAAQ,KAAK,CAAC,KAA1B,KAAK,CAAC,EAAE,EAAqB;AAAA,MACvD;AACA,aACE,oBAAC,SAAY,WAAU,0BACpB,eAAK,IAAI,CAAC,WACT,oBAAC,cAA2B,UAAX,OAAO,EAAoB,CAC7C,KAHO,CAIV;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;AAEA,SAAS,WAAW,EAAE,OAAO,GAA0B;AACrD,QAAM,OAAO,OAAO;AACpB,QAAM,UAAU,OAAO,SAAS;AAChC,QAAM,YAAY,OAAO,UAAU;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,OAAO;AAAA,MACb,WAAW,2NACT,UAAU,sBAAsB,qBAClC;AAAA,MAEA,+BAAC,SAAI,WAAU,wCACb;AAAA,6BAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,SAAI,WAAU,qIACb,8BAAC,QAAK,WAAU,kDAAiD,GACnE;AAAA,UACA,qBAAC,SAAI,WAAU,oCACZ;AAAA,mBAAO,SACN,oBAAC,iBAAc,WAAU,gCAA+B;AAAA,YAE1D,oBAAC,gBAAa,WAAU,6HAA4H;AAAA,aACtJ;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAW,UAAU,SAAS,QAChC;AAAA,uBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,sEAAsE,UAAU,aAAa,UAAU;AAAA,cAEjH,iBAAO;AAAA;AAAA,UACV;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,+CAA+C,UAAU,YAAY,SAAS;AAAA,cAExF,iBAAO;AAAA;AAAA,UACV;AAAA,UACC,OAAO,WACN;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,oCAAoC,UAAU,YAAY,SAAS;AAAA,cAE7E,iBAAO;AAAA;AAAA,UACV;AAAA,WAEJ;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/mobile/ios-grouped-list.d.ts

@@ -0,0 +1,23 @@
+import { type LucideIcon } from 'lucide-react';
+interface IOSGroupedListProps {
+    header?: string;
+    footer?: string;
+    children: React.ReactNode;
+}
+/**
+ * iOS-style grouped list with inset separators, rounded container,
+ * and optional section header/footer.
+ */
+export declare function IOSGroupedList({ header, footer, children, }: IOSGroupedListProps): import("react").JSX.Element;
+interface IOSListItemProps {
+    icon?: LucideIcon | React.ReactNode;
+    iconBg?: string;
+    label: string;
+    detail?: string;
+    disclosure?: boolean;
+    href?: string;
+    onClick?: () => void;
+    destructive?: boolean;
+}
+export declare function IOSListItem({ icon, iconBg, label, detail, disclosure, href, onClick, destructive, }: IOSListItemProps): import("react").JSX.Element;
+export {};