pagepilot-visual-editor 1.0.27 → 1.0.28

package/dist/email-builder-core/renderers/animationCss.d.ts

@@ -1,8 +1,7 @@
 /**
- * Shared keyframes + trigger rules for the per-block animation (see the
- * `props.animation` field on Image, Container, Button, Logo, Avatar; the
- * `data-animate-*` attributes emitted from Reader/core.tsx; and the
- * `buildAnimationScript()` runtime in ./pageScripts.ts).
+ * Shared keyframes + trigger rules for the Image block's per-element
+ * animation (see ImagePropsSchema.props.animation, Reader/core.tsx's
+ * data-animate-* attributes, and public/scripts/pagePilotAnimation.js).
  *
  * `transform`/`opacity` only — no layout properties — so animating never
  * causes reflow or content shift. Speed/delay are applied inline by the
@@ -13,6 +12,7 @@ export declare const ANIMATION_TYPES: readonly ["fade-in", "slide-left", "slide-
 export type TAnimationType = (typeof ANIMATION_TYPES)[number];
 export declare const ANIMATION_SPEED_SECONDS: Record<'slow' | 'medium' | 'fast', number>;
 /** Just the @keyframes — reused by both the published page CSS below and the
- * editor canvas's one-off Preview button (see AnimationSection.tsx). */
+ * editor canvas's one-off Preview button (see ImageSidebarPanel.tsx), which
+ * doesn't load the full published stylesheet. */
 export declare const animationKeyframesCss: string;
 export declare const animationCss: string;

package/dist/email-builder-core/renderers/pageScripts.d.ts

@@ -13,14 +13,4 @@ export declare const PAGINATION_SCRIPT_URL = "https://pagepilot.fabbuilder.com/s
 export declare const DEMO_SCALE_SCRIPT_URL = "https://pagepilot.fabbuilder.com/scripts/pagePilotDemoScale.js";
 export declare const TIMER_SCRIPT_URL = "https://pagepilot.fabbuilder.com/scripts/pagePilotTimer.js";
 export declare const ANIMATION_SCRIPT_URL = "https://pagepilot.fabbuilder.com/scripts/pagePilotAnimation.js";
-/**
- * The per-page runtime that reads the `data-animate-*` attributes emitted by
- * Reader/core.tsx and drives the CSS animation (see animationCss.ts). Ported
- * verbatim from ahd-fe's `public/scripts/pagePilotAnimation.js` and inlined
- * here because pagepilot-visual-editor is a standalone library — it ships
- * self-contained pages, not a hosted app with a public CDN.
- */
-export declare const buildAnimationScript: () => string;
-export declare const buildDemoScaleJs: () => string;
-export declare const buildTabsScript: () => string;
-export declare const buildCarouselScript: () => string;
+export declare const buildGeneratedThemeMarkup: () => string;

package/dist/email-builder-core/renderers/renderToStaticMarkup.d.ts

@@ -35,8 +35,10 @@ type TOptions = {
     isBanner?: boolean;
     injectTabsScrollSyncScript?: boolean;
     injectCarouselScript?: boolean;
-    injectAnimationScript?: boolean;
+    injectPaginationScript?: boolean;
     injectFontAssets?: boolean;
+    injectTimerScript?: boolean;
+    injectAnimationScript?: boolean;
 };
-export default function renderToStaticMarkup(document: TReaderDocument, { rootBlockId, seo, injectElementIds, minifyCss, lang, skipLink, accessibilityTools, includePageCSS, headHtml, bodyBottomHtml, isBanner, injectTabsScrollSyncScript, injectCarouselScript, injectAnimationScript, injectFontAssets, }: TOptions): string;
+export default function renderToStaticMarkup(document: TReaderDocument, { rootBlockId, seo, injectElementIds, minifyCss, lang, skipLink, accessibilityTools, includePageCSS, headHtml, bodyBottomHtml, isBanner, injectTabsScrollSyncScript, injectCarouselScript, injectPaginationScript, injectFontAssets, injectTimerScript, injectAnimationScript, }: TOptions): string;
 export {};

package/dist/email-builder-core/renderers/themeTokens.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Theme tokens for the generated (published) HTML.
+ *
+ * ## Why this exists
+ *
+ * A published page is a BODY FRAGMENT injected into a host application we
+ * don't control (see ConfigureDialog's integration snippets — hosts do
+ * `container.insertAdjacentHTML(...)`). There is no `<head>` to put a
+ * stylesheet in and no guarantee any host CSS exists, so everything the page
+ * needs to render dark must ship inside the fragment itself.
+ *
+ * ## Why not `filter: invert()`
+ *
+ * The previous implementation inverted the whole subtree with
+ * `filter: invert(1) hue-rotate(180deg)`. That is not dark mode: it rotates
+ * every author-picked hue 180deg, so a brand blue publishes as orange. It also
+ * forced a fragile web of counter-inversions to keep photos from looking like
+ * negatives. This module replaces it with real per-color dark values.
+ *
+ * ## How it works
+ *
+ * Each distinct authored color is issued a token. The block renders
+ * `var(--ahd-c-N, <original>)` instead of the raw color, and the token is
+ * defined once in a `<style>` scoped to the fragment root:
+ *
+ *   [data-ahd-theme] { --ahd-c-3: light-dark(#0a5fcc, #5aa2ff); }
+ *
+ * `light-dark()` resolves against the nearest `color-scheme`, which the
+ * fragment root sets from the author's Light/Dark/Auto choice. That means a
+ * host can flip an embedded page by changing one attribute — no re-fetch, no
+ * media-query re-evaluation.
+ *
+ * Two independent fallbacks keep an unsupported browser rendering exactly what
+ * it renders today:
+ *   1. The `var()` fallback carries the original color, so a browser that
+ *      drops the custom property still paints the light value.
+ *   2. `emitTokenCss` writes a plain light-value declaration before the
+ *      `light-dark()` one, so a browser that understands custom properties but
+ *      not `light-dark()` uses the light value rather than an invalid
+ *      declaration.
+ */
+export type GeneratedTheme = 'light' | 'dark' | 'auto';
+export declare const GENERATED_THEME_ATTR = "data-ahd-theme";
+/**
+ * Published pages always follow the visitor's device setting.
+ *
+ * This is the only mode the renderer emits: there is no author-facing
+ * light/dark switch, because a published page has no opinion about the
+ * visitor's environment - the visitor's browser does. `light` and `dark`
+ * remain in the type because a HOST APP can override a rendered fragment at
+ * runtime by setting this attribute (see the snippet in ConfigureDialog).
+ */
+export declare const GENERATED_THEME_AUTO: GeneratedTheme;
+/**
+ * Derive a dark-mode counterpart for an authored light color.
+ *
+ * The rule is: PRESERVE HUE AND SATURATION, INVERT LIGHTNESS ONLY. That is the
+ * entire difference from the `hue-rotate` approach this replaces — a brand blue
+ * stays blue and simply becomes lighter so it reads against a dark surface.
+ *
+ * Two deliberate departures from a naive `l -> 1 - l`:
+ *
+ * - Near-neutral colors (very low saturation) are the page's surfaces and text.
+ *   A straight flip sends #ffffff to #000000, which is harsher than good dark
+ *   UI: pure black raises perceived contrast and causes halation against light
+ *   text. They're mapped into a softer range instead (about #121212 to #ededed),
+ *   matching the app's own dark palette (`src/theme/colors/dark.ts` uses
+ *   #121212 for background).
+ *
+ * - Saturated colors get a compressed flip. A mid-lightness brand color
+ *   (l ~ 0.5) should stay close to where it is rather than swing to the
+ *   opposite extreme, so the result is pulled toward a legible band and floored
+ *   so it never lands too dark to see on a dark surface.
+ *
+ * Alpha is carried through untouched.
+ *
+ * Returns `null` for anything that is not a single solid color — gradients,
+ * `transparent`, keywords, unparseable values. Those are left exactly as the
+ * author wrote them (see `token`).
+ */
+export declare function deriveDarkColor(value: string): string | null;
+export type TokenRegistry = {
+    /**
+     * Issue (or reuse) a token for `raw` and return the value a block should
+     * render.
+     *
+     * Returns `raw` unchanged when there is nothing to theme — null/undefined,
+     * `transparent`, `currentColor`, a gradient, or anything unparseable. Callers
+     * can therefore pipe every color through this without pre-checking, EXCEPT
+     * that a caller which BRANCHES on whether a value is a gradient must do that
+     * classification on the raw value first (see `isGradientColor` in
+     * blocks/helpers/blockStyleHelpers).
+     *
+     * GRADIENTS ARE NEVER THEMED. An author-picked gradient renders identically
+     * in light and dark mode — it is returned byte-for-byte unchanged, so the
+     * published CSS carries the author's exact value in both themes.
+     */
+    token(raw: string | null | undefined): string | undefined;
+    /** CSS defining every token issued so far. Empty when none, or theme light. */
+    css(theme: GeneratedTheme): string;
+    /** Number of distinct colors tokenized (for tests/diagnostics). */
+    size(): number;
+};
+export declare function createTokenRegistry(): TokenRegistry;
+/**
+ * CSS for a fragment that issued no tokens (or chose light).
+ *
+ * Still worth emitting for `dark`/`auto`: `color-scheme` alone makes form
+ * controls, scrollbars and the canvas behind the fragment follow the theme.
+ */
+export declare function baseThemeCss(theme: GeneratedTheme): string;
+export declare const ThemeTokenProvider: import('react').Provider<TokenRegistry>;
+/**
+ * Theme a single color value.
+ *
+ * Safe to call unconditionally: outside a publish render it returns `raw`
+ * unchanged. See `TokenRegistry.token` for what is and isn't themed — notably,
+ * gradients pass through byte-for-byte.
+ *
+ * A caller that BRANCHES on whether a color is a gradient must classify the
+ * RAW value first (via `isGradientColor`) and only then tokenize, or the
+ * branch will misfire on the returned `var(...)` string.
+ */
+export declare function useColorToken(raw: string | null | undefined): string | undefined;
+export declare function themeAuthorHtml(html: string, registry: TokenRegistry | null): string;
+/**
+ * Hook form of `themeAuthorHtml`, for blocks that render author HTML.
+ * Outside a publish render this returns the input unchanged.
+ */
+export declare function useThemedHtml(html: string): string;

package/dist/host-stubs/modules/settings/settingsSelectors.d.ts

@@ -0,0 +1,5 @@
+declare const settingsSelectors: {
+    selectSettings: (_state: unknown) => any;
+    selectBranding: (_state: unknown) => any;
+};
+export default settingsSelectors;

package/dist/host-stubs/style/menu.styled.d.ts

@@ -1,5 +1,4 @@
 import { CSSProperties } from 'react';
-export declare const menuEditorEmptyState: CSSProperties;
 type BlockPadding = {
     top: number;
     right: number;
@@ -12,6 +11,7 @@ type BlockMargin = {
     bottom: number;
     left: number;
 } | null | undefined;
+export declare const isGradientValue: (value: string | null | undefined) => boolean;
 export declare const menuNav: (backgroundColor: string, position: string, hasSlots?: boolean, blockPadding?: BlockPadding, blockMargin?: BlockMargin) => CSSProperties;
 export declare const menuSlot: (align: "start" | "center" | "end", isCenter?: boolean) => CSSProperties;
 export declare const menuList: (orientation: string, level: number, gap: string) => CSSProperties;
@@ -28,6 +28,9 @@ export type MenuItemStyleOverride = {
 export declare const menuLink: (showIcons: boolean, hasIcon: boolean, textColor: string, fontSize: string, fontWeight: string, padding: string, fontFamily?: string, itemOverride?: MenuItemStyleOverride) => CSSProperties;
 export declare const menuIcon: (iconSize: string) => CSSProperties;
 export declare const menuChildrenWrapper: (level: number) => CSSProperties;
+export declare const menuSubmenuPanel: (background: string, radius: number, borderColor?: string | null, padding?: BlockPadding, minWidth?: number | null) => CSSProperties;
+export declare const menuCaret: (size: number) => CSSProperties;
+export declare const MENU_SUBMENU_CHEVRON_PATH = "M6 9l6 6 6-6";
 export declare const menuToggleInput: CSSProperties;
 export declare const menuBurgerLabel: (textColor: string) => CSSProperties;
 export declare const menuItemHrefFieldSx: {
@@ -85,4 +88,5 @@ export declare const addTabButtonSx: {
     };
     readonly transition: "color 0.15s, border-color 0.15s";
 };
+export declare const menuEditorEmptyState: CSSProperties;
 export {};

package/dist/host-stubs/view/branding/brandDefaultFont.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_BRAND_FONT_KEY = "INTER";
+export declare function resolveRootFontFamily(rootFontFamily?: string | null): string;
+export declare function getBrandDefaultFontFamily(): string;

package/dist/host-stubs/view/shared/editors/highlightCode.d.ts

@@ -0,0 +1 @@
+export declare function renderHighlightedCodeBlock(code: string, _language?: string): string;