@streamoid/settings 0.1.3 → 0.1.4

package/dist/index.d.mts

@@ -57,6 +57,13 @@ interface SettingsAuthUser {
         (e.g. "design", "merchandising"). */
     userSpecialization?: string;
 }
+/** Option shape returned by `auth.getSpecializations` — drives the
+    Specialization dropdown in Settings → Account. */
+interface SettingsUserSpecialization {
+    id: string;
+    name: string;
+    description?: string;
+}
 interface SettingsAuthAdapter {
     user: SettingsAuthUser | null;
     refreshProfile: () => Promise<void>;
@@ -67,6 +74,9 @@ interface SettingsAuthAdapter {
     }) => Promise<void>;
     clearAuth: () => void;
     logout: () => Promise<void>;
+    /** Optional. When present, the Specialization dropdown is populated from
+        the host's API; otherwise the package falls back to a built-in list. */
+    getSpecializations?: () => Promise<SettingsUserSpecialization[]>;
 }
 interface SettingsWorkspaceCurrent {
     id: string;

package/dist/index.d.ts

@@ -57,6 +57,13 @@ interface SettingsAuthUser {
         (e.g. "design", "merchandising"). */
     userSpecialization?: string;
 }
+/** Option shape returned by `auth.getSpecializations` — drives the
+    Specialization dropdown in Settings → Account. */
+interface SettingsUserSpecialization {
+    id: string;
+    name: string;
+    description?: string;
+}
 interface SettingsAuthAdapter {
     user: SettingsAuthUser | null;
     refreshProfile: () => Promise<void>;
@@ -67,6 +74,9 @@ interface SettingsAuthAdapter {
     }) => Promise<void>;
     clearAuth: () => void;
     logout: () => Promise<void>;
+    /** Optional. When present, the Specialization dropdown is populated from
+        the host's API; otherwise the package falls back to a built-in list. */
+    getSpecializations?: () => Promise<SettingsUserSpecialization[]>;
 }
 interface SettingsWorkspaceCurrent {
     id: string;

package/dist/index.js

@@ -6875,71 +6875,49 @@ 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
-        }
-      }
-    )
-  },
+var SPECIALIZATION_ICON_PROPS = {
+  style: {
+    width: SPECIALIZATION_ICON_SIZE,
+    height: SPECIALIZATION_ICON_SIZE
+  }
+};
+function iconForSpecialization(id) {
+  switch (id) {
+    case "design":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconSwatch, { ...SPECIALIZATION_ICON_PROPS });
+    case "merchandising":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconBag, { ...SPECIALIZATION_ICON_PROPS });
+    case "planning":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconInsights, { ...SPECIALIZATION_ICON_PROPS });
+    case "marketing_brand":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconAdCreator, { ...SPECIALIZATION_ICON_PROPS });
+    case "founder_operator":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconCrown, { ...SPECIALIZATION_ICON_PROPS });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconBolt, { ...SPECIALIZATION_ICON_PROPS });
+  }
+}
+var FALLBACK_SPECIALIZATIONS = [
+  { id: "design", label: "Design", icon: iconForSpecialization("design") },
   {
     id: "merchandising",
     label: "Merchandising",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_icons7.SiconBag,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
+    icon: iconForSpecialization("merchandising")
   },
   {
     id: "planning",
     label: "Planning",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_icons7.SiconInsights,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
+    icon: iconForSpecialization("planning")
   },
   {
     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
-        }
-      }
-    )
+    icon: iconForSpecialization("marketing_brand")
   },
   {
     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
-        }
-      }
-    )
+    icon: iconForSpecialization("founder_operator")
   }
 ];
 function SpecializationDropdown({
@@ -6947,8 +6925,32 @@ function SpecializationDropdown({
   onChange,
   disabled
 }) {
+  const { auth } = useSettingsAdapters();
   const [open, setOpen] = (0, import_react10.useState)(false);
   const containerRef = (0, import_react10.useRef)(null);
+  const [options, setOptions] = (0, import_react10.useState)(
+    FALLBACK_SPECIALIZATIONS
+  );
+  (0, import_react10.useEffect)(() => {
+    if (!auth.getSpecializations) return;
+    let cancelled = false;
+    auth.getSpecializations().then((items) => {
+      if (cancelled) return;
+      if (Array.isArray(items) && items.length > 0) {
+        setOptions(
+          items.map((item) => ({
+            id: item.id,
+            label: item.name,
+            icon: iconForSpecialization(item.id)
+          }))
+        );
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [auth]);
   (0, import_react10.useEffect)(() => {
     if (!open) return;
     function handleMouseDown(e) {
@@ -6966,7 +6968,7 @@ function SpecializationDropdown({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open]);
-  const selected = SPECIALIZATION_OPTIONS.find((o) => o.id === value);
+  const selected = 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",
@@ -7079,7 +7081,7 @@ function SpecializationDropdown({
               gap: 2,
               boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
             },
-            children: SPECIALIZATION_OPTIONS.map((opt) => {
+            children: options.map((opt) => {
               const isActive = opt.id === value;
               return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                 "button",

package/dist/index.mjs

@@ -6900,71 +6900,49 @@ 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
-        }
-      }
-    )
-  },
+var SPECIALIZATION_ICON_PROPS = {
+  style: {
+    width: SPECIALIZATION_ICON_SIZE,
+    height: SPECIALIZATION_ICON_SIZE
+  }
+};
+function iconForSpecialization(id) {
+  switch (id) {
+    case "design":
+      return /* @__PURE__ */ jsx13(SiconSwatch, { ...SPECIALIZATION_ICON_PROPS });
+    case "merchandising":
+      return /* @__PURE__ */ jsx13(SiconBag, { ...SPECIALIZATION_ICON_PROPS });
+    case "planning":
+      return /* @__PURE__ */ jsx13(SiconInsights, { ...SPECIALIZATION_ICON_PROPS });
+    case "marketing_brand":
+      return /* @__PURE__ */ jsx13(SiconAdCreator, { ...SPECIALIZATION_ICON_PROPS });
+    case "founder_operator":
+      return /* @__PURE__ */ jsx13(SiconCrown, { ...SPECIALIZATION_ICON_PROPS });
+    default:
+      return /* @__PURE__ */ jsx13(SiconBolt, { ...SPECIALIZATION_ICON_PROPS });
+  }
+}
+var FALLBACK_SPECIALIZATIONS = [
+  { id: "design", label: "Design", icon: iconForSpecialization("design") },
   {
     id: "merchandising",
     label: "Merchandising",
-    icon: /* @__PURE__ */ jsx13(
-      SiconBag,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
+    icon: iconForSpecialization("merchandising")
   },
   {
     id: "planning",
     label: "Planning",
-    icon: /* @__PURE__ */ jsx13(
-      SiconInsights,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
+    icon: iconForSpecialization("planning")
   },
   {
     id: "marketing_brand",
     label: "Marketing & brand",
-    icon: /* @__PURE__ */ jsx13(
-      SiconAdCreator,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
+    icon: iconForSpecialization("marketing_brand")
   },
   {
     id: "founder_operator",
     label: "Founder & operator",
-    icon: /* @__PURE__ */ jsx13(
-      SiconCrown,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
+    icon: iconForSpecialization("founder_operator")
   }
 ];
 function SpecializationDropdown({
@@ -6972,8 +6950,32 @@ function SpecializationDropdown({
   onChange,
   disabled
 }) {
+  const { auth } = useSettingsAdapters();
   const [open, setOpen] = useState9(false);
   const containerRef = useRef3(null);
+  const [options, setOptions] = useState9(
+    FALLBACK_SPECIALIZATIONS
+  );
+  useEffect6(() => {
+    if (!auth.getSpecializations) return;
+    let cancelled = false;
+    auth.getSpecializations().then((items) => {
+      if (cancelled) return;
+      if (Array.isArray(items) && items.length > 0) {
+        setOptions(
+          items.map((item) => ({
+            id: item.id,
+            label: item.name,
+            icon: iconForSpecialization(item.id)
+          }))
+        );
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [auth]);
   useEffect6(() => {
     if (!open) return;
     function handleMouseDown(e) {
@@ -6991,7 +6993,7 @@ function SpecializationDropdown({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open]);
-  const selected = SPECIALIZATION_OPTIONS.find((o) => o.id === value);
+  const selected = options.find((o) => o.id === value);
   const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
   return /* @__PURE__ */ jsxs11(
     "div",
@@ -7104,7 +7106,7 @@ function SpecializationDropdown({
               gap: 2,
               boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
             },
-            children: SPECIALIZATION_OPTIONS.map((opt) => {
+            children: options.map((opt) => {
               const isActive = opt.id === value;
               return /* @__PURE__ */ jsxs11(
                 "button",

package/package.json

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