@useinsider/guido 3.1.1 → 3.2.0-beta.080341b

package/README.md

@@ -113,6 +113,12 @@ const config: GuidoConfigInput = {
     preselectedDynamicContent?: DynamicContent[],
     selectedUnsubscribePages?: number[],
     forceRecreate?: boolean,       // Default: false - Force recreate template in Stripo storage
+    migration?: {
+      // Legacy block configs keyed by block ID. Consumed once by the migrator
+      // when upgrading templates authored with v1 block formats. See the
+      // "Template Migration" section below.
+      recommendationConfigs?: Record<string, LegacyRecommendationConfig>,
+    },
   },
 
   // Optional: Editor settings
@@ -143,6 +149,8 @@ const config: GuidoConfigInput = {
     displayConditions?: boolean,  // Default: true
     unsubscribe?: boolean,        // Default: true
     modulesDisabled?: boolean,    // Default: false - Disable modules panel
+    liquidSyntax?: boolean,       // Default: false - Enable Liquid template syntax
+    autosave?: boolean,           // Default: false - Show the Auto Save toggle in the header. See wiki/AUTOSAVE.md.
   },
 
   // Optional: Callbacks
@@ -201,6 +209,7 @@ interface SavedTemplateDetails {
     config: number[];
   };
   metadata: Metadata;
+  silent: boolean;  // true when triggered by autosave, false when user clicked Save
 }
 
 interface Metadata {
@@ -326,6 +335,112 @@ const config: GuidoConfigInput = {
 
 ---
 
+## Autosave
+
+Guido ships an opt-in **autosave** that saves on a 3-minute interval and when the user leaves the tab. Enable it with the `features.autosave` feature flag — this **shows an "Auto Save" toggle in the editor header**; the end user switches autosave on per session.
+
+```typescript
+const config: GuidoConfigInput = {
+  identity: { templateId: 'tpl-123', userId: 'user-456' },
+  partner: { name: 'partner' },
+  features: {
+    autosave: true,   // Default: false — shows the Auto Save toggle in the header
+  },
+};
+```
+
+- Default is `false` — integrations see no change unless they opt in.
+- Autosave reuses the same save pipeline as the Save button, so your existing `@save:complete` handler receives autosave output identically to a manual save. No new events or callbacks.
+- Toggle state is **session-only** (Pinia) — resets to OFF on reload.
+
+For a deep dive on triggers, guards, and limitations, see **[wiki/AUTOSAVE.md](wiki/AUTOSAVE.md)**.
+
+---
+
+## Template Migration
+
+When a template was authored with **v1 block formats** (notably the legacy recommendation block), Guido needs additional context that cannot be recovered from the saved HTML alone — things like filter rules, recommendation strategies, currency settings, locale, and pinned product IDs.
+
+Pass that context once via `template.migration` when loading the template. The migrator consumes it during initial render to upgrade legacy blocks to the current format. After migration, the field has no effect on editor behavior — you can keep passing it (it's idempotent on already-migrated templates) or omit it.
+
+> **When to provide this:** Only when loading templates created before the v2 recommendation block was rolled out. New templates do not need it.
+
+### `recommendationConfigs`
+
+A dictionary keyed by the legacy block's element ID. Each entry preserves the v1 block's runtime config so the migrator can hydrate the upgraded block.
+
+```typescript
+const config: GuidoConfigInput = {
+  identity: { templateId: 'tpl-123', userId: 'user-456' },
+  partner: { name: 'acme' },
+  template: {
+    html: legacyHtml,
+    css: legacyCss,
+    migration: {
+      recommendationConfigs: {
+        // Key = legacy block element id (also present as `id` in the entry)
+        'recommendation-1700000000000': {
+          id: 1700000000000,
+          // Filter-driven block — productIds is empty, filters/strategy drive selection
+          productIds: [],
+          filters: [{ field: 'category', op: 'eq', value: 'shoes' }],
+          strategy: 'newArrivals',
+          shuffleProducts: false,
+          sendProductRequestFlag: true,
+
+          // Display & locale
+          currency: 'EUR',
+          currencySettings: { decimal: ',', thousand: '.', alignment: 'left' },
+          language: 'nl_NL',
+          decimalCount: 2,
+
+          // Layout
+          cardsInRow: 2,
+          orientation: 'vertical',
+          textTrimming: true,
+          unresponsive: false,
+          mobileLeftPadding: 0,
+          mobileRightPadding: 0,
+
+          // Snapshot of products as they were rendered in the legacy email
+          recommendedProducts: [/* ...legacy product objects... */],
+        },
+      },
+    },
+  },
+};
+```
+
+All fields on a `LegacyRecommendationConfig` entry are optional — pass whatever your storage layer has for that block. Unknown keys are preserved and forwarded to the migrator unchanged, so partner-specific extensions continue to round-trip.
+
+### Field reference
+
+| Field | Type | Purpose |
+|-------|------|---------|
+| `id` | `number` | Block ID (matches the dictionary key and legacy HTML element id) |
+| `productIds` | `unknown[]` | Pinned product IDs — empty when filter-driven |
+| `filters` | `unknown[]` | Filter rules driving product selection |
+| `strategy` | `string` | Recommendation strategy key (e.g. `'newArrivals'`) |
+| `shuffleProducts` | `boolean` | Whether to randomize product order |
+| `sendProductRequestFlag` | `boolean` | Whether the block requested live products at send time |
+| `currency` | `string` | Currency code (e.g. `'EUR'`) |
+| `currencySettings` | `unknown` | Separators, alignment, decimals |
+| `language` | `string` | Locale (e.g. `'nl_NL'`) |
+| `decimalCount` | `string \| number` | Decimal places for price display |
+| `cardsInRow` | `number` | Product cards per row |
+| `orientation` | `'vertical' \| 'horizontal'` | Layout orientation |
+| `size` | `string \| number` | Size variant marker (legacy) |
+| `verticalResponsiveness` | `boolean` | Vertical responsiveness flag (legacy `size=1` variants) |
+| `blockType` | `string` | Block type marker used by some legacy variants |
+| `textTrimming` | `boolean` | Whether long text is trimmed |
+| `unresponsive` | `boolean` | Disable responsive scaling |
+| `mobileLeftPadding` / `mobileRightPadding` | `number` | Mobile-only horizontal padding |
+| `recommendedProducts` | `unknown[]` | Snapshot of products rendered by the legacy block |
+
+> **Note on data shape:** The schema uses `looseObject` because v1 partner data shapes vary across deployments. Some entries carry `verticalResponsiveness`, others carry `blockType` / `orientation` / `size`. Pass whatever you have — the migrator will use what it recognizes and preserve the rest.
+
+---
+
 ## HTML Compiler Rules
 
 Add custom rules to transform HTML during export:
@@ -381,6 +496,8 @@ import type {
   IdentityConfig,
   PartnerConfig,
   TemplateConfig,
+  TemplateMigrationConfig,
+  LegacyRecommendationConfig,
   EditorConfig,
   UIConfig,
   FeaturesConfig,

package/dist/@types/config/schemas.js

@@ -1,53 +1,60 @@
-import { ModuleFolderDefaults as b } from "../../enums/defaults.js";
-import { object as o, number as p, optional as e, string as t, pipe as u, picklist as n, minLength as d, custom as S, boolean as a, array as c, literal as r, variant as k } from "../../node_modules/valibot/dist/index.js";
-const m = {
+import { ModuleFolderDefaults as S } from "../../enums/defaults.js";
+import { object as o, number as n, optional as e, string as t, pipe as p, picklist as l, minLength as b, custom as h, boolean as a, array as c, record as k, looseObject as y, literal as i, variant as g, union as f, unknown as s } from "../../node_modules/valibot/dist/index.js";
+const d = {
   /** Promotional/marketing emails */
   PROMOTIONAL: 1,
   /** Transactional/system emails */
   TRANSACTIONAL: 2
-}, s = {
+}, r = {
   /** Standard email campaigns */
   EMAIL: 60,
   /** Architect journey builder */
   ARCHITECT: 49,
   /** Unsubscribe page builder */
   UNSUBSCRIBE_PAGES: 97
-}, h = o({
+}, R = o({
   /** Unique identifier for the template being edited */
-  templateId: u(
+  templateId: p(
     t(),
-    d(1, "templateId is required")
+    b(1, "templateId is required")
   ),
   /** Unique identifier for the user editing the template */
-  userId: u(
+  userId: p(
     t(),
-    d(1, "userId is required")
+    b(1, "userId is required")
   ),
   /** Optional variation ID for A/B testing */
   variationId: e(t())
-}), y = o({
+}), C = o({
+  /** Fallback font name (e.g., "Georgia") */
+  name: t(),
+  /** Fallback font family (e.g., "serif" or "sans-serif") */
+  family: t()
+}), T = o({
   /** Partner/organization name (required) */
-  name: u(
+  name: p(
     t(),
-    d(1, "partner.name is required")
+    b(1, "partner.name is required")
   ),
   /** Product type identifier */
   productType: e(
-    n([
-      s.EMAIL,
-      s.ARCHITECT,
-      s.UNSUBSCRIBE_PAGES
+    l([
+      r.EMAIL,
+      r.ARCHITECT,
+      r.UNSUBSCRIBE_PAGES
     ]),
-    s.EMAIL
+    r.EMAIL
   ),
   /** Message type (promotional or transactional) */
   messageType: e(
-    n([m.PROMOTIONAL, m.TRANSACTIONAL]),
-    m.PROMOTIONAL
+    l([d.PROMOTIONAL, d.TRANSACTIONAL]),
+    d.PROMOTIONAL
   ),
   /** Display name for the current user */
-  username: e(t(), "Guido User")
-}), f = o({
+  username: e(t(), "Guido User"),
+  /** Fallback font settings from partner settings — used to match backend size calculation */
+  fallbackFont: e(C)
+}), A = o({
   /** Display text for the dynamic content */
   text: t(),
   /** Template variable value (e.g., {{username}}) */
@@ -61,44 +68,100 @@ const m = {
       value: t()
     })
   )
-}), R = o({
+}), I = y({
+  /** Block ID (matches the dictionary key and the legacy HTML element id) */
+  id: e(n()),
+  /** Decimal places for price display (legacy data may use string or number) */
+  decimalCount: e(f([t(), n()])),
+  /** Pinned product IDs (empty array when filter-driven) */
+  productIds: e(c(s())),
+  /** Whether the block requested live products at send time */
+  sendProductRequestFlag: e(a()),
+  /** Whether to randomize product order */
+  shuffleProducts: e(a()),
+  /** Filter rules driving product selection */
+  filters: e(c(s())),
+  /** Currency code (e.g. 'EUR') — sometimes absent in legacy data */
+  currency: e(t()),
+  /** Currency display settings (separators, alignment, decimals) */
+  currencySettings: e(s()),
+  /** Locale (e.g. 'nl_NL') */
+  language: e(t()),
+  /** Recommendation strategy key (e.g. 'newArrivals') */
+  strategy: e(t()),
+  /** Snapshot of products as rendered by the legacy block */
+  recommendedProducts: e(c(s())),
+  /** Number of product cards per row */
+  cardsInRow: e(n()),
+  /** Mobile-only padding (right) */
+  mobileRightPadding: e(n()),
+  /** Mobile-only padding (left) */
+  mobileLeftPadding: e(n()),
+  /** Disable responsive scaling */
+  unresponsive: e(a()),
+  /** Layout orientation ('vertical' | 'horizontal') */
+  orientation: e(t()),
+  /** Whether long text is trimmed */
+  textTrimming: e(a()),
+  /** Block type marker used by some legacy variants */
+  blockType: e(t()),
+  /** Size variant marker (legacy data may use string or number) */
+  size: e(f([t(), n()])),
+  /** Vertical responsiveness flag (legacy size=1 variants) */
+  verticalResponsiveness: e(a())
+}), E = o({
+  /**
+   * Legacy recommendation block configs keyed by block ID.
+   * Pass this when loading a template authored with the v1
+   * recommendation block so the migrator can preserve filters,
+   * strategy, currency, locale, and layout data.
+   */
+  recommendationConfigs: e(
+    k(t(), I),
+    {}
+  )
+}), L = o({
   /** Initial HTML content */
   html: e(t(), ""),
   /** Initial CSS content */
   css: e(t(), ""),
   /** Preselected dynamic content items */
   preselectedDynamicContent: e(
-    c(f),
+    c(A),
     []
   ),
+  /** Valid custom field attribute names from the partner's categorized fields */
+  customFieldAttributes: e(c(t()), []),
   /** Selected unsubscribe page IDs */
-  selectedUnsubscribePages: e(c(p()), []),
+  selectedUnsubscribePages: e(c(n()), []),
   /** Force recreate template in Stripo storage (use true when updating externally modified templates) */
-  forceRecreate: e(a(), !1)
-}), A = o({
+  forceRecreate: e(a(), !1),
+  /** Migration-only inputs (legacy block configs) */
+  migration: e(E, {})
+}), O = o({
   /** Sender display name */
   senderName: e(t(), ""),
   /** Email subject line */
   subject: e(t(), "")
-}), C = o({
+}), v = o({
   /** Locale for the editor UI */
   locale: e(t(), "en"),
   /** Path to translations object */
   translationsPath: e(t(), "window.trans[Object.keys(window.trans)[0]]"),
   /** Migration date for template compatibility */
-  migrationDate: e(p(), 1759696858),
+  migrationDate: e(n(), 1759696858),
   /** Email header settings */
-  emailHeader: e(A, { senderName: "", subject: "" }),
+  emailHeader: e(O, { senderName: "", subject: "" }),
   /** Folder name for user-saved modules (used by Stripo plugin panel for path construction) */
-  savedModulesFolderName: e(t(), b.SAVED_MODULES),
+  savedModulesFolderName: e(t(), S.SAVED_MODULES),
   /** Folder name for default/prebuilt modules (used by Stripo plugin panel for path construction) */
-  defaultModulesFolderName: e(t(), b.DEFAULT_MODULES)
-}), T = o({
+  defaultModulesFolderName: e(t(), S.DEFAULT_MODULES)
+}), M = o({
   /** Whether to show the header bar */
   showHeader: e(a(), !0),
   /** Custom label for back button (if shown) */
   backButtonLabel: e(t())
-}), I = o({
+}), P = o({
   /** Enable dynamic content insertion */
   dynamicContent: e(a(), !0),
   /** Enable save as template functionality */
@@ -112,8 +175,12 @@ const m = {
   /** Enable unsubscribe block */
   unsubscribe: e(a(), !0),
   /** Disable modules panel in the editor */
-  modulesDisabled: e(a(), !1)
-}), E = n([
+  modulesDisabled: e(a(), !1),
+  /** Enable Liquid template syntax */
+  liquidSyntax: e(a(), !1),
+  /** Enable autosave (3-min interval + tab-hide). User toggles on/off from the header. */
+  autosave: e(a(), !1)
+}), N = l([
   "amp-accordion",
   "amp-carousel",
   "amp-form-controls",
@@ -127,7 +194,7 @@ const m = {
   "text-block",
   "timer-block",
   "video-block"
-]), g = n([
+]), D = l([
   "dynamic-content",
   "checkbox-block",
   "radio-button-block",
@@ -135,118 +202,121 @@ const m = {
   "unsubscribe-block",
   "coupon-block",
   "items-block"
-]), O = o({
+]), x = o({
   /** Default blocks to exclude from the editor */
   excludeDefaults: e(
-    c(E),
+    c(N),
     []
   ),
   /** Custom blocks to include in the editor */
   includeCustoms: e(
-    c(g),
+    c(D),
     []
   )
-}), l = o({
+}), m = o({
   /** Unique identifier for the rule */
   id: t(),
   /** Human-readable description */
   description: e(t()),
   /** Priority for rule ordering (lower = earlier) */
-  priority: p()
-}), L = o({
-  ...l.entries,
-  type: r("replace"),
+  priority: n()
+}), F = o({
+  ...m.entries,
+  type: i("replace"),
   /** String to search for */
   search: t(),
   /** Replacement string */
   replacement: t(),
   /** Replace all occurrences (default: false) */
   replaceAll: e(a())
-}), M = o({
-  ...l.entries,
-  type: r("regex"),
+}), U = o({
+  ...m.entries,
+  type: i("regex"),
   /** Regex pattern string */
   pattern: t(),
   /** Replacement string (supports $1, $2, etc.) */
   replacement: t(),
   /** Regex flags (e.g., 'gi') */
   flags: e(t())
-}), N = o({
-  ...l.entries,
-  type: r("remove"),
+}), B = o({
+  ...m.entries,
+  type: i("remove"),
   /** Strings or patterns to remove */
   targets: c(t())
-}), D = o({
-  ...l.entries,
-  type: r("custom"),
+}), w = o({
+  ...m.entries,
+  type: i("custom"),
   /** Custom processor function */
-  processor: S(
-    (i) => typeof i == "function",
+  processor: h(
+    (u) => typeof u == "function",
     "processor must be a function"
   )
-}), v = k("type", [
-  L,
-  M,
-  N,
-  D
-]), U = o({
+}), H = g("type", [
+  F,
+  U,
+  B,
+  w
+]), j = o({
   /** Custom compiler rules to apply */
-  customRules: e(c(v), []),
+  customRules: e(c(H), []),
   /** Skip default compiler rules */
   ignoreDefaultRules: e(a(), !1)
-}), x = o({
+}), q = o({
   /**
    * External validation handler called before save completes.
    * Return false to cancel the save operation.
    */
   externalValidation: e(
-    S(
-      (i) => typeof i == "function",
+    h(
+      (u) => typeof u == "function",
       "externalValidation must be a function"
     )
   )
-}), H = o({
+}), V = o({
   // Required sections
   /** Identity configuration (required) */
-  identity: h,
+  identity: R,
   /** Partner configuration (required) */
-  partner: y,
+  partner: T,
   // Optional sections (with defaults)
   /** Template content and presets */
-  template: e(R, {}),
+  template: e(L, {}),
   /** Editor settings */
-  editor: e(C, {}),
+  editor: e(v, {}),
   /** UI configuration */
-  ui: e(T, {}),
+  ui: e(M, {}),
   /** Feature toggles */
-  features: e(I, {}),
+  features: e(P, {}),
   /** Block configuration */
-  blocks: e(O, {}),
+  blocks: e(x, {}),
   /** Compiler configuration */
-  compiler: e(U, {}),
+  compiler: e(j, {}),
   /** Callbacks and event handlers */
-  callbacks: e(x, {})
+  callbacks: e(q, {})
 });
 export {
-  O as BlocksSchema,
-  x as CallbacksSchema,
-  v as CompilerRuleSchema,
-  U as CompilerSchema,
-  g as CustomBlockTypeSchema,
-  D as CustomRuleSchema,
-  E as DefaultBlockTypeSchema,
-  f as DynamicContentSchema,
-  C as EditorSchema,
-  A as EmailHeaderSchema,
-  I as FeaturesSchema,
-  H as GuidoConfigSchema,
-  h as IdentitySchema,
-  m as MessageType,
-  y as PartnerSchema,
-  s as ProductType,
-  M as RegexRuleSchema,
-  N as RemoveRuleSchema,
-  L as ReplaceRuleSchema,
-  R as TemplateSchema,
-  T as UISchema
+  x as BlocksSchema,
+  q as CallbacksSchema,
+  H as CompilerRuleSchema,
+  j as CompilerSchema,
+  D as CustomBlockTypeSchema,
+  w as CustomRuleSchema,
+  N as DefaultBlockTypeSchema,
+  A as DynamicContentSchema,
+  v as EditorSchema,
+  O as EmailHeaderSchema,
+  C as FallbackFontSchema,
+  P as FeaturesSchema,
+  V as GuidoConfigSchema,
+  R as IdentitySchema,
+  I as LegacyRecommendationConfigSchema,
+  d as MessageType,
+  T as PartnerSchema,
+  r as ProductType,
+  U as RegexRuleSchema,
+  B as RemoveRuleSchema,
+  F as ReplaceRuleSchema,
+  E as TemplateMigrationSchema,
+  L as TemplateSchema,
+  M as UISchema
 };

package/dist/components/Guido.vue.js

@@ -3,7 +3,7 @@ import i from "./Guido.vue2.js";
 import a from "../_virtual/_plugin-vue2_normalizer.js";
 var t = function() {
   var o = this, r = o._self._c, e = o._self._setupProxy;
-  return r("div", { staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(_) {
+  return r("div", { ref: "wrapperRef", staticClass: "guido-editor__wrapper", class: { "guido-editor__no-header": e.noHeader } }, [r(e.HeaderWrapper, { ref: "headerWrapperRef" }), r(e.AutoSaveController), e.editorStore.isPreviewModeOpen ? r(e.PreviewContainer) : o._e(), r("div", { directives: [{ name: "show", rawName: "v-show", value: !e.previewStore.isLoaded, expression: "!previewStore.isLoaded" }], staticClass: "guido-editor__container", class: { "guido-editor__no-header": e.noHeader }, attrs: { id: "guido-editor" } }), r(e.Toaster), r(e.FilterSelectionDrawer), r(e.SaveAsTemplateDrawer), e.isTestPartner() ? o._e() : r(e.OnboardingWrapper, { on: { "onboarding-finished": function(p) {
     return e.emit("onboarding:finished");
   } } }), r(e.UnsubscribeWrapper), r(e.LoadingWrapper)], 1);
 }, n = [], s = /* @__PURE__ */ a(
@@ -12,9 +12,9 @@ var t = function() {
   n,
   !1,
   null,
-  "a26d7792"
+  "1a4e7084"
 );
-const v = s.exports;
+const l = s.exports;
 export {
-  v as default
+  l as default
 };