@ai-matrx/design-system 0.86.363 → 0.86.365

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.86.365
+
+- `SwipeDeck` gains `titleSize` (`"fit"` default | `"page"`: the card text at a page-title size in a 760px reading column, top-aligned; the stage still scrolls when the card is taller) and `moreOnCard` (default `true`; `false` drops the deck's own row of off-edge answers so the host draws every answer through `context.answer` — their shortcuts still answer). No consumer action required.
+
+## 0.86.364
+
+SOURCE CHANGED WITH NO RELEASE NOTE. This release shipped source changes that nobody described in an Unreleased entry,
+so they may include breaking API changes. Consumer action is UNKNOWN: read the diff before upgrading.
+Diff: `git diff 46cf8944d0 54207e9f2d -- apps/shared/design-system/src`
+
+Changed shipped source files (1):
+- `apps/shared/design-system/src/tokens.css`
+
 ## 0.86.363
 
 - **MatrxDataTable: a row whose text runs past one line keeps a one-line row's air.** A cell that stacks or wraps text (a page title over its URL) grew the row but kept the one-line padding — 0 px in the Mac look — so the lines sat flush on both row lines. The table now marks such rows (`data-matrx-row-lines="multi"`, from the text's own line boxes, `data-table/multiline-rows.ts`) and their cells get half of (row height − one line) above and below, top-aligned, from the new root variable `--matrx-table-row-height`. One-line rows are unchanged. Guard: `a-multi-line-row-keeps-a-one-line-rows-air.test.ts`. Consumer action: none.

package/dist/index.cjs

@@ -13314,6 +13314,20 @@ function RowLink({ href, children }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("a", { href, className, onClick: stop, children });
 }
+function RowAction({ onSelect, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    "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;
@@ -13327,7 +13341,7 @@ function PeekCardRows({ rows, numbered = false, limit }) {
         row.tone ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { "aria-hidden": true, className: cn("mt-[7px] size-1.5 shrink-0 rounded-full", TONE_FILL[row.tone]) }) : null,
         row.glyph ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(row.glyph, { className: cn("mt-0.5 size-3.5 shrink-0 text-muted-foreground", lead) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "type-secondary min-w-0 truncate text-foreground", title: row.title, children: row.href ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(RowLink, { href: row.href, children: row.text }) : row.text }),
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "type-secondary min-w-0 truncate text-foreground", title: row.title, children: row.onSelect ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(RowAction, { onSelect: row.onSelect, children: row.text }) : row.href ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(RowLink, { href: row.href, children: row.text }) : row.text }),
           row.detail ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "type-meta break-words text-muted-foreground", children: row.detail }) : null
         ] }),
         row.status ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
@@ -14059,6 +14073,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
           }))
@@ -14516,12 +14531,16 @@ 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]);
+  const value = React61.useMemo(() => host, [host.validateAddress, host.searchWeb]);
   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 markCache = /* @__PURE__ */ new Map();
 function markFor(platform) {
   let glyph = markCache.get(platform);
@@ -14589,9 +14608,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__ */ (0, import_jsx_runtime92.jsx)("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__ */ (0, import_jsx_runtime92.jsx)("span", { className: "shrink-0 text-muted-foreground no-underline", children: `\xB7 ${CONTACT_STATE_LABEL[state]}` }) : null;
@@ -14654,6 +14687,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 = {
@@ -14667,7 +14701,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)) } } : {},
@@ -14675,8 +14709,13 @@ function EmailValue({ email, owner, state = "ok", peek = true, about }) {
   };
   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 } : {} });
 }
+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",
@@ -14692,7 +14731,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)) } } : {},
@@ -14706,6 +14745,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] = React61.useState({ phase: "idle" });
   React61.useEffect(() => setValidation({ phase: "idle" }), [one]);
   const ok = state === "ok" && one.length > 0;
@@ -14741,7 +14781,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: () => (0, import_outbound2.openOutbound)(mapsHref(validation.phase === "done" && validation.result.formatted ? validation.result.formatted : one)) } } : {},
@@ -14762,7 +14802,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 {
@@ -14778,7 +14818,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: () => (0, import_outbound2.openOutbound)(parsed.href) } } : {},
@@ -14788,6 +14828,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__ */ (0, import_jsx_runtime92.jsx)(
     ValueShell,
@@ -14797,7 +14838,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 } : {}
     }
@@ -14805,6 +14846,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",
@@ -14817,7 +14859,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: () => (0, import_outbound2.openOutbound)(parsed.href) } } : {},