@ai-matrx/design-system 0.49.59 → 0.50.0

package/CHANGELOG.md

@@ -12,6 +12,11 @@
 - **The drill answer's coverage and Pareto lines are labels, not sentences** (lane DRILL-LIVE-FIXES, interface text is layout, 2026-09-30). Coverage reads `$100.00 of $400.00 (25%)` (was "This slice is $100.00 of the $400.00 the whole window holds (25%)."), with "This slice's share of the whole window" in its tooltip; a Pareto line that never reaches its share reads `All 5 shown make 20% of Cost` (the groups past the limit are already the table's own "N more" row). Proof: `drill-usage-adoptions.test.tsx`, `drill-pareto-and-row-actions.test.tsx`. Consumer action: none.
 - **The drill chart's value axis says the number the Measure printed, never the raw value** (localhost walk of `/administration/usage`, 2026-09-30). When a Measure's format converts its unit (the usage explorer stores dollars and prints points at 20,000 a dollar) and the printed tick is too long for the axis, the tick used to compact the RAW value, so a 9,000,000-point day read `450` under "Cost (points) by day". `drillChartAxisNumber` now compacts the number the format printed (`9.0M`), keeping a one-character currency sign (`$1.2k`). Proof: `drill-chart-axis.test.ts`. Consumer action: none.
 
+## 0.50.0
+
+- **The organization picker: favorites, a highlighted active row, coloured marks** (owner, 2026-10-01). Every row carries its own star (`favoriteOrganizationIds` + `onToggleFavorite(id, favorite)`); favorites are drawn first, then the person's own, then the rest; the star is a sibling button and never selects. The "Keep it at the top" switch and the "Working in …" / "No organization selected" line are gone — the active row is the answer (tinted, bold, ringed, checked). New `OrganizationMark` (logo, or the 2–3 letter abbreviation on a colour tile seeded by `organizationColor(id)`) replaces `OrganizationAbbreviation`. Proof: `organization-picker.test.tsx`.
+  **Consumer action (breaking):** replace `defaultOrganizationId` / `onSetDefault` with `favoriteOrganizationIds` / `onToggleFavorite`; drop `hideStatus`; import `OrganizationMark` instead of `OrganizationAbbreviation`. Dashboard and Workflow Studio are adapted in the same commit (their single stored favorite maps onto the star).
+
 ## 0.49.59
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/index.cjs

@@ -172,7 +172,7 @@ __export(src_exports, {
   MOTION_SHEET: () => MOTION_SHEET,
   MOTION_SPIN: () => MOTION_SPIN,
   NATIVE_TITLE_OPT_OUT_ATTR: () => NATIVE_TITLE_OPT_OUT_ATTR,
-  OrganizationAbbreviation: () => OrganizationAbbreviation,
+  OrganizationMark: () => OrganizationMark,
   OrganizationPicker: () => OrganizationPicker,
   OverflowToolbar: () => OverflowToolbar,
   POPPER_OFFSET: () => POPPER_OFFSET,
@@ -260,6 +260,7 @@ __export(src_exports, {
   isInsideFloatingLayer: () => isInsideFloatingLayer,
   isModalLayerOpen: () => isModalLayerOpen,
   keepFloatingLayersInside: () => keepFloatingLayersInside,
+  organizationColor: () => organizationColor,
   registerModalLayer: () => registerModalLayer,
   scoreAccentBgClasses: () => scoreAccentBgClasses,
   scoreRingColorClasses: () => scoreRingColorClasses,
@@ -3925,7 +3926,7 @@ var SheetTitle = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/organization-picker.tsx
-var React31 = __toESM(require("react"), 1);
+var React30 = __toESM(require("react"), 1);
 
 // src/skeleton.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -3944,47 +3945,8 @@ function Skeleton({ className, animated = true, ...props }) {
   );
 }
 
-// src/switch.tsx
-var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
-var React30 = __toESM(require("react"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var SWITCH_SIZES = {
-  sm: {
-    root: "h-4 w-9 border-border data-[state=unchecked]:bg-input",
-    thumb: "h-4 w-4 border border-primary data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-  },
-  md: {
-    root: "h-5 w-9 border-transparent data-[state=unchecked]:bg-input",
-    thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-  }
-};
-var Switch = React30.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-  SwitchPrimitives.Root,
-  {
-    ref,
-    "data-slot": "switch",
-    className: cn(
-      "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
-      SWITCH_SIZES[size].root,
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      SwitchPrimitives.Thumb,
-      {
-        "data-slot": "switch-thumb",
-        className: cn(
-          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
-          SWITCH_SIZES[size].thumb
-        )
-      }
-    )
-  }
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
 // src/organization-picker.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var SEARCH_APPEARS_ABOVE = 8;
 function matchesQuery(org, query) {
   const q = query.trim().toLowerCase();
@@ -3993,45 +3955,71 @@ function matchesQuery(org, query) {
   const abbreviation = org.abbreviation?.trim().toLowerCase();
   return !!abbreviation && abbreviation.includes(q);
 }
-function OrganizationAbbreviation({
-  abbreviation,
+var ORGANIZATION_HUES = [217, 262, 330, 12, 32, 152, 189, 290];
+function organizationColor(seed) {
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = hash * 31 + seed.charCodeAt(index) >>> 0;
+  }
+  const hue = ORGANIZATION_HUES[hash % ORGANIZATION_HUES.length];
+  return { background: `hsl(${hue} 62% 46%)`, color: "#fff" };
+}
+function OrganizationMark({
+  id,
   name,
+  abbreviation,
+  logoUrl,
+  size = 20,
   className
 }) {
-  const mark = abbreviation && abbreviation.trim() || name.trim().slice(0, 1) || "?";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  const box = { width: size, height: size };
+  if (logoUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "span",
+      {
+        style: box,
+        className: cn("relative inline-flex shrink-0 overflow-hidden rounded-md bg-muted", className),
+        "data-slot": "organization-mark",
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: logoUrl, alt: name, className: "h-full w-full object-cover" })
+      }
+    );
+  }
+  const letters = (abbreviation && abbreviation.trim() || name.trim().slice(0, 1) || "?").slice(0, 3).toUpperCase();
+  const fontSize = Math.round(size * (letters.length >= 3 ? 0.36 : 0.44));
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "span",
     {
+      style: { ...box, ...organizationColor(id || name), fontSize },
       className: cn(
-        "inline-flex shrink-0 items-center justify-center font-bold uppercase tracking-wide",
+        "inline-flex shrink-0 items-center justify-center rounded-md font-bold leading-none tracking-tight",
         className
       ),
-      "aria-label": `Organization abbreviation ${mark}`,
-      title: mark,
-      children: mark
+      "aria-label": `Organization abbreviation ${letters}`,
+      title: letters,
+      "data-slot": "organization-mark",
+      children: letters
     }
   );
 }
 function OrganizationPicker({
   organizations,
   activeOrganizationId,
-  defaultOrganizationId = null,
+  favoriteOrganizationIds = [],
   loading = false,
   loadFailed = false,
   onSelect,
-  onSetDefault,
+  onToggleFavorite,
   hideHeading = false,
   itemClassName,
-  hideStatus = false,
   foldedLabel = "More",
   className
 }) {
-  const [query, setQuery] = React31.useState("");
-  const [showFixtures, setShowFixtures] = React31.useState(false);
-  const [showFolded, setShowFolded] = React31.useState(false);
-  const active = organizations.find((o) => o.id === activeOrganizationId) ?? null;
-  const isDefault = (id) => !!defaultOrganizationId && id === defaultOrganizationId;
-  const rank = (org) => org.id === defaultOrganizationId ? 0 : org.isOwn ? 1 : 2;
+  const [query, setQuery] = React30.useState("");
+  const [showFixtures, setShowFixtures] = React30.useState(false);
+  const [showFolded, setShowFolded] = React30.useState(false);
+  const favorites = new Set(favoriteOrganizationIds);
+  const isFavorite = (id) => favorites.has(id);
+  const rank = (org) => isFavorite(org.id) ? 0 : org.isOwn ? 1 : 2;
   const ordered = [...organizations].sort((a, b) => rank(a) - rank(b));
   const matching = ordered.filter((org) => matchesQuery(org, query));
   const listed = matching.filter((org) => !org.isTestFixture && !org.folded);
@@ -4042,66 +4030,83 @@ function OrganizationPicker({
   const sharesItsName = (org) => organizations.filter((other) => other.name.trim() === org.name.trim()).length > 1;
   const renderRow = (org) => {
     const isActive = org.id === activeOrganizationId;
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": isActive,
-        "aria-pressed": isActive,
-        onClick: (event) => {
-          event.stopPropagation();
-          onSelect(org);
-        },
-        className: cn(
-          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent",
-          isActive && "bg-primary/10 font-medium text-primary",
-          itemClassName
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            OrganizationAbbreviation,
-            {
-              abbreviation: org.abbreviation,
-              name: org.name,
-              className: cn(
-                "h-5 min-w-8 rounded border border-border bg-muted px-1 text-[9px]",
-                isActive ? "text-primary" : "text-muted-foreground"
-              )
-            }
+    const favorite = isFavorite(org.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("li", { role: "none", className: "group/org relative flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": isActive,
+          "aria-pressed": isActive,
+          onClick: (event) => {
+            event.stopPropagation();
+            onSelect(org);
+          },
+          className: cn(
+            "flex w-full min-w-0 items-center gap-2.5 rounded-md py-1.5 pl-2 pr-8 text-left text-sm text-foreground transition-colors hover:bg-accent",
+            isActive && "bg-primary/10 font-semibold text-primary ring-1 ring-inset ring-primary/30 hover:bg-primary/15",
+            itemClassName
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "truncate", children: org.name }),
-            sharesItsName(org) && org.distinguisher ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "truncate text-[10px] font-normal text-muted-foreground", children: org.distinguisher }) : null
-          ] }),
-          org.detail ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            "span",
-            {
-              className: "shrink-0 text-xs font-normal text-muted-foreground",
-              "data-slot": "organization-picker-detail",
-              children: org.detail
-            }
-          ) : null,
-          isDefault(org.id) && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "data-active": isActive ? "" : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(OrganizationMark, { id: org.id, name: org.name, abbreviation: org.abbreviation, size: 20 }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "truncate", children: org.name }),
+              sharesItsName(org) && org.distinguisher ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "truncate text-[10px] font-normal text-muted-foreground", children: org.distinguisher }) : null
+            ] }),
+            org.detail ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "span",
+              {
+                className: "shrink-0 text-xs font-normal text-muted-foreground",
+                "data-slot": "organization-picker-detail",
+                children: org.detail
+              }
+            ) : null,
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LucideCheckIcon, { className: "h-[15px] w-[15px] shrink-0 text-primary" })
+          ]
+        }
+      ),
+      onToggleFavorite ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": favorite,
+          "aria-label": favorite ? `Remove ${org.name} from favorites` : `Add ${org.name} to favorites`,
+          title: favorite ? "Remove from favorites" : "Add to favorites",
+          onClick: (event) => {
+            event.stopPropagation();
+            onToggleFavorite(org.id, !favorite);
+          },
+          className: cn(
+            "absolute right-1 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100",
+            favorite ? "opacity-100" : "opacity-0 group-hover/org:opacity-100"
+          ),
+          "data-slot": "organization-picker-favorite",
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             StarIcon,
             {
-              className: "h-[13px] w-[13px] shrink-0 fill-warning text-warning",
-              "aria-hidden": false,
-              "aria-label": "Default organization",
-              role: "img"
+              className: cn("h-[14px] w-[14px]", favorite && "fill-warning text-warning")
             }
-          ),
-          isActive && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LucideCheckIcon, { className: "h-[15px] w-[15px] shrink-0 text-primary" })
-        ]
-      }
-    ) }, org.id);
+          )
+        }
+      ) : favorite ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        StarIcon,
+        {
+          className: "absolute right-2 h-[13px] w-[13px] fill-warning text-warning",
+          "aria-hidden": false,
+          "aria-label": "Favorite",
+          role: "img"
+        }
+      ) : null
+    ] }, org.id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("flex flex-col", className), "data-slot": "organization-picker", children: [
-    !hideHeading && /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsxs)("div", { className: "space-y-1 px-1 py-1", "aria-busy": "true", "aria-label": "Loading organizations", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Skeleton, { className: "h-7 rounded-md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Skeleton, { className: "h-7 rounded-md" })
-    ] }) : loadFailed ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex flex-col", className), "data-slot": "organization-picker", children: [
+    !hideHeading && /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsxs)("div", { className: "space-y-1 px-1 py-1", "aria-busy": "true", "aria-label": "Loading organizations", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-7 rounded-md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-7 rounded-md" })
+    ] }) : loadFailed ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       ErrorBox,
       {
         className: "px-2 py-2 text-xs text-destructive",
@@ -4109,13 +4114,8 @@ function OrganizationPicker({
         origin: "design-system/OrganizationPicker",
         children: "Could not load organizations."
       }
-    ) : organizations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "px-2 py-2 text-xs text-muted-foreground", children: "Your account is not a member of any organization. Ask an administrator to add you to one." }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-      hideStatus ? null : active ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "px-2 pb-1 text-[11px] text-muted-foreground", "data-slot": "organization-picker-status", children: [
-        "Working in",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "font-medium text-foreground", children: active.name })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "px-2 pb-1 text-[11px] text-muted-foreground", "data-slot": "organization-picker-status", children: "No organization selected \u2014 pick one below." }),
-      searchable && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "px-2 pb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    ) : organizations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "px-2 py-2 text-xs text-muted-foreground", children: "Your account is not a member of any organization. Ask an administrator to add you to one." }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+      searchable && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-2 pb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Input,
         {
           type: "search",
@@ -4129,7 +4129,7 @@ function OrganizationPicker({
           "data-slot": "organization-picker-search"
         }
       ) }),
-      listed.length === 0 && folded.length === 0 && fixtures.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      listed.length === 0 && folded.length === 0 && fixtures.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "p",
         {
           className: "px-2 py-2 text-xs text-muted-foreground",
@@ -4151,16 +4151,16 @@ function OrganizationPicker({
            clicking. So: count the matches, say where they are, and carry
            the click that reveals them — the same shape as the honest
            empty-filter twin one line down. (TAILS-3) */
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "p",
           {
             className: "px-2 py-2 text-xs text-muted-foreground",
             "data-slot": "organization-picker-only-fixtures",
-            children: query.trim() ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            children: query.trim() ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
               fixtures.length === 1 ? `1 match for \u201C${query.trim()}\u201D is in your test organizations` : `All ${fixtures.length} matches for \u201C${query.trim()}\u201D are in your test organizations`,
-              showFixtures ? ", listed below." : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+              showFixtures ? ", listed below." : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
                 " \u2014 ",
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   "button",
                   {
                     type: "button",
@@ -4178,8 +4178,8 @@ function OrganizationPicker({
             ] }) : `Every organization you belong to is a test organization \u2014 all ${fixtures.length} are below.`
           }
         )
-      ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": "Organizations", children: listed.map(renderRow) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": "Organizations", children: listed.map(renderRow) }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         ArchivedDisclosure,
         {
           count: folded.length,
@@ -4187,10 +4187,10 @@ function OrganizationPicker({
           onOpenChange: setShowFolded,
           label: foldedLabel,
           className: "mt-0.5",
-          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": foldedLabel, children: folded.map(renderRow) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": foldedLabel, children: folded.map(renderRow) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         ArchivedDisclosure,
         {
           count: fixtures.length,
@@ -4198,7 +4198,7 @@ function OrganizationPicker({
           onOpenChange: setShowFixtures,
           label: "Test organizations",
           className: "mt-0.5",
-          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "ul",
             {
               className: "max-h-72 overflow-y-auto",
@@ -4208,50 +4208,49 @@ function OrganizationPicker({
             }
           )
         }
-      ),
-      onSetDefault && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "my-1 border-t border-border" }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          DefaultOrganizationSwitch,
-          {
-            active,
-            checked: !!active && isDefault(active.id),
-            onChange: (on) => onSetDefault(on && active ? active.id : null)
-          }
-        )
-      ] })
+      )
     ] })
   ] });
 }
-function DefaultOrganizationSwitch({
-  active,
-  checked,
-  onChange
-}) {
-  const disabled = !active;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-    "div",
-    {
-      className: "flex items-center justify-between gap-3 rounded-md px-2 py-1.5",
-      "data-slot": "organization-picker-default",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-xs font-medium text-foreground", children: "Keep it at the top" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("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__ */ (0, import_jsx_runtime40.jsx)(
-          Switch,
-          {
-            checked,
-            disabled,
-            onCheckedChange: onChange,
-            "aria-label": "Keep this organization at the top of the list"
-          }
+
+// src/switch.tsx
+var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
+var React31 = __toESM(require("react"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var SWITCH_SIZES = {
+  sm: {
+    root: "h-4 w-9 border-border data-[state=unchecked]:bg-input",
+    thumb: "h-4 w-4 border border-primary data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+  },
+  md: {
+    root: "h-5 w-9 border-transparent data-[state=unchecked]:bg-input",
+    thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+  }
+};
+var Switch = React31.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  SwitchPrimitives.Root,
+  {
+    ref,
+    "data-slot": "switch",
+    className: cn(
+      "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
+      SWITCH_SIZES[size].root,
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      SwitchPrimitives.Thumb,
+      {
+        "data-slot": "switch-thumb",
+        className: cn(
+          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+          SWITCH_SIZES[size].thumb
         )
-      ]
-    }
-  );
-}
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/tabbed-bottom-sheet.tsx
 var import_react4 = require("react");