@bookklik/senangstart-css 0.2.8 → 0.2.9

package/dist/senangstart-css.js

@@ -2,7 +2,7 @@
 (() => {
   // src/core/constants.js
   var BREAKPOINTS = ["mob", "tab", "lap", "desk", "tw-sm", "tw-md", "tw-lg", "tw-xl", "tw-2xl"];
-  var STATES = ["hover", "focus", "focus-visible", "active", "disabled", "dark"];
+  var STATES = ["hover", "focus", "focus-visible", "active", "disabled", "dark", "expanded", "selected"];
   var LAYOUT_KEYWORDS = [
     "flex",
     "grid",
@@ -24,7 +24,14 @@
     "absolute",
     "relative",
     "fixed",
-    "sticky"
+    "sticky",
+    // State Capabilities
+    "hoverable",
+    "focusable",
+    "pressable",
+    "expandable",
+    "selectable",
+    "disabled"
   ];
 
   // src/utils/common.js
@@ -141,6 +148,15 @@
     }
     return token;
   }
+  function tokenizeAll(parsed) {
+    const tokens = [];
+    for (const [attrType, values] of Object.entries(parsed)) {
+      for (const raw of values) {
+        tokens.push(tokenize(raw, attrType));
+      }
+    }
+    return tokens;
+  }
 
   // src/compiler/generators/preflight.js
   function generatePreflight(config) {
@@ -2187,9 +2203,9 @@ video {
     tableLayout,
     captionSide
   };
-  function buildLayoutMap() {
+  function buildLayoutMap(definitions = layoutDefinitions) {
     const map = {};
-    for (const def of Object.values(layoutDefinitions)) {
+    for (const def of Object.values(definitions)) {
       if (def.dynamic) continue;
       if (!def.syntax || !def.syntax.includes('layout="[')) continue;
       for (const v of def.values) {
@@ -2541,16 +2557,41 @@ video {
       "vast-10x",
       "min",
       "max",
-      "fit"
+      "fit",
+      // Percentage adjectives
+      "full",
+      "half",
+      "third",
+      "third-2x",
+      "quarter",
+      "quarter-2x",
+      "quarter-3x",
+      // Fractional values (backwards compatibility)
+      "1/1",
+      "1/2",
+      "1/3",
+      "2/3",
+      "1/4",
+      "2/4",
+      "3/4"
+    ],
+    percentageAdjectives: [
+      { name: "full", value: "100%", description: "Full width (100%)", descriptionMs: "Lebar penuh (100%)" },
+      { name: "half", value: "50%", description: "Half width (50%)", descriptionMs: "Separuh lebar (50%)" },
+      { name: "third", value: "33.333333%", description: "One third width (33%)", descriptionMs: "Satu pertiga lebar (33%)" },
+      { name: "third-2x", value: "66.666667%", description: "Two thirds width (66%)", descriptionMs: "Dua pertiga lebar (66%)" },
+      { name: "quarter", value: "25%", description: "One quarter width (25%)", descriptionMs: "Satu perempat lebar (25%)" },
+      { name: "quarter-2x", value: "50%", description: "Two quarters width (50%)", descriptionMs: "Dua perempat lebar (50%)" },
+      { name: "quarter-3x", value: "75%", description: "Three quarters width (75%)", descriptionMs: "Tiga perempat lebar (75%)" }
     ],
     supportsArbitrary: true,
     examples: [
-      { code: '<div space="w:[100%]">Full width</div>', description: "Full width" },
+      { code: '<div space="w:full">Full width</div>', description: "Full width" },
+      { code: '<div space="w:half">Half width</div>', description: "Half width (50%)" },
+      { code: '<div space="w:third">Third width</div>', description: "One third width (33%)" },
+      { code: '<div space="w:quarter-3x">Three quarters</div>', description: "Three quarters width (75%)" },
       { code: '<div space="max-w:[1200px]">Max width container</div>', description: "Max width" },
-      { code: '<div space="min-w:[300px]">Min width</div>', description: "Minimum width" },
-      { code: '<div space="w:max">Content width</div>', description: "Width based on content (max-content)" },
-      { code: '<div space="max-w:max">Max content width</div>', description: "Maximum content width" },
-      { code: '<div space="min-w:min">Min content width</div>', description: "Minimum content width" }
+      { code: '<div space="w:max">Content width</div>', description: "Width based on content (max-content)" }
     ],
     preview: [
       {
@@ -2559,11 +2600,11 @@ video {
         description: "Set fixed or percentage widths",
         descriptionMs: "Tetapkan lebar tetap atau peratusan",
         html: `<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="w:[100%] p:small" visual="bg:primary text:white rounded:small">w:[100%]</div>
-  <div space="w:[75%] p:small" visual="bg:primary text:white rounded:small">w:[75%]</div>
-  <div space="w:[50%] p:small" visual="bg:primary text:white rounded:small">w:[50%]</div>
+  <div space="w:full p:small" visual="bg:primary text:white rounded:small">w:full</div>
+  <div space="w:quarter-3x p:small" visual="bg:primary text:white rounded:small">w:quarter-3x</div>
+  <div space="w:half p:small" visual="bg:primary text:white rounded:small">w:half</div>
 </div>`,
-        highlightValue: "w:[100%]"
+        highlightValue: "w:full"
       },
       {
         title: "Content-Based Sizing",
@@ -2652,15 +2693,40 @@ video {
       "vast-10x",
       "min",
       "max",
-      "fit"
+      "fit",
+      // Percentage adjectives
+      "full",
+      "half",
+      "third",
+      "third-2x",
+      "quarter",
+      "quarter-2x",
+      "quarter-3x",
+      // Fractional values (backwards compatibility)
+      "1/1",
+      "1/2",
+      "1/3",
+      "2/3",
+      "1/4",
+      "2/4",
+      "3/4"
+    ],
+    percentageAdjectives: [
+      { name: "full", value: "100%", description: "Full height (100%)", descriptionMs: "Tinggi penuh (100%)" },
+      { name: "half", value: "50%", description: "Half height (50%)", descriptionMs: "Separuh tinggi (50%)" },
+      { name: "third", value: "33.333333%", description: "One third height (33%)", descriptionMs: "Satu pertiga tinggi (33%)" },
+      { name: "third-2x", value: "66.666667%", description: "Two thirds height (66%)", descriptionMs: "Dua pertiga tinggi (66%)" },
+      { name: "quarter", value: "25%", description: "One quarter height (25%)", descriptionMs: "Satu perempat tinggi (25%)" },
+      { name: "quarter-2x", value: "50%", description: "Two quarters height (50%)", descriptionMs: "Dua perempat tinggi (50%)" },
+      { name: "quarter-3x", value: "75%", description: "Three quarters height (75%)", descriptionMs: "Tiga perempat tinggi (75%)" }
     ],
     supportsArbitrary: true,
     examples: [
-      { code: '<div space="h:[100vh]">Full viewport height</div>', description: "Full height" },
+      { code: '<div space="h:full">Full height</div>', description: "Full height" },
+      { code: '<div space="h:half">Half height</div>', description: "Half height (50%)" },
+      { code: '<div space="h:[100vh]">Full viewport height</div>', description: "Full viewport height" },
       { code: '<div space="min-h:[400px]">Min height</div>', description: "Minimum height" },
-      { code: '<div space="h:max">Content height</div>', description: "Height based on content (max-content)" },
-      { code: '<div space="max-h:max">Max content height</div>', description: "Maximum content height" },
-      { code: '<div space="min-h:min">Min content height</div>', description: "Minimum content height" }
+      { code: '<div space="h:max">Content height</div>', description: "Height based on content (max-content)" }
     ],
     preview: [
       {
@@ -2669,11 +2735,11 @@ video {
         description: "Set fixed heights",
         descriptionMs: "Tetapkan tinggi tetap",
         html: `<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
-  <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
-  <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
-  <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
+  <div space="h:full p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:full</div>
+  <div space="h:third-2x p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:third-2x</div>
+  <div space="h:half p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:half</div>
 </div>`,
-        highlightValue: "h:[100%]"
+        highlightValue: "h:full"
       },
       {
         title: "Content-Based Height",
@@ -6784,1887 +6850,2485 @@ video {
     };
   }
 
-  // src/cdn/senangstart-engine.js
-  (function() {
-    "use strict";
-    const defaultConfig = {
-      theme: {
-        spacing: {
-          "none": "0px",
-          // No space
-          "thin": "1px",
-          // Hairline (for borders)
-          "regular": "2px",
-          // Standard border
-          "thick": "3px",
-          // Bold border
-          "tiny": "4px",
-          // Small offsets
-          "tiny-2x": "6px",
-          // Tiny multiplied
-          "small": "8px",
-          "small-2x": "10px",
-          "small-3x": "12px",
-          "small-4x": "14px",
-          "medium": "16px",
-          "medium-2x": "20px",
-          "medium-3x": "24px",
-          "medium-4x": "28px",
-          "large": "32px",
-          "large-2x": "36px",
-          "large-3x": "40px",
-          "large-4x": "44px",
-          "big": "48px",
-          "big-2x": "56px",
-          "big-3x": "64px",
-          "big-4x": "80px",
-          "giant": "96px",
-          "giant-2x": "112px",
-          "giant-3x": "128px",
-          "giant-4x": "144px",
-          "vast": "160px",
-          "vast-2x": "176px",
-          "vast-3x": "192px",
-          "vast-4x": "208px",
-          "vast-5x": "224px",
-          "vast-6x": "240px",
-          "vast-7x": "256px",
-          "vast-8x": "288px",
-          "vast-9x": "320px",
-          "vast-10x": "384px"
-        },
-        radius: {
-          "none": "0px",
-          "small": "4px",
-          "medium": "8px",
-          "big": "16px",
-          "round": "9999px"
-        },
-        shadow: {
-          "none": "none",
-          "small": "0 1px 2px rgba(0,0,0,0.05)",
-          "medium": "0 4px 6px rgba(0,0,0,0.1)",
-          "big": "0 10px 15px rgba(0,0,0,0.15)",
-          "giant": "0 25px 50px rgba(0,0,0,0.25)"
-        },
-        fontSize: {
-          "mini": "0.75rem",
-          // 12px
-          "small": "0.875rem",
-          // 14px
-          "base": "1rem",
-          // 16px
-          "large": "1.125rem",
-          // 18px
-          "big": "1.25rem",
-          // 20px
-          "huge": "1.5rem",
-          // 24px
-          "grand": "1.875rem",
-          // 30px
-          "giant": "2.25rem",
-          // 36px
-          "mount": "3rem",
-          // 48px
-          "mega": "3.75rem",
-          // 60px
-          "giga": "4.5rem",
-          // 72px
-          "tera": "6rem",
-          // 96px
-          "hero": "8rem"
-          // 128px
-        },
-        fontSizeLineHeight: {
-          "mini": "1rem",
-          // 16px
-          "small": "1.25rem",
-          // 20px
-          "base": "1.5rem",
-          // 24px
-          "large": "1.75rem",
-          // 28px
-          "big": "1.75rem",
-          // 28px
-          "huge": "2rem",
-          // 32px
-          "grand": "2.25rem",
-          // 36px
-          "giant": "2.5rem",
-          // 40px
-          "mount": "1",
-          // unitless 1
-          "mega": "1",
-          // unitless 1
-          "giga": "1",
-          // unitless 1
-          "tera": "1",
-          // unitless 1
-          "hero": "1"
-          // unitless 1
-        },
-        fontWeight: {
-          "normal": "400",
-          "medium": "500",
-          "bold": "700"
-        },
-        screens: {
-          "mob": "480px",
-          "tab": "768px",
-          "lap": "1024px",
-          "desk": "1280px",
-          // Tailwind compatibility
-          "tw-sm": "640px",
-          "tw-md": "768px",
-          "tw-lg": "1024px",
-          "tw-xl": "1280px",
-          "tw-2xl": "1536px"
-        },
-        colors: {
-          // Base colors
-          "white": "#FFFFFF",
-          "black": "#000000",
-          // Brand/Semantic colors
-          "grey": "#6B7280",
-          "dark": "#3E4A5D",
-          "light": "#DBEAFE",
-          "primary": "#2563EB",
-          "secondary": "#DBEAFE",
-          "success": "#10B981",
-          "warning": "#F59E0B",
-          "danger": "#EF4444",
-          // Red
-          "red-50": "#FEF2F2",
-          "red-100": "#FEE2E2",
-          "red-200": "#FECACA",
-          "red-300": "#FCA5A5",
-          "red-400": "#F87171",
-          "red-500": "#EF4444",
-          "red-600": "#DC2626",
-          "red-700": "#B91C1C",
-          "red-800": "#991B1B",
-          "red-900": "#7F1D1D",
-          "red-950": "#450A0A",
-          // Orange
-          "orange-50": "#FFF7ED",
-          "orange-100": "#FFEDD5",
-          "orange-200": "#FED7AA",
-          "orange-300": "#FDBA74",
-          "orange-400": "#FB923C",
-          "orange-500": "#F97316",
-          "orange-600": "#EA580C",
-          "orange-700": "#C2410C",
-          "orange-800": "#9A3412",
-          "orange-900": "#7C2D12",
-          "orange-950": "#431407",
-          // Amber
-          "amber-50": "#FFFBEB",
-          "amber-100": "#FEF3C7",
-          "amber-200": "#FDE68A",
-          "amber-300": "#FCD34D",
-          "amber-400": "#FBBF24",
-          "amber-500": "#F59E0B",
-          "amber-600": "#D97706",
-          "amber-700": "#B45309",
-          "amber-800": "#92400E",
-          "amber-900": "#78350F",
-          "amber-950": "#451A03",
-          // Yellow
-          "yellow-50": "#FEFCE8",
-          "yellow-100": "#FEF9C3",
-          "yellow-200": "#FEF08A",
-          "yellow-300": "#FDE047",
-          "yellow-400": "#FACC15",
-          "yellow-500": "#EAB308",
-          "yellow-600": "#CA8A04",
-          "yellow-700": "#A16207",
-          "yellow-800": "#854D0E",
-          "yellow-900": "#713F12",
-          "yellow-950": "#422006",
-          // Lime
-          "lime-50": "#F7FEE7",
-          "lime-100": "#ECFCCB",
-          "lime-200": "#D9F99D",
-          "lime-300": "#BEF264",
-          "lime-400": "#A3E635",
-          "lime-500": "#84CC16",
-          "lime-600": "#65A30D",
-          "lime-700": "#4D7C0F",
-          "lime-800": "#3F6212",
-          "lime-900": "#365314",
-          "lime-950": "#1A2E05",
-          // Green
-          "green-50": "#F0FDF4",
-          "green-100": "#DCFCE7",
-          "green-200": "#BBF7D0",
-          "green-300": "#86EFAC",
-          "green-400": "#4ADE80",
-          "green-500": "#22C55E",
-          "green-600": "#16A34A",
-          "green-700": "#15803D",
-          "green-800": "#166534",
-          "green-900": "#14532D",
-          "green-950": "#052E16",
-          // Emerald
-          "emerald-50": "#ECFDF5",
-          "emerald-100": "#D1FAE5",
-          "emerald-200": "#A7F3D0",
-          "emerald-300": "#6EE7B7",
-          "emerald-400": "#34D399",
-          "emerald-500": "#10B981",
-          "emerald-600": "#059669",
-          "emerald-700": "#047857",
-          "emerald-800": "#065F46",
-          "emerald-900": "#064E3B",
-          "emerald-950": "#022C22",
-          // Teal
-          "teal-50": "#F0FDFA",
-          "teal-100": "#CCFBF1",
-          "teal-200": "#99F6E4",
-          "teal-300": "#5EEAD4",
-          "teal-400": "#2DD4BF",
-          "teal-500": "#14B8A6",
-          "teal-600": "#0D9488",
-          "teal-700": "#0F766E",
-          "teal-800": "#115E59",
-          "teal-900": "#134E4A",
-          "teal-950": "#042F2E",
-          // Cyan
-          "cyan-50": "#ECFEFF",
-          "cyan-100": "#CFFAFE",
-          "cyan-200": "#A5F3FC",
-          "cyan-300": "#67E8F9",
-          "cyan-400": "#22D3EE",
-          "cyan-500": "#06B6D4",
-          "cyan-600": "#0891B2",
-          "cyan-700": "#0E7490",
-          "cyan-800": "#155E75",
-          "cyan-900": "#164E63",
-          "cyan-950": "#083344",
-          // Sky
-          "sky-50": "#F0F9FF",
-          "sky-100": "#E0F2FE",
-          "sky-200": "#BAE6FD",
-          "sky-300": "#7DD3FC",
-          "sky-400": "#38BDF8",
-          "sky-500": "#0EA5E9",
-          "sky-600": "#0284C7",
-          "sky-700": "#0369A1",
-          "sky-800": "#075985",
-          "sky-900": "#0C4A6E",
-          "sky-950": "#082F49",
-          // Blue
-          "blue-50": "#EFF6FF",
-          "blue-100": "#DBEAFE",
-          "blue-200": "#BFDBFE",
-          "blue-300": "#93C5FD",
-          "blue-400": "#60A5FA",
-          "blue-500": "#3B82F6",
-          "blue-600": "#2563EB",
-          "blue-700": "#1D4ED8",
-          "blue-800": "#1E40AF",
-          "blue-900": "#1E3A8A",
-          "blue-950": "#172554",
-          // Indigo
-          "indigo-50": "#EEF2FF",
-          "indigo-100": "#E0E7FF",
-          "indigo-200": "#C7D2FE",
-          "indigo-300": "#A5B4FC",
-          "indigo-400": "#818CF8",
-          "indigo-500": "#6366F1",
-          "indigo-600": "#4F46E5",
-          "indigo-700": "#4338CA",
-          "indigo-800": "#3730A3",
-          "indigo-900": "#312E81",
-          "indigo-950": "#1E1B4B",
-          // Violet
-          "violet-50": "#F5F3FF",
-          "violet-100": "#EDE9FE",
-          "violet-200": "#DDD6FE",
-          "violet-300": "#C4B5FD",
-          "violet-400": "#A78BFA",
-          "violet-500": "#8B5CF6",
-          "violet-600": "#7C3AED",
-          "violet-700": "#6D28D9",
-          "violet-800": "#5B21B6",
-          "violet-900": "#4C1D95",
-          "violet-950": "#2E1065",
-          // Purple
-          "purple-50": "#FAF5FF",
-          "purple-100": "#F3E8FF",
-          "purple-200": "#E9D5FF",
-          "purple-300": "#D8B4FE",
-          "purple-400": "#C084FC",
-          "purple-500": "#A855F7",
-          "purple-600": "#9333EA",
-          "purple-700": "#7E22CE",
-          "purple-800": "#6B21A8",
-          "purple-900": "#581C87",
-          "purple-950": "#3B0764",
-          // Fuchsia
-          "fuchsia-50": "#FDF4FF",
-          "fuchsia-100": "#FAE8FF",
-          "fuchsia-200": "#F5D0FE",
-          "fuchsia-300": "#F0ABFC",
-          "fuchsia-400": "#E879F9",
-          "fuchsia-500": "#D946EF",
-          "fuchsia-600": "#C026D3",
-          "fuchsia-700": "#A21CAF",
-          "fuchsia-800": "#86198F",
-          "fuchsia-900": "#701A75",
-          "fuchsia-950": "#4A044E",
-          // Pink
-          "pink-50": "#FDF2F8",
-          "pink-100": "#FCE7F3",
-          "pink-200": "#FBCFE8",
-          "pink-300": "#F9A8D4",
-          "pink-400": "#F472B6",
-          "pink-500": "#EC4899",
-          "pink-600": "#DB2777",
-          "pink-700": "#BE185D",
-          "pink-800": "#9D174D",
-          "pink-900": "#831843",
-          "pink-950": "#500724",
-          // Rose
-          "rose-50": "#FFF1F2",
-          "rose-100": "#FFE4E6",
-          "rose-200": "#FECDD3",
-          "rose-300": "#FDA4AF",
-          "rose-400": "#FB7185",
-          "rose-500": "#F43F5E",
-          "rose-600": "#E11D48",
-          "rose-700": "#BE123C",
-          "rose-800": "#9F1239",
-          "rose-900": "#881337",
-          "rose-950": "#4C0519",
-          // Slate
-          "slate-50": "#F8FAFC",
-          "slate-100": "#F1F5F9",
-          "slate-200": "#E2E8F0",
-          "slate-300": "#CBD5E1",
-          "slate-400": "#94A3B8",
-          "slate-500": "#64748B",
-          "slate-600": "#475569",
-          "slate-700": "#334155",
-          "slate-800": "#1E293B",
-          "slate-900": "#0F172A",
-          "slate-950": "#020617",
-          // Gray
-          "gray-50": "#F9FAFB",
-          "gray-100": "#F3F4F6",
-          "gray-200": "#E5E7EB",
-          "gray-300": "#D1D5DB",
-          "gray-400": "#9CA3AF",
-          "gray-500": "#6B7280",
-          "gray-600": "#4B5563",
-          "gray-700": "#374151",
-          "gray-800": "#1F2937",
-          "gray-900": "#111827",
-          "gray-950": "#030712",
-          // Zinc
-          "zinc-50": "#FAFAFA",
-          "zinc-100": "#F4F4F5",
-          "zinc-200": "#E4E4E7",
-          "zinc-300": "#D4D4D8",
-          "zinc-400": "#A1A1AA",
-          "zinc-500": "#71717A",
-          "zinc-600": "#52525B",
-          "zinc-700": "#3F3F46",
-          "zinc-800": "#27272A",
-          "zinc-900": "#18181B",
-          "zinc-950": "#09090B",
-          // Neutral
-          "neutral-50": "#FAFAFA",
-          "neutral-100": "#F5F5F5",
-          "neutral-200": "#E5E5E5",
-          "neutral-300": "#D4D4D4",
-          "neutral-400": "#A3A3A3",
-          "neutral-500": "#737373",
-          "neutral-600": "#525252",
-          "neutral-700": "#404040",
-          "neutral-800": "#262626",
-          "neutral-900": "#171717",
-          "neutral-950": "#0A0A0A",
-          // Stone
-          "stone-50": "#FAFAF9",
-          "stone-100": "#F5F5F4",
-          "stone-200": "#E7E5E4",
-          "stone-300": "#D6D3D1",
-          "stone-400": "#A8A29E",
-          "stone-500": "#78716C",
-          "stone-600": "#57534E",
-          "stone-700": "#44403C",
-          "stone-800": "#292524",
-          "stone-900": "#1C1917",
-          "stone-950": "#0C0A09"
-        },
-        zIndex: {
-          "base": "0",
-          "low": "10",
-          "mid": "50",
-          "high": "100",
-          "top": "9999"
-        },
-        ring: {
-          "none": "0px",
-          "thin": "1px",
-          "regular": "2px",
-          "thick": "3px",
-          "small": "4px",
-          "medium": "6px",
-          "big": "8px"
-        }
-      },
-      // Dark mode configuration
-      // 'media' - Uses @media (prefers-color-scheme: dark)
-      // 'selector' - Uses .dark class on html/body
-      darkMode: "media",
-      // Preflight: Include opinionated base reset styles
-      // true - Include all preflight styles (default)
-      // false - Disable preflight completely
-      preflight: true
-    };
-    const configSchema = {
-      theme: {
-        type: "object",
-        properties: {
-          spacing: { type: "object" },
-          radius: { type: "object" },
-          shadow: { type: "object" },
-          fontSize: { type: "object" },
-          fontWeight: { type: "object" },
-          screens: { type: "object" },
-          colors: { type: "object" },
-          zIndex: { type: "object" },
-          ring: { type: "object" }
-        }
-      },
-      darkMode: { type: "string", enum: ["media", "selector"] },
-      preflight: { type: "boolean" }
-    };
-    function validateConfig(config) {
-      if (!config || typeof config !== "object" || Array.isArray(config)) {
-        return false;
-      }
-      if (config.theme && (typeof config.theme !== "object" || Array.isArray(config.theme))) {
-        return false;
-      }
-      if (config.darkMode !== void 0 && config.darkMode !== "media" && config.darkMode !== "selector" && !Array.isArray(config.darkMode)) {
-        return false;
-      }
-      if (config.preflight !== void 0 && typeof config.preflight !== "boolean") {
-        return false;
-      }
-      return true;
+  // src/compiler/generators/css.js
+  var { layoutMap, typographyKeywords: typographyKeywords2 } = buildAllMaps();
+  function sanitizeArbitraryValue(value) {
+    return sanitizeValue(value);
+  }
+  var CSS_COLOR_KEYWORDS = ["transparent", "currentColor", "inherit", "initial", "unset"];
+  function resolveColorValue(value, isArbitrary) {
+    if (isArbitrary) {
+      return value;
     }
-    function loadInlineConfig() {
-      const configEl = document.querySelector('script[type="senangstart/config"]');
-      if (!configEl) return {};
-      try {
-        const parsed = JSON.parse(configEl.textContent);
-        if (!validateConfig(parsed)) {
-          console.error("[SenangStart] Invalid config structure");
-          return {};
-        }
-        return parsed;
-      } catch (e) {
-        console.error("[SenangStart] Invalid config JSON:", e);
-        return {};
-      }
+    if (CSS_COLOR_KEYWORDS.includes(value)) {
+      return value;
     }
-    function mergeConfig(user) {
-      if (!validateConfig(user)) {
-        console.error("[SenangStart] Invalid user config, using defaults");
-        return JSON.parse(JSON.stringify(defaultConfig));
-      }
-      const merged = JSON.parse(JSON.stringify(defaultConfig));
-      if (user.theme) {
-        for (const key of Object.keys(merged.theme)) {
-          if (user.theme[key]) {
-            merged.theme[key] = { ...merged.theme[key], ...user.theme[key] };
-          }
-        }
-      }
-      if (user.darkMode !== void 0) {
-        merged.darkMode = user.darkMode;
-      }
-      if (user.preflight !== void 0) {
-        merged.preflight = user.preflight;
-      }
-      return merged;
+    return `var(--c-${value})`;
+  }
+  function generateCSSVariables(config) {
+    const { theme } = config;
+    let css = ":root {\n";
+    for (const [key, value] of Object.entries(theme.spacing)) {
+      css += `  --s-${key}: ${value};
+`;
     }
-    function generateCSSVariables(config) {
-      const { theme } = config;
-      let css = ":root {\n";
-      for (const [key, value] of Object.entries(theme.spacing)) {
-        css += `  --s-${key}: ${value};
+    for (const [key, value] of Object.entries(theme.radius)) {
+      css += `  --r-${key}: ${value};
 `;
-      }
-      for (const [key, value] of Object.entries(theme.radius)) {
-        css += `  --r-${key}: ${value};
+    }
+    for (const [key, value] of Object.entries(theme.shadow)) {
+      css += `  --shadow-${key}: ${value};
 `;
-      }
-      for (const [key, value] of Object.entries(theme.shadow)) {
-        css += `  --shadow-${key}: ${value};
+    }
+    for (const [key, value] of Object.entries(theme.fontSize)) {
+      css += `  --font-${key}: ${value};
 `;
-      }
-      for (const [key, value] of Object.entries(theme.fontSize)) {
-        css += `  --font-${key}: ${value};
+    }
+    if (theme.fontSizeLineHeight) {
+      for (const [key, value] of Object.entries(theme.fontSizeLineHeight)) {
+        css += `  --font-lh-${key}: ${value};
 `;
       }
-      if (theme.fontSizeLineHeight) {
-        for (const [key, value] of Object.entries(theme.fontSizeLineHeight)) {
-          css += `  --font-lh-${key}: ${value};
+    }
+    for (const [key, value] of Object.entries(theme.fontWeight)) {
+      css += `  --fw-${key}: ${value};
 `;
-        }
-      }
-      for (const [key, value] of Object.entries(theme.fontWeight)) {
-        css += `  --fw-${key}: ${value};
+    }
+    for (const [key, value] of Object.entries(theme.colors)) {
+      css += `  --c-${key}: ${value};
 `;
-      }
-      for (const [key, value] of Object.entries(theme.colors)) {
-        css += `  --c-${key}: ${value};
+    }
+    for (const [key, value] of Object.entries(theme.zIndex)) {
+      css += `  --z-${key}: ${value};
 `;
-      }
-      for (const [key, value] of Object.entries(theme.zIndex)) {
-        css += `  --z-${key}: ${value};
+    }
+    const twSpacing = {
+      "0": "0px",
+      "px": "1px",
+      "0.5": "0.125rem",
+      "1": "0.25rem",
+      "1.5": "0.375rem",
+      "2": "0.5rem",
+      "2.5": "0.625rem",
+      "3": "0.75rem",
+      "3.5": "0.875rem",
+      "4": "1rem",
+      "5": "1.25rem",
+      "6": "1.5rem",
+      "7": "1.75rem",
+      "8": "2rem",
+      "9": "2.25rem",
+      "10": "2.5rem",
+      "11": "2.75rem",
+      "12": "3rem",
+      "14": "3.5rem",
+      "16": "4rem",
+      "20": "5rem",
+      "24": "6rem",
+      "28": "7rem",
+      "32": "8rem",
+      "36": "9rem",
+      "40": "10rem",
+      "44": "11rem",
+      "48": "12rem",
+      "52": "13rem",
+      "56": "14rem",
+      "60": "15rem",
+      "64": "16rem",
+      "72": "18rem",
+      "80": "20rem",
+      "96": "24rem"
+    };
+    for (const [key, value] of Object.entries(twSpacing)) {
+      css += `  --tw-${key.replace(/\./g, "\\\\.")}: ${value};
 `;
-      }
-      if (theme.ring) {
-        for (const [key, value] of Object.entries(theme.ring)) {
-          css += `  --ring-${key}: ${value};
+    }
+    const twRadius = {
+      "none": "0px",
+      "sm": "0.125rem",
+      "DEFAULT": "0.25rem",
+      "md": "0.375rem",
+      "lg": "0.5rem",
+      "xl": "0.75rem",
+      "2xl": "1rem",
+      "3xl": "1.5rem",
+      "full": "9999px"
+    };
+    for (const [key, value] of Object.entries(twRadius)) {
+      css += `  --r-tw-${key}: ${value};
 `;
-        }
-      }
-      css += `  --ring-color: var(--c-primary);
+    }
+    const twShadow = {
+      "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      "DEFAULT": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+      "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+      "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+      "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+      "inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+      "none": "0 0 #0000"
+    };
+    for (const [key, value] of Object.entries(twShadow)) {
+      css += `  --shadow-tw-${key}: ${value};
 `;
-      css += `  --ring-offset: 0px;
+    }
+    const twFontSize = {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "3.75rem",
+      "7xl": "4.5rem",
+      "8xl": "6rem",
+      "9xl": "8rem"
+    };
+    for (const [key, value] of Object.entries(twFontSize)) {
+      css += `  --tw-text-${key}: ${value};
 `;
-      css += `  --ring-offset-color: #fff;
+    }
+    const twLeading = {
+      "xs": "1rem",
+      "sm": "1.25rem",
+      "base": "1.5rem",
+      "lg": "1.75rem",
+      "xl": "1.75rem",
+      "2xl": "2rem",
+      "3xl": "2.25rem",
+      "4xl": "2.5rem",
+      "5xl": "1",
+      "6xl": "1",
+      "7xl": "1",
+      "8xl": "1",
+      "9xl": "1"
+    };
+    for (const [key, value] of Object.entries(twLeading)) {
+      css += `  --tw-leading-${key}: ${value};
 `;
-      const twSpacing = {
-        "0": "0px",
-        "px": "1px",
-        "0.5": "0.125rem",
-        "1": "0.25rem",
-        "1.5": "0.375rem",
-        "2": "0.5rem",
-        "2.5": "0.625rem",
-        "3": "0.75rem",
-        "3.5": "0.875rem",
-        "4": "1rem",
-        "5": "1.25rem",
-        "6": "1.5rem",
-        "7": "1.75rem",
-        "8": "2rem",
-        "9": "2.25rem",
-        "10": "2.5rem",
-        "11": "2.75rem",
-        "12": "3rem",
-        "14": "3.5rem",
-        "16": "4rem",
-        "20": "5rem",
-        "24": "6rem",
-        "28": "7rem",
-        "32": "8rem",
-        "36": "9rem",
-        "40": "10rem",
-        "44": "11rem",
-        "48": "12rem",
-        "52": "13rem",
-        "56": "14rem",
-        "60": "15rem",
-        "64": "16rem",
-        "72": "18rem",
-        "80": "20rem",
-        "96": "24rem"
-      };
-      for (const [key, value] of Object.entries(twSpacing)) {
-        css += `  --tw-${key}: ${value};
+    }
+    const twFontWeight = {
+      "thin": "100",
+      "extralight": "200",
+      "light": "300",
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700",
+      "extrabold": "800",
+      "black": "900"
+    };
+    for (const [key, value] of Object.entries(twFontWeight)) {
+      css += `  --tw-font-${key}: ${value};
 `;
-      }
-      const twRadius = {
-        "none": "0px",
-        "sm": "0.125rem",
-        "DEFAULT": "0.25rem",
-        "md": "0.375rem",
-        "lg": "0.5rem",
-        "xl": "0.75rem",
-        "2xl": "1rem",
-        "3xl": "1.5rem",
-        "full": "9999px"
+    }
+    css += "}\n\n";
+    return css;
+  }
+  function generateLayoutRule(token, config) {
+    const { property, value, isArbitrary } = token;
+    if (property === value && layoutMap[property]) {
+      return layoutMap[property];
+    }
+    if (property === "justify") {
+      const justifyMap = {
+        "start": "flex-start",
+        "end": "flex-end",
+        "center": "center",
+        "between": "space-between",
+        "around": "space-around",
+        "evenly": "space-evenly",
+        "stretch": "stretch"
       };
-      for (const [key, value] of Object.entries(twRadius)) {
-        css += `  --tw-rounded-${key}: ${value};
-`;
-      }
-      const twShadow = {
-        "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-        "DEFAULT": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-        "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-        "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-        "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-        "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
-        "inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
-        "none": "0 0 #0000"
+      return `justify-content: ${justifyMap[value] || value};`;
+    }
+    if (property === "justify-items") {
+      return `justify-items: ${value};`;
+    }
+    if (property === "justify-self") {
+      return `justify-self: ${value};`;
+    }
+    if (property === "content") {
+      const contentMap = {
+        "start": "flex-start",
+        "end": "flex-end",
+        "center": "center",
+        "between": "space-between",
+        "around": "space-around",
+        "evenly": "space-evenly",
+        "stretch": "stretch"
       };
-      for (const [key, value] of Object.entries(twShadow)) {
-        css += `  --tw-shadow-${key}: ${value};
-`;
-      }
-      const twFontSize = {
-        "xs": "0.75rem",
-        "sm": "0.875rem",
-        "base": "1rem",
-        "lg": "1.125rem",
-        "xl": "1.25rem",
-        "2xl": "1.5rem",
-        "3xl": "1.875rem",
-        "4xl": "2.25rem",
-        "5xl": "3rem",
-        "6xl": "3.75rem",
-        "7xl": "4.5rem",
-        "8xl": "6rem",
-        "9xl": "8rem"
+      return `align-content: ${contentMap[value] || value};`;
+    }
+    if (property === "items") {
+      const itemsMap = {
+        "start": "flex-start",
+        "end": "flex-end",
+        "center": "center",
+        "baseline": "baseline",
+        "stretch": "stretch"
       };
-      for (const [key, value] of Object.entries(twFontSize)) {
-        css += `  --tw-text-${key}: ${value};
-`;
-      }
-      const twLeading = {
-        "xs": "1rem",
-        "sm": "1.25rem",
-        "base": "1.5rem",
-        "lg": "1.75rem",
-        "xl": "1.75rem",
-        "2xl": "2rem",
-        "3xl": "2.25rem",
-        "4xl": "2.5rem",
-        "5xl": "1",
-        "6xl": "1",
-        "7xl": "1",
-        "8xl": "1",
-        "9xl": "1"
+      return `align-items: ${itemsMap[value] || value};`;
+    }
+    if (property === "self") {
+      const selfMap = {
+        "auto": "auto",
+        "start": "flex-start",
+        "end": "flex-end",
+        "center": "center",
+        "baseline": "baseline",
+        "stretch": "stretch"
       };
-      for (const [key, value] of Object.entries(twLeading)) {
-        css += `  --tw-leading-${key}: ${value};
-`;
-      }
-      const twFontWeight = {
-        "thin": "100",
-        "extralight": "200",
-        "light": "300",
-        "normal": "400",
-        "medium": "500",
-        "semibold": "600",
-        "bold": "700",
-        "extrabold": "800",
-        "black": "900"
+      return `align-self: ${selfMap[value] || value};`;
+    }
+    if (property === "place-content") {
+      const placeContentMap = {
+        "start": "start",
+        "end": "end",
+        "center": "center",
+        "between": "space-between",
+        "around": "space-around",
+        "evenly": "space-evenly",
+        "stretch": "stretch"
       };
-      for (const [key, value] of Object.entries(twFontWeight)) {
-        css += `  --tw-font-${key}: ${value};
-`;
-      }
-      css += "}\n\n";
-      return css;
+      return `place-content: ${placeContentMap[value] || value};`;
     }
-    const { layoutMap: layoutKeywords, typographyKeywords: typographyKeywords2 } = buildAllMaps();
-    const breakpoints = BREAKPOINTS;
-    const states = STATES;
-    function generateLayoutRule(token) {
-      const { property, value, isArbitrary } = token;
-      if (property === value && layoutKeywords[property]) {
-        return layoutKeywords[property];
-      }
-      if (property === "container") {
-        return "width: 100%; margin-left: auto; margin-right: auto;";
-      }
-      if (property === "justify") {
-        const justifyMap = {
-          "start": "flex-start",
-          "end": "flex-end",
-          "center": "center",
-          "between": "space-between",
-          "around": "space-around",
-          "evenly": "space-evenly",
-          "stretch": "stretch"
-        };
-        return `justify-content: ${justifyMap[value] || value};`;
-      }
-      if (property === "justify-items") {
-        return `justify-items: ${value};`;
-      }
-      if (property === "justify-self") {
-        return `justify-self: ${value};`;
+    if (property === "place-items") {
+      return `place-items: ${value};`;
+    }
+    if (property === "place-self") {
+      return `place-self: ${value};`;
+    }
+    if (property === "z") {
+      return `z-index: var(--z-${value});`;
+    }
+    if (property === "overflow") {
+      return `overflow: ${value};`;
+    }
+    if (property === "overflow-x") {
+      return `overflow-x: ${value};`;
+    }
+    if (property === "overflow-y") {
+      return `overflow-y: ${value};`;
+    }
+    if (property === "aspect") {
+      const aspectMap = {
+        "square": "1 / 1",
+        "video": "16 / 9",
+        "auto": "auto"
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, " ") : aspectMap[value] || value;
+      return `aspect-ratio: ${cssValue};`;
+    }
+    if (property === "object") {
+      return `object-fit: ${value};`;
+    }
+    if (property === "object-pos") {
+      const cssValue = isArbitrary ? value.replace(/_/g, " ") : value;
+      return `object-position: ${cssValue};`;
+    }
+    const positioningPercentages = {
+      "full": "100%",
+      "half": "50%",
+      "third": "33.333333%",
+      "third-2x": "66.666667%",
+      "quarter": "25%",
+      "quarter-2x": "50%",
+      "quarter-3x": "75%",
+      // Keep fractional values for backwards compatibility
+      "1/1": "100%",
+      "1/2": "50%",
+      "1/3": "33.333333%",
+      "2/3": "66.666667%",
+      "1/4": "25%",
+      "2/4": "50%",
+      "3/4": "75%"
+    };
+    const resolvePositioningValue = (val, arb) => {
+      if (arb) return val;
+      if (val === "0") return "0";
+      if (val.startsWith("-")) {
+        const positiveVal = val.substring(1);
+        if (positioningPercentages[positiveVal]) {
+          return `-${positioningPercentages[positiveVal]}`;
+        }
       }
-      if (property === "content") {
-        const contentMap = {
-          "start": "flex-start",
-          "end": "flex-end",
-          "center": "center",
-          "between": "space-between",
-          "around": "space-around",
-          "evenly": "space-evenly",
-          "stretch": "stretch"
-        };
-        return `align-content: ${contentMap[value] || value};`;
+      if (positioningPercentages[val]) {
+        return positioningPercentages[val];
       }
-      if (property === "items") {
-        const itemsMap = {
-          "start": "flex-start",
-          "end": "flex-end",
-          "center": "center",
-          "baseline": "baseline",
-          "stretch": "stretch"
-        };
-        return `align-items: ${itemsMap[value] || value};`;
+      return `var(--s-${val})`;
+    };
+    if (property === "inset") {
+      const cssValue = resolvePositioningValue(value, isArbitrary);
+      return `inset: ${cssValue};`;
+    }
+    if (["top", "right", "bottom", "left"].includes(property)) {
+      const cssValue = resolvePositioningValue(value, isArbitrary);
+      return `${property}: ${cssValue};`;
+    }
+    if (property === "inset-x") {
+      const cssValue = resolvePositioningValue(value, isArbitrary);
+      return `left: ${cssValue}; right: ${cssValue};`;
+    }
+    if (property === "inset-y") {
+      const cssValue = resolvePositioningValue(value, isArbitrary);
+      return `top: ${cssValue}; bottom: ${cssValue};`;
+    }
+    if (property === "cols") {
+      return `columns: ${value};`;
+    }
+    if (property === "overscroll") {
+      return `overscroll-behavior: ${value};`;
+    }
+    if (property === "overscroll-x") {
+      return `overscroll-behavior-x: ${value};`;
+    }
+    if (property === "overscroll-y") {
+      return `overscroll-behavior-y: ${value};`;
+    }
+    if (property === "basis") {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `flex-basis: ${cssValue};`;
+    }
+    if (property === "flex") {
+      const flexPresets = {
+        "1": "1 1 0%",
+        "auto": "1 1 auto",
+        "initial": "0 1 auto",
+        "none": "none"
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, " ") : flexPresets[value] || value;
+      return `flex: ${cssValue};`;
+    }
+    if (property === "order") {
+      const orderPresets = {
+        "first": "-9999",
+        "last": "9999",
+        "none": "0"
+      };
+      const cssValue = orderPresets[value] || value;
+      return `order: ${cssValue};`;
+    }
+    if (property === "grid-cols") {
+      if (value === "none") {
+        return "grid-template-columns: none;";
       }
-      if (property === "self") {
-        const selfMap = {
-          "auto": "auto",
-          "start": "flex-start",
-          "end": "flex-end",
-          "center": "center",
-          "baseline": "baseline",
-          "stretch": "stretch"
-        };
-        return `align-self: ${selfMap[value] || value};`;
+      if (value === "subgrid") {
+        return "grid-template-columns: subgrid;";
       }
-      if (property === "place-content") {
-        const placeContentMap = {
-          "start": "start",
-          "end": "end",
-          "center": "center",
-          "between": "space-between",
-          "around": "space-around",
-          "evenly": "space-evenly",
-          "stretch": "stretch"
-        };
-        return `place-content: ${placeContentMap[value] || value};`;
+      if (isArbitrary) {
+        const sanitized = sanitizeArbitraryValue(value);
+        return `grid-template-columns: ${sanitized.replace(/_/g, " ")};`;
       }
-      if (property === "place-items") {
-        return `place-items: ${value};`;
+      return `grid-template-columns: repeat(${value}, minmax(0, 1fr));`;
+    }
+    if (property === "grid-rows") {
+      if (value === "none") {
+        return "grid-template-rows: none;";
       }
-      if (property === "place-self") {
-        return `place-self: ${value};`;
+      if (value === "subgrid") {
+        return "grid-template-rows: subgrid;";
       }
-      if (property === "z") {
-        return `z-index: var(--z-${value});`;
+      if (isArbitrary) {
+        const sanitized = sanitizeArbitraryValue(value);
+        return `grid-template-rows: ${sanitized.replace(/_/g, " ")};`;
       }
-      if (property === "overflow") {
-        return `overflow: ${value};`;
+      return `grid-template-rows: repeat(${value}, minmax(0, 1fr));`;
+    }
+    if (property === "col-span") {
+      if (value === "full") {
+        return "grid-column: 1 / -1;";
       }
-      if (property === "overflow-x") {
-        return `overflow-x: ${value};`;
+      return `grid-column: span ${value} / span ${value};`;
+    }
+    if (property === "col-start") {
+      return `grid-column-start: ${value};`;
+    }
+    if (property === "col-end") {
+      return `grid-column-end: ${value};`;
+    }
+    if (property === "row-span") {
+      if (value === "full") {
+        return "grid-row: 1 / -1;";
       }
-      if (property === "overflow-y") {
-        return `overflow-y: ${value};`;
+      return `grid-row: span ${value} / span ${value};`;
+    }
+    if (property === "row-start") {
+      return `grid-row-start: ${value};`;
+    }
+    if (property === "row-end") {
+      return `grid-row-end: ${value};`;
+    }
+    if (property === "auto-cols") {
+      const autoPresets = {
+        "auto": "auto",
+        "min": "min-content",
+        "max": "max-content",
+        "fr": "minmax(0, 1fr)"
+      };
+      const cssValue = isArbitrary ? value : autoPresets[value] || value;
+      return `grid-auto-columns: ${cssValue};`;
+    }
+    if (property === "auto-rows") {
+      const autoPresets = {
+        "auto": "auto",
+        "min": "min-content",
+        "max": "max-content",
+        "fr": "minmax(0, 1fr)"
+      };
+      const cssValue = isArbitrary ? value : autoPresets[value] || value;
+      return `grid-auto-rows: ${cssValue};`;
+    }
+    if (property === "border-spacing") {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-spacing: ${cssValue};`;
+    }
+    if (property === "border-spacing-x") {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-spacing: ${cssValue} 0;`;
+    }
+    if (property === "border-spacing-y") {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-spacing: 0 ${cssValue};`;
+    }
+    return layoutMap[property] || "";
+  }
+  function generateSpaceRule(token, config) {
+    const { property, value, isArbitrary } = token;
+    const sizingSpecialValues = {
+      "min": "min-content",
+      "max": "max-content",
+      "fit": "fit-content"
+    };
+    const sizingProps = ["w", "h", "min-w", "max-w", "min-h", "max-h"];
+    if (sizingProps.includes(property) && sizingSpecialValues[value]) {
+      const cssVal = sizingSpecialValues[value];
+      const propMap = {
+        "w": `width: ${cssVal};`,
+        "h": `height: ${cssVal};`,
+        "min-w": `min-width: ${cssVal};`,
+        "max-w": `max-width: ${cssVal};`,
+        "min-h": `min-height: ${cssVal};`,
+        "max-h": `max-height: ${cssVal};`
+      };
+      return propMap[property] || "";
+    }
+    const percentageAdjectives = {
+      "full": "100%",
+      "half": "50%",
+      "third": "33.333333%",
+      "third-2x": "66.666667%",
+      "quarter": "25%",
+      "quarter-2x": "50%",
+      "quarter-3x": "75%",
+      // Keep fractional values for backwards compatibility
+      "1/1": "100%",
+      "1/2": "50%",
+      "1/3": "33.333333%",
+      "2/3": "66.666667%",
+      "1/4": "25%",
+      "2/4": "50%",
+      "3/4": "75%"
+    };
+    if (sizingProps.includes(property) && percentageAdjectives[value]) {
+      const cssVal = percentageAdjectives[value];
+      const propMap = {
+        "w": `width: ${cssVal};`,
+        "h": `height: ${cssVal};`,
+        "min-w": `min-width: ${cssVal};`,
+        "max-w": `max-width: ${cssVal};`,
+        "min-h": `min-height: ${cssVal};`,
+        "max-h": `max-height: ${cssVal};`
+      };
+      return propMap[property] || "";
+    }
+    let cssValue;
+    if (isArbitrary) {
+      cssValue = value;
+    } else {
+      const isNegative = value.startsWith("-");
+      const cleanValue = isNegative ? value.substring(1) : value;
+      let baseValue;
+      if (cleanValue.startsWith("tw-")) {
+        const twValue = cleanValue.slice(3);
+        baseValue = `var(--tw-${twValue.replace(/\./g, "\\\\.")})`;
+      } else {
+        baseValue = `var(--s-${cleanValue})`;
       }
-      if (property === "aspect") {
-        const aspectMap = {
-          "square": "1 / 1",
-          "video": "16 / 9",
-          "auto": "auto"
+      cssValue = isNegative ? `calc(${baseValue} * -1)` : baseValue;
+    }
+    if (value === "auto") {
+      const autoValue = "auto";
+      const propertyMap2 = {
+        "m": `margin: ${autoValue};`,
+        "m-x": `margin-left: ${autoValue}; margin-right: ${autoValue};`,
+        "m-y": `margin-top: ${autoValue}; margin-bottom: ${autoValue};`,
+        "m-t": `margin-top: ${autoValue};`,
+        "m-r": `margin-right: ${autoValue};`,
+        "m-b": `margin-bottom: ${autoValue};`,
+        "m-l": `margin-left: ${autoValue};`
+      };
+      return propertyMap2[property] || "";
+    }
+    const propertyMap = {
+      // Padding
+      "p": `padding: ${cssValue};`,
+      "p-t": `padding-top: ${cssValue};`,
+      "p-r": `padding-right: ${cssValue};`,
+      "p-b": `padding-bottom: ${cssValue};`,
+      "p-l": `padding-left: ${cssValue};`,
+      "p-x": `padding-left: ${cssValue}; padding-right: ${cssValue};`,
+      "p-y": `padding-top: ${cssValue}; padding-bottom: ${cssValue};`,
+      // Margin
+      "m": `margin: ${cssValue};`,
+      "m-t": `margin-top: ${cssValue};`,
+      "m-r": `margin-right: ${cssValue};`,
+      "m-b": `margin-bottom: ${cssValue};`,
+      "m-l": `margin-left: ${cssValue};`,
+      "m-x": `margin-left: ${cssValue}; margin-right: ${cssValue};`,
+      "m-y": `margin-top: ${cssValue}; margin-bottom: ${cssValue};`,
+      // Gap
+      "g": `gap: ${cssValue};`,
+      "g-x": `column-gap: ${cssValue};`,
+      "g-y": `row-gap: ${cssValue};`,
+      // Sizing
+      "w": `width: ${cssValue};`,
+      "h": `height: ${cssValue};`,
+      "min-w": `min-width: ${cssValue};`,
+      "max-w": `max-width: ${cssValue};`,
+      "min-h": `min-height: ${cssValue};`,
+      "max-h": `max-height: ${cssValue};`
+    };
+    return propertyMap[property] || "";
+  }
+  function generateVisualRule(token, config) {
+    const { property, value, isArbitrary } = token;
+    if (typographyKeywords2[property]) {
+      return typographyKeywords2[property];
+    }
+    const rules = {
+      // Background Color
+      "bg": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `background-color: ${cssValue};`;
+      },
+      // Background Image
+      "bg-image": () => {
+        if (value === "none") return "background-image: none;";
+        if (value.startsWith("gradient-to-")) {
+          const directionMap = {
+            "t": "to top",
+            "tr": "to top right",
+            "r": "to right",
+            "br": "to bottom right",
+            "b": "to bottom",
+            "bl": "to bottom left",
+            "l": "to left",
+            "tl": "to top left"
+          };
+          const directionCode = value.replace("gradient-to-", "");
+          const direction = directionMap[directionCode];
+          if (direction) {
+            return `background-image: linear-gradient(${direction}, var(--ss-gradient-stops, transparent));`;
+          }
+        }
+        const cssValue = isArbitrary ? sanitizeArbitraryValue(`url(${value})`) : `url(${value})`;
+        return `background-image: ${cssValue};`;
+      },
+      // Background Attachment
+      "bg-attachment": () => {
+        return `background-attachment: ${value};`;
+      },
+      // Background Clip
+      "bg-clip": () => {
+        const clipMap = {
+          "border": "border-box",
+          "padding": "padding-box",
+          "content": "content-box",
+          "text": "text"
         };
-        const cssValue = isArbitrary ? value.replace(/_/g, " ") : aspectMap[value] || value;
-        return `aspect-ratio: ${cssValue};`;
-      }
-      if (property === "object") {
-        return `object-fit: ${value};`;
-      }
-      if (property === "object-pos") {
-        const cssValue = isArbitrary ? value.replace(/_/g, " ") : value;
-        return `object-position: ${cssValue};`;
-      }
-      if (property === "inset") {
-        const cssValue = isArbitrary ? value : value === "0" ? "0" : `var(--s-${value})`;
-        return `inset: ${cssValue};`;
-      }
-      if (["top", "right", "bottom", "left"].includes(property)) {
-        const cssValue = isArbitrary ? value : value === "0" ? "0" : `var(--s-${value})`;
-        return `${property}: ${cssValue};`;
-      }
-      if (property === "inset-x") {
-        const cssValue = isArbitrary ? value : value === "0" ? "0" : `var(--s-${value})`;
-        return `left: ${cssValue}; right: ${cssValue};`;
-      }
-      if (property === "inset-y") {
-        const cssValue = isArbitrary ? value : value === "0" ? "0" : `var(--s-${value})`;
-        return `top: ${cssValue}; bottom: ${cssValue};`;
-      }
-      if (property === "cols") {
-        return `columns: ${value};`;
-      }
-      if (property === "overscroll") {
-        return `overscroll-behavior: ${value};`;
-      }
-      if (property === "overscroll-x") {
-        return `overscroll-behavior-x: ${value};`;
-      }
-      if (property === "overscroll-y") {
-        return `overscroll-behavior-y: ${value};`;
-      }
-      if (property === "basis") {
-        const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `flex-basis: ${cssValue};`;
-      }
-      if (property === "flex") {
-        const flexPresets = {
-          "1": "1 1 0%",
-          "auto": "1 1 auto",
-          "initial": "0 1 auto",
-          "none": "none"
+        const cssValue = clipMap[value] || value;
+        return `background-clip: ${cssValue};`;
+      },
+      // Background Origin
+      "bg-origin": () => {
+        const originMap = {
+          "border": "border-box",
+          "padding": "padding-box",
+          "content": "content-box"
+        };
+        const cssValue = originMap[value] || value;
+        return `background-origin: ${cssValue};`;
+      },
+      // Background Position
+      "bg-position": () => {
+        const positionMap = {
+          "center": "center",
+          "top": "top",
+          "bottom": "bottom",
+          "left": "left",
+          "right": "right",
+          "top-left": "top left",
+          "top-right": "top right",
+          "bottom-left": "bottom left",
+          "bottom-right": "bottom right"
         };
-        const cssValue = isArbitrary ? value.replace(/_/g, " ") : flexPresets[value] || value;
-        return `flex: ${cssValue};`;
-      }
-      if (property === "order") {
-        const orderPresets = {
-          "first": "-9999",
-          "last": "9999",
-          "none": "0"
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : positionMap[value] || value;
+        return `background-position: ${cssValue};`;
+      },
+      // Background Repeat
+      "bg-repeat": () => {
+        const repeatMap = {
+          "repeat": "repeat",
+          "no-repeat": "no-repeat",
+          "repeat-x": "repeat-x",
+          "repeat-y": "repeat-y",
+          "round": "round",
+          "space": "space"
         };
-        const cssValue = orderPresets[value] || value;
-        return `order: ${cssValue};`;
-      }
-      if (property === "grid-cols") {
-        if (value === "none") {
-          return "grid-template-columns: none;";
-        }
-        if (value === "subgrid") {
-          return "grid-template-columns: subgrid;";
+        const cssValue = repeatMap[value] || value;
+        return `background-repeat: ${cssValue};`;
+      },
+      // Background Size
+      "bg-size": () => {
+        const sizeMap = {
+          "auto": "auto",
+          "cover": "cover",
+          "contain": "contain"
+        };
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : sizeMap[value] || value;
+        return `background-size: ${cssValue};`;
+      },
+      // Background Blend Mode
+      "bg-blend": () => {
+        return `background-blend-mode: ${value};`;
+      },
+      // Gradient Color Stops
+      "from": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `--ss-gradient-from: ${cssValue}; --ss-gradient-to: rgb(255 255 255 / 0); --ss-gradient-stops: var(--ss-gradient-from), var(--ss-gradient-to);`;
+      },
+      "via": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `--ss-gradient-to: rgb(255 255 255 / 0); --ss-gradient-stops: var(--ss-gradient-from), ${cssValue}, var(--ss-gradient-to);`;
+      },
+      "to": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `--ss-gradient-to: ${cssValue};`;
+      },
+      // Text color
+      "text": () => {
+        if (["left", "center", "right", "justify"].includes(value)) {
+          return `text-align: ${value};`;
         }
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `color: ${cssValue};`;
+      },
+      // Text Shadow
+      "text-shadow": () => {
+        const shadowPresets = {
+          "none": "none",
+          "small": "0 1px 2px rgba(0,0,0,0.1)",
+          "medium": "0 2px 4px rgba(0,0,0,0.15)",
+          "big": "0 4px 8px rgba(0,0,0,0.2)"
+        };
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : shadowPresets[value] || value;
+        return `text-shadow: ${cssValue};`;
+      },
+      // Font size (with paired line-height)
+      "text-size": () => {
+        let cssValue;
+        let lineHeightValue;
         if (isArbitrary) {
-          return `grid-template-columns: ${value.replace(/_/g, " ")};`;
-        }
-        return `grid-template-columns: repeat(${value}, minmax(0, 1fr));`;
-      }
-      if (property === "grid-rows") {
-        if (value === "none") {
-          return "grid-template-rows: none;";
+          cssValue = value;
+          return `font-size: ${cssValue};`;
+        } else if (value.startsWith("tw-")) {
+          const twValue = value.slice(3);
+          cssValue = `var(--tw-text-${twValue})`;
+          lineHeightValue = `var(--tw-leading-${twValue})`;
+        } else {
+          cssValue = `var(--font-${value})`;
+          lineHeightValue = `var(--font-lh-${value})`;
         }
-        if (value === "subgrid") {
-          return "grid-template-rows: subgrid;";
+        return `font-size: ${cssValue}; line-height: ${lineHeightValue};`;
+      },
+      // Font weight / family
+      "font": () => {
+        const fontFamilies = {
+          "sans": "ui-sans-serif, system-ui, sans-serif",
+          "serif": "ui-serif, Georgia, serif",
+          "mono": "ui-monospace, monospace"
+        };
+        if (fontFamilies[value]) {
+          return `font-family: ${fontFamilies[value]};`;
         }
+        let cssValue;
         if (isArbitrary) {
-          return `grid-template-rows: ${value.replace(/_/g, " ")};`;
-        }
-        return `grid-template-rows: repeat(${value}, minmax(0, 1fr));`;
-      }
-      if (property === "col-span") {
-        if (value === "full") {
-          return "grid-column: 1 / -1;";
-        }
-        return `grid-column: span ${value} / span ${value};`;
-      }
-      if (property === "col-start") {
-        return `grid-column-start: ${value};`;
-      }
-      if (property === "col-end") {
-        return `grid-column-end: ${value};`;
-      }
-      if (property === "row-span") {
-        if (value === "full") {
-          return "grid-row: 1 / -1;";
+          cssValue = value;
+        } else if (value.startsWith("tw-")) {
+          const twValue = value.slice(3);
+          cssValue = `var(--tw-font-${twValue})`;
+        } else {
+          cssValue = `var(--fw-${value})`;
         }
-        return `grid-row: span ${value} / span ${value};`;
-      }
-      if (property === "row-start") {
-        return `grid-row-start: ${value};`;
-      }
-      if (property === "row-end") {
-        return `grid-row-end: ${value};`;
-      }
-      if (property === "auto-cols") {
-        const autoPresets = {
-          "auto": "auto",
-          "min": "min-content",
-          "max": "max-content",
-          "fr": "minmax(0, 1fr)"
+        return `font-weight: ${cssValue};`;
+      },
+      // Letter spacing
+      "tracking": () => {
+        const trackingScale = {
+          "tighter": "-0.05em",
+          "tight": "-0.025em",
+          "normal": "0",
+          "wide": "0.025em",
+          "wider": "0.05em",
+          "widest": "0.1em"
         };
-        const cssValue = isArbitrary ? value : autoPresets[value] || value;
-        return `grid-auto-columns: ${cssValue};`;
-      }
-      if (property === "auto-rows") {
-        const autoPresets = {
-          "auto": "auto",
-          "min": "min-content",
-          "max": "max-content",
-          "fr": "minmax(0, 1fr)"
+        const cssValue = isArbitrary ? value : trackingScale[value] || value;
+        return `letter-spacing: ${cssValue};`;
+      },
+      // Line height
+      "leading": () => {
+        const leadingScale = {
+          "none": "1",
+          "tight": "1.25",
+          "snug": "1.375",
+          "normal": "1.5",
+          "relaxed": "1.625",
+          "loose": "2"
         };
-        const cssValue = isArbitrary ? value : autoPresets[value] || value;
-        return `grid-auto-rows: ${cssValue};`;
-      }
-      if (property === "table") {
-        const tableMap = { "auto": "auto", "fixed": "fixed" };
-        return `table-layout: ${tableMap[value] || value};`;
-      }
-      if (property === "caption") {
-        return `caption-side: ${value};`;
-      }
-      if (property === "border-spacing") {
+        const cssValue = isArbitrary ? value : leadingScale[value] || value;
+        return `line-height: ${cssValue};`;
+      },
+      // Line clamp
+      "line-clamp": () => {
+        return `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${value};`;
+      },
+      // Text decoration color
+      "decoration": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `text-decoration-color: ${cssValue};`;
+      },
+      // Text decoration thickness
+      "decoration-thickness": () => {
+        const cssValue = isArbitrary ? value : `${value}px`;
+        return `text-decoration-thickness: ${cssValue};`;
+      },
+      // Underline offset
+      "underline-offset": () => {
+        const cssValue = isArbitrary ? value : `${value}px`;
+        return `text-underline-offset: ${cssValue};`;
+      },
+      // Text indent
+      "indent": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-spacing: ${cssValue};`;
-      }
-      if (property === "border-spacing-x") {
+        return `text-indent: ${cssValue};`;
+      },
+      // Border color
+      "border": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-color: ${cssValue}; border-style: solid;`;
+      },
+      // Border color - directional
+      "border-t": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-top-color: ${cssValue}; border-top-style: solid;`;
+      },
+      "border-b": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-bottom-color: ${cssValue}; border-bottom-style: solid;`;
+      },
+      "border-l": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-left-color: ${cssValue}; border-left-style: solid;`;
+      },
+      "border-r": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-right-color: ${cssValue}; border-right-style: solid;`;
+      },
+      "border-x": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-left-color: ${cssValue}; border-right-color: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+      },
+      "border-y": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-top-color: ${cssValue}; border-bottom-color: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+      },
+      // Border width
+      "border-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-spacing: ${cssValue} 0;`;
-      }
-      if (property === "border-spacing-y") {
+        return `border-width: ${cssValue}; border-style: solid;`;
+      },
+      // Border width - directional  
+      "border-t-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-top-width: ${cssValue}; border-top-style: solid;`;
+      },
+      "border-b-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-bottom-width: ${cssValue}; border-bottom-style: solid;`;
+      },
+      "border-l-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-left-width: ${cssValue}; border-left-style: solid;`;
+      },
+      "border-r-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-right-width: ${cssValue}; border-right-style: solid;`;
+      },
+      "border-x-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-left-width: ${cssValue}; border-right-width: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+      },
+      "border-y-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-top-width: ${cssValue}; border-bottom-width: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+      },
+      // Border style
+      "border-style": () => {
+        return `border-style: ${value};`;
+      },
+      // Border radius
+      "rounded": () => {
+        return `border-radius: var(--r-${value});`;
+      },
+      // =====================
+      // DIVIDE UTILITIES
+      // =====================
+      // Divide color - all sides
+      "divide": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-color: ${cssValue}; border-style: solid;`;
+      },
+      // Divide color - directional
+      "divide-x": () => {
+        if (value === "reverse") {
+          return "--ss-divide-x-reverse: 1;";
+        }
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-left-color: ${cssValue}; border-right-color: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+      },
+      "divide-y": () => {
+        if (value === "reverse") {
+          return "--ss-divide-y-reverse: 1;";
+        }
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `border-top-color: ${cssValue}; border-bottom-color: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+      },
+      // Divide width - all sides
+      "divide-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-width: ${cssValue}; border-style: solid;`;
+      },
+      // Divide width - directional
+      "divide-x-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-left-width: ${cssValue}; border-right-width: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+      },
+      "divide-y-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `border-top-width: ${cssValue}; border-bottom-width: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+      },
+      // Divide style
+      "divide-style": () => {
+        return `border-style: ${value};`;
+      },
+      // Outline Width
+      "outline-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `outline-width: ${cssValue};`;
+      },
+      // Outline Color
+      "outline": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `outline-color: ${cssValue};`;
+      },
+      // Outline Style
+      "outline-style": () => {
+        return `outline-style: ${value};`;
+      },
+      // Outline Offset
+      "outline-offset": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `outline-offset: ${cssValue};`;
+      },
+      // Ring Width
+      "ring-w": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `--ss-ring-width: ${cssValue};`;
+      },
+      // Ring Color
+      "ring-color": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `--ss-ring-color: ${cssValue};`;
+      },
+      // Ring Offset Width
+      "ring-offset": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `--ss-ring-offset-width: ${cssValue};`;
+      },
+      // Ring Offset Color
+      "ring-offset-color": () => {
+        const cssValue = resolveColorValue(value, isArbitrary);
+        return `--ss-ring-offset-color: ${cssValue};`;
+      },
+      // Ring (Main utility)
+      "ring": () => {
+        if (value === "none") {
+          return "box-shadow: 0 0 #0000;";
+        }
+        const ringPresets = {
+          "thin": "1px",
+          "regular": "2px",
+          "small": "4px",
+          "medium": "6px",
+          "big": "8px"
+        };
+        const width2 = isArbitrary ? value : ringPresets[value] || (parseInt(value) ? `${value}px` : `var(--s-${value})`);
+        return `--ss-ring-width: ${width2}; box-shadow: var(--ss-ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--ss-ring-color, currentColor);`;
+      },
+      // Box shadow
+      "shadow": () => {
+        return `box-shadow: var(--shadow-${value});`;
+      },
+      // Opacity
+      "opacity": () => {
+        const numValue = parseInt(value, 10);
+        if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) {
+          return `opacity: ${numValue / 100};`;
+        }
+        return `opacity: ${value};`;
+      },
+      // Mix Blend Mode
+      "mix-blend": () => {
+        return `mix-blend-mode: ${value};`;
+      },
+      // Mask Clip
+      "mask-clip": () => {
+        const clipMap = {
+          "border": "border-box",
+          "padding": "padding-box",
+          "content": "content-box",
+          "text": "text"
+        };
+        const cssValue = clipMap[value] || value;
+        return `mask-clip: ${cssValue};`;
+      },
+      // Mask Composite
+      "mask-composite": () => {
+        return `mask-composite: ${value};`;
+      },
+      // Mask Image
+      "mask-image": () => {
+        const sanitizedUrl = sanitizeArbitraryValue(value);
+        const cssValue = isArbitrary ? `url(${sanitizedUrl})` : `url(${value})`;
+        return `mask-image: ${cssValue};`;
+      },
+      // Mask Mode
+      "mask-mode": () => {
+        return `mask-mode: ${value};`;
+      },
+      // Mask Origin
+      "mask-origin": () => {
+        const originMap = {
+          "border": "border-box",
+          "padding": "padding-box",
+          "content": "content-box"
+        };
+        const cssValue = originMap[value] || value;
+        return `mask-origin: ${cssValue};`;
+      },
+      // Mask Position
+      "mask-position": () => {
+        const positionMap = {
+          "center": "center",
+          "top": "top",
+          "bottom": "bottom",
+          "left": "left",
+          "right": "right",
+          "top-left": "top left",
+          "top-right": "top right",
+          "bottom-left": "bottom left",
+          "bottom-right": "bottom right"
+        };
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : positionMap[value] || value;
+        return `mask-position: ${cssValue};`;
+      },
+      // Mask Repeat
+      "mask-repeat": () => {
+        const repeatMap = {
+          "repeat": "repeat",
+          "no-repeat": "no-repeat",
+          "repeat-x": "repeat-x",
+          "repeat-y": "repeat-y",
+          "round": "round",
+          "space": "space"
+        };
+        const cssValue = repeatMap[value] || value;
+        return `mask-repeat: ${cssValue};`;
+      },
+      // Mask Size
+      "mask-size": () => {
+        const sizeMap = {
+          "auto": "auto",
+          "cover": "cover",
+          "contain": "contain"
+        };
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : sizeMap[value] || value;
+        return `mask-size: ${cssValue};`;
+      },
+      // Mask Type
+      "mask-type": () => {
+        return `mask-type: ${value};`;
+      },
+      // Content
+      "content": () => {
+        const sanitizedValue = sanitizeArbitraryValue(value).replace(/"/g, '\\"');
+        return `content: "${sanitizedValue}";`;
+      },
+      // Filter utilities
+      "blur": () => {
+        const blurScale = {
+          "none": "0",
+          "tiny": "2px",
+          "small": "4px",
+          "medium": "8px",
+          "big": "12px",
+          "giant": "24px",
+          "vast": "48px"
+        };
+        const cssValue = isArbitrary ? value : blurScale[value] || blurScale["medium"];
+        return `filter: blur(${cssValue});`;
+      },
+      "brightness": () => {
+        const brightnessScale = {
+          "dim": 0.5,
+          "dark": 0.75,
+          "normal": 1,
+          "bright": 1.25,
+          "vivid": 1.5
+        };
+        const cssValue = isArbitrary ? value : brightnessScale[value] || brightnessScale["normal"];
+        return `filter: brightness(${cssValue});`;
+      },
+      "contrast": () => {
+        const contrastScale = {
+          "low": 0.5,
+          "reduced": 0.75,
+          "normal": 1,
+          "high": 1.25,
+          "max": 1.5
+        };
+        const cssValue = isArbitrary ? value : contrastScale[value] || contrastScale["normal"];
+        return `filter: contrast(${cssValue});`;
+      },
+      "drop-shadow": () => {
+        const shadowPresets = {
+          "none": "none",
+          "tiny": "0 1px 1px rgba(0,0,0,0.05)",
+          "small": "0 1px 2px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.06)",
+          "medium": "0 4px 3px rgba(0,0,0,0.07), 0 2px 2px rgba(0,0,0,0.06)",
+          "big": "0 10px 8px rgba(0,0,0,0.04), 0 4px 3px rgba(0,0,0,0.1)",
+          "giant": "0 20px 13px rgba(0,0,0,0.03), 0 8px 5px rgba(0,0,0,0.08)"
+        };
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : shadowPresets[value] || shadowPresets["medium"];
+        return `filter: drop-shadow(${cssValue});`;
+      },
+      "grayscale": () => {
+        const grayscaleScale = {
+          "none": "0%",
+          "partial": "50%",
+          "full": "100%"
+        };
+        const cssValue = isArbitrary ? value : grayscaleScale[value] || grayscaleScale["full"];
+        return `filter: grayscale(${cssValue});`;
+      },
+      "hue-rotate": () => {
+        const cssValue = isArbitrary ? value : `${value}deg`;
+        return `filter: hue-rotate(${cssValue});`;
+      },
+      "invert": () => {
+        const invertScale = {
+          "none": "0%",
+          "partial": "50%",
+          "full": "100%"
+        };
+        const cssValue = isArbitrary ? value : invertScale[value] || invertScale["full"];
+        return `filter: invert(${cssValue});`;
+      },
+      "saturate": () => {
+        const saturateScale = {
+          "none": 0,
+          "low": 0.5,
+          "normal": 1,
+          "high": 1.5,
+          "vivid": 2
+        };
+        const cssValue = isArbitrary ? value : saturateScale[value] || saturateScale["normal"];
+        return `filter: saturate(${cssValue});`;
+      },
+      "sepia": () => {
+        const sepiaScale = {
+          "none": "0%",
+          "partial": "50%",
+          "full": "100%"
+        };
+        const cssValue = isArbitrary ? value : sepiaScale[value] || sepiaScale["full"];
+        return `filter: sepia(${cssValue});`;
+      },
+      // Backdrop Filter utilities
+      "backdrop-blur": () => {
+        const blurScale = {
+          "none": "0",
+          "tiny": "2px",
+          "small": "4px",
+          "medium": "8px",
+          "big": "12px",
+          "giant": "24px",
+          "vast": "48px"
+        };
+        const cssValue = isArbitrary ? value : blurScale[value] || blurScale["medium"];
+        return `backdrop-filter: blur(${cssValue});`;
+      },
+      "backdrop-brightness": () => {
+        const brightnessScale = {
+          "dim": 0.5,
+          "dark": 0.75,
+          "normal": 1,
+          "bright": 1.25,
+          "vivid": 1.5
+        };
+        const cssValue = isArbitrary ? value : brightnessScale[value] || brightnessScale["normal"];
+        return `backdrop-filter: brightness(${cssValue});`;
+      },
+      "backdrop-contrast": () => {
+        const contrastScale = {
+          "low": 0.5,
+          "reduced": 0.75,
+          "normal": 1,
+          "high": 1.25,
+          "max": 1.5
+        };
+        const cssValue = isArbitrary ? value : contrastScale[value] || contrastScale["normal"];
+        return `backdrop-filter: contrast(${cssValue});`;
+      },
+      "backdrop-grayscale": () => {
+        const grayscaleScale = {
+          "none": "0%",
+          "partial": "50%",
+          "full": "100%"
+        };
+        const cssValue = isArbitrary ? value : grayscaleScale[value] || grayscaleScale["full"];
+        return `backdrop-filter: grayscale(${cssValue});`;
+      },
+      "backdrop-hue-rotate": () => {
+        const cssValue = isArbitrary ? value : `${value}deg`;
+        return `backdrop-filter: hue-rotate(${cssValue});`;
+      },
+      "backdrop-invert": () => {
+        const invertScale = {
+          "none": "0%",
+          "partial": "50%",
+          "full": "100%"
+        };
+        const cssValue = isArbitrary ? value : invertScale[value] || invertScale["full"];
+        return `backdrop-filter: invert(${cssValue});`;
+      },
+      "backdrop-opacity": () => {
+        const opacityScale = {
+          "invisible": 0,
+          "faint": 0.25,
+          "half": 0.5,
+          "visible": 0.75,
+          "solid": 1
+        };
+        const cssValue = isArbitrary ? value : opacityScale[value] || opacityScale["solid"];
+        return `backdrop-filter: opacity(${cssValue});`;
+      },
+      "backdrop-saturate": () => {
+        const saturateScale = {
+          "none": 0,
+          "low": 0.5,
+          "normal": 1,
+          "high": 1.5,
+          "vivid": 2
+        };
+        const cssValue = isArbitrary ? value : saturateScale[value] || saturateScale["normal"];
+        return `backdrop-filter: saturate(${cssValue});`;
+      },
+      "backdrop-sepia": () => {
+        const sepiaScale = {
+          "none": "0%",
+          "partial": "50%",
+          "full": "100%"
+        };
+        const cssValue = isArbitrary ? value : sepiaScale[value] || sepiaScale["full"];
+        return `backdrop-filter: sepia(${cssValue});`;
+      },
+      // =====================
+      // TRANSITION UTILITIES
+      // =====================
+      // Transition Property
+      "transition": () => {
+        const transitionPresets = {
+          "none": "none",
+          "all": "all",
+          "DEFAULT": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+          "colors": "color, background-color, border-color, text-decoration-color, fill, stroke",
+          "opacity": "opacity",
+          "shadow": "box-shadow",
+          "transform": "transform"
+        };
+        const prop = transitionPresets[value] || transitionPresets["DEFAULT"];
+        return `transition-property: ${prop}; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;`;
+      },
+      "transition-none": () => {
+        return "transition-property: none;";
+      },
+      // Transition Duration
+      "duration": () => {
+        const durationScale = {
+          "instant": "75ms",
+          "quick": "100ms",
+          "fast": "150ms",
+          "normal": "200ms",
+          "slow": "300ms",
+          "slower": "500ms",
+          "lazy": "700ms"
+        };
+        const cssValue = isArbitrary ? value : durationScale[value] || durationScale["normal"];
+        return `transition-duration: ${cssValue};`;
+      },
+      // Transition Timing Function
+      "ease": () => {
+        const easingMap = {
+          "linear": "linear",
+          "in": "cubic-bezier(0.4, 0, 1, 1)",
+          "out": "cubic-bezier(0, 0, 0.2, 1)",
+          "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+        };
+        const cssValue = isArbitrary ? value : easingMap[value] || easingMap["in-out"];
+        return `transition-timing-function: ${cssValue};`;
+      },
+      // Transition Delay
+      "delay": () => {
+        const delayScale = {
+          "instant": "75ms",
+          "quick": "100ms",
+          "fast": "150ms",
+          "normal": "200ms",
+          "slow": "300ms",
+          "slower": "500ms",
+          "lazy": "700ms"
+        };
+        const cssValue = isArbitrary ? value : delayScale[value] || delayScale["normal"];
+        return `transition-delay: ${cssValue};`;
+      },
+      // Transition Behavior
+      "transition-behavior": () => {
+        return `transition-behavior: ${value};`;
+      },
+      // =====================
+      // ANIMATION UTILITIES
+      // =====================
+      "animate": () => {
+        const animationPresets = {
+          "none": "none",
+          "spin": "spin 1s linear infinite",
+          "ping": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+          "pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          "bounce": "bounce 1s infinite"
+        };
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : animationPresets[value] || value;
+        return `animation: ${cssValue};`;
+      },
+      // Animation Duration
+      "animation-duration": () => {
+        const durationScale = {
+          "instant": "75ms",
+          "quick": "100ms",
+          "fast": "150ms",
+          "normal": "200ms",
+          "slow": "300ms",
+          "slower": "500ms",
+          "lazy": "700ms"
+        };
+        const cssValue = isArbitrary ? value : durationScale[value] || durationScale["normal"];
+        return `animation-duration: ${cssValue};`;
+      },
+      // Animation Delay
+      "animation-delay": () => {
+        const delayScale = {
+          "instant": "75ms",
+          "quick": "100ms",
+          "fast": "150ms",
+          "normal": "200ms",
+          "slow": "300ms",
+          "slower": "500ms",
+          "lazy": "700ms"
+        };
+        const cssValue = isArbitrary ? value : delayScale[value] || delayScale["normal"];
+        return `animation-delay: ${cssValue};`;
+      },
+      // Animation Iteration Count
+      "animation-iteration": () => {
+        return `animation-iteration-count: ${value};`;
+      },
+      // Animation Direction
+      "animation-direction": () => {
+        return `animation-direction: ${value};`;
+      },
+      // Animation Fill Mode
+      "animation-fill": () => {
+        return `animation-fill-mode: ${value};`;
+      },
+      // Animation Play State
+      "animation-play": () => {
+        return `animation-play-state: ${value};`;
+      },
+      // =====================
+      // TRANSFORM UTILITIES
+      // =====================
+      // Scale
+      "scale": () => {
+        const cssValue = isArbitrary ? value : parseInt(value) / 100;
+        return `transform: scale(${cssValue});`;
+      },
+      "scale-x": () => {
+        const cssValue = isArbitrary ? value : parseInt(value) / 100;
+        return `transform: scaleX(${cssValue});`;
+      },
+      "scale-y": () => {
+        const cssValue = isArbitrary ? value : parseInt(value) / 100;
+        return `transform: scaleY(${cssValue});`;
+      },
+      // Rotate
+      "rotate": () => {
+        const cssValue = isArbitrary ? value : `${value}deg`;
+        return `transform: rotate(${cssValue});`;
+      },
+      // Translate
+      "translate-x": () => {
+        const translatePresets = {
+          "full": "100%",
+          "half": "50%",
+          "third": "33.333333%",
+          "third-2x": "66.666667%",
+          "quarter": "25%",
+          "quarter-2x": "50%",
+          "quarter-3x": "75%",
+          // Legacy fraction format (for backward compatibility)
+          "1/2": "50%",
+          "1/3": "33.333333%",
+          "2/3": "66.666667%",
+          "1/4": "25%",
+          "3/4": "75%",
+          // Negatives (prefixed with -)
+          "-full": "-100%",
+          "-half": "-50%",
+          "-third": "-33.333333%",
+          "-third-2x": "-66.666667%",
+          "-quarter": "-25%",
+          "-quarter-2x": "-50%",
+          "-quarter-3x": "-75%",
+          "-1/2": "-50%",
+          "-1/3": "-33.333333%",
+          "-2/3": "-66.666667%",
+          "-1/4": "-25%",
+          "-3/4": "-75%"
+        };
+        const cssValue = isArbitrary ? value : translatePresets[value] || `var(--s-${value})`;
+        return `transform: translateX(${cssValue});`;
+      },
+      "translate-y": () => {
+        const translatePresets = {
+          "full": "100%",
+          "half": "50%",
+          "third": "33.333333%",
+          "third-2x": "66.666667%",
+          "quarter": "25%",
+          "quarter-2x": "50%",
+          "quarter-3x": "75%",
+          // Legacy fraction format (for backward compatibility)
+          "1/2": "50%",
+          "1/3": "33.333333%",
+          "2/3": "66.666667%",
+          "1/4": "25%",
+          "3/4": "75%",
+          // Negatives (prefixed with -)
+          "-full": "-100%",
+          "-half": "-50%",
+          "-third": "-33.333333%",
+          "-third-2x": "-66.666667%",
+          "-quarter": "-25%",
+          "-quarter-2x": "-50%",
+          "-quarter-3x": "-75%",
+          "-1/2": "-50%",
+          "-1/3": "-33.333333%",
+          "-2/3": "-66.666667%",
+          "-1/4": "-25%",
+          "-3/4": "-75%"
+        };
+        const cssValue = isArbitrary ? value : translatePresets[value] || `var(--s-${value})`;
+        return `transform: translateY(${cssValue});`;
+      },
+      // Skew
+      "skew-x": () => {
+        const cssValue = isArbitrary ? value : `${value}deg`;
+        return `transform: skewX(${cssValue});`;
+      },
+      "skew-y": () => {
+        const cssValue = isArbitrary ? value : `${value}deg`;
+        return `transform: skewY(${cssValue});`;
+      },
+      "-skew-x": () => {
+        const cssValue = isArbitrary ? `-${value}` : `-${value}deg`;
+        return `transform: skewX(${cssValue});`;
+      },
+      "-skew-y": () => {
+        const cssValue = isArbitrary ? `-${value}` : `-${value}deg`;
+        return `transform: skewY(${cssValue});`;
+      },
+      // 3D Rotation (Rotate X/Y/Z)
+      "rotate-x": () => {
+        const cssValue = isArbitrary ? value : `${value}deg`;
+        return `transform: rotateX(${cssValue});`;
+      },
+      "rotate-y": () => {
+        const cssValue = isArbitrary ? value : `${value}deg`;
+        return `transform: rotateY(${cssValue});`;
+      },
+      "rotate-z": () => {
+        const cssValue = isArbitrary ? value : `${value}deg`;
+        return `transform: rotateZ(${cssValue});`;
+      },
+      // 3D Translation (Translate Z)
+      "translate-z": () => {
+        const translatePresets = {
+          "near": "50px",
+          "far": "-50px",
+          "0": "0"
+        };
+        const cssValue = isArbitrary ? value : translatePresets[value] || `var(--s-${value})`;
+        return `transform: translateZ(${cssValue});`;
+      },
+      // Transform Origin
+      "origin": () => {
+        const originMap = {
+          "center": "center",
+          "top": "top",
+          "top-right": "top right",
+          "right": "right",
+          "bottom-right": "bottom right",
+          "bottom": "bottom",
+          "bottom-left": "bottom left",
+          "left": "left",
+          "top-left": "top left"
+        };
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : originMap[value] || value;
+        return `transform-origin: ${cssValue};`;
+      },
+      // Transform Style (for 3D transforms)
+      "transform-style": () => {
+        return `transform-style: ${value};`;
+      },
+      // Backface Visibility
+      "backface": () => {
+        return `backface-visibility: ${value};`;
+      },
+      // Perspective
+      "perspective": () => {
+        const perspectivePresets = {
+          "none": "none",
+          "small": "250px",
+          "medium": "500px",
+          "big": "750px",
+          "giant": "1000px",
+          "vast": "1500px"
+        };
+        const cssValue = isArbitrary ? value : perspectivePresets[value] || perspectivePresets["medium"];
+        return `perspective: ${cssValue};`;
+      },
+      // Perspective Origin
+      "perspective-origin": () => {
+        const originMap = {
+          "center": "center",
+          "top": "top",
+          "top-right": "top right",
+          "right": "right",
+          "bottom-right": "bottom right",
+          "bottom": "bottom",
+          "bottom-left": "bottom left",
+          "left": "left",
+          "top-left": "top left"
+        };
+        const cssValue = isArbitrary ? value.replace(/_/g, " ") : originMap[value] || value;
+        return `perspective-origin: ${cssValue};`;
+      },
+      // =====================
+      // INTERACTIVITY UTILITIES
+      // =====================
+      // Accent Color
+      "accent": () => {
+        const cssValue = isArbitrary ? value : `var(--c-${value})`;
+        return `accent-color: ${cssValue};`;
+      },
+      // Appearance
+      "appearance": () => {
+        return `appearance: ${value};`;
+      },
+      // Caret Color
+      "caret": () => {
+        const cssValue = isArbitrary ? value : `var(--c-${value})`;
+        return `caret-color: ${cssValue};`;
+      },
+      // Color Scheme
+      "color-scheme": () => {
+        return `color-scheme: ${value};`;
+      },
+      // Cursor
+      "cursor": () => {
+        return `cursor: ${value};`;
+      },
+      // Field Sizing
+      "field-sizing": () => {
+        return `field-sizing: ${value};`;
+      },
+      // Pointer Events
+      "pointer-events": () => {
+        return `pointer-events: ${value};`;
+      },
+      // Resize
+      "resize": () => {
+        const resizeMap = {
+          "none": "none",
+          "both": "both",
+          "x": "horizontal",
+          "y": "vertical"
+        };
+        const cssValue = resizeMap[value] || value;
+        return `resize: ${cssValue};`;
+      },
+      // Scroll Behavior
+      "scroll": () => {
+        return `scroll-behavior: ${value};`;
+      },
+      // Scroll Margin
+      "scroll-m": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-margin: ${cssValue};`;
+      },
+      "scroll-m-t": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-margin-top: ${cssValue};`;
+      },
+      "scroll-m-r": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-margin-right: ${cssValue};`;
+      },
+      "scroll-m-b": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-margin-bottom: ${cssValue};`;
+      },
+      "scroll-m-l": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-margin-left: ${cssValue};`;
+      },
+      "scroll-m-x": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-margin-left: ${cssValue}; scroll-margin-right: ${cssValue};`;
+      },
+      "scroll-m-y": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-margin-top: ${cssValue}; scroll-margin-bottom: ${cssValue};`;
+      },
+      // Scroll Padding
+      "scroll-p": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-padding: ${cssValue};`;
+      },
+      "scroll-p-t": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-padding-top: ${cssValue};`;
+      },
+      "scroll-p-r": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-padding-right: ${cssValue};`;
+      },
+      "scroll-p-b": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-padding-bottom: ${cssValue};`;
+      },
+      "scroll-p-l": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-padding-left: ${cssValue};`;
+      },
+      "scroll-p-x": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-spacing: 0 ${cssValue};`;
+        return `scroll-padding-left: ${cssValue}; scroll-padding-right: ${cssValue};`;
+      },
+      "scroll-p-y": () => {
+        const cssValue = isArbitrary ? value : `var(--s-${value})`;
+        return `scroll-padding-top: ${cssValue}; scroll-padding-bottom: ${cssValue};`;
+      },
+      // Scroll Snap Align
+      "snap-align": () => {
+        return `scroll-snap-align: ${value};`;
+      },
+      // Scroll Snap Stop
+      "snap-stop": () => {
+        return `scroll-snap-stop: ${value};`;
+      },
+      // Scroll Snap Type
+      "snap": () => {
+        const snapMap = {
+          "none": "none",
+          "x": "x mandatory",
+          "x-proximity": "x proximity",
+          "y": "y mandatory",
+          "y-proximity": "y proximity",
+          "both": "both mandatory",
+          "both-proximity": "both proximity"
+        };
+        const cssValue = snapMap[value] || value;
+        return `scroll-snap-type: ${cssValue};`;
+      },
+      // Touch Action
+      "touch": () => {
+        const touchMap = {
+          "auto": "auto",
+          "none": "none",
+          "pan-x": "pan-x",
+          "pan-y": "pan-y",
+          "pan-left": "pan-left",
+          "pan-right": "pan-right",
+          "pan-up": "pan-up",
+          "pan-down": "pan-down",
+          "pinch-zoom": "pinch-zoom",
+          "manipulation": "manipulation"
+        };
+        const cssValue = touchMap[value] || value;
+        return `touch-action: ${cssValue};`;
+      },
+      // User Select
+      "select": () => {
+        return `user-select: ${value};`;
+      },
+      // Will Change
+      "will-change": () => {
+        const willChangeMap = {
+          "auto": "auto",
+          "scroll": "scroll-position",
+          "contents": "contents",
+          "transform": "transform",
+          "opacity": "opacity"
+        };
+        const cssValue = willChangeMap[value] || value;
+        return `will-change: ${cssValue};`;
+      },
+      // =====================
+      // SVG UTILITIES
+      // =====================
+      // Fill
+      "fill": () => {
+        if (value === "none") {
+          return "fill: none;";
+        }
+        if (value === "current") {
+          return "fill: currentColor;";
+        }
+        const cssValue = isArbitrary ? value : `var(--c-${value})`;
+        return `fill: ${cssValue};`;
+      },
+      // Stroke
+      "stroke": () => {
+        if (value === "none") {
+          return "stroke: none;";
+        }
+        if (value === "current") {
+          return "stroke: currentColor;";
+        }
+        const cssValue = isArbitrary ? value : `var(--c-${value})`;
+        return `stroke: ${cssValue};`;
+      },
+      // Stroke Width
+      "stroke-w": () => {
+        const cssValue = isArbitrary ? value : `${value}px`;
+        return `stroke-width: ${cssValue};`;
+      },
+      // =====================
+      // ACCESSIBILITY UTILITIES
+      // =====================
+      // Forced Color Adjust
+      "forced-colors": () => {
+        return `forced-color-adjust: ${value};`;
       }
-      return layoutKeywords[property] || "";
+    };
+    const generator = rules[property];
+    return generator ? generator() : "";
+  }
+  function generateRule(token, config, skipDarkWrapper = false, interactIds = /* @__PURE__ */ new Set()) {
+    const { raw, attrType, breakpoint, state } = token;
+    let cssDeclaration = "";
+    switch (attrType) {
+      case "layout":
+        cssDeclaration = generateLayoutRule(token, config);
+        break;
+      case "space":
+        cssDeclaration = generateSpaceRule(token, config);
+        break;
+      case "visual":
+        cssDeclaration = generateVisualRule(token, config);
+        break;
+    }
+    if (!cssDeclaration) return "";
+    const isDivide = raw.startsWith("divide");
+    let selector = "";
+    if (isDivide) {
+      selector = `[${attrType}~="${raw}"] > :not([hidden]) ~ :not([hidden])`;
+    } else {
+      selector = `[${attrType}~="${raw}"]`;
     }
-    function generateSpaceRule(token) {
-      const { property, value, isArbitrary } = token;
-      if (value === "auto") {
-        const autoMap = {
-          "m": "margin: auto;",
-          "m-x": "margin-left: auto; margin-right: auto;",
-          "m-y": "margin-top: auto; margin-bottom: auto;",
-          "m-t": "margin-top: auto;",
-          "m-r": "margin-right: auto;",
-          "m-b": "margin-bottom: auto;",
-          "m-l": "margin-left: auto;"
+    if (state && state !== "dark") {
+      if (isDivide) {
+        selector = `[${attrType}~="${raw}"] > :not([hidden]) ~ :not([hidden]):${state}`;
+      } else {
+        const getStateSelector = (s) => {
+          const map = {
+            "expanded": '[aria-expanded="true"]',
+            "selected": '[aria-selected="true"]',
+            "disabled": ":disabled"
+          };
+          return map[s] || `:${s}`;
         };
-        return autoMap[property] || "";
-      }
-      const sizingSpecialValues = {
-        "min": "min-content",
-        "max": "max-content",
-        "fit": "fit-content"
-      };
-      const sizingProps = ["w", "h", "min-w", "max-w", "min-h", "max-h"];
-      if (sizingProps.includes(property) && sizingSpecialValues[value]) {
-        const cssValue2 = sizingSpecialValues[value];
-        const propMap = {
-          "w": `width: ${cssValue2};`,
-          "h": `height: ${cssValue2};`,
-          "min-w": `min-width: ${cssValue2};`,
-          "max-w": `max-width: ${cssValue2};`,
-          "min-h": `min-height: ${cssValue2};`,
-          "max-h": `max-height: ${cssValue2};`
+        const selectors = [];
+        selectors.push(`${selector}${getStateSelector(state)}`);
+        const groupTriggers = {
+          "hover": "hoverable",
+          "focus": "focusable",
+          "focus-visible": "focusable",
+          "active": "pressable",
+          "expanded": "expandable",
+          "selected": "selectable"
         };
-        return propMap[property] || "";
+        if (groupTriggers[state]) {
+          const parentAttr = groupTriggers[state];
+          let triggerState = state;
+          if (state === "focus" || state === "focus-visible") triggerState = "focus-within";
+          const triggerSelector = getStateSelector(triggerState);
+          const groupSelector = `[layout~="${parentAttr}"]:not([layout~="disabled"])${triggerSelector} ${selector}`;
+          selectors.push(groupSelector);
+          if (interactIds && interactIds.size > 0) {
+            for (const id of interactIds) {
+              const peerSelector = `[interact~="${id}"]:not([layout~="disabled"])${triggerSelector} ~ [listens~="${id}"]${selector}`;
+              selectors.push(peerSelector);
+            }
+          }
+        }
+        selector = selectors.join(",\n");
       }
-      let cssValue;
-      if (isArbitrary) {
-        cssValue = value;
+    }
+    return `${selector} { ${cssDeclaration} }
+`;
+  }
+  function getDarkModeSelector(config) {
+    const darkMode = config.darkMode || "media";
+    if (Array.isArray(darkMode)) {
+      return darkMode[1] || ".dark";
+    }
+    if (darkMode === "selector") {
+      return ".dark";
+    }
+    return null;
+  }
+  function generateCSS(tokens, config) {
+    let css = "";
+    css += generateCSSVariables(config);
+    if (config.preflight !== false) {
+      css += generatePreflight(config);
+    }
+    css += `/* SenangStart CSS - Animation Keyframes */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes pulse {
+  50% { opacity: .5; }
+}
+@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+/* SenangStart CSS - Utility Classes */
+`;
+    const baseTokens = [];
+    const darkTokens = [];
+    const breakpointTokens = {};
+    const { screens } = config.theme;
+    for (const bp of Object.keys(screens)) {
+      breakpointTokens[bp] = [];
+    }
+    for (const token of tokens) {
+      if (token.state === "dark") {
+        darkTokens.push(token);
+      } else if (token.breakpoint) {
+        if (!breakpointTokens[token.breakpoint]) {
+          breakpointTokens[token.breakpoint] = [];
+        }
+        breakpointTokens[token.breakpoint].push(token);
       } else {
-        const isNegative = value.startsWith("-");
-        const cleanValue = isNegative ? value.substring(1) : value;
-        let baseValue;
-        if (cleanValue.startsWith("tw-")) {
-          const twValue = cleanValue.slice(3);
-          baseValue = `var(--tw-${twValue})`;
-        } else {
-          baseValue = `var(--s-${cleanValue})`;
+        baseTokens.push(token);
+      }
+    }
+    const interactIds = /* @__PURE__ */ new Set();
+    for (const token of tokens) {
+      if (token.attrType === "interact") {
+        interactIds.add(token.raw);
+      }
+    }
+    const displayProps = ["flex", "grid", "inline-flex", "inline-grid", "block", "inline", "hidden", "contents"];
+    const baseDisplayTokens = /* @__PURE__ */ new Map();
+    for (const token of baseTokens) {
+      if (token.attrType && displayProps.includes(token.property)) {
+        if (!baseDisplayTokens.has(token.attrType)) {
+          baseDisplayTokens.set(token.attrType, /* @__PURE__ */ new Set());
         }
-        cssValue = isNegative ? `calc(${baseValue} * -1)` : baseValue;
-      }
-      const map = {
-        "p": `padding: ${cssValue};`,
-        "p-t": `padding-top: ${cssValue};`,
-        "p-r": `padding-right: ${cssValue};`,
-        "p-b": `padding-bottom: ${cssValue};`,
-        "p-l": `padding-left: ${cssValue};`,
-        "p-x": `padding-left: ${cssValue}; padding-right: ${cssValue};`,
-        "p-y": `padding-top: ${cssValue}; padding-bottom: ${cssValue};`,
-        "m": `margin: ${cssValue};`,
-        "m-t": `margin-top: ${cssValue};`,
-        "m-r": `margin-right: ${cssValue};`,
-        "m-b": `margin-bottom: ${cssValue};`,
-        "m-l": `margin-left: ${cssValue};`,
-        "m-x": `margin-left: ${cssValue}; margin-right: ${cssValue};`,
-        "m-y": `margin-top: ${cssValue}; margin-bottom: ${cssValue};`,
-        "g": `gap: ${cssValue};`,
-        "g-x": `column-gap: ${cssValue};`,
-        "g-y": `row-gap: ${cssValue};`,
-        "w": `width: ${cssValue};`,
-        "h": `height: ${cssValue};`,
-        "min-w": `min-width: ${cssValue};`,
-        "max-w": `max-width: ${cssValue};`,
-        "min-h": `min-height: ${cssValue};`,
-        "max-h": `max-height: ${cssValue};`
-      };
-      return map[property] || "";
+        baseDisplayTokens.get(token.attrType).add(token.raw);
+      }
     }
-    function generateVisualRule(token) {
-      const { property, value, isArbitrary } = token;
-      if (typographyKeywords2[property]) {
-        return typographyKeywords2[property];
-      }
-      if (typographyKeywords2[property]) {
-        return typographyKeywords2[property];
-      }
-      const rules = {
-        "bg": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `background-color: ${cssValue};`;
-        },
-        "text": () => {
-          if (["left", "center", "right", "justify"].includes(value)) {
-            return `text-align: ${value};`;
-          }
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `color: ${cssValue};`;
-        },
-        "text-size": () => {
-          let cssValue;
-          let lineHeightValue;
-          if (isArbitrary) {
-            cssValue = value;
-            return `font-size: ${cssValue};`;
-          } else if (value.startsWith("tw-")) {
-            const twValue = value.slice(3);
-            cssValue = `var(--tw-text-${twValue})`;
-            lineHeightValue = `var(--tw-leading-${twValue})`;
-          } else {
-            cssValue = `var(--font-${value})`;
-            lineHeightValue = `var(--font-lh-${value})`;
-          }
-          return `font-size: ${cssValue}; line-height: ${lineHeightValue};`;
-        },
-        "font": () => {
-          const fontFamilies = {
-            "sans": "ui-sans-serif, system-ui, sans-serif",
-            "serif": "ui-serif, Georgia, serif",
-            "mono": "ui-monospace, monospace"
-          };
-          if (fontFamilies[value]) {
-            return `font-family: ${fontFamilies[value]};`;
-          }
-          let cssValue;
-          if (isArbitrary) {
-            cssValue = value;
-          } else if (value.startsWith("tw-")) {
-            const twValue = value.slice(3);
-            cssValue = `var(--tw-font-${twValue})`;
-          } else {
-            cssValue = `var(--fw-${value})`;
-          }
-          return `font-weight: ${cssValue};`;
-        },
-        "tracking": () => {
-          const trackingScale = {
-            "tighter": "-0.05em",
-            "tight": "-0.025em",
-            "normal": "0",
-            "wide": "0.025em",
-            "wider": "0.05em",
-            "widest": "0.1em"
-          };
-          const cssValue = isArbitrary ? value : trackingScale[value] || value;
-          return `letter-spacing: ${cssValue};`;
-        },
-        "leading": () => {
-          const leadingScale = {
-            "none": "1",
-            "tight": "1.25",
-            "snug": "1.375",
-            "normal": "1.5",
-            "relaxed": "1.625",
-            "loose": "2"
-          };
-          const cssValue = isArbitrary ? value : leadingScale[value] || value;
-          return `line-height: ${cssValue};`;
-        },
-        "line-clamp": () => {
-          return `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${value};`;
-        },
-        "decoration": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `text-decoration-color: ${cssValue};`;
-        },
-        "decoration-thickness": () => {
-          const cssValue = isArbitrary ? value : `${value}px`;
-          return `text-decoration-thickness: ${cssValue};`;
-        },
-        "underline-offset": () => {
-          const cssValue = isArbitrary ? value : `${value}px`;
-          return `text-underline-offset: ${cssValue};`;
-        },
-        "indent": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `text-indent: ${cssValue};`;
-        },
-        "border": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-color: ${cssValue}; border-style: solid;`;
-        },
-        // Border color - directional
-        "border-t": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-top-color: ${cssValue}; border-top-style: solid;`;
-        },
-        "border-b": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-bottom-color: ${cssValue}; border-bottom-style: solid;`;
-        },
-        "border-l": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-left-color: ${cssValue}; border-left-style: solid;`;
-        },
-        "border-r": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-right-color: ${cssValue}; border-right-style: solid;`;
-        },
-        "border-x": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-left-color: ${cssValue}; border-right-color: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
-        },
-        "border-y": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-top-color: ${cssValue}; border-bottom-color: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
-        },
-        "border-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `border-width: ${cssValue}; border-style: solid;`;
-        },
-        // Border width - directional
-        "border-t-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `border-top-width: ${cssValue}; border-top-style: solid;`;
-        },
-        "border-b-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `border-bottom-width: ${cssValue}; border-bottom-style: solid;`;
-        },
-        "border-l-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `border-left-width: ${cssValue}; border-left-style: solid;`;
-        },
-        "border-r-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `border-right-width: ${cssValue}; border-right-style: solid;`;
-        },
-        "border-x-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `border-left-width: ${cssValue}; border-right-width: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
-        },
-        "border-y-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `border-top-width: ${cssValue}; border-bottom-width: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
-        },
-        "rounded": () => {
-          let cssValue;
-          if (isArbitrary) {
-            cssValue = value;
-          } else if (value.startsWith("tw-")) {
-            const twValue = value.slice(3);
-            cssValue = `var(--tw-rounded-${twValue})`;
-          } else {
-            cssValue = `var(--r-${value})`;
-          }
-          return `border-radius: ${cssValue};`;
-        },
-        "shadow": () => {
-          let cssValue;
-          if (isArbitrary) {
-            cssValue = value;
-          } else if (value.startsWith("tw-")) {
-            const twValue = value.slice(3);
-            cssValue = `var(--tw-shadow-${twValue})`;
-          } else {
-            cssValue = `var(--shadow-${value})`;
-          }
-          return `box-shadow: ${cssValue};`;
-        },
-        "opacity": () => {
-          const opacityValue = isArbitrary ? value : parseFloat(value) / 100;
-          return `opacity: ${opacityValue};`;
-        },
-        "content": () => `content: "${value}";`,
-        // ============================================
-        // TRANSFORM UTILITIES
-        // ============================================
-        "scale": () => {
-          const scaleValue = isArbitrary ? value : parseFloat(value) / 100;
-          return `transform: scale(${scaleValue});`;
-        },
-        "scale-x": () => {
-          const scaleValue = isArbitrary ? value : parseFloat(value) / 100;
-          return `transform: scaleX(${scaleValue});`;
-        },
-        "scale-y": () => {
-          const scaleValue = isArbitrary ? value : parseFloat(value) / 100;
-          return `transform: scaleY(${scaleValue});`;
-        },
-        "rotate": () => {
-          const rotateValue = isArbitrary ? value : `${value}deg`;
-          return `transform: rotate(${rotateValue});`;
-        },
-        "translate-x": () => {
-          const translatePresets = { "0": "0", "full": "100%", "1/2": "50%", "-full": "-100%", "-1/2": "-50%" };
-          const cssValue = isArbitrary ? value : translatePresets[value] || `var(--s-${value})`;
-          return `transform: translateX(${cssValue});`;
-        },
-        "translate-y": () => {
-          const translatePresets = { "0": "0", "full": "100%", "1/2": "50%", "-full": "-100%", "-1/2": "-50%" };
-          const cssValue = isArbitrary ? value : translatePresets[value] || `var(--s-${value})`;
-          return `transform: translateY(${cssValue});`;
-        },
-        "skew-x": () => {
-          const skewValue = isArbitrary ? value : `${value}deg`;
-          return `transform: skewX(${skewValue});`;
-        },
-        "skew-y": () => {
-          const skewValue = isArbitrary ? value : `${value}deg`;
-          return `transform: skewY(${skewValue});`;
-        },
-        "origin": () => {
-          const originMap = {
-            "center": "center",
-            "top": "top",
-            "top-right": "top right",
-            "right": "right",
-            "bottom-right": "bottom right",
-            "bottom": "bottom",
-            "bottom-left": "bottom left",
-            "left": "left",
-            "top-left": "top left"
-          };
-          const cssValue = isArbitrary ? value.replace(/_/g, " ") : originMap[value] || value;
-          return `transform-origin: ${cssValue};`;
-        },
-        // ============================================
-        // TRANSITION UTILITIES
-        // ============================================
-        "transition": () => {
-          const transitionMap = {
-            "none": "transition-property: none;",
-            "all": "transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",
-            "colors": "transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",
-            "opacity": "transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",
-            "shadow": "transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",
-            "transform": "transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;"
-          };
-          return transitionMap[value] || `transition-property: ${value};`;
-        },
-        "duration": () => {
-          const durationMap = {
-            "instant": "75ms",
-            "quick": "100ms",
-            "fast": "150ms",
-            "normal": "200ms",
-            "slow": "300ms",
-            "slower": "500ms",
-            "lazy": "700ms"
-          };
-          const cssValue = isArbitrary ? value : durationMap[value] || `${value}ms`;
-          return `transition-duration: ${cssValue};`;
-        },
-        "ease": () => {
-          const easeMap = {
-            "linear": "linear",
-            "in": "cubic-bezier(0.4, 0, 1, 1)",
-            "out": "cubic-bezier(0, 0, 0.2, 1)",
-            "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
-          };
-          const cssValue = easeMap[value] || value;
-          return `transition-timing-function: ${cssValue};`;
-        },
-        "delay": () => {
-          const delayMap = {
-            "instant": "75ms",
-            "quick": "100ms",
-            "fast": "150ms",
-            "normal": "200ms",
-            "slow": "300ms"
-          };
-          const cssValue = isArbitrary ? value : delayMap[value] || `${value}ms`;
-          return `transition-delay: ${cssValue};`;
-        },
-        "animate": () => {
-          const animateMap = {
-            "none": "animation: none;",
-            "spin": "animation: spin 1s linear infinite;",
-            "ping": "animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;",
-            "pulse": "animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;",
-            "bounce": "animation: bounce 1s infinite;"
-          };
-          return animateMap[value] || `animation: ${value};`;
-        },
-        // ============================================
-        // FILTER UTILITIES
-        // ============================================
-        "blur": () => {
-          const blurScale = {
-            "none": "0",
-            "sm": "4px",
-            "md": "8px",
-            "lg": "12px",
-            "xl": "16px",
-            "2xl": "24px",
-            "3xl": "40px"
-          };
-          const cssValue = isArbitrary ? value : blurScale[value] || `${value}px`;
-          return `filter: blur(${cssValue});`;
-        },
-        "brightness": () => {
-          const brightnessScale = {
-            "0": "0",
-            "50": "0.5",
-            "75": "0.75",
-            "90": "0.9",
-            "95": "0.95",
-            "100": "1",
-            "105": "1.05",
-            "110": "1.1",
-            "125": "1.25",
-            "150": "1.5",
-            "200": "2"
-          };
-          const cssValue = isArbitrary ? value : brightnessScale[value] || parseFloat(value) / 100;
-          return `filter: brightness(${cssValue});`;
-        },
-        "contrast": () => {
-          const contrastScale = {
-            "0": "0",
-            "50": "0.5",
-            "75": "0.75",
-            "100": "1",
-            "125": "1.25",
-            "150": "1.5",
-            "200": "2"
-          };
-          const cssValue = isArbitrary ? value : contrastScale[value] || parseFloat(value) / 100;
-          return `filter: contrast(${cssValue});`;
-        },
-        "grayscale": () => {
-          const grayscaleScale = { "0": "0", "100": "1", "full": "1" };
-          const cssValue = isArbitrary ? value : grayscaleScale[value] || parseFloat(value) / 100;
-          return `filter: grayscale(${cssValue});`;
-        },
-        "hue-rotate": () => {
-          const cssValue = isArbitrary ? value : `${value}deg`;
-          return `filter: hue-rotate(${cssValue});`;
-        },
-        "invert": () => {
-          const invertScale = { "0": "0", "100": "1", "full": "1" };
-          const cssValue = isArbitrary ? value : invertScale[value] || parseFloat(value) / 100;
-          return `filter: invert(${cssValue});`;
-        },
-        "saturate": () => {
-          const saturateScale = {
-            "0": "0",
-            "50": "0.5",
-            "100": "1",
-            "150": "1.5",
-            "200": "2"
-          };
-          const cssValue = isArbitrary ? value : saturateScale[value] || parseFloat(value) / 100;
-          return `filter: saturate(${cssValue});`;
-        },
-        "sepia": () => {
-          const sepiaScale = { "0": "0", "100": "1", "full": "1" };
-          const cssValue = isArbitrary ? value : sepiaScale[value] || parseFloat(value) / 100;
-          return `filter: sepia(${cssValue});`;
-        },
-        "drop-shadow": () => {
-          const shadowMap = {
-            "sm": "drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))",
-            "md": "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
-            "lg": "drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))",
-            "xl": "drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))",
-            "2xl": "drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))",
-            "none": "drop-shadow(0 0 #0000)"
-          };
-          const cssValue = isArbitrary ? `drop-shadow(${value.replace(/_/g, " ")})` : shadowMap[value] || shadowMap["md"];
-          return `filter: ${cssValue};`;
-        },
-        // ============================================
-        // BACKGROUND UTILITIES
-        // ============================================
-        "bg-size": () => {
-          const sizeMap = { "auto": "auto", "cover": "cover", "contain": "contain" };
-          const cssValue = isArbitrary ? value.replace(/_/g, " ") : sizeMap[value] || value;
-          return `background-size: ${cssValue};`;
-        },
-        "bg-pos": () => {
-          const posMap = {
-            "center": "center",
-            "top": "top",
-            "top-right": "top right",
-            "right": "right",
-            "bottom-right": "bottom right",
-            "bottom": "bottom",
-            "bottom-left": "bottom left",
-            "left": "left",
-            "top-left": "top left"
-          };
-          const cssValue = isArbitrary ? value.replace(/_/g, " ") : posMap[value] || value;
-          return `background-position: ${cssValue};`;
-        },
-        "bg-repeat": () => {
-          const repeatMap = {
-            "repeat": "repeat",
-            "no-repeat": "no-repeat",
-            "repeat-x": "repeat-x",
-            "repeat-y": "repeat-y",
-            "round": "round",
-            "space": "space"
-          };
-          return `background-repeat: ${repeatMap[value] || value};`;
-        },
-        "bg-attachment": () => {
-          return `background-attachment: ${value};`;
-        },
-        "bg-clip": () => {
-          const clipMap = {
-            "border": "border-box",
-            "padding": "padding-box",
-            "content": "content-box",
-            "text": "text"
-          };
-          return `background-clip: ${clipMap[value] || value};`;
-        },
-        "bg-origin": () => {
-          const originMap = {
-            "border": "border-box",
-            "padding": "padding-box",
-            "content": "content-box"
-          };
-          return `background-origin: ${originMap[value] || value};`;
-        },
-        "bg-blend": () => {
-          return `background-blend-mode: ${value};`;
-        },
-        "bg-image": () => {
-          const gradientMap = {
-            "none": "none",
-            "gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
-            "gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
-            "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
-            "gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
-            "gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
-            "gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
-            "gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
-            "gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))"
-          };
-          const cssValue = isArbitrary ? value.replace(/_/g, " ") : gradientMap[value] || value;
-          return `background-image: ${cssValue};`;
-        },
-        // ============================================
-        // GRADIENT COLOR STOPS
-        // ============================================
-        "from": () => {
-          const color = isArbitrary ? value : `var(--c-${value})`;
-          return `--tw-gradient-from: ${color}; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`;
-        },
-        "via": () => {
-          const color = isArbitrary ? value : `var(--c-${value})`;
-          return `--tw-gradient-via: ${color}; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);`;
-        },
-        "to": () => {
-          const color = isArbitrary ? value : `var(--c-${value})`;
-          return `--tw-gradient-to: ${color};`;
-        },
-        // ============================================
-        // BACKDROP FILTER UTILITIES
-        // ============================================
-        "backdrop-blur": () => {
-          const blurScale = {
-            "none": "0",
-            "sm": "4px",
-            "md": "8px",
-            "lg": "12px",
-            "xl": "16px",
-            "2xl": "24px",
-            "3xl": "40px"
-          };
-          const cssValue = isArbitrary ? value : blurScale[value] || `${value}px`;
-          return `backdrop-filter: blur(${cssValue});`;
-        },
-        "backdrop-brightness": () => {
-          const cssValue = isArbitrary ? value : parseFloat(value) / 100;
-          return `backdrop-filter: brightness(${cssValue});`;
-        },
-        "backdrop-contrast": () => {
-          const cssValue = isArbitrary ? value : parseFloat(value) / 100;
-          return `backdrop-filter: contrast(${cssValue});`;
-        },
-        "backdrop-grayscale": () => {
-          const grayscaleScale = { "0": "0", "100": "1", "full": "1" };
-          const cssValue = isArbitrary ? value : grayscaleScale[value] || parseFloat(value) / 100;
-          return `backdrop-filter: grayscale(${cssValue});`;
-        },
-        "backdrop-hue-rotate": () => {
-          const cssValue = isArbitrary ? value : `${value}deg`;
-          return `backdrop-filter: hue-rotate(${cssValue});`;
-        },
-        "backdrop-invert": () => {
-          const invertScale = { "0": "0", "100": "1", "full": "1" };
-          const cssValue = isArbitrary ? value : invertScale[value] || parseFloat(value) / 100;
-          return `backdrop-filter: invert(${cssValue});`;
-        },
-        "backdrop-opacity": () => {
-          const cssValue = isArbitrary ? value : parseFloat(value) / 100;
-          return `backdrop-filter: opacity(${cssValue});`;
-        },
-        "backdrop-saturate": () => {
-          const cssValue = isArbitrary ? value : parseFloat(value) / 100;
-          return `backdrop-filter: saturate(${cssValue});`;
-        },
-        "backdrop-sepia": () => {
-          const sepiaScale = { "0": "0", "100": "1", "full": "1" };
-          const cssValue = isArbitrary ? value : sepiaScale[value] || parseFloat(value) / 100;
-          return `backdrop-filter: sepia(${cssValue});`;
-        },
-        // ============================================
-        // ANIMATION EXTENDED PROPERTIES
-        // ============================================
-        "animation-duration": () => {
-          const durationMap = {
-            "instant": "75ms",
-            "quick": "100ms",
-            "fast": "150ms",
-            "normal": "200ms",
-            "slow": "300ms",
-            "slower": "500ms",
-            "lazy": "700ms"
-          };
-          const cssValue = isArbitrary ? value : durationMap[value] || `${value}ms`;
-          return `animation-duration: ${cssValue};`;
-        },
-        "animation-delay": () => {
-          const delayMap = {
-            "instant": "75ms",
-            "quick": "100ms",
-            "fast": "150ms",
-            "normal": "200ms",
-            "slow": "300ms"
-          };
-          const cssValue = isArbitrary ? value : delayMap[value] || `${value}ms`;
-          return `animation-delay: ${cssValue};`;
-        },
-        "animation-iteration": () => {
-          const iterationMap = { "infinite": "infinite", "once": "1", "twice": "2" };
-          const cssValue = iterationMap[value] || value;
-          return `animation-iteration-count: ${cssValue};`;
-        },
-        "animation-direction": () => {
-          return `animation-direction: ${value};`;
-        },
-        "animation-fill": () => {
-          return `animation-fill-mode: ${value};`;
-        },
-        "animation-play": () => {
-          return `animation-play-state: ${value};`;
-        },
-        "animation-timing": () => {
-          const easeMap = {
-            "linear": "linear",
-            "in": "cubic-bezier(0.4, 0, 1, 1)",
-            "out": "cubic-bezier(0, 0, 0.2, 1)",
-            "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
-          };
-          const cssValue = easeMap[value] || value;
-          return `animation-timing-function: ${cssValue};`;
-        },
-        // ============================================
-        // SCROLL & INTERACTIVITY UTILITIES
-        // ============================================
-        "scroll-behavior": () => {
-          return `scroll-behavior: ${value};`;
-        },
-        "scroll-m": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `scroll-margin: ${cssValue};`;
-        },
-        "scroll-m-x": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `scroll-margin-left: ${cssValue}; scroll-margin-right: ${cssValue};`;
-        },
-        "scroll-m-y": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `scroll-margin-top: ${cssValue}; scroll-margin-bottom: ${cssValue};`;
-        },
-        "scroll-p": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `scroll-padding: ${cssValue};`;
-        },
-        "scroll-p-x": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `scroll-padding-left: ${cssValue}; scroll-padding-right: ${cssValue};`;
-        },
-        "scroll-p-y": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `scroll-padding-top: ${cssValue}; scroll-padding-bottom: ${cssValue};`;
-        },
-        "snap-align": () => {
-          return `scroll-snap-align: ${value};`;
-        },
-        "snap-stop": () => {
-          return `scroll-snap-stop: ${value};`;
-        },
-        "snap-type": () => {
-          const typeMap = {
-            "none": "none",
-            "x": "x mandatory",
-            "y": "y mandatory",
-            "both": "both mandatory",
-            "x-proximity": "x proximity",
-            "y-proximity": "y proximity"
-          };
-          return `scroll-snap-type: ${typeMap[value] || value};`;
-        },
-        "touch": () => {
-          const touchMap = {
-            "auto": "auto",
-            "none": "none",
-            "pan-x": "pan-x",
-            "pan-y": "pan-y",
-            "pan-left": "pan-left",
-            "pan-right": "pan-right",
-            "pan-up": "pan-up",
-            "pan-down": "pan-down",
-            "pinch-zoom": "pinch-zoom",
-            "manipulation": "manipulation"
-          };
-          return `touch-action: ${touchMap[value] || value};`;
-        },
-        "resize": () => {
-          const resizeMap = {
-            "none": "none",
-            "both": "both",
-            "x": "horizontal",
-            "y": "vertical"
-          };
-          return `resize: ${resizeMap[value] || value};`;
-        },
-        "will-change": () => {
-          const willChangeMap = {
-            "auto": "auto",
-            "scroll": "scroll-position",
-            "contents": "contents",
-            "transform": "transform",
-            "opacity": "opacity"
-          };
-          return `will-change: ${willChangeMap[value] || value};`;
-        },
-        "color-scheme": () => {
-          return `color-scheme: ${value};`;
-        },
-        "field-sizing": () => {
-          return `field-sizing: ${value};`;
-        },
-        "forced-color": () => {
-          return `forced-color-adjust: ${value};`;
-        },
-        // ============================================
-        // BORDER & OUTLINE UTILITIES
-        // ============================================
-        "border-style": () => {
-          return `border-style: ${value};`;
-        },
-        "outline": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `outline-color: ${cssValue};`;
-        },
-        "outline-style": () => {
-          return `outline-style: ${value};`;
-        },
-        "outline-w": () => {
-          const cssValue = isArbitrary ? value : `${value}px`;
-          return `outline-width: ${cssValue};`;
-        },
-        "outline-offset": () => {
-          const cssValue = isArbitrary ? value : `${value}px`;
-          return `outline-offset: ${cssValue};`;
-        },
-        // ============================================
-        // RING UTILITIES (Focus Ring)
-        // ============================================
-        "ring": () => {
-          if (value === "none") {
-            return `box-shadow: 0 0 0 0 transparent;`;
-          }
-          const cssValue = isArbitrary ? value : `var(--ring-${value})`;
-          return `box-shadow: 0 0 0 var(--ring-offset) var(--ring-offset-color), 0 0 0 calc(${cssValue} + var(--ring-offset)) var(--ring-color);`;
-        },
-        "ring-color": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `--ring-color: ${cssValue};`;
-        },
-        "ring-offset": () => {
-          const cssValue = isArbitrary ? value : `${value}px`;
-          return `--ring-offset: ${cssValue};`;
-        },
-        "ring-offset-color": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `--ring-offset-color ${cssValue};`;
-        },
-        // ============================================
-        // DIVIDE UTILITIES
-        // ============================================
-        "divide": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-color: ${cssValue}; border-style: solid;`;
-        },
-        "divide-x": () => {
-          if (value === "reverse") {
-            return "--ss-divide-x-reverse: 1;";
-          }
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-left-color: ${cssValue}; border-right-color: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
-        },
-        "divide-y": () => {
-          if (value === "reverse") {
-            return "--ss-divide-y-reverse: 1;";
+    for (const token of baseTokens) {
+      css += generateRule(token, config, false, interactIds);
+    }
+    for (const [bp, bpTokens] of Object.entries(breakpointTokens)) {
+      if (bpTokens.length > 0) {
+        css += `
+@media (min-width: ${screens[bp]}) {
+`;
+        const processedResetSelectors = /* @__PURE__ */ new Set();
+        for (const bpToken of bpTokens) {
+          if (bpToken.attrType && displayProps.includes(bpToken.property)) {
+            if (baseDisplayTokens.has(bpToken.attrType)) {
+              const baseDisplays = baseDisplayTokens.get(bpToken.attrType);
+              if (baseDisplays.size > 0 && !baseDisplays.has(bpToken.raw) && !processedResetSelectors.has(bpToken.raw)) {
+                const selector = `[${bpToken.attrType}~="${bpToken.raw}"]`;
+                css += `  ${selector} { display: revert-layer; }
+`;
+                processedResetSelectors.add(bpToken.raw);
+              }
+            }
           }
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `border-top-color: ${cssValue}; border-bottom-color: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
-        },
-        "divide-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `border-width: ${cssValue}; border-style: solid;`;
-        },
-        "divide-x-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `
-          border-right-width: calc(${cssValue} * var(--ss-divide-x-reverse, 0));
-          border-left-width: calc(${cssValue} * (1 - var(--ss-divide-x-reverse, 0)));
-          border-left-style: solid; 
-          border-right-style: solid;
-        `;
-        },
-        "divide-y-w": () => {
-          const cssValue = isArbitrary ? value : `var(--s-${value})`;
-          return `
-          border-bottom-width: calc(${cssValue} * var(--ss-divide-y-reverse, 0));
-          border-top-width: calc(${cssValue} * (1 - var(--ss-divide-y-reverse, 0)));
-          border-top-style: solid; 
-          border-bottom-style: solid;
-        `;
-        },
-        "divide-x:reverse": () => {
-          return "--ss-divide-x-reverse: 1;";
-        },
-        "divide-y:reverse": () => {
-          return "--ss-divide-y-reverse: 1;";
-        },
-        "divide-style": () => {
-          return `border-style: ${value};`;
-        },
-        // ============================================
-        // SVG UTILITIES
-        // ============================================
-        "stroke": () => {
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `stroke: ${cssValue};`;
-        },
-        "stroke-w": () => {
-          const cssValue = isArbitrary ? value : value;
-          return `stroke-width: ${cssValue};`;
-        },
-        "fill": () => {
-          if (value === "none") return "fill: none;";
-          const cssValue = isArbitrary ? value : `var(--c-${value})`;
-          return `fill: ${cssValue};`;
-        },
-        // ============================================
-        // MIX BLEND MODE
-        // ============================================
-        "mix-blend": () => {
-          return `mix-blend-mode: ${value};`;
-        },
-        // ============================================
-        // 3D TRANSFORM UTILITIES
-        // ============================================
-        "perspective": () => {
-          const perspectiveMap = {
-            "none": "none",
-            "sm": "500px",
-            "md": "1000px",
-            "lg": "1500px",
-            "xl": "2000px"
-          };
-          const cssValue = isArbitrary ? value : perspectiveMap[value] || value;
-          return `perspective: ${cssValue};`;
-        },
-        "perspective-origin": () => {
-          const originMap = {
-            "center": "center",
-            "top": "top",
-            "top-right": "top right",
-            "right": "right",
-            "bottom-right": "bottom right",
-            "bottom": "bottom",
-            "bottom-left": "bottom left",
-            "left": "left",
-            "top-left": "top left"
-          };
-          const cssValue = isArbitrary ? value.replace(/_/g, " ") : originMap[value] || value;
-          return `perspective-origin: ${cssValue};`;
-        },
-        "rotate-x": () => {
-          const rotateValue = isArbitrary ? value : `${value}deg`;
-          return `transform: rotateX(${rotateValue});`;
-        },
-        "rotate-y": () => {
-          const rotateValue = isArbitrary ? value : `${value}deg`;
-          return `transform: rotateY(${rotateValue});`;
-        },
-        "rotate-z": () => {
-          const rotateValue = isArbitrary ? value : `${value}deg`;
-          return `transform: rotateZ(${rotateValue});`;
-        },
-        "transform-style": () => {
-          return `transform-style: ${value};`;
-        },
-        "backface": () => {
-          const backfaceMap = { "visible": "visible", "hidden": "hidden" };
-          return `backface-visibility: ${backfaceMap[value] || value};`;
         }
-      };
-      const gen = rules[property];
-      return gen ? gen() : "";
+        for (const token of bpTokens) {
+          css += "  " + generateRule(token, config, false, interactIds);
+        }
+        css += "}\n";
+      }
     }
-    function generateRule(raw, attrType) {
-      if (attrType === "layout" && layoutKeywords[raw]) {
-        return `[layout~="${raw}"] { ${layoutKeywords[raw]} }
+    if (darkTokens.length > 0) {
+      const darkMode = config.darkMode || "media";
+      const darkSelector = getDarkModeSelector(config);
+      if (darkMode === "media") {
+        css += `
+/* Dark Mode (prefers-color-scheme) */
+`;
+        css += `@media (prefers-color-scheme: dark) {
 `;
+        for (const token of darkTokens) {
+          css += "  " + generateRule(token, config, true, interactIds);
+        }
+        css += "}\n";
+      } else {
+        css += `
+/* Dark Mode (${darkSelector}) */
+`;
+        for (const token of darkTokens) {
+          const baseRule = generateRule(token, config, true, interactIds);
+          const wrappedRule = baseRule.replace(/^(\[[^\]]+\])/, `${darkSelector} $1`);
+          css += wrappedRule;
+        }
       }
-      const token = tokenize(raw, attrType);
-      let cssDeclaration = "";
-      switch (attrType) {
-        case "layout":
-          cssDeclaration = generateLayoutRule(token);
-          break;
-        case "space":
-          cssDeclaration = generateSpaceRule(token);
-          break;
-        case "visual":
-          cssDeclaration = generateVisualRule(token);
-          break;
-      }
-      if (!cssDeclaration) return "";
-      const isDivide = raw.startsWith("divide") && !raw.includes(":reverse");
-      let selector = "";
-      if (isDivide) {
-        selector = `[visual~="${raw}"] > :not([hidden]) ~ :not([hidden])`;
+    }
+    return css;
+  }
+
+  // src/config/defaults.js
+  var defaultConfig = {
+    // Input files to scan for attributes
+    content: [
+      "./**/*.html",
+      "./src/**/*.{html,jsx,tsx,vue,svelte}",
+      "./pages/**/*.{html,jsx,tsx}",
+      "./components/**/*.{html,jsx,tsx}"
+    ],
+    // Output configuration
+    output: {
+      css: "./public/senangstart.css",
+      minify: false,
+      aiContext: "./.cursorrules",
+      typescript: "./types/senang.d.ts"
+    },
+    // Dark mode configuration
+    // 'media' - Uses @media (prefers-color-scheme: dark)
+    // 'selector' - Uses .dark class on html/body
+    // ['selector', '.custom-dark'] - Uses custom selector
+    darkMode: "media",
+    // Preflight: Include opinionated base reset styles
+    // true - Include all preflight styles (default)
+    // false - Disable preflight completely
+    preflight: true,
+    theme: {
+      // 1. SPACING: The "Natural Object" Scale with multiplier variants
+      // Logic: How big is the object/gap physically?
+      spacing: {
+        "none": "0px",
+        // No space
+        "thin": "1px",
+        // Hairline (for borders)
+        "regular": "2px",
+        // Standard border
+        "thick": "3px",
+        // Bold border
+        "tiny": "4px",
+        // Small offsets
+        "tiny-2x": "6px",
+        // Tiny multiplied
+        "small": "8px",
+        // Grouping inside components
+        "small-2x": "10px",
+        // 
+        "small-3x": "12px",
+        // 
+        "small-4x": "14px",
+        // 
+        "medium": "16px",
+        // Standard default
+        "medium-2x": "20px",
+        // 
+        "medium-3x": "24px",
+        // 
+        "medium-4x": "28px",
+        // 
+        "large": "32px",
+        // Separation between groups
+        "large-2x": "36px",
+        // 
+        "large-3x": "40px",
+        // 
+        "large-4x": "44px",
+        // 
+        "big": "48px",
+        // Layout sections
+        "big-2x": "56px",
+        // 
+        "big-3x": "64px",
+        // 
+        "big-4x": "80px",
+        // 
+        "giant": "96px",
+        // Hero sections
+        "giant-2x": "112px",
+        // 
+        "giant-3x": "128px",
+        // 
+        "giant-4x": "144px",
+        // 
+        "vast": "160px",
+        // Page-level spacing
+        "vast-2x": "176px",
+        // 
+        "vast-3x": "192px",
+        // 
+        "vast-4x": "208px",
+        // 
+        "vast-5x": "224px",
+        // 
+        "vast-6x": "240px",
+        // 
+        "vast-7x": "256px",
+        // 
+        "vast-8x": "288px",
+        // 
+        "vast-9x": "320px",
+        // 
+        "vast-10x": "384px"
+        // 
+      },
+      // 2. RADIUS: Tactile Feel
+      radius: {
+        "none": "0px",
+        // Sharp corners
+        "small": "4px",
+        // Subtle nudge
+        "medium": "8px",
+        // Soft corner
+        "big": "16px",
+        // Distinct curve
+        "round": "9999px"
+        // Pill/Circle
+      },
+      // 3. SHADOWS: Depth Perception
+      shadow: {
+        "none": "none",
+        "small": "0 1px 2px rgba(0,0,0,0.05)",
+        "medium": "0 4px 6px rgba(0,0,0,0.1)",
+        "big": "0 10px 15px rgba(0,0,0,0.15)",
+        "giant": "0 25px 50px rgba(0,0,0,0.25)"
+      },
+      // 4. FONT SIZES: Reading Scale (with paired line-heights)
+      fontSize: {
+        "mini": "0.75rem",
+        // 12px          
+        "small": "0.875rem",
+        // 14px          
+        "base": "1rem",
+        // 16px          
+        "large": "1.125rem",
+        // 18px          
+        "big": "1.25rem",
+        // 20px (xl)     
+        "huge": "1.5rem",
+        // 24px (2xl)    
+        "grand": "1.875rem",
+        // 30px (3xl)    
+        "giant": "2.25rem",
+        // 36px (4xl)    
+        "mount": "3rem",
+        // 48px (5xl)    
+        "mega": "3.75rem",
+        // 60px (6xl)    
+        "giga": "4.5rem",
+        // 72px (7xl)    
+        "tera": "6rem",
+        // 96px (8xl)    
+        "hero": "8rem"
+        // 128px         
+      },
+      // 4b. FONT SIZE LINE-HEIGHTS: Paired with font sizes
+      fontSizeLineHeight: {
+        "mini": "1rem",
+        // 16px
+        "small": "1.25rem",
+        // 20px
+        "base": "1.5rem",
+        // 24px
+        "large": "1.75rem",
+        // 28px
+        "big": "1.75rem",
+        // 28px
+        "huge": "2rem",
+        // 32px
+        "grand": "2.25rem",
+        // 36px
+        "giant": "2.5rem",
+        // 40px
+        "mount": "1",
+        // 48px (unitless 1)
+        "mega": "1",
+        // 60px (unitless 1)
+        "giga": "1",
+        // 72px (unitless 1)
+        "tera": "1",
+        // 96px (unitless 1)
+        "hero": "1"
+        // 128px (unitless 1)
+      },
+      // 5. FONT WEIGHTS
+      fontWeight: {
+        "normal": "400",
+        "medium": "500",
+        "bold": "700"
+      },
+      // 6. BREAKPOINTS: Device Intent
+      screens: {
+        "mob": "480px",
+        // Mobile
+        "tab": "768px",
+        // Tablet
+        "lap": "1024px",
+        // Laptop
+        "desk": "1280px",
+        // Desktop
+        // Tailwind Compatibility
+        "tw-sm": "640px",
+        "tw-md": "768px",
+        "tw-lg": "1024px",
+        "tw-xl": "1280px",
+        "tw-2xl": "1536px"
+      },
+      // 7. COLORS: Palette Scales
+      colors: {
+        // Base colors
+        "white": "#FFFFFF",
+        "black": "#000000",
+        // Brand/Semantic colors
+        "grey": "#6B7280",
+        "dark": "#3E4A5D",
+        // Brand dark
+        "light": "#DBEAFE",
+        // Brand light/secondary
+        "primary": "#2563EB",
+        // Brand primary
+        "secondary": "#1E40AF",
+        // Brand secondary
+        "success": "#10B981",
+        "warning": "#F59E0B",
+        "danger": "#EF4444",
+        // Red
+        "red-50": "#FEF2F2",
+        "red-100": "#FEE2E2",
+        "red-200": "#FECACA",
+        "red-300": "#FCA5A5",
+        "red-400": "#F87171",
+        "red-500": "#EF4444",
+        "red-600": "#DC2626",
+        "red-700": "#B91C1C",
+        "red-800": "#991B1B",
+        "red-900": "#7F1D1D",
+        "red-950": "#450A0A",
+        // Orange
+        "orange-50": "#FFF7ED",
+        "orange-100": "#FFEDD5",
+        "orange-200": "#FED7AA",
+        "orange-300": "#FDBA74",
+        "orange-400": "#FB923C",
+        "orange-500": "#F97316",
+        "orange-600": "#EA580C",
+        "orange-700": "#C2410C",
+        "orange-800": "#9A3412",
+        "orange-900": "#7C2D12",
+        "orange-950": "#431407",
+        // Amber
+        "amber-50": "#FFFBEB",
+        "amber-100": "#FEF3C7",
+        "amber-200": "#FDE68A",
+        "amber-300": "#FCD34D",
+        "amber-400": "#FBBF24",
+        "amber-500": "#F59E0B",
+        "amber-600": "#D97706",
+        "amber-700": "#B45309",
+        "amber-800": "#92400E",
+        "amber-900": "#78350F",
+        "amber-950": "#451A03",
+        // Yellow
+        "yellow-50": "#FEFCE8",
+        "yellow-100": "#FEF9C3",
+        "yellow-200": "#FEF08A",
+        "yellow-300": "#FDE047",
+        "yellow-400": "#FACC15",
+        "yellow-500": "#EAB308",
+        "yellow-600": "#CA8A04",
+        "yellow-700": "#A16207",
+        "yellow-800": "#854D0E",
+        "yellow-900": "#713F12",
+        "yellow-950": "#422006",
+        // Lime
+        "lime-50": "#F7FEE7",
+        "lime-100": "#ECFCCB",
+        "lime-200": "#D9F99D",
+        "lime-300": "#BEF264",
+        "lime-400": "#A3E635",
+        "lime-500": "#84CC16",
+        "lime-600": "#65A30D",
+        "lime-700": "#4D7C0F",
+        "lime-800": "#3F6212",
+        "lime-900": "#365314",
+        "lime-950": "#1A2E05",
+        // Green
+        "green-50": "#F0FDF4",
+        "green-100": "#DCFCE7",
+        "green-200": "#BBF7D0",
+        "green-300": "#86EFAC",
+        "green-400": "#4ADE80",
+        "green-500": "#22C55E",
+        "green-600": "#16A34A",
+        "green-700": "#15803D",
+        "green-800": "#166534",
+        "green-900": "#14532D",
+        "green-950": "#052E16",
+        // Emerald
+        "emerald-50": "#ECFDF5",
+        "emerald-100": "#D1FAE5",
+        "emerald-200": "#A7F3D0",
+        "emerald-300": "#6EE7B7",
+        "emerald-400": "#34D399",
+        "emerald-500": "#10B981",
+        "emerald-600": "#059669",
+        "emerald-700": "#047857",
+        "emerald-800": "#065F46",
+        "emerald-900": "#064E3B",
+        "emerald-950": "#022C22",
+        // Teal
+        "teal-50": "#F0FDFA",
+        "teal-100": "#CCFBF1",
+        "teal-200": "#99F6E4",
+        "teal-300": "#5EEAD4",
+        "teal-400": "#2DD4BF",
+        "teal-500": "#14B8A6",
+        "teal-600": "#0D9488",
+        "teal-700": "#0F766E",
+        "teal-800": "#115E59",
+        "teal-900": "#134E4A",
+        "teal-950": "#042F2E",
+        // Cyan
+        "cyan-50": "#ECFEFF",
+        "cyan-100": "#CFFAFE",
+        "cyan-200": "#A5F3FC",
+        "cyan-300": "#67E8F9",
+        "cyan-400": "#22D3EE",
+        "cyan-500": "#06B6D4",
+        "cyan-600": "#0891B2",
+        "cyan-700": "#0E7490",
+        "cyan-800": "#155E75",
+        "cyan-900": "#164E63",
+        "cyan-950": "#083344",
+        // Sky
+        "sky-50": "#F0F9FF",
+        "sky-100": "#E0F2FE",
+        "sky-200": "#BAE6FD",
+        "sky-300": "#7DD3FC",
+        "sky-400": "#38BDF8",
+        "sky-500": "#0EA5E9",
+        "sky-600": "#0284C7",
+        "sky-700": "#0369A1",
+        "sky-800": "#075985",
+        "sky-900": "#0C4A6E",
+        "sky-950": "#082F49",
+        // Blue
+        "blue-50": "#EFF6FF",
+        "blue-100": "#DBEAFE",
+        "blue-200": "#BFDBFE",
+        "blue-300": "#93C5FD",
+        "blue-400": "#60A5FA",
+        "blue-500": "#3B82F6",
+        "blue-600": "#2563EB",
+        "blue-700": "#1D4ED8",
+        "blue-800": "#1E40AF",
+        "blue-900": "#1E3A8A",
+        "blue-950": "#172554",
+        // Indigo
+        "indigo-50": "#EEF2FF",
+        "indigo-100": "#E0E7FF",
+        "indigo-200": "#C7D2FE",
+        "indigo-300": "#A5B4FC",
+        "indigo-400": "#818CF8",
+        "indigo-500": "#6366F1",
+        "indigo-600": "#4F46E5",
+        "indigo-700": "#4338CA",
+        "indigo-800": "#3730A3",
+        "indigo-900": "#312E81",
+        "indigo-950": "#1E1B4B",
+        // Violet
+        "violet-50": "#F5F3FF",
+        "violet-100": "#EDE9FE",
+        "violet-200": "#DDD6FE",
+        "violet-300": "#C4B5FD",
+        "violet-400": "#A78BFA",
+        "violet-500": "#8B5CF6",
+        "violet-600": "#7C3AED",
+        "violet-700": "#6D28D9",
+        "violet-800": "#5B21B6",
+        "violet-900": "#4C1D95",
+        "violet-950": "#2E1065",
+        // Purple
+        "purple-50": "#FAF5FF",
+        "purple-100": "#F3E8FF",
+        "purple-200": "#E9D5FF",
+        "purple-300": "#D8B4FE",
+        "purple-400": "#C084FC",
+        "purple-500": "#A855F7",
+        "purple-600": "#9333EA",
+        "purple-700": "#7E22CE",
+        "purple-800": "#6B21A8",
+        "purple-900": "#581C87",
+        "purple-950": "#3B0764",
+        // Fuchsia
+        "fuchsia-50": "#FDF4FF",
+        "fuchsia-100": "#FAE8FF",
+        "fuchsia-200": "#F5D0FE",
+        "fuchsia-300": "#F0ABFC",
+        "fuchsia-400": "#E879F9",
+        "fuchsia-500": "#D946EF",
+        "fuchsia-600": "#C026D3",
+        "fuchsia-700": "#A21CAF",
+        "fuchsia-800": "#86198F",
+        "fuchsia-900": "#701A75",
+        "fuchsia-950": "#4A044E",
+        // Pink
+        "pink-50": "#FDF2F8",
+        "pink-100": "#FCE7F3",
+        "pink-200": "#FBCFE8",
+        "pink-300": "#F9A8D4",
+        "pink-400": "#F472B6",
+        "pink-500": "#EC4899",
+        "pink-600": "#DB2777",
+        "pink-700": "#BE185D",
+        "pink-800": "#9D174D",
+        "pink-900": "#831843",
+        "pink-950": "#500724",
+        // Rose
+        "rose-50": "#FFF1F2",
+        "rose-100": "#FFE4E6",
+        "rose-200": "#FECDD3",
+        "rose-300": "#FDA4AF",
+        "rose-400": "#FB7185",
+        "rose-500": "#F43F5E",
+        "rose-600": "#E11D48",
+        "rose-700": "#BE123C",
+        "rose-800": "#9F1239",
+        "rose-900": "#881337",
+        "rose-950": "#4C0519",
+        // Slate
+        "slate-50": "#F8FAFC",
+        "slate-100": "#F1F5F9",
+        "slate-200": "#E2E8F0",
+        "slate-300": "#CBD5E1",
+        "slate-400": "#94A3B8",
+        "slate-500": "#64748B",
+        "slate-600": "#475569",
+        "slate-700": "#334155",
+        "slate-800": "#1E293B",
+        "slate-900": "#0F172A",
+        "slate-950": "#020617",
+        // Gray
+        "gray-50": "#F9FAFB",
+        "gray-100": "#F3F4F6",
+        "gray-200": "#E5E7EB",
+        "gray-300": "#D1D5DB",
+        "gray-400": "#9CA3AF",
+        "gray-500": "#6B7280",
+        "gray-600": "#4B5563",
+        "gray-700": "#374151",
+        "gray-800": "#1F2937",
+        "gray-900": "#111827",
+        "gray-950": "#030712",
+        // Zinc
+        "zinc-50": "#FAFAFA",
+        "zinc-100": "#F4F4F5",
+        "zinc-200": "#E4E4E7",
+        "zinc-300": "#D4D4D8",
+        "zinc-400": "#A1A1AA",
+        "zinc-500": "#71717A",
+        "zinc-600": "#52525B",
+        "zinc-700": "#3F3F46",
+        "zinc-800": "#27272A",
+        "zinc-900": "#18181B",
+        "zinc-950": "#09090B",
+        // Neutral
+        "neutral-50": "#FAFAFA",
+        "neutral-100": "#F5F5F5",
+        "neutral-200": "#E5E5E5",
+        "neutral-300": "#D4D4D4",
+        "neutral-400": "#A3A3A3",
+        "neutral-500": "#737373",
+        "neutral-600": "#525252",
+        "neutral-700": "#404040",
+        "neutral-800": "#262626",
+        "neutral-900": "#171717",
+        "neutral-950": "#0A0A0A",
+        // Stone
+        "stone-50": "#FAFAF9",
+        "stone-100": "#F5F5F4",
+        "stone-200": "#E7E5E4",
+        "stone-300": "#D6D3D1",
+        "stone-400": "#A8A29E",
+        "stone-500": "#78716C",
+        "stone-600": "#57534E",
+        "stone-700": "#44403C",
+        "stone-800": "#292524",
+        "stone-900": "#1C1917",
+        "stone-950": "#0C0A09"
+      },
+      // 8. Z-INDEX: Stacking Order
+      zIndex: {
+        "base": "0",
+        "low": "10",
+        "mid": "50",
+        "high": "100",
+        "top": "9999"
+      }
+    },
+    // Extend or override defaults
+    extend: {}
+  };
+  function deepMerge(target, source, visited = /* @__PURE__ */ new WeakSet()) {
+    if (visited.has(target) || visited.has(source)) {
+      return source;
+    }
+    visited.add(target);
+    visited.add(source);
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+      if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+        result[key] = deepMerge(result[key] || {}, source[key], visited);
       } else {
-        selector = `[${attrType}~="${raw}"]`;
+        result[key] = source[key];
       }
-      if (token.state && token.state !== "dark") {
-        if (isDivide) {
-          selector = `[visual~="${raw}"] > :not([hidden]) ~ :not([hidden]):${token.state}`;
-        } else {
-          selector += `:${token.state}`;
+    }
+    return result;
+  }
+  function mergeConfig(userConfig = {}) {
+    const merged = { ...defaultConfig };
+    if (userConfig.content) {
+      merged.content = userConfig.content;
+    }
+    if (userConfig.output) {
+      merged.output = { ...merged.output, ...userConfig.output };
+    }
+    if (userConfig.darkMode !== void 0) {
+      merged.darkMode = userConfig.darkMode;
+    }
+    if (userConfig.preflight !== void 0) {
+      merged.preflight = userConfig.preflight;
+    }
+    if (userConfig.theme) {
+      merged.theme = deepMerge(merged.theme, userConfig.theme);
+    }
+    return merged;
+  }
+
+  // src/cdn/senangstart-engine.js
+  (function() {
+    "use strict";
+    function validateConfig(config) {
+      if (!config || typeof config !== "object" || Array.isArray(config)) return false;
+      if (config.theme && (typeof config.theme !== "object" || Array.isArray(config.theme))) return false;
+      return true;
+    }
+    function loadInlineConfig() {
+      const configEl = document.querySelector('script[type="senangstart/config"]');
+      if (!configEl) return {};
+      try {
+        const parsed = JSON.parse(configEl.textContent);
+        if (!validateConfig(parsed)) {
+          console.error("[SenangStart] Invalid config structure");
+          return {};
         }
+        return parsed;
+      } catch (e) {
+        console.error("[SenangStart] Invalid config JSON:", e);
+        return {};
       }
-      return `${selector} { ${cssDeclaration} }
-`;
+    }
+    function getFinalConfig() {
+      const user = loadInlineConfig();
+      return mergeConfig(user);
     }
     function scanDOM() {
       const tokens = {
         layout: /* @__PURE__ */ new Set(),
         space: /* @__PURE__ */ new Set(),
-        visual: /* @__PURE__ */ new Set()
+        visual: /* @__PURE__ */ new Set(),
+        interact: /* @__PURE__ */ new Set(),
+        // Collected interact IDs
+        listens: /* @__PURE__ */ new Set()
+        // Collected listens IDs
       };
-      const elements = document.querySelectorAll("[layout], [space], [visual]");
+      const elements = document.querySelectorAll("[layout], [space], [visual], [interact], [listens]");
       elements.forEach((el) => {
         ["layout", "space", "visual"].forEach((attr) => {
           const value = el.getAttribute(attr);
@@ -8674,100 +9338,20 @@ video {
             });
           }
         });
+        ["interact", "listens"].forEach((attr) => {
+          const value = el.getAttribute(attr);
+          if (value) {
+            value.split(/\s+/).forEach((id) => {
+              if (id) tokens[attr].add(id);
+            });
+          }
+        });
       });
       return tokens;
     }
-    function compileCSS(tokens, config) {
-      let css = generateCSSVariables(config);
-      if (config.preflight !== false) {
-        css += generatePreflight();
-      }
-      const tokenArray = [];
-      for (const [attrType, values] of Object.entries(tokens)) {
-        for (const raw of values) {
-          tokenArray.push({ raw, attrType });
-        }
-      }
-      const baseTokens = [];
-      const darkTokens = [];
-      const breakpointTokens = {};
-      const { screens } = config.theme;
-      for (const bp of Object.keys(screens)) {
-        breakpointTokens[bp] = [];
-      }
-      for (const token of tokenArray) {
-        const parsed = tokenize(token.raw, token.attrType);
-        if (parsed.state === "dark") {
-          darkTokens.push(parsed);
-        } else if (parsed.breakpoint) {
-          if (!breakpointTokens[parsed.breakpoint]) {
-            breakpointTokens[parsed.breakpoint] = [];
-          }
-          breakpointTokens[parsed.breakpoint].push(parsed);
-        } else {
-          baseTokens.push(parsed);
-        }
-      }
-      const displayProps = ["flex", "grid", "inline-flex", "inline-grid", "block", "inline", "hidden", "contents"];
-      const baseDisplayTokens = /* @__PURE__ */ new Map();
-      for (const token of baseTokens) {
-        if (token.attrType && displayProps.includes(token.property)) {
-          if (!baseDisplayTokens.has(token.attrType)) {
-            baseDisplayTokens.set(token.attrType, /* @__PURE__ */ new Set());
-          }
-          baseDisplayTokens.get(token.attrType).add(token.raw);
-        }
-      }
-      for (const token of baseTokens) {
-        css += generateRule(token.raw, token.attrType);
-      }
-      for (const [bp, bpTokens] of Object.entries(breakpointTokens)) {
-        if (bpTokens.length > 0) {
-          css += `
-@media (min-width: ${screens[bp]}) {
-`;
-          const processedResetSelectors = /* @__PURE__ */ new Set();
-          for (const bpToken of bpTokens) {
-            if (bpToken.attrType && displayProps.includes(bpToken.property)) {
-              if (baseDisplayTokens.has(bpToken.attrType)) {
-                const baseDisplays = baseDisplayTokens.get(bpToken.attrType);
-                if (baseDisplays.size > 0 && !baseDisplays.has(bpToken.raw) && !processedResetSelectors.has(bpToken.raw)) {
-                  const selector = `[${bpToken.attrType}~="${bpToken.raw}"]`;
-                  css += `  ${selector} { display: revert-layer; }
-`;
-                  processedResetSelectors.add(bpToken.raw);
-                }
-              }
-            }
-          }
-          for (const token of bpTokens) {
-            css += "  " + generateRule(token.raw, token.attrType);
-          }
-          css += "}\n";
-        }
-      }
-      if (darkTokens.length > 0) {
-        const darkMode = config.darkMode || "media";
-        if (darkMode === "media") {
-          css += `
-@media (prefers-color-scheme: dark) {
-`;
-          for (const token of darkTokens) {
-            css += "  " + generateRule(token.raw, token.attrType);
-          }
-          css += "}\n";
-        } else {
-          const darkSelector = Array.isArray(darkMode) ? darkMode[1] : ".dark";
-          css += `
-/* Dark Mode */
-`;
-          for (const token of darkTokens) {
-            const rule = generateRule(token.raw, token.attrType);
-            css += rule.replace(/^(\[[^\]]+\])/, `${darkSelector} $1`);
-          }
-        }
-      }
-      return css;
+    function compileCSS(domTokens, config) {
+      const tokens = tokenizeAll(domTokens);
+      return generateCSS(tokens, config);
     }
     function injectStyles(css) {
       let styleEl = document.getElementById("senangstart-jit");
@@ -8779,8 +9363,7 @@ video {
       styleEl.textContent = css;
     }
     function init() {
-      const userConfig = loadInlineConfig();
-      const config = mergeConfig(userConfig);
+      const config = getFinalConfig();
       const tokens = scanDOM();
       const css = compileCSS(tokens, config);
       injectStyles(css);
@@ -8793,7 +9376,7 @@ video {
         childList: true,
         subtree: true,
         attributes: true,
-        attributeFilter: ["layout", "space", "visual"]
+        attributeFilter: ["layout", "space", "visual", "interact", "listens"]
       });
       console.log(
         "%c[SenangStart CSS]%c Just-in-Time runtime initialized \u2713",