@studiometa/playground-preview 0.3.4

package/dist/element.js

@@ -0,0 +1,1177 @@
+// ../../node_modules/fflate/esm/browser.js
+var u8 = Uint8Array;
+var u16 = Uint16Array;
+var i32 = Int32Array;
+var fleb = new u8([
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  1,
+  1,
+  1,
+  2,
+  2,
+  2,
+  2,
+  3,
+  3,
+  3,
+  3,
+  4,
+  4,
+  4,
+  4,
+  5,
+  5,
+  5,
+  5,
+  0,
+  /* unused */
+  0,
+  0,
+  /* impossible */
+  0
+]);
+var fdeb = new u8([
+  0,
+  0,
+  0,
+  0,
+  1,
+  1,
+  2,
+  2,
+  3,
+  3,
+  4,
+  4,
+  5,
+  5,
+  6,
+  6,
+  7,
+  7,
+  8,
+  8,
+  9,
+  9,
+  10,
+  10,
+  11,
+  11,
+  12,
+  12,
+  13,
+  13,
+  /* unused */
+  0,
+  0
+]);
+var clim = new u8([16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15]);
+var freb = function(eb, start) {
+  var b = new u16(31);
+  for (var i = 0; i < 31; ++i) {
+    b[i] = start += 1 << eb[i - 1];
+  }
+  var r = new i32(b[30]);
+  for (var i = 1; i < 30; ++i) {
+    for (var j = b[i]; j < b[i + 1]; ++j) {
+      r[j] = j - b[i] << 5 | i;
+    }
+  }
+  return { b, r };
+};
+var _a = freb(fleb, 2);
+var fl = _a.b;
+var revfl = _a.r;
+fl[28] = 258, revfl[258] = 28;
+var _b = freb(fdeb, 0);
+var fd = _b.b;
+var revfd = _b.r;
+var rev = new u16(32768);
+for (i = 0; i < 32768; ++i) {
+  x = (i & 43690) >> 1 | (i & 21845) << 1;
+  x = (x & 52428) >> 2 | (x & 13107) << 2;
+  x = (x & 61680) >> 4 | (x & 3855) << 4;
+  rev[i] = ((x & 65280) >> 8 | (x & 255) << 8) >> 1;
+}
+var x;
+var i;
+var hMap = function(cd, mb, r) {
+  var s = cd.length;
+  var i = 0;
+  var l = new u16(mb);
+  for (; i < s; ++i) {
+    if (cd[i])
+      ++l[cd[i] - 1];
+  }
+  var le = new u16(mb);
+  for (i = 1; i < mb; ++i) {
+    le[i] = le[i - 1] + l[i - 1] << 1;
+  }
+  var co;
+  if (r) {
+    co = new u16(1 << mb);
+    var rvb = 15 - mb;
+    for (i = 0; i < s; ++i) {
+      if (cd[i]) {
+        var sv = i << 4 | cd[i];
+        var r_1 = mb - cd[i];
+        var v = le[cd[i] - 1]++ << r_1;
+        for (var m = v | (1 << r_1) - 1; v <= m; ++v) {
+          co[rev[v] >> rvb] = sv;
+        }
+      }
+    }
+  } else {
+    co = new u16(s);
+    for (i = 0; i < s; ++i) {
+      if (cd[i]) {
+        co[i] = rev[le[cd[i] - 1]++] >> 15 - cd[i];
+      }
+    }
+  }
+  return co;
+};
+var flt = new u8(288);
+for (i = 0; i < 144; ++i)
+  flt[i] = 8;
+var i;
+for (i = 144; i < 256; ++i)
+  flt[i] = 9;
+var i;
+for (i = 256; i < 280; ++i)
+  flt[i] = 7;
+var i;
+for (i = 280; i < 288; ++i)
+  flt[i] = 8;
+var i;
+var fdt = new u8(32);
+for (i = 0; i < 32; ++i)
+  fdt[i] = 5;
+var i;
+var flm = /* @__PURE__ */ hMap(flt, 9, 0);
+var fdm = /* @__PURE__ */ hMap(fdt, 5, 0);
+var shft = function(p) {
+  return (p + 7) / 8 | 0;
+};
+var slc = function(v, s, e) {
+  if (s == null || s < 0)
+    s = 0;
+  if (e == null || e > v.length)
+    e = v.length;
+  return new u8(v.subarray(s, e));
+};
+var ec = [
+  "unexpected EOF",
+  "invalid block type",
+  "invalid length/literal",
+  "invalid distance",
+  "stream finished",
+  "no stream handler",
+  ,
+  "no callback",
+  "invalid UTF-8 data",
+  "extra field too long",
+  "date not in range 1980-2099",
+  "filename too long",
+  "stream finishing",
+  "invalid zip data"
+  // determined by unknown compression method
+];
+var err = function(ind, msg, nt) {
+  var e = new Error(msg || ec[ind]);
+  e.code = ind;
+  if (Error.captureStackTrace)
+    Error.captureStackTrace(e, err);
+  if (!nt)
+    throw e;
+  return e;
+};
+var wbits = function(d, p, v) {
+  v <<= p & 7;
+  var o = p / 8 | 0;
+  d[o] |= v;
+  d[o + 1] |= v >> 8;
+};
+var wbits16 = function(d, p, v) {
+  v <<= p & 7;
+  var o = p / 8 | 0;
+  d[o] |= v;
+  d[o + 1] |= v >> 8;
+  d[o + 2] |= v >> 16;
+};
+var hTree = function(d, mb) {
+  var t = [];
+  for (var i = 0; i < d.length; ++i) {
+    if (d[i])
+      t.push({ s: i, f: d[i] });
+  }
+  var s = t.length;
+  var t2 = t.slice();
+  if (!s)
+    return { t: et, l: 0 };
+  if (s == 1) {
+    var v = new u8(t[0].s + 1);
+    v[t[0].s] = 1;
+    return { t: v, l: 1 };
+  }
+  t.sort(function(a, b) {
+    return a.f - b.f;
+  });
+  t.push({ s: -1, f: 25001 });
+  var l = t[0], r = t[1], i0 = 0, i1 = 1, i2 = 2;
+  t[0] = { s: -1, f: l.f + r.f, l, r };
+  while (i1 != s - 1) {
+    l = t[t[i0].f < t[i2].f ? i0++ : i2++];
+    r = t[i0 != i1 && t[i0].f < t[i2].f ? i0++ : i2++];
+    t[i1++] = { s: -1, f: l.f + r.f, l, r };
+  }
+  var maxSym = t2[0].s;
+  for (var i = 1; i < s; ++i) {
+    if (t2[i].s > maxSym)
+      maxSym = t2[i].s;
+  }
+  var tr = new u16(maxSym + 1);
+  var mbt = ln(t[i1 - 1], tr, 0);
+  if (mbt > mb) {
+    var i = 0, dt = 0;
+    var lft = mbt - mb, cst = 1 << lft;
+    t2.sort(function(a, b) {
+      return tr[b.s] - tr[a.s] || a.f - b.f;
+    });
+    for (; i < s; ++i) {
+      var i2_1 = t2[i].s;
+      if (tr[i2_1] > mb) {
+        dt += cst - (1 << mbt - tr[i2_1]);
+        tr[i2_1] = mb;
+      } else
+        break;
+    }
+    dt >>= lft;
+    while (dt > 0) {
+      var i2_2 = t2[i].s;
+      if (tr[i2_2] < mb)
+        dt -= 1 << mb - tr[i2_2]++ - 1;
+      else
+        ++i;
+    }
+    for (; i >= 0 && dt; --i) {
+      var i2_3 = t2[i].s;
+      if (tr[i2_3] == mb) {
+        --tr[i2_3];
+        ++dt;
+      }
+    }
+    mbt = mb;
+  }
+  return { t: new u8(tr), l: mbt };
+};
+var ln = function(n, l, d) {
+  return n.s == -1 ? Math.max(ln(n.l, l, d + 1), ln(n.r, l, d + 1)) : l[n.s] = d;
+};
+var lc = function(c) {
+  var s = c.length;
+  while (s && !c[--s])
+    ;
+  var cl = new u16(++s);
+  var cli = 0, cln = c[0], cls = 1;
+  var w = function(v) {
+    cl[cli++] = v;
+  };
+  for (var i = 1; i <= s; ++i) {
+    if (c[i] == cln && i != s)
+      ++cls;
+    else {
+      if (!cln && cls > 2) {
+        for (; cls > 138; cls -= 138)
+          w(32754);
+        if (cls > 2) {
+          w(cls > 10 ? cls - 11 << 5 | 28690 : cls - 3 << 5 | 12305);
+          cls = 0;
+        }
+      } else if (cls > 3) {
+        w(cln), --cls;
+        for (; cls > 6; cls -= 6)
+          w(8304);
+        if (cls > 2)
+          w(cls - 3 << 5 | 8208), cls = 0;
+      }
+      while (cls--)
+        w(cln);
+      cls = 1;
+      cln = c[i];
+    }
+  }
+  return { c: cl.subarray(0, cli), n: s };
+};
+var clen = function(cf, cl) {
+  var l = 0;
+  for (var i = 0; i < cl.length; ++i)
+    l += cf[i] * cl[i];
+  return l;
+};
+var wfblk = function(out, pos, dat) {
+  var s = dat.length;
+  var o = shft(pos + 2);
+  out[o] = s & 255;
+  out[o + 1] = s >> 8;
+  out[o + 2] = out[o] ^ 255;
+  out[o + 3] = out[o + 1] ^ 255;
+  for (var i = 0; i < s; ++i)
+    out[o + i + 4] = dat[i];
+  return (o + 4 + s) * 8;
+};
+var wblk = function(dat, out, final, syms, lf, df, eb, li, bs, bl, p) {
+  wbits(out, p++, final);
+  ++lf[256];
+  var _a2 = hTree(lf, 15), dlt = _a2.t, mlb = _a2.l;
+  var _b2 = hTree(df, 15), ddt = _b2.t, mdb = _b2.l;
+  var _c = lc(dlt), lclt = _c.c, nlc = _c.n;
+  var _d = lc(ddt), lcdt = _d.c, ndc = _d.n;
+  var lcfreq = new u16(19);
+  for (var i = 0; i < lclt.length; ++i)
+    ++lcfreq[lclt[i] & 31];
+  for (var i = 0; i < lcdt.length; ++i)
+    ++lcfreq[lcdt[i] & 31];
+  var _e = hTree(lcfreq, 7), lct = _e.t, mlcb = _e.l;
+  var nlcc = 19;
+  for (; nlcc > 4 && !lct[clim[nlcc - 1]]; --nlcc)
+    ;
+  var flen = bl + 5 << 3;
+  var ftlen = clen(lf, flt) + clen(df, fdt) + eb;
+  var dtlen = clen(lf, dlt) + clen(df, ddt) + eb + 14 + 3 * nlcc + clen(lcfreq, lct) + 2 * lcfreq[16] + 3 * lcfreq[17] + 7 * lcfreq[18];
+  if (bs >= 0 && flen <= ftlen && flen <= dtlen)
+    return wfblk(out, p, dat.subarray(bs, bs + bl));
+  var lm, ll, dm, dl;
+  wbits(out, p, 1 + (dtlen < ftlen)), p += 2;
+  if (dtlen < ftlen) {
+    lm = hMap(dlt, mlb, 0), ll = dlt, dm = hMap(ddt, mdb, 0), dl = ddt;
+    var llm = hMap(lct, mlcb, 0);
+    wbits(out, p, nlc - 257);
+    wbits(out, p + 5, ndc - 1);
+    wbits(out, p + 10, nlcc - 4);
+    p += 14;
+    for (var i = 0; i < nlcc; ++i)
+      wbits(out, p + 3 * i, lct[clim[i]]);
+    p += 3 * nlcc;
+    var lcts = [lclt, lcdt];
+    for (var it = 0; it < 2; ++it) {
+      var clct = lcts[it];
+      for (var i = 0; i < clct.length; ++i) {
+        var len = clct[i] & 31;
+        wbits(out, p, llm[len]), p += lct[len];
+        if (len > 15)
+          wbits(out, p, clct[i] >> 5 & 127), p += clct[i] >> 12;
+      }
+    }
+  } else {
+    lm = flm, ll = flt, dm = fdm, dl = fdt;
+  }
+  for (var i = 0; i < li; ++i) {
+    var sym = syms[i];
+    if (sym > 255) {
+      var len = sym >> 18 & 31;
+      wbits16(out, p, lm[len + 257]), p += ll[len + 257];
+      if (len > 7)
+        wbits(out, p, sym >> 23 & 31), p += fleb[len];
+      var dst = sym & 31;
+      wbits16(out, p, dm[dst]), p += dl[dst];
+      if (dst > 3)
+        wbits16(out, p, sym >> 5 & 8191), p += fdeb[dst];
+    } else {
+      wbits16(out, p, lm[sym]), p += ll[sym];
+    }
+  }
+  wbits16(out, p, lm[256]);
+  return p + ll[256];
+};
+var deo = /* @__PURE__ */ new i32([65540, 131080, 131088, 131104, 262176, 1048704, 1048832, 2114560, 2117632]);
+var et = /* @__PURE__ */ new u8(0);
+var dflt = function(dat, lvl, plvl, pre, post, st) {
+  var s = st.z || dat.length;
+  var o = new u8(pre + s + 5 * (1 + Math.ceil(s / 7e3)) + post);
+  var w = o.subarray(pre, o.length - post);
+  var lst = st.l;
+  var pos = (st.r || 0) & 7;
+  if (lvl) {
+    if (pos)
+      w[0] = st.r >> 3;
+    var opt = deo[lvl - 1];
+    var n = opt >> 13, c = opt & 8191;
+    var msk_1 = (1 << plvl) - 1;
+    var prev = st.p || new u16(32768), head = st.h || new u16(msk_1 + 1);
+    var bs1_1 = Math.ceil(plvl / 3), bs2_1 = 2 * bs1_1;
+    var hsh = function(i2) {
+      return (dat[i2] ^ dat[i2 + 1] << bs1_1 ^ dat[i2 + 2] << bs2_1) & msk_1;
+    };
+    var syms = new i32(25e3);
+    var lf = new u16(288), df = new u16(32);
+    var lc_1 = 0, eb = 0, i = st.i || 0, li = 0, wi = st.w || 0, bs = 0;
+    for (; i + 2 < s; ++i) {
+      var hv = hsh(i);
+      var imod = i & 32767, pimod = head[hv];
+      prev[imod] = pimod;
+      head[hv] = imod;
+      if (wi <= i) {
+        var rem = s - i;
+        if ((lc_1 > 7e3 || li > 24576) && (rem > 423 || !lst)) {
+          pos = wblk(dat, w, 0, syms, lf, df, eb, li, bs, i - bs, pos);
+          li = lc_1 = eb = 0, bs = i;
+          for (var j = 0; j < 286; ++j)
+            lf[j] = 0;
+          for (var j = 0; j < 30; ++j)
+            df[j] = 0;
+        }
+        var l = 2, d = 0, ch_1 = c, dif = imod - pimod & 32767;
+        if (rem > 2 && hv == hsh(i - dif)) {
+          var maxn = Math.min(n, rem) - 1;
+          var maxd = Math.min(32767, i);
+          var ml = Math.min(258, rem);
+          while (dif <= maxd && --ch_1 && imod != pimod) {
+            if (dat[i + l] == dat[i + l - dif]) {
+              var nl = 0;
+              for (; nl < ml && dat[i + nl] == dat[i + nl - dif]; ++nl)
+                ;
+              if (nl > l) {
+                l = nl, d = dif;
+                if (nl > maxn)
+                  break;
+                var mmd = Math.min(dif, nl - 2);
+                var md = 0;
+                for (var j = 0; j < mmd; ++j) {
+                  var ti = i - dif + j & 32767;
+                  var pti = prev[ti];
+                  var cd = ti - pti & 32767;
+                  if (cd > md)
+                    md = cd, pimod = ti;
+                }
+              }
+            }
+            imod = pimod, pimod = prev[imod];
+            dif += imod - pimod & 32767;
+          }
+        }
+        if (d) {
+          syms[li++] = 268435456 | revfl[l] << 18 | revfd[d];
+          var lin = revfl[l] & 31, din = revfd[d] & 31;
+          eb += fleb[lin] + fdeb[din];
+          ++lf[257 + lin];
+          ++df[din];
+          wi = i + l;
+          ++lc_1;
+        } else {
+          syms[li++] = dat[i];
+          ++lf[dat[i]];
+        }
+      }
+    }
+    for (i = Math.max(i, wi); i < s; ++i) {
+      syms[li++] = dat[i];
+      ++lf[dat[i]];
+    }
+    pos = wblk(dat, w, lst, syms, lf, df, eb, li, bs, i - bs, pos);
+    if (!lst) {
+      st.r = pos & 7 | w[pos / 8 | 0] << 3;
+      pos -= 7;
+      st.h = head, st.p = prev, st.i = i, st.w = wi;
+    }
+  } else {
+    for (var i = st.w || 0; i < s + lst; i += 65535) {
+      var e = i + 65535;
+      if (e >= s) {
+        w[pos / 8 | 0] = lst;
+        e = s;
+      }
+      pos = wfblk(w, pos + 1, dat.subarray(i, e));
+    }
+    st.i = s;
+  }
+  return slc(o, 0, pre + shft(pos) + post);
+};
+var adler = function() {
+  var a = 1, b = 0;
+  return {
+    p: function(d) {
+      var n = a, m = b;
+      var l = d.length | 0;
+      for (var i = 0; i != l; ) {
+        var e = Math.min(i + 2655, l);
+        for (; i < e; ++i)
+          m += n += d[i];
+        n = (n & 65535) + 15 * (n >> 16), m = (m & 65535) + 15 * (m >> 16);
+      }
+      a = n, b = m;
+    },
+    d: function() {
+      a %= 65521, b %= 65521;
+      return (a & 255) << 24 | (a & 65280) << 8 | (b & 255) << 8 | b >> 8;
+    }
+  };
+};
+var dopt = function(dat, opt, pre, post, st) {
+  if (!st) {
+    st = { l: 1 };
+    if (opt.dictionary) {
+      var dict = opt.dictionary.subarray(-32768);
+      var newDat = new u8(dict.length + dat.length);
+      newDat.set(dict);
+      newDat.set(dat, dict.length);
+      dat = newDat;
+      st.w = dict.length;
+    }
+  }
+  return dflt(dat, opt.level == null ? 6 : opt.level, opt.mem == null ? st.l ? Math.ceil(Math.max(8, Math.min(13, Math.log(dat.length))) * 1.5) : 20 : 12 + opt.mem, pre, post, st);
+};
+var wbytes = function(d, b, v) {
+  for (; v; ++b)
+    d[b] = v, v >>>= 8;
+};
+var zlh = function(c, o) {
+  var lv = o.level, fl2 = lv == 0 ? 0 : lv < 6 ? 1 : lv == 9 ? 3 : 2;
+  c[0] = 120, c[1] = fl2 << 6 | (o.dictionary && 32);
+  c[1] |= 31 - (c[0] << 8 | c[1]) % 31;
+  if (o.dictionary) {
+    var h = adler();
+    h.p(o.dictionary);
+    wbytes(c, 2, h.d());
+  }
+};
+function zlibSync(data, opts) {
+  if (!opts)
+    opts = {};
+  var a = adler();
+  a.p(data);
+  var d = dopt(data, opts, opts.dictionary ? 6 : 2, 4);
+  return zlh(d, opts), wbytes(d, d.length - 4, a.d()), d;
+}
+var te = typeof TextEncoder != "undefined" && /* @__PURE__ */ new TextEncoder();
+var td = typeof TextDecoder != "undefined" && /* @__PURE__ */ new TextDecoder();
+var tds = 0;
+try {
+  td.decode(et, { stream: true });
+  tds = 1;
+} catch (e) {
+}
+var dutf8 = function(d) {
+  for (var r = "", i = 0; ; ) {
+    var c = d[i++];
+    var eb = (c > 127) + (c > 223) + (c > 239);
+    if (i + eb > d.length)
+      return { s: r, r: slc(d, i - 1) };
+    if (!eb)
+      r += String.fromCharCode(c);
+    else if (eb == 3) {
+      c = ((c & 15) << 18 | (d[i++] & 63) << 12 | (d[i++] & 63) << 6 | d[i++] & 63) - 65536, r += String.fromCharCode(55296 | c >> 10, 56320 | c & 1023);
+    } else if (eb & 1)
+      r += String.fromCharCode((c & 31) << 6 | d[i++] & 63);
+    else
+      r += String.fromCharCode((c & 15) << 12 | (d[i++] & 63) << 6 | d[i++] & 63);
+  }
+};
+function strToU8(str, latin1) {
+  if (latin1) {
+    var ar_1 = new u8(str.length);
+    for (var i = 0; i < str.length; ++i)
+      ar_1[i] = str.charCodeAt(i);
+    return ar_1;
+  }
+  if (te)
+    return te.encode(str);
+  var l = str.length;
+  var ar = new u8(str.length + (str.length >> 1));
+  var ai = 0;
+  var w = function(v) {
+    ar[ai++] = v;
+  };
+  for (var i = 0; i < l; ++i) {
+    if (ai + 5 > ar.length) {
+      var n = new u8(ai + 8 + (l - i << 1));
+      n.set(ar);
+      ar = n;
+    }
+    var c = str.charCodeAt(i);
+    if (c < 128 || latin1)
+      w(c);
+    else if (c < 2048)
+      w(192 | c >> 6), w(128 | c & 63);
+    else if (c > 55295 && c < 57344)
+      c = 65536 + (c & 1023 << 10) | str.charCodeAt(++i) & 1023, w(240 | c >> 18), w(128 | c >> 12 & 63), w(128 | c >> 6 & 63), w(128 | c & 63);
+    else
+      w(224 | c >> 12), w(128 | c >> 6 & 63), w(128 | c & 63);
+  }
+  return slc(ar, 0, ai);
+}
+function strFromU8(dat, latin1) {
+  if (latin1) {
+    var r = "";
+    for (var i = 0; i < dat.length; i += 16384)
+      r += String.fromCharCode.apply(null, dat.subarray(i, i + 16384));
+    return r;
+  } else if (td) {
+    return td.decode(dat);
+  } else {
+    var _a2 = dutf8(dat), s = _a2.s, r = _a2.r;
+    if (r.length)
+      err(8);
+    return s;
+  }
+}
+
+// src/zip.ts
+function zip(data) {
+  const buffer = strToU8(data);
+  const zipped = zlibSync(buffer, { level: 9 });
+  const binary = strFromU8(zipped, true);
+  return btoa(binary);
+}
+
+// src/styles.ts
+var styles = (
+  /* css */
+  `
+  :host {
+    --pg-bg: #f4f4f5;
+    --pg-bg-dark: #27272a;
+    --pg-controls-bg: rgba(0, 0, 0, 0.55);
+    --pg-controls-bg-hover: rgba(0, 0, 0, 0.75);
+    --pg-controls-color: #fff;
+    --pg-border-color: #e4e4e7;
+    --pg-border-color-dark: #3f3f46;
+    --pg-border-radius: 8px;
+    --pg-loader-color: #a1a1aa;
+    --pg-transition-duration: 200ms;
+
+    display: block;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .container {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--pg-border-radius);
+    border: 1px solid var(--pg-border-color);
+    background: var(--pg-bg);
+    resize: horizontal;
+  }
+
+  :host([theme="dark"]) .container {
+    background: var(--pg-bg-dark);
+    border-color: var(--pg-border-color-dark);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host([theme="auto"]) .container,
+    :host(:not([theme])) .container {
+      background: var(--pg-bg-dark);
+      border-color: var(--pg-border-color-dark);
+    }
+  }
+
+  .iframe-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  iframe {
+    display: block;
+    border: 0;
+    background: #fff;
+    transform-origin: top left;
+    transition: opacity var(--pg-transition-duration) ease;
+  }
+
+  :host([theme="dark"]) iframe {
+    background: #18181b;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host([theme="auto"]) iframe,
+    :host(:not([theme])) iframe {
+      background: #18181b;
+    }
+  }
+
+  iframe.loading {
+    opacity: 0;
+  }
+
+  .controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    gap: 4px;
+    padding: 8px;
+    z-index: 10;
+  }
+
+  .controls button,
+  .controls a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: var(--pg-controls-bg);
+    color: var(--pg-controls-color);
+    cursor: pointer;
+    transition: background-color var(--pg-transition-duration) ease;
+    text-decoration: none;
+  }
+
+  .controls button:hover,
+  .controls a:hover {
+    background: var(--pg-controls-bg-hover);
+  }
+
+  .controls svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--pg-loader-color);
+    pointer-events: none;
+    transition: opacity var(--pg-transition-duration) ease;
+  }
+
+  .loader.hidden {
+    opacity: 0;
+  }
+
+  .loader svg {
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--pg-loader-color);
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 14px;
+  }
+`
+);
+
+// src/icons.ts
+var zoomInIcon = (
+  /* html */
+  `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.5 8C1.5 6.27609 2.18482 4.62279 3.40381 3.40381C4.62279 2.18482 6.27609 1.5 8 1.5C9.72391 1.5 11.3772 2.18482 12.5962 3.40381C13.8152 4.62279 14.5 6.27609 14.5 8C14.5 9.72391 13.8152 11.3772 12.5962 12.5962C11.3772 13.8152 9.72391 14.5 8 14.5C6.27609 14.5 4.62279 13.8152 3.40381 12.5962C2.18482 11.3772 1.5 9.72391 1.5 8ZM8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM8.75 4.75C8.75 4.55109 8.67098 4.36032 8.53033 4.21967C8.38968 4.07902 8.19891 4 8 4C7.80109 4 7.61032 4.07902 7.46967 4.21967C7.32902 4.36032 7.25 4.55109 7.25 4.75V7.25H4.75C4.55109 7.25 4.36032 7.32902 4.21967 7.46967C4.07902 7.61032 4 7.80109 4 8C4 8.19891 4.07902 8.38968 4.21967 8.53033C4.36032 8.67098 4.55109 8.75 4.75 8.75H7.25V11.25C7.25 11.4489 7.32902 11.6397 7.46967 11.7803C7.61032 11.921 7.80109 12 8 12C8.19891 12 8.38968 11.921 8.53033 11.7803C8.67098 11.6397 8.75 11.4489 8.75 11.25V8.75H11.25C11.4489 8.75 11.6397 8.67098 11.7803 8.53033C11.921 8.38968 12 8.19891 12 8C12 7.80109 11.921 7.61032 11.7803 7.46967C11.6397 7.32902 11.4489 7.25 11.25 7.25H8.75V4.75Z"/>
+</svg>`
+);
+var zoomOutIcon = (
+  /* html */
+  `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.5 8C1.5 6.27609 2.18482 4.62279 3.40381 3.40381C4.62279 2.18482 6.27609 1.5 8 1.5C9.72391 1.5 11.3772 2.18482 12.5962 3.40381C13.8152 4.62279 14.5 6.27609 14.5 8C14.5 9.72391 13.8152 11.3772 12.5962 12.5962C11.3772 13.8152 9.72391 14.5 8 14.5C6.27609 14.5 4.62279 13.8152 3.40381 12.5962C2.18482 11.3772 1.5 9.72391 1.5 8ZM8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM4.75 7.25C4.55109 7.25 4.36032 7.32902 4.21967 7.46967C4.07902 7.61032 4 7.80109 4 8C4 8.19891 4.07902 8.38968 4.21967 8.53033C4.36032 8.67098 4.55109 8.75 4.75 8.75C8.91901 8.75 7.54171 8.75 11.25 8.75C11.4489 8.75 11.6397 8.67098 11.7803 8.53033C11.921 8.38968 12 8.19891 12 8C12 7.80109 11.921 7.61032 11.7803 7.46967C11.6397 7.32902 11.4489 7.25 11.25 7.25C7.54231 7.25 8.91825 7.25 4.75 7.25Z"/>
+</svg>`
+);
+var resetIcon = (
+  /* html */
+  `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
+</svg>`
+);
+var externalLinkIcon = (
+  /* html */
+  `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z"/>
+</svg>`
+);
+var reloadIcon = (
+  /* html */
+  `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0115 8a.75.75 0 01-1.5 0A5.5 5.5 0 008 2.5zM1.75 8a.75.75 0 01.75.75 5.5 5.5 0 009.546 3.727l-1.13-1.13a.25.25 0 01.177-.427h3.607a.25.25 0 01.25.25v3.58a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011 8.75.75.75 0 011.75 8z"/>
+</svg>`
+);
+var loaderIcon = (
+  /* html */
+  `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 12a9 9 0 11-6.219-8.56"/>
+</svg>`
+);
+
+// src/playground-preview.ts
+var DEFAULT_BASE_URL = "https://studiometa-playground.pages.dev";
+var DEFAULT_HEIGHT = "60vh";
+var DEFAULT_ZOOM = 0.9;
+var ZOOM_STEP = 1.1;
+function resolveTheme(theme) {
+  if (theme === "dark" || theme === "light") {
+    return theme;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+var PlaygroundPreview = class extends HTMLElement {
+  static observedAttributes = [
+    "html",
+    "script",
+    "css",
+    "base-url",
+    "height",
+    "zoom",
+    "theme",
+    "no-controls",
+    "header"
+  ];
+  #shadow;
+  #scale = DEFAULT_ZOOM;
+  #iframe = null;
+  #observer = null;
+  #mediaQuery = null;
+  #mediaQueryHandler = null;
+  #isVisible = false;
+  #isConnected = false;
+  // Cached content from <script type="playground/..."> children, read once
+  #childHtml = null;
+  #childScript = null;
+  #childCss = null;
+  // DOM references
+  #container = null;
+  #iframeWrapper = null;
+  #loader = null;
+  #controls = null;
+  #openLink = null;
+  constructor() {
+    super();
+    this.#shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.#isConnected = true;
+    this.#readChildContent();
+    this.#render();
+    this.#setupIntersectionObserver();
+    this.#setupMediaQuery();
+  }
+  disconnectedCallback() {
+    this.#isConnected = false;
+    this.#observer?.disconnect();
+    this.#observer = null;
+    if (this.#mediaQuery && this.#mediaQueryHandler) {
+      this.#mediaQuery.removeEventListener("change", this.#mediaQueryHandler);
+      this.#mediaQuery = null;
+      this.#mediaQueryHandler = null;
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.#isConnected || oldValue === newValue) return;
+    switch (name) {
+      case "height":
+        this.#updateContainerHeight();
+        break;
+      case "zoom":
+        this.#scale = Number(newValue) || DEFAULT_ZOOM;
+        this.#updateIframeScale();
+        break;
+      case "no-controls":
+        this.#updateControlsVisibility();
+        break;
+      case "html":
+      case "script":
+      case "css":
+      case "base-url":
+      case "theme":
+      case "header":
+        if (this.#isVisible) {
+          this.#updateIframeSrc();
+        }
+        break;
+    }
+  }
+  // -------------------------------------------------------
+  // Content resolution
+  // -------------------------------------------------------
+  /**
+   * Read content from <script type="playground/..."> children.
+   * Done once at connectedCallback.
+   */
+  #readChildContent() {
+    for (const script of this.querySelectorAll("script")) {
+      switch (script.type) {
+        case "playground/html":
+          this.#childHtml = script.textContent;
+          break;
+        case "playground/script":
+          this.#childScript = script.textContent;
+          break;
+        case "playground/css":
+          this.#childCss = script.textContent;
+          break;
+      }
+    }
+  }
+  /**
+   * Get content for a given type, preferring child content over attributes.
+   */
+  #getContent(type) {
+    const childContent = type === "html" ? this.#childHtml : type === "script" ? this.#childScript : this.#childCss;
+    if (childContent != null) {
+      return childContent.trim();
+    }
+    return this.getAttribute(type)?.trim() ?? "";
+  }
+  // -------------------------------------------------------
+  // URL building
+  // -------------------------------------------------------
+  /**
+   * Build the playground iframe URL with editors hidden.
+   */
+  #buildSrc() {
+    const baseUrl = this.getAttribute("base-url") || DEFAULT_BASE_URL;
+    const theme = resolveTheme(this.getAttribute("theme"));
+    const header = this.getAttribute("header");
+    const html = this.#getContent("html");
+    const script = this.#getContent("script");
+    const css = this.#getContent("css");
+    const params = new URLSearchParams();
+    params.set("html", zip(html));
+    params.set("script", zip(script));
+    if (css) {
+      params.set("style", zip(css));
+    }
+    params.set("html-editor", "false");
+    params.set("script-editor", "false");
+    params.set("style-editor", "false");
+    params.set("theme", theme);
+    if (header) {
+      params.set("header", header);
+    }
+    return `${baseUrl}/#${params.toString()}`;
+  }
+  /**
+   * Build URL for "open in new window" — same as src but with editors enabled.
+   */
+  #buildOpenUrl() {
+    const baseUrl = this.getAttribute("base-url") || DEFAULT_BASE_URL;
+    const theme = resolveTheme(this.getAttribute("theme"));
+    const html = this.#getContent("html");
+    const script = this.#getContent("script");
+    const css = this.#getContent("css");
+    const params = new URLSearchParams();
+    params.set("html", zip(html));
+    params.set("script", zip(script));
+    if (css) {
+      params.set("style", zip(css));
+    }
+    params.set("theme", theme);
+    return `${baseUrl}/#${params.toString()}`;
+  }
+  // -------------------------------------------------------
+  // Rendering
+  // -------------------------------------------------------
+  #render() {
+    const height = this.getAttribute("height") || DEFAULT_HEIGHT;
+    const hasControls = !this.hasAttribute("no-controls");
+    this.#shadow.innerHTML = /* html */
+    `
+      <style>${styles}</style>
+      <div class="container" style="height: ${height}">
+        <div class="iframe-wrapper"></div>
+        <div class="loader">${loaderIcon}</div>
+        ${hasControls ? this.#renderControls() : ""}
+      </div>
+    `;
+    this.#container = this.#shadow.querySelector(".container");
+    this.#iframeWrapper = this.#shadow.querySelector(".iframe-wrapper");
+    this.#loader = this.#shadow.querySelector(".loader");
+    this.#controls = this.#shadow.querySelector(".controls");
+    this.#openLink = this.#shadow.querySelector(".open-link");
+    this.#bindControlEvents();
+  }
+  #renderControls() {
+    return (
+      /* html */
+      `
+      <div class="controls">
+        <button type="button" class="zoom-in" title="Zoom in">
+          <span class="sr-only">Zoom in</span>
+          ${zoomInIcon}
+        </button>
+        <button type="button" class="zoom-out" title="Zoom out">
+          <span class="sr-only">Zoom out</span>
+          ${zoomOutIcon}
+        </button>
+        <button type="button" class="zoom-reset" title="Reset zoom">
+          <span class="sr-only">Reset zoom</span>
+          ${resetIcon}
+        </button>
+        <a class="open-link" target="_blank" rel="noopener" title="Open in a new window">
+          <span class="sr-only">Open in a new window</span>
+          ${externalLinkIcon}
+        </a>
+        <button type="button" class="reload" title="Reload">
+          <span class="sr-only">Reload</span>
+          ${reloadIcon}
+        </button>
+      </div>
+    `
+    );
+  }
+  #bindControlEvents() {
+    const controls = this.#controls;
+    if (!controls) return;
+    controls.querySelector(".zoom-in")?.addEventListener("click", () => {
+      this.#scale *= ZOOM_STEP;
+      this.#updateIframeScale();
+    });
+    controls.querySelector(".zoom-out")?.addEventListener("click", () => {
+      this.#scale /= ZOOM_STEP;
+      this.#updateIframeScale();
+    });
+    controls.querySelector(".zoom-reset")?.addEventListener("click", () => {
+      this.#scale = Number(this.getAttribute("zoom")) || DEFAULT_ZOOM;
+      this.#updateIframeScale();
+    });
+    controls.querySelector(".reload")?.addEventListener("click", () => {
+      this.#reloadIframe();
+    });
+  }
+  // -------------------------------------------------------
+  // Iframe lifecycle
+  // -------------------------------------------------------
+  #createIframe() {
+    if (this.#iframe || !this.#iframeWrapper) return;
+    const src = this.#buildSrc();
+    this.#iframe = document.createElement("iframe");
+    this.#iframe.src = src;
+    this.#iframe.setAttribute("frameborder", "0");
+    this.#iframe.classList.add("loading");
+    this.#iframe.addEventListener("load", () => {
+      this.#iframe?.classList.remove("loading");
+      this.#loader?.classList.add("hidden");
+    });
+    this.#updateIframeScale();
+    this.#updateOpenLink();
+    this.#iframeWrapper.appendChild(this.#iframe);
+  }
+  #reloadIframe() {
+    if (!this.#iframeWrapper) return;
+    this.#iframe?.remove();
+    this.#iframe = null;
+    this.#loader?.classList.remove("hidden");
+    this.#createIframe();
+  }
+  #updateIframeSrc() {
+    if (!this.#iframe) return;
+    const src = this.#buildSrc();
+    this.#iframe.classList.add("loading");
+    this.#loader?.classList.remove("hidden");
+    this.#iframe.src = src;
+    this.#updateOpenLink();
+  }
+  #updateIframeScale() {
+    if (!this.#iframe) return;
+    const height = this.getAttribute("height") || DEFAULT_HEIGHT;
+    const scale = this.#scale;
+    Object.assign(this.#iframe.style, {
+      width: `${1 / scale * 100}%`,
+      height: `calc(${1 / scale} * ${height})`,
+      transform: `scale(${scale})`
+    });
+  }
+  #updateOpenLink() {
+    if (!this.#openLink) return;
+    this.#openLink.href = this.#buildOpenUrl();
+  }
+  // -------------------------------------------------------
+  // Attribute-driven updates
+  // -------------------------------------------------------
+  #updateContainerHeight() {
+    if (!this.#container) return;
+    const height = this.getAttribute("height") || DEFAULT_HEIGHT;
+    this.#container.style.height = height;
+    this.#updateIframeScale();
+  }
+  #updateControlsVisibility() {
+    if (this.hasAttribute("no-controls")) {
+      this.#controls?.remove();
+      this.#controls = null;
+      this.#openLink = null;
+    } else if (!this.#controls && this.#container) {
+      this.#container.insertAdjacentHTML("beforeend", this.#renderControls());
+      this.#controls = this.#shadow.querySelector(".controls");
+      this.#openLink = this.#shadow.querySelector(".open-link");
+      this.#bindControlEvents();
+      this.#updateOpenLink();
+    }
+  }
+  // -------------------------------------------------------
+  // Lazy loading
+  // -------------------------------------------------------
+  #setupIntersectionObserver() {
+    this.#observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting && !this.#isVisible) {
+            this.#isVisible = true;
+            this.#createIframe();
+          }
+        }
+      },
+      { rootMargin: "100px" }
+    );
+    this.#observer.observe(this);
+  }
+  // -------------------------------------------------------
+  // Media query (auto theme)
+  // -------------------------------------------------------
+  #setupMediaQuery() {
+    const theme = this.getAttribute("theme");
+    if (theme && theme !== "auto") return;
+    this.#mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    this.#mediaQueryHandler = () => {
+      if (this.#isVisible) {
+        this.#updateIframeSrc();
+      }
+    };
+    this.#mediaQuery.addEventListener("change", this.#mediaQueryHandler);
+  }
+};
+export {
+  PlaygroundPreview
+};
+//# sourceMappingURL=element.js.map