@withpotter/components 0.13.0-next.101

package/dist/shell/record-payment-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/record-payment-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Loader2 } from 'lucide-react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n} from '@withpotter/ui-kit/dialog';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { invoicesApi } from '@withpotter/lib/api/invoices';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { RecordPaymentModal } from '@withpotter/pages-finance/dashboard/(finance)/invoices/_components';\nimport type { Invoice } from '@withpotter/lib/api/types';\nimport { asList } from '@withpotter/lib/utils';\nimport { EmptyNote } from '@withpotter/ui-kit';\n\n/**\n * Money that already arrived, recorded from anywhere.\n *\n * Most of this market pays by transfer, so the payment lands in the merchant's\n * bank and the invoice sits there saying unpaid until someone tells Box. The\n * modal that does the telling has existed and worked for a while, and could\n * only be opened from one invoice's own screen — so recording a transfer meant\n * knowing which invoice it was for, finding it, and opening it. From the rail\n * you cannot do any of that, which is why the rail's Take payment could only\n * ever offer the asking half.\n *\n * So this asks the one question the modal cannot: WHICH commitment was paid.\n * A picker rather than a link into the invoices list, because that list has no\n * per-row record action — only the detail pages do — so sending them there\n * would cost two more clicks and land them in the same place they started.\n *\n * \"Awaiting payment\" is computed from the money, not the status: `amountDue`\n * above zero, minus the three states where a balance is not a debt. A partially\n * paid invoice belongs here and its status does not say so.\n */\nconst NOT_OWED = new Set(['draft', 'cancelled', 'paid']);\n\nexport function RecordPaymentPicker({\n  open,\n  onClose,\n}: {\n  open: boolean;\n  onClose: () => void;\n}) {\n  const { tenant } = useAuth();\n  const formatCurrency = useFormatCurrency();\n  const [picked, setPicked] = useState<Invoice | null>(null);\n\n  // `enabled: open` so the rail does not fetch every merchant's invoices on\n  // every page load for a sheet most of them will not open, and the answer is\n  // still cached the second time they do.\n  const { data, isPending } = useApiQuery(\n    ['record-payment-candidates'],\n    (slug) => invoicesApi.list(slug, { limit: 50 }),\n    { enabled: open },\n  );\n\n  // Not `= []` and not a `.catch`: this covers a 200 carrying something other\n  // than a list, which would otherwise throw inside the SHELL and take down\n  // the page behind it rather than just this sheet.\n  const invoices = asList<Invoice>(data?.invoices).filter(\n    (i) => i.amountDue > 0 && !NOT_OWED.has(i.status),\n  );\n  const listLoading = isPending && open;\n\n  return (\n    <>\n      <Dialog open={open && !picked} onOpenChange={(v) => !v && onClose()}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Record a payment</DialogTitle>\n            <DialogDescription>\n              Which one was paid? Money that arrived by transfer or cash.\n            </DialogDescription>\n          </DialogHeader>\n\n          {listLoading ? (\n            <div className=\"flex items-center justify-center py-10\">\n              <Loader2 className=\"animate-spin text-[var(--text-tertiary)]\" />\n            </div>\n          ) : invoices.length === 0 ? (\n            <EmptyNote>Nothing is waiting to be paid.</EmptyNote>\n          ) : (\n            <ul className=\"max-h-80 divide-y divide-[var(--border-subtle)] overflow-y-auto\">\n              {invoices.map((invoice) => (\n                <li key={invoice.id}>\n                  {/* A pressable row, not a button: the whole surface is the\n                      target and it carries content rather than a label. */}\n                  <button\n                    type=\"button\"\n                    onClick={() => setPicked(invoice)}\n                    className=\"flex w-full items-center justify-between gap-3 px-1 py-3 text-left transition-colors hover:bg-[var(--interactive-hover)]\"\n                  >\n                    <span className=\"min-w-0\">\n                      <span className=\"block truncate text-sm text-[var(--text-primary)]\">\n                        {invoice.customerName || invoice.customerEmail}\n                      </span>\n                      <span className=\"block truncate text-xs text-[var(--text-tertiary)]\">\n                        {invoice.invoiceNumber}\n                      </span>\n                    </span>\n                    <span className=\"flex-none text-sm tabular-nums text-[var(--text-primary)]\">\n                      {formatCurrency(invoice.amountDue)}\n                    </span>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </DialogContent>\n      </Dialog>\n\n      <RecordPaymentModal\n        open={!!picked}\n        invoice={picked}\n        tenantSlug={tenant?.slug ?? ''}\n        onClose={() => setPicked(null)}\n        onRecorded={() => {\n          setPicked(null);\n          onClose();\n        }}\n      />\n    </>\n  );\n}\n"],"mappings":";AAuEI,mBAIQ,KADF,YAHN;AArEJ,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAEnC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAsB1B,MAAM,WAAW,oBAAI,IAAI,CAAC,SAAS,aAAa,MAAM,CAAC;AAEhD,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAyB,IAAI;AAKzD,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1B,CAAC,2BAA2B;AAAA,IAC5B,CAAC,SAAS,YAAY,KAAK,MAAM,EAAE,OAAO,GAAG,CAAC;AAAA,IAC9C,EAAE,SAAS,KAAK;AAAA,EAClB;AAKA,QAAM,WAAW,OAAgB,MAAM,QAAQ,EAAE;AAAA,IAC/C,CAAC,MAAM,EAAE,YAAY,KAAK,CAAC,SAAS,IAAI,EAAE,MAAM;AAAA,EAClD;AACA,QAAM,cAAc,aAAa;AAEjC,SACE,iCACE;AAAA,wBAAC,UAAO,MAAM,QAAQ,CAAC,QAAQ,cAAc,CAAC,MAAM,CAAC,KAAK,QAAQ,GAChE,+BAAC,iBACC;AAAA,2BAAC,gBACC;AAAA,4BAAC,eAAY,8BAAgB;AAAA,QAC7B,oBAAC,qBAAkB,yEAEnB;AAAA,SACF;AAAA,MAEC,cACC,oBAAC,SAAI,WAAU,0CACb,8BAAC,WAAQ,WAAU,4CAA2C,GAChE,IACE,SAAS,WAAW,IACtB,oBAAC,aAAU,4CAA8B,IAEzC,oBAAC,QAAG,WAAU,mEACX,mBAAS,IAAI,CAAC,YACb,oBAAC,QAGC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,UAAU,OAAO;AAAA,UAChC,WAAU;AAAA,UAEV;AAAA,iCAAC,UAAK,WAAU,WACd;AAAA,kCAAC,UAAK,WAAU,qDACb,kBAAQ,gBAAgB,QAAQ,eACnC;AAAA,cACA,oBAAC,UAAK,WAAU,sDACb,kBAAQ,eACX;AAAA,eACF;AAAA,YACA,oBAAC,UAAK,WAAU,6DACb,yBAAe,QAAQ,SAAS,GACnC;AAAA;AAAA;AAAA,MACF,KAnBO,QAAQ,EAoBjB,CACD,GACH;AAAA,OAEJ,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,CAAC,CAAC;AAAA,QACR,SAAS;AAAA,QACT,YAAY,QAAQ,QAAQ;AAAA,QAC5B,SAAS,MAAM,UAAU,IAAI;AAAA,QAC7B,YAAY,MAAM;AAChB,oBAAU,IAAI;AACd,kBAAQ;AAAA,QACV;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/shell/search-create-commands.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `/new`: make something without leaving the search box.
+ *
+ * Type a slash and the panel stops searching and lists what you can create,
+ * filtered by whatever follows ("/new inv" leaves New invoice). Enter runs the
+ * highlighted one, the arrows move it. It is the quick-create half of a search
+ * box that is already open on every screen, so a merchant can say "new invoice"
+ * where they are instead of finding the page that holds the button.
+ *
+ * Only what the person may do is offered: finance for payments and invoices,
+ * products for the catalogue, the same gates the home's quick actions use.
+ */
+export declare function SearchCreateCommands({ query, onNavigate, }: {
+    query: string;
+    onNavigate: () => void;
+}): import("react").JSX.Element;

package/dist/shell/search-create-commands.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  CreditCard,
+  FilePlus2,
+  Package,
+  ShoppingBag,
+  UserPlus
+} from "lucide-react";
+import { useEntityLabel } from "@withpotter/lib/intents/use-entity-label";
+import { useTakePayment } from "@withpotter/components/dashboard/take-payment-context";
+import { usePermissions } from "@withpotter/lib/use-permissions";
+function SearchCreateCommands({
+  query,
+  onNavigate
+}) {
+  const router = useRouter();
+  const takePayment = useTakePayment();
+  const item = useEntityLabel("item");
+  const order = useEntityLabel("order");
+  const { can } = usePermissions();
+  const go = (href) => () => {
+    onNavigate();
+    router.push(href);
+  };
+  const all = useMemo(
+    () => [
+      ...can("canManageOrders") ? [
+        {
+          id: "order",
+          label: `New ${order.singular.toLowerCase()}`,
+          hint: "Record a sale",
+          Icon: ShoppingBag,
+          run: go("/dashboard/orders/new")
+        }
+      ] : [],
+      ...can("canManageMembers") ? [
+        {
+          id: "customer",
+          label: "Add customer",
+          hint: "Save a contact",
+          Icon: UserPlus,
+          run: go("/dashboard/customers/new")
+        }
+      ] : [],
+      ...can("canManageProducts") ? [
+        {
+          id: "item",
+          label: `Add ${item.singular.toLowerCase()}`,
+          hint: "Put it in your catalogue",
+          Icon: Package,
+          run: go("/dashboard/catalog/new")
+        }
+      ] : [],
+      ...can("canManageFinance") ? [
+        {
+          id: "invoice",
+          label: "New invoice",
+          hint: "Bill a customer",
+          Icon: FilePlus2,
+          run: go("/dashboard/invoices/new")
+        },
+        {
+          id: "payment",
+          label: "Take payment",
+          hint: "Charge a card or record cash",
+          Icon: CreditCard,
+          run: () => {
+            onNavigate();
+            takePayment();
+          }
+        }
+      ] : []
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [can, order.singular, item.singular]
+  );
+  const term = query.trim().replace(/^\/\s*/, "").replace(/^new\b\s*/i, "").toLowerCase();
+  const shown = all.filter(
+    (c) => !term || c.label.toLowerCase().includes(term)
+  );
+  const [active, setActive] = useState(0);
+  useEffect(() => setActive(0), [term]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (shown.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActive((i) => (i + 1) % shown.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((i) => (i - 1 + shown.length) % shown.length);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        shown[Math.min(active, shown.length - 1)]?.run();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [shown, active]);
+  if (shown.length === 0) {
+    return /* @__PURE__ */ jsxs("p", { className: "px-3 py-6 text-center text-sm text-[var(--text-tertiary)]", children: [
+      "Nothing to create matches \u201C",
+      term,
+      "\u201D."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-1 px-2 text-2xs font-medium uppercase tracking-[0.06em] text-[var(--text-muted)]", children: "Create" }),
+    /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", role: "listbox", "aria-label": "Create", children: shown.map((c, i) => /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": i === active, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: c.run,
+        onMouseEnter: () => setActive(i),
+        className: `flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors ${i === active ? "bg-[var(--interactive-hover)]" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-secondary)]", children: /* @__PURE__ */ jsx(c.Icon, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-md text-[var(--text-primary)]", children: c.label }),
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm text-[var(--text-muted)]", children: c.hint })
+          ] })
+        ]
+      }
+    ) }, c.id)) })
+  ] });
+}
+export {
+  SearchCreateCommands
+};
+//# sourceMappingURL=search-create-commands.js.map

package/dist/shell/search-create-commands.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/search-create-commands.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { useRouter } from 'next/navigation';\nimport {\n  CreditCard,\n  FilePlus2,\n  Package,\n  ShoppingBag,\n  UserPlus,\n  type LucideIcon,\n} from 'lucide-react';\nimport { useEntityLabel } from '@withpotter/lib/intents/use-entity-label';\nimport { useTakePayment } from '@withpotter/components/dashboard/take-payment-context';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\n\ninterface Command {\n  id: string;\n  label: string;\n  hint: string;\n  Icon: LucideIcon;\n  run: () => void;\n}\n\n/**\n * `/new`: make something without leaving the search box.\n *\n * Type a slash and the panel stops searching and lists what you can create,\n * filtered by whatever follows (\"/new inv\" leaves New invoice). Enter runs the\n * highlighted one, the arrows move it. It is the quick-create half of a search\n * box that is already open on every screen, so a merchant can say \"new invoice\"\n * where they are instead of finding the page that holds the button.\n *\n * Only what the person may do is offered: finance for payments and invoices,\n * products for the catalogue, the same gates the home's quick actions use.\n */\nexport function SearchCreateCommands({\n  query,\n  onNavigate,\n}: {\n  query: string;\n  onNavigate: () => void;\n}) {\n  const router = useRouter();\n  const takePayment = useTakePayment();\n  const item = useEntityLabel('item');\n  const order = useEntityLabel('order');\n  const { can } = usePermissions();\n\n  const go = (href: string) => () => {\n    onNavigate();\n    router.push(href);\n  };\n\n  const all: Command[] = useMemo(\n    () => [\n      ...(can('canManageOrders')\n        ? [\n            {\n              id: 'order',\n              label: `New ${order.singular.toLowerCase()}`,\n              hint: 'Record a sale',\n              Icon: ShoppingBag,\n              run: go('/dashboard/orders/new'),\n            },\n          ]\n        : []),\n      ...(can('canManageMembers')\n        ? [\n            {\n              id: 'customer',\n              label: 'Add customer',\n              hint: 'Save a contact',\n              Icon: UserPlus,\n              run: go('/dashboard/customers/new'),\n            },\n          ]\n        : []),\n      ...(can('canManageProducts')\n        ? [\n            {\n              id: 'item',\n              label: `Add ${item.singular.toLowerCase()}`,\n              hint: 'Put it in your catalogue',\n              Icon: Package,\n              run: go('/dashboard/catalog/new'),\n            },\n          ]\n        : []),\n      ...(can('canManageFinance')\n        ? [\n            {\n              id: 'invoice',\n              label: 'New invoice',\n              hint: 'Bill a customer',\n              Icon: FilePlus2,\n              run: go('/dashboard/invoices/new'),\n            },\n            {\n              id: 'payment',\n              label: 'Take payment',\n              hint: 'Charge a card or record cash',\n              Icon: CreditCard,\n              run: () => {\n                onNavigate();\n                takePayment();\n              },\n            },\n          ]\n        : []),\n    ],\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [can, order.singular, item.singular],\n  );\n\n  // What follows the slash, minus the word \"new\" if it was typed.\n  const term = query\n    .trim()\n    .replace(/^\\/\\s*/, '')\n    .replace(/^new\\b\\s*/i, '')\n    .toLowerCase();\n  const shown = all.filter(\n    (c) => !term || c.label.toLowerCase().includes(term),\n  );\n\n  const [active, setActive] = useState(0);\n  useEffect(() => setActive(0), [term]);\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (shown.length === 0) return;\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        setActive((i) => (i + 1) % shown.length);\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        setActive((i) => (i - 1 + shown.length) % shown.length);\n      } else if (e.key === 'Enter') {\n        e.preventDefault();\n        shown[Math.min(active, shown.length - 1)]?.run();\n      }\n    };\n    window.addEventListener('keydown', onKey, true);\n    return () => window.removeEventListener('keydown', onKey, true);\n  }, [shown, active]);\n\n  if (shown.length === 0) {\n    return (\n      <p className=\"px-3 py-6 text-center text-sm text-[var(--text-tertiary)]\">\n        Nothing to create matches “{term}”.\n      </p>\n    );\n  }\n\n  return (\n    <div>\n      <p className=\"mb-1 px-2 text-2xs font-medium uppercase tracking-[0.06em] text-[var(--text-muted)]\">\n        Create\n      </p>\n      <ul className=\"space-y-0.5\" role=\"listbox\" aria-label=\"Create\">\n        {shown.map((c, i) => (\n          <li key={c.id} role=\"option\" aria-selected={i === active}>\n            <button\n              type=\"button\"\n              onClick={c.run}\n              onMouseEnter={() => setActive(i)}\n              className={`flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors ${\n                i === active ? 'bg-[var(--interactive-hover)]' : ''\n              }`}\n            >\n              <span className=\"grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-secondary)]\">\n                <c.Icon className=\"size-4\" />\n              </span>\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-md text-[var(--text-primary)]\">\n                  {c.label}\n                </span>\n                <span className=\"block truncate text-sm text-[var(--text-muted)]\">\n                  {c.hint}\n                </span>\n              </span>\n            </button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/search-head.d.ts

@@ -0,0 +1,22 @@
+import { type Scope } from './search-scopes';
+/**
+ * The controls at the top of the search panel: the field, the scope token
+ * inside it, the strip of scopes under it, and the rule that separates all of
+ * that from the answer.
+ *
+ * A file of its own because `search-panel` crossed the 500-line house limit
+ * once the panel grew a second page. The seam is the one the panel already
+ * draws on screen — everything above the rule is here, everything below it is
+ * the answer.
+ */
+export declare function SearchHead({ query, onQueryChange, onSubmit, scope, onScopeChange, inputRef, businessName, recordsOnly, }: {
+    query: string;
+    onQueryChange: (v: string) => void;
+    onSubmit: () => void;
+    scope: Scope | null;
+    onScopeChange: (next: Scope | null) => void;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    businessName: string;
+    /** On a screen already drawing the thread, the field cannot ask Box. */
+    recordsOnly: boolean;
+}): import("react").JSX.Element;

package/dist/shell/search-head.js

@@ -0,0 +1,101 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+import { Button, DialogClose, Input } from "@withpotter/ui-kit";
+import { SCOPES } from "./search-scopes";
+import { isServiceOperationsEnabled } from "@withpotter/lib/service-operations-api";
+function SearchHead({
+  query,
+  onQueryChange,
+  onSubmit,
+  scope,
+  onScopeChange,
+  inputRef,
+  businessName,
+  recordsOnly
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "relative mb-3", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "pv-search-field surface-interactive relative flex h-9 w-full items-center gap-2 rounded-[var(--radius-card)] bg-[color-mix(in_srgb,var(--bg-muted)_40%,var(--bg-base))] px-3",
+        "data-scoped": scope ? "" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            Search,
+            {
+              width: 15,
+              height: 15,
+              "aria-hidden": true,
+              className: "shrink-0 text-[var(--text-tertiary)]"
+            }
+          ),
+          scope && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-0.5 rounded-md border border-[var(--accent-primary)] bg-[var(--accent-secondary)] py-px pl-2 pr-0.5 text-xs text-[var(--accent-secondary-ink)]", children: [
+            SCOPES.find((sc) => sc.id === scope)?.label,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onScopeChange(null);
+                  inputRef.current?.focus();
+                },
+                "aria-label": "Search everything again",
+                className: "grid size-3.5 place-items-center rounded text-[var(--accent-secondary-ink)] opacity-70 transition-opacity hover:opacity-100",
+                children: /* @__PURE__ */ jsx(X, { width: 10, height: 10 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              variant: "bare",
+              ref: inputRef,
+              value: query,
+              onChange: (e) => onQueryChange(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") onSubmit();
+                if (e.key === "Backspace" && !query && scope) {
+                  e.preventDefault();
+                  onScopeChange(null);
+                }
+              },
+              placeholder: scope ? `Search ${SCOPES.find((sc) => sc.id === scope)?.label.toLowerCase()}` : `Search ${businessName}`,
+              name: "ask",
+              "aria-label": recordsOnly ? "Search" : "Search, or ask Box a question"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DialogClose,
+            {
+              "aria-label": "Close",
+              className: "grid size-6 shrink-0 place-items-center rounded-md text-[var(--text-tertiary)] transition-colors hover:bg-[var(--error-bg,var(--interactive-hover))] hover:text-[var(--error)]",
+              children: /* @__PURE__ */ jsx(X, { width: 13, height: 13 })
+            }
+          )
+        ]
+      }
+    ) }),
+    !scope && /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: SCOPES.filter(
+      (sc) => sc.id !== "support" || isServiceOperationsEnabled()
+    ).map((sc) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        onClick: () => {
+          onScopeChange(sc.id);
+          inputRef.current?.focus();
+        },
+        className: "px-2 max-md:py-0.5",
+        children: sc.label
+      },
+      sc.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "-mx-4 border-t border-line" })
+  ] });
+}
+export {
+  SearchHead
+};
+//# sourceMappingURL=search-head.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/search-head.tsx"],"sourcesContent":["'use client';\n\nimport { Search, X } from 'lucide-react';\nimport { Button, DialogClose, Input } from '@withpotter/ui-kit';\nimport { SCOPES, type Scope } from './search-scopes';\nimport { isServiceOperationsEnabled } from '@withpotter/lib/service-operations-api';\n\n/**\n * The controls at the top of the search panel: the field, the scope token\n * inside it, the strip of scopes under it, and the rule that separates all of\n * that from the answer.\n *\n * A file of its own because `search-panel` crossed the 500-line house limit\n * once the panel grew a second page. The seam is the one the panel already\n * draws on screen — everything above the rule is here, everything below it is\n * the answer.\n */\nexport function SearchHead({\n  query,\n  onQueryChange,\n  onSubmit,\n  scope,\n  onScopeChange,\n  inputRef,\n  businessName,\n  recordsOnly,\n}: {\n  query: string;\n  onQueryChange: (v: string) => void;\n  onSubmit: () => void;\n  scope: Scope | null;\n  onScopeChange: (next: Scope | null) => void;\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  businessName: string;\n  /** On a screen already drawing the thread, the field cannot ask Box. */\n  recordsOnly: boolean;\n}) {\n  return (\n    <>\n      {/* THE INPUT LIVES HERE NOW, not in the rail (John, 2026-09-03).\n        A rail is where you go somewhere; a box you type sentences into\n        is a surface you work in, so it belongs on the surface. The\n        pill and the aura are the home bar's, unchanged — two inputs\n        that are the same input must not look like two inputs. */}\n      {/* NO RIGHT MARGIN. The close moved INSIDE the field (John,\n            2026-09-03: *\"the close icon can be inside the searchbar\"*), so\n            there is nothing beside it to clear and the bar runs the\n            panel's full width. `DialogContent`'s own corner X is hidden in\n            `shell.css` — one dismiss control, and it is on the thing you\n            are looking at rather than in a corner you are not. */}\n      {/* NO AURA. John, 2026-09-03: *\"why does the search bar show that\n        glowy effect bg, please remove it\"*. `AskGlow` is the home bar's\n        rotating conic light and it is right there — that bar is the hero\n        of an otherwise empty screen and the light is the invitation. This\n        field is inside a modal a merchant has already opened on purpose,\n        over a scrim, with the caret already in it. There is nothing left\n        to invite, and a coloured light behind a box you are typing into is\n        just something moving under your words. */}\n      <div className=\"relative mb-3\">\n        {/* THE STROKE GOES BLUE WITH THE TOKEN — John, 2026-09-03: *\"their\n          frame should be blue, the search stroke should be blue too\"*.\n          One state, said twice on purpose: the token is the narrowing and\n          the field is what has been narrowed, so colouring only the token\n          would leave the box around it looking like it still searches\n          everything. The rule lives in `shell.css` rather than as a\n          utility here because `surface-interactive` already sets\n          `border-color`, and two utilities arguing over one property is\n          decided by stylesheet order rather than by intent. */}\n        <div\n          className=\"pv-search-field surface-interactive relative flex h-9 w-full items-center gap-2 rounded-[var(--radius-card)] bg-[color-mix(in_srgb,var(--bg-muted)_40%,var(--bg-base))] px-3\"\n          data-scoped={scope ? '' : undefined}\n        >\n          {/* A MAGNIFIER, not Box's mark — John, 2026-09-03: *\"there's\n            no search icon, why, replace the potter icon with a search\n            icon\"*. The mark was here because this field started life as\n            the assistant's, and it made the panel introduce itself as the\n            wrong one of its two halves: the row that opens it says Search,\n            and what the eye met on arrival was a logo. The same glyph on\n            both ends of an action is what makes them read as one action. */}\n          <Search\n            width={15}\n            height={15}\n            aria-hidden\n            className=\"shrink-0 text-[var(--text-tertiary)]\"\n          />\n          {/* THE CHOSEN SCOPE, INSIDE THE FIELD — Shopify's move, pulled\n            whole (John, 2026-09-03: *\"go on shopify to see what happens\n            when you click on one and pull the interaction to our own\"*).\n            Read out of their live DOM: pressing a chip removes it from the\n            strip, plants it as a token before the combobox with a Remove\n            button of its own, and the rest of the strip disappears.\n\n            It is better than a lit tab for one reason — where the state\n            lives. A tab strip keeps the narrowing in a control ABOVE the\n            field, so the field goes on saying \"Search\" while it is only\n            searching orders. As a token the scope is inside the thing it\n            scopes, it is removable where it sits, and Backspace on an\n            empty box takes it off, which is what every token field a\n            merchant has ever used already does. */}\n          {/* SMALLER THAN THE TEXT IT SITS BESIDE. John, 2026-09-03: *\"why\n            do the tabs look big\"*. A token is a label on the query, not a\n            peer of it, so it takes the step below the field's own type and\n            the tightest padding that still reads as a frame. */}\n          {scope && (\n            <span className=\"flex shrink-0 items-center gap-0.5 rounded-md border border-[var(--accent-primary)] bg-[var(--accent-secondary)] py-px pl-2 pr-0.5 text-xs text-[var(--accent-secondary-ink)]\">\n              {SCOPES.find((sc) => sc.id === scope)?.label}\n              <button\n                type=\"button\"\n                onClick={() => {\n                  onScopeChange(null);\n                  inputRef.current?.focus();\n                }}\n                aria-label=\"Search everything again\"\n                className=\"grid size-3.5 place-items-center rounded text-[var(--accent-secondary-ink)] opacity-70 transition-opacity hover:opacity-100\"\n              >\n                <X width={10} height={10} />\n              </button>\n            </span>\n          )}\n          <Input\n            variant=\"bare\"\n            ref={inputRef}\n            value={query}\n            onChange={(e) => onQueryChange(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') onSubmit();\n              /* Backspace on an empty box takes the token off. The token is\n               the last thing to the caret's left, so this is where the key\n               already points. */\n              if (e.key === 'Backspace' && !query && scope) {\n                e.preventDefault();\n                onScopeChange(null);\n              }\n            }}\n            /* \"SEARCH\", NOT \"ASK ANYTHING\" — John, 2026-09-03: *\"the\n             search bar says ask anything, that's wrong tho\"*. It is: this\n             panel is opened by a row called Search, under a magnifier,\n             over an empty state reading \"Find anything in {business}\", and\n             then the box itself asked to be talked to. The field still\n             takes a sentence and Enter still hands it to Box — that is\n             the half nothing needs to advertise, because typing a question\n             into a search box is what everybody already tries.\n\n             The scope renames it again: \"Search\" over a box that can only\n             return orders would be the control disagreeing with the token\n             sitting inside it. */\n            placeholder={\n              scope\n                ? `Search ${SCOPES.find((sc) => sc.id === scope)?.label.toLowerCase()}`\n                : `Search ${businessName}`\n            }\n            /* Chrome's audit flags a field with no id or name even when\n             it has an aria-label, and autofill has nothing to key on\n             either. */\n            name=\"ask\"\n            aria-label={\n              recordsOnly ? 'Search' : 'Search, or ask Box a question'\n            }\n          />\n          {/* RED ON HOVER — John, 2026-09-03. It is the only control on\n                this panel that throws work away, and inside the field it\n                sits a few pixels from a caret: the colour is what tells\n                you, before you press, that this one is not another\n                affordance on the search bar. Ink only, on the app's\n                `--error` token; a red fill in a text field would read as a\n                validation failure. */}\n          <DialogClose\n            aria-label=\"Close\"\n            className=\"grid size-6 shrink-0 place-items-center rounded-md text-[var(--text-tertiary)] transition-colors hover:bg-[var(--error-bg,var(--interactive-hover))] hover:text-[var(--error)]\"\n          >\n            <X width={13} height={13} />\n          </DialogClose>\n        </div>\n      </div>\n\n      {/* THE STRIP, and it goes when one is chosen — Shopify again. A row\n        of chips that stays lit beside a token would say the same thing\n        twice, and the second copy would be pressable. */}\n      {!scope && (\n        <div className=\"mb-3 flex flex-wrap gap-2\">\n          {/* `Button`, not `OptionButton` — John, 2026-09-03: *\"why does\n            the frame only come on hover, the frame should naturally be\n            there\"*, and he is pointing at a real mismatch rather than a\n            missing style.\n\n            An `OptionButton` pill is deliberately bare until it is chosen:\n            the house rule is that the CHOSEN one wears the grey chip and\n            the rest are text, so a filter row does not shout louder than\n            the data it narrows. That is right for a row where one option\n            is always lit — and here NONE ever is, because pressing one\n            moves it into the field and deletes the strip. So every pill in\n            the set sat permanently in its unchosen state: four labels with\n            no edge, which is exactly what John saw.\n\n            Read against the rule these are FIRED, not chosen (\"a control\n            that is chosen rather than fired\") — press one and something\n            happens and the control goes away. That is a Button, at `sm`\n            because a chip row is a dense row, and it comes with the\n            resting frame the strip needs. Shopify's are filled chips at\n            rest for the same reason. */}\n          {/* Support only where the module is on. A drawer that opens onto a\n              permanent \"nothing here yet\" is worse than no drawer. */}\n          {SCOPES.filter(\n            (sc) => sc.id !== 'support' || isServiceOperationsEnabled(),\n          ).map((sc) => (\n            <Button\n              key={sc.id}\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={() => {\n                onScopeChange(sc.id);\n                inputRef.current?.focus();\n              }}\n              /* A step tighter than `sm`'s own padding — John, 2026-09-03:\n                 *\"reduce the sizes of this a little, their frames\"*. `sm` is\n                 sized for a bulk-action bar, where a chip stands alone in a\n                 row; four of them under a search field are a strip, and a\n                 strip reads as one object only when the frames stay smaller\n                 than the space around them. */\n              className=\"px-2 max-md:py-0.5\"\n            >\n              {sc.label}\n            </Button>\n          ))}\n        </div>\n      )}\n\n      {/* THE RULE, and it is the only thing left of the footer — John,\n        2026-09-03: *\"no need for this — Ask Box / esc\"*. He asked for a\n        footer and a divider an hour before; what the footer carried was\n        two keyboard hints, and with those gone a bordered strip at the\n        bottom would be a line drawn under nothing.\n\n        So the divider does the job it was always better suited to: it is\n        the seam between the CONTROLS and the ANSWER, which is a real\n        boundary — the field and the strip stay put while everything under\n        this line scrolls. `-mx-4` pushes it to the panel's inner edge, the\n        way the content does not go. */}\n      <div className=\"-mx-4 border-t border-line\" />\n    </>\n  );\n}\n"],"mappings":";AAsCI,mBAyCM,KAyBE,YAlER;AApCJ,SAAS,QAAQ,SAAS;AAC1B,SAAS,QAAQ,aAAa,aAAa;AAC3C,SAAS,cAA0B;AACnC,SAAS,kCAAkC;AAYpC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,SACE,iCAoBE;AAAA,wBAAC,SAAI,WAAU,iBAUb;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAa,QAAQ,KAAK;AAAA,QAS1B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA,UAmBC,SACC,qBAAC,UAAK,WAAU,iLACb;AAAA,mBAAO,KAAK,CAAC,OAAO,GAAG,OAAO,KAAK,GAAG;AAAA,YACvC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AACb,gCAAc,IAAI;AAClB,2BAAS,SAAS,MAAM;AAAA,gBAC1B;AAAA,gBACA,cAAW;AAAA,gBACX,WAAU;AAAA,gBAEV,8BAAC,KAAE,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,YAC5B;AAAA,aACF;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,KAAK;AAAA,cACL,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,cAC7C,WAAW,CAAC,MAAM;AAChB,oBAAI,EAAE,QAAQ,QAAS,UAAS;AAIhC,oBAAI,EAAE,QAAQ,eAAe,CAAC,SAAS,OAAO;AAC5C,oBAAE,eAAe;AACjB,gCAAc,IAAI;AAAA,gBACpB;AAAA,cACF;AAAA,cAaA,aACE,QACI,UAAU,OAAO,KAAK,CAAC,OAAO,GAAG,OAAO,KAAK,GAAG,MAAM,YAAY,CAAC,KACnE,UAAU,YAAY;AAAA,cAK5B,MAAK;AAAA,cACL,cACE,cAAc,WAAW;AAAA;AAAA,UAE7B;AAAA,UAQA;AAAA,YAAC;AAAA;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UAC5B;AAAA;AAAA;AAAA,IACF,GACF;AAAA,IAKC,CAAC,SACA,oBAAC,SAAI,WAAU,6BAuBZ,iBAAO;AAAA,MACN,CAAC,OAAO,GAAG,OAAO,aAAa,2BAA2B;AAAA,IAC5D,EAAE,IAAI,CAAC,OACL;AAAA,MAAC;AAAA;AAAA,QAEC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,wBAAc,GAAG,EAAE;AACnB,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QAOA,WAAU;AAAA,QAET,aAAG;AAAA;AAAA,MAfC,GAAG;AAAA,IAgBV,CACD,GACH;AAAA,IAcF,oBAAC,SAAI,WAAU,8BAA6B;AAAA,KAC9C;AAEJ;","names":[]}

package/dist/shell/search-panel.d.ts

@@ -0,0 +1,23 @@
+import { type Scope } from './search-scopes';
+/**
+ * THE SEARCH PANEL — the input, the scope strip, the answer and the footer.
+ *
+ * A file of its own because `sidebar-ask` crossed the 500-line house limit
+ * when the panel grew a strip and an empty state, and the seam is the obvious
+ * one: that file owns SUMMONING (the rail row, ⌘K, what a submitted sentence
+ * does), this one owns the surface that appears.
+ */
+export declare function AskPanel({ open, onClose, query, messages, recordsOnly, inputRef, onQueryChange, onSubmit, scope, onScopeChange, businessName, }: {
+    open: boolean;
+    onClose: () => void;
+    query: string;
+    messages: number;
+    /** On a screen already drawing the thread, show records and nothing else. */
+    recordsOnly: boolean;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    onQueryChange: (v: string) => void;
+    onSubmit: () => void;
+    scope: Scope | null;
+    onScopeChange: (next: Scope | null) => void;
+    businessName: string;
+}): import("react").JSX.Element;

package/dist/shell/search-panel.js

@@ -0,0 +1,189 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Compass } from "lucide-react";
+import { PotterSurface } from "@withpotter/components/potter/potter-surface";
+import {
+  PotterOpenFull,
+  PotterFallible
+} from "@withpotter/components/potter/potter-chrome";
+import { AskResults } from "@withpotter/components/dashboard/home/ask-results";
+import {
+  AnimatedHeight,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  StateView
+} from "@withpotter/ui-kit";
+import { WhatsNewHead, WhatsNewView } from "./search-whats-new";
+import { SearchCreateCommands } from "./search-create-commands";
+import { SearchHead } from "./search-head";
+function AskPanel({
+  open,
+  onClose,
+  query,
+  messages,
+  recordsOnly,
+  inputRef,
+  onQueryChange,
+  onSubmit,
+  scope,
+  onScopeChange,
+  businessName
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const id = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [open, inputRef]);
+  const [view, setView] = useState("search");
+  const close = () => {
+    setView("search");
+    onClose();
+  };
+  return (
+    /* THE SHARED `Dialog`, not a hand-rolled overlay — John, 2026-09-03: *"the
+           account settings modal, how it comes up, how the background dims
+           everything, why are we not using the same for the search modal"*, and
+           *"there's not even a close icon on the search modal"*. Both are the same
+           answer, and the house rule already said it: if you must hand-roll an
+           overlay you have to trap Tab, lock the page, close on Escape and return
+           focus — an audit found 12% of hand-rolled overlays did the first two.
+           This one did those, and still shipped three things wrong that
+           `DialogContent` has had all along.
+    
+             the dim   `bg-black/60 backdrop-blur-[3px]`, against the `black/25`
+                       this drew — a quarter-strength scrim reads as a panel
+                       floating over a page still in use rather than over one that
+                       has been set aside.
+             the close a 28px hit area at the panel's own inset. There was none:
+                       Escape and the scrim, neither of which is visible.
+             centring  motion owns the whole transform there, transform utilities
+                       included, which is the exact bug this panel hit twice.
+    
+           640px, a step in from `AccountSettingsModal`'s 720 (John, 2026-09-03:
+           *"you can reduce the width of the search modal a bit"*). That panel is
+           two columns — a rail of sections beside their content — and needs the
+           width; this one is a single column of results, and a result line that
+           runs 720px puts its trailing detail so far from its name that the eye
+           has to travel back. `max-w-lg` is DialogContent's default and has to be
+           overridden, not added to.
+    
+           IT IS AS TALL AS WHAT IS IN IT — John, 2026-09-03: *"i search nneka, it
+           shows 3 things but the modal is still extended, why, it now has this
+           awkward white space, just reduce the modal based on the results"*.
+    
+           It shipped as two fixed heights with a transition between them, on the
+           argument that a box sized by its content restarts its animation on every
+           keystroke that adds a row. That argument was protecting an animation
+           nobody asked for at the cost of the thing everybody sees: three results
+           in a 560px box is 400px of empty panel, and the eye reads that as a
+           search that failed and is still going.
+    
+           AND IT MOVES BETWEEN SIZES — John, 2026-09-03: *"the animation for the
+           modal switching heights should be fluid, not sharp; right now it's
+           sharp, it should show how it reduces and show how it expands, not
+           rushing."*
+    
+           `h-auto` gets the size right and cannot be animated: `height: auto` has
+           no computed value for a transition to interpolate towards, so the box
+           teleports. So the height is MEASURED and then set — a resize observer on
+           the content reports what the panel would be, and the panel transitions
+           to that number over `--motion-slow` on `ease-settle`, the weighted
+           decelerate. 300ms rather than the 180 the rest of the shell uses: this
+           is the biggest thing that moves anywhere in the app, and a large object
+           arriving at the speed of a hover state reads as a snap however smooth
+           the curve is.
+    
+           The ceiling is Account settings' 560, past which the body scrolls. The
+           first measurement is applied before paint (`useLayoutEffect`), so the
+           panel opens at its right size rather than growing into it.
+    
+           A COLUMN, not a scrolling box: the input is pinned at the top and only
+           the answer under it scrolls, so the thing you are typing into never
+           leaves the screen. */
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (next) => !next && close(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "pv-search-panel flex max-h-[min(74vh,560px)] max-w-[640px] flex-col gap-0 overflow-hidden p-4", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Search" }),
+      /* @__PURE__ */ jsxs(AnimatedHeight, { className: "overflow-visible", children: [
+        /* @__PURE__ */ jsx("div", { children: view === "whats-new" ? /* @__PURE__ */ jsx(WhatsNewHead, { onBack: () => setView("search") }) : /* @__PURE__ */ jsx(
+          SearchHead,
+          {
+            query,
+            onQueryChange,
+            onSubmit,
+            scope,
+            onScopeChange,
+            inputRef,
+            businessName,
+            recordsOnly
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "-mx-1 max-h-[380px] min-h-0 overflow-y-auto px-1 pt-3", children: /* @__PURE__ */ jsx("div", { className: "pb-px", children: view === "whats-new" ? /* @__PURE__ */ jsx(WhatsNewView, {}) : /* @__PURE__ */ jsx(Fragment, { children: query.trim().startsWith("/") ? /* @__PURE__ */ jsx(SearchCreateCommands, { query, onNavigate: onClose }) : (query.trim() || scope) && (recordsOnly || !messages) ? /* @__PURE__ */ jsx(
+          AskResults,
+          {
+            query,
+            onNavigate: onClose,
+            tab: scope ?? "all"
+          }
+        ) : /* @__PURE__ */ jsx(Fragment, { children: messages > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-end gap-1", children: /* @__PURE__ */ jsx(PotterOpenFull, { onDone: close }) }),
+          /* @__PURE__ */ jsx(PotterSurface, { compact: true }),
+          /* @__PURE__ */ jsx(PotterFallible, {})
+        ] }) : (
+          /* THE HOUSE EMPTY STATE, not a hand-drawn one. John,
+                             2026-09-03: *"the empty state icon seems too small and
+                             shouldn't also be a search bar. is that also how all our
+                             empty states look like"* — and it was not. This was a 28px
+                             lucide glyph over a line of text, which is smaller and
+                             flatter than every other empty state in the app, and it
+                             repeated the magnifier already sitting in the field two
+                             inches above it. A glyph used twice on one surface stops
+                             being a sign.
+          
+                             `StateView` is what the other twenty-five screens render: an
+                             `IllustrationFrame` that resolves the icon to a CONCEPT and
+                             picks up its photograph the moment that asset lands. So this
+                             improves on its own when the art does, and it cannot drift
+                             from the rest.
+          
+                             `compact` because the surrounding modal IS the frame —
+                             that is exactly the case the prop documents, a well inside a
+                             card. Without it this would draw a second card inside the
+                             panel.
+          
+                             `Compass`, not `Search`: what the panel does before you type
+                             is orient you, and it is the same glyph `AskResults` already
+                             gives a destination. */
+          /* @__PURE__ */ jsx(
+            StateView,
+            {
+              kind: "empty",
+              compact: true,
+              icon: Compass,
+              title: `Find anything in ${businessName}`
+            }
+          )
+        ) }) }) }) }),
+        view === "search" && /* @__PURE__ */ jsx("div", { className: "-mx-4 mt-3 flex items-center justify-end gap-2 border-t border-line px-4 pt-3 text-xs text-[var(--text-tertiary)]", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onQueryChange("/new ");
+              inputRef.current?.focus();
+            },
+            className: "flex items-center gap-2 rounded-md px-1 py-0.5 transition-colors hover:text-[var(--text-primary)]",
+            children: [
+              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-[var(--border-default)] bg-[var(--bg-muted)] px-2 py-0.5 font-sans text-[11px]", children: "/new" }),
+              "Create"
+            ]
+          }
+        ) })
+      ] })
+    ] }) })
+  );
+}
+export {
+  AskPanel
+};
+//# sourceMappingURL=search-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/search-panel.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { Compass } from 'lucide-react';\nimport { PotterSurface } from '@withpotter/components/potter/potter-surface';\nimport {\n  PotterOpenFull,\n  PotterFallible,\n} from '@withpotter/components/potter/potter-chrome';\nimport { AskResults } from '@withpotter/components/dashboard/home/ask-results';\nimport {\n  AnimatedHeight,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  StateView,\n} from '@withpotter/ui-kit';\nimport { WhatsNewHead, WhatsNewView } from './search-whats-new';\nimport { SearchCreateCommands } from './search-create-commands';\nimport { SearchHead } from './search-head';\nimport { type Scope } from './search-scopes';\n\n/**\n * THE SEARCH PANEL — the input, the scope strip, the answer and the footer.\n *\n * A file of its own because `sidebar-ask` crossed the 500-line house limit\n * when the panel grew a strip and an empty state, and the seam is the obvious\n * one: that file owns SUMMONING (the rail row, ⌘K, what a submitted sentence\n * does), this one owns the surface that appears.\n */\nexport function AskPanel({\n  open,\n  onClose,\n  query,\n  messages,\n  recordsOnly,\n  inputRef,\n  onQueryChange,\n  onSubmit,\n  scope,\n  onScopeChange,\n  businessName,\n}: {\n  open: boolean;\n  onClose: () => void;\n  query: string;\n  messages: number;\n  /** On a screen already drawing the thread, show records and nothing else. */\n  recordsOnly: boolean;\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  onQueryChange: (v: string) => void;\n  onSubmit: () => void;\n  scope: Scope | null;\n  onScopeChange: (next: Scope | null) => void;\n  businessName: string;\n}) {\n  /**\n   * The caret lands in the box. A search summoned by ⌘K that then asks you to\n   * click before typing is a search that has wasted the shortcut — and\n   * `useModalBehaviour` traps focus in here, so there is nowhere else for it to\n   * usefully go. One frame late on purpose: the panel is mounted by\n   * `AnimatePresence` in the same commit, and focusing before it is in the\n   * document does nothing at all.\n   */\n  useEffect(() => {\n    if (!open) return;\n    const id = requestAnimationFrame(() => inputRef.current?.focus());\n    return () => cancelAnimationFrame(id);\n  }, [open, inputRef]);\n\n  /**\n   * Which page of the panel is showing.\n   *\n   * Reset by the dismiss path rather than by an effect watching `open`: a\n   * merchant who closed it while reading the notes is not asking to be put\n   * back there next time they press ⌘K, and \"when this closes, forget where we\n   * were\" is a consequence of closing, not a synchronisation with it.\n   */\n  const [view, setView] = useState<'search' | 'whats-new'>('search');\n  const close = () => {\n    setView('search');\n    onClose();\n  };\n\n  return (\n    /* THE SHARED `Dialog`, not a hand-rolled overlay — John, 2026-09-03: *\"the\n       account settings modal, how it comes up, how the background dims\n       everything, why are we not using the same for the search modal\"*, and\n       *\"there's not even a close icon on the search modal\"*. Both are the same\n       answer, and the house rule already said it: if you must hand-roll an\n       overlay you have to trap Tab, lock the page, close on Escape and return\n       focus — an audit found 12% of hand-rolled overlays did the first two.\n       This one did those, and still shipped three things wrong that\n       `DialogContent` has had all along.\n\n         the dim   `bg-black/60 backdrop-blur-[3px]`, against the `black/25`\n                   this drew — a quarter-strength scrim reads as a panel\n                   floating over a page still in use rather than over one that\n                   has been set aside.\n         the close a 28px hit area at the panel's own inset. There was none:\n                   Escape and the scrim, neither of which is visible.\n         centring  motion owns the whole transform there, transform utilities\n                   included, which is the exact bug this panel hit twice.\n\n       640px, a step in from `AccountSettingsModal`'s 720 (John, 2026-09-03:\n       *\"you can reduce the width of the search modal a bit\"*). That panel is\n       two columns — a rail of sections beside their content — and needs the\n       width; this one is a single column of results, and a result line that\n       runs 720px puts its trailing detail so far from its name that the eye\n       has to travel back. `max-w-lg` is DialogContent's default and has to be\n       overridden, not added to.\n\n       IT IS AS TALL AS WHAT IS IN IT — John, 2026-09-03: *\"i search nneka, it\n       shows 3 things but the modal is still extended, why, it now has this\n       awkward white space, just reduce the modal based on the results\"*.\n\n       It shipped as two fixed heights with a transition between them, on the\n       argument that a box sized by its content restarts its animation on every\n       keystroke that adds a row. That argument was protecting an animation\n       nobody asked for at the cost of the thing everybody sees: three results\n       in a 560px box is 400px of empty panel, and the eye reads that as a\n       search that failed and is still going.\n\n       AND IT MOVES BETWEEN SIZES — John, 2026-09-03: *\"the animation for the\n       modal switching heights should be fluid, not sharp; right now it's\n       sharp, it should show how it reduces and show how it expands, not\n       rushing.\"*\n\n       `h-auto` gets the size right and cannot be animated: `height: auto` has\n       no computed value for a transition to interpolate towards, so the box\n       teleports. So the height is MEASURED and then set — a resize observer on\n       the content reports what the panel would be, and the panel transitions\n       to that number over `--motion-slow` on `ease-settle`, the weighted\n       decelerate. 300ms rather than the 180 the rest of the shell uses: this\n       is the biggest thing that moves anywhere in the app, and a large object\n       arriving at the speed of a hover state reads as a snap however smooth\n       the curve is.\n\n       The ceiling is Account settings' 560, past which the body scrolls. The\n       first measurement is applied before paint (`useLayoutEffect`), so the\n       panel opens at its right size rather than growing into it.\n\n       A COLUMN, not a scrolling box: the input is pinned at the top and only\n       the answer under it scrolls, so the thing you are typing into never\n       leaves the screen. */\n    <Dialog open={open} onOpenChange={(next) => !next && close()}>\n      <DialogContent className=\"pv-search-panel flex max-h-[min(74vh,560px)] max-w-[640px] flex-col gap-0 overflow-hidden p-4\">\n        {/* The panel is its own label — a heading above a search box would be\n            a modal introducing a control that says what it is. It is here\n            because Radix warns without one and a screen reader opening this\n            with no name is told only \"dialog\". */}\n        <DialogTitle className=\"sr-only\">Search</DialogTitle>\n\n        {/* THE HEIGHT IS ANIMATED HERE, not on `DialogContent`.\n            A `style` prop passed to DialogContent never reaches the DOM: it\n            goes to Radix's `Content`, which is `asChild` over a `motion.div`,\n            and motion owns `style` outright — measured live, `el.style.height`\n            came back empty while the class said `transition-property: height`.\n            Two frameworks, one attribute, and the loser is silent about it.\n\n            So the dialog stays `h-auto` and this wrapper carries the number.\n            An auto-height parent tracks its child every frame, so animating\n            the child animates the visible box — the border, the ground and the\n            scrim's hole in the page all follow. */}\n        {/* THE SAME RESIZE AS THE CREATE-BUSINESS MODAL — John, 2026-09-03:\n            *\"when creating a new business you see how the modal changes sizes,\n            i love it so much, why don't we have that for this search modal,\n            there's just a vibe.\"*\n\n            It had its own worse copy of that: a measured height on a CSS\n            transition, which cannot spring and therefore cannot overshoot,\n            which is most of the vibe. `AnimatedHeight` is that component,\n            lifted out of `create-business-modal` into `ui/` so the two cannot\n            drift.\n\n            `overflow-visible` because the field paints a hover edge and a\n            focus ring a pixel or two outside its own box, and this wrapper\n            starts at the field's top edge — John: *\"when you hover on the\n            search the top cuts\"*. `DialogContent` is already `overflow-hidden`\n            and sits 16px outside, so nothing escapes the panel; the spill has\n            the panel's own padding to move through. */}\n        <AnimatedHeight className=\"overflow-visible\">\n          <div>\n            {view === 'whats-new' ? (\n              <WhatsNewHead onBack={() => setView('search')} />\n            ) : (\n              <SearchHead\n                query={query}\n                onQueryChange={onQueryChange}\n                onSubmit={onSubmit}\n                scope={scope}\n                onScopeChange={onScopeChange}\n                inputRef={inputRef}\n                businessName={businessName}\n                recordsOnly={recordsOnly}\n              />\n            )}\n          </div>\n\n          {/* Only this scrolls, and it carries the ceiling. The panel is the\n              size of its content now, so the cap has to live on the part that\n              can grow without limit — 380px is `DialogContent`'s 560 less the\n              controls above and the release row below. */}\n          {/* `min-h-0` so it can shrink inside the flex column, and NOT `flex-1`\n            — that would stretch the answer to fill a panel whose whole point\n            is now to be the size of the answer. */}\n          <div className=\"-mx-1 max-h-[380px] min-h-0 overflow-y-auto px-1 pt-3\">\n            <div className=\"pb-px\">\n              {view === 'whats-new' ? (\n                <WhatsNewView />\n              ) : (\n                <>\n                  {/* Typing shows records; a committed question shows Box. Same\n            division as the home, because it is the same input. */}\n                  {query.trim().startsWith('/') ? (\n                    <SearchCreateCommands query={query} onNavigate={onClose} />\n                  ) : (query.trim() || scope) && (recordsOnly || !messages) ? (\n                    <AskResults\n                      query={query}\n                      onNavigate={onClose}\n                      tab={scope ?? 'all'}\n                    />\n                  ) : (\n                    <>\n                      {/* THE EMPTY STATE. Shopify's exactly: a large magnifier over\n                  one line naming the business, and nothing else.\n\n                  THE THREE QUESTIONS ARE GONE — John, 2026-09-03, having asked\n                  for them an hour earlier and then *\"delete this\"*. Seeing\n                  them under the field settles it: a prompt list is a menu, and\n                  a menu directly beneath a box you have just been given the\n                  caret in competes with typing. The panel's own footer already\n                  says Enter asks Box, which is the same fact without\n                  three rows of it. They are still on the home, where there is\n                  no caret waiting and the question is genuinely \"what can this\n                  thing do\".\n\n                  WHAT WENT. A history menu and a promote button on their own\n                  row, plus `PotterIntro`'s whole opening block. Three controls\n                  and a paragraph, at the moment a merchant has pressed ⌘K and\n                  is about to type — every one of them furniture between the\n                  field and the first keystroke. History is not lost: it is on\n                  `/dashboard/ask`, which is where a conversation you want to\n                  go back to belongs.\n\n                  THREE QUESTIONS, NOT FOUR. `SUGGESTIONS` carries \"Which items\n                  are running low?\" as well, and John named these three. They\n                  are still taken FROM that list rather than retyped, so the\n                  home and this panel cannot drift into two different ideas of\n                  what Box can be asked.\n\n                  The questions are absent on a screen that owns the thread —\n                  there is nowhere here to show the answer. */}\n                      {messages > 0 ? (\n                        <>\n                          <div className=\"mb-2 flex items-center justify-end gap-1\">\n                            <PotterOpenFull onDone={close} />\n                          </div>\n                          <PotterSurface compact />\n                          <PotterFallible />\n                        </>\n                      ) : (\n                        /* THE HOUSE EMPTY STATE, not a hand-drawn one. John,\n                   2026-09-03: *\"the empty state icon seems too small and\n                   shouldn't also be a search bar. is that also how all our\n                   empty states look like\"* — and it was not. This was a 28px\n                   lucide glyph over a line of text, which is smaller and\n                   flatter than every other empty state in the app, and it\n                   repeated the magnifier already sitting in the field two\n                   inches above it. A glyph used twice on one surface stops\n                   being a sign.\n\n                   `StateView` is what the other twenty-five screens render: an\n                   `IllustrationFrame` that resolves the icon to a CONCEPT and\n                   picks up its photograph the moment that asset lands. So this\n                   improves on its own when the art does, and it cannot drift\n                   from the rest.\n\n                   `compact` because the surrounding modal IS the frame —\n                   that is exactly the case the prop documents, a well inside a\n                   card. Without it this would draw a second card inside the\n                   panel.\n\n                   `Compass`, not `Search`: what the panel does before you type\n                   is orient you, and it is the same glyph `AskResults` already\n                   gives a destination. */\n                        <StateView\n                          kind=\"empty\"\n                          compact\n                          icon={Compass}\n                          /* NO DESCRIPTION. John, 2026-09-03: *\"remove this —\n                             Orders, customers, products and invoices, or ask\n                             Box a question.\"* It listed the four chips\n                             sitting directly above it, in prose, which is the\n                             panel reading its own controls aloud. */\n                          title={`Find anything in ${businessName}`}\n                        />\n                      )}\n                    </>\n                  )}\n                </>\n              )}\n            </div>\n          </div>\n\n          {/* No What's new row under the empty state (John, 2026-10-05). The\n              notes are in the help menu at the foot of the rail. */}\n          {/* The way into quick-create, always in view, as Dash's /new is. */}\n          {view === 'search' && (\n            <div className=\"-mx-4 mt-3 flex items-center justify-end gap-2 border-t border-line px-4 pt-3 text-xs text-[var(--text-tertiary)]\">\n              <button\n                type=\"button\"\n                onClick={() => {\n                  onQueryChange('/new ');\n                  inputRef.current?.focus();\n                }}\n                className=\"flex items-center gap-2 rounded-md px-1 py-0.5 transition-colors hover:text-[var(--text-primary)]\"\n              >\n                <kbd className=\"rounded border border-[var(--border-default)] bg-[var(--bg-muted)] px-2 py-0.5 font-sans text-[11px]\">\n                  /new\n                </kbd>\n                Create\n              </button>\n            </div>\n          )}\n        </AnimatedHeight>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/search-scopes.d.ts

@@ -0,0 +1,27 @@
+/**
+ * What the strip under the field narrows to, and the only four kinds of record
+ * this search can actually return — `useCommandSearch` reads orders, members,
+ * invoices, products and support cases, so a sixth chip would be a promise
+ * with no query behind it. Shopify's own strip is the same ideas plus Apps and
+ * Sales channels, which are theirs and not ours.
+ *
+ * Their own file because both halves of the panel need them and neither owns
+ * the other: the head renders the strip, the body filters by what it chose.
+ */
+export declare const SCOPES: readonly [{
+    readonly id: "order";
+    readonly label: "Orders";
+}, {
+    readonly id: "customer";
+    readonly label: "Customers";
+}, {
+    readonly id: "product";
+    readonly label: "Products";
+}, {
+    readonly id: "invoice";
+    readonly label: "Invoices";
+}, {
+    readonly id: "support";
+    readonly label: "Support";
+}];
+export type Scope = (typeof SCOPES)[number]['id'];