@wix/origami-system-components 0.0.0-stage → 1.10.2

package/README.md

@@ -1,3 +1,216 @@
-# Temporary Holding Version
+# Origami system components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Structural editor components for standalone Origami sites. Direct component entries
+have named and default exports; the root index has named exports only.
+
+| Component | Upstream source | Wrapping |
+| --- | --- | --- |
+| InternalContainer | `@wix/editor-system-components/InternalContainer` | Fixed wrapper layers, derived classes, supported props |
+| Page | `@wix/editor-components/skin/Page/ResponsivePageWithColorBG` | `withNormalChildren` |
+| Section | `@wix/editor-components/component/Section` | `withNormalChildren(withController(...))` |
+| HeaderSection | `@wix/editor-components/component/HeaderSection` | `withNormalChildren(withController(...))` |
+| FooterSection | `@wix/editor-components/component/FooterSection` | `withNormalChildren`, no controller |
+| Anchor | `@wix/editor-components/component/Anchor` | None |
+| UnsupportedWidgetPlaceholder | None (self-contained) | None |
+
+UnsupportedWidgetPlaceholder stands in for vertical and non-builder widgets that have no
+Origami rendering yet. It draws a dashed box and a message, "The {componentName} will be
+rendered after importing the site back to {platformName}", that stays sticky in the
+viewport while a tall placeholder scrolls. `message` replaces the whole text, and the
+`--placeholder-sticky-top` custom property offsets it below a fixed header. It imports only
+React and its own `UnsupportedWidgetPlaceholder.css`, which the build copies to `dist`.
+
+There is one Page skin, no `Page_*` exports, and no Thunderbolt-generated components
+(PageSections, PinnedLayer, ResponsiveContainer, PagesContainer, PageGroup,
+HeaderContainer, FooterContainer, ResponsivePopupPage). Anchor supports future
+`SCROLL_TO_TOP` / `SCROLL_TO_BOTTOM` work. Logic and HOCs come from wix-next's
+system-core, without depending on that package; Page is renamed and defaults added.
+The controller still passes empty services and accepts no services argument.
+
+## Importing
+
+For hand-written site code:
+
+```tsx
+import { Page, Section } from '@wix/origami-system-components'
+```
+
+The index excludes InternalContainer: use the adapted component from
+`@wix/origami-system-components/InternalContainer`. Direct paths such as
+`@wix/origami-system-components/Section` remain available for legacy exports.
+New exports use `@wix/origami-system-components/layout/Section`,
+`layout/HeaderSection` and `layout/FooterSection`. These plain React components
+render a section around ordinary children, with the authored InternalContainer
+owning the background and content layers. They do not include legacy controllers,
+scroll effects or section CSS. Both import forms map back to document components
+when importing a site.
+
+`layout/Header` and `layout/Footer` are also public named/default exports. Exported
+files containing `document.Header` or `document.Footer` resolve to these landmarks.
+A shared `Header_<id>` / `Footer_<id>` definition may receive `({ id, className })`
+and pass that identity to its landmark, wrapping exactly one matching
+HeaderSection / FooterSection with its own InternalContainer. Lint recognizes
+this shape and the renamed shared references. The generator does not introduce
+landmarks into definitions that do not already contain them; server-side Editor
+conversion of that structure remains a separate integration.
+
+Vite production builds drop unused components while retaining used CSS
+thanks to `"sideEffects": ["**/*.css"]`. There are no wildcard exports.
+
+## Delivery
+
+InternalContainer is bundled because its upstream has a Wix dependency tree.
+`@wix/editor-system-components` stays a development dependency, absent from consumer
+installs. The adapter imports `InternalContainer.css` itself so Vite preserves it
+during pre-bundling. The upstream implementation is private.
+
+The five structural entries compile with plain tsc (ES2022, classic React JSX) and
+install `@wix/editor-components: ^1.16.0` at runtime. This public npm package is
+pre-bundled per component with zero dependencies and React, React DOM, and lodash
+peers. Only React is needed by these five; we add neither React DOM nor lodash.
+Editor fixes—and behavior changes—can reach sites without a release here.
+
+The deliberate CSS difference from system-core is importing real `dist/**/*.css`
+files: Vite dev pre-bundling drops extensionless CSS imports. Each component imports
+its own stylesheet; the five have no copied CSS or CSS exports. The internal
+`hocs.js` helper uses extensionless `./hocs` imports, resolved by Vite.
+
+Both builder-state packages remain external production dependencies: `useStateOverrides`
+reads a module-level store that the whole site must share. React remains a peer.
+The semantic CSS compiler depends directly on this package; only `dist`, metadata,
+and this README are published. Hand-written structural declarations avoid unpublished
+upstream types: containers accept normal React children and Anchor accepts none.
+InternalContainer declarations are emitted from its adapted props.
+
+## Build and tests
+
+Run `pnpm --filter @wix/origami-system-components run build`, then
+`pnpm --filter @wix/origami-system-components test`. Build before packing.
+`build.mjs` clears dist, bundles InternalContainer/CSS, and copies declarations;
+tsc emits the structural entries, index, helper, and layout implementation without
+source maps, using the editor-components ambient shim. Only React imports may escape
+InternalContainer's private bundle; tests check structural imports, exports, and standalone React-only types.
+Packed consumers verify InternalContainer without upstream packages, Section CSS in
+Vite dev through root/direct imports, production CSS, and index tree-shaking.
+Package DOM and ID-validation tests and the generator's packed-site test cover integration.
+
+## Adding a component
+
+Add a client `.tsx` entry, named/default exports, a standalone declaration, explicit
+package export, and packed-consumer coverage. For an upstream with dependencies,
+bundle it as a development dependency, build/export CSS with a matching `.css.d.ts`,
+and retain the leak check. For a self-contained upstream, install it as a production dependency,
+include the source in `tsconfig.build.json`, and add its declaration to the copy list.
+Preserve extensionless helper imports and use real `.css` imports. Structural imports
+are limited to React, builder-state-react, editor component/controller/skin entries,
+editor `dist/**/*.css`, and `./hocs`.
+
+## Release order
+
+Publish this package before the consuming site-runtime and generator releases.
+Keep the source package version at `1.0.0` and generated site dependencies at `^1.0.0`;
+the release process bumps the published version automatically.
+Standard artifact configuration publishes the built package; local builds and packs do not publish.
+
+## 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'
+
+<InternalContainer id="comp-example" className="custom">Content</InternalContainer>
+```
+
+It preserves background and pinned layers, normal or function children, and caller
+classes. `role`, `tabIndex`, `data-scope`, and `data-repeater-items-indexes`
+target the content div. Authoring metadata stays in exported source for import-back
+and is outside the typed component API. Only explicitly supported props are forwarded,
+so extra metadata does not reach the DOM. IDs must match `/^[a-zA-Z][\w-]*$/`;
+invalid IDs throw rather than being normalized.
+
+The root receives the ID class and caller classes. Content and overflow layers
+receive `${id}-container` and `${id}-overflow-wrapper`. Overflow and content wrappers
+are always enabled, and content defaults to `tabIndex={0}`, matching the playground.
+The generated-site build runtime compiles DM semantic CSS onto these layers in convert
+mode. The published component's CSS is retained; special sticky positioning remains an
+explicit limitation rather than a claim of complete Thunderbolt layout parity.
+
+The pure `@wix/origami-system-components/layout-contract` entry exports
+`buildContainerClasses`, `isValidContainerId`, and `LAYOUT_FLAGS`. Its emitted imports
+resolve in Node without React, CSS, component implementations, or the package root.
+The build-time compiler uses it to target the same retained wrappers.

package/dist/Anchor.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react'
+
+export interface AnchorProps {
+    id: string
+    className?: string | undefined
+    name?: string | undefined
+    urlFragment?: string | undefined
+    isAriaHidden?: boolean | undefined
+}
+
+export declare function Anchor(props: AnchorProps): ReactElement
+export default Anchor

package/dist/Anchor.js

@@ -0,0 +1,6 @@
+'use client';
+import { Anchor as Component } from '@wix/editor-components/component/Anchor';
+// Real .css path: Vite's dev pre-bundling drops extensionless CSS imports.
+import '@wix/editor-components/dist/component/Anchor/Anchor.min.css';
+export const Anchor = Component;
+export default Anchor;

package/dist/FooterSection.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement, ReactNode } from 'react'
+
+export interface FooterSectionProps {
+    id: string
+    className?: string | undefined
+    children?: ReactNode
+}
+
+export declare function FooterSection(props: FooterSectionProps): ReactElement
+export default FooterSection

package/dist/FooterSection.js

@@ -0,0 +1,7 @@
+'use client';
+import { FooterSection as Component } from '@wix/editor-components/component/FooterSection';
+// Real .css path: Vite's dev pre-bundling drops extensionless CSS imports.
+import '@wix/editor-components/dist/component/FooterSection/FooterSection.min.css';
+import { withNormalChildren } from './hocs';
+export const FooterSection = withNormalChildren(Component);
+export default FooterSection;

package/dist/HeaderSection.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement, ReactNode } from 'react'
+
+export interface HeaderSectionProps {
+    id: string
+    className?: string | undefined
+    children?: ReactNode
+    nickname: string
+}
+
+export declare function HeaderSection(props: HeaderSectionProps): ReactElement
+export default HeaderSection

package/dist/HeaderSection.js

@@ -0,0 +1,8 @@
+'use client';
+import { HeaderSection as Component } from '@wix/editor-components/component/HeaderSection';
+import { HeaderSection as controller } from '@wix/editor-components/controller/HeaderSection';
+// Real .css path: Vite's dev pre-bundling drops extensionless CSS imports.
+import '@wix/editor-components/dist/component/HeaderSection/HeaderSection.min.css';
+import { withController, withNormalChildren } from './hocs';
+export const HeaderSection = withNormalChildren(withController(Component, controller));
+export default HeaderSection;

package/dist/InternalContainer.css

@@ -0,0 +1,88 @@
+/* ../../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%;
+  height: 100%;
+  --borderTopWidth: 0px;
+  --borderTopStyle: solid;
+  --borderTopColor: transparent;
+  --borderInlineEndWidth: 0px;
+  --borderInlineEndStyle: solid;
+  --borderInlineEndColor: transparent;
+  --borderBottomWidth: 0px;
+  --borderBottomStyle: solid;
+  --borderBottomColor: transparent;
+  --borderInlineStartWidth: 0px;
+  --borderInlineStartStyle: solid;
+  --borderInlineStartColor: transparent;
+  --borderStartStartRadius: 0px;
+  --borderStartEndRadius: 0px;
+  --borderEndStartRadius: 0px;
+  --borderEndEndRadius: 0px;
+  --boxShadow: none;
+  --backdropFilter: none;
+}
+.backgroundLayer__ZDd0Q {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  overflow: clip;
+  border-top: var(--borderTopWidth) var(--borderTopStyle) var(--borderTopColor);
+  border-inline-end: var(--borderInlineEndWidth) var(--borderInlineEndStyle) var(--borderInlineEndColor);
+  border-bottom: var(--borderBottomWidth) var(--borderBottomStyle) var(--borderBottomColor);
+  border-inline-start: var(--borderInlineStartWidth) var(--borderInlineStartStyle) var(--borderInlineStartColor);
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+  box-shadow: var(--boxShadow);
+  backdrop-filter: var(--backdropFilter);
+}
+.pinnedLayer__i0Pg8 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  pointer-events: none;
+}
+.pinnedLayer__i0Pg8 > * {
+  pointer-events: auto;
+}
+.overflowWrapper__-futq {
+  position: relative;
+  align-self: stretch;
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+}
+.backgroundLayerNoBorder__cg1to {
+  border-color: transparent;
+}
+.borderFrame__YJBdZ {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  box-sizing: border-box;
+  border-top: var(--borderTopWidth) var(--borderTopStyle) var(--borderTopColor);
+  border-inline-end: var(--borderInlineEndWidth) var(--borderInlineEndStyle) var(--borderInlineEndColor);
+  border-bottom: var(--borderBottomWidth) var(--borderBottomStyle) var(--borderBottomColor);
+  border-inline-start: var(--borderInlineStartWidth) var(--borderInlineStartStyle) var(--borderInlineStartColor);
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+}
+
+/* src/InternalContainer.css */

package/dist/InternalContainer.css.d.ts

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

package/dist/Page.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement, ReactNode } from 'react'
+
+export interface PageProps {
+    id: string
+    className?: string | undefined
+    children?: ReactNode
+}
+
+export declare function Page(props: PageProps): ReactElement
+export default Page

package/dist/Page.js

@@ -0,0 +1,7 @@
+'use client';
+import Component from '@wix/editor-components/skin/Page/ResponsivePageWithColorBG';
+// Real .css path: Vite's dev pre-bundling drops extensionless CSS imports.
+import '@wix/editor-components/dist/skin/Page/ResponsivePageWithColorBG/Page.min.css';
+import { withNormalChildren } from './hocs';
+export const Page = withNormalChildren(Component);
+export default Page;

package/dist/Section.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement, ReactNode } from 'react'
+
+export interface SectionProps {
+    id: string
+    className?: string | undefined
+    children?: ReactNode
+    nickname: string
+}
+
+export declare function Section(props: SectionProps): ReactElement
+export default Section

package/dist/Section.js

@@ -0,0 +1,8 @@
+'use client';
+import { Section as Component } from '@wix/editor-components/component/Section';
+import { Section as controller } from '@wix/editor-components/controller/Section';
+// Real .css path: Vite's dev pre-bundling drops extensionless CSS imports.
+import '@wix/editor-components/dist/component/Section/Section.min.css';
+import { withController, withNormalChildren } from './hocs';
+export const Section = withNormalChildren(withController(Component, controller));
+export default Section;

package/dist/UnsupportedWidgetPlaceholder.css

@@ -0,0 +1,56 @@
+.origami-unsupported-widget-placeholder {
+    --placeholder-bg: #f5f7fa;
+    --placeholder-border: #c9d2de;
+    --placeholder-text: #5b6b82;
+    --placeholder-radius: 16px;
+    /* Raise this when the site has a fixed header covering the top of the viewport. */
+    --placeholder-sticky-top: 0px;
+
+    position: relative;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    width: 100%;
+    height: 100%;
+    min-height: 120px;
+    padding: 12px;
+    border: 2px dashed var(--placeholder-border);
+    border-radius: var(--placeholder-radius);
+    background-color: var(--placeholder-bg);
+    container-type: inline-size;
+    overflow: clip;
+}
+
+/*
+ * The message box is as tall as the placeholder, but never taller than the viewport.
+ * Short placeholders center the text in themselves; tall ones keep it
+ * centered in the viewport while scrolling, until the placeholder ends.
+ */
+.origami-unsupported-widget-placeholder__message {
+    position: sticky;
+    top: var(--placeholder-sticky-top);
+    align-self: stretch;
+    box-sizing: border-box;
+    max-height: calc(100vh - var(--placeholder-sticky-top));
+    max-height: calc(100dvh - var(--placeholder-sticky-top));
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 16px;
+    color: var(--placeholder-text);
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.5;
+    text-align: center;
+    overflow-wrap: anywhere;
+}
+
+@container (max-width: 220px) {
+    .origami-unsupported-widget-placeholder__message {
+        padding: 8px;
+        font-size: 13px;
+    }
+}

package/dist/UnsupportedWidgetPlaceholder.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react'
+
+export interface UnsupportedWidgetPlaceholderProps {
+    id: string
+    className?: string | undefined
+    componentName?: string | undefined
+    platformName?: string | undefined
+    message?: string | undefined
+}
+
+export declare function UnsupportedWidgetPlaceholder(props: UnsupportedWidgetPlaceholderProps): ReactElement
+export default UnsupportedWidgetPlaceholder

package/dist/UnsupportedWidgetPlaceholder.js

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+import './UnsupportedWidgetPlaceholder.css';
+const ROOT = 'origami-unsupported-widget-placeholder';
+/**
+ * Stand-in for a vertical or non-builder widget that has no Origami rendering yet.
+ * The message stays in the viewport while a tall placeholder is scrolled.
+ */
+export const UnsupportedWidgetPlaceholder = ({ id, className, componentName, platformName = 'Wix Studio Two', message, }) => {
+    const name = componentName?.trim();
+    const text = message ?? `The ${name || 'widget'} will be rendered after importing the site back to ${platformName}`;
+    return (React.createElement("div", { id: id, className: className ? `${ROOT} ${className}` : ROOT, role: "note", "aria-label": name ? `${name} placeholder` : 'Widget placeholder', "data-component-name": name || undefined },
+        React.createElement("p", { className: `${ROOT}__message` }, text)));
+};
+export default UnsupportedWidgetPlaceholder;

package/dist/hocs.js

@@ -0,0 +1,22 @@
+'use client';
+import React from 'react';
+import { useStateOverrides } from '@wix/builder-state-react';
+/**
+ * An HOC that gets a container component that expects children as a function (like EditorElement components)
+ * and returns a container component that gets children as an array.
+ */
+export const withNormalChildren = (Component) => ({ children, ...props }) => React.createElement(Component, { ...props }, () => children || []);
+/**
+ * An HOC that connects a component to its EditorElements controller.
+ * As this is a special code for EditorElements, it should be moved to their project in the future.
+ *
+ * Note:
+ * Since the controller can update props, and since they have to be synced with velo if exists,
+ * every component with a controller should be connected by default. Since the consumer (widget genreated code)
+ * doesn't always connect the component, we do the connection here for now.
+ */
+export const withController = (Component, controller) => (props) => {
+    const [propsOverrides = {}, , setters] = useStateOverrides(props.nickname);
+    const controllerProps = controller.useComponentProps({ ...props, ...propsOverrides }, {}, setters);
+    return React.createElement(Component, { ...props, ...controllerProps });
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Page, type PageProps } from './Page'
+export { Section, type SectionProps } from './Section'
+export { HeaderSection, type HeaderSectionProps } from './HeaderSection'
+export { FooterSection, type FooterSectionProps } from './FooterSection'
+export { Anchor, type AnchorProps } from './Anchor'
+export { UnsupportedWidgetPlaceholder, type UnsupportedWidgetPlaceholderProps } from './UnsupportedWidgetPlaceholder'

package/dist/index.js

@@ -0,0 +1,6 @@
+export { Page } from './Page';
+export { Section } from './Section';
+export { HeaderSection } from './HeaderSection';
+export { FooterSection } from './FooterSection';
+export { Anchor } from './Anchor';
+export { UnsupportedWidgetPlaceholder } from './UnsupportedWidgetPlaceholder';

package/dist/layout/BaseInternalContainer.d.ts

@@ -0,0 +1,21 @@
+import type { AriaRole, ReactElement, ReactNode } from 'react'
+
+export interface InternalContainerProps {
+    id: string
+    className?: string | undefined
+    containerLayoutClassName?: string | undefined
+    overlowWrapperClassName?: string | undefined
+    hasOverflow?: boolean | undefined
+    hasScrollOverflow?: boolean | undefined
+    shouldOmitWrapperLayers?: boolean | undefined
+    role?: AriaRole | undefined
+    tabIndex?: number | undefined
+    'data-scope'?: string | undefined
+    'data-repeater-items-indexes'?: string | undefined
+    backgroundLayer?: ReactNode[] | undefined
+    pinnedLayer?: ReactNode[] | undefined
+    children?: ReactNode | (() => ReactNode)
+}
+
+export declare function InternalContainer(props: InternalContainerProps): ReactElement
+export default InternalContainer

package/dist/layout/BaseInternalContainer.js

@@ -0,0 +1,133 @@
+'use client';
+
+// ../../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_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;
+  else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  else for (t in e) e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = ""; f < arguments.length; ) (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// ../../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",
+  backgroundLayer: "internal-container-background-layer",
+  pinnedLayer: "internal-container-pinned-layer",
+  root: "internal-container-root"
+};
+var INTERNAL_CONTAINER_ROOT_CLASS = "container";
+
+// ../../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";
+var overflowWrapper = "overflowWrapper__-futq";
+var backgroundLayerNoBorder = "backgroundLayerNoBorder__cg1to";
+var borderFrame = "borderFrame__YJBdZ";
+var style = {
+  internalContainerRoot,
+  backgroundLayer,
+  pinnedLayer,
+  overflowWrapper,
+  backgroundLayerNoBorder,
+  borderFrame
+};
+var OverflowWrapper = React__default.forwardRef(({ children, className }, ref) => {
+  return /* @__PURE__ */ jsx("div", { className, "data-testid": TestIds.overflow, ref, children });
+});
+var InternalContainer = ({
+  id,
+  containerLayoutClassName,
+  overlowWrapperClassName,
+  hasOverflow,
+  hasScrollOverflow,
+  children,
+  role,
+  tabIndex: tabIndexFromProps,
+  backgroundLayer: backgroundLayer2 = [],
+  pinnedLayer: pinnedLayer2 = [],
+  className,
+  shouldOmitWrapperLayers,
+  ...restOfProps
+}, ref) => {
+  const shouldWrapChildren = !shouldOmitWrapperLayers;
+  const tabIndexWithOverflow = hasScrollOverflow ? tabIndexFromProps || 0 : -1;
+  const tabIndex = hasOverflow ? tabIndexWithOverflow : void 0;
+  const hasPinnedLayer = pinnedLayer2 && pinnedLayer2.length > 0;
+  const wrapWithOverflowWrapperIfNeeded = useCallback(
+    (reactChildren) => hasOverflow ? /* @__PURE__ */ jsx(
+      OverflowWrapper,
+      {
+        className: clsx(overlowWrapperClassName, style.overflowWrapper),
+        children: reactChildren
+      }
+    ) : reactChildren,
+    [hasOverflow, overlowWrapperClassName]
+  );
+  const contentProps = {
+    ref,
+    "data-testid": TestIds.content,
+    tabIndex,
+    ...role ? { role } : {},
+    className: containerLayoutClassName,
+    ...restOfProps["data-scope"] && {
+      "data-scope": restOfProps["data-scope"]
+    },
+    ...restOfProps["data-repeater-items-indexes"] && {
+      "data-repeater-items-indexes": restOfProps["data-repeater-items-indexes"]
+    }
+  };
+  const renderedChildren = typeof children === "function" ? children() : children;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: clsx(
+        INTERNAL_CONTAINER_ROOT_CLASS,
+        style.internalContainerRoot,
+        className,
+        !shouldWrapChildren && containerLayoutClassName
+      ),
+      "data-testid": TestIds.root,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              style.backgroundLayer,
+              hasOverflow && style.backgroundLayerNoBorder
+            ),
+            "data-testid": TestIds.backgroundLayer,
+            children: backgroundLayer2
+          }
+        ),
+        hasPinnedLayer && /* @__PURE__ */ jsx("div", { className: style.pinnedLayer, "data-testid": TestIds.pinnedLayer, children: pinnedLayer2 }),
+        wrapWithOverflowWrapperIfNeeded(
+          shouldWrapChildren ? /* @__PURE__ */ jsx("div", { ...contentProps, children: renderedChildren }) : /* @__PURE__ */ jsx(React__default.Fragment, { children: renderedChildren })
+        ),
+        hasOverflow && /* @__PURE__ */ jsx("div", { className: style.borderFrame })
+      ]
+    }
+  );
+};
+var InternalContainer$1 = React__default.forwardRef(InternalContainer);
+function component(props) {
+  return /* @__PURE__ */ jsx(InternalContainer$1, { ...props });
+}
+
+// ../../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,
+  InternalContainer_default as default
+};

package/dist/layout/Footer.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface FooterProps {
+    id: string;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/**
+ * Experimental footer landmark, the element Thunderbolt's RefComponent renders.
+ * It is the root of the shared Footer_<sharedCompId> definition and wraps its
+ * FooterSection. The page passes its instance ID and class through the definition's
+ * Structure props; the page layout.css targets them for placement,
+ * fixed positioning and z-index.
+ */
+export declare function Footer({ id, className, children }: FooterProps): import("react").JSX.Element;
+export default Footer;

package/dist/layout/Footer.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Experimental footer landmark, the element Thunderbolt's RefComponent renders.
+ * It is the root of the shared Footer_<sharedCompId> definition and wraps its
+ * FooterSection. The page passes its instance ID and class through the definition's
+ * Structure props; the page layout.css targets them for placement,
+ * fixed positioning and z-index.
+ */
+export function Footer({ id, className, children }) {
+    return (_jsx("footer", { id: id, className: className, children: children }));
+}
+export default Footer;

package/dist/layout/FooterSection.d.ts

@@ -0,0 +1,9 @@
+import { type SectionProps } from './Section.js';
+export type FooterSectionProps = SectionProps;
+/**
+ * Experimental plain FooterSection: the shared footer definition's root, rendered
+ * 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 default FooterSection;

package/dist/layout/FooterSection.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Section from './Section.js';
+/**
+ * Experimental plain FooterSection: the shared footer definition's root, rendered
+ * 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 default FooterSection;

package/dist/layout/Header.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface HeaderProps {
+    id: string;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/**
+ * Experimental header landmark, the element Thunderbolt's RefComponent renders.
+ * It is the root of the shared Header_<sharedCompId> definition and wraps its
+ * HeaderSection. The page passes its instance ID and class through the definition's
+ * Structure props; the page layout.css targets them for placement,
+ * sticky/fixed positioning and z-index.
+ */
+export declare function Header({ id, className, children }: HeaderProps): import("react").JSX.Element;
+export default Header;

package/dist/layout/Header.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Experimental header landmark, the element Thunderbolt's RefComponent renders.
+ * It is the root of the shared Header_<sharedCompId> definition and wraps its
+ * HeaderSection. The page passes its instance ID and class through the definition's
+ * Structure props; the page layout.css targets them for placement,
+ * sticky/fixed positioning and z-index.
+ */
+export function Header({ id, className, children }) {
+    return (_jsx("header", { id: id, className: className, children: children }));
+}
+export default Header;

package/dist/layout/HeaderSection.d.ts

@@ -0,0 +1,10 @@
+import { type SectionProps } from './Section.js';
+export type HeaderSectionProps = SectionProps;
+/**
+ * Experimental plain HeaderSection: the shared header definition's root, rendered
+ * as the generic Section with the definition's ID and class. The `<header>`
+ * 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 default HeaderSection;

package/dist/layout/HeaderSection.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Section from './Section.js';
+/**
+ * Experimental plain HeaderSection: the shared header definition's root, rendered
+ * as the generic Section with the definition's ID and class. The `<header>`
+ * 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 default HeaderSection;

package/dist/layout/InternalContainer.d.ts

@@ -0,0 +1,15 @@
+import type { AriaRole, ReactNode } from 'react';
+import '../InternalContainer.css';
+export interface InternalContainerProps {
+    id: string;
+    className?: string;
+    role?: AriaRole;
+    tabIndex?: number;
+    'data-scope'?: string;
+    'data-repeater-items-indexes'?: string;
+    backgroundLayer?: ReactNode[];
+    pinnedLayer?: ReactNode[];
+    children?: ReactNode | (() => ReactNode);
+}
+export declare function InternalContainer(props: InternalContainerProps): import("react").JSX.Element;
+export default InternalContainer;

package/dist/layout/InternalContainer.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseInternalContainer from './BaseInternalContainer.js';
+import '../InternalContainer.css';
+import { buildContainerClasses } from './container-contract.js';
+import { LAYOUT_FLAGS } from './layout-constants.js';
+export function InternalContainer(props) {
+    const classes = buildContainerClasses(props.id);
+    const supportedProps = {
+        id: props.id,
+        role: props.role,
+        tabIndex: props.tabIndex,
+        'data-scope': props['data-scope'],
+        'data-repeater-items-indexes': props['data-repeater-items-indexes'],
+        backgroundLayer: props.backgroundLayer,
+        pinnedLayer: props.pinnedLayer,
+        children: props.children,
+    };
+    return (_jsx(BaseInternalContainer, { ...supportedProps, className: [props.id, props.className].filter(Boolean).join(' '), hasOverflow: LAYOUT_FLAGS.HAS_OVERFLOW, hasScrollOverflow: LAYOUT_FLAGS.HAS_SCROLL_OVERFLOW, shouldOmitWrapperLayers: LAYOUT_FLAGS.SHOULD_OMIT_WRAPPER_LAYERS, containerLayoutClassName: classes.contentClass, overlowWrapperClassName: classes.overflowClass }));
+}
+export default 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/dist/layout/Section.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface SectionProps {
+    id: string;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+/**
+ * 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 default Section;

package/dist/layout/Section.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-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 }) {
+    return (_jsx("section", { id: id, className: className, tabIndex: -1, children: children }));
+}
+export default Section;

package/dist/layout/container-contract.d.ts

@@ -0,0 +1,5 @@
+export declare const isValidContainerId: (id: string) => boolean;
+export declare function buildContainerClasses(id: string): {
+    contentClass: string;
+    overflowClass: string;
+};

package/dist/layout/container-contract.js

@@ -0,0 +1,10 @@
+export const isValidContainerId = (id) => /^[a-zA-Z][\w-]*$/.test(id);
+// Shared with the build-time semantic CSS compiler through the layout-contract subpath.
+export function buildContainerClasses(id) {
+    if (!isValidContainerId(id))
+        throw new Error(`Unsupported container compId: ${id}`);
+    return {
+        contentClass: `${id}-container`,
+        overflowClass: `${id}-overflow-wrapper`,
+    };
+}

package/dist/layout/layout-constants.d.ts

@@ -0,0 +1,5 @@
+export declare const LAYOUT_FLAGS: {
+    readonly HAS_OVERFLOW: true;
+    readonly HAS_SCROLL_OVERFLOW: true;
+    readonly SHOULD_OMIT_WRAPPER_LAYERS: false;
+};

package/dist/layout/layout-constants.js

@@ -0,0 +1,7 @@
+// Preserve the playground DOM contract. Content is focusable by default;
+// semantic layout targets compile onto these retained wrapper layers.
+export const LAYOUT_FLAGS = {
+    HAS_OVERFLOW: true,
+    HAS_SCROLL_OVERFLOW: true,
+    SHOULD_OMIT_WRAPPER_LAYERS: false,
+};

package/dist/layout/layout-contract.d.ts

@@ -0,0 +1,2 @@
+export { buildContainerClasses, isValidContainerId } from './container-contract.js';
+export { LAYOUT_FLAGS } from './layout-constants.js';

package/dist/layout/layout-contract.js

@@ -0,0 +1,3 @@
+// Pure DOM contract shared by the React component and build-time CSS compiler.
+export { buildContainerClasses, isValidContainerId } from './container-contract.js';
+export { LAYOUT_FLAGS } from './layout-constants.js';

package/dist/site.global.css

@@ -0,0 +1,5 @@
+/* Root vars Thunderbolt sets on every site, as constants. Components' CSS reads them, e.g. the Menu dropdown's
+   `z-index: var(--above-all-z-index)`. Thunderbolt: MAX_Z_INDEX in thunderbolt-commons/src/zIndex.ts. */
+:root {
+    --above-all-z-index: 100000;
+}

package/package.json

@@ -1,6 +1,127 @@
 {
   "name": "@wix/origami-system-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.10.2",
+  "description": "Editor structural and system components for standalone Origami sites",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "scripts": {
+    "build": "node build.mjs && tsc -p tsconfig.build.json && tsc -p tsconfig.layout.json",
+    "lint": "oxlint .",
+    "test": "tsc -p tsconfig.test.json && vitest --run test/*.spec.ts test/*.spec.tsx && node --test --test-force-exit test/*.test.mjs",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^18.3.1",
+    "@wix/editor-system-components": "^1.1573.0",
+    "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": {
+    "react": "^18.3.1"
+  },
+  "publishUnscoped": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "wix": {
+    "artifact": {
+      "groupId": "com.wixpress.npm",
+      "artifactId": "origami-system-components",
+      "targets": {
+        "docker": false
+      }
+    },
+    "validations": {
+      "postBuild": [
+        "test",
+        "lint"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./InternalContainer": {
+      "types": "./dist/layout/InternalContainer.d.ts",
+      "default": "./dist/layout/InternalContainer.js"
+    },
+    "./site.global.css": "./dist/site.global.css",
+    "./InternalContainer.css": {
+      "types": "./dist/InternalContainer.css.d.ts",
+      "default": "./dist/InternalContainer.css"
+    },
+    "./Page": {
+      "types": "./dist/Page.d.ts",
+      "default": "./dist/Page.js"
+    },
+    "./Section": {
+      "types": "./dist/Section.d.ts",
+      "default": "./dist/Section.js"
+    },
+    "./HeaderSection": {
+      "types": "./dist/HeaderSection.d.ts",
+      "default": "./dist/HeaderSection.js"
+    },
+    "./FooterSection": {
+      "types": "./dist/FooterSection.d.ts",
+      "default": "./dist/FooterSection.js"
+    },
+    "./Anchor": {
+      "types": "./dist/Anchor.d.ts",
+      "default": "./dist/Anchor.js"
+    },
+    "./UnsupportedWidgetPlaceholder": {
+      "types": "./dist/UnsupportedWidgetPlaceholder.d.ts",
+      "default": "./dist/UnsupportedWidgetPlaceholder.js"
+    },
+    "./layout-contract": {
+      "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"
+    },
+    "./layout/HeaderSection": {
+      "types": "./dist/layout/HeaderSection.d.ts",
+      "default": "./dist/layout/HeaderSection.js"
+    },
+    "./layout/FooterSection": {
+      "types": "./dist/layout/FooterSection.d.ts",
+      "default": "./dist/layout/FooterSection.js"
+    },
+    "./layout/Header": {
+      "types": "./dist/layout/Header.d.ts",
+      "default": "./dist/layout/Header.js"
+    },
+    "./layout/Footer": {
+      "types": "./dist/layout/Footer.d.ts",
+      "default": "./dist/layout/Footer.js"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "@wix/builder-state-react": "^1.22.5",
+    "@wix/builder-state": "^1.49.3",
+    "@wix/editor-components": "^1.16.0"
+  },
+  "falconPackageHash": "84bd255c072dd6dfec4e41cd37099d708fe051fb05052aa46b89ac1b"
 }