@wix/origami-lint 1.34.31 → 1.34.33

package/dist/rules/index.js

@@ -8,6 +8,7 @@ import cssSelectors from "./site-app/css-selectors.js";
 import dataValues from "./site-app/data-values.js";
 import globalStyles from "./site-app/global-styles.js";
 import knownTags from "./site-app/known-tags.js";
+import layoutDesignNotes from "./site-app/layout-design-notes.js";
 import noAbsoluteSection from "./site-app/no-absolute-section.js";
 import pageStructure from "./site-app/page-structure.js";
 import slotAttributes from "./site-app/slot-attributes.js";
@@ -17,5 +18,5 @@ import themeFontKnown from "./site-app/theme-font-known.js";
 import themeRoot from "./site-app/theme-root.js";
 import noFreeCode from "./site-app/no-free-code.js";
 // Execution registries combine already-checked rules; only this boundary erases their individual key unions.
-export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement, knownTags];
+export const ruleRegistry = [allowedImports, noFreeCode, pageStructure, noAbsoluteSection, themeFontIds, themeFontKnown, slotAttributes, themeRoot, breakpoints, cssFileNesting, globalStyles, applyAndPresets, bindings, dataValues, cssLayoutProperties, cssSelectors, slotPlacement, knownTags, layoutDesignNotes];
 export { defineRule } from "./site-app/define-rule.js";

package/dist/rules/site-app/css-layout-properties.js

@@ -1,4 +1,4 @@
-import { CONTENT_TARGET, createCssFileReporter, getName, LAYER_ATTRIBUTES, OVERFLOW_TARGET } from "../../rules-api/index.js";
+import { CONTENT_TARGET, createCssFileReporter, getLayoutLiteral, OVERFLOW_TARGET } from "../../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
 const CHECKS = ['duplicate_property', 'non_layout_property', 'property_outside_target', 'property_in_wrong_target', 'non_container_target_property', 'missing_property_value', 'incompatible_container_property', 'invalid_layout_value', 'missing_container_display', 'missing_grid_column', 'invalid_spx_context', 'unsupported_flex_wrap', 'child_without_container_layout'];
 // ── the tables (propSpecs.ts) ──
@@ -248,13 +248,10 @@ function checkItemParents(input) {
     for (const child of getItems(input))
         checkContainerParent(child, parent, input);
 }
-/** The elements this one is the parent of, as the import reads structure.jsx: its child elements and the elements in its attributes, through wrappers; not its layers (they get their item layout from the layer). */
-function getItems({ node, rulesApi }) {
-    const held = rulesApi.getAttributeElements(node).filter(({ attribute }) => !LAYER_ATTRIBUTES.includes(getName(attribute))).map(({ element }) => element);
-    return [...rulesApi.getChildElements(node), ...held].flatMap((element) => rulesApi.getComponent(element) ?? []);
-}
+/** The components this element lays out (its items, as the import reads structure.jsx). */
+const getItems = ({ node, rulesApi }) => rulesApi.getItemElements(node).flatMap((element) => rulesApi.getComponent(element) ?? []);
 /** Reports each breakpoint at which the child sets item properties in layout.css while its parent has no `display: grid` or `flex` there or by default; not for a `position: fixed` child (its last position at that breakpoint). */
-function checkContainerParent(child, parent, { report }) {
+function checkContainerParent(child, parent, { report, rulesApi }) {
     const byMedia = new Map();
     for (const prop of Object.keys(ITEM_PROPS)) {
         for (const decl of (child.css.layout[prop] ?? []).filter(isOnElement))
@@ -263,7 +260,7 @@ function checkContainerParent(child, parent, { report }) {
     for (const [media, declarations] of byMedia) {
         if (declarations.filter(({ prop }) => prop === 'position').at(-1)?.decl.value.trim() === 'fixed')
             continue; // the last position wins, as the import merges the scope
-        if (isContainerAt(parent, media))
+        if (isContainerAt(parent, media, rulesApi))
             continue;
         const childName = nameOf(child);
         const parentName = nameOf(parent);
@@ -272,10 +269,9 @@ function checkContainerParent(child, parent, { report }) {
         report({ check: 'child_without_container_layout', loc: child.loc, message: `layout.css:${line}: ${childName} sets item properties (${props}), but its parent ${parentName} has no container layout${media ? ` at @media ${media}` : ''}: give ${parentName} \`display: grid\` or \`display: flex\`, or remove ${childName}'s item properties.` });
     }
 }
-/** The parent's container type at this breakpoint, as the import derives it: its last `display` there (on itself or in its content-wrapper block) when it is grid or flex, else the default's. */
-function isContainerAt(parent, media) {
-    const displays = (parent.css.layout.display ?? []).filter((decl) => decl.selector === '&' || decl.selector === `& @origami-target ${CONTENT_TARGET}`);
-    const isContainer = (at) => ['grid', 'flex'].includes(displays.filter((decl) => decl.media === at).at(-1)?.value.trim() ?? '');
+/** The parent's container type at this breakpoint, as the import derives it: its `display` there (on itself or in its target blocks) when it is grid or flex, else the default's. */
+function isContainerAt(parent, media, rulesApi) {
+    const isContainer = (at) => ['grid', 'flex'].includes(rulesApi.getLayoutCss(parent, 'display', at)?.value.trim() ?? '');
     return isContainer(media) || (media !== null && isContainer(null));
 }
 /** On the element itself, not in a target block or on an inner part; at any breakpoint. */
@@ -335,13 +331,11 @@ function mergeScopes(blocks) {
 // ── reading values (valueDeserializers.ts) ──
 /** A value reads as the import reads it: a site layout variable's token, `var(--name, <fallback>)`, by its fallback (layoutVariables.ts literalOf); `--spx(12)` as `12spx`. */
 function isReadable(spec, value) {
-    const literal = LAYOUT_VARIABLE_TOKEN.exec(value)?.[1] ?? value;
+    const literal = getLayoutLiteral(value);
     if (spec.values)
         return spec.values.includes(literal);
     return spec.reads ? spec.reads(restoreSpx(literal)) : true;
 }
-/** `var(--name, <fallback>)`: a field connected to one of the site's layout variables, written with the field's own value as the fallback. */
-const LAYOUT_VARIABLE_TOKEN = /^var\(--[A-Za-z_-][\w-]*,\s*(.+)\)$/;
 /** The import reads `--spx(12)` as `12spx` before it reads a value (spxTransformer.ts restoreSpxValue). */
 const restoreSpx = (value) => value.replace(/--spx\((-?\d+(?:\.\d+)?)\)/g, '$1spx');
 const SIZE_KEYWORDS = ['auto', 'fit-content', 'max-content', 'min-content', 'unset'];

package/dist/rules/site-app/data-values.js

@@ -1,15 +1,18 @@
 // The "data-values" subject of the converter rules (converter 0.80 at c8ed79b): astValue.ts 99, 123, 133; parseJsx.ts 915, 1223,
 // 1227, 1231, 1235, 1255, 1268, 1289, 1697; projectData.ts 214, 225, 281, 435, 443; enrichImage.ts 94, 105.
 // Converter 0.81 (checked at 0.84, 2c0e21c): the tag's import, not a `type` attr, decides if a component takes data attributes; `type` is data.
+// Tracker KIT-richText (converter 0.87): a rich text's type is Builder.RichText.
+// Tracker OUR-003 (origami-transforms mediaValidation): an <Image>'s literal image uri is a Wix media id.
+// Converter 0.87 (68c71e4): `children` is a data key.
 import { isDeepStrictEqual } from 'node:util';
 import { DATA_KEY, EVENT_ATTRIBUTE, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getProperty, isBound, isOneEditAway, isReadByImport, isReservedAttribute, ownerOf, } from "../../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
-const CHECKS = ['attribute_without_braces', 'non_literal_data', 'duplicate_element_prop', 'invalid_element_props_object', 'invalid_element_props_entry', 'invalid_data_object', 'invalid_element_props_key', 'unsupported_element_props_key', 'mixed_data_wrapper', 'duplicate_data_key', 'bare_document_href', 'missing_document_id', 'inconsistent_image_url', 'misplaced_image_url_call'];
+const CHECKS = ['attribute_without_braces', 'non_literal_data', 'duplicate_element_prop', 'invalid_element_props_object', 'invalid_element_props_entry', 'invalid_data_object', 'invalid_element_props_key', 'unsupported_element_props_key', 'mixed_data_wrapper', 'duplicate_data_key', 'bare_document_href', 'missing_document_id', 'inconsistent_image_url', 'misplaced_image_url_call', 'invalid_rich_text_type', 'invalid_image_media_id'];
 /** The names the import never reads as data (dataKeys.ts). The React name is joined as the converter does: Wix Standards fails the build on it in any file. */
 const EXCLUDED_DATA_KEYS = [
     '_slotsId', '_mapId', 'hidden', 'class', 'title', 'role', 'tabindex', 'draggable', 'lang', 'dir', 'accesskey', 'contenteditable', 'spellcheck',
     'translate', 'autofocus', 'inputmode', 'enterkeyhint', 'popover', 'inert', 'part', 'nonce', 'is', 'itemscope', 'itemtype', 'itemprop', 'itemid',
-    'itemref', 'tabIndex', 'contentEditable', 'accessKey', 'autoFocus', 'inputMode', 'enterKeyHint', 'spellCheck', 'children', 'styleRef', 'key',
+    'itemref', 'tabIndex', 'contentEditable', 'accessKey', 'autoFocus', 'inputMode', 'enterKeyHint', 'spellCheck', 'styleRef', 'key',
     'ref', ['dangerouslySet', 'InnerHTML'].join(''), '__proto__', 'constructor', 'prototype',
 ];
 /** An elementProps entry's name is a CSS identifier (parseJsx.ts 1231): it becomes a class. */
@@ -18,9 +21,14 @@ const CSS_IDENTIFIER = /^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/;
 const RESERVED_OBJECT_KEYS = ['__proto__', 'constructor', 'prototype'];
 /** An image object's `type` (enrichImage.ts). */
 const IMAGE_TYPE = 'Builder.Image';
+/** A rich text's `type`, and the key the export writes it under (projectData.ts rebuildRichText reads `html` only on this type). */
+const RICH_TEXT_TYPE = 'Builder.RichText';
+const RICH_TEXT_KEY = 'richText';
 /** The media identifiers the export writes: an image's (`wix:image://v1/<uri>/<name>#originWidth=…`), a document's (`wix:document://v1/ugd/<file>/<name>`). */
 const IMAGE_PREFIX = 'wix:image://v1/';
 const DOCUMENT_PREFIX = 'wix:document://v1/';
+/** A Wix media id, `117a96_1cff23187eeb4050a2a691bcdcad6502~mv2.jpg`: an account prefix, an underscore and a file name (mediaValidation/index.js). */
+const WIX_MEDIA_ID = /^[A-Za-z0-9]+_[A-Za-z0-9_~.-]+\.[A-Za-z0-9]+$/;
 /** The reserved attributes this rule reads as data. The strings are component-attributes', `className` and `bindings` the bindings rule's. */
 const READ_AS_DATA = ['data', 'props', 'elementProps'];
 const FULL = { menus: true, media: true, jsx: true };
@@ -41,8 +49,9 @@ export default defineRule({
     },
 });
 // ── the callback's steps ──
-/** A component written out under Structure: its data values, then what the import builds from the ones it read. */
+/** Any <Image> in the file: its media id, as the build checks it. Then a component written out under Structure: its data values, then what the import builds from the ones it read. */
 function checkJSXElementDataValues(input) {
+    checkImageMediaId(input);
     if (!input.rulesApi.getComponent(input.node) || !isReadByImport(input.node))
         return;
     const elementProps = getAttribute(input.node, 'elementProps');
@@ -54,6 +63,7 @@ function checkJSXElementDataValues(input) {
     checkDataKeyOnce(input, read.has('data') ? checkDataCarrier(input) : null);
     checkDocumentLinks(input, read);
     checkImageUrls(input, read);
+    checkRichTextTypes(input, read);
 }
 // ── the steps ──
 const say = ({ report }, node, check, message) => report({ check, loc: node.loc, message });
@@ -253,8 +263,8 @@ function hasDocumentId(identifier) {
 function checkImageUrls(input, read) {
     const urls = new Set();
     const values = dataValues(input).filter(([, path]) => read.has(attributeOf(path)));
-    for (const [value, path] of values) {
-        for (const { node, path: at } of objectsIn(value, path)) {
+    for (const [value, path, key] of values) {
+        for (const { node, path: at } of objectsIn(value, path, key)) {
             if (valueOf(getProperty(node, 'type')?.value ?? null) !== IMAGE_TYPE)
                 continue;
             const url = getProperty(node, 'url');
@@ -274,6 +284,32 @@ function checkImageUrls(input, read) {
     if (stray)
         say(input, stray, 'misplaced_image_url_call', `${owner(input)} has \`media.getCroppedImageUrl(…)\` outside an image's url. Write it only as the \`url\` of a \`{ type: 'Builder.Image', … }\` object.`);
 }
+/** KIT-richText: with another `type`, or none, the import takes the rich text but keeps its text empty (live import, 2026-10-26). */
+function checkRichTextTypes(input, read) {
+    const values = dataValues(input).filter(([, path]) => read.has(attributeOf(path)));
+    for (const [value, path, valueKey] of values) {
+        for (const { node, path: at, key } of objectsIn(value, path, valueKey)) {
+            if (key !== RICH_TEXT_KEY)
+                continue;
+            const type = getProperty(node, 'type');
+            if (type && valueOf(type.value) === RICH_TEXT_TYPE)
+                continue;
+            const written = type ? `has \`type: ${textOf(input)(type.value)}\`` : 'has no `type`';
+            say(input, type ?? node, 'invalid_rich_text_type', `${owner(input)}'s \`${at}\` ${written}. Write \`type: '${RICH_TEXT_TYPE}'\`: with another type, or none, the import keeps its text empty (tracker KIT-richText).`);
+        }
+    }
+}
+/** OUR-003: `yarn build` fails on an <Image> (by tag name, anywhere in the file) whose literal `image.uri` isn't a Wix media id; the import takes it, but the image is broken. */
+function checkImageMediaId(input) {
+    const image = getObject(getExpression(getAttribute(input.node, 'image')));
+    if (input.rulesApi.getTagName(input.node) !== 'Image' || !image)
+        return;
+    const uri = getProperty(image, 'uri');
+    const value = uri && bare(uri.value);
+    if (value?.type !== 'Literal' || typeof value.value !== 'string' || WIX_MEDIA_ID.test(value.value))
+        return;
+    say(input, value, 'invalid_image_media_id', `${owner(input)}'s \`image.uri\` '${value.value}' isn't a Wix media id, and \`yarn build\` fails on it. Run \`wix origami upload-media\` to upload it (tracker OUR-003).`);
+}
 function imageCallsIn(input, dataValuesRead, read) {
     const values = dataValuesRead.map(([value]) => value);
     const props = read.has('props') ? getExpression(getAttribute(input.node, 'props')) : null;
@@ -465,29 +501,30 @@ function derivedImageArguments(image) {
     ];
 }
 const sameArguments = (call, expected) => isDeepStrictEqual(call.arguments.map(valueOf), expected);
-function objectsIn(node, path) {
+function objectsIn(node, path, key) {
     if (node === null)
         return [];
     const value = bare(node);
     if (value.type === 'ArrayExpression')
-        return value.elements.flatMap((element, index) => (element && element.type !== 'SpreadElement' ? objectsIn(element, `${path}[${index}]`) : []));
+        return value.elements.flatMap((element, index) => (element && element.type !== 'SpreadElement' ? objectsIn(element, `${path}[${index}]`, null) : []));
     if (value.type !== 'ObjectExpression')
         return [];
-    return [{ node: value, path }, ...getProperties(value).flatMap((property) => objectsIn(property.value, `${path}.${getKey(property)}`))];
+    return [{ node: value, path, key }, ...getProperties(value).flatMap((property) => objectsIn(property.value, `${path}.${getKey(property)}`, getKey(property)))];
 }
+/** Each data value: the value, its path as a message writes it, and the key that holds it. */
 function dataValues(input) {
     const element = input.node;
-    const values = dataAttributes(input).map((attribute) => [getExpression(attribute), getName(attribute)]).filter(([value]) => value);
+    const values = dataAttributes(input).map((attribute) => [getExpression(attribute), getName(attribute), getName(attribute)]).filter(([value]) => value);
     const data = getExpression(getAttribute(element, 'data'));
     if (data)
-        values.push([data, 'data']);
+        values.push([data, 'data', 'data']);
     for (const { entry, path } of getEntries(getObject(getExpression(getAttribute(element, 'elementProps'))))) {
         const at = `elementProps.${path.join('.')}`;
         for (const property of entryDataKeys(entry))
-            values.push([property.value, `${at}.${getKey(property)}`]);
+            values.push([property.value, `${at}.${getKey(property)}`, getKey(property)]);
         const entryData = getProperty(entry, 'data');
         if (entryData)
-            values.push([entryData.value, `${at}.data`]);
+            values.push([entryData.value, `${at}.data`, 'data']);
     }
     return values;
 }

package/dist/rules/site-app/layout-design-notes.js

@@ -0,0 +1,277 @@
+// The layout-design-notes subject (tracker tab css-subjects, rows KIT-*): layout choices the editor's later editing depends on, as the kit's
+// notes check them (origami PR #45 at 01510ad, validate.mjs: stackPolicyNotes :250-283, oneColumnGrids :197-223, boxIssues :157-169, noMobile
+// :446, :556). Warnings, never errors: the import accepts every case; the design call stays the author's. In a page's or global component's
+// layout.css, read with its structure.jsx:
+// - a Section, HeaderSection or FooterSection and its canvas (its InternalContainer) are a grid, never `display: flex` (KIT-sectionStack);
+// - a BoxContainer carries no `display: flex`, the stack goes on its InternalContainer (KIT-boxStack), which has no width or height of its
+//   own (KIT-icSize); the box of a row stack is `width: max-content`, not a % (KIT-rowStackBox);
+// - an InternalContainer that isn't a canvas and isn't inside a Menu: a one-column grid with two or more children in separate rows is a
+//   Stack (KIT-oneColumnGrid, by default only); a stack with one child is a grid (KIT-stackSingle); a stack's children each have their own
+//   order, 1 to n (KIT-stackOrder); by default, the orders follow the JSX order (KIT-stackOrderJsx);
+// - when the site or the page has a breakpoint, a component with no rule for it reuses its desktop layout (KIT-noMobile): one line per
+//   page and breakpoint, from the page's root.
+// A breakpoint is its `@media` query as written; a breakpoint without a value takes the default's, as the import merges the element's
+// scope (rulesApi.getLayoutCss). A breakpoint's note that repeats the default's (inherited, not restated) is reported once.
+import { FILE_START } from "../../page-model/index.js";
+import { getLayoutLiteral, GLOBAL_SECTIONS, isElementDeclaration, SECTIONS, WRAPPERS } from "../../rules-api/index.js";
+import { defineRule } from "./define-rule.js";
+const CHECKS = ['section_stack', 'box_stack', 'inner_container_size', 'row_stack_box_width', 'one_column_grid', 'stack_single_child', 'stack_order', 'stack_order_jsx', 'no_mobile_rule'];
+export default defineRule({
+    name: 'layout-design-notes',
+    editors: ['studio2'],
+    severity: 'warn',
+    checks: CHECKS,
+    callbacks: {
+        JSXElement: checkElementLayout,
+    },
+});
+/** The notes on one element, by what it is: a section, a BoxContainer, an InternalContainer; the page's mobile rules from its root. */
+function checkElementLayout(input) {
+    const { node, rulesApi } = input;
+    const component = rulesApi.getComponent(node);
+    if (!component)
+        return;
+    const type = rulesApi.getType(node);
+    if (type !== null && SECTIONS.includes(type))
+        checkSectionIsGrid(component, 'a section', input);
+    if (type === 'box')
+        checkBox(component, input);
+    if (type === 'innerElement')
+        checkInternalContainer(component, input);
+    if (rulesApi.getRoot() === component)
+        checkMobileRules(input);
+}
+// ── a section and its canvas (KIT-sectionStack) ──
+/** A section, or a section's canvas, with `display: flex`. */
+function checkSectionIsGrid(component, what, input) {
+    reportAtEachBreakpoint([component], (media) => {
+        const display = getLayoutLine(input.rulesApi, component, 'display', media);
+        if (!isStack(display))
+            return null;
+        return { loc: component.loc, line: display.line, text: `${nameOf(component)}, ${what}, has \`display: flex\`: ${what} is always a grid, write \`display: grid\``, row: 'KIT-sectionStack', check: 'section_stack' };
+    }, input);
+}
+// ── a BoxContainer and its InternalContainer (KIT-boxStack, KIT-icSize, KIT-rowStackBox) ──
+function checkBox(box, input) {
+    const { node, rulesApi } = input;
+    const innerElement = rulesApi.getItemElements(node).find((item) => rulesApi.getType(item) === 'innerElement'); // a child, or `children={<InternalContainer …>}`
+    const inner = innerElement ? rulesApi.getComponent(innerElement) : null;
+    checkBoxStack(box, inner, input);
+    if (!inner)
+        return;
+    checkBoxSize(box, inner, input);
+    checkRowStackBoxWidth(box, inner, input);
+}
+/** `display: flex` on the BoxContainer itself. */
+function checkBoxStack(box, inner, input) {
+    reportAtEachBreakpoint([box], (media) => {
+        const display = getLayoutLine(input.rulesApi, box, 'display', media);
+        if (!isStack(display))
+            return null;
+        return { loc: box.loc, line: display.line, text: `${nameOf(box)} (BoxContainer) has \`display: flex\`: put the stack on its InternalContainer${inner ? `, ${nameOf(inner)}` : ''}`, row: 'KIT-boxStack', check: 'box_stack' };
+    }, input);
+}
+/** A width or height of its own on the BoxContainer's InternalContainer: not `100%` or `auto`, which fill the box (the export writes `width: 100%; height: auto`). */
+function checkBoxSize(box, inner, input) {
+    for (const property of ['width', 'height']) {
+        reportAtEachBreakpoint([inner], (media) => {
+            const size = getLayoutLine(input.rulesApi, inner, property, media);
+            if (!size || FILLS_BOX.includes(size.value))
+                return null;
+            return { loc: inner.loc, line: size.line, text: `${nameOf(inner)} has \`${property}: ${size.value}\`: put the size on its BoxContainer, ${nameOf(box)}`, row: 'KIT-icSize', check: 'inner_container_size' };
+        }, input);
+    }
+}
+/** An InternalContainer size that fills its BoxContainer rather than sizing it. */
+const FILLS_BOX = ['100%', 'auto'];
+/** A % width on the BoxContainer of a row stack. */
+function checkRowStackBoxWidth(box, inner, input) {
+    reportAtEachBreakpoint([box, inner], (media) => {
+        const { rulesApi } = input;
+        const width = getLayoutLine(rulesApi, box, 'width', media);
+        const direction = getLayoutLine(rulesApi, inner, 'flex-direction', media)?.value ?? 'row'; // CSS's default
+        if (!width || !width.value.endsWith('%') || !isStack(getLayoutLine(rulesApi, inner, 'display', media)) || !/^row(-reverse)?$/.test(direction))
+            return null;
+        return { loc: box.loc, line: width.line, text: `${nameOf(box)} has \`width: ${width.value}\`, but its InternalContainer ${nameOf(inner)} is a row stack: a row stack's box follows its content, write \`width: max-content\``, row: 'KIT-rowStackBox', check: 'row_stack_box_width' };
+    }, input);
+}
+// ── an InternalContainer's children (KIT-oneColumnGrid, KIT-stackSingle, KIT-stackOrder, KIT-stackOrderJsx) ──
+function checkInternalContainer(inner, input) {
+    const holders = getHolders(input.node, input.rulesApi);
+    const holderType = holders[0] ? input.rulesApi.getType(holders[0]) : null;
+    if (holderType !== null && SECTIONS.includes(holderType))
+        return checkSectionIsGrid(inner, "a section's canvas", input);
+    if (holders.some((holder) => input.rulesApi.getType(holder) === 'menu'))
+        return;
+    const items = input.rulesApi.getItemElements(input.node).flatMap((element) => input.rulesApi.getComponent(element) ?? []);
+    checkOneColumnGrid(inner, items, input);
+    checkStackSingleChild(inner, items, input);
+    checkStackOrder(inner, items, input);
+    checkStackOrderJsx(inner, items, input);
+}
+/** By default: a one-column grid whose two or more children sit in separate rows. */
+function checkOneColumnGrid(inner, items, { rulesApi, report }) {
+    const display = getLayoutLine(rulesApi, inner, 'display', null);
+    if (display?.value !== 'grid' || items.length < 2)
+        return;
+    const columns = (getLayoutLine(rulesApi, inner, 'grid-template-columns', null)?.value ?? '').replace(/^repeat\(\s*1\s*,\s*(.*)\)$/, '$1'); // repeat(1, <tracks>) is its tracks
+    if (columns.includes('repeat(') || columns.split(/\s+(?![^(]*\))/).length > 1)
+        return;
+    if (items.some((item) => !isFirstColumn(getLayoutLine(rulesApi, item, 'grid-column', null))))
+        return; // a child past the one track adds a column
+    const rows = items.map((item) => getRowRange(getLayoutLine(rulesApi, item, 'grid-row', null))).filter((range) => range !== null);
+    const layered = rows.some((a, index) => rows.slice(index + 1).some((b) => a[0] < b[1] && b[0] < a[1]));
+    if (layered)
+        return;
+    reportNote({ loc: inner.loc, line: display.line, text: `${nameOf(inner)} is a one-column grid with ${items.length} children in separate rows: a Stack (\`display: flex; flex-direction: column\`) keeps them editable as a group`, row: 'KIT-oneColumnGrid', check: 'one_column_grid' }, null, report);
+}
+/** Whether a `grid-column` keeps the child in the first column: none, `auto`, `1`, `span 1`, `1 / 2`, `1 / -1` or `1 / span 1`. */
+const isFirstColumn = (gridColumn) => !gridColumn || /^(auto|span\s+1|1(\s*\/\s*(2|-1|span\s+1))?)$/.test(gridColumn.value);
+/** A `grid-row` as the rows it occupies, [start, end): `2 / 4` → [2, 4], `2` → [2, 3]; a line counted from the end (`1 / -1`) as every row;
+ * null for anything else (a free row). */
+function getRowRange(gridRow) {
+    const match = /^(-?\d+)(?:\s*\/\s*(-?\d+))?$/.exec(gridRow?.value ?? '');
+    if (!match)
+        return null;
+    // Without the row count, a line from the end can't be placed: taken as every row, so the grid isn't noted (read grid-template-rows to place it).
+    if (match[1].startsWith('-') || match[2]?.startsWith('-'))
+        return [-Infinity, Infinity];
+    const start = Number(match[1]);
+    const end = match[2] === undefined ? start + 1 : Number(match[2]);
+    return end > start ? [start, end] : null;
+}
+/** A stack with one child. */
+function checkStackSingleChild(inner, items, input) {
+    if (items.length !== 1)
+        return;
+    reportAtEachBreakpoint([inner], (media) => {
+        const display = getLayoutLine(input.rulesApi, inner, 'display', media);
+        if (!isStack(display))
+            return null;
+        return { loc: inner.loc, line: display.line, text: `${nameOf(inner)} is a stack with one child, ${nameOf(items[0])}: a single child sits in a grid, write \`display: grid\``, row: 'KIT-stackSingle', check: 'stack_single_child' };
+    }, input);
+}
+/** A stack's children that share an order, or whose orders (all written) aren't 1 to n. A missing order isn't noted: the import fills the JSX order. */
+function checkStackOrder(inner, items, input) {
+    if (items.length < 2)
+        return;
+    reportAtEachBreakpoint([inner, ...items], (media) => {
+        const { rulesApi } = input;
+        if (!isStack(getLayoutLine(rulesApi, inner, 'display', media)))
+            return null;
+        const orders = items.flatMap((item) => { const order = getLayoutLine(rulesApi, item, 'order', media); return order ? [{ item, order }] : []; });
+        const byValue = new Map();
+        for (const { item, order } of orders)
+            byValue.set(order.value, [...(byValue.get(order.value) ?? []), item]);
+        const shared = [...byValue].find(([, sharing]) => sharing.length > 1);
+        if (shared)
+            return { loc: inner.loc, line: orders[0].order.line, text: `stack children ${shared[1].map(nameOf).join(' and ')} share \`order: ${shared[0]}\`: give each child its own order, 1, 2, 3 …`, row: 'KIT-stackOrder', check: 'stack_order' };
+        if (orders.length !== items.length || isOneToN(orders.map(({ order }) => Number(order.value))))
+            return null;
+        return { loc: inner.loc, line: orders[0].order.line, text: `${nameOf(inner)}'s stack children use order ${orders.map(({ order }) => order.value).join(', ')}, not 1 to ${items.length}: give each child its own order, 1, 2, 3 …`, row: 'KIT-stackOrder', check: 'stack_order' };
+    }, input);
+}
+/** By default, on a stack that isn't reversed: orders (a clean 1 to n) that show the children in another order than the JSX. */
+function checkStackOrderJsx(inner, items, { rulesApi, report }) {
+    if (items.length < 2 || !isStack(getLayoutLine(rulesApi, inner, 'display', null)))
+        return;
+    if (/reverse/.test(getLayoutLine(rulesApi, inner, 'flex-direction', null)?.value ?? ''))
+        return;
+    const orders = items.map((item) => getLayoutLine(rulesApi, item, 'order', null));
+    if (!orders.every((order) => order !== undefined) || !isOneToN(orders.map((order) => Number(order.value))))
+        return;
+    const shown = items.map((item, index) => ({ item, order: Number(orders[index].value) })).sort((a, b) => a.order - b.order).map(({ item }) => item);
+    if (shown.every((item, index) => item === items[index]))
+        return;
+    reportNote({ loc: inner.loc, line: orders[0].line, text: `${nameOf(inner)} shows its children as ${shown.map(nameOf).join(', ')}, unlike the JSX order ${items.map(nameOf).join(', ')} (fine when intended)`, row: 'KIT-stackOrderJsx', check: 'stack_order_jsx' }, null, report);
+}
+/** Whether these are 1, 2 … n in some order. */
+const isOneToN = (numbers) => [...numbers].sort((a, b) => a - b).every((number, index) => number === index + 1);
+// ── the page's mobile rules (KIT-noMobile) ──
+/** At each breakpoint the site or the page has: the elements with a default layout rule but no rule for it; one line per breakpoint. Not the
+ * root, a reference to a global component (its page lays it out), a layer or a Background (it spans its owner at every breakpoint), or anything inside a Menu (the editor's own layout). */
+function checkMobileRules({ node, rulesApi, report }) {
+    const laidOut = getLaidOutComponents(node, rulesApi);
+    const siteBreakpoints = rulesApi.getCustomMedia('theme').filter(({ query }) => query);
+    /** A breakpoint by its range: `(--tablet)` (or `( --tablet )`) as the theme declares it, `(max-width: 1023px)`; any other as written. */
+    const toRange = (media) => {
+        const name = media === null ? null : rulesApi.getBreakpointName(media);
+        return siteBreakpoints.find((breakpoint) => breakpoint.name === name)?.query ?? media;
+    };
+    // The page's breakpoints: from every component, the ones not counted too (a Background's `@media` is the page's).
+    const breakpoints = new Set([...siteBreakpoints.map(({ query }) => query), ...getBreakpoints(Object.values(rulesApi.page.components)).map(toRange)]);
+    for (const breakpoint of breakpoints) {
+        const missing = laidOut.filter((component) => hasLayoutAt(component, null) && !hasLayoutAt(component, breakpoint, toRange));
+        if (!missing.length)
+            continue;
+        const names = missing.slice(0, 6).map(nameOf).join(', ') + (missing.length > 6 ? ', …' : '');
+        report({ check: 'no_mobile_rule', loc: FILE_START, message: `layout.css: ${missing.length} element${missing.length === 1 ? ' has' : 's have'} no rule for @media ${breakpoint} and reuse${missing.length === 1 ? 's' : ''} the desktop layout as is (fine when intended): ${names} (tracker KIT-noMobile).` });
+    }
+}
+/** The components the page lays out below its root: through every element and its items; not into a Menu, not a global component's reference or a Background. */
+function getLaidOutComponents(root, rulesApi) {
+    const found = [];
+    const walk = (element) => {
+        for (const item of rulesApi.getItemElements(element)) {
+            const type = rulesApi.getType(item);
+            if (type !== null && (GLOBAL_SECTIONS.includes(type) || type === 'background'))
+                continue;
+            const component = rulesApi.getComponent(item);
+            if (component)
+                found.push(component);
+            if (type !== 'menu')
+                walk(item);
+        }
+    };
+    walk(root);
+    return found;
+}
+/** Whether the element's own layout lines (not a state's or an inner part's, as getLayoutCss reads them) include one at this breakpoint (null: by default), each line's `@media` read by `read`. */
+const hasLayoutAt = (component, media, read = (written) => written) => Object.values(component.css.layout).some((lines) => lines.some((line) => read(line.media) === media && isElementDeclaration(line)));
+// ── reporting ──
+/** Runs a check by default, then at each `@media` these components' layout lines use; a breakpoint's note that repeats the default's isn't reported again. */
+function reportAtEachBreakpoint(components, check, { report }) {
+    const byDefault = check(null);
+    if (byDefault)
+        reportNote(byDefault, null, report);
+    for (const media of getBreakpoints(components)) {
+        const note = check(media);
+        if (note && note.text !== byDefault?.text)
+            reportNote(note, media, report);
+    }
+}
+/** The `@media` queries these components' own layout lines use, as written, in order of first use. */
+function getBreakpoints(components) {
+    const medias = new Set();
+    for (const component of components)
+        for (const lines of Object.values(component.css.layout))
+            for (const line of lines)
+                if (line.media !== null && isElementDeclaration(line))
+                    medias.add(line.media);
+    return [...medias];
+}
+/** A note on its component: `layout.css:<line>: <text>[ at @media …] (tracker <row>).` */
+function reportNote({ loc, line, text, row, check }, media, report) {
+    report({ check, loc, message: `layout.css:${line}: ${text}${media ? ` at @media ${media}` : ''} (tracker ${row}).` });
+}
+/** A layout line with its value as the import reads it: trimmed, a layout variable `var(--name, <fallback>)` by its fallback. */
+function getLayoutLine(rulesApi, component, property, media) {
+    const line = rulesApi.getLayoutCss(component, property, media);
+    return line && { ...line, value: getLayoutLiteral(line.value.trim()) };
+}
+/** `display: flex`, the import's stack. */
+const isStack = (display) => display?.value === 'flex';
+/** The components around this element, closest first: wrappers are transparent. */
+function getHolders(element, rulesApi) {
+    const holders = [];
+    for (let node = element.parent; node; node = node.parent) {
+        if (node.type !== 'JSXElement')
+            continue;
+        const type = rulesApi.getType(node);
+        if (type === null || !WRAPPERS.includes(type))
+            holders.push(node);
+    }
+    return holders;
+}
+/** How a message names the element: its first class as a selector, or its key when it has no class (and so no layout CSS). */
+const nameOf = (component) => (component.classNames[0] ? `.${component.classNames[0]}` : component.key);

package/dist/rules-api/index.js

@@ -3,4 +3,5 @@ export { createRulesApi, getOrCreateRulesApi } from "./rules-api.js";
 export { createCssFileReporter, describeAtRule, reportCssProblem } from "./report.js";
 export { bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getParamReadKind, getProperty, isBound, isOneEditAway, isRecord, isReservedAttribute, isStructure, isReadByImport, ownerOf, } from "../shared/utils.js";
 export { BUILDERS, CATALOG_FONTS, CALLBACK_PROP, DATA_KEY, ELEMENT_PROPS, EVENT_ATTRIBUTE, GLOBAL_SECTIONS, INSTANCE_PROPS, INTERACTIONS_PACKAGES, LAYER_ATTRIBUTES, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE, SECTIONS, SHARED_COMP_ID, STRUCTURE, SYSTEM_PACKAGE, TRANSFORM_BUILDERS, TYPED_BUILDERS, WRAPPERS, } from "../shared/constants.js";
-export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readFontShorthand, readSegment } from "../shared/css.js";
+export { isElementDeclaration } from "./utils.js";
+export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getLayoutLiteral, getMixinId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readFontShorthand, readSegment } from "../shared/css.js";

package/dist/rules-api/rules-api.js

@@ -6,8 +6,8 @@ import { GLOBAL_COMPONENTS_FOLDER } from "../shared/site-files-tree-mapping.js";
 import { models, pageId } from "../bi/stats.js";
 import { readPage } from "../page-model/index.js";
 import { getAttributeElements as getHeldElements, getAttributeValue, getChildren, getId, getImport, getImportKind, getImportedName, getPropNames, getSlot, getTagName, getType, hasDataAttributes, isTypeScript } from "../shared/utils.js";
-import { readBreakpointName, readCustomMedia, readThemeFontTokens, readThemeTokens } from "../shared/css.js";
-import { WRAPPERS } from "../shared/constants.js";
+import { CONTENT_TARGET, readBreakpointName, readCustomMedia, readThemeFontTokens, readThemeTokens } from "../shared/css.js";
+import { LAYER_ATTRIBUTES, WRAPPERS } from "../shared/constants.js";
 import { getEnclosingAtRules, isBaseDeclaration } from "./utils.js";
 /** Theme lines come from @apply inside style.css, so style.css's own lines usually come after them. */
 const CASCADE_ORDER = ['layout', 'theme', 'style'];
@@ -26,6 +26,10 @@ export function createRulesApi(page) {
         return isWrapper(child) ? getChildElements(child) : [child];
     });
     const getAttributeElements = (node) => getHeldElements(node).flatMap((held) => (isWrapper(held.element) ? getChildElements(held.element).map((inner) => ({ ...held, element: inner })) : [held]));
+    const getLayoutCss = (component, property, media) => {
+        const lines = (component.css.layout[property] ?? []).filter((line) => line.selector === '&' || line.selector === `& @origami-target ${CONTENT_TARGET}`);
+        return lines.filter((line) => line.media === media).at(-1) ?? (media === null ? undefined : lines.filter((line) => line.media === null).at(-1));
+    };
     return {
         page,
         // A JSX element starts where its component starts.
@@ -34,6 +38,7 @@ export function createRulesApi(page) {
         getRoot: () => Object.values(page.components).find((component) => !getParent(component)) ?? null,
         getCss,
         getBaseCss: (component, property) => getCss(component, property).filter(isBaseDeclaration).at(-1),
+        getLayoutCss,
         getThemeTokens: () => readThemeTokens(page.css.files.theme),
         getThemeFontTokens: () => readThemeFontTokens(page.css.files.theme),
         getCustomMedia: (kind) => readCustomMedia(page.css.files[kind]),
@@ -46,6 +51,7 @@ export function createRulesApi(page) {
         getChildren,
         getChildElements,
         getAttributeElements,
+        getItemElements: (node) => [...getChildElements(node), ...getAttributeElements(node).filter(({ name }) => !LAYER_ATTRIBUTES.includes(name)).map(({ element }) => element)],
         getAttributeValue,
         getSlot,
         getImport: (node) => getImport(node.type === 'JSXElement' ? getTagName(node).split('.')[0] : node.name, getProgram(node)),

package/dist/rules-api/utils.js

@@ -1,5 +1,7 @@
 /** On the component itself, outside any @media and @origami-target: applies by default. */
 export const isBaseDeclaration = (decl) => !decl.media && decl.selector === '&';
+/** On the component itself (`&`) or in one of its `@origami-target` blocks, at any breakpoint: the lines the import merges into the element's layout scope; not a state's or an inner part's. */
+export const isElementDeclaration = (decl) => decl.selector === '&' || decl.selector.startsWith('& @origami-target ');
 /** The at-rules around a CSS node, outer to inner (`@media`, `@scope`, `@layer`, `@mixin`…); [] at the file's top level. */
 export function getEnclosingAtRules(node) {
     const atRules = [];

package/dist/shared/css.js

@@ -52,6 +52,11 @@ function parseCustomMedia(params) {
     const [, name = '', query = ''] = /^(\S*)\s*([\s\S]*)$/.exec(params.trim()) ?? [];
     return { name, query };
 }
+/** A layout value as the import reads it (layoutVariables.ts literalOf): `var(--name, <fallback>)`, a field connected to one of the site's layout
+ * variables, by its fallback; any other value as is. */
+export const getLayoutLiteral = (value) => LAYOUT_VARIABLE_TOKEN.exec(value)?.[1] ?? value;
+/** `var(--name, <fallback>)`: a field connected to one of the site's layout variables, written with the field's own value as the fallback. */
+const LAYOUT_VARIABLE_TOKEN = /^var\(--[A-Za-z_-][\w-]*,\s*(.+)\)$/;
 /** A `font` shorthand's weight and family; undefined for a `var(…)` or a value with no family after its size. */
 export function readFontShorthand(value) {
     if (value.includes('var('))

package/dist/shared/utils.js

@@ -9,6 +9,10 @@ const TYPE_BY_IMPORT_SOURCE = [
     [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?HeaderSection$`), 'header'],
     [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?FooterSection$`), 'footer'],
     [new RegExp(`^${SYSTEM_PACKAGE}/InternalContainer$`), 'innerElement'],
+    // The editor's containers and its background, as the export imports their wrappers.
+    [/^@origami-wrappers\/wixEditorElements\/boxcontainer$/, 'box'],
+    [/^@origami-wrappers\/wixEditorElements\/menu$/, 'menu'],
+    [/^@origami-wrappers\/wixSystemElements\/background$/, 'background'],
     // A global component's folder is `<Type>_<id>`: HeaderSection_mb7ogqqn.
     [new RegExp(`/${GLOBAL_COMPONENTS}/(?:HeaderSection|Header)_[^/]+$`), 'globalHeader'],
     [new RegExp(`/${GLOBAL_COMPONENTS}/(?:FooterSection|Footer)_[^/]+$`), 'globalFooter'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.31",
+  "version": "1.34.33",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -52,5 +52,5 @@
       ]
     }
   },
-  "falconPackageHash": "686d35f346108816f50b0d95576cb023e273a903c797136d43187f3e"
+  "falconPackageHash": "fa4525b9f8f5fa63ad7d72b383deab33b1a9c16033290d6381eb0ee9"
 }