@webround/editor 0.0.0-stage → 0.3.0

package/dist/context/WrAppContext.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/editor/src/context/WrAppContext.tsx
+import { createContext, useContext, useState, useCallback, useMemo, useEffect, useSyncExternalStore, lazy, Suspense } from 'react';
+import { createBrowserRouter, RouterProvider, useLocation, useParams } from 'react-router-dom';
+import { wrResolveRoutes, wrBuildRegistry, wrBuildLazyRegistry, wrBuildPageConfigMap, wrExpandRoutesForLangs, wrExtractLang, wrBuildLangPath, wrSharedScopes, } from '@webround/core/routing';
+import { WrPageProvider } from './WrPageContext';
+import { WrLayout } from './WrLayout';
+import { WrSeoHead } from '@webround/core/seo-react';
+import { WrNotFound } from '@webround/core/not-found';
+import { setWrNavigate } from '../bridge';
+const WrAppContext = createContext(null);
+export function useWrApp() {
+    const ctx = useContext(WrAppContext);
+    return {
+        lang: ctx?.lang ?? 'default',
+        setLang: ctx?.setLang ?? (() => { }),
+    };
+}
+function WrDefaultPageFallback() {
+    return _jsx("div", { "data-wr-loading": "true" });
+}
+const lazyComponentCache = new Map();
+function getLazyComponent(route) {
+    let cached = lazyComponentCache.get(route.routePath);
+    if (!cached) {
+        cached = lazy(route.loadComponent);
+        lazyComponentCache.set(route.routePath, cached);
+    }
+    return cached;
+}
+export const WrPagesConfigContext = createContext({});
+/** Every shared scope of the site: the header, the footer and the shared components it declares (`config/shared.json`). */
+const WrSharedScopesContext = createContext(wrSharedScopes());
+export const useWrSharedScopes = () => useContext(WrSharedScopesContext);
+/** What is the same for the whole site, for search engines: read live, like the pages' config, so changing it never rebuilds the router. */
+const WrSeoSiteContext = createContext({});
+function WrRouteElement({ route, lazyFallback: LazyFallback, Header, Footer, }) {
+    const pageConfigMap = useContext(WrPagesConfigContext); // letto live, non più congelato nel router
+    const { site, langs } = useContext(WrSeoSiteContext);
+    const params = useParams();
+    const { pathname } = useLocation();
+    const { lang } = useWrApp();
+    // `/:lang/…` answers for any word in that place: only the languages of the site are one
+    if (langs && params.lang !== undefined && !langs.available.includes(params.lang))
+        return _jsx(WrNotFound, { langs: langs });
+    const pageName = route.resolvePageName(params);
+    const config = pageConfigMap[pageName] ?? {};
+    const file = `pages/${route.component}.tsx`;
+    const body = route.lazy
+        ? (() => {
+            const LazyComponent = getLazyComponent(route);
+            return _jsx(Suspense, { fallback: _jsx(LazyFallback, {}), children: _jsx(LazyComponent, {}) });
+        })()
+        : (() => {
+            const Component = route.Component;
+            return _jsx(Component, {});
+        })();
+    return (_jsxs(WrPageProvider, { config: config, pageName: pageName, file: file, children: [_jsx(WrSeoHead, { site: site, config: config, pathname: pathname, lang: lang, langs: langs }), _jsx(WrLayout, { Header: Header, Footer: Footer, showHeader: route.header, showFooter: route.footer, children: body })] }, pageName));
+}
+export function WrAppProvider({ routesFile, eagerModules, lazyModules, configModules, langs, initialLang = 'default', lazyFallback = WrDefaultPageFallback, Header, Footer, seo, shared, children, }) {
+    // Config delle pagine: stato live, indipendente dal router.
+    // Si aggiorna ogni volta che cambia la reference di `configModules`
+    // (es. via HMR in main.tsx), senza mai toccare il router.
+    const [pageConfigMap, setPageConfigMap] = useState(() => wrBuildPageConfigMap(configModules));
+    useEffect(() => {
+        setPageConfigMap(wrBuildPageConfigMap(configModules));
+    }, [configModules]);
+    // Router: NIENTE configModules qui dentro. Si ricostruisce solo se
+    // cambia la struttura delle rotte/componenti, mai per un content edit.
+    const router = useMemo(() => {
+        const registry = wrBuildRegistry(eagerModules);
+        const lazyRegistry = wrBuildLazyRegistry(lazyModules);
+        const { routes, errors } = wrResolveRoutes(routesFile, registry, lazyRegistry);
+        if (errors.missingComponents.length > 0) {
+            console.error('[wr] unresolved route -> component mappings:', errors.missingComponents);
+        }
+        const expandedRoutes = wrExpandRoutesForLangs(routes, langs);
+        const builtRouter = createBrowserRouter([
+            ...expandedRoutes.map((route) => ({
+                path: route.pattern,
+                element: _jsx(WrRouteElement, { route: route, lazyFallback: lazyFallback, Header: Header, Footer: Footer }),
+            })),
+            // An address that leads to no page takes the visitor to the home page (the preview shows what the site will do)
+            { path: '*', element: _jsx(WrNotFound, { langs: langs }) },
+        ]);
+        setWrNavigate(builtRouter.navigate);
+        return builtRouter;
+    }, [routesFile, eagerModules, lazyModules, langs, lazyFallback, Header, Footer]);
+    // Fallback quando non c'è alcuna config lingue: stato locale semplice.
+    const [staticLang, setStaticLang] = useState(initialLang);
+    // Con `langs`: la lingua è sempre derivata dal pathname corrente del router,
+    // letto in modo reattivo — questo componente sta SOPRA il <RouterProvider>, niente useLocation().
+    const pathname = useSyncExternalStore(router.subscribe, () => router.state.location.pathname, () => router.state.location.pathname);
+    const lang = langs ? wrExtractLang(pathname, langs) : staticLang;
+    // The page says what language it is in (screen readers pick their voice by it): the language shown, `default` being the site's own
+    const htmlLang = langs ? (lang === 'default' ? langs.default : lang) : undefined;
+    useEffect(() => {
+        if (htmlLang)
+            document.documentElement.lang = htmlLang;
+    }, [htmlLang]);
+    const setLang = useCallback((target) => {
+        if (langs) {
+            router.navigate(wrBuildLangPath(target, pathname, langs));
+        }
+        else {
+            setStaticLang(target);
+        }
+    }, [langs, pathname, router]);
+    const seoContext = useMemo(() => ({ site: seo, langs }), [seo, langs]);
+    const sharedScopes = useMemo(() => wrSharedScopes(shared), [shared]);
+    return (_jsx(WrAppContext.Provider, { value: { lang, setLang }, children: _jsx(WrPagesConfigContext.Provider, { value: pageConfigMap, children: _jsx(WrSeoSiteContext.Provider, { value: seoContext, children: _jsxs(WrSharedScopesContext.Provider, { value: sharedScopes, children: [children, _jsx(RouterProvider, { router: router })] }) }) }) }));
+}
+//# sourceMappingURL=WrAppContext.js.map

package/dist/context/WrLayout.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType, ReactNode } from 'react';
+/**
+ * La pagina con il suo header e il suo footer (stessa API e stesso markup del core, più l'ambito per l'editor). Vive DENTRO il
+ * provider della pagina e decide al primo render, con i flag già risolti dalla rotta: niente effetti, niente stato, niente scatto.
+ * Ogni parte condivisa è avvolta in un `display: contents` che porta il suo ambito (file + JSON): non genera nessun riquadro, ma
+ * dice al bridge dove scrivere quando si tocca un suo elemento. Il contenuto della pagina sta in un `<main>` (come nel core): lo mette il layout.
+ */
+export declare function WrLayout({ Header, Footer, showHeader, showFooter, children }: {
+    Header?: ComponentType;
+    Footer?: ComponentType;
+    showHeader: boolean;
+    showFooter: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=WrLayout.d.ts.map

package/dist/context/WrLayout.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WR_SHARED_SCOPES } from '@webround/core/routing';
+import { WrScopeProvider } from './WrPageContext';
+import { wrScopeProps } from '../scope';
+/**
+ * La pagina con il suo header e il suo footer (stessa API e stesso markup del core, più l'ambito per l'editor). Vive DENTRO il
+ * provider della pagina e decide al primo render, con i flag già risolti dalla rotta: niente effetti, niente stato, niente scatto.
+ * Ogni parte condivisa è avvolta in un `display: contents` che porta il suo ambito (file + JSON): non genera nessun riquadro, ma
+ * dice al bridge dove scrivere quando si tocca un suo elemento. Il contenuto della pagina sta in un `<main>` (come nel core): lo mette il layout.
+ */
+export function WrLayout({ Header, Footer, showHeader, showFooter, children }) {
+    const header = showHeader && Header ? Header : null;
+    const footer = showFooter && Footer ? Footer : null;
+    if (!header && !footer)
+        return _jsx("main", { children: children });
+    const shared = (key, Component) => {
+        const scope = WR_SHARED_SCOPES[key];
+        return (_jsx("div", { style: { display: 'contents' }, ...wrScopeProps(scope), children: _jsx(WrScopeProvider, { config: {}, pageName: scope.name, children: _jsx(Component, {}) }) }));
+    };
+    return (_jsxs("div", { "data-wr-layout": true, style: { display: 'flex', flexDirection: 'column', minHeight: '100dvh' }, children: [header && shared('header', header), _jsx("main", { style: { flex: '1 0 auto' }, children: children }), footer && shared('footer', footer)] }));
+}
+//# sourceMappingURL=WrLayout.js.map

package/dist/context/WrPageContext.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { WrPageConfig, WrElementConfig } from '@webround/core/types';
+export declare function WrPageProvider({ config: initialConfig, pageName, file, children }: {
+    config: WrPageConfig;
+    pageName: string;
+    file: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * Header e footer: il config è il LORO (config/pages/_shared/…), ma la cronologia è quella della pagina in cui si è. Nessuna cronologia
+ * né stato proprio: le modifiche entrano nella cronologia della pagina con il loro ambito e annulla/ripristina le applicano lì.
+ * Dentro, i componenti Wr* funzionano come in una pagina (`pageName` è il nome del JSON dell'ambito, quindi le scritture vanno lì).
+ */
+export declare function WrScopeProvider({ config: _ignored, pageName: scopeName, children }: {
+    config: WrPageConfig;
+    pageName: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useWrPage(id: string): WrElementConfig | undefined;
+export declare function useWrPageUpdate(): (id: string, patch: Partial<WrElementConfig>, scope?: string) => void;
+export declare function useWrPageMeta(): string;
+export declare function useWrHistory(): {
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+//# sourceMappingURL=WrPageContext.d.ts.map

package/dist/context/WrPageContext.js

@@ -0,0 +1,282 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { valuesToRestore } from './restoreValues';
+import { createContext, useContext, useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { initWrBridge, postHistoryState, refreshSelection, setWrHistory, setWrPageFile, setWrPageName, setWrAstHistoryPush, setWrNodeHistoryPush, setWrMoveHistoryPush, setWrStyleHistoryPush, putNode, fetchNode, fetchStyle, restoreStyle, postToEditor, deleteNode, insertRawNode, moveNode, } from '../bridge';
+import { setWrValue } from '../registry';
+import { wrSavePage, wrSaveFile } from '../save';
+import { useWrApp, useWrSharedScopes, WrPagesConfigContext } from './WrAppContext';
+const WrPageContext = createContext(null);
+export function WrPageProvider({ config: initialConfig, pageName, file, children }) {
+    const [history, setHistory] = useState([]);
+    const [cursor, setCursor] = useState(-1); // -1 = stato iniziale, nessun passo applicato
+    const cursorRef = useRef(-1);
+    useEffect(() => { cursorRef.current = cursor; }, [cursor]);
+    // Il config di ogni ambito = quello su disco + le voci json di quell'ambito fino al cursore. Pagina, header e footer
+    // condividono UNA cronologia (la pagina corrente): si azzera col cambio pagina, come sempre.
+    const pagesConfig = useContext(WrPagesConfigContext);
+    const initialFor = useCallback((name) => name === pageName ? initialConfig : (pagesConfig[name] ?? {}), [pageName, initialConfig, pagesConfig]);
+    const deriveConfig = useCallback((name, entries, upTo) => {
+        let result = initialFor(name);
+        for (let i = 0; i <= upTo; i++) {
+            const entry = entries[i];
+            if (entry?.kind === 'json' && entry.scope === name)
+                result = { ...result, [entry.elementId]: entry.nextValue };
+        }
+        return result;
+    }, [initialFor]);
+    const configFor = useCallback((name) => deriveConfig(name, history, cursor), [deriveConfig, history, cursor]);
+    const config = useMemo(() => configFor(pageName), [configFor, pageName]);
+    const configForRef = useRef(configFor);
+    useEffect(() => { configForRef.current = configFor; }, [configFor]);
+    const { lang } = useWrApp();
+    const sharedScopes = useWrSharedScopes();
+    const updateConfig = useCallback((id, patch, scope = pageName) => {
+        setHistory(prev => {
+            const c = cursorRef.current;
+            // config corrente fino a c, per calcolare prevValue e il merge del patch
+            const currentConfig = deriveConfig(scope, prev, c);
+            const current = currentConfig[id];
+            const merged = { ...current, ...patch };
+            if (patch.content && current?.content && typeof current.content === 'object') {
+                merged.content = { ...current.content, ...patch.content };
+            }
+            const next = prev.slice(0, c + 1);
+            next.push({
+                kind: 'json',
+                scope,
+                elementId: id,
+                prevValue: current,
+                nextValue: merged,
+            });
+            return next;
+        });
+        setCursor(c => c + 1);
+    }, [pageName, deriveConfig]);
+    // Applica UN passo di cronologia in una direzione. true = riuscito.
+    const applyHistoryEntry = useCallback(async (entry, direction) => {
+        const undoing = direction === 'undo';
+        if (entry.kind === 'ast') {
+            const ok = await putNode(entry.elementId, entry.key, undoing ? (entry.prevValue ?? null) : entry.nextValue, entry.scope);
+            if (!ok)
+                return false;
+            const { fields, values } = await fetchNode(entry.elementId, entry.scope);
+            postToEditor({ type: 'wr:node:get:response', elementId: entry.elementId, fields, values });
+            return true;
+        }
+        if (entry.kind === 'style') {
+            const ok = await restoreStyle(entry.elementId, undoing ? entry.prevClassName : entry.nextClassName, entry.scope);
+            if (!ok)
+                return false;
+            // Il pannello dello stile mostra le classi dell'elemento: gli si dice com'è adesso
+            postToEditor({ type: 'wr:style:get:response', ...(await fetchStyle(entry.elementId, entry.scope)) });
+            return true;
+        }
+        if (entry.kind === 'move') {
+            // Annullare = spostarlo di nuovo dov'era; ripristinare = di nuovo dov'è andato. Il posto sta nella voce, non nella pagina in cui ci si trova.
+            const place = undoing ? entry.from : entry.to;
+            const result = await moveNode(entry.elementId, place.anchor, place.mode, entry.scope);
+            return result.ok;
+        }
+        if (entry.kind === 'node') {
+            // undo di una delete e redo di un insert = reinserire; gli altri due = rimuovere
+            const reinsert = (entry.op === 'delete') === undoing;
+            if (reinsert) {
+                if (!entry.anchor) {
+                    console.error('[wr] impossibile reinserire: nessuna ancora di posizione nota per', entry.elementIds);
+                    return false;
+                }
+                // Gli stessi id di prima (uniqueIds off): se qualcuno li ha presi nel frattempo, il passo fallisce e la cronologia si ferma
+                const { ok } = await insertRawNode(entry.anchor, entry.anchorMode, entry.jsx, false, entry.scope);
+                if (!ok)
+                    return false;
+                await wrSaveFile(`config/pages/${entry.scope.name}.json`, entry.values);
+                return true;
+            }
+            for (const elementId of entry.elementIds) {
+                // L'operazione toglie anche i valori JSON dei nodi cancellati
+                const result = await deleteNode(elementId, entry.scope);
+                if (!result || 'error' in result)
+                    return false;
+            }
+            return true;
+        }
+        await wrSavePage(entry.scope, entry.elementId, undoing ? (entry.prevValue ?? {}) : entry.nextValue);
+        return true;
+    }, [pageName]);
+    // Registrato in bridge.ts: chiamato appena una insert/delete di nodo va a buon fine, PRIMA
+    // della pulizia del JSON lato server — per la delete legge dal config corrente (via ref,
+    // non chiusura stale) i valori da ripristinare con l'undo.
+    const pushNodeHistory = useCallback((entry) => {
+        const values = entry.op === 'insert'
+            ? { ...entry.jsonSeed }
+            : valuesToRestore(entry.removedIds ?? [], configForRef.current(entry.scope.name));
+        setHistory(prev => {
+            const c = cursorRef.current;
+            const next = prev.slice(0, c + 1);
+            next.push({
+                kind: 'node', scope: entry.scope, op: entry.op, elementIds: entry.elementIds, jsx: entry.jsx,
+                anchor: entry.anchor, anchorMode: entry.anchorMode, values,
+            });
+            return next;
+        });
+        setCursor(c => c + 1);
+    }, []);
+    // Undo/redo eseguono il passo (I/O) PRIMA di spostare il cursor, mai dentro un updater di
+    // setState. Se un passo fallisce il cursor resta dov'è e la cronologia si blocca: continuare
+    // dopo un passo fallito significherebbe applicare altri step su uno stato file/UI divergente.
+    const historyRef = useRef(history);
+    useEffect(() => { historyRef.current = history; }, [history]);
+    const busyRef = useRef(false);
+    const [blocked, setBlocked] = useState(false);
+    const moveCursor = useCallback((next) => {
+        cursorRef.current = next;
+        setCursor(next);
+    }, []);
+    const runStep = useCallback(async (direction) => {
+        if (busyRef.current || blocked)
+            return;
+        const c = cursorRef.current;
+        const index = direction === 'undo' ? c : c + 1;
+        const entry = historyRef.current[index];
+        if (!entry)
+            return;
+        busyRef.current = true;
+        try {
+            const ok = await applyHistoryEntry(entry, direction);
+            if (ok)
+                moveCursor(direction === 'undo' ? c - 1 : c + 1);
+            else
+                setBlocked(true);
+        }
+        catch (err) {
+            console.error(`[wr] ${direction} fallito, cronologia bloccata:`, err);
+            setBlocked(true);
+        }
+        finally {
+            busyRef.current = false;
+        }
+    }, [blocked, moveCursor, applyHistoryEntry]);
+    const undo = useCallback(() => { void runStep('undo'); }, [runStep]);
+    const redo = useCallback(() => { void runStep('redo'); }, [runStep]);
+    const pushAstHistory = useCallback((elementId, key, prevValue, nextValue, scope) => {
+        setHistory(prev => {
+            const c = cursorRef.current;
+            const next = prev.slice(0, c + 1);
+            next.push({ kind: 'ast', scope, elementId, key, prevValue, nextValue });
+            return next;
+        });
+        setCursor(c => c + 1);
+    }, []);
+    useEffect(() => {
+        setWrAstHistoryPush(pushAstHistory);
+        return () => setWrAstHistoryPush(null);
+    }, [pushAstHistory]);
+    const pushStyleHistory = useCallback((elementId, prevClassName, nextClassName, scope) => {
+        setHistory(prev => {
+            const c = cursorRef.current;
+            const next = prev.slice(0, c + 1);
+            next.push({ kind: 'style', scope, elementId, prevClassName, nextClassName });
+            return next;
+        });
+        setCursor(c => c + 1);
+    }, []);
+    useEffect(() => {
+        setWrStyleHistoryPush(pushStyleHistory);
+        return () => setWrStyleHistoryPush(null);
+    }, [pushStyleHistory]);
+    const pushMoveHistory = useCallback((entry) => {
+        setHistory(prev => {
+            const c = cursorRef.current;
+            const next = prev.slice(0, c + 1);
+            next.push({ kind: 'move', ...entry });
+            return next;
+        });
+        setCursor(c => c + 1);
+    }, []);
+    useEffect(() => {
+        setWrMoveHistoryPush(pushMoveHistory);
+        return () => setWrMoveHistoryPush(null);
+    }, [pushMoveHistory]);
+    useEffect(() => {
+        setWrNodeHistoryPush(pushNodeHistory);
+        return () => setWrNodeHistoryPush(null);
+    }, [pushNodeHistory]);
+    useEffect(() => {
+        // Origin del parent (wr-editor) che può parlare con questo iframe, da env del sito: se manca
+        // il bridge non parte (fail closed) invece di accettare messaggi da chiunque.
+        const editorOrigin = import.meta.env?.VITE_WR_EDITOR_ORIGIN;
+        if (!editorOrigin) {
+            console.warn('[wr] VITE_WR_EDITOR_ORIGIN non definita: bridge con l\'editor disattivato');
+            return;
+        }
+        return initWrBridge(editorOrigin);
+    }, []);
+    useEffect(() => {
+        setWrHistory(undo, redo);
+    }, [undo, redo]);
+    useEffect(() => {
+        // Gli elementi di header, footer e componenti condivisi hanno i loro valori nel registro come quelli della pagina
+        const all = [config, ...sharedScopes.map(scope => configFor(scope.name))];
+        for (const [id, element] of all.flatMap(c => Object.entries(c))) {
+            setWrValue(id, element, lang);
+            refreshSelection(id);
+        }
+    }, [config, configFor, sharedScopes, lang]);
+    useEffect(() => {
+        const onKey = (e) => {
+            const mod = e.metaKey || e.ctrlKey;
+            if (mod && !e.shiftKey && e.key === 'z') {
+                e.preventDefault();
+                undo();
+            }
+            if (mod && (e.key === 'y' || (e.shiftKey && e.key === 'z'))) {
+                e.preventDefault();
+                redo();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [undo, redo]);
+    useEffect(() => {
+        postHistoryState(!blocked && cursor >= 0, !blocked && cursor < history.length - 1);
+    }, [cursor, history.length, blocked]);
+    useEffect(() => {
+        setWrPageFile(file);
+        setWrPageName(pageName);
+    }, [file, pageName]);
+    return (_jsx(WrPageContext.Provider, { value: { config, updateConfig, configFor, pageName, undo, redo, canUndo: !blocked && cursor >= 0, canRedo: !blocked && cursor < history.length - 1 }, children: children }));
+}
+/**
+ * Header e footer: il config è il LORO (config/pages/_shared/…), ma la cronologia è quella della pagina in cui si è. Nessuna cronologia
+ * né stato proprio: le modifiche entrano nella cronologia della pagina con il loro ambito e annulla/ripristina le applicano lì.
+ * Dentro, i componenti Wr* funzionano come in una pagina (`pageName` è il nome del JSON dell'ambito, quindi le scritture vanno lì).
+ */
+export function WrScopeProvider({ config: _ignored, pageName: scopeName, children }) {
+    const page = useContext(WrPageContext);
+    const value = useMemo(() => ({
+        ...page,
+        config: page.configFor(scopeName),
+        pageName: scopeName,
+        updateConfig: (id, patch) => page.updateConfig(id, patch, scopeName),
+    }), [page, scopeName]);
+    return _jsx(WrPageContext.Provider, { value: value, children: children });
+}
+export function useWrPage(id) {
+    return useContext(WrPageContext)?.config[id];
+}
+export function useWrPageUpdate() {
+    return useContext(WrPageContext).updateConfig;
+}
+export function useWrPageMeta() {
+    return useContext(WrPageContext).pageName;
+}
+export function useWrHistory() {
+    const ctx = useContext(WrPageContext);
+    return {
+        undo: ctx?.undo ?? (() => { }),
+        redo: ctx?.redo ?? (() => { }),
+        canUndo: ctx?.canUndo ?? false,
+        canRedo: ctx?.canRedo ?? false,
+    };
+}
+//# sourceMappingURL=WrPageContext.js.map

package/dist/context/restoreValues.d.ts

@@ -0,0 +1,2 @@
+export declare function valuesToRestore(removedIds: readonly string[], config: Readonly<Record<string, unknown>>): Record<string, unknown>;
+//# sourceMappingURL=restoreValues.d.ts.map

package/dist/context/restoreValues.js

@@ -0,0 +1,6 @@
+// I valori JSON da rimettere se si annulla una cancellazione: solo quelli che esistevano. Un elemento che nel JSON non aveva
+// niente (la maggior parte dei contenitori) non ne deve ottenere uno vuoto tornando: il JSON deve contenere solo ciò che ha un valore.
+export function valuesToRestore(removedIds, config) {
+    return Object.fromEntries(removedIds.filter(id => config[id] !== undefined).map(id => [id, config[id]]));
+}
+//# sourceMappingURL=restoreValues.js.map

package/dist/contrast.d.ts

@@ -0,0 +1,45 @@
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface Rgba extends Rgb {
+    a: number;
+}
+/** Relative luminance, 0 (black) to 1 (white). */
+export declare const luminance: ({ r, g, b }: Rgb) => number;
+/** The contrast ratio of two colors, 1 (none) to 21 (black on white). */
+export declare function contrastRatio(a: Rgb, b: Rgb): number;
+/** A color with some transparency, laid over another one that may have some too. */
+export declare function over(top: Rgba, under: Rgba): Rgba;
+/** One element around the text: its background, and the opacity it (and all it holds) is shown with. */
+export interface Layer {
+    background: Rgba;
+    opacity: number;
+}
+/**
+ * What a pixel looks like in the end, where `top` is painted (the text's color, or nothing at all to get the backdrop) inside these layers,
+ * the nearest first: each layer paints its background under what its children painted, and is then shown with its opacity (so a faded
+ * block fades its text and its background together); the page is white under all. Opacity counts: text in a block at 50% is half as dark.
+ */
+export declare function flatten(top: Rgba, layers: readonly Layer[]): Rgb;
+/** WCAG 2.1 AA (1.4.3): large text (24px, or 18.66px bold) needs 3:1; the rest needs 4.5:1. */
+export declare const requiredRatio: (fontSizePx: number, fontWeight: number) => number;
+export interface ContrastFinding {
+    /** `data-wr-id` of the nearest element that can be edited. */
+    elementId: string;
+    ratio: number;
+    required: number;
+    /** The words that are hard to read (the start of them). */
+    text: string;
+}
+/**
+ * Looks at the text that is on the page now, with the colors the browser computed (the theme, the breakpoint and the dark mode are all in
+ * them), and says which has too little contrast. A text over an image, a gradient or a clipped background is NOT judged (its backdrop is not a
+ * color: guessing would be wrong as often as right); one with no color is not either. Opacity IS judged: a faded block is as hard to read as it looks.
+ * `resolve` turns any CSS color (`oklch(…)`, `rgb(…)`, a name) into sRGB: in a browser, a canvas does it.
+ */
+export declare function measureContrast(root: Document, resolve: (css: string) => Rgba | null): ContrastFinding[];
+/** CSS color → sRGB, by letting a canvas paint it (it understands every notation the browser does, `oklch` included). */
+export declare function canvasResolver(root: Document): (css: string) => Rgba | null;
+//# sourceMappingURL=contrast.d.ts.map

package/dist/contrast.js

@@ -0,0 +1,122 @@
+// Is the text readable? The WCAG 2 rule, and it is arithmetic: the ratio of the relative luminances of the text color and of what is behind
+// it must be 4.5:1 (3:1 for large text). The arithmetic is here and is pure; reading the colors off the page is `measureContrast`.
+/** sRGB channel (0–255) to linear light. */
+const linear = (channel) => {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+/** Relative luminance, 0 (black) to 1 (white). */
+export const luminance = ({ r, g, b }) => 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+/** The contrast ratio of two colors, 1 (none) to 21 (black on white). */
+export function contrastRatio(a, b) {
+    const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (light + 0.05) / (dark + 0.05);
+}
+/** A color with some transparency, laid over another one that may have some too. */
+export function over(top, under) {
+    const a = top.a + under.a * (1 - top.a);
+    if (a === 0)
+        return { r: 0, g: 0, b: 0, a: 0 };
+    const mix = (t, u) => (t * top.a + u * under.a * (1 - top.a)) / a;
+    return { r: mix(top.r, under.r), g: mix(top.g, under.g), b: mix(top.b, under.b), a };
+}
+const WHITE = { r: 255, g: 255, b: 255, a: 1 };
+/**
+ * What a pixel looks like in the end, where `top` is painted (the text's color, or nothing at all to get the backdrop) inside these layers,
+ * the nearest first: each layer paints its background under what its children painted, and is then shown with its opacity (so a faded
+ * block fades its text and its background together); the page is white under all. Opacity counts: text in a block at 50% is half as dark.
+ */
+export function flatten(top, layers) {
+    let pixel = top;
+    for (const { background, opacity } of layers) {
+        pixel = over(pixel, background);
+        pixel = { ...pixel, a: pixel.a * opacity };
+        if (pixel.a >= 1)
+            break;
+    }
+    const { r, g, b } = over(pixel, WHITE);
+    return { r, g, b };
+}
+/** WCAG 2.1 AA (1.4.3): large text (24px, or 18.66px bold) needs 3:1; the rest needs 4.5:1. */
+export const requiredRatio = (fontSizePx, fontWeight) => fontSizePx >= 24 || (fontSizePx >= 18.66 && fontWeight >= 700) ? 3 : 4.5;
+const MAX_ELEMENTS = 400;
+/**
+ * Looks at the text that is on the page now, with the colors the browser computed (the theme, the breakpoint and the dark mode are all in
+ * them), and says which has too little contrast. A text over an image, a gradient or a clipped background is NOT judged (its backdrop is not a
+ * color: guessing would be wrong as often as right); one with no color is not either. Opacity IS judged: a faded block is as hard to read as it looks.
+ * `resolve` turns any CSS color (`oklch(…)`, `rgb(…)`, a name) into sRGB: in a browser, a canvas does it.
+ */
+export function measureContrast(root, resolve) {
+    const view = root.defaultView;
+    if (!view || !root.body)
+        return [];
+    const worst = new Map();
+    const elements = Array.from(root.body.querySelectorAll('*')).slice(0, MAX_ELEMENTS * 8);
+    let looked = 0;
+    for (const el of elements) {
+        if (looked >= MAX_ELEMENTS)
+            break;
+        const words = Array.from(el.childNodes).filter(n => n.nodeType === 3).map(n => n.textContent ?? '').join(' ').replace(/\s+/g, ' ').trim();
+        if (!words)
+            continue;
+        const id = el.closest('[data-wr-id]')?.getAttribute('data-wr-id');
+        if (!id)
+            continue;
+        const style = view.getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden' || el.getClientRects().length === 0)
+            continue;
+        looked += 1;
+        const layers = [];
+        let judged = true;
+        for (let node = el; node && judged; node = node.parentElement) {
+            const s = view.getComputedStyle(node);
+            // An image or a gradient behind the text, or text that is a clipped background: the backdrop is not a color, nothing is guessed
+            if (s.backgroundImage !== 'none' || (s.backgroundClip ?? '').includes('text')) {
+                judged = false;
+                break;
+            }
+            const background = resolve(s.backgroundColor) ?? { r: 0, g: 0, b: 0, a: 0 };
+            const opacity = Number(s.opacity);
+            layers.push({ background, opacity: Number.isFinite(opacity) ? opacity : 1 });
+            if (background.a >= 1 && opacity >= 1)
+                break; // opaque: what is behind it cannot be seen
+        }
+        if (!judged)
+            continue;
+        const text = resolve(style.color);
+        if (!text || text.a === 0)
+            continue;
+        const behind = flatten({ r: 0, g: 0, b: 0, a: 0 }, layers);
+        const ratio = contrastRatio(flatten(text, layers), behind);
+        const required = requiredRatio(parseFloat(style.fontSize), Number(style.fontWeight) || 400);
+        if (ratio >= required)
+            continue;
+        const finding = { elementId: id, ratio: Math.round(ratio * 100) / 100, required, text: words.slice(0, 40) };
+        const known = worst.get(id);
+        if (!known || finding.ratio < known.ratio)
+            worst.set(id, finding);
+    }
+    return [...worst.values()];
+}
+/** CSS color → sRGB, by letting a canvas paint it (it understands every notation the browser does, `oklch` included). */
+export function canvasResolver(root) {
+    const canvas = root.createElement('canvas');
+    canvas.width = canvas.height = 1;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    const cache = new Map();
+    return (css) => {
+        if (!context)
+            return null;
+        if (cache.has(css))
+            return cache.get(css) ?? null;
+        context.clearRect(0, 0, 1, 1);
+        context.fillStyle = '#000';
+        context.fillStyle = css;
+        context.fillRect(0, 0, 1, 1);
+        const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+        const value = { r, g, b, a: a / 255 };
+        cache.set(css, value);
+        return value;
+    };
+}
+//# sourceMappingURL=contrast.js.map

package/dist/drop.d.ts

@@ -0,0 +1,7 @@
+import type { WrDropTarget } from './messages';
+/**
+ * Where `dragged` (an element of the page, or null for a new block that is not there yet) would land if it were let go at (x, y) of the page; null if the pointer is over nothing the editor
+ * knows, or is over the element itself (or something inside it).
+ */
+export declare function wrDropTargetAt(dragged: Element | null, x: number, y: number, doc?: Document): WrDropTarget | null;
+//# sourceMappingURL=drop.d.ts.map