@streamoid/ui 0.6.22 → 0.6.24

package/dist/docs/ScWorkspaceAccountMenu.md

@@ -92,6 +92,11 @@ Render the panel beside the top workspace trigger. Render the app identity at
 the bottom of the sidebar and open `ScAppSwitchPanel` from that row. Apply the
 corresponding shared popover-position style to each portalled panel.
 
+Collapsed app identities use the Streamoid mascot for Streamoid and readable
+two-letter product marks (`Ta`, `Ar`, `Ca`, `Ph`) for the other apps. Pass
+`collapsedMark` when a product has an approved compact logo, or
+`collapsedLabel` to override the default abbreviation.
+
 ## 3. When to use it
 
 Use it in authenticated application shells. Login pages, standalone settings

package/dist/index.css

@@ -3924,9 +3924,13 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-}
-.ScSidebarShell_collapsedProductMark > span {
-  transform: scale(0.72);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--alias-fill-neutral-neutral, #1a1a1a);
+  color: var(--alias-text---icons-primary, #f5f5f5);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 .ScSidebarShell_menu {
   display: flex;

package/dist/index.d.mts

@@ -625,11 +625,14 @@ declare function ScSidebarSearchTrigger({ expanded, label, shortcut, onClick, cl
 interface ScSidebarAppIdentityProps {
     expanded: boolean;
     product?: AppcardProduct | "streamoid";
+    /** Optional compact label for collapsed rails. A supplied mark takes
+     * precedence; otherwise product-specific defaults such as Ar and Ca apply. */
+    collapsedLabel?: string;
     collapsedMark?: ReactNode;
     label?: string;
     className?: string;
 }
-declare function ScSidebarAppIdentity({ expanded, product, collapsedMark, label, className, }: ScSidebarAppIdentityProps): JSX.Element;
+declare function ScSidebarAppIdentity({ expanded, product, collapsedLabel, collapsedMark, label, className, }: ScSidebarAppIdentityProps): JSX.Element;
 interface ScWorkspaceAccountMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     workspaceName: string;
     workspaceRole?: string;

package/dist/index.d.ts

@@ -625,11 +625,14 @@ declare function ScSidebarSearchTrigger({ expanded, label, shortcut, onClick, cl
 interface ScSidebarAppIdentityProps {
     expanded: boolean;
     product?: AppcardProduct | "streamoid";
+    /** Optional compact label for collapsed rails. A supplied mark takes
+     * precedence; otherwise product-specific defaults such as Ar and Ca apply. */
+    collapsedLabel?: string;
     collapsedMark?: ReactNode;
     label?: string;
     className?: string;
 }
-declare function ScSidebarAppIdentity({ expanded, product, collapsedMark, label, className, }: ScSidebarAppIdentityProps): JSX.Element;
+declare function ScSidebarAppIdentity({ expanded, product, collapsedLabel, collapsedMark, label, className, }: ScSidebarAppIdentityProps): JSX.Element;
 interface ScWorkspaceAccountMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     workspaceName: string;
     workspaceRole?: string;

package/dist/index.js

@@ -5121,9 +5121,16 @@ function ScSidebarSearchTrigger({
 function AppGridIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": true, className: ScSidebarShell_default.appGridIcon, children: Array.from({ length: 9 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", {}, index)) });
 }
+var COMPACT_APP_LABELS = {
+  tactix: "Ta",
+  artifax: "Ar",
+  catalogix: "Ca",
+  photogenix: "Ph"
+};
 function ScSidebarAppIdentity({
   expanded,
   product = "streamoid",
+  collapsedLabel,
   collapsedMark,
   label,
   className
@@ -5138,7 +5145,7 @@ function ScSidebarAppIdentity({
       children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: ScSidebarShell_default.appWordmark, children: product === "streamoid" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ScStreamoidWordmark, { width: 110, height: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ScAppcardLogos, { product }) }),
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppGridIcon, {})
-      ] }) : collapsedMark ?? (product === "streamoid" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ScStreamoidMascot, { size: 40 }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: ScSidebarShell_default.collapsedProductMark, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ScAppcardLogos, { product }) }))
+      ] }) : collapsedMark ?? (product === "streamoid" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ScStreamoidMascot, { size: 40 }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": true, className: ScSidebarShell_default.collapsedProductMark, children: collapsedLabel ?? COMPACT_APP_LABELS[product] }))
     }
   );
 }
@@ -5551,10 +5558,18 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
   (0, import_react14.useLayoutEffect)(() => {
     const sidebar = sidebarRef.current;
     if (!sidebar || typeof window === "undefined") return;
-    const card = (sidebar.matches("[data-streamoid-sidebar-card]") ? sidebar : sidebar.querySelector(
+    const findCard = () => (sidebar.matches("[data-streamoid-sidebar-card]") ? sidebar : sidebar.querySelector(
       "[data-streamoid-sidebar-card]"
     )) ?? sidebar;
+    let observedCard = null;
+    let resizeObserver = null;
     const measure = () => {
+      const card = findCard();
+      if (resizeObserver && observedCard !== card) {
+        if (observedCard) resizeObserver.unobserve(observedCard);
+        resizeObserver.observe(card);
+        observedCard = card;
+      }
       const bounds = card.getBoundingClientRect();
       const availableWidth = Math.max(0, window.innerWidth - VIEWPORT_INSET * 2);
       const panelWidth = Math.min(width, availableWidth);
@@ -5583,13 +5598,15 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
         ...vertical
       });
     };
+    resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     measure();
     window.addEventListener("resize", measure);
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
-    observer?.observe(card);
+    const mutationObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(measure);
+    mutationObserver?.observe(sidebar, { childList: true, subtree: true });
     return () => {
       window.removeEventListener("resize", measure);
-      observer?.disconnect();
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
     };
   }, [gap, inset, placement, sidebarRef, width]);
   return position;

package/dist/index.mjs

@@ -4962,9 +4962,16 @@ function ScSidebarSearchTrigger({
 function AppGridIcon() {
   return /* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: ScSidebarShell_default.appGridIcon, children: Array.from({ length: 9 }, (_, index) => /* @__PURE__ */ jsx50("span", {}, index)) });
 }
+var COMPACT_APP_LABELS = {
+  tactix: "Ta",
+  artifax: "Ar",
+  catalogix: "Ca",
+  photogenix: "Ph"
+};
 function ScSidebarAppIdentity({
   expanded,
   product = "streamoid",
+  collapsedLabel,
   collapsedMark,
   label,
   className
@@ -4979,7 +4986,7 @@ function ScSidebarAppIdentity({
       children: expanded ? /* @__PURE__ */ jsxs41(Fragment15, { children: [
         /* @__PURE__ */ jsx50("span", { className: ScSidebarShell_default.appWordmark, children: product === "streamoid" ? /* @__PURE__ */ jsx50(ScStreamoidWordmark, { width: 110, height: 16 }) : /* @__PURE__ */ jsx50(ScAppcardLogos, { product }) }),
         /* @__PURE__ */ jsx50(AppGridIcon, {})
-      ] }) : collapsedMark ?? (product === "streamoid" ? /* @__PURE__ */ jsx50(ScStreamoidMascot, { size: 40 }) : /* @__PURE__ */ jsx50("span", { className: ScSidebarShell_default.collapsedProductMark, children: /* @__PURE__ */ jsx50(ScAppcardLogos, { product }) }))
+      ] }) : collapsedMark ?? (product === "streamoid" ? /* @__PURE__ */ jsx50(ScStreamoidMascot, { size: 40 }) : /* @__PURE__ */ jsx50("span", { "aria-hidden": true, className: ScSidebarShell_default.collapsedProductMark, children: collapsedLabel ?? COMPACT_APP_LABELS[product] }))
     }
   );
 }
@@ -5395,10 +5402,18 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
   useLayoutEffect(() => {
     const sidebar = sidebarRef.current;
     if (!sidebar || typeof window === "undefined") return;
-    const card = (sidebar.matches("[data-streamoid-sidebar-card]") ? sidebar : sidebar.querySelector(
+    const findCard = () => (sidebar.matches("[data-streamoid-sidebar-card]") ? sidebar : sidebar.querySelector(
       "[data-streamoid-sidebar-card]"
     )) ?? sidebar;
+    let observedCard = null;
+    let resizeObserver = null;
     const measure = () => {
+      const card = findCard();
+      if (resizeObserver && observedCard !== card) {
+        if (observedCard) resizeObserver.unobserve(observedCard);
+        resizeObserver.observe(card);
+        observedCard = card;
+      }
       const bounds = card.getBoundingClientRect();
       const availableWidth = Math.max(0, window.innerWidth - VIEWPORT_INSET * 2);
       const panelWidth = Math.min(width, availableWidth);
@@ -5427,13 +5442,15 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
         ...vertical
       });
     };
+    resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     measure();
     window.addEventListener("resize", measure);
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
-    observer?.observe(card);
+    const mutationObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(measure);
+    mutationObserver?.observe(sidebar, { childList: true, subtree: true });
     return () => {
       window.removeEventListener("resize", measure);
-      observer?.disconnect();
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
     };
   }, [gap, inset, placement, sidebarRef, width]);
   return position;

package/package.json

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