@webround/editor 0.0.0-stage → 0.3.0

package/dist/blocks.d.ts

@@ -0,0 +1,90 @@
+export type WrBlockCategory = 'layout' | 'element' | 'section';
+export interface WrBlock {
+    /** Anche la chiave dei testi (etichetta e descrizione) nell'editor, e della sua icona. */
+    id: string;
+    category: WrBlockCategory;
+    /** Markup JSX da inserire: uno o più elementi, tutti componenti Wr* al primo livello se deve essere annullabile. */
+    jsx: string;
+}
+export declare const WR_BLOCKS: readonly [{
+    readonly id: "section";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "container";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "stack";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "row";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "columns-2";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "columns-3";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "grid";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "heading";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "text";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "button";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "link";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "image";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "video";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "contact-form";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "embed";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "hero";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "features";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "image-text";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}, {
+    readonly id: "cta";
+    readonly category: WrBlockCategory;
+    readonly jsx: string;
+}];
+export type WrBlockId = (typeof WR_BLOCKS)[number]['id'];
+export declare const WR_BLOCK_CATEGORIES: readonly WrBlockCategory[];
+/** I blocchi di una categoria, nell'ordine del catalogo. */
+export declare const blocksOf: (category: WrBlockCategory, blocks?: readonly WrBlock[]) => WrBlock[];
+//# sourceMappingURL=blocks.d.ts.map

package/dist/blocks.js

@@ -0,0 +1,119 @@
+// Il catalogo dei blocchi che l'editor sa aggiungere a una pagina.
+//
+// Un blocco è DATO, non logica: un id, una categoria e del JSX. Quel JSX è lo stesso che uno sviluppatore scriverebbe a mano o che
+// un'AI produrrebbe (vedi INSERT.md): l'interfaccia lo manda così com'è a `wr:node:insert`, e il plugin sceglie gli id liberi, indenta
+// e importa. Aggiungere un blocco = aggiungere una voce qui, senza toccare altro.
+//
+// Regole dei blocchi (le stesse da seguire scrivendone di nuovi):
+//  - Layout con classi Tailwind, mobile-first: la base è il telefono, `md:` il tablet, `lg:` il desktop. Niente `style` inline.
+//  - Colori solo dai token semantici del template (bg-page, text-fg, text-muted, bg-surface, border-line, bg-accent, text-on-accent…):
+//    seguono il tema chiaro e scuro del sito senza varianti `dark:`.
+//  - Il testo iniziale sta nel codice (`html="…"` su WrText, i figli su WrLink e WrButton), non in JSON: il JSON nasce solo
+//    quando l'utente lo modifica o lo traduce. Per questo un blocco non porta mai valori JSON con sé.
+//  - Gli id dicono cosa sono; se già presi il plugin li rinumera.
+const block = (id, category, jsx) => ({ id, category, jsx: jsx.trim() });
+export const WR_BLOCKS = [
+    // ── Layout ─────────────────────────────────────────────────────────────
+    block('section', 'layout', `
+<WrSection id="section" className="flex flex-col gap-6 px-6 py-16" />`),
+    block('container', 'layout', `
+<WrSection id="container" className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6" />`),
+    block('stack', 'layout', `
+<WrSection id="stack" className="flex flex-col gap-4" />`),
+    block('row', 'layout', `
+<WrSection id="row" className="flex flex-col gap-4 md:flex-row md:items-center" />`),
+    block('columns-2', 'layout', `
+<WrSection id="columns" className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-6 px-6 py-12 md:grid-cols-2">
+  <WrSection id="column-a" className="flex flex-col gap-4" />
+  <WrSection id="column-b" className="flex flex-col gap-4" />
+</WrSection>`),
+    block('columns-3', 'layout', `
+<WrSection id="columns" className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-6 px-6 py-12 md:grid-cols-3">
+  <WrSection id="column-a" className="flex flex-col gap-4" />
+  <WrSection id="column-b" className="flex flex-col gap-4" />
+  <WrSection id="column-c" className="flex flex-col gap-4" />
+</WrSection>`),
+    block('grid', 'layout', `
+<WrSection id="grid" className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-6 px-6 py-12 sm:grid-cols-2 lg:grid-cols-4">
+  <WrSection id="cell-a" className="flex flex-col gap-4" />
+  <WrSection id="cell-b" className="flex flex-col gap-4" />
+  <WrSection id="cell-c" className="flex flex-col gap-4" />
+  <WrSection id="cell-d" className="flex flex-col gap-4" />
+</WrSection>`),
+    // ── Elementi ───────────────────────────────────────────────────────────
+    block('heading', 'element', `
+<WrText id="heading" className="text-3xl font-bold tracking-tight text-fg md:text-4xl" html="<h2 class='editor-heading-h2'>Titolo della sezione</h2>" />`),
+    block('text', 'element', `
+<WrText id="text" className="text-base text-muted" html="<p class='editor-paragraph'>Scrivi qui il tuo testo.</p>" />`),
+    block('button', 'element', `
+<WrButton id="button" className="rounded-full bg-accent px-6 py-3 font-semibold text-on-accent transition-colors hover:bg-accent-hover">Pulsante</WrButton>`),
+    block('link', 'element', `
+<WrLink id="link" href="#" className="font-medium text-accent-text">Link</WrLink>`),
+    block('image', 'element', `
+<WrImage id="image" src="https://placehold.co/1200x800?text=Immagine" className="h-auto w-full rounded-xl object-cover" />`),
+    block('video', 'element', `
+<WrVideo id="video" controls className="aspect-video w-full rounded-xl bg-surface-2" />`),
+    block('contact-form', 'section', `
+<WrSection id="contact" className="mx-auto flex w-full max-w-xl flex-col gap-6 px-6 py-16">
+  <WrText id="contact-title" className="text-3xl font-bold tracking-tight text-fg" html="<h2 class='editor-heading-h2'>Scrivici</h2>" />
+  <WrForm id="contact-form" className="flex flex-col gap-4">
+    <WrInput id="contact-name" type="text" required className="w-full rounded-xl border border-line bg-page px-4 py-3 text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent" label="Nome" placeholder="Il tuo nome" />
+    <WrInput id="contact-email" type="email" required className="w-full rounded-xl border border-line bg-page px-4 py-3 text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent" label="Email" placeholder="nome@esempio.it" />
+    <WrInput id="contact-message" type="textarea" required className="w-full rounded-xl border border-line bg-page px-4 py-3 text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-accent" label="Messaggio" placeholder="Come possiamo aiutarti?" />
+    <WrAltcha id="contact-altcha" />
+    <WrFormPrivacy id="contact-privacy">
+      <WrText id="contact-privacy-text" html="<p class='editor-paragraph'>Ho letto la <a href='/privacy-policy'>privacy policy</a> e acconsento al trattamento dei miei dati.</p>" />
+    </WrFormPrivacy>
+    <WrButton id="contact-send" type="submit" className="mx-auto rounded-full bg-accent px-6 py-3 font-semibold text-on-accent transition-colors hover:bg-accent-hover disabled:cursor-not-allowed disabled:opacity-50">Invia</WrButton>
+    <WrFormSuccess id="contact-success" className="rounded-xl border border-line bg-surface p-6 text-center">
+      <WrText id="contact-success-text" className="text-fg" html="<p class='editor-paragraph'>Grazie! Abbiamo ricevuto il tuo messaggio.</p>" />
+    </WrFormSuccess>
+  </WrForm>
+</WrSection>`),
+    block('embed', 'element', `
+<WrIframe id="embed" src="about:blank" title="Contenuto incorporato" allowFullScreen className="aspect-video w-full rounded-xl border border-line bg-surface-2" />`),
+    // ── Sezioni (composizioni pronte) ──────────────────────────────────────
+    block('hero', 'section', `
+<WrSection id="hero" className="flex flex-col items-center gap-6 px-6 py-20 text-center md:py-28">
+  <WrText id="hero-title" className="max-w-3xl text-4xl font-extrabold tracking-tight text-fg md:text-6xl" html="<h1 class='editor-heading-h1'>Un titolo che dice tutto</h1>" />
+  <WrText id="hero-text" className="max-w-xl text-lg text-muted" html="<p class='editor-paragraph'>Una frase che spiega cosa offri e perché valga la pena restare.</p>" />
+  <WrLink id="hero-cta" href="#" className="rounded-full bg-accent px-7 py-3 font-semibold text-on-accent transition-colors hover:bg-accent-hover">Inizia</WrLink>
+</WrSection>`),
+    block('features', 'section', `
+<WrSection id="features" className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-6 py-16">
+  <WrText id="features-title" className="text-center text-3xl font-bold tracking-tight text-fg md:text-4xl" html="<h2 class='editor-heading-h2'>Perché sceglierci</h2>" />
+  <WrSection id="features-grid" className="grid grid-cols-1 gap-6 md:grid-cols-3">
+    <WrSection id="feature-1" className="flex flex-col gap-2 rounded-xl border border-line bg-surface p-6">
+      <WrText id="feature-1-title" className="text-lg font-semibold text-fg" html="<h3 class='editor-heading-h3'>Primo vantaggio</h3>" />
+      <WrText id="feature-1-text" className="text-muted" html="<p class='editor-paragraph'>Spiega in poche parole di cosa si tratta.</p>" />
+    </WrSection>
+    <WrSection id="feature-2" className="flex flex-col gap-2 rounded-xl border border-line bg-surface p-6">
+      <WrText id="feature-2-title" className="text-lg font-semibold text-fg" html="<h3 class='editor-heading-h3'>Secondo vantaggio</h3>" />
+      <WrText id="feature-2-text" className="text-muted" html="<p class='editor-paragraph'>Spiega in poche parole di cosa si tratta.</p>" />
+    </WrSection>
+    <WrSection id="feature-3" className="flex flex-col gap-2 rounded-xl border border-line bg-surface p-6">
+      <WrText id="feature-3-title" className="text-lg font-semibold text-fg" html="<h3 class='editor-heading-h3'>Terzo vantaggio</h3>" />
+      <WrText id="feature-3-text" className="text-muted" html="<p class='editor-paragraph'>Spiega in poche parole di cosa si tratta.</p>" />
+    </WrSection>
+  </WrSection>
+</WrSection>`),
+    block('image-text', 'section', `
+<WrSection id="image-text" className="mx-auto grid w-full max-w-5xl grid-cols-1 items-center gap-10 px-6 py-16 md:grid-cols-2">
+  <WrImage id="image-text-image" src="https://placehold.co/1200x900?text=Immagine" className="h-auto w-full rounded-xl object-cover" />
+  <WrSection id="image-text-body" className="flex flex-col items-start gap-4">
+    <WrText id="image-text-title" className="text-3xl font-bold tracking-tight text-fg" html="<h2 class='editor-heading-h2'>Racconta la tua storia</h2>" />
+    <WrText id="image-text-text" className="text-muted" html="<p class='editor-paragraph'>Un paragrafo accanto a un'immagine funziona sempre.</p>" />
+    <WrLink id="image-text-cta" href="#" className="font-medium text-accent-text">Scopri di più</WrLink>
+  </WrSection>
+</WrSection>`),
+    block('cta', 'section', `
+<WrSection id="cta" className="mx-auto my-16 flex w-full max-w-4xl flex-col items-center gap-5 rounded-2xl bg-accent-soft px-6 py-14 text-center">
+  <WrText id="cta-title" className="text-3xl font-bold tracking-tight text-fg" html="<h2 class='editor-heading-h2'>Pronto a iniziare?</h2>" />
+  <WrText id="cta-text" className="max-w-xl text-muted" html="<p class='editor-paragraph'>Invita a fare il passo successivo con una frase chiara.</p>" />
+  <WrButton id="cta-button" className="rounded-full bg-accent px-7 py-3 font-semibold text-on-accent transition-colors hover:bg-accent-hover">Contattaci</WrButton>
+</WrSection>`),
+];
+export const WR_BLOCK_CATEGORIES = ['layout', 'element', 'section'];
+/** I blocchi di una categoria, nell'ordine del catalogo. */
+export const blocksOf = (category, blocks = WR_BLOCKS) => blocks.filter(b => b.category === category);
+//# sourceMappingURL=blocks.js.map

package/dist/bridge.d.ts

@@ -0,0 +1,96 @@
+import { type WrScope } from './scope';
+import type { WrEditorOutbound, WrAnchor, WrAnchorMode, WrStyleGetResponse } from './messages';
+export declare function setWrNavigate(navigate: (to: string) => void): void;
+export declare function setWrHistory(undo: () => void, redo: () => void): void;
+export declare function setWrPageFile(file: string): void;
+export declare function setWrPageName(pageName: string): void;
+declare let wrAstHistoryPush: ((elementId: string, key: string, prevValue: string | boolean | number | undefined, nextValue: string | boolean | number, scope: WrScope) => void) | null;
+export declare function setWrAstHistoryPush(fn: typeof wrAstHistoryPush): void;
+declare let wrStyleHistoryPush: ((elementId: string, prevClassName: string, nextClassName: string, scope: WrScope) => void) | null;
+export declare function setWrStyleHistoryPush(fn: typeof wrStyleHistoryPush): void;
+export interface WrNodeHistoryEntry {
+    op: 'insert' | 'delete';
+    /** File e JSON su cui è stato fatto: l'undo e il redo lavorano lì, ovunque sia chi li chiede. */
+    scope: WrScope;
+    /** Radici coinvolte: una per la delete, una o più per l'insert (l'undo le rimuove tutte). */
+    elementIds: string[];
+    jsx: string;
+    anchor: WrAnchor | null;
+    anchorMode: WrAnchorMode;
+    /** Solo per op 'delete': id di tutto il sottoalbero rimosso, per leggerne i valori JSON correnti. */
+    removedIds?: string[];
+    /** Solo per op 'insert': valori JSON iniziali dei nuovi nodi. */
+    jsonSeed?: Record<string, unknown>;
+}
+/** Uno spostamento: l'undo lo rifà al contrario, e il redo lo ripete. */
+export interface WrMoveHistoryEntry {
+    scope: WrScope;
+    elementId: string;
+    from: {
+        anchor: WrAnchor;
+        mode: WrAnchorMode;
+    };
+    to: {
+        anchor: WrAnchor;
+        mode: WrAnchorMode;
+    };
+}
+declare let wrMoveHistoryPush: ((entry: WrMoveHistoryEntry) => void) | null;
+export declare function setWrMoveHistoryPush(fn: typeof wrMoveHistoryPush): void;
+declare let wrNodeHistoryPush: ((entry: WrNodeHistoryEntry) => void) | null;
+export declare function setWrNodeHistoryPush(fn: typeof wrNodeHistoryPush): void;
+export declare function fetchNode(elementId: string, scope?: WrScope | null): Promise<{
+    fields: string[];
+    values: Record<string, string | boolean | number>;
+}>;
+/** Come è stilato un elemento (le sue classi, per proprietà e breakpoint), nella forma che l'editor mostra. */
+export declare function fetchStyle(elementId: string, scope?: WrScope | null): Promise<WrStyleGetResponse>;
+/** Rimette le classi di un elemento esattamente come dette (l'undo e il redo di una modifica di stile). */
+export declare function restoreStyle(elementId: string, className: string, scope?: WrScope | null): Promise<boolean>;
+/** value === null rimuove l'attributo (usato solo internamente, dall'undo). */
+export declare function putNode(elementId: string, key: string, value: string | boolean | number | null, scope?: WrScope | null): Promise<boolean>;
+/** Cancella il nodo intero (e i suoi discendenti) dal TSX. Ritorna anche cosa/dove, per l'undo. */
+export interface DeletedNode {
+    removedIds: string[];
+    removedJsx: string;
+    anchor: WrAnchor | null;
+    anchorMode: WrAnchorMode;
+}
+/**
+ * `{ error }` = l'operazione non l'ha cancellato e dice perché (es. la radice di un header); `null` = niente da fare (nessun file).
+ * Insieme al nodo se ne vanno i valori JSON suoi e dei discendenti: lo fa l'operazione, per tutti.
+ */
+export declare function deleteNode(elementId: string, scope?: WrScope | null): Promise<DeletedNode | {
+    error: string;
+} | null>;
+export interface InsertRawResult {
+    ok: boolean;
+    ids: string[];
+    rootIds: string[];
+    undoable: boolean;
+    idMap: Record<string, string>;
+    /** Il markup come è finito nel file (id finali): quello che un redo deve reinserire. */
+    jsx: string;
+    code?: string;
+    error?: string;
+}
+/** Sposta un elemento (con ciò che contiene) in un altro punto dello stesso file. Ritorna dov'era, per annullare. */
+export type MoveNodeResult = {
+    ok: true;
+    from: {
+        anchor: WrAnchor;
+        mode: WrAnchorMode;
+    };
+} | {
+    ok: false;
+    code?: string;
+    error: string;
+};
+export declare function moveNode(elementId: string, anchor: WrAnchor, anchorMode: WrAnchorMode, scope?: WrScope | null): Promise<MoveNodeResult>;
+export declare function insertRawNode(anchor: WrAnchor, anchorMode: WrAnchorMode, rawJsx: string, uniqueIds?: boolean, scope?: WrScope | null, jsonSeed?: Record<string, unknown>): Promise<InsertRawResult>;
+export declare function postToEditor(msg: WrEditorOutbound, transfer?: Transferable[]): void;
+export declare function refreshSelection(id: string): void;
+export declare function postHistoryState(canUndo: boolean, canRedo: boolean): void;
+export declare function initWrBridge(editorOrigin: string): () => void;
+export {};
+//# sourceMappingURL=bridge.d.ts.map