@a-company/atelier-studio 0.25.1

package/dist/index.cjs

@@ -0,0 +1,3621 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AtelierStudio: () => AtelierStudio,
+  applyStudioTheme: () => applyStudioTheme,
+  defaultTheme: () => defaultTheme,
+  exportDocument: () => exportDocument,
+  supportsGifExport: () => supportsGifExport,
+  supportsWebCodecs: () => supportsWebCodecs,
+  supportsWebM: () => supportsWebM
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/panels/canvas-panel.ts
+var import_atelier_core = require("@a-company/atelier-core");
+var import_atelier_canvas = require("@a-company/atelier-canvas");
+
+// src/player.ts
+var Player = class {
+  constructor(fps, totalFrames, onFrame, loop = true) {
+    this.fps = fps;
+    this.totalFrames = totalFrames;
+    this.onFrame = onFrame;
+    this.loop = loop;
+  }
+  animationId = null;
+  currentFrame = 0;
+  playing = false;
+  lastTimestamp = 0;
+  accumulator = 0;
+  play() {
+    if (this.playing) return;
+    this.playing = true;
+    this.lastTimestamp = 0;
+    this.accumulator = 0;
+    this.animationId = requestAnimationFrame((ts) => this.tick(ts));
+  }
+  pause() {
+    this.playing = false;
+    if (this.animationId !== null) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+  }
+  seek(frame) {
+    this.currentFrame = Math.max(0, Math.min(frame, this.totalFrames - 1));
+    this.onFrame(this.currentFrame);
+  }
+  toggle() {
+    if (this.playing) this.pause();
+    else this.play();
+  }
+  get isPlaying() {
+    return this.playing;
+  }
+  get frame() {
+    return this.currentFrame;
+  }
+  setTotalFrames(total) {
+    this.totalFrames = total;
+    if (this.currentFrame >= total) {
+      this.currentFrame = 0;
+    }
+  }
+  destroy() {
+    this.pause();
+  }
+  tick(timestamp) {
+    if (!this.playing) return;
+    if (this.lastTimestamp === 0) this.lastTimestamp = timestamp;
+    const elapsed = timestamp - this.lastTimestamp;
+    this.lastTimestamp = timestamp;
+    this.accumulator += elapsed;
+    const frameDuration = 1e3 / this.fps;
+    let frameChanged = false;
+    while (this.accumulator >= frameDuration) {
+      this.accumulator -= frameDuration;
+      this.currentFrame++;
+      if (this.currentFrame >= this.totalFrames) {
+        if (this.loop) {
+          this.currentFrame = 0;
+        } else {
+          this.currentFrame = this.totalFrames - 1;
+          this.pause();
+          this.onFrame(this.currentFrame);
+          return;
+        }
+      }
+      frameChanged = true;
+    }
+    if (frameChanged) this.onFrame(this.currentFrame);
+    this.animationId = requestAnimationFrame((ts) => this.tick(ts));
+  }
+};
+
+// src/panels/canvas-panel.ts
+var CanvasPanel = class {
+  constructor(parent, opts = {}) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-canvas-panel";
+    const wrap = document.createElement("div");
+    wrap.className = "atel-canvas-wrap";
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = 600;
+    this.canvas.height = 400;
+    this.ctx = this.canvas.getContext("2d");
+    this.imageCache = new import_atelier_canvas.ImageCache({
+      onLoad: () => this.refresh(),
+      createImage: (src, onLoad, onError) => {
+        const img = new Image();
+        img.onload = onLoad;
+        img.onerror = onError;
+        img.src = src;
+        return img;
+      }
+    });
+    wrap.appendChild(this.canvas);
+    this.el.appendChild(wrap);
+    const playback = document.createElement("div");
+    playback.className = "atel-playback";
+    this.playBtn = document.createElement("button");
+    this.playBtn.className = "atel-playback__btn";
+    this.playBtn.textContent = "\u25B6";
+    this.scrubber = document.createElement("input");
+    this.scrubber.type = "range";
+    this.scrubber.className = "atel-playback__scrubber";
+    this.scrubber.min = "0";
+    this.scrubber.max = "0";
+    this.scrubber.value = "0";
+    this.frameDisplay = document.createElement("span");
+    this.frameDisplay.className = "atel-playback__frame";
+    this.frameDisplay.textContent = "0 / 0";
+    playback.appendChild(this.playBtn);
+    playback.appendChild(this.scrubber);
+    playback.appendChild(this.frameDisplay);
+    this.el.appendChild(playback);
+    parent.appendChild(this.el);
+    this.playBtn.addEventListener("click", () => this.togglePlay());
+    let wasPlaying = false;
+    this.scrubber.addEventListener("mousedown", () => {
+      wasPlaying = this.player?.isPlaying ?? false;
+      this.player?.pause();
+      this.updatePlayBtn();
+    });
+    this.scrubber.addEventListener("input", () => {
+      this.player?.seek(Number(this.scrubber.value));
+    });
+    this.scrubber.addEventListener("mouseup", () => {
+      if (wasPlaying) {
+        this.player?.play();
+        this.updatePlayBtn();
+      }
+    });
+  }
+  el;
+  canvas;
+  ctx;
+  player = null;
+  playBtn;
+  scrubber;
+  frameDisplay;
+  doc = null;
+  stateName = "";
+  imageCache;
+  loadDocument(doc, stateName) {
+    this.doc = doc;
+    this.stateName = stateName ?? Object.keys(doc.states)[0];
+    const state = doc.states[this.stateName];
+    if (!state) return;
+    this.canvas.width = doc.canvas.width;
+    this.canvas.height = doc.canvas.height;
+    const maxWidth = 500;
+    if (doc.canvas.width > maxWidth) {
+      const scale = maxWidth / doc.canvas.width;
+      this.canvas.style.width = `${doc.canvas.width * scale}px`;
+      this.canvas.style.height = `${doc.canvas.height * scale}px`;
+    } else {
+      this.canvas.style.width = "";
+      this.canvas.style.height = "";
+    }
+    const totalFrames = state.duration;
+    this.scrubber.max = String(totalFrames - 1);
+    this.scrubber.value = "0";
+    if (this.player) this.player.destroy();
+    this.player = new Player(doc.canvas.fps, totalFrames, (f) => this.renderAt(f), true);
+    this.renderAt(0);
+    this.player.play();
+    this.updatePlayBtn();
+  }
+  setStateName(name) {
+    if (!this.doc) return;
+    this.stateName = name;
+    const state = this.doc.states[name];
+    if (!state) return;
+    this.scrubber.max = String(state.duration - 1);
+    this.scrubber.value = "0";
+    this.player?.setTotalFrames(state.duration);
+    this.player?.seek(0);
+  }
+  renderAt(frame) {
+    if (!this.doc) return;
+    const resolved = (0, import_atelier_core.resolveFrame)(this.doc, this.stateName, frame);
+    (0, import_atelier_canvas.renderFrame)(this.ctx, resolved, this.doc, this.imageCache);
+    this.scrubber.value = String(frame);
+    const total = this.doc.states[this.stateName]?.duration ?? 0;
+    this.frameDisplay.textContent = `${frame} / ${total - 1}`;
+    this.opts.onFrameChange?.(frame);
+  }
+  /** Re-render current frame (after doc mutation) */
+  refresh() {
+    if (!this.doc || !this.player) return;
+    this.renderAt(this.player.frame);
+  }
+  togglePlay() {
+    this.player?.toggle();
+    this.updatePlayBtn();
+  }
+  stepForward() {
+    if (this.player) this.player.seek(this.player.frame + 1);
+  }
+  stepBack() {
+    if (this.player) this.player.seek(Math.max(0, this.player.frame - 1));
+  }
+  updatePlayBtn() {
+    this.playBtn.textContent = this.player?.isPlaying ? "\u275A\u275A" : "\u25B6";
+  }
+  getCanvas() {
+    return this.canvas;
+  }
+  getImageCache() {
+    return this.imageCache;
+  }
+  pause() {
+    this.player?.pause();
+    this.updatePlayBtn();
+  }
+  destroy() {
+    this.player?.destroy();
+  }
+};
+
+// src/utils/drag-reorder.ts
+function enableDragReorder(opts) {
+  const { list, itemClass, onReorder } = opts;
+  const ac = new AbortController();
+  const signal = ac.signal;
+  let fromIndex = -1;
+  function getItems() {
+    return Array.from(list.querySelectorAll(`.${itemClass}`));
+  }
+  function setupHandles() {
+    for (const item of getItems()) {
+      const handle = item.querySelector(".atel-drag-handle");
+      if (!handle || handle.dataset.bound) continue;
+      handle.dataset.bound = "1";
+      handle.addEventListener(
+        "pointerdown",
+        () => {
+          item.draggable = true;
+        },
+        { signal }
+      );
+      handle.addEventListener(
+        "pointerup",
+        () => {
+          item.draggable = false;
+        },
+        { signal }
+      );
+    }
+  }
+  const observer = new MutationObserver(() => setupHandles());
+  observer.observe(list, { childList: true });
+  setupHandles();
+  list.addEventListener(
+    "dragstart",
+    (e) => {
+      const item = e.target.closest(`.${itemClass}`);
+      if (!item) return;
+      fromIndex = getItems().indexOf(item);
+      item.classList.add("atel-drag-item--dragging");
+      if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    },
+    { signal }
+  );
+  list.addEventListener(
+    "dragover",
+    (e) => {
+      e.preventDefault();
+      const items = getItems();
+      for (const it of items) {
+        it.classList.remove("atel-drag-indicator--above", "atel-drag-indicator--below");
+      }
+      const target = e.target.closest(`.${itemClass}`);
+      if (!target) return;
+      const rect = target.getBoundingClientRect();
+      const mid = rect.top + rect.height / 2;
+      if (e.clientY < mid) {
+        target.classList.add("atel-drag-indicator--above");
+      } else {
+        target.classList.add("atel-drag-indicator--below");
+      }
+    },
+    { signal }
+  );
+  list.addEventListener(
+    "drop",
+    (e) => {
+      e.preventDefault();
+      const items = getItems();
+      const target = e.target.closest(`.${itemClass}`);
+      if (!target || fromIndex < 0) return;
+      let toIndex = items.indexOf(target);
+      const rect = target.getBoundingClientRect();
+      const mid = rect.top + rect.height / 2;
+      if (e.clientY >= mid) toIndex++;
+      if (fromIndex < toIndex) toIndex--;
+      if (fromIndex !== toIndex && toIndex >= 0) {
+        onReorder(fromIndex, toIndex);
+      }
+      cleanup();
+    },
+    { signal }
+  );
+  list.addEventListener(
+    "dragend",
+    () => {
+      cleanup();
+    },
+    { signal }
+  );
+  function cleanup() {
+    fromIndex = -1;
+    for (const item of getItems()) {
+      item.draggable = false;
+      item.classList.remove(
+        "atel-drag-item--dragging",
+        "atel-drag-indicator--above",
+        "atel-drag-indicator--below"
+      );
+    }
+  }
+  return {
+    destroy() {
+      ac.abort();
+      observer.disconnect();
+    }
+  };
+}
+
+// src/panels/layer-panel.ts
+var TYPE_ICONS = {
+  shape: "\u25A0",
+  text: "T",
+  image: "\u25A3",
+  group: "\u25A8",
+  ref: "\u2192"
+};
+var LayerPanel = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-layer-panel";
+    const header = document.createElement("div");
+    header.className = "atel-panel-header";
+    header.textContent = "Layers";
+    this.el.appendChild(header);
+    this.list = document.createElement("div");
+    this.list.className = "atel-layer-list";
+    this.el.appendChild(this.list);
+    enableDragReorder({
+      list: this.list,
+      itemClass: "atel-layer-item",
+      onReorder: (from, to) => this.reorderLayer(from, to)
+    });
+    const actions = document.createElement("div");
+    actions.className = "atel-layer-actions";
+    const addBtn = document.createElement("button");
+    addBtn.textContent = "+ Add";
+    addBtn.addEventListener("click", () => this.addLayer());
+    const removeBtn = document.createElement("button");
+    removeBtn.textContent = "- Remove";
+    removeBtn.addEventListener("click", () => this.removeLayer());
+    actions.appendChild(addBtn);
+    actions.appendChild(removeBtn);
+    this.el.appendChild(actions);
+    parent.appendChild(this.el);
+  }
+  el;
+  list;
+  doc = null;
+  selectedId = null;
+  loadDocument(doc) {
+    this.doc = doc;
+    this.selectedId = null;
+    this.render();
+  }
+  getSelectedId() {
+    return this.selectedId;
+  }
+  selectLayer(id) {
+    this.selectedId = id;
+    this.render();
+    this.opts.onSelectLayer(id);
+  }
+  removeSelectedLayer() {
+    this.removeLayer();
+  }
+  refresh() {
+    this.render();
+  }
+  render() {
+    const scrollTop = this.list.scrollTop;
+    this.list.innerHTML = "";
+    if (!this.doc) return;
+    for (const layer of this.doc.layers) {
+      const item = document.createElement("div");
+      item.className = `atel-layer-item${layer.id === this.selectedId ? " atel-layer-item--selected" : ""}`;
+      const handle = document.createElement("span");
+      handle.className = "atel-drag-handle";
+      handle.textContent = "\u2630";
+      const icon = document.createElement("span");
+      icon.className = "atel-layer-item__icon";
+      icon.textContent = TYPE_ICONS[layer.visual.type] ?? "?";
+      const idSpan = document.createElement("span");
+      idSpan.className = "atel-layer-item__id";
+      idSpan.textContent = layer.id;
+      const visBtn = document.createElement("button");
+      visBtn.className = "atel-layer-item__vis";
+      visBtn.textContent = layer.visible === false ? "\u25CB" : "\u25C9";
+      visBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        layer.visible = layer.visible === false ? true : false;
+        this.render();
+        this.opts.onDocumentChange();
+      });
+      item.appendChild(handle);
+      item.appendChild(icon);
+      item.appendChild(idSpan);
+      item.appendChild(visBtn);
+      item.addEventListener("click", () => {
+        this.selectLayer(layer.id);
+      });
+      this.list.appendChild(item);
+    }
+    this.list.scrollTop = scrollTop;
+  }
+  reorderLayer(from, to) {
+    if (!this.doc) return;
+    const [moved] = this.doc.layers.splice(from, 1);
+    this.doc.layers.splice(to, 0, moved);
+    this.render();
+    this.opts.onDocumentChange();
+  }
+  addLayer() {
+    if (!this.doc) return;
+    const id = `layer-${this.doc.layers.length + 1}`;
+    const newLayer = {
+      id,
+      visual: {
+        type: "shape",
+        shape: { type: "rect" },
+        fill: { type: "solid", color: "#888888" }
+      },
+      frame: { x: 50, y: 50 },
+      bounds: { width: 100, height: 100 },
+      opacity: 1
+    };
+    this.doc.layers.push(newLayer);
+    this.selectLayer(id);
+    this.opts.onDocumentChange();
+  }
+  removeLayer() {
+    if (!this.doc || !this.selectedId) return;
+    const idx = this.doc.layers.findIndex((l) => l.id === this.selectedId);
+    if (idx === -1) return;
+    this.doc.layers.splice(idx, 1);
+    for (const state of Object.values(this.doc.states)) {
+      state.deltas = state.deltas.filter((d) => d.layer !== this.selectedId);
+    }
+    this.selectedId = null;
+    this.render();
+    this.opts.onSelectLayer(null);
+    this.opts.onDocumentChange();
+  }
+};
+
+// src/controls/number-input.ts
+var NumberInput = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-number-input";
+    const label = document.createElement("label");
+    label.className = "atel-control-label";
+    label.textContent = opts.label;
+    const wrap = document.createElement("div");
+    wrap.className = "atel-number-input__wrap";
+    this.input = document.createElement("input");
+    this.input.type = "number";
+    this.input.className = "atel-input";
+    this.input.value = String(opts.value);
+    if (opts.step !== void 0) this.input.step = String(opts.step);
+    if (opts.min !== void 0) this.input.min = String(opts.min);
+    if (opts.max !== void 0) this.input.max = String(opts.max);
+    wrap.appendChild(this.input);
+    if (opts.suffix) {
+      const suf = document.createElement("span");
+      suf.className = "atel-number-input__suffix";
+      suf.textContent = opts.suffix;
+      wrap.appendChild(suf);
+    }
+    this.el.appendChild(label);
+    this.el.appendChild(wrap);
+    parent.appendChild(this.el);
+    this.input.addEventListener("input", () => {
+      const v = parseFloat(this.input.value);
+      if (!isNaN(v)) opts.onChange(v);
+    });
+  }
+  el;
+  input;
+  setValue(v) {
+    this.input.value = String(v);
+  }
+};
+
+// src/controls/color-picker.ts
+var ColorPicker = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-color-picker";
+    const label = document.createElement("label");
+    label.className = "atel-control-label";
+    label.textContent = opts.label;
+    const wrap = document.createElement("div");
+    wrap.className = "atel-color-picker__wrap";
+    this.input = document.createElement("input");
+    this.input.type = "color";
+    this.input.className = "atel-color-picker__input";
+    this.input.value = normalizeHex(opts.value);
+    this.hex = document.createElement("span");
+    this.hex.className = "atel-color-picker__hex";
+    this.hex.textContent = this.input.value;
+    wrap.appendChild(this.input);
+    wrap.appendChild(this.hex);
+    this.el.appendChild(label);
+    this.el.appendChild(wrap);
+    parent.appendChild(this.el);
+    this.input.addEventListener("input", () => {
+      this.hex.textContent = this.input.value;
+      opts.onChange(this.input.value);
+    });
+  }
+  el;
+  input;
+  hex;
+  setValue(v) {
+    this.input.value = normalizeHex(v);
+    this.hex.textContent = this.input.value;
+  }
+};
+function normalizeHex(c) {
+  if (c.startsWith("#") && c.length >= 7) return c.slice(0, 7);
+  if (c.startsWith("#") && c.length === 4) {
+    return "#" + c[1] + c[1] + c[2] + c[2] + c[3] + c[3];
+  }
+  return c;
+}
+
+// src/controls/select-input.ts
+var SelectInput = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-select-input";
+    const label = document.createElement("label");
+    label.className = "atel-control-label";
+    label.textContent = opts.label;
+    this.select = document.createElement("select");
+    this.select.className = "atel-input";
+    for (const opt of opts.options) {
+      const o = document.createElement("option");
+      o.value = opt.value;
+      o.textContent = opt.label;
+      if (opt.value === opts.value) o.selected = true;
+      this.select.appendChild(o);
+    }
+    this.el.appendChild(label);
+    this.el.appendChild(this.select);
+    parent.appendChild(this.el);
+    this.select.addEventListener("change", () => {
+      opts.onChange(this.select.value);
+    });
+  }
+  el;
+  select;
+  setValue(v) {
+    this.select.value = v;
+  }
+};
+
+// src/controls/slider-input.ts
+var SliderInput = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-slider-input";
+    const label = document.createElement("label");
+    label.className = "atel-control-label";
+    label.textContent = opts.label;
+    const wrap = document.createElement("div");
+    wrap.className = "atel-slider-input__wrap";
+    this.input = document.createElement("input");
+    this.input.type = "range";
+    this.input.className = "atel-slider-input__range";
+    this.input.min = String(opts.min);
+    this.input.max = String(opts.max);
+    this.input.step = String(opts.step ?? 0.01);
+    this.input.value = String(opts.value);
+    this.display = document.createElement("span");
+    this.display.className = "atel-slider-input__value";
+    this.display.textContent = formatValue(opts.value);
+    wrap.appendChild(this.input);
+    wrap.appendChild(this.display);
+    this.el.appendChild(label);
+    this.el.appendChild(wrap);
+    parent.appendChild(this.el);
+    this.input.addEventListener("input", () => {
+      const v = parseFloat(this.input.value);
+      this.display.textContent = formatValue(v);
+      opts.onChange(v);
+    });
+  }
+  el;
+  input;
+  display;
+  setValue(v) {
+    this.input.value = String(v);
+    this.display.textContent = formatValue(v);
+  }
+};
+function formatValue(v) {
+  return v % 1 === 0 ? String(v) : v.toFixed(2);
+}
+
+// src/controls/gradient-editor.ts
+var GradientEditor = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-gradient-editor";
+    this.preview = document.createElement("div");
+    this.preview.className = "atel-gradient-editor__preview";
+    this.el.appendChild(this.preview);
+    this.stopsContainer = document.createElement("div");
+    this.stopsContainer.className = "atel-gradient-editor__stops";
+    this.el.appendChild(this.stopsContainer);
+    const addBtn = document.createElement("button");
+    addBtn.className = "atel-gradient-editor__add";
+    addBtn.textContent = "+ Add Stop";
+    addBtn.addEventListener("click", () => this.addStop());
+    this.el.appendChild(addBtn);
+    parent.appendChild(this.el);
+    this.buildStops();
+    this.updatePreview();
+  }
+  el;
+  stopsContainer;
+  preview;
+  buildStops() {
+    this.stopsContainer.innerHTML = "";
+    const sorted = this.sortedStops();
+    for (let i = 0; i < sorted.length; i++) {
+      const stop = sorted[i];
+      const row = document.createElement("div");
+      row.className = "atel-gradient-editor__stop";
+      const color = typeof stop.color === "string" ? stop.color : "#888888";
+      new ColorPicker(row, {
+        label: "",
+        value: color,
+        onChange: (v) => {
+          stop.color = v;
+          this.updatePreview();
+          this.opts.onChange(this.opts.stops);
+        }
+      });
+      new SliderInput(row, {
+        label: "",
+        value: stop.offset,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        onChange: (v) => {
+          stop.offset = v;
+          this.updatePreview();
+          this.opts.onChange(this.opts.stops);
+        }
+      });
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "atel-gradient-editor__remove";
+      removeBtn.textContent = "\xD7";
+      removeBtn.disabled = this.opts.stops.length <= 2;
+      removeBtn.addEventListener("click", () => {
+        const idx = this.opts.stops.indexOf(stop);
+        if (idx !== -1 && this.opts.stops.length > 2) {
+          this.opts.stops.splice(idx, 1);
+          this.buildStops();
+          this.updatePreview();
+          this.opts.onChange(this.opts.stops);
+        }
+      });
+      row.appendChild(removeBtn);
+      this.stopsContainer.appendChild(row);
+    }
+  }
+  addStop() {
+    const sorted = this.sortedStops();
+    const a = sorted[sorted.length - 2];
+    const b = sorted[sorted.length - 1];
+    const offset = (a.offset + b.offset) / 2;
+    const color = typeof b.color === "string" ? b.color : "#888888";
+    this.opts.stops.push({ offset, color });
+    this.buildStops();
+    this.updatePreview();
+    this.opts.onChange(this.opts.stops);
+  }
+  sortedStops() {
+    return [...this.opts.stops].sort((a, b) => a.offset - b.offset);
+  }
+  updatePreview() {
+    const sorted = this.sortedStops();
+    const parts = sorted.map((s) => {
+      const c = typeof s.color === "string" ? s.color : "#888888";
+      return `${c} ${(s.offset * 100).toFixed(0)}%`;
+    });
+    this.preview.style.background = `linear-gradient(90deg, ${parts.join(", ")})`;
+  }
+};
+
+// src/controls/fill-editor.ts
+var FILL_TYPE_OPTIONS = [
+  { label: "Solid", value: "solid" },
+  { label: "Linear Gradient", value: "linear-gradient" },
+  { label: "Radial Gradient", value: "radial-gradient" }
+];
+var FillEditor = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-fill-editor";
+    new SelectInput(this.el, {
+      label: "Fill Type",
+      value: opts.fill.type,
+      options: FILL_TYPE_OPTIONS,
+      onChange: (v) => this.switchType(v)
+    });
+    this.body = document.createElement("div");
+    this.body.className = "atel-fill-editor__body";
+    this.el.appendChild(this.body);
+    parent.appendChild(this.el);
+    this.buildBody();
+  }
+  el;
+  body;
+  buildBody() {
+    this.body.innerHTML = "";
+    const fill = this.opts.fill;
+    if (fill.type === "solid") {
+      const color = typeof fill.color === "string" ? fill.color : "#888888";
+      new ColorPicker(this.body, {
+        label: "Color",
+        value: color,
+        onChange: (v) => {
+          if (this.opts.fill.type === "solid") {
+            this.opts.fill.color = v;
+            this.opts.onChange(this.opts.fill);
+          }
+        }
+      });
+    } else if (fill.type === "linear-gradient") {
+      new NumberInput(this.body, {
+        label: "Angle",
+        value: fill.angle,
+        step: 1,
+        suffix: "\xB0",
+        onChange: (v) => {
+          if (this.opts.fill.type === "linear-gradient") {
+            this.opts.fill.angle = v;
+            this.opts.onChange(this.opts.fill);
+          }
+        }
+      });
+      new GradientEditor(this.body, {
+        stops: fill.stops,
+        onChange: (stops) => {
+          if (this.opts.fill.type === "linear-gradient") {
+            this.opts.fill.stops = stops;
+            this.opts.onChange(this.opts.fill);
+          }
+        }
+      });
+    } else if (fill.type === "radial-gradient") {
+      const row = document.createElement("div");
+      row.className = "atel-prop-row";
+      this.body.appendChild(row);
+      new NumberInput(row, {
+        label: "Center X",
+        value: parseUnit(fill.center.x),
+        step: 1,
+        suffix: "%",
+        onChange: (v) => {
+          if (this.opts.fill.type === "radial-gradient") {
+            this.opts.fill.center.x = `${v}%`;
+            this.opts.onChange(this.opts.fill);
+          }
+        }
+      });
+      new NumberInput(row, {
+        label: "Center Y",
+        value: parseUnit(fill.center.y),
+        step: 1,
+        suffix: "%",
+        onChange: (v) => {
+          if (this.opts.fill.type === "radial-gradient") {
+            this.opts.fill.center.y = `${v}%`;
+            this.opts.onChange(this.opts.fill);
+          }
+        }
+      });
+      new NumberInput(this.body, {
+        label: "Radius",
+        value: parseUnit(fill.radius),
+        step: 1,
+        suffix: "%",
+        onChange: (v) => {
+          if (this.opts.fill.type === "radial-gradient") {
+            this.opts.fill.radius = `${v}%`;
+            this.opts.onChange(this.opts.fill);
+          }
+        }
+      });
+      new GradientEditor(this.body, {
+        stops: fill.stops,
+        onChange: (stops) => {
+          if (this.opts.fill.type === "radial-gradient") {
+            this.opts.fill.stops = stops;
+            this.opts.onChange(this.opts.fill);
+          }
+        }
+      });
+    }
+  }
+  switchType(newType) {
+    const current = this.opts.fill;
+    let newFill;
+    if (newType === "solid") {
+      const color = extractFirstColor(current);
+      newFill = { type: "solid", color };
+    } else if (newType === "linear-gradient") {
+      const stops = extractStops(current);
+      const angle = current.type === "linear-gradient" ? current.angle : 0;
+      newFill = { type: "linear-gradient", angle, stops };
+    } else {
+      const stops = extractStops(current);
+      const center = current.type === "radial-gradient" ? current.center : { x: "50%", y: "50%" };
+      const radius = current.type === "radial-gradient" ? current.radius : "50%";
+      newFill = { type: "radial-gradient", center, radius, stops };
+    }
+    this.opts.fill = newFill;
+    this.opts.onChange(newFill);
+    this.buildBody();
+  }
+};
+function extractFirstColor(fill) {
+  if (fill.type === "solid") {
+    return typeof fill.color === "string" ? fill.color : "#888888";
+  }
+  const first = fill.stops[0];
+  return first && typeof first.color === "string" ? first.color : "#888888";
+}
+function extractStops(fill) {
+  if (fill.type === "solid") {
+    const color = typeof fill.color === "string" ? fill.color : "#888888";
+    return [
+      { offset: 0, color },
+      { offset: 1, color: "#ffffff" }
+    ];
+  }
+  return fill.stops;
+}
+function parseUnit(v) {
+  if (typeof v === "number") return v;
+  return parseFloat(v) || 0;
+}
+
+// src/controls/easing-curve-editor.ts
+var import_atelier_math = require("@a-company/atelier-math");
+var CANVAS_SIZE = 160;
+var PAD = 20;
+var PLOT_SIZE = CANVAS_SIZE - PAD * 2;
+var HANDLE_R = 6;
+var EasingCurveEditor = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.easing = opts.value ?? { type: "linear" };
+    this.el = document.createElement("div");
+    this.el.className = "atel-easing-curve";
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = CANVAS_SIZE * 2;
+    this.canvas.height = CANVAS_SIZE * 2;
+    this.canvas.style.width = `${CANVAS_SIZE}px`;
+    this.canvas.style.height = `${CANVAS_SIZE}px`;
+    this.canvas.className = "atel-easing-curve__canvas";
+    this.ctx = this.canvas.getContext("2d");
+    this.ctx.scale(2, 2);
+    this.el.appendChild(this.canvas);
+    const info = document.createElement("div");
+    info.className = "atel-easing-curve__info";
+    info.textContent = this.getLabel();
+    this.el.appendChild(info);
+    parent.appendChild(this.el);
+    const signal = this.abortController.signal;
+    this.canvas.addEventListener("mousedown", (e) => this.onMouseDown(e), { signal });
+    this.canvas.addEventListener("mousemove", (e) => this.onMouseMove(e), { signal });
+    this.canvas.addEventListener("mouseup", () => this.onMouseUp(), { signal });
+    this.canvas.addEventListener("mouseleave", () => this.onMouseUp(), { signal });
+    this.draw();
+  }
+  el;
+  canvas;
+  ctx;
+  easing;
+  dragging = null;
+  abortController = new AbortController();
+  setValue(v) {
+    this.easing = v ?? { type: "linear" };
+    this.draw();
+    this.updateInfo();
+  }
+  destroy() {
+    this.abortController.abort();
+  }
+  getLabel() {
+    const e = this.easing;
+    if (typeof e === "string") return e;
+    if (e.type === "cubic-bezier") {
+      return `cubic-bezier(${e.x1.toFixed(2)}, ${e.y1.toFixed(2)}, ${e.x2.toFixed(2)}, ${e.y2.toFixed(2)})`;
+    }
+    if (e.type === "spring") {
+      return `spring(m:${e.mass ?? 1} k:${e.stiffness ?? 100} d:${e.damping ?? 10})`;
+    }
+    if (e.type === "step") {
+      return `steps(${e.steps}, ${e.position ?? "end"})`;
+    }
+    return e.type;
+  }
+  updateInfo() {
+    const info = this.el.querySelector(".atel-easing-curve__info");
+    if (info) info.textContent = this.getLabel();
+  }
+  getEasingFunction() {
+    const e = this.easing;
+    if (typeof e === "string") {
+      switch (e) {
+        case "ease-in":
+          return import_atelier_math.easeIn;
+        case "ease-out":
+          return import_atelier_math.easeOut;
+        case "ease-in-out":
+          return import_atelier_math.easeInOut;
+        default:
+          return import_atelier_math.linear;
+      }
+    }
+    switch (e.type) {
+      case "linear":
+        return import_atelier_math.linear;
+      case "cubic-bezier":
+        return (0, import_atelier_math.cubicBezier)(e.x1, e.y1, e.x2, e.y2);
+      case "spring":
+        return this.buildSpringFn(e);
+      case "step":
+        return (0, import_atelier_math.step)(e.steps, e.position);
+      default:
+        return import_atelier_math.linear;
+    }
+  }
+  buildSpringFn(s) {
+    const mass = s.mass ?? 1;
+    const stiffness = s.stiffness ?? 100;
+    const damping = s.damping ?? 10;
+    const w0 = Math.sqrt(stiffness / mass);
+    const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+    return (t) => {
+      if (t <= 0) return 0;
+      if (t >= 1) return 1;
+      const scaledT = t * 3;
+      if (zeta >= 1) {
+        return 1 - Math.exp(-w0 * scaledT) * (1 + w0 * scaledT);
+      }
+      const wd = w0 * Math.sqrt(1 - zeta * zeta);
+      return 1 - Math.exp(-zeta * w0 * scaledT) * (Math.cos(wd * scaledT) + zeta * w0 / wd * Math.sin(wd * scaledT));
+    };
+  }
+  // ── Drawing ──────────────────────────────────────────────
+  draw() {
+    const ctx = this.ctx;
+    const w = CANVAS_SIZE;
+    const h = CANVAS_SIZE;
+    ctx.clearRect(0, 0, w, h);
+    ctx.fillStyle = "rgba(0,0,0,0.3)";
+    ctx.fillRect(PAD, PAD, PLOT_SIZE, PLOT_SIZE);
+    ctx.strokeStyle = "rgba(255,255,255,0.08)";
+    ctx.lineWidth = 1;
+    for (let i = 1; i < 4; i++) {
+      const pos = PAD + PLOT_SIZE / 4 * i;
+      ctx.beginPath();
+      ctx.moveTo(pos, PAD);
+      ctx.lineTo(pos, PAD + PLOT_SIZE);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(PAD, pos);
+      ctx.lineTo(PAD + PLOT_SIZE, pos);
+      ctx.stroke();
+    }
+    ctx.strokeStyle = "rgba(255,255,255,0.15)";
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    ctx.moveTo(PAD, PAD + PLOT_SIZE);
+    ctx.lineTo(PAD + PLOT_SIZE, PAD);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    const fn = this.getEasingFunction();
+    ctx.strokeStyle = "#58a6ff";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    const samples = 100;
+    for (let i = 0; i <= samples; i++) {
+      const t = i / samples;
+      const v = fn(t);
+      const x = PAD + t * PLOT_SIZE;
+      const y = PAD + PLOT_SIZE - v * PLOT_SIZE;
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    const e = this.easing;
+    if (typeof e !== "string" && e.type === "cubic-bezier") {
+      this.drawBezierHandles(e);
+    }
+    ctx.fillStyle = "rgba(255,255,255,0.3)";
+    ctx.font = "9px monospace";
+    ctx.textAlign = "center";
+    ctx.fillText("0", PAD, PAD + PLOT_SIZE + 14);
+    ctx.fillText("1", PAD + PLOT_SIZE, PAD + PLOT_SIZE + 14);
+    ctx.textAlign = "right";
+    ctx.fillText("0", PAD - 4, PAD + PLOT_SIZE + 3);
+    ctx.fillText("1", PAD - 4, PAD + 3);
+  }
+  drawBezierHandles(e) {
+    const ctx = this.ctx;
+    const p0x = PAD;
+    const p0y = PAD + PLOT_SIZE;
+    const p3x = PAD + PLOT_SIZE;
+    const p3y = PAD;
+    const p1x = PAD + e.x1 * PLOT_SIZE;
+    const p1y = PAD + PLOT_SIZE - e.y1 * PLOT_SIZE;
+    const p2x = PAD + e.x2 * PLOT_SIZE;
+    const p2y = PAD + PLOT_SIZE - e.y2 * PLOT_SIZE;
+    ctx.strokeStyle = "rgba(255,255,255,0.3)";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(p0x, p0y);
+    ctx.lineTo(p1x, p1y);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(p3x, p3y);
+    ctx.lineTo(p2x, p2y);
+    ctx.stroke();
+    ctx.fillStyle = "#ff6b6b";
+    ctx.beginPath();
+    ctx.arc(p1x, p1y, HANDLE_R, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = "rgba(255,255,255,0.6)";
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    ctx.fillStyle = "#51cf66";
+    ctx.beginPath();
+    ctx.arc(p2x, p2y, HANDLE_R, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = "rgba(255,255,255,0.6)";
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+  }
+  // ── Interaction ──────────────────────────────────────────
+  canvasToPlot(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const px = e.clientX - rect.left;
+    const py = e.clientY - rect.top;
+    const x = (px - PAD) / PLOT_SIZE;
+    const y = 1 - (py - PAD) / PLOT_SIZE;
+    return { x, y };
+  }
+  onMouseDown(e) {
+    const easing = this.easing;
+    if (typeof easing === "string" || easing.type !== "cubic-bezier") return;
+    const { x, y } = this.canvasToPlot(e);
+    const dist1 = Math.hypot(x - easing.x1, y - easing.y1);
+    const dist2 = Math.hypot(x - easing.x2, y - easing.y2);
+    const threshold = HANDLE_R / PLOT_SIZE + 0.03;
+    if (dist1 < threshold && dist1 <= dist2) {
+      this.dragging = "p1";
+      this.canvas.style.cursor = "grabbing";
+    } else if (dist2 < threshold) {
+      this.dragging = "p2";
+      this.canvas.style.cursor = "grabbing";
+    }
+  }
+  onMouseMove(e) {
+    const easing = this.easing;
+    if (typeof easing === "string" || easing.type !== "cubic-bezier") return;
+    if (!this.dragging) {
+      const { x: x2, y: y2 } = this.canvasToPlot(e);
+      const dist1 = Math.hypot(x2 - easing.x1, y2 - easing.y1);
+      const dist2 = Math.hypot(x2 - easing.x2, y2 - easing.y2);
+      const threshold = HANDLE_R / PLOT_SIZE + 0.03;
+      this.canvas.style.cursor = dist1 < threshold || dist2 < threshold ? "grab" : "";
+      return;
+    }
+    const { x, y } = this.canvasToPlot(e);
+    const cx = Math.max(0, Math.min(1, x));
+    const cy = Math.max(-0.5, Math.min(1.5, y));
+    if (this.dragging === "p1") {
+      easing.x1 = Math.round(cx * 100) / 100;
+      easing.y1 = Math.round(cy * 100) / 100;
+    } else {
+      easing.x2 = Math.round(cx * 100) / 100;
+      easing.y2 = Math.round(cy * 100) / 100;
+    }
+    this.draw();
+    this.updateInfo();
+    this.opts.onChange(easing);
+  }
+  onMouseUp() {
+    if (this.dragging) {
+      this.dragging = null;
+      this.canvas.style.cursor = "";
+    }
+  }
+};
+
+// src/controls/easing-picker.ts
+var PRESET_OPTIONS = [
+  { label: "Linear", value: "linear" },
+  { label: "Ease In", value: "ease-in" },
+  { label: "Ease Out", value: "ease-out" },
+  { label: "Ease In-Out", value: "ease-in-out" },
+  { label: "Spring", value: "spring" },
+  { label: "Cubic Bezier", value: "cubic-bezier" },
+  { label: "Step", value: "step" }
+];
+var EasingPicker = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.currentEasing = opts.value;
+    this.el = document.createElement("div");
+    this.el.className = "atel-easing-picker";
+    const label = document.createElement("label");
+    label.className = "atel-control-label";
+    label.textContent = opts.label;
+    this.select = document.createElement("select");
+    this.select.className = "atel-input";
+    for (const o of PRESET_OPTIONS) {
+      const opt = document.createElement("option");
+      opt.value = o.value;
+      opt.textContent = o.label;
+      this.select.appendChild(opt);
+    }
+    this.configContainer = document.createElement("div");
+    this.configContainer.className = "atel-easing-picker__config";
+    this.el.appendChild(label);
+    this.el.appendChild(this.select);
+    this.el.appendChild(this.configContainer);
+    parent.appendChild(this.el);
+    this.syncFromValue(opts.value);
+    this.select.addEventListener("change", () => {
+      this.emitChange();
+    });
+  }
+  el;
+  select;
+  configContainer;
+  curveEditor = null;
+  currentEasing;
+  syncFromValue(v) {
+    this.currentEasing = v;
+    if (!v) {
+      this.select.value = "linear";
+    } else if (typeof v === "string") {
+      this.select.value = v;
+    } else {
+      this.select.value = v.type;
+    }
+    this.updateConfig();
+  }
+  updateConfig() {
+    this.configContainer.innerHTML = "";
+    this.curveEditor?.destroy();
+    this.curveEditor = null;
+    const easing = this.currentEasing;
+    this.curveEditor = new EasingCurveEditor(this.configContainer, {
+      value: easing,
+      onChange: (v) => {
+        this.currentEasing = v;
+        this.opts.onChange(v);
+      }
+    });
+    if (typeof easing !== "string" && easing) {
+      if (easing.type === "cubic-bezier") {
+        this.buildBezierConfig(easing);
+      } else if (easing.type === "spring") {
+        this.buildSpringConfig(easing);
+      } else if (easing.type === "step") {
+        this.buildStepConfig(easing);
+      }
+    }
+  }
+  buildBezierConfig(easing) {
+    const row = document.createElement("div");
+    row.className = "atel-easing-picker__params";
+    new NumberInput(row, {
+      label: "x1",
+      value: easing.x1,
+      step: 0.01,
+      min: 0,
+      max: 1,
+      onChange: (v) => {
+        easing.x1 = v;
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    new NumberInput(row, {
+      label: "y1",
+      value: easing.y1,
+      step: 0.01,
+      onChange: (v) => {
+        easing.y1 = v;
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    new NumberInput(row, {
+      label: "x2",
+      value: easing.x2,
+      step: 0.01,
+      min: 0,
+      max: 1,
+      onChange: (v) => {
+        easing.x2 = v;
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    new NumberInput(row, {
+      label: "y2",
+      value: easing.y2,
+      step: 0.01,
+      onChange: (v) => {
+        easing.y2 = v;
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    this.configContainer.appendChild(row);
+  }
+  buildSpringConfig(easing) {
+    const row = document.createElement("div");
+    row.className = "atel-easing-picker__params";
+    new NumberInput(row, {
+      label: "Mass",
+      value: easing.mass ?? 1,
+      step: 0.1,
+      min: 0.1,
+      onChange: (v) => {
+        easing.mass = v;
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    new NumberInput(row, {
+      label: "Stiffness",
+      value: easing.stiffness ?? 100,
+      step: 10,
+      min: 1,
+      onChange: (v) => {
+        easing.stiffness = v;
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    new NumberInput(row, {
+      label: "Damping",
+      value: easing.damping ?? 10,
+      step: 1,
+      min: 0,
+      onChange: (v) => {
+        easing.damping = v;
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    this.configContainer.appendChild(row);
+  }
+  buildStepConfig(easing) {
+    const row = document.createElement("div");
+    row.className = "atel-easing-picker__params";
+    new NumberInput(row, {
+      label: "Steps",
+      value: easing.steps,
+      step: 1,
+      min: 1,
+      max: 20,
+      onChange: (v) => {
+        easing.steps = Math.round(v);
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    new SelectInput(row, {
+      label: "Position",
+      value: easing.position ?? "end",
+      options: [
+        { label: "End", value: "end" },
+        { label: "Start", value: "start" }
+      ],
+      onChange: (v) => {
+        easing.position = v;
+        this.curveEditor?.setValue(easing);
+        this.opts.onChange(easing);
+      }
+    });
+    this.configContainer.appendChild(row);
+  }
+  emitChange() {
+    const val = this.select.value;
+    let easing;
+    if (val === "linear") {
+      easing = { type: "linear" };
+    } else if (val === "ease-in" || val === "ease-out" || val === "ease-in-out") {
+      easing = val;
+    } else if (val === "spring") {
+      easing = { type: "spring", mass: 1, stiffness: 100, damping: 10 };
+    } else if (val === "cubic-bezier") {
+      easing = { type: "cubic-bezier", x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 };
+    } else if (val === "step") {
+      easing = { type: "step", steps: 5, position: "end" };
+    }
+    this.currentEasing = easing;
+    this.updateConfig();
+    this.opts.onChange(easing);
+  }
+  setValue(v) {
+    this.syncFromValue(v);
+  }
+};
+
+// src/controls/range-slider.ts
+var RangeSlider = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-range-slider-control";
+    const label = document.createElement("label");
+    label.className = "atel-control-label";
+    label.textContent = opts.label;
+    this.el.appendChild(label);
+    const slider = document.createElement("div");
+    slider.className = "atel-range-slider";
+    const track = document.createElement("div");
+    track.className = "atel-range-slider__track";
+    slider.appendChild(track);
+    this.fill = document.createElement("div");
+    this.fill.className = "atel-range-slider__fill";
+    slider.appendChild(this.fill);
+    const step2 = opts.step ?? 1;
+    this.inputLow = document.createElement("input");
+    this.inputLow.type = "range";
+    this.inputLow.min = String(opts.min);
+    this.inputLow.max = String(opts.max);
+    this.inputLow.step = String(step2);
+    this.inputLow.value = String(opts.valueLow);
+    this.inputHigh = document.createElement("input");
+    this.inputHigh.type = "range";
+    this.inputHigh.min = String(opts.min);
+    this.inputHigh.max = String(opts.max);
+    this.inputHigh.step = String(step2);
+    this.inputHigh.value = String(opts.valueHigh);
+    slider.appendChild(this.inputLow);
+    slider.appendChild(this.inputHigh);
+    this.el.appendChild(slider);
+    parent.appendChild(this.el);
+    this.updateFill();
+    this.inputLow.addEventListener("input", () => {
+      let low = parseInt(this.inputLow.value, 10);
+      const high = parseInt(this.inputHigh.value, 10);
+      if (low > high) {
+        low = high;
+        this.inputLow.value = String(low);
+      }
+      this.updateFill();
+      opts.onChangeLow(low);
+    });
+    this.inputHigh.addEventListener("input", () => {
+      const low = parseInt(this.inputLow.value, 10);
+      let high = parseInt(this.inputHigh.value, 10);
+      if (high < low) {
+        high = low;
+        this.inputHigh.value = String(high);
+      }
+      this.updateFill();
+      opts.onChangeHigh(high);
+    });
+  }
+  el;
+  inputLow;
+  inputHigh;
+  fill;
+  setValue(low, high) {
+    this.inputLow.value = String(low);
+    this.inputHigh.value = String(high);
+    this.updateFill();
+  }
+  updateFill() {
+    const min = this.opts.min;
+    const max = this.opts.max;
+    const range = max - min || 1;
+    const low = parseInt(this.inputLow.value, 10);
+    const high = parseInt(this.inputHigh.value, 10);
+    const left = (low - min) / range * 100;
+    const right = (max - high) / range * 100;
+    this.fill.style.left = `${left}%`;
+    this.fill.style.right = `${right}%`;
+  }
+};
+
+// src/panels/delta-panel.ts
+var ANIMATABLE_PROPERTIES = [
+  { label: "frame.x", value: "frame.x" },
+  { label: "frame.y", value: "frame.y" },
+  { label: "bounds.width", value: "bounds.width" },
+  { label: "bounds.height", value: "bounds.height" },
+  { label: "opacity", value: "opacity" },
+  { label: "rotation", value: "rotation" },
+  { label: "scale.x", value: "scale.x" },
+  { label: "scale.y", value: "scale.y" },
+  { label: "anchorPoint.x", value: "anchorPoint.x" },
+  { label: "anchorPoint.y", value: "anchorPoint.y" },
+  { label: "visual.fill.color", value: "visual.fill.color" },
+  { label: "visual.stroke.color", value: "visual.stroke.color" },
+  { label: "visual.stroke.width", value: "visual.stroke.width" },
+  { label: "visual.stroke.start", value: "visual.stroke.start" },
+  { label: "visual.stroke.end", value: "visual.stroke.end" },
+  { label: "visual.shape.cornerRadius", value: "visual.shape.cornerRadius" },
+  { label: "visual.style.fontSize", value: "visual.style.fontSize" },
+  { label: "visual.style.color", value: "visual.style.color" },
+  { label: "shadow.blur", value: "shadow.blur" },
+  { label: "shadow.color", value: "shadow.color" },
+  { label: "shadow.offsetX", value: "shadow.offsetX" },
+  { label: "shadow.offsetY", value: "shadow.offsetY" }
+];
+var DeltaPanel = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-prop-section";
+    this.deltas = opts.state.deltas.filter((d) => d.layer === opts.layerId);
+    this.title = document.createElement("div");
+    this.title.className = "atel-prop-section__title atel-prop-section__title--deltas";
+    const titleText = document.createElement("span");
+    titleText.textContent = `Deltas (${this.deltas.length})`;
+    this.title.appendChild(titleText);
+    const sortBtn = document.createElement("button");
+    sortBtn.className = "atel-delta-sort-btn";
+    sortBtn.textContent = "\u2195 Sort";
+    sortBtn.title = "Sort by start frame";
+    sortBtn.addEventListener("click", () => this.sortByStartFrame());
+    this.title.appendChild(sortBtn);
+    this.el.appendChild(this.title);
+    this.list = document.createElement("div");
+    this.list.className = "atel-delta-list";
+    this.el.appendChild(this.list);
+    enableDragReorder({
+      list: this.list,
+      itemClass: "atel-delta-item",
+      onReorder: (from, to) => this.reorderDelta(from, to)
+    });
+    this.renderList();
+    const actions = document.createElement("div");
+    actions.className = "atel-delta-actions";
+    const addBtn = document.createElement("button");
+    addBtn.textContent = "+ Add Delta";
+    addBtn.addEventListener("click", () => this.addDelta());
+    actions.appendChild(addBtn);
+    this.el.appendChild(actions);
+    parent.appendChild(this.el);
+  }
+  el;
+  deltas;
+  list;
+  title;
+  expandedIndex = null;
+  updateTitleCount() {
+    const span = this.title.firstElementChild;
+    if (span) span.textContent = `Deltas (${this.deltas.length})`;
+  }
+  renderList() {
+    this.list.innerHTML = "";
+    for (let i = 0; i < this.deltas.length; i++) {
+      this.list.appendChild(this.renderDelta(this.deltas[i], i));
+    }
+  }
+  renderDelta(delta, index) {
+    const expanded = this.expandedIndex === index;
+    const item = document.createElement("div");
+    item.className = "atel-delta-item" + (expanded ? " atel-delta-item--expanded" : "");
+    const header = document.createElement("div");
+    header.className = "atel-delta-item__header";
+    const handle = document.createElement("span");
+    handle.className = "atel-drag-handle";
+    handle.textContent = "\u2630";
+    const prop = document.createElement("span");
+    prop.className = "atel-delta-item__prop";
+    prop.textContent = delta.property;
+    const range = document.createElement("span");
+    range.className = "atel-delta-item__range";
+    range.textContent = `[${delta.range[0]}\u2013${delta.range[1]}]`;
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "atel-delta-item__remove";
+    removeBtn.textContent = "\u2715";
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.removeDelta(delta);
+    });
+    header.addEventListener("click", () => {
+      this.expandedIndex = this.expandedIndex === index ? null : index;
+      this.renderList();
+    });
+    header.appendChild(handle);
+    if (delta.name) {
+      const nameSpan = document.createElement("span");
+      nameSpan.className = "atel-delta-item__name";
+      nameSpan.textContent = delta.name;
+      header.appendChild(nameSpan);
+    }
+    header.appendChild(prop);
+    header.appendChild(range);
+    header.appendChild(removeBtn);
+    item.appendChild(header);
+    if (expanded) {
+      item.appendChild(this.buildEditor(delta));
+    } else {
+      const detail = document.createElement("div");
+      detail.className = "atel-delta-item__detail";
+      const easingLabel = formatEasing(delta.easing);
+      detail.textContent = `${formatValue2(delta.from)} \u2192 ${formatValue2(delta.to)}  ${easingLabel}`;
+      item.appendChild(detail);
+      const duration = this.opts.state.duration || 1;
+      const bar = document.createElement("div");
+      bar.className = "atel-delta-item__minibar";
+      const fill = document.createElement("div");
+      fill.className = "atel-delta-item__minibar-fill";
+      const left = delta.range[0] / duration * 100;
+      const right = (duration - delta.range[1]) / duration * 100;
+      fill.style.left = `${left}%`;
+      fill.style.right = `${right}%`;
+      bar.appendChild(fill);
+      item.appendChild(bar);
+    }
+    return item;
+  }
+  buildEditor(delta) {
+    const editor = document.createElement("div");
+    editor.className = "atel-delta-item__editor";
+    const notify = () => this.opts.onDeltaChange();
+    const nameRow = document.createElement("div");
+    nameRow.className = "atel-delta-item__editor-row";
+    const nameLabel = document.createElement("label");
+    nameLabel.className = "atel-control-label";
+    nameLabel.textContent = "Name";
+    const nameInput = document.createElement("input");
+    nameInput.type = "text";
+    nameInput.className = "atel-input";
+    nameInput.placeholder = "unnamed";
+    nameInput.value = delta.name ?? "";
+    nameInput.addEventListener("input", () => {
+      const v = nameInput.value.trim();
+      delta.name = v || void 0;
+      this.renderList();
+      notify();
+    });
+    nameRow.appendChild(nameLabel);
+    nameRow.appendChild(nameInput);
+    editor.appendChild(nameRow);
+    const propRow = document.createElement("div");
+    propRow.className = "atel-delta-item__editor-row";
+    new SelectInput(propRow, {
+      label: "Property",
+      value: delta.property,
+      options: ANIMATABLE_PROPERTIES,
+      onChange: (v) => {
+        const prev = delta.property;
+        delta.property = v;
+        if (prev !== delta.property) {
+          const defaults = getDefaultValues(delta.property);
+          delta.from = defaults.from;
+          delta.to = defaults.to;
+          this.renderList();
+        }
+        notify();
+      }
+    });
+    editor.appendChild(propRow);
+    const fromRow = document.createElement("div");
+    fromRow.className = "atel-delta-item__editor-row";
+    this.buildControlForProperty(fromRow, delta.property, "From", delta.from, (v) => {
+      delta.from = v;
+      notify();
+    });
+    editor.appendChild(fromRow);
+    const toRow = document.createElement("div");
+    toRow.className = "atel-delta-item__editor-row";
+    this.buildControlForProperty(toRow, delta.property, "To", delta.to, (v) => {
+      delta.to = v;
+      notify();
+    });
+    editor.appendChild(toRow);
+    const easingRow = document.createElement("div");
+    easingRow.className = "atel-delta-item__editor-row";
+    new EasingPicker(easingRow, {
+      label: "Easing",
+      value: delta.easing,
+      onChange: (v) => {
+        delta.easing = v;
+        notify();
+      }
+    });
+    editor.appendChild(easingRow);
+    const sliderRow = document.createElement("div");
+    sliderRow.className = "atel-delta-item__editor-row";
+    const rangeSlider = new RangeSlider(sliderRow, {
+      label: "Frame Range",
+      min: 0,
+      max: Math.max(1, this.opts.state.duration),
+      step: 1,
+      valueLow: delta.range[0],
+      valueHigh: delta.range[1],
+      onChangeLow: (v) => {
+        delta.range[0] = v;
+        startInput.setValue(v);
+        notify();
+      },
+      onChangeHigh: (v) => {
+        delta.range[1] = v;
+        endInput.setValue(v);
+        notify();
+      }
+    });
+    editor.appendChild(sliderRow);
+    const rangeRow = document.createElement("div");
+    rangeRow.className = "atel-delta-item__editor-row atel-delta-item__editor-row--range";
+    const startInput = new NumberInput(rangeRow, {
+      label: "Start Frame",
+      value: delta.range[0],
+      step: 1,
+      min: 0,
+      onChange: (v) => {
+        delta.range[0] = Math.round(v);
+        rangeSlider.setValue(delta.range[0], delta.range[1]);
+        notify();
+      }
+    });
+    const endInput = new NumberInput(rangeRow, {
+      label: "End Frame",
+      value: delta.range[1],
+      step: 1,
+      min: 0,
+      onChange: (v) => {
+        delta.range[1] = Math.round(v);
+        rangeSlider.setValue(delta.range[0], delta.range[1]);
+        notify();
+      }
+    });
+    editor.appendChild(rangeRow);
+    return editor;
+  }
+  buildControlForProperty(parent, property, label, value, onChange) {
+    if (isColorProperty(property)) {
+      new ColorPicker(parent, {
+        label,
+        value: typeof value === "string" ? value : "#000000",
+        onChange
+      });
+    } else if (property === "opacity" || property === "visual.stroke.start" || property === "visual.stroke.end") {
+      new SliderInput(parent, {
+        label,
+        value: typeof value === "number" ? value : 0,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        onChange
+      });
+    } else {
+      const config = getNumberConfig(property);
+      new NumberInput(parent, {
+        label,
+        value: typeof value === "number" ? value : 0,
+        ...config,
+        onChange: (v) => onChange(v)
+      });
+    }
+  }
+  reorderDelta(from, to) {
+    const allDeltas = this.opts.state.deltas;
+    const layerId = this.opts.layerId;
+    const absIndices = [];
+    for (let i = 0; i < allDeltas.length; i++) {
+      if (allDeltas[i].layer === layerId) absIndices.push(i);
+    }
+    const absFrom = absIndices[from];
+    const [moved] = allDeltas.splice(absFrom, 1);
+    const newAbsIndices = [];
+    for (let i = 0; i < allDeltas.length; i++) {
+      if (allDeltas[i].layer === layerId) newAbsIndices.push(i);
+    }
+    let insertAt;
+    if (to >= newAbsIndices.length) {
+      insertAt = (newAbsIndices.length > 0 ? newAbsIndices[newAbsIndices.length - 1] : absFrom) + 1;
+    } else {
+      insertAt = newAbsIndices[to];
+    }
+    allDeltas.splice(insertAt, 0, moved);
+    this.deltas = allDeltas.filter((d) => d.layer === layerId);
+    this.expandedIndex = null;
+    this.renderList();
+    this.opts.onDeltaChange();
+  }
+  sortByStartFrame() {
+    this.deltas.sort((a, b) => a.range[0] - b.range[0]);
+    const allDeltas = this.opts.state.deltas;
+    const layerId = this.opts.layerId;
+    const otherDeltas = allDeltas.filter((d) => d.layer !== layerId);
+    let insertAt = allDeltas.findIndex((d) => d.layer === layerId);
+    if (insertAt === -1) insertAt = allDeltas.length;
+    allDeltas.length = 0;
+    for (let i = 0; i < otherDeltas.length; i++) {
+      allDeltas.push(otherDeltas[i]);
+    }
+    for (let i = this.deltas.length - 1; i >= 0; i--) {
+      allDeltas.splice(Math.min(insertAt, allDeltas.length), 0, this.deltas[i]);
+    }
+    this.expandedIndex = null;
+    this.renderList();
+    this.opts.onDeltaChange();
+  }
+  addDelta() {
+    const delta = {
+      layer: this.opts.layerId,
+      property: "opacity",
+      range: [0, Math.max(1, this.opts.state.duration - 1)],
+      from: 0,
+      to: 1,
+      easing: "ease-out"
+    };
+    this.opts.state.deltas.push(delta);
+    this.deltas = this.opts.state.deltas.filter((d) => d.layer === this.opts.layerId);
+    this.expandedIndex = this.deltas.length - 1;
+    this.updateTitleCount();
+    this.renderList();
+    this.opts.onDeltaChange();
+  }
+  removeDelta(delta) {
+    const idx = this.opts.state.deltas.indexOf(delta);
+    if (idx !== -1) {
+      this.opts.state.deltas.splice(idx, 1);
+      this.deltas = this.opts.state.deltas.filter((d) => d.layer === this.opts.layerId);
+      this.expandedIndex = null;
+      this.updateTitleCount();
+      this.renderList();
+      this.opts.onDeltaChange();
+    }
+  }
+};
+function isColorProperty(p) {
+  return p === "visual.fill.color" || p === "visual.stroke.color" || p === "visual.style.color" || p === "shadow.color";
+}
+function getNumberConfig(p) {
+  switch (p) {
+    case "frame.x":
+    case "frame.y":
+    case "anchorPoint.x":
+    case "anchorPoint.y":
+      return { step: 1 };
+    case "bounds.width":
+    case "bounds.height":
+      return { step: 1, min: 1 };
+    case "rotation":
+      return { step: 1, suffix: "\xB0" };
+    case "scale.x":
+    case "scale.y":
+      return { step: 0.1 };
+    case "visual.stroke.width":
+    case "visual.shape.cornerRadius":
+      return { step: 1, min: 0 };
+    case "visual.style.fontSize":
+      return { step: 1, min: 1 };
+    case "shadow.blur":
+      return { step: 1, min: 0, max: 50 };
+    case "shadow.offsetX":
+    case "shadow.offsetY":
+      return { step: 1 };
+    default:
+      return { step: 1 };
+  }
+}
+function getDefaultValues(p) {
+  if (isColorProperty(p)) return { from: "#000000", to: "#ffffff" };
+  if (p === "opacity" || p === "visual.stroke.start" || p === "visual.stroke.end") return { from: 0, to: 1 };
+  if (p === "scale.x" || p === "scale.y") return { from: 1, to: 2 };
+  if (p === "bounds.width" || p === "bounds.height") return { from: 100, to: 200 };
+  if (p === "shadow.blur") return { from: 0, to: 30 };
+  if (p === "shadow.offsetX" || p === "shadow.offsetY") return { from: 0, to: 10 };
+  return { from: 0, to: 100 };
+}
+function formatValue2(v) {
+  if (typeof v === "number") return v % 1 === 0 ? String(v) : v.toFixed(2);
+  if (typeof v === "string") return v;
+  return String(v);
+}
+function formatEasing(e) {
+  if (!e) return "linear";
+  if (typeof e === "string") return e;
+  return e.type;
+}
+
+// src/panels/property-panel.ts
+var PropertyPanel = class {
+  constructor(parent, opts) {
+    this.opts = opts;
+    this.el = document.createElement("div");
+    this.el.className = "atel-property-panel";
+    const header = document.createElement("div");
+    header.className = "atel-panel-header";
+    header.textContent = "Properties";
+    this.el.appendChild(header);
+    this.scroll = document.createElement("div");
+    this.scroll.className = "atel-property-scroll";
+    this.el.appendChild(this.scroll);
+    parent.appendChild(this.el);
+  }
+  el;
+  scroll;
+  deltaPanel = null;
+  doc = null;
+  stateName = "";
+  layerId = null;
+  loadDocument(doc, stateName) {
+    this.doc = doc;
+    this.stateName = stateName;
+  }
+  setStateName(name) {
+    this.stateName = name;
+    if (this.layerId) this.selectLayer(this.layerId);
+  }
+  selectLayer(layerId) {
+    this.layerId = layerId;
+    this.render();
+  }
+  refresh() {
+    this.render();
+  }
+  render() {
+    this.scroll.innerHTML = "";
+    this.deltaPanel = null;
+    if (!this.doc || !this.layerId) {
+      const empty = document.createElement("div");
+      empty.className = "atel-empty";
+      empty.textContent = "Select a layer";
+      this.scroll.appendChild(empty);
+      return;
+    }
+    const layer = this.doc.layers.find((l) => l.id === this.layerId);
+    if (!layer) return;
+    this.addSection("Layer", () => {
+      const row = this.makeRow(true);
+      this.addTextInput(row, "ID", layer.id, (v) => {
+        for (const state2 of Object.values(this.doc.states)) {
+          for (const d of state2.deltas) {
+            if (d.layer === layer.id) d.layer = v;
+          }
+        }
+        layer.id = v;
+        this.layerId = v;
+        this.opts.onPropertyChange();
+      });
+    });
+    this.addSection("Position", () => {
+      const row = this.makeRow();
+      new NumberInput(row, {
+        label: "X",
+        value: layer.frame.x,
+        step: 1,
+        onChange: (v) => {
+          layer.frame.x = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      new NumberInput(row, {
+        label: "Y",
+        value: layer.frame.y,
+        step: 1,
+        onChange: (v) => {
+          layer.frame.y = v;
+          this.opts.onPropertyChange();
+        }
+      });
+    });
+    this.addSection("Size", () => {
+      const row = this.makeRow();
+      new NumberInput(row, {
+        label: "W",
+        value: layer.bounds.width,
+        step: 1,
+        min: 1,
+        onChange: (v) => {
+          layer.bounds.width = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      new NumberInput(row, {
+        label: "H",
+        value: layer.bounds.height,
+        step: 1,
+        min: 1,
+        onChange: (v) => {
+          layer.bounds.height = v;
+          this.opts.onPropertyChange();
+        }
+      });
+    });
+    this.addSection("Transform", () => {
+      const row1 = this.makeRow(true);
+      new SliderInput(row1, {
+        label: "Opacity",
+        value: layer.opacity ?? 1,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        onChange: (v) => {
+          layer.opacity = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      const row2 = this.makeRow();
+      new NumberInput(row2, {
+        label: "Rotation",
+        value: layer.rotation ?? 0,
+        step: 1,
+        suffix: "\xB0",
+        onChange: (v) => {
+          layer.rotation = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      const row3 = this.makeRow();
+      new NumberInput(row3, {
+        label: "Scale X",
+        value: layer.scale?.x ?? 1,
+        step: 0.1,
+        onChange: (v) => {
+          if (!layer.scale) layer.scale = { x: 1, y: 1 };
+          layer.scale.x = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      new NumberInput(row3, {
+        label: "Scale Y",
+        value: layer.scale?.y ?? 1,
+        step: 0.1,
+        onChange: (v) => {
+          if (!layer.scale) layer.scale = { x: 1, y: 1 };
+          layer.scale.y = v;
+          this.opts.onPropertyChange();
+        }
+      });
+    });
+    this.addShadowSection(layer);
+    this.addVisualSection(layer);
+    const state = this.doc.states[this.stateName];
+    if (state) {
+      this.deltaPanel = new DeltaPanel(this.scroll, {
+        doc: this.doc,
+        state,
+        stateName: this.stateName,
+        layerId: this.layerId,
+        onDeltaChange: () => this.opts.onPropertyChange()
+      });
+    }
+  }
+  addVisualSection(layer) {
+    const visual = layer.visual;
+    if (visual.type === "shape") {
+      this.addSection("Visual", () => {
+        if (visual.fill) {
+          const row = this.makeRow(true);
+          new FillEditor(row, {
+            fill: visual.fill,
+            onChange: (newFill) => {
+              visual.fill = newFill;
+              this.opts.onPropertyChange();
+            }
+          });
+        }
+        if (visual.stroke) {
+          const row = this.makeRow(true);
+          const strokeColor = typeof visual.stroke.color === "string" ? visual.stroke.color : "#000000";
+          new ColorPicker(row, {
+            label: "Stroke",
+            value: strokeColor,
+            onChange: (v) => {
+              if (visual.stroke) {
+                visual.stroke.color = v;
+                this.opts.onPropertyChange();
+              }
+            }
+          });
+          const row2 = this.makeRow(true);
+          new NumberInput(row2, {
+            label: "Stroke Width",
+            value: visual.stroke.width,
+            step: 1,
+            min: 0,
+            onChange: (v) => {
+              if (visual.stroke) {
+                visual.stroke.width = v;
+                this.opts.onPropertyChange();
+              }
+            }
+          });
+          const row2b = this.makeRow();
+          new SliderInput(row2b, {
+            label: "Start",
+            value: visual.stroke.strokeStart ?? 0,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            onChange: (v) => {
+              if (visual.stroke) {
+                visual.stroke.strokeStart = v;
+                this.opts.onPropertyChange();
+              }
+            }
+          });
+          new SliderInput(row2b, {
+            label: "End",
+            value: visual.stroke.strokeEnd ?? 1,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            onChange: (v) => {
+              if (visual.stroke) {
+                visual.stroke.strokeEnd = v;
+                this.opts.onPropertyChange();
+              }
+            }
+          });
+        }
+        if (visual.shape.type === "rect") {
+          const cr = typeof visual.shape.cornerRadius === "number" ? visual.shape.cornerRadius : 0;
+          const row = this.makeRow(true);
+          new NumberInput(row, {
+            label: "Corner Radius",
+            value: cr,
+            step: 1,
+            min: 0,
+            onChange: (v) => {
+              if (visual.shape.type === "rect") {
+                visual.shape.cornerRadius = v;
+                this.opts.onPropertyChange();
+              }
+            }
+          });
+        }
+      });
+      if (visual.shape.type === "path") {
+        this.addSection("Path Points", () => {
+          const points = visual.shape.points;
+          for (let i = 0; i < points.length; i++) {
+            const row = this.makeRow();
+            const label = document.createElement("span");
+            label.className = "atel-control-label";
+            label.textContent = `P${i}`;
+            label.style.minWidth = "24px";
+            row.appendChild(label);
+            const idx = i;
+            new NumberInput(row, {
+              label: "X",
+              value: points[idx].x,
+              step: 1,
+              onChange: (v) => {
+                points[idx].x = v;
+                this.opts.onPropertyChange();
+              }
+            });
+            new NumberInput(row, {
+              label: "Y",
+              value: points[idx].y,
+              step: 1,
+              onChange: (v) => {
+                points[idx].y = v;
+                this.opts.onPropertyChange();
+              }
+            });
+            const rmBtn = document.createElement("button");
+            rmBtn.className = "atel-toolbar__btn";
+            rmBtn.textContent = "\u2715";
+            rmBtn.style.padding = "2px 6px";
+            rmBtn.addEventListener("click", () => {
+              points.splice(idx, 1);
+              this.render();
+              this.opts.onPropertyChange();
+            });
+            row.appendChild(rmBtn);
+          }
+          const closedRow = this.makeRow(true);
+          const closedLabel = document.createElement("label");
+          closedLabel.className = "atel-control-label";
+          closedLabel.textContent = "Closed";
+          const checkbox = document.createElement("input");
+          checkbox.type = "checkbox";
+          checkbox.checked = visual.shape.closed ?? false;
+          checkbox.addEventListener("change", () => {
+            if (visual.shape.type === "path") {
+              visual.shape.closed = checkbox.checked;
+              this.opts.onPropertyChange();
+            }
+          });
+          closedRow.appendChild(closedLabel);
+          closedRow.appendChild(checkbox);
+          const addRow = this.makeRow(true);
+          const addBtn = document.createElement("button");
+          addBtn.className = "atel-toolbar__btn";
+          addBtn.textContent = "+ Add Point";
+          addBtn.addEventListener("click", () => {
+            if (visual.shape.type === "path") {
+              const last = visual.shape.points[visual.shape.points.length - 1] ?? { x: 0, y: 0 };
+              visual.shape.points.push({ x: last.x + 20, y: last.y });
+              this.render();
+              this.opts.onPropertyChange();
+            }
+          });
+          addRow.appendChild(addBtn);
+        });
+      }
+    }
+    if (visual.type === "image") {
+      this.addSection("Image", () => {
+        const iv = visual;
+        const row1 = this.makeRow(true);
+        this.addTextInput(row1, "Asset ID", iv.assetId ?? "", (v) => {
+          iv.assetId = v;
+          this.opts.onPropertyChange();
+        });
+        const row2 = this.makeRow(true);
+        this.addTextInput(row2, "Src", iv.src ?? "", (v) => {
+          iv.src = v;
+          this.opts.onPropertyChange();
+        });
+        if (this.doc && iv.assetId && this.doc.assets?.[iv.assetId]) {
+          const row3 = this.makeRow(true);
+          const useBtn = document.createElement("button");
+          useBtn.className = "atel-toolbar__btn";
+          useBtn.textContent = "Use Asset";
+          useBtn.addEventListener("click", () => {
+            if (this.doc?.assets?.[iv.assetId]) {
+              iv.src = this.doc.assets[iv.assetId].src;
+              this.render();
+              this.opts.onPropertyChange();
+            }
+          });
+          row3.appendChild(useBtn);
+        }
+      });
+    }
+    if (visual.type === "text") {
+      this.addSection("Text", () => {
+        const row1 = this.makeRow(true);
+        this.addTextInput(row1, "Content", visual.content, (v) => {
+          visual.content = v;
+          this.opts.onPropertyChange();
+        });
+        const row2 = this.makeRow();
+        new NumberInput(row2, {
+          label: "Font Size",
+          value: visual.style.fontSize,
+          step: 1,
+          min: 1,
+          onChange: (v) => {
+            visual.style.fontSize = v;
+            this.opts.onPropertyChange();
+          }
+        });
+        const textColor = typeof visual.style.color === "string" ? visual.style.color : "#FFFFFF";
+        new ColorPicker(row2, {
+          label: "Color",
+          value: textColor,
+          onChange: (v) => {
+            visual.style.color = v;
+            this.opts.onPropertyChange();
+          }
+        });
+        const row3 = this.makeRow();
+        new SelectInput(row3, {
+          label: "Align",
+          value: visual.style.textAlign ?? "left",
+          options: [
+            { label: "Left", value: "left" },
+            { label: "Center", value: "center" },
+            { label: "Right", value: "right" }
+          ],
+          onChange: (v) => {
+            visual.style.textAlign = v;
+            this.opts.onPropertyChange();
+          }
+        });
+      });
+    }
+  }
+  addShadowSection(layer) {
+    if (!layer.shadow) {
+      this.addSection("Shadow", () => {
+        const row = this.makeRow(true);
+        const addBtn = document.createElement("button");
+        addBtn.className = "atel-toolbar__btn";
+        addBtn.textContent = "+ Add Shadow";
+        addBtn.addEventListener("click", () => {
+          layer.shadow = { color: "#00000080", blur: 10 };
+          this.render();
+          this.opts.onPropertyChange();
+        });
+        row.appendChild(addBtn);
+      });
+      return;
+    }
+    this.addSection("Shadow", () => {
+      const shadow = layer.shadow;
+      const row1 = this.makeRow(true);
+      const shadowColor = typeof shadow.color === "string" ? shadow.color : "#00000080";
+      new ColorPicker(row1, {
+        label: "Color",
+        value: shadowColor,
+        onChange: (v) => {
+          shadow.color = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      const row2 = this.makeRow(true);
+      new SliderInput(row2, {
+        label: "Blur",
+        value: shadow.blur,
+        min: 0,
+        max: 50,
+        step: 1,
+        onChange: (v) => {
+          shadow.blur = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      const row3 = this.makeRow();
+      new NumberInput(row3, {
+        label: "Offset X",
+        value: shadow.offsetX ?? 0,
+        step: 1,
+        onChange: (v) => {
+          shadow.offsetX = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      new NumberInput(row3, {
+        label: "Offset Y",
+        value: shadow.offsetY ?? 0,
+        step: 1,
+        onChange: (v) => {
+          shadow.offsetY = v;
+          this.opts.onPropertyChange();
+        }
+      });
+      const row4 = this.makeRow(true);
+      const rmBtn = document.createElement("button");
+      rmBtn.className = "atel-toolbar__btn";
+      rmBtn.textContent = "Remove Shadow";
+      rmBtn.addEventListener("click", () => {
+        delete layer.shadow;
+        this.render();
+        this.opts.onPropertyChange();
+      });
+      row4.appendChild(rmBtn);
+    });
+  }
+  addSection(title, buildContent) {
+    const section = document.createElement("div");
+    section.className = "atel-prop-section";
+    const titleEl = document.createElement("div");
+    titleEl.className = "atel-prop-section__title";
+    titleEl.textContent = title;
+    section.appendChild(titleEl);
+    this.scroll.appendChild(section);
+    buildContent();
+  }
+  makeRow(full = false) {
+    const row = document.createElement("div");
+    row.className = full ? "atel-prop-row atel-prop-row--full" : "atel-prop-row";
+    const sections = this.scroll.querySelectorAll(".atel-prop-section");
+    const lastSection = sections[sections.length - 1];
+    if (lastSection) lastSection.appendChild(row);
+    return row;
+  }
+  addTextInput(parent, label, value, onChange) {
+    const wrap = document.createElement("div");
+    const lbl = document.createElement("label");
+    lbl.className = "atel-control-label";
+    lbl.textContent = label;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "atel-input";
+    input.value = value;
+    input.addEventListener("change", () => onChange(input.value));
+    wrap.appendChild(lbl);
+    wrap.appendChild(input);
+    parent.appendChild(wrap);
+  }
+};
+
+// src/panels/yaml-panel.ts
+var import_atelier_schema = require("@a-company/atelier-schema");
+var YamlPanel = class {
+  el;
+  pre;
+  copyBtn;
+  doc = null;
+  constructor(parent) {
+    this.el = document.createElement("div");
+    this.el.className = "atel-yaml-panel";
+    const header = document.createElement("div");
+    header.className = "atel-panel-header";
+    const label = document.createElement("span");
+    label.textContent = "YAML Source";
+    this.copyBtn = document.createElement("button");
+    this.copyBtn.className = "atel-yaml-copy-btn";
+    this.copyBtn.textContent = "Copy";
+    this.copyBtn.addEventListener("click", () => this.copyToClipboard());
+    header.appendChild(label);
+    header.appendChild(this.copyBtn);
+    this.el.appendChild(header);
+    const content = document.createElement("div");
+    content.className = "atel-yaml-content";
+    this.pre = document.createElement("pre");
+    content.appendChild(this.pre);
+    this.el.appendChild(content);
+    parent.appendChild(this.el);
+  }
+  loadDocument(doc) {
+    this.doc = doc;
+    this.refresh();
+  }
+  refresh() {
+    if (!this.doc) {
+      this.pre.innerHTML = "";
+      return;
+    }
+    const yaml = (0, import_atelier_schema.serializeAtelier)(this.doc);
+    this.pre.innerHTML = highlightYaml(yaml);
+  }
+  async copyToClipboard() {
+    if (!this.doc) return;
+    const yaml = (0, import_atelier_schema.serializeAtelier)(this.doc);
+    try {
+      await navigator.clipboard.writeText(yaml);
+      const orig = this.copyBtn.textContent;
+      this.copyBtn.textContent = "Copied!";
+      setTimeout(() => {
+        this.copyBtn.textContent = orig;
+      }, 1500);
+    } catch {
+      const range = document.createRange();
+      range.selectNodeContents(this.pre);
+      const sel = window.getSelection();
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+    }
+  }
+};
+function highlightYaml(yaml) {
+  return yaml.split("\n").map((line) => highlightLine(line)).join("\n");
+}
+function highlightLine(line) {
+  if (line.trimStart().startsWith("#")) {
+    return `<span class="atel-yaml-comment">${esc(line)}</span>`;
+  }
+  const kvMatch = line.match(/^(\s*)(- )?([^:]+?)(:)(.*)/);
+  if (kvMatch) {
+    const [, indent, dash, key, colon, rest] = kvMatch;
+    let result = esc(indent);
+    if (dash) result += `<span class="atel-yaml-dash">- </span>`;
+    result += `<span class="atel-yaml-key">${esc(key)}</span>`;
+    result += `<span class="atel-yaml-colon">:</span>`;
+    result += highlightValue(rest);
+    return result;
+  }
+  const listMatch = line.match(/^(\s*)(- )(.*)/);
+  if (listMatch) {
+    const [, indent, dash, val] = listMatch;
+    return esc(indent) + `<span class="atel-yaml-dash">${esc(dash)}</span>` + highlightValue(val);
+  }
+  return esc(line);
+}
+function highlightValue(val) {
+  const trimmed = val.trim();
+  if (!trimmed) return esc(val);
+  if (trimmed.startsWith('"') || trimmed.startsWith("'")) {
+    return ` <span class="atel-yaml-string">${esc(trimmed)}</span>`;
+  }
+  if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+    return ` <span class="atel-yaml-number">${esc(trimmed)}</span>`;
+  }
+  if (trimmed === "true" || trimmed === "false") {
+    return ` <span class="atel-yaml-bool">${esc(trimmed)}</span>`;
+  }
+  if (trimmed === "null" || trimmed === "~") {
+    return ` <span class="atel-yaml-null">${esc(trimmed)}</span>`;
+  }
+  return ` <span class="atel-yaml-string">${esc(trimmed)}</span>`;
+}
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/theme.ts
+var defaultTheme = {
+  bg: "#2C2C2C",
+  bgSecondary: "#333333",
+  bgTertiary: "#3D3D3D",
+  text: "#F5F0EB",
+  textMuted: "#A89F95",
+  textAccent: "#F5F0EB",
+  border: "#4A4A4A",
+  buttonBg: "#3D3D3D",
+  buttonHover: "#4A4A4A",
+  buttonActive: "#555555",
+  accent: "#C75B39",
+  accentHover: "#D4724E",
+  sliderTrack: "#4A4A4A",
+  sliderThumb: "#C75B39",
+  fontFamily: "'Cormorant Garamond', Georgia, serif",
+  fontMono: "'SF Mono', 'Fira Code', monospace",
+  canvasShadow: "0 4px 60px rgba(199, 91, 57, 0.12), 0 0 40px rgba(0,0,0,0.4)"
+};
+function applyStudioTheme(container, theme) {
+  const s = container.style;
+  s.setProperty("--atel-bg", theme.bg);
+  s.setProperty("--atel-bg-secondary", theme.bgSecondary);
+  s.setProperty("--atel-bg-tertiary", theme.bgTertiary);
+  s.setProperty("--atel-text", theme.text);
+  s.setProperty("--atel-text-muted", theme.textMuted);
+  s.setProperty("--atel-text-accent", theme.textAccent);
+  s.setProperty("--atel-border", theme.border);
+  s.setProperty("--atel-button-bg", theme.buttonBg);
+  s.setProperty("--atel-button-hover", theme.buttonHover);
+  s.setProperty("--atel-button-active", theme.buttonActive);
+  s.setProperty("--atel-accent", theme.accent);
+  s.setProperty("--atel-accent-hover", theme.accentHover);
+  s.setProperty("--atel-slider-track", theme.sliderTrack);
+  s.setProperty("--atel-slider-thumb", theme.sliderThumb);
+  s.setProperty("--atel-font-family", theme.fontFamily);
+  s.setProperty("--atel-font-mono", theme.fontMono);
+  s.setProperty("--atel-canvas-shadow", theme.canvasShadow);
+}
+
+// src/history.ts
+var History = class {
+  undoStack = [];
+  redoStack = [];
+  maxSize = 50;
+  /** Push a snapshot (JSON string of the doc before mutation). Clears redo stack. */
+  snapshot(json) {
+    this.undoStack.push(json);
+    if (this.undoStack.length > this.maxSize) {
+      this.undoStack.shift();
+    }
+    this.redoStack.length = 0;
+  }
+  /** Undo: pops from undo stack, pushes current state to redo, returns the restored JSON. */
+  undo(currentJson) {
+    const prev = this.undoStack.pop();
+    if (prev === void 0) return null;
+    this.redoStack.push(currentJson);
+    return prev;
+  }
+  /** Redo: pops from redo stack, pushes current state to undo, returns the restored JSON. */
+  redo(currentJson) {
+    const next = this.redoStack.pop();
+    if (next === void 0) return null;
+    this.undoStack.push(currentJson);
+    return next;
+  }
+  get canUndo() {
+    return this.undoStack.length > 0;
+  }
+  get canRedo() {
+    return this.redoStack.length > 0;
+  }
+  clear() {
+    this.undoStack.length = 0;
+    this.redoStack.length = 0;
+  }
+};
+
+// src/export/video-exporter.ts
+var import_atelier_core2 = require("@a-company/atelier-core");
+var import_atelier_canvas2 = require("@a-company/atelier-canvas");
+
+// src/export/gif-encoder.ts
+function createGifEncoder(width, height) {
+  const chunks = [];
+  const header = new Uint8Array([
+    71,
+    73,
+    70,
+    56,
+    57,
+    97,
+    // "GIF89a"
+    width & 255,
+    width >> 8 & 255,
+    height & 255,
+    height >> 8 & 255,
+    247,
+    // GCT flag, 8-bit color, 256 entries (7+1=8 → 2^8=256)
+    0,
+    // background color index
+    0
+    // pixel aspect ratio
+  ]);
+  chunks.push(header);
+  let globalPalette = null;
+  const loopExt = new Uint8Array([
+    33,
+    255,
+    11,
+    78,
+    69,
+    84,
+    83,
+    67,
+    65,
+    80,
+    69,
+    // "NETSCAPE"
+    50,
+    46,
+    48,
+    // "2.0"
+    3,
+    1,
+    0,
+    0,
+    // loop count = 0 (infinite)
+    0
+    // terminator
+  ]);
+  let frameCount = 0;
+  function addFrame(pixels, delay) {
+    const { palette, indices } = quantize(pixels, width, height);
+    if (frameCount === 0) {
+      globalPalette = palette;
+      chunks.push(globalPalette);
+      chunks.push(loopExt);
+    }
+    const gce = new Uint8Array([
+      33,
+      249,
+      4,
+      8,
+      // disposal = restore to background, no transparency
+      delay & 255,
+      delay >> 8 & 255,
+      0,
+      0
+    ]);
+    chunks.push(gce);
+    const imgDesc = new Uint8Array([
+      44,
+      0,
+      0,
+      0,
+      0,
+      width & 255,
+      width >> 8 & 255,
+      height & 255,
+      height >> 8 & 255,
+      frameCount === 0 ? 0 : 135
+    ]);
+    chunks.push(imgDesc);
+    if (frameCount > 0) {
+      chunks.push(palette);
+    }
+    chunks.push(lzwEncode(indices, 8));
+    frameCount++;
+  }
+  function finish() {
+    if (frameCount === 0 && !globalPalette) {
+      globalPalette = new Uint8Array(256 * 3);
+      chunks.push(globalPalette);
+      chunks.push(loopExt);
+    }
+    chunks.push(new Uint8Array([59]));
+    let total = 0;
+    for (const c of chunks) total += c.length;
+    const out = new Uint8Array(total);
+    let offset = 0;
+    for (const c of chunks) {
+      out.set(c, offset);
+      offset += c.length;
+    }
+    return out;
+  }
+  return { addFrame, finish };
+}
+var freqTable = new Uint32Array(32768);
+function quantize(pixels, width, height) {
+  const pixelCount = width * height;
+  freqTable.fill(0);
+  const pixelKeys = new Uint16Array(pixelCount);
+  for (let i = 0; i < pixelCount; i++) {
+    const off = i * 4;
+    const key = pixels[off] >> 3 << 10 | pixels[off + 1] >> 3 << 5 | pixels[off + 2] >> 3;
+    freqTable[key]++;
+    pixelKeys[i] = key;
+  }
+  const entries = [];
+  for (let k = 0; k < 32768; k++) {
+    if (freqTable[k] > 0) entries.push({ key: k, count: freqTable[k] });
+  }
+  let top;
+  if (entries.length <= 256) {
+    top = entries;
+  } else {
+    entries.sort((a, b) => b.count - a.count);
+    top = entries.slice(0, 256);
+  }
+  const palette = new Uint8Array(256 * 3);
+  const paletteR5 = new Uint8Array(256);
+  const paletteG5 = new Uint8Array(256);
+  const paletteB5 = new Uint8Array(256);
+  const paletteCount = top.length;
+  const directLut = new Int16Array(32768);
+  directLut.fill(-1);
+  for (let i = 0; i < paletteCount; i++) {
+    const key = top[i].key;
+    const r5 = key >> 10 & 31;
+    const g5 = key >> 5 & 31;
+    const b5 = key & 31;
+    palette[i * 3] = r5 << 3;
+    palette[i * 3 + 1] = g5 << 3;
+    palette[i * 3 + 2] = b5 << 3;
+    paletteR5[i] = r5;
+    paletteG5[i] = g5;
+    paletteB5[i] = b5;
+    directLut[key] = i;
+  }
+  const colorLut = new Uint8Array(32768);
+  for (let k = 0; k < 32768; k++) {
+    const direct = directLut[k];
+    if (direct >= 0) {
+      colorLut[k] = direct;
+      continue;
+    }
+    const r = k >> 10 & 31;
+    const g = k >> 5 & 31;
+    const b = k & 31;
+    let best = 0;
+    let bestDist = 2147483647;
+    for (let i = 0; i < paletteCount; i++) {
+      const dr = r - paletteR5[i];
+      const dg = g - paletteG5[i];
+      const db = b - paletteB5[i];
+      const dist = dr * dr + dg * dg + db * db;
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = i;
+        if (dist === 0) break;
+      }
+    }
+    colorLut[k] = best;
+  }
+  const indices = new Uint8Array(pixelCount);
+  for (let i = 0; i < pixelCount; i++) {
+    indices[i] = colorLut[pixelKeys[i]];
+  }
+  return { palette, indices };
+}
+var LZW_HASH_SIZE = 8192;
+var LZW_HASH_MASK = LZW_HASH_SIZE - 1;
+var hashKeys = new Int32Array(LZW_HASH_SIZE);
+var hashVals = new Int16Array(LZW_HASH_SIZE);
+function lzwEncode(indices, minCodeSize) {
+  const clearCode = 1 << minCodeSize;
+  const eoiCode = clearCode + 1;
+  const maxDictSize = 4096;
+  let buf = new Uint8Array(256 + (indices.length >>> 1));
+  let bufPos = 0;
+  buf[bufPos++] = minCodeSize;
+  let subBlockStart = bufPos;
+  buf[bufPos++] = 0;
+  let subBlockLen = 0;
+  let bitBuf = 0;
+  let bitCount = 0;
+  function ensureCapacity(need) {
+    if (bufPos + need >= buf.length) {
+      const next = new Uint8Array(Math.max(buf.length * 2, bufPos + need + 256));
+      next.set(buf);
+      buf = next;
+    }
+  }
+  function writeBits(code, codeSize2) {
+    bitBuf |= code << bitCount;
+    bitCount += codeSize2;
+    while (bitCount >= 8) {
+      ensureCapacity(4);
+      buf[bufPos++] = bitBuf & 255;
+      bitBuf >>>= 8;
+      bitCount -= 8;
+      subBlockLen++;
+      if (subBlockLen === 255) {
+        buf[subBlockStart] = 255;
+        subBlockStart = bufPos;
+        buf[bufPos++] = 0;
+        subBlockLen = 0;
+      }
+    }
+  }
+  function flushBits() {
+    if (bitCount > 0) {
+      ensureCapacity(4);
+      buf[bufPos++] = bitBuf & 255;
+      bitBuf = 0;
+      bitCount = 0;
+      subBlockLen++;
+    }
+    if (subBlockLen > 0) {
+      buf[subBlockStart] = subBlockLen;
+      ensureCapacity(1);
+      buf[bufPos++] = 0;
+    } else {
+      bufPos = subBlockStart;
+      ensureCapacity(1);
+      buf[bufPos++] = 0;
+    }
+  }
+  let codeSize = minCodeSize + 1;
+  let nextCode = eoiCode + 1;
+  function resetDict() {
+    hashKeys.fill(-1);
+    codeSize = minCodeSize + 1;
+    nextCode = eoiCode + 1;
+  }
+  function hashLookup(prefix, suffix) {
+    const key = prefix << 8 | suffix;
+    let slot = key * 2654435761 & LZW_HASH_MASK;
+    while (true) {
+      if (hashKeys[slot] === key) return hashVals[slot];
+      if (hashKeys[slot] === -1) return -1;
+      slot = slot + 1 & LZW_HASH_MASK;
+    }
+  }
+  function hashInsert(prefix, suffix, code) {
+    const key = prefix << 8 | suffix;
+    let slot = key * 2654435761 & LZW_HASH_MASK;
+    while (hashKeys[slot] !== -1) {
+      slot = slot + 1 & LZW_HASH_MASK;
+    }
+    hashKeys[slot] = key;
+    hashVals[slot] = code;
+  }
+  resetDict();
+  writeBits(clearCode, codeSize);
+  if (indices.length === 0) {
+    writeBits(eoiCode, codeSize);
+    flushBits();
+    return buf.subarray(0, bufPos);
+  }
+  let current = indices[0];
+  for (let i = 1; i < indices.length; i++) {
+    const suffix = indices[i];
+    const found = hashLookup(current, suffix);
+    if (found >= 0) {
+      current = found;
+    } else {
+      writeBits(current, codeSize);
+      if (nextCode < maxDictSize) {
+        hashInsert(current, suffix, nextCode++);
+        if (nextCode > 1 << codeSize && codeSize < 12) {
+          codeSize++;
+        }
+      } else {
+        writeBits(clearCode, codeSize);
+        resetDict();
+      }
+      current = suffix;
+    }
+  }
+  writeBits(current, codeSize);
+  writeBits(eoiCode, codeSize);
+  flushBits();
+  return buf.subarray(0, bufPos);
+}
+
+// src/export/video-exporter.ts
+function supportsWebCodecs() {
+  return typeof VideoEncoder !== "undefined" && typeof VideoFrame !== "undefined";
+}
+function supportsWebM() {
+  return supportsWebCodecs();
+}
+function supportsGifExport() {
+  return true;
+}
+async function exportDocument(doc, canvas, imageCache, opts) {
+  if (opts.format === "mp4") {
+    return exportMP4(doc, canvas, imageCache, opts);
+  }
+  if (opts.format === "webm") {
+    return exportWebM(doc, canvas, imageCache, opts);
+  }
+  return exportGIF(doc, canvas, imageCache, opts);
+}
+function createManagedEncoder(onChunk) {
+  let encError = null;
+  const encoder = new VideoEncoder({
+    output: (chunk, meta) => {
+      onChunk(chunk, meta ?? void 0);
+    },
+    error: (e) => {
+      encError = e;
+    }
+  });
+  function checkError() {
+    if (encError) {
+      const msg = encError.message;
+      encError = null;
+      throw new Error(`VideoEncoder error: ${msg}`);
+    }
+    if (encoder.state === "closed") {
+      throw new Error("VideoEncoder closed unexpectedly.");
+    }
+  }
+  async function waitForDrain() {
+    while (encoder.state === "configured" && encoder.encodeQueueSize > 5) {
+      await yieldToMain();
+      if (encError) checkError();
+    }
+  }
+  return { encoder, checkError, waitForDrain };
+}
+async function exportMP4(doc, canvas, imageCache, opts) {
+  if (!supportsWebCodecs()) {
+    throw new Error("WebCodecs API not available \u2014 MP4 export requires a modern browser.");
+  }
+  const { Muxer, ArrayBufferTarget } = await import("mp4-muxer");
+  const fps = doc.canvas.fps ?? 30;
+  const width = doc.canvas.width;
+  const height = doc.canvas.height;
+  const encWidth = width % 2 === 0 ? width : width + 1;
+  const encHeight = height % 2 === 0 ? height : height + 1;
+  const codecConfig = {
+    codec: "avc1.42001f",
+    width: encWidth,
+    height: encHeight,
+    bitrate: 5e6,
+    framerate: fps
+  };
+  const support = await VideoEncoder.isConfigSupported(codecConfig);
+  if (!support.supported) {
+    throw new Error(
+      `H.264 codec not supported for ${encWidth}\xD7${encHeight} at ${fps}fps. Try exporting as GIF or WebM instead.`
+    );
+  }
+  const target = new ArrayBufferTarget();
+  const muxer = new Muxer({
+    target,
+    video: {
+      codec: "avc",
+      width: encWidth,
+      height: encHeight
+    },
+    fastStart: "in-memory"
+  });
+  const { encoder, checkError, waitForDrain } = createManagedEncoder(
+    (chunk, meta) => muxer.addVideoChunk(chunk, meta)
+  );
+  encoder.configure(support.config);
+  await yieldToMain();
+  checkError();
+  const frames = collectFrames(doc, opts.states);
+  const totalFrames = frames.length;
+  const frameDurationUs = Math.round(1e6 / fps);
+  const ctx = canvas.getContext("2d");
+  const origWidth = canvas.width;
+  const origHeight = canvas.height;
+  if (encWidth !== width || encHeight !== height) {
+    canvas.width = encWidth;
+    canvas.height = encHeight;
+  }
+  try {
+    for (let i = 0; i < totalFrames; i++) {
+      checkError();
+      await waitForDrain();
+      const { state, frame } = frames[i];
+      const resolved = (0, import_atelier_core2.resolveFrame)(doc, state, frame);
+      (0, import_atelier_canvas2.renderFrame)(ctx, resolved, doc, imageCache);
+      const timestamp = i * frameDurationUs;
+      const videoFrame = new VideoFrame(canvas, { timestamp });
+      encoder.encode(videoFrame, { keyFrame: i % 60 === 0 });
+      videoFrame.close();
+      opts.onProgress?.({
+        frame: i + 1,
+        total: totalFrames,
+        percent: Math.round((i + 1) / totalFrames * 100)
+      });
+      if (i % 10 === 9) await yieldToMain();
+    }
+    await encoder.flush();
+    checkError();
+    encoder.close();
+    muxer.finalize();
+  } finally {
+    if (encWidth !== width || encHeight !== height) {
+      canvas.width = origWidth;
+      canvas.height = origHeight;
+    }
+  }
+  const durationMs = Math.round(totalFrames / fps * 1e3);
+  return {
+    blob: new Blob([target.buffer], { type: "video/mp4" }),
+    format: "mp4",
+    totalFrames,
+    durationMs
+  };
+}
+async function exportWebM(doc, _canvas, imageCache, opts) {
+  if (!supportsWebCodecs()) {
+    throw new Error("WebCodecs API not available \u2014 WebM export requires a modern browser.");
+  }
+  const { Muxer, ArrayBufferTarget } = await import("webm-muxer");
+  const fps = doc.canvas.fps ?? 30;
+  const width = doc.canvas.width;
+  const height = doc.canvas.height;
+  const codecCandidates = [
+    {
+      codec: "vp09.00.10.08",
+      width,
+      height,
+      bitrate: 5e6,
+      framerate: fps,
+      alpha: "keep"
+    },
+    {
+      codec: "vp09.00.10.08",
+      width,
+      height,
+      bitrate: 5e6,
+      framerate: fps
+    },
+    {
+      codec: "vp8",
+      width,
+      height,
+      bitrate: 5e6,
+      framerate: fps
+    }
+  ];
+  let chosenConfig = null;
+  for (const candidate of codecCandidates) {
+    const support = await VideoEncoder.isConfigSupported(candidate);
+    if (support.supported) {
+      chosenConfig = support.config;
+      break;
+    }
+  }
+  if (!chosenConfig) {
+    throw new Error(
+      `No supported VP9/VP8 codec for ${width}\xD7${height}. Try exporting as MP4 or GIF instead.`
+    );
+  }
+  const hasAlpha = chosenConfig.alpha === "keep";
+  const muxCodec = chosenConfig.codec.startsWith("vp09") ? "V_VP9" : "V_VP8";
+  const target = new ArrayBufferTarget();
+  const muxer = new Muxer({
+    target,
+    video: {
+      codec: muxCodec,
+      width,
+      height
+    }
+  });
+  const { encoder, checkError, waitForDrain } = createManagedEncoder(
+    (chunk, meta) => muxer.addVideoChunk(chunk, meta)
+  );
+  encoder.configure(chosenConfig);
+  await yieldToMain();
+  checkError();
+  const frames = collectFrames(doc, opts.states);
+  const totalFrames = frames.length;
+  const frameDurationUs = Math.round(1e6 / fps);
+  const alphaCanvas = document.createElement("canvas");
+  alphaCanvas.width = width;
+  alphaCanvas.height = height;
+  const ctx = alphaCanvas.getContext("2d", { alpha: hasAlpha });
+  for (let i = 0; i < totalFrames; i++) {
+    checkError();
+    await waitForDrain();
+    const { state, frame } = frames[i];
+    const resolved = (0, import_atelier_core2.resolveFrame)(doc, state, frame);
+    ctx.clearRect(0, 0, width, height);
+    (0, import_atelier_canvas2.renderFrame)(ctx, resolved, doc, imageCache);
+    const timestamp = i * frameDurationUs;
+    const frameOpts = { timestamp };
+    if (hasAlpha) frameOpts.alpha = "keep";
+    const videoFrame = new VideoFrame(alphaCanvas, frameOpts);
+    encoder.encode(videoFrame, { keyFrame: i % 60 === 0 });
+    videoFrame.close();
+    opts.onProgress?.({
+      frame: i + 1,
+      total: totalFrames,
+      percent: Math.round((i + 1) / totalFrames * 100)
+    });
+    if (i % 10 === 9) await yieldToMain();
+  }
+  await encoder.flush();
+  checkError();
+  encoder.close();
+  muxer.finalize();
+  const durationMs = Math.round(totalFrames / fps * 1e3);
+  return {
+    blob: new Blob([target.buffer], { type: "video/webm" }),
+    format: "webm",
+    totalFrames,
+    durationMs
+  };
+}
+async function exportGIF(doc, canvas, imageCache, opts) {
+  const fps = doc.canvas.fps ?? 30;
+  const width = doc.canvas.width;
+  const height = doc.canvas.height;
+  const ctx = canvas.getContext("2d");
+  const frames = collectFrames(doc, opts.states);
+  const totalFrames = frames.length;
+  const encoder = createGifEncoder(width, height);
+  const MIN_DELAY_CS = 3;
+  const minFrameMs = MIN_DELAY_CS * 10;
+  let accGifTimeMs = 0;
+  let gifFrameCount = 0;
+  for (let i = 0; i < totalFrames; i++) {
+    const frameEndMs = (i + 1) * 1e3 / fps;
+    if (frameEndMs - accGifTimeMs < minFrameMs && i < totalFrames - 1) {
+      opts.onProgress?.({
+        frame: i + 1,
+        total: totalFrames,
+        percent: Math.round((i + 1) / totalFrames * 100)
+      });
+      continue;
+    }
+    const { state, frame } = frames[i];
+    const resolved = (0, import_atelier_core2.resolveFrame)(doc, state, frame);
+    (0, import_atelier_canvas2.renderFrame)(ctx, resolved, doc, imageCache);
+    const delayCentiseconds = Math.max(MIN_DELAY_CS, Math.round((frameEndMs - accGifTimeMs) / 10));
+    accGifTimeMs += delayCentiseconds * 10;
+    const imageData = ctx.getImageData(0, 0, width, height);
+    encoder.addFrame(imageData.data, delayCentiseconds);
+    gifFrameCount++;
+    opts.onProgress?.({
+      frame: i + 1,
+      total: totalFrames,
+      percent: Math.round((i + 1) / totalFrames * 100)
+    });
+    if (gifFrameCount % 10 === 9) await yieldToMain();
+  }
+  const bytes = encoder.finish();
+  const durationMs = Math.round(totalFrames / fps * 1e3);
+  return {
+    blob: new Blob([bytes.buffer], { type: "image/gif" }),
+    format: "gif",
+    totalFrames,
+    durationMs
+  };
+}
+function collectFrames(doc, stateNames) {
+  const names = stateNames ?? Object.keys(doc.states);
+  const entries = [];
+  for (const state of names) {
+    const s = doc.states[state];
+    if (!s) continue;
+    for (let f = 0; f < s.duration; f++) {
+      entries.push({ state, frame: f });
+    }
+  }
+  return entries;
+}
+function yieldToMain() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+// src/export/export-dialog.ts
+var ExportDialog = class {
+  overlay = null;
+  dialog = null;
+  blobUrl = null;
+  parentEl = null;
+  /**
+   * Mount the export overlay into the given parent element.
+   * Typically called with the studio root.
+   */
+  show(doc, canvas, imageCache, parentEl) {
+    this.parentEl = parentEl;
+    this.overlay = document.createElement("div");
+    this.overlay.className = "atel-export-overlay";
+    this.overlay.addEventListener("click", (e) => {
+      if (e.target === this.overlay) this.destroy();
+    });
+    this.dialog = document.createElement("div");
+    this.dialog.className = "atel-export-dialog";
+    this.overlay.appendChild(this.dialog);
+    parentEl.appendChild(this.overlay);
+    this.renderOptions(doc, canvas, imageCache);
+  }
+  destroy() {
+    if (this.blobUrl) {
+      URL.revokeObjectURL(this.blobUrl);
+      this.blobUrl = null;
+    }
+    if (this.overlay && this.parentEl) {
+      this.parentEl.removeChild(this.overlay);
+    }
+    this.overlay = null;
+    this.dialog = null;
+    this.parentEl = null;
+  }
+  // ── Options screen ─────────────────────────────────────────
+  renderOptions(doc, canvas, imageCache) {
+    if (!this.dialog) return;
+    this.dialog.innerHTML = "";
+    const title = document.createElement("div");
+    title.className = "atel-export-dialog__title";
+    title.textContent = "Export Animation";
+    this.dialog.appendChild(title);
+    const formatRow = document.createElement("div");
+    formatRow.className = "atel-export-dialog__row";
+    const formatLabel = document.createElement("label");
+    formatLabel.className = "atel-control-label";
+    formatLabel.textContent = "FORMAT";
+    formatRow.appendChild(formatLabel);
+    const formatSelect = document.createElement("select");
+    formatSelect.className = "atel-toolbar__select atel-export-dialog__select";
+    const gifOpt = document.createElement("option");
+    gifOpt.value = "gif";
+    gifOpt.textContent = "GIF";
+    formatSelect.appendChild(gifOpt);
+    const mp4Opt = document.createElement("option");
+    mp4Opt.value = "mp4";
+    if (supportsWebCodecs()) {
+      mp4Opt.textContent = "MP4";
+    } else {
+      mp4Opt.textContent = "MP4 (not supported)";
+      mp4Opt.disabled = true;
+    }
+    formatSelect.appendChild(mp4Opt);
+    const webmOpt = document.createElement("option");
+    webmOpt.value = "webm";
+    if (supportsWebCodecs()) {
+      webmOpt.textContent = "WebM (transparent)";
+    } else {
+      webmOpt.textContent = "WebM (not supported)";
+      webmOpt.disabled = true;
+    }
+    formatSelect.appendChild(webmOpt);
+    formatRow.appendChild(formatSelect);
+    this.dialog.appendChild(formatRow);
+    const fps = doc.canvas.fps ?? 30;
+    const stateNames = Object.keys(doc.states);
+    let totalFrames = 0;
+    for (const name of stateNames) {
+      totalFrames += doc.states[name]?.duration ?? 0;
+    }
+    const info = document.createElement("div");
+    info.className = "atel-export-dialog__info";
+    info.textContent = `${doc.canvas.width}\xD7${doc.canvas.height} \u2022 ${fps} fps \u2022 ${totalFrames} frames \u2022 ${stateNames.length} state${stateNames.length !== 1 ? "s" : ""}`;
+    this.dialog.appendChild(info);
+    const btnRow = document.createElement("div");
+    btnRow.className = "atel-export-dialog__actions";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.className = "atel-toolbar__btn";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.addEventListener("click", () => this.destroy());
+    btnRow.appendChild(cancelBtn);
+    const exportBtn = document.createElement("button");
+    exportBtn.className = "atel-toolbar__btn atel-toolbar__btn--active";
+    exportBtn.textContent = "Export";
+    exportBtn.addEventListener("click", () => {
+      const format = formatSelect.value;
+      this.renderProgress(doc, canvas, imageCache, format);
+    });
+    btnRow.appendChild(exportBtn);
+    this.dialog.appendChild(btnRow);
+  }
+  // ── Progress screen ────────────────────────────────────────
+  renderProgress(doc, canvas, imageCache, format) {
+    if (!this.dialog) return;
+    this.dialog.innerHTML = "";
+    const title = document.createElement("div");
+    title.className = "atel-export-dialog__title";
+    title.textContent = "Exporting\u2026";
+    this.dialog.appendChild(title);
+    const progress = document.createElement("progress");
+    progress.className = "atel-export-dialog__progress";
+    progress.max = 100;
+    progress.value = 0;
+    this.dialog.appendChild(progress);
+    const statusText = document.createElement("div");
+    statusText.className = "atel-export-dialog__status";
+    statusText.textContent = "Preparing\u2026";
+    this.dialog.appendChild(statusText);
+    exportDocument(doc, canvas, imageCache, {
+      format,
+      onProgress: ({ frame, total, percent }) => {
+        progress.value = percent;
+        statusText.textContent = `Rendering frame ${frame} / ${total}`;
+      }
+    }).then((result) => {
+      this.renderDone(result);
+    }).catch((err) => {
+      this.renderError(err);
+    });
+  }
+  // ── Done screen ────────────────────────────────────────────
+  renderDone(result) {
+    if (!this.dialog) return;
+    this.dialog.innerHTML = "";
+    const title = document.createElement("div");
+    title.className = "atel-export-dialog__title";
+    title.textContent = "Export Complete";
+    this.dialog.appendChild(title);
+    const info = document.createElement("div");
+    info.className = "atel-export-dialog__info";
+    const sizeMB = (result.blob.size / (1024 * 1024)).toFixed(2);
+    const durationSec = (result.durationMs / 1e3).toFixed(1);
+    info.textContent = `${result.totalFrames} frames \u2022 ${durationSec}s \u2022 ${sizeMB} MB`;
+    this.dialog.appendChild(info);
+    this.blobUrl = URL.createObjectURL(result.blob);
+    const ext = result.format;
+    const downloadBtn = document.createElement("a");
+    downloadBtn.href = this.blobUrl;
+    downloadBtn.download = `animation.${ext}`;
+    downloadBtn.className = "atel-toolbar__btn atel-toolbar__btn--active atel-export-download";
+    downloadBtn.textContent = `Download .${ext}`;
+    this.dialog.appendChild(downloadBtn);
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "atel-toolbar__btn";
+    closeBtn.textContent = "Close";
+    closeBtn.style.marginTop = "8px";
+    closeBtn.addEventListener("click", () => this.destroy());
+    this.dialog.appendChild(closeBtn);
+  }
+  // ── Error screen ───────────────────────────────────────────
+  renderError(err) {
+    if (!this.dialog) return;
+    this.dialog.innerHTML = "";
+    const title = document.createElement("div");
+    title.className = "atel-export-dialog__title";
+    title.textContent = "Export Failed";
+    this.dialog.appendChild(title);
+    const msg = document.createElement("div");
+    msg.className = "atel-export-dialog__info";
+    msg.textContent = err instanceof Error ? err.message : String(err);
+    this.dialog.appendChild(msg);
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "atel-toolbar__btn";
+    closeBtn.textContent = "Close";
+    closeBtn.style.marginTop = "8px";
+    closeBtn.addEventListener("click", () => this.destroy());
+    this.dialog.appendChild(closeBtn);
+  }
+};
+
+// src/studio.ts
+var AtelierStudio = class {
+  constructor(container, opts = {}) {
+    this.container = container;
+    this.opts = opts;
+    this.currentTab = opts.initialTab ?? "yaml";
+    this.root = document.createElement("div");
+    this.root.className = "atel-studio";
+    applyStudioTheme(this.root, defaultTheme);
+    this.toolbar = document.createElement("div");
+    this.toolbar.className = "atel-toolbar";
+    this.buildToolbar();
+    this.root.appendChild(this.toolbar);
+    this.body = document.createElement("div");
+    this.body.className = "atel-body";
+    this.root.appendChild(this.body);
+    this.rightPanel = document.createElement("div");
+    this.rightPanel.className = "atel-right-panel";
+    this.canvasPanel = new CanvasPanel(this.body, {
+      onFrameChange: () => {
+      }
+    });
+    this.body.appendChild(this.rightPanel);
+    this.layerPanel = new LayerPanel(this.rightPanel, {
+      onSelectLayer: (id) => {
+        this.propertyPanel.selectLayer(id);
+      },
+      onDocumentChange: () => this.onDocChange()
+    });
+    this.propertyPanel = new PropertyPanel(this.rightPanel, {
+      onPropertyChange: () => this.onDocChange()
+    });
+    this.yamlPanel = new YamlPanel(this.rightPanel);
+    container.appendChild(this.root);
+    this.applyTab();
+    this.root.tabIndex = 0;
+    this.root.addEventListener("keydown", (e) => this.handleKeydown(e), {
+      signal: this.abortController.signal
+    });
+  }
+  root;
+  toolbar;
+  body;
+  rightPanel;
+  stateSelect;
+  tabBtns = /* @__PURE__ */ new Map();
+  undoBtn;
+  redoBtn;
+  canvasPanel;
+  layerPanel;
+  propertyPanel;
+  yamlPanel;
+  doc = null;
+  originalDoc = null;
+  currentTab;
+  stateName = "";
+  abortController = new AbortController();
+  history = new History();
+  lastSnapshot = "";
+  handleKeydown(e) {
+    const mod = e.metaKey || e.ctrlKey;
+    if (mod && e.key === "z" && !e.shiftKey) {
+      e.preventDefault();
+      this.undoAction();
+      return;
+    }
+    if (mod && e.key === "z" && e.shiftKey) {
+      e.preventDefault();
+      this.redoAction();
+      return;
+    }
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) return;
+    switch (e.key) {
+      case " ":
+        e.preventDefault();
+        this.canvasPanel.togglePlay();
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        this.canvasPanel.stepForward();
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        this.canvasPanel.stepBack();
+        break;
+      case "Delete":
+      case "Backspace":
+        e.preventDefault();
+        this.layerPanel.removeSelectedLayer();
+        this.onDocChange();
+        break;
+    }
+  }
+  loadDocument(doc) {
+    this.originalDoc = structuredClone(doc);
+    this.doc = structuredClone(doc);
+    this.stateName = Object.keys(this.doc.states)[0] ?? "";
+    this.lastSnapshot = JSON.stringify(this.doc);
+    this.history.clear();
+    this.stateSelect.innerHTML = "";
+    const stateNames = Object.keys(this.doc.states);
+    for (const name of stateNames) {
+      const o = document.createElement("option");
+      o.value = name;
+      o.textContent = name;
+      this.stateSelect.appendChild(o);
+    }
+    this.stateSelect.value = this.stateName;
+    this.stateSelect.style.display = stateNames.length > 1 ? "" : "none";
+    this.canvasPanel.loadDocument(this.doc, this.stateName);
+    this.layerPanel.loadDocument(this.doc);
+    this.propertyPanel.loadDocument(this.doc, this.stateName);
+    this.yamlPanel.loadDocument(this.doc);
+  }
+  getDocument() {
+    return this.doc ? structuredClone(this.doc) : null;
+  }
+  setTheme(theme) {
+    applyStudioTheme(this.root, theme);
+  }
+  setTab(tab) {
+    this.currentTab = tab;
+    this.applyTab();
+  }
+  destroy() {
+    this.abortController.abort();
+    this.canvasPanel.destroy();
+    this.container.removeChild(this.root);
+  }
+  buildToolbar() {
+    const leftGroup = document.createElement("div");
+    leftGroup.className = "atel-toolbar__group atel-toolbar__group--controls";
+    this.stateSelect = document.createElement("select");
+    this.stateSelect.className = "atel-toolbar__select";
+    this.stateSelect.style.display = "none";
+    this.stateSelect.addEventListener("change", () => {
+      this.stateName = this.stateSelect.value;
+      this.canvasPanel.setStateName(this.stateName);
+      this.propertyPanel.setStateName(this.stateName);
+    });
+    leftGroup.appendChild(this.stateSelect);
+    const resetBtn = document.createElement("button");
+    resetBtn.className = "atel-toolbar__btn";
+    resetBtn.textContent = "Reset";
+    resetBtn.dataset.action = "reset";
+    resetBtn.addEventListener("click", () => this.resetDocument());
+    leftGroup.appendChild(resetBtn);
+    this.undoBtn = document.createElement("button");
+    this.undoBtn.className = "atel-toolbar__btn";
+    this.undoBtn.textContent = "\u21A9 Undo";
+    this.undoBtn.dataset.action = "undo";
+    this.undoBtn.disabled = true;
+    this.undoBtn.addEventListener("click", () => this.undoAction());
+    leftGroup.appendChild(this.undoBtn);
+    this.redoBtn = document.createElement("button");
+    this.redoBtn.className = "atel-toolbar__btn";
+    this.redoBtn.textContent = "Redo \u21AA";
+    this.redoBtn.dataset.action = "redo";
+    this.redoBtn.disabled = true;
+    this.redoBtn.addEventListener("click", () => this.redoAction());
+    leftGroup.appendChild(this.redoBtn);
+    this.toolbar.appendChild(leftGroup);
+    const spacer = document.createElement("div");
+    spacer.className = "atel-toolbar__spacer";
+    this.toolbar.appendChild(spacer);
+    const exportGroup = document.createElement("div");
+    exportGroup.className = "atel-toolbar__group--controls";
+    const exportBtn = document.createElement("button");
+    exportBtn.className = "atel-toolbar__btn";
+    exportBtn.textContent = "Export";
+    exportBtn.dataset.action = "export";
+    exportBtn.addEventListener("click", () => this.showExportDialog());
+    exportGroup.appendChild(exportBtn);
+    this.toolbar.appendChild(exportGroup);
+    const tabGroup = document.createElement("div");
+    tabGroup.className = "atel-toolbar__group";
+    const tabs = [
+      { id: "yaml", label: "{ } YAML" },
+      { id: "editor", label: "\u270E Editor" }
+    ];
+    for (const t of tabs) {
+      const btn = document.createElement("button");
+      btn.className = "atel-toolbar__btn";
+      btn.textContent = t.label;
+      btn.addEventListener("click", () => this.setTab(t.id));
+      this.tabBtns.set(t.id, btn);
+      tabGroup.appendChild(btn);
+    }
+    this.toolbar.appendChild(tabGroup);
+  }
+  applyTab() {
+    for (const [id, btn] of this.tabBtns) {
+      btn.classList.toggle("atel-toolbar__btn--active", id === this.currentTab);
+    }
+    this.layerPanel.el.style.display = "none";
+    this.propertyPanel.el.style.display = "none";
+    this.yamlPanel.el.style.display = "none";
+    this.rightPanel.className = "atel-right-panel";
+    switch (this.currentTab) {
+      case "yaml":
+        this.rightPanel.classList.add("atel-right-panel--yaml");
+        this.yamlPanel.el.style.display = "";
+        this.yamlPanel.refresh();
+        break;
+      case "editor":
+        this.rightPanel.classList.add("atel-right-panel--editor");
+        this.layerPanel.el.style.display = "";
+        this.propertyPanel.el.style.display = "";
+        break;
+    }
+  }
+  onDocChange() {
+    if (this.doc) {
+      this.history.snapshot(this.lastSnapshot);
+      this.lastSnapshot = JSON.stringify(this.doc);
+    }
+    this.canvasPanel.refresh();
+    if (this.currentTab === "yaml") {
+      this.yamlPanel.refresh();
+    }
+    this.layerPanel.refresh();
+    this.updateUndoRedoButtons();
+    if (this.doc) {
+      this.opts.onDocumentChange?.(this.doc);
+    }
+  }
+  undoAction() {
+    if (!this.doc) return;
+    const json = this.history.undo(this.lastSnapshot);
+    if (json === null) return;
+    this.lastSnapshot = json;
+    this.doc = JSON.parse(json);
+    this.reloadPanels();
+    this.updateUndoRedoButtons();
+  }
+  redoAction() {
+    if (!this.doc) return;
+    const json = this.history.redo(this.lastSnapshot);
+    if (json === null) return;
+    this.lastSnapshot = json;
+    this.doc = JSON.parse(json);
+    this.reloadPanels();
+    this.updateUndoRedoButtons();
+  }
+  updateUndoRedoButtons() {
+    this.undoBtn.disabled = !this.history.canUndo;
+    this.redoBtn.disabled = !this.history.canRedo;
+  }
+  reloadPanels() {
+    if (!this.doc) return;
+    this.stateName = Object.keys(this.doc.states)[0] ?? "";
+    this.canvasPanel.loadDocument(this.doc, this.stateName);
+    this.layerPanel.loadDocument(this.doc);
+    this.propertyPanel.loadDocument(this.doc, this.stateName);
+    this.yamlPanel.loadDocument(this.doc);
+    if (this.currentTab === "yaml") this.yamlPanel.refresh();
+    this.opts.onDocumentChange?.(this.doc);
+  }
+  resetDocument() {
+    if (this.originalDoc) {
+      this.loadDocument(this.originalDoc);
+    }
+  }
+  showExportDialog() {
+    if (!this.doc) return;
+    this.canvasPanel.pause();
+    const dialog = new ExportDialog();
+    dialog.show(
+      this.doc,
+      this.canvasPanel.getCanvas(),
+      this.canvasPanel.getImageCache(),
+      this.root
+    );
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AtelierStudio,
+  applyStudioTheme,
+  defaultTheme,
+  exportDocument,
+  supportsGifExport,
+  supportsWebCodecs,
+  supportsWebM
+});
+//# sourceMappingURL=index.cjs.map