meno-core 1.0.53 → 1.0.54

package/dist/chunks/{chunk-JGWFTO6P.js → chunk-7HWQUVTU.js}

@@ -1,7 +1,6 @@
 import {
   DEFAULT_BREAKPOINTS,
   DEFAULT_FLUID_RANGE,
-  DEFAULT_I18N_CONFIG,
   SCALABLE_CSS_PROPERTIES,
   applyRemConversion,
   buildFluidClampWithExplicitMin,
@@ -11,21 +10,24 @@ import {
   getBreakpointValues,
   getScaleMultiplier,
   getSmallestBreakpointName,
-  isI18nValue,
   parseValue,
-  resolveI18nInProps,
-  resolveI18nValue,
   scalePropertyValue,
   shouldConvertProperty
-} from "./chunk-AZQYF6KE.js";
+} from "./chunk-I2WEGYA7.js";
+import {
+  DEFAULT_I18N_CONFIG,
+  isI18nValue,
+  resolveI18nInProps,
+  resolveI18nValue
+} from "./chunk-3XER4E5W.js";
 import {
   isTiptapDocument,
   tiptapToHtml
-} from "./chunk-UB44F4Z2.js";
+} from "./chunk-NVRBTSQG.js";
 import {
   NODE_TYPE,
   init_constants
-} from "./chunk-YBLHKYFF.js";
+} from "./chunk-HIZMY3EP.js";
 import {
   __esm,
   __export,
@@ -39,8 +41,27 @@ var init_schemas = __esm({
   "lib/shared/validation/schemas.ts"() {
     "use strict";
     init_constants();
-    BasePropTypeSchema = z.enum(["string", "select", "boolean", "number", "link", "file", "rich-text", "embed"]);
-    PropTypeSchema = z.enum(["string", "select", "boolean", "number", "link", "file", "rich-text", "embed", "list"]);
+    BasePropTypeSchema = z.enum([
+      "string",
+      "select",
+      "boolean",
+      "number",
+      "link",
+      "file",
+      "rich-text",
+      "embed"
+    ]);
+    PropTypeSchema = z.enum([
+      "string",
+      "select",
+      "boolean",
+      "number",
+      "link",
+      "file",
+      "rich-text",
+      "embed",
+      "list"
+    ]);
     I18nValueObjectSchema = z.object({
       _i18n: z.literal(true)
     }).passthrough();
@@ -68,19 +89,21 @@ var init_schemas = __esm({
       itemSchema: ListItemSchemaSchema,
       // List-item field values can be any primitive, a link object, an `_i18n`
       // object (resolved by the SSR pipeline), or null.
-      default: z.array(z.record(z.string(), z.union([
-        z.string(),
-        z.number(),
-        z.boolean(),
-        z.object({ href: z.string(), target: z.string().optional() }),
-        I18nValueObjectSchema,
-        z.null()
-      ]))).optional()
+      default: z.array(
+        z.record(
+          z.string(),
+          z.union([
+            z.string(),
+            z.number(),
+            z.boolean(),
+            z.object({ href: z.string(), target: z.string().optional() }),
+            I18nValueObjectSchema,
+            z.null()
+          ])
+        )
+      ).optional()
     }).passthrough();
-    PropDefinitionSchema = z.union([
-      ListPropDefinitionSchema,
-      BasePropDefinitionSchema
-    ]);
+    PropDefinitionSchema = z.union([ListPropDefinitionSchema, BasePropDefinitionSchema]);
     StyleMappingSchema = z.object({
       _mapping: z.literal(true),
       prop: z.string(),
@@ -91,18 +114,17 @@ var init_schemas = __esm({
       prop: z.string(),
       values: z.record(z.string(), z.boolean())
     }).passthrough();
-    IfConditionSchema = z.union([
-      z.boolean(),
-      z.string(),
-      BooleanMappingSchema
-    ]);
+    IfConditionSchema = z.union([z.boolean(), z.string(), BooleanMappingSchema]);
     LinkMappingSchema = z.object({
       _mapping: z.literal(true),
       prop: z.string(),
-      values: z.record(z.string(), z.object({
-        href: z.string(),
-        target: z.string().optional()
-      })).optional()
+      values: z.record(
+        z.string(),
+        z.object({
+          href: z.string(),
+          target: z.string().optional()
+        })
+      ).optional()
     }).passthrough();
     HtmlMappingSchema = z.object({
       _mapping: z.literal(true),
@@ -111,21 +133,14 @@ var init_schemas = __esm({
     }).passthrough();
     StyleObjectSchema = z.record(
       z.string(),
-      z.union([
-        z.string(),
-        z.number(),
-        StyleMappingSchema
-      ])
+      z.union([z.string(), z.number(), StyleMappingSchema])
     );
     ResponsiveStyleObjectSchema = z.object({
       base: StyleObjectSchema.optional(),
       tablet: StyleObjectSchema.optional(),
       mobile: StyleObjectSchema.optional()
     }).passthrough();
-    StyleValueSchema = z.union([
-      StyleObjectSchema,
-      ResponsiveStyleObjectSchema
-    ]);
+    StyleValueSchema = z.union([StyleObjectSchema, ResponsiveStyleObjectSchema]);
     InteractiveStyleRuleSchema = z.object({
       name: z.string().optional(),
       prefix: z.string().optional(),
@@ -134,110 +149,124 @@ var init_schemas = __esm({
       previewProp: z.string().optional()
     });
     InteractiveStylesSchema = z.array(InteractiveStyleRuleSchema);
-    SlotMarkerSchema = z.lazy(() => z.object({
-      type: z.literal(NODE_TYPE.SLOT),
-      default: z.union([
-        z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
-        z.string(),
-        I18nValueObjectSchema
-      ]).optional()
-    }).passthrough());
-    HtmlNodeSchema = z.lazy(() => z.object({
-      type: z.literal(NODE_TYPE.NODE),
-      tag: z.string(),
-      label: z.string().optional(),
-      if: IfConditionSchema.optional(),
-      style: StyleValueSchema.optional(),
-      interactiveStyles: InteractiveStylesSchema.optional(),
-      generateElementClass: z.boolean().optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
-      props: z.record(z.string(), z.any()).optional(),
-      // Allow props for backward compatibility
-      children: z.union([
-        z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
-        z.string(),
-        I18nValueObjectSchema
-      ]).optional()
-    }).passthrough());
-    ComponentInstanceNodeSchema = z.lazy(() => z.object({
-      type: z.literal(NODE_TYPE.COMPONENT),
-      component: z.string(),
-      label: z.string().optional(),
-      if: IfConditionSchema.optional(),
-      props: z.record(z.string(), z.any()).optional(),
-      style: StyleValueSchema.optional(),
-      interactiveStyles: InteractiveStylesSchema.optional(),
-      generateElementClass: z.boolean().optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
-      children: z.union([
-        z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
-        z.string(),
-        I18nValueObjectSchema
-      ]).optional()
-    }).passthrough());
-    EmbedNodeSchema = z.lazy(() => z.object({
-      type: z.literal(NODE_TYPE.EMBED),
-      html: z.union([z.string(), HtmlMappingSchema, I18nValueObjectSchema]),
-      label: z.string().optional(),
-      if: IfConditionSchema.optional(),
-      style: StyleValueSchema.optional(),
-      interactiveStyles: InteractiveStylesSchema.optional(),
-      generateElementClass: z.boolean().optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional()
-    }).passthrough());
-    LinkNodeSchema = z.lazy(() => z.object({
-      type: z.literal(NODE_TYPE.LINK),
-      href: z.union([z.string(), LinkMappingSchema, I18nValueObjectSchema]),
-      label: z.string().optional(),
-      if: IfConditionSchema.optional(),
-      style: StyleValueSchema.optional(),
-      interactiveStyles: InteractiveStylesSchema.optional(),
-      generateElementClass: z.boolean().optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
-      children: z.union([
-        z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
-        z.string(),
-        I18nValueObjectSchema
-      ]).optional()
-    }).passthrough());
-    LocaleListNodeSchema = z.lazy(() => z.object({
-      type: z.literal(NODE_TYPE.LOCALE_LIST),
-      label: z.string().optional(),
-      if: IfConditionSchema.optional(),
-      style: StyleValueSchema.optional(),
-      interactiveStyles: InteractiveStylesSchema.optional(),
-      generateElementClass: z.boolean().optional(),
-      itemStyle: StyleValueSchema.optional(),
-      activeItemStyle: StyleValueSchema.optional(),
-      separatorStyle: StyleValueSchema.optional(),
-      showCurrent: z.boolean().optional(),
-      showSeparator: z.boolean().optional(),
-      showFlag: z.boolean().optional(),
-      flagStyle: StyleValueSchema.optional(),
-      attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional()
-    }).passthrough());
-    ListNodeSchemaBasic = z.lazy(() => z.object({
-      type: z.union([z.literal(NODE_TYPE.LIST), z.literal("cms-list")]),
-      // Support both for migration
-      sourceType: z.enum(["prop", "collection"]).optional(),
-      // defaults to 'prop'
-      source: z.string().optional(),
-      // Source prop name or collection name
-      collection: z.string().optional(),
-      // Legacy field for cms-list migration
-      label: z.string().optional(),
-      if: IfConditionSchema.optional(),
-      itemAs: z.string().optional(),
-      // Collection-specific options
-      items: z.union([z.string(), z.array(z.string())]).optional(),
-      filter: z.unknown().optional(),
-      sort: z.unknown().optional(),
-      limit: z.number().optional(),
-      offset: z.number().optional(),
-      excludeCurrentItem: z.boolean().optional(),
-      emitTemplate: z.boolean().optional(),
-      children: z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])).optional()
-    }).passthrough());
+    SlotMarkerSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.SLOT),
+        default: z.union([
+          z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+          z.string(),
+          I18nValueObjectSchema
+        ]).optional()
+      }).passthrough()
+    );
+    HtmlNodeSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.NODE),
+        tag: z.string(),
+        label: z.string().optional(),
+        if: IfConditionSchema.optional(),
+        style: StyleValueSchema.optional(),
+        interactiveStyles: InteractiveStylesSchema.optional(),
+        generateElementClass: z.boolean().optional(),
+        attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
+        props: z.record(z.string(), z.any()).optional(),
+        // Allow props for backward compatibility
+        children: z.union([
+          z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+          z.string(),
+          I18nValueObjectSchema
+        ]).optional()
+      }).passthrough()
+    );
+    ComponentInstanceNodeSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.COMPONENT),
+        component: z.string(),
+        label: z.string().optional(),
+        if: IfConditionSchema.optional(),
+        props: z.record(z.string(), z.any()).optional(),
+        style: StyleValueSchema.optional(),
+        interactiveStyles: InteractiveStylesSchema.optional(),
+        generateElementClass: z.boolean().optional(),
+        attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
+        children: z.union([
+          z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+          z.string(),
+          I18nValueObjectSchema
+        ]).optional()
+      }).passthrough()
+    );
+    EmbedNodeSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.EMBED),
+        html: z.union([z.string(), HtmlMappingSchema, I18nValueObjectSchema]),
+        label: z.string().optional(),
+        if: IfConditionSchema.optional(),
+        style: StyleValueSchema.optional(),
+        interactiveStyles: InteractiveStylesSchema.optional(),
+        generateElementClass: z.boolean().optional(),
+        attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional()
+      }).passthrough()
+    );
+    LinkNodeSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.LINK),
+        href: z.union([z.string(), LinkMappingSchema, I18nValueObjectSchema]),
+        label: z.string().optional(),
+        if: IfConditionSchema.optional(),
+        style: StyleValueSchema.optional(),
+        interactiveStyles: InteractiveStylesSchema.optional(),
+        generateElementClass: z.boolean().optional(),
+        attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional(),
+        children: z.union([
+          z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+          z.string(),
+          I18nValueObjectSchema
+        ]).optional()
+      }).passthrough()
+    );
+    LocaleListNodeSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.LOCALE_LIST),
+        label: z.string().optional(),
+        if: IfConditionSchema.optional(),
+        style: StyleValueSchema.optional(),
+        interactiveStyles: InteractiveStylesSchema.optional(),
+        generateElementClass: z.boolean().optional(),
+        itemStyle: StyleValueSchema.optional(),
+        activeItemStyle: StyleValueSchema.optional(),
+        separatorStyle: StyleValueSchema.optional(),
+        showCurrent: z.boolean().optional(),
+        showSeparator: z.boolean().optional(),
+        showFlag: z.boolean().optional(),
+        flagStyle: StyleValueSchema.optional(),
+        attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean(), I18nValueObjectSchema])).optional()
+      }).passthrough()
+    );
+    ListNodeSchemaBasic = z.lazy(
+      () => z.object({
+        type: z.union([z.literal(NODE_TYPE.LIST), z.literal("cms-list")]),
+        // Support both for migration
+        sourceType: z.enum(["prop", "collection"]).optional(),
+        // defaults to 'prop'
+        source: z.string().optional(),
+        // Source prop name or collection name
+        collection: z.string().optional(),
+        // Legacy field for cms-list migration
+        label: z.string().optional(),
+        if: IfConditionSchema.optional(),
+        itemAs: z.string().optional(),
+        // Collection-specific options
+        items: z.union([z.string(), z.array(z.string())]).optional(),
+        filter: z.unknown().optional(),
+        sort: z.unknown().optional(),
+        limit: z.number().optional(),
+        offset: z.number().optional(),
+        excludeCurrentItem: z.boolean().optional(),
+        emitTemplate: z.boolean().optional(),
+        children: z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])).optional()
+      }).passthrough()
+    );
     ComponentNodeSchema = z.union([
       HtmlNodeSchema,
       ComponentInstanceNodeSchema,
@@ -327,11 +356,14 @@ var init_schemas = __esm({
       root: ComponentNodeSchema.optional(),
       meta: PageMetaDataSchema.optional(),
       _lineMap: z.record(z.string(), LineRangeSchema).optional()
-    }).passthrough().refine((data) => {
-      return data.meta !== void 0 || data.components !== void 0 || data.root !== void 0;
-    }, {
-      message: "JSONPage must have at least one of: meta, components, or root"
-    });
+    }).passthrough().refine(
+      (data) => {
+        return data.meta !== void 0 || data.components !== void 0 || data.root !== void 0;
+      },
+      {
+        message: "JSONPage must have at least one of: meta, components, or root"
+      }
+    );
     PageDataWithComponentSchema = z.object({
       component: z.object({
         structure: ComponentNodeSchema.optional(),
@@ -341,10 +373,7 @@ var init_schemas = __esm({
         acceptsStyles: z.boolean().optional()
       }).passthrough()
     }).passthrough();
-    PageDataSchema = z.union([
-      PageDataWithComponentSchema,
-      JSONPageSchema
-    ]);
+    PageDataSchema = z.union([PageDataWithComponentSchema, JSONPageSchema]);
     CMSFieldTypeSchema = z.enum([
       "string",
       "text",
@@ -406,11 +435,7 @@ var init_schemas = __esm({
     });
     CMSListQuerySchema = z.object({
       collection: z.string(),
-      filter: z.union([
-        CMSFilterConditionSchema,
-        z.array(CMSFilterConditionSchema),
-        z.record(z.unknown())
-      ]).optional(),
+      filter: z.union([CMSFilterConditionSchema, z.array(CMSFilterConditionSchema), z.record(z.unknown())]).optional(),
       sort: z.union([CMSSortConfigSchema, z.array(CMSSortConfigSchema)]).optional(),
       limit: z.number().positive().optional(),
       offset: z.number().nonnegative().optional()
@@ -421,11 +446,7 @@ var init_schemas = __esm({
       if: IfConditionSchema.optional(),
       itemAs: z.string().optional(),
       items: z.union([z.string(), z.array(z.string())]).optional(),
-      filter: z.union([
-        CMSFilterConditionSchema,
-        z.array(CMSFilterConditionSchema),
-        z.record(z.unknown())
-      ]).optional(),
+      filter: z.union([CMSFilterConditionSchema, z.array(CMSFilterConditionSchema), z.record(z.unknown())]).optional(),
       sort: z.union([CMSSortConfigSchema, z.array(CMSSortConfigSchema)]).optional(),
       limit: z.number().positive().optional(),
       offset: z.number().nonnegative().optional(),
@@ -1130,10 +1151,7 @@ var init_HtmlNodeType = __esm({
       attributes: z2.record(z2.string(), z2.union([z2.string(), z2.number(), z2.boolean()])).optional(),
       props: z2.record(z2.string(), z2.any()).optional(),
       // Backward compatibility
-      children: z2.union([
-        z2.array(z2.union([ComponentNodeSchemaRef, z2.string()])),
-        z2.string()
-      ]).optional()
+      children: z2.union([z2.array(z2.union([ComponentNodeSchemaRef, z2.string()])), z2.string()]).optional()
     }).passthrough();
     HtmlNodeType = createNodeType({
       type: "node",
@@ -1154,7 +1172,22 @@ var init_HtmlNodeType = __esm({
         if (node.tag === "form") {
           props.onSubmit = (e) => e.preventDefault();
         }
-        const voidElements = ["img", "br", "hr", "input", "meta", "link", "area", "base", "col", "embed", "param", "source", "track", "wbr"];
+        const voidElements = [
+          "img",
+          "br",
+          "hr",
+          "input",
+          "meta",
+          "link",
+          "area",
+          "base",
+          "col",
+          "embed",
+          "param",
+          "source",
+          "track",
+          "wbr"
+        ];
         if (voidElements.includes(node.tag.toLowerCase())) {
           return h(node.tag, props);
         }
@@ -1168,7 +1201,22 @@ var init_HtmlNodeType = __esm({
       },
       ssrRenderer: (node, context) => {
         const childrenHTML = context.renderChildren(node.children, context);
-        const voidElements = ["img", "br", "hr", "input", "meta", "link", "area", "base", "col", "embed", "param", "source", "track", "wbr"];
+        const voidElements = [
+          "img",
+          "br",
+          "hr",
+          "input",
+          "meta",
+          "link",
+          "area",
+          "base",
+          "col",
+          "embed",
+          "param",
+          "source",
+          "track",
+          "wbr"
+        ];
         if (voidElements.includes(node.tag.toLowerCase())) {
           return `<${node.tag} />`;
         }
@@ -1206,10 +1254,7 @@ var init_ComponentInstanceNodeType = __esm({
       generateElementClass: z3.boolean().optional(),
       // Generate element class without styles (for custom CSS)
       attributes: z3.record(z3.string(), z3.union([z3.string(), z3.number(), z3.boolean()])).optional(),
-      children: z3.union([
-        z3.array(z3.union([ComponentNodeSchemaRef2, z3.string()])),
-        z3.string()
-      ]).optional()
+      children: z3.union([z3.array(z3.union([ComponentNodeSchemaRef2, z3.string()])), z3.string()]).optional()
     }).passthrough();
     ComponentInstanceNodeType = createNodeType({
       type: "component",
@@ -1257,10 +1302,7 @@ var init_SlotMarkerType = __esm({
     init_createNodeType();
     SlotMarkerSchemaInternal = z4.object({
       type: z4.literal("slot"),
-      default: z4.union([
-        z4.array(z4.any()),
-        z4.string()
-      ]).optional()
+      default: z4.union([z4.array(z4.any()), z4.string()]).optional()
     }).passthrough();
     SlotMarkerType = createNodeType({
       type: "slot",
@@ -1371,10 +1413,7 @@ var init_LinkNodeType = __esm({
       generateElementClass: z6.boolean().optional(),
       // Generate element class without styles (for custom CSS)
       attributes: z6.record(z6.string(), z6.union([z6.string(), z6.number(), z6.boolean()])).optional(),
-      children: z6.union([
-        z6.array(z6.union([ComponentNodeSchemaRef3, z6.string()])),
-        z6.string()
-      ]).optional()
+      children: z6.union([z6.array(z6.union([ComponentNodeSchemaRef3, z6.string()])), z6.string()]).optional()
     }).passthrough();
     LinkNodeType = createNodeType({
       type: "link",
@@ -1390,9 +1429,7 @@ var init_LinkNodeType = __esm({
         icon: "LINK",
         getLabel: () => "Link"
       },
-      editableFields: [
-        urlField({ name: "href", label: "Link URL", required: true })
-      ],
+      editableFields: [urlField({ name: "href", label: "Link URL", required: true })],
       clientRenderer: (node, context) => {
         const children = context.buildChildren(
           node.children,
@@ -1463,10 +1500,14 @@ var init_LocaleListNodeType = __esm({
         getLabel: () => "LocaleList"
       },
       clientRenderer: (_node, context) => {
-        return h5("div", {
-          key: context.key,
-          "data-locale-list": "true"
-        }, "[Locale List]");
+        return h5(
+          "div",
+          {
+            key: context.key,
+            "data-locale-list": "true"
+          },
+          "[Locale List]"
+        );
       },
       ssrRenderer: (_node, _context) => {
         return '<div class="locale-list">[Locale List]</div>';
@@ -1499,10 +1540,12 @@ var init_ListNodeType = __esm({
         field: z8.string(),
         order: z8.enum(["asc", "desc"]).optional()
       }),
-      z8.array(z8.object({
-        field: z8.string(),
-        order: z8.enum(["asc", "desc"]).optional()
-      }))
+      z8.array(
+        z8.object({
+          field: z8.string(),
+          order: z8.enum(["asc", "desc"]).optional()
+        })
+      )
     ]);
     ListNodeSchemaInternal = z8.object({
       type: z8.literal("list"),
@@ -1532,11 +1575,7 @@ var init_ListNodeType = __esm({
       /** Direct item IDs or template expression for referenced items (e.g., "{{post.authorId}}") */
       items: z8.union([z8.string(), z8.array(z8.string())]).optional(),
       /** Filter conditions */
-      filter: z8.union([
-        CMSFilterConditionSchema2,
-        z8.array(CMSFilterConditionSchema2),
-        z8.record(z8.unknown())
-      ]).optional(),
+      filter: z8.union([CMSFilterConditionSchema2, z8.array(CMSFilterConditionSchema2), z8.record(z8.unknown())]).optional(),
       /** Sort configuration */
       sort: CMSSortConfigSchema2.optional(),
       /** Exclude the current CMS item from the list (useful for "related items" sections) */
@@ -1586,20 +1625,24 @@ var init_ListNodeType = __esm({
         const borderColor = isCollection ? "rgba(139, 92, 246, 0.5)" : "rgba(59, 130, 246, 0.5)";
         const textColor = isCollection ? "#8b5cf6" : "#3b82f6";
         const label = isCollection ? "CMS List" : "List";
-        return h6("div", {
-          key: context.key,
-          "data-list": "true",
-          "data-source-type": sourceType,
-          "data-source": listNode.source,
-          style: {
-            padding: "8px 12px",
-            background: bgColor,
-            border: `1px dashed ${borderColor}`,
-            borderRadius: "4px",
-            color: textColor,
-            fontSize: "12px"
-          }
-        }, `[${label}: ${listNode.source || "No source"}]`);
+        return h6(
+          "div",
+          {
+            key: context.key,
+            "data-list": "true",
+            "data-source-type": sourceType,
+            "data-source": listNode.source,
+            style: {
+              padding: "8px 12px",
+              background: bgColor,
+              border: `1px dashed ${borderColor}`,
+              borderRadius: "4px",
+              color: textColor,
+              fontSize: "12px"
+            }
+          },
+          `[${label}: ${listNode.source || "No source"}]`
+        );
       },
       ssrRenderer: (_node, _context) => {
         return "<!-- list rendered by processList -->";
@@ -1749,11 +1792,13 @@ function validatePropDefinition(propDef) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1767,11 +1812,13 @@ function validateComponentNode(node) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1785,11 +1832,13 @@ function validateStructuredComponentDefinition(def) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1803,11 +1852,13 @@ function validateComponentDefinition(def) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1821,11 +1872,13 @@ function validatePageData(data) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1839,11 +1892,13 @@ function validatePageDataWithComponent(data) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1857,11 +1912,13 @@ function validatePageMetaData(data) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1875,11 +1932,13 @@ function validateCMSSchema(data) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1893,11 +1952,13 @@ function validateCMSItem(data) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -1911,11 +1972,13 @@ function validateCMSDraftItem(data) {
   } catch (error) {
     return {
       valid: false,
-      errors: [{
-        path: "root",
-        message: error instanceof Error ? error.message : "Unknown validation error",
-        code: "UNKNOWN"
-      }]
+      errors: [
+        {
+          path: "root",
+          message: error instanceof Error ? error.message : "Unknown validation error",
+          code: "UNKNOWN"
+        }
+      ]
     };
   }
 }
@@ -2047,9 +2110,7 @@ function evaluateNode(node, context) {
     }
     case "ArrayExpression": {
       const arrayNode = node;
-      return arrayNode.elements.map(
-        (el) => el ? evaluateNode(el, context) : void 0
-      );
+      return arrayNode.elements.map((el) => el ? evaluateNode(el, context) : void 0);
     }
     case "CallExpression": {
       throw new Error("Function calls are not supported in template expressions");
@@ -2169,7 +2230,7 @@ function buildEvalContext(ctx) {
   return evalContext;
 }
 function processItemTemplate(text, ctx, resolveValue) {
-  let result = text.replace(/\{\{([^}]+)\}\}/g, (match, expression) => {
+  const result = text.replace(/\{\{([^}]+)\}\}/g, (match, expression) => {
     const trimmed = expression.trim();
     if (isComplexExpression(trimmed)) {
       const evalContext = buildEvalContext(ctx);
@@ -2861,453 +2922,868 @@ function resolvePropsFromDefinition(componentDef, passedProps = {}, children = [
   });
 }
 
-// lib/shared/styleValueRegistry.ts
-var registry = /* @__PURE__ */ new Map();
-var dynamicRegistry = /* @__PURE__ */ new Map();
-function registerStyleValue(className, value) {
-  registry.set(className, value);
-}
-function registerDynamicStyle(className, property, value) {
-  dynamicRegistry.set(className, { property, value });
-}
-function getStyleValue(className) {
-  return registry.get(className);
-}
-function getDynamicStyle(className) {
-  return dynamicRegistry.get(className);
-}
-function isDynamicClass(className) {
-  return dynamicRegistry.has(className);
-}
-function getAllDynamicClasses() {
-  return Array.from(dynamicRegistry.keys());
-}
-function clearRegistry() {
-  registry.clear();
-  dynamicRegistry.clear();
-}
-function serializeRegistry() {
-  return JSON.stringify({
-    standard: Array.from(registry.entries()),
-    dynamic: Array.from(dynamicRegistry.entries())
-  });
-}
-function hydrateRegistry(data) {
-  const parsed = JSON.parse(data);
-  if (Array.isArray(parsed)) {
-    for (const [key, value] of parsed) {
-      registry.set(key, value);
-    }
-  } else {
-    if (parsed.standard) {
-      for (const [key, value] of parsed.standard) {
-        registry.set(key, value);
-      }
-    }
-    if (parsed.dynamic) {
-      for (const [key, value] of parsed.dynamic) {
-        dynamicRegistry.set(key, value);
-      }
-    }
-  }
-}
-
-// lib/shared/utilityClassConfig.ts
-var propertyMap = {
-  // Padding
-  padding: "p",
-  paddingTop: "pt",
-  paddingRight: "pr",
-  paddingBottom: "pb",
-  paddingLeft: "pl",
-  paddingInline: "px",
-  paddingBlock: "py",
-  // Margin
-  margin: "m",
-  marginTop: "mt",
-  marginRight: "mr",
-  marginBottom: "mb",
-  marginLeft: "ml",
-  marginInline: "mx",
-  marginBlock: "my",
-  // Display & Layout
-  display: "d",
-  flexDirection: "fd",
-  justifyContent: "jc",
-  alignItems: "ai",
-  alignContent: "ac",
-  flex: "flex",
-  flexWrap: "fw",
-  gap: "g",
-  rowGap: "rg",
-  columnGap: "cg",
-  // Sizing
-  width: "w",
-  height: "h",
-  maxWidth: "mw",
-  maxHeight: "mh",
-  minWidth: "miw",
-  minHeight: "mih",
-  aspectRatio: "ar",
-  // Colors & Background
-  backgroundColor: "bgc",
-  background: "bg",
-  backgroundImage: "bgi",
-  color: "c",
-  // Borders & Radius
-  border: "b",
-  borderRadius: "br",
-  borderTop: "bt",
-  borderRight: "border-r",
-  borderBottom: "bb",
-  borderLeft: "bl",
-  borderTopLeftRadius: "brtl",
-  borderTopRightRadius: "brtr",
-  borderBottomLeftRadius: "brbl",
-  borderBottomRightRadius: "brbr",
-  borderColor: "bc",
-  // Text
-  fontSize: "fs",
-  fontWeight: "fe",
-  fontFamily: "ff",
-  textAlign: "ta",
-  textDecoration: "td",
-  textTransform: "tt",
-  lineHeight: "lh",
-  letterSpacing: "ls",
-  wordBreak: "wb",
-  overflowWrap: "ow",
-  textIndent: "ti",
-  verticalAlign: "va",
-  whiteSpace: "whs",
-  // Lists
-  listStyle: "lst",
-  listStyleType: "lstt",
-  listStylePosition: "lstp",
-  // Transform & Effects
-  opacity: "o",
-  transform: "tm",
-  transformOrigin: "tmo",
-  boxShadow: "bsh",
-  textShadow: "ts",
-  filter: "flt",
-  backdropFilter: "bdf",
-  backfaceVisibility: "bfv",
-  mixBlendMode: "mbm",
-  clipPath: "cp",
-  // Positioning
-  position: "pos",
-  top: "top",
-  right: "r",
-  bottom: "bo",
-  left: "l",
-  inset: "ins",
-  zIndex: "z",
-  // Grid Layout
-  gridTemplateColumns: "gtc",
-  gridTemplateRows: "gtr",
-  gridTemplateAreas: "gta",
-  gridGap: "gg",
-  gridAutoFlow: "gaf",
-  gridColumn: "gc",
-  gridRow: "gr",
-  gridArea: "ga",
-  gridAutoRows: "gar",
-  gridAutoColumns: "gac",
-  justifyItems: "ji",
-  justifySelf: "jse",
-  placeContent: "plc",
-  placeItems: "pli",
-  placeSelf: "pls",
-  // Flexbox extras
-  flexGrow: "fg",
-  flexShrink: "fsh",
-  flexBasis: "fb",
-  order: "ord",
-  alignSelf: "as",
-  // Outline
-  outline: "ol",
-  outlineWidth: "olw",
-  outlineStyle: "ols",
-  outlineColor: "olc",
-  outlineOffset: "olo",
-  // Other
-  overflow: "ov",
-  overflowX: "ovx",
-  overflowY: "ovy",
-  cursor: "cu",
-  pointerEvents: "pe",
-  userSelect: "us",
-  transition: "tn",
-  objectFit: "objf",
-  objectPosition: "objp",
-  boxSizing: "bsz",
-  visibility: "vis",
-  resize: "rsz",
-  scrollBehavior: "scb",
-  accentColor: "acc"
-};
-var prefixToCSSProperty = {
-  // Spacing
-  p: "padding",
-  pt: "padding-top",
-  pr: "padding-right",
-  pb: "padding-bottom",
-  pl: "padding-left",
-  px: "padding",
-  py: "padding",
-  m: "margin",
-  mt: "margin-top",
-  mr: "margin-right",
-  mb: "margin-bottom",
-  ml: "margin-left",
-  mx: "margin",
-  my: "margin",
-  g: "gap",
-  rg: "row-gap",
-  cg: "column-gap",
-  // Sizing
-  w: "width",
-  h: "height",
-  mw: "max-width",
-  mh: "max-height",
-  miw: "min-width",
-  mih: "min-height",
-  ar: "aspect-ratio",
-  // Colors & Background
-  bgc: "background-color",
-  bg: "background",
-  bgi: "background-image",
-  c: "color",
-  bc: "border-color",
-  // Borders
-  b: "border",
-  br: "border-radius",
-  brtl: "border-top-left-radius",
-  brtr: "border-top-right-radius",
-  brbl: "border-bottom-left-radius",
-  brbr: "border-bottom-right-radius",
-  bt: "border-top",
-  bb: "border-bottom",
-  bl: "border-left",
-  "border-r": "border-right",
-  // Text
-  fs: "font-size",
-  fe: "font-weight",
-  ff: "font-family",
-  ta: "text-align",
-  td: "text-decoration",
-  tt: "text-transform",
-  lh: "line-height",
-  ls: "letter-spacing",
-  wb: "word-break",
-  ow: "overflow-wrap",
-  ti: "text-indent",
-  va: "vertical-align",
-  whs: "white-space",
-  // Lists
-  lst: "list-style",
-  lstt: "list-style-type",
-  lstp: "list-style-position",
-  // Display
-  d: "display",
-  // Flexbox
-  fd: "flex-direction",
-  jc: "justify-content",
-  ai: "align-items",
-  ac: "align-content",
-  as: "align-self",
-  flex: "flex",
-  fw: "flex-wrap",
-  fg: "flex-grow",
-  fsh: "flex-shrink",
-  fb: "flex-basis",
-  ord: "order",
-  // Grid
-  gtc: "grid-template-columns",
-  gtr: "grid-template-rows",
-  gta: "grid-template-areas",
-  gg: "grid-gap",
-  gaf: "grid-auto-flow",
-  gc: "grid-column",
-  gr: "grid-row",
-  ga: "grid-area",
-  gar: "grid-auto-rows",
-  gac: "grid-auto-columns",
-  ji: "justify-items",
-  jse: "justify-self",
-  plc: "place-content",
-  pli: "place-items",
-  pls: "place-self",
-  // Effects
-  o: "opacity",
-  tm: "transform",
-  tmo: "transform-origin",
-  bsh: "box-shadow",
-  ts: "text-shadow",
-  flt: "filter",
-  bdf: "backdrop-filter",
-  bfv: "backface-visibility",
-  mbm: "mix-blend-mode",
-  cp: "clip-path",
-  // Positioning
-  pos: "position",
-  top: "top",
-  r: "right",
-  bo: "bottom",
-  l: "left",
-  ins: "inset",
-  z: "z-index",
-  // Outline
-  ol: "outline",
-  olw: "outline-width",
-  ols: "outline-style",
-  olc: "outline-color",
-  olo: "outline-offset",
+// lib/shared/cssNamedColors.ts
+var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
+  // CSS Level 4 named colors
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen",
+  // CSS color keywords
+  "transparent",
+  "currentcolor",
+  // CSS-wide keywords (should never be wrapped in var())
+  "inherit",
+  "initial",
+  "unset",
+  "revert"
+]);
+function isCssNamedColor(value) {
+  return CSS_NAMED_COLORS.has(value.toLowerCase());
+}
+
+// lib/shared/styleValueRegistry.ts
+var registry = /* @__PURE__ */ new Map();
+var dynamicRegistry = /* @__PURE__ */ new Map();
+function registerStyleValue(className, value) {
+  registry.set(className, value);
+}
+function registerDynamicStyle(className, property, value) {
+  dynamicRegistry.set(className, { property, value });
+}
+function getStyleValue(className) {
+  return registry.get(className);
+}
+function getDynamicStyle(className) {
+  return dynamicRegistry.get(className);
+}
+function isDynamicClass(className) {
+  return dynamicRegistry.has(className);
+}
+function getAllDynamicClasses() {
+  return Array.from(dynamicRegistry.keys());
+}
+function clearRegistry() {
+  registry.clear();
+  dynamicRegistry.clear();
+}
+function serializeRegistry() {
+  return JSON.stringify({
+    standard: Array.from(registry.entries()),
+    dynamic: Array.from(dynamicRegistry.entries())
+  });
+}
+function hydrateRegistry(data) {
+  const parsed = JSON.parse(data);
+  if (Array.isArray(parsed)) {
+    for (const [key, value] of parsed) {
+      registry.set(key, value);
+    }
+  } else {
+    if (parsed.standard) {
+      for (const [key, value] of parsed.standard) {
+        registry.set(key, value);
+      }
+    }
+    if (parsed.dynamic) {
+      for (const [key, value] of parsed.dynamic) {
+        dynamicRegistry.set(key, value);
+      }
+    }
+  }
+}
+
+// lib/shared/utilityClassConfig.ts
+var propertyOrder = [
+  // Padding
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingInline",
+  "paddingBlock",
+  // Margin
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginInline",
+  "marginBlock",
+  // Display & Layout
+  "display",
+  "flexDirection",
+  "justifyContent",
+  "alignItems",
+  "alignContent",
+  "flex",
+  "flexWrap",
+  "gap",
+  "rowGap",
+  "columnGap",
+  // Sizing
+  "width",
+  "height",
+  "maxWidth",
+  "maxHeight",
+  "minWidth",
+  "minHeight",
+  "aspectRatio",
+  // Colors & Background
+  "backgroundColor",
+  "background",
+  "backgroundImage",
+  "color",
+  // Borders & Radius
+  "border",
+  "borderRadius",
+  "borderTop",
+  "borderRight",
+  "borderBottom",
+  "borderLeft",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderColor",
+  // Text
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textAlign",
+  "textDecoration",
+  "textTransform",
+  "lineHeight",
+  "letterSpacing",
+  "wordBreak",
+  "overflowWrap",
+  "textIndent",
+  "verticalAlign",
+  "whiteSpace",
+  // Lists
+  "listStyle",
+  "listStyleType",
+  "listStylePosition",
+  // Transform & Effects
+  "opacity",
+  "transform",
+  "transformOrigin",
+  "boxShadow",
+  "textShadow",
+  "filter",
+  "backdropFilter",
+  "backfaceVisibility",
+  "mixBlendMode",
+  "clipPath",
+  // Positioning
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "inset",
+  "zIndex",
+  // Grid Layout
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas",
+  "gridGap",
+  "gridAutoFlow",
+  "gridColumn",
+  "gridRow",
+  "gridArea",
+  "gridAutoRows",
+  "gridAutoColumns",
+  "justifyItems",
+  "justifySelf",
+  "placeContent",
+  "placeItems",
+  "placeSelf",
+  // Flexbox extras
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "order",
+  "alignSelf",
+  // Outline
+  "outline",
+  "outlineWidth",
+  "outlineStyle",
+  "outlineColor",
+  "outlineOffset",
   // Other
-  ov: "overflow",
-  ovx: "overflow-x",
-  ovy: "overflow-y",
-  cu: "cursor",
-  pe: "pointer-events",
-  us: "user-select",
-  tn: "transition",
-  objf: "object-fit",
-  objp: "object-position",
-  bsz: "box-sizing",
-  vis: "visibility",
-  rsz: "resize",
-  scb: "scroll-behavior",
-  acc: "accent-color"
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "cursor",
+  "pointerEvents",
+  "userSelect",
+  "transition",
+  "objectFit",
+  "objectPosition",
+  "boxSizing",
+  "visibility",
+  "resize",
+  "scrollBehavior",
+  "accentColor"
+];
+var propertyMap = {
+  // Padding
+  padding: "p",
+  paddingTop: "pt",
+  paddingRight: "pr",
+  paddingBottom: "pb",
+  paddingLeft: "pl",
+  paddingInline: "px",
+  paddingBlock: "py",
+  // Margin
+  margin: "m",
+  marginTop: "mt",
+  marginRight: "mr",
+  marginBottom: "mb",
+  marginLeft: "ml",
+  marginInline: "mx",
+  marginBlock: "my",
+  // Flexbox
+  flex: "flex",
+  gap: "gap",
+  rowGap: "gap-y",
+  columnGap: "gap-x",
+  flexGrow: "grow",
+  flexShrink: "shrink",
+  flexBasis: "basis",
+  order: "order",
+  // Sizing
+  width: "w",
+  height: "h",
+  maxWidth: "max-w",
+  maxHeight: "max-h",
+  minWidth: "min-w",
+  minHeight: "min-h",
+  aspectRatio: "aspect",
+  // Colors & Background
+  backgroundColor: "bg",
+  backgroundImage: "bg",
+  color: "text",
+  // Borders & Radius
+  border: "border",
+  borderColor: "border",
+  borderTop: "border-t",
+  borderRight: "border-r",
+  borderBottom: "border-b",
+  borderLeft: "border-l",
+  borderRadius: "rounded",
+  borderTopLeftRadius: "rounded-tl",
+  borderTopRightRadius: "rounded-tr",
+  borderBottomLeftRadius: "rounded-bl",
+  borderBottomRightRadius: "rounded-br",
+  // Text
+  fontSize: "text",
+  fontWeight: "font",
+  fontFamily: "font",
+  lineHeight: "leading",
+  letterSpacing: "tracking",
+  textIndent: "indent",
+  verticalAlign: "align",
+  // Lists
+  listStyleType: "list",
+  // Transform & Effects
+  opacity: "opacity",
+  transform: "transform",
+  transformOrigin: "origin",
+  boxShadow: "shadow",
+  textShadow: "text-shadow",
+  filter: "filter",
+  backdropFilter: "backdrop-filter",
+  // Positioning
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left",
+  inset: "inset",
+  zIndex: "z",
+  // Grid Layout
+  gridTemplateColumns: "grid-cols",
+  gridTemplateRows: "grid-rows",
+  gridColumn: "col",
+  gridRow: "row",
+  gridAutoRows: "auto-rows",
+  gridAutoColumns: "auto-cols",
+  // Outline
+  outline: "outline",
+  outlineWidth: "outline",
+  outlineColor: "outline",
+  outlineOffset: "outline-offset",
+  // Other
+  overflow: "overflow",
+  overflowX: "overflow-x",
+  overflowY: "overflow-y",
+  cursor: "cursor",
+  transition: "transition",
+  objectPosition: "object",
+  accentColor: "accent"
+};
+var prefixToCSSProperty = {
+  // Spacing
+  p: "padding",
+  pt: "padding-top",
+  pr: "padding-right",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  px: "padding",
+  py: "padding",
+  m: "margin",
+  mt: "margin-top",
+  mr: "margin-right",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  mx: "margin",
+  my: "margin",
+  gap: "gap",
+  "gap-y": "row-gap",
+  "gap-x": "column-gap",
+  // Sizing
+  w: "width",
+  h: "height",
+  "max-w": "max-width",
+  "max-h": "max-height",
+  "min-w": "min-width",
+  "min-h": "min-height",
+  aspect: "aspect-ratio",
+  // Colors & Background
+  bg: "background-color",
+  text: "color",
+  accent: "accent-color",
+  // Borders
+  border: "border",
+  "border-t": "border-top",
+  "border-r": "border-right",
+  "border-b": "border-bottom",
+  "border-l": "border-left",
+  rounded: "border-radius",
+  "rounded-tl": "border-top-left-radius",
+  "rounded-tr": "border-top-right-radius",
+  "rounded-bl": "border-bottom-left-radius",
+  "rounded-br": "border-bottom-right-radius",
+  // Text
+  font: "font-weight",
+  leading: "line-height",
+  tracking: "letter-spacing",
+  indent: "text-indent",
+  align: "vertical-align",
+  // Lists
+  list: "list-style-type",
+  // Flexbox
+  flex: "flex",
+  grow: "flex-grow",
+  shrink: "flex-shrink",
+  basis: "flex-basis",
+  order: "order",
+  // Grid
+  "grid-cols": "grid-template-columns",
+  "grid-rows": "grid-template-rows",
+  col: "grid-column",
+  row: "grid-row",
+  "auto-rows": "grid-auto-rows",
+  "auto-cols": "grid-auto-columns",
+  // Effects
+  opacity: "opacity",
+  transform: "transform",
+  origin: "transform-origin",
+  shadow: "box-shadow",
+  "text-shadow": "text-shadow",
+  filter: "filter",
+  "backdrop-filter": "backdrop-filter",
+  // Positioning
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left",
+  inset: "inset",
+  z: "z-index",
+  // Outline
+  outline: "outline",
+  "outline-offset": "outline-offset",
+  // Other
+  overflow: "overflow",
+  "overflow-x": "overflow-x",
+  "overflow-y": "overflow-y",
+  cursor: "cursor",
+  transition: "transition",
+  object: "object-position"
 };
-var specialValueMappings = {
+var staticUtilities = {
   display: {
-    flex: "f",
-    grid: "g",
-    block: "b",
-    inline: "i",
-    "inline-block": "ib",
-    none: "h",
-    "inline-flex": "if",
-    "inline-grid": "ig"
+    flex: "flex",
+    grid: "grid",
+    block: "block",
+    inline: "inline",
+    "inline-block": "inline-block",
+    none: "hidden",
+    "inline-flex": "inline-flex",
+    "inline-grid": "inline-grid",
+    table: "table",
+    contents: "contents",
+    "flow-root": "flow-root",
+    "list-item": "list-item"
   },
   flexDirection: {
-    column: "fd-col",
-    row: "fd-row"
+    column: "flex-col",
+    row: "flex-row",
+    "column-reverse": "flex-col-reverse",
+    "row-reverse": "flex-row-reverse"
+  },
+  flexWrap: {
+    wrap: "flex-wrap",
+    nowrap: "flex-nowrap",
+    "wrap-reverse": "flex-wrap-reverse"
+  },
+  flex: {
+    "1": "flex-1",
+    auto: "flex-auto",
+    none: "flex-none",
+    initial: "flex-initial"
+  },
+  flexGrow: {
+    "1": "grow",
+    "0": "grow-0"
+  },
+  flexShrink: {
+    "1": "shrink",
+    "0": "shrink-0"
   },
   justifyContent: {
-    center: "jc-c",
-    "flex-start": "jc-s",
-    "flex-end": "jc-e",
-    "space-between": "jc-b",
-    "space-around": "jc-a",
-    "space-evenly": "jc-ev"
+    center: "justify-center",
+    "flex-start": "justify-start",
+    start: "justify-start",
+    "flex-end": "justify-end",
+    end: "justify-end",
+    "space-between": "justify-between",
+    "space-around": "justify-around",
+    "space-evenly": "justify-evenly",
+    stretch: "justify-stretch",
+    normal: "justify-normal"
   },
   alignItems: {
-    center: "ai-c",
-    "flex-start": "ai-s",
-    "flex-end": "ai-e",
-    stretch: "ai-st",
-    baseline: "ai-b"
+    center: "items-center",
+    "flex-start": "items-start",
+    start: "items-start",
+    "flex-end": "items-end",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline"
+  },
+  alignContent: {
+    center: "content-center",
+    "flex-start": "content-start",
+    start: "content-start",
+    "flex-end": "content-end",
+    end: "content-end",
+    "space-between": "content-between",
+    "space-around": "content-around",
+    "space-evenly": "content-evenly",
+    stretch: "content-stretch",
+    normal: "content-normal"
+  },
+  alignSelf: {
+    auto: "self-auto",
+    center: "self-center",
+    "flex-start": "self-start",
+    start: "self-start",
+    "flex-end": "self-end",
+    end: "self-end",
+    stretch: "self-stretch",
+    baseline: "self-baseline"
+  },
+  justifyItems: {
+    center: "justify-items-center",
+    start: "justify-items-start",
+    end: "justify-items-end",
+    stretch: "justify-items-stretch"
+  },
+  justifySelf: {
+    auto: "justify-self-auto",
+    center: "justify-self-center",
+    start: "justify-self-start",
+    end: "justify-self-end",
+    stretch: "justify-self-stretch"
+  },
+  placeContent: {
+    center: "place-content-center",
+    start: "place-content-start",
+    end: "place-content-end",
+    "space-between": "place-content-between",
+    "space-around": "place-content-around",
+    "space-evenly": "place-content-evenly",
+    stretch: "place-content-stretch"
+  },
+  placeItems: {
+    center: "place-items-center",
+    start: "place-items-start",
+    end: "place-items-end",
+    stretch: "place-items-stretch"
+  },
+  placeSelf: {
+    auto: "place-self-auto",
+    center: "place-self-center",
+    start: "place-self-start",
+    end: "place-self-end",
+    stretch: "place-self-stretch"
+  },
+  position: {
+    static: "static",
+    fixed: "fixed",
+    absolute: "absolute",
+    relative: "relative",
+    sticky: "sticky"
   },
   overflow: {
-    hidden: "o-h",
-    auto: "o-a",
-    scroll: "o-s",
-    visible: "o-v"
+    hidden: "overflow-hidden",
+    auto: "overflow-auto",
+    scroll: "overflow-scroll",
+    visible: "overflow-visible",
+    clip: "overflow-clip"
+  },
+  overflowX: {
+    hidden: "overflow-x-hidden",
+    auto: "overflow-x-auto",
+    scroll: "overflow-x-scroll",
+    visible: "overflow-x-visible",
+    clip: "overflow-x-clip"
+  },
+  overflowY: {
+    hidden: "overflow-y-hidden",
+    auto: "overflow-y-auto",
+    scroll: "overflow-y-scroll",
+    visible: "overflow-y-visible",
+    clip: "overflow-y-clip"
   },
-  cursor: {
-    pointer: "cursor-pointer",
-    default: "cursor-default"
+  textAlign: {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify",
+    start: "text-start",
+    end: "text-end"
+  },
+  textDecoration: {
+    underline: "underline",
+    overline: "overline",
+    "line-through": "line-through",
+    none: "no-underline"
+  },
+  textTransform: {
+    uppercase: "uppercase",
+    lowercase: "lowercase",
+    capitalize: "capitalize",
+    none: "normal-case"
+  },
+  whiteSpace: {
+    normal: "whitespace-normal",
+    nowrap: "whitespace-nowrap",
+    pre: "whitespace-pre",
+    "pre-wrap": "whitespace-pre-wrap",
+    "pre-line": "whitespace-pre-line",
+    "break-spaces": "whitespace-break-spaces"
+  },
+  wordBreak: {
+    normal: "break-normal",
+    "break-all": "break-all",
+    "keep-all": "break-keep",
+    "break-word": "break-word"
+  },
+  overflowWrap: {
+    normal: "wrap-normal",
+    "break-word": "wrap-break-word",
+    anywhere: "wrap-anywhere"
+  },
+  fontWeight: {
+    normal: "font-normal",
+    bold: "font-bold",
+    bolder: "font-bolder",
+    lighter: "font-lighter"
+  },
+  color: {
+    transparent: "text-transparent",
+    currentColor: "text-current",
+    inherit: "text-inherit"
+  },
+  backgroundColor: {
+    transparent: "bg-transparent",
+    currentColor: "bg-current",
+    inherit: "bg-inherit"
+  },
+  backgroundImage: {
+    none: "bg-none"
+  },
+  borderColor: {
+    transparent: "border-transparent",
+    currentColor: "border-current",
+    inherit: "border-inherit"
   },
   pointerEvents: {
-    none: "pe-none",
-    auto: "pe-auto"
+    none: "pointer-events-none",
+    auto: "pointer-events-auto"
   },
   userSelect: {
-    none: "us-none",
-    auto: "us-auto",
-    text: "us-text",
-    all: "us-all"
+    none: "select-none",
+    auto: "select-auto",
+    text: "select-text",
+    all: "select-all"
   },
-  whiteSpace: {
-    normal: "whs-normal",
-    nowrap: "whs-nowrap",
-    pre: "whs-pre",
-    "pre-wrap": "whs-pre-wrap",
-    "pre-line": "whs-pre-line"
-  }
-  // Note: CSS functions (blur, translateY, scale, rotate, repeat) are now handled
-  // dynamically in utilityClassMapper.ts - no need to hardcode specific values here
+  objectFit: {
+    contain: "object-contain",
+    cover: "object-cover",
+    fill: "object-fill",
+    none: "object-none",
+    "scale-down": "object-scale-down"
+  },
+  boxSizing: {
+    "border-box": "box-border",
+    "content-box": "box-content"
+  },
+  visibility: {
+    visible: "visible",
+    hidden: "invisible",
+    collapse: "collapse"
+  },
+  resize: {
+    both: "resize",
+    horizontal: "resize-x",
+    vertical: "resize-y",
+    none: "resize-none"
+  },
+  scrollBehavior: {
+    smooth: "scroll-smooth",
+    auto: "scroll-auto"
+  },
+  gridAutoFlow: {
+    row: "grid-flow-row",
+    column: "grid-flow-col",
+    dense: "grid-flow-dense",
+    "row dense": "grid-flow-row-dense",
+    "column dense": "grid-flow-col-dense"
+  },
+  listStyleType: {
+    none: "list-none",
+    disc: "list-disc",
+    decimal: "list-decimal"
+  },
+  listStylePosition: {
+    inside: "list-inside",
+    outside: "list-outside"
+  },
+  backfaceVisibility: {
+    visible: "backface-visible",
+    hidden: "backface-hidden"
+  },
+  transition: {
+    none: "transition-none"
+  },
+  transform: {
+    none: "transform-none"
+  },
+  boxShadow: {
+    none: "shadow-none"
+  },
+  outline: {
+    none: "outline-none"
+  }
 };
-var classToStyleSpecialCases = {
-  f: { prop: "display", value: "flex" },
-  "fd-col": { prop: "flexDirection", value: "column" },
-  "fd-row": { prop: "flexDirection", value: "row" },
-  g: { prop: "display", value: "grid" },
-  b: { prop: "display", value: "block" },
-  i: { prop: "display", value: "inline" },
-  ib: { prop: "display", value: "inline-block" },
-  h: { prop: "display", value: "none" },
-  "if": { prop: "display", value: "inline-flex" },
-  ig: { prop: "display", value: "inline-grid" },
-  "jc-c": { prop: "justifyContent", value: "center" },
-  "jc-s": { prop: "justifyContent", value: "flex-start" },
-  "jc-e": { prop: "justifyContent", value: "flex-end" },
-  "jc-b": { prop: "justifyContent", value: "space-between" },
-  "jc-a": { prop: "justifyContent", value: "space-around" },
-  "jc-ev": { prop: "justifyContent", value: "space-evenly" },
-  "ai-c": { prop: "alignItems", value: "center" },
-  "ai-s": { prop: "alignItems", value: "flex-start" },
-  "ai-e": { prop: "alignItems", value: "flex-end" },
-  "ai-st": { prop: "alignItems", value: "stretch" },
-  "ai-b": { prop: "alignItems", value: "baseline" },
-  "o-h": { prop: "overflow", value: "hidden" },
-  "o-a": { prop: "overflow", value: "auto" },
-  "o-s": { prop: "overflow", value: "scroll" },
-  "o-v": { prop: "overflow", value: "visible" },
-  "cursor-pointer": { prop: "cursor", value: "pointer" },
-  "cursor-default": { prop: "cursor", value: "default" },
-  "pe-none": { prop: "pointerEvents", value: "none" },
-  "pe-auto": { prop: "pointerEvents", value: "auto" },
-  "us-none": { prop: "userSelect", value: "none" },
-  "us-auto": { prop: "userSelect", value: "auto" },
-  "us-text": { prop: "userSelect", value: "text" },
-  "us-all": { prop: "userSelect", value: "all" },
-  "whs-normal": { prop: "whiteSpace", value: "normal" },
-  "whs-nowrap": { prop: "whiteSpace", value: "nowrap" },
-  "whs-pre": { prop: "whiteSpace", value: "pre" },
-  "whs-pre-wrap": { prop: "whiteSpace", value: "pre-wrap" },
-  "whs-pre-line": { prop: "whiteSpace", value: "pre-line" },
-  // Grid template columns
-  "gtc-2": { prop: "gridTemplateColumns", value: "repeat(2, 1fr)" },
-  "gtc-3": { prop: "gridTemplateColumns", value: "repeat(3, 1fr)" },
-  "gtc-4": { prop: "gridTemplateColumns", value: "repeat(4, 1fr)" },
-  "gtc-5": { prop: "gridTemplateColumns", value: "repeat(5, 1fr)" },
-  "gtc-6": { prop: "gridTemplateColumns", value: "repeat(6, 1fr)" },
-  // Backdrop filter
-  "bdf-blur-4": { prop: "backdropFilter", value: "blur(4px)" },
-  "bdf-blur-8": { prop: "backdropFilter", value: "blur(8px)" },
-  "bdf-blur-10": { prop: "backdropFilter", value: "blur(10px)" },
-  // Transform
-  "tm-ty-0": { prop: "transform", value: "translateY(0)" },
-  "tm-ty-n10": { prop: "transform", value: "translateY(-10px)" },
-  "tm-ty-n50p": { prop: "transform", value: "translateY(-50%)" },
-  // Filter
-  "flt-blur-1": { prop: "filter", value: "blur(1px)" },
-  // Shadow presets (reverse mapping)
-  "sh-0": { prop: "boxShadow", value: "none" },
-  "sh-1": { prop: "boxShadow", value: "0 1px 2px rgba(0, 0, 0, 0.05)" },
-  "sh-2": { prop: "boxShadow", value: "0 4px 12px rgba(0, 0, 0, 0.1)" },
-  "sh-3": { prop: "boxShadow", value: "0 8px 24px rgba(0, 0, 0, 0.15)" },
-  "sh-4": { prop: "boxShadow", value: "0 12px 32px rgba(0, 0, 0, 0.2)" },
-  // Gradient presets (reverse mapping)
-  "gr-1": { prop: "background", value: "linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%)" },
-  "gr-2": { prop: "background", value: "linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%)" },
-  // Border presets (reverse mapping)
-  "bd-0": { prop: "border", value: "1px solid var(--border)" },
-  "bd-1": { prop: "border", value: "1px solid var(--border-light)" }
+var staticUtilityReverse = (() => {
+  const reverse = {};
+  for (const [prop, values] of Object.entries(staticUtilities)) {
+    for (const [value, className] of Object.entries(values)) {
+      if (!reverse[className]) {
+        reverse[className] = { prop, value };
+      }
+    }
+  }
+  return reverse;
+})();
+var keywordValues = {
+  w: { auto: "auto", full: "100%", screen: "100vw", fit: "fit-content", min: "min-content", max: "max-content" },
+  h: { auto: "auto", full: "100%", screen: "100vh", fit: "fit-content", min: "min-content", max: "max-content" },
+  "max-w": { full: "100%", none: "none", screen: "100vw", fit: "fit-content", min: "min-content", max: "max-content" },
+  "max-h": { full: "100%", none: "none", screen: "100vh", fit: "fit-content", min: "min-content", max: "max-content" },
+  "min-w": { auto: "auto", full: "100%", fit: "fit-content", min: "min-content", max: "max-content" },
+  "min-h": { auto: "auto", full: "100%", screen: "100vh", fit: "fit-content", min: "min-content", max: "max-content" },
+  m: { auto: "auto" },
+  mt: { auto: "auto" },
+  mr: { auto: "auto" },
+  mb: { auto: "auto" },
+  ml: { auto: "auto" },
+  mx: { auto: "auto" },
+  my: { auto: "auto" },
+  top: { auto: "auto", full: "100%" },
+  right: { auto: "auto", full: "100%" },
+  bottom: { auto: "auto", full: "100%" },
+  left: { auto: "auto", full: "100%" },
+  inset: { auto: "auto", full: "100%" },
+  basis: { auto: "auto", full: "100%" },
+  rounded: { none: "0", full: "9999px" },
+  "rounded-tl": { none: "0", full: "9999px" },
+  "rounded-tr": { none: "0", full: "9999px" },
+  "rounded-bl": { none: "0", full: "9999px" },
+  "rounded-br": { none: "0", full: "9999px" },
+  z: { auto: "auto" },
+  leading: { normal: "normal" },
+  tracking: { normal: "normal" }
 };
+var genericKeywordRoots = /* @__PURE__ */ new Set(["cursor", "align", "origin", "object", "list"]);
+var integerValueRoots = /* @__PURE__ */ new Set(["z", "order", "flex", "grow", "shrink"]);
+var colorTokenProps = /* @__PURE__ */ new Set([
+  "color",
+  "backgroundColor",
+  "borderColor",
+  "accentColor",
+  "outlineColor"
+]);
 var shadowPresets = {
   "0": "none",
   "1": "0 1px 2px rgba(0, 0, 0, 0.05)",
@@ -3323,30 +3799,216 @@ var borderPresets = {
   "0": "1px solid var(--border)",
   "1": "1px solid var(--border-light)"
 };
+var presetClassReverse = (() => {
+  const reverse = {};
+  for (const [key, value] of Object.entries(shadowPresets)) {
+    reverse[`shadow-${key}`] = { prop: "boxShadow", value };
+  }
+  for (const [key, value] of Object.entries(gradientPresets)) {
+    reverse[`bg-gradient-${key}`] = { prop: "background", value };
+  }
+  for (const [key, value] of Object.entries(borderPresets)) {
+    reverse[`border-preset-${key}`] = { prop: "border", value };
+  }
+  return reverse;
+})();
 
-// lib/shared/utilityClassMapper.ts
-var functionAbbreviations = {
-  blur: "bl",
-  translateY: "ty",
-  translateX: "tx",
-  translate: "t",
-  scale: "sc",
-  scaleX: "scx",
-  scaleY: "scy",
-  rotate: "ro",
-  skew: "sk",
-  skewX: "skx",
-  skewY: "sky",
-  repeat: "re",
-  minmax: "mm",
-  calc: "ca"
+// lib/shared/utilityClassNames.ts
+var SORTED_ROOTS = Object.keys(prefixToCSSProperty).sort((a, b) => b.length - a.length);
+function camelToKebab(prop) {
+  return prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+var kebabToCamelMap = (() => {
+  const map = {};
+  for (const prop of propertyOrder) {
+    map[camelToKebab(prop)] = prop;
+  }
+  return map;
+})();
+function cssPropertyToCamel(property) {
+  return kebabToCamelMap[property] ?? property.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+var ROOT_CAMEL_OVERRIDES = {
+  px: "paddingInline",
+  py: "paddingBlock",
+  mx: "marginInline",
+  my: "marginBlock"
 };
+function transformOutsideUrl(input, transform) {
+  let result = "";
+  let i = 0;
+  const lower = input.toLowerCase();
+  while (i < input.length) {
+    const idx = lower.indexOf("url(", i);
+    if (idx === -1) {
+      result += transform(input.slice(i));
+      break;
+    }
+    result += transform(input.slice(i, idx));
+    let depth = 0;
+    let j = idx + 3;
+    for (; j < input.length; j++) {
+      if (input[j] === "(") depth++;
+      else if (input[j] === ")") {
+        depth--;
+        if (depth === 0) {
+          j++;
+          break;
+        }
+      }
+    }
+    result += input.slice(idx, j);
+    i = j;
+  }
+  return result;
+}
+function encodeArbitraryValue(value) {
+  let ok = true;
+  const encoded = transformOutsideUrl(value, (segment) => {
+    if (/[_"'\\[\]]/.test(segment)) ok = false;
+    return segment.replace(/\s+/g, "_");
+  });
+  if (!ok) return null;
+  if (/[\s"'\\[\]]/.test(encoded.replace(/^\[|\]$/g, ""))) return null;
+  return encoded;
+}
+function decodeArbitraryValue(encoded) {
+  return transformOutsideUrl(encoded, (segment) => segment.replace(/_/g, " "));
+}
+var FONT_SIZE_KEYWORDS = /* @__PURE__ */ new Set([
+  "xx-small",
+  "x-small",
+  "small",
+  "medium",
+  "large",
+  "x-large",
+  "xx-large",
+  "xxx-large",
+  "larger",
+  "smaller"
+]);
+function isColorValue(value) {
+  if (value.startsWith("#") || value.startsWith("var(")) return true;
+  if (/^(rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|hwb|color|color-mix)\(/i.test(value)) return true;
+  if (value === "transparent" || value === "currentColor" || value === "currentcolor") return true;
+  return isCssNamedColor(value);
+}
+function isFontSizeValue(value) {
+  if (/^[\d.+-]/.test(value)) return true;
+  if (/^(calc|clamp|min|max)\(/i.test(value)) return true;
+  return FONT_SIZE_KEYWORDS.has(value);
+}
+function isFontWeightValue(value) {
+  return /^\d+(\.\d+)?$/.test(value);
+}
+function isImageValue(value) {
+  return /^(url|linear-gradient|radial-gradient|conic-gradient|repeating-linear-gradient|repeating-radial-gradient|repeating-conic-gradient|image-set|cross-fade|element)\(/i.test(
+    value
+  );
+}
+function isLengthValue(value) {
+  return /^-?[\d.]+[a-z%]*$/i.test(value);
+}
+function resolveRootProperty(root, value) {
+  switch (root) {
+    case "text":
+      return isFontSizeValue(value) ? "font-size" : "color";
+    case "font":
+      return isFontWeightValue(value) ? "font-weight" : "font-family";
+    case "bg":
+      return isImageValue(value) ? "background-image" : "background-color";
+    case "border":
+      return !value.includes(" ") && isColorValue(value) ? "border-color" : "border";
+    case "outline": {
+      if (value.includes(" ") || value === "none") return "outline";
+      if (isColorValue(value)) return "outline-color";
+      if (isLengthValue(value)) return "outline-width";
+      return "outline";
+    }
+    default:
+      return prefixToCSSProperty[root] ?? root;
+  }
+}
+function splitVariantPrefix(className) {
+  const match = className.match(/^([a-z][a-z0-9_-]*):(.+)$/);
+  if (match) {
+    return { breakpoint: match[1], base: match[2] };
+  }
+  return { breakpoint: null, base: className };
+}
+function breakpointClassPrefix(breakpointName) {
+  return `${breakpointName.toLowerCase()}:`;
+}
+var HASH_VALUE_RE = /^h[0-9a-z]+$/;
+function parseUtilityClass(className) {
+  const stat = staticUtilityReverse[className];
+  if (stat) {
+    return { property: camelToKebab(stat.prop), value: stat.value, root: null, kind: "static" };
+  }
+  const preset = presetClassReverse[className];
+  if (preset) {
+    return { property: camelToKebab(preset.prop), value: preset.value, root: null, kind: "preset" };
+  }
+  const arbProp = className.match(/^\[([a-z-]+):(.+)\]$/);
+  if (arbProp) {
+    return {
+      property: arbProp[1],
+      value: decodeArbitraryValue(arbProp[2]),
+      root: null,
+      kind: "arbitrary-property"
+    };
+  }
+  for (const root of SORTED_ROOTS) {
+    if (!className.startsWith(`${root}-`)) continue;
+    const rest = className.slice(root.length + 1);
+    if (!rest) continue;
+    const parsed = parseRootValue(root, rest);
+    if (parsed) return parsed;
+  }
+  return null;
+}
+function parseRootValue(root, rest) {
+  if (rest.startsWith("[") && rest.endsWith("]") && rest.length > 2) {
+    const value = decodeArbitraryValue(rest.slice(1, -1));
+    return { property: resolveRootProperty(root, value), value, root, kind: "arbitrary" };
+  }
+  const varMatch = rest.match(/^\((?:([a-z-]+):)?(--[\w-]+)\)$/);
+  if (varMatch) {
+    const hint = varMatch[1];
+    const value = `var(${varMatch[2]})`;
+    let property;
+    if (root === "text") {
+      property = hint === "length" ? "font-size" : "color";
+    } else if (root === "font") {
+      property = hint === "number" ? "font-weight" : "font-family";
+    } else {
+      property = resolveRootProperty(root, value);
+    }
+    return { property, value, root, kind: "var" };
+  }
+  const keyword = keywordValues[root]?.[rest];
+  if (keyword !== void 0) {
+    return { property: resolveRootProperty(root, keyword), value: keyword, root, kind: "keyword" };
+  }
+  if (genericKeywordRoots.has(root) && /^[a-z][a-z-]*$/.test(rest)) {
+    return { property: resolveRootProperty(root, rest), value: rest, root, kind: "keyword" };
+  }
+  if (integerValueRoots.has(root) && /^-?\d+$/.test(rest)) {
+    return { property: prefixToCSSProperty[root], value: rest, root, kind: "numeric" };
+  }
+  if (root === "opacity" && /^\d{1,3}$/.test(rest)) {
+    return { property: "opacity", value: String(Number(rest) / 100), root, kind: "numeric" };
+  }
+  if (HASH_VALUE_RE.test(rest)) {
+    return { property: prefixToCSSProperty[root], value: null, root, kind: "hash" };
+  }
+  return null;
+}
+
+// lib/shared/utilityClassMapper.ts
 function isStyleMapping(value) {
   return typeof value === "object" && value !== null && "_mapping" in value && value._mapping === true;
 }
-function sanitizeClassValue(value) {
-  return value.replace(/\s+/g, "-").replace(/[()]/g, "").replace(/,/g, "_").replace(/%/g, "p").replace(/\./g, "d").replace(/[^\w-]/g, "");
-}
 function shortHash(input) {
   let hash = 2166136261;
   for (let i = 0; i < input.length; i++) {
@@ -3355,20 +4017,12 @@ function shortHash(input) {
   }
   return (hash >>> 0).toString(36);
 }
-function hasIllegalClassChars(className) {
-  return /[^\w-]/.test(className);
+function isBareColorToken(value) {
+  if (!/^[a-zA-Z][\w-]*$/.test(value)) return false;
+  if (isColorValue(value)) return false;
+  return true;
 }
 function propertyValueToClass(prop, value) {
-  const prefix = propertyMap[prop];
-  if (!prefix) {
-    const stringValue2 = String(value);
-    const dynamicPrefix = prop.replace(/([A-Z])/g, "-$1").toLowerCase().split("-").filter(Boolean).map((word) => word.slice(0, 2)).join("");
-    const sanitizedValue = sanitizeClassValue(stringValue2);
-    const className2 = `${dynamicPrefix}-${sanitizedValue}`;
-    const cssProperty = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-    registerDynamicStyle(className2, cssProperty, value);
-    return className2;
-  }
   let stringValue = String(value);
   if (prop === "fontFamily") {
     stringValue = stringValue.split(",").map((font) => {
@@ -3379,69 +4033,82 @@ function propertyValueToClass(prop, value) {
       return trimmed;
     }).join(", ");
   }
-  let className = null;
-  if (specialValueMappings[prop]) {
-    const mapping = specialValueMappings[prop];
-    if (mapping[stringValue]) {
-      className = mapping[stringValue];
-    }
-  }
-  if (!className && prop === "boxShadow" && shadowPresets[stringValue]) {
-    className = `sh-${stringValue}`;
+  const staticClass = staticUtilities[prop]?.[stringValue];
+  if (staticClass) {
+    registerStyleValue(staticClass, stringValue);
+    return staticClass;
   }
-  if (!className && (prop === "background" || prop === "backgroundImage") && gradientPresets[stringValue]) {
-    className = `gr-${stringValue}`;
+  if (prop === "boxShadow" && shadowPresets[stringValue]) {
+    const className2 = `shadow-${stringValue}`;
+    registerStyleValue(className2, shadowPresets[stringValue]);
+    return className2;
   }
-  if (!className && prop === "border" && borderPresets[stringValue]) {
-    className = `bd-${stringValue}`;
+  if ((prop === "background" || prop === "backgroundImage") && gradientPresets[stringValue]) {
+    const className2 = `bg-gradient-${stringValue}`;
+    registerStyleValue(className2, gradientPresets[stringValue]);
+    return className2;
   }
-  if (!className && stringValue.includes("(") && stringValue.includes(")")) {
-    const funcMatch = stringValue.match(/^([a-zA-Z]+)\((.+)\)$/);
-    if (funcMatch) {
-      const [, funcName, args] = funcMatch;
-      const abbrev = functionAbbreviations[funcName] || funcName.slice(0, 2);
-      const argNormalized = args.replace(/,\s*/g, "-").replace(/\s+/g, "").replace(/-(\d)/g, "n$1").replace(/px$/i, "").replace(/%$/, "p");
-      className = `${prefix}-${abbrev}${argNormalized}`;
-    }
+  if (prop === "border" && borderPresets[stringValue]) {
+    const className2 = `border-preset-${stringValue}`;
+    registerStyleValue(className2, borderPresets[stringValue]);
+    return className2;
   }
-  if (!className && stringValue.includes("var(")) {
-    const varMatch = stringValue.match(/var\((--[\w-]+)\)/);
-    if (varMatch) {
-      const varName = varMatch[1].replace("--", "");
-      className = `${prefix}-${varName}`;
-    }
+  const root = propertyMap[prop];
+  if (!root) {
+    const cssProperty = camelToKebab(prop);
+    const encoded = encodeArbitraryValue(stringValue);
+    const className2 = encoded != null ? `[${cssProperty}:${encoded}]` : `${cssProperty}-h${shortHash(stringValue)}`;
+    registerDynamicStyle(className2, cssProperty, value);
+    return className2;
   }
-  if (!className && (prop === "color" || prop === "backgroundColor" || prop === "borderColor") && !stringValue.match(/^\d/) && !stringValue.includes("#") && !stringValue.includes("rgb")) {
-    className = `${prefix}-${stringValue}`;
+  let className = null;
+  const kwTable = keywordValues[root];
+  if (kwTable) {
+    for (const [keyword, cssValue] of Object.entries(kwTable)) {
+      if (cssValue === stringValue) {
+        className = `${root}-${keyword}`;
+        break;
+      }
+    }
   }
-  if (!className && (stringValue.match(/^\d+px$/) || stringValue.match(/^\d+em$/))) {
-    className = `${prefix}-${stringValue}`;
+  if (!className && genericKeywordRoots.has(root) && /^[a-z][a-z-]*$/.test(stringValue)) {
+    className = `${root}-${stringValue}`;
   }
-  if (!className && stringValue.match(/^\d+%$/)) {
-    const percentValue = stringValue.replace("%", "p");
-    className = `${prefix}-${percentValue}`;
+  if (!className && integerValueRoots.has(root) && /^-?\d+$/.test(stringValue)) {
+    className = `${root}-${stringValue}`;
   }
-  if (!className && stringValue.includes(" ")) {
-    const spacedValue = stringValue.replace(/\s+/g, "-");
-    className = `${prefix}-${spacedValue}`;
+  if (!className && prop === "opacity") {
+    const num = Number(stringValue);
+    if (Number.isFinite(num) && num >= 0 && num <= 1) {
+      const scaled = Math.round(num * 100);
+      if (Math.abs(num * 100 - scaled) < 1e-9) {
+        className = `opacity-${scaled}`;
+      }
+    }
   }
-  if (!className && stringValue === "auto") {
-    className = `${prefix}-auto`;
+  if (!className) {
+    const varMatch = stringValue.match(/^var\((--[\w-]+)\)$/);
+    if (varMatch) {
+      if (prop === "fontSize") className = `text-(length:${varMatch[1]})`;
+      else if (prop === "fontWeight") className = `font-(number:${varMatch[1]})`;
+      else className = `${root}-(${varMatch[1]})`;
+    }
   }
-  if (!className && stringValue.includes("/")) {
-    const slashValue = stringValue.replace(/\//g, "s");
-    className = `${prefix}-${slashValue}`;
+  if (!className && colorTokenProps.has(prop) && isBareColorToken(stringValue)) {
+    className = `${root}-(--${stringValue})`;
   }
   if (!className) {
-    className = `${prefix}-${stringValue}`;
+    const encoded = encodeArbitraryValue(stringValue);
+    if (encoded != null) {
+      className = `${root}-[${encoded}]`;
+    }
   }
-  if (hasIllegalClassChars(className)) {
-    className = `${prefix}-h${shortHash(stringValue)}`;
+  if (!className) {
+    className = `${root}-h${shortHash(stringValue)}`;
   }
   registerStyleValue(className, value);
   return className;
 }
-var propertyOrder = Object.keys(propertyMap);
 function stylesToClasses(styles) {
   if (!styles) return [];
   const sortedProps = Object.keys(styles).sort((a, b) => {
@@ -3516,11 +4183,7 @@ function responsiveStylesToClasses(styles, options) {
     let baseSource = responsiveStyles.base;
     let mobileSource = responsiveStyles.mobile;
     if (fluidActive && responsiveScales?.enabled === true && baseSource && mobileSource) {
-      const { patchedBase, patchedMobile } = consumeMobileIntoBaseClamp(
-        baseSource,
-        mobileSource,
-        responsiveScales
-      );
+      const { patchedBase, patchedMobile } = consumeMobileIntoBaseClamp(baseSource, mobileSource, responsiveScales);
       baseSource = patchedBase;
       mobileSource = patchedMobile;
     }
@@ -3531,12 +4194,14 @@ function responsiveStylesToClasses(styles, options) {
     if (responsiveStyles.tablet) {
       const tablet = fluidActive ? transformContainerIntent(responsiveStyles.tablet) : responsiveStyles.tablet;
       const tabletClasses = stylesToClasses(tablet);
-      classes.push(...tabletClasses.map((cls) => `t-${cls}`));
+      const prefix = breakpointClassPrefix("tablet");
+      classes.push(...tabletClasses.map((cls) => `${prefix}${cls}`));
     }
     if (mobileSource && Object.keys(mobileSource).length > 0) {
       const mobile = fluidActive ? transformContainerIntent(mobileSource) : mobileSource;
       const mobileClasses = stylesToClasses(mobile);
-      classes.push(...mobileClasses.map((cls) => `mob-${cls}`));
+      const prefix = breakpointClassPrefix("mobile");
+      classes.push(...mobileClasses.map((cls) => `${prefix}${cls}`));
     }
   } else {
     const flat = fluidActive ? transformContainerIntent(styles) : styles;
@@ -3545,52 +4210,45 @@ function responsiveStylesToClasses(styles, options) {
   return classes;
 }
 function classToStyle(className) {
-  let cleanClass = className;
-  let responsivePrefix = "";
-  if (className.startsWith("t-")) {
-    responsivePrefix = "t";
-    cleanClass = className.slice(2);
-  } else if (className.startsWith("mob-")) {
-    responsivePrefix = "mob";
-    cleanClass = className.slice(4);
-  }
-  if (classToStyleSpecialCases[cleanClass]) {
-    return classToStyleSpecialCases[cleanClass];
-  }
-  const match = cleanClass.match(/^([a-z-]+)-(.*?)$/);
-  if (!match) return null;
-  const [, prefix, value] = match;
-  let prop = "";
-  for (const [key, val] of Object.entries(propertyMap)) {
-    if (val === prefix) {
-      prop = key;
-      break;
+  const { base: cleanClass } = splitVariantPrefix(className);
+  if (staticUtilityReverse[cleanClass]) {
+    return staticUtilityReverse[cleanClass];
+  }
+  if (presetClassReverse[cleanClass]) {
+    return presetClassReverse[cleanClass];
+  }
+  const parsed = parseUtilityClass(cleanClass);
+  if (!parsed) {
+    const dynamic = getDynamicStyle(cleanClass);
+    if (dynamic) {
+      return { prop: cssPropertyToCamel(dynamic.property), value: String(dynamic.value) };
     }
+    return null;
   }
-  if (!prop) return null;
-  if (/^h[0-9a-z]+$/.test(value)) {
-    const registered = getStyleValue(cleanClass);
-    if (registered != null) {
-      return { prop, value: String(registered) };
-    }
+  if (parsed.kind === "arbitrary-property") {
+    return { prop: cssPropertyToCamel(parsed.property), value: parsed.value };
   }
-  if (value.includes("background") || value.includes("text") || value.includes("border")) {
-    return { prop, value: `var(--${value})` };
+  if (parsed.kind === "hash") {
+    const registered = getStyleValue(cleanClass);
+    if (registered == null) return null;
+    const value2 = String(registered);
+    const root2 = parsed.root;
+    const prop2 = ROOT_CAMEL_OVERRIDES[root2] ?? cssPropertyToCamel(resolveRootProperty(root2, value2));
+    return { prop: prop2, value: value2 };
+  }
+  const root = parsed.root;
+  const prop = root && ROOT_CAMEL_OVERRIDES[root] ? ROOT_CAMEL_OVERRIDES[root] : cssPropertyToCamel(parsed.property);
+  let value = parsed.value;
+  if (parsed.kind === "var" && colorTokenProps.has(prop)) {
+    value = value.replace(/^var\(--([\w-]+)\)$/, "$1");
   }
   return { prop, value };
 }
 function classesToStyles(classes) {
   const styles = { base: {}, tablet: {}, mobile: {} };
   for (const className of classes) {
-    let breakpoint = "base";
-    let cleanClass = className;
-    if (className.startsWith("t-")) {
-      breakpoint = "tablet";
-      cleanClass = className.slice(2);
-    } else if (className.startsWith("mob-")) {
-      breakpoint = "mobile";
-      cleanClass = className.slice(4);
-    }
+    const { breakpoint: variant, base: cleanClass } = splitVariantPrefix(className);
+    const breakpoint = variant === "tablet" ? "tablet" : variant === "mobile" ? "mobile" : "base";
     const styleEntry = classToStyle(cleanClass);
     if (styleEntry) {
       if (!styles[breakpoint]) {
@@ -3635,11 +4293,7 @@ function validatePath(path) {
   for (let i = 0; i < path.length; i++) {
     const value = path[i];
     if (typeof value !== "number" || isNaN(value) || !isFinite(value)) {
-      throw new InvalidPathError(
-        `Invalid path value at index ${i}: expected number, got ${typeof value}`,
-        path,
-        i
-      );
+      throw new InvalidPathError(`Invalid path value at index ${i}: expected number, got ${typeof value}`, path, i);
     }
   }
 }
@@ -3858,9 +4512,7 @@ function getVariableName(index) {
   return `--is-${index}`;
 }
 function hasAnyMappings(style) {
-  const isResponsive = "base" in style || Object.keys(style).some(
-    (key) => key === "base" || key === "tablet" || key === "mobile"
-  );
+  const isResponsive = "base" in style || Object.keys(style).some((key) => key === "base" || key === "tablet" || key === "mobile");
   if (isResponsive) {
     const responsive = style;
     for (const breakpointStyle of Object.values(responsive)) {
@@ -3889,9 +4541,7 @@ function extractInteractiveStyleMappings(interactiveStyles) {
   let variableIndex = 0;
   const resolvedStyles = interactiveStyles.map((rule, ruleIndex) => {
     const style = rule.style;
-    const isResponsive = "base" in style || Object.keys(style).some(
-      (key) => key === "base" || key === "tablet" || key === "mobile"
-    );
+    const isResponsive = "base" in style || Object.keys(style).some((key) => key === "base" || key === "tablet" || key === "mobile");
     if (isResponsive) {
       const responsive = style;
       const resolvedResponsive = {};
@@ -4100,195 +4750,21 @@ function toFriendlyError(input) {
   };
 }
 
-// lib/shared/cssNamedColors.ts
-var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
-  // CSS Level 4 named colors
-  "aliceblue",
-  "antiquewhite",
-  "aqua",
-  "aquamarine",
-  "azure",
-  "beige",
-  "bisque",
-  "black",
-  "blanchedalmond",
-  "blue",
-  "blueviolet",
-  "brown",
-  "burlywood",
-  "cadetblue",
-  "chartreuse",
-  "chocolate",
-  "coral",
-  "cornflowerblue",
-  "cornsilk",
-  "crimson",
-  "cyan",
-  "darkblue",
-  "darkcyan",
-  "darkgoldenrod",
-  "darkgray",
-  "darkgreen",
-  "darkgrey",
-  "darkkhaki",
-  "darkmagenta",
-  "darkolivegreen",
-  "darkorange",
-  "darkorchid",
-  "darkred",
-  "darksalmon",
-  "darkseagreen",
-  "darkslateblue",
-  "darkslategray",
-  "darkslategrey",
-  "darkturquoise",
-  "darkviolet",
-  "deeppink",
-  "deepskyblue",
-  "dimgray",
-  "dimgrey",
-  "dodgerblue",
-  "firebrick",
-  "floralwhite",
-  "forestgreen",
-  "fuchsia",
-  "gainsboro",
-  "ghostwhite",
-  "gold",
-  "goldenrod",
-  "gray",
-  "green",
-  "greenyellow",
-  "grey",
-  "honeydew",
-  "hotpink",
-  "indianred",
-  "indigo",
-  "ivory",
-  "khaki",
-  "lavender",
-  "lavenderblush",
-  "lawngreen",
-  "lemonchiffon",
-  "lightblue",
-  "lightcoral",
-  "lightcyan",
-  "lightgoldenrodyellow",
-  "lightgray",
-  "lightgreen",
-  "lightgrey",
-  "lightpink",
-  "lightsalmon",
-  "lightseagreen",
-  "lightskyblue",
-  "lightslategray",
-  "lightslategrey",
-  "lightsteelblue",
-  "lightyellow",
-  "lime",
-  "limegreen",
-  "linen",
-  "magenta",
-  "maroon",
-  "mediumaquamarine",
-  "mediumblue",
-  "mediumorchid",
-  "mediumpurple",
-  "mediumseagreen",
-  "mediumslateblue",
-  "mediumspringgreen",
-  "mediumturquoise",
-  "mediumvioletred",
-  "midnightblue",
-  "mintcream",
-  "mistyrose",
-  "moccasin",
-  "navajowhite",
-  "navy",
-  "oldlace",
-  "olive",
-  "olivedrab",
-  "orange",
-  "orangered",
-  "orchid",
-  "palegoldenrod",
-  "palegreen",
-  "paleturquoise",
-  "palevioletred",
-  "papayawhip",
-  "peachpuff",
-  "peru",
-  "pink",
-  "plum",
-  "powderblue",
-  "purple",
-  "rebeccapurple",
-  "red",
-  "rosybrown",
-  "royalblue",
-  "saddlebrown",
-  "salmon",
-  "sandybrown",
-  "seagreen",
-  "seashell",
-  "sienna",
-  "silver",
-  "skyblue",
-  "slateblue",
-  "slategray",
-  "slategrey",
-  "snow",
-  "springgreen",
-  "steelblue",
-  "tan",
-  "teal",
-  "thistle",
-  "tomato",
-  "turquoise",
-  "violet",
-  "wheat",
-  "white",
-  "whitesmoke",
-  "yellow",
-  "yellowgreen",
-  // CSS color keywords
-  "transparent",
-  "currentcolor",
-  // CSS-wide keywords (should never be wrapped in var())
-  "inherit",
-  "initial",
-  "unset",
-  "revert"
-]);
-function isCssNamedColor(value) {
-  return CSS_NAMED_COLORS.has(value.toLowerCase());
-}
-
 // lib/shared/cssGeneration.ts
-var SORTED_PREFIXES = Object.keys(prefixToCSSProperty).sort((a, b) => b.length - a.length);
 var cssPropertyOrderMap = (() => {
   const map = /* @__PURE__ */ new Map();
-  const props = Object.keys(propertyMap);
-  for (let i = 0; i < props.length; i++) {
-    const kebab = props[i].replace(/([A-Z])/g, "-$1").toLowerCase();
-    map.set(kebab, i);
+  for (let i = 0; i < propertyOrder.length; i++) {
+    const kebab = camelToKebab(propertyOrder[i]);
+    if (!map.has(kebab)) map.set(kebab, i);
   }
   return map;
 })();
 function getClassPropertyOrder(className) {
-  const extracted = extractPropertyAndValue(className);
-  if (extracted) {
-    const idx = cssPropertyOrderMap.get(extracted.property);
+  const parsed = parseUtilityClass(className);
+  if (parsed) {
+    const idx = cssPropertyOrderMap.get(parsed.property);
     if (idx !== void 0) return idx;
   }
-  const rule = utilityClassRules[className];
-  if (rule) {
-    const propMatch = rule.match(/^([a-z-]+):/);
-    if (propMatch) {
-      const idx = cssPropertyOrderMap.get(propMatch[1]);
-      if (idx !== void 0) return idx;
-    }
-  }
   return Infinity;
 }
 function sortClassesByPropertyOrder(classes) {
@@ -4298,18 +4774,18 @@ function getResponsiveMode(scales) {
   return scales?.mode ?? "breakpoints";
 }
 var AUTO_RESPONSIVE_TYPE_MAP = {
-  "padding": "padding",
+  padding: "padding",
   "padding-left": "padding",
   "padding-right": "padding",
   "padding-top": "padding",
   "padding-bottom": "padding",
-  "margin": "margin",
+  margin: "margin",
   "margin-left": "margin",
   "margin-right": "margin",
   "margin-top": "margin",
   "margin-bottom": "margin",
   "font-size": "fontSize",
-  "gap": "gap",
+  gap: "gap",
   "row-gap": "gap",
   "column-gap": "gap",
   "border-radius": "borderRadius",
@@ -4317,239 +4793,98 @@ var AUTO_RESPONSIVE_TYPE_MAP = {
   "border-top-right-radius": "borderRadius",
   "border-bottom-left-radius": "borderRadius",
   "border-bottom-right-radius": "borderRadius",
-  "width": "size",
-  "height": "size",
+  width: "size",
+  height: "size",
   "max-width": "size",
   "max-height": "size",
   "min-width": "size",
   "min-height": "size"
 };
 function escapeCSSClassName(className) {
-  return className.replace(/[.#[\](){};<>+~:,%\/\s]/g, "\\$&");
-}
-var utilityClassRules = {
-  // Display utilities (short forms from specialValueMappings)
-  f: "display: flex;",
-  "fd-col": "flex-direction: column;",
-  "fd-row": "flex-direction: row;",
-  g: "display: grid;",
-  b: "display: block;",
-  i: "display: inline;",
-  ib: "display: inline-block;",
-  h: "display: none;",
-  "if": "display: inline-flex;",
-  ig: "display: inline-grid;",
-  // Justify Content (short forms)
-  "jc-c": "justify-content: center;",
-  "jc-s": "justify-content: flex-start;",
-  "jc-e": "justify-content: flex-end;",
-  "jc-b": "justify-content: space-between;",
-  "jc-a": "justify-content: space-around;",
-  "jc-ev": "justify-content: space-evenly;",
-  // Align Items (short forms)
-  "ai-c": "align-items: center;",
-  "ai-s": "align-items: flex-start;",
-  "ai-e": "align-items: flex-end;",
-  "ai-st": "align-items: stretch;",
-  "ai-b": "align-items: baseline;",
-  // Overflow (short forms)
-  "o-h": "overflow: hidden;",
-  "o-a": "overflow: auto;",
-  "o-s": "overflow: scroll;",
-  "o-v": "overflow: visible;",
-  // Cursor (full forms)
-  "cursor-pointer": "cursor: pointer;",
-  "cursor-default": "cursor: default;",
-  // Pointer events
-  "pe-none": "pointer-events: none;",
-  "pe-auto": "pointer-events: auto;",
-  // User select
-  "us-none": "user-select: none;",
-  "us-auto": "user-select: auto;",
-  "us-text": "user-select: text;",
-  "us-all": "user-select: all;",
-  // White space
-  "whs-normal": "white-space: normal;",
-  "whs-nowrap": "white-space: nowrap;",
-  "whs-pre": "white-space: pre;",
-  "whs-pre-wrap": "white-space: pre-wrap;",
-  "whs-pre-line": "white-space: pre-line;",
-  // Shadow presets
-  "sh-0": "box-shadow: none;",
-  "sh-1": "box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);",
-  "sh-2": "box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);",
-  "sh-3": "box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);",
-  "sh-4": "box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);",
-  // Gradient presets
-  "gr-1": "background: linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%);",
-  "gr-2": "background: linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%);",
-  // Border presets
-  "bd-0": "border: 1px solid var(--border);",
-  "bd-1": "border: 1px solid var(--border-light);"
-  // Note: CSS functions (blur, translateY, scale, rotate, repeat) are now handled
-  // dynamically via the styleValueRegistry - no need to hardcode specific values here
-};
-function extractPropertyAndValue(className) {
-  for (const knownPrefix of SORTED_PREFIXES) {
-    if (className.startsWith(knownPrefix + "-")) {
-      const classValue = className.substring(knownPrefix.length + 1);
-      const cssProp = prefixToCSSProperty[knownPrefix];
-      if (cssProp) {
-        if (/^h[0-9a-z]+$/.test(classValue)) {
-          return null;
-        }
-        return { property: cssProp, value: classValue };
-      }
-    }
-  }
-  return null;
+  return className.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
 }
-function resolveScalablePropertyValue(className) {
-  const direct = extractPropertyAndValue(className);
-  if (direct) return direct;
-  for (const knownPrefix of SORTED_PREFIXES) {
-    if (!className.startsWith(knownPrefix + "-")) continue;
-    const classValue = className.substring(knownPrefix.length + 1);
-    if (!/^h[0-9a-z]+$/.test(classValue)) continue;
-    const cssProp = prefixToCSSProperty[knownPrefix];
-    if (!cssProp) continue;
-    const registered = getStyleValue(className);
-    if (registered == null || registered === "") continue;
-    return { property: cssProp, value: String(registered) };
+var utilityClassRules = (() => {
+  const rules = {};
+  for (const [className, entry] of Object.entries(staticUtilityReverse)) {
+    rules[className] = `${camelToKebab(entry.prop)}: ${entry.value};`;
   }
-  return null;
-}
+  for (const [className, entry] of Object.entries(presetClassReverse)) {
+    rules[className] = `${camelToKebab(entry.prop)}: ${entry.value};`;
+  }
+  return rules;
+})();
+function resolveScalablePropertyValue(className) {
+  const parsed = parseUtilityClass(className);
+  if (!parsed) return null;
+  if (parsed.value != null) return { property: parsed.property, value: parsed.value };
+  const registered = getStyleValue(className);
+  if (registered == null || registered === "") return null;
+  const value = String(registered);
+  const property = parsed.root ? resolveRootProperty(parsed.root, value) : parsed.property;
+  return { property, value };
+}
+var borderSideMap = {
+  "border-t": "border-top",
+  "border-r": "border-right",
+  "border-b": "border-bottom",
+  "border-l": "border-left"
+};
 function generateRuleForClass(className) {
   if (utilityClassRules[className]) {
     return utilityClassRules[className];
   }
-  let prefix = "";
-  let classValue = "";
-  for (const knownPrefix of SORTED_PREFIXES) {
-    if (className.startsWith(knownPrefix + "-")) {
-      prefix = knownPrefix;
-      classValue = className.substring(knownPrefix.length + 1);
-      break;
-    }
-  }
-  if (!prefix || !classValue) {
+  const parsed = parseUtilityClass(className);
+  if (!parsed) {
     const dynamicStyle = getDynamicStyle(className);
     if (dynamicStyle) {
       return `${dynamicStyle.property}: ${dynamicStyle.value};`;
     }
     return null;
   }
-  const cssProp = prefixToCSSProperty[prefix];
-  if (!cssProp) {
+  if (parsed.kind === "arbitrary-property") {
     const dynamicStyle = getDynamicStyle(className);
-    if (dynamicStyle) {
-      return `${dynamicStyle.property}: ${dynamicStyle.value};`;
-    }
-    return null;
+    const value2 = dynamicStyle ? dynamicStyle.value : parsed.value;
+    return `${parsed.property}: ${value2};`;
   }
-  const borderSideMap = {
-    "bt": "border-top",
-    "bb": "border-bottom",
-    "bl": "border-left",
-    "border-r": "border-right"
-  };
-  if (borderSideMap[prefix] && classValue.includes("-")) {
-    const parts = classValue.split("-");
-    const width = parts[0];
-    const borderStyle = parts[1] || "solid";
-    const side = borderSideMap[prefix];
-    return `${side}-width: ${width}; ${side}-style: ${borderStyle};`;
-  }
-  const originalValue = getStyleValue(className);
-  if (originalValue !== void 0) {
-    return `${cssProp}: ${originalValue};`;
-  }
-  if (prefix === "b" && classValue.includes("-")) {
-    const parts = classValue.split("-");
-    const width = parts[0];
-    const borderStyle = parts[1] || "solid";
-    const borderColor = parts[2] ? `var(--${parts[2]})` : "currentColor";
-    return `border: ${width} ${borderStyle} ${borderColor};`;
-  }
-  if (prefix === "br" && classValue.includes("-") && !classValue.match(/^\d+px$/)) {
-    return `border-radius: var(--${classValue});`;
-  }
-  let value = classValue;
-  const valuePattern = /\d|auto|inherit|initial|unset|solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden|minmax|repeat|clamp|calc|min|max|fit-content|var/;
-  const hasParentheses = value.includes("(");
-  if (hasParentheses) {
-    let result = "";
-    let depth = 0;
-    let afterComma = false;
-    for (let i = 0; i < value.length; i++) {
-      const char = value[i];
-      if (char === "(") {
-        depth++;
-        result += char;
-        afterComma = false;
-      } else if (char === ")") {
-        depth--;
-        result += char;
-        afterComma = false;
-      } else if (char === ",") {
-        result += char;
-        afterComma = true;
-      } else if (char === "-" && afterComma && depth > 0) {
-        if (value[i + 1] === "-") {
-          result += " ";
-        } else {
-          result += " ";
-        }
-        afterComma = false;
-      } else if (char === "-" && depth > 0 && i > 0) {
-        const rest = value.substring(i + 1);
-        if (valuePattern.test(rest[0] || "")) {
-          result += " ";
-        } else {
-          result += char;
-        }
-        afterComma = false;
-      } else if (char === "-" && depth === 0 && i > 0) {
-        const rest = value.substring(i + 1);
-        if (valuePattern.test(rest[0] || "")) {
-          result += " ";
-        } else {
-          result += char;
-        }
-        afterComma = false;
-      } else {
-        result += char;
-        afterComma = false;
-      }
-    }
-    value = result;
-  } else if (value.startsWith("-")) {
-    value = value[0] + value.substring(1).replace(new RegExp(`-(?=${valuePattern.source})`, "g"), " ");
+  const root = parsed.root;
+  let value;
+  let property = parsed.property;
+  if (parsed.kind === "hash") {
+    const registered = getStyleValue(className);
+    if (registered == null) return null;
+    value = String(registered);
+    if (root) property = resolveRootProperty(root, value);
+  } else if (parsed.kind === "arbitrary") {
+    const registered = getStyleValue(className);
+    value = registered !== void 0 ? String(registered) : parsed.value;
   } else {
-    value = value.replace(new RegExp(`-(?=${valuePattern.source})`, "g"), " ");
+    value = parsed.value;
   }
-  value = value.replace(/(\d+)p(?!\w)/g, "$1%");
-  if (prefix === "px") {
+  if (root === "px") {
     return `padding-left: ${value}; padding-right: ${value};`;
   }
-  if (prefix === "py") {
+  if (root === "py") {
     return `padding-top: ${value}; padding-bottom: ${value};`;
   }
-  if (prefix === "mx") {
+  if (root === "mx") {
     return `margin-left: ${value}; margin-right: ${value};`;
   }
-  if (prefix === "my") {
+  if (root === "my") {
     return `margin-top: ${value}; margin-bottom: ${value};`;
   }
-  if (prefix === "bgc" || prefix === "bg" || prefix === "c" || prefix === "bc") {
-    if (!value.startsWith("#") && !value.includes("rgb") && !value.includes("px")) {
-      if (isCssNamedColor(value)) {
-        return `${cssProp}: ${value};`;
+  if (root && borderSideMap[root] && property !== "border-color") {
+    const side = borderSideMap[root];
+    const tokens = value.split(/\s+/).filter(Boolean);
+    if (tokens.length >= 2) {
+      const declarations = [`${side}-width: ${tokens[0]};`, `${side}-style: ${tokens[1]};`];
+      if (tokens[2]) {
+        declarations.push(`${side}-color: ${tokens.slice(2).join(" ")};`);
       }
-      return `${cssProp}: var(--${value});`;
+      return declarations.join(" ");
     }
+    return `${side}: ${value};`;
   }
-  return `${cssProp}: ${value};`;
+  return `${property}: ${value};`;
 }
 function applyFluidToUtilityRule(rule, className, responsiveScales, breakpoints) {
   const propValue = resolveScalablePropertyValue(className);
@@ -4564,13 +4899,7 @@ function applyFluidToUtilityRule(rule, className, responsiveScales, breakpoints)
   if (scale == null || scale === 1) return rule;
   const range = responsiveScales.fluidRange ?? DEFAULT_FLUID_RANGE;
   const baseRef = responsiveScales.baseReference ?? 16;
-  const fluidValue = buildFluidPropertyValue(
-    propValue.value,
-    scale,
-    range.min,
-    range.max,
-    baseRef
-  );
+  const fluidValue = buildFluidPropertyValue(propValue.value, scale, range.min, range.max, baseRef);
   if (!fluidValue) return rule;
   return `${propValue.property}: ${fluidValue};`;
 }
@@ -4589,22 +4918,12 @@ function applyFluidToStyle(style, responsiveScales, breakpoints) {
       out[prop] = value;
       continue;
     }
-    const scale = getScaleMultiplier(
-      responsiveScales,
-      prop,
-      smallest
-    );
+    const scale = getScaleMultiplier(responsiveScales, prop, smallest);
     if (scale == null || scale === 1) {
       out[prop] = value;
       continue;
     }
-    const fluidValue = buildFluidPropertyValue(
-      String(value),
-      scale,
-      range.min,
-      range.max,
-      baseRef
-    );
+    const fluidValue = buildFluidPropertyValue(String(value), scale, range.min, range.max, baseRef);
     out[prop] = fluidValue ?? value;
   }
   return out;
@@ -4632,10 +4951,7 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
   const breakpointValues = getBreakpointValues(breakpoints);
   const responsiveClasses = {};
   for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
-    let prefix = breakpointName.charAt(0).toLowerCase();
-    if (breakpointName.toLowerCase() === "mobile") {
-      prefix = "mob";
-    }
+    const prefix = breakpointClassPrefix(breakpointName);
     responsiveClasses[prefix] = {
       classes: /* @__PURE__ */ new Set(),
       breakpointName,
@@ -4645,10 +4961,10 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
   for (const className of usedClasses) {
     let matched = false;
     for (const prefix of Object.keys(responsiveClasses)) {
-      if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
-        const potentialClass = className.substring(prefix.length + 1);
+      if (className.startsWith(prefix) && className.length > prefix.length) {
+        const potentialClass = className.substring(prefix.length);
         const rule = generateRuleForClass(potentialClass);
-        if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
+        if (rule) {
           responsiveClasses[prefix].classes.add(potentialClass);
           matched = true;
           break;
@@ -4683,7 +4999,7 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
   }
   const autoResponsiveMediaQueries = {};
   if (responsiveScales?.enabled && !fluidActive) {
-    for (const className of autoResponsiveClasses) {
+    for (const className of sortClassesByPropertyOrder(autoResponsiveClasses)) {
       const propValue = resolveScalablePropertyValue(className);
       if (!propValue) continue;
       const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
@@ -4712,7 +5028,7 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
     }
   }
   const sortedAutoResponsive = Object.entries(autoResponsiveMediaQueries).sort(([, a], [, b]) => b.value - a.value);
-  for (const [breakpointName, mq] of sortedAutoResponsive) {
+  for (const [, mq] of sortedAutoResponsive) {
     if (mq.classes.length === 0) continue;
     css.push(`@media (max-width: ${mq.value}px) {`);
     for (const { className, rule } of mq.classes) {
@@ -4723,12 +5039,12 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
   const sortedManualResponsive = Object.entries(responsiveClasses).filter(([, info]) => info.classes.size > 0).sort(([, a], [, b]) => b.value - a.value);
   for (const [prefix, breakpointInfo] of sortedManualResponsive) {
     const rules = [];
-    for (const className of breakpointInfo.classes) {
+    for (const className of sortClassesByPropertyOrder(breakpointInfo.classes)) {
       const rule = generateRuleForClass(className);
       if (rule) {
-        const escapedClassName = escapeCSSClassName(className);
+        const escapedClassName = escapeCSSClassName(`${prefix}${className}`);
         const finalRule = applyRemConversion(rule, remConfig);
-        rules.push(`  .${prefix}-${escapedClassName} { ${finalRule} }`);
+        rules.push(`  .${escapedClassName} { ${finalRule} }`);
       }
     }
     if (rules.length > 0) {
@@ -4744,24 +5060,19 @@ function generateSingleClassCSS(className, breakpoints = DEFAULT_BREAKPOINTS, re
   const css = [];
   const responsivePrefixes = {};
   for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
-    let prefix = breakpointName.charAt(0).toLowerCase();
-    if (breakpointName.toLowerCase() === "mobile") {
-      prefix = "mob";
-    }
-    responsivePrefixes[prefix] = { breakpointName, value: breakpointValue };
+    responsivePrefixes[breakpointClassPrefix(breakpointName)] = { breakpointName, value: breakpointValue };
   }
   let matched = false;
   for (const prefix of Object.keys(responsivePrefixes)) {
-    if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
-      const potentialClass = className.substring(prefix.length + 1);
+    if (className.startsWith(prefix) && className.length > prefix.length) {
+      const potentialClass = className.substring(prefix.length);
       const rule = generateRuleForClass(potentialClass);
-      if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
+      if (rule) {
         const escapedClassName = escapeCSSClassName(className);
-        const escapedInnerClass = escapeCSSClassName(potentialClass);
         const bpValue = responsivePrefixes[prefix].value;
         const finalRule = applyRemConversion(rule, remConfig);
         css.push(`@media (max-width: ${bpValue}px) {
-  .${prefix}-${escapedInnerClass} { ${finalRule} }
+  .${escapedClassName} { ${finalRule} }
 }`);
         matched = true;
         break;
@@ -4797,9 +5108,11 @@ function generateSingleClassCSS(className, breakpoints = DEFAULT_BREAKPOINTS, re
               const scaledValue = scalePropertyValue(propValue.value, baseRef, scale);
               if (!scaledValue) continue;
               const finalScaledValue = remConfig?.enabled && shouldConvertProperty(propValue.property) ? convertPxToRem(scaledValue, remConfig.baseFontSize) : scaledValue;
-              css.push(`@media (max-width: ${breakpointValue}px) {
+              css.push(
+                `@media (max-width: ${breakpointValue}px) {
   .${escapedClassName} { ${propValue.property}: ${finalScaledValue}; }
-}`);
+}`
+              );
             }
           }
         }
@@ -4812,87 +5125,16 @@ function extractUtilityClassesFromHTML(html) {
   const classes = /* @__PURE__ */ new Set();
   const classRegex = /class="([^"]*)"/g;
   let match;
-  const knownPrefixes = new Set(Object.values(propertyMap));
-  const specialPrefixes = /* @__PURE__ */ new Set([
-    // Display short forms
-    "f",
-    "fd-col",
-    "fd-row",
-    "g",
-    "b",
-    "i",
-    "ib",
-    "h",
-    "if",
-    "ig",
-    // Justify content
-    "jc-c",
-    "jc-s",
-    "jc-e",
-    "jc-b",
-    "jc-a",
-    // Align items
-    "ai-c",
-    "ai-s",
-    "ai-e",
-    "ai-b",
-    // Overflow
-    "o-h",
-    "o-a",
-    "o-s",
-    "o-v",
-    // Cursor
-    "cursor-pointer",
-    "cursor-default",
-    // White space
-    "whs-normal",
-    "whs-nowrap",
-    "whs-pre",
-    "whs-pre-wrap",
-    "whs-pre-line"
-  ]);
   while ((match = classRegex.exec(html)) !== null) {
-    const classString = match[1];
-    const classList = classString.split(/\s+/);
+    const classList = match[1].split(/\s+/);
     for (const className of classList) {
-      if (!className || className.length === 0) continue;
-      if (specialPrefixes.has(className)) {
+      if (!className) continue;
+      const { base } = splitVariantPrefix(className);
+      if (parseUtilityClass(base)) {
         classes.add(className);
         continue;
       }
-      let classToCheck = className;
-      let hasResponsivePrefix = false;
-      if (className.startsWith("mob-") && className.length > 4) {
-        classToCheck = className.substring(4);
-        hasResponsivePrefix = true;
-      } else if (className.length > 2 && className.charAt(1) === "-" && className.match(/^[a-z]-/)) {
-        const firstChar = className.charAt(0);
-        if (["t", "s", "x", "u"].includes(firstChar)) {
-          classToCheck = className.substring(2);
-          hasResponsivePrefix = true;
-        }
-      }
-      for (const prefix of knownPrefixes) {
-        if (classToCheck === prefix) {
-          classes.add(className);
-          break;
-        } else if (classToCheck.startsWith(prefix + "-")) {
-          classes.add(className);
-          break;
-        }
-      }
-      if (hasResponsivePrefix && !classes.has(className)) {
-        for (const specialPrefix of specialPrefixes) {
-          if (classToCheck === specialPrefix) {
-            classes.add(className);
-            break;
-          } else if (classToCheck.startsWith(specialPrefix + "-")) {
-            classes.add(className);
-            break;
-          }
-        }
-      }
-      if (!classes.has(className) && isDynamicClass(className)) {
+      if (isDynamicClass(className) || isDynamicClass(base)) {
         classes.add(className);
       }
     }
@@ -4926,9 +5168,7 @@ function generateInteractiveCSS(elementClass, interactiveStyles, breakpoints = D
   for (const rule of interactiveStyles) {
     const { prefix, postfix, style } = rule;
     const fullSelector = `${prefix || ""}.${elementClass}${postfix || ""}`;
-    const sortedBreakpoints = Object.entries(breakpointValues).sort(
-      ([, a], [, b]) => b - a
-    );
+    const sortedBreakpoints = Object.entries(breakpointValues).sort(([, a], [, b]) => b - a);
     if (isResponsiveStyle2(style)) {
       const responsive = style;
       if (responsive.base && Object.keys(responsive.base).length > 0) {
@@ -4962,9 +5202,7 @@ function generateInteractiveCSS(elementClass, interactiveStyles, breakpoints = D
         if (merged && Object.keys(merged).length > 0) {
           const properties = applyRemConversion(styleObjectToCSS(merged), remConfig);
           if (properties) {
-            css.push(
-              `@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${properties}; } }`
-            );
+            css.push(`@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${properties}; } }`);
           }
         }
       }
@@ -4982,18 +5220,11 @@ function generateInteractiveCSS(elementClass, interactiveStyles, breakpoints = D
         }
         if (scalingEnabled && !fluidActive) {
           for (const [breakpointName, breakpointValue] of sortedBreakpoints) {
-            const scaled = scaleStyleForBreakpoint(
-              flatStyle,
-              responsiveScales,
-              breakpointName,
-              /* @__PURE__ */ new Set()
-            );
+            const scaled = scaleStyleForBreakpoint(flatStyle, responsiveScales, breakpointName, /* @__PURE__ */ new Set());
             if (Object.keys(scaled).length === 0) continue;
             const scaledProps = applyRemConversion(styleObjectToCSS(scaled), remConfig);
             if (!scaledProps) continue;
-            css.push(
-              `@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${scaledProps}; } }`
-            );
+            css.push(`@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${scaledProps}; } }`);
           }
         }
       }
@@ -5010,11 +5241,7 @@ function scaleStyleForBreakpoint(baseStyle, responsiveScales, breakpointName, sk
     if (value == null) continue;
     const strValue = String(value);
     if (strValue === "") continue;
-    const scale = getScaleMultiplier(
-      responsiveScales,
-      property,
-      breakpointName
-    );
+    const scale = getScaleMultiplier(responsiveScales, property, breakpointName);
     if (scale == null) continue;
     const scaledValue = scalePropertyValue(strValue, baseRef, scale);
     if (scaledValue == null || scaledValue === strValue) continue;
@@ -5154,6 +5381,9 @@ export {
   isRichTextMarker,
   richTextMarkerToHtml,
   resolvePropsFromDefinition,
+  CSS_NAMED_COLORS,
+  isCssNamedColor,
+  breakpointClassPrefix,
   registerStyleValue,
   registerDynamicStyle,
   getStyleValue,
@@ -5203,15 +5433,14 @@ export {
   rewriteViewportUnits,
   DESIGN_VIEWPORT_VARS,
   toFriendlyError,
-  CSS_NAMED_COLORS,
-  isCssNamedColor,
   sortClassesByPropertyOrder,
   generateRuleForClass,
   applyContainerPattern,
   generateUtilityCSS,
   generateSingleClassCSS,
   extractUtilityClassesFromHTML,
+  styleObjectToCSS,
   generateInteractiveCSS,
   generateAllInteractiveCSS
 };
-//# sourceMappingURL=chunk-JGWFTO6P.js.map
+//# sourceMappingURL=chunk-7HWQUVTU.js.map