npm - @allegrocdp/preview - Versions diffs - 0.1.0-dev.6 → 0.1.0-dev.7 - Mend

@allegrocdp/preview 0.1.0-dev.6 → 0.1.0-dev.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/cli.js +156 -2
package/dist/client/assets/app-D1XS_DDX.js +14 -0
package/dist/client/index.html +251 -1
package/dist/client/preview-client.js +1 -0
package/dist/server.js +156 -2
package/package.json +2 -2
package/dist/client/assets/index-CDDVjT8Y.js +0 -137

package/dist/cli.js CHANGED Viewed

@@ -116,6 +116,101 @@ var BOILERPLATE_FIELDS = [
   { slug: "button_text", label: "Button text", type: "text", default_value: "Subscribe" },
   { slug: "privacy_note", label: "Privacy note", type: "text", default_value: "No spam. Unsubscribe anytime." }
 ];
+var ARTICLE_PARAGRAPHS = [
+  "The city council voted unanimously Tuesday to approve a sweeping new infrastructure plan that would reshape public transit routes across the metropolitan area over the next decade.",
+  "Mayor Jordan Ellison called the decision a turning point for how the region thinks about getting around, noting that similar investments in peer cities have led to measurable reductions in traffic congestion and improved air quality.",
+  "The plan includes upgrades to 14 existing bus rapid transit lines, the introduction of three new light-rail corridors connecting the downtown core to outlying neighborhoods, and dedicated cycling infrastructure along six major arterials.",
+  "Critics, however, warn that the projected cost of $2.4 billion may be optimistic. Independent analysts suggest the final figure could climb to $3.8 billion once land acquisition, labor, and contingency costs are factored in over the full construction timeline.",
+  "Council member Dana Reyes, who voted in favor, acknowledged the fiscal concern but argued that inaction carries its own price, noting that congestion costs residents and businesses hundreds of millions in lost productivity each year.",
+  "Environmental groups praised the announcement, saying expanded transit capacity is essential to meet the stated goal of reducing transportation emissions by 45 percent before 2035.",
+  "Public comment sessions are scheduled for next month at community centers in all twelve districts. Construction is expected to begin no sooner than mid-next year, pending environmental review and final design approvals."
+];
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/>/g, "&gt;");
+}
+function sdkScriptTag(sdkUrl) {
+  if (!sdkUrl) {
+    return "";
+  }
+  return `<script src="${escapeAttr(sdkUrl)}" data-api-url="https://${new URL(sdkUrl).host}"></script>`;
+}
+function normalizeTenantSdkUrl(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) {
+    return "";
+  }
+  const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
+  return withProtocol.replace(/\/+$/, "") + "/client.js";
+}
+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({
+    slug: options.slug,
+    html: options.html,
+    css: options.css,
+    js: options.js,
+    fieldValues: options.fieldValues,
+    tab: options.tab
+  });
+  return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
+}
+function standaloneShell(options) {
+  const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>window.__ALLEGRO_PREVIEW__ = true; localStorage.setItem('allegro_debug', 'true');</script>
+  ${cookieScript}
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; }
+    [data-allegro-interaction] { display: block; }
+  </style>
+</head>
+<body>
+  <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
+  ${sdkScriptTag(options.sdkUrl)}
+  <script src="/preview-client.js"></script>
+</body>
+</html>`;
+}
+function articleShell(options) {
+  const paras = ARTICLE_PARAGRAPHS.map((p) => `<p>${p}</p>`).join("\n    ");
+  const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>window.__ALLEGRO_PREVIEW__ = true; localStorage.setItem('allegro_debug', 'true');</script>
+  ${cookieScript}
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body { font-family: Georgia, 'Times New Roman', serif; background: #fff; color: #111;
+           max-width: 680px; margin: 0 auto; padding: 32px 24px 64px; line-height: 1.75;
+           -webkit-font-smoothing: antialiased; }
+    h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 6px; font-weight: 700; }
+    .meta { color: #6b7280; font-size: 0.82rem; font-family: system-ui, sans-serif; margin-bottom: 24px; }
+    p { margin: 0 0 1.1em; font-size: 1rem; overflow-wrap: break-word; }
+    [data-allegro-interaction] { display: block; margin: 24px 0; }
+  </style>
+</head>
+<body>
+  <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
+  <header>
+    <h1>Council Approves Decade-Long Transit Overhaul</h1>
+    <p class="meta">By Staff Reporter &nbsp;&middot;&nbsp; March 14, 2026</p>
+  </header>
+  <article id="allegro-preview-article">
+    ${paras}
+  </article>
+  ${sdkScriptTag(options.sdkUrl)}
+  <script src="/preview-client.js"></script>
+</body>
+</html>`;
+}
 var sseClients = /* @__PURE__ */ new Set();
 function broadcast(event) {
   for (const client of sseClients) {
@@ -168,6 +263,11 @@ function scanTemplates(baseDir) {
   }
   return results;
 }
+var templateFilesCache = /* @__PURE__ */ new Map();
+function invalidateTemplateCache(filePath) {
+  const dir = filePath.replace(/[/\\][^/\\]+$/, "");
+  templateFilesCache.delete(dir);
+}
 function readTemplateFiles(dir) {
   const read = (filename) => {
     const filePath = join(dir, filename);
@@ -186,7 +286,7 @@ function readTemplateFiles(dir) {
       fieldsParseError = err instanceof Error ? err.message : "Invalid JSON in template.json";
     }
   }
-  return {
+  const files = {
     html: read("index.html"),
     css: read("index.css"),
     js: read("index.js"),
@@ -194,6 +294,11 @@ function readTemplateFiles(dir) {
     name,
     fieldsParseError
   };
+  templateFilesCache.set(dir, files);
+  return files;
+}
+function readTemplateFilesCached(dir) {
+  return templateFilesCache.get(dir) ?? readTemplateFiles(dir);
 }
 async function startServer(templatePath, port = 0, tenant = "") {
   const baseDir = resolve(process.cwd(), templatePath);
@@ -226,7 +331,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
       res.status(404).json({ error: "Template not found" });
       return;
     }
-    res.json(readTemplateFiles(resolvedDir));
+    res.json(readTemplateFilesCached(resolvedDir));
   });
   app.post("/api/template/create", express.json(), (req, res) => {
     const body = req.body;
@@ -268,6 +373,53 @@ async function startServer(templatePath, port = 0, tenant = "") {
       sseClients.delete(res);
     });
   });
+  app.get("/preview", (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;
+    if (!slug) {
+      res.status(400).send("Missing slug");
+      return;
+    }
+    if (slug !== "." && !templates.some((t) => t.slug === slug)) {
+      res.status(404).send("Template not found");
+      return;
+    }
+    const targetDir = slug === "." ? baseDir : join(baseDir, slug);
+    const resolvedBaseDir = resolve(baseDir);
+    const resolvedDir = resolve(targetDir);
+    const relativePath = relative(resolvedBaseDir, resolvedDir);
+    if (relativePath.startsWith("..") || isAbsolute(relativePath)) {
+      res.status(400).send("Invalid template path");
+      return;
+    }
+    if (!existsSync(resolvedDir) || !isTemplateDir(resolvedDir)) {
+      res.status(404).send("Template not found");
+      return;
+    }
+    const templateFiles = readTemplateFilesCached(resolvedDir);
+    const fieldValues = [];
+    for (const [key, val] of Object.entries(req.query)) {
+      if (key.startsWith("f_") && typeof val === "string") {
+        fieldValues.push({ slug: key.slice(2), value: val });
+      }
+    }
+    const effectiveSdkUrl = sdkParam ?? (tenant ? normalizeTenantSdkUrl(tenant) : void 0);
+    const blockCookies = req.query.blockCookies !== "false";
+    const shellOptions = {
+      slug,
+      html: templateFiles.html,
+      css: templateFiles.css,
+      js: templateFiles.js,
+      fieldValues,
+      tab,
+      sdkUrl: effectiveSdkUrl,
+      blockCookies
+    };
+    const rendered = tab === "standalone" ? standaloneShell(shellOptions) : articleShell(shellOptions);
+    res.setHeader("Cache-Control", "no-store");
+    res.type("html").send(rendered);
+  });
   const indexHtmlPath = join(clientDistDir, "index.html");
   app.get("/*path", (_req, res) => {
     if (existsSync(indexHtmlPath)) {
@@ -288,10 +440,12 @@ async function startServer(templatePath, port = 0, tenant = "") {
   );
   fileWatcher.on("change", (changedPath) => {
     console.log(`Changed: ${changedPath}`);
+    invalidateTemplateCache(changedPath);
     broadcastReload();
   });
   fileWatcher.on("add", (addedPath) => {
     console.log(`Added: ${addedPath}`);
+    invalidateTemplateCache(addedPath);
     if (basename(addedPath) === "index.html") {
       rescan();
     }

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

@@ -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)}})();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();

package/dist/client/index.html CHANGED Viewed

@@ -457,6 +457,195 @@
                 background: #4ade80;
             }
+            /* Cookies section */
+            .cookie-section-wrap {
+                padding: 2px 10px 10px;
+            }
+            .cookie-checkbox-row {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                margin-bottom: 6px;
+            }
+            .cookie-checkbox-row input[type='checkbox'] {
+                width: 14px;
+                height: 14px;
+                accent-color: var(--sb-accent);
+                flex-shrink: 0;
+                cursor: pointer;
+            }
+            .cookie-checkbox-label {
+                font-size: 12px;
+                color: var(--sb-text);
+                cursor: pointer;
+            }
+            .cookie-auth-area {
+                margin-top: 6px;
+            }
+            .cookie-auth-hint {
+                font-size: 10px;
+                color: var(--sb-label);
+                padding: 0 2px;
+            }
+            .cookie-list {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                margin-bottom: 5px;
+            }
+            .cookie-row {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                padding: 5px 7px;
+                background: rgba(74, 222, 128, 0.08);
+                border: 1px solid rgba(74, 222, 128, 0.2);
+                border-radius: 5px;
+            }
+            .cookie-auth-dot {
+                width: 5px;
+                height: 5px;
+                border-radius: 50%;
+                background: #4ade80;
+                flex-shrink: 0;
+            }
+            .cookie-row-info {
+                flex: 1;
+                min-width: 0;
+            }
+            .cookie-row-label {
+                font-size: 10px;
+                font-weight: 600;
+                color: var(--sb-label);
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+            }
+            .cookie-row-value {
+                font-size: 11px;
+                color: var(--sb-text-active);
+                font-family: 'SF Mono', 'Fira Code', monospace;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .cookie-view-btn {
+                background: none;
+                border: 1px solid var(--sb-border);
+                border-radius: 4px;
+                padding: 2px 6px;
+                font-size: 10px;
+                font-family: inherit;
+                color: var(--sb-text);
+                cursor: pointer;
+                white-space: nowrap;
+                transition:
+                    color 0.12s,
+                    border-color 0.12s;
+            }
+            .cookie-view-btn:hover {
+                color: var(--sb-text-active);
+                border-color: var(--sb-accent);
+            }
+            .cookie-clear-btn {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                background: none;
+                border: 1px solid var(--sb-border);
+                border-radius: 5px;
+                padding: 4px 8px;
+                font-size: 11px;
+                font-family: inherit;
+                color: var(--sb-text);
+                cursor: pointer;
+                width: 100%;
+                justify-content: center;
+                margin-top: 4px;
+                transition:
+                    color 0.12s,
+                    border-color 0.12s,
+                    background 0.12s;
+            }
+            .cookie-clear-btn:hover {
+                color: #f87171;
+                border-color: rgba(248, 113, 113, 0.4);
+                background: rgba(248, 113, 113, 0.05);
+            }
+            /* JWT payload modal */
+            .jwt-modal {
+                background: var(--sb-bg);
+                border: 1px solid rgba(255, 255, 255, 0.12);
+                border-radius: 10px;
+                padding: 20px;
+                width: 480px;
+                max-width: 90vw;
+                max-height: 80vh;
+                display: flex;
+                flex-direction: column;
+                box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+            }
+            .jwt-modal-header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 12px;
+            }
+            .jwt-modal-title {
+                font-size: 13px;
+                font-weight: 600;
+                color: var(--sb-text-active);
+            }
+            .jwt-modal-close {
+                background: none;
+                border: 1px solid var(--sb-border);
+                border-radius: 5px;
+                padding: 3px 7px;
+                font-size: 12px;
+                font-family: inherit;
+                color: var(--sb-text);
+                cursor: pointer;
+                transition: color 0.12s;
+            }
+            .jwt-modal-close:hover {
+                color: var(--sb-text-active);
+            }
+            .jwt-payload {
+                flex: 1;
+                overflow-y: auto;
+                background: var(--sb-input-bg);
+                border: 1px solid var(--sb-input-border);
+                border-radius: 6px;
+                padding: 10px 12px;
+                font-size: 11px;
+                font-family: 'SF Mono', 'Fira Code', monospace;
+                color: var(--sb-text-active);
+                white-space: pre;
+                line-height: 1.6;
+            }
             /* Fields section */
             .fields-scroll {
@@ -819,7 +1008,7 @@
                 display: block;
             }
         </style>
-      <script type="module" crossorigin src="/assets/index-CDDVjT8Y.js"></script>
+      <script type="module" crossorigin src="/assets/app-D1XS_DDX.js"></script>
     </head>
     <body>
         <aside class="sidebar">
@@ -901,6 +1090,39 @@
                 <div class="sb-divider"></div>
+                <div class="sb-section">
+                    <div class="sb-section-label">Cookies</div>
+                    <div class="cookie-section-wrap">
+                        <div class="cookie-checkbox-row">
+                            <input type="checkbox" id="block-cookies-checkbox" checked />
+                            <label class="cookie-checkbox-label" for="block-cookies-checkbox">Block cookies</label>
+                        </div>
+                        <div id="cookie-auth-area" class="cookie-auth-area" style="display: none">
+                            <div id="cookie-auth-user" class="cookie-list" style="display: none"></div>
+                            <div id="cookie-auth-hint" class="cookie-auth-hint">No session cookie found.</div>
+                            <button class="cookie-clear-btn" id="cookie-clear-btn">
+                                <svg
+                                    width="10"
+                                    height="10"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <polyline points="3 6 5 6 21 6"></polyline>
+                                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
+                                    <path d="M10 11v6M14 11v6"></path>
+                                </svg>
+                                Clear cookies
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="sb-divider"></div>
                 <div class="sb-section-label" style="padding-top: 12px">Fields</div>
                 <div class="fields-scroll" id="field-list">
                     <p class="no-fields">Select a template to edit fields.</p>
@@ -985,11 +1207,39 @@
                         Mobile
                     </button>
                 </div>
+                <div class="toolbar-sep"></div>
+                <button class="device-btn" id="new-window-btn" disabled title="Open in new window">
+                    <svg
+                        width="13"
+                        height="13"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                        <polyline points="15 3 21 3 21 9" />
+                        <line x1="10" y1="14" x2="21" y2="3" />
+                    </svg>
+                    New Window
+                </button>
             </div>
             <div class="preview-area" id="preview-area"></div>
         </div>
+        <div class="modal-backdrop hidden" id="jwt-modal-backdrop">
+            <div class="jwt-modal" role="dialog" aria-modal="true" aria-labelledby="jwt-modal-title">
+                <div class="jwt-modal-header">
+                    <div class="jwt-modal-title" id="jwt-modal-title">JWT Payload</div>
+                    <button class="jwt-modal-close" id="jwt-modal-close-btn">Close</button>
+                </div>
+                <pre class="jwt-payload" id="jwt-payload-content"></pre>
+            </div>
+        </div>
         <div class="modal-backdrop hidden" id="create-modal-backdrop">
             <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
                 <div class="modal-title" id="modal-title">New Template</div>

package/dist/client/preview-client.js ADDED Viewed

@@ -0,0 +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)})});

package/dist/server.js CHANGED Viewed

@@ -113,6 +113,101 @@ var BOILERPLATE_FIELDS = [
   { slug: "button_text", label: "Button text", type: "text", default_value: "Subscribe" },
   { slug: "privacy_note", label: "Privacy note", type: "text", default_value: "No spam. Unsubscribe anytime." }
 ];
+var ARTICLE_PARAGRAPHS = [
+  "The city council voted unanimously Tuesday to approve a sweeping new infrastructure plan that would reshape public transit routes across the metropolitan area over the next decade.",
+  "Mayor Jordan Ellison called the decision a turning point for how the region thinks about getting around, noting that similar investments in peer cities have led to measurable reductions in traffic congestion and improved air quality.",
+  "The plan includes upgrades to 14 existing bus rapid transit lines, the introduction of three new light-rail corridors connecting the downtown core to outlying neighborhoods, and dedicated cycling infrastructure along six major arterials.",
+  "Critics, however, warn that the projected cost of $2.4 billion may be optimistic. Independent analysts suggest the final figure could climb to $3.8 billion once land acquisition, labor, and contingency costs are factored in over the full construction timeline.",
+  "Council member Dana Reyes, who voted in favor, acknowledged the fiscal concern but argued that inaction carries its own price, noting that congestion costs residents and businesses hundreds of millions in lost productivity each year.",
+  "Environmental groups praised the announcement, saying expanded transit capacity is essential to meet the stated goal of reducing transportation emissions by 45 percent before 2035.",
+  "Public comment sessions are scheduled for next month at community centers in all twelve districts. Construction is expected to begin no sooner than mid-next year, pending environmental review and final design approvals."
+];
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/>/g, "&gt;");
+}
+function sdkScriptTag(sdkUrl) {
+  if (!sdkUrl) {
+    return "";
+  }
+  return `<script src="${escapeAttr(sdkUrl)}" data-api-url="https://${new URL(sdkUrl).host}"></script>`;
+}
+function normalizeTenantSdkUrl(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) {
+    return "";
+  }
+  const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
+  return withProtocol.replace(/\/+$/, "") + "/client.js";
+}
+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({
+    slug: options.slug,
+    html: options.html,
+    css: options.css,
+    js: options.js,
+    fieldValues: options.fieldValues,
+    tab: options.tab
+  });
+  return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
+}
+function standaloneShell(options) {
+  const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>window.__ALLEGRO_PREVIEW__ = true; localStorage.setItem('allegro_debug', 'true');</script>
+  ${cookieScript}
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; }
+    [data-allegro-interaction] { display: block; }
+  </style>
+</head>
+<body>
+  <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
+  ${sdkScriptTag(options.sdkUrl)}
+  <script src="/preview-client.js"></script>
+</body>
+</html>`;
+}
+function articleShell(options) {
+  const paras = ARTICLE_PARAGRAPHS.map((p) => `<p>${p}</p>`).join("\n    ");
+  const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>window.__ALLEGRO_PREVIEW__ = true; localStorage.setItem('allegro_debug', 'true');</script>
+  ${cookieScript}
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body { font-family: Georgia, 'Times New Roman', serif; background: #fff; color: #111;
+           max-width: 680px; margin: 0 auto; padding: 32px 24px 64px; line-height: 1.75;
+           -webkit-font-smoothing: antialiased; }
+    h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 6px; font-weight: 700; }
+    .meta { color: #6b7280; font-size: 0.82rem; font-family: system-ui, sans-serif; margin-bottom: 24px; }
+    p { margin: 0 0 1.1em; font-size: 1rem; overflow-wrap: break-word; }
+    [data-allegro-interaction] { display: block; margin: 24px 0; }
+  </style>
+</head>
+<body>
+  <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
+  <header>
+    <h1>Council Approves Decade-Long Transit Overhaul</h1>
+    <p class="meta">By Staff Reporter &nbsp;&middot;&nbsp; March 14, 2026</p>
+  </header>
+  <article id="allegro-preview-article">
+    ${paras}
+  </article>
+  ${sdkScriptTag(options.sdkUrl)}
+  <script src="/preview-client.js"></script>
+</body>
+</html>`;
+}
 var sseClients = /* @__PURE__ */ new Set();
 function broadcast(event) {
   for (const client of sseClients) {
@@ -165,6 +260,11 @@ function scanTemplates(baseDir) {
   }
   return results;
 }
+var templateFilesCache = /* @__PURE__ */ new Map();
+function invalidateTemplateCache(filePath) {
+  const dir = filePath.replace(/[/\\][^/\\]+$/, "");
+  templateFilesCache.delete(dir);
+}
 function readTemplateFiles(dir) {
   const read = (filename) => {
     const filePath = join(dir, filename);
@@ -183,7 +283,7 @@ function readTemplateFiles(dir) {
       fieldsParseError = err instanceof Error ? err.message : "Invalid JSON in template.json";
     }
   }
-  return {
+  const files = {
     html: read("index.html"),
     css: read("index.css"),
     js: read("index.js"),
@@ -191,6 +291,11 @@ function readTemplateFiles(dir) {
     name,
     fieldsParseError
   };
+  templateFilesCache.set(dir, files);
+  return files;
+}
+function readTemplateFilesCached(dir) {
+  return templateFilesCache.get(dir) ?? readTemplateFiles(dir);
 }
 async function startServer(templatePath, port = 0, tenant = "") {
   const baseDir = resolve(process.cwd(), templatePath);
@@ -223,7 +328,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
       res.status(404).json({ error: "Template not found" });
       return;
     }
-    res.json(readTemplateFiles(resolvedDir));
+    res.json(readTemplateFilesCached(resolvedDir));
   });
   app.post("/api/template/create", express.json(), (req, res) => {
     const body = req.body;
@@ -265,6 +370,53 @@ async function startServer(templatePath, port = 0, tenant = "") {
       sseClients.delete(res);
     });
   });
+  app.get("/preview", (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;
+    if (!slug) {
+      res.status(400).send("Missing slug");
+      return;
+    }
+    if (slug !== "." && !templates.some((t) => t.slug === slug)) {
+      res.status(404).send("Template not found");
+      return;
+    }
+    const targetDir = slug === "." ? baseDir : join(baseDir, slug);
+    const resolvedBaseDir = resolve(baseDir);
+    const resolvedDir = resolve(targetDir);
+    const relativePath = relative(resolvedBaseDir, resolvedDir);
+    if (relativePath.startsWith("..") || isAbsolute(relativePath)) {
+      res.status(400).send("Invalid template path");
+      return;
+    }
+    if (!existsSync(resolvedDir) || !isTemplateDir(resolvedDir)) {
+      res.status(404).send("Template not found");
+      return;
+    }
+    const templateFiles = readTemplateFilesCached(resolvedDir);
+    const fieldValues = [];
+    for (const [key, val] of Object.entries(req.query)) {
+      if (key.startsWith("f_") && typeof val === "string") {
+        fieldValues.push({ slug: key.slice(2), value: val });
+      }
+    }
+    const effectiveSdkUrl = sdkParam ?? (tenant ? normalizeTenantSdkUrl(tenant) : void 0);
+    const blockCookies = req.query.blockCookies !== "false";
+    const shellOptions = {
+      slug,
+      html: templateFiles.html,
+      css: templateFiles.css,
+      js: templateFiles.js,
+      fieldValues,
+      tab,
+      sdkUrl: effectiveSdkUrl,
+      blockCookies
+    };
+    const rendered = tab === "standalone" ? standaloneShell(shellOptions) : articleShell(shellOptions);
+    res.setHeader("Cache-Control", "no-store");
+    res.type("html").send(rendered);
+  });
   const indexHtmlPath = join(clientDistDir, "index.html");
   app.get("/*path", (_req, res) => {
     if (existsSync(indexHtmlPath)) {
@@ -285,10 +437,12 @@ async function startServer(templatePath, port = 0, tenant = "") {
   );
   fileWatcher.on("change", (changedPath) => {
     console.log(`Changed: ${changedPath}`);
+    invalidateTemplateCache(changedPath);
     broadcastReload();
   });
   fileWatcher.on("add", (addedPath) => {
     console.log(`Added: ${addedPath}`);
+    invalidateTemplateCache(addedPath);
     if (basename(addedPath) === "index.html") {
       rescan();
     }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "$schema": "https://json.schemastore.org/package.json",
     "name": "@allegrocdp/preview",
-    "version": "0.1.0-dev.6",
+    "version": "0.1.0-dev.7",
     "description": "Local dev server for previewing Allegro templates",
     "type": "module",
     "bin": {
@@ -14,7 +14,7 @@
         "build": "npm run build:client && npm run build:cli",
         "build:client": "vite build",
         "build:cli": "tsup",
-        "dev": "vite",
+        "dev": "npm run build:client -- --watch & tsup --watch",
         "types": "tsc --noEmit",
         "format": "prettier --write src/",
         "format:check": "prettier --check src/"

package/dist/client/assets/index-CDDVjT8Y.js DELETED Viewed

@@ -1,137 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))o(i);new MutationObserver(i=>{for(const s of i)if(s.type==="childList")for(const a of s.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&o(a)}).observe(document,{childList:!0,subtree:!0});function n(i){const s={};return i.integrity&&(s.integrity=i.integrity),i.referrerPolicy&&(s.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?s.credentials="include":i.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function o(i){if(i.ep)return;i.ep=!0;const s=n(i);fetch(i.href,s)}})();function A(e,t){let n=e;for(const o of t){const i=new RegExp(`\\{%\\s*${o.slug}\\s*%\\}`,"g");n=n.replace(i,o.value)}return n}const O="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js",K={full:0,desktop:1280,tablet:768,mobile:390},Q=`
-*, *::before, *::after { box-sizing: border-box; }
-* { margin: 0; }
-body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
-img, picture, video, canvas, svg { display: block; max-width: 100%; }
-input, button, textarea, select { font: inherit; }
-p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
-`,P=["The city council voted unanimously Tuesday to approve a sweeping new infrastructure plan that would reshape public transit routes across the metropolitan area over the next decade.","Mayor Jordan Ellison called the decision a turning point for how the region thinks about getting around, noting that similar investments in peer cities have led to measurable reductions in traffic congestion and improved air quality.","The plan includes upgrades to 14 existing bus rapid transit lines, the introduction of three new light-rail corridors connecting the downtown core to outlying neighborhoods, and dedicated cycling infrastructure along six major arterials.","Critics, however, warn that the projected cost of $2.4 billion may be optimistic. Independent analysts suggest the final figure could climb to $3.8 billion once land acquisition, labor, and contingency costs are factored in over the full construction timeline.","Council member Dana Reyes, who voted in favor, acknowledged the fiscal concern but argued that inaction carries its own price, noting that congestion costs residents and businesses hundreds of millions in lost productivity each year.","Environmental groups praised the announcement, saying expanded transit capacity is essential to meet the stated goal of reducing transportation emissions by 45 percent before 2035.","Public comment sessions are scheduled for next month at community centers in all twelve districts. Construction is expected to begin no sooner than mid-next year, pending environmental review and final design approvals."];function F(e){return e?`<script src="${e}"><\/script>`:""}function R(e,t,n,o){const i=JSON.stringify(e),s=JSON.stringify(t),a=JSON.stringify(n);return`(function() {
-  var html = ${i};
-  var css = ${s};
-  var js = ${a};
-  var host = document.createElement('div');
-  host.setAttribute('data-allegro-preview', '');
-  var shadow = host.attachShadow({ mode: 'open' });
-  if (css) {
-    var style = document.createElement('style');
-    style.textContent = css;
-    shadow.appendChild(style);
-  }
-  var container = document.createElement('div');
-  container.setAttribute('x-data', JSON.stringify({ session: null, audience_member: null }));
-  container.innerHTML = html;
-  shadow.appendChild(container);
-  if (js) {
-    try { (new Function('shadowRoot', 'hostElement', js))(shadow, host); }
-    catch(e) { console.error('[allegro-preview] JS error:', e); }
-  }
-  var article = document.getElementById('article-body');
-  if (!article) return;
-  var blockTags = new Set(['P','H1','H2','H3','H4','H5','H6','LI','BLOCKQUOTE','DIV','SECTION','FIGURE','PRE']);
-  var blocks = Array.from(article.children).filter(function(c) { return blockTags.has(c.tagName); });
-  ${o==="end"?"article.appendChild(host);":`var cutIndex = Math.min(${o}, blocks.length);
-  var pivot = blocks[cutIndex - 1] || blocks[0];
-  pivot.after(host);
-  blocks.slice(cutIndex).forEach(function(el) { el.remove(); });`}
-  if (window.Alpine && typeof window.Alpine.initTree === 'function') {
-    window.Alpine.initTree(shadow);
-  }
-})();`}function X(e,t,n){const o=JSON.stringify(e),i=JSON.stringify(t),s=JSON.stringify(n);return`(function() {
-  var html = ${o};
-  var css = ${i};
-  var js = ${s};
-  var host = document.createElement('div');
-  host.setAttribute('data-allegro-preview', '');
-  var shadow = host.attachShadow({ mode: 'open' });
-  if (css) {
-    var style = document.createElement('style');
-    style.textContent = css;
-    shadow.appendChild(style);
-  }
-  var container = document.createElement('div');
-  container.setAttribute('x-data', JSON.stringify({ session: null, audience_member: null }));
-  container.innerHTML = html;
-  shadow.appendChild(container);
-  if (js) {
-    try { (new Function('shadowRoot', 'hostElement', js))(shadow, host); }
-    catch(e) { console.error('[allegro-preview] JS error:', e); }
-  }
-  document.body.appendChild(host);
-  if (window.Alpine && typeof window.Alpine.initTree === 'function') {
-    window.Alpine.initTree(shadow);
-  }
-})();`}function Z(e,t,n,o){const i=X(e,t,n);return`<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script>window.__ALLEGRO_PREVIEW__ = true;<\/script>
-  ${F(o)}
-  <script src="${O}"><\/script>
-  <style>
-    * { box-sizing: border-box; }
-    body { margin: 0; }
-    [data-allegro-preview] { display: block; }
-  </style>
-</head>
-<body>
-  <script>${i}<\/script>
-</body>
-</html>`}function _(e,t,n){const o=e.map(i=>`<p>${i}</p>`).join(`
-    `);return`<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  ${F(n)}
-  <script src="${O}"><\/script>
-  <style>
-    * { box-sizing: border-box; }
-    *, *::before, *::after { box-sizing: border-box; }
-    body { font-family: Georgia, 'Times New Roman', serif; background: #fff; color: #111;
-           max-width: 680px; margin: 0 auto; padding: 32px 24px 64px; line-height: 1.75;
-           -webkit-font-smoothing: antialiased; }
-    h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 6px; font-weight: 700; }
-    .meta { color: #6b7280; font-size: 0.82rem; font-family: system-ui, sans-serif; margin-bottom: 24px; }
-    p { margin: 0 0 1.1em; font-size: 1rem; overflow-wrap: break-word; }
-    [data-allegro-preview] { display: block; margin: 24px 0; }
-  </style>
-</head>
-<body>
-  <header>
-    <h1>Council Approves Decade-Long Transit Overhaul</h1>
-    <p class="meta">By Staff Reporter &nbsp;&middot;&nbsp; March 14, 2026</p>
-  </header>
-  <article id="article-body">
-    ${o}
-  </article>
-  <script>${t}<\/script>
-</body>
-</html>`}function ee(e,t,n){const o=A(e.html,t);return Z(o,Q+e.css,e.js,n)}function te(e,t,n){const o=A(e.html,t),i=R(o,e.css,e.js,"end");return _(P,i,n)}function ne(e,t,n){const o=A(e.html,t),i=R(o,e.css,e.js,3);return _(P,i,n)}function oe(e){return K[e]}let c=[],u=null,b="standalone",w="full",m=null,v={},S;const M=document.getElementById("template-nav"),p=document.getElementById("field-list"),d=document.getElementById("preview-area"),I=document.getElementById("tab-group"),T=document.getElementById("device-group"),k=document.getElementById("toolbar-badge"),ie=document.getElementById("theme-toggle"),ae=document.getElementById("theme-icon-sun"),se=document.getElementById("theme-icon-moon"),L=document.getElementById("tenant-input"),C=document.getElementById("tenant-status"),re=document.getElementById("new-template-btn"),E=document.getElementById("create-modal-backdrop"),l=document.getElementById("modal-slug-input"),f=document.getElementById("modal-error"),le=document.getElementById("modal-cancel-btn"),y=document.getElementById("modal-create-btn");function J(e){document.documentElement.setAttribute("data-theme",e?"dark":"light"),ae.style.display=e?"none":"",se.style.display=e?"":"none"}function ce(){const e=localStorage.getItem("allegro-preview-theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches;J(e?e==="dark":t)}ie.addEventListener("click",()=>{const e=document.documentElement.getAttribute("data-theme")!=="dark";J(e),localStorage.setItem("allegro-preview-theme",e?"dark":"light")});function de(e){const t=e.trim();return t?(/^https?:\/\//.test(t)?t:`https://${t}`).replace(/\/+$/,"")+"/client.js":""}function D(e){const t=de(e);S=t||void 0,t?(C.className="tenant-active-badge",C.textContent=t):(C.className="tenant-hint",C.textContent="Loads /client.js on the preview page"),m&&h()}L.addEventListener("input",()=>{localStorage.setItem("allegro-preview-tenant",L.value),D(L.value)});function ue(e=""){const n=localStorage.getItem("allegro-preview-tenant")??e;n&&(L.value=n,D(n))}function pe(){const e=window.location.hash.slice(1);return e?decodeURIComponent(e):null}function me(e){history.replaceState(null,"",`#${encodeURIComponent(e)}`)}function fe(){history.replaceState(null,"",window.location.pathname)}function q(e){I.querySelectorAll(".tab-btn").forEach(t=>{t.disabled=!e}),T.querySelectorAll(".device-btn").forEach(t=>{t.disabled=!e})}I.addEventListener("click",e=>{const t=e.target.closest(".tab-btn");!t||t.disabled||(b=t.dataset.tab,I.querySelectorAll(".tab-btn").forEach(n=>n.classList.remove("active")),t.classList.add("active"),localStorage.setItem("allegro-preview-tab",b),h())});T.addEventListener("click",e=>{const t=e.target.closest(".device-btn");!t||t.disabled||(w=t.dataset.device,T.querySelectorAll(".device-btn").forEach(n=>n.classList.remove("active")),t.classList.add("active"),localStorage.setItem("allegro-preview-device",w),h())});function x(){M.innerHTML="";for(const e of c){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">${j(e.name)}</span>`,t.addEventListener("click",()=>void B(e.slug)),M.appendChild(t)}}async function B(e){u=e,me(e),x(),await H(e)}function z(){m=null,u=null,fe(),x(),q(!1),k.textContent="No template selected",k.style.opacity="0.4",p.innerHTML='<p class="no-fields">Select a template to edit fields.</p>';const e=document.createElement("div");if(e.className="selector-screen",c.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>`,d.innerHTML="",d.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>`,d.innerHTML="",d.appendChild(e);const t=e.querySelector("#selector-grid");for(const n of c){const o=document.createElement("button");o.className="selector-card",o.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">${j(n.name)}</div>
-            <div class="selector-card-slug">${j(n.slug)}</div>`,o.addEventListener("click",()=>void B(n.slug)),t.appendChild(o)}}const N=["text","number","checkbox","textarea"];function U(e){if(typeof e!="object"||e===null)return!1;const t=e;return typeof t.slug=="string"&&t.slug.length>0&&N.includes(t.type)}function he(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'),!N.includes(t.type)){const i=t.type!==void 0?`"${String(t.type)}"`:"none";n.push(`invalid type ${i} — valid types: ${N.join(", ")}`)}return`${typeof t.slug=="string"&&t.slug.length>0?`Field "${t.slug}"`:"Field"}: ${n.join("; ")}.`}function ge(e){v={};for(const t of e)U(t)&&(v[t.slug]=t.default_value??"")}function ve(e,t){if(p.innerHTML="",t){const n=document.createElement("div");n.className="field-error",n.textContent=`template.json parse error: ${t}`,p.appendChild(n);return}if(e.length===0){p.innerHTML='<p class="no-fields">No fields in template.json.</p>';return}for(const n of e){if(!U(n)){const a=document.createElement("div");a.className="field-error",a.textContent=he(n),p.appendChild(a);continue}const o=n;if(o.type==="checkbox"){const a=document.createElement("div");a.className="field-checkbox-row";const r=document.createElement("input");r.type="checkbox",r.id=`field-${o.slug}`,r.checked=o.default_value==="true"||o.default_value==="1",r.addEventListener("change",()=>{v[o.slug]=r.checked?"true":"false",h()});const g=document.createElement("label");g.className="field-label",g.htmlFor=`field-${o.slug}`,g.textContent=o.label||o.slug,a.appendChild(r),a.appendChild(g),p.appendChild(a);continue}const i=document.createElement("div");i.className="field-group";const s=document.createElement("label");if(s.className="field-label",s.htmlFor=`field-${o.slug}`,s.textContent=o.label||o.slug,i.appendChild(s),o.type==="textarea"){const a=document.createElement("textarea");a.className="field-input",a.id=`field-${o.slug}`,a.rows=3,a.value=o.default_value??"",a.addEventListener("input",()=>{v[o.slug]=a.value,h()}),i.appendChild(a)}else{const a=document.createElement("input");a.type=o.type==="number"?"number":"text",a.className="field-input",a.id=`field-${o.slug}`,a.value=o.default_value??"",a.addEventListener("input",()=>{v[o.slug]=a.value,h()}),i.appendChild(a)}p.appendChild(i)}}function h(){if(!m)return;const e=Object.entries(v).map(([g,Y])=>({slug:g,value:Y})),t=oe(w),n=t===0,o=b==="standalone"?ee(m,e,S):b==="append"?te(m,e,S):ne(m,e,S);d.innerHTML="";const i=document.createElement("div");i.className=n?"preview-stage":"preview-stage preview-stage--breakpoint";const s=document.createElement("div");s.className="preview-scaler";const a=document.createElement("div");a.className="preview-frame-wrapper";const r=document.createElement("iframe");r.style.height="calc(100vh - 48px)",w==="mobile"&&(r.style.maxHeight="812px"),r.setAttribute("sandbox","allow-scripts allow-same-origin"),r.srcdoc=o,n?(a.style.width="100%",r.style.width="100%",s.style.width="100%"):(a.style.width=`${t}px`,r.style.width=`${t}px`),a.appendChild(r),s.appendChild(a),i.appendChild(s),d.appendChild(i)}async function H(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();m=n,k.textContent=`Template: ${n.name}`,k.style.opacity="1",q(!0),ge(n.fields),ve(n.fields,n.fieldsParseError),h()}catch(t){console.error("[allegro-preview] Failed to load template:",t),d.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}".`,d.appendChild(n)}}async function ye(){const t=await(await fetch("/api/config")).json();c=t.templates,ue(t.tenant??"");const n=pe(),o=n&&c.find(i=>i.slug===n)?n:null;o?(u=o,x(),await H(o)):z()}function be(){const e=localStorage.getItem("allegro-preview-tab"),t=localStorage.getItem("allegro-preview-device");e&&["standalone","append","cut"].includes(e)&&(b=e,I.querySelectorAll(".tab-btn").forEach(n=>{n.classList.toggle("active",n.dataset.tab===e)})),t&&["full","desktop","tablet","mobile"].includes(t)&&(w=t,T.querySelectorAll(".device-btn").forEach(n=>{n.classList.toggle("active",n.dataset.device===t)}))}function V(){const e=new EventSource("/api/events");e.addEventListener("reload",()=>{u&&H(u)}),e.addEventListener("config",()=>{we()}),e.onerror=()=>{e.close(),setTimeout(V,2e3)}}async function we(){c=(await(await fetch("/api/config")).json()).templates,x(),u&&!c.find(n=>n.slug===u)&&z()}function j(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}const Ee=/^[a-z0-9]+(?:-[a-z0-9]+)*$/;function xe(){l.value="",f.textContent="",l.classList.remove("invalid"),y.disabled=!1,E.classList.remove("hidden"),l.focus()}function $(){E.classList.add("hidden")}function G(e){return e?Ee.test(e)?null:"Use lowercase letters, numbers, and hyphens only (e.g. my-template).":"Slug is required."}re.addEventListener("click",xe);le.addEventListener("click",$);E.addEventListener("click",e=>{e.target===E&&$()});document.addEventListener("keydown",e=>{e.key==="Escape"&&!E.classList.contains("hidden")&&$()});l.addEventListener("input",()=>{const e=G(l.value);e?(l.classList.add("invalid"),f.textContent=e):(l.classList.remove("invalid"),f.textContent="")});l.addEventListener("keydown",e=>{e.key==="Enter"&&W()});y.addEventListener("click",()=>void W());async function W(){const e=l.value.trim(),t=G(e);if(t){l.classList.add("invalid"),f.textContent=t,l.focus();return}y.disabled=!0,f.textContent="";try{const n=await fetch("/api/template/create",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({slug:e})}),o=await n.json();if(!n.ok){f.textContent=o.error??"Failed to create template.",y.disabled=!1;return}$(),c=[...c,{slug:e,name:e}],x(),await B(e)}catch{f.textContent="Network error. Please try again.",y.disabled=!1}}ce();be();ye();V();