@appright/funnelshift 0.17.0 → 0.18.0

package/dist/bootstrap.d.ts

@@ -40,6 +40,9 @@ export type Bootstrap = {
         reason: string;
     };
     placement_url?: URLPlacement;
+    paywall_preview?: {
+        origin: string;
+    };
 };
 export declare function readBootstrap(win?: Window): Bootstrap;
 export declare function readCreator(win?: Window): Creator | null;

package/dist/cli/build.js

@@ -2,9 +2,9 @@ import { build } from 'vite';
 import react from '@vitejs/plugin-react';
 import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
 import { isBuiltin } from 'node:module';
-import { join, relative } from 'node:path';
+import { join, relative, resolve, sep } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { extractContent, extractPrerender, extractSteps } from './extract.js';
+import { extractContent, extractLayouts, extractPrerender, extractSteps } from './extract.js';
 import { check, formatLint, formatWarnings } from './lint.js';
 // The source files under dir, without node_modules; noTests also leaves out *.test.* and *.spec.* (functions/ may keep its tests
 // next to the code, and they are not part of the bundle).
@@ -163,6 +163,14 @@ export async function buildFunnel(root, slug, info, opts = {}) {
     const content = extractContent(srcs);
     const steps = extractSteps(srcs);
     const prerender = extractPrerender(srcs);
+    // layouts and their schemas (kit 0.18.0): a schema imported from another file of the project (the hosted funnel's paywall reads
+    // the main funnel's) is read from the root, never from outside it or node_modules
+    const layouts = extractLayouts(srcs, p => {
+        const abs = resolve(root, p);
+        if (!abs.startsWith(resolve(root) + sep) || abs.split(sep).includes('node_modules') || !/\.(tsx?|jsx?)$/.test(abs) || !existsSync(abs) || !statSync(abs).isFile())
+            return null;
+        return read(abs);
+    });
     if (prerender && steps[0]?.role !== 'landing') {
         throw new Error(`funnels/${slug}: prerender: true draws the landing step into index.html, so the first step needs role: 'landing'`);
     }
@@ -193,6 +201,7 @@ export async function buildFunnel(root, slug, info, opts = {}) {
         writeFileSync(join(out, '_functions.js'), fn.code);
     writeFileSync(join(out, 'manifest.json'), JSON.stringify({
         funnel: slug, kit_version: kitVersion, built_at: new Date().toISOString(), commit: info.commit, branch: info.branch, steps, content,
+        ...(layouts.length ? { layouts } : {}),
         ...(prerender ? { prerender: true } : {}),
         ...(fn ? { functions: fn.names } : {}),
     }, null, 2));

package/dist/cli/extract.d.ts

@@ -1,3 +1,4 @@
+import { type LayoutSchema } from '../layout-schema.js';
 import { type StepRole } from '../nav.js';
 type Item = {
     key: string;
@@ -30,4 +31,9 @@ export type ManifestStep = {
 export declare function whenKeys(fn: any): string[] | null;
 export declare function extractSteps(files: Src[]): ManifestStep[];
 export declare function extractPrerender(files: Src[]): boolean;
+export type ManifestLayout = {
+    key: string;
+    schema?: LayoutSchema;
+};
+export declare function extractLayouts(files: Src[], load?: (path: string) => Src | null): ManifestLayout[];
 export {};

package/dist/cli/extract.js

@@ -1,4 +1,6 @@
+import { posix } from 'node:path';
 import { parse } from '@babel/parser';
+import { layoutSchemaProblem } from '../layout-schema.js';
 import { STEP_ROLES } from '../nav.js';
 export function literal(n) {
     if (n?.type === 'StringLiteral')
@@ -267,3 +269,161 @@ export function extractPrerender(files) {
     }
     return false;
 }
+const LAYOUT_KEY = /^[a-z][a-z0-9_]{0,63}$/;
+const SOURCE_EXT = ['', '.tsx', '.ts', '.jsx', '.js', '/index.tsx', '/index.ts', '/index.jsx', '/index.js'];
+function scopeOf(f, program) {
+    const consts = new Map(), exported = new Map(), imports = new Map();
+    for (const st of program.body) {
+        if (st.type === 'ImportDeclaration' && st.importKind !== 'type') {
+            for (const sp of st.specifiers) {
+                if (sp.type !== 'ImportSpecifier')
+                    continue;
+                const name = sp.imported.type === 'Identifier' ? sp.imported.name : sp.imported.value;
+                imports.set(sp.local.name, { from: st.source.value, name });
+            }
+            continue;
+        }
+        if (st.type === 'ExportNamedDeclaration' && !st.declaration && !st.source) {
+            for (const sp of st.specifiers)
+                if (sp.type === 'ExportSpecifier')
+                    exported.set(sp.exported.type === 'Identifier' ? sp.exported.name : sp.exported.value, sp.local.name);
+            continue;
+        }
+        const d = st.type === 'ExportNamedDeclaration' ? st.declaration : st;
+        if (d?.type !== 'VariableDeclaration' || d.kind !== 'const')
+            continue;
+        for (const v of d.declarations) {
+            if (v.id?.type !== 'Identifier' || !v.init)
+                continue;
+            consts.set(v.id.name, v.init);
+            if (st.type === 'ExportNamedDeclaration')
+                exported.set(v.id.name, v.id.name);
+        }
+    }
+    return { f, consts, exported, imports };
+}
+// The paywall layouts of the funnel, read statically from every defineLayout('key', Component, schema?) of its code: the key as a
+// string literal and the schema (layout-schema.ts) as a literal — written in place, or a const of one in the same file, or imported
+// by name from another file of the project (`import { schema } from './paywall'`; load reads it, a path relative to the root).
+// Anything computed is an error with file:line, never a guess. The same key twice must carry the same schema (or one of them none).
+export function extractLayouts(files, load = () => null) {
+    const scopes = new Map();
+    const scopeFor = (f) => {
+        let s = scopes.get(f.path);
+        if (!s) {
+            s = scopeOf(f, parseSource(f).program);
+            scopes.set(f.path, s);
+        }
+        return s;
+    };
+    const fileAt = (path) => files.find(x => x.path === path) ?? load(path);
+    const resolveImport = (from, spec) => {
+        if (!spec.startsWith('.'))
+            return null;
+        const base = posix.normalize(posix.join(posix.dirname(from), spec));
+        for (const ext of SOURCE_EXT) {
+            const hit = fileAt(base + ext);
+            if (hit)
+                return hit;
+        }
+        return null;
+    };
+    const found = new Map();
+    for (const f of files) {
+        const program = parseSource(f).program;
+        const calls = [];
+        walk(program, n => { if (isCall(n, 'defineLayout'))
+            calls.push(n); });
+        if (!calls.length)
+            continue;
+        const scope = scopeFor(f);
+        for (const call of calls) {
+            const at = `${f.path}:${call.loc?.start.line}`;
+            const key = literal(unwrap(call.arguments[0]));
+            if (key === null || !LAYOUT_KEY.test(key)) {
+                throw new Error(`${at}: defineLayout() key must be a layout key as a string literal (${LAYOUT_KEY.source})`);
+            }
+            const arg = unwrap(call.arguments[2]);
+            let schema;
+            if (arg && !(arg.type === 'Identifier' && arg.name === 'undefined')) {
+                const seen = new Set();
+                // a literal value; identifiers are followed to a const of this file or a named import of another file of the project
+                const value = (n, s) => {
+                    n = unwrap(n);
+                    const where = `${s.f.path}:${n?.loc?.start.line ?? call.loc?.start.line}`;
+                    const notLiteral = (what) => new Error(`${where}: defineLayout('${key}') schema must be a literal — an object of strings, numbers, ` +
+                        `booleans, arrays and objects, written in place or as a const of one (in this file or imported by name) — but ${what}; ` +
+                        `funnel-kit build reads it without running the code`);
+                    switch (n?.type) {
+                        case 'StringLiteral':
+                        case 'NumericLiteral':
+                        case 'BooleanLiteral': return n.value;
+                        case 'NullLiteral': return null;
+                        case 'TemplateLiteral':
+                            if (n.expressions.length)
+                                throw notLiteral('a template string has ${…} in it');
+                            return n.quasis[0].value.cooked;
+                        case 'UnaryExpression':
+                            if (n.operator === '-' && n.argument?.type === 'NumericLiteral')
+                                return -n.argument.value;
+                            throw notLiteral(`it has the expression ${n.operator}…`);
+                        case 'ArrayExpression':
+                            return n.elements.map((el) => {
+                                if (!el || el.type === 'SpreadElement')
+                                    throw notLiteral('an array has a spread or a hole');
+                                return value(el, s);
+                            });
+                        case 'ObjectExpression': {
+                            const out = {};
+                            for (const p of n.properties) {
+                                if (p.type !== 'ObjectProperty')
+                                    throw notLiteral(p.type === 'SpreadElement' ? 'an object has a spread (...)' : 'an object has a method');
+                                const k = p.computed ? null : p.key.type === 'Identifier' ? p.key.name : literal(p.key) ?? (p.key.type === 'NumericLiteral' ? String(p.key.value) : null);
+                                if (k === null)
+                                    throw notLiteral('an object has a computed key');
+                                out[k] = value(p.value, s);
+                            }
+                            return out;
+                        }
+                        case 'Identifier': {
+                            const id = `${s.f.path}#${n.name}`;
+                            if (seen.has(id))
+                                throw notLiteral(`'${n.name}' refers to itself`);
+                            seen.add(id);
+                            const init = s.consts.get(n.name);
+                            if (init)
+                                return value(init, s);
+                            const imp = s.imports.get(n.name);
+                            if (imp) {
+                                const other = resolveImport(s.f.path, imp.from);
+                                if (!other)
+                                    throw notLiteral(`'${n.name}' is imported from '${imp.from}', which is not a file of the project funnel-kit reads`);
+                                const os = scopeFor(other);
+                                const local = os.exported.get(imp.name);
+                                const init2 = local ? os.consts.get(local) : undefined;
+                                if (!init2)
+                                    throw notLiteral(`'${imp.name}' of ${other.path} is not an exported const`);
+                                return value(init2, os);
+                            }
+                            throw notLiteral(`'${n.name}' is not a const of ${s.f.path} or a named import`);
+                        }
+                        default:
+                            throw notLiteral(`it is ${n?.type ?? 'missing'}`);
+                    }
+                };
+                const v = value(arg, scope);
+                const bad = layoutSchemaProblem(v);
+                if (bad)
+                    throw new Error(`${at}: defineLayout('${key}') schema: ${bad}`);
+                schema = v;
+            }
+            const prev = found.get(key);
+            if (prev && prev.schema && schema && JSON.stringify(prev.schema) !== JSON.stringify(schema)) {
+                throw new Error(`${at}: defineLayout('${key}') has another schema than at ${prev.at}; one layout has one schema`);
+            }
+            if (!prev || (!prev.schema && schema))
+                found.set(key, { schema, at });
+        }
+    }
+    return [...found.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, { schema }]) => (schema ? { key, schema } : { key }));
+}

package/dist/funnel.js

@@ -21,7 +21,7 @@ import { encodeAnswer, packAnswers } from './answers.js';
 import { LabelCtx, sameValue } from './offer.js';
 import { funnelSlug, setHandoff, visitorId } from './handoff.js';
 import { installPixel, metaCookies, readPixel, revokePixel, setPixel } from './pixel.js';
-import { layoutOf, PaywallCtx, placementOf, readURLPlacement } from './placement.js';
+import { layoutOf, PaywallCtx, paywallPreviewOrigin, placementOf, readPlacement, readURLPlacement, PREVIEW_MSG } from './placement.js';
 export const defineStep = (s) => s;
 export const defineFunnel = (f) => f;
 export const FunnelCtx = createContext(null);
@@ -147,10 +147,43 @@ function ShotView({ funnel, stepId }) {
             stepId: step.id, index, total: funnel.steps.length, progress: 0, shot: true, stopTracking: async () => { }, creator: null,
             visitorId: '', funnelId: funnelSlug() || funnel.id, userId: '', knownUser: false };
     }, [funnel, step, index]);
-    const content = useMemo(() => placementOf(step), [step]);
+    const given = usePaywallPreview(step);
+    const content = useMemo(() => given?.content ?? placementOf(step), [step, given]);
     const pw = useMemo(() => (content ? { ...content, view_id: '' } : null), [content]);
     const C = stepComponent(step, content);
-    return _jsx(FunnelCtx.Provider, { value: ctx, children: _jsx(PaywallCtx.Provider, { value: pw, children: _jsx("div", { className: "fk-shot", children: _jsx(C, {}) }) }) });
+    // a new content from the admin draws the layout anew (its own state — the chosen plan — starts from the config again)
+    return _jsx(FunnelCtx.Provider, { value: ctx, children: _jsx(PaywallCtx.Provider, { value: pw, children: _jsx("div", { className: "fk-shot", children: _jsx(C, {}) }, given?.seq ?? 0) }) });
+}
+// The admin's live preview of a paywall version (kit 0.18.0): a shot page the router marks (bootstrap.paywall_preview, only with
+// ?__pw=1, framed only by the admin) takes the content to draw from the admin's frame by postMessage — the layout, the config
+// being edited and the products with their mirrored prices — instead of what the step's placement serves. Only a message from the
+// parent frame on the admin's origin is read; the page says it is ready, and after each content whether this build draws that
+// layout. A shot is no visit: nothing is tracked or stored, the buttons do nothing.
+function usePaywallPreview(step) {
+    const [given, setGiven] = useState(null);
+    const origin = useMemo(() => paywallPreviewOrigin(), []);
+    useEffect(() => {
+        if (!origin)
+            return;
+        const on = (e) => {
+            if (e.origin !== origin || e.source !== window.parent)
+                return;
+            const d = e.data;
+            if (!d || d.type !== PREVIEW_MSG.content || !d.content || typeof d.content !== 'object')
+                return;
+            const c = readPlacement({ ...d.content, placement: step.placement ?? 'preview' });
+            if (c)
+                setGiven(g => ({ content: c, seq: (g?.seq ?? 0) + 1 }));
+        };
+        window.addEventListener('message', on);
+        window.parent.postMessage({ type: PREVIEW_MSG.ready, step: step.id }, origin);
+        return () => window.removeEventListener('message', on);
+    }, [origin, step]);
+    useEffect(() => {
+        if (origin && given)
+            window.parent.postMessage({ type: PREVIEW_MSG.shown, layout: given.content.layout, drawn: !!layoutOf(given.content.layout) }, origin);
+    }, [origin, given]);
+    return given;
 }
 // The component a step draws: the layout its placement serves when this build registered it (defineLayout), else its own.
 function stepComponent(step, content) {

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { experiment, useExperiment, rule, useRule } from './experiments.js';
 export { bucketOf, pickArm } from './bucket.js';
 export { readBootstrap, readCreator, type Bootstrap, type Creator } from './bootstrap.js';
 export { defineLayout, usePaywall, type Paywall, type PaywallProduct, type PlacementContent } from './placement.js';
+export type { LayoutField, LayoutSchema, LayoutText } from './layout-schema.js';
 export { server, ServerFnError } from './server.js';
 export { autoOn, SERVICE_SIGNALS, type AutoTrack, type AutoTrackKey } from './autotrack.js';
 export { Tracker, safeProps, type FinalEvent, type StopScope } from './tracker.js';

package/dist/layout-schema.d.ts

@@ -0,0 +1,42 @@
+export type LayoutText = string | {
+    ru?: string;
+    en?: string;
+};
+type FieldBase = {
+    label?: LayoutText;
+    hint?: LayoutText;
+    example?: string | number | boolean | string[];
+    required?: boolean;
+};
+type TextField = FieldBase & {
+    max?: number;
+    vars?: string[];
+};
+export type LayoutField = (TextField & {
+    type: 'string';
+}) | (TextField & {
+    type: 'text';
+}) | (TextField & {
+    type: 'list';
+    item_max?: number;
+}) | (FieldBase & {
+    type: 'product';
+}) | (FieldBase & {
+    type: 'flag';
+}) | (FieldBase & {
+    type: 'number';
+    min?: number;
+    max?: number;
+    integer?: boolean;
+}) | (FieldBase & {
+    type: 'per_product';
+    fields: Record<string, LayoutField>;
+});
+export type LayoutSchema = {
+    fields: Record<string, LayoutField>;
+    vars?: Record<string, LayoutText>;
+};
+export declare const FIELD_TYPES: readonly ['string', 'text', 'list', 'product', 'flag', 'number', 'per_product'];
+export declare const SCHEMA_MAX_BYTES: number;
+export declare function layoutSchemaProblem(schema: unknown): string | null;
+export {};

package/dist/layout-schema.js

@@ -0,0 +1,105 @@
+// The schema of a paywall layout's config (kit 0.18.0): defineLayout('scholartobe_main', Paywall, schema). It tells the admin which
+// fields the layout reads from a paywall version's `config` — the form «Конфиг» of a version draws them, the server checks a new
+// version against them (a wrong type is an error, an unknown key a warning). `funnel-kit build` writes it into the manifest
+// statically (manifest.layouts), so it must be a literal: an object of strings, numbers, booleans, arrays and objects. No React here:
+// the CLI imports it.
+export const FIELD_TYPES = ['string', 'text', 'list', 'product', 'flag', 'number', 'per_product'];
+const FIELD_KEY = /^[a-z][a-z0-9_]{0,63}$/;
+const VAR_NAME = /^[a-z][a-z0-9_]{0,31}$/;
+const MAX_FIELDS = 64;
+// the size of a schema in the manifest
+export const SCHEMA_MAX_BYTES = 16 << 10;
+const isObj = (v) => !!v && typeof v === 'object' && !Array.isArray(v);
+const isText = (v) => typeof v === 'string' || (isObj(v) && Object.keys(v).every(k => (k === 'ru' || k === 'en') && typeof v[k] === 'string'));
+const count = (v) => typeof v === 'number' && Number.isInteger(v) && v > 0;
+function fieldProblem(at, f, nested) {
+    if (!isObj(f))
+        return `${at}: a field is an object { type: '${FIELD_TYPES.join("' | '")}', label?, hint? }`;
+    const type = f.type;
+    if (typeof type !== 'string' || !FIELD_TYPES.includes(type)) {
+        return `${at}: type ${JSON.stringify(type)} is unknown; use one of ${FIELD_TYPES.join(', ')}`;
+    }
+    if (nested && type === 'per_product')
+        return `${at}: per_product fields cannot nest another per_product`;
+    const allowed = ['type', 'label', 'hint', 'example', 'required'];
+    if (type === 'string' || type === 'text' || type === 'list')
+        allowed.push('max', 'vars');
+    if (type === 'list')
+        allowed.push('item_max');
+    if (type === 'number')
+        allowed.push('min', 'max', 'integer');
+    if (type === 'per_product')
+        allowed.push('fields');
+    const extra = Object.keys(f).find(k => !allowed.includes(k));
+    if (extra)
+        return `${at}: ${type} field has no option ${extra} (it takes ${allowed.join(', ')})`;
+    if (f.label !== undefined && !isText(f.label))
+        return `${at}: label is a string or { ru, en }`;
+    if (f.hint !== undefined && !isText(f.hint))
+        return `${at}: hint is a string or { ru, en }`;
+    if (f.required !== undefined && typeof f.required !== 'boolean')
+        return `${at}: required is true or false`;
+    if (f.example !== undefined && !['string', 'number', 'boolean'].includes(typeof f.example) &&
+        !(Array.isArray(f.example) && f.example.every(x => typeof x === 'string')))
+        return `${at}: example is a string, a number, a boolean or a list of strings`;
+    if (type === 'number') {
+        for (const k of ['min', 'max'])
+            if (f[k] !== undefined && (typeof f[k] !== 'number' || !Number.isFinite(f[k])))
+                return `${at}: ${k} is a number`;
+        if (typeof f.min === 'number' && typeof f.max === 'number' && f.min > f.max)
+            return `${at}: min is more than max`;
+        if (f.integer !== undefined && typeof f.integer !== 'boolean')
+            return `${at}: integer is true or false`;
+    }
+    else if (f.max !== undefined && !count(f.max))
+        return `${at}: max is a whole number above 0`;
+    if (f.item_max !== undefined && !count(f.item_max))
+        return `${at}: item_max is a whole number above 0`;
+    if (f.vars !== undefined && !(Array.isArray(f.vars) && f.vars.every(v => typeof v === 'string' && VAR_NAME.test(v)))) {
+        return `${at}: vars is a list of substitution names (${VAR_NAME.source})`;
+    }
+    if (type === 'per_product')
+        return fieldsProblem(`${at}.fields`, f.fields, true);
+    return null;
+}
+function fieldsProblem(at, fields, nested) {
+    if (!isObj(fields))
+        return `${at}: fields is an object { <config key>: { type, … } }`;
+    const keys = Object.keys(fields);
+    if (keys.length === 0)
+        return `${at}: no fields`;
+    if (keys.length > MAX_FIELDS)
+        return `${at}: ${keys.length} fields, the limit is ${MAX_FIELDS}`;
+    for (const k of keys) {
+        if (!FIELD_KEY.test(k))
+            return `${at}: field key ${JSON.stringify(k)} must match ${FIELD_KEY.source}`;
+        const p = fieldProblem(`${at}.${k}`, fields[k], nested);
+        if (p)
+            return p;
+    }
+    return null;
+}
+// What is wrong with a schema, in words, or null. The same check runs in defineLayout and in `funnel-kit build`.
+export function layoutSchemaProblem(schema) {
+    if (!isObj(schema))
+        return 'the schema is an object { fields: { … }, vars?: { … } }';
+    const extra = Object.keys(schema).find(k => k !== 'fields' && k !== 'vars');
+    if (extra)
+        return `the schema has no option ${extra} (it takes fields and vars)`;
+    const p = fieldsProblem('fields', schema.fields, false);
+    if (p)
+        return p;
+    if (schema.vars !== undefined) {
+        if (!isObj(schema.vars))
+            return 'vars is an object { <name>: <what it is> }';
+        for (const [k, v] of Object.entries(schema.vars)) {
+            if (!VAR_NAME.test(k))
+                return `vars: name ${JSON.stringify(k)} must match ${VAR_NAME.source}`;
+            if (!isText(v))
+                return `vars.${k}: what it is — a string or { ru, en }`;
+        }
+    }
+    if (new TextEncoder().encode(JSON.stringify(schema)).length > SCHEMA_MAX_BYTES)
+        return `the schema is over ${SCHEMA_MAX_BYTES >> 10} KB`;
+    return null;
+}

package/dist/placement.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentType } from 'react';
+import { type LayoutSchema } from './layout-schema.js';
 import type { StepDef } from './nav.js';
 export declare const PLACEMENT_KEY: RegExp;
 export type PaywallProduct = {
@@ -49,9 +50,16 @@ export type URLPlacement = {
 };
 export declare function readURLPlacement(): URLPlacement | null;
 export declare function placementOf(step: StepDef): PlacementContent | null;
-export declare function defineLayout<C extends ComponentType<any>>(key: string, component: C): C;
+export declare function defineLayout<C extends ComponentType<any>>(key: string, component: C, schema?: LayoutSchema): C;
+export declare function layoutSchemaOf(key: string): LayoutSchema | undefined;
 export declare function layoutOf(key: string): ComponentType | undefined;
 export declare function clearLayouts(): void;
+export declare const PREVIEW_MSG: {
+    readonly ready: 'funnelshift:paywall-ready';
+    readonly content: 'funnelshift:paywall';
+    readonly shown: 'funnelshift:paywall-shown';
+};
+export declare function paywallPreviewOrigin(): string | null;
 export declare const PaywallCtx: import("react").Context<Readonly<PlacementContent & {
     view_id: string;
 }> | null>;

package/dist/placement.js

@@ -1,4 +1,4 @@
-// Placements on a funnel step (kit 0.17.0; spec 2026-11-04-paywalls-placements §2.3–§2.4, §4.1, §5):
+// Placements on a funnel step (kit 0.17.0, the layout's schema and the admin's live preview 0.18.0; spec 2026-11-04-paywalls-placements §2.3–§2.4, §4.1, §5):
 //   defineStep({ id: 'paywall', role: 'paywall', placement: 'onboarding_paywall', component: Fallback })
 //   defineLayout('scholartobe_main', Paywall)
 //   const pw = usePaywall()
@@ -10,6 +10,7 @@
 // A view of a step with a placement sends placement_viewed (funnel.tsx).
 import { createContext, useContext } from 'react';
 import { readBootstrap } from './bootstrap.js';
+import { layoutSchemaProblem } from './layout-schema.js';
 export const PLACEMENT_KEY = /^[a-z][a-z0-9_]{0,63}$/;
 const LAYOUT_KEY = /^[a-z][a-z0-9_]{0,63}$/;
 const isObj = (v) => !!v && typeof v === 'object' && !Array.isArray(v);
@@ -42,21 +43,45 @@ export function placementOf(step) {
     return readPlacement(isObj(all) ? all[step.placement] : undefined);
 }
 const layouts = new Map();
-// defineLayout(key, Component): this build draws the paywall layout `key` (a paywall version's `layout`) with Component. Call it
-// at module level, next to the funnel; the same key again replaces it.
-export function defineLayout(key, component) {
+const schemas = new Map();
+// defineLayout(key, Component, schema?): this build draws the paywall layout `key` (a paywall version's `layout`) with Component.
+// Call it at module level, next to the funnel; the same key again replaces it. schema (kit 0.18.0, layout-schema.ts) — the fields
+// the layout reads from config: the admin draws a form of them and checks a version against them; `funnel-kit build` writes it
+// into the manifest, so write it as a literal (or a const of one, in this file or imported by name).
+export function defineLayout(key, component, schema) {
     if (!LAYOUT_KEY.test(key))
         throw new Error(`defineLayout: bad layout key ${JSON.stringify(key)}: use ${LAYOUT_KEY.source}`);
     if (typeof component !== 'function' && typeof component !== 'object')
         throw new Error(`defineLayout('${key}'): not a component`);
+    if (schema !== undefined) {
+        const bad = layoutSchemaProblem(schema);
+        if (bad)
+            throw new Error(`defineLayout('${key}'): bad schema: ${bad}`);
+        schemas.set(key, schema);
+    }
+    else
+        schemas.delete(key);
     layouts.set(key, component);
     return component;
 }
+// The schema defineLayout gave the layout, or undefined.
+export function layoutSchemaOf(key) {
+    return schemas.get(key);
+}
 export function layoutOf(key) {
     return key ? layouts.get(key) : undefined;
 }
 // For tests: forget the layouts.
-export function clearLayouts() { layouts.clear(); }
+export function clearLayouts() { layouts.clear(); schemas.clear(); }
+// The messages of the admin's live preview (funnel.tsx usePaywallPreview): the page says it is ready, the admin sends the content
+// to draw, the page says whether this build draws its layout.
+export const PREVIEW_MSG = { ready: 'funnelshift:paywall-ready', content: 'funnelshift:paywall', shown: 'funnelshift:paywall-shown' };
+const ORIGIN = /^https?:\/\/[a-z0-9.-]+(:[0-9]{1,5})?$/i;
+// The admin's origin when this page is its live preview of a paywall (bootstrap.paywall_preview, a shot page with ?__pw=1), else null.
+export function paywallPreviewOrigin() {
+    const o = readBootstrap().paywall_preview?.origin;
+    return typeof o === 'string' && ORIGIN.test(o) ? o : null;
+}
 export const PaywallCtx = createContext(null);
 // The placement of the step on screen with this view's id, or null: the step names no placement, it serves nothing now, outside
 // a funnel. Read texts and the highlighted plan from config, products and their prices from products.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appright/funnelshift",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",