mosaic-headless 1.2.0

package/data/style-properties.csv

@@ -0,0 +1,99 @@
+property,group,factory,value_class,accepted_values,tokenable
+display,,CSSPropertyFactory,,,
+alignItems,,CSSPropertyFactory,,normal|start|center|end|stretch|flex-start|flex-end|self-start|self-end|baseline|first baseline|last baseline,
+justifyItems,,CSSPropertyFactory,,normal|start|center|end|stretch|flex-start|flex-end|self-start|self-end|baseline|first baseline|last baseline,
+alignContent,,CSSPropertyFactory,,normal|start|center|end|stretch|space-between|space-around|space-evenly|flex-start|flex-end|baseline,
+justifyContent,,CSSPropertyFactory,,normal|start|center|end|stretch|space-between|space-around|space-evenly|flex-start|flex-end|left|right,
+flexDirection,,CSSPropertyFactory,,row|row-reverse|column|column-reverse,
+flexWrap,,CSSPropertyFactory,,nowrap|wrap|wrap-reverse,
+columnGap,,CSSCollectionVariablePropertyFactory,,,yes
+rowGap,,CSSCollectionVariablePropertyFactory,,,yes
+gridAutoFlow,,CSSPropertyFactory,,row|row dense|column|column dense,
+gridAutoColumns,,CSSCollectionVariablePropertyFactory,,,yes
+gridAutoRows,,CSSCollectionVariablePropertyFactory,,,yes
+gridTemplateColumns,,CSSGridTemplateStylePropertyFactory,,,
+gridTemplateRows,,CSSGridTemplateStylePropertyFactory,,,
+gridTemplateAreas,,CSSGridAreaPropertyFactory,,,
+gridRowStart,gridChildPosition,CSSGrouppedPropertyFactory,,,
+gridColumnStart,gridChildPosition,CSSGrouppedPropertyFactory,,,
+gridRowEnd,gridChildPosition,CSSGrouppedPropertyFactory,,,
+gridColumnEnd,gridChildPosition,CSSGrouppedPropertyFactory,,,
+flexSizing,,CSSFlexSizingPropertyFactory,,,
+flexBasis,,CSSPropertyFactory,,,
+alignSelf,,CSSPropertyFactory,,auto|start|center|end|stretch|normal|flex-start|flex-end|self-start|self-end|baseline|first baseline|last baseline,
+justifySelf,,CSSPropertyFactory,,auto|start|center|end|stretch|normal|flex-start|flex-end|self-start|self-end|baseline|first baseline|last baseline,
+order,,CSSPropertyFactory,,,
+listStylePosition,,CSSPropertyFactory,,inside|outside,
+listStyleType,,CSSListStyleTypeStylePropertyFactory,,disc|circle|square|decimal|georgian|trad-chinese-informal|kannada|none,
+fontFamily,,CSSFontFamilyPropertyFactory,,,
+textDecorationLine,,CSSPropertyFactory,,none|underline|overline|line-through,
+fontStyle,,CSSPropertyFactory,,normal|italic,
+color,,CSSColorPropertyFactory,,,yes
+fontSize,,CSSCollectionVariablePropertyFactory,,,yes
+lineHeight,,CSSCollectionVariablePropertyFactory,,,yes
+fontWeight,,CSSPropertyFactory,,100|200|300|400|500|600|700|800|900,
+textAlign,,CSSPropertyFactory,,start|center|end|justify|left|right,
+letterSpacing,,CSSCollectionVariablePropertyFactory,,,yes
+wordSpacing,,CSSCollectionVariablePropertyFactory,,,yes
+whiteSpace,,CSSPropertyFactory,,normal|pre-wrap|nowrap|pre,
+textTransform,,CSSPropertyFactory,,none|lowercase|uppercase|capitalize,
+textShadow,,CSSTextShadowStylePropertyFactory,,,
+width,,CSSCollectionVariablePropertyFactory,,,yes
+minWidth,,CSSCollectionVariablePropertyFactory,,,yes
+maxWidth,,CSSCollectionVariablePropertyFactory,,,yes
+height,,CSSCollectionVariablePropertyFactory,,,yes
+minHeight,,CSSCollectionVariablePropertyFactory,,,yes
+maxHeight,,CSSCollectionVariablePropertyFactory,,,yes
+position,,CSSPropertyFactory,,static|relative|absolute|fixed|sticky,
+zIndex,,CSSPropertyFactory,,,
+top,,CSSCollectionVariablePropertyFactory,,,yes
+right,,CSSCollectionVariablePropertyFactory,,,yes
+bottom,,CSSCollectionVariablePropertyFactory,,,yes
+left,,CSSCollectionVariablePropertyFactory,,,yes
+marginTop,,CSSCollectionVariablePropertyFactory,,,yes
+marginRight,,CSSCollectionVariablePropertyFactory,,,yes
+marginBottom,,CSSCollectionVariablePropertyFactory,,,yes
+marginLeft,,CSSCollectionVariablePropertyFactory,,,yes
+paddingTop,,CSSCollectionVariablePropertyFactory,,,yes
+paddingRight,,CSSCollectionVariablePropertyFactory,,,yes
+paddingBottom,,CSSCollectionVariablePropertyFactory,,,yes
+paddingLeft,,CSSCollectionVariablePropertyFactory,,,yes
+borderRadius,,CSSBorderRadiusPropertyFactory,,,
+borderTopWidth,borderStyle,CSSGrouppedPropertyFactory,CSSCollectionVariableProperty,,yes
+borderTopStyle,borderStyle,CSSGrouppedPropertyFactory,,,
+borderTopColor,borderStyle,CSSGrouppedPropertyFactory,CSSColorProperty,,
+borderRightWidth,borderStyle,CSSGrouppedPropertyFactory,CSSCollectionVariableProperty,,yes
+borderRightStyle,borderStyle,CSSGrouppedPropertyFactory,,,
+borderRightColor,borderStyle,CSSGrouppedPropertyFactory,CSSColorProperty,,
+borderBottomWidth,borderStyle,CSSGrouppedPropertyFactory,CSSCollectionVariableProperty,,yes
+borderBottomStyle,borderStyle,CSSGrouppedPropertyFactory,,,
+borderBottomColor,borderStyle,CSSGrouppedPropertyFactory,CSSColorProperty,,
+borderLeftWidth,borderStyle,CSSGrouppedPropertyFactory,CSSCollectionVariableProperty,,yes
+borderLeftStyle,borderStyle,CSSGrouppedPropertyFactory,,,
+borderLeftColor,borderStyle,CSSGrouppedPropertyFactory,CSSColorProperty,,
+outlineWidth,outlineStyle,CSSGrouppedPropertyFactory,CSSCollectionVariableProperty,,yes
+outlineStyle,outlineStyle,CSSGrouppedPropertyFactory,,,
+outlineColor,outlineStyle,CSSGrouppedPropertyFactory,CSSColorProperty,,
+outlineOffset,outlineStyle,CSSGrouppedPropertyFactory,CSSCollectionVariableProperty,,yes
+boxShadow,,CSSBoxShadowStylePropertyFactory,,,
+opacity,,CSSPropertyFactory,,,
+visibility,,CSSPropertyFactory,,visible|hidden,
+overflow,,CSSPropertyFactory,,visible|hidden|clip|scroll|auto,
+filter,,CSSFilterStylePropertyFactory,,,
+backdropFilter,,CSSBackdropFilterPropertyFactory,,,
+transform,,CSSTransformPropertyFactory,,,
+translate,,CSSTranslateStylePropertyFactory,,,
+rotate,,CSSRotateStylePropertyFactory,,,
+transformOrigin,,CSSTransformOriginStylePropertyFactory,,,
+transformStyle,,CSSPropertyFactory,,flat|preserve-3d,
+transition,,CSSTransitionPropertyFactory,,,
+mask,,CSSMaskStylePropertyFactory,,,
+perspectiveOrigin,,CSSPerspectiveOriginStylePropertyFactory,,,
+objectFitStyle,,CSSObjectFitStylePropertyFactory,,,
+mixBlendMode,,CSSPropertyFactory,,normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity,
+boxSizing,,CSSPropertyFactory,,border-box|content-box,
+aspectRatio,,CSSPropertyFactory,,,
+backgroundColor,,CSSColorPropertyFactory,,,yes
+backgroundStyle,,CSSBackgroundStylePropertyFactory,,,
+cursor,,CSSPropertyFactory,,auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|grab|grabbing|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|inherit|initial|revert|revert-layer|unset,
+customStyles,,CSSCustomStylePropertyFactory,,,

package/data/style-states.csv

@@ -0,0 +1,54 @@
+state,selector_template,order,scope,declared_in
+&,&,0,global,Mosaic/Builder/Style/StatesMeta.php
+focus,&:FOCUS,750,global,Mosaic/Builder/Style/StatesMeta.php
+focus-visible,&:FOCUS-VISIBLE,760,global,Mosaic/Builder/Style/StatesMeta.php
+hover,&:HOVER,100,global,Mosaic/Builder/Style/StatesMeta.php
+hover-on-link,":where(a[href]:not([disabled]),button:not([disabled])):HOVER &",200,global,Mosaic/Builder/Style/StatesMeta.php
+hover-on-tab,:where(.M_EL_Tab:not(.M_EL_Tab--active)):HOVER &,200,global,Mosaic/NodeTypes/Pro/Tabs/TabsMenu/Tab/TabElementTypeFactory.php
+hover-tab,&:where(.M_EL_Tab:not(.M_EL_Tab--active)):HOVER,100,global,Mosaic/NodeTypes/Pro/Tabs/TabsMenu/Tab/TabElementTypeFactory.php
+hover-when-link,"&:where([tabindex]:not([tabindex=""-1""]),a[href]:not([disabled]),button:not([disabled])):HOVER",100,global,Mosaic/Builder/Style/StatesMeta.php
+____loop_pagination_number--active,&.M_EL_LoopPaginationNumber--active,500,node-type,Mosaic/NodeTypes/Loop/LoopPagination/Numbers/Number/LoopPaginationNumberElementTypeFactory.php
+____loop_pagination_number_ellipsis,&.M_EL_LoopPaginationNumber_ellipsis,0,node-type,Mosaic/NodeTypes/Loop/LoopPagination/Numbers/Number/LoopPaginationNumberElementTypeFactory.php
+___arrow_hidden,&:where(.M_EL_SliderArrow--hidden),800,node-type,Mosaic/NodeTypes/Pro/Slider/SliderArrow/SliderArrowElementTypeFactoryAbstract.php
+___checkbox-input--checked,&:checked,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Checkbox/CheckboxInput/CheckboxInputElementTypeFactory.php
+___checkbox-input--checkmark,&:checked::before,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Checkbox/CheckboxInput/CheckboxInputElementTypeFactory.php
+___choice--checked,&:has(:where(input):checked),500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Choice/ChoiceElementTypeFactory.php
+___choice--checked-within,.M_EL_Choice:where(:has(input:checked)) &,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Choice/ChoiceElementTypeFactory.php
+___choice--focus-visible,&:has(:where(input):focus-visible),760,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Choice/ChoiceElementTypeFactory.php
+___choice-field--invalid,&:has(:user-invalid),700,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/ChoiceField/ChoiceFieldElementTypeFactory.php
+___choice-field--invalid-within,.M_EL_ChoiceField:where(:has(:user-invalid)) &,700,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/ChoiceField/ChoiceFieldElementTypeFactory.php
+___dropdown--opening,.M_EL_Dropdown:where(.dropdown--opening) &,600,node-type,Mosaic/NodeTypes/Menu/Dropdown/DropdownElementTypeFactoryAbstract.php
+___dropdown-toggle--current,&.M_EL_DropdownToggle--current,500,node-type,Mosaic/NodeTypes/Menu/Dropdown/DropdownToggle/DropdownToggleElementTypeFactory.php
+___dropdown-toggle--current-within,".M_EL_Dropdown:where(:has(.M_EL_MenuLink--current,.M_EL_DropdownToggle--current)) > &",500,node-type,Mosaic/NodeTypes/Menu/Dropdown/DropdownToggle/DropdownToggleElementTypeFactory.php
+___field--focus-visible,"&:has(:where(input, textarea, select):focus-visible)",760,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Field/FieldElementTypeFactory.php
+___field--invalid,&:has(:user-invalid),700,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Field/FieldElementTypeFactory.php
+___field--invalid-focus-visible,&:has(:user-invalid:focus-visible),770,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Field/FieldElementTypeFactory.php
+___field--invalid-within,.M_EL_Field:where(:has(:user-invalid)) &,700,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Field/FieldElementTypeFactory.php
+___field-set--invalid,&:has(:user-invalid),700,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/FieldSet/FieldSetElementTypeFactory.php
+___fileupload-input--selector-button,&::file-selector-button,0,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/FileUpload/FileUploadElementTypeFactory.php
+___fileupload-input--selector-button-hover,&::file-selector-button:hover,100,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/FileUpload/FileUploadElementTypeFactory.php
+___form--error,"&[data-form-state=""error""]",700,node-type,Mosaic/NodeTypes/Pro/Form/FormWrapperElementTypeFactory.php
+___form--invalid-within,.M_EL_FormWrapper:where(:has(:user-invalid)) &,700,node-type,Mosaic/NodeTypes/Pro/Form/FormWrapperElementTypeFactory.php
+___input--placeholder,&.M_EL_InputText::placeholder,0,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/InputText/InputTextElementTypeFactory.php
+___loop_element_no_result,&.M_EL_Loop--no-result,600,node-type,Mosaic/NodeTypes/Loop/LoopElementTypeFactory.php
+___loop_pagination_button--disabled,&.M_EL_LoopPaginationButton--disabled,800,node-type,Mosaic/NodeTypes/Loop/LoopPagination/Button/ButtonNext/LoopPaginationButtonNextElementTypeFactory.php
+___menu-link--current,&.M_EL_MenuLink--current,500,node-type,Mosaic/NodeTypes/Menu/MenuLink/MenuLinkElementTypeFactory.php
+___navbar--dropdown-mode,"&:where(.M_EL_Navbar.dropdown-mode,.M_EL_Navbar.dropdown-mode &)",600,node-type,Mosaic/NodeTypes/Navbar/NavbarElementTypeFactory.php
+___navbar--opened,.dropdown-mode:where(.M_EL_Navbar.dropdown--opened) &,600,node-type,Mosaic/NodeTypes/Navbar/NavbarElementTypeFactory.php
+___navbar--opening,.dropdown-mode:where(.M_EL_Navbar.dropdown--opening) &,600,node-type,Mosaic/NodeTypes/Navbar/NavbarElementTypeFactory.php
+___nested_dropdown_mode,"&:where(.dropdown-mode .M_EL_Navigation .M_EL_Dropdown &, .M_EL_Dropdown .M_EL_Dropdown &):not(x)",600,node-type,Mosaic/NodeTypes/Menu/Dropdown/DropdownElementTypeFactoryAbstract.php
+___radio-input--checked,&:checked,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Radio/RadioInput/RadioInputElementTypeFactory.php
+___radio-input--checkmark,&:checked::before,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Radio/RadioInput/RadioInputElementTypeFactory.php
+___select-input-option,"&.M_EL_Select:where(:has(option:not(:disabled):checked)), &.M_EL_Select :where(option)",500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Select/SelectElementTypeFactory.php
+___select-input-option--disabled,"&.M_EL_Select:where(:has(option:disabled:checked)), &.M_EL_Select :where(option:disabled)",800,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/Select/SelectElementTypeFactory.php
+___slide--active,.M_EL_SliderSlide--active > &,500,node-type,Mosaic/NodeTypes/Pro/Slider/SliderSlides/SliderSlide/SliderSlideElementTypeFactory.php
+___slider_navigation_bullet--active,&.M_EL_SliderNavigationBullet--active,500,node-type,Mosaic/NodeTypes/Pro/Slider/SliderNavigation/SliderNavigationBullet/SliderNavigationBulletElementTypeFactory.php
+___slider_navigation_bullet--hover,&:not(.M_EL_SliderNavigationBullet--active):HOVER,100,node-type,Mosaic/NodeTypes/Pro/Slider/SliderNavigation/SliderNavigationBullet/SliderNavigationBulletElementTypeFactory.php
+___step--active,&.M_EL_Step--active,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/MultiSteps/Steps/Step/StepElementTypeFactory.php
+___step--active___descendants,.M_EL_Step--active &,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/MultiSteps/Steps/Step/StepElementTypeFactory.php
+___step--completed,&.M_EL_Step--completed,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/MultiSteps/Steps/Step/StepElementTypeFactory.php
+___step--completed___descendants,.M_EL_Step--completed &,500,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/MultiSteps/Steps/Step/StepElementTypeFactory.php
+___submit-button--busy,"&[aria-busy=""true""]",800,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/SubmitButton/SubmitButtonElementTypeFactory.php
+___tab--active,&.M_EL_Tab--active,500,node-type,Mosaic/NodeTypes/Pro/Tabs/TabsMenu/Tab/TabElementTypeFactory.php
+___tab--active___descendants,.M_EL_Tab--active &,500,node-type,Mosaic/NodeTypes/Pro/Tabs/TabsMenu/Tab/TabElementTypeFactory.php
+___textarea-input--placeholder,&.M_EL_TextArea::placeholder,0,node-type,Mosaic/NodeTypes/Pro/Form/Form/MElements/TextArea/TextAreaElementTypeFactory.php

package/data/style-value-shapes.csv

@@ -0,0 +1,23 @@
+property,kind,shape,compiles_to,status
+borderRadius,object,"{""type"":""all"",""allOptions"":{""borderRadiusValue"":""18px""}}",border-radius:18px,OK
+borderStyle,object,"{""borderTopWidth"":""5px"",""borderTopStyle"":""solid"",""borderTopColor"":""rgb(..)"", ...12 keys}",border-top-width:5px; ...,OK
+outlineStyle,object,"{""outlineWidth"":""3px"",""outlineStyle"":""dotted"",""outlineColor"":""rgb(..)"",""outlineOffset"":""4px""}",outline-width:3px;outline-style:dotted;...,OK
+boxShadow,array,"[{""x"":""8px"",""y"":""8px"",""blur"":""0px"",""spread"":""0px"",""color"":""rgb(..)"",""type"":""outside"",""uuid"":""<uuid>""}]",box-shadow:rgb(..) 8px 8px 0px 0px,"OK - type is ""outside""/""inside"", NOT outset/inset"
+textShadow,array,"[{""x"":""0px"",""y"":""2px"",""blur"":""8px"",""color"":""rgb(..)"",""uuid"":""<uuid>""}]",text-shadow:rgb(..) 0px 2px 8px,OK
+transition,array,"[{""transitionProperty"":""all"",""transitionDuration"":""350ms"",""transitionDelay"":""0ms"",""transitionTimingFunction"":""ease"",""uuid"":""<uuid>""}]",transition-property:all;transition-duration:350ms;...,OK - easing maps to var(--mosaic-easing-<name>)
+transform,array,"[{""type"":""translateY"",""translateYOptions"":{""value"":""-8px""},""uuid"":""<uuid>""}]",transform:translateY(-8px),"OK - types: translateX/Y/Z, rotateX/Y/Z, skewX/Y, scale, scaleX/Y/Z"
+transform (scale),array,"[{""type"":""scale"",""scaleOptions"":{""value"":""1.05""},""uuid"":""<uuid>""}]",transform:scale(1.05),"OK - key is value, not x/y"
+translate,object,"{""x"":""0px"",""y"":""-6px"",""z"":""0px""}",--mosaic-translate-*; translate:0px -6px 0px,OK
+rotate,object,"{""x"":""0deg"",""y"":""0deg"",""z"":""4deg""}",--mosaic-rotate-*; rotate:0 0 1 4deg,OK
+transformOrigin,object,"{""x"":""0%"",""y"":""0%"",""z"":""0px""}",transform-origin:0% 0% 0px,OK
+perspectiveOrigin,object,"{""x"":""50%"",""y"":""50%""}",perspective-origin:50% 50%,OK
+filter,array,"[{""type"":""blur"",""blurOptions"":{""value"":""5px""},""uuid"":""<uuid>""}]",filter:blur(5px),OK - also brightness/contrast/... each with <type>Options
+backdropFilter,array,"[{""type"":""blur"",""blurOptions"":{""value"":""14px""},""uuid"":""<uuid>""}]",backdrop-filter:blur(14px) + -webkit- prefix,OK
+gridTemplateColumns,array,"[{""type"":""default"",""defaultOptions"":{""size"":""1fr""},""uuid"":""<uuid>""}, ...one per column]",grid-template-columns:1fr 1fr 2fr,OK
+gridTemplateColumns (autofit),array,"[{""type"":""default"",""defaultOptions"":{""size"":""240px"",""autofit"":""1""},""uuid"":""<uuid>""}]","grid-template-columns:repeat(auto-fit, 240px)",OK - autofit is rejected with an fr size
+gridChildPosition,object,"{""gridRowStart"":""1"",""gridColumnStart"":""1"",""gridRowEnd"":""2"",""gridColumnEnd"":""3""}",grid-row-start:1;grid-column-start:1;...,OK
+flexSizing,object,"{""type"":""grow"",""growOptions"":{}}",flex-grow:1;flex-shrink:0,OK
+objectFitStyle,object,"{""objectFit"":""cover"",""objectPositionX"":""50%"",""objectPositionY"":""50%""}",object-fit:cover;object-position:50%,OK
+mask,array,"[{""type"":""gradient"",""gradientOptions"":{""subType"":""linear"",""linearOptions"":{""angle"":""180deg""},""dots"":[...]},""uuid"":""<uuid>""}]",mask-image:linear-gradient(...),"PARTIAL - compiles, but only the last dot survives"
+backgroundStyle,array,"[{""type"":""overlay"",""overlayOptions"":{""color"":""rgba(..)""},""uuid"":""<uuid>""}]","(accepted, emits background-image:none)",UNRESOLVED - use customStyles
+customStyles,string,"""outline: 2px dashed rgb(7,8,9);""",emitted verbatim into the rule,OK - the escape hatch; bypasses the collection-variable layer

package/data/style-verification.csv

@@ -0,0 +1,99 @@
+property,group,css_property,sent,compiled,status
+display,,display,,,SKIPPED
+alignItems,,align-items,"""baseline""",baseline,COMPILED
+justifyItems,,justify-items,"""baseline""",baseline,COMPILED
+alignContent,,align-content,"""baseline""",baseline,COMPILED
+justifyContent,,justify-content,"""right""",right,COMPILED
+flexDirection,,flex-direction,"""column-reverse""",column-reverse,COMPILED
+flexWrap,,flex-wrap,"""wrap-reverse""",wrap-reverse,COMPILED
+columnGap,,column-gap,"""37px""",37px,COMPILED
+rowGap,,row-gap,"""37px""",37px,COMPILED
+gridAutoFlow,,grid-auto-flow,"""column""",column,COMPILED
+gridAutoColumns,,grid-auto-columns,,,SKIPPED
+gridAutoRows,,grid-auto-rows,,,SKIPPED
+gridTemplateColumns,,grid-template-columns,"[{""type"": ""default"", ""defaultOptions"": {""size"": ""37px""}}]",none,COMPILED
+gridTemplateRows,,grid-template-rows,"[{""type"": ""default"", ""defaultOptions"": {""size"": ""37px""}}]",none,COMPILED
+gridTemplateAreas,,grid-template-areas,,,SKIPPED
+gridRowStart,gridChildPosition,grid-row-start,"""7""",,ABSENT
+gridColumnStart,gridChildPosition,grid-column-start,"""7""",,ABSENT
+gridRowEnd,gridChildPosition,grid-row-end,"""7""",,ABSENT
+gridColumnEnd,gridChildPosition,grid-column-end,"""7""",,ABSENT
+flexSizing,,flex-sizing,,,SKIPPED
+flexBasis,,flex-basis,"""37px""",37px,COMPILED
+alignSelf,,align-self,"""baseline""",baseline,COMPILED
+justifySelf,,justify-self,"""baseline""",baseline,COMPILED
+order,,order,"""7""",7,COMPILED
+listStylePosition,,list-style-position,"""outside""",outside,COMPILED
+listStyleType,,list-style-type,"""none""",none,COMPILED
+fontFamily,,font-family,,,SKIPPED
+textDecorationLine,,text-decoration-line,"""line-through""",line-through,COMPILED
+fontStyle,,font-style,"""italic""",italic,COMPILED
+color,,color,"""rgb(9, 99, 199)""","rgb(9, 99, 199)",COMPILED
+fontSize,,font-size,"""37px""",37px,COMPILED
+lineHeight,,line-height,"""7""",7,COMPILED
+fontWeight,,font-weight,"""900""",900,COMPILED
+textAlign,,text-align,"""right""",right,COMPILED
+letterSpacing,,letter-spacing,"""37px""",37px,COMPILED
+wordSpacing,,word-spacing,"""37px""",37px,COMPILED
+whiteSpace,,white-space,"""pre""",pre,COMPILED
+textTransform,,text-transform,"""capitalize""",capitalize,COMPILED
+textShadow,,text-shadow,,,SKIPPED
+width,,width,"""37px""",37px,COMPILED
+minWidth,,min-width,"""37px""",37px,COMPILED
+maxWidth,,max-width,"""37px""",37px,COMPILED
+height,,height,"""37px""",37px,COMPILED
+minHeight,,min-height,"""37px""",37px,COMPILED
+maxHeight,,max-height,"""37px""",37px,COMPILED
+position,,position,"""sticky""",sticky,COMPILED
+zIndex,,z-index,"""7""",7,COMPILED
+top,,top,"""37px""",37px,COMPILED
+right,,right,"""37px""",37px,COMPILED
+bottom,,bottom,"""37px""",37px,COMPILED
+left,,left,"""37px""",37px,COMPILED
+marginTop,,margin-top,"""37px""",37px,COMPILED
+marginRight,,margin-right,"""37px""",37px,COMPILED
+marginBottom,,margin-bottom,"""37px""",37px,COMPILED
+marginLeft,,margin-left,"""37px""",37px,COMPILED
+paddingTop,,padding-top,"""37px""",37px,COMPILED
+paddingRight,,padding-right,"""37px""",37px,COMPILED
+paddingBottom,,padding-bottom,"""37px""",37px,COMPILED
+paddingLeft,,padding-left,"""37px""",37px,COMPILED
+borderRadius,,border-radius,"{""type"": ""all"", ""allOptions"": {""borderRadiusValue"": ""37px""}}",37px,COMPILED
+borderTopWidth,borderStyle,border-top-width,"""37px""",,ABSENT
+borderTopStyle,borderStyle,border-top-style,"""37px""",,ABSENT
+borderTopColor,borderStyle,border-top-color,"""rgb(9, 99, 199)""",,NO_ELEMENT
+borderRightWidth,borderStyle,border-right-width,"""37px""",,ABSENT
+borderRightStyle,borderStyle,border-right-style,"""37px""",,ABSENT
+borderRightColor,borderStyle,border-right-color,"""rgb(9, 99, 199)""",,ABSENT
+borderBottomWidth,borderStyle,border-bottom-width,"""37px""",,ABSENT
+borderBottomStyle,borderStyle,border-bottom-style,"""37px""",,ABSENT
+borderBottomColor,borderStyle,border-bottom-color,"""rgb(9, 99, 199)""",,ABSENT
+borderLeftWidth,borderStyle,border-left-width,"""37px""",,ABSENT
+borderLeftStyle,borderStyle,border-left-style,"""37px""",,ABSENT
+borderLeftColor,borderStyle,border-left-color,"""rgb(9, 99, 199)""",,ABSENT
+outlineWidth,outlineStyle,outline-width,"""37px""",,ABSENT
+outlineStyle,outlineStyle,outline-style,,,SKIPPED
+outlineColor,outlineStyle,outline-color,"""rgb(9, 99, 199)""",,ABSENT
+outlineOffset,outlineStyle,outline-offset,"""37px""",,ABSENT
+boxShadow,,box-shadow,,,SKIPPED
+opacity,,opacity,"""0.37""",0.37,COMPILED
+visibility,,visibility,"""hidden""",hidden,COMPILED
+overflow,,overflow,"""auto""",auto,COMPILED
+filter,,filter,,,SKIPPED
+backdropFilter,,backdrop-filter,,,SKIPPED
+transform,,transform,,,SKIPPED
+translate,,translate,,,SKIPPED
+rotate,,rotate,,,SKIPPED
+transformOrigin,,transform-origin,,,SKIPPED
+transformStyle,,transform-style,"""preserve-3d""",preserve-3d,COMPILED
+transition,,transition,,,SKIPPED
+mask,,mask,,,SKIPPED
+perspectiveOrigin,,perspective-origin,,,SKIPPED
+objectFitStyle,,object-fit,"{""objectFit"": ""cover"", ""objectPositionX"": ""37%"", ""objectPositionY"": ""37%""}",cover,COMPILED
+mixBlendMode,,mix-blend-mode,"""luminosity""",luminosity,COMPILED
+boxSizing,,box-sizing,"""content-box""",content-box,COMPILED
+aspectRatio,,aspect-ratio,,,SKIPPED
+backgroundColor,,background-color,"""rgb(9, 99, 199)""","rgb(9, 99, 199)",COMPILED
+backgroundStyle,,background-image,,,SKIPPED
+cursor,,cursor,"""unset""",unset,COMPILED
+customStyles,,,,,SKIPPED

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "mosaic-headless",
+  "version": "1.2.0",
+  "description": "AI-agent skill: build Mosaic Pro (Nextend) WordPress sites by writing the underlying data model directly - 23 custom tables, no visual editor, no DOM. Every node type, style property and node property swept against a live install and asserted on the delivered HTML and compiled CSS. Installs into Claude Code, Cursor, Codex CLI, Gemini CLI, Copilot, Continue, Windsurf and Claude.ai.",
+  "keywords": [
+    "wordpress",
+    "mosaic",
+    "mosaic-pro",
+    "nextend",
+    "page-builder",
+    "claude-code",
+    "agent-skill",
+    "ai-agent",
+    "headless",
+    "woocommerce",
+    "wp-cli"
+  ],
+  "homepage": "https://github.com/Moksa1123/mosaic-headless#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Moksa1123/mosaic-headless.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Moksa1123/mosaic-headless/issues"
+  },
+  "license": "MIT",
+  "author": "moksa (https://moksaweb.com)",
+  "type": "module",
+  "bin": {
+    "mosaic-headless": "bin/install.mjs"
+  },
+  "files": [
+    "bin/",
+    "assets/",
+    "data/*.csv",
+    "references/",
+    "sites/_moksa.py",
+    "sites/moksa.json",
+    "tools/*.py",
+    "tools/*.php",
+    "SKILL.md",
+    "README.md",
+    "README.zh-TW.md",
+    "README.zh-CN.md",
+    "README.ja.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "install-skill": "node bin/install.mjs",
+    "check": "node bin/check-release.mjs",
+    "preversion": "npm run check",
+    "version": "node bin/sync-version.mjs && git add SKILL.md assets/templates/platforms",
+    "postversion": "git push && git push --tags",
+    "prepublishOnly": "npm run check"
+  }
+}

package/references/data-model.md

@@ -0,0 +1,95 @@
+# The Mosaic data model
+
+## Where a page lives
+
+Nowhere you would guess from Elementor or Gutenberg. Mosaic stores **nothing** of a
+page's structure in `wp_posts` or `wp_postmeta`. It owns **23 of its own tables**,
+all prefixed `wp_mosaic_`, and the WordPress post is only one of several things a
+Mosaic *template* can be assigned to.
+
+Measured on a real install (`data/db-columns.csv`, 23 tables / 206 columns):
+
+| table | holds |
+|---|---|
+| `mosaic_themes` | the top-level container. Everything else is scoped to a `themeID`. |
+| `mosaic_masters` | master layouts (the outermost shell a template renders into) |
+| `mosaic_templates` | a template + its `conditions` blob and `path`/`assign` mode |
+| `mosaic_template_assigns` | which template serves which `type`/`typeIdentifier` |
+| `mosaic_nodes` | **the element tree** — one row per element, on every document |
+| `mosaic_components`, `mosaic_component_documents`, `mosaic_component_categories` | reusable components and their category tree |
+| `mosaic_styleguides` | style guide documents |
+| `mosaic_element_classes`, `mosaic_sub_classes` | the built-in class system (151 classes, see `data/element-classes.csv`) |
+| `mosaic_utility_classes`, `mosaic_utility_sub_classes` | user-defined utility classes |
+| `mosaic_collections`, `mosaic_collection_modes`, `mosaic_collection_skins`, `mosaic_collection_groups`, `mosaic_collection_variables` | the design-token system (a collection has modes and skins; variables resolve per mode) |
+| `mosaic_breakpoints` | responsive breakpoints, per theme — not global |
+| `mosaic_settings` | theme-scoped settings |
+| `mosaic_submissions`, `mosaic_submission_actions` | form submissions (Pro) |
+| `mosaic_locks` | editing locks; the only table created at plugin activation |
+
+`mosaic_locks` appearing alone is the signature of a **half-installed** Mosaic: the
+plugin's network-level install ran, but the site-level install (which creates the
+other 22 tables) has not. It is triggered by an admin loading
+`/wp-admin/admin.php?page=mosaic`, not by activation.
+
+## The node row
+
+`mosaic_nodes` is the whole element tree, flattened:
+
+```
+themeID       varchar(36)   scope
+documentType  varchar(36)   which kind of document this node belongs to
+documentID    varchar(36)   which document
+ID            varchar(36)   node uuid
+parentType    varchar(36)   parent's kind
+parentID      varchar(36)   parent node uuid   -> the tree lives here
+ordering      varchar(400)  fractional-index string, NOT an integer
+status        varchar(36)   'publish' etc.
+type          varchar(128)  the node type slug -> data/node-types.csv
+data          longtext      the node's own properties, JSON
+revision      varchar(36)   optimistic-lock token
+version       varchar(128)
+```
+
+Two things bite here:
+
+**`ordering` is a string, not a number.** It is a fractional index (`a0`, `a1`,
+`a0V`…), so siblings sort lexicographically and a node can be inserted between two
+others without renumbering. Sorting it numerically produces a scrambled page.
+
+**The tree is by `parentID`, not by nesting.** There is no nested JSON blob to edit
+like `_elementor_data`. Reparenting is a single-column update; moving a subtree
+does not touch the subtree's rows.
+
+## Node types and properties
+
+122 node types are registered (`data/node-types.csv`), **48 of them Pro-only** —
+the split is structural, not a flag: Pro types live under `Mosaic/NodeTypes/Pro/`
+and cover the whole form system, slider, tabs and code element. If a type's
+`edition` column says `pro`, a Free install has no factory for it and the node
+falls back to the `__unknown` type rather than erroring.
+
+Each type declares its own data properties (`data/node-properties.csv`, 181
+properties across 49 classes). Properties are declared by `createDataSimple` (175),
+`createDataArray` (3) and `createDataGroup` (3), each with a validator chain. **174
+of 181 properties set `supportsInherit: true`** — inheritance is the norm in this
+model, not the exception, which is why a property being absent from a node's `data`
+is meaningful rather than merely missing.
+
+The validator chain in the `validators` column is what actually gates a write.
+`ValidatorAcceptedValues` means an enum (the accepted list is in the source file
+named by the `file` column); `ValidateAllowUndefined` means the property may be
+omitted; `ValidatorDynamicCodeObject` means the property accepts a dynamic-code
+object instead of a literal — that is Mosaic's dynamic-tag equivalent.
+
+## Styling
+
+Mosaic does not attach CSS to a node the way Elementor attaches controls to a
+widget. Styling goes through the **element class** system: 151 built-in classes
+(`data/element-classes.csv`), each with its own CSS selectors, arranged in a parent
+tree, some marked `metaIsGroup` (organisational) and some `metaIsEditable`. A node
+points at a default element class (`default_element_class` in `node-types.csv`) and
+takes variations from there.
+
+That is why the same visual change can be made in two very different places, and
+why writing a style onto a node directly is usually the wrong move: the class is
+the unit of reuse, and the collection/variable tables are the token layer beneath it.

package/references/design-system.md

@@ -0,0 +1,118 @@
+# The design-system layer: element classes and collection variables
+
+Everything in `references/styling.md` is about styling **one node**. That is the lowest
+layer and the wrong place to build a site. Mosaic has two layers above it, and both
+were measured on a live install.
+
+## Element classes: style every element of a kind, once
+
+The 151 rows in `data/element-classes.csv` are `elementClassMeta` records — Mosaic's
+built-in taxonomy of what an element *is* (Heading 2, Button, Section, Div, Body …),
+each carrying the CSS selectors that identify it.
+
+You do not create element classes. You **commit a style for one that already exists**,
+using its meta ID as the record ID:
+
+```json
+POST …/masterDocumentInstance/<masterID>/commit
+{
+  "elementClass": [{
+    "newRevisionRecord": {
+      "ID": "d1642e3d-12cc-0379-ac2a-33f5292aa0dd",       // the Heading 2 meta ID
+      "parentType": "", "parentID": "", "ordering": "a0",
+      "status": "publish", "revision": "", "version": "",
+      "data": {"states": {"&": {"_": {"color": "rgb(3,33,133)", "fontSize": "47px"}}}}
+    },
+    "originalRevisionRecord": null
+  }]
+}
+```
+
+The `data.states` structure is **identical to a node's `style.states`** — same states,
+same breakpoints, same property names and value shapes.
+
+What comes out is a global rule built from that meta's own selectors:
+
+```css
+h2,.M_EL_Text__Heading2{color:rgb(3, 33, 133);font-size:47px;letter-spacing:-1px}
+```
+
+One row restyles every `h2` on the site. This is the theme layer, and it is where
+typography, spacing rhythm and component defaults belong.
+
+Two things learned the hard way:
+
+- **Only element-class metas are valid IDs.** Committing an `elementClass` with a
+  fresh UUID is accepted with HTTP 200 and then silently dropped — the response's
+  `syncResponseEnvelopes` simply does not mention it. Check the response for a
+  `create elementClass` entry; its absence is the only signal.
+- Look up the meta ID in `data/element-classes.csv` by `name`. Several rows share a
+  name (`Button` appears four times) because sub-components have their own metas — the
+  `selectors` and `parent` columns tell them apart.
+
+## Collection variables: the design tokens
+
+A collection variable compiles to a real CSS custom property on `:root`, and any
+token-referencable style property can point at it.
+
+The theme's healed default gives you one collection, one mode and one skin. A variable
+hangs off the collection, and its value is stored per **skin → mode**:
+
+```json
+{
+  "ID": "<variable uuid>",
+  "parentType": "collection", "parentID": "<collectionID>",
+  "ordering": "a0", "status": "publish", "revision": "", "version": "",
+  "data": {
+    "name": "Brand",
+    "type": "color",
+    "customProperty": "--brand",
+    "skinsData": { "<skinID>": { "<modeID>": { "value": "rgb(9,99,199)" } } }
+  }
+}
+```
+
+Reference it from any of the 34 token-referencable properties in
+`data/style-properties.csv` with a one-key object:
+
+```json
+"backgroundColor": {"var": "<variable uuid>"}
+```
+
+Measured output:
+
+```css
+:root{--brand: rgb(9, 99, 199)}
+.M_EL3{padding-top:31px;background-color:var(--brand)}
+```
+
+Details that cost time to find:
+
+- **`skinsData[skinID]` is keyed by mode ID directly.** There is no `modesData`
+  wrapper — `CollectionVariableSkinDataDataSub::getSubData($modeID)` goes straight to
+  the mode, whose only property is `value`.
+- **`customProperty` is emitted verbatim**, so it must include the leading `--`.
+  Writing `"brand"` produces `background-color:var(brand)` and a `:root{brand: …}`
+  declaration, neither of which is valid CSS.
+- **A wrong `skinsData` shape does not fail.** The variable is created, `:root` gets
+  the declaration, and the value is the sub-factory's default (`#FFF` for colours).
+  If your token renders white, the value never arrived.
+- Variable types are `color`, `imageGradient`, `lengthPercentage`,
+  `numberLengthPercentage`, `boxShadow`, `textShadow`, `fontFamily`
+  (`CollectionTypesConst::COLLECTION_VARIABLE_TYPES`).
+- Deleting probe variables needs an explicit `status: "delete"` commit on the
+  `collectionVariable` manager — clearing nodes does not remove them, and orphans
+  accumulate as duplicate `:root` declarations.
+
+## How to actually build a theme
+
+1. Define collection variables for the palette, the type scale and the spacing scale.
+2. Commit element-class styles for the structural metas — Body, Text and its heading
+   children, Button, Section — referencing those variables rather than literals.
+3. Only then write per-node `style` for the things that genuinely differ.
+
+The nine probe pages built while verifying this skill deliberately do **not** do
+this (they are gitignored - they were scaffolding, not a deliverable) — they set
+everything
+per node, because their job was to exercise the style compiler across eight visual
+languages, not to model a maintainable theme. A real site inverts that ratio.