@hexclave/tanstack-start 1.0.2 → 1.0.5

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.2",
+  "version": "1.0.5",
   "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.2",
-    "@hexclave/ui": "1.0.2"
+    "@hexclave/shared": "1.0.5",
+    "@hexclave/ui": "1.0.5"
   },
   "peerDependencies": {
     "@types/react": ">=18.0.0",

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={[]}
+  />;
+}

package/src/components/credential-sign-in.tsx

@@ -0,0 +1,83 @@
+'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 { passwordSchema, strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput } from "@hexclave/ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from "..";
+import { useTranslation } from "../lib/translations";
+import { FormWarningText } from "./elements/form-warning";
+import { StyledLink } from "./link";
+
+export function CredentialSignIn() {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),
+    password: passwordSchema.defined().nonEmpty(t('Please enter your password'))
+  });
+
+  const { register, handleSubmit, setError, formState: { errors } } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const app = useStackApp();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+
+    try {
+      const { email, password } = data;
+      const result = await app.signInWithCredential({
+        email,
+        password,
+      });
+      if (result.status === 'error') {
+        setError('email', { type: 'manual', message: result.error.message });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form
+      className="flex flex-col items-stretch stack-scope"
+      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+      noValidate
+    >
+      <Label htmlFor="email" className="mb-1">{t('Email')}</Label>
+      <Input
+        id="email"
+        type="email"
+        autoComplete="email"
+        {...register('email')}
+      />
+      <FormWarningText text={errors.email?.message?.toString()} />
+
+      <Label htmlFor="password" className="mt-4 mb-1">{t('Password')}</Label>
+      <PasswordInput
+        id="password"
+        autoComplete="current-password"
+        {...register('password')}
+      />
+      <FormWarningText text={errors.password?.message?.toString()} />
+
+      <StyledLink href={app.urls.forgotPassword} className="mt-1 text-sm">
+        {t('Forgot password?')}
+      </StyledLink>
+
+      <Button type="submit" className="mt-6" loading={loading}>
+        {t('Sign In')}
+      </Button>
+    </form>
+  );
+}

package/src/components/credential-sign-up.tsx

@@ -0,0 +1,108 @@
+'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 { getPasswordError } from "@hexclave/shared/dist/helpers/password";
+import { passwordSchema, strictEmailSchema, yupObject } from "@hexclave/shared/dist/schema-fields";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput } from "@hexclave/ui";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from "../lib/hooks";
+import { useTranslation } from "../lib/translations";
+import { FormWarningText } from "./elements/form-warning";
+
+export function CredentialSignUp(props: { noPasswordRepeat?: boolean }) {
+  const { t } = useTranslation();
+
+  const schema = yupObject({
+    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),
+    password: passwordSchema.defined().nonEmpty(t('Please enter your password')).test({
+      name: 'is-valid-password',
+      test: (value, ctx) => {
+        const error = getPasswordError(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
+      }
+    }),
+    ...(!props.noPasswordRepeat && {
+      passwordRepeat: passwordSchema.nullable().oneOf([yup.ref('password'), "", null], t('Passwords do not match')).nonEmpty(t('Please repeat your password'))
+    })
+  });
+
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const app = useStackApp();
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: yup.InferType<typeof schema>) => {
+    setLoading(true);
+    try {
+      const { email, password } = data;
+      const result = await app.signUpWithCredential({ email, password });
+      if (result.status === 'error') {
+        setError('email', { type: 'manual', message: result.error.message });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const registerPassword = register('password');
+  const registerPasswordRepeat = register('passwordRepeat');
+
+  return (
+    <form
+      className="flex flex-col items-stretch stack-scope"
+      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}
+      noValidate
+    >
+      <Label htmlFor="email" className="mb-1">{t('Email')}</Label>
+      <Input id="email" type="email" autoComplete="email" {...register('email')}/>
+      <FormWarningText text={errors.email?.message?.toString()} />
+
+      <Label htmlFor="password" className="mt-4 mb-1">{t('Password')}</Label>
+      <PasswordInput
+        id="password"
+        autoComplete="new-password"
+        {...registerPassword}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          clearErrors('password');
+          clearErrors('passwordRepeat');
+          runAsynchronously(registerPassword.onChange(e));
+        }}
+      />
+      <FormWarningText text={errors.password?.message?.toString()} />
+      {
+        !props.noPasswordRepeat && (
+          <>
+            <Label htmlFor="repeat-password" className="mt-4 mb-1">{t('Repeat Password')}</Label>
+            <PasswordInput
+              id="repeat-password"
+              {...registerPasswordRepeat}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              clearErrors('password');
+              clearErrors('passwordRepeat');
+              runAsynchronously(registerPasswordRepeat.onChange(e));
+              }}
+            />
+            <FormWarningText text={errors.passwordRepeat?.message?.toString()} />
+          </>
+        )
+      }
+
+      <Button type="submit" className="mt-6" loading={loading}>
+        {t('Sign Up')}
+      </Button>
+    </form>
+  );
+}

package/src/components/elements/form-warning.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+
+export function FormWarningText({ text }: { text?: string }) {
+  if (!text) {
+    return null;
+  }
+  return (
+    <div className="text-red-500 text-sm mt-1">
+      {text}
+    </div>
+  );
+}