@bookklik/senangstart-css 0.1.4 → 0.1.8

package/src/definitions/visual-borders.js

@@ -0,0 +1,111 @@
+/**
+ * SenangStart CSS - Border & Outline Utility Definitions
+ * Border color, width, style, outline (including directional variants)
+ */
+
+// ======================
+// BORDER COLOR (ALL DIRECTIONS)
+// ======================
+
+export const borderColor = {
+  name: 'border',
+  property: 'visual',
+  syntax: 'visual="border:[color]" | visual="border-{t|b|l|r|x|y}:[color]"',
+  description: 'Set border color for all sides or specific sides',
+  descriptionMs: 'Tetapkan warna sempadan untuk semua sisi atau sisi tertentu',
+  category: 'visual',
+  usesScale: 'colors',
+  supportsArbitrary: true,
+  values: [
+    { value: 'primary', css: 'border-color: var(--c-primary); border-style: solid;', description: 'Primary color border', descriptionMs: 'Sempadan warna utama' },
+    { value: 'gray-300', css: 'border-color: var(--c-gray-300); border-style: solid;', description: 'Light gray border', descriptionMs: 'Sempadan kelabu cerah' },
+    { value: 'danger', css: 'border-color: var(--c-danger); border-style: solid;', description: 'Danger/error border', descriptionMs: 'Sempadan bahaya/ralat' }
+  ],
+  examples: [
+    { code: '<div visual="border:primary border-w:thin">Primary border</div>', description: 'Border on all sides' },
+    { code: '<div visual="border-t:primary border-t-w:regular">Top only</div>', description: 'Top border only' },
+    { code: '<div visual="border-b:gray-300 border-b-w:thin">Bottom only</div>', description: 'Bottom border only' },
+    { code: '<div visual="border-x:primary border-x-w:regular">Left & right</div>', description: 'Horizontal borders' },
+    { code: '<div visual="border-y:gray-300 border-y-w:thin">Top & bottom</div>', description: 'Vertical borders' }
+  ]
+};
+
+// ======================
+// BORDER WIDTH (ALL DIRECTIONS)
+// ======================
+
+export const borderWidth = {
+  name: 'border-width',
+  property: 'visual',
+  syntax: 'visual="border-w:[value]" | visual="border-{t|b|l|r|x|y}-w:[value]"',
+  description: 'Set border width for all sides or specific sides',
+  descriptionMs: 'Tetapkan lebar sempadan untuk semua sisi atau sisi tertentu',
+  category: 'visual',
+  usesScale: 'spacing',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'border-width: var(--s-none);', description: 'No border (0px)', descriptionMs: 'Tiada sempadan (0px)' },
+    { value: 'thin', css: 'border-width: var(--s-thin);', description: 'Thin border (1px)', descriptionMs: 'Sempadan nipis (1px)' },
+    { value: 'regular', css: 'border-width: var(--s-regular);', description: 'Standard border (2px)', descriptionMs: 'Sempadan standard (2px)' },
+    { value: 'thick', css: 'border-width: var(--s-thick);', description: 'Thick border (3px)', descriptionMs: 'Sempadan tebal (3px)' }
+  ],
+  examples: [
+    { code: '<div visual="border:gray-300 border-w:thin">Thin 1px border</div>', description: 'Thin border (1px)' },
+    { code: '<div visual="border:gray-300 border-w:regular">Standard 2px border</div>', description: 'Regular border (2px)' },
+    { code: '<div visual="border:gray-300 border-w:thick">Thick 3px border</div>', description: 'Thick border (3px)' },
+    { code: '<div visual="border-b:primary border-b-w:regular">Bottom border only</div>', description: 'Bottom border width' },
+    { code: '<div visual="border-x:primary border-x-w:thin">Horizontal borders</div>', description: 'Horizontal border width' }
+  ]
+};
+
+// ======================
+// BORDER STYLE
+// ======================
+
+export const borderStyle = {
+  name: 'border-style',
+  property: 'visual',
+  syntax: 'visual="border-style:[value]"',
+  description: 'Set border style',
+  descriptionMs: 'Tetapkan gaya sempadan',
+  category: 'visual',
+  values: [
+    { value: 'solid', css: 'border-style: solid;', description: 'Solid border', descriptionMs: 'Sempadan pepejal' },
+    { value: 'dashed', css: 'border-style: dashed;', description: 'Dashed border', descriptionMs: 'Sempadan putus-putus' },
+    { value: 'dotted', css: 'border-style: dotted;', description: 'Dotted border', descriptionMs: 'Sempadan bertitik' },
+    { value: 'double', css: 'border-style: double;', description: 'Double border', descriptionMs: 'Sempadan berganda' },
+    { value: 'none', css: 'border-style: none;', description: 'No border', descriptionMs: 'Tiada sempadan' }
+  ],
+  examples: [
+    { code: '<div visual="border:gray-300 border-style:dashed">Dashed border</div>', description: 'Dashed border' }
+  ]
+};
+
+// ======================
+// OUTLINE
+// ======================
+
+export const outlineColor = {
+  name: 'outline',
+  property: 'visual',
+  syntax: 'visual="outline:[color]"',
+  description: 'Set outline color',
+  descriptionMs: 'Tetapkan warna garis luar',
+  category: 'visual',
+  usesScale: 'colors',
+  supportsArbitrary: true,
+  values: [],
+  examples: [
+    { code: '<button visual="focus:outline:primary">Focus outline</button>', description: 'Focus outline' }
+  ]
+};
+
+// Export all border definitions
+export const borderDefinitions = {
+  borderColor,
+  borderWidth,
+  borderStyle,
+  outlineColor
+};
+
+export default borderDefinitions;

package/src/definitions/visual-filters.js

@@ -0,0 +1,204 @@
+/**
+ * SenangStart CSS - Filter Utility Definitions
+ * Brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, drop-shadow
+ */
+
+// ======================
+// FILTER - BRIGHTNESS
+// ======================
+
+export const filterBrightness = {
+  name: 'filter-brightness',
+  property: 'visual',
+  syntax: 'visual="brightness:[value]"',
+  description: 'Adjust brightness',
+  descriptionMs: 'Laraskan kecerahan',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'dim', css: 'filter: brightness(0.5);', description: '50% brightness', descriptionMs: '50% kecerahan' },
+    { value: 'dark', css: 'filter: brightness(0.75);', description: '75% brightness', descriptionMs: '75% kecerahan' },
+    { value: 'normal', css: 'filter: brightness(1);', description: 'Normal brightness', descriptionMs: 'Kecerahan normal' },
+    { value: 'bright', css: 'filter: brightness(1.25);', description: '125% brightness', descriptionMs: '125% kecerahan' },
+    { value: 'vivid', css: 'filter: brightness(1.5);', description: '150% brightness', descriptionMs: '150% kecerahan' }
+  ],
+  examples: [
+    { code: '<img visual="brightness:bright">Brighter image</img>', description: 'Increase brightness' }
+  ]
+};
+
+// ======================
+// FILTER - CONTRAST
+// ======================
+
+export const filterContrast = {
+  name: 'filter-contrast',
+  property: 'visual',
+  syntax: 'visual="contrast:[value]"',
+  description: 'Adjust contrast',
+  descriptionMs: 'Laraskan kontras',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'low', css: 'filter: contrast(0.5);', description: 'Low contrast', descriptionMs: 'Kontras rendah' },
+    { value: 'reduced', css: 'filter: contrast(0.75);', description: 'Reduced contrast', descriptionMs: 'Kontras dikurangkan' },
+    { value: 'normal', css: 'filter: contrast(1);', description: 'Normal contrast', descriptionMs: 'Kontras normal' },
+    { value: 'high', css: 'filter: contrast(1.25);', description: 'High contrast', descriptionMs: 'Kontras tinggi' },
+    { value: 'max', css: 'filter: contrast(1.5);', description: 'Maximum contrast', descriptionMs: 'Kontras maksimum' }
+  ],
+  examples: [
+    { code: '<img visual="contrast:high">High contrast</img>', description: 'Increase contrast' }
+  ]
+};
+
+// ======================
+// FILTER - GRAYSCALE
+// ======================
+
+export const filterGrayscale = {
+  name: 'filter-grayscale',
+  property: 'visual',
+  syntax: 'visual="grayscale:[value]"',
+  description: 'Apply grayscale filter',
+  descriptionMs: 'Terapkan penapis skala kelabu',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'filter: grayscale(0%);', description: 'No grayscale', descriptionMs: 'Tiada skala kelabu' },
+    { value: 'partial', css: 'filter: grayscale(50%);', description: '50% grayscale', descriptionMs: '50% skala kelabu' },
+    { value: 'full', css: 'filter: grayscale(100%);', description: 'Full grayscale', descriptionMs: 'Skala kelabu penuh' }
+  ],
+  examples: [
+    { code: '<img visual="grayscale:full">Black and white</img>', description: 'Full grayscale' }
+  ]
+};
+
+// ======================
+// FILTER - HUE ROTATE
+// ======================
+
+export const filterHueRotate = {
+  name: 'filter-hue-rotate',
+  property: 'visual',
+  syntax: 'visual="hue-rotate:[degrees]"',
+  description: 'Rotate hue colors',
+  descriptionMs: 'Putar warna rona',
+  category: 'visual',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: '0', css: 'filter: hue-rotate(0deg);', description: 'No rotation', descriptionMs: 'Tiada putaran' },
+    { value: '90', css: 'filter: hue-rotate(90deg);', description: '90° rotation', descriptionMs: 'Putaran 90°' },
+    { value: '180', css: 'filter: hue-rotate(180deg);', description: '180° rotation', descriptionMs: 'Putaran 180°' }
+  ],
+  examples: [
+    { code: '<img visual="hue-rotate:90">Shifted hue</img>', description: 'Rotate hue 90 degrees' }
+  ]
+};
+
+// ======================
+// FILTER - INVERT
+// ======================
+
+export const filterInvert = {
+  name: 'filter-invert',
+  property: 'visual',
+  syntax: 'visual="invert:[value]"',
+  description: 'Invert colors',
+  descriptionMs: 'Songsangkan warna',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'filter: invert(0%);', description: 'No inversion', descriptionMs: 'Tiada penyongsangan' },
+    { value: 'partial', css: 'filter: invert(50%);', description: '50% inversion', descriptionMs: '50% penyongsangan' },
+    { value: 'full', css: 'filter: invert(100%);', description: 'Full inversion', descriptionMs: 'Penyongsangan penuh' }
+  ],
+  examples: [
+    { code: '<img visual="invert:full">Inverted colors</img>', description: 'Invert all colors' }
+  ]
+};
+
+// ======================
+// FILTER - SATURATE
+// ======================
+
+export const filterSaturate = {
+  name: 'filter-saturate',
+  property: 'visual',
+  syntax: 'visual="saturate:[value]"',
+  description: 'Adjust saturation',
+  descriptionMs: 'Laraskan ketepuan',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'filter: saturate(0);', description: 'Desaturated', descriptionMs: 'Tidak tepu' },
+    { value: 'low', css: 'filter: saturate(0.5);', description: 'Low saturation', descriptionMs: 'Ketepuan rendah' },
+    { value: 'normal', css: 'filter: saturate(1);', description: 'Normal saturation', descriptionMs: 'Ketepuan normal' },
+    { value: 'high', css: 'filter: saturate(1.5);', description: 'High saturation', descriptionMs: 'Ketepuan tinggi' },
+    { value: 'vivid', css: 'filter: saturate(2);', description: 'Very saturated', descriptionMs: 'Sangat tepu' }
+  ],
+  examples: [
+    { code: '<img visual="saturate:vivid">Vivid colors</img>', description: 'Increase saturation' }
+  ]
+};
+
+// ======================
+// FILTER - SEPIA
+// ======================
+
+export const filterSepia = {
+  name: 'filter-sepia',
+  property: 'visual',
+  syntax: 'visual="sepia:[value]"',
+  description: 'Apply sepia filter',
+  descriptionMs: 'Terapkan penapis sepia',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'filter: sepia(0%);', description: 'No sepia', descriptionMs: 'Tiada sepia' },
+    { value: 'partial', css: 'filter: sepia(50%);', description: '50% sepia', descriptionMs: '50% sepia' },
+    { value: 'full', css: 'filter: sepia(100%);', description: 'Full sepia', descriptionMs: 'Sepia penuh' }
+  ],
+  examples: [
+    { code: '<img visual="sepia:full">Vintage look</img>', description: 'Full sepia effect' }
+  ]
+};
+
+// ======================
+// FILTER - DROP SHADOW
+// ======================
+
+export const filterDropShadow = {
+  name: 'filter-drop-shadow',
+  property: 'visual',
+  syntax: 'visual="drop-shadow:[value]"',
+  description: 'Add drop shadow',
+  descriptionMs: 'Tambah bayang jatuh',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'filter: drop-shadow(none);', description: 'No shadow', descriptionMs: 'Tiada bayang' },
+    { value: 'tiny', css: 'filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));', description: 'Tiny shadow', descriptionMs: 'Bayang kecil' },
+    { value: 'small', css: 'filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));', description: 'Small shadow', descriptionMs: 'Bayang kecil' },
+    { value: 'medium', css: 'filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07));', description: 'Medium shadow', descriptionMs: 'Bayang sederhana' },
+    { value: 'big', css: 'filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04));', description: 'Large shadow', descriptionMs: 'Bayang besar' },
+    { value: 'giant', css: 'filter: drop-shadow(0 20px 13px rgba(0,0,0,0.03));', description: 'Giant shadow', descriptionMs: 'Bayang gergasi' }
+  ],
+  examples: [
+    { code: '<img visual="drop-shadow:medium">Shadow on image</img>', description: 'Drop shadow on irregular shapes' }
+  ]
+};
+
+// Export all filter definitions
+export const filterDefinitions = {
+  filterBrightness,
+  filterContrast,
+  filterGrayscale,
+  filterHueRotate,
+  filterInvert,
+  filterSaturate,
+  filterSepia,
+  filterDropShadow
+};
+
+export default filterDefinitions;

package/src/definitions/visual-interactivity.js

@@ -0,0 +1,292 @@
+/**
+ * SenangStart CSS - Interactivity Utility Definitions
+ * Scroll, resize, touch, and other interactive utilities
+ */
+
+// ======================
+// SCROLL BEHAVIOR
+// ======================
+
+export const scrollBehavior = {
+  name: 'scroll-behavior',
+  property: 'visual',
+  syntax: 'visual="scroll-behavior:[value]"',
+  description: 'Set scroll behavior',
+  descriptionMs: 'Tetapkan kelakuan skrol',
+  category: 'visual',
+  values: [
+    { value: 'auto', css: 'scroll-behavior: auto;', description: 'Instant scroll', descriptionMs: 'Skrol serta-merta' },
+    { value: 'smooth', css: 'scroll-behavior: smooth;', description: 'Smooth scroll', descriptionMs: 'Skrol lancar' }
+  ],
+  examples: [
+    { code: '<html visual="scroll-behavior:smooth">Smooth scrolling</html>', description: 'Smooth scroll' }
+  ]
+};
+
+// ======================
+// SCROLL MARGIN
+// ======================
+
+export const scrollMargin = {
+  name: 'scroll-margin',
+  property: 'visual',
+  syntax: 'visual="scroll-m:[value]"',
+  description: 'Set scroll margin for snap',
+  descriptionMs: 'Tetapkan margin skrol untuk snap',
+  category: 'visual',
+  usesScale: 'spacing',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: 'scroll-m', css: 'scroll-margin: {value};', description: 'All sides', descriptionMs: 'Semua sisi' },
+    { value: 'scroll-m-t', css: 'scroll-margin-top: {value};', description: 'Top margin', descriptionMs: 'Margin atas' },
+    { value: 'scroll-m-r', css: 'scroll-margin-right: {value};', description: 'Right margin', descriptionMs: 'Margin kanan' },
+    { value: 'scroll-m-b', css: 'scroll-margin-bottom: {value};', description: 'Bottom margin', descriptionMs: 'Margin bawah' },
+    { value: 'scroll-m-l', css: 'scroll-margin-left: {value};', description: 'Left margin', descriptionMs: 'Margin kiri' }
+  ],
+  examples: [
+    { code: '<div visual="scroll-m:medium">Scroll margin</div>', description: 'Scroll margin' }
+  ]
+};
+
+// ======================
+// SCROLL PADDING
+// ======================
+
+export const scrollPadding = {
+  name: 'scroll-padding',
+  property: 'visual',
+  syntax: 'visual="scroll-p:[value]"',
+  description: 'Set scroll padding for snap',
+  descriptionMs: 'Tetapkan padding skrol untuk snap',
+  category: 'visual',
+  usesScale: 'spacing',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: 'scroll-p', css: 'scroll-padding: {value};', description: 'All sides', descriptionMs: 'Semua sisi' },
+    { value: 'scroll-p-t', css: 'scroll-padding-top: {value};', description: 'Top padding', descriptionMs: 'Padding atas' },
+    { value: 'scroll-p-r', css: 'scroll-padding-right: {value};', description: 'Right padding', descriptionMs: 'Padding kanan' },
+    { value: 'scroll-p-b', css: 'scroll-padding-bottom: {value};', description: 'Bottom padding', descriptionMs: 'Padding bawah' },
+    { value: 'scroll-p-l', css: 'scroll-padding-left: {value};', description: 'Left padding', descriptionMs: 'Padding kiri' }
+  ],
+  examples: [
+    { code: '<div visual="scroll-p:big">Scroll padding</div>', description: 'Scroll padding' }
+  ]
+};
+
+// ======================
+// SCROLL SNAP ALIGN
+// ======================
+
+export const scrollSnapAlign = {
+  name: 'scroll-snap-align',
+  property: 'visual',
+  syntax: 'visual="snap-align:[value]"',
+  description: 'Set scroll snap alignment',
+  descriptionMs: 'Tetapkan penjajaran snap skrol',
+  category: 'visual',
+  values: [
+    { value: 'start', css: 'scroll-snap-align: start;', description: 'Snap to start', descriptionMs: 'Snap ke permulaan' },
+    { value: 'end', css: 'scroll-snap-align: end;', description: 'Snap to end', descriptionMs: 'Snap ke hujung' },
+    { value: 'center', css: 'scroll-snap-align: center;', description: 'Snap to center', descriptionMs: 'Snap ke tengah' },
+    { value: 'none', css: 'scroll-snap-align: none;', description: 'No snap', descriptionMs: 'Tiada snap' }
+  ],
+  examples: [
+    { code: '<div visual="snap-align:start">Snap to start</div>', description: 'Start alignment' }
+  ]
+};
+
+// ======================
+// SCROLL SNAP STOP
+// ======================
+
+export const scrollSnapStop = {
+  name: 'scroll-snap-stop',
+  property: 'visual',
+  syntax: 'visual="snap-stop:[value]"',
+  description: 'Control scroll snap stop behavior',
+  descriptionMs: 'Kawal kelakuan hentian snap skrol',
+  category: 'visual',
+  values: [
+    { value: 'normal', css: 'scroll-snap-stop: normal;', description: 'Normal stop', descriptionMs: 'Hentian biasa' },
+    { value: 'always', css: 'scroll-snap-stop: always;', description: 'Always stop', descriptionMs: 'Sentiasa berhenti' }
+  ],
+  examples: [
+    { code: '<div visual="snap-stop:always">Always stop here</div>', description: 'Force stop' }
+  ]
+};
+
+// ======================
+// SCROLL SNAP TYPE
+// ======================
+
+export const scrollSnapType = {
+  name: 'scroll-snap-type',
+  property: 'visual',
+  syntax: 'visual="snap-type:[value]"',
+  description: 'Set scroll snap type',
+  descriptionMs: 'Tetapkan jenis snap skrol',
+  category: 'visual',
+  values: [
+    { value: 'none', css: 'scroll-snap-type: none;', description: 'No snapping', descriptionMs: 'Tiada snapping' },
+    { value: 'x', css: 'scroll-snap-type: x mandatory;', description: 'Horizontal snap', descriptionMs: 'Snap mendatar' },
+    { value: 'y', css: 'scroll-snap-type: y mandatory;', description: 'Vertical snap', descriptionMs: 'Snap menegak' },
+    { value: 'both', css: 'scroll-snap-type: both mandatory;', description: 'Both axes', descriptionMs: 'Kedua-dua paksi' },
+    { value: 'x-proximity', css: 'scroll-snap-type: x proximity;', description: 'Horizontal proximity', descriptionMs: 'Kedekatan mendatar' },
+    { value: 'y-proximity', css: 'scroll-snap-type: y proximity;', description: 'Vertical proximity', descriptionMs: 'Kedekatan menegak' }
+  ],
+  examples: [
+    { code: '<div visual="snap-type:x">Horizontal snap container</div>', description: 'Horizontal snap' }
+  ]
+};
+
+// ======================
+// TOUCH ACTION
+// ======================
+
+export const touchAction = {
+  name: 'touch-action',
+  property: 'visual',
+  syntax: 'visual="touch:[value]"',
+  description: 'Control touch interactions',
+  descriptionMs: 'Kawal interaksi sentuh',
+  category: 'visual',
+  values: [
+    { value: 'auto', css: 'touch-action: auto;', description: 'Default touch', descriptionMs: 'Sentuh lalai' },
+    { value: 'none', css: 'touch-action: none;', description: 'Disable touch', descriptionMs: 'Lumpuhkan sentuh' },
+    { value: 'pan-x', css: 'touch-action: pan-x;', description: 'Pan horizontally', descriptionMs: 'Pan mendatar' },
+    { value: 'pan-y', css: 'touch-action: pan-y;', description: 'Pan vertically', descriptionMs: 'Pan menegak' },
+    { value: 'pan-left', css: 'touch-action: pan-left;', description: 'Pan left', descriptionMs: 'Pan kiri' },
+    { value: 'pan-right', css: 'touch-action: pan-right;', description: 'Pan right', descriptionMs: 'Pan kanan' },
+    { value: 'pinch-zoom', css: 'touch-action: pinch-zoom;', description: 'Pinch to zoom', descriptionMs: 'Cubit untuk zum' },
+    { value: 'manipulation', css: 'touch-action: manipulation;', description: 'Pan and pinch only', descriptionMs: 'Pan dan cubit sahaja' }
+  ],
+  examples: [
+    { code: '<div visual="touch:manipulation">Touch optimized</div>', description: 'Optimized touch' }
+  ]
+};
+
+// ======================
+// RESIZE
+// ======================
+
+export const resize = {
+  name: 'resize',
+  property: 'visual',
+  syntax: 'visual="resize:[value]"',
+  description: 'Control element resizing',
+  descriptionMs: 'Kawal saiz semula elemen',
+  category: 'visual',
+  values: [
+    { value: 'none', css: 'resize: none;', description: 'No resize', descriptionMs: 'Tiada saiz semula' },
+    { value: 'both', css: 'resize: both;', description: 'Resize both', descriptionMs: 'Saiz semula kedua-dua' },
+    { value: 'x', css: 'resize: horizontal;', description: 'Resize horizontal', descriptionMs: 'Saiz semula mendatar' },
+    { value: 'y', css: 'resize: vertical;', description: 'Resize vertical', descriptionMs: 'Saiz semula menegak' }
+  ],
+  examples: [
+    { code: '<textarea visual="resize:y">Vertical resize only</textarea>', description: 'Vertical resize' }
+  ]
+};
+
+// ======================
+// WILL CHANGE
+// ======================
+
+export const willChange = {
+  name: 'will-change',
+  property: 'visual',
+  syntax: 'visual="will-change:[value]"',
+  description: 'Hint browser about upcoming changes',
+  descriptionMs: 'Beri petunjuk kepada pelayar tentang perubahan akan datang',
+  category: 'visual',
+  values: [
+    { value: 'auto', css: 'will-change: auto;', description: 'Auto optimization', descriptionMs: 'Pengoptimuman automatik' },
+    { value: 'scroll', css: 'will-change: scroll-position;', description: 'Scroll changes', descriptionMs: 'Perubahan skrol' },
+    { value: 'contents', css: 'will-change: contents;', description: 'Content changes', descriptionMs: 'Perubahan kandungan' },
+    { value: 'transform', css: 'will-change: transform;', description: 'Transform changes', descriptionMs: 'Perubahan transform' },
+    { value: 'opacity', css: 'will-change: opacity;', description: 'Opacity changes', descriptionMs: 'Perubahan kelegapan' }
+  ],
+  examples: [
+    { code: '<div visual="will-change:transform">Optimized for animation</div>', description: 'Transform optimization' }
+  ]
+};
+
+// ======================
+// COLOR SCHEME
+// ======================
+
+export const colorScheme = {
+  name: 'color-scheme',
+  property: 'visual',
+  syntax: 'visual="color-scheme:[value]"',
+  description: 'Set preferred color scheme',
+  descriptionMs: 'Tetapkan skema warna pilihan',
+  category: 'visual',
+  values: [
+    { value: 'light', css: 'color-scheme: light;', description: 'Light mode', descriptionMs: 'Mod cerah' },
+    { value: 'dark', css: 'color-scheme: dark;', description: 'Dark mode', descriptionMs: 'Mod gelap' },
+    { value: 'normal', css: 'color-scheme: normal;', description: 'System default', descriptionMs: 'Lalai sistem' }
+  ],
+  examples: [
+    { code: '<html visual="color-scheme:dark">Dark mode</html>', description: 'Dark mode' }
+  ]
+};
+
+// ======================
+// FIELD SIZING
+// ======================
+
+export const fieldSizing = {
+  name: 'field-sizing',
+  property: 'visual',
+  syntax: 'visual="field-sizing:[value]"',
+  description: 'Control form field sizing',
+  descriptionMs: 'Kawal saiz medan borang',
+  category: 'visual',
+  values: [
+    { value: 'fixed', css: 'field-sizing: fixed;', description: 'Fixed size', descriptionMs: 'Saiz tetap' },
+    { value: 'content', css: 'field-sizing: content;', description: 'Size to content', descriptionMs: 'Saiz mengikut kandungan' }
+  ],
+  examples: [
+    { code: '<textarea visual="field-sizing:content">Auto-grow textarea</textarea>', description: 'Auto-grow' }
+  ]
+};
+
+// ======================
+// FORCED COLOR ADJUST
+// ======================
+
+export const forcedColorAdjust = {
+  name: 'forced-color-adjust',
+  property: 'visual',
+  syntax: 'visual="forced-color:[value]"',
+  description: 'Control forced colors mode behavior',
+  descriptionMs: 'Kawal kelakuan mod warna paksa',
+  category: 'visual',
+  values: [
+    { value: 'auto', css: 'forced-color-adjust: auto;', description: 'Auto adjust', descriptionMs: 'Penyesuaian automatik' },
+    { value: 'none', css: 'forced-color-adjust: none;', description: 'No adjustment', descriptionMs: 'Tiada penyesuaian' }
+  ],
+  examples: [
+    { code: '<div visual="forced-color:none">Preserve colors in high contrast</div>', description: 'Preserve colors' }
+  ]
+};
+
+// Export all interactivity definitions
+export const interactivityDefinitions = {
+  scrollBehavior,
+  scrollMargin,
+  scrollPadding,
+  scrollSnapAlign,
+  scrollSnapStop,
+  scrollSnapType,
+  touchAction,
+  resize,
+  willChange,
+  colorScheme,
+  fieldSizing,
+  forcedColorAdjust
+};
+
+export default interactivityDefinitions;