@allegrocdp/preview 0.1.0-dev.12 → 0.1.0-dev.14

package/README.md

@@ -58,13 +58,47 @@ my-template/
 
 Supported field types: `text`, `number`, `checkbox`, `textarea`.
 
-## Preview contexts
+## Scenarios
+
+`allegro-preview` ships three built-in scenarios:
 
 | Tab | Description |
 |-----|-------------|
-| **Standalone** | Template rendered on its own in an iframe |
+| **Standalone** | Template rendered on its own in an isolated iframe |
+| **Article · Append** | Template injected after the full content of a mock article |
 | **Article · Cut** | Template injected after paragraph 3 of a mock article using the `truncate` placement method |
-| **Article · Append** | Template rendered after the full content of a mock article |
+
+### Custom scenarios
+
+Define your own scenarios by creating an `.allegro-preview/` folder at the root of your templates directory, with one subfolder per scenario:
+
+```
+.allegro-preview/
+├── paywalled-article/
+│   ├── scenario.json     # required: name + placement config
+│   ├── host.html         # optional: your mock host page markup
+│   └── host.css          # optional: host page styles
+└── homepage-rail/
+    ├── scenario.json
+    └── host.html
+```
+
+Each `scenario.json` specifies the scenario name and placement parameters:
+
+```json
+{
+  "name": "Paywalled Article",
+  "target_selector": "#article-body",
+  "placement_method": "truncate",
+  "truncation_unit": "paragraphs",
+  "truncation_count": 4,
+  "truncation_style": "cut"
+}
+```
+
+When `host.html` is present, the template is injected into `target_selector` using `placement_method`. Without `host.html`, the template renders standalone. Custom scenarios appear as additional tabs alongside the built-in ones and live-reload when edited.
+
+> **Note:** The `.allegro-preview/` folder is ignored by the GitHub template sync — it never becomes a template and never produces a sync warning.
 
 ## Device breakpoints
 

package/dist/cli.js

@@ -27,6 +27,58 @@ window.__ALLEGRO_TEMPLATE_RESOLVER__ = async function (slug) {
   }
 };`;
 
+// src/scenarios.ts
+function emptyPlacement() {
+  return {
+    target_selector: null,
+    placement_method: null,
+    truncation_unit: null,
+    truncation_count: null,
+    truncation_style: null
+  };
+}
+var ARTICLE_TARGET_SELECTOR = "#allegro-preview-article";
+var BUILT_IN_SCENARIOS = [
+  {
+    id: "standalone",
+    name: "Standalone",
+    builtIn: true,
+    hostKind: "none",
+    placement: emptyPlacement()
+  },
+  {
+    id: "append",
+    name: "Article \xB7 Append",
+    builtIn: true,
+    hostKind: "article",
+    placement: {
+      target_selector: ARTICLE_TARGET_SELECTOR,
+      placement_method: "append",
+      truncation_unit: null,
+      truncation_count: null,
+      truncation_style: null
+    }
+  },
+  {
+    id: "cut",
+    name: "Article \xB7 Cut",
+    builtIn: true,
+    hostKind: "article",
+    placement: {
+      target_selector: ARTICLE_TARGET_SELECTOR,
+      placement_method: "truncate",
+      truncation_unit: "paragraphs",
+      truncation_count: 3,
+      truncation_style: "cut"
+    }
+  }
+];
+
+// src/slugify.ts
+function slugify(name) {
+  return name.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+
 // src/server.ts
 var __dirname = fileURLToPath(new URL(".", import.meta.url));
 var BOILERPLATE_HTML = `<div class="signup">
@@ -127,7 +179,7 @@ var BOILERPLATE_FIELDS = [
   {
     slug: "subheadline",
     label: "Subheadline",
-    type: "textarea",
+    type: "text",
     default_value: "Get the latest stories delivered to your inbox."
   },
   { slug: "input_placeholder", label: "Input placeholder", type: "text", default_value: "Enter your email" },
@@ -222,7 +274,8 @@ function buildPreviewData(options) {
     css: options.css,
     js: options.js,
     fieldValues: options.fieldValues,
-    tab: options.tab
+    tab: options.scenario.id,
+    placement: options.scenario.placement
   });
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
@@ -288,6 +341,33 @@ function articleShell(options) {
 </body>
 </html>`;
 }
+function customHostShell(options) {
+  const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
+  const hostCss = options.scenario.hostCss ? `<style>${options.scenario.hostCss}</style>` : "";
+  const hostHtml = options.scenario.hostHtml ?? "";
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>${PREVIEW_BOOTSTRAP_SCRIPT}</script>
+  ${cookieScript}
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body { margin: 0; }
+    [data-allegro-interaction] { display: block; }
+  </style>
+  ${previewCssTag(options.previewCss)}
+  ${hostCss}
+</head>
+<body>
+  <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
+  ${hostHtml}
+  ${sdkScriptTag(options.sdkUrl)}
+  <script src="/preview-client.js"></script>
+</body>
+</html>`;
+}
 var sseClients = /* @__PURE__ */ new Set();
 function broadcast(event) {
   for (const client of sseClients) {
@@ -310,7 +390,9 @@ function readTemplateMeta(dir) {
   }
   try {
     const parsed = JSON.parse(readFileSync(jsonPath, "utf-8"));
-    return { name: parsed.name ?? basename(dir) };
+    return {
+      name: typeof parsed.name === "string" && parsed.name.trim() !== "" ? parsed.name : basename(dir)
+    };
   } catch {
     return { name: basename(dir) };
   }
@@ -377,6 +459,109 @@ function readTemplateFiles(dir) {
 function readTemplateFilesCached(dir) {
   return templateFilesCache.get(dir) ?? readTemplateFiles(dir);
 }
+var SCENARIOS_DIRNAME = ".allegro-preview";
+function parsePlacement(raw) {
+  const placement = emptyPlacement();
+  if (typeof raw.target_selector === "string") {
+    placement.target_selector = raw.target_selector;
+  }
+  if (raw.placement_method === "truncate" || raw.placement_method === "append") {
+    placement.placement_method = raw.placement_method;
+  }
+  if (raw.truncation_unit === "paragraphs") {
+    placement.truncation_unit = raw.truncation_unit;
+  }
+  if (typeof raw.truncation_count === "number" && Number.isFinite(raw.truncation_count)) {
+    placement.truncation_count = raw.truncation_count;
+  }
+  if (raw.truncation_style === "cut") {
+    placement.truncation_style = raw.truncation_style;
+  }
+  return placement;
+}
+function readCustomScenario(scenariosDir, id) {
+  const dir = join(scenariosDir, id);
+  const jsonPath = join(dir, "scenario.json");
+  const base = {
+    id,
+    name: id,
+    builtIn: false,
+    hostKind: "none",
+    placement: emptyPlacement(),
+    parseError: null
+  };
+  let raw;
+  try {
+    raw = JSON.parse(readFileSync(jsonPath, "utf-8"));
+  } catch (err) {
+    base.parseError = err instanceof Error ? err.message : "Invalid JSON in scenario.json";
+    return base;
+  }
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) {
+    base.parseError = "scenario.json must be a JSON object";
+    return base;
+  }
+  if (typeof raw.name === "string" && raw.name.length > 0) {
+    base.name = raw.name;
+  }
+  base.placement = parsePlacement(raw);
+  const hostHtmlPath = join(dir, "host.html");
+  if (existsSync(hostHtmlPath)) {
+    try {
+      base.hostKind = "custom";
+      base.hostHtml = readFileSync(hostHtmlPath, "utf-8");
+      const hostCssPath = join(dir, "host.css");
+      base.hostCss = existsSync(hostCssPath) ? readFileSync(hostCssPath, "utf-8") : "";
+    } catch (err) {
+      base.parseError = err instanceof Error ? err.message : "Failed to read scenario host files";
+      return base;
+    }
+  }
+  return base;
+}
+function scanCustomScenarios(baseDir) {
+  const scenariosDir = join(baseDir, SCENARIOS_DIRNAME);
+  if (!existsSync(scenariosDir)) {
+    return [];
+  }
+  const results = [];
+  try {
+    for (const entry of readdirSync(scenariosDir, { withFileTypes: true })) {
+      if (!entry.isDirectory()) {
+        continue;
+      }
+      if (!existsSync(join(scenariosDir, entry.name, "scenario.json"))) {
+        continue;
+      }
+      const scenario = readCustomScenario(scenariosDir, entry.name);
+      if (scenario.parseError) {
+        console.warn(`[allegro-preview] Skipping scenario "${entry.name}": ${scenario.parseError}`);
+        continue;
+      }
+      results.push(scenario);
+    }
+  } catch {
+  }
+  return results;
+}
+function listScenarioSummaries(customScenarios) {
+  return [
+    ...BUILT_IN_SCENARIOS.map((s) => ({ id: s.id, name: s.name })),
+    ...customScenarios.map((s) => ({ id: s.id, name: s.name }))
+  ];
+}
+function resolveScenario(baseDir, id) {
+  const builtIn = BUILT_IN_SCENARIOS.find((s) => s.id === id);
+  if (builtIn) {
+    return builtIn;
+  }
+  const scenariosDir = join(baseDir, SCENARIOS_DIRNAME);
+  if (existsSync(join(scenariosDir, id, "scenario.json"))) {
+    const scenario = readCustomScenario(scenariosDir, id);
+    return scenario.parseError ? null : scenario;
+  }
+  return null;
+}
 async function startServer(templatePath, port = 0, tenant = "") {
   const baseDir = resolve(process.cwd(), templatePath);
   if (!existsSync(baseDir)) {
@@ -384,11 +569,17 @@ async function startServer(templatePath, port = 0, tenant = "") {
     process.exit(1);
   }
   let templates = scanTemplates(baseDir);
+  let customScenarios = scanCustomScenarios(baseDir);
   const app = express();
   const clientDistDir = join(__dirname, "client");
   app.use(express.static(clientDistDir));
   app.get("/api/config", (_req, res) => {
-    res.json({ defaultSlug: templates[0]?.slug ?? null, templates, tenant });
+    res.json({
+      defaultSlug: templates[0]?.slug ?? null,
+      templates,
+      tenant,
+      scenarios: listScenarioSummaries(customScenarios)
+    });
   });
   app.get("/api/template", (req, res) => {
     const slug = req.query.slug ?? ".";
@@ -412,16 +603,28 @@ async function startServer(templatePath, port = 0, tenant = "") {
   });
   app.post("/api/template/create", express.json(), (req, res) => {
     const body = req.body;
-    const slug = body.slug;
-    if (typeof slug !== "string" || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug)) {
-      res.status(400).json({
-        error: "Slug must be lowercase letters, numbers, and hyphens only (e.g. my-template)."
-      });
+    const name = typeof body.name === "string" ? body.name.trim() : "";
+    if (name === "") {
+      res.status(400).json({ error: "Template name is required." });
+      return;
+    }
+    const slug = slugify(name);
+    if (slug === "") {
+      res.status(400).json({ error: "Template name must contain at least one letter or number." });
+      return;
+    }
+    const existing = scanTemplates(baseDir);
+    if (existing.some((t) => t.slug === slug)) {
+      res.status(400).json({ error: `A template with the slug "${slug}" already exists.` });
+      return;
+    }
+    if (existing.some((t) => t.name.toLowerCase() === name.toLowerCase())) {
+      res.status(400).json({ error: `A template named "${name}" already exists.` });
       return;
     }
     const targetDir = join(baseDir, slug);
     if (existsSync(targetDir)) {
-      res.status(400).json({ error: `A template named "${slug}" already exists.` });
+      res.status(400).json({ error: `A template with the slug "${slug}" already exists.` });
       return;
     }
     try {
@@ -430,7 +633,15 @@ async function startServer(templatePath, port = 0, tenant = "") {
       writeFileSync(join(targetDir, "index.css"), BOILERPLATE_CSS);
       writeFileSync(
         join(targetDir, "template.json"),
-        JSON.stringify({ name: slug, fields: BOILERPLATE_FIELDS }, null, 2) + "\n"
+        JSON.stringify(
+          {
+            $schema: "https://docs.allegrocdp.com/template.schema.json",
+            name,
+            fields: BOILERPLATE_FIELDS
+          },
+          null,
+          2
+        ) + "\n"
       );
     } catch (err) {
       console.error("[allegro-preview] Failed to create template:", err);
@@ -438,7 +649,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
       return;
     }
     rescan();
-    res.status(201).json({ slug });
+    res.status(201).json({ slug, name });
   });
   app.get("/api/events", (req, res) => {
     res.setHeader("Content-Type", "text/event-stream");
@@ -454,6 +665,15 @@ async function startServer(templatePath, port = 0, tenant = "") {
     const slug = typeof req.query.slug === "string" ? req.query.slug : "";
     const tab = typeof req.query.tab === "string" ? req.query.tab : "standalone";
     const sdkParam = typeof req.query.sdk === "string" ? req.query.sdk : void 0;
+    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(tab)) {
+      res.status(404).send("Scenario not found");
+      return;
+    }
+    const scenario = resolveScenario(baseDir, tab);
+    if (!scenario) {
+      res.status(404).send("Scenario not found");
+      return;
+    }
     if (!slug) {
       res.status(400).send("Missing slug");
       return;
@@ -498,12 +718,12 @@ async function startServer(templatePath, port = 0, tenant = "") {
       css: templateFiles.css,
       js: templateFiles.js,
       fieldValues,
-      tab,
+      scenario,
       sdkUrl: effectiveSdkUrl,
       blockCookies,
       previewCss
     };
-    const rendered = tab === "standalone" ? standaloneShell(shellOptions) : articleShell(shellOptions);
+    const rendered = scenario.hostKind === "custom" ? customHostShell(shellOptions) : scenario.hostKind === "article" ? articleShell(shellOptions) : standaloneShell(shellOptions);
     res.setHeader("Cache-Control", "no-store");
     res.type("html").send(rendered);
   });
@@ -542,6 +762,17 @@ async function startServer(templatePath, port = 0, tenant = "") {
     broadcastReload();
   });
   const dirWatcher = chokidar.watch(baseDir, { depth: 1, ignoreInitial: true });
+  const scenariosWatcher = chokidar.watch(join(baseDir, SCENARIOS_DIRNAME), {
+    ignoreInitial: true
+  });
+  function rescanScenarios() {
+    customScenarios = scanCustomScenarios(baseDir);
+    console.log(`Scenarios updated: ${customScenarios.map((s) => s.id).join(", ") || "(none)"}`);
+    broadcastConfig();
+  }
+  scenariosWatcher.on("all", () => {
+    rescanScenarios();
+  });
   function rescan() {
     templates = scanTemplates(baseDir);
     console.log(`Templates updated: ${templates.map((t) => t.slug).join(", ") || "(none)"}`);

package/dist/client/assets/app-C--PVKMq.js

@@ -0,0 +1,14 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const a of document.querySelectorAll('link[rel="modulepreload"]'))l(a);new MutationObserver(a=>{for(const s of a)if(s.type==="childList")for(const o of s.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&l(o)}).observe(document,{childList:!0,subtree:!0});function n(a){const s={};return a.integrity&&(s.integrity=a.integrity),a.referrerPolicy&&(s.referrerPolicy=a.referrerPolicy),a.crossOrigin==="use-credentials"?s.credentials="include":a.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function l(a){if(a.ep)return;a.ep=!0;const s=n(a);fetch(a.href,s)}})();function V(e){return e.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}const ae={full:0,desktop:1280,tablet:768,mobile:390};function se(e){return ae[e]}let d=[],L=[],m=null,r="standalone",w="full",y=null,b={},P,D=!0,M=null,g=null,E=null;const J=document.getElementById("template-nav"),v=document.getElementById("field-list"),f=document.getElementById("preview-area"),I=document.getElementById("tab-group"),j=document.getElementById("device-group"),H=document.getElementById("toolbar-badge"),ie=document.getElementById("theme-toggle"),ce=document.getElementById("theme-icon-sun"),re=document.getElementById("theme-icon-moon"),$=document.getElementById("tenant-input"),B=document.getElementById("tenant-status"),de=document.getElementById("new-template-btn"),W=document.getElementById("new-window-btn"),x=document.getElementById("create-modal-backdrop"),c=document.getElementById("modal-name-input"),G=document.getElementById("modal-slug-hint"),h=document.getElementById("modal-error"),ue=document.getElementById("modal-cancel-btn"),k=document.getElementById("modal-create-btn"),O=document.getElementById("block-cookies-checkbox"),z=document.getElementById("cookie-auth-area"),T=document.getElementById("cookie-auth-user"),R=document.getElementById("cookie-auth-hint"),me=document.getElementById("cookie-clear-btn"),C=document.getElementById("jwt-modal-backdrop"),pe=document.getElementById("jwt-payload-content"),fe=document.getElementById("jwt-modal-close-btn");function K(e){document.documentElement.setAttribute("data-theme",e?"dark":"light"),ce.style.display=e?"none":"",re.style.display=e?"":"none"}function ge(){const e=localStorage.getItem("allegro-preview-theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches;K(e?e==="dark":t)}ie.addEventListener("click",()=>{const e=document.documentElement.getAttribute("data-theme")!=="dark";K(e),localStorage.setItem("allegro-preview-theme",e?"dark":"light")});function ve(e){const t=e.trim();return t?(/^https?:\/\//.test(t)?t:`https://${t}`).replace(/\/+$/,"")+"/client.js":""}function Y(e){const t=ve(e);P=t||void 0,t?(B.className="tenant-active-badge",B.textContent=t):(B.className="tenant-hint",B.textContent="Loads /client.js on the preview page"),y&&p()}$.addEventListener("input",()=>{localStorage.setItem("allegro-preview-tenant",$.value),Y($.value)});function he(e=""){const t=localStorage.getItem("allegro-preview-tenant"),n=e||t||"";n&&($.value=n,e&&localStorage.setItem("allegro-preview-tenant",n),Y(n))}const ye=[{name:"_ALLEGROT",label:"Session JWT",isJwt:!0},{name:"_ALLEGROD",label:"Device ID"},{name:"_ALLEGROS",label:"Session ID"}];function Ee(e){const t=document.cookie.split("; ").find(n=>n.startsWith(e+"="));if(!t)return null;try{return decodeURIComponent(t.split("=").slice(1).join("="))}catch{return t.split("=").slice(1).join("=")}}function we(e){try{const t=e.split(".");if(t.length!==3)return null;const n=t[1].replace(/-/g,"+").replace(/_/g,"/"),l=atob(n);return JSON.parse(l)}catch{return null}}function S(){const e=ye.map(t=>({...t,value:Ee(t.name)})).filter(t=>t.value!==null);if(T.innerHTML="",e.length===0){T.style.display="none",R.style.display="";return}R.style.display="none",T.style.display="";for(const t of e){const n=document.createElement("div");n.className="cookie-row";const l=document.createElement("div");l.className="cookie-auth-dot";const a=document.createElement("div");a.className="cookie-row-info";const s=document.createElement("div");s.className="cookie-row-label",s.textContent=t.label;const o=document.createElement("div");if(o.className="cookie-row-value",o.textContent=t.value.length>24?t.value.slice(0,24)+"…":t.value,a.appendChild(s),a.appendChild(o),n.appendChild(l),n.appendChild(a),t.isJwt){const i=document.createElement("button");i.className="cookie-view-btn",i.textContent="Decode",i.onclick=()=>{const u=we(t.value);pe.textContent=u?JSON.stringify(u,null,2):t.value,C.classList.remove("hidden")},n.appendChild(i)}T.appendChild(n)}}function be(e){D=e,localStorage.setItem("allegro-preview-block-cookies",e?"true":"false"),z.style.display=e?"none":"",e?E&&(clearInterval(E),E=null):(S(),E||(E=setInterval(S,2e3))),y&&p()}function ke(){const t=localStorage.getItem("allegro-preview-block-cookies")!=="false";O.checked=t,D=t,z.style.display=t?"none":"",t||(S(),E=setInterval(S,2e3))}O.addEventListener("change",()=>{be(O.checked)});me.addEventListener("click",()=>{const e=document.cookie.split("; ");for(const t of e){const n=t.split("=")[0];document.cookie=`${n}=; max-age=0; path=/`}S()});fe.addEventListener("click",()=>{C.classList.add("hidden")});C.addEventListener("click",e=>{e.target===C&&C.classList.add("hidden")});function Ce(){const e=window.location.hash.slice(1);return e?decodeURIComponent(e):null}function Le(e){history.replaceState(null,"",`#${encodeURIComponent(e)}`)}function Ie(){history.replaceState(null,"",window.location.pathname)}function Q(e){I.querySelectorAll(".tab-btn").forEach(t=>{t.disabled=!e}),j.querySelectorAll(".device-btn").forEach(t=>{t.disabled=!e}),W.disabled=!e}function X(){I.innerHTML="";for(const e of L){const t=document.createElement("button");t.className="tab-btn"+(e.id===r?" active":""),t.dataset.tab=e.id,t.textContent=e.name,t.disabled=y===null,I.appendChild(t)}}I.addEventListener("click",e=>{const t=e.target.closest(".tab-btn");!t||t.disabled||(r=t.dataset.tab,I.querySelectorAll(".tab-btn").forEach(n=>n.classList.remove("active")),t.classList.add("active"),localStorage.setItem("allegro-preview-tab",r),p())});j.addEventListener("click",e=>{const t=e.target.closest(".device-btn");!t||t.disabled||(w=t.dataset.device,j.querySelectorAll(".device-btn").forEach(n=>n.classList.remove("active")),t.classList.add("active"),localStorage.setItem("allegro-preview-device",w),p())});function N(){J.innerHTML="";for(const e of d){const t=document.createElement("button");t.className="template-nav-item"+(e.slug===m?" active":""),t.innerHTML=`<span class="template-nav-dot"></span><span class="template-nav-name">${_(e.name)}</span>`,t.addEventListener("click",()=>void q(e.slug)),J.appendChild(t)}}async function q(e){m=e,Le(e),N(),await U(e)}function Z(){y=null,m=null,M=null,g=null,Ie(),N(),Q(!1),H.textContent="No template selected",H.style.opacity="0.4",v.innerHTML='<p class="no-fields">Select a template to edit fields.</p>';const e=document.createElement("div");if(e.className="selector-screen",d.length===0){e.innerHTML=`
+            <div class="selector-empty">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+                <span>No templates found in this directory.</span>
+            </div>`,f.innerHTML="",f.appendChild(e);return}e.innerHTML=`
+        <div class="selector-eyebrow">Allegro Preview</div>
+        <h2 class="selector-heading">Choose a template</h2>
+        <p class="selector-sub">Select a template to start previewing.</p>
+        <div class="selector-grid" id="selector-grid"></div>`,f.innerHTML="",f.appendChild(e);const t=e.querySelector("#selector-grid");for(const n of d){const l=document.createElement("button");l.className="selector-card",l.innerHTML=`
+            <div class="selector-card-icon">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+            </div>
+            <div class="selector-card-name">${_(n.name)}</div>
+            <div class="selector-card-slug">${_(n.slug)}</div>`,l.addEventListener("click",()=>void q(n.slug)),t.appendChild(l)}}const F=["text","number","checkbox","textarea"];function ee(e){if(typeof e!="object"||e===null)return!1;const t=e;return typeof t.slug=="string"&&t.slug.length>0&&F.includes(t.type)}function xe(e){if(typeof e!="object"||e===null)return`Invalid field: expected an object, got ${JSON.stringify(e)}.`;const t=e,n=[];if((typeof t.slug!="string"||t.slug.length===0)&&n.push('missing required "slug" property'),!F.includes(t.type)){const a=t.type!==void 0?`"${String(t.type)}"`:"none";n.push(`invalid type ${a} — valid types: ${F.join(", ")}`)}return`${typeof t.slug=="string"&&t.slug.length>0?`Field "${t.slug}"`:"Field"}: ${n.join("; ")}.`}function Se(e){b={};for(const t of e)ee(t)&&(b[t.slug]=t.default_value??"")}function Ne(e,t){if(v.innerHTML="",t){const n=document.createElement("div");n.className="field-error",n.textContent=`template.json parse error: ${t}`,v.appendChild(n);return}if(e.length===0){v.innerHTML='<p class="no-fields">No fields in template.json.</p>';return}for(const n of e){if(!ee(n)){const o=document.createElement("div");o.className="field-error",o.textContent=xe(n),v.appendChild(o);continue}const l=n;if(l.type==="checkbox"){const o=document.createElement("div");o.className="field-checkbox-row";const i=document.createElement("input");i.type="checkbox",i.id=`field-${l.slug}`,i.checked=l.default_value==="true"||l.default_value==="1",i.addEventListener("change",()=>{b[l.slug]=i.checked?"true":"false",p()});const u=document.createElement("label");u.className="field-label",u.htmlFor=`field-${l.slug}`,u.textContent=l.label||l.slug,o.appendChild(i),o.appendChild(u),v.appendChild(o);continue}const a=document.createElement("div");a.className="field-group";const s=document.createElement("label");if(s.className="field-label",s.htmlFor=`field-${l.slug}`,s.textContent=l.label||l.slug,a.appendChild(s),l.type==="textarea"){const o=document.createElement("textarea");o.className="field-input",o.id=`field-${l.slug}`,o.rows=3,o.value=l.default_value??"",o.addEventListener("input",()=>{b[l.slug]=o.value,p()}),a.appendChild(o)}else{const o=document.createElement("input");o.type=l.type==="number"?"number":"text",o.className="field-input",o.id=`field-${l.slug}`,o.value=l.default_value??"",o.addEventListener("input",()=>{b[l.slug]=o.value,p()}),a.appendChild(o)}v.appendChild(a)}}function Be(){const e=new URLSearchParams;e.set("slug",m),e.set("tab",r),P&&e.set("sdk",P),D||e.set("blockCookies","false");for(const[t,n]of Object.entries(b))e.set(`f_${t}`,n);return`/preview?${e.toString()}`}function p(){if(!y||!m)return;const e=Be();M=e;const t=se(w),n=t===0;if(g){const i=g.parentElement,u=i.parentElement,oe=u.parentElement;oe.className=n?"preview-stage":"preview-stage preview-stage--breakpoint",u.style.width=n?"100%":"",i.style.width=n?"100%":`${t}px`,g.style.width=n?"100%":`${t}px`,g.style.maxHeight=w==="mobile"?"812px":"",g.src=e;return}f.innerHTML="";const l=document.createElement("div");l.className=n?"preview-stage":"preview-stage preview-stage--breakpoint";const a=document.createElement("div");a.className="preview-scaler";const s=document.createElement("div");s.className="preview-frame-wrapper";const o=document.createElement("iframe");o.style.height="calc(100vh - 48px)",n?(a.style.width="100%",s.style.width="100%",o.style.width="100%"):(s.style.width=`${t}px`,o.style.width=`${t}px`,w==="mobile"&&(o.style.maxHeight="812px")),o.src=e,s.appendChild(o),a.appendChild(s),l.appendChild(a),f.appendChild(l),g=o}async function U(e){try{const t=await fetch(`/api/template?slug=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const n=await t.json();y=n,H.textContent=`Template: ${n.name}`,H.style.opacity="1",Q(!0),Se(n.fields),Ne(n.fields,n.fieldsParseError),p()}catch(t){console.error("[allegro-preview] Failed to load template:",t),f.innerHTML="";const n=document.createElement("div");n.style.padding="40px",n.style.color="var(--text-muted)",n.style.fontSize="13px",n.textContent=`Failed to load template "${e}".`,f.appendChild(n)}}async function Te(){const t=await(await fetch("/api/config")).json();d=t.templates,L=t.scenarios??[],L.some(a=>a.id===r)||(r="standalone",localStorage.setItem("allegro-preview-tab",r)),X(),he(t.tenant??"");const n=Ce(),l=n&&d.find(a=>a.slug===n)?n:null;l?(m=l,N(),await U(l)):Z()}function $e(){const e=localStorage.getItem("allegro-preview-tab"),t=localStorage.getItem("allegro-preview-device");e&&(r=e),t&&["full","desktop","tablet","mobile"].includes(t)&&(w=t,j.querySelectorAll(".device-btn").forEach(n=>{n.classList.toggle("active",n.dataset.device===t)}))}function te(){const e=new EventSource("/api/events");e.addEventListener("reload",()=>{m&&U(m)}),e.addEventListener("config",()=>{Me()}),e.onerror=()=>{e.close(),setTimeout(te,2e3)}}async function Me(){const t=await(await fetch("/api/config")).json();d=t.templates,L=t.scenarios??[],L.some(n=>n.id===r)||(r="standalone",localStorage.setItem("allegro-preview-tab",r),y&&p()),X(),N(),m&&!d.find(n=>n.slug===m)&&Z()}function _(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function je(){c.value="",h.textContent="",G.textContent="",c.classList.remove("invalid"),k.disabled=!0,x.classList.remove("hidden"),c.focus()}function A(){x.classList.add("hidden")}function ne(e){if(!e)return"Template name is required.";const t=V(e);return t?d.some(n=>n.slug===t)?`A template with the slug "${t}" already exists.`:d.some(n=>n.name.toLowerCase()===e.toLowerCase())?`A template named "${e}" already exists.`:null:"Template name must contain at least one letter or number."}W.addEventListener("click",()=>{M&&window.open(M,"_blank")});de.addEventListener("click",je);ue.addEventListener("click",A);x.addEventListener("click",e=>{e.target===x&&A()});document.addEventListener("keydown",e=>{e.key==="Escape"&&!x.classList.contains("hidden")&&A()});c.addEventListener("input",()=>{const e=c.value.trim(),t=V(e);G.textContent=t?`Slug: ${t}`:"";const n=ne(e);k.disabled=n!==null,n&&e?(c.classList.add("invalid"),h.textContent=n):(c.classList.remove("invalid"),h.textContent="")});c.addEventListener("keydown",e=>{e.key==="Enter"&&le()});k.addEventListener("click",()=>void le());async function le(){const e=c.value.trim(),t=ne(e);if(t){c.classList.add("invalid"),h.textContent=t,c.focus();return}k.disabled=!0,h.textContent="";try{const n=await fetch("/api/template/create",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})}),l=await n.json();if(!n.ok||!l.slug){h.textContent=l.error??"Failed to create template.",k.disabled=!1;return}A(),d=[...d,{slug:l.slug,name:l.name??e}],N(),await q(l.slug)}catch{h.textContent="Network error. Please try again.",k.disabled=!1}}ge();$e();ke();Te();te();

package/dist/client/index.html

@@ -283,6 +283,12 @@
                 border-color: #f87171;
             }
 
+            .modal-hint {
+                margin-top: 6px;
+                font-size: 12px;
+                color: #94a3b8;
+            }
+
             .modal-error {
                 font-size: 11px;
                 color: #f87171;
@@ -1008,7 +1014,7 @@
                 display: block;
             }
         </style>
-      <script type="module" crossorigin src="/assets/app-D1XS_DDX.js"></script>
+      <script type="module" crossorigin src="/assets/app-C--PVKMq.js"></script>
     </head>
     <body>
         <aside class="sidebar">
@@ -1138,11 +1144,7 @@
 
         <div class="main">
             <div class="toolbar">
-                <div class="tab-group" id="tab-group">
-                    <button class="tab-btn active" data-tab="standalone" disabled>Standalone</button>
-                    <button class="tab-btn" data-tab="append" disabled>Article &middot; Append</button>
-                    <button class="tab-btn" data-tab="cut" disabled>Article &middot; Cut</button>
-                </div>
+                <div class="tab-group" id="tab-group"></div>
                 <div class="toolbar-sep"></div>
                 <span class="template-badge" id="toolbar-badge" style="opacity: 0.4">No template selected</span>
                 <div class="device-group" id="device-group">
@@ -1250,15 +1252,16 @@
             <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
                 <div class="modal-title" id="modal-title">New Template</div>
                 <div class="modal-field">
-                    <label class="modal-label" for="modal-slug-input">Template slug</label>
+                    <label class="modal-label" for="modal-name-input">Template name</label>
                     <input
                         class="modal-input"
-                        id="modal-slug-input"
+                        id="modal-name-input"
                         type="text"
-                        placeholder="my-template"
+                        placeholder="My template"
                         autocomplete="off"
                         spellcheck="false"
                     />
+                    <div class="modal-hint" id="modal-slug-hint"></div>
                     <div class="modal-error" id="modal-error"></div>
                 </div>
                 <div class="modal-actions">

package/dist/client/preview-client.js

@@ -1 +1 @@
-function r(){const e=document.getElementById("allegro-preview-data");if(!e||!e.textContent)throw new Error("[allegro-preview] Missing #allegro-preview-data element");return JSON.parse(e.textContent)}function o(e){const t=e.tab==="cut"||e.tab==="append";return{type:"template",template_id:e.slug,target_selector:t?"#allegro-preview-article":null,field_values:e.fieldValues,placement_method:e.tab==="cut"?"truncate":e.tab==="append"?"append":null,truncation_unit:e.tab==="cut"?"paragraphs":null,truncation_count:e.tab==="cut"?3:null,truncation_style:e.tab==="cut"?"cut":null,template:{id:e.slug,title:e.slug,slug:e.slug,html:e.html,css:e.css,js:e.js,external_css_urls:[]}}}window.allegro=window.allegro||[];window.allegro.push(e=>{const t=r(),l=o(t);e.interaction.renderActions([l],{skipDelays:!0}).catch(n=>{console.error("[allegro-preview] renderActions failed:",n)})});
+function r(){const e=document.getElementById("allegro-preview-data");if(!e||!e.textContent)throw new Error("[allegro-preview] Missing #allegro-preview-data element");return JSON.parse(e.textContent)}function o(e){const t=e.placement;return{type:"template",template_id:e.slug,target_selector:t.target_selector,field_values:e.fieldValues,placement_method:t.placement_method,truncation_unit:t.truncation_unit,truncation_count:t.truncation_count,truncation_style:t.truncation_style,template:{id:e.slug,title:e.slug,slug:e.slug,html:e.html,css:e.css,js:e.js,external_css_urls:[]}}}window.allegro=window.allegro||[];window.allegro.push(e=>{const t=r(),n=o(t);e.interaction.renderActions([n],{skipDelays:!0}).catch(l=>{console.error("[allegro-preview] renderActions failed:",l)})});

package/dist/server.js

@@ -24,6 +24,58 @@ window.__ALLEGRO_TEMPLATE_RESOLVER__ = async function (slug) {
   }
 };`;
 
+// src/scenarios.ts
+function emptyPlacement() {
+  return {
+    target_selector: null,
+    placement_method: null,
+    truncation_unit: null,
+    truncation_count: null,
+    truncation_style: null
+  };
+}
+var ARTICLE_TARGET_SELECTOR = "#allegro-preview-article";
+var BUILT_IN_SCENARIOS = [
+  {
+    id: "standalone",
+    name: "Standalone",
+    builtIn: true,
+    hostKind: "none",
+    placement: emptyPlacement()
+  },
+  {
+    id: "append",
+    name: "Article \xB7 Append",
+    builtIn: true,
+    hostKind: "article",
+    placement: {
+      target_selector: ARTICLE_TARGET_SELECTOR,
+      placement_method: "append",
+      truncation_unit: null,
+      truncation_count: null,
+      truncation_style: null
+    }
+  },
+  {
+    id: "cut",
+    name: "Article \xB7 Cut",
+    builtIn: true,
+    hostKind: "article",
+    placement: {
+      target_selector: ARTICLE_TARGET_SELECTOR,
+      placement_method: "truncate",
+      truncation_unit: "paragraphs",
+      truncation_count: 3,
+      truncation_style: "cut"
+    }
+  }
+];
+
+// src/slugify.ts
+function slugify(name) {
+  return name.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+
 // src/server.ts
 var __dirname = fileURLToPath(new URL(".", import.meta.url));
 var BOILERPLATE_HTML = `<div class="signup">
@@ -124,7 +176,7 @@ var BOILERPLATE_FIELDS = [
   {
     slug: "subheadline",
     label: "Subheadline",
-    type: "textarea",
+    type: "text",
     default_value: "Get the latest stories delivered to your inbox."
   },
   { slug: "input_placeholder", label: "Input placeholder", type: "text", default_value: "Enter your email" },
@@ -219,7 +271,8 @@ function buildPreviewData(options) {
     css: options.css,
     js: options.js,
     fieldValues: options.fieldValues,
-    tab: options.tab
+    tab: options.scenario.id,
+    placement: options.scenario.placement
   });
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
@@ -285,6 +338,33 @@ function articleShell(options) {
 </body>
 </html>`;
 }
+function customHostShell(options) {
+  const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
+  const hostCss = options.scenario.hostCss ? `<style>${options.scenario.hostCss}</style>` : "";
+  const hostHtml = options.scenario.hostHtml ?? "";
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>${PREVIEW_BOOTSTRAP_SCRIPT}</script>
+  ${cookieScript}
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body { margin: 0; }
+    [data-allegro-interaction] { display: block; }
+  </style>
+  ${previewCssTag(options.previewCss)}
+  ${hostCss}
+</head>
+<body>
+  <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
+  ${hostHtml}
+  ${sdkScriptTag(options.sdkUrl)}
+  <script src="/preview-client.js"></script>
+</body>
+</html>`;
+}
 var sseClients = /* @__PURE__ */ new Set();
 function broadcast(event) {
   for (const client of sseClients) {
@@ -307,7 +387,9 @@ function readTemplateMeta(dir) {
   }
   try {
     const parsed = JSON.parse(readFileSync(jsonPath, "utf-8"));
-    return { name: parsed.name ?? basename(dir) };
+    return {
+      name: typeof parsed.name === "string" && parsed.name.trim() !== "" ? parsed.name : basename(dir)
+    };
   } catch {
     return { name: basename(dir) };
   }
@@ -374,6 +456,109 @@ function readTemplateFiles(dir) {
 function readTemplateFilesCached(dir) {
   return templateFilesCache.get(dir) ?? readTemplateFiles(dir);
 }
+var SCENARIOS_DIRNAME = ".allegro-preview";
+function parsePlacement(raw) {
+  const placement = emptyPlacement();
+  if (typeof raw.target_selector === "string") {
+    placement.target_selector = raw.target_selector;
+  }
+  if (raw.placement_method === "truncate" || raw.placement_method === "append") {
+    placement.placement_method = raw.placement_method;
+  }
+  if (raw.truncation_unit === "paragraphs") {
+    placement.truncation_unit = raw.truncation_unit;
+  }
+  if (typeof raw.truncation_count === "number" && Number.isFinite(raw.truncation_count)) {
+    placement.truncation_count = raw.truncation_count;
+  }
+  if (raw.truncation_style === "cut") {
+    placement.truncation_style = raw.truncation_style;
+  }
+  return placement;
+}
+function readCustomScenario(scenariosDir, id) {
+  const dir = join(scenariosDir, id);
+  const jsonPath = join(dir, "scenario.json");
+  const base = {
+    id,
+    name: id,
+    builtIn: false,
+    hostKind: "none",
+    placement: emptyPlacement(),
+    parseError: null
+  };
+  let raw;
+  try {
+    raw = JSON.parse(readFileSync(jsonPath, "utf-8"));
+  } catch (err) {
+    base.parseError = err instanceof Error ? err.message : "Invalid JSON in scenario.json";
+    return base;
+  }
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) {
+    base.parseError = "scenario.json must be a JSON object";
+    return base;
+  }
+  if (typeof raw.name === "string" && raw.name.length > 0) {
+    base.name = raw.name;
+  }
+  base.placement = parsePlacement(raw);
+  const hostHtmlPath = join(dir, "host.html");
+  if (existsSync(hostHtmlPath)) {
+    try {
+      base.hostKind = "custom";
+      base.hostHtml = readFileSync(hostHtmlPath, "utf-8");
+      const hostCssPath = join(dir, "host.css");
+      base.hostCss = existsSync(hostCssPath) ? readFileSync(hostCssPath, "utf-8") : "";
+    } catch (err) {
+      base.parseError = err instanceof Error ? err.message : "Failed to read scenario host files";
+      return base;
+    }
+  }
+  return base;
+}
+function scanCustomScenarios(baseDir) {
+  const scenariosDir = join(baseDir, SCENARIOS_DIRNAME);
+  if (!existsSync(scenariosDir)) {
+    return [];
+  }
+  const results = [];
+  try {
+    for (const entry of readdirSync(scenariosDir, { withFileTypes: true })) {
+      if (!entry.isDirectory()) {
+        continue;
+      }
+      if (!existsSync(join(scenariosDir, entry.name, "scenario.json"))) {
+        continue;
+      }
+      const scenario = readCustomScenario(scenariosDir, entry.name);
+      if (scenario.parseError) {
+        console.warn(`[allegro-preview] Skipping scenario "${entry.name}": ${scenario.parseError}`);
+        continue;
+      }
+      results.push(scenario);
+    }
+  } catch {
+  }
+  return results;
+}
+function listScenarioSummaries(customScenarios) {
+  return [
+    ...BUILT_IN_SCENARIOS.map((s) => ({ id: s.id, name: s.name })),
+    ...customScenarios.map((s) => ({ id: s.id, name: s.name }))
+  ];
+}
+function resolveScenario(baseDir, id) {
+  const builtIn = BUILT_IN_SCENARIOS.find((s) => s.id === id);
+  if (builtIn) {
+    return builtIn;
+  }
+  const scenariosDir = join(baseDir, SCENARIOS_DIRNAME);
+  if (existsSync(join(scenariosDir, id, "scenario.json"))) {
+    const scenario = readCustomScenario(scenariosDir, id);
+    return scenario.parseError ? null : scenario;
+  }
+  return null;
+}
 async function startServer(templatePath, port = 0, tenant = "") {
   const baseDir = resolve(process.cwd(), templatePath);
   if (!existsSync(baseDir)) {
@@ -381,11 +566,17 @@ async function startServer(templatePath, port = 0, tenant = "") {
     process.exit(1);
   }
   let templates = scanTemplates(baseDir);
+  let customScenarios = scanCustomScenarios(baseDir);
   const app = express();
   const clientDistDir = join(__dirname, "client");
   app.use(express.static(clientDistDir));
   app.get("/api/config", (_req, res) => {
-    res.json({ defaultSlug: templates[0]?.slug ?? null, templates, tenant });
+    res.json({
+      defaultSlug: templates[0]?.slug ?? null,
+      templates,
+      tenant,
+      scenarios: listScenarioSummaries(customScenarios)
+    });
   });
   app.get("/api/template", (req, res) => {
     const slug = req.query.slug ?? ".";
@@ -409,16 +600,28 @@ async function startServer(templatePath, port = 0, tenant = "") {
   });
   app.post("/api/template/create", express.json(), (req, res) => {
     const body = req.body;
-    const slug = body.slug;
-    if (typeof slug !== "string" || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug)) {
-      res.status(400).json({
-        error: "Slug must be lowercase letters, numbers, and hyphens only (e.g. my-template)."
-      });
+    const name = typeof body.name === "string" ? body.name.trim() : "";
+    if (name === "") {
+      res.status(400).json({ error: "Template name is required." });
+      return;
+    }
+    const slug = slugify(name);
+    if (slug === "") {
+      res.status(400).json({ error: "Template name must contain at least one letter or number." });
+      return;
+    }
+    const existing = scanTemplates(baseDir);
+    if (existing.some((t) => t.slug === slug)) {
+      res.status(400).json({ error: `A template with the slug "${slug}" already exists.` });
+      return;
+    }
+    if (existing.some((t) => t.name.toLowerCase() === name.toLowerCase())) {
+      res.status(400).json({ error: `A template named "${name}" already exists.` });
       return;
     }
     const targetDir = join(baseDir, slug);
     if (existsSync(targetDir)) {
-      res.status(400).json({ error: `A template named "${slug}" already exists.` });
+      res.status(400).json({ error: `A template with the slug "${slug}" already exists.` });
       return;
     }
     try {
@@ -427,7 +630,15 @@ async function startServer(templatePath, port = 0, tenant = "") {
       writeFileSync(join(targetDir, "index.css"), BOILERPLATE_CSS);
       writeFileSync(
         join(targetDir, "template.json"),
-        JSON.stringify({ name: slug, fields: BOILERPLATE_FIELDS }, null, 2) + "\n"
+        JSON.stringify(
+          {
+            $schema: "https://docs.allegrocdp.com/template.schema.json",
+            name,
+            fields: BOILERPLATE_FIELDS
+          },
+          null,
+          2
+        ) + "\n"
       );
     } catch (err) {
       console.error("[allegro-preview] Failed to create template:", err);
@@ -435,7 +646,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
       return;
     }
     rescan();
-    res.status(201).json({ slug });
+    res.status(201).json({ slug, name });
   });
   app.get("/api/events", (req, res) => {
     res.setHeader("Content-Type", "text/event-stream");
@@ -451,6 +662,15 @@ async function startServer(templatePath, port = 0, tenant = "") {
     const slug = typeof req.query.slug === "string" ? req.query.slug : "";
     const tab = typeof req.query.tab === "string" ? req.query.tab : "standalone";
     const sdkParam = typeof req.query.sdk === "string" ? req.query.sdk : void 0;
+    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(tab)) {
+      res.status(404).send("Scenario not found");
+      return;
+    }
+    const scenario = resolveScenario(baseDir, tab);
+    if (!scenario) {
+      res.status(404).send("Scenario not found");
+      return;
+    }
     if (!slug) {
       res.status(400).send("Missing slug");
       return;
@@ -495,12 +715,12 @@ async function startServer(templatePath, port = 0, tenant = "") {
       css: templateFiles.css,
       js: templateFiles.js,
       fieldValues,
-      tab,
+      scenario,
       sdkUrl: effectiveSdkUrl,
       blockCookies,
       previewCss
     };
-    const rendered = tab === "standalone" ? standaloneShell(shellOptions) : articleShell(shellOptions);
+    const rendered = scenario.hostKind === "custom" ? customHostShell(shellOptions) : scenario.hostKind === "article" ? articleShell(shellOptions) : standaloneShell(shellOptions);
     res.setHeader("Cache-Control", "no-store");
     res.type("html").send(rendered);
   });
@@ -539,6 +759,17 @@ async function startServer(templatePath, port = 0, tenant = "") {
     broadcastReload();
   });
   const dirWatcher = chokidar.watch(baseDir, { depth: 1, ignoreInitial: true });
+  const scenariosWatcher = chokidar.watch(join(baseDir, SCENARIOS_DIRNAME), {
+    ignoreInitial: true
+  });
+  function rescanScenarios() {
+    customScenarios = scanCustomScenarios(baseDir);
+    console.log(`Scenarios updated: ${customScenarios.map((s) => s.id).join(", ") || "(none)"}`);
+    broadcastConfig();
+  }
+  scenariosWatcher.on("all", () => {
+    rescanScenarios();
+  });
   function rescan() {
     templates = scanTemplates(baseDir);
     console.log(`Templates updated: ${templates.map((t) => t.slug).join(", ") || "(none)"}`);

package/package.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://json.schemastore.org/package.json",
     "name": "@allegrocdp/preview",
-    "version": "0.1.0-dev.12",
+    "version": "0.1.0-dev.14",
     "description": "Local dev server for previewing Allegro templates",
     "type": "module",
     "bin": {

package/dist/client/assets/app-D1XS_DDX.js

@@ -1,14 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const a of document.querySelectorAll('link[rel="modulepreload"]'))l(a);new MutationObserver(a=>{for(const s of a)if(s.type==="childList")for(const o of s.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&l(o)}).observe(document,{childList:!0,subtree:!0});function n(a){const s={};return a.integrity&&(s.integrity=a.integrity),a.referrerPolicy&&(s.referrerPolicy=a.referrerPolicy),a.crossOrigin==="use-credentials"?s.credentials="include":a.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function l(a){if(a.ep)return;a.ep=!0;const s=n(a);fetch(a.href,s)}})();const te={full:0,desktop:1280,tablet:768,mobile:390};function ne(e){return te[e]}let u=[],d=null,N="standalone",y="full",L=null,E={},H,F=!0,T=null,f=null,h=null;const q=document.getElementById("template-nav"),g=document.getElementById("field-list"),m=document.getElementById("preview-area"),$=document.getElementById("tab-group"),M=document.getElementById("device-group"),j=document.getElementById("toolbar-badge"),le=document.getElementById("theme-toggle"),oe=document.getElementById("theme-icon-sun"),ae=document.getElementById("theme-icon-moon"),B=document.getElementById("tenant-input"),x=document.getElementById("tenant-status"),se=document.getElementById("new-template-btn"),J=document.getElementById("new-window-btn"),k=document.getElementById("create-modal-backdrop"),c=document.getElementById("modal-slug-input"),v=document.getElementById("modal-error"),ie=document.getElementById("modal-cancel-btn"),w=document.getElementById("modal-create-btn"),P=document.getElementById("block-cookies-checkbox"),V=document.getElementById("cookie-auth-area"),S=document.getElementById("cookie-auth-user"),R=document.getElementById("cookie-auth-hint"),ce=document.getElementById("cookie-clear-btn"),b=document.getElementById("jwt-modal-backdrop"),re=document.getElementById("jwt-payload-content"),de=document.getElementById("jwt-modal-close-btn");function W(e){document.documentElement.setAttribute("data-theme",e?"dark":"light"),oe.style.display=e?"none":"",ae.style.display=e?"":"none"}function ue(){const e=localStorage.getItem("allegro-preview-theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches;W(e?e==="dark":t)}le.addEventListener("click",()=>{const e=document.documentElement.getAttribute("data-theme")!=="dark";W(e),localStorage.setItem("allegro-preview-theme",e?"dark":"light")});function me(e){const t=e.trim();return t?(/^https?:\/\//.test(t)?t:`https://${t}`).replace(/\/+$/,"")+"/client.js":""}function G(e){const t=me(e);H=t||void 0,t?(x.className="tenant-active-badge",x.textContent=t):(x.className="tenant-hint",x.textContent="Loads /client.js on the preview page"),L&&p()}B.addEventListener("input",()=>{localStorage.setItem("allegro-preview-tenant",B.value),G(B.value)});function pe(e=""){const t=localStorage.getItem("allegro-preview-tenant"),n=e||t||"";n&&(B.value=n,e&&localStorage.setItem("allegro-preview-tenant",n),G(n))}const fe=[{name:"_ALLEGROT",label:"Session JWT",isJwt:!0},{name:"_ALLEGROD",label:"Device ID"},{name:"_ALLEGROS",label:"Session ID"}];function ge(e){const t=document.cookie.split("; ").find(n=>n.startsWith(e+"="));if(!t)return null;try{return decodeURIComponent(t.split("=").slice(1).join("="))}catch{return t.split("=").slice(1).join("=")}}function ve(e){try{const t=e.split(".");if(t.length!==3)return null;const n=t[1].replace(/-/g,"+").replace(/_/g,"/"),l=atob(n);return JSON.parse(l)}catch{return null}}function C(){const e=fe.map(t=>({...t,value:ge(t.name)})).filter(t=>t.value!==null);if(S.innerHTML="",e.length===0){S.style.display="none",R.style.display="";return}R.style.display="none",S.style.display="";for(const t of e){const n=document.createElement("div");n.className="cookie-row";const l=document.createElement("div");l.className="cookie-auth-dot";const a=document.createElement("div");a.className="cookie-row-info";const s=document.createElement("div");s.className="cookie-row-label",s.textContent=t.label;const o=document.createElement("div");if(o.className="cookie-row-value",o.textContent=t.value.length>24?t.value.slice(0,24)+"…":t.value,a.appendChild(s),a.appendChild(o),n.appendChild(l),n.appendChild(a),t.isJwt){const i=document.createElement("button");i.className="cookie-view-btn",i.textContent="Decode",i.onclick=()=>{const r=ve(t.value);re.textContent=r?JSON.stringify(r,null,2):t.value,b.classList.remove("hidden")},n.appendChild(i)}S.appendChild(n)}}function he(e){F=e,localStorage.setItem("allegro-preview-block-cookies",e?"true":"false"),V.style.display=e?"none":"",e?h&&(clearInterval(h),h=null):(C(),h||(h=setInterval(C,2e3))),L&&p()}function ye(){const t=localStorage.getItem("allegro-preview-block-cookies")!=="false";P.checked=t,F=t,V.style.display=t?"none":"",t||(C(),h=setInterval(C,2e3))}P.addEventListener("change",()=>{he(P.checked)});ce.addEventListener("click",()=>{const e=document.cookie.split("; ");for(const t of e){const n=t.split("=")[0];document.cookie=`${n}=; max-age=0; path=/`}C()});de.addEventListener("click",()=>{b.classList.add("hidden")});b.addEventListener("click",e=>{e.target===b&&b.classList.add("hidden")});function Ee(){const e=window.location.hash.slice(1);return e?decodeURIComponent(e):null}function we(e){history.replaceState(null,"",`#${encodeURIComponent(e)}`)}function be(){history.replaceState(null,"",window.location.pathname)}function z(e){$.querySelectorAll(".tab-btn").forEach(t=>{t.disabled=!e}),M.querySelectorAll(".device-btn").forEach(t=>{t.disabled=!e}),J.disabled=!e}$.addEventListener("click",e=>{const t=e.target.closest(".tab-btn");!t||t.disabled||(N=t.dataset.tab,$.querySelectorAll(".tab-btn").forEach(n=>n.classList.remove("active")),t.classList.add("active"),localStorage.setItem("allegro-preview-tab",N),p())});M.addEventListener("click",e=>{const t=e.target.closest(".device-btn");!t||t.disabled||(y=t.dataset.device,M.querySelectorAll(".device-btn").forEach(n=>n.classList.remove("active")),t.classList.add("active"),localStorage.setItem("allegro-preview-device",y),p())});function I(){q.innerHTML="";for(const e of u){const t=document.createElement("button");t.className="template-nav-item"+(e.slug===d?" active":""),t.innerHTML=`<span class="template-nav-dot"></span><span class="template-nav-name">${_(e.name)}</span>`,t.addEventListener("click",()=>void D(e.slug)),q.appendChild(t)}}async function D(e){d=e,we(e),I(),await U(e)}function K(){L=null,d=null,T=null,f=null,be(),I(),z(!1),j.textContent="No template selected",j.style.opacity="0.4",g.innerHTML='<p class="no-fields">Select a template to edit fields.</p>';const e=document.createElement("div");if(e.className="selector-screen",u.length===0){e.innerHTML=`
-            <div class="selector-empty">
-                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
-                <span>No templates found in this directory.</span>
-            </div>`,m.innerHTML="",m.appendChild(e);return}e.innerHTML=`
-        <div class="selector-eyebrow">Allegro Preview</div>
-        <h2 class="selector-heading">Choose a template</h2>
-        <p class="selector-sub">Select a template to start previewing.</p>
-        <div class="selector-grid" id="selector-grid"></div>`,m.innerHTML="",m.appendChild(e);const t=e.querySelector("#selector-grid");for(const n of u){const l=document.createElement("button");l.className="selector-card",l.innerHTML=`
-            <div class="selector-card-icon">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
-            </div>
-            <div class="selector-card-name">${_(n.name)}</div>
-            <div class="selector-card-slug">${_(n.slug)}</div>`,l.addEventListener("click",()=>void D(n.slug)),t.appendChild(l)}}const O=["text","number","checkbox","textarea"];function Y(e){if(typeof e!="object"||e===null)return!1;const t=e;return typeof t.slug=="string"&&t.slug.length>0&&O.includes(t.type)}function ke(e){if(typeof e!="object"||e===null)return`Invalid field: expected an object, got ${JSON.stringify(e)}.`;const t=e,n=[];if((typeof t.slug!="string"||t.slug.length===0)&&n.push('missing required "slug" property'),!O.includes(t.type)){const a=t.type!==void 0?`"${String(t.type)}"`:"none";n.push(`invalid type ${a} — valid types: ${O.join(", ")}`)}return`${typeof t.slug=="string"&&t.slug.length>0?`Field "${t.slug}"`:"Field"}: ${n.join("; ")}.`}function Ce(e){E={};for(const t of e)Y(t)&&(E[t.slug]=t.default_value??"")}function Le(e,t){if(g.innerHTML="",t){const n=document.createElement("div");n.className="field-error",n.textContent=`template.json parse error: ${t}`,g.appendChild(n);return}if(e.length===0){g.innerHTML='<p class="no-fields">No fields in template.json.</p>';return}for(const n of e){if(!Y(n)){const o=document.createElement("div");o.className="field-error",o.textContent=ke(n),g.appendChild(o);continue}const l=n;if(l.type==="checkbox"){const o=document.createElement("div");o.className="field-checkbox-row";const i=document.createElement("input");i.type="checkbox",i.id=`field-${l.slug}`,i.checked=l.default_value==="true"||l.default_value==="1",i.addEventListener("change",()=>{E[l.slug]=i.checked?"true":"false",p()});const r=document.createElement("label");r.className="field-label",r.htmlFor=`field-${l.slug}`,r.textContent=l.label||l.slug,o.appendChild(i),o.appendChild(r),g.appendChild(o);continue}const a=document.createElement("div");a.className="field-group";const s=document.createElement("label");if(s.className="field-label",s.htmlFor=`field-${l.slug}`,s.textContent=l.label||l.slug,a.appendChild(s),l.type==="textarea"){const o=document.createElement("textarea");o.className="field-input",o.id=`field-${l.slug}`,o.rows=3,o.value=l.default_value??"",o.addEventListener("input",()=>{E[l.slug]=o.value,p()}),a.appendChild(o)}else{const o=document.createElement("input");o.type=l.type==="number"?"number":"text",o.className="field-input",o.id=`field-${l.slug}`,o.value=l.default_value??"",o.addEventListener("input",()=>{E[l.slug]=o.value,p()}),a.appendChild(o)}g.appendChild(a)}}function Ie(){const e=new URLSearchParams;e.set("slug",d),e.set("tab",N),H&&e.set("sdk",H),F||e.set("blockCookies","false");for(const[t,n]of Object.entries(E))e.set(`f_${t}`,n);return`/preview?${e.toString()}`}function p(){if(!L||!d)return;const e=Ie();T=e;const t=ne(y),n=t===0;if(f){const i=f.parentElement,r=i.parentElement,ee=r.parentElement;ee.className=n?"preview-stage":"preview-stage preview-stage--breakpoint",r.style.width=n?"100%":"",i.style.width=n?"100%":`${t}px`,f.style.width=n?"100%":`${t}px`,f.style.maxHeight=y==="mobile"?"812px":"",f.src=e;return}m.innerHTML="";const l=document.createElement("div");l.className=n?"preview-stage":"preview-stage preview-stage--breakpoint";const a=document.createElement("div");a.className="preview-scaler";const s=document.createElement("div");s.className="preview-frame-wrapper";const o=document.createElement("iframe");o.style.height="calc(100vh - 48px)",n?(a.style.width="100%",s.style.width="100%",o.style.width="100%"):(s.style.width=`${t}px`,o.style.width=`${t}px`,y==="mobile"&&(o.style.maxHeight="812px")),o.src=e,s.appendChild(o),a.appendChild(s),l.appendChild(a),m.appendChild(l),f=o}async function U(e){try{const t=await fetch(`/api/template?slug=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const n=await t.json();L=n,j.textContent=`Template: ${n.name}`,j.style.opacity="1",z(!0),Ce(n.fields),Le(n.fields,n.fieldsParseError),p()}catch(t){console.error("[allegro-preview] Failed to load template:",t),m.innerHTML="";const n=document.createElement("div");n.style.padding="40px",n.style.color="var(--text-muted)",n.style.fontSize="13px",n.textContent=`Failed to load template "${e}".`,m.appendChild(n)}}async function xe(){const t=await(await fetch("/api/config")).json();u=t.templates,pe(t.tenant??"");const n=Ee(),l=n&&u.find(a=>a.slug===n)?n:null;l?(d=l,I(),await U(l)):K()}function Se(){const e=localStorage.getItem("allegro-preview-tab"),t=localStorage.getItem("allegro-preview-device");e&&["standalone","append","cut"].includes(e)&&(N=e,$.querySelectorAll(".tab-btn").forEach(n=>{n.classList.toggle("active",n.dataset.tab===e)})),t&&["full","desktop","tablet","mobile"].includes(t)&&(y=t,M.querySelectorAll(".device-btn").forEach(n=>{n.classList.toggle("active",n.dataset.device===t)}))}function Q(){const e=new EventSource("/api/events");e.addEventListener("reload",()=>{d&&U(d)}),e.addEventListener("config",()=>{Be()}),e.onerror=()=>{e.close(),setTimeout(Q,2e3)}}async function Be(){u=(await(await fetch("/api/config")).json()).templates,I(),d&&!u.find(n=>n.slug===d)&&K()}function _(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}const Ne=/^[a-z0-9]+(?:-[a-z0-9]+)*$/;function Te(){c.value="",v.textContent="",c.classList.remove("invalid"),w.disabled=!1,k.classList.remove("hidden"),c.focus()}function A(){k.classList.add("hidden")}function X(e){return e?Ne.test(e)?null:"Use lowercase letters, numbers, and hyphens only (e.g. my-template).":"Slug is required."}J.addEventListener("click",()=>{T&&window.open(T,"_blank")});se.addEventListener("click",Te);ie.addEventListener("click",A);k.addEventListener("click",e=>{e.target===k&&A()});document.addEventListener("keydown",e=>{e.key==="Escape"&&!k.classList.contains("hidden")&&A()});c.addEventListener("input",()=>{const e=X(c.value);e?(c.classList.add("invalid"),v.textContent=e):(c.classList.remove("invalid"),v.textContent="")});c.addEventListener("keydown",e=>{e.key==="Enter"&&Z()});w.addEventListener("click",()=>void Z());async function Z(){const e=c.value.trim(),t=X(e);if(t){c.classList.add("invalid"),v.textContent=t,c.focus();return}w.disabled=!0,v.textContent="";try{const n=await fetch("/api/template/create",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({slug:e})}),l=await n.json();if(!n.ok){v.textContent=l.error??"Failed to create template.",w.disabled=!1;return}A(),u=[...u,{slug:e,name:e}],I(),await D(e)}catch{v.textContent="Network error. Please try again.",w.disabled=!1}}ue();Se();ye();xe();Q();