@allegrocdp/preview 0.1.0-dev.10

package/README.md

@@ -0,0 +1,89 @@
+# allegro-preview
+
+A local dev server for previewing [Allegro](https://github.com/alleyinteractive/allegro) templates exactly as they render in production — with field substitution, device breakpoints, and article placement contexts.
+
+## Usage
+
+Run from inside any Allegro template folder (one that contains `index.html`, `index.css`, `index.js`, and optionally `template.json`):
+
+```sh
+npx @allegrocdp/preview@dev
+```
+
+Or point it at a folder:
+
+```sh
+npx @allegrocdp/preview@dev ./path/to/my-template
+```
+
+The server starts, prints the URL, and opens your browser automatically.
+
+## Options
+
+```
+@allegrocdp/preview [path] [options]
+
+Arguments:
+  path                  Path to the template folder (default: current directory)
+
+Options:
+  -p, --port <number>   Port to listen on (default: random available port)
+      --tenant <url>    Tenant URL to use for Allegro API requests
+  -h, --help            Show help
+```
+
+## Template folder structure
+
+```
+my-template/
+├── index.html       # Template markup (supports {% field_slug %} placeholders)
+├── index.css        # Template styles
+├── index.js         # Template JavaScript
+└── template.json    # [optional] Field definitions and metadata
+```
+
+### `template.json` field types
+
+```json
+{
+  "name": "My Template",
+  "fields": [
+    { "slug": "headline",  "label": "Headline",  "type": "text",     "default_value": "Hello world" },
+    { "slug": "count",     "label": "Count",     "type": "number",   "default_value": "3" },
+    { "slug": "show_cta",  "label": "Show CTA",  "type": "checkbox", "default_value": "true" },
+    { "slug": "body_copy", "label": "Body Copy",  "type": "textarea", "default_value": "" }
+  ]
+}
+```
+
+Supported field types: `text`, `number`, `checkbox`, `textarea`.
+
+## Preview contexts
+
+| Tab | Description |
+|-----|-------------|
+| **Standalone** | Template rendered on its own in an iframe |
+| **Article · Cut** | Template injected after paragraph 3 of a mock article using the `truncate` placement method |
+| **Article · Append** | Template rendered after the full content of a mock article |
+
+## Device breakpoints
+
+| Device | Width |
+|--------|-------|
+| Desktop | 1280px |
+| Tablet | 768px |
+| Mobile | 390px |
+
+## Live reload
+
+The server watches `index.html`, `index.css`, `index.js`, and `template.json` (if present) for changes and automatically refreshes the preview.
+
+## Development
+
+```sh
+# Build the package
+npm run preview:build
+
+# Run Vite dev server for the client UI
+npm run preview:dev
+```

package/dist/cli.js

@@ -0,0 +1,519 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { Command } from "commander";
+
+// src/server.ts
+import chokidar from "chokidar";
+import express from "express";
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
+import open from "open";
+import { basename, isAbsolute, join, relative, resolve } from "path";
+import { fileURLToPath } from "url";
+var __dirname = fileURLToPath(new URL(".", import.meta.url));
+var BOILERPLATE_HTML = `<div class="signup">
+  <div class="signup__eyebrow">Newsletter</div>
+  <h2 class="signup__headline">{% headline %}</h2>
+  <p class="signup__sub">{% subheadline %}</p>
+  <form class="signup__form" onsubmit="return false">
+    <div class="signup__row">
+      <input class="signup__input" type="email" placeholder="{% input_placeholder %}" />
+      <button class="signup__btn" type="submit">{% button_text %}</button>
+    </div>
+    <p class="signup__note">{% privacy_note %}</p>
+  </form>
+</div>
+`;
+var BOILERPLATE_CSS = `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+.signup {
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  padding: 16px;
+}
+
+.signup__eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #6366f1;
+  margin-bottom: 8px;
+}
+
+.signup__headline {
+  font-size: clamp(20px, 4vw, 26px);
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  margin-bottom: 8px;
+}
+
+.signup__sub {
+  font-size: 14px;
+  color: #64748b;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.signup__row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.signup__input {
+  flex: 1;
+  min-width: 180px;
+  height: 42px;
+  padding: 0 12px;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #0f172a;
+  background: #f8fafc;
+  outline: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.signup__input:focus { border-color: #6366f1; background: #fff; }
+.signup__input::placeholder { color: #94a3b8; }
+
+.signup__btn {
+  height: 42px;
+  padding: 0 20px;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+
+.signup__btn:hover { background: #4f46e5; }
+.signup__btn:active { opacity: 0.9; }
+
+.signup__note {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #94a3b8;
+}
+`;
+var BOILERPLATE_FIELDS = [
+  { slug: "headline", label: "Headline", type: "text", default_value: "Stay in the know" },
+  {
+    slug: "subheadline",
+    label: "Subheadline",
+    type: "textarea",
+    default_value: "Get the latest stories delivered to your inbox."
+  },
+  { slug: "input_placeholder", label: "Input placeholder", type: "text", default_value: "Enter your email" },
+  { 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) {
+    client.write(`event: ${event}
+data: {}
+
+`);
+  }
+}
+function broadcastReload() {
+  broadcast("reload");
+}
+function broadcastConfig() {
+  broadcast("config");
+}
+function readTemplateMeta(dir) {
+  const jsonPath = join(dir, "template.json");
+  if (!existsSync(jsonPath)) {
+    return { name: basename(dir) };
+  }
+  try {
+    const parsed = JSON.parse(readFileSync(jsonPath, "utf-8"));
+    return { name: parsed.name ?? basename(dir) };
+  } catch {
+    return { name: basename(dir) };
+  }
+}
+function isTemplateDir(dir) {
+  return existsSync(join(dir, "index.html"));
+}
+function scanTemplates(baseDir) {
+  const results = [];
+  if (isTemplateDir(baseDir)) {
+    const meta = readTemplateMeta(baseDir);
+    results.push({ slug: ".", name: meta.name });
+  }
+  try {
+    for (const entry of readdirSync(baseDir, { withFileTypes: true })) {
+      if (!entry.isDirectory() || entry.name.startsWith(".")) {
+        continue;
+      }
+      const sub = join(baseDir, entry.name);
+      if (!isTemplateDir(sub)) {
+        continue;
+      }
+      const meta = readTemplateMeta(sub);
+      results.push({ slug: entry.name, name: meta.name });
+    }
+  } catch {
+  }
+  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);
+    return existsSync(filePath) ? readFileSync(filePath, "utf-8") : "";
+  };
+  let fields = [];
+  let name = basename(dir);
+  let fieldsParseError = null;
+  const jsonPath = join(dir, "template.json");
+  if (existsSync(jsonPath)) {
+    try {
+      const parsed = JSON.parse(readFileSync(jsonPath, "utf-8"));
+      fields = parsed.fields ?? [];
+      name = parsed.name ?? name;
+    } catch (err) {
+      fieldsParseError = err instanceof Error ? err.message : "Invalid JSON in template.json";
+    }
+  }
+  const files = {
+    html: read("index.html"),
+    css: read("index.css"),
+    js: read("index.js"),
+    fields,
+    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);
+  if (!existsSync(baseDir)) {
+    console.error(`Directory not found: ${baseDir}`);
+    process.exit(1);
+  }
+  let templates = scanTemplates(baseDir);
+  const app = express();
+  const clientDistDir = join(__dirname, "client");
+  app.use(express.static(clientDistDir));
+  app.get("/api/config", (_req, res) => {
+    res.json({ defaultSlug: templates[0]?.slug ?? null, templates, tenant });
+  });
+  app.get("/api/template", (req, res) => {
+    const slug = req.query.slug ?? ".";
+    if (slug !== "." && !templates.some((template) => template.slug === slug)) {
+      res.status(404).json({ error: "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).json({ error: "Invalid template path" });
+      return;
+    }
+    if (!existsSync(resolvedDir) || !isTemplateDir(resolvedDir)) {
+      res.status(404).json({ error: "Template not found" });
+      return;
+    }
+    res.json(readTemplateFilesCached(resolvedDir));
+  });
+  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)."
+      });
+      return;
+    }
+    const targetDir = join(baseDir, slug);
+    if (existsSync(targetDir)) {
+      res.status(400).json({ error: `A template named "${slug}" already exists.` });
+      return;
+    }
+    try {
+      mkdirSync(targetDir);
+      writeFileSync(join(targetDir, "index.html"), BOILERPLATE_HTML);
+      writeFileSync(join(targetDir, "index.css"), BOILERPLATE_CSS);
+      writeFileSync(
+        join(targetDir, "template.json"),
+        JSON.stringify({ name: slug, fields: BOILERPLATE_FIELDS }, null, 2) + "\n"
+      );
+    } catch (err) {
+      console.error("[allegro-preview] Failed to create template:", err);
+      res.status(500).json({ error: "Failed to create template files." });
+      return;
+    }
+    rescan();
+    res.status(201).json({ slug });
+  });
+  app.get("/api/events", (req, res) => {
+    res.setHeader("Content-Type", "text/event-stream");
+    res.setHeader("Cache-Control", "no-cache");
+    res.setHeader("Connection", "keep-alive");
+    res.flushHeaders();
+    sseClients.add(res);
+    req.on("close", () => {
+      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)) {
+      res.type("html").send(readFileSync(indexHtmlPath));
+    } else {
+      res.status(503).send(
+        'Preview client build artifacts not found. Ensure the client is built (for example, by running "npm run build" in this package during development).'
+      );
+    }
+  });
+  const TEMPLATE_FILES = ["index.html", "index.css", "index.js", "template.json"];
+  function templateFilePaths(dir) {
+    return TEMPLATE_FILES.map((f) => join(dir, f));
+  }
+  const fileWatcher = chokidar.watch(
+    templates.flatMap((t) => templateFilePaths(t.slug === "." ? baseDir : join(baseDir, t.slug))),
+    { ignoreInitial: true }
+  );
+  fileWatcher.on("change", (changedPath) => {
+    console.log(`Changed: ${changedPath}`);
+    invalidateTemplateCache(changedPath);
+    if (basename(changedPath) === "template.json") {
+      rescan();
+    }
+    broadcastReload();
+  });
+  fileWatcher.on("add", (addedPath) => {
+    console.log(`Added: ${addedPath}`);
+    invalidateTemplateCache(addedPath);
+    if (basename(addedPath) === "index.html") {
+      rescan();
+    }
+    broadcastReload();
+  });
+  const dirWatcher = chokidar.watch(baseDir, { depth: 1, ignoreInitial: true });
+  function rescan() {
+    templates = scanTemplates(baseDir);
+    console.log(`Templates updated: ${templates.map((t) => t.slug).join(", ") || "(none)"}`);
+    broadcastConfig();
+  }
+  dirWatcher.on("addDir", (dirPath) => {
+    if (dirPath === baseDir) {
+      return;
+    }
+    setTimeout(() => {
+      rescan();
+      fileWatcher.add(templateFilePaths(dirPath));
+    }, 300);
+  });
+  dirWatcher.on("unlinkDir", (dirPath) => {
+    if (dirPath === baseDir) {
+      return;
+    }
+    rescan();
+  });
+  dirWatcher.on("add", (filePath) => {
+    if (basename(filePath) === "index.html") {
+      rescan();
+      fileWatcher.add(templateFilePaths(join(filePath, "..")));
+    }
+  });
+  const bindServer = (p) => new Promise((resolve2, reject) => {
+    const server = app.listen(p);
+    server.once("listening", () => {
+      const addr = server.address();
+      const assignedPort2 = typeof addr === "object" && addr ? addr.port : p;
+      resolve2({ server, assignedPort: assignedPort2 });
+    });
+    server.once("error", reject);
+  });
+  let assignedPort;
+  try {
+    ({ assignedPort } = await bindServer(port));
+  } catch (err) {
+    const nodeErr = err;
+    if (nodeErr.code === "EADDRINUSE" && port !== 0) {
+      console.log(`Port ${port} is in use, using a random available port instead.`);
+      ({ assignedPort } = await bindServer(0));
+    } else {
+      throw err;
+    }
+  }
+  const url = `http://localhost:${assignedPort}`;
+  console.log(`
+allegro-preview \u2192 ${url}
+`);
+  void open(url);
+}
+
+// src/cli.ts
+var program = new Command();
+program.name("allegro-preview").description("Local dev server for previewing Allegro templates").argument("[path]", "Path to the template folder", process.cwd()).option("-p, --port <number>", "Port to listen on (default: 4747, falls back to random if taken)", "4747").option("--tenant <url>", "Tenant base URL to pre-fill (overrides ALLEGRO_TENANT env var)").action(async (templatePath, options) => {
+  const port = parseInt(options.port, 10);
+  const tenant = options.tenant ?? process.env.ALLEGRO_TENANT ?? "";
+  await startServer(templatePath, port, tenant);
+});
+program.parse();

package/dist/client/assets/app-D1XS_DDX.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)}})();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();