@pandacss/generator 0.19.0 → 0.21.0

package/dist/index.js

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  createGenerator: () => createGenerator,
+  Generator: () => Generator,
   messages: () => messages_exports
 });
 module.exports = __toCommonJS(src_exports);
@@ -128,7 +128,7 @@ var getMessages = (ctx) => ({
   configWatch
 });
 
-// src/artifacts/index.ts
+// src/artifacts/setup-artifacts.ts
 var import_shared4 = require("@pandacss/shared");
 var import_outdent44 = __toESM(require("outdent"));
 
@@ -427,9 +427,16 @@ function generateResetCss(ctx, scope = "") {
 // src/artifacts/css/static-css.ts
 var import_core2 = require("@pandacss/core");
 var generateStaticCss = (ctx) => {
-  const { config, createSheet, utility, recipes } = ctx;
+  const { config, utility, recipes } = ctx;
   const { staticCss = {}, theme = {}, optimize = true } = config;
-  const sheet = createSheet();
+  staticCss.recipes = staticCss.recipes ?? {};
+  const recipeConfigs = Object.assign({}, theme.recipes ?? {}, theme.slotRecipes ?? {});
+  Object.entries(recipeConfigs).forEach(([name, recipe]) => {
+    if (recipe.staticCss) {
+      staticCss.recipes[name] = recipe.staticCss;
+    }
+  });
+  const sheet = ctx.createSheet();
   const fn = (0, import_core2.getStaticCss)(staticCss);
   const results = fn({
     breakpoints: Object.keys(theme.breakpoints ?? {}),
@@ -921,7 +928,7 @@ var import_outdent8 = require("outdent");
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/generated/astish.mjs.json
@@ -970,7 +977,7 @@ function generateIsValidProp(ctx) {
   let content = is_valid_prop_mjs_default.content;
   content = content.replace(
     'var userGeneratedStr = "";',
-    `var userGeneratedStr = "${(0, import_ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(new Set(ctx.properties)).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
+    `var userGeneratedStr = "${(0, import_ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
   );
   content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
   if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
@@ -1038,10 +1045,11 @@ var import_shared = require("@pandacss/shared");
 var import_javascript_stringify = require("javascript-stringify");
 var import_outdent11 = require("outdent");
 var import_ts_pattern3 = require("ts-pattern");
-function generatePattern(ctx) {
+function generatePattern(ctx, filters) {
   if (ctx.patterns.isEmpty())
     return;
-  return ctx.patterns.details.map((pattern) => {
+  const details = ctx.patterns.filterDetails(filters);
+  return details.map((pattern) => {
     const { baseName, config, dashName, upperName, styleFnName, blocklistType } = pattern;
     const { properties, transform, strict, description } = config;
     const transformFn = (0, import_javascript_stringify.stringify)({ transform }) ?? "";
@@ -1116,18 +1124,21 @@ var import_outdent12 = require("outdent");
 var import_ts_pattern4 = require("ts-pattern");
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
-function generateRecipes(ctx) {
+function generateCreateRecipe(ctx) {
   const {
+    conditions,
     recipes,
-    utility: { separator },
-    config: { prefix, hash }
+    prefix,
+    hash,
+    utility: { separator }
   } = ctx;
   if (recipes.isEmpty())
     return;
-  const createRecipeFn = {
+  return {
     name: "create-recipe",
     dts: "",
     js: import_outdent12.outdent`
+   ${ctx.file.import("finalizeConditions, sortConditions", "../css/conditions")}
    ${ctx.file.import("css", "../css/css")}
    ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
@@ -1155,9 +1166,14 @@ function generateRecipes(ctx) {
       }
 
       const recipeCss = createCss({
-        ${hash ? "hash: true," : ""}
+        ${hash.className ? "hash: true," : ""}
+        conditions: {
+          shift: sortConditions,
+          finalize: finalizeConditions,
+          breakpoints: { keys: ${JSON.stringify(conditions.breakpoints.keys)} }
+        },
         utility: {
-          ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
+          ${prefix.className ? "prefix: " + JSON.stringify(prefix.className) + "," : ""}
           transform,
         }
       })
@@ -1189,7 +1205,7 @@ function generateRecipes(ctx) {
       acc[key] = uniq(recipeA.variantMap[key], recipeB.variantMap[key])
       return acc
     }, {})
-  
+
     return Object.assign(recipeFn, {
       __recipe__: true,
       __name__: \`$\{recipeA.__name__} \${recipeB.__name__}\`,
@@ -1204,14 +1220,18 @@ function generateRecipes(ctx) {
   }
   `
   };
-  return [
-    createRecipeFn,
-    ...ctx.recipes.details.map((recipe) => {
-      const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
-      const { description, defaultVariants, compoundVariants } = config;
-      const jsCode = (0, import_ts_pattern4.match)(config).when(
-        import_core4.isSlotRecipe,
-        (config2) => import_outdent12.outdent`
+}
+function generateRecipes(ctx, filters) {
+  const { recipes } = ctx;
+  if (recipes.isEmpty())
+    return;
+  const details = ctx.recipes.filterDetails(filters);
+  return details.map((recipe) => {
+    const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
+    const { description, defaultVariants, compoundVariants } = config;
+    const jsCode = (0, import_ts_pattern4.match)(config).when(
+      import_core4.isSlotRecipe,
+      (config2) => import_outdent12.outdent`
         ${ctx.file.import("splitProps, getSlotCompoundVariant", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
@@ -1238,19 +1258,19 @@ function generateRecipes(ctx) {
           },
         })
         `
-      ).otherwise(
-        (config2) => import_outdent12.outdent`
+    ).otherwise(
+      (config2) => import_outdent12.outdent`
         ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
 
         const ${baseName}Fn = /* @__PURE__ */ createRecipe('${config2.className}', ${stringify2(
-          defaultVariants ?? {}
-        )}, ${stringify2(compoundVariants ?? [])})
+        defaultVariants ?? {}
+      )}, ${stringify2(compoundVariants ?? [])})
 
         const ${baseName}VariantMap = ${stringify2(variantKeyMap)}
-        
+
         const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
-        
+
         export const ${baseName} = /* @__PURE__ */ Object.assign(${baseName}Fn, {
           __recipe__: true,
           __name__: '${baseName}',
@@ -1265,21 +1285,21 @@ function generateRecipes(ctx) {
           },
         })
         `
-      );
-      return {
-        name: dashName,
-        js: jsCode,
-        dts: import_outdent12.outdent`
+    );
+    return {
+      name: dashName,
+      js: jsCode,
+      dts: import_outdent12.outdent`
         ${ctx.file.importType("ConditionalValue", "../types/index")}
         ${ctx.file.importType("DistributiveOmit, Pretty", "../types/system-types")}
 
         interface ${upperName}Variant {
           ${Object.keys(variantKeyMap).map((key) => {
-          const values = variantKeyMap[key];
-          if (values.every(isBooleanValue))
-            return `${key}: boolean`;
-          return `${key}: ${(0, import_shared2.unionType)(values)}`;
-        }).join("\n")}
+        const values = variantKeyMap[key];
+        if (values.every(isBooleanValue))
+          return `${key}: boolean`;
+        return `${key}: ${(0, import_shared2.unionType)(values)}`;
+      }).join("\n")}
         }
 
         type ${upperName}VariantMap = {
@@ -1302,9 +1322,8 @@ function generateRecipes(ctx) {
         ${description ? `/** ${description} */` : ""}
         export declare const ${baseName}: ${upperName}Recipe
         `
-      };
-    })
-  ];
+    };
+  });
 }
 
 // src/artifacts/js/sva.ts
@@ -1492,9 +1511,10 @@ function generatePreactJsxFactory(ctx) {
 // src/artifacts/preact-jsx/pattern.ts
 var import_outdent16 = require("outdent");
 var import_ts_pattern5 = require("ts-pattern");
-function generatePreactJsxPattern(ctx) {
+function generatePreactJsxPattern(ctx, filters) {
   const { typeName, factoryName } = ctx.jsx;
-  return ctx.patterns.details.map((pattern) => {
+  const details = ctx.patterns.filterDetails(filters);
+  return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
     const { description, jsxElement = "div" } = pattern.config;
     return {
@@ -1560,7 +1580,7 @@ interface Dict {
 }
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, P> & JsxStyleProps): JSX.Element
+  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string
 }
 
@@ -1797,9 +1817,10 @@ function generateQwikJsxFactory(ctx) {
 // src/artifacts/qwik-jsx/pattern.ts
 var import_outdent21 = require("outdent");
 var import_ts_pattern6 = require("ts-pattern");
-function generateQwikJsxPattern(ctx) {
+function generateQwikJsxPattern(ctx, filters) {
   const { typeName, factoryName } = ctx.jsx;
-  return ctx.patterns.details.map((pattern) => {
+  const details = ctx.patterns.filterDetails(filters);
+  return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
     const { description, jsxElement = "div" } = pattern.config;
     return {
@@ -2108,9 +2129,10 @@ function generateReactJsxFactory(ctx) {
 // src/artifacts/react-jsx/pattern.ts
 var import_outdent26 = require("outdent");
 var import_ts_pattern7 = require("ts-pattern");
-function generateReactJsxPattern(ctx) {
+function generateReactJsxPattern(ctx, filters) {
   const { typeName, factoryName } = ctx.jsx;
-  return ctx.patterns.details.map((pattern) => {
+  const details = ctx.patterns.filterDetails(filters);
+  return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
     const { description, jsxElement = "div" } = pattern.config;
     return {
@@ -2443,9 +2465,10 @@ function generateSolidJsxFactory(ctx) {
 // src/artifacts/solid-jsx/pattern.ts
 var import_outdent31 = require("outdent");
 var import_ts_pattern8 = require("ts-pattern");
-function generateSolidJsxPattern(ctx) {
+function generateSolidJsxPattern(ctx, filters) {
   const { typeName, factoryName } = ctx.jsx;
-  return ctx.patterns.details.map((pattern) => {
+  const details = ctx.patterns.filterDetails(filters);
+  return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
     const { description, jsxElement = "div" } = pattern.config;
     return {
@@ -2703,14 +2726,14 @@ function generateVueJsxFactory(ctx) {
             const [_htmlProps, _forwardedProps, variantProps, styleProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
             const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className)
+            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
           })
 
           const cvaClass = computed(() => {
             const [_htmlProps, _forwardedProps, variantProps, styleProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
             const cvaStyles = __cvaFn__.raw(variantProps)
-            return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className)
+            return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
           })
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -2824,9 +2847,10 @@ function generateVueJsxStringLiteralFactory(ctx) {
 
 // src/artifacts/vue-jsx/pattern.ts
 var import_outdent37 = require("outdent");
-function generateVueJsxPattern(ctx) {
+function generateVueJsxPattern(ctx, filters) {
   const { typeName, factoryName } = ctx.jsx;
-  return ctx.patterns.details.map((pattern) => {
+  const details = ctx.patterns.filterDetails(filters);
+  return details.map((pattern) => {
     const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
     const { description, jsxElement = "div" } = pattern.config;
     const propList = props.map((v) => JSON.stringify(v)).join(", ");
@@ -3025,12 +3049,10 @@ var patternMap = {
   vue: generateVueJsxPattern,
   qwik: generateQwikJsxPattern
 };
-function generateJsxPatterns(ctx) {
-  if (ctx.isTemplateLiteralSyntax)
-    return [];
-  if (ctx.patterns.isEmpty() && !ctx.jsx.framework)
+function generateJsxPatterns(ctx, filters) {
+  if (ctx.isTemplateLiteralSyntax || ctx.patterns.isEmpty() || !ctx.jsx.framework)
     return [];
-  return patternMap[ctx.jsx.framework](ctx);
+  return patternMap[ctx.jsx.framework](ctx, filters);
 }
 
 // src/artifacts/pkg-json.ts
@@ -3095,7 +3117,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -3115,7 +3137,6 @@ var selectors_d_ts_default = {
 
 // src/artifacts/types/generated.ts
 var import_ts_pattern9 = require("ts-pattern");
-var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
 function getGeneratedTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
@@ -3124,7 +3145,13 @@ function getGeneratedTypes(ctx) {
     pattern: rewriteImports(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
     parts: rewriteImports(parts_d_ts_default.content),
     composition: rewriteImports(composition_d_ts_default.content),
-    selectors: rewriteImports(selectors_d_ts_default.content),
+    selectors: rewriteImports(selectors_d_ts_default.content)
+  };
+}
+var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
+function getGeneratedSystemTypes(ctx) {
+  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
+  return {
     system: rewriteImports(
       (0, import_ts_pattern9.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
         "minimal",
@@ -3214,12 +3241,39 @@ function generatePropTypes(ctx) {
   return import_outdent41.outdent`
   ${result.join("\n")}
 
-  ${strictTokens ? `type FilterString<T> = T extends \`\${infer _}\` ? T : never;` : ""}
+  ${strictTokens ? `
+  type FilterString<T> = T extends \`\${infer _}\` ? T : never;
+  type WithArbitraryValue<T> = T | \`[\${string}]\`
+
+  type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
+    ? ConditionalValue<FilterString<PropertyTypes[T]>>
+    : never;
+
+  type CssPropertyValue<T extends string> = T extends keyof CssProperties
+    ? ConditionalValue<FilterString<CssProperties[T]>>
+    : never;
+
+  export type PropertyValue<T extends string> = WithArbitraryValue<T extends keyof PropertyTypes
+    ? PropertyTypeValue<T>
+    : T extends keyof CssProperties
+      ? CssPropertyValue<T>
+      : ConditionalValue<string | number>
+    >` : `
+
+  type PropertyTypeValue<T extends string> = T extends keyof PropertyTypes
+    ? ConditionalValue<PropertyTypes[T] | CssValue<T> | (string & {})>
+    : never;
+
+  type CssPropertyValue<T extends string> = T extends keyof CssProperties
+    ? ConditionalValue<CssProperties[T] | (string & {})>
+    : never;
+
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<${strictTokens ? "FilterString<PropertyTypes[T]>" : "PropertyTypes[T] | CssValue<T> | (string & {})"}>
+    ? PropertyTypeValue<T>
     : T extends keyof CssProperties
-    ? ConditionalValue<${strictTokens ? "FilterString<CssProperties[T]>" : "CssProperties[T] | (string & {})"}>
-    : ConditionalValue<string | number>
+      ? CssPropertyValue<T>
+      : ConditionalValue<string | number>
+  `}
   `;
 }
 
@@ -3299,16 +3353,18 @@ function generateTokenTypes(ctx) {
   return import_outdent43.outdent.string(Array.from(set).join("\n\n"));
 }
 
-// src/artifacts/index.ts
+// src/artifacts/setup-artifacts.ts
 function setupHelpers(ctx) {
   const code = generateHelpers(ctx);
   return {
+    id: "helpers",
     files: [{ file: ctx.file.ext("helpers"), code: code.js }]
   };
 }
 function setupKeyframes(ctx) {
   const code = generateKeyframeCss(ctx);
   return {
+    id: "keyframes",
     dir: ctx.paths.token,
     files: [{ file: "keyframes.css", code }]
   };
@@ -3319,6 +3375,7 @@ function setupDesignTokens(ctx) {
   const code = generateTokenJs(ctx);
   const css2 = generateTokenCss(ctx);
   return {
+    id: "design-tokens",
     dir: ctx.paths.token,
     files: [
       { file: "index.css", code: css2 },
@@ -3328,34 +3385,73 @@ function setupDesignTokens(ctx) {
     ]
   };
 }
-function setupTypes(ctx) {
-  const gen = getGeneratedTypes(ctx);
-  const conditions = generateConditions(ctx);
+function setupJsxTypes(ctx) {
+  if (!ctx.jsx.framework)
+    return;
   const jsx = generateJsxTypes(ctx);
-  const entry = generateTypesEntry(ctx, jsx != null);
   return {
+    id: "types-jsx",
+    dir: ctx.paths.types,
+    files: [{ file: ctx.file.extDts("jsx"), code: jsx.jsxType }]
+  };
+}
+function setupEntryTypes(ctx) {
+  const entry = generateTypesEntry(ctx, Boolean(ctx.jsx.framework));
+  return {
+    id: "types-entry",
+    dir: ctx.paths.types,
+    files: [
+      { file: ctx.file.extDts("global"), code: entry.global },
+      { file: ctx.file.extDts("index"), code: entry.index }
+    ]
+  };
+}
+function setupStyleTypes(ctx) {
+  return {
+    id: "types-styles",
+    dir: ctx.paths.types,
+    files: [
+      { file: ctx.file.extDts("prop-type"), code: generatePropTypes(ctx) },
+      { file: ctx.file.extDts("style-props"), code: generateStyleProps(ctx) }
+    ]
+  };
+}
+function setupConditionsTypes(ctx) {
+  const conditions = generateConditions(ctx);
+  return {
+    id: "types-conditions",
+    dir: ctx.paths.types,
+    files: [{ file: ctx.file.extDts("conditions"), code: conditions.dts }]
+  };
+}
+function setupGeneratedTypes(ctx) {
+  const gen = getGeneratedTypes(ctx);
+  return {
+    id: "types-gen",
     dir: ctx.paths.types,
     files: [
-      jsx ? { file: ctx.file.extDts("jsx"), code: jsx.jsxType } : null,
       { file: ctx.file.extDts("csstype"), code: gen.cssType },
-      { file: ctx.file.extDts("system-types"), code: gen.system },
       { file: ctx.file.extDts("selectors"), code: gen.selectors },
       { file: ctx.file.extDts("composition"), code: gen.composition },
-      { file: ctx.file.extDts("global"), code: entry.global },
       { file: ctx.file.extDts("recipe"), code: gen.recipe },
       { file: ctx.file.extDts("pattern"), code: gen.pattern },
-      { file: ctx.file.extDts("parts"), code: gen.parts },
-      { file: ctx.file.extDts("index"), code: entry.index },
-      { file: ctx.file.extDts("prop-type"), code: generatePropTypes(ctx) },
-      { file: ctx.file.extDts("style-props"), code: generateStyleProps(ctx) },
-      { file: ctx.file.extDts("conditions"), code: conditions.dts }
-    ].filter(Boolean)
+      { file: ctx.file.extDts("parts"), code: gen.parts }
+    ]
+  };
+}
+function setupGeneratedSystemTypes(ctx) {
+  const gen = getGeneratedSystemTypes(ctx);
+  return {
+    id: "types-gen-system",
+    dir: ctx.paths.types,
+    files: [{ file: ctx.file.extDts("system-types"), code: gen.system }]
   };
 }
 function setupCss(ctx) {
   const code = ctx.isTemplateLiteralSyntax ? generateStringLiteralCssFn(ctx) : generateCssFn(ctx);
   const conditions = ctx.isTemplateLiteralSyntax ? generateStringLiteralConditions(ctx) : generateConditions(ctx);
   return {
+    id: "css-fn",
     dir: ctx.paths.css,
     files: [
       { file: ctx.file.ext("conditions"), code: conditions.js },
@@ -3369,6 +3465,7 @@ function setupCva(ctx) {
     return;
   const code = generateCvaFn(ctx);
   return {
+    id: "cva",
     dir: ctx.paths.css,
     files: [
       { file: ctx.file.ext("cva"), code: code.js },
@@ -3381,6 +3478,7 @@ function setupSva(ctx) {
     return;
   const code = generateSvaFn(ctx);
   return {
+    id: "sva",
     dir: ctx.paths.css,
     files: [
       { file: ctx.file.ext("sva"), code: code.js },
@@ -3391,6 +3489,7 @@ function setupSva(ctx) {
 function setupCx(ctx) {
   const code = generateCx();
   return {
+    id: "cx",
     dir: ctx.paths.css,
     files: [
       { file: ctx.file.ext("cx"), code: code.js },
@@ -3398,79 +3497,160 @@ function setupCx(ctx) {
     ]
   };
 }
-function setupRecipes(ctx) {
-  const files = generateRecipes(ctx);
-  if (!files)
+function setupCreateRecipe(ctx) {
+  if (ctx.recipes.isEmpty())
     return;
-  const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
+  const createRecipe = generateCreateRecipe(ctx);
+  return {
+    id: "create-recipe",
+    dir: ctx.paths.recipe,
+    files: [
+      { file: ctx.file.ext(createRecipe.name), code: createRecipe.js },
+      { file: ctx.file.extDts(createRecipe.name), code: createRecipe.dts }
+    ]
+  };
+}
+function setupRecipesIndex(ctx) {
+  if (ctx.recipes.isEmpty())
+    return;
+  const fileNames = ctx.recipes.details.map((recipe) => recipe.dashName);
   const index = {
-    js: import_outdent44.default.string(indexFiles.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
-    dts: import_outdent44.default.string(indexFiles.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
+    js: import_outdent44.default.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
+    dts: import_outdent44.default.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
   };
   return {
+    id: "recipes-index",
     dir: ctx.paths.recipe,
     files: [
-      ...files.map((file) => ({ file: ctx.file.ext(file.name), code: file.js })),
-      ...files.map((file) => ({ file: ctx.file.extDts(file.name), code: file.dts })),
       { file: ctx.file.ext("index"), code: index.js },
       { file: ctx.file.extDts("index"), code: index.dts }
     ]
   };
 }
-function setupPatterns(ctx) {
-  if (ctx.isTemplateLiteralSyntax)
+function setupRecipes(ctx, filters) {
+  if (ctx.recipes.isEmpty())
     return;
-  const files = generatePattern(ctx);
+  const files = generateRecipes(ctx, filters);
   if (!files)
     return;
+  return {
+    id: "recipes",
+    dir: ctx.paths.recipe,
+    files: files.flatMap((file) => [
+      { file: ctx.file.ext(file.name), code: file.js },
+      { file: ctx.file.extDts(file.name), code: file.dts }
+    ])
+  };
+}
+function setupPatternsIndex(ctx) {
+  if (ctx.isTemplateLiteralSyntax)
+    return;
+  const fileNames = ctx.patterns.details.map((pattern) => pattern.dashName);
   const index = {
-    js: import_outdent44.default.string(files.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n")),
-    dts: import_outdent44.default.string(files.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))
+    js: import_outdent44.default.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
+    dts: import_outdent44.default.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
   };
   return {
+    id: "patterns-index",
     dir: ctx.paths.pattern,
     files: [
-      ...files.map((file) => ({ file: ctx.file.ext(file.name), code: file.js })),
-      ...files.map((file) => ({ file: ctx.file.extDts(file.name), code: file.dts })),
       { file: ctx.file.ext("index"), code: index.js },
       { file: ctx.file.extDts("index"), code: index.dts }
     ]
   };
 }
-function setupJsx(ctx) {
-  if (!ctx.jsx.framework)
+function setupPatterns(ctx, filters) {
+  if (ctx.isTemplateLiteralSyntax)
+    return;
+  const files = generatePattern(ctx, filters);
+  if (!files)
+    return;
+  return {
+    id: "patterns",
+    dir: ctx.paths.pattern,
+    files: files.flatMap((file) => [
+      { file: ctx.file.ext(file.name), code: file.js },
+      { file: ctx.file.extDts(file.name), code: file.dts }
+    ])
+  };
+}
+function setupJsxIsValidProp(ctx) {
+  if (!ctx.jsx.framework || ctx.isTemplateLiteralSyntax)
     return;
   const isValidProp = generateIsValidProp(ctx);
+  return {
+    id: "jsx-is-valid-prop",
+    dir: ctx.paths.jsx,
+    files: [
+      { file: ctx.file.ext("is-valid-prop"), code: isValidProp?.js },
+      { file: ctx.file.extDts("is-valid-prop"), code: isValidProp?.dts }
+    ]
+  };
+}
+function setupJsxFactory(ctx) {
+  if (!ctx.jsx.framework)
+    return;
   const types = generateJsxTypes(ctx);
   const factory = generateJsxFactory(ctx);
-  const patterns = generateJsxPatterns(ctx);
+  return {
+    id: "jsx-factory",
+    dir: ctx.paths.jsx,
+    files: [
+      { file: ctx.file.ext("factory"), code: factory?.js },
+      { file: ctx.file.extDts("factory"), code: types.jsxFactory }
+    ]
+  };
+}
+function setupJsxHelpers(ctx) {
+  if (!ctx.jsx.framework)
+    return;
   const helpers3 = generatedJsxHelpers(ctx);
+  return {
+    id: "jsx-helpers",
+    dir: ctx.paths.jsx,
+    files: [{ file: ctx.file.ext("factory-helper"), code: helpers3.js }]
+  };
+}
+function setupJsxPatterns(ctx, filters) {
+  if (!ctx.jsx.framework)
+    return;
+  const patterns = generateJsxPatterns(ctx, filters);
+  return {
+    id: "jsx-patterns",
+    dir: ctx.paths.jsx,
+    files: [
+      ...patterns.flatMap((file) => [
+        { file: ctx.file.ext(file.name), code: file.js },
+        { file: ctx.file.extDts(file.name), code: file.dts }
+      ])
+    ]
+  };
+}
+function setupJsxPatternsIndex(ctx) {
+  if (!ctx.jsx.framework)
+    return;
+  const isStyleProp = !ctx.isTemplateLiteralSyntax;
+  const patternNames = ctx.patterns.details.map((pattern) => pattern.dashName);
   const index = {
     js: import_outdent44.default`
   ${ctx.file.exportStar("./factory")}
-  ${isValidProp?.js ? ctx.file.exportStar("./is-valid-prop") : ""}
-  ${import_outdent44.default.string(patterns.map((file) => ctx.file.exportStar(`./${file.name}`)).join("\n"))}
+  ${isStyleProp ? ctx.file.exportStar("./is-valid-prop") : ""}
+  ${import_outdent44.default.string(patternNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n"))}
   `,
     dts: import_outdent44.default`
   ${ctx.file.exportTypeStar("./factory")}
 
-  ${isValidProp?.dts ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
+  ${isStyleProp ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
 
-  ${import_outdent44.default.string(patterns.map((file) => ctx.file.exportTypeStar(`./${file.name}`)).join("\n"))}
+  ${import_outdent44.default.string(patternNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))}
 
   ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
     `
   };
   return {
+    id: "jsx-patterns-index",
     dir: ctx.paths.jsx,
     files: [
-      ...patterns.map((file) => ({ file: ctx.file.ext(file.name), code: file.js })),
-      ...patterns.map((file) => ({ file: ctx.file.extDts(file.name), code: file.dts })),
-      { file: ctx.file.ext("is-valid-prop"), code: isValidProp?.js },
-      { file: ctx.file.extDts("is-valid-prop"), code: isValidProp?.dts },
-      { file: ctx.file.ext("factory-helper"), code: helpers3.js },
-      { file: ctx.file.ext("factory"), code: factory?.js },
-      { file: ctx.file.extDts("factory"), code: types.jsxFactory },
       { file: ctx.file.ext("index"), code: index.js },
       { file: ctx.file.extDts("index"), code: index.dts }
     ]
@@ -3492,6 +3672,7 @@ function setupCssIndex(ctx) {
   `
   };
   return {
+    id: "css-index",
     dir: ctx.paths.css,
     files: [
       { file: ctx.file.ext("index"), code: index.js },
@@ -3505,60 +3686,131 @@ function setupResetCss(ctx) {
     return;
   const scope = (0, import_shared4.isObject)(preflight) ? preflight.scope : void 0;
   const code = generateResetCss(ctx, scope);
-  return { files: [{ file: "reset.css", code }] };
+  return { id: "reset.css", files: [{ file: "reset.css", code }] };
 }
 function setupGlobalCss(ctx) {
   const code = generateGlobalCss(ctx);
-  return { files: [{ file: "global.css", code }] };
+  return { id: "global.css", files: [{ file: "global.css", code }] };
 }
 function setupStaticCss(ctx) {
   const code = generateStaticCss(ctx);
-  return { files: [{ file: "static.css", code }] };
+  return { id: "static.css", files: [{ file: "static.css", code }] };
 }
 function setupPackageJson(ctx) {
   if (!ctx.config.emitPackage)
     return;
   return {
+    id: "package.json",
     files: [{ file: "package.json", code: generatePackageJson(ctx) }]
   };
 }
-var generateArtifacts = (ctx) => () => {
-  if (ctx.config.emitTokensOnly) {
-    return [setupDesignTokens(ctx)];
-  }
-  return [
-    setupHelpers(ctx),
-    setupDesignTokens(ctx),
-    setupKeyframes(ctx),
-    setupTypes(ctx),
-    setupCva(ctx),
-    setupSva(ctx),
-    setupCx(ctx),
-    setupCss(ctx),
-    setupRecipes(ctx),
-    setupPatterns(ctx),
-    setupCssIndex(ctx),
-    setupJsx(ctx),
-    setupGlobalCss(ctx),
-    setupStaticCss(ctx),
-    setupResetCss(ctx),
-    setupPackageJson(ctx)
-  ].filter(Boolean).map((artifact) => {
+var getAffectedArtifacts = (ids) => {
+  if (!ids)
+    return;
+  const hasSpecificArtifacts = ids.some(
+    (id) => id.startsWith("recipes.") || id.startsWith("slot-recipes.") || id.startsWith("patterns.")
+  );
+  if (!hasSpecificArtifacts)
+    return;
+  return {
+    recipes: ids.filter((id) => id.startsWith("recipes.") || id.startsWith("slot-recipes.")).map((id) => id.replace("slot-recipes.", "").replace("recipes.", "")),
+    patterns: ids.filter((id) => id.startsWith("patterns.")).map((id) => id.replace("patterns.", ""))
+  };
+};
+var filterArtifactsFiles = (artifacts, filters) => {
+  const ids = filters?.ids;
+  if (!ids)
+    return artifacts;
+  const affected = filters.affecteds;
+  return artifacts.filter((artifact) => {
+    if (!artifact)
+      return false;
+    return ids.includes(artifact.id);
+  }).map((artifact) => {
     const files = artifact?.files ?? [];
-    files.forEach((file) => {
-      if (!file)
+    const filtered = files.filter((item) => {
+      if (!item)
         return;
-      if (ctx.file.isTypeFile(file.file)) {
-        file.code = `/* eslint-disable */
-${file.code}`;
+      if (!affected)
+        return true;
+      if (affected.recipes && !item.file.includes("index") && artifact?.dir?.includes("recipes")) {
+        const isAffected = affected.recipes.some((recipe) => item.file.includes(recipe));
+        if (!isAffected)
+          return;
       }
+      if (affected.patterns && !item.file.includes("index") && (artifact?.dir?.includes("patterns") || artifact?.dir?.includes("jsx"))) {
+        const isAffected = affected.patterns.some((pattern) => item.file.includes(pattern));
+        if (!isAffected)
+          return;
+      }
+      return true;
     });
-    return artifact;
+    return { ...artifact, files: filtered };
+  });
+};
+var entries = [
+  ["helpers", setupHelpers],
+  ["design-tokens", setupDesignTokens],
+  ["keyframes", setupKeyframes],
+  ["types-jsx", setupJsxTypes],
+  ["types-entry", setupEntryTypes],
+  ["types-styles", setupStyleTypes],
+  ["types-conditions", setupConditionsTypes],
+  ["types-gen", setupGeneratedTypes],
+  ["types-gen-system", setupGeneratedSystemTypes],
+  ["css-fn", setupCss],
+  ["cva", setupCva],
+  ["sva", setupSva],
+  ["cx", setupCx],
+  ["create-recipe", setupCreateRecipe],
+  ["recipes-index", setupRecipesIndex],
+  ["recipes", setupRecipes],
+  ["patterns-index", setupPatternsIndex],
+  ["patterns", setupPatterns],
+  ["jsx-is-valid-prop", setupJsxIsValidProp],
+  ["jsx-factory", setupJsxFactory],
+  ["jsx-helpers", setupJsxHelpers],
+  ["jsx-patterns", setupJsxPatterns],
+  ["jsx-patterns-index", setupJsxPatternsIndex],
+  ["css-index", setupCssIndex],
+  ["reset.css", setupResetCss],
+  ["global.css", setupGlobalCss],
+  ["static.css", setupStaticCss],
+  ["package.json", setupPackageJson]
+];
+var getMatchingArtifacts = (ctx, filters) => {
+  const ids = filters?.ids;
+  if (!ids)
+    return entries.map(([_artifactId, fn]) => fn(ctx));
+  return entries.filter(([artifactId]) => ids.includes(artifactId)).map(([_artifactId, fn]) => fn(ctx, filters));
+};
+var transformArtifact = (ctx, artifact) => {
+  const files = (artifact?.files ?? []).filter(Boolean).map((item) => {
+    if (ctx.file.isTypeFile(item.file)) {
+      return { ...item, code: `/* eslint-disable */
+${item.code}` };
+    }
+    return item;
   });
+  return { ...artifact, files };
+};
+var setupArtifacts = (ctx, ids) => {
+  const affecteds = getAffectedArtifacts(ids);
+  const artifacts = getMatchingArtifacts(ctx, { ids, affecteds });
+  const matches = filterArtifactsFiles(artifacts, { ids, affecteds });
+  return matches.map((artifact) => transformArtifact(ctx, artifact));
+};
+
+// src/artifacts/index.ts
+var generateArtifacts = (ctx, ids) => {
+  if (ctx.config.emitTokensOnly) {
+    return [setupDesignTokens(ctx)];
+  }
+  return setupArtifacts(ctx, ids);
 };
 
 // src/artifacts/css/flat-css.ts
-var generateFlattenedCss = (ctx) => (options) => {
+var generateFlattenedCss = (ctx, options) => {
   const { files, resolve } = options;
   const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
   const unresolved = [
@@ -3587,7 +3839,7 @@ var generateFlattenedCss = (ctx) => (options) => {
 // src/artifacts/css/parser-css.ts
 var import_logger2 = require("@pandacss/logger");
 var import_ts_pattern10 = require("ts-pattern");
-var generateParserCss = (ctx) => (result) => {
+var generateParserCss = (ctx, result) => {
   const { patterns, recipes } = ctx;
   const sheet = ctx.createSheet();
   result.css.forEach((css2) => {
@@ -3671,161 +3923,26 @@ var filterProps = (ctx, props) => {
   return clone;
 };
 
-// src/engines/base.ts
+// src/engines/index.ts
 var import_core5 = require("@pandacss/core");
 var import_is_valid_prop3 = require("@pandacss/is-valid-prop");
-var import_shared5 = require("@pandacss/shared");
+var import_shared7 = require("@pandacss/shared");
 var import_token_dictionary = require("@pandacss/token-dictionary");
 var import_lil_fp = require("lil-fp");
 var import_postcss3 = __toESM(require("postcss"));
-var helpers = {
-  map: import_shared5.mapObject
-};
-var getBaseEngine = (conf) => {
-  const { config } = conf;
-  const theme = config.theme ?? {};
-  const isTemplateLiteralSyntax = config.syntax === "template-literal";
-  const hash = {
-    tokens: (0, import_lil_fp.isBool)(config.hash) ? config.hash : config.hash?.cssVar,
-    className: (0, import_lil_fp.isBool)(config.hash) ? config.hash : config.hash?.className
-  };
-  const prefix = {
-    tokens: (0, import_lil_fp.isStr)(config.prefix) ? config.prefix : config.prefix?.cssVar,
-    className: (0, import_lil_fp.isStr)(config.prefix) ? config.prefix : config.prefix?.className
-  };
-  const tokens = new import_token_dictionary.TokenDictionary({
-    breakpoints: theme.breakpoints,
-    tokens: theme.tokens,
-    semanticTokens: theme.semanticTokens,
-    prefix: prefix.tokens,
-    hash: hash.tokens
-  });
-  const utility = new import_core5.Utility({
-    prefix: prefix.className,
-    tokens,
-    config: isTemplateLiteralSyntax ? {} : config.utilities,
-    separator: config.separator,
-    shorthands: config.shorthands,
-    strictTokens: config.strictTokens
-  });
-  const conditions = new import_core5.Conditions({
-    conditions: config.conditions,
-    breakpoints: config.theme?.breakpoints
-  });
-  const { textStyles, layerStyles } = theme;
-  const compositions = (0, import_shared5.compact)({
-    textStyle: textStyles,
-    layerStyle: layerStyles
-  });
-  const compositionContext = { conditions, utility };
-  (0, import_core5.assignCompositions)(compositions, compositionContext);
-  const layers = config.layers;
-  const layerNames = Object.values(layers);
-  const isValidLayerRule = (0, import_shared5.memo)((layerRule) => {
-    const names = new Set(layerRule.split(",").map((name) => name.trim()));
-    return names.size >= 5 && layerNames.every((name) => names.has(name));
-  });
-  const layerString = `@layer ${layerNames.join(", ")};`;
-  const createSheetContext = () => ({
-    root: import_postcss3.default.root(),
-    conditions,
-    utility,
-    hash: hash.className,
-    helpers,
-    layers
-  });
-  const createSheet = (options) => {
-    const sheetContext = createSheetContext();
-    return new import_core5.Stylesheet(sheetContext, {
-      content: options?.content,
-      recipes: theme?.recipes,
-      slotRecipes: theme?.slotRecipes
-    });
-  };
-  const recipeContext = createSheetContext();
-  const recipeConfigs = Object.assign({}, theme.recipes ?? {}, theme.slotRecipes ?? {});
-  const recipes = new import_core5.Recipes(recipeConfigs, recipeContext);
-  recipes.save();
-  const properties = Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]));
-  const propertyMap = new Map(properties.map((prop) => [prop, true]));
-  const isValidProperty = (0, import_shared5.memo)((key) => {
-    return propertyMap.has(key) || (0, import_is_valid_prop3.isCssProperty)(key);
-  });
-  const studio = {
-    outdir: `${config.outdir}-studio`,
-    ...conf.config.studio
-  };
-  return {
-    ...conf,
-    isTemplateLiteralSyntax,
-    studio,
-    hash,
-    prefix,
-    tokens,
-    utility,
-    properties,
-    isValidProperty,
-    recipes,
-    conditions,
-    createSheetContext,
-    createSheet,
-    // cascade layer
-    layers,
-    isValidLayerRule,
-    layerString,
-    layerNames
-  };
-};
-
-// src/engines/jsx.ts
-var import_shared6 = require("@pandacss/shared");
-var getJsxEngine = (config) => {
-  const { jsxFactory, jsxFramework, jsxStyleProps: jsxStyleProps2 } = config;
-  return {
-    factoryName: jsxFactory,
-    upperName: (0, import_shared6.capitalize)(jsxFactory),
-    typeName: `HTML${(0, import_shared6.capitalize)(jsxFactory)}Props`,
-    variantName: `${(0, import_shared6.capitalize)(jsxFactory)}VariantProps`,
-    componentName: `${(0, import_shared6.capitalize)(jsxFactory)}Component`,
-    framework: jsxFramework,
-    styleProps: jsxStyleProps2 ?? "all"
-  };
-};
-
-// src/engines/path.ts
-var getPathEngine = ({ cwd, emitPackage, outdir }) => {
-  const get = (file) => [cwd, emitPackage ? "node_modules" : void 0, outdir, file].filter(Boolean);
-  return {
-    get,
-    root: get(),
-    css: get("css"),
-    token: get("tokens"),
-    types: get("types"),
-    recipe: get("recipes"),
-    pattern: get("patterns"),
-    chunk: get("chunks"),
-    outCss: get("styles.css"),
-    jsx: get("jsx")
-  };
-};
 
 // src/engines/pattern.ts
-var import_shared7 = require("@pandacss/shared");
-var helpers2 = { map: import_shared7.mapObject };
-var getPatternEngine = (config) => {
-  const patterns = config.patterns ?? {};
-  const getNames = (name) => {
-    const upperName = (0, import_shared7.capitalize)(name);
-    return {
-      upperName,
-      baseName: name,
-      dashName: (0, import_shared7.dashCase)(name),
-      styleFnName: `get${upperName}Style`,
-      jsxName: patterns[name]?.jsxName ?? upperName
-    };
-  };
-  const details = Object.entries(patterns).map(([name, pattern]) => {
-    const names = getNames(name);
+var import_shared5 = require("@pandacss/shared");
+var helpers = { map: import_shared5.mapObject };
+var Patterns = class {
+  patterns;
+  details;
+  constructor(config) {
+    this.patterns = config.patterns ?? {};
+    this.details = Object.entries(this.patterns).map(([name, pattern]) => this.createDetail(name, pattern));
+  }
+  createDetail(name, pattern) {
+    const names = this.getNames(name);
     const jsx = (pattern.jsx ?? []).concat([names.jsxName]);
     return {
       ...names,
@@ -3833,77 +3950,334 @@ var getPatternEngine = (config) => {
       blocklistType: pattern?.blocklist ? `| '${pattern.blocklist.join("' | '")}'` : "",
       config: pattern,
       type: "pattern",
-      match: (0, import_shared7.createRegex)(jsx),
+      match: (0, import_shared5.createRegex)(jsx),
       jsx
     };
+  }
+  get keys() {
+    return Object.keys(this.patterns);
+  }
+  getConfig(name) {
+    return this.patterns[name];
+  }
+  transform(name, data) {
+    return this.patterns[name]?.transform?.(data, helpers) ?? {};
+  }
+  getNames(name) {
+    const upperName = (0, import_shared5.capitalize)(name);
+    return {
+      upperName,
+      baseName: name,
+      dashName: (0, import_shared5.dashCase)(name),
+      styleFnName: `get${upperName}Style`,
+      jsxName: this.patterns[name]?.jsxName ?? upperName
+    };
+  }
+  find = (0, import_shared5.memo)((jsxName) => {
+    return this.details.find((node) => node.match.test(jsxName))?.baseName ?? (0, import_shared5.uncapitalize)(jsxName);
   });
-  return {
-    keys: Object.keys(patterns),
-    getConfig: (name) => patterns[name],
-    transform: (name, data) => {
-      return patterns[name]?.transform?.(data, helpers2) ?? {};
-    },
-    getNames,
-    details,
-    find: (0, import_shared7.memo)((jsxName) => {
-      return details.find((node) => node.match.test(jsxName))?.baseName ?? (0, import_shared7.uncapitalize)(jsxName);
-    }),
-    filter: (0, import_shared7.memo)((jsxName) => {
-      return details.filter((node) => node.match.test(jsxName));
-    }),
-    isEmpty: () => Object.keys(patterns).length === 0
-  };
+  filter = (0, import_shared5.memo)((jsxName) => {
+    return this.details.filter((node) => node.match.test(jsxName));
+  });
+  isEmpty() {
+    return this.keys.length === 0;
+  }
+  saveOne(name, pattern) {
+    this.patterns[name] = pattern;
+    const detailIndex = this.details.findIndex((detail) => detail.baseName === name);
+    const updated = this.createDetail(name, pattern);
+    if (detailIndex > -1) {
+      this.details[detailIndex] = updated;
+    } else {
+      this.details.push(updated);
+    }
+  }
+  remove(name) {
+    delete this.patterns[name];
+    const detailIndex = this.details.findIndex((detail) => detail.baseName === name);
+    if (detailIndex > -1) {
+      this.details.splice(detailIndex, 1);
+    }
+  }
+  filterDetails(filters) {
+    const patternDiffs = filters?.affecteds?.patterns;
+    return patternDiffs ? this.details.filter((pattern) => patternDiffs.includes(pattern.dashName)) : this.details;
+  }
+};
+
+// src/engines/jsx.ts
+var import_shared6 = require("@pandacss/shared");
+var JsxEngine = class {
+  constructor(config) {
+    this.config = config;
+  }
+  get jsxFactory() {
+    return this.config.jsxFactory ?? "";
+  }
+  get styleProps() {
+    return this.config.jsxStyleProps ?? "all";
+  }
+  get framework() {
+    return this.config.jsxFramework;
+  }
+  get factoryName() {
+    return this.jsxFactory;
+  }
+  get upperName() {
+    return (0, import_shared6.capitalize)(this.jsxFactory);
+  }
+  get typeName() {
+    return `HTML${(0, import_shared6.capitalize)(this.jsxFactory)}Props`;
+  }
+  get variantName() {
+    return `${(0, import_shared6.capitalize)(this.jsxFactory)}VariantProps`;
+  }
+  get componentName() {
+    return `${(0, import_shared6.capitalize)(this.jsxFactory)}Component`;
+  }
+};
+
+// src/engines/path.ts
+var PathEngine = class {
+  constructor(config) {
+    this.config = config;
+  }
+  get cwd() {
+    return this.config.cwd;
+  }
+  get emitPackage() {
+    return this.config.emitPackage || false;
+  }
+  get outdir() {
+    return this.config.outdir;
+  }
+  getFilePath(file) {
+    return [this.cwd, this.emitPackage ? "node_modules" : void 0, this.outdir, file].filter(Boolean);
+  }
+  get root() {
+    return this.getFilePath();
+  }
+  get css() {
+    return this.getFilePath("css");
+  }
+  get token() {
+    return this.getFilePath("tokens");
+  }
+  get types() {
+    return this.getFilePath("types");
+  }
+  get recipe() {
+    return this.getFilePath("recipes");
+  }
+  get pattern() {
+    return this.getFilePath("patterns");
+  }
+  get chunk() {
+    return this.getFilePath("chunks");
+  }
+  get outCss() {
+    return this.getFilePath("styles.css");
+  }
+  get jsx() {
+    return this.getFilePath("jsx");
+  }
 };
 
 // src/engines/file.ts
-var getFileEngine = (config) => {
-  const { forceConsistentTypeExtension, outExtension } = config;
-  return {
-    ext(file) {
-      return `${file}.${outExtension}`;
-    },
-    extDts(file) {
-      const dts = outExtension === "mjs" && forceConsistentTypeExtension ? "d.mts" : "d.ts";
-      return `${file}.${dts}`;
-    },
-    __extDts(file) {
-      return forceConsistentTypeExtension ? this.extDts(file) : file;
-    },
-    import(mod, file) {
-      return `import { ${mod} } from '${this.ext(file)}';`;
-    },
-    importType(mod, file) {
-      return `import type { ${mod} } from '${this.__extDts(file)}';`;
-    },
-    exportType(mod, file) {
-      return `export type { ${mod} } from '${this.__extDts(file)}';`;
-    },
-    exportStar(file) {
-      return `export * from '${this.ext(file)}';`;
-    },
-    exportTypeStar(file) {
-      return `export * from '${this.__extDts(file)}';`;
-    },
-    isTypeFile(file) {
-      return file.endsWith(".d.ts") || file.endsWith(".d.mts");
-    }
-  };
+var FileEngine = class {
+  constructor(config) {
+    this.config = config;
+  }
+  get forceConsistentTypeExtension() {
+    return this.config.forceConsistentTypeExtension || false;
+  }
+  get outExtension() {
+    return this.config.outExtension;
+  }
+  ext(file) {
+    return `${file}.${this.outExtension}`;
+  }
+  extDts(file) {
+    const dts = this.outExtension === "mjs" && this.forceConsistentTypeExtension ? "d.mts" : "d.ts";
+    return `${file}.${dts}`;
+  }
+  __extDts(file) {
+    return this.forceConsistentTypeExtension ? this.extDts(file) : file;
+  }
+  import(mod, file) {
+    return `import { ${mod} } from '${this.ext(file)}';`;
+  }
+  importType(mod, file) {
+    return `import type { ${mod} } from '${this.__extDts(file)}';`;
+  }
+  exportType(mod, file) {
+    return `export type { ${mod} } from '${this.__extDts(file)}';`;
+  }
+  exportStar(file) {
+    return `export * from '${this.ext(file)}';`;
+  }
+  exportTypeStar(file) {
+    return `export * from '${this.__extDts(file)}';`;
+  }
+  isTypeFile(file) {
+    return file.endsWith(".d.ts") || file.endsWith(".d.mts");
+  }
 };
 
 // src/engines/index.ts
-var getEngine = (conf) => {
-  const { config } = conf;
-  return {
-    ...getBaseEngine(conf),
-    patterns: getPatternEngine(config),
-    jsx: getJsxEngine(config),
-    paths: getPathEngine(config),
-    file: getFileEngine(config)
-  };
+var helpers2 = { map: import_shared7.mapObject };
+var defaults = (config) => ({
+  cssVarRoot: ":where(:root, :host)",
+  jsxFactory: "styled",
+  jsxStyleProps: "all",
+  outExtension: "mjs",
+  shorthands: true,
+  syntax: "object-literal",
+  ...config,
+  layers: {
+    reset: "reset",
+    base: "base",
+    tokens: "tokens",
+    recipes: "recipes",
+    utilities: "utilities",
+    ...config.layers
+  }
+});
+var Context = class {
+  constructor(conf) {
+    this.conf = conf;
+    const config = defaults(conf.config);
+    const theme = config.theme ?? {};
+    conf.config = config;
+    this.tokens = this.createTokenDictionary(theme);
+    this.utility = this.createUtility(config);
+    this.conditions = this.createConditions(config);
+    this.patterns = new Patterns(config);
+    this.jsx = new JsxEngine(config);
+    this.paths = new PathEngine(config);
+    this.file = new FileEngine(config);
+    this.studio = { outdir: `${config.outdir}-studio`, ...conf.config.studio };
+    this.setupCompositions(theme);
+    this.setupLayers(config.layers);
+    this.setupProperties();
+    this.recipes = this.createRecipes(theme, this.createSheetContext());
+  }
+  studio;
+  // Engines
+  tokens;
+  utility;
+  recipes;
+  conditions;
+  patterns;
+  jsx;
+  paths;
+  file;
+  // Props
+  properties;
+  isValidProperty;
+  // Layers
+  layers;
+  isValidLayerRule;
+  layerString;
+  layerNames;
+  get config() {
+    return this.conf.config;
+  }
+  get hooks() {
+    return this.conf.hooks;
+  }
+  get isTemplateLiteralSyntax() {
+    return this.config.syntax === "template-literal";
+  }
+  get hash() {
+    return {
+      tokens: (0, import_lil_fp.isBool)(this.config.hash) ? this.config.hash : this.config.hash?.cssVar,
+      className: (0, import_lil_fp.isBool)(this.config.hash) ? this.config.hash : this.config.hash?.className
+    };
+  }
+  get prefix() {
+    return {
+      tokens: (0, import_lil_fp.isStr)(this.config.prefix) ? this.config.prefix : this.config.prefix?.cssVar,
+      className: (0, import_lil_fp.isStr)(this.config.prefix) ? this.config.prefix : this.config.prefix?.className
+    };
+  }
+  createTokenDictionary(theme) {
+    return new import_token_dictionary.TokenDictionary({
+      breakpoints: theme.breakpoints,
+      tokens: theme.tokens,
+      semanticTokens: theme.semanticTokens,
+      prefix: this.prefix.tokens,
+      hash: this.hash.tokens
+    });
+  }
+  createUtility(config) {
+    return new import_core5.Utility({
+      prefix: this.prefix.className,
+      tokens: this.tokens,
+      config: this.isTemplateLiteralSyntax ? {} : config.utilities,
+      separator: config.separator,
+      shorthands: config.shorthands,
+      strictTokens: config.strictTokens
+    });
+  }
+  createConditions(config) {
+    return new import_core5.Conditions({
+      conditions: config.conditions,
+      breakpoints: config.theme?.breakpoints
+    });
+  }
+  setupCompositions(theme) {
+    const { textStyles, layerStyles } = theme;
+    const compositions = (0, import_shared7.compact)({ textStyle: textStyles, layerStyle: layerStyles });
+    (0, import_core5.assignCompositions)(compositions, { conditions: this.conditions, utility: this.utility });
+  }
+  setupLayers(layers) {
+    this.layers = layers;
+    this.layerNames = Object.values(layers);
+    this.isValidLayerRule = (0, import_shared7.memo)((layerRule) => {
+      const names = new Set(layerRule.split(",").map((name) => name.trim()));
+      return names.size >= 5 && this.layerNames.every((name) => names.has(name));
+    });
+    this.layerString = `@layer ${this.layerNames.join(", ")};`;
+  }
+  setupProperties() {
+    this.properties = /* @__PURE__ */ new Set(["css", ...this.utility.keys(), ...this.conditions.keys()]);
+    this.isValidProperty = (0, import_shared7.memo)((key) => this.properties.has(key) || (0, import_is_valid_prop3.isCssProperty)(key));
+  }
+  createSheetContext() {
+    return {
+      root: import_postcss3.default.root(),
+      conditions: this.conditions,
+      utility: this.utility,
+      hash: this.hash.className,
+      layers: this.layers,
+      helpers: helpers2
+    };
+  }
+  createSheet(options) {
+    const sheetContext = this.createSheetContext();
+    return new import_core5.Stylesheet(sheetContext, {
+      content: options?.content,
+      recipes: this.config.theme?.recipes,
+      slotRecipes: this.config.theme?.slotRecipes
+    });
+  }
+  createRecipes(theme, context) {
+    const recipeConfigs = Object.assign({}, theme.recipes ?? {}, theme.slotRecipes ?? {});
+    return new import_core5.Recipes(recipeConfigs, context);
+  }
 };
 
 // src/parser-options.ts
 var getImportMap = (outdir, configImportMap) => {
+  if (typeof configImportMap === "string") {
+    return {
+      css: [configImportMap, "css"],
+      recipe: [configImportMap, "recipes"],
+      pattern: [configImportMap, "patterns"],
+      jsx: [configImportMap, "jsx"]
+    };
+  }
   const { css: css2, recipes, patterns, jsx } = configImportMap ?? {};
   return {
     css: css2 ? [css2] : [outdir, "css"],
@@ -3913,7 +4287,8 @@ var getImportMap = (outdir, configImportMap) => {
   };
 };
 var getParserOptions = (ctx) => {
-  const { config, jsx, isValidProperty, patterns, recipes, tsconfig, tsOptions } = ctx;
+  const { config, jsx, isValidProperty, patterns, recipes } = ctx;
+  const { tsconfig, tsOptions } = ctx.conf;
   const compilerOptions = tsconfig?.compilerOptions ?? {};
   const baseUrl = compilerOptions.baseUrl ?? "";
   const cwd = config.cwd;
@@ -3937,48 +4312,41 @@ var getParserOptions = (ctx) => {
 };
 
 // src/generator.ts
-var defaults = (conf) => ({
-  ...conf,
-  config: {
-    cssVarRoot: ":where(:root, :host)",
-    jsxFactory: "styled",
-    jsxStyleProps: "all",
-    outExtension: "mjs",
-    shorthands: true,
-    syntax: "object-literal",
-    ...conf.config,
-    layers: {
-      reset: "reset",
-      base: "base",
-      tokens: "tokens",
-      recipes: "recipes",
-      utilities: "utilities",
-      ...conf.config.layers
-    }
+var Generator = class extends Context {
+  messages;
+  parserOptions;
+  constructor(conf) {
+    super(conf);
+    this.parserOptions = getParserOptions(this);
+    this.messages = getMessages(this);
+  }
+  getArtifacts(ids) {
+    return generateArtifacts(this, ids);
+  }
+  getStaticCss() {
+    return generateStaticCss(this);
+  }
+  getResetCss() {
+    return generateResetCss(this);
+  }
+  getTokenCss() {
+    return generateTokenCss(this);
+  }
+  getKeyframeCss() {
+    return generateKeyframeCss(this);
+  }
+  getGlobalCss() {
+    return generateGlobalCss(this);
+  }
+  getCss(options) {
+    return generateFlattenedCss(this, options);
+  }
+  getParserCss(result) {
+    return generateParserCss(this, result);
   }
-});
-var createGenerator = (conf) => {
-  const ctx = getEngine(defaults(conf));
-  const parserOptions = getParserOptions(ctx);
-  return {
-    ...ctx,
-    getArtifacts: generateArtifacts(ctx),
-    //
-    getStaticCss: generateStaticCss,
-    getResetCss: generateResetCss,
-    getTokenCss: generateTokenCss,
-    getKeyframeCss: generateKeyframeCss,
-    getGlobalCss: generateGlobalCss,
-    //
-    getCss: generateFlattenedCss(ctx),
-    getParserCss: generateParserCss(ctx),
-    //
-    messages: getMessages(ctx),
-    parserOptions
-  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createGenerator,
+  Generator,
   messages
 });