@withpotter/components 0.13.0-next.101

package/dist/mobile/workspace-switcher-sheet.js

@@ -0,0 +1,249 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { Check, History, Plus } from "lucide-react";
+import Link from "next/link";
+import { AnimatePresence, motion } from "motion/react";
+import { businessCategoryLabel } from "@withpotter/lib/business-categories";
+import { generatedAvatarUri } from "@withpotter/ui-kit/generated-avatar";
+import { PRESS_SCALE, springs } from "@withpotter/lib/motion";
+import { dropdownMotion } from "@withpotter/ui-kit/dropdown-motion";
+function WorkspaceSwitcherSheet({
+  open,
+  workspaces,
+  currentTenantId,
+  onDismiss,
+  onSwitch,
+  onHistory
+}) {
+  const popoverRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (event.target instanceof Element && event.target.closest("[data-workspace-switcher-trigger]")) {
+        return;
+      }
+      if (!popoverRef.current?.contains(event.target)) onDismiss();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onDismiss();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onDismiss, open]);
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+    typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          "aria-hidden": "true",
+          className: "fixed inset-x-0 bottom-0 z-40",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.18 },
+          onClick: onDismiss,
+          style: {
+            background: "color-mix(in srgb, var(--mb-app-ground) 10%, transparent)",
+            top: "calc(env(safe-area-inset-top) + var(--mb-app-bar-height))",
+            backdropFilter: "blur(3px) saturate(105%)",
+            WebkitBackdropFilter: "blur(3px) saturate(105%)"
+          }
+        }
+      ),
+      document.body
+    ) : null,
+    typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popoverRef,
+          className: "fixed left-1/2 z-[70] mt-2 w-[min(19rem,calc(100vw-2rem))] -translate-x-1/2",
+          style: {
+            top: "calc(env(safe-area-inset-top) + var(--mb-app-bar-height) - 16px)"
+          },
+          children: /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              role: "dialog",
+              "aria-label": "Switch business",
+              ...dropdownMotion,
+              style: {
+                transformOrigin: "top center",
+                background: "var(--mb-surface)",
+                borderColor: "var(--mb-border)",
+                color: "var(--mb-text)"
+              },
+              className: "max-h-[calc(100dvh-5rem)] overflow-y-auto rounded-2xl border p-2 shadow-xl",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                  workspaces.map((ws) => {
+                    const isCurrent = ws.tenant.id === currentTenantId;
+                    const initial = ws.tenant.businessName?.[0]?.toUpperCase() ?? "W";
+                    const subtitle = businessCategoryLabel(ws.tenant) || (ws.role === "owner" ? "Owner" : ws.role);
+                    return /* @__PURE__ */ jsxs(
+                      motion.button,
+                      {
+                        type: "button",
+                        whileTap: { scale: PRESS_SCALE },
+                        transition: springs.snappy,
+                        className: "relative flex min-h-24 flex-col items-start rounded-xl border p-2.5 text-left",
+                        style: {
+                          borderColor: isCurrent ? "var(--mb-accent)" : "var(--mb-border)",
+                          background: "var(--mb-card)"
+                        },
+                        onClick: () => {
+                          if (!isCurrent) onSwitch(ws.tenant.slug);
+                          else onDismiss();
+                        },
+                        children: [
+                          isCurrent && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "absolute right-2 top-2 rounded-full px-2 py-0.5 text-2xs font-semibold",
+                              style: {
+                                background: "color-mix(in srgb, var(--mb-accent) 16%, transparent)",
+                                color: "var(--mb-accent)"
+                              },
+                              children: "Current"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("span", { className: "relative mb-2 grid size-8 shrink-0 place-items-center overflow-hidden rounded-lg text-sm font-semibold", children: ws.tenant.businessLogo ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            /* @__PURE__ */ jsx(
+                              "img",
+                              {
+                                src: ws.tenant.businessLogo,
+                                alt: "",
+                                className: "size-full object-cover"
+                              }
+                            )
+                          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              "img",
+                              {
+                                src: generatedAvatarUri(
+                                  ws.tenant.businessName || "workspace"
+                                ),
+                                alt: "",
+                                className: "size-full object-cover"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { className: "absolute grid size-8 place-items-center text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.4)]", children: initial })
+                          ] }) }),
+                          /* @__PURE__ */ jsxs("span", { className: "min-w-0 w-full", children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "block w-full truncate text-sm font-semibold",
+                                style: { color: "var(--mb-text)" },
+                                children: ws.tenant.businessName || "Untitled business"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "mt-0.5 block w-full truncate text-2xs",
+                                style: { color: "var(--mb-text-tertiary)" },
+                                children: subtitle
+                              }
+                            )
+                          ] }),
+                          isCurrent && /* @__PURE__ */ jsx(
+                            Check,
+                            {
+                              className: "absolute bottom-2 right-2 size-4",
+                              style: { color: "var(--mb-accent)" }
+                            }
+                          )
+                        ]
+                      },
+                      ws.tenant.id
+                    );
+                  }),
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      whileTap: { scale: PRESS_SCALE },
+                      transition: springs.snappy,
+                      children: /* @__PURE__ */ jsxs(
+                        Link,
+                        {
+                          href: "/dashboard/workspaces/new",
+                          onClick: onDismiss,
+                          className: "flex min-h-24 flex-col items-start rounded-xl border border-dashed p-2.5 text-left",
+                          style: {
+                            borderColor: "var(--mb-border)",
+                            background: "var(--mb-card)"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "mb-2 grid size-8 shrink-0 place-items-center rounded-lg border border-dashed",
+                                style: {
+                                  borderColor: "var(--mb-border)",
+                                  color: "var(--mb-text-tertiary)"
+                                },
+                                children: /* @__PURE__ */ jsx(Plus, { className: "size-5" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "text-sm font-semibold",
+                                style: { color: "var(--mb-text)" },
+                                children: "Create a new business"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                onHistory && /* @__PURE__ */ jsxs(
+                  motion.button,
+                  {
+                    type: "button",
+                    whileTap: { scale: PRESS_SCALE },
+                    transition: springs.snappy,
+                    className: "mt-2 flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-card)"
+                    },
+                    onClick: () => {
+                      onDismiss();
+                      onHistory();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        History,
+                        {
+                          className: "size-4",
+                          style: { color: "var(--mb-text)" }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "History" })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    ) : null
+  ] }) });
+}
+export {
+  WorkspaceSwitcherSheet
+};
+//# sourceMappingURL=workspace-switcher-sheet.js.map

package/dist/mobile/workspace-switcher-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/workspace-switcher-sheet.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Check, History, Plus } from 'lucide-react';\nimport Link from 'next/link';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { businessCategoryLabel } from '@withpotter/lib/business-categories';\nimport { generatedAvatarUri } from '@withpotter/ui-kit/generated-avatar';\nimport type { Workspace } from '@withpotter/lib/auth-context';\nimport { PRESS_SCALE, springs } from '@withpotter/lib/motion';\nimport { dropdownMotion } from '@withpotter/ui-kit/dropdown-motion';\n\ninterface WorkspaceSwitcherSheetProps {\n  open: boolean;\n  workspaces: Workspace[];\n  currentTenantId?: string;\n  onDismiss: () => void;\n  onSwitch: (slug: string) => void;\n  onHistory?: () => void;\n}\n\n/**\n * Anchored business popover that lists all workspaces and lets them switch\n * without taking over the whole screen.\n */\nexport function WorkspaceSwitcherSheet({\n  open,\n  workspaces,\n  currentTenantId,\n  onDismiss,\n  onSwitch,\n  onHistory,\n}: WorkspaceSwitcherSheetProps) {\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (\n        event.target instanceof Element &&\n        event.target.closest('[data-workspace-switcher-trigger]')\n      ) {\n        return;\n      }\n      if (!popoverRef.current?.contains(event.target as Node)) onDismiss();\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') onDismiss();\n    };\n    document.addEventListener('pointerdown', onPointerDown);\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown);\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onDismiss, open]);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <>\n          {typeof document !== 'undefined'\n            ? createPortal(\n                <motion.div\n                  aria-hidden=\"true\"\n                  className=\"fixed inset-x-0 bottom-0 z-40\"\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  transition={{ duration: 0.18 }}\n                  onClick={onDismiss}\n                  style={{\n                    background:\n                      'color-mix(in srgb, var(--mb-app-ground) 10%, transparent)',\n                    top: 'calc(env(safe-area-inset-top) + var(--mb-app-bar-height))',\n                    backdropFilter: 'blur(3px) saturate(105%)',\n                    WebkitBackdropFilter: 'blur(3px) saturate(105%)',\n                  }}\n                />,\n                document.body,\n              )\n            : null}\n          {typeof document !== 'undefined'\n            ? createPortal(\n                <div\n                  ref={popoverRef}\n                  className=\"fixed left-1/2 z-[70] mt-2 w-[min(19rem,calc(100vw-2rem))] -translate-x-1/2\"\n                  style={{\n                    top: 'calc(env(safe-area-inset-top) + var(--mb-app-bar-height) - 16px)',\n                  }}\n                >\n                  <motion.div\n                    role=\"dialog\"\n                    aria-label=\"Switch business\"\n                    {...dropdownMotion}\n                    style={{\n                      transformOrigin: 'top center',\n                      background: 'var(--mb-surface)',\n                      borderColor: 'var(--mb-border)',\n                      color: 'var(--mb-text)',\n                    }}\n                    className=\"max-h-[calc(100dvh-5rem)] overflow-y-auto rounded-2xl border p-2 shadow-xl\"\n                  >\n                    <div className=\"grid grid-cols-2 gap-2\">\n                      {workspaces.map((ws) => {\n                        const isCurrent = ws.tenant.id === currentTenantId;\n                        const initial =\n                          ws.tenant.businessName?.[0]?.toUpperCase() ?? 'W';\n                        const subtitle =\n                          businessCategoryLabel(ws.tenant) ||\n                          (ws.role === 'owner' ? 'Owner' : ws.role);\n                        return (\n                          <motion.button\n                            key={ws.tenant.id}\n                            type=\"button\"\n                            whileTap={{ scale: PRESS_SCALE }}\n                            transition={springs.snappy}\n                            className=\"relative flex min-h-24 flex-col items-start rounded-xl border p-2.5 text-left\"\n                            style={{\n                              borderColor: isCurrent\n                                ? 'var(--mb-accent)'\n                                : 'var(--mb-border)',\n                              background: 'var(--mb-card)',\n                            }}\n                            onClick={() => {\n                              if (!isCurrent) onSwitch(ws.tenant.slug);\n                              else onDismiss();\n                            }}\n                          >\n                            {isCurrent && (\n                              <span\n                                className=\"absolute right-2 top-2 rounded-full px-2 py-0.5 text-2xs font-semibold\"\n                                style={{\n                                  background:\n                                    'color-mix(in srgb, var(--mb-accent) 16%, transparent)',\n                                  color: 'var(--mb-accent)',\n                                }}\n                              >\n                                Current\n                              </span>\n                            )}\n                            <span className=\"relative mb-2 grid size-8 shrink-0 place-items-center overflow-hidden rounded-lg text-sm font-semibold\">\n                              {ws.tenant.businessLogo ? (\n                                // eslint-disable-next-line @next/next/no-img-element\n                                <img\n                                  src={ws.tenant.businessLogo}\n                                  alt=\"\"\n                                  className=\"size-full object-cover\"\n                                />\n                              ) : (\n                                <>\n                                  {/* eslint-disable-next-line @next/next/no-img-element */}\n                                  <img\n                                    src={generatedAvatarUri(\n                                      ws.tenant.businessName || 'workspace',\n                                    )}\n                                    alt=\"\"\n                                    className=\"size-full object-cover\"\n                                  />\n                                  <span className=\"absolute grid size-8 place-items-center text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.4)]\">\n                                    {initial}\n                                  </span>\n                                </>\n                              )}\n                            </span>\n                            <span className=\"min-w-0 w-full\">\n                              <span\n                                className=\"block w-full truncate text-sm font-semibold\"\n                                style={{ color: 'var(--mb-text)' }}\n                              >\n                                {ws.tenant.businessName || 'Untitled business'}\n                              </span>\n                              <span\n                                className=\"mt-0.5 block w-full truncate text-2xs\"\n                                style={{ color: 'var(--mb-text-tertiary)' }}\n                              >\n                                {subtitle}\n                              </span>\n                            </span>\n                            {isCurrent && (\n                              <Check\n                                className=\"absolute bottom-2 right-2 size-4\"\n                                style={{ color: 'var(--mb-accent)' }}\n                              />\n                            )}\n                          </motion.button>\n                        );\n                      })}\n                      <motion.div\n                        whileTap={{ scale: PRESS_SCALE }}\n                        transition={springs.snappy}\n                      >\n                        <Link\n                          href=\"/dashboard/workspaces/new\"\n                          onClick={onDismiss}\n                          className=\"flex min-h-24 flex-col items-start rounded-xl border border-dashed p-2.5 text-left\"\n                          style={{\n                            borderColor: 'var(--mb-border)',\n                            background: 'var(--mb-card)',\n                          }}\n                        >\n                          <span\n                            className=\"mb-2 grid size-8 shrink-0 place-items-center rounded-lg border border-dashed\"\n                            style={{\n                              borderColor: 'var(--mb-border)',\n                              color: 'var(--mb-text-tertiary)',\n                            }}\n                          >\n                            <Plus className=\"size-5\" />\n                          </span>\n                          <span\n                            className=\"text-sm font-semibold\"\n                            style={{ color: 'var(--mb-text)' }}\n                          >\n                            Create a new business\n                          </span>\n                        </Link>\n                      </motion.div>\n                    </div>\n                    {onHistory && (\n                      <motion.button\n                        type=\"button\"\n                        whileTap={{ scale: PRESS_SCALE }}\n                        transition={springs.snappy}\n                        className=\"mt-2 flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left\"\n                        style={{\n                          borderColor: 'var(--mb-border)',\n                          background: 'var(--mb-card)',\n                        }}\n                        onClick={() => {\n                          onDismiss();\n                          onHistory();\n                        }}\n                      >\n                        <History\n                          className=\"size-4\"\n                          style={{ color: 'var(--mb-text)' }}\n                        />\n                        <span className=\"text-sm font-semibold\">History</span>\n                      </motion.button>\n                    )}\n                  </motion.div>\n                </div>,\n                document.body,\n              )\n            : null}\n        </>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/motion/index.d.ts

@@ -0,0 +1 @@
+export { Pressable, Lift, Reveal, Stagger, StaggerItem } from './primitives';

package/dist/motion/index.js

@@ -0,0 +1,9 @@
+import { Pressable, Lift, Reveal, Stagger, StaggerItem } from "./primitives";
+export {
+  Lift,
+  Pressable,
+  Reveal,
+  Stagger,
+  StaggerItem
+};
+//# sourceMappingURL=index.js.map

package/dist/motion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/motion/index.ts"],"sourcesContent":["export { Pressable, Lift, Reveal, Stagger, StaggerItem } from './primitives';\n"],"mappings":"AAAA,SAAS,WAAW,MAAM,QAAQ,SAAS,mBAAmB;","names":[]}

package/dist/motion/primitives.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLMotionProps } from 'motion/react';
+import type { ReactNode } from 'react';
+/**
+ * Interaction primitives — the molecules that turn the motion tokens into
+ * product-wide behaviour. Every primitive honours prefers-reduced-motion by
+ * rendering a plain element. Build interactions from these, not per-component
+ * whileTap/whileHover, so the whole product moves the same way.
+ */
+type PressableProps = HTMLMotionProps<'button'> & {
+    /** Press scale. Defaults to the app press scale (0.985). */
+    pressScale?: number;
+};
+export declare function Pressable({ pressScale, children, type, ...props }: PressableProps): import("react").JSX.Element;
+export declare function Lift({ children, className, y, ...props }: HTMLMotionProps<'div'> & {
+    y?: number;
+}): import("react").JSX.Element;
+export declare function Reveal({ children, className, delay, y, }: {
+    children: ReactNode;
+    className?: string;
+    delay?: number;
+    y?: number;
+}): import("react").JSX.Element;
+export declare function Stagger({ children, className, gap, }: {
+    children: ReactNode;
+    className?: string;
+    gap?: number;
+}): import("react").JSX.Element;
+export declare function StaggerItem({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/motion/primitives.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import { springs, revealVariants, PRESS_SCALE } from "@withpotter/lib/motion";
+function Pressable({
+  pressScale = PRESS_SCALE,
+  children,
+  // Same trap Button carried: a <button> with no type is type="submit", so a
+  // pressable row inside a form submitted it. Declared here so forgetting is
+  // not a bug.
+  type = "button",
+  ...props
+}) {
+  const reduce = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      whileTap: reduce ? void 0 : { scale: pressScale },
+      transition: springs.snappy,
+      type,
+      ...props,
+      children
+    }
+  );
+}
+function Lift({
+  children,
+  className,
+  y = -2,
+  ...props
+}) {
+  const reduce = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      whileHover: reduce ? void 0 : { y },
+      transition: springs.snappy,
+      className,
+      ...props,
+      children
+    }
+  );
+}
+function Reveal({
+  children,
+  className,
+  delay = 0,
+  y = 14
+}) {
+  const reduce = useReducedMotion();
+  if (reduce) return /* @__PURE__ */ jsx("div", { className, children });
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className,
+      initial: { opacity: 0, y },
+      animate: { opacity: 1, y: 0 },
+      transition: { ...springs.gentle, delay },
+      children
+    }
+  );
+}
+function Stagger({
+  children,
+  className,
+  gap = 0.05
+}) {
+  const reduce = useReducedMotion();
+  if (reduce) return /* @__PURE__ */ jsx("div", { className, children });
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className,
+      initial: "hidden",
+      animate: "shown",
+      variants: { shown: { transition: { staggerChildren: gap } } },
+      children
+    }
+  );
+}
+function StaggerItem({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className,
+      variants: revealVariants,
+      transition: springs.gentle,
+      children
+    }
+  );
+}
+export {
+  Lift,
+  Pressable,
+  Reveal,
+  Stagger,
+  StaggerItem
+};
+//# sourceMappingURL=primitives.js.map

package/dist/motion/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/motion/primitives.tsx"],"sourcesContent":["'use client';\n\nimport { motion, useReducedMotion, type HTMLMotionProps } from 'motion/react';\nimport type { ReactNode } from 'react';\nimport { springs, revealVariants, PRESS_SCALE } from '@withpotter/lib/motion';\n\n/**\n * Interaction primitives — the molecules that turn the motion tokens into\n * product-wide behaviour. Every primitive honours prefers-reduced-motion by\n * rendering a plain element. Build interactions from these, not per-component\n * whileTap/whileHover, so the whole product moves the same way.\n */\n\n// ── Pressable ─────────────────────────────────────────────────────────\n// Consistent press feedback for anything tappable. Defaults to a <button>.\ntype PressableProps = HTMLMotionProps<'button'> & {\n  /** Press scale. Defaults to the app press scale (0.985). */\n  pressScale?: number;\n};\n\nexport function Pressable({\n  pressScale = PRESS_SCALE,\n  children,\n  // Same trap Button carried: a <button> with no type is type=\"submit\", so a\n  // pressable row inside a form submitted it. Declared here so forgetting is\n  // not a bug.\n  type = 'button',\n  ...props\n}: PressableProps) {\n  const reduce = useReducedMotion();\n  return (\n    <motion.button\n      whileTap={reduce ? undefined : { scale: pressScale }}\n      transition={springs.snappy}\n      type={type}\n      {...props}\n    >\n      {children}\n    </motion.button>\n  );\n}\n\n// ── Lift ──────────────────────────────────────────────────────────────\n// Hover-as-preview: a card rises slightly on hover, hinting it's interactive.\nexport function Lift({\n  children,\n  className,\n  y = -2,\n  ...props\n}: HTMLMotionProps<'div'> & { y?: number }) {\n  const reduce = useReducedMotion();\n  return (\n    <motion.div\n      whileHover={reduce ? undefined : { y }}\n      transition={springs.snappy}\n      className={className}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\n// ── Reveal ────────────────────────────────────────────────────────────\n// Content arrives with a soft rise. Use once, on mount, for a section entrance.\nexport function Reveal({\n  children,\n  className,\n  delay = 0,\n  y = 14,\n}: {\n  children: ReactNode;\n  className?: string;\n  delay?: number;\n  y?: number;\n}) {\n  const reduce = useReducedMotion();\n  if (reduce) return <div className={className}>{children}</div>;\n  return (\n    <motion.div\n      className={className}\n      initial={{ opacity: 0, y }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ ...springs.gentle, delay }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\n// ── Stagger ───────────────────────────────────────────────────────────\n// A list whose children reveal one after another. Wrap items in StaggerItem.\nexport function Stagger({\n  children,\n  className,\n  gap = 0.05,\n}: {\n  children: ReactNode;\n  className?: string;\n  gap?: number;\n}) {\n  const reduce = useReducedMotion();\n  if (reduce) return <div className={className}>{children}</div>;\n  return (\n    <motion.div\n      className={className}\n      initial=\"hidden\"\n      animate=\"shown\"\n      variants={{ shown: { transition: { staggerChildren: gap } } }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nexport function StaggerItem({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <motion.div\n      className={className}\n      variants={revealVariants}\n      transition={springs.gentle}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"],"mappings":";AA+BI;AA7BJ,SAAS,QAAQ,wBAA8C;AAE/D,SAAS,SAAS,gBAAgB,mBAAmB;AAgB9C,SAAS,UAAU;AAAA,EACxB,aAAa;AAAA,EACb;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO;AAAA,EACP,GAAG;AACL,GAAmB;AACjB,QAAM,SAAS,iBAAiB;AAChC,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,UAAU,SAAS,SAAY,EAAE,OAAO,WAAW;AAAA,MACnD,YAAY,QAAQ;AAAA,MACpB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAIO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,GAAG;AACL,GAA4C;AAC1C,QAAM,SAAS,iBAAiB;AAChC,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,YAAY,SAAS,SAAY,EAAE,EAAE;AAAA,MACrC,YAAY,QAAQ;AAAA,MACpB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAIO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,IAAI;AACN,GAKG;AACD,QAAM,SAAS,iBAAiB;AAChC,MAAI,OAAQ,QAAO,oBAAC,SAAI,WAAuB,UAAS;AACxD,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,SAAS,EAAE,SAAS,GAAG,EAAE;AAAA,MACzB,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,YAAY,EAAE,GAAG,QAAQ,QAAQ,MAAM;AAAA,MAEtC;AAAA;AAAA,EACH;AAEJ;AAIO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,MAAM;AACR,GAIG;AACD,QAAM,SAAS,iBAAiB;AAChC,MAAI,OAAQ,QAAO,oBAAC,SAAI,WAAuB,UAAS;AACxD,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,iBAAiB,IAAI,EAAE,EAAE;AAAA,MAE3D;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,YAAY,QAAQ;AAAA,MAEnB;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/motion.d.ts

@@ -0,0 +1 @@
+export * from './motion/index';

package/dist/motion.js

@@ -0,0 +1 @@
+export * from './motion/index.js';

package/dist/my-access-card.d.ts

@@ -0,0 +1,17 @@
+/**
+ * What this person can reach, on their own account page.
+ *
+ * The accept screen tells someone exactly what their role covers, and then it
+ * is gone forever. There has been no screen where a staff member can ask "what
+ * am I allowed to do here?" a week later — so the answer to that question was
+ * "try it and see what is missing", which is how somebody discovers a boundary
+ * by hitting it in front of a customer.
+ *
+ * Same two columns as the invite, deliberately. Someone who read them once when
+ * they joined should meet the same shape again rather than a second vocabulary
+ * for the same facts.
+ *
+ * Hidden from owners. "You can reach everything" is not information, and a card
+ * about the limits of your access is noise to the person who set them.
+ */
+export declare function MyAccessCard(): import("react").JSX.Element | null;

package/dist/my-access-card.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import { describeInvite } from "@withpotter/lib/describe-invite";
+import { SettingsCard } from "@withpotter/pages-core/dashboard/settings/_components";
+function MyAccessCard() {
+  const { tenant } = useAuth();
+  const { permissions, isOwner, loading, role } = usePermissions();
+  if (loading || isOwner) return null;
+  const { allowed, withheld } = describeInvite(permissions);
+  const where = tenant?.businessName ?? "this business";
+  const who = tenant?.ownerName ?? `whoever runs ${where}`;
+  return /* @__PURE__ */ jsxs(SettingsCard, { title: "What you can do here", children: [
+    /* @__PURE__ */ jsxs("p", { className: "mb-4 text-sm text-[var(--text-tertiary)]", children: [
+      "Your access at ",
+      where,
+      role ? `, as ${role}` : "",
+      ". Ask ",
+      who,
+      " if you need more."
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-6 text-left", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-2xs font-medium uppercase tracking-wide text-[var(--text-tertiary)]", children: "You can reach" }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-sm text-[var(--text-secondary)]", children: allowed.length > 0 ? allowed.map((label) => /* @__PURE__ */ jsx("li", { children: label }, label)) : /* @__PURE__ */ jsx("li", { className: "text-[var(--text-tertiary)]", children: "Nothing yet \u2014 ask for access" }) })
+      ] }),
+      withheld.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-2xs font-medium uppercase tracking-wide text-[var(--text-tertiary)]", children: "You can't" }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-sm text-[var(--text-tertiary)]", children: withheld.map((label) => /* @__PURE__ */ jsx("li", { children: label }, label)) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  MyAccessCard
+};
+//# sourceMappingURL=my-access-card.js.map

package/dist/my-access-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/my-access-card.tsx"],"sourcesContent":["'use client';\n\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport { describeInvite } from '@withpotter/lib/describe-invite';\nimport { SettingsCard } from '@withpotter/pages-core/dashboard/settings/_components';\n\n/**\n * What this person can reach, on their own account page.\n *\n * The accept screen tells someone exactly what their role covers, and then it\n * is gone forever. There has been no screen where a staff member can ask \"what\n * am I allowed to do here?\" a week later — so the answer to that question was\n * \"try it and see what is missing\", which is how somebody discovers a boundary\n * by hitting it in front of a customer.\n *\n * Same two columns as the invite, deliberately. Someone who read them once when\n * they joined should meet the same shape again rather than a second vocabulary\n * for the same facts.\n *\n * Hidden from owners. \"You can reach everything\" is not information, and a card\n * about the limits of your access is noise to the person who set them.\n */\nexport function MyAccessCard() {\n  const { tenant } = useAuth();\n  const { permissions, isOwner, loading, role } = usePermissions();\n\n  if (loading || isOwner) return null;\n\n  const { allowed, withheld } = describeInvite(permissions);\n  const where = tenant?.businessName ?? 'this business';\n  // Names a person since api#416. Falls back rather than rendering an empty\n  // sentence when the owner row carries no resolvable name.\n  const who = tenant?.ownerName ?? `whoever runs ${where}`;\n\n  return (\n    <SettingsCard title=\"What you can do here\">\n      <p className=\"mb-4 text-sm text-[var(--text-tertiary)]\">\n        Your access at {where}\n        {role ? `, as ${role}` : ''}. Ask {who} if you need more.\n      </p>\n\n      <div className=\"grid grid-cols-2 gap-6 text-left\">\n        <div>\n          <p className=\"mb-2 text-2xs font-medium uppercase tracking-wide text-[var(--text-tertiary)]\">\n            You can reach\n          </p>\n          <ul className=\"space-y-1 text-sm text-[var(--text-secondary)]\">\n            {allowed.length > 0 ? (\n              allowed.map((label) => <li key={label}>{label}</li>)\n            ) : (\n              <li className=\"text-[var(--text-tertiary)]\">\n                Nothing yet — ask for access\n              </li>\n            )}\n          </ul>\n        </div>\n        {withheld.length > 0 && (\n          <div>\n            <p className=\"mb-2 text-2xs font-medium uppercase tracking-wide text-[var(--text-tertiary)]\">\n              You can&apos;t\n            </p>\n            {/* The full list here, not the trimmed three the invite shows. On\n                the invite a long list of \"you cannot\" reads as a rejection\n                notice; on your own account page it is the reference you came\n                looking for. */}\n            <ul className=\"space-y-1 text-sm text-[var(--text-tertiary)]\">\n              {withheld.map((label) => (\n                <li key={label}>{label}</li>\n              ))}\n            </ul>\n          </div>\n        )}\n      </div>\n    </SettingsCard>\n  );\n}\n"],"mappings":";AAqCM,SAOI,KAPJ;AAnCN,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAkBtB,SAAS,eAAe;AAC7B,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,QAAM,EAAE,aAAa,SAAS,SAAS,KAAK,IAAI,eAAe;AAE/D,MAAI,WAAW,QAAS,QAAO;AAE/B,QAAM,EAAE,SAAS,SAAS,IAAI,eAAe,WAAW;AACxD,QAAM,QAAQ,QAAQ,gBAAgB;AAGtC,QAAM,MAAM,QAAQ,aAAa,gBAAgB,KAAK;AAEtD,SACE,qBAAC,gBAAa,OAAM,wBAClB;AAAA,yBAAC,OAAE,WAAU,4CAA2C;AAAA;AAAA,MACtC;AAAA,MACf,OAAO,QAAQ,IAAI,KAAK;AAAA,MAAG;AAAA,MAAO;AAAA,MAAI;AAAA,OACzC;AAAA,IAEA,qBAAC,SAAI,WAAU,oCACb;AAAA,2BAAC,SACC;AAAA,4BAAC,OAAE,WAAU,iFAAgF,2BAE7F;AAAA,QACA,oBAAC,QAAG,WAAU,kDACX,kBAAQ,SAAS,IAChB,QAAQ,IAAI,CAAC,UAAU,oBAAC,QAAgB,mBAAR,KAAc,CAAK,IAEnD,oBAAC,QAAG,WAAU,+BAA8B,+CAE5C,GAEJ;AAAA,SACF;AAAA,MACC,SAAS,SAAS,KACjB,qBAAC,SACC;AAAA,4BAAC,OAAE,WAAU,iFAAgF,uBAE7F;AAAA,QAKA,oBAAC,QAAG,WAAU,iDACX,mBAAS,IAAI,CAAC,UACb,oBAAC,QAAgB,mBAAR,KAAc,CACxB,GACH;AAAA,SACF;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/notification-drawer.d.ts

@@ -0,0 +1,16 @@
+import { Bell } from 'lucide-react';
+import { type Order } from '@withpotter/lib/api';
+type DrawerNotification = {
+    id: string;
+    orderId: string;
+    title: string;
+    detail: string;
+    occurredAt: string;
+    tone: 'success' | 'warning' | 'neutral';
+    icon: typeof Bell;
+};
+export declare function NotificationDrawer({ tenantSlug }: {
+    tenantSlug?: string;
+}): import("react").JSX.Element;
+export declare function toNotification(order: Order): DrawerNotification;
+export {};