@ai-matrx/design-system 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.28.0 — 2026-09-21
+
+**Two organizations with the same name were indistinguishable in the picker.**
+
+Real-data crews made duplicates while working — two called "Kessler Lab for
+Applied Microbial Ecology", two called "Wraithmoor Regional Museum of Art &
+Craft" — and reported that a person had no way of knowing which one they were
+about to work in: identical name, identical abbreviation tile, nothing else on
+the row. The list drew the name and nothing else, so there was nothing for it
+to draw.
+
+`OrganizationPickerOrganization.distinguisher` is the address — the host's slug,
+or whatever else tells two of them apart — and the picker draws it ONLY on rows
+whose name another row in the same list also carries. That is what Slack does
+with a workspace URL and Google with an account's email, and only where it
+settles the question: a list of distinct names is unchanged, because a second
+line under every row is noise a person learns to skip.
+
+**Consumer action:** pass `distinguisher` from whatever your host has (in
+matrx-frontend it is the organization's slug). Omit it and nothing changes.
+
 ## 0.27.0 — 2026-09-20
 
 **Released so the app can have what landed on main after 0.26.0 and had no

package/dist/index.cjs

@@ -3674,6 +3674,7 @@ function OrganizationPicker({
 }) {
   const active = organizations.find((o) => o.id === activeOrganizationId) ?? null;
   const isDefault = (id) => !!defaultOrganizationId && id === defaultOrganizationId;
+  const sharesItsName = (org) => organizations.filter((other) => other.name.trim() === org.name.trim()).length > 1;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("flex flex-col", className), "data-slot": "organization-picker", children: [
     !hideHeading && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Organization" }),
     loading ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "space-y-1 px-1 py-1", "aria-busy": "true", "aria-label": "Loading organizations", children: [
@@ -3715,7 +3716,10 @@ function OrganizationPicker({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 truncate", children: org.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate", children: org.name }),
+                sharesItsName(org) && org.distinguisher ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate text-[10px] font-normal text-muted-foreground", children: org.distinguisher }) : null
+              ] }),
               org.isPersonal && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Personal" }),
               isDefault(org.id) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 StarIcon,