@bookklik/senangstart-css 0.2.4 → 0.2.6

package/.agent/workflows/test.md

@@ -0,0 +1,103 @@
+---
+description: Run tests including unit, integration, sync, and coverage reports
+---
+
+// turbo-all
+
+# Testing Workflow
+
+## Run All Tests
+
+// turbo
+1. Execute the full test suite:
+```bash
+npm test
+```
+
+## Unit Tests Only
+
+// turbo
+1. Run unit tests:
+```bash
+npm run test:unit
+```
+
+Unit tests cover:
+- `tests/unit/compiler/` - CSS generators and parser tests
+- `tests/unit/config/` - Configuration loading tests
+- `tests/unit/convert-tailwind.test.js` - TW conversion tests
+- `tests/unit/security.test.js` - Security validation tests
+
+## Integration Tests
+
+// turbo
+1. Run integration tests:
+```bash
+npm run test:integration
+```
+
+Integration tests in `tests/integration/` verify end-to-end compilation.
+
+## Sync Tests
+
+// turbo
+1. Run sync tests:
+```bash
+npm run test:sync
+```
+
+Sync tests in `tests/sync/` verify definition-to-engine parity.
+
+## Watch Mode
+
+// turbo
+1. Run tests in watch mode for TDD:
+```bash
+npm run test:watch
+```
+
+## Coverage Report
+
+1. Generate test coverage report:
+```bash
+npm run test:coverage
+```
+
+This creates:
+- Console text report
+- HTML report in `coverage/` directory
+
+## Test File Structure
+
+```
+tests/
+├── helpers/           # Test utilities
+├── integration/       # End-to-end tests
+├── sync/              # Definition sync tests
+└── unit/
+    ├── compiler/
+    │   ├── generators/
+    │   │   ├── 3d-transforms.test.js
+    │   │   ├── css.test.js
+    │   │   └── html.test.js
+    │   └── parser.test.js
+    ├── config/
+    │   └── config.test.js
+    ├── convert-tailwind.test.js
+    └── security.test.js
+```
+
+## Writing New Tests
+
+1. Create test file in appropriate `tests/` subdirectory
+2. Use Node.js built-in test runner:
+```javascript
+import { test, describe } from 'node:test';
+import assert from 'node:assert';
+
+describe('MyFeature', () => {
+  test('should do something', () => {
+    assert.strictEqual(actual, expected);
+  });
+});
+```

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", "active", "disabled", "dark"];
+  var STATES = ["hover", "focus", "focus-visible", "active", "disabled", "dark"];
   var LAYOUT_KEYWORDS = [
     "flex",
     "grid",
@@ -171,22 +171,54 @@
     return token;
   }
 
-  // src/cdn/jit.js
+  // 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",
-          "big": "32px",
-          "giant": "64px",
-          "vast": "128px"
+          "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",
@@ -559,6 +591,15 @@
           "mid": "50",
           "high": "100",
           "top": "9999"
+        },
+        ring: {
+          "none": "0px",
+          "thin": "1px",
+          "regular": "2px",
+          "thick": "3px",
+          "small": "4px",
+          "medium": "6px",
+          "big": "8px"
         }
       },
       // Dark mode configuration
@@ -581,7 +622,8 @@
           fontWeight: { type: "object" },
           screens: { type: "object" },
           colors: { type: "object" },
-          zIndex: { type: "object" }
+          zIndex: { type: "object" },
+          ring: { type: "object" }
         }
       },
       darkMode: { type: "string", enum: ["media", "selector"] },
@@ -675,6 +717,18 @@
         css += `  --z-${key}: ${value};
 `;
       }
+      if (theme.ring) {
+        for (const [key, value] of Object.entries(theme.ring)) {
+          css += `  --ring-${key}: ${value};
+`;
+        }
+      }
+      css += `  --ring-color: var(--c-primary);
+`;
+      css += `  --ring-offset: 0px;
+`;
+      css += `  --ring-offset-color: #fff;
+`;
       const twSpacing = {
         "0": "0px",
         "px": "1px",
@@ -1306,6 +1360,24 @@ img, video {
         };
         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};`
+        };
+        return propMap[property] || "";
+      }
       let cssValue;
       if (isArbitrary) {
         cssValue = value;
@@ -2102,6 +2174,80 @@ img, video {
           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;";
+          }
+          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": () => {
@@ -2194,23 +2340,22 @@ img, video {
           break;
       }
       if (!cssDeclaration) return "";
-      let selector = `[${attrType}~="${raw}"]`;
-      if (token.state && token.state !== "dark") {
-        selector += `:${token.state}`;
-      }
-      let rule = `${selector} { ${cssDeclaration} }
-`;
-      if (token.state === "dark") {
-        rule = `:where(.dark) ${rule}`;
+      const isDivide = raw.startsWith("divide") && !raw.includes(":reverse");
+      let selector = "";
+      if (isDivide) {
+        selector = `[visual~="${raw}"] > :not([hidden]) ~ :not([hidden])`;
+      } else {
+        selector = `[${attrType}~="${raw}"]`;
       }
-      if (token.breakpoint) {
-        const screenWidth = defaultConfig.theme.screens[token.breakpoint];
-        if (screenWidth) {
-          return `@media (min-width: ${screenWidth}) { ${rule} }
-`;
+      if (token.state && token.state !== "dark") {
+        if (isDivide) {
+          selector = `[visual~="${raw}"] > :not([hidden]) ~ :not([hidden]):${token.state}`;
+        } else {
+          selector += `:${token.state}`;
         }
       }
-      return rule;
+      return `${selector} { ${cssDeclaration} }
+`;
     }
     function scanDOM() {
       const tokens = {