@streamoid/settings 0.4.4 → 0.4.6

package/dist/index.d.mts

@@ -1102,6 +1102,13 @@ declare function MemberListFrame({ header, emptyText, isEmpty, grow, maxHeight,
  * Derived by intersecting this workspace's members with the organization's, so
  * it states a fact both APIs already report — it is not a guess at an
  * "inherited permission" flag, which no endpoint exposes.
+ *
+ * ONLY ADMINS GET A CHIP NOW. The other state read "in org", which told you
+ * that someone in the workspace list is also in the organization -- true of
+ * nearly everyone, actionable for no one, and one more thing to read on every
+ * row. An org admin is different: they keep access to this workspace whatever
+ * is set here, and they are who you ask for permissions. That is worth a chip;
+ * "also in the org" is not.
  */
 declare function OrgMembershipTag({ organizationName, isOrgAdmin, }: {
     organizationName?: string | null;

package/dist/index.d.ts

@@ -1102,6 +1102,13 @@ declare function MemberListFrame({ header, emptyText, isEmpty, grow, maxHeight,
  * Derived by intersecting this workspace's members with the organization's, so
  * it states a fact both APIs already report — it is not a guess at an
  * "inherited permission" flag, which no endpoint exposes.
+ *
+ * ONLY ADMINS GET A CHIP NOW. The other state read "in org", which told you
+ * that someone in the workspace list is also in the organization -- true of
+ * nearly everyone, actionable for no one, and one more thing to read on every
+ * row. An org admin is different: they keep access to this workspace whatever
+ * is set here, and they are who you ask for permissions. That is worth a chip;
+ * "also in the org" is not.
  */
 declare function OrgMembershipTag({ organizationName, isOrgAdmin, }: {
     organizationName?: string | null;

package/dist/index.js

@@ -2175,7 +2175,7 @@ function OrganizationAffiliationCard({
                         "Failed to change visibility"
                       );
                     },
-                    children: opt === "private" ? "Only its members" : "Everyone in the organization"
+                    children: opt === "private" ? "Only workspace members" : "Everyone in the organization"
                   },
                   opt
                 );
@@ -3835,8 +3835,22 @@ function OrgMembershipTag({
         border: `1px solid ${isOrgAdmin ? T7.primary : T7.borderSubtle}`,
         backgroundColor: "transparent"
       },
-      title: isOrgAdmin ? `Admin of ${org} \u2014 keeps access to this workspace regardless of what is set here. Manage under Organization \u203A People.` : `Also a member of ${org}. Manage their organization role under Organization \u203A People.`,
-      children: isOrgAdmin ? "org admin" : "in org"
+      title: `Admin of ${org} \u2014 keeps access to this workspace regardless of what is set here. Manage under Organization \u203A People.`,
+      children: "Org admin"
+    }
+  );
+}
+function RoleChip({
+  role,
+  label
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_ui4.ScRole,
+    {
+      type: role,
+      label,
+      className: "shrink-0",
+      style: { width: "auto", minWidth: "5rem" }
     }
   );
 }
@@ -4313,11 +4327,10 @@ function TeamRow({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center shrink-0", style: { gap: 6 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_ui5.ScRole,
+            RoleChip,
             {
-              type: member.permissions.role,
-              label: member.permissions.role === "admin" ? "Admin" : "Member",
-              className: "shrink-0"
+              role: member.permissions.role === "admin" ? "admin" : "member",
+              label: member.permissions.role === "admin" ? "Workspace admin" : "Member"
             }
           ),
           orgMembership && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -5987,11 +6000,10 @@ function MemberRow({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_ui8.ScRole,
+          RoleChip,
           {
-            type: member.role,
-            label: member.role === "admin" ? "Admin" : "Member",
-            className: "shrink-0"
+            role: member.role === "admin" ? "admin" : "member",
+            label: member.role === "admin" ? "Org admin" : "Member"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -6096,11 +6108,10 @@ function InviteRow({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_ui8.ScRole,
+          RoleChip,
           {
-            type: role === "admin" ? "admin" : "member",
-            label: role === "admin" ? "Admin" : "Member",
-            className: "shrink-0"
+            role: role === "admin" ? "admin" : "member",
+            label: role === "admin" ? "Org admin" : "Member"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -10335,25 +10346,25 @@ function SettingsNavGroupHeader({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
-      className: "flex items-center w-full min-w-0",
-      style: { gap: 6, padding: "2px var(--spacing-md) 4px" },
+      className: "flex flex-col w-full min-w-0",
+      style: { gap: 2, padding: "2px var(--spacing-xl) var(--spacing-sm)" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 flex items-center", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            "span",
-            {
-              style: {
-                fontFamily: "var(--font-family-font-family-body)",
-                fontSize: "var(--font-size-font-size-xxs, 10px)",
-                fontWeight: 500,
-                letterSpacing: "0.08em",
-                textTransform: "uppercase",
-                color: MUTED_COLOR2
-              },
-              children: eyebrow
-            }
-          ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--font-family-font-family-body)",
+              fontSize: "var(--font-size-font-size-xxs, 10px)",
+              fontWeight: 500,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              color: MUTED_COLOR2
+            },
+            children: eyebrow
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center min-w-0", style: { gap: "var(--spacing-md)" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 flex items-center", children: icon }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "span",
             {
@@ -10395,26 +10406,26 @@ function SettingsNav({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
-      className: "flex flex-col items-start shrink-0 relative",
+      className: "flex flex-col items-start shrink-0 relative overflow-y-auto",
       style: {
         backgroundColor: "var(--alias-surface-base)",
         borderRadius: "var(--radius-3xl)",
         padding: "var(--spacing-md)",
         width: 216,
-        gap: "var(--spacing-xl)"
+        maxHeight: "100%",
+        /* A REAL BORDER, not the absolutely-positioned overlay that used to
+         * sit inside this box. Now that the nav scrolls, an `absolute inset-0`
+         * child is positioned against the scrolled CONTENT, so the outline
+         * would slide up out of view and leave the card unbounded. `border`
+         * belongs to the box itself and cannot drift; `box-sizing: border-box`
+         * keeps the 216px width. */
+        border: "1px solid var(--alias-border-subtle)",
+        /* Was `--spacing-xl` (12). The groups and the rules between them sat
+         * closer to each other than the rows inside a group did to their own
+         * heading, so the divisions read as weaker than what they divided. */
+        gap: "var(--spacing-5xl)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: "absolute inset-0 pointer-events-none",
-            style: {
-              border: "1px solid var(--alias-border-subtle)",
-              borderRadius: "var(--radius-3xl)"
-            }
-          }
-        ),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: item("profile", (color) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons12.SiconUser, { className: "w-6 h-6", color })) }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui11.ScHDivider, {}),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: [

package/dist/index.mjs

@@ -2139,7 +2139,7 @@ function OrganizationAffiliationCard({
                         "Failed to change visibility"
                       );
                     },
-                    children: opt === "private" ? "Only its members" : "Everyone in the organization"
+                    children: opt === "private" ? "Only workspace members" : "Everyone in the organization"
                   },
                   opt
                 );
@@ -2398,7 +2398,7 @@ function SettingsTooltip({
 
 // src/teams-content.tsx
 import { useState as useState6, useEffect as useEffect6, useCallback as useCallback2 } from "react";
-import { ScTableHeader, ScRole, ScPendingAction } from "@streamoid/ui";
+import { ScTableHeader, ScPendingAction } from "@streamoid/ui";
 import { ScButton as ScButton3 } from "@streamoid/ui";
 import {
   SiconUserAdd,
@@ -3642,7 +3642,7 @@ function InviteUpdateModal({
 }
 
 // src/member-list.tsx
-import { ScTabSwitcher, ScTabComp, ScOnlyField } from "@streamoid/ui";
+import { ScTabSwitcher, ScTabComp, ScOnlyField, ScRole } from "@streamoid/ui";
 import { SiconSearch as SiconSearch2 } from "@streamoid/icons";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var T7 = {
@@ -3817,8 +3817,22 @@ function OrgMembershipTag({
         border: `1px solid ${isOrgAdmin ? T7.primary : T7.borderSubtle}`,
         backgroundColor: "transparent"
       },
-      title: isOrgAdmin ? `Admin of ${org} \u2014 keeps access to this workspace regardless of what is set here. Manage under Organization \u203A People.` : `Also a member of ${org}. Manage their organization role under Organization \u203A People.`,
-      children: isOrgAdmin ? "org admin" : "in org"
+      title: `Admin of ${org} \u2014 keeps access to this workspace regardless of what is set here. Manage under Organization \u203A People.`,
+      children: "Org admin"
+    }
+  );
+}
+function RoleChip({
+  role,
+  label
+}) {
+  return /* @__PURE__ */ jsx11(
+    ScRole,
+    {
+      type: role,
+      label,
+      className: "shrink-0",
+      style: { width: "auto", minWidth: "5rem" }
     }
   );
 }
@@ -4295,11 +4309,10 @@ function TeamRow({
         ),
         /* @__PURE__ */ jsxs10("div", { className: "flex items-center shrink-0", style: { gap: 6 }, children: [
           /* @__PURE__ */ jsx12(
-            ScRole,
+            RoleChip,
             {
-              type: member.permissions.role,
-              label: member.permissions.role === "admin" ? "Admin" : "Member",
-              className: "shrink-0"
+              role: member.permissions.role === "admin" ? "admin" : "member",
+              label: member.permissions.role === "admin" ? "Workspace admin" : "Member"
             }
           ),
           orgMembership && /* @__PURE__ */ jsx12(
@@ -4923,7 +4936,7 @@ function TeamsContent({
 
 // src/organization-content.tsx
 import { useCallback as useCallback3, useEffect as useEffect9, useState as useState9 } from "react";
-import { ScRole as ScRole2, ScButton as ScButton5 } from "@streamoid/ui";
+import { ScButton as ScButton5 } from "@streamoid/ui";
 import { SiconUserAdd as SiconUserAdd2, SiconGlobe as SiconGlobe2 } from "@streamoid/icons";
 
 // src/organization-invite-modal.tsx
@@ -5969,11 +5982,10 @@ function MemberRow({
           }
         ),
         /* @__PURE__ */ jsx15(
-          ScRole2,
+          RoleChip,
           {
-            type: member.role,
-            label: member.role === "admin" ? "Admin" : "Member",
-            className: "shrink-0"
+            role: member.role === "admin" ? "admin" : "member",
+            label: member.role === "admin" ? "Org admin" : "Member"
           }
         ),
         /* @__PURE__ */ jsx15(
@@ -6078,11 +6090,10 @@ function InviteRow({
           ] })
         ] }),
         /* @__PURE__ */ jsx15(
-          ScRole2,
+          RoleChip,
           {
-            type: role === "admin" ? "admin" : "member",
-            label: role === "admin" ? "Admin" : "Member",
-            className: "shrink-0"
+            role: role === "admin" ? "admin" : "member",
+            label: role === "admin" ? "Org admin" : "Member"
           }
         ),
         /* @__PURE__ */ jsx15(
@@ -10343,25 +10354,25 @@ function SettingsNavGroupHeader({
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: "flex items-center w-full min-w-0",
-      style: { gap: 6, padding: "2px var(--spacing-md) 4px" },
+      className: "flex flex-col w-full min-w-0",
+      style: { gap: 2, padding: "2px var(--spacing-xl) var(--spacing-sm)" },
       children: [
-        /* @__PURE__ */ jsx20("span", { className: "shrink-0 flex items-center", children: icon }),
-        /* @__PURE__ */ jsxs18("div", { className: "flex flex-col min-w-0", children: [
-          /* @__PURE__ */ jsx20(
-            "span",
-            {
-              style: {
-                fontFamily: "var(--font-family-font-family-body)",
-                fontSize: "var(--font-size-font-size-xxs, 10px)",
-                fontWeight: 500,
-                letterSpacing: "0.08em",
-                textTransform: "uppercase",
-                color: MUTED_COLOR2
-              },
-              children: eyebrow
-            }
-          ),
+        /* @__PURE__ */ jsx20(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--font-family-font-family-body)",
+              fontSize: "var(--font-size-font-size-xxs, 10px)",
+              fontWeight: 500,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              color: MUTED_COLOR2
+            },
+            children: eyebrow
+          }
+        ),
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-center min-w-0", style: { gap: "var(--spacing-md)" }, children: [
+          /* @__PURE__ */ jsx20("span", { className: "shrink-0 flex items-center", children: icon }),
           /* @__PURE__ */ jsx20(
             "span",
             {
@@ -10403,26 +10414,26 @@ function SettingsNav({
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: "flex flex-col items-start shrink-0 relative",
+      className: "flex flex-col items-start shrink-0 relative overflow-y-auto",
       style: {
         backgroundColor: "var(--alias-surface-base)",
         borderRadius: "var(--radius-3xl)",
         padding: "var(--spacing-md)",
         width: 216,
-        gap: "var(--spacing-xl)"
+        maxHeight: "100%",
+        /* A REAL BORDER, not the absolutely-positioned overlay that used to
+         * sit inside this box. Now that the nav scrolls, an `absolute inset-0`
+         * child is positioned against the scrolled CONTENT, so the outline
+         * would slide up out of view and leave the card unbounded. `border`
+         * belongs to the box itself and cannot drift; `box-sizing: border-box`
+         * keeps the 216px width. */
+        border: "1px solid var(--alias-border-subtle)",
+        /* Was `--spacing-xl` (12). The groups and the rules between them sat
+         * closer to each other than the rows inside a group did to their own
+         * heading, so the divisions read as weaker than what they divided. */
+        gap: "var(--spacing-5xl)"
       },
       children: [
-        /* @__PURE__ */ jsx20(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: "absolute inset-0 pointer-events-none",
-            style: {
-              border: "1px solid var(--alias-border-subtle)",
-              borderRadius: "var(--radius-3xl)"
-            }
-          }
-        ),
         /* @__PURE__ */ jsx20("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: item("profile", (color) => /* @__PURE__ */ jsx20(SiconUser, { className: "w-6 h-6", color })) }),
         /* @__PURE__ */ jsx20(ScHDivider, {}),
         /* @__PURE__ */ jsxs18("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/settings",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",