@ai-matrx/design-system 0.27.0 → 0.30.0

package/dist/index.d.cts

@@ -1475,6 +1475,22 @@ interface OrganizationPickerOrganization {
     /** Database-validated 2–3 uppercase letters. Optional — not every report carries it. */
     abbreviation?: string | null;
     isPersonal?: boolean;
+    /**
+     * THE ADDRESS, for when the NAME is not enough — its slug, or whatever else the
+     * host has that tells two of them apart.
+     *
+     * 🚨 WHY (crew D2, 2026-09-21). Two organizations called "Kessler Lab for Applied
+     * Microbial Ecology" and two called "Wraithmoor Regional Museum of Art & Craft" sat
+     * in one list, identical down to the abbreviation tile, and a person had no way of
+     * knowing which one they were about to work in. The list drew the name and nothing
+     * else, so there was nothing for it to draw.
+     *
+     * It is shown ONLY on the rows whose name another row in the list also carries —
+     * the way Slack shows a workspace's URL and Google shows the account's email, and
+     * only where it settles the question. A list of distinct names stays exactly as it
+     * was, because a second line under every row is noise a person learns to skip.
+     */
+    distinguisher?: string | null;
 }
 interface OrganizationPickerProps {
     organizations: readonly OrganizationPickerOrganization[];

package/dist/index.d.ts

@@ -1475,6 +1475,22 @@ interface OrganizationPickerOrganization {
     /** Database-validated 2–3 uppercase letters. Optional — not every report carries it. */
     abbreviation?: string | null;
     isPersonal?: boolean;
+    /**
+     * THE ADDRESS, for when the NAME is not enough — its slug, or whatever else the
+     * host has that tells two of them apart.
+     *
+     * 🚨 WHY (crew D2, 2026-09-21). Two organizations called "Kessler Lab for Applied
+     * Microbial Ecology" and two called "Wraithmoor Regional Museum of Art & Craft" sat
+     * in one list, identical down to the abbreviation tile, and a person had no way of
+     * knowing which one they were about to work in. The list drew the name and nothing
+     * else, so there was nothing for it to draw.
+     *
+     * It is shown ONLY on the rows whose name another row in the list also carries —
+     * the way Slack shows a workspace's URL and Google shows the account's email, and
+     * only where it settles the question. A list of distinct names stays exactly as it
+     * was, because a second line under every row is noise a person learns to skip.
+     */
+    distinguisher?: string | null;
 }
 interface OrganizationPickerProps {
     organizations: readonly OrganizationPickerOrganization[];

package/dist/index.js

@@ -3415,6 +3415,11 @@ function OrganizationPicker({
 }) {
   const active = organizations.find((o) => o.id === activeOrganizationId) ?? null;
   const isDefault = (id) => !!defaultOrganizationId && id === defaultOrganizationId;
+  const listed = defaultOrganizationId === null ? organizations : [
+    ...organizations.filter((o) => o.id === defaultOrganizationId),
+    ...organizations.filter((o) => o.id !== defaultOrganizationId)
+  ];
+  const sharesItsName = (org) => organizations.filter((other) => other.name.trim() === org.name.trim()).length > 1;
   return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-col", className), "data-slot": "organization-picker", children: [
     !hideHeading && /* @__PURE__ */ jsx38("p", { className: "px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Organization" }),
     loading ? /* @__PURE__ */ jsxs21("div", { className: "space-y-1 px-1 py-1", "aria-busy": "true", "aria-label": "Loading organizations", children: [
@@ -3426,7 +3431,7 @@ function OrganizationPicker({
         " ",
         /* @__PURE__ */ jsx38("span", { className: "font-medium text-foreground", children: active.name })
       ] }) : /* @__PURE__ */ jsx38("p", { className: "px-2 pb-1 text-[11px] text-destructive", "data-slot": "organization-picker-status", children: "No organization selected \u2014 pick one below." }),
-      /* @__PURE__ */ jsx38("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": "Organizations", children: organizations.map((org) => {
+      /* @__PURE__ */ jsx38("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": "Organizations", children: listed.map((org) => {
         const isActive = org.id === activeOrganizationId;
         return /* @__PURE__ */ jsx38("li", { role: "none", children: /* @__PURE__ */ jsxs21(
           "button",
@@ -3456,7 +3461,10 @@ function OrganizationPicker({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate", children: org.name }),
+              /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ jsx38("span", { className: "truncate", children: org.name }),
+                sharesItsName(org) && org.distinguisher ? /* @__PURE__ */ jsx38("span", { className: "truncate text-[10px] font-normal text-muted-foreground", children: org.distinguisher }) : null
+              ] }),
               org.isPersonal && /* @__PURE__ */ jsx38("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__ */ jsx38(
                 StarIcon,
@@ -3499,8 +3507,8 @@ function DefaultOrganizationSwitch({
       "data-slot": "organization-picker-default",
       children: [
         /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx38("p", { className: "text-xs font-medium text-foreground", children: "Set as my default" }),
-          /* @__PURE__ */ jsx38("p", { className: "truncate text-[11px] text-muted-foreground", children: disabled ? "Select an organization first" : checked ? `Next startup opens ${active.name}` : "Auto-select this at startup" })
+          /* @__PURE__ */ jsx38("p", { className: "text-xs font-medium text-foreground", children: "Keep it at the top" }),
+          /* @__PURE__ */ jsx38("p", { className: "truncate text-[11px] text-muted-foreground", children: disabled ? "Select an organization first" : checked ? `${active.name} is first in this list on every device` : "Star it so it is first in this list on every device" })
         ] }),
         /* @__PURE__ */ jsx38(
           Switch,
@@ -3508,7 +3516,7 @@ function DefaultOrganizationSwitch({
             checked,
             disabled,
             onCheckedChange: onChange,
-            "aria-label": "Set this organization as my default"
+            "aria-label": "Keep this organization at the top of the list"
           }
         )
       ]