@wix/origami-system-components 1.10.1 → 1.10.2

package/README.md

@@ -114,6 +114,82 @@ 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
+have main as their DOM parent: use `.authored-page > main > .section` for direct-child
+selectors and account for main 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-system-components",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "description": "Editor structural and system components for standalone Origami sites",
   "sideEffects": [
     "**/*.css"
@@ -22,6 +22,7 @@
     "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"
@@ -91,6 +92,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 +123,5 @@
     "@wix/builder-state": "^1.49.3",
     "@wix/editor-components": "^1.16.0"
   },
-  "falconPackageHash": "f2d02ba186dfcd328aa5fa4a362b9a489e356163d1f3ae114a5a46d5"
+  "falconPackageHash": "84bd255c072dd6dfec4e41cd37099d708fe051fb05052aa46b89ac1b"
 }