@mosetta/react 0.0.0-stage → 0.0.9

package/CHANGELOG.md

@@ -0,0 +1,112 @@
+# @mosetta/react
+
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @mosetta/runtime@0.0.9
+  - @mosetta/server@0.0.9
+  - @mosetta/server-action@0.0.9
+  - @mosetta/core@0.0.9
+  - @mosetta/di@0.0.9
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @mosetta/core@0.0.8
+  - @mosetta/server@0.0.8
+  - @mosetta/server-action@0.0.8
+  - @mosetta/di@0.0.8
+  - @mosetta/runtime@0.0.8
+
+## 0.0.7
+
+### Patch Changes
+
+- One vocabulary: code is tiles, content is blueprints, running requests is the factory, and a tile and a
+  blueprint made in the factory give a mosaic. A tile is a folder under `tiles/` (was `modules/`) whose
+  files are its sides, each defined with `define<Side>Side` — `defineComponentSide`, `defineEditorSide`,
+  `defineFallbackSide`, `defineRootComponentSide`, `defineServerSide`, `defineSsrSide` (were
+  `define…Module`); `useTile` (was `useModule`), `markInternalTile`, `BlueprintRoot`,
+  `BlueprintNodeRenderer`. `mosetta.json` names the tile `brand` (was `namespace`; a config that still
+  says `namespace` is refused with the word to use). The store connectors' package is `@mosetta/stores`
+  (was `@mosetta/provider`): `IStoreConnector`, `StoreConnectors`, `tileHostsOf`. The server's runner
+  is the factory gate (`@mosetta/server/factoryGate`, was `/runner`). Nothing on the wire moves: tile
+  ids keep `_ns_`, a build keeps `modules/<id>/`, stored JSON keeps its fields.
+- Updated dependencies
+  - @mosetta/server-action@0.0.7
+  - @mosetta/runtime@0.0.7
+  - @mosetta/core@0.0.7
+  - @mosetta/server@0.0.7
+  - @mosetta/di@0.0.7
+
+## 0.0.6
+
+### Patch Changes
+
+- A site's code may come from several sources — the host's stores, a project's own distributions, another vendor's. A
+  store of the registry names its source (`source`; none — the host's), and the runner reads every source's public and
+  private catalogs into one: a namespace belongs to the first source holding it, a package to the first that has it
+  (other bytes under its id are said, the first stands). Every entity is read from the source its catalog entry names —
+  blocks, packages and singletons alike, by the runner, the site's renderer and the browser: the page envelope carries a
+  `providers` table (key → base) and the catalog slice the key of each entity. The page no longer says where its code
+  lives: the node's `provider` is gone. A server module runs only when a private catalog of the site names it; a site
+  whose catalogs were never read runs none (503). A build into a target leaves what the target already holds: released
+  library roots and published packages are not built again.
+- Updated dependencies
+  - @mosetta/server@0.0.6
+  - @mosetta/runtime@0.0.6
+  - @mosetta/server-action@0.0.6
+  - @mosetta/core@0.0.6
+  - @mosetta/di@0.0.6
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies [92417dc]
+  - @mosetta/server-action@0.0.5
+  - @mosetta/server@0.0.5
+  - @mosetta/core@0.0.5
+  - @mosetta/di@0.0.5
+  - @mosetta/runtime@0.0.5
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies [7577aa3]
+- Updated dependencies [7577aa3]
+  - @mosetta/server-action@0.0.4
+  - @mosetta/server@0.0.4
+  - @mosetta/core@0.0.4
+  - @mosetta/di@0.0.4
+  - @mosetta/runtime@0.0.4
+
+## 0.0.3
+
+### Patch Changes
+
+- 842344f: A page's stylesheets — and its loader — are fetched with CORS whether they carry a hash or not, so the copy a browser
+  keeps has the CDN's CORS headers and a later CORS read of the same file is answered from it.
+- Updated dependencies [1330d5d]
+- Updated dependencies [842344f]
+  - @mosetta/server@0.0.3
+  - @mosetta/server-action@0.0.3
+  - @mosetta/core@0.0.3
+  - @mosetta/di@0.0.3
+  - @mosetta/runtime@0.0.3
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @mosetta/server@0.0.2
+  - @mosetta/core@0.0.2
+  - @mosetta/di@0.0.2
+  - @mosetta/runtime@0.0.2
+  - @mosetta/server-action@0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mosetta contributors
+
+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

@@ -1,3 +1,47 @@
-# Temporary Holding Version
+# @mosetta/react
 
-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.
+The React binding of the mosetta protocol: what a tile's sides are written with.
+
+A tile is a folder under `tiles/` whose files are its sides — `tiles/<name>/<name>.<side>.tsx`. The
+component side is what the visitor sees; it reads the settings a content manager filled in the
+editor, and renders the blocks placed into it:
+
+```tsx
+import { defineComponentSide, useChildren, useSettings } from '@mosetta/react';
+
+interface IGreetingSettings { text: string }
+
+export default defineComponentSide<IGreetingSettings>({
+  Component() {
+    const { text } = useSettings<IGreetingSettings>();
+    return <section><h1>{text}</h1>{useChildren({ max: 'many' })}</section>;
+  },
+  defaultSettings() {
+    return { text: 'Hello' };
+  },
+});
+```
+
+The editor side edits the same settings as a draft:
+
+```tsx
+import { defineEditorSide, useSettingsDraft } from '@mosetta/react';
+
+export default defineEditorSide({
+  Component() {
+    const { draft, update } = useSettingsDraft<IGreetingSettings>();
+    return <input value={draft.text} onChange={(e) => update({ text: e.target.value })} />;
+  },
+});
+```
+
+## Entry points
+
+| Entry | What it holds |
+|---|---|
+| `@mosetta/react` | side definers (`defineComponentSide`, `defineEditorSide`, `defineFallbackSide`, `defineRootComponentSide`), hooks (`useSettings`, `useChildren`, `useSettingsDraft`, `useTile`, `useRoute`, `useRouter`, `useHref`, `useStyler`, `useTheme`, `useAddToHead`, `useMediaUpload`, …), `Link`, the blueprint renderer |
+| `@mosetta/react/server-action` | `useServerAction` — a tile's call of its server side, run on the server during server rendering |
+| `@mosetta/react/ssr` | the root renderer a tile palette's server rendering is made with |
+| `@mosetta/react/start` | `startAndMount` — the browser entry of a page's root tile |
+
+Sources ship as TypeScript: the mosetta build compiles them with the tiles that use them.

package/package.json

@@ -1,6 +1,33 @@
 {
   "name": "@mosetta/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.9",
+  "description": "React binding of the mosetta protocol: side definers, hooks, blueprint renderer, DI adapter, server-action hook, startAndMount. Subpath exports only (no barrel) — each entry ships as its own package tile; ./context is the internal state-singleton entry the others re-export from.",
+  "license": "MIT",
+  "type": "commonjs",
+  "exports": {
+    ".": "./src/react.ts",
+    "./server-action": "./src/serverAction.ts",
+    "./ssr": "./src/ssr.tsx",
+    "./start": "./src/start.ts"
+  },
+  "dependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "@mosetta/di": "0.0.9",
+    "@mosetta/runtime": "0.0.9",
+    "@mosetta/server": "0.0.9",
+    "@mosetta/core": "0.0.9",
+    "@mosetta/server-action": "0.0.9"
+  },
+  "devDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "typescript": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
 }

package/src/components/BlueprintNodeRenderer.tsx

@@ -0,0 +1,147 @@
+import { INodePointer, IProvidedChild, nodeStatesOf, ProvideNode } from '../hooks/NodeContext';
+import { useHydrated } from '../hooks/clientState';
+import { usePageOf } from '../hooks/usePage';
+import { IComponentSide } from '../utils/definers';
+import { ComponentErrorHandler } from './ComponentErrorHandler';
+import { memo, Suspense, useEffect, useMemo, useState } from 'react';
+import { IWithBlueprintNode } from '@mosetta/core';
+import { useTile } from '../hooks/useTile';
+import { BlockScope, DI_CONTAINER_TOKEN, IWithDi } from '@mosetta/di';
+import { ProvideDi, ProvideDiScope, useDi, useDiScope } from '../hooks/di';
+import { isNodeServerRendered, PAGE_MANAGER_TOKEN } from '@mosetta/runtime/client';
+import type { ISsrFlags } from '@mosetta/runtime/client';
+
+
+/**
+ * The tree node's identity in the DOM, carried by the scope host of every rendered node.
+ * The editor's preview agent hit-tests and measures through it (`closest('[data-mosetta-node]')`);
+ * integration tests address nodes by it too.
+ *
+ * Emitted ALWAYS, not only under preview: the preview flag is a browser-side realm mark, so a
+ * conditional attribute would make the client's first render disagree with the server's HTML and
+ * break hydration. The cost is one short attribute per node.
+ *
+ * The host is `display: contents`, so it generates no box of its own — a reader wanting geometry
+ * measures the CONTENTS (a Range over the element), not the element.
+ */
+export const NODE_ID_ATTRIBUTE = 'data-mosetta-node';
+
+// Inner body: resolving the module (useTile) and rendering it both happen HERE, INSIDE the error
+// boundary — so a failed module load (useTile throws its ILoadedTile.error) is isolated to this subtree
+// exactly like a render-time error, and falls back instead of crashing the app.
+function ModuleTreeNodeBody({ moduleTreeNode, ssrRendered }: IWithBlueprintNode & { ssrRendered: boolean }) {
+  const module = useTile<IComponentSide<unknown>>(moduleTreeNode.reference);
+  const Component = module.Component;
+
+  if (!Component.displayName) {
+    Component.displayName = moduleTreeNode.reference;
+  }
+
+  // the branch's server-renderedness travels to children AS A PROP, not through the pointer: a
+  // boolean prop stays identical across edits, so an untouched sibling's memo holds — reading it
+  // from the PARENT's pointer would re-render every child whenever the parent's data changed
+  const children = useMemo(() => (moduleTreeNode.children ?? []).map<IProvidedChild>(childComponent => {
+    return {
+      // keyed by id AND module: across a client-side move (ADR-0051) the same id may name another
+      // block — a kept fiber would carry its error state and scope over
+      // eslint-disable-next-line no-use-before-define -- recursive tree renderer
+      child: <BlueprintNodeRenderer key={`${childComponent.id}@${childComponent.reference}`}
+                                    moduleTreeNode={childComponent}
+                                    inheritedSsr={ssrRendered}/>,
+      slot: childComponent.slot ?? 'default',
+    };
+  }), [moduleTreeNode, ssrRendered]);
+
+  // The node's DATA goes into the DI-keyed store, written as the renderer walks: children read
+  // it during THEIR render, which react guarantees comes after this one. The write is idempotent
+  // per pass, so StrictMode's double render and a discarded concurrent pass leave nothing torn.
+  // The POINTER carries only the id — identity-stable, so the context never propagates and an
+  // untouched sibling's memo bailout survives an ancestor's edit (react does not stop context
+  // propagation at a nested provider — a data-carrying pointer would re-render every descendant).
+  const di = useDi(DI_CONTAINER_TOKEN);
+  nodeStatesOf(di).set(moduleTreeNode.id, { node: moduleTreeNode, ssrRendered, children });
+  // a node that left the tree takes its state along (the id may return later — with fresh state)
+  useEffect(() => () => {
+    nodeStatesOf(di).delete(moduleTreeNode.id);
+  }, [di, moduleTreeNode.id]);
+
+  // every block owns a SCOPE, chained to the parent block's: what an ancestor registers for its
+  // subtree (a dock panel's tab handle) is resolved by walking this chain — no wrapped containers.
+  // Born DURING the render (like the node state above): the children resolve through it in their
+  // own renders, which react guarantees come after this one.
+  const parentScope = useDiScope();
+  const [scope] = useState(() => {
+    const blockScope = new BlockScope(parentScope);
+    di.registerScope(blockScope);
+    return blockScope;
+  });
+  useEffect(() => () => di.disposeScope(scope), [di, scope]);
+
+  const pointer = useMemo<INodePointer>(() => ({ id: moduleTreeNode.id }), [moduleTreeNode.id]);
+
+  return (
+    <ProvideNode value={pointer}>
+      <ProvideDiScope scope={scope}>
+        {/* layout-neutral scope host: module CSS is prefixed with `.<reference>` */}
+        <div className={moduleTreeNode.reference}
+             {...{ [NODE_ID_ATTRIBUTE]: moduleTreeNode.id }}
+             style={{ display: 'contents' }}>
+          <Component />
+        </div>
+      </ProvideDiScope>
+    </ProvideNode>
+  );
+}
+
+/**
+ * MEMOIZED, and that is the whole reason a live tree update is affordable. A content edit builds
+ * new objects only along the path to the node it touches (see the content model's tree ops) — every
+ * other subtree keeps its identity, so an unchanged node here gets the very same prop and is
+ * skipped entirely, together with everything under it. Without this, re-rendering the root would
+ * walk the page: siblings of the edited node, and every top-level branch, would render again for
+ * a keystroke that has nothing to do with them.
+ *
+ * The two things that must pierce the memo do: the node pointer is a context (an update reaches
+ * consumers through skipped parents), and the hydration gate is a per-renderer store subscription
+ * (react re-checks it after hydration on every subscriber, memo or not).
+ */
+export const BlueprintNodeRenderer = memo(function BlueprintNodeRenderer({ moduleTreeNode, inheritedSsr }: IWithBlueprintNode & { inheritedSsr: boolean }) {
+  // effective-ssr gate (SSR epic stage 4): during the hydration MIRROR PASS a node the server
+  // did not render is a HOLE (null) — the first client render reproduces the server's HTML, so
+  // hydrateRoot is safe unconditionally; after mount holes fill in. The same gate prunes the
+  // SERVER render to exactly the page's closure (useHydrated is never true there — effects
+  // don't run). Branch state arrives as a prop (see the children construction in the body);
+  // checked BEFORE useTile — a hole's module is not even in the server holder.
+  const hydrated = useHydrated();
+  const rendered = isNodeServerRendered(moduleTreeNode as ISsrFlags, inheritedSsr);
+  if (!rendered && !hydrated) return null;
+  // the boundary + Suspense are in place BEFORE the module resolves. Error boundary OUTSIDE
+  // Suspense: a load/render *error* → fallback; a not-yet-loaded module *suspends* (useTile
+  // throws the load promise) → Suspense.
+  return (
+    <ComponentErrorHandler moduleTreeNode={moduleTreeNode}
+                           ssrRendered={rendered}>
+      <Suspense fallback={<></>}>
+        <ModuleTreeNodeBody moduleTreeNode={moduleTreeNode}
+                            ssrRendered={rendered} />
+      </Suspense>
+    </ComponentErrorHandler>
+  );
+});
+
+// memoized for the same reason as the node renderer: the root maps the page's children on every
+// live update, and a branch whose node did not change must not be walked again.
+export const BlueprintRoot = memo(function BlueprintRoot({ di, moduleTreeNode }: IWithDi & IWithBlueprintNode) {
+  // What the first renderer inherits: the envelope's ssrRendered STAMP (NOT the raw ssr flag: a
+  // preview or a degraded page carries ssr:true but arrives with an empty #root). Subscribed to
+  // the live page, handed down as a boolean prop — the renderer's memo compares it for free.
+  const manager = useMemo(() => di.getByToken(PAGE_MANAGER_TOKEN), [di]);
+  const page = usePageOf(manager);
+  const inheritedSsr = (page as { ssrRendered?: unknown } | null)?.ssrRendered === true;
+  return (
+    <ProvideDi di={di}>
+      <BlueprintNodeRenderer moduleTreeNode={moduleTreeNode}
+                             inheritedSsr={inheritedSsr} />
+    </ProvideDi>
+  );
+});

package/src/components/ComponentErrorHandler.tsx

@@ -0,0 +1,73 @@
+import { Component, ErrorInfo, PropsWithChildren, useMemo } from 'react';
+
+import { INodePointer, IWithError, nodeStatesOf, ProvideNode } from '../hooks/NodeContext';
+import { usePage } from '../hooks/usePage';
+import { IFallbackSide } from '../utils/definers';
+import { useDi } from '../hooks/di';
+import { DI_CONTAINER_TOKEN } from '@mosetta/di';
+import { TILES_HOLDER_TOKEN } from '@mosetta/runtime/client';
+import type { IWithBlueprintNode } from '@mosetta/core';
+
+type TBoundaryProps = PropsWithChildren & IWithBlueprintNode & { ssrRendered: boolean };
+
+function FallbackRenderer({ error, moduleTreeNode, ssrRendered }: IWithError & Omit<TBoundaryProps, 'children'>) {
+  const page = usePage();
+  const holder = useDi(TILES_HOLDER_TOKEN);
+  const di = useDi(DI_CONTAINER_TOKEN);
+
+  // the fallback stands in for the node, so it owns the node's STATE (the body that would have
+  // written it is the thing that just died) and a pointer with the error aboard — useError() is
+  // a derivation over the same pair as every other hook
+  nodeStatesOf(di).set(moduleTreeNode.id, { node: moduleTreeNode, ssrRendered, children: [] });
+  const pointer = useMemo<INodePointer>(() => ({
+    id: moduleTreeNode.id,
+    error,
+  }), [moduleTreeNode.id, error]);
+
+  // Read the fallback via the holder directly (NOT useTile, which throws) so a fallback that is
+  // itself missing/failed cannot crash the app — we degrade to a minimal inline message instead.
+  const fallbackRef = page && page.fallback;
+  const fb = fallbackRef ? holder.getModule(fallbackRef) : undefined;
+  const fallbackModule = fb && !fb.error ? (fb.module as IFallbackSide<unknown> | undefined) : undefined;
+
+  if (!fallbackModule || !fallbackModule.Component) {
+    return <div data-mosetta-error="">{String((error && error.message) || error)}</div>;
+  }
+
+  const Fallback = fallbackModule.Component;
+
+  return (
+    <ProvideNode value={pointer}>
+      <Fallback />
+    </ProvideNode>
+  );
+}
+
+export class ComponentErrorHandler extends Component<TBoundaryProps, IWithError> {
+  constructor(props: TBoundaryProps) {
+    super(props);
+
+    this.state = {
+      error: undefined!,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // TODO: log error here
+  }
+
+  render() {
+    if (this.state.error) {
+      return <FallbackRenderer error={this.state.error}
+                               moduleTreeNode={this.props.moduleTreeNode}
+                               ssrRendered={this.props.ssrRendered} />;
+    }
+
+    return <>{this.props.children}</>;
+  }
+}

package/src/components/DefaultRootComponent.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useMemo, useState } from 'react';
+import { createAppContainer, PAGE_MANAGER_TOKEN, ROUTER_TOKEN } from '@mosetta/runtime/client';
+import { usePageOf } from '../hooks/usePage';
+import type { IRootComponentProps } from '../utils/definers';
+import { BlueprintRoot } from './BlueprintNodeRenderer';
+
+// The framework-provided page root: DI birth + children render — with
+// the root body fully generic (optional slices self-wire from their hooks), an app's root module
+// shrinks to a one-liner over this component. Custom chrome / extra DI registrations — write your
+// own Component against the same IRootComponentProps contract.
+export function DefaultRootComponent(props: IRootComponentProps) {
+  // fresh container per mount — on the server that is per request/render of a cached isolate;
+  // the WHOLE props object goes in so the server's ssrChannel rides along
+  const [di] = useState(() => createAppContainer(props));
+  // the tree comes from the page MANAGER, not from the prop it was born with: the manager is where
+  // a live composition tool puts a new tree (see PageManager), and the first snapshot is that very
+  // prop — so the mirror pass renders exactly what the server sent
+  const manager = useMemo(() => di.getByToken(PAGE_MANAGER_TOKEN), [di]);
+  // A HOST that mounted this app hands over new trees through the prop (IMountHandle.render), a
+  // live composition tool puts them straight into the manager — and the manager is what everything
+  // below reads either way. Keyed on the prop, so a tree that arrived the other way is not undone.
+  useEffect(() => {
+    manager.setCurrentPage(props.moduleTreeNode as Parameters<typeof manager.setCurrentPage>[0]);
+  }, [manager, props.moduleTreeNode]);
+  const moduleTreeNode = usePageOf(manager);
+  // the client router listens to history for as long as the root lives (inert ones listen to
+  // nothing): a move swaps the tree through the very manager read above
+  useEffect(() => di.getByToken(ROUTER_TOKEN).attach(), [di]);
+  return (
+    <>
+      {/* a ROOT rendered without a tree renders nothing: it is what the palette does when it
+          previews a root module as if it were a block, and a crash there says less than an empty
+          box does */}
+      {/* keyed by id AND module: a node of the next page under a known id but another module is
+          another block — its error state and scope must not carry over */}
+      {(moduleTreeNode?.children ?? []).map((child) => (
+        <BlueprintRoot key={`${child.id}@${child.reference}`}
+                       di={di}
+                       moduleTreeNode={child} />
+      ))}
+    </>
+  );
+}

package/src/components/Link.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type AnchorHTMLAttributes, type MouseEvent } from 'react';
+import { useRouter } from '../hooks/useRouter';
+
+export interface ILinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** the address, as the anchor would carry it (a block resolves a site path with useHref first) */
+  readonly href: string;
+  /** replace the current history entry instead of adding one */
+  readonly replace?: boolean;
+  /** scroll to the top once there (default true) */
+  readonly scroll?: boolean;
+  /** open in a new tab — a plain link then, the router has no say */
+  readonly newTab?: boolean;
+}
+
+/** a click the browser should keep: a modifier, another button, a target, a download */
+function browsersOwn(event: MouseEvent<HTMLAnchorElement>, anchor: HTMLAnchorElement): boolean {
+  return event.defaultPrevented
+    || event.button !== 0
+    || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey
+    || (anchor.target !== '' && anchor.target !== '_self')
+    || anchor.hasAttribute('download');
+}
+
+/**
+ * A link that moves IN PLACE (ADR-0051): an ordinary `<a href>` whose plain left click asks the
+ * client router to move instead of loading a document. Where the router is inert (the server, a
+ * preview, a hosted mount) or does not take the address (another origin), the browser does what
+ * it always does. The same markup everywhere, so hydration never disagrees. The address is taken
+ * as given: a block resolves a path of the site (language, query) with `useHref` before.
+ */
+export const Link = forwardRef<HTMLAnchorElement, ILinkProps>(function Link(
+  { href, replace, scroll, newTab, onClick, children, ...rest },
+  ref,
+) {
+  const router = useRouter();
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>): void => {
+    onClick?.(event);
+    if (!router.active || newTab || browsersOwn(event, event.currentTarget)) return;
+    const address = event.currentTarget.href;
+    event.preventDefault();
+    void router.navigate(address, { replace, scroll }).then((taken) => {
+      if (!taken && typeof window !== 'undefined') window.location.assign(address);
+    });
+  };
+  return (
+    <a ref={ref}
+       href={href}
+       onClick={handleClick}
+       {...(newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+       {...rest}>
+      {children}
+    </a>
+  );
+});