@scaleflex/template-builder 0.1.1 → 0.4.0

package/dist/dam-store.d.ts

@@ -0,0 +1,92 @@
+/**
+ * The `dam-store` save path: upload an edited template to Filerobot so the
+ * CDN can render it.
+ *
+ * A stateless save hands the host raw XML — but the CDN renders only stored
+ * files, so a host that wants render URLs (previews, production banners) needs
+ * a copy in the DAM too. With `dam-store` the element makes that copy itself,
+ * with the same multipart upload the DAM-backed editor uses, and the `save`
+ * event carries the stored file's links next to the raw data.
+ *
+ * The raw `content` remains the host's copy of record: nothing here changes
+ * what the save event has always carried.
+ */
+import type { BuilderContentData } from './protocol';
+export declare const FILEROBOT_API = "https://api.filerobot.com";
+/** Credentials the element already holds; one of sassKey / secTemplate. */
+export interface DamStoreAuth {
+    token: string;
+    sassKey?: string;
+    secTemplate?: string;
+    sessionUuid?: string;
+    companyUuid?: string;
+    projectUuid?: string;
+}
+/** The stored copy's links, carried on the `save` event as `detail.stored`. */
+export interface StoredTemplate {
+    /** DAM file uuid of the stored `.fdt`. */
+    uuid: string;
+    /**
+     * CDN URL of the stored file, with its current `?vh=` cache key — append a
+     * template query to render it. Empty when the file record could not be read
+     * back after the upload (the file is stored regardless).
+     */
+    url: string;
+}
+export interface FileRecord {
+    uuid?: string;
+    name?: string;
+    folder?: {
+        name?: string;
+    };
+    url?: {
+        cdn?: string;
+        public?: string;
+        path?: string;
+    };
+}
+/**
+ * A security template is not a key — it is exchanged for a short-lived sass
+ * key first, the template authenticating its own exchange. Same call the app
+ * and the asset picker make.
+ *
+ * Exported (with `apiHeaders` / `getFileRecord`) for the demo page, which
+ * plays the host half of the same API conversation — one implementation of
+ * the auth rules, not two drifting copies.
+ */
+export declare function resolveKey(auth: DamStoreAuth): Promise<string>;
+/**
+ * Session scope only: a minted key carries its own, and pairing it with a
+ * session's uuids would mix one mode's key with the other mode's scope.
+ */
+export declare function apiHeaders(auth: DamStoreAuth, key: string): Record<string, string>;
+/**
+ * Whether a template id plausibly names a DAM file (hex-and-dashes uuid).
+ * Opaque host ids ('demo-1', 'sample-spring-banner') never do — looking them
+ * up would waste a round trip per save and couple every save to whichever
+ * status the API happens to answer a malformed id with.
+ */
+export declare function looksLikeDamFileUuid(id: string): boolean;
+/**
+ * One file's record. `null` means the identifier names nothing — a 404/gone,
+ * a 4xx rejecting the id itself, or the API's not-found envelope — all normal
+ * answers here. What THROWS is a failure to answer (auth, rate limit, 5xx,
+ * network): collapsing those into null would make a transient blip read as
+ * "file gone", and the callers act on that — re-homing an existing template
+ * into the fallback folder as a duplicate, or failing an unchanged re-save.
+ */
+export declare function getFileRecord(auth: DamStoreAuth, key: string, uuid: string): Promise<FileRecord | null>;
+/**
+ * Store one save in the DAM and return the stored copy's links.
+ *
+ * Uploads into the folder the file this template is already stored as lives
+ * in — the host's `templateId` when it names a DAM file, else `knownUuid`
+ * (the copy a previous save in this session made; hosts persist `stored.uuid`
+ * rather than echoing it into `template-id`, which would reload the editor) —
+ * so same name + folder makes the backend version the template in place. New
+ * templates land in `fallbackFolder`. Unchanged content resolves to the
+ * already-stored file rather than failing. Throws with a human-readable
+ * message when the copy could not be made; the caller decides what a save
+ * without a stored copy means.
+ */
+export declare function storeTemplateInDam(data: BuilderContentData, auth: DamStoreAuth, fallbackFolder: string, knownUuid?: string): Promise<StoredTemplate>;

package/dist/define.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./template-builder-CSyPZni9.cjs");typeof customElements<"u"&&!customElements.get("sfx-template-builder")&&customElements.define("sfx-template-builder",e.SfxTemplateBuilder);exports.SfxTemplateBuilder=e.SfxTemplateBuilder;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./template-builder-Byqg1q93.cjs");typeof customElements<"u"&&!customElements.get("sfx-template-builder")&&customElements.define("sfx-template-builder",e.SfxTemplateBuilder);exports.SfxTemplateBuilder=e.SfxTemplateBuilder;
 //# sourceMappingURL=define.cjs.map

package/dist/define.js

@@ -1,4 +1,4 @@
-import { S as e } from "./template-builder-S33H_d5T.js";
+import { S as e } from "./template-builder-B9Cwo_Q-.js";
 typeof customElements < "u" && !customElements.get("sfx-template-builder") && customElements.define("sfx-template-builder", e);
 export {
   e as SfxTemplateBuilder

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./template-builder-CSyPZni9.cjs");exports.AUTH_MODES=E.AUTH_MODES;exports.BRAND_COLOR_PATTERN=E.BRAND_COLOR_PATTERN;exports.BUILDER_CLOSE=E.BUILDER_CLOSE;exports.BUILDER_CONTENT=E.BUILDER_CONTENT;exports.BUILDER_CONTENT_REQUEST=E.BUILDER_CONTENT_REQUEST;exports.BUILDER_DIRTY=E.BUILDER_DIRTY;exports.BUILDER_ERROR=E.BUILDER_ERROR;exports.BUILDER_OPEN=E.BUILDER_OPEN;exports.BUILDER_READY=E.BUILDER_READY;exports.BUILDER_SAVE=E.BUILDER_SAVE;exports.EMBED_PARAMS=E.EMBED_PARAMS;exports.EMBED_ROUTE=E.EMBED_ROUTE;exports.HOST_LOAD=E.HOST_LOAD;exports.HOST_SAVED=E.HOST_SAVED;exports.PROTOCOL_VERSION=E.PROTOCOL_VERSION;exports.SfxTemplateBuilder=E.SfxTemplateBuilder;exports.builderRoute=E.builderRoute;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./template-builder-Byqg1q93.cjs");exports.AUTH_MODES=E.AUTH_MODES;exports.BLANK_TEMPLATE_XML=E.BLANK_TEMPLATE_XML;exports.BRAND_COLOR_PATTERN=E.BRAND_COLOR_PATTERN;exports.BUILDER_CLOSE=E.BUILDER_CLOSE;exports.BUILDER_CONTENT=E.BUILDER_CONTENT;exports.BUILDER_CONTENT_REQUEST=E.BUILDER_CONTENT_REQUEST;exports.BUILDER_DIRTY=E.BUILDER_DIRTY;exports.BUILDER_ERROR=E.BUILDER_ERROR;exports.BUILDER_OPEN=E.BUILDER_OPEN;exports.BUILDER_READY=E.BUILDER_READY;exports.BUILDER_SAVE=E.BUILDER_SAVE;exports.EMBED_PARAMS=E.EMBED_PARAMS;exports.EMBED_ROUTE=E.EMBED_ROUTE;exports.HOST_CONFIG=E.HOST_CONFIG;exports.HOST_LOAD=E.HOST_LOAD;exports.HOST_SAVED=E.HOST_SAVED;exports.PROTOCOL_VERSION=E.PROTOCOL_VERSION;exports.SfxTemplateBuilder=E.SfxTemplateBuilder;exports.builderRoute=E.builderRoute;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { SfxTemplateBuilder, type TemplateBuilderStatus, type TemplateBuilderEventMap, type TemplateBuilderSaveDetail, } from './template-builder';
+export { SfxTemplateBuilder, type TemplateBuilderStatus, type TemplateBuilderEventMap, type TemplateBuilderSaveDetail, type StoredTemplate, type DamStoreAuth, } from './template-builder';
 export * from './protocol';

package/dist/index.js

@@ -1,21 +1,23 @@
-import { A as a, B as s, a as _, b as D, c as O, d as T, e as B, f as L, g as S, h as U, E as A, i as I, H as N, j as e, P as C, S as P, k as r } from "./template-builder-S33H_d5T.js";
+import { A as a, B as _, a as s, b as O, c as T, d as D, e as L, f as B, g as A, h as S, i as I, E as U, j as N, H as e, k as C, l as M, P, S as H, m as l } from "./template-builder-B9Cwo_Q-.js";
 export {
   a as AUTH_MODES,
+  _ as BLANK_TEMPLATE_XML,
   s as BRAND_COLOR_PATTERN,
-  _ as BUILDER_CLOSE,
-  D as BUILDER_CONTENT,
-  O as BUILDER_CONTENT_REQUEST,
-  T as BUILDER_DIRTY,
+  O as BUILDER_CLOSE,
+  T as BUILDER_CONTENT,
+  D as BUILDER_CONTENT_REQUEST,
+  L as BUILDER_DIRTY,
   B as BUILDER_ERROR,
-  L as BUILDER_OPEN,
+  A as BUILDER_OPEN,
   S as BUILDER_READY,
-  U as BUILDER_SAVE,
-  A as EMBED_PARAMS,
-  I as EMBED_ROUTE,
-  N as HOST_LOAD,
-  e as HOST_SAVED,
-  C as PROTOCOL_VERSION,
-  P as SfxTemplateBuilder,
-  r as builderRoute
+  I as BUILDER_SAVE,
+  U as EMBED_PARAMS,
+  N as EMBED_ROUTE,
+  e as HOST_CONFIG,
+  C as HOST_LOAD,
+  M as HOST_SAVED,
+  P as PROTOCOL_VERSION,
+  H as SfxTemplateBuilder,
+  l as builderRoute
 };
 //# sourceMappingURL=index.js.map

package/dist/protocol.d.ts

@@ -1,4 +1,4 @@
-export declare const PROTOCOL_VERSION = 2;
+export declare const PROTOCOL_VERSION = 3;
 /** Editor mounted with valid auth — the embed handshake succeeded. */
 export declare const BUILDER_READY = "design-templates:builder:ready";
 /** Editor UI opened (kept for Hub backwards compatibility; implies ready). */
@@ -150,6 +150,88 @@ export interface HostLoadMessage {
     type: typeof HOST_LOAD;
     data: HostLoadData;
 }
+/**
+ * An empty `.fdt` document: no layouts, no layers, no variables. What the
+ * widget sends as `HOST_LOAD` content when the host asked for a new template
+ * (`new-template`) instead of supplying one, so starting from scratch costs a
+ * host no knowledge of the template format.
+ *
+ * The editor opens on its empty state — "No layouts yet. Click + Add to create
+ * one." — and the user picks the canvas size there. Save is refused until a
+ * layout exists, and hands back a fully-formed document serialized by the app,
+ * not this skeleton.
+ *
+ * Sent as ordinary `HOST_LOAD` content rather than a new message so it works
+ * against app deployments that predate this widget version: the document is
+ * the whole signal, and every app that can parse a template can parse this.
+ *
+ * `version` tracks the app's `TEMPLATE_VERSION` for the benefit of whoever
+ * reads this next: nothing consumes it. The parser never looks at it, and the
+ * backend never sees this document — the app refuses to save a template with
+ * no layouts, so what reaches the render pipeline was re-serialized by the app
+ * with a layout present. A widget lagging the app by a version still loads.
+ * `design-templates` pins the pair in
+ * `src/lib/xml/__tests__/blank-template.test.ts`.
+ */
+export declare const BLANK_TEMPLATE_XML: string;
+/**
+ * Host-supplied editor configuration (protocol v3). Sent once the app reports
+ * `BUILDER_READY`, and again whenever the host changes it.
+ *
+ * Separate from `HOST_LOAD` because it is not per-template and because it must
+ * also reach DAM-backed embeds, which never receive a `HOST_LOAD` at all — the
+ * app loads those templates itself.
+ *
+ * Purely additive: an app deployment that predates this message ignores it and
+ * behaves exactly as before, so a newer widget stays compatible with an older
+ * app. Held to the same origin bar as `HOST_LOAD`.
+ */
+export declare const HOST_CONFIG = "design-templates:host:config";
+/**
+ * One field of a host-supplied metadata model, offered in the editor as the
+ * "Custom metadata" value source.
+ *
+ * The model is a vocabulary, not data: it names the fields the host can fill at
+ * render time, so an author can bind a variable to `sku` rather than having to
+ * remember that the variable's slug happens to mean the SKU. No value travels
+ * with it — the host substitutes one by putting `$slug=value` in the render
+ * query, exactly as it would for a free-text variable.
+ *
+ * This is what makes named fields workable in `secTemplate` / stateless embeds,
+ * where the Hub project model (and with it the "File metadata" source) is
+ * unavailable.
+ */
+export interface CustomMetadataField {
+    /**
+     * Stable identifier stored in the template as `custom_ckey`. The host's own
+     * key for the field — the app never resolves it against anything.
+     */
+    key: string;
+    /** Label shown in the editor's field picker. Falls back to `key` when empty. */
+    title?: string;
+    /** Optional section header, used to group fields in the picker. */
+    group?: string;
+}
+export interface HostConfigData {
+    /**
+     * Metadata model offered as the "Custom metadata" value source. Omitted or
+     * empty hides that source in the editor, so a host that sends nothing sees
+     * the two sources it always had.
+     */
+    customMetadata?: CustomMetadataField[];
+    /**
+     * Display name for the custom-metadata value source in the editor's UI
+     * (source dropdowns, properties-panel section). Defaults to "Custom
+     * metadata"; a host can rename it after its own domain — e.g. "External
+     * metadata" or "Product attributes". Pure wording: the stored template is
+     * unaffected.
+     */
+    customMetadataLabel?: string;
+}
+export interface HostConfigMessage {
+    type: typeof HOST_CONFIG;
+    data: HostConfigData;
+}
 /**
  * Stateless mode only (protocol v2). Reports whether the host managed to
  * persist the content it received in `BUILDER_CONTENT`.
@@ -171,7 +253,7 @@ export interface HostSavedMessage {
     type: typeof HOST_SAVED;
     data: HostSavedData;
 }
-export type HostMessage = HostLoadMessage | HostSavedMessage;
+export type HostMessage = HostLoadMessage | HostSavedMessage | HostConfigMessage;
 /**
  * Query params the app's proxy middleware (`src/proxy.ts`) converts into auth
  * cookies on first navigation. Names are wire format.

package/dist/react.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react");require("./define.cjs");const h=o.forwardRef(function(y,v){const{className:U,style:b,onReady:c,onOpen:d,onClose:m,onSave:i,onError:p,onDirtyChange:f,...e}=y,l=o.useRef(null);return o.useImperativeHandle(v,()=>l.current,[]),o.useLayoutEffect(()=>{const t=l.current;t&&(t.baseUrl=e.baseUrl,t.token=e.token,t.sassKey=e.sassKey??"",t.sessionUuid=e.sessionUuid??"",t.secTemplate=e.secTemplate??"",t.companyUuid=e.companyUuid??"",t.projectUuid=e.projectUuid??"",t.templateId=e.templateId??"",t.mode=e.mode??"inline",t.stateless=e.stateless??!1,t.templateName=e.templateName??"",t.templateQuery=e.templateQuery??"",t.brandColor=e.brandColor??"",t.theme=e.theme??"",t.content=e.content??"",e.readyTimeout!==void 0&&(t.readyTimeout=e.readyTimeout))},[e.baseUrl,e.token,e.sassKey,e.sessionUuid,e.secTemplate,e.companyUuid,e.projectUuid,e.templateId,e.mode,e.stateless,e.content,e.templateName,e.templateQuery,e.brandColor,e.theme,e.readyTimeout]),o.useLayoutEffect(()=>{const t=l.current;if(!t)return;const u=[],a=(r,s)=>{if(!s)return;const n=(T=>s(T.detail));t.addEventListener(r,n),u.push([r,n])};if(a("ready",c),a("open",d),a("close",m),a("error",p),a("dirtychange",f),i){const r=(s=>{Promise.resolve().then(()=>i(s.detail)).then(n=>t.confirmSave(n!==!1)).catch(n=>{console.error("[sfx-template-builder] onSave failed:",n),t.confirmSave(!1)})});t.addEventListener("save",r),u.push(["save",r])}return()=>{for(const[r,s]of u)t.removeEventListener(r,s)}},[c,d,m,i,p,f]),o.createElement("sfx-template-builder",{ref:l,class:U,style:b})});exports.TemplateBuilder=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");require("./define.cjs");const g=a.forwardRef(function(b,h){const{className:U,style:T,onReady:i,onOpen:c,onClose:m,onSave:f,onError:p,onDirtyChange:y,...e}=b,l=a.useRef(null);a.useImperativeHandle(h,()=>l.current,[]),a.useLayoutEffect(()=>{const t=l.current;t&&(t.baseUrl=e.baseUrl,t.token=e.token,t.sassKey=e.sassKey??"",t.sessionUuid=e.sessionUuid??"",t.secTemplate=e.secTemplate??"",t.companyUuid=e.companyUuid??"",t.projectUuid=e.projectUuid??"",t.templateId=e.templateId??"",t.mode=e.mode??"inline",t.stateless=e.stateless??!1,t.templateName=e.templateName??"",t.templateQuery=e.templateQuery??"",t.brandColor=e.brandColor??"",t.theme=e.theme??"",t.newTemplate=e.newTemplate??!1,t.customMetadata=e.customMetadata??[],t.customMetadataLabel=e.customMetadataLabel??"",t.damStore=e.damStore??!1,t.storeFolder=e.storeFolder??"/",t.storedUuid=e.storedUuid??"",t.content=e.content??"",e.readyTimeout!==void 0&&(t.readyTimeout=e.readyTimeout))},[e.baseUrl,e.token,e.sassKey,e.sessionUuid,e.secTemplate,e.companyUuid,e.projectUuid,e.templateId,e.mode,e.stateless,e.content,e.newTemplate,e.templateName,e.templateQuery,e.brandColor,e.theme,e.customMetadata,e.customMetadataLabel,e.damStore,e.storeFolder,e.storedUuid,e.readyTimeout]);const d=a.useRef({onReady:i,onOpen:c,onClose:m,onSave:f,onError:p,onDirtyChange:y});return a.useLayoutEffect(()=>{d.current={onReady:i,onOpen:c,onClose:m,onSave:f,onError:p,onDirtyChange:y}}),a.useLayoutEffect(()=>{const t=l.current;if(!t)return;const u=[],n=(o,r)=>{const s=(S=>r(d.current)?.(S.detail));t.addEventListener(o,s),u.push([o,s])};n("ready",o=>o.onReady),n("open",o=>o.onOpen),n("close",o=>o.onClose),n("error",o=>o.onError),n("dirtychange",o=>o.onDirtyChange);const v=(o=>{const r=d.current.onSave;r&&Promise.resolve().then(()=>r(o.detail)).then(s=>t.confirmSave(s!==!1)).catch(s=>{console.error("[sfx-template-builder] onSave failed:",s),t.confirmSave(!1)})});return t.addEventListener("save",v),u.push(["save",v]),()=>{typeof t.flushPendingSaves=="function"&&t.flushPendingSaves("widget removed before the rendering copy completed");for(const[o,r]of u)t.removeEventListener(o,r)}},[]),a.createElement("sfx-template-builder",{ref:l,class:U,style:T})});exports.TemplateBuilder=g;
 //# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"react.cjs","sources":["../src/react.ts"],"sourcesContent":["import {\n  createElement,\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type ReactElement,\n} from 'react'\nimport './define'\nimport type { SfxTemplateBuilder } from './template-builder'\nimport type { TemplateBuilderSaveDetail } from './template-builder'\nimport type { BuilderDirtyData, BuilderErrorData, BuilderTheme } from './protocol'\n\n/**\n * Hub session — the full-featured credential.\n */\nexport interface TemplateBuilderSessionAuth {\n  sassKey: string\n  sessionUuid: string\n  companyUuid?: string\n  projectUuid?: string\n  secTemplate?: never\n}\n\n/**\n * Filerobot security template — a guest credential for hosts that have no Hub\n * session to hand over. `stateless` is required rather than merely implied:\n * the app takes a security template on the stateless embed route only, so the\n * combination is a compile-time error instead of a runtime one.\n *\n * `companyUuid` / `projectUuid` are absent by design — they name a Hub project\n * that cannot be looked up without a session.\n */\nexport interface TemplateBuilderSecTemplateAuth {\n  secTemplate: string\n  stateless: true\n  sassKey?: never\n  sessionUuid?: never\n  companyUuid?: never\n  projectUuid?: never\n}\n\nexport interface TemplateBuilderBaseProps {\n  baseUrl: string\n  token: string\n  templateId?: string\n  mode?: 'inline' | 'modal'\n  /** Hand the template in and take it back out instead of using the DAM. */\n  stateless?: boolean\n  /** Stateless mode: the template to edit, as `.fdt` XML. */\n  content?: string\n  /** Stateless mode: display name for the editor header. */\n  templateName?: string\n  /**\n   * Stateless mode: the `template_query` to open on — the value handed back on\n   * save. Reopens the template on the same layout and variable values; empty\n   * falls back to the XML's own `default=` attributes.\n   */\n  templateQuery?: string\n  /** Accent colour for the editor chrome, as `#rgb` / `#rrggbb`. */\n  brandColor?: string\n  /** Colour scheme for the editor chrome. */\n  theme?: BuilderTheme\n  readyTimeout?: number\n  className?: string\n  style?: CSSProperties\n  onReady?: () => void\n  onOpen?: () => void\n  onClose?: () => void\n  /**\n   * Fired on save. In stateless mode the detail carries the edited `content`\n   * for you to persist; otherwise it reports the uuid the app uploaded to.\n   *\n   * In stateless mode the outcome is reported back to the editor: return (or\n   * resolve to) `false`, or throw, and the editor restores its unsaved-changes\n   * flag and tells the user the save failed. Anything else counts as persisted.\n   */\n  onSave?: (\n    data: TemplateBuilderSaveDetail,\n  ) => void | boolean | Promise<void | boolean>\n  onError?: (data: BuilderErrorData) => void\n  /**\n   * Stateless mode: unsaved-changes flag changed. Use it to prompt before\n   * swapping `content`, which discards in-progress edits.\n   */\n  onDirtyChange?: (data: BuilderDirtyData) => void\n}\n\nexport type TemplateBuilderProps = TemplateBuilderBaseProps &\n  (TemplateBuilderSessionAuth | TemplateBuilderSecTemplateAuth)\n\n/**\n * React wrapper around `<sfx-template-builder>`. Props are assigned as\n * element properties via ref (works on React 18 and 19 alike); callbacks\n * subscribe to the element's CustomEvents.\n *\n * Forwards a ref to the underlying element, which is the only way to reach the\n * imperative API — `open()` in particular, without which `mode=\"modal\"` can\n * never be shown:\n *\n * ```tsx\n * const builder = useRef<SfxTemplateBuilder>(null)\n * <TemplateBuilder ref={builder} mode=\"modal\" … />\n * <button onClick={() => builder.current?.open('tpl-1')}>Edit</button>\n * ```\n *\n * `forwardRef` rather than a plain `ref` prop: React 19 accepts the latter for\n * function components, React 18 does not, and both are supported peers.\n */\nexport const TemplateBuilder = forwardRef<\n  SfxTemplateBuilder,\n  TemplateBuilderProps\n>(function TemplateBuilder(props, forwardedRef): ReactElement {\n  const {\n    className,\n    style,\n    onReady,\n    onOpen,\n    onClose,\n    onSave,\n    onError,\n    onDirtyChange,\n    ...config\n  } = props\n  const ref = useRef<SfxTemplateBuilder>(null)\n\n  // Hand the same element out to the caller without giving up the internal ref\n  // the effects below rely on.\n  useImperativeHandle(forwardedRef, () => ref.current as SfxTemplateBuilder, [])\n\n  // Assign config before paint so the iframe doesn't first mount with defaults.\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    el.baseUrl = config.baseUrl\n    el.token = config.token\n    el.sassKey = config.sassKey ?? ''\n    el.sessionUuid = config.sessionUuid ?? ''\n    el.secTemplate = config.secTemplate ?? ''\n    el.companyUuid = config.companyUuid ?? ''\n    el.projectUuid = config.projectUuid ?? ''\n    el.templateId = config.templateId ?? ''\n    el.mode = config.mode ?? 'inline'\n    el.stateless = config.stateless ?? false\n    el.templateName = config.templateName ?? ''\n    el.templateQuery = config.templateQuery ?? ''\n    el.brandColor = config.brandColor ?? ''\n    el.theme = config.theme ?? ''\n    // Assigned last: the element sends content to the app as soon as it has\n    // both a request and a value, so the id, name and query must already be\n    // set — all four ship as one message.\n    el.content = config.content ?? ''\n    if (config.readyTimeout !== undefined) el.readyTimeout = config.readyTimeout\n  }, [\n    config.baseUrl,\n    config.token,\n    config.sassKey,\n    config.sessionUuid,\n    config.secTemplate,\n    config.companyUuid,\n    config.projectUuid,\n    config.templateId,\n    config.mode,\n    config.stateless,\n    config.content,\n    config.templateName,\n    config.templateQuery,\n    config.brandColor,\n    config.theme,\n    config.readyTimeout,\n  ])\n\n  // Layout effect, not passive: the element reports config errors (e.g.\n  // `invalid-base-url`) in a microtask queued during this same commit, and a\n  // passive effect would subscribe only after that microtask has fired —\n  // making a mount-time error unobservable from React. This effect is declared\n  // after the config one, so it still runs once the config is assigned.\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const subs: Array<[string, EventListener]> = []\n    const on = (name: string, handler?: (detail: never) => void) => {\n      if (!handler) return\n      const listener = ((e: CustomEvent) => handler(e.detail as never)) as EventListener\n      el.addEventListener(name, listener)\n      subs.push([name, listener])\n    }\n    on('ready', onReady)\n    on('open', onOpen)\n    on('close', onClose)\n    on('error', onError)\n    on('dirtychange', onDirtyChange)\n\n    // `save` is not just re-emitted: in stateless mode the handler's outcome\n    // is acked back, so a failed write on the host side doesn't leave the\n    // editor showing the template as saved. `confirmSave` no-ops in DAM mode.\n    if (onSave) {\n      const listener = ((e: CustomEvent<TemplateBuilderSaveDetail>) => {\n        // Wrapped in a promise so a synchronous throw is handled like a\n        // rejection, and a sync `false` like a resolved one.\n        Promise.resolve()\n          .then(() => onSave(e.detail))\n          .then((result) => el.confirmSave(result !== false))\n          .catch((err) => {\n            // No message: an internal error string is not something to put in\n            // front of the end user. The editor uses its own wording.\n            console.error('[sfx-template-builder] onSave failed:', err)\n            el.confirmSave(false)\n          })\n      }) as EventListener\n      el.addEventListener('save', listener)\n      subs.push(['save', listener])\n    }\n\n    return () => {\n      for (const [name, listener] of subs) el.removeEventListener(name, listener)\n    }\n  }, [onReady, onOpen, onClose, onSave, onError, onDirtyChange])\n\n  // eslint-disable-next-line react-hooks/refs -- ref is forwarded as a prop, not read during render\n  return createElement('sfx-template-builder', { ref, class: className, style })\n})\n"],"names":["TemplateBuilder","forwardRef","props","forwardedRef","className","style","onReady","onOpen","onClose","onSave","onError","onDirtyChange","config","ref","useRef","useImperativeHandle","useLayoutEffect","el","subs","on","name","handler","listener","e","result","err","createElement"],"mappings":"iIA8GO,MAAMA,EAAkBC,EAAAA,WAG7B,SAAyBC,EAAOC,EAA4B,CAC5D,KAAM,CACJ,UAAAC,EACA,MAAAC,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,EACA,cAAAC,EACA,GAAGC,CAAA,EACDV,EACEW,EAAMC,EAAAA,OAA2B,IAAI,EAI3CC,OAAAA,EAAAA,oBAAoBZ,EAAc,IAAMU,EAAI,QAA+B,CAAA,CAAE,EAG7EG,EAAAA,gBAAgB,IAAM,CACpB,MAAMC,EAAKJ,EAAI,QACVI,IACLA,EAAG,QAAUL,EAAO,QACpBK,EAAG,MAAQL,EAAO,MAClBK,EAAG,QAAUL,EAAO,SAAW,GAC/BK,EAAG,YAAcL,EAAO,aAAe,GACvCK,EAAG,YAAcL,EAAO,aAAe,GACvCK,EAAG,YAAcL,EAAO,aAAe,GACvCK,EAAG,YAAcL,EAAO,aAAe,GACvCK,EAAG,WAAaL,EAAO,YAAc,GACrCK,EAAG,KAAOL,EAAO,MAAQ,SACzBK,EAAG,UAAYL,EAAO,WAAa,GACnCK,EAAG,aAAeL,EAAO,cAAgB,GACzCK,EAAG,cAAgBL,EAAO,eAAiB,GAC3CK,EAAG,WAAaL,EAAO,YAAc,GACrCK,EAAG,MAAQL,EAAO,OAAS,GAI3BK,EAAG,QAAUL,EAAO,SAAW,GAC3BA,EAAO,eAAiB,SAAWK,EAAG,aAAeL,EAAO,cAClE,EAAG,CACDA,EAAO,QACPA,EAAO,MACPA,EAAO,QACPA,EAAO,YACPA,EAAO,YACPA,EAAO,YACPA,EAAO,YACPA,EAAO,WACPA,EAAO,KACPA,EAAO,UACPA,EAAO,QACPA,EAAO,aACPA,EAAO,cACPA,EAAO,WACPA,EAAO,MACPA,EAAO,YAAA,CACR,EAODI,EAAAA,gBAAgB,IAAM,CACpB,MAAMC,EAAKJ,EAAI,QACf,GAAI,CAACI,EAAI,OACT,MAAMC,EAAuC,CAAA,EACvCC,EAAK,CAACC,EAAcC,IAAsC,CAC9D,GAAI,CAACA,EAAS,OACd,MAAMC,GAAaC,GAAmBF,EAAQE,EAAE,MAAe,GAC/DN,EAAG,iBAAiBG,EAAME,CAAQ,EAClCJ,EAAK,KAAK,CAACE,EAAME,CAAQ,CAAC,CAC5B,EAUA,GATAH,EAAG,QAASb,CAAO,EACnBa,EAAG,OAAQZ,CAAM,EACjBY,EAAG,QAASX,CAAO,EACnBW,EAAG,QAAST,CAAO,EACnBS,EAAG,cAAeR,CAAa,EAK3BF,EAAQ,CACV,MAAMa,GAAaC,GAA8C,CAG/D,QAAQ,QAAA,EACL,KAAK,IAAMd,EAAOc,EAAE,MAAM,CAAC,EAC3B,KAAMC,GAAWP,EAAG,YAAYO,IAAW,EAAK,CAAC,EACjD,MAAOC,GAAQ,CAGd,QAAQ,MAAM,wCAAyCA,CAAG,EAC1DR,EAAG,YAAY,EAAK,CACtB,CAAC,CACL,GACAA,EAAG,iBAAiB,OAAQK,CAAQ,EACpCJ,EAAK,KAAK,CAAC,OAAQI,CAAQ,CAAC,CAC9B,CAEA,MAAO,IAAM,CACX,SAAW,CAACF,EAAME,CAAQ,IAAKJ,EAAMD,EAAG,oBAAoBG,EAAME,CAAQ,CAC5E,CACF,EAAG,CAAChB,EAASC,EAAQC,EAASC,EAAQC,EAASC,CAAa,CAAC,EAGtDe,EAAAA,cAAc,uBAAwB,CAAE,IAAAb,EAAK,MAAOT,EAAW,MAAAC,EAAO,CAC/E,CAAC"}
+{"version":3,"file":"react.cjs","sources":["../src/react.ts"],"sourcesContent":["import {\n  createElement,\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type ReactElement,\n} from 'react'\nimport './define'\nimport type { SfxTemplateBuilder } from './template-builder'\nimport type { TemplateBuilderSaveDetail } from './template-builder'\nimport type {\n  BuilderDirtyData,\n  BuilderErrorData,\n  BuilderTheme,\n  CustomMetadataField,\n} from './protocol'\n\n/**\n * Hub session — the full-featured credential.\n */\nexport interface TemplateBuilderSessionAuth {\n  sassKey: string\n  sessionUuid: string\n  companyUuid?: string\n  projectUuid?: string\n  secTemplate?: never\n}\n\n/**\n * Filerobot security template — a guest credential for hosts that have no Hub\n * session to hand over. `stateless` is required rather than merely implied:\n * the app takes a security template on the stateless embed route only, so the\n * combination is a compile-time error instead of a runtime one.\n *\n * `companyUuid` / `projectUuid` are absent by design — they name a Hub project\n * that cannot be looked up without a session.\n */\nexport interface TemplateBuilderSecTemplateAuth {\n  secTemplate: string\n  stateless: true\n  sassKey?: never\n  sessionUuid?: never\n  companyUuid?: never\n  projectUuid?: never\n}\n\nexport interface TemplateBuilderBaseProps {\n  baseUrl: string\n  token: string\n  templateId?: string\n  mode?: 'inline' | 'modal'\n  /** Hand the template in and take it back out instead of using the DAM. */\n  stateless?: boolean\n  /** Stateless mode: the template to edit, as `.fdt` XML. */\n  content?: string\n  /**\n   * Stateless mode: open on a new, empty template instead of supplying\n   * `content`. The widget provides the blank document, the user picks the\n   * canvas size in the editor, and `onSave` receives a complete `.fdt` to\n   * store. Ignored when `content` is set.\n   */\n  newTemplate?: boolean\n  /** Stateless mode: display name for the editor header. */\n  templateName?: string\n  /**\n   * Stateless mode: the `template_query` to open on — the value handed back on\n   * save. Reopens the template on the same layout and variable values; empty\n   * falls back to the XML's own `default=` attributes.\n   */\n  templateQuery?: string\n  /** Accent colour for the editor chrome, as `#rgb` / `#rrggbb`. */\n  brandColor?: string\n  /** Colour scheme for the editor chrome. */\n  theme?: BuilderTheme\n  /**\n   * Metadata model offered in the editor as the \"Custom metadata\" value source\n   * — names only, no values. Omit it and the source is not offered.\n   *\n   * Compared by identity, like every other prop here, so a freshly built array\n   * counts as a change. Nothing is re-sent to the editor over it — the element\n   * de-dupes by value — but hoisting or memoising the array avoids the churn.\n   */\n  customMetadata?: CustomMetadataField[]\n  /**\n   * Display name for the custom-metadata value source in the editor's UI —\n   * e.g. \"External metadata\". Wording only: the stored template is unaffected.\n   * Empty uses the editor's default, \"Custom metadata\".\n   */\n  customMetadataLabel?: string\n  /**\n   * Stateless only: store each save in Filerobot too, so the CDN can render\n   * it. `onSave`'s detail then carries `stored: { uuid, url }` next to the raw\n   * `content` — or `storeError` when the copy failed.\n   */\n  damStore?: boolean\n  /**\n   * Folder new templates land in under `damStore` when the template id names\n   * no existing DAM file (an existing file's own folder always wins).\n   */\n  storeFolder?: string\n  /**\n   * `damStore`: the `stored.uuid` a previous session's save reported for THIS\n   * document, so re-saves after a reload resolve to (and version) the copy\n   * that already exists instead of erroring on unchanged content or starting\n   * a fresh file. Per-document — pass it with the content it belongs to.\n   */\n  storedUuid?: string\n  readyTimeout?: number\n  className?: string\n  style?: CSSProperties\n  onReady?: () => void\n  onOpen?: () => void\n  onClose?: () => void\n  /**\n   * Fired on save. In stateless mode the detail carries the edited `content`\n   * for you to persist; otherwise it reports the uuid the app uploaded to.\n   *\n   * In stateless mode the outcome is reported back to the editor: return (or\n   * resolve to) `false`, or throw, and the editor restores its unsaved-changes\n   * flag and tells the user the save failed. Anything else counts as persisted.\n   */\n  onSave?: (\n    data: TemplateBuilderSaveDetail,\n  ) => void | boolean | Promise<void | boolean>\n  onError?: (data: BuilderErrorData) => void\n  /**\n   * Stateless mode: unsaved-changes flag changed. Use it to prompt before\n   * swapping `content`, which discards in-progress edits.\n   */\n  onDirtyChange?: (data: BuilderDirtyData) => void\n}\n\nexport type TemplateBuilderProps = TemplateBuilderBaseProps &\n  (TemplateBuilderSessionAuth | TemplateBuilderSecTemplateAuth)\n\n/**\n * React wrapper around `<sfx-template-builder>`. Props are assigned as\n * element properties via ref (works on React 18 and 19 alike); callbacks\n * subscribe to the element's CustomEvents.\n *\n * Forwards a ref to the underlying element, which is the only way to reach the\n * imperative API — `open()` in particular, without which `mode=\"modal\"` can\n * never be shown:\n *\n * ```tsx\n * const builder = useRef<SfxTemplateBuilder>(null)\n * <TemplateBuilder ref={builder} mode=\"modal\" … />\n * <button onClick={() => builder.current?.open('tpl-1')}>Edit</button>\n * ```\n *\n * `forwardRef` rather than a plain `ref` prop: React 19 accepts the latter for\n * function components, React 18 does not, and both are supported peers.\n */\nexport const TemplateBuilder = forwardRef<\n  SfxTemplateBuilder,\n  TemplateBuilderProps\n>(function TemplateBuilder(props, forwardedRef): ReactElement {\n  const {\n    className,\n    style,\n    onReady,\n    onOpen,\n    onClose,\n    onSave,\n    onError,\n    onDirtyChange,\n    ...config\n  } = props\n  const ref = useRef<SfxTemplateBuilder>(null)\n\n  // Hand the same element out to the caller without giving up the internal ref\n  // the effects below rely on.\n  useImperativeHandle(forwardedRef, () => ref.current as SfxTemplateBuilder, [])\n\n  // Assign config before paint so the iframe doesn't first mount with defaults.\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    el.baseUrl = config.baseUrl\n    el.token = config.token\n    el.sassKey = config.sassKey ?? ''\n    el.sessionUuid = config.sessionUuid ?? ''\n    el.secTemplate = config.secTemplate ?? ''\n    el.companyUuid = config.companyUuid ?? ''\n    el.projectUuid = config.projectUuid ?? ''\n    el.templateId = config.templateId ?? ''\n    el.mode = config.mode ?? 'inline'\n    el.stateless = config.stateless ?? false\n    el.templateName = config.templateName ?? ''\n    el.templateQuery = config.templateQuery ?? ''\n    el.brandColor = config.brandColor ?? ''\n    el.theme = config.theme ?? ''\n    el.newTemplate = config.newTemplate ?? false\n    el.customMetadata = config.customMetadata ?? []\n    el.customMetadataLabel = config.customMetadataLabel ?? ''\n    el.damStore = config.damStore ?? false\n    el.storeFolder = config.storeFolder ?? '/'\n    el.storedUuid = config.storedUuid ?? ''\n    // Assigned last: the element sends content to the app as soon as it has\n    // both a request and a value, so the id, name and query must already be\n    // set — all four ship as one message.\n    el.content = config.content ?? ''\n    if (config.readyTimeout !== undefined) el.readyTimeout = config.readyTimeout\n  }, [\n    config.baseUrl,\n    config.token,\n    config.sassKey,\n    config.sessionUuid,\n    config.secTemplate,\n    config.companyUuid,\n    config.projectUuid,\n    config.templateId,\n    config.mode,\n    config.stateless,\n    config.content,\n    config.newTemplate,\n    config.templateName,\n    config.templateQuery,\n    config.brandColor,\n    config.theme,\n    config.customMetadata,\n    config.customMetadataLabel,\n    config.damStore,\n    config.storeFolder,\n    config.storedUuid,\n    config.readyTimeout,\n  ])\n\n  // The callbacks the listeners read at event time. A ref rather than effect\n  // dependencies: listeners are attached once per element (below), so a parent\n  // re-render swapping handler identities costs nothing — and, decisively, the\n  // listeners are still attached during the element's disconnect-time flush of\n  // pending dam-store saves, which a resubscribe-per-change cleanup would have\n  // already torn down.\n  const handlers = useRef({\n    onReady,\n    onOpen,\n    onClose,\n    onSave,\n    onError,\n    onDirtyChange,\n  })\n  useLayoutEffect(() => {\n    handlers.current = { onReady, onOpen, onClose, onSave, onError, onDirtyChange }\n  })\n\n  // Layout effect, not passive: the element reports config errors (e.g.\n  // `invalid-base-url`) in a microtask queued during this same commit, and a\n  // passive effect would subscribe only after that microtask has fired —\n  // making a mount-time error unobservable from React. This effect is declared\n  // after the config one, so it still runs once the config is assigned.\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const subs: Array<[string, EventListener]> = []\n    const on = (\n      name: string,\n      pick: (h: typeof handlers.current) => ((detail: never) => void) | undefined,\n    ) => {\n      const listener = ((e: CustomEvent) =>\n        pick(handlers.current)?.(e.detail as never)) as EventListener\n      el.addEventListener(name, listener)\n      subs.push([name, listener])\n    }\n    on('ready', (h) => h.onReady)\n    on('open', (h) => h.onOpen)\n    on('close', (h) => h.onClose)\n    on('error', (h) => h.onError)\n    on('dirtychange', (h) => h.onDirtyChange)\n\n    // `save` is not just re-emitted: in stateless mode the handler's outcome\n    // is acked back, so a failed write on the host side doesn't leave the\n    // editor showing the template as saved. `confirmSave` no-ops in DAM mode.\n    const saveListener = ((e: CustomEvent<TemplateBuilderSaveDetail>) => {\n      const onSaveNow = handlers.current.onSave\n      if (!onSaveNow) return\n      // Wrapped in a promise so a synchronous throw is handled like a\n      // rejection, and a sync `false` like a resolved one.\n      Promise.resolve()\n        .then(() => onSaveNow(e.detail))\n        .then((result) => el.confirmSave(result !== false))\n        .catch((err) => {\n          // No message: an internal error string is not something to put in\n          // front of the end user. The editor uses its own wording.\n          console.error('[sfx-template-builder] onSave failed:', err)\n          el.confirmSave(false)\n        })\n    }) as EventListener\n    el.addEventListener('save', saveListener)\n    subs.push(['save', saveListener])\n\n    return () => {\n      // React runs this cleanup BEFORE it detaches the node, so the element's\n      // own disconnect-time flush of in-flight dam-store saves would fire\n      // after every listener is gone — and the raw save would be silently\n      // lost. Flushing here, while the listeners are still attached, hands\n      // those saves (with `storeError` in place of the links) to `onSave`\n      // first. A no-op when nothing is pending, including StrictMode's\n      // simulated unmount at mount time.\n      //\n      // Guarded: when an older CDN bundle registered the tag first, `el` is\n      // that bundle's class and lacks the method — every other new-API use\n      // degrades silently via property assignment, and unmount must not be\n      // the one path that throws.\n      if (typeof el.flushPendingSaves === 'function') {\n        el.flushPendingSaves('widget removed before the rendering copy completed')\n      }\n      for (const [name, listener] of subs) el.removeEventListener(name, listener)\n    }\n  }, [])\n\n  // eslint-disable-next-line react-hooks/refs -- ref is forwarded as a prop, not read during render\n  return createElement('sfx-template-builder', { ref, class: className, style })\n})\n"],"names":["TemplateBuilder","forwardRef","props","forwardedRef","className","style","onReady","onOpen","onClose","onSave","onError","onDirtyChange","config","ref","useRef","useImperativeHandle","useLayoutEffect","el","handlers","subs","on","name","pick","listener","e","h","saveListener","onSaveNow","result","err","createElement"],"mappings":"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"}

package/dist/react.d.ts

@@ -2,7 +2,7 @@ import { type CSSProperties } from 'react';
 import './define';
 import type { SfxTemplateBuilder } from './template-builder';
 import type { TemplateBuilderSaveDetail } from './template-builder';
-import type { BuilderDirtyData, BuilderErrorData, BuilderTheme } from './protocol';
+import type { BuilderDirtyData, BuilderErrorData, BuilderTheme, CustomMetadataField } from './protocol';
 /**
  * Hub session — the full-featured credential.
  */
@@ -39,6 +39,13 @@ export interface TemplateBuilderBaseProps {
     stateless?: boolean;
     /** Stateless mode: the template to edit, as `.fdt` XML. */
     content?: string;
+    /**
+     * Stateless mode: open on a new, empty template instead of supplying
+     * `content`. The widget provides the blank document, the user picks the
+     * canvas size in the editor, and `onSave` receives a complete `.fdt` to
+     * store. Ignored when `content` is set.
+     */
+    newTemplate?: boolean;
     /** Stateless mode: display name for the editor header. */
     templateName?: string;
     /**
@@ -51,6 +58,39 @@ export interface TemplateBuilderBaseProps {
     brandColor?: string;
     /** Colour scheme for the editor chrome. */
     theme?: BuilderTheme;
+    /**
+     * Metadata model offered in the editor as the "Custom metadata" value source
+     * — names only, no values. Omit it and the source is not offered.
+     *
+     * Compared by identity, like every other prop here, so a freshly built array
+     * counts as a change. Nothing is re-sent to the editor over it — the element
+     * de-dupes by value — but hoisting or memoising the array avoids the churn.
+     */
+    customMetadata?: CustomMetadataField[];
+    /**
+     * Display name for the custom-metadata value source in the editor's UI —
+     * e.g. "External metadata". Wording only: the stored template is unaffected.
+     * Empty uses the editor's default, "Custom metadata".
+     */
+    customMetadataLabel?: string;
+    /**
+     * Stateless only: store each save in Filerobot too, so the CDN can render
+     * it. `onSave`'s detail then carries `stored: { uuid, url }` next to the raw
+     * `content` — or `storeError` when the copy failed.
+     */
+    damStore?: boolean;
+    /**
+     * Folder new templates land in under `damStore` when the template id names
+     * no existing DAM file (an existing file's own folder always wins).
+     */
+    storeFolder?: string;
+    /**
+     * `damStore`: the `stored.uuid` a previous session's save reported for THIS
+     * document, so re-saves after a reload resolve to (and version) the copy
+     * that already exists instead of erroring on unchanged content or starting
+     * a fresh file. Per-document — pass it with the content it belongs to.
+     */
+    storedUuid?: string;
     readyTimeout?: number;
     className?: string;
     style?: CSSProperties;

package/dist/react.js

@@ -1,20 +1,20 @@
-import { forwardRef as T, useRef as E, useImperativeHandle as C, useLayoutEffect as f, createElement as I } from "react";
+import { forwardRef as L, useRef as h, useImperativeHandle as C, useLayoutEffect as i, createElement as E } from "react";
 import "./define.js";
-const g = T(function(y, v) {
+const I = L(function(U, b) {
   const {
-    className: U,
-    style: b,
+    className: T,
+    style: S,
     onReady: m,
     onOpen: c,
-    onClose: d,
-    onSave: l,
-    onError: u,
-    onDirtyChange: p,
+    onClose: u,
+    onSave: p,
+    onError: f,
+    onDirtyChange: y,
     ...e
-  } = y, a = E(null);
-  return C(v, () => a.current, []), f(() => {
-    const t = a.current;
-    t && (t.baseUrl = e.baseUrl, t.token = e.token, t.sassKey = e.sassKey ?? "", t.sessionUuid = e.sessionUuid ?? "", t.secTemplate = e.secTemplate ?? "", t.companyUuid = e.companyUuid ?? "", t.projectUuid = e.projectUuid ?? "", t.templateId = e.templateId ?? "", t.mode = e.mode ?? "inline", t.stateless = e.stateless ?? !1, t.templateName = e.templateName ?? "", t.templateQuery = e.templateQuery ?? "", t.brandColor = e.brandColor ?? "", t.theme = e.theme ?? "", t.content = e.content ?? "", e.readyTimeout !== void 0 && (t.readyTimeout = e.readyTimeout));
+  } = U, s = h(null);
+  C(b, () => s.current, []), i(() => {
+    const t = s.current;
+    t && (t.baseUrl = e.baseUrl, t.token = e.token, t.sassKey = e.sassKey ?? "", t.sessionUuid = e.sessionUuid ?? "", t.secTemplate = e.secTemplate ?? "", t.companyUuid = e.companyUuid ?? "", t.projectUuid = e.projectUuid ?? "", t.templateId = e.templateId ?? "", t.mode = e.mode ?? "inline", t.stateless = e.stateless ?? !1, t.templateName = e.templateName ?? "", t.templateQuery = e.templateQuery ?? "", t.brandColor = e.brandColor ?? "", t.theme = e.theme ?? "", t.newTemplate = e.newTemplate ?? !1, t.customMetadata = e.customMetadata ?? [], t.customMetadataLabel = e.customMetadataLabel ?? "", t.damStore = e.damStore ?? !1, t.storeFolder = e.storeFolder ?? "/", t.storedUuid = e.storedUuid ?? "", t.content = e.content ?? "", e.readyTimeout !== void 0 && (t.readyTimeout = e.readyTimeout));
   }, [
     e.baseUrl,
     e.token,
@@ -27,33 +27,49 @@ const g = T(function(y, v) {
     e.mode,
     e.stateless,
     e.content,
+    e.newTemplate,
     e.templateName,
     e.templateQuery,
     e.brandColor,
     e.theme,
+    e.customMetadata,
+    e.customMetadataLabel,
+    e.damStore,
+    e.storeFolder,
+    e.storedUuid,
     e.readyTimeout
-  ]), f(() => {
-    const t = a.current;
+  ]);
+  const l = h({
+    onReady: m,
+    onOpen: c,
+    onClose: u,
+    onSave: p,
+    onError: f,
+    onDirtyChange: y
+  });
+  return i(() => {
+    l.current = { onReady: m, onOpen: c, onClose: u, onSave: p, onError: f, onDirtyChange: y };
+  }), i(() => {
+    const t = s.current;
     if (!t) return;
-    const i = [], n = (s, r) => {
-      if (!r) return;
-      const o = ((h) => r(h.detail));
-      t.addEventListener(s, o), i.push([s, o]);
+    const d = [], n = (o, a) => {
+      const r = ((g) => a(l.current)?.(g.detail));
+      t.addEventListener(o, r), d.push([o, r]);
     };
-    if (n("ready", m), n("open", c), n("close", d), n("error", u), n("dirtychange", p), l) {
-      const s = ((r) => {
-        Promise.resolve().then(() => l(r.detail)).then((o) => t.confirmSave(o !== !1)).catch((o) => {
-          console.error("[sfx-template-builder] onSave failed:", o), t.confirmSave(!1);
-        });
+    n("ready", (o) => o.onReady), n("open", (o) => o.onOpen), n("close", (o) => o.onClose), n("error", (o) => o.onError), n("dirtychange", (o) => o.onDirtyChange);
+    const v = ((o) => {
+      const a = l.current.onSave;
+      a && Promise.resolve().then(() => a(o.detail)).then((r) => t.confirmSave(r !== !1)).catch((r) => {
+        console.error("[sfx-template-builder] onSave failed:", r), t.confirmSave(!1);
       });
-      t.addEventListener("save", s), i.push(["save", s]);
-    }
-    return () => {
-      for (const [s, r] of i) t.removeEventListener(s, r);
+    });
+    return t.addEventListener("save", v), d.push(["save", v]), () => {
+      typeof t.flushPendingSaves == "function" && t.flushPendingSaves("widget removed before the rendering copy completed");
+      for (const [o, a] of d) t.removeEventListener(o, a);
     };
-  }, [m, c, d, l, u, p]), I("sfx-template-builder", { ref: a, class: U, style: b });
+  }, []), E("sfx-template-builder", { ref: s, class: T, style: S });
 });
 export {
-  g as TemplateBuilder
+  I as TemplateBuilder
 };
 //# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":["../src/react.ts"],"sourcesContent":["import {\n  createElement,\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type ReactElement,\n} from 'react'\nimport './define'\nimport type { SfxTemplateBuilder } from './template-builder'\nimport type { TemplateBuilderSaveDetail } from './template-builder'\nimport type { BuilderDirtyData, BuilderErrorData, BuilderTheme } from './protocol'\n\n/**\n * Hub session — the full-featured credential.\n */\nexport interface TemplateBuilderSessionAuth {\n  sassKey: string\n  sessionUuid: string\n  companyUuid?: string\n  projectUuid?: string\n  secTemplate?: never\n}\n\n/**\n * Filerobot security template — a guest credential for hosts that have no Hub\n * session to hand over. `stateless` is required rather than merely implied:\n * the app takes a security template on the stateless embed route only, so the\n * combination is a compile-time error instead of a runtime one.\n *\n * `companyUuid` / `projectUuid` are absent by design — they name a Hub project\n * that cannot be looked up without a session.\n */\nexport interface TemplateBuilderSecTemplateAuth {\n  secTemplate: string\n  stateless: true\n  sassKey?: never\n  sessionUuid?: never\n  companyUuid?: never\n  projectUuid?: never\n}\n\nexport interface TemplateBuilderBaseProps {\n  baseUrl: string\n  token: string\n  templateId?: string\n  mode?: 'inline' | 'modal'\n  /** Hand the template in and take it back out instead of using the DAM. */\n  stateless?: boolean\n  /** Stateless mode: the template to edit, as `.fdt` XML. */\n  content?: string\n  /** Stateless mode: display name for the editor header. */\n  templateName?: string\n  /**\n   * Stateless mode: the `template_query` to open on — the value handed back on\n   * save. Reopens the template on the same layout and variable values; empty\n   * falls back to the XML's own `default=` attributes.\n   */\n  templateQuery?: string\n  /** Accent colour for the editor chrome, as `#rgb` / `#rrggbb`. */\n  brandColor?: string\n  /** Colour scheme for the editor chrome. */\n  theme?: BuilderTheme\n  readyTimeout?: number\n  className?: string\n  style?: CSSProperties\n  onReady?: () => void\n  onOpen?: () => void\n  onClose?: () => void\n  /**\n   * Fired on save. In stateless mode the detail carries the edited `content`\n   * for you to persist; otherwise it reports the uuid the app uploaded to.\n   *\n   * In stateless mode the outcome is reported back to the editor: return (or\n   * resolve to) `false`, or throw, and the editor restores its unsaved-changes\n   * flag and tells the user the save failed. Anything else counts as persisted.\n   */\n  onSave?: (\n    data: TemplateBuilderSaveDetail,\n  ) => void | boolean | Promise<void | boolean>\n  onError?: (data: BuilderErrorData) => void\n  /**\n   * Stateless mode: unsaved-changes flag changed. Use it to prompt before\n   * swapping `content`, which discards in-progress edits.\n   */\n  onDirtyChange?: (data: BuilderDirtyData) => void\n}\n\nexport type TemplateBuilderProps = TemplateBuilderBaseProps &\n  (TemplateBuilderSessionAuth | TemplateBuilderSecTemplateAuth)\n\n/**\n * React wrapper around `<sfx-template-builder>`. Props are assigned as\n * element properties via ref (works on React 18 and 19 alike); callbacks\n * subscribe to the element's CustomEvents.\n *\n * Forwards a ref to the underlying element, which is the only way to reach the\n * imperative API — `open()` in particular, without which `mode=\"modal\"` can\n * never be shown:\n *\n * ```tsx\n * const builder = useRef<SfxTemplateBuilder>(null)\n * <TemplateBuilder ref={builder} mode=\"modal\" … />\n * <button onClick={() => builder.current?.open('tpl-1')}>Edit</button>\n * ```\n *\n * `forwardRef` rather than a plain `ref` prop: React 19 accepts the latter for\n * function components, React 18 does not, and both are supported peers.\n */\nexport const TemplateBuilder = forwardRef<\n  SfxTemplateBuilder,\n  TemplateBuilderProps\n>(function TemplateBuilder(props, forwardedRef): ReactElement {\n  const {\n    className,\n    style,\n    onReady,\n    onOpen,\n    onClose,\n    onSave,\n    onError,\n    onDirtyChange,\n    ...config\n  } = props\n  const ref = useRef<SfxTemplateBuilder>(null)\n\n  // Hand the same element out to the caller without giving up the internal ref\n  // the effects below rely on.\n  useImperativeHandle(forwardedRef, () => ref.current as SfxTemplateBuilder, [])\n\n  // Assign config before paint so the iframe doesn't first mount with defaults.\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    el.baseUrl = config.baseUrl\n    el.token = config.token\n    el.sassKey = config.sassKey ?? ''\n    el.sessionUuid = config.sessionUuid ?? ''\n    el.secTemplate = config.secTemplate ?? ''\n    el.companyUuid = config.companyUuid ?? ''\n    el.projectUuid = config.projectUuid ?? ''\n    el.templateId = config.templateId ?? ''\n    el.mode = config.mode ?? 'inline'\n    el.stateless = config.stateless ?? false\n    el.templateName = config.templateName ?? ''\n    el.templateQuery = config.templateQuery ?? ''\n    el.brandColor = config.brandColor ?? ''\n    el.theme = config.theme ?? ''\n    // Assigned last: the element sends content to the app as soon as it has\n    // both a request and a value, so the id, name and query must already be\n    // set — all four ship as one message.\n    el.content = config.content ?? ''\n    if (config.readyTimeout !== undefined) el.readyTimeout = config.readyTimeout\n  }, [\n    config.baseUrl,\n    config.token,\n    config.sassKey,\n    config.sessionUuid,\n    config.secTemplate,\n    config.companyUuid,\n    config.projectUuid,\n    config.templateId,\n    config.mode,\n    config.stateless,\n    config.content,\n    config.templateName,\n    config.templateQuery,\n    config.brandColor,\n    config.theme,\n    config.readyTimeout,\n  ])\n\n  // Layout effect, not passive: the element reports config errors (e.g.\n  // `invalid-base-url`) in a microtask queued during this same commit, and a\n  // passive effect would subscribe only after that microtask has fired —\n  // making a mount-time error unobservable from React. This effect is declared\n  // after the config one, so it still runs once the config is assigned.\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const subs: Array<[string, EventListener]> = []\n    const on = (name: string, handler?: (detail: never) => void) => {\n      if (!handler) return\n      const listener = ((e: CustomEvent) => handler(e.detail as never)) as EventListener\n      el.addEventListener(name, listener)\n      subs.push([name, listener])\n    }\n    on('ready', onReady)\n    on('open', onOpen)\n    on('close', onClose)\n    on('error', onError)\n    on('dirtychange', onDirtyChange)\n\n    // `save` is not just re-emitted: in stateless mode the handler's outcome\n    // is acked back, so a failed write on the host side doesn't leave the\n    // editor showing the template as saved. `confirmSave` no-ops in DAM mode.\n    if (onSave) {\n      const listener = ((e: CustomEvent<TemplateBuilderSaveDetail>) => {\n        // Wrapped in a promise so a synchronous throw is handled like a\n        // rejection, and a sync `false` like a resolved one.\n        Promise.resolve()\n          .then(() => onSave(e.detail))\n          .then((result) => el.confirmSave(result !== false))\n          .catch((err) => {\n            // No message: an internal error string is not something to put in\n            // front of the end user. The editor uses its own wording.\n            console.error('[sfx-template-builder] onSave failed:', err)\n            el.confirmSave(false)\n          })\n      }) as EventListener\n      el.addEventListener('save', listener)\n      subs.push(['save', listener])\n    }\n\n    return () => {\n      for (const [name, listener] of subs) el.removeEventListener(name, listener)\n    }\n  }, [onReady, onOpen, onClose, onSave, onError, onDirtyChange])\n\n  // eslint-disable-next-line react-hooks/refs -- ref is forwarded as a prop, not read during render\n  return createElement('sfx-template-builder', { ref, class: className, style })\n})\n"],"names":["TemplateBuilder","forwardRef","props","forwardedRef","className","style","onReady","onOpen","onClose","onSave","onError","onDirtyChange","config","ref","useRef","useImperativeHandle","useLayoutEffect","el","subs","on","name","handler","listener","e","result","err","createElement"],"mappings":"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"}
+{"version":3,"file":"react.js","sources":["../src/react.ts"],"sourcesContent":["import {\n  createElement,\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  type CSSProperties,\n  type ReactElement,\n} from 'react'\nimport './define'\nimport type { SfxTemplateBuilder } from './template-builder'\nimport type { TemplateBuilderSaveDetail } from './template-builder'\nimport type {\n  BuilderDirtyData,\n  BuilderErrorData,\n  BuilderTheme,\n  CustomMetadataField,\n} from './protocol'\n\n/**\n * Hub session — the full-featured credential.\n */\nexport interface TemplateBuilderSessionAuth {\n  sassKey: string\n  sessionUuid: string\n  companyUuid?: string\n  projectUuid?: string\n  secTemplate?: never\n}\n\n/**\n * Filerobot security template — a guest credential for hosts that have no Hub\n * session to hand over. `stateless` is required rather than merely implied:\n * the app takes a security template on the stateless embed route only, so the\n * combination is a compile-time error instead of a runtime one.\n *\n * `companyUuid` / `projectUuid` are absent by design — they name a Hub project\n * that cannot be looked up without a session.\n */\nexport interface TemplateBuilderSecTemplateAuth {\n  secTemplate: string\n  stateless: true\n  sassKey?: never\n  sessionUuid?: never\n  companyUuid?: never\n  projectUuid?: never\n}\n\nexport interface TemplateBuilderBaseProps {\n  baseUrl: string\n  token: string\n  templateId?: string\n  mode?: 'inline' | 'modal'\n  /** Hand the template in and take it back out instead of using the DAM. */\n  stateless?: boolean\n  /** Stateless mode: the template to edit, as `.fdt` XML. */\n  content?: string\n  /**\n   * Stateless mode: open on a new, empty template instead of supplying\n   * `content`. The widget provides the blank document, the user picks the\n   * canvas size in the editor, and `onSave` receives a complete `.fdt` to\n   * store. Ignored when `content` is set.\n   */\n  newTemplate?: boolean\n  /** Stateless mode: display name for the editor header. */\n  templateName?: string\n  /**\n   * Stateless mode: the `template_query` to open on — the value handed back on\n   * save. Reopens the template on the same layout and variable values; empty\n   * falls back to the XML's own `default=` attributes.\n   */\n  templateQuery?: string\n  /** Accent colour for the editor chrome, as `#rgb` / `#rrggbb`. */\n  brandColor?: string\n  /** Colour scheme for the editor chrome. */\n  theme?: BuilderTheme\n  /**\n   * Metadata model offered in the editor as the \"Custom metadata\" value source\n   * — names only, no values. Omit it and the source is not offered.\n   *\n   * Compared by identity, like every other prop here, so a freshly built array\n   * counts as a change. Nothing is re-sent to the editor over it — the element\n   * de-dupes by value — but hoisting or memoising the array avoids the churn.\n   */\n  customMetadata?: CustomMetadataField[]\n  /**\n   * Display name for the custom-metadata value source in the editor's UI —\n   * e.g. \"External metadata\". Wording only: the stored template is unaffected.\n   * Empty uses the editor's default, \"Custom metadata\".\n   */\n  customMetadataLabel?: string\n  /**\n   * Stateless only: store each save in Filerobot too, so the CDN can render\n   * it. `onSave`'s detail then carries `stored: { uuid, url }` next to the raw\n   * `content` — or `storeError` when the copy failed.\n   */\n  damStore?: boolean\n  /**\n   * Folder new templates land in under `damStore` when the template id names\n   * no existing DAM file (an existing file's own folder always wins).\n   */\n  storeFolder?: string\n  /**\n   * `damStore`: the `stored.uuid` a previous session's save reported for THIS\n   * document, so re-saves after a reload resolve to (and version) the copy\n   * that already exists instead of erroring on unchanged content or starting\n   * a fresh file. Per-document — pass it with the content it belongs to.\n   */\n  storedUuid?: string\n  readyTimeout?: number\n  className?: string\n  style?: CSSProperties\n  onReady?: () => void\n  onOpen?: () => void\n  onClose?: () => void\n  /**\n   * Fired on save. In stateless mode the detail carries the edited `content`\n   * for you to persist; otherwise it reports the uuid the app uploaded to.\n   *\n   * In stateless mode the outcome is reported back to the editor: return (or\n   * resolve to) `false`, or throw, and the editor restores its unsaved-changes\n   * flag and tells the user the save failed. Anything else counts as persisted.\n   */\n  onSave?: (\n    data: TemplateBuilderSaveDetail,\n  ) => void | boolean | Promise<void | boolean>\n  onError?: (data: BuilderErrorData) => void\n  /**\n   * Stateless mode: unsaved-changes flag changed. Use it to prompt before\n   * swapping `content`, which discards in-progress edits.\n   */\n  onDirtyChange?: (data: BuilderDirtyData) => void\n}\n\nexport type TemplateBuilderProps = TemplateBuilderBaseProps &\n  (TemplateBuilderSessionAuth | TemplateBuilderSecTemplateAuth)\n\n/**\n * React wrapper around `<sfx-template-builder>`. Props are assigned as\n * element properties via ref (works on React 18 and 19 alike); callbacks\n * subscribe to the element's CustomEvents.\n *\n * Forwards a ref to the underlying element, which is the only way to reach the\n * imperative API — `open()` in particular, without which `mode=\"modal\"` can\n * never be shown:\n *\n * ```tsx\n * const builder = useRef<SfxTemplateBuilder>(null)\n * <TemplateBuilder ref={builder} mode=\"modal\" … />\n * <button onClick={() => builder.current?.open('tpl-1')}>Edit</button>\n * ```\n *\n * `forwardRef` rather than a plain `ref` prop: React 19 accepts the latter for\n * function components, React 18 does not, and both are supported peers.\n */\nexport const TemplateBuilder = forwardRef<\n  SfxTemplateBuilder,\n  TemplateBuilderProps\n>(function TemplateBuilder(props, forwardedRef): ReactElement {\n  const {\n    className,\n    style,\n    onReady,\n    onOpen,\n    onClose,\n    onSave,\n    onError,\n    onDirtyChange,\n    ...config\n  } = props\n  const ref = useRef<SfxTemplateBuilder>(null)\n\n  // Hand the same element out to the caller without giving up the internal ref\n  // the effects below rely on.\n  useImperativeHandle(forwardedRef, () => ref.current as SfxTemplateBuilder, [])\n\n  // Assign config before paint so the iframe doesn't first mount with defaults.\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    el.baseUrl = config.baseUrl\n    el.token = config.token\n    el.sassKey = config.sassKey ?? ''\n    el.sessionUuid = config.sessionUuid ?? ''\n    el.secTemplate = config.secTemplate ?? ''\n    el.companyUuid = config.companyUuid ?? ''\n    el.projectUuid = config.projectUuid ?? ''\n    el.templateId = config.templateId ?? ''\n    el.mode = config.mode ?? 'inline'\n    el.stateless = config.stateless ?? false\n    el.templateName = config.templateName ?? ''\n    el.templateQuery = config.templateQuery ?? ''\n    el.brandColor = config.brandColor ?? ''\n    el.theme = config.theme ?? ''\n    el.newTemplate = config.newTemplate ?? false\n    el.customMetadata = config.customMetadata ?? []\n    el.customMetadataLabel = config.customMetadataLabel ?? ''\n    el.damStore = config.damStore ?? false\n    el.storeFolder = config.storeFolder ?? '/'\n    el.storedUuid = config.storedUuid ?? ''\n    // Assigned last: the element sends content to the app as soon as it has\n    // both a request and a value, so the id, name and query must already be\n    // set — all four ship as one message.\n    el.content = config.content ?? ''\n    if (config.readyTimeout !== undefined) el.readyTimeout = config.readyTimeout\n  }, [\n    config.baseUrl,\n    config.token,\n    config.sassKey,\n    config.sessionUuid,\n    config.secTemplate,\n    config.companyUuid,\n    config.projectUuid,\n    config.templateId,\n    config.mode,\n    config.stateless,\n    config.content,\n    config.newTemplate,\n    config.templateName,\n    config.templateQuery,\n    config.brandColor,\n    config.theme,\n    config.customMetadata,\n    config.customMetadataLabel,\n    config.damStore,\n    config.storeFolder,\n    config.storedUuid,\n    config.readyTimeout,\n  ])\n\n  // The callbacks the listeners read at event time. A ref rather than effect\n  // dependencies: listeners are attached once per element (below), so a parent\n  // re-render swapping handler identities costs nothing — and, decisively, the\n  // listeners are still attached during the element's disconnect-time flush of\n  // pending dam-store saves, which a resubscribe-per-change cleanup would have\n  // already torn down.\n  const handlers = useRef({\n    onReady,\n    onOpen,\n    onClose,\n    onSave,\n    onError,\n    onDirtyChange,\n  })\n  useLayoutEffect(() => {\n    handlers.current = { onReady, onOpen, onClose, onSave, onError, onDirtyChange }\n  })\n\n  // Layout effect, not passive: the element reports config errors (e.g.\n  // `invalid-base-url`) in a microtask queued during this same commit, and a\n  // passive effect would subscribe only after that microtask has fired —\n  // making a mount-time error unobservable from React. This effect is declared\n  // after the config one, so it still runs once the config is assigned.\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const subs: Array<[string, EventListener]> = []\n    const on = (\n      name: string,\n      pick: (h: typeof handlers.current) => ((detail: never) => void) | undefined,\n    ) => {\n      const listener = ((e: CustomEvent) =>\n        pick(handlers.current)?.(e.detail as never)) as EventListener\n      el.addEventListener(name, listener)\n      subs.push([name, listener])\n    }\n    on('ready', (h) => h.onReady)\n    on('open', (h) => h.onOpen)\n    on('close', (h) => h.onClose)\n    on('error', (h) => h.onError)\n    on('dirtychange', (h) => h.onDirtyChange)\n\n    // `save` is not just re-emitted: in stateless mode the handler's outcome\n    // is acked back, so a failed write on the host side doesn't leave the\n    // editor showing the template as saved. `confirmSave` no-ops in DAM mode.\n    const saveListener = ((e: CustomEvent<TemplateBuilderSaveDetail>) => {\n      const onSaveNow = handlers.current.onSave\n      if (!onSaveNow) return\n      // Wrapped in a promise so a synchronous throw is handled like a\n      // rejection, and a sync `false` like a resolved one.\n      Promise.resolve()\n        .then(() => onSaveNow(e.detail))\n        .then((result) => el.confirmSave(result !== false))\n        .catch((err) => {\n          // No message: an internal error string is not something to put in\n          // front of the end user. The editor uses its own wording.\n          console.error('[sfx-template-builder] onSave failed:', err)\n          el.confirmSave(false)\n        })\n    }) as EventListener\n    el.addEventListener('save', saveListener)\n    subs.push(['save', saveListener])\n\n    return () => {\n      // React runs this cleanup BEFORE it detaches the node, so the element's\n      // own disconnect-time flush of in-flight dam-store saves would fire\n      // after every listener is gone — and the raw save would be silently\n      // lost. Flushing here, while the listeners are still attached, hands\n      // those saves (with `storeError` in place of the links) to `onSave`\n      // first. A no-op when nothing is pending, including StrictMode's\n      // simulated unmount at mount time.\n      //\n      // Guarded: when an older CDN bundle registered the tag first, `el` is\n      // that bundle's class and lacks the method — every other new-API use\n      // degrades silently via property assignment, and unmount must not be\n      // the one path that throws.\n      if (typeof el.flushPendingSaves === 'function') {\n        el.flushPendingSaves('widget removed before the rendering copy completed')\n      }\n      for (const [name, listener] of subs) el.removeEventListener(name, listener)\n    }\n  }, [])\n\n  // eslint-disable-next-line react-hooks/refs -- ref is forwarded as a prop, not read during render\n  return createElement('sfx-template-builder', { ref, class: className, style })\n})\n"],"names":["TemplateBuilder","forwardRef","props","forwardedRef","className","style","onReady","onOpen","onClose","onSave","onError","onDirtyChange","config","ref","useRef","useImperativeHandle","useLayoutEffect","el","handlers","subs","on","name","pick","listener","e","h","saveListener","onSaveNow","result","err","createElement"],"mappings":"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"}