immerser-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vladimir Lysov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,232 @@
+# Immerser React
+
+React adapter for declaring Immerser markup with components instead of writing `data-immerser-*` DOM by hand.
+
+The project exposes a small component set:
+
+- `ImmerserProvider` - Owns the core `Immerser` controller lifecycle and shares its scroll state with React components.
+- `ImmerserRoot` - Renders the fixed root container and the per-layer mask structure driven by the core controller.
+- `ImmerserLayer` - Marks a real section as an immerser layer.
+- `ImmerserSolid` - Declares content positioned inside `ImmerserRoot`, usually absolutely positioned within that root.
+- `ImmerserPager` - Builds a pager solid inside `ImmerserRoot` from provider layer ids.
+- `ImmerserSynchroLink` - Anchor with synchronized hover state across layer clones.
+
+## Terms
+
+- `Immerser` (here `ImmerserRoot` component) is the fixed root node.
+- `Solid` is a piece of fixed UI rendered inside the root and copied into every layer mask.
+- `Layer` is a real scroll section that drives mask transitions.
+- `Mask` is internal clipping markup rendered by the adapter.
+- `Synchro` means shared state between solid copies.
+
+## Install
+
+```ts
+import { ImmerserLayer, ImmerserProvider, ImmerserRoot, ImmerserSolid } from '@immerser/react';
+```
+
+## How to Use
+
+Wrap the page in `ImmerserProvider`, render fixed solids inside `ImmerserRoot`, then render scroll sections with `ImmerserLayer`.
+
+`ImmerserProvider` owns the controller lifecycle. Provider props are adapter-specific props plus the runtime controls exposed by the React adapter.
+
+`solidClassnamesByLayerId` is the central config. Its top-level keys must match `ImmerserLayer id` values. Layer and pager order comes from the DOM order of `ImmerserLayer` elements, not from config key order. Each layer value maps solid names to CSS classes applied to the copied solids inside that layer mask, so fixed content stays readable when the fixed container overlaps that layer.
+
+`ImmerserLayer` elements must have real layout height. Prefer content-driven height, or define CSS such as `min-height`; zero-height layers cannot be measured correctly.
+
+```tsx
+import {
+  ImmerserLayer,
+  ImmerserPager,
+  ImmerserProvider,
+  ImmerserRoot,
+  ImmerserSolid,
+  ImmerserSynchroLink,
+} from '@immerser/react';
+
+export const Page = () => {
+  return (
+    <ImmerserProvider
+      solidClassnamesByLayerId={{
+        intro: {
+          logo: 'logo--light',
+          pager: 'pager--light',
+        },
+        details: {
+          menu: 'menu--dark',
+          pager: 'pager--dark',
+        },
+      }}
+      fromViewportWidth={1024}
+      scrollAdjustThreshold={50}
+      scrollAdjustDelay={600}
+      updateLocationHash={(layerId) => window.history.replaceState(null, '', `#${layerId}`)}
+      on={{
+        layerProgressChange(layerProgressArray) {
+          console.log(layerProgressArray);
+        },
+      }}
+    >
+      <ImmerserRoot className="fixed">
+        <ImmerserPager className="fixed__pager pager" activeClassName="pager__link--active" />
+
+        <ImmerserSolid name="logo" className="fixed__logo logo">
+          <ImmerserSynchroLink href="#intro" hoverClassName="_hover" synchroId="logo">
+            immerser
+          </ImmerserSynchroLink>
+        </ImmerserSolid>
+
+        <ImmerserSolid name="menu" className="fixed__menu menu">
+          <ImmerserSynchroLink href="#intro" hoverClassName="_hover" synchroId="intro">
+            Intro
+          </ImmerserSynchroLink>
+          <ImmerserSynchroLink href="#details" hoverClassName="_hover" synchroId="details">
+            Details
+          </ImmerserSynchroLink>
+        </ImmerserSolid>
+      </ImmerserRoot>
+
+      <ImmerserLayer id="intro" className="section section--intro">
+        <h1>Intro</h1>
+        <p>Section content gives the layer real layout height.</p>
+      </ImmerserLayer>
+      <ImmerserLayer id="details" className="section section--details">
+        <h2>Details</h2>
+        <p>Immerser measures this layout to calculate mask transitions.</p>
+      </ImmerserLayer>
+    </ImmerserProvider>
+  );
+};
+```
+
+## Styling
+
+Position `ImmerserRoot` and every solid with CSS. Do not pass `style` to adapter components: the adapter reserves inline styles for technical Immerser styles and replaces any user-provided style prop. Child content inside adapter components is regular React.
+
+```css
+.fixed {
+  position: fixed;
+  inset: 32px;
+  z-index: 10;
+}
+
+.fixed__logo,
+.fixed__menu,
+.fixed__pager {
+  position: absolute;
+}
+
+.fixed__logo {
+  left: 0;
+  top: 0;
+}
+
+.fixed__menu {
+  right: 0;
+  top: 0;
+}
+
+.fixed__pager {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.logo--light,
+.pager--light {
+  color: white;
+}
+
+.menu--dark,
+.pager--dark {
+  color: black;
+}
+
+.section {
+  min-height: 100vh;
+  padding: 120px 32px;
+}
+```
+
+## Component API
+
+This section is generated from current component files and their JSDoc comments.
+
+## ImmerserProvider
+
+Owns the core `Immerser` controller lifecycle and shares its scroll state with React components. Provider props are adapter-specific props plus the runtime controls exposed by the React adapter. Event handlers passed through `on` are init-only and registered when the controller is created. `selectorRoot` recreates the core controller when changed. Runtime controls are forwarded to the underlying controller. `solidClassnamesByLayerId` keys must match `ImmerserLayer` ids. The React adapter uses `solidClassnamesByLayerId` to render solid copies inside each layer mask itself. Init-only and adapter-owned controller options are not exposed. This keeps DOM measurement, mask rendering and scroll listeners in one place while the rest of the API stays declarative.
+
+| prop | required | type | description |
+| - | - | - | - |
+| children | no | `ReactNode` | React tree that declares an immerser root, its absolute solids and scroll layers. |
+| on | no | `Record<EventName, Handler>` | Initial event handlers registered when the core controller is created. Changing this prop does not update the current controller. See [core events](https://github.com/dubaua/immerser#events). |
+| selectorRoot | no | `ParentNode` | Parent node used for selector discovery. Changing it recreates the core controller. |
+| solidClassnamesByLayerId | yes | `layer id -> solid id -> classname` | Map of layer ids to solid ids to CSS classes. Layer ids must match `ImmerserLayer id` values; solid ids must match `ImmerserSolid name` values. |
+| debug | no | `boolean` | Enables runtime reporting of warnings and errors. Default: `false`. |
+| fromViewportWidth | no | `number` | Minimal viewport width (px) at which immerser mounts runtime; below it unmounts runtime. Default: `0`. |
+| updateLocationHash | no | `UpdateLocationHashHandler` | Handles active layer id when it should be pushed into location hash. Default: `undefined`. |
+| pagerThreshold | no | `number` | Portion of viewport height that must overlap the next layer before pager switches (0–1). Default: `0.5`. |
+| scrollAdjustDelay | no | `number` | Delay in ms before running scroll snapping after user scroll stops. Default: `600`. |
+| scrollAdjustThreshold | no | `number` | Pixel threshold near section edges that triggers scroll snapping when exceeded, if 0 - no adjusting. Default: `0`. |
+
+## ImmerserRoot
+
+Renders the fixed root container and the per-layer mask structure driven by the core controller. Direct children must be `ImmerserSolid` or `ImmerserPager` so each layer can receive its own solid classnames. Fragments and wrapper components are not accepted as direct children. In React mode, the core measures layer masks and moves their transitions; React owns the mask markup itself.
+
+This component has no adapter-specific props.
+
+## ImmerserLayer
+
+Marks a real section as an immerser layer. The core uses these nodes to calculate layer bounds, progress and active index. Render one layer component for every scroll section that should drive solid class changes.
+
+| prop | required | type | description |
+| - | - | - | - |
+| as | no | `T` | Element used for the layer; defaults to `div`. |
+| children | no | `ReactNode` | Layer content that defines the page section measured by the core controller. |
+| id | yes | `string` | Stable layer id used for hash links, pager links and solid classname lookup. Must match a `solidClassnamesByLayerId` key. |
+
+## ImmerserSolid
+
+Declares content positioned inside `ImmerserRoot`, usually absolutely positioned within that root. React renders a copy into each mask and applies layer-specific classnames by solid name.
+
+| prop | required | type | description |
+| - | - | - | - |
+| name | yes | `string` | Solid id used to read the matching classname from each layer configuration. |
+| as | no | `T` | Element or component used to render the solid inside `ImmerserRoot`; defaults to `div`. |
+| children | no | `ReactNode` | Interactive content rendered inside every layer mask. Position it with your own CSS. |
+
+## ImmerserPager
+
+Builds a pager solid inside `ImmerserRoot` from provider layer ids. Renders one link per DOM layer as a solid named `pager`, ordered by `ImmerserLayer` DOM order. Add `pager` classnames to layer configs when the pager needs per-layer visual changes. It mirrors core pager behavior in React so active state comes from context instead of DOM class mutation. In default mode each generated link receives `linkClassName`, `href="#layerId"`, `hoverClassName` with `_hover` as the default, and `synchroId="pager-${layerIndex}"`. Custom render mode receives `isActive`, `layerId` and `layerIndex` and does not add those generated-link props.
+
+| prop | required | type | description |
+| - | - | - | - |
+| as | no | `T` | Element used for the pager wrapper; defaults to `nav`. |
+
+### Default mode
+
+| prop | required | type | description |
+| - | - | - | - |
+| activeClassName | yes | `string` | Classname applied to the generated link for the currently active layer. |
+| linkClassName | yes | `string` | Classname applied to each generated pager link. |
+| hoverClassName | no | `string` | Classname applied to generated link copies while any of them is hovered. |
+| renderLink | no | `never` | - |
+
+### Custom render mode
+
+| prop | required | type | description |
+| - | - | - | - |
+| renderLink | yes | `(props: RenderLinkProps) => ReactNode` | Renders custom content for each configured layer. |
+| activeClassName | no | `never` | - |
+| linkClassName | no | `never` | - |
+| hoverClassName | no | `never` | - |
+
+## ImmerserSynchroLink
+
+Anchor with synchronized hover state across layer clones. One source link is rendered into multiple layer-mask copies; `synchroId` keeps only those generated copies in the same hover group. This mirrors the core `data-immerser-synchro-hover` feature without relying on cloned DOM event wiring.
+
+| prop | required | type | description |
+| - | - | - | - |
+| hoverClassName | yes | `string` | Classname applied to generated copies of this link while any one of them is hovered. |
+| synchroId | yes | `string` | Stable hover group id for this source link. `ImmerserRoot` copies the link into every layer mask, so use the same `synchroId` for links that should share hover state, and different values for independent hover groups. |

package/dist/immerser-react.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("immerser"),s=require("react"),t=require("classnames"),n=s.createContext(null),a=s.createContext(null),l=s.createContext({activeSynchroId:null,setActiveSynchroId:()=>{}}),ImmerserProvider=({children:t,on:o,solidClassnamesByLayerId:i,selectorRoot:c,...u})=>{const[d,m]=s.useState(-1),[y,I]=s.useState(null),[h,v]=s.useState(null),p=s.useRef(d),g=s.useRef(null),f=s.useRef(u),x=(()=>{const e=s.useRef(new Map),[r,t]=s.useState([]),[,n]=s.useState(0),a=r.length>0&&e.current.size===r.length&&r.every(r=>e.current.has(r)),l=s.useCallback(e=>{t(r=>r.includes(e)?r:[...r,e])},[]),o=s.useCallback(e=>{t(r=>r.filter(r=>r!==e))},[]),i=s.useCallback((r,s)=>{if(s){if(e.current.get(r)===s)return;e.current.set(r,s)}else{if(!e.current.has(r))return;e.current.delete(r)}n(e=>e+1)},[]);return{isReady:a,layerIds:r,maskInnerNodesRef:e,registerLayer:l,unregisterLayer:o,registerMaskInner:i}})(),L=x.layerIds,{debug:N,fromViewportWidth:R,updateLocationHash:S,pagerThreshold:C,scrollAdjustDelay:j,scrollAdjustThreshold:k}=u,E=s.useRef(L);function M(e){-1===e.activeIndex&&0===e.layerProgressArray.length&&E.current.length>0||p.current===e.activeIndex||(p.current=e.activeIndex,m(e.activeIndex))}f.current=u,E.current=L,s.useLayoutEffect(()=>()=>{const e=g.current;e&&(e.destroy(),g.current=null,-1!==p.current&&(p.current=-1,m(-1)))},[h,c]),s.useLayoutEffect(()=>{if(g.current||!h||!x.isReady)return;const e=new r({...f.current,hasExternalRenderer:!0,on:o,selectorRoot:c??h.parentNode??document});g.current=e,e.on("stateChange",M),M(e)},[h,c,x.isReady]),s.useLayoutEffect(()=>{var e;x.isReady&&(null==(e=g.current)||e.render())},[t,L,x.isReady,i]),s.useEffect(()=>{var e;const r=f.current;null==(e=g.current)||e.updateOptions(r)},[N,R,S,C,j,k]);const P=s.useMemo(()=>({layerIds:L,registerLayer:x.registerLayer,registerMaskInner:x.registerMaskInner,setRendererRootNode:v,solidClassnamesByLayerId:i,unregisterLayer:x.unregisterLayer}),[L,x.registerLayer,x.registerMaskInner,x.unregisterLayer,i]),b=s.useMemo(()=>({activeSynchroId:y,setActiveSynchroId:I}),[y]);return e.jsx(n.Provider,{value:P,children:e.jsx(a.Provider,{value:d,children:e.jsx(l.Provider,{value:b,children:t})})})};ImmerserProvider.displayName="ImmerserProvider";const o=e=>{throw new Error(`${e} must be used inside <ImmerserProvider>.`)},i=e=>{const r=s.useContext(n);return r||o(e),r},ImmerserSolid=({as:s,children:t,className:n,name:a,style:l,...o})=>{i("ImmerserSolid");const c=s??"div";return e.jsx(c,{...o,className:n,"data-immerser-solid":a,style:r.InteractiveStyles,children:t})};ImmerserSolid.displayName="ImmerserSolid";const ImmerserSynchroLink=({className:r,hoverClassName:n,onMouseEnter:a,onMouseLeave:o,synchroId:i,...c})=>{const{activeSynchroId:u,setActiveSynchroId:d}=s.useContext(l);return e.jsx("a",{...c,className:t(r,{[n]:u===i}),onMouseEnter:function(e){d(i),null==a||a(e)},onMouseLeave:function(e){d(e=>e===i?null:e),null==o||o(e)}})};ImmerserSynchroLink.displayName="ImmerserSynchroLink";const ImmerserPager=({activeClassName:r,className:n,linkClassName:l,as:c="nav",hoverClassName:u="_hover",renderLink:d,...m})=>{const{layerIds:y}=i("ImmerserPager"),I=(e=>{const r=s.useContext(a);return null===r&&o(e),r})("ImmerserPager");return e.jsx(ImmerserSolid,{...m,as:c,className:n,"data-immerser-pager":"",name:"pager",children:y.map((n,a)=>{const o=a===I;return d?e.jsx(s.Fragment,{children:d({isActive:o,layerId:n,layerIndex:a})},n):e.jsx(ImmerserSynchroLink,{className:t(l,{[r]:o}),href:`#${n}`,hoverClassName:u,synchroId:`pager-${a}`},n)})})};ImmerserPager.displayName="ImmerserPager";const c=(e,r={})=>s.Children.map(e,e=>{if(null==e||!1===e)return e;if(!s.isValidElement(e)||e.type!==ImmerserSolid&&e.type!==ImmerserPager)throw new Error("ImmerserRoot accepts only ImmerserSolid or ImmerserPager as direct children.");const n=e.props.name??"pager";return s.cloneElement(e,{className:t(e.props.className,r[n])})}),u={...r.CroppedFullAbsoluteStyles},d=({children:t,style:n,...a})=>{const{layerIds:l,registerMaskInner:o,setRendererRootNode:d,solidClassnamesByLayerId:m}=i("ImmerserRoot"),y=s.useRef(null);return s.useLayoutEffect(()=>(d(y.current),()=>{d(null)}),[d]),e.jsx("div",{ref:y,...a,"data-immerser":"",style:r.NotInteractiveStyles,children:l.map((r,s)=>e.jsx("div",{"aria-hidden":0!==s||void 0,"data-immerser-layer-id":r,"data-immerser-mask":"",style:u,children:e.jsx("div",{ref:e=>o(r,e),"data-immerser-mask-inner":"",style:u,children:c(t,m[r])})},r))})};d.displayName="ImmerserRoot";const ImmerserLayer=({as:r,children:t,id:n,style:a,...l})=>{const{registerLayer:o,unregisterLayer:c}=i("ImmerserLayer"),u=r??"div";return s.useLayoutEffect(()=>(o(n),()=>{c(n)}),[n,o,c]),e.jsx(u,{id:n,...l,"data-immerser-layer":!0,children:t})};ImmerserLayer.displayName="ImmerserLayer",exports.ImmerserLayer=ImmerserLayer,exports.ImmerserPager=ImmerserPager,exports.ImmerserProvider=ImmerserProvider,exports.ImmerserRoot=d,exports.ImmerserSolid=ImmerserSolid,exports.ImmerserSynchroLink=ImmerserSynchroLink;

package/dist/immerser-react.d.ts

@@ -0,0 +1,184 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { HTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { Options } from 'immerser';
+import { ReactNode } from 'react';
+import { RuntimeOptions } from 'immerser';
+
+declare type CustomRenderModeProps = {
+    /** Renders custom content for each configured layer. */
+    renderLink: (props: RenderLinkProps) => ReactNode;
+    activeClassName?: never;
+    linkClassName?: never;
+    hoverClassName?: never;
+};
+
+declare type DefaultModeProps = {
+    /** Classname applied to the generated link for the currently active layer. */
+    activeClassName: string;
+    /** Classname applied to each generated pager link. */
+    linkClassName: string;
+    /** Classname applied to generated link copies while any of them is hovered. */
+    hoverClassName?: string;
+    renderLink?: never;
+};
+
+declare type DeniedStyleProp = {
+    /**
+     * Inline styles are not supported by Immerser React components.
+     * The adapter reserves the style attribute for technical Immerser styles.
+     */
+    style?: never;
+};
+
+/**
+ * Marks a real section as an immerser layer.
+ * The core uses these nodes to calculate layer bounds, progress and active index.
+ * Render one layer component for every scroll section that should drive solid class changes.
+ *
+ * @public
+ */
+export declare const ImmerserLayer: {
+    <T extends ElementType = "div">({ as, children, id, style: _style, ...rest }: Props_3<T>): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Builds a pager solid inside `ImmerserRoot` from provider layer ids.
+ * Renders one link per DOM layer as a solid named `pager`, ordered by `ImmerserLayer` DOM order.
+ * Add `pager` classnames to layer configs when the pager needs per-layer visual changes.
+ * It mirrors core pager behavior in React so active state comes from context instead of DOM class mutation.
+ * In default mode each generated link receives `linkClassName`, `href="#layerId"`,
+ * `hoverClassName` with `_hover` as the default, and `synchroId="pager-${layerIndex}"`.
+ * Custom render mode receives `isActive`, `layerId` and `layerIndex`
+ * and does not add those generated-link props.
+ *
+ * @public
+ */
+export declare const ImmerserPager: {
+    ({ activeClassName, className, linkClassName, as, hoverClassName, renderLink, ...rest }: Props_4): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Owns the core `Immerser` controller lifecycle and shares its scroll state with React components.
+ * Provider props are adapter-specific props plus `Partial<RuntimeOptions>` from `immerser`.
+ * `RuntimeOptions` is the source of hot core options accepted by the React adapter.
+ * Event handlers passed through `on` are init-only and registered when the controller is created.
+ * `selectorRoot` recreates the core controller when changed.
+ * Runtime options are forwarded through `updateOptions`.
+ * See [core options docs](https://github.com/dubaua/immerser#options).
+ * `solidClassnamesByLayerId` keys must match `ImmerserLayer` ids.
+ * `solidClassnamesByLayerId` keeps the same shape as the constructor option,
+ * but the adapter uses it to render solid copies inside each layer mask and does not forward it as-is.
+ * Init-only and adapter-owned core options are not exposed:
+ * `autoMount`, `hasExternalScroll`, `hasExternalRenderer`, `pagerLinkActiveClassname`
+ * and the core `solidClassnamesByLayerId` contract.
+ * This keeps DOM measurement, mask rendering and scroll listeners in one place
+ * while the rest of the API stays declarative.
+ *
+ * @public
+ */
+export declare const ImmerserProvider: {
+    ({ children, on, solidClassnamesByLayerId, selectorRoot, ...options }: Props): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Renders the fixed root container and the per-layer mask structure driven by the core controller.
+ * Direct children must be `ImmerserSolid` or `ImmerserPager` so each layer can receive its own solid classnames.
+ * Fragments and wrapper components are not accepted as direct children.
+ * In React mode, the core measures layer masks and moves their transitions; React owns the mask markup itself.
+ *
+ * @public
+ */
+export declare const ImmerserRoot: {
+    ({ children, style: _style, ...rest }: Props_2): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Declares content positioned inside `ImmerserRoot`, usually absolutely positioned within that root.
+ * React renders a copy into each mask and applies layer-specific classnames by solid name.
+ *
+ * @public
+ */
+export declare const ImmerserSolid: {
+    <T extends ElementType = "div">({ as, children, className, name, style: _style, ...rest }: Props_5<T>): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Anchor with synchronized hover state across layer clones.
+ * One source link is rendered into multiple layer-mask copies;
+ * `synchroId` keeps only those generated copies in the same hover group.
+ * This mirrors the core `data-immerser-synchro-hover` feature without relying on cloned DOM event wiring.
+ *
+ * @public
+ */
+export declare const ImmerserSynchroLink: {
+    ({ className, hoverClassName, onMouseEnter, onMouseLeave, synchroId, ...rest }: Props_6): JSX.Element;
+    displayName: string;
+};
+
+declare type Props = {
+    /** React tree that declares an immerser root, its absolute solids and scroll layers. */
+    children?: ReactNode;
+    /**
+     * Initial event handlers registered when the core controller is created.
+     * Changing this prop does not update the current controller.
+     */
+    on?: Options['on'];
+    /** Parent node used for selector discovery. Changing it recreates the core controller. */
+    selectorRoot?: Options['selectorRoot'];
+    /**
+     * React-only per-layer solid modifiers keyed by layer id.
+     * This is intentionally not passed to the core controller, even though the core has a similarly named option.
+     * The React adapter uses it to render masked solid clones itself.
+     */
+    solidClassnamesByLayerId: Options['solidClassnamesByLayerId'];
+} & Partial<RuntimeOptions>;
+
+declare type Props_2 = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & DeniedStyleProp;
+
+declare type Props_3<T extends ElementType = 'div'> = {
+    /** Element used for the layer; defaults to `div`. */
+    as?: T;
+    /** Layer content that defines the page section measured by the core controller. */
+    children?: ReactNode;
+    /** Stable layer id used for hash links, pager links and solid classname lookup.
+     * Must match a `solidClassnamesByLayerId` key. */
+    id: string;
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children' | 'id' | 'style'> & DeniedStyleProp;
+
+declare type Props_4<T extends ElementType = 'nav'> = {
+    /** Element used for the pager wrapper; defaults to `nav`. */
+    as?: T;
+} & (DefaultModeProps | CustomRenderModeProps) & Omit<ComponentPropsWithoutRef<T>, 'activeClassName' | 'children' | 'style'>;
+
+declare type Props_5<T extends ElementType = 'div'> = {
+    /** Solid id used to read the matching classname from each layer configuration. */
+    name: string;
+    /** Element or component used to render the solid inside `ImmerserRoot`; defaults to `div`. */
+    as?: T;
+    /** Interactive content rendered inside every layer mask. Position it with your own CSS. */
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children' | 'name' | 'style'> & DeniedStyleProp;
+
+declare type Props_6 = {
+    /** Classname applied to generated copies of this link while any one of them is hovered. */
+    hoverClassName: string;
+    /** Stable hover group id for this source link. `ImmerserRoot` copies the link into every layer mask,
+     * so use the same `synchroId` for links that should share hover state,
+     * and different values for independent hover groups. */
+    synchroId: string;
+} & Omit<ComponentPropsWithoutRef<'a'>, 'style'> & DeniedStyleProp;
+
+declare type RenderLinkProps = {
+    isActive: boolean;
+    layerId: string;
+    layerIndex: number;
+};
+
+export { }