npm - @maildeno/editor - Versions diffs - 0.4.5 → 0.4.7 - Mend

@maildeno/editor 0.4.5 → 0.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (234) hide show

package/dist/composables/emailBuilder/preview/useClientPreview.d.ts DELETED Viewed

@@ -1,127 +0,0 @@
-export type ClientPlatform = "web" | "desktop" | "mobile";
-export type DarkModeStrategy = "respects-meta" | "near-black-swap" | "partial-transparent" | "none";
-export interface ClientCapabilities {
-    /** @font-face / Google Fonts <link> support. Falls back to the next
-     *  font in the `font-family` stack (typically Arial) when false. */
-    webFonts: boolean;
-    /** CSS gradients (linear / radial) on <td> background. Outlook desktop
-     *  needs VML for these — see `vml` below. */
-    gradients: boolean;
-    /** border-radius on <td>. Note: border-radius on <a> (your button output)
-     *  works much more broadly — even Outlook desktop renders rounded <a>
-     *  buttons since 2016 via the -webkit-border-radius alias. Use
-     *  `buttonBorderRadius` for the button-specific capability. */
-    tdBorderRadius: boolean;
-    /** border-radius on <a> elements styled as inline-block buttons.
-     *  Outlook desktop SUPPORTS this (since 2016 webkit). */
-    buttonBorderRadius: boolean;
-    /** box-shadow on <td> or <div>. Rare — only modern WebKit clients. */
-    boxShadow: boolean;
-    /** background-image / `background="..."` attribute on <td>. */
-    bgImageOnTd: boolean;
-    /** VML rendering — required for gradients and bg images in Outlook desktop.
-     *  When false, gradient/bg fallback to the solid `backgroundColor`. */
-    vml: boolean;
-    /** Honors <!--[if mso]> conditional comments. Used to feed Outlook
-     *  VML-only fallbacks. Universal Microsoft trait. */
-    msoConditionals: boolean;
-    /** Animated GIF support. Outlook desktop shows first frame only. */
-    animatedGifs: boolean;
-    /** <video> tag in email. Only Apple Mail and iOS Mail render this. */
-    videoTag: boolean;
-    /** SVG as <img src="*.svg">. Renders in all modern clients including
-     *  Outlook desktop (verified by QA) — file extension doesn't affect
-     *  rendering once the image is fetched via HTTP and decoded. */
-    svgImg: boolean;
-    /** Retina / 2x images via srcset / width attribute. */
-    retinaImages: boolean;
-    /** @media (max-width: 600px) query support for responsive design.
-     *  Outlook desktop classic ignores all <style> tags entirely. */
-    mediaQueries: boolean;
-    /** <style> tag in <head> respected at all. Gmail web strips it from
-     *  <head> but keeps inline styles. */
-    embeddedStyles: boolean;
-    /** `align="center"` attribute on <table> and `<td>`. Universal. */
-    tableAlign: boolean;
-    /** `padding` style on <td>. Universal in practice, but Outlook desktop
-     *  measures padding differently — included for completeness. */
-    tdPadding: boolean;
-    darkModeStrategy: DarkModeStrategy;
-}
-export interface EmailClient {
-    id: string;
-    name: string;
-    vendor: string;
-    platform: ClientPlatform;
-    /** Engine that powers rendering. */
-    engine: string;
-    /** Approximate global market share (%). For sorting; not displayed as fact. */
-    marketShare?: number;
-    /** Brand accent color for the client tile. */
-    accentColor: string;
-    /** Single emoji or short identifier shown in the card avatar. */
-    logoText: string;
-    capabilities: ClientCapabilities;
-    /** Maximum content width the client renders at (chrome-excluded). */
-    viewportWidth: number;
-    /** Short human description for tooltip / detail header. */
-    description: string;
-    /** When previewing on this client, treat the layout as mobile (forces
-     *  mobile-only CSS classes to apply and triggers `mobileStack` if set). */
-    forcesMobile: boolean;
-}
-declare function hydrateFromStorage(): void;
-export declare function useClientPreview(): {
-    selectedClients: import('vue').ComputedRef<EmailClient[]>;
-    availableClients: import('vue').ComputedRef<EmailClient[]>;
-    allClients: readonly {
-        readonly id: string;
-        readonly name: string;
-        readonly vendor: string;
-        readonly platform: ClientPlatform;
-        readonly engine: string;
-        readonly marketShare?: number | undefined;
-        readonly accentColor: string;
-        readonly logoText: string;
-        readonly capabilities: {
-            readonly webFonts: boolean;
-            readonly gradients: boolean;
-            readonly tdBorderRadius: boolean;
-            readonly buttonBorderRadius: boolean;
-            readonly boxShadow: boolean;
-            readonly bgImageOnTd: boolean;
-            readonly vml: boolean;
-            readonly msoConditionals: boolean;
-            readonly animatedGifs: boolean;
-            readonly videoTag: boolean;
-            readonly svgImg: boolean;
-            readonly retinaImages: boolean;
-            readonly mediaQueries: boolean;
-            readonly embeddedStyles: boolean;
-            readonly tableAlign: boolean;
-            readonly tdPadding: boolean;
-            readonly darkModeStrategy: DarkModeStrategy;
-        };
-        readonly viewportWidth: number;
-        readonly description: string;
-        readonly forcesMobile: boolean;
-    }[];
-    activeClientId: Readonly<import('vue').Ref<string | null, string | null>>;
-    activeClient: import('vue').ComputedRef<EmailClient | null>;
-    activeClientIndex: import('vue').ComputedRef<number>;
-    hasNext: import('vue').ComputedRef<boolean>;
-    hasPrev: import('vue').ComputedRef<boolean>;
-    isHydrated: Readonly<import('vue').Ref<boolean, boolean>>;
-    addClient: (id: string) => void;
-    removeClient: (id: string) => void;
-    setActiveClient: (id: string | null) => void;
-    goToNextClient: () => void;
-    goToPrevClient: () => void;
-    resetToDefaults: () => void;
-    hydrateFromStorage: typeof hydrateFromStorage;
-    transformForClient: (html: string, client: EmailClient) => string;
-    darkModeCss: (client: EmailClient, isDark: boolean) => string;
-    darkChromeBg: (isDark: boolean) => string;
-    applyDarkModeDom: (doc: Document | null | undefined, client: EmailClient, isDark: boolean) => void;
-};
-export {};

package/dist/composables/emailBuilder/transform/pipeline/hydrate.d.ts DELETED Viewed

@@ -1,54 +0,0 @@
-/**
- * hydrate.ts
- * Restores stripped defaults when importing an optimized JSON template.
- *
- * Strategy: deepMerge(DEFAULTS, saved) — saved value always wins;
- * stripped keys fall back to current defaults automatically.
- *
- * Now supports both new `children` shape and legacy `components` shape per column.
- * On hydration, columns are always written with `children` going forward.
- */
-interface Component {
-    id: string;
-    type: string;
-    componentType?: string;
-    props: Record<string, unknown>;
-}
-type CanvasChild = Component | NestedRow | RowSpacer;
-interface Column {
-    id: string;
-    width: number;
-    children?: CanvasChild[];
-    components?: Component[];
-    [key: string]: unknown;
-}
-interface NestedRow {
-    id: string;
-    type: "row";
-    columns?: Column[];
-    [key: string]: unknown;
-}
-interface RowSpacer {
-    id: string;
-    type: "row-spacer";
-    [key: string]: unknown;
-}
-type Row = NestedRow | RowSpacer;
-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 hydrateComponent: (comp: Component) => Component;
-export declare const hydrateCanvas: (canvas: Canvas) => Canvas;
-export declare const hydrateRows: (rows: Row[]) => Row[];
-export {};

package/dist/composables/emailBuilder/types/emailBuilder.d.ts DELETED Viewed

@@ -1,79 +0,0 @@
-export interface Padding {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-}
-export interface Border {
-    width: number;
-    style: string;
-    color: string;
-    radius: number;
-}
-export interface GradientStop {
-    color: string;
-    position: number;
-}
-export interface Gradient {
-    type: "linear" | "radial";
-    direction: string;
-    colors: GradientStop[];
-}
-export interface BackgroundGradient {
-    useGradient: boolean;
-    solid: string;
-    gradient: Gradient;
-}
-export interface Visibility {
-    [conditionKey: string]: any;
-}
-export type CanvasChild = CanvasComponentNode | CanvasRowNode | CanvasSpacerNode;
-export interface CanvasComponentNode {
-    id: string;
-    type: "component";
-    componentType: string;
-    props: Record<string, any>;
-    visibility?: Visibility;
-}
-export interface CanvasRowNode {
-    id: string;
-    type: "row";
-    name: string;
-    columns: CanvasColumn[];
-    backgroundColor: string;
-    backgroundGradient: BackgroundGradient;
-    backgroundImage?: string;
-    backgroundSize?: string;
-    backgroundPosition?: string;
-    backgroundRepeat?: string;
-    padding: Padding;
-    border: Border;
-    minHeight: number;
-    gap: number;
-    mobileStack: boolean;
-    visibility: Visibility;
-}
-export interface CanvasSpacerNode {
-    id: string;
-    type: "row-spacer";
-    name: string;
-    height: number;
-    backgroundColor: string;
-    backgroundGradient: BackgroundGradient;
-    visibility: Visibility;
-}
-export interface CanvasColumn {
-    id: string;
-    width: number;
-    children: CanvasChild[];
-    backgroundColor: string;
-    backgroundGradient: BackgroundGradient;
-    backgroundImage?: string;
-    backgroundSize?: string;
-    backgroundPosition?: string;
-    backgroundRepeat?: string;
-    padding: Padding;
-    border: Border;
-    verticalAlign: "top" | "middle" | "bottom";
-}
-export type TopLevelRow = CanvasRowNode | CanvasSpacerNode;

package/dist/composables/system/useColor.d.ts DELETED Viewed

@@ -1,26 +0,0 @@
-type RGB = [number, number, number];
-export declare function useColor(initial?: string): {
-    h: import('vue').Ref<number, number>;
-    s: import('vue').Ref<number, number>;
-    v: import('vue').Ref<number, number>;
-    a: import('vue').Ref<number, number>;
-    rgb: import('vue').ComputedRef<RGB>;
-    hex: import('vue').ComputedRef<string>;
-    rgba: import('vue').ComputedRef<string>;
-    cssColor: import('vue').ComputedRef<string>;
-    hsl: import('vue').ComputedRef<{
-        h: number;
-        s: number;
-        l: number;
-    }>;
-    hsb: import('vue').ComputedRef<{
-        h: number;
-        s: number;
-        b: number;
-    }>;
-    setFromHex: (hexVal: string) => boolean;
-    setFromRgb: (r: number, g: number, b: number) => void;
-    setFromHsl: (hh: number, ss: number, ll: number) => void;
-    setFromHsb: (hh: number, ss: number, bb: number) => void;
-};
-export {};

package/dist/composables/system/useDeviceDetection.d.ts DELETED Viewed

@@ -1,5 +0,0 @@
-import { Ref } from 'vue';
-export declare const useDeviceDetection: () => {
-    isDesktop: Ref<boolean, boolean>;
-    isMobile: import('vue').ComputedRef<boolean>;
-};

package/dist/composables/system/useGoogleFonts.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-export declare const useGoogleFonts: () => {
-    googleFonts: import('vue').Ref<string[], string[]>;
-    loadGoogleFont: (fontFamily?: string) => void;
-    getGoogleFontImports: (fonts: string[]) => string;
-    syncFontsForTemplate: (fonts: string[]) => void;
-    preconnectGoogleFonts: () => void;
-    isWebSafeFont: (font: string) => boolean;
-    WEB_SAFE_FONTS: Set<string>;
-    FONTS_WITH_ITALICS: Set<string>;
-    DEFAULT_WEIGHTS: number[];
-};

package/dist/composables/system/useImageUpload.d.ts DELETED Viewed

@@ -1,23 +0,0 @@
-export interface UploadResult {
-    previewUrl: string;
-    permanentUrl: string;
-    cleanup: () => void;
-}
-export declare class ImageUploadError extends Error {
-    constructor(message: string);
-}
-export declare function validateImageFile(file: File): void;
-export declare function swapOnLoad(permanentUrl: string, onReady: () => void, cleanup: () => void): void;
-/**
- * Called from within a component's setup — useStorageAdapter() requires
- * that timing, which is why this is a composable rather than a plain
- * export like the three functions above (none of which need injection).
- *
- * Returns handleImageUploadFlow pre-bound to the active adapter, so call
- * sites keep the exact same 4-argument call shape they always had.
- */
-export declare function useImageUploader(): {
-    handleImageUploadFlow: (file: File, onPreview: (objectUrl: string) => void, onSuccess: (permanentUrl: string, cleanup: () => void) => void, onError: (message: string) => void) => Promise<void>;
-    swapOnLoad: typeof swapOnLoad;
-    validateImageFile: typeof validateImageFile;
-};

package/dist/composables/system/useSavedRowsPanel.d.ts DELETED Viewed

@@ -1,35 +0,0 @@
-/**
- * Shared open/close state for the Saved Rows panel.
- *
- * this used to be Nuxt's useState, shared across components by
- * matching string key. Same provide/inject conversion as useEmailBuilder —
- * one instance created at the EmailEditor root, injected everywhere else,
- * so LayoutTab's toggle button and SavedRowsPanel's isOpen check still see
- * the same boolean.
- *
- * The "system" tab concept was removed from SavedRowsPanel.vue
- * (see its top-of-file note) — activeTab is kept here since LayoutTab still
- * references the shape, but it's permanently "user" now in practice.
- */
-export type SavedRowsTab = "user" | "system";
-type SavedRowsPanelInstance = ReturnType<typeof createSavedRowsPanelInstance>;
-/** Called once, at the EmailEditor root. */
-export declare function provideSavedRowsPanel(): {
-    isOpen: import('vue').Ref<boolean, boolean>;
-    activeTab: import('vue').Ref<SavedRowsTab, SavedRowsTab>;
-    open: (tab?: SavedRowsTab) => void;
-    close: () => void;
-    toggle: (tab?: SavedRowsTab) => void;
-    setTab: (tab: SavedRowsTab) => void;
-};
-/** Every other file calls this exactly as before. */
-export declare const useSavedRowsPanel: () => SavedRowsPanelInstance;
-declare function createSavedRowsPanelInstance(): {
-    isOpen: import('vue').Ref<boolean, boolean>;
-    activeTab: import('vue').Ref<SavedRowsTab, SavedRowsTab>;
-    open: (tab?: SavedRowsTab) => void;
-    close: () => void;
-    toggle: (tab?: SavedRowsTab) => void;
-    setTab: (tab: SavedRowsTab) => void;
-};
-export {};

package/dist/composables/ui/useConfirm.d.ts DELETED Viewed

@@ -1,33 +0,0 @@
-/**
- * Confirmation dialog store.
- *
- * Module-level singleton state rather than provide/inject, deliberately.
- * An injected service has two failure modes this avoids: it can't be read
- * from the same component that provides it (Vue's inject() never sees the
- * current component's own provide()), and two copies of the providing
- * module produce two different injection keys for what should be one
- * store. A module-scoped ref has neither problem — one store, no keys, no
- * dependency on where in the tree the caller sits — so it behaves
- * identically however the editor is mounted.
- */
-export interface ConfirmOptions {
-    message?: string;
-    header?: string;
-    acceptLabel?: string;
-    rejectLabel?: string;
-    acceptClass?: string;
-    rejectClass?: string;
-    accept?: () => void;
-    reject?: () => void;
-}
-/** Null when nothing is pending — ConfirmDialog.vue renders on this. */
-export declare const activeConfirm: import('vue').ShallowRef<ConfirmOptions | null, ConfirmOptions | null>;
-export declare const confirmVisible: import('vue').Ref<boolean, boolean>;
-declare function close(): void;
-export declare function acceptActive(): void;
-export declare function rejectActive(): void;
-export declare function useConfirm(): {
-    require(options: ConfirmOptions): void;
-    close: typeof close;
-};
-export {};

package/dist/composables/ui/useInfoDialog.d.ts DELETED Viewed

@@ -1,22 +0,0 @@
-/**
- * same provide/inject conversion — called from SidebarBlockButton.vue
- * and useEmailExportEngine.ts (via useEmailBuilder), both needing to open the
- * same dialog that presumably renders once near the EmailEditor root.
- */
-type InfoDialogInstance = ReturnType<typeof createInfoDialogInstance>;
-/** Called once, at the EmailEditor root. */
-export declare function provideInfoDialog(): {
-    visible: import('vue').Ref<boolean, boolean>;
-    header: import('vue').Ref<string, string>;
-    message: import('vue').Ref<string, string>;
-    open: (msg: string, h?: string) => void;
-};
-/** Every other file calls this exactly as before. */
-export declare const useInfoDialog: () => InfoDialogInstance;
-declare function createInfoDialogInstance(): {
-    visible: import('vue').Ref<boolean, boolean>;
-    header: import('vue').Ref<string, string>;
-    message: import('vue').Ref<string, string>;
-    open: (msg: string, h?: string) => void;
-};
-export {};

package/dist/composables/ui/useTeleportTarget.d.ts DELETED Viewed

@@ -1,49 +0,0 @@
-import { Ref, ComputedRef } from 'vue';
-/**
- * Fixes a real, confirmed bug: every <Teleport to="body"> throughout this
- * package (7 separate files — color pickers, the merge-tag picker, loading
- * overlay, canvas action bar, preview client picker/screen) was hardcoded
- * to the literal string "body". Vue resolves a string `to` target via
- * document.querySelector() internally, which cannot see past a shadow
- * root boundary at all — so for the custom-element usage path, every one
- * of these was teleporting its content to the actual page body, entirely
- * outside the shadow root where all of this package's CSS lives. The teleported content still
- * rendered, just completely unstyled, and this doubles as the mechanism
- * behind a second, related bug: click-outside handlers elsewhere in this
- * package querying document.querySelector('[data-color-panel]') for that
- * same teleported content could never find it either, for the identical
- * reason.
- *
- * The fix has to be an actual DOM element reference, not a selector
- * string — a string target re-triggers the exact document.querySelector
- * problem this exists to solve. EmailEditor.vue provides this once, at
- * its own root, pointing at a dedicated element it renders for exactly
- * this purpose — every other file across the package just injects it and
- * hands it straight to :to, with zero per-file conditional logic for
- * which usage path (Vue component vs custom element) is active.
- *
- * A Ref, not a plain value: the target element is a template ref inside
- * EmailEditor.vue, so it doesn't exist yet at the moment provide() runs
- * during setup() — only after mount. Providing the Ref object itself
- * (not .value) means every injecting component's own :to="target" template
- * binding re-evaluates automatically once it populates, with no extra
- * wiring needed anywhere else.
- */
-export type TeleportTarget = Ref<HTMLElement | null>;
-/** Called once, at the EmailEditor root, with the ref it renders a container element into. */
-export declare function provideTeleportTarget(target: TeleportTarget): void;
-/**
- * Every other file calls this and hands the result straight to
- * <Teleport :to="...">. Falls back to "body" (Vue's own default) rather
- * than throwing — matches useInfoDialog/useStorageAdapter's reasoning. A
- * component used in isolation, outside EmailEditor.vue's tree entirely,
- * should still degrade to Vue's normal behavior rather than crash.
- */
-export declare function useTeleportTarget(): TeleportTarget | "body";
-/**
- * The same target, typed for the `to` prop of Reka UI's portal components
- * (and Vue's own Teleport), which accept `string | HTMLElement` but not
- * `null`. Normalises the not-yet-mounted case to undefined so the portal
- * falls back to its own default instead of erroring on a null target.
- */
-export declare function usePortalTarget(): ComputedRef<string | HTMLElement | undefined>;

package/dist/composables/ui/useToast.d.ts DELETED Viewed

@@ -1,32 +0,0 @@
-/**
- * Toast notification store.
- *
- * Module-level store for the same reasons as useConfirm — no injection
- * key, no service registration, and no dependency on where in the
- * component tree the caller sits.
- */
-export interface ToastMessage {
-    id: number;
-    severity?: "success" | "info" | "warn" | "error" | string;
-    summary?: string;
-    detail?: string;
-    life?: number;
-}
-export declare const toasts: import('vue').Ref<{
-    id: number;
-    severity?: "success" | "info" | "warn" | "error" | string | undefined;
-    summary?: string | undefined;
-    detail?: string | undefined;
-    life?: number | undefined;
-}[], ToastMessage[] | {
-    id: number;
-    severity?: "success" | "info" | "warn" | "error" | string | undefined;
-    summary?: string | undefined;
-    detail?: string | undefined;
-    life?: number | undefined;
-}[]>;
-export declare function removeToast(id: number): void;
-export declare function useToast(): {
-    add(message: Omit<ToastMessage, "id">): void;
-    removeAll(): void;
-};

package/dist/devStyleMirror.d.ts DELETED Viewed

@@ -1,20 +0,0 @@
-/**
- * Mirrors `document.head` <style> tags into a shadow root.
- *
- * Only needed when running the editor from source (the playground and its
- * element-demo page). In a built bundle, every component's scoped CSS is
- * substituted into shadowStyles.ts at build time, so the shadow root is
- * self-contained and this does nothing.
- *
- * From source there is no build step, so Vite injects each `.vue` file's
- * scoped styles into `document.head` as it serves them — and a shadow root
- * does not inherit page styles. The result is a shadow root with the base
- * stylesheet but none of the component CSS: unsized icons, dialogs without
- * chrome, panels without layout. It looks like the editor is broken when in
- * fact only this one delivery path is missing.
- *
- * Gated on whether the extracted CSS actually arrived rather than on
- * `import.meta.env.DEV`, so it switches itself off the moment the real
- * styles are present — including in a dev build that does run the plugin.
- */
-export declare function mirrorHeadStylesInto(shadowRoot: ShadowRoot): () => void;

package/dist/documentScopedStyles.d.ts DELETED Viewed

@@ -1,39 +0,0 @@
-/**
- * Fixes a real, browser-level Shadow DOM limitation that no amount of
- * getting the CSS *into* the shadow root can solve: `@font-face`,
- * `@property`, and `@import` are **document-scoped at-rules**. Declared
- * inside a shadow root, browsers silently ignore them. The rules are
- * present, the CSS is valid, nothing errors — they just do nothing.
- *
- * Two very visible symptoms this causes, both confirmed from real
- * browser behavior rather than automated tests (jsdom checks DOM
- * structure, never font loading or the real CSS cascade, so this class of
- * bug is invisible to it):
- *
- *  1. Icon fonts render blank. A rule like `.icon:before{content:"\ue001"}`
- *     applies correctly, but the `@font-face` defining the family is
- *     dropped — so the glyph has no font to come from, while inline SVG
- *     icons are unaffected. That asymmetry makes it look like "only some
- *     icons broke". The Satoshi brand font, pulled in via `@import`, hits
- *     the same wall.
- *
- *  2. Tailwind v4 looks broken/scattered. It emits `@property` rules
- *     (`--tw-border-style`, `--tw-shadow`, the transform variables, and
- *     so on) purely to give those custom properties their initial
- *     values. Dropped inside a shadow root, every
- *     `var(--tw-border-style)` resolves to nothing, so borders, shadows,
- *     and transforms silently stop applying while plain utilities like
- *     flex/padding keep working.
- *
- * The fix is simply to also place these specific rules in document.head,
- * where they're valid — the rest of the CSS stays in the shadow root,
- * where it still provides the isolation the custom element exists for.
- * Fonts and registered custom properties are global by nature; there's
- * no isolation to lose by hoisting them.
- */
-/**
- * Extracts every document-scoped rule from the given stylesheets and adds
- * them to document.head. Idempotent — safe to call on every mount, and on
- * every element instance if several exist on one page.
- */
-export declare function injectDocumentScopedRules(cssStrings: string[]): void;