npm - @bookklik/senangstart-css - Versions diffs - 0.1.7 → 0.2.0 - Mend

@bookklik/senangstart-css 0.1.7 → 0.2.0

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 (342) hide show

package/README.md +38 -0
package/dist/senangstart-css.js +2269 -1955
package/dist/senangstart-css.min.js +141 -1479
package/docs/.vitepress/config.js +5 -3
package/docs/.vitepress/theme/custom.css +0 -1
package/docs/guide/responsive.md +25 -0
package/docs/index.md +9 -21
package/docs/ms/guide/responsive.md +25 -0
package/docs/ms/index.md +9 -21
package/docs/ms/reference/breakpoints.md +23 -0
package/docs/ms/reference/layout/align-content.md +57 -4
package/docs/ms/reference/layout/align-items.md +81 -4
package/docs/ms/reference/layout/align-self.md +25 -4
package/docs/ms/reference/layout/aspect-ratio.md +27 -8
package/docs/ms/reference/layout/border-collapse.md +81 -4
package/docs/ms/reference/layout/border-spacing.md +43 -8
package/docs/ms/reference/layout/box-sizing.md +21 -4
package/docs/ms/reference/layout/caption-side.md +69 -4
package/docs/ms/reference/layout/columns.md +21 -4
package/docs/ms/reference/layout/container.md +21 -4
package/docs/ms/reference/layout/display.md +39 -7
package/docs/ms/reference/layout/flex-basis.md +29 -8
package/docs/ms/reference/layout/flex-direction.md +81 -4
package/docs/ms/reference/layout/flex-items.md +51 -4
package/docs/ms/reference/layout/flex-wrap.md +55 -4
package/docs/ms/reference/layout/flex.md +54 -7
package/docs/ms/reference/layout/float-clear.md +23 -4
package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
package/docs/ms/reference/layout/grid-column-span.md +59 -4
package/docs/ms/reference/layout/grid-columns.md +61 -4
package/docs/ms/reference/layout/grid-row-span.md +29 -4
package/docs/ms/reference/layout/grid-rows.md +31 -4
package/docs/ms/reference/layout/inset.md +56 -7
package/docs/ms/reference/layout/isolation.md +21 -4
package/docs/ms/reference/layout/justify-content.md +81 -4
package/docs/ms/reference/layout/justify-items.md +25 -4
package/docs/ms/reference/layout/justify-self.md +25 -4
package/docs/ms/reference/layout/object-fit.md +57 -4
package/docs/ms/reference/layout/object-position.md +29 -8
package/docs/ms/reference/layout/order.md +53 -4
package/docs/ms/reference/layout/overflow.md +45 -4
package/docs/ms/reference/layout/overscroll.md +21 -4
package/docs/ms/reference/layout/place-content.md +23 -4
package/docs/ms/reference/layout/place-items.md +25 -4
package/docs/ms/reference/layout/place-self.md +25 -4
package/docs/ms/reference/layout/position.md +47 -4
package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
package/docs/ms/reference/layout/table-layout.md +69 -4
package/docs/ms/reference/layout/visibility.md +25 -4
package/docs/ms/reference/layout/z-index.md +27 -4
package/docs/ms/reference/space/gap.md +71 -7
package/docs/ms/reference/space/height.md +61 -7
package/docs/ms/reference/space/margin.md +61 -7
package/docs/ms/reference/space/padding.md +65 -7
package/docs/ms/reference/space/width.md +61 -7
package/docs/ms/reference/visual/accent-color.md +29 -8
package/docs/ms/reference/visual/animation-builtin.md +29 -8
package/docs/ms/reference/visual/animation-delay.md +25 -8
package/docs/ms/reference/visual/animation-direction.md +25 -4
package/docs/ms/reference/visual/animation-duration.md +27 -8
package/docs/ms/reference/visual/animation-fill.md +25 -4
package/docs/ms/reference/visual/animation-iteration.md +23 -4
package/docs/ms/reference/visual/animation-play.md +23 -4
package/docs/ms/reference/visual/appearance.md +23 -4
package/docs/ms/reference/visual/backdrop-blur.md +29 -8
package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
package/docs/ms/reference/visual/backdrop-invert.md +27 -8
package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
package/docs/ms/reference/visual/background-attachment.md +23 -4
package/docs/ms/reference/visual/background-blend-mode.md +25 -4
package/docs/ms/reference/visual/background-clip.md +21 -4
package/docs/ms/reference/visual/background-color.md +33 -8
package/docs/ms/reference/visual/background-image.md +27 -8
package/docs/ms/reference/visual/background-origin.md +25 -4
package/docs/ms/reference/visual/background-position.md +29 -8
package/docs/ms/reference/visual/background-repeat.md +25 -4
package/docs/ms/reference/visual/background-size.md +29 -8
package/docs/ms/reference/visual/blend-modes.md +23 -4
package/docs/ms/reference/visual/border-radius.md +36 -4
package/docs/ms/reference/visual/border-style.md +25 -4
package/docs/ms/reference/visual/border-width.md +29 -8
package/docs/ms/reference/visual/border.md +56 -7
package/docs/ms/reference/visual/box-shadow.md +34 -4
package/docs/ms/reference/visual/caret-color.md +25 -8
package/docs/ms/reference/visual/color-scheme.md +23 -4
package/docs/ms/reference/visual/cursor.md +25 -4
package/docs/ms/reference/visual/field-sizing.md +23 -4
package/docs/ms/reference/visual/fill.md +29 -8
package/docs/ms/reference/visual/filter-blur.md +29 -8
package/docs/ms/reference/visual/filter-brightness.md +29 -8
package/docs/ms/reference/visual/filter-contrast.md +29 -8
package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
package/docs/ms/reference/visual/filter-grayscale.md +29 -8
package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
package/docs/ms/reference/visual/filter-invert.md +27 -8
package/docs/ms/reference/visual/filter-saturate.md +29 -8
package/docs/ms/reference/visual/filter-sepia.md +29 -8
package/docs/ms/reference/visual/font-family.md +25 -4
package/docs/ms/reference/visual/font-smoothing.md +23 -4
package/docs/ms/reference/visual/font-style.md +23 -4
package/docs/ms/reference/visual/font-variant-numeric.md +23 -4
package/docs/ms/reference/visual/font-weight.md +35 -4
package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
package/docs/ms/reference/visual/hyphens.md +25 -4
package/docs/ms/reference/visual/letter-spacing.md +29 -8
package/docs/ms/reference/visual/line-clamp.md +29 -8
package/docs/ms/reference/visual/line-height.md +29 -8
package/docs/ms/reference/visual/list-style.md +25 -4
package/docs/ms/reference/visual/mask.md +25 -8
package/docs/ms/reference/visual/opacity.md +27 -4
package/docs/ms/reference/visual/outline.md +25 -8
package/docs/ms/reference/visual/pointer-events.md +23 -4
package/docs/ms/reference/visual/resize.md +27 -4
package/docs/ms/reference/visual/scroll-behavior.md +23 -4
package/docs/ms/reference/visual/scroll-margin.md +25 -8
package/docs/ms/reference/visual/scroll-padding.md +25 -8
package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
package/docs/ms/reference/visual/state-prefixes.md +21 -4
package/docs/ms/reference/visual/stroke-width.md +29 -8
package/docs/ms/reference/visual/stroke.md +27 -8
package/docs/ms/reference/visual/text-alignment.md +25 -4
package/docs/ms/reference/visual/text-color.md +31 -8
package/docs/ms/reference/visual/text-decoration.md +23 -4
package/docs/ms/reference/visual/text-indent.md +25 -8
package/docs/ms/reference/visual/text-overflow.md +21 -4
package/docs/ms/reference/visual/text-shadow.md +25 -8
package/docs/ms/reference/visual/text-size.md +41 -7
package/docs/ms/reference/visual/text-transform.md +25 -4
package/docs/ms/reference/visual/text-wrap.md +25 -4
package/docs/ms/reference/visual/touch-action.md +25 -4
package/docs/ms/reference/visual/transform-backface.md +23 -4
package/docs/ms/reference/visual/transform-origin.md +27 -8
package/docs/ms/reference/visual/transform-perspective-origin.md +25 -8
package/docs/ms/reference/visual/transform-perspective.md +25 -8
package/docs/ms/reference/visual/transform-rotate.md +29 -8
package/docs/ms/reference/visual/transform-scale.md +29 -8
package/docs/ms/reference/visual/transform-skew.md +29 -8
package/docs/ms/reference/visual/transform-style.md +23 -4
package/docs/ms/reference/visual/transform-translate.md +29 -8
package/docs/ms/reference/visual/transition-delay.md +25 -8
package/docs/ms/reference/visual/transition-duration.md +27 -8
package/docs/ms/reference/visual/transition-property.md +21 -4
package/docs/ms/reference/visual/transition-timing.md +29 -8
package/docs/ms/reference/visual/typography-keywords.md +27 -4
package/docs/ms/reference/visual/user-select.md +23 -4
package/docs/ms/reference/visual/vertical-align.md +25 -4
package/docs/ms/reference/visual/whitespace.md +25 -4
package/docs/ms/reference/visual/will-change.md +23 -4
package/docs/ms/reference/visual/word-break.md +25 -4
package/docs/public/assets/senangstart-css-logo.svg +1 -0
package/docs/reference/breakpoints.md +23 -0
package/docs/reference/layout/align-content.md +57 -4
package/docs/reference/layout/align-items.md +81 -4
package/docs/reference/layout/align-self.md +25 -4
package/docs/reference/layout/aspect-ratio.md +27 -8
package/docs/reference/layout/border-collapse.md +81 -4
package/docs/reference/layout/border-spacing.md +43 -8
package/docs/reference/layout/box-sizing.md +21 -4
package/docs/reference/layout/caption-side.md +69 -4
package/docs/reference/layout/columns.md +21 -4
package/docs/reference/layout/container.md +21 -4
package/docs/reference/layout/display.md +39 -7
package/docs/reference/layout/flex-basis.md +29 -8
package/docs/reference/layout/flex-direction.md +81 -4
package/docs/reference/layout/flex-items.md +51 -4
package/docs/reference/layout/flex-wrap.md +55 -4
package/docs/reference/layout/flex.md +54 -7
package/docs/reference/layout/float-clear.md +23 -4
package/docs/reference/layout/grid-auto-flow.md +57 -4
package/docs/reference/layout/grid-auto-sizing.md +25 -4
package/docs/reference/layout/grid-column-span.md +59 -4
package/docs/reference/layout/grid-columns.md +61 -4
package/docs/reference/layout/grid-row-span.md +29 -4
package/docs/reference/layout/grid-rows.md +31 -4
package/docs/reference/layout/inset.md +56 -7
package/docs/reference/layout/isolation.md +21 -4
package/docs/reference/layout/justify-content.md +81 -4
package/docs/reference/layout/justify-items.md +25 -4
package/docs/reference/layout/justify-self.md +25 -4
package/docs/reference/layout/object-fit.md +57 -4
package/docs/reference/layout/object-position.md +29 -8
package/docs/reference/layout/order.md +53 -4
package/docs/reference/layout/overflow.md +45 -4
package/docs/reference/layout/overscroll.md +21 -4
package/docs/reference/layout/place-content.md +23 -4
package/docs/reference/layout/place-items.md +25 -4
package/docs/reference/layout/place-self.md +25 -4
package/docs/reference/layout/position.md +47 -4
package/docs/reference/layout/shorthand-alignment.md +47 -4
package/docs/reference/layout/table-layout.md +69 -4
package/docs/reference/layout/visibility.md +25 -4
package/docs/reference/layout/z-index.md +27 -4
package/docs/reference/space/gap.md +71 -7
package/docs/reference/space/height.md +61 -7
package/docs/reference/space/margin.md +61 -7
package/docs/reference/space/padding.md +65 -7
package/docs/reference/space/width.md +61 -7
package/docs/reference/visual/accent-color.md +29 -8
package/docs/reference/visual/animation-builtin.md +29 -8
package/docs/reference/visual/animation-delay.md +25 -8
package/docs/reference/visual/animation-direction.md +25 -4
package/docs/reference/visual/animation-duration.md +27 -8
package/docs/reference/visual/animation-fill.md +25 -4
package/docs/reference/visual/animation-iteration.md +23 -4
package/docs/reference/visual/animation-play.md +23 -4
package/docs/reference/visual/appearance.md +23 -4
package/docs/reference/visual/backdrop-blur.md +29 -8
package/docs/reference/visual/backdrop-brightness.md +29 -8
package/docs/reference/visual/backdrop-contrast.md +29 -8
package/docs/reference/visual/backdrop-grayscale.md +27 -8
package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
package/docs/reference/visual/backdrop-invert.md +27 -8
package/docs/reference/visual/backdrop-opacity.md +29 -8
package/docs/reference/visual/backdrop-saturate.md +29 -8
package/docs/reference/visual/backdrop-sepia.md +27 -8
package/docs/reference/visual/background-attachment.md +23 -4
package/docs/reference/visual/background-blend-mode.md +25 -4
package/docs/reference/visual/background-clip.md +21 -4
package/docs/reference/visual/background-color.md +33 -8
package/docs/reference/visual/background-image.md +27 -8
package/docs/reference/visual/background-origin.md +25 -4
package/docs/reference/visual/background-position.md +29 -8
package/docs/reference/visual/background-repeat.md +25 -4
package/docs/reference/visual/background-size.md +29 -8
package/docs/reference/visual/blend-modes.md +23 -4
package/docs/reference/visual/border-radius.md +36 -4
package/docs/reference/visual/border-style.md +25 -4
package/docs/reference/visual/border-width.md +29 -8
package/docs/reference/visual/border.md +56 -7
package/docs/reference/visual/box-shadow.md +34 -4
package/docs/reference/visual/caret-color.md +25 -8
package/docs/reference/visual/color-scheme.md +23 -4
package/docs/reference/visual/cursor.md +25 -4
package/docs/reference/visual/field-sizing.md +23 -4
package/docs/reference/visual/fill.md +29 -8
package/docs/reference/visual/filter-blur.md +29 -8
package/docs/reference/visual/filter-brightness.md +29 -8
package/docs/reference/visual/filter-contrast.md +29 -8
package/docs/reference/visual/filter-drop-shadow.md +29 -8
package/docs/reference/visual/filter-grayscale.md +29 -8
package/docs/reference/visual/filter-hue-rotate.md +29 -8
package/docs/reference/visual/filter-invert.md +27 -8
package/docs/reference/visual/filter-saturate.md +29 -8
package/docs/reference/visual/filter-sepia.md +29 -8
package/docs/reference/visual/font-family.md +25 -4
package/docs/reference/visual/font-smoothing.md +23 -4
package/docs/reference/visual/font-style.md +23 -4
package/docs/reference/visual/font-variant-numeric.md +23 -4
package/docs/reference/visual/font-weight.md +35 -4
package/docs/reference/visual/forced-color-adjust.md +23 -4
package/docs/reference/visual/hyphens.md +25 -4
package/docs/reference/visual/letter-spacing.md +29 -8
package/docs/reference/visual/line-clamp.md +29 -8
package/docs/reference/visual/line-height.md +29 -8
package/docs/reference/visual/list-style.md +25 -4
package/docs/reference/visual/mask.md +25 -8
package/docs/reference/visual/opacity.md +27 -4
package/docs/reference/visual/outline.md +25 -8
package/docs/reference/visual/pointer-events.md +23 -4
package/docs/reference/visual/resize.md +27 -4
package/docs/reference/visual/scroll-behavior.md +23 -4
package/docs/reference/visual/scroll-margin.md +25 -8
package/docs/reference/visual/scroll-padding.md +25 -8
package/docs/reference/visual/scroll-snap-align.md +25 -4
package/docs/reference/visual/scroll-snap-stop.md +23 -4
package/docs/reference/visual/scroll-snap-type.md +25 -4
package/docs/reference/visual/state-prefixes.md +21 -4
package/docs/reference/visual/stroke-width.md +29 -8
package/docs/reference/visual/stroke.md +27 -8
package/docs/reference/visual/text-alignment.md +25 -4
package/docs/reference/visual/text-color.md +31 -8
package/docs/reference/visual/text-decoration.md +23 -4
package/docs/reference/visual/text-indent.md +25 -8
package/docs/reference/visual/text-overflow.md +21 -4
package/docs/reference/visual/text-shadow.md +25 -8
package/docs/reference/visual/text-size.md +41 -7
package/docs/reference/visual/text-transform.md +25 -4
package/docs/reference/visual/text-wrap.md +25 -4
package/docs/reference/visual/touch-action.md +25 -4
package/docs/reference/visual/transform-backface.md +23 -4
package/docs/reference/visual/transform-origin.md +27 -8
package/docs/reference/visual/transform-perspective-origin.md +25 -8
package/docs/reference/visual/transform-perspective.md +25 -8
package/docs/reference/visual/transform-rotate.md +29 -8
package/docs/reference/visual/transform-scale.md +29 -8
package/docs/reference/visual/transform-skew.md +29 -8
package/docs/reference/visual/transform-style.md +23 -4
package/docs/reference/visual/transform-translate.md +29 -8
package/docs/reference/visual/transition-delay.md +25 -8
package/docs/reference/visual/transition-duration.md +27 -8
package/docs/reference/visual/transition-property.md +21 -4
package/docs/reference/visual/transition-timing.md +29 -8
package/docs/reference/visual/typography-keywords.md +27 -4
package/docs/reference/visual/user-select.md +23 -4
package/docs/reference/visual/vertical-align.md +25 -4
package/docs/reference/visual/whitespace.md +25 -4
package/docs/reference/visual/will-change.md +23 -4
package/docs/reference/visual/word-break.md +25 -4
package/package.json +4 -3
package/playground/jit-tw-mix-test.html +238 -0
package/playground/tw-convertor.html +696 -0
package/scripts/build-dist.js +34 -29
package/scripts/bundle-jit.js +45 -0
package/scripts/convert-tailwind.js +759 -0
package/scripts/generate-docs.js +65 -16
package/src/cdn/jit.js +313 -102
package/src/cli/commands/build.js +14 -6
package/src/cli/commands/dev.js +28 -10
package/src/compiler/generators/css.js +187 -28
package/src/compiler/parser.js +23 -10
package/src/compiler/tokenizer.js +19 -137
package/src/config/defaults.js +45 -18
package/src/core/constants.js +427 -0
package/src/core/tokenizer-core.js +233 -0
package/src/definitions/layout-alignment.js +210 -0
package/src/definitions/layout-flex.js +155 -0
package/src/definitions/layout-grid.js +134 -0
package/src/definitions/layout-positioning.js +64 -0
package/src/definitions/layout-table.js +129 -0
package/src/definitions/layout-utilities.js +164 -0
package/src/definitions/space.js +172 -0
package/src/definitions/visual-backgrounds.js +231 -0
package/src/definitions/visual-borders.js +66 -0
package/src/definitions/visual-filters.js +111 -0
package/src/definitions/visual-interactivity.js +159 -0
package/src/definitions/visual-svg.js +41 -0
package/src/definitions/visual-transform3d.js +74 -0
package/src/definitions/visual-transforms.js +69 -0
package/src/definitions/visual-transitions.js +144 -0
package/src/definitions/visual-typography.js +214 -0
package/src/definitions/visual.js +306 -1
package/tests/integration/compiler.test.js +63 -2
package/tests/unit/convert-tailwind.test.js +324 -0
package/tests/unit/security.test.js +206 -0

package/src/definitions/visual-interactivity.js CHANGED Viewed

@@ -20,6 +20,19 @@ export const scrollBehavior = {
   ],
   examples: [
     { code: '<html visual="scroll-behavior:smooth">Smooth scrolling</html>', description: 'Smooth scroll' }
+  ],
+  preview: [
+    {
+      title: 'Scroll Behavior',
+      titleMs: 'Kelakuan Skrol',
+      description: 'Smooth or instant scrolling',
+      descriptionMs: 'Skrol lancar atau serta-merta',
+      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">auto</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">smooth</div>
+</div>`,
+      highlightValue: 'scroll-behavior:smooth'
+    }
   ]
 };
@@ -46,6 +59,18 @@ export const scrollMargin = {
   ],
   examples: [
     { code: '<div visual="scroll-m:medium">Scroll margin</div>', description: 'Scroll margin' }
+  ],
+  preview: [
+    {
+      title: 'Scroll Margin',
+      titleMs: 'Margin Skrol',
+      description: 'Offset for scroll snap',
+      descriptionMs: 'Offset untuk snap skrol',
+      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">scroll-m:medium</div>
+</div>`,
+      highlightValue: 'scroll-m:medium'
+    }
   ]
 };
@@ -72,6 +97,18 @@ export const scrollPadding = {
   ],
   examples: [
     { code: '<div visual="scroll-p:big">Scroll padding</div>', description: 'Scroll padding' }
+  ],
+  preview: [
+    {
+      title: 'Scroll Padding',
+      titleMs: 'Padding Skrol',
+      description: 'Padding for scroll snap container',
+      descriptionMs: 'Padding untuk bekas snap skrol',
+      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">scroll-p:big</div>
+</div>`,
+      highlightValue: 'scroll-p:big'
+    }
   ]
 };
@@ -94,6 +131,20 @@ export const scrollSnapAlign = {
   ],
   examples: [
     { code: '<div visual="snap-align:start">Snap to start</div>', description: 'Start alignment' }
+  ],
+  preview: [
+    {
+      title: 'Snap Alignment',
+      titleMs: 'Penjajaran Snap',
+      description: 'Where to snap within container',
+      descriptionMs: 'Tempat untuk snap dalam bekas',
+      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">start</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
+</div>`,
+      highlightValue: 'snap-align:start'
+    }
   ]
 };
@@ -114,6 +165,19 @@ export const scrollSnapStop = {
   ],
   examples: [
     { code: '<div visual="snap-stop:always">Always stop here</div>', description: 'Force stop' }
+  ],
+  preview: [
+    {
+      title: 'Snap Stop',
+      titleMs: 'Hentian Snap',
+      description: 'Control whether to stop at snap point',
+      descriptionMs: 'Kawal sama ada berhenti di titik snap',
+      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">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">always</div>
+</div>`,
+      highlightValue: 'snap-stop:always'
+    }
   ]
 };
@@ -138,6 +202,20 @@ export const scrollSnapType = {
   ],
   examples: [
     { code: '<div visual="snap-type:x">Horizontal snap container</div>', description: 'Horizontal snap' }
+  ],
+  preview: [
+    {
+      title: 'Snap Type',
+      titleMs: 'Jenis Snap',
+      description: 'Enable scroll snapping',
+      descriptionMs: 'Dayakan snapping skrol',
+      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">x</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
+</div>`,
+      highlightValue: 'snap-type:x'
+    }
   ]
 };
@@ -164,6 +242,20 @@ export const touchAction = {
   ],
   examples: [
     { code: '<div visual="touch:manipulation">Touch optimized</div>', description: 'Optimized touch' }
+  ],
+  preview: [
+    {
+      title: 'Touch Action',
+      titleMs: 'Tindakan Sentuh',
+      description: 'Control touch gestures',
+      descriptionMs: 'Kawal gerak isyarat sentuh',
+      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">pan-x</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">pan-y</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">manipulation</div>
+</div>`,
+      highlightValue: 'touch:manipulation'
+    }
   ]
 };
@@ -186,6 +278,21 @@ export const resize = {
   ],
   examples: [
     { code: '<textarea visual="resize:y">Vertical resize only</textarea>', description: 'Vertical resize' }
+  ],
+  preview: [
+    {
+      title: 'Resize',
+      titleMs: 'Saiz Semula',
+      description: 'Allow element resizing',
+      descriptionMs: 'Benarkan saiz semula elemen',
+      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">x</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
+</div>`,
+      highlightValue: 'resize:y'
+    }
   ]
 };
@@ -209,6 +316,19 @@ export const willChange = {
   ],
   examples: [
     { code: '<div visual="will-change:transform">Optimized for animation</div>', description: 'Transform optimization' }
+  ],
+  preview: [
+    {
+      title: 'Will Change',
+      titleMs: 'Akan Berubah',
+      description: 'Optimize for upcoming changes',
+      descriptionMs: 'Optimumkan untuk perubahan akan datang',
+      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">transform</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">opacity</div>
+</div>`,
+      highlightValue: 'will-change:transform'
+    }
   ]
 };
@@ -230,6 +350,19 @@ export const colorScheme = {
   ],
   examples: [
     { code: '<html visual="color-scheme:dark">Dark mode</html>', description: 'Dark mode' }
+  ],
+  preview: [
+    {
+      title: 'Color Scheme',
+      titleMs: 'Skema Warna',
+      description: 'Set preferred color mode',
+      descriptionMs: 'Tetapkan mod warna pilihan',
+      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">light</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">dark</div>
+</div>`,
+      highlightValue: 'color-scheme:dark'
+    }
   ]
 };
@@ -250,6 +383,19 @@ export const fieldSizing = {
   ],
   examples: [
     { code: '<textarea visual="field-sizing:content">Auto-grow textarea</textarea>', description: 'Auto-grow' }
+  ],
+  preview: [
+    {
+      title: 'Field Sizing',
+      titleMs: 'Saiz Medan',
+      description: 'Grow field with content',
+      descriptionMs: 'Besarkan medan dengan kandungan',
+      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">fixed</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
+</div>`,
+      highlightValue: 'field-sizing:content'
+    }
   ]
 };
@@ -270,6 +416,19 @@ export const forcedColorAdjust = {
   ],
   examples: [
     { code: '<div visual="forced-color:none">Preserve colors in high contrast</div>', description: 'Preserve colors' }
+  ],
+  preview: [
+    {
+      title: 'Forced Color Adjust',
+      titleMs: 'Penyesuaian Warna Paksa',
+      description: 'Control high contrast mode',
+      descriptionMs: 'Kawal mod kontras tinggi',
+      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">auto</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+</div>`,
+      highlightValue: 'forced-color:none'
+    }
   ]
 };

package/src/definitions/visual-svg.js CHANGED Viewed

@@ -22,6 +22,20 @@ export const svgFill = {
   ],
   examples: [
     { code: '<svg visual="fill:primary">...</svg>', description: 'Primary fill' }
+  ],
+  preview: [
+    {
+      title: 'SVG Fill',
+      titleMs: 'Pengisian SVG',
+      description: 'Fill SVG elements with color',
+      descriptionMs: 'Isi elemen SVG dengan warna',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <svg visual="fill:primary" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="fill:danger" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="fill:success" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+</div>`,
+      highlightValue: 'fill:primary'
+    }
   ]
 };
@@ -44,6 +58,19 @@ export const svgStroke = {
   ],
   examples: [
     { code: '<svg visual="stroke:primary stroke-w:2">...</svg>', description: 'Primary stroke' }
+  ],
+  preview: [
+    {
+      title: 'SVG Stroke',
+      titleMs: 'Gurisan SVG',
+      description: 'Stroke SVG elements with color',
+      descriptionMs: 'Guris elemen SVG dengan warna',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
+</div>`,
+      highlightValue: 'stroke:primary'
+    }
   ]
 };
@@ -67,6 +94,20 @@ export const svgStrokeWidth = {
   ],
   examples: [
     { code: '<svg visual="stroke:black stroke-w:2">...</svg>', description: '2px stroke' }
+  ],
+  preview: [
+    {
+      title: 'Stroke Width',
+      titleMs: 'Lebar Gurisan',
+      description: 'Control SVG stroke thickness',
+      descriptionMs: 'Kawal ketebalan gurisan SVG',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
+</div>`,
+      highlightValue: 'stroke-w:2'
+    }
   ]
 };

package/src/definitions/visual-transform3d.js CHANGED Viewed

@@ -26,6 +26,18 @@ export const perspective = {
   ],
   examples: [
     { code: '<div visual="perspective:normal">3D container</div>', description: 'Normal perspective' }
+  ],
+  preview: [
+    {
+      title: '3D Perspective',
+      titleMs: 'Perspektif 3D',
+      description: 'Control 3D depth perception',
+      descriptionMs: 'Kawal persepsi kedalaman 3D',
+      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">perspective</div>
+</div>`,
+      highlightValue: 'perspective:normal'
+    }
   ]
 };
@@ -54,6 +66,18 @@ export const perspectiveOrigin = {
   ],
   examples: [
     { code: '<div visual="perspective-origin:top">Top origin</div>', description: 'Top origin' }
+  ],
+  preview: [
+    {
+      title: 'Perspective Origin',
+      titleMs: 'Asal Perspektif',
+      description: 'Set vanishing point location',
+      descriptionMs: 'Tetapkan lokasi titik lenyap',
+      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">origin:center</div>
+</div>`,
+      highlightValue: 'perspective-origin:center'
+    }
   ]
 };
@@ -74,6 +98,19 @@ export const transformStyle = {
   ],
   examples: [
     { code: '<div visual="transform-style:preserve-3d">3D space</div>', description: 'Preserve 3D' }
+  ],
+  preview: [
+    {
+      title: 'Transform Style',
+      titleMs: 'Gaya Transformasi',
+      description: 'Flat or preserve 3D rendering',
+      descriptionMs: 'Persembahan rata atau kekalkan 3D',
+      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">flat</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">preserve-3d</div>
+</div>`,
+      highlightValue: 'transform-style:preserve-3d'
+    }
   ]
 };
@@ -94,6 +131,19 @@ export const backfaceVisibility = {
   ],
   examples: [
     { code: '<div visual="backface:hidden">Hidden when rotated</div>', description: 'Hide backface' }
+  ],
+  preview: [
+    {
+      title: 'Backface Visibility',
+      titleMs: 'Keterlihatan Belakang',
+      description: 'Show or hide element back side',
+      descriptionMs: 'Tunjukkan atau sembunyikan bahagian belakang',
+      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">hidden</div>
+</div>`,
+      highlightValue: 'backface:hidden'
+    }
   ]
 };
@@ -116,6 +166,18 @@ export const mask = {
   ],
   examples: [
     { code: '<div visual="mask:fade-y">Faded edges</div>', description: 'Vertical fade mask' }
+  ],
+  preview: [
+    {
+      title: 'Mask',
+      titleMs: 'Topeng',
+      description: 'Apply gradient mask to edges',
+      descriptionMs: 'Terapkan topeng kecerunan pada tepi',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg:primary text:white rounded:small">mask:fade-y</div>
+</div>`,
+      highlightValue: 'mask:fade-y'
+    }
   ]
 };
@@ -143,6 +205,18 @@ export const statePrefixes = {
   ],
   examples: [
     { code: '<button visual="hover:bg:primary focus:outline:primary">Interactive button</button>', description: 'State prefixes' }
+  ],
+  preview: [
+    {
+      title: 'State Prefixes',
+      titleMs: 'Awalan Keadaan',
+      description: 'Apply styles on hover, focus, etc.',
+      descriptionMs: 'Terapkan gaya pada hover, fokus, dll.',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:bg:primary-dark">hover:bg:primary-dark</button>
+</div>`,
+      highlightValue: 'hover:bg:primary'
+    }
   ]
 };

package/src/definitions/visual-transforms.js CHANGED Viewed

@@ -27,6 +27,20 @@ export const transformScale = {
   ],
   examples: [
     { code: '<div visual="transition:transform hover:scale:110">Hover to grow</div>', description: 'Scale on hover' }
+  ],
+  preview: [
+    {
+      title: 'Scale Transform',
+      titleMs: 'Transformasi Skala',
+      description: 'Scale elements up or down',
+      descriptionMs: 'Skala elemen ke atas atau ke bawah',
+      html: `<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(0.75);">75%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">100%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(1.25);">125%</div>
+</div>`,
+      highlightValue: 'scale:110'
+    }
   ]
 };
@@ -51,6 +65,20 @@ export const transformRotate = {
   ],
   examples: [
     { code: '<div visual="rotate:45">Rotated 45 degrees</div>', description: '45 degree rotation' }
+  ],
+  preview: [
+    {
+      title: 'Rotate Transform',
+      titleMs: 'Transformasi Putaran',
+      description: 'Rotate elements by degrees',
+      descriptionMs: 'Putar elemen mengikut darjah',
+      html: `<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(0deg);">0°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg);">45°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(90deg);">90°</div>
+</div>`,
+      highlightValue: 'rotate:45'
+    }
   ]
 };
@@ -75,6 +103,20 @@ export const transformTranslate = {
   ],
   examples: [
     { code: '<div visual="translate-x:full">Moved right</div>', description: 'Translate right' }
+  ],
+  preview: [
+    {
+      title: 'Translate Transform',
+      titleMs: 'Transformasi Alih',
+      description: 'Move elements position',
+      descriptionMs: 'Alihkan kedudukan elemen',
+      html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
+  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
+  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
+  <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
+</div>`,
+      highlightValue: 'translate-x:full'
+    }
   ]
 };
@@ -99,6 +141,20 @@ export const transformSkew = {
   ],
   examples: [
     { code: '<div visual="skew-x:6">Skewed element</div>', description: 'Skew 6 degrees' }
+  ],
+  preview: [
+    {
+      title: 'Skew Transform',
+      titleMs: 'Transformasi Condong',
+      description: 'Skew elements along axes',
+      descriptionMs: 'Condongkan elemen sepanjang paksi',
+      html: `<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(0deg);">0°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(6deg);">6°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(12deg);">12°</div>
+</div>`,
+      highlightValue: 'skew-x:6'
+    }
   ]
 };
@@ -127,6 +183,19 @@ export const transformOrigin = {
   ],
   examples: [
     { code: '<div visual="rotate:45 origin:top-left">Rotate from corner</div>', description: 'Rotate from corner' }
+  ],
+  preview: [
+    {
+      title: 'Transform Origin',
+      titleMs: 'Asal Transformasi',
+      description: 'Set the pivot point for transforms',
+      descriptionMs: 'Tetapkan titik pangsi untuk transformasi',
+      html: `<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg); transform-origin: center;">center</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg); transform-origin: top-left;">top-left</div>
+</div>`,
+      highlightValue: 'origin:center'
+    }
   ]
 };