@stackframe/dashboard-ui-components 2.8.86 → 2.8.89

package/dist/dashboard-ui-components.global.js

@@ -337,12 +337,14 @@ var DashboardUI = (() => {
     formatGridDate: () => formatGridDate,
     formatValue: () => formatValue,
     getDesignChartColor: () => getDesignChartColor,
+    getEffectiveMinWidth: () => getEffectiveMinWidth,
     getPayloadConfigFromPayload: () => getPayloadConfigFromPayload,
     getSortDirection: () => getSortDirection,
     getSortIndex: () => getSortIndex,
     getTotalPages: () => getTotalPages,
     isAnalyticsChartDataLayer: () => isAnalyticsChartDataLayer,
     isColumnVisible: () => isColumnVisible,
+    isDataGridInteractiveRowClickTarget: () => isDataGridInteractiveRowClickTarget,
     isTimeseriesState: () => isTimeseriesState,
     paginateRows: () => paginateRows,
     patchLayerById: () => patchLayerById,
@@ -1627,7 +1629,7 @@ This is likely an error in Stack. Please make sure you are running the newest ve
         },
         enumerable: false
       });
-      if (process.env.NEXT_PUBLIC_STACK_DEBUGGER_ON_ASSERTION_ERROR === "true") debugger;
+      if ((typeof process !== "undefined" ? process.env.NEXT_PUBLIC_STACK_DEBUGGER_ON_ASSERTION_ERROR : void 0) === "true") debugger;
     }
   };
   StackAssertionError.prototype.name = "StackAssertionError";
@@ -4308,6 +4310,12 @@ This is likely an error in Stack. Please make sure you are running the newest ve
   // ../stack-shared/dist/esm/utils/react.js
   var import_react3 = __toESM(require_react());
 
+  // ../stack-shared/dist/esm/utils/env.js
+  function getProcessEnv(name) {
+    if (typeof process === "undefined" || typeof process.env === "undefined") return;
+    return process.env[name];
+  }
+
   // ../stack-shared/dist/esm/utils/results.js
   var Result = {
     fromThrowing,
@@ -4430,6 +4438,49 @@ This is likely an error in Stack. Please make sure you are running the newest ve
     return Object.assign(Result.error(new RetryError(errors)), { attempts: totalAttempts });
   }
 
+  // ../stack-shared/dist/esm/utils/bytes.js
+  function decodeBase64(input) {
+    return new Uint8Array(atob(input).split("").map((char) => char.charCodeAt(0)));
+  }
+  function isBase64(input) {
+    return /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/.test(input);
+  }
+
+  // ../stack-shared/dist/esm/utils/urls.js
+  function createUrlIfValid(...args) {
+    try {
+      return new URL(...args);
+    } catch (e40) {
+      return null;
+    }
+  }
+  function isValidUrl(url) {
+    return !!createUrlIfValid(url);
+  }
+  function isValidHostname(hostname) {
+    if (!hostname || hostname.startsWith(".") || hostname.endsWith(".") || hostname.includes("..")) return false;
+    const url = createUrlIfValid(`https://${hostname}`);
+    if (!url) return false;
+    return url.hostname === hostname;
+  }
+  function isValidHostnameWithWildcards(hostname) {
+    if (!hostname) return false;
+    if (!hostname.includes("*")) return isValidHostname(hostname);
+    if (hostname.startsWith(".") || hostname.endsWith(".")) return false;
+    if (hostname.includes("..")) return false;
+    const testHostname = hostname.replace(/\*+/g, "wildcard");
+    if (!/^[a-zA-Z0-9.-]+$/.test(testHostname)) return false;
+    const segments = hostname.split(/\*+/);
+    for (let i = 0; i < segments.length; i++) {
+      const segment = segments[i];
+      if (segment === "") continue;
+      if (i === 0 && segment.startsWith(".")) return false;
+      if (i === segments.length - 1 && segment.endsWith(".")) return false;
+      if (segment.includes("..")) return false;
+    }
+    return true;
+  }
+
   // ../stack-shared/dist/esm/known-errors.js
   var KnownError = class extends StatusError {
     constructor(statusCode, humanReadableMessage, details) {
@@ -4775,6 +4826,7 @@ This is likely an error in Stack. Please make sure you are running the newest ve
     `Restricted users cannot accept team invitations. Reason: ${restrictedReason.type}. Please complete the onboarding process before accepting team invitations.`,
     { restricted_reason: restrictedReason }
   ], (json) => [json.restricted_reason ?? { type: "anonymous" }]);
+  var TeamInvitationEmailMismatch = createKnownErrorConstructor(KnownError, "TEAM_INVITATION_EMAIL_MISMATCH", () => [403, "This team invitation was sent to a different email address. Sign in with the invited email, or add and verify that email on your account, then try again."], () => []);
   var EmailTemplateAlreadyExists = createKnownErrorConstructor(KnownError, "EMAIL_TEMPLATE_ALREADY_EXISTS", () => [409, "Email template already exists."], () => []);
   var OAuthConnectionNotConnectedToUser = createKnownErrorConstructor(KnownError, "OAUTH_CONNECTION_NOT_CONNECTED_TO_USER", () => [400, "The OAuth connection is not connected to any user."], () => []);
   var OAuthConnectionAlreadyConnectedToAnotherUser = createKnownErrorConstructor(KnownError, "OAUTH_CONNECTION_ALREADY_CONNECTED_TO_ANOTHER_USER", () => [409, "The OAuth connection is already connected to another user."], () => []);
@@ -4855,7 +4907,7 @@ This is likely an error in Stack. Please make sure you are running the newest ve
   var InvalidAuthorizationCode = createKnownErrorConstructor(KnownError, "INVALID_AUTHORIZATION_CODE", () => [400, "The given authorization code is invalid."], () => []);
   var InvalidAppleCredentials = createKnownErrorConstructor(KnownError, "INVALID_APPLE_CREDENTIALS", () => [400, "The Apple Sign In credentials could not be verified. Please try signing in again."], () => []);
   var OAuthProviderAccessDenied = createKnownErrorConstructor(KnownError, "OAUTH_PROVIDER_ACCESS_DENIED", () => [400, "The OAuth provider denied access to the user."], () => []);
-  var OAuthProviderTemporarilyUnavailable = createKnownErrorConstructor(KnownError, "OAUTH_PROVIDER_TEMPORARILY_UNAVAILABLE", () => [503, "The OAuth provider is temporarily unavailable. Please try signing in again."], () => []);
+  var OAuthProviderTemporarilyUnavailable = createKnownErrorConstructor(KnownError, "OAUTH_PROVIDER_TEMPORARILY_UNAVAILABLE", () => [503, "The OAuth provider is temporarily unavailable. Please try again later."], () => []);
   var ContactChannelAlreadyUsedForAuthBySomeoneElse = createKnownErrorConstructor(KnownError, "CONTACT_CHANNEL_ALREADY_USED_FOR_AUTH_BY_SOMEONE_ELSE", (type, contactChannelValue, wouldWorkIfEmailWasVerified = false) => [
     409,
     `This ${type} ${contactChannelValue ? `"(${contactChannelValue})"` : ""} is already used for authentication by another account${wouldWorkIfEmailWasVerified ? " but the email is not verified. Please login to your existing account with the method you used to sign up, and then verify your email to sign in with this login method." : "."}`,
@@ -5116,6 +5168,7 @@ This is likely an error in Stack. Please make sure you are running the newest ve
     TeamNotFound,
     TeamMembershipNotFound,
     TeamInvitationRestrictedUserNotAllowed,
+    TeamInvitationEmailMismatch,
     EmailTemplateAlreadyExists,
     OAuthConnectionNotConnectedToUser,
     OAuthConnectionAlreadyConnectedToAnotherUser,
@@ -5181,49 +5234,6 @@ This is likely an error in Stack. Please make sure you are running the newest ve
     knownErrorCodes.add(KnownError2.errorCode);
   }
 
-  // ../stack-shared/dist/esm/utils/bytes.js
-  function decodeBase64(input) {
-    return new Uint8Array(atob(input).split("").map((char) => char.charCodeAt(0)));
-  }
-  function isBase64(input) {
-    return /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/.test(input);
-  }
-
-  // ../stack-shared/dist/esm/utils/urls.js
-  function createUrlIfValid(...args) {
-    try {
-      return new URL(...args);
-    } catch (e40) {
-      return null;
-    }
-  }
-  function isValidUrl(url) {
-    return !!createUrlIfValid(url);
-  }
-  function isValidHostname(hostname) {
-    if (!hostname || hostname.startsWith(".") || hostname.endsWith(".") || hostname.includes("..")) return false;
-    const url = createUrlIfValid(`https://${hostname}`);
-    if (!url) return false;
-    return url.hostname === hostname;
-  }
-  function isValidHostnameWithWildcards(hostname) {
-    if (!hostname) return false;
-    if (!hostname.includes("*")) return isValidHostname(hostname);
-    if (hostname.startsWith(".") || hostname.endsWith(".")) return false;
-    if (hostname.includes("..")) return false;
-    const testHostname = hostname.replace(/\*+/g, "wildcard");
-    if (!/^[a-zA-Z0-9.-]+$/.test(testHostname)) return false;
-    const segments = hostname.split(/\*+/);
-    for (let i = 0; i < segments.length; i++) {
-      const segment = segments[i];
-      if (segment === "") continue;
-      if (i === 0 && segment.startsWith(".")) return false;
-      if (i === segments.length - 1 && segment.endsWith(".")) return false;
-      if (segment.includes("..")) return false;
-    }
-    return true;
-  }
-
   // ../../node_modules/.pnpm/yup@1.7.1/node_modules/yup/index.esm.js
   var import_property_expr = __toESM(require_property_expr());
   var import_tiny_case = __toESM(require_tiny_case());
@@ -8475,8 +8485,10 @@ attempted value: ${formattedValue}
   });
   var neonAuthorizationHeaderSchema = basicAuthorizationHeaderSchema.test("is-authorization-header", "Invalid client_id:client_secret values; did you use the correct values for the integration?", (value) => {
     if (!value) return true;
-    const [clientId, clientSecret] = decodeBasicAuthorizationHeader(value) ?? throwErr(`Authz header invalid? This should've been validated by basicAuthorizationHeaderSchema: ${value}`);
-    for (const neonClientConfig of JSON.parse(process.env.STACK_INTEGRATION_CLIENTS_CONFIG || "[]")) if (clientId === neonClientConfig.client_id && clientSecret === neonClientConfig.client_secret) return true;
+    const decoded = decodeBasicAuthorizationHeader(value);
+    if (decoded === null) return true;
+    const [clientId, clientSecret] = decoded;
+    for (const neonClientConfig of JSON.parse(getProcessEnv("STACK_INTEGRATION_CLIENTS_CONFIG") || "[]")) if (clientId === neonClientConfig.client_id && clientSecret === neonClientConfig.client_secret) return true;
     return false;
   });
   var branchConfigSourceSchema = yupUnion(yupObject({
@@ -9723,8 +9735,9 @@ attempted value: ${formattedValue}
     return runAsynchronously(args[0], {
       ...args[1],
       onError: (error) => {
-        if (KnownError.isKnownError(error) && typeof process !== "undefined" && "production"?.includes("production")) alert(error.message);
-        else alert(`An unhandled error occurred. Please ${false ? `check the browser console for the full error.` : "report this to the developer."}
+        const nodeEnv = getProcessEnv("NODE_ENV");
+        if (KnownError.isKnownError(error) && nodeEnv?.includes("production")) alert(error.message);
+        else alert(`An unhandled error occurred. Please ${nodeEnv === "development" ? `check the browser console for the full error.` : "report this to the developer."}
 
 ${error}`);
         args[1]?.onError?.(error);
@@ -16205,6 +16218,7 @@ ${error}`);
     size: size5 = "sm",
     glassmorphic: glassmorphicProp,
     gradient = "blue",
+    trailing,
     className,
     ...props
   }) {
@@ -16221,65 +16235,77 @@ ${error}`);
         );
       }
     };
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "flex items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden",
+          "flex w-full min-w-0 items-center gap-2",
           glassmorphic ? "rounded-xl bg-black/[0.08] dark:bg-white/[0.04] p-1 backdrop-blur-sm" : "border-b border-gray-300 dark:border-gray-800",
           className
         ),
         ...props,
-        children: categories.map((category) => {
-          const isActive = selectedCategory === category.id;
-          const badgeValue = category.badgeCount ?? category.count;
-          const shouldShowBadge = showBadge && badgeValue !== void 0;
-          return /* @__PURE__ */ jsxs(
-            "button",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              onClick: () => handleSelect(category.id),
-              disabled: loadingCategoryId !== null,
               className: cn(
-                "font-medium transition-all duration-150 hover:transition-none relative flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap",
-                "hover:text-gray-900 dark:hover:text-gray-100",
-                sizeClass.button,
-                glassmorphic ? "rounded-lg" : "",
-                isActive ? cn(
-                  gradientClass.activeText,
-                  glassmorphic && "bg-background shadow-sm ring-1 ring-black/[0.12] dark:ring-white/[0.06]"
-                ) : "text-gray-700 dark:text-gray-400"
+                "flex min-h-0 min-w-0 flex-1 items-center gap-1 overflow-x-auto flex-nowrap [&::-webkit-scrollbar]:hidden"
               ),
-              children: [
-                loadingCategoryId === category.id && /* @__PURE__ */ jsx(
-                  Spinner,
+              children: categories.map((category) => {
+                const isActive = selectedCategory === category.id;
+                const badgeValue = category.badgeCount ?? category.count;
+                const shouldShowBadge = showBadge && badgeValue !== void 0;
+                return /* @__PURE__ */ jsxs(
+                  "button",
                   {
-                    size: 12,
-                    className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: cn(
-                  "flex items-center gap-2",
-                  loadingCategoryId === category.id && "invisible"
-                ), children: [
-                  category.label,
-                  shouldShowBadge && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "rounded-full",
-                        sizeClass.badge,
-                        isActive ? gradientClass.activeBadge : "bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+                    onClick: () => handleSelect(category.id),
+                    disabled: loadingCategoryId !== null,
+                    className: cn(
+                      "font-medium transition-all duration-150 hover:transition-none relative flex flex-shrink-0 items-center justify-center gap-2 whitespace-nowrap",
+                      "hover:text-gray-900 dark:hover:text-gray-100",
+                      sizeClass.button,
+                      glassmorphic ? "rounded-lg" : "",
+                      isActive ? cn(
+                        gradientClass.activeText,
+                        glassmorphic && "bg-background shadow-sm ring-1 ring-black/[0.12] dark:ring-white/[0.06]"
+                      ) : "text-gray-700 dark:text-gray-400"
+                    ),
+                    children: [
+                      loadingCategoryId === category.id && /* @__PURE__ */ jsx(
+                        Spinner,
+                        {
+                          size: 12,
+                          className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+                        }
                       ),
-                      children: badgeValue
-                    }
-                  )
-                ] }),
-                !glassmorphic && isActive && /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-0 left-0 right-0 h-0.5", gradientClass.underline) })
-              ]
-            },
-            category.id
-          );
-        })
+                      /* @__PURE__ */ jsxs("span", { className: cn(
+                        "flex items-center gap-2",
+                        loadingCategoryId === category.id && "invisible"
+                      ), children: [
+                        category.icon && /* @__PURE__ */ jsx(category.icon, { className: "h-4 w-4 shrink-0", "aria-hidden": true }),
+                        category.label,
+                        shouldShowBadge && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "rounded-full",
+                              sizeClass.badge,
+                              isActive ? gradientClass.activeBadge : "bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+                            ),
+                            children: badgeValue
+                          }
+                        )
+                      ] }),
+                      !glassmorphic && isActive && /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-0 left-0 right-0 h-0.5", gradientClass.underline) })
+                    ]
+                  },
+                  category.id
+                );
+              })
+            }
+          ),
+          trailing != null ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: trailing }) : null
+        ]
       }
     );
   }
@@ -17150,7 +17176,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       "div",
       {
         ref: wrapperRef,
-        className: "relative w-full select-none",
+        className: "relative flex h-full min-h-0 w-full min-w-0 flex-1 flex-col select-none",
         onClick: (e40) => e40.stopPropagation(),
         children: [
           zoomRange && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-20", children: /* @__PURE__ */ jsxs(
@@ -17165,7 +17191,7 @@ ${colorConfig.map(([key, itemConfig]) => {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-h-[260px] flex-col items-center gap-6 sm:min-h-[320px] sm:flex-row sm:items-center sm:justify-center sm:gap-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-1 flex-wrap content-center items-center justify-center gap-x-10 gap-y-6", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center gap-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ jsx(DesignChartContainer, { config: chartConfig, className: containerClassName, children: /* @__PURE__ */ jsxs(
@@ -17254,7 +17280,7 @@ ${colorConfig.map(([key, itemConfig]) => {
                 showCompare && /* @__PURE__ */ jsx(TrendPill, { delta: activeDelta, size: "sm", label: strings.pieVsPrev })
               ] })
             ] }),
-            /* @__PURE__ */ jsx("ul", { className: "flex w-full max-w-[380px] flex-col gap-1", children: legendRows.map((r7) => {
+            /* @__PURE__ */ jsx("ul", { className: "flex min-w-[200px] max-w-[300px] flex-col gap-1", children: legendRows.map((r7) => {
               const isActive = hoverKey === r7.key;
               const dimmed = hoverKey != null && !isActive;
               const rowDelta = formatDelta(r7.value, r7.prevValue);
@@ -19461,6 +19487,81 @@ ${colorConfig.map(([key, itemConfig]) => {
   // src/components/data-grid/data-grid.tsx
   var import_react30 = __toESM(require_react());
 
+  // src/components/data-grid/data-grid-sizing.ts
+  function colVar(id) {
+    if (false) {
+      console.warn(
+        `[DataGrid] column id ${JSON.stringify(id)} contains characters that are not safe in a CSS custom property name. Prefer ascii identifiers.`
+      );
+    }
+    return `--col-${id}`;
+  }
+  var MIN_COL_WIDTH = 20;
+  var MIN_CUSTOM_HEADER_WIDTH = 50;
+  var DEFAULT_MAX_COL_WIDTH = 800;
+  var HEADER_CHROME_PX = 12 + 12 + 6 + 12 + 2;
+  var measureContext = null;
+  var headerWidthCache = /* @__PURE__ */ new Map();
+  function measureHeaderLabelWidth(label) {
+    const cached = headerWidthCache.get(label);
+    if (cached != null) {
+      return cached;
+    }
+    if (typeof document === "undefined") {
+      return 0;
+    }
+    if (measureContext == null) {
+      measureContext = document.createElement("canvas").getContext("2d");
+    }
+    if (measureContext == null) {
+      return 0;
+    }
+    measureContext.font = "600 12px system-ui, -apple-system, sans-serif";
+    const text = label.toUpperCase();
+    const letterSpacingPx = 0.05 * 12;
+    const width = Math.ceil(
+      measureContext.measureText(text).width + letterSpacingPx * text.length
+    );
+    headerWidthCache.set(label, width);
+    return width;
+  }
+  function getEffectiveMinWidth(col) {
+    if (col.minWidth != null) {
+      return col.minWidth;
+    }
+    const label = typeof col.header === "string" ? col.header : null;
+    if (label == null) {
+      return typeof col.header === "function" ? MIN_CUSTOM_HEADER_WIDTH : MIN_COL_WIDTH;
+    }
+    return Math.max(MIN_COL_WIDTH, measureHeaderLabelWidth(label) + HEADER_CHROME_PX);
+  }
+  function getColumnSizingStyle(col) {
+    const w = `var(${colVar(col.id)})`;
+    const grow = col.flex ?? 0;
+    return {
+      flex: `${grow} 0 ${w}`,
+      width: w,
+      minWidth: getEffectiveMinWidth(col),
+      maxWidth: grow > 0 ? void 0 : col.maxWidth ?? DEFAULT_MAX_COL_WIDTH
+    };
+  }
+  function createGridSizingStyle(widths, totalWidth) {
+    const style = { "--grid-total-w": `${totalWidth}px` };
+    for (const [id, w] of widths) {
+      style[colVar(id)] = `${w}px`;
+    }
+    return style;
+  }
+  function applyDraggedColumnWidth(el, columnId, width, totalWidth) {
+    el.style.setProperty(colVar(columnId), `${width}px`);
+    el.style.setProperty("--grid-total-w", `${totalWidth}px`);
+  }
+  function clampColumnWidth(col, width) {
+    const minWidth = getEffectiveMinWidth(col);
+    const maxWidth = col.maxWidth ?? DEFAULT_MAX_COL_WIDTH;
+    return Math.max(minWidth, Math.min(maxWidth, width));
+  }
+
   // src/components/data-grid/data-grid-toolbar.tsx
   var import_react28 = __toESM(require_react());
   function usePopover() {
@@ -19683,68 +19784,48 @@ ${colorConfig.map(([key, itemConfig]) => {
       () => columns.some((c4) => c4.type === "date" || c4.type === "dateTime"),
       [columns]
     );
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06]", children: [
-      !hideQuickSearch && /* @__PURE__ */ jsx(
-        QuickSearch,
-        {
-          value: state.quickSearch,
-          onChange: updateQuickSearch,
-          placeholder: strings.searchPlaceholder
-        }
-      ),
-      extraLeading,
-      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0" }),
-      extra,
-      /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: columnPopover.ref, children: [
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: [
+        !hideQuickSearch && /* @__PURE__ */ jsx(
+          QuickSearch,
           {
-            onClick: () => columnPopover.setOpen(!columnPopover.open),
-            active: columnPopover.open,
-            title: strings.columns,
-            children: /* @__PURE__ */ jsx(n3, { className: "h-3.5 w-3.5" })
+            value: state.quickSearch,
+            onChange: updateQuickSearch,
+            placeholder: strings.searchPlaceholder
           }
         ),
-        columnPopover.open && /* @__PURE__ */ jsx(PopoverPanel, { popoverRef: columnPopover.ref, className: "right-0 left-auto", children: /* @__PURE__ */ jsx(
-          ColumnManager,
-          {
-            columns,
-            visibility: state.columnVisibility,
-            onChange: updateVisibility,
-            strings,
-            dateDisplay: state.dateDisplay,
-            onDateDisplayChange: updateDateDisplay,
-            hasDateColumns
-          }
-        ) })
+        extraLeading,
+        extra
       ] }),
-      /* @__PURE__ */ jsx(ToolbarButton, { onClick: exportCsv, title: strings.export, children: /* @__PURE__ */ jsx(l2, { className: "h-3.5 w-3.5" }) })
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: columnPopover.ref, children: [
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onClick: () => columnPopover.setOpen(!columnPopover.open),
+              active: columnPopover.open,
+              title: strings.columns,
+              children: /* @__PURE__ */ jsx(n3, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          columnPopover.open && /* @__PURE__ */ jsx(PopoverPanel, { popoverRef: columnPopover.ref, className: "right-0 left-auto", children: /* @__PURE__ */ jsx(
+            ColumnManager,
+            {
+              columns,
+              visibility: state.columnVisibility,
+              onChange: updateVisibility,
+              strings,
+              dateDisplay: state.dateDisplay,
+              onDateDisplayChange: updateDateDisplay,
+              hasDateColumns
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(ToolbarButton, { onClick: exportCsv, title: strings.export, children: /* @__PURE__ */ jsx(l2, { className: "h-3.5 w-3.5" }) })
+      ] })
     ] });
   }
 
-  // src/components/data-grid/data-grid-sizing.ts
-  function colVar(id) {
-    return `--col-${id}`;
-  }
-  function getColumnSizingStyle(col) {
-    const w = `var(${colVar(col.id)})`;
-    return { flex: `0 0 ${w}`, width: w, minWidth: col.minWidth ?? 50, maxWidth: col.maxWidth ?? 800 };
-  }
-  function createGridSizingStyle(widths, totalWidth) {
-    const style = { "--grid-total-w": `${totalWidth}px` };
-    for (const [id, w] of widths) {
-      style[colVar(id)] = `${w}px`;
-    }
-    return style;
-  }
-  function applyDraggedColumnWidth(el, columnId, width, totalWidth) {
-    el.style.setProperty(colVar(columnId), `${width}px`);
-    el.style.setProperty("--grid-total-w", `${totalWidth}px`);
-  }
-  function clampColumnWidth(col, width) {
-    return Math.max(col.minWidth ?? 50, Math.min(col.maxWidth ?? 800, width));
-  }
-
   // src/components/data-grid/state.ts
   var EMPTY_SORT_MODEL = [];
   var EMPTY_SELECTION = {
@@ -19759,7 +19840,8 @@ ${colorConfig.map(([key, itemConfig]) => {
     const columnWidths = {};
     const columnOrder = [];
     for (const col of columns) {
-      columnWidths[col.id] = col.width ?? 150;
+      const raw = col.width ?? 150;
+      columnWidths[col.id] = clampColumnWidth(col, raw);
       columnOrder.push(col.id);
     }
     return {
@@ -19780,7 +19862,8 @@ ${colorConfig.map(([key, itemConfig]) => {
     return row[key];
   }
   function resolveColumnWidth(col, storedWidth) {
-    return storedWidth ?? col.width ?? 150;
+    const raw = storedWidth ?? col.width ?? 150;
+    return clampColumnWidth(col, raw);
   }
   function isColumnVisible(columnId, visibility) {
     return visibility[columnId] !== false;
@@ -19914,8 +19997,18 @@ ${colorConfig.map(([key, itemConfig]) => {
     { amount: 12, unit: "month" },
     { amount: Number.POSITIVE_INFINITY, unit: "year" }
   ];
+  var relativeTimeFormatterCache = /* @__PURE__ */ new Map();
+  function getRelativeTimeFormatter(locale2) {
+    const key = locale2 ?? "__default__";
+    let cached = relativeTimeFormatterCache.get(key);
+    if (cached == null) {
+      cached = new Intl.RelativeTimeFormat(locale2, { numeric: "auto" });
+      relativeTimeFormatterCache.set(key, cached);
+    }
+    return cached;
+  }
   function defaultFormatRelative(date2) {
-    const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+    const rtf = getRelativeTimeFormatter();
     let duration = (date2.getTime() - Date.now()) / 1e3;
     for (const div of DIVISIONS) {
       if (Math.abs(duration) < div.amount) {
@@ -19945,14 +20038,14 @@ ${colorConfig.map(([key, itemConfig]) => {
     const csvRows = rows.map(
       (row) => columns.map((col) => {
         const val = resolveColumnValue(col, row);
-        const formatted = col.formatValue ? col.formatValue(val, row) : String(val ?? "");
+        const formatted = col.formatValue ? String(col.formatValue(val, row) ?? "") : String(val ?? "");
         if (formatted.includes(",") || formatted.includes('"') || formatted.includes("\n")) {
           return `"${formatted.replace(/"/g, '""')}"`;
         }
         return formatted;
       })
     );
-    const csvContent = [
+    const csvContent = "\uFEFF" + [
       header.join(","),
       ...csvRows.map((row) => row.join(","))
     ].join("\n");
@@ -19961,8 +20054,13 @@ ${colorConfig.map(([key, itemConfig]) => {
     const link = document.createElement("a");
     link.href = url;
     link.download = `${filename}.csv`;
-    link.click();
-    URL.revokeObjectURL(url);
+    document.body.appendChild(link);
+    try {
+      link.click();
+    } finally {
+      link.remove();
+      URL.revokeObjectURL(url);
+    }
   }
 
   // src/components/data-grid/strings.ts
@@ -20076,6 +20174,45 @@ ${colorConfig.map(([key, itemConfig]) => {
       }
     );
   }
+  function getNearestVerticalScrollElement(element) {
+    let current = element?.parentElement ?? null;
+    while (current) {
+      const style = window.getComputedStyle(current);
+      const overflowY = style.overflowY === "visible" ? style.overflow : style.overflowY;
+      const canScrollVertically = (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") && current.scrollHeight > current.clientHeight + 1;
+      if (canScrollVertically) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return window;
+  }
+  function getEventTargetElement(target) {
+    if (target instanceof Element) {
+      return target;
+    }
+    if (target instanceof Node) {
+      return target.parentElement;
+    }
+    return null;
+  }
+  function isDataGridInteractiveRowClickTarget(target) {
+    const targetElement = getEventTargetElement(target);
+    return targetElement?.closest([
+      "a",
+      "button",
+      "input",
+      "select",
+      "textarea",
+      '[role="button"]',
+      '[role="menuitem"]',
+      '[contenteditable]:not([contenteditable="false"])',
+      "[data-no-row-click]"
+    ].join(",")) != null;
+  }
+  function shouldIgnoreRowClick(event) {
+    return event.defaultPrevented || isDataGridInteractiveRowClickTarget(event.target);
+  }
   function HeaderCell({
     col,
     isSorted,
@@ -20097,7 +20234,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       "div",
       {
         className: cn(
-          "group/header relative flex items-center gap-1.5 px-3 select-none bg-transparent",
+          "group/header relative flex items-center gap-1.5 px-3 select-none bg-transparent overflow-hidden",
           "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
           sortable && "cursor-pointer"
         ),
@@ -20111,7 +20248,7 @@ ${colorConfig.map(([key, itemConfig]) => {
             "span",
             {
               className: cn(
-                "flex-1 truncate text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+                "flex-1 min-w-0 truncate text-xs font-semibold uppercase tracking-wider text-muted-foreground",
                 col.align === "center" && "text-center",
                 col.align === "right" && "text-right"
               ),
@@ -20165,13 +20302,15 @@ ${colorConfig.map(([key, itemConfig]) => {
       content = formatCellValue(value);
     }
     const hasCellClick = col.onCellClick || col.onCellDoubleClick;
+    const isWrap = col.cellOverflow === "wrap";
     return /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
-          "flex items-center px-3 truncate bg-transparent",
+          "flex px-3 bg-transparent overflow-hidden",
           "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
           "text-sm text-foreground",
+          isWrap ? "items-start py-2" : "items-center",
           col.align === "center" && "justify-center",
           col.align === "right" && "justify-end",
           hasCellClick && "cursor-pointer"
@@ -20187,7 +20326,7 @@ ${colorConfig.map(([key, itemConfig]) => {
           e40.stopPropagation();
           col.onCellDoubleClick(ctx, e40);
         } : void 0,
-        children: content
+        children: /* @__PURE__ */ jsx("div", { className: cn("min-w-0", isWrap ? "flex-1" : "truncate"), children: content })
       }
     );
   }
@@ -20225,6 +20364,13 @@ ${colorConfig.map(([key, itemConfig]) => {
       }
     );
   }
+  function hashStringToInt(value) {
+    let hash2 = 0;
+    for (let i = 0; i < value.length; i++) {
+      hash2 = (hash2 << 5) - hash2 + value.charCodeAt(i) | 0;
+    }
+    return Math.abs(hash2);
+  }
   function SkeletonRow({
     columns,
     height,
@@ -20248,7 +20394,7 @@ ${colorConfig.map(([key, itemConfig]) => {
             DesignSkeleton,
             {
               className: "h-3.5 rounded-md",
-              style: { width: `${40 + Math.random() * 40}%` }
+              style: { width: `${40 + hashStringToInt(col.id) % 40}%` }
             }
           )
         },
@@ -20282,9 +20428,12 @@ ${colorConfig.map(([key, itemConfig]) => {
       }
     );
   }
+  var NOOP = () => {
+  };
   function InfiniteScrollSentinel({
     onIntersect,
     isLoading,
+    rootRef,
     strings
   }) {
     const ref = (0, import_react30.useRef)(null);
@@ -20297,11 +20446,14 @@ ${colorConfig.map(([key, itemConfig]) => {
             onIntersect();
           }
         },
-        { rootMargin: "200px" }
+        {
+          root: rootRef?.current ?? null,
+          rootMargin: "200px"
+        }
       );
       observer.observe(el);
       return () => observer.disconnect();
-    }, [onIntersect]);
+    }, [onIntersect, rootRef]);
     return /* @__PURE__ */ jsx("div", { ref, className: "flex items-center justify-center py-4", children: isLoading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full border-2 border-current border-t-transparent animate-spin" }),
       strings.loadingMore
@@ -20399,10 +20551,13 @@ ${colorConfig.map(([key, itemConfig]) => {
       paginationMode = "paginated",
       selectionMode = "none",
       resizable = true,
-      rowHeight = 44,
+      rowHeight: rowHeightProp = 44,
+      estimatedRowHeight: estimatedRowHeightProp,
       headerHeight = 44,
       overscan = 5,
       maxHeight,
+      fillHeight = true,
+      stickyTop,
       toolbar,
       toolbarExtra,
       emptyState,
@@ -20418,6 +20573,9 @@ ${colorConfig.map(([key, itemConfig]) => {
       onSelectionChange,
       onSortChange
     } = props;
+    const isDynamicRowHeight = rowHeightProp === "auto";
+    const fixedRowHeight = isDynamicRowHeight ? void 0 : rowHeightProp;
+    const estimatedRowHeight = estimatedRowHeightProp ?? (fixedRowHeight ?? 44);
     const strings = (0, import_react30.useMemo)(
       () => resolveDataGridStrings(stringsOverride),
       [stringsOverride]
@@ -20445,13 +20603,11 @@ ${colorConfig.map(([key, itemConfig]) => {
     const gridRef = (0, import_react30.useRef)(null);
     const handleSort = (0, import_react30.useCallback)(
       (columnId, multi) => {
-        onChange((s8) => {
-          const next = toggleSort(s8.sorting, columnId, multi);
-          onSortChange?.(next);
-          return { ...s8, sorting: next };
-        });
+        const next = toggleSort(state.sorting, columnId, multi);
+        onChange((s8) => ({ ...s8, sorting: next }));
+        onSortChange?.(next);
       },
-      [onChange, onSortChange]
+      [onChange, onSortChange, state.sorting]
     );
     const handleResize = (0, import_react30.useCallback)(
       (columnId, delta) => {
@@ -20484,27 +20640,23 @@ ${colorConfig.map(([key, itemConfig]) => {
     const handleRowClick = (0, import_react30.useCallback)(
       (row, rowId, event) => {
         if (selectionMode !== "none") {
-          onChange((s8) => {
-            const next = toggleRowSelection(
-              s8.selection,
-              rowId,
-              selectionMode,
-              event.shiftKey,
-              event.metaKey || event.ctrlKey,
-              rowIds
-            );
-            if (onSelectionChange) {
-              const selectedRows = rows.filter(
-                (r7) => next.selectedIds.has(getRowId(r7))
-              );
-              setTimeout(() => onSelectionChange(next.selectedIds, selectedRows), 0);
-            }
-            return { ...s8, selection: next };
-          });
+          const next = toggleRowSelection(
+            state.selection,
+            rowId,
+            selectionMode,
+            event.shiftKey,
+            event.metaKey || event.ctrlKey,
+            rowIds
+          );
+          onChange((s8) => ({ ...s8, selection: next }));
+          if (onSelectionChange) {
+            const selectedRows = rows.filter((r7) => next.selectedIds.has(getRowId(r7)));
+            onSelectionChange(next.selectedIds, selectedRows);
+          }
         }
         onRowClick?.(row, rowId, event);
       },
-      [selectionMode, onChange, onRowClick, onSelectionChange, rowIds, rows, getRowId]
+      [selectionMode, onChange, onRowClick, onSelectionChange, rowIds, rows, getRowId, state.selection]
     );
     const handleRowSelectionCheckboxClick = (0, import_react30.useCallback)(
       (row, rowId, event) => {
@@ -20513,27 +20665,138 @@ ${colorConfig.map(([key, itemConfig]) => {
       [handleRowClick]
     );
     const handleSelectAll = (0, import_react30.useCallback)(() => {
-      onChange((s8) => {
-        const allSelected2 = rowIds.every((id) => s8.selection.selectedIds.has(id));
-        const next = allSelected2 ? clearSelection() : selectAll(rowIds);
-        if (onSelectionChange) {
-          const selectedRows = allSelected2 ? [] : rows;
-          setTimeout(() => onSelectionChange(next.selectedIds, [...selectedRows]), 0);
-        }
-        return { ...s8, selection: next };
-      });
-    }, [onChange, rowIds, rows, onSelectionChange]);
+      const allSelectedNow = rowIds.every((id) => state.selection.selectedIds.has(id));
+      const next = allSelectedNow ? clearSelection() : selectAll(rowIds);
+      const selectedRows = allSelectedNow ? [] : rows;
+      onChange((s8) => ({ ...s8, selection: next }));
+      if (onSelectionChange) {
+        onSelectionChange(next.selectedIds, [...selectedRows]);
+      }
+    }, [onChange, rowIds, rows, onSelectionChange, state.selection]);
     const handleExportCsv = (0, import_react30.useCallback)(() => {
       exportToCsv(rows, visibleColumns, exportFilename);
     }, [rows, visibleColumns, exportFilename]);
     const scrollContainerRef = (0, import_react30.useRef)(null);
     const headerScrollRef = (0, import_react30.useRef)(null);
+    const stickyChromeRef = (0, import_react30.useRef)(null);
+    const rowsClipRef = (0, import_react30.useRef)(null);
+    const measureElementFn = (0, import_react30.useCallback)(
+      (el) => el.getBoundingClientRect().height,
+      []
+    );
     const rowVirtualizer = useVirtualizer({
       count: rows.length,
       getScrollElement: () => scrollContainerRef.current,
-      estimateSize: () => rowHeight,
-      overscan
+      estimateSize: () => estimatedRowHeight,
+      overscan,
+      getItemKey: (index3) => {
+        const row = rows[index3];
+        return row != null ? String(getRowId(row)) : index3;
+      },
+      ...isDynamicRowHeight ? { measureElement: measureElementFn } : {}
     });
+    (0, import_react30.useLayoutEffect)(() => {
+      const grid = gridRef.current;
+      const stickyEl = stickyChromeRef.current;
+      if (!grid || !stickyEl) return;
+      const parseRgba = (raw) => {
+        const rgbaMatch = raw.match(/rgba?\(\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\s*\)/);
+        if (!rgbaMatch) return null;
+        const alphaRaw = rgbaMatch[4];
+        return [
+          Number(rgbaMatch[1]),
+          Number(rgbaMatch[2]),
+          Number(rgbaMatch[3]),
+          alphaRaw === void 0 ? 1 : Number(alphaRaw)
+        ];
+      };
+      const blendOver = (base, top) => {
+        const [tr, tg, tb, ta] = top;
+        const [br, bg, bb, ba] = base;
+        const outA = ta + ba * (1 - ta);
+        if (outA === 0) return [0, 0, 0, 0];
+        return [
+          (tr * ta + br * ba * (1 - ta)) / outA,
+          (tg * ta + bg * ba * (1 - ta)) / outA,
+          (tb * ta + bb * ba * (1 - ta)) / outA,
+          outA
+        ];
+      };
+      const detect = () => {
+        const layers = [];
+        let ancestor = grid.parentElement;
+        while (ancestor) {
+          const parsed = parseRgba(getComputedStyle(ancestor).backgroundColor);
+          if (parsed && parsed[3] > 0) {
+            layers.push(parsed);
+            if (parsed[3] >= 1) break;
+          }
+          ancestor = ancestor.parentElement;
+        }
+        if (layers.length === 0) {
+          stickyEl.style.backgroundColor = "";
+          return;
+        }
+        let result = layers[layers.length - 1];
+        for (let i = layers.length - 2; i >= 0; i--) {
+          result = blendOver(result, layers[i]);
+        }
+        const [r7, g, b] = result;
+        stickyEl.style.backgroundColor = `rgb(${Math.round(r7)}, ${Math.round(g)}, ${Math.round(b)})`;
+      };
+      detect();
+      const observer = new MutationObserver(detect);
+      observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+      return () => observer.disconnect();
+    }, []);
+    (0, import_react30.useLayoutEffect)(() => {
+      const gridEl = gridRef.current;
+      const stickyEl = stickyChromeRef.current;
+      const bodyEl = scrollContainerRef.current;
+      const clipEl = rowsClipRef.current;
+      if (!gridEl || !stickyEl || !bodyEl || !clipEl) return;
+      const verticalScrollEl = fillHeight ? bodyEl : getNearestVerticalScrollElement(gridEl);
+      let extraObservedScrollEl = null;
+      if (verticalScrollEl instanceof HTMLElement && verticalScrollEl !== bodyEl) {
+        extraObservedScrollEl = verticalScrollEl;
+      }
+      const updateClip = () => {
+        const stickyRect = stickyEl.getBoundingClientRect();
+        const clipRect = clipEl.getBoundingClientRect();
+        const overlap = Math.max(0, stickyRect.bottom - clipRect.top);
+        const clipValue = overlap > 0 ? `inset(${overlap}px 0 0 0)` : "";
+        const maskValue = overlap > 0 ? `linear-gradient(to bottom, transparent 0px, transparent ${overlap}px, black ${overlap}px, black 100%)` : "";
+        clipEl.style.clipPath = clipValue;
+        clipEl.style.setProperty("-webkit-clip-path", clipValue);
+        clipEl.style.maskImage = maskValue;
+        clipEl.style.setProperty("-webkit-mask-image", maskValue);
+      };
+      updateClip();
+      bodyEl.addEventListener("scroll", updateClip);
+      if (verticalScrollEl === window) {
+        window.addEventListener("scroll", updateClip, true);
+      } else if (extraObservedScrollEl) {
+        extraObservedScrollEl.addEventListener("scroll", updateClip);
+      }
+      window.addEventListener("resize", updateClip);
+      const ro = new ResizeObserver(updateClip);
+      ro.observe(gridEl);
+      ro.observe(stickyEl);
+      ro.observe(bodyEl);
+      if (extraObservedScrollEl) {
+        ro.observe(extraObservedScrollEl);
+      }
+      return () => {
+        bodyEl.removeEventListener("scroll", updateClip);
+        if (verticalScrollEl === window) {
+          window.removeEventListener("scroll", updateClip, true);
+        } else if (extraObservedScrollEl) {
+          extraObservedScrollEl.removeEventListener("scroll", updateClip);
+        }
+        window.removeEventListener("resize", updateClip);
+        ro.disconnect();
+      };
+    }, [fillHeight]);
     const handleBodyScroll = (0, import_react30.useCallback)(() => {
       const body = scrollContainerRef.current;
       const header = headerScrollRef.current;
@@ -20567,12 +20830,14 @@ ${colorConfig.map(([key, itemConfig]) => {
     );
     const allSelected = rowIds.length > 0 && rowIds.every((id) => state.selection.selectedIds.has(id));
     const someSelected = !allSelected && rowIds.some((id) => state.selection.selectedIds.has(id));
+    const infiniteScrollRootRef = paginationMode === "infinite" && (fillHeight || maxHeight != null) ? scrollContainerRef : void 0;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref: gridRef,
         className: cn(
-          "flex flex-col h-full min-h-0 bg-transparent",
+          "flex w-full min-w-0 max-w-full flex-col bg-transparent rounded-[calc(var(--radius)*2)]",
+          fillHeight ? "min-h-0 h-full" : "min-h-0 h-auto",
           className
         ),
         style: maxHeight != null ? { ...gridSizingStyle, maxHeight } : gridSizingStyle,
@@ -20580,175 +20845,199 @@ ${colorConfig.map(([key, itemConfig]) => {
         "aria-rowcount": totalRowCount ?? rows.length,
         "aria-colcount": visibleColumns.length,
         children: [
-          toolbar !== false && /* @__PURE__ */ jsx("div", { className: "relative shrink-0 bg-transparent", children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(
-            DataGridToolbar,
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              ctx: toolbarCtx,
-              extra: typeof toolbarExtra === "function" ? toolbarExtra(toolbarCtx) : toolbarExtra
+              ref: stickyChromeRef,
+              className: "sticky z-20 w-full min-w-0 shrink-0 rounded-t-[calc(var(--radius)*2)] bg-background",
+              style: { top: stickyTop ?? "var(--data-grid-sticky-top, 0px)" },
+              children: [
+                toolbar !== false && /* @__PURE__ */ jsx("div", { className: "relative bg-transparent", children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(
+                  DataGridToolbar,
+                  {
+                    ctx: toolbarCtx,
+                    extra: typeof toolbarExtra === "function" ? toolbarExtra(toolbarCtx) : toolbarExtra
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  isRefetching && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-0.5 z-30 bg-foreground/[0.04] overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-blue-500/60 rounded-full animate-pulse" }) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: headerScrollRef,
+                      className: "w-full min-w-0 shrink-0 overflow-hidden border-b border-foreground/[0.06]",
+                      children: /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "flex",
+                          style: { height: headerHeight, minWidth: visibleColumnMetrics.totalWidth },
+                          role: "row",
+                          children: [
+                            selectionMode !== "none" && /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: "flex items-center justify-center border-r border-foreground/[0.04]",
+                                style: { width: 44 },
+                                children: selectionMode === "multiple" && /* @__PURE__ */ jsx(
+                                  SelectionCheckbox,
+                                  {
+                                    checked: allSelected,
+                                    indeterminate: someSelected,
+                                    onChange: handleSelectAll,
+                                    ariaLabel: "Select all rows"
+                                  }
+                                )
+                              }
+                            ),
+                            visibleColumns.map((col) => /* @__PURE__ */ jsx(
+                              HeaderCell,
+                              {
+                                col,
+                                isSorted: getSortDirection(state.sorting, col.id),
+                                sortIndex: getSortIndex(state.sorting, col.id),
+                                resizable,
+                                onSort: handleSort,
+                                onResize: handleResize,
+                                onResizeEnd: handleResizeEnd
+                              },
+                              col.id
+                            ))
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ]
             }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
-            isRefetching && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-0.5 z-30 bg-foreground/[0.04] overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-blue-500/60 rounded-full animate-pulse" }) }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref: headerScrollRef,
-                className: "overflow-hidden shrink-0 border-b border-foreground/[0.06]",
-                children: /* @__PURE__ */ jsxs(
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollContainerRef,
+              className: cn(
+                "w-full min-w-0 overflow-auto bg-transparent",
+                fillHeight ? "min-h-0 flex-1" : "flex-none",
+                "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5",
+                "[&::-webkit-scrollbar-track]:bg-transparent",
+                "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full",
+                "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"
+              ),
+              onScroll: handleBodyScroll,
+              children: /* @__PURE__ */ jsxs("div", { ref: rowsClipRef, children: [
+                isLoading && /* @__PURE__ */ jsx("div", { style: { minWidth: visibleColumnMetrics.totalWidth }, children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
+                  SkeletonRow,
+                  {
+                    columns: visibleColumns,
+                    height: estimatedRowHeight,
+                    showCheckbox: selectionMode !== "none"
+                  },
+                  i
+                )) }),
+                !isLoading && rows.length === 0 && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "flex",
-                    style: { height: headerHeight, minWidth: visibleColumnMetrics.totalWidth },
-                    role: "row",
-                    children: [
-                      selectionMode !== "none" && /* @__PURE__ */ jsx(
+                    className: "flex items-center justify-center py-16 text-sm text-muted-foreground",
+                    style: { minWidth: visibleColumnMetrics.totalWidth },
+                    children: emptyState ?? strings.noData
+                  }
+                ),
+                !isLoading && rows.length > 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      height: rowVirtualizer.getTotalSize(),
+                      width: "100%",
+                      minWidth: visibleColumnMetrics.totalWidth,
+                      position: "relative"
+                    },
+                    children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                      const row = rows[virtualRow.index] ?? throwErr(
+                        `DataGrid: virtualized row index ${virtualRow.index} out of range (rows.length=${rows.length})`
+                      );
+                      const rowId = getRowId(row);
+                      const isSelected = state.selection.selectedIds.has(rowId);
+                      const isOddRow = virtualRow.index % 2 === 1;
+                      return /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: "flex items-center justify-center border-r border-foreground/[0.04]",
-                          style: { width: 44 },
-                          children: selectionMode === "multiple" && /* @__PURE__ */ jsx(
-                            SelectionCheckbox,
-                            {
-                              checked: allSelected,
-                              indeterminate: someSelected,
-                              onChange: handleSelectAll,
-                              ariaLabel: "Select all rows"
+                          ref: isDynamicRowHeight ? rowVirtualizer.measureElement : void 0,
+                          "data-index": virtualRow.index,
+                          className: cn(
+                            "absolute left-0 w-full flex",
+                            "border-b border-black/[0.03] dark:border-white/[0.03]",
+                            "transition-colors duration-75",
+                            isSelected ? "bg-blue-500/[0.06] dark:bg-blue-400/[0.08] hover:bg-blue-500/[0.08] dark:hover:bg-blue-400/[0.1]" : isOddRow ? "bg-foreground/[0.02] dark:bg-foreground/[0.03] hover:bg-foreground/[0.04] dark:hover:bg-foreground/[0.06]" : "hover:bg-foreground/[0.025] dark:hover:bg-foreground/[0.04]",
+                            (selectionMode !== "none" || onRowClick) && "cursor-pointer"
+                          ),
+                          style: {
+                            ...isDynamicRowHeight ? { minHeight: estimatedRowHeight } : { height: fixedRowHeight },
+                            transform: `translateY(${virtualRow.start}px)`
+                          },
+                          onClick: (e40) => {
+                            if (shouldIgnoreRowClick(e40)) {
+                              return;
                             }
-                          )
-                        }
-                      ),
-                      visibleColumns.map((col) => /* @__PURE__ */ jsx(
-                        HeaderCell,
-                        {
-                          col,
-                          isSorted: getSortDirection(state.sorting, col.id),
-                          sortIndex: getSortIndex(state.sorting, col.id),
-                          resizable,
-                          onSort: handleSort,
-                          onResize: handleResize,
-                          onResizeEnd: handleResizeEnd
+                            handleRowClick(row, rowId, e40);
+                          },
+                          onDoubleClick: (e40) => {
+                            if (shouldIgnoreRowClick(e40)) {
+                              return;
+                            }
+                            onRowDoubleClick?.(row, rowId, e40);
+                          },
+                          role: "row",
+                          "aria-rowindex": virtualRow.index + 2,
+                          "aria-selected": isSelected,
+                          "data-row-id": rowId,
+                          "data-state": isSelected ? "selected" : void 0,
+                          children: [
+                            selectionMode !== "none" && /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: "flex items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]",
+                                style: { width: 44 },
+                                children: /* @__PURE__ */ jsx(
+                                  SelectionCheckbox,
+                                  {
+                                    checked: isSelected,
+                                    onChange: (event) => handleRowSelectionCheckboxClick(row, rowId, event),
+                                    ariaLabel: `Select row ${rowId}`
+                                  }
+                                )
+                              }
+                            ),
+                            visibleColumns.map((col) => /* @__PURE__ */ jsx(
+                              DataCell,
+                              {
+                                col,
+                                row,
+                                rowId,
+                                rowIndex: virtualRow.index,
+                                isSelected,
+                                dateDisplay: state.dateDisplay
+                              },
+                              col.id
+                            ))
+                          ]
                         },
-                        col.id
-                      ))
-                    ]
+                        rowId
+                      );
+                    })
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                ref: scrollContainerRef,
-                className: cn(
-                  "min-h-0 overflow-auto flex-1 bg-transparent",
-                  // Custom scrollbar
-                  "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5",
-                  "[&::-webkit-scrollbar-track]:bg-transparent",
-                  "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full",
-                  "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"
                 ),
-                onScroll: handleBodyScroll,
-                children: [
-                  isLoading && /* @__PURE__ */ jsx("div", { style: { minWidth: visibleColumnMetrics.totalWidth }, children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
-                    SkeletonRow,
-                    {
-                      columns: visibleColumns,
-                      height: rowHeight,
-                      showCheckbox: selectionMode !== "none"
-                    },
-                    i
-                  )) }),
-                  !isLoading && rows.length === 0 && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "flex items-center justify-center py-16 text-sm text-muted-foreground",
-                      style: { minWidth: visibleColumnMetrics.totalWidth },
-                      children: emptyState ?? strings.noData
-                    }
-                  ),
-                  !isLoading && rows.length > 0 && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        height: rowVirtualizer.getTotalSize(),
-                        width: "100%",
-                        minWidth: visibleColumnMetrics.totalWidth,
-                        position: "relative"
-                      },
-                      children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                        const row = rows[virtualRow.index];
-                        const rowId = getRowId(row);
-                        const isSelected = state.selection.selectedIds.has(rowId);
-                        const isOddRow = virtualRow.index % 2 === 1;
-                        return /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            className: cn(
-                              "absolute left-0 w-full flex",
-                              "border-b border-black/[0.03] dark:border-white/[0.03]",
-                              "transition-colors duration-75",
-                              isSelected ? "bg-blue-500/[0.06] dark:bg-blue-400/[0.08] hover:bg-blue-500/[0.08] dark:hover:bg-blue-400/[0.1]" : isOddRow ? "bg-foreground/[0.02] dark:bg-foreground/[0.03] hover:bg-foreground/[0.04] dark:hover:bg-foreground/[0.06]" : "hover:bg-foreground/[0.025] dark:hover:bg-foreground/[0.04]",
-                              selectionMode !== "none" && "cursor-pointer"
-                            ),
-                            style: {
-                              height: rowHeight,
-                              transform: `translateY(${virtualRow.start}px)`
-                            },
-                            onClick: (e40) => handleRowClick(row, rowId, e40),
-                            onDoubleClick: (e40) => onRowDoubleClick?.(row, rowId, e40),
-                            role: "row",
-                            "aria-rowindex": virtualRow.index + 2,
-                            "aria-selected": isSelected,
-                            "data-row-id": rowId,
-                            "data-state": isSelected ? "selected" : void 0,
-                            children: [
-                              selectionMode !== "none" && /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: "flex items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]",
-                                  style: { width: 44 },
-                                  children: /* @__PURE__ */ jsx(
-                                    SelectionCheckbox,
-                                    {
-                                      checked: isSelected,
-                                      onChange: (event) => handleRowSelectionCheckboxClick(row, rowId, event),
-                                      ariaLabel: `Select row ${rowId}`
-                                    }
-                                  )
-                                }
-                              ),
-                              visibleColumns.map((col) => /* @__PURE__ */ jsx(
-                                DataCell,
-                                {
-                                  col,
-                                  row,
-                                  rowId,
-                                  rowIndex: virtualRow.index,
-                                  isSelected,
-                                  dateDisplay: state.dateDisplay
-                                },
-                                col.id
-                              ))
-                            ]
-                          },
-                          rowId
-                        );
-                      })
-                    }
-                  ),
-                  paginationMode === "infinite" && hasMore && !isLoading && /* @__PURE__ */ jsx(
-                    InfiniteScrollSentinel,
-                    {
-                      onIntersect: onLoadMore ?? (() => {
-                      }),
-                      isLoading: isLoadingMore,
-                      strings
-                    }
-                  )
-                ]
-              }
-            )
-          ] }),
+                paginationMode === "infinite" && hasMore && !isLoading && /* @__PURE__ */ jsx(
+                  InfiniteScrollSentinel,
+                  {
+                    onIntersect: onLoadMore ?? NOOP,
+                    isLoading: isLoadingMore,
+                    rootRef: infiniteScrollRootRef,
+                    strings
+                  }
+                )
+              ] })
+            }
+          ),
           footer !== false && /* @__PURE__ */ jsxs("div", { className: "relative z-10 shrink-0 bg-transparent", children: [
             footer ? footer(footerCtx) : /* @__PURE__ */ jsx(
               DefaultFooter,
@@ -20788,7 +21077,8 @@ ${colorConfig.map(([key, itemConfig]) => {
       },
       hasMore: false,
       reload: () => {
-      }
+      },
+      error: null
     }), [processed]);
   }
   function useAsyncDataSource(opts) {
@@ -20806,6 +21096,7 @@ ${colorConfig.map(([key, itemConfig]) => {
     const [isRefetching, setIsRefetching] = (0, import_react31.useState)(false);
     const [isLoadingMore, setIsLoadingMore] = (0, import_react31.useState)(false);
     const [hasMore, setHasMore] = (0, import_react31.useState)(true);
+    const [error, setError] = (0, import_react31.useState)(null);
     const cursorRef = (0, import_react31.useRef)(void 0);
     const abortRef = (0, import_react31.useRef)(null);
     const pageIndexRef = (0, import_react31.useRef)(0);
@@ -20844,6 +21135,7 @@ ${colorConfig.map(([key, itemConfig]) => {
           cursorRef.current = void 0;
           pageIndexRef.current = 0;
         }
+        setError(null);
         try {
           const params = {
             sorting: currentSorting,
@@ -20878,6 +21170,7 @@ ${colorConfig.map(([key, itemConfig]) => {
         } catch (err) {
           if (controller.signal.aborted) return;
           console.error("[DataGrid] Data source error:", err);
+          setError(err instanceof Error ? err : new Error(String(err)));
         } finally {
           if (!controller.signal.aborted) {
             setIsLoading(false);
@@ -20892,7 +21185,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       fetchPage(false).catch(() => {
       });
       return () => abortRef.current?.abort();
-    }, [fetchPage, sortingKey, quickSearchKey, pagination.pageSize]);
+    }, [fetchPage, dataSource, sortingKey, quickSearchKey, pagination.pageSize]);
     (0, import_react31.useEffect)(() => {
       if (paginationMode !== "server") {
         hasMountedServerPaginationRef.current = false;
@@ -20923,7 +21216,8 @@ ${colorConfig.map(([key, itemConfig]) => {
       isLoadingMore,
       loadMore,
       hasMore,
-      reload
+      reload,
+      error
     };
   }
   var NOOP_DATA_SOURCE = async function* () {
@@ -20942,6 +21236,16 @@ ${colorConfig.map(([key, itemConfig]) => {
       paginationMode
     } = opts;
     const isClientMode = data != null && !dataSource;
+    if (false) {
+      console.warn(
+        "[useDataSource] neither `data` nor `dataSource` was provided \u2014 the grid will render empty indefinitely. Pass one or the other."
+      );
+    }
+    if (false) {
+      console.warn(
+        '[useDataSource] `paginationMode: "infinite"` with a `data` array skips pagination entirely. Prefer `"client"` for in-memory lists or `"server"` + a `dataSource` generator for real paging.'
+      );
+    }
     const clientResult = useClientDataSource({
       data: data ?? [],
       columns,