@bookklik/senangstart-css 0.2.9 → 0.2.12

package/dist/senangstart-css.js

@@ -39,11 +39,61 @@
     if (typeof value !== "string") {
       return "";
     }
-    const dangerousChars = /[;]/g;
-    if (dangerousChars.test(value)) {
-      return value.replace(dangerousChars, "_");
+    if (value.length > 1e3) {
+      return "";
+    }
+    let sanitized = value;
+    sanitized = sanitized.replace(/[\\`$]/g, "");
+    const dangerousUrlProtocols = [
+      "javascript:",
+      "vbscript:",
+      "data:",
+      "about:",
+      "file:",
+      "ftp:",
+      "mailto:"
+    ].join("|");
+    const urlRegex = /url\s*\((?:[^()]|\((?:[^()]|\([^()]*\))*\))*\)/gi;
+    sanitized = sanitized.replace(urlRegex, (match) => {
+      if (dangerousUrlProtocols.split("|").some((protocol) => match.toLowerCase().includes(protocol))) {
+        return "url(about:blank)";
+      }
+      return match;
+    });
+    const scriptVectors = [
+      /expression\s*\(/gi,
+      // IE expression()
+      /\beval\s*\(/gi,
+      // eval()
+      /\balert\s*\(/gi,
+      // alert()
+      /\bdocument\./gi,
+      // document access
+      /\bwindow\./gi,
+      // window access
+      /on\w+\s*=/gi,
+      // event handlers (onclick=, etc.)
+      /<script[^>]*>/gi,
+      // <script> tags
+      /<\/script>/gi
+      // <\/script> tags
+    ];
+    for (const pattern of scriptVectors) {
+      sanitized = sanitized.replace(pattern, "");
+    }
+    const atRules = /@(?:import|charset|namespace|supports|keyframes|font-face|media|page)/gi;
+    sanitized = sanitized.replace(atRules, "");
+    sanitized = sanitized.replace(/[;]/g, "_");
+    const openBrackets = (sanitized.match(/\[/g) || []).length;
+    const closeBrackets = (sanitized.match(/\]/g) || []).length;
+    if (Math.abs(openBrackets - closeBrackets) > 3 || Math.max(openBrackets, closeBrackets) > 10) {
+      return "";
+    }
+    sanitized = sanitized.replace(/@/g, "");
+    if (sanitized.length > 500) {
+      sanitized = sanitized.substring(0, 500);
     }
-    return value;
+    return sanitized;
   }
 
   // src/core/tokenizer-core.js
@@ -221,10 +271,13 @@ hr {
 }
 
 /*
- * Add the correct text decoration in Chrome, Edge, and Safari
+ * Set default placeholder color to a semi-transparent gray
+ * Uses theme variable for customization with fallback
  */
-abbr:where([title]) {
-  text-decoration: underline dotted;
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: var(--placeholder-color, #9ca3af); /* 2 */
 }
 
 /*
@@ -367,10 +420,17 @@ input:where([type='submit']) {
 }
 
 /*
- * Add the correct vertical alignment in Chrome and Firefox
+ * Add the correct text decoration in Chrome, Edge, and Safari
  */
-progress {
-  vertical-align: baseline;
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+ * Make sure links don't get underlined in headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  text-decoration: none;
 }
 
 /*
@@ -442,14 +502,17 @@ legend {
 }
 
 /*
- * Remove default list styles
+ * 1. Use a more sensible default box-sizing strategy
  */
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* Support safe-area-inset for modern devices with notches */
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
 }
 
 /*
@@ -3151,11 +3214,12 @@ video {
   var borderRadius = {
     name: "border-radius",
     property: "visual",
-    syntax: 'visual="rounded:[value]"',
-    description: "Set border radius",
-    descriptionMs: "Tetapkan jejari sempadan",
+    syntax: 'visual="rounded:[value]" | visual="rounded-{t|b|l|r|tl|tr|bl|br}:[value]"',
+    description: "Set border radius for all corners or specific corners",
+    descriptionMs: "Tetapkan jejari sempadan untuk semua bucu atau bucu tertentu",
     category: "visual",
     usesScale: "radius",
+    supportsArbitrary: true,
     values: [
       { value: "none", css: "border-radius: var(--r-none);", description: "No rounding", descriptionMs: "Tiada pembulatan" },
       { value: "small", css: "border-radius: var(--r-small);", description: "Small radius", descriptionMs: "Jejari kecil" },
@@ -3164,8 +3228,10 @@ video {
       { value: "round", css: "border-radius: var(--r-round);", description: "Fully round", descriptionMs: "Sepenuhnya bulat" }
     ],
     examples: [
-      { code: '<div visual="rounded:medium">Rounded corners</div>', description: "Medium radius" },
-      { code: '<div visual="rounded:round">Pill shape</div>', description: "Pill" }
+      { code: '<div visual="rounded:medium">Rounded corners</div>', description: "All corners rounded" },
+      { code: '<div visual="rounded:round">Pill shape</div>', description: "Fully round" },
+      { code: '<div visual="rounded-t:medium">Top rounded</div>', description: "Top corners only" },
+      { code: '<div visual="rounded-tl:big rounded-br:big">Opposite corners</div>', description: "Specific corners" }
     ],
     footnotes: [
       {
@@ -3183,12 +3249,25 @@ video {
         description: "Round element corners from subtle to pill-shaped",
         descriptionMs: "Bulatkan sudut elemen dari halus hingga berbentuk pil",
         html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
+   <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+   <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+   <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
 </div>`,
         highlightValue: "rounded:medium"
+      },
+      {
+        title: "Directional Border Radius",
+        titleMs: "Jejari Sempadan Arah",
+        description: "Round specific corners for unique shapes",
+        descriptionMs: "Bulatkan bucu tertentu untuk bentuk unik",
+        html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded-t:medium">top</div>
+   <div space="p:small" visual="bg:primary text:white rounded-b:medium">bottom</div>
+   <div space="p:small" visual="bg:primary text:white rounded-l:medium">left</div>
+   <div space="p:small" visual="bg:primary text:white rounded-r:medium">right</div>
+</div>`,
+        highlightValue: "rounded-t:medium"
       }
     ]
   };
@@ -6458,11 +6537,11 @@ video {
     supportsArbitrary: true,
     values: [
       { value: "none", css: "box-shadow: 0 0 0 0 transparent;", description: "No ring", descriptionMs: "Tiada cincin" },
-      { value: "thin", css: "box-shadow: 0 0 0 1px var(--ring-color);", description: "Thin ring (1px)", descriptionMs: "Cincin nipis (1px)" },
-      { value: "regular", css: "box-shadow: 0 0 0 2px var(--ring-color);", description: "Regular ring (2px)", descriptionMs: "Cincin biasa (2px)" },
-      { value: "small", css: "box-shadow: 0 0 0 4px var(--ring-color);", description: "Small ring (4px)", descriptionMs: "Cincin kecil (4px)" },
-      { value: "medium", css: "box-shadow: 0 0 0 6px var(--ring-color);", description: "Medium ring (6px)", descriptionMs: "Cincin sederhana (6px)" },
-      { value: "big", css: "box-shadow: 0 0 0 8px var(--ring-color);", description: "Big ring (8px)", descriptionMs: "Cincin besar (8px)" }
+      { value: "thin", css: "box-shadow: var(--ring-inset) 0 0 0 1px var(--ss-ring-color);", description: "Thin ring (1px)", descriptionMs: "Cincin nipis (1px)" },
+      { value: "regular", css: "box-shadow: var(--ring-inset) 0 0 0 2px var(--ss-ring-color);", description: "Regular ring (2px)", descriptionMs: "Cincin biasa (2px)" },
+      { value: "small", css: "box-shadow: var(--ring-inset) 0 0 0 4px var(--ss-ring-color);", description: "Small ring (4px)", descriptionMs: "Cincin kecil (4px)" },
+      { value: "medium", css: "box-shadow: var(--ring-inset) 0 0 0 6px var(--ss-ring-color);", description: "Medium ring (6px)", descriptionMs: "Cincin sederhana (6px)" },
+      { value: "big", css: "box-shadow: var(--ring-inset) 0 0 0 8px var(--ss-ring-color);", description: "Big ring (8px)", descriptionMs: "Cincin besar (8px)" }
     ],
     examples: [
       { code: '<button visual="focus-visible:ring:small ring-color:primary">Focus me</button>', description: "Focus ring on keyboard focus" },
@@ -6492,8 +6571,8 @@ video {
     usesScale: "colors",
     supportsArbitrary: true,
     values: [
-      { value: "primary", css: "--ring-color: var(--c-primary);", description: "Primary ring color", descriptionMs: "Warna cincin utama" },
-      { value: "blue-500", css: "--ring-color: var(--c-blue-500);", description: "Blue ring color", descriptionMs: "Warna cincin biru" }
+      { value: "primary", css: "--ss-ring-color: var(--c-primary);", description: "Primary ring color", descriptionMs: "Warna cincin utama" },
+      { value: "blue-500", css: "--ss-ring-color: var(--c-blue-500);", description: "Blue ring color", descriptionMs: "Warna cincin biru" }
     ],
     examples: [
       { code: '<button visual="ring:small ring-color:primary">Colored ring</button>', description: "Ring with custom color" }
@@ -6508,9 +6587,9 @@ video {
     category: "visual",
     supportsArbitrary: true,
     values: [
-      { value: "0", css: "--ring-offset: 0px;", description: "No offset", descriptionMs: "Tiada ruang" },
-      { value: "2", css: "--ring-offset: 2px;", description: "2px offset", descriptionMs: "Ruang 2px" },
-      { value: "4", css: "--ring-offset: 4px;", description: "4px offset", descriptionMs: "Ruang 4px" }
+      { value: "0", css: "--ss-ring-offset-width: 0px;", description: "No offset", descriptionMs: "Tiada ruang" },
+      { value: "2", css: "--ss-ring-offset-width: 2px;", description: "2px offset", descriptionMs: "Ruang 2px" },
+      { value: "4", css: "--ss-ring-offset-width: 4px;", description: "4px offset", descriptionMs: "Ruang 4px" }
     ],
     examples: [
       { code: '<button visual="ring:small ring-offset:2 ring-color:primary">With offset</button>', description: "Ring with offset" }
@@ -6828,6 +6907,112 @@ video {
   };
   var visual_svg_default = svgDefinitions;
 
+  // src/definitions/visual-performance.js
+  var contentVisibility = {
+    name: "content-visibility",
+    property: "visual",
+    syntax: 'visual="content-visibility:[value]"',
+    description: "Optimize rendering by skipping off-screen content",
+    descriptionMs: "Optimumkan rendering dengan melangkau kandungan luar skrin",
+    category: "visual",
+    values: [
+      { value: "visible", css: "content-visibility: visible;", description: "Render all content", descriptionMs: "Render semua kandungan" },
+      { value: "auto", css: "content-visibility: auto;", description: "Skip when off-screen", descriptionMs: "Langkau bila luar skrin" },
+      { value: "hidden", css: "content-visibility: hidden;", description: "Never render off-screen", descriptionMs: "Jangan render luar skrin" }
+    ],
+    examples: [
+      { code: '<section visual="content-visibility:auto">Large list</section>', description: "Auto-optimize large content" },
+      { code: '<div visual="content-visibility:hidden">Hidden until needed</div>', description: "Hide until revealed" }
+    ],
+    preview: [
+      {
+        title: "Content Visibility",
+        titleMs: "Ketampakan Kandungan",
+        description: "Performance optimization for off-screen content",
+        descriptionMs: "Pengoptimuman prestasi untuk kandungan luar skrin",
+        html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
+ </div>`,
+        highlightValue: "content-visibility:auto"
+      }
+    ]
+  };
+  var contain = {
+    name: "contain",
+    property: "visual",
+    syntax: 'visual="contain:[value]"',
+    description: "Isolate element rendering for performance",
+    descriptionMs: "Pencil rendering elemen untuk prestasi",
+    category: "visual",
+    values: [
+      { value: "none", css: "contain: none;", description: "No containment", descriptionMs: "Tiada pengandungan" },
+      { value: "strict", css: "contain: strict;", description: "Full containment", descriptionMs: "Pengandungan penuh" },
+      { value: "content", css: "contain: content;", description: "Content containment", descriptionMs: "Pengandungan kandungan" },
+      { value: "size", css: "contain: size;", description: "Size containment", descriptionMs: "Pengandungan saiz" },
+      { value: "layout", css: "contain: layout;", description: "Layout containment", descriptionMs: "Pengandungan susun atur" },
+      { value: "style", css: "contain: style;", description: "Style containment", descriptionMs: "Pengandungan gaya" },
+      { value: "paint", css: "contain: paint;", description: "Paint containment", descriptionMs: "Pengandungan lukis" }
+    ],
+    examples: [
+      { code: '<div visual="contain:strict">Isolated rendering</div>', description: "Full containment" },
+      { code: '<div visual="contain:content">Content isolation</div>', description: "Content only" }
+    ],
+    preview: [
+      {
+        title: "Contain",
+        titleMs: "Mengandung",
+        description: "Isolate element from rest of page for performance",
+        descriptionMs: "Pencil elemen dari halaman lain untuk prestasi",
+        html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">strict</div>
+ </div>`,
+        highlightValue: "contain:strict"
+      }
+    ]
+  };
+  var writingMode = {
+    name: "writing-mode",
+    property: "visual",
+    syntax: 'visual="writing-mode:[value]"',
+    description: "Set writing direction for RTL/vertical text",
+    descriptionMs: "Tetapkan arah penulisan untuk teks RTL/menegak",
+    category: "visual",
+    values: [
+      { value: "horizontal-tb", css: "writing-mode: horizontal-tb;", description: "Left to right", descriptionMs: "Kiri ke kanan" },
+      { value: "vertical-rl", css: "writing-mode: vertical-rl;", description: "Top to bottom RTL", descriptionMs: "Atas ke bawah RTL" },
+      { value: "vertical-lr", css: "writing-mode: vertical-lr;", description: "Top to bottom LTR", descriptionMs: "Atas ke bawah LTR" },
+      { value: "sideways-rl", css: "writing-mode: sideways-rl;", description: "Sideways RTL", descriptionMs: "Menyerong RTL" },
+      { value: "sideways-lr", css: "writing-mode: sideways-lr;", description: "Sideways LTR", descriptionMs: "Menyerong LTR" }
+    ],
+    examples: [
+      { code: '<div visual="writing-mode:vertical-rl">Vertical text</div>', description: "Vertical text RTL" },
+      { code: '<div visual="writing-mode:horizontal-tb">Horizontal text</div>', description: "Horizontal text LTR" }
+    ],
+    preview: [
+      {
+        title: "Writing Mode",
+        titleMs: "Mod Penulisan",
+        description: "Control text direction and orientation",
+        descriptionMs: "Kawal arah dan orientasi teks",
+        html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
+ </div>`,
+        highlightValue: "writing-mode:vertical-rl"
+      }
+    ]
+  };
+  var performanceDefinitions = {
+    contentVisibility,
+    contain,
+    writingMode
+  };
+  var visual_performance_default = performanceDefinitions;
+
   // src/definitions/index.js
   var allVisualDefinitions = {
     ...visual_default,
@@ -6840,7 +7025,8 @@ video {
     ...visual_transforms_default,
     ...visual_borders_default,
     ...visual_divide_default,
-    ...visual_svg_default
+    ...visual_svg_default,
+    ...visual_performance_default
   };
   function buildAllMaps() {
     return {
@@ -6898,6 +7084,16 @@ video {
       css += `  --c-${key}: ${value};
 `;
     }
+    if (theme.placeholder) {
+      css += `  --placeholder-color: ${theme.placeholder};
+`;
+    } else {
+      css += "  --placeholder-color: #9ca3af;\n";
+    }
+    css += "  --gradient-from: transparent;\n";
+    css += "  --gradient-via: transparent;\n";
+    css += "  --gradient-to: transparent;\n";
+    css += "  --gradient-stops: var(--gradient-from), var(--gradient-via), var(--gradient-to);\n";
     for (const [key, value] of Object.entries(theme.zIndex)) {
       css += `  --z-${key}: ${value};
 `;
@@ -7025,6 +7221,10 @@ video {
       css += `  --tw-font-${key}: ${value};
 `;
     }
+    css += "  --ss-divide-x-reverse: 0;\n";
+    css += "  --ss-divide-y-reverse: 0;\n";
+    css += "  --ring-inset: ;\n";
+    css += "  --ss-ring-color: var(--c-primary);\n";
     css += "}\n\n";
     return css;
   }
@@ -7130,6 +7330,31 @@ video {
       const cssValue = isArbitrary ? value.replace(/_/g, " ") : value;
       return `object-position: ${cssValue};`;
     }
+    if (property === "content-visibility") {
+      return `content-visibility: ${value};`;
+    }
+    if (property === "contain") {
+      const containMap = {
+        "none": "none",
+        "strict": "strict",
+        "content": "content",
+        "size": "size",
+        "layout": "layout",
+        "style": "style",
+        "paint": "paint"
+      };
+      const cssValue = isArbitrary ? value : containMap[value] || value;
+      return `contain: ${cssValue};`;
+    }
+    if (property === "writing") {
+      const writingMap = {
+        "horizontal-tb": "horizontal-tb",
+        "vertical-rl": "vertical-rl",
+        "vertical-lr": "vertical-lr"
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, " ") : writingMap[value] || value;
+      return `writing-mode: ${cssValue};`;
+    }
     const positioningPercentages = {
       "full": "100%",
       "half": "50%",
@@ -7149,7 +7374,7 @@ video {
     };
     const resolvePositioningValue = (val, arb) => {
       if (arb) return val;
-      if (val === "0") return "0";
+      if (!val || val === "0") return "0";
       if (val.startsWith("-")) {
         const positiveVal = val.substring(1);
         if (positioningPercentages[positiveVal]) {
@@ -7349,8 +7574,8 @@ video {
     if (isArbitrary) {
       cssValue = value;
     } else {
-      const isNegative = value.startsWith("-");
-      const cleanValue = isNegative ? value.substring(1) : value;
+      const isNegative = value && value.startsWith("-");
+      const cleanValue = isNegative ? value.substring(1) : value || "";
       let baseValue;
       if (cleanValue.startsWith("tw-")) {
         const twValue = cleanValue.slice(3);
@@ -7417,7 +7642,7 @@ video {
       },
       // Background Image
       "bg-image": () => {
-        if (value === "none") return "background-image: none;";
+        if (!value || value === "none") return "background-image: none;";
         if (value.startsWith("gradient-to-")) {
           const directionMap = {
             "t": "to top",
@@ -7659,32 +7884,32 @@ video {
       // Border width
       "border-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-width: ${cssValue}; border-style: solid;`;
+        return `border-width: ${cssValue};`;
       },
       // Border width - directional  
       "border-t-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-top-width: ${cssValue}; border-top-style: solid;`;
+        return `border-top-width: ${cssValue};`;
       },
       "border-b-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-bottom-width: ${cssValue}; border-bottom-style: solid;`;
+        return `border-bottom-width: ${cssValue};`;
       },
       "border-l-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-left-width: ${cssValue}; border-left-style: solid;`;
+        return `border-left-width: ${cssValue};`;
       },
       "border-r-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-right-width: ${cssValue}; border-right-style: solid;`;
+        return `border-right-width: ${cssValue};`;
       },
       "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;`;
+        return `border-left-width: ${cssValue}; border-right-width: ${cssValue};`;
       },
       "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;`;
+        return `border-top-width: ${cssValue}; border-bottom-width: ${cssValue};`;
       },
       // Border style
       "border-style": () => {
@@ -7694,6 +7919,39 @@ video {
       "rounded": () => {
         return `border-radius: var(--r-${value});`;
       },
+      // Directional border radius
+      "rounded-t": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-left-radius: ${cssValue}; border-top-right-radius: ${cssValue};`;
+      },
+      "rounded-b": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-bottom-left-radius: ${cssValue}; border-bottom-right-radius: ${cssValue};`;
+      },
+      "rounded-l": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-left-radius: ${cssValue}; border-bottom-left-radius: ${cssValue};`;
+      },
+      "rounded-r": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-right-radius: ${cssValue}; border-bottom-right-radius: ${cssValue};`;
+      },
+      "rounded-tl": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-left-radius: ${cssValue};`;
+      },
+      "rounded-tr": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-right-radius: ${cssValue};`;
+      },
+      "rounded-bl": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-bottom-left-radius: ${cssValue};`;
+      },
+      "rounded-br": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-bottom-right-radius: ${cssValue};`;
+      },
       // =====================
       // DIVIDE UTILITIES
       // =====================
@@ -7720,16 +7978,16 @@ video {
       // Divide width - all sides
       "divide-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-width: ${cssValue}; border-style: solid;`;
+        return `border-top-width: calc(${cssValue} * (1 - var(--ss-divide-y-reverse))); border-bottom-width: calc(${cssValue} * var(--ss-divide-y-reverse)); border-left-width: calc(${cssValue} * (1 - var(--ss-divide-x-reverse))); border-right-width: calc(${cssValue} * var(--ss-divide-x-reverse));`;
       },
       // 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;`;
+        return `border-right-width: calc(${cssValue} * var(--ss-divide-x-reverse)); border-left-width: calc(${cssValue} * (1 - var(--ss-divide-x-reverse)));`;
       },
       "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;`;
+        return `border-bottom-width: calc(${cssValue} * var(--ss-divide-y-reverse)); border-top-width: calc(${cssValue} * (1 - var(--ss-divide-y-reverse)));`;
       },
       // Divide style
       "divide-style": () => {
@@ -7742,6 +8000,9 @@ video {
       },
       // Outline Color
       "outline": () => {
+        if (value === "none") {
+          return "outline: none;";
+        }
         const cssValue = resolveColorValue(value, isArbitrary);
         return `outline-color: ${cssValue};`;
       },
@@ -7787,7 +8048,11 @@ video {
           "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);`;
+        return `--ss-ring-width: ${width2}; box-shadow: var(--ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--ss-ring-color);`;
+      },
+      // Ring Inset
+      "ring-inset": () => {
+        return "--ring-inset: inset;";
       },
       // Box shadow
       "shadow": () => {
@@ -8569,69 +8834,122 @@ video {
     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 isValidCSSRule(declaration) {
+    if (!declaration || typeof declaration !== "string") {
+      return false;
     }
-    if (state && state !== "dark") {
+    declaration = declaration.trim();
+    if (!declaration) return false;
+    if (!declaration.endsWith(";")) return false;
+    const parts = declaration.substring(0, declaration.length - 1).split(":");
+    if (parts.length < 2) return false;
+    const property = parts[0].trim();
+    const value = parts.slice(1).join(":").trim();
+    if (!property || !value) return false;
+    return true;
+  }
+  function generateRule(token, config, skipDarkWrapper = false, interactIds = /* @__PURE__ */ new Set()) {
+    try {
+      if (!token || typeof token !== "object") {
+        console.warn("[SenangStart] Invalid token object:", token);
+        return "";
+      }
+      const { raw, attrType, breakpoint, state } = token;
+      if (!attrType || typeof attrType !== "string") {
+        console.warn("[SenangStart] Invalid token attrType:", attrType);
+        return "";
+      }
+      if (!raw || typeof raw !== "string") {
+        console.warn("[SenangStart] Invalid token raw:", raw);
+        return "";
+      }
+      let cssDeclaration = "";
+      switch (attrType) {
+        case "layout":
+          try {
+            cssDeclaration = generateLayoutRule(token, config);
+          } catch (e) {
+            console.warn(`[SenangStart] Error generating layout rule for "${raw}": ${e.message}`);
+            return "";
+          }
+          break;
+        case "space":
+          try {
+            cssDeclaration = generateSpaceRule(token, config);
+          } catch (e) {
+            console.warn(`[SenangStart] Error generating space rule for "${raw}": ${e.message}`);
+            return "";
+          }
+          break;
+        case "visual":
+          try {
+            cssDeclaration = generateVisualRule(token, config);
+          } catch (e) {
+            console.warn(`[SenangStart] Error generating visual rule for "${raw}": ${e.message}`);
+            return "";
+          }
+          break;
+        default:
+          console.warn(`[SenangStart] Unknown attrType: ${attrType}`);
+          return "";
+      }
+      if (!cssDeclaration) return "";
+      if (!isValidCSSRule(cssDeclaration)) {
+        console.warn(`[SenangStart] Invalid CSS rule generated for "${raw}": ${cssDeclaration}`);
+        return "";
+      }
+      const isDivide = raw && raw.startsWith("divide");
+      let selector = "";
       if (isDivide) {
-        selector = `[${attrType}~="${raw}"] > :not([hidden]) ~ :not([hidden]):${state}`;
+        selector = `[${attrType}~="${raw}"] > :not([hidden]) ~ :not([hidden])`;
       } else {
-        const getStateSelector = (s) => {
-          const map = {
-            "expanded": '[aria-expanded="true"]',
-            "selected": '[aria-selected="true"]',
-            "disabled": ":disabled"
+        selector = `[${attrType}~="${raw}"]`;
+      }
+      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 map[s] || `:${s}`;
-        };
-        const selectors = [];
-        selectors.push(`${selector}${getStateSelector(state)}`);
-        const groupTriggers = {
-          "hover": "hoverable",
-          "focus": "focusable",
-          "focus-visible": "focusable",
-          "active": "pressable",
-          "expanded": "expandable",
-          "selected": "selectable"
-        };
-        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);
+          const selectors = [];
+          selectors.push(`${selector}${getStateSelector(state)}`);
+          const groupTriggers = {
+            "hover": "hoverable",
+            "focus": "focusable",
+            "focus-visible": "focusable",
+            "active": "pressable",
+            "expanded": "expandable",
+            "selected": "selectable"
+          };
+          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");
         }
-        selector = selectors.join(",\n");
       }
-    }
-    return `${selector} { ${cssDeclaration} }
+      return `${selector} { ${cssDeclaration} }
 `;
+    } catch (e) {
+      console.warn(`[SenangStart] Error in generateRule: ${e.message}`);
+      return "";
+    }
   }
   function getDarkModeSelector(config) {
     const darkMode = config.darkMode || "media";
@@ -8643,13 +8961,33 @@ video {
     }
     return null;
   }
-  function generateCSS(tokens, config) {
-    let css = "";
-    css += generateCSSVariables(config);
-    if (config.preflight !== false) {
-      css += generatePreflight(config);
-    }
-    css += `/* SenangStart CSS - Animation Keyframes */
+  function generateCSSWithErrors(tokens, config) {
+    const errors = [];
+    try {
+      let css = "";
+      if (!config || typeof config !== "object") {
+        errors.push({ type: "config", message: "Invalid config provided" });
+        return { css: "", errors };
+      }
+      if (!Array.isArray(tokens)) {
+        errors.push({ type: "tokens", message: "Invalid tokens provided" });
+        return { css: "", errors };
+      }
+      try {
+        css += generateCSSVariables(config);
+      } catch (e) {
+        errors.push({ type: "variables", message: e.message });
+        console.warn(`[SenangStart] Error generating CSS variables: ${e.message}`);
+      }
+      if (config.preflight !== false) {
+        try {
+          css += generatePreflight(config);
+        } catch (e) {
+          errors.push({ type: "preflight", message: e.message });
+          console.warn(`[SenangStart] Error generating preflight: ${e.message}`);
+        }
+      }
+      css += `/* SenangStart CSS - Animation Keyframes */
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
@@ -8666,93 +9004,178 @@ video {
 
 /* 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] = [];
+      const baseTokens = [];
+      const darkTokens = [];
+      const breakpointTokens = {};
+      const { screens } = config.theme || {};
+      if (screens && typeof screens === "object") {
+        for (const bp of Object.keys(screens)) {
+          breakpointTokens[bp] = [];
         }
-        breakpointTokens[token.breakpoint].push(token);
-      } else {
-        baseTokens.push(token);
       }
-    }
-    const interactIds = /* @__PURE__ */ new Set();
-    for (const token of tokens) {
-      if (token.attrType === "interact") {
-        interactIds.add(token.raw);
+      for (const token of tokens) {
+        try {
+          if (token && typeof token === "object") {
+            if (token.state === "dark") {
+              darkTokens.push(token);
+            } else if (token.breakpoint) {
+              if (!breakpointTokens[token.breakpoint]) {
+                breakpointTokens[token.breakpoint] = [];
+              }
+              breakpointTokens[token.breakpoint].push(token);
+            } else {
+              baseTokens.push(token);
+            }
+          } else {
+            errors.push({ type: "token_format", token, message: "Token is not an object" });
+          }
+        } catch (e) {
+          errors.push({ type: "token_processing", token: token?.raw, message: e.message });
+          console.warn(`[SenangStart] Error processing token: ${e.message}`);
+        }
       }
-    }
-    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());
+      const interactIds = /* @__PURE__ */ new Set();
+      for (const token of tokens) {
+        try {
+          if (token && token.attrType === "interact" && token.raw) {
+            interactIds.add(token.raw);
+          }
+        } catch (e) {
+          errors.push({ type: "interact_collection", token: token?.raw, message: e.message });
+          console.warn(`[SenangStart] Error collecting interact IDs: ${e.message}`);
         }
-        baseDisplayTokens.get(token.attrType).add(token.raw);
       }
-    }
-    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 displayProps = ["flex", "grid", "inline-flex", "inline-grid", "block", "inline", "hidden", "contents"];
+      const baseDisplayTokens = /* @__PURE__ */ new Map();
+      for (const token of baseTokens) {
+        try {
+          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);
+          }
+        } catch (e) {
+          errors.push({ type: "display_track", token: token?.raw, message: e.message });
+          console.warn(`[SenangStart] Error tracking display properties: ${e.message}`);
+        }
+      }
+      for (const token of baseTokens) {
+        try {
+          const rule = generateRule(token, config, false, interactIds);
+          if (rule) {
+            css += rule;
+          } else {
+            errors.push({ type: "rule_generation", token: token.raw, message: "No rule generated" });
+          }
+        } catch (e) {
+          errors.push({ type: "rule_generation", token: token.raw, message: e.message });
+          console.warn(`[SenangStart] Error generating base rule: ${e.message}`);
+        }
+      }
+      for (const [bp, bpTokens] of Object.entries(breakpointTokens)) {
+        try {
+          if (bpTokens.length > 0) {
+            const screenWidth = screens && screens[bp] ? screens[bp] : bp;
+            css += `
+@media (min-width: ${screenWidth}) {
 `;
-        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; }
+            const processedResetSelectors = /* @__PURE__ */ new Set();
+            for (const bpToken of bpTokens) {
+              try {
+                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);
+                      processedResetSelectors.add(bpToken.raw);
+                    }
+                  }
+                }
+              } catch (e) {
+                errors.push({ type: "display_reset", token: bpToken.raw, message: e.message });
+                console.warn(`[SenangStart] Error generating display reset: ${e.message}`);
               }
             }
+            for (const token of bpTokens) {
+              try {
+                const rule = generateRule(token, config, false, interactIds);
+                if (rule) {
+                  css += "  " + rule;
+                } else {
+                  errors.push({ type: "responsive_rule", token: token.raw, message: "No rule generated" });
+                }
+              } catch (e) {
+                errors.push({ type: "responsive_rule", token: token.raw, message: e.message });
+                console.warn(`[SenangStart] Error generating responsive rule: ${e.message}`);
+              }
+            }
+            css += "}\n";
           }
+        } catch (e) {
+          errors.push({ type: "breakpoint_generation", message: `Error generating breakpoint ${bp}: ${e.message}` });
+          console.warn(`[SenangStart] Error generating breakpoint ${bp}: ${e.message}`);
         }
-        for (const token of bpTokens) {
-          css += "  " + generateRule(token, config, false, interactIds);
-        }
-        css += "}\n";
       }
-    }
-    if (darkTokens.length > 0) {
-      const darkMode = config.darkMode || "media";
-      const darkSelector = getDarkModeSelector(config);
-      if (darkMode === "media") {
-        css += `
+      if (darkTokens.length > 0) {
+        try {
+          const darkMode = config.darkMode || "media";
+          const darkSelector = getDarkModeSelector(config);
+          if (darkMode === "media") {
+            css += `
 /* Dark Mode (prefers-color-scheme) */
 `;
-        css += `@media (prefers-color-scheme: dark) {
+            css += `@media (prefers-color-scheme: dark) {
 `;
-        for (const token of darkTokens) {
-          css += "  " + generateRule(token, config, true, interactIds);
-        }
-        css += "}\n";
-      } else {
-        css += `
+            for (const token of darkTokens) {
+              try {
+                const rule = generateRule(token, config, true, interactIds);
+                if (rule) {
+                  css += "  " + rule;
+                } else {
+                  errors.push({ type: "dark_rule", token: token.raw, message: "No rule generated" });
+                }
+              } catch (e) {
+                errors.push({ type: "dark_rule", token: token.raw, message: e.message });
+                console.warn(`[SenangStart] Error generating dark rule (media): ${e.message}`);
+              }
+            }
+            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;
+            for (const token of darkTokens) {
+              try {
+                const baseRule = generateRule(token, config, true, interactIds);
+                if (baseRule) {
+                  const wrappedRule = baseRule.replace(/^(\[[^\]]+\])/, `${darkSelector} $1`);
+                  css += wrappedRule;
+                } else {
+                  errors.push({ type: "dark_rule", token: token.raw, message: "No rule generated" });
+                }
+              } catch (e) {
+                errors.push({ type: "dark_rule", token: token.raw, message: e.message });
+                console.warn(`[SenangStart] Error generating dark rule (selector): ${e.message}`);
+              }
+            }
+          }
+        } catch (e) {
+          errors.push({ type: "dark_mode_generation", message: e.message });
+          console.warn(`[SenangStart] Error generating dark mode rules: ${e.message}`);
         }
       }
+      return { css, errors };
+    } catch (e) {
+      errors.push({ type: "fatal", message: e.message });
+      console.error(`[SenangStart] Fatal error in generateCSSWithErrors: ${e.message}`);
+      return { css: "", errors };
     }
+  }
+  function generateCSS(tokens, config) {
+    const { css } = generateCSSWithErrors(tokens, config);
     return css;
   }
 
@@ -8953,6 +9376,8 @@ video {
         // Laptop
         "desk": "1280px",
         // Desktop
+        "print": "print",
+        // Print media query
         // Tailwind Compatibility
         "tw-sm": "640px",
         "tw-md": "768px",
@@ -8961,6 +9386,8 @@ video {
         "tw-2xl": "1536px"
       },
       // 7. COLORS: Palette Scales
+      // Placeholder color for form inputs
+      placeholder: "#9ca3af",
       colors: {
         // Base colors
         "white": "#FFFFFF",