stack-auth · N2D4 · Aug 28, 2025 · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025
diff --git a/AGENTS.md b/AGENTS.md
@@ -73,9 +73,9 @@ To see all development ports, refer to the index.html of `apps/dev-launchpad/pub
 - Environment variables are pre-configured in `.env.development` files
 - Always run typecheck, lint, and test to make sure your changes are working as expected. You can save time by only linting and testing the files you've changed (and/or related E2E tests).
 - The project uses a custom route handler system in the backend for consistent API responses
-- Sometimes, the typecheck will give errors along the line of "Cannot assign Buffer to Uint8Array" or similar, on changes that are completely unrelated to your own changes. If that happens, tell the user to run `pnpm clean && pnpm i && pnpm run codegen && pnpm build:packages`, and restart the dev server (you cannot run this yourself). After that's done, the typecheck should pass.
 - When writing tests, prefer .toMatchInlineSnapshot over other selectors, if possible. You can check (and modify) the snapshot-serializer.ts file to see how the snapshots are formatted and how non-deterministic values are handled.
 - Whenever you learn something new, or at the latest right before you call the `Stop` tool, write whatever you learned into the ./claude/CLAUDE-KNOWLEDGE.md file, in the Q&A format in there. You will later be able to look up knowledge from there (based on the question you asked).
+- Animations: Keep hover/click transitions snappy and fast. Don't delay the action with a pre-transition (e.g. no fade-in when hovering a button) — it makes the UI feel sluggish. Instead, apply transitions after the action, like a smooth fade-out when the hover ends.
 
 ### Code-related
 - Use ES6 maps instead of records wherever you can.
diff --git a/apps/backend/src/app/api/latest/internal/payments/stripe/account-info/route.ts b/apps/backend/src/app/api/latest/internal/payments/stripe/account-info/route.ts
@@ -1,8 +1,8 @@
 import { getStackStripe } from "@/lib/stripe";
 import { globalPrismaClient } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, adminAuthTypeSchema, yupBoolean, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
-import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 
 export const GET = createSmartRouteHandler({
   metadata: {
@@ -32,11 +32,7 @@ export const GET = createSmartRouteHandler({
     });
 
     if (!project?.stripeAccountId) {
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: null,
-      };
+      throw new KnownErrors.StripeAccountInfoNotFound();
     }
 
     const stripe = getStackStripe();

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/globe.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/globe.tsx
@@ -182,8 +182,9 @@ export function GlobeSection({ countryData, totalUsers, children }: {countryData
               }
               const controls = current.controls();
               controls.maxDistance = 1000;
-              controls.minDistance = 400;
+              controls.minDistance = 200;
               controls.dampingFactor = 0.2;
+              current.camera().position.z = 500;
               // even though rendering is resumed by default, we want to pause it after 200ms, so call resumeRender()
-              controls.maxDistance = 1000;
-              controls.minDistance = 400;
-              controls.minDistance = 200;
-              controls.dampingFactor = 0.2;
-              current.camera().position.z = 500;
-              // even though rendering is resumed by default, we want to pause it after 200ms, so call resumeRender()
+   const controls = current.controls();
+   controls.maxDistance = 1000;
+   controls.minDistance = 200;
+   controls.dampingFactor = 0.2;
+   controls.enableDamping = true;
+   current.camera().position.z = 500;
+   controls.update();
+   // even though rendering is resumed by default, we want to pause it after 200ms, so call resumeRender()
-              controls.maxDistance = 1000;
-              controls.minDistance = 400;
-              controls.minDistance = 200;
-              controls.dampingFactor = 0.2;
-              current.camera().position.z = 500;
-              // even though rendering is resumed by default, we want to pause it after 200ms, so call resumeRender()
+   const controls = current.controls();
+   controls.maxDistance = 1000;
+   controls.minDistance = 200;
+   controls.dampingFactor = 0.2;
+   controls.enableDamping = true;
+   current.camera().position.z = 500;
+   controls.update();
+   // even though rendering is resumed by default, we want to pause it after 200ms, so call resumeRender()
               resumeRender();
             }}

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/page-layout.tsx
@@ -12,9 +12,9 @@ export function PageLayout(props: {
   width?: number,
 })) {
   return (
-    <div className="py-4 px-4 md:px-6 flex justify-center">
+    <div className="py-4 px-4 md:px-6 flex justify-center flex-1">
       <div
-        className={"min-w-0"}
+        className={"min-w-0 flex flex-col"}
         style={{
           maxWidth: props.fillWidth ? undefined : (props.width ?? 1250),
           width: props.fillWidth ? '100%' : (props.width ?? 1250),
@@ -33,7 +33,7 @@ export function PageLayout(props: {
           </div>
           {props.actions}
         </div>
-        <div className="mt-4 flex flex-col gap-4">
+        <div className="mt-4 flex flex-col gap-4 flex-1">
           {props.children}
         </div>
       </div>

diff --git a/...ashboard/src/app/(main)/(protected)/projects/[projectId]/payments/create-group-dialog.tsx b/...ashboard/src/app/(main)/(protected)/projects/[projectId]/payments/create-group-dialog.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Typography, SimpleTooltip } from "@stackframe/stack-ui";
+import { useState } from "react";
+
+type CreateGroupDialogProps = {
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+  onCreate: (group: { id: string, displayName: string }) => void,
+};
+
+export function CreateGroupDialog({ open, onOpenChange, onCreate }: CreateGroupDialogProps) {
+  const [groupId, setGroupId] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [errors, setErrors] = useState<{ id?: string, displayName?: string }>({});
+
+  const validateAndCreate = () => {
+    const newErrors: { id?: string, displayName?: string } = {};
+
+    // Validate group ID
+    if (!groupId.trim()) {
+      newErrors.id = "Group ID is required";
+    } else if (!/^[a-z0-9-]+$/.test(groupId)) {
+      newErrors.id = "Group ID must contain only lowercase letters, numbers, and hyphens";
+    }
+
+    // Validate display name
+    if (!displayName.trim()) {
+      newErrors.displayName = "Display name is required";
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    onCreate({ id: groupId.trim(), displayName: displayName.trim() });
+
+    // Reset form
+    setGroupId("");
+    setDisplayName("");
+    setErrors({});
+    onOpenChange(false);
+  };
+
+  const handleClose = () => {
+    setGroupId("");
+    setDisplayName("");
+    setErrors({});
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[425px]">
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[425px]">
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => next ? onOpenChange(true) : handleClose()}
+    >
+      <DialogContent className="sm:max-w-[425px]">
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[425px]">
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => next ? onOpenChange(true) : handleClose()}
+    >
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create Offer Group</DialogTitle>
+          <DialogDescription>
+            Offer groups allow you to organize related offers. Customers can only have one active offer from each group at a time (except for add-ons).
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="group-id">
+              <SimpleTooltip tooltip="This is the unique identifier for your group, used in code">
+                Group ID
+              </SimpleTooltip>
+            </Label>
+            <Input
+              id="group-id"
+              value={groupId}
+              onChange={(e) => {
+                setGroupId(e.target.value);
+                setErrors(prev => ({ ...prev, id: undefined }));
+              }}
+              placeholder="e.g., pricing-tiers"
+              className={errors.id ? "border-destructive" : ""}
+            />
+            {errors.id && (
+              <Typography type="label" className="text-destructive">
+                {errors.id}
+              </Typography>
+            )}
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="display-name">
+              <SimpleTooltip tooltip="This is how the group will be displayed to users">
+                Display Name
+              </SimpleTooltip>
+            </Label>
+            <Input
+              id="display-name"
+              value={displayName}
+              onChange={(e) => {
+                setDisplayName(e.target.value);
+                setErrors(prev => ({ ...prev, displayName: undefined }));
+              }}
+              placeholder="e.g., Pricing Tiers"
+              className={errors.displayName ? "border-destructive" : ""}
+            />
+            {errors.displayName && (
+              <Typography type="label" className="text-destructive">
+                {errors.displayName}
+              </Typography>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={validateAndCreate}>
+            Create Group
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+