@jxsuite/studio 0.20.0 → 0.21.1

package/dist/studio.js

@@ -194849,6 +194849,18 @@ function activateTab(tabId) {
   if (workspace.tabs.has(tabId))
     workspace.activeTabId = tabId;
 }
+function renameTab(oldId, newId, newDocumentPath) {
+  const tab = workspace.tabs.get(oldId);
+  if (!tab)
+    return;
+  tab.id = newId;
+  tab.documentPath = newDocumentPath;
+  workspace.tabs.delete(oldId);
+  workspace.tabs.set(newId, tab);
+  workspace.tabOrder = workspace.tabOrder.map((id) => id === oldId ? newId : id);
+  if (workspace.activeTabId === oldId)
+    workspace.activeTabId = newId;
+}
 var workspace, activeTab;
 var init_workspace2 = __esm(() => {
   init_reactivity();
@@ -194968,6 +194980,14 @@ function requireProjectState() {
 var projectState = null;
 
 // src/store.js
+function initShellRefs() {
+  canvasWrap = document.querySelector("#canvas-wrap");
+  activityBar = document.querySelector("#activity-bar");
+  leftPanel = document.querySelector("#left-panel");
+  rightPanel = document.querySelector("#right-panel");
+  toolbarEl = document.querySelector("#toolbar");
+  statusbarEl = document.querySelector("#statusbar");
+}
 function isNestedSelector(k) {
   return k.startsWith(":") || k.startsWith(".") || k.startsWith("&") || k.startsWith("[");
 }
@@ -195072,15 +195092,9 @@ function updateCanvas(patch) {
     }
   }
 }
-var canvasWrap, activityBar, leftPanel, rightPanel, toolbarEl, statusbarEl, elToPath, canvasPanels, VOID_ELEMENTS, COMMON_SELECTORS, _styleDebounceTimers, _renderers;
+var canvasWrap = null, activityBar = null, leftPanel = null, rightPanel = null, toolbarEl = null, statusbarEl = null, elToPath, canvasPanels, VOID_ELEMENTS, COMMON_SELECTORS, _styleDebounceTimers, _renderers;
 var init_store = __esm(() => {
   init_workspace2();
-  canvasWrap = document.querySelector("#canvas-wrap");
-  activityBar = document.querySelector("#activity-bar");
-  leftPanel = document.querySelector("#left-panel");
-  rightPanel = document.querySelector("#right-panel");
-  toolbarEl = document.querySelector("#toolbar");
-  statusbarEl = document.querySelector("#statusbar");
   elToPath = new WeakMap;
   canvasPanels = [];
   VOID_ELEMENTS = new Set([
@@ -195943,231 +195957,6 @@ var init_lit_html = __esm(() => {
   }
 });
 
-// ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/directive.js
-class Directive {
-  constructor(_partInfo) {}
-  get _$isConnected() {
-    return this._$parent._$isConnected;
-  }
-  _$initialize(part, parent, attributeIndex) {
-    this.__part = part;
-    this._$parent = parent;
-    this.__attributeIndex = attributeIndex;
-  }
-  _$resolve(part, props) {
-    return this.update(part, props);
-  }
-  update(_part, props) {
-    return this.render(...props);
-  }
-}
-var PartType, directive = (c) => (...values) => ({
-  ["_$litDirective$"]: c,
-  values
-});
-var init_directive = __esm(() => {
-  PartType = {
-    ATTRIBUTE: 1,
-    CHILD: 2,
-    PROPERTY: 3,
-    BOOLEAN_ATTRIBUTE: 4,
-    EVENT: 5,
-    ELEMENT: 6
-  };
-});
-
-// ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/directives/style-map.js
-var important = "important", importantFlag, flagTrim, StyleMapDirective, styleMap;
-var init_style_map = __esm(() => {
-  init_lit_html();
-  init_directive();
-  importantFlag = " !" + important;
-  flagTrim = 0 - importantFlag.length;
-  StyleMapDirective = class StyleMapDirective extends Directive {
-    constructor(partInfo) {
-      super(partInfo);
-      if (partInfo.type !== PartType.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
-        throw new Error("The `styleMap` directive must be used in the `style` attribute " + "and must be the only part in the attribute.");
-      }
-    }
-    render(styleInfo) {
-      return Object.keys(styleInfo).reduce((style, prop) => {
-        const value = styleInfo[prop];
-        if (value == null) {
-          return style;
-        }
-        prop = prop.includes("-") ? prop : prop.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase();
-        return style + `${prop}:${value};`;
-      }, "");
-    }
-    update(part, [styleInfo]) {
-      const { style } = part.element;
-      if (this._previousStyleProperties === undefined) {
-        this._previousStyleProperties = new Set(Object.keys(styleInfo));
-        return this.render(styleInfo);
-      }
-      for (const name of this._previousStyleProperties) {
-        if (styleInfo[name] == null) {
-          this._previousStyleProperties.delete(name);
-          if (name.includes("-")) {
-            style.removeProperty(name);
-          } else {
-            style[name] = null;
-          }
-        }
-      }
-      for (const name in styleInfo) {
-        const value = styleInfo[name];
-        if (value != null) {
-          this._previousStyleProperties.add(name);
-          const isImportant = typeof value === "string" && value.endsWith(importantFlag);
-          if (name.includes("-") || isImportant) {
-            style.setProperty(name, isImportant ? value.slice(0, flagTrim) : value, isImportant ? important : "");
-          } else {
-            style[name] = value;
-          }
-        }
-      }
-      return noChange;
-    }
-  };
-  styleMap = directive(StyleMapDirective);
-});
-
-// ../../node_modules/.bun/bind-event-listener@3.0.0/node_modules/bind-event-listener/dist/bind.js
-var require_bind = __commonJS((exports) => {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.bind = undefined;
-  function bind(target, _a3) {
-    var { type, listener, options } = _a3;
-    target.addEventListener(type, listener, options);
-    return function unbind() {
-      target.removeEventListener(type, listener, options);
-    };
-  }
-  exports.bind = bind;
-});
-
-// ../../node_modules/.bun/bind-event-listener@3.0.0/node_modules/bind-event-listener/dist/bind-all.js
-var require_bind_all = __commonJS((exports) => {
-  var __assign = exports && exports.__assign || function() {
-    __assign = Object.assign || function(t) {
-      for (var s, i2 = 1, n2 = arguments.length;i2 < n2; i2++) {
-        s = arguments[i2];
-        for (var p in s)
-          if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-      }
-      return t;
-    };
-    return __assign.apply(this, arguments);
-  };
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.bindAll = undefined;
-  var bind_1 = require_bind();
-  function toOptions(value) {
-    if (typeof value === "undefined") {
-      return;
-    }
-    if (typeof value === "boolean") {
-      return {
-        capture: value
-      };
-    }
-    return value;
-  }
-  function getBinding(original, sharedOptions) {
-    if (sharedOptions == null) {
-      return original;
-    }
-    var binding = __assign(__assign({}, original), { options: __assign(__assign({}, toOptions(sharedOptions)), toOptions(original.options)) });
-    return binding;
-  }
-  function bindAll(target, bindings, sharedOptions) {
-    var unbinds = bindings.map(function(original) {
-      var binding = getBinding(original, sharedOptions);
-      return (0, bind_1.bind)(target, binding);
-    });
-    return function unbindAll() {
-      unbinds.forEach(function(unbind) {
-        return unbind();
-      });
-    };
-  }
-  exports.bindAll = bindAll;
-});
-
-// ../../node_modules/.bun/bind-event-listener@3.0.0/node_modules/bind-event-listener/dist/index.js
-var require_dist = __commonJS((exports) => {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.bindAll = exports.bind = undefined;
-  var bind_1 = require_bind();
-  Object.defineProperty(exports, "bind", { enumerable: true, get: function() {
-    return bind_1.bind;
-  } });
-  var bind_all_1 = require_bind_all();
-  Object.defineProperty(exports, "bindAll", { enumerable: true, get: function() {
-    return bind_all_1.bindAll;
-  } });
-});
-
-// src/platform.js
-function registerPlatform(platform3) {
-  g.__jxPlatform = platform3;
-}
-function getPlatform() {
-  if (!g.__jxPlatform)
-    throw new Error("No platform registered. Call registerPlatform() before starting Studio.");
-  return g.__jxPlatform;
-}
-function hasPlatform() {
-  return g.__jxPlatform != null;
-}
-var g;
-var init_platform3 = __esm(() => {
-  g = globalThis;
-});
-
-// src/files/components.js
-var exports_components = {};
-__export(exports_components, {
-  loadComponentRegistry: () => loadComponentRegistry,
-  computeRelativePath: () => computeRelativePath,
-  componentRegistry: () => componentRegistry,
-  _componentRegistryLoaded: () => _componentRegistryLoaded
-});
-async function loadComponentRegistry() {
-  try {
-    const platform3 = getPlatform();
-    componentRegistry = await platform3.discoverComponents(projectState?.projectRoot || undefined);
-    _componentRegistryLoaded = true;
-  } catch {
-    _componentRegistryLoaded = true;
-  }
-}
-function computeRelativePath(fromDocPath, toCompPath) {
-  if (!fromDocPath)
-    return `./${toCompPath}`;
-  const from = fromDocPath.replaceAll("\\", "/");
-  const to = toCompPath.replaceAll("\\", "/");
-  const fromDir = from.substring(0, from.lastIndexOf("/"));
-  const fromParts = fromDir.split("/").filter(Boolean);
-  const toParts = to.split("/").filter(Boolean);
-  let common = 0;
-  while (common < fromParts.length && common < toParts.length && fromParts[common] === toParts[common]) {
-    common++;
-  }
-  const ups = fromParts.length - common;
-  const remaining = toParts.slice(common);
-  return (ups > 0 ? "../".repeat(ups) : "./") + remaining.join("/");
-}
-var componentRegistry, _componentRegistryLoaded = false;
-var init_components = __esm(() => {
-  init_platform3();
-  init_store();
-  componentRegistry = [];
-});
-
 // ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/directive-helpers.js
 var ChildPart2, ENABLE_SHADYDOM_NOPATCH2 = true, wrap2, isPrimitive2 = (value) => value === null || typeof value != "object" && typeof value != "function", isSingleExpression = (part) => part.strings === undefined, createMarker2 = () => document.createComment(""), insertPart = (containerPart, refPart, part) => {
   const container = wrap2(containerPart._$startNode).parentNode;
@@ -196189,11 +195978,11 @@ var ChildPart2, ENABLE_SHADYDOM_NOPATCH2 = true, wrap2, isPrimitive2 = (value) =
       }
     }
     if (endNode !== refNode || parentChanged) {
-      let start2 = part._$startNode;
-      while (start2 !== endNode) {
-        const n2 = wrap2(start2).nextSibling;
-        wrap2(container).insertBefore(start2, refNode);
-        start2 = n2;
+      let start = part._$startNode;
+      while (start !== endNode) {
+        const n2 = wrap2(start).nextSibling;
+        wrap2(container).insertBefore(start, refNode);
+        start = n2;
       }
     }
   }
@@ -196212,6 +196001,39 @@ var init_directive_helpers = __esm(() => {
   RESET_VALUE = {};
 });
 
+// ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/directive.js
+class Directive {
+  constructor(_partInfo) {}
+  get _$isConnected() {
+    return this._$parent._$isConnected;
+  }
+  _$initialize(part, parent, attributeIndex) {
+    this.__part = part;
+    this._$parent = parent;
+    this.__attributeIndex = attributeIndex;
+  }
+  _$resolve(part, props) {
+    return this.update(part, props);
+  }
+  update(_part, props) {
+    return this.render(...props);
+  }
+}
+var PartType, directive = (c) => (...values) => ({
+  ["_$litDirective$"]: c,
+  values
+});
+var init_directive = __esm(() => {
+  PartType = {
+    ATTRIBUTE: 1,
+    CHILD: 2,
+    PROPERTY: 3,
+    BOOLEAN_ATTRIBUTE: 4,
+    EVENT: 5,
+    ELEMENT: 6
+  };
+});
+
 // ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/async-directive.js
 function reparentDisconnectables(newParent) {
   if (this._$disconnectableChildren !== undefined) {
@@ -196386,6 +196208,198 @@ var init_ref = __esm(() => {
   ref2 = directive(RefDirective);
 });
 
+// ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/directives/style-map.js
+var important = "important", importantFlag, flagTrim, StyleMapDirective, styleMap;
+var init_style_map = __esm(() => {
+  init_lit_html();
+  init_directive();
+  importantFlag = " !" + important;
+  flagTrim = 0 - importantFlag.length;
+  StyleMapDirective = class StyleMapDirective extends Directive {
+    constructor(partInfo) {
+      super(partInfo);
+      if (partInfo.type !== PartType.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
+        throw new Error("The `styleMap` directive must be used in the `style` attribute " + "and must be the only part in the attribute.");
+      }
+    }
+    render(styleInfo) {
+      return Object.keys(styleInfo).reduce((style, prop) => {
+        const value = styleInfo[prop];
+        if (value == null) {
+          return style;
+        }
+        prop = prop.includes("-") ? prop : prop.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase();
+        return style + `${prop}:${value};`;
+      }, "");
+    }
+    update(part, [styleInfo]) {
+      const { style } = part.element;
+      if (this._previousStyleProperties === undefined) {
+        this._previousStyleProperties = new Set(Object.keys(styleInfo));
+        return this.render(styleInfo);
+      }
+      for (const name of this._previousStyleProperties) {
+        if (styleInfo[name] == null) {
+          this._previousStyleProperties.delete(name);
+          if (name.includes("-")) {
+            style.removeProperty(name);
+          } else {
+            style[name] = null;
+          }
+        }
+      }
+      for (const name in styleInfo) {
+        const value = styleInfo[name];
+        if (value != null) {
+          this._previousStyleProperties.add(name);
+          const isImportant = typeof value === "string" && value.endsWith(importantFlag);
+          if (name.includes("-") || isImportant) {
+            style.setProperty(name, isImportant ? value.slice(0, flagTrim) : value, isImportant ? important : "");
+          } else {
+            style[name] = value;
+          }
+        }
+      }
+      return noChange;
+    }
+  };
+  styleMap = directive(StyleMapDirective);
+});
+
+// ../../node_modules/.bun/bind-event-listener@3.0.0/node_modules/bind-event-listener/dist/bind.js
+var require_bind = __commonJS((exports) => {
+  Object.defineProperty(exports, "__esModule", { value: true });
+  exports.bind = undefined;
+  function bind(target, _a3) {
+    var { type, listener, options } = _a3;
+    target.addEventListener(type, listener, options);
+    return function unbind() {
+      target.removeEventListener(type, listener, options);
+    };
+  }
+  exports.bind = bind;
+});
+
+// ../../node_modules/.bun/bind-event-listener@3.0.0/node_modules/bind-event-listener/dist/bind-all.js
+var require_bind_all = __commonJS((exports) => {
+  var __assign = exports && exports.__assign || function() {
+    __assign = Object.assign || function(t) {
+      for (var s, i2 = 1, n2 = arguments.length;i2 < n2; i2++) {
+        s = arguments[i2];
+        for (var p in s)
+          if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign.apply(this, arguments);
+  };
+  Object.defineProperty(exports, "__esModule", { value: true });
+  exports.bindAll = undefined;
+  var bind_1 = require_bind();
+  function toOptions(value) {
+    if (typeof value === "undefined") {
+      return;
+    }
+    if (typeof value === "boolean") {
+      return {
+        capture: value
+      };
+    }
+    return value;
+  }
+  function getBinding(original, sharedOptions) {
+    if (sharedOptions == null) {
+      return original;
+    }
+    var binding = __assign(__assign({}, original), { options: __assign(__assign({}, toOptions(sharedOptions)), toOptions(original.options)) });
+    return binding;
+  }
+  function bindAll(target, bindings, sharedOptions) {
+    var unbinds = bindings.map(function(original) {
+      var binding = getBinding(original, sharedOptions);
+      return (0, bind_1.bind)(target, binding);
+    });
+    return function unbindAll() {
+      unbinds.forEach(function(unbind) {
+        return unbind();
+      });
+    };
+  }
+  exports.bindAll = bindAll;
+});
+
+// ../../node_modules/.bun/bind-event-listener@3.0.0/node_modules/bind-event-listener/dist/index.js
+var require_dist = __commonJS((exports) => {
+  Object.defineProperty(exports, "__esModule", { value: true });
+  exports.bindAll = exports.bind = undefined;
+  var bind_1 = require_bind();
+  Object.defineProperty(exports, "bind", { enumerable: true, get: function() {
+    return bind_1.bind;
+  } });
+  var bind_all_1 = require_bind_all();
+  Object.defineProperty(exports, "bindAll", { enumerable: true, get: function() {
+    return bind_all_1.bindAll;
+  } });
+});
+
+// src/platform.js
+function registerPlatform(platform3) {
+  g.__jxPlatform = platform3;
+}
+function getPlatform() {
+  if (!g.__jxPlatform)
+    throw new Error("No platform registered. Call registerPlatform() before starting Studio.");
+  return g.__jxPlatform;
+}
+function hasPlatform() {
+  return g.__jxPlatform != null;
+}
+var g;
+var init_platform3 = __esm(() => {
+  g = globalThis;
+});
+
+// src/files/components.js
+var exports_components = {};
+__export(exports_components, {
+  loadComponentRegistry: () => loadComponentRegistry,
+  computeRelativePath: () => computeRelativePath,
+  componentRegistry: () => componentRegistry,
+  _componentRegistryLoaded: () => _componentRegistryLoaded
+});
+async function loadComponentRegistry() {
+  try {
+    const platform3 = getPlatform();
+    componentRegistry = await platform3.discoverComponents(projectState?.projectRoot || undefined);
+    _componentRegistryLoaded = true;
+  } catch {
+    _componentRegistryLoaded = true;
+  }
+}
+function computeRelativePath(fromDocPath, toCompPath) {
+  if (!fromDocPath)
+    return `./${toCompPath}`;
+  const from = fromDocPath.replaceAll("\\", "/");
+  const to = toCompPath.replaceAll("\\", "/");
+  const fromDir = from.substring(0, from.lastIndexOf("/"));
+  const fromParts = fromDir.split("/").filter(Boolean);
+  const toParts = to.split("/").filter(Boolean);
+  let common = 0;
+  while (common < fromParts.length && common < toParts.length && fromParts[common] === toParts[common]) {
+    common++;
+  }
+  const ups = fromParts.length - common;
+  const remaining = toParts.slice(common);
+  return (ups > 0 ? "../".repeat(ups) : "./") + remaining.join("/");
+}
+var componentRegistry, _componentRegistryLoaded = false;
+var init_components = __esm(() => {
+  init_platform3();
+  init_store();
+  componentRegistry = [];
+});
+
 // ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/directives/class-map.js
 var ClassMapDirective, classMap;
 var init_class_map = __esm(() => {
@@ -200060,12 +200074,12 @@ function charactersToExpressionCached(subset) {
   return cached;
 }
 function charactersToExpression(subset) {
-  const groups = [];
+  const groups2 = [];
   let index2 = -1;
   while (++index2 < subset.length) {
-    groups.push(subset[index2].replace(regexEscapeRegex, "\\$&"));
+    groups2.push(subset[index2].replace(regexEscapeRegex, "\\$&"));
   }
-  return new RegExp("(?:" + groups.join("|") + ")", "g");
+  return new RegExp("(?:" + groups2.join("|") + ")", "g");
 }
 var defaultSubsetRegex, surrogatePairsRegex, controlCharactersRegex, regexEscapeRegex, subsetToRegexCache;
 var init_core = __esm(() => {
@@ -254973,8 +254987,25 @@ var elements_meta_default = {
   $id: "elements-meta",
   title: "HTML Element Metadata",
   description: "Inline scoping and inline toolbar action metadata for HTML elements.",
+  $convertGroups: {
+    text: ["p", "h1", "h2", "h3", "h4", "h5", "h6", "blockquote"],
+    container: [
+      "div",
+      "section",
+      "article",
+      "aside",
+      "main",
+      "header",
+      "footer",
+      "nav",
+      "search"
+    ],
+    list: ["ul", "ol"]
+  },
   $defs: {
     p: {
+      $convertTo: "text",
+      $convertToWhenEmpty: ["text", "container"],
       $inlineChildren: [
         "em",
         "strong",
@@ -255035,6 +255066,7 @@ var elements_meta_default = {
       ]
     },
     h1: {
+      $convertTo: "text",
       $inlineChildren: ["em", "strong", "code", "a", "span", "br", "b", "i", "u", "sub", "sup"],
       $inlineActions: [
         {
@@ -255056,22 +255088,27 @@ var elements_meta_default = {
       ]
     },
     h2: {
+      $convertTo: "text",
       $inlineChildren: ["em", "strong", "code", "a", "span", "br", "b", "i", "u", "sub", "sup"],
       $inlineActions: "h1"
     },
     h3: {
+      $convertTo: "text",
       $inlineChildren: ["em", "strong", "code", "a", "span", "br", "b", "i", "u", "sub", "sup"],
       $inlineActions: "h1"
     },
     h4: {
+      $convertTo: "text",
       $inlineChildren: ["em", "strong", "code", "a", "span", "br", "b", "i", "u", "sub", "sup"],
       $inlineActions: "h1"
     },
     h5: {
+      $convertTo: "text",
       $inlineChildren: ["em", "strong", "code", "a", "span", "br", "b", "i", "u", "sub", "sup"],
       $inlineActions: "h1"
     },
     h6: {
+      $convertTo: "text",
       $inlineChildren: ["em", "strong", "code", "a", "span", "br", "b", "i", "u", "sub", "sup"],
       $inlineActions: "h1"
     },
@@ -255131,6 +255168,7 @@ var elements_meta_default = {
       $inlineActions: "p"
     },
     blockquote: {
+      $convertTo: "text",
       $inlineChildren: []
     },
     a: {
@@ -255170,16 +255208,20 @@ var elements_meta_default = {
       ],
       $inlineActions: "p"
     },
-    div: { $inlineChildren: [] },
-    section: { $inlineChildren: [] },
-    article: { $inlineChildren: [] },
-    nav: { $inlineChildren: [] },
-    main: { $inlineChildren: [] },
-    header: { $inlineChildren: [] },
-    footer: { $inlineChildren: [] },
-    aside: { $inlineChildren: [] },
-    ul: { $inlineChildren: [] },
-    ol: { $inlineChildren: [] },
+    div: {
+      $convertTo: "container",
+      $convertToWhenEmpty: ["container", "text"],
+      $inlineChildren: []
+    },
+    section: { $convertTo: "container", $inlineChildren: [] },
+    article: { $convertTo: "container", $inlineChildren: [] },
+    nav: { $convertTo: "container", $inlineChildren: [] },
+    main: { $convertTo: "container", $inlineChildren: [] },
+    header: { $convertTo: "container", $inlineChildren: [] },
+    footer: { $convertTo: "container", $inlineChildren: [] },
+    aside: { $convertTo: "container", $inlineChildren: [] },
+    ul: { $convertTo: "list", $inlineChildren: [] },
+    ol: { $convertTo: "list", $inlineChildren: [] },
     pre: { $inlineChildren: ["code"] },
     table: { $inlineChildren: [] },
     thead: { $inlineChildren: [] },
@@ -255543,6 +255585,7 @@ function findTemplateExpressions(text2) {
 
 // src/editor/slash-menu.js
 init_lit_html();
+init_ref();
 
 // src/ui/layers.js
 init_lit_html();
@@ -255571,6 +255614,25 @@ function showDialog(templateFn) {
     render2(templateFn(done), slot);
   });
 }
+function showConfirmDialog(headline, message, opts = {}) {
+  const { confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false } = opts;
+  return showDialog((done) => html3`
+      <sp-dialog-wrapper
+        open
+        underlay
+        headline=${headline}
+        confirm-label=${confirmLabel}
+        cancel-label=${cancelLabel}
+        size="s"
+        @confirm=${() => done(true)}
+        @cancel=${() => done(false)}
+        @close=${() => done(false)}
+        class=${destructive ? "dialog-destructive" : ""}
+      >
+        <p>${message}</p>
+      </sp-dialog-wrapper>
+    `);
+}
 function openModal(template) {
   const slot = document.createElement("div");
   slot.style.pointerEvents = "auto";
@@ -255659,6 +255721,8 @@ var filteredItems = [];
 var open = false;
 var _anchorEl = null;
 var _anchorRect = null;
+var _filterEl = null;
+var _popoverEl = null;
 function getHost() {
   return getLayerSlot("popover", "slash-menu");
 }
@@ -255669,7 +255733,8 @@ function showSlashMenu(anchorEl, filter, cbs) {
   callbacks = cbs;
   _anchorEl = anchorEl;
   _anchorRect = anchorEl.getBoundingClientRect();
-  filteredItems = filter ? SLASH_COMMANDS.filter((c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter)) : SLASH_COMMANDS;
+  const source = cbs.commands || SLASH_COMMANDS;
+  filteredItems = filter ? source.filter((c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter)) : source;
   if (!filteredItems.length && !cbs.showFilter) {
     dismissSlashMenu();
     return;
@@ -255685,9 +255750,8 @@ function showSlashMenu(anchorEl, filter, cbs) {
   }
   if (cbs.showFilter) {
     requestAnimationFrame(() => {
-      const input = getHost().querySelector(".slash-filter");
-      if (input)
-        input.focus();
+      if (_filterEl)
+        _filterEl.focus();
     });
   }
 }
@@ -255698,6 +255762,8 @@ function dismissSlashMenu() {
   callbacks = null;
   _anchorEl = null;
   _anchorRect = null;
+  _filterEl = null;
+  _popoverEl = null;
   filteredItems = [];
   document.removeEventListener("keydown", onKeydown, true);
   document.removeEventListener("mousedown", onOutsideClick, true);
@@ -255708,6 +255774,9 @@ function render3(anchorEl, showFilter) {
   render2(html3`
       <sp-popover
         open
+        ${ref2((el) => {
+    _popoverEl = el || null;
+  })}
         style="position:fixed;left:${rect.left}px;top:${rect.bottom + 4}px;z-index:9999;max-height:320px;overflow-y:auto"
       >
         ${showFilter ? html3`<input
@@ -255716,6 +255785,9 @@ function render3(anchorEl, showFilter) {
               placeholder="Filter…"
               autocomplete="off"
               style="display:block;width:100%;box-sizing:border-box;padding:6px 10px;border:none;border-bottom:1px solid var(--border, #444);outline:none;font-size:13px;background:transparent;color:inherit"
+              ${ref2((el) => {
+    _filterEl = el || null;
+  })}
               @input=${onFilterInput}
             />` : nothing}
         <sp-menu style="min-width:220px">
@@ -255737,9 +255809,7 @@ function render3(anchorEl, showFilter) {
     `, getHost());
 }
 function onOutsideClick(e) {
-  const host = getHost();
-  const popover = host.querySelector("sp-popover");
-  if (popover && !popover.contains(e.target)) {
+  if (_popoverEl && !_popoverEl.contains(e.target)) {
     dismissSlashMenu();
   }
 }
@@ -255751,15 +255821,15 @@ function select(cmd) {
 function onFilterInput(e) {
   const input = e.target;
   const filter = input.value.toLowerCase();
-  filteredItems = filter ? SLASH_COMMANDS.filter((c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter)) : SLASH_COMMANDS;
+  const source = callbacks?.commands || SLASH_COMMANDS;
+  filteredItems = filter ? source.filter((c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter)) : source;
   activeIdx = 0;
   if (_anchorEl)
     render3(_anchorEl, true);
   requestAnimationFrame(() => {
-    const el = getHost().querySelector(".slash-filter");
-    if (el && el !== document.activeElement) {
-      el.focus();
-      el.selectionStart = el.selectionEnd = el.value.length;
+    if (_filterEl && _filterEl !== document.activeElement) {
+      _filterEl.focus();
+      _filterEl.selectionStart = _filterEl.selectionEnd = _filterEl.value.length;
     }
   });
 }
@@ -255826,7 +255896,10 @@ var EDITABLE_BLOCKS = new Set([
   "li",
   "td",
   "th",
-  "blockquote"
+  "blockquote",
+  "span",
+  "a",
+  "label"
 ]);
 function isInlineInContext(childTag, parentTag) {
   if (!parentTag)
@@ -256216,6 +256289,7 @@ init_workspace2();
 // src/panels/block-action-bar.js
 init_lit_html();
 init_style_map();
+init_ref();
 
 // ../../node_modules/.bun/@babel+runtime@7.29.7/node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
 function _arrayWithHoles(r) {
@@ -257783,6 +257857,7 @@ init_components();
 
 // src/editor/convert-to-component.js
 init_lit_html();
+init_ref();
 init_store();
 init_workspace2();
 init_components();
@@ -257813,6 +257888,7 @@ function mountStatusbar() {
       renderStatusbar();
     });
   });
+  statusbarEl?.addEventListener("click", _onStatusbarClick);
 }
 function esc(text2) {
   return String(text2).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -257843,7 +257919,7 @@ function renderStatusbar() {
     parts.push(esc(statusMsg));
   statusbarEl.innerHTML = parts.join("  |  ") || "Jx Studio";
 }
-statusbarEl?.addEventListener("click", (e) => {
+function _onStatusbarClick(e) {
   const target = e.target;
   if (!target.classList.contains("sb-path-seg"))
     return;
@@ -257855,7 +257931,7 @@ statusbarEl?.addEventListener("click", (e) => {
     updateSession({ selection: path });
     renderOnly("leftPanel", "rightPanel", "canvas");
   } catch {}
-});
+}
 function statusMessage(msg, duration = 3000) {
   statusMsg = msg;
   _rerender?.();
@@ -257940,7 +258016,7 @@ function promptComponentName(defaultName) {
   let value = defaultName;
   let error = "";
   return showDialog((done) => {
-    function confirm2() {
+    function confirm() {
       const result = validateName(value);
       if (!result.valid) {
         error = result.error;
@@ -257957,7 +258033,7 @@ function promptComponentName(defaultName) {
     }
     function onKeydown2(e) {
       if (e.key === "Enter")
-        confirm2();
+        confirm();
     }
     function rerender() {
       const layer = document.getElementById("layer-dialog");
@@ -257974,7 +258050,7 @@ function promptComponentName(defaultName) {
           confirm-label="Convert"
           cancel-label="Cancel"
           size="s"
-          @confirm=${confirm2}
+          @confirm=${confirm}
           @cancel=${() => done(null)}
           @close=${() => done(null)}
         >
@@ -257985,22 +258061,21 @@ function promptComponentName(defaultName) {
             ?negative=${!!error}
             @input=${onInput}
             @keydown=${onKeydown2}
+            ${ref2((el) => {
+        if (el)
+          requestAnimationFrame(() => {
+            el.focus();
+            const input = el.shadowRoot?.querySelector("input");
+            if (input)
+              input.select();
+          });
+      })}
           >
             <sp-help-text slot="negative-help-text">${error}</sp-help-text>
           </sp-textfield>
         </sp-dialog-wrapper>
       `;
     }
-    requestAnimationFrame(() => {
-      const layer = document.getElementById("layer-dialog");
-      const tf = layer?.querySelector("sp-textfield");
-      if (tf) {
-        tf.focus();
-        const input = tf.shadowRoot?.querySelector("input");
-        if (input)
-          input.select();
-      }
-    });
     return buildTpl();
   });
 }
@@ -258094,6 +258169,48 @@ function overlayBoxDescriptor(el, type, panel) {
   };
 }
 
+// src/editor/convert-targets.js
+var TAG_LABELS = {
+  p: "Paragraph",
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  h5: "Heading 5",
+  h6: "Heading 6",
+  blockquote: "Blockquote",
+  div: "Div",
+  section: "Section",
+  article: "Article",
+  aside: "Aside",
+  main: "Main",
+  header: "Header",
+  footer: "Footer",
+  nav: "Nav",
+  search: "Search",
+  ul: "Bulleted List",
+  ol: "Numbered List"
+};
+var groups = elements_meta_default.$convertGroups || {};
+function getConvertTargets(currentTag, isEmpty) {
+  const def3 = elements_meta_default.$defs?.[currentTag];
+  if (!def3?.$convertTo)
+    return [];
+  const groupNames = isEmpty && def3.$convertToWhenEmpty ? def3.$convertToWhenEmpty : [def3.$convertTo];
+  const tags = new Set;
+  for (const name of groupNames) {
+    for (const tag3 of groups[name] || []) {
+      if (tag3 !== currentTag)
+        tags.add(tag3);
+    }
+  }
+  return [...tags].map((tag3) => ({
+    label: TAG_LABELS[tag3] || tag3.charAt(0).toUpperCase() + tag3.slice(1),
+    tag: tag3,
+    description: ""
+  }));
+}
+
 // src/panels/block-action-bar.js
 var _ctx2 = null;
 function initBlockActionBar(ctx) {
@@ -258118,8 +258235,23 @@ function onBarMousedown(e) {
     return;
   if (e.target.closest(".bar-drag-handle"))
     return;
+  if (e.target.closest(".bar-tag--interactive"))
+    return;
   e.preventDefault();
 }
+function onTagBadgeClick(e, targets, selection) {
+  e.stopPropagation();
+  const anchorEl = e.currentTarget;
+  showSlashMenu(anchorEl, "", {
+    showFilter: targets.length > 6,
+    commands: targets,
+    onSelect: (cmd) => {
+      transactDoc(activeTab.value, (t) => {
+        mutateUpdateProperty(t, selection, "tagName", cmd.tag);
+      });
+    }
+  });
+}
 function captureSelectionRange() {
   const sel = window.getSelection();
   if (sel && sel.rangeCount)
@@ -258240,9 +258372,9 @@ function showLinkPopover(anchorBtn) {
     }
   }
   const rect = anchorBtn.getBoundingClientRect();
+  let _linkField = null;
   const onApply = () => {
-    const field = host.querySelector("sp-textfield");
-    const url = field?.value || "";
+    const url = _linkField?.value || "";
     if (existingLink) {
       existingLink.setAttribute("href", url);
     } else if (url) {
@@ -258285,6 +258417,11 @@ function showLinkPopover(anchorBtn) {
           style="width:200px"
           value=${existingLink?.getAttribute("href") || ""}
           @keydown=${onKeydown2}
+          ${ref2((el) => {
+    _linkField = el || null;
+    if (el)
+      requestAnimationFrame(() => el.focus());
+  })}
         ></sp-textfield>
         <sp-action-button size="xs" @click=${onApply}>
           ${existingLink ? "Update" : "Apply"}
@@ -258292,7 +258429,6 @@ function showLinkPopover(anchorBtn) {
         ${existingLink ? html3` <sp-action-button size="xs" @click=${onRemove}>Remove</sp-action-button> ` : nothing}
       </sp-popover>
     `, host);
-  requestAnimationFrame(() => host.querySelector("sp-textfield")?.focus());
 }
 function moveSelectionUp() {
   const tab = activeTab.value;
@@ -258355,6 +258491,10 @@ function renderBlockActionBar() {
   const actions = getInlineActions(tag3) || [];
   const showFormat = inlineEditing && actions.length > 0;
   const activeValues = showFormat ? actions.filter((a) => isTagActiveInSelection(a.tag, el)).map((a) => a.tag) : [];
+  const isComponent = node.tagName?.includes("-") && componentRegistry.some((c) => c.tagName === node.tagName);
+  const isEmpty = !node.textContent && (!node.children || node.children.length === 0 || Array.isArray(node.children) && node.children.length === 1 && typeof node.children[0] === "object" && node.children[0]?.tagName === "br");
+  const convertTargets = !isComponent ? getConvertTargets(tag3, isEmpty) : [];
+  const badgeInteractive = convertTargets.length > 0;
   render2(html3`
       <div
         class="block-action-bar"
@@ -258363,9 +258503,32 @@ function renderBlockActionBar() {
       >
         ${selection.length >= 2 ? renderParentSelector() : nothing}
 
-        <span class="bar-tag">${node.$id || (node.tagName ?? "div")}</span>
+        <span
+          class="bar-tag${badgeInteractive ? " bar-tag--interactive" : ""}"
+          @click=${badgeInteractive ? (e) => onTagBadgeClick(e, convertTargets, selection) : nothing}
+          >${node.$id || (node.tagName ?? "div")}</span
+        >
 
-        ${selection.length >= 2 ? html3`<span class="bar-drag-handle" title="Drag to reorder">⠿</span>` : nothing}
+        ${selection.length >= 2 ? html3`<span
+              class="bar-drag-handle"
+              title="Drag to reorder"
+              ${ref2((el2) => {
+    if (!el2)
+      return;
+    if (view.selDragCleanup) {
+      view.selDragCleanup();
+      view.selDragCleanup = null;
+    }
+    view.selDragCleanup = draggable({
+      element: el2,
+      getInitialData: () => ({
+        type: "tree-node",
+        path: activeTab.value?.session.selection
+      })
+    });
+  })}
+              >⠿</span
+            >` : nothing}
         ${selection.length >= 2 ? renderMoveArrows() : nothing}
         ${selection.length >= 2 && node.tagName ? (() => {
     const isComp = node.tagName.includes("-") && componentRegistry.some((c) => c.tagName === node.tagName);
@@ -258419,20 +258582,6 @@ function renderBlockActionBar() {
     if (barRect.right > window.innerWidth) {
       bar.style.left = `${Math.max(0, window.innerWidth - barRect.width)}px`;
     }
-    const currentTab = activeTab.value;
-    if (currentTab?.session.selection && currentTab.session.selection.length >= 2) {
-      const handle = bar.querySelector(".bar-drag-handle");
-      if (handle) {
-        if (view.selDragCleanup) {
-          view.selDragCleanup();
-          view.selDragCleanup = null;
-        }
-        view.selDragCleanup = draggable({
-          element: handle,
-          getInitialData: () => ({ type: "tree-node", path: activeTab.value?.session.selection })
-        });
-      }
-    }
   });
 }
 
@@ -258781,11 +258930,6 @@ function prepareForEditMode(node) {
             {
               tagName: "div",
               className: "repeater-perimeter",
-              state: {
-                $map: { item: {}, index: 0 },
-                "$map/item": {},
-                "$map/index": 0
-              },
               children: [prepareForEditMode(template)]
             }
           ];
@@ -258833,8 +258977,8 @@ function prepareForEditMode(node) {
     } else if (typeof v === "string" && v.includes("${")) {
       out[k] = templateToEditDisplay(v);
     } else if (v && typeof v === "object" && v.$ref) {
-      const ref2 = v.$ref;
-      const label = ref2.startsWith("#/state/") ? ref2.slice(8) : ref2;
+      const ref3 = v.$ref;
+      const label = ref3.startsWith("#/state/") ? ref3.slice(8) : ref3;
       out[k] = `{${label}}`;
     } else {
       out[k] = prepareForEditMode(v);
@@ -259059,6 +259203,7 @@ init_if_defined();
 init_store();
 init_workspace2();
 var _ctx4;
+var _zoomIndicatorEl = null;
 function initCanvasUtils(ctx) {
   _ctx4 = ctx;
 }
@@ -259258,7 +259403,12 @@ function renderZoomIndicator() {
   const zoom = _ctx4.getZoom();
   const host = getLayerSlot("popover", "zoom-indicator");
   render2(html3`
-      <div class="zoom-indicator">
+      <div
+        class="zoom-indicator"
+        ${ref2((el) => {
+    _zoomIndicatorEl = el || null;
+  })}
+      >
         <span class="zoom-indicator-action" title="Reset to 100%" @click=${resetZoom}>
           <svg
             width="14"
@@ -259291,13 +259441,12 @@ function renderZoomIndicator() {
   positionZoomIndicator();
 }
 function positionZoomIndicator() {
-  const indicator = document.querySelector(".zoom-indicator");
-  if (!indicator)
+  if (!_zoomIndicatorEl)
     return;
   const rect = canvasWrap.getBoundingClientRect();
-  indicator.style.left = `${rect.left + rect.width / 2}px`;
-  indicator.style.top = `${rect.bottom - 32}px`;
-  indicator.style.transform = "translateX(-50%)";
+  _zoomIndicatorEl.style.left = `${rect.left + rect.width / 2}px`;
+  _zoomIndicatorEl.style.top = `${rect.bottom - 32}px`;
+  _zoomIndicatorEl.style.transform = "translateX(-50%)";
 }
 function updateActivePanelHeaders() {
   const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;
@@ -263126,6 +263275,7 @@ init_workspace2();
 
 // src/github/github-publish.js
 init_lit_html();
+init_ref();
 
 // src/github/github-auth.js
 init_lit_html();
@@ -263229,21 +263379,20 @@ async function publishToGithub({ projectName }) {
   if (!token)
     return false;
   const repoOpts = await showDialog((done) => {
+    let _nameInput = null;
+    let _descInput = null;
+    let _privateToggle = null;
     return html3`
       <sp-dialog-wrapper
         open
         headline="Publish to GitHub"
         confirm-label="Create Repository"
         cancel-label="Cancel"
-        @confirm=${(e) => {
-      const dialog = e.target;
-      const nameInput = dialog.querySelector('[name="repo-name"]');
-      const descInput = dialog.querySelector('[name="repo-desc"]');
-      const privateToggle = dialog.querySelector('[name="repo-private"]');
+        @confirm=${() => {
       done({
-        name: nameInput?.value || projectName,
-        description: descInput?.value || "",
-        isPrivate: privateToggle?.checked ?? true
+        name: _nameInput?.value || projectName,
+        description: _descInput?.value || "",
+        isPrivate: _privateToggle?.checked ?? true
       });
     }}
         @cancel=${() => done(null)}
@@ -263256,6 +263405,9 @@ async function publishToGithub({ projectName }) {
             name="repo-name"
             value="${projectName}"
             placeholder="my-project"
+            ${ref2((el) => {
+      _nameInput = el || null;
+    })}
           ></sp-textfield>
 
           <sp-field-label for="repo-desc">Description (optional)</sp-field-label>
@@ -263263,10 +263415,20 @@ async function publishToGithub({ projectName }) {
             id="repo-desc"
             name="repo-desc"
             placeholder="A brief description"
+            ${ref2((el) => {
+      _descInput = el || null;
+    })}
           ></sp-textfield>
 
           <sp-field-label>Visibility</sp-field-label>
-          <sp-switch name="repo-private" checked>Private repository</sp-switch>
+          <sp-switch
+            name="repo-private"
+            checked
+            ${ref2((el) => {
+      _privateToggle = el || null;
+    })}
+            >Private repository</sp-switch
+          >
         </div>
       </sp-dialog-wrapper>
     `;
@@ -263739,7 +263901,8 @@ function renderGitPanel(S, ctx) {
                   @click=${async () => {
       if (file.status === "U")
         return;
-      if (!confirm(`Discard changes to ${file.path}?`))
+      const confirmed = await showConfirmDialog("Discard Changes", `Discard changes to ${file.path}?`, { confirmLabel: "Discard", destructive: true });
+      if (!confirmed)
         return;
       await gitAction("gitDiscard", [file.path]);
     }}
@@ -263762,7 +263925,7 @@ function renderGitPanel(S, ctx) {
     `;
   };
   const groupFilesByComponent = (files) => {
-    const groups = new Map;
+    const groups2 = new Map;
     for (const f of files) {
       const parts = f.path.split("/");
       let component;
@@ -263771,11 +263934,11 @@ function renderGitPanel(S, ctx) {
       } else {
         component = "Other";
       }
-      if (!groups.has(component))
-        groups.set(component, []);
-      groups.get(component).push(f);
+      if (!groups2.has(component))
+        groups2.set(component, []);
+      groups2.get(component).push(f);
     }
-    return groups;
+    return groups2;
   };
   const allFiles = [...stagedFiles, ...unstagedFiles];
   const componentGroups = groupFilesByComponent(allFiles);
@@ -264264,6 +264427,10 @@ var _serverFnConfig = { skip: false };
 function setSkipServerFunctions(v) {
   _serverFnConfig.skip = v;
 }
+var _contentConfig = { skip: false };
+function setSkipContentResolution(v) {
+  _contentConfig.skip = v;
+}
 async function buildScope(doc, parentScope = {}, base2 = location.href) {
   const raw = {};
   for (const [key, val] of Object.entries(parentScope)) {
@@ -264347,8 +264514,9 @@ function hasSchemaKeywords(obj) {
   return false;
 }
 function evaluateTemplate(str, state) {
-  const fn = new Function("state", "$map", `return \`${str}\``);
-  return fn(state, state?.$map);
+  const $map = state?.$map;
+  const fn = new Function("state", "$map", "item", "index", `return \`${str}\``);
+  return fn(state, $map, $map?.item, $map?.index);
 }
 var _moduleCache = new Map;
 async function resolveFunction(def3, state, key, base2) {
@@ -264865,6 +265033,39 @@ async function resolvePrototype(def3, state, key, base2) {
       return new Blob(def3.parts ?? [], { type: def3.type ?? "text/plain" });
     case "ReadableStream":
       return null;
+    case "ContentCollection":
+    case "ContentEntry": {
+      if (_contentConfig.skip) {
+        return ref(def3.$prototype === "ContentCollection" ? [{ id: "", data: {} }] : null);
+      }
+      const s2 = ref(def3.$prototype === "ContentCollection" ? [] : null);
+      effect(() => {
+        let id = def3.id;
+        if (id && typeof id === "object" && id.$ref?.startsWith("#/$params/")) {
+          const paramName = id.$ref.replace("#/$params/", "");
+          id = state?.$params?.[paramName];
+        } else if (typeof id === "string" && id.includes("${")) {
+          id = evaluateTemplate(id, state);
+        }
+        if (def3.$prototype === "ContentEntry" && !id)
+          return;
+        fetch("/__studio/content", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            $prototype: def3.$prototype,
+            contentType: def3.contentType,
+            id,
+            filter: def3.filter,
+            sort: def3.sort,
+            limit: def3.limit
+          })
+        }).then((r) => r.ok ? r.json() : null).then((d2) => {
+          s2.value = d2;
+        }).catch(() => {});
+      });
+      return s2;
+    }
     default:
       console.warn(`Jx: unknown $prototype "${def3.$prototype}" for "${key}". Did you mean to add '$src'?`);
       return ref(null);
@@ -265427,6 +265628,12 @@ function camelToKebab2(s2) {
 }
 
 // src/canvas/canvas-live-render.js
+function _preventNav(e) {
+  if (e.target.closest("a[href]")) {
+    e.preventDefault();
+  }
+}
+var _navGuarded = new WeakSet;
 var _ctx6 = null;
 var layoutElements = new WeakSet;
 var _failedElements = new Set;
@@ -265483,6 +265690,7 @@ async function renderCanvasLive(gen, doc, canvasEl) {
     _failedElementsDocPath = S.documentPath ?? null;
   }
   setSkipServerFunctions(canvasMode !== "preview");
+  setSkipContentResolution(canvasMode !== "preview");
   let renderDoc = canvasMode === "preview" ? structuredClone(toRaw(doc)) : prepareForEditMode(stripEventHandlers(doc));
   let layoutWrapped = false;
   activeLayoutPath = null;
@@ -265729,6 +265937,10 @@ async function renderCanvasLive(gen, doc, canvasEl) {
       canvasEl.removeAttribute("data-content-mode");
     }
     canvasEl.appendChild(el);
+    if (!_navGuarded.has(canvasEl)) {
+      canvasEl.addEventListener("click", _preventNav);
+      _navGuarded.add(canvasEl);
+    }
     if (canvasMode === "design" || canvasMode === "edit") {
       requestAnimationFrame(() => {
         const editingEl = getActiveElement2();
@@ -266055,20 +266267,20 @@ function normParam(p) {
 function renderSignalsTemplate(S, ctx) {
   const defs = S.document.state || {};
   const entries2 = Object.entries(defs);
-  const groups = {
+  const groups2 = {
     state: [],
     computed: [],
     data: [],
     function: []
   };
   for (const [name, def3] of entries2) {
-    groups[defCategory(def3)].push([name, def3]);
+    groups2[defCategory(def3)].push([name, def3]);
   }
   const categories = [
-    { key: "state", label: "State", items: groups.state },
-    { key: "computed", label: "Computed", items: groups.computed },
-    { key: "data", label: "Data", items: groups.data },
-    { key: "function", label: "Functions", items: groups.function }
+    { key: "state", label: "State", items: groups2.state },
+    { key: "computed", label: "Computed", items: groups2.computed },
+    { key: "data", label: "Data", items: groups2.data },
+    { key: "function", label: "Functions", items: groups2.function }
   ];
   const collapsedCats = S._collapsedSignalCats || (S._collapsedSignalCats = new Set);
   const catTemplates = categories.filter((c) => c.items.length > 0).map(({ key, label: label4, items }) => html3`
@@ -266342,6 +266554,9 @@ function renderDataSourceFields(S, name, def3, textareaRow, pickerRow, ctx) {
       ${signalFieldRow("Default", String(def3.default || ""), (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { default: v })))}
     `;
   }
+  if (proto2 === "ContentEntry" || proto2 === "ContentCollection") {
+    return renderContentPrototypeFields(name, def3, proto2);
+  }
   if (proto2 === "Set" || proto2 === "Map" || proto2 === "FormData") {
     const fieldName = proto2 === "FormData" ? "fields" : "default";
     const fieldLabel = proto2 === "FormData" ? "Fields" : "Default";
@@ -266354,6 +266569,85 @@ function renderDataSourceFields(S, name, def3, textareaRow, pickerRow, ctx) {
   }
   return renderExternalPrototypeEditorTemplate(S, name, def3, ctx);
 }
+function renderContentPrototypeFields(name, def3, proto2) {
+  const contentTypes = projectState?.projectConfig?.contentTypes;
+  const typeNames = contentTypes ? Object.keys(contentTypes) : [];
+  const currentType = def3.contentType || "";
+  const schema4 = currentType && contentTypes?.[currentType]?.schema || undefined;
+  const contentTypeField = typeNames.length ? html3`
+        <div class="signal-field-row">
+          <label class="signal-field-label">Content Type</label>
+          <sp-picker
+            size="s"
+            value=${currentType}
+            style="width:100%"
+            @change=${(e) => {
+    const v = e.target.value;
+    transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { contentType: v }));
+  }}
+          >
+            ${typeNames.map((t) => html3`<sp-menu-item value=${t}>${t}</sp-menu-item>`)}
+          </sp-picker>
+        </div>
+      ` : signalFieldRow("Content Type", currentType, (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { contentType: v })));
+  let entryFields = nothing;
+  if (proto2 === "ContentEntry") {
+    const idVal = def3.id;
+    const idStr = idVal && typeof idVal === "object" && idVal.$ref ? idVal.$ref : typeof idVal === "string" ? idVal : "";
+    entryFields = signalFieldRow("ID", idStr, (v) => {
+      const val = v.startsWith("#/") ? { $ref: v } : v;
+      transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { id: val }));
+    });
+  } else {
+    const filterStr = def3.filter ? JSON.stringify(def3.filter) : "";
+    const sortStr = def3.sort ? `${def3.sort.field || ""} ${def3.sort.order || ""}`.trim() : "";
+    const limitStr = def3.limit != null ? String(def3.limit) : "";
+    entryFields = html3`
+      ${signalFieldRow("Filter", filterStr, (v) => {
+      try {
+        const parsed = v ? JSON.parse(v) : undefined;
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { filter: parsed }));
+      } catch {}
+    })}
+      ${signalFieldRow("Sort", sortStr, (v) => {
+      if (!v) {
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { sort: undefined }));
+        return;
+      }
+      const [field, order2] = v.split(" ");
+      transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { sort: { field, order: order2 || "asc" } }));
+    })}
+      ${signalFieldRow("Limit", limitStr, (v) => {
+      const num = v ? parseInt(v, 10) : undefined;
+      transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { limit: num }));
+    })}
+    `;
+  }
+  let schemaFields = nothing;
+  if (schema4?.properties) {
+    const fields = Object.entries(schema4.properties);
+    const required = new Set(schema4.required || []);
+    schemaFields = html3`
+      <div style="margin-top:8px;padding:6px 0;border-top:1px solid var(--border-dim)">
+        <div style="font-size:11px;color:var(--fg-dim);margin-bottom:4px;font-weight:500">
+          Fields (${currentType})
+        </div>
+        ${fields.map(([field, fieldDef]) => html3`
+            <div style="font-size:11px;padding:2px 0;display:flex;gap:4px;align-items:center">
+              <code style="color:var(--fg-default)">${field}</code>
+              <span style="color:var(--fg-dim)">${fieldDef.type || ""}</span>
+              ${required.has(field) ? html3`<span style="color:var(--color-accent,#f36f32);font-size:9px">req</span>` : nothing}
+            </div>
+          `)}
+      </div>
+    `;
+  }
+  return html3`
+    ${contentTypeField}
+    ${signalFieldRow("Prototype", proto2, (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $prototype: v })))}
+    ${entryFields} ${schemaFields}
+  `;
+}
 function renderFunctionFields(S, name, def3, textareaRow, ctx) {
   const descriptionField = signalFieldRow("Description", def3.description || "", (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { description: v || undefined })));
   const bodyField = def3.$src ? html3`
@@ -268221,8 +268515,203 @@ init_workspace2();
 
 // src/editor/context-menu.js
 init_lit_html();
+init_ref();
 init_store();
 init_workspace2();
+
+// src/editor/convert-to-repeater.js
+init_lit_html();
+init_ref();
+init_store();
+init_workspace2();
+async function convertToRepeater() {
+  const tab = activeTab.value;
+  if (!tab?.session.selection || tab.session.selection.length < 2)
+    return;
+  const path2 = tab.session.selection;
+  const node2 = getNodeAtPath(tab.doc.document, path2);
+  if (!node2)
+    return;
+  const defs = tab.doc.document.state || {};
+  const config = await promptRepeaterConfig(defs);
+  if (!config)
+    return;
+  transactDoc(tab, (t) => {
+    const doc = t.doc.document;
+    if (config.newDef) {
+      if (!doc.state)
+        doc.state = {};
+      doc.state[config.newDef.name] = { type: "array", default: [] };
+    }
+    const pp = parentElementPath(path2);
+    if (!pp)
+      return;
+    const idx = childIndex(path2);
+    const parent = getNodeAtPath(doc, pp);
+    if (!parent?.children)
+      return;
+    const element3 = parent.children[idx];
+    const repeater = {
+      $prototype: "Array",
+      items: config.items,
+      map: element3
+    };
+    if (config.filter)
+      repeater.filter = config.filter;
+    if (config.sort)
+      repeater.sort = config.sort;
+    parent.children[idx] = {
+      tagName: "div",
+      children: repeater
+    };
+  });
+}
+function promptRepeaterConfig(defs) {
+  const arrayDefs = Object.entries(defs).filter(([, d2]) => d2?.type === "array" || Array.isArray(d2?.default) || d2?.$prototype === "Array");
+  const fnDefs = Object.entries(defs).filter(([, d2]) => defCategory(d2) === "function");
+  let source = arrayDefs.length > 0 ? arrayDefs[0][0] : "__new__";
+  let newDefName = "";
+  let filterDef = "";
+  let sortDef = "";
+  let error = "";
+  return showDialog((done) => {
+    function confirm() {
+      if (source === "__new__") {
+        const name = newDefName.trim();
+        if (!name) {
+          error = "Enter a name for the new state definition.";
+          rerender();
+          return;
+        }
+        if (defs[name]) {
+          error = `"${name}" already exists.`;
+          rerender();
+          return;
+        }
+        if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name)) {
+          error = "Invalid identifier name.";
+          rerender();
+          return;
+        }
+        done({
+          items: { $ref: `#/$defs/${name}` },
+          filter: filterDef ? { $ref: `#/$defs/${filterDef}` } : undefined,
+          sort: sortDef ? { $ref: `#/$defs/${sortDef}` } : undefined,
+          newDef: { name }
+        });
+      } else {
+        done({
+          items: { $ref: `#/$defs/${source}` },
+          filter: filterDef ? { $ref: `#/$defs/${filterDef}` } : undefined,
+          sort: sortDef ? { $ref: `#/$defs/${sortDef}` } : undefined
+        });
+      }
+    }
+    function rerender() {
+      const layer = document.getElementById("layer-dialog");
+      const slot = layer?.lastElementChild;
+      if (slot)
+        render2(buildTpl(), slot);
+    }
+    function buildTpl() {
+      return html3`
+        <sp-dialog-wrapper
+          open
+          underlay
+          headline="Repeat..."
+          confirm-label="Create Repeater"
+          cancel-label="Cancel"
+          size="s"
+          @confirm=${confirm}
+          @cancel=${() => done(null)}
+          @close=${() => done(null)}
+        >
+          <div style="display:flex;flex-direction:column;gap:12px">
+            <label>
+              <sp-field-label size="s">Items source</sp-field-label>
+              <sp-picker
+                label="Items source"
+                size="s"
+                .value=${source}
+                @change=${(e) => {
+        source = e.target.value;
+        error = "";
+        rerender();
+      }}
+              >
+                ${arrayDefs.map(([name]) => html3`<sp-menu-item value=${name}>${name}</sp-menu-item>`)}
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item value="__new__">Create new...</sp-menu-item>
+              </sp-picker>
+            </label>
+
+            ${source === "__new__" ? html3`
+                  <label>
+                    <sp-field-label size="s">New definition name</sp-field-label>
+                    <sp-textfield
+                      size="s"
+                      placeholder="myItems"
+                      .value=${newDefName}
+                      ?negative=${!!error}
+                      @input=${(e) => {
+        newDefName = e.target.value || "";
+        error = "";
+        rerender();
+      }}
+                      @keydown=${(e) => {
+        if (e.key === "Enter")
+          confirm();
+      }}
+                      ${ref2((el) => {
+        if (el && source === "__new__")
+          requestAnimationFrame(() => el.focus());
+      })}
+                    >
+                      <sp-help-text slot="negative-help-text">${error}</sp-help-text>
+                    </sp-textfield>
+                  </label>
+                ` : nothing}
+            ${fnDefs.length > 0 ? html3`
+                  <label>
+                    <sp-field-label size="s">Filter (optional)</sp-field-label>
+                    <sp-picker
+                      label="Filter"
+                      size="s"
+                      .value=${filterDef}
+                      @change=${(e) => {
+        filterDef = e.target.value;
+        rerender();
+      }}
+                    >
+                      <sp-menu-item value="">None</sp-menu-item>
+                      ${fnDefs.map(([name]) => html3`<sp-menu-item value=${name}>${name}</sp-menu-item>`)}
+                    </sp-picker>
+                  </label>
+                  <label>
+                    <sp-field-label size="s">Sort (optional)</sp-field-label>
+                    <sp-picker
+                      label="Sort"
+                      size="s"
+                      .value=${sortDef}
+                      @change=${(e) => {
+        sortDef = e.target.value;
+        rerender();
+      }}
+                    >
+                      <sp-menu-item value="">None</sp-menu-item>
+                      ${fnDefs.map(([name]) => html3`<sp-menu-item value=${name}>${name}</sp-menu-item>`)}
+                    </sp-picker>
+                  </label>
+                ` : nothing}
+          </div>
+        </sp-dialog-wrapper>
+      `;
+    }
+    return buildTpl();
+  });
+}
+
+// src/editor/context-menu.js
 init_components();
 
 // src/panels/layers-panel.js
@@ -268635,6 +269124,12 @@ function showContextMenu(e, path2, opts = {}) {
       label: "Wrap in Div",
       action: () => transactDoc(activeTab.value, (t) => mutateWrapNode(t, path2))
     });
+    if (!(path2.length >= 2 && path2[path2.length - 2] === "children" && path2[path2.length - 1] === "map")) {
+      items.push({
+        label: "Repeat...",
+        action: () => convertToRepeater()
+      });
+    }
     items.push({
       label: "Set Title",
       action: () => {
@@ -268686,7 +269181,24 @@ function showContextMenu(e, path2, opts = {}) {
     }
   }
   let { clientX: x, clientY: y } = e;
-  _ctxHandle = renderPopover(html3`<sp-popover open style="position:fixed;z-index:10000;left:${x}px;top:${y}px">
+  _ctxHandle = renderPopover(html3`<sp-popover
+      open
+      style="position:fixed;z-index:10000;left:${x}px;top:${y}px"
+      ${ref2((el) => {
+    if (!el)
+      return;
+    requestAnimationFrame(() => {
+      const popover = el;
+      const menuRect = popover.getBoundingClientRect();
+      if (x + menuRect.width > window.innerWidth)
+        x = window.innerWidth - menuRect.width - 4;
+      if (y + menuRect.height > window.innerHeight)
+        y = window.innerHeight - menuRect.height - 4;
+      popover.style.left = `${x}px`;
+      popover.style.top = `${y}px`;
+    });
+  })}
+    >
       <sp-menu>
         ${items.map((item) => item.label === "—" ? html3`<sp-menu-divider></sp-menu-divider>` : html3`<sp-menu-item
                 style=${item.danger ? "color: var(--danger)" : ""}
@@ -268703,18 +269215,6 @@ function showContextMenu(e, path2, opts = {}) {
       _ctxHandle = null;
     }
   });
-  requestAnimationFrame(() => {
-    const popover = _ctxHandle?.host.querySelector("sp-popover");
-    if (!popover)
-      return;
-    const menuRect = popover.getBoundingClientRect();
-    if (x + menuRect.width > window.innerWidth)
-      x = window.innerWidth - menuRect.width - 4;
-    if (y + menuRect.height > window.innerHeight)
-      y = window.innerHeight - menuRect.height - 4;
-    popover.style.left = `${x}px`;
-    popover.style.top = `${y}px`;
-  });
 }
 
 // src/editor/insertion-helper.js
@@ -269929,6 +270429,7 @@ function renderOverlays() {
 // src/files/files.js
 init_lit_html();
 init_class_map();
+init_ref();
 init_store();
 init_platform3();
 init_components();
@@ -270250,6 +270751,144 @@ function setupTreeKeyboard(tree) {
   if (first2)
     first2.setAttribute("tabindex", "0");
 }
+var _fileTreeDndCleanups = [];
+function registerFileTreeDnD({ renderLeftPanel }) {
+  for (const fn of _fileTreeDndCleanups)
+    fn();
+  _fileTreeDndCleanups = [];
+  requestAnimationFrame(() => {
+    const tree = document.querySelector(".file-tree");
+    if (!tree)
+      return;
+    const items = tree.querySelectorAll(".file-tree-item");
+    items.forEach((row) => {
+      const path2 = row.dataset.path;
+      const type = row.dataset.type;
+      if (!path2)
+        return;
+      const cleanups = [
+        draggable({
+          element: row,
+          getInitialData() {
+            return { type: "file-tree", path: path2, entryType: type };
+          },
+          onDragStart() {
+            row.classList.add("dragging");
+          },
+          onDrop() {
+            row.classList.remove("dragging");
+          }
+        })
+      ];
+      if (type === "directory") {
+        cleanups.push(dropTargetForElements({
+          element: row,
+          canDrop({ source }) {
+            if (source.data.type !== "file-tree")
+              return false;
+            const srcPath = source.data.path;
+            if (srcPath === path2)
+              return false;
+            if (srcPath.startsWith(path2 + "/"))
+              return false;
+            const srcParent = parentDir(srcPath);
+            if (srcParent === path2)
+              return false;
+            return true;
+          },
+          onDragEnter() {
+            row.classList.add("drag-over");
+          },
+          onDrag() {
+            if (!row.classList.contains("drag-over"))
+              row.classList.add("drag-over");
+          },
+          onDragLeave() {
+            row.classList.remove("drag-over");
+          },
+          onDrop() {
+            row.classList.remove("drag-over");
+          },
+          getData() {
+            return { type: "file-tree-target", targetDir: path2 };
+          }
+        }));
+      }
+      _fileTreeDndCleanups.push(combine(...cleanups));
+    });
+    const rootCleanup = dropTargetForElements({
+      element: tree,
+      canDrop({ source }) {
+        if (source.data.type !== "file-tree")
+          return false;
+        const srcPath = source.data.path;
+        return parentDir(srcPath) !== ".";
+      },
+      onDragEnter() {
+        tree.classList.add("drag-over-root");
+      },
+      onDragLeave() {
+        tree.classList.remove("drag-over-root");
+      },
+      onDrop() {
+        tree.classList.remove("drag-over-root");
+      },
+      getData() {
+        return { type: "file-tree-target", targetDir: "." };
+      }
+    });
+    _fileTreeDndCleanups.push(rootCleanup);
+    const monitorCleanup = monitorForElements({
+      onDrop({ source, location: location3 }) {
+        const target = location3.current.dropTargets[0];
+        if (!target)
+          return;
+        if (source.data.type !== "file-tree")
+          return;
+        if (target.data.type !== "file-tree-target")
+          return;
+        const srcPath = source.data.path;
+        const targetDirPath = target.data.targetDir;
+        const fileName = srcPath.split("/").pop();
+        const newPath = targetDirPath === "." ? fileName : `${targetDirPath}/${fileName}`;
+        if (newPath === srcPath)
+          return;
+        moveFileEntry(srcPath, newPath, renderLeftPanel);
+      }
+    });
+    _fileTreeDndCleanups.push(monitorCleanup);
+  });
+}
+async function moveFileEntry(oldPath, newPath, renderLeftPanel) {
+  const platform3 = getPlatform();
+  try {
+    await platform3.renameFile(oldPath, newPath);
+    for (const [id] of workspace.tabs.entries()) {
+      if (id === oldPath) {
+        renameTab(oldPath, newPath, newPath);
+      } else if (id.startsWith(oldPath + "/")) {
+        const newTabPath = newPath + id.slice(oldPath.length);
+        renameTab(id, newTabPath, newTabPath);
+      }
+    }
+    const oldParent = parentDir(oldPath);
+    const newParent = parentDir(newPath);
+    await loadDirectory(oldParent);
+    if (newParent !== oldParent)
+      await loadDirectory(newParent);
+    if (newParent !== ".")
+      requireProjectState().expanded.add(newParent);
+    renderLeftPanel();
+    statusMessage(`Moved to ${newPath}`);
+  } catch (e) {
+    statusMessage(`Error: ${e.message}`);
+  }
+}
+function parentDir(path2) {
+  const normalized = path2.replaceAll("\\", "/");
+  const lastSlash = normalized.lastIndexOf("/");
+  return lastSlash === -1 ? "." : normalized.substring(0, lastSlash);
+}
 var _fileCtxHandle = null;
 function dismissFileContextMenu() {
   if (_fileCtxHandle) {
@@ -270279,7 +270918,24 @@ function showFileContextMenu(e, entry, ctx) {
     danger: true
   });
   let { clientX: x, clientY: y } = e;
-  _fileCtxHandle = renderPopover(html3`<sp-popover open style="position:fixed;z-index:10000;left:${x}px;top:${y}px">
+  _fileCtxHandle = renderPopover(html3`<sp-popover
+      open
+      style="position:fixed;z-index:10000;left:${x}px;top:${y}px"
+      ${ref2((el) => {
+    if (!el)
+      return;
+    requestAnimationFrame(() => {
+      const popover = el;
+      const menuRect = popover.getBoundingClientRect();
+      if (x + menuRect.width > window.innerWidth)
+        x = window.innerWidth - menuRect.width - 4;
+      if (y + menuRect.height > window.innerHeight)
+        y = window.innerHeight - menuRect.height - 4;
+      popover.style.left = `${x}px`;
+      popover.style.top = `${y}px`;
+    });
+  })}
+    >
       <sp-menu>
         ${items.map((item) => item.label === "—" ? html3`<sp-menu-divider></sp-menu-divider>` : html3`<sp-menu-item
                 style=${item.danger ? "color: var(--danger)" : ""}
@@ -270296,18 +270952,6 @@ function showFileContextMenu(e, entry, ctx) {
       _fileCtxHandle = null;
     }
   });
-  requestAnimationFrame(() => {
-    const popover = _fileCtxHandle?.host.querySelector("sp-popover");
-    if (!popover)
-      return;
-    const menuRect = popover.getBoundingClientRect();
-    if (x + menuRect.width > window.innerWidth)
-      x = window.innerWidth - menuRect.width - 4;
-    if (y + menuRect.height > window.innerHeight)
-      y = window.innerHeight - menuRect.height - 4;
-    popover.style.left = `${x}px`;
-    popover.style.top = `${y}px`;
-  });
 }
 async function createNewFile(dirPath = ".", renderLeftPanel) {
   const name = prompt("File name:", "untitled.json");
@@ -270329,20 +270973,70 @@ title: Untitled
     statusMessage(`Error: ${e.message}`);
   }
 }
+function showRenameFileDialog(currentName) {
+  let value2 = currentName;
+  return showDialog((done) => {
+    function confirm() {
+      const trimmed = value2.trim();
+      if (!trimmed)
+        return;
+      done(trimmed);
+    }
+    const tpl = html3`
+      <sp-dialog-wrapper
+        open
+        underlay
+        headline="Rename"
+        confirm-label="Rename"
+        cancel-label="Cancel"
+        size="s"
+        @confirm=${confirm}
+        @cancel=${() => done(null)}
+        @close=${() => done(null)}
+      >
+        <sp-textfield
+          style="width:100%"
+          value=${currentName}
+          @input=${(e) => {
+      value2 = e.target.value || "";
+    }}
+          @keydown=${(e) => {
+      if (e.key === "Enter")
+        confirm();
+    }}
+        ></sp-textfield>
+      </sp-dialog-wrapper>
+    `;
+    requestAnimationFrame(() => {
+      const layer = document.getElementById("layer-dialog");
+      const tf = layer?.querySelector("sp-textfield");
+      if (tf) {
+        tf.focus();
+        const input = tf.shadowRoot?.querySelector("input");
+        if (input)
+          input.select();
+      }
+    });
+    return tpl;
+  });
+}
 async function renameFile(entry, renderLeftPanel) {
-  const newName = prompt("New name:", entry.name);
+  const newName = await showRenameFileDialog(entry.name);
   if (!newName || newName === entry.name)
     return;
   const entryPath = entry.path.replaceAll("\\", "/");
-  const parentDir = entryPath.includes("/") ? entryPath.substring(0, entryPath.lastIndexOf("/")) : ".";
-  const newPath = parentDir === "." ? newName : `${parentDir}/${newName}`;
+  const parentDir2 = entryPath.includes("/") ? entryPath.substring(0, entryPath.lastIndexOf("/")) : ".";
+  const newPath = parentDir2 === "." ? newName : `${parentDir2}/${newName}`;
   try {
     const platform3 = getPlatform();
     await platform3.renameFile(entry.path, newPath);
-    await loadDirectory(parentDir);
+    await loadDirectory(parentDir2);
     if (requireProjectState().selectedPath === entry.path) {
       requireProjectState().selectedPath = newPath;
     }
+    if (workspace.tabs.has(entry.path)) {
+      renameTab(entry.path, newPath, newPath);
+    }
     renderLeftPanel();
     statusMessage(`Renamed to ${newName}`);
   } catch (e) {
@@ -270350,14 +271044,18 @@ async function renameFile(entry, renderLeftPanel) {
   }
 }
 async function deleteFile(entry, renderLeftPanel) {
-  if (!confirm(`Delete "${entry.name}"?`))
+  const confirmed = await showConfirmDialog("Delete File", `Delete "${entry.name}"?`, {
+    confirmLabel: "Delete",
+    destructive: true
+  });
+  if (!confirmed)
     return;
   try {
     const platform3 = getPlatform();
     await platform3.deleteFile(entry.path);
     const delPath = entry.path.replaceAll("\\", "/");
-    const parentDir = delPath.includes("/") ? delPath.substring(0, delPath.lastIndexOf("/")) : ".";
-    await loadDirectory(parentDir);
+    const parentDir2 = delPath.includes("/") ? delPath.substring(0, delPath.lastIndexOf("/")) : ".";
+    await loadDirectory(parentDir2);
     if (requireProjectState().selectedPath === entry.path) {
       requireProjectState().selectedPath = null;
     }
@@ -270453,15 +271151,15 @@ function isComponentEnabled(comp, elements) {
   return false;
 }
 function groupByPackage() {
-  const groups = new Map;
+  const groups2 = new Map;
   for (const comp of componentRegistry) {
     if (comp.source !== "npm" || !comp.package || !comp.modulePath)
       continue;
-    if (!groups.has(comp.package))
-      groups.set(comp.package, []);
-    groups.get(comp.package)?.push(comp);
+    if (!groups2.has(comp.package))
+      groups2.set(comp.package, []);
+    groups2.get(comp.package)?.push(comp);
   }
-  return groups;
+  return groups2;
 }
 function renderImportsTemplate({
   renderLeftPanel,
@@ -270553,7 +271251,11 @@ function renderSiteLevelImports(renderLeftPanel) {
                 size="xs"
                 title="Remove package"
                 @click=${async () => {
-    if (!confirm("Remove " + pkg + "?"))
+    const confirmed = await showConfirmDialog("Remove Package", `Remove ${pkg}?`, {
+      confirmLabel: "Remove",
+      destructive: true
+    });
+    if (!confirmed)
       return;
     try {
       const platform3 = getPlatform();
@@ -270856,11 +271558,17 @@ function findContentTypeSchema(documentPath, projectConfig) {
   for (const [name, def3] of Object.entries(projectConfig.contentTypes)) {
     if (!def3.source || !def3.schema)
       continue;
-    const src = def3.source.replace(/^\.\//, "");
-    const dir = src.split("/")[0];
-    const ext = src.includes("*.md") ? ".md" : src.includes("*.json") ? ".json" : src.includes("*.csv") ? ".csv" : null;
-    if (documentPath.startsWith(dir + "/") && (!ext || documentPath.endsWith(ext))) {
-      return { name, schema: def3.schema };
+    const src = def3.source.replace(/^\.\//, "").replace(/\/$/, "");
+    const hasExt = src.includes(".") && !src.endsWith("/");
+    if (hasExt) {
+      if (documentPath === src || documentPath.endsWith("/" + src)) {
+        return { name, schema: def3.schema };
+      }
+    } else {
+      const ext = `.${def3.format || "md"}`;
+      if (documentPath.startsWith(src + "/") && documentPath.endsWith(ext)) {
+        return { name, schema: def3.schema };
+      }
     }
   }
   return null;
@@ -297298,6 +298006,7 @@ init_workspace2();
 init_lit_html();
 init_class_map();
 init_live();
+init_ref();
 init_platform3();
 var _open = false;
 var _query = "";
@@ -297314,11 +298023,6 @@ function openQuickSearch() {
   _results = [];
   _selectedIndex = 0;
   renderOverlay();
-  requestAnimationFrame(() => {
-    const input = getContainer().querySelector(".quick-search-input");
-    if (input)
-      input.focus();
-  });
 }
 function closeQuickSearch() {
   _open = false;
@@ -297412,6 +298116,10 @@ function renderOverlay() {
           .value=${live(_query)}
           @input=${onInput}
           @keydown=${onKeydown2}
+          ${ref2((el) => {
+    if (el)
+      requestAnimationFrame(() => el.focus());
+  })}
         />
         <div class="quick-search-results">
           ${items.length === 0 && _query.trim() ? html3`<div class="quick-search-empty">No results</div>` : nothing}
@@ -297544,10 +298252,13 @@ function initShortcuts(getContext) {
             const tab2 = workspace.tabs.get(workspace.activeTabId);
             if (tab2?.doc.dirty) {
               const name = tab2.documentPath?.split("/").pop() || "Untitled";
-              if (!window.confirm(`"${name}" has unsaved changes. Close without saving?`))
-                break;
+              showConfirmDialog("Unsaved Changes", `"${name}" has unsaved changes. Close without saving?`, { confirmLabel: "Close", destructive: true }).then((confirmed) => {
+                if (confirmed && workspace.activeTabId)
+                  closeTab(workspace.activeTabId);
+              });
+            } else {
+              closeTab(workspace.activeTabId);
             }
-            closeTab(workspace.activeTabId);
           }
           break;
         case "o":
@@ -298356,7 +299067,7 @@ function handleNewContentType(rerender) {
   if (config.contentTypes[slug])
     return;
   config.contentTypes[slug] = {
-    source: `./content/${slug}/**/*.md`,
+    source: `./content/${slug}/`,
     schema: { type: "object", properties: {}, required: [] }
   };
   selectedContentType = slug;
@@ -298680,20 +299391,20 @@ function renderCssVarsEditor(container) {
   const config = projectState?.projectConfig || {};
   const rootStyle = config.style || {};
   const media = getEffectiveMedia(config.$media);
-  const groups = { color: [], font: [], size: [], other: [] };
+  const groups2 = { color: [], font: [], size: [], other: [] };
   for (const [k, v] of Object.entries(rootStyle)) {
     if (!k.startsWith("--"))
       continue;
     if (typeof v !== "string" && typeof v !== "number")
       continue;
     if (k.startsWith("--color"))
-      groups.color.push([k, v]);
+      groups2.color.push([k, v]);
     else if (k.startsWith("--font"))
-      groups.font.push([k, v]);
+      groups2.font.push([k, v]);
     else if (k.startsWith("--size") || k.startsWith("--spacing") || k.startsWith("--radius"))
-      groups.size.push([k, v]);
+      groups2.size.push([k, v]);
     else
-      groups.other.push([k, v]);
+      groups2.other.push([k, v]);
   }
   const mediaNames = media ? Object.keys(media).filter((m3) => m3 !== "--") : [];
   const save = () => {
@@ -298720,10 +299431,10 @@ function renderCssVarsEditor(container) {
     <div class="settings-section">
       <h3 class="settings-section-title">CSS Variables</h3>
 
-      ${renderColorSection(groups.color, updateVar, deleteVar, addVar)}
-      ${renderFontSection(groups.font, updateVar, deleteVar, addVar)}
-      ${renderSizeSection(groups.size, updateVar, deleteVar, addVar, rootStyle, mediaNames)}
-      ${groups.other.length > 0 ? renderOtherSection(groups.other, updateVar, deleteVar, addVar, rootStyle, mediaNames) : nothing}
+      ${renderColorSection(groups2.color, updateVar, deleteVar, addVar)}
+      ${renderFontSection(groups2.font, updateVar, deleteVar, addVar)}
+      ${renderSizeSection(groups2.size, updateVar, deleteVar, addVar, rootStyle, mediaNames)}
+      ${groups2.other.length > 0 ? renderOtherSection(groups2.other, updateVar, deleteVar, addVar, rootStyle, mediaNames) : nothing}
     </div>
   `;
   render2(tpl, container);
@@ -299287,6 +299998,7 @@ function renderGeneralSettings(container) {
 // src/settings/settings-modal.js
 var _handle = null;
 var _activeSection = "general";
+var _contentEl = null;
 var sections = [
   { key: "general", label: "General", icon: "sp-icon-properties" },
   { key: "head", label: "Head", icon: "sp-icon-file-single-web-page" },
@@ -299305,6 +300017,7 @@ function closeSettingsModal() {
     return;
   _handle.close();
   _handle = null;
+  _contentEl = null;
 }
 function renderModal() {
   const onNavClick = (key) => {
@@ -299341,7 +300054,8 @@ function renderModal() {
         <div
           class="settings-modal-content"
           ${ref2((el) => {
-    if (el)
+    _contentEl = el || null;
+    if (_contentEl)
       requestAnimationFrame(() => renderActiveSection());
   })}
         ></div>
@@ -299355,26 +300069,23 @@ function renderModal() {
   }
 }
 function renderActiveSection() {
-  if (!_handle)
-    return;
-  const container = _handle.host.querySelector(".settings-modal-content");
-  if (!container)
+  if (!_handle || !_contentEl)
     return;
   switch (_activeSection) {
     case "general":
-      renderGeneralSettings(container);
+      renderGeneralSettings(_contentEl);
       break;
     case "head":
-      renderHeadEditor(container);
+      renderHeadEditor(_contentEl);
       break;
     case "cssVars":
-      renderCssVarsEditor(container);
+      renderCssVarsEditor(_contentEl);
       break;
     case "definitions":
-      renderDefsEditor(container);
+      renderDefsEditor(_contentEl);
       break;
     case "contentTypes":
-      renderContentTypesEditor(container);
+      renderContentTypesEditor(_contentEl);
       break;
   }
 }
@@ -299386,11 +300097,11 @@ function mount4() {
   _scope3.run(() => {
     effect(() => {
       const tab = activeTab.value;
-      if (!tab)
-        return;
-      const gs = tab.session.ui.gitStatus;
-      if (!gs && !tab.session.ui.gitLoading) {
-        refreshGitStatus();
+      if (tab) {
+        const gs = tab.session.ui.gitStatus;
+        if (!gs && !tab.session.ui.gitLoading) {
+          refreshGitStatus();
+        }
       }
       renderActivityBar();
     });
@@ -299437,8 +300148,6 @@ function tabIcon(tag5, size4) {
 }
 function renderActivityBar() {
   const tab = activeTab.value;
-  if (!tab)
-    return;
   const leftTab = view.leftTab;
   const gitFileCount = tab?.session.ui.gitStatus?.files?.length || 0;
   const tabs = [
@@ -299502,6 +300211,7 @@ init_platform3();
 
 // src/browse/browse-modal.js
 init_lit_html();
+init_ref();
 
 // src/browse/browse.js
 init_lit_html();
@@ -299612,7 +300322,7 @@ function contentTypeFor(filePath) {
     const d3 = def3;
     if (!d3.source)
       continue;
-    const prefix = d3.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+    const prefix = d3.source.replace(/^\.\//, "").replace(/\/$/, "");
     if (filePath.startsWith(prefix + "/") || filePath === prefix) {
       return name.charAt(0).toUpperCase() + name.slice(1);
     }
@@ -299672,12 +300382,12 @@ function getContentTypeTypes() {
     return [];
   return Object.entries(config.contentTypes).map(([name, def3]) => {
     const d3 = def3;
-    const dir = d3.source ? d3.source.replace(/^\.\//, "").split("/")[0] : name;
+    const dir = d3.source ? d3.source.replace(/^\.\//, "").replace(/\/$/, "") : name;
     return {
       key: `contentType:${name}`,
       label: name.charAt(0).toUpperCase() + name.slice(1),
       dir,
-      ext: ".md",
+      ext: `.${d3.format || "md"}`,
       contentTypeName: name
     };
   });
@@ -299761,7 +300471,24 @@ function showBrowseContextMenu(e20, file, container, ctx) {
     }
   ];
   let { clientX: x, clientY: y } = e20;
-  _browseCtxHandle = renderPopover(html3`<sp-popover open style="position:fixed;left:${x}px;top:${y}px">
+  _browseCtxHandle = renderPopover(html3`<sp-popover
+      open
+      style="position:fixed;left:${x}px;top:${y}px"
+      ${ref2((el) => {
+    if (!el)
+      return;
+    requestAnimationFrame(() => {
+      const popover = el;
+      const menuRect = popover.getBoundingClientRect();
+      if (x + menuRect.width > window.innerWidth)
+        x = window.innerWidth - menuRect.width - 4;
+      if (y + menuRect.height > window.innerHeight)
+        y = window.innerHeight - menuRect.height - 4;
+      popover.style.left = `${x}px`;
+      popover.style.top = `${y}px`;
+    });
+  })}
+    >
       <sp-menu>
         ${items.map((item) => item.label === "—" ? html3`<sp-menu-divider></sp-menu-divider>` : html3`<sp-menu-item
                 style=${item.danger ? "color: var(--danger)" : ""}
@@ -299779,26 +300506,14 @@ function showBrowseContextMenu(e20, file, container, ctx) {
     },
     layer: "dialog"
   });
-  requestAnimationFrame(() => {
-    const popover = _browseCtxHandle?.host.querySelector("sp-popover");
-    if (!popover)
-      return;
-    const menuRect = popover.getBoundingClientRect();
-    if (x + menuRect.width > window.innerWidth)
-      x = window.innerWidth - menuRect.width - 4;
-    if (y + menuRect.height > window.innerHeight)
-      y = window.innerHeight - menuRect.height - 4;
-    popover.style.left = `${x}px`;
-    popover.style.top = `${y}px`;
-  });
 }
 async function browseRenameFile(file, container, ctx) {
   const newName = await showRenameDialog(file.name);
   if (!newName || newName === file.name)
     return;
   const filePath = file.path.replaceAll("\\", "/");
-  const parentDir = filePath.includes("/") ? filePath.substring(0, filePath.lastIndexOf("/")) : ".";
-  const newPath = parentDir === "." ? newName : `${parentDir}/${newName}`;
+  const parentDir2 = filePath.includes("/") ? filePath.substring(0, filePath.lastIndexOf("/")) : ".";
+  const newPath = parentDir2 === "." ? newName : `${parentDir2}/${newName}`;
   try {
     const platform4 = getPlatform();
     await platform4.renameFile(file.path, newPath);
@@ -299811,11 +300526,11 @@ async function browseRenameFile(file, container, ctx) {
 }
 async function browseDuplicateFile(file, container, ctx) {
   const filePath = file.path.replaceAll("\\", "/");
-  const parentDir = filePath.includes("/") ? filePath.substring(0, filePath.lastIndexOf("/")) : ".";
+  const parentDir2 = filePath.includes("/") ? filePath.substring(0, filePath.lastIndexOf("/")) : ".";
   const baseName = file.name.replace(/(\.[^.]+)$/, "");
   const ext = file.ext || "";
   const copyName = `${baseName}-copy${ext}`;
-  const copyPath = parentDir === "." ? copyName : `${parentDir}/${copyName}`;
+  const copyPath = parentDir2 === "." ? copyName : `${parentDir2}/${copyName}`;
   try {
     const platform4 = getPlatform();
     const content3 = await platform4.readFile(file.path);
@@ -299844,7 +300559,7 @@ async function browseDeleteFile(file, container, ctx) {
 function showRenameDialog(currentName) {
   let value2 = currentName;
   return showDialog((done) => {
-    function confirm2() {
+    function confirm() {
       const trimmed = value2.trim();
       if (!trimmed)
         return;
@@ -299858,7 +300573,7 @@ function showRenameDialog(currentName) {
         confirm-label="Rename"
         cancel-label="Cancel"
         size="s"
-        @confirm=${confirm2}
+        @confirm=${confirm}
         @cancel=${() => done(null)}
         @close=${() => done(null)}
       >
@@ -299870,7 +300585,7 @@ function showRenameDialog(currentName) {
     }}
           @keydown=${(e20) => {
       if (e20.key === "Enter")
-        confirm2();
+        confirm();
     }}
         ></sp-textfield>
       </sp-dialog-wrapper>
@@ -300149,21 +300864,24 @@ function openBrowseModal() {
           <sp-icon-close slot="icon"></sp-icon-close>
         </sp-action-button>
       </div>
-      <div class="browse-modal-content"></div>
+      <div
+        class="browse-modal-content"
+        ${ref2((el) => {
+    if (el) {
+      requestAnimationFrame(() => {
+        renderBrowse(el, {
+          openFile: (path2) => {
+            closeBrowseModal();
+            openFileInTab(path2);
+          }
+        });
+      });
+    }
+  })}
+      ></div>
     </div>
   `;
   _handle2 = openModal(tpl);
-  requestAnimationFrame(() => {
-    const container = _handle2?.host.querySelector(".browse-modal-content");
-    if (container) {
-      renderBrowse(container, {
-        openFile: (path2) => {
-          closeBrowseModal();
-          openFileInTab(path2);
-        }
-      });
-    }
-  });
 }
 function closeBrowseModal() {
   if (!_handle2)
@@ -303948,10 +304666,15 @@ function bindableFieldRow(label4, type2, rawValue, onChange, filterFn = null, ex
     debounce = setTimeout(() => onChange(e20.target.value), 400);
   };
   const staticVal = isBound ? "" : rawValue ?? "";
-  const staticTpl = type2 === "textarea" ? html3`<sp-textfield multiline size="s" value=${staticVal} @input=${onInput2}></sp-textfield>` : type2 === "checkbox" ? html3`<sp-checkbox
+  const staticTpl = type2 === "textarea" ? html3`<sp-textfield
+          multiline
+          size="s"
+          .value=${live(staticVal)}
+          @input=${onInput2}
+        ></sp-textfield>` : type2 === "checkbox" ? html3`<sp-checkbox
             ?checked=${!!staticVal}
             @change=${(e20) => onChange(e20.target.checked)}
-          ></sp-checkbox>` : html3`<sp-textfield size="s" value=${staticVal} @input=${onInput2}></sp-textfield>`;
+          ></sp-checkbox>` : html3`<sp-textfield size="s" .value=${live(staticVal)} @input=${onInput2}></sp-textfield>`;
   const boundTpl = html3`
     <sp-picker
       size="s"
@@ -304017,7 +304740,7 @@ function kvRow(key, value2, onChange, onDelete, datalistId = null) {
       <sp-textfield
         size="s"
         class="kv-key"
-        value=${key}
+        .value=${live(key)}
         @input=${(e20) => {
     currentKey = e20.target.value;
     commit();
@@ -304031,7 +304754,7 @@ function kvRow(key, value2, onChange, onDelete, datalistId = null) {
       <sp-textfield
         size="s"
         class="kv-val"
-        value=${value2}
+        .value=${live(value2)}
         placeholder=${placeholder}
         @input=${(e20) => {
     currentVal = e20.target.value;
@@ -304088,7 +304811,7 @@ function renderSwitchFieldsTemplate(node2, path2, mapSignals) {
         <div class="field-row" style="display:flex;align-items:center;gap:4px;margin-bottom:3px">
           <input
             class="field-input"
-            value=${caseName}
+            .value=${live(caseName)}
             style="flex:1"
             @input=${(e20) => {
       clearTimeout(debounce);
@@ -304198,7 +304921,7 @@ function renderComponentPropsFieldsTemplate(node2, path2, mapSignals, navigateTo
       widgetTpl = html3`<sp-textfield
             size="s"
             placeholder="YYYY-MM-DD"
-            value=${staticVal}
+            .value=${live(staticVal)}
             @input=${(e20) => {
         clearTimeout(debounce);
         debounce = setTimeout(() => onChange(e20.target.value), 400);
@@ -304213,7 +304936,7 @@ function renderComponentPropsFieldsTemplate(node2, path2, mapSignals, navigateTo
     } else if (parsed.kind === "number") {
       widgetTpl = html3`<sp-number-field
             size="s"
-            value=${staticVal}
+            .value=${live(staticVal)}
             @input=${(e20) => {
         clearTimeout(debounce);
         debounce = setTimeout(() => onChange(e20.target.value), 400);
@@ -304231,7 +304954,7 @@ function renderComponentPropsFieldsTemplate(node2, path2, mapSignals, navigateTo
     } else {
       widgetTpl = html3`<sp-textfield
             size="s"
-            value=${staticVal}
+            .value=${live(staticVal)}
             @input=${(e20) => {
         clearTimeout(debounce);
         debounce = setTimeout(() => onChange(e20.target.value), 400);
@@ -304294,7 +305017,7 @@ function renderMediaFieldsTemplate(node2) {
         class="field-input"
         style="width:70px;flex:none"
         placeholder="320px"
-        value=${media["--"] || ""}
+        .value=${live(media["--"] || "")}
         @input=${(e20) => {
     clearTimeout(baseDebounce);
     baseDebounce = setTimeout(() => {
@@ -304385,7 +305108,7 @@ function mediaBreakpointRowTemplate(name, query3) {
       <div style="display:flex;align-items:center;gap:4px;margin-bottom:2px">
         <input
           class="field-input"
-          value=${mediaDisplayName(name)}
+          .value=${live(mediaDisplayName(name))}
           style="flex:1;font-weight:600;font-size:12px"
           @input=${(e20) => {
     const newKey = friendlyNameToMedia(e20.target.value);
@@ -304419,7 +305142,7 @@ function mediaBreakpointRowTemplate(name, query3) {
       <div style="display:flex;gap:4px;align-items:center">
         <input
           class="field-input bp-query-input"
-          value=${query3}
+          .value=${live(query3)}
           style="flex:1"
           @input=${(e20) => {
     clearTimeout(debounceTimer);
@@ -304903,6 +305626,7 @@ function renderPropertiesPanelTemplate(ctx) {
 
 // src/panels/ai-panel.js
 init_lit_html();
+init_ref();
 
 // ../../node_modules/.bun/quikchat@1.2.7/node_modules/quikchat/dist/quikchat-md.esm.min.js
 function e20(e21, t15) {
@@ -305592,7 +306316,6 @@ q.quikdown = k;
 
 // src/panels/ai-panel.js
 init_platform3();
-init_store();
 var messages2 = [];
 var streaming = false;
 var sessionId = null;
@@ -305603,6 +306326,7 @@ var eventSource = null;
 var mounted2 = false;
 var chatInstance = null;
 var chatContainerEl = null;
+var _quikChatEl = null;
 var currentStreamMsgId = null;
 var streamStarted = false;
 var pendingFileReloads = new Set;
@@ -305622,7 +306346,7 @@ function registerRightPanelRender(fn) {
   globalThis.__jxRightPanelRender = { render: fn };
 }
 function mountQuikChat() {
-  const container = rightPanel.querySelector("#ai-quikchat");
+  const container = _quikChatEl;
   if (!container)
     return;
   if (chatInstance && chatContainerEl === container)
@@ -305900,7 +306624,12 @@ function renderAiPanelTemplate() {
           New Chat
         </sp-action-button>
       </div>
-      <div id="ai-quikchat"></div>
+      <div
+        id="ai-quikchat"
+        ${ref2((el) => {
+    _quikChatEl = el || null;
+  })}
+      ></div>
     </div>
   `;
 }
@@ -305910,10 +306639,20 @@ var _ctx13 = null;
 var _scope5 = null;
 var _rendering = false;
 var _scheduled2 = false;
+var _hasFocus = false;
+function _onFocusIn() {
+  _hasFocus = true;
+}
+function _onFocusOut() {
+  _hasFocus = false;
+  render6();
+}
 function mount6(ctx) {
   _ctx13 = ctx;
   mountAiPanel();
   registerRightPanelRender(render6);
+  rightPanel.addEventListener("focusin", _onFocusIn);
+  rightPanel.addEventListener("focusout", _onFocusOut);
   _scope5 = effectScope();
   _scope5.run(() => {
     effect(() => {
@@ -305930,10 +306669,7 @@ function mount6(ctx) {
       tab.session.ui.styleFilter;
       tab.session.ui.styleFilterActive;
       tab.session.ui.inspectorSections;
-      const colorPopoverOpen = isColorPopoverOpen();
-      const activeTag = document.activeElement?.tagName;
-      const rightHasFocus = !colorPopoverOpen && rightPanel.contains(document.activeElement) && (activeTag === "INPUT" || activeTag === "TEXTAREA" || activeTag === "SP-TEXTFIELD" || activeTag === "SP-NUMBER-FIELD" || activeTag === "SP-PICKER" || activeTag === "SP-COMBOBOX" || activeTag === "SP-SEARCH");
-      if (!rightHasFocus) {
+      if (!_hasFocus && !isColorPopoverOpen()) {
         render6();
       }
     });
@@ -306248,8 +306984,18 @@ var _ctx14 = null;
 var _scope6 = null;
 var _rendering2 = false;
 var _scheduled3 = false;
+var _hasFocus2 = false;
+function _onFocusIn2() {
+  _hasFocus2 = true;
+}
+function _onFocusOut2() {
+  _hasFocus2 = false;
+  render7();
+}
 function mount7(ctx) {
   _ctx14 = ctx;
+  leftPanel.addEventListener("focusin", _onFocusIn2);
+  leftPanel.addEventListener("focusout", _onFocusOut2);
   _scope6 = effectScope();
   _scope6.run(() => {
     effect(() => {
@@ -306263,7 +307009,9 @@ function mount7(ctx) {
         tab.session.ui.gitLoading;
         tab.session.ui.gitError;
       }
-      render7();
+      if (!_hasFocus2) {
+        render7();
+      }
     });
   });
 }
@@ -306312,6 +307060,7 @@ function _render() {
     const tree = leftPanel.querySelector(".file-tree");
     if (tree)
       ctx.setupTreeKeyboard(tree);
+    ctx.registerFileTreeDnD({ renderLeftPanel: render7 });
     return;
   }
   if (tab === "git") {
@@ -306480,12 +307229,12 @@ function tabLabel(tab) {
   const parts = path2.split("/");
   return parts[parts.length - 1];
 }
-function requestClose(id) {
+async function requestClose(id) {
   const tab = workspace.tabs.get(id);
   if (!tab)
     return;
   if (tab.doc.dirty) {
-    const confirmed = window.confirm(`"${tabLabel(tab)}" has unsaved changes. Close without saving?`);
+    const confirmed = await showConfirmDialog("Unsaved Changes", `"${tabLabel(tab)}" has unsaved changes. Close without saving?`, { confirmLabel: "Close", destructive: true });
     if (!confirmed)
       return;
   }
@@ -306635,6 +307384,7 @@ if (!hasPlatform()) {
   registerPlatform(createDevServerPlatform());
 }
 mountResizeEdges();
+initShellRefs();
 mount5(toolbarEl, {
   navigateBack: () => navigateBack(),
   navigateToLevel: (i8) => navigateToLevel(i8),
@@ -306756,6 +307506,7 @@ mount7({
   registerElementsDnD,
   registerComponentsDnD,
   setupTreeKeyboard,
+  registerFileTreeDnD,
   cloneRepository: () => cloneRepository({ openRecentProject }),
   setGitDiffState: (state3) => {
     gitDiffState = state3;
@@ -306779,18 +307530,19 @@ function safeRenderRightPanel() {
   render6();
 }
 registerFunctionCompletions();
-var _openParam = new URLSearchParams(location.search).get("open");
-if (_openParam) {
-  const isAbsPath = _openParam.startsWith("/") || _openParam.startsWith("~") || /^[A-Za-z]:[/\\]/.test(_openParam);
+var _urlParams = new URLSearchParams(location.search);
+var _projectParam = _urlParams.get("project") || _urlParams.get("open");
+if (_projectParam) {
+  const isAbsPath = _projectParam.startsWith("/") || _projectParam.startsWith("~") || /^[A-Za-z]:[/\\]/.test(_projectParam);
   if (!isAbsPath) {
-    statusMessage(`Error: ?open= requires an absolute path (got "${_openParam}")`);
+    statusMessage(`Error: ?project= requires an absolute path (got "${_projectParam}")`);
     render();
   } else {
     render();
     const platform4 = getPlatform();
     (async () => {
       try {
-        const siteCtx = platform4.resolveSiteContext ? await platform4.resolveSiteContext(_openParam) : { sitePath: null };
+        const siteCtx = platform4.resolveSiteContext ? await platform4.resolveSiteContext(_projectParam) : { sitePath: null };
         if (siteCtx.sitePath) {
           if (siteCtx.sitePath) {
             platform4.projectRoot = siteCtx.sitePath;
@@ -306832,8 +307584,8 @@ if (_openParam) {
           }
           requireProjectState().projectDirs = foundDirs;
         }
-        const _fileParam = new URLSearchParams(location.search).get("file");
-        let fileRelPath = _fileParam || siteCtx.fileRelPath || _openParam;
+        const _fileParam = _urlParams.get("file");
+        let fileRelPath = _fileParam || siteCtx.fileRelPath || _projectParam;
         if (fileRelPath === "project.json" || fileRelPath.endsWith("/project.json")) {
           let opened = false;
           for (const candidate of ["pages/index.md", "pages/index.json"]) {
@@ -306871,7 +307623,7 @@ if (_openParam) {
             activeTab.value.session.ui.canvasMode = "stylebook";
           }
           render();
-          statusMessage(`Opened ${_openParam}`);
+          statusMessage(`Opened ${fileRelPath}`);
         }
       } catch (e21) {
         statusMessage(`Error: ${e21.message}`);
@@ -306997,5 +307749,5 @@ effect(() => {
     scheduleAutosave();
 });
 
-//# debugId=F7433BADBC7F620D64756E2164756E21
+//# debugId=F13607B73179696E64756E2164756E21
 //# sourceMappingURL=studio.js.map