@meetreeve/ui 0.13.0 → 0.14.0

package/dist/index.d.mts

@@ -632,7 +632,7 @@ declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeho
  * errors, and a return-from-OAuth refresh). Every label is derived from the
  * entry data the client returns — this file must never hardcode a specific
  * provider's name (an explicit acceptance criterion); a host app supplies
- * that entirely through `ConnectableEntry.name` / `.logo` / `.category`.
+ * that entirely through `ConnectableEntry.name` / `.logo`.
  *
  * Transport-injection precedent: `linkComponent` (DEV-4429/DEV-4391) —
  * inject the transport, keep behavior in the package. Here the "transport"
@@ -664,7 +664,7 @@ interface ConnectorRoleOption {
  */
 interface OrgConnectPolicy {
     permitted: boolean;
-    /** Human-readable reason shown on the disabled org option. */
+    /** Why org connect isn't permitted (server-authored). */
     reason?: string | null;
     /** Role options offered by manage-sharing's "role" grantee type. */
     role_options?: ConnectorRoleOption[];

package/dist/index.d.ts

@@ -632,7 +632,7 @@ declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeho
  * errors, and a return-from-OAuth refresh). Every label is derived from the
  * entry data the client returns — this file must never hardcode a specific
  * provider's name (an explicit acceptance criterion); a host app supplies
- * that entirely through `ConnectableEntry.name` / `.logo` / `.category`.
+ * that entirely through `ConnectableEntry.name` / `.logo`.
  *
  * Transport-injection precedent: `linkComponent` (DEV-4429/DEV-4391) —
  * inject the transport, keep behavior in the package. Here the "transport"
@@ -664,7 +664,7 @@ interface ConnectorRoleOption {
  */
 interface OrgConnectPolicy {
     permitted: boolean;
-    /** Human-readable reason shown on the disabled org option. */
+    /** Why org connect isn't permitted (server-authored). */
     reason?: string | null;
     /** Role options offered by manage-sharing's "role" grantee type. */
     role_options?: ConnectorRoleOption[];

package/dist/index.js

@@ -1471,7 +1471,6 @@ var DEFAULT_LOAD_ERROR = "Couldn't load connections. Please try again.";
 var DEFAULT_GRANTS_LOAD_ERROR = "Couldn't load sharing. Please try again.";
 var DEFAULT_GRANT_ERROR = "Couldn't share. Please try again.";
 var DEFAULT_REVOKE_ERROR = "Couldn't revoke access. Please try again.";
-var DEFAULT_ORG_DISABLED_REASON = "Org-wide connections aren't available to you.";
 var DEFAULT_CREDENTIAL_ERROR = "Couldn't save that credential. Please try again.";
 var DEFAULT_CREDENTIAL_TEST_ERROR = "Couldn't test that credential. Please try again.";
 var DEFAULT_RECONNECT_MESSAGE = "This connection needs to be reconnected to keep working.";
@@ -1490,11 +1489,6 @@ function capabilityLabel(capability) {
   if (capability === "write") return "Write only";
   return "Read & write";
 }
-function formatSince(since) {
-  const parsed = new Date(since);
-  if (Number.isNaN(parsed.getTime())) return since;
-  return parsed.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
-}
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
 }
@@ -1818,7 +1812,7 @@ function ConnectorTile({
   const guide = entry.guide ?? null;
   const canSetUp = !isConnected && (pasteSupported || guide !== null);
   const orgPermitted = entry.org_connect?.permitted === true;
-  const orgDisabledReason = entry.org_connect?.reason || DEFAULT_ORG_DISABLED_REASON;
+  const connectKind = orgPermitted ? kind : "personal";
   const attribution = ownerLabel(entry);
   const canDisconnect = isConnected && !shared;
   const canManageSharing = isConnected && entry.connection.owned_by_viewer === true && grantsSupported;
@@ -1846,19 +1840,21 @@ function ConnectorTile({
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
-              entry.category && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+              isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate", children: entry.category })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  "span",
+                  {
+                    "data-testid": `connector-connected-${entry.slug}`,
+                    className: "inline-flex items-center gap-1",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
+                      "Connected"
+                    ]
+                  }
+                )
               ] })
             ] }),
-            isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "p",
-              {
-                "data-testid": `connector-connected-since-${entry.slug}`,
-                className: "text-xs text-muted-foreground",
-                children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
-              }
-            ),
             isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "p",
               {
@@ -1895,7 +1891,7 @@ function ConnectorTile({
                 children: attribution
               }
             ),
-            !isConnected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            !isConnected && orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
                 "data-testid": `connector-kind-toggle-${entry.slug}`,
@@ -1910,6 +1906,7 @@ function ConnectorTile({
                       "data-testid": `connector-kind-personal-${entry.slug}`,
                       "aria-pressed": kind === "personal",
                       disabled: isConnecting,
+                      title: "Just for you",
                       onClick: () => setKind("personal"),
                       className: cn(
                         "rounded-full border px-2 py-0.5 text-[11px]",
@@ -1919,28 +1916,21 @@ function ConnectorTile({
                       children: "Personal"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       type: "button",
                       "data-testid": `connector-kind-org-${entry.slug}`,
                       "aria-pressed": kind === "org",
-                      disabled: isConnecting || !orgPermitted,
-                      title: orgPermitted ? void 0 : orgDisabledReason,
+                      disabled: isConnecting,
+                      title: "For your whole org",
                       onClick: () => setKind("org"),
                       className: cn(
                         "rounded-full border px-2 py-0.5 text-[11px]",
                         kind === "org" ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
                         "disabled:opacity-50"
                       ),
-                      children: [
-                        "Org",
-                        !orgPermitted && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "sr-only", children: [
-                          " (",
-                          orgDisabledReason,
-                          ")"
-                        ] })
-                      ]
+                      children: "Org"
                     }
                   )
                 ]
@@ -1960,7 +1950,11 @@ function ConnectorTile({
                 children: isConnecting ? "Reconnecting\u2026" : "Reconnect"
               }
             ),
-            canDisconnect && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            canDisconnect && // DEV-11580: the revoke reassurance lives in the title only —
+            // as an always-visible paragraph it wrapped to four lines
+            // beside every connected tile. Muted until hover so a
+            // destructive action isn't the loudest thing on the tile.
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 type: "button",
@@ -1968,27 +1962,10 @@ function ConnectorTile({
                 title: DISCONNECT_REVOKES_HINT,
                 onClick: () => onDisconnect(entry),
                 disabled: isDisconnecting || isConnecting,
-                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-50",
                 children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
               }
             ),
-            canDisconnect && // Outcome-eval finding (DEV-7873): with no width cap, this
-            // paragraph's one long sentence forced the WHOLE shrink-0
-            // button column to grow to its natural (unwrapped) width,
-            // squeezing the sibling `min-w-0 flex-1` text column down to
-            // one word per line at any realistic tile width. RTL's jsdom
-            // tests never caught it — jsdom doesn't lay out real flexbox
-            // sizing, so every textContent assertion still passed. A
-            // narrow max-width forces the hint to wrap within the same
-            // footprint as the button above it instead.
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "p",
-              {
-                "data-testid": `connector-disconnect-hint-${entry.slug}`,
-                className: "max-w-28 text-right text-[11px] text-muted-foreground",
-                children: DISCONNECT_REVOKES_HINT
-              }
-            ),
             canManageSharing && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
@@ -2006,7 +1983,7 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-connect-${entry.slug}`,
-                onClick: () => onConnect(entry, kind),
+                onClick: () => onConnect(entry, connectKind),
                 disabled: isConnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Connecting\u2026" : "Connect"
@@ -2039,7 +2016,7 @@ function ConnectorTile({
                 {
                   entry,
                   fields: credentialFields,
-                  kind,
+                  kind: connectKind,
                   verify: guide?.verify ?? null,
                   testSupported: credentialTestSupported,
                   onSubmitCredentials,

package/dist/index.mjs

@@ -1415,7 +1415,6 @@ var DEFAULT_LOAD_ERROR = "Couldn't load connections. Please try again.";
 var DEFAULT_GRANTS_LOAD_ERROR = "Couldn't load sharing. Please try again.";
 var DEFAULT_GRANT_ERROR = "Couldn't share. Please try again.";
 var DEFAULT_REVOKE_ERROR = "Couldn't revoke access. Please try again.";
-var DEFAULT_ORG_DISABLED_REASON = "Org-wide connections aren't available to you.";
 var DEFAULT_CREDENTIAL_ERROR = "Couldn't save that credential. Please try again.";
 var DEFAULT_CREDENTIAL_TEST_ERROR = "Couldn't test that credential. Please try again.";
 var DEFAULT_RECONNECT_MESSAGE = "This connection needs to be reconnected to keep working.";
@@ -1434,11 +1433,6 @@ function capabilityLabel(capability) {
   if (capability === "write") return "Write only";
   return "Read & write";
 }
-function formatSince(since) {
-  const parsed = new Date(since);
-  if (Number.isNaN(parsed.getTime())) return since;
-  return parsed.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
-}
 function errorMessageFrom(err, fallback) {
   return err instanceof Error && err.message ? err.message : fallback;
 }
@@ -1762,7 +1756,7 @@ function ConnectorTile({
   const guide = entry.guide ?? null;
   const canSetUp = !isConnected && (pasteSupported || guide !== null);
   const orgPermitted = entry.org_connect?.permitted === true;
-  const orgDisabledReason = entry.org_connect?.reason || DEFAULT_ORG_DISABLED_REASON;
+  const connectKind = orgPermitted ? kind : "personal";
   const attribution = ownerLabel(entry);
   const canDisconnect = isConnected && !shared;
   const canManageSharing = isConnected && entry.connection.owned_by_viewer === true && grantsSupported;
@@ -1790,19 +1784,21 @@ function ConnectorTile({
             ] }),
             /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
               /* @__PURE__ */ jsx8("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
-              entry.category && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+              isConnected && /* @__PURE__ */ jsxs7(Fragment4, { children: [
                 /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\xB7" }),
-                /* @__PURE__ */ jsx8("span", { className: "truncate", children: entry.category })
+                /* @__PURE__ */ jsxs7(
+                  "span",
+                  {
+                    "data-testid": `connector-connected-${entry.slug}`,
+                    className: "inline-flex items-center gap-1",
+                    children: [
+                      /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }),
+                      "Connected"
+                    ]
+                  }
+                )
               ] })
             ] }),
-            isConnected && /* @__PURE__ */ jsx8(
-              "p",
-              {
-                "data-testid": `connector-connected-since-${entry.slug}`,
-                className: "text-xs text-muted-foreground",
-                children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
-              }
-            ),
             isConnected && !shared && entry.connection.account_label && /* @__PURE__ */ jsxs7(
               "p",
               {
@@ -1839,7 +1835,7 @@ function ConnectorTile({
                 children: attribution
               }
             ),
-            !isConnected && /* @__PURE__ */ jsxs7(
+            !isConnected && orgPermitted && /* @__PURE__ */ jsxs7(
               "div",
               {
                 "data-testid": `connector-kind-toggle-${entry.slug}`,
@@ -1854,6 +1850,7 @@ function ConnectorTile({
                       "data-testid": `connector-kind-personal-${entry.slug}`,
                       "aria-pressed": kind === "personal",
                       disabled: isConnecting,
+                      title: "Just for you",
                       onClick: () => setKind("personal"),
                       className: cn(
                         "rounded-full border px-2 py-0.5 text-[11px]",
@@ -1863,28 +1860,21 @@ function ConnectorTile({
                       children: "Personal"
                     }
                   ),
-                  /* @__PURE__ */ jsxs7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
                       "data-testid": `connector-kind-org-${entry.slug}`,
                       "aria-pressed": kind === "org",
-                      disabled: isConnecting || !orgPermitted,
-                      title: orgPermitted ? void 0 : orgDisabledReason,
+                      disabled: isConnecting,
+                      title: "For your whole org",
                       onClick: () => setKind("org"),
                       className: cn(
                         "rounded-full border px-2 py-0.5 text-[11px]",
                         kind === "org" ? "border-primary bg-primary/10 font-medium" : "border-border text-muted-foreground",
                         "disabled:opacity-50"
                       ),
-                      children: [
-                        "Org",
-                        !orgPermitted && /* @__PURE__ */ jsxs7("span", { className: "sr-only", children: [
-                          " (",
-                          orgDisabledReason,
-                          ")"
-                        ] })
-                      ]
+                      children: "Org"
                     }
                   )
                 ]
@@ -1904,7 +1894,11 @@ function ConnectorTile({
                 children: isConnecting ? "Reconnecting\u2026" : "Reconnect"
               }
             ),
-            canDisconnect && /* @__PURE__ */ jsx8(
+            canDisconnect && // DEV-11580: the revoke reassurance lives in the title only —
+            // as an always-visible paragraph it wrapped to four lines
+            // beside every connected tile. Muted until hover so a
+            // destructive action isn't the loudest thing on the tile.
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -1912,27 +1906,10 @@ function ConnectorTile({
                 title: DISCONNECT_REVOKES_HINT,
                 onClick: () => onDisconnect(entry),
                 disabled: isDisconnecting || isConnecting,
-                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+                className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-50",
                 children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
               }
             ),
-            canDisconnect && // Outcome-eval finding (DEV-7873): with no width cap, this
-            // paragraph's one long sentence forced the WHOLE shrink-0
-            // button column to grow to its natural (unwrapped) width,
-            // squeezing the sibling `min-w-0 flex-1` text column down to
-            // one word per line at any realistic tile width. RTL's jsdom
-            // tests never caught it — jsdom doesn't lay out real flexbox
-            // sizing, so every textContent assertion still passed. A
-            // narrow max-width forces the hint to wrap within the same
-            // footprint as the button above it instead.
-            /* @__PURE__ */ jsx8(
-              "p",
-              {
-                "data-testid": `connector-disconnect-hint-${entry.slug}`,
-                className: "max-w-28 text-right text-[11px] text-muted-foreground",
-                children: DISCONNECT_REVOKES_HINT
-              }
-            ),
             canManageSharing && /* @__PURE__ */ jsx8(
               "button",
               {
@@ -1950,7 +1927,7 @@ function ConnectorTile({
               {
                 type: "button",
                 "data-testid": `connector-connect-${entry.slug}`,
-                onClick: () => onConnect(entry, kind),
+                onClick: () => onConnect(entry, connectKind),
                 disabled: isConnecting,
                 className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
                 children: isConnecting ? "Connecting\u2026" : "Connect"
@@ -1983,7 +1960,7 @@ function ConnectorTile({
                 {
                   entry,
                   fields: credentialFields,
-                  kind,
+                  kind: connectKind,
                   verify: guide?.verify ?? null,
                   testSupported: credentialTestSupported,
                   onSubmitCredentials,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetreeve/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, and AppSidebar's viewport-driven auto-collapse ladder.",
   "license": "UNLICENSED",
   "main": "./dist/index.js",