@bookklik/senangstart-css 0.2.10 → 0.2.12

package/dist/senangstart-css.js

@@ -39,15 +39,60 @@
     if (typeof value !== "string") {
       return "";
     }
+    if (value.length > 1e3) {
+      return "";
+    }
     let sanitized = value;
-    const dangerousChars = /[;]/g;
-    sanitized = sanitized.replace(dangerousChars, "_");
-    const atRules = /@import|@charset|@namespace|@supports|@keyframes/gi;
+    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, "");
-    const expression = /expression\s*\(/gi;
-    sanitized = sanitized.replace(expression, "");
-    const dangerousUrls = /(url\s*\(\s*['"]?)(javascript:|data:)([^)]*\))/gi;
-    sanitized = sanitized.replace(dangerousUrls, "$1about:blank$3");
+    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 sanitized;
   }
 
@@ -6492,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" },
@@ -6526,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" }
@@ -6542,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" }
@@ -7178,7 +7223,8 @@ video {
     }
     css += "  --ss-divide-x-reverse: 0;\n";
     css += "  --ss-divide-y-reverse: 0;\n";
-    css += "  --ring-inset: 0 0 0 0;\n";
+    css += "  --ring-inset: ;\n";
+    css += "  --ss-ring-color: var(--c-primary);\n";
     css += "}\n\n";
     return css;
   }
@@ -7328,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]) {
@@ -7528,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);
@@ -7596,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",
@@ -7954,6 +8000,9 @@ video {
       },
       // Outline Color
       "outline": () => {
+        if (value === "none") {
+          return "outline: none;";
+        }
         const cssValue = resolveColorValue(value, isArbitrary);
         return `outline-color: ${cssValue};`;
       },
@@ -7999,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(--ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--c-primary);`;
+        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": () => {
@@ -8781,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";
@@ -8855,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); }
 }
@@ -8878,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;
   }