@wix/origami-system-components 1.10.1 → 1.10.3

package/README.md

@@ -114,6 +114,84 @@ Standard artifact configuration publishes the built package; local builds and pa
 
 ## Layout contract
 
+### Experimental Page
+
+`@wix/origami-system-components/layout/Page` provides named/default `Page` exports
+and `PageProps`. The root index and `./Page` continue to expose the legacy Page.
+Newly exported sites import `layout/Page`, like the layout section components.
+The site generator accepts both the legacy and layout Page imports when reading sites
+back into Origami.
+
+```tsx
+import Page from '@wix/origami-system-components/layout/Page'
+import Section from '@wix/origami-system-components/layout/Section'
+
+<Page id="page" className="authored-page"
+    backgroundLayer={[<div key="color" className="page-color" />]}
+    header={<SharedHeader id="header-instance" className="header-instance" />}
+    footer={<SharedFooter id="footer-instance" className="footer-instance" />}>
+    <Section id="first">{/* InternalContainer and content */}</Section>
+    <Section id="second">{/* InternalContainer and content */}</Section>
+</Page>
+```
+
+The required `id` and optional `className` belong to the outer div. Page adds its
+structural `origami-page` class, without deriving a class from the ID. Only supported
+props are forwarded. `backgroundLayer` is an optional array of React nodes; `header`,
+`footer`, and `children` are optional React nodes. Callers supply at most one
+Header-producing element and one Footer-producing element in their named slots,
+and Section-producing children in authored order. Shared definitions are supported.
+Page does not inspect component types or validate cardinality. Arrays require
+caller-supplied stable keys. Additional slots and page-pinned content are out of scope.
+
+During the DM transition, `structure.jsx` also accepts Header, Footer, and Background
+elements as Page children. The site's JSX compatibility pass moves these into
+`header`, `footer`, and `backgroundLayer` at build time, including shared
+`Header_<id>` / `Footer_<id>` imports and backgrounds inside literal fragments.
+Sections retain their authored order. Props and legacy children can be mixed;
+an explicit slot prop (including `null`) replaces children for that slot.
+This uses import bindings rather than runtime component names and leaves the
+authored structure unchanged for round trips. Outside the site's build pipeline,
+pass the slot props directly.
+
+Rendering order is background wrapper, header, one main containing children, footer.
+Absent header/footer add no wrappers; the background and main remain when empty.
+Header/Footer preserve their identities and remain direct Page children. Sections
+are main's descendants, not necessarily its children: a Section with interactions
+renders inside an `<interact-element>` boundary, which the interactions service styles
+`display: contents`, so the section remains a page layout item. Target sections by their ID or class rather than with
+`main > .section`, and account for main and the boundary in parent traversal.
+A route shell must not add a second main landmark. Skip links can target Section IDs (sections have `tabIndex=-1`).
+
+Page imports its own scoped CSS, retained through package imports in Vite dev and
+production. The relative root contains an absolute inset background with background-only
+clipping. Background children overlap in one grid cell; main uses `display: contents`.
+Authored CSS owns foreground grid layout, sizing, overflow, and sticky/fixed placement
+and z-index on Header/Footer instances. It must keep foreground content above the
+positioned background for the chosen layout. Page adds no stacking context, negative
+z-index, or foreground clipping.
+
+The authored browser fixture is in `test/fixtures/page`. After building, run
+`pnpm --filter @wix/origami-system-components exec vite test/fixtures/page`.
+The default fixture exercises two background layers, transparent sections, a shared
+sticky header/footer, skip links, pointer interaction, and foreground overflow.
+Use `?fixed` for fixed landmarks, `?bare` for omitted landmarks, and `?empty` for
+omitted landmarks/children and an empty background array. Check desktop and mobile
+widths, scroll positioning, one exposed main, section focus targets, and console warnings.
+
+Validated in headless Chromium at 1280×800 and 390×800 (2026-10-22), for all four
+fixture variants: background bounds equal Page bounds, background nodes overlap,
+sections occupy consecutive rows without a background row, pointer clicks reach the
+button, and skip-link activation focuses the first section. Sticky and fixed landmarks
+remain at the viewport edges after scrolling. Chromium's accessibility tree exposes
+one main even for empty content (the empty Page itself has zero height). No duplicate
+IDs, React key warnings, or browser errors were observed. Screenshots confirm background
+clipping and visible foreground overflow. This covers the authored fixture shell;
+integration with generated route shells and other browser/accessibility combinations
+still requires verification during migration.
+
+### InternalContainer
+
 ```tsx
 import InternalContainer from '@wix/origami-system-components/InternalContainer'
 

package/dist/InternalContainer.css

@@ -1,4 +1,4 @@
-/* ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_0716afec0a7d9e420f90135a7ccbacac/node_modules/@wix/editor-system-components/dist/site/components/InternalContainer/css.css */
+/* ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_83b0c9fab67fcdbd3af97b6b9e87786a/node_modules/@wix/editor-system-components/dist/site/components/InternalContainer/css.css */
 .internalContainerRoot__MJnN1 {
   position: relative;
   width: 100%;

package/dist/layout/BaseInternalContainer.js

@@ -1,10 +1,10 @@
 'use client';
 
-// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_0716afec0a7d9e420f90135a7ccbacac/node_modules/@wix/editor-system-components/dist/site/components/InternalContainer/component.js
+// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_83b0c9fab67fcdbd3af97b6b9e87786a/node_modules/@wix/editor-system-components/dist/site/components/InternalContainer/component.js
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { useCallback } from "react";
 
-// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_0716afec0a7d9e420f90135a7ccbacac/node_modules/@wix/editor-system-components/dist/site/components/chunks/clsx.js
+// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_83b0c9fab67fcdbd3af97b6b9e87786a/node_modules/@wix/editor-system-components/dist/site/components/chunks/clsx.js
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -17,7 +17,7 @@ function clsx() {
   return n;
 }
 
-// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_0716afec0a7d9e420f90135a7ccbacac/node_modules/@wix/editor-system-components/dist/site/components/chunks/constants.js
+// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_83b0c9fab67fcdbd3af97b6b9e87786a/node_modules/@wix/editor-system-components/dist/site/components/chunks/constants.js
 var TestIds = {
   overflow: "internal-container-overflow",
   content: "internal-container-content",
@@ -27,7 +27,7 @@ var TestIds = {
 };
 var INTERNAL_CONTAINER_ROOT_CLASS = "container";
 
-// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_0716afec0a7d9e420f90135a7ccbacac/node_modules/@wix/editor-system-components/dist/site/components/InternalContainer/component.js
+// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_83b0c9fab67fcdbd3af97b6b9e87786a/node_modules/@wix/editor-system-components/dist/site/components/InternalContainer/component.js
 var internalContainerRoot = "internalContainerRoot__MJnN1";
 var backgroundLayer = "backgroundLayer__ZDd0Q";
 var pinnedLayer = "pinnedLayer__i0Pg8";
@@ -125,7 +125,7 @@ function component(props) {
   return /* @__PURE__ */ jsx(InternalContainer$1, { ...props });
 }
 
-// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_0716afec0a7d9e420f90135a7ccbacac/node_modules/@wix/editor-system-components/dist/site/components/InternalContainer/index.js
+// ../../node_modules/.pnpm/@wix+editor-system-components@1.1590.0_83b0c9fab67fcdbd3af97b6b9e87786a/node_modules/@wix/editor-system-components/dist/site/components/InternalContainer/index.js
 var InternalContainer_default = component;
 export {
   component as InternalContainer,

package/dist/layout/FooterSection.d.ts

@@ -5,5 +5,5 @@ export type FooterSectionProps = SectionProps;
  * as the generic Section with the definition's ID and class. The `<footer>`
  * landmark and the page's instance identity belong to the enclosing Footer.
  */
-export declare function FooterSection({ id, className, children }: FooterSectionProps): import("react").JSX.Element;
+export declare function FooterSection({ id, className, children, wix }: FooterSectionProps): import("react").JSX.Element;
 export default FooterSection;

package/dist/layout/FooterSection.js

@@ -6,7 +6,7 @@ import Section from './Section.js';
  * as the generic Section with the definition's ID and class. The `<footer>`
  * landmark and the page's instance identity belong to the enclosing Footer.
  */
-export function FooterSection({ id, className, children }) {
-    return (_jsx(Section, { id: id, className: className, children: children }));
+export function FooterSection({ id, className, children, wix }) {
+    return (_jsx(Section, { id: id, className: className, wix: wix, children: children }));
 }
 export default FooterSection;

package/dist/layout/HeaderSection.d.ts

@@ -6,5 +6,5 @@ export type HeaderSectionProps = SectionProps;
  * landmark and the page's instance identity belong to the enclosing Header.
  * Legacy scroll effects are not implemented here.
  */
-export declare function HeaderSection({ id, className, children }: HeaderSectionProps): import("react").JSX.Element;
+export declare function HeaderSection({ id, className, children, wix }: HeaderSectionProps): import("react").JSX.Element;
 export default HeaderSection;

package/dist/layout/HeaderSection.js

@@ -7,7 +7,7 @@ import Section from './Section.js';
  * landmark and the page's instance identity belong to the enclosing Header.
  * Legacy scroll effects are not implemented here.
  */
-export function HeaderSection({ id, className, children }) {
-    return (_jsx(Section, { id: id, className: className, children: children }));
+export function HeaderSection({ id, className, children, wix }) {
+    return (_jsx(Section, { id: id, className: className, wix: wix, children: children }));
 }
 export default HeaderSection;

package/dist/layout/Page.css

@@ -0,0 +1,23 @@
+.origami-page {
+    position: relative;
+}
+
+.origami-page__main {
+    display: contents;
+}
+
+.origami-page__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    overflow: clip;
+}
+
+.origami-page__background > * {
+    grid-area: 1 / 1 / 2 / 2;
+}

package/dist/layout/Page.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/layout/Page.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import './Page.css';
+export interface PageProps {
+    id: string;
+    className?: string | undefined;
+    /** Background nodes overlap in one cell. Supply stable keys for array entries. */
+    backgroundLayer?: Array<ReactNode> | undefined;
+    /** At most one Header-producing element, including a shared definition. */
+    header?: ReactNode;
+    /** At most one Footer-producing element, including a shared definition. */
+    footer?: ReactNode;
+    /** Section-producing elements. The site build routes legacy DM landmark/background children to slots. */
+    children?: ReactNode;
+}
+/**
+ * Experimental page composition. Slot semantics are the caller's responsibility;
+ * supplied nodes are rendered without component-type or cardinality validation.
+ * Authored CSS owns foreground layout and positioning. Main has no layout box.
+ */
+export declare function Page({ id, className, backgroundLayer, header, footer, children }: PageProps): import("react").JSX.Element;
+export default Page;

package/dist/layout/Page.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Page.css';
+/**
+ * Experimental page composition. Slot semantics are the caller's responsibility;
+ * supplied nodes are rendered without component-type or cardinality validation.
+ * Authored CSS owns foreground layout and positioning. Main has no layout box.
+ */
+export function Page({ id, className, backgroundLayer, header, footer, children }) {
+    return (_jsxs("div", { id: id, className: ['origami-page', className].filter(Boolean).join(' '), children: [_jsx("div", { className: "origami-page__background", children: backgroundLayer }), header, _jsx("main", { className: "origami-page__main", children: children }), footer] }));
+}
+export default Page;

package/dist/layout/Section.d.ts

@@ -3,10 +3,9 @@ export interface SectionProps {
     id: string;
     className?: string | undefined;
     children?: ReactNode;
+    wix?: {
+        compPath?: string | undefined;
+    } | undefined;
 }
-/**
- * Experimental plain Section. The authored InternalContainer child owns its
- * background and content layers; this component does not create another container.
- */
-export declare function Section({ id, className, children }: SectionProps): import("react").JSX.Element;
+export declare function Section(props: SectionProps): import("react").JSX.Element;
 export default Section;

package/dist/layout/Section.js

@@ -1,10 +1,15 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { withInteractions } from '@wix/origami-runtime';
 /**
  * Experimental plain Section. The authored InternalContainer child owns its
  * background and content layers; this component does not create another container.
  */
-export function Section({ id, className, children }) {
+function BaseSection({ id, className, children }) {
     return (_jsx("section", { id: id, className: className, tabIndex: -1, children: children }));
 }
+const InteractiveSection = withInteractions(BaseSection);
+export function Section(props) {
+    return _jsx(InteractiveSection, { ...props });
+}
 export default Section;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-system-components",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "Editor structural and system components for standalone Origami sites",
   "sideEffects": [
     "**/*.css"
@@ -19,14 +19,20 @@
     "@testing-library/react": "^16.3.0",
     "@types/react": "^18.3.1",
     "@wix/editor-system-components": "^1.1573.0",
+    "@wix/origami-runtime": "0.19.1",
+    "@wix/services-manager": "^1.0.7",
+    "@wix/services-manager-react": "^1.0.8",
+    "@wix/site-service-interactions": "^1.0.28",
     "esbuild": "^0.28.1",
     "jsdom": "^23.0.1",
     "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "^6.0.3",
     "vite": "^6.4.3",
     "vitest": "^4.1.11"
   },
   "peerDependencies": {
+    "@wix/origami-runtime": "workspace:^",
     "react": "^18.3.1"
   },
   "publishUnscoped": false,
@@ -91,6 +97,10 @@
       "types": "./dist/layout/layout-contract.d.ts",
       "default": "./dist/layout/layout-contract.js"
     },
+    "./layout/Page": {
+      "types": "./dist/layout/Page.d.ts",
+      "default": "./dist/layout/Page.js"
+    },
     "./layout/Section": {
       "types": "./dist/layout/Section.d.ts",
       "default": "./dist/layout/Section.js"
@@ -118,5 +128,5 @@
     "@wix/builder-state": "^1.49.3",
     "@wix/editor-components": "^1.16.0"
   },
-  "falconPackageHash": "f2d02ba186dfcd328aa5fa4a362b9a489e356163d1f3ae114a5a46d5"
+  "falconPackageHash": "43d80f18e678499c69ff4a8fe53954bac70cae1c07cc1bdac956be7f"
 }