@webround/core 0.1.8 → 0.3.0

package/dist/base-css.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The few rules every Webround site gets. The first sits under its own classes (a layer below Tailwind's utilities), so any `w-*` (or anything else a person writes) wins. Today:
+ * a text fills the box that holds it (`width: 100%`, never wider than it). Without it a text in a flex row takes the width of its words and does not follow the box when the box is
+ * resized. The editor puts it in the head of the page (`wrHeadPlugin`), so every site has it, new or old; the text editor's own wrapper (`data-wr-editing`) wears it too, so a
+ * text does not change size when it is edited.
+ */
+export declare const WR_BASE_CSS: string;
+//# sourceMappingURL=base-css.d.ts.map

package/dist/base-css.js

@@ -0,0 +1,19 @@
+/**
+ * The few rules every Webround site gets. The first sits under its own classes (a layer below Tailwind's utilities), so any `w-*` (or anything else a person writes) wins. Today:
+ * a text fills the box that holds it (`width: 100%`, never wider than it). Without it a text in a flex row takes the width of its words and does not follow the box when the box is
+ * resized. The editor puts it in the head of the page (`wrHeadPlugin`), so every site has it, new or old; the text editor's own wrapper (`data-wr-editing`) wears it too, so a
+ * text does not change size when it is edited.
+ */
+export const WR_BASE_CSS = [
+    '@layer base { :where([data-wr-type="text"], [data-wr-editing]) { width: 100%; min-width: 0; } }',
+    // The look of a form field that nobody styled: under every class (a layer below the utilities; the attribute selector is stronger than Tailwind's reset of `input`, which is in the same layer), so any `px-*`, `border-*`… a person (or the style panel) writes wins, whatever the order of the CSS
+    '@layer base { [data-wr-type="input"] { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-line, #d4d4d8); border-radius: 0.75rem; background: var(--color-page, transparent); color: var(--color-fg, inherit); }',
+    ' [data-wr-type="input"]::placeholder { color: var(--color-muted, #71717a); }',
+    ' [data-wr-type="input"]:focus-visible { outline: 2px solid var(--color-accent, currentColor); outline-offset: 1px; } }',
+    // A form that went shows its confirmation (a direct child of the form) in place of everything else. NOT in the base layer: a part that has a `flex` of its own would
+    // beat a `display: none` there, and the form would stay on screen after it was sent.
+    '[data-wr-type="form-success"] { display: none; }',
+    'form[data-wr-sent] > [data-wr-type="form-success"] { display: block; }',
+    'form[data-wr-sent] > :not([data-wr-type="form-success"]) { display: none; }',
+].join(' ');
+//# sourceMappingURL=base-css.js.map

package/dist/components/WrAltcha.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type WrAltchaViewProps } from '../form-react';
+/** The "I am not a robot" proof of work: put it inside a `WrForm`; the form cannot be sent until it is solved. */
+export declare function WrAltcha(props: WrAltchaViewProps): React.ReactElement | null;
+//# sourceMappingURL=WrAltcha.d.ts.map

package/dist/components/WrAltcha.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WrAltchaView } from '../form-react';
+/** The "I am not a robot" proof of work: put it inside a `WrForm`; the form cannot be sent until it is solved. */
+export function WrAltcha(props) {
+    return _jsx(WrAltchaView, { ...props });
+}
+//# sourceMappingURL=WrAltcha.js.map

package/dist/components/WrButton.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel, wrLocalized } from '../localized';
+import { useWrPage } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrSubmitGate } from '../form-react';
+export function WrButton({ id, children, ...props }) {
+    const config = useWrPage(id);
+    const { lang } = useWrApp();
+    const rawContent = config?.content;
+    const content = rawContent !== undefined ? (wrLocalized(rawContent, lang) ?? '') : undefined;
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    // A button that submits a form waits for the form to be ready (the fields, the proof, the consent)
+    const gate = useWrSubmitGate();
+    const disabled = props.disabled ?? (gate && (props.type ?? 'submit') === 'submit' ? gate.disabled : undefined);
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsx("button", { "data-wr-id": id, "data-wr-type": "button", ...props, disabled: disabled, "aria-label": ariaLabel, children: content !== undefined ? _jsx("span", { dangerouslySetInnerHTML: { __html: content } }) : children }));
+}
+//# sourceMappingURL=WrButton.js.map

package/dist/components/WrForm.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type WrFormViewProps } from '../form-react';
+type WrFormProps = Omit<WrFormViewProps, 'lang' | 'config' | 'transport'>;
+/** The published site's form: it sends to the Webround backend (where is in the site's env, see `wrSiteEnv`). */
+export declare function WrForm(props: WrFormProps): React.ReactElement | null;
+export {};
+//# sourceMappingURL=WrForm.d.ts.map

package/dist/components/WrForm.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useWrPage } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { wrRealTransport } from '../form';
+import { WrFormView } from '../form-react';
+import { wrSiteEnv } from '../site-env';
+/** The published site's form: it sends to the Webround backend (where is in the site's env, see `wrSiteEnv`). */
+export function WrForm(props) {
+    const config = useWrPage(props.id);
+    const { lang } = useWrApp();
+    const transport = useMemo(() => wrRealTransport(wrSiteEnv()), []);
+    return _jsx(WrFormView, { ...props, lang: lang, config: config, transport: transport });
+}
+//# sourceMappingURL=WrForm.js.map

package/dist/components/WrFormPrivacy.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type WrFormPrivacyViewProps } from '../form-react';
+export declare function WrFormPrivacy(props: WrFormPrivacyViewProps): React.ReactElement;
+//# sourceMappingURL=WrFormPrivacy.d.ts.map

package/dist/components/WrFormPrivacy.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WrFormPrivacyView } from '../form-react';
+export function WrFormPrivacy(props) {
+    return _jsx(WrFormPrivacyView, { ...props });
+}
+//# sourceMappingURL=WrFormPrivacy.js.map

package/dist/components/WrFormSuccess.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type WrFormSuccessViewProps } from '../form-react';
+export declare function WrFormSuccess(props: WrFormSuccessViewProps): React.ReactElement;
+//# sourceMappingURL=WrFormSuccess.d.ts.map

package/dist/components/WrFormSuccess.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WrFormSuccessView } from '../form-react';
+export function WrFormSuccess(props) {
+    return _jsx(WrFormSuccessView, { ...props });
+}
+//# sourceMappingURL=WrFormSuccess.js.map

package/dist/components/WrIframe.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface WrIframeOwnProps {
+    id: string;
+}
+type WrIframeProps = WrIframeOwnProps & Omit<React.ComponentPropsWithoutRef<'iframe'>, 'id'>;
+export declare function WrIframe({ id, loading, ...props }: WrIframeProps): React.ReactElement;
+export {};
+//# sourceMappingURL=WrIframe.d.ts.map

package/dist/components/WrIframe.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel } from '../localized';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrPage } from '../context/WrPageContext';
+export function WrIframe({ id, loading = 'lazy', ...props }) {
+    const config = useWrPage(id);
+    const { lang } = useWrApp();
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsx("iframe", { loading: loading, "data-wr-id": id, "data-wr-type": "iframe", ...props, "aria-label": ariaLabel }));
+}
+//# sourceMappingURL=WrIframe.js.map

package/dist/components/WrImage.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface WrImageOwnProps {
+    id: string;
+    objectFit?: React.CSSProperties['objectFit'];
+}
+type WrImageProps = WrImageOwnProps & Omit<React.ComponentPropsWithoutRef<'img'>, 'id'>;
+export declare function WrImage({ id, objectFit, style, alt: codeAlt, ...props }: WrImageProps): React.ReactElement;
+export {};
+//# sourceMappingURL=WrImage.d.ts.map

package/dist/components/WrImage.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel, wrLocalized } from '../localized';
+import { useWrPage } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+export function WrImage({ id, objectFit, style, alt: codeAlt, ...props }) {
+    const config = useWrPage(id);
+    const { lang } = useWrApp();
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsx("img", { alt: wrLocalized(config?.alt, lang) ?? codeAlt ?? '', "data-wr-id": id, "data-wr-type": "image", style: { objectFit, ...style }, ...props, "aria-label": ariaLabel }));
+}
+//# sourceMappingURL=WrImage.js.map

package/dist/components/WrInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type WrInputViewProps } from '../form-react';
+type WrInputProps = Omit<WrInputViewProps, 'lang' | 'config' | 'type'> & {
+    type?: WrInputViewProps['type'];
+};
+export declare function WrInput({ type, ...props }: WrInputProps): React.ReactElement | null;
+export {};
+//# sourceMappingURL=WrInput.d.ts.map

package/dist/components/WrInput.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWrPage } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { WrInputView } from '../form-react';
+export function WrInput({ type = 'text', ...props }) {
+    const config = useWrPage(props.id);
+    const { lang } = useWrApp();
+    return _jsx(WrInputView, { ...props, type: type, lang: lang, config: config });
+}
+//# sourceMappingURL=WrInput.js.map

package/dist/components/WrLangSelector.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type WrLangConfig } from '../i18n/langs';
+interface WrLangOption {
+    code: string;
+    label: string;
+    icon: string;
+    active: boolean;
+    onSelect: () => void;
+}
+interface WrLangSelectorOwnProps {
+    langs: WrLangConfig;
+    children?: (opts: WrLangOption[]) => React.ReactNode;
+}
+type WrLangSelectorProps = WrLangSelectorOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+export declare function WrLangSelector({ langs, children, ...props }: WrLangSelectorProps): React.ReactElement;
+export {};
+//# sourceMappingURL=WrLangSelector.d.ts.map

package/dist/components/WrLangSelector.js

@@ -0,0 +1,27 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNavigate } from 'react-router';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrLangFromPath } from '../hooks/useWrLangFromPath';
+import { buildLangPath } from '../i18n/langs';
+import { langOptions } from '../i18n/lang-code';
+export function WrLangSelector({ langs, children, ...props }) {
+    const { lang } = useWrApp();
+    const { pageSlug } = useWrLangFromPath(langs);
+    const navigate = useNavigate();
+    const codes = [langs.default, ...langs.available];
+    const options = codes.map(code => {
+        const resolvedLang = code === langs.default ? 'default' : code;
+        const opt = langOptions[code];
+        return {
+            code,
+            label: opt?.label ?? code,
+            icon: opt?.icon ?? '🏳️',
+            active: lang === resolvedLang,
+            onSelect: () => navigate(buildLangPath(code, pageSlug, langs)),
+        };
+    });
+    if (children)
+        return _jsx(_Fragment, { children: children(options) });
+    return (_jsx("div", { "data-wr-type": "lang-selector", ...props, children: options.map(o => (_jsxs("button", { type: "button", "aria-current": o.active ? 'true' : undefined, disabled: o.active, onClick: o.onSelect, children: [_jsx("span", { "aria-hidden": true, children: o.icon }), " ", o.label] }, o.code))) }));
+}
+//# sourceMappingURL=WrLangSelector.js.map

package/dist/components/WrLangSync.d.ts

@@ -0,0 +1,6 @@
+import type { WrLangConfig } from '../i18n/langs';
+/** Tiene WrAppContext.lang sincronizzato col path a ogni navigazione. Va montato dentro WrAppProvider, sopra le route. */
+export declare function WrLangSync({ langs }: {
+    langs: WrLangConfig;
+}): null;
+//# sourceMappingURL=WrLangSync.d.ts.map

package/dist/components/WrLangSync.js

@@ -0,0 +1,12 @@
+// packages/core/src/components/WrLangSync.tsx
+import { useEffect } from 'react';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrLangFromPath } from '../hooks/useWrLangFromPath';
+/** Tiene WrAppContext.lang sincronizzato col path a ogni navigazione. Va montato dentro WrAppProvider, sopra le route. */
+export function WrLangSync({ langs }) {
+    const { lang } = useWrLangFromPath(langs);
+    const { setLang } = useWrApp();
+    useEffect(() => { setLang(lang); }, [lang, setLang]);
+    return null;
+}
+//# sourceMappingURL=WrLangSync.js.map

package/dist/components/WrLink.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { wrAriaLabel, wrLocalized } from '../localized';
+import { Link } from 'react-router-dom';
+import { useWrPage } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { wrIsExternalHref, wrLocalizeHref } from '../routing';
+export function WrLink({ id, href = '#', children, target, rel, ...props }) {
+    const config = useWrPage(id);
+    const { lang } = useWrApp();
+    const rawContent = config?.content;
+    const content = rawContent !== undefined ? (wrLocalized(rawContent, lang) ?? '') : undefined;
+    const inner = content !== undefined ? _jsx("span", { dangerouslySetInnerHTML: { __html: content } }) : children;
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    // An address of the site is a router `Link` and nothing else (a `target` it was given is not used); only one that leaves the site is an `<a>`
+    const external = wrIsExternalHref(href);
+    if (external) {
+        return (_jsx("a", { href: href, target: target, rel: rel, "data-wr-id": id, "data-wr-type": "link", ...props, "aria-label": ariaLabel, children: inner }));
+    }
+    return (_jsx(Link, { to: wrLocalizeHref(href, lang), "data-wr-id": id, "data-wr-type": "link", ...props, "aria-label": ariaLabel, children: inner }));
+}
+//# sourceMappingURL=WrLink.js.map

package/dist/components/WrNav.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { WrNavItem } from '../types';
+interface WrNavOwnProps {
+    id: string;
+    /** What the menu draws: its items, the language, and what the nav was asked to show besides (`accountMenu`: the visitor's account in the header; `cartMenu`: their cart; the site draws both: this package knows nothing of customers). */
+    children: (items: WrNavItem[], lang: string, options: WrNavOptions) => React.ReactNode;
+    /** The button that switches the site between its light and dark theme (it shows only if the site has a dark theme). */
+    themeToggle?: boolean;
+    /** The visitor's account in the header (an icon with a sign-in or its shortcuts): the site draws it, this only says whether it is asked for. */
+    accountMenu?: boolean;
+    /** The visitor's cart in the header (an icon with how many things are in it): the site draws it, this only says whether it is asked for. */
+    cartMenu?: boolean;
+}
+/**
+ * What the nav was asked to show, given to what draws the menu. `ariaLabel` is the name of the menu in the language shown (the editor's, or the `aria-label` written in the code): it goes on the `<nav>` that the
+ * menu draws, because on this box (a `div`) a name is ignored by screen readers.
+ */
+export interface WrNavOptions {
+    accountMenu: boolean;
+    cartMenu: boolean;
+    ariaLabel: string | undefined;
+}
+type WrNavProps = WrNavOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+export declare function WrNav({ id, children, themeToggle, accountMenu, cartMenu, ...props }: WrNavProps): React.ReactElement;
+export {};
+//# sourceMappingURL=WrNav.d.ts.map

package/dist/components/WrNav.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { wrAriaLabel } from '../localized';
+import { useWrPage } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { WrThemeToggle } from './WrThemeToggle';
+export function WrNav({ id, children, themeToggle, accountMenu, cartMenu, ...props }) {
+    const config = useWrPage(id);
+    const { lang } = useWrApp();
+    const items = config?.items ?? [];
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { "data-wr-id": id, "data-wr-type": "nav", ...props, "aria-label": undefined, children: [children(items, lang, { accountMenu: accountMenu === true, cartMenu: cartMenu === true, ariaLabel }), themeToggle && _jsx(WrThemeToggle, {})] }));
+}
+//# sourceMappingURL=WrNav.js.map

package/dist/{WrSection.d.ts → components/WrSection.d.ts}

@@ -1,9 +1,9 @@
+import type { WrSectionTag } from '../kinds';
 import React from 'react';
-type AllowedTag = 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'nav';
 interface WrSectionOwnProps {
     id: string;
-    tag?: AllowedTag;
-    children: React.ReactNode;
+    tag?: WrSectionTag;
+    children?: React.ReactNode;
 }
 type WrSectionProps = WrSectionOwnProps & Omit<React.HTMLAttributes<HTMLElement>, 'id'>;
 export declare function WrSection({ id, tag: Tag, children, ...props }: WrSectionProps): React.ReactElement;

package/dist/components/WrShared.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentType, type ReactNode } from 'react';
+import type { WrPageConfig } from '../types';
+/** What a shared component needs to read its JSON: the config of every scope, and the provider that hands one to what is inside. */
+export interface WrSharedCtx {
+    pageConfigMap: Record<string, WrPageConfig>;
+    ScopeProvider: ComponentType<{
+        config: WrPageConfig;
+        pageName: string;
+        children: ReactNode;
+    }>;
+}
+export declare const WrSharedContext: import("react").Context<WrSharedCtx | null>;
+/**
+ * The root of a shared component (a card, a banner: anything used on more than one page, like the header and the footer): what is inside
+ * reads its values from the component's own JSON, `config/pages/_shared/<name>.json`, whatever page it is on. The component is declared
+ * in `src/config/shared.json`. No box of its own.
+ */
+export declare function WrShared({ name, children }: {
+    name: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=WrShared.d.ts.map

package/dist/components/WrShared.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { wrSharedName } from '../routing';
+export const WrSharedContext = createContext(null);
+/**
+ * The root of a shared component (a card, a banner: anything used on more than one page, like the header and the footer): what is inside
+ * reads its values from the component's own JSON, `config/pages/_shared/<name>.json`, whatever page it is on. The component is declared
+ * in `src/config/shared.json`. No box of its own.
+ */
+export function WrShared({ name, children }) {
+    const shared = useContext(WrSharedContext);
+    if (!shared)
+        return _jsx(_Fragment, { children: children });
+    const scope = wrSharedName(name);
+    const { ScopeProvider, pageConfigMap } = shared;
+    return _jsx(ScopeProvider, { config: pageConfigMap[scope] ?? {}, pageName: scope, children: children });
+}
+//# sourceMappingURL=WrShared.js.map

package/dist/components/WrText.d.ts

@@ -0,0 +1,11 @@
+import type { WrTextTag } from '../kinds';
+import React from 'react';
+interface WrTextOwnProps {
+    id: string;
+    tag?: WrTextTag;
+    html?: string;
+}
+type WrTextProps = WrTextOwnProps & Omit<React.HTMLAttributes<HTMLElement>, 'id' | 'dangerouslySetInnerHTML'>;
+export declare function WrText({ id, tag, html: fallback, ...props }: WrTextProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=WrText.d.ts.map

package/dist/components/WrText.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { wrLocalized } from '../localized';
+import { useWrPage } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { WrTextView } from '../text-react';
+export function WrText({ id, tag, html: fallback = '', ...props }) {
+    const config = useWrPage(id);
+    const { lang } = useWrApp();
+    const content = config?.content !== undefined
+        ? (wrLocalized(config.content, lang) ?? '')
+        : fallback;
+    return _jsx(WrTextView, { ...props, id: id, tag: tag, html: content });
+}
+//# sourceMappingURL=WrText.js.map

package/dist/components/WrThemeToggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * The button that switches a site with two themes between them, and keeps the choice of the visitor (the page starts from it: see `wrThemeStartScript`). It is in `WrNav` when the nav
+ * asks for it (`themeToggle`) and it shows only if the site HAS a dark theme: a toggle that does nothing is not drawn.
+ */
+export declare function WrThemeToggle({ className }: {
+    className?: string;
+}): React.ReactElement | null;
+//# sourceMappingURL=WrThemeToggle.d.ts.map

package/dist/components/WrThemeToggle.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { WR_THEME_DARK_CLASS, WR_THEME_STORAGE_KEY, wrThemeSiteHasDark } from '../theme';
+import { useWrApp } from '../context/WrAppContext';
+const LABELS = {
+    en: { toDark: 'Switch to the dark theme', toLight: 'Switch to the light theme' },
+    it: { toDark: 'Attiva il tema scuro', toLight: 'Attiva il tema chiaro' },
+};
+const current = () => (document.documentElement.classList.contains(WR_THEME_DARK_CLASS) ? 'dark' : 'light');
+/**
+ * The button that switches a site with two themes between them, and keeps the choice of the visitor (the page starts from it: see `wrThemeStartScript`). It is in `WrNav` when the nav
+ * asks for it (`themeToggle`) and it shows only if the site HAS a dark theme: a toggle that does nothing is not drawn.
+ */
+export function WrThemeToggle({ className = '' }) {
+    const { lang } = useWrApp();
+    const [available, setAvailable] = useState(false);
+    const [theme, setTheme] = useState('light');
+    useEffect(() => {
+        setAvailable(wrThemeSiteHasDark(document));
+        setTheme(current());
+        // The class can change from elsewhere (another toggle, the code): the button says what is on
+        const observer = new MutationObserver(() => setTheme(current()));
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        // The stylesheet changes while the site is edited (the dark theme is turned on or off): the button is there when it can do something, and only then
+        const styles = new MutationObserver(() => setAvailable(wrThemeSiteHasDark(document)));
+        styles.observe(document.head, { childList: true, subtree: true, characterData: true, attributes: true });
+        return () => { observer.disconnect(); styles.disconnect(); };
+    }, []);
+    if (!available)
+        return null;
+    const next = theme === 'dark' ? 'light' : 'dark';
+    const labels = LABELS[lang] ?? LABELS.en;
+    return (_jsx("button", { type: "button", "data-wr-theme-toggle": "", "aria-label": next === 'dark' ? labels.toDark : labels.toLight, onClick: () => {
+            document.documentElement.classList.toggle(WR_THEME_DARK_CLASS, next === 'dark');
+            try {
+                localStorage.setItem(WR_THEME_STORAGE_KEY, next);
+            }
+            catch { /* storage blocked: the choice lasts for this visit */ }
+        }, className: `inline-flex items-center justify-center size-9 rounded-full opacity-70 hover:opacity-100 hover:bg-current/10 transition ${className}`, children: _jsx("svg", { viewBox: "0 0 24 24", className: "size-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: theme === 'dark'
+                ? _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" })] })
+                : _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }) }));
+}
+//# sourceMappingURL=WrThemeToggle.js.map

package/dist/components/WrVideo.js

@@ -0,0 +1,61 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel } from '../localized';
+import { useWrApp } from '../context/WrAppContext';
+import { useEffect, useRef } from 'react';
+import { useWrPage } from '../context/WrPageContext';
+function isHlsSrc(src) {
+    return src.endsWith('.m3u8') || src.includes('.m3u8?');
+}
+export function WrVideo({ id, src, autoPlay = false, muted = false, loop = false, controls = false, style, ...props }) {
+    const config = useWrPage(id);
+    const { lang } = useWrApp();
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    const videoRef = useRef(null);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !src)
+            return;
+        const onEnded = () => {
+            if (loop) {
+                video.currentTime = 0;
+                video.play().catch(() => { });
+            }
+        };
+        video.addEventListener('ended', onEnded);
+        let hlsInstance = null;
+        let cancelled = false;
+        if (isHlsSrc(src)) {
+            import('hls.js').then(({ default: Hls }) => {
+                if (cancelled || !video)
+                    return;
+                if (Hls.isSupported()) {
+                    const hls = new Hls({ enableWorker: true });
+                    hlsInstance = hls;
+                    hls.loadSource(src);
+                    hls.attachMedia(video);
+                    hls.on(Hls.Events.MANIFEST_PARSED, () => { if (autoPlay)
+                        video.play().catch(() => { }); });
+                }
+                else {
+                    video.src = src;
+                    if (autoPlay)
+                        video.play().catch(() => { });
+                }
+            });
+        }
+        else {
+            video.src = src;
+            if (autoPlay)
+                video.play().catch(() => { });
+        }
+        return () => {
+            cancelled = true;
+            hlsInstance?.destroy();
+            video.removeEventListener('ended', onEnded);
+        };
+    }, [src, autoPlay, loop]);
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsx("video", { ref: videoRef, ...props, muted: muted, controls: controls, "aria-label": ariaLabel, "data-wr-id": id, "data-wr-type": "video", style: style }));
+}
+//# sourceMappingURL=WrVideo.js.map

package/dist/context/WrAppContext.d.ts

@@ -0,0 +1,40 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type NavigateFunction } from 'react-router-dom';
+import { wrBuildRegistry, wrBuildLazyRegistry, wrBuildPageConfigMap, type WrRoutesFile, type WrLangConfig, type WrSharedFile } from '../routing';
+import type { WrPageConfig } from '../types';
+import { LangCode } from '../lang-codes';
+import type { WrSeoSite } from '../seo';
+export declare function useWrApp(): {
+    lang: "default" | "en" | "it" | "id" | "is" | "hr" | "th" | "tr" | "no" | "af" | "am" | "sq" | "ar" | "hy" | "az" | "eu" | "be" | "bn" | "bs" | "bg" | "ca" | "ceb" | "ny" | "zh" | "co" | "cs" | "da" | "nl" | "sjn" | "eo" | "et" | "tl" | "fo" | "fj" | "fi" | "fr" | "fy" | "gl" | "ka" | "de" | "el" | "gu" | "haw" | "ht" | "ha" | "he" | "hi" | "hmn" | "hu" | "ig" | "iu" | "iku" | "ga" | "ja" | "jw" | "kk" | "kn" | "km" | "ko" | "kok" | "ky" | "ku" | "ckb" | "sdh" | "lo" | "lv" | "lt" | "lb" | "mk" | "mg" | "ms" | "ml" | "mt" | "mr" | "mn" | "mi" | "my" | "ne" | "pap" | "fa" | "pl" | "pt" | "pa" | "ps" | "otq" | "ro" | "ru" | "sm" | "gd" | "sr" | "sr-LA" | "sd" | "si" | "sk" | "sl" | "sn" | "st" | "so" | "es" | "su" | "sw" | "sv" | "ty" | "ta" | "tg" | "te" | "bo" | "to" | "uk" | "ur" | "uz" | "vi" | "cy" | "xh" | "yi" | "yo" | "yua" | "yue" | "zu";
+    setLang: (lang: LangCode) => void;
+};
+type EagerPageModules = Parameters<typeof wrBuildRegistry>[0];
+type LazyPageModules = Parameters<typeof wrBuildLazyRegistry>[0];
+type PageConfigModules = Parameters<typeof wrBuildPageConfigMap>[0];
+export declare function WrAppProvider({ routesFile, eagerModules, lazyModules, configModules, langs, initialLang, lazyFallback, onRouterReady, PageProvider, Header, Footer, seo, children, }: {
+    routesFile: WrRoutesFile;
+    eagerModules: EagerPageModules;
+    lazyModules: LazyPageModules;
+    configModules: PageConfigModules;
+    /** Lingue del sito. Se omesso, il routing multilingua è disattivato e lang resta 'default'. */
+    langs?: WrLangConfig;
+    /** Usato solo come fallback quando `langs` non è passato. */
+    initialLang?: LangCode;
+    lazyFallback?: ComponentType;
+    onRouterReady?: (navigate: NavigateFunction) => void;
+    PageProvider?: ComponentType<{
+        config: WrPageConfig;
+        pageName: string;
+        children: ReactNode;
+    }>;
+    /** Header e footer del sito: su ogni pagina, salvo `header: false` / `footer: false` nella sua voce di routes.json. */
+    Header?: ComponentType;
+    Footer?: ComponentType;
+    /** What is the same for the whole site, for search engines (`config/seo.json`). */
+    seo?: WrSeoSite;
+    /** The shared components of the site (`config/shared.json`). Only the editor needs it (to know their files): here it is accepted so the same `main.tsx` works with both packages. */
+    shared?: WrSharedFile;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=WrAppContext.d.ts.map