@hexclave/tanstack-start 1.0.3 → 1.0.6

package/dist/providers/{stack-provider-client.js → hexclave-provider-client.js}

@@ -6,15 +6,15 @@ let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let ___lib_hooks_js = require("../lib/hooks.js");
-let ___lib_stack_app_index_js = require("../lib/stack-app/index.js");
+let ___lib_hexclave_app_index_js = require("../lib/hexclave-app/index.js");
 let _hexclave_shared_dist_utils_globals = require("@hexclave/shared/dist/utils/globals");
-let __stack_context_js = require("./stack-context.js");
+let __hexclave_context_js = require("./hexclave-context.js");
 
-//#region src/providers/stack-provider-client.tsx
-function StackProviderClient(props) {
-	const app = props.serialized ? ___lib_stack_app_index_js.StackClientApp[___lib_stack_app_index_js.stackAppInternalsSymbol].fromClientJson(props.app) : props.app;
+//#region src/providers/hexclave-provider-client.tsx
+function HexclaveProviderClient(props) {
+	const app = props.serialized ? ___lib_hexclave_app_index_js.StackClientApp[___lib_hexclave_app_index_js.hexclaveAppInternalsSymbol].fromClientJson(props.app) : props.app;
 	_hexclave_shared_dist_utils_globals.globalVar.__STACK_AUTH__ = { app };
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__stack_context_js.StackContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__hexclave_context_js.HexclaveContext.Provider, {
 		value: { app },
 		children: props.children
 	});
@@ -23,12 +23,12 @@ function UserSetter(props) {
 	const app = (0, ___lib_hooks_js.useStackApp)();
 	(0, react.useEffect)(() => {
 		const promise = (async () => await props.userJsonPromise)();
-		app[___lib_stack_app_index_js.stackAppInternalsSymbol].setCurrentUser(promise);
+		app[___lib_hexclave_app_index_js.hexclaveAppInternalsSymbol].setCurrentUser(promise);
 	}, []);
 	return null;
 }
 
 //#endregion
-exports.StackProviderClient = StackProviderClient;
+exports.HexclaveProviderClient = HexclaveProviderClient;
 exports.UserSetter = UserSetter;
-//# sourceMappingURL=stack-provider-client.js.map
+//# sourceMappingURL=hexclave-provider-client.js.map

package/dist/providers/hexclave-provider-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexclave-provider-client.js","names":["StackClientApp","hexclaveAppInternalsSymbol","HexclaveContext"],"sources":["../../src/providers/hexclave-provider-client.tsx"],"sourcesContent":["\"use client\";\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { CurrentUserCrud } from \"@hexclave/shared/dist/interface/crud/current-user\";\nimport { globalVar } from \"@hexclave/shared/dist/utils/globals\";\nimport React, { useEffect } from \"react\";\nimport { useStackApp } from \"../lib/hooks\";\nimport { StackClientApp, StackClientAppJson, hexclaveAppInternalsSymbol } from \"../lib/hexclave-app\";\nimport { HexclaveContext } from \"./hexclave-context\";\n\nexport function HexclaveProviderClient(props: {\n  app: StackClientAppJson<true, string> | StackClientApp<true>,\n  serialized: boolean,\n  children?: React.ReactNode,\n}) {\n  const app = props.serialized\n    ? StackClientApp[hexclaveAppInternalsSymbol].fromClientJson(props.app as StackClientAppJson<true, string>)\n    : props.app as StackClientApp<true>;\n  globalVar.__STACK_AUTH__ = { app };\n\n  return (\n    <HexclaveContext.Provider value={{ app }}>\n      {props.children}\n    </HexclaveContext.Provider>\n  );\n}\n\nexport function UserSetter(props: { userJsonPromise: Promise<CurrentUserCrud['Client']['Read'] | null> }) {\n  const app = useStackApp();\n  useEffect(() => {\n    const promise = (async () => await props.userJsonPromise)();  // there is a Next.js bug where Promises passed by server components return `undefined` as their `then` value, so wrap it in a normal promise\n    app[hexclaveAppInternalsSymbol].setCurrentUser(promise);\n  }, []);\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,uBAAuB,OAIpC;CACD,MAAM,MAAM,MAAM,aACdA,4CAAeC,yDAA4B,eAAe,MAAM,IAAwC,GACxG,MAAM;AACV,+CAAU,iBAAiB,EAAE,KAAK;AAElC,QACE,2CAACC,sCAAgB;EAAS,OAAO,EAAE,KAAK;YACrC,MAAM;GACkB;;AAI/B,SAAgB,WAAW,OAA+E;CACxG,MAAM,wCAAmB;AACzB,4BAAgB;EACd,MAAM,WAAW,YAAY,MAAM,MAAM,kBAAkB;AAC3D,MAAID,yDAA4B,eAAe,QAAQ;IACtD,EAAE,CAAC;AACN,QAAO"}

package/dist/providers/{stack-provider.d.ts → hexclave-provider.d.ts}

@@ -1,9 +1,9 @@
-import { StackClientApp } from "../lib/stack-app/apps/interfaces/client-app.js";
+import { StackClientApp } from "../lib/hexclave-app/apps/interfaces/client-app.js";
 import { TranslationProvider } from "./translation-provider.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import React from "react";
 
-//#region src/providers/stack-provider.d.ts
+//#region src/providers/hexclave-provider.d.ts
 declare function TanStackStartStackProvider({
   children,
   app,
@@ -27,4 +27,4 @@ declare const HexclaveProvider: typeof TanStackStartStackProvider;
 declare const StackProvider: typeof TanStackStartStackProvider;
 //#endregion
 export { HexclaveProvider, StackProvider, ActiveProvider as default };
-//# sourceMappingURL=stack-provider.d.ts.map
+//# sourceMappingURL=hexclave-provider.d.ts.map

package/dist/providers/hexclave-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexclave-provider.d.ts","names":[],"sources":["../../src/providers/hexclave-provider.tsx"],"mappings":";;;;;;iBASS,0BAAA,CAAA;EACP,QAAA;EACA,GAAA;EACA,IAAA;EACA;AAAA;EAEA,IAAA,GAAO,KAAA,CAAM,cAAA,QAAsB,mBAAA;;AARwB;;;;;EAe3D,oBAAA,GAAuB,MAAA;EACvB,QAAA,EAAU,KAAA,CAAM,SAAA;EAEhB,GAAA,EAAK,cAAA;AAAA,IACN,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAeK,cAAA,SAAc,0BAAA;AAAA,cAIP,gBAAA,SAAgB,0BAAA;;cAEhB,aAAA,SAAa,0BAAA"}

package/dist/providers/{stack-provider.js → hexclave-provider.js}

@@ -3,12 +3,12 @@ const require_chunk = require('../chunk-BE-pF4vm.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let __stack_provider_client_js = require("./stack-provider-client.js");
+let __hexclave_provider_client_js = require("./hexclave-provider-client.js");
 let __translation_provider_js = require("./translation-provider.js");
 
-//#region src/providers/stack-provider.tsx
+//#region src/providers/hexclave-provider.tsx
 function TanStackStartStackProvider({ children, app, lang, translationOverrides }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__stack_provider_client_js.StackProviderClient, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__hexclave_provider_client_js.HexclaveProviderClient, {
 		app,
 		serialized: false,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__translation_provider_js.TranslationProvider, {
@@ -30,4 +30,4 @@ const StackProvider = ActiveProvider;
 exports.HexclaveProvider = HexclaveProvider;
 exports.StackProvider = StackProvider;
 exports.default = ActiveProvider;
-//# sourceMappingURL=stack-provider.js.map
+//# sourceMappingURL=hexclave-provider.js.map

package/dist/providers/hexclave-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexclave-provider.js","names":["HexclaveProviderClient","TranslationProvider","Suspense"],"sources":["../../src/providers/hexclave-provider.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport React, { Suspense } from 'react';\nimport { StackAdminApp, StackClientApp, StackServerApp, hexclaveAppInternalsSymbol } from '../lib/hexclave-app';\nimport { HexclaveProviderClient } from './hexclave-provider-client';\nimport { TranslationProvider } from './translation-provider';\n\nfunction TanStackStartStackProvider({\n  children,\n  app,\n  lang,\n  translationOverrides,\n}: {\n  lang?: React.ComponentProps<typeof TranslationProvider>['lang'],\n  /**\n   * A mapping of English translations to translated equivalents.\n   *\n   * These will take priority over the translations from the language specified in the `lang` property. Note that the\n   * keys are case-sensitive.\n   */\n  translationOverrides?: Record<string, string>,\n  children: React.ReactNode,\n  // list all three types of apps even though server and admin are subclasses of client so it's clear that you can pass any\n  app: StackClientApp<true>,\n}) {\n  return (\n    <HexclaveProviderClient app={app} serialized={false}>\n      <TranslationProvider lang={lang} translationOverrides={translationOverrides}>\n        <Suspense fallback={null}>\n          {children}\n        </Suspense>\n      </TranslationProvider>\n    </HexclaveProviderClient>\n  );\n}\n\n// Pick the platform-appropriate provider implementation. Only the active branch's\n// line is preserved by the platform-stripping script when generating per-platform SDKs.\n// The /* ... */ block hides the inactive branches from the template's TypeScript compiler.\nconst ActiveProvider = TanStackStartStackProvider;\n\n// Named exports live outside the platform conditional so the @deprecated JSDoc can\n// use a /** ... */ block without colliding with the outer comment terminator.\nexport const HexclaveProvider = ActiveProvider;\n/** @deprecated Use `HexclaveProvider` from the `@hexclave/*` package instead — same symbol, new brand name. See https://docs.hexclave.com/migration. */\nexport const StackProvider = ActiveProvider;\nexport default ActiveProvider;\n"],"mappings":";;;;;;;;;AASA,SAAS,2BAA2B,EAClC,UACA,KACA,MACA,wBAaC;AACD,QACE,2CAACA;EAA4B;EAAK,YAAY;YAC5C,2CAACC;GAA0B;GAA4B;aACrD,2CAACC;IAAS,UAAU;IACjB;KACQ;IACS;GACC;;AAO7B,MAAM,iBAAiB;AAIvB,MAAa,mBAAmB;;AAEhC,MAAa,gBAAgB"}

package/dist/providers/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":["color","DEFAULT_THEME","BrowserScript","globalCSS","TooltipProvider"],"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { deindent } from \"@hexclave/shared/dist/utils/strings\";\nimport { TooltipProvider } from \"@hexclave/ui\";\nimport Color from \"color\";\nimport React from \"react\";\nimport { globalCSS } from \"../generated/global-css\";\nimport { BrowserScript } from \"../utils/browser-script\";\nimport { DEFAULT_THEME } from \"../utils/constants\";\n\ntype Colors = {\n  background: string,\n  foreground: string,\n  card: string,\n  cardForeground: string,\n  popover: string,\n  popoverForeground: string,\n  primary: string,\n  primaryForeground: string,\n  secondary: string,\n  secondaryForeground: string,\n  muted: string,\n  mutedForeground: string,\n  accent: string,\n  accentForeground: string,\n  destructive: string,\n  destructiveForeground: string,\n  border: string,\n  input: string,\n  ring: string,\n}\n\nexport type Theme = {\n  light: Colors,\n  dark: Colors,\n  radius: string,\n};\n\ntype ThemeConfig = {\n  light?: Partial<Colors>,\n  dark?: Partial<Colors>,\n} & Partial<Omit<Theme, 'light' | 'dark'>>;\n\nfunction convertColorToCSSVars(obj: Record<string, string>) {\n  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {\n    const color = Color(value).hsl().array();\n    return [\n      // Convert camelCase key to dash-case\n      key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`),\n      // Convert color to CSS HSL string\n      `${color[0]} ${color[1]}% ${color[2]}%`\n    ];\n  }));\n}\n\nfunction convertColorsToCSS(theme: Theme) {\n  const { dark, light, ...rest } = theme;\n  const colors = {\n    light: { ...convertColorToCSSVars(light), ...rest },\n    dark: convertColorToCSSVars(dark),\n  };\n\n  function colorsToCSSVars(colors: Record<string, string>) {\n    return Object.entries(colors).map((params) => {\n      return `--${params[0]}: ${params[1]};\\n`;\n    }).join('');\n  }\n\n  return deindent`\n    .stack-scope {\n      ${colorsToCSSVars(colors.light)}\n    }\n    html:has(head > [data-stack-theme=\"dark\"]) .stack-scope { \n      ${colorsToCSSVars(colors.dark)}\n    }\n  `;\n}\n\n\nexport function HexclaveTheme({\n  theme,\n  children,\n  nonce,\n} : {\n  theme?: ThemeConfig,\n  children?: React.ReactNode,\n  nonce?: string,\n}) {\n  const themeValue: Theme = {\n    ...DEFAULT_THEME,\n    ...theme,\n    dark: { ...DEFAULT_THEME.dark, ...theme?.dark },\n    light: { ...DEFAULT_THEME.light, ...theme?.light },\n  };\n\n  return (\n    <>\n      <BrowserScript nonce={nonce} />\n      <style\n        suppressHydrationWarning // we need this since the nonce can differ between client and server\n        nonce={nonce}\n        dangerouslySetInnerHTML={{\n          __html: globalCSS + \"\\n\" + convertColorsToCSS(themeValue),\n        }}\n      />\n      <TooltipProvider>\n        {children}\n      </TooltipProvider>\n    </>\n  );\n}\n\n/**\n * @deprecated Use `HexclaveTheme` from the `@hexclave/*` package instead — same symbol, new brand name. See https://docs.hexclave.com/migration.\n */\nexport const StackTheme = HexclaveTheme;\n"],"mappings":";;;;;;;;;;;;;;;;AAgDA,SAAS,sBAAsB,KAA6B;AAC1D,QAAO,OAAO,YAAY,OAAO,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,WAAW;EAClE,MAAMA,6BAAc,MAAM,CAAC,KAAK,CAAC,OAAO;AACxC,SAAO,CAEL,IAAI,QAAQ,WAAU,MAAK,IAAI,EAAE,aAAa,GAAG,EAEjD,GAAGA,QAAM,GAAG,GAAGA,QAAM,GAAG,IAAIA,QAAM,GAAG,GACtC;GACD,CAAC;;AAGL,SAAS,mBAAmB,OAAc;CACxC,MAAM,EAAE,MAAM,OAAO,GAAG,SAAS;CACjC,MAAM,SAAS;EACb,OAAO;GAAE,GAAG,sBAAsB,MAAM;GAAE,GAAG;GAAM;EACnD,MAAM,sBAAsB,KAAK;EAClC;CAED,SAAS,gBAAgB,QAAgC;AACvD,SAAO,OAAO,QAAQ,OAAO,CAAC,KAAK,WAAW;AAC5C,UAAO,KAAK,OAAO,GAAG,IAAI,OAAO,GAAG;IACpC,CAAC,KAAK,GAAG;;AAGb,QAAO,4CAAQ;;QAET,gBAAgB,OAAO,MAAM,CAAC;;;QAG9B,gBAAgB,OAAO,KAAK,CAAC;;;;AAMrC,SAAgB,cAAc,EAC5B,OACA,UACA,SAKC;CACD,MAAM,aAAoB;EACxB,GAAGC;EACH,GAAG;EACH,MAAM;GAAE,GAAGA,oCAAc;GAAM,GAAG,OAAO;GAAM;EAC/C,OAAO;GAAE,GAAGA,oCAAc;GAAO,GAAG,OAAO;GAAO;EACnD;AAED,QACE;EACE,2CAACC,4CAAqB,QAAS;EAC/B,2CAAC;GACC;GACO;GACP,yBAAyB,EACvB,QAAQC,uCAAY,OAAO,mBAAmB,WAAW,EAC1D;IACD;EACF,2CAACC,gCACE,WACe;KACjB;;;;;AAOP,MAAa,aAAa"}
+{"version":3,"file":"theme-provider.js","names":["color","DEFAULT_THEME","BrowserScript","globalCSS","TooltipProvider"],"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { deindent } from \"@hexclave/shared/dist/utils/strings\";\nimport { TooltipProvider } from \"@hexclave/ui\";\nimport Color from \"color\";\nimport React from \"react\";\nimport { globalCSS } from \"../generated/global-css\";\nimport { BrowserScript } from \"../utils/browser-script\";\nimport { DEFAULT_THEME } from \"../utils/constants\";\n\ntype Colors = {\n  background: string,\n  foreground: string,\n  card: string,\n  cardForeground: string,\n  popover: string,\n  popoverForeground: string,\n  primary: string,\n  primaryForeground: string,\n  secondary: string,\n  secondaryForeground: string,\n  muted: string,\n  mutedForeground: string,\n  accent: string,\n  accentForeground: string,\n  destructive: string,\n  destructiveForeground: string,\n  border: string,\n  input: string,\n  ring: string,\n}\n\nexport type Theme = {\n  light: Colors,\n  dark: Colors,\n  radius: string,\n};\n\ntype ThemeConfig = {\n  light?: Partial<Colors>,\n  dark?: Partial<Colors>,\n} & Partial<Omit<Theme, 'light' | 'dark'>>;\n\nfunction convertColorToCSSVars(obj: Record<string, string>) {\n  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {\n    const color = Color(value).hsl().array();\n    return [\n      // Convert camelCase key to dash-case\n      key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`),\n      // Convert color to CSS HSL string\n      `${color[0]} ${color[1]}% ${color[2]}%`\n    ];\n  }));\n}\n\nfunction convertColorsToCSS(theme: Theme) {\n  const { dark, light, ...rest } = theme;\n  const colors = {\n    light: { ...convertColorToCSSVars(light), ...rest },\n    dark: convertColorToCSSVars(dark),\n  };\n\n  function colorsToCSSVars(colors: Record<string, string>) {\n    return Object.entries(colors).map((params) => {\n      return `--${params[0]}: ${params[1]};\\n`;\n    }).join('');\n  }\n\n  return deindent`\n    .stack-scope {\n      ${colorsToCSSVars(colors.light)}\n    }\n    html:has(head > [data-stack-theme=\"dark\"]) .stack-scope { \n      ${colorsToCSSVars(colors.dark)}\n    }\n  `;\n}\n\n\nexport function HexclaveTheme({\n  theme,\n  children,\n  nonce,\n} : {\n  theme?: ThemeConfig,\n  children?: React.ReactNode,\n  nonce?: string,\n}) {\n  const themeValue: Theme = {\n    ...DEFAULT_THEME,\n    ...theme,\n    dark: { ...DEFAULT_THEME.dark, ...theme?.dark },\n    light: { ...DEFAULT_THEME.light, ...theme?.light },\n  };\n\n  return (\n    <>\n      <BrowserScript nonce={nonce} />\n      <style\n        suppressHydrationWarning // we need this since the nonce can differ between client and server\n        nonce={nonce}\n        dangerouslySetInnerHTML={{\n          __html: globalCSS + \"\\n\" + convertColorsToCSS(themeValue),\n        }}\n      />\n      <TooltipProvider>\n        {children}\n      </TooltipProvider>\n    </>\n  );\n}\n\n/**\n * @deprecated Use `HexclaveTheme` from the `@hexclave/*` package instead — same symbol, new brand name. See https://docs.hexclave.com/migration.\n */\nexport const StackTheme = HexclaveTheme;\n"],"mappings":";;;;;;;;;;;;;;;;AAgDA,SAAS,sBAAsB,KAA6B;AAC1D,QAAO,OAAO,YAAY,OAAO,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,WAAW;EAClE,MAAMA,6BAAc,MAAM,CAAC,KAAK,CAAC,OAAO;AACxC,SAAO,CAEL,IAAI,QAAQ,WAAU,MAAK,IAAI,EAAE,aAAa,GAAG,EAEjD,GAAGA,QAAM,GAAG,GAAGA,QAAM,GAAG,IAAIA,QAAM,GAAG,GACtC;GACD,CAAC;;AAGL,SAAS,mBAAmB,OAAc;CACxC,MAAM,EAAE,MAAM,OAAO,GAAG,SAAS;CACjC,MAAM,SAAS;EACb,OAAO;GAAE,GAAG,sBAAsB,MAAM;GAAE,GAAG;GAAM;EACnD,MAAM,sBAAsB,KAAK;EAClC;CAED,SAAS,gBAAgB,QAAgC;AACvD,SAAO,OAAO,QAAQ,OAAO,CAAC,KAAK,WAAW;AAC5C,UAAO,KAAK,OAAO,GAAG,IAAI,OAAO,GAAG;IACpC,CAAC,KAAK,GAAG;;AAGb,QAAO,4CAAQ;;QAET,gBAAgB,OAAO,MAAM,CAAC;;;QAG9B,gBAAgB,OAAO,KAAK,CAAC;;;;AAMrC,SAAgB,cAAc,EAC5B,OACA,UACA,SAKC;CACD,MAAM,aAAoB;EACxB,GAAGC;EACH,GAAG;EACH,MAAM;GAAE,GAAGA,oCAAc;GAAM,GAAG,OAAO;GAAM;EAC/C,OAAO;GAAE,GAAGA,oCAAc;GAAO,GAAG,OAAO;GAAO;EACnD;AAED,QACE;EACE,2CAACC,4CAAqB,QAAS;EAC/B,2CAAC;GACC;GACO;GACP,yBAAyB,EACvB,QAAQC,uCAAY,OAAO,mBAAmB,WAAW,EAC1D;IACD;EACF,2CAACC,gCACE,WACe;KACjB;;;;;AAOP,MAAa,aAAa"}

package/dist/providers/translation-provider-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"translation-provider-client.js","names":["React"],"sources":["../../src/providers/translation-provider-client.tsx"],"sourcesContent":["\"use client\";\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport React from \"react\";\nimport { createGlobal } from \"@hexclave/shared/dist/utils/globals\";\n\ntype TranslationContextValue = {\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n};\n\nexport const TranslationContext = createGlobal<React.Context<TranslationContextValue | null>>(\n  \"TranslationContext\",\n  () => React.createContext<TranslationContextValue | null>(null),\n);\nTranslationContext.displayName ??= \"TranslationContext\";\n\nexport function TranslationProviderClient(props: {\n  children: React.ReactNode,\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n}) {\n  return (\n    <TranslationContext.Provider value={{\n      quetzalKeys: props.quetzalKeys,\n      quetzalLocale: props.quetzalLocale,\n    }}>\n      {props.children}\n    </TranslationContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAa,2EACX,4BACMA,cAAM,cAA8C,KAAK,CAChE;AACD,mBAAmB,gBAAgB;AAEnC,SAAgB,0BAA0B,OAIvC;AACD,QACE,2CAAC,mBAAmB;EAAS,OAAO;GAClC,aAAa,MAAM;GACnB,eAAe,MAAM;GACtB;YACE,MAAM;GACqB"}
+{"version":3,"file":"translation-provider-client.js","names":["React"],"sources":["../../src/providers/translation-provider-client.tsx"],"sourcesContent":["\"use client\";\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport React from \"react\";\nimport { createGlobal } from \"@hexclave/shared/dist/utils/globals\";\n\ntype TranslationContextValue = {\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n};\n\nexport const TranslationContext = createGlobal<React.Context<TranslationContextValue | null>>(\n  \"TranslationContext\",\n  () => React.createContext<TranslationContextValue | null>(null),\n);\nTranslationContext.displayName ??= \"TranslationContext\";\n\nexport function TranslationProviderClient(props: {\n  children: React.ReactNode,\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n}) {\n  return (\n    <TranslationContext.Provider value={{\n      quetzalKeys: props.quetzalKeys,\n      quetzalLocale: props.quetzalLocale,\n    }}>\n      {props.children}\n    </TranslationContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAa,2EACX,4BACMA,cAAM,cAA8C,KAAK,CAChE;AACD,mBAAmB,gBAAgB;AAEnC,SAAgB,0BAA0B,OAIvC;AACD,QACE,2CAAC,mBAAmB;EAAS,OAAO;GAClC,aAAa,MAAM;GACnB,eAAe,MAAM;GACtB;YACE,MAAM;GACqB"}

package/dist/providers/translation-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"translation-provider.js","names":["quetzalLocales","quetzalKeys","TranslationProviderClient"],"sources":["../../src/providers/translation-provider.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { throwErr } from \"@hexclave/shared/dist/utils/errors\";\nimport { quetzalKeys, quetzalLocales } from \"../generated/quetzal-translations\";\nimport { TranslationProviderClient } from \"./translation-provider-client\";\n\nexport function TranslationProvider({ lang, translationOverrides, children }: {\n  lang: Parameters<typeof quetzalLocales.get>[0] | undefined,\n  translationOverrides?: Record<string, string>,\n  children: React.ReactNode,\n}) {\n  const locale = quetzalLocales.get(lang ?? (undefined as never));\n\n  const localeWithOverrides = new Map<string, string>(locale);\n  for (const [orig, override] of Object.entries(translationOverrides ?? {})) {\n    const key = quetzalKeys.get(orig as never) ?? throwErr(new Error(`Invalid translation override: Original key ${JSON.stringify(orig)} not found. Make sure you are passing the correct values into the translationOverrides property of the component.`));\n    localeWithOverrides.set(key, override);\n  }\n\n  return <TranslationProviderClient quetzalKeys={quetzalKeys} quetzalLocale={localeWithOverrides}>\n    {children}\n  </TranslationProviderClient>;\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,oBAAoB,EAAE,MAAM,sBAAsB,YAI/D;CACD,MAAM,SAASA,oDAAe,IAAI,QAAS,OAAoB;CAE/D,MAAM,sBAAsB,IAAI,IAAoB,OAAO;AAC3D,MAAK,MAAM,CAAC,MAAM,aAAa,OAAO,QAAQ,wBAAwB,EAAE,CAAC,EAAE;EACzE,MAAM,MAAMC,iDAAY,IAAI,KAAc,qEAAa,IAAI,MAAM,8CAA8C,KAAK,UAAU,KAAK,CAAC,mHAAmH,CAAC;AACxP,sBAAoB,IAAI,KAAK,SAAS;;AAGxC,QAAO,2CAACC;EAA0B,aAAaD;EAAa,eAAe;EACxE;GACyB"}
+{"version":3,"file":"translation-provider.js","names":["quetzalLocales","quetzalKeys","TranslationProviderClient"],"sources":["../../src/providers/translation-provider.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { throwErr } from \"@hexclave/shared/dist/utils/errors\";\nimport { quetzalKeys, quetzalLocales } from \"../generated/quetzal-translations\";\nimport { TranslationProviderClient } from \"./translation-provider-client\";\n\nexport function TranslationProvider({ lang, translationOverrides, children }: {\n  lang: Parameters<typeof quetzalLocales.get>[0] | undefined,\n  translationOverrides?: Record<string, string>,\n  children: React.ReactNode,\n}) {\n  const locale = quetzalLocales.get(lang ?? (undefined as never));\n\n  const localeWithOverrides = new Map<string, string>(locale);\n  for (const [orig, override] of Object.entries(translationOverrides ?? {})) {\n    const key = quetzalKeys.get(orig as never) ?? throwErr(new Error(`Invalid translation override: Original key ${JSON.stringify(orig)} not found. Make sure you are passing the correct values into the translationOverrides property of the component.`));\n    localeWithOverrides.set(key, override);\n  }\n\n  return <TranslationProviderClient quetzalKeys={quetzalKeys} quetzalLocale={localeWithOverrides}>\n    {children}\n  </TranslationProviderClient>;\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,oBAAoB,EAAE,MAAM,sBAAsB,YAI/D;CACD,MAAM,SAASA,oDAAe,IAAI,QAAS,OAAoB;CAE/D,MAAM,sBAAsB,IAAI,IAAoB,OAAO;AAC3D,MAAK,MAAM,CAAC,MAAM,aAAa,OAAO,QAAQ,wBAAwB,EAAE,CAAC,EAAE;EACzE,MAAM,MAAMC,iDAAY,IAAI,KAAc,qEAAa,IAAI,MAAM,8CAA8C,KAAK,UAAU,KAAK,CAAC,mHAAmH,CAAC;AACxP,sBAAoB,IAAI,KAAK,SAAS;;AAGxC,QAAO,2CAACC;EAA0B,aAAaD;EAAa,eAAe;EACxE;GACyB"}

package/dist/tanstack-start-server-context.default.js.map

@@ -1 +1 @@
-{"version":3,"file":"tanstack-start-server-context.default.js","names":[],"sources":["../src/tanstack-start-server-context.default.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport const getCookie = undefined;\nexport const getCookies = undefined;\nexport const setCookie = undefined;\nexport const deleteCookie = undefined;\nexport const getRequestHeader = undefined;\n"],"mappings":";;;AAIA,MAAa,YAAY;AACzB,MAAa,aAAa;AAC1B,MAAa,YAAY;AACzB,MAAa,eAAe;AAC5B,MAAa,mBAAmB"}
+{"version":3,"file":"tanstack-start-server-context.default.js","names":[],"sources":["../src/tanstack-start-server-context.default.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport const getCookie = undefined;\nexport const getCookies = undefined;\nexport const setCookie = undefined;\nexport const deleteCookie = undefined;\nexport const getRequestHeader = undefined;\n"],"mappings":";;;AAIA,MAAa,YAAY;AACzB,MAAa,aAAa;AAC1B,MAAa,YAAY;AACzB,MAAa,eAAe;AAC5B,MAAa,mBAAmB"}

package/dist/utils/browser-script.js.map

@@ -1 +1 @@
-{"version":3,"file":"browser-script.js","names":["SsrScript"],"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const getColorMode = (value: string) => {\n    if (value.includes('dark')) {\n      return 'dark';\n    }\n    if (value.includes('light')) {\n      return 'light';\n    }\n    return null;\n  };\n\n  const setTheme = (mode: 'dark' | 'light') => {\n    let el = document.getElementById(`--stack-theme-mode`);\n    if (!el) {\n      el = document.createElement(\"style\");\n      el.id = `--stack-theme-mode`;\n      el.innerHTML = `/* This tag is used by Hexclave to set the theme in the browser without causing a hydration error (since React ignores additional tags in the <head>). We later use the \\`html:has(head > [data-stack-theme=XYZ])\\` selector to apply styles based on the theme. */`;\n      document.head.appendChild(el);\n    }\n    el.setAttribute(\"data-stack-theme\", mode);\n  };\n\n  const colorToRGB = (color: string): [number, number, number] | null => {\n    // Create a temporary element to use for color conversion\n    const temp = document.createElement('div');\n    temp.style.color = color;\n    document.body.appendChild(temp);\n\n    // Get the computed style\n    const computedColor = getComputedStyle(temp).color;\n    document.body.removeChild(temp);\n\n    // Parse the RGB values\n    const match = computedColor.match(/^rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)$/);\n    if (match) {\n      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];\n    }\n\n    return null;\n  };\n\n  const rgbToLuma = (rgb: [number, number, number]) => {\n    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;\n  };\n\n  const copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n\n    if (colorScheme) {\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        setTheme(mode);\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromVariables = () => {\n    let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background');\n    if (backgroundColor) {\n      // shadcn by default uses the hsl values with the format \"123 45% 6.5%\"\n      if (/^\\d+\\s\\d+%\\s\\d+(\\.\\d+)?%$/.test(backgroundColor)) {\n        backgroundColor = `hsl(${backgroundColor})`;\n      }\n\n      // convert backgroundColor to luma and check if it's dark\n      const rgb = colorToRGB(backgroundColor);\n      if (rgb) {\n        const luma = rgbToLuma(rgb);\n        if (luma < 128) {\n          setTheme('dark');\n        } else {\n          setTheme('light');\n        }\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromAttributes = () => {\n    for (const attributeName of attributes) {\n      const colorTheme = document.documentElement.getAttribute(attributeName);\n      if (colorTheme) {\n        const mode = getColorMode(colorTheme);\n        if (mode) {\n          setTheme(mode);\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (copyFromColorScheme()) {\n        return;\n      }\n      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {\n        return;\n      }\n      if (copyFromVariables()) {\n        return;\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n\n  // Initial check on page load\n  if (!copyFromColorScheme()) {\n    if (!copyFromAttributes()) {\n      copyFromVariables();\n    }\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":";;;;;;AAQA,MAAM,eAAe;CACnB,MAAM,aAAa;EAAC;EAAyB;EAAyB;EAAc;EAAqB;EAAQ;CAEjH,MAAM,gBAAgB,UAAkB;AACtC,MAAI,MAAM,SAAS,OAAO,CACxB,QAAO;AAET,MAAI,MAAM,SAAS,QAAQ,CACzB,QAAO;AAET,SAAO;;CAGT,MAAM,YAAY,SAA2B;EAC3C,IAAI,KAAK,SAAS,eAAe,qBAAqB;AACtD,MAAI,CAAC,IAAI;AACP,QAAK,SAAS,cAAc,QAAQ;AACpC,MAAG,KAAK;AACR,MAAG,YAAY;AACf,YAAS,KAAK,YAAY,GAAG;;AAE/B,KAAG,aAAa,oBAAoB,KAAK;;CAG3C,MAAM,cAAc,UAAmD;EAErE,MAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,MAAM,QAAQ;AACnB,WAAS,KAAK,YAAY,KAAK;EAG/B,MAAM,gBAAgB,iBAAiB,KAAK,CAAC;AAC7C,WAAS,KAAK,YAAY,KAAK;EAG/B,MAAM,QAAQ,cAAc,MAAM,mCAAmC;AACrE,MAAI,MACF,QAAO;GAAC,SAAS,MAAM,GAAG;GAAE,SAAS,MAAM,GAAG;GAAE,SAAS,MAAM,GAAG;GAAC;AAGrE,SAAO;;CAGT,MAAM,aAAa,QAAkC;AACnD,UAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,MAAM,IAAI,KAAK,OAAO;;CAGxD,MAAM,4BAA4B;EAChC,MAAM,cAAc,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,eAAe;AAE/F,MAAI,aAAa;GACf,MAAM,OAAO,aAAa,YAAY;AACtC,OAAI,MAAM;AACR,aAAS,KAAK;AACd,WAAO;;;AAGX,SAAO;;CAGT,MAAM,0BAA0B;EAC9B,IAAI,kBAAkB,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,eAAe;AACjG,MAAI,iBAAiB;AAEnB,OAAI,4BAA4B,KAAK,gBAAgB,CACnD,mBAAkB,OAAO,gBAAgB;GAI3C,MAAM,MAAM,WAAW,gBAAgB;AACvC,OAAI,KAAK;AAEP,QADa,UAAU,IAAI,GAChB,IACT,UAAS,OAAO;QAEhB,UAAS,QAAQ;AAEnB,WAAO;;;AAGX,SAAO;;CAGT,MAAM,2BAA2B;AAC/B,OAAK,MAAM,iBAAiB,YAAY;GACtC,MAAM,aAAa,SAAS,gBAAgB,aAAa,cAAc;AACvE,OAAI,YAAY;IACd,MAAM,OAAO,aAAa,WAAW;AACrC,QAAI,MAAM;AACR,cAAS,KAAK;AACd,YAAO;;;;AAIb,SAAO;;AAiBT,CAdiB,IAAI,kBAAkB,cAAc;AACnD,YAAU,SAAS,aAAa;AAC9B,OAAI,qBAAqB,CACvB;AAEF,OAAI,SAAS,iBAAiB,WAAW,SAAS,SAAS,cAAc,IAAI,oBAAoB,CAC/F;AAEF,OAAI,mBAAmB,CACrB;IAEF;GACF,CAEO,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB;EAClB,CAAC;AAGF,KAAI,CAAC,qBAAqB,EACxB;MAAI,CAAC,oBAAoB,CACvB,oBAAmB;;;AAKzB,SAAgB,cAAc,OAA4B;AACxD,QAAO,2CAACA;EAAU,OAAO,MAAM;EAAO,QAAQ,IAAI,OAAO,UAAU,CAAC;GAAO"}
+{"version":3,"file":"browser-script.js","names":["SsrScript"],"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const getColorMode = (value: string) => {\n    if (value.includes('dark')) {\n      return 'dark';\n    }\n    if (value.includes('light')) {\n      return 'light';\n    }\n    return null;\n  };\n\n  const setTheme = (mode: 'dark' | 'light') => {\n    let el = document.getElementById(`--stack-theme-mode`);\n    if (!el) {\n      el = document.createElement(\"style\");\n      el.id = `--stack-theme-mode`;\n      el.innerHTML = `/* This tag is used by Hexclave to set the theme in the browser without causing a hydration error (since React ignores additional tags in the <head>). We later use the \\`html:has(head > [data-stack-theme=XYZ])\\` selector to apply styles based on the theme. */`;\n      document.head.appendChild(el);\n    }\n    el.setAttribute(\"data-stack-theme\", mode);\n  };\n\n  const colorToRGB = (color: string): [number, number, number] | null => {\n    // Create a temporary element to use for color conversion\n    const temp = document.createElement('div');\n    temp.style.color = color;\n    document.body.appendChild(temp);\n\n    // Get the computed style\n    const computedColor = getComputedStyle(temp).color;\n    document.body.removeChild(temp);\n\n    // Parse the RGB values\n    const match = computedColor.match(/^rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)$/);\n    if (match) {\n      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];\n    }\n\n    return null;\n  };\n\n  const rgbToLuma = (rgb: [number, number, number]) => {\n    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;\n  };\n\n  const copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n\n    if (colorScheme) {\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        setTheme(mode);\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromVariables = () => {\n    let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background');\n    if (backgroundColor) {\n      // shadcn by default uses the hsl values with the format \"123 45% 6.5%\"\n      if (/^\\d+\\s\\d+%\\s\\d+(\\.\\d+)?%$/.test(backgroundColor)) {\n        backgroundColor = `hsl(${backgroundColor})`;\n      }\n\n      // convert backgroundColor to luma and check if it's dark\n      const rgb = colorToRGB(backgroundColor);\n      if (rgb) {\n        const luma = rgbToLuma(rgb);\n        if (luma < 128) {\n          setTheme('dark');\n        } else {\n          setTheme('light');\n        }\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromAttributes = () => {\n    for (const attributeName of attributes) {\n      const colorTheme = document.documentElement.getAttribute(attributeName);\n      if (colorTheme) {\n        const mode = getColorMode(colorTheme);\n        if (mode) {\n          setTheme(mode);\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (copyFromColorScheme()) {\n        return;\n      }\n      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {\n        return;\n      }\n      if (copyFromVariables()) {\n        return;\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n\n  // Initial check on page load\n  if (!copyFromColorScheme()) {\n    if (!copyFromAttributes()) {\n      copyFromVariables();\n    }\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":";;;;;;AAQA,MAAM,eAAe;CACnB,MAAM,aAAa;EAAC;EAAyB;EAAyB;EAAc;EAAqB;EAAQ;CAEjH,MAAM,gBAAgB,UAAkB;AACtC,MAAI,MAAM,SAAS,OAAO,CACxB,QAAO;AAET,MAAI,MAAM,SAAS,QAAQ,CACzB,QAAO;AAET,SAAO;;CAGT,MAAM,YAAY,SAA2B;EAC3C,IAAI,KAAK,SAAS,eAAe,qBAAqB;AACtD,MAAI,CAAC,IAAI;AACP,QAAK,SAAS,cAAc,QAAQ;AACpC,MAAG,KAAK;AACR,MAAG,YAAY;AACf,YAAS,KAAK,YAAY,GAAG;;AAE/B,KAAG,aAAa,oBAAoB,KAAK;;CAG3C,MAAM,cAAc,UAAmD;EAErE,MAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,MAAM,QAAQ;AACnB,WAAS,KAAK,YAAY,KAAK;EAG/B,MAAM,gBAAgB,iBAAiB,KAAK,CAAC;AAC7C,WAAS,KAAK,YAAY,KAAK;EAG/B,MAAM,QAAQ,cAAc,MAAM,mCAAmC;AACrE,MAAI,MACF,QAAO;GAAC,SAAS,MAAM,GAAG;GAAE,SAAS,MAAM,GAAG;GAAE,SAAS,MAAM,GAAG;GAAC;AAGrE,SAAO;;CAGT,MAAM,aAAa,QAAkC;AACnD,UAAQ,IAAI,KAAK,MAAM,IAAI,KAAK,MAAM,IAAI,KAAK,OAAO;;CAGxD,MAAM,4BAA4B;EAChC,MAAM,cAAc,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,eAAe;AAE/F,MAAI,aAAa;GACf,MAAM,OAAO,aAAa,YAAY;AACtC,OAAI,MAAM;AACR,aAAS,KAAK;AACd,WAAO;;;AAGX,SAAO;;CAGT,MAAM,0BAA0B;EAC9B,IAAI,kBAAkB,iBAAiB,SAAS,gBAAgB,CAAC,iBAAiB,eAAe;AACjG,MAAI,iBAAiB;AAEnB,OAAI,4BAA4B,KAAK,gBAAgB,CACnD,mBAAkB,OAAO,gBAAgB;GAI3C,MAAM,MAAM,WAAW,gBAAgB;AACvC,OAAI,KAAK;AAEP,QADa,UAAU,IAAI,GAChB,IACT,UAAS,OAAO;QAEhB,UAAS,QAAQ;AAEnB,WAAO;;;AAGX,SAAO;;CAGT,MAAM,2BAA2B;AAC/B,OAAK,MAAM,iBAAiB,YAAY;GACtC,MAAM,aAAa,SAAS,gBAAgB,aAAa,cAAc;AACvE,OAAI,YAAY;IACd,MAAM,OAAO,aAAa,WAAW;AACrC,QAAI,MAAM;AACR,cAAS,KAAK;AACd,YAAO;;;;AAIb,SAAO;;AAiBT,CAdiB,IAAI,kBAAkB,cAAc;AACnD,YAAU,SAAS,aAAa;AAC9B,OAAI,qBAAqB,CACvB;AAEF,OAAI,SAAS,iBAAiB,WAAW,SAAS,SAAS,cAAc,IAAI,oBAAoB,CAC/F;AAEF,OAAI,mBAAmB,CACrB;IAEF;GACF,CAEO,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB;EAClB,CAAC;AAGF,KAAI,CAAC,qBAAqB,EACxB;MAAI,CAAC,oBAAoB,CACvB,oBAAmB;;;AAKzB,SAAgB,cAAc,OAA4B;AACxD,QAAO,2CAACA;EAAU,OAAO,MAAM;EAAO,QAAQ,IAAI,OAAO,UAAU,CAAC;GAAO"}

package/dist/utils/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":[],"sources":["../../src/utils/constants.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport const FONT_SIZES = { 'xs': '0.75rem', 'sm': '0.875rem', 'md': '1rem', 'lg': '1.125rem', 'xl': '1.25rem' } as const;\nexport const LINE_HEIGHTS = { 'xs': '1rem', 'sm': '1.25rem', 'md': '1.5rem', 'lg': '1.75rem', 'xl': '2rem' } as const;\nexport const FONT_FAMILY = 'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"';\nexport const PRIMARY_FONT_COLORS = { 'dark': 'white', 'light': 'black' } as const;\nexport const SECONDARY_FONT_COLORS = { 'dark': '#a8a8a8', 'light': '#737373' } as const;\nexport const SELECTED_BACKGROUND_COLORS = { 'dark': 'rgba(255, 255, 255, 0.1)', 'light': 'rgba(0, 0, 0, 0.04)' } as const;\nexport const LINK_COLORS = { 'dark': '#fff', 'light': '#000' } as const;\nexport const SHADOW = '0 1px 2px 0 rgba(0, 0, 0, 0.05)';\n\nexport const DEFAULT_THEME = {\n  light: {\n    background: 'hsl(0 0% 100%)',\n    foreground: 'hsl(240 10% 3.9%)',\n    card: 'hsl(0 0% 100%)',\n    cardForeground: 'hsl(240 10% 3.9%)',\n    popover: 'hsl(0 0% 100%)',\n    popoverForeground: 'hsl(240 10% 3.9%)',\n    primary: 'hsl(240 5.9% 10%)',\n    primaryForeground: 'hsl(0 0% 98%)',\n    secondary: 'hsl(240 4.8% 95.9%)',\n    secondaryForeground: 'hsl(240 5.9% 10%)',\n    muted: 'hsl(240 4.8% 95.9%)',\n    mutedForeground: 'hsl(240 3.8% 46.1%)',\n    accent: 'hsl(240 4.8% 95.9%)',\n    accentForeground: 'hsl(240 5.9% 10%)',\n    destructive: 'hsl(0 84.2% 60.2%)',\n    destructiveForeground: 'hsl(0 0% 98%)',\n    border: 'hsl(240 5.9% 90%)',\n    input: 'hsl(240 5.9% 90%)',\n    ring: 'hsl(240 10% 3.9%)',\n  },\n  dark: {\n    background: 'hsl(240 10% 3.9%)',\n    foreground: 'hsl(0 0% 98%)',\n    card: 'hsl(240 10% 3.9%)',\n    cardForeground: 'hsl(0 0% 98%)',\n    popover: 'hsl(240 10% 3.9%)',\n    popoverForeground: 'hsl(0 0% 98%)',\n    primary: 'hsl(0 0% 98%)',\n    primaryForeground: 'hsl(240 5.9% 10%)',\n    secondary: 'hsl(240 3.7% 15.9%)',\n    secondaryForeground: 'hsl(0 0% 98%)',\n    muted: 'hsl(240 3.7% 15.9%)',\n    mutedForeground: 'hsl(240 5% 64.9%)',\n    accent: 'hsl(240 3.7% 15.9%)',\n    accentForeground: 'hsl(0 0% 98%)',\n    destructive: 'hsl(0 62.8% 50%)',\n    destructiveForeground: 'hsl(0 0% 98%)',\n    border: 'hsl(240 3.7% 15.9%)',\n    input: 'hsl(240 3.7% 15.9%)',\n    ring: 'hsl(240 4.9% 83.9%)',\n  },\n  radius: '0.5rem',\n} as const;\n"],"mappings":";;;AAIA,MAAa,aAAa;CAAE,MAAM;CAAW,MAAM;CAAY,MAAM;CAAQ,MAAM;CAAY,MAAM;CAAW;AAChH,MAAa,eAAe;CAAE,MAAM;CAAQ,MAAM;CAAW,MAAM;CAAU,MAAM;CAAW,MAAM;CAAQ;AAC5G,MAAa,cAAc;AAC3B,MAAa,sBAAsB;CAAE,QAAQ;CAAS,SAAS;CAAS;AACxE,MAAa,wBAAwB;CAAE,QAAQ;CAAW,SAAS;CAAW;AAC9E,MAAa,6BAA6B;CAAE,QAAQ;CAA4B,SAAS;CAAuB;AAChH,MAAa,cAAc;CAAE,QAAQ;CAAQ,SAAS;CAAQ;AAC9D,MAAa,SAAS;AAEtB,MAAa,gBAAgB;CAC3B,OAAO;EACL,YAAY;EACZ,YAAY;EACZ,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,mBAAmB;EACnB,SAAS;EACT,mBAAmB;EACnB,WAAW;EACX,qBAAqB;EACrB,OAAO;EACP,iBAAiB;EACjB,QAAQ;EACR,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACD,MAAM;EACJ,YAAY;EACZ,YAAY;EACZ,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,mBAAmB;EACnB,SAAS;EACT,mBAAmB;EACnB,WAAW;EACX,qBAAqB;EACrB,OAAO;EACP,iBAAiB;EACjB,QAAQ;EACR,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACD,QAAQ;CACT"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../src/utils/constants.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport const FONT_SIZES = { 'xs': '0.75rem', 'sm': '0.875rem', 'md': '1rem', 'lg': '1.125rem', 'xl': '1.25rem' } as const;\nexport const LINE_HEIGHTS = { 'xs': '1rem', 'sm': '1.25rem', 'md': '1.5rem', 'lg': '1.75rem', 'xl': '2rem' } as const;\nexport const FONT_FAMILY = 'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"';\nexport const PRIMARY_FONT_COLORS = { 'dark': 'white', 'light': 'black' } as const;\nexport const SECONDARY_FONT_COLORS = { 'dark': '#a8a8a8', 'light': '#737373' } as const;\nexport const SELECTED_BACKGROUND_COLORS = { 'dark': 'rgba(255, 255, 255, 0.1)', 'light': 'rgba(0, 0, 0, 0.04)' } as const;\nexport const LINK_COLORS = { 'dark': '#fff', 'light': '#000' } as const;\nexport const SHADOW = '0 1px 2px 0 rgba(0, 0, 0, 0.05)';\n\nexport const DEFAULT_THEME = {\n  light: {\n    background: 'hsl(0 0% 100%)',\n    foreground: 'hsl(240 10% 3.9%)',\n    card: 'hsl(0 0% 100%)',\n    cardForeground: 'hsl(240 10% 3.9%)',\n    popover: 'hsl(0 0% 100%)',\n    popoverForeground: 'hsl(240 10% 3.9%)',\n    primary: 'hsl(240 5.9% 10%)',\n    primaryForeground: 'hsl(0 0% 98%)',\n    secondary: 'hsl(240 4.8% 95.9%)',\n    secondaryForeground: 'hsl(240 5.9% 10%)',\n    muted: 'hsl(240 4.8% 95.9%)',\n    mutedForeground: 'hsl(240 3.8% 46.1%)',\n    accent: 'hsl(240 4.8% 95.9%)',\n    accentForeground: 'hsl(240 5.9% 10%)',\n    destructive: 'hsl(0 84.2% 60.2%)',\n    destructiveForeground: 'hsl(0 0% 98%)',\n    border: 'hsl(240 5.9% 90%)',\n    input: 'hsl(240 5.9% 90%)',\n    ring: 'hsl(240 10% 3.9%)',\n  },\n  dark: {\n    background: 'hsl(240 10% 3.9%)',\n    foreground: 'hsl(0 0% 98%)',\n    card: 'hsl(240 10% 3.9%)',\n    cardForeground: 'hsl(0 0% 98%)',\n    popover: 'hsl(240 10% 3.9%)',\n    popoverForeground: 'hsl(0 0% 98%)',\n    primary: 'hsl(0 0% 98%)',\n    primaryForeground: 'hsl(240 5.9% 10%)',\n    secondary: 'hsl(240 3.7% 15.9%)',\n    secondaryForeground: 'hsl(0 0% 98%)',\n    muted: 'hsl(240 3.7% 15.9%)',\n    mutedForeground: 'hsl(240 5% 64.9%)',\n    accent: 'hsl(240 3.7% 15.9%)',\n    accentForeground: 'hsl(0 0% 98%)',\n    destructive: 'hsl(0 62.8% 50%)',\n    destructiveForeground: 'hsl(0 0% 98%)',\n    border: 'hsl(240 3.7% 15.9%)',\n    input: 'hsl(240 3.7% 15.9%)',\n    ring: 'hsl(240 4.9% 83.9%)',\n  },\n  radius: '0.5rem',\n} as const;\n"],"mappings":";;;AAIA,MAAa,aAAa;CAAE,MAAM;CAAW,MAAM;CAAY,MAAM;CAAQ,MAAM;CAAY,MAAM;CAAW;AAChH,MAAa,eAAe;CAAE,MAAM;CAAQ,MAAM;CAAW,MAAM;CAAU,MAAM;CAAW,MAAM;CAAQ;AAC5G,MAAa,cAAc;AAC3B,MAAa,sBAAsB;CAAE,QAAQ;CAAS,SAAS;CAAS;AACxE,MAAa,wBAAwB;CAAE,QAAQ;CAAW,SAAS;CAAW;AAC9E,MAAa,6BAA6B;CAAE,QAAQ;CAA4B,SAAS;CAAuB;AAChH,MAAa,cAAc;CAAE,QAAQ;CAAQ,SAAS;CAAQ;AAC9D,MAAa,SAAS;AAEtB,MAAa,gBAAgB;CAC3B,OAAO;EACL,YAAY;EACZ,YAAY;EACZ,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,mBAAmB;EACnB,SAAS;EACT,mBAAmB;EACnB,WAAW;EACX,qBAAqB;EACrB,OAAO;EACP,iBAAiB;EACjB,QAAQ;EACR,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACD,MAAM;EACJ,YAAY;EACZ,YAAY;EACZ,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,mBAAmB;EACnB,SAAS;EACT,mBAAmB;EACnB,WAAW;EACX,qBAAqB;EACrB,OAAO;EACP,iBAAiB;EACjB,QAAQ;EACR,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACD,QAAQ;CACT"}

package/dist/utils/url.js.map

@@ -1 +1 @@
-{"version":3,"file":"url.js","names":["HexclaveAssertionError"],"sources":["../../src/utils/url.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { HexclaveAssertionError } from \"@hexclave/shared/dist/utils/errors\";\n\n\nexport function constructRedirectUrl(redirectUrl: URL | string | undefined, callbackUrlName: string) {\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (typeof window === 'undefined' || !window.location) {\n    throw new HexclaveAssertionError(`${callbackUrlName} option is required in a non-browser environment.`, { redirectUrl });\n  }\n\n  const retainedQueryParams = [\"after_auth_return_to\"];\n  const currentUrl = new URL(window.location.href);\n  const url = redirectUrl ? new URL(redirectUrl, window.location.href) : new URL(window.location.href);\n  for (const param of retainedQueryParams) {\n    if (currentUrl.searchParams.has(param)) {\n      url.searchParams.set(param, currentUrl.searchParams.get(param)!);\n    }\n  }\n  url.hash = \"\";\n  return url.toString();\n}\n"],"mappings":";;;;;AAOA,SAAgB,qBAAqB,aAAuC,iBAAyB;AAEnG,KAAI,OAAO,WAAW,eAAe,CAAC,OAAO,SAC3C,OAAM,IAAIA,0DAAuB,GAAG,gBAAgB,oDAAoD,EAAE,aAAa,CAAC;CAG1H,MAAM,sBAAsB,CAAC,uBAAuB;CACpD,MAAM,aAAa,IAAI,IAAI,OAAO,SAAS,KAAK;CAChD,MAAM,MAAM,cAAc,IAAI,IAAI,aAAa,OAAO,SAAS,KAAK,GAAG,IAAI,IAAI,OAAO,SAAS,KAAK;AACpG,MAAK,MAAM,SAAS,oBAClB,KAAI,WAAW,aAAa,IAAI,MAAM,CACpC,KAAI,aAAa,IAAI,OAAO,WAAW,aAAa,IAAI,MAAM,CAAE;AAGpE,KAAI,OAAO;AACX,QAAO,IAAI,UAAU"}
+{"version":3,"file":"url.js","names":["HexclaveAssertionError"],"sources":["../../src/utils/url.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { HexclaveAssertionError } from \"@hexclave/shared/dist/utils/errors\";\n\n\nexport function constructRedirectUrl(redirectUrl: URL | string | undefined, callbackUrlName: string) {\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (typeof window === 'undefined' || !window.location) {\n    throw new HexclaveAssertionError(`${callbackUrlName} option is required in a non-browser environment.`, { redirectUrl });\n  }\n\n  const retainedQueryParams = [\"after_auth_return_to\"];\n  const currentUrl = new URL(window.location.href);\n  const url = redirectUrl ? new URL(redirectUrl, window.location.href) : new URL(window.location.href);\n  for (const param of retainedQueryParams) {\n    if (currentUrl.searchParams.has(param)) {\n      url.searchParams.set(param, currentUrl.searchParams.get(param)!);\n    }\n  }\n  url.hash = \"\";\n  return url.toString();\n}\n"],"mappings":";;;;;AAOA,SAAgB,qBAAqB,aAAuC,iBAAyB;AAEnG,KAAI,OAAO,WAAW,eAAe,CAAC,OAAO,SAC3C,OAAM,IAAIA,0DAAuB,GAAG,gBAAgB,oDAAoD,EAAE,aAAa,CAAC;CAG1H,MAAM,sBAAsB,CAAC,uBAAuB;CACpD,MAAM,aAAa,IAAI,IAAI,OAAO,SAAS,KAAK;CAChD,MAAM,MAAM,cAAc,IAAI,IAAI,aAAa,OAAO,SAAS,KAAK,GAAG,IAAI,IAAI,OAAO,SAAS,KAAK;AACpG,MAAK,MAAM,SAAS,oBAClB,KAAI,WAAW,aAAa,IAAI,MAAM,CACpC,KAAI,aAAa,IAAI,OAAO,WAAW,aAAa,IAAI,MAAM,CAAE;AAGpE,KAAI,OAAO;AACX,QAAO,IAAI,UAAU"}

package/package.json

@@ -1,7 +1,7 @@
 {
-  "//": "THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template (FOR package.json FILES, PLEASE EDIT package-template.json)",
+  "//": "THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template (FOR package.json FILES, PLEASE EDIT package-template.json)",
   "name": "@hexclave/tanstack-start",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "repository": "https://github.com/hexclave/hexclave",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -50,6 +50,7 @@
   "files": [
     "README.md",
     "dist",
+    "src",
     "CHANGELOG.md",
     "LICENSE"
   ],
@@ -76,8 +77,8 @@
     "rrweb": "^1.1.3",
     "tsx": "^4.21.0",
     "yup": "^1.7.1",
-    "@hexclave/shared": "1.0.3",
-    "@hexclave/ui": "1.0.3"
+    "@hexclave/ui": "1.0.6",
+    "@hexclave/shared": "1.0.6"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",
@@ -118,10 +119,12 @@
     "typecheck": "tsc --noEmit",
     "clean": "rimraf dist && rimraf node_modules",
     "lint": "eslint --ext .tsx,.ts .",
-    "build": "rimraf dist && pnpm run css && tsdown",
+    "build": "rimraf dist && pnpm run codegen && tsdown",
     "dev": "concurrently -n \"build,codegen\" -k \"tsdown --watch\" \"pnpm run codegen:watch\"",
-    "codegen": "pnpm run css",
-    "codegen:watch": "pnpm run css:watch",
+    "codegen": "pnpm run env && pnpm run css",
+    "codegen:watch": "concurrently -n \"env,css\" -k \"pnpm run env:watch\" \"pnpm run css:watch\"",
+    "env": "tsx ./scripts/generate-env.ts",
+    "env:watch": "chokidar --silent './scripts/generate-env.ts' -c 'pnpm run env' --throttle 2000",
     "css": "pnpm run css-tw && pnpm run css-sc",
     "css:watch": "concurrently -n \"tw,sc\" -k \"pnpm run css-tw:watch\" \"pnpm run css-sc:watch\"",
     "css-tw:watch": "tailwindcss -i ./src/global.css -o ./src/generated/tailwind.css --watch",

package/src/components/api-key-dialogs.tsx

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

package/src/components/api-key-table.tsx

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