@boxcc/maildeno-editor 0.0.0-stage → 0.4.13

package/dist/blocks/registry.d.ts

@@ -0,0 +1,23 @@
+import { BlockDefinition } from './types';
+/**
+ * Registers a block type.
+ *
+ * ```ts
+ * registerBlock({
+ *   name: "product-card",
+ *   label: "Product Card",
+ *   icon: "<svg …>",
+ *   schema: { … },
+ *   renderCanvas, renderSettings, renderEmail,
+ * });
+ * ```
+ *
+ * A two-argument form, `registerBlock(id, definition)`, is also accepted. The
+ * definition already carries `name`, so the separate id is redundant — but the
+ * built-in blocks are registered that way and external code may be too, so
+ * both keep working. When both are given, the explicit id wins.
+ */
+export declare function registerBlock(definition: BlockDefinition): void;
+export declare function registerBlock(id: string, definition: BlockDefinition): void;
+export declare function getBlock(id: string): BlockDefinition | undefined;
+export declare function getAllBlocks(): ReadonlyMap<string, BlockDefinition>;

package/dist/blocks/types.d.ts

@@ -0,0 +1,73 @@
+import { Component } from 'vue';
+/**
+ * Confirmed against the real generators (html.ts/mjml.ts/react-email.ts):
+ * each is a switch(type) dispatcher with no default case — an unmapped type
+ * renders as an empty string, silently. That's why all three export
+ * renderers are required, not optional-with-fallback.
+ *
+ * Confirmed against CanvasComponent.vue and ContentTab.vue: block dispatch
+ * actually happens in five places, not three — canvas rendering and the
+ * settings panel are separate v-if chains the original README draft didn't
+ * account for. Same "no silent gap" rule applies here for consistency:
+ * renderCanvas and renderSettings are required too.
+ */
+export interface BlockRenderContext {
+    uid: string;
+    marginStyle: string;
+    paddingStyle: string;
+    escapeHtml: (s: string) => string;
+    escapeAttr: (s: string) => string;
+    safeUrl: (s: string) => string;
+    resolveBgCss: (gradient: any, fallback: string) => string;
+    resolveBgVml: (gradient: any, fallback: string) => {
+        vmlOpen: string;
+        vmlClose: string;
+    };
+    getResponsiveClasses: (desktopHide: boolean, mobileHide: boolean, suffix?: string) => string;
+    /** React Email target only — builds JSX style objects instead of CSS
+     * strings (confirmed: hand-rolled, not the real react/mjml packages). */
+    react: {
+        parseCssString: (css: string) => Record<string, string>;
+        parseMarginPaddingDiscrete: (margin?: any, padding?: any) => Record<string, string>;
+        normalizeFontFamily: (value: string) => string;
+        styleObj: (obj: Record<string, any>) => string;
+        normalizeInlineStylesToReact: (html: string) => string;
+        buildInlineJsx: (component: "Text" | "Heading", className: string, styleRecord: Record<string, any>, children: string, as?: string) => string;
+    };
+}
+export interface BlockDefinition {
+    name: string;
+    /**
+     * Shown in the sidebar tooltip and the block's info dialog. Falls back to
+     * `name` when omitted.
+     */
+    label?: string;
+    /**
+     * Sidebar icon. Either a raw SVG string or a Vue component.
+     *
+     * A string is the common case — paste the SVG from whatever icon set you
+     * use, no import or build step. It is rendered inline so it inherits
+     * `currentColor` and the surrounding sizing, which keeps a custom block
+     * visually consistent with the built-in ones.
+     *
+     * Without an icon a registered block still works, but has no sidebar
+     * entry — it can only be added programmatically.
+     */
+    icon?: string | Component;
+    /** Drives future tooling (docs, a generic settings fallback for
+     * third-party blocks). Built-ins point renderSettings at their existing
+     * bespoke panel instead of relying on this to generate one. */
+    schema: Record<string, unknown>;
+    /** Vue component, receives a single `component` prop — the block's own
+     * node from the tree ({ id, componentType, props, ... }). Matches the
+     * existing renderer pattern (ImageRenderer, AnchorRenderer, etc). */
+    renderCanvas: Component;
+    /** Vue component, no props — reads the selected component itself via
+     * useEmailBuilder(), same as every existing panel (ButtonPanel, etc). */
+    renderSettings: Component;
+    renderEmail: {
+        html: (props: any, ctx: BlockRenderContext) => string;
+        mjml: (props: any, ctx: BlockRenderContext) => string;
+        reactEmail: (props: any, ctx: BlockRenderContext) => string;
+    };
+}

package/dist/borderRadius-CkSa1lQ9.js

@@ -0,0 +1,75 @@
+var i = [
+  "top",
+  "right",
+  "bottom",
+  "left"
+];
+function n(t) {
+  const s = {
+    width: t?.width ?? 0,
+    color: t?.color ?? "transparent",
+    style: t?.style ?? "solid"
+  };
+  return Object.fromEntries(i.map((o) => [o, {
+    ...s,
+    ...t?.sides?.[o]
+  }]));
+}
+function f(t) {
+  const { sides: s, ...o } = t;
+  return s ? {
+    ...o,
+    ...n(t).top
+  } : {
+    ...o,
+    sides: n(t)
+  };
+}
+function m(t) {
+  return Object.values(n(t)).some((s) => s.width > 0 && s.style !== "none");
+}
+function p(t) {
+  const s = n(t);
+  if (!t?.sides) {
+    const { width: o, style: r, color: e } = s.top;
+    return { border: `${o}px ${r} ${e}` };
+  }
+  return Object.fromEntries(i.map((o) => {
+    const { width: r, style: e, color: c } = s[o];
+    return [`border${o[0].toUpperCase()}${o.slice(1)}`, `${r}px ${e} ${c}`];
+  }));
+}
+function u(t, s = !1) {
+  return Object.entries(p(t)).map(([o, r]) => `${o.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`)}:${r}${s ? " !important" : ""}`).join(";");
+}
+function a(t = 0) {
+  return typeof t == "number" ? {
+    topLeft: t,
+    topRight: t,
+    bottomRight: t,
+    bottomLeft: t
+  } : { ...t };
+}
+function b(t = 0) {
+  return Object.values(a(t)).some((s) => s > 0);
+}
+function d(t = 0, s = 0) {
+  const o = (r) => `${r > 0 ? r + s : 0}px`;
+  return typeof t == "number" ? o(t) : [
+    t.topLeft,
+    t.topRight,
+    t.bottomRight,
+    t.bottomLeft
+  ].map(o).join(" ");
+}
+export {
+  n as a,
+  m as c,
+  i,
+  f as l,
+  a as n,
+  p as o,
+  d as r,
+  u as s,
+  b as t
+};

package/dist/components/features/emailBuilder/EmailEditor.vue.d.ts

@@ -0,0 +1,182 @@
+import { ColorMode } from '../../../composables/system/useColorScheme';
+import { PartialStorageAdapter } from '../../../adapters/types';
+import { ThemeOptions } from '../../../theme';
+import { AssistantMount, EditorWriteApi } from '../../../types/assistant';
+type __VLS_Props = {
+    isReady?: boolean;
+    storageAdapter?: PartialStorageAdapter;
+    /** If given, loaded via the adapter on mount. Omit to start blank
+     * (create mode) — matches the original app's /create vs /edit split,
+     * now driven by a prop instead of a route. */
+    templateId?: string;
+    /** Applied via CSS custom properties (see theme.ts) — works whether this
+     * component is used directly or wrapped by element.ts's
+     * defineCustomElement, because both write to the same place: this
+     * component's own root element, which is where the package's bundled
+     * defaults land too once the library build has scoped them. Reactive:
+     * assigning a new object re-themes live, no remount. */
+    theme?: ThemeOptions;
+    /**
+     * Which half of `theme` applies.
+     *
+     * `auto` (the default) follows the host page: useColorScheme.ts watches
+     * for a `dark` class on <html> or <body> and mirrors it onto the editor
+     * root. A host that already has a Tailwind-style theme switcher needs no
+     * wiring at all — flipping the class moves the editor in the same frame.
+     *
+     * Pass `light` or `dark` to pin the editor regardless of the page: a
+     * light editor deliberately embedded in a dark shell, or a host whose
+     * switcher signals something other than a class.
+     */
+    colorMode?: ColorMode;
+    /** If provided, the "Send test" button appears in the header. Editor
+     * owns the form/validation UI; this callback owns what actually
+     * happens on submit (SMTP, an API, anything) — same host-owns-the-
+     * operation pattern as the storage adapter. */
+    /**
+     * Called after a successful save. Its presence is what reveals the Save
+     * button — same idiom as onSendTestEmail below.
+     *
+     * Gating on an explicit handler rather than on the storage adapter,
+     * because the adapter can't answer the question: PartialStorageAdapter
+     * is merged with the localStorage defaults, so `saveTemplate` always
+     * exists by the time anything reads it. A host that wants a read-only or
+     * guest editor simply omits this.
+     *
+     * The `save` event still fires alongside, so `@save` keeps working — and
+     * because Vue compiles `@save="fn"` to an `onSave` prop, writing the
+     * listener is itself enough to reveal the button.
+     */
+    onSave?: (payload: {
+        templateId: string | null;
+    }) => void;
+    /**
+     * The same handler, under a name that doesn't begin with "on".
+     *
+     * For the custom-element path only. Vue's defineCustomElement treats
+     * `on*` keys as event listeners rather than props, so `el.onSave = fn`
+     * never reaches this component — the button appeared and the callback
+     * never fired. init() sets this instead. Vue hosts should use `@save`.
+     */
+    saveHandler?: (payload: {
+        templateId: string | null;
+    }) => void;
+    onSendTestEmail?: (payload: {
+        to: string;
+        subject: string;
+        html: string;
+    }) => Promise<void> | void;
+    /** Explicit UI restrictions, layered on top of the implicit ones
+     * (e.g. onSendTestEmail's mere presence/absence already gates that
+     * button — capabilities doesn't replace that, it adds to it).
+     * Omit any key to leave that area fully enabled — this restricts,
+     * it never grants something that wasn't already possible. */
+    capabilities?: {
+        /** Which formats appear in the Export dropdown. Omit for all four. */
+        export?: Array<"html" | "mjml" | "react" | "json">;
+        /** Which saved-row controls this user gets: the canvas row's bookmark
+         * button, and the panel's per-row rename and delete. Omit a key for
+         * "allowed", the same as omitting the object. For a host with roles,
+         * this is what stops a viewer being shown three buttons that can only
+         * 403 — the toast their adapter raises afterwards is the backstop, not
+         * the design. Does not touch the Shared tab, which is read-only for
+         * everyone because no adapter method backs writing to it. */
+        savedRows?: {
+            create?: boolean;
+            rename?: boolean;
+            delete?: boolean;
+        };
+    };
+    /** Name shown in the loading overlay and in the desktop-only notice's
+     * "Powered by" line.
+     *
+     * Deliberately a prop rather than a theme token: `theme` carries
+     * colours, and this is text, so it has no sensible home in the token
+     * map. It is also the one piece of chrome a host cannot restyle away,
+     * since the notice replaces the entire editor on small screens.
+     *
+     * No default is declared here on purpose. Both consumers resolve an
+     * undefined value from DEFAULT_BRAND_NAME in brand.ts, so there is one
+     * place to change it rather than three that can drift — and declaring a
+     * default here would also make the empty-string case unreachable, since
+     * the prop would never arrive undefined. Omit for the package default;
+     * pass an empty string to render no wordmark and drop the attribution
+     * line entirely. */
+    brandName?: string;
+    /** Replaces the saved-templates panel (and its header button) with
+     * version history.
+     *
+     * A swap rather than an addition, because the two answer different
+     * questions — "which template?" versus "which state of this template?"
+     * — and a host that has its own template browser elsewhere in its app
+     * has no use for the former inside the editor. Two panels competing for
+     * the same slot would also mean two header buttons and a layout
+     * decision the editor shouldn't be making.
+     *
+     * Top-level rather than a `capabilities` key on purpose: capabilities
+     * documents itself as only ever restricting, never granting, and this
+     * grants.
+     *
+     * The panel still degrades per-method — see the version methods on
+     * EditorStorageAdapter. Setting this with an adapter that can't list
+     * versions gets an honest "not supported" message, not a broken panel. */
+    versions?: boolean;
+    /** Fills the assistant drawer from a non-Vue host (init(), React,
+     * vanilla). Vue hosts use the #assistant slot instead; either one being
+     * present reveals the trigger button, and neither means no assistant UI
+     * renders at all.
+     *
+     * The editor supplies the drawer, its trigger, open/close state, escape
+     * handling, focus return and shadow-DOM-safe teleporting. What goes
+     * inside is entirely the host's — see the AssistantPanel comment for
+     * why the assistant itself isn't in this package. */
+    assistant?: AssistantMount;
+};
+declare var __VLS_17: {
+    templateId: string | null;
+    isSaving: boolean;
+    saveStatus: import('../../..').AutoSaveStatus;
+}, __VLS_80: {
+    editor: EditorWriteApi;
+};
+type __VLS_Slots = {} & {
+    'header-actions'?: (props: typeof __VLS_17) => any;
+} & {
+    assistant?: (props: typeof __VLS_80) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    getHtml: (mode?: "prune" | "wrap") => string | null;
+    getMjml: (mode?: "prune" | "wrap") => string | null;
+    getReactEmail: (mode?: "prune" | "wrap") => string | null;
+    getJson: () => {
+        template_id: string;
+        template_name: string;
+        canvas: Partial<import('../../..').Canvas>;
+        rows: Partial<import('../../..').NestedRow | import('../../..').RowSpacer>[];
+        schema_version: string;
+    } | null;
+    setJson: (data: any, opts?: {
+        history?: "undoable" | "reset";
+    }) => void;
+    getSelection: () => {
+        id: string;
+        type: string | null;
+    } | null;
+    setSelection: (id: string | null) => boolean;
+    onChange: (cb: () => void) => (() => void);
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    ready: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: (() => any) | undefined;
+}>, {
+    isReady: boolean;
+    colorMode: ColorMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables/emailBuilder/export/logic/espLogicWrapper.d.ts

@@ -0,0 +1,76 @@
+export type KnownESPSyntax = "handlebars" | "sendgrid" | "mailchimp" | "klaviyo" | "liquid" | "braze" | "sfmc" | "hubspot" | "iterable" | "activecampaign" | "marketo" | "campaign_monitor" | "pardot" | "mso";
+export type ESPSyntax = KnownESPSyntax | (string & {});
+export interface ESPSyntaxMeta {
+    label: string;
+    group: "handlebars" | "liquid" | "ampscript" | "custom" | "mso";
+    description: string;
+    docsUrl?: string;
+    /**
+     * Whether this ESP supports boolean nesting / parenthesised sub-expressions.
+     * When false, buildFullExpression flattens all rules to a single level and
+     * the UI should warn the user that nested groups are not supported.
+     */
+    supportsNesting: boolean;
+}
+export declare const ESP_SYNTAX_META: Record<KnownESPSyntax, ESPSyntaxMeta>;
+export type SupportLevel = "native" | "helper" | "fallback" | "none";
+export interface OperatorSupportRow {
+    syntax: ESPSyntax;
+    label: string;
+    eq: SupportLevel;
+    neq: SupportLevel;
+    contains: SupportLevel;
+    not_contains: SupportLevel;
+    starts_with: SupportLevel;
+    ends_with: SupportLevel;
+    in: SupportLevel;
+    not_in: SupportLevel;
+    numeric: SupportLevel;
+    is_empty: SupportLevel;
+    /** date_before / date_after / date_on */
+    date: SupportLevel;
+}
+export declare const OPERATOR_SUPPORT_MATRIX: OperatorSupportRow[];
+export interface VisibilityRuleForESP {
+    tag: string;
+    operator: string;
+    value: string;
+}
+export interface VisibilityGroupForESP {
+    match: "all" | "any";
+    rules: VisibilityRuleForESP[];
+}
+export interface VisibilityConfigForESP {
+    enabled: boolean;
+    match: "all" | "any";
+    rules: VisibilityRuleForESP[];
+    groups?: VisibilityGroupForESP[];
+}
+/**
+ * Wraps `content` in ESP conditional tags derived from `config`.
+ *
+ * Returns `content` unchanged when:
+ * • config is undefined / null
+ * • config.enabled is false
+ * • config has no rules and no groups (or all produce null expressions)
+ *
+ * Mailchimp: emits nested *|IF|* blocks instead of inline AND/OR because
+ * Mailchimp's parser does not reliably support complex boolean expressions.
+ *
+ * Liquid ESPs (Klaviyo, Braze, HubSpot, generic Liquid): for date_before /
+ * date_after rules, emits {% assign %} prelude lines before the {% if %} tag
+ * so that the unix-timestamp filter is captured in a variable rather than
+ * evaluated inline (which most Liquid engines do not support).
+ */
+export declare const wrapWithESPLogic: (content: string, config: VisibilityConfigForESP | undefined | null, syntax?: ESPSyntax) => string;
+/**
+ * Preview the generated open/close tags without actual content.
+ * Useful for rendering a live preview in the VisibilityWrapESP component.
+ *
+ * For Mailchimp the openTag preview shows the first *|IF:…|* expression.
+ * For Liquid date rules the openTag includes any {% assign %} preludes.
+ */
+export declare const previewESPTags: (config: VisibilityConfigForESP | undefined | null, syntax?: ESPSyntax) => {
+    openTag: string;
+    closeTag: string;
+} | null;

package/dist/composables/emailBuilder/persistence/useEmailBuilderPersistence.d.ts

@@ -0,0 +1,38 @@
+export type AutoSaveStatus = "idle" | "saving" | "saved" | "error";
+export interface AutoSavePayload {
+    schemaVersion: string;
+    /** Which template this draft belongs to. Null for brand-new unsaved documents. */
+    templateId: string | null;
+    expiresAt: number;
+    touchedAt: number;
+    updatedAt: string;
+    /** Template display name — cached so the page title can be set without a DB fetch. */
+    name?: string;
+    /** Template tags — cached alongside name to fully avoid a DB fetch on draft restore. */
+    tags?: any[];
+    content: {
+        rows: any[];
+        canvas: Record<string, any>;
+    };
+}
+export interface RestoredDraft {
+    rows: any[];
+    canvas: Record<string, any>;
+    updatedAt: string;
+    /** Reflects the templateId stored in the payload — use this to verify the
+     * draft belongs to the currently open template before restoring it. */
+    templateId: string | null;
+    /** Cached template display name — set when the template was first loaded from DB. */
+    name?: string;
+    /** Cached template tags — set when the template was first loaded from DB. */
+    tags?: any[];
+}
+export declare const useEmailBuilderPersistence: () => {
+    saveToLocal: (rows: any[], canvas: Record<string, any>, templateId?: string | null, name?: string, tags?: any[]) => void;
+    flushSave: (rows: any[], canvas: Record<string, any>, templateId?: string | null, name?: string, tags?: any[]) => void;
+    loadFromLocal: () => RestoredDraft | null;
+    clearLocal: () => void;
+    hasDraft: (templateId?: string) => boolean;
+    saveStatus: import('vue').Ref<AutoSaveStatus, AutoSaveStatus>;
+    lastSaved: import('vue').Ref<Date | null, Date | null>;
+};

package/dist/composables/emailBuilder/transform/pipeline/optimize.d.ts

@@ -0,0 +1,100 @@
+import { BorderValue } from '../../../../utils/border';
+import { BorderRadius } from '../../../../utils/borderRadius';
+/**
+ * optimize.ts
+ * Strips default/noise values from rows, columns, components, and canvas before
+ * JSON export. Pairs with hydrate.ts — everything stripped here is restored on import.
+ *
+ * Supports both new `children` shape and legacy `components` shape per column.
+ */
+export interface VisibilityConfig {
+    enabled: boolean;
+    match: "all" | "any";
+    rules: unknown[];
+}
+export interface BorderConfig extends BorderValue {
+    radius?: BorderRadius;
+}
+export interface GradientConfig {
+    useGradient: boolean;
+    solid: string;
+    gradient: {
+        type: "linear" | "radial";
+        direction: string;
+        colors: Array<{
+            color: string;
+            position: number;
+        }>;
+    };
+}
+interface Component {
+    id: string;
+    /** New discriminated shape uses "component"; legacy uses the componentType directly */
+    type: string;
+    /** Present when type === "component" */
+    componentType?: string;
+    props: Record<string, unknown>;
+}
+type CanvasChild = Component | NestedRow | RowSpacer;
+export interface Column {
+    id: string;
+    width: number;
+    /** New shape */
+    children?: CanvasChild[];
+    /** Legacy shape — kept for backward compat */
+    components?: Component[];
+    backgroundColor?: string;
+    backgroundGradient?: GradientConfig;
+    backgroundImage?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    backgroundRepeat?: string;
+    padding?: Record<string, number>;
+    border?: BorderConfig;
+    verticalAlign?: string;
+    [key: string]: unknown;
+}
+export interface NestedRow {
+    id: string;
+    type: "row";
+    name?: string;
+    columns?: Column[];
+    visibility?: VisibilityConfig;
+    border?: BorderConfig;
+    backgroundImage?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    backgroundRepeat?: string;
+    padding?: Record<string, number>;
+    backgroundGradient?: GradientConfig;
+    minHeight?: number;
+    [key: string]: unknown;
+}
+export interface RowSpacer {
+    id: string;
+    type: "row-spacer";
+    name?: string;
+    height?: number;
+    backgroundColor?: string;
+    backgroundGradient?: GradientConfig;
+    visibility?: VisibilityConfig;
+    [key: string]: unknown;
+}
+type Row = NestedRow | RowSpacer;
+export interface Canvas {
+    language?: string;
+    preheaderText?: string;
+    bodyBackgroundColor?: string;
+    bodyBackgroundImage?: string;
+    bodyBackgroundSize?: string;
+    bodyBackgroundPosition?: string;
+    bodyBackgroundRepeat?: string;
+    backgroundColor?: string;
+    width?: number;
+    padding?: Record<string, number>;
+    mobileBreakpoint?: number;
+    [key: string]: unknown;
+}
+export declare const optimizeCanvas: (canvas: Canvas) => Partial<Canvas>;
+export declare const optimizeRows: (rows: Row[]) => Partial<Row>[];
+export {};

package/dist/composables/system/useColorScheme.d.ts

@@ -0,0 +1,16 @@
+import { Ref } from 'vue';
+/**
+ * `auto` follows the host page. `light` and `dark` pin the editor regardless
+ * of what the page is doing — useful when the editor is embedded in a shell
+ * whose theme it should not inherit.
+ */
+export type ColorMode = "light" | "dark" | "auto";
+/**
+ * @param mode    The `colorMode` prop, as a ref.
+ * @param host    The custom-element host when running under element.ts, else
+ *                null. Reflected onto as well, so `:host(.dark)` matches in an
+ *                unscoped shadow build.
+ */
+export declare function useColorScheme(mode: Ref<ColorMode | undefined>, host?: HTMLElement | null): {
+    isDark: import('vue').ComputedRef<boolean>;
+};