chore: infer node version from .node-version + use real panda types

- Replace hardcoded `node-version: "22"` with `node-version-file: ".node-version"`
  in all four GitHub Actions workflows
- Replace hand-rolled Panda type stubs with `definePreset` and `PropertyConfig`
  from `@pandacss/dev`
- Add `@pandacss/dev` as a devDependency for build-time type checking

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dogmar

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: voidzero-dev/setup-vp@v1
         with:
-          node-version: "22"
+          node-version-file: ".node-version"
           cache: true
 
       - run: vp install

.github/workflows/deploy-site.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: voidzero-dev/setup-vp@v1
         with:
-          node-version: "22"
+          node-version-file: ".node-version"
           cache: true
 
       - run: vp install

.github/workflows/sync-readme.yml

@@ -26,7 +26,7 @@ jobs:
 
       - uses: voidzero-dev/setup-vp@v1
         with:
-          node-version: "22"
+          node-version-file: ".node-version"
           cache: true
 
       - run: vp install

.github/workflows/sync-stylex.yml

@@ -24,7 +24,7 @@ jobs:
 
       - uses: voidzero-dev/setup-vp@v1
         with:
-          node-version: "22"
+          node-version-file: ".node-version"
           cache: true
 
       - run: vp install

package/package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/preset-typescript": "^7.28.0",
+    "@pandacss/dev": "^1.11.0",
     "@stylexjs/babel-plugin": "^0.18.3",
     "@stylexjs/stylex": "^0.18.3",
     "@tailwindcss/vite": "^4.2.2",

package/src/panda.test.ts

@@ -10,13 +10,13 @@ describe("panda preset shape", () => {
   });
 
   it("registers the squircleSupported condition", () => {
-    expect(preset.conditions.extend["squircleSupported"]).toBe(
+    expect(preset.conditions!.extend!["squircleSupported"]).toBe(
       "@supports (corner-shape: superellipse(2))",
     );
   });
 
   it("registers a utility for every CAMEL_VARIANTS entry plus squircleAmount", () => {
-    const keys = Object.keys(preset.utilities.extend).sort();
+    const keys = Object.keys(preset.utilities!.extend!).sort();
     const expected = [
       ...CAMEL_VARIANTS.map((v) => v.property),
       "squircleAmount",
@@ -26,15 +26,15 @@ describe("panda preset shape", () => {
 
   it("uses Panda's built-in `radii` token category for radius utilities", () => {
     for (const variant of CAMEL_VARIANTS) {
-      const u = preset.utilities.extend[variant.property];
+      const u = preset.utilities!.extend![variant.property];
       if (!u) throw new Error(`missing utility for ${variant.property}`);
       expect(u.values).toBe("radii");
       expect(u.shorthand).toBe(variant.shorthand);
     }
   });
 
   it("squircleAmount accepts numeric values via shorthand squircleAmt", () => {
-    const u = preset.utilities.extend["squircleAmount"]!;
+    const u = preset.utilities!.extend!["squircleAmount"]!;
     expect(u.shorthand).toBe("squircleAmt");
     expect(u.values).toEqual({ type: "number" });
   });
@@ -43,11 +43,13 @@ describe("panda preset shape", () => {
 describe("panda preset transform output", () => {
   const preset = squirclePandaPreset();
   const radiusToken = "var(--radii-md)"; // Panda passes the resolved CSS variable string
+  const mockToken = Object.assign(() => radiusToken, { raw: () => undefined }) as any;
 
   it("squircleRadius (all corners) emits camelCase keys with @supports block", () => {
-    const out = preset.utilities.extend["squircleRadius"]!.transform!(radiusToken, {
-      token: () => radiusToken,
+    const out = preset.utilities!.extend!["squircleRadius"]!.transform!(radiusToken, {
+      token: mockToken,
       raw: "md",
+      utils: { colorMix: () => ({ invalid: true, value: "" }) },
     });
     expect(out).toMatchInlineSnapshot(`
       {
@@ -62,9 +64,10 @@ describe("panda preset transform output", () => {
   });
 
   it("squircleTopLeftRadius (single corner) inlines calc without --squircle-r", () => {
-    const out = preset.utilities.extend["squircleTopLeftRadius"]!.transform!(radiusToken, {
-      token: () => radiusToken,
+    const out = preset.utilities!.extend!["squircleTopLeftRadius"]!.transform!(radiusToken, {
+      token: mockToken,
       raw: "md",
+      utils: { colorMix: () => ({ invalid: true, value: "" }) },
     });
     expect(out).toMatchInlineSnapshot(`
       {
@@ -78,9 +81,10 @@ describe("panda preset transform output", () => {
   });
 
   it("squircleTopRadius (multi-prop side) shares --squircle-r across both corners", () => {
-    const out = preset.utilities.extend["squircleTopRadius"]!.transform!(radiusToken, {
-      token: () => radiusToken,
+    const out = preset.utilities!.extend!["squircleTopRadius"]!.transform!(radiusToken, {
+      token: mockToken,
       raw: "md",
+      utils: { colorMix: () => ({ invalid: true, value: "" }) },
     });
     expect(out).toMatchInlineSnapshot(`
       {
@@ -97,9 +101,10 @@ describe("panda preset transform output", () => {
   });
 
   it("squircleAmount sets the variable and gates corner-shape", () => {
-    const out = preset.utilities.extend["squircleAmount"]!.transform!("3", {
-      token: () => "3",
+    const out = preset.utilities!.extend!["squircleAmount"]!.transform!("3", {
+      token: mockToken,
       raw: "3",
+      utils: { colorMix: () => ({ invalid: true, value: "" }) },
     });
     expect(out).toMatchInlineSnapshot(`
       {
@@ -113,61 +118,46 @@ describe("panda preset transform output", () => {
 });
 
 describe("panda preset options", () => {
+  const mockToken = Object.assign(() => "1rem", { raw: () => undefined }) as any;
+  const mockArgs = (raw: string) => ({ token: mockToken, raw, utils: { colorMix: () => ({ invalid: true, value: "" }) } });
+
   it("custom amtVar lands in every place the default --squircle-amt does", () => {
     const preset = squirclePandaPreset({ amtVar: "--my-amt" });
 
-    // 1. radius transform — @supports calc references the custom var, and
-    //    cornerShape uses it as the superellipse argument.
-    const radiusOut = preset.utilities.extend["squircleRadius"]!.transform!("1rem", {
-      token: () => "1rem",
-      raw: "1rem",
-    }) as Record<string, unknown>;
+    const radiusOut = preset.utilities!.extend!["squircleRadius"]!.transform!("1rem", mockArgs("1rem")) as Record<string, unknown>;
     const radiusSupports = radiusOut[
       "@supports (corner-shape: superellipse(2))"
     ] as Record<string, string>;
     expect(radiusSupports["--squircle-r"]).toContain("var(--my-amt, 2)");
     expect(radiusSupports["cornerShape"]).toBe("superellipse(var(--my-amt, 2))");
 
-    // 2. squircleAmount transform — writes the custom var and the @supports
-    //    block reads it back.
-    const amtOut = preset.utilities.extend["squircleAmount"]!.transform!("3", {
-      token: () => "3",
-      raw: "3",
-    }) as Record<string, unknown>;
+    const amtOut = preset.utilities!.extend!["squircleAmount"]!.transform!("3", mockArgs("3")) as Record<string, unknown>;
     expect(amtOut["--my-amt"]).toBe("3");
     const amtSupports = amtOut[
       "@supports (corner-shape: superellipse(2))"
     ] as Record<string, string>;
     expect(amtSupports["cornerShape"]).toBe("superellipse(var(--my-amt))");
 
-    // 3. The default name does not appear anywhere when overridden.
     const allOutput = JSON.stringify({ radiusOut, amtOut });
     expect(allOutput).not.toContain("--squircle-amt");
   });
 
   it("custom rVar threads through multi-prop side transforms", () => {
     const preset = squirclePandaPreset({ rVar: "--my-r" });
-    const out = preset.utilities.extend["squircleTopRadius"]!.transform!("1rem", {
-      token: () => "1rem",
-      raw: "1rem",
-    }) as Record<string, unknown>;
+    const out = preset.utilities!.extend!["squircleTopRadius"]!.transform!("1rem", mockArgs("1rem")) as Record<string, unknown>;
     const supports = out["@supports (corner-shape: superellipse(2))"] as Record<
       string,
       string
     >;
     expect(supports["--my-r"]).toContain("calc(1rem");
     expect(supports["borderTopLeftRadius"]).toBe("var(--my-r)");
     expect(supports["borderTopRightRadius"]).toBe("var(--my-r)");
-    // And the default --squircle-r is gone.
     expect(JSON.stringify(out)).not.toContain("--squircle-r");
   });
 
   it("amtVar and rVar can both be overridden together", () => {
     const preset = squirclePandaPreset({ amtVar: "--a", rVar: "--r" });
-    const out = preset.utilities.extend["squircleRadius"]!.transform!("1rem", {
-      token: () => "1rem",
-      raw: "1rem",
-    }) as Record<string, unknown>;
+    const out = preset.utilities!.extend!["squircleRadius"]!.transform!("1rem", mockArgs("1rem")) as Record<string, unknown>;
     const supports = out["@supports (corner-shape: superellipse(2))"] as Record<
       string,
       string

package/src/panda.ts

@@ -1,3 +1,4 @@
+import { definePreset, type PropertyConfig } from "@pandacss/dev";
 import {
   CAMEL_VARIANTS,
   DEFAULT_AMOUNT_VAR_NAME,
@@ -6,34 +7,13 @@ import {
   variantEntries,
 } from "./variants";
 
-/**
- * Panda CSS utility entry shape (subset). We do not depend on `@pandacss/dev`
- * at runtime — the preset is a plain object literal and the consumer's Panda
- * install loads it. Typing the public surface manually keeps `@pandacss/dev`
- * an *optional* peer dependency and avoids versioning entanglement.
- */
-type PandaUtility = {
-  shorthand?: string | string[];
-  values?: string | string[] | Record<string, string> | { type: string };
-  transform?: (
-    value: string,
-    helpers: { token: (path: string) => string; raw: string },
-  ) => Record<string, unknown>;
-};
-
 export interface SquirclePandaPresetOptions {
   /** CSS custom property name for the superellipse amount (default: "--squircle-amt"). */
   amtVar?: string;
   /** CSS custom property name for the intermediate corrected radius (default: "--squircle-r"). */
   rVar?: string;
 }
 
-export interface SquirclePandaPreset {
-  name: string;
-  utilities: { extend: Record<string, PandaUtility> };
-  conditions: { extend: Record<string, string> };
-}
-
 /**
  * Build the Panda preset object. Pass directly to `presets:` in `panda.config.ts`:
  *
@@ -53,11 +33,11 @@ export interface SquirclePandaPreset {
  */
 export function squirclePandaPreset(
   options: SquirclePandaPresetOptions = {},
-): SquirclePandaPreset {
+) {
   const amtVar = options.amtVar ?? DEFAULT_AMOUNT_VAR_NAME;
   const rVar = options.rVar ?? "--squircle-r";
 
-  const utilities: Record<string, PandaUtility> = {};
+  const utilities: Record<string, PropertyConfig> = {};
 
   const variantBySuffix = new Map(variantEntries());
 
@@ -68,34 +48,31 @@ export function squirclePandaPreset(
     utilities[variant.property] = {
       shorthand: variant.shorthand,
       values: "radii",
-      transform: (value: string) =>
-        squircleCssObj(props, value, { amtVar, rVar, case: "camel" }) as Record<
-          string,
-          unknown
-        >,
+      transform: (value) =>
+        squircleCssObj(props, value, { amtVar, rVar, case: "camel" }) as any,
     };
   }
 
   utilities["squircleAmount"] = {
     shorthand: "squircleAmt",
     values: { type: "number" },
-    transform: (value: string) => ({
+    transform: (value) => ({
       [amtVar]: value,
       [SUPPORTS_RULE]: {
         cornerShape: `superellipse(var(${amtVar}))`,
       },
     }),
   };
 
-  return {
+  return definePreset({
     name: "@klinking/squircle",
     utilities: { extend: utilities },
     conditions: {
       extend: {
         squircleSupported: SUPPORTS_RULE,
       },
     },
-  };
+  });
 }
 
 export default squirclePandaPreset;