@jxsuite/studio 0.37.1 → 1.1.0

package/src/settings/settings-modal.ts

@@ -2,41 +2,129 @@
 /**
  * Settings modal — site-wide project settings (CSS variables, definitions, content types, head,
  * general). Modeled after VS Code / Obsidian settings panels: left sidebar nav + right content
- * area.
+ * area. Sections come from a registry: built-ins register at module init, and extensions add
+ * descriptor-contributed sections through `registerSettingsSection`.
  */
 
 import { html } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { ref } from "lit-html/directives/ref.js";
 import { renderDefsEditor } from "./defs-editor";
-import { renderContentTypesEditor } from "./content-types-editor";
 import { renderCssVarsEditor } from "./css-vars-editor";
 import { renderHeadEditor } from "./head-editor";
 import { renderGeneralSettings } from "./general-settings";
 import { renderDependenciesEditor } from "./dependencies-editor";
 import { openModal } from "../ui/layers";
 
+// ─── Section registry ─────────────────────────────────────────────────────────
+
+/** A settings-modal section: nav entry plus a renderer for the content area. */
+export interface SettingsSection {
+  key: string;
+  label: string;
+  /** Nav icon name (reserved for future nav treatments). */
+  icon?: string | undefined;
+  /** Sort position — lower orders render higher in the nav. */
+  order: number;
+  render: (container: HTMLElement) => void;
+}
+
+const sectionRegistry = new Map<string, SettingsSection>();
+
+/**
+ * Register (or replace) a settings section. Extensions use this hook to contribute
+ * descriptor-driven sections; built-ins register below at module init.
+ *
+ * @param {SettingsSection} section
+ */
+export function registerSettingsSection(section: SettingsSection): void {
+  sectionRegistry.set(section.key, section);
+}
+
+/**
+ * Remove a registered section — used when a descriptor-contributed section's extension is disabled
+ * (see ./extension-sections). Built-ins are never unregistered.
+ *
+ * @param {string} key
+ */
+export function unregisterSettingsSection(key: string): void {
+  sectionRegistry.delete(key);
+  if (_activeSection === key) {
+    _activeSection = "general";
+  }
+}
+
+/** Registered sections sorted by order (registration order breaks ties). */
+function sortedSections(): SettingsSection[] {
+  return [...sectionRegistry.values()].toSorted((a, b) => a.order - b.order);
+}
+
+// Built-in sections — orders preserve the historical display order
+registerSettingsSection({
+  icon: "sp-icon-properties",
+  key: "general",
+  label: "General",
+  order: 10,
+  render: renderGeneralSettings,
+});
+registerSettingsSection({
+  icon: "sp-icon-file-single-web-page",
+  key: "head",
+  label: "Head",
+  order: 20,
+  render: renderHeadEditor,
+});
+registerSettingsSection({
+  icon: "sp-icon-brush",
+  key: "cssVars",
+  label: "CSS Variables",
+  order: 30,
+  render: renderCssVarsEditor,
+});
+registerSettingsSection({
+  icon: "sp-icon-data",
+  key: "definitions",
+  label: "Definitions",
+  order: 40,
+  render: renderDefsEditor,
+});
+// Content Types is no longer a built-in: @jxsuite/parser contributes it (order 50) through its
+// Content class descriptor's $studio.settings block, registered via ./extension-sections.
+registerSettingsSection({
+  icon: "sp-icon-box",
+  key: "dependencies",
+  label: "Dependencies",
+  order: 60,
+  render: renderDependenciesEditor,
+});
+
+// ─── Modal state ──────────────────────────────────────────────────────────────
+
 let _handle: ReturnType<typeof openModal> | null = null;
 
 let _activeSection = "general";
 
 let _contentEl: HTMLElement | null = null;
 
-const sections = [
-  { icon: "sp-icon-properties", key: "general", label: "General" },
-  { icon: "sp-icon-file-single-web-page", key: "head", label: "Head" },
-  { icon: "sp-icon-brush", key: "cssVars", label: "CSS Variables" },
-  { icon: "sp-icon-data", key: "definitions", label: "Definitions" },
-  { icon: "sp-icon-view-grid", key: "contentTypes", label: "Content Types" },
-  { icon: "sp-icon-box", key: "dependencies", label: "Dependencies" },
-];
-
 export function openSettingsModal() {
   if (_handle) {
     return;
   }
   _activeSection = "general";
   renderModal();
+  // Refresh descriptor-contributed sections (cached payloads make this cheap) and rerender the
+  // Nav once they land. Lazy import breaks the settings-modal ↔ extension-sections module cycle.
+  void import("./extension-sections")
+    .then(async ({ syncExtensionSettingsSections }) => {
+      await syncExtensionSettingsSections();
+      if (_handle) {
+        renderModal();
+        renderActiveSection();
+      }
+    })
+    .catch(() => {
+      // Contributed sections are optional — the built-ins render regardless.
+    });
 }
 
 export function closeSettingsModal() {
@@ -73,7 +161,7 @@ function renderModal() {
       </div>
       <div class="settings-modal-body">
         <nav class="settings-modal-nav">
-          ${sections.map(
+          ${sortedSections().map(
             (s) => html`
               <button
                 class=${classMap({
@@ -111,34 +199,5 @@ function renderActiveSection() {
   if (!_handle || !_contentEl) {
     return;
   }
-
-  switch (_activeSection) {
-    case "general": {
-      renderGeneralSettings(_contentEl);
-      break;
-    }
-    case "head": {
-      renderHeadEditor(_contentEl);
-      break;
-    }
-    case "cssVars": {
-      renderCssVarsEditor(_contentEl);
-      break;
-    }
-    case "definitions": {
-      renderDefsEditor(_contentEl);
-      break;
-    }
-    case "contentTypes": {
-      renderContentTypesEditor(_contentEl);
-      break;
-    }
-    case "dependencies": {
-      renderDependenciesEditor(_contentEl);
-      break;
-    }
-    default: {
-      break;
-    }
-  }
+  sectionRegistry.get(_activeSection)?.render(_contentEl);
 }

package/src/site-context.ts

@@ -8,6 +8,7 @@
 
 import { projectState, requireProjectState, setProjectState } from "./store";
 import { getPlatform } from "./platform";
+import { setWorkspaceProject, workspace } from "./workspace/workspace";
 
 import type {
   JxElement,
@@ -258,7 +259,9 @@ function fillSlots(
 }
 
 /**
- * Update the project's project.json with a partial patch and persist to disk.
+ * Update the project's project.json with a partial patch and persist to disk. A patch touching
+ * `extensions` invalidates the format/extensions caches and refreshes the editor's per-project
+ * schemas plus the contributed settings sections — the enabled-extension surface just changed.
  *
  * @param {Partial<ProjectConfig>} patch - Fields to merge into the current projectConfig
  */
@@ -270,4 +273,12 @@ export async function updateSiteConfig(patch: Partial<ProjectConfig>) {
   } as ProjectConfig;
   await platform.writeFile("project.json", JSON.stringify(config, null, 2));
   setProjectState({ ...requireProjectState(), projectConfig: config });
+  setWorkspaceProject(workspace.projectRoot, config);
+  if ("extensions" in patch) {
+    const { loadFormats, refreshExtensionUi, refreshFormats } =
+      await import("./format/format-host");
+    refreshFormats();
+    void loadFormats();
+    refreshExtensionUi(platform);
+  }
 }

package/src/store.ts

@@ -37,16 +37,20 @@ export let canvasWrap = null as unknown as HTMLElement;
 export let activityBar = null as unknown as HTMLElement;
 export let leftPanel = null as unknown as HTMLElement;
 export let rightPanel = null as unknown as HTMLElement;
+export let chatPanelEl = null as unknown as HTMLElement;
 export let toolbarEl = null as unknown as HTMLElement;
 export let statusbarEl = null as unknown as HTMLElement;
+export let frontmatterPanelEl = null as unknown as HTMLElement;
 
 export function initShellRefs() {
   canvasWrap = document.querySelector("#canvas-wrap") as HTMLElement;
   activityBar = document.querySelector("#activity-bar") as HTMLElement;
   leftPanel = document.querySelector("#left-panel") as HTMLElement;
   rightPanel = document.querySelector("#right-panel") as HTMLElement;
+  chatPanelEl = document.querySelector("#chat-panel") as HTMLElement;
   toolbarEl = document.querySelector("#toolbar") as HTMLElement;
   statusbarEl = document.querySelector("#statusbar") as HTMLElement;
+  frontmatterPanelEl = document.querySelector("#frontmatter-panel") as HTMLElement;
 }
 
 // ─── Shared containers (mutated in place by owner modules) ───────────────────

package/src/studio.ts

@@ -11,6 +11,7 @@ import { errorMessage } from "@jxsuite/schema/parse";
 
 import {
   canvasWrap,
+  chatPanelEl,
   getNodeAtPath,
   initShellRefs,
   projectState,
@@ -23,14 +24,20 @@ import {
   updateUi,
 } from "./store";
 
-import { activeTab, closeAllTabs, openTab } from "./workspace/workspace";
+import {
+  activeTab,
+  closeAllTabs,
+  openTab,
+  setWorkspaceProject,
+  workspace,
+} from "./workspace/workspace";
 import { mutateUpdateDef, mutateUpdateProperty, transactDoc } from "./tabs/transact";
 import { effect } from "./reactivity";
 
 import { view } from "./view";
 
 import { isEditing } from "./editor/inline-edit";
-import { applyTransform, initCanvasUtils, positionZoomIndicator } from "./canvas/canvas-utils";
+import { applyTransform, initCanvasUtils } from "./canvas/canvas-utils";
 import {
   initCanvasRender,
   renderCanvas,
@@ -63,6 +70,7 @@ import {
   documentExtensions,
   formatForPath,
   loadFormats,
+  refreshExtensionUi,
   refreshFormats,
 } from "./format/format-host";
 import {
@@ -110,12 +118,17 @@ import { cloneRepository, renderGitPanel } from "./panels/git-panel";
 // By Bun's bundler despite sideEffects declarations in Spectrum's package.json.
 import { components as _swc } from "./ui/spectrum";
 import "./ui/panel-resize.js";
-import { initLayers } from "./ui/layers";
+// Built-in schema-form controls (schema-builder, secret) register on import
+import "./ui/form-controls.js";
+import { initLayers, showSaveDiscardDialog } from "./ui/layers";
 import { initShortcuts } from "./editor/shortcuts";
 import { renderActivityBar, mount as mountActivityBar } from "./panels/activity-bar";
 import * as toolbarPanel from "./panels/toolbar";
 import * as overlaysPanel from "./panels/overlays";
+import * as frontmatterPanelMod from "./panels/frontmatter-panel";
 import * as rightPanelMod from "./panels/right-panel";
+import * as chatPanelMod from "./panels/chat-panel";
+import { setProjectAdopter } from "./services/project-adoption";
 import * as leftPanelMod from "./panels/left-panel";
 import * as tabStrip from "./panels/tab-strip";
 import * as tabBar from "./panels/tab-bar";
@@ -124,6 +137,7 @@ import { registerLayersDnD, registerComponentsDnD, registerElementsDnD } from ".
 import { registerCanvasDndBridge } from "./panels/canvas-dnd-bridge";
 import { defaultDef } from "./panels/shared";
 import { registerFunctionCompletions } from "./panels/editors";
+import { closeFormulaWorkspace } from "./panels/formula-workspace";
 import {
   initBlockActionBar,
   isEditChromeTarget,
@@ -131,12 +145,15 @@ import {
 } from "./panels/block-action-bar";
 import { initCssData } from "./panels/style-utils";
 import { initQuickSearch } from "./panels/quick-search";
+import { hydrateAccountStatus } from "./account-status";
 import { hydrateProjectList } from "./project-list";
 import { addRecentProject, hydrateRecentProjects, removeRecentProject } from "./recent-projects";
 import { hydrateSettings } from "./services/settings-store";
 import { initWelcome } from "./panels/welcome-screen";
+import { openAddRepoModal } from "./new-project/add-repo-modal";
 import { openNewProjectModal } from "./new-project/new-project-modal";
 import type { DocumentStackEntry, GitDiffState } from "./types";
+import type { Tab } from "./tabs/tab";
 import type { JxPath } from "./state";
 import type { JxMutableNode, ProjectConfig } from "@jxsuite/schema/types";
 
@@ -218,19 +235,41 @@ async function navigateToComponent(componentPath: string) {
   }
 }
 
+/**
+ * Leaving a drilled-in component discards its edits (the pop restores the parent). Because saving
+ * is explicit, prompt when the child is dirty: Save writes it, Discard drops it, Cancel stays.
+ * Returns false to abort navigation.
+ *
+ * @param {Tab} tab
+ */
+async function confirmLeaveDirtyChild(tab: Tab): Promise<boolean> {
+  if (!tab.doc.dirty || !tab.documentPath) {
+    return true;
+  }
+  const name = tab.documentPath.split("/").pop() || "component";
+  const choice = await showSaveDiscardDialog("Unsaved Changes", `"${name}" has unsaved changes.`);
+  if (choice === "cancel") {
+    return false;
+  }
+  if (choice === "save") {
+    try {
+      await getPlatform().writeFile(tab.documentPath, await serializeDocument(tab));
+    } catch (error) {
+      statusMessage(`Save error: ${(error as Error).message}`);
+      return false;
+    }
+  }
+  // "discard": leave without writing — the child's edits are dropped with the popped frame.
+  return true;
+}
+
 async function navigateBack() {
   const tab = activeTab.value;
   if (!tab?.session.documentStack || tab.session.documentStack.length === 0) {
     return;
   }
-  if (tab.doc.dirty && tab.documentPath) {
-    try {
-      const platform = getPlatform();
-      await platform.writeFile(tab.documentPath, await serializeDocument(tab));
-    } catch (error) {
-      const err = error as Error;
-      statusMessage(`Save error: ${err.message}`);
-    }
+  if (!(await confirmLeaveDirtyChild(tab))) {
+    return;
   }
 
   // Pop the stack
@@ -257,14 +296,8 @@ async function navigateToLevel(targetIndex: number) {
   if (!stack || targetIndex < 0 || targetIndex >= stack.length) {
     return;
   }
-  if (tab.doc.dirty && tab.documentPath) {
-    try {
-      const platform = getPlatform();
-      await platform.writeFile(tab.documentPath, await serializeDocument(tab));
-    } catch (error) {
-      const err = error as Error;
-      statusMessage(`Save error: ${err.message}`);
-    }
+  if (!(await confirmLeaveDirtyChild(tab))) {
+    return;
   }
 
   const frame = stack[targetIndex] as DocumentStackEntry;
@@ -388,6 +421,7 @@ initQuickSearch({ openRecentProject: (root: string) => openRecentProject(root) }
 tabStrip.mount(document.querySelector("#tab-strip") as HTMLElement);
 
 tabBar.mount(document.querySelector("#tab-bar") as HTMLElement, {
+  closeFormulaWorkspace: () => closeFormulaWorkspace(),
   closeFunctionEditor: () => closeFunctionEditor(),
   exportFile,
   getCanvasMode,
@@ -437,6 +471,26 @@ document.addEventListener(
   true,
 );
 
+// Unsaved-changes guard: saving is explicit (no idle autosave), so warn before the window unloads
+// While any open tab has unsaved edits. For collab tabs, `dirty` reflects the room-level unsaved
+// State; closing loses in-memory edits that were never flushed to disk.
+export function hasUnsavedTabs(): boolean {
+  for (const tab of workspace.tabs.values()) {
+    if (tab.doc.dirty) {
+      return true;
+    }
+  }
+  return false;
+}
+
+window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
+  if (hasUnsavedTabs()) {
+    e.preventDefault();
+    // Legacy browsers require a truthy returnValue to trigger the native confirm prompt.
+    e.returnValue = "";
+  }
+});
+
 initCanvasUtils({
   getCanvasMode,
   getZoom: () => activeTab.value?.session.ui.zoom ?? 1,
@@ -471,6 +525,16 @@ initCanvasRender({
 });
 
 initWelcome({
+  addExistingRepo: async () => {
+    const result = await openAddRepoModal();
+    if (result) {
+      // The catalogue gained an entry; refresh it before navigating into the project.
+      void hydrateProjectList().then(() => {
+        render();
+      });
+      void openRecentProject(result.root);
+    }
+  },
   cloneRepository: () => cloneRepository({ openRecentProject }),
   openNewProject: async () => {
     const result = await openNewProjectModal();
@@ -503,10 +567,12 @@ effect(() => {
   if (tab) {
     void tab.doc.mode;
     void tab.session.ui.canvasMode;
+    void tab.session.ui.editingFormula;
     void tab.session.ui.editingFunction;
     void tab.session.ui.featureToggles;
     void tab.session.ui.preview;
     void tab.session.ui.previewParams;
+    void tab.session.ui.previewProps;
     void tab.session.ui.settingsTab;
     void tab.session.ui.showLayout;
     void tab.session.ui.stylebookTab;
@@ -522,6 +588,15 @@ rightPanelMod.mount({
   renderCanvas: () => renderCanvas(),
 });
 
+// Above-canvas frontmatter Properties panel (content-collection docs, edit mode).
+frontmatterPanelMod.mount({ getCanvasMode });
+
+// The persistent AI chat sidebar — mounts once, available with or without a project/document.
+chatPanelMod.mount(chatPanelEl);
+// The assistant's create_project tool adopts freshly scaffolded projects through the same
+// Flow as the recent-projects list.
+setProjectAdopter(openRecentProject);
+
 leftPanelMod.mount({
   cloneRepository: () => cloneRepository({ openRecentProject }),
   defBadgeLabel,
@@ -553,6 +628,8 @@ leftPanelMod.mount({
 registerRenderer("leftPanel", () => leftPanelMod.render());
 registerRenderer("canvas", () => renderCanvas());
 registerRenderer("rightPanel", () => rightPanelMod.render());
+registerRenderer("frontmatterPanel", () => frontmatterPanelMod.render());
+registerRenderer("chatPanel", () => chatPanelMod.render());
 registerRenderer("overlays", () => overlaysPanel.render());
 setStatusbarRenderer(() => renderStatusbar());
 mountStatusbar();
@@ -652,7 +729,9 @@ if (_projectParam) {
             searchQuery: "",
             selectedPath: siteCtx.fileRelPath || null,
           });
+          setWorkspaceProject(siteCtx.sitePath, siteCtx.projectConfig || null);
 
+          refreshExtensionUi(platform);
           await autoSyncProjectOnOpen();
           await ensureDependenciesInstalled();
           await loadComponentRegistry();
@@ -769,6 +848,13 @@ void hydrateProjectList().then(() => {
   render();
 });
 
+// Hydrate the account onboarding status (GitHub-App installation coverage on cloud), then refresh
+// The welcome screen's install prompt. No-op on platforms without getAccountStatus.
+// oxlint-disable-next-line unicorn/prefer-top-level-await -- deliberate fire-and-forget: hydration must not block initial render
+void hydrateAccountStatus().then(() => {
+  render();
+});
+
 // Hydrate user settings (AI connection parameters) from the backend store, then re-render so
 // Key-gated surfaces (assistant gate, New Project Import/Agent tabs) see the stored key.
 // oxlint-disable-next-line unicorn/prefer-top-level-await -- deliberate fire-and-forget: hydration must not block initial render
@@ -819,6 +905,7 @@ async function openRecentProject(root: string) {
     // "No format class imported" until a reload. Mirrors openProject in files.ts.
     refreshFormats();
     void loadFormats();
+    refreshExtensionUi(platform);
     const content = await platform.readFile("project.json");
     const config = JSON.parse(content) as ProjectConfig;
 
@@ -835,6 +922,7 @@ async function openRecentProject(root: string) {
       searchQuery: "",
       selectedPath: null,
     });
+    setWorkspaceProject(root, config);
 
     await autoSyncProjectOnOpen();
     await ensureDependenciesInstalled();
@@ -894,7 +982,6 @@ initShortcuts(() => ({
   openProject,
   panX: view.panX,
   panY: view.panY,
-  positionZoomIndicator,
   saveFile,
   setPan: (x, y) => {
     view.panX = x;
@@ -902,35 +989,3 @@ initShortcuts(() => ({
     view.needsCenter = false;
   },
 }));
-
-// ─── Autosave (registered as update middleware) ──────────────────────────────
-
-const AUTO_SAVE_DELAY = 2000;
-
-function scheduleAutosave() {
-  const tab = activeTab.value;
-  if (!tab?.fileHandle || !tab.doc.dirty) {
-    return;
-  }
-  if (view.autosaveTimer) {
-    clearTimeout(view.autosaveTimer);
-  }
-  view.autosaveTimer = setTimeout(async () => {
-    const t = activeTab.value;
-    if (t?.fileHandle && t.doc.dirty && "createWritable" in t.fileHandle) {
-      try {
-        const writable = await t.fileHandle.createWritable();
-        await writable.write(await serializeDocument(t));
-        await writable.close();
-        t.doc.dirty = false;
-        statusMessage("Auto-saved");
-      } catch {}
-    }
-  }, AUTO_SAVE_DELAY);
-}
-
-effect(() => {
-  if (activeTab.value?.doc.dirty) {
-    scheduleAutosave();
-  }
-});

package/src/tabs/patch-ops.ts

@@ -40,12 +40,26 @@ export type JxPatchOp =
 export type { JxDocOp } from "@jxsuite/collab/ops";
 export type { JxDocOpPair };
 
+/**
+ * A frontmatter key change, replayable in either direction. Frontmatter lives outside the document
+ * tree (`tab.doc.content.frontmatter`, split off by the format host), so these are studio-local and
+ * never enter the shared `JxDocOp` vocabulary the collab bridge and canvas iframe mirror.
+ * `undefined` means the key was/becomes absent.
+ */
+export interface JxFmOp {
+  field: string;
+  before?: unknown;
+  after?: unknown;
+}
+
 /** Everything recorded during one transaction. */
 export interface TransactionRecord {
   /** Canvas patch ops (path-only) for surgical DOM updates. */
   ops: JxPatchOp[];
   /** Replayable forward/inverse document ops for patch-based history. */
   docOps: JxDocOpPair[];
+  /** Replayable frontmatter key changes (content-mode docs) for history undo/redo. */
+  fmOps: JxFmOp[];
   /**
    * False when some mutation in the transaction could not produce a guaranteed-correct inverse
    * (e.g. a move whose parents' paths interact) — history falls back to a checkpoint snapshot.
@@ -86,12 +100,14 @@ export function getPatchConsumer(): PatchConsumer | null {
 
 let _recording: JxPatchOp[] | null = null;
 let _docOps: JxDocOpPair[] | null = null;
+let _fmOps: JxFmOp[] | null = null;
 let _invertible = true;
 
 /** Begin recording patch ops for a transaction. */
 export function beginRecording() {
   _recording = [];
   _docOps = [];
+  _fmOps = [];
   _invertible = true;
 }
 
@@ -109,6 +125,13 @@ export function recordDocOp(pair: JxDocOpPair) {
   }
 }
 
+/** Record a replayable frontmatter key change. No-op outside a transaction. */
+export function recordFmOp(op: JxFmOp) {
+  if (_fmOps) {
+    _fmOps.push(op);
+  }
+}
+
 /** Mark the current transaction as non-invertible — history stores a checkpoint instead. */
 export function markNonInvertible() {
   _invertible = false;
@@ -121,11 +144,13 @@ export function markNonInvertible() {
 export function endRecording(): TransactionRecord {
   const record: TransactionRecord = {
     docOps: _docOps ?? [],
+    fmOps: _fmOps ?? [],
     invertible: _invertible,
     ops: _recording ?? [],
   };
   _recording = null;
   _docOps = null;
+  _fmOps = null;
   _invertible = true;
   return record;
 }