@ai-matrx/design-system 0.86.363 → 0.86.365

package/dist/index.d.cts

@@ -3432,6 +3432,8 @@ interface PeekRow {
     };
     /** The row's text is a link: a web address opens in a new tab, an app path moves within the app. */
     href?: string;
+    /** The row's text is an action the host runs in place (opening its own window). Wins over `href`. */
+    onSelect?: () => void;
     /** A short tag at the row's right edge ("Needs attention"), its reason as the tooltip. */
     status?: {
         text: string;
@@ -3830,13 +3832,16 @@ declare function compactCount(n: number): string;
  *   <SocialHandleValue value="https://www.linkedin.com/in/ana-ruiz" followers={1840} />
  *   <UrlValue url="solarbright.com" title="SolarBright — home solar" />
  *
- * Address validation is the host's (it calls a server): mount `ContactValuesHostProvider` once with
- * `validateAddress`. Without one, the peek simply has no Validate action.
+ * Address validation and web search are the host's: mount `ContactValuesHostProvider` once with
+ * `validateAddress` (a server check) and `searchWeb` (the host's own search, opened in place). Without
+ * them, the peek has no Validate action and "Search the web" is a plain outbound search link.
  */
 
 interface ContactValuesHost {
     /** Check a postal address against a real geocoder (the host's server route). */
     validateAddress?: (address: string) => Promise<AddressValidation>;
+    /** Run a web search in the host's own search (a window), instead of an outbound link. */
+    searchWeb?: (query: string) => void;
 }
 declare function ContactValuesHostProvider({ children, ...host }: ContactValuesHost & {
     children: React$1.ReactNode;

package/dist/index.d.ts

@@ -3432,6 +3432,8 @@ interface PeekRow {
     };
     /** The row's text is a link: a web address opens in a new tab, an app path moves within the app. */
     href?: string;
+    /** The row's text is an action the host runs in place (opening its own window). Wins over `href`. */
+    onSelect?: () => void;
     /** A short tag at the row's right edge ("Needs attention"), its reason as the tooltip. */
     status?: {
         text: string;
@@ -3830,13 +3832,16 @@ declare function compactCount(n: number): string;
  *   <SocialHandleValue value="https://www.linkedin.com/in/ana-ruiz" followers={1840} />
  *   <UrlValue url="solarbright.com" title="SolarBright — home solar" />
  *
- * Address validation is the host's (it calls a server): mount `ContactValuesHostProvider` once with
- * `validateAddress`. Without one, the peek simply has no Validate action.
+ * Address validation and web search are the host's: mount `ContactValuesHostProvider` once with
+ * `validateAddress` (a server check) and `searchWeb` (the host's own search, opened in place). Without
+ * them, the peek has no Validate action and "Search the web" is a plain outbound search link.
  */
 
 interface ContactValuesHost {
     /** Check a postal address against a real geocoder (the host's server route). */
     validateAddress?: (address: string) => Promise<AddressValidation>;
+    /** Run a web search in the host's own search (a window), instead of an outbound link. */
+    searchWeb?: (query: string) => void;
 }
 declare function ContactValuesHostProvider({ children, ...host }: ContactValuesHost & {
     children: React$1.ReactNode;

package/dist/index.js

@@ -3042,6 +3042,20 @@ function RowLink({ href, children }) {
   }
   return /* @__PURE__ */ jsx19("a", { href, className, onClick: stop, children });
 }
+function RowAction({ onSelect, children }) {
+  return /* @__PURE__ */ jsx19(
+    "button",
+    {
+      type: "button",
+      className: "max-w-full truncate text-left text-primary underline-offset-2 hover:underline",
+      onClick: (event) => {
+        event.stopPropagation();
+        onSelect();
+      },
+      children
+    }
+  );
+}
 function PeekCardRows({ rows, numbered = false, limit }) {
   const shown = limit && rows.length > limit ? rows.slice(0, limit) : rows;
   const rest = rows.length - shown.length;
@@ -3055,7 +3069,7 @@ function PeekCardRows({ rows, numbered = false, limit }) {
         row.tone ? /* @__PURE__ */ jsx19("span", { "aria-hidden": true, className: cn("mt-[7px] size-1.5 shrink-0 rounded-full", TONE_FILL[row.tone]) }) : null,
         row.glyph ? /* @__PURE__ */ jsx19(row.glyph, { className: cn("mt-0.5 size-3.5 shrink-0 text-muted-foreground", lead) }) : null,
         /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx19("span", { className: "type-secondary min-w-0 truncate text-foreground", title: row.title, children: row.href ? /* @__PURE__ */ jsx19(RowLink, { href: row.href, children: row.text }) : row.text }),
+          /* @__PURE__ */ jsx19("span", { className: "type-secondary min-w-0 truncate text-foreground", title: row.title, children: row.onSelect ? /* @__PURE__ */ jsx19(RowAction, { onSelect: row.onSelect, children: row.text }) : row.href ? /* @__PURE__ */ jsx19(RowLink, { href: row.href, children: row.text }) : row.text }),
           row.detail ? /* @__PURE__ */ jsx19("span", { className: "type-meta break-words text-muted-foreground", children: row.detail }) : null
         ] }),
         row.status ? /* @__PURE__ */ jsx19(
@@ -3787,6 +3801,7 @@ function Block({ block }) {
             glyph: row.glyph,
             tone: row.tone,
             href: row.entity ? void 0 : row.href,
+            onSelect: row.entity ? void 0 : row.onSelect,
             status: row.status,
             doors: row.doors
           }))
@@ -4238,12 +4253,16 @@ function compactCount(n) {
 import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var HostContext = React18.createContext({});
 function ContactValuesHostProvider({ children, ...host }) {
-  const value = React18.useMemo(() => host, [host.validateAddress]);
+  const value = React18.useMemo(() => host, [host.validateAddress, host.searchWeb]);
   return /* @__PURE__ */ jsx22(HostContext.Provider, { value, children });
 }
 function useContactValuesHost() {
   return React18.useContext(HostContext);
 }
+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 markCache = /* @__PURE__ */ new Map();
 function markFor(platform) {
   let glyph = markCache.get(platform);
@@ -4311,9 +4330,23 @@ function usePinnedHover() {
   }, [pinned]);
   return { open: hovered || held || pinned, setHovered, setHeld, setPinned, trigger };
 }
+function closingOnSelect(record, close) {
+  if (!record.body?.length) return record;
+  const body = record.body.map(
+    (block) => typeof block === "object" && block !== null && "rows" in block && Array.isArray(block.rows) ? { ...block, rows: block.rows.map((row) => row.onSelect ? { ...row, onSelect: () => {
+      close();
+      row.onSelect();
+    } } : row) } : block
+  );
+  return { ...record, body };
+}
 function ValueShell({ kind, glyph: Glyph, text, copy, state, record: own, peek, wrap, about }) {
-  const record = withAbout(own, about);
   const { open, setHovered, setHeld, setPinned, trigger } = usePinnedHover();
+  const record = closingOnSelect(withAbout(own, about), () => {
+    setPinned(false);
+    setHeld(false);
+    setHovered(false);
+  });
   const off = state !== "ok";
   const value = /* @__PURE__ */ jsx22("span", { className: cn("min-w-0", wrap ? "whitespace-pre-line break-words" : "truncate", off ? "text-muted-foreground line-through" : "text-foreground"), children: text });
   const status = off ? /* @__PURE__ */ jsx22("span", { className: "shrink-0 text-muted-foreground no-underline", children: `\xB7 ${CONTACT_STATE_LABEL[state]}` }) : null;
@@ -4376,6 +4409,7 @@ 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 = {
@@ -4389,7 +4423,7 @@ function EmailValue({ email, owner, state = "ok", peek = true, about }) {
       ...!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([
-        { text: "Search the web", glyph: SearchIcon, href: webSearchHref(`"${parsed.address}"`) }
+        searchRow(`"${parsed.address}"`)
       ])
     ],
     ...ok ? { primary: { label: "Send email", onSelect: () => window.location.assign(mailtoHref(parsed.address)) } } : {},
@@ -4397,8 +4431,13 @@ function EmailValue({ email, owner, state = "ok", peek = true, about }) {
   };
   return /* @__PURE__ */ jsx22(ValueShell, { kind: "email", glyph: MailGlyph, text: parsed.address, copy: parsed.address, state, record, peek, ...about !== void 0 ? { about } : {} });
 }
+function phoneSearchText(parsed) {
+  const na = parsed.e164?.match(/^\+1(\d{3})(\d{3})(\d{4})$/);
+  return na ? `${na[1]}-${na[2]}-${na[3]}` : parsed.display;
+}
 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",
@@ -4414,7 +4453,7 @@ function PhoneValue({ phone, owner, state = "ok", peek = true, defaultCallingCod
       ...parsed.extension ? [{ property: "Extension", value: parsed.extension }] : [],
       actions([
         ok && { text: "Send a text", glyph: MessageSquareGlyph, href: smsHref(parsed) },
-        { text: "Search the web", glyph: SearchIcon, href: webSearchHref(`"${parsed.display}"`) }
+        searchRow(phoneSearchText(parsed))
       ])
     ],
     ...ok ? { primary: { label: "Call", onSelect: () => window.location.assign(telHref(parsed)) } } : {},
@@ -4428,6 +4467,7 @@ 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] = React18.useState({ phase: "idle" });
   React18.useEffect(() => setValidation({ phase: "idle" }), [one]);
   const ok = state === "ok" && one.length > 0;
@@ -4463,7 +4503,7 @@ function AddressValue({ address, owner, state = "ok", peek = true, multiline = f
       ...validationBlock ? [validationBlock] : [],
       actions([
         ok && validateAddress && validation.phase !== "done" && { text: "Open in maps", glyph: MapPinGlyph, href: mapsHref(one) },
-        { text: "Search the web", glyph: SearchIcon, href: webSearchHref(one) }
+        searchRow(one)
       ])
     ],
     ...ok && validateAddress && validation.phase !== "done" ? { primary: { label: validation.phase === "checking" ? "Checking\u2026" : "Validate", onSelect: validate } } : ok ? { primary: { label: "Open in maps", onSelect: () => openOutbound2(mapsHref(validation.phase === "done" && validation.result.formatted ? validation.result.formatted : one)) } } : {},
@@ -4484,7 +4524,7 @@ function AddressValue({ address, owner, state = "ok", peek = true, multiline = f
     }
   );
 }
-function socialRecord(parsed, props, glyph) {
+function socialRecord(parsed, props, glyph, searchRow) {
   const state = props.state ?? "ok";
   const ok = state === "ok" && Boolean(parsed.href);
   return {
@@ -4500,7 +4540,7 @@ function socialRecord(parsed, props, glyph) {
       ...props.followers != null ? [{ fact: `${compactCount(props.followers)} followers`, glyph: UsersIcon }] : [],
       ...props.owner ? [{ property: "For", value: props.owner }] : [],
       actions([
-        { text: "Search the web", glyph: SearchIcon, href: webSearchHref(`${parsed.display} ${parsed.platformName}`) }
+        searchRow(`${parsed.display} ${parsed.platformName}`)
       ])
     ],
     ...ok ? { primary: { label: "Open profile", onSelect: () => openOutbound2(parsed.href) } } : {},
@@ -4510,6 +4550,7 @@ function socialRecord(parsed, props, glyph) {
 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__ */ jsx22(
     ValueShell,
@@ -4519,7 +4560,7 @@ function SocialHandleValue(props) {
       text: parsed.display,
       copy: parsed.handle ? parsed.display : parsed.href ?? parsed.display,
       state,
-      record: socialRecord(parsed, props, glyph),
+      record: socialRecord(parsed, props, glyph, searchRow),
       peek,
       ...props.about !== void 0 ? { about: props.about } : {}
     }
@@ -4527,6 +4568,7 @@ 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",
@@ -4539,7 +4581,7 @@ function UrlValue({ url, title, owner, state = "ok", peek = true, icon = true, a
       { property: "Domain", value: parsed.domain },
       ...owner && title ? [{ property: "For", value: owner }] : [],
       actions([
-        { text: "Search the web", glyph: SearchIcon, href: webSearchHref(parsed.domain) }
+        searchRow(parsed.domain)
       ])
     ],
     ...ok ? { primary: { label: "Open", onSelect: () => openOutbound2(parsed.href) } } : {},