@stackframe/stack 2.5.25 → 2.5.28

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @stackframe/stack
 
+## 2.5.28
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.5.28
+  - @stackframe/stack-ui@2.5.28
+  - @stackframe/stack-sc@2.5.28
+
+## 2.5.27
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.5.27
+  - @stackframe/stack-sc@2.5.27
+  - @stackframe/stack-ui@2.5.27
+
+## 2.5.26
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-sc@2.5.26
+  - @stackframe/stack-shared@2.5.26
+  - @stackframe/stack-ui@2.5.26
+
 ## 2.5.25
 
 ### Patch Changes

package/dist/components/elements/maybe-full-page.d.mts

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
-declare function MaybeFullPage({ children, fullPage, size, fullVertical, containerClassName, }: {
+declare function MaybeFullPage({ children, fullPage, }: {
     children: React.ReactNode;
-    fullPage?: boolean;
+    fullPage: boolean;
     size?: number;
-    fullVertical?: boolean;
     containerClassName?: string;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/components/elements/maybe-full-page.d.ts

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
-declare function MaybeFullPage({ children, fullPage, size, fullVertical, containerClassName, }: {
+declare function MaybeFullPage({ children, fullPage, }: {
     children: React.ReactNode;
-    fullPage?: boolean;
+    fullPage: boolean;
     size?: number;
-    fullVertical?: boolean;
     containerClassName?: string;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/components/elements/maybe-full-page.js

@@ -25,19 +25,15 @@ __export(maybe_full_page_exports, {
   MaybeFullPage: () => MaybeFullPage
 });
 module.exports = __toCommonJS(maybe_full_page_exports);
-var import_stack_ui = require("@stackframe/stack-ui");
 var import_react = require("react");
 var import_ssr_layout_effect = require("./ssr-layout-effect");
 var import_jsx_runtime = require("react/jsx-runtime");
 function MaybeFullPage({
   children,
-  fullPage = true,
-  size = 380,
-  fullVertical = false,
-  containerClassName
+  fullPage
 }) {
   const uniqueId = (0, import_react.useId)();
-  const id = `stack-card-frame-${uniqueId}`;
+  const id = `stack-full-page-container-${uniqueId}`;
   const scriptString = `(([id]) => {
     const el = document.getElementById(id);
     if (!el) {
@@ -58,11 +54,11 @@ function MaybeFullPage({
             minHeight: "100vh",
             alignSelf: "stretch",
             display: "flex",
-            alignItems: fullVertical ? "stretch" : "center",
-            justifyContent: "center"
+            justifyContent: "center",
+            alignItems: "center"
           },
           className: "stack-scope",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Container, { size, className: (0, import_stack_ui.cn)(fullVertical ? void 0 : "p-4", containerClassName), children })
+          children
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ssr_layout_effect.SsrScript, { script: scriptString })

package/dist/components/elements/maybe-full-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/elements/maybe-full-page.tsx"],"sourcesContent":["\"use client\";\n\nimport { Container, cn } from \"@stackframe/stack-ui\";\nimport React, { useId } from \"react\";\nimport { SsrScript } from \"./ssr-layout-effect\";\n\nexport function MaybeFullPage({\n  children,\n  fullPage=true,\n  size=380,\n  fullVertical=false,\n  containerClassName,\n}: {\n  children: React.ReactNode,\n  fullPage?: boolean,\n  size?: number,\n  fullVertical?: boolean,\n  containerClassName?: string,\n}) {\n  const uniqueId = useId();\n  const id = `stack-card-frame-${uniqueId}`;\n\n  const scriptString = `(([id]) => {\n    const el = document.getElementById(id);\n    if (!el) {\n      // component is not full page\n      return;\n    }\n    const offset = el.getBoundingClientRect().top + document.documentElement.scrollTop;\n    el.style.minHeight = \\`calc(100vh - \\${offset}px)\\`;\n  })(${JSON.stringify([id])})`;\n\n  if (fullPage) {\n    return (\n      <>\n        <div\n          id={id}\n          suppressHydrationWarning\n          style={{\n            minHeight: '100vh',\n            alignSelf: 'stretch',\n            display: 'flex',\n            alignItems: fullVertical ? 'stretch' : 'center',\n            justifyContent: 'center',\n          }}\n          className=\"stack-scope\"\n        >\n          <Container size={size} className={cn(fullVertical ? undefined : 'p-4', containerClassName)}>\n            {children}\n          </Container>\n        </div>\n        <SsrScript script={scriptString} />\n      </>\n    );\n  } else {\n    return <>\n      {children}\n    </>;\n  }\n\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA8B;AAC9B,mBAA6B;AAC7B,+BAA0B;AA8BpB;AA5BC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,WAAS;AAAA,EACT,OAAK;AAAA,EACL,eAAa;AAAA,EACb;AACF,GAMG;AACD,QAAM,eAAW,oBAAM;AACvB,QAAM,KAAK,oBAAoB,QAAQ;AAEvC,QAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAQhB,KAAK,UAAU,CAAC,EAAE,CAAC,CAAC;AAEzB,MAAI,UAAU;AACZ,WACE,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,0BAAwB;AAAA,UACxB,OAAO;AAAA,YACL,WAAW;AAAA,YACX,WAAW;AAAA,YACX,SAAS;AAAA,YACT,YAAY,eAAe,YAAY;AAAA,YACvC,gBAAgB;AAAA,UAClB;AAAA,UACA,WAAU;AAAA,UAEV,sDAAC,6BAAU,MAAY,eAAW,oBAAG,eAAe,SAAY,OAAO,kBAAkB,GACtF,UACH;AAAA;AAAA,MACF;AAAA,MACA,4CAAC,sCAAU,QAAQ,cAAc;AAAA,OACnC;AAAA,EAEJ,OAAO;AACL,WAAO,2EACJ,UACH;AAAA,EACF;AAEF;","names":[]}
+{"version":3,"sources":["../../../src/components/elements/maybe-full-page.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId } from \"react\";\nimport { SsrScript } from \"./ssr-layout-effect\";\n\nexport function MaybeFullPage({\n  children,\n  fullPage,\n}: {\n  children: React.ReactNode,\n  fullPage: boolean,\n  size?: number,\n  containerClassName?: string,\n}) {\n  const uniqueId = useId();\n  const id = `stack-full-page-container-${uniqueId}`;\n\n  const scriptString = `(([id]) => {\n    const el = document.getElementById(id);\n    if (!el) {\n      // component is not full page\n      return;\n    }\n    const offset = el.getBoundingClientRect().top + document.documentElement.scrollTop;\n    el.style.minHeight = \\`calc(100vh - \\${offset}px)\\`;\n  })(${JSON.stringify([id])})`;\n\n  if (fullPage) {\n    return (\n      <>\n        <div\n          id={id}\n          suppressHydrationWarning\n          style={{\n            minHeight: '100vh',\n            alignSelf: 'stretch',\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n          className=\"stack-scope\"\n        >\n          {children}\n        </div>\n        <SsrScript script={scriptString} />\n      </>\n    );\n  } else {\n    return <>\n      {children}\n    </>;\n  }\n\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6B;AAC7B,+BAA0B;AA0BpB;AAxBC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAKG;AACD,QAAM,eAAW,oBAAM;AACvB,QAAM,KAAK,6BAA6B,QAAQ;AAEhD,QAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAQhB,KAAK,UAAU,CAAC,EAAE,CAAC,CAAC;AAEzB,MAAI,UAAU;AACZ,WACE,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,0BAAwB;AAAA,UACxB,OAAO;AAAA,YACL,WAAW;AAAA,YACX,WAAW;AAAA,YACX,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,YAAY;AAAA,UACd;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACA,4CAAC,sCAAU,QAAQ,cAAc;AAAA,OACnC;AAAA,EAEJ,OAAO;AACL,WAAO,2EACJ,UACH;AAAA,EACF;AAEF;","names":[]}

package/dist/components/elements/user-avatar.d.mts

@@ -7,6 +7,7 @@ declare function UserAvatar(props: {
         displayName?: string | null;
         primaryEmail?: string | null;
     } | null;
+    border?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 export { UserAvatar };

package/dist/components/elements/user-avatar.d.ts

@@ -7,6 +7,7 @@ declare function UserAvatar(props: {
         displayName?: string | null;
         primaryEmail?: string | null;
     } | null;
+    border?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 export { UserAvatar };

package/dist/components/elements/user-avatar.js

@@ -23,14 +23,15 @@ __export(user_avatar_exports, {
   UserAvatar: () => UserAvatar
 });
 module.exports = __toCommonJS(user_avatar_exports);
-var import_lucide_react = require("lucide-react");
 var import_stack_ui = require("@stackframe/stack-ui");
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var defaultSize = 34;
 function UserAvatar(props) {
   const user = props.user;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Avatar, { style: { height: props.size || "34px", width: props.size || "34px" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Avatar, { style: { height: props.size || defaultSize, width: props.size || defaultSize }, className: props.border ? "border" : "", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarImage, { src: user?.profileImageUrl || "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserRound, { className: "h-5 w-5 text-zinc-500" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", style: { fontSize: (props.size || defaultSize) * 0.5 }, children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserRound, { className: "text-zinc-500", size: (props.size || defaultSize) * 0.6 }) })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/elements/user-avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { UserRound } from \"lucide-react\";\nimport { User } from \"../../lib/stack-app\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\n\nexport function UserAvatar(props: {\n  size?: number,\n  user?: {\n    profileImageUrl?: string | null,\n    displayName?: string | null,\n    primaryEmail?: string | null,\n  } | null,\n}) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || '34px', width: props.size || '34px' }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium'>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"h-5 w-5 text-zinc-500\" />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA0B;AAE1B,sBAAoD;AAYhD;AAVG,SAAS,WAAW,OAOxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,0BAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,OAAO,GACzE;AAAA,gDAAC,+BAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,kCACE,iBACC,4CAAC,SAAI,WAAU,eACX,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,4CAAC,iCAAU,WAAU,yBAAwB,GACjD;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\nimport { UserRound } from \"lucide-react\";\n\nconst defaultSize = 34;\n\nexport function UserAvatar(props: {\n  size?: number,\n  user?: {\n    profileImageUrl?: string | null,\n    displayName?: string | null,\n    primaryEmail?: string | null,\n  } | null,\n  border?: boolean,\n}) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || defaultSize, width: props.size || defaultSize }} className={props.border ? 'border' : ''}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium' style={{ fontSize: (props.size || defaultSize) * 0.5 }}>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"text-zinc-500\" size={(props.size || defaultSize) * 0.6} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAoD;AACpD,0BAA0B;AAetB;AAbJ,IAAM,cAAc;AAEb,SAAS,WAAW,OAQxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,0BAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,aAAa,OAAO,MAAM,QAAQ,YAAY,GAAG,WAAW,MAAM,SAAS,WAAW,IAC3H;AAAA,gDAAC,+BAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,kCACE,iBACC,4CAAC,SAAI,WAAU,eAAc,OAAO,EAAE,WAAW,MAAM,QAAQ,eAAe,IAAI,GAC9E,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,4CAAC,iCAAU,WAAU,iBAAgB,OAAO,MAAM,QAAQ,eAAe,KAAK,GAClF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/message-cards/message-card.js

@@ -29,7 +29,7 @@ var import_maybe_full_page = require("../elements/maybe-full-page");
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 function MessageCard({ fullPage = false, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maybe_full_page.MaybeFullPage, { fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center stack-scope flex flex-col gap-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maybe_full_page.MaybeFullPage, { fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center stack-scope flex flex-col gap-4", style: { width: "380px", padding: fullPage ? "1rem" : 0 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h3", children: props.title }),
     props.children,
     (props.primaryButtonText || props.secondaryButtonText) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-center gap-4 my-5", children: [

package/dist/components/message-cards/message-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/message-cards/message-card.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { MaybeFullPage } from \"../elements/maybe-full-page\";\nimport { Button, Typography } from \"@stackframe/stack-ui\";\n\nexport function MessageCard(\n  { fullPage=false, ...props }:\n  {\n    children?: React.ReactNode,\n    title: string,\n    fullPage?: boolean,\n    primaryButtonText?: string,\n    primaryAction?: () => Promise<void> | void,\n    secondaryButtonText?: string,\n    secondaryAction?: () => Promise<void> | void,\n  }\n) {\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center stack-scope flex flex-col gap-4\">\n        <Typography type='h3'>{props.title}</Typography>\n        {props.children}\n        {(props.primaryButtonText || props.secondaryButtonText) && (\n          <div className=\"flex justify-center gap-4 my-5\">\n            {props.secondaryButtonText && (\n              <Button variant=\"secondary\" onClick={props.secondaryAction}>\n                {props.secondaryButtonText}\n              </Button>\n            )}\n            {props.primaryButtonText && (\n              <Button onClick={props.primaryAction}>\n                {props.primaryButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,6BAA8B;AAC9B,sBAAmC;AAiB3B;AAfD,SAAS,YACd,EAAE,WAAS,OAAO,GAAG,MAAM,GAU3B;AACA,SACE,4CAAC,wCAAc,UACb,uDAAC,SAAI,WAAU,+CACb;AAAA,gDAAC,8BAAW,MAAK,MAAM,gBAAM,OAAM;AAAA,IAClC,MAAM;AAAA,KACL,MAAM,qBAAqB,MAAM,wBACjC,6CAAC,SAAI,WAAU,kCACZ;AAAA,YAAM,uBACL,4CAAC,0BAAO,SAAQ,aAAY,SAAS,MAAM,iBACxC,gBAAM,qBACT;AAAA,MAED,MAAM,qBACL,4CAAC,0BAAO,SAAS,MAAM,eACpB,gBAAM,mBACT;AAAA,OAEJ;AAAA,KAEJ,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/message-cards/message-card.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { MaybeFullPage } from \"../elements/maybe-full-page\";\nimport { Button, Typography } from \"@stackframe/stack-ui\";\n\nexport function MessageCard(\n  { fullPage=false, ...props }:\n  {\n    children?: React.ReactNode,\n    title: string,\n    fullPage?: boolean,\n    primaryButtonText?: string,\n    primaryAction?: () => Promise<void> | void,\n    secondaryButtonText?: string,\n    secondaryAction?: () => Promise<void> | void,\n  }\n) {\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center stack-scope flex flex-col gap-4\" style={{ width: '380px', padding: fullPage ? '1rem' : 0 }}>\n        <Typography type='h3'>{props.title}</Typography>\n        {props.children}\n        {(props.primaryButtonText || props.secondaryButtonText) && (\n          <div className=\"flex justify-center gap-4 my-5\">\n            {props.secondaryButtonText && (\n              <Button variant=\"secondary\" onClick={props.secondaryAction}>\n                {props.secondaryButtonText}\n              </Button>\n            )}\n            {props.primaryButtonText && (\n              <Button onClick={props.primaryAction}>\n                {props.primaryButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,6BAA8B;AAC9B,sBAAmC;AAiB3B;AAfD,SAAS,YACd,EAAE,WAAS,OAAO,GAAG,MAAM,GAU3B;AACA,SACE,4CAAC,wCAAc,UACb,uDAAC,SAAI,WAAU,+CAA8C,OAAO,EAAE,OAAO,SAAS,SAAS,WAAW,SAAS,EAAE,GACnH;AAAA,gDAAC,8BAAW,MAAK,MAAM,gBAAM,OAAM;AAAA,IAClC,MAAM;AAAA,KACL,MAAM,qBAAqB,MAAM,wBACjC,6CAAC,SAAI,WAAU,kCACZ;AAAA,YAAM,uBACL,4CAAC,0BAAO,SAAQ,aAAY,SAAS,MAAM,iBACxC,gBAAM,qBACT;AAAA,MAED,MAAM,qBACL,4CAAC,0BAAO,SAAS,MAAM,eACpB,gBAAM,mBACT;AAAA,OAEJ;AAAA,KAEJ,GACF;AAEJ;","names":[]}

package/dist/components/profile-image-editor.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { UserAvatar } from './elements/user-avatar.mjs';
+
+declare function checkImageUrl(url: string): Promise<boolean>;
+declare function ProfileImageEditor(props: {
+    user: NonNullable<ComponentProps<typeof UserAvatar>['user']>;
+    onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>;
+}): react_jsx_runtime.JSX.Element;
+
+export { ProfileImageEditor, checkImageUrl };

package/dist/components/profile-image-editor.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { UserAvatar } from './elements/user-avatar.js';
+
+declare function checkImageUrl(url: string): Promise<boolean>;
+declare function ProfileImageEditor(props: {
+    user: NonNullable<ComponentProps<typeof UserAvatar>['user']>;
+    onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>;
+}): react_jsx_runtime.JSX.Element;
+
+export { ProfileImageEditor, checkImageUrl };

package/dist/components/profile-image-editor.js

@@ -0,0 +1,160 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/profile-image-editor.tsx
+var profile_image_editor_exports = {};
+__export(profile_image_editor_exports, {
+  ProfileImageEditor: () => ProfileImageEditor,
+  checkImageUrl: () => checkImageUrl
+});
+module.exports = __toCommonJS(profile_image_editor_exports);
+var import_base64 = require("@stackframe/stack-shared/dist/utils/base64");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_browser_image_compression = __toESM(require("browser-image-compression"));
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_react_avatar_editor = __toESM(require("react-avatar-editor"));
+var import_user_avatar = require("./elements/user-avatar");
+var import_jsx_runtime = require("react/jsx-runtime");
+async function checkImageUrl(url) {
+  try {
+    const res = await fetch(url, { method: "HEAD" });
+    const buff = await res.blob();
+    return buff.type.startsWith("image/");
+  } catch (e) {
+    return false;
+  }
+}
+function ProfileImageEditor(props) {
+  const cropRef = (0, import_react.useRef)(null);
+  const [slideValue, setSlideValue] = (0, import_react.useState)(1);
+  const [rawUrl, setRawUrl] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  function reset() {
+    setSlideValue(1);
+    setRawUrl(null);
+    setError(null);
+  }
+  function upload() {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.onchange = (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      (0, import_base64.fileToBase64)(file).then(async (rawUrl2) => {
+        if (await checkImageUrl(rawUrl2)) {
+          setRawUrl(rawUrl2);
+          setError(null);
+        } else {
+          setError("Invalid image");
+        }
+      }).then(() => input.remove()).catch(console.error);
+    };
+    input.click();
+  }
+  if (!rawUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cursor-pointer relative", onClick: upload, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_user_avatar.UserAvatar,
+          {
+            size: 100,
+            user: props.user,
+            border: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-0 left-0 h-[100px] w-[100px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-background p-2 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Upload, { className: "h-5 w-5" }) }) })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", type: "label", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_avatar_editor.default,
+      {
+        ref: cropRef,
+        image: rawUrl || props.user.profileImageUrl || "",
+        borderRadius: 1e3,
+        color: [0, 0, 0, 0.72],
+        scale: slideValue,
+        rotate: 0,
+        border: 20,
+        className: "border"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Slider,
+      {
+        min: 1,
+        max: 5,
+        step: 0.1,
+        defaultValue: [slideValue],
+        value: [slideValue],
+        onValueChange: (v) => setSlideValue(v[0])
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-row gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          onClick: async () => {
+            if (cropRef.current && rawUrl) {
+              const croppedUrl = cropRef.current.getImage().toDataURL("image/jpeg");
+              const compressedFile = await (0, import_browser_image_compression.default)(
+                await import_browser_image_compression.default.getFilefromDataUrl(croppedUrl, "profile-image"),
+                {
+                  maxSizeMB: 0.1,
+                  fileType: "image/jpeg"
+                }
+              );
+              const compressedUrl = await import_browser_image_compression.default.getDataUrlFromFile(compressedFile);
+              await props.onProfileImageUrlChange(compressedUrl);
+              reset();
+            }
+          },
+          children: "Save"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          variant: "secondary",
+          onClick: reset,
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProfileImageEditor,
+  checkImageUrl
+});
+//# sourceMappingURL=profile-image-editor.js.map

package/dist/components/profile-image-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/profile-image-editor.tsx"],"sourcesContent":["import { fileToBase64 } from '@stackframe/stack-shared/dist/utils/base64';\nimport { Button, Slider, Typography } from '@stackframe/stack-ui';\nimport imageCompression from 'browser-image-compression';\nimport { Upload } from 'lucide-react';\nimport { ComponentProps, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\nimport { UserAvatar } from './elements/user-avatar';\n\nexport async function checkImageUrl(url: string){\n  try {\n    const res = await fetch(url, { method: 'HEAD' });\n    const buff = await res.blob();\n    return buff.type.startsWith('image/');\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function ProfileImageEditor(props: {\n  user: NonNullable<ComponentProps<typeof UserAvatar>['user']>,\n  onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>,\n}) {\n  const cropRef = useRef<AvatarEditor>(null);\n  const [slideValue, setSlideValue] = useState(1);\n  const [rawUrl, setRawUrl] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  function reset() {\n    setSlideValue(1);\n    setRawUrl(null);\n    setError(null);\n  }\n\n  function upload() {\n    const input = document.createElement('input');\n    input.type = 'file';\n    input.onchange = (e) => {\n      const file = (e.target as HTMLInputElement).files?.[0];\n      if (!file) return;\n      fileToBase64(file)\n        .then(async (rawUrl) => {\n          if (await checkImageUrl(rawUrl)) {\n            setRawUrl(rawUrl);\n            setError(null);\n          } else {\n            setError('Invalid image');\n          }\n        })\n        .then(() => input.remove())\n        .catch(console.error);\n    };\n    input.click();\n  }\n\n  if (!rawUrl) {\n    return <div className='flex flex-col'>\n      <div className='cursor-pointer relative' onClick={upload}>\n        <UserAvatar\n          size={100}\n          user={props.user}\n          border\n        />\n        <div className='absolute top-0 left-0 h-[100px] w-[100px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity'>\n          <div className='bg-background p-2 rounded-full'>\n            <Upload className='h-5 w-5' />\n          </div>\n        </div>\n      </div>\n      {error && <Typography variant='destructive' type='label'>{error}</Typography>}\n    </div>;\n  }\n\n  return (\n    <div className='flex flex-col items-center gap-4'>\n      <AvatarEditor\n        ref={cropRef}\n        image={rawUrl || props.user.profileImageUrl || \"\"}\n        borderRadius={1000}\n        color={[0, 0, 0, 0.72]}\n        scale={slideValue}\n        rotate={0}\n        border={20}\n        className='border'\n      />\n      <Slider\n        min={1}\n        max={5}\n        step={0.1}\n        defaultValue={[slideValue]}\n        value={[slideValue]}\n        onValueChange={(v) => setSlideValue(v[0])}\n      />\n\n      <div className='flex flex-row gap-2'>\n        <Button\n          onClick={async () => {\n            if (cropRef.current && rawUrl) {\n              const croppedUrl = cropRef.current.getImage().toDataURL('image/jpeg');\n              const compressedFile = await imageCompression(\n                await imageCompression.getFilefromDataUrl(croppedUrl, 'profile-image'),\n                {\n                  maxSizeMB: 0.1,\n                  fileType: \"image/jpeg\",\n                }\n              );\n              const compressedUrl = await imageCompression.getDataUrlFromFile(compressedFile);\n              await props.onProfileImageUrlChange(compressedUrl);\n              reset();\n            }\n          }}\n        >\n          Save\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={reset}\n        >\n          Cancel\n        </Button>\n      </div>\n    </div>\n  );\n}"],"mappings":"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","names":["rawUrl","AvatarEditor","imageCompression"]}

package/dist/components/team-icon.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/team-icon.tsx
@@ -33,14 +23,13 @@ __export(team_icon_exports, {
   TeamIcon: () => TeamIcon
 });
 module.exports = __toCommonJS(team_icon_exports);
-var import_image = __toESM(require("next/image"));
 var import_stack_ui = require("@stackframe/stack-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 function TeamIcon(props) {
   if (props.team.profileImageUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-6 h-6 rounded bg-gray-200 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: props.team.profileImageUrl, alt: props.team.displayName, className: "w-6 h-6" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Avatar, { className: "w-6 h-6 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarImage, { src: props.team.profileImageUrl, alt: props.team.displayName }) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center w-6 h-6 rounded bg-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: props.team.displayName.slice(0, 1).toUpperCase() }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center w-6 h-6 rounded bg-zinc-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "text-zinc-800 dark:text-zinc-800", children: props.team.displayName.slice(0, 1).toUpperCase() }) });
   }
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport { Team } from \"..\";\nimport { Typography } from \"@stackframe/stack-ui\";\n\nexport function TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <div className=\"w-6 h-6 rounded bg-gray-200 overflow-hidden\">\n        <Image src={props.team.profileImageUrl} alt={props.team.displayName} className=\"w-6 h-6\" />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center w-6 h-6 rounded bg-gray-200\">\n        <Typography>{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,sBAA2B;AAMnB;AAJD,SAAS,SAAS,OAAuB;AAC9C,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,4CAAC,SAAI,WAAU,+CACb,sDAAC,aAAAA,SAAA,EAAM,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,WAAU,WAAU,GAC3F;AAAA,EAEJ,OAAO;AACL,WACE,4CAAC,SAAI,WAAU,gEACb,sDAAC,8BAAY,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAChE;AAAA,EAEJ;AACF;","names":["Image"]}
+{"version":3,"sources":["../../src/components/team-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport { Team } from \"..\";\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\n\nexport function TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <Avatar className=\"w-6 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 w-6 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}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAgD;AAMxC;AAJD,SAAS,SAAS,OAAuB;AAC9C,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,4CAAC,0BAAO,WAAU,mBAChB,sDAAC,+BAAY,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,GAC7E;AAAA,EAEJ,OAAO;AACL,WACE,4CAAC,SAAI,WAAU,gEACb,sDAAC,8BAAW,WAAU,oCAAoC,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC7G;AAAA,EAEJ;AACF;","names":[]}

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

@@ -54,14 +54,16 @@ var import__ = require("..");
 var import_form_warning = require("../components/elements/form-warning");
 var import_sidebar_layout = require("../components/elements/sidebar-layout");
 var import_user_avatar = require("../components/elements/user-avatar");
+var import_profile_image_editor = require("../components/profile-image-editor");
 var import_team_icon = require("../components/team-icon");
+var import_maybe_full_page = require("../components/elements/maybe-full-page");
 var import_jsx_runtime = require("react/jsx-runtime");
 function AccountSettings({ fullPage = false }) {
   const user = (0, import__.useUser)({ or: "redirect" });
   const teams = user.useTeams();
   const stackApp = (0, import__.useStackApp)();
   const project = stackApp.useProject();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maybe_full_page.MaybeFullPage, { fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { alignSelf: "stretch", flexGrow: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_sidebar_layout.SidebarLayout,
     {
       items: [
@@ -120,16 +122,30 @@ function AccountSettings({ fullPage = false }) {
       title: "Account Settings",
       basePath: stackApp.urls.accountSettings
     }
-  );
+  ) }) });
 }
 function ProfileSection() {
   const user = (0, import__.useUser)({ or: "redirect" });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Display name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.EditableText, { value: user.displayName || "", onSave: async (newDisplayName) => {
-      await user.update({ displayName: newDisplayName });
-    } })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { className: "mb-2", children: "Profile image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_profile_image_editor.ProfileImageEditor,
+        {
+          user,
+          onProfileImageUrlChange: async (profileImageUrl) => {
+            await user.update({ profileImageUrl });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Display name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.EditableText, { value: user.displayName || "", onSave: async (newDisplayName) => {
+        await user.update({ displayName: newDisplayName });
+      } })
+    ] })
+  ] });
 }
 function EmailVerificationSection() {
   const user = (0, import__.useUser)({ or: "redirect" });
@@ -348,7 +364,6 @@ function SignOutSection() {
   ) }) });
 }
 function UserSettings(props) {
-  const app = (0, import__.useStackApp)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const [leaving, setLeaving] = (0, import_react.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: !leaving ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -375,16 +390,30 @@ function ManagementSettings(props) {
   if (!updateTeamPermission) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_stack_ui.EditableText,
-      {
-        value: props.team.displayName,
-        onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_profile_image_editor.ProfileImageEditor,
+        {
+          user: props.team,
+          onProfileImageUrlChange: async (profileImageUrl) => {
+            await props.team.update({ profileImageUrl });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.EditableText,
+        {
+          value: props.team.displayName,
+          onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
+        }
+      )
+    ] })
+  ] });
 }
 function ProfileSettings(props) {
   const user = (0, import__.useUser)({ or: "redirect" });