@stackframe/stack 2.8.16 → 2.8.17

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @stackframe/stack
 
+## 2.8.17
+
+### Patch Changes
+
+- @stackframe/stack-sc@2.8.17
+- @stackframe/stack-shared@2.8.17
+- @stackframe/stack-ui@2.8.17
+
 ## 2.8.16
 
 ### Patch Changes

package/dist/components/selected-team-switcher.js

@@ -25,6 +25,7 @@ __export(selected_team_switcher_exports, {
   SelectedTeamSwitcher: () => SelectedTeamSwitcher
 });
 module.exports = __toCommonJS(selected_team_switcher_exports);
+var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
 var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_lucide_react = require("lucide-react");
@@ -70,14 +71,22 @@ function Inner(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_stack_ui.Select,
     {
-      value: selectedTeam?.id,
+      value: selectedTeam?.id || (props.allowNull ? "null-sentinel" : void 0),
       onValueChange: (value) => {
-        if (props.mockUser) return;
         (0, import_promises.runAsynchronouslyWithAlert)(async () => {
-          const team = teams?.find((team2) => team2.id === value);
-          if (!team) {
-            throw new Error("Team not found, this should not happen");
+          let team = null;
+          if (value !== "null-sentinel") {
+            team = teams?.find((team2) => team2.id === value) || null;
+            if (!team) {
+              throw new import_errors.StackAssertionError("Team not found, this should not happen");
+            }
+          } else {
+            team = null;
           }
+          if (props.onChange) {
+            props.onChange(team);
+          }
+          if (props.mockUser) return;
           if (!props.noUpdateSelectedTeam) {
             await user?.setSelectedTeam(team);
           }
@@ -112,13 +121,18 @@ function Inner(props) {
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "max-w-40 truncate", children: user.selectedTeam.displayName })
             ] }) })
           ] }) : void 0,
+          props.allowNull && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectItem, { value: "null-sentinel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_icon.TeamIcon, { team: "personal" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "max-w-40 truncate", children: props.nullLabel || t("No team") })
+          ] }) }) }),
           teams?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.SelectGroup, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectLabel, { children: t("Other teams") }),
             teams.filter((team) => team.id !== user?.selectedTeam?.id).map((team) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectItem, { value: team.id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_icon.TeamIcon, { team }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "max-w-64 truncate", children: team.displayName })
             ] }) }, team.id))
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectLabel, { children: t("No teams yet") }) }),
+          ] }) : null,
+          !teams?.length && !props.allowNull ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectLabel, { children: t("No teams yet") }) }) : null,
           project.config.clientTeamCreationEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectSeparator, {}),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/components/selected-team-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { Suspense, useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n  // Mock data props\n  mockUser?: {\n    selectedTeam?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner(props: SelectedTeamSwitcherProps) {\n  const { t } = useTranslation();\n  const appFromHook = useStackApp();\n  const userFromHook = useUser();\n\n  // Use mock data if provided, otherwise use real data\n  const app = props.mockUser ? {\n    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },\n    useNavigate: () => () => {}, // Mock navigate function\n    urls: { accountSettings: '/account-settings' },\n  } : appFromHook;\n\n  const user = props.mockUser ? {\n    selectedTeam: props.mockUser.selectedTeam,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const project = app.useProject();\n  const navigate = app.useNavigate();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam, props.mockUser]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        // Skip actual navigation/updates in mock mode\n        if (props.mockUser) return;\n\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team as Team);\n          }\n          if (props.urlMap) {\n            navigate(props.urlMap(team as Team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button\n                variant='ghost'\n                size='icon'\n                className=\"h-6 w-6\"\n                onClick={() => {\n                  // Skip navigation in mock mode\n                  if (!props.mockUser) {\n                    navigate(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`);\n                  }\n                }}\n              >\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam as Team} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team as Team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => {\n                // Skip navigation in mock mode\n                if (!props.mockUser) {\n                  navigate(`${app.urls.accountSettings}#team-creation`);\n                }\n              }}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}
+{"version":3,"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { StackAssertionError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { Suspense, useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype SelectedTeamSwitcherProps<AllowNull extends boolean = false> = {\n  urlMap?: (team: AllowNull extends true ? Team | null : Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n  allowNull?: AllowNull,\n  nullLabel?: string,\n  onChange?: (team: AllowNull extends true ? Team | null : Team) => void,\n  // Mock data props\n  mockUser?: {\n    selectedTeam?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function SelectedTeamSwitcher<AllowNull extends boolean = false>(props: SelectedTeamSwitcherProps<AllowNull>) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner<AllowNull extends boolean>(props: SelectedTeamSwitcherProps<AllowNull>) {\n  const { t } = useTranslation();\n  const appFromHook = useStackApp();\n  const userFromHook = useUser();\n\n  // Use mock data if provided, otherwise use real data\n  const app = props.mockUser ? {\n    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },\n    useNavigate: () => () => {}, // Mock navigate function\n    urls: { accountSettings: '/account-settings' },\n  } : appFromHook;\n\n  const user = props.mockUser ? {\n    selectedTeam: props.mockUser.selectedTeam,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const project = app.useProject();\n  const navigate = app.useNavigate();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam, props.mockUser]);\n\n  return (\n    <Select\n      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          let team: MockTeam | null = null;\n          if (value !== 'null-sentinel') {\n            team = teams?.find(team => team.id === value) || null;\n            if (!team) {\n              throw new StackAssertionError('Team not found, this should not happen');\n            }\n          } else {\n            team = null;\n          }\n\n          // Call onChange callback if provided\n          if (props.onChange) {\n            props.onChange(team as Team);\n          }\n\n          // Skip actual navigation/updates in mock mode\n          if (props.mockUser) return;\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team as Team);\n          }\n          if (props.urlMap) {\n            navigate(props.urlMap(team as Team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button\n                variant='ghost'\n                size='icon'\n                className=\"h-6 w-6\"\n                onClick={() => {\n                  // Skip navigation in mock mode\n                  if (!props.mockUser) {\n                    navigate(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`);\n                  }\n                }}\n              >\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam as Team} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {props.allowNull && <SelectGroup>\n          <SelectItem value=\"null-sentinel\">\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team='personal' />\n              <Typography className=\"max-w-40 truncate\">{props.nullLabel || t('No team')}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup>}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team as Team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> : null}\n\n        {!teams?.length && !props.allowNull ?\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup> : null}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => {\n                // Skip navigation in mock mode\n                if (!props.mockUser) {\n                  navigate(`${app.urls.accountSettings}#team-creation`);\n                }\n              }}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}

package/dist/components/team-icon.js

@@ -24,8 +24,12 @@ __export(team_icon_exports, {
 });
 module.exports = __toCommonJS(team_icon_exports);
 var import_stack_ui = require("@stackframe/stack-ui");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function TeamIcon(props) {
+  if (props.team === "personal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.User2, { className: "w-4 h-4" }) });
+  }
   if (props.team.profileImageUrl) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Avatar, { className: "min-w-6 min-h-6 max-w-6 max-h-6 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarImage, { src: props.team.profileImageUrl, alt: props.team.displayName }) });
   } else {

package/dist/components/team-icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\nimport { Team } from \"..\";\n\nexport function TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <Avatar className=\"min-w-6 min-h-6 max-w-6 max-h-6 rounded\">\n        <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />\n      </Avatar>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <Typography className=\"text-zinc-800 dark:text-zinc-800\">{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,sBAAgD;AAOxC;AAJD,SAAS,SAAS,OAAuB;AAC9C,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,4CAAC,0BAAO,WAAU,2CAChB,sDAAC,+BAAY,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,GAC7E;AAAA,EAEJ,OAAO;AACL,WACE,4CAAC,SAAI,WAAU,wFACb,sDAAC,8BAAW,WAAU,oCAAoC,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC7G;AAAA,EAEJ;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\nimport { User2 } from \"lucide-react\";\nimport { Team } from \"..\";\n\nexport function TeamIcon(props: { team: Team | 'personal' }) {\n  if (props.team === 'personal') {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <User2 className=\"w-4 h-4\" />\n      </div>\n    );\n  }\n  if (props.team.profileImageUrl) {\n    return (\n      <Avatar className=\"min-w-6 min-h-6 max-w-6 max-h-6 rounded\">\n        <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />\n      </Avatar>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <Typography className=\"text-zinc-800 dark:text-zinc-800\">{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,sBAAgD;AAChD,0BAAsB;AAOd;AAJD,SAAS,SAAS,OAAoC;AAC3D,MAAI,MAAM,SAAS,YAAY;AAC7B,WACE,4CAAC,SAAI,WAAU,wFACb,sDAAC,6BAAM,WAAU,WAAU,GAC7B;AAAA,EAEJ;AACA,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,4CAAC,0BAAO,WAAU,2CAChB,sDAAC,+BAAY,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,GAC7E;AAAA,EAEJ,OAAO;AACL,WACE,4CAAC,SAAI,WAAU,wFACb,sDAAC,8BAAW,WAAU,oCAAoC,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC7G;AAAA,EAEJ;AACF;","names":[]}

package/dist/components-page/account-settings/notifications/notifications-page.js

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components-page/account-settings/notifications/notifications-page.tsx
+var notifications_page_exports = {};
+__export(notifications_page_exports, {
+  NotificationsPage: () => NotificationsPage
+});
+module.exports = __toCommonJS(notifications_page_exports);
+var import_hooks = require("../../../lib/hooks.js");
+var import_translations = require("../../../lib/translations.js");
+var import_page_layout = require("../page-layout.js");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_stack_ui2 = require("@stackframe/stack-ui");
+var import_jsx_runtime = require("react/jsx-runtime");
+function NotificationsPage() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import_hooks.useUser)({ or: "redirect" });
+  const notificationCategories = user.useNotificationCategories();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_page_layout.PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui2.Separator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sm:flex-1 flex flex-col justify-center pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui2.Typography, { className: "font-medium", children: t("Choose which emails you want to receive") }) }),
+      notificationCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-start gap-4 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Switch,
+          {
+            checked: category.enabled,
+            onCheckedChange: (value) => void category.setEnabled(value),
+            disabled: !category.canDisable
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui2.Typography, { children: category.name }),
+        !category.canDisable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui2.Typography, { variant: "secondary", type: "footnote", children: "(cannot be disabled)" })
+      ] }, category.id))
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NotificationsPage
+});
+//# sourceMappingURL=notifications-page.js.map

package/dist/components-page/account-settings/notifications/notifications-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Switch } from \"@stackframe/stack-ui\";\nimport { Separator, Typography } from \"@stackframe/stack-ui\";\n\n\nexport function NotificationsPage() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const notificationCategories = user.useNotificationCategories();\n\n  return (\n    <PageLayout>\n      <Separator />\n      <div className='flex flex-col gap-2'>\n        <div className='sm:flex-1 flex flex-col justify-center pb-2'>\n          <Typography className=\"font-medium\">\n            {t('Choose which emails you want to receive')}\n          </Typography>\n        </div>\n        {notificationCategories.map((category) => (\n          <div key={category.id} className=\"flex justify-start gap-4 items-center\">\n            <Switch\n              checked={category.enabled}\n              onCheckedChange={(value) => void category.setEnabled(value)}\n              disabled={!category.canDisable}\n            />\n            <Typography>{category.name}</Typography>\n            {!category.canDisable && (\n              <Typography variant='secondary' type='footnote'>\n                (cannot be disabled)\n              </Typography>\n            )}\n          </div>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAwB;AACxB,0BAA+B;AAC/B,yBAA2B;AAC3B,sBAAuB;AACvB,IAAAA,mBAAsC;AAUhC;AAPC,SAAS,oBAAoB;AAClC,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,WAAO,sBAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,yBAAyB,KAAK,0BAA0B;AAE9D,SACE,6CAAC,iCACC;AAAA,gDAAC,8BAAU;AAAA,IACX,6CAAC,SAAI,WAAU,uBACb;AAAA,kDAAC,SAAI,WAAU,+CACb,sDAAC,+BAAW,WAAU,eACnB,YAAE,yCAAyC,GAC9C,GACF;AAAA,MACC,uBAAuB,IAAI,CAAC,aAC3B,6CAAC,SAAsB,WAAU,yCAC/B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,SAAS;AAAA,YAClB,iBAAiB,CAAC,UAAU,KAAK,SAAS,WAAW,KAAK;AAAA,YAC1D,UAAU,CAAC,SAAS;AAAA;AAAA,QACtB;AAAA,QACA,4CAAC,+BAAY,mBAAS,MAAK;AAAA,QAC1B,CAAC,SAAS,cACT,4CAAC,+BAAW,SAAQ,aAAY,MAAK,YAAW,kCAEhD;AAAA,WAVM,SAAS,EAYnB,CACD;AAAA,OACH;AAAA,KACF;AAEJ;","names":["import_stack_ui"]}

package/dist/components-page/account-settings.js

@@ -36,6 +36,7 @@ var import_translations = require("../lib/translations.js");
 var import_active_sessions_page = require("./account-settings/active-sessions/active-sessions-page.js");
 var import_api_keys_page = require("./account-settings/api-keys/api-keys-page.js");
 var import_email_and_auth_page = require("./account-settings/email-and-auth/email-and-auth-page.js");
+var import_notifications_page = require("./account-settings/notifications/notifications-page.js");
 var import_profile_page = require("./account-settings/profile-page/profile-page.js");
 var import_settings_page = require("./account-settings/settings/settings-page.js");
 var import_team_creation_page = require("./account-settings/teams/team-creation-page.js");
@@ -77,6 +78,13 @@ function AccountSettings(props) {
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "ShieldCheck" }),
           content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsAndAuthPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_email_and_auth_page.EmailsAndAuthPage, { mockMode: !!props.mockUser }) })
         },
+        {
+          title: t("Notifications"),
+          type: "item",
+          id: "notifications",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Bell" }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotificationsPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_notifications_page.NotificationsPage, {}) })
+        },
         {
           title: t("Active Sessions"),
           type: "item",
@@ -176,6 +184,12 @@ function TeamCreationSkeleton() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })
   ] });
 }
+function NotificationsPageSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AccountSettings

package/dist/components-page/account-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { Skeleton, Typography } from '@stackframe/stack-ui';\nimport { icons } from 'lucide-react';\nimport React, { Suspense } from \"react\";\nimport { useStackApp, useUser } from '..';\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { TeamIcon } from '../components/team-icon';\nimport { useTranslation } from \"../lib/translations\";\nimport { ActiveSessionsPage } from \"./account-settings/active-sessions/active-sessions-page\";\nimport { ApiKeysPage } from \"./account-settings/api-keys/api-keys-page\";\nimport { EmailsAndAuthPage } from './account-settings/email-and-auth/email-and-auth-page';\nimport { ProfilePage } from \"./account-settings/profile-page/profile-page\";\nimport { SettingsPage } from './account-settings/settings/settings-page';\nimport { TeamCreationPage } from './account-settings/teams/team-creation-page';\nimport { TeamPage } from './account-settings/teams/team-page';\n\nconst Icon = ({ name }: { name: keyof typeof icons }) => {\n  const LucideIcon = icons[name];\n  return <LucideIcon className=\"mr-2 h-4 w-4\"/>;\n};\n\nexport function AccountSettings(props: {\n  fullPage?: boolean,\n  extraItems?: ({\n    title: string,\n    content: React.ReactNode,\n    id: string,\n  } & ({\n    icon?: React.ReactNode,\n  } | {\n    iconName?: keyof typeof icons,\n  }))[],\n  mockUser?: {\n    displayName?: string,\n    profileImageUrl?: string,\n  },\n  mockApiKeys?: Array<{\n    id: string,\n    description: string,\n    createdAt: string,\n    expiresAt?: string,\n    manuallyRevokedAt?: string,\n  }>,\n  mockProject?: {\n    config: {\n      allowUserApiKeys: boolean,\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n  mockSessions?: Array<{\n    id: string,\n    isCurrentSession: boolean,\n    isImpersonation?: boolean,\n    createdAt: string,\n    lastUsedAt?: string,\n    geoInfo?: {\n      ip?: string,\n      cityName?: string,\n    },\n  }>,\n}) {\n  const { t } = useTranslation();\n  const userFromHook = useUser({ or: props.mockUser ? 'return-null' : 'redirect' });\n  const stackApp = useStackApp();\n  const projectFromHook = stackApp.useProject();\n\n  // Use mock data if provided, otherwise use real data\n  const user = props.mockUser ? {\n    useTeams: () => [], // Mock empty teams for now\n  } : userFromHook;\n\n  const project = props.mockProject || projectFromHook;\n  const teams = user?.useTeams() || [];\n\n  // If we're not in mock mode and don't have a user, the useUser hook will handle redirect\n  if (!props.mockUser && !userFromHook) {\n    return null;\n  }\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className=\"self-stretch flex-grow w-full\">\n        <SidebarLayout\n          items={([\n            {\n              title: t('My Profile'),\n              type: 'item',\n              id: 'profile',\n              icon: <Icon name=\"Contact\"/>,\n              content: <ProfilePage mockUser={props.mockUser}/>,\n            },\n            {\n              title: t('Emails & Auth'),\n              type: 'item',\n              id: 'auth',\n              icon: <Icon name=\"ShieldCheck\"/>,\n              content: <Suspense fallback={<EmailsAndAuthPageSkeleton/>}>\n                <EmailsAndAuthPage mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            {\n              title: t('Active Sessions'),\n              type: 'item',\n              id: 'sessions',\n              icon: <Icon name=\"Monitor\"/>,\n              content: <Suspense fallback={<ActiveSessionsPageSkeleton/>}>\n                <ActiveSessionsPage mockSessions={props.mockSessions} mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            ...(project.config.allowUserApiKeys ? [{\n              title: t('API Keys'),\n              type: 'item',\n              id: 'api-keys',\n              icon: <Icon name=\"Key\" />,\n              content: <Suspense fallback={<ApiKeysPageSkeleton/>}>\n                <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : []),\n            {\n              title: t('Settings'),\n              type: 'item',\n              id: 'settings',\n              icon: <Icon name=\"Settings\"/>,\n              content: <SettingsPage mockMode={!!props.mockUser}/>,\n            },\n            ...(props.extraItems?.map(item => ({\n              title: item.title,\n              type: 'item',\n              id: item.id,\n              icon: (() => {\n                const iconName = (item as any).iconName as keyof typeof icons | undefined;\n                if (iconName) {\n                  return <Icon name={iconName}/>;\n                } else if ((item as any).icon) {\n                  return (item as any).icon;\n                }\n                return null;\n              })(),\n              content: item.content,\n            } as const)) || []),\n            ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n              title: t('Teams'),\n              type: 'divider',\n            }] as const : [],\n            ...teams.map(team => ({\n              title: <div className='flex gap-2 items-center w-full'>\n                <TeamIcon team={team}/>\n                <Typography className=\"max-w-[320px] md:w-[90%] truncate\">{team.displayName}</Typography>\n              </div>,\n              type: 'item',\n              id: `team-${team.id}`,\n              content: <Suspense fallback={<TeamPageSkeleton/>}>\n                <TeamPage team={team}/>\n              </Suspense>,\n            } as const)),\n            ...project.config.clientTeamCreationEnabled ? [{\n              title: t('Create a team'),\n              icon: <Icon name=\"CirclePlus\"/>,\n              type: 'item',\n              id: 'team-creation',\n              content: <Suspense fallback={<TeamCreationSkeleton/>}>\n                <TeamCreationPage mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : [],\n          ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n          title={t(\"Account Settings\")}\n        />\n      </div>\n    </MaybeFullPage>\n  );\n}\n\nfunction PageLayout(props: { children: React.ReactNode }) {\n  return (\n    <div className='flex flex-col gap-6'>\n      {props.children}\n    </div>\n  );\n}\n\nfunction EmailsAndAuthPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n\nfunction ActiveSessionsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-6 w-48 mb-2\"/>\n    <Skeleton className=\"h-4 w-full mb-4\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction ApiKeysPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamCreationSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,sBAAqC;AACrC,0BAAsB;AACtB,mBAAgC;AAChC,eAAqC;AACrC,6BAA8B;AAC9B,4BAA8B;AAC9B,uBAAyB;AACzB,0BAA+B;AAC/B,kCAAmC;AACnC,2BAA4B;AAC5B,iCAAkC;AAClC,0BAA4B;AAC5B,2BAA6B;AAC7B,gCAAiC;AACjC,uBAAyB;AAIhB;AAFT,IAAM,OAAO,CAAC,EAAE,KAAK,MAAoC;AACvD,QAAM,aAAa,0BAAM,IAAI;AAC7B,SAAO,4CAAC,cAAW,WAAU,gBAAc;AAC7C;AAEO,SAAS,gBAAgB,OAuC7B;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,mBAAe,kBAAQ,EAAE,IAAI,MAAM,WAAW,gBAAgB,WAAW,CAAC;AAChF,QAAM,eAAW,sBAAY;AAC7B,QAAM,kBAAkB,SAAS,WAAW;AAG5C,QAAM,OAAO,MAAM,WAAW;AAAA,IAC5B,UAAU,MAAM,CAAC;AAAA;AAAA,EACnB,IAAI;AAEJ,QAAM,UAAU,MAAM,eAAe;AACrC,QAAM,QAAQ,MAAM,SAAS,KAAK,CAAC;AAGnC,MAAI,CAAC,MAAM,YAAY,CAAC,cAAc;AACpC,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,wCAAc,UAAU,CAAC,CAAC,MAAM,UAC/B,sDAAC,SAAI,WAAU,iCACb;AAAA,IAAC;AAAA;AAAA,MACC,OAAQ;AAAA,QACN;AAAA,UACE,OAAO,EAAE,YAAY;AAAA,UACrB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,WAAS;AAAA,UAC1B,SAAS,4CAAC,mCAAY,UAAU,MAAM,UAAS;AAAA,QACjD;AAAA,QACA;AAAA,UACE,OAAO,EAAE,eAAe;AAAA,UACxB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,eAAa;AAAA,UAC9B,SAAS,4CAAC,yBAAS,UAAU,4CAAC,6BAAyB,GACrD,sDAAC,gDAAkB,UAAU,CAAC,CAAC,MAAM,UAAS,GAChD;AAAA,QACF;AAAA,QACA;AAAA,UACE,OAAO,EAAE,iBAAiB;AAAA,UAC1B,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,WAAS;AAAA,UAC1B,SAAS,4CAAC,yBAAS,UAAU,4CAAC,8BAA0B,GACtD,sDAAC,kDAAmB,cAAc,MAAM,cAAc,UAAU,CAAC,CAAC,MAAM,UAAS,GACnF;AAAA,QACF;AAAA,QACA,GAAI,QAAQ,OAAO,mBAAmB,CAAC;AAAA,UACrC,OAAO,EAAE,UAAU;AAAA,UACnB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,OAAM;AAAA,UACvB,SAAS,4CAAC,yBAAS,UAAU,4CAAC,uBAAmB,GAC/C,sDAAC,oCAAY,aAAa,MAAM,aAAa,UAAU,CAAC,CAAC,MAAM,UAAU,GAC3E;AAAA,QACF,CAAC,IAAa,CAAC;AAAA,QACf;AAAA,UACE,OAAO,EAAE,UAAU;AAAA,UACnB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,YAAU;AAAA,UAC3B,SAAS,4CAAC,qCAAa,UAAU,CAAC,CAAC,MAAM,UAAS;AAAA,QACpD;AAAA,QACA,GAAI,MAAM,YAAY,IAAI,WAAS;AAAA,UACjC,OAAO,KAAK;AAAA,UACZ,MAAM;AAAA,UACN,IAAI,KAAK;AAAA,UACT,OAAO,MAAM;AACX,kBAAM,WAAY,KAAa;AAC/B,gBAAI,UAAU;AACZ,qBAAO,4CAAC,QAAK,MAAM,UAAS;AAAA,YAC9B,WAAY,KAAa,MAAM;AAC7B,qBAAQ,KAAa;AAAA,YACvB;AACA,mBAAO;AAAA,UACT,GAAG;AAAA,UACH,SAAS,KAAK;AAAA,QAChB,EAAW,KAAK,CAAC;AAAA,QACjB,GAAI,MAAM,SAAS,KAAK,QAAQ,OAAO,4BAA6B,CAAC;AAAA,UACnE,OAAO,EAAE,OAAO;AAAA,UAChB,MAAM;AAAA,QACR,CAAC,IAAa,CAAC;AAAA,QACf,GAAG,MAAM,IAAI,WAAS;AAAA,UACpB,OAAO,6CAAC,SAAI,WAAU,kCACpB;AAAA,wDAAC,6BAAS,MAAW;AAAA,YACrB,4CAAC,8BAAW,WAAU,qCAAqC,eAAK,aAAY;AAAA,aAC9E;AAAA,UACA,MAAM;AAAA,UACN,IAAI,QAAQ,KAAK,EAAE;AAAA,UACnB,SAAS,4CAAC,yBAAS,UAAU,4CAAC,oBAAgB,GAC5C,sDAAC,6BAAS,MAAW,GACvB;AAAA,QACF,EAAW;AAAA,QACX,GAAG,QAAQ,OAAO,4BAA4B,CAAC;AAAA,UAC7C,OAAO,EAAE,eAAe;AAAA,UACxB,MAAM,4CAAC,QAAK,MAAK,cAAY;AAAA,UAC7B,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,SAAS,4CAAC,yBAAS,UAAU,4CAAC,wBAAoB,GAChD,sDAAC,8CAAiB,UAAU,CAAC,CAAC,MAAM,UAAU,GAChD;AAAA,QACF,CAAC,IAAa,CAAC;AAAA,MACjB,EAAY,OAAO,CAAC,MAAM,EAAE,SAAS,aAAc,EAAU,OAAQ;AAAA,MACrE,OAAO,EAAE,kBAAkB;AAAA;AAAA,EAC7B,GACF,GACF;AAEJ;AAEA,SAAS,WAAW,OAAsC;AACxD,SACE,4CAAC,SAAI,WAAU,uBACZ,gBAAM,UACT;AAEJ;AAEA,SAAS,4BAA4B;AACnC,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,KACvC;AACF;AAEA,SAAS,6BAA6B;AACpC,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,iBAAe;AAAA,IACnC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,oCAAkC;AAAA,KACxD;AACF;AAEA,SAAS,sBAAsB;AAC7B,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,oCAAkC;AAAA,KACxD;AACF;AAEA,SAAS,mBAAmB;AAC1B,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,oCAAkC;AAAA,KACxD;AACF;AAEA,SAAS,uBAAuB;AAC9B,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,KACvC;AACF;","names":[]}
+{"version":3,"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { Skeleton, Typography } from '@stackframe/stack-ui';\nimport { icons } from 'lucide-react';\nimport React, { Suspense } from \"react\";\nimport { useStackApp, useUser } from '..';\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { TeamIcon } from '../components/team-icon';\nimport { useTranslation } from \"../lib/translations\";\nimport { ActiveSessionsPage } from \"./account-settings/active-sessions/active-sessions-page\";\nimport { ApiKeysPage } from \"./account-settings/api-keys/api-keys-page\";\nimport { EmailsAndAuthPage } from './account-settings/email-and-auth/email-and-auth-page';\nimport { NotificationsPage } from './account-settings/notifications/notifications-page';\nimport { ProfilePage } from \"./account-settings/profile-page/profile-page\";\nimport { SettingsPage } from './account-settings/settings/settings-page';\nimport { TeamCreationPage } from './account-settings/teams/team-creation-page';\nimport { TeamPage } from './account-settings/teams/team-page';\n\nconst Icon = ({ name }: { name: keyof typeof icons }) => {\n  const LucideIcon = icons[name];\n  return <LucideIcon className=\"mr-2 h-4 w-4\"/>;\n};\n\nexport function AccountSettings(props: {\n  fullPage?: boolean,\n  extraItems?: ({\n    title: string,\n    content: React.ReactNode,\n    id: string,\n  } & ({\n    icon?: React.ReactNode,\n  } | {\n    iconName?: keyof typeof icons,\n  }))[],\n  mockUser?: {\n    displayName?: string,\n    profileImageUrl?: string,\n  },\n  mockApiKeys?: Array<{\n    id: string,\n    description: string,\n    createdAt: string,\n    expiresAt?: string,\n    manuallyRevokedAt?: string,\n  }>,\n  mockProject?: {\n    config: {\n      allowUserApiKeys: boolean,\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n  mockSessions?: Array<{\n    id: string,\n    isCurrentSession: boolean,\n    isImpersonation?: boolean,\n    createdAt: string,\n    lastUsedAt?: string,\n    geoInfo?: {\n      ip?: string,\n      cityName?: string,\n    },\n  }>,\n}) {\n  const { t } = useTranslation();\n  const userFromHook = useUser({ or: props.mockUser ? 'return-null' : 'redirect' });\n  const stackApp = useStackApp();\n  const projectFromHook = stackApp.useProject();\n\n  // Use mock data if provided, otherwise use real data\n  const user = props.mockUser ? {\n    useTeams: () => [], // Mock empty teams for now\n  } : userFromHook;\n\n  const project = props.mockProject || projectFromHook;\n  const teams = user?.useTeams() || [];\n\n  // If we're not in mock mode and don't have a user, the useUser hook will handle redirect\n  if (!props.mockUser && !userFromHook) {\n    return null;\n  }\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className=\"self-stretch flex-grow w-full\">\n        <SidebarLayout\n          items={([\n            {\n              title: t('My Profile'),\n              type: 'item',\n              id: 'profile',\n              icon: <Icon name=\"Contact\"/>,\n              content: <ProfilePage mockUser={props.mockUser}/>,\n            },\n            {\n              title: t('Emails & Auth'),\n              type: 'item',\n              id: 'auth',\n              icon: <Icon name=\"ShieldCheck\"/>,\n              content: <Suspense fallback={<EmailsAndAuthPageSkeleton/>}>\n                <EmailsAndAuthPage mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            {\n              title: t('Notifications'),\n              type: 'item',\n              id: 'notifications',\n              icon: <Icon name=\"Bell\"/>,\n              content: <Suspense fallback={<NotificationsPageSkeleton/>}>\n                <NotificationsPage/>\n              </Suspense>,\n            },\n            {\n              title: t('Active Sessions'),\n              type: 'item',\n              id: 'sessions',\n              icon: <Icon name=\"Monitor\"/>,\n              content: <Suspense fallback={<ActiveSessionsPageSkeleton/>}>\n                <ActiveSessionsPage mockSessions={props.mockSessions} mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            ...(project.config.allowUserApiKeys ? [{\n              title: t('API Keys'),\n              type: 'item',\n              id: 'api-keys',\n              icon: <Icon name=\"Key\" />,\n              content: <Suspense fallback={<ApiKeysPageSkeleton/>}>\n                <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : []),\n            {\n              title: t('Settings'),\n              type: 'item',\n              id: 'settings',\n              icon: <Icon name=\"Settings\"/>,\n              content: <SettingsPage mockMode={!!props.mockUser}/>,\n            },\n            ...(props.extraItems?.map(item => ({\n              title: item.title,\n              type: 'item',\n              id: item.id,\n              icon: (() => {\n                const iconName = (item as any).iconName as keyof typeof icons | undefined;\n                if (iconName) {\n                  return <Icon name={iconName}/>;\n                } else if ((item as any).icon) {\n                  return (item as any).icon;\n                }\n                return null;\n              })(),\n              content: item.content,\n            } as const)) || []),\n            ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n              title: t('Teams'),\n              type: 'divider',\n            }] as const : [],\n            ...teams.map(team => ({\n              title: <div className='flex gap-2 items-center w-full'>\n                <TeamIcon team={team}/>\n                <Typography className=\"max-w-[320px] md:w-[90%] truncate\">{team.displayName}</Typography>\n              </div>,\n              type: 'item',\n              id: `team-${team.id}`,\n              content: <Suspense fallback={<TeamPageSkeleton/>}>\n                <TeamPage team={team}/>\n              </Suspense>,\n            } as const)),\n            ...project.config.clientTeamCreationEnabled ? [{\n              title: t('Create a team'),\n              icon: <Icon name=\"CirclePlus\"/>,\n              type: 'item',\n              id: 'team-creation',\n              content: <Suspense fallback={<TeamCreationSkeleton/>}>\n                <TeamCreationPage mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : [],\n          ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n          title={t(\"Account Settings\")}\n        />\n      </div>\n    </MaybeFullPage>\n  );\n}\n\nfunction PageLayout(props: { children: React.ReactNode }) {\n  return (\n    <div className='flex flex-col gap-6'>\n      {props.children}\n    </div>\n  );\n}\n\nfunction EmailsAndAuthPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n\nfunction ActiveSessionsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-6 w-48 mb-2\"/>\n    <Skeleton className=\"h-4 w-full mb-4\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction ApiKeysPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamCreationSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n\nfunction NotificationsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,sBAAqC;AACrC,0BAAsB;AACtB,mBAAgC;AAChC,eAAqC;AACrC,6BAA8B;AAC9B,4BAA8B;AAC9B,uBAAyB;AACzB,0BAA+B;AAC/B,kCAAmC;AACnC,2BAA4B;AAC5B,iCAAkC;AAClC,gCAAkC;AAClC,0BAA4B;AAC5B,2BAA6B;AAC7B,gCAAiC;AACjC,uBAAyB;AAIhB;AAFT,IAAM,OAAO,CAAC,EAAE,KAAK,MAAoC;AACvD,QAAM,aAAa,0BAAM,IAAI;AAC7B,SAAO,4CAAC,cAAW,WAAU,gBAAc;AAC7C;AAEO,SAAS,gBAAgB,OAuC7B;AACD,QAAM,EAAE,EAAE,QAAI,oCAAe;AAC7B,QAAM,mBAAe,kBAAQ,EAAE,IAAI,MAAM,WAAW,gBAAgB,WAAW,CAAC;AAChF,QAAM,eAAW,sBAAY;AAC7B,QAAM,kBAAkB,SAAS,WAAW;AAG5C,QAAM,OAAO,MAAM,WAAW;AAAA,IAC5B,UAAU,MAAM,CAAC;AAAA;AAAA,EACnB,IAAI;AAEJ,QAAM,UAAU,MAAM,eAAe;AACrC,QAAM,QAAQ,MAAM,SAAS,KAAK,CAAC;AAGnC,MAAI,CAAC,MAAM,YAAY,CAAC,cAAc;AACpC,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,wCAAc,UAAU,CAAC,CAAC,MAAM,UAC/B,sDAAC,SAAI,WAAU,iCACb;AAAA,IAAC;AAAA;AAAA,MACC,OAAQ;AAAA,QACN;AAAA,UACE,OAAO,EAAE,YAAY;AAAA,UACrB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,WAAS;AAAA,UAC1B,SAAS,4CAAC,mCAAY,UAAU,MAAM,UAAS;AAAA,QACjD;AAAA,QACA;AAAA,UACE,OAAO,EAAE,eAAe;AAAA,UACxB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,eAAa;AAAA,UAC9B,SAAS,4CAAC,yBAAS,UAAU,4CAAC,6BAAyB,GACrD,sDAAC,gDAAkB,UAAU,CAAC,CAAC,MAAM,UAAS,GAChD;AAAA,QACF;AAAA,QACA;AAAA,UACE,OAAO,EAAE,eAAe;AAAA,UACxB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,QAAM;AAAA,UACvB,SAAS,4CAAC,yBAAS,UAAU,4CAAC,6BAAyB,GACrD,sDAAC,+CAAiB,GACpB;AAAA,QACF;AAAA,QACA;AAAA,UACE,OAAO,EAAE,iBAAiB;AAAA,UAC1B,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,WAAS;AAAA,UAC1B,SAAS,4CAAC,yBAAS,UAAU,4CAAC,8BAA0B,GACtD,sDAAC,kDAAmB,cAAc,MAAM,cAAc,UAAU,CAAC,CAAC,MAAM,UAAS,GACnF;AAAA,QACF;AAAA,QACA,GAAI,QAAQ,OAAO,mBAAmB,CAAC;AAAA,UACrC,OAAO,EAAE,UAAU;AAAA,UACnB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,OAAM;AAAA,UACvB,SAAS,4CAAC,yBAAS,UAAU,4CAAC,uBAAmB,GAC/C,sDAAC,oCAAY,aAAa,MAAM,aAAa,UAAU,CAAC,CAAC,MAAM,UAAU,GAC3E;AAAA,QACF,CAAC,IAAa,CAAC;AAAA,QACf;AAAA,UACE,OAAO,EAAE,UAAU;AAAA,UACnB,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,MAAM,4CAAC,QAAK,MAAK,YAAU;AAAA,UAC3B,SAAS,4CAAC,qCAAa,UAAU,CAAC,CAAC,MAAM,UAAS;AAAA,QACpD;AAAA,QACA,GAAI,MAAM,YAAY,IAAI,WAAS;AAAA,UACjC,OAAO,KAAK;AAAA,UACZ,MAAM;AAAA,UACN,IAAI,KAAK;AAAA,UACT,OAAO,MAAM;AACX,kBAAM,WAAY,KAAa;AAC/B,gBAAI,UAAU;AACZ,qBAAO,4CAAC,QAAK,MAAM,UAAS;AAAA,YAC9B,WAAY,KAAa,MAAM;AAC7B,qBAAQ,KAAa;AAAA,YACvB;AACA,mBAAO;AAAA,UACT,GAAG;AAAA,UACH,SAAS,KAAK;AAAA,QAChB,EAAW,KAAK,CAAC;AAAA,QACjB,GAAI,MAAM,SAAS,KAAK,QAAQ,OAAO,4BAA6B,CAAC;AAAA,UACnE,OAAO,EAAE,OAAO;AAAA,UAChB,MAAM;AAAA,QACR,CAAC,IAAa,CAAC;AAAA,QACf,GAAG,MAAM,IAAI,WAAS;AAAA,UACpB,OAAO,6CAAC,SAAI,WAAU,kCACpB;AAAA,wDAAC,6BAAS,MAAW;AAAA,YACrB,4CAAC,8BAAW,WAAU,qCAAqC,eAAK,aAAY;AAAA,aAC9E;AAAA,UACA,MAAM;AAAA,UACN,IAAI,QAAQ,KAAK,EAAE;AAAA,UACnB,SAAS,4CAAC,yBAAS,UAAU,4CAAC,oBAAgB,GAC5C,sDAAC,6BAAS,MAAW,GACvB;AAAA,QACF,EAAW;AAAA,QACX,GAAG,QAAQ,OAAO,4BAA4B,CAAC;AAAA,UAC7C,OAAO,EAAE,eAAe;AAAA,UACxB,MAAM,4CAAC,QAAK,MAAK,cAAY;AAAA,UAC7B,MAAM;AAAA,UACN,IAAI;AAAA,UACJ,SAAS,4CAAC,yBAAS,UAAU,4CAAC,wBAAoB,GAChD,sDAAC,8CAAiB,UAAU,CAAC,CAAC,MAAM,UAAU,GAChD;AAAA,QACF,CAAC,IAAa,CAAC;AAAA,MACjB,EAAY,OAAO,CAAC,MAAM,EAAE,SAAS,aAAc,EAAU,OAAQ;AAAA,MACrE,OAAO,EAAE,kBAAkB;AAAA;AAAA,EAC7B,GACF,GACF;AAEJ;AAEA,SAAS,WAAW,OAAsC;AACxD,SACE,4CAAC,SAAI,WAAU,uBACZ,gBAAM,UACT;AAEJ;AAEA,SAAS,4BAA4B;AACnC,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,KACvC;AACF;AAEA,SAAS,6BAA6B;AACpC,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,iBAAe;AAAA,IACnC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,oCAAkC;AAAA,KACxD;AACF;AAEA,SAAS,sBAAsB;AAC7B,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,oCAAkC;AAAA,KACxD;AACF;AAEA,SAAS,mBAAmB;AAC1B,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,oCAAkC;AAAA,KACxD;AACF;AAEA,SAAS,uBAAuB;AAC9B,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,KACvC;AACF;AAEA,SAAS,4BAA4B;AACnC,SAAO,6CAAC,cACN;AAAA,gDAAC,4BAAS,WAAU,mBAAiB;AAAA,IACrC,4CAAC,4BAAS,WAAU,mBAAiB;AAAA,KACvC;AACF;","names":[]}

package/dist/esm/components/selected-team-switcher.js

@@ -2,6 +2,7 @@
 "use client";
 
 // src/components/selected-team-switcher.tsx
+import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import {
   Button,
@@ -59,14 +60,22 @@ function Inner(props) {
   return /* @__PURE__ */ jsxs(
     Select,
     {
-      value: selectedTeam?.id,
+      value: selectedTeam?.id || (props.allowNull ? "null-sentinel" : void 0),
       onValueChange: (value) => {
-        if (props.mockUser) return;
         runAsynchronouslyWithAlert(async () => {
-          const team = teams?.find((team2) => team2.id === value);
-          if (!team) {
-            throw new Error("Team not found, this should not happen");
+          let team = null;
+          if (value !== "null-sentinel") {
+            team = teams?.find((team2) => team2.id === value) || null;
+            if (!team) {
+              throw new StackAssertionError("Team not found, this should not happen");
+            }
+          } else {
+            team = null;
           }
+          if (props.onChange) {
+            props.onChange(team);
+          }
+          if (props.mockUser) return;
           if (!props.noUpdateSelectedTeam) {
             await user?.setSelectedTeam(team);
           }
@@ -101,13 +110,18 @@ function Inner(props) {
               /* @__PURE__ */ jsx(Typography, { className: "max-w-40 truncate", children: user.selectedTeam.displayName })
             ] }) })
           ] }) : void 0,
+          props.allowNull && /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectItem, { value: "null-sentinel", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(TeamIcon, { team: "personal" }),
+            /* @__PURE__ */ jsx(Typography, { className: "max-w-40 truncate", children: props.nullLabel || t("No team") })
+          ] }) }) }),
           teams?.length ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
             /* @__PURE__ */ jsx(SelectLabel, { children: t("Other teams") }),
             teams.filter((team) => team.id !== user?.selectedTeam?.id).map((team) => /* @__PURE__ */ jsx(SelectItem, { value: team.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(TeamIcon, { team }),
               /* @__PURE__ */ jsx(Typography, { className: "max-w-64 truncate", children: team.displayName })
             ] }) }, team.id))
-          ] }) : /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectLabel, { children: t("No teams yet") }) }),
+          ] }) : null,
+          !teams?.length && !props.allowNull ? /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectLabel, { children: t("No teams yet") }) }) : null,
           project.config.clientTeamCreationEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(SelectSeparator, {}),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(

package/dist/esm/components/selected-team-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { Suspense, useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n  // Mock data props\n  mockUser?: {\n    selectedTeam?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner(props: SelectedTeamSwitcherProps) {\n  const { t } = useTranslation();\n  const appFromHook = useStackApp();\n  const userFromHook = useUser();\n\n  // Use mock data if provided, otherwise use real data\n  const app = props.mockUser ? {\n    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },\n    useNavigate: () => () => {}, // Mock navigate function\n    urls: { accountSettings: '/account-settings' },\n  } : appFromHook;\n\n  const user = props.mockUser ? {\n    selectedTeam: props.mockUser.selectedTeam,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const project = app.useProject();\n  const navigate = app.useNavigate();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam, props.mockUser]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        // Skip actual navigation/updates in mock mode\n        if (props.mockUser) return;\n\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team as Team);\n          }\n          if (props.urlMap) {\n            navigate(props.urlMap(team as Team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button\n                variant='ghost'\n                size='icon'\n                className=\"h-6 w-6\"\n                onClick={() => {\n                  // Skip navigation in mock mode\n                  if (!props.mockUser) {\n                    navigate(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`);\n                  }\n                }}\n              >\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam as Team} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team as Team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => {\n                // Skip navigation in mock mode\n                if (!props.mockUser) {\n                  navigate(`${app.urls.accountSettings}#team-creation`);\n                }\n              }}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}
+{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { StackAssertionError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { Suspense, useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype SelectedTeamSwitcherProps<AllowNull extends boolean = false> = {\n  urlMap?: (team: AllowNull extends true ? Team | null : Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n  allowNull?: AllowNull,\n  nullLabel?: string,\n  onChange?: (team: AllowNull extends true ? Team | null : Team) => void,\n  // Mock data props\n  mockUser?: {\n    selectedTeam?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function SelectedTeamSwitcher<AllowNull extends boolean = false>(props: SelectedTeamSwitcherProps<AllowNull>) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner<AllowNull extends boolean>(props: SelectedTeamSwitcherProps<AllowNull>) {\n  const { t } = useTranslation();\n  const appFromHook = useStackApp();\n  const userFromHook = useUser();\n\n  // Use mock data if provided, otherwise use real data\n  const app = props.mockUser ? {\n    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },\n    useNavigate: () => () => {}, // Mock navigate function\n    urls: { accountSettings: '/account-settings' },\n  } : appFromHook;\n\n  const user = props.mockUser ? {\n    selectedTeam: props.mockUser.selectedTeam,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const project = app.useProject();\n  const navigate = app.useNavigate();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam, props.mockUser]);\n\n  return (\n    <Select\n      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          let team: MockTeam | null = null;\n          if (value !== 'null-sentinel') {\n            team = teams?.find(team => team.id === value) || null;\n            if (!team) {\n              throw new StackAssertionError('Team not found, this should not happen');\n            }\n          } else {\n            team = null;\n          }\n\n          // Call onChange callback if provided\n          if (props.onChange) {\n            props.onChange(team as Team);\n          }\n\n          // Skip actual navigation/updates in mock mode\n          if (props.mockUser) return;\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team as Team);\n          }\n          if (props.urlMap) {\n            navigate(props.urlMap(team as Team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button\n                variant='ghost'\n                size='icon'\n                className=\"h-6 w-6\"\n                onClick={() => {\n                  // Skip navigation in mock mode\n                  if (!props.mockUser) {\n                    navigate(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`);\n                  }\n                }}\n              >\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam as Team} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {props.allowNull && <SelectGroup>\n          <SelectItem value=\"null-sentinel\">\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team='personal' />\n              <Typography className=\"max-w-40 truncate\">{props.nullLabel || t('No team')}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup>}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team as Team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> : null}\n\n        {!teams?.length && !props.allowNull ?\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup> : null}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => {\n                // Skip navigation in mock mode\n                if (!props.mockUser) {\n                  navigate(`${app.urls.accountSettings}#team-creation`);\n                }\n              }}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}

package/dist/esm/components/team-icon.js

@@ -1,7 +1,11 @@
 // src/components/team-icon.tsx
 import { Avatar, AvatarImage, Typography } from "@stackframe/stack-ui";
+import { User2 } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 function TeamIcon(props) {
+  if (props.team === "personal") {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200", children: /* @__PURE__ */ jsx(User2, { className: "w-4 h-4" }) });
+  }
   if (props.team.profileImageUrl) {
     return /* @__PURE__ */ jsx(Avatar, { className: "min-w-6 min-h-6 max-w-6 max-h-6 rounded", children: /* @__PURE__ */ jsx(AvatarImage, { src: props.team.profileImageUrl, alt: props.team.displayName }) });
   } else {

package/dist/esm/components/team-icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/team-icon.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\nimport { Team } from \"..\";\n\nexport function TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <Avatar className=\"min-w-6 min-h-6 max-w-6 max-h-6 rounded\">\n        <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />\n      </Avatar>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <Typography className=\"text-zinc-800 dark:text-zinc-800\">{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}\n"],"mappings":";AAIA,SAAS,QAAQ,aAAa,kBAAkB;AAOxC;AAJD,SAAS,SAAS,OAAuB;AAC9C,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,oBAAC,UAAO,WAAU,2CAChB,8BAAC,eAAY,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,GAC7E;AAAA,EAEJ,OAAO;AACL,WACE,oBAAC,SAAI,WAAU,wFACb,8BAAC,cAAW,WAAU,oCAAoC,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC7G;AAAA,EAEJ;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/team-icon.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\nimport { User2 } from \"lucide-react\";\nimport { Team } from \"..\";\n\nexport function TeamIcon(props: { team: Team | 'personal' }) {\n  if (props.team === 'personal') {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <User2 className=\"w-4 h-4\" />\n      </div>\n    );\n  }\n  if (props.team.profileImageUrl) {\n    return (\n      <Avatar className=\"min-w-6 min-h-6 max-w-6 max-h-6 rounded\">\n        <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />\n      </Avatar>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <Typography className=\"text-zinc-800 dark:text-zinc-800\">{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}\n"],"mappings":";AAIA,SAAS,QAAQ,aAAa,kBAAkB;AAChD,SAAS,aAAa;AAOd;AAJD,SAAS,SAAS,OAAoC;AAC3D,MAAI,MAAM,SAAS,YAAY;AAC7B,WACE,oBAAC,SAAI,WAAU,wFACb,8BAAC,SAAM,WAAU,WAAU,GAC7B;AAAA,EAEJ;AACA,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,oBAAC,UAAO,WAAU,2CAChB,8BAAC,eAAY,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,GAC7E;AAAA,EAEJ,OAAO;AACL,WACE,oBAAC,SAAI,WAAU,wFACb,8BAAC,cAAW,WAAU,oCAAoC,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC7G;AAAA,EAEJ;AACF;","names":[]}

package/dist/esm/components-page/account-settings/notifications/notifications-page.js

@@ -0,0 +1,34 @@
+// src/components-page/account-settings/notifications/notifications-page.tsx
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { PageLayout } from "../page-layout.js";
+import { Switch } from "@stackframe/stack-ui";
+import { Separator, Typography } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NotificationsPage() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const notificationCategories = user.useNotificationCategories();
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "sm:flex-1 flex flex-col justify-center pb-2", children: /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: t("Choose which emails you want to receive") }) }),
+      notificationCategories.map((category) => /* @__PURE__ */ jsxs("div", { className: "flex justify-start gap-4 items-center", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: category.enabled,
+            onCheckedChange: (value) => void category.setEnabled(value),
+            disabled: !category.canDisable
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { children: category.name }),
+        !category.canDisable && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "footnote", children: "(cannot be disabled)" })
+      ] }, category.id))
+    ] })
+  ] });
+}
+export {
+  NotificationsPage
+};
+//# sourceMappingURL=notifications-page.js.map

package/dist/esm/components-page/account-settings/notifications/notifications-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Switch } from \"@stackframe/stack-ui\";\nimport { Separator, Typography } from \"@stackframe/stack-ui\";\n\n\nexport function NotificationsPage() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const notificationCategories = user.useNotificationCategories();\n\n  return (\n    <PageLayout>\n      <Separator />\n      <div className='flex flex-col gap-2'>\n        <div className='sm:flex-1 flex flex-col justify-center pb-2'>\n          <Typography className=\"font-medium\">\n            {t('Choose which emails you want to receive')}\n          </Typography>\n        </div>\n        {notificationCategories.map((category) => (\n          <div key={category.id} className=\"flex justify-start gap-4 items-center\">\n            <Switch\n              checked={category.enabled}\n              onCheckedChange={(value) => void category.setEnabled(value)}\n              disabled={!category.canDisable}\n            />\n            <Typography>{category.name}</Typography>\n            {!category.canDisable && (\n              <Typography variant='secondary' type='footnote'>\n                (cannot be disabled)\n              </Typography>\n            )}\n          </div>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,WAAW,kBAAkB;AAUhC,cAQI,YARJ;AAPC,SAAS,oBAAoB;AAClC,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,yBAAyB,KAAK,0BAA0B;AAE9D,SACE,qBAAC,cACC;AAAA,wBAAC,aAAU;AAAA,IACX,qBAAC,SAAI,WAAU,uBACb;AAAA,0BAAC,SAAI,WAAU,+CACb,8BAAC,cAAW,WAAU,eACnB,YAAE,yCAAyC,GAC9C,GACF;AAAA,MACC,uBAAuB,IAAI,CAAC,aAC3B,qBAAC,SAAsB,WAAU,yCAC/B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,SAAS;AAAA,YAClB,iBAAiB,CAAC,UAAU,KAAK,SAAS,WAAW,KAAK;AAAA,YAC1D,UAAU,CAAC,SAAS;AAAA;AAAA,QACtB;AAAA,QACA,oBAAC,cAAY,mBAAS,MAAK;AAAA,QAC1B,CAAC,SAAS,cACT,oBAAC,cAAW,SAAQ,aAAY,MAAK,YAAW,kCAEhD;AAAA,WAVM,SAAS,EAYnB,CACD;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings.js

@@ -13,6 +13,7 @@ import { useTranslation } from "../lib/translations.js";
 import { ActiveSessionsPage } from "./account-settings/active-sessions/active-sessions-page.js";
 import { ApiKeysPage } from "./account-settings/api-keys/api-keys-page.js";
 import { EmailsAndAuthPage } from "./account-settings/email-and-auth/email-and-auth-page.js";
+import { NotificationsPage } from "./account-settings/notifications/notifications-page.js";
 import { ProfilePage } from "./account-settings/profile-page/profile-page.js";
 import { SettingsPage } from "./account-settings/settings/settings-page.js";
 import { TeamCreationPage } from "./account-settings/teams/team-creation-page.js";
@@ -54,6 +55,13 @@ function AccountSettings(props) {
           icon: /* @__PURE__ */ jsx(Icon, { name: "ShieldCheck" }),
           content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(EmailsAndAuthPageSkeleton, {}), children: /* @__PURE__ */ jsx(EmailsAndAuthPage, { mockMode: !!props.mockUser }) })
         },
+        {
+          title: t("Notifications"),
+          type: "item",
+          id: "notifications",
+          icon: /* @__PURE__ */ jsx(Icon, { name: "Bell" }),
+          content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(NotificationsPageSkeleton, {}), children: /* @__PURE__ */ jsx(NotificationsPage, {}) })
+        },
         {
           title: t("Active Sessions"),
           type: "item",
@@ -153,6 +161,12 @@ function TeamCreationSkeleton() {
     /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" })
   ] });
 }
+function NotificationsPageSkeleton() {
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" })
+  ] });
+}
 export {
   AccountSettings
 };

package/dist/esm/components-page/account-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { Skeleton, Typography } from '@stackframe/stack-ui';\nimport { icons } from 'lucide-react';\nimport React, { Suspense } from \"react\";\nimport { useStackApp, useUser } from '..';\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { TeamIcon } from '../components/team-icon';\nimport { useTranslation } from \"../lib/translations\";\nimport { ActiveSessionsPage } from \"./account-settings/active-sessions/active-sessions-page\";\nimport { ApiKeysPage } from \"./account-settings/api-keys/api-keys-page\";\nimport { EmailsAndAuthPage } from './account-settings/email-and-auth/email-and-auth-page';\nimport { ProfilePage } from \"./account-settings/profile-page/profile-page\";\nimport { SettingsPage } from './account-settings/settings/settings-page';\nimport { TeamCreationPage } from './account-settings/teams/team-creation-page';\nimport { TeamPage } from './account-settings/teams/team-page';\n\nconst Icon = ({ name }: { name: keyof typeof icons }) => {\n  const LucideIcon = icons[name];\n  return <LucideIcon className=\"mr-2 h-4 w-4\"/>;\n};\n\nexport function AccountSettings(props: {\n  fullPage?: boolean,\n  extraItems?: ({\n    title: string,\n    content: React.ReactNode,\n    id: string,\n  } & ({\n    icon?: React.ReactNode,\n  } | {\n    iconName?: keyof typeof icons,\n  }))[],\n  mockUser?: {\n    displayName?: string,\n    profileImageUrl?: string,\n  },\n  mockApiKeys?: Array<{\n    id: string,\n    description: string,\n    createdAt: string,\n    expiresAt?: string,\n    manuallyRevokedAt?: string,\n  }>,\n  mockProject?: {\n    config: {\n      allowUserApiKeys: boolean,\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n  mockSessions?: Array<{\n    id: string,\n    isCurrentSession: boolean,\n    isImpersonation?: boolean,\n    createdAt: string,\n    lastUsedAt?: string,\n    geoInfo?: {\n      ip?: string,\n      cityName?: string,\n    },\n  }>,\n}) {\n  const { t } = useTranslation();\n  const userFromHook = useUser({ or: props.mockUser ? 'return-null' : 'redirect' });\n  const stackApp = useStackApp();\n  const projectFromHook = stackApp.useProject();\n\n  // Use mock data if provided, otherwise use real data\n  const user = props.mockUser ? {\n    useTeams: () => [], // Mock empty teams for now\n  } : userFromHook;\n\n  const project = props.mockProject || projectFromHook;\n  const teams = user?.useTeams() || [];\n\n  // If we're not in mock mode and don't have a user, the useUser hook will handle redirect\n  if (!props.mockUser && !userFromHook) {\n    return null;\n  }\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className=\"self-stretch flex-grow w-full\">\n        <SidebarLayout\n          items={([\n            {\n              title: t('My Profile'),\n              type: 'item',\n              id: 'profile',\n              icon: <Icon name=\"Contact\"/>,\n              content: <ProfilePage mockUser={props.mockUser}/>,\n            },\n            {\n              title: t('Emails & Auth'),\n              type: 'item',\n              id: 'auth',\n              icon: <Icon name=\"ShieldCheck\"/>,\n              content: <Suspense fallback={<EmailsAndAuthPageSkeleton/>}>\n                <EmailsAndAuthPage mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            {\n              title: t('Active Sessions'),\n              type: 'item',\n              id: 'sessions',\n              icon: <Icon name=\"Monitor\"/>,\n              content: <Suspense fallback={<ActiveSessionsPageSkeleton/>}>\n                <ActiveSessionsPage mockSessions={props.mockSessions} mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            ...(project.config.allowUserApiKeys ? [{\n              title: t('API Keys'),\n              type: 'item',\n              id: 'api-keys',\n              icon: <Icon name=\"Key\" />,\n              content: <Suspense fallback={<ApiKeysPageSkeleton/>}>\n                <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : []),\n            {\n              title: t('Settings'),\n              type: 'item',\n              id: 'settings',\n              icon: <Icon name=\"Settings\"/>,\n              content: <SettingsPage mockMode={!!props.mockUser}/>,\n            },\n            ...(props.extraItems?.map(item => ({\n              title: item.title,\n              type: 'item',\n              id: item.id,\n              icon: (() => {\n                const iconName = (item as any).iconName as keyof typeof icons | undefined;\n                if (iconName) {\n                  return <Icon name={iconName}/>;\n                } else if ((item as any).icon) {\n                  return (item as any).icon;\n                }\n                return null;\n              })(),\n              content: item.content,\n            } as const)) || []),\n            ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n              title: t('Teams'),\n              type: 'divider',\n            }] as const : [],\n            ...teams.map(team => ({\n              title: <div className='flex gap-2 items-center w-full'>\n                <TeamIcon team={team}/>\n                <Typography className=\"max-w-[320px] md:w-[90%] truncate\">{team.displayName}</Typography>\n              </div>,\n              type: 'item',\n              id: `team-${team.id}`,\n              content: <Suspense fallback={<TeamPageSkeleton/>}>\n                <TeamPage team={team}/>\n              </Suspense>,\n            } as const)),\n            ...project.config.clientTeamCreationEnabled ? [{\n              title: t('Create a team'),\n              icon: <Icon name=\"CirclePlus\"/>,\n              type: 'item',\n              id: 'team-creation',\n              content: <Suspense fallback={<TeamCreationSkeleton/>}>\n                <TeamCreationPage mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : [],\n          ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n          title={t(\"Account Settings\")}\n        />\n      </div>\n    </MaybeFullPage>\n  );\n}\n\nfunction PageLayout(props: { children: React.ReactNode }) {\n  return (\n    <div className='flex flex-col gap-6'>\n      {props.children}\n    </div>\n  );\n}\n\nfunction EmailsAndAuthPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n\nfunction ActiveSessionsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-6 w-48 mb-2\"/>\n    <Skeleton className=\"h-4 w-full mb-4\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction ApiKeysPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamCreationSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { Skeleton, Typography } from '@stackframe/stack-ui';\nimport { icons } from 'lucide-react';\nimport React, { Suspense } from \"react\";\nimport { useStackApp, useUser } from '..';\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { TeamIcon } from '../components/team-icon';\nimport { useTranslation } from \"../lib/translations\";\nimport { ActiveSessionsPage } from \"./account-settings/active-sessions/active-sessions-page\";\nimport { ApiKeysPage } from \"./account-settings/api-keys/api-keys-page\";\nimport { EmailsAndAuthPage } from './account-settings/email-and-auth/email-and-auth-page';\nimport { NotificationsPage } from './account-settings/notifications/notifications-page';\nimport { ProfilePage } from \"./account-settings/profile-page/profile-page\";\nimport { SettingsPage } from './account-settings/settings/settings-page';\nimport { TeamCreationPage } from './account-settings/teams/team-creation-page';\nimport { TeamPage } from './account-settings/teams/team-page';\n\nconst Icon = ({ name }: { name: keyof typeof icons }) => {\n  const LucideIcon = icons[name];\n  return <LucideIcon className=\"mr-2 h-4 w-4\"/>;\n};\n\nexport function AccountSettings(props: {\n  fullPage?: boolean,\n  extraItems?: ({\n    title: string,\n    content: React.ReactNode,\n    id: string,\n  } & ({\n    icon?: React.ReactNode,\n  } | {\n    iconName?: keyof typeof icons,\n  }))[],\n  mockUser?: {\n    displayName?: string,\n    profileImageUrl?: string,\n  },\n  mockApiKeys?: Array<{\n    id: string,\n    description: string,\n    createdAt: string,\n    expiresAt?: string,\n    manuallyRevokedAt?: string,\n  }>,\n  mockProject?: {\n    config: {\n      allowUserApiKeys: boolean,\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n  mockSessions?: Array<{\n    id: string,\n    isCurrentSession: boolean,\n    isImpersonation?: boolean,\n    createdAt: string,\n    lastUsedAt?: string,\n    geoInfo?: {\n      ip?: string,\n      cityName?: string,\n    },\n  }>,\n}) {\n  const { t } = useTranslation();\n  const userFromHook = useUser({ or: props.mockUser ? 'return-null' : 'redirect' });\n  const stackApp = useStackApp();\n  const projectFromHook = stackApp.useProject();\n\n  // Use mock data if provided, otherwise use real data\n  const user = props.mockUser ? {\n    useTeams: () => [], // Mock empty teams for now\n  } : userFromHook;\n\n  const project = props.mockProject || projectFromHook;\n  const teams = user?.useTeams() || [];\n\n  // If we're not in mock mode and don't have a user, the useUser hook will handle redirect\n  if (!props.mockUser && !userFromHook) {\n    return null;\n  }\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className=\"self-stretch flex-grow w-full\">\n        <SidebarLayout\n          items={([\n            {\n              title: t('My Profile'),\n              type: 'item',\n              id: 'profile',\n              icon: <Icon name=\"Contact\"/>,\n              content: <ProfilePage mockUser={props.mockUser}/>,\n            },\n            {\n              title: t('Emails & Auth'),\n              type: 'item',\n              id: 'auth',\n              icon: <Icon name=\"ShieldCheck\"/>,\n              content: <Suspense fallback={<EmailsAndAuthPageSkeleton/>}>\n                <EmailsAndAuthPage mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            {\n              title: t('Notifications'),\n              type: 'item',\n              id: 'notifications',\n              icon: <Icon name=\"Bell\"/>,\n              content: <Suspense fallback={<NotificationsPageSkeleton/>}>\n                <NotificationsPage/>\n              </Suspense>,\n            },\n            {\n              title: t('Active Sessions'),\n              type: 'item',\n              id: 'sessions',\n              icon: <Icon name=\"Monitor\"/>,\n              content: <Suspense fallback={<ActiveSessionsPageSkeleton/>}>\n                <ActiveSessionsPage mockSessions={props.mockSessions} mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            ...(project.config.allowUserApiKeys ? [{\n              title: t('API Keys'),\n              type: 'item',\n              id: 'api-keys',\n              icon: <Icon name=\"Key\" />,\n              content: <Suspense fallback={<ApiKeysPageSkeleton/>}>\n                <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : []),\n            {\n              title: t('Settings'),\n              type: 'item',\n              id: 'settings',\n              icon: <Icon name=\"Settings\"/>,\n              content: <SettingsPage mockMode={!!props.mockUser}/>,\n            },\n            ...(props.extraItems?.map(item => ({\n              title: item.title,\n              type: 'item',\n              id: item.id,\n              icon: (() => {\n                const iconName = (item as any).iconName as keyof typeof icons | undefined;\n                if (iconName) {\n                  return <Icon name={iconName}/>;\n                } else if ((item as any).icon) {\n                  return (item as any).icon;\n                }\n                return null;\n              })(),\n              content: item.content,\n            } as const)) || []),\n            ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n              title: t('Teams'),\n              type: 'divider',\n            }] as const : [],\n            ...teams.map(team => ({\n              title: <div className='flex gap-2 items-center w-full'>\n                <TeamIcon team={team}/>\n                <Typography className=\"max-w-[320px] md:w-[90%] truncate\">{team.displayName}</Typography>\n              </div>,\n              type: 'item',\n              id: `team-${team.id}`,\n              content: <Suspense fallback={<TeamPageSkeleton/>}>\n                <TeamPage team={team}/>\n              </Suspense>,\n            } as const)),\n            ...project.config.clientTeamCreationEnabled ? [{\n              title: t('Create a team'),\n              icon: <Icon name=\"CirclePlus\"/>,\n              type: 'item',\n              id: 'team-creation',\n              content: <Suspense fallback={<TeamCreationSkeleton/>}>\n                <TeamCreationPage mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : [],\n          ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n          title={t(\"Account Settings\")}\n        />\n      </div>\n    </MaybeFullPage>\n  );\n}\n\nfunction PageLayout(props: { children: React.ReactNode }) {\n  return (\n    <div className='flex flex-col gap-6'>\n      {props.children}\n    </div>\n  );\n}\n\nfunction EmailsAndAuthPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n\nfunction ActiveSessionsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-6 w-48 mb-2\"/>\n    <Skeleton className=\"h-4 w-full mb-4\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction ApiKeysPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamCreationSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n\nfunction NotificationsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n"],"mappings":"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","names":[]}