@webround/editor 0.0.0-stage → 0.3.0

package/dist/drop.js

@@ -0,0 +1,51 @@
+import { wrHoldsElements } from '@webround/core/kinds';
+// Where an element dragged over the page would land, said in the page's own layout: next to the element under the pointer, before or after it along the way the layout flows (down a
+// column, across a row), or inside a section that has nothing in it yet. The editor decides whether that place is allowed (it knows the tree); this only looks at the page.
+const idOf = (el) => el?.getAttribute('data-wr-id') ?? null;
+const inside = (outer, el) => outer !== null && (outer === el || outer.contains(el));
+const rectOf = (el) => { const r = el.getBoundingClientRect(); return { top: r.top, left: r.left, width: r.width, height: r.height }; };
+/** The way the children of a box flow: across (a row, a grid) or down (everything else). */
+function flowOf(box) {
+    if (!box)
+        return 'y';
+    const style = getComputedStyle(box);
+    if (style.display === 'grid' || style.display === 'inline-grid')
+        return 'x';
+    if (style.display === 'flex' || style.display === 'inline-flex')
+        return style.flexDirection.startsWith('row') ? 'x' : 'y';
+    return 'y';
+}
+const distance = (r, x, y) => Math.hypot(Math.max(r.left - x, 0, x - r.right), Math.max(r.top - y, 0, y - r.bottom));
+/** The line that shows a place next to `ref`: along its edge, across the way the layout flows. */
+function lineAt(ref, zone, flow) {
+    const r = ref.getBoundingClientRect();
+    return flow === 'x'
+        ? { top: r.top, left: zone === 'before' ? r.left : r.right, width: 0, height: r.height }
+        : { top: zone === 'before' ? r.top : r.bottom, left: r.left, width: r.width, height: 0 };
+}
+/**
+ * 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 function wrDropTargetAt(dragged, x, y, doc = document) {
+    const over = doc.elementFromPoint(x, y)?.closest('[data-wr-id]') ?? null;
+    // Over the thing being moved (or what is in it) there is nowhere to go: it is where it is. Neither the element nor anything inside it is a place for itself.
+    if (!over || !idOf(over) || inside(dragged, over))
+        return null;
+    const kind = over.getAttribute('data-wr-type') ?? '';
+    if (wrHoldsElements(kind)) {
+        const kids = Array.from(over.children).filter(k => idOf(k) && !inside(dragged, k));
+        if (kids.length === 0)
+            return { overId: idOf(over), zone: 'inside', line: rectOf(over) };
+        const flow = flowOf(over);
+        const ref = kids.map(k => ({ k, d: distance(k.getBoundingClientRect(), x, y) })).sort((a, b) => a.d - b.d)[0].k;
+        const r = ref.getBoundingClientRect();
+        const zone = (flow === 'x' ? x < r.left + r.width / 2 : y < r.top + r.height / 2) ? 'before' : 'after';
+        return { overId: idOf(ref), zone, line: lineAt(ref, zone, flow) };
+    }
+    const flow = flowOf(over.parentElement);
+    const r = over.getBoundingClientRect();
+    const zone = (flow === 'x' ? x < r.left + r.width / 2 : y < r.top + r.height / 2) ? 'before' : 'after';
+    return { overId: idOf(over), zone, line: lineAt(over, zone, flow) };
+}
+//# sourceMappingURL=drop.js.map

package/dist/gaps.d.ts

@@ -0,0 +1,14 @@
+import type { WrBoxGaps, WrRect } from './messages';
+export interface WrGapInput {
+    /** The computed `display` of the box. */
+    display: string;
+    /** The computed `column-gap` and `row-gap`, in px (0 for `normal`). */
+    columnGap: number;
+    rowGap: number;
+    /** The box the children are laid out in: inside its border and padding. */
+    content: WrRect;
+    /** The children that take part in the layout (not `display: none`, not positioned out of it). */
+    kids: readonly WrRect[];
+}
+export declare function wrBoxGaps({ display, columnGap, rowGap, content, kids }: WrGapInput): WrBoxGaps | null;
+//# sourceMappingURL=gaps.d.ts.map

package/dist/gaps.js

@@ -0,0 +1,50 @@
+/** Less than this is not a gap anyone can see (and a layout that rounds would make bands out of nothing). */
+const MIN_BAND = 1;
+const isBox = (display) => /(^|-)(flex|grid)$/.test(display);
+const isGrid = (display) => /grid$/.test(display);
+export function wrBoxGaps({ display, columnGap, rowGap, content, kids }) {
+    if (!isBox(display) || kids.length < 2)
+        return null;
+    // Rows: children that overlap in height are on one line (a flex row, a wrapped line, a grid row); one that starts below the others starts the next line
+    const sorted = [...kids].sort((a, b) => a.top - b.top || a.left - b.left);
+    const rows = [];
+    let bottom = -Infinity;
+    for (const kid of sorted) {
+        if (rows.length === 0 || kid.top >= bottom - 0.5) {
+            rows.push([kid]);
+            bottom = kid.top + kid.height;
+        }
+        else {
+            rows[rows.length - 1].push(kid);
+            bottom = Math.max(bottom, kid.top + kid.height);
+        }
+    }
+    // What the gap is, not the free space around it: in a flex box the space a `justify-content` adds between the children is not the gap (the band is only as big as the gap, next to the
+    // child before it); in a grid the children fill their tracks, so what is measured between them is the gap
+    const size = (measured, gap) => (gap >= MIN_BAND && measured >= MIN_BAND ? (isGrid(display) ? measured : Math.min(measured, gap)) : 0);
+    const bands = [];
+    const extent = (row) => {
+        const top = Math.min(...row.map(k => k.top));
+        return { top, height: Math.max(...row.map(k => k.top + k.height)) - top };
+    };
+    for (const row of rows) {
+        const line = extent(row);
+        const byLeft = [...row].sort((a, b) => a.left - b.left);
+        for (let i = 1; i < byLeft.length; i++) {
+            const left = byLeft[i - 1].left + byLeft[i - 1].width;
+            const width = size(byLeft[i].left - left, columnGap);
+            if (width > 0)
+                bands.push({ axis: 'column', top: line.top, left, width, height: line.height });
+        }
+    }
+    for (let i = 1; i < rows.length; i++) {
+        const above = extent(rows[i - 1]);
+        const below = extent(rows[i]);
+        const top = above.top + above.height;
+        const height = size(below.top - top, rowGap);
+        if (height > 0)
+            bands.push({ axis: 'row', top, left: content.left, width: content.width, height });
+    }
+    return bands.length === 0 ? null : { column: columnGap, row: rowGap, bands };
+}
+//# sourceMappingURL=gaps.js.map

package/dist/hooks/useWrMessage.d.ts

@@ -0,0 +1,5 @@
+import type { WrEditorInbound } from '../messages';
+export declare function useWrMessage<T extends WrEditorInbound['type']>(type: T, elementId: string, handler: (msg: Extract<WrEditorInbound, {
+    type: T;
+}>) => void): void;
+//# sourceMappingURL=useWrMessage.d.ts.map

package/dist/hooks/useWrMessage.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import { registerWrSchema } from '../registry';
+import { kindOfUpdateMessage, multilangFieldsOf } from '../schema';
+export function useWrMessage(type, elementId, handler) {
+    const handlerRef = useRef(handler);
+    useEffect(() => { handlerRef.current = handler; });
+    useEffect(() => {
+        const kind = kindOfUpdateMessage(type);
+        registerWrSchema(elementId, kind ? multilangFieldsOf(kind) : []);
+    }, [type, elementId]);
+    useEffect(() => {
+        const onMessage = (e) => {
+            const data = e.data;
+            if (data?.type !== type)
+                return;
+            if (data.elementId !== elementId)
+                return;
+            handlerRef.current(data);
+        };
+        window.addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, [type, elementId]);
+}
+//# sourceMappingURL=useWrMessage.js.map

package/dist/hooks/useWrSave.d.ts

@@ -0,0 +1,2 @@
+export declare function wrSave(pageName: string, id: string, value: unknown): Promise<void>;
+//# sourceMappingURL=useWrSave.d.ts.map

package/dist/hooks/useWrSave.js

@@ -0,0 +1,11 @@
+export async function wrSave(pageName, id, value) {
+    await fetch('/wr/update', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            file: `config/${pageName}.json`,
+            patch: { [id]: value },
+        }),
+    });
+}
+//# sourceMappingURL=useWrSave.js.map

package/dist/index.css

@@ -0,0 +1,467 @@
+/* ── LIGHT THEME ── */
+:root,
+[data-theme="light"] {
+
+    --wr-bg: #ffffff;
+
+    /* SFONDI — 1 = più chiaro, 5 = più scuro */
+    --wr-bg-1: #ffffff;
+    --wr-bg-2: #f8fafc;
+    --wr-bg-3: #edf2f7;
+    --wr-bg-4: #e2e8f0;
+    --wr-bg-5: #cbd5e1;
+
+    /* SFONDI INVERSI */
+    --wr-bg-1-inv: #020617;
+    --wr-bg-2-inv: #0f172a;
+    --wr-bg-3-inv: #1e293b;
+    --wr-bg-4-inv: #f1f5f9;
+    --wr-bg-5-inv: #ffffff;
+
+    /* TESTO — 1 = più visibile, 4 = meno visibile */
+    --wr-text-1: #0f172a;
+    --wr-text-2: #1e293b;
+    --wr-text-3: #475569;
+    --wr-text-4: #94a3b8;
+
+    /* TESTO INVERSI */
+    --wr-text-1-inv: #ffffff;
+    --wr-text-2-inv: #f1f5f9;
+    --wr-text-3-inv: #94a3b8;
+    --wr-text-4-inv: #334155;
+
+    /* SEZIONI ALWAYS-DARK */
+    --wr-bg-dark-1: #0f172a;
+    --wr-bg-dark-2: #1e293b;
+    --wr-bg-dark-3: #334155;
+
+    /* BORDI */
+    --wr-border: rgba(15, 23, 42, 0.10);
+    --wr-border-strong: rgba(15, 23, 42, 0.18);
+
+    /* OMBRE */
+    --wr-shadow-1: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
+    --wr-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
+    --wr-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.08);
+}
+
+/* ── DARK THEME ── */
+[data-theme="dark"] {
+
+    --wr-bg: #334155;
+
+    /* SFONDI — 1 = più chiaro, 5 = più scuro */
+    --wr-bg-1: #334155;
+    --wr-bg-2: #232d3f;
+    --wr-bg-3: #162030;
+    --wr-bg-4: #0f172a;
+    --wr-bg-5: #020617;
+
+    /* SFONDI INVERSI */
+    --wr-bg-1-inv: #ffffff;
+    --wr-bg-2-inv: #f8fafc;
+    --wr-bg-3-inv: #edf2f7;
+    --wr-bg-4-inv: #1e293b;
+    --wr-bg-5-inv: #0f172a;
+
+    /* TESTO — 1 = più visibile, 4 = meno visibile */
+    --wr-text-1: #ffffff;
+    --wr-text-2: #e2e8f0;
+    --wr-text-3: #94a3b8;
+    --wr-text-4: #475569;
+
+    /* TESTO INVERSI */
+    --wr-text-1-inv: #0f172a;
+    --wr-text-2-inv: #1e293b;
+    --wr-text-3-inv: #475569;
+    --wr-text-4-inv: #cbd5e1;
+
+    /* SEZIONI ALWAYS-DARK */
+    --wr-bg-dark-1: #000000;
+    --wr-bg-dark-2: #0f172a;
+    --wr-bg-dark-3: #1e293b;
+
+    /* BORDI */
+    --wr-border: rgba(255, 255, 255, 0.10);
+    --wr-border-strong: rgba(255, 255, 255, 0.16);
+
+    /* OMBRE */
+    --wr-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
+    --wr-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
+    --wr-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.60), 0 4px 8px rgba(0, 0, 0, 0.35);
+}
+
+/* ── UTILITY CLASSES ── */
+
+/* SFONDI */
+.wr-bg {
+    background-color: var(--wr-bg);
+}
+
+.wr-bg-1 {
+    background-color: var(--wr-bg-1);
+}
+
+.wr-bg-2 {
+    background-color: var(--wr-bg-2);
+}
+
+.wr-bg-3 {
+    background-color: var(--wr-bg-3);
+}
+
+.wr-bg-4 {
+    background-color: var(--wr-bg-4);
+}
+
+.wr-bg-5 {
+    background-color: var(--wr-bg-5);
+}
+
+.wr-bg-1-inv {
+    background-color: var(--wr-bg-1-inv);
+}
+
+.wr-bg-2-inv {
+    background-color: var(--wr-bg-2-inv);
+}
+
+.wr-bg-3-inv {
+    background-color: var(--wr-bg-3-inv);
+}
+
+.wr-bg-4-inv {
+    background-color: var(--wr-bg-4-inv);
+}
+
+.wr-bg-5-inv {
+    background-color: var(--wr-bg-5-inv);
+}
+
+/* TESTO */
+.wr-text {
+    color: var(--wr-text);
+}
+
+.wr-text-1 {
+    color: var(--wr-text-1);
+}
+
+.wr-text-2 {
+    color: var(--wr-text-2);
+}
+
+.wr-text-3 {
+    color: var(--wr-text-3);
+}
+
+.wr-text-4 {
+    color: var(--wr-text-4);
+}
+
+.wr-text-1-inv {
+    color: var(--wr-text-1-inv);
+}
+
+.wr-text-2-inv {
+    color: var(--wr-text-2-inv);
+}
+
+.wr-text-3-inv {
+    color: var(--wr-text-3-inv);
+}
+
+.wr-text-4-inv {
+    color: var(--wr-text-4-inv);
+}
+
+/* ALWAYS-DARK */
+.wr-bg-dark-1 {
+    background-color: var(--wr-bg-dark-1);
+}
+
+.wr-bg-dark-2 {
+    background-color: var(--wr-bg-dark-2);
+}
+
+.wr-bg-dark-3 {
+    background-color: var(--wr-bg-dark-3);
+}
+
+/* testo su always-dark — hardcoded, non dipende dal tema */
+.wr-dark-text-1 {
+    color: #ffffff;
+}
+
+.wr-dark-text-2 {
+    color: #e2e8f0;
+}
+
+.wr-dark-text-3 {
+    color: #94a3b8;
+}
+
+.wr-dark-text-4 {
+    color: #475569;
+}
+
+.wr-elevated-border {
+    border-color: rgba(255, 255, 255, 0.08);
+}
+
+.wr-elevated-border-strong {
+    border-color: rgba(255, 255, 255, 0.16);
+}
+
+/* BORDI */
+.wr-border {
+    border-color: var(--wr-border);
+}
+
+.wr-border-strong {
+    border-color: var(--wr-border-strong);
+}
+
+/* OMBRE */
+.wr-shadow-1 {
+    box-shadow: var(--wr-shadow-1);
+}
+
+.wr-shadow-2 {
+    box-shadow: var(--wr-shadow-2);
+}
+
+.wr-shadow-3 {
+    box-shadow: var(--wr-shadow-3);
+}
+
+/* ── SUPERFICI DEI PLUGIN (toolbar e menu) ──
+   Vivono dentro la pagina del sito, quindi i loro colori sono FISSI e non dipendono da niente di esterno
+   (tema del sito, data-theme, :root, colore del body, regole globali tipo `* { color }`).
+   1) Si ridefiniscono i token con valori chiari scritti nel codice: tutto ciò che sta dentro le due
+      superfici li usa tramite var(--wr-*) e riceve sempre questi, anche se il sito ne definisce altri.
+   2) Dentro le superfici il colore si eredita SEMPRE dalla radice: un `* { color }` del sito colpisce
+      ogni elemento direttamente e senza questo reset renderebbe bianche icone e testi senza colore proprio.
+   Questo blocco va PRIMA delle regole dei singoli elementi: quelle, a parità di specificità, vincono. */
+.wr-toolbar-menu,
+.wr-floating-bar {
+    --wr-bg-1: #ffffff;
+    --wr-bg-3: #edf2f7;
+    --wr-text-2: #000000;
+    --wr-text-3: #475569;
+    --wr-border: rgba(15, 23, 42, 0.10);
+    --wr-border-strong: rgba(15, 23, 42, 0.18);
+    --wr-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
+    color: #000000;
+    color-scheme: light;
+}
+
+.wr-toolbar-menu *,
+.wr-floating-bar * {
+    color: inherit;
+}
+
+.wr-toolbar-trigger {
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-radius: 12px;
+    border: 1px solid var(--wr-border-strong);
+    padding: 8px 16px;
+    background: var(--wr-bg-1);
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--wr-text-2);
+    cursor: pointer;
+}
+
+.wr-toolbar-trigger:hover {
+    background: var(--wr-bg-3);
+}
+
+.wr-toolbar-chevron {
+    margin-left: 8px;
+    height: 20px;
+    width: 20px;
+    transition: transform 200ms;
+}
+
+.wr-toolbar-chevron--open {
+    transform: rotate(180deg);
+}
+
+.wr-toolbar-menu {
+    position: fixed;
+    z-index: 10001;
+    background: var(--wr-bg-1);
+    border: 1px solid var(--wr-border);
+    border-radius: 12px;
+    box-shadow: var(--wr-shadow-2);
+    max-height: 240px;
+    overflow-y: auto;
+}
+
+.wr-toolbar-item {
+    display: block;
+    width: 100%;
+    padding: 8px 16px;
+    font-size: 14px;
+    text-align: left;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--wr-text-2);
+}
+
+.wr-toolbar-item:hover {
+    background: var(--wr-bg-3);
+}
+
+.wr-toolbar-item--active {
+    font-weight: 700;
+}
+
+.wr-divider {
+    width: 1px;
+    height: 24px;
+    background: #e5e7eb;
+    margin: 0 2px;
+}
+
+.wr-floating-bar-wrap {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    max-width: 100%;
+    padding: 4px 16px;
+    z-index: 10001;
+}
+
+.wr-floating-bar {
+    border-radius: 8px;
+    overflow-x: auto;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--wr-bg-1);
+    border: 1px solid var(--wr-border-strong);
+    box-shadow: var(--wr-shadow-2);
+    padding: 4px 8px;
+}
+
+.wr-toolbar-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--wr-text-2);
+}
+
+.wr-toolbar-icon-btn:hover {
+    background: var(--wr-bg-3);
+}
+
+.wr-toolbar-icon-btn--active {
+    background: var(--wr-bg-3);
+    color: #3b82f6;
+}
+
+.wr-toolbar-icon-btn:disabled,
+.wr-toolbar-icon-btn--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.wr-core-input {
+    width: 100%;
+    border: 1px solid var(--wr-border);
+    padding: 8px;
+    border-radius: 6px;
+    background: var(--wr-bg-1);
+    color: var(--wr-text-2);
+    font-size: 14px;
+}
+
+.wr-color-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 1px solid var(--wr-border);
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+.wr-menu-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
+.wr-label {
+    display: block;
+    font-size: 14px;
+    color: var(--wr-text-2);
+    margin-bottom: 4px;
+}
+
+.wr-help-text {
+    font-size: 12px;
+    color: var(--wr-text-3);
+    margin-top: 4px;
+}
+
+.wr-error-text {
+    font-size: 12px;
+    color: #ef4444;
+    margin-top: 4px;
+}
+
+.wr-primary-btn {
+    width: 100%;
+    background: #3b82f6;
+    color: #fff;
+    padding: 8px 12px;
+    border-radius: 12px;
+    box-shadow: var(--wr-shadow-1);
+    border: none;
+    cursor: pointer;
+    margin-top: 12px;
+}
+
+.wr-primary-btn:hover {
+    background: #2563eb;
+}
+
+.wr-primary-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+/* Un contenitore vuoto (appena inserito) non ha altezza: senza un riquadro non c'è niente da cliccare, e da lì non si può
+   aggiungere altro dentro. Solo in modifica: questo CSS arriva con il package editor, mai con il core. */
+[data-wr-type="section"]:empty {
+    min-height: 3rem;
+    outline: 1px dashed rgba(100, 116, 139, 0.55);
+    outline-offset: -1px;
+}
+
+/* A line that names the colors under it (the theme's, the others) in a menu of colors */
+.wr-menu-heading {
+    padding: 6px 16px 2px;
+    font-size: 10px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    font-weight: 600;
+    opacity: 0.6;
+}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import './index.css';
+export { WrAppProvider, useWrApp } from './context/WrAppContext';
+export { WrPageProvider, useWrPage, useWrPageUpdate, useWrPageMeta, useWrHistory } from './context/WrPageContext';
+export { getFields, getFieldBackend, type FieldDef, type FieldBackend, type FieldLabelKey } from './schema';
+export { WrButton } from './components/WrButton';
+export { WrIframe } from './components/WrIframe';
+export { WrImage } from './components/WrImage';
+export { WrLink } from './components/WrLink';
+export { WrAltcha } from './components/WrAltcha';
+export { WrForm } from './components/WrForm';
+export { WrFormPrivacy } from './components/WrFormPrivacy';
+export { WrFormSuccess } from './components/WrFormSuccess';
+export { WrInput } from './components/WrInput';
+export { WrNav } from './components/WrNav';
+export type { WrNavOptions } from './components/WrNav';
+export { WrSection } from './components/WrSection';
+export { WrShared } from './components/WrShared';
+export { WrText } from './components/WrText';
+export { WrVideo } from './components/WrVideo';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,20 @@
+// packages/editor/src/index.ts
+import './index.css';
+export { WrAppProvider, useWrApp } from './context/WrAppContext';
+export { WrPageProvider, useWrPage, useWrPageUpdate, useWrPageMeta, useWrHistory } from './context/WrPageContext';
+export { getFields, getFieldBackend } from './schema';
+export { WrButton } from './components/WrButton';
+export { WrIframe } from './components/WrIframe';
+export { WrImage } from './components/WrImage';
+export { WrLink } from './components/WrLink';
+export { WrAltcha } from './components/WrAltcha';
+export { WrForm } from './components/WrForm';
+export { WrFormPrivacy } from './components/WrFormPrivacy';
+export { WrFormSuccess } from './components/WrFormSuccess';
+export { WrInput } from './components/WrInput';
+export { WrNav } from './components/WrNav';
+export { WrSection } from './components/WrSection';
+export { WrShared } from './components/WrShared';
+export { WrText } from './components/WrText';
+export { WrVideo } from './components/WrVideo';
+//# sourceMappingURL=index.js.map

package/dist/interactive.d.ts

@@ -0,0 +1,8 @@
+export declare const WR_INTERACTIVE_ATTR = "data-wr-interactive";
+/** Da spargere sull'elemento radice di un componente interattivo. */
+export declare const wrInteractive: {
+    readonly "data-wr-interactive": "true";
+};
+/** Vero se l'elemento è un componente che si accende come interattivo. */
+export declare const isWrInteractive: (el: Pick<Element, "hasAttribute"> | null | undefined) => boolean;
+//# sourceMappingURL=interactive.d.ts.map

package/dist/interactive.js

@@ -0,0 +1,13 @@
+// Un elemento "interattivo" è uno su cui un click FA qualcosa nella pagina (un link naviga, un bottone agisce, un iframe è una pagina
+// viva): in anteprima deve continuare a farlo. Quindi non si seleziona cliccandolo: lo si seleziona dalla maniglia che compare quando
+// ci si passa sopra (stessa cosa dei link e dei bottoni).
+//
+// Un solo meccanismo, dichiarativo: un componente "si accende" mettendo `{...wrInteractive}` sul suo elemento. Il bridge non conosce
+// nessun componente per nome, legge solo questo marcatore: un componente nuovo che deve comportarsi così ha una riga, e il bridge
+// non cambia. (Solo nel package editor: il core è puro rendering e non sa nulla dell'editor.)
+export const WR_INTERACTIVE_ATTR = 'data-wr-interactive';
+/** Da spargere sull'elemento radice di un componente interattivo. */
+export const wrInteractive = { [WR_INTERACTIVE_ATTR]: 'true' };
+/** Vero se l'elemento è un componente che si accende come interattivo. */
+export const isWrInteractive = (el) => !!el && el.hasAttribute(WR_INTERACTIVE_ATTR);
+//# sourceMappingURL=interactive.js.map