@withpotter/components 0.13.0-next.101

package/dist/sidebar/nav-pending-row.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { animate, AnimatePresence, motion } from "motion/react";
+import { durations, eases } from "@withpotter/lib/motion";
+import {
+  navChangeIsRecent,
+  navIsPending,
+  onNavPendingEnd,
+  useNavPendingState
+} from "@withpotter/lib/nav-pending";
+import { growRow, holdRow } from "./row-entrance";
+const GLYPHS = "\u2591\u2592\u2593\u2588\u258C\u2590\u2580\u2584#%&*+=<>/\\|";
+const SPINNER = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+const TICK_MS = 70;
+const RESOLVE_MS = 900;
+function scramble(target, resolved) {
+  return target.split("").map(
+    (ch, i) => i < resolved || ch === " " ? ch : GLYPHS[Math.floor(Math.random() * GLYPHS.length)]
+  ).join("");
+}
+function AsciiLoader({
+  label,
+  startedAt
+}) {
+  const target = label || "Updating your menu";
+  const [view, setView] = useState({
+    frame: 0,
+    text: target
+  });
+  useEffect(() => {
+    let n = 0;
+    const t = setInterval(() => {
+      n += 1;
+      const elapsed = Date.now() - startedAt;
+      const resolved = Math.floor(elapsed / RESOLVE_MS * target.length);
+      setView({
+        frame: n,
+        text: scramble(target, resolved)
+      });
+    }, TICK_MS);
+    return () => clearInterval(t);
+  }, [startedAt, target]);
+  const { frame, text } = view;
+  return /* @__PURE__ */ jsx("div", { className: "nav-pending-ascii", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { className: "nav-pending-line", children: [
+    /* @__PURE__ */ jsx("span", { className: "nav-pending-spin", children: SPINNER[frame % SPINNER.length] }),
+    /* @__PURE__ */ jsxs("span", { className: "nav-pending-words", children: [
+      /* @__PURE__ */ jsx("span", { className: "nav-pending-fixed", children: target }),
+      /* @__PURE__ */ jsx("span", { children: text })
+    ] })
+  ] }) });
+}
+let snapCount = 0;
+function snapAway(ghost) {
+  const id = `nav-snap-${snapCount++}`;
+  const ns = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(ns, "svg");
+  svg.setAttribute("width", "0");
+  svg.setAttribute("height", "0");
+  svg.setAttribute("aria-hidden", "true");
+  svg.style.position = "absolute";
+  svg.innerHTML = `<filter id="${id}" x="-20%" y="-60%" width="140%" height="220%"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="0" xChannelSelector="R" yChannelSelector="G"/></filter>`;
+  document.body.appendChild(svg);
+  const disp = svg.querySelector("feDisplacementMap");
+  const full = ghost.offsetHeight;
+  ghost.style.filter = `url(#${id})`;
+  ghost.style.pointerEvents = "none";
+  const done = () => {
+    ghost.remove();
+    svg.remove();
+  };
+  let closing = null;
+  const dissolve = animate(0, 1, {
+    duration: 1.1,
+    ease: [0.15, 0.55, 0.35, 1],
+    onUpdate: (v) => {
+      disp?.setAttribute("scale", String(Math.pow(v, 1.15) * 110));
+      ghost.style.opacity = String(1 - Math.pow(v, 1.4));
+      const glow = Math.round(55 * Math.sin(v * Math.PI));
+      ghost.style.filter = `url(#${id}) drop-shadow(0 0 ${(v * 6).toFixed(1)}px color-mix(in srgb, color-mix(in srgb, var(--brand-500) 70%, white) ${glow}%, transparent))`;
+      ghost.style.transform = `translate(${v * 30}px, ${-v * 14}px)`;
+      if (!closing && v >= 0.5) {
+        const closeRow = animate(
+          ghost,
+          { height: [full, 0] },
+          { duration: 0.65, ease: [0.32, 0.72, 0, 1] }
+        );
+        closing = new Promise((resolve) => void closeRow.then(resolve));
+      }
+    }
+  });
+  void dissolve.then(() => Promise.resolve(closing).then(done));
+}
+function snapRowsNow(labels) {
+  if (labels.length === 0) return;
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+  const nav = document.querySelector(".sidebar nav.nav");
+  if (!nav) return;
+  const wanted = new Set(
+    labels.map((l) => l.trim().toLowerCase()).filter((l) => l !== "products")
+  );
+  const rows = Array.from(
+    nav.querySelectorAll("ul.navgroup > li.navitem")
+  ).filter(
+    (li) => wanted.has(li.innerText.split("\n")[0].trim().toLowerCase())
+  );
+  if (rows.length === 0 || rows.length > 6) return;
+  rows.forEach((li, i) => {
+    const ghost = li.cloneNode(true);
+    ghost.dataset.snapGhost = "true";
+    li.dataset.snapped = "true";
+    li.parentElement?.insertBefore(ghost, li);
+    li.style.display = "none";
+    setTimeout(() => snapAway(ghost), i * 60);
+    setTimeout(() => {
+      if (li.isConnected) {
+        li.style.display = "";
+        delete li.dataset.snapped;
+      }
+    }, 8e3);
+  });
+}
+function useRowEntrance() {
+  useEffect(() => {
+    const nav = document.querySelector(".sidebar nav.nav");
+    if (!nav) return;
+    const reduce = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    const seen = new WeakSet(
+      Array.from(nav.querySelectorAll("ul.navgroup > li.navitem"))
+    );
+    const enter = (rows, heights) => {
+      rows.forEach((li, i) => {
+        const link = li.firstElementChild;
+        const opts = { duration: 0.8, delay: i * 0.09, ease: eases.out };
+        void growRow(li, heights[i], opts);
+        if (link) void animate(link, { x: [-12, 0] }, opts);
+      });
+    };
+    const mo = new MutationObserver((records) => {
+      if (!reduce && navChangeIsRecent()) {
+        const gone = [];
+        for (const r of records) {
+          if (!(r.target instanceof HTMLElement)) continue;
+          if (!r.target.matches("ul.navgroup")) continue;
+          r.removedNodes.forEach((node) => {
+            if (!(node instanceof HTMLElement) || !node.matches("li.navitem"))
+              return;
+            if (node.dataset.snapGhost || node.dataset.snapped) return;
+            const ghost = node.cloneNode(true);
+            ghost.dataset.snapGhost = "true";
+            seen.add(ghost);
+            const next = r.nextSibling;
+            r.target.insertBefore(
+              ghost,
+              next && next.isConnected ? next : null
+            );
+            gone.push(ghost);
+          });
+        }
+        if (gone.length > 0 && gone.length <= 6) {
+          const run = () => gone.forEach((g, i) => setTimeout(() => snapAway(g), i * 60));
+          if (navIsPending()) onNavPendingEnd(run);
+          else run();
+        } else gone.forEach((g) => g.remove());
+      }
+      const fresh = Array.from(
+        nav.querySelectorAll("ul.navgroup > li.navitem")
+      ).filter((li) => !seen.has(li) && !li.dataset.snapGhost);
+      fresh.forEach((li) => seen.add(li));
+      if (reduce || fresh.length === 0 || fresh.length > 6) return;
+      if (!navChangeIsRecent()) return;
+      const heights = fresh.map((li) => li.offsetHeight);
+      fresh.forEach(holdRow);
+      if (navIsPending()) onNavPendingEnd(() => enter(fresh, heights));
+      else enter(fresh, heights);
+    });
+    mo.observe(nav, { childList: true, subtree: true });
+    return () => mo.disconnect();
+  }, []);
+}
+function NavPendingRows({ show }) {
+  const { pending, label, startedAt } = useNavPendingState();
+  useRowEntrance();
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: show && pending && /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      role: "status",
+      "aria-label": "Updating your menu",
+      className: "nav-pending",
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 },
+      transition: { duration: durations.normal, ease: eases.out },
+      children: /* @__PURE__ */ jsx(AsciiLoader, { label, startedAt })
+    },
+    "nav-pending"
+  ) });
+}
+export {
+  NavPendingRows,
+  snapRowsNow
+};
+//# sourceMappingURL=nav-pending-row.js.map

package/dist/sidebar/nav-pending-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sidebar/nav-pending-row.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { animate, AnimatePresence, motion } from 'motion/react';\nimport { durations, eases } from '@withpotter/lib/motion';\nimport {\n  navChangeIsRecent,\n  navIsPending,\n  onNavPendingEnd,\n  useNavPendingState,\n} from '@withpotter/lib/nav-pending';\nimport { growRow, holdRow } from './row-entrance';\n\n/** The glyphs a line scrambles through before it settles on its words. */\nconst GLYPHS = '░▒▓█▌▐▀▄#%&*+=<>/\\\\|';\nconst SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];\nconst TICK_MS = 70;\n/** How long the words take to resolve out of the scramble. */\nconst RESOLVE_MS = 900;\n\nfunction scramble(target: string, resolved: number): string {\n  return target\n    .split('')\n    .map((ch, i) =>\n      i < resolved || ch === ' '\n        ? ch\n        : GLYPHS[Math.floor(Math.random() * GLYPHS.length)],\n    )\n    .join('');\n}\n\n/**\n * The loader: one line where the new rows will land, in the rail's own type. A\n * blue braille spinner and a line that scrambles through block characters\n * before it settles on what is being set up. The left edge is the rail's own,\n * so the real rows take the same place when they come in.\n */\nfunction AsciiLoader({\n  label,\n  startedAt,\n}: {\n  label: string;\n  startedAt: number;\n}) {\n  const target = label || 'Updating your menu';\n  // Everything that changes frame to frame is worked out in the timer, not in\n  // render: the clock and the random glyphs are not things a render may read.\n  const [view, setView] = useState({\n    frame: 0,\n    text: target,\n  });\n\n  useEffect(() => {\n    let n = 0;\n    const t = setInterval(() => {\n      n += 1;\n      const elapsed = Date.now() - startedAt;\n      const resolved = Math.floor((elapsed / RESOLVE_MS) * target.length);\n      setView({\n        frame: n,\n        text: scramble(target, resolved),\n      });\n    }, TICK_MS);\n    return () => clearInterval(t);\n  }, [startedAt, target]);\n\n  const { frame, text } = view;\n  return (\n    <div className=\"nav-pending-ascii\" aria-hidden=\"true\">\n      <div className=\"nav-pending-line\">\n        <span className=\"nav-pending-spin\">\n          {SPINNER[frame % SPINNER.length]}\n        </span>\n        <span className=\"nav-pending-words\">\n          <span className=\"nav-pending-fixed\">{target}</span>\n          <span>{text}</span>\n        </span>\n      </div>\n    </div>\n  );\n}\n\nlet snapCount = 0;\n\n/**\n * A removed row turns to dust: it is displaced by fractal noise that grows\n * while it fades and drifts up and away, and then its space closes. The filter\n * is made for the one row and removed with it.\n */\nfunction snapAway(ghost: HTMLElement) {\n  const id = `nav-snap-${snapCount++}`;\n  const ns = 'http://www.w3.org/2000/svg';\n  const svg = document.createElementNS(ns, 'svg');\n  svg.setAttribute('width', '0');\n  svg.setAttribute('height', '0');\n  svg.setAttribute('aria-hidden', 'true');\n  svg.style.position = 'absolute';\n  svg.innerHTML = `<filter id=\"${id}\" x=\"-20%\" y=\"-60%\" width=\"140%\" height=\"220%\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.7\" numOctaves=\"2\" result=\"n\"/><feDisplacementMap in=\"SourceGraphic\" in2=\"n\" scale=\"0\" xChannelSelector=\"R\" yChannelSelector=\"G\"/></filter>`;\n  document.body.appendChild(svg);\n  const disp = svg.querySelector('feDisplacementMap');\n  const full = ghost.offsetHeight;\n  ghost.style.filter = `url(#${id})`;\n  ghost.style.pointerEvents = 'none';\n  const done = () => {\n    ghost.remove();\n    svg.remove();\n  };\n  // The row dissolves for about a second. Its space starts closing while the\n  // dust is still drifting, so the rows below glide up rather than jumping when\n  // the row finally ends.\n  let closing: Promise<void> | null = null;\n  const dissolve = animate(0, 1, {\n    duration: 1.1,\n    ease: [0.15, 0.55, 0.35, 1],\n    onUpdate: (v) => {\n      disp?.setAttribute('scale', String(Math.pow(v, 1.15) * 110));\n      ghost.style.opacity = String(1 - Math.pow(v, 1.4));\n      // A little blue in the dust: a glow that swells as the row breaks up and\n      // thins out with it.\n      const glow = Math.round(55 * Math.sin(v * Math.PI));\n      ghost.style.filter = `url(#${id}) drop-shadow(0 0 ${(v * 6).toFixed(1)}px color-mix(in srgb, color-mix(in srgb, var(--brand-500) 70%, white) ${glow}%, transparent))`;\n      ghost.style.transform = `translate(${v * 30}px, ${-v * 14}px)`;\n      if (!closing && v >= 0.5) {\n        const closeRow = animate(\n          ghost,\n          { height: [full, 0] },\n          { duration: 0.65, ease: [0.32, 0.72, 0, 1] },\n        );\n        closing = new Promise<void>((resolve) => void closeRow.then(resolve));\n      }\n    },\n  });\n  void dissolve.then(() => Promise.resolve(closing).then(done));\n}\n\n/**\n * Starts dissolving the named rows at once, on the press, instead of waiting for\n * the save to come back and the sidebar to drop them (about a quarter of a\n * second, which read as lag before the effect). Each live row is hidden and a\n * copy takes its place and dissolves; when the sidebar then drops the real row\n * it is skipped, because the copy is already going. If the save never lands the\n * row comes back after a few seconds.\n */\nexport function snapRowsNow(labels: string[]) {\n  if (labels.length === 0) return;\n  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n  const nav = document.querySelector('.sidebar nav.nav');\n  if (!nav) return;\n  // Compared without case: the nav says \"Digital products\" where the type's\n  // own name is \"Digital Products\". The main Products row is never dissolved.\n  const wanted = new Set(\n    labels.map((l) => l.trim().toLowerCase()).filter((l) => l !== 'products'),\n  );\n  const rows = Array.from(\n    nav.querySelectorAll<HTMLElement>('ul.navgroup > li.navitem'),\n  ).filter((li) =>\n    wanted.has(li.innerText.split('\\n')[0].trim().toLowerCase()),\n  );\n  if (rows.length === 0 || rows.length > 6) return;\n  rows.forEach((li, i) => {\n    const ghost = li.cloneNode(true) as HTMLElement;\n    ghost.dataset.snapGhost = 'true';\n    li.dataset.snapped = 'true';\n    li.parentElement?.insertBefore(ghost, li);\n    li.style.display = 'none';\n    setTimeout(() => snapAway(ghost), i * 60);\n    // The save failed or the row is not going after all: put it back.\n    setTimeout(() => {\n      if (li.isConnected) {\n        li.style.display = '';\n        delete li.dataset.snapped;\n      }\n    }, 8000);\n  });\n}\n\n/**\n * New rows arriving in the sidebar after a business type is switched on are\n * held back until the loader lifts, then grow open and slide in rather than\n * appearing in a frame. Watches the rail for list items added to a section\n * after it first drew, and only touches them when the change is the one the\n * loader was waiting on.\n */\nfunction useRowEntrance() {\n  useEffect(() => {\n    const nav = document.querySelector('.sidebar nav.nav');\n    if (!nav) return;\n    const reduce = window.matchMedia(\n      '(prefers-reduced-motion: reduce)',\n    ).matches;\n    const seen = new WeakSet<Element>(\n      Array.from(nav.querySelectorAll('ul.navgroup > li.navitem')),\n    );\n\n    const enter = (rows: HTMLElement[], heights: number[]) => {\n      rows.forEach((li, i) => {\n        const link = li.firstElementChild as HTMLElement | null;\n        const opts = { duration: 0.8, delay: i * 0.09, ease: eases.out };\n        void growRow(li, heights[i], opts);\n        if (link) void animate(link, { x: [-12, 0] }, opts);\n      });\n    };\n\n    const mo = new MutationObserver((records) => {\n      // A row that was removed stays in place as a copy until the loader lifts,\n      // then turns to dust, so the removal is seen rather than missed.\n      if (!reduce && navChangeIsRecent()) {\n        const gone: HTMLElement[] = [];\n        for (const r of records) {\n          if (!(r.target instanceof HTMLElement)) continue;\n          if (!r.target.matches('ul.navgroup')) continue;\n          r.removedNodes.forEach((node) => {\n            if (!(node instanceof HTMLElement) || !node.matches('li.navitem'))\n              return;\n            if (node.dataset.snapGhost || node.dataset.snapped) return;\n            const ghost = node.cloneNode(true) as HTMLElement;\n            ghost.dataset.snapGhost = 'true';\n            seen.add(ghost);\n            const next = r.nextSibling;\n            r.target.insertBefore(\n              ghost,\n              next && next.isConnected ? next : null,\n            );\n            gone.push(ghost);\n          });\n        }\n        if (gone.length > 0 && gone.length <= 6) {\n          const run = () =>\n            gone.forEach((g, i) => setTimeout(() => snapAway(g), i * 60));\n          if (navIsPending()) onNavPendingEnd(run);\n          else run();\n        } else gone.forEach((g) => g.remove());\n      }\n      const fresh = Array.from(\n        nav.querySelectorAll<HTMLElement>('ul.navgroup > li.navitem'),\n      ).filter((li) => !seen.has(li) && !li.dataset.snapGhost);\n      fresh.forEach((li) => seen.add(li));\n      if (reduce || fresh.length === 0 || fresh.length > 6) return;\n      if (!navChangeIsRecent()) return;\n      const heights = fresh.map((li) => li.offsetHeight);\n      // Hidden at once, before the next paint, so a row never shows at full\n      // size for the frame before its animation starts.\n      fresh.forEach(holdRow);\n      if (navIsPending()) onNavPendingEnd(() => enter(fresh, heights));\n      else enter(fresh, heights);\n    });\n    mo.observe(nav, { childList: true, subtree: true });\n    return () => mo.disconnect();\n  }, []);\n}\n\nexport function NavPendingRows({ show }: { show: boolean }) {\n  const { pending, label, startedAt } = useNavPendingState();\n  useRowEntrance();\n  return (\n    <AnimatePresence initial={false}>\n      {show && pending && (\n        <motion.div\n          key=\"nav-pending\"\n          role=\"status\"\n          aria-label=\"Updating your menu\"\n          className=\"nav-pending\"\n          initial={{ opacity: 0, height: 0 }}\n          animate={{ opacity: 1, height: 'auto' }}\n          exit={{ opacity: 0, height: 0 }}\n          transition={{ duration: durations.normal, ease: eases.out }}\n        >\n          <AsciiLoader label={label} startedAt={startedAt} />\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/sidebar/nav-permissions.d.ts

@@ -0,0 +1,28 @@
+import type { PermissionKey } from '@withpotter/lib/use-permissions';
+/**
+ * Permission map for intent-generated nav items (keyed by the item id
+ * inside an IntentConfig's navigation.groups).
+ *
+ * Semantics: any-of — the user needs AT LEAST ONE listed permission
+ * (or be OWNER, which `usePermissions().can` short-circuits).
+ *
+ * **An id missing from this map is hidden, not shown.** It used to be the other
+ * way round, and the archetype configs had grown ten ids this map had never
+ * heard of — `today`, `discounts`, `loyalty`, `subscribers`, `subscriptions`,
+ * `inquiries`, `collections`, `blog`, `hours` and `service-areas` — every one of
+ * which rendered for every member whatever their role. A Fulfillment packer
+ * holds four permissions, none of them marketing, and was looking at Discounts
+ * and Loyalty.
+ *
+ * Defaulting to hidden is what makes that class of bug impossible rather than
+ * merely fixed: the next row someone adds is private until deliberately made
+ * public. `nav-permission-coverage.test.ts` fails the build if a config ships an
+ * id with no entry here, so "hidden" can never quietly mean "gone".
+ *
+ * This lives apart from `config.ts` because it is data, and because the coverage
+ * test has to read it under `tsx --test` without pulling in lucide-react and the
+ * icon map behind it.
+ */
+export declare const INTENT_ITEM_PERMISSIONS: Record<string, PermissionKey[]>;
+/** Permission map for the fixed catalog-tools entries (collections, discounts, blog). */
+export declare const CORE_TOOL_PERMISSIONS: Record<string, PermissionKey[]>;

package/dist/sidebar/nav-permissions.js

@@ -0,0 +1,64 @@
+const INTENT_ITEM_PERMISSIONS = {
+  // Work surfaces
+  today: ["canViewOrders", "canManageOrders"],
+  orders: ["canViewOrders", "canManageOrders"],
+  // No `abandoned`. The row is Marketing's spine row now, and it carries its
+  // own `requiredPermission` — still the orders pair, because an abandoned
+  // cart is an order that never happened. This map is only for items an
+  // archetype config declares, and none declares that one any more.
+  reservations: ["canViewOrders", "canManageOrders"],
+  availability: ["canViewOrders", "canManageOrders"],
+  waitlist: ["canViewOrders", "canManageOrders"],
+  calendar: ["canViewOrders", "canManageOrders"],
+  tabs: ["canManageOrders"],
+  shipping: ["canManageOrders"],
+  attendees: ["canViewOrders"],
+  // The events a business has put on. Same pair as the catalogue it is a view
+  // of: whoever can read the listings can read them by date.
+  events: ["canViewProducts", "canManageProducts"],
+  "check-in": ["canManageOrders"],
+  invoices: ["canViewOrders", "canManageOrders"],
+  // What is sold
+  catalog: ["canViewProducts", "canManageProducts"],
+  collections: ["canViewProducts", "canManageProducts"],
+  subscriptions: ["canViewProducts", "canManageProducts"],
+  resources: ["canManageProducts"],
+  // People. `subscribers` is a commitment as much as a person, so either the
+  // orders or the customers grant reaches it.
+  subscribers: ["canViewOrders", "canManageOrders", "canViewMembers"],
+  inquiries: [
+    "canViewCommunications",
+    "canManageCommunications",
+    "canViewMembers",
+    "canManageMembers"
+  ],
+  // Marketing. Loyalty sits across two grants on purpose: it is a promotion to
+  // whoever runs discounts and a customer record to whoever answers the phone,
+  // and any-of means neither of them loses it.
+  discounts: ["canViewDiscounts", "canManageDiscounts"],
+  loyalty: [
+    "canViewDiscounts",
+    "canManageDiscounts",
+    "canViewMembers",
+    "canManageMembers"
+  ],
+  blog: ["canViewBlog", "canManageBlog"],
+  // Order revenue, not campaign copy. Someone who may write a send is not
+  // automatically someone who may see what the business earns.
+  attribution: ["canViewAnalytics"],
+  // Configuration wearing a nav row. These are settings surfaces that some
+  // archetypes surface directly, so they take the settings grant.
+  hours: ["canManageSettings"],
+  locations: ["canManageSettings"],
+  "calendar-sync": ["canManageSettings"]
+};
+const CORE_TOOL_PERMISSIONS = {
+  collections: ["canViewProducts", "canManageProducts"],
+  discounts: ["canViewDiscounts", "canManageDiscounts"],
+  blog: ["canManageBlog", "canViewBlog"]
+};
+export {
+  CORE_TOOL_PERMISSIONS,
+  INTENT_ITEM_PERMISSIONS
+};
+//# sourceMappingURL=nav-permissions.js.map

package/dist/sidebar/nav-permissions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sidebar/nav-permissions.ts"],"sourcesContent":["import type { PermissionKey } from '@withpotter/lib/use-permissions';\n\n/**\n * Permission map for intent-generated nav items (keyed by the item id\n * inside an IntentConfig's navigation.groups).\n *\n * Semantics: any-of — the user needs AT LEAST ONE listed permission\n * (or be OWNER, which `usePermissions().can` short-circuits).\n *\n * **An id missing from this map is hidden, not shown.** It used to be the other\n * way round, and the archetype configs had grown ten ids this map had never\n * heard of — `today`, `discounts`, `loyalty`, `subscribers`, `subscriptions`,\n * `inquiries`, `collections`, `blog`, `hours` and `service-areas` — every one of\n * which rendered for every member whatever their role. A Fulfillment packer\n * holds four permissions, none of them marketing, and was looking at Discounts\n * and Loyalty.\n *\n * Defaulting to hidden is what makes that class of bug impossible rather than\n * merely fixed: the next row someone adds is private until deliberately made\n * public. `nav-permission-coverage.test.ts` fails the build if a config ships an\n * id with no entry here, so \"hidden\" can never quietly mean \"gone\".\n *\n * This lives apart from `config.ts` because it is data, and because the coverage\n * test has to read it under `tsx --test` without pulling in lucide-react and the\n * icon map behind it.\n */\nexport const INTENT_ITEM_PERMISSIONS: Record<string, PermissionKey[]> = {\n  // Work surfaces\n  today: ['canViewOrders', 'canManageOrders'],\n  orders: ['canViewOrders', 'canManageOrders'],\n  // No `abandoned`. The row is Marketing's spine row now, and it carries its\n  // own `requiredPermission` — still the orders pair, because an abandoned\n  // cart is an order that never happened. This map is only for items an\n  // archetype config declares, and none declares that one any more.\n  reservations: ['canViewOrders', 'canManageOrders'],\n  availability: ['canViewOrders', 'canManageOrders'],\n  waitlist: ['canViewOrders', 'canManageOrders'],\n  calendar: ['canViewOrders', 'canManageOrders'],\n  tabs: ['canManageOrders'],\n  shipping: ['canManageOrders'],\n  attendees: ['canViewOrders'],\n  // The events a business has put on. Same pair as the catalogue it is a view\n  // of: whoever can read the listings can read them by date.\n  events: ['canViewProducts', 'canManageProducts'],\n  'check-in': ['canManageOrders'],\n  invoices: ['canViewOrders', 'canManageOrders'],\n\n  // What is sold\n  catalog: ['canViewProducts', 'canManageProducts'],\n  collections: ['canViewProducts', 'canManageProducts'],\n  subscriptions: ['canViewProducts', 'canManageProducts'],\n  resources: ['canManageProducts'],\n\n  // People. `subscribers` is a commitment as much as a person, so either the\n  // orders or the customers grant reaches it.\n  subscribers: ['canViewOrders', 'canManageOrders', 'canViewMembers'],\n  inquiries: [\n    'canViewCommunications',\n    'canManageCommunications',\n    'canViewMembers',\n    'canManageMembers',\n  ],\n\n  // Marketing. Loyalty sits across two grants on purpose: it is a promotion to\n  // whoever runs discounts and a customer record to whoever answers the phone,\n  // and any-of means neither of them loses it.\n  discounts: ['canViewDiscounts', 'canManageDiscounts'],\n  loyalty: [\n    'canViewDiscounts',\n    'canManageDiscounts',\n    'canViewMembers',\n    'canManageMembers',\n  ],\n  blog: ['canViewBlog', 'canManageBlog'],\n  // Order revenue, not campaign copy. Someone who may write a send is not\n  // automatically someone who may see what the business earns.\n  attribution: ['canViewAnalytics'],\n\n  // Configuration wearing a nav row. These are settings surfaces that some\n  // archetypes surface directly, so they take the settings grant.\n  hours: ['canManageSettings'],\n  locations: ['canManageSettings'],\n  'calendar-sync': ['canManageSettings'],\n};\n\n/** Permission map for the fixed catalog-tools entries (collections, discounts, blog). */\nexport const CORE_TOOL_PERMISSIONS: Record<string, PermissionKey[]> = {\n  collections: ['canViewProducts', 'canManageProducts'],\n  discounts: ['canViewDiscounts', 'canManageDiscounts'],\n  blog: ['canManageBlog', 'canViewBlog'],\n};\n"],"mappings":"AA0BO,MAAM,0BAA2D;AAAA;AAAA,EAEtE,OAAO,CAAC,iBAAiB,iBAAiB;AAAA,EAC1C,QAAQ,CAAC,iBAAiB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3C,cAAc,CAAC,iBAAiB,iBAAiB;AAAA,EACjD,cAAc,CAAC,iBAAiB,iBAAiB;AAAA,EACjD,UAAU,CAAC,iBAAiB,iBAAiB;AAAA,EAC7C,UAAU,CAAC,iBAAiB,iBAAiB;AAAA,EAC7C,MAAM,CAAC,iBAAiB;AAAA,EACxB,UAAU,CAAC,iBAAiB;AAAA,EAC5B,WAAW,CAAC,eAAe;AAAA;AAAA;AAAA,EAG3B,QAAQ,CAAC,mBAAmB,mBAAmB;AAAA,EAC/C,YAAY,CAAC,iBAAiB;AAAA,EAC9B,UAAU,CAAC,iBAAiB,iBAAiB;AAAA;AAAA,EAG7C,SAAS,CAAC,mBAAmB,mBAAmB;AAAA,EAChD,aAAa,CAAC,mBAAmB,mBAAmB;AAAA,EACpD,eAAe,CAAC,mBAAmB,mBAAmB;AAAA,EACtD,WAAW,CAAC,mBAAmB;AAAA;AAAA;AAAA,EAI/B,aAAa,CAAC,iBAAiB,mBAAmB,gBAAgB;AAAA,EAClE,WAAW;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW,CAAC,oBAAoB,oBAAoB;AAAA,EACpD,SAAS;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,MAAM,CAAC,eAAe,eAAe;AAAA;AAAA;AAAA,EAGrC,aAAa,CAAC,kBAAkB;AAAA;AAAA;AAAA,EAIhC,OAAO,CAAC,mBAAmB;AAAA,EAC3B,WAAW,CAAC,mBAAmB;AAAA,EAC/B,iBAAiB,CAAC,mBAAmB;AACvC;AAGO,MAAM,wBAAyD;AAAA,EACpE,aAAa,CAAC,mBAAmB,mBAAmB;AAAA,EACpD,WAAW,CAAC,oBAAoB,oBAAoB;AAAA,EACpD,MAAM,CAAC,iBAAiB,aAAa;AACvC;","names":[]}

package/dist/sidebar/nav-renderer-deps.d.ts

@@ -0,0 +1,41 @@
+import type { NavItem, NavGroup } from './config';
+/** What the sidebar's render pass hands to `createNavRenderers`. */
+export interface NavRendererDeps {
+    collapsed: boolean;
+    /** Prefetch a route when the pointer arrives, not when it clicks. */
+    warm: (href: string) => void;
+    /** The single row carrying the active highlight. */
+    /**
+     * The row the URL is on, or NULL where the URL is on no row at all.
+     *
+     * It was `string` and the sidebar's own fallback already ended in `?? null`,
+     * which typechecked only because indexing an array returns `string` here.
+     * The ask screen made the null real: it is deliberately not a nav
+     * destination, so nothing should light — and the honest type for "nothing"
+     * is not an href that happens to match nobody.
+     */
+    activeHref: string | null;
+    isActive: (href: string) => boolean;
+    /**
+     * Which hub the merchant has opened, and it is ONE.
+     *
+     * `undefined` — they have not chosen, so the hub owning the current route is
+     * the open one. A hub id — that hub, and only that hub. `null` — they shut
+     * the one that was open and nothing is open now.
+     *
+     * A map of independent booleans is what let two hubs stand open at once, and
+     * two open hubs put two sub-lists on the rail with one highlight between
+     * them: the second list reads as still awaiting a choice you already made.
+     */
+    hubChoice: string | null | undefined;
+    setHubOpen: (id: string, next: boolean) => void;
+    getGroupItems: (group: NavGroup) => NavItem[];
+    /**
+     * Counts by nav item id, from `useNavBadges`. Passed in rather than read
+     * here because `createNavRenderers` is a plain factory and cannot hold a
+     * hook — the same reason `prefersReducedMotion` is read at render below.
+     */
+    badges?: Record<string, number>;
+    /** Rows that appeared because the business added something this week. */
+    isNew?: (id: string) => boolean;
+}

package/dist/sidebar/nav-renderer-deps.js

@@ -0,0 +1 @@
+//# sourceMappingURL=nav-renderer-deps.js.map

package/dist/sidebar/nav-renderer-deps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/sidebar/nav-renderers.d.ts

@@ -0,0 +1,55 @@
+import type { LucideIcon } from 'lucide-react';
+import { type NavItem, type NavGroup } from './config';
+import type { NavRendererDeps } from './nav-renderer-deps';
+export type { NavRendererDeps } from './nav-renderer-deps';
+/**
+ * One highlight per open hub, MOVED between its children rather than
+ * replaced on each of them.
+ *
+ * The obvious version — a `layoutId` on a pill that unmounts from one row and
+ * mounts on the next — is what this replaces. Framer took ownership of the
+ * element (it carried the projection styles) but resolved no delta and put it
+ * down on the new row with the frames in between missing, and chasing that
+ * through framer's projection internals is not worth what it buys. A pill
+ * that never unmounts cannot fail to match itself: `y` is an ordinary
+ * animated value on one persistent element, so there is nothing to hand off.
+ *
+ * `offsetTop` off the row rather than index × pitch, so the row height, the
+ * gap and the group's padding stay facts of the stylesheet. Read in a layout
+ * effect, before paint, so the pill is never seen at the wrong row.
+ *
+ * A spring, not a curve: this is the one thing in the nav that genuinely
+ * moves, and clicking a third row mid-flight has to reverse from wherever it
+ * got to, carrying its velocity.
+ */
+/**
+ * Read at render rather than through `useReducedMotion`, because
+ * `createNavRenderers` is a plain factory and not a hook — it cannot hold one.
+ * Non-reactive is correct here anyway: the transition config is consulted when
+ * an animation starts, so a preference changed mid-session applies to the next
+ * open rather than to one already in flight.
+ */
+/**
+ * The sidebar's row, hub and section renderers.
+ *
+ * A factory rather than components: each one reads seven values that belong to
+ * the sidebar's render pass (what is active, what the merchant has toggled
+ * open), and threading those through props one component at a time was what
+ * kept them inside a 1,510-line file in the first place.
+ *
+ * Anything with STATE must stay outside it. This runs on every render of the
+ * sidebar, so a component declared in here is a new function identity each
+ * time, and React unmounts and remounts it on every pass — which silently
+ * destroys any hook state it was holding. That is what defeated the first two
+ * attempts at a sliding highlight: `SubHighlight` was resetting its motion
+ * values before it could ever animate them, and it looked exactly like a
+ * framer bug. `SubHighlight` and `NavPending` live above for that reason.
+ */
+export declare function createNavRenderers({ collapsed, warm, activeHref, isActive, hubChoice, setHubOpen, getGroupItems, badges, isNew, }: NavRendererDeps): {
+    renderIcon: (id: string | undefined, Fallback: LucideIcon, size?: number) => import("react").JSX.Element;
+    renderHighlight: (active: boolean) => import("react").JSX.Element | null;
+    renderRow: (item: NavItem, sub?: boolean, count?: number) => import("react").JSX.Element;
+    renderHub: (group: NavGroup) => import("react").JSX.Element;
+    renderWorkRow: (item: NavItem) => import("react").JSX.Element;
+    ownsRoute: (items: (NavItem | NavGroup | undefined)[]) => boolean;
+};