@withpotter/components 0.13.0-next.101

package/dist/dashboard/home/ask-results.d.ts

@@ -0,0 +1,37 @@
+/**
+ * What the bar answers with, in the space the board just vacated: one surface,
+ * three answers, no modal on top of a page that has only just cleared one.
+ *
+ * It shows the thing, then links to it. A destination that HAS things renders
+ * them (real templates, via the real `TemplateTile`, two across because tile
+ * size is the function of a template shelf) and selecting one navigates to the
+ * page; it stays a router, not a second gallery.
+ *
+ * Help is answered, not routed: `HELP_TOPICS` carries a question, an answer and
+ * an action per topic, so a question gets the ANSWER inline and the destination
+ * as a link under it. Nothing here claims to be reasoning: each block says what
+ * it is (a place, an answer, a record), so a keyword match is never dressed up
+ * as understanding.
+ */
+export declare function AskResults({ query, onNavigate, tab, recent, }: {
+    query: string;
+    /** Fired before navigation so the bar can drop out of asking mode. */
+    onNavigate: () => void;
+    /**
+     * Which kind of record to show, from the strip above this. `all` is the
+     * mixed list — the default everywhere else this renders, including the
+     * home, which has no strip.
+     */
+    tab?: 'all' | 'order' | 'customer' | 'product' | 'invoice' | 'support';
+    /**
+     * With nothing typed, show what has been happening — the latest orders,
+     * customers and invoices in time order — instead of nothing. The home's
+     * search opens on this.
+     */
+    recent?: boolean;
+}): import("react").JSX.Element;
+/** The text, with whatever the person typed set heavier, wherever it falls. */
+export declare function Highlight({ text, query }: {
+    text: string;
+    query: string;
+}): import("react").JSX.Element;

package/dist/dashboard/home/ask-results.js

@@ -0,0 +1,243 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import {
+  ArrowRight,
+  CircleHelp,
+  Compass,
+  LifeBuoy,
+  Package,
+  Receipt,
+  ShoppingBag,
+  UserRound
+} from "lucide-react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { HELP_TOPICS, searchHelpTopics } from "@withpotter/lib/help-topics";
+import { useCommandSearch } from "@withpotter/components/command-palette/use-command-search";
+import { GeneratedAvatar } from "@withpotter/ui-kit/generated-avatar";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { useTemplates } from "@withpotter/lib/template-context";
+import { TemplateTile } from "@withpotter/components/templates/template-tile";
+import { previewUrlFor } from "@withpotter/components/templates/template-gallery";
+import { resolveAskIntent } from "./ask-intent";
+import { AskCapabilities, useCapabilityOffers } from "./ask-capabilities";
+function AskResults({
+  query,
+  onNavigate,
+  tab = "all",
+  recent = false
+}) {
+  const { tenant } = useAuth();
+  const router = useRouter();
+  const intent = resolveAskIntent(query);
+  const { setQuery, results, isLoading, hasQuery } = useCommandSearch({
+    tenantSlug: tenant?.slug ?? "",
+    isOpen: true,
+    // A chosen tab with an empty box browses that collection's recents; see
+    // the note on `scope` in the hook.
+    scope: tab === "all" ? null : tab,
+    recent
+  });
+  useEffect(() => {
+    setQuery(query);
+  }, [query, setQuery]);
+  const { templateList } = useTemplates();
+  const templates = intent.kind === "destination" && intent.id === "templates" ? templateList : [];
+  const helpTopics = intent.kind === "help" ? searchHelpTopics(HELP_TOPICS, query).slice(0, 3) : [];
+  const formatCurrency = useFormatCurrency();
+  const typed = query.trim().length >= 2;
+  const records = tab === "all" && recent && !typed ? (
+    /* No term: one feed, newest first. Products are left out because a
+       product has no moment — "recent" is things that happened. */
+    [...results.orders, ...results.customers, ...results.invoices].sort((a, b) => (b.at ?? "").localeCompare(a.at ?? "")).slice(0, 8)
+  ) : tab === "all" ? [
+    ...results.orders.slice(0, 3),
+    ...results.customers.slice(0, 3),
+    ...results.invoices.slice(0, 2),
+    ...results.products.slice(0, 3),
+    ...results.support.slice(0, 2)
+  ].slice(0, 6) : tab === "order" ? results.orders : tab === "customer" ? results.customers : tab === "invoice" ? results.invoices : results.products;
+  const noResults = intent.kind === "search" && !isLoading && hasQuery && records.length === 0;
+  const browsing = (tab !== "all" || recent) && !query.trim();
+  const capabilityOffers = useCapabilityOffers(query);
+  const nothing = noResults && capabilityOffers.length === 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    intent.kind === "destination" && /* @__PURE__ */ jsx(
+      Section,
+      {
+        icon: Compass,
+        label: intent.hint,
+        action: templates.length > 0 ? { label: "View all", href: intent.href } : void 0,
+        onAction: onNavigate,
+        children: templates.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: templates.map((t) => /* @__PURE__ */ jsx(
+          TemplateTile,
+          {
+            template: t,
+            previewUrl: previewUrlFor(t.id),
+            isCurrent: false,
+            isSelected: false,
+            isOwned: false,
+            onSelect: () => {
+              onNavigate();
+              router.push(intent.href);
+            }
+          },
+          t.id
+        )) }) : /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: intent.href,
+            onClick: onNavigate,
+            className: "surface-interactive flex items-center gap-3 p-3",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-md font-medium text-[var(--text-primary)]", children: intent.label }),
+              /* @__PURE__ */ jsx(ArrowRight, { className: "shrink-0 text-[var(--text-muted)]" })
+            ]
+          }
+        )
+      }
+    ),
+    helpTopics.length > 0 && /* @__PURE__ */ jsx(Section, { icon: CircleHelp, label: "Answer", children: /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: helpTopics.map((t) => /* @__PURE__ */ jsxs("li", { className: "surface-interactive block p-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-md font-medium text-[var(--text-primary)]", children: t.question }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-relaxed text-[var(--text-tertiary)]", children: t.answer }),
+      t.action && /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: t.action.href,
+          onClick: onNavigate,
+          className: "mt-2 inline-flex items-center gap-1 text-sm font-medium text-[var(--text-secondary)] underline underline-offset-2 hover:text-[var(--text-primary)]",
+          children: [
+            t.action.label,
+            /* @__PURE__ */ jsx(ArrowRight, {})
+          ]
+        }
+      )
+    ] }, t.id)) }) }),
+    browsing && records.length > 0 && /* @__PURE__ */ jsx("p", { className: "mb-2 px-1 text-2xs font-medium uppercase tracking-[0.06em] text-[var(--text-muted)]", children: recent && tab === "all" ? "Recent activity" : "Recent" }),
+    records.length > 0 && /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: records.map((r) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: r.href,
+        onClick: onNavigate,
+        className: "flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-[var(--interactive-hover)]",
+        children: [
+          /* @__PURE__ */ jsx(RecordThumb, { item: r }),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-md text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(Highlight, { text: r.label, query }) }),
+            (r.meta || r.sublabel) && /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsx(
+              Highlight,
+              {
+                text: r.meta || r.sublabel || "",
+                query
+              }
+            ) })
+          ] }),
+          tab === "all" && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md bg-[var(--bg-muted)] px-2 py-0.5 text-xs text-[var(--text-tertiary)]", children: KIND_LABEL[r.group] ?? r.group }),
+          r.status && /* @__PURE__ */ jsx(StatusBadge, { status: r.status, className: "shrink-0" }),
+          r.amount !== void 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-md tabular-nums text-[var(--text-secondary)]", children: formatCurrency(r.amount, r.currency) })
+        ]
+      }
+    ) }, `${r.group}-${r.id}`)) }),
+    /* @__PURE__ */ jsx(AskCapabilities, { offers: capabilityOffers, onNavigate }),
+    nothing && !browsing && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-[var(--text-tertiary)]", children: `Nothing matched \u201C${query}\u201D. Try a customer\u2019s name, an order number, or ask how to do something.` })
+  ] });
+}
+const KIND_LABEL = {
+  order: "Order",
+  customer: "Customer",
+  invoice: "Invoice",
+  product: "Product",
+  support: "Support",
+  page: "Page"
+};
+function Highlight({ text, query }) {
+  const q = query.trim();
+  if (!q) return /* @__PURE__ */ jsx(Fragment, { children: text });
+  const at = text.toLowerCase().indexOf(q.toLowerCase());
+  if (at === -1) return /* @__PURE__ */ jsx(Fragment, { children: text });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    text.slice(0, at),
+    /* @__PURE__ */ jsx("strong", { className: "font-semibold text-[var(--text-primary)]", children: text.slice(at, at + q.length) }),
+    text.slice(at + q.length)
+  ] });
+}
+const RECORD_ICON = {
+  order: ShoppingBag,
+  customer: UserRound,
+  invoice: Receipt,
+  product: Package,
+  support: LifeBuoy,
+  page: Compass
+};
+const HAS_A_FACE = /* @__PURE__ */ new Set(["order", "customer", "invoice"]);
+function RecordThumb({
+  item
+}) {
+  if (!item.image && HAS_A_FACE.has(item.group)) {
+    return /* @__PURE__ */ jsx(
+      GeneratedAvatar,
+      {
+        name: item.label || item.sublabel || item.group,
+        className: "size-8 shrink-0"
+      }
+    );
+  }
+  if (item.image) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: item.image,
+          alt: "",
+          loading: "lazy",
+          className: "size-8 shrink-0 rounded-lg object-cover"
+        }
+      )
+    );
+  }
+  const Icon = RECORD_ICON[item.group] ?? Compass;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-tertiary)]",
+      children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+    }
+  );
+}
+function Section({
+  icon: Icon,
+  iconClassName = "",
+  label,
+  action,
+  onAction,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-baseline justify-between gap-3 px-1", children: [
+      /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-2xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx(Icon, { className: `h-[11px] w-[11px] ${iconClassName}` }),
+        label
+      ] }),
+      action && /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: action.href,
+          onClick: onAction,
+          className: "shrink-0 text-sm font-medium text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]",
+          children: action.label
+        }
+      )
+    ] }),
+    children
+  ] });
+}
+export {
+  AskResults,
+  Highlight
+};
+//# sourceMappingURL=ask-results.js.map

package/dist/dashboard/home/ask-results.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/ask-results.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useRouter } from 'next/navigation';\nimport Link from 'next/link';\nimport {\n  ArrowRight,\n  CircleHelp,\n  Compass,\n  LifeBuoy,\n  Package,\n  Receipt,\n  Search,\n  ShoppingBag,\n  UserRound,\n} from 'lucide-react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { HELP_TOPICS, searchHelpTopics } from '@withpotter/lib/help-topics';\nimport { useCommandSearch } from '@withpotter/components/command-palette/use-command-search';\nimport { GeneratedAvatar } from '@withpotter/ui-kit/generated-avatar';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { useTemplates } from '@withpotter/lib/template-context';\nimport { TemplateTile } from '@withpotter/components/templates/template-tile';\nimport { previewUrlFor } from '@withpotter/components/templates/template-gallery';\nimport { resolveAskIntent } from './ask-intent';\nimport { AskCapabilities, useCapabilityOffers } from './ask-capabilities';\n\n/**\n * What the bar answers with, in the space the board just vacated: one surface,\n * three answers, no modal on top of a page that has only just cleared one.\n *\n * It shows the thing, then links to it. A destination that HAS things renders\n * them (real templates, via the real `TemplateTile`, two across because tile\n * size is the function of a template shelf) and selecting one navigates to the\n * page; it stays a router, not a second gallery.\n *\n * Help is answered, not routed: `HELP_TOPICS` carries a question, an answer and\n * an action per topic, so a question gets the ANSWER inline and the destination\n * as a link under it. Nothing here claims to be reasoning: each block says what\n * it is (a place, an answer, a record), so a keyword match is never dressed up\n * as understanding.\n */\nexport function AskResults({\n  query,\n  onNavigate,\n  tab = 'all',\n  recent = false,\n}: {\n  query: string;\n  /** Fired before navigation so the bar can drop out of asking mode. */\n  onNavigate: () => void;\n  /**\n   * Which kind of record to show, from the strip above this. `all` is the\n   * mixed list — the default everywhere else this renders, including the\n   * home, which has no strip.\n   */\n  tab?: 'all' | 'order' | 'customer' | 'product' | 'invoice' | 'support';\n  /**\n   * With nothing typed, show what has been happening — the latest orders,\n   * customers and invoices in time order — instead of nothing. The home's\n   * search opens on this.\n   */\n  recent?: boolean;\n}) {\n  const { tenant } = useAuth();\n  const router = useRouter();\n  const intent = resolveAskIntent(query);\n\n  // Records are always fetched: a destination or help match does not mean the\n  // words are not also a customer's name, and showing both costs one request\n  // that the palette would have made anyway.\n  const { setQuery, results, isLoading, hasQuery } = useCommandSearch({\n    tenantSlug: tenant?.slug ?? '',\n    isOpen: true,\n    // A chosen tab with an empty box browses that collection's recents; see\n    // the note on `scope` in the hook.\n    scope: tab === 'all' ? null : tab,\n    recent,\n  });\n  // The hook owns the debounce and the fetch; this only keeps its query in step\n  // with the bar's. An effect rather than a render-time call, because writing\n  // another component's state while rendering is a cascading render.\n  useEffect(() => {\n    setQuery(query);\n  }, [query, setQuery]);\n\n  // ALL of them, not a taste. Someone who typed \"I want a different look\" is\n  // shopping, and showing six of eleven makes them click through to see the\n  // rest — which is exactly the click this panel exists to remove. The panel\n  // scrolls; a shelf that scrolls is normal, one that hides half its stock is\n  // not.\n  const { templateList } = useTemplates();\n  const templates =\n    intent.kind === 'destination' && intent.id === 'templates'\n      ? templateList\n      : [];\n\n  const helpTopics =\n    intent.kind === 'help'\n      ? searchHelpTopics(HELP_TOPICS, query).slice(0, 3)\n      : [];\n\n  const formatCurrency = useFormatCurrency();\n\n  /**\n   * Mixed, a few of each — or all of one kind when a tab is chosen.\n   *\n   * The caps are what make the mixed list readable: six rows that are three\n   * orders, two customers and a product answer \"what do these words match\" in\n   * a way that twenty orders never could. Picking a tab is a merchant saying\n   * they already know which kind they want, so the cap comes off and the only\n   * limit left is what the API returned.\n   */\n  const typed = query.trim().length >= 2;\n  const records =\n    tab === 'all' && recent && !typed\n      ? /* No term: one feed, newest first. Products are left out because a\n           product has no moment — \"recent\" is things that happened. */\n        [...results.orders, ...results.customers, ...results.invoices]\n          .sort((a, b) => (b.at ?? '').localeCompare(a.at ?? ''))\n          .slice(0, 8)\n      : tab === 'all'\n        ? [\n            ...results.orders.slice(0, 3),\n            ...results.customers.slice(0, 3),\n            ...results.invoices.slice(0, 2),\n            ...results.products.slice(0, 3),\n            ...results.support.slice(0, 2),\n          ].slice(0, 6)\n        : tab === 'order'\n          ? results.orders\n          : tab === 'customer'\n            ? results.customers\n            : tab === 'invoice'\n              ? results.invoices\n              : results.products;\n\n  const noResults =\n    intent.kind === 'search' && !isLoading && hasQuery && records.length === 0;\n\n  /** What the section is, when a tab is open and nothing has been typed. */\n  const browsing = (tab !== 'all' || recent) && !query.trim();\n\n  /* Offered under the records, and they also silence the no-results line —\n     see `use-capability-offers`. */\n  const capabilityOffers = useCapabilityOffers(query);\n  const nothing = noResults && capabilityOffers.length === 0;\n\n  return (\n    <div className=\"space-y-4\">\n      {intent.kind === 'destination' && (\n        <Section\n          icon={Compass}\n          label={intent.hint}\n          // Demoted deliberately. \"Browse templates\" WAS the whole answer,\n          // which made the panel a signpost pointing at the thing it could\n          // simply have shown. Beside the heading it is what it actually is:\n          // the way out to the full page once these are not enough.\n          action={\n            templates.length > 0\n              ? { label: 'View all', href: intent.href }\n              : undefined\n          }\n          onAction={onNavigate}\n        >\n          {templates.length > 0 ? (\n            <div className=\"grid grid-cols-2 gap-4\">\n              {templates.map((t) => (\n                <TemplateTile\n                  key={t.id}\n                  template={t}\n                  previewUrl={previewUrlFor(t.id)}\n                  isCurrent={false}\n                  isSelected={false}\n                  isOwned={false}\n                  onSelect={() => {\n                    onNavigate();\n                    router.push(intent.href);\n                  }}\n                />\n              ))}\n            </div>\n          ) : (\n            <Link\n              href={intent.href}\n              onClick={onNavigate}\n              className=\"surface-interactive flex items-center gap-3 p-3\"\n            >\n              <span className=\"min-w-0 flex-1 truncate text-md font-medium text-[var(--text-primary)]\">\n                {intent.label}\n              </span>\n              <ArrowRight className=\"shrink-0 text-[var(--text-muted)]\" />\n            </Link>\n          )}\n        </Section>\n      )}\n\n      {helpTopics.length > 0 && (\n        <Section icon={CircleHelp} label=\"Answer\">\n          <ul className=\"space-y-2\">\n            {helpTopics.map((t) => (\n              <li key={t.id} className=\"surface-interactive block p-3\">\n                <p className=\"text-md font-medium text-[var(--text-primary)]\">\n                  {t.question}\n                </p>\n                <p className=\"mt-1 text-sm leading-relaxed text-[var(--text-tertiary)]\">\n                  {t.answer}\n                </p>\n                {t.action && (\n                  <Link\n                    href={t.action.href}\n                    onClick={onNavigate}\n                    className=\"mt-2 inline-flex items-center gap-1 text-sm font-medium text-[var(--text-secondary)] underline underline-offset-2 hover:text-[var(--text-primary)]\"\n                  >\n                    {t.action.label}\n                    <ArrowRight />\n                  </Link>\n                )}\n              </li>\n            ))}\n          </ul>\n        </Section>\n      )}\n\n      {/* NO \"IN YOUR BUSINESS\" HEADING — John, 2026-09-03. The other blocks\n          here are headed because they are surprising: an ANSWER and a PLACE\n          both need to say what kind of thing they are before you read them.\n          Records do not. They are what a search box returns; a label over them\n          spends a line telling somebody the obvious, and it sat directly under\n          the field where the first result should be. */}\n      {/* A HEADING ONLY WHEN BROWSING. A list under a search box needs no\n          label — it is obviously the results — but a list that appeared\n          because a drawer was opened has to say which drawer, and that it is\n          the recent few rather than all of them. */}\n      {browsing && records.length > 0 && (\n        <p className=\"mb-2 px-1 text-2xs font-medium uppercase tracking-[0.06em] text-[var(--text-muted)]\">\n          {recent && tab === 'all' ? 'Recent activity' : 'Recent'}\n        </p>\n      )}\n      {records.length > 0 && (\n        <ul className=\"space-y-0.5\">\n          {records.map((r) => (\n            <li key={`${r.group}-${r.id}`}>\n              <Link\n                href={r.href}\n                onClick={onNavigate}\n                className=\"flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-[var(--interactive-hover)]\"\n              >\n                <RecordThumb item={r} />\n                <span className=\"flex min-w-0 flex-1 flex-col\">\n                  <span className=\"truncate text-md text-[var(--text-primary)]\">\n                    <Highlight text={r.label} query={query} />\n                  </span>\n                  {/* The depth. `meta` is what the record IS beyond its name —\n                      six orders and when they last bought, what is still owed\n                      and when it was due, how many are left in stock — and it\n                      falls back to the identifier when a record has nothing\n                      more to say, so no row ever loses its second line and the\n                      list keeps one rhythm. */}\n                  {(r.meta || r.sublabel) && (\n                    <span className=\"truncate text-sm text-[var(--text-muted)]\">\n                      <Highlight\n                        text={r.meta || r.sublabel || ''}\n                        query={query}\n                      />\n                    </span>\n                  )}\n                </span>\n                {/* Which kind of thing, when the list mixes them. */}\n                {tab === 'all' && (\n                  <span className=\"shrink-0 rounded-md bg-[var(--bg-muted)] px-2 py-0.5 text-xs text-[var(--text-tertiary)]\">\n                    {KIND_LABEL[r.group] ?? r.group}\n                  </span>\n                )}\n                {r.status && (\n                  <StatusBadge status={r.status} className=\"shrink-0\" />\n                )}\n                {r.amount !== undefined && (\n                  <span className=\"shrink-0 text-md tabular-nums text-[var(--text-secondary)]\">\n                    {formatCurrency(r.amount, r.currency)}\n                  </span>\n                )}\n              </Link>\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {/* WHAT POTTER COULD ALSO DO, under the records and never instead of\n          them. A merchant searching for something this workspace does not run\n          yet is the one moment where \"you could switch that on\" is the honest\n          answer rather than a pitch — see `ask-capabilities`. */}\n      <AskCapabilities offers={capabilityOffers} onNavigate={onNavigate} />\n\n      {/* Silent while browsing: an empty \"recent\" list is just an empty list,\n          and a line announcing it adds nothing under the search box. */}\n      {nothing && !browsing && (\n        <p className=\"px-3 py-6 text-center text-sm text-[var(--text-tertiary)]\">\n          {`Nothing matched “${query}”. Try a customer’s name, an order number, or ask how to do something.`}\n        </p>\n      )}\n    </div>\n  );\n}\n\n/**\n * The record, shown — John, 2026-09-03: *\"the search modal should have imagery\n * too, not just texts, should have jpg/png or gif\"*.\n *\n * A merchant scanning six results recognises their own product by its\n * photograph long before they finish reading its title, and every record here\n * already carried a picture we were dropping on the floor. `useCommandSearch`\n * now carries it through as `image`.\n *\n * A PERSON WITHOUT A PHOTOGRAPH STILL GETS A FACE. `GeneratedAvatar` is what\n * every list row in the app already paints for a customer with no upload —\n * `IdentityCell` on the orders table, the account row, the team roster — so\n * using it here is matching the app rather than inventing a stand-in. The\n * seeded avatar is stable per person, which is the property that makes it\n * useful: the same customer is the same colour in the search panel as in the\n * table you find them in.\n *\n * A PRODUCT WITHOUT A PHOTOGRAPH GETS A GLYPH, because there is no generated\n * picture of a product anywhere in this app and inventing one here would be\n * the first. The glyph says what KIND of record it is instead, which is the\n * other thing a picture was doing.\n *\n * 32px, which is the row's own height rather than a tile in it: a search\n * result is a line you are skimming, and a thumbnail that makes it 56px tall\n * turns six results into three on screen.\n */\nconst KIND_LABEL: Record<string, string> = {\n  order: 'Order',\n  customer: 'Customer',\n  invoice: 'Invoice',\n  product: 'Product',\n  support: 'Support',\n  page: 'Page',\n};\n\n/** The text, with whatever the person typed set heavier, wherever it falls. */\nexport function Highlight({ text, query }: { text: string; query: string }) {\n  const q = query.trim();\n  if (!q) return <>{text}</>;\n  const at = text.toLowerCase().indexOf(q.toLowerCase());\n  if (at === -1) return <>{text}</>;\n  return (\n    <>\n      {text.slice(0, at)}\n      <strong className=\"font-semibold text-[var(--text-primary)]\">\n        {text.slice(at, at + q.length)}\n      </strong>\n      {text.slice(at + q.length)}\n    </>\n  );\n}\n\nconst RECORD_ICON = {\n  order: ShoppingBag,\n  customer: UserRound,\n  invoice: Receipt,\n  product: Package,\n  support: LifeBuoy,\n  page: Compass,\n} as const;\n\n/** The groups whose subject is a person, and therefore has a face. */\nconst HAS_A_FACE = new Set(['order', 'customer', 'invoice']);\n\nfunction RecordThumb({\n  item,\n}: {\n  item: {\n    image?: string | null;\n    group: keyof typeof RECORD_ICON;\n    label: string;\n    sublabel?: string;\n  };\n}) {\n  if (!item.image && HAS_A_FACE.has(item.group)) {\n    return (\n      <GeneratedAvatar\n        name={item.label || item.sublabel || item.group}\n        className=\"size-8 shrink-0\"\n      />\n    );\n  }\n  if (item.image) {\n    return (\n      // eslint-disable-next-line @next/next/no-img-element\n      <img\n        src={item.image}\n        alt=\"\"\n        loading=\"lazy\"\n        className=\"size-8 shrink-0 rounded-lg object-cover\"\n      />\n    );\n  }\n  const Icon = RECORD_ICON[item.group] ?? Compass;\n  return (\n    <span\n      aria-hidden=\"true\"\n      className=\"grid size-8 shrink-0 place-items-center rounded-lg bg-[var(--bg-muted)] text-[var(--text-tertiary)]\"\n    >\n      <Icon className=\"size-4\" />\n    </span>\n  );\n}\n\nfunction Section({\n  icon: Icon,\n  iconClassName = '',\n  label,\n  action,\n  onAction,\n  children,\n}: {\n  icon: typeof Search;\n  /** For the one caller that spins its glyph while a request is in flight. */\n  iconClassName?: string;\n  label: string;\n  /** A quiet way out to the full page, where one exists. */\n  action?: { label: string; href: string };\n  onAction?: () => void;\n  children: React.ReactNode;\n}) {\n  return (\n    <div>\n      <div className=\"mb-2 flex items-baseline justify-between gap-3 px-1\">\n        <p className=\"flex items-center gap-2 text-2xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n          <Icon className={`h-[11px] w-[11px] ${iconClassName}`} />\n          {label}\n        </p>\n        {action && (\n          <Link\n            href={action.href}\n            onClick={onAction}\n            className=\"shrink-0 text-sm font-medium text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]\"\n          >\n            {action.label}\n          </Link>\n        )}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/home/ask-send-button.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The send control, which is a circle for a search and a pill for support, and
+ * which tells you what just happened to it.
+ *
+ * IT GROWS RATHER THAN SWAPS. The arrow stays where it is and a label unfolds
+ * beside it, so the person watching sees the same button become a more specific
+ * one, "this will now go to support", instead of one control vanishing and
+ * another appearing. The label's width and opacity animate together on the same
+ * spring the rest of the card uses; the button has no fixed width in support
+ * mode, so it is exactly as wide as its words.
+ *
+ * THREE FACES IN SUPPORT, because a send that gives no sign of having done
+ * anything gets pressed twice:
+ *
+ *   ready    an arrow and "Send to support"
+ *   sending  a turning spinner and "Sending…", still blue
+ *   sent     a check and "Sent", green, for a couple of seconds, then back
+ *
+ * The icon and the words change together and the icon cross-fades with a small
+ * scale, so it reads as one control changing its mind rather than three.
+ * Green is `--success`, the one this product already uses for "that worked".
+ *
+ * In search mode it looks and behaves as it always did: brand-coloured once
+ * there is something typed, and a quiet circle before.
+ */
+export declare function AskSendButton({ support, canSend, sending, sent, title, onClick, }: {
+    /** The box is sending to support rather than searching. */
+    support: boolean;
+    canSend: boolean;
+    sending?: boolean;
+    /** A case has just gone; show the confirmation. */
+    sent?: boolean;
+    /** Why it is disabled, when that is not obvious. */
+    title?: string;
+    onClick: () => void;
+}): import("react").JSX.Element;

package/dist/dashboard/home/ask-send-button.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { ArrowUp, Check, Loader2 } from "lucide-react";
+import { springs } from "@withpotter/lib/motion";
+function AskSendButton({
+  support,
+  canSend,
+  sending,
+  sent,
+  title,
+  onClick
+}) {
+  const face = sent ? "sent" : sending ? "sending" : "ready";
+  const Icon = face === "sent" ? Check : face === "sending" ? Loader2 : ArrowUp;
+  const label = face === "sent" ? "Sent" : face === "sending" ? "Sending\u2026" : "Send to support";
+  const lit = canSend || face !== "ready";
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      disabled: !canSend,
+      "aria-label": support ? label : "Send",
+      "aria-live": "polite",
+      title,
+      layout: true,
+      transition: springs.snappy,
+      className: `flex h-8 shrink-0 items-center justify-center overflow-hidden rounded-full transition-colors duration-[var(--motion-normal)] disabled:cursor-not-allowed ${support ? "px-3" : "w-8"} border ${face === "sent" ? "border-transparent bg-[var(--success)] text-white" : lit ? "border-transparent bg-brand-500 text-white hover:bg-brand-600" : "border-[color-mix(in_srgb,var(--border-subtle)_55%,transparent)] bg-[var(--bg-muted)] text-[var(--text-muted)]"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "relative grid size-4 shrink-0 place-items-center", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "grid place-items-center",
+            initial: { opacity: 0, scale: 0.5 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.5 },
+            transition: springs.snappy,
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                "aria-hidden": true,
+                className: `size-4 ${face === "sending" ? "animate-spin" : ""}`
+              }
+            )
+          },
+          face
+        ) }) }),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: support && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "overflow-hidden whitespace-nowrap text-sm font-medium",
+            initial: { width: 0, opacity: 0, marginLeft: 0 },
+            animate: { width: "auto", opacity: 1, marginLeft: 8 },
+            exit: { width: 0, opacity: 0, marginLeft: 0 },
+            transition: springs.snappy,
+            children: label
+          },
+          "label"
+        ) })
+      ]
+    }
+  );
+}
+export {
+  AskSendButton
+};
+//# sourceMappingURL=ask-send-button.js.map

package/dist/dashboard/home/ask-send-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/ask-send-button.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion } from 'motion/react';\nimport { ArrowUp, Check, Loader2 } from 'lucide-react';\nimport { springs } from '@withpotter/lib/motion';\n\n/**\n * The send control, which is a circle for a search and a pill for support, and\n * which tells you what just happened to it.\n *\n * IT GROWS RATHER THAN SWAPS. The arrow stays where it is and a label unfolds\n * beside it, so the person watching sees the same button become a more specific\n * one, \"this will now go to support\", instead of one control vanishing and\n * another appearing. The label's width and opacity animate together on the same\n * spring the rest of the card uses; the button has no fixed width in support\n * mode, so it is exactly as wide as its words.\n *\n * THREE FACES IN SUPPORT, because a send that gives no sign of having done\n * anything gets pressed twice:\n *\n *   ready    an arrow and \"Send to support\"\n *   sending  a turning spinner and \"Sending…\", still blue\n *   sent     a check and \"Sent\", green, for a couple of seconds, then back\n *\n * The icon and the words change together and the icon cross-fades with a small\n * scale, so it reads as one control changing its mind rather than three.\n * Green is `--success`, the one this product already uses for \"that worked\".\n *\n * In search mode it looks and behaves as it always did: brand-coloured once\n * there is something typed, and a quiet circle before.\n */\nexport function AskSendButton({\n  support,\n  canSend,\n  sending,\n  sent,\n  title,\n  onClick,\n}: {\n  /** The box is sending to support rather than searching. */\n  support: boolean;\n  canSend: boolean;\n  sending?: boolean;\n  /** A case has just gone; show the confirmation. */\n  sent?: boolean;\n  /** Why it is disabled, when that is not obvious. */\n  title?: string;\n  onClick: () => void;\n}) {\n  const face = sent ? 'sent' : sending ? 'sending' : 'ready';\n  const Icon = face === 'sent' ? Check : face === 'sending' ? Loader2 : ArrowUp;\n  const label =\n    face === 'sent'\n      ? 'Sent'\n      : face === 'sending'\n        ? 'Sending…'\n        : 'Send to support';\n  /* Sending stays blue and sent goes green; neither is clickable. */\n  const lit = canSend || face !== 'ready';\n\n  return (\n    <motion.button\n      type=\"button\"\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={onClick}\n      disabled={!canSend}\n      aria-label={support ? label : 'Send'}\n      aria-live=\"polite\"\n      title={title}\n      layout\n      transition={springs.snappy}\n      className={`flex h-8 shrink-0 items-center justify-center overflow-hidden rounded-full transition-colors duration-[var(--motion-normal)] disabled:cursor-not-allowed ${\n        support ? 'px-3' : 'w-8'\n      } border ${\n        face === 'sent'\n          ? 'border-transparent bg-[var(--success)] text-white'\n          : lit\n            ? 'border-transparent bg-brand-500 text-white hover:bg-brand-600'\n            : 'border-[color-mix(in_srgb,var(--border-subtle)_55%,transparent)] bg-[var(--bg-muted)] text-[var(--text-muted)]'\n      }`}\n    >\n      <span className=\"relative grid size-4 shrink-0 place-items-center\">\n        <AnimatePresence initial={false} mode=\"popLayout\">\n          <motion.span\n            key={face}\n            className=\"grid place-items-center\"\n            initial={{ opacity: 0, scale: 0.5 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.5 }}\n            transition={springs.snappy}\n          >\n            <Icon\n              aria-hidden\n              className={`size-4 ${face === 'sending' ? 'animate-spin' : ''}`}\n            />\n          </motion.span>\n        </AnimatePresence>\n      </span>\n      <AnimatePresence initial={false}>\n        {support && (\n          <motion.span\n            key=\"label\"\n            className=\"overflow-hidden whitespace-nowrap text-sm font-medium\"\n            initial={{ width: 0, opacity: 0, marginLeft: 0 }}\n            animate={{ width: 'auto', opacity: 1, marginLeft: 8 }}\n            exit={{ width: 0, opacity: 0, marginLeft: 0 }}\n            transition={springs.snappy}\n          >\n            {label}\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </motion.button>\n  );\n}\n"],"mappings":";AA6DI,SA8BQ,KA9BR;AA3DJ,SAAS,iBAAiB,cAAc;AACxC,SAAS,SAAS,OAAO,eAAe;AACxC,SAAS,eAAe;AA2BjB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,OAAO,OAAO,SAAS,UAAU,YAAY;AACnD,QAAM,OAAO,SAAS,SAAS,QAAQ,SAAS,YAAY,UAAU;AACtE,QAAM,QACJ,SAAS,SACL,SACA,SAAS,YACP,kBACA;AAER,QAAM,MAAM,WAAW,SAAS;AAEhC,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,MAAK;AAAA,MACL,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,MACrC;AAAA,MACA,UAAU,CAAC;AAAA,MACX,cAAY,UAAU,QAAQ;AAAA,MAC9B,aAAU;AAAA,MACV;AAAA,MACA,QAAM;AAAA,MACN,YAAY,QAAQ;AAAA,MACpB,WAAW,4JACT,UAAU,SAAS,KACrB,WACE,SAAS,SACL,sDACA,MACE,kEACA,gHACR;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAU,oDACd,8BAAC,mBAAgB,SAAS,OAAO,MAAK,aACpC;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEC,WAAU;AAAA,YACV,SAAS,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,YAClC,SAAS,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,YAChC,MAAM,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,YAC/B,YAAY,QAAQ;AAAA,YAEpB;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAW,UAAU,SAAS,YAAY,iBAAiB,EAAE;AAAA;AAAA,YAC/D;AAAA;AAAA,UAVK;AAAA,QAWP,GACF,GACF;AAAA,QACA,oBAAC,mBAAgB,SAAS,OACvB,qBACC;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEC,WAAU;AAAA,YACV,SAAS,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,EAAE;AAAA,YAC/C,SAAS,EAAE,OAAO,QAAQ,SAAS,GAAG,YAAY,EAAE;AAAA,YACpD,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,EAAE;AAAA,YAC5C,YAAY,QAAQ;AAAA,YAEnB;AAAA;AAAA,UAPG;AAAA,QAQN,GAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/dashboard/home/ask-support-attachments.d.ts

@@ -0,0 +1,16 @@
+import type { useAskSupport } from './use-ask-support';
+/**
+ * What is on the card to be sent to support: the voice note you can play back,
+ * and the picture with a × to take it off.
+ *
+ * Above the words rather than below them, because it was chosen first and it
+ * is what the message is about. The same two things, drawn the same way, as on
+ * the support screen's own composer.
+ *
+ * The line under a picture with no words is the reason the send is held. It is
+ * a sentence on the card rather than a tooltip on a disabled button, because a
+ * disabled button that will not say why reads as broken.
+ */
+export declare function AskSupportAttachments({ support, }: {
+    support: ReturnType<typeof useAskSupport>;
+}): import("react").JSX.Element | null;

package/dist/dashboard/home/ask-support-attachments.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trash2 } from "lucide-react";
+import { TranscriptPlayer } from "@withpotter/ui-kit/transcript-player";
+function fileSize(bytes) {
+  if (!bytes) return "";
+  return bytes < 1024 * 1024 ? `${Math.max(1, Math.round(bytes / 1024))} KB` : `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function AskSupportAttachments({
+  support
+}) {
+  const { composer, segments, needsCaption } = support;
+  const { voice, image } = composer;
+  if (!voice && !image) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative px-3 pt-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      voice && /* @__PURE__ */ jsx("div", { className: "flex items-start gap-2 rounded-lg bg-[var(--bg-muted)] px-2 py-2", children: /* @__PURE__ */ jsx(
+        TranscriptPlayer,
+        {
+          url: voice.url,
+          seconds: voice.seconds,
+          peaks: voice.peaks,
+          segments: segments.length ? segments : void 0,
+          onDiscard: support.discardVoice,
+          className: "min-w-0 flex-1"
+        }
+      ) }),
+      image && /* THE VOICE NOTE'S FRAME, piece for piece: the same wrapper, the same
+         28px round control at the start (the thumbnail where the clip has
+         its play button), a line in the middle where the clip has its
+         waveform, then the size where the clip has its length, the same
+         "open" link and the same trash. A picture and a clip are both "the
+         thing this message is about", and they should read as one kind of
+         object, at one height. */
+      /* @__PURE__ */ jsx("div", { className: "flex items-start gap-2 rounded-lg bg-[var(--bg-muted)] px-2 py-2", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image.url,
+            alt: "",
+            className: "size-7 shrink-0 rounded-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-[var(--text-secondary)]", children: image.name }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-[var(--text-secondary)]", children: fileSize(image.size) }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: image.url,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "shrink-0 text-xs text-[var(--text-tertiary)] hover:text-ink hover:underline",
+            children: "open"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => composer.setImage(null),
+            "aria-label": "Remove picture",
+            className: "shrink-0 text-[var(--text-tertiary)] transition-colors hover:text-ink",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+          }
+        )
+      ] }) }) })
+    ] }),
+    needsCaption && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[var(--text-tertiary)]", children: "Add a few words about this picture to send it." })
+  ] });
+}
+export {
+  AskSupportAttachments
+};
+//# sourceMappingURL=ask-support-attachments.js.map

package/dist/dashboard/home/ask-support-attachments.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/dashboard/home/ask-support-attachments.tsx"],"sourcesContent":["'use client';\n\nimport { Trash2 } from 'lucide-react';\nimport { TranscriptPlayer } from '@withpotter/ui-kit/transcript-player';\nimport type { useAskSupport } from './use-ask-support';\n\n/** \"340 KB\", \"1.2 MB\": what a picture weighs, as the clip shows its length. */\nfunction fileSize(bytes?: number) {\n  if (!bytes) return '';\n  return bytes < 1024 * 1024\n    ? `${Math.max(1, Math.round(bytes / 1024))} KB`\n    : `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\n/**\n * What is on the card to be sent to support: the voice note you can play back,\n * and the picture with a × to take it off.\n *\n * Above the words rather than below them, because it was chosen first and it\n * is what the message is about. The same two things, drawn the same way, as on\n * the support screen's own composer.\n *\n * The line under a picture with no words is the reason the send is held. It is\n * a sentence on the card rather than a tooltip on a disabled button, because a\n * disabled button that will not say why reads as broken.\n */\nexport function AskSupportAttachments({\n  support,\n}: {\n  support: ReturnType<typeof useAskSupport>;\n}) {\n  const { composer, segments, needsCaption } = support;\n  const { voice, image } = composer;\n  if (!voice && !image) return null;\n\n  return (\n    <div className=\"relative px-3 pt-3\">\n      <div className=\"flex flex-col gap-2\">\n        {voice && (\n          <div className=\"flex items-start gap-2 rounded-lg bg-[var(--bg-muted)] px-2 py-2\">\n            <TranscriptPlayer\n              url={voice.url}\n              seconds={voice.seconds}\n              peaks={voice.peaks}\n              segments={segments.length ? segments : undefined}\n              onDiscard={support.discardVoice}\n              className=\"min-w-0 flex-1\"\n            />\n          </div>\n        )}\n        {image && (\n          /* THE VOICE NOTE'S FRAME, piece for piece: the same wrapper, the same\n             28px round control at the start (the thumbnail where the clip has\n             its play button), a line in the middle where the clip has its\n             waveform, then the size where the clip has its length, the same\n             \"open\" link and the same trash. A picture and a clip are both \"the\n             thing this message is about\", and they should read as one kind of\n             object, at one height. */\n          <div className=\"flex items-start gap-2 rounded-lg bg-[var(--bg-muted)] px-2 py-2\">\n            <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n              <div className=\"flex items-center gap-2\">\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  src={image.url}\n                  alt=\"\"\n                  className=\"size-7 shrink-0 rounded-full object-cover\"\n                />\n                <span className=\"min-w-0 flex-1 truncate text-sm text-[var(--text-secondary)]\">\n                  {image.name}\n                </span>\n                <span className=\"shrink-0 text-xs tabular-nums text-[var(--text-secondary)]\">\n                  {fileSize(image.size)}\n                </span>\n                <a\n                  href={image.url}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"shrink-0 text-xs text-[var(--text-tertiary)] hover:text-ink hover:underline\"\n                >\n                  open\n                </a>\n                <button\n                  type=\"button\"\n                  onClick={() => composer.setImage(null)}\n                  aria-label=\"Remove picture\"\n                  className=\"shrink-0 text-[var(--text-tertiary)] transition-colors hover:text-ink\"\n                >\n                  <Trash2 className=\"size-4\" />\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n      {needsCaption && (\n        <p className=\"mt-2 text-sm text-[var(--text-tertiary)]\">\n          Add a few words about this picture to send it.\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwCY,cAoBE,YApBF;AAtCZ,SAAS,cAAc;AACvB,SAAS,wBAAwB;AAIjC,SAAS,SAAS,OAAgB;AAChC,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,QAAQ,OAAO,OAClB,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,IAAI,CAAC,CAAC,QACxC,IAAI,SAAS,OAAO,OAAO,QAAQ,CAAC,CAAC;AAC3C;AAcO,SAAS,sBAAsB;AAAA,EACpC;AACF,GAEG;AACD,QAAM,EAAE,UAAU,UAAU,aAAa,IAAI;AAC7C,QAAM,EAAE,OAAO,MAAM,IAAI;AACzB,MAAI,CAAC,SAAS,CAAC,MAAO,QAAO;AAE7B,SACE,qBAAC,SAAI,WAAU,sBACb;AAAA,yBAAC,SAAI,WAAU,uBACZ;AAAA,eACC,oBAAC,SAAI,WAAU,oEACb;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX,SAAS,MAAM;AAAA,UACf,OAAO,MAAM;AAAA,UACb,UAAU,SAAS,SAAS,WAAW;AAAA,UACvC,WAAW,QAAQ;AAAA,UACnB,WAAU;AAAA;AAAA,MACZ,GACF;AAAA,MAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQC,oBAAC,SAAI,WAAU,oEACb,8BAAC,SAAI,WAAU,sCACb,+BAAC,SAAI,WAAU,2BAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,MAAM;AAAA,YACX,KAAI;AAAA,YACJ,WAAU;AAAA;AAAA,QACZ;AAAA,QACA,oBAAC,UAAK,WAAU,gEACb,gBAAM,MACT;AAAA,QACA,oBAAC,UAAK,WAAU,8DACb,mBAAS,MAAM,IAAI,GACtB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,MAAM;AAAA,YACZ,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,SAAS,SAAS,IAAI;AAAA,YACrC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,8BAAC,UAAO,WAAU,UAAS;AAAA;AAAA,QAC7B;AAAA,SACF,GACF,GACF;AAAA,OAEJ;AAAA,IACC,gBACC,oBAAC,OAAE,WAAU,4CAA2C,4DAExD;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/dashboard/home/ask-voice.d.ts

@@ -0,0 +1,12 @@
+import type { VoiceModeState } from '@withpotter/hooks/use-voice-mode';
+export declare function AskVoice({ state, transcript, spoken, spokenChars, endpointAt, peaksRef, canSpeak, }: {
+    state: VoiceModeState;
+    transcript: string;
+    spoken: string;
+    spokenChars: number;
+    endpointAt: number | null;
+    peaksRef: {
+        current: number[];
+    };
+    canSpeak: boolean;
+}): import("react").JSX.Element;