@emailshepherd/cli 0.2.1 → 0.2.2

package/dist/cli.js

@@ -8,7 +8,7 @@ import updateNotifier from "update-notifier";
 // package.json
 var package_default = {
   name: "@emailshepherd/cli",
-  version: "0.2.1",
+  version: "0.2.2",
   type: "module",
   publishConfig: {
     registry: "https://registry.npmjs.org",
@@ -27,7 +27,10 @@ var package_default = {
     "dist"
   ],
   scripts: {
-    build: "tsup && cp -r src/templates dist/",
+    typecheck: "tsc",
+    "build:cli": "tsup",
+    "build:dev-ui": "vite build",
+    build: "pnpm run typecheck && pnpm run build:cli && pnpm run build:dev-ui && cp -r src/templates dist/",
     test: "vitest run",
     "test:watch": "vitest",
     prepublishOnly: "pnpm run build"
@@ -37,12 +40,14 @@ var package_default = {
     chokidar: "^4.0.3",
     commander: "^14.0.2",
     dotenv: "^17.2.3",
+    preact: "^10.28.1",
     "update-notifier": "^7.3.1",
     vite: "^7.2.6",
     "vite-plugin-checker": "^0.12.0"
   },
   devDependencies: {
     "@emailshepherd/api-client": "workspace:*",
+    "@preact/preset-vite": "^2.10.2",
     "@types/node": "^24.10.1",
     "@types/update-notifier": "^6.0.8",
     msw: "^2.12.7",
@@ -83,7 +88,7 @@ function configureAxios(config) {
 
 // src/buildHtml.ts
 import { AxiosError } from "axios";
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
 import { dirname, resolve } from "path";
 import { fileURLToPath } from "url";
 import { createServer } from "vite";
@@ -214,6 +219,8 @@ function writeDevWrapper() {
   const templatePath = resolve(__dirname, "templates", "devWrapper.html");
   const devWrapperHtml = readFileSync(templatePath, "utf-8");
   writeFileSync(resolve(distDir, "index.html"), devWrapperHtml);
+  const devUiPath = resolve(__dirname, "dev-ui", "dev-ui.js");
+  copyFileSync(devUiPath, resolve(distDir, "dev-ui.js"));
 }
 async function buildHtml() {
   configureAxios();
@@ -448,12 +455,13 @@ function applyOverrides(eds, overrides) {
 }
 async function renderWithOverrides(overrides) {
   configureAxios();
+  const { workspaceId, edsId } = getEDSEnvConfig();
   const eds = await loadEDS();
   const modifiedEds = applyOverrides(eds, overrides);
   const objectRepresentation = await buildEmailDesignSystemObject(modifiedEds);
   const response = await renderEmailDesignSystem(
-    modifiedEds.workspace_id,
-    modifiedEds.email_design_system_id,
+    workspaceId,
+    edsId,
     objectRepresentation
   );
   if (response.data.html) {

package/dist/dev-ui/dev-ui.js

@@ -0,0 +1,511 @@
+var B, d, me, x, re, ye, ge, be, X, J, Y, F = {}, ke = [], Ae = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i, O = Array.isArray;
+function C(e, _) {
+  for (var t in _) e[t] = _[t];
+  return e;
+}
+function Z(e) {
+  e && e.parentNode && e.parentNode.removeChild(e);
+}
+function Fe(e, _, t) {
+  var n, l, r, i = {};
+  for (r in _) r == "key" ? n = _[r] : r == "ref" ? l = _[r] : i[r] = _[r];
+  if (arguments.length > 2 && (i.children = arguments.length > 3 ? B.call(arguments, 2) : t), typeof e == "function" && e.defaultProps != null) for (r in e.defaultProps) i[r] === void 0 && (i[r] = e.defaultProps[r]);
+  return L(e, i, n, l, null);
+}
+function L(e, _, t, n, l) {
+  var r = { type: e, props: _, key: t, ref: n, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: l ?? ++me, __i: -1, __u: 0 };
+  return l == null && d.vnode != null && d.vnode(r), r;
+}
+function V(e) {
+  return e.children;
+}
+function W(e, _) {
+  this.props = e, this.context = _;
+}
+function T(e, _) {
+  if (_ == null) return e.__ ? T(e.__, e.__i + 1) : null;
+  for (var t; _ < e.__k.length; _++) if ((t = e.__k[_]) != null && t.__e != null) return t.__e;
+  return typeof e.type == "function" ? T(e) : null;
+}
+function we(e) {
+  var _, t;
+  if ((e = e.__) != null && e.__c != null) {
+    for (e.__e = e.__c.base = null, _ = 0; _ < e.__k.length; _++) if ((t = e.__k[_]) != null && t.__e != null) {
+      e.__e = e.__c.base = t.__e;
+      break;
+    }
+    return we(e);
+  }
+}
+function oe(e) {
+  (!e.__d && (e.__d = !0) && x.push(e) && !j.__r++ || re != d.debounceRendering) && ((re = d.debounceRendering) || ye)(j);
+}
+function j() {
+  for (var e, _, t, n, l, r, i, s = 1; x.length; ) x.length > s && x.sort(ge), e = x.shift(), s = x.length, e.__d && (t = void 0, n = void 0, l = (n = (_ = e).__v).__e, r = [], i = [], _.__P && ((t = C({}, n)).__v = n.__v + 1, d.vnode && d.vnode(t), ee(_.__P, t, n, _.__n, _.__P.namespaceURI, 32 & n.__u ? [l] : null, r, l ?? T(n), !!(32 & n.__u), i), t.__v = n.__v, t.__.__k[t.__i] = t, He(r, t, i), n.__e = n.__ = null, t.__e != l && we(t)));
+  j.__r = 0;
+}
+function $e(e, _, t, n, l, r, i, s, f, c, p) {
+  var o, a, u, y, w, g, m, v = n && n.__k || ke, H = _.length;
+  for (f = Ne(t, _, v, f, H), o = 0; o < H; o++) (u = t.__k[o]) != null && (a = u.__i == -1 ? F : v[u.__i] || F, u.__i = o, g = ee(e, u, a, l, r, i, s, f, c, p), y = u.__e, u.ref && a.ref != u.ref && (a.ref && _e(a.ref, null, u), p.push(u.ref, u.__c || y, u)), w == null && y != null && (w = y), (m = !!(4 & u.__u)) || a.__k === u.__k ? f = Ce(u, f, e, m) : typeof u.type == "function" && g !== void 0 ? f = g : y && (f = y.nextSibling), u.__u &= -7);
+  return t.__e = w, f;
+}
+function Ne(e, _, t, n, l) {
+  var r, i, s, f, c, p = t.length, o = p, a = 0;
+  for (e.__k = new Array(l), r = 0; r < l; r++) (i = _[r]) != null && typeof i != "boolean" && typeof i != "function" ? (typeof i == "string" || typeof i == "number" || typeof i == "bigint" || i.constructor == String ? i = e.__k[r] = L(null, i, null, null, null) : O(i) ? i = e.__k[r] = L(V, { children: i }, null, null, null) : i.constructor == null && i.__b > 0 ? i = e.__k[r] = L(i.type, i.props, i.key, i.ref ? i.ref : null, i.__v) : e.__k[r] = i, f = r + a, i.__ = e, i.__b = e.__b + 1, s = null, (c = i.__i = Ue(i, t, f, o)) != -1 && (o--, (s = t[c]) && (s.__u |= 2)), s == null || s.__v == null ? (c == -1 && (l > p ? a-- : l < p && a++), typeof i.type != "function" && (i.__u |= 4)) : c != f && (c == f - 1 ? a-- : c == f + 1 ? a++ : (c > f ? a-- : a++, i.__u |= 4))) : e.__k[r] = null;
+  if (o) for (r = 0; r < p; r++) (s = t[r]) != null && (2 & s.__u) == 0 && (s.__e == n && (n = T(s)), xe(s, s));
+  return n;
+}
+function Ce(e, _, t, n) {
+  var l, r;
+  if (typeof e.type == "function") {
+    for (l = e.__k, r = 0; l && r < l.length; r++) l[r] && (l[r].__ = e, _ = Ce(l[r], _, t, n));
+    return _;
+  }
+  e.__e != _ && (n && (_ && e.type && !_.parentNode && (_ = T(e)), t.insertBefore(e.__e, _ || null)), _ = e.__e);
+  do
+    _ = _ && _.nextSibling;
+  while (_ != null && _.nodeType == 8);
+  return _;
+}
+function Ue(e, _, t, n) {
+  var l, r, i, s = e.key, f = e.type, c = _[t], p = c != null && (2 & c.__u) == 0;
+  if (c === null && s == null || p && s == c.key && f == c.type) return t;
+  if (n > (p ? 1 : 0)) {
+    for (l = t - 1, r = t + 1; l >= 0 || r < _.length; ) if ((c = _[i = l >= 0 ? l-- : r++]) != null && (2 & c.__u) == 0 && s == c.key && f == c.type) return i;
+  }
+  return -1;
+}
+function le(e, _, t) {
+  _[0] == "-" ? e.setProperty(_, t ?? "") : e[_] = t == null ? "" : typeof t != "number" || Ae.test(_) ? t : t + "px";
+}
+function D(e, _, t, n, l) {
+  var r, i;
+  e: if (_ == "style") if (typeof t == "string") e.style.cssText = t;
+  else {
+    if (typeof n == "string" && (e.style.cssText = n = ""), n) for (_ in n) t && _ in t || le(e.style, _, "");
+    if (t) for (_ in t) n && t[_] == n[_] || le(e.style, _, t[_]);
+  }
+  else if (_[0] == "o" && _[1] == "n") r = _ != (_ = _.replace(be, "$1")), i = _.toLowerCase(), _ = i in e || _ == "onFocusOut" || _ == "onFocusIn" ? i.slice(2) : _.slice(2), e.l || (e.l = {}), e.l[_ + r] = t, t ? n ? t.u = n.u : (t.u = X, e.addEventListener(_, r ? Y : J, r)) : e.removeEventListener(_, r ? Y : J, r);
+  else {
+    if (l == "http://www.w3.org/2000/svg") _ = _.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
+    else if (_ != "width" && _ != "height" && _ != "href" && _ != "list" && _ != "form" && _ != "tabIndex" && _ != "download" && _ != "rowSpan" && _ != "colSpan" && _ != "role" && _ != "popover" && _ in e) try {
+      e[_] = t ?? "";
+      break e;
+    } catch {
+    }
+    typeof t == "function" || (t == null || t === !1 && _[4] != "-" ? e.removeAttribute(_) : e.setAttribute(_, _ == "popover" && t == 1 ? "" : t));
+  }
+}
+function ie(e) {
+  return function(_) {
+    if (this.l) {
+      var t = this.l[_.type + e];
+      if (_.t == null) _.t = X++;
+      else if (_.t < t.u) return;
+      return t(d.event ? d.event(_) : _);
+    }
+  };
+}
+function ee(e, _, t, n, l, r, i, s, f, c) {
+  var p, o, a, u, y, w, g, m, v, H, S, U, E, ne, M, A, z, $ = _.type;
+  if (_.constructor != null) return null;
+  128 & t.__u && (f = !!(32 & t.__u), r = [s = _.__e = t.__e]), (p = d.__b) && p(_);
+  e: if (typeof $ == "function") try {
+    if (m = _.props, v = "prototype" in $ && $.prototype.render, H = (p = $.contextType) && n[p.__c], S = p ? H ? H.props.value : p.__ : n, t.__c ? g = (o = _.__c = t.__c).__ = o.__E : (v ? _.__c = o = new $(m, S) : (_.__c = o = new W(m, S), o.constructor = $, o.render = De), H && H.sub(o), o.state || (o.state = {}), o.__n = n, a = o.__d = !0, o.__h = [], o._sb = []), v && o.__s == null && (o.__s = o.state), v && $.getDerivedStateFromProps != null && (o.__s == o.state && (o.__s = C({}, o.__s)), C(o.__s, $.getDerivedStateFromProps(m, o.__s))), u = o.props, y = o.state, o.__v = _, a) v && $.getDerivedStateFromProps == null && o.componentWillMount != null && o.componentWillMount(), v && o.componentDidMount != null && o.__h.push(o.componentDidMount);
+    else {
+      if (v && $.getDerivedStateFromProps == null && m !== u && o.componentWillReceiveProps != null && o.componentWillReceiveProps(m, S), _.__v == t.__v || !o.__e && o.shouldComponentUpdate != null && o.shouldComponentUpdate(m, o.__s, S) === !1) {
+        for (_.__v != t.__v && (o.props = m, o.state = o.__s, o.__d = !1), _.__e = t.__e, _.__k = t.__k, _.__k.some(function(P) {
+          P && (P.__ = _);
+        }), U = 0; U < o._sb.length; U++) o.__h.push(o._sb[U]);
+        o._sb = [], o.__h.length && i.push(o);
+        break e;
+      }
+      o.componentWillUpdate != null && o.componentWillUpdate(m, o.__s, S), v && o.componentDidUpdate != null && o.__h.push(function() {
+        o.componentDidUpdate(u, y, w);
+      });
+    }
+    if (o.context = S, o.props = m, o.__P = e, o.__e = !1, E = d.__r, ne = 0, v) {
+      for (o.state = o.__s, o.__d = !1, E && E(_), p = o.render(o.props, o.state, o.context), M = 0; M < o._sb.length; M++) o.__h.push(o._sb[M]);
+      o._sb = [];
+    } else do
+      o.__d = !1, E && E(_), p = o.render(o.props, o.state, o.context), o.state = o.__s;
+    while (o.__d && ++ne < 25);
+    o.state = o.__s, o.getChildContext != null && (n = C(C({}, n), o.getChildContext())), v && !a && o.getSnapshotBeforeUpdate != null && (w = o.getSnapshotBeforeUpdate(u, y)), A = p, p != null && p.type === V && p.key == null && (A = Se(p.props.children)), s = $e(e, O(A) ? A : [A], _, t, n, l, r, i, s, f, c), o.base = _.__e, _.__u &= -161, o.__h.length && i.push(o), g && (o.__E = o.__ = null);
+  } catch (P) {
+    if (_.__v = null, f || r != null) if (P.then) {
+      for (_.__u |= f ? 160 : 128; s && s.nodeType == 8 && s.nextSibling; ) s = s.nextSibling;
+      r[r.indexOf(s)] = null, _.__e = s;
+    } else {
+      for (z = r.length; z--; ) Z(r[z]);
+      K(_);
+    }
+    else _.__e = t.__e, _.__k = t.__k, P.then || K(_);
+    d.__e(P, _, t);
+  }
+  else r == null && _.__v == t.__v ? (_.__k = t.__k, _.__e = t.__e) : s = _.__e = Me(t.__e, _, t, n, l, r, i, f, c);
+  return (p = d.diffed) && p(_), 128 & _.__u ? void 0 : s;
+}
+function K(e) {
+  e && e.__c && (e.__c.__e = !0), e && e.__k && e.__k.forEach(K);
+}
+function He(e, _, t) {
+  for (var n = 0; n < t.length; n++) _e(t[n], t[++n], t[++n]);
+  d.__c && d.__c(_, e), e.some(function(l) {
+    try {
+      e = l.__h, l.__h = [], e.some(function(r) {
+        r.call(l);
+      });
+    } catch (r) {
+      d.__e(r, l.__v);
+    }
+  });
+}
+function Se(e) {
+  return typeof e != "object" || e == null || e.__b && e.__b > 0 ? e : O(e) ? e.map(Se) : C({}, e);
+}
+function Me(e, _, t, n, l, r, i, s, f) {
+  var c, p, o, a, u, y, w, g = t.props || F, m = _.props, v = _.type;
+  if (v == "svg" ? l = "http://www.w3.org/2000/svg" : v == "math" ? l = "http://www.w3.org/1998/Math/MathML" : l || (l = "http://www.w3.org/1999/xhtml"), r != null) {
+    for (c = 0; c < r.length; c++) if ((u = r[c]) && "setAttribute" in u == !!v && (v ? u.localName == v : u.nodeType == 3)) {
+      e = u, r[c] = null;
+      break;
+    }
+  }
+  if (e == null) {
+    if (v == null) return document.createTextNode(m);
+    e = document.createElementNS(l, v, m.is && m), s && (d.__m && d.__m(_, r), s = !1), r = null;
+  }
+  if (v == null) g === m || s && e.data == m || (e.data = m);
+  else {
+    if (r = r && B.call(e.childNodes), !s && r != null) for (g = {}, c = 0; c < e.attributes.length; c++) g[(u = e.attributes[c]).name] = u.value;
+    for (c in g) if (u = g[c], c != "children") {
+      if (c == "dangerouslySetInnerHTML") o = u;
+      else if (!(c in m)) {
+        if (c == "value" && "defaultValue" in m || c == "checked" && "defaultChecked" in m) continue;
+        D(e, c, null, u, l);
+      }
+    }
+    for (c in m) u = m[c], c == "children" ? a = u : c == "dangerouslySetInnerHTML" ? p = u : c == "value" ? y = u : c == "checked" ? w = u : s && typeof u != "function" || g[c] === u || D(e, c, u, g[c], l);
+    if (p) s || o && (p.__html == o.__html || p.__html == e.innerHTML) || (e.innerHTML = p.__html), _.__k = [];
+    else if (o && (e.innerHTML = ""), $e(_.type == "template" ? e.content : e, O(a) ? a : [a], _, t, n, v == "foreignObject" ? "http://www.w3.org/1999/xhtml" : l, r, i, r ? r[0] : t.__k && T(t, 0), s, f), r != null) for (c = r.length; c--; ) Z(r[c]);
+    s || (c = "value", v == "progress" && y == null ? e.removeAttribute("value") : y != null && (y !== e[c] || v == "progress" && !y || v == "option" && y != g[c]) && D(e, c, y, g[c], l), c = "checked", w != null && w != e[c] && D(e, c, w, g[c], l));
+  }
+  return e;
+}
+function _e(e, _, t) {
+  try {
+    if (typeof e == "function") {
+      var n = typeof e.__u == "function";
+      n && e.__u(), n && _ == null || (e.__u = e(_));
+    } else e.current = _;
+  } catch (l) {
+    d.__e(l, t);
+  }
+}
+function xe(e, _, t) {
+  var n, l;
+  if (d.unmount && d.unmount(e), (n = e.ref) && (n.current && n.current != e.__e || _e(n, null, _)), (n = e.__c) != null) {
+    if (n.componentWillUnmount) try {
+      n.componentWillUnmount();
+    } catch (r) {
+      d.__e(r, _);
+    }
+    n.base = n.__P = null;
+  }
+  if (n = e.__k) for (l = 0; l < n.length; l++) n[l] && xe(n[l], _, t || typeof e.type != "function");
+  t || Z(e.__e), e.__c = e.__ = e.__e = void 0;
+}
+function De(e, _, t) {
+  return this.constructor(e, t);
+}
+function Le(e, _, t) {
+  var n, l, r, i;
+  _ == document && (_ = document.documentElement), d.__ && d.__(e, _), l = (n = !1) ? null : _.__k, r = [], i = [], ee(_, e = _.__k = Fe(V, null, [e]), l || F, F, _.namespaceURI, l ? null : _.firstChild ? B.call(_.childNodes) : null, r, l ? l.__e : _.firstChild, n, i), He(r, e, i);
+}
+B = ke.slice, d = { __e: function(e, _, t, n) {
+  for (var l, r, i; _ = _.__; ) if ((l = _.__c) && !l.__) try {
+    if ((r = l.constructor) && r.getDerivedStateFromError != null && (l.setState(r.getDerivedStateFromError(e)), i = l.__d), l.componentDidCatch != null && (l.componentDidCatch(e, n || {}), i = l.__d), i) return l.__E = l;
+  } catch (s) {
+    e = s;
+  }
+  throw e;
+} }, me = 0, W.prototype.setState = function(e, _) {
+  var t;
+  t = this.__s != null && this.__s != this.state ? this.__s : this.__s = C({}, this.state), typeof e == "function" && (e = e(C({}, t), this.props)), e && C(t, e), e != null && this.__v && (_ && this._sb.push(_), oe(this));
+}, W.prototype.forceUpdate = function(e) {
+  this.__v && (this.__e = !0, e && this.__h.push(e), oe(this));
+}, W.prototype.render = V, x = [], ye = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, ge = function(e, _) {
+  return e.__v.__b - _.__v.__b;
+}, j.__r = 0, be = /(PointerCapture)$|Capture$/i, X = 0, J = ie(!1), Y = ie(!0);
+var We = 0;
+function h(e, _, t, n, l, r) {
+  _ || (_ = {});
+  var i, s, f = _;
+  if ("ref" in f) for (s in f = {}, _) s == "ref" ? i = _[s] : f[s] = _[s];
+  var c = { type: e, props: f, key: t, ref: i, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --We, __i: -1, __u: 0, __source: l, __self: r };
+  if (typeof e == "function" && (i = e.defaultProps)) for (s in i) f[s] === void 0 && (f[s] = i[s]);
+  return d.vnode && d.vnode(c), c;
+}
+var N, b, G, ce, q = 0, Pe = [], k = d, se = k.__b, ue = k.__r, ae = k.diffed, fe = k.__c, pe = k.unmount, he = k.__;
+function te(e, _) {
+  k.__h && k.__h(b, e, q || _), q = 0;
+  var t = b.__H || (b.__H = { __: [], __h: [] });
+  return e >= t.__.length && t.__.push({}), t.__[e];
+}
+function I(e) {
+  return q = 1, Ie(Ee, e);
+}
+function Ie(e, _, t) {
+  var n = te(N++, 2);
+  if (n.t = e, !n.__c && (n.__ = [Ee(void 0, _), function(s) {
+    var f = n.__N ? n.__N[0] : n.__[0], c = n.t(f, s);
+    f !== c && (n.__N = [c, n.__[1]], n.__c.setState({}));
+  }], n.__c = b, !b.__f)) {
+    var l = function(s, f, c) {
+      if (!n.__c.__H) return !0;
+      var p = n.__c.__H.__.filter(function(a) {
+        return !!a.__c;
+      });
+      if (p.every(function(a) {
+        return !a.__N;
+      })) return !r || r.call(this, s, f, c);
+      var o = n.__c.props !== s;
+      return p.forEach(function(a) {
+        if (a.__N) {
+          var u = a.__[0];
+          a.__ = a.__N, a.__N = void 0, u !== a.__[0] && (o = !0);
+        }
+      }), r && r.call(this, s, f, c) || o;
+    };
+    b.__f = !0;
+    var r = b.shouldComponentUpdate, i = b.componentWillUpdate;
+    b.componentWillUpdate = function(s, f, c) {
+      if (this.__e) {
+        var p = r;
+        r = void 0, l(s, f, c), r = p;
+      }
+      i && i.call(this, s, f, c);
+    }, b.shouldComponentUpdate = l;
+  }
+  return n.__N || n.__;
+}
+function Re(e, _) {
+  var t = te(N++, 3);
+  !k.__s && Te(t.__H, _) && (t.__ = e, t.u = _, b.__H.__h.push(t));
+}
+function de(e) {
+  return q = 5, je(function() {
+    return { current: e };
+  }, []);
+}
+function je(e, _) {
+  var t = te(N++, 7);
+  return Te(t.__H, _) && (t.__ = e(), t.__H = _, t.__h = e), t.__;
+}
+function qe() {
+  for (var e; e = Pe.shift(); ) if (e.__P && e.__H) try {
+    e.__H.__h.forEach(R), e.__H.__h.forEach(Q), e.__H.__h = [];
+  } catch (_) {
+    e.__H.__h = [], k.__e(_, e.__v);
+  }
+}
+k.__b = function(e) {
+  b = null, se && se(e);
+}, k.__ = function(e, _) {
+  e && _.__k && _.__k.__m && (e.__m = _.__k.__m), he && he(e, _);
+}, k.__r = function(e) {
+  ue && ue(e), N = 0;
+  var _ = (b = e.__c).__H;
+  _ && (G === b ? (_.__h = [], b.__h = [], _.__.forEach(function(t) {
+    t.__N && (t.__ = t.__N), t.u = t.__N = void 0;
+  })) : (_.__h.forEach(R), _.__h.forEach(Q), _.__h = [], N = 0)), G = b;
+}, k.diffed = function(e) {
+  ae && ae(e);
+  var _ = e.__c;
+  _ && _.__H && (_.__H.__h.length && (Pe.push(_) !== 1 && ce === k.requestAnimationFrame || ((ce = k.requestAnimationFrame) || Be)(qe)), _.__H.__.forEach(function(t) {
+    t.u && (t.__H = t.u), t.u = void 0;
+  })), G = b = null;
+}, k.__c = function(e, _) {
+  _.some(function(t) {
+    try {
+      t.__h.forEach(R), t.__h = t.__h.filter(function(n) {
+        return !n.__ || Q(n);
+      });
+    } catch (n) {
+      _.some(function(l) {
+        l.__h && (l.__h = []);
+      }), _ = [], k.__e(n, t.__v);
+    }
+  }), fe && fe(e, _);
+}, k.unmount = function(e) {
+  pe && pe(e);
+  var _, t = e.__c;
+  t && t.__H && (t.__H.__.forEach(function(n) {
+    try {
+      R(n);
+    } catch (l) {
+      _ = l;
+    }
+  }), t.__H = void 0, _ && k.__e(_, t.__v));
+};
+var ve = typeof requestAnimationFrame == "function";
+function Be(e) {
+  var _, t = function() {
+    clearTimeout(n), ve && cancelAnimationFrame(_), setTimeout(e);
+  }, n = setTimeout(t, 35);
+  ve && (_ = requestAnimationFrame(t));
+}
+function R(e) {
+  var _ = b, t = e.__c;
+  typeof t == "function" && (e.__c = void 0, t()), b = _;
+}
+function Q(e) {
+  var _ = b;
+  e.__c = e.__(), b = _;
+}
+function Te(e, _) {
+  return !e || e.length !== _.length || _.some(function(t, n) {
+    return t !== e[n];
+  });
+}
+function Ee(e, _) {
+  return typeof _ == "function" ? _(e) : _;
+}
+function Oe({ field: e, value: _, onChange: t }) {
+  return e.type === "boolean" ? /* @__PURE__ */ h("div", { class: "field", children: /* @__PURE__ */ h("label", { class: "checkbox-label", children: [
+    /* @__PURE__ */ h(
+      "input",
+      {
+        type: "checkbox",
+        checked: !!_,
+        onChange: (n) => t(n.target.checked)
+      }
+    ),
+    e.label
+  ] }) }) : e.type === "enum" && e.options ? /* @__PURE__ */ h("div", { class: "field", children: [
+    /* @__PURE__ */ h("label", { children: e.label }),
+    /* @__PURE__ */ h(
+      "select",
+      {
+        value: String(_),
+        onChange: (n) => t(n.target.value),
+        children: e.options.map((n) => /* @__PURE__ */ h("option", { value: n.value, children: n.label }, n.value))
+      }
+    )
+  ] }) : e.type === "number" ? /* @__PURE__ */ h("div", { class: "field", children: [
+    /* @__PURE__ */ h("label", { children: e.label }),
+    /* @__PURE__ */ h(
+      "input",
+      {
+        type: "number",
+        value: _,
+        onInput: (n) => t(parseFloat(n.target.value) || 0)
+      }
+    )
+  ] }) : /* @__PURE__ */ h("div", { class: "field", children: [
+    /* @__PURE__ */ h("label", { children: e.label }),
+    /* @__PURE__ */ h(
+      "input",
+      {
+        type: "text",
+        value: String(_),
+        onInput: (n) => t(n.target.value)
+      }
+    )
+  ] });
+}
+function Ve({
+  component: e,
+  overrides: _,
+  onFieldChange: t
+}) {
+  const [n, l] = I(!0);
+  return /* @__PURE__ */ h("div", { class: `component-section ${n ? "collapsed" : ""}`, children: [
+    /* @__PURE__ */ h("div", { class: "component-header", onClick: () => l(!n), children: [
+      /* @__PURE__ */ h("h3", { children: e.label }),
+      /* @__PURE__ */ h("span", { class: "collapse-icon", children: "▼" })
+    ] }),
+    !n && /* @__PURE__ */ h("div", { class: "component-fields", children: e.fields.map((r) => {
+      const i = _[e.name]?.[r.liquid_variable] ?? r.default_value;
+      return /* @__PURE__ */ h(
+        Oe,
+        {
+          field: r,
+          value: i,
+          onChange: (s) => t(e.name, r.liquid_variable, s)
+        },
+        r.liquid_variable
+      );
+    }) })
+  ] });
+}
+function ze() {
+  const [e, _] = I(null), [t, n] = I({}), [l, r] = I(!1), i = de(null), s = de(null);
+  Re(() => {
+    fetch("./fields.json").then((a) => a.json()).then(_);
+  }, []);
+  const f = (a, u, y) => {
+    n((w) => ({
+      ...w,
+      [a]: {
+        ...w[a],
+        [u]: y
+      }
+    })), i.current && clearTimeout(i.current), i.current = window.setTimeout(() => {
+      c({
+        ...t,
+        [a]: {
+          ...t[a],
+          [u]: y
+        }
+      });
+    }, 300);
+  }, c = async (a) => {
+    r(!0);
+    try {
+      const u = s.current?.contentWindow?.scrollY ?? 0, w = await (await fetch("/api/render", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(a)
+      })).json();
+      if (w.html && s.current) {
+        const g = s.current;
+        g.srcdoc = w.html, g.onload = () => {
+          g.contentWindow?.scrollTo(0, u);
+        };
+      } else w.error && console.error("Render error:", w.error);
+    } catch (u) {
+      console.error("Failed to update preview:", u);
+    } finally {
+      r(!1);
+    }
+  }, p = () => {
+    n({}), s.current && (s.current.removeAttribute("srcdoc"), s.current.src = "./rendered.html");
+  };
+  if (!e)
+    return /* @__PURE__ */ h("div", { class: "panel", children: "Loading..." });
+  const o = [e.container_component, ...e.components];
+  return /* @__PURE__ */ h("div", { class: "container", children: [
+    /* @__PURE__ */ h("div", { class: "panel", children: [
+      /* @__PURE__ */ h("div", { class: "panel-header", children: [
+        /* @__PURE__ */ h("h2", { children: "Preview Values" }),
+        /* @__PURE__ */ h("p", { children: "Adjust field values to preview how your components will look with different content." }),
+        /* @__PURE__ */ h("button", { class: "reset-btn", onClick: p, children: "Reset All" })
+      ] }),
+      /* @__PURE__ */ h("div", { class: "fields-container", children: o.map((a) => /* @__PURE__ */ h(
+        Ve,
+        {
+          component: a,
+          overrides: t,
+          onFieldChange: f
+        },
+        a.name
+      )) })
+    ] }),
+    /* @__PURE__ */ h("div", { class: "preview", children: [
+      /* @__PURE__ */ h("div", { class: `loading-overlay ${l ? "visible" : ""}`, children: /* @__PURE__ */ h("div", { class: "spinner" }) }),
+      /* @__PURE__ */ h("iframe", { ref: s, src: "./rendered.html" })
+    ] })
+  ] });
+}
+Le(/* @__PURE__ */ h(ze, {}), document.getElementById("app"));

package/dist/templates/devWrapper.html

@@ -6,7 +6,7 @@
     <title>EmailShepherd Dev</title>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+      html, body, #app { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
       .container { display: flex; height: 100%; }
       .panel {
         width: 320px;
@@ -118,164 +118,7 @@
     </style>
   </head>
   <body>
-    <div class="container">
-      <div class="panel" id="panel">
-        <div class="panel-header">
-          <h2>Preview Values</h2>
-          <p>Adjust field values to preview how your components will look with different content.</p>
-          <button class="reset-btn" id="reset-btn">Reset All</button>
-        </div>
-        <div id="fields-container"></div>
-      </div>
-      <div class="preview">
-        <div class="loading-overlay" id="loading-overlay"><div class="spinner"></div></div>
-        <iframe id="preview-frame" src="./rendered.html"></iframe>
-      </div>
-    </div>
-    <script>
-      let fieldsManifest = null;
-      let overrides = {};
-      let debounceTimer = null;
-      let collapsedSections = {};
-
-      async function loadFields() {
-        const res = await fetch('./fields.json');
-        fieldsManifest = await res.json();
-        renderForm();
-      }
-
-      function renderForm() {
-        const container = document.getElementById('fields-container');
-        container.innerHTML = '';
-
-        // Container component
-        container.appendChild(createComponentSection(fieldsManifest.container_component));
-
-        // Regular components
-        for (const component of fieldsManifest.components) {
-          container.appendChild(createComponentSection(component));
-        }
-      }
-
-      function createComponentSection(component) {
-        const section = document.createElement('div');
-        section.className = 'component-section';
-        // Collapsed by default unless explicitly expanded
-        if (collapsedSections[component.name] !== false) {
-          section.classList.add('collapsed');
-        }
-
-        const header = document.createElement('div');
-        header.className = 'component-header';
-        header.innerHTML = '<h3>' + escapeHtml(component.label) + '</h3><span class="collapse-icon">▼</span>';
-        header.addEventListener('click', () => {
-          section.classList.toggle('collapsed');
-          collapsedSections[component.name] = !section.classList.contains('collapsed');
-        });
-        section.appendChild(header);
-
-        const fields = document.createElement('div');
-        fields.className = 'component-fields';
-        for (const field of component.fields) {
-          fields.appendChild(createFieldInput(component.name, field));
-        }
-        section.appendChild(fields);
-
-        return section;
-      }
-
-      function createFieldInput(componentName, field) {
-        const div = document.createElement('div');
-        div.className = 'field';
-
-        const defaultValue = field.default_value;
-        const currentValue = overrides[componentName]?.[field.liquid_variable] ?? defaultValue;
-
-        if (field.type === 'boolean') {
-          const id = componentName + '_' + field.liquid_variable;
-          div.innerHTML = '<label class="checkbox-label"><input type="checkbox" id="' + id + '" ' + (currentValue ? 'checked' : '') + '> ' + escapeHtml(field.label) + '</label>';
-          const input = div.querySelector('input');
-          input.addEventListener('change', () => handleChange(componentName, field.liquid_variable, input.checked));
-        } else if (field.type === 'enum') {
-          div.innerHTML = '<label>' + escapeHtml(field.label) + '</label>';
-          const select = document.createElement('select');
-          for (const opt of field.options) {
-            const option = document.createElement('option');
-            option.value = opt.value;
-            option.textContent = opt.label;
-            if (opt.value === currentValue) option.selected = true;
-            select.appendChild(option);
-          }
-          select.addEventListener('change', () => handleChange(componentName, field.liquid_variable, select.value));
-          div.appendChild(select);
-        } else if (field.type === 'number') {
-          div.innerHTML = '<label>' + escapeHtml(field.label) + '</label><input type="number" value="' + escapeHtml(String(currentValue)) + '">';
-          const input = div.querySelector('input');
-          input.addEventListener('input', () => handleChange(componentName, field.liquid_variable, parseFloat(input.value) || 0));
-        } else {
-          div.innerHTML = '<label>' + escapeHtml(field.label) + '</label><input type="text" value="' + escapeHtml(String(currentValue)) + '">';
-          const input = div.querySelector('input');
-          input.addEventListener('input', () => handleChange(componentName, field.liquid_variable, input.value));
-        }
-
-        return div;
-      }
-
-      function handleChange(componentName, fieldName, value) {
-        if (!overrides[componentName]) overrides[componentName] = {};
-        overrides[componentName][fieldName] = value;
-
-        clearTimeout(debounceTimer);
-        debounceTimer = setTimeout(updatePreview, 300);
-      }
-
-      function resetAll() {
-        overrides = {};
-        renderForm();
-        const frame = document.getElementById('preview-frame');
-        frame.removeAttribute('srcdoc');
-        frame.src = './rendered.html';
-      }
-
-      function setLoading(loading) {
-        const overlay = document.getElementById('loading-overlay');
-        if (loading) {
-          overlay.classList.add('visible');
-        } else {
-          overlay.classList.remove('visible');
-        }
-      }
-
-      async function updatePreview() {
-        setLoading(true);
-
-        try {
-          const res = await fetch('/api/render', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(overrides),
-          });
-          const data = await res.json();
-
-          if (data.html) {
-            const frame = document.getElementById('preview-frame');
-            frame.srcdoc = data.html;
-          } else if (data.error) {
-            console.error('Render error:', data.error);
-          }
-        } catch (err) {
-          console.error('Failed to update preview:', err);
-        } finally {
-          setLoading(false);
-        }
-      }
-
-      function escapeHtml(str) {
-        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-      }
-
-      document.getElementById('reset-btn').addEventListener('click', resetAll);
-      loadFields();
-    </script>
+    <div id="app"></div>
+    <script type="module" src="./dev-ui.js"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emailshepherd/cli",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -23,11 +23,13 @@
     "chokidar": "^4.0.3",
     "commander": "^14.0.2",
     "dotenv": "^17.2.3",
+    "preact": "^10.28.1",
     "update-notifier": "^7.3.1",
     "vite": "^7.2.6",
     "vite-plugin-checker": "^0.12.0"
   },
   "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
     "@types/node": "^24.10.1",
     "@types/update-notifier": "^6.0.8",
     "msw": "^2.12.7",
@@ -38,7 +40,10 @@
     "@emailshepherd/api-client": "0.0.0"
   },
   "scripts": {
-    "build": "tsup && cp -r src/templates dist/",
+    "typecheck": "tsc",
+    "build:cli": "tsup",
+    "build:dev-ui": "vite build",
+    "build": "pnpm run typecheck && pnpm run build:cli && pnpm run build:dev-ui && cp -r src/templates dist/",
     "test": "vitest run",
     "test:watch": "vitest"
   }