@ai-matrx/design-system 0.86.366 → 0.86.367

package/dist/index.cjs

@@ -14531,15 +14531,49 @@ function compactCount(n) {
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var HostContext2 = React61.createContext({});
 function ContactValuesHostProvider({ children, ...host }) {
-  const value = React61.useMemo(() => host, [host.validateAddress, host.searchWeb]);
+  const value = React61.useMemo(() => host, [host.validateAddress, host.searchWeb, host.prefetchWebSearch]);
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(HostContext2.Provider, { value, children });
 }
 function useContactValuesHost() {
   return React61.useContext(HostContext2);
 }
-function useSearchRow() {
-  const { searchWeb } = useContactValuesHost();
-  return (query) => searchWeb ? { text: "Search the web", glyph: SearchIcon, onSelect: () => searchWeb(query) } : { text: "Search the web", glyph: SearchIcon, href: webSearchHref(query) };
+var NO_STATUS = { phase: "error", count: null };
+var NO_PREFETCH = {
+  get: () => NO_STATUS,
+  subscribe: () => () => {
+  }
+};
+function useSearchRow(query, open) {
+  const { searchWeb, prefetchWebSearch } = useContactValuesHost();
+  const [prefetch, setPrefetch] = React61.useState(null);
+  React61.useEffect(() => {
+    if (open && query && prefetchWebSearch) setPrefetch(prefetchWebSearch(query));
+  }, [open, query, prefetchWebSearch]);
+  const handle = prefetch ?? NO_PREFETCH;
+  const status = React61.useSyncExternalStore(handle.subscribe, handle.get, handle.get);
+  if (!query) return { row: null, answer: null };
+  if (!searchWeb) return { row: { text: "Search the web", glyph: SearchIcon, href: webSearchHref(query) }, answer: null };
+  const tag = !prefetch ? null : status.phase === "searching" ? { text: "Searching\u2026" } : status.answering ? { text: "Writing answer\u2026" } : status.phase === "ready" && status.count != null ? { text: `${status.count} results`, tone: "success" } : status.phase === "empty" ? { text: "No results" } : null;
+  const answerText = prefetch && status.answer ? status.answer : null;
+  return {
+    // With the answer on the card, the press is for everything else the web has.
+    row: { text: answerText ? "Full search results" : "Search the web", glyph: SearchIcon, onSelect: () => searchWeb(query), ...tag ? { status: tag } : {} },
+    answer: answerText ? { section: "From the web", glyph: SearchIcon, text: answerText, markdown: true, clamp: 6 } : null
+  };
+}
+function withSearchRow(record, { row, answer }) {
+  if (!row) return record;
+  const body = [...record.body ?? []];
+  let at = body.findIndex((b) => typeof b === "object" && b !== null && "section" in b && b.section === "Actions");
+  if (at < 0) {
+    body.push({ section: "Actions", rows: [row] });
+    at = body.length - 1;
+  } else {
+    const block = body[at];
+    body[at] = { ...block, rows: [...block.rows ?? [], row] };
+  }
+  if (answer) body.splice(at, 0, answer);
+  return { ...record, body };
 }
 var markCache = /* @__PURE__ */ new Map();
 function markFor(platform) {
@@ -14618,9 +14652,10 @@ function closingOnSelect(record, close) {
   );
   return { ...record, body };
 }
-function ValueShell({ kind, glyph: Glyph, text, copy, state, record: own, peek, wrap, about }) {
+function ValueShell({ kind, glyph: Glyph, text, copy, state, record: own, peek, wrap, about, webSearch }) {
   const { open, setHovered, setHeld, setPinned, trigger } = usePinnedHover();
-  const record = closingOnSelect(withAbout(own, about), () => {
+  const searchRow = useSearchRow(webSearch, open);
+  const record = closingOnSelect(withSearchRow(withAbout(own, about), searchRow), () => {
     setPinned(false);
     setHeld(false);
     setHovered(false);
@@ -14687,7 +14722,6 @@ var actions = (rows) => ({
 });
 function EmailValue({ email, owner, state = "ok", peek = true, about }) {
   const parsed = parseEmail(email);
-  const searchRow = useSearchRow();
   const ok = state === "ok" && parsed.valid;
   const site = parsed.domain ? parseUrl(parsed.domain) : null;
   const record = {
@@ -14700,14 +14734,12 @@ function EmailValue({ email, owner, state = "ok", peek = true, about }) {
     body: [
       ...!parsed.valid && state === "ok" ? [{ fact: "Not a complete email address", glyph: LinkOffGlyph, muted: true }] : [],
       ...parsed.domain ? [{ property: "Domain", value: parsed.domain, ...ok && site?.href ? { href: site.href } : {} }] : [],
-      actions([
-        searchRow(`"${parsed.address}"`)
-      ])
+      actions([])
     ],
     ...ok ? { primary: { label: "Send email", onSelect: () => window.location.assign(mailtoHref(parsed.address)) } } : {},
     copyData: { email: parsed.address, ...owner ? { owner } : {} }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ValueShell, { kind: "email", glyph: MailGlyph, text: parsed.address, copy: parsed.address, state, record, peek, ...about !== void 0 ? { about } : {} });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ValueShell, { kind: "email", glyph: MailGlyph, text: parsed.address, copy: parsed.address, state, record, peek, webSearch: `"${parsed.address}"`, ...about !== void 0 ? { about } : {} });
 }
 function phoneSearchText(parsed) {
   const na = parsed.e164?.match(/^\+1(\d{3})(\d{3})(\d{4})$/);
@@ -14715,7 +14747,6 @@ function phoneSearchText(parsed) {
 }
 function PhoneValue({ phone, owner, state = "ok", peek = true, defaultCallingCode = "1", about }) {
   const parsed = parsePhone(phone, defaultCallingCode);
-  const searchRow = useSearchRow();
   const ok = state === "ok" && parsed.valid;
   const record = {
     kind: "Phone number",
@@ -14730,14 +14761,13 @@ function PhoneValue({ phone, owner, state = "ok", peek = true, defaultCallingCod
       ...parsed.region ? [{ property: "Region", value: parsed.region }] : [],
       ...parsed.extension ? [{ property: "Extension", value: parsed.extension }] : [],
       actions([
-        ok && { text: "Send a text", glyph: MessageSquareGlyph, href: smsHref(parsed) },
-        searchRow(phoneSearchText(parsed))
+        ok && { text: "Send a text", glyph: MessageSquareGlyph, href: smsHref(parsed) }
       ])
     ],
     ...ok ? { primary: { label: "Call", onSelect: () => window.location.assign(telHref(parsed)) } } : {},
     copyData: { phone: parsed.e164 ?? parsed.raw, display: parsed.display, ...parsed.region ? { region: parsed.region } : {}, ...owner ? { owner } : {} }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ValueShell, { kind: "phone number", glyph: PhoneGlyph, text: parsed.display, copy: parsed.e164 ?? parsed.raw, state, record, peek, ...about !== void 0 ? { about } : {} });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ValueShell, { kind: "phone number", glyph: PhoneGlyph, text: parsed.display, copy: parsed.e164 ?? parsed.raw, state, record, peek, webSearch: phoneSearchText(parsed), ...about !== void 0 ? { about } : {} });
 }
 var VALIDATION_TONE = { verified: "success", partial: "warning", unknown: "danger" };
 var VALIDATION_TEXT = { verified: "Verified address", partial: "Partly matched", unknown: "No match found" };
@@ -14745,7 +14775,6 @@ function AddressValue({ address, owner, state = "ok", peek = true, multiline = f
   const one = addressText(address);
   const lines = typeof address === "string" ? address.split(/\n+/).map((l) => l.trim()).filter(Boolean) : address.map((l) => (l ?? "").trim()).filter(Boolean);
   const { validateAddress } = useContactValuesHost();
-  const searchRow = useSearchRow();
   const [validation, setValidation] = React61.useState({ phase: "idle" });
   React61.useEffect(() => setValidation({ phase: "idle" }), [one]);
   const ok = state === "ok" && one.length > 0;
@@ -14780,8 +14809,7 @@ function AddressValue({ address, owner, state = "ok", peek = true, multiline = f
       ...owner && lines.length > 1 ? [{ property: "For", value: owner }] : [],
       ...validationBlock ? [validationBlock] : [],
       actions([
-        ok && validateAddress && validation.phase !== "done" && { text: "Open in maps", glyph: MapPinGlyph, href: mapsHref(one) },
-        searchRow(one)
+        ok && validateAddress && validation.phase !== "done" && { text: "Open in maps", glyph: MapPinGlyph, href: mapsHref(one) }
       ])
     ],
     ...ok && validateAddress && validation.phase !== "done" ? { primary: { label: validation.phase === "checking" ? "Checking\u2026" : "Validate", onSelect: validate } } : ok ? { primary: { label: "Open in maps", onSelect: () => (0, import_outbound2.openOutbound)(mapsHref(validation.phase === "done" && validation.result.formatted ? validation.result.formatted : one)) } } : {},
@@ -14792,6 +14820,7 @@ function AddressValue({ address, owner, state = "ok", peek = true, multiline = f
     {
       kind: "address",
       glyph: MapPinGlyph,
+      webSearch: one,
       text: multiline ? lines.join("\n") : one,
       copy: lines.join("\n"),
       state,
@@ -14802,7 +14831,7 @@ function AddressValue({ address, owner, state = "ok", peek = true, multiline = f
     }
   );
 }
-function socialRecord(parsed, props, glyph, searchRow) {
+function socialRecord(parsed, props, glyph) {
   const state = props.state ?? "ok";
   const ok = state === "ok" && Boolean(parsed.href);
   return {
@@ -14817,9 +14846,7 @@ function socialRecord(parsed, props, glyph, searchRow) {
       ...parsed.handle ? [{ property: "Handle", value: parsed.display }] : [],
       ...props.followers != null ? [{ fact: `${compactCount(props.followers)} followers`, glyph: UsersIcon }] : [],
       ...props.owner ? [{ property: "For", value: props.owner }] : [],
-      actions([
-        searchRow(`${parsed.display} ${parsed.platformName}`)
-      ])
+      actions([])
     ],
     ...ok ? { primary: { label: "Open profile", onSelect: () => (0, import_outbound2.openOutbound)(parsed.href) } } : {},
     copyData: { platform: parsed.platformName, handle: parsed.display, ...parsed.href ? { url: parsed.href } : {}, ...props.followers != null ? { followers: props.followers } : {} }
@@ -14828,7 +14855,6 @@ function socialRecord(parsed, props, glyph, searchRow) {
 function SocialHandleValue(props) {
   const { value, platform, state = "ok", peek = true } = props;
   const parsed = parseSocial(value, platform);
-  const searchRow = useSearchRow();
   const glyph = parsed.platform === "other" ? AtSignGlyph : markFor(parsed.platform);
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     ValueShell,
@@ -14838,7 +14864,8 @@ function SocialHandleValue(props) {
       text: parsed.display,
       copy: parsed.handle ? parsed.display : parsed.href ?? parsed.display,
       state,
-      record: socialRecord(parsed, props, glyph, searchRow),
+      record: socialRecord(parsed, props, glyph),
+      webSearch: `${parsed.display} ${parsed.platformName}`,
       peek,
       ...props.about !== void 0 ? { about: props.about } : {}
     }
@@ -14846,7 +14873,6 @@ function SocialHandleValue(props) {
 }
 function UrlValue({ url, title, owner, state = "ok", peek = true, icon = true, about }) {
   const parsed = parseUrl(url);
-  const searchRow = useSearchRow();
   const ok = state === "ok" && Boolean(parsed.href);
   const record = {
     kind: "Web address",
@@ -14858,14 +14884,12 @@ function UrlValue({ url, title, owner, state = "ok", peek = true, icon = true, a
     body: [
       { property: "Domain", value: parsed.domain },
       ...owner && title ? [{ property: "For", value: owner }] : [],
-      actions([
-        searchRow(parsed.domain)
-      ])
+      actions([])
     ],
     ...ok ? { primary: { label: "Open", onSelect: () => (0, import_outbound2.openOutbound)(parsed.href) } } : {},
     copyData: { url: parsed.href ?? url, domain: parsed.domain, ...title ? { title } : {} }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ValueShell, { kind: "link", ...icon ? { glyph: GlobeIcon } : {}, text: parsed.display, copy: parsed.href ?? url, state, record, peek, ...about !== void 0 ? { about } : {} });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ValueShell, { kind: "link", ...icon ? { glyph: GlobeIcon } : {}, text: parsed.display, copy: parsed.href ?? url, state, record, peek, webSearch: parsed.domain, ...about !== void 0 ? { about } : {} });
 }
 function ContactValue({ type, value, platform, followers, title, icon, ...common }) {
   switch (type) {