From a104169551ee2467e2993dc7598004661e986590 Mon Sep 17 00:00:00 2001
From: SrJuggernaut <jugger@srjuggernaut.dev>
Date: Mon, 9 Feb 2026 13:43:50 -0600
Subject: [PATCH] feat: upgrade srjuggernaut-panda-preset and centralize theme
 config

---
 bun.lock                       |  4 ++--
 package.json                   |  2 +-
 panda.config.ts                | 11 +++--------
 src/components/ui/button.astro | 22 ++++++++++++++++++++++
 src/styles/container.ts        | 13 +++++++++++++
 src/styles/theme.ts            | 19 +++++++++++++++++++
 src/types/utilities.ts         |  5 +++++
 7 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ui/button.astro
 create mode 100644 src/styles/container.ts
 create mode 100644 src/styles/theme.ts
 create mode 100644 src/types/utilities.ts

diff --git a/bun.lock b/bun.lock
index 280f800..1ea380d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,7 +6,7 @@
       "name": "srjuggernaut_dev",
       "dependencies": {
         "@fontsource-variable/roboto": "^5.2.9",
-        "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.16",
+        "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.17",
         "astro": "^5.17.1",
       },
       "devDependencies": {
@@ -327,7 +327,7 @@
 
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
 
-    "@srjuggernaut-dev/srjuggernaut-panda-preset": ["@srjuggernaut-dev/srjuggernaut-panda-preset@0.0.16", "https://git.srjuggernaut.dev/api/packages/SrJuggernaut/npm/%40srjuggernaut-dev%2Fsrjuggernaut-panda-preset/-/0.0.16/srjuggernaut-panda-preset-0.0.16.tgz", { "peerDependencies": { "@pandacss/dev": "^1.4.3", "@radix-ui/colors": "3.0.0" } }, "sha512-QtBCBFf2PGfQPTfoNiHQmtNoeLoZil4kOs5/yaUJokYEXrIPOhesgGjKh18sNc/EsQALqpN6X74WYnDAnZjfkw=="],
+    "@srjuggernaut-dev/srjuggernaut-panda-preset": ["@srjuggernaut-dev/srjuggernaut-panda-preset@0.0.17", "https://git.srjuggernaut.dev/api/packages/SrJuggernaut/npm/%40srjuggernaut-dev%2Fsrjuggernaut-panda-preset/-/0.0.17/srjuggernaut-panda-preset-0.0.17.tgz", { "peerDependencies": { "@pandacss/dev": "^1.4.3", "@radix-ui/colors": "3.0.0" } }, "sha512-HCqXwcyZ1RLt3qeXxqT/DtqxlXKwVP5RaXivwc3HDNL0Qq1rSGzt+OAVtpFL/0pHo88BplccNieBnlhdo2XoQQ=="],
 
     "@ts-morph/common": ["@ts-morph/common@0.28.1", "", { "dependencies": { "minimatch": "^10.0.1", "path-browserify": "^1.0.1", "tinyglobby": "^0.2.14" } }, "sha512-W74iWf7ILp1ZKNYXY5qbddNaml7e9Sedv5lvU1V8lftlitkc9Pq1A+jlH23ltDgWYeZFFEqGCD1Ies9hqu3O+g=="],
 
diff --git a/package.json b/package.json
index bae3215..5517486 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@fontsource-variable/roboto": "^5.2.9",
-    "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.16",
+    "@srjuggernaut-dev/srjuggernaut-panda-preset": "^0.0.17",
     "astro": "^5.17.1"
   },
   "devDependencies": {
diff --git a/panda.config.ts b/panda.config.ts
index efc28b5..b1a0c60 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -1,14 +1,9 @@
 import { defineConfig } from '@pandacss/dev'
 import srJuggernautPandaPreset from '@srjuggernaut-dev/srjuggernaut-panda-preset'
+import themeConfig from '@/styles/theme'
+
 export default defineConfig({
-  presets: [
-    srJuggernautPandaPreset({
-      neutral: 'gray',
-      colorVariation: { dark: true, alpha: false, p3: false },
-      includeColors: ['teal', 'gray'],
-      semanticColors: { primary: 'teal' }
-    })
-  ],
+  presets: [srJuggernautPandaPreset(themeConfig)],
   preflight: true,
   include: ['./src/**/*.{ts,tsx,js,jsx,astro}'],
   exclude: [],
diff --git a/src/components/ui/button.astro b/src/components/ui/button.astro
new file mode 100644
index 0000000..79c8ba4
--- /dev/null
+++ b/src/components/ui/button.astro
@@ -0,0 +1,22 @@
+---
+import { cx } from '@styled-system/css'
+import {
+  type ButtonVariantProps,
+  button as buttonRecipe
+} from '@styled-system/recipes/button'
+import type { HTMLAttributes } from 'astro/types'
+import type { MergeOmitting } from '@/types/utilities'
+
+type ButtonProps = MergeOmitting<HTMLAttributes<'button'>, ButtonVariantProps>
+
+export type Props = ButtonProps
+
+const { class: className, ...props } = Astro.props
+
+const [buttonRecipeArgs, ButtonProps] = buttonRecipe.splitVariantProps(props)
+const buttonClass = buttonRecipe(buttonRecipeArgs)
+---
+
+<button {...ButtonProps} class={cx(buttonClass, className)}>
+  <slot />
+</button>
diff --git a/src/styles/container.ts b/src/styles/container.ts
new file mode 100644
index 0000000..bce8192
--- /dev/null
+++ b/src/styles/container.ts
@@ -0,0 +1,13 @@
+import { css } from '@styled-system/css'
+
+export const containerClass = css({
+  width: '100%',
+  marginInline: 'auto',
+  maxWidth: {
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
new file mode 100644
index 0000000..685c692
--- /dev/null
+++ b/src/styles/theme.ts
@@ -0,0 +1,19 @@
+import type { ThemeConfig } from '@srjuggernaut-dev/srjuggernaut-panda-preset'
+
+export const breakpoints = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  '2xl': 1400
+} satisfies ThemeConfig['breakpoints']
+
+export const themeConfig: ThemeConfig = {
+  neutral: 'gray',
+  colorVariation: { dark: true, alpha: false, p3: false },
+  includeColors: ['teal', 'gray'],
+  semanticColors: { primary: 'teal' },
+  breakpoints
+}
+
+export default themeConfig
diff --git a/src/types/utilities.ts b/src/types/utilities.ts
new file mode 100644
index 0000000..0ac1a95
--- /dev/null
+++ b/src/types/utilities.ts
@@ -0,0 +1,5 @@
+export type MergeOmitting<ReplaceableType, ReplacerType> = Omit<
+  ReplaceableType,
+  keyof ReplacerType
+> &
+  ReplacerType