@webround/core 0.1.8 → 0.3.0

package/dist/localized.d.ts

@@ -0,0 +1,36 @@
+/** A value that may come per language: a plain string, or `{ default, it, en… }` (what the page JSON holds for text, alt…). */
+export type WrLocalized = string | Record<string, string>;
+/** The value in a language, falling back to `default`; undefined when there is nothing to show (or it is not a localized value at all). */
+export declare function wrLocalized(value: unknown, lang: string): string | undefined;
+/**
+ * A localized value with one language written (or rewritten): the others are kept. A plain string (what a field held before it was
+ * translated) becomes the `default`. THE way a translation is written: the components of the editor and the operations an agent runs
+ * use this one, so the two cannot disagree on what a translated field looks like.
+ */
+export declare function wrSetLocalized(existing: unknown, lang: string, value: string): Record<string, string>;
+/**
+ * `wrSetLocalized` for a field the user can empty: an empty text in a language other than the default takes that language's text away (the
+ * default one is shown instead, as for a language that was never written), instead of showing nothing. The default language keeps its empty text.
+ */
+export declare function wrWriteLocalized(existing: unknown, lang: string, value: string): Record<string, string>;
+/**
+ * A value that exists in one language so far, written for the first time. The default language is never left empty (a link with no text in
+ * the site's own language is worse than one that is not yet translated): in another language the text is also the default one until someone
+ * writes it, which is what a visitor of the default language would read anyway.
+ */
+export declare function wrNewLocalized(lang: string, value: string): Record<string, string>;
+/**
+ * The entries of a list (a menu) after a caller wrote their `translated` fields in ONE language: `incoming` has them as plain text, the entries
+ * already there (`existing`) keep what they say in the other languages. An incoming entry is the one that is already there when its other
+ * fields (the ones that are not translated: an `href`) are the same; one that is not there yet is new. A translated field that arrives as
+ * `{ default, en… }` is taken as it is. THE rule for writing translated entries: the panel and every operation use it.
+ */
+export declare function wrLocalizeItems(existing: unknown, incoming: unknown, translated: readonly string[], lang: string): Record<string, unknown>[];
+/**
+ * The `aria-label` of an element in a language: what the JSON says (it can be translated, so it wins) or else the one written in the
+ * code. `lang` is the language of the page being shown; without it, the default one.
+ */
+export declare function wrAriaLabel(config: {
+    ariaLabel?: unknown;
+} | undefined, fromCode: string | undefined, lang?: string): string | undefined;
+//# sourceMappingURL=localized.d.ts.map

package/dist/localized.js

@@ -0,0 +1,71 @@
+/** The value in a language, falling back to `default`; undefined when there is nothing to show (or it is not a localized value at all). */
+export function wrLocalized(value, lang) {
+    if (typeof value === 'string')
+        return value;
+    if (typeof value !== 'object' || value === null)
+        return undefined;
+    const map = value;
+    const found = map[lang] ?? map['default'];
+    return typeof found === 'string' ? found : undefined;
+}
+/**
+ * A localized value with one language written (or rewritten): the others are kept. A plain string (what a field held before it was
+ * translated) becomes the `default`. THE way a translation is written: the components of the editor and the operations an agent runs
+ * use this one, so the two cannot disagree on what a translated field looks like.
+ */
+export function wrSetLocalized(existing, lang, value) {
+    const current = typeof existing === 'string' ? { default: existing }
+        : typeof existing === 'object' && existing !== null && !Array.isArray(existing) ? { ...existing }
+            : {};
+    return { ...current, [lang]: value };
+}
+/**
+ * `wrSetLocalized` for a field the user can empty: an empty text in a language other than the default takes that language's text away (the
+ * default one is shown instead, as for a language that was never written), instead of showing nothing. The default language keeps its empty text.
+ */
+export function wrWriteLocalized(existing, lang, value) {
+    const written = wrSetLocalized(existing, lang, value);
+    if (value === '' && lang !== 'default')
+        delete written[lang];
+    return written;
+}
+/**
+ * A value that exists in one language so far, written for the first time. The default language is never left empty (a link with no text in
+ * the site's own language is worse than one that is not yet translated): in another language the text is also the default one until someone
+ * writes it, which is what a visitor of the default language would read anyway.
+ */
+export function wrNewLocalized(lang, value) {
+    return lang === 'default' ? { default: value } : { default: value, [lang]: value };
+}
+/**
+ * The entries of a list (a menu) after a caller wrote their `translated` fields in ONE language: `incoming` has them as plain text, the entries
+ * already there (`existing`) keep what they say in the other languages. An incoming entry is the one that is already there when its other
+ * fields (the ones that are not translated: an `href`) are the same; one that is not there yet is new. A translated field that arrives as
+ * `{ default, en… }` is taken as it is. THE rule for writing translated entries: the panel and every operation use it.
+ */
+export function wrLocalizeItems(existing, incoming, translated, lang) {
+    const before = Array.isArray(existing) ? existing.filter(item => typeof item === 'object' && item !== null) : [];
+    const claimed = new Set();
+    const sameEntry = (a, b) => Object.keys({ ...a, ...b }).filter(key => !translated.includes(key)).every(key => a[key] === b[key]);
+    return (Array.isArray(incoming) ? incoming : []).map((item) => {
+        const index = before.findIndex((known, i) => !claimed.has(i) && sameEntry(known, item));
+        if (index >= 0)
+            claimed.add(index);
+        const out = { ...item };
+        for (const field of translated) {
+            const value = item[field];
+            if (typeof value !== 'string')
+                continue;
+            out[field] = index >= 0 ? wrWriteLocalized(before[index][field], lang, value) : wrNewLocalized(lang, value);
+        }
+        return out;
+    });
+}
+/**
+ * The `aria-label` of an element in a language: what the JSON says (it can be translated, so it wins) or else the one written in the
+ * code. `lang` is the language of the page being shown; without it, the default one.
+ */
+export function wrAriaLabel(config, fromCode, lang = 'default') {
+    return wrLocalized(config?.ariaLabel, lang) ?? fromCode;
+}
+//# sourceMappingURL=localized.js.map

package/dist/not-found.d.ts

@@ -0,0 +1,9 @@
+import { type WrLangConfig } from './routing';
+/**
+ * What an address that leads to no page shows: nothing, the visitor is taken to the home page of their language (the URL is replaced, so
+ * "back" does not bring them here again). Both packages use this one. Never redirects to where it already is (a site without a home page).
+ */
+export declare function WrNotFound({ langs }: {
+    langs?: WrLangConfig;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=not-found.d.ts.map

package/dist/not-found.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Navigate, useLocation } from 'react-router-dom';
+import { wrHomeOf } from './routing';
+/**
+ * What an address that leads to no page shows: nothing, the visitor is taken to the home page of their language (the URL is replaced, so
+ * "back" does not bring them here again). Both packages use this one. Never redirects to where it already is (a site without a home page).
+ */
+export function WrNotFound({ langs }) {
+    const { pathname } = useLocation();
+    const home = wrHomeOf(pathname, langs);
+    return home === pathname ? null : _jsx(Navigate, { to: home, replace: true });
+}
+//# sourceMappingURL=not-found.js.map

package/dist/routing.d.ts

@@ -0,0 +1,122 @@
+import type { ComponentType } from 'react';
+import type { WrPageConfig } from '@webround/core/types';
+import { LangCode } from './lang-codes';
+export interface WrRouteEntry {
+    component: string;
+    lazy?: boolean;
+    /** Header e footer del sito sono di default su ogni pagina: `false` li toglie da questa (una landing, per esempio). */
+    header?: boolean;
+    footer?: boolean;
+}
+export type WrRoutesFile = Record<string, WrRouteEntry>;
+export interface WrResolvedRoute {
+    routePath: string;
+    pattern: string;
+    lazy: boolean;
+    component: string;
+    Component?: ComponentType;
+    loadComponent?: () => Promise<{
+        default: ComponentType;
+    }>;
+    /** Già risolti (default true): la pagina decide al primo render, senza effetti e senza stato. */
+    header: boolean;
+    footer: boolean;
+    resolvePageName: (params: Record<string, string>) => string;
+}
+/**
+ * Header e footer sono condivisi tra le pagine: sono componenti scritti una volta (`src/layout/Header.tsx`, `Footer.tsx`) e il loro
+ * JSON (solo ciò che il codice non può dire: voci di menu, traduzioni) sta a parte, in `config/pages/_shared/`. Un ambito = il file
+ * del codice + il nome del suo JSON.
+ */
+export declare const WR_SHARED_SCOPES: {
+    readonly header: {
+        readonly file: "layout/Header.tsx";
+        readonly name: "_shared/header";
+    };
+    readonly footer: {
+        readonly file: "layout/Footer.tsx";
+        readonly name: "_shared/footer";
+    };
+};
+/** A shared component's scope: the file of its code (relative to `src/`) and the name of its JSON in `config/pages/`. */
+export interface WrSharedScope {
+    file: string;
+    name: string;
+}
+/**
+ * The shared components a site declares, next to its header and footer (`src/config/shared.json`): name → file, relative to `src/`
+ * (`{ "product-card": "components/ProductCard.tsx" }`). The component wraps what it returns in `<WrShared name="product-card">`; its JSON
+ * is `config/pages/_shared/product-card.json`. A shared component can live anywhere and be used anywhere, any number of times: it is one
+ * file and one JSON, like the header.
+ */
+export type WrSharedFile = Record<string, string>;
+export declare const WR_SHARED_FILE = "config/shared.json";
+/** The scope name (the JSON's) of the shared component called `name`. */
+export declare const wrSharedName: (name: string) => string;
+/** Why `name` → `file` cannot be a shared component (null when it can). */
+export declare function wrSharedProblem(name: string, file: unknown): string | null;
+/**
+ * EVERY shared scope of a site: its header and footer, then the ones it declares (an entry that cannot be one, or that points at the file of
+ * another, is left out: `wrSharedProblem` says why). The ONE list the editor, the operations and the checks read.
+ */
+export declare function wrSharedScopes(declared?: WrSharedFile | null): WrSharedScope[];
+export interface WrRegistry {
+    [componentName: string]: ComponentType;
+}
+export interface WrLazyRegistry {
+    [componentName: string]: () => Promise<{
+        default: ComponentType;
+    }>;
+}
+export interface WrResolveErrors {
+    missingComponents: {
+        routePath: string;
+        component: string;
+    }[];
+}
+export interface WrResolveResult {
+    routes: WrResolvedRoute[];
+    errors: WrResolveErrors;
+}
+/** The path a route is served at: `home` is `/`, `about` is `/about`, `blog/[slug]` is `/blog/:slug`. */
+export declare function wrRoutePattern(routePath: string): string;
+export declare function wrResolveRoutes(routesFile: WrRoutesFile, registry: WrRegistry, lazyRegistry?: WrLazyRegistry): WrResolveResult;
+type GlobModules = Record<string, {
+    default?: ComponentType;
+}>;
+type GlobLazyModules = Record<string, () => Promise<{
+    default: ComponentType;
+}>>;
+export declare function wrBuildRegistry(modules: GlobModules): WrRegistry;
+export declare function wrBuildLazyRegistry(modules: GlobLazyModules): WrLazyRegistry;
+export declare function wrPageConfigPath(pageName: string): string;
+/** The file of a page's component, relative to `src/`: the one place that says where pages live. */
+export declare function wrPageFilePath(component: string): string;
+type PageConfigModules = Record<string, WrPageConfig | {
+    default: WrPageConfig;
+}>;
+export declare function wrBuildPageConfigMap(modules: PageConfigModules): Record<string, WrPageConfig>;
+export interface WrLangConfig {
+    /** Lang code che non compare nel path */
+    default: LangCode;
+    /** Tutti i lang code disponibili, default incluso */
+    available: LangCode[];
+}
+/** Per ogni route risolta, registra anche la variante /:lang/... con lo stesso Component/resolvePageName. */
+export declare function wrExpandRoutesForLangs(routes: WrResolvedRoute[], langs?: WrLangConfig): WrResolvedRoute[];
+/** Deriva la lingua corrente da un pathname. 'default' per "/", "/it" (= il default), o prefissi non previsti. */
+/**
+ * The key a language has in the JSON (`{ default: …, en: … }`): the site's default language is always `default`, the others are their
+ * code. What the page context calls `lang`, and what every translated field is written under.
+ */
+export declare function wrLangKey(code: string, langs?: WrLangConfig): string;
+export declare function wrExtractLang(pathname: string, langs: WrLangConfig): LangCode;
+/** Costruisce il path per una data lingua, mantenendo lo stesso slug/segmenti correnti. */
+export declare function wrBuildLangPath(targetLang: LangCode, pathname: string, langs: WrLangConfig): string;
+/** Where an address that leads to no page goes: the home page of the language it is in (`/en/nope` → `/en`, `/nope` → `/`). */
+export declare function wrHomeOf(pathname: string, langs?: WrLangConfig): string;
+/** An address that leaves the site: it has a scheme (`https:`, `mailto:`, `tel:`) or starts with `//`. Anything else is the site's own and is a router `Link`, whatever `target` it was given. */
+export declare const wrIsExternalHref: (href: string) => boolean;
+export declare function wrLocalizeHref(href: string, lang: string): string;
+export {};
+//# sourceMappingURL=routing.d.ts.map

package/dist/routing.js

@@ -0,0 +1,198 @@
+/**
+ * Header e footer sono condivisi tra le pagine: sono componenti scritti una volta (`src/layout/Header.tsx`, `Footer.tsx`) e il loro
+ * JSON (solo ciò che il codice non può dire: voci di menu, traduzioni) sta a parte, in `config/pages/_shared/`. Un ambito = il file
+ * del codice + il nome del suo JSON.
+ */
+export const WR_SHARED_SCOPES = {
+    header: { file: 'layout/Header.tsx', name: '_shared/header' },
+    footer: { file: 'layout/Footer.tsx', name: '_shared/footer' },
+};
+export const WR_SHARED_FILE = 'config/shared.json';
+/** The name a shared component can have: not the header's or the footer's. */
+const SHARED_NAME = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+const SHARED_RESERVED = Object.keys(WR_SHARED_SCOPES);
+/** The scope name (the JSON's) of the shared component called `name`. */
+export const wrSharedName = (name) => `_shared/${name}`;
+/** Why `name` → `file` cannot be a shared component (null when it can). */
+export function wrSharedProblem(name, file) {
+    if (!SHARED_NAME.test(name))
+        return `"${name}" is not a name a shared component can have: lowercase words with dashes (product-card)`;
+    if (SHARED_RESERVED.includes(name))
+        return `"${name}" is the name of the shared ${name} that every site has`;
+    if (typeof file !== 'string' || !/^(?!\/)(?!.*\.\.)[\w./-]+\.tsx$/.test(file))
+        return `${name}: the file must be a .tsx under src/ (components/ProductCard.tsx)`;
+    if (Object.values(WR_SHARED_SCOPES).some(scope => scope.file === file))
+        return `${name}: ${file} is already the file of a shared component`;
+    return null;
+}
+/**
+ * EVERY shared scope of a site: its header and footer, then the ones it declares (an entry that cannot be one, or that points at the file of
+ * another, is left out: `wrSharedProblem` says why). The ONE list the editor, the operations and the checks read.
+ */
+export function wrSharedScopes(declared) {
+    const scopes = Object.values(WR_SHARED_SCOPES).map(scope => ({ ...scope }));
+    if (!declared || typeof declared !== 'object')
+        return scopes;
+    for (const name of Object.keys(declared).sort()) {
+        const file = declared[name];
+        if (wrSharedProblem(name, file) !== null || scopes.some(scope => scope.file === file))
+            continue;
+        scopes.push({ file, name: wrSharedName(name) });
+    }
+    return scopes;
+}
+/** The path a route is served at: `home` is `/`, `about` is `/about`, `blog/[slug]` is `/blog/:slug`. */
+export function wrRoutePattern(routePath) {
+    if (routePath === 'home')
+        return '/';
+    return `/${routePath.replace(/\[([^\]]+)\]/g, ':$1')}`;
+}
+/**
+ * The name of a page is its route, always: `product/[slug]` is ONE page (one JSON, `config/pages/product/[slug].json`, the one the editor and the
+ * operations write) whatever slug the address has. The slug is for the page's code (`useParams`), never for finding its values.
+ */
+function makePageNameResolver(routePath) {
+    return () => routePath;
+}
+export function wrResolveRoutes(routesFile, registry, lazyRegistry = {}) {
+    const routes = [];
+    const missingComponents = [];
+    for (const [routePath, entry] of Object.entries(routesFile)) {
+        const isLazy = entry.lazy === true;
+        if (isLazy) {
+            const loadComponent = lazyRegistry[entry.component];
+            if (!loadComponent) {
+                missingComponents.push({ routePath, component: entry.component });
+                continue;
+            }
+            routes.push({
+                routePath, pattern: wrRoutePattern(routePath),
+                lazy: true, component: entry.component, loadComponent, resolvePageName: makePageNameResolver(routePath),
+                header: entry.header !== false, footer: entry.footer !== false,
+            });
+            continue;
+        }
+        const Component = registry[entry.component];
+        if (!Component) {
+            missingComponents.push({ routePath, component: entry.component });
+            continue;
+        }
+        routes.push({
+            routePath, pattern: wrRoutePattern(routePath),
+            lazy: false, component: entry.component, Component, resolvePageName: makePageNameResolver(routePath),
+            header: entry.header !== false, footer: entry.footer !== false,
+        });
+    }
+    return { routes, errors: { missingComponents } };
+}
+function nameFromPath(filePath) {
+    return filePath.replace(/^.*\/pages\//, '').replace(/\.tsx?$/, '');
+}
+function checkDuplicate(seen, name, filePath) {
+    if (seen[name] && seen[name] !== filePath) {
+        throw new Error(`wr: duplicate page component name "${name}" (${seen[name]} and ${filePath}). ` +
+            `Component filenames must be unique across src/pages.`);
+    }
+    seen[name] = filePath;
+}
+export function wrBuildRegistry(modules) {
+    const registry = {};
+    const seen = {};
+    for (const filePath in modules) {
+        const mod = modules[filePath];
+        if (!mod?.default)
+            continue;
+        const name = nameFromPath(filePath);
+        checkDuplicate(seen, name, filePath);
+        registry[name] = mod.default;
+    }
+    return registry;
+}
+export function wrBuildLazyRegistry(modules) {
+    const registry = {};
+    const seen = {};
+    for (const filePath in modules) {
+        const name = nameFromPath(filePath);
+        checkDuplicate(seen, name, filePath);
+        registry[name] = modules[filePath];
+    }
+    return registry;
+}
+export function wrPageConfigPath(pageName) {
+    return `config/pages/${pageName}.json`;
+}
+/** The file of a page's component, relative to `src/`: the one place that says where pages live. */
+export function wrPageFilePath(component) {
+    return `pages/${component}.tsx`;
+}
+function unwrapPageConfig(mod) {
+    if (mod && typeof mod === 'object' && 'default' in mod && mod.default !== undefined) {
+        return mod.default;
+    }
+    return mod;
+}
+export function wrBuildPageConfigMap(modules) {
+    const map = {};
+    for (const filePath in modules) {
+        const pageName = filePath.replace(/^.*\/config\/pages\//, '').replace(/\.json$/, '');
+        map[pageName] = unwrapPageConfig(modules[filePath]);
+    }
+    return map;
+}
+/** Per ogni route risolta, registra anche la variante /:lang/... con lo stesso Component/resolvePageName. */
+export function wrExpandRoutesForLangs(routes, langs) {
+    if (!langs)
+        return routes;
+    const langRoutes = routes.map((route) => ({
+        ...route,
+        pattern: `/:lang${route.pattern === '/' ? '' : route.pattern}`,
+    }));
+    return [...routes, ...langRoutes];
+}
+/** Deriva la lingua corrente da un pathname. 'default' per "/", "/it" (= il default), o prefissi non previsti. */
+/**
+ * The key a language has in the JSON (`{ default: …, en: … }`): the site's default language is always `default`, the others are their
+ * code. What the page context calls `lang`, and what every translated field is written under.
+ */
+export function wrLangKey(code, langs) {
+    return langs && code === langs.default ? 'default' : code;
+}
+export function wrExtractLang(pathname, langs) {
+    const [first] = pathname.split('/').filter(Boolean);
+    if (first === langs.default)
+        return 'default';
+    if (first && langs.available.includes(first))
+        return first;
+    return 'default';
+}
+/** Costruisce il path per una data lingua, mantenendo lo stesso slug/segmenti correnti. */
+export function wrBuildLangPath(targetLang, pathname, langs) {
+    const segments = pathname.split('/').filter(Boolean);
+    // A path may carry a language prefix — the default language's too (`/it/about` is `/about`): it is dropped, whichever it is
+    const prefixed = segments.length > 0 && langs.available.includes(segments[0]);
+    const rest = prefixed ? segments.slice(1) : segments;
+    const slugPart = rest.length ? `/${rest.join('/')}` : '';
+    return targetLang === 'default' ? (slugPart || '/') : `/${targetLang}${slugPart}`;
+}
+/** Where an address that leads to no page goes: the home page of the language it is in (`/en/nope` → `/en`, `/nope` → `/`). */
+export function wrHomeOf(pathname, langs) {
+    return langs ? wrBuildLangPath(wrExtractLang(pathname, langs), '/', langs) : '/';
+}
+/** An address that leaves the site: it has a scheme (`https:`, `mailto:`, `tel:`) or starts with `//`. Anything else is the site's own and is a router `Link`, whatever `target` it was given. */
+export const wrIsExternalHref = (href) => /^([a-z][a-z0-9+.-]*:|\/\/)/i.test(href);
+export function wrLocalizeHref(href, lang) {
+    if (!href)
+        return href;
+    if (lang === 'default')
+        return href;
+    if (/^([a-z][a-z0-9+.-]*:)?\/\//i.test(href))
+        return href; // http://, https://, //cdn...
+    if (/^(mailto|tel|sms):/i.test(href))
+        return href;
+    if (href.startsWith('#'))
+        return href;
+    if (href === '/')
+        return `/${lang}`;
+    return `/${lang}${href}`;
+}
+//# sourceMappingURL=routing.js.map

package/dist/seo-react.d.ts

@@ -0,0 +1,20 @@
+import { type WrSeoPage, type WrSeoSite } from './seo.js';
+import { type WrLangConfig } from './routing.js';
+import type { WrPageConfig } from './types';
+/**
+ * The SEO of a page whose texts are not in its JSON but in data it loads (a product's name, description and picture), in the language shown. It goes through the same `WrSeoHead` as every
+ * page, so a tag is written once; what the page's JSON says is kept, and what is given here wins. Pass `undefined` while the data has not come.
+ */
+export declare function useWrSeo(seo: WrSeoPage | undefined): void;
+/**
+ * A page's tags for search engines and social networks, rendered where the page is: React puts `<title>`, `<meta>` and `<link>` in
+ * `<head>` by itself. Both packages use this one, so what the editor shows is what production serves.
+ */
+export declare function WrSeoHead({ site, config, pathname, lang, langs }: {
+    site?: WrSeoSite;
+    config: WrPageConfig | undefined;
+    pathname: string;
+    lang: string;
+    langs?: WrLangConfig;
+}): import("react").JSX.Element;
+//# sourceMappingURL=seo-react.d.ts.map

package/dist/seo-react.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from 'react';
+import { wrSeoPageOf, wrSeoTags } from './seo.js';
+import { wrBuildLangPath } from './routing.js';
+const PROP = { hreflang: 'hrefLang' };
+// What a page whose texts come from data (a product) says about itself, on top of what its JSON says. One page is shown at a time, so it is one value: the page sets it while it is shown, `WrSeoHead` reads it.
+let dynamicSeo;
+const listeners = new Set();
+const publish = (next) => { dynamicSeo = next; listeners.forEach((listener) => listener()); };
+const subscribe = (listener) => { listeners.add(listener); return () => { listeners.delete(listener); }; };
+/**
+ * The SEO of a page whose texts are not in its JSON but in data it loads (a product's name, description and picture), in the language shown. It goes through the same `WrSeoHead` as every
+ * page, so a tag is written once; what the page's JSON says is kept, and what is given here wins. Pass `undefined` while the data has not come.
+ */
+export function useWrSeo(seo) {
+    const key = JSON.stringify(seo ?? null);
+    useEffect(() => {
+        publish(seo);
+        return () => publish(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- `key` is the value of `seo`
+    }, [key]);
+}
+/**
+ * A page's tags for search engines and social networks, rendered where the page is: React puts `<title>`, `<meta>` and `<link>` in
+ * `<head>` by itself. Both packages use this one, so what the editor shows is what production serves.
+ */
+export function WrSeoHead({ site, config, pathname, lang, langs }) {
+    const path = langs ? wrBuildLangPath('default', pathname, langs) : pathname;
+    const dynamic = useSyncExternalStore(subscribe, () => dynamicSeo, () => undefined);
+    const { title, tags, jsonLd } = wrSeoTags({ site, page: { ...wrSeoPageOf(config), ...dynamic }, path, lang, langs });
+    return (_jsxs(_Fragment, { children: [title && _jsx("title", { children: title }), tags.map(({ tag, attrs }) => {
+                const props = Object.fromEntries(Object.entries(attrs).map(([key, value]) => [PROP[key] ?? key, value]));
+                const key = `${tag}:${attrs.name ?? attrs.property ?? `${attrs.rel}:${attrs.hreflang ?? ''}`}`;
+                return tag === 'meta' ? _jsx("meta", { ...props }, key) : _jsx("link", { ...props }, key);
+            }), jsonLd.map((body, index) => _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: body } }, `ld:${index}`))] }));
+}
+//# sourceMappingURL=seo-react.js.map