@withpotter/components 0.13.0-next.101

package/dist/sidebar.js

@@ -0,0 +1,337 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { usePathname } from "@withpotter/lib/use-pathname";
+import { ProductSwitcher } from "./shell/product-switcher";
+import { Logo } from "@withpotter/ui-kit/logo";
+import "./shell/shell.css";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { useCapabilities } from "@withpotter/lib/capability-context";
+import { effectiveModuleLabels } from "@withpotter/lib/effective-module-labels";
+import { useCurrentTemplate } from "@withpotter/lib/template-context";
+import { SidebarFooter } from "@withpotter/components/shell/sidebar-footer";
+import { usePlatformModules } from "@withpotter/lib/use-platform-modules";
+import { resolveEnabledBehaviors } from "@withpotter/lib/resolve-enabled-behaviors";
+import { useIntentConfig } from "@withpotter/lib/intents/use-intent-config";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import { isSalesChannel } from "@withpotter/hooks/use-sales-channel";
+import {
+  intentKeySet
+} from "./sidebar/config";
+import {
+  isActive as isActiveFor,
+  resolveActiveHref
+} from "./sidebar/active-href";
+import { buildInboxRow } from "./sidebar/inbox-row";
+import { RailBody } from "./sidebar/rail-body";
+import { EditableRailBody } from "./sidebar/rail-editor";
+import { usableHidden } from "./sidebar/rail-edits";
+import { buildNavGroups } from "./sidebar/build-nav-groups";
+import { buildRailRows } from "./sidebar/rail-rows";
+import {
+  buildOrdersPaymentsHub,
+  findOrdersRow
+} from "./sidebar/orders-payments-hub";
+import { splitWorkRows } from "./sidebar/work-rows";
+import { buildMoreGroup } from "./sidebar/more-group";
+import { buildInventoryHub } from "./sidebar/inventory-hub";
+import { SidebarAsk } from "./shell/sidebar-ask";
+import { railContextFor } from "./sidebar/route-context";
+import { useNewNavRows } from "./sidebar/use-new-nav-rows";
+import { useResourceRows } from "./sidebar/use-resource-rows";
+import {
+  FIXED_GROUP_IDS,
+  flattenWorkGroups,
+  groupItems
+} from "./sidebar/flatten-work-groups";
+import { SettingsNav } from "./sidebar/settings-nav";
+import { createNavRenderers } from "./sidebar/nav-renderers";
+import { useNavBadges } from "./sidebar/use-nav-badges";
+import { useOpenHub } from "./sidebar/use-open-hub";
+function Sidebar({
+  collapsed = false,
+  onToggleCollapse
+}) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const [editing, setEditing] = useState(null);
+  const startEditing = useCallback((s) => setEditing(s), []);
+  const stopEditing = useCallback(() => setEditing(null), []);
+  const warm = useCallback(
+    (href) => {
+      if (!href || href.startsWith("http")) return;
+      router.prefetch(href);
+    },
+    [router]
+  );
+  const { tenant } = useAuth();
+  const { inSettings, isAccountContext, businessContext } = railContextFor(pathname);
+  if (editing && (collapsed || inSettings)) setEditing(null);
+  const settingsBack = () => router.push("/dashboard");
+  const { hubChoice, setHubOpen } = useOpenHub(pathname);
+  const { template, dashboardState } = useCurrentTemplate(tenant?.templateId);
+  const tenantSettings = tenant?.settings;
+  const moduleLabels = effectiveModuleLabels(tenantSettings);
+  const hiddenModules = tenantSettings?.hiddenModules;
+  const navHidden = useMemo(
+    () => editing ? void 0 : usableHidden(hiddenModules),
+    [editing, hiddenModules]
+  );
+  const salesChannel = isSalesChannel(tenantSettings?.salesChannel) ? tenantSettings.salesChannel : null;
+  const inPersonOnly = salesChannel === "in_person";
+  const enabledBehaviors = useMemo(
+    () => resolveEnabledBehaviors(tenantSettings, template),
+    [tenantSettings, template]
+  );
+  const { coreNavigation } = usePlatformModules({
+    template,
+    dashboardState,
+    enabledBehaviors,
+    hiddenModules: tenantSettings?.hiddenModules,
+    moduleLabels,
+    moduleOrder: tenantSettings?.moduleOrder
+  });
+  const intentConfig = useIntentConfig();
+  const { can, isOwner, loading: permissionsLoading } = usePermissions();
+  const capabilities = useCapabilities();
+  const currentIntent = intentConfig.mode === "multi" ? intentKeySet(searchParams.get("intent")) : null;
+  const location = {
+    pathname,
+    params: searchParams,
+    currentIntent
+  };
+  const isActive = (href) => isActiveFor(href, location);
+  const getGroupItems = groupItems;
+  const declaredGroups = useMemo(
+    () => buildNavGroups({
+      hiddenModules: navHidden,
+      moduleLabels,
+      enabledBehaviors,
+      inPersonOnly,
+      intentConfig,
+      coreNavigation,
+      template,
+      can,
+      isOwner,
+      permissionsLoading,
+      hasCapability: capabilities.has
+    }),
+    [
+      navHidden,
+      moduleLabels,
+      enabledBehaviors,
+      inPersonOnly,
+      intentConfig,
+      coreNavigation,
+      template,
+      can,
+      isOwner,
+      permissionsLoading,
+      capabilities
+    ]
+  );
+  const groups = useResourceRows(declaredGroups);
+  const FIXED_IDS = FIXED_GROUP_IDS;
+  const workItems = flattenWorkGroups(groups);
+  const spineGroups = groups.filter(
+    (g) => FIXED_IDS.has(g.id) && g.id !== "settings"
+  );
+  const moduleOrder = tenantSettings?.moduleOrder;
+  const moreGroup = useMemo(
+    () => buildMoreGroup(enabledBehaviors, {
+      hiddenModules: navHidden,
+      moduleLabels,
+      moduleOrder
+    }),
+    [enabledBehaviors, navHidden, moduleLabels, moduleOrder]
+  );
+  const inboxRow = buildInboxRow({
+    hiddenModules: navHidden,
+    moduleLabels,
+    can,
+    isOwner,
+    permissionsLoading
+  });
+  const activeHref = useMemo(
+    () => resolveActiveHref(
+      [
+        "/dashboard",
+        ...inboxRow ? [inboxRow.href] : [],
+        ...workItems.flatMap((i) => [
+          i.href,
+          ...(i.children ?? []).map((c) => c.href)
+        ]),
+        ...spineGroups.flatMap((g) => [
+          g.href,
+          ...getGroupItems(g).map((i) => i.href)
+        ]),
+        ...moreGroup ? getGroupItems(moreGroup).map((i) => i.href) : []
+      ].filter((h) => !!h),
+      location
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pathname, searchParams, groups, moreGroup, inboxRow?.href]
+  );
+  const { inventoryHub, catalogMatches, collectionsItem, collectionsNested } = buildInventoryHub(workItems);
+  const ordersItem = findOrdersRow(workItems);
+  const ordersPaymentsHub = buildOrdersPaymentsHub({
+    ordersItem,
+    moneyGroup: spineGroups.find((g) => g.id === "payments") ?? null,
+    can
+  });
+  const consumed = /* @__PURE__ */ new Set([
+    ...inventoryHub ? [...catalogMatches, ...collectionsItem ? [collectionsItem] : []] : [],
+    // With no catalogue row to hold it, Collections is drawn as a row of its
+    // own by the rail; it must not also be drawn as a work row.
+    ...!inventoryHub && collectionsItem && !collectionsNested ? [collectionsItem] : [],
+    ...ordersPaymentsHub && ordersItem ? [ordersItem] : []
+  ]);
+  const { primaryWork, extraWork } = splitWorkRows({
+    workItems,
+    consumed,
+    hasInventoryHub: !!inventoryHub
+  });
+  const hubById = new Map(spineGroups.map((g) => [g.id, g]));
+  const operationsHub = hubById.get("operations");
+  const badges = useNavBadges();
+  const newRows = useNewNavRows();
+  const {
+    renderHighlight,
+    renderIcon,
+    renderRow,
+    renderHub,
+    renderWorkRow,
+    ownsRoute
+  } = createNavRenderers({
+    collapsed,
+    warm,
+    activeHref,
+    isActive,
+    hubChoice,
+    setHubOpen,
+    getGroupItems,
+    badges,
+    isNew: (id) => newRows.has(id)
+  });
+  const { moneyRow, manageRows, growRows } = buildRailRows({
+    inventoryHub,
+    payHub: ordersPaymentsHub ?? hubById.get("payments"),
+    primaryWork,
+    extraWork,
+    collectionsItem,
+    collectionsNested,
+    customersHub: hubById.get("customers"),
+    hardwareHub: hubById.get("hardware"),
+    operationsHub,
+    growHubs: [
+      hubById.get("marketing"),
+      hubById.get("analytics"),
+      hubById.get("website")
+    ],
+    renderHub,
+    renderRow,
+    renderWorkRow
+  });
+  const railProps = {
+    collapsed,
+    homeActive: activeHref === "/dashboard",
+    toolkitActive: pathname.startsWith("/dashboard/toolkit"),
+    highlight: renderHighlight,
+    inboxRow,
+    renderRow,
+    renderHub,
+    renderIcon,
+    ownsRoute,
+    moneyRow,
+    manageRows,
+    growRows,
+    moreGroup
+  };
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: `pv-shell sidebar${collapsed ? " collapsed" : ""} hidden lg:flex`,
+      children: [
+        process.env.NEXT_PUBLIC_BOX_LOGO_IN_SHELL === "true" && process.env.NEXT_PUBLIC_BOX_LOGO && !collapsed && /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 pt-3", children: /* @__PURE__ */ jsx(Logo, { size: "sm", theme: "light" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "side-head", children: [
+          collapsed && onToggleCollapse && /* The way back out of a collapsed rail: laid over the business
+             mark, invisible until the pointer is on it, then the expand icon
+             (John, 2026-10-11). */
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onToggleCollapse,
+              className: "side-head-expand",
+              title: "Expand sidebar (\u2318\\)",
+              "aria-label": "Expand sidebar",
+              children: /* @__PURE__ */ jsx(PanelLeftOpen, { width: 18, height: 18 })
+            }
+          ),
+          !businessContext ? /* @__PURE__ */ jsx(ProductSwitcher, { variant: "head" }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsxs("div", { className: "side-head-actions", children: [
+            /* @__PURE__ */ jsx(SidebarAsk, { collapsed, variant: "icon" }),
+            onToggleCollapse && !collapsed && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onToggleCollapse,
+                className: "side-head-icon",
+                title: "Collapse sidebar (\u2318\\)",
+                "aria-label": "Collapse sidebar",
+                children: /* @__PURE__ */ jsx(PanelLeftClose, { width: 16, height: 16 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("nav", { className: "nav", "aria-label": "Main navigation", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "nav-swap " + (inSettings ? "from-right" : "from-left"),
+            children: inSettings ? /* @__PURE__ */ jsx(
+              SettingsNav,
+              {
+                businessContext,
+                pathname,
+                collapsed,
+                enabledBehaviors,
+                tenant,
+                onBack: settingsBack
+              }
+            ) : editing ? /* @__PURE__ */ jsx(
+              EditableRailBody,
+              {
+                ...railProps,
+                onDone: stopEditing,
+                editSection: editing,
+                savedLabels: moduleLabels,
+                storedLabels: tenantSettings?.moduleLabels
+              }
+            ) : /* @__PURE__ */ jsx(
+              RailBody,
+              {
+                ...railProps,
+                onConfigure: startEditing,
+                edits: {
+                  hidden: hiddenModules,
+                  order: moduleOrder,
+                  labels: moduleLabels,
+                  sectionLabels: tenantSettings?.sectionLabels
+                }
+              }
+            )
+          },
+          inSettings ? "settings" : "main"
+        ) }),
+        /* @__PURE__ */ jsx(SidebarFooter, { collapsed })
+      ]
+    }
+  );
+}
+export {
+  Sidebar
+};
+//# sourceMappingURL=sidebar.js.map

package/dist/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sidebar.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState } from 'react';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\nimport { useRouter, useSearchParams } from 'next/navigation';\nimport { usePathname } from '@withpotter/lib/use-pathname';\nimport { ProductSwitcher } from './shell/product-switcher';\nimport { Logo } from '@withpotter/ui-kit/logo';\nimport './shell/shell.css';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useCapabilities } from '@withpotter/lib/capability-context';\nimport { effectiveModuleLabels } from '@withpotter/lib/effective-module-labels';\nimport { useCurrentTemplate } from '@withpotter/lib/template-context';\nimport { SidebarFooter } from '@withpotter/components/shell/sidebar-footer';\nimport { usePlatformModules } from '@withpotter/lib/use-platform-modules';\nimport { resolveEnabledBehaviors } from '@withpotter/lib/resolve-enabled-behaviors';\nimport { useIntentConfig } from '@withpotter/lib/intents/use-intent-config';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport { isSalesChannel } from '@withpotter/hooks/use-sales-channel';\nimport {\n  ACCOUNT_ROUTE_PREFIXES,\n  intentKeySet,\n  type NavGroup,\n  type NavItem,\n} from './sidebar/config';\nimport {\n  isActive as isActiveFor,\n  resolveActiveHref,\n  type SidebarLocation,\n} from './sidebar/active-href';\nimport { buildInboxRow } from './sidebar/inbox-row';\nimport { RailBody } from './sidebar/rail-body';\nimport { EditableRailBody } from './sidebar/rail-editor';\nimport { usableHidden, type SectionId } from './sidebar/rail-edits';\nimport { buildNavGroups } from './sidebar/build-nav-groups';\nimport { buildRailRows } from './sidebar/rail-rows';\nimport {\n  buildOrdersPaymentsHub,\n  findOrdersRow,\n} from './sidebar/orders-payments-hub';\nimport { splitWorkRows } from './sidebar/work-rows';\nimport { buildMoreGroup } from './sidebar/more-group';\nimport { buildInventoryHub } from './sidebar/inventory-hub';\nimport { SidebarAsk } from './shell/sidebar-ask';\nimport { railContextFor } from './sidebar/route-context';\nimport { useNewNavRows } from './sidebar/use-new-nav-rows';\nimport { useResourceRows } from './sidebar/use-resource-rows';\nimport {\n  FIXED_GROUP_IDS,\n  flattenWorkGroups,\n  groupItems,\n} from './sidebar/flatten-work-groups';\nimport { SettingsNav } from './sidebar/settings-nav';\nimport { createNavRenderers } from './sidebar/nav-renderers';\nimport { useNavBadges } from './sidebar/use-nav-badges';\nimport { useOpenHub } from './sidebar/use-open-hub';\n\nexport function Sidebar({\n  collapsed = false,\n  onToggleCollapse,\n}: {\n  collapsed?: boolean;\n  /** Collapses the rail; the button for it sits beside Search in the head. */\n  onToggleCollapse?: () => void;\n}) {\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n  const router = useRouter();\n  /** \"Customize sidebar\" is on: the rail itself is editable in place. */\n  const [editing, setEditing] = useState<SectionId | null>(null);\n  const startEditing = useCallback((s: SectionId) => setEditing(s), []);\n  const stopEditing = useCallback(() => setEditing(null), []);\n\n  /**\n   * Warm a route when the pointer arrives, not when it clicks: every link here\n   * is `prefetch={false}`, so a click paid the full cost with nothing ready.\n   * Prefetches the URL actually navigated to, query and all, because the\n   * adaptive rows are intent-scoped (`/dashboard/catalog?intent=...`).\n   */\n  const warm = useCallback(\n    (href: string) => {\n      if (!href || href.startsWith('http')) return;\n      router.prefetch(href);\n    },\n    [router],\n  );\n  const { tenant } = useAuth();\n  const { inSettings, isAccountContext, businessContext } =\n    railContextFor(pathname);\n  // Editing in place needs the full rail, so it ends when the rail collapses or you\n  // go into settings (and does not come back on its own when you return).\n  if (editing && (collapsed || inSettings)) setEditing(null);\n  // \"Back home\" means home: the dashboard, not wherever you last were.\n  const settingsBack = () => router.push('/dashboard');\n  const { hubChoice, setHubOpen } = useOpenHub(pathname);\n\n  const { template, dashboardState } = useCurrentTemplate(tenant?.templateId);\n\n  const tenantSettings = tenant?.settings as\n    Record<string, unknown> | undefined;\n  const moduleLabels = effectiveModuleLabels(tenantSettings);\n  const hiddenModules = tenantSettings?.hiddenModules as string[] | undefined;\n  /**\n   * What the groups are built without. While editing, nothing is hidden, so a\n   * hidden row is still on the rail (dimmed, to be shown again); the rail\n   * itself drops hidden rows otherwise. Essential rows are never hidden, so a\n   * stale `inbox` entry in the list does not hide the Inbox.\n   */\n  const navHidden = useMemo(\n    () => (editing ? undefined : usableHidden(hiddenModules)),\n    [editing, hiddenModules],\n  );\n\n  // How the tenant takes money (from onboarding). Refines the nav: an\n  // in-person-only business doesn't ship, so fulfillment surfaces are hidden.\n  // `null` (unset) never hides anything — this only ever removes what genuinely\n  // doesn't apply.\n  const salesChannel = isSalesChannel(tenantSettings?.salesChannel)\n    ? tenantSettings.salesChannel\n    : null;\n  const inPersonOnly = salesChannel === 'in_person';\n\n  // The behaviors the business really has: its model, the merchant's own\n  // switches (Settings > Features) and the template's defaults. Resolved BEFORE\n  // the core list is built, because that list gates its modules on them. It was\n  // handed the raw stored `enabledBehaviors` instead, which knows nothing of an\n  // override, so a Blog switched on in Features never reached Website's Blog\n  // row and showed only in More.\n  const enabledBehaviors = useMemo(\n    () => resolveEnabledBehaviors(tenantSettings, template),\n    [tenantSettings, template],\n  );\n\n  // Still use usePlatformModules for behavior resolution and resource sidebar\n  const { coreNavigation } = usePlatformModules({\n    template,\n    dashboardState,\n    enabledBehaviors,\n    hiddenModules: tenantSettings?.hiddenModules as string[] | undefined,\n    moduleLabels,\n    moduleOrder: tenantSettings?.moduleOrder as string[] | undefined,\n  });\n\n  const intentConfig = useIntentConfig();\n  const { can, isOwner, loading: permissionsLoading } = usePermissions();\n  const capabilities = useCapabilities();\n\n  /**\n   * Which archetypes the CURRENT URL is narrowed to, verbatim.\n   *\n   * Not `intentConfig.primary.key`: that falls back to sessionStorage when the\n   * URL carries no `?intent=`, so which row lit up depended on where you had\n   * last been rather than where you are. And not a single key either — a\n   * collapsed row carries every archetype behind it.\n   */\n  const currentIntent =\n    intentConfig.mode === 'multi'\n      ? intentKeySet(searchParams.get('intent'))\n      : null;\n\n  const location: SidebarLocation = {\n    pathname,\n    params: searchParams,\n    currentIntent,\n  };\n  const isActive = (href: string) => isActiveFor(href, location);\n\n  const getGroupItems = groupItems;\n\n  // Build navigation groups. Memoized on its real inputs (NOT pathname) so the\n  // whole tree — intent resolution, permission filtering, label overrides —\n  // doesn't rebuild on every navigation. Only activeHref/isActive depend on the\n  // route, and they're cheap.\n  const declaredGroups: NavGroup[] = useMemo(\n    () =>\n      buildNavGroups({\n        hiddenModules: navHidden,\n        moduleLabels,\n        enabledBehaviors,\n        inPersonOnly,\n        intentConfig,\n        coreNavigation,\n        template,\n        can,\n        isOwner,\n        permissionsLoading,\n        hasCapability: capabilities.has,\n      }),\n    [\n      navHidden,\n      moduleLabels,\n      enabledBehaviors,\n      inPersonOnly,\n      intentConfig,\n      coreNavigation,\n      template,\n      can,\n      isOwner,\n      permissionsLoading,\n      capabilities,\n    ],\n  );\n\n  /**\n   * The bookable-things row, told apart: Courts and Coaches rather than one\n   * row named after whichever shape the archetype guessed. Only expands when\n   * this business actually has groups; see `use-resource-rows.ts`.\n   */\n  const groups = useResourceRows(declaredGroups);\n\n  // Flat render model (console-style): work-surface items sit unlabeled with\n  // Home; each fixed spine group is either a single link, or a hub that reveals\n  // its children inline (disclosure, no chevron); Settings is pinned in the foot.\n  const FIXED_IDS = FIXED_GROUP_IDS;\n  /**\n   * A flat group is a row, not just a container for rows.\n   *\n   * This took each non-fixed group's ITEMS and dropped the group itself, which\n   * is right for an archetype group — Dine-in and Events are labels, and their\n   * children are the destinations. It is wrong for the hoisted shared rows.\n   *\n   * `Catalog` and `Orders` come out of the collapse as groups carrying their\n   * own `href`, because they belong to no archetype: Orders has no children at\n   * all, and Catalog has exactly one (Collections). So this rendered **nothing**\n   * for Orders and **only Collections** for Catalog — the two most-used\n   * destinations in the app were absent from the sidebar of every\n   * multi-archetype business, and the archetype rows beside them made it look\n   * intentional.\n   *\n   * Every test in the suite asserts on what `buildNavGroups` returns, which was\n   * correct the whole time. Nothing looked at what the sidebar drew.\n   */\n  // Shared, so the test and `scripts/archetype-shape.mts` see what is drawn\n  // here rather than each modelling it. See `flatten-work-groups.ts`.\n  const workItems = flattenWorkGroups(groups);\n  const spineGroups = groups.filter(\n    (g) => FIXED_IDS.has(g.id) && g.id !== 'settings',\n  );\n\n  // More is built here, ahead of the active-row list, because that list has to\n  // include its rows: built after it they are never candidates, so nothing lights\n  // on their pages and the hub never opens itself.\n  const moduleOrder = tenantSettings?.moduleOrder as string[] | undefined;\n  const moreGroup = useMemo(\n    () =>\n      buildMoreGroup(enabledBehaviors, {\n        hiddenModules: navHidden,\n        moduleLabels,\n        moduleOrder,\n      }),\n    [enabledBehaviors, navHidden, moduleLabels, moduleOrder],\n  );\n\n  // Ahead of the active-row list for the same reason as More: its href has to\n  // be a candidate or nothing lights on /dashboard/inbox.\n  const inboxRow = buildInboxRow({\n    hiddenModules: navHidden,\n    moduleLabels,\n    can,\n    isOwner,\n    permissionsLoading,\n  });\n\n  // Exactly one row carries the active highlight. If the path is inside a hub,\n  // the hub's landing row lights up (its sub-pages are tabs, not sidebar rows);\n  // otherwise the deepest matching flat row wins. Keeping it unique lets the\n  // shared motion indicator spring cleanly between rows.\n  // The deepest matching row wins — including hub CHILDREN, now that sub-pages\n  // render inline in the sidebar rather than only as HubTabs. So the actual\n  // current sub-page carries the highlight, not just the hub landing.\n  // Exactly one row carries the active highlight — see `active-href.ts` for\n  // how it is chosen. The list is every href the sidebar draws, hub children\n  // included: Collections is attached as a child of the catalogue row, so when\n  // children were missing from this list nothing lit on /dashboard/collections\n  // and the hub holding the only row that leads there stayed shut.\n  const activeHref = useMemo(\n    () =>\n      resolveActiveHref(\n        [\n          '/dashboard',\n          ...(inboxRow ? [inboxRow.href] : []),\n          ...workItems.flatMap((i) => [\n            i.href,\n            ...(i.children ?? []).map((c) => c.href),\n          ]),\n          ...spineGroups.flatMap((g) => [\n            g.href,\n            ...getGroupItems(g).map((i) => i.href),\n          ]),\n          ...(moreGroup ? getGroupItems(moreGroup).map((i) => i.href) : []),\n        ].filter((h): h is string => !!h),\n        location,\n      ),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [pathname, searchParams, groups, moreGroup, inboxRow?.href],\n  );\n\n  const { inventoryHub, catalogMatches, collectionsItem, collectionsNested } =\n    buildInventoryHub(workItems);\n\n  /**\n   * When the Inventory hub exists, catalog + collections move inside it; else\n   * both still render flat, right where they were.\n   *\n   * THE ROWS THEMSELVES, not their ids. An id says what a row is called by its\n   * archetype, not which screen it opens, and `subscriptions` calls its Plans\n   * row `catalog` too — so a business running memberships beside anything with\n   * a real catalogue had **Plans deleted from its sidebar**, in all nine\n   * two-archetype combinations. Collections is consumed only when the hub took\n   * it: dropping it always cost the row to a business with no catalogue row.\n   */\n  const ordersItem = findOrdersRow(workItems);\n  const ordersPaymentsHub = buildOrdersPaymentsHub({\n    ordersItem,\n    moneyGroup: spineGroups.find((g) => g.id === 'payments') ?? null,\n    can,\n  });\n\n  const consumed = new Set<unknown>([\n    ...(inventoryHub\n      ? [...catalogMatches, ...(collectionsItem ? [collectionsItem] : [])]\n      : []),\n    // With no catalogue row to hold it, Collections is drawn as a row of its\n    // own by the rail; it must not also be drawn as a work row.\n    ...(!inventoryHub && collectionsItem && !collectionsNested\n      ? [collectionsItem]\n      : []),\n    ...(ordersPaymentsHub && ordersItem ? [ordersItem] : []),\n  ]);\n  /* General (unlabeled) leads; the rest drop into Operations. The rule is in\n     `work-rows`. */\n  const { primaryWork, extraWork } = splitWorkRows({\n    workItems,\n    consumed,\n    hasInventoryHub: !!inventoryHub,\n  });\n\n  const hubById = new Map(spineGroups.map((g) => [g.id, g]));\n  const operationsHub = hubById.get('operations');\n\n  const badges = useNavBadges();\n  /* Rows that appeared because the business added something this week — see\n     `use-new-nav-rows`. */\n  const newRows = useNewNavRows();\n\n  // Plain render helpers (NOT inner components) — defining components inside\n  // the render remounts them every pass, which breaks motion's shared-layout\n  // highlight (it would jump from stale positions). Functions returning JSX\n  // keep the elements stable under the parent, so the spring animates cleanly.\n  const {\n    renderHighlight,\n    renderIcon,\n    renderRow,\n    renderHub,\n    renderWorkRow,\n    ownsRoute,\n  } = createNavRenderers({\n    collapsed,\n    warm,\n    activeHref,\n    isActive,\n    hubChoice,\n    setHubOpen,\n    getGroupItems,\n    badges,\n    isNew: (id: string) => newRows.has(id),\n  });\n\n  const { moneyRow, manageRows, growRows } = buildRailRows({\n    inventoryHub,\n    payHub: ordersPaymentsHub ?? hubById.get('payments'),\n    primaryWork,\n    extraWork,\n    collectionsItem,\n    collectionsNested,\n    customersHub: hubById.get('customers'),\n    hardwareHub: hubById.get('hardware'),\n    operationsHub,\n    growHubs: [\n      hubById.get('marketing'),\n      hubById.get('analytics'),\n      hubById.get('website'),\n    ],\n    renderHub,\n    renderRow,\n    renderWorkRow,\n  });\n\n  /** What the rail is drawn from, in both modes. See `rail-body.tsx`. */\n  const railProps = {\n    collapsed,\n    homeActive: activeHref === '/dashboard',\n    toolkitActive: pathname.startsWith('/dashboard/toolkit'),\n    highlight: renderHighlight,\n    inboxRow,\n    renderRow,\n    renderHub,\n    renderIcon,\n    ownsRoute,\n    moneyRow,\n    manageRows,\n    growRows,\n    moreGroup,\n  };\n\n  return (\n    <aside\n      className={`pv-shell sidebar${collapsed ? ' collapsed' : ''} hidden lg:flex`}\n    >\n      {/* THE HEAD OF THE RAIL, one flat row (John, 2026-10-04): the business's\n          mark and name at the left, the Search and Ask icons at the right. It\n          was a bordered card with a second line, and Search a row of its own\n          beneath it. */}\n      {/* A branded box can put its own logo at the top of the rail\n          (NEXT_PUBLIC_BOX_LOGO_IN_SHELL). Left out when the rail is collapsed,\n          where there is no room for a wordmark. */}\n      {process.env.NEXT_PUBLIC_BOX_LOGO_IN_SHELL === 'true' &&\n        process.env.NEXT_PUBLIC_BOX_LOGO &&\n        !collapsed && (\n        <div className=\"px-3 pb-1 pt-3\">\n          <Logo size=\"sm\" theme=\"light\" />\n        </div>\n      )}\n      <div className=\"side-head\">\n        {collapsed && onToggleCollapse && (\n          /* The way back out of a collapsed rail: laid over the business\n             mark, invisible until the pointer is on it, then the expand icon\n             (John, 2026-10-11). */\n          <button\n            type=\"button\"\n            onClick={onToggleCollapse}\n            className=\"side-head-expand\"\n            title=\"Expand sidebar (⌘\\)\"\n            aria-label=\"Expand sidebar\"\n          >\n            <PanelLeftOpen width={18} height={18} />\n          </button>\n        )}\n        {!businessContext ? (\n          <ProductSwitcher variant=\"head\" />\n        ) : (\n          <div className=\"flex-1\" />\n        )}\n        {/* Search, at the right of the head, after Linear (John, 2026-10-11).\n            It was a row under Home; it is an action, not a place, so it leaves\n            the list. */}\n        <div className=\"side-head-actions\">\n          <SidebarAsk collapsed={collapsed} variant=\"icon\" />\n          {onToggleCollapse && !collapsed && (\n            <button\n              type=\"button\"\n              onClick={onToggleCollapse}\n              className=\"side-head-icon\"\n              title=\"Collapse sidebar (⌘\\)\"\n              aria-label=\"Collapse sidebar\"\n            >\n              <PanelLeftClose width={16} height={16} />\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Navigation */}\n      <nav className=\"nav\" aria-label=\"Main navigation\">\n        {/* No loading skeleton: the general nav renders without the template. */}\n\n        {/* General nav ⇄ Settings nav: settings drills in place. The pane is\n            keyed on the boundary so it remounts and slides in (from the right\n            going into settings, from the left coming back). Enter-only — no\n            exit — so the nav never collapses and re-flows from the bottom. */}\n        <div\n          key={inSettings ? 'settings' : 'main'}\n          className={'nav-swap ' + (inSettings ? 'from-right' : 'from-left')}\n        >\n          {inSettings ? (\n            <SettingsNav\n              businessContext={businessContext}\n              pathname={pathname}\n              collapsed={collapsed}\n              enabledBehaviors={enabledBehaviors}\n              tenant={tenant}\n              onBack={settingsBack}\n            />\n          ) : editing ? (\n            <EditableRailBody\n              {...railProps}\n              onDone={stopEditing}\n              editSection={editing}\n              savedLabels={moduleLabels}\n              storedLabels={\n                tenantSettings?.moduleLabels as\n                  Record<string, string> | undefined\n              }\n            />\n          ) : (\n            <RailBody\n              {...railProps}\n              onConfigure={startEditing}\n              edits={{\n                hidden: hiddenModules,\n                order: moduleOrder,\n                labels: moduleLabels,\n                sectionLabels: tenantSettings?.sectionLabels as\n                  Record<string, string> | undefined,\n              }}\n            />\n          )}\n        </div>\n      </nav>\n\n      <SidebarFooter collapsed={collapsed} />\n    </aside>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/staff-welcome.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Said once, to somebody who just joined.
+ *
+ * A MODAL, on John's call (2026-08-23). It was a dismissible strip above the
+ * work, on the argument that a welcome should not stand between a new hire and
+ * the thing they were pointed at. What that actually bought was a grey bar the
+ * width of the page with three sentences in it, at the top of a screen full of
+ * other grey bars, on the one occasion in this product where the person is
+ * paying complete attention. Twenty seconds earlier they accepted a job. That
+ * is worth stopping for, and stopping for it costs one press.
+ *
+ * IT CARRIES A PICTURE, for the same reason: the strip could only ever be
+ * words, and the sentence "you are staff at John Store" lands differently
+ * beside somebody in an apron holding an order. It is the photograph the
+ * sign-in screen already uses for food orders, so a new hire meets the same
+ * world they saw on the way in rather than stock art bought for one modal.
+ *
+ * WHAT IS THEIRS IS A LIST, not a comma sentence. Eight grants joined by commas
+ * ran as one long line nobody read to the end of — the exact content this
+ * screen exists to deliver. A ticked line each is scannable, and the ticks say
+ * "granted" without a word spent on it.
+ *
+ * NAMING THE OWNER is the part that earns its place. When a staff member hits a
+ * wall, the product otherwise gives them nothing: no explanation and no route
+ * to the person who could grant it. Saying who runs the business on day one
+ * turns a future dead end into a question they already know how to ask.
+ */
+export declare function StaffWelcome(): import("react").JSX.Element | null;

package/dist/staff-welcome.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Image from "next/image";
+import { Check } from "lucide-react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+import { describeInvite } from "@withpotter/lib/describe-invite";
+import { takeStaffArrival, endStaffArrival } from "@withpotter/lib/staff-arrival";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription
+} from "@withpotter/ui-kit";
+function StaffWelcome() {
+  const { user, tenant } = useAuth();
+  const { permissions, isOwner, loading, role } = usePermissions();
+  const [arrived] = useState(
+    () => typeof window === "undefined" ? false : takeStaffArrival()
+  );
+  const [dismissed, setDismissed] = useState(false);
+  if (loading || isOwner || !arrived) return null;
+  const firstName = user?.name?.trim().split(" ")[0];
+  const { allowed } = describeInvite(permissions);
+  const owner = tenant?.ownerName;
+  const close = () => {
+    setDismissed(true);
+    endStaffArrival();
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: !dismissed, onOpenChange: (next) => !next && close(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "max-w-xl gap-0 overflow-hidden p-0 sm:grid-cols-[11rem_minmax(0,1fr)]",
+      "aria-describedby": void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "relative h-28 w-full sm:h-auto", children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: "/commerce/barista.jpg",
+            alt: "",
+            fill: true,
+            sizes: "(max-width: 640px) 100vw, 176px",
+            className: "object-cover",
+            style: { objectPosition: "center 44%" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "text-title", children: firstName ? `Welcome, ${firstName}.` : "Welcome." }),
+          /* @__PURE__ */ jsxs(DialogDescription, { className: "mt-1", children: [
+            role ? `You're ${role} at ` : "You've joined ",
+            tenant?.businessName ?? "this business",
+            "."
+          ] }),
+          allowed.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-2", children: allowed.map((phrase) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-start gap-2 text-sm text-[var(--text-secondary)]",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    "aria-hidden": true,
+                    className: "mt-0.5 size-4 shrink-0 text-[var(--success)]"
+                  }
+                ),
+                phrase
+              ]
+            },
+            phrase
+          )) }) : /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-[var(--text-secondary)]", children: "Your access is being set up." }),
+          owner && /* @__PURE__ */ jsxs("p", { className: "mt-4 text-sm text-[var(--text-tertiary)]", children: [
+            owner,
+            " runs it. Ask for anything you can't reach."
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(Button, { onClick: close, children: "Start working" }) })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  StaffWelcome
+};
+//# sourceMappingURL=staff-welcome.js.map

package/dist/staff-welcome.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/staff-welcome.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport Image from 'next/image';\nimport { Check } from 'lucide-react';\n\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport { describeInvite } from '@withpotter/lib/describe-invite';\nimport { takeStaffArrival, endStaffArrival } from '@withpotter/lib/staff-arrival';\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  DialogDescription,\n} from '@withpotter/ui-kit';\n\n/**\n * Said once, to somebody who just joined.\n *\n * A MODAL, on John's call (2026-08-23). It was a dismissible strip above the\n * work, on the argument that a welcome should not stand between a new hire and\n * the thing they were pointed at. What that actually bought was a grey bar the\n * width of the page with three sentences in it, at the top of a screen full of\n * other grey bars, on the one occasion in this product where the person is\n * paying complete attention. Twenty seconds earlier they accepted a job. That\n * is worth stopping for, and stopping for it costs one press.\n *\n * IT CARRIES A PICTURE, for the same reason: the strip could only ever be\n * words, and the sentence \"you are staff at John Store\" lands differently\n * beside somebody in an apron holding an order. It is the photograph the\n * sign-in screen already uses for food orders, so a new hire meets the same\n * world they saw on the way in rather than stock art bought for one modal.\n *\n * WHAT IS THEIRS IS A LIST, not a comma sentence. Eight grants joined by commas\n * ran as one long line nobody read to the end of — the exact content this\n * screen exists to deliver. A ticked line each is scannable, and the ticks say\n * \"granted\" without a word spent on it.\n *\n * NAMING THE OWNER is the part that earns its place. When a staff member hits a\n * wall, the product otherwise gives them nothing: no explanation and no route\n * to the person who could grant it. Saying who runs the business on day one\n * turns a future dead end into a question they already know how to ask.\n */\nexport function StaffWelcome() {\n  const { user, tenant } = useAuth();\n  const { permissions, isOwner, loading, role } = usePermissions();\n  // Read during the first render and cleared in the same breath — a welcome\n  // that survives a refresh greets somebody twice, and the second time reads as\n  // a bug rather than a greeting.\n  //\n  // A lazy initialiser rather than an effect, matching useBusinessArrival: the\n  // flag is consumed exactly once, and an effect that setState's on mount is\n  // both a cascading render and a frame in which the welcome is missing.\n  const [arrived] = useState(() =>\n    typeof window === 'undefined' ? false : takeStaffArrival(),\n  );\n  const [dismissed, setDismissed] = useState(false);\n\n  if (loading || isOwner || !arrived) return null;\n\n  const firstName = user?.name?.trim().split(' ')[0];\n  const { allowed } = describeInvite(permissions);\n  const owner = tenant?.ownerName;\n\n  const close = () => {\n    setDismissed(true);\n    endStaffArrival();\n  };\n\n  return (\n    <Dialog open={!dismissed} onOpenChange={(next) => !next && close()}>\n      <DialogContent\n        className=\"max-w-xl gap-0 overflow-hidden p-0 sm:grid-cols-[11rem_minmax(0,1fr)]\"\n        // The picture is the first thing here and it is decorative; the\n        // greeting is what a screen reader should land on.\n        aria-describedby={undefined}\n      >\n        <div className=\"relative h-28 w-full sm:h-auto\">\n          <Image\n            src=\"/commerce/barista.jpg\"\n            alt=\"\"\n            fill\n            sizes=\"(max-width: 640px) 100vw, 176px\"\n            className=\"object-cover\"\n            // Portrait art in a portrait column on desktop and a band on\n            // mobile: hold the hands and the pour, drop the ceiling.\n            style={{ objectPosition: 'center 44%' }}\n          />\n        </div>\n\n        <div className=\"p-6\">\n          <DialogTitle className=\"text-title\">\n            {firstName ? `Welcome, ${firstName}.` : 'Welcome.'}\n          </DialogTitle>\n          <DialogDescription className=\"mt-1\">\n            {role ? `You're ${role} at ` : \"You've joined \"}\n            {tenant?.businessName ?? 'this business'}.\n          </DialogDescription>\n\n          {allowed.length > 0 ? (\n            <ul className=\"mt-4 space-y-2\">\n              {allowed.map((phrase) => (\n                <li\n                  key={phrase}\n                  className=\"flex items-start gap-2 text-sm text-[var(--text-secondary)]\"\n                >\n                  <Check\n                    aria-hidden\n                    className=\"mt-0.5 size-4 shrink-0 text-[var(--success)]\"\n                  />\n                  {phrase}\n                </li>\n              ))}\n            </ul>\n          ) : (\n            <p className=\"mt-4 text-sm text-[var(--text-secondary)]\">\n              Your access is being set up.\n            </p>\n          )}\n\n          {owner && (\n            <p className=\"mt-4 text-sm text-[var(--text-tertiary)]\">\n              {owner} runs it. Ask for anything you can&apos;t reach.\n            </p>\n          )}\n\n          <div className=\"mt-4 flex justify-end\">\n            <Button onClick={close}>Start working</Button>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AAgFU,cAgBA,YAhBA;AA9EV,SAAS,gBAAgB;AACzB,OAAO,WAAW;AAClB,SAAS,aAAa;AAEtB,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB,uBAAuB;AAClD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA6BA,SAAS,eAAe;AAC7B,QAAM,EAAE,MAAM,OAAO,IAAI,QAAQ;AACjC,QAAM,EAAE,aAAa,SAAS,SAAS,KAAK,IAAI,eAAe;AAQ/D,QAAM,CAAC,OAAO,IAAI;AAAA,IAAS,MACzB,OAAO,WAAW,cAAc,QAAQ,iBAAiB;AAAA,EAC3D;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,MAAI,WAAW,WAAW,CAAC,QAAS,QAAO;AAE3C,QAAM,YAAY,MAAM,MAAM,KAAK,EAAE,MAAM,GAAG,EAAE,CAAC;AACjD,QAAM,EAAE,QAAQ,IAAI,eAAe,WAAW;AAC9C,QAAM,QAAQ,QAAQ;AAEtB,QAAM,QAAQ,MAAM;AAClB,iBAAa,IAAI;AACjB,oBAAgB;AAAA,EAClB;AAEA,SACE,oBAAC,UAAO,MAAM,CAAC,WAAW,cAAc,CAAC,SAAS,CAAC,QAAQ,MAAM,GAC/D;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MAGV,oBAAkB;AAAA,MAElB;AAAA,4BAAC,SAAI,WAAU,kCACb;AAAA,UAAC;AAAA;AAAA,YACC,KAAI;AAAA,YACJ,KAAI;AAAA,YACJ,MAAI;AAAA,YACJ,OAAM;AAAA,YACN,WAAU;AAAA,YAGV,OAAO,EAAE,gBAAgB,aAAa;AAAA;AAAA,QACxC,GACF;AAAA,QAEA,qBAAC,SAAI,WAAU,OACb;AAAA,8BAAC,eAAY,WAAU,cACpB,sBAAY,YAAY,SAAS,MAAM,YAC1C;AAAA,UACA,qBAAC,qBAAkB,WAAU,QAC1B;AAAA,mBAAO,UAAU,IAAI,SAAS;AAAA,YAC9B,QAAQ,gBAAgB;AAAA,YAAgB;AAAA,aAC3C;AAAA,UAEC,QAAQ,SAAS,IAChB,oBAAC,QAAG,WAAU,kBACX,kBAAQ,IAAI,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cAEV;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAW;AAAA,oBACX,WAAU;AAAA;AAAA,gBACZ;AAAA,gBACC;AAAA;AAAA;AAAA,YAPI;AAAA,UAQP,CACD,GACH,IAEA,oBAAC,OAAE,WAAU,6CAA4C,0CAEzD;AAAA,UAGD,SACC,qBAAC,OAAE,WAAU,4CACV;AAAA;AAAA,YAAM;AAAA,aACT;AAAA,UAGF,oBAAC,SAAI,WAAU,yBACb,8BAAC,UAAO,SAAS,OAAO,2BAAa,GACvC;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/storefront-preview/preview-refresh.d.ts

@@ -0,0 +1,7 @@
+export declare const PREVIEW_REFRESH_EVENT = "pb:preview-refresh";
+export interface PreviewRefreshDetail {
+    reason?: 'save' | 'publish' | 'unpublish' | 'manual' | 'live';
+    ts: number;
+}
+export declare function triggerPreviewRefresh(reason?: PreviewRefreshDetail['reason']): void;
+export declare function usePreviewRefreshSignal(onRefresh: (detail: PreviewRefreshDetail) => void): void;

package/dist/storefront-preview/preview-refresh.js

@@ -0,0 +1,30 @@
+"use client";
+import { useEffect } from "react";
+const PREVIEW_REFRESH_EVENT = "pb:preview-refresh";
+function triggerPreviewRefresh(reason = "save") {
+  if (typeof window === "undefined") return;
+  const detail = {
+    reason,
+    ts: Date.now()
+  };
+  window.dispatchEvent(new CustomEvent(PREVIEW_REFRESH_EVENT, { detail }));
+}
+function usePreviewRefreshSignal(onRefresh) {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handler = (event) => {
+      const custom = event;
+      onRefresh(custom.detail || { ts: Date.now() });
+    };
+    window.addEventListener(PREVIEW_REFRESH_EVENT, handler);
+    return () => {
+      window.removeEventListener(PREVIEW_REFRESH_EVENT, handler);
+    };
+  }, [onRefresh]);
+}
+export {
+  PREVIEW_REFRESH_EVENT,
+  triggerPreviewRefresh,
+  usePreviewRefreshSignal
+};
+//# sourceMappingURL=preview-refresh.js.map

package/dist/storefront-preview/preview-refresh.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/storefront-preview/preview-refresh.ts"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nexport const PREVIEW_REFRESH_EVENT = 'pb:preview-refresh';\n\nexport interface PreviewRefreshDetail {\n  reason?: 'save' | 'publish' | 'unpublish' | 'manual' | 'live';\n  ts: number;\n}\n\nexport function triggerPreviewRefresh(\n  reason: PreviewRefreshDetail['reason'] = 'save',\n): void {\n  if (typeof window === 'undefined') return;\n\n  const detail: PreviewRefreshDetail = {\n    reason,\n    ts: Date.now(),\n  };\n\n  window.dispatchEvent(new CustomEvent(PREVIEW_REFRESH_EVENT, { detail }));\n}\n\nexport function usePreviewRefreshSignal(\n  onRefresh: (detail: PreviewRefreshDetail) => void,\n): void {\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const handler = (event: Event) => {\n      const custom = event as CustomEvent<PreviewRefreshDetail>;\n      onRefresh(custom.detail || { ts: Date.now() });\n    };\n\n    window.addEventListener(PREVIEW_REFRESH_EVENT, handler);\n\n    return () => {\n      window.removeEventListener(PREVIEW_REFRESH_EVENT, handler);\n    };\n  }, [onRefresh]);\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAEnB,MAAM,wBAAwB;AAO9B,SAAS,sBACd,SAAyC,QACnC;AACN,MAAI,OAAO,WAAW,YAAa;AAEnC,QAAM,SAA+B;AAAA,IACnC;AAAA,IACA,IAAI,KAAK,IAAI;AAAA,EACf;AAEA,SAAO,cAAc,IAAI,YAAY,uBAAuB,EAAE,OAAO,CAAC,CAAC;AACzE;AAEO,SAAS,wBACd,WACM;AACN,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,UAAM,UAAU,CAAC,UAAiB;AAChC,YAAM,SAAS;AACf,gBAAU,OAAO,UAAU,EAAE,IAAI,KAAK,IAAI,EAAE,CAAC;AAAA,IAC/C;AAEA,WAAO,iBAAiB,uBAAuB,OAAO;AAEtD,WAAO,MAAM;AACX,aAAO,oBAAoB,uBAAuB,OAAO;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAChB;","names":[]}

package/dist/storefront-preview/storefront-preview.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+export type DeviceMode = 'mobile' | 'tablet' | 'desktop';
+interface StorefrontPreviewProps {
+    tenantSlug: string;
+    pageKey?: string;
+    className?: string;
+    /**
+     * Whether the current draft differs from the published version — controls
+     * the "Previewing draft — not live" canvas banner per merchant-dashboard#177.
+     */
+    hasDraftChanges?: boolean;
+    /** Public storefront URL surfaced as the "View live site" link in the banner. */
+    publicUrl?: string;
+    /** Validated template preview URL to load instead of the tenant storefront. */
+    previewUrlOverride?: string;
+    /** Human-readable template label shown in the override banner. */
+    previewTemplateLabel?: string;
+    /** Invoked when the merchant exits an arbitrary template preview. */
+    onExitTemplatePreview?: () => void;
+    /**
+     * Invoked when the iframe posts a `PB_BLOCK_SELECTED` message (the merchant
+     * clicked a tagged block in the live preview). Origin-checked against the
+     * iframe's own origin before dispatch. See
+     * `withpotter/roadmap/handoffs/editor-preview-deep-link.md` (§3.2, §3.5).
+     * (merchant-dashboard#170)
+     */
+    /**
+     * Drops the preview's own toolbar. The editor floats its chrome over the
+     * canvas now and already owns device, refresh, copy-link and open, so a
+     * second bar inside the frame was the same four controls twice.
+     */
+    bare?: boolean;
+    /**
+     * Controlled device mode. `bare` hides the preview's own switcher, so
+     * whoever hid it has to provide one — otherwise removing the toolbar quietly
+     * removes the ability to look at the site on a phone, which is the view most
+     * of a Nigerian merchant's customers will actually use.
+     */
+    deviceMode?: DeviceMode;
+    onBlockSelected?: (blockId: string) => void;
+    /**
+     * Invoked when the iframe posts a `PB_FIELD_SELECTED` message (the
+     * merchant clicked a specific field inside a tagged block — e.g. a
+     * heading, a paragraph, a CTA label, or an image). Same origin/source
+     * guards as `onBlockSelected`. `fieldId` is the schema field name.
+     */
+    onFieldSelected?: (blockId: string, fieldId: string) => void;
+    /** Text committed on the canvas. Write it through the same save path the
+     *  inspector uses — a second write path would go stale against the first. */
+    onFieldChanged?: (blockId: string, fieldId: string, value: string) => void;
+    /** Editor-owned actions rendered before the viewport controls. */
+    toolbarActions?: ReactNode;
+}
+export declare function buildPreviewUrl(tenantSlug: string, pageKey?: string): string;
+export declare function buildSessionPreviewUrl(tenantSlug: string, pageKey?: string): string;
+export declare function StorefrontPreview({ tenantSlug, pageKey, className, hasDraftChanges, publicUrl, previewUrlOverride, previewTemplateLabel, onExitTemplatePreview, bare, deviceMode: deviceModeProp, onBlockSelected, onFieldSelected, onFieldChanged, toolbarActions, }: StorefrontPreviewProps): import("react").JSX.Element;
+export {};