@streamoid/ui 0.6.29 → 0.6.31

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
@@ -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.
@@ -164,7 +166,7 @@ theme-aware (dark on `:root`, light override) — never hardcode a colour.
 
 - **`CreditWarningBanner`** — use when you need the "you're nearly out of credits" nudge in a sidebar rail, in either expanded or collapsed form.
 - **`ScAppSwitchPanel`** — use when you need the "go to another Streamoid product" list — in `StreamoidSidebar`'s `switchPanel`, or in your own portalled flyout.
-  - also documented here: `ScAppSwitchRow`, `createStreamoidAppSwitchUtilities`, `streamoidAppSwitchTagline`, `streamoidChangelogUrl`, `STREAMOID_CHANGELOG_URLS`, `STREAMOID_CHANGELOG_URL`, `STREAMOID_STATUS_PAGE_URL`
+  - also documented here: `ScAppSwitchRow`, `scAppSwitchOrder`, `createStreamoidAppSwitchUtilities`, `streamoidAppSwitchTagline`, `streamoidChangelogUrl`, `STREAMOID_CHANGELOG_URLS`, `STREAMOID_CHANGELOG_URL`, `STREAMOID_STATUS_PAGE_URL`
 - **`ScArtifaxSidebar`** — use when you are working on the Artifax (or Tactix) shell, or you need a sidebar whose sections the user can collapse.
 - **`ScAskAgentButton`** — use when you need the assistant-panel CTA **outside** a DS sidebar. Inside one, use the sidebar's `assistantCta` prop instead.
   - also documented here: `ScAskAgentSlot`, `AssistantCta`
@@ -178,8 +180,8 @@ theme-aware (dark on `:root`, light override) — never hardcode a colour.
 - **`ScSidebarProfile`** _(legacy)_ — use when never. There is no way to pass a real user through it.
 - **`ScSidebarSwitchMenu`** — use when you're building a "switch to another product" list inside a sidebar and each entry needs a name **and** a subtitle.
 - **`ScVersion`** _(legacy)_ — use when never. `StreamoidSidebar` renders its own version footer inline from `versionText`.
-- **`ScWorkspaceAccountMenu`** — use when building the standard workspace menu opened from the top-left of a Streamoid application sidebar. - Use `ScSidebarWorkspaceTrigger`, `ScSidebarSearchTrigger`, and `ScSidebarAppIdentity` for the matching constant rail controls. - Use the two preference hooks so theme and expanded/collapsed state survive an app switch across Streamoid subdomains. - Use `useStreamoidSidebarPopoverPosition` for the upper-right workspace menu and lower-right app switcher instead of hard-coded host coordinates.
-  - also documented here: `ScSidebarWorkspaceTrigger`, `ScSidebarSearchTrigger`, `ScSidebarAppIdentity`, `useStreamoidThemePreference`, `useStreamoidSidebarPreference`, `useStreamoidSidebarPopoverPosition`
+- **`ScWorkspaceAccountMenu`** — use when building the standard workspace menu opened from the top-left of a Streamoid application sidebar. - Use `ScSidebarWorkspaceTrigger`, `ScSidebarSearchTrigger`, and `ScSidebarAppIdentity` for the matching constant rail controls. - Use the two preference hooks so theme and expanded/collapsed state survive an app switch across Streamoid subdomains. - Use `useStreamoidSidebarPopoverPosition` for a panel that belongs to the whole rail (the upper-right workspace menu) instead of hard-coded host coordinates. - Use `useStreamoidAnchoredPopoverPosition` for a panel that belongs to a BUTTON — the app switcher's grid trigger, a row's overflow menu. Pinning one of those to the sidebar card's edge leaves it floating mid-canvas with nothing connecting it to what was clicked; in Artifax it landed over the chat composer and its Send button.
+  - also documented here: `ScSidebarWorkspaceTrigger`, `ScSidebarSearchTrigger`, `ScSidebarAppIdentity`, `useStreamoidThemePreference`, `useStreamoidSidebarPreference`, `useStreamoidSidebarPopoverPosition`, `useStreamoidAnchoredPopoverPosition`, `resolveAnchoredPopoverPosition`
 - **`StreamoidSidebar`** — use when you are building (or fixing) a desktop app's primary left navigation and you want the same chrome CXO, Photogenix and Catalogix use.
   - also documented here: `ScSidebarResizeHandle`, `advanceSidebarResizeGesture`, `SIDEBAR_RESIZE_THRESHOLD_PX`
 
@@ -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

@@ -1,6 +1,6 @@
 ---
 component: ScAppSwitchPanel
-also_exports: [ScAppSwitchRow, createStreamoidAppSwitchUtilities, streamoidAppSwitchTagline, streamoidChangelogUrl, STREAMOID_CHANGELOG_URLS, STREAMOID_CHANGELOG_URL, STREAMOID_STATUS_PAGE_URL]
+also_exports: [ScAppSwitchRow, scAppSwitchOrder, createStreamoidAppSwitchUtilities, streamoidAppSwitchTagline, streamoidChangelogUrl, STREAMOID_CHANGELOG_URLS, STREAMOID_CHANGELOG_URL, STREAMOID_STATUS_PAGE_URL]
 package: "@streamoid/ui"
 category: sidebar
 status: stable
@@ -36,7 +36,9 @@ card, no border and no background: the surrounding sidebar or flyout supplies th
   3. Matching is a **substring** test over `` `${key} ${name}`.toLowerCase() ``. A key
      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.
+  4. **Pass every product, including the one you are in**, marked `current`.
+     Omitting it (which hosts used to do) changes the list's length per surface,
+     so rows move between apps and the hub has no row in its own switcher.
 
 ---
 
@@ -59,8 +61,13 @@ import "@streamoid/ui/dist/index.css"; // once, at your app root
 ```tsx
 <ScAppSwitchPanel
   apps={[
-    { key: "artifax",    name: "Artifax",    onSelect: () => open(artifaxUrl) },
+    // Every product, always, in every app. `current` marks where you are; its
+    // `onSelect` is never called, so a no-op is fine.
+    { key: "cxo",        name: "CXO",        onSelect: () => open(cxoUrl) },
+    { key: "tactix",     name: "Tactix",     onSelect: () => open(tactixUrl) },
+    { key: "artifax",    name: "Artifax",    current: true, onSelect: () => {} },
     { key: "photogenix", name: "Photogenix", onSelect: () => open(photogenixUrl) },
+    { key: "catalogix",  name: "Catalogix",  onSelect: () => open(catalogixUrl) },
   ]}
   utilities={{
     appVersion: APP_VERSION,
@@ -86,6 +93,11 @@ import "@streamoid/ui/dist/index.css"; // once, at your app root
 |---|---|---|---|
 | `item` | `ScAppSwitchItem` | — | **Required.** The only prop — no `className`, no `style`. Rarely used directly; the panel renders one per app. |
 
+### `scAppSwitchOrder(apps)`
+
+The canonical ordering, exported so a host (or a test) can assert the row order
+without rendering. The panel applies it already — hosts do not need to sort.
+
 ### `ScAppSwitchItem`
 
 | Field | Type | Notes |
@@ -93,7 +105,8 @@ import "@streamoid/ui/dist/index.css"; // once, at your app root
 | `key` | `string` | React key **and** half of the wordmark-matching string. |
 | `name` | `string` | Matching input, and the fallback label. ⚠️ **Not rendered** when a wordmark matches. Always used for the row's `aria-label` (`"Switch to {name}"`). |
 | `description` | `string` | Optional. Ignored for known products (the panel uses the canonical tagline). Shown only for unknown products. |
-| `onSelect` | `() => void` | Row click. |
+| `current` | `boolean` | Optional. This is the app you are in: the row is filled (`--alias-fill-neutral-neutralselected`), carries a **check** instead of the chevron, gets `aria-current="true"` + `aria-disabled`, and does **not** call `onSelect`. It stays focusable on purpose — it is the answer to "where am I". |
+| `onSelect` | `() => void` | Row click. Never called on the `current` row. |
 
 ### Wordmark matching + canonical order
 

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/ScWorkspaceAccountMenu.md

@@ -9,7 +9,7 @@ related: [StreamoidSidebar, ScArtifaxSidebar, ScAppSwitchPanel, ScProfilePopup]
 do_not_confuse_with: [ScProfilePopup, ScWorkspaceSwitcher, ScAppSwitchPanel]
 used_by: [cxo, artifax, catalogix, photogenix]
 required_props: [workspaceName, accountName]
-also_exports: [ScSidebarWorkspaceTrigger, ScSidebarSearchTrigger, ScSidebarAppIdentity, useStreamoidThemePreference, useStreamoidSidebarPreference, useStreamoidSidebarPopoverPosition]
+also_exports: [ScSidebarWorkspaceTrigger, ScSidebarSearchTrigger, ScSidebarAppIdentity, useStreamoidThemePreference, useStreamoidSidebarPreference, useStreamoidSidebarPopoverPosition, useStreamoidAnchoredPopoverPosition, resolveAnchoredPopoverPosition]
 ---
 
 # Shared Streamoid sidebar shell
@@ -27,8 +27,14 @@ shared popover-position hook keeps the desktop anchors consistent.
   `ScSidebarAppIdentity` for the matching constant rail controls.
 - Use the two preference hooks so theme and expanded/collapsed state survive an
   app switch across Streamoid subdomains.
-- Use `useStreamoidSidebarPopoverPosition` for the upper-right workspace menu
-  and lower-right app switcher instead of hard-coded host coordinates.
+- Use `useStreamoidSidebarPopoverPosition` for a panel that belongs to the
+  whole rail (the upper-right workspace menu) instead of hard-coded host
+  coordinates.
+- Use `useStreamoidAnchoredPopoverPosition` for a panel that belongs to a
+  BUTTON — the app switcher's grid trigger, a row's overflow menu. Pinning one
+  of those to the sidebar card's edge leaves it floating mid-canvas with nothing
+  connecting it to what was clicked; in Artifax it landed over the chat
+  composer and its Send button.
 
 ## 1. How to use it
 
@@ -50,12 +56,33 @@ const workspaceMenuPosition = useStreamoidSidebarPopoverPosition(sidebarRef, {
   placement: "top-right",
   width: 320,
 });
-const appSwitcherPosition = useStreamoidSidebarPopoverPosition(sidebarRef, {
-  placement: "bottom-right",
-  width: 240,
-});
+// Tethered to the trigger, flipping only to stay on screen: beside the button
+// and running down from its top edge, to the button's other side when that side
+// has no room, and upward (bottom aligned to the trigger) when there is no room
+// below — which is what a footer grid button gets.
+const appSwitcherPosition = useStreamoidAnchoredPopoverPosition(
+  triggerRef,
+  panelRef,
+  { width: 240 },
+);
 ```
 
+### `useStreamoidAnchoredPopoverPosition(anchorRef, panelRef, options)`
+
+| Option | Type | Default | Purpose |
+|---|---|---|---|
+| `width` | `number` | — | **Required.** Panel width; narrowed to the viewport when it cannot fit. |
+| `gap` | `number` | `8` | Distance between the trigger and the panel. |
+| `inset` | `number` | `16` | Keep-out margin from the viewport edges. |
+
+Pass a ref to the panel as well as the trigger: the vertical flip needs the
+panel's measured height, so the first frame opens downward and settles once
+measured. Re-measures on resize, on scroll (capture phase — a rail can scroll
+without bubbling), and while either element changes size.
+
+`resolveAnchoredPopoverPosition(geometry)` is the same rules as a pure
+function, exported for hosts that position their own portal and for tests.
+
 | Prop | Type | Default | Purpose |
 |---|---|---|---|
 | `workspaceName` | `string` | required | Current workspace label. |

package/dist/docs/components.json

@@ -1,6 +1,6 @@
 {
   "package": "@streamoid/ui",
-  "count": 125,
+  "count": 126,
   "components": {
     "ScAccess": {
       "doc": "ScAccess.md",
@@ -162,6 +162,7 @@
       ],
       "alsoExports": [
         "ScAppSwitchRow",
+        "scAppSwitchOrder",
         "createStreamoidAppSwitchUtilities",
         "streamoidAppSwitchTagline",
         "streamoidChangelogUrl",
@@ -1773,6 +1774,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",
@@ -2715,7 +2758,7 @@
       "status": "stable",
       "renders": "div",
       "summary": "Reach for it when:",
-      "reachForWhen": "building the standard workspace menu opened from the top-left of a Streamoid application sidebar. - Use `ScSidebarWorkspaceTrigger`, `ScSidebarSearchTrigger`, and `ScSidebarAppIdentity` for the matching constant rail controls. - Use the two preference hooks so theme and expanded/collapsed state survive an app switch across Streamoid subdomains. - Use `useStreamoidSidebarPopoverPosition` for the upper-right workspace menu and lower-right app switcher instead of hard-coded host coordinates.",
+      "reachForWhen": "building the standard workspace menu opened from the top-left of a Streamoid application sidebar. - Use `ScSidebarWorkspaceTrigger`, `ScSidebarSearchTrigger`, and `ScSidebarAppIdentity` for the matching constant rail controls. - Use the two preference hooks so theme and expanded/collapsed state survive an app switch across Streamoid subdomains. - Use `useStreamoidSidebarPopoverPosition` for a panel that belongs to the whole rail (the upper-right workspace menu) instead of hard-coded host coordinates. - Use `useStreamoidAnchoredPopoverPosition` for a panel that belongs to a BUTTON — the app switcher's grid trigger, a row's overflow menu. Pinning one of those to the sidebar card's edge leaves it floating mid-canvas with nothing connecting it to what was clicked; in Artifax it landed over the chat composer and its Send button.",
       "tags": [
         "sidebar",
         "workspace",
@@ -2751,7 +2794,9 @@
         "ScSidebarAppIdentity",
         "useStreamoidThemePreference",
         "useStreamoidSidebarPreference",
-        "useStreamoidSidebarPopoverPosition"
+        "useStreamoidSidebarPopoverPosition",
+        "useStreamoidAnchoredPopoverPosition",
+        "resolveAnchoredPopoverPosition"
       ],
       "exported": true
     },
@@ -4870,6 +4915,10 @@
       "documentedIn": "ScAppSwitchPanel",
       "doc": "ScAppSwitchPanel.md"
     },
+    "scAppSwitchOrder": {
+      "documentedIn": "ScAppSwitchPanel",
+      "doc": "ScAppSwitchPanel.md"
+    },
     "createStreamoidAppSwitchUtilities": {
       "documentedIn": "ScAppSwitchPanel",
       "doc": "ScAppSwitchPanel.md"
@@ -4914,6 +4963,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"
@@ -4962,6 +5031,14 @@
       "documentedIn": "ScWorkspaceAccountMenu",
       "doc": "ScWorkspaceAccountMenu.md"
     },
+    "useStreamoidAnchoredPopoverPosition": {
+      "documentedIn": "ScWorkspaceAccountMenu",
+      "doc": "ScWorkspaceAccountMenu.md"
+    },
+    "resolveAnchoredPopoverPosition": {
+      "documentedIn": "ScWorkspaceAccountMenu",
+      "doc": "ScWorkspaceAccountMenu.md"
+    },
     "formatSubAgentLabel": {
       "documentedIn": "ScSubAgent",
       "doc": "ScSubAgent.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 * {