@streamoid/ui 0.6.16 → 0.6.18

package/dist/docs/ScCatalogixStoreHeader.md

@@ -0,0 +1,246 @@
+---
+component: ScCatalogixStoreHeader
+package: "@streamoid/ui"
+category: tables
+status: stable
+renders: div
+tags: [table, header, column-headers, stores, store-listing, catalogix, list-view]
+related: [ScCatalogixStoreTableList, ScStoreCard, ScTableHeader, ScHeader, ScBeacon]
+do_not_confuse_with: [ScTableHeader, ScHeader, ScBillingHistoryHeader, ScBillingLogsTableHeader, ScReferralTableHeader, ScMobileTopNav]
+used_by: [catalogix]
+---
+
+# ScCatalogixStoreHeader
+
+**The column-header strip of the Catalogix stores table.** A shaded flex row of up to
+six uppercase muted labels — Store name, Status, Products, Assets, Created on,
+Created by — laid out on the exact widths its row sibling
+`ScCatalogixStoreTableList` uses. It is the *ruler*; the rows are the data.
+
+## TL;DR for agents
+
+- **Reach for it when:** you are rendering the Catalogix stores list view and need the
+  header above `ScCatalogixStoreTableList` rows.
+- **Don't reach for it when:** you need the members/users table header
+  (→ `ScTableHeader`), a single sortable column label (→ `ScHeader`), the grid/card
+  view of the same data (→ `ScStoreCard`), or any generic table (this component's
+  columns are the store schema, hard-wired).
+- **Three things that will bite you:**
+  1. `showAssets` / `showCreatedBy` default to **`true`** and must be set
+     **identically on the header and every row** or the columns shear apart.
+  2. The labels are `text-transform: uppercase`, so whatever string you pass renders
+     shouty. Pass sentence case; the CSS does the rest.
+  3. It is **not a `<table>`** — no `role="table"`, no `columnheader`, no `scope`.
+     Screen readers get six unrelated spans.
+
+---
+
+## 1. How to use it
+
+### Import
+
+```tsx
+import { ScCatalogixStoreHeader, ScCatalogixStoreTableList } from "@streamoid/ui";
+import "@streamoid/ui/dist/index.css"; // once, at your app root
+```
+
+### Minimal usage
+
+Every prop has a default that is already the intended English copy, so the bare call
+is the idiomatic one:
+
+```tsx
+<ScCatalogixStoreHeader />
+```
+
+### Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `storeNameLabel` | `string` | `"Store name"` | First column. Flexes to fill (`flex: 1; min-width: 0`). |
+| `statusLabel` | `string` | `"Status"` | Fixed `7.5rem`. |
+| `productsLabel` | `string` | `"Products"` | Fixed `6rem`. |
+| `assetsLabel` | `string` | `"Assets"` | Fixed `6rem`. Only rendered when `showAssets`. |
+| `createdOnLabel` | `string` | `"Created on"` | Fixed `7.5rem`. |
+| `createdByLabel` | `string` | `"Created by"` | Fixed `10rem`. Only rendered when `showCreatedBy`. |
+| `showAssets` | `boolean` | `true` | ⚠️ Defaults on. Must match the rows' `showAssets`. |
+| `showCreatedBy` | `boolean` | `true` | ⚠️ Defaults on. Must match the rows' `showCreatedBy`. |
+| `className` | `string` | – | Appended after the internal class. |
+| `...props` | `HTMLAttributes<HTMLDivElement>` | – | Spread onto the root div (`style`, `aria-*`, `data-*`, `onClick`). |
+
+### The column contract (shared with `ScCatalogixStoreTableList`)
+
+| Column | Header prop | Row prop | Width | Gated by |
+|---|---|---|---|---|
+| Store name | `storeNameLabel` | `storeName` | `flex: 1`, `min-width: 0` | always |
+| Status | `statusLabel` | `status` + `statusTone` | `7.5rem` | always |
+| Products | `productsLabel` | `products` | `6rem` | always |
+| Assets | `assetsLabel` | `assets` | `6rem` | `showAssets` |
+| Created on | `createdOnLabel` | `createdOn` | `7.5rem` | always |
+| Created by | `createdByLabel` | `createdBy` | `10rem` | `showCreatedBy` |
+
+Both components use `gap: 1.5rem` and `padding-inline: 1rem`, which is what makes the
+two line up. Change neither via `className` unless you change both.
+
+### Recipes
+
+```tsx
+// The whole list view
+<div>
+  <ScCatalogixStoreHeader />
+  {stores.map((s) => (
+    <ScCatalogixStoreTableList key={s._id} storeName={s.name} /* … */ />
+  ))}
+</div>
+
+// Four-column variant — the flag must be repeated on every row
+<ScCatalogixStoreHeader showAssets={false} showCreatedBy={false} />
+{stores.map((s) => (
+  <ScCatalogixStoreTableList key={s._id} showAssets={false} showCreatedBy={false} storeName={s.name} />
+))}
+
+// Relabelling a column (rendered uppercase regardless of the case you pass)
+<ScCatalogixStoreHeader productsLabel="SKUs" createdOnLabel="Added" />
+
+// Make it sticky — the DS does not do this
+<ScCatalogixStoreHeader className={styles.stickyHeader} />
+/* .stickyHeader { position: sticky; top: 0; z-index: 1; } */
+```
+
+---
+
+## 2. Where to use it
+
+- **Catalogix → Stores listing, list view.** The screen has a grid view
+  (`ScStoreCard` tiles) and a list view; this header opens the list view and every
+  store below it is a `ScCatalogixStoreTableList`.
+- Nothing else should use it: the column set *is* the store schema. For any other
+  table, compose `ScHeader` cells yourself or use the domain-specific header
+  (`ScBillingHistoryHeader`, `ScBillingLogsTableHeader`, `ScReferralTableHeader`,
+  `ScTableHeader`).
+
+It composes nothing — six spans and a background.
+
+---
+
+## 3. When to use it
+
+### Use it when
+
+- You are rendering **stores** in a table, and want the header to stay pinned to the
+  same widths as the DS row component.
+- You want the "shaded header strip / transparent rows" treatment that the rest of
+  Catalogix's list views use.
+
+### Don't use it — reach for this instead
+
+| Situation | Use instead |
+|---|---|
+| Users / members / invites table header ("User, Role, Access, Invited by") | `ScTableHeader` |
+| One sortable column label with an asc/desc chevron | `ScHeader` |
+| Billing history table header | `ScBillingHistoryHeader` |
+| Credit/usage logs table header | `ScBillingLogsTableHeader` |
+| Referral program table header | `ScReferralTableHeader` |
+| The same store data as cards in a grid | `ScStoreCard` |
+| A page title bar with actions | `ScHeader` is *not* that either — use your page layout + `ScButton` |
+| A genuinely generic N-column table | Nothing here fits; the widths are hard-coded. Build it, or extend this component in the DS. |
+
+### Don't confuse with
+
+| You may actually want | Not this |
+|---|---|
+| `ScTableHeader` — the **members** table header; hardcodes "User / Role / Access / Invited by" and internally renders four `ScHeader`s, with a `type="pending"` variant that adds an action column | `ScCatalogixStoreHeader` is the **stores** header and takes label props instead |
+| `ScHeader` — a *single* column-label cell with sort state (`state="up" \| "down" \| "none"`) | This is the whole strip, and it has **no sort affordance at all** |
+| `ScMobileTopNav` — the mobile app bar | Unrelated; "header" here means column headers |
+
+---
+
+## 4. Why to use it
+
+- **It is the alignment contract.** The six widths (`flex:1`, `7.5`, `6`, `6`, `7.5`,
+  `10` rem), the `1.5rem` gap and the `1rem` inline padding exist in exactly two
+  files — this one and `ScCatalogixStoreTableList`. Hand-rolling the header is how
+  store tables drift out of alignment when a column is added.
+- **Two-tone that survives light mode.** The header paints
+  `--alias-fill-neutral-neutral` while rows stay transparent, so the strip reads as a
+  header in both themes instead of relying on a grey that collapses to white.
+- **Label typography is already the DS's** `text-xs` muted + uppercase, matching every
+  other table header in the products.
+- **Column gating in one prop.** `showAssets` / `showCreatedBy` let one component
+  serve both the full schema and the reduced one the API can actually populate today.
+
+---
+
+## Gotchas
+
+**1. `showAssets` / `showCreatedBy` default to `true` and must match the rows.** Set
+them on the header only and every row's data slides one column left.
+
+```tsx
+// WRONG — header has 4 columns, rows still have 6
+<ScCatalogixStoreHeader showAssets={false} showCreatedBy={false} />
+{stores.map((s) => <ScCatalogixStoreTableList key={s._id} storeName={s.name} />)}
+
+// RIGHT — same flags on both
+<ScCatalogixStoreHeader showAssets={false} showCreatedBy={false} />
+{stores.map((s) => (
+  <ScCatalogixStoreTableList key={s._id} showAssets={false} showCreatedBy={false} storeName={s.name} />
+))}
+
+// ALSO RIGHT — keep the columns, blank the data (what Catalogix actually does)
+<ScCatalogixStoreHeader />
+{stores.map((s) => (
+  <ScCatalogixStoreTableList key={s._id} storeName={s.name} assets="" createdBy="" />
+))}
+```
+
+**2. Labels are force-uppercased.** `text-transform: uppercase` on every label. Pass
+`"Store name"`, not `"STORE NAME"` — and don't expect a lowercase label to be
+possible without a `className` override.
+
+**3. Every label defaults to real English copy.** There is no required prop and no
+placeholder junk, which is convenient — but it also means a typo'd prop name
+(`assetLabel`) silently renders the default. Check spelling against the table.
+
+**4. It is not a table.** No `role="table"`/`row`/`columnheader`, no `<th>`, no
+`scope`, no `aria-sort`. Cells in the rows are not associated with these labels for
+assistive tech. If accessibility matters on this screen, add the roles yourself via
+`...props` on both components, or wrap in a real `<table>`.
+
+**5. No sorting.** Unlike `ScHeader`, there is no chevron, no `state`, and no click
+target per column. Sortable store columns need a different component.
+
+**6. Not sticky, and it doesn't own the scroll.** Long lists scroll the header away.
+Add `position: sticky; top: 0` via `className` and give it a `z-index` (the rows are
+`position: relative`, so without one they can paint over it).
+
+**7. Long labels are clipped without a tooltip.** Each label is `nowrap` +
+`overflow: hidden` + `text-overflow: ellipsis` at a fixed width, and there is **no
+`title` attribute**. `createdByLabel="Created by (workspace admin)"` just disappears
+past `10rem`.
+
+**8. No bottom border.** The header separates from the first row only by its
+background and padding; the 1px rules in the list come from the rows themselves.
+
+---
+
+## In the wild
+
+```jsx
+// catalogix/dashboard  app/containers/StoresListing/index.jsx:375
+<ScCatalogixStoreHeader />
+```
+
+Rendered bare — all six columns — directly above the row loop at
+`app/containers/StoresListing/index.jsx:379`, where each row passes `assets=""` and
+`createdBy=""` to keep the column slots aligned while those two values are unavailable
+(Gotcha 1, third form).
+
+---
+
+## Related
+
+- `ScCatalogixStoreTableList` — the row sibling; the two share one width contract and must be configured together.
+- `ScStoreCard` — the grid-view card for the same store data (and the one that actually renders an `ScBeacon` status dot).
+- `ScTableHeader` / `ScHeader` — the members-table header and the single sortable column cell.
+- `ScBillingHistoryHeader` / `ScBillingLogsTableHeader` / `ScReferralTableHeader` — the other domain-specific header/row pairs, same pattern.

package/dist/docs/ScCatalogixStoreTableList.md

@@ -0,0 +1,316 @@
+---
+component: ScCatalogixStoreTableList
+package: "@streamoid/ui"
+category: tables
+status: stable
+renders: div
+tags: [table, row, table-row, stores, store-listing, catalogix, list-view, status, tone]
+related: [ScCatalogixStoreHeader, ScStoreCard, ScBeacon, ScTableList, ScBillingHistoryTableList]
+do_not_confuse_with: [ScTableList, ScTableListMobile, ScStoreCard, ScBillingHistoryTableList, ScBillingLogsTableList, ScReferralTableList]
+used_by: [catalogix]
+---
+
+# ScCatalogixStoreTableList
+
+**One store row in the Catalogix stores table.** A transparent flex row with a 1px
+bottom rule: the store name flexing to fill, a tone-coloured status word, then
+Products / Assets / Created on / Created by on fixed widths that match
+`ScCatalogixStoreHeader` exactly.
+
+## TL;DR for agents
+
+- **Reach for it when:** you're rendering the Catalogix stores list view, one row per
+  store, under a `ScCatalogixStoreHeader`.
+- **Don't reach for it when:** you want the same data as cards (→ `ScStoreCard`), a
+  users/members row (→ `ScTableList`), or any table whose columns aren't the store
+  schema (the widths are hard-coded).
+- **Four things that will bite you:**
+  1. **Every prop defaults to Figma demo data** — including a store called
+     `"Farfetch - Spring Season 2026 - Topwear"` and a person named
+     `"Chris Hemsworth"`. `<ScCatalogixStoreTableList />` renders a fake store that
+     looks completely real.
+  2. `showAssets` / `showCreatedBy` default to `true` and must match the header's.
+  3. `statusTone` only **tints the status text**. No dot is rendered — this row does
+     *not* contain an `ScBeacon` (`ScStoreCard` does).
+  4. No hover, no cursor, no click semantics. The whole row-is-clickable behaviour is
+     yours to add.
+
+---
+
+## 1. How to use it
+
+### Import
+
+```tsx
+import { ScCatalogixStoreHeader, ScCatalogixStoreTableList } from "@streamoid/ui";
+import "@streamoid/ui/dist/index.css"; // once, at your app root
+```
+
+### Minimal usage
+
+There is no required prop, so "minimal" is also the most dangerous call. Always pass
+the real data:
+
+```tsx
+<ScCatalogixStoreTableList
+  storeName={store.name}
+  status="All Active"
+  statusTone="success"
+  products="1240"
+  createdOn="9th Nov 2025"
+  assets=""
+  createdBy=""
+/>
+```
+
+### Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `storeName` | `string` | `"Farfetch - Spring Season 2026 - Topwear"` | ⚠️ Demo default. `flex: 1; min-width: 0`; truncates with ellipsis **and** gets a `title` tooltip. |
+| `status` | `string` | `"Need Attention"` | ⚠️ Demo default. Free text — the component never derives it. Fixed `7.5rem`. Rendered at `text-md` (bigger than every other cell). |
+| `statusTone` | `ScBeaconTone` = `"success"` \| `"warning"` \| `"error"` \| `"neutral"` | `"error"` | ⚠️ Demo default. Sets the status **text colour** only. An unknown value falls back to the `neutral` colour. |
+| `products` | `string` | `"1240"` | ⚠️ Demo default. **String, not number** — format/`String()` it yourself. Fixed `6rem`. |
+| `assets` | `string` | `"27830"` | ⚠️ Demo default. Only rendered when `showAssets`. Fixed `6rem`. |
+| `createdOn` | `string` | `"Nov 9th, 2025"` | ⚠️ Demo default. Pre-formatted string; no date parsing or locale handling. Fixed `7.5rem`. |
+| `createdBy` | `string` | `"Chris Hemsworth"` | ⚠️ Demo default — **a plausible human name**. Only rendered when `showCreatedBy`. Fixed `10rem`. |
+| `showAssets` | `boolean` | `true` | ⚠️ Defaults on. Must match the header's `showAssets`. |
+| `showCreatedBy` | `boolean` | `true` | ⚠️ Defaults on. Must match the header's `showCreatedBy`. |
+| `className` | `string` | – | Appended after the internal class. |
+| `...props` | `HTMLAttributes<HTMLDivElement>` | – | `onClick`, `role`, `tabIndex`, `onKeyDown`, `style`, `data-*` land on the root div. |
+
+### Status tone → colour
+
+| `statusTone` | Token | The copy Catalogix pairs with it |
+|---|---|---|
+| `success` | `--alias-text-and-icons-success` | "All Active" |
+| `warning` | `--alias-text-and-icons-warning` | "No Products" |
+| `error` | `--alias-text-and-icons-error` | "Need Attention" |
+| `neutral` | `--alias-text-and-icons-tertiary` | "Status unavailable" |
+
+(The copy lives in the host — `STATUS_COPY` in
+`app/containers/StoresListing/storeMeta.js`. The DS only supplies the colour.)
+
+### The column contract (shared with `ScCatalogixStoreHeader`)
+
+| Column | Row prop | Header prop | Width | Gated by |
+|---|---|---|---|---|
+| Store name | `storeName` | `storeNameLabel` | `flex: 1`, `min-width: 0` | always |
+| Status | `status` + `statusTone` | `statusLabel` | `7.5rem` | always |
+| Products | `products` | `productsLabel` | `6rem` | always |
+| Assets | `assets` | `assetsLabel` | `6rem` | `showAssets` |
+| Created on | `createdOn` | `createdOnLabel` | `7.5rem` | always |
+| Created by | `createdBy` | `createdByLabel` | `10rem` | `showCreatedBy` |
+
+Both use `gap: 1.5rem` and `padding-inline: 1rem`; that's the whole alignment
+mechanism. Rows add `padding-block: 1.25rem`, the header `0.75rem`.
+
+### Recipes
+
+```tsx
+// The full list view, driven by one derived-metadata helper
+<div>
+  <ScCatalogixStoreHeader />
+  {stores.map((store) => {
+    const meta = getStoreMeta(store);           // { statusLabel, tone, productCount, dateLabel }
+    return (
+      <ScCatalogixStoreTableList
+        key={store._id}
+        storeName={store.name}
+        status={meta.statusLabel}
+        statusTone={meta.tone}
+        products={String(meta.productCount)}    // must be a string
+        createdOn={meta.dateLabel}
+        assets=""                               // keep the slot, hide the value
+        createdBy=""
+      />
+    );
+  })}
+</div>
+
+// Make the row navigable (the DS gives you no click affordance)
+<ScCatalogixStoreTableList
+  storeName={store.name}
+  role="button"
+  tabIndex={0}
+  onClick={() => openStore(store)}
+  onKeyDown={(e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openStore(store);
+    }
+  }}
+  className={styles.listRow}   /* your cursor:pointer + hover background */
+/>
+
+// Four-column variant — repeat the flags on the header too
+<ScCatalogixStoreTableList showAssets={false} showCreatedBy={false} storeName={store.name} />
+```
+
+---
+
+## 2. Where to use it
+
+- **Catalogix → Stores listing, list view.** One row per store under
+  `ScCatalogixStoreHeader`; clicking a row routes to
+  `/dashboard/:workspaceId/stores/:storeId`. The grid view of the same screen renders
+  `ScStoreCard` instead, and both are fed from the same `deriveStoreMeta` helper so the
+  two views stay in lock-step.
+- Nowhere else. The columns are the store schema.
+
+It composes nothing — six spans. It imports `ScBeaconTone` as a **type only**; there
+is no `ScBeacon` in the render tree.
+
+---
+
+## 3. When to use it
+
+### Use it when
+
+- You are listing **stores** in a table and want rows that line up with
+  `ScCatalogixStoreHeader` for free.
+- The status is a **short word or phrase** you've already derived, with one of four
+  tones.
+
+### Don't use it — reach for this instead
+
+| Situation | Use instead |
+|---|---|
+| The same store data as cards in a grid | `ScStoreCard` (name + beacon + product count + date) |
+| A status **dot** rather than coloured text | `ScBeacon` — compose it into your own row, or use `ScStoreCard` |
+| Users / members / invites row | `ScTableList` (+ `ScTableHeader`) |
+| Mobile-width store list | `ScStoreCard` in a single column — the six columns need ~46.5rem (~745px) before the name column is squeezed to nothing, and there is no mobile twin of this row |
+| Billing history row | `ScBillingHistoryTableList` |
+| Credit/usage logs row | `ScBillingLogsTableList` |
+| Referral program row | `ScReferralTableList` |
+| A generic N-column data row | Nothing here fits; widths are hard-coded. Compose your own or extend the DS. |
+| A selectable value row in a list | `ScValueMappingL1` |
+
+### Don't confuse with
+
+| You may actually want | Not this |
+|---|---|
+| `ScStoreCard` — the **card** for one store: `storeName`, `noOfProducts`, `dateCreated`, `tone`, and a real `ScBeacon` dot with an `ScHDivider` | `ScCatalogixStoreTableList` is the **row**, has no beacon and no divider, and takes `products`/`createdOn` (not `noOfProducts`/`dateCreated`) |
+| `ScTableList` — the generic/members table row | Different columns entirely; not width-compatible with `ScCatalogixStoreHeader` |
+| `ScTableListMobile` — the mobile twin of `ScTableList` | There is **no** mobile twin of this component |
+| `ScBillingHistoryTableList` / `ScBillingLogsTableList` / `ScReferralTableList` | Same header+row pattern, different domains; don't mix a row from one pair with a header from another |
+
+`ScStoreCard` vs `ScCatalogixStoreTableList` is the grid-view/list-view pair of one
+screen. Both take a `ScBeaconTone`, but the card calls it `tone` and the row calls it
+`statusTone` — copying props between them will fail silently (unknown props are
+spread onto the div as attributes).
+
+---
+
+## 4. Why to use it
+
+- **Alignment with the header is guaranteed.** The widths, gap and inline padding live
+  in exactly two CSS modules; using both components means a new column ships to both
+  at once instead of desynchronising.
+- **Status colour is tokenised**, so "Need attention" is the same red as every other
+  error in the product and stays AA-legible in light mode.
+- **The store name truncates properly** — `flex: 1; min-width: 0`, ellipsis, and a
+  `title` tooltip carrying the full name, which is what long merchandising store names
+  need.
+- **Column gating in one prop** lets one row component serve the full schema and the
+  reduced set the API can populate today.
+
+---
+
+## Gotchas
+
+**1. Every prop is optional and every default is demo data.** Rendering the component
+bare produces a completely believable fake store — a real brand name, a real-sounding
+person, and `statusTone="error"`. A typo'd prop name (`storename`) doesn't error; it
+silently shows the Figma placeholder.
+
+```tsx
+// WRONG — ships "Farfetch - Spring Season 2026 - Topwear" / "Chris Hemsworth"
+<ScCatalogixStoreTableList storename={store.name} />
+
+// RIGHT
+<ScCatalogixStoreTableList storeName={store.name} createdBy={store.owner ?? ""} />
+```
+
+**2. `statusTone` renders no dot.** It only colours the status text. The type is
+imported from `ScBeacon` purely for the union, which reads as if a beacon is included.
+If you need the dot, compose `ScBeacon` yourself or use `ScStoreCard`.
+
+**3. `showAssets` / `showCreatedBy` must match the header.** They default to `true` on
+both; set them on one side only and every subsequent column shifts. The Catalogix
+pattern is to keep all six columns and pass `assets=""` / `createdBy=""`.
+
+**4. Numbers are strings.** `products` and `assets` are `string`. Passing a number is a
+type error in TS and unformatted in JS — no thousands separators, no locale.
+`String(count)` or `count.toLocaleString()` at the call site.
+
+**5. Dates are pre-formatted strings.** `createdOn` is printed verbatim. Note the
+default (`"Nov 9th, 2025"`) is *not* the format the Catalogix design uses
+(`"9th Nov 2025"`, from the host's own `formatStoreDate`) — do not copy the default as
+a format spec.
+
+**6. No click affordance at all.** No `cursor: pointer`, no `:hover` background, no
+`role`, no `tabIndex`. If rows are navigable you must add all of it (see Recipes); the
+host also supplies its own hover style through `className`.
+
+**7. The bottom border is unconditional.** `border-width: 0 0 0.0625rem 0` with no
+`:last-child` rule, so the last row draws a trailing rule under the table. Strip it on
+the final row via `className` if the design doesn't want it.
+
+**8. `status` is rendered at `text-md`, every other cell at `text-sm`.** The status
+word is visibly larger than the numbers beside it. That is intentional Figma parity,
+not a bug — don't "fix" it per-screen with a `className`.
+
+**9. Only `storeName` gets a tooltip.** The other cells are `nowrap` +
+`overflow: hidden` + ellipsis with **no `title`**, so a long `createdBy` is clipped at
+`10rem` with no way to read it.
+
+**10. No responsive behaviour.** The five fixed cells (`7.5 + 6 + 6 + 7.5 + 10`rem)
+are all `flex-shrink: 0`, plus five `1.5rem` gaps and `1rem` inline padding — so
+below ~`46.5rem` (~745px) the only flexible column, `storeName`, is squeezed to
+nothing. Catalogix wraps the table in `.list { overflow-x: auto }` so it scrolls
+sideways instead. There is no `*Mobile` twin — switch to `ScStoreCard` for narrow
+viewports.
+
+---
+
+## In the wild
+
+```jsx
+// catalogix/dashboard  app/containers/StoresListing/index.jsx:379
+<ScCatalogixStoreTableList
+  key={store._id}
+  className={styles["list-row"]}
+  storeName={store.name}
+  status={meta.statusLabel}
+  statusTone={meta.tone}
+  products={String(meta.productCount)}
+  createdOn={meta.dateLabel}
+  assets=""
+  createdBy=""
+  role="button"
+  tabIndex={0}
+  onClick={() => openStore(store)}
+  onKeyDown={(e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openStore(store);
+    }
+  }}
+/>
+```
+
+`meta` comes from `deriveStoreMeta` (`app/containers/StoresListing/storeMeta.js`),
+which also feeds the grid view's `ScStoreCard` — the host keeps status/tone derivation
+in one place precisely because the two DS components take it under different prop
+names.
+
+---
+
+## Related
+
+- `ScCatalogixStoreHeader` — the header sibling; the two share one width contract and must be configured together.
+- `ScStoreCard` — the grid-view card for the same data; it *does* render an `ScBeacon`.
+- `ScBeacon` — the status dot, if you want it in a row.
+- `ScTableList` / `ScTableHeader` / `ScTableListMobile` — the generic/members table family.
+- `ScBillingHistoryTableList` / `ScBillingLogsTableList` / `ScReferralTableList` — the other domain header+row pairs.