@bookklik/senangstart-css 0.2.4 → 0.2.6

package/docs/reference/layout/position.md

@@ -34,7 +34,7 @@ layout="[position-value]"
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="relative"</code> - Element positioned relative to normal flow</p>
 <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
-  <span layout="absolute" style="top: 0; right: 0;" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
+  <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
 </div>
 </div>
 
@@ -44,7 +44,7 @@ layout="[position-value]"
 ```html
 <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
-  <span layout="absolute" style="top: 0; right: 0;" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
+  <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
 </div>
 ```
 
@@ -59,7 +59,7 @@ layout="[position-value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="sticky"</code> - Element sticks when scrolling past it</p>
 <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span layout="sticky" style="top: 0;" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
+  <span layout="sticky top:0" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
 </div>
 </div>
 
@@ -68,7 +68,7 @@ layout="[position-value]"
 
 ```html
 <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span layout="sticky" style="top: 0;" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
+  <span layout="sticky top:0" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
 </div>
 ```
 

package/docs/reference/layout/z-index.md

@@ -32,10 +32,10 @@ layout="z:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>layout="z:high"</code> - Control stacking order of positioned elements</p>
 <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
-  <span layout="absolute z:base" style="left: 0; top: 10px;" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
-  <span layout="absolute z:low" style="left: 30px; top: 20px;" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
-  <span layout="absolute z:mid" style="left: 60px; top: 30px;" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
-  <span layout="absolute z:high" style="left: 90px; top: 40px;" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
+  <span layout="absolute z:base left:0 top:10px" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
+  <span layout="absolute z:low left:30px top:20px" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
+  <span layout="absolute z:mid left:60px top:30px" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
+  <span layout="absolute z:high left:90px top:40px" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
 </div>
 </div>
 
@@ -44,10 +44,10 @@ layout="z:[value]"
 
 ```html
 <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
-  <span layout="absolute z:base" style="left: 0; top: 10px;" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
-  <span layout="absolute z:low" style="left: 30px; top: 20px;" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
-  <span layout="absolute z:mid" style="left: 60px; top: 30px;" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
-  <span layout="absolute z:high" style="left: 90px; top: 40px;" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
+  <span layout="absolute z:base left:0 top:10px" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
+  <span layout="absolute z:low left:30px top:20px" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
+  <span layout="absolute z:mid left:60px top:30px" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
+  <span layout="absolute z:high left:90px top:40px" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
 </div>
 ```
 

package/docs/reference/space/gap.md

@@ -17,7 +17,7 @@ space="g:[value]" or space="g-{axis}:[value]"
 
 ## Scale Values
 
-`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+`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`
 
 ## Examples
 

package/docs/reference/space/height.md

@@ -17,13 +17,16 @@ space="h:[value]"
 
 ## Scale Values
 
-`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+`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`
 
 ## Examples
 
 ```html
 <div space="h:[100vh]">Full viewport height</div>
 <div space="min-h:[400px]">Min height</div>
+<div space="h:max">Content height</div>
+<div space="max-h:max">Max content height</div>
+<div space="min-h:min">Min content height</div>
 ```
 
 ## Preview
@@ -58,12 +61,14 @@ space="h:[value]"
 
 <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
 
-### Min Height
+### Content-Based Height
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="min-h:[80px]"</code> - Set minimum height constraint</p>
-<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="min-h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">min-h:[80px]</div>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="h:max"</code> - Use min, max, or fit for content-based height</p>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="h:min p:small" visual="bg:primary text:white rounded:small">h:min</div>
+  <div space="h:max p:small" visual="bg:pink-600 text:white rounded:small">h:max<br>Multi<br>Line</div>
+  <div space="h:fit p:small" visual="bg:amber-600 text:white rounded:small">h:fit</div>
 </div>
 </div>
 
@@ -71,8 +76,38 @@ space="h:[value]"
 <summary>View Code</summary>
 
 ```html
-<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="min-h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">min-h:[80px]</div>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="h:min p:small" visual="bg:primary text:white rounded:small">h:min</div>
+  <div space="h:max p:small" visual="bg:pink-600 text:white rounded:small">h:max<br>Multi<br>Line</div>
+  <div space="h:fit p:small" visual="bg:amber-600 text:white rounded:small">h:fit</div>
+</div>
+```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Min/Max Height with Content Values
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="min-h:min"</code> - Constrain height using content values</p>
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="min-h:min p:small" visual="bg:primary text:white rounded:small">min-h:min</div>
+  <div space="max-h:max p:small" visual="bg:pink-600 text:white rounded:small">max-h:max</div>
+  <div space="min-h:[80px] p:small" visual="bg:amber-600 text:white rounded:small" layout="flex center">min-h:[80px]</div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```html
+<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="min-h:min p:small" visual="bg:primary text:white rounded:small">min-h:min</div>
+  <div space="max-h:max p:small" visual="bg:pink-600 text:white rounded:small">max-h:max</div>
+  <div space="min-h:[80px] p:small" visual="bg:amber-600 text:white rounded:small" layout="flex center">min-h:[80px]</div>
 </div>
 ```
 

package/docs/reference/space/margin.md

@@ -21,7 +21,7 @@ space="m:[value]" or space="m-{side}:[value]"
 
 ## Scale Values
 
-`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`, `auto`
+`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`, `auto`
 
 ## Examples
 

package/docs/reference/space/padding.md

@@ -21,7 +21,7 @@ space="p:[value]" or space="p-{side}:[value]"
 
 ## Scale Values
 
-`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+`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`
 
 ## Examples
 

package/docs/reference/space/scale-reference.md

@@ -4,15 +4,44 @@ The natural scale used for spacing properties.
 
 ## Scale Values
 
-| Keyword | Default Value |
-|---------|---------------|
-| `none` | 0px |
-| `tiny` | 4px |
-| `small` | 8px |
-| `medium` | 16px |
-| `big` | 32px |
-| `giant` | 64px |
-| `vast` | 128px |
+| Keyword | Value | Use Case |
+|---------|-------|----------|
+| `none` | 0px | Reset spacing |
+| `thin` | 1px | Hairline borders |
+| `regular` | 2px | Standard borders |
+| `thick` | 3px | Bold borders |
+| `tiny` | 4px | Small offsets |
+| `tiny-2x` | 6px | Tiny multiplied |
+| `small` | 8px | Group related items |
+| `small-2x` | 10px | Small multiplied |
+| `small-3x` | 12px | Small multiplied |
+| `small-4x` | 14px | Small multiplied |
+| `medium` | 16px | Standard default |
+| `medium-2x` | 20px | Medium multiplied |
+| `medium-3x` | 24px | Medium multiplied |
+| `medium-4x` | 28px | Medium multiplied |
+| `large` | 32px | Separate sections |
+| `large-2x` | 36px | Large multiplied |
+| `large-3x` | 40px | Large multiplied |
+| `large-4x` | 44px | Large multiplied |
+| `big` | 48px | Layout sections |
+| `big-2x` | 56px | Big multiplied |
+| `big-3x` | 64px | Big multiplied |
+| `big-4x` | 80px | Big multiplied |
+| `giant` | 96px | Hero sections |
+| `giant-2x` | 112px | Giant multiplied |
+| `giant-3x` | 128px | Giant multiplied |
+| `giant-4x` | 144px | Giant multiplied |
+| `vast` | 160px | Page-level spacing |
+| `vast-2x` | 176px | Vast multiplied |
+| `vast-3x` | 192px | Vast multiplied |
+| `vast-4x` | 208px | Vast multiplied |
+| `vast-5x` | 224px | Vast multiplied |
+| `vast-6x` | 240px | Vast multiplied |
+| `vast-7x` | 256px | Vast multiplied |
+| `vast-8x` | 288px | Vast multiplied |
+| `vast-9x` | 320px | Vast multiplied |
+| `vast-10x` | 384px | Vast multiplied |
 
 ## Customization
 
@@ -20,18 +49,18 @@ Override scale values in your configuration:
 
 ```js
 // senangstart.config.js
-module.exports = {
-  scale: {
-    tiny: '2px',
-    small: '4px',
-    medium: '8px',
-    big: '16px',
-    giant: '32px',
-    vast: '64px'
+export default {
+  theme: {
+    spacing: {
+      'tiny': '2px',        // Override existing
+      'micro': '1px',       // Add new custom value
+      'humongous': '512px'  // Extrapolate scale
+    }
   }
 }
 ```
 
+
 ## Usage
 
 All spacing properties use the same scale:

package/docs/reference/space/width.md

@@ -17,7 +17,7 @@ space="w:[value]"
 
 ## Scale Values
 
-`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+`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`
 
 ## Examples
 
@@ -25,6 +25,9 @@ space="w:[value]"
 <div space="w:[100%]">Full width</div>
 <div space="max-w:[1200px]">Max width container</div>
 <div space="min-w:[300px]">Min width</div>
+<div space="w:max">Content width</div>
+<div space="max-w:max">Max content width</div>
+<div space="min-w:min">Min content width</div>
 ```
 
 ## Preview
@@ -59,12 +62,14 @@ space="w:[value]"
 
 <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
 
-### Max Width
+### Content-Based Sizing
 
 <div layout="flex col" space="g:medium">
-  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="max-w:[200px]"</code> - Constrain maximum width</p>
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="w:max"</code> - Use min, max, or fit for content-based sizing</p>
 <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="max-w:[200px] p:small" visual="bg:primary text:white rounded:small">max-w:[200px]</div>
+  <div space="w:min p:small m-b:small" visual="bg:primary text:white rounded:small">w:min shrinks to minimum</div>
+  <div space="w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">w:max expands to fit all content without wrapping</div>
+  <div space="w:fit p:small" visual="bg:green-600 text:white rounded:small">w:fit adapts to available space while respecting content</div>
 </div>
 </div>
 
@@ -73,7 +78,37 @@ space="w:[value]"
 
 ```html
 <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="max-w:[200px] p:small" visual="bg:primary text:white rounded:small">max-w:[200px]</div>
+  <div space="w:min p:small m-b:small" visual="bg:primary text:white rounded:small">w:min shrinks to minimum</div>
+  <div space="w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">w:max expands to fit all content without wrapping</div>
+  <div space="w:fit p:small" visual="bg:green-600 text:white rounded:small">w:fit adapts to available space while respecting content</div>
+</div>
+```
+
+</details>
+
+</div>
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Max Width with Content Values
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>space="max-w:min"</code> - Constrain maximum width using content values</p>
+<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="max-w:min p:small m-b:small" visual="bg:primary text:white rounded:small">max-w:min - Text will wrap to minimum width needed</div>
+  <div space="max-w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">max-w:max - Expands to content</div>
+  <div space="max-w:[200px] p:small" visual="bg:green-600 text:white rounded:small">max-w:[200px] - Fixed max</div>
+</div>
+</div>
+
+<details>
+<summary>View Code</summary>
+
+```html
+<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="max-w:min p:small m-b:small" visual="bg:primary text:white rounded:small">max-w:min - Text will wrap to minimum width needed</div>
+  <div space="max-w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">max-w:max - Expands to content</div>
+  <div space="max-w:[200px] p:small" visual="bg:green-600 text:white rounded:small">max-w:[200px] - Fixed max</div>
 </div>
 ```
 

package/docs/reference/space.md

@@ -10,7 +10,7 @@ The `space` attribute controls sizing and spacing.
 
 **Breakpoints:** `mob:`, `tab:`, `lap:`, `desk:`
 
-**Scale values:** `none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+**Scale values:** `none`, `thin`, `regular`, `thick`, `tiny`, `small`, `medium`, `large`, `big`, `giant`, `vast` (and numeric multipliers)
 
 ## Spacing
 

package/docs/reference/spacing.md

@@ -11,11 +11,37 @@ Complete reference for the spacing scale.
 | `regular` | 2px | Standard borders |
 | `thick` | 3px | Bold borders |
 | `tiny` | 4px | Small offsets |
+| `tiny-2x` | 6px | Tiny multiplied |
 | `small` | 8px | Group related items |
+| `small-2x` | 10px | Small multiplied |
+| `small-3x` | 12px | Small multiplied |
+| `small-4x` | 14px | Small multiplied |
 | `medium` | 16px | Standard default |
-| `big` | 32px | Separate sections |
-| `giant` | 64px | Layout divisions |
-| `vast` | 128px | Hero sections |
+| `medium-2x` | 20px | Medium multiplied |
+| `medium-3x` | 24px | Medium multiplied |
+| `medium-4x` | 28px | Medium multiplied |
+| `large` | 32px | Separate sections |
+| `large-2x` | 36px | Large multiplied |
+| `large-3x` | 40px | Large multiplied |
+| `large-4x` | 44px | Large multiplied |
+| `big` | 48px | Layout sections |
+| `big-2x` | 56px | Big multiplied |
+| `big-3x` | 64px | Big multiplied |
+| `big-4x` | 80px | Big multiplied |
+| `giant` | 96px | Hero sections |
+| `giant-2x` | 112px | Giant multiplied |
+| `giant-3x` | 128px | Giant multiplied |
+| `giant-4x` | 144px | Giant multiplied |
+| `vast` | 160px | Page-level spacing |
+| `vast-2x` | 176px | Vast multiplied |
+| `vast-3x` | 192px | Vast multiplied |
+| `vast-4x` | 208px | Vast multiplied |
+| `vast-5x` | 224px | Vast multiplied |
+| `vast-6x` | 240px | Vast multiplied |
+| `vast-7x` | 256px | Vast multiplied |
+| `vast-8x` | 288px | Vast multiplied |
+| `vast-9x` | 320px | Vast multiplied |
+| `vast-10x` | 384px | Vast multiplied |
 
 ## CSS Variables
 
@@ -28,11 +54,37 @@ The spacing scale generates these CSS variables:
   --s-regular: 2px;
   --s-thick: 3px;
   --s-tiny: 4px;
+  --s-tiny-2x: 6px;
   --s-small: 8px;
+  --s-small-2x: 10px;
+  --s-small-3x: 12px;
+  --s-small-4x: 14px;
   --s-medium: 16px;
-  --s-big: 32px;
-  --s-giant: 64px;
-  --s-vast: 128px;
+  --s-medium-2x: 20px;
+  --s-medium-3x: 24px;
+  --s-medium-4x: 28px;
+  --s-large: 32px;
+  --s-large-2x: 36px;
+  --s-large-3x: 40px;
+  --s-large-4x: 44px;
+  --s-big: 48px;
+  --s-big-2x: 56px;
+  --s-big-3x: 64px;
+  --s-big-4x: 80px;
+  --s-giant: 96px;
+  --s-giant-2x: 112px;
+  --s-giant-3x: 128px;
+  --s-giant-4x: 144px;
+  --s-vast: 160px;
+  --s-vast-2x: 176px;
+  --s-vast-3x: 192px;
+  --s-vast-4x: 208px;
+  --s-vast-5x: 224px;
+  --s-vast-6x: 240px;
+  --s-vast-7x: 256px;
+  --s-vast-8x: 288px;
+  --s-vast-9x: 320px;
+  --s-vast-10x: 384px;
 }
 ```
 
@@ -41,11 +93,11 @@ The spacing scale generates these CSS variables:
 ```html
 <!-- Padding -->
 <div space="p:medium">16px padding all sides</div>
-<div space="p-x:big">32px horizontal padding</div>
+<div space="p-x:large">32px horizontal padding</div>
 
 <!-- Margin -->
 <div space="m:small">8px margin all sides</div>
-<div space="m-b:giant">64px bottom margin</div>
+<div space="m-b:giant">96px bottom margin</div>
 
 <!-- Gap -->
 <div layout="flex" space="g:small">8px gap between items</div>
@@ -54,6 +106,10 @@ The spacing scale generates these CSS variables:
 <div visual="border:gray-300 border-w:thin">1px border</div>
 <div visual="border:gray-300 border-w:regular">2px border</div>
 <div visual="border:gray-300 border-w:thick">3px border</div>
+
+<!-- Using multiplier variants -->
+<div space="p:medium-2x">20px padding (medium × 2)</div>
+<div space="m:large-3x">40px margin (large × 3)</div>
 ```
 
 ## Customization
@@ -64,9 +120,9 @@ Override in `senangstart.config.js`:
 export default {
   theme: {
     spacing: {
-      'tiny': '2px',      // Override existing
-      'huge': '256px',    // Add new
-      'massive': '512px'  // Add new
+      'tiny': '2px',        // Override existing
+      'huge': '256px',      // Add new
+      'massive': '512px'    // Add new
     }
   }
 }
@@ -75,14 +131,40 @@ export default {
 ## Visual Guide
 
 ```
-none    │ (no space)
-thin    │ 1px
-regular │▏ 2px
-thick   │▎ 3px
-tiny    │▌ 4px
-small   │██ 8px
-medium  │████ 16px
-big     │████████ 32px
-giant   │████████████████ 64px
-vast    │████████████████████████████████ 128px
+none      │ (no space)
+thin      │ 1px
+regular   │▏ 2px
+thick     │▎ 3px
+tiny      │▌ 4px
+tiny-2x   │▌▏ 6px
+small     │██ 8px
+small-2x  │██▌ 10px
+small-3x  │███ 12px
+small-4x  │███▌ 14px
+medium    │████ 16px
+medium-2x │█████ 20px
+medium-3x │██████ 24px
+medium-4x │███████ 28px
+large     │████████ 32px
+large-2x  │█████████ 36px
+large-3x  │██████████ 40px
+large-4x  │███████████ 44px
+big       │████████████ 48px
+big-2x    │██████████████ 56px
+big-3x    │████████████████ 64px
+big-4x    │████████████████████ 80px
+giant     │████████████████████████ 96px
+giant-2x  │████████████████████████████ 112px
+giant-3x  │████████████████████████████████ 128px
+giant-4x  │████████████████████████████████████ 144px
+vast      │████████████████████████████████████████ 160px
+vast-2x   │████████████████████████████████████████████ 176px
+vast-3x   │████████████████████████████████████████████████ 192px
+vast-4x   │████████████████████████████████████████████████████ 208px
+vast-5x   │████████████████████████████████████████████████████████ 224px
+vast-6x   │████████████████████████████████████████████████████████████ 240px
+vast-7x   │████████████████████████████████████████████████████████████████ 256px
+vast-8x   │████████████████████████████████████████████████████████████████████████ 288px
+vast-9x   │████████████████████████████████████████████████████████████████████████████████ 320px
+vast-10x  │██████████████████████████████████████████████████████████████████████████████████████████████ 384px
 ```

package/docs/reference/visual/animation-fill.md

@@ -30,18 +30,18 @@ visual="animation-fill:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="animation-fill:forwards"</code> - Control state before/after animation. "forwards" keeps the final state, "none" returns to original.</p>
-<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <p visual="text-size:small text:neutral-600 dark:text:neutral-400">Hover to replay animation:</p>
   <div layout="flex" space="g:medium">
-    <div layout="flex:col" space="g:tiny">
+    <div layout="flex col" space="g:tiny">
       <span visual="text-size:tiny text:neutral-500">none (returns)</span>
       <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1 animation-fill:none hover:animate:bounce">⬆</div>
     </div>
-    <div layout="flex:col" space="g:tiny">
+    <div layout="flex col" space="g:tiny">
       <span visual="text-size:tiny text:neutral-500">forwards (stays)</span>
       <div space="p:small" visual="bg:success text:white rounded:small animate:bounce animation-iteration:1 animation-fill:forwards hover:animate:bounce">⬆</div>
     </div>
-    <div layout="flex:col" space="g:tiny">
+    <div layout="flex col" space="g:tiny">
       <span visual="text-size:tiny text:neutral-500">both</span>
       <div space="p:small" visual="bg:warning text:white rounded:small animate:bounce animation-iteration:1 animation-fill:both hover:animate:bounce">⬆</div>
     </div>
@@ -53,18 +53,18 @@ visual="animation-fill:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex:col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <p visual="text-size:small text:neutral-600 dark:text:neutral-400">Hover to replay animation:</p>
   <div layout="flex" space="g:medium">
-    <div layout="flex:col" space="g:tiny">
+    <div layout="flex col" space="g:tiny">
       <span visual="text-size:tiny text:neutral-500">none (returns)</span>
       <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1 animation-fill:none hover:animate:bounce">⬆</div>
     </div>
-    <div layout="flex:col" space="g:tiny">
+    <div layout="flex col" space="g:tiny">
       <span visual="text-size:tiny text:neutral-500">forwards (stays)</span>
       <div space="p:small" visual="bg:success text:white rounded:small animate:bounce animation-iteration:1 animation-fill:forwards hover:animate:bounce">⬆</div>
     </div>
-    <div layout="flex:col" space="g:tiny">
+    <div layout="flex col" space="g:tiny">
       <span visual="text-size:tiny text:neutral-500">both</span>
       <div space="p:small" visual="bg:warning text:white rounded:small animate:bounce animation-iteration:1 animation-fill:both hover:animate:bounce">⬆</div>
     </div>

package/docs/reference/visual/backdrop-blur.md

@@ -33,8 +33,8 @@ visual="backdrop-blur:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="backdrop-blur:medium"</code> - Creates a frosted glass effect on content behind the element</p>
-<div layout="relative" space="p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); min-height: 100px;">
-  <div layout="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(8px); background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 0.5rem;">
+<div layout="flex:center" space="p:large" visual="bg-image:gradient-to-br from:blue-500 to:violet-500 rounded:medium">
+  <div space="p:medium" visual="backdrop-blur:medium bg:[rgba(255,255,255,0.2)] rounded:small">
     <span visual="text:white">Frosted Glass</span>
   </div>
 </div>
@@ -44,8 +44,8 @@ visual="backdrop-blur:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="relative" space="p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); min-height: 100px;">
-  <div layout="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(8px); background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 0.5rem;">
+<div layout="flex:center" space="p:large" visual="bg-image:gradient-to-br from:blue-500 to:violet-500 rounded:medium">
+  <div space="p:medium" visual="backdrop-blur:medium bg:[rgba(255,255,255,0.2)] rounded:small">
     <span visual="text:white">Frosted Glass</span>
   </div>
 </div>

package/docs/reference/visual/backdrop-brightness.md

@@ -31,10 +31,10 @@ visual="backdrop-brightness:[value]"
 
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="backdrop-brightness:dark"</code> - Dim or brighten the backdrop behind an overlay</p>
-<div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #f97316, #ef4444);">
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(0.5);">dim (50%)</div>
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1);">normal</div>
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1.5);">bright (150%)</div>
+<div layout="flex" space="g:medium p:medium" visual="bg-image:gradient-to-br from:orange-500 to:red-500 rounded:medium">
+  <div space="p:small" visual="backdrop-brightness:dim rounded:small text:white">dim (50%)</div>
+  <div space="p:small" visual="backdrop-brightness:normal rounded:small text:white">normal</div>
+  <div space="p:small" visual="backdrop-brightness:vivid rounded:small text:white">bright (150%)</div>
 </div>
 </div>
 
@@ -42,10 +42,10 @@ visual="backdrop-brightness:[value]"
 <summary>View Code</summary>
 
 ```html
-<div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #f97316, #ef4444);">
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(0.5);">dim (50%)</div>
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1);">normal</div>
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1.5);">bright (150%)</div>
+<div layout="flex" space="g:medium p:medium" visual="bg-image:gradient-to-br from:orange-500 to:red-500 rounded:medium">
+  <div space="p:small" visual="backdrop-brightness:dim rounded:small text:white">dim (50%)</div>
+  <div space="p:small" visual="backdrop-brightness:normal rounded:small text:white">normal</div>
+  <div space="p:small" visual="backdrop-brightness:vivid rounded:small text:white">bright (150%)</div>
 </div>
 ```