@jxsuite/studio 2.0.0 → 2.1.0

package/dist/chunks/studio-94m77tgk.js

@@ -0,0 +1,1482 @@
+import {
+  listWindow,
+  measuredRowHeight,
+  revealListRow,
+  watchListWindow
+} from "./studio-dzcyvvvz.js";
+import {
+  autoSyncProjectOnOpen,
+  cleanupGitPanel,
+  maybePromptJxsuiteUpdate,
+  shouldInstallAutomation
+} from "./studio-50k77cca.js";
+import {
+  openCsvGridTab,
+  openPagesGrid
+} from "./studio-9je6w5sq.js";
+import {
+  collectionDirs,
+  collectionInfo,
+  confirmFileDelete,
+  markLocalMutation,
+  parseSourceForPath,
+  renamePromptMessage
+} from "./studio-k2sxjph5.js";
+import {
+  UPLOAD_ACCEPT,
+  invalidateUsages,
+  isImage,
+  uploadAssets
+} from "./studio-f12h6177.js";
+import {
+  showProgressModal
+} from "./studio-na6rwzhw.js";
+import {
+  rectOf,
+  registerPanel
+} from "./studio-v96qfnww.js";
+import {
+  activateTab,
+  activeRegistry,
+  errorMessage,
+  findContentTypeSchema,
+  isCollabPath,
+  localeLabel,
+  localeOfPath,
+  markSessionRestored,
+  moveTabToPane,
+  notify,
+  now,
+  openTab,
+  paneOfTab,
+  persistedSession,
+  receivingPane,
+  renameTab,
+  renderPopover,
+  replaceAllTabs,
+  resetProjectShell,
+  resolveI18n,
+  restoreSession,
+  setActivityTab,
+  setWorkspaceProject,
+  showPromptDialog,
+  workspace
+} from "./studio-41exgzhq.js";
+import {
+  classMap
+} from "./studio-ckwz4d3x.js";
+import {
+  ref,
+  repeat
+} from "./studio-p471gg5n.js";
+import {
+  html,
+  nothing
+} from "./studio-5x5774ak.js";
+import {
+  combine,
+  draggable,
+  dropTargetForElements,
+  monitorForElements
+} from "./studio-bsxxx3x2.js";
+import {
+  loadComponentRegistry
+} from "./studio-s519zc99.js";
+import {
+  projectState,
+  requireProjectState,
+  setProjectState
+} from "./studio-cjm7fdjf.js";
+import {
+  documentExtensions,
+  formatForPath,
+  loadFormats,
+  noFormatError,
+  refreshExtensionUi,
+  refreshFormats
+} from "./studio-adn0z1k3.js";
+import {
+  getPlatform,
+  hasPlatform
+} from "./studio-sas7mt3k.js";
+
+// src/packages/ensure-deps.ts
+async function ensureDependenciesInstalled() {
+  if (shouldInstallAutomation(location.search)) {
+    return;
+  }
+  const platform = getPlatform();
+  if (!platform.dependenciesNeedInstall || !platform.installDependencies) {
+    return;
+  }
+  let needs = false;
+  try {
+    needs = await platform.dependenciesNeedInstall();
+  } catch {
+    return;
+  }
+  if (!needs) {
+    return;
+  }
+  const progress = showProgressModal({
+    status: "Running bun install…",
+    title: "Installing dependencies"
+  });
+  try {
+    const result = await platform.installDependencies();
+    if (result.ok) {
+      progress.done();
+    } else {
+      progress.fail(result.log ?? "bun install failed");
+    }
+  } catch (error) {
+    progress.fail(error instanceof Error ? error.message : String(error));
+  }
+}
+
+// src/content/entry-model.ts
+function collectionNames() {
+  return Object.keys(projectState?.projectConfig?.content ?? {});
+}
+function entryCollection(name) {
+  const info = collectionInfo(name);
+  if (!info) {
+    return null;
+  }
+  if (/\.[a-z\d]+$/i.test(info.dir)) {
+    return null;
+  }
+  return {
+    def: info.def,
+    dir: info.dir,
+    ext: info.ext,
+    name: info.name,
+    schema: info.def.schema ?? null
+  };
+}
+function entryCollections() {
+  return collectionNames().map((name) => entryCollection(name)).filter((collection) => collection !== null);
+}
+function collectionOfPath(path) {
+  const matched = findContentTypeSchema(path ?? null, projectState?.projectConfig);
+  return matched ? entryCollection(matched.name) : null;
+}
+function cloneDefault(value) {
+  if (value === null || typeof value !== "object") {
+    return value;
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+function emptyForField(field) {
+  if (typeof field.$ref === "string") {
+    return "";
+  }
+  switch (field.type) {
+    case "boolean": {
+      return false;
+    }
+    case "integer":
+    case "number": {
+      return 0;
+    }
+    case "array": {
+      return [];
+    }
+    case "object": {
+      return seedEntry(field);
+    }
+    default: {
+      return "";
+    }
+  }
+}
+function seedEntry(schema) {
+  const properties = schema?.properties;
+  if (!properties) {
+    return {};
+  }
+  const required = new Set(Array.isArray(schema?.required) ? schema.required : []);
+  const seed = {};
+  for (const [name, field] of Object.entries(properties)) {
+    if (field.default !== undefined) {
+      seed[name] = cloneDefault(field.default);
+    } else if (required.has(name)) {
+      seed[name] = emptyForField(field);
+    }
+  }
+  return seed;
+}
+function missingRequired(schema, value) {
+  const required = Array.isArray(schema?.required) ? schema.required : [];
+  return required.filter((name) => value[name] === undefined);
+}
+
+// src/recent-projects.ts
+var STORAGE_KEY = "jx-studio-recent-projects";
+var FILES_STORAGE_KEY = "jx-studio-recent-files";
+var MAX_RECENT = 8;
+var MAX_RECENT_FILES = 10;
+var cache = [];
+function backend() {
+  if (!hasPlatform()) {
+    return null;
+  }
+  const platform = getPlatform();
+  return platform.getRecentProjects && platform.saveRecentProjects ? platform : null;
+}
+function loadFromLocalStorage() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+function currentList() {
+  return backend() ? cache : loadFromLocalStorage();
+}
+function commit(list) {
+  cache = list;
+  const store = backend();
+  if (store) {
+    store.saveRecentProjects(list);
+  } else {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+    } catch {}
+  }
+}
+async function hydrateRecentProjects() {
+  const store = backend();
+  if (!store) {
+    return;
+  }
+  try {
+    cache = await store.getRecentProjects();
+  } catch {
+    cache = [];
+  }
+}
+function getRecentProjects() {
+  return currentList().toSorted((a, b) => b.timestamp - a.timestamp);
+}
+function addRecentProject(name, root) {
+  const projects = currentList().filter((p) => p.root !== root);
+  projects.unshift({ name, root, timestamp: now() });
+  if (projects.length > MAX_RECENT) {
+    projects.length = MAX_RECENT;
+  }
+  commit(projects);
+}
+function removeRecentProject(root) {
+  commit(currentList().filter((p) => p.root !== root));
+}
+function clearRecentProjects() {
+  cache = [];
+  const store = backend();
+  if (store) {
+    store.saveRecentProjects([]);
+  } else {
+    localStorage.removeItem(STORAGE_KEY);
+  }
+}
+function loadRecentFiles() {
+  try {
+    const raw = localStorage.getItem(FILES_STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+function getRecentFiles(root) {
+  const all = loadRecentFiles().toSorted((a, b) => b.timestamp - a.timestamp);
+  return root == null ? all : all.filter((f) => f.root === root);
+}
+function trackRecentFile(file) {
+  const all = loadRecentFiles().filter((f) => !(f.root === file.root && f.path === file.path));
+  all.unshift({ name: file.name, path: file.path, root: file.root, timestamp: now() });
+  const perRoot = new Map;
+  const kept = [];
+  for (const f of all.toSorted((a, b) => b.timestamp - a.timestamp)) {
+    const n = (perRoot.get(f.root) ?? 0) + 1;
+    perRoot.set(f.root, n);
+    if (n <= MAX_RECENT_FILES) {
+      kept.push(f);
+    }
+  }
+  localStorage.setItem(FILES_STORAGE_KEY, JSON.stringify(kept));
+}
+
+// src/files/files.ts
+var fileIconMap = {
+  "sp-icon-document": html`<sp-icon-document></sp-icon-document>`,
+  "sp-icon-file-code": html`<sp-icon-file-code></sp-icon-file-code>`,
+  "sp-icon-file-txt": html`<sp-icon-file-txt></sp-icon-file-txt>`,
+  "sp-icon-folder": html`<sp-icon-folder></sp-icon-folder>`,
+  "sp-icon-folder-open": html`<sp-icon-folder-open></sp-icon-folder-open>`,
+  "sp-icon-image": html`<sp-icon-image></sp-icon-image>`
+};
+async function loadDirectory(dirPath) {
+  if (!projectState) {
+    return;
+  }
+  try {
+    const platform = getPlatform();
+    const entries = await platform.listDirectory(dirPath);
+    projectState.dirs.set(dirPath, entries);
+  } catch {
+    projectState.dirs.set(dirPath, []);
+  }
+}
+async function loadProject() {
+  try {
+    const platform = getPlatform();
+    const result = await platform.probeRootProject();
+    if (!result) {
+      return;
+    }
+    const { meta, info } = result;
+    refreshFormats();
+    loadFormats();
+    refreshExtensionUi(platform);
+    setProjectState({
+      dirs: new Map,
+      expanded: new Set,
+      isSiteProject: info.isSiteProject,
+      name: info.isSiteProject ? info.projectConfig?.name || meta.name : meta.name,
+      projectConfig: (info.isSiteProject ? info.projectConfig : null) || null,
+      projectDirs: info.directories || [],
+      projectRoot: ".",
+      root: meta.root,
+      searchQuery: "",
+      selectedPath: null
+    });
+    if (info.isSiteProject) {
+      setWorkspaceProject(meta.root || ".", info.projectConfig || null);
+    }
+    if (info.isSiteProject) {
+      addRecentProject(requireProjectState().name, meta.root);
+      await autoSyncProjectOnOpen();
+      await ensureDependenciesInstalled();
+      await loadDirectory(".");
+      await loadComponentRegistry();
+      await openLastSessionOrHome();
+      maybePromptJxsuiteUpdate(meta.root);
+    }
+  } catch {}
+}
+async function openProject({
+  renderLeftPanel
+}) {
+  try {
+    const platform = getPlatform();
+    const result = await platform.openProject();
+    if (!result) {
+      return false;
+    }
+    const { config, handle } = result;
+    replaceAllTabs({
+      document: { children: [], tagName: "div" },
+      id: "initial"
+    });
+    refreshFormats();
+    loadFormats();
+    refreshExtensionUi(platform);
+    setProjectState({
+      ...projectState,
+      dirs: new Map,
+      expanded: new Set,
+      isSiteProject: true,
+      name: config.name || handle.name,
+      projectConfig: config,
+      projectRoot: handle.root,
+      searchQuery: "",
+      selectedPath: null
+    });
+    setWorkspaceProject(handle.root, config);
+    await autoSyncProjectOnOpen();
+    await ensureDependenciesInstalled();
+    await loadDirectory(".");
+    await loadComponentRegistry();
+    const conventionalDirs = new Set([
+      "pages",
+      "layouts",
+      "components",
+      "content",
+      "data",
+      "public",
+      "styles"
+    ]);
+    const entries = requireProjectState().dirs.get(".") || [];
+    const foundDirs = [];
+    for (const e of entries) {
+      if (e.type === "directory" && conventionalDirs.has(e.name)) {
+        foundDirs.push(e.name);
+        requireProjectState().expanded.add(e.path || e.name);
+        await loadDirectory(e.path || e.name);
+      }
+    }
+    requireProjectState().projectDirs = foundDirs;
+    cleanupGitPanel();
+    resetProjectShell();
+    setActivityTab("files");
+    addRecentProject(requireProjectState().name, requireProjectState().projectRoot);
+    renderLeftPanel();
+    await openLastSessionOrHome();
+    maybePromptJxsuiteUpdate(requireProjectState().projectRoot);
+    return true;
+  } catch (error) {
+    notify.error("Could not open the project.", {
+      detail: errorMessage(error),
+      source: "Open Project"
+    });
+    return false;
+  }
+}
+async function initProjectRepo(root) {
+  const platform = getPlatform();
+  if (platform.createDestination !== "path") {
+    return false;
+  }
+  try {
+    await platform.activate(root);
+    const status = await platform.gitStatus();
+    if (status.isRepo) {
+      return false;
+    }
+    await platform.gitInit();
+    notify.success("Initialized a git repository for this project.");
+    return true;
+  } catch (error) {
+    notify.warn("Could not initialize a git repository — the project itself was written.", {
+      detail: errorMessage(error),
+      source: "Source Control"
+    });
+    return false;
+  }
+}
+async function findHomePage() {
+  await loadFormats();
+  const exts = [...documentExtensions("page"), ".json"];
+  let entries;
+  try {
+    entries = await getPlatform().listDirectory("pages");
+  } catch {
+    return null;
+  }
+  const files = new Set(entries.filter((e) => e.type === "file").map((e) => e.name));
+  for (const ext of exts) {
+    if (files.has(`index${ext}`)) {
+      return `pages/index${ext}`;
+    }
+  }
+  return null;
+}
+async function openHomePage() {
+  const home = await findHomePage();
+  if (home) {
+    await openFileInTab(home);
+  }
+}
+async function openLastSessionOrHome() {
+  const session = persistedSession(workspace.projectRoot);
+  markSessionRestored(workspace.projectRoot);
+  if (session) {
+    const opened = await restoreSession(session, {
+      ensureSecondPane: () => {
+        receivingPane();
+      },
+      openFile: (path, paneId) => openFileInTab(path, { focus: false, paneId })
+    });
+    if (opened > 0) {
+      return true;
+    }
+  }
+  await openHomePage();
+  return false;
+}
+function fileTypeIconTpl(name, type) {
+  let tag;
+  if (type === "directory") {
+    tag = projectState?.expanded?.has(name) ? "sp-icon-folder-open" : "sp-icon-folder";
+  } else {
+    const ext = name.split(".").pop()?.toLowerCase();
+    switch (ext) {
+      case "json": {
+        tag = "sp-icon-file-code";
+        break;
+      }
+      case "md": {
+        tag = "sp-icon-file-txt";
+        break;
+      }
+      case "js":
+      case "ts": {
+        tag = "sp-icon-file-code";
+        break;
+      }
+      case "css": {
+        tag = "sp-icon-file-code";
+        break;
+      }
+      default: {
+        tag = ext && isImage(ext) ? "sp-icon-image" : "sp-icon-document";
+        break;
+      }
+    }
+  }
+  return fileIconMap[tag] || fileIconMap["sp-icon-document"];
+}
+function renderFilesTemplate({
+  openProject: openProjectFn,
+  openFileFromTree: openFileFn,
+  renderLeftPanel
+}) {
+  if (!projectState) {
+    return html`<div class="file-tree-empty">No project loaded</div>`;
+  }
+  if (!projectState.isSiteProject && projectState.projectRoot === ".") {
+    return html`<div class="file-tree-empty">
+      <p style="margin:0 0 12px">Open a project folder to get started.</p>
+      <sp-button variant="accent" size="s" @click=${openProjectFn}>Open Project</sp-button>
+    </div>`;
+  }
+  return html`
+    ${projectState.isSiteProject ? html`
+            <div class="project-header">
+              <span class="project-name"
+                >${projectState.projectConfig?.name || projectState.name}</span
+              >
+            </div>
+          ` : nothing}
+    <div class="files-toolbar">
+      <sp-action-group size="xs" compact quiet>
+        <sp-action-button
+          size="xs"
+          label="New File"
+          @click=${() => createNewFile(".", renderLeftPanel)}
+        >
+          <sp-icon-add slot="icon"></sp-icon-add>
+        </sp-action-button>
+        <sp-action-button
+          size="xs"
+          label="Refresh"
+          @click=${async () => {
+    requireProjectState().dirs.clear();
+    await loadDirectory(".");
+    for (const dir of requireProjectState().expanded) {
+      await loadDirectory(dir);
+    }
+    renderLeftPanel();
+  }}
+        >
+          <sp-icon-refresh slot="icon"></sp-icon-refresh>
+        </sp-action-button>
+      </sp-action-group>
+      <sp-search
+        size="s"
+        quiet
+        placeholder="Filter files…"
+        value=${requireProjectState().searchQuery}
+        @input=${(e) => {
+    requireProjectState().searchQuery = e.target.value;
+    renderLeftPanel();
+  }}
+        @submit=${(e) => e.preventDefault()}
+      ></sp-search>
+    </div>
+    <div
+      class="file-tree"
+      role="tree"
+      aria-label="Project files"
+      ${ref((el) => {
+    if (el) {
+      afterFileTreeRender(el);
+    }
+  })}
+    >
+      ${fileTreeBodyTemplate({ openFileFn, renderLeftPanel })}
+    </div>
+  `;
+}
+var FILE_ROW_HEIGHT = 24;
+var _fileRows = [];
+var _fileList = null;
+var _fileWatch = null;
+var _filesRerender = null;
+var _pendingFocusPath = null;
+function fileRowHeight() {
+  return measuredRowHeight(_fileList, ".file-tree-item", FILE_ROW_HEIGHT);
+}
+function collectFileRows(dirPath, depth, rows, ctx, i18n) {
+  const entries = requireProjectState().dirs.get(dirPath);
+  if (!entries) {
+    loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
+    rows.push({
+      depth,
+      expanded: false,
+      key: `loading:${dirPath}`,
+      loading: true,
+      name: "Loading…",
+      path: dirPath,
+      posInSet: 1,
+      setSize: 1,
+      type: "file"
+    });
+    return;
+  }
+  const sorted = [...entries].toSorted((a, b) => {
+    if (a.type === "directory" && b.type !== "directory") {
+      return -1;
+    }
+    if (a.type !== "directory" && b.type === "directory") {
+      return 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+  const query = requireProjectState().searchQuery.toLowerCase();
+  const filtered = query ? sorted.filter((e) => e.type === "directory" || e.name.toLowerCase().includes(query)) : sorted;
+  for (const [index, entry] of filtered.entries()) {
+    const isDir = entry.type === "directory";
+    const isExpanded = isDir && requireProjectState().expanded.has(entry.path);
+    rows.push({
+      depth,
+      expanded: isExpanded,
+      key: entry.path,
+      loading: false,
+      name: entry.name,
+      path: entry.path,
+      locale: localeOfPath(entry.path, i18n) ?? undefined,
+      posInSet: index + 1,
+      setSize: filtered.length,
+      type: entry.type
+    });
+    if (isExpanded) {
+      collectFileRows(entry.path, depth + 1, rows, ctx, i18n);
+    }
+  }
+}
+function fileIndexOfPath(path) {
+  return path === undefined ? -1 : _fileRows.findIndex((row) => !row.loading && row.path === path);
+}
+function fileStep(index, step) {
+  for (let i = index + step;i >= 0 && i < _fileRows.length; i += step) {
+    if (!_fileRows[i].loading) {
+      return i;
+    }
+  }
+  return -1;
+}
+function fileWindowChanged() {
+  if (_fileList?.isConnected !== true || _fileList.querySelector(".file-tree-item.dragging")) {
+    return;
+  }
+  queueMicrotask(() => _filesRerender?.());
+}
+function adoptFileTree(tree) {
+  _fileList = tree;
+  _fileWatch = watchListWindow(_fileWatch, tree, {
+    count: () => _fileRows.length,
+    onChange: fileWindowChanged,
+    rowHeight: fileRowHeight
+  });
+  const wanted = _pendingFocusPath;
+  if (wanted !== null) {
+    _pendingFocusPath = null;
+    fileRowElement(tree, wanted)?.focus();
+  }
+}
+function afterFileTreeRender(tree) {
+  queueMicrotask(() => adoptFileTree(tree));
+}
+function fileRowElement(tree, path) {
+  return tree.querySelector(`.file-tree-item[data-path="${CSS.escape(path)}"]`);
+}
+function fileTreeBodyTemplate(ctx) {
+  _filesRerender = ctx.renderLeftPanel;
+  _fileRows = [];
+  const { i18n } = resolveI18n(projectState?.projectConfig ?? {});
+  collectFileRows(".", 0, _fileRows, ctx, i18n);
+  const range = listWindow(_fileList, { count: _fileRows.length, rowHeight: fileRowHeight() });
+  const wanted = Math.max(0, fileIndexOfPath(requireProjectState().selectedPath ?? undefined));
+  const tabStop = Math.min(Math.max(wanted, range.start), Math.max(range.start, range.end - 1));
+  const slice = _fileRows.slice(range.start, range.end).map((row, offset) => ({ row, tabStop: range.start + offset === tabStop }));
+  return html`
+    <div style="height:${range.padTop}px" aria-hidden="true"></div>
+    ${repeat(slice, (entry) => entry.row.key, (entry) => fileRowTemplate(entry.row, entry.tabStop, ctx))}
+    <div style="height:${range.padBottom}px" aria-hidden="true"></div>
+  `;
+}
+function fileRowTemplate(row, tabStop, ctx) {
+  if (row.loading) {
+    return html`<div
+      class="file-tree-item"
+      style="padding-left:${8 + row.depth * 16}px;color:var(--fg-dim);font-style:italic"
+    >
+      Loading…
+    </div>`;
+  }
+  const isDir = row.type === "directory";
+  return html`
+    <div
+      class=${classMap({
+    "file-tree-item": true,
+    selected: requireProjectState().selectedPath === row.path
+  })}
+      style="padding-left:${8 + row.depth * 16}px"
+      role="treeitem"
+      aria-level=${row.depth + 1}
+      aria-posinset=${row.posInSet}
+      aria-setsize=${row.setSize}
+      tabindex=${tabStop ? "0" : "-1"}
+      data-path=${row.path}
+      data-type=${row.type}
+      aria-expanded=${isDir ? String(row.expanded) : nothing}
+      @click=${async (e) => {
+    e.stopPropagation();
+    if (isDir) {
+      await toggleTreeDirectory(row.path);
+      ctx.renderLeftPanel();
+    } else {
+      ctx.openFileFn(row.path);
+    }
+  }}
+      @contextmenu=${(e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    showFileContextMenu(e, { name: row.name, path: row.path, type: row.type }, ctx);
+  }}
+    >
+      ${isDir ? html`<span class="file-tree-toggle">${row.expanded ? "▼" : "▶"}</span>` : html`<span class="file-tree-toggle empty"> </span>`}
+      <span class="file-tree-icon">${fileTypeIconTpl(row.path, row.type)}</span>
+      <span class="file-tree-name">${row.name}</span>
+      ${row.locale === undefined ? nothing : html`<span class="file-tree-locale">${localeLabel(row.locale)}</span>`}
+    </div>
+  `;
+}
+async function toggleTreeDirectory(path) {
+  const state = requireProjectState();
+  if (state.expanded.has(path)) {
+    state.expanded.delete(path);
+    return;
+  }
+  state.expanded.add(path);
+  if (!state.dirs.has(path)) {
+    await loadDirectory(path);
+  }
+}
+var _keyboardTrees = new WeakSet;
+function setupTreeKeyboard(tree) {
+  if (_keyboardTrees.has(tree)) {
+    return;
+  }
+  _keyboardTrees.add(tree);
+  tree.addEventListener("keydown", (e) => {
+    onFileTreeKeydown(e, tree);
+  });
+}
+function onFileTreeKeydown(e, tree) {
+  const focused = tree.querySelector(".file-tree-item:focus");
+  if (!focused) {
+    return;
+  }
+  let handled = true;
+  switch (e.key) {
+    case "ArrowDown":
+    case "ArrowUp": {
+      const from = fileIndexOfPath(focused.dataset.path);
+      focusFileRow(tree, fileStep(from, e.key === "ArrowDown" ? 1 : -1));
+      break;
+    }
+    case "ArrowRight": {
+      const path = collapsedDirectoryAt(focused);
+      if (path !== null) {
+        toggleTreeDirectory(path).then(() => _filesRerender?.());
+      }
+      break;
+    }
+    case "ArrowLeft": {
+      const path = expandedDirectoryAt(focused);
+      if (path !== null) {
+        requireProjectState().expanded.delete(path);
+        _filesRerender?.();
+      }
+      break;
+    }
+    case "Enter": {
+      focused.click();
+      break;
+    }
+    default: {
+      handled = false;
+    }
+  }
+  if (handled) {
+    e.preventDefault();
+  }
+}
+function collapsedDirectoryAt(row) {
+  const { path, type } = row.dataset;
+  return type === "directory" && path !== undefined && !requireProjectState().expanded.has(path) ? path : null;
+}
+function expandedDirectoryAt(row) {
+  const { path, type } = row.dataset;
+  return type === "directory" && path !== undefined && requireProjectState().expanded.has(path) ? path : null;
+}
+function focusFileRow(tree, index) {
+  const row = _fileRows[index];
+  if (!row) {
+    return;
+  }
+  const el = fileRowElement(tree, row.path);
+  if (el) {
+    el.focus();
+    return;
+  }
+  if (revealListRow(_fileList, index, fileRowHeight())) {
+    _pendingFocusPath = row.path;
+    _filesRerender?.();
+  }
+}
+var _fileTreeDndCleanups = [];
+function isFileDrag(e) {
+  return [...e.dataTransfer?.types ?? []].includes("Files");
+}
+function registerFileDropTarget(element, dir, activeClass, renderLeftPanel) {
+  const onDragOver = (e) => {
+    if (!isFileDrag(e)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = "copy";
+    }
+    element.classList.add(activeClass);
+  };
+  const onDragLeave = () => element.classList.remove(activeClass);
+  const onDrop = (e) => {
+    element.classList.remove(activeClass);
+    const files = e.dataTransfer?.files;
+    if (!files?.length) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    uploadFilesToDir(files, dir, renderLeftPanel);
+  };
+  element.addEventListener("dragover", onDragOver);
+  element.addEventListener("dragleave", onDragLeave);
+  element.addEventListener("drop", onDrop);
+  return () => {
+    element.removeEventListener("dragover", onDragOver);
+    element.removeEventListener("dragleave", onDragLeave);
+    element.removeEventListener("drop", onDrop);
+  };
+}
+async function uploadFilesToDir(files, dir, renderLeftPanel) {
+  const uploaded = await uploadAssets([...files], { dir });
+  if (uploaded.length === 0) {
+    return;
+  }
+  if (dir !== ".") {
+    requireProjectState().expanded.add(dir);
+  }
+  renderLeftPanel();
+}
+function pickAndUploadTo(dir, renderLeftPanel) {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.multiple = true;
+  input.accept = UPLOAD_ACCEPT;
+  input.addEventListener("change", () => {
+    if (input.files?.length) {
+      uploadFilesToDir(input.files, dir, renderLeftPanel);
+    }
+  });
+  input.click();
+}
+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");
+    for (const row of items) {
+      const { path } = row.dataset;
+      const { type } = row.dataset;
+      if (!path) {
+        continue;
+      }
+      const cleanups = [
+        draggable({
+          element: row,
+          getInitialData() {
+            return { entryType: type, path, type: "file-tree" };
+          },
+          onDragStart() {
+            row.classList.add("dragging");
+          },
+          onDrop() {
+            row.classList.remove("dragging");
+          }
+        }),
+        registerFileDropTarget(row, type === "directory" ? path : parentDir(path), "drag-over", renderLeftPanel)
+      ];
+      if (type === "directory") {
+        cleanups.push(dropTargetForElements({
+          canDrop({ source }) {
+            if (source.data.type !== "file-tree") {
+              return false;
+            }
+            const srcPath = source.data.path;
+            if (srcPath === path) {
+              return false;
+            }
+            if (srcPath.startsWith(`${path}/`)) {
+              return false;
+            }
+            const srcParent = parentDir(srcPath);
+            if (srcParent === path) {
+              return false;
+            }
+            return true;
+          },
+          element: row,
+          getData() {
+            return { targetDir: path, type: "file-tree-target" };
+          },
+          onDrag() {
+            if (!row.classList.contains("drag-over")) {
+              row.classList.add("drag-over");
+            }
+          },
+          onDragEnter() {
+            row.classList.add("drag-over");
+          },
+          onDragLeave() {
+            row.classList.remove("drag-over");
+          },
+          onDrop() {
+            row.classList.remove("drag-over");
+          }
+        }));
+      }
+      _fileTreeDndCleanups.push(combine(...cleanups));
+    }
+    const rootCleanup = dropTargetForElements({
+      canDrop({ source }) {
+        if (source.data.type !== "file-tree") {
+          return false;
+        }
+        const srcPath = source.data.path;
+        return parentDir(srcPath) !== ".";
+      },
+      element: tree,
+      getData() {
+        return { targetDir: ".", type: "file-tree-target" };
+      },
+      onDragEnter() {
+        tree.classList.add("drag-over-root");
+      },
+      onDragLeave() {
+        tree.classList.remove("drag-over-root");
+      },
+      onDrop() {
+        tree.classList.remove("drag-over-root");
+      }
+    });
+    _fileTreeDndCleanups.push(rootCleanup, registerFileDropTarget(tree, ".", "drag-over-root", renderLeftPanel));
+    const monitorCleanup = monitorForElements({
+      onDrop({ source, location: location2 }) {
+        const [target] = location2.current.dropTargets;
+        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 platform = getPlatform();
+  markLocalMutation(oldPath, newPath);
+  try {
+    const report = await platform.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);
+    }
+    reloadRewrittenTabs(report, newPath);
+    renderLeftPanel();
+    notify.success(`Moved to ${newPath}`);
+  } catch (error) {
+    notify.error(`Could not move ${oldPath}.`, {
+      detail: errorMessage(error),
+      path: oldPath,
+      source: "Files"
+    });
+  }
+}
+function parentDir(path) {
+  const normalized = path.replaceAll("\\", "/");
+  const lastSlash = normalized.lastIndexOf("/");
+  return lastSlash === -1 ? "." : normalized.slice(0, lastSlash);
+}
+var _fileCtxHandle = null;
+function dismissFileContextMenu() {
+  if (_fileCtxHandle) {
+    _fileCtxHandle.dismiss();
+    _fileCtxHandle = null;
+  }
+}
+function fileRowFacts(entry) {
+  const facts = {};
+  if (entry.type === "directory") {
+    const collection = collectionDirs().find(({ dir }) => entry.path === dir || entry.path.endsWith(`/${dir}`));
+    if (collection) {
+      facts.name = collection.name;
+    }
+  } else if (collectionOfPath(entry.path)) {
+    facts.path = entry.path;
+  }
+  return facts;
+}
+function placedFileItems(entry) {
+  const registry = activeRegistry();
+  if (!registry) {
+    return [];
+  }
+  const facts = fileRowFacts(entry);
+  const items = [];
+  for (const command of registry.forPlacement("context/file")) {
+    const schema = command.args;
+    if (!(schema?.required ?? []).every((key) => (key in facts))) {
+      continue;
+    }
+    const args = {};
+    for (const key of Object.keys(schema?.properties ?? {})) {
+      if (key in facts) {
+        args[key] = facts[key];
+      }
+    }
+    const reason = registry.disabledReason(command.id);
+    items.push(reason === undefined ? {
+      action: () => {
+        registry.run(command.id, args);
+      },
+      label: command.title
+    } : { disabled: true, label: command.title, reason });
+  }
+  return items;
+}
+function showFileContextMenu(e, entry, ctx) {
+  e.preventDefault();
+  dismissFileContextMenu();
+  const isDir = entry.type === "directory";
+  const items = [];
+  if (!isDir) {
+    items.push({ action: () => ctx.openFileFn(entry.path), label: "Open" });
+  }
+  if (isDir) {
+    items.push({
+      action: () => createNewFile(entry.path, ctx.renderLeftPanel),
+      label: "New File…"
+    }, {
+      action: () => pickAndUploadTo(entry.path, ctx.renderLeftPanel),
+      label: "Upload Files…"
+    });
+    if (entry.path === "pages" || entry.path.endsWith("/pages")) {
+      items.push({
+        action: () => {
+          openPagesGrid();
+        },
+        label: "Edit Pages in Grid"
+      });
+    }
+  }
+  items.push(...placedFileItems(entry), { label: "—" }, {
+    action: () => renameFile(entry, ctx.renderLeftPanel),
+    label: "Rename…"
+  }, {
+    action: () => deleteFile(entry, ctx.renderLeftPanel),
+    danger: true,
+    label: "Delete"
+  });
+  let x = e.clientX;
+  let y = e.clientY;
+  _fileCtxHandle = renderPopover(html`<sp-popover
+      open
+      style="position:fixed;z-index:10000;left:${x}px;top:${y}px"
+      ${ref((el) => {
+    if (!el) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const popover = el;
+      const menuRect = rectOf(popover);
+      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 === "—" ? html`<sp-menu-divider></sp-menu-divider>` : html`<sp-menu-item
+                style=${item.danger ? "color: var(--danger)" : ""}
+                ?disabled=${item.disabled === true}
+                aria-disabled=${item.disabled === true ? "true" : "false"}
+                @click=${() => {
+    if (item.disabled === true) {
+      return;
+    }
+    dismissFileContextMenu();
+    item.action?.();
+  }}
+                >${item.label}${item.reason ? html`<span slot="description">Needs ${item.reason}</span>` : nothing}</sp-menu-item
+              >`)}
+      </sp-menu>
+    </sp-popover>`, {
+    dismissOnOutsideClick: true,
+    onDismiss: () => {
+      _fileCtxHandle = null;
+    }
+  });
+}
+var BLANK_DOCUMENT = JSON.stringify({ children: [{ children: [], tagName: "p" }], tagName: "div" }, null, 2);
+async function createFileIn(request) {
+  const { dir, ext, source = "Files" } = request;
+  await loadFormats();
+  let taken = new Set;
+  try {
+    const listing = await getPlatform().listDirectory(dir);
+    taken = new Set(listing.map((entry) => entry.name));
+  } catch {}
+  const fileNameFor = (input) => ext === undefined ? input.trim() : `${input.trim().toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^a-z\d-]/g, "")}${ext}`;
+  const entered = await showPromptDialog(request.title ?? "New File", {
+    confirmLabel: "Create",
+    message: dir === "." ? "Creating in the project root." : `Creating in ${dir}/`,
+    ...request.suggestedName === undefined ? {} : { placeholder: request.suggestedName },
+    select: "stem",
+    validate: (value) => {
+      if (!value.trim()) {
+        return ext === undefined ? "Enter a file name." : "Enter a name.";
+      }
+      const candidate = fileNameFor(value);
+      if (!candidate || candidate === ext) {
+        return "Enter at least one letter or number.";
+      }
+      return taken.has(candidate) ? `${candidate} already exists in ${dir}/.` : "";
+    },
+    value: request.suggestedName ?? "untitled.json"
+  });
+  if (!entered) {
+    return null;
+  }
+  const fileName = fileNameFor(entered);
+  const path = dir === "." ? fileName : `${dir}/${fileName}`;
+  markLocalMutation(path);
+  const format = formatForPath(fileName);
+  const content = request.content ?? format?.studio?.newFileTemplate ?? (format ? "" : BLANK_DOCUMENT);
+  try {
+    await getPlatform().writeFile(path, content);
+    await loadDirectory(dir);
+    notify.success(`Created ${path}`);
+    return path;
+  } catch (error) {
+    notify.error(`Could not create ${path}.`, {
+      detail: errorMessage(error),
+      path,
+      source
+    });
+    return null;
+  }
+}
+async function createNewFile(dirPath, renderLeftPanel) {
+  const created = await createFileIn({ dir: dirPath, suggestedName: "untitled.json" });
+  if (created !== null) {
+    renderLeftPanel();
+  }
+}
+async function showRenameFileDialog(currentName, path) {
+  const message = await renamePromptMessage(path);
+  return showPromptDialog("Rename", {
+    confirmLabel: "Rename",
+    ...message === undefined ? {} : { message },
+    select: "stem",
+    validate: (v) => v.trim() ? "" : "Enter a file name.",
+    value: currentName
+  });
+}
+function renameStatus(newName, report) {
+  const refs = report.references;
+  const tagNote = report.tag ? `; tag → <${report.tag.to}> (${report.tag.refsUpdated})` : "";
+  if (refs && refs.refsUpdated > 0) {
+    return `Renamed to ${newName}; updated ${refs.refsUpdated} reference(s) in ${refs.filesChanged} file(s)${tagNote}`;
+  }
+  if (tagNote) {
+    return `Renamed to ${newName}${tagNote}`;
+  }
+  return `Renamed to ${newName}`;
+}
+function reloadRewrittenTabs(report, skipPath) {
+  for (const f of report.references?.files ?? []) {
+    if (f.path !== skipPath && workspace.tabs.has(f.path)) {
+      reloadFileInTab(f.path);
+    }
+  }
+}
+async function renameFile(entry, renderLeftPanel) {
+  const newName = await showRenameFileDialog(entry.name, entry.path);
+  if (!newName || newName === entry.name) {
+    return;
+  }
+  const entryPath = entry.path.replaceAll("\\", "/");
+  const parentDirPath = entryPath.includes("/") ? entryPath.slice(0, entryPath.lastIndexOf("/")) : ".";
+  const newPath = parentDirPath === "." ? newName : `${parentDirPath}/${newName}`;
+  markLocalMutation(entry.path, newPath);
+  try {
+    const platform = getPlatform();
+    const report = await platform.renameFile(entry.path, newPath);
+    invalidateUsages();
+    await loadDirectory(parentDirPath);
+    if (requireProjectState().selectedPath === entry.path) {
+      requireProjectState().selectedPath = newPath;
+    }
+    if (workspace.tabs.has(entry.path)) {
+      renameTab(entry.path, newPath, newPath);
+    }
+    reloadRewrittenTabs(report, newPath);
+    renderLeftPanel();
+    notify.success(renameStatus(newName, report));
+  } catch (error) {
+    notify.error(`Could not rename ${entry.name}.`, {
+      detail: errorMessage(error),
+      path: entry.path,
+      source: "Files"
+    });
+  }
+}
+async function deleteFile(entry, renderLeftPanel) {
+  const confirmed = await confirmFileDelete(entry);
+  if (!confirmed) {
+    return;
+  }
+  try {
+    const platform = getPlatform();
+    markLocalMutation(entry.path);
+    await platform.deleteFile(entry.path);
+    invalidateUsages();
+    const delPath = entry.path.replaceAll("\\", "/");
+    const parentDirPath = delPath.includes("/") ? delPath.slice(0, delPath.lastIndexOf("/")) : ".";
+    await loadDirectory(parentDirPath);
+    if (requireProjectState().selectedPath === entry.path) {
+      requireProjectState().selectedPath = null;
+    }
+    renderLeftPanel();
+    notify.success(`Deleted ${entry.name}`);
+  } catch (error) {
+    notify.error(`Could not delete ${entry.name}.`, {
+      detail: errorMessage(error),
+      path: entry.path,
+      source: "Files"
+    });
+  }
+}
+function revealOpenTab(tabId, opts) {
+  const wanted = opts.paneId;
+  const holder = paneOfTab(tabId);
+  if (wanted !== undefined && holder && holder.id !== wanted) {
+    if (holder.activeTabId === tabId) {
+      return;
+    }
+    moveTabToPane(tabId, wanted);
+  }
+  activateTab(tabId, { focus: opts.focus !== false });
+}
+async function openFileInTab(path, opts = {}) {
+  const follows = opts.focus !== false;
+  for (const [id, tab] of workspace.tabs.entries()) {
+    if (tab.documentPath === path) {
+      revealOpenTab(id, opts);
+      if (follows) {
+        requireProjectState().selectedPath = path;
+      }
+      return;
+    }
+  }
+  if (path.toLowerCase().endsWith(".csv")) {
+    try {
+      await openCsvGridTab(path);
+      requireProjectState().selectedPath = path;
+      trackRecentFile({
+        name: path.split("/").pop() || path,
+        path,
+        root: requireProjectState().projectRoot
+      });
+    } catch (error) {
+      notify.error(`Could not open ${path}.`, {
+        detail: errorMessage(error),
+        path,
+        source: "Open File"
+      });
+    }
+    return;
+  }
+  const platform = getPlatform();
+  try {
+    const content = await platform.readFile(path);
+    if (!content) {
+      return;
+    }
+    await loadFormats();
+    let document2;
+    let frontmatter;
+    const format = formatForPath(path);
+    if (format) {
+      const result = await parseSourceForPath(path, content);
+      ({ document: document2 } = result);
+      ({ frontmatter } = result);
+    } else if (path.endsWith(".json")) {
+      document2 = JSON.parse(content);
+    } else {
+      throw noFormatError(path);
+    }
+    const id = path;
+    openTab({
+      id,
+      documentPath: path,
+      document: document2,
+      ...frontmatter != null && { frontmatter },
+      sourceFormat: format?.name ?? null,
+      ...opts.paneId !== undefined && { paneId: opts.paneId },
+      ...opts.preview === true && { preview: true },
+      ...opts.focus === false && { focus: false }
+    });
+    if (follows) {
+      requireProjectState().selectedPath = path;
+    }
+    trackRecentFile({
+      name: path.split("/").pop() || path,
+      path,
+      root: requireProjectState().projectRoot
+    });
+  } catch (error) {
+    notify.error(`Could not open ${path}.`, {
+      detail: errorMessage(error),
+      path,
+      source: "Open File"
+    });
+  }
+}
+async function openFileInPane(paneId, path) {
+  await openFileInTab(path, { focus: false, paneId, preview: true });
+}
+function reloadCleanTab(path) {
+  if (isCollabPath(path)) {
+    return;
+  }
+  for (const [, tab] of workspace.tabs.entries()) {
+    if (tab.documentPath === path && !tab.doc.dirty) {
+      reloadFileInTab(path);
+      return;
+    }
+  }
+}
+async function reloadFileInTab(path) {
+  for (const [, tab] of workspace.tabs.entries()) {
+    if (tab.documentPath === path) {
+      const platform = getPlatform();
+      try {
+        const content = await platform.readFile(path);
+        if (!content) {
+          return;
+        }
+        await loadFormats();
+        if (formatForPath(path)) {
+          const { document: document2, frontmatter } = await parseSourceForPath(path, content);
+          tab.doc.document = document2;
+          tab.doc.content.frontmatter = frontmatter;
+        } else if (path.endsWith(".json")) {
+          tab.doc.document = JSON.parse(content);
+        }
+        tab.doc.dirty = false;
+      } catch (error) {
+        notify.error(`Could not reload ${path} after it changed on disk.`, {
+          detail: errorMessage(error),
+          key: `reload:${path}`,
+          path,
+          source: "Files"
+        });
+      }
+      return;
+    }
+  }
+}
+function registerFilesPanel() {
+  registerPanel({
+    id: "files",
+    title: "Files",
+    level: "project",
+    dock: "navigator",
+    icon: "sp-icon-folder",
+    render: (ctx) => ctx.deps.renderFilesTemplate(),
+    afterRender: (ctx, host) => {
+      const tree = host.querySelector(".file-tree");
+      if (tree) {
+        ctx.deps.setupTreeKeyboard(tree);
+      }
+      ctx.deps.registerFileTreeDnD({ renderLeftPanel: ctx.rerender });
+    }
+  });
+}
+
+export { ensureDependenciesInstalled, entryCollection, entryCollections, collectionOfPath, seedEntry, missingRequired, hydrateRecentProjects, getRecentProjects, addRecentProject, removeRecentProject, clearRecentProjects, getRecentFiles, trackRecentFile, loadDirectory, loadProject, openProject, initProjectRepo, findHomePage, openHomePage, openLastSessionOrHome, renderFilesTemplate, FILE_ROW_HEIGHT, setupTreeKeyboard, isFileDrag, uploadFilesToDir, pickAndUploadTo, registerFileTreeDnD, createFileIn, openFileInTab, openFileInPane, reloadCleanTab, reloadFileInTab, registerFilesPanel };
+
+//# debugId=FB716457707AF69D64756E2164756E21
+//# sourceMappingURL=studio-94m77tgk.js.map