@wix/origami-site-runtime 1.0.13 → 1.0.14

package/src/cssPlugins/mixins.js

@@ -1,63 +0,0 @@
-import postcss from 'postcss'
-
-const MAX_EXPANSION_DEPTH = 64
-const MAX_CLONED_NODES = 100_000
-const MAX_CLONED_BYTES = 10 * 1024 * 1024
-
-/** @param {import('postcss').AtRule} atRule */
-const mixinName = atRule => atRule.params.trim().replace(/\(\)$/, '')
-
-/** @type {import('../transform/types.js').CssTransformPlugin} */
-export const mixinsPlugin = {
-    name: 'mixins',
-    order: 10,
-    transform(root) {
-        /** @type {Map<string, import('postcss').ChildNode[]>} */
-        const bodies = new Map()
-        root.walkAtRules('mixin', atRule => {
-            const first = atRule.first
-            const body = first?.type === 'atrule' && first.name === 'result' ? first : atRule
-            bodies.set(mixinName(atRule), body.nodes ?? [])
-            atRule.remove()
-        })
-        // Share budgets across all call sites, including intermediate bodies that are later replaced.
-        // Count descendants too: cloning a rule also clones its entire subtree.
-        let clonedNodes = 0
-        let clonedBytes = 0
-        /** @param {import('postcss').Root} container
-         * @param {string[]} stack */
-        const expand = (container, stack) => {
-            container.walkAtRules('apply', atRule => {
-                const name = mixinName(atRule)
-                const body = bodies.get(name)
-                if (!body) throw new Error(`@apply ${atRule.params} has no @mixin definition`)
-                if (stack.includes(name)) throw new Error(`Cyclic @apply: ${[...stack, name].join(' -> ')}`)
-                if (stack.length >= MAX_EXPANSION_DEPTH) {
-                    throw new Error(`@apply ${name} exceeds maximum expansion depth (${MAX_EXPANSION_DEPTH})`)
-                }
-                const pending = [...body]
-                while (pending.length) {
-                    const node = pending.pop()
-                    if (++clonedNodes > MAX_CLONED_NODES) {
-                        throw new Error(`@apply ${name} exceeds stylesheet cloned-node budget (${MAX_CLONED_NODES})`)
-                    }
-                    if (node && 'nodes' in node && node.nodes) {
-                        for (const child of node.nodes) pending.push(child)
-                    }
-                }
-                for (const node of body) {
-                    clonedBytes += Buffer.byteLength((node.raws.before ?? '') + node.toString(), 'utf8')
-                    if (clonedBytes > MAX_CLONED_BYTES) {
-                        throw new Error(`@apply ${name} exceeds stylesheet cloned-CSS byte budget (${MAX_CLONED_BYTES})`)
-                    }
-                }
-                // PostCSS does not revisit nodes inserted in place of the current at-rule.
-                // Expand a clone first so nested uses resolve without changing the definition.
-                const expanded = postcss.root({ nodes: body.map(node => node.clone()) })
-                expand(expanded, [...stack, name])
-                atRule.replaceWith(...expanded.nodes)
-            })
-        }
-        expand(root, [])
-    },
-}

package/src/cssPlugins/presets.js

@@ -1,73 +0,0 @@
-// A preset is set on the component's own rule (`#id` or `.id`): `--preset` for the component, `--preset-{key}` for
-// its ref element `key` (as listed in the wrapper's `REF_ELEMENTS`). An element nested deeper is reached the same way,
-// from the rule of the element it sits in: `.id .{parent} { --preset-{key}: … }`. The wrapper reads
-// `--preset` off the presets-wrapper classes it renders (see the origami-component-usage skill), so each declaration
-// moves there, as `--preset` in a rule of its own: `.{id}-presets-wrapper`, or `{selector} .{key}-presets-wrapper` so
-// an inner element's preset reaches that instance only. A rule that does not start at a component is left as authored.
-//
-// A preset on a component selector that can't be mapped is reported as a warning and left as authored rather than failing the
-// build: exported sites still carry presets in the older shape, and they must keep building until they are migrated.
-
-import postcss from 'postcss'
-
-const PRESET = /^--preset(?:-([\w-]+))?$/
-const COMPONENT = /^[#.]([\w-]+)$/
-const WRAPPER = '-presets-wrapper'
-
-/** Where a preset on `selector` goes: undefined when `selector` does not start at a component, null when it can't go. */
-const target = (selector, key) => {
-    const [first] = selector.split(/\s+/, 1)
-    const id = COMPONENT.exec(first)?.[1]
-    if (id === undefined || id.endsWith(WRAPPER)) return undefined
-    if (key !== undefined) return `${selector} .${key}${WRAPPER}`
-    return selector === first ? `.${id}${WRAPPER}` : null
-}
-
-/** @type {import('../transform/types.js').CssTransformPlugin} */
-export const presetsPlugin = {
-    name: 'presets',
-    order: 13,
-    transform(root, context) {
-        /** @type {import('postcss').Declaration[]} */
-        const declarations = []
-        root.walkDecls(PRESET, declaration => {
-            if (declaration.parent?.type === 'rule') declarations.push(declaration)
-        })
-        // Last first: each moved declaration lands right after its outermost rule, so source order is kept.
-        for (const declaration of declarations.reverse()) {
-            const rule = /** @type {import('postcss').Rule} */ (declaration.parent)
-            // The outermost rule, and the full selectors resolved as CSS Nesting does.
-            let outer = rule
-            let selectors = rule.selectors
-            while (outer.parent?.type === 'rule') {
-                outer = /** @type {import('postcss').Rule} */ (outer.parent)
-                const inner = selectors
-                selectors = outer.selectors.flatMap(parent =>
-                    inner.map(selector => (selector.includes('&') ? selector.replaceAll('&', parent) : `${parent} ${selector}`))
-                )
-            }
-            const targets = selectors.map(selector => target(selector, PRESET.exec(declaration.prop)?.[1]))
-            if (targets.every(selector => selector === undefined)) continue
-            if (!targets.every(Boolean)) {
-                context.warn?.(
-                    declaration,
-                    `presets: ${context.relativePath ?? context.filePath}: ` +
-                        `${declaration.prop} on "${selectors.join(', ')}": set --preset on #id or .id alone, ` +
-                        `and an inner element's as --preset-{key} on the rule of the element it sits in. Left as authored.`
-                )
-                continue
-            }
-            declaration.prop = '--preset'
-            const presetRule = postcss.rule({ selector: targets.join(', ') })
-            if (rule.source) presetRule.source = rule.source
-            outer.after(presetRule.append(declaration))
-            // Drop the rules the move left empty, from the declaration's own up to the outermost.
-            for (let node = rule; !node.nodes.length; ) {
-                const parent = node.parent
-                node.remove()
-                if (node === outer) break
-                node = /** @type {import('postcss').Rule} */ (parent)
-            }
-        }
-    },
-}

package/src/cssPlugins/spx/README.md

@@ -1,73 +0,0 @@
-# SPX follows the active CSS settings
-
-A component can declare a size once and change its scaling settings at a breakpoint:
-
-```css
-#button {
-    --spx-ref-width: 1280;
-    --spx-resolver-type: scale;
-    border-width: --spx(4);
-}
-
-@media (max-width: 600px) {
-    #button {
-        --spx-ref-width: 390;
-    }
-}
-```
-
-The desktop border declaration still applies on mobile. At a 390px viewport, it should
-be 4px again because its reference width is now 390. If the build replaces `4 / 1280`
-with a constant, the mobile reference-width override can no longer affect that border.
-
-This applies to regular component styles as well as container layouts. There is one
-SPX conversion path for all declarations. Layout first moves content and overflow
-styles onto their runtime wrappers; this plugin then converts every `--spx(number)`.
-
-## What the browser calculates
-
-In scale mode, the size is approximately:
-
-```text
-number × (scaling-factor − scrollbar-width) / spx-ref-width
-```
-
-Nonzero scaled values have a minimum magnitude of 0.5px, preserving their sign.
-In fixed mode, the number is a pixel value, including fractional pixels. Zero stays zero.
-
-The plugin keeps reference width, scaling factor and scrollbar width as `var()` reads
-inside each expression. It translates `--spx-resolver-type: scale` to a private numeric
-switch of 1, and `fixed` to 0. That switch selects scaled lengths or fixed pixels using
-ordinary CSS arithmetic, without requiring CSS custom functions or style queries.
-
-Settings stay in their authored rules, including their media queries, scopes, layers,
-source order and `!important`. Even a stylesheet that contains only settings must be
-processed, because it can affect calls declared in another stylesheet. The original
-resolver declaration is retained alongside its numeric switch.
-
-We inline the calculation instead of inheriting a precomputed `--origami-spx-unit`.
-An inherited derived custom property has already been resolved on its parent; changing
-reference width or scaling factor on a child would not recompute it there. Reading the
-settings in each expression lets ordinary components and internal wrappers use their
-own effective settings. No per-container SPX reset is needed.
-
-Existing preamble declarations remain in CSS and participate in the normal cascade.
-When settings are absent, expressions fall back to reference width 1280, scale mode,
-viewport width 100vw and scrollbar width 0px. Nested components inherit settings unless
-they override them. As with any CSS custom property, an authored token containing an
-SPX expression resolves where the token is declared; inheriting the token does not
-re-evaluate it using a child's settings.
-
-## Files and boundaries
-
-- `index.js` removes the SPX function definition and visits declarations.
-- `cascade.js` translates resolver settings and generates browser-evaluated expressions.
-- `calls.js` parses literal numeric SPX calls and rejects unsupported arguments.
-
-Reference widths must be positive numbers and resolver modes must be `scale` or `fixed`.
-SPX stopper clamping is still outside this plugin: it uses the effective
-`--scaling-factor` supplied by CSS and does not generate Thunderbolt's clamp formula.
-
-`test/spx.browser.mjs` checks computed styles for the button example, nested overrides,
-settings in separate stylesheets, cascade priority, fixed fractions, signs and zero.
-Run it together with the container browser checks using the package's `test:browser` script.

package/src/cssPlugins/spx/calls.js

@@ -1,12 +0,0 @@
-const CALL = /--spx\(\s*(-?(?:\d+\.?\d*|\.\d+))\s*\)/g
-
-/** Replace literal SPX calls, reporting unsupported arguments at their declaration.
- * @param {import('postcss').Declaration} declaration
- * @param {(value: number) => string} resolve
- * @param {() => Error} invalidCall
- */
-export const lowerCalls = (declaration, resolve, invalidCall) => {
-    if (!declaration.value.includes('--spx(')) return
-    declaration.value = declaration.value.replace(CALL, (_, literal) => resolve(Number(literal)))
-    if (declaration.value.includes('--spx(')) throw invalidCall()
-}

package/src/cssPlugins/spx/cascade.js

@@ -1,41 +0,0 @@
-import { lowerCalls } from './calls.js'
-
-// Keep arithmetic at the call site: an inherited derived custom property would already
-// be computed against its parent's settings. Only the numeric resolver switch inherits.
-const SCALE = 'var(--origami-spx-scale, 1)'
-const UNIT = `(${SCALE} * (var(--scaling-factor, 100vw) - var(--scrollbar-width, 0px)) / var(--spx-ref-width, 1280) + (1 - ${SCALE}) * 1px)`
-const FLOOR = `calc(0.5px * ${SCALE})`
-
-/** Compile settings and calls in place, retaining their cascade and source locations.
- * @param {import('postcss').Declaration} declaration
- */
-export const compileCascadeDeclaration = declaration => {
-    if (declaration.prop === '--spx-resolver-type') {
-        const resolver = declaration.value.trim()
-        if (!['scale', 'fixed'].includes(resolver)) throw declaration.error('Unsupported SPX resolver')
-        const value = resolver === 'scale' ? '1' : '0'
-        const previous = declaration.prev()
-        if (
-            previous?.type !== 'decl' ||
-            previous.prop !== '--origami-spx-scale' ||
-            previous.value !== value ||
-            previous.important !== declaration.important
-        ) {
-            declaration.before(declaration.clone({ prop: '--origami-spx-scale', value }))
-        }
-    }
-    if (
-        declaration.prop === '--spx-ref-width' &&
-        (!Number.isFinite(Number(declaration.value)) || Number(declaration.value) <= 0)
-    ) {
-        throw declaration.error('SPX reference width must be positive')
-    }
-    lowerCalls(
-        declaration,
-        number => {
-            if (number === 0) return '0px'
-            return number < 0 ? `min(calc(-1 * ${FLOOR}), ${number} * ${UNIT})` : `max(${FLOOR}, ${number} * ${UNIT})`
-        },
-        () => declaration.error('SPX calls --spx() with a non-literal argument')
-    )
-}

package/src/cssPlugins/spx/index.js

@@ -1,13 +0,0 @@
-import { compileCascadeDeclaration } from './cascade.js'
-
-/** @type {import('../../transform/types.js').CssTransformPlugin} */
-export const spxPlugin = {
-    name: 'spx',
-    order: 20,
-    transform(root) {
-        root.walkAtRules('function', atRule => {
-            if (atRule.params.trimStart().startsWith('--spx(')) atRule.remove()
-        })
-        root.walkDecls(compileCascadeDeclaration)
-    },
-}

package/src/cssPlugins/stackChildren.js

@@ -1,205 +0,0 @@
-// Checks the CSS of a stack's direct children (rule S2-STACK-001). It changes nothing: every violation in the
-// stylesheet is collected, and the build fails once with all of them.
-//
-// A stack is a parent whose rule declares `--container-layout-type: StackContainerLayout`; its
-// `flex-direction` says which way it stacks (column → vertical, anything else → horizontal, as in
-// CSS). Parent and child are the JSX tree's, so the tree comes from the item's `structure.tsx` (or `.jsx`): next
-// to the stylesheet, or one folder up when the stylesheet is the generated one in `_generated/`. Elements and
-// rules meet on `id` and `#id`. The stylesheet is the page's, with its
-// carriers already inlined (see ../transform/css/postcssPlugin.js), so every rule is in view.
-
-import { existsSync, readFileSync } from 'node:fs'
-import { basename, dirname, join } from 'node:path'
-import { parseSync } from '@babel/core'
-import { LayoutError } from '../transform/layoutError.js'
-
-const STRUCTURE_FILES = ['structure.tsx', 'structure.jsx']
-const GENERATED = '_generated'
-const STACK_CONTAINER = 'StackContainerLayout'
-const BASE = ''
-
-// What a stack child may write, per direction. `0` is allowed wherever a length is.
-const ALLOWED = {
-    vertical: { width: ['spx', 'px', 'vw', 'vh', '%', 'calc'], margin: ['spx', 'px', 'vw', 'vh', '%'] },
-    horizontal: { width: ['spx', 'px', 'vw', 'vh', 'calc'], margin: ['spx', 'px', 'vw', 'vh'] },
-}
-
-const UNIT = /^-?(?:\d+\.?\d*|\.\d+)(px|vw|vh|%)$/i
-const LABELS = { spx: '--spx()', px: 'px', vw: 'vw', vh: 'vh', '%': '%', calc: 'calc()' }
-
-/** `width` → 'width', `margin`/`margin-*` → 'margin', anything else → undefined. */
-const kindOf = prop =>
-    prop === 'width' ? 'width' : prop === 'margin' || prop.startsWith('margin-') ? 'margin' : undefined
-
-/** A value split on top-level whitespace, so `calc(1px + 2%)` stays one token. */
-const tokens = value => {
-    const result = []
-    let depth = 0
-    let current = ''
-    for (const char of value.replace(/!important\s*$/i, '').trim()) {
-        if (char === '(') depth++
-        else if (char === ')') depth--
-        if (depth === 0 && /\s/.test(char)) {
-            if (current) result.push(current)
-            current = ''
-        } else current += char
-    }
-    if (current) result.push(current)
-    return result
-}
-
-/** The kind of length a token is: 'spx', 'px', 'vw', 'vh', '%', 'calc', 'zero', or undefined. */
-const lengthOf = token => {
-    if (/^--spx\(.*\)$/.test(token)) return 'spx'
-    if (/^calc\(.*\)$/i.test(token)) return 'calc'
-    if (/^-?0*\.?0+$/.test(token)) return 'zero'
-    return UNIT.exec(token)?.[1].toLowerCase()
-}
-
-/** The folder holding the structure file a stylesheet is checked against: its own, or its item's for `_generated/`. */
-const structureFolderOf = stylesheetPath => {
-    const folder = dirname(stylesheetPath)
-    return basename(folder) === GENERATED ? dirname(folder) : folder
-}
-
-/** Child id → its direct parent's id, for elements with a literal `id`. Slot props are not children. */
-const parentsIn = structurePath => {
-    const ast = parseSync(readFileSync(structurePath, 'utf8'), {
-        babelrc: false,
-        configFile: false,
-        filename: structurePath,
-        parserOpts: { plugins: structurePath.endsWith('.tsx') ? ['jsx', 'typescript'] : ['jsx'] },
-    })
-    const parents = new Map()
-    const idOf = element => {
-        const attribute = element.openingElement.attributes.find(
-            node => node.type === 'JSXAttribute' && node.name.name === 'id' && node.value?.type === 'StringLiteral'
-        )
-        return attribute?.value.value
-    }
-    const directChildren = node =>
-        node.children.flatMap(child =>
-            child.type === 'JSXElement' ? [child] : child.type === 'JSXFragment' ? directChildren(child) : []
-        )
-    const visit = node => {
-        if (Array.isArray(node)) return node.forEach(visit)
-        if (!node || typeof node.type !== 'string') return
-        if (node.type === 'JSXElement') {
-            const parent = idOf(node)
-            for (const child of directChildren(node)) {
-                const id = idOf(child)
-                if (parent !== undefined && id !== undefined) parents.set(id, parent)
-            }
-        }
-        for (const [key, value] of Object.entries(node)) {
-            if (key !== 'loc' && value && typeof value === 'object') visit(value)
-        }
-    }
-    visit(ast?.program)
-    return parents
-}
-
-/** The at-rule conditions a rule sits under, e.g. `media (max-width: 750px)`, or BASE. */
-const conditionOf = rule => {
-    const conditions = []
-    for (let node = rule.parent; node && node.type !== 'root'; node = node.parent) {
-        if (node.type === 'atrule') conditions.unshift(`${node.name} ${node.params}`)
-    }
-    return conditions.join(' / ')
-}
-
-/** Id → condition → the declarations that rules selecting exactly `#id` make there, in source order. */
-const declarationsById = root => {
-    const byId = new Map()
-    root.walkRules(rule => {
-        const ids = rule.selectors.map(selector => /^#([\w-]+)$/.exec(selector.trim())?.[1]).filter(Boolean)
-        if (!ids.length) return
-        const condition = conditionOf(rule)
-        for (const id of ids) {
-            const byCondition = byId.get(id) ?? new Map()
-            byId.set(id, byCondition)
-            const declarations = byCondition.get(condition) ?? []
-            byCondition.set(condition, declarations)
-            rule.each(node => {
-                if (node.type === 'decl') declarations.push(node)
-            })
-        }
-    })
-    return byId
-}
-
-/** The declarations in effect under `condition`: the base ones, then the condition's own. */
-const effective = (byCondition, condition) => {
-    const result = new Map()
-    for (const key of condition === BASE ? [BASE] : [BASE, condition]) {
-        for (const declaration of byCondition?.get(key) ?? []) result.set(declaration.prop, declaration)
-    }
-    return result
-}
-
-/** 'vertical' or 'horizontal' when these declarations make a stack, else undefined. */
-const directionOf = declarations => {
-    if (declarations.get('--container-layout-type')?.value.trim() !== STACK_CONTAINER) return undefined
-    return /^column/.test(declarations.get('flex-direction')?.value.trim() ?? '') ? 'vertical' : 'horizontal'
-}
-
-/** ` (layout.css:12)`: the carrier the declaration was written in, which the bundler doesn't name. */
-const where = declaration => {
-    const file = declaration.source?.input.file
-    const line = declaration.source?.start?.line
-    return file ? ` (${basename(file)}${line ? `:${line}` : ''})` : ''
-}
-
-const or = items => (items.length === 1 ? items[0] : `${items.slice(0, -1).join(', ')} or ${items.at(-1)}`)
-
-/** @type {import('../transform/types.js').CssTransformPlugin} */
-export const stackChildrenPlugin = {
-    name: 'stack-children',
-    // After mixins copy their bodies in, before spx rewrites --spx() calls away.
-    order: 12,
-    transform(root, context) {
-        const structurePath = STRUCTURE_FILES.map(file => join(structureFolderOf(context.filePath), file)).find(
-            existsSync
-        )
-        if (structurePath === undefined) return
-        context.addDependency?.(structurePath)
-        const parents = parentsIn(structurePath)
-        if (parents.size === 0) return
-        const byId = declarationsById(root)
-
-        const violations = new Set()
-        let first
-        for (const [child, parent] of parents) {
-            const childRules = byId.get(child)
-            const parentRules = byId.get(parent)
-            if (childRules === undefined || parentRules === undefined) continue
-            for (const condition of new Set([BASE, ...parentRules.keys(), ...childRules.keys()])) {
-                const direction = directionOf(effective(parentRules, condition))
-                if (direction === undefined) continue
-                for (const declaration of effective(childRules, condition).values()) {
-                    const kind = kindOf(declaration.prop)
-                    if (kind === undefined) continue
-                    const allowed = ALLOWED[direction][kind]
-                    const bad = tokens(declaration.value).filter(token => {
-                        const length = lengthOf(token)
-                        return length === undefined || (length !== 'zero' && !allowed.includes(length))
-                    })
-                    if (!bad.length) continue
-                    first ??= declaration.source
-                    violations.add(
-                        `#${child}${where(declaration)}, a ${direction} stack child: ${declaration.prop} must be ` +
-                            `${or(allowed.map(unit => LABELS[unit]))}; found ${bad.join(' ')}.`
-                    )
-                }
-            }
-        }
-
-        if (violations.size) {
-            throw new LayoutError([...violations], {
-                file: first?.input.file,
-                line: first?.start?.line,
-                column: first?.start?.column,
-            })
-        }
-    },
-}

package/src/jsxPlugins/index.js

@@ -1,10 +0,0 @@
-// The JSX stage's plugins, in no particular order — the pipeline sorts by each descriptor's
-// `order`. A descriptor needs a `name`, an `order`, and `transform(program, context)`, where
-// `program` is the Babel Program path for the module; see `../transform/types.js`.
-
-import { mediaValidationPlugin } from './mediaValidation/index.js'
-import { origamiCompatibilityPlugin } from './origamiCompatibility/index.js'
-import { layoutValidationPlugin } from './validation/index.js'
-
-/** @type {readonly import('../transform/types.js').JsxTransformPlugin[]} */
-export const jsxPlugins = Object.freeze([layoutValidationPlugin, mediaValidationPlugin, origamiCompatibilityPlugin])

package/src/jsxPlugins/mediaValidation/index.js

@@ -1,49 +0,0 @@
-// Fails the build on an Image whose `uri` is not a Wix media ID, such as a web URL or a local file.
-// The Wix import accepts such a `uri` but the image is broken on the site; `origami upload-media`
-// uploads it and points the Image at the uploaded file. `yarn dev` only warns, so the page still
-// previews. Like the layout rules, Image is identified by its JSX tag name, and a computed `uri` is
-// not checked.
-
-import { basename } from 'node:path'
-import { LayoutError } from '../../transform/layoutError.js'
-
-const STRUCTURE_FILES = new Set(['structure.tsx', 'structure.jsx'])
-
-// `117a96_1cff23187eeb4050a2a691bcdcad6502~mv2.jpg`: an account prefix, an underscore and a file name.
-const WIX_MEDIA_ID = /^[A-Za-z0-9]+_[A-Za-z0-9_~.-]+\.[A-Za-z0-9]+$/
-
-/** @type {import('../../transform/types.js').JsxTransformPlugin} */
-export const mediaValidationPlugin = {
-    name: 'wix-import-media-validation',
-    // Alongside the layout rules: before anything rewrites the tree.
-    order: -100,
-    appliesTo: context => STRUCTURE_FILES.has(basename(context.filePath)),
-
-    transform: (program, context) => {
-        const file = context.relativePath ?? context.filePath
-        const violations = []
-        let first
-        program.traverse({
-            JSXOpeningElement({ node }) {
-                if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'Image') return
-                const attributes = node.attributes.filter(attribute => attribute.type === 'JSXAttribute')
-                const image = attributes.find(attribute => attribute.name.name === 'image')?.value?.expression
-                const uri = image?.type === 'ObjectExpression' &&
-                    image.properties.find(property => property.key?.name === 'uri' || property.key?.value === 'uri')
-                if (uri?.value.type !== 'StringLiteral' || WIX_MEDIA_ID.test(uri.value.value)) return
-                const id = attributes.find(attribute => attribute.name.name === 'id')?.value?.value
-                const line = uri.loc?.start.line
-                violations.push(
-                    `${file}${line ? `:${line}` : ''} <Image${id ? ` id="${id}"` : ''}> image.uri "${uri.value.value}" is not a Wix media ID. Run \`origami upload-media\` to upload it.`
-                )
-                first ??= { file: context.filePath, line, column: uri.loc?.start.column }
-            },
-        })
-        if (violations.length === 0) return
-        if (context.command === 'serve') {
-            for (const violation of violations) console.warn(`[origami] ${violation}`)
-            return
-        }
-        throw new LayoutError(violations, first)
-    },
-}

package/src/jsxPlugins/origamiCompatibility/ast.js

@@ -1,30 +0,0 @@
-// Shared JSX/object-literal reads used by the compatibility rules.
-
-export const findAttribute = (attributes, name) =>
-    attributes.find(attribute => attribute.type === 'JSXAttribute' && attribute.name.name === name)
-
-const propertyName = property => {
-    if (property.computed) return undefined
-    if (property.key.type === 'Identifier') return property.key.name
-    if (property.key.type === 'StringLiteral') return property.key.value
-    return undefined
-}
-
-// Later duplicate keys win, matching how the object literal itself would evaluate.
-export const indexProperties = properties => {
-    const fields = new Map()
-    for (const property of properties) {
-        if (property.type !== 'ObjectProperty') continue
-        const name = propertyName(property)
-        if (name !== undefined) fields.set(name, property)
-    }
-    return fields
-}
-
-/** The object literal a JSX prop was given, or undefined when it is anything else. */
-export const objectPropValue = (openingElement, name) => {
-    const attribute = findAttribute(openingElement.attributes, name)
-    if (attribute?.value?.type !== 'JSXExpressionContainer') return undefined
-    const { expression } = attribute.value
-    return expression.type === 'ObjectExpression' ? expression : undefined
-}

package/src/jsxPlugins/origamiCompatibility/componentBindings.js

@@ -1,40 +0,0 @@
-// Resolve Origami component identity from named virtual-module imports or named/default imports
-// from @wix/origami-system-components/<Name>. Local aliases keep that identity; unrelated local
-// components with the same JSX tag name are left alone.
-
-const ORIGAMI_MODULES = new Set(['document', 'document/components', 'wixEditorElements'])
-
-const importedName = specifier => {
-    if (specifier.type !== 'ImportSpecifier') return undefined
-    return specifier.imported.type === 'Identifier' ? specifier.imported.name : specifier.imported.value
-}
-
-const componentName = (source, specifier) => {
-    if (ORIGAMI_MODULES.has(source)) return importedName(specifier)
-
-    const match = /^@wix\/origami-system-components\/([^/]+)$/u.exec(source)
-    if (!match) return undefined
-    const name = match[1]
-    const imported = importedName(specifier)
-    return specifier.type === 'ImportDefaultSpecifier' || imported === name || imported === 'default'
-        ? name
-        : undefined
-}
-
-/**
- * @param {object} program
- * @param {Map<string, readonly object[]>} rulesByComponent
- * @returns {Map<string, readonly object[]>} local binding name -> rules to apply to it
- */
-export const collectComponentBindings = (program, rulesByComponent) => {
-    const bindings = new Map()
-    for (const statement of program.body) {
-        if (statement.type !== 'ImportDeclaration') continue
-        for (const specifier of statement.specifiers) {
-            const name = componentName(statement.source.value, specifier)
-            const rules = name === undefined ? undefined : rulesByComponent.get(name)
-            if (rules !== undefined) bindings.set(specifier.local.name, rules)
-        }
-    }
-    return bindings
-}