@bookklik/senangstart-css 0.2.7 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/senangstart-css.js +9052 -2142
  2. package/dist/senangstart-css.min.js +1207 -119
  3. package/dist/senangstart-tw.js +170 -73
  4. package/dist/senangstart-tw.min.js +1 -1
  5. package/docs/guide/configuration.md +2 -2
  6. package/docs/guide/states.md +60 -0
  7. package/docs/ms/guide/configuration.md +2 -2
  8. package/docs/ms/guide/states.md +60 -0
  9. package/docs/ms/reference/colors.md +2 -2
  10. package/docs/ms/reference/space/height.md +10 -10
  11. package/docs/ms/reference/space/width.md +12 -12
  12. package/docs/public/assets/senangstart-css.min.js +1207 -119
  13. package/docs/public/llms.txt +28 -0
  14. package/docs/reference/colors.md +2 -2
  15. package/docs/reference/space/height.md +10 -10
  16. package/docs/reference/space/width.md +12 -12
  17. package/package.json +1 -1
  18. package/public/senangstart.css +1196 -0
  19. package/scripts/convert-tailwind.js +191 -68
  20. package/scripts/generate-llms-txt.js +28 -0
  21. package/src/cdn/senangstart-engine.js +36 -2268
  22. package/src/cdn/tw-conversion-engine.js +203 -74
  23. package/src/compiler/generators/css.js +309 -249
  24. package/src/compiler/parser.js +14 -4
  25. package/src/compiler/tokenizer.js +0 -1
  26. package/src/config/defaults.js +1 -1
  27. package/src/core/constants.js +5 -3
  28. package/src/core/tokenizer-core.js +3 -58
  29. package/src/definitions/index.js +3 -2
  30. package/src/definitions/layout.js +6 -2
  31. package/src/definitions/space.js +45 -19
  32. package/src/index.js +47 -0
  33. package/src/utils/common.js +27 -0
  34. package/templates/senangstart.config.js +1 -1
  35. package/tests/helpers/test-utils.js +1 -1
  36. package/tests/integration/compiler.test.js +12 -1
  37. package/tests/unit/compiler/generators/css.coverage.test.js +833 -0
  38. package/tests/unit/compiler/generators/css.test.js +1418 -1
  39. package/tests/unit/compiler/generators/preflight.test.js +31 -0
  40. package/tests/unit/compiler/parser.test.js +26 -0
  41. package/tests/unit/config/defaults.test.js +2 -2
  42. package/tests/unit/convert-tailwind.cli.test.js +95 -0
  43. package/tests/unit/convert-tailwind.coverage.test.js +225 -0
  44. package/tests/unit/convert-tailwind.test.js +49 -20
  45. package/tests/unit/core/tokenizer-core.test.js +102 -0
  46. package/tests/unit/definitions/index.test.js +108 -0
  47. package/tests/unit/definitions/layout_definitions.test.js +40 -0
  48. package/tests/unit/utils/common.test.js +26 -0
  49. package/scripts/bundle-jit.js +0 -45
package/docs/public/llms.txt CHANGED
@@ -73,6 +73,34 @@ Example: `space="p:small tab:p:medium lap:p:big"`
73
73
  - `active:`, `disabled:`, `group-hover:`
74
74
  - `dark:`: `visual="bg:white dark:bg:slate-900"`
75
75
 
76
+ ## State Capabilities & Interaction
77
+
78
+ React to parent ("Group") or sibling ("Peer") states across all attributes.
79
+
80
+ ### 1. Group Capabilities
81
+ Add these to the `layout` attribute of a parent element:
82
+ - `hoverable`: Adds `:hover` support.
83
+ - `focusable`: Adds `:focus-within` support.
84
+ - `pressable`: Adds `:active` support.
85
+ - `expandable`: Reacts to `[aria-expanded="true"]`.
86
+ - `selectable`: Reacts to `[aria-selected="true"]`.
87
+
88
+ **Example:**
89
+ ```html
90
+ <div layout="flex hoverable" visual="bg:white">
91
+ <p visual="text:grey hover:text:primary">Hover parent to change me</p>
92
+ </div>
93
+ ```
94
+
95
+ ### 2. Peer Interactions
96
+ Use `interact="[id]"` on the trigger and `listens="[id]"` on the receiver.
97
+
98
+ **Example:**
99
+ ```html
100
+ <button layout="hoverable" interact="my-menu">Trigger</button>
101
+ <div layout="hidden hover:block" listens="my-menu">Target</div>
102
+ ```
103
+
76
104
  ## Configuration
77
105
  Use `senangstart.config.js` to override defaults.
78
106
  ```js
package/docs/reference/colors.md CHANGED
@@ -12,7 +12,7 @@ Complete reference for the color palette.
12
12
  | `dark` | #3E4A5D | **Brand dark** |
13
13
  | `light` | #DBEAFE | **Brand light** |
14
14
  | `primary` | #2563EB | **Brand primary** |
15
- | `secondary` | #DBEAFE | **Brand secondary** |
15
+ | `secondary` | #1E40AF | **Brand secondary** |
16
16
  | `success` | #10B981 | Positive feedback |
17
17
  | `warning` | #F59E0B | Cautions |
18
18
  | `danger` | #EF4444 | Errors |
@@ -104,7 +104,7 @@ Add custom colors in `senangstart.config.js`:
104
104
  export default {
105
105
  theme: {
106
106
  colors: {
107
- 'brand': '#8B5CF6',
107
+ 'brand': '#38BDF8',
108
108
  'accent': '#EC4899',
109
109
  'muted': '#9CA3AF',
110
110
  'surface': '#F9FAFB'
package/docs/reference/space/height.md CHANGED
@@ -17,16 +17,16 @@ space="h:[value]"
17
17
 
18
18
  ## Scale Values
19
19
 
20
- `none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`
20
+ `none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`, `full`, `half`, `third`, `third-2x`, `quarter`, `quarter-2x`, `quarter-3x`, `1/1`, `1/2`, `1/3`, `2/3`, `1/4`, `2/4`, `3/4`
21
21
 
22
22
  ## Examples
23
23
 
24
24
  ```html
25
+ <div space="h:full">Full height</div>
26
+ <div space="h:half">Half height</div>
25
27
  <div space="h:[100vh]">Full viewport height</div>
26
28
  <div space="min-h:[400px]">Min height</div>
27
29
  <div space="h:max">Content height</div>
28
- <div space="max-h:max">Max content height</div>
29
- <div space="min-h:min">Min content height</div>
30
30
  ```
31
31
 
32
32
  ## Preview
@@ -36,11 +36,11 @@ space="h:[value]"
36
36
  ### Height Control
37
37
 
38
38
  <div layout="flex col" space="g:medium">
39
- <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="h:[100%]"</code> - Set fixed heights</p>
39
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="h:full"</code> - Set fixed heights</p>
40
40
  <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
41
- <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
42
- <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
43
- <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
41
+ <div space="h:full p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:full</div>
42
+ <div space="h:third-2x p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:third-2x</div>
43
+ <div space="h:half p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:half</div>
44
44
  </div>
45
45
  </div>
46
46
 
@@ -49,9 +49,9 @@ space="h:[value]"
49
49
 
50
50
  ```html
51
51
  <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
52
- <div space="h:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
53
- <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
54
- <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
52
+ <div space="h:full p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:full</div>
53
+ <div space="h:third-2x p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:third-2x</div>
54
+ <div space="h:half p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:half</div>
55
55
  </div>
56
56
  ```
57
57
 
package/docs/reference/space/width.md CHANGED
@@ -17,17 +17,17 @@ space="w:[value]"
17
17
 
18
18
  ## Scale Values
19
19
 
20
- `none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`
20
+ `none`, `thin`, `regular`, `thick`, `tiny`, `tiny-2x`, `small`, `small-2x`, `small-3x`, `small-4x`, `medium`, `medium-2x`, `medium-3x`, `medium-4x`, `large`, `large-2x`, `large-3x`, `large-4x`, `big`, `big-2x`, `big-3x`, `big-4x`, `giant`, `giant-2x`, `giant-3x`, `giant-4x`, `vast`, `vast-2x`, `vast-3x`, `vast-4x`, `vast-5x`, `vast-6x`, `vast-7x`, `vast-8x`, `vast-9x`, `vast-10x`, `min`, `max`, `fit`, `full`, `half`, `third`, `third-2x`, `quarter`, `quarter-2x`, `quarter-3x`, `1/1`, `1/2`, `1/3`, `2/3`, `1/4`, `2/4`, `3/4`
21
21
 
22
22
  ## Examples
23
23
 
24
24
  ```html
25
- <div space="w:[100%]">Full width</div>
25
+ <div space="w:full">Full width</div>
26
+ <div space="w:half">Half width</div>
27
+ <div space="w:third">Third width</div>
28
+ <div space="w:quarter-3x">Three quarters</div>
26
29
  <div space="max-w:[1200px]">Max width container</div>
27
- <div space="min-w:[300px]">Min width</div>
28
30
  <div space="w:max">Content width</div>
29
- <div space="max-w:max">Max content width</div>
30
- <div space="min-w:min">Min content width</div>
31
31
  ```
32
32
 
33
33
  ## Preview
@@ -37,11 +37,11 @@ space="w:[value]"
37
37
  ### Width Control
38
38
 
39
39
  <div layout="flex col" space="g:medium">
40
- <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="w:[100%]"</code> - Set fixed or percentage widths</p>
40
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="w:full"</code> - Set fixed or percentage widths</p>
41
41
  <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
- <div space="w:[100%] p:small" visual="bg:primary text:white rounded:small">w:[100%]</div>
43
- <div space="w:[75%] p:small" visual="bg:primary text:white rounded:small">w:[75%]</div>
44
- <div space="w:[50%] p:small" visual="bg:primary text:white rounded:small">w:[50%]</div>
42
+ <div space="w:full p:small" visual="bg:primary text:white rounded:small">w:full</div>
43
+ <div space="w:quarter-3x p:small" visual="bg:primary text:white rounded:small">w:quarter-3x</div>
44
+ <div space="w:half p:small" visual="bg:primary text:white rounded:small">w:half</div>
45
45
  </div>
46
46
  </div>
47
47
 
@@ -50,9 +50,9 @@ space="w:[value]"
50
50
 
51
51
  ```html
52
52
  <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
53
- <div space="w:[100%] p:small" visual="bg:primary text:white rounded:small">w:[100%]</div>
54
- <div space="w:[75%] p:small" visual="bg:primary text:white rounded:small">w:[75%]</div>
55
- <div space="w:[50%] p:small" visual="bg:primary text:white rounded:small">w:[50%]</div>
53
+ <div space="w:full p:small" visual="bg:primary text:white rounded:small">w:full</div>
54
+ <div space="w:quarter-3x p:small" visual="bg:primary text:white rounded:small">w:quarter-3x</div>
55
+ <div space="w:half p:small" visual="bg:primary text:white rounded:small">w:half</div>
56
56
  </div>
57
57
  ```
58
58
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bookklik/senangstart-css",
3
- "version": "0.2.7",
3
+ "version": "0.2.9",
4
4
  "description": "Fluent Style Utilities for Humans and AI",
5
5
  "type": "module",
6
6
  "main": "src/index.js",