@jxsuite/studio 0.37.1 → 1.0.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

@@ -258,7 +258,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 +272,11 @@ export async function updateSiteConfig(patch: Partial<ProjectConfig>) {
   } as ProjectConfig;
   await platform.writeFile("project.json", JSON.stringify(config, null, 2));
   setProjectState({ ...requireProjectState(), projectConfig: config });
+  if ("extensions" in patch) {
+    const { loadFormats, refreshExtensionUi, refreshFormats } =
+      await import("./format/format-host");
+    refreshFormats();
+    void loadFormats();
+    refreshExtensionUi(platform);
+  }
 }

package/src/studio.ts

@@ -63,6 +63,7 @@ import {
   documentExtensions,
   formatForPath,
   loadFormats,
+  refreshExtensionUi,
   refreshFormats,
 } from "./format/format-host";
 import {
@@ -110,6 +111,8 @@ 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";
+// Built-in schema-form controls (schema-builder, secret) register on import
+import "./ui/form-controls.js";
 import { initLayers } from "./ui/layers";
 import { initShortcuts } from "./editor/shortcuts";
 import { renderActivityBar, mount as mountActivityBar } from "./panels/activity-bar";
@@ -131,10 +134,12 @@ 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 { JxPath } from "./state";
@@ -471,6 +476,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();
@@ -653,6 +668,7 @@ if (_projectParam) {
             selectedPath: siteCtx.fileRelPath || null,
           });
 
+          refreshExtensionUi(platform);
           await autoSyncProjectOnOpen();
           await ensureDependenciesInstalled();
           await loadComponentRegistry();
@@ -769,6 +785,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 +842,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;
 

package/src/tabs/transact.ts

@@ -343,7 +343,7 @@ function applyDocOp(tab: Tab, op: JxDocOp) {
         toIndex: op.toIndex,
         toParentPath: op.toParentPath,
       });
-      return;
+      break;
     }
     default: {
       break;

package/src/types.ts

@@ -1,6 +1,11 @@
 /// <reference lib="dom" />
 import type { CollabHandle } from "@jxsuite/collab/provider";
-import type { JxMutableNode, JxPath, ProjectConfig } from "@jxsuite/schema/types";
+import type {
+  ContentTypeSchema,
+  JxMutableNode,
+  JxPath,
+  ProjectConfig,
+} from "@jxsuite/schema/types";
 
 // ─── Wire types (the Studio Backend Protocol) ───────────────────────────────
 /* The request/response shapes every backend serves live in @jxsuite/protocol;
@@ -11,7 +16,16 @@ import type {
   CfConnection,
   CodeServiceResult,
   ComponentMeta,
+  DataConnectionsResponse,
+  DataConnectionTestResult,
+  DataPushResult,
+  DataRowDelete,
+  DataRowInsert,
+  DataRowsQuery,
+  DataRowsResult,
+  DataRowUpdate,
   DirEntry,
+  ExtensionsInfo,
   FsEvent,
   GitBranchesResult,
   GitLogEntry,
@@ -22,8 +36,11 @@ import type {
   PackageInfo,
   PackageOpResult,
   ProjectListEntry,
+  ProjectSchemasResponse,
   RecentProjectEntry,
   RenameResult,
+  SecretsSetRequest,
+  SecretsSetResponse,
   StarterInfo,
 } from "@jxsuite/protocol";
 
@@ -35,8 +52,24 @@ export type {
   CodeServiceResult,
   ComponentMeta,
   ComponentSlotMeta,
+  DataColumnMeta,
+  DataConnectionInfo,
+  DataConnectionsResponse,
+  DataConnectionTestResult,
+  DataConnectorInfo,
+  DataPushRequest,
+  DataPushResult,
+  DataPushStep,
+  DataRowDelete,
+  DataRowInsert,
+  DataRowsQuery,
+  DataRowsResult,
+  DataRowUpdate,
   DirEntry,
   ErrorBody,
+  ExtensionContributionInfo,
+  ExtensionProjectBlock,
+  ExtensionsInfo,
   FsEvent,
   GitBranchesResult,
   GitFileStatus,
@@ -49,12 +82,36 @@ export type {
   PackageInfo,
   PackageOpResult,
   ProjectListEntry,
+  ProjectSchemasResponse,
   PullRequestInfo,
   RecentProjectEntry,
   RenameResult,
+  SecretsListResponse,
+  SecretsSetRequest,
+  SecretsSetResponse,
   StarterInfo,
 } from "@jxsuite/protocol";
 
+/** Repository-access onboarding state returned by `StudioPlatform.getAccountStatus`. */
+export interface AccountStatus {
+  /** GitHub App installations (personal + organization) visible to the signed-in user. */
+  installations: { id: number; account: string | null }[];
+  /** Where to install the App (github.com/apps/<slug>/installations/new), when known. */
+  appInstallUrl?: string;
+}
+
+/** A repository visible to `StudioPlatform.listRepos` (the add-existing-repository picker). */
+export interface RepoInfo {
+  owner: string;
+  name: string;
+  fullName: string;
+  private: boolean;
+  defaultBranch: string;
+  permission: "admin" | "write" | "read" | "none";
+  /** Already recognized as a Jx project (topic-tagged / cataloged). */
+  isJxProject: boolean;
+}
+
 export interface StudioPlatform {
   id: string;
   projectRoot: string;
@@ -126,8 +183,39 @@ export interface StudioPlatform {
   searchFiles: (query: string, extensions?: string[]) => Promise<DirEntry[]>;
   /** List the project's registered format classes (auto-discovered from imports). */
   listFormats?: () => Promise<unknown[]>;
+  /**
+   * List the project's enabled extension packages with their project-section contributions
+   * (specs/extensions.md §9/§9.1) — the formats route's sibling `extensions` payload. Optional:
+   * platforms without it lose descriptor-contributed settings sections.
+   */
+  listExtensions?: () => Promise<ExtensionsInfo[]>;
+  /**
+   * Fetch the project's generated entry schemas (project.schema.json / document.schema.json),
+   * PRE-BUNDLED into self-contained documents for editor registration. Optional: without it the
+   * JSON editor keeps the bundled core schemas.
+   */
+  fetchProjectSchemas?: () => Promise<ProjectSchemasResponse>;
   /** Invoke a format capability (parse/serialize) — { format, action, source?, doc?, options? }. */
   formatAction?: (payload: Record<string, unknown>) => Promise<unknown>;
+  // ─── Data surface + secrets (owner console; specs/extensions.md §13) ────────
+  // Optional as a family: backends without the connector data routes omit them all, and Studio
+  // Hides the data grid and connection/push/test actions. Row CRUD is the ADMIN path — it
+  // Intentionally bypasses table permission rules; the backend boundary is the gate.
+  /** List connector connections with configured state, table names, and provider metadata. */
+  dataConnections?: () => Promise<DataConnectionsResponse>;
+  /** Probe one connection through the backend's connector registry. */
+  dataConnectionTest?: (connection: string) => Promise<DataConnectionTestResult>;
+  /** Additive schema push; `dryRun` compiles the plan without applying it. */
+  dataPush?: (opts?: { connection?: string; dryRun?: boolean }) => Promise<DataPushResult>;
+  /** Page a table's rows with introspected column metadata. */
+  dataRows?: (query: DataRowsQuery) => Promise<DataRowsResult>;
+  dataInsertRow?: (req: DataRowInsert) => Promise<{ row: Record<string, unknown> }>;
+  dataUpdateRow?: (req: DataRowUpdate) => Promise<{ row: Record<string, unknown> }>;
+  dataDeleteRow?: (req: DataRowDelete) => Promise<{ ok: boolean }>;
+  /** Configured secret env-var NAMES — never values. */
+  listSecrets?: () => Promise<string[]>;
+  /** Write/remove secrets in the backend store (.dev.vars locally); names-only response. */
+  setSecrets?: (req: SecretsSetRequest) => Promise<SecretsSetResponse>;
   fetchPluginSchema: (src: string, prototype?: string, base?: string) => Promise<unknown>;
   /**
    * Resolve a class-prototype config through the backend's `/__jx_resolve__` pipeline (with the
@@ -235,6 +323,25 @@ export interface StudioPlatform {
   // ─── Identity & hosting connections (publish surface) ───────────────────────
   /** The signed-in user's identity, when the platform has one (cloud). */
   getUser?: () => Promise<{ login: string; name?: string; avatarUrl?: string } | null>;
+  /**
+   * Repository-access onboarding state: the platform's GitHub App installations visible to this
+   * user and where to install the App. Cloud-only; when the list is empty Studio's welcome screen
+   * prompts the user to install the App (without it, no repos are reachable). Null = unknown (don't
+   * prompt).
+   */
+  getAccountStatus?: () => Promise<AccountStatus | null>;
+  /**
+   * Browse every repository the platform's account link can reach — personal and organization repos
+   * covered by a GitHub App installation on cloud. Backs the "Add Existing Repository" picker;
+   * local platforms omit it (the OS picker / clone flow covers them).
+   */
+  listRepos?: () => Promise<RepoInfo[]>;
+  /**
+   * Adopt an existing repository as a Jx project and return its catalogue root key (openable via
+   * the recent-projects path). Rejects with a structured message when the repository carries no
+   * project.json.
+   */
+  importProject?: (opts: { owner: string; name: string }) => Promise<{ root: string }>;
   /**
    * Open a pull request for the current branch. Cloud platforms implement it against their session;
    * local platforms omit it and Studio falls back to a direct GitHub API call with the user's
@@ -273,6 +380,18 @@ export interface StudioPlatform {
 
 // ─── Studio Types ───────────────────────────────────────────────────────────
 
+/**
+ * A project.json `content` section entry, as the studio consumes it. The parser extension owns the
+ * full shape (its project fragment schema is the validation source of truth); the studio only reads
+ * these fields.
+ */
+export interface ContentSectionEntry {
+  source?: string;
+  format?: string;
+  schema?: ContentTypeSchema;
+  $elements?: unknown[];
+}
+
 export interface CanvasPanel {
   mediaName: string;
   element: HTMLElement;