create-email-template 0.1.1

package/README.md

@@ -0,0 +1,356 @@
+# create-email-template
+
+Editor visual de plantillas de email por bloques para React: palette, canvas con drag & drop, edición de texto inline enriquecida, panel de propiedades, autoguardado, deshacer y preview en móvil/escritorio.
+
+El JSON que produce se renderiza a HTML email-safe con su compañero [`create-email-renderer`](https://www.npmjs.com/package/create-email-renderer) (**sin React**, pensado para backend/edge). Ambas librerías comparten el mismo core, por lo que el preview del editor y el HTML final nunca divergen.
+
+## Instalación
+
+```sh
+npm install create-email-template
+```
+
+Requiere **React `^18 || ^19`** como peer dependency (usa `useSyncExternalStore`, nativo desde React 18).
+
+## Uso mínimo
+
+```tsx
+import { EmailBuilder, EmailBuilderProvider } from "create-email-template";
+import "create-email-template/style.css"; // ¡necesario! Estilos autocontenidos
+
+export function EditorPage() {
+  return (
+    <EmailBuilderProvider>
+      <EmailBuilder />
+    </EmailBuilderProvider>
+  );
+}
+```
+
+`<EmailBuilder />` renderiza el editor completo (palette + canvas + panel de propiedades). Todo lo demás es configuración opcional.
+
+> 📥 **¿Ya creaste una plantilla y quieres volver a editarla?** Ve a [Editar una plantilla existente](#editar-una-plantilla-existente-cargar-del-backend) — se carga con `hydrate()` y el autoguardado sigue guardando sobre esa misma plantilla.
+
+---
+
+## `<EmailBuilderProvider>` — configuración completa
+
+```tsx
+<EmailBuilderProvider
+  config={{ /* opciones del builder (todas opcionales) */ }}
+  uploadImage={fnUpload}   // opcional: subida de imágenes
+  autosave={{ /* opcional: autoguardado */ }}
+>
+```
+
+### `config`
+
+| Opción | Tipo | Default | Qué hace |
+|---|---|---|---|
+| `blockDefaults` | `Partial<Record<Bloque, Partial<Props>>>` | — | Valores iniciales por tipo de bloque. Se aplican **al arrastrar** el bloque al canvas. |
+| `blockLibrary` | `BlockDefinition[]` | `DEFAULT_BLOCK_LIBRARY` (12 bloques) | Qué bloques aparecen en la palette y con qué defaultProps. |
+| `palette` | `Partial<EmailPalette>` | `DEFAULT_PALETTE` | Colores base del tema: `INK` (texto), `DARK` (fondos oscuros), `GOLD` (acentos), `CREAM_DIM` (texto secundario). |
+| `defaultSettings` | `Partial<EmailSettings>` | `DEFAULT_SETTINGS` | Fondo de página, grosor y redondeo del borde de la tarjeta. |
+| `variables` | `EmailVariable[]` | `DEFAULT_VARIABLES` | Etiquetas `{key}` disponibles para el usuario. |
+| `variableSections` | `EmailVariableSection[]` | agrupación única | Agrupa las variables por categoría en el dialog "Etiquetas disponibles". |
+| `sampleContext` | `EmailContext` | `SAMPLE_CONTEXT` | Datos de ejemplo: al previsualizar, `{firstName}` se ve como el valor de aquí. |
+| `labels` | `Partial<EmailBuilderLabels>` | `DEFAULT_LABELS` (español) | Textos de la UI del editor (i18n). |
+| `historyLimit` | `number` | `50` | Profundidad máxima del historial de deshacer. |
+
+#### Ejemplo real de `config`
+
+```tsx
+<EmailBuilderProvider
+  config={{
+    // Al arrastrar un header, nace con la marca y el logo ya puestos
+    blockDefaults: {
+      header: { brandName: "Mi Marca", logoUrl: "https://mi-cdn.com/logo.png" },
+      text: { text: "Hola {firstName}, gracias por ser parte de nuestra comunidad." },
+      button: { label: "Quiero mi cupo", href: "{registerUrl}", backgroundColor: "#d7b227" },
+      footer: { brandName: "Mi Marca" },
+    },
+
+    // Personaliza el tema completo
+    palette: { INK: "#221d15", DARK: "#0d0b08", GOLD: "#d7b227", CREAM_DIM: "#b8ae9d" },
+    defaultSettings: { pageBackground: "#f5f1e8", cardBorderWidth: 1, cardBorderRadius: 4 },
+
+    // Contexto de ejemplo para el preview de variables
+    sampleContext: {
+      firstName: "Danny",
+      companyName: "Mi Empresa",
+      registerUrl: "https://mi-sitio.com/registro",
+      unsubscribeUrl: "https://mi-sitio.com/baja",
+    },
+
+    // Solo estas variables aparecen en el editor (si lo omites: todas las defaults)
+    variables: [
+      { key: "firstName", label: "Nombre" },
+      { key: "email", label: "Correo electrónico" },
+      { key: "registerUrl", label: "URL de registro" },
+    ],
+
+    // Más undo (cada snapshot es del estado completo de bloques)
+    historyLimit: 100,
+  }}
+>
+```
+
+#### Bloques disponibles y sus props
+
+Todos los bloques aceptan `align` ("left" | "center" | "right"), `backgroundColor`, `paddingY` y `paddingX`.
+
+| Tipo | Props específicas |
+|---|---|
+| `header` | `brandName`, `tagline?`, `logoUrl?` |
+| `hero` | `title`, `subtitle?`, `imageUrl?` |
+| `heading` | `text`, `size?`, `color?` |
+| `text` | `text`, `size?`, `color?` |
+| `list` | `items: string[]`, `icon?` ("✓", "•", "→"…) |
+| `button` | `label`, `href` (acepta variables), `backgroundColor?`, `color?`, `blockBackgroundColor?` |
+| `image` | `src`, `alt?`, `width?`, `href?` (si hay `href`, la imagen es clicable) |
+| `quote` | `text`, `author?`, `borderColor?`, `borderWidth?`, `marginLeft?` |
+| `columns` | `columns: { id: string; text: string }[]` |
+| `divider` | `color?`, `height?` |
+| `spacer` | `height?`, `backgroundColor?` |
+| `footer` | `text?`, `brandName?`, `backgroundColor?` |
+
+### `uploadImage`
+
+Se invoca cuando el usuario sube una imagen desde el panel de propiedades. Recibe el `File` y debe devolver la **URL pública** donde quedó alojada (S3, R2, tu API…):
+
+```tsx
+uploadImage={async (file: File) => {
+  const form = new FormData();
+  form.append("file", file);
+  const res = await fetch("/api/uploads", { method: "POST", body: form });
+  const { url } = await res.json();
+  return url; // esta URL queda en la prop `src` del bloque image
+}}
+```
+
+---
+
+## Autoguardado (`autosave`) y guardado manual
+
+Opt-in: sin la prop, no hay guardado automático. La librería **no hace network** — `onSave` es tu fetch.
+
+```tsx
+import type { AutosavePayload } from "create-email-template";
+
+async function onSave(payload: AutosavePayload) {
+  const res = await fetch(`/api/templates/${templateId}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload), // { content, settings } → tu BD
+  });
+  if (!res.ok) throw new Error("Error al guardar");
+  return res.json(); // lo que devuelvas llega a `lastResult` (ej. { json, html })
+}
+
+<EmailBuilderProvider
+  autosave={{
+    onSave,        // obligatorio
+    intervalMs: 10_000, // default 10s
+    enabled: true,      // interruptor sin desmontar el provider
+    onSaved: (r) => {   // opcional: feedback por intento
+      if (!r.ok) toast.error("No se pudo guardar");
+    },
+  }}
+>
+```
+
+Cómo funciona el ciclo: cada `intervalMs`, si hay cambios (`dirty`) y no hay un guardado en vuelo, llama a `onSave` y limpia `dirty`. Si el usuario edita durante el guardado, el próximo tick toma los cambios — no se pierde nada.
+
+### `useAutosaveStatus()` — estado y botón de guardado manual
+
+```tsx
+import { useAutosaveStatus } from "create-email-template";
+
+function Toolbar() {
+  const { isSaving, lastSavedAt, lastError, lastResult, saveNow } = useAutosaveStatus();
+
+  return (
+    <>
+      {/* saveNow() dispara el MISMO onSave, inmediatamente → botón "Guardar" manual */}
+      <button onClick={() => saveNow()} disabled={isSaving}>
+        {isSaving ? "Guardando…" : "Guardar"}
+      </button>
+
+      {lastSavedAt && <span>Guardado a las {lastSavedAt.toLocaleTimeString()}</span>}
+      {lastError && <span className="error">Error al guardar</span>}
+
+      {/* lastResult = lo que devolvió tu onSave. Ej.: mostrar el HTML real del backend */}
+      {lastResult?.html && <iframe srcDoc={lastResult.html} title="Vista del servidor" />}
+    </>
+  );
+}
+```
+
+| Campo | Descripción |
+|---|---|
+| `isSaving` | Hay un guardado en vuelo. |
+| `lastSavedAt` | Fecha del último guardado exitoso. |
+| `lastError` | Error del último intento fallido (se limpia al guardar bien). |
+| `lastResult` | Lo que devolvió tu `onSave` — ej. `{ json, html }` si tu backend renderiza y responde el HTML. |
+| `saveNow()` | Guardado inmediato con los mismos guards: no hace nada si no hay cambios o ya hay uno en vuelo. |
+
+¿Solo botón manual, sin autoguardado? `autosave={{ enabled: false, onSave }}` — `saveNow()` sigue funcionando.
+
+---
+
+## Editar una plantilla existente (cargar del backend)
+
+¿Ya creaste una plantilla y quieres volver a editarla? El ciclo completo es: **fetch del JSON → `hydrate()` → el usuario edita → el autoguardado guarda sobre la misma plantilla**. Ejemplo de página completa:
+
+```tsx
+import { useEffect, useState } from "react";
+import {
+  EmailBuilder,
+  EmailBuilderProvider,
+  useEmailBuilderStoreInstance,
+  type AutosavePayload,
+} from "create-email-template";
+import "create-email-template/style.css";
+
+// 1. Página: trae la plantilla y no monta el editor hasta que llegue
+export function EditorPage({ templateId }: { templateId: string }) {
+  const [payload, setPayload] = useState<AutosavePayload | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/templates/${templateId}`)
+      .then((r) => r.json())
+      .then((template) => setPayload(template.payload)); // { content, settings }
+  }, [templateId]);
+
+  if (!payload) return <p>Cargando plantilla…</p>;
+
+  return (
+    <EmailBuilderProvider
+      config={miConfig}
+      autosave={{
+        // 4. El autoguardado ahora actualiza ESA MISMA plantilla
+        onSave: (data) =>
+          fetch(`/api/templates/${templateId}`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(data),
+          }),
+      }}
+    >
+      {/* 2. Componente puente: inyecta el payload en el store */}
+      <TemplateLoader payload={payload} />
+      {/* 3. El editor arranca ya con los bloques de la plantilla */}
+      <EmailBuilder />
+    </EmailBuilderProvider>
+  );
+}
+
+// Debe vivir DENTRO del provider (usa el store del builder). No renderiza nada.
+function TemplateLoader({ payload }: { payload: AutosavePayload }) {
+  const store = useEmailBuilderStoreInstance();
+
+  useEffect(() => {
+    store.getState().hydrate({
+      blocks: payload.content,
+      settings: payload.settings, // opcional
+    });
+  }, [payload, store]);
+
+  return null;
+}
+```
+
+Qué hace `hydrate({ blocks, settings? })`:
+
+- **Normaliza el payload**: props faltantes se completan con los defaults actuales, tipos desconocidos se descartan — plantillas guardadas con versiones anteriores del esquema cargan sin romperse.
+- **Reinicia el historial de deshacer**: el estado cargado es la base nueva (el undo anterior se descarta).
+- Deja `dirty: false`: el autoguardado **no dispara** hasta que el usuario edite de verdad.
+- Los `id` de los bloques se conservan, así que el guardado actualiza en lugar de duplicar.
+
+> 💡 Cargar antes de montar el editor (el `if (!payload)` del ejemplo) no es obligatorio, pero evita que el usuario edite un canvas vacío y su trabajo se sobrescriba cuando llegue el fetch.
+
+---
+
+## Deshacer
+
+Undo **lineal** (solo hacia atrás, nunca adelante), en memoria:
+
+- Cada acción (añadir/eliminar/reordenar/duplicar bloques, editar propiedades y ajustes) registra un snapshot. Tope: `historyLimit` (50).
+- Las escrituras continuas se **agrupan**: Ctrl+Z deshace la frase escrita, no tecla por tecla.
+- **Ctrl/Cmd+Z ya funciona** dentro de `<EmailBuilder />`. En un campo de texto editable se respeta el undo nativo.
+- Deshacer marca `dirty: true` → el autoguardado persiste el estado deshecho en el siguiente tick.
+- Al `hydrate()` el historial se vacía (el estado cargado es la nueva base).
+
+Para tu propia UI de undo:
+
+```tsx
+import { useEmailBuilderStore } from "create-email-template";
+
+function UndoButton() {
+  const canUndo = useEmailBuilderStore((s) => s.past.length > 0);
+  const undo = useEmailBuilderStore((s) => s.undo);
+  return <button onClick={() => undo()} disabled={!canUndo}>Deshacer</button>;
+}
+```
+
+---
+
+## `useRenderEmail()` — payload y render de preview
+
+```tsx
+import { useRenderEmail } from "create-email-template";
+
+function Acciones() {
+  const { getPayload, renderHtml, getHtml, resolve, html, isPending } = useRenderEmail();
+
+  const guardar = () => fetch("/api/templates", { method: "POST", body: JSON.stringify(getPayload()) });
+  const preview = () => renderHtml({ subject: "Hola {firstName}" }); // html se actualiza
+
+  return <button onClick={preview} disabled={isPending}>Refrescar preview</button>;
+}
+```
+
+| Miembro | Descripción |
+|---|---|
+| `getPayload()` | `{ content: EmailBlock[], settings }` — el JSON para persistir. |
+| `renderHtml(opts?)` | Renderiza el preview con react-email (async). Opciones: `{ subject?, context? }`. |
+| `getHtml(opts?)` | Igual que `renderHtml` pero cacheado: sin opciones devuelve el HTML ya generado. |
+| `resolve(text, ctx?)` | Reemplaza `{etiquetas}` en un texto con el `sampleContext` (o el que pases). |
+| `html` / `isPending` / `setHtml` | Estado reactivo del último render. |
+
+---
+
+## `useEmailBuilderStore(selector)` — estado y acciones
+
+Suscripción selectiva (re-renderiza solo lo que cambia). Requiere el provider.
+
+```tsx
+import { useEmailBuilderStore } from "create-email-template";
+
+const blocks = useEmailBuilderStore((s) => s.blocks);        // bloques actuales
+const dirty = useEmailBuilderStore((s) => s.dirty);          // ¿hay cambios sin guardar?
+const canUndo = useEmailBuilderStore((s) => s.past.length > 0);
+const undo = useEmailBuilderStore((s) => s.undo);
+const addBlock = useEmailBuilderStore((s) => s.addBlock);
+
+addBlock("text");          // añade un bloque de texto al final (con tus blockDefaults)
+addBlock("button", 0);     // …o en una posición específica
+```
+
+**Estado:** `blocks`, `selectedId`, `settings`, `dirty`, `propertiesOpen`, `past` (pila de undo).
+
+**Acciones:** `addBlock(type, index?)` · `removeBlock(id)` · `duplicateBlock(id)` · `updateBlockProps(id, props)` · `reorder(activeIndex, overIndex)` · `setSettings(patch)` · `select(id)` · `setPropertiesOpen(open)` · `hydrate({ blocks, settings? })` · `undo()` · `markSaved()` · `getPayload()`.
+
+¿Fuera de React? `createEmailBuilderStore(config)` crea el mismo store vanilla (`getState`/`setState`/`subscribe`) sin dependencias.
+
+---
+
+## Notas
+
+- **Estilos**: importa `create-email-template/style.css` una vez. Todo va bajo la clase `.ter-theme` con clases `ter-*` — no colisiona con tu Tailwind/CSS.
+- **Componentes sueltos**: también se exportan `BlockPalette`, `Canvas`, `PropertiesPanel`, `EditableBlockRenderer`, `InlineTextEditor`, `SelectionToolbar`, `VariablesInfoDialog` para armar un editor a medida.
+- **Demo completa**: `apps/vite-test` del [monorepo](https://github.com/asmel2020/creator-email-templates) — editor con config de muestra, autoguardado, undo y dialog comparando el render de React vs. el HTML del backend.
+
+## Licencia
+
+MIT

package/dist/components/builder/block-palette.d.ts

@@ -0,0 +1,4 @@
+export declare const BlockPalette: ({ desktop }: {
+    desktop?: boolean;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=block-palette.d.ts.map

package/dist/components/builder/block-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-palette.d.ts","sourceRoot":"","sources":["../../../src/components/builder/block-palette.tsx"],"names":[],"mappings":"AAuCA,eAAO,MAAM,YAAY,GAAI,aAAqB;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,gCAatE,CAAA"}

package/dist/components/builder/canvas.d.ts

@@ -0,0 +1,4 @@
+export declare const SortableCanvas: ({ desktop, }: {
+    desktop?: boolean;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=canvas.d.ts.map

package/dist/components/builder/canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/components/builder/canvas.tsx"],"names":[],"mappings":"AA6BA,eAAO,MAAM,cAAc,GAAI,cAE5B;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,gCA+NA,CAAC"}

package/dist/components/builder/editable-block-renderer.d.ts

@@ -0,0 +1,7 @@
+import { type EmailBlock } from "../../core/types";
+interface Props {
+    block: EmailBlock;
+}
+export declare const EditableBlockRenderer: ({ block }: Props) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=editable-block-renderer.d.ts.map

package/dist/components/builder/editable-block-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-block-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/builder/editable-block-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAUlD,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAA;CAClB;AAED,eAAO,MAAM,qBAAqB,GAAI,WAAW,KAAK,uCAycrD,CAAA"}

package/dist/components/builder/email-builder.d.ts

@@ -0,0 +1,5 @@
+export interface EmailBuilderProps {
+    className?: string;
+}
+export declare const EmailBuilder: ({ className }: EmailBuilderProps) => import("react").JSX.Element;
+//# sourceMappingURL=email-builder.d.ts.map

package/dist/components/builder/email-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-builder.d.ts","sourceRoot":"","sources":["../../../src/components/builder/email-builder.tsx"],"names":[],"mappings":"AAgCA,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,eAAe,iBAAiB,gCA6M5D,CAAA"}

package/dist/components/builder/inline-text-editor.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface Props {
+    value: string;
+    onChange: (next: string) => void;
+    rich?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onEnter?: () => void;
+    onDeleteWhenEmpty?: () => void;
+    autoFocus?: boolean;
+    placeholder?: string;
+}
+export declare const InlineTextEditor: ({ value, onChange, rich, className, style, onEnter, onDeleteWhenEmpty, autoFocus, placeholder, }: Props) => React.JSX.Element;
+export {};
+//# sourceMappingURL=inline-text-editor.d.ts.map

package/dist/components/builder/inline-text-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-text-editor.d.ts","sourceRoot":"","sources":["../../../src/components/builder/inline-text-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAiDxE,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,GAAI,kGAU9B,KAAK,sBA+RP,CAAC"}

package/dist/components/builder/properties-panel.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { type EmailBlock } from "../../core/types";
+interface Props {
+    block: EmailBlock;
+}
+export declare const PropertiesPanel: ({ block }: Props) => React.JSX.Element;
+export {};
+//# sourceMappingURL=properties-panel.d.ts.map

package/dist/components/builder/properties-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"properties-panel.d.ts","sourceRoot":"","sources":["../../../src/components/builder/properties-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,EAAE,KAAK,UAAU,EAAc,MAAM,kBAAkB,CAAA;AAyK9D,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAA;CAClB;AAYD,eAAO,MAAM,eAAe,GAAI,WAAW,KAAK,sBA0U/C,CAAA"}

package/dist/components/builder/selection-toolbar.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface Props {
+    style: React.CSSProperties;
+    onFormat: (command: string, value?: string) => void;
+    innerRef?: React.Ref<HTMLDivElement>;
+    selectionSize: number | null;
+    selectionMaxSize: number;
+    selectionColor: string | null;
+}
+export declare const SelectionToolbar: ({ style, onFormat, innerRef, selectionSize, selectionMaxSize, selectionColor, }: Props) => React.JSX.Element;
+export {};
+//# sourceMappingURL=selection-toolbar.d.ts.map

package/dist/components/builder/selection-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/builder/selection-toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAiBD,eAAO,MAAM,gBAAgB,GAAI,iFAO9B,KAAK,sBAwNP,CAAC"}

package/dist/components/builder/sortable-item.d.ts

@@ -0,0 +1,10 @@
+import { type EmailBlock } from "../../core/types";
+interface Props {
+    block: EmailBlock;
+    index: number;
+    isFirst?: boolean;
+    cardBorderRadius?: number;
+}
+export declare const SortableItem: ({ block, index, isFirst, cardBorderRadius, }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=sortable-item.d.ts.map

package/dist/components/builder/sortable-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-item.d.ts","sourceRoot":"","sources":["../../../src/components/builder/sortable-item.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAgBlD,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,YAAY,GAAI,8CAK1B,KAAK,gCAyGP,CAAA"}

package/dist/components/builder/variables-info-dialog.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare const VariablesInfoDialog: ({ open, onOpenChange }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=variables-info-dialog.d.ts.map

package/dist/components/builder/variables-info-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables-info-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/builder/variables-info-dialog.tsx"],"names":[],"mappings":"AAaA,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC;AA2GD,eAAO,MAAM,mBAAmB,GAAI,wBAAwB,KAAK,gCA4BhE,CAAA"}

package/dist/components/ui/button.d.ts

@@ -0,0 +1,10 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+type ButtonVariant = "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+export declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}): import("react").JSX.Element;
+export declare const buttonVariants: () => string;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAIjE,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,CAAA;AAC3F,KAAK,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAsB7F,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG;IAAE,OAAO,CAAC,EAAE,aAAa,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,+BAQxE;AAED,eAAO,MAAM,cAAc,cAAW,CAAA"}

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+declare function Dialog({ ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
+declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
+declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
+declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/ui/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAMjE,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAEvD;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,qBAEjE;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,qBAE/D;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAE7D;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,qBAQhC;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBA6BA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAeA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAWxE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,qBAQnC;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA"}

package/dist/components/ui/input.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAS1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/label.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/ui/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQpE;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/sheet.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+declare function Sheet({ ...props }: SheetPrimitive.Root.Props): React.JSX.Element;
+declare function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props): React.JSX.Element;
+declare function SheetClose({ ...props }: SheetPrimitive.Close.Props): React.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetPrimitive.Popup.Props & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props): React.JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
+//# sourceMappingURL=sheet.d.ts.map

package/dist/components/ui/sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAMhE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,qBAErD;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,qBAE/D;AAED,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAE3D;AAgBD,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBA8BA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAWtE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,qBAQlC;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAA"}

package/dist/config/defaults.d.ts

@@ -0,0 +1,3 @@
+import type { EmailBuilderConfig, ResolvedEmailBuilderConfig } from "./types";
+export declare const resolveEmailBuilderConfig: (config?: EmailBuilderConfig) => ResolvedEmailBuilderConfig;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/config/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/config/defaults.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAEV,kBAAkB,EAClB,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAejB,eAAO,MAAM,yBAAyB,GACpC,SAAS,kBAAkB,KAC1B,0BAyCF,CAAC"}