meno-core 1.0.53 → 1.1.0

package/dist/chunks/{chunk-JGWFTO6P.js → chunk-2IIQK7T3.js}

@@ -1,46 +1,96 @@
 import {
-  DEFAULT_BREAKPOINTS,
-  DEFAULT_FLUID_RANGE,
   DEFAULT_I18N_CONFIG,
-  SCALABLE_CSS_PROPERTIES,
-  applyRemConversion,
-  buildFluidClampWithExplicitMin,
-  buildFluidPropertyValue,
-  convertPxToRem,
-  getBreakpointName,
-  getBreakpointValues,
-  getScaleMultiplier,
-  getSmallestBreakpointName,
   isI18nValue,
-  parseValue,
   resolveI18nInProps,
-  resolveI18nValue,
-  scalePropertyValue,
-  shouldConvertProperty
-} from "./chunk-AZQYF6KE.js";
+  resolveI18nValue
+} from "./chunk-4ZRU52J2.js";
 import {
   isTiptapDocument,
   tiptapToHtml
-} from "./chunk-UB44F4Z2.js";
+} from "./chunk-5X4HCN7J.js";
 import {
   NODE_TYPE,
   init_constants
-} from "./chunk-YBLHKYFF.js";
+} from "./chunk-AR7LHIFY.js";
 import {
   __esm,
   __export,
   __toCommonJS
 } from "./chunk-KSBZ2L7C.js";
 
+// lib/shared/errorLogger.ts
+function setErrorHandler(handler) {
+  errorHandler = handler;
+}
+function isDevelopment() {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV) {
+    return process.env.NODE_ENV === "development";
+  }
+  return true;
+}
+function logRuntimeError(location, error, context) {
+  const entry = {
+    location,
+    category: "runtime",
+    error,
+    context,
+    timestamp: Date.now()
+  };
+  if (isDevelopment()) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    console.error(`[${location}] ${errorMessage}`, context ?? "");
+  }
+  errorHandler?.(entry);
+}
+function logNetworkError(location, error, context) {
+  const entry = {
+    location,
+    category: "network",
+    error,
+    context,
+    timestamp: Date.now()
+  };
+  if (isDevelopment()) {
+    console.error(`[${location}] Network error:`, error, context ?? "");
+  }
+  errorHandler?.(entry);
+}
+var errorHandler;
+var init_errorLogger = __esm({
+  "lib/shared/errorLogger.ts"() {
+    "use strict";
+    errorHandler = null;
+  }
+});
+
 // lib/shared/validation/schemas.ts
 import { z } from "zod";
-var BasePropTypeSchema, PropTypeSchema, I18nValueObjectSchema, BasePropDefinitionSchema, EnumsConfigSchema, ListItemSchemaSchema, ListPropDefinitionSchema, PropDefinitionSchema, StyleMappingSchema, BooleanMappingSchema, IfConditionSchema, LinkMappingSchema, HtmlMappingSchema, StyleObjectSchema, ResponsiveStyleObjectSchema, StyleValueSchema, InteractiveStyleRuleSchema, InteractiveStylesSchema, SlotMarkerSchema, ComponentNodeSchema, HtmlNodeSchema, ComponentInstanceNodeSchema, EmbedNodeSchema, LinkNodeSchema, LocaleListNodeSchema, ListNodeSchemaBasic, ScriptLoadModeSchema, LibraryPositionSchema, ScriptTypeSchema, JSLibraryConfigSchema, CSSLibraryConfigSchema, LibrariesConfigSchema, StructuredComponentDefinitionSchema, ComponentDefinitionSchema, I18nOrStringSchema, LibraryMergeModeSchema, PageLibrariesConfigSchema, CustomCodeConfigSchema, PageMetaDataBaseSchema, PageMetaDataSchema, LineRangeSchema, JSONPageSchema, PageDataWithComponentSchema, PageDataSchema, CMSFieldTypeSchema, CMSFieldDefinitionSchema, CMSClientDataStrategySchema, CMSClientDataConfigSchema, CMSSchemaSchema, CMSItemSchema, CMSDraftItemSchema, CMSFilterConditionSchema, CMSSortConfigSchema, CMSListQuerySchema, CMSListNodeSchema, PageCmsConfigSchema, PageMetaDataWithCMSSchema;
+var BasePropTypeSchema, PropTypeSchema, I18nValueObjectSchema, BasePropDefinitionSchema, EnumsConfigSchema, ListItemSchemaSchema, ListPropDefinitionSchema, PropDefinitionSchema, StyleMappingSchema, BooleanMappingSchema, VerbatimCodeSchema, IfConditionSchema, LinkMappingSchema, HtmlMappingSchema, StyleObjectSchema, ResponsiveStyleObjectSchema, StyleValueSchema, InteractiveStyleRuleSchema, InteractiveStylesSchema, SlotMarkerSchema, ComponentNodeSchema, HtmlNodeSchema, ComponentInstanceNodeSchema, EmbedNodeSchema, LinkNodeSchema, LocaleListNodeSchema, ListNodeSchemaBasic, IslandNodeSchema, MarkdownNodeSchema, CustomNodeSchema, ScriptLoadModeSchema, LibraryPositionSchema, ScriptTypeSchema, JSLibraryConfigSchema, CSSLibraryConfigSchema, LibrariesConfigSchema, StructuredComponentDefinitionSchema, ComponentDefinitionSchema, I18nOrStringSchema, LibraryMergeModeSchema, PageLibrariesConfigSchema, CustomCodeConfigSchema, SitemapPageConfigSchema, PageMetaDataBaseSchema, PageMetaDataSchema, LineRangeSchema, JSONPageSchema, PageDataWithComponentSchema, PageDataSchema, CMSFieldTypeSchema, CMSFieldDefinitionSchema, CMSClientDataStrategySchema, CMSClientDataConfigSchema, CMSSchemaSchema, CMSItemSchema, CMSDraftItemSchema, CMSFilterConditionSchema, CMSSortConfigSchema, CMSListQuerySchema, CMSListNodeSchema, PageCmsConfigSchema, PageDataSourceSchema, PageDataConfigSchema, PageMetaDataWithCMSSchema;
 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 +118,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 +143,18 @@ var init_schemas = __esm({
       prop: z.string(),
       values: z.record(z.string(), z.boolean())
     }).passthrough();
-    IfConditionSchema = z.union([
-      z.boolean(),
-      z.string(),
-      BooleanMappingSchema
-    ]);
+    VerbatimCodeSchema = z.object({ _code: z.literal(true), expr: z.string() }).passthrough();
+    IfConditionSchema = z.union([z.boolean(), z.string(), BooleanMappingSchema, VerbatimCodeSchema]);
     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 +163,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 +179,176 @@ 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, VerbatimCodeSchema])).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, VerbatimCodeSchema])).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, VerbatimCodeSchema])).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, VerbatimCodeSchema])).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, VerbatimCodeSchema])).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", "remote", "sanity", "expression"]).optional(),
+        // defaults to 'prop'
+        source: z.string().optional(),
+        // Source prop name or collection name
+        collection: z.string().optional(),
+        // Legacy field for cms-list migration
+        // Remote-source options (sourceType: 'remote')
+        url: z.string().optional(),
+        // HTTP/JSON endpoint
+        path: z.string().optional(),
+        // dot-path into the response to the items array
+        // Sanity-source options (sourceType: 'sanity')
+        documentType: z.string().optional(),
+        // Sanity document `_type`
+        slugField: z.string().optional(),
+        // field used as the URL slug
+        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()
+    );
+    IslandNodeSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.ISLAND),
+        src: z.string(),
+        client: z.object({
+          directive: z.enum(["load", "idle", "visible", "media", "only"]),
+          value: z.string().optional()
+        }).passthrough().optional(),
+        props: z.record(z.string(), z.any()).optional(),
+        if: IfConditionSchema.optional(),
+        children: z.union([
+          z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+          z.string(),
+          I18nValueObjectSchema
+        ]).optional()
+      }).passthrough()
+    );
+    MarkdownNodeSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.MARKDOWN),
+        source: 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, VerbatimCodeSchema])).optional()
+      }).passthrough()
+    );
+    CustomNodeSchema = z.lazy(
+      () => z.object({
+        type: z.literal(NODE_TYPE.CUSTOM),
+        src: z.string(),
+        props: z.record(z.string(), z.any()).optional(),
+        if: IfConditionSchema.optional(),
+        children: z.union([
+          z.array(z.union([ComponentNodeSchema, z.string(), I18nValueObjectSchema])),
+          z.string(),
+          I18nValueObjectSchema
+        ]).optional()
+      }).passthrough()
+    );
     ComponentNodeSchema = z.union([
       HtmlNodeSchema,
       ComponentInstanceNodeSchema,
@@ -245,7 +356,13 @@ var init_schemas = __esm({
       EmbedNodeSchema,
       LinkNodeSchema,
       LocaleListNodeSchema,
-      ListNodeSchemaBasic
+      ListNodeSchemaBasic,
+      IslandNodeSchema,
+      MarkdownNodeSchema,
+      CustomNodeSchema,
+      // A verbatim-code marker is a valid child node (renders natively at build; nothing in the
+      // editor preview) — a meno-astro component with any `{_code}` child must validate to open.
+      VerbatimCodeSchema
     ]);
     ScriptLoadModeSchema = z.enum(["async", "defer"]);
     LibraryPositionSchema = z.enum(["head", "body-end"]);
@@ -304,6 +421,11 @@ var init_schemas = __esm({
       bodyStart: z.string().optional(),
       bodyEnd: z.string().optional()
     }).passthrough();
+    SitemapPageConfigSchema = z.object({
+      priority: z.number().optional(),
+      changefreq: z.enum(["always", "hourly", "daily", "weekly", "monthly", "yearly", "never"]).optional(),
+      exclude: z.boolean().optional()
+    }).passthrough();
     PageMetaDataBaseSchema = z.object({
       title: I18nOrStringSchema.optional(),
       description: I18nOrStringSchema.optional(),
@@ -315,7 +437,11 @@ var init_schemas = __esm({
       slugs: z.record(z.string(), z.string()).optional(),
       draft: z.boolean().optional(),
       libraries: PageLibrariesConfigSchema.optional(),
-      customCode: CustomCodeConfigSchema.optional()
+      customCode: CustomCodeConfigSchema.optional(),
+      viewTransitions: z.boolean().optional(),
+      noindex: z.boolean().optional(),
+      prerender: z.boolean().optional(),
+      sitemap: SitemapPageConfigSchema.optional()
     }).passthrough();
     PageMetaDataSchema = PageMetaDataBaseSchema;
     LineRangeSchema = z.object({
@@ -326,12 +452,18 @@ var init_schemas = __esm({
       components: z.record(z.string(), ComponentDefinitionSchema).optional(),
       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"
-    });
+      _lineMap: z.record(z.string(), LineRangeSchema).optional(),
+      // Marks a page whose source is outside the meno-astro dialect (read-only in the editor).
+      // Explicit (not just .passthrough()) so it survives a future tightening of this schema.
+      _unsupported: z.object({ reason: z.string() }).passthrough().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"
+      }
+    );
     PageDataWithComponentSchema = z.object({
       component: z.object({
         structure: ComponentNodeSchema.optional(),
@@ -341,10 +473,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",
@@ -378,10 +507,12 @@ var init_schemas = __esm({
     CMSSchemaSchema = z.object({
       id: z.string(),
       name: z.string(),
-      slugField: z.string(),
-      urlPattern: z.string(),
+      // Optional: a data-only collection (no per-item route) omits both.
+      slugField: z.string().optional(),
+      urlPattern: z.string().optional(),
       fields: z.record(CMSFieldDefinitionSchema),
-      clientData: CMSClientDataConfigSchema.optional()
+      clientData: CMSClientDataConfigSchema.optional(),
+      rss: z.boolean().optional()
     }).passthrough();
     CMSItemSchema = z.object({
       _id: z.string(),
@@ -406,11 +537,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 +548,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(),
@@ -435,9 +558,23 @@ var init_schemas = __esm({
     PageCmsConfigSchema = z.object({
       id: z.string(),
       name: z.string(),
-      slugField: z.string(),
-      urlPattern: z.string(),
-      fields: z.record(CMSFieldDefinitionSchema)
+      // Optional: a data-only collection (no per-item route) omits both.
+      slugField: z.string().optional(),
+      urlPattern: z.string().optional(),
+      fields: z.record(CMSFieldDefinitionSchema),
+      rss: z.boolean().optional()
+    }).passthrough();
+    PageDataSourceSchema = z.object({
+      type: z.literal("fetch"),
+      url: z.string(),
+      method: z.literal("GET").optional(),
+      headers: z.record(z.string(), z.string()).optional(),
+      path: z.string().optional(),
+      fields: z.record(z.enum(["string", "number", "boolean", "date", "image", "object"])).optional(),
+      cardinality: z.enum(["object", "list"]).optional()
+    }).passthrough();
+    PageDataConfigSchema = z.object({
+      sources: z.record(z.string(), PageDataSourceSchema)
     }).passthrough();
     PageMetaDataWithCMSSchema = z.object({
       title: z.union([z.string(), z.object({ _i18n: z.literal(true) }).passthrough()]).optional(),
@@ -448,11 +585,18 @@ var init_schemas = __esm({
       ogImage: z.string().optional(),
       ogType: z.string().optional(),
       slugs: z.record(z.string(), z.string()).optional(),
-      source: z.enum(["static", "cms"]).optional(),
+      source: z.enum(["static", "cms", "ssr"]).optional(),
       cms: PageCmsConfigSchema.optional(),
+      data: PageDataConfigSchema.optional(),
+      routeParams: z.array(z.string()).optional(),
+      routePreview: z.record(z.string(), z.string()).optional(),
       draft: z.boolean().optional(),
       libraries: PageLibrariesConfigSchema.optional(),
-      customCode: CustomCodeConfigSchema.optional()
+      customCode: CustomCodeConfigSchema.optional(),
+      viewTransitions: z.boolean().optional(),
+      noindex: z.boolean().optional(),
+      prerender: z.boolean().optional(),
+      sitemap: SitemapPageConfigSchema.optional()
     }).passthrough();
   }
 });
@@ -462,6 +606,7 @@ var BaseComponentRegistry;
 var init_ComponentRegistry = __esm({
   "lib/shared/registry/ComponentRegistry.ts"() {
     "use strict";
+    init_errorLogger();
     BaseComponentRegistry = class {
       registry = {};
       listeners = /* @__PURE__ */ new Set();
@@ -536,6 +681,7 @@ var init_ComponentRegistry = __esm({
           try {
             listener();
           } catch (err) {
+            logRuntimeError("ComponentRegistry.notify", err);
           }
         }
       }
@@ -1130,10 +1276,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 +1297,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 +1326,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 +1379,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 +1427,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",
@@ -1270,7 +1437,12 @@ var init_SlotMarkerType = __esm({
       defaultValues: {},
       treeDisplay: {
         icon: "SLOT_MARKER",
-        getLabel: () => "slot"
+        // Show the slot's name so multiple named slots in a component are distinguishable
+        // (e.g. `slot: header`). Unnamed (default) slots stay just `slot`.
+        getLabel: (node) => {
+          const name = node.name;
+          return typeof name === "string" && name ? `slot: ${name}` : "slot";
+        }
       },
       clientRenderer: (_node, _context) => {
         return null;
@@ -1371,10 +1543,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 +1559,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 +1630,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 +1670,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"),
@@ -1510,14 +1683,36 @@ var init_ListNodeType = __esm({
        * Data source type:
        * - 'prop': Read items from component props (default)
        * - 'collection': Query items from CMS collection
+       * - 'remote': Fetch items from a public HTTP/JSON endpoint at build/SSR time
+       * - 'sanity': Fetch a Sanity document type via GROQ at build/SSR time (read-only, public dataset)
+       * - 'expression': Iterate a verbatim JS expression (`source`) that yields an array — a
+       *   `.map()` over arbitrary frontmatter data (e.g. an Astro Action / supabase query) the
+       *   dialect can't model as a prop/collection. The item template (`children` + `itemAs`) IS
+       *   editable; the source itself is a read-only black box (edit it in the .astro frontmatter).
+       *   The editor has no data for it, so it renders empty in the design canvas (real Astro play
+       *   renders it for real at build/SSR).
        */
-      sourceType: z8.enum(["prop", "collection"]).default("prop"),
+      sourceType: z8.enum(["prop", "collection", "remote", "sanity", "expression"]).default("prop"),
       /**
-       * Source identifier:
+       * Source identifier (sourceType 'prop'/'collection'/'expression'; 'remote' uses `url`):
        * - For sourceType 'prop': Prop name (e.g., "items") or template expression (e.g., "{{category.items}}")
        * - For sourceType 'collection': Collection name (e.g., "posts", "authors")
+       * - For sourceType 'expression': the verbatim JS expression iterated by `.map()` (e.g. "notes?")
+       */
+      source: z8.string().optional(),
+      // Remote-only options (sourceType: 'remote')
+      /** HTTP(S) endpoint returning JSON, fetched at build/SSR time (e.g. a public REST API). */
+      url: z8.string().optional(),
+      /**
+       * Dot-path into the JSON response to reach the items array (e.g. "data.items").
+       * Empty/absent = the response body is itself the array.
        */
-      source: z8.string(),
+      path: z8.string().optional(),
+      // Sanity-only options (sourceType: 'sanity')
+      /** Sanity document `_type` to fetch (`*[_type == "<documentType>"]`). projectId/dataset come from project config. */
+      documentType: z8.string().optional(),
+      /** Field used as the URL slug (for synthesizing item links); defaults to 'slug'. */
+      slugField: z8.string().optional(),
       label: z8.string().optional(),
       // Custom label displayed in structure tree
       if: IfConditionSchema.optional(),
@@ -1532,11 +1727,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) */
@@ -1574,8 +1765,9 @@ var init_ListNodeType = __esm({
         getLabel: (node) => {
           const listNode = node;
           const sourceType = listNode.sourceType || "prop";
-          const prefix = sourceType === "collection" ? "CMS List" : "List";
-          return listNode.source ? `${prefix}: ${listNode.source}` : prefix;
+          const prefix = sourceType === "collection" ? "CMS List" : sourceType === "remote" ? "Remote List" : sourceType === "sanity" ? "Sanity List" : sourceType === "expression" ? "Loop" : "List";
+          const src = sourceType === "remote" ? listNode.url : sourceType === "sanity" ? listNode.documentType : listNode.source;
+          return src ? `${prefix}: ${src}` : prefix;
         }
       },
       clientRenderer: (node, context) => {
@@ -1586,20 +1778,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": sourceType === "remote" ? listNode.url : sourceType === "sanity" ? listNode.documentType : 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 -->";
@@ -1614,7 +1810,7 @@ var init_ListNodeType = __esm({
           label: "Source Type",
           type: "select",
           required: false,
-          options: ["prop", "collection"]
+          options: ["prop", "collection", "remote", "sanity"]
         },
         {
           name: "source",
@@ -1635,6 +1831,240 @@ var init_ListNodeType = __esm({
   }
 });
 
+// lib/shared/registry/nodeTypes/IslandNodeType.ts
+import { z as z9 } from "zod";
+import { createElement as h7 } from "react";
+function islandName(src) {
+  const base = src.split("/").pop() ?? src;
+  return base.replace(/\.(tsx|jsx|vue|svelte)$/i, "") || base;
+}
+function islandChildren(node) {
+  const { children } = node;
+  if (Array.isArray(children)) return children.length > 0 ? children : void 0;
+  if (typeof children === "string") return children.length > 0 ? children : void 0;
+  return void 0;
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var IslandClientDirectiveSchema, IslandNodeSchemaInternal, IslandNodeType;
+var init_IslandNodeType = __esm({
+  "lib/shared/registry/nodeTypes/IslandNodeType.ts"() {
+    "use strict";
+    init_schemas();
+    init_createNodeType();
+    init_fieldPresets();
+    IslandClientDirectiveSchema = z9.object({
+      directive: z9.enum(["load", "idle", "visible", "media", "only"]),
+      value: z9.string().optional()
+    }).passthrough();
+    IslandNodeSchemaInternal = z9.object({
+      type: z9.literal("island"),
+      // Path to the framework component file relative to `src/islands/`
+      // (e.g. "Counter.tsx", "widgets/Chart.vue"). The extension derives the
+      // framework, which drives the Astro integration that gets provisioned.
+      src: z9.string(),
+      client: IslandClientDirectiveSchema.optional(),
+      props: z9.record(z9.string(), z9.any()).optional(),
+      if: IfConditionSchema.optional(),
+      // Conditional rendering - skip node when false
+      // Slotted children (rendered server-side into the island's <slot/>).
+      children: z9.union([z9.array(z9.any()), z9.string()]).optional()
+    }).passthrough();
+    IslandNodeType = createNodeType({
+      type: "island",
+      displayName: "Island",
+      category: "special",
+      schema: IslandNodeSchemaInternal,
+      defaultValues: {
+        src: "",
+        client: { directive: "load" }
+      },
+      treeDisplay: {
+        icon: "COMPONENT",
+        getLabel: (node) => `Island: ${islandName(node.src) || "?"}`
+      },
+      editableFields: [
+        textField({ name: "src", label: "Island file", required: true, placeholder: "Counter.tsx" }),
+        selectField({
+          name: "client.directive",
+          label: "Hydration",
+          // The empty-value entry clears `client` entirely → a server-rendered island
+          // with zero JS (a valid Astro pattern); the rest map to `client:<directive>`.
+          options: [{ value: "", label: "None (server-only, no JS)" }, "load", "idle", "visible", "media", "only"]
+        })
+      ],
+      // meno-core can't run a framework component. Instead of a loud highlight box
+      // (which made island-heavy pages unreadable), render the island's slotted
+      // children as normal content and fall back to a quiet inline marker when there
+      // are none. The wrapper keeps `data-island` for selection/identification only.
+      // Real hydration is play/build only.
+      clientRenderer: (node, context) => {
+        const children = islandChildren(node);
+        const inner = children ? context.buildChildren(children, context.elementPath) : h7("span", { style: { color: "#9ca3af", fontSize: "13px" } }, islandName(node.src) || "?");
+        return h7("div", { key: context.key, "data-island": node.src, style: { display: "contents" } }, inner);
+      },
+      ssrRenderer: (node, context) => {
+        const children = islandChildren(node);
+        const inner = children ? context.renderChildren(children, context) : `<span style="color:#9ca3af;font-size:13px">${escapeHtml(islandName(node.src) || "?")}</span>`;
+        return `<div data-island="${escapeHtml(node.src)}" style="display:contents">${inner}</div>`;
+      },
+      capabilities: {
+        canHaveChildren: true,
+        canHaveStyle: false,
+        canHaveAttributes: false,
+        requiresProps: ["src"]
+      }
+    });
+  }
+});
+
+// lib/shared/markdown.ts
+import MarkdownIt from "markdown-it";
+function renderMarkdown(source) {
+  if (typeof source !== "string" || source.trim() === "") return "";
+  return md.render(source);
+}
+var md;
+var init_markdown = __esm({
+  "lib/shared/markdown.ts"() {
+    "use strict";
+    md = new MarkdownIt({ html: true, linkify: true, breaks: false });
+  }
+});
+
+// lib/shared/registry/nodeTypes/MarkdownNodeType.ts
+import { z as z10 } from "zod";
+import { createElement as h8 } from "react";
+var MarkdownNodeSchemaInternal, MarkdownNodeType;
+var init_MarkdownNodeType = __esm({
+  "lib/shared/registry/nodeTypes/MarkdownNodeType.ts"() {
+    "use strict";
+    init_markdown();
+    init_schemas();
+    init_createNodeType();
+    init_fieldPresets();
+    MarkdownNodeSchemaInternal = z10.object({
+      type: z10.literal("markdown"),
+      source: z10.string(),
+      // verbatim Markdown source (whitespace-significant)
+      label: z10.string().optional(),
+      // Custom label displayed in structure tree
+      if: IfConditionSchema.optional(),
+      // Conditional rendering - skip node when false
+      style: StyleValueSchema.optional(),
+      interactiveStyles: InteractiveStylesSchema.optional(),
+      generateElementClass: z10.boolean().optional(),
+      attributes: z10.record(z10.string(), z10.union([z10.string(), z10.number(), z10.boolean()])).optional()
+    }).passthrough();
+    MarkdownNodeType = createNodeType({
+      type: "markdown",
+      displayName: "Markdown",
+      category: "content",
+      schema: MarkdownNodeSchemaInternal,
+      defaultValues: {
+        source: "",
+        style: { base: {} }
+      },
+      treeDisplay: {
+        icon: "HTML_ELEMENT",
+        getLabel: () => "Markdown"
+      },
+      editableFields: [
+        textareaField({
+          name: "source",
+          label: "Markdown",
+          required: true,
+          placeholder: "# Heading\n\nWrite **markdown** here\u2026"
+        })
+      ],
+      clientRenderer: (node, context) => {
+        return h8("div", {
+          key: context.key,
+          dangerouslySetInnerHTML: { __html: renderMarkdown(node.source) }
+        });
+      },
+      ssrRenderer: (node, _context) => {
+        return `<div>${renderMarkdown(node.source)}</div>`;
+      },
+      capabilities: {
+        canHaveChildren: false,
+        requiresProps: ["source"]
+      }
+    });
+  }
+});
+
+// lib/shared/registry/nodeTypes/CustomNodeType.ts
+import { z as z11 } from "zod";
+import { createElement as h9 } from "react";
+function customName(src) {
+  const base = src.split("/").pop() ?? src;
+  return base.replace(/\.astro$/i, "") || base;
+}
+function customChildren(node) {
+  const { children } = node;
+  if (Array.isArray(children)) return children.length > 0 ? children : void 0;
+  if (typeof children === "string") return children.length > 0 ? children : void 0;
+  return void 0;
+}
+function escapeHtml2(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var CustomNodeSchemaInternal, CustomNodeType;
+var init_CustomNodeType = __esm({
+  "lib/shared/registry/nodeTypes/CustomNodeType.ts"() {
+    "use strict";
+    init_schemas();
+    init_createNodeType();
+    init_fieldPresets();
+    CustomNodeSchemaInternal = z11.object({
+      type: z11.literal("custom"),
+      // Path to the hand-authored .astro component relative to `src/custom/`
+      // (e.g. "Fancy.astro", "widgets/Banner.astro").
+      src: z11.string(),
+      props: z11.record(z11.string(), z11.any()).optional(),
+      if: IfConditionSchema.optional(),
+      // Conditional rendering - skip node when false
+      // Slotted children (rendered server-side into the component's default <slot/>).
+      children: z11.union([z11.array(z11.any()), z11.string()]).optional()
+    }).passthrough();
+    CustomNodeType = createNodeType({
+      type: "custom",
+      displayName: "Custom Component",
+      category: "special",
+      schema: CustomNodeSchemaInternal,
+      defaultValues: {
+        src: ""
+      },
+      treeDisplay: {
+        icon: "COMPONENT",
+        getLabel: (node) => `Custom: ${customName(node.src) || "?"}`
+      },
+      editableFields: [textField({ name: "src", label: "Custom .astro file", required: true, placeholder: "Fancy.astro" })],
+      // meno-core can't run a foreign `.astro` file. Render the slotted children as normal
+      // content and fall back to a quiet inline marker when there are none. The wrapper keeps
+      // `data-custom` for selection/identification only. Real rendering is play/build only.
+      clientRenderer: (node, context) => {
+        const children = customChildren(node);
+        const inner = children ? context.buildChildren(children, context.elementPath) : h9("span", { style: { color: "#9ca3af", fontSize: "13px" } }, customName(node.src) || "?");
+        return h9("div", { key: context.key, "data-custom": node.src, style: { display: "contents" } }, inner);
+      },
+      ssrRenderer: (node, context) => {
+        const children = customChildren(node);
+        const inner = children ? context.renderChildren(children, context) : `<span style="color:#9ca3af;font-size:13px">${escapeHtml2(customName(node.src) || "?")}</span>`;
+        return `<div data-custom="${escapeHtml2(node.src)}" style="display:contents">${inner}</div>`;
+      },
+      capabilities: {
+        canHaveChildren: true,
+        canHaveStyle: false,
+        canHaveAttributes: false,
+        requiresProps: ["src"]
+      }
+    });
+  }
+});
+
 // lib/shared/registry/nodeTypes/index.ts
 function registerBuiltInNodeTypes() {
   globalNodeTypeManager.registerAll(builtInNodeTypes);
@@ -1651,6 +2081,9 @@ var init_nodeTypes = __esm({
     init_LinkNodeType();
     init_LocaleListNodeType();
     init_ListNodeType();
+    init_IslandNodeType();
+    init_MarkdownNodeType();
+    init_CustomNodeType();
     init_HtmlNodeType();
     init_ComponentInstanceNodeType();
     init_SlotMarkerType();
@@ -1658,6 +2091,9 @@ var init_nodeTypes = __esm({
     init_LinkNodeType();
     init_LocaleListNodeType();
     init_ListNodeType();
+    init_IslandNodeType();
+    init_MarkdownNodeType();
+    init_CustomNodeType();
     builtInNodeTypes = [
       HtmlNodeType,
       ComponentInstanceNodeType,
@@ -1665,7 +2101,10 @@ var init_nodeTypes = __esm({
       EmbedNodeType,
       LinkNodeType,
       LocaleListNodeType,
-      ListNodeType
+      ListNodeType,
+      IslandNodeType,
+      MarkdownNodeType,
+      CustomNodeType
     ];
   }
 });
@@ -1718,28 +2157,334 @@ var init_registry = __esm({
   }
 });
 
-// lib/shared/types/prefetch.ts
-var DEFAULT_PREFETCH_CONFIG = {
-  enabled: false,
-  defaultStrategy: "hover",
-  hoverDebounce: 65,
-  maxCacheSize: 10,
-  cacheTTL: 5 * 60 * 1e3,
-  // 5 minutes
-  respectSaveData: true,
-  slowConnectionThreshold: 2
+// lib/shared/breakpoints.ts
+var DEFAULT_BREAKPOINTS = {
+  tablet: { breakpoint: 1024, previewPoint: 768 },
+  mobile: { breakpoint: 540, previewPoint: 375 }
 };
-
-// lib/shared/validation/validators.ts
-init_schemas();
-function zodToValidationErrors(zodError) {
-  return zodError.errors.map((err) => ({
-    path: err.path.join(".") || "root",
-    message: err.message,
-    code: "INVALID_TYPE"
-  }));
+function normalizeBreakpointConfig(input) {
+  const result = {};
+  for (const [name, value] of Object.entries(input)) {
+    if (typeof value === "number") {
+      result[name] = { breakpoint: value, previewPoint: value };
+    } else if (typeof value === "object" && value !== null) {
+      result[name] = {
+        breakpoint: value.breakpoint,
+        previewPoint: value.previewPoint ?? value.breakpoint,
+        ...value.label !== void 0 && { label: value.label }
+      };
+    }
+  }
+  return result;
 }
-function validatePropDefinition(propDef) {
+function getBreakpointValues(config) {
+  const result = {};
+  for (const [name, entry] of Object.entries(config)) {
+    result[name] = entry.breakpoint;
+  }
+  return result;
+}
+function getPreviewPointValues(config) {
+  const result = {};
+  for (const [name, entry] of Object.entries(config)) {
+    result[name] = entry.previewPoint;
+  }
+  return result;
+}
+function getAllBreakpointNames(breakpoints = DEFAULT_BREAKPOINTS) {
+  const names = ["base"];
+  const breakpointEntries = Object.entries(breakpoints);
+  breakpointEntries.sort((a, b) => b[1].breakpoint - a[1].breakpoint);
+  for (const [name] of breakpointEntries) {
+    names.push(name);
+  }
+  return names;
+}
+function getBreakpointName(viewportWidth, breakpoints = DEFAULT_BREAKPOINTS) {
+  const breakpointEntries = Object.entries(breakpoints);
+  breakpointEntries.sort((a, b) => a[1].breakpoint - b[1].breakpoint);
+  for (const [name, entry] of breakpointEntries) {
+    if (viewportWidth <= entry.breakpoint) {
+      return name;
+    }
+  }
+  return "base";
+}
+function getBreakpointLabel(name, breakpoints = DEFAULT_BREAKPOINTS) {
+  if (name === "base") {
+    return "Desktop";
+  }
+  const entry = breakpoints[name];
+  if (entry?.label) {
+    return entry.label;
+  }
+  return name.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+}
+
+// lib/shared/responsiveScaling.ts
+var DEFAULT_FLUID_RANGE = { min: 320, max: 1440 };
+var DEFAULT_SITE_MARGIN = { min: 16, max: 32 };
+function getScaleCategory(property) {
+  const propertyStr = property;
+  if (property === "fontSize") return "fontSize";
+  if (propertyStr.startsWith("padding")) return "padding";
+  if (propertyStr.startsWith("margin")) return "margin";
+  if (property === "gap" || property === "rowGap" || property === "columnGap") return "gap";
+  if (propertyStr === "borderRadius" || propertyStr.startsWith("border") && propertyStr.includes("Radius"))
+    return "borderRadius";
+  if (property === "width" || property === "height" || property === "maxWidth" || property === "maxHeight" || property === "minWidth" || property === "minHeight")
+    return "size";
+  return null;
+}
+function parseValue(valueStr) {
+  const match = valueStr.trim().match(/^(-?[\d.]+)(px|rem|em|%|pt)$/);
+  if (!match) return null;
+  return {
+    value: parseFloat(match[1] ?? ""),
+    unit: match[2] ?? ""
+  };
+}
+var SCALABLE_CSS_PROPERTIES = /* @__PURE__ */ new Set([
+  "padding",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "padding-bottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  "paddingBottom",
+  "margin",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "margin-bottom",
+  "marginLeft",
+  "marginRight",
+  "marginTop",
+  "marginBottom",
+  "font-size",
+  "fontSize",
+  "gap",
+  "row-gap",
+  "column-gap",
+  "rowGap",
+  "columnGap",
+  "border-radius",
+  "borderRadius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "width",
+  "height",
+  "max-width",
+  "max-height",
+  "min-width",
+  "min-height",
+  "maxWidth",
+  "maxHeight",
+  "minWidth",
+  "minHeight"
+]);
+function calculateResponsiveValue(baseValue, baseReference, scale) {
+  if (Math.abs(baseValue) <= baseReference) {
+    return Math.round(baseValue);
+  }
+  const scaled = baseValue + (baseValue - baseReference) * (scale - 1);
+  return Math.round(scaled);
+}
+function getScaleMultiplier(scales, property, breakpoint) {
+  const category = getScaleCategory(property);
+  if (!category || !scales[category]) return null;
+  const scaleConfig = scales[category];
+  return scaleConfig?.[breakpoint] ?? null;
+}
+function parseMultiValue(valueStr) {
+  const normalized = valueStr.replace(/(?<=\w)-(?=\d|auto|inherit|initial|unset)/g, " ");
+  return normalized.trim().split(/\s+/).filter((v) => v.length > 0);
+}
+function scaleValue(valueStr, baseReference, scale) {
+  const parsed = parseValue(valueStr);
+  if (!parsed) return null;
+  if (parsed.unit === "%" || parsed.unit === "em") {
+    return valueStr.trim();
+  }
+  const scaledValue = calculateResponsiveValue(parsed.value, baseReference, scale);
+  return `${scaledValue}${parsed.unit}`;
+}
+function scalePropertyValue(valueStr, baseReference, scale) {
+  const parts = parseMultiValue(valueStr);
+  if (parts.length === 0) return null;
+  const scaledParts = parts.map((part) => {
+    const scaled = scaleValue(part, baseReference, scale);
+    if (scaled !== null) {
+      return scaled;
+    }
+    return part;
+  });
+  return scaledParts.join(" ");
+}
+function getResponsiveValues(baseValue, property, scales, breakpointNames) {
+  if (!scales.enabled) {
+    return { base: baseValue };
+  }
+  const result = {
+    base: baseValue
+  };
+  const baseRef = scales.baseReference || 16;
+  const breakpoints = breakpointNames ?? ["tablet", "mobile"];
+  for (const breakpointName of breakpoints) {
+    const scale = getScaleMultiplier(scales, property, breakpointName);
+    if (scale !== null) {
+      result[breakpointName] = scalePropertyValue(baseValue, baseRef, scale);
+    }
+  }
+  return result;
+}
+function resolveVariableValueAtBreakpoint(variable, breakpoint, responsiveScales) {
+  if (breakpoint === "base") return variable.value;
+  const override = variable.scales?.[breakpoint];
+  if (override !== void 0) return override;
+  if (responsiveScales?.enabled && variable.type !== "none") {
+    const scale = getScaleMultiplier(responsiveScales, variable.type, breakpoint);
+    if (scale !== null) {
+      const baseRef = responsiveScales.baseReference || 16;
+      const scaled = scalePropertyValue(variable.value, baseRef, scale);
+      if (scaled !== null) return scaled;
+    }
+  }
+  return variable.value;
+}
+function getSmallestBreakpointName(breakpoints) {
+  if (!breakpoints) return null;
+  const entries = Object.entries(breakpoints);
+  const firstEntry = entries[0];
+  if (entries.length === 0 || firstEntry === void 0) return null;
+  let smallestName = firstEntry[0];
+  let smallestWidth = firstEntry[1].breakpoint;
+  for (const [name, cfg] of entries) {
+    if (cfg.breakpoint < smallestWidth) {
+      smallestWidth = cfg.breakpoint;
+      smallestName = name;
+    }
+  }
+  return smallestName;
+}
+function buildFluidClamp(baseValue, unit, scale, vpMin, vpMax, baseReference = 16) {
+  const max = baseValue;
+  const min = calculateResponsiveValue(baseValue, baseReference, scale);
+  if (min === max || vpMax === vpMin) {
+    return `${formatNumber(max)}${unit}`;
+  }
+  const unitToPx = unit === "rem" ? 16 : 1;
+  const minPx = min * unitToPx;
+  const maxPx = max * unitToPx;
+  const slopePx = (maxPx - minPx) / (vpMax - vpMin);
+  const interceptPx = minPx - slopePx * vpMin;
+  const interceptInUnit = interceptPx / unitToPx;
+  const slopeVw = slopePx * 100;
+  return `clamp(${formatNumber(min)}${unit}, ${formatNumber(interceptInUnit)}${unit} + ${formatNumber(slopeVw)}vw, ${formatNumber(max)}${unit})`;
+}
+function buildFluidClampWithExplicitMin(minValue, maxValue, unit, vpMin, vpMax) {
+  if (minValue === maxValue || vpMax === vpMin) {
+    return `${formatNumber(maxValue)}${unit}`;
+  }
+  const unitToPx = unit === "rem" ? 16 : 1;
+  const minPx = minValue * unitToPx;
+  const maxPx = maxValue * unitToPx;
+  const slopePx = (maxPx - minPx) / (vpMax - vpMin);
+  const interceptPx = minPx - slopePx * vpMin;
+  const interceptInUnit = interceptPx / unitToPx;
+  const slopeVw = slopePx * 100;
+  return `clamp(${formatNumber(minValue)}${unit}, ${formatNumber(interceptInUnit)}${unit} + ${formatNumber(slopeVw)}vw, ${formatNumber(maxValue)}${unit})`;
+}
+function formatNumber(n) {
+  if (Number.isInteger(n)) return String(n);
+  return Number(n.toFixed(4)).toString();
+}
+function buildSiteMarginClamp(siteMargin, fluidRange) {
+  const { min, max } = siteMargin;
+  const { min: vpMin, max: vpMax } = fluidRange;
+  if (min === max || vpMax === vpMin) {
+    return `${formatNumber(max)}px`;
+  }
+  const slopePx = (max - min) / (vpMax - vpMin);
+  const interceptPx = min - slopePx * vpMin;
+  const slopeVw = slopePx * 100;
+  return `clamp(${formatNumber(min)}px, ${formatNumber(interceptPx)}px + ${formatNumber(slopeVw)}vw, ${formatNumber(max)}px)`;
+}
+function buildFluidPropertyValue(valueStr, scale, vpMin, vpMax, baseReference = 16) {
+  const parts = parseMultiValue(valueStr);
+  if (parts.length === 0) return null;
+  let anyScaled = false;
+  const out = parts.map((part) => {
+    const parsed = parseValue(part);
+    if (!parsed) return part;
+    if (parsed.unit === "%" || parsed.unit === "em") return part;
+    anyScaled = true;
+    return buildFluidClamp(parsed.value, parsed.unit, scale, vpMin, vpMax, baseReference);
+  });
+  return anyScaled ? out.join(" ") : null;
+}
+var DEFAULT_RESPONSIVE_SCALES = {
+  enabled: false,
+  mode: "breakpoints",
+  baseReference: 16,
+  fluidRange: { ...DEFAULT_FLUID_RANGE },
+  siteMargin: { ...DEFAULT_SITE_MARGIN },
+  fontSize: {
+    tablet: 0.88,
+    mobile: 0.75
+  },
+  padding: {
+    tablet: 0.75,
+    mobile: 0.5
+  },
+  margin: {
+    tablet: 0.7,
+    mobile: 0.45
+  },
+  gap: {
+    tablet: 0.65,
+    mobile: 0.4
+  },
+  borderRadius: {
+    tablet: 0.85,
+    mobile: 0.7
+  },
+  size: {
+    tablet: 0.9,
+    mobile: 0.75
+  }
+};
+
+// lib/shared/types/prefetch.ts
+var DEFAULT_PREFETCH_CONFIG = {
+  enabled: false,
+  defaultStrategy: "hover",
+  hoverDebounce: 65,
+  maxCacheSize: 10,
+  cacheTTL: 5 * 60 * 1e3,
+  // 5 minutes
+  respectSaveData: true,
+  slowConnectionThreshold: 2
+};
+
+// lib/shared/validation/validators.ts
+init_schemas();
+function zodToValidationErrors(zodError) {
+  return zodError.errors.map((err) => ({
+    path: err.path.join(".") || "root",
+    message: err.message,
+    code: "INVALID_TYPE"
+  }));
+}
+function validatePropDefinition(propDef) {
   try {
     const result = PropDefinitionSchema.safeParse(propDef);
     if (result.success) {
@@ -1749,11 +2494,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 +2514,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 +2534,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 +2554,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 +2574,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 +2594,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 +2614,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 +2634,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 +2654,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 +2674,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"
+        }
+      ]
     };
   }
 }
@@ -1935,18 +2700,29 @@ var IRREGULAR_PLURALS = {
   vertices: "vertex",
   matrices: "matrix"
 };
-function singularize(collection) {
+function toIdentifier(name) {
+  if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name)) return name;
+  const parts = name.split(/[^A-Za-z0-9]+/).filter(Boolean);
+  if (parts.length === 0) return "item";
+  const camel = parts[0] + parts.slice(1).map((p) => p[0].toUpperCase() + p.slice(1)).join("");
+  return /^[0-9]/.test(camel) ? `_${camel}` : camel;
+}
+function singularizeRaw(collection) {
   if (IRREGULAR_PLURALS[collection]) {
     return IRREGULAR_PLURALS[collection];
   }
   if (collection.endsWith("ies")) {
-    return collection.slice(0, -3) + "y";
+    return `${collection.slice(0, -3)}y`;
   }
   if (collection.endsWith("ses") || collection.endsWith("xes") || collection.endsWith("zes") || collection.endsWith("ches") || collection.endsWith("shes")) {
     return collection.slice(0, -2);
   }
   return collection.endsWith("s") ? collection.slice(0, -1) : collection;
 }
+function singularize(collection) {
+  if (typeof collection !== "string" || collection === "") return "item";
+  return toIdentifier(singularizeRaw(collection));
+}
 function isItemDraftForLocale(item, locale) {
   return item._draftLocales?.includes(locale) === true;
 }
@@ -1990,6 +2766,10 @@ function evaluateNode(node, context) {
         const left2 = evaluateNode(binaryNode.left, context);
         return left2 ? left2 : evaluateNode(binaryNode.right, context);
       }
+      if (binaryNode.operator === "??") {
+        const left2 = evaluateNode(binaryNode.left, context);
+        return left2 === null || left2 === void 0 ? evaluateNode(binaryNode.right, context) : left2;
+      }
       const left = evaluateNode(binaryNode.left, context);
       const right = evaluateNode(binaryNode.right, context);
       switch (binaryNode.operator) {
@@ -2047,9 +2827,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 +2947,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);
@@ -2205,7 +2983,8 @@ function processItemTemplate(text, ctx, resolveValue) {
 function resolveCompleteTemplateRaw(template, ctx, resolveValue) {
   const match = template.match(/^\{\{(\w+)\.([^}]+)\}\}$/);
   if (!match) return void 0;
-  const [, varName, fieldPath] = match;
+  const varName = match[1] ?? "";
+  const fieldPath = match[2] ?? "";
   const trimmedField = fieldPath.trim();
   if (/[?:<>=!&|+\-*/%]/.test(trimmedField)) return void 0;
   const item = ctx[varName];
@@ -2251,7 +3030,8 @@ function resolveItemsTemplate(template, ctx) {
   if (!match) {
     return template;
   }
-  const [, varName, fieldPath] = match;
+  const varName = match[1] ?? "";
+  const fieldPath = match[2] ?? "";
   const item = ctx[varName];
   if (!item || typeof item !== "object") {
     return void 0;
@@ -2268,7 +3048,8 @@ function resolveItemsTemplate(template, ctx) {
 function resolveTemplateRawValue(template, ctx) {
   const match = template.match(/^\{\{(\w+)\.([^}]+)\}\}$/);
   if (!match) return void 0;
-  const [, varName, fieldPath] = match;
+  const varName = match[1] ?? "";
+  const fieldPath = match[2] ?? "";
   const item = ctx[varName];
   if (!item || typeof item !== "object") return void 0;
   return getNestedValue(item, fieldPath.trim());
@@ -2306,6 +3087,7 @@ function buildItemUrl(urlPattern, item, slugField, locale, i18nConfig) {
   return urlPattern.replace("{{slug}}", String(slug));
 }
 function addItemUrl(item, schema, locale, i18nConfig) {
+  if (!schema.urlPattern || !schema.slugField) return item;
   return {
     ...item,
     _url: buildItemUrl(schema.urlPattern, item, schema.slugField, locale, i18nConfig)
@@ -2481,7 +3263,8 @@ function extractNodeProperties(node) {
 }
 function isLikelyComponentTag(tag) {
   if (!tag) return false;
-  return tag.length > 0 && tag[0] === tag[0].toUpperCase() && tag[0] !== tag[0].toLowerCase();
+  const first = tag[0];
+  return first !== void 0 && first === first.toUpperCase() && first !== first.toLowerCase();
 }
 function isSlotMarker(node) {
   return node?.type === NODE_TYPE.SLOT;
@@ -2514,6 +3297,12 @@ function isLinkNode(node) {
 function isLocaleListNode(node) {
   return node?.type === NODE_TYPE.LOCALE_LIST;
 }
+function isIslandNode(node) {
+  return node?.type === NODE_TYPE.ISLAND;
+}
+function isCustomNode(node) {
+  return node?.type === NODE_TYPE.CUSTOM;
+}
 function isCMSListNode(node) {
   if (node === null || typeof node !== "object") return false;
   const n = node;
@@ -2525,10 +3314,10 @@ function isListNode(node) {
   return n.type === NODE_TYPE.LIST || n.type === "cms-list";
 }
 function isValidNodeType(type) {
-  return type === NODE_TYPE.NODE || type === NODE_TYPE.COMPONENT || type === NODE_TYPE.SLOT || type === NODE_TYPE.EMBED || type === NODE_TYPE.LINK || type === NODE_TYPE.LOCALE_LIST || type === NODE_TYPE.LIST || type === "cms-list";
+  return type === NODE_TYPE.NODE || type === NODE_TYPE.COMPONENT || type === NODE_TYPE.SLOT || type === NODE_TYPE.EMBED || type === NODE_TYPE.LINK || type === NODE_TYPE.LOCALE_LIST || type === NODE_TYPE.LIST || type === NODE_TYPE.ISLAND || type === NODE_TYPE.CUSTOM || type === NODE_TYPE.MARKDOWN || type === "cms-list";
 }
 function canHaveChildren(node) {
-  return node !== null && node !== void 0 && !isSlotMarker(node);
+  return node !== null && node !== void 0 && !isSlotMarker(node) && node._code !== true;
 }
 function canHaveStyle(node) {
   return node !== null && node !== void 0 && !isSlotMarker(node);
@@ -2624,7 +3413,7 @@ function coerceValue(value, expectedType) {
       }
       if (typeof value === "string") {
         const num = Number(value);
-        if (!isNaN(num) && isFinite(num)) {
+        if (!Number.isNaN(num) && Number.isFinite(num)) {
           return num;
         }
       }
@@ -2830,7 +3619,7 @@ function resolveComponentProps(options) {
       result = resolveI18nInProps(result, locale, i18nConfig);
     }
     return wrapRichTextProps(result, propDefs);
-  } catch (error) {
+  } catch (_error) {
     const resolvedProps = {};
     for (const [propName, propDef] of Object.entries(propDefs)) {
       if (propDef && typeof propDef === "object" && "default" in propDef) {
@@ -2861,58 +3650,141 @@ 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 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
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "cursor",
+  "pointerEvents",
+  "userSelect",
+  "transition",
+  "objectFit",
+  "objectPosition",
+  "boxSizing",
+  "visibility",
+  "resize",
+  "scrollBehavior",
+  "accentColor"
+];
 var propertyMap = {
   // Padding
   padding: "p",
@@ -2930,122 +3802,84 @@ var propertyMap = {
   marginLeft: "ml",
   marginInline: "mx",
   marginBlock: "my",
-  // Display & Layout
-  display: "d",
-  flexDirection: "fd",
-  justifyContent: "jc",
-  alignItems: "ai",
-  alignContent: "ac",
+  // Flexbox
   flex: "flex",
-  flexWrap: "fw",
-  gap: "g",
-  rowGap: "rg",
-  columnGap: "cg",
+  gap: "gap",
+  rowGap: "gap-y",
+  columnGap: "gap-x",
+  flexGrow: "grow",
+  flexShrink: "shrink",
+  flexBasis: "basis",
+  order: "order",
   // Sizing
   width: "w",
   height: "h",
-  maxWidth: "mw",
-  maxHeight: "mh",
-  minWidth: "miw",
-  minHeight: "mih",
-  aspectRatio: "ar",
+  maxWidth: "max-w",
+  maxHeight: "max-h",
+  minWidth: "min-w",
+  minHeight: "min-h",
+  aspectRatio: "aspect",
   // Colors & Background
-  backgroundColor: "bgc",
-  background: "bg",
-  backgroundImage: "bgi",
-  color: "c",
+  backgroundColor: "bg",
+  backgroundImage: "bg",
+  color: "text",
   // Borders & Radius
-  border: "b",
-  borderRadius: "br",
-  borderTop: "bt",
+  border: "border",
+  borderColor: "border",
+  borderTop: "border-t",
   borderRight: "border-r",
-  borderBottom: "bb",
-  borderLeft: "bl",
-  borderTopLeftRadius: "brtl",
-  borderTopRightRadius: "brtr",
-  borderBottomLeftRadius: "brbl",
-  borderBottomRightRadius: "brbr",
-  borderColor: "bc",
+  borderBottom: "border-b",
+  borderLeft: "border-l",
+  borderRadius: "rounded",
+  borderTopLeftRadius: "rounded-tl",
+  borderTopRightRadius: "rounded-tr",
+  borderBottomLeftRadius: "rounded-bl",
+  borderBottomRightRadius: "rounded-br",
   // 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",
+  fontSize: "text",
+  fontWeight: "font",
+  fontFamily: "font",
+  lineHeight: "leading",
+  letterSpacing: "tracking",
+  textIndent: "indent",
+  verticalAlign: "align",
   // Lists
-  listStyle: "lst",
-  listStyleType: "lstt",
-  listStylePosition: "lstp",
+  listStyleType: "list",
   // Transform & Effects
-  opacity: "o",
-  transform: "tm",
-  transformOrigin: "tmo",
-  boxShadow: "bsh",
-  textShadow: "ts",
-  filter: "flt",
-  backdropFilter: "bdf",
-  backfaceVisibility: "bfv",
-  mixBlendMode: "mbm",
-  clipPath: "cp",
+  opacity: "opacity",
+  transform: "transform",
+  transformOrigin: "origin",
+  boxShadow: "shadow",
+  textShadow: "text-shadow",
+  filter: "filter",
+  backdropFilter: "backdrop-filter",
   // Positioning
-  position: "pos",
   top: "top",
-  right: "r",
-  bottom: "bo",
-  left: "l",
-  inset: "ins",
+  right: "right",
+  bottom: "bottom",
+  left: "left",
+  inset: "inset",
   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",
+  gridTemplateColumns: "grid-cols",
+  gridTemplateRows: "grid-rows",
+  gridColumn: "col",
+  gridRow: "row",
+  gridAutoRows: "auto-rows",
+  gridAutoColumns: "auto-cols",
   // Outline
-  outline: "ol",
-  outlineWidth: "olw",
-  outlineStyle: "ols",
-  outlineColor: "olc",
-  outlineOffset: "olo",
+  outline: "outline",
+  outlineWidth: "outline",
+  outlineColor: "outline",
+  outlineOffset: "outline-offset",
   // 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"
+  overflow: "overflow",
+  overflowX: "overflow-x",
+  overflowY: "overflow-y",
+  cursor: "cursor",
+  transition: "transition",
+  objectPosition: "object",
+  accentColor: "accent"
 };
 var prefixToCSSProperty = {
   // Spacing
@@ -3063,251 +3897,482 @@ var prefixToCSSProperty = {
   ml: "margin-left",
   mx: "margin",
   my: "margin",
-  g: "gap",
-  rg: "row-gap",
-  cg: "column-gap",
+  gap: "gap",
+  "gap-y": "row-gap",
+  "gap-x": "column-gap",
   // Sizing
   w: "width",
   h: "height",
-  mw: "max-width",
-  mh: "max-height",
-  miw: "min-width",
-  mih: "min-height",
-  ar: "aspect-ratio",
+  "max-w": "max-width",
+  "max-h": "max-height",
+  "min-w": "min-width",
+  "min-h": "min-height",
+  aspect: "aspect-ratio",
   // Colors & Background
-  bgc: "background-color",
-  bg: "background",
-  bgi: "background-image",
-  c: "color",
-  bc: "border-color",
+  bg: "background-color",
+  text: "color",
+  accent: "accent-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: "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
-  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",
+  font: "font-weight",
+  leading: "line-height",
+  tracking: "letter-spacing",
+  indent: "text-indent",
+  align: "vertical-align",
   // Lists
-  lst: "list-style",
-  lstt: "list-style-type",
-  lstp: "list-style-position",
-  // Display
-  d: "display",
+  list: "list-style-type",
   // 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",
+  grow: "flex-grow",
+  shrink: "flex-shrink",
+  basis: "flex-basis",
+  order: "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",
+  "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
-  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",
+  opacity: "opacity",
+  transform: "transform",
+  origin: "transform-origin",
+  shadow: "box-shadow",
+  "text-shadow": "text-shadow",
+  filter: "filter",
+  "backdrop-filter": "backdrop-filter",
   // Positioning
-  pos: "position",
   top: "top",
-  r: "right",
-  bo: "bottom",
-  l: "left",
-  ins: "inset",
+  right: "right",
+  bottom: "bottom",
+  left: "left",
+  inset: "inset",
   z: "z-index",
   // Outline
-  ol: "outline",
-  olw: "outline-width",
-  ols: "outline-style",
-  olc: "outline-color",
-  olo: "outline-offset",
+  outline: "outline",
+  "outline-offset": "outline-offset",
   // 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: "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 SPACING_SCALE = {
+  "0": "0px",
+  px: "1px",
+  "0.5": "2px",
+  "1": "4px",
+  "1.5": "6px",
+  "2": "8px",
+  "2.5": "10px",
+  "3": "12px",
+  "3.5": "14px",
+  "4": "16px",
+  "5": "20px",
+  "6": "24px",
+  "7": "28px",
+  "8": "32px",
+  "9": "36px",
+  "10": "40px",
+  "11": "44px",
+  "12": "48px",
+  "14": "56px",
+  "16": "64px",
+  "20": "80px",
+  "24": "96px",
+  "28": "112px",
+  "32": "128px",
+  "36": "144px",
+  "40": "160px",
+  "44": "176px",
+  "48": "192px",
+  "52": "208px",
+  "56": "224px",
+  "60": "240px",
+  "64": "256px",
+  "72": "288px",
+  "80": "320px",
+  "96": "384px"
 };
-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 SPACING_SCALE_REVERSE = (() => {
+  const reverse = {};
+  for (const [step, length] of Object.entries(SPACING_SCALE)) {
+    reverse[length] = step;
+  }
+  return reverse;
+})();
+var SPACING_SCALE_ROOTS = /* @__PURE__ */ new Set([
+  "p",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "px",
+  "py",
+  "m",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "mx",
+  "my",
+  "gap",
+  "gap-x",
+  "gap-y",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "inset",
+  "w",
+  "h",
+  "min-w",
+  "min-h",
+  "max-w",
+  "max-h",
+  "basis"
+]);
+var COLOR_TOKEN_ROOTS = /* @__PURE__ */ new Set(["text", "bg", "border", "accent", "outline"]);
+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,125 +4388,590 @@ var borderPresets = {
   "0": "1px solid var(--border)",
   "1": "1px solid var(--border-light)"
 };
-
-// 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"
-};
-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++) {
-    hash ^= input.charCodeAt(i);
-    hash = Math.imul(hash, 16777619);
+var presetClassReverse = (() => {
+  const reverse = {};
+  for (const [key, value] of Object.entries(shadowPresets)) {
+    reverse[`shadow-${key}`] = { prop: "boxShadow", value };
   }
-  return (hash >>> 0).toString(36);
-}
-function hasIllegalClassChars(className) {
-  return /[^\w-]/.test(className);
-}
-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;
+  for (const [key, value] of Object.entries(gradientPresets)) {
+    reverse[`bg-gradient-${key}`] = { prop: "background", value };
   }
-  let stringValue = String(value);
-  if (prop === "fontFamily") {
-    stringValue = stringValue.split(",").map((font) => {
-      const trimmed = font.trim();
-      if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
-        return trimmed.slice(1, -1);
-      }
-      return trimmed;
-    }).join(", ");
+  for (const [key, value] of Object.entries(borderPresets)) {
+    reverse[`border-preset-${key}`] = { prop: "border", value };
   }
-  let className = null;
-  if (specialValueMappings[prop]) {
-    const mapping = specialValueMappings[prop];
-    if (mapping[stringValue]) {
-      className = mapping[stringValue];
-    }
+  return reverse;
+})();
+
+// 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/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;
   }
-  if (!className && prop === "boxShadow" && shadowPresets[stringValue]) {
-    className = `sh-${stringValue}`;
+  return result;
+}
+function encodeArbitraryValue(value) {
+  let ok = true;
+  const encoded = transformOutsideUrl(value, (segment) => {
+    if (/["'\\[\]]/.test(segment)) ok = false;
+    return segment.replace(/_/g, "\\_").replace(/\s+/g, "_");
+  });
+  if (!ok) return null;
+  const guardTarget = encoded.replace(/^\[|\]$/g, "").replace(/\\_/g, "");
+  if (/[\s"'\\[\]]/.test(guardTarget)) return null;
+  return encoded;
+}
+function decodeArbitraryValue(encoded) {
+  return transformOutsideUrl(encoded, (segment) => segment.replace(/\\_|_/g, (m) => m === "\\_" ? "_" : " "));
+}
+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 isBareColorTokenName(value) {
+  if (!/^[a-zA-Z][\w-]*$/.test(value)) return false;
+  if (isColorValue(value)) return false;
+  if (/^[a-z]+-\d/i.test(value)) return false;
+  return true;
+}
+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 hasTopLevelWhitespace(value) {
+  let depth = 0;
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i] ?? "";
+    if (ch === "(") depth++;
+    else if (ch === ")") depth = Math.max(0, depth - 1);
+    else if (depth === 0 && /\s/.test(ch)) return true;
   }
-  if (!className && (prop === "background" || prop === "backgroundImage") && gradientPresets[stringValue]) {
-    className = `gr-${stringValue}`;
+  return false;
+}
+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 isColorValue(value) && !hasTopLevelWhitespace(value) ? "border-color" : "border";
+    case "outline": {
+      if (hasTopLevelWhitespace(value) || 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] ?? null, base: match[2] ?? className };
+  }
+  return { breakpoint: null, base: className };
+}
+var DESKTOP_FIRST_VARIANT_PREFIX = "max-";
+var BREAKPOINT_NAME_TO_CLASS = { tablet: "lg", mobile: "sm" };
+var CLASS_NAME_TO_BREAKPOINT = { lg: "tablet", sm: "mobile" };
+function breakpointClassPrefix(breakpointName) {
+  const lower = breakpointName.toLowerCase();
+  const aliased = BREAKPOINT_NAME_TO_CLASS[lower] ?? lower;
+  return `${DESKTOP_FIRST_VARIANT_PREFIX}${aliased}:`;
+}
+function breakpointClassPrefixes(breakpointName) {
+  const lower = breakpointName.toLowerCase();
+  const aliased = BREAKPOINT_NAME_TO_CLASS[lower];
+  const prefixes = [`${DESKTOP_FIRST_VARIANT_PREFIX}${lower}:`, `${lower}:`];
+  if (aliased) prefixes.unshift(`${DESKTOP_FIRST_VARIANT_PREFIX}${aliased}:`);
+  return prefixes;
+}
+function normalizeBreakpointVariant(variant) {
+  if (variant?.startsWith(DESKTOP_FIRST_VARIANT_PREFIX)) {
+    const bare = variant.slice(DESKTOP_FIRST_VARIANT_PREFIX.length);
+    return CLASS_NAME_TO_BREAKPOINT[bare] ?? bare;
+  }
+  return variant;
+}
+var HASH_VALUE_RE = /^h[0-9a-z]+$/;
+function parseUtilityClass(className, knownTokens) {
+  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"
+    };
   }
-  if (!className && prop === "border" && borderPresets[stringValue]) {
-    className = `bd-${stringValue}`;
+  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, knownTokens);
+    if (parsed) return parsed;
   }
-  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}`;
+  return null;
+}
+function parseRootValue(root, rest, knownTokens) {
+  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" };
   }
-  if (!className && stringValue.includes("var(")) {
-    const varMatch = stringValue.match(/var\((--[\w-]+)\)/);
-    if (varMatch) {
-      const varName = varMatch[1].replace("--", "");
-      className = `${prefix}-${varName}`;
+  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 (SPACING_SCALE_ROOTS.has(root)) {
+    const scaleVal = SPACING_SCALE[rest];
+    if (scaleVal !== void 0) {
+      return { property: resolveRootProperty(root, scaleVal), value: scaleVal, root, kind: "keyword" };
     }
   }
-  if (!className && (prop === "color" || prop === "backgroundColor" || prop === "borderColor") && !stringValue.match(/^\d/) && !stringValue.includes("#") && !stringValue.includes("rgb")) {
-    className = `${prefix}-${stringValue}`;
+  if (integerValueRoots.has(root) && /^-?\d+$/.test(rest)) {
+    return { property: prefixToCSSProperty[root] ?? root, value: rest, root, kind: "numeric" };
   }
-  if (!className && (stringValue.match(/^\d+px$/) || stringValue.match(/^\d+em$/))) {
-    className = `${prefix}-${stringValue}`;
+  if (root === "opacity" && /^\d{1,3}$/.test(rest)) {
+    return { property: "opacity", value: String(Number(rest) / 100), root, kind: "numeric" };
   }
-  if (!className && stringValue.match(/^\d+%$/)) {
-    const percentValue = stringValue.replace("%", "p");
-    className = `${prefix}-${percentValue}`;
+  if (COLOR_TOKEN_ROOTS.has(root) && knownTokens?.has(rest)) {
+    const value = `var(--${rest})`;
+    return { property: resolveRootProperty(root, value), value, root, kind: "var" };
   }
-  if (!className && stringValue.includes(" ")) {
-    const spacedValue = stringValue.replace(/\s+/g, "-");
-    className = `${prefix}-${spacedValue}`;
+  if (HASH_VALUE_RE.test(rest)) {
+    return { property: prefixToCSSProperty[root] ?? root, value: null, root, kind: "hash" };
   }
-  if (!className && stringValue === "auto") {
-    className = `${prefix}-auto`;
+  return null;
+}
+
+// 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/utilityClassMapper.ts
+function isStyleMapping(value) {
+  return typeof value === "object" && value !== null && "_mapping" in value && value._mapping === true;
+}
+function shortHash(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+}
+function rootFormMisresolves(root, prop, value) {
+  const parsedProp = ROOT_CAMEL_OVERRIDES[root] ?? cssPropertyToCamel(resolveRootProperty(root, value));
+  return parsedProp !== prop;
+}
+function propertyValueToClass(prop, value) {
+  let stringValue = String(value);
+  if (prop === "fontFamily") {
+    stringValue = stringValue.split(",").map((font) => {
+      const trimmed = font.trim();
+      if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+        return trimmed.slice(1, -1);
+      }
+      return trimmed;
+    }).join(", ");
+  }
+  const staticClass = staticUtilities[prop]?.[stringValue];
+  if (staticClass) {
+    registerStyleValue(staticClass, stringValue);
+    return staticClass;
+  }
+  const shadowPreset = shadowPresets[stringValue];
+  if (prop === "boxShadow" && shadowPreset) {
+    const className2 = `shadow-${stringValue}`;
+    registerStyleValue(className2, shadowPreset);
+    return className2;
+  }
+  const gradientPreset = gradientPresets[stringValue];
+  if ((prop === "background" || prop === "backgroundImage") && gradientPreset) {
+    const className2 = `bg-gradient-${stringValue}`;
+    registerStyleValue(className2, gradientPreset);
+    return className2;
+  }
+  const borderPreset = borderPresets[stringValue];
+  if (prop === "border" && borderPreset) {
+    const className2 = `border-preset-${stringValue}`;
+    registerStyleValue(className2, borderPreset);
+    return className2;
   }
-  if (!className && stringValue.includes("/")) {
-    const slashValue = stringValue.replace(/\//g, "s");
-    className = `${prefix}-${slashValue}`;
+  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;
+  }
+  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 && genericKeywordRoots.has(root) && /^[a-z][a-z-]*$/.test(stringValue)) {
+    className = `${root}-${stringValue}`;
+  }
+  if (!className && integerValueRoots.has(root) && /^-?\d+$/.test(stringValue)) {
+    className = `${root}-${stringValue}`;
+  }
+  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 && SPACING_SCALE_ROOTS.has(root)) {
+    const step = SPACING_SCALE_REVERSE[stringValue];
+    if (step !== void 0) {
+      className = `${root}-${step}`;
+    }
   }
   if (!className) {
-    className = `${prefix}-${stringValue}`;
+    const varMatch = stringValue.match(/^var\((--[\w-]+)\)$/);
+    if (varMatch) {
+      const varName = (varMatch[1] ?? "").slice(2);
+      if (prop === "fontSize") className = `text-(length:${varMatch[1]})`;
+      else if (prop === "fontWeight") className = `font-(number:${varMatch[1]})`;
+      else if (rootFormMisresolves(root, prop, stringValue)) {
+        className = `[${camelToKebab(prop)}:${stringValue}]`;
+      } else if (colorTokenProps.has(prop) && isBareColorTokenName(varName)) {
+        className = `${root}-${varName}`;
+      } else className = `${root}-(${varMatch[1]})`;
+    }
   }
-  if (hasIllegalClassChars(className)) {
-    className = `${prefix}-h${shortHash(stringValue)}`;
+  if (!className && colorTokenProps.has(prop) && isBareColorTokenName(stringValue)) {
+    className = `${root}-${stringValue}`;
+  }
+  if (!className) {
+    const encoded = encodeArbitraryValue(stringValue);
+    if (encoded != null) {
+      className = rootFormMisresolves(root, prop, stringValue) ? `[${camelToKebab(prop)}:${encoded}]` : `${root}-[${encoded}]`;
+    }
+  }
+  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) => {
@@ -3454,6 +4984,7 @@ function stylesToClasses(styles) {
   const classes = [];
   for (const prop of sortedProps) {
     const value = styles[prop];
+    if (value === void 0) continue;
     if (isStyleMapping(value)) continue;
     const className = propertyValueToClass(prop, value);
     if (className) {
@@ -3516,11 +5047,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 +5058,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;
@@ -3544,54 +5073,48 @@ 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);
+function classToStyle(className, knownTokens) {
+  const { base: cleanClass } = splitVariantPrefix(className);
+  if (staticUtilityReverse[cleanClass]) {
+    return staticUtilityReverse[cleanClass];
   }
-  if (classToStyleSpecialCases[cleanClass]) {
-    return classToStyleSpecialCases[cleanClass];
+  if (presetClassReverse[cleanClass]) {
+    return presetClassReverse[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 parsed = parseUtilityClass(cleanClass, knownTokens);
+  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) {
+function classesToStyles(classes, knownTokens) {
   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 styleEntry = classToStyle(cleanClass);
+    const { breakpoint: variant, base: cleanClass } = splitVariantPrefix(className);
+    const bp = normalizeBreakpointVariant(variant);
+    const breakpoint = bp === "tablet" ? "tablet" : bp === "mobile" ? "mobile" : "base";
+    const styleEntry = classToStyle(cleanClass, knownTokens);
     if (styleEntry) {
       if (!styles[breakpoint]) {
         styles[breakpoint] = {};
@@ -3601,7 +5124,53 @@ function classesToStyles(classes) {
   }
   if (Object.keys(styles.tablet || {}).length === 0) delete styles.tablet;
   if (Object.keys(styles.mobile || {}).length === 0) delete styles.mobile;
-  return Object.keys(styles.base || {}).length > 0 ? styles : null;
+  const hasAny = Object.keys(styles.base || {}).length > 0 || Object.keys(styles.tablet || {}).length > 0 || Object.keys(styles.mobile || {}).length > 0;
+  return hasAny ? styles : null;
+}
+function isClassableStyleValue(value) {
+  if (typeof value === "number") return true;
+  if (typeof value === "string") return !value.includes("{{");
+  return false;
+}
+function splitStyleBucket(bucket) {
+  const classable = {};
+  const residual = {};
+  for (const [k, v] of Object.entries(bucket)) {
+    if (isClassableStyleValue(v)) classable[k] = v;
+    else residual[k] = v;
+  }
+  return { classable, residual };
+}
+function splitStyleByClassability(style) {
+  if (!style || typeof style !== "object") return { classable: null, residual: null };
+  if (isResponsiveStyle(style)) {
+    const classable = {};
+    const residual = {};
+    for (const [bp, bucket] of Object.entries(style)) {
+      if (!bucket || typeof bucket !== "object") continue;
+      const split2 = splitStyleBucket(bucket);
+      if (Object.keys(split2.classable).length > 0) classable[bp] = split2.classable;
+      if (Object.keys(split2.residual).length > 0) residual[bp] = split2.residual;
+    }
+    return {
+      classable: Object.keys(classable).length > 0 ? classable : null,
+      residual: Object.keys(residual).length > 0 ? residual : null
+    };
+  }
+  const split = splitStyleBucket(style);
+  return {
+    classable: Object.keys(split.classable).length > 0 ? { base: split.classable } : null,
+    residual: Object.keys(split.residual).length > 0 ? { base: split.residual } : null
+  };
+}
+function styleHasMapping(style) {
+  if (!style || typeof style !== "object") return false;
+  const buckets = isResponsiveStyle(style) ? Object.values(style) : [style];
+  for (const bucket of buckets) {
+    if (!bucket || typeof bucket !== "object") continue;
+    for (const v of Object.values(bucket)) if (isStyleMapping(v)) return true;
+  }
+  return false;
 }
 
 // lib/shared/paths/Path.ts
@@ -3634,12 +5203,8 @@ 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
-      );
+    if (typeof value !== "number" || Number.isNaN(value) || !Number.isFinite(value)) {
+      throw new InvalidPathError(`Invalid path value at index ${i}: expected number, got ${typeof value}`, path, i);
     }
   }
 }
@@ -3666,7 +5231,7 @@ function stringToPath(str) {
   }
   return str.split(",").map((s) => {
     const num = parseInt(s, 10);
-    if (isNaN(num)) {
+    if (Number.isNaN(num)) {
       throw new PathConversionError(`Invalid numeric index: ${s}`, str);
     }
     return num;
@@ -3691,9 +5256,9 @@ function domPathStringToTreePath(domPath) {
   const path = [0];
   for (let i = 0; i < parts.length; i++) {
     if (parts[i] === CHILDREN_TOKEN && i + 1 < parts.length) {
-      const indexStr = parts[i + 1];
+      const indexStr = parts[i + 1] ?? "";
       const index = parseInt(indexStr, 10);
-      if (!isNaN(index) && indexStr === String(index)) {
+      if (!Number.isNaN(index) && indexStr === String(index)) {
         path.push(index);
         i++;
       }
@@ -3727,6 +5292,7 @@ function calculateChildrenExpansionOffset(componentPath, componentStructure, ins
   let currentNode = componentStructure;
   for (let i = 1; i < componentPath.length; i++) {
     const index = componentPath[i];
+    if (index === void 0) break;
     if (!currentNode || !Array.isArray(currentNode.children)) {
       break;
     }
@@ -3792,12 +5358,12 @@ function convertPagePathToComponentPath(pagePath, componentInstancePath, compone
   if (suffix.length > 0 && componentStructure && Array.isArray(instanceChildren)) {
     const childrenCount = instanceChildren.length;
     if (Array.isArray(componentStructure.children) && componentStructure.children.length > 0 && isSlotMarker(componentStructure.children[0])) {
-      const pageFirstIndex = suffix[0];
+      const pageFirstIndex = suffix[0] ?? 0;
       if (pageFirstIndex < childrenCount) {
         adjustedSuffix = suffix;
       } else {
         const offset = childrenCount - 1;
-        adjustedSuffix = [suffix[0] - offset, ...suffix.slice(1)];
+        adjustedSuffix = [pageFirstIndex - offset, ...suffix.slice(1)];
       }
     }
   }
@@ -3811,7 +5377,7 @@ function convertComponentPathToPagePath(componentPath, componentInstancePath, co
   const offset = calculateChildrenExpansionOffset(componentPath, componentStructure, instanceChildren);
   let adjustedSuffix = suffix;
   if (offset > 0 && suffix.length > 0) {
-    adjustedSuffix = [suffix[0] + offset, ...suffix.slice(1)];
+    adjustedSuffix = [(suffix[0] ?? 0) + offset, ...suffix.slice(1)];
   }
   return [...componentInstancePath, ...adjustedSuffix];
 }
@@ -3845,8 +5411,8 @@ function parseElementClassName(className) {
   if (!match) return null;
   return {
     fileType: match[1] === "c" ? "component" : "page",
-    fileName: match[2],
-    elementName: match[3]
+    fileName: match[2] ?? "",
+    elementName: match[3] ?? ""
   };
 }
 
@@ -3858,9 +5424,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 +5453,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 = {};
@@ -3977,7 +5539,7 @@ function createStyleMappingFromProps(componentPropDefs, currentValue) {
       mappingValues[opt] = "";
     });
   } else {
-    mappingValues["default"] = currentValue;
+    mappingValues.default = currentValue;
   }
   return {
     _mapping: true,
@@ -3988,7 +5550,7 @@ function createStyleMappingFromProps(componentPropDefs, currentValue) {
 
 // lib/shared/linkUtils.ts
 function normalizePath(path) {
-  let normalized = path.split("?")[0].split("#")[0];
+  let normalized = (path.split("?")[0] ?? "").split("#")[0] ?? "";
   if (normalized.length > 1 && normalized.endsWith("/")) {
     normalized = normalized.slice(0, -1);
   }
@@ -4000,7 +5562,7 @@ function isCurrentLink(href, currentPagePath) {
 }
 
 // lib/shared/viewportUnits.ts
-var VIEWPORT_UNIT_RE = /(?<![\w-])(-?\d*\.?\d+)(s|l|d)?(vh|vw)\b/g;
+var VIEWPORT_UNIT_RE = /(?<![\w\-[])(-?\d*\.?\d+)(s|l|d)?(vh|vw)\b/g;
 function rewriteViewportUnits(input) {
   if (!input) return input;
   return input.replace(VIEWPORT_UNIT_RE, (_match, num, sizeKw, axis) => {
@@ -4100,195 +5662,69 @@ 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"
+// lib/shared/pxToRem.ts
+var DEFAULT_REM_CONFIG = {
+  enabled: false,
+  baseFontSize: 16
+};
+var PX_REGEX = /(-?\d*\.?\d+)px/g;
+function convertPxToRem(cssValue, baseFontSize) {
+  return cssValue.replace(PX_REGEX, (_, num) => {
+    const px = parseFloat(num);
+    if (px === 0) return "0";
+    const rem = px / baseFontSize;
+    const rounded = parseFloat(rem.toFixed(4));
+    return `${rounded}rem`;
+  });
+}
+var PX_KEEP_PROPERTIES = /* @__PURE__ */ new Set([
+  "border-width",
+  "border-top-width",
+  "border-right-width",
+  "border-bottom-width",
+  "border-left-width",
+  "outline-width",
+  "outline-offset",
+  "border",
+  "box-shadow",
+  "text-shadow"
 ]);
-function isCssNamedColor(value) {
-  return CSS_NAMED_COLORS.has(value.toLowerCase());
+function shouldConvertProperty(cssProperty) {
+  return !PX_KEEP_PROPERTIES.has(cssProperty);
+}
+function applyRemConversion(declarations, remConfig) {
+  if (!remConfig?.enabled) return declarations;
+  return declarations.split(";").map((decl) => {
+    const trimmed = decl.trim();
+    if (!trimmed) return "";
+    const colonIndex = trimmed.indexOf(":");
+    if (colonIndex === -1) return trimmed;
+    const property = trimmed.substring(0, colonIndex).trim();
+    const value = trimmed.substring(colonIndex + 1).trim();
+    if (shouldConvertProperty(property)) {
+      return `${property}: ${convertPxToRem(value, remConfig.baseFontSize)}`;
+    }
+    return trimmed;
+  }).filter(Boolean).join("; ");
 }
 
 // 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 prop = propertyOrder[i];
+    if (prop === void 0) continue;
+    const kebab = camelToKebab(prop);
+    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 +5734,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 +5753,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;
-}
-function generateRuleForClass(className) {
+  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, knownTokens) {
   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, knownTokens);
+  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 +5859,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 +5878,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;
@@ -4625,31 +5904,30 @@ function applyContainerPattern(style, fluidActive) {
     marginRight: "auto"
   };
 }
-function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, responsiveScales, remConfig) {
+function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, responsiveScales, remConfig, knownTokens) {
   const css = [];
   const baseClasses = /* @__PURE__ */ new Set();
   const autoResponsiveClasses = /* @__PURE__ */ new Set();
   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";
+    for (const prefix of breakpointClassPrefixes(breakpointName)) {
+      responsiveClasses[prefix] = {
+        classes: /* @__PURE__ */ new Set(),
+        breakpointName,
+        value: breakpointValue
+      };
     }
-    responsiveClasses[prefix] = {
-      classes: /* @__PURE__ */ new Set(),
-      breakpointName,
-      value: breakpointValue
-    };
   }
   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);
-        const rule = generateRuleForClass(potentialClass);
-        if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
-          responsiveClasses[prefix].classes.add(potentialClass);
+      if (className.startsWith(prefix) && className.length > prefix.length) {
+        const potentialClass = className.substring(prefix.length);
+        const rule = generateRuleForClass(potentialClass, knownTokens);
+        const bucket = responsiveClasses[prefix];
+        if (rule && bucket) {
+          bucket.classes.add(potentialClass);
           matched = true;
           break;
         }
@@ -4671,7 +5949,7 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
   const mode = getResponsiveMode(responsiveScales);
   const fluidActive = responsiveScales?.enabled === true && mode === "fluid";
   for (const className of sortClassesByPropertyOrder(baseClasses)) {
-    let rule = generateRuleForClass(className);
+    let rule = generateRuleForClass(className, knownTokens);
     if (rule) {
       if (fluidActive && autoResponsiveClasses.has(className)) {
         rule = applyFluidToUtilityRule(rule, className, responsiveScales, breakpoints);
@@ -4683,7 +5961,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 +5990,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 +6001,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) {
-      const rule = generateRuleForClass(className);
+    for (const className of sortClassesByPropertyOrder(breakpointInfo.classes)) {
+      const rule = generateRuleForClass(className, knownTokens);
       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) {
@@ -4739,29 +6017,27 @@ function generateUtilityCSS(usedClasses, breakpoints = DEFAULT_BREAKPOINTS, resp
   }
   return css.join("\n");
 }
-function generateSingleClassCSS(className, breakpoints = DEFAULT_BREAKPOINTS, responsiveScales, remConfig) {
+function generateSingleClassCSS(className, breakpoints = DEFAULT_BREAKPOINTS, responsiveScales, remConfig, knownTokens) {
   const breakpointValues = getBreakpointValues(breakpoints);
   const css = [];
   const responsivePrefixes = {};
   for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
-    let prefix = breakpointName.charAt(0).toLowerCase();
-    if (breakpointName.toLowerCase() === "mobile") {
-      prefix = "mob";
+    for (const prefix of breakpointClassPrefixes(breakpointName)) {
+      responsivePrefixes[prefix] = { breakpointName, value: breakpointValue };
     }
-    responsivePrefixes[prefix] = { 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);
-      const rule = generateRuleForClass(potentialClass);
-      if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
+    if (className.startsWith(prefix) && className.length > prefix.length) {
+      const potentialClass = className.substring(prefix.length);
+      const rule = generateRuleForClass(potentialClass, knownTokens);
+      const responsivePrefix = responsivePrefixes[prefix];
+      if (rule && responsivePrefix) {
         const escapedClassName = escapeCSSClassName(className);
-        const escapedInnerClass = escapeCSSClassName(potentialClass);
-        const bpValue = responsivePrefixes[prefix].value;
+        const bpValue = responsivePrefix.value;
         const finalRule = applyRemConversion(rule, remConfig);
         css.push(`@media (max-width: ${bpValue}px) {
-  .${prefix}-${escapedInnerClass} { ${finalRule} }
+  .${escapedClassName} { ${finalRule} }
 }`);
         matched = true;
         break;
@@ -4769,7 +6045,7 @@ function generateSingleClassCSS(className, breakpoints = DEFAULT_BREAKPOINTS, re
     }
   }
   if (!matched) {
-    let rule = generateRuleForClass(className);
+    let rule = generateRuleForClass(className, knownTokens);
     if (!rule) return "";
     const mode = getResponsiveMode(responsiveScales);
     const fluidActive = responsiveScales?.enabled === true && mode === "fluid";
@@ -4797,9 +6073,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}; }
-}`);
+}`
+              );
             }
           }
         }
@@ -4808,91 +6086,21 @@ function generateSingleClassCSS(className, breakpoints = DEFAULT_BREAKPOINTS, re
   }
   return css.join("\n");
 }
-function extractUtilityClassesFromHTML(html) {
+function extractUtilityClassesFromHTML(html, knownTokens) {
   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+/);
+  let match = classRegex.exec(html);
+  while (match !== null) {
+    const classList = (match[1] ?? "").split(/\s+/);
+    match = classRegex.exec(html);
     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, knownTokens)) {
         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 +6134,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 +6168,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 +6186,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 +6207,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;
@@ -5034,6 +6227,35 @@ function generateAllInteractiveCSS(interactiveStylesMap, breakpoints = DEFAULT_B
 }
 
 export {
+  DEFAULT_BREAKPOINTS,
+  normalizeBreakpointConfig,
+  getBreakpointValues,
+  getPreviewPointValues,
+  getAllBreakpointNames,
+  getBreakpointName,
+  getBreakpointLabel,
+  DEFAULT_FLUID_RANGE,
+  DEFAULT_SITE_MARGIN,
+  parseValue,
+  SCALABLE_CSS_PROPERTIES,
+  calculateResponsiveValue,
+  getScaleMultiplier,
+  parseMultiValue,
+  scaleValue,
+  scalePropertyValue,
+  getResponsiveValues,
+  resolveVariableValueAtBreakpoint,
+  getSmallestBreakpointName,
+  buildFluidClamp,
+  buildFluidClampWithExplicitMin,
+  buildSiteMarginClamp,
+  buildFluidPropertyValue,
+  DEFAULT_RESPONSIVE_SCALES,
+  DEFAULT_REM_CONFIG,
+  setErrorHandler,
+  logRuntimeError,
+  logNetworkError,
+  init_errorLogger,
   DEFAULT_PREFETCH_CONFIG,
   PropDefinitionSchema,
   StyleMappingSchema,
@@ -5134,6 +6356,8 @@ export {
   isEmbedNode,
   isLinkNode,
   isLocaleListNode,
+  isIslandNode,
+  isCustomNode,
   isCMSListNode,
   isListNode,
   isValidNodeType,
@@ -5154,6 +6378,15 @@ export {
   isRichTextMarker,
   richTextMarkerToHtml,
   resolvePropsFromDefinition,
+  propertyMap,
+  staticUtilityReverse,
+  keywordValues,
+  presetClassReverse,
+  CSS_NAMED_COLORS,
+  isCssNamedColor,
+  splitVariantPrefix,
+  breakpointClassPrefixes,
+  normalizeBreakpointVariant,
   registerStyleValue,
   registerDynamicStyle,
   getStyleValue,
@@ -5167,6 +6400,9 @@ export {
   responsiveStylesToClasses,
   classToStyle,
   classesToStyles,
+  isClassableStyleValue,
+  splitStyleByClassability,
+  styleHasMapping,
   ROOT_STRING,
   ROOT_0_STRING,
   CHILDREN_SEPARATOR,
@@ -5203,15 +6439,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-2IIQK7T3.js.map