@webround/editor 0.0.0-stage → 0.2.0

package/dist/check/types.js

@@ -0,0 +1,22 @@
+// The neutral tree: what a rule sees. Two producers fill it (the code, the DOM); the rules never know which one did.
+/** The page name an issue about the whole site carries (the way `_shared/header` names what is not a page). */
+export const CHECK_SITE = '_site';
+/**
+ * The identity of a problem: its rule, where it is (a page, or `_shared` for the header and footer, which every page shows), and what it is about.
+ * NOT the words (a count in them changes) nor the languages (one decision covers them all).
+ */
+export function issueKey(parts) {
+    const fix = parts.fix ? `${parts.fix.kind}:${'field' in parts.fix ? parts.fix.field : parts.fix.scope}` : '';
+    return [parts.rule, parts.page, parts.subject ?? '', fix].join('|');
+}
+/** Depth-first, in document order. */
+export function walk(nodes, visit) {
+    for (const node of nodes) {
+        visit(node);
+        walk(node.children, visit);
+    }
+}
+export function stripTags(html) {
+    return html.replace(/<[^>]*>/g, ' ').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim();
+}
+//# sourceMappingURL=types.js.map

package/dist/components/WrAltcha.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type WrAltchaViewProps } from '@webround/core/form-react';
+/** The proof in the editor runs in test mode (the form's transport says so): the checkbox can be clicked and nothing is asked of the backend. */
+export declare function WrAltcha(props: Omit<WrAltchaViewProps, 'rootProps'>): React.ReactElement | null;
+//# sourceMappingURL=WrAltcha.d.ts.map

package/dist/components/WrAltcha.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WrAltchaView } from '@webround/core/form-react';
+import { wrInteractive } from '../interactive';
+/** The proof in the editor runs in test mode (the form's transport says so): the checkbox can be clicked and nothing is asked of the backend. */
+export function WrAltcha(props) {
+    return _jsx(WrAltchaView, { ...props, rootProps: wrInteractive });
+}
+//# sourceMappingURL=WrAltcha.js.map

package/dist/components/WrButton.d.ts

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

package/dist/components/WrButton.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel, wrLocalized, wrSetLocalized } from '@webround/core/localized';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrMessage } from '../hooks/useWrMessage';
+import { wrSavePage } from '../save';
+import { useWrPage, useWrPageMeta, useWrPageUpdate } from '../context/WrPageContext';
+import { wrInteractive } from '../interactive';
+import { useWrSubmitGate } from '@webround/core/form-react';
+export function WrButton({ id, children, ...props }) {
+    const config = useWrPage(id);
+    const updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    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);
+    useWrMessage('wr:button:update', id, async (msg) => {
+        const mergedContent = msg.content !== undefined ? wrSetLocalized(rawContent, lang, msg.content) : rawContent;
+        const patch = {
+            ...(mergedContent !== undefined ? { content: mergedContent } : {}),
+            ...(msg.ariaLabel !== undefined ? { ariaLabel: wrSetLocalized(config?.ariaLabel, lang, msg.ariaLabel) } : {}),
+            ...(msg.hidden !== undefined ? { hidden: msg.hidden } : {}),
+        };
+        updateConfig(id, patch);
+        await wrSavePage(pageName, id, { ...config, ...patch });
+    });
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsx("button", { "data-wr-id": id, "data-wr-type": "button", ...wrInteractive, ...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,6 @@
+import React from 'react';
+import { type WrFormViewProps } from '@webround/core/form-react';
+type WrFormProps = Omit<WrFormViewProps, 'lang' | 'config' | 'transport'>;
+export declare function WrForm(props: WrFormProps): React.ReactElement | null;
+export {};
+//# sourceMappingURL=WrForm.d.ts.map

package/dist/components/WrForm.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { wrSetLocalized } from '@webround/core/localized';
+import { WR_FORM_MESSAGE_CODES } from '@webround/core/form';
+import { WrFormView } from '@webround/core/form-react';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrPage, useWrPageMeta, useWrPageUpdate } from '../context/WrPageContext';
+import { useWrMessage } from '../hooks/useWrMessage';
+import { wrSavePage } from '../save';
+/** In the editor nothing is sent: after a test send the form stays on its confirmation (where it can be edited) until its "Back to the form" button is pressed (see `WrFormSuccess`). Altcha runs with a mock challenge. */
+const SIMULATED = { mock: true, send: async () => null };
+export function WrForm(props) {
+    const { id } = props;
+    const config = useWrPage(id);
+    const updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    const { lang } = useWrApp();
+    useWrMessage('wr:form:update', id, async (msg) => {
+        const patch = { ...(msg.hidden !== undefined ? { hidden: msg.hidden } : {}) };
+        for (const code of WR_FORM_MESSAGE_CODES) {
+            const key = `msg-${code}`;
+            if (msg[key] !== undefined)
+                patch[key] = wrSetLocalized(config?.[key], lang, msg[key]);
+        }
+        updateConfig(id, patch);
+        await wrSavePage(pageName, id, { ...config, ...patch });
+    });
+    return _jsx(WrFormView, { ...props, lang: lang, config: config, transport: SIMULATED });
+}
+//# sourceMappingURL=WrForm.js.map

package/dist/components/WrFormPrivacy.d.ts

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

package/dist/components/WrFormPrivacy.js

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

package/dist/components/WrFormSuccess.d.ts

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

package/dist/components/WrFormSuccess.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WrFormSuccessView, useWrForm } from '@webround/core/form-react';
+// Only in the editor: the form sends nothing, so after a test send it stays on this confirmation (where it can be written and styled) until this button is pressed.
+const BACK_STYLE = {
+    display: 'block', margin: '0.75rem auto 0', padding: '0.25rem 0.75rem', borderRadius: '9999px', border: 'none', cursor: 'pointer',
+    fontSize: '12px', fontWeight: 600, background: 'var(--wr-accent, #4f46e5)', color: 'var(--wr-on-accent, #fff)',
+};
+export function WrFormSuccess(props) {
+    const form = useWrForm();
+    return (_jsxs(WrFormSuccessView, { ...props, children: [props.children, _jsx("button", { type: "button", "data-wr-editor-ui": true, style: BACK_STYLE, onClick: () => form?.reset(), children: "Back to the form" })] }));
+}
+//# sourceMappingURL=WrFormSuccess.js.map

package/dist/components/WrIframe.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface WrIframeOwnProps {
+    id: string;
+}
+type WrIframeProps = WrIframeOwnProps & Omit<React.ComponentPropsWithoutRef<'iframe'>, 'id'>;
+/**
+ * Same props and same element as the core's WrIframe. It is interactive (see interactive.ts): the page inside takes the clicks, as it
+ * does on the site, and the iframe is selected from the handle that appears when the pointer is over it, like a link.
+ */
+export declare function WrIframe({ id, loading, ...props }: WrIframeProps): React.ReactElement;
+export {};
+//# sourceMappingURL=WrIframe.d.ts.map

package/dist/components/WrIframe.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel, wrSetLocalized } from '@webround/core/localized';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrPage, useWrPageMeta, useWrPageUpdate } from '../context/WrPageContext';
+import { useWrMessage } from '../hooks/useWrMessage';
+import { wrSavePage } from '../save';
+import { wrInteractive } from '../interactive';
+/**
+ * Same props and same element as the core's WrIframe. It is interactive (see interactive.ts): the page inside takes the clicks, as it
+ * does on the site, and the iframe is selected from the handle that appears when the pointer is over it, like a link.
+ */
+export function WrIframe({ id, loading = 'lazy', ...props }) {
+    const config = useWrPage(id);
+    const updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    const { lang } = useWrApp();
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    useWrMessage('wr:iframe:update', id, async (msg) => {
+        const patch = {
+            ...(msg.ariaLabel !== undefined ? { ariaLabel: wrSetLocalized(config?.ariaLabel, lang, msg.ariaLabel) } : {}),
+            ...(msg.hidden !== undefined ? { hidden: msg.hidden } : {}),
+        };
+        updateConfig(id, patch);
+        await wrSavePage(pageName, id, { ...config, ...patch });
+    });
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsx("iframe", { loading: loading, "data-wr-id": id, "data-wr-type": "iframe", ...wrInteractive, ...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,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel, wrLocalized, wrSetLocalized } from '@webround/core/localized';
+import { useWrPage, useWrPageMeta, useWrPageUpdate } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrMessage } from '../hooks/useWrMessage';
+import { wrSavePage } from '../save';
+export function WrImage({ id, objectFit, style, alt: codeAlt, ...props }) {
+    const config = useWrPage(id);
+    const updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    const { lang } = useWrApp();
+    const rawAlt = config?.alt;
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    useWrMessage('wr:image:update', id, async (msg) => {
+        const newAlt = msg.alt !== undefined ? wrSetLocalized(rawAlt, lang, msg.alt) : (rawAlt ?? {});
+        const patch = {
+            alt: newAlt,
+            ...(msg.ariaLabel !== undefined ? { ariaLabel: wrSetLocalized(config?.ariaLabel, lang, msg.ariaLabel) } : {}),
+            ...(msg.hidden !== undefined ? { hidden: msg.hidden } : {}),
+        };
+        updateConfig(id, patch);
+        await wrSavePage(pageName, id, { ...config, ...patch });
+    });
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsx("img", { alt: wrLocalized(rawAlt, 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 '@webround/core/form-react';
+type WrInputProps = Omit<WrInputViewProps, 'lang' | 'config' | 'type' | 'rootProps'> & {
+    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,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel, wrSetLocalized } from '@webround/core/localized';
+import { WrInputView } from '@webround/core/form-react';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrPage, useWrPageMeta, useWrPageUpdate } from '../context/WrPageContext';
+import { useWrMessage } from '../hooks/useWrMessage';
+import { wrInteractive } from '../interactive';
+import { wrSavePage } from '../save';
+// Typing into it works in the preview (that is how a form is tried); it is selected from its handle, as a link or a button is.
+export function WrInput({ type = 'text', ...props }) {
+    const { id } = props;
+    const config = useWrPage(id);
+    const updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    const { lang } = useWrApp();
+    useWrMessage('wr:input:update', id, async (msg) => {
+        const patch = {
+            ...(msg.label !== undefined ? { label: wrSetLocalized(config?.label, lang, msg.label) } : {}),
+            ...(msg.placeholder !== undefined ? { placeholder: wrSetLocalized(config?.placeholder, lang, msg.placeholder) } : {}),
+            ...(msg.ariaLabel !== undefined ? { ariaLabel: wrSetLocalized(config?.ariaLabel, lang, msg.ariaLabel) } : {}),
+            ...(msg.hidden !== undefined ? { hidden: msg.hidden } : {}),
+        };
+        updateConfig(id, patch);
+        await wrSavePage(pageName, id, { ...config, ...patch });
+    });
+    const view = config && { ...config, ariaLabel: wrAriaLabel(config, undefined, lang) };
+    return _jsx(WrInputView, { ...props, type: type, lang: lang, config: view, rootProps: wrInteractive });
+}
+//# sourceMappingURL=WrInput.js.map

package/dist/components/WrLink.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface WrLinkOwnProps {
+    id: string;
+    href?: string;
+    children: React.ReactNode;
+}
+type WrLinkProps = WrLinkOwnProps & Omit<React.ComponentPropsWithoutRef<'a'>, 'id'>;
+export declare function WrLink({ id, href, children, target, rel, ...props }: WrLinkProps): React.ReactElement;
+export {};
+//# sourceMappingURL=WrLink.d.ts.map

package/dist/components/WrLink.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { wrAriaLabel, wrLocalized, wrSetLocalized } from '@webround/core/localized';
+import { Link } from 'react-router-dom';
+import { useWrPage, useWrPageUpdate, useWrPageMeta } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrMessage } from '../hooks/useWrMessage';
+import { wrSavePage } from '../save';
+import { wrIsExternalHref, wrLocalizeHref } from '@webround/core/routing';
+import { wrInteractive } from '../interactive';
+export function WrLink({ id, href = '#', children, target, rel, ...props }) {
+    const config = useWrPage(id);
+    const updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    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);
+    useWrMessage('wr:link:update', id, async (msg) => {
+        const mergedContent = msg.content !== undefined ? wrSetLocalized(rawContent, lang, msg.content) : rawContent;
+        const patch = {
+            content: mergedContent ?? { default: '' },
+            ...(msg.ariaLabel !== undefined ? { ariaLabel: wrSetLocalized(config?.ariaLabel, lang, msg.ariaLabel) } : {}),
+            ...(msg.hidden !== undefined ? { hidden: msg.hidden } : {}),
+        };
+        updateConfig(id, patch);
+        await wrSavePage(pageName, id, { ...config, ...patch });
+    });
+    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", ...wrInteractive, ...props, "aria-label": ariaLabel, children: inner }));
+    }
+    return (_jsx(Link, { to: wrLocalizeHref(href, lang), "data-wr-id": id, "data-wr-type": "link", ...wrInteractive, ...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 '@webround/core/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,30 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { wrAriaLabel, wrSetLocalized } from '@webround/core/localized';
+import { useWrApp } from '../context/WrAppContext';
+import { useWrMessage } from '../hooks/useWrMessage';
+import { wrSavePage } from '../save';
+import { useWrPage, useWrPageMeta, useWrPageUpdate } from '../context/WrPageContext';
+import { wrLocalizeHref } from '@webround/core/routing';
+import { WrThemeToggle } from '@webround/core/theme-toggle';
+export function WrNav({ id, children, themeToggle, accountMenu, cartMenu, ...props }) {
+    const config = useWrPage(id);
+    const updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    const { lang } = useWrApp();
+    const items = config?.items ?? [];
+    const ariaLabel = wrAriaLabel(config, props['aria-label'], lang);
+    const localizedItems = items.map((item) => ({ ...item, href: wrLocalizeHref(item.href, lang) }));
+    useWrMessage('wr:nav:update', id, async (msg) => {
+        const patch = {
+            items: msg.items,
+            ...(msg.ariaLabel !== undefined ? { ariaLabel: wrSetLocalized(config?.ariaLabel, lang, msg.ariaLabel) } : {}),
+            ...(msg.hidden !== undefined ? { hidden: msg.hidden } : {}),
+        };
+        updateConfig(id, patch);
+        await wrSavePage(pageName, id, { ...config, ...patch });
+    });
+    if (config?.hidden)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { "data-wr-id": id, "data-wr-type": "nav", ...props, "aria-label": undefined, children: [children(localizedItems, lang, { accountMenu: accountMenu === true, cartMenu: cartMenu === true, ariaLabel }), themeToggle && _jsx(WrThemeToggle, {})] }));
+}
+//# sourceMappingURL=WrNav.js.map

package/dist/components/WrSection.d.ts

@@ -0,0 +1,11 @@
+import type { WrSectionTag } from '@webround/core/kinds';
+import React from 'react';
+interface WrSectionOwnProps {
+    id: string;
+    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;
+export {};
+//# sourceMappingURL=WrSection.d.ts.map

package/dist/components/WrSection.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function WrSection({ id, tag: Tag = 'section', children, ...props }) {
+    return (_jsx(Tag, { "data-wr-id": id, "data-wr-type": "section", ...props, children: children }));
+}
+//# sourceMappingURL=WrSection.js.map

package/dist/components/WrShared.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+/**
+ * The root of a shared component (same API and same output as the core's, plus the scope for the editor): what is inside reads and writes
+ * the component's own JSON (`config/pages/_shared/<name>.json`) and the editor writes its code in the component's file, whatever page it is
+ * on. It is a `display: contents` box that carries the scope: it draws nothing. A component the site has not declared in `config/shared.json`
+ * cannot be edited from here: it is said, and what is inside is shown as it is.
+ */
+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,20 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrSharedName } from '@webround/core/routing';
+import { WrScopeProvider } from '../context/WrPageContext';
+import { useWrSharedScopes } from '../context/WrAppContext';
+import { wrScopeProps } from '../scope';
+/**
+ * The root of a shared component (same API and same output as the core's, plus the scope for the editor): what is inside reads and writes
+ * the component's own JSON (`config/pages/_shared/<name>.json`) and the editor writes its code in the component's file, whatever page it is
+ * on. It is a `display: contents` box that carries the scope: it draws nothing. A component the site has not declared in `config/shared.json`
+ * cannot be edited from here: it is said, and what is inside is shown as it is.
+ */
+export function WrShared({ name, children }) {
+    const scope = useWrSharedScopes().find(candidate => candidate.name === wrSharedName(name));
+    if (!scope) {
+        console.warn(`[wr] WrShared "${name}" is not declared in src/config/shared.json: its elements cannot be edited`);
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx("div", { style: { display: 'contents' }, ...wrScopeProps(scope), children: _jsx(WrScopeProvider, { config: {}, pageName: scope.name, children: children }) }));
+}
+//# sourceMappingURL=WrShared.js.map

package/dist/components/WrText.d.ts

@@ -0,0 +1,11 @@
+import type { WrTextTag } from '@webround/core/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,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WrTextView } from '@webround/core/text-react';
+import { wrLocalized, wrSetLocalized } from '@webround/core/localized';
+import { useState } from 'react';
+import { useWrPage, useWrPageUpdate, useWrPageMeta } from '../context/WrPageContext';
+import { useWrApp } from '../context/WrAppContext';
+import { wrSavePage } from '../save';
+function isEmptyHtml(html) {
+    return html.replace(/<[^>]*>/g, '').trim().length === 0;
+}
+const PLACEHOLDER_HTML = '<span style="opacity:0.4">Type something...</span>';
+export function WrText({ id, tag, html: fallback = '', ...props }) {
+    const config = useWrPage(id);
+    const [editing, setEditing] = useState(false);
+    const [Editor, setEditor] = useState(null);
+    const { lang } = useWrApp();
+    const updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    const rawContent = config?.content;
+    const content = (wrLocalized(rawContent, lang) ?? fallback);
+    const empty = isEmptyHtml(content);
+    const handleClick = async () => {
+        if (!Editor) {
+            const mod = await import('./text-editor/WrTextEditor');
+            setEditor(() => mod.WrTextEditor);
+        }
+        setEditing(true);
+    };
+    if (editing && Editor) {
+        return (_jsx(Editor, { editorPathKey: id, initialHtml: empty ? '' : content, style: props.style, className: props.className, onSave: async (html) => {
+                const newContent = wrSetLocalized(rawContent, lang, html);
+                const value = { content: newContent };
+                updateConfig(id, value);
+                await wrSavePage(pageName, id, value);
+                setEditing(false);
+            }, onCancel: () => setEditing(false) }));
+    }
+    // In the editor a text is written by clicking it: the cursor says so (on the published site it does not, a text there is only read)
+    return _jsx(WrTextView, { ...props, style: { cursor: 'text', ...props.style }, id: id, tag: tag, html: empty ? PLACEHOLDER_HTML : content, onClick: handleClick });
+}
+//# sourceMappingURL=WrText.js.map

package/dist/components/WrVideo.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface WrVideoOwnProps {
+    id: string;
+    src?: string;
+}
+type WrVideoProps = WrVideoOwnProps & Omit<React.ComponentPropsWithoutRef<'video'>, 'id'>;
+export declare function WrVideo({ id, src, autoPlay, muted, loop, controls, style, ...props }: WrVideoProps): React.ReactElement;
+export {};
+//# sourceMappingURL=WrVideo.d.ts.map

package/dist/components/WrVideo.js

@@ -0,0 +1,73 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { wrAriaLabel, wrSetLocalized } from '@webround/core/localized';
+import { useWrApp } from '../context/WrAppContext';
+import { useEffect, useRef } from 'react';
+import { useWrPage, useWrPageMeta, useWrPageUpdate } from '../context/WrPageContext';
+import { useWrMessage } from '../hooks/useWrMessage';
+import { wrSavePage } from '../save';
+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 updateConfig = useWrPageUpdate();
+    const pageName = useWrPageMeta();
+    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]);
+    useWrMessage('wr:video:update', id, async (msg) => {
+        const patch = {
+            ...(msg.ariaLabel !== undefined ? { ariaLabel: wrSetLocalized(config?.ariaLabel, lang, msg.ariaLabel) } : {}),
+            ...(msg.hidden !== undefined ? { hidden: msg.hidden } : {}),
+        };
+        updateConfig(id, patch);
+        await wrSavePage(pageName, id, { ...config, ...patch });
+    });
+    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/components/text-editor/CodeThemeContext.d.ts

@@ -0,0 +1,8 @@
+export declare function CodeThemeProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare const useCodeTheme: () => {
+    theme: "vs-dark" | "light";
+    toggle: () => void;
+};
+//# sourceMappingURL=CodeThemeContext.d.ts.map

package/dist/components/text-editor/CodeThemeContext.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const CodeThemeContext = createContext({ theme: "vs-dark", toggle: () => { } });
+export function CodeThemeProvider({ children }) {
+    const [theme, setTheme] = useState("vs-dark");
+    const toggle = () => setTheme(t => t === "vs-dark" ? "light" : "vs-dark");
+    return (_jsx(CodeThemeContext.Provider, { value: { theme, toggle }, children: children }));
+}
+export const useCodeTheme = () => useContext(CodeThemeContext);
+//# sourceMappingURL=CodeThemeContext.js.map