@streamoid/ui 0.6.17 → 0.6.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/README.md +35 -18
  2. package/dist/docs/AGENTS.md +325 -0
  3. package/dist/docs/CreditWarningBanner.md +305 -0
  4. package/dist/docs/InvoiceHistoryMobile.md +222 -0
  5. package/dist/docs/ScAccess.md +259 -0
  6. package/dist/docs/ScAppCard.md +244 -0
  7. package/dist/docs/ScAppCardForCopilot.md +230 -0
  8. package/dist/docs/ScAppCardV3.md +273 -0
  9. package/dist/docs/ScAppField.md +308 -0
  10. package/dist/docs/ScAppListingCard.md +271 -0
  11. package/dist/docs/ScAppSwitchPanel.md +286 -0
  12. package/dist/docs/ScAppcardLogos.md +226 -0
  13. package/dist/docs/ScArtifaxInvite.md +262 -0
  14. package/dist/docs/ScArtifaxSidebar.md +330 -0
  15. package/dist/docs/ScAskAgentButton.md +307 -0
  16. package/dist/docs/ScBadges.md +261 -0
  17. package/dist/docs/ScBeacon.md +244 -0
  18. package/dist/docs/ScBillingHistoryHeader.md +210 -0
  19. package/dist/docs/ScBillingHistoryTableList.md +243 -0
  20. package/dist/docs/ScBillingLogsTableHeader.md +212 -0
  21. package/dist/docs/ScBillingLogsTableList.md +251 -0
  22. package/dist/docs/ScBriefCard.md +255 -0
  23. package/dist/docs/ScButton.md +251 -0
  24. package/dist/docs/ScCalendar.md +268 -0
  25. package/dist/docs/ScCalendarDateComps.md +264 -0
  26. package/dist/docs/ScCatalogixInvite.md +345 -0
  27. package/dist/docs/ScCatalogixSidebar.md +337 -0
  28. package/dist/docs/ScCatalogixStoreHeader.md +246 -0
  29. package/dist/docs/ScCatalogixStoreTableList.md +316 -0
  30. package/dist/docs/ScCheckField.md +233 -0
  31. package/dist/docs/ScCheckbox.md +272 -0
  32. package/dist/docs/ScCounter.md +235 -0
  33. package/dist/docs/ScCreditsUsageCard.md +247 -0
  34. package/dist/docs/ScCreditsUsageCardMobile.md +224 -0
  35. package/dist/docs/ScDefaultCard.md +269 -0
  36. package/dist/docs/ScDp.md +245 -0
  37. package/dist/docs/ScDrawer.md +318 -0
  38. package/dist/docs/ScFieldButton.md +255 -0
  39. package/dist/docs/ScFileField.md +268 -0
  40. package/dist/docs/ScGoogleSignIn.md +250 -0
  41. package/dist/docs/ScGuide.md +278 -0
  42. package/dist/docs/ScHDivider.md +210 -0
  43. package/dist/docs/ScHeader.md +222 -0
  44. package/dist/docs/ScImageField.md +253 -0
  45. package/dist/docs/ScInChatList.md +277 -0
  46. package/dist/docs/ScInChatMessage.md +205 -0
  47. package/dist/docs/ScInfoPopup.md +248 -0
  48. package/dist/docs/ScIntialProfileCover.md +233 -0
  49. package/dist/docs/ScInvoiceHistoryMobile.md +187 -0
  50. package/dist/docs/ScLogoUnit.md +232 -0
  51. package/dist/docs/ScMappingCard.md +241 -0
  52. package/dist/docs/ScMediaApproval.md +301 -0
  53. package/dist/docs/ScMediaSelect.md +310 -0
  54. package/dist/docs/ScMenuOptions.md +308 -0
  55. package/dist/docs/ScMobileBottomAction.md +252 -0
  56. package/dist/docs/ScMobileTopNav.md +279 -0
  57. package/dist/docs/ScModal.md +291 -0
  58. package/dist/docs/ScOnlyField.md +302 -0
  59. package/dist/docs/ScOnlyIcon.md +213 -0
  60. package/dist/docs/ScPagination.md +284 -0
  61. package/dist/docs/ScPairtext.md +287 -0
  62. package/dist/docs/ScPendingAction.md +238 -0
  63. package/dist/docs/ScPhtogenixInvite.md +275 -0
  64. package/dist/docs/ScPlanCard.md +302 -0
  65. package/dist/docs/ScPlanComparison.md +264 -0
  66. package/dist/docs/ScPlanDetailsCard.md +246 -0
  67. package/dist/docs/ScPlanDetailsCardMobile.md +240 -0
  68. package/dist/docs/ScPopUpMenu.md +224 -0
  69. package/dist/docs/ScProfile.md +234 -0
  70. package/dist/docs/ScProfileImageUpdate.md +261 -0
  71. package/dist/docs/ScProfileOptions.md +245 -0
  72. package/dist/docs/ScProfilePopup.md +396 -0
  73. package/dist/docs/ScProfileSettingsComp.md +250 -0
  74. package/dist/docs/ScProfileV2Mobile.md +216 -0
  75. package/dist/docs/ScProgressBar.md +267 -0
  76. package/dist/docs/ScQuickPrompt.md +277 -0
  77. package/dist/docs/ScRadio.md +228 -0
  78. package/dist/docs/ScReferralCardMobile.md +226 -0
  79. package/dist/docs/ScReferralTableHeader.md +260 -0
  80. package/dist/docs/ScReferralTableList.md +293 -0
  81. package/dist/docs/ScRole.md +226 -0
  82. package/dist/docs/ScRoleMobile.md +199 -0
  83. package/dist/docs/ScSelect.md +270 -0
  84. package/dist/docs/ScSelection.md +256 -0
  85. package/dist/docs/ScSelectionList.md +272 -0
  86. package/dist/docs/ScSelectionPill.md +240 -0
  87. package/dist/docs/ScSelectionPillGroup.md +302 -0
  88. package/dist/docs/ScSettingsNav.md +212 -0
  89. package/dist/docs/ScSettingsTabComp.md +260 -0
  90. package/dist/docs/ScSideBarLogoUnit.md +340 -0
  91. package/dist/docs/ScSidebar.md +243 -0
  92. package/dist/docs/ScSidebarIcons.md +232 -0
  93. package/dist/docs/ScSidebarMenu.md +283 -0
  94. package/dist/docs/ScSidebarProfile.md +231 -0
  95. package/dist/docs/ScSidebarSwitchMenu.md +258 -0
  96. package/dist/docs/ScSlider.md +194 -0
  97. package/dist/docs/ScStoreCard.md +252 -0
  98. package/dist/docs/ScStrLogo.md +253 -0
  99. package/dist/docs/ScStreamoidWordmark.md +302 -0
  100. package/dist/docs/ScSubAgent.md +226 -0
  101. package/dist/docs/ScTabComp.md +308 -0
  102. package/dist/docs/ScTabField.md +258 -0
  103. package/dist/docs/ScTabSwitcher.md +307 -0
  104. package/dist/docs/ScTableHeader.md +261 -0
  105. package/dist/docs/ScTableList.md +301 -0
  106. package/dist/docs/ScTableListMobile.md +282 -0
  107. package/dist/docs/ScTabs.md +268 -0
  108. package/dist/docs/ScTaxonomyPill.md +263 -0
  109. package/dist/docs/ScTextArea.md +259 -0
  110. package/dist/docs/ScTextField.md +324 -0
  111. package/dist/docs/ScThinkingStepIcon.md +249 -0
  112. package/dist/docs/ScTodoList.md +288 -0
  113. package/dist/docs/ScToggleSwitch.md +229 -0
  114. package/dist/docs/ScUsageHistoryMobile.md +194 -0
  115. package/dist/docs/ScVDivider.md +215 -0
  116. package/dist/docs/ScValueMappingL1.md +256 -0
  117. package/dist/docs/ScVersion.md +251 -0
  118. package/dist/docs/ScWorkspace.md +233 -0
  119. package/dist/docs/ScWorkspaceAccountMenu.md +115 -0
  120. package/dist/docs/ScWorkspaceCard.md +234 -0
  121. package/dist/docs/ScWorkspaceSettingsMobile.md +265 -0
  122. package/dist/docs/ScWorkspaceSwitchCard.md +312 -0
  123. package/dist/docs/ScWorkspaceSwitchMobile.md +241 -0
  124. package/dist/docs/ScWorkspaceSwitchMobileV2.md +278 -0
  125. package/dist/docs/StreamoidSidebar.md +413 -0
  126. package/dist/docs/StreamoidWorkspaceSwitcher.md +307 -0
  127. package/dist/docs/UsageHistoryMobile.md +235 -0
  128. package/dist/docs/components.json +4931 -0
  129. package/dist/index.css +361 -36
  130. package/dist/index.d.mts +213 -88
  131. package/dist/index.d.ts +213 -88
  132. package/dist/index.js +2486 -1629
  133. package/dist/index.mjs +2487 -1620
  134. package/package.json +5 -3
@@ -0,0 +1,233 @@
1
+ ---
2
+ component: ScWorkspace
3
+ exported: false
4
+ package: "@streamoid/ui"
5
+ category: profile
6
+ status: stable
7
+ renders: div
8
+ tags: [workspace, identity, workspace-name, role, internal, not-exported, tenant]
9
+ related: [ScProfile, ScProfilePopup, ScWorkspaceSwitchCard, ScWorkspaceCard, ScDp]
10
+ do_not_confuse_with: [ScProfile, ScWorkspaceCard, ScWorkspaceSwitchCard, StreamoidWorkspaceSwitcher, ScWorkspaceSwitchMobileV2]
11
+ ---
12
+
13
+ # ScWorkspace
14
+
15
+ **The workspace identity row — and it is not part of the public API.**
16
+ Rounded-rect logo + workspace name + grey role line, 200px wide. `packages/ui/src/index.ts`
17
+ does **not** re-export it, so `import { ScWorkspace } from "@streamoid/ui"` fails to
18
+ compile. It exists only as an internal part of `ScProfilePopup` and `ScProfileOptions`.
19
+
20
+ ## TL;DR for agents
21
+
22
+ - **Reach for it when:** you are editing a component **inside** `packages/ui/src`
23
+ and need the workspace identity row. Import it by relative path.
24
+ - **Don't reach for it when:** you are writing host-app code — it is unreachable
25
+ from `@streamoid/ui`. Use `ScProfilePopup` (which renders it for you) or
26
+ `ScWorkspaceSwitchCard` (the standalone workspace row).
27
+ - **Three things that will bite you:**
28
+ 1. **Not exported.** Not in `index.ts`, not in `dist/index.d.ts`, not in the
29
+ package's export list.
30
+ 2. `profileImage` defaults to **`"profile-image0.png"`** — a 404 with no initials
31
+ fallback.
32
+ 3. `collapsed` is the **string** `"false" | "true"`, and `"true"` hides the text
33
+ entirely.
34
+
35
+ ---
36
+
37
+ ## 1. How to use it
38
+
39
+ ### Import
40
+
41
+ From a host app you cannot import it. Reach for the exported parents instead:
42
+
43
+ ```tsx
44
+ import { ScProfilePopup, ScWorkspaceSwitchCard } from "@streamoid/ui";
45
+ import "@streamoid/ui/dist/index.css"; // once, at your app root
46
+ ```
47
+
48
+ From **inside the `ui` package** (the only place it is usable):
49
+
50
+ ```tsx
51
+ import { ScWorkspace } from "../SC-Workspace/ScWorkspace";
52
+ ```
53
+
54
+ ### Minimal usage
55
+
56
+ ```tsx
57
+ <ScWorkspace
58
+ workspaceName={ws.name}
59
+ userRole={ws.role}
60
+ profileImage={ws.imageUrl}
61
+ />
62
+ ```
63
+
64
+ ### Props
65
+
66
+ | Prop | Type | Default | Notes |
67
+ |---|---|---|---|
68
+ | `workspaceName` | `string` | `"Kepler"` | ⚠️ Real default. First line, `text-sm/medium`, single line + ellipsis. |
69
+ | `userRole` | `string` | `"Admin"` | ⚠️ Real default — a **free string**, not the `"admin" \| "member"` union `ScRole` uses. No colour semantics. |
70
+ | `collapsed` | `"false"` \| `"true"` | `"false"` | ⚠️ String union, not boolean. `"true"` hides both lines and shrinks the logo 40px → 32px. |
71
+ | `profileImage` | `string` | `"profile-image0.png"` | ⚠️ Broken relative default. No initials fallback. |
72
+ | `className` | `string` | – | Appended (concatenated unconditionally — see Gotcha 4). |
73
+ | `...props` | `HTMLAttributes<HTMLDivElement>` | – | Spread onto the root div. No button semantics. |
74
+
75
+ ### What renders in each `collapsed` value
76
+
77
+ | Region | `"false"` | `"true"` |
78
+ |---|---|---|
79
+ | Root width | fixed `12.5rem` (200px) | `width: unset` |
80
+ | Logo | 2.5rem, `radius-md` (rounded rect) | 2rem, `radius-md` |
81
+ | `workspaceName` / `userRole` | rendered | **not rendered at all** |
82
+
83
+ ### Recipes
84
+
85
+ ```tsx
86
+ // Inside the ui package: the workspace block of a panel
87
+ <ScWorkspace
88
+ workspaceName={workspaceName}
89
+ userRole={userRole}
90
+ {...(workspaceImage ? { profileImage: workspaceImage } : {})}
91
+ className={styles.scWorkspaceInstance} /* flex:1 !important; width:unset !important; min-width:0 !important */
92
+ />
93
+
94
+ // From a host app — this is the supported path
95
+ <ScProfilePopup
96
+ workspaceName={ws.name}
97
+ userRole={ws.role}
98
+ workspaceImage={ws.imageUrl}
99
+ credits={credits}
100
+ onSwitchWorkspace={openSwitcher}
101
+ />
102
+ ```
103
+
104
+ ---
105
+
106
+ ## 2. Where to use it
107
+
108
+ Only inside `packages/ui`. Two parents render it today:
109
+
110
+ | Parent | Role |
111
+ |---|---|
112
+ | `ScProfilePopup` | the workspace block above "Switch workspace"; overrides the logo to 32px and stretches the row |
113
+ | `ScProfileOptions` | the same block in the legacy static menu (rendered with **no props**, so it shows "Kepler / Admin" placeholders) |
114
+
115
+ Host apps reach it through `ScProfilePopup` — Catalogix's `AppSettingsPopup` is the
116
+ live example.
117
+
118
+ ---
119
+
120
+ ## 3. When to use it
121
+
122
+ ### Use it when
123
+
124
+ - You are adding a DS component in `packages/ui/src` that needs the workspace
125
+ identity row and want it to match the profile popup exactly.
126
+
127
+ ### Don't use it — reach for this instead
128
+
129
+ | Situation | Use instead |
130
+ |---|---|
131
+ | Host-app code of any kind | `ScProfilePopup` (composes it) or `ScWorkspaceSwitchCard` |
132
+ | A full workspace row with role / plan / owner and hover actions | `ScWorkspaceSwitchCard` |
133
+ | A workspace card with a user count and a CTA button | `ScWorkspaceCard` |
134
+ | A whole "switch workspace" modal | hand-roll around `ScWorkspaceSwitchCard` (what all three hosts do) or `StreamoidWorkspaceSwitcher` |
135
+ | Mobile workspace rows | `ScWorkspaceSwitchMobileV2` / `ScWorkspaceSwitchMobile` / `ScWorkspaceSettingsMobile` |
136
+ | The **person** identity row | `ScProfile` |
137
+ | Just the workspace logo tile | `ScDp` with `variant="workspace"`, or `ScIntialProfileCover` |
138
+ | A coloured role pill | `ScRole` |
139
+
140
+ ### Don't confuse with
141
+
142
+ | You may actually want | Not this |
143
+ |---|---|
144
+ | `ScProfile` — the person twin: `name`/`subText`, **circular** avatar | `ScWorkspace` is `workspaceName`/`userRole` with a **rounded-rect** logo |
145
+ | `ScWorkspaceCard` — `workspaceName`/`role`/`userCount`/`ownerEmail`/`buttonText` card | this is a bare two-line row |
146
+ | `ScWorkspaceSwitchCard` — the current/other workspace row with Switch / Settings / Leave | this has no actions |
147
+ | `StreamoidWorkspaceSwitcher` — a full modal listing workspaces | this is one line of identity |
148
+ | `ScWorkspaceSwitchMobileV2` — the mobile row | different props, mobile surface |
149
+
150
+ The four `ScWorkspace*` names are the single biggest mis-pick in this family:
151
+ `ScWorkspace` (internal row) → `ScWorkspaceCard` (card + CTA) →
152
+ `ScWorkspaceSwitchCard` (switcher row with actions) → `StreamoidWorkspaceSwitcher`
153
+ (the modal that lists them).
154
+
155
+ ---
156
+
157
+ ## 4. Why to use it
158
+
159
+ - **It keeps the popup's workspace block identical to its profile block.** Same gap,
160
+ same type ramp, same collapse step as `ScProfile` — the two rows are meant to read
161
+ as a pair, and they only do because they are two copies of one layout.
162
+ - **Rounded-rect vs circle is the workspace/person signal** in the design language,
163
+ and this component encodes it (`radius-md` logo) so composites don't re-decide it.
164
+ - **Both lines ellipsise**, so long tenant names degrade instead of wrapping.
165
+
166
+ What breaks if you hand-roll it: the logo radius drifts to a circle (making a
167
+ workspace look like a person), and the role line loses `text-and-icons-tertiary`.
168
+
169
+ ---
170
+
171
+ ## Gotchas
172
+
173
+ **1. It is not exported.** This is the whole story of the component.
174
+
175
+ ```tsx
176
+ // WRONG — does not compile; ScWorkspace is absent from dist/index.d.ts
177
+ import { ScWorkspace } from "@streamoid/ui";
178
+
179
+ // RIGHT (host app)
180
+ import { ScProfilePopup } from "@streamoid/ui";
181
+ <ScProfilePopup workspaceName={ws.name} userRole={ws.role} workspaceImage={ws.imageUrl} />
182
+ ```
183
+
184
+ If a host genuinely needs the bare row, add
185
+ `export * from "./SC-Workspace/ScWorkspace";` to `packages/ui/src/index.ts` and
186
+ publish — do not copy the component into the host.
187
+
188
+ **2. `profileImage` defaults to `"profile-image0.png"`.** Broken image glyph, no
189
+ initials fallback. `ScProfilePopup` guards this by spreading the prop only when
190
+ `workspaceImage` is truthy; do the same.
191
+
192
+ **3. `collapsed` is the string `"true"`/`"false"`**, and `"true"` removes the text
193
+ rather than truncating it.
194
+
195
+ **4. `className` is concatenated unconditionally,** so the DOM gets
196
+ `class="scWorkspace undefined collapsed-false"` when you pass none.
197
+
198
+ **5. Fixed 200px width.** `.scWorkspace { width: 12.5rem }`. Both parents override it:
199
+ `ScProfilePopup` with `flex: 1 !important; width: unset !important; min-width: 0 !important`,
200
+ `ScProfileOptions` with only the first two. The `min-width: 0` is what makes the ellipsis
201
+ work inside a flex row — copy all three, not just the popup's first two.
202
+
203
+ **6. `userRole` is unstyled free text.** Unlike `ScRole` there is no admin/member
204
+ colour semantics; whatever string you pass renders in tertiary grey. Capitalise it
205
+ yourself.
206
+
207
+ **7. The `<img>` has no `alt` attribute** (absent, not empty).
208
+
209
+ **8. Trailing spaces** in both text nodes (`{workspaceName} `), a Figma-export
210
+ artefact — `trim()` before asserting.
211
+
212
+ ---
213
+
214
+ ## In the wild
215
+
216
+ _No host render site found — used by the agent runtime / composed internally._
217
+
218
+ It is not exported, so a host render site is impossible. Composed at
219
+ `src/SC-ProfilePopup/ScProfilePopup.tsx:287` and
220
+ `src/SC-Profile options/ScProfileOptions.tsx:33`. The host-facing equivalent is
221
+ Catalogix's `app/components/AppSettingsPopup/index.jsx:75`, which passes
222
+ `workspaceName` / `userRole` / `workspaceImage` into `ScProfilePopup` and lets it
223
+ render this row.
224
+
225
+ ---
226
+
227
+ ## Related
228
+
229
+ - `ScProfilePopup` — the exported parent; pass `workspaceName`/`userRole`/`workspaceImage`.
230
+ - `ScProfile` — the person twin, same layout, circular avatar.
231
+ - `ScWorkspaceSwitchCard` — the exported standalone workspace row with actions.
232
+ - `ScWorkspaceCard` — workspace card with user count and a CTA.
233
+ - `ScRole` — the coloured admin/member pill this row deliberately does not use.
@@ -0,0 +1,115 @@
1
+ ---
2
+ component: ScWorkspaceAccountMenu
3
+ package: "@streamoid/ui"
4
+ category: sidebar
5
+ status: stable
6
+ renders: div
7
+ tags: [sidebar, workspace, account, app-switcher, theme, persistence]
8
+ related: [StreamoidSidebar, ScArtifaxSidebar, ScAppSwitchPanel, ScProfilePopup]
9
+ do_not_confuse_with: [ScProfilePopup, ScWorkspaceSwitcher, ScAppSwitchPanel]
10
+ used_by: [cxo, artifax, catalogix, photogenix]
11
+ required_props: [workspaceName, accountName]
12
+ also_exports: [ScSidebarWorkspaceTrigger, ScSidebarSearchTrigger, ScSidebarAppIdentity, useStreamoidThemePreference, useStreamoidSidebarPreference]
13
+ ---
14
+
15
+ # Shared Streamoid sidebar shell
16
+
17
+ `ScWorkspaceAccountMenu` and its companion rail controls keep the constant
18
+ sidebar chrome identical across Streamoid applications. The host still owns
19
+ routes, navigation data, user/workspace data, positioning, and dialogs.
20
+
21
+ ## TL;DR for agents
22
+
23
+ - **Reach for it when:** building the standard workspace menu opened from the
24
+ top-left of a Streamoid application sidebar.
25
+ - Use `ScSidebarWorkspaceTrigger`, `ScSidebarSearchTrigger`, and
26
+ `ScSidebarAppIdentity` for the matching constant rail controls.
27
+ - Use the two preference hooks so theme and expanded/collapsed state survive an
28
+ app switch across Streamoid subdomains.
29
+
30
+ ## 1. How to use it
31
+
32
+ ```tsx
33
+ import {
34
+ ScWorkspaceAccountMenu,
35
+ useStreamoidSidebarPreference,
36
+ useStreamoidThemePreference,
37
+ } from "@streamoid/ui";
38
+
39
+ const sidebar = useStreamoidSidebarPreference({
40
+ legacyCollapsedKeys: ["my-app-sidebar-collapsed"],
41
+ });
42
+ const theme = useStreamoidThemePreference({
43
+ legacyStorageKeys: ["canvas_theme"],
44
+ });
45
+ ```
46
+
47
+ | Prop | Type | Default | Purpose |
48
+ |---|---|---|---|
49
+ | `workspaceName` | `string` | required | Current workspace label. |
50
+ | `workspaceRole` | `string` | `"Member"` | Role shown below the workspace. |
51
+ | `workspaceImage` | `string` | none | Optional square workspace image. |
52
+ | `credits` | `ReactNode` | none | Value shown as credits left beside Billing & Usage. |
53
+ | `onSwitchWorkspace` | `() => void` | none | Opens the workspace switch/create flow. |
54
+ | `onInviteMembers` | `() => void` | none | Opens workspace members. |
55
+ | `onBilling` | `() => void` | none | Opens billing and usage. |
56
+ | `organizationName` | `string` | none | Current organization name. |
57
+ | `onOrganizationClick` | `() => void` | none | Opens organization settings. |
58
+ | `accountName` | `string` | required | Signed-in user name. |
59
+ | `accountEmail` | `string` | none | Signed-in email. |
60
+ | `onAccountClick` | `() => void` | none | Opens account/profile settings. |
61
+ | `themeMode` | `light \| dark \| system` | `system` | Selected theme icon. |
62
+ | `onThemeModeChange` | `(mode) => void` | none | Updates the host theme. |
63
+
64
+ ```tsx
65
+ <ScWorkspaceAccountMenu
66
+ workspaceName={workspace.name}
67
+ workspaceRole={workspace.role}
68
+ credits={workspace.credits}
69
+ organizationName={organization.name}
70
+ accountName={user.name}
71
+ accountEmail={user.email}
72
+ themeMode={theme.preference}
73
+ onThemeModeChange={theme.setPreference}
74
+ />
75
+ ```
76
+
77
+ ## 2. Where to use it
78
+
79
+ Render the panel beside the top workspace trigger. Render the app identity at
80
+ the bottom of the sidebar and open `ScAppSwitchPanel` from that row.
81
+
82
+ ## 3. When to use it
83
+
84
+ Use it in authenticated application shells. Login pages, standalone settings
85
+ screens, and embedded widgets should not render the full sidebar menu.
86
+
87
+ ## 4. Why to use it
88
+
89
+ The package fixes layout, copy, theme selection, and app-switch affordances in
90
+ one release. Apps only supply data and routing callbacks, avoiding five drifting
91
+ copies of the same shell.
92
+
93
+ ## Gotchas
94
+
95
+ - The menu is a panel body only; the host owns open state, placement, overlay,
96
+ outside-click dismissal, and mobile presentation.
97
+ - The preference hooks write a parent-domain cookie on `.test.streamoid.com`
98
+ and `.streamoid.com`. On localhost the cookie is host-only and works across
99
+ ports.
100
+ - Legacy sidebar keys describe the collapsed state, while the hook exposes the
101
+ positive `expanded` state. Both hooks continue mirroring supplied legacy keys
102
+ so older code in the same host stays synchronized during migration.
103
+
104
+ ## In the wild
105
+
106
+ No host render site found before the `0.6.19` rollout. The first consumer is the
107
+ CXO dashboard sidebar integration shipped with this release.
108
+
109
+ ## Related
110
+
111
+ - `StreamoidSidebar` — the common config-driven rail.
112
+ - `ScArtifaxSidebar` — the sectioned rail used by Artifax and Tactix.
113
+ - `ScAppSwitchPanel` — the app list opened from the bottom app identity.
114
+ - `ScProfilePopup` — the previous profile-first menu; do not use it for the new
115
+ workspace-first shell.
@@ -0,0 +1,234 @@
1
+ ---
2
+ component: ScWorkspaceCard
3
+ package: "@streamoid/ui"
4
+ category: cards
5
+ status: legacy
6
+ renders: div
7
+ tags: [card, workspace, team, role, owner, switch, leave, legacy, superseded]
8
+ related: [ScWorkspaceSwitchCard, StreamoidWorkspaceSwitcher, ScWorkspaceSwitchMobileV2, ScWorkspaceSettingsMobile, ScIntialProfileCover]
9
+ do_not_confuse_with: [ScWorkspaceSwitchCard, StreamoidWorkspaceSwitcher, ScSidebarSwitchMenu, ScWorkspaceSwitchMobile, ScWorkspaceSwitchMobileV2]
10
+ # used_by deliberately omitted: nothing renders this anywhere — see "In the wild".
11
+ ---
12
+
13
+ # ScWorkspaceCard
14
+
15
+ **⚠️ Legacy — superseded by `ScWorkspaceSwitchCard` (single card) and
16
+ `StreamoidWorkspaceSwitcher` (the whole overlay).** A full-width row showing a
17
+ workspace's initials cover, name, role badge, user count and owner email, plus two
18
+ buttons — one permanently disabled, the other unlabelled. **It accepts no
19
+ callbacks**, so nothing it renders can be wired up.
20
+
21
+ ## TL;DR for agents
22
+
23
+ - **Reach for it when:** essentially never in new code. Use
24
+ `ScWorkspaceSwitchCard`, or `StreamoidWorkspaceSwitcher` if you want the whole
25
+ switch-workspace overlay.
26
+ - **Why it's legacy:** it is a Figma-parity static render, not a functional card:
27
+ - **No `onSwitch` / `onLeave` / `onClick` props.** There is no way to handle either
28
+ button. The only handler you can attach is a bubbling `onClick` on the card root.
29
+ - The "Current workspace" button is **hardcoded `state="disabled"`** — it can never
30
+ be pressed, and it can never be switched to any other state.
31
+ - The avatar is **hardcoded to the initials `"WS"`** (`ScIntialProfileCover` is
32
+ rendered with no `intial` prop), so it never shows the real workspace initials.
33
+ - The "Leave workspace" button is `styleVariant="icon-only"`, so its label is
34
+ **never rendered** and it carries **no `aria-label`** — an unnamed button.
35
+ - `ownerEmail` defaults to a **real person's address**
36
+ (`rohan@streamoid.com`).
37
+ - **If you must use it:** treat it as a display-only row, put your handler on the
38
+ card root, and accept that the two buttons are decoration.
39
+
40
+ ---
41
+
42
+ ## 1. How to use it
43
+
44
+ ### Import
45
+
46
+ ```tsx
47
+ import { ScWorkspaceCard } from "@streamoid/ui";
48
+ import "@streamoid/ui/dist/index.css"; // once, at your app root
49
+ ```
50
+
51
+ ### Minimal usage
52
+
53
+ ```tsx
54
+ // Display only — this is genuinely all it can do.
55
+ <ScWorkspaceCard
56
+ workspaceName="Kepler"
57
+ role="Admin"
58
+ userCount="12 Users"
59
+ ownerEmail="owner@example.com"
60
+ buttonText="Current workspace"
61
+ />
62
+ ```
63
+
64
+ ### Props
65
+
66
+ | Prop | Type | Default | Notes |
67
+ |---|---|---|---|
68
+ | `workspaceName` | `string` | `"Stores"` | ⚠️ Real default. `text-md-medium`, `flex: 1`, single-line ellipsised. No `title` tooltip. |
69
+ | `role` | `string` | `"Admin"` | ⚠️ Real default. Rendered by `ScBadges` with a hardcoded `variant="info"` and a **CSS-forced `width: 3.3125rem !important`** — anything longer than ~"Admin"/"Member" clips. |
70
+ | `userCount` | `string` | `"12 Users"` | ⚠️ Real default, **including the unit word**. Rendered via `ScPairtext` with a `SiconTeam`. |
71
+ | `ownerEmail` | `string` | `"rohan@streamoid.com"` | ⚠️ Real default — **a real Streamoid address**. Rendered via `ScPairtext` with a `SiconCrown`. Not truncated. |
72
+ | `buttonText` | `string` | `"Current workspace"` | ⚠️ Real default. The label of the **permanently disabled** outline button (fixed `width: 12.5rem`). |
73
+ | `className` | `string` | – | Concatenated unguarded — see Gotcha 7. |
74
+ | `...props` | `HTMLAttributes<HTMLDivElement>` | – | Spread onto the root div. This is the **only** way to attach behaviour. |
75
+
76
+ ### What is *not* a prop (and therefore cannot be done)
77
+
78
+ | You probably want | Reality |
79
+ |---|---|
80
+ | `onSwitch` | Does not exist. The switch button is `state="disabled"`. |
81
+ | `onLeave` | Does not exist. The leave button has no handler and no label. |
82
+ | `initials` / `imageUrl` | Does not exist. The avatar is always `"WS"`. |
83
+ | `isCurrent` / `type` | Does not exist. The card has no current-vs-other variant (dead CSS for it exists — see Gotcha 8). |
84
+ | `plan` | Does not exist. Use `ScWorkspaceSwitchCard`, which has `plan`. |
85
+
86
+ ---
87
+
88
+ ## 2. Where to use it
89
+
90
+ Nowhere, currently. **No host render site exists in CXO, Photogenix, Catalogix or
91
+ Artifax.** Its role has been taken over by:
92
+
93
+ | Surface | Current component |
94
+ |---|---|
95
+ | A single workspace row (current or other), with switch / settings / leave | `ScWorkspaceSwitchCard` |
96
+ | The whole "Switch workspace" overlay, list + loading + empty | `StreamoidWorkspaceSwitcher` |
97
+ | Mobile workspace switcher | `ScWorkspaceSwitchMobileV2` (older: `ScWorkspaceSwitchMobile`) |
98
+ | Mobile workspace settings | `ScWorkspaceSettingsMobile` |
99
+ | Sidebar workspace/switch strip (expanded + collapsed) | `ScSidebarSwitchMenu` (fed by `StreamoidSidebar`) |
100
+
101
+ It composes `ScIntialProfileCover`, `ScBadges`, `ScPairtext`, `ScVDivider` and two
102
+ `ScButton`s — so if you are looking for how those fit together, this file is still a
103
+ useful reference even though the card itself is retired.
104
+
105
+ ---
106
+
107
+ ## 3. When to use it
108
+
109
+ ### Use it when
110
+
111
+ - You are maintaining an old screen that already renders it and you only need to
112
+ change strings.
113
+ - You want a purely **static** workspace summary row and will supply your own
114
+ interaction on the root.
115
+
116
+ Otherwise: don't.
117
+
118
+ ### Don't use it — reach for this instead
119
+
120
+ | Situation | Use instead |
121
+ |---|---|
122
+ | A workspace row the user can switch to | `ScWorkspaceSwitchCard` (`type="otherWS"`, `onSwitch`) |
123
+ | The current workspace with settings + leave actions | `ScWorkspaceSwitchCard` (`type="currentWS"`, `onSettings`, `onLeave`) |
124
+ | The full switch-workspace modal/overlay | `StreamoidWorkspaceSwitcher` (`open`, `workspaces`, `onSwitchWorkspace`) |
125
+ | Mobile workspace switching | `ScWorkspaceSwitchMobileV2` |
126
+ | Mobile workspace settings screen | `ScWorkspaceSettingsMobile` |
127
+ | The sidebar's workspace/switch strip | `ScSidebarSwitchMenu` |
128
+ | A workspace **avatar** only | `ScDp` (image or initials) or `ScIntialProfileCover` |
129
+ | A store, not a workspace | `ScStoreCard` |
130
+
131
+ ### Don't confuse with
132
+
133
+ | You may actually want | Not this |
134
+ |---|---|
135
+ | `ScWorkspaceSwitchCard` — `wsName`, `role`, `plan`, `ownerId`, `initials`, `imageUrl`, `type: "currentWS" \| "otherWS"`, `onSwitch`, `onSettings`, `onLeave`, derives initials from the name | `ScWorkspaceCard` has none of that |
136
+ | `StreamoidWorkspaceSwitcher` — the whole overlay (`open`, `workspaces`, `loading`, `config`) | This is one static row |
137
+ | `ScSidebarSwitchMenu` — the sidebar switch strip with `expanded`/`collapsed` variants | Different surface entirely |
138
+ | `ScWorkspaceSwitchMobile` / `…MobileV2` — the mobile twins | This is desktop-shaped |
139
+ | `NscWorkspaceSwitch` — an `@deprecated` alias of `ScWorkspaceSwitchCard` | Not related to this card |
140
+
141
+ ---
142
+
143
+ ## 4. Why to use it
144
+
145
+ Honestly: you shouldn't. What it *does* give you, if you are stuck with it:
146
+
147
+ - **Consistent identity row composition** — initials cover, name, role badge, and two
148
+ `ScPairtext` metrics separated by a `ScVDivider`, at the same spacing as the rest of
149
+ the workspace family.
150
+ - **Tokenised surface and border** (`--alias-surface-base`, `--alias-border-subtle`,
151
+ `radius-3xl`, 24px padding) plus a `blur(0.25rem)` backdrop, so it sits correctly on
152
+ both themes.
153
+
154
+ Everything else — real initials, a working switch action, a labelled leave action, a
155
+ current-vs-other variant, a plan chip — is in `ScWorkspaceSwitchCard`.
156
+
157
+ ---
158
+
159
+ ## Gotchas
160
+
161
+ **1. The switch button is permanently disabled.** `state="disabled"` is hardcoded in
162
+ the component, which means `pointer-events: none`, `tabIndex={-1}` and
163
+ `aria-disabled`. `buttonText` changes its label but never its state.
164
+
165
+ ```tsx
166
+ // POINTLESS — there is no prop that enables this button
167
+ <ScWorkspaceCard buttonText="Switch to this workspace" />
168
+
169
+ // RIGHT — use the card that has the handler
170
+ <ScWorkspaceSwitchCard wsName={ws.name} type="otherWS" onSwitch={() => switchTo(ws)} />
171
+ ```
172
+
173
+ **2. The leave button renders no text and has no accessible name.** It is
174
+ `styleVariant="icon-only"`, and `ScButton` only renders `text` on the
175
+ `default`/`icon-left`/`icon-right` paths — so `"Leave workspace"` never appears. With
176
+ no `aria-label`, screen readers announce an unnamed button.
177
+
178
+ **3. The avatar always says "WS".** `ScIntialProfileCover` is rendered with no
179
+ `intial`, so it falls back to its own default. There is no prop to pass the real
180
+ workspace initials.
181
+
182
+ **4. `ownerEmail` defaults to `rohan@streamoid.com`.** A real address. Never let this
183
+ default reach a screen.
184
+
185
+ **5. The role badge is width-clamped to 53px.** `.scBadgesInstance` sets
186
+ `width: 3.3125rem !important`, sized for "Admin". "Owner", "Member" or a localised
187
+ role will clip.
188
+
189
+ **6. The `SiconSwitch` you can see in the source is never painted.** It is passed as
190
+ `icon` to a `ScButton` whose `styleVariant` is left at `"default"`, and `ScButton`
191
+ only renders the icon for `icon-left` / `icon-right` / `icon-only`. Dead code.
192
+
193
+ **7. `className` is concatenated unguarded** (`styles.scWorkspaceCard + " " +
194
+ className`), so omitting it puts a literal `undefined` class in the DOM.
195
+
196
+ **8. There is dead CSS for a variant that does not exist.** The module defines
197
+ `.current-workspace-true` / `.current-workspace-false` rules and a
198
+ `.siconSwitchInstance2` size override; the component never applies any of those class
199
+ names. Do not infer a `currentWorkspace` prop from them — there isn't one.
200
+
201
+ **9. Clicks are ambiguous.** With `onClick` on the root: the disabled outline button
202
+ has `pointer-events: none` so clicks fall through to the card, and the error
203
+ icon-button does not stop propagation, so its clicks also reach the card. You cannot
204
+ tell "leave" from "open".
205
+
206
+ **10. Fixed-width children in a flexible row.** `.scButtonInstance` is
207
+ `width: 12.5rem !important` and `flex-shrink: 0`; the card is `align-self: stretch`.
208
+ On narrow containers the middle metrics block is what gets squeezed, so the owner
209
+ email (not truncated) will overflow before the buttons shrink.
210
+
211
+ ---
212
+
213
+ ## In the wild
214
+
215
+ _No host render site found — used by the agent runtime / composed internally._
216
+
217
+ More precisely: it is rendered nowhere at all — not in CXO, Photogenix, Catalogix or
218
+ Artifax, and not by any other DS component. The surfaces it was drawn for (the
219
+ workspace switcher list and the workspace settings row) are served by
220
+ `ScWorkspaceSwitchCard` and `StreamoidWorkspaceSwitcher` today. If you are hunting for
221
+ a real workspace-card call site, look at CXO's workspace switcher, which uses those.
222
+
223
+ ---
224
+
225
+ ## Related
226
+
227
+ - `ScWorkspaceSwitchCard` — **the replacement**: current/other variants, real initials, `onSwitch`/`onSettings`/`onLeave`.
228
+ - `StreamoidWorkspaceSwitcher` — the whole overlay built from those cards.
229
+ - `ScWorkspaceSwitchMobileV2` / `ScWorkspaceSettingsMobile` — the mobile surfaces.
230
+ - `ScSidebarSwitchMenu` — the sidebar workspace/switch strip. (Note: the unexported
231
+ `SC-Workspace/ScWorkspace` folder is *not* reachable from `@streamoid/ui` — don't
232
+ import it.)
233
+ - `ScIntialProfileCover` / `ScDp` — the avatar primitives.
234
+ - `ScPairtext` / `ScBadges` / `ScVDivider` — the parts this card composes.