@streamoid/ui 0.6.28 → 0.6.30

package/dist/docs/AGENTS.md

@@ -1,6 +1,6 @@
 # @streamoid/ui — component router (for AI agents)
 
-125 components. Full docs for each live beside this file as `<ScName>.md`;
+126 components. Full docs for each live beside this file as `<ScName>.md`;
 the same metadata is machine-readable in `components.json`.
 
 **How to use this file:** scan for the job you need below, then open only that
@@ -40,7 +40,7 @@ theme-aware (dark on `:root`, light override) — never hardcode a colour.
 
 - **`ScAppcardLogos`** — use when you need a product's *name as artwork* — inside a card, chip or pill where a hover/theme colour change should recolour the mark for free.
 - **`ScStreamoidWordmark`** — use when you need the *Streamoid* wordmark or mascot, or the *CXO Copilot* logo, as a bare mark you position yourself — typically as the `wordmark` node you hand to `ScSideBarLogoUnit`.
-  - also documented here: `ScStreamoidMascot`, `ScCxoCopilotLogo`
+  - also documented here: `ScCxoWordmark`, `ScStreamoidMascot`, `ScCxoCopilotLogo`
 - **`ScStrLogo`** _(legacy)_ — use when you specifically need the **combined** wordmark + mascot lockup at large size (a splash / auth / print-ish surface), and you are willing to size it yourself. That combination exists nowhere else in the library.
 
 ## cards
@@ -104,6 +104,8 @@ theme-aware (dark on `:root`, light override) — never hardcode a colour.
 
 - **`ScHDivider`** — use when you need a horizontal rule between stacked sections, rows, or card regions.
 - **`ScHeader`** — use when you are building a bespoke table header row and want the column captions to match every other table in the product.
+- **`ScPanelResizeHandle`** — Drag-to-resize edge for a side panel — a continuous width, remembered.
+  - also documented here: `useStreamoidPanelWidth`, `clampPanelWidth`, `resolvePanelResize`, `resolvePanelResizeKey`, `PANEL_RESIZE_STEP_PX`
 - **`ScSettingsNav`** _(legacy)_ — use when you need a static visual placeholder of the settings nav (a design mock, a screenshot, a Figma-parity check).
 - **`ScSettingsTabComp`** — use when you need a settings-style tab strip — Profile / Workspace, or a modal's section tabs — where the active tab is marked by an underline.
 - **`ScTabComp`** — use when you need one segment of a compact 2–5 way view toggle — theme switcher, grid/list, Active/Pending, Fast/Pro.
@@ -210,7 +212,7 @@ theme-aware (dark on `:root`, light override) — never hardcode a colour.
 | `ScBillingLogsTableHeader` | `ScBillingHistoryHeader`, `ScHeader`, `ScTableHeader` |
 | `ScBillingLogsTableList` | `ScBillingHistoryTableList`, `ScTableList`, `ScBillingLogsTableHeader` |
 | `ScBillingHistoryTableList` | `ScBillingLogsTableList`, `ScTableList`, `InvoiceHistoryMobile` |
-| `ScStreamoidWordmark` | `ScStrLogo`, `ScLogoUnit`, `ScAppcardLogos`, `ProductWordmark`, `ScSideBarLogoUnit`, `ScCxoCopilotLogo` |
+| `ScStreamoidWordmark` | `ScStrLogo`, `ScLogoUnit`, `ScAppcardLogos`, `ProductWordmark`, `ScSideBarLogoUnit`, `ScCxoCopilotLogo`, `ScCxoWordmark` |
 | `ScBriefCard` | `ScQuickPrompt`, `ScAppCardV3`, `ScDefaultCard`, `ScAppCardForCopilot` |
 | `ScButton` | `ScFieldButton`, `ScOnlyIcon`, `ScPopUpMenu` |
 | `ScCalendar` | `ScCalendarDateComps`, `ScCounter`, `ScPagination` |
@@ -244,6 +246,7 @@ theme-aware (dark on `:root`, light override) — never hardcode a colour.
 | `ScOnlyIcon` | `ScOnlyField`, `ScButton`, `ScFieldButton`, `ScSidebarIcons` |
 | `ScPagination` | `ScCounter`, `ScTabs`, `ScOnlyField` |
 | `ScPairtext` | `ScCheckField`, `ScCheckbox`, `ScRadio`, `ScSelection`, `ScSelectionPill`, `ScMenuOptions` |
+| `ScPanelResizeHandle` | `ScSidebarResizeHandle`, `ScVDivider` |
 | `ScPlanCard` | `ScPlanDetailsCard`, `ScPlanDetailsCardMobile`, `ScPlanComparison`, `ScAppCard` |
 | `ScPlanDetailsCard` | `ScPlanCard`, `ScPlanDetailsCardMobile`, `ScCreditsUsageCard`, `ScPlanComparison` |
 | `ScPlanDetailsCardMobile` | `ScPlanDetailsCard`, `ScPlanCard`, `ScPlanComparison`, `ScCreditsUsageCardMobile` |

package/dist/docs/ScAppSwitchPanel.md

@@ -5,7 +5,7 @@ package: "@streamoid/ui"
 category: sidebar
 status: stable
 renders: div
-tags: [app-switcher, switch-app, product-switcher, cross-product, tactix, artifax, photogenix, catalogix, streamoid, wordmark]
+tags: [app-switcher, switch-app, product-switcher, cross-product, cxo, tactix, artifax, photogenix, catalogix, streamoid, wordmark]
 related: [ScSideBarLogoUnit, StreamoidSidebar, ScSidebarSwitchMenu, ScWorkspaceSwitchCard]
 do_not_confuse_with: [ScSidebarSwitchMenu, StreamoidWorkspaceSwitcher, ScWorkspaceSwitchCard, ScAppListingCard, ScAppCard]
 used_by: [cxo, photogenix, catalogix, artifax]
@@ -34,7 +34,8 @@ card, no border and no background: the surrounding sidebar or flyout supplies th
      planners"), not `description` and not the product `name`. Do not copy that
      map into a host.
   3. Matching is a **substring** test over `` `${key} ${name}`.toLowerCase() ``. A key
-     containing `"cxo"` or `"streamoid"` gets the Streamoid wordmark.
+     containing `"cxo"` or `"streamoid"` gets the **CXO** wordmark — but the four
+     product names are matched first, so `"Streamoid Catalogix"` is Catalogix.
   4. It does **not** exclude the current app. That's the host's job.
 
 ---
@@ -98,13 +99,19 @@ import "@streamoid/ui/dist/index.css"; // once, at your app root
 
 | Order | Matches (substring, case-insensitive, on `key + " " + name`) | Renders |
 |---|---|---|
-| 1 | `tactix` | Tactix wordmark + "for buyers and planners" |
-| 2 | `artifax`, `design studio` | Artifax wordmark + "for design and development" |
-| 3 | `photogenix`, `photo studio` | Photogenix wordmark + "for studio and content" |
-| 4 | `catalogix`, `catalog studio` | Catalogix wordmark + "for catalog and ecommerce" |
-| 5 | `streamoid`, `cxo` | Streamoid wordmark + "for CXOs" |
+| 1 | `cxo`, `streamoid` | CXO wordmark + "for CXOs" |
+| 2 | `tactix` | Tactix wordmark + "for buyers and planners" |
+| 3 | `artifax`, `design studio` | Artifax wordmark + "for design and development" |
+| 4 | `photogenix`, `photo studio` | Photogenix wordmark + "for studio and content" |
+| 5 | `catalogix`, `catalog studio` | Catalogix wordmark + "for catalog and ecommerce" |
 | last | anything else | `name` (16px semibold) + host `description` (14px tertiary) |
 
+**CXO leads the display order but trails the match order.** It is the hub every
+other app hands back to, so it renders first; it also answers to the company name
+`"streamoid"`, the one loose token in the table, so the four product names get
+first refusal (`MATCH_PRECEDENCE` in the source). Do not collapse the two orders
+back into one array.
+
 ### Recipes
 
 ```tsx
@@ -157,8 +164,8 @@ createPortal(
 
 ### Use it when
 
-- The user is moving between **Streamoid products** (Tactix / Artifax / Photogenix /
-  Catalogix / Streamoid CXO).
+- The user is moving between **Streamoid products** (CXO / Tactix / Artifax /
+  Photogenix / Catalogix).
 - You want the canonical order and the embedded brand wordmarks for free.
 - The list lives inside chrome you already own (a sidebar card, a flyout, a popover).
 
@@ -223,9 +230,9 @@ the canonical tagline. CMS copy like "Design generation" is discarded. Pass
 ```
 
 **3. Matching is a loose substring test on `key + " " + name`.** `"cxo"` and
-`"streamoid"` both map to the Streamoid wordmark, `"design studio"` maps to Artifax,
+`"streamoid"` both map to the CXO wordmark, `"design studio"` maps to Artifax,
 `"photo studio"` to Photogenix, `"catalog studio"` to Catalogix. An internal key like
-`"cxo-insights"` will render the **Streamoid** wordmark, not a text row.
+`"cxo-insights"` will render the **CXO** wordmark, not a text row.
 
 **4. The current app is not excluded.** The source comment is explicit — "The current
 app is expected to be excluded by the host." Forget the filter and the sidebar offers

package/dist/docs/ScAppcardLogos.md

@@ -4,7 +4,7 @@ package: "@streamoid/ui"
 category: brand
 status: stable
 renders: span[role="img"]
-tags: [wordmark, logo, brand, product, tactix, artifax, photogenix, catalogix, svg, currentColor]
+tags: [wordmark, logo, brand, product, cxo, tactix, artifax, photogenix, catalogix, svg, currentColor]
 related: [ScAppCardForCopilot, ProductWordmark, ProductCollapsedMark, ScStreamoidWordmark, ScStrLogo]
 do_not_confuse_with: [ProductWordmark, ScStreamoidWordmark, ScStreamoidMascot, ScCxoCopilotLogo, ScAppCard]
 used_by: [agent]
@@ -13,23 +13,25 @@ required_props: [product]
 
 # ScAppcardLogos
 
-**One single-colour product wordmark, 14px tall.** Inline SVG for Tactix, Artifax,
-Photogenix or Catalogix, filled with `currentColor` so the parent's text colour
-paints it. Ships the type `AppcardProduct` used by `ScAppCardForCopilot`.
+**One single-colour product wordmark, 14px tall.** Inline SVG for CXO, Tactix,
+Artifax, Photogenix or Catalogix, filled with `currentColor` so the parent's text
+colour paints it. Ships the type `AppcardProduct` used by `ScAppCardForCopilot`.
 
 ## TL;DR for agents
 
 - **Reach for it when:** you need a product's *name as artwork* — inside a card,
   chip or pill where a hover/theme colour change should recolour the mark for free.
 - **Don't reach for it when:** you want the sidebar-header wordmark
-  (→ `ProductWordmark` / `ProductCollapsedMark`), the Streamoid brand
+  (→ `ProductWordmark` / `ProductCollapsedMark`), the *company* brand
   (→ `ScStreamoidWordmark` / `ScStreamoidMascot`), the CXO copilot mark
   (→ `ScCxoCopilotLogo`), or an app icon plus a typed name (→ `ScAppCard`).
 - **Four things that will bite you:**
-  1. `product` is **required** and the set is exactly four keys — `tactix`,
-     `artifax`, `photogenix`, `catalogix`. **There is no Streamoid or CXO wordmark.**
-  2. Widths differ per product (56 / 54 / 88 / 72 px at a fixed 14px height), so a
-     row of them is **not** visually uniform.
+  1. `product` is **required** and the set is exactly five keys — `cxo`,
+     `tactix`, `artifax`, `photogenix`, `catalogix`. **There is no Streamoid
+     wordmark here** — that is the company mark, `ScStreamoidWordmark` in SC-Brand.
+  2. Widths differ per product (35 / 56 / 54 / 88 / 72 px at a fixed 14px height),
+     so a row of them is **not** visually uniform. `cxo` is a three-letter mark and
+     by far the narrowest.
   3. It sets `role="img"` with **`aria-label={product}` — the raw lowercase key**
      ("photogenix"), not a display name.
   4. The SVG is injected with `dangerouslySetInnerHTML`. Safe here (the markup is a
@@ -137,7 +139,7 @@ Generated from Figma `AppcardLogos` (node `6383:9997`); the SVG strings live in
 | You may actually want | Not this |
 |---|---|
 | `ProductWordmark` — the sidebar wordmark set, sized for the shell header | `ScAppcardLogos` is the 14px *appcard* set; different sizes, different Figma source |
-| `ScStreamoidWordmark` — the company mark | This set has **no** Streamoid entry |
+| `ScStreamoidWordmark` — the *company* mark | This set has no Streamoid entry. `cxo` here is the *product* mark — the two are different artwork and are not interchangeable |
 | `ScAppCard` — icon + name + subtitle row | This is only the name, as vector art |
 
 ---

package/dist/docs/ScPanelResizeHandle.md

@@ -0,0 +1,80 @@
+---
+component: ScPanelResizeHandle
+also_exports: [useStreamoidPanelWidth, clampPanelWidth, resolvePanelResize, resolvePanelResizeKey, PANEL_RESIZE_STEP_PX]
+package: "@streamoid/ui"
+category: layout
+status: stable
+renders: div[role="separator"]
+tags: [resize, panel, drag, width, splitter, separator, sidebar, chat]
+related: [ScSidebarResizeHandle, StreamoidSidebar]
+do_not_confuse_with: [ScSidebarResizeHandle, ScVDivider]
+required_props: [width, onWidthChange, min, max]
+---
+
+# ScPanelResizeHandle · useStreamoidPanelWidth
+
+**Drag-to-resize edge for a side panel — a continuous width, remembered.** Built
+for the Ask CXO panel, which was a hardcoded `clamp(400px, 32vw, 560px)` that no
+one could widen.
+
+## Don't confuse with `ScSidebarResizeHandle`
+
+| you want | use |
+|---|---|
+| any width between a min and max | **`ScPanelResizeHandle`** |
+| snap between expanded and collapsed past a drag threshold | `ScSidebarResizeHandle` |
+
+They look identical in use and do different things. The sidebar one takes
+`expanded: boolean`; this one takes `width: number`.
+
+## Use it
+
+```tsx
+const { width, setWidth, commitWidth } = useStreamoidPanelWidth({
+  storageKey: "artifax.assistant.width",
+  defaultWidth: 480, min: 360, max: 900,
+});
+
+<div style={{ position: "relative", width }}>       {/* MUST be positioned */}
+  {children}
+  <ScPanelResizeHandle
+    width={width} onWidthChange={setWidth} onWidthCommit={commitWidth}
+    min={360} max={900} edge="right" ariaLabel="Resize Ask CXO"
+  />
+</div>
+```
+
+## Four things that will bite you
+
+1. **The parent must be `position: relative`.** The handle is absolutely
+   positioned against it, and sits half outside the edge (`-6px`) so the 12px
+   hit area straddles the border. A static parent puts it somewhere unrelated.
+2. **`setWidth` during the drag, `commitWidth` at the end.** `commitWidth`
+   writes to `localStorage`; pointermove fires dozens of times a second and each
+   write is synchronous. `onWidthCommit` already fires once per gesture.
+3. **`edge` inverts the gesture AND the keys.** On `edge="left"` the panel grows
+   as the pointer moves left, and ArrowLeft grows it. Get this wrong and the
+   panel shrinks when dragged open.
+4. **Width is absolute from the gesture start, not accumulated deltas.** Drag
+   past `max` and back and the edge returns to the cursor rather than sitting
+   offset by the overshoot. If you reimplement the maths, keep that property —
+   there is a test for it.
+
+## Accessibility
+
+`role="separator"` with `aria-valuenow/min/max`, focusable, and operable with
+ArrowLeft/ArrowRight plus Home/End (`PANEL_RESIZE_STEP_PX`, 24px). Double-click
+resets to `min`. A pointer-only resize is unusable for anyone who cannot drag,
+which is why the keyboard path is part of the component rather than the host's
+problem.
+
+## Storage
+
+`useStreamoidPanelWidth` wraps every `localStorage` access in try/catch —
+it throws outright in a private window, with site data blocked, or in a
+thumbnailer, and a resize handle is not worth taking the app down for. A failed
+read yields `defaultWidth`; a failed write means the width applies for the
+session but does not persist.
+
+The stored value is re-clamped on read, so lowering `max` in a later release
+cannot leave someone stuck with a panel wider than the app now allows.

package/dist/docs/ScStreamoidWordmark.md

@@ -1,24 +1,31 @@
 ---
 component: ScStreamoidWordmark
-also_exports: [ScStreamoidMascot, ScCxoCopilotLogo]
+also_exports: [ScCxoWordmark, ScStreamoidMascot, ScCxoCopilotLogo]
 package: "@streamoid/ui"
 category: brand
 status: stable
 renders: span[aria-hidden] (wordmark) · svg[role="img"] (mascot, CXO logo)
 tags: [brand, logo, wordmark, mascot, streamoid, cxo, copilot, mask, svg, gradient, sidebar-header]
 related: [ScSideBarLogoUnit, StreamoidSidebar, ScAppcardLogos, ScAppSwitchPanel, ScStrLogo]
-do_not_confuse_with: [ScStrLogo, ScLogoUnit, ScAppcardLogos, ProductWordmark, ScSideBarLogoUnit, ScCxoCopilotLogo]
+do_not_confuse_with: [ScStrLogo, ScLogoUnit, ScAppcardLogos, ProductWordmark, ScSideBarLogoUnit, ScCxoCopilotLogo, ScCxoWordmark]
 used_by: [cxo]
 ---
 
-# ScStreamoidWordmark · ScStreamoidMascot · ScCxoCopilotLogo
+# ScStreamoidWordmark · ScCxoWordmark · ScStreamoidMascot · ScCxoCopilotLogo
 
-**The company's own brand marks, so no host app ships a brand SVG.** Three leaf
+**The company's own brand marks, so no host app ships a brand SVG.** Four leaf
 components in one folder: the plain "streamoid" wordmark (110×16, painted as a CSS
-mask so a token colours it), the colourful mascot glyph used in the collapsed
-sidebar (teal→purple gradient, 48×48 viewBox), and the CXO Copilot lockup
+mask so a token colours it), the **CXO product wordmark** (50×16, same mask
+treatment), the colourful mascot glyph used in the collapsed sidebar
+(teal→purple gradient, 48×48 viewBox), and the CXO Copilot lockup
 (98×32, red→orange gradient).
 
+**`ScStreamoidWordmark` is the company, `ScCxoWordmark` is the product.** A CXO
+surface — its sidebar header, its row in the app switcher — wants
+`ScCxoWordmark`. Reach for `ScStreamoidWordmark` only where you mean Streamoid
+*the company* (a corporate footer, a legal line). They are different artwork, not
+two sizes of one mark.
+
 ## TL;DR for agents
 
 - **Reach for it when:** you need the *Streamoid* wordmark or mascot, or the *CXO
@@ -59,7 +66,8 @@ import "@streamoid/ui/dist/index.css"; // once, at your app root
 ### Minimal usage
 
 ```tsx
-<ScStreamoidWordmark />          {/* 110×16, primary-text colour */}
+<ScStreamoidWordmark />          {/* 110×16, primary-text colour — the COMPANY */}
+<ScCxoWordmark />                {/*  50×16, primary-text colour — the PRODUCT */}
 <ScStreamoidMascot />            {/* 40×40 box */}
 <ScCxoCopilotLogo />             {/* 98×32 */}
 ```
@@ -74,11 +82,22 @@ import "@streamoid/ui/dist/index.css"; // once, at your app root
 | `className` | `string` | – | Set on the `<span>`. |
 | `style` | `CSSProperties` | – | Spread **last**, so it overrides the inline width/height/mask. |
 
+### Props — `ScCxoWordmark`
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `width` | `number` | `50` | Box width in **px**. Native width at `height` 16. |
+| `height` | `number` | `16` | The mask is `contain` + `left center`, so keep the 50:16 ratio or it letterboxes rather than stretches. |
+| `color` | `string` | `"var(--alias-text---icons-primary, #f5f5f5)"` | Becomes `background-color` behind the mask. Solid colours only — the official lockup's red→orange gradient **cannot** be reproduced here (Gotcha 3), which is deliberate: a gradient would not survive light mode. |
+| `className` | `string` | – | Set on the `<span>`. |
+| `style` | `CSSProperties` | – | Spread **last**, so it overrides the inline width/height/mask. |
+
 ### Props — `ScStreamoidMascot`
 
 | Prop | Type | Default | Notes |
 |---|---|---|---|
 | `size` | `number` | `40` | Square box in px (`viewBox="0 0 48 48"`). ⚠️ The art occupies ~40×15 of those 48 units — see Gotcha 2. |
+| `ariaLabel` | `string` | `"Streamoid"` | The mark's accessible name. Pass the **product** name where the mascot stands in for an app's own logo — CXO's collapsed sidebar passes `"CXO"`, so a screen reader does not announce the company there. |
 | `className` | `string` | – | Set on the `<svg>`. |
 | `style` | `CSSProperties` | – | Set on the `<svg>`. Does not override `width`/`height` attributes. |
 

package/dist/docs/components.json

@@ -1,6 +1,6 @@
 {
   "package": "@streamoid/ui",
-  "count": 125,
+  "count": 126,
   "components": {
     "ScAccess": {
       "doc": "ScAccess.md",
@@ -130,6 +130,7 @@
         "switch-app",
         "product-switcher",
         "cross-product",
+        "cxo",
         "tactix",
         "artifax",
         "photogenix",
@@ -183,6 +184,7 @@
         "logo",
         "brand",
         "product",
+        "cxo",
         "tactix",
         "artifax",
         "photogenix",
@@ -513,13 +515,15 @@
         "ScAppcardLogos",
         "ProductWordmark",
         "ScSideBarLogoUnit",
-        "ScCxoCopilotLogo"
+        "ScCxoCopilotLogo",
+        "ScCxoWordmark"
       ],
       "requiredProps": [],
       "usedBy": [
         "cxo"
       ],
       "alsoExports": [
+        "ScCxoWordmark",
         "ScStreamoidMascot",
         "ScCxoCopilotLogo"
       ],
@@ -1769,6 +1773,48 @@
       "alsoExports": [],
       "exported": true
     },
+    "ScPanelResizeHandle": {
+      "doc": "ScPanelResizeHandle.md",
+      "source": "src/SC-PanelResize",
+      "category": "layout",
+      "status": "stable",
+      "renders": "div[role=\"separator\"]",
+      "summary": "Drag-to-resize edge for a side panel — a continuous width, remembered.",
+      "reachForWhen": "",
+      "tags": [
+        "resize",
+        "panel",
+        "drag",
+        "width",
+        "splitter",
+        "separator",
+        "sidebar",
+        "chat"
+      ],
+      "related": [
+        "ScSidebarResizeHandle",
+        "StreamoidSidebar"
+      ],
+      "doNotConfuseWith": [
+        "ScSidebarResizeHandle",
+        "ScVDivider"
+      ],
+      "requiredProps": [
+        "width",
+        "onWidthChange",
+        "min",
+        "max"
+      ],
+      "usedBy": [],
+      "alsoExports": [
+        "useStreamoidPanelWidth",
+        "clampPanelWidth",
+        "resolvePanelResize",
+        "resolvePanelResizeKey",
+        "PANEL_RESIZE_STEP_PX"
+      ],
+      "exported": true
+    },
     "ScPlanCard": {
       "doc": "ScPlanCard.md",
       "source": "src/SC-Plan card",
@@ -4898,6 +4944,10 @@
       "documentedIn": "ScAskAgentButton",
       "doc": "ScAskAgentButton.md"
     },
+    "ScCxoWordmark": {
+      "documentedIn": "ScStreamoidWordmark",
+      "doc": "ScStreamoidWordmark.md"
+    },
     "ScStreamoidMascot": {
       "documentedIn": "ScStreamoidWordmark",
       "doc": "ScStreamoidWordmark.md"
@@ -4906,6 +4956,26 @@
       "documentedIn": "ScStreamoidWordmark",
       "doc": "ScStreamoidWordmark.md"
     },
+    "useStreamoidPanelWidth": {
+      "documentedIn": "ScPanelResizeHandle",
+      "doc": "ScPanelResizeHandle.md"
+    },
+    "clampPanelWidth": {
+      "documentedIn": "ScPanelResizeHandle",
+      "doc": "ScPanelResizeHandle.md"
+    },
+    "resolvePanelResize": {
+      "documentedIn": "ScPanelResizeHandle",
+      "doc": "ScPanelResizeHandle.md"
+    },
+    "resolvePanelResizeKey": {
+      "documentedIn": "ScPanelResizeHandle",
+      "doc": "ScPanelResizeHandle.md"
+    },
+    "PANEL_RESIZE_STEP_PX": {
+      "documentedIn": "ScPanelResizeHandle",
+      "doc": "ScPanelResizeHandle.md"
+    },
     "ProductWordmark": {
       "documentedIn": "ScSideBarLogoUnit",
       "doc": "ScSideBarLogoUnit.md"

package/dist/index.css

@@ -914,6 +914,44 @@
   color: #9e9e9e;
 }
 
+/* src/SC-PanelResize/ScPanelResizeHandle.module.css */
+.ScPanelResizeHandle_handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 12px;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 5;
+}
+.ScPanelResizeHandle_left {
+  left: -6px;
+}
+.ScPanelResizeHandle_right {
+  right: -6px;
+}
+.ScPanelResizeHandle_handle:focus-visible {
+  outline: 2px solid var(--alias-border-focus, #7850de);
+  outline-offset: -2px;
+}
+.ScPanelResizeHandle_line {
+  width: 2px;
+  align-self: stretch;
+  background: transparent;
+  transition: background-color 120ms ease;
+}
+.ScPanelResizeHandle_handle:hover .ScPanelResizeHandle_line,
+.ScPanelResizeHandle_handle:focus-visible .ScPanelResizeHandle_line,
+.ScPanelResizeHandle_handle[data-active=true] .ScPanelResizeHandle_line {
+  background: var(--alias-border-focus, #7850de);
+}
+
 /* src/SC-Badges/ScBadges.module.css */
 .ScBadges_scBadges,
 .ScBadges_scBadges * {