@allegrocdp/preview 0.1.0-dev.11 → 0.1.0-dev.13

package/dist/cli.js

@@ -7,6 +7,8 @@ import { Command } from "commander";
 import chokidar from "chokidar";
 import express from "express";
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
+import { get as httpGet } from "http";
+import { get as httpsGet } from "https";
 import open from "open";
 import { basename, isAbsolute, join, relative, resolve } from "path";
 import { fileURLToPath } from "url";
@@ -25,6 +27,11 @@ window.__ALLEGRO_TEMPLATE_RESOLVER__ = async function (slug) {
   }
 };`;
 
+// 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">
@@ -125,7 +132,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" },
@@ -158,6 +165,60 @@ function normalizeTenantSdkUrl(raw) {
   const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
   return withProtocol.replace(/\/+$/, "") + "/client.js";
 }
+var previewCssCache = /* @__PURE__ */ new Map();
+var PREVIEW_CSS_TTL_MS = 6e4;
+function escapeStyle(css) {
+  return css.replace(/<\/(style)/gi, "<\\/$1");
+}
+function isLocalHost(hostname) {
+  const name = hostname.toLowerCase();
+  return name === "localhost" || name.endsWith(".localhost") || name.endsWith(".test") || name === "127.0.0.1" || name === "::1";
+}
+function getJson(target) {
+  return new Promise((resolve2, reject) => {
+    const handleResponse = (res) => {
+      const status = res.statusCode ?? 0;
+      if (status < 200 || status >= 300) {
+        res.resume();
+        reject(new Error(`HTTP ${status}`));
+        return;
+      }
+      let body = "";
+      res.setEncoding("utf-8");
+      res.on("data", (chunk) => body += chunk);
+      res.on("end", () => {
+        try {
+          resolve2(JSON.parse(body));
+        } catch (err) {
+          reject(err);
+        }
+      });
+    };
+    const req = target.protocol === "https:" ? httpsGet(target, { rejectUnauthorized: !isLocalHost(target.hostname) }, handleResponse) : httpGet(target, handleResponse);
+    req.on("error", reject);
+    req.setTimeout(5e3, () => req.destroy(new Error("Request timed out")));
+  });
+}
+async function fetchPreviewCss(sdkUrl) {
+  let endpoint;
+  try {
+    endpoint = new URL("/api/preview-css", sdkUrl);
+  } catch {
+    return "";
+  }
+  const cached = previewCssCache.get(endpoint.origin);
+  if (cached && Date.now() - cached.fetchedAt < PREVIEW_CSS_TTL_MS) {
+    return cached.css;
+  }
+  try {
+    const data = await getJson(endpoint);
+    const css = typeof data.css === "string" ? data.css : "";
+    previewCssCache.set(endpoint.origin, { css, fetchedAt: Date.now() });
+    return css;
+  } catch {
+    return cached?.css ?? "";
+  }
+}
 var COOKIE_NOOP_SCRIPT = `(function(){var _jar={};Object.defineProperty(document,'cookie',{configurable:true,get:function(){return Object.keys(_jar).map(function(k){return k+'='+_jar[k];}).join('; ');},set:function(str){var parts=str.split(';');var kv=parts[0].trim();var eq=kv.indexOf('=');var name=kv.slice(0,eq).trim();var val=kv.slice(eq+1).trim();var maxAge=null;for(var i=1;i<parts.length;i++){var p=parts[i].trim().toLowerCase();if(p.indexOf('max-age=')===0){maxAge=parseInt(p.split('=')[1],10);}}if(maxAge!==null&&maxAge<=0){delete _jar[name];}else{_jar[name]=val;}}});})();`;
 function buildPreviewData(options) {
   const json = JSON.stringify({
@@ -170,6 +231,9 @@ function buildPreviewData(options) {
   });
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
+function previewCssTag(css) {
+  return css ? `<style data-allegro-preview-css>${escapeStyle(css)}</style>` : "";
+}
 function standaloneShell(options) {
   const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
   return `<!DOCTYPE html>
@@ -184,6 +248,7 @@ function standaloneShell(options) {
     body { margin: 0; }
     [data-allegro-interaction] { display: block; }
   </style>
+  ${previewCssTag(options.previewCss)}
 </head>
 <body>
   <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
@@ -212,6 +277,7 @@ function articleShell(options) {
     p { margin: 0 0 1.1em; font-size: 1rem; overflow-wrap: break-word; }
     [data-allegro-interaction] { display: block; margin: 24px 0; }
   </style>
+  ${previewCssTag(options.previewCss)}
 </head>
 <body>
   <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
@@ -249,7 +315,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) };
   }
@@ -351,16 +419,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 {
@@ -369,7 +449,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);
@@ -377,7 +465,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");
@@ -389,7 +477,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
       sseClients.delete(res);
     });
   });
-  app.get("/preview", (req, res) => {
+  app.get("/preview", async (req, res) => {
     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;
@@ -397,6 +485,14 @@ async function startServer(templatePath, port = 0, tenant = "") {
       res.status(400).send("Missing slug");
       return;
     }
+    if (sdkParam !== void 0) {
+      try {
+        new URL(sdkParam);
+      } catch {
+        res.status(400).send("Invalid sdk URL");
+        return;
+      }
+    }
     if (slug !== "." && !templates.some((t) => t.slug === slug)) {
       res.status(404).send("Template not found");
       return;
@@ -422,6 +518,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
     }
     const effectiveSdkUrl = sdkParam ?? (tenant ? normalizeTenantSdkUrl(tenant) : void 0);
     const blockCookies = req.query.blockCookies !== "false";
+    const previewCss = effectiveSdkUrl ? await fetchPreviewCss(effectiveSdkUrl) : "";
     const shellOptions = {
       slug,
       html: templateFiles.html,
@@ -430,7 +527,8 @@ async function startServer(templatePath, port = 0, tenant = "") {
       fieldValues,
       tab,
       sdkUrl: effectiveSdkUrl,
-      blockCookies
+      blockCookies,
+      previewCss
     };
     const rendered = tab === "standalone" ? standaloneShell(shellOptions) : articleShell(shellOptions);
     res.setHeader("Cache-Control", "no-store");

package/dist/client/assets/app-B0ybFOKs.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 R(e){return e.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}const le={full:0,desktop:1280,tablet:768,mobile:390};function oe(e){return le[e]}let r=[],u=null,N="standalone",y="full",L=null,E={},H,_=!0,T=null,f=null,h=null;const U=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"),ae=document.getElementById("theme-toggle"),se=document.getElementById("theme-icon-sun"),ie=document.getElementById("theme-icon-moon"),B=document.getElementById("tenant-input"),x=document.getElementById("tenant-status"),ce=document.getElementById("new-template-btn"),V=document.getElementById("new-window-btn"),k=document.getElementById("create-modal-backdrop"),c=document.getElementById("modal-name-input"),W=document.getElementById("modal-slug-hint"),v=document.getElementById("modal-error"),re=document.getElementById("modal-cancel-btn"),w=document.getElementById("modal-create-btn"),P=document.getElementById("block-cookies-checkbox"),G=document.getElementById("cookie-auth-area"),S=document.getElementById("cookie-auth-user"),J=document.getElementById("cookie-auth-hint"),de=document.getElementById("cookie-clear-btn"),b=document.getElementById("jwt-modal-backdrop"),ue=document.getElementById("jwt-payload-content"),me=document.getElementById("jwt-modal-close-btn");function z(e){document.documentElement.setAttribute("data-theme",e?"dark":"light"),se.style.display=e?"none":"",ie.style.display=e?"":"none"}function pe(){const e=localStorage.getItem("allegro-preview-theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches;z(e?e==="dark":t)}ae.addEventListener("click",()=>{const e=document.documentElement.getAttribute("data-theme")!=="dark";z(e),localStorage.setItem("allegro-preview-theme",e?"dark":"light")});function fe(e){const t=e.trim();return t?(/^https?:\/\//.test(t)?t:`https://${t}`).replace(/\/+$/,"")+"/client.js":""}function K(e){const t=fe(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),K(B.value)});function ge(e=""){const t=localStorage.getItem("allegro-preview-tenant"),n=e||t||"";n&&(B.value=n,e&&localStorage.setItem("allegro-preview-tenant",n),K(n))}const ve=[{name:"_ALLEGROT",label:"Session JWT",isJwt:!0},{name:"_ALLEGROD",label:"Device ID"},{name:"_ALLEGROS",label:"Session ID"}];function he(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 ye(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=ve.map(t=>({...t,value:he(t.name)})).filter(t=>t.value!==null);if(S.innerHTML="",e.length===0){S.style.display="none",J.style.display="";return}J.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 d=ye(t.value);ue.textContent=d?JSON.stringify(d,null,2):t.value,b.classList.remove("hidden")},n.appendChild(i)}S.appendChild(n)}}function Ee(e){_=e,localStorage.setItem("allegro-preview-block-cookies",e?"true":"false"),G.style.display=e?"none":"",e?h&&(clearInterval(h),h=null):(C(),h||(h=setInterval(C,2e3))),L&&p()}function we(){const t=localStorage.getItem("allegro-preview-block-cookies")!=="false";P.checked=t,_=t,G.style.display=t?"none":"",t||(C(),h=setInterval(C,2e3))}P.addEventListener("change",()=>{Ee(P.checked)});de.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()});me.addEventListener("click",()=>{b.classList.add("hidden")});b.addEventListener("click",e=>{e.target===b&&b.classList.add("hidden")});function be(){const e=window.location.hash.slice(1);return e?decodeURIComponent(e):null}function ke(e){history.replaceState(null,"",`#${encodeURIComponent(e)}`)}function Ce(){history.replaceState(null,"",window.location.pathname)}function Y(e){$.querySelectorAll(".tab-btn").forEach(t=>{t.disabled=!e}),M.querySelectorAll(".device-btn").forEach(t=>{t.disabled=!e}),V.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(){U.innerHTML="";for(const e of r){const t=document.createElement("button");t.className="template-nav-item"+(e.slug===u?" active":""),t.innerHTML=`<span class="template-nav-dot"></span><span class="template-nav-name">${F(e.name)}</span>`,t.addEventListener("click",()=>void D(e.slug)),U.appendChild(t)}}async function D(e){u=e,ke(e),I(),await q(e)}function Q(){L=null,u=null,T=null,f=null,Ce(),I(),Y(!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",r.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 r){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">${F(n.name)}</div>
+            <div class="selector-card-slug">${F(n.slug)}</div>`,l.addEventListener("click",()=>void D(n.slug)),t.appendChild(l)}}const O=["text","number","checkbox","textarea"];function X(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 Le(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 Ie(e){E={};for(const t of e)X(t)&&(E[t.slug]=t.default_value??"")}function xe(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(!X(n)){const o=document.createElement("div");o.className="field-error",o.textContent=Le(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 d=document.createElement("label");d.className="field-label",d.htmlFor=`field-${l.slug}`,d.textContent=l.label||l.slug,o.appendChild(i),o.appendChild(d),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 Se(){const e=new URLSearchParams;e.set("slug",u),e.set("tab",N),H&&e.set("sdk",H),_||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||!u)return;const e=Se();T=e;const t=oe(y),n=t===0;if(f){const i=f.parentElement,d=i.parentElement,ne=d.parentElement;ne.className=n?"preview-stage":"preview-stage preview-stage--breakpoint",d.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 q(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",Y(!0),Ie(n.fields),xe(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 Be(){const t=await(await fetch("/api/config")).json();r=t.templates,ge(t.tenant??"");const n=be(),l=n&&r.find(a=>a.slug===n)?n:null;l?(u=l,I(),await q(l)):Q()}function Ne(){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 Z(){const e=new EventSource("/api/events");e.addEventListener("reload",()=>{u&&q(u)}),e.addEventListener("config",()=>{Te()}),e.onerror=()=>{e.close(),setTimeout(Z,2e3)}}async function Te(){r=(await(await fetch("/api/config")).json()).templates,I(),u&&!r.find(n=>n.slug===u)&&Q()}function F(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function $e(){c.value="",v.textContent="",W.textContent="",c.classList.remove("invalid"),w.disabled=!0,k.classList.remove("hidden"),c.focus()}function A(){k.classList.add("hidden")}function ee(e){if(!e)return"Template name is required.";const t=R(e);return t?r.some(n=>n.slug===t)?`A template with the slug "${t}" already exists.`:r.some(n=>n.name.toLowerCase()===e.toLowerCase())?`A template named "${e}" already exists.`:null:"Template name must contain at least one letter or number."}V.addEventListener("click",()=>{T&&window.open(T,"_blank")});ce.addEventListener("click",$e);re.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=c.value.trim(),t=R(e);W.textContent=t?`Slug: ${t}`:"";const n=ee(e);w.disabled=n!==null,n&&e?(c.classList.add("invalid"),v.textContent=n):(c.classList.remove("invalid"),v.textContent="")});c.addEventListener("keydown",e=>{e.key==="Enter"&&te()});w.addEventListener("click",()=>void te());async function te(){const e=c.value.trim(),t=ee(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({name:e})}),l=await n.json();if(!n.ok||!l.slug){v.textContent=l.error??"Failed to create template.",w.disabled=!1;return}A(),r=[...r,{slug:l.slug,name:l.name??e}],I(),await D(l.slug)}catch{v.textContent="Network error. Please try again.",w.disabled=!1}}pe();Ne();we();Be();Z();

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-B0ybFOKs.js"></script>
     </head>
     <body>
         <aside class="sidebar">
@@ -1250,15 +1256,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/server.js

@@ -4,6 +4,8 @@
 import chokidar from "chokidar";
 import express from "express";
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
+import { get as httpGet } from "http";
+import { get as httpsGet } from "https";
 import open from "open";
 import { basename, isAbsolute, join, relative, resolve } from "path";
 import { fileURLToPath } from "url";
@@ -22,6 +24,11 @@ window.__ALLEGRO_TEMPLATE_RESOLVER__ = async function (slug) {
   }
 };`;
 
+// 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">
@@ -122,7 +129,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" },
@@ -155,6 +162,60 @@ function normalizeTenantSdkUrl(raw) {
   const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
   return withProtocol.replace(/\/+$/, "") + "/client.js";
 }
+var previewCssCache = /* @__PURE__ */ new Map();
+var PREVIEW_CSS_TTL_MS = 6e4;
+function escapeStyle(css) {
+  return css.replace(/<\/(style)/gi, "<\\/$1");
+}
+function isLocalHost(hostname) {
+  const name = hostname.toLowerCase();
+  return name === "localhost" || name.endsWith(".localhost") || name.endsWith(".test") || name === "127.0.0.1" || name === "::1";
+}
+function getJson(target) {
+  return new Promise((resolve2, reject) => {
+    const handleResponse = (res) => {
+      const status = res.statusCode ?? 0;
+      if (status < 200 || status >= 300) {
+        res.resume();
+        reject(new Error(`HTTP ${status}`));
+        return;
+      }
+      let body = "";
+      res.setEncoding("utf-8");
+      res.on("data", (chunk) => body += chunk);
+      res.on("end", () => {
+        try {
+          resolve2(JSON.parse(body));
+        } catch (err) {
+          reject(err);
+        }
+      });
+    };
+    const req = target.protocol === "https:" ? httpsGet(target, { rejectUnauthorized: !isLocalHost(target.hostname) }, handleResponse) : httpGet(target, handleResponse);
+    req.on("error", reject);
+    req.setTimeout(5e3, () => req.destroy(new Error("Request timed out")));
+  });
+}
+async function fetchPreviewCss(sdkUrl) {
+  let endpoint;
+  try {
+    endpoint = new URL("/api/preview-css", sdkUrl);
+  } catch {
+    return "";
+  }
+  const cached = previewCssCache.get(endpoint.origin);
+  if (cached && Date.now() - cached.fetchedAt < PREVIEW_CSS_TTL_MS) {
+    return cached.css;
+  }
+  try {
+    const data = await getJson(endpoint);
+    const css = typeof data.css === "string" ? data.css : "";
+    previewCssCache.set(endpoint.origin, { css, fetchedAt: Date.now() });
+    return css;
+  } catch {
+    return cached?.css ?? "";
+  }
+}
 var COOKIE_NOOP_SCRIPT = `(function(){var _jar={};Object.defineProperty(document,'cookie',{configurable:true,get:function(){return Object.keys(_jar).map(function(k){return k+'='+_jar[k];}).join('; ');},set:function(str){var parts=str.split(';');var kv=parts[0].trim();var eq=kv.indexOf('=');var name=kv.slice(0,eq).trim();var val=kv.slice(eq+1).trim();var maxAge=null;for(var i=1;i<parts.length;i++){var p=parts[i].trim().toLowerCase();if(p.indexOf('max-age=')===0){maxAge=parseInt(p.split('=')[1],10);}}if(maxAge!==null&&maxAge<=0){delete _jar[name];}else{_jar[name]=val;}}});})();`;
 function buildPreviewData(options) {
   const json = JSON.stringify({
@@ -167,6 +228,9 @@ function buildPreviewData(options) {
   });
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
+function previewCssTag(css) {
+  return css ? `<style data-allegro-preview-css>${escapeStyle(css)}</style>` : "";
+}
 function standaloneShell(options) {
   const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
   return `<!DOCTYPE html>
@@ -181,6 +245,7 @@ function standaloneShell(options) {
     body { margin: 0; }
     [data-allegro-interaction] { display: block; }
   </style>
+  ${previewCssTag(options.previewCss)}
 </head>
 <body>
   <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
@@ -209,6 +274,7 @@ function articleShell(options) {
     p { margin: 0 0 1.1em; font-size: 1rem; overflow-wrap: break-word; }
     [data-allegro-interaction] { display: block; margin: 24px 0; }
   </style>
+  ${previewCssTag(options.previewCss)}
 </head>
 <body>
   <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
@@ -246,7 +312,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) };
   }
@@ -348,16 +416,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 {
@@ -366,7 +446,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);
@@ -374,7 +462,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");
@@ -386,7 +474,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
       sseClients.delete(res);
     });
   });
-  app.get("/preview", (req, res) => {
+  app.get("/preview", async (req, res) => {
     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;
@@ -394,6 +482,14 @@ async function startServer(templatePath, port = 0, tenant = "") {
       res.status(400).send("Missing slug");
       return;
     }
+    if (sdkParam !== void 0) {
+      try {
+        new URL(sdkParam);
+      } catch {
+        res.status(400).send("Invalid sdk URL");
+        return;
+      }
+    }
     if (slug !== "." && !templates.some((t) => t.slug === slug)) {
       res.status(404).send("Template not found");
       return;
@@ -419,6 +515,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
     }
     const effectiveSdkUrl = sdkParam ?? (tenant ? normalizeTenantSdkUrl(tenant) : void 0);
     const blockCookies = req.query.blockCookies !== "false";
+    const previewCss = effectiveSdkUrl ? await fetchPreviewCss(effectiveSdkUrl) : "";
     const shellOptions = {
       slug,
       html: templateFiles.html,
@@ -427,7 +524,8 @@ async function startServer(templatePath, port = 0, tenant = "") {
       fieldValues,
       tab,
       sdkUrl: effectiveSdkUrl,
-      blockCookies
+      blockCookies,
+      previewCss
     };
     const rendered = tab === "standalone" ? standaloneShell(shellOptions) : articleShell(shellOptions);
     res.setHeader("Cache-Control", "no-store");
@@ -522,5 +620,6 @@ allegro-preview \u2192 ${url}
   void open(url);
 }
 export {
+  escapeStyle,
   startServer
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://json.schemastore.org/package.json",
     "name": "@allegrocdp/preview",
-    "version": "0.1.0-dev.11",
+    "version": "0.1.0-dev.13",
     "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();