@wix/origami-lint 1.34.4 → 1.34.6

package/dist/rules/bindings.js

@@ -1,24 +1,30 @@
-import { RUNTIME_ONLY_BUILDERS, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_PACKAGE, SHARED_COMP_ID, bare, getAttribute, getExpression, getKey, getName, getProperties, getProperty, isStructure, ownerOf, } from "../rules-api/index.js";
+import { BUILDERS, CALLBACK_PROP, EVENT_ATTRIBUTE, RESERVED_ENTRY_KEYS, RUNTIME_PACKAGE, TRANSFORM_BUILDERS, TYPED_BUILDERS, bare, getAttribute, getExpression, getKey, getCallbackKind, getName, getObject, getParamReadKind, getProperties, getProperty, isBound, isReservedAttribute, isStructure, ownerOf, } from "../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
 /** The converter's reserved sources (identity.ts `isReservedRegistry`) and the DM's own `document`: no fn()/ctx() names. */
 const RESERVED_FOR_BINDINGS = ['runtime', 'interactReact', 'interact', 'motionPresets', 'menu', 'document', 'core'];
-/** The keys of a `bindings` object. */
-const BINDINGS_KEYS = ['props', 'visibility', 'states'];
+/** The key of a `bindings` object (parseJsx.ts bindingsIrOfExpression); the other two sections are written in `className` since converter 0.79. */
+const BINDINGS_KEY = 'props';
+const CLASS_NAME_SECTIONS = ['visibility', 'states'];
+/** A `className` term for a visibility: the viewer's utility class (reservedAttributes.ts CLASS_NAME_UTILITIES). */
+const VISIBILITY_PREFIX = 'wix-visibility-';
 const VISIBILITY_KEYS = ['collapsed', 'hidden'];
 const REMOVED = 'removed';
 const CTX_OPTIONS = ['from', 'placeholder'];
-const STATE_OPTIONS = ['kind', 'id', 'pseudoClass'];
 const BINDINGS_LIST = 'BindingsList';
 const STATIC_PREFIX = 'Static.';
+/** The types of an object the import reads as an argument's data item (decode.ts decodeDataRef); an object with no type and an `href` is a link. */
+const DATA_ITEM_TYPES = ['Builder.Image', 'Builder.Video', 'Builder.VectorArt', 'Builder.Audio', 'Builder.RichText', 'Builder.MenuItems', 'Builder.MenuItem', 'PageLink', 'ExternalLink',
+    'EmailLink', 'AnchorLink', 'DocumentLink', 'PhoneLink', 'DynamicPageLink', 'TextLink', 'LoginToWixLink', 'WhatsAppLink', 'AddressLink', 'TpaPageLink'];
 const PLACES = {
-    prop: { name: "a prop's binding", builders: ['ctx', 'fn', 'raw'], literals: false },
-    fnArg: { name: 'an `fn()` argument', builders: ['ctx', 'fn', 'raw'], literals: true },
-    isBinding: { name: "`is()`'s binding", builders: ['ctx', 'fn'], literals: false },
-    condition: { name: 'a condition', builders: ['is', 'all', 'ctx', 'fn', 'raw'], literals: true },
-    allItem: { name: 'an `all()` item', builders: ['is', 'ctx', 'fn', 'raw'], literals: true },
-    statesItem: { name: 'a `states` item', builders: ['state', 'raw'], literals: false },
+    prop: { name: "a prop's binding", builders: ['ctx', 'fn', 'raw', 'callback', 'map', 'shape'], literals: false },
+    fnArg: { name: 'an `fn()` argument', builders: ['ctx', 'fn', 'raw', 'callback', 'map', 'shape'], literals: true },
+    isBinding: { name: "`is()`'s binding", builders: ['ctx', 'fn', 'callback'], literals: false },
+    condition: { name: 'a condition', builders: ['is', 'all', 'ctx', 'fn', 'raw', 'callback'], literals: true },
+    allItem: { name: 'an `all()` item', builders: ['is', 'ctx', 'fn', 'raw', 'callback'], literals: true },
 };
 const PLAIN = 'a string, number or true / false';
+/** The builders whose value runs at render: a callback prop gets their value, not a function. */
+const RENDER_BUILDERS = ['ctx', 'fn', ...TRANSFORM_BUILDERS];
 export default defineRule({
     name: 'bindings',
     editors: ['studio2'],
@@ -47,13 +53,14 @@ function checkRemoveCondition(at) {
         condition(at, when, '`when`', true);
     removeTarget(at);
 }
-/** A component's builders, its `states` and `bindings`, and the props it binds as data attributes. */
+/** A component's builders, its callback props, its `bindings` and `className` conditions, and the props it binds as data attributes. */
 function checkComponentBindings(at) {
-    const { node } = at.input;
+    const { node, rulesApi } = at.input;
     builderInPlace(at);
-    statesAttribute(at, getAttribute(node, 'states'));
+    checkCallbackProps(at);
     bindingsAttribute(at, getAttribute(node, 'bindings'));
-    if (!hasData(node))
+    classNameAttribute(at, getAttribute(node, 'className'));
+    if (!rulesApi.hasDataAttributes(node))
         return;
     boundPropOnce(at);
     for (const [name, , value] of boundAttributes(node))
@@ -69,6 +76,9 @@ function checkEntryBindings(at, entry) {
     const bindings = getProperty(object, 'bindings');
     if (bindings)
         bindingsValue(entryAt, bindings.value, true);
+    const className = getObject(getProperty(object, 'className')?.value);
+    if (className)
+        classNameConditions(entryAt, className, '`className`');
     entryPropBoundOnce(entryAt, object);
     for (const [key, property] of boundEntryKeys(object))
         prop(entryAt, key, property.value, true);
@@ -84,7 +94,7 @@ function checkCallExpressionImports(input) {
         ctxSourceHasName(input, ctxHook);
 }
 /** Each builder's own row: the shape of its call, a key written twice in it. */
-const ROW_OF_BUILDER = { all: 'CONV-decode.ts:196', ctx: 'CONV-astValue.ts:276', fn: 'CONV-astValue.ts:287', is: 'CONV-decode.ts:172', raw: 'CONV-decode.ts:28', state: 'CONV-decode.ts:145' };
+const ROW_OF_BUILDER = { all: 'CONV-decode.ts:196', callback: 'CONV-astValue.ts:287', ctx: 'CONV-astValue.ts:276', fn: 'CONV-astValue.ts:287', is: 'CONV-decode.ts:172', raw: 'CONV-decode.ts:28' };
 const tracked = (message, row) => `${message.slice(0, -1)} (tracker ${row}).`;
 const say = ({ input }, node, message, row) => input.report({ loc: node.loc, message: tracked(message, row) });
 const textOf = ({ input }, node) => input.context.sourceCode.getText(node);
@@ -110,12 +120,9 @@ function removeTarget(at) {
         if (!value || builderOf(value, rulesApi) !== 'raw')
             continue;
         const item = getObject(value.arguments[0]);
-        const target = `${at.owner} wraps ${ownerOf(component)}, whose \`bindings\` are \`raw()\``;
-        if (!item || stringValue(getProperty(item, 'type')?.value) !== BINDINGS_LIST) {
-            say(at, value, `${target} of an item that isn't \`{ type: '${BINDINGS_LIST}', … }\`. Write the bindings as an object, or set ${REMOVED} in a ${BINDINGS_LIST} item instead of using \`<Remove>\`.`, 'CONV-decode.ts:296');
-        }
-        else if (setsRemoved(item)) {
-            say(at, value, `${target} of an item that already sets \`features.visibility.${REMOVED}\`. Keep only one of them.`, 'CONV-decode.ts:280');
+        // An item of another type is the bindings' own line (checkRawBindingsType).
+        if (item && stringValue(getProperty(item, 'type')?.value) === BINDINGS_LIST && setsRemoved(item)) {
+            say(at, value, `${at.owner} wraps ${ownerOf(component)}, whose \`bindings\` are \`raw()\` of an item that already sets \`features.visibility.${REMOVED}\`. Keep only one of them.`, 'CONV-decode.ts:280');
         }
     }
 }
@@ -125,6 +132,20 @@ function builderInPlace(at) {
         say(at, call, `\`${builderOf(call, rulesApi)}()\` on ${at.owner} is inside ${where}, where the import reads only plain values. Write a builder as the whole value of a data attribute (\`label={ctx(…)}\`) or of an elementProps entry key (\`navbar: { label: ctx(…) }\`), or in \`bindings\`.`, 'CONV-astValue.ts:98');
     }
 }
+/** A callback prop takes a function: the import reads it only in `bindings.props`, and there the site's runtime throws on anything but `callback()` (withOrigami). */
+function checkCallbackProps(at) {
+    const { node, rulesApi } = at.input;
+    for (const [name, attribute] of getCallbackAttributes(node)) {
+        say(at, attribute, `\`${name}\` on ${at.owner} is an attribute, which the import doesn't read for a callback prop. Bind it in \`bindings\` with \`callback()\`: \`bindings={{ props: { ${name}: callback(goHome) } }}\`.`, 'OUR-031');
+    }
+    if (!isWrappedByRuntime(node, rulesApi))
+        return;
+    for (const [name, value] of getBoundCallbacks(getAttribute(node, 'bindings'))) {
+        const what = runsAtRender(at, value);
+        if (what)
+            say(at, value, `\`bindings.props.${name}\` on ${at.owner} is ${what}, which runs at render and gives a value, not a function: the site's runtime throws on it. Write \`${name}: callback(goHome)\`.`, 'OUR-031');
+    }
+}
 function boundPropOnce(at) {
     const { node, rulesApi } = at.input;
     const bindings = getAttribute(node, 'bindings');
@@ -156,7 +177,7 @@ function bindingsAttribute(at, attribute) {
     else
         say(at, attribute, notBindings(at, attribute.value ? `\`${at.input.context.sourceCode.getText(attribute.value)}\`` : 'empty'), 'CONV-parseJsx.ts:700');
 }
-const notBindings = (at, what) => `\`bindings\` on ${at.owner} is ${what}. Write an object in place, \`bindings={{ props: {…}, visibility: {…}, states: {…} }}\`, or \`raw({…})\`.`;
+const notBindings = (at, what) => `\`bindings\` on ${at.owner} is ${what}. Write an object in place, \`bindings={{ props: {…} }}\`, or \`raw({…})\`.`;
 function bindingsValue(at, node, isEntry = false) {
     const value = bare(node);
     if (value.type === 'ObjectExpression')
@@ -167,6 +188,8 @@ function bindingsValue(at, node, isEntry = false) {
         if (hasDuplicateKey(at, value, 'raw') || !isRawWrittenOut(at, value))
             return;
         const object = bare(item);
+        if (!isEntry)
+            checkRawBindingsType(at, value, object);
         if (!isEntry && setsRemoved(object))
             say(at, value, `${at.owner} sets \`features.visibility.${REMOVED}\` in its \`raw()\` bindings. Move the condition out, and wrap the component in \`<Remove when={…}>\`.`, 'CONV-decode.ts:280');
         const propertyMap = getProperty(object, 'properties');
@@ -179,7 +202,7 @@ function bindingsValue(at, node, isEntry = false) {
         }
     }
     else if (builder) {
-        say(at, value, `\`bindings\` on ${at.owner} is a \`${builder}()\` call. Write an object and put the call under props, visibility or states, or use \`raw({…})\`.`, 'CONV-decode.ts:263');
+        say(at, value, `\`bindings\` on ${at.owner} is a \`${builder}()\` call. Write an object and put the call under props, or use \`raw({…})\`.`, 'CONV-decode.ts:263');
     }
     else if (!isCallByName(value)) {
         say(at, value, notBindings(at, describeIn(at, value)), 'CONV-parseJsx.ts:700');
@@ -191,15 +214,27 @@ function bindingsObject(at, bindings, isEntry) {
             : property.computed ? 'a computed key'
                 : property.key.type === 'Literal' && typeof property.key.value === 'string' ? `the quoted key \`${textOf(at, property.key)}\``
                     : property.key.type !== 'Identifier' ? `the key \`${textOf(at, property.key)}\``
-                        : BINDINGS_KEYS.includes(property.key.name) ? null
+                        : property.key.name === BINDINGS_KEY || CLASS_NAME_SECTIONS.includes(property.key.name) ? null
                             : `the key \`${property.key.name}\``;
         if (what)
-            say(at, property, `\`bindings\` on ${at.owner} has ${what}. Use only the keys props, visibility and states, written as plain names.`, 'CONV-parseJsx.ts:708');
+            say(at, property, `\`bindings\` on ${at.owner} has ${what}. Use only the key props, written as a plain name.`, 'CONV-parseJsx.ts:708');
+        else if (getKey(property) === BINDINGS_KEY)
+            section(at, BINDINGS_KEY, property.value);
         else
-            section(at, property.key.name, property.value, isEntry);
+            classNameSection(at, property, isEntry);
     }
 }
-function section(at, name, node, isEntry) {
+/** `bindings.visibility` and `bindings.states`: the import reads them in `className` since converter 0.79, and `removed` in `<Remove when>` (parseJsx.ts assertNoClassNameSections). */
+function classNameSection(at, property, isEntry) {
+    const key = getKey(property);
+    const removed = key === 'visibility' && !isEntry && getObject(property.value) && getProperty(getObject(property.value), REMOVED);
+    if (removed)
+        return say(at, removed, `${at.owner} sets \`visibility.${REMOVED}\` in its \`bindings\`. Move the condition out, and wrap the component in \`<Remove when={…}>\`.`, 'CONV-decode.ts:280');
+    const term = key === 'states' ? '{ hover: is(…) }' : "{ 'wix-visibility-hidden': is(…) }";
+    const fix = isEntry ? `in the entry's \`className: ${term}\`` : `as a \`className\` term: \`className={['comp-x', ${term}]}\``;
+    say(at, property, `\`bindings.${key}\` on ${at.owner} isn't read: the import reads states and visibility in \`className\`. Write each condition ${fix}.`, 'CONV-parseJsx.ts:708');
+}
+function section(at, name, node) {
     const fix = `Write an object of \`key: value\` entries: \`${name}: { label: … }\`.`;
     const value = bare(node);
     if (value.type !== 'ObjectExpression')
@@ -216,23 +251,36 @@ function section(at, name, node, isEntry) {
             say(at, property, `\`bindings.${name}\` on ${at.owner} ${problem}. ${fix}`, 'CONV-parseJsx.ts:669');
             continue;
         }
+        prop(at, getKey(property), property.value, false);
+    }
+}
+/** `className={['comp-x', 'open', { hover: is(…) }]}`: each object term's key holds a condition, as `bindings.states` and `bindings.visibility` did (parseJsx.ts mergeClassName). */
+function classNameAttribute(at, attribute) {
+    const value = getExpression(attribute);
+    if (value?.type !== 'ArrayExpression')
+        return;
+    for (const term of value.elements.slice(1)) {
+        if (term?.type === 'ObjectExpression')
+            classNameConditions(at, term, '`className`');
+    }
+}
+function classNameConditions(at, terms, where) {
+    for (const property of getProperties(terms)) {
         const key = getKey(property);
-        const where = `\`bindings.${name}.${key}\``;
-        if (name === 'props')
-            prop(at, key, property.value, false);
-        else if (name === 'visibility' && key === REMOVED && !isEntry)
-            say(at, property, `${at.owner} sets \`visibility.${REMOVED}\` in its \`bindings\`. Move the condition out, and wrap the component in \`<Remove when={…}>\`.`, 'CONV-decode.ts:280');
-        else if (name === 'visibility' && key !== REMOVED && !VISIBILITY_KEYS.includes(key))
-            say(at, property, `\`bindings.visibility\` on ${at.owner} has the key \`${key}\`. Use \`collapsed\` or \`hidden\`.`, 'CONV-decode.ts:221');
+        if (key === null)
+            continue;
+        if (key.startsWith(VISIBILITY_PREFIX) && !VISIBILITY_KEYS.includes(key.slice(VISIBILITY_PREFIX.length))) {
+            say(at, property, `${where} on ${at.owner} has the term \`${key}\`, which isn't a visibility. Use \`${VISIBILITY_PREFIX}hidden\` or \`${VISIBILITY_PREFIX}collapsed\`.`, 'CONV-decode.ts:221');
+        }
         else
-            condition(at, property.value, where);
+            condition(at, property.value, `${where} term \`${key}\``);
     }
 }
 function prop(at, name, node, placeholderAllowed) {
     const value = bare(node);
     if (value.type === 'ArrayExpression')
         return say(at, value, `\`bindings.props.${name}\` on ${at.owner} is an array. Bind the prop to one value: \`ctx()\`, \`fn()\` or \`raw()\`.`, 'CONV-decode.ts:209');
-    if (isPlain(value) || rawOnly(value) || isStaticRaw(at, value))
+    if (isPlain(value) || rawOnly(value) || isStaticRaw(at, value) || isTyped(value, at.input.rulesApi))
         return say(at, value, fixedValue(at, name), 'CONV-decode.ts:252');
     binding(at, value, 'prop', placeholderAllowed);
 }
@@ -255,10 +303,17 @@ function condition(at, node, where, inRemove = false) {
 function binding(at, node, place, placeholderAllowed = false) {
     const value = bare(node);
     const { name } = PLACES[place];
+    // A read of the renderItem row or of a map() item (`item.name`) is a binding in every place (decode.ts decodeRef).
+    if (getParamReadKind(value))
+        return;
+    if (isInvoke(value))
+        return invoke(at, value);
     if (isCallByName(value)) {
         const builder = builderOf(value, at.input.rulesApi);
         if (!builder)
             return;
+        if (TYPED_BUILDERS.includes(builder))
+            return PLACES[place].literals ? undefined : wrongPlace(at, value, `\`${builder}()\``, place);
         if (!PLACES[place].builders.includes(builder))
             return wrongPlace(at, value, `\`${builder}()\``, place);
         return call(at, value, builder, place, placeholderAllowed);
@@ -269,31 +324,46 @@ function binding(at, node, place, placeholderAllowed = false) {
         return;
     }
     const raw = rawOnly(value);
-    if (raw && place === 'statesItem')
-        return wrongPlace(at, value, raw, place);
+    if (raw === 'an object' && place === 'fnArg' && isDataItem(value))
+        return;
+    if (raw === 'an object' && place === 'fnArg')
+        return say(at, value, `${capitalize(name)} on ${at.owner} is an object that isn't a data item. Write ${PLAIN}, a link (\`{ href: … }\`) or a typed item (\`{ type: 'Builder.Image', … }\`), or wrap it in \`raw()\`.`, 'CONV-decode.ts:86');
     if (raw)
         return say(at, value, `${capitalize(name)} on ${at.owner} is ${raw}. Write ${PLAIN}, or wrap it in \`raw()\`.`, 'CONV-decode.ts:86');
     say(at, value, `${capitalize(name)} on ${at.owner} is ${describeIn(at, value)}. Write it out. ${hintFor(place)}`, 'CONV-decode.ts:86');
 }
-const wrongPlace = (at, node, what, place) => say(at, node, `${capitalize(what)} can't be ${PLACES[place].name} on ${at.owner}. ${hintFor(place)}`, place === 'statesItem' ? 'CONV-decode.ts:132' : 'CONV-decode.ts:126');
+const wrongPlace = (at, node, what, place) => say(at, node, `${capitalize(what)} can't be ${PLACES[place].name} on ${at.owner}. ${hintFor(place)}`, 'CONV-decode.ts:126');
+/** A called ctx() or row member: `ctx('cart.add', { from: useCart })(item.id)`, `item.actions.select('quick')` (decode.ts decodeInvoke). */
+function invoke(at, node) {
+    const { callee } = node;
+    if (!isMethodTarget(callee, at.input.rulesApi))
+        return say(at, node, `${capitalize(describeIn(at, node))} on ${at.owner} calls what isn't a context or the renderItem row. Call only \`ctx(…)\` or a member of the row: \`ctx('cart.add', { from: useCart })(item.id)\`.`, 'CONV-decode.ts:86');
+    if (callee.type === 'CallExpression')
+        ctxCall(at, callee, false);
+    if (node.arguments.some((argument) => argument.type === 'SpreadElement'))
+        return say(at, node, `A called \`ctx()\` or row member on ${at.owner} spreads its arguments. Write each argument out.`, 'CONV-astValue.ts:310');
+    for (const argument of node.arguments)
+        binding(at, argument, 'fnArg');
+}
 function call(at, node, builder, place, placeholderAllowed) {
     if (node.arguments.some((argument) => argument.type === 'SpreadElement')) {
         return say(at, node, `\`${builder}()\` on ${at.owner} spreads its arguments. Write each argument out.`, 'CONV-astValue.ts:310');
     }
-    if (hasDuplicateKey(at, node, builder))
+    // map() and shape() hold a callback, read in its own scope: no tracker row checks its shape yet.
+    if (builder === 'map' || builder === 'shape' || hasDuplicateKey(at, node, builder))
         return;
     if (builder === 'ctx')
         ctxCall(at, node, placeholderAllowed);
     else if (builder === 'fn')
         fnCall(at, node, placeholderAllowed);
+    else if (builder === 'callback')
+        callbackCall(at, node);
     else if (builder === 'is')
         isCall(at, node);
     else if (builder === 'all')
         allCall(at, node, place);
-    else if (builder === 'raw')
-        isRawWrittenOut(at, node);
     else
-        stateCall(at, node);
+        isRawWrittenOut(at, node);
 }
 function hasDuplicateKey(at, node, builder) {
     const twice = node.arguments.map(duplicateKeyIn).find(Boolean);
@@ -334,6 +404,21 @@ function fnCall(at, node, placeholderAllowed) {
             binding(at, argument, 'fnArg');
     }
 }
+/** `callback(goHome, 2)`: the function (an imported one, a `ctx()` or a member of the row), then its bound arguments (decode.ts decodeCallback). */
+function callbackCall(at, node) {
+    const [first, ...bound] = node.arguments;
+    if (!first)
+        return say(at, node, `\`callback()\` on ${at.owner} has no arguments. Write the function first: \`callback(goHome, …)\`.`, 'CONV-astValue.ts:287');
+    const target = bare(first);
+    // A name that isn't a parameter is the imported function: bindingNameImported checks its import.
+    const isFunctionName = target.type === 'Identifier' && !getParamReadKind(target);
+    if (!isFunctionName && !isMethodTarget(target, at.input.rulesApi))
+        return say(at, target, `\`callback()\`'s function on ${at.owner} is ${describeIn(at, target)}. Write an imported function, a \`ctx()\` or a member of the renderItem row: \`callback(goHome, …)\`.`, 'CONV-decode.ts:86');
+    if (target.type === 'CallExpression')
+        ctxCall(at, target, false);
+    for (const argument of bound)
+        binding(at, argument, 'fnArg');
+}
 function placeholderValue(at, node) {
     const value = bare(node);
     if (!isPlain(value))
@@ -344,14 +429,26 @@ function isCall(at, node) {
     if (node.arguments.length !== 2)
         return say(at, node, `\`is()\` on ${at.owner} has ${node.arguments.length} argument${node.arguments.length === 1 ? '' : 's'}. ${fix}`, 'CONV-decode.ts:172');
     const [binded, compared] = node.arguments.map((argument) => bare(argument));
-    if (isPlain(binded) || rawOnly(binded) || builderOf(binded, at.input.rulesApi) === 'raw')
-        say(at, binded, `\`is()\` on ${at.owner} compares ${isCallByName(binded) ? '`raw()`' : 'a literal'}, not a binding. ${fix}`, 'CONV-decode.ts:172');
+    if (isPlain(binded) || rawOnly(binded) || builderOf(binded, at.input.rulesApi) === 'raw' || isTyped(binded, at.input.rulesApi))
+        say(at, binded, `\`is()\` on ${at.owner} compares ${isCallByName(binded) ? `\`${builderOf(binded, at.input.rulesApi)}()\`` : 'a literal'}, not a binding. ${fix}`, 'CONV-decode.ts:172');
     else
         binding(at, binded, 'isBinding');
     const isStringOrBoolean = compared.type === 'Literal' && ['string', 'boolean'].includes(typeof compared.value);
     if (!isStringOrBoolean)
         say(at, compared, `\`is()\` on ${at.owner} compares to ${rawOnly(compared) ?? describeIn(at, compared)}. ${fix}`, 'CONV-decode.ts:172');
 }
+/**
+ * A component's `raw()` bindings are one item of the bindings namespace, and its one schema is BindingsList (reservedAttributes.ts
+ * BINDINGS_WRAPPER_TYPE): the import refuses an item with no type, or another one ("Cannot find schema … for namespace: bindings").
+ * An elementProps entry's bindings are stored inline in the component's inner elements, so they have no such item.
+ */
+function checkRawBindingsType(at, node, item) {
+    const type = getProperty(item, 'type');
+    if (stringValue(type?.value) === BINDINGS_LIST)
+        return;
+    const has = type ? `has the type \`${textOf(at, type.value)}\`` : 'has no `type`';
+    say(at, type?.value ?? node, `The \`raw()\` bindings item on ${at.owner} ${has}. Write \`raw({ type: '${BINDINGS_LIST}', … })\`: the import stores no other bindings item.`, 'CONV-decode.ts:28');
+}
 function allCall(at, node, place) {
     const count = node.arguments.length;
     if (place === 'condition' && count < 2)
@@ -379,61 +476,30 @@ function isRawWrittenOut(at, node) {
         say(at, found, `\`raw()\` on ${at.owner} holds ${describeIn(at, found)}. Write its item out with literal values.`, 'CONV-decode.ts:28');
     return !found;
 }
-function stateCall(at, node) {
-    const [nameNode, options, ...extra] = node.arguments;
-    const name = stringValue(nameNode);
-    const object = options && getObject(options);
-    const keys = object ? getProperties(object).map(getKey) : [];
-    const unknown = keys.find((key) => key !== null && !STATE_OPTIONS.includes(key));
-    const problem = name === null ? 'has no name string first'
-        : extra.length > 0 ? 'has more than two arguments'
-            : !object || object.properties.length !== keys.length ? "has no options object, or one that isn't all `key: value`"
-                : unknown !== undefined ? `has the option \`${unknown}\``
-                    : null;
-    if (problem)
-        return say(at, node, `\`state()\` on ${at.owner} ${problem}. Write \`state('hover', { kind: 'hover', id: 'state-1' })\` (pseudoClass is optional).`, 'CONV-decode.ts:145');
-    const found = nonLiteralIn(object);
-    if (found)
-        return say(at, found, `\`state()\` on ${at.owner} holds ${describeIn(at, found)}. Write its options out with literal values.`, 'CONV-decode.ts:145');
-    if (stringValue(getProperty(object, 'kind')?.value) === null)
-        return say(at, node, `\`state()\` on ${at.owner} has no \`kind\` string. Write \`state('hover', { kind: 'hover', id: 'state-1' })\` (pseudoClass is optional).`, 'CONV-decode.ts:145');
-    if (stringValue(getProperty(object, 'id')?.value) === null)
-        say(at, node, `\`state('${name}')\` on ${at.owner} has no \`id\` string. Add \`id: '…'\` to its options.`, 'CONV-decode.ts:142');
-}
-function statesAttribute(at, attribute) {
-    if (!attribute)
-        return;
-    const value = getExpression(attribute);
-    if (value?.type === 'ArrayExpression' && !hasHoleOrSpread(value)) {
-        for (const item of value.elements)
-            binding(at, item, 'statesItem');
-        return;
-    }
-    const what = value?.type === 'ArrayExpression' ? 'a list with a spread or an empty place' : value ? describeIn(at, value) : 'not a `{…}` value';
-    say(at, attribute, `\`states\` on ${at.owner} is ${what}. Write a list of \`state()\` or \`raw()\` calls: \`states={[state('hover', {…})]}\`.`, 'CONV-parseJsx.ts:641');
-}
-/** Only RUNTIME_ONLY_BUILDERS: other runtime names (`Remove(…)`) pass the converter's parse, then its decode has no case for them. */
+/** Only BUILDERS: other runtime names (`Remove(…)`) pass the converter's parse, then its decode has no case for them. */
 function isBuilderImported({ rulesApi, report }, callee) {
     const found = rulesApi.getImport(callee);
-    if (found?.kind === 'runtime' && found.imported === callee.name && RUNTIME_ONLY_BUILDERS.includes(callee.name))
+    if (found?.kind === 'runtime' && found.imported === callee.name && BUILDERS.includes(callee.name))
         return true;
     const builder = found?.kind === 'runtime' ? found.imported : callee.name;
     report({
         loc: callee.loc,
-        message: tracked(RUNTIME_ONLY_BUILDERS.includes(builder)
+        message: tracked(BUILDERS.includes(builder)
             ? `\`${callee.name}(…)\` isn't the builder \`${builder}\` from ${RUNTIME_PACKAGE}. Import it under its own name, \`import { ${builder} } from '${RUNTIME_PACKAGE}'\`, and call it as \`${builder}(…)\`.`
-            : `\`${callee.name}(…)\` isn't a builder. In an attribute, only the builders of ${RUNTIME_PACKAGE} are called (${RUNTIME_ONLY_BUILDERS.join(', ')}); write a literal value, or one of them.`, 'CONV-astValue.ts:296'),
+            : `\`${callee.name}(…)\` isn't a builder. In an attribute, only the builders of ${RUNTIME_PACKAGE} are called (${BUILDERS.join(', ')}); write a literal value, or one of them.`, 'CONV-astValue.ts:296'),
     });
     return false;
 }
 function bindingNameImported({ node, rulesApi, report, context }, builder) {
     const [first, second] = node.arguments;
     const options = builder === 'ctx' ? getObject(second) : null;
-    const named = builder === 'fn' ? first : options ? getProperty(options, 'from')?.value : undefined;
+    // callback()'s first argument may also be a `ctx()` or a member of the row (astValue.ts astToCallArg).
+    const isCallbackName = builder === 'callback' && first && bare(first).type === 'Identifier' && !getParamReadKind(bare(first));
+    const named = builder === 'fn' || isCallbackName ? first : options ? getProperty(options, 'from')?.value : undefined;
     if (!named)
         return null;
     const value = bare(named);
-    const what = builder === 'fn' ? "fn()'s function" : "ctx()'s `from` hook";
+    const what = builder === 'fn' ? "fn()'s function" : builder === 'callback' ? "callback()'s function" : "ctx()'s `from` hook";
     if (value.type !== 'Identifier') {
         report({ loc: value.loc, message: tracked(`${what} is \`${context.sourceCode.getText(value)}\`. Write an imported name: \`fn(numberToText, …)\`, \`{ from: useProduct }\`.`, 'CONV-astValue.ts:227') });
         return null;
@@ -456,12 +522,6 @@ function ctxSourceHasName({ report }, { hook, source }) {
     report({ loc: hook.loc, message: tracked(`ctx()'s \`from\` hook \`${hook.name}\` is imported from '${source}', which has no context name after the \`/\`. Write '<componentType>/<contextName>'.`, 'CONV-decode.ts:100') });
 }
 // ── reading the code ──
-function getObject(source) {
-    if (!source)
-        return null;
-    const value = source.type === 'JSXAttribute' ? getExpression(source) : bare(source);
-    return value?.type === 'ObjectExpression' ? value : null;
-}
 function getElementPropsEntries(element) {
     return getEntries(getObject(getAttribute(element, 'elementProps')));
 }
@@ -478,9 +538,22 @@ function builderOf(node, rulesApi) {
     if (node.type !== 'CallExpression' || node.callee.type !== 'Identifier')
         return null;
     const found = rulesApi.getImport(node.callee);
-    return found?.kind === 'runtime' && RUNTIME_ONLY_BUILDERS.includes(found.imported) ? found.imported : null;
+    return found?.kind === 'runtime' && BUILDERS.includes(found.imported) ? found.imported : null;
 }
 const isCallByName = (node) => node.type === 'CallExpression' && node.callee.type === 'Identifier';
+/** What the import calls as a method (decode.ts methodBindingOf): a `ctx()`, or a read of the renderItem row. A map() or shape() parameter has no methods. */
+const isMethodTarget = (node, rulesApi) => builderOf(node, rulesApi) === 'ctx' || getParamReadKind(node) === 'template';
+/** A call of a call or of a member: `ctx(…)(…)`, `item.actions.select()`. */
+const isInvoke = (node) => node.type === 'CallExpression' && (node.callee.type === 'CallExpression' || node.callee.type === 'MemberExpression');
+/** A value the import reads as a binding: a builder call, a called ctx() or row member, a read of a renderItem or map() parameter. */
+const isBindingValue = (node, rulesApi) => builderOf(node, rulesApi) !== null || isInvoke(node) || getParamReadKind(node) !== null;
+/** A typed builder, `email('a@b.c')`: a fixed value, like a literal (decode.ts decodeTypedStatic). */
+const isTyped = (node, rulesApi) => TYPED_BUILDERS.includes(builderOf(node, rulesApi) ?? '');
+/** An argument's object the import reads as a data item: a typed Builder item or link, or a link with an `href` and no type (decode.ts decodeDataRef). */
+function isDataItem(item) {
+    const type = getProperty(item, 'type');
+    return type ? DATA_ITEM_TYPES.includes(stringValue(type.value) ?? '') : getProperty(item, 'href') !== undefined;
+}
 function isPlain(node) {
     if (node.type === 'UnaryExpression')
         return node.operator === '-' && node.argument.type === 'Literal' && typeof node.argument.value === 'number';
@@ -547,22 +620,45 @@ const wrappedComponents = (element, rulesApi) => rulesApi.getChildren(element).f
         return wrappedComponents(child, rulesApi);
     return rulesApi.getComponent(child) ? [child] : [];
 });
-/** The import reads data attributes only on a component with `type=`. */
-const hasData = (element) => getAttribute(element, 'type') !== undefined;
-/** Not the component's data: the converter's reserved attributes, `sharedCompId`, and `states`, which bindings still reads. */
-const isReserved = (name) => RESERVED_ATTRIBUTES.includes(name) || name === SHARED_COMP_ID || name === 'states';
+/** The runtime's withOrigami wraps the component wrappers and the companion components: only on them does a callback prop throw. */
+function isWrappedByRuntime(element, rulesApi) {
+    const kind = rulesApi.getImport(element)?.kind;
+    return kind === 'wrapper' || kind === 'siteCode';
+}
+/** A callback prop written as an attribute with a call: `onClick={fn(goHome)}`. */
+function getCallbackAttributes(element) {
+    return element.openingElement.attributes.flatMap((attribute) => attribute.type === 'JSXAttribute' && CALLBACK_PROP.test(getName(attribute)) && getExpression(attribute)?.type === 'CallExpression' ? [[getName(attribute), attribute]] : []);
+}
+/** The callback props in `bindings={{ props: { onClick: … } }}`. */
+function getBoundCallbacks(attribute) {
+    const bindings = getObject(attribute);
+    const props = bindings && getObject(getProperty(bindings, BINDINGS_KEY)?.value);
+    return (props ? getProperties(props) : []).flatMap((property) => {
+        const key = getKey(property);
+        return key !== null && CALLBACK_PROP.test(key) ? [[key, bare(property.value)]] : [];
+    });
+}
+/** What a callback prop is bound with that runs at render: `fn()`, `ctx()`, a called ctx() or row member, a read of the row; null for `callback()` and `raw()`. */
+function runsAtRender(at, node) {
+    const builder = builderOf(node, at.input.rulesApi);
+    if (builder)
+        return RENDER_BUILDERS.includes(builder) ? `\`${builder}()\`` : null;
+    return isInvoke(node) || getParamReadKind(node) ? describeIn(at, node) : null;
+}
+/** The data attributes bound to a value the import reads as a binding; not an `on…` attribute, which it doesn't read at all (OUR-031 reports it). */
 function boundAttributes(element) {
     return element.openingElement.attributes.flatMap((attribute) => {
-        if (attribute.type !== 'JSXAttribute' || isReserved(getName(attribute)))
+        if (attribute.type !== 'JSXAttribute' || isReservedAttribute(getName(attribute)) || EVENT_ATTRIBUTE.test(getName(attribute)))
             return [];
         const value = getExpression(attribute);
-        return value?.type === 'CallExpression' ? [[getName(attribute), attribute, value]] : [];
+        return isBound(value) ? [[getName(attribute), attribute, value]] : [];
     });
 }
 function boundEntryKeys(entry) {
     return getProperties(entry).flatMap((property) => {
         const key = getKey(property);
-        return key !== null && !RESERVED_ENTRY_KEYS.includes(key) && bare(property.value).type === 'CallExpression' ? [[key, property]] : [];
+        const value = bare(property.value);
+        return key !== null && !RESERVED_ENTRY_KEYS.includes(key) && isBound(value) ? [[key, property]] : [];
     });
 }
 function getBindingsProps(node, rulesApi) {
@@ -617,13 +713,14 @@ function misplacedBuilders(element, rulesApi) {
             return [];
         const name = getName(attribute);
         const value = getExpression(attribute);
-        if (!value || name === 'bindings' || name === 'states')
+        if (!value || name === 'bindings')
             return [];
         if (name === 'elementProps')
             return entryBuilders(value, rulesApi, '`elementProps`');
-        if (!isReserved(name) && builderOf(value, rulesApi))
+        if (!isReservedAttribute(name) && isBindingValue(value, rulesApi))
             return [];
-        return buildersIn(value, rulesApi).map((call) => [call, `\`${name}\``]);
+        const builders = name === 'className' && value.type === 'ArrayExpression' ? value.elements.flatMap((term) => conditionlessBuilders(term, rulesApi)) : buildersIn(value, rulesApi);
+        return builders.map((call) => [call, `\`${name}\``]);
     });
 }
 function entryBuilders(elementProps, rulesApi, where) {
@@ -643,12 +740,19 @@ function entryBuilders(elementProps, rulesApi, where) {
                 return [];
             if (key === 'elementProps')
                 return entryBuilders(property.value, rulesApi, `${name}'s \`elementProps\``);
-            if (!RESERVED_ENTRY_KEYS.includes(key) && builderOf(property.value, rulesApi))
+            if (!RESERVED_ENTRY_KEYS.includes(key) && isBindingValue(bare(property.value), rulesApi))
                 return [];
-            return buildersIn(property.value, rulesApi).map((call) => [call, `${name}'s \`${key}\``]);
+            const builders = key === 'className' ? conditionlessBuilders(property.value, rulesApi) : buildersIn(property.value, rulesApi);
+            return builders.map((call) => [call, `${name}'s \`${key}\``]);
         });
     });
 }
+/** The builders in a `className` term outside its keys' conditions: an object term's `key: value` holds a condition, the rest is plain (parseJsx.ts classNameEntriesOf). */
+function conditionlessBuilders(term, rulesApi) {
+    if (term?.type !== 'ObjectExpression')
+        return buildersIn(term, rulesApi);
+    return term.properties.flatMap((property) => property.type === 'Property' && !property.computed && getKey(property) !== null ? [] : buildersIn(property, rulesApi));
+}
 function buildersIn(node, rulesApi) {
     if (!node || typeof node !== 'object' || !('type' in node))
         return [];
@@ -666,6 +770,9 @@ function isInStructureAttribute(node) {
     for (let up = node.parent; up.type !== 'Program'; up = up.parent) {
         if (up.type === 'JSXAttribute')
             inAttribute = true;
+        // A renderItem template and a map() or shape() callback are read in the structure, in their parameters' scope.
+        if (up.type === 'ArrowFunctionExpression' && getCallbackKind(up))
+            continue;
         if (up.type === 'ArrowFunctionExpression' || up.type === 'FunctionExpression')
             return inAttribute && isStructure(up);
     }