@wix/origami-site-runtime 1.0.7 → 1.0.9

package/README.md

@@ -30,7 +30,9 @@ cannot hide an illegally placed target. Diagnostics retain the original node sou
 routes to `#id > .id-overflow-wrapper`. Names come from the pure
 `@wix/origami-runtime/layout-contract` entry point. Root sizing, item placement, visibility
 and ordinary positioning remain on the ID selector. Background, border and pinned-layer
-CSS stays in the snapshot; the maintained component preserves focus and wrapper flags. Ref support is deferred
+CSS comes from `@wix/origami-system-components/InternalContainer.css`, imported by the maintained
+`@wix/origami-runtime/components/InternalContainer` component. The component preserves focus and
+wrapper flags. Ref support is deferred
 (see the [runtime decision](../origami-runtime/README.md#decision-defer-ref-support-2026-09-24)).
 
 Only explicit targets in site-owned layout.css carriers opt in. Sources of inlined nodes
@@ -60,11 +62,16 @@ half-pixel floor; fixed values retain fractional pixels; zero is zero. See the
 
 ## Release and limitations
 
-Use the existing snapshot 0.4.0 baseline. Publish origami-runtime 0.2.0 (including layout-contract), then this runtime
-1.1.0, before the generator/CLI that selects these minimum versions. Explicit local/file
-runtime overrides remain supported. Packed tests verify the compiler and pure contract
-outside the workspace without loading React or the snapshot. Coordinate DM 0.42 publication
-and first-published reader loadability separately; that producer check is not established here.
+Generated structures import Page, Section, HeaderSection and FooterSection from
+`@wix/origami-system-components` subpaths, InternalContainer from `@wix/origami-runtime`,
+and other editor components from fetched wrappers. The package dependency order is
+`@wix/origami-system-components` → `@wix/origami-runtime` → `@wix/origami-site-runtime`;
+publish the required entry points before generator/CLI releases that consume them. Existing dependency
+entries, including local/file runtime overrides, are preserved when component dependencies are added.
+Packed tests verify the compiler and pure layout contract outside the workspace with only
+compiler dependencies installed, without React or component implementations. Producer publication
+and first-published reader loadability require separate verification; the producer fixtures here
+are static captures (see test/fixtures/css/README.md).
 
 `--spx-stopper-max` is preserved but does not clamp scaling. The SPX plugin does not generate its runtime clamp formula. `position: stickyToHeader` is preserved
 as authored but is not a browser position value and receives no lowering. These are release
@@ -73,7 +80,7 @@ limitations, not claims of Thunderbolt parity; they need a separate producer/run
 ## Verification
 
 - `pnpm --filter @wix/origami-site-runtime run test`: parser/compiler, Vite and packed tests.
-- `pnpm --filter @wix/origami-site-runtime run test:browser`: actual component/snapshot in Chromium,
+- `pnpm --filter @wix/origami-site-runtime run test:browser`: maintained InternalContainer and system-component CSS in Chromium,
   responsive SPX and grid/flex, nested fractional fixed values, max widths/alignment, overflow,
   visibility, focus/pointer mechanics, HMR and production build. Install Playwright Chromium or
   set `CHROME_CHANNEL=chrome` to use installed Chrome.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site-runtime",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Vite development and build helpers for wix-import static sites",
   "main": "./src/index.js",
   "files": [
@@ -19,6 +19,7 @@
     "@babel/types": "^7.25.2",
     "@wix/builder-error-pages": "^1.1.6",
     "@wix/builder-piler-components": "^1.6.7",
+    "@wix/origami-fonts": "1.0.0",
     "@wix/origami-runtime": "0.11.0",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1",
@@ -64,5 +65,5 @@
     "./default-error-404": "./src/default-error-404.jsx"
   },
   "type": "module",
-  "falconPackageHash": "e9e3b817c585e6457e3d38733cf7c652e682ac829c1f238836f89c53"
+  "falconPackageHash": "641cce00719388c9e1fbc0fd6cab982b52a23c4daf02f37771b70615"
 }

package/src/cssPlugins/fonts.js

@@ -0,0 +1,93 @@
+// Checks the theme's font tokens (`--wst-heading-1-font: normal normal 700 --spx(88)/1em benzin`). It changes
+// nothing. The editor reads the family at the end of each one as one Wix font id and fails the import otherwise, so
+// the build fails, with every such token listed, unless the family is exactly the id of a font in the Wix font
+// catalog bundled in @wix/origami-fonts: no quotes, commas or fallbacks, the same case. A legacy font, which the
+// editor no longer offers, counts as not in the catalog. `origami search-font` finds the right id.
+
+import { basename } from 'node:path'
+import { fonts } from '@wix/origami-fonts'
+import { LayoutError } from '../transform/layoutError.js'
+
+const FONT_TOKEN = /^--wst-[\w-]+-font$/
+// The size in a `font` shorthand, with its optional line height: the family follows it. The number's quantifiers
+// never overlap, so a long run of digits that is not a size fails in linear time.
+const SIZE = /^(?:--spx\(.*\)|calc\(.*\)|(?:\d+(?:\.\d*)?|\.\d+)(?:px|em|rem|%|vw|vh|pt)?)(?:\/\S+)?$/i
+const FONT_IDS = new Set(fonts.filter(font => font.permissions !== 'legacy').map(font => font.id))
+
+/** A value split on top-level whitespace, so `--spx(16)/1.3em` stays one token. */
+const tokens = value => {
+    const result = []
+    let depth = 0
+    let current = ''
+    for (const char of value.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
+}
+
+/** A font shorthand's family as written; undefined for `var(…)`. */
+const familyOf = value => {
+    if (/var\(/.test(value)) return undefined
+    const parts = tokens(value)
+    // The last size: the repo's TS lib (ES2022) has no findLastIndex.
+    let size = parts.length - 1
+    while (size >= 0 && !SIZE.test(parts[size])) size--
+    if (size === -1 || size === parts.length - 1) return undefined
+    return parts.slice(size + 1).join(' ')
+}
+
+/** ` (theme.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}` : ''})` : ''
+}
+
+/**
+ * Where `source` starts, as LayoutError's location, leaving out what it doesn't know.
+ * @param {import('postcss').Declaration['source']} source
+ */
+const locationOf = source => {
+    /** @type {{ file?: string, line?: number, column?: number }} */
+    const location = {}
+    if (source?.input.file !== undefined) location.file = source.input.file
+    if (source?.start !== undefined) {
+        location.line = source.start.line
+        location.column = source.start.column
+    }
+    return location
+}
+
+/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const fontsPlugin = {
+    name: 'fonts',
+    // Only checks; it reads the tokens as authored, before spx rewrites the sizes the family follows.
+    order: 5,
+    transform(root) {
+        /** @type {import('postcss').Declaration[]} */
+        const declarations = []
+        root.walkDecls(FONT_TOKEN, declaration => {
+            declarations.push(declaration)
+        })
+        const violations = []
+        let first
+        for (const declaration of declarations) {
+            const family = familyOf(declaration.value)
+            if (family === undefined || FONT_IDS.has(family)) continue
+            first ??= declaration.source
+            violations.push(
+                `${declaration.prop}${where(declaration)} must name exactly one Wix font id from the catalog; found ` +
+                    `${family}. Run \`origami search-font --font <name>\` for the id.`
+            )
+        }
+        if (violations.length) {
+            throw new LayoutError(violations, locationOf(first))
+        }
+    },
+}

package/src/cssPlugins/index.js

@@ -7,15 +7,23 @@
 // stage guarantees a plugin sees. The order matters once: mixin bodies are copied into their calling rules before
 // layout routes declarations to wrappers and SPX converts calls using the browser's active settings. stack-children
 // only checks, and runs between mixins and layout: it needs the mixins' declarations and the stack rules as authored,
-// before layout compiles them away.
+// before layout compiles them away. fonts only checks the theme's font tokens, as authored.
 //
 // `@layer` needs no plugin: cascade layers have been in every browser since March 2022.
 
 import { customMediaPlugin } from './customMedia.js'
+import { fontsPlugin } from './fonts.js'
 import { mixinsPlugin } from './mixins.js'
 import { layoutPlugin } from './layout/index.js'
 import { spxPlugin } from './spx/index.js'
 import { stackChildrenPlugin } from './stackChildren.js'
 
 /** @type {readonly import('../transform/types.js').CssTransformPlugin[]} */
-export const cssPlugins = Object.freeze([customMediaPlugin, mixinsPlugin, stackChildrenPlugin, layoutPlugin, spxPlugin])
+export const cssPlugins = Object.freeze([
+    customMediaPlugin,
+    fontsPlugin,
+    mixinsPlugin,
+    stackChildrenPlugin,
+    layoutPlugin,
+    spxPlugin,
+])

package/src/jsxPlugins/origamiCompatibility/componentBindings.js

@@ -1,27 +1,24 @@
-// Which local names in a module refer to an Origami component the rules care about. Resolved by
-// import identity rather than by JSX tag name, so a local component that happens to share a name
-// with an Origami one is left alone.
+// 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 COMPONENTS_DIRECTORY = 'components'
 
 const importedName = specifier => {
     if (specifier.type !== 'ImportSpecifier') return undefined
     return specifier.imported.type === 'Identifier' ? specifier.imported.name : specifier.imported.value
 }
 
-// A default import is an Origami component only when it comes from a bare `.../components/<Name>`
-// specifier; relative paths are the site's own global components.
-const defaultComponentName = source => {
-    if (source.startsWith('.') || source.startsWith('/')) return undefined
-
-    const segments = source.replace(/\/+$/u, '').split('/')
-    return segments.at(-2) === COMPONENTS_DIRECTORY ? segments.at(-1) : undefined
-}
-
 const componentName = (source, specifier) => {
-    if (specifier.type === 'ImportDefaultSpecifier') return defaultComponentName(source)
-    return ORIGAMI_MODULES.has(source) ? importedName(specifier) : undefined
+    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
 }
 
 /**

package/src/transform/css/runPlugins.js

@@ -1,18 +1,26 @@
 // Runs the selected CSS plugins over one shared Root, in order. Parsing, stringifying and source
 // maps belong to PostCSS, which drives this stage — the only thing added here is attributing a
 // failure to the plugin and the file that caused it. A LayoutError is the author's, so it passes through.
+//
+// A LayoutError comes from a plugin that only checks, so the Root is as it was and the later plugins still run:
+// the author gets every plugin's violations in one error, at the first one's position, not one plugin's per build.
 
 import { LayoutError } from '../layoutError.js'
 
 const reason = cause => (cause instanceof Error ? cause.message : String(cause))
 
 export const runCssPlugins = ({ plugins, root, context }) => {
+    /** @type {LayoutError[]} */
+    const layoutErrors = []
     for (const phase of ['validate', 'transform']) {
         for (const plugin of plugins) {
             try {
                 plugin[phase]?.(root, context)
             } catch (cause) {
-                if (cause instanceof LayoutError) throw cause
+                if (cause instanceof LayoutError) {
+                    layoutErrors.push(cause)
+                    continue
+                }
                 // Tooling such as Vite's error overlay prints only the message, so the reason goes in it as well. A
                 // plugin may throw any value, so it is read without assuming an Error.
                 throw new Error(
@@ -22,4 +30,11 @@ export const runCssPlugins = ({ plugins, root, context }) => {
             }
         }
     }
+    if (layoutErrors.length === 1) throw layoutErrors[0]
+    if (layoutErrors.length > 1) {
+        throw new LayoutError(
+            layoutErrors.flatMap(error => error.violations),
+            layoutErrors[0].location
+        )
+    }
 }

package/src/transform/layoutError.js

@@ -12,6 +12,8 @@ export class LayoutError extends Error {
         super(violations.length === 1 ? violations[0] : `\n  ${violations.join('\n  ')}`)
         this.name = 'LayoutError'
         this.stack = ''
+        this.violations = violations
+        this.location = location
         Object.assign(this, location)
     }
 }