@streamoid/ui 0.6.17 → 0.6.18

package/dist/docs/ScDp.md

@@ -0,0 +1,245 @@
+---
+component: ScDp
+package: "@streamoid/ui"
+category: profile
+status: stable
+renders: div
+tags: [avatar, dp, display-picture, initials, profile-image, workspace-logo, fallback]
+related: [ScIntialProfileCover, ScProfile, ScWorkspace, ScProfileImageUpdate, ScWorkspaceSwitchCard]
+do_not_confuse_with: [ScIntialProfileCover, ScProfileImageUpdate, ScProfile]
+used_by: [cxo, photogenix, artifax]
+---
+
+# ScDp
+
+**The avatar primitive.** A square box that shows an image if you have one and
+initials if you don't — circular for people (`variant="profile"`), rounded-rect for
+workspaces (`variant="workspace"`). It is the only avatar in the library that has a
+real image-error fallback.
+
+## TL;DR for agents
+
+- **Reach for it when:** you need any avatar — a user's face, a workspace logo, an
+  assignee chip, a sidebar profile button.
+- **Don't reach for it when:** you need the upload/crop control (→ `ScProfileImageUpdate`),
+  or an initials tile with no image path at all (→ `ScIntialProfileCover`).
+- **Four things that will bite you:**
+  1. `initial` defaults to **`"WS"`** — forget it and every avatar reads "WS".
+  2. `size` is **unitless pixels**, and defaults to **60**. `size={12}` gives you a
+     12px avatar, not `12rem`.
+  3. The initials text is a **fixed 1rem** and never scales with `size`. Below ~32px
+     it gets clipped by `overflow: hidden`.
+  4. `type="image"` with no `imageUrl` silently renders initials. That is the
+     fallback, not a bug — but it means a typo in `imageUrl` looks like "no image".
+
+---
+
+## 1. How to use it
+
+### Import
+
+```tsx
+import { ScDp } from "@streamoid/ui";
+import "@streamoid/ui/dist/index.css"; // once, at your app root
+```
+
+### Minimal usage
+
+```tsx
+<ScDp type="initial" variant="profile" initial="NR" size={40} />
+```
+
+### Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `type` | `"initial"` \| `"image"` | `"initial"` | `"image"` only takes effect when `imageUrl` is set **and** the image loads. |
+| `variant` | `"workspace"` \| `"profile"` | `"workspace"` | ⚠️ Defaults to the **rounded-rect** workspace shape. Pass `"profile"` for a circle. |
+| `initial` | `string` | `"WS"` | ⚠️ Real default. Shown when `type="initial"` **and** as the fallback when the image 404s. |
+| `imageUrl` | `string` | – | `<img src>`. On `onError` the component flips to initials permanently. |
+| `size` | `number` | `60` | Width **and** height in **px** (written as inline `width`/`height`). `aspect-ratio: 1` is enforced in CSS. |
+| `className` | `string` | – | Appended after the internal classes. |
+| `style` | `CSSProperties` | – | Spread **after** `size`, so `style={{ width: 90 }}` **overrides** `size`. |
+
+Nothing else is accepted — `ScDpProps` does **not** extend `HTMLAttributes`, so
+`onClick`, `data-*`, `aria-*` and `title` are **not** forwarded. Wrap it.
+
+### What renders
+
+| `type` | `imageUrl` | Image loaded | Renders |
+|---|---|---|---|
+| `"initial"` | anything | – | initials on `fill-neutral-neutralselected` |
+| `"image"` | unset | – | initials (fallback) |
+| `"image"` | set | ✓ | `<img alt="" object-fit: cover>` |
+| `"image"` | set | ✗ (onError) | initials, for the rest of the component's life |
+
+### Recipes
+
+```tsx
+// Person avatar with image + initials fallback (the standard host idiom)
+<ScDp
+  type={user.imageUrl ? "image" : "initial"}
+  variant="profile"
+  initial={(user.name || "U").charAt(0).toUpperCase()}
+  imageUrl={user.imageUrl}
+  size={40}
+/>
+
+// Workspace logo tile — rounded rect, custom radius via style
+<ScDp
+  type="initial"
+  variant="workspace"
+  initial="AC"
+  size={64}
+  style={{ borderRadius: "var(--radius-xl, 12px)" }}
+/>
+
+// Clickable avatar — ScDp forwards no handlers, so wrap it
+<button type="button" onClick={openProfile} aria-label="Open profile menu">
+  <ScDp type="initial" variant="profile" initial="NR" size={32} />
+</button>
+```
+
+---
+
+## 2. Where to use it
+
+- **Sidebar profile footers** — Photogenix
+  `dashboard/client/src/components/layout/Sidebar.tsx:871`/`:923` and Artifax
+  `packages/shared/src/components/DashboardSidebar.tsx:698`/`:853`/`:885` each render
+  one in their own sidebar shell. (Catalogix does **not** use it — its profile menu is
+  `ScProfilePopup`, which composes `ScProfile`/`ScWorkspace` and their own `<img>`.)
+- **Workspace switch rows** — `ScWorkspaceSwitchCard` and
+  `ScWorkspaceSwitchMobileV2` compose it internally (the card forces it to 90px).
+- **Assignee / member pickers** — Photogenix `AssigneeSelect.tsx:66` and
+  `SPHCProfileDropdownField.tsx:60`.
+- **Team tables** — one per member row, via `ProfileAvatar` in `@streamoid/settings`
+  (`organization-content.tsx:141`).
+
+CXO (`src/app/components/profile-avatar.tsx`) and `@streamoid/settings`
+(`packages/settings/src/profile-avatar.tsx`) both wrap it in a local `ProfileAvatar`
+helper that picks `variant` from a `borderRadius` string; prefer passing `variant`
+directly in new code.
+
+---
+
+## 3. When to use it
+
+### Use it when
+
+- You have an identity (person or workspace) and **may or may not** have an image.
+- You want the initials fallback, the `object-fit: cover` crop and the
+  `aspect-ratio: 1` guarantee without writing them.
+
+### Don't use it — reach for this instead
+
+| Situation | Use instead |
+|---|---|
+| Avatar **upload / delete** control on a settings form | `ScProfileImageUpdate` |
+| Initials-only tile, no image branch, 60px design block | `ScIntialProfileCover` |
+| Avatar **plus** name and sub-line as one row | `ScProfile` (person) / `ScWorkspace` (workspace, internal) |
+| A whole workspace row with role/plan/owner | `ScWorkspaceSwitchCard` |
+| A status dot or count chip | `ScBadges` / `ScBeacon` |
+
+### Don't confuse with
+
+| You may actually want | Not this |
+|---|---|
+| `ScIntialProfileCover` — fixed 60px initials block, `intial` (sic) prop, no image support | `ScDp` is the one with the image path and the error fallback |
+| `ScProfileImageUpdate` — the editable avatar with upload/delete | `ScDp` is display-only |
+| `ScProfile` — avatar **+ name + subtext** row | `ScDp` is the avatar alone |
+
+---
+
+## 4. Why to use it
+
+- **The fallback chain is already right.** Image → `onError` → initials, with the
+  background, radius and centring holding in both branches. Hand-rolled avatars
+  usually show a broken-image glyph instead.
+- **No layout collapse.** `flex-shrink: 0` + `aspect-ratio: 1` mean it keeps its
+  size inside a constrained flex row — the single most common avatar bug in the
+  host shells.
+- **Two shapes, one prop.** `variant` maps 1:1 to the Figma person/workspace
+  distinction (`radius-full` vs `radius-md`), so specs translate directly.
+- **Token-driven.** Background and text come from `--alias-fill-neutral-neutralselected`
+  and `--alias-text-and-icons-primary`, so it flips with the theme.
+
+---
+
+## Gotchas
+
+**1. `initial` defaults to `"WS"`.** A missing `initial` ships workspace placeholder
+copy onto a person's avatar.
+
+```tsx
+// WRONG — renders "WS"
+<ScDp type="initial" variant="profile" size={40} />
+
+// RIGHT
+<ScDp type="initial" variant="profile" initial="NR" size={40} />
+```
+
+**2. `variant` defaults to `"workspace"` (a rounded rect).** People need
+`variant="profile"` for the circle.
+
+**3. `size` is px and the initials font is not.** `.initials` is hardcoded to
+`font-size-md` (1rem) / `line-height-md` (1.5rem) with `overflow: hidden` and
+`white-space: nowrap` on the parent, so at `size={24}` two initials get clipped.
+Use one character below ~32px, or restyle via `className`.
+
+**4. Multi-character initials get cut, not shrunk.** `.scDp` is `overflow: hidden`
+and `.initials` is `nowrap` + `ellipsis`. Three letters at 40px will clip.
+
+**5. No handlers are forwarded.** `ScDpProps` lists only 7 keys —
+`onClick`, `onKeyDown`, `role`, `tabIndex`, `title`, `data-*` and `aria-*` are all
+dropped by TypeScript. Wrap it in a `<button>` for interaction.
+
+```tsx
+// WRONG — type error, and no click even if you cast it
+<ScDp type="initial" initial="NR" onClick={open} />
+
+// RIGHT
+<button type="button" onClick={open} aria-label="Profile"><ScDp type="initial" initial="NR" /></button>
+```
+
+**6. The image is decorative.** It renders `alt=""` and `pointer-events: none`.
+Screen readers announce nothing — put the name in the surrounding label yourself.
+
+**7. `style` beats `size`.** The inline style object is `{ width: size, height: size,
+...style }`, so any `width`/`height` you pass in `style` wins. Parents can also beat
+both: `ScWorkspaceSwitchCard` forces `90px !important` on its nested `ScDp`.
+
+**8. The error fallback is sticky.** Once `onError` fires, `imageFailed` state stays
+`true` for the component's lifetime — changing `imageUrl` afterwards will not retry.
+Remount (change the `key`) if you need a retry.
+
+---
+
+## In the wild
+
+```tsx
+// cxo-dashboard  src/app/components/profile-avatar.tsx:26
+<ScDp
+  type={profileImage ? "image" : "initial"}
+  variant={isProfile ? "profile" : "workspace"}
+  initial={initial}
+  imageUrl={profileImage}
+  size={size}
+  className={initialsClassName}
+/>
+```
+
+```tsx
+// artifax  packages/shared/src/components/DashboardSidebar.tsx:853
+<ScDp type="initial" variant="profile" initial={initial} size={40} />
+```
+
+---
+
+## Related
+
+- `ScIntialProfileCover` — initials-only 60px tile, no image branch.
+- `ScProfileImageUpdate` — the editable avatar (upload / delete).
+- `ScProfile` / `ScWorkspace` — avatar + text rows built on their own `<img>`, not on `ScDp`.
+- `ScWorkspaceSwitchCard` / `ScWorkspaceSwitchMobileV2` — compose `ScDp` internally.
+- `ScProfilePopup` — the profile menu panel; uses `ScProfile`, not `ScDp`.

package/dist/docs/ScDrawer.md

@@ -0,0 +1,318 @@
+---
+component: ScDrawer
+package: "@streamoid/ui"
+category: overlays
+status: stable
+renders: div (portalled to document.body; optional sibling backdrop div)
+tags: [drawer, side-panel, slide-out, sidedrawer, overlay, portal, right, left, zindex]
+related: [ScModal, ScProfilePopup, ScAppSwitchPanel, ScButton]
+do_not_confuse_with: [ScModal, ScSidebar, StreamoidSidebar, ScProfilePopup]
+used_by: [catalogix]
+---
+
+# ScDrawer
+
+**The edge-anchored full-height slide-out panel.** A `position: fixed` 512px panel
+pinned to the right (or left) edge, portalled to `<body>`, with self-contained
+outside-click and Escape dismissal and an **opt-in** dim backdrop. Everything inside
+— header, close button, scroll area, footer — is `children`.
+
+## TL;DR for agents
+
+- **Reach for it when:** you need a create/edit panel or a detail pane that slides
+  in from the screen edge and stays full height.
+- **Don't reach for it when:** the dialog should be centered and blocking
+  (→ `ScModal`), it's the app's primary navigation rail (→ `StreamoidSidebar`), or
+  it's the profile flyout (→ `ScProfilePopup`).
+- **Five things that will bite you:**
+  1. `backdrop` defaults to **`false`** ⚠️. The page behind stays fully
+     interactive and un-dimmed.
+  2. The bare defaults (512px, `surface-subtleraised`, a 24px rounded inner edge,
+     `z-index: 10`) are **overridden by every real call site**. Copy the house
+     style below or you ship a second, mismatched family of drawer.
+  3. `.content` ships `padding: 56px 96px 0 96px`. Almost everyone passes
+     `contentStyle={{ padding: 0 }}`.
+  4. Both `.drawer` and `.content` are `overflow: hidden` — **no scrolling, and
+     dropdowns are clipped**.
+  5. `closeOnOutside` is a document-level `mousedown` listener, so clicking **any**
+     other body-level portal (a `react-select` menu, a nested `ScModal`, a toast)
+     closes the drawer.
+
+---
+
+## 1. How to use it
+
+### Import
+
+```tsx
+import { ScDrawer } from "@streamoid/ui";
+import "@streamoid/ui/dist/index.css"; // once, at your app root
+```
+
+### Minimal usage — the house style
+
+Do not use the bare defaults. This block is the shape every Catalogix call site
+spells out, and it is what `app/components/SideDrawer` bakes in:
+
+```tsx
+{isOpen && (
+  <ScDrawer
+    onClose={close}
+    side="right"
+    backdrop
+    zIndex={70}
+    style={{
+      width: "480px",
+      maxWidth: "100vw",
+      background: "var(--alias-surface-raised)",
+      borderRadius: 0,
+    }}
+    contentStyle={{ padding: 0 }}
+  >
+    <MyPanelContent onClose={close} />
+  </ScDrawer>
+)}
+```
+
+### Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `children` | `ReactNode` | – | The whole panel body. No header/close/footer is provided. |
+| `open` | `boolean` | `true` | ⚠️ Defaults to open. `false` returns `null` (unmounts; no transition). |
+| `onClose` | `() => void` | – | Fired by a document mousedown outside the panel (which includes the backdrop) and by Escape. Optional. |
+| `side` | `"right"` \| `"left"` | `"right"` | Sets the edge, the rounded corner pair and the shadow direction. |
+| `backdrop` | `boolean` | `false` | ⚠️ Off by default (preserves the legacy backdrop-less `SideDrawer`). When on, renders an `aria-hidden` `rgba(0,0,0,0.5)` scrim at `zIndex - 1`. The scrim has **no click handler of its own** — clicking it closes only because it is outside the panel ref, so `closeOnOutside={false}` makes the scrim inert. |
+| `zIndex` | `number` | – | Panel = `zIndex`, backdrop = `zIndex - 1`. Needed when the drawer opens over another body-level overlay. Unset → the CSS `z-index: 10` / `9`. |
+| `closeOnOutside` | `boolean` | `true` | Document `mousedown` outside the panel ref → `onClose`. See Gotcha 5. |
+| `closeOnEsc` | `boolean` | `true` | Document `keydown` Escape → `onClose`. |
+| `className` | `string` | – | On the **panel** (appended after `.drawer` + `.side-*`). |
+| `style` | `CSSProperties` | – | On the **panel**. This is where width / background / radius go. |
+| `contentClassName` | `string` | – | On the inner content box. |
+| `contentStyle` | `CSSProperties` | – | On the inner content box. This is where you kill the padding. |
+
+There is no `...props` spread — anything not in this table is a type error.
+
+### What it actually renders
+
+```html
+<!-- portalled into document.body -->
+<div class="backdrop" aria-hidden />                 <!-- only when backdrop; z-index: 9 (or zIndex-1) -->
+<div class="drawer side-right {className}" style={style}>
+  <!-- 512px · height:100vh · position:fixed · top:0 · right:0
+       background: --alias-surface-subtleraised · overflow:hidden · z-index:10
+       radius 24px 0 0 24px · box-shadow -8px 0 56px 8px rgba(0,0,0,.16) -->
+  <div class="content {contentClassName}" style={contentStyle}>
+    <!-- padding: 56px 96px 0 96px · height:100% · flex column · overflow:hidden -->
+    {children}
+  </div>
+</div>
+```
+
+### Recipes
+
+```tsx
+// Sticky header + scrolling body + sticky footer (the layout you almost always want)
+<ScDrawer onClose={close} backdrop zIndex={70}
+  style={{ width: 480, maxWidth: "100vw", background: "var(--alias-surface-raised)", borderRadius: 0 }}
+  contentStyle={{ padding: 0 }}
+>
+  <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <header style={{ flexShrink: 0, padding: 24 }}>
+      Create store
+      <SiconClose size={24} onClick={close} />
+    </header>
+    <div style={{ flex: 1, minHeight: 0, overflowY: "auto", padding: 24 }}>{form}</div>
+    <footer style={{ flexShrink: 0, padding: 24 }}>
+      <ScButton text="Create" variant="mono" size="md" onClick={submit} />
+    </footer>
+  </div>
+</ScDrawer>
+
+// Drawer opened from inside a modal — raise both, and stop the modal stealing the click
+<ScDrawer onClose={close} backdrop zIndex={1200} />
+
+// A drawer containing a react-select / date picker that portals to body
+<ScDrawer onClose={close} closeOnOutside={false} backdrop />
+// …and close it from your own explicit ✕ / Cancel instead.
+
+// Left-anchored (filters / nav-adjacent)
+<ScDrawer side="left" onClose={close} backdrop style={{ width: 360, borderRadius: 0 }} />
+```
+
+---
+
+## 2. Where to use it
+
+- **Catalogix create/edit panels** — `CreateStore`, `AddProductsOptions`,
+  `AddHierarchyModal`, `TaxonomyAttributesModal`, `EditAttributesModal` all render
+  one directly with the house style block.
+- **`app/components/SideDrawer`** — the thin wrapper that bakes the same chrome in,
+  so wrapper-backed panes match the direct call sites. Prefer the wrapper inside
+  Catalogix; use `ScDrawer` directly elsewhere.
+- **Detail / inspector panes** beside a table or grid.
+- **Export / batch progress panels** — Photogenix's `BatchExportDrawer` is an
+  app-local drawer that should converge here.
+
+Catalogix is the only host consumer today.
+
+---
+
+## 3. When to use it
+
+### Use it when
+
+- The panel is **secondary to the page** — you want the list behind it to stay
+  visible for context (that is exactly why `backdrop` is opt-in).
+- The content is tall/form-shaped and benefits from full viewport height.
+- You need the panel to escape a transformed / `overflow: hidden` ancestor — the
+  `<body>` portal is the main reason to prefer this over your own fixed div.
+
+### Don't use it — reach for this instead
+
+| Situation | Use instead |
+|---|---|
+| Centered blocking dialog / confirm | `ScModal` |
+| The app's primary navigation rail (persistent, collapsible) | `StreamoidSidebar` (+ `ScSidebarMenu`, `ScSideBarLogoUnit`) |
+| Cross-product app switcher | `ScAppSwitchPanel` via `StreamoidSidebar`'s `switchPanel` / `switchPanelOpen` — **not** a drawer |
+| Profile / account flyout | `ScProfilePopup` (panel body only; you position and dismiss it) |
+| Small contextual help bubble | `ScInfoPopup` |
+| A menu of actions | `ScMenuOptions` rows in your own positioned container |
+| Mobile bottom sheet | no DS component yet — build it app-local, or use `ScModal` with `contentStyle` |
+
+### Don't confuse with
+
+| You may actually want | Not this |
+|---|---|
+| `ScModal` — centered, always-scrimmed, `z-index: 999`, no `zIndex` prop | `ScDrawer` is edge-anchored, `z-index: 10`, scrim opt-in |
+| `StreamoidSidebar` / `ScSidebar` — persistent app chrome | `ScDrawer` is a transient overlay |
+| Catalogix's `SideDrawer` — the *wrapper* with the house style baked in | `ScDrawer` is the bare DS primitive |
+
+---
+
+## 4. Why to use it
+
+- **Portalled, so it is actually fixed.** `createPortal(…, document.body)` makes the
+  panel viewport-anchored regardless of transformed or clipped ancestors — the
+  bug that kills every hand-rolled drawer.
+- **Dismissal is self-contained.** No dependency on the app's `OutsideClick`
+  helper: the component owns a `panelRef` + document `mousedown` + `keydown` pair,
+  added and torn down with `open`. Every DS consumer gets identical behaviour.
+- **The stacking problem has a real answer.** `zIndex` moves panel *and* backdrop
+  together (`zIndex` / `zIndex - 1`), which is the only reliable way to open a
+  drawer over another body-level overlay.
+- **Side symmetry is free.** `side` flips the anchor, the rounded corner pair *and*
+  the shadow direction in one prop; hand-rolling the mirror is where the shadow
+  usually ends up pointing the wrong way.
+- **Tokenised surface.** The panel background is `--alias-surface-subtleraised`
+  (or `surface-raised` in the house style), so it stays distinguishable from the
+  canvas in both themes.
+
+---
+
+## Gotchas
+
+**1. `backdrop` defaults to `false`.** This is deliberate legacy parity with
+Catalogix's old `SideDrawer`, but it means by default the page behind is neither
+dimmed nor blocked — clicks land on it (and, via `closeOnOutside`, close the
+drawer as a side effect). Pass `backdrop` for anything form-shaped.
+
+**2. The bare defaults are not the product's drawer.** Left alone you get **512px,
+`surface-subtleraised`, a 24px rounded inner edge, no backdrop, `z-index: 10`** —
+visibly different from every drawer already shipped. The shipped chrome is:
+
+```tsx
+// RIGHT — the house style; matches CreateStore / SideDrawer / all Taxonomy panes
+<ScDrawer
+  backdrop zIndex={70}
+  style={{ width: "480px", maxWidth: "100vw",
+           background: "var(--alias-surface-raised)", borderRadius: 0 }}
+  contentStyle={{ padding: 0 }}
+/>
+```
+
+**3. `.content` has `padding: 56px 96px 0 96px`.** 96px of horizontal padding and
+zero at the bottom. Unless your panel is a narrow centered form, pass
+`contentStyle={{ padding: 0 }}` and do padding yourself.
+
+**4. `overflow: hidden` twice — nothing scrolls, and popovers are clipped.** Both
+`.drawer` and `.content` clip. Long content is simply cut off, and any dropdown
+opened inside is truncated at the panel edge.
+
+```tsx
+// WRONG — form taller than the viewport is unreachable
+<ScDrawer><LongForm /></ScDrawer>
+
+// RIGHT — your own scroll container inside, and portal menus to body
+<ScDrawer contentStyle={{ padding: 0 }}>
+  <div style={{ height: "100%", overflowY: "auto", padding: 24 }}><LongForm /></div>
+</ScDrawer>
+<Select menuPortalTarget={document.body} styles={{ menuPortal: (b) => ({ ...b, zIndex: 9999 }) }} />
+```
+
+**5. `closeOnOutside` fights every other body-level portal.** The check is
+`!panelRef.current.contains(e.target)`. A `react-select` menu, date picker, tooltip
+or nested `ScModal` portalled to `<body>` is *not* inside the panel, so clicking it
+closes the drawer. Either keep those menus inside the panel DOM, or set
+`closeOnOutside={false}` and provide an explicit ✕.
+
+**6. `open` defaults to `true`.** Mounting it shows it. Mount conditionally or
+always pass `open`.
+
+**7. `style.zIndex` loses to the `zIndex` prop.** The component merges as
+`{ ...style, zIndex }`, so your inline z-index is overwritten whenever `zIndex` is
+set — and setting only `style={{ zIndex }}` moves the panel but leaves the backdrop
+at `9`, putting the scrim behind other content. Always use the prop.
+
+**8. `width: 512px` with no `max-width`.** On a narrow viewport the panel overflows
+horizontally. Every call site adds `maxWidth: "100vw"` — do the same.
+
+**9. `height: 100vh`, not `100dvh`.** On mobile Safari the panel runs under the URL
+bar, and it always ignores your host's fixed header. Override in `style` if that
+matters.
+
+**10. No dialog a11y.** No `role="dialog"`, no `aria-modal`, no focus trap, no focus
+restore, no body-scroll lock, and (unlike `ScModal`) no way to add aria via a spread
+— wrap your children in your own `role="dialog"` element.
+
+**11. No slide-in animation.** `open={false}` unmounts instantly; there is no
+transform transition. Animate inside `children` if you need motion.
+
+---
+
+## In the wild
+
+```jsx
+// catalogix/dashboard  app/components/CreateStore/index.jsx:409
+<ScDrawer
+  onClose={() => closeModal && closeModal()}
+  side="right"
+  backdrop
+  zIndex={70}
+  style={{
+    width: "480px",
+    maxWidth: "100vw",
+    background: "var(--alias-surface-raised)",
+    borderRadius: 0,
+  }}
+  contentStyle={{ padding: 0 }}
+>
+  <div className={styles["create-store"]}>
+    <div className={styles["drawer-header"]}>
+      <span className={styles["title"]}>{updateStore ? "Update Store" : "Create Store"}</span>
+      <SiconClose size={24} color="var(--alias-text-and-icons-primary)" onClick={closeModal} />
+    </div>
+    {/* … */}
+  </div>
+</ScDrawer>
+```
+
+---
+
+## Related
+
+- `ScModal` — centered blocking sibling; same portal/Escape contract, always scrimmed, no `zIndex` prop.
+- `ScProfilePopup` — the profile flyout panel body (no overlay of its own).
+- `ScAppSwitchPanel` — the app switcher; goes through `StreamoidSidebar`'s `switchPanel`, not a drawer.
+- `StreamoidSidebar` — persistent nav rail; the thing a drawer is *not*.
+- `ScButton` — the footer actions you compose inside.