@streamoid/settings 0.4.3 → 0.4.5

package/dist/index.d.mts

@@ -104,6 +104,10 @@ interface SettingsAuthUser {
         "unspecified" = explicit skip; otherwise one of the host-defined ids
         (e.g. "design", "merchandising"). */
     userSpecialization?: string;
+    /** Preferred UI language as a code from `USER_LANGUAGES` (e.g. "en", "kn").
+        Absent or empty means the account has never chosen one, which reads as
+        `DEFAULT_USER_LANGUAGE` rather than as blank. */
+    language?: string;
 }
 /** Option shape returned by `auth.getSpecializations` — drives the
     Specialization dropdown in Settings → Account. The host adapter is the
@@ -121,6 +125,7 @@ interface SettingsAuthAdapter {
         name?: string;
         imageUrl?: string | null;
         userSpecialization?: string;
+        language?: string;
     }) => Promise<void>;
     clearAuth: () => void;
     logout: () => Promise<void>;
@@ -978,6 +983,40 @@ declare function TokensContent({ embedded, showRevokedOverride, onShowRevokedCha
     onCreateOpenChange?: (v: boolean) => void;
 }): react.JSX.Element;
 
+/**
+ * The account-level language preference, shared by every Streamoid dashboard.
+ *
+ * Stored as the code and never as the label. `Intl`, the `lang` attribute and
+ * every translation API want "kn"; and a label reworded later ("Portuguese" →
+ * "Português (Brasil)") should be an edit here, not a migration across every
+ * user row. Hosts that want to show the language render the label from this
+ * list rather than keeping a map of their own — one list, so two dashboards
+ * cannot disagree about what "pt" is called.
+ *
+ * Mirrors `userLanguages` in the unified backend, which is the source of truth
+ * and rejects anything outside it.
+ */
+interface UserLanguage {
+    code: string;
+    /** The English name — "Kannada". What the picker shows. */
+    label: string;
+}
+declare const USER_LANGUAGES: readonly UserLanguage[];
+/**
+ * English until somebody says otherwise.
+ *
+ * Unlike a specialization — where "" means never-answered, and the dashboard
+ * has a reason to keep asking — an unanswered language already has a sensible
+ * answer: the language these dashboards are written in. So a profile with no
+ * language reads as English rather than as blank, and the dropdown is never
+ * shown empty.
+ */
+declare const DEFAULT_USER_LANGUAGE = "en";
+/** The label for a code, falling back to the code itself for one this build
+    does not know — a newer dashboard may have written it, and showing "sw" is
+    better than showing nothing. */
+declare function userLanguageLabel(code: string | undefined | null): string;
+
 interface ProfileAvatarProps {
     name: string;
     profileImage?: string;
@@ -1234,4 +1273,4 @@ declare function SettingsAdaptersProvider({ adapters, children, }: {
  */
 declare function useSettingsAdapters(): SettingsAdapters;
 
-export { APP_KEYS, type ApiToken, type AppKey, type AvailableCreditsResponse, BillingContent, type BillingEventPayload, type BillingProduct, type BillingSubscription, BuyCreditsModal, type BuyCreditsPayload, type BuyCreditsResponse, ConfirmDeleteModal, ConfirmLeaveModal, type CreatedToken, type CustomCreditInfo, type CustomCreditResponse, DEFAULT_PERMISSIONS, ExportDateModal, InviteUpdateModal, type InvoicePdfResponse, MemberListFrame, type MemberListFrameProps, type MemberListTab, MemberListToolbar, type MemberListToolbarProps, type MemberPermissionsPayload, OrgMembershipTag, OrganizationContent, type OrganizationData, type OrganizationInvite, OrganizationInviteModal, type OrganizationInviteModalProps, type OrganizationJoinRequest, type OrganizationMember, OrganizationModal, type OrganizationView, type OrganizationWorkspaceItem, type Price, type PriceMetadata, type ProductsResponse, ProfileAvatar, ProfileTab, ReferralTab, SCOPE_LABELS, ScopeHeader, type ScopeHeaderProps, type ServiceItem, type SettingsAdapters, SettingsAdaptersProvider, type SettingsApiAdapter, type SettingsAuthAdapter, type SettingsAuthUser, SettingsContent, type SettingsContentProps, type SettingsImageUploadAdapter, type SettingsNavigationAdapter, type SettingsOrganizationAdapter, type SettingsOrganizationCurrent, type SettingsOrganizationListItem, type SettingsScope, type SettingsTab, type SettingsToastAdapter, SettingsTooltip, type SettingsTooltipPlacement, type SettingsTooltipProps, type SettingsWorkspaceAdapter, type SettingsWorkspaceCurrent, type SettingsWorkspaceListItem, SiconKey, type StoreItem, type SubscriptionPlan, type SubscriptionResponse, TAB_DESCRIPTIONS, TAB_LABELS, TAB_SCOPE, TAB_TO_URL, type TeamMember, TeamsContent, type TokenExpiry, TokensContent, URL_TO_TAB, type UpdateSubscriptionPayload, type UpdateSubscriptionResponse, type UsageHistoryItem, type UsageHistoryResponse, type UserPermissions, type WorkspaceData, WorkspaceGeneralTab, type WorkspaceGeneralTabProps, type WorkspaceInvite, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, WorkspaceTab, countLabel, resolveSettingsTabFromPath, useSettingsAdapters };
+export { APP_KEYS, type ApiToken, type AppKey, type AvailableCreditsResponse, BillingContent, type BillingEventPayload, type BillingProduct, type BillingSubscription, BuyCreditsModal, type BuyCreditsPayload, type BuyCreditsResponse, ConfirmDeleteModal, ConfirmLeaveModal, type CreatedToken, type CustomCreditInfo, type CustomCreditResponse, DEFAULT_PERMISSIONS, DEFAULT_USER_LANGUAGE, ExportDateModal, InviteUpdateModal, type InvoicePdfResponse, MemberListFrame, type MemberListFrameProps, type MemberListTab, MemberListToolbar, type MemberListToolbarProps, type MemberPermissionsPayload, OrgMembershipTag, OrganizationContent, type OrganizationData, type OrganizationInvite, OrganizationInviteModal, type OrganizationInviteModalProps, type OrganizationJoinRequest, type OrganizationMember, OrganizationModal, type OrganizationView, type OrganizationWorkspaceItem, type Price, type PriceMetadata, type ProductsResponse, ProfileAvatar, ProfileTab, ReferralTab, SCOPE_LABELS, ScopeHeader, type ScopeHeaderProps, type ServiceItem, type SettingsAdapters, SettingsAdaptersProvider, type SettingsApiAdapter, type SettingsAuthAdapter, type SettingsAuthUser, SettingsContent, type SettingsContentProps, type SettingsImageUploadAdapter, type SettingsNavigationAdapter, type SettingsOrganizationAdapter, type SettingsOrganizationCurrent, type SettingsOrganizationListItem, type SettingsScope, type SettingsTab, type SettingsToastAdapter, SettingsTooltip, type SettingsTooltipPlacement, type SettingsTooltipProps, type SettingsWorkspaceAdapter, type SettingsWorkspaceCurrent, type SettingsWorkspaceListItem, SiconKey, type StoreItem, type SubscriptionPlan, type SubscriptionResponse, TAB_DESCRIPTIONS, TAB_LABELS, TAB_SCOPE, TAB_TO_URL, type TeamMember, TeamsContent, type TokenExpiry, TokensContent, URL_TO_TAB, USER_LANGUAGES, type UpdateSubscriptionPayload, type UpdateSubscriptionResponse, type UsageHistoryItem, type UsageHistoryResponse, type UserLanguage, type UserPermissions, type WorkspaceData, WorkspaceGeneralTab, type WorkspaceGeneralTabProps, type WorkspaceInvite, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, WorkspaceTab, countLabel, resolveSettingsTabFromPath, useSettingsAdapters, userLanguageLabel };

package/dist/index.d.ts

@@ -104,6 +104,10 @@ interface SettingsAuthUser {
         "unspecified" = explicit skip; otherwise one of the host-defined ids
         (e.g. "design", "merchandising"). */
     userSpecialization?: string;
+    /** Preferred UI language as a code from `USER_LANGUAGES` (e.g. "en", "kn").
+        Absent or empty means the account has never chosen one, which reads as
+        `DEFAULT_USER_LANGUAGE` rather than as blank. */
+    language?: string;
 }
 /** Option shape returned by `auth.getSpecializations` — drives the
     Specialization dropdown in Settings → Account. The host adapter is the
@@ -121,6 +125,7 @@ interface SettingsAuthAdapter {
         name?: string;
         imageUrl?: string | null;
         userSpecialization?: string;
+        language?: string;
     }) => Promise<void>;
     clearAuth: () => void;
     logout: () => Promise<void>;
@@ -978,6 +983,40 @@ declare function TokensContent({ embedded, showRevokedOverride, onShowRevokedCha
     onCreateOpenChange?: (v: boolean) => void;
 }): react.JSX.Element;
 
+/**
+ * The account-level language preference, shared by every Streamoid dashboard.
+ *
+ * Stored as the code and never as the label. `Intl`, the `lang` attribute and
+ * every translation API want "kn"; and a label reworded later ("Portuguese" →
+ * "Português (Brasil)") should be an edit here, not a migration across every
+ * user row. Hosts that want to show the language render the label from this
+ * list rather than keeping a map of their own — one list, so two dashboards
+ * cannot disagree about what "pt" is called.
+ *
+ * Mirrors `userLanguages` in the unified backend, which is the source of truth
+ * and rejects anything outside it.
+ */
+interface UserLanguage {
+    code: string;
+    /** The English name — "Kannada". What the picker shows. */
+    label: string;
+}
+declare const USER_LANGUAGES: readonly UserLanguage[];
+/**
+ * English until somebody says otherwise.
+ *
+ * Unlike a specialization — where "" means never-answered, and the dashboard
+ * has a reason to keep asking — an unanswered language already has a sensible
+ * answer: the language these dashboards are written in. So a profile with no
+ * language reads as English rather than as blank, and the dropdown is never
+ * shown empty.
+ */
+declare const DEFAULT_USER_LANGUAGE = "en";
+/** The label for a code, falling back to the code itself for one this build
+    does not know — a newer dashboard may have written it, and showing "sw" is
+    better than showing nothing. */
+declare function userLanguageLabel(code: string | undefined | null): string;
+
 interface ProfileAvatarProps {
     name: string;
     profileImage?: string;
@@ -1234,4 +1273,4 @@ declare function SettingsAdaptersProvider({ adapters, children, }: {
  */
 declare function useSettingsAdapters(): SettingsAdapters;
 
-export { APP_KEYS, type ApiToken, type AppKey, type AvailableCreditsResponse, BillingContent, type BillingEventPayload, type BillingProduct, type BillingSubscription, BuyCreditsModal, type BuyCreditsPayload, type BuyCreditsResponse, ConfirmDeleteModal, ConfirmLeaveModal, type CreatedToken, type CustomCreditInfo, type CustomCreditResponse, DEFAULT_PERMISSIONS, ExportDateModal, InviteUpdateModal, type InvoicePdfResponse, MemberListFrame, type MemberListFrameProps, type MemberListTab, MemberListToolbar, type MemberListToolbarProps, type MemberPermissionsPayload, OrgMembershipTag, OrganizationContent, type OrganizationData, type OrganizationInvite, OrganizationInviteModal, type OrganizationInviteModalProps, type OrganizationJoinRequest, type OrganizationMember, OrganizationModal, type OrganizationView, type OrganizationWorkspaceItem, type Price, type PriceMetadata, type ProductsResponse, ProfileAvatar, ProfileTab, ReferralTab, SCOPE_LABELS, ScopeHeader, type ScopeHeaderProps, type ServiceItem, type SettingsAdapters, SettingsAdaptersProvider, type SettingsApiAdapter, type SettingsAuthAdapter, type SettingsAuthUser, SettingsContent, type SettingsContentProps, type SettingsImageUploadAdapter, type SettingsNavigationAdapter, type SettingsOrganizationAdapter, type SettingsOrganizationCurrent, type SettingsOrganizationListItem, type SettingsScope, type SettingsTab, type SettingsToastAdapter, SettingsTooltip, type SettingsTooltipPlacement, type SettingsTooltipProps, type SettingsWorkspaceAdapter, type SettingsWorkspaceCurrent, type SettingsWorkspaceListItem, SiconKey, type StoreItem, type SubscriptionPlan, type SubscriptionResponse, TAB_DESCRIPTIONS, TAB_LABELS, TAB_SCOPE, TAB_TO_URL, type TeamMember, TeamsContent, type TokenExpiry, TokensContent, URL_TO_TAB, type UpdateSubscriptionPayload, type UpdateSubscriptionResponse, type UsageHistoryItem, type UsageHistoryResponse, type UserPermissions, type WorkspaceData, WorkspaceGeneralTab, type WorkspaceGeneralTabProps, type WorkspaceInvite, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, WorkspaceTab, countLabel, resolveSettingsTabFromPath, useSettingsAdapters };
+export { APP_KEYS, type ApiToken, type AppKey, type AvailableCreditsResponse, BillingContent, type BillingEventPayload, type BillingProduct, type BillingSubscription, BuyCreditsModal, type BuyCreditsPayload, type BuyCreditsResponse, ConfirmDeleteModal, ConfirmLeaveModal, type CreatedToken, type CustomCreditInfo, type CustomCreditResponse, DEFAULT_PERMISSIONS, DEFAULT_USER_LANGUAGE, ExportDateModal, InviteUpdateModal, type InvoicePdfResponse, MemberListFrame, type MemberListFrameProps, type MemberListTab, MemberListToolbar, type MemberListToolbarProps, type MemberPermissionsPayload, OrgMembershipTag, OrganizationContent, type OrganizationData, type OrganizationInvite, OrganizationInviteModal, type OrganizationInviteModalProps, type OrganizationJoinRequest, type OrganizationMember, OrganizationModal, type OrganizationView, type OrganizationWorkspaceItem, type Price, type PriceMetadata, type ProductsResponse, ProfileAvatar, ProfileTab, ReferralTab, SCOPE_LABELS, ScopeHeader, type ScopeHeaderProps, type ServiceItem, type SettingsAdapters, SettingsAdaptersProvider, type SettingsApiAdapter, type SettingsAuthAdapter, type SettingsAuthUser, SettingsContent, type SettingsContentProps, type SettingsImageUploadAdapter, type SettingsNavigationAdapter, type SettingsOrganizationAdapter, type SettingsOrganizationCurrent, type SettingsOrganizationListItem, type SettingsScope, type SettingsTab, type SettingsToastAdapter, SettingsTooltip, type SettingsTooltipPlacement, type SettingsTooltipProps, type SettingsWorkspaceAdapter, type SettingsWorkspaceCurrent, type SettingsWorkspaceListItem, SiconKey, type StoreItem, type SubscriptionPlan, type SubscriptionResponse, TAB_DESCRIPTIONS, TAB_LABELS, TAB_SCOPE, TAB_TO_URL, type TeamMember, TeamsContent, type TokenExpiry, TokensContent, URL_TO_TAB, USER_LANGUAGES, type UpdateSubscriptionPayload, type UpdateSubscriptionResponse, type UsageHistoryItem, type UsageHistoryResponse, type UserLanguage, type UserPermissions, type WorkspaceData, WorkspaceGeneralTab, type WorkspaceGeneralTabProps, type WorkspaceInvite, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, WorkspaceTab, countLabel, resolveSettingsTabFromPath, useSettingsAdapters, userLanguageLabel };

package/dist/index.js

@@ -26,6 +26,7 @@ __export(index_exports, {
   ConfirmDeleteModal: () => ConfirmDeleteModal,
   ConfirmLeaveModal: () => ConfirmLeaveModal,
   DEFAULT_PERMISSIONS: () => DEFAULT_PERMISSIONS,
+  DEFAULT_USER_LANGUAGE: () => DEFAULT_USER_LANGUAGE,
   ExportDateModal: () => ExportDateModal,
   InviteUpdateModal: () => InviteUpdateModal,
   MemberListFrame: () => MemberListFrame,
@@ -50,13 +51,15 @@ __export(index_exports, {
   TeamsContent: () => TeamsContent,
   TokensContent: () => TokensContent,
   URL_TO_TAB: () => URL_TO_TAB,
+  USER_LANGUAGES: () => USER_LANGUAGES,
   WorkspaceGeneralTab: () => WorkspaceGeneralTab,
   WorkspaceListTab: () => WorkspaceListTab,
   WorkspaceModal: () => WorkspaceModal,
   WorkspaceTab: () => WorkspaceTab,
   countLabel: () => countLabel,
   resolveSettingsTabFromPath: () => resolveSettingsTabFromPath,
-  useSettingsAdapters: () => useSettingsAdapters
+  useSettingsAdapters: () => useSettingsAdapters,
+  userLanguageLabel: () => userLanguageLabel
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -91,6 +94,27 @@ var SiconKey = ({ color = "currentColor", strokeWidth = 1.25, size = 24, ...prop
 };
 var SiconKey_default = SiconKey;
 
+// src/languages.ts
+var USER_LANGUAGES = [
+  { code: "en", label: "English" },
+  { code: "es", label: "Spanish" },
+  { code: "fr", label: "French" },
+  { code: "pt", label: "Portuguese" },
+  { code: "hi", label: "Hindi" },
+  { code: "kn", label: "Kannada" },
+  { code: "te", label: "Telugu" },
+  { code: "ta", label: "Tamil" },
+  { code: "mr", label: "Marathi" },
+  { code: "gu", label: "Gujarati" },
+  { code: "bn", label: "Bengali" },
+  { code: "ar", label: "Arabic" }
+];
+var DEFAULT_USER_LANGUAGE = "en";
+function userLanguageLabel(code) {
+  const resolved = (code || "").trim() || DEFAULT_USER_LANGUAGE;
+  return USER_LANGUAGES.find((lang) => lang.code === resolved)?.label ?? resolved;
+}
+
 // src/workspace-modal.tsx
 var import_react3 = require("react");
 
@@ -2151,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
                 );
@@ -10311,25 +10335,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",
             {
@@ -10371,26 +10395,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: [
@@ -10619,13 +10643,134 @@ function SpecializationDropdown({
     }
   );
 }
+function LanguageDropdown({
+  value,
+  onChange,
+  disabled
+}) {
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const containerRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    if (!open) return;
+    function handleMouseDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: "w-full",
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", { children: DROPDOWN_TRIGGER_STYLES }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: "spec-dropdown-trigger",
+            "data-disabled": disabled ? "true" : "false",
+            onClick: () => !disabled && setOpen((v) => !v),
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_ui12.ScTextField,
+              {
+                label: "Language",
+                labelGroup: "label",
+                value: userLanguageLabel(value),
+                placeholderFilled: "Select language",
+                tfGroup: "icon-right",
+                tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  "span",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      transform: open ? "rotate(180deg)" : "none",
+                      transition: "transform 120ms ease-out"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons12.SiconDown, {})
+                  }
+                ),
+                className: "sc-text-field-full-width",
+                style: { width: "100%" },
+                readOnly: true,
+                disabled
+              }
+            )
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            role: "listbox",
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 50,
+              // The list is longer than the specialization one, so it scrolls
+              // rather than running off the bottom of the panel.
+              maxHeight: 280,
+              overflowY: "auto",
+              background: "var(--alias-surface-subtle, #1a1a1a)",
+              border: "0.5px solid var(--alias-border-subtle, #242424)",
+              borderRadius: "var(--radius-4xl, 18px)",
+              padding: "var(--spacing-md, 8px)",
+              display: "flex",
+              flexDirection: "column",
+              gap: 8,
+              boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+              backdropFilter: "blur(42px)"
+            },
+            children: USER_LANGUAGES.map((lang) => {
+              const isActive = lang.code === value;
+              return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_ui11.ScMenuOptions,
+                {
+                  text: lang.label,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {}),
+                  hover: isActive ? "true" : "false",
+                  variant: "default",
+                  role: "option",
+                  "aria-selected": isActive,
+                  onClick: () => {
+                    onChange(lang.code);
+                    setOpen(false);
+                  },
+                  style: { width: "100%", cursor: "pointer" }
+                },
+                lang.code
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 function ProfileTab() {
   const { auth, imageUpload, toast } = useSettingsAdapters();
   const user = auth.user;
   const derivedName = user?.name ?? "";
   const derivedSpec = user?.userSpecialization ?? "";
+  const derivedLanguage = user?.language?.trim() || DEFAULT_USER_LANGUAGE;
   const [fullName, setFullName] = (0, import_react16.useState)(derivedName);
   const [selectedSpec, setSelectedSpec] = (0, import_react16.useState)(derivedSpec);
+  const [selectedLanguage, setSelectedLanguage] = (0, import_react16.useState)(derivedLanguage);
   const [saving, setSaving] = (0, import_react16.useState)(false);
   const [imageSaving, setImageSaving] = (0, import_react16.useState)(false);
   const [imagePreview, setImagePreview] = (0, import_react16.useState)(
@@ -10636,7 +10781,7 @@ function ProfileTab() {
   const profileImage = imagePreview ?? getUserProfileImage(user);
   const profileInitial = profileDisplayName.charAt(0).toUpperCase();
   const disableAllActions = saving || imageSaving;
-  const dirty = fullName.trim() !== derivedName || selectedSpec !== derivedSpec;
+  const dirty = fullName.trim() !== derivedName || selectedSpec !== derivedSpec || selectedLanguage !== derivedLanguage;
   (0, import_react16.useEffect)(() => {
     setFullName(derivedName);
     setImagePreview(void 0);
@@ -10644,6 +10789,9 @@ function ProfileTab() {
   (0, import_react16.useEffect)(() => {
     setSelectedSpec(derivedSpec);
   }, [derivedSpec]);
+  (0, import_react16.useEffect)(() => {
+    setSelectedLanguage(derivedLanguage);
+  }, [derivedLanguage]);
   const handleSave = async () => {
     if (disableAllActions || !dirty) return;
     setSaving(true);
@@ -10651,6 +10799,8 @@ function ProfileTab() {
       const patch = {};
       if (fullName.trim() !== derivedName) patch.name = fullName.trim();
       if (selectedSpec !== derivedSpec) patch.userSpecialization = selectedSpec;
+      if (selectedLanguage !== derivedLanguage)
+        patch.language = selectedLanguage;
       await auth.updateProfile(patch);
       await auth.refreshProfile();
       toast.success("Profile updated");
@@ -10870,6 +11020,17 @@ function ProfileTab() {
                       }
                     ) })
                   ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-start w-full", style: { gap: "var(--spacing-3xl)" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      LanguageDropdown,
+                      {
+                        value: selectedLanguage,
+                        onChange: setSelectedLanguage,
+                        disabled: disableAllActions
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-w-0" })
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full", style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                     import_ui12.ScTextField,
                     {

package/dist/index.mjs

@@ -58,6 +58,27 @@ var SiconKey = ({ color = "currentColor", strokeWidth = 1.25, size = 24, ...prop
 };
 var SiconKey_default = SiconKey;
 
+// src/languages.ts
+var USER_LANGUAGES = [
+  { code: "en", label: "English" },
+  { code: "es", label: "Spanish" },
+  { code: "fr", label: "French" },
+  { code: "pt", label: "Portuguese" },
+  { code: "hi", label: "Hindi" },
+  { code: "kn", label: "Kannada" },
+  { code: "te", label: "Telugu" },
+  { code: "ta", label: "Tamil" },
+  { code: "mr", label: "Marathi" },
+  { code: "gu", label: "Gujarati" },
+  { code: "bn", label: "Bengali" },
+  { code: "ar", label: "Arabic" }
+];
+var DEFAULT_USER_LANGUAGE = "en";
+function userLanguageLabel(code) {
+  const resolved = (code || "").trim() || DEFAULT_USER_LANGUAGE;
+  return USER_LANGUAGES.find((lang) => lang.code === resolved)?.label ?? resolved;
+}
+
 // src/workspace-modal.tsx
 import { useState, useRef as useRef2, useEffect as useEffect2 } from "react";
 
@@ -2118,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
                 );
@@ -10322,25 +10343,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",
             {
@@ -10382,26 +10403,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: [
@@ -10630,13 +10651,134 @@ function SpecializationDropdown({
     }
   );
 }
+function LanguageDropdown({
+  value,
+  onChange,
+  disabled
+}) {
+  const [open, setOpen] = useState14(false);
+  const containerRef = useRef7(null);
+  useEffect12(() => {
+    if (!open) return;
+    function handleMouseDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref: containerRef,
+      className: "w-full",
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ jsx20("style", { children: DROPDOWN_TRIGGER_STYLES }),
+        /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "spec-dropdown-trigger",
+            "data-disabled": disabled ? "true" : "false",
+            onClick: () => !disabled && setOpen((v) => !v),
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            children: /* @__PURE__ */ jsx20(
+              ScTextField,
+              {
+                label: "Language",
+                labelGroup: "label",
+                value: userLanguageLabel(value),
+                placeholderFilled: "Select language",
+                tfGroup: "icon-right",
+                tfRightIcon: /* @__PURE__ */ jsx20(
+                  "span",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      transform: open ? "rotate(180deg)" : "none",
+                      transition: "transform 120ms ease-out"
+                    },
+                    children: /* @__PURE__ */ jsx20(SiconDown, {})
+                  }
+                ),
+                className: "sc-text-field-full-width",
+                style: { width: "100%" },
+                readOnly: true,
+                disabled
+              }
+            )
+          }
+        ),
+        open && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            role: "listbox",
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 50,
+              // The list is longer than the specialization one, so it scrolls
+              // rather than running off the bottom of the panel.
+              maxHeight: 280,
+              overflowY: "auto",
+              background: "var(--alias-surface-subtle, #1a1a1a)",
+              border: "0.5px solid var(--alias-border-subtle, #242424)",
+              borderRadius: "var(--radius-4xl, 18px)",
+              padding: "var(--spacing-md, 8px)",
+              display: "flex",
+              flexDirection: "column",
+              gap: 8,
+              boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+              backdropFilter: "blur(42px)"
+            },
+            children: USER_LANGUAGES.map((lang) => {
+              const isActive = lang.code === value;
+              return /* @__PURE__ */ jsx20(
+                ScMenuOptions,
+                {
+                  text: lang.label,
+                  icon: /* @__PURE__ */ jsx20(Fragment12, {}),
+                  hover: isActive ? "true" : "false",
+                  variant: "default",
+                  role: "option",
+                  "aria-selected": isActive,
+                  onClick: () => {
+                    onChange(lang.code);
+                    setOpen(false);
+                  },
+                  style: { width: "100%", cursor: "pointer" }
+                },
+                lang.code
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 function ProfileTab() {
   const { auth, imageUpload, toast } = useSettingsAdapters();
   const user = auth.user;
   const derivedName = user?.name ?? "";
   const derivedSpec = user?.userSpecialization ?? "";
+  const derivedLanguage = user?.language?.trim() || DEFAULT_USER_LANGUAGE;
   const [fullName, setFullName] = useState14(derivedName);
   const [selectedSpec, setSelectedSpec] = useState14(derivedSpec);
+  const [selectedLanguage, setSelectedLanguage] = useState14(derivedLanguage);
   const [saving, setSaving] = useState14(false);
   const [imageSaving, setImageSaving] = useState14(false);
   const [imagePreview, setImagePreview] = useState14(
@@ -10647,7 +10789,7 @@ function ProfileTab() {
   const profileImage = imagePreview ?? getUserProfileImage(user);
   const profileInitial = profileDisplayName.charAt(0).toUpperCase();
   const disableAllActions = saving || imageSaving;
-  const dirty = fullName.trim() !== derivedName || selectedSpec !== derivedSpec;
+  const dirty = fullName.trim() !== derivedName || selectedSpec !== derivedSpec || selectedLanguage !== derivedLanguage;
   useEffect12(() => {
     setFullName(derivedName);
     setImagePreview(void 0);
@@ -10655,6 +10797,9 @@ function ProfileTab() {
   useEffect12(() => {
     setSelectedSpec(derivedSpec);
   }, [derivedSpec]);
+  useEffect12(() => {
+    setSelectedLanguage(derivedLanguage);
+  }, [derivedLanguage]);
   const handleSave = async () => {
     if (disableAllActions || !dirty) return;
     setSaving(true);
@@ -10662,6 +10807,8 @@ function ProfileTab() {
       const patch = {};
       if (fullName.trim() !== derivedName) patch.name = fullName.trim();
       if (selectedSpec !== derivedSpec) patch.userSpecialization = selectedSpec;
+      if (selectedLanguage !== derivedLanguage)
+        patch.language = selectedLanguage;
       await auth.updateProfile(patch);
       await auth.refreshProfile();
       toast.success("Profile updated");
@@ -10881,6 +11028,17 @@ function ProfileTab() {
                       }
                     ) })
                   ] }),
+                  /* @__PURE__ */ jsxs18("div", { className: "flex items-start w-full", style: { gap: "var(--spacing-3xl)" }, children: [
+                    /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx20(
+                      LanguageDropdown,
+                      {
+                        value: selectedLanguage,
+                        onChange: setSelectedLanguage,
+                        disabled: disableAllActions
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0" })
+                  ] }),
                   /* @__PURE__ */ jsx20("div", { className: "w-full", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx20(
                     ScTextField,
                     {
@@ -11983,6 +12141,7 @@ export {
   ConfirmDeleteModal,
   ConfirmLeaveModal,
   DEFAULT_PERMISSIONS,
+  DEFAULT_USER_LANGUAGE,
   ExportDateModal,
   InviteUpdateModal,
   MemberListFrame,
@@ -12007,11 +12166,13 @@ export {
   TeamsContent,
   TokensContent,
   URL_TO_TAB,
+  USER_LANGUAGES,
   WorkspaceGeneralTab,
   WorkspaceListTab,
   WorkspaceModal,
   WorkspaceTab,
   countLabel,
   resolveSettingsTabFromPath,
-  useSettingsAdapters
+  useSettingsAdapters,
+  userLanguageLabel
 };

package/package.json

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