@bookklik/senangstart-css 0.1.3 → 0.1.7

package/src/definitions/layout-positioning.js

@@ -0,0 +1,89 @@
+/**
+ * SenangStart CSS - Layout Positioning Definitions
+ * Position, inset, and z-index utility definitions
+ */
+
+// ======================
+// POSITION
+// ======================
+
+export const position = {
+  name: 'position',
+  property: 'layout',
+  syntax: 'layout="[position-value]"',
+  description: 'Set the positioning method',
+  descriptionMs: 'Tetapkan kaedah kedudukan',
+  category: 'layout',
+  values: [
+    { value: 'static', css: 'position: static;', description: 'Default positioning', descriptionMs: 'Kedudukan lalai' },
+    { value: 'relative', css: 'position: relative;', description: 'Relative to normal position', descriptionMs: 'Relatif kepada kedudukan normal' },
+    { value: 'absolute', css: 'position: absolute;', description: 'Absolute within container', descriptionMs: 'Mutlak dalam bekas' },
+    { value: 'fixed', css: 'position: fixed;', description: 'Fixed to viewport', descriptionMs: 'Tetap pada port pandangan' },
+    { value: 'sticky', css: 'position: sticky;', description: 'Sticky positioning', descriptionMs: 'Kedudukan melekit' }
+  ],
+  examples: [
+    { code: '<div layout="absolute">Absolute positioned</div>', description: 'Absolute position' },
+    { code: '<div layout="fixed">Fixed to viewport</div>', description: 'Fixed position' }
+  ]
+};
+
+// ======================
+// INSET (POSITIONING)
+// ======================
+
+export const inset = {
+  name: 'inset',
+  property: 'layout',
+  syntax: 'layout="inset:[value]" or layout="top:[value]"',
+  description: 'Control positioning offsets',
+  descriptionMs: 'Kawal ofset kedudukan',
+  category: 'layout',
+  usesScale: 'spacing',
+  supportsArbitrary: true,
+  values: [
+    { value: 'inset', css: 'inset: {value};', description: 'All sides', descriptionMs: 'Semua sisi' },
+    { value: 'inset-x', css: 'left: {value}; right: {value};', description: 'Left and right', descriptionMs: 'Kiri dan kanan' },
+    { value: 'inset-y', css: 'top: {value}; bottom: {value};', description: 'Top and bottom', descriptionMs: 'Atas dan bawah' },
+    { value: 'top', css: 'top: {value};', description: 'Top offset', descriptionMs: 'Ofset atas' },
+    { value: 'right', css: 'right: {value};', description: 'Right offset', descriptionMs: 'Ofset kanan' },
+    { value: 'bottom', css: 'bottom: {value};', description: 'Bottom offset', descriptionMs: 'Ofset bawah' },
+    { value: 'left', css: 'left: {value};', description: 'Left offset', descriptionMs: 'Ofset kiri' }
+  ],
+  examples: [
+    { code: '<div layout="absolute inset:0">Full coverage</div>', description: 'Cover parent' },
+    { code: '<div layout="absolute top:medium left:medium">Offset</div>', description: 'Offset positioning' }
+  ]
+};
+
+// ======================
+// Z-INDEX
+// ======================
+
+export const zIndex = {
+  name: 'z-index',
+  property: 'layout',
+  syntax: 'layout="z:[value]"',
+  description: 'Control stacking order',
+  descriptionMs: 'Kawal susunan tindanan',
+  category: 'layout',
+  usesScale: 'zIndex',
+  values: [
+    { value: 'base', css: 'z-index: var(--z-base);', description: 'Base layer (0)', descriptionMs: 'Lapisan asas (0)' },
+    { value: 'low', css: 'z-index: var(--z-low);', description: 'Low layer (10)', descriptionMs: 'Lapisan rendah (10)' },
+    { value: 'mid', css: 'z-index: var(--z-mid);', description: 'Middle layer (50)', descriptionMs: 'Lapisan tengah (50)' },
+    { value: 'high', css: 'z-index: var(--z-high);', description: 'High layer (100)', descriptionMs: 'Lapisan tinggi (100)' },
+    { value: 'top', css: 'z-index: var(--z-top);', description: 'Top layer (9999)', descriptionMs: 'Lapisan teratas (9999)' }
+  ],
+  examples: [
+    { code: '<div layout="z:top">On top</div>', description: 'Highest z-index' }
+  ]
+};
+
+// Export positioning definitions
+export const positioningDefinitions = {
+  position,
+  inset,
+  zIndex
+};
+
+export default positioningDefinitions;

package/src/definitions/layout-table.js

@@ -0,0 +1,98 @@
+/**
+ * SenangStart CSS - Layout Table Definitions
+ * Table-related layout utility definitions
+ */
+
+// ======================
+// BORDER COLLAPSE
+// ======================
+
+export const borderCollapse = {
+  name: 'border-collapse',
+  property: 'layout',
+  syntax: 'layout="border:[value]"',
+  description: 'Control table border collapse',
+  descriptionMs: 'Kawal runtuhan sempadan jadual',
+  category: 'layout',
+  values: [
+    { value: 'collapse', css: 'border-collapse: collapse;', description: 'Collapse borders', descriptionMs: 'Runtuhkan sempadan' },
+    { value: 'separate', css: 'border-collapse: separate;', description: 'Separate borders', descriptionMs: 'Asingkan sempadan' }
+  ],
+  examples: [
+    { code: '<table layout="border:collapse">Collapsed table</table>', description: 'Collapse table borders' }
+  ]
+};
+
+// ======================
+// BORDER SPACING
+// ======================
+
+export const borderSpacing = {
+  name: 'border-spacing',
+  property: 'layout',
+  syntax: 'layout="border-spacing:[value]"',
+  description: 'Control spacing between table borders',
+  descriptionMs: 'Kawal jarak antara sempadan jadual',
+  category: 'layout',
+  usesScale: 'spacing',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: 'border-spacing', css: 'border-spacing: {value};', description: 'All spacing', descriptionMs: 'Semua jarak' },
+    { value: 'border-spacing-x', css: 'border-spacing: {value} 0;', description: 'Horizontal spacing', descriptionMs: 'Jarak mendatar' },
+    { value: 'border-spacing-y', css: 'border-spacing: 0 {value};', description: 'Vertical spacing', descriptionMs: 'Jarak menegak' }
+  ],
+  examples: [
+    { code: '<table layout="border-separate border-spacing:small">Spaced</table>', description: 'Spaced table borders' }
+  ]
+};
+
+// ======================
+// TABLE LAYOUT
+// ======================
+
+export const tableLayout = {
+  name: 'table-layout',
+  property: 'layout',
+  syntax: 'layout="table:[value]"',
+  description: 'Control table layout algorithm',
+  descriptionMs: 'Kawal algoritma susun atur jadual',
+  category: 'layout',
+  values: [
+    { value: 'auto', css: 'table-layout: auto;', description: 'Auto layout', descriptionMs: 'Susun atur automatik' },
+    { value: 'fixed', css: 'table-layout: fixed;', description: 'Fixed layout', descriptionMs: 'Susun atur tetap' }
+  ],
+  examples: [
+    { code: '<table layout="table:fixed">Fixed width columns</table>', description: 'Fixed column widths' }
+  ]
+};
+
+// ======================
+// CAPTION SIDE
+// ======================
+
+export const captionSide = {
+  name: 'caption-side',
+  property: 'layout',
+  syntax: 'layout="caption:[value]"',
+  description: 'Control table caption position',
+  descriptionMs: 'Kawal kedudukan kapsyen jadual',
+  category: 'layout',
+  values: [
+    { value: 'top', css: 'caption-side: top;', description: 'Caption on top', descriptionMs: 'Kapsyen di atas' },
+    { value: 'bottom', css: 'caption-side: bottom;', description: 'Caption on bottom', descriptionMs: 'Kapsyen di bawah' }
+  ],
+  examples: [
+    { code: '<caption layout="caption:bottom">Bottom caption</caption>', description: 'Bottom caption' }
+  ]
+};
+
+// Export table definitions
+export const tableDefinitions = {
+  borderCollapse,
+  borderSpacing,
+  tableLayout,
+  captionSide
+};
+
+export default tableDefinitions;

package/src/definitions/layout-utilities.js

@@ -0,0 +1,262 @@
+/**
+ * SenangStart CSS - Layout Utilities Definitions
+ * Miscellaneous layout utility definitions
+ */
+
+// ======================
+// VISIBILITY
+// ======================
+
+export const visibility = {
+  name: 'visibility',
+  property: 'layout',
+  syntax: 'layout="[visibility-value]"',
+  description: 'Control element visibility',
+  descriptionMs: 'Kawal ketampakan elemen',
+  category: 'layout',
+  values: [
+    { value: 'visible', css: 'visibility: visible;', description: 'Element is visible', descriptionMs: 'Elemen kelihatan' },
+    { value: 'invisible', css: 'visibility: hidden;', description: 'Element is invisible but takes space', descriptionMs: 'Elemen tidak kelihatan tetapi mengambil ruang' }
+  ],
+  examples: [
+    { code: '<div layout="invisible">Invisible but present</div>', description: 'Hide visually' }
+  ]
+};
+
+// ======================
+// OVERFLOW
+// ======================
+
+export const overflow = {
+  name: 'overflow',
+  property: 'layout',
+  syntax: 'layout="overflow:[value]"',
+  description: 'Control content overflow behavior',
+  descriptionMs: 'Kawal kelakuan limpahan kandungan',
+  category: 'layout',
+  values: [
+    { value: 'auto', css: 'overflow: auto;', description: 'Scrollbar when needed', descriptionMs: 'Bar skrol bila perlu' },
+    { value: 'hidden', css: 'overflow: hidden;', description: 'Hide overflow', descriptionMs: 'Sembunyikan limpahan' },
+    { value: 'visible', css: 'overflow: visible;', description: 'Show overflow', descriptionMs: 'Tunjukkan limpahan' },
+    { value: 'scroll', css: 'overflow: scroll;', description: 'Always show scrollbar', descriptionMs: 'Sentiasa tunjuk bar skrol' },
+    { value: 'clip', css: 'overflow: clip;', description: 'Clip overflow', descriptionMs: 'Potong limpahan' }
+  ],
+  examples: [
+    { code: '<div layout="overflow:hidden">Clipped content</div>', description: 'Hide overflow' },
+    { code: '<div layout="overflow:auto">Scrollable</div>', description: 'Auto scrollbar' }
+  ]
+};
+
+// ======================
+// BOX SIZING
+// ======================
+
+export const boxSizing = {
+  name: 'box-sizing',
+  property: 'layout',
+  syntax: 'layout="box:[value]"',
+  description: 'Control how width and height are calculated',
+  descriptionMs: 'Kawal cara lebar dan tinggi dikira',
+  category: 'layout',
+  values: [
+    { value: 'border', css: 'box-sizing: border-box;', description: 'Include padding and border in size', descriptionMs: 'Termasuk padding dan sempadan dalam saiz' },
+    { value: 'content', css: 'box-sizing: content-box;', description: 'Exclude padding and border', descriptionMs: 'Tidak termasuk padding dan sempadan' }
+  ],
+  examples: [
+    { code: '<div layout="box:border">Border box</div>', description: 'Include border in width' }
+  ]
+};
+
+// ======================
+// FLOAT & CLEAR
+// ======================
+
+export const floatClear = {
+  name: 'float-clear',
+  property: 'layout',
+  syntax: 'layout="float:[value]" or layout="clear:[value]"',
+  description: 'Control element floating and clearing',
+  descriptionMs: 'Kawal pengapungan dan pembersihan elemen',
+  category: 'layout',
+  values: [
+    { value: 'left', css: 'float: left;', description: 'Float left', descriptionMs: 'Apung kiri' },
+    { value: 'right', css: 'float: right;', description: 'Float right', descriptionMs: 'Apung kanan' },
+    { value: 'none', css: 'float: none;', description: 'No float', descriptionMs: 'Tiada pengapungan' }
+  ],
+  examples: [
+    { code: '<img layout="float:left">Float left</img>', description: 'Float image left' },
+    { code: '<div layout="clear:both">Clear floats</div>', description: 'Clear all floats' }
+  ]
+};
+
+// ======================
+// ASPECT RATIO
+// ======================
+
+export const aspectRatio = {
+  name: 'aspect-ratio',
+  property: 'layout',
+  syntax: 'layout="aspect:[value]"',
+  description: 'Set element aspect ratio',
+  descriptionMs: 'Tetapkan nisbah aspek elemen',
+  category: 'layout',
+  supportsArbitrary: true,
+  values: [
+    { value: 'auto', css: 'aspect-ratio: auto;', description: 'Natural aspect ratio', descriptionMs: 'Nisbah aspek semula jadi' },
+    { value: 'square', css: 'aspect-ratio: 1 / 1;', description: '1:1 square', descriptionMs: 'Segi empat sama 1:1' },
+    { value: 'video', css: 'aspect-ratio: 16 / 9;', description: '16:9 video', descriptionMs: 'Video 16:9' }
+  ],
+  examples: [
+    { code: '<div layout="aspect:square">Square</div>', description: 'Square aspect ratio' },
+    { code: '<div layout="aspect:[4/3]">4:3</div>', description: 'Custom ratio' }
+  ]
+};
+
+// ======================
+// OBJECT FIT
+// ======================
+
+export const objectFit = {
+  name: 'object-fit',
+  property: 'layout',
+  syntax: 'layout="object:[value]"',
+  description: 'Control how media content fits its container',
+  descriptionMs: 'Kawal bagaimana kandungan media muat dalam bekasnya',
+  category: 'layout',
+  values: [
+    { value: 'contain', css: 'object-fit: contain;', description: 'Scale to fit, preserve ratio', descriptionMs: 'Skala untuk muat, kekalkan nisbah' },
+    { value: 'cover', css: 'object-fit: cover;', description: 'Cover container, may crop', descriptionMs: 'Tutup bekas, mungkin dipotong' },
+    { value: 'fill', css: 'object-fit: fill;', description: 'Stretch to fill', descriptionMs: 'Regang untuk mengisi' },
+    { value: 'none', css: 'object-fit: none;', description: 'No scaling', descriptionMs: 'Tiada penskalaan' },
+    { value: 'scale-down', css: 'object-fit: scale-down;', description: 'Smaller of none or contain', descriptionMs: 'Lebih kecil antara tiada atau kandung' }
+  ],
+  examples: [
+    { code: '<img layout="object:cover">Cover image</img>', description: 'Cover fit' }
+  ]
+};
+
+// ======================
+// OBJECT POSITION
+// ======================
+
+export const objectPosition = {
+  name: 'object-position',
+  property: 'layout',
+  syntax: 'layout="object-pos:[value]"',
+  description: 'Position replaced element content within container',
+  descriptionMs: 'Letakkan kandungan elemen diganti dalam bekas',
+  category: 'layout',
+  supportsArbitrary: true,
+  values: [
+    { value: 'center', css: 'object-position: center;', description: 'Center position', descriptionMs: 'Kedudukan tengah' },
+    { value: 'top', css: 'object-position: top;', description: 'Top position', descriptionMs: 'Kedudukan atas' },
+    { value: 'bottom', css: 'object-position: bottom;', description: 'Bottom position', descriptionMs: 'Kedudukan bawah' },
+    { value: 'left', css: 'object-position: left;', description: 'Left position', descriptionMs: 'Kedudukan kiri' },
+    { value: 'right', css: 'object-position: right;', description: 'Right position', descriptionMs: 'Kedudukan kanan' },
+    { value: 'top-left', css: 'object-position: top left;', description: 'Top left', descriptionMs: 'Atas kiri' },
+    { value: 'top-right', css: 'object-position: top right;', description: 'Top right', descriptionMs: 'Atas kanan' },
+    { value: 'bottom-left', css: 'object-position: bottom left;', description: 'Bottom left', descriptionMs: 'Bawah kiri' },
+    { value: 'bottom-right', css: 'object-position: bottom right;', description: 'Bottom right', descriptionMs: 'Bawah kanan' }
+  ],
+  examples: [
+    { code: '<img layout="object:cover object-pos:top">Top positioned</img>', description: 'Top position' }
+  ]
+};
+
+// ======================
+// CONTAINER
+// ======================
+
+export const container = {
+  name: 'container',
+  property: 'layout',
+  syntax: 'layout="container"',
+  description: 'Create a centered container with max-width',
+  descriptionMs: 'Cipta bekas berpusat dengan lebar maksimum',
+  category: 'layout',
+  values: [
+    { value: 'container', css: 'width: 100%; margin-left: auto; margin-right: auto;', description: 'Centered container', descriptionMs: 'Bekas berpusat' }
+  ],
+  examples: [
+    { code: '<div layout="container">Centered content</div>', description: 'Container' }
+  ]
+};
+
+// ======================
+// ISOLATION
+// ======================
+
+export const isolation = {
+  name: 'isolation',
+  property: 'layout',
+  syntax: 'layout="isolation:[value]"',
+  description: 'Create new stacking context',
+  descriptionMs: 'Cipta konteks tindanan baharu',
+  category: 'layout',
+  values: [
+    { value: 'isolate', css: 'isolation: isolate;', description: 'Create stacking context', descriptionMs: 'Cipta konteks tindanan' },
+    { value: 'auto', css: 'isolation: auto;', description: 'Auto isolation', descriptionMs: 'Pengasingan automatik' }
+  ],
+  examples: [
+    { code: '<div layout="isolation:isolate">Isolated</div>', description: 'Create stacking context' }
+  ]
+};
+
+// ======================
+// OVERSCROLL
+// ======================
+
+export const overscroll = {
+  name: 'overscroll',
+  property: 'layout',
+  syntax: 'layout="overscroll:[value]"',
+  description: 'Control scroll chaining behavior',
+  descriptionMs: 'Kawal kelakuan rantaian skrol',
+  category: 'layout',
+  values: [
+    { value: 'auto', css: 'overscroll-behavior: auto;', description: 'Default behavior', descriptionMs: 'Kelakuan lalai' },
+    { value: 'contain', css: 'overscroll-behavior: contain;', description: 'Contain scroll', descriptionMs: 'Kandung skrol' },
+    { value: 'none', css: 'overscroll-behavior: none;', description: 'No scroll chaining', descriptionMs: 'Tiada rantaian skrol' }
+  ],
+  examples: [
+    { code: '<div layout="overscroll:contain">Contained scroll</div>', description: 'Prevent scroll chaining' }
+  ]
+};
+
+// ======================
+// COLUMNS
+// ======================
+
+export const columns = {
+  name: 'columns',
+  property: 'layout',
+  syntax: 'layout="cols:[value]"',
+  description: 'Create multi-column layouts',
+  descriptionMs: 'Cipta susun atur berbilang lajur',
+  category: 'layout',
+  dynamic: true,
+  values: [
+    { value: '1-12', css: 'columns: {n};', description: 'N columns', descriptionMs: 'N lajur' },
+    { value: 'auto', css: 'columns: auto;', description: 'Auto columns', descriptionMs: 'Lajur automatik' }
+  ],
+  examples: [
+    { code: '<div layout="cols:3">Three columns</div>', description: 'Three column text' }
+  ]
+};
+
+// Export utilities definitions
+export const utilitiesDefinitions = {
+  visibility,
+  overflow,
+  boxSizing,
+  floatClear,
+  aspectRatio,
+  objectFit,
+  objectPosition,
+  container,
+  isolation,
+  overscroll,
+  columns
+};
+
+export default utilitiesDefinitions;

package/src/definitions/layout.js

@@ -0,0 +1,195 @@
+/**
+ * SenangStart CSS - Layout Utility Definitions
+ * Main entry point that re-exports from split files
+ */
+
+// Import from split files
+import flexDefinitions, {
+  display,
+  flexDirection,
+  flexWrap,
+  flexItems,
+  flexShorthand,
+  flexBasis,
+  order
+} from './layout-flex.js';
+
+import alignmentDefinitions, {
+  justifyContent,
+  alignItems,
+  alignSelf,
+  alignContent,
+  shorthandAlignment,
+  justifyItems,
+  justifySelf,
+  placeContent,
+  placeItems,
+  placeSelf
+} from './layout-alignment.js';
+
+import gridDefinitions, {
+  gridColumns,
+  gridRows,
+  gridColSpan,
+  gridRowSpan,
+  gridAutoFlow,
+  gridAutoSizing
+} from './layout-grid.js';
+
+import positioningDefinitions, {
+  position,
+  inset,
+  zIndex
+} from './layout-positioning.js';
+
+import utilitiesDefinitions, {
+  visibility,
+  overflow,
+  boxSizing,
+  floatClear,
+  aspectRatio,
+  objectFit,
+  objectPosition,
+  container,
+  isolation,
+  overscroll,
+  columns
+} from './layout-utilities.js';
+
+import tableDefinitions, {
+  borderCollapse,
+  borderSpacing,
+  tableLayout,
+  captionSide
+} from './layout-table.js';
+
+// Re-export all individual definitions for backwards compatibility
+export {
+  // Flex
+  display,
+  flexDirection,
+  flexWrap,
+  flexItems,
+  flexShorthand,
+  flexBasis,
+  order,
+  // Alignment
+  justifyContent,
+  alignItems,
+  alignSelf,
+  alignContent,
+  shorthandAlignment,
+  justifyItems,
+  justifySelf,
+  placeContent,
+  placeItems,
+  placeSelf,
+  // Grid
+  gridColumns,
+  gridRows,
+  gridColSpan,
+  gridRowSpan,
+  gridAutoFlow,
+  gridAutoSizing,
+  // Positioning
+  position,
+  inset,
+  zIndex,
+  // Utilities
+  visibility,
+  overflow,
+  boxSizing,
+  floatClear,
+  aspectRatio,
+  objectFit,
+  objectPosition,
+  container,
+  isolation,
+  overscroll,
+  columns,
+  // Table
+  borderCollapse,
+  borderSpacing,
+  tableLayout,
+  captionSide
+};
+
+// Re-export grouped definitions
+export { flexDefinitions } from './layout-flex.js';
+export { alignmentDefinitions } from './layout-alignment.js';
+export { gridDefinitions } from './layout-grid.js';
+export { positioningDefinitions } from './layout-positioning.js';
+export { utilitiesDefinitions } from './layout-utilities.js';
+export { tableDefinitions } from './layout-table.js';
+
+// Export all layout definitions combined
+export const layoutDefinitions = {
+  // Flex
+  display,
+  flexDirection,
+  flexWrap,
+  flexItems,
+  flexShorthand,
+  flexBasis,
+  order,
+  // Alignment
+  justifyContent,
+  alignItems,
+  alignSelf,
+  alignContent,
+  shorthandAlignment,
+  justifyItems,
+  justifySelf,
+  placeContent,
+  placeItems,
+  placeSelf,
+  // Grid
+  gridColumns,
+  gridRows,
+  gridColSpan,
+  gridRowSpan,
+  gridAutoFlow,
+  gridAutoSizing,
+  // Positioning
+  position,
+  inset,
+  zIndex,
+  // Utilities
+  visibility,
+  overflow,
+  boxSizing,
+  floatClear,
+  aspectRatio,
+  objectFit,
+  objectPosition,
+  container,
+  isolation,
+  overscroll,
+  columns,
+  // Table
+  borderCollapse,
+  borderSpacing,
+  tableLayout,
+  captionSide
+};
+
+// Build flat value map for CSS generator
+export function buildLayoutMap() {
+  const map = {};
+  
+  // Add all simple keyword values from definitions
+  for (const def of Object.values(layoutDefinitions)) {
+    if (def.dynamic) continue; // Skip dynamic properties that need special handling
+    
+    for (const v of def.values) {
+      // Skip range values like '1-12' that need special handling
+      if (v.value.match(/^\d+-\d+$/)) continue;
+      
+      map[v.value] = v.css;
+    }
+  }
+  
+  return map;
+}
+
+export default layoutDefinitions;