@withpotter/components 0.13.0-next.101

package/dist/shell/search-scopes.js

@@ -0,0 +1,14 @@
+const SCOPES = [
+  { id: "order", label: "Orders" },
+  { id: "customer", label: "Customers" },
+  { id: "product", label: "Products" },
+  { id: "invoice", label: "Invoices" },
+  /* Support cases, and the chip is hidden where the module is off — see
+     `isServiceOperationsEnabled`. A drawer that opens onto a permanent
+     "nothing here yet" is worse than no drawer. */
+  { id: "support", label: "Support" }
+];
+export {
+  SCOPES
+};
+//# sourceMappingURL=search-scopes.js.map

package/dist/shell/search-scopes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/search-scopes.ts"],"sourcesContent":["/**\n * What the strip under the field narrows to, and the only four kinds of record\n * this search can actually return — `useCommandSearch` reads orders, members,\n * invoices, products and support cases, so a sixth chip would be a promise\n * with no query behind it. Shopify's own strip is the same ideas plus Apps and\n * Sales channels, which are theirs and not ours.\n *\n * Their own file because both halves of the panel need them and neither owns\n * the other: the head renders the strip, the body filters by what it chose.\n */\nexport const SCOPES = [\n  { id: 'order', label: 'Orders' },\n  { id: 'customer', label: 'Customers' },\n  { id: 'product', label: 'Products' },\n  { id: 'invoice', label: 'Invoices' },\n  /* Support cases, and the chip is hidden where the module is off — see\n     `isServiceOperationsEnabled`. A drawer that opens onto a permanent\n     \"nothing here yet\" is worse than no drawer. */\n  { id: 'support', label: 'Support' },\n] as const;\n\nexport type Scope = (typeof SCOPES)[number]['id'];\n"],"mappings":"AAUO,MAAM,SAAS;AAAA,EACpB,EAAE,IAAI,SAAS,OAAO,SAAS;AAAA,EAC/B,EAAE,IAAI,YAAY,OAAO,YAAY;AAAA,EACrC,EAAE,IAAI,WAAW,OAAO,WAAW;AAAA,EACnC,EAAE,IAAI,WAAW,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA,EAInC,EAAE,IAAI,WAAW,OAAO,UAAU;AACpC;","names":[]}

package/dist/shell/search-whats-new.d.ts

@@ -0,0 +1,48 @@
+/**
+ * WHAT'S NEW, AS A FOOTER AND AS A PAGE INSIDE THE SEARCH PANEL.
+ *
+ * John, 2026-09-03: *"the whats new can just be a footer on this modal instead
+ * of what it is, and then you can click on it which takes you to an inner page
+ * still on this modal which comes with a back button that takes you back to
+ * this search thing."*
+ *
+ * IT WAS A STRIP OF THREE PICTURES under the empty state, and the strip was
+ * wrong for the slot rather than badly drawn: it was the largest thing on a
+ * panel whose subject is a field you have just been given the caret in, and it
+ * vanished the moment you typed a letter — so the only state it appeared in
+ * was the one where a merchant was about to do something else. As a footer row
+ * it is a permanent, quiet offer that survives typing, and it costs one line
+ * instead of a third of the panel.
+ *
+ * THE INNER PAGE IS THE POINT. Release notes are worth reading and a three-tile
+ * shelf could not carry a sentence, so the row opened nothing and the words
+ * lived in a dialog reached from the bell. Now the panel swaps its own contents
+ * — head, body and all — for the notes, with a back button to the search. No
+ * second dialog over the first, which is the thing modals do that nobody has
+ * ever enjoyed.
+ */
+/**
+ * The row at the foot of the search view.
+ *
+ * NO SPARKLE. John, 2026-09-03: *"the whats new is using a slop, the star,
+ * sparkle thingy"*. He is right and it is worth naming: a four-point star is
+ * the 2024 shorthand for "AI did this", it has nothing to do with a release
+ * note, and it was decoration standing where an icon should mean something.
+ * The words say what the row is.
+ *
+ * NO FULL-BLEED HOVER EITHER. It painted a grey bar the whole width of the
+ * panel, which is a list-row treatment on a thing that is not in a list — the
+ * only row of its kind, at the bottom edge, so the fill read as a block of
+ * colour arriving rather than as a row lighting up. Hover moves the INK and
+ * nudges the chevron: the two smallest signals that answer "is this
+ * pressable", and the ones a footer can afford.
+ */
+export declare function WhatsNewRow({ onOpen }: {
+    onOpen: () => void;
+}): import("react").JSX.Element | null;
+/** The head of the inner page: back, and the title it went to. */
+export declare function WhatsNewHead({ onBack }: {
+    onBack: () => void;
+}): import("react").JSX.Element;
+/** The notes themselves. */
+export declare function WhatsNewView(): import("react").JSX.Element;

package/dist/shell/search-whats-new.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { ArrowLeft, ChevronRight } from "lucide-react";
+import { RELEASES } from "@withpotter/lib/whats-new";
+function WhatsNewRow({ onOpen }) {
+  const latest = RELEASES[0];
+  if (!latest) return null;
+  return (
+    /* A CARD, NOT A STRIP — John, 2026-09-03: *"we need to rethink how it
+           looks, it's so weird now"*.
+    
+           It was a full-bleed bar pinned to the panel's bottom edge with a rule
+           above it: a footer shape, and the panel has no footer any more, so it
+           read as a piece of another component that had been left behind. The
+           empty state above it is a centred column with air around it, and a
+           flush-to-the-edge bar under that is two layout ideas in one box.
+    
+           So it sits INSIDE the padding as a card, on the recessed wash, with the
+           release's own picture at 32px on the left. The picture is what makes it
+           an object rather than a line of text: you can tell at a glance whether
+           this is news you have already seen. */
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onOpen,
+        className: "group mt-1 flex w-full items-center gap-3 rounded-lg bg-[var(--bg-subtle)] p-2 text-left transition-colors hover:bg-[var(--interactive-hover)]",
+        children: [
+          latest.image && // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: latest.image,
+              alt: "",
+              loading: "lazy",
+              className: "size-8 shrink-0 rounded-md object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block text-2xs font-medium uppercase tracking-[0.06em] text-[var(--text-muted)]", children: "What\u2019s new" }),
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm text-[var(--text-secondary)] transition-colors group-hover:text-[var(--text-primary)]", children: latest.title })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              width: 13,
+              height: 13,
+              "aria-hidden": true,
+              className: "shrink-0 text-[var(--text-tertiary)] transition-transform duration-[var(--motion-fast)] ease-settle group-hover:translate-x-0.5 group-hover:text-[var(--text-primary)]"
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+function WhatsNewHead({ onBack }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        "aria-label": "Back to search",
+        className: "grid size-7 shrink-0 place-items-center rounded-lg text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]",
+        children: /* @__PURE__ */ jsx(ArrowLeft, { width: 15, height: 15 })
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-md font-semibold text-[var(--text-primary)]", children: "What\u2019s new" })
+  ] });
+}
+function WhatsNewView() {
+  const [broken, setBroken] = useState([]);
+  return /* @__PURE__ */ jsx("ul", { className: "space-y-6 px-1 pb-1", children: RELEASES.map((r) => /* @__PURE__ */ jsxs("li", { children: [
+    r.image && !broken.includes(r.id) && // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: r.image,
+        alt: "",
+        loading: "lazy",
+        onError: () => setBroken((b) => [...b, r.id]),
+        className: "mb-2 aspect-[16/9] w-full rounded-lg border border-line object-cover"
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-md font-semibold text-[var(--text-primary)]", children: r.title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-relaxed text-[var(--text-secondary)]", children: r.body }),
+    r.href && /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: r.href,
+        className: "mt-2 inline-block text-sm font-medium text-[var(--text-link)] transition-colors hover:text-[var(--text-link-hover)]",
+        children: r.hrefLabel ?? "Take a look"
+      }
+    )
+  ] }, r.id)) });
+}
+export {
+  WhatsNewHead,
+  WhatsNewRow,
+  WhatsNewView
+};
+//# sourceMappingURL=search-whats-new.js.map

package/dist/shell/search-whats-new.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/search-whats-new.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport Link from 'next/link';\nimport { ArrowLeft, ChevronRight } from 'lucide-react';\nimport { RELEASES } from '@withpotter/lib/whats-new';\n\n/**\n * WHAT'S NEW, AS A FOOTER AND AS A PAGE INSIDE THE SEARCH PANEL.\n *\n * John, 2026-09-03: *\"the whats new can just be a footer on this modal instead\n * of what it is, and then you can click on it which takes you to an inner page\n * still on this modal which comes with a back button that takes you back to\n * this search thing.\"*\n *\n * IT WAS A STRIP OF THREE PICTURES under the empty state, and the strip was\n * wrong for the slot rather than badly drawn: it was the largest thing on a\n * panel whose subject is a field you have just been given the caret in, and it\n * vanished the moment you typed a letter — so the only state it appeared in\n * was the one where a merchant was about to do something else. As a footer row\n * it is a permanent, quiet offer that survives typing, and it costs one line\n * instead of a third of the panel.\n *\n * THE INNER PAGE IS THE POINT. Release notes are worth reading and a three-tile\n * shelf could not carry a sentence, so the row opened nothing and the words\n * lived in a dialog reached from the bell. Now the panel swaps its own contents\n * — head, body and all — for the notes, with a back button to the search. No\n * second dialog over the first, which is the thing modals do that nobody has\n * ever enjoyed.\n */\n\n/**\n * The row at the foot of the search view.\n *\n * NO SPARKLE. John, 2026-09-03: *\"the whats new is using a slop, the star,\n * sparkle thingy\"*. He is right and it is worth naming: a four-point star is\n * the 2024 shorthand for \"AI did this\", it has nothing to do with a release\n * note, and it was decoration standing where an icon should mean something.\n * The words say what the row is.\n *\n * NO FULL-BLEED HOVER EITHER. It painted a grey bar the whole width of the\n * panel, which is a list-row treatment on a thing that is not in a list — the\n * only row of its kind, at the bottom edge, so the fill read as a block of\n * colour arriving rather than as a row lighting up. Hover moves the INK and\n * nudges the chevron: the two smallest signals that answer \"is this\n * pressable\", and the ones a footer can afford.\n */\nexport function WhatsNewRow({ onOpen }: { onOpen: () => void }) {\n  const latest = RELEASES[0];\n  if (!latest) return null;\n\n  return (\n    /* A CARD, NOT A STRIP — John, 2026-09-03: *\"we need to rethink how it\n       looks, it's so weird now\"*.\n\n       It was a full-bleed bar pinned to the panel's bottom edge with a rule\n       above it: a footer shape, and the panel has no footer any more, so it\n       read as a piece of another component that had been left behind. The\n       empty state above it is a centred column with air around it, and a\n       flush-to-the-edge bar under that is two layout ideas in one box.\n\n       So it sits INSIDE the padding as a card, on the recessed wash, with the\n       release's own picture at 32px on the left. The picture is what makes it\n       an object rather than a line of text: you can tell at a glance whether\n       this is news you have already seen. */\n    <button\n      type=\"button\"\n      onClick={onOpen}\n      className=\"group mt-1 flex w-full items-center gap-3 rounded-lg bg-[var(--bg-subtle)] p-2 text-left transition-colors hover:bg-[var(--interactive-hover)]\"\n    >\n      {latest.image && (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          src={latest.image}\n          alt=\"\"\n          loading=\"lazy\"\n          className=\"size-8 shrink-0 rounded-md object-cover\"\n        />\n      )}\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-2xs font-medium uppercase tracking-[0.06em] text-[var(--text-muted)]\">\n          What&rsquo;s new\n        </span>\n        {/* The headline, not a count. \"3 updates\" is a number about us; the\n            newest thing that changed is the only part a merchant can decide\n            whether they care about without opening anything. */}\n        <span className=\"block truncate text-sm text-[var(--text-secondary)] transition-colors group-hover:text-[var(--text-primary)]\">\n          {latest.title}\n        </span>\n      </span>\n      <ChevronRight\n        width={13}\n        height={13}\n        aria-hidden\n        className=\"shrink-0 text-[var(--text-tertiary)] transition-transform duration-[var(--motion-fast)] ease-settle group-hover:translate-x-0.5 group-hover:text-[var(--text-primary)]\"\n      />\n    </button>\n  );\n}\n\n/** The head of the inner page: back, and the title it went to. */\nexport function WhatsNewHead({ onBack }: { onBack: () => void }) {\n  return (\n    <div className=\"mb-3 flex items-center gap-2\">\n      <button\n        type=\"button\"\n        onClick={onBack}\n        aria-label=\"Back to search\"\n        className=\"grid size-7 shrink-0 place-items-center rounded-lg text-[var(--text-tertiary)] transition-colors hover:bg-[var(--interactive-hover)] hover:text-[var(--text-primary)]\"\n      >\n        <ArrowLeft width={15} height={15} />\n      </button>\n      <p className=\"text-md font-semibold text-[var(--text-primary)]\">\n        What&rsquo;s new\n      </p>\n    </div>\n  );\n}\n\n/** The notes themselves. */\nexport function WhatsNewView() {\n  const [broken, setBroken] = useState<string[]>([]);\n\n  return (\n    <ul className=\"space-y-6 px-1 pb-1\">\n      {RELEASES.map((r) => (\n        <li key={r.id}>\n          {/* A NOTE WITH NO CAPTURE STILL READS. `whats-new.ts` says a missing\n              file should collapse its frame rather than draw a broken tile,\n              and that rule is enforced here rather than trusted: `onError`\n              drops the id and the words close over the gap. */}\n          {r.image && !broken.includes(r.id) && (\n            // eslint-disable-next-line @next/next/no-img-element\n            <img\n              src={r.image}\n              alt=\"\"\n              loading=\"lazy\"\n              onError={() => setBroken((b) => [...b, r.id])}\n              className=\"mb-2 aspect-[16/9] w-full rounded-lg border border-line object-cover\"\n            />\n          )}\n          <p className=\"text-md font-semibold text-[var(--text-primary)]\">\n            {r.title}\n          </p>\n          <p className=\"mt-1 text-sm leading-relaxed text-[var(--text-secondary)]\">\n            {r.body}\n          </p>\n          {r.href && (\n            <Link\n              href={r.href}\n              className=\"mt-2 inline-block text-sm font-medium text-[var(--text-link)] transition-colors hover:text-[var(--text-link-hover)]\"\n            >\n              {r.hrefLabel ?? 'Take a look'}\n            </Link>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";AAwEQ,cAOF,YAPE;AAtER,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,SAAS,WAAW,oBAAoB;AACxC,SAAS,gBAAgB;AA0ClB,SAAS,YAAY,EAAE,OAAO,GAA2B;AAC9D,QAAM,SAAS,SAAS,CAAC;AACzB,MAAI,CAAC,OAAQ,QAAO;AAEpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAET;AAAA,iBAAO;AAAA,UAEN;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,OAAO;AAAA,cACZ,KAAI;AAAA,cACJ,SAAQ;AAAA,cACR,WAAU;AAAA;AAAA,UACZ;AAAA,UAEF,qBAAC,UAAK,WAAU,kBACd;AAAA,gCAAC,UAAK,WAAU,mFAAkF,6BAElG;AAAA,YAIA,oBAAC,UAAK,WAAU,gHACb,iBAAO,OACV;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,IACF;AAAA;AAEJ;AAGO,SAAS,aAAa,EAAE,OAAO,GAA2B;AAC/D,SACE,qBAAC,SAAI,WAAU,gCACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,cAAW;AAAA,QACX,WAAU;AAAA,QAEV,8BAAC,aAAU,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,IACpC;AAAA,IACA,oBAAC,OAAE,WAAU,oDAAmD,6BAEhE;AAAA,KACF;AAEJ;AAGO,SAAS,eAAe;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmB,CAAC,CAAC;AAEjD,SACE,oBAAC,QAAG,WAAU,uBACX,mBAAS,IAAI,CAAC,MACb,qBAAC,QAKE;AAAA,MAAE,SAAS,CAAC,OAAO,SAAS,EAAE,EAAE;AAAA,IAE/B;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,EAAE;AAAA,QACP,KAAI;AAAA,QACJ,SAAQ;AAAA,QACR,SAAS,MAAM,UAAU,CAAC,MAAM,CAAC,GAAG,GAAG,EAAE,EAAE,CAAC;AAAA,QAC5C,WAAU;AAAA;AAAA,IACZ;AAAA,IAEF,oBAAC,OAAE,WAAU,oDACV,YAAE,OACL;AAAA,IACA,oBAAC,OAAE,WAAU,6DACV,YAAE,MACL;AAAA,IACC,EAAE,QACD;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR,WAAU;AAAA,QAET,YAAE,aAAa;AAAA;AAAA,IAClB;AAAA,OA3BK,EAAE,EA6BX,CACD,GACH;AAEJ;","names":[]}

package/dist/shell/secondary-shell.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+/**
+ * The second shell itself, drawn by the layout beside the main one. The outer
+ * element is the slot (it animates its width); the aside inside holds the
+ * chrome and has a fixed width, so the slot opens onto a shell that does not
+ * reflow as it grows.
+ */
+export declare function SecondaryShellHost({ light }: {
+    light?: boolean;
+}): import("react").JSX.Element;
+/**
+ * What a page puts in the second shell: a header with its title and optional
+ * actions, and a body that scrolls on its own.
+ *
+ * With `onClose` the header carries a close button. Closing is the page's
+ * decision, not the shell's: the page stops drawing this component, which
+ * releases the slot and lets it ease shut, and the page owns the way back.
+ */
+export declare function SecondaryShell({ title, actions, onClose, flush, children, }: {
+    title: string;
+    actions?: ReactNode;
+    onClose?: () => void;
+    /** No padding and no scrolling of its own: the child fills the body and owns both. */
+    flush?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/shell/secondary-shell.js

@@ -0,0 +1,116 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { X } from "lucide-react";
+import { createPortal } from "react-dom";
+import { Button } from "@withpotter/ui-kit/button";
+import { FLAT_CONTROL, TOOLBAR_H } from "@withpotter/ui-kit/toolbar-parts";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import { durations, eases } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+const HANDOFF_MS = 250;
+let host = null;
+let claims = 0;
+const listeners = /* @__PURE__ */ new Set();
+const notifyAll = () => listeners.forEach((notify) => notify());
+function setHost(element) {
+  if (host === element) return;
+  host = element;
+  notifyAll();
+}
+function subscribe(notify) {
+  listeners.add(notify);
+  return () => {
+    listeners.delete(notify);
+  };
+}
+const getHost = () => host;
+const getServerHost = () => null;
+const getOpen = () => claims > 0;
+const getServerOpen = () => false;
+function SecondaryShellHost({ light }) {
+  const open = useSyncExternalStore(subscribe, getOpen, getServerOpen);
+  const reduce = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: false,
+      animate: {
+        width: open ? "auto" : 0,
+        opacity: open ? 1 : 0,
+        marginLeft: open ? -4 : 0
+      },
+      transition: reduce ? { duration: 0 } : { duration: durations.slow, ease: eases.settle },
+      className: "shrink-0 overflow-hidden",
+      children: /* @__PURE__ */ jsx(
+        "aside",
+        {
+          ref: setHost,
+          className: cn(
+            "m-3 ml-0 flex h-[calc(100dvh-1.5rem)] w-[28rem] shrink-0 flex-col overflow-hidden xl:w-[36rem]",
+            "rounded-[var(--radius-shell)] border border-[var(--border-shell)] bg-[var(--shell-bg)]",
+            light && "mb-force-light text-[var(--text-primary)]"
+          )
+        }
+      )
+    }
+  );
+}
+function SecondaryShell({
+  title,
+  actions,
+  onClose,
+  flush = false,
+  children
+}) {
+  const isMobile = useIsMobile();
+  const element = useSyncExternalStore(subscribe, getHost, getServerHost);
+  useEffect(() => {
+    claims += 1;
+    notifyAll();
+    return () => {
+      setTimeout(() => {
+        claims -= 1;
+        notifyAll();
+      }, HANDOFF_MS);
+    };
+  }, []);
+  if (isMobile) return /* @__PURE__ */ jsx(Fragment, { children });
+  if (!element) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "truncate text-md font-semibold text-ink", children: title }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          actions,
+          onClose && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "icon",
+              className: `${TOOLBAR_H} ${FLAT_CONTROL} aspect-square`,
+              "aria-label": `Close ${title.toLowerCase()}`,
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(X, {})
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: flush ? "min-h-0 flex-1" : "min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain p-4",
+          children
+        }
+      )
+    ] }),
+    element
+  );
+}
+export {
+  SecondaryShell,
+  SecondaryShellHost
+};
+//# sourceMappingURL=secondary-shell.js.map

package/dist/shell/secondary-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/secondary-shell.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useSyncExternalStore, type ReactNode } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { X } from 'lucide-react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@withpotter/ui-kit/button';\nimport { FLAT_CONTROL, TOOLBAR_H } from '@withpotter/ui-kit/toolbar-parts';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { durations, eases } from '@withpotter/lib/motion';\nimport { cn } from '@withpotter/lib/utils';\n\n/**\n * A second content shell beside the first.\n *\n * The dashboard has one shell: a rounded, bordered card holding the page, on\n * the ground the sidebar also sits on. Some screens are two things at once, a\n * subject and a panel about it (Shopify's admin puts its Sidekick beside the\n * page in a shell of its own), and stacking the second inside the first makes\n * a card in a card. This gives the layout a place for it.\n *\n * Opt-in, so a page that does not use it renders exactly as before:\n *\n * - `SecondaryShellHost` is drawn once by the layout, beside the main shell,\n *   with the same chrome. It is a slot: closed it is no width at all, and when a\n *   page claims it the slot eases open and the main shell gives way, rather\n *   than a second card appearing in one frame.\n * - `SecondaryShell` is what a page draws. On desktop it portals its children,\n *   with a header, into the host. On a phone, which has one column, it renders\n *   them inline in the page's own flow.\n *\n * The host element lives in a tiny module-level store rather than a provider,\n * so the layout has nothing to wrap: the layout file is on the size ledger and\n * a wrapper re-indents the whole shell block.\n */\n/** How long a released slot stays open for the next page to claim it. */\nconst HANDOFF_MS = 250;\nlet host: HTMLElement | null = null;\n/** How many mounted pages want the slot open. */\nlet claims = 0;\nconst listeners = new Set<() => void>();\n\nconst notifyAll = () => listeners.forEach((notify) => notify());\n\nfunction setHost(element: HTMLElement | null) {\n  if (host === element) return;\n\n  host = element;\n  notifyAll();\n}\n\nfunction subscribe(notify: () => void) {\n  listeners.add(notify);\n\n  return () => {\n    listeners.delete(notify);\n  };\n}\n\nconst getHost = () => host;\nconst getServerHost = () => null;\nconst getOpen = () => claims > 0;\nconst getServerOpen = () => false;\n\n/**\n * The second shell itself, drawn by the layout beside the main one. The outer\n * element is the slot (it animates its width); the aside inside holds the\n * chrome and has a fixed width, so the slot opens onto a shell that does not\n * reflow as it grows.\n */\nexport function SecondaryShellHost({ light }: { light?: boolean }) {\n  const open = useSyncExternalStore(subscribe, getOpen, getServerOpen);\n  const reduce = useReducedMotion();\n\n  return (\n    <motion.div\n      initial={false}\n      // `marginLeft` takes 4px off the main shell's 12px right margin while the\n      // slot is open, so the two shells sit 8px apart. Only while open: closed,\n      // every other page keeps the margin it has always had.\n      animate={{\n        width: open ? 'auto' : 0,\n        opacity: open ? 1 : 0,\n        marginLeft: open ? -4 : 0,\n      }}\n      transition={\n        reduce\n          ? { duration: 0 }\n          : { duration: durations.slow, ease: eases.settle }\n      }\n      className=\"shrink-0 overflow-hidden\"\n    >\n      <aside\n        ref={setHost}\n        className={cn(\n          'm-3 ml-0 flex h-[calc(100dvh-1.5rem)] w-[28rem] shrink-0 flex-col overflow-hidden xl:w-[36rem]',\n          'rounded-[var(--radius-shell)] border border-[var(--border-shell)] bg-[var(--shell-bg)]',\n          light && 'mb-force-light text-[var(--text-primary)]',\n        )}\n      />\n    </motion.div>\n  );\n}\n\n/**\n * What a page puts in the second shell: a header with its title and optional\n * actions, and a body that scrolls on its own.\n *\n * With `onClose` the header carries a close button. Closing is the page's\n * decision, not the shell's: the page stops drawing this component, which\n * releases the slot and lets it ease shut, and the page owns the way back.\n */\nexport function SecondaryShell({\n  title,\n  actions,\n  onClose,\n  flush = false,\n  children,\n}: {\n  title: string;\n  actions?: ReactNode;\n  onClose?: () => void;\n  /** No padding and no scrolling of its own: the child fills the body and owns both. */\n  flush?: boolean;\n  children: ReactNode;\n}) {\n  const isMobile = useIsMobile();\n  const element = useSyncExternalStore(subscribe, getHost, getServerHost);\n\n  // Ask for the slot while this page is mounted, and give it back on leaving.\n  useEffect(() => {\n    claims += 1;\n    notifyAll();\n\n    return () => {\n      // Hold the slot a moment past unmount. Going from one page that uses the\n      // shell to another (an automation to its editor) unmounts one and mounts\n      // the next in the same navigation; releasing at once would slide the\n      // slot shut and open again, and the whole page would appear to jump.\n      setTimeout(() => {\n        claims -= 1;\n        notifyAll();\n      }, HANDOFF_MS);\n    };\n  }, []);\n\n  // One column: stay in the page's own flow.\n  if (isMobile) return <>{children}</>;\n\n  // The host mounts with the layout; until it has, there is nowhere to draw.\n  if (!element) return null;\n\n  return createPortal(\n    <>\n      <header className=\"flex shrink-0 items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3\">\n        <h2 className=\"truncate text-md font-semibold text-ink\">{title}</h2>\n        <div className=\"flex items-center gap-2\">\n          {actions}\n          {onClose && (\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              size=\"icon\"\n              // The same framed 32px square as the toolbar's filter and search.\n              className={`${TOOLBAR_H} ${FLAT_CONTROL} aspect-square`}\n              aria-label={`Close ${title.toLowerCase()}`}\n              onClick={onClose}\n            >\n              <X />\n            </Button>\n          )}\n        </div>\n      </header>\n      <div\n        className={\n          flush\n            ? 'min-h-0 flex-1'\n            : 'min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain p-4'\n        }\n      >\n        {children}\n      </div>\n    </>,\n    element,\n  );\n}\n"],"mappings":";AA6FM,SAuDiB,UAvDjB,KAgEE,YAhEF;AA3FN,SAAS,WAAW,4BAA4C;AAChE,SAAS,QAAQ,wBAAwB;AACzC,SAAS,SAAS;AAClB,SAAS,oBAAoB;AAE7B,SAAS,cAAc;AACvB,SAAS,cAAc,iBAAiB;AACxC,SAAS,mBAAmB;AAC5B,SAAS,WAAW,aAAa;AACjC,SAAS,UAAU;AA0BnB,MAAM,aAAa;AACnB,IAAI,OAA2B;AAE/B,IAAI,SAAS;AACb,MAAM,YAAY,oBAAI,IAAgB;AAEtC,MAAM,YAAY,MAAM,UAAU,QAAQ,CAAC,WAAW,OAAO,CAAC;AAE9D,SAAS,QAAQ,SAA6B;AAC5C,MAAI,SAAS,QAAS;AAEtB,SAAO;AACP,YAAU;AACZ;AAEA,SAAS,UAAU,QAAoB;AACrC,YAAU,IAAI,MAAM;AAEpB,SAAO,MAAM;AACX,cAAU,OAAO,MAAM;AAAA,EACzB;AACF;AAEA,MAAM,UAAU,MAAM;AACtB,MAAM,gBAAgB,MAAM;AAC5B,MAAM,UAAU,MAAM,SAAS;AAC/B,MAAM,gBAAgB,MAAM;AAQrB,SAAS,mBAAmB,EAAE,MAAM,GAAwB;AACjE,QAAM,OAAO,qBAAqB,WAAW,SAAS,aAAa;AACnE,QAAM,SAAS,iBAAiB;AAEhC,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS;AAAA,MAIT,SAAS;AAAA,QACP,OAAO,OAAO,SAAS;AAAA,QACvB,SAAS,OAAO,IAAI;AAAA,QACpB,YAAY,OAAO,KAAK;AAAA,MAC1B;AAAA,MACA,YACE,SACI,EAAE,UAAU,EAAE,IACd,EAAE,UAAU,UAAU,MAAM,MAAM,MAAM,OAAO;AAAA,MAErD,WAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,SAAS;AAAA,UACX;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AACF,GAOG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,qBAAqB,WAAW,SAAS,aAAa;AAGtE,YAAU,MAAM;AACd,cAAU;AACV,cAAU;AAEV,WAAO,MAAM;AAKX,iBAAW,MAAM;AACf,kBAAU;AACV,kBAAU;AAAA,MACZ,GAAG,UAAU;AAAA,IACf;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,MAAI,SAAU,QAAO,gCAAG,UAAS;AAGjC,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO;AAAA,IACL,iCACE;AAAA,2BAAC,YAAO,WAAU,qGAChB;AAAA,4BAAC,QAAG,WAAU,2CAA2C,iBAAM;AAAA,QAC/D,qBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,UACA,WACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cAEL,WAAW,GAAG,SAAS,IAAI,YAAY;AAAA,cACvC,cAAY,SAAS,MAAM,YAAY,CAAC;AAAA,cACxC,SAAS;AAAA,cAET,8BAAC,KAAE;AAAA;AAAA,UACL;AAAA,WAEJ;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WACE,QACI,mBACA;AAAA,UAGL;AAAA;AAAA,MACH;AAAA,OACF;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/shell/settings-modal-context.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+interface SettingsModalApi {
+    /** Open the settings window, on a section when given a settings address. */
+    openSettings: (href?: string) => void;
+    /**
+     * Warm the window before it is opened: a hidden copy of the settings page
+     * loads once so the real one boots with its code fetched and its route
+     * compiled. Cheap to call repeatedly; only the first call in a page load does
+     * anything. Call it on the signals that precede opening (a menu opening, a
+     * pointer arriving on a settings link).
+     */
+    prewarmSettings: () => void;
+}
+export declare const useSettingsModal: () => SettingsModalApi;
+/**
+ * Settings is a window, never a page.
+ *
+ * The workspace menu always opened it as one; everything else that pointed at a
+ * settings address (a setup step, the Customize sidebar row, a link in an email,
+ * a typed URL) still navigated to the page. This owns the one modal and makes
+ * every road into settings arrive in it:
+ *
+ *   - a CLICK on a link to a settings address is caught before it navigates and
+ *     opens the window on that section;
+ *   - anything else that lands on a settings route (`router.push`, a pasted
+ *     address, back/forward) is sent back to where you were and the window opens
+ *     on it, with the page itself never drawn (see the layout).
+ *
+ * The framed copy of a page is the one place a settings route is allowed to
+ * render, so nothing here runs inside it.
+ */
+export declare function SettingsModalProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/shell/settings-modal-context.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { isEmbeddedFrame } from "@withpotter/lib/embedded-frame";
+import { isMobileViewport } from "@withpotter/hooks/use-mobile";
+import { UnifiedSettingsModal } from "./unified-settings-modal";
+import { movedSettingsTarget } from "./moved-settings";
+const SETTINGS_PREFIX = "/dashboard/settings";
+const isSettingsPath = (path) => !!path && (path === SETTINGS_PREFIX || path.startsWith(`${SETTINGS_PREFIX}/`));
+const SettingsModalContext = createContext({
+  openSettings: () => {
+  },
+  prewarmSettings: () => {
+  }
+});
+const useSettingsModal = () => useContext(SettingsModalContext);
+function SettingsModalProvider({ children }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [state, setState] = useState({
+    open: false,
+    href: null
+  });
+  const openSettings = useCallback(
+    (href) => {
+      const moved = href ? movedSettingsTarget(
+        href.split(/[?#]/)[0],
+        href.includes("?") ? `?${href.split("?")[1].split("#")[0]}` : ""
+      ) : null;
+      if (moved) {
+        router.push(moved);
+        return;
+      }
+      if (isMobileViewport()) {
+        router.push(href ?? "/dashboard/settings");
+        return;
+      }
+      setState({ open: true, href: href ?? null });
+    },
+    [router]
+  );
+  const prewarmSettings = useCallback(() => {
+  }, []);
+  const close = useCallback(() => setState((s) => ({ ...s, open: false })), []);
+  const lastOutside = useRef("/dashboard");
+  useEffect(() => {
+    if (!isSettingsPath(pathname) && pathname) lastOutside.current = pathname;
+  }, [pathname]);
+  useEffect(() => {
+    if (isEmbeddedFrame()) return;
+    const onClick = (e) => {
+      if (isMobileViewport()) return;
+      if (e.defaultPrevented || e.button !== 0) return;
+      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      const a = e.target?.closest?.("a[href]");
+      if (!a || a.getAttribute("target") === "_blank") return;
+      let url;
+      try {
+        url = new URL(a.getAttribute("href") ?? "", window.location.href);
+      } catch {
+        return;
+      }
+      if (url.origin !== window.location.origin) return;
+      if (!isSettingsPath(url.pathname)) return;
+      const moved = movedSettingsTarget(url.pathname, url.search);
+      if (moved) {
+        e.preventDefault();
+        router.push(moved);
+        return;
+      }
+      e.preventDefault();
+      openSettings(url.pathname + url.search + url.hash);
+    };
+    document.addEventListener("click", onClick, true);
+    return () => document.removeEventListener("click", onClick, true);
+  }, [openSettings, router]);
+  useEffect(() => {
+    if (isEmbeddedFrame()) return;
+    const onNear = (e) => {
+      const a = e.target?.closest?.("a[href]");
+      const href = a?.getAttribute("href");
+      const path = href?.split(/[?#]/)[0];
+      if (path && isSettingsPath(path) && !movedSettingsTarget(path)) {
+        prewarmSettings();
+      }
+    };
+    document.addEventListener("pointerover", onNear, true);
+    document.addEventListener("focusin", onNear, true);
+    return () => {
+      document.removeEventListener("pointerover", onNear, true);
+      document.removeEventListener("focusin", onNear, true);
+    };
+  }, [prewarmSettings]);
+  useLayoutEffect(() => {
+    if (isEmbeddedFrame() || isMobileViewport()) return;
+    if (!isSettingsPath(pathname)) return;
+    const moved = movedSettingsTarget(pathname, window.location.search);
+    if (moved) {
+      router.replace(moved);
+      return;
+    }
+    openSettings(
+      pathname + (typeof window !== "undefined" ? window.location.search + window.location.hash : "")
+    );
+    router.replace(lastOutside.current);
+  }, [pathname, openSettings, router]);
+  const api = useMemo(
+    () => ({ openSettings, prewarmSettings }),
+    [openSettings, prewarmSettings]
+  );
+  return /* @__PURE__ */ jsxs(SettingsModalContext.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      UnifiedSettingsModal,
+      {
+        open: state.open,
+        href: state.href,
+        onClose: close
+      }
+    )
+  ] });
+}
+export {
+  SettingsModalProvider,
+  useSettingsModal
+};
+//# sourceMappingURL=settings-modal-context.js.map

package/dist/shell/settings-modal-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/settings-modal-context.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { usePathname, useRouter } from 'next/navigation';\nimport { isEmbeddedFrame } from '@withpotter/lib/embedded-frame';\nimport { isMobileViewport } from '@withpotter/hooks/use-mobile';\nimport { UnifiedSettingsModal } from './unified-settings-modal';\nimport { movedSettingsTarget } from './moved-settings';\n\nconst SETTINGS_PREFIX = '/dashboard/settings';\n\n/** `/dashboard/settings` and anything under it, but not `/dashboard/settingsX`. */\nconst isSettingsPath = (path: string | null | undefined) =>\n  !!path &&\n  (path === SETTINGS_PREFIX || path.startsWith(`${SETTINGS_PREFIX}/`));\n\ninterface SettingsModalApi {\n  /** Open the settings window, on a section when given a settings address. */\n  openSettings: (href?: string) => void;\n  /**\n   * Warm the window before it is opened: a hidden copy of the settings page\n   * loads once so the real one boots with its code fetched and its route\n   * compiled. Cheap to call repeatedly; only the first call in a page load does\n   * anything. Call it on the signals that precede opening (a menu opening, a\n   * pointer arriving on a settings link).\n   */\n  prewarmSettings: () => void;\n}\n\nconst SettingsModalContext = createContext<SettingsModalApi>({\n  openSettings: () => {},\n  prewarmSettings: () => {},\n});\n\nexport const useSettingsModal = () => useContext(SettingsModalContext);\n\n/**\n * Settings is a window, never a page.\n *\n * The workspace menu always opened it as one; everything else that pointed at a\n * settings address (a setup step, the Customize sidebar row, a link in an email,\n * a typed URL) still navigated to the page. This owns the one modal and makes\n * every road into settings arrive in it:\n *\n *   - a CLICK on a link to a settings address is caught before it navigates and\n *     opens the window on that section;\n *   - anything else that lands on a settings route (`router.push`, a pasted\n *     address, back/forward) is sent back to where you were and the window opens\n *     on it, with the page itself never drawn (see the layout).\n *\n * The framed copy of a page is the one place a settings route is allowed to\n * render, so nothing here runs inside it.\n */\nexport function SettingsModalProvider({ children }: { children: ReactNode }) {\n  const router = useRouter();\n  const pathname = usePathname();\n  const [state, setState] = useState<{ open: boolean; href: string | null }>({\n    open: false,\n    href: null,\n  });\n\n  // The window is for a desktop screen. On a phone settings stays what it was:\n  // pages you go to, with the mobile shell around them.\n  const openSettings = useCallback(\n    (href?: string) => {\n      // An address that moved out of settings goes to its page, not the window.\n      const moved = href\n        ? movedSettingsTarget(\n            href.split(/[?#]/)[0],\n            href.includes('?') ? `?${href.split('?')[1].split('#')[0]}` : '',\n          )\n        : null;\n      if (moved) {\n        router.push(moved);\n        return;\n      }\n      if (isMobileViewport()) {\n        router.push(href ?? '/dashboard/settings');\n        return;\n      }\n      setState({ open: true, href: href ?? null });\n    },\n    [router],\n  );\n  // Kept so callers that warm the window on hover still compile: the window no\n  // longer boots a frame, so there is nothing to warm.\n  const prewarmSettings = useCallback(() => {}, []);\n\n  const close = useCallback(() => setState((s) => ({ ...s, open: false })), []);\n\n  // Where you were before settings, so closing leaves you there.\n  const lastOutside = useRef('/dashboard');\n  useEffect(() => {\n    if (!isSettingsPath(pathname) && pathname) lastOutside.current = pathname;\n  }, [pathname]);\n\n  // A click on a link to settings: open the window instead of going there.\n  useEffect(() => {\n    if (isEmbeddedFrame()) return;\n    const onClick = (e: MouseEvent) => {\n      if (isMobileViewport()) return;\n      if (e.defaultPrevented || e.button !== 0) return;\n      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n      const a = (e.target as Element | null)?.closest?.('a[href]');\n      if (!a || a.getAttribute('target') === '_blank') return;\n      let url: URL;\n      try {\n        url = new URL(a.getAttribute('href') ?? '', window.location.href);\n      } catch {\n        return;\n      }\n      if (url.origin !== window.location.origin) return;\n      if (!isSettingsPath(url.pathname)) return;\n      const moved = movedSettingsTarget(url.pathname, url.search);\n      if (moved) {\n        e.preventDefault();\n        router.push(moved);\n        return;\n      }\n      // Not stopped: the link's own handlers still run (a dialog closing as you\n      // leave it, say). Next skips its navigation for a prevented click.\n      e.preventDefault();\n      openSettings(url.pathname + url.search + url.hash);\n    };\n    // Capture, so this runs before the framework's own link handling.\n    document.addEventListener('click', onClick, true);\n    return () => document.removeEventListener('click', onClick, true);\n  }, [openSettings, router]);\n\n  // A pointer or keyboard focus arriving on a link to settings is the last\n  // moment before the click; start warming then.\n  useEffect(() => {\n    if (isEmbeddedFrame()) return;\n    const onNear = (e: Event) => {\n      const a = (e.target as Element | null)?.closest?.('a[href]');\n      const href = a?.getAttribute('href');\n      const path = href?.split(/[?#]/)[0];\n      if (path && isSettingsPath(path) && !movedSettingsTarget(path)) {\n        prewarmSettings();\n      }\n    };\n    document.addEventListener('pointerover', onNear, true);\n    document.addEventListener('focusin', onNear, true);\n    return () => {\n      document.removeEventListener('pointerover', onNear, true);\n      document.removeEventListener('focusin', onNear, true);\n    };\n  }, [prewarmSettings]);\n\n  // Anything else that lands on a settings route: back to where you were, with\n  // the window open on it. Before paint, so the page is never seen.\n  useLayoutEffect(() => {\n    if (isEmbeddedFrame() || isMobileViewport()) return;\n    if (!isSettingsPath(pathname)) return;\n    const moved = movedSettingsTarget(pathname, window.location.search);\n    if (moved) {\n      router.replace(moved);\n      return;\n    }\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- before paint, so the page is never drawn\n    openSettings(\n      pathname +\n        (typeof window !== 'undefined'\n          ? window.location.search + window.location.hash\n          : ''),\n    );\n    router.replace(lastOutside.current);\n  }, [pathname, openSettings, router]);\n\n  const api = useMemo(\n    () => ({ openSettings, prewarmSettings }),\n    [openSettings, prewarmSettings],\n  );\n\n  return (\n    <SettingsModalContext.Provider value={api}>\n      {children}\n      <UnifiedSettingsModal\n        open={state.open}\n        href={state.href}\n        onClose={close}\n      />\n    </SettingsModalContext.Provider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/settings-panels.d.ts

@@ -0,0 +1,4 @@
+import type { SettingsRowId } from './settings-rows';
+export declare function SettingsPanel({ id }: {
+    id: SettingsRowId;
+}): import("react").JSX.Element;

package/dist/shell/settings-panels.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StateView } from "@withpotter/ui-kit/state-view";
+import { Suspense } from "react";
+import { ProfileContent } from "@withpotter/pages-core/dashboard/settings/profile/_components/profile-content";
+import { SecurityContent } from "@withpotter/pages-core/dashboard/settings/profile/_components/security-content";
+import { SignInContent } from "@withpotter/pages-core/dashboard/settings/devices/_components/sign-in-content";
+import { DataPrivacyContent } from "@withpotter/pages-core/dashboard/settings/data-privacy/_components/data-privacy-content";
+import { PreferencesContent } from "@withpotter/pages-core/dashboard/settings/language/_components/preferences-content";
+import { useAccessibility } from "@withpotter/lib/accessibility-context";
+import { RotateCcw } from "lucide-react";
+import { AccessibilityCard } from "@withpotter/pages-core/dashboard/settings/accessibility/_components/accessibility-card";
+import { PoliciesContent } from "@withpotter/pages-core/dashboard/settings/policies/_components/policies-content";
+import { UsageContent } from "@withpotter/pages-core/dashboard/settings/usage/_components/usage-content";
+import { GeneralContent } from "@withpotter/pages-core/dashboard/settings/_components/general-content";
+import { NotificationsContent } from "@withpotter/pages-core/dashboard/settings/notifications/_components/notifications-content";
+import { TeamContent } from "@withpotter/pages-core/dashboard/settings/team/_components/team-content";
+import { BillingContent } from "@withpotter/pages-core/dashboard/settings/billing/_components/billing-content";
+import { LegalContent } from "@withpotter/pages-core/dashboard/settings/legal/_components/legal-content";
+import { PaymentApprovalsContent } from "@withpotter/pages-core/dashboard/settings/payment-approvals/_components/payment-approvals-content";
+import { DemoContentCard } from "@withpotter/pages-core/dashboard/settings/demo-content/_components/demo-content-card";
+import { FeaturesContent } from "@withpotter/pages-core/dashboard/settings/features/_components/features-content";
+const loading = () => /* @__PURE__ */ jsx(StateView, { kind: "loading", title: "Loading" });
+function Section({
+  title,
+  action,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }),
+      action
+    ] }),
+    children
+  ] });
+}
+function AccountPanel() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsx(Section, { title: "Profile", children: /* @__PURE__ */ jsx(ProfileContent, {}) }),
+    /* @__PURE__ */ jsx(Section, { title: "Sign-in and security", children: /* @__PURE__ */ jsx("div", { className: "px-4", children: /* @__PURE__ */ jsx(SignInContent, {}) }) }),
+    /* @__PURE__ */ jsx(Section, { title: "Data & privacy", children: /* @__PURE__ */ jsx(DataPrivacyContent, {}) }),
+    /* @__PURE__ */ jsx(SecurityContent, {})
+  ] });
+}
+function ResetAccessibility() {
+  const a11y = useAccessibility();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: a11y.reset,
+      className: "inline-flex items-center gap-2 text-xs font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
+      children: [
+        /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" }),
+        "Reset to defaults"
+      ]
+    }
+  );
+}
+function PreferencesPanel() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsx(Section, { title: "Appearance, language and region", children: /* @__PURE__ */ jsx(PreferencesContent, {}) }),
+    /* @__PURE__ */ jsx(Section, { title: "Accessibility", action: /* @__PURE__ */ jsx(ResetAccessibility, {}), children: /* @__PURE__ */ jsx("div", { className: "px-4", children: /* @__PURE__ */ jsx(AccessibilityCard, {}) }) })
+  ] });
+}
+const PANELS = {
+  general: () => /* @__PURE__ */ jsx(GeneralContent, {}),
+  features: () => /* @__PURE__ */ jsx(FeaturesContent, {}),
+  account: () => /* @__PURE__ */ jsx(AccountPanel, {}),
+  team: () => /* @__PURE__ */ jsx(TeamContent, {}),
+  notifications: () => /* @__PURE__ */ jsx(NotificationsContent, {}),
+  "demo-content": () => /* @__PURE__ */ jsx(DemoContentCard, {}),
+  preferences: () => /* @__PURE__ */ jsx(PreferencesPanel, {}),
+  "payment-approvals": () => /* @__PURE__ */ jsx(PaymentApprovalsContent, {}),
+  billing: () => /* @__PURE__ */ jsx(BillingContent, {}),
+  usage: () => /* @__PURE__ */ jsx(UsageContent, {}),
+  policies: () => /* @__PURE__ */ jsx(PoliciesContent, {}),
+  legal: () => /* @__PURE__ */ jsx(LegalContent, {})
+};
+function SettingsPanel({ id }) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: loading(), children: PANELS[id]() });
+}
+export {
+  SettingsPanel
+};
+//# sourceMappingURL=settings-panels.js.map