@streamoid/ui 0.6.16 → 0.6.18

package/dist/docs/ScWorkspaceSettingsMobile.md

@@ -0,0 +1,265 @@
+---
+component: ScWorkspaceSettingsMobile
+package: "@streamoid/ui"
+category: mobile
+status: stable
+renders: div
+tags: [mobile, workspace, settings, team, owner, members, card, role]
+related: [ScWorkspaceSwitchMobile, ScWorkspaceSwitchMobileV2, ScWorkspaceCard, ScTableListMobile]
+do_not_confuse_with: [ScWorkspaceSwitchMobile, ScWorkspaceSwitchMobileV2, ScWorkspaceCard, ScWorkspaceSwitchCard, ScProfileSettingsComp]
+---
+
+# ScWorkspaceSettingsMobile
+
+**The mobile workspace card with two info rows.** A fixed 326px rounded card: a 48px
+initials tile beside the workspace name with an always-blue role badge on the right, a
+divider, then **two** icon+text rows — the owner email and the team count. Structurally
+`ScWorkspaceSwitchMobile` plus the second row.
+
+## TL;DR for agents
+
+- **Reach for it when:** a mobile workspace-settings screen needs a workspace summary
+  that also shows how many people are in it.
+- **Don't reach for it when:** the card's job is *switching* workspaces
+  (→ `ScWorkspaceSwitchMobileV2`, which is what CXO actually ships), or you're on desktop
+  (→ `ScWorkspaceCard` / `ScWorkspaceSwitchCard`).
+- **Four things that will bite you:**
+  1. **It is `width: 326px`, fixed.** Not `100%`.
+  2. **`ownerIcon` and `teamIcon` have no defaults**, but both 48px icon gutters render
+     regardless — omit them and you get two blocks of empty space.
+  3. **The role badge is always info-blue**, whatever `role` says.
+  4. **`currentWs` defaults to `true`**, so in a list every card looks active.
+
+---
+
+## 1. How to use it
+
+### Import
+
+```tsx
+import { ScWorkspaceSettingsMobile } from "@streamoid/ui";
+import "@streamoid/ui/dist/index.css"; // once, at your app root
+```
+
+### Minimal usage
+
+```tsx
+import { SiconUser, SiconUsers } from "@streamoid/icons";
+
+<ScWorkspaceSettingsMobile
+  storeName={ws.name}
+  initials={ws.initials}
+  role={ws.role === "admin" ? "Admin" : "Member"}
+  ownerId={ws.ownerEmail}
+  ownerIcon={<SiconUser size={24} />}
+  teamCount={`${ws.memberCount} Users`}
+  teamIcon={<SiconUsers size={24} />}
+  currentWs={ws._id === currentId}
+/>
+```
+
+### Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `storeName` | `string` | `"Stores"` | ⚠️ Demo default. The workspace name — note `storeName`, not `wsName`. 16px/500. It has `overflow: hidden; text-overflow: ellipsis` but **no `white-space: nowrap`**, so a long name wraps instead of ellipsising — see Gotcha 10. |
+| `initials` | `string` | `"WS"` | ⚠️ Demo default. Rendered into a hand-rolled 48px `--radius-xl` tile. No name-derived fallback, no image support. |
+| `role` | `string` | `"Admin"` | ⚠️ Demo default. Free text in a **fixed 80px always-blue** badge. Colour never varies. |
+| `ownerId` | `string` | `"rohan@streamoid.com"` | ⚠️ Demo default — a real-looking Streamoid address. First info row. |
+| `teamCount` | `string` | `"12 Users"` | ⚠️ Demo default. Second info row. You append the word "Users" — the card does no pluralisation. |
+| `currentWs` | `boolean` | `true` | ⚠️ Defaults to **true**. Picks the `current` vs `other` skin. |
+| `ownerIcon` | `JSX.Element` | – | **Slot** for the first info row's icon. No default; the gutter renders anyway. |
+| `teamIcon` | `JSX.Element` | – | **Slot** for the second info row's icon. Same caveat. |
+| `className` | `string` | – | Appended after internal classes. Unguarded concat — see Gotcha 5. |
+| `onClick` | `(e: React.MouseEvent) => void` | – | Attached to the root. No `role`/`tabIndex`/`cursor` come with it. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | – | Spread onto the root `div`. |
+
+### What each `currentWs` value renders
+
+| `currentWs` | Class | Background | Border |
+|---|---|---|---|
+| `true` | `variant-current` | `--alias-surface-canvas` | 0.5px `--alias-border-subtle` |
+| `false` | `variant-other` | `--alias-surface-base` | 0.5px `--alias-border-subtle` |
+
+Both variants keep the border (unlike `ScWorkspaceSwitchMobile`, whose current variant
+has none), so the two skins differ only by background.
+
+### Recipes
+
+```tsx
+// Make it fluid (the card is 326px by default)
+<ScWorkspaceSettingsMobile storeName={ws.name} className="w-full" />
+
+// Both icon slots — the inner wrapper is 24×24, so size 20–24
+import { SiconUser, SiconUsers } from "@streamoid/icons";
+<ScWorkspaceSettingsMobile
+  storeName={ws.name}
+  initials={ws.initials}
+  role="Admin"
+  ownerId={ws.ownerEmail}
+  ownerIcon={<SiconUser size={24} />}
+  teamCount={`${n} ${n === 1 ? "User" : "Users"}`}   // pluralise yourself
+  teamIcon={<SiconUsers size={24} />}
+  currentWs={false}
+  className="w-full"
+/>
+
+// Tappable — add the semantics yourself
+<ScWorkspaceSettingsMobile
+  storeName={ws.name}
+  onClick={() => openManageSheet(ws)}
+  role="Admin"
+  tabIndex={0}
+  className="w-full cursor-pointer"
+/>
+```
+
+---
+
+## 2. Where to use it
+
+Its intended home is the mobile **workspace settings** screen: the summary card at the
+top of "manage this workspace", or one card per workspace in a settings list where the
+member count matters.
+
+CXO's mobile settings screen currently renders `ScWorkspaceSwitchMobileV2` instead
+(`cxo-dashboard/src/app/components/mobile-settings-content.tsx:313`), which shows
+`role · plan · owner` but **not** a team count — so this card's distinguishing feature
+is exactly what that screen is missing.
+
+It composes nothing from the DS: the initials tile and the role badge are hand-rolled,
+and both icons are slots you fill.
+
+---
+
+## 3. When to use it
+
+### Use it when
+
+- The screen is workspace **settings** (not switching) on mobile.
+- The team size is a fact worth showing on the card.
+- You have icons to put in both info rows.
+
+### Don't use it — reach for this instead
+
+| Situation | Use instead |
+|---|---|
+| Switching workspaces on mobile | `ScWorkspaceSwitchMobileV2` (fluid, images, `plan`, `type` triad) |
+| The V1 switch card with one owner row | `ScWorkspaceSwitchMobile` — but it's `status: legacy` |
+| Desktop workspace card / switcher | `ScWorkspaceCard` / `ScWorkspaceSwitchCard` / `StreamoidWorkspaceSwitcher` |
+| A whole profile-settings scaffold | `ScProfileSettingsComp` |
+| Listing the workspace's members individually | `ScTableListMobile`, one per member |
+| A role chip whose colour varies | `ScRoleMobile` (two skins) or `ScBadges` (any colour) |
+| A workspace avatar on its own, with image support | `ScDp` (`variant="workspace"`) |
+
+### Don't confuse with
+
+| You may actually want | Not this |
+|---|---|
+| `ScWorkspaceSwitchMobile` — **the same card minus the team row**. Identical props (`storeName`, `initials`, `role`, `ownerId`, `currentWs`, `ownerIcon`) with only `teamCount`/`teamIcon` added here, and a slightly different skin pair | The two are trivially interchangeable at a glance; decide by screen: settings → this, switching → V2 |
+| `ScWorkspaceSwitchMobileV2` — the current mobile workspace row; `wsName`, `type`, `imageUrl`, `plan`, fluid width, composes `ScDp` | Different prop names for the same data |
+| `ScWorkspaceCard` — the desktop workspace tile | Desktop metrics |
+| `ScProfileSettingsComp` — a whole settings screen scaffold, for a person | Not a workspace card |
+
+`ScWorkspaceSettingsMobile` / `ScWorkspaceSwitchMobile` / `ScWorkspaceSwitchMobileV2` are
+three near-namesakes for the same object. Ship V2 unless you specifically need the team
+count (this one) or the V1 look.
+
+---
+
+## 4. Why to use it
+
+- **The only mobile workspace card that shows team size**, with the icon gutters already
+  aligned so both info rows line up under the name.
+- **Truncation is handled** on `ownerId` and `teamCount`
+  (`flex: 1 0 0; min-width: 0` + `overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap`), so long emails and big counts never break the card.
+  `storeName` gets the same flex treatment but is missing `white-space: nowrap`, so it
+  wraps rather than ellipsising (Gotcha 10).
+- **Icon slots keep app-specific iconography out of the DS** — you pass whichever
+  `Sicon*` your product uses for "owner" and "team".
+- **Fixed 48px gutters** mean the two rows are optically aligned regardless of icon
+  width, which is what hand-rolled versions get wrong.
+
+---
+
+## Gotchas
+
+**1. Fixed `width: 326px`.** The root is not fluid; it will not fill a mobile sheet.
+
+```tsx
+// WRONG — 326px card inside a full-width settings screen
+<ScWorkspaceSettingsMobile storeName={ws.name} />
+
+// RIGHT
+<ScWorkspaceSettingsMobile storeName={ws.name} className="w-full" />
+```
+
+**2. Both icon slots are empty by default, but their gutters are not.**
+`.iconContainer` is `width: 48px; flex-shrink: 0` and renders unconditionally; the icon
+inside is `{ownerIcon && …}` / `{teamIcon && …}`. Omit them and you get two 48px voids.
+
+```tsx
+// WRONG — two rows of text indented by 48px of nothing
+<ScWorkspaceSettingsMobile ownerId={email} teamCount="12 Users" />
+
+// RIGHT
+<ScWorkspaceSettingsMobile
+  ownerId={email}
+  ownerIcon={<SiconUser size={24} />}
+  teamCount="12 Users"
+  teamIcon={<SiconUsers size={24} />}
+/>
+```
+
+**3. The role badge is always info-blue.** `.roleBadge` hardcodes
+`--alias-fill-info-soft` + `--alias-border-info` + info text, fixed 80px wide. `"Member"`
+looks like `"Admin"`.
+
+**4. `currentWs` defaults to `true`.** In a list, forgetting it makes every card look
+like the active workspace.
+
+**5. `className` is concatenated unguarded.** Omit it and the root carries a literal
+`undefined` class.
+
+**6. `.initialsText` has a wrong fallback.** It uses
+`var(--font-size-font-size-md, 14px)` where `md` is 16px everywhere else, so the initials
+change size depending on whether the tokens stylesheet is loaded.
+
+**7. `teamCount` is a string you build.** No number formatting, no pluralisation — pass
+`"1 User"` vs `"12 Users"` yourself.
+
+**8. `onClick` brings no semantics.** Plain `div`, no `cursor: pointer` in the CSS. Add
+`role="button"`, `tabIndex={0}` and `onKeyDown` yourself. Note the `role` prop here is
+this component's *badge text*, so if you need the ARIA role, wrap the card.
+
+**9. `backdrop-filter: blur(4px)`** on the root creates a containing block, so any
+`position: fixed` descendant anchors to this card rather than the viewport.
+
+**10. `storeName` wraps, it does not ellipsise.** `.storeName` sets `overflow: hidden`
+and `text-overflow: ellipsis` but omits `white-space: nowrap`, so a long workspace name
+breaks onto a second line (and then gets clipped) instead of showing "…". The two info
+rows (`ownerId`, `teamCount`) do set `nowrap` and truncate correctly. Cap the name
+yourself if it can be long.
+
+---
+
+## In the wild
+
+_No host render site found — used by the agent runtime / composed internally._
+
+To be precise: it is exported from `@streamoid/ui` but no host app renders it, and it is
+not agent-runtime — it is currently unused. Where it belongs is CXO's mobile settings
+screen, which today renders `ScWorkspaceSwitchMobileV2` for the same slot
+(`cxo-dashboard/src/app/components/mobile-settings-content.tsx:313`) and therefore shows
+`role · plan · owner` without a member count.
+
+---
+
+## Related
+
+- `ScWorkspaceSwitchMobile` — the same card minus the team row (`status: legacy`).
+- `ScWorkspaceSwitchMobileV2` — the current mobile workspace row; what CXO ships.
+- `ScWorkspaceCard` / `ScWorkspaceSwitchCard` / `StreamoidWorkspaceSwitcher` — desktop.
+- `ScTableListMobile` — a member row, if you're listing the team rather than counting it.
+- `ScDp` — the avatar primitive V2 uses; this card hand-rolls a 48px initials tile.

package/dist/docs/ScWorkspaceSwitchCard.md

@@ -0,0 +1,314 @@
+---
+component: ScWorkspaceSwitchCard
+also_exports: [NscWorkspaceSwitch]
+package: "@streamoid/ui"
+category: cards
+status: stable
+renders: div
+tags: [workspace, switch-workspace, tenant, current-workspace, role, plan, owner, hover-actions, leave-workspace]
+related: [ScWorkspaceCard, ScWorkspaceSwitchMobileV2, ScDp, StreamoidWorkspaceSwitcher, ScProfilePopup]
+do_not_confuse_with: [ScWorkspaceCard, ScWorkspace, StreamoidWorkspaceSwitcher, ScWorkspaceSwitchMobile, ScWorkspaceSwitchMobileV2]
+used_by: [cxo, photogenix, catalogix, artifax]
+---
+
+# ScWorkspaceSwitchCard
+
+**One row in the "switch workspace" list.** A 90px workspace tile, the workspace name,
+and a Role / Plan / Workspace-Owner detail strip — plus up to two **hover-only**
+trailing actions: "Switch Workspace" (other workspaces), a settings icon (admins), or
+a red leave button (non-admins). All four host apps render it; the modal around it is
+hand-rolled in each.
+
+## TL;DR for agents
+
+- **Reach for it when:** you are building a workspace list where each row shows role,
+  plan and owner and can be switched into, configured or left.
+- **Don't reach for it when:** you need the card with a user count and a persistent
+  CTA (→ `ScWorkspaceCard`), a mobile row (→ `ScWorkspaceSwitchMobileV2`), or a bare
+  workspace identity line (→ `ScProfilePopup`'s workspace block).
+- **Five things that will bite you:**
+  1. **Every action is hover-gated.** No hover → no buttons. Touch devices and
+     keyboard users can never reach them. That is why the `*Mobile` twins exist.
+  2. `role` is a **free string** and drives everything: `role.toLowerCase() === "admin"`
+     picks amber text **and** the settings button; anything else (including
+     `"owner"`) gets info-blue and the **red leave** button.
+  3. Its props do **not** extend `HTMLAttributes` — no `onClick`, no `style`, no
+     `data-*`, no `aria-*`. Only the 12 listed props.
+  4. ⚠️ `ownerId` defaults to a real person's address, **`"rohan@streamoid.com"`**,
+     and `wsName` to `"Workspace name is kepler"`.
+  5. `cardOther` sets `cursor: pointer` on the whole card, but the card has **no
+     click handler** — only the buttons do. The cursor lies.
+
+---
+
+## 1. How to use it
+
+### Import
+
+```tsx
+import { ScWorkspaceSwitchCard } from "@streamoid/ui";
+import "@streamoid/ui/dist/index.css"; // once, at your app root
+```
+
+### Minimal usage
+
+```tsx
+<ScWorkspaceSwitchCard
+  wsName={ws.name}
+  role={ws.role}
+  plan={ws.plan}
+  ownerId={ws.ownerEmail}
+  type={ws.isCurrent ? "currentWS" : "otherWS"}
+  onSwitch={() => void switchTo(ws)}
+/>
+```
+
+### Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `wsName` | `string` | `"Workspace name is kepler"` | ⚠️ Real default. Also the source of derived initials. Single line + ellipsis. |
+| `role` | `string` | `"Admin"` | ⚠️ Real default, and a **free string**. Compared case-insensitively to `"admin"`; displayed Title-Cased (`charAt(0).toUpperCase() + rest.toLowerCase()`). |
+| `plan` | `string` | `"Free"` | ⚠️ Real default. Plain secondary text. |
+| `ownerId` | `string` | `"rohan@streamoid.com"` | ⚠️ Real default — a real address. Always pass the actual owner. |
+| `initials` | `string` | derived from `wsName` | First letters of the first two words, uppercased; `"WS"` if that yields nothing. |
+| `imageUrl` | `string` | – | When set, the tile renders the image (`ScDp type="image"`); otherwise initials. |
+| `type` | `"currentWS"` \| `"otherWS"` | `"currentWS"` | ⚠️ Defaults to **current**. Drives surface, border, cursor and whether "Switch Workspace" can appear. |
+| `hover` | `boolean` | – | Controlled override of the internal hover state. `undefined` → the card tracks its own mouse enter/leave. Pass `true` to force the actions visible (Figma parity / tests). |
+| `className` | `string` | – | Appended after the internal classes. |
+| `onSwitch` | `() => void` | – | "Switch Workspace" button. **`otherWS` + hover only.** |
+| `onSettings` | `() => void` | – | Settings icon button. **admin + hover only** (both `type`s). |
+| `onLeave` | `() => void` | – | Red leave button. **non-admin + hover only** (both `type`s). |
+
+Nothing else is accepted — `ScWorkspaceSwitchCardProps` is a plain interface, not an
+`HTMLAttributes` extension.
+
+### What renders in each state
+
+| Region | `currentWS` | `otherWS` |
+|---|---|---|
+| Surface | `surface-raised` + `border-default`, `cursor: default` | `surface-base` + `border-subtle`, `cursor: pointer`; hover → `surface-basesubtle` |
+| Tile | `ScDp` forced to **90 × 90**, `radius-xl`, bg `neutralactive` | same, bg `neutralselected` |
+| Details | Role · Plan · Workspace Owner, split by two `ScVDivider`s | identical |
+| "Switch Workspace" | **never** | hover only |
+| Settings icon | hover **and** `role` is admin | hover **and** `role` is admin |
+| Leave (red) | hover **and** `role` is not admin | hover **and** `role` is not admin |
+
+Role colour: admin → `text-and-icons-warning` (amber); everything else →
+`text-and-icons-info` (blue).
+
+### Recipes
+
+```tsx
+// Current + other sections (the shape all four hosts use)
+<>
+  <ScWorkspaceSwitchCard
+    wsName={current.name}
+    initials={current.initials}
+    imageUrl={current.imageUrl}
+    role={current.role}
+    plan={current.plan}
+    ownerId={current.ownerEmail}
+    type="currentWS"
+    onSettings={() => openSettings(current)}
+    onLeave={() => confirmLeave(current)}
+  />
+  {others.map((ws) => (
+    <ScWorkspaceSwitchCard
+      key={ws.id}
+      wsName={ws.name}
+      initials={ws.initials}
+      imageUrl={ws.imageUrl}
+      role={ws.role}
+      plan={ws.plan}
+      ownerId={ws.ownerEmail}
+      type="otherWS"
+      onSwitch={() => void switchTo(ws)}
+      onSettings={() => openSettings(ws)}
+      onLeave={() => confirmLeave(ws)}
+    />
+  ))}
+</>
+
+// Force the actions visible — screenshots, Figma parity, or a touch fallback
+<ScWorkspaceSwitchCard wsName={ws.name} type="otherWS" hover onSwitch={switchTo} />
+
+// Make the whole row keyboard-reachable (the card gives you no semantics)
+<div role="button" tabIndex={0}
+     onClick={() => void switchTo(ws)}
+     onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); void switchTo(ws); } }}>
+  <ScWorkspaceSwitchCard wsName={ws.name} type="otherWS" onSwitch={() => void switchTo(ws)} />
+</div>
+```
+
+---
+
+## 2. Where to use it
+
+Stacked in a scrolling list inside a **host-owned** modal or drawer. Every app builds
+that shell itself:
+
+| App | Shell |
+|---|---|
+| CXO | `src/app/components/app-workspace-switcher.tsx` (+ `app-organization-switcher.tsx` for orgs) |
+| Catalogix | `app/containers/LeftMenu/WorkspaceListing/index.jsx` |
+| Photogenix | `dashboard/client/src/components/layout/Sidebar.tsx` |
+| Artifax | `packages/shared/src/components/DashboardSidebar.tsx` |
+
+The usual trigger is `ScProfilePopup`'s `onSwitchWorkspace`. `StreamoidWorkspaceSwitcher`
+is the DS's own attempt at that modal, but no app uses it (see its README).
+
+---
+
+## 3. When to use it
+
+### Use it when
+
+- The row's job is **role + plan + owner at a glance**, with switch/settings/leave as
+  secondary hover affordances.
+- You are rendering a current-vs-others list and want the two surfaces to differ
+  without writing the token pairs.
+
+### Don't use it — reach for this instead
+
+| Situation | Use instead |
+|---|---|
+| Workspace card with a **user count** and an always-visible CTA button | `ScWorkspaceCard` |
+| Mobile workspace row (tap, no hover) | `ScWorkspaceSwitchMobileV2` (or `ScWorkspaceSwitchMobile`, `ScWorkspaceSettingsMobile`) |
+| A one-line workspace identity (logo + name + role) | `ScProfilePopup`'s workspace block (`ScWorkspace` itself is not exported) |
+| The whole switch **modal**, prebuilt | `StreamoidWorkspaceSwitcher` — but read its Tailwind caveat first |
+| A generic pick-one option card | `ScDefaultCard` |
+| A store row (Catalogix) | `ScStoreCard` / `ScCatalogixStoreTableList` |
+| Just the workspace tile | `ScDp variant="workspace"` / `ScIntialProfileCover` |
+
+### Don't confuse with
+
+| You may actually want | Not this |
+|---|---|
+| `ScWorkspaceCard` — `workspaceName`/`role`/`userCount`/`ownerEmail`/`buttonText`, persistent button, no plan, no hover gating | `ScWorkspaceSwitchCard` has `plan`, hover actions, and no user count |
+| `ScWorkspace` — the bare two-line identity row (**not exported**) | this is the full row with actions |
+| `StreamoidWorkspaceSwitcher` — the modal that would contain rows like this | this is one row |
+| `ScWorkspaceSwitchMobileV2` — mobile twin; has a third `type="display"` and a single `onClick` | this is desktop and hover-driven |
+| `NscWorkspaceSwitch` | **`@deprecated` alias of this same component.** Import `ScWorkspaceSwitchCard`. |
+
+### Prop-name trap across the family
+
+| Component | Name prop | Role prop | Owner prop |
+|---|---|---|---|
+| `ScWorkspaceSwitchCard` | `wsName` | `role` | `ownerId` |
+| `ScWorkspaceCard` | `workspaceName` | `role` | `ownerEmail` |
+| `ScWorkspaceSwitchMobile` | `storeName` | `role` | `ownerId` |
+| `ScWorkspaceSwitchMobileV2` | `wsName` | `role` | `ownerId` |
+| `ScWorkspace` (internal) | `workspaceName` | `userRole` | — |
+
+---
+
+## 4. Why to use it
+
+- **Current vs other is a token pair, not a colour.** `surface-raised`/`border-default`
+  against `surface-base`/`border-subtle`, with `surface-basesubtle` on hover — three
+  greys that stay distinguishable in light mode, where a hand-picked grey collapses to
+  white.
+- **The action matrix is already correct.** Switch only for other workspaces, settings
+  only for admins, leave only for non-admins, none of them on the current card's
+  switch slot. Getting that wrong ships a "leave" button to the owner of the workspace.
+- **`min-width: 0` + `flex: 1 0 0` in the right three places** so long names and owner
+  emails ellipsise instead of pushing the buttons off the card — the most common bug
+  when this row is hand-rolled.
+- **Initials derivation for free** (first letters of two words, `"WS"` fallback), so
+  you can pass `wsName` alone.
+- **Consistent across four apps** — the same row in CXO, Catalogix, Photogenix and
+  Artifax, differing only in the modal around it.
+
+---
+
+## Gotchas
+
+**1. All actions are hover-only, and they are plain `<div onClick>`s.** No `role`, no
+`tabIndex`, no keyboard activation. A keyboard-only or touch user cannot switch, open
+settings or leave from this card. Provide your own path (a wrapping `role="button"`,
+or `hover` forced on for touch), or use the `*Mobile` twins.
+
+**2. `role` is a free string with real consequences.**
+
+```tsx
+// WRONG — "Owner" is not "admin": info-blue text AND the red leave button
+<ScWorkspaceSwitchCard wsName={ws.name} role="Owner" onLeave={leave} />
+
+// RIGHT — normalise, then relabel elsewhere if you need to
+<ScWorkspaceSwitchCard wsName={ws.name} role={isAdmin ? "Admin" : "Member"} onSettings={settings} />
+```
+
+Comparison is `role?.toLowerCase() === "admin"`, so `"ADMIN"` and `"admin"` are fine;
+display is force-Title-Cased, so `"co-admin"` renders as `"Co-admin"` **and** is
+treated as a non-admin.
+
+**3. Personal data in the defaults.** `ownerId` defaults to
+`"rohan@streamoid.com"`, `plan` to `"Free"` and `wsName` to
+`"Workspace name is kepler"`. This has already shipped as a real bug: Artifax's
+`packages/shared/src/components/DashboardSidebar.tsx:1032` carries a comment about every row falling back to
+`"Free" + "rohan@streamoid.com"` because the store's `/workspaces` payload has no
+plan. Always pass real values, or `""`.
+
+**4. No `onClick` / `style` / `data-*` on the card.** The interface lists 12 props and
+does not extend `HTMLAttributes`. To make the whole row clickable, wrap it (and note
+the inner buttons already `stopPropagation`, so a wrapper handler won't double-fire).
+
+**5. The `otherWS` cursor implies a click that does not exist.** `.cardOther` sets
+`cursor: pointer` on the whole card, but only the "Switch Workspace" button is wired.
+Either wrap the card in your own click handler or accept the mismatch.
+
+**6. `ScDp`'s `size` is overridden.** `.dp` forces `width/height: 90px !important`, so
+the nested tile is always 90px regardless of anything you would pass. The tile's
+`border-radius` is also overridden inline to `radius-xl`.
+
+**7. `hover` is a controlled override, not an event.** Passing `hover={false}` pins
+the actions **hidden** forever, including on real mouse-over. Pass `undefined` (omit
+it) for normal behaviour.
+
+**8. Both hover actions can appear at once.** An admin viewing another workspace gets
+"Switch Workspace" **and** the settings icon; a member gets "Switch Workspace" **and**
+the red leave button. Budget the horizontal space — the details strip shrinks to make
+room.
+
+**9. Leave is available on the current workspace too.** `isHover && !isAdmin` is not
+gated on `type`, so a member sees the red button on the card they are currently in.
+Confirm destructively (all four hosts open a confirm modal from `onLeave`).
+
+**10. `NscWorkspaceSwitch` is a deprecated alias** of this export, kept for old
+imports. Don't use it in new code.
+
+---
+
+## In the wild
+
+```tsx
+// cxo-dashboard  src/app/components/app-workspace-switcher.tsx:408
+<ScWorkspaceSwitchCard
+  wsName={currentWorkspace.name}
+  initials={currentWorkspace.initials}
+  imageUrl={currentWorkspace.imageUrl}
+  role={currentWorkspace.role}
+  plan={currentWorkspace.plan}
+  ownerId={currentWorkspace.ownerEmail}
+  type="currentWS"
+  onSwitch={() => void handleSwitch(currentWorkspace)}
+  onSettings={() => { setEditingWs(currentWorkspace); setUpdateModalOpen(true); }}
+  onLeave={() => { setLeavingWs(currentWorkspace); setConfirmLeaveOpen(true); }}
+/>
+```
+
+Also: `catalogix/dashboard app/containers/LeftMenu/WorkspaceListing/index.jsx:371`,
+`photogenix_v2 dashboard/client/src/components/layout/Sidebar.tsx:1129`, and
+`artifax packages/shared/src/components/DashboardSidebar.tsx:1134`.
+
+---
+
+## Related
+
+- `ScWorkspaceCard` — user count + persistent CTA instead of hover actions.
+- `ScWorkspaceSwitchMobileV2` — the mobile twin (tap, no hover, extra `"display"` type).
+- `StreamoidWorkspaceSwitcher` — the DS's prebuilt modal; unused by hosts, needs Tailwind.
+- `ScProfilePopup` — its `onSwitchWorkspace` is what opens the list.
+- `ScDp` — the tile it composes (forced to 90px here).
+- `ScVDivider` — the two separators in the details strip.