@streamoid/settings 0.1.1 → 0.1.2

package/dist/index.d.mts

@@ -52,6 +52,10 @@ interface SettingsAuthUser {
     role?: string;
     company?: string;
     createdAt?: number | string;
+    /** Account-level specialization. Empty string = never answered;
+        "unspecified" = explicit skip; otherwise one of the host-defined ids
+        (e.g. "design", "merchandising"). */
+    userSpecialization?: string;
 }
 interface SettingsAuthAdapter {
     user: SettingsAuthUser | null;
@@ -59,6 +63,7 @@ interface SettingsAuthAdapter {
     updateProfile: (patch: {
         name?: string;
         imageUrl?: string | null;
+        userSpecialization?: string;
     }) => Promise<void>;
     clearAuth: () => void;
     logout: () => Promise<void>;

package/dist/index.d.ts

@@ -52,6 +52,10 @@ interface SettingsAuthUser {
     role?: string;
     company?: string;
     createdAt?: number | string;
+    /** Account-level specialization. Empty string = never answered;
+        "unspecified" = explicit skip; otherwise one of the host-defined ids
+        (e.g. "design", "merchandising"). */
+    userSpecialization?: string;
 }
 interface SettingsAuthAdapter {
     user: SettingsAuthUser | null;
@@ -59,6 +63,7 @@ interface SettingsAuthAdapter {
     updateProfile: (patch: {
         name?: string;
         imageUrl?: string | null;
+        userSpecialization?: string;
     }) => Promise<void>;
     clearAuth: () => void;
     logout: () => Promise<void>;

package/dist/index.js

@@ -6874,11 +6874,274 @@ function SettingsNav({
     }
   );
 }
+var SPECIALIZATION_ICON_SIZE = 20;
+var SPECIALIZATION_OPTIONS = [
+  {
+    id: "design",
+    label: "Design",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_icons7.SiconSwatch,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  },
+  {
+    id: "merchandising",
+    label: "Merchandising",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_icons7.SiconBag,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  },
+  {
+    id: "planning",
+    label: "Planning",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_icons7.SiconInsights,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  },
+  {
+    id: "marketing_brand",
+    label: "Marketing & brand",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_icons7.SiconAdCreator,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  },
+  {
+    id: "founder_operator",
+    label: "Founder & operator",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_icons7.SiconCrown,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  }
+];
+function SpecializationDropdown({
+  value,
+  onChange,
+  disabled
+}) {
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const containerRef = (0, import_react10.useRef)(null);
+  (0, import_react10.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]);
+  const selected = SPECIALIZATION_OPTIONS.find((o) => o.id === value);
+  const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: "flex flex-col items-start w-full",
+      style: { gap: "var(--spacing-xs)", position: "relative" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--font-family-font-family-body)",
+              fontSize: "var(--font-size-font-size-sm)",
+              lineHeight: "var(--line-height-line-height-sm)",
+              color: "var(--alias-text---icons-tertiary)"
+            },
+            children: "Specialization"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && setOpen((v) => !v),
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            style: {
+              width: "100%",
+              height: 48,
+              display: "flex",
+              alignItems: "center",
+              gap: "var(--spacing-md, 8px)",
+              padding: "var(--spacing-xl, 12px) var(--spacing-3xl, 16px)",
+              background: "var(--alias-fill-neutral-neutral, #1a1a1a)",
+              borderRadius: "var(--radius-3xl, 16px)",
+              border: "none",
+              cursor: disabled ? "default" : "pointer",
+              opacity: disabled ? 0.5 : 1,
+              color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)",
+              fontFamily: "var(--font-family-font-family-body)",
+              fontSize: "var(--font-size-font-size-sm)",
+              lineHeight: "var(--line-height-line-height-sm)",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 24,
+                    height: 24,
+                    color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)"
+                  },
+                  children: selected ? selected.icon : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconBolt, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "span",
+                {
+                  style: {
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: labelText
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 24,
+                    height: 24,
+                    color: "var(--alias-text---icons-primary)",
+                    transform: open ? "rotate(180deg)" : "none",
+                    transition: "transform 120ms ease-out"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconDown, {})
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            role: "listbox",
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 50,
+              background: "var(--alias-surface-subtleraised, #1f1f1f)",
+              border: "1px solid var(--alias-border-divider, #242424)",
+              borderRadius: "var(--radius-3xl, 16px)",
+              padding: "var(--spacing-md, 8px)",
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
+            },
+            children: SPECIALIZATION_OPTIONS.map((opt) => {
+              const isActive = opt.id === value;
+              return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isActive,
+                  onClick: () => {
+                    onChange(opt.id);
+                    setOpen(false);
+                  },
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "var(--spacing-md, 8px)",
+                    padding: "var(--spacing-md, 8px) var(--spacing-3xl, 16px)",
+                    background: isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
+                    border: "none",
+                    borderRadius: "var(--radius-md, 8px)",
+                    cursor: "pointer",
+                    color: "var(--alias-text---icons-primary)",
+                    fontFamily: "var(--font-family-font-family-body)",
+                    fontSize: "var(--font-size-font-size-sm)",
+                    lineHeight: "var(--line-height-line-height-sm)",
+                    textAlign: "left",
+                    height: 40
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.background = "var(--alias-fill-neutral-neutralhover, #242424)",
+                  onMouseLeave: (e) => e.currentTarget.style.background = isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      "span",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: 24,
+                          height: 24
+                        },
+                        children: opt.icon
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { flex: 1 }, children: opt.label })
+                  ]
+                },
+                opt.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 function ProfileTab() {
   const { auth, imageUpload, toast } = useSettingsAdapters();
   const user = auth.user;
   const derivedName = user?.name ?? "";
+  const derivedSpec = user?.userSpecialization ?? "";
   const [fullName, setFullName] = (0, import_react10.useState)(derivedName);
+  const [selectedSpec, setSelectedSpec] = (0, import_react10.useState)(derivedSpec);
   const [saving, setSaving] = (0, import_react10.useState)(false);
   const [imageSaving, setImageSaving] = (0, import_react10.useState)(false);
   const [imagePreview, setImagePreview] = (0, import_react10.useState)(
@@ -6889,15 +7152,22 @@ function ProfileTab() {
   const profileImage = imagePreview ?? getUserProfileImage(user);
   const profileInitial = profileDisplayName.charAt(0).toUpperCase();
   const disableAllActions = saving || imageSaving;
+  const dirty = fullName.trim() !== derivedName || selectedSpec !== derivedSpec;
   (0, import_react10.useEffect)(() => {
     setFullName(derivedName);
     setImagePreview(void 0);
   }, [derivedName]);
+  (0, import_react10.useEffect)(() => {
+    setSelectedSpec(derivedSpec);
+  }, [derivedSpec]);
   const handleSave = async () => {
-    if (disableAllActions) return;
+    if (disableAllActions || !dirty) return;
     setSaving(true);
     try {
-      await auth.updateProfile({ name: fullName.trim() });
+      const patch = {};
+      if (fullName.trim() !== derivedName) patch.name = fullName.trim();
+      if (selectedSpec !== derivedSpec) patch.userSpecialization = selectedSpec;
+      await auth.updateProfile(patch);
       await auth.refreshProfile();
       toast.success("Profile updated");
     } catch (err) {
@@ -7108,27 +7378,35 @@ function ProfileTab() {
                       }
                     ) }),
                     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-1 min-w-0", style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      import_ui8.ScTextField,
+                      SpecializationDropdown,
                       {
-                        label: "Email ID",
-                        labelGroup: "label",
-                        state: "default",
-                        value: user?.email ?? "",
-                        placeholderFilled: user?.email ?? "chris@kepler.com",
-                        tfGroup: "icon-right",
-                        tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                          import_icons7.SiconLock,
-                          {
-                            className: "w-6 h-6",
-                            color: "var(--alias-text---icons-primary)"
-                          }
-                        ),
-                        className: "sc-text-field-full-width",
-                        style: { width: "100%" },
-                        readOnly: true
+                        value: selectedSpec,
+                        onChange: setSelectedSpec,
+                        disabled: disableAllActions
                       }
                     ) })
                   ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full", style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    import_ui8.ScTextField,
+                    {
+                      label: "Email ID",
+                      labelGroup: "label",
+                      state: "default",
+                      value: user?.email ?? "",
+                      placeholderFilled: user?.email ?? "chris@kepler.com",
+                      tfGroup: "icon-right",
+                      tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        import_icons7.SiconLock,
+                        {
+                          className: "w-6 h-6",
+                          color: "var(--alias-text---icons-primary)"
+                        }
+                      ),
+                      className: "sc-text-field-full-width",
+                      style: { width: "100%" },
+                      readOnly: true
+                    }
+                  ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                     "div",
                     {
@@ -7141,7 +7419,7 @@ function ProfileTab() {
                             text: saving ? "Saving..." : "Save changes",
                             variant: "secondary",
                             size: "md",
-                            state: saving || fullName.trim() === derivedName ? "disabled" : "default",
+                            state: saving || !dirty ? "disabled" : "default",
                             onClick: handleSave
                           }
                         ),

package/dist/index.mjs

@@ -1,5 +1,10 @@
 // src/settings-content.tsx
-import { useState as useState9, useEffect as useEffect6, useRef as useRef3, useCallback as useCallback5 } from "react";
+import {
+  useState as useState9,
+  useEffect as useEffect6,
+  useRef as useRef3,
+  useCallback as useCallback5
+} from "react";
 import {
   ScSidebarMenu,
   ScVDivider,
@@ -21,7 +26,13 @@ import {
   SiconSettings,
   SiconRight as SiconRight2,
   SiconUserAdd as SiconUserAdd2,
-  SiconLock
+  SiconLock,
+  SiconDown,
+  SiconSwatch,
+  SiconBag,
+  SiconInsights,
+  SiconAdCreator,
+  SiconCrown
 } from "@streamoid/icons";
 
 // src/icons/SiconKey.tsx
@@ -6888,11 +6899,274 @@ function SettingsNav({
     }
   );
 }
+var SPECIALIZATION_ICON_SIZE = 20;
+var SPECIALIZATION_OPTIONS = [
+  {
+    id: "design",
+    label: "Design",
+    icon: /* @__PURE__ */ jsx13(
+      SiconSwatch,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  },
+  {
+    id: "merchandising",
+    label: "Merchandising",
+    icon: /* @__PURE__ */ jsx13(
+      SiconBag,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  },
+  {
+    id: "planning",
+    label: "Planning",
+    icon: /* @__PURE__ */ jsx13(
+      SiconInsights,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  },
+  {
+    id: "marketing_brand",
+    label: "Marketing & brand",
+    icon: /* @__PURE__ */ jsx13(
+      SiconAdCreator,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  },
+  {
+    id: "founder_operator",
+    label: "Founder & operator",
+    icon: /* @__PURE__ */ jsx13(
+      SiconCrown,
+      {
+        style: {
+          width: SPECIALIZATION_ICON_SIZE,
+          height: SPECIALIZATION_ICON_SIZE
+        }
+      }
+    )
+  }
+];
+function SpecializationDropdown({
+  value,
+  onChange,
+  disabled
+}) {
+  const [open, setOpen] = useState9(false);
+  const containerRef = useRef3(null);
+  useEffect6(() => {
+    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]);
+  const selected = SPECIALIZATION_OPTIONS.find((o) => o.id === value);
+  const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      ref: containerRef,
+      className: "flex flex-col items-start w-full",
+      style: { gap: "var(--spacing-xs)", position: "relative" },
+      children: [
+        /* @__PURE__ */ jsx13(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--font-family-font-family-body)",
+              fontSize: "var(--font-size-font-size-sm)",
+              lineHeight: "var(--line-height-line-height-sm)",
+              color: "var(--alias-text---icons-tertiary)"
+            },
+            children: "Specialization"
+          }
+        ),
+        /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && setOpen((v) => !v),
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            style: {
+              width: "100%",
+              height: 48,
+              display: "flex",
+              alignItems: "center",
+              gap: "var(--spacing-md, 8px)",
+              padding: "var(--spacing-xl, 12px) var(--spacing-3xl, 16px)",
+              background: "var(--alias-fill-neutral-neutral, #1a1a1a)",
+              borderRadius: "var(--radius-3xl, 16px)",
+              border: "none",
+              cursor: disabled ? "default" : "pointer",
+              opacity: disabled ? 0.5 : 1,
+              color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)",
+              fontFamily: "var(--font-family-font-family-body)",
+              fontSize: "var(--font-size-font-size-sm)",
+              lineHeight: "var(--line-height-line-height-sm)",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 24,
+                    height: 24,
+                    color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)"
+                  },
+                  children: selected ? selected.icon : /* @__PURE__ */ jsx13(SiconBolt, {})
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  style: {
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: labelText
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 24,
+                    height: 24,
+                    color: "var(--alias-text---icons-primary)",
+                    transform: open ? "rotate(180deg)" : "none",
+                    transition: "transform 120ms ease-out"
+                  },
+                  children: /* @__PURE__ */ jsx13(SiconDown, {})
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx13(
+          "div",
+          {
+            role: "listbox",
+            style: {
+              position: "absolute",
+              top: "calc(100% + 4px)",
+              left: 0,
+              right: 0,
+              zIndex: 50,
+              background: "var(--alias-surface-subtleraised, #1f1f1f)",
+              border: "1px solid var(--alias-border-divider, #242424)",
+              borderRadius: "var(--radius-3xl, 16px)",
+              padding: "var(--spacing-md, 8px)",
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
+            },
+            children: SPECIALIZATION_OPTIONS.map((opt) => {
+              const isActive = opt.id === value;
+              return /* @__PURE__ */ jsxs11(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isActive,
+                  onClick: () => {
+                    onChange(opt.id);
+                    setOpen(false);
+                  },
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "var(--spacing-md, 8px)",
+                    padding: "var(--spacing-md, 8px) var(--spacing-3xl, 16px)",
+                    background: isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
+                    border: "none",
+                    borderRadius: "var(--radius-md, 8px)",
+                    cursor: "pointer",
+                    color: "var(--alias-text---icons-primary)",
+                    fontFamily: "var(--font-family-font-family-body)",
+                    fontSize: "var(--font-size-font-size-sm)",
+                    lineHeight: "var(--line-height-line-height-sm)",
+                    textAlign: "left",
+                    height: 40
+                  },
+                  onMouseEnter: (e) => e.currentTarget.style.background = "var(--alias-fill-neutral-neutralhover, #242424)",
+                  onMouseLeave: (e) => e.currentTarget.style.background = isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
+                  children: [
+                    /* @__PURE__ */ jsx13(
+                      "span",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: 24,
+                          height: 24
+                        },
+                        children: opt.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx13("span", { style: { flex: 1 }, children: opt.label })
+                  ]
+                },
+                opt.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 function ProfileTab() {
   const { auth, imageUpload, toast } = useSettingsAdapters();
   const user = auth.user;
   const derivedName = user?.name ?? "";
+  const derivedSpec = user?.userSpecialization ?? "";
   const [fullName, setFullName] = useState9(derivedName);
+  const [selectedSpec, setSelectedSpec] = useState9(derivedSpec);
   const [saving, setSaving] = useState9(false);
   const [imageSaving, setImageSaving] = useState9(false);
   const [imagePreview, setImagePreview] = useState9(
@@ -6903,15 +7177,22 @@ function ProfileTab() {
   const profileImage = imagePreview ?? getUserProfileImage(user);
   const profileInitial = profileDisplayName.charAt(0).toUpperCase();
   const disableAllActions = saving || imageSaving;
+  const dirty = fullName.trim() !== derivedName || selectedSpec !== derivedSpec;
   useEffect6(() => {
     setFullName(derivedName);
     setImagePreview(void 0);
   }, [derivedName]);
+  useEffect6(() => {
+    setSelectedSpec(derivedSpec);
+  }, [derivedSpec]);
   const handleSave = async () => {
-    if (disableAllActions) return;
+    if (disableAllActions || !dirty) return;
     setSaving(true);
     try {
-      await auth.updateProfile({ name: fullName.trim() });
+      const patch = {};
+      if (fullName.trim() !== derivedName) patch.name = fullName.trim();
+      if (selectedSpec !== derivedSpec) patch.userSpecialization = selectedSpec;
+      await auth.updateProfile(patch);
       await auth.refreshProfile();
       toast.success("Profile updated");
     } catch (err) {
@@ -7122,27 +7403,35 @@ function ProfileTab() {
                       }
                     ) }),
                     /* @__PURE__ */ jsx13("div", { className: "flex-1 min-w-0", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx13(
-                      ScTextField,
+                      SpecializationDropdown,
                       {
-                        label: "Email ID",
-                        labelGroup: "label",
-                        state: "default",
-                        value: user?.email ?? "",
-                        placeholderFilled: user?.email ?? "chris@kepler.com",
-                        tfGroup: "icon-right",
-                        tfRightIcon: /* @__PURE__ */ jsx13(
-                          SiconLock,
-                          {
-                            className: "w-6 h-6",
-                            color: "var(--alias-text---icons-primary)"
-                          }
-                        ),
-                        className: "sc-text-field-full-width",
-                        style: { width: "100%" },
-                        readOnly: true
+                        value: selectedSpec,
+                        onChange: setSelectedSpec,
+                        disabled: disableAllActions
                       }
                     ) })
                   ] }),
+                  /* @__PURE__ */ jsx13("div", { className: "w-full", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx13(
+                    ScTextField,
+                    {
+                      label: "Email ID",
+                      labelGroup: "label",
+                      state: "default",
+                      value: user?.email ?? "",
+                      placeholderFilled: user?.email ?? "chris@kepler.com",
+                      tfGroup: "icon-right",
+                      tfRightIcon: /* @__PURE__ */ jsx13(
+                        SiconLock,
+                        {
+                          className: "w-6 h-6",
+                          color: "var(--alias-text---icons-primary)"
+                        }
+                      ),
+                      className: "sc-text-field-full-width",
+                      style: { width: "100%" },
+                      readOnly: true
+                    }
+                  ) }),
                   /* @__PURE__ */ jsxs11(
                     "div",
                     {
@@ -7155,7 +7444,7 @@ function ProfileTab() {
                             text: saving ? "Saving..." : "Save changes",
                             variant: "secondary",
                             size: "md",
-                            state: saving || fullName.trim() === derivedName ? "disabled" : "default",
+                            state: saving || !dirty ? "disabled" : "default",
                             onClick: handleSave
                           }
                         ),

package/package.json

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