@streamoid/ui 0.6.34 → 0.6.36

package/dist/docs/ScAppSwitchPanel.md

@@ -41,10 +41,10 @@ before, and the panel read as three lists rather than one.
 - **Four things that will bite you:**
   1. It **re-sorts your array** into a canonical product order. Your ordering is
      discarded.
-  2. Known products render the **canonical tagline** (e.g. "Buyers and
-     planners"), not `description` and not the product `name`. Do not copy that
-     map into a host. Taglines name what the product is; none of them start with
-     "for".
+  2. Known products render the **canonical tagline** (e.g. "Buying and
+     planning"), not `description` and not the product `name`. Do not copy that
+     map into a host. Taglines name what the product DOES; none of them start
+     with "for", and none of them name an audience.
   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.
@@ -135,11 +135,11 @@ without rendering. The panel applies it already — hosts do not need to sort.
 
 | Order | Matches (substring, case-insensitive, on `key + " " + name`) | Renders |
 |---|---|---|
-| 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" |
+| 1 | `cxo`, `streamoid` | CXO wordmark + "Retail Command Center" |
+| 2 | `tactix` | Tactix wordmark + "Buying and planning" |
+| 3 | `artifax`, `design studio` | Artifax wordmark + "Design and development" |
+| 4 | `photogenix`, `photo studio` | Photogenix wordmark + "Studio and content" |
+| 5 | `catalogix`, `catalog studio` | Catalogix wordmark + "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

package/dist/index.css

@@ -3813,9 +3813,6 @@
   cursor: col-resize;
   touch-action: none;
 }
-.ScSidebarResizeHandle_collapsed {
-  right: -8px;
-}
 .ScSidebarResizeHandle_line {
   pointer-events: none;
   position: absolute;

package/dist/index.js

@@ -394,7 +394,7 @@ var PRODUCT_BRANDS = [
     tagline: "Retail Command Center",
     hub: true
   },
-  { match: ["tactix"], product: "tactix", tagline: "Buyers and planners" },
+  { match: ["tactix"], product: "tactix", tagline: "Buying and planning" },
   {
     match: ["artifax", "design studio"],
     product: "artifax",
@@ -532,7 +532,7 @@ var ScAppSwitchRow = ({
                         {
                           product: brand.product,
                           color: labelColor,
-                          style: { transform: "scale(1.25)", transformOrigin: "left center" }
+                          style: { transform: "scale(1.125)", transformOrigin: "left center" }
                         }
                       )
                     }
@@ -615,10 +615,21 @@ var ScAppSwitchGroupLabel = ({ children }) => /* @__PURE__ */ (0, import_jsx_run
   {
     style: {
       padding: "var(--spacing-md, 8px) var(--spacing-md, 8px) var(--spacing-sm, 4px)",
-      color: T.tertiary,
+      /* SECONDARY, NOT TERTIARY. A group label is structure — it tells you
+         which kind of row follows — so it has to be readable; tertiary is the
+         ramp step for text you are not meant to read, and at 12px it fell
+         under it. */
+      color: T.secondary,
       fontFamily: T.font,
-      fontSize: "var(--font-size-font-size-sm, 14px)",
-      lineHeight: "var(--line-height-line-height-sm, 20px)",
+      /* 12px/16px. At 14px/20px these sat at the same size as the rows they
+         label, so "Apps" read as an entry in the list rather than a heading
+         over it. Dropping a step makes the hierarchy legible AND takes 4px
+         off each label's line box — 8px out of the panel, which is most of
+         the tightening asked for. */
+      fontSize: "var(--font-size-font-size-xs, 12px)",
+      lineHeight: "var(--line-height-line-height-xs, 16px)",
+      /* Medium. Weight is what keeps a 12px label from reading as fine print
+         once the size drops. */
       fontWeight: 500
     },
     children
@@ -4514,7 +4525,6 @@ var import_react14 = require("react");
 // src/SC-Sidebar-new/ScSidebarResizeHandle.module.css
 var ScSidebarResizeHandle_default = {
   handle: "ScSidebarResizeHandle_handle",
-  collapsed: "ScSidebarResizeHandle_collapsed",
   line: "ScSidebarResizeHandle_line",
   active: "ScSidebarResizeHandle_active"
 };
@@ -4601,7 +4611,7 @@ function ScSidebarResizeHandle({
           onExpandedChange(true);
         }
       },
-      className: `${ScSidebarResizeHandle_default.handle} ${expanded ? "" : ScSidebarResizeHandle_default.collapsed} ${active ? ScSidebarResizeHandle_default.active : ""} ${className ?? ""}`.trim(),
+      className: `${ScSidebarResizeHandle_default.handle} ${active ? ScSidebarResizeHandle_default.active : ""} ${className ?? ""}`.trim(),
       style,
       children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": true, className: ScSidebarResizeHandle_default.line })
     }
@@ -5129,7 +5139,7 @@ function StreamoidSidebar({
     "div",
     {
       className: `relative flex h-full items-center justify-center shrink-0 ${className ?? ""}`.trim(),
-      style,
+      style: { padding: "var(--spacing-3xl)", ...style },
       children: [
         resizable && !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           ScSidebarResizeHandle,
@@ -5145,6 +5155,11 @@ function StreamoidSidebar({
             className: "flex flex-col h-full items-center justify-center relative shrink-0",
             style: {
               backgroundColor: "var(--alias-surface-base)",
+              /* Matches the expanded card. It was square with a hard right seam,
+                 which read as a different component rather than the same one
+                 narrowed — and next to a floating rounded card it looked like the
+                 rail had been replaced. */
+              borderRadius: "var(--radius-3xl)",
               padding: "var(--spacing-md)",
               gap: "var(--spacing-xxs)"
             },
@@ -5155,7 +5170,9 @@ function StreamoidSidebar({
                   "aria-hidden": "true",
                   className: "absolute inset-0 pointer-events-none",
                   style: {
-                    borderRight: "1px solid var(--alias-border-subtle)"
+                    border: "1px solid var(--alias-border-subtle)",
+                    borderRadius: "var(--radius-3xl)",
+                    zIndex: 30
                   }
                 }
               ),

package/dist/index.mjs

@@ -209,7 +209,7 @@ var PRODUCT_BRANDS = [
     tagline: "Retail Command Center",
     hub: true
   },
-  { match: ["tactix"], product: "tactix", tagline: "Buyers and planners" },
+  { match: ["tactix"], product: "tactix", tagline: "Buying and planning" },
   {
     match: ["artifax", "design studio"],
     product: "artifax",
@@ -347,7 +347,7 @@ var ScAppSwitchRow = ({
                         {
                           product: brand.product,
                           color: labelColor,
-                          style: { transform: "scale(1.25)", transformOrigin: "left center" }
+                          style: { transform: "scale(1.125)", transformOrigin: "left center" }
                         }
                       )
                     }
@@ -430,10 +430,21 @@ var ScAppSwitchGroupLabel = ({ children }) => /* @__PURE__ */ jsx4(
   {
     style: {
       padding: "var(--spacing-md, 8px) var(--spacing-md, 8px) var(--spacing-sm, 4px)",
-      color: T.tertiary,
+      /* SECONDARY, NOT TERTIARY. A group label is structure — it tells you
+         which kind of row follows — so it has to be readable; tertiary is the
+         ramp step for text you are not meant to read, and at 12px it fell
+         under it. */
+      color: T.secondary,
       fontFamily: T.font,
-      fontSize: "var(--font-size-font-size-sm, 14px)",
-      lineHeight: "var(--line-height-line-height-sm, 20px)",
+      /* 12px/16px. At 14px/20px these sat at the same size as the rows they
+         label, so "Apps" read as an entry in the list rather than a heading
+         over it. Dropping a step makes the hierarchy legible AND takes 4px
+         off each label's line box — 8px out of the panel, which is most of
+         the tightening asked for. */
+      fontSize: "var(--font-size-font-size-xs, 12px)",
+      lineHeight: "var(--line-height-line-height-xs, 16px)",
+      /* Medium. Weight is what keeps a 12px label from reading as fine print
+         once the size drops. */
       fontWeight: 500
     },
     children
@@ -4329,7 +4340,6 @@ import { useRef as useRef5, useState as useState11 } from "react";
 // src/SC-Sidebar-new/ScSidebarResizeHandle.module.css
 var ScSidebarResizeHandle_default = {
   handle: "ScSidebarResizeHandle_handle",
-  collapsed: "ScSidebarResizeHandle_collapsed",
   line: "ScSidebarResizeHandle_line",
   active: "ScSidebarResizeHandle_active"
 };
@@ -4416,7 +4426,7 @@ function ScSidebarResizeHandle({
           onExpandedChange(true);
         }
       },
-      className: `${ScSidebarResizeHandle_default.handle} ${expanded ? "" : ScSidebarResizeHandle_default.collapsed} ${active ? ScSidebarResizeHandle_default.active : ""} ${className ?? ""}`.trim(),
+      className: `${ScSidebarResizeHandle_default.handle} ${active ? ScSidebarResizeHandle_default.active : ""} ${className ?? ""}`.trim(),
       style,
       children: /* @__PURE__ */ jsx49("span", { "aria-hidden": true, className: ScSidebarResizeHandle_default.line })
     }
@@ -4944,7 +4954,7 @@ function StreamoidSidebar({
     "div",
     {
       className: `relative flex h-full items-center justify-center shrink-0 ${className ?? ""}`.trim(),
-      style,
+      style: { padding: "var(--spacing-3xl)", ...style },
       children: [
         resizable && !isMobile ? /* @__PURE__ */ jsx50(
           ScSidebarResizeHandle,
@@ -4960,6 +4970,11 @@ function StreamoidSidebar({
             className: "flex flex-col h-full items-center justify-center relative shrink-0",
             style: {
               backgroundColor: "var(--alias-surface-base)",
+              /* Matches the expanded card. It was square with a hard right seam,
+                 which read as a different component rather than the same one
+                 narrowed — and next to a floating rounded card it looked like the
+                 rail had been replaced. */
+              borderRadius: "var(--radius-3xl)",
               padding: "var(--spacing-md)",
               gap: "var(--spacing-xxs)"
             },
@@ -4970,7 +4985,9 @@ function StreamoidSidebar({
                   "aria-hidden": "true",
                   className: "absolute inset-0 pointer-events-none",
                   style: {
-                    borderRight: "1px solid var(--alias-border-subtle)"
+                    border: "1px solid var(--alias-border-subtle)",
+                    borderRadius: "var(--radius-3xl)",
+                    zIndex: 30
                   }
                 }
               ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.6.34",
+  "version": "0.6.36",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",