@stackframe/stack 2.8.2 → 2.8.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @stackframe/stack
 
+## 2.8.3
+
+### Patch Changes
+
+- Various changes
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.3
+  - @stackframe/stack-ui@2.8.3
+  - @stackframe/stack-sc@2.8.3
+
 ## 2.8.2
 
 ### Patch Changes

package/dist/components/api-key-dialogs.js

@@ -0,0 +1,184 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/api-key-dialogs.tsx
+var api_key_dialogs_exports = {};
+__export(api_key_dialogs_exports, {
+  CreateApiKeyDialog: () => CreateApiKeyDialog,
+  ShowApiKeyDialog: () => ShowApiKeyDialog,
+  expiresInOptions: () => expiresInOptions,
+  neverInMs: () => neverInMs
+});
+module.exports = __toCommonJS(api_key_dialogs_exports);
+var import_yup = require("@hookform/resolvers/yup");
+var import_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
+var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import__ = require("..");
+var import_form_warning = require("../components/elements/form-warning");
+var import_translations = require("../lib/translations");
+var import_jsx_runtime = require("react/jsx-runtime");
+var neverInMs = 1e3 * 60 * 60 * 24 * 365 * 200;
+var expiresInOptions = {
+  [1e3 * 60 * 60 * 24 * 1]: "1 day",
+  [1e3 * 60 * 60 * 24 * 7]: "7 days",
+  [1e3 * 60 * 60 * 24 * 30]: "30 days",
+  [1e3 * 60 * 60 * 24 * 90]: "90 days",
+  [1e3 * 60 * 60 * 24 * 365]: "1 year",
+  [neverInMs]: "Never"
+};
+function CreateApiKeyDialog(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const apiKeySchema = (0, import_schema_fields.yupObject)({
+    description: (0, import_schema_fields.yupString)().defined().nonEmpty(t("Description is required")),
+    expiresIn: (0, import_schema_fields.yupString)().defined()
+  });
+  const { register, handleSubmit, formState: { errors }, reset } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(apiKeySchema),
+    defaultValues: {
+      description: "",
+      expiresIn: Object.keys(expiresInOptions)[2]
+      // Default to 30 days
+    }
+  });
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));
+      const apiKey = await props.createApiKey({
+        description: data.description,
+        expiresAt
+      });
+      if (props.onKeyCreated) {
+        props.onKeyCreated(apiKey);
+      }
+      reset();
+      props.onOpenChange(false);
+    } catch (error) {
+      (0, import_errors.captureError)("Failed to create API key", { error });
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.ActionDialog,
+    {
+      open: props.open,
+      onOpenChange: props.onOpenChange,
+      title: t("Create API Key"),
+      description: t("API keys grant programmatic access to your account."),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            (0, import_promises.runAsynchronously)(handleSubmit(onSubmit));
+          },
+          className: "space-y-4",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "description", children: t("Description") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Input,
+                {
+                  id: "description",
+                  placeholder: t("e.g. Development, Production, CI/CD"),
+                  ...register("description")
+                }
+              ),
+              errors.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.description.message })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "expiresIn", children: t("Expires In") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "select",
+                {
+                  id: "expiresIn",
+                  className: "w-full p-2 border border-input rounded-md bg-background",
+                  ...register("expiresIn"),
+                  children: Object.entries(expiresInOptions).map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value, children: t(label) }, value))
+                }
+              ),
+              errors.expiresIn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.expiresIn.message })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-end gap-2 pt-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Button,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  onClick: () => {
+                    reset();
+                    props.onOpenChange(false);
+                  },
+                  children: t("Cancel")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: t("Create") })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function ShowApiKeyDialog(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.ActionDialog,
+    {
+      open: !!props.apiKey,
+      title: t("API Key"),
+      okButton: { label: t("Close") },
+      onClose: props.onClose,
+      preventClose: true,
+      confirmText: t("I understand that I will not be able to view this key again."),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Typography, { children: [
+          t("Here is your API key."),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-bold", children: t("Copy it to a safe place. You will not be able to view it again.") })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.CopyField,
+          {
+            monospace: true,
+            value: props.apiKey?.value ?? "",
+            label: t("Secret API Key")
+          }
+        )
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CreateApiKeyDialog,
+  ShowApiKeyDialog,
+  expiresInOptions,
+  neverInMs
+});
+//# sourceMappingURL=api-key-dialogs.js.map

package/dist/components/api-key-dialogs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/api-key-dialogs.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { captureError } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { ActionDialog, Button, CopyField, Input, Label, Typography } from '@stackframe/stack-ui';\nimport { useState } from \"react\";\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { ApiKey, ApiKeyCreationOptions, ApiKeyType } from \"../lib/stack-app/api-keys\";\nimport { useTranslation } from \"../lib/translations\";\n\n// Constants for expiration options\nexport const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;\nexport const expiresInOptions = {\n  [1000 * 60 * 60 * 24 * 1]: \"1 day\",\n  [1000 * 60 * 60 * 24 * 7]: \"7 days\",\n  [1000 * 60 * 60 * 24 * 30]: \"30 days\",\n  [1000 * 60 * 60 * 24 * 90]: \"90 days\",\n  [1000 * 60 * 60 * 24 * 365]: \"1 year\",\n  [neverInMs]: \"Never\",\n} as const;\n\n/**\n * Dialog for creating a new API key\n */\nexport function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  open: boolean,\n  onOpenChange: (open: boolean) => void,\n  onKeyCreated?: (key: ApiKey<Type, true>) => void,\n  createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n\n  const apiKeySchema = yupObject({\n    description: yupString().defined().nonEmpty(t('Description is required')),\n    expiresIn: yupString().defined(),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(apiKeySchema),\n    defaultValues: {\n      description: '',\n      expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days\n    }\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {\n    setLoading(true);\n    try {\n      const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));\n      const apiKey = await props.createApiKey({\n        description: data.description,\n        expiresAt,\n      });\n\n      if (props.onKeyCreated) {\n        props.onKeyCreated(apiKey);\n      }\n\n      reset();\n      props.onOpenChange(false);\n    } catch (error) {\n      captureError(\"Failed to create API key\", { error });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <ActionDialog\n      open={props.open}\n      onOpenChange={props.onOpenChange}\n      title={t('Create API Key')}\n      description={t('API keys grant programmatic access to your account.')}\n    >\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          runAsynchronously(handleSubmit(onSubmit));\n        }}\n        className=\"space-y-4\"\n      >\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"description\">{t('Description')}</Label>\n          <Input\n            id=\"description\"\n            placeholder={t('e.g. Development, Production, CI/CD')}\n            {...register('description')}\n          />\n          {errors.description && <FormWarningText text={errors.description.message} />}\n        </div>\n\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"expiresIn\">{t('Expires In')}</Label>\n          <select\n            id=\"expiresIn\"\n            className=\"w-full p-2 border border-input rounded-md bg-background\"\n            {...register('expiresIn')}\n          >\n            {Object.entries(expiresInOptions).map(([value, label]) => (\n              <option key={value} value={value}>{t(label)}</option>\n            ))}\n          </select>\n          {errors.expiresIn && <FormWarningText text={errors.expiresIn.message} />}\n        </div>\n\n        <div className=\"flex justify-end gap-2 pt-4\">\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={() => {\n              reset();\n              props.onOpenChange(false);\n            }}\n          >\n            {t('Cancel')}\n          </Button>\n          <Button type=\"submit\" loading={loading}>\n            {t('Create')}\n          </Button>\n        </div>\n      </form>\n    </ActionDialog>\n  );\n}\n\n/**\n * Dialog for showing the newly created API key\n */\nexport function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  apiKey: ApiKey<Type, true> | null,\n  onClose?: () => void,\n}) {\n  const { t } = useTranslation();\n\n  return (\n    <ActionDialog\n      open={!!props.apiKey}\n      title={t(\"API Key\")}\n      okButton={{ label: t(\"Close\") }}\n      onClose={props.onClose}\n      preventClose\n      confirmText={t(\"I understand that I will not be able to view this key again.\")}\n    >\n      <div className=\"flex flex-col gap-4\">\n        <Typography>\n          {t(\"Here is your API key.\")}{\" \"}\n          <span className=\"font-bold\">\n            {t(\"Copy it to a safe place. You will not be able to view it again.\")}\n          </span>\n        </Typography>\n        <CopyField\n          monospace\n          value={props.apiKey?.value ?? ''}\n          label={t(\"Secret API Key\")}\n        />\n      </div>\n    </ActionDialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/api-key-table.js

@@ -0,0 +1,149 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/api-key-table.tsx
+var api_key_table_exports = {};
+__export(api_key_table_exports, {
+  ApiKeyTable: () => ApiKeyTable
+});
+module.exports = __toCommonJS(api_key_table_exports);
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function toolbarRender(table) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SearchToolbarItem, { table, placeholder: "Search table" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.DataTableFacetedFilter,
+      {
+        column: table.getColumn("status"),
+        title: "Status",
+        options: ["valid", "expired", "revoked"].map((provider) => ({
+          value: provider,
+          label: provider
+        }))
+      }
+    )
+  ] });
+}
+function RevokeDialog(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.ActionDialog,
+    {
+      open: props.open,
+      onOpenChange: props.onOpenChange,
+      title: "Revoke API Key",
+      danger: true,
+      cancelButton: true,
+      okButton: { label: "Revoke Key", onClick: async () => {
+        await props.apiKey.revoke();
+      } },
+      confirmText: "I understand this will unlink all the apps using this API key",
+      children: `Are you sure you want to revoke API key *****${props.apiKey.value.lastFour}?`
+    }
+  );
+}
+function Actions({ row }) {
+  const [isRevokeModalOpen, setIsRevokeModalOpen] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RevokeDialog, { apiKey: row.original, open: isRevokeModalOpen, onOpenChange: setIsRevokeModalOpen }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.ActionCell,
+      {
+        invisible: row.original.status !== "valid",
+        items: [{
+          item: "Revoke",
+          danger: true,
+          onClick: () => setIsRevokeModalOpen(true)
+        }]
+      }
+    )
+  ] });
+}
+var columns = [
+  {
+    accessorKey: "description",
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Description" }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TextCell, { size: 100, children: row.original.description })
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Status" }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.BadgeCell, { badges: [row.original.status] }),
+    filterFn: import_stack_ui.standardFilterFn
+  },
+  {
+    id: "value",
+    accessorFn: (row) => row.value.lastFour,
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Client Key" }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TextCell, { children: [
+      "*******",
+      row.original.value.lastFour
+    ] }),
+    enableSorting: false
+  },
+  {
+    accessorKey: "expiresAt",
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Expires At" }),
+    cell: ({ row }) => {
+      if (row.original.status === "revoked") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TextCell, { children: "-" });
+      return row.original.expiresAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DateCell, { date: row.original.expiresAt, ignoreAfterYears: 50 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TextCell, { children: "Never" });
+    }
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DataTableColumnHeader, { column, columnTitle: "Created At" }),
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DateCell, { date: row.original.createdAt, ignoreAfterYears: 50 })
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Actions, { row })
+  }
+];
+function ApiKeyTable(props) {
+  const extendedApiKeys = (0, import_react.useMemo)(() => {
+    const keys = props.apiKeys.map((apiKey) => ({
+      ...apiKey,
+      status: { "valid": "valid", "manually-revoked": "revoked", "expired": "expired" }[apiKey.whyInvalid() || "valid"]
+    }));
+    return keys.sort((a, b) => {
+      if (a.status === b.status) {
+        return a.createdAt < b.createdAt ? 1 : -1;
+      }
+      return a.status === "valid" ? -1 : 1;
+    });
+  }, [props.apiKeys]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.DataTable,
+    {
+      data: extendedApiKeys,
+      columns,
+      toolbarRender,
+      defaultColumnFilters: [],
+      defaultSorting: []
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApiKeyTable
+});
+//# sourceMappingURL=api-key-table.js.map

package/dist/components/api-key-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/api-key-table.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from \"@stackframe/stack-ui\";\nimport { ColumnDef, Row, Table } from \"@tanstack/react-table\";\nimport { useMemo, useState } from \"react\";\nimport { ApiKey } from \"../lib/stack-app/api-keys\";\n\ntype ExtendedApiKey = ApiKey & {\n  status: 'valid' | 'expired' | 'revoked',\n};\n\nfunction toolbarRender<TData>(table: Table<TData>) {\n  return (\n    <>\n      <SearchToolbarItem table={table} placeholder=\"Search table\" />\n      <DataTableFacetedFilter\n        column={table.getColumn(\"status\")}\n        title=\"Status\"\n        options={['valid', 'expired', 'revoked'].map((provider) => ({\n          value: provider,\n          label: provider,\n        }))}\n      />\n    </>\n  );\n}\n\nfunction RevokeDialog(props: {\n  apiKey: ExtendedApiKey,\n  open: boolean,\n  onOpenChange: (open: boolean) => void,\n}) {\n  return <ActionDialog\n    open={props.open}\n    onOpenChange={props.onOpenChange}\n    title=\"Revoke API Key\"\n    danger\n    cancelButton\n    okButton={{ label: \"Revoke Key\", onClick: async () => { await props.apiKey.revoke(); } }}\n    confirmText=\"I understand this will unlink all the apps using this API key\"\n  >\n    {`Are you sure you want to revoke API key *****${props.apiKey.value.lastFour}?`}\n  </ActionDialog>;\n}\n\nfunction Actions({ row }: { row: Row<ExtendedApiKey> }) {\n  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n  return (\n    <>\n      <RevokeDialog apiKey={row.original} open={isRevokeModalOpen} onOpenChange={setIsRevokeModalOpen} />\n      <ActionCell\n        invisible={row.original.status !== 'valid'}\n        items={[{\n          item: \"Revoke\",\n          danger: true,\n          onClick: () => setIsRevokeModalOpen(true),\n        }]}\n      />\n    </>\n  );\n}\n\nconst columns: ColumnDef<ExtendedApiKey>[] =  [\n  {\n    accessorKey: \"description\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Description\" />,\n    cell: ({ row }) => <TextCell size={100}>{row.original.description}</TextCell>,\n  },\n  {\n    accessorKey: \"status\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Status\" />,\n    cell: ({ row }) => <BadgeCell badges={[row.original.status]} />,\n    filterFn: standardFilterFn,\n  },\n  {\n    id: \"value\",\n    accessorFn: (row) => row.value.lastFour,\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Client Key\" />,\n    cell: ({ row }) => <TextCell>*******{row.original.value.lastFour}</TextCell>,\n    enableSorting: false,\n  },\n  {\n    accessorKey: \"expiresAt\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Expires At\" />,\n    cell: ({ row }) => {\n      if (row.original.status === 'revoked') return <TextCell>-</TextCell>;\n      return row.original.expiresAt ? <DateCell date={row.original.expiresAt} ignoreAfterYears={50} /> : <TextCell>Never</TextCell>;\n    },\n  },\n  {\n    accessorKey: \"createdAt\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Created At\" />,\n    cell: ({ row }) => <DateCell date={row.original.createdAt} ignoreAfterYears={50} />\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => <Actions row={row} />,\n  },\n];\n\nexport function ApiKeyTable(props: { apiKeys: ApiKey[] }) {\n  const extendedApiKeys = useMemo(() => {\n    const keys = props.apiKeys.map((apiKey) => ({\n      ...apiKey,\n      status: ({ 'valid': 'valid', 'manually-revoked': 'revoked', 'expired': 'expired' } as const)[apiKey.whyInvalid() || 'valid'],\n    } satisfies ExtendedApiKey));\n    // first sort based on status, then by createdAt\n    return keys.sort((a, b) => {\n      if (a.status === b.status) {\n        return a.createdAt < b.createdAt ? 1 : -1;\n      }\n      return a.status === 'valid' ? -1 : 1;\n    });\n  }, [props.apiKeys]);\n\n  return <DataTable\n    data={extendedApiKeys}\n    columns={columns}\n    toolbarRender={toolbarRender}\n    defaultColumnFilters={[]}\n    defaultSorting={[]}\n  />;\n}\n"],"mappings":"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","names":[]}

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

@@ -33,7 +33,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var account_settings_exports = {};
 __export(account_settings_exports, {
   AccountSettings: () => AccountSettings,
-  EditableText: () => EditableText
+  ApiKeysPage: () => ApiKeysPage,
+  EditableText: () => EditableText,
+  TeamApiKeysSection: () => TeamApiKeysSection
 });
 module.exports = __toCommonJS(account_settings_exports);
 var import_yup = require("@hookform/resolvers/yup");
@@ -53,6 +55,8 @@ var import_react = require("react");
 var import_react_hook_form = require("react-hook-form");
 var yup = __toESM(require("yup"));
 var import__ = require("..");
+var import_api_key_dialogs = require("../components/api-key-dialogs");
+var import_api_key_table = require("../components/api-key-table");
 var import_form_warning = require("../components/elements/form-warning");
 var import_maybe_full_page = require("../components/elements/maybe-full-page");
 var import_sidebar_layout = require("../components/elements/sidebar-layout");
@@ -96,6 +100,13 @@ function AccountSettings(props) {
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Monitor" }),
           content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveSessionsPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActiveSessionsPage, {}) })
         },
+        ...project.config.allowUserApiKeys ? [{
+          title: t("API Keys"),
+          type: "item",
+          id: "api-keys",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Key" }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiKeysPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiKeysPage, {}) })
+        }] : [],
         {
           title: t("Settings"),
           type: "item",
@@ -129,14 +140,14 @@ function AccountSettings(props) {
           ] }),
           type: "item",
           id: `team-${team.id}`,
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamPage, { team })
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamPage, { team }) })
         })),
         ...project.config.clientTeamCreationEnabled ? [{
           title: t("Create a team"),
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "CirclePlus" }),
           type: "item",
           id: "team-creation",
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamCreation, {})
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamCreationSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamCreation, {}) })
         }] : []
       ].filter((p) => p.type === "divider" || p.content),
       title: t("Account Settings")
@@ -158,6 +169,88 @@ function Section(props) {
 function PageLayout(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-6", children: props.children });
 }
+function ApiKeysPage() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const apiKeys = user.useApiKeys();
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = (0, import_react.useState)(false);
+  const [returnedApiKey, setReturnedApiKey] = (0, import_react.useState)(null);
+  const CreateDialog = import_api_key_dialogs.CreateApiKeyDialog;
+  const ShowDialog = import_api_key_dialogs.ShowApiKeyDialog;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api_key_table.ApiKeyTable, { apiKeys }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CreateDialog,
+      {
+        open: isNewApiKeyDialogOpen,
+        onOpenChange: setIsNewApiKeyDialogOpen,
+        onKeyCreated: setReturnedApiKey,
+        createApiKey: async (data) => {
+          const apiKey = await user.createApiKey(data);
+          return apiKey;
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ShowDialog,
+      {
+        apiKey: returnedApiKey,
+        onClose: () => setReturnedApiKey(null)
+      }
+    )
+  ] });
+}
+function TeamApiKeysSection(props) {
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const team = user.useTeam(props.team.id);
+  if (!team) {
+    throw new import_errors.StackAssertionError("Team not found");
+  }
+  const manageApiKeysPermission = user.usePermission(props.team, "$manage_api_keys");
+  if (!manageApiKeysPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamApiKeysSectionInner, { team: props.team });
+}
+function TeamApiKeysSectionInner(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = (0, import_react.useState)(false);
+  const [returnedApiKey, setReturnedApiKey] = (0, import_react.useState)(null);
+  const apiKeys = props.team.useApiKeys();
+  const CreateDialog = import_api_key_dialogs.CreateApiKeyDialog;
+  const ShowDialog = import_api_key_dialogs.ShowApiKeyDialog;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Section,
+      {
+        title: t("API Keys"),
+        description: t("API keys grant programmatic access to your team."),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: () => setIsNewApiKeyDialogOpen(true), children: t("Create API Key") })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api_key_table.ApiKeyTable, { apiKeys }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CreateDialog,
+      {
+        open: isNewApiKeyDialogOpen,
+        onOpenChange: setIsNewApiKeyDialogOpen,
+        onKeyCreated: setReturnedApiKey,
+        createApiKey: async (data) => {
+          const apiKey = await props.team.createApiKey(data);
+          return apiKey;
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ShowDialog,
+      {
+        apiKey: returnedApiKey,
+        onClose: () => setReturnedApiKey(null)
+      }
+    )
+  ] });
+}
 function ProfilePage() {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
@@ -835,12 +928,13 @@ function SignOutSection() {
 }
 function TeamPage(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamUserProfileSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberListSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberInvitationSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamProfileImageSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamDisplayNameSection, { team: props.team }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeaveTeamSection, { team: props.team })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamUserProfileSection, { team: props.team }, `user-profile-${props.team.id}`),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamProfileImageSection, { team: props.team }, `profile-image-${props.team.id}`),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamDisplayNameSection, { team: props.team }, `display-name-${props.team.id}`),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberListSection, { team: props.team }, `member-list-${props.team.id}`),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberInvitationSection, { team: props.team }, `member-invitation-${props.team.id}`),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamApiKeysSection, { team: props.team }, `api-keys-${props.team.id}`),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeaveTeamSection, { team: props.team }, `leave-team-${props.team.id}`)
   ] });
 }
 function LeaveTeamSection(props) {
@@ -972,11 +1066,14 @@ function MemberInvitationsSectionInvitationsList(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[60px]", children: t("Expires") }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[36px] max-w-[36px]" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: invitationsToShow.map((invitation, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: invitation.recipientEmail }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Trash, { className: "w-4 h-4" }) }) })
-    ] }, invitation.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableBody, { children: [
+      invitationsToShow.map((invitation, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: invitation.recipientEmail }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Trash, { className: "w-4 h-4" }) }) })
+      ] }, invitation.id)),
+      invitationsToShow.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { colSpan: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", children: t("No outstanding invitations") }) }) })
+    ] })
   ] }) });
 }
 function MemberInvitationSectionInner(props) {
@@ -1205,9 +1302,31 @@ function EditableText(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: () => setEditing(true), size: "icon", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Edit, { className: "w-4 h-4" }) })
   ] }) });
 }
+function ApiKeysPageSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
+  ] });
+}
+function TeamPageSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
+  ] });
+}
+function TeamCreationSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AccountSettings,
-  EditableText
+  ApiKeysPage,
+  EditableText,
+  TeamApiKeysSection
 });
 //# sourceMappingURL=account-settings.js.map