@jxsuite/studio 0.28.2 → 0.28.4

package/src/types.ts

@@ -1,5 +1,10 @@
 /// <reference lib="dom" />
-import type { JxMutableNode, JxPath, ProjectConfig } from "@jxsuite/schema/types";
+import type {
+  JsonValue as SchemaJsonValue,
+  JxMutableNode,
+  JxPath,
+  ProjectConfig,
+} from "@jxsuite/schema/types";
 
 // ─── Git & Platform Types ───────────────────────────────────────────────────
 
@@ -34,7 +39,7 @@ export interface ComponentMeta {
   tagName: string;
   $id?: string | null;
   path: string;
-  props?: { name: string; type?: string; default?: unknown }[];
+  props?: { name: string; type?: string; default?: JsonValue; [k: string]: unknown }[];
   hasElements?: boolean;
 }
 
@@ -60,12 +65,12 @@ export interface DirEntry {
 export interface StudioPlatform {
   id: string;
   projectRoot: string;
-  activate(root?: string): Promise<void>;
-  openProject(): Promise<{
+  activate: (root?: string) => Promise<void>;
+  openProject: () => Promise<{
     config: ProjectConfig;
     handle: { root: string; name: string; projectConfig: ProjectConfig };
   } | null>;
-  probeRootProject(): Promise<{
+  probeRootProject: () => Promise<{
     meta: { root: string; name: string };
     info: {
       isSiteProject: boolean;
@@ -73,60 +78,60 @@ export interface StudioPlatform {
       directories?: string[];
     };
   } | null>;
-  listDirectory(dir: string): Promise<DirEntry[]>;
-  readFile(path: string): Promise<string>;
-  writeFile(path: string, content: string): Promise<void>;
-  uploadFile(path: string, data: string | File | Blob | ArrayBuffer): Promise<unknown>;
-  deleteFile(path: string): Promise<void>;
-  renameFile(from: string, to: string): Promise<void>;
-  createDirectory(path: string): Promise<void>;
-  discoverComponents(dir?: string): Promise<ComponentMeta[]>;
-  addPackage(name: string): Promise<unknown>;
-  removePackage(name: string): Promise<unknown>;
-  listPackages(): Promise<PackageInfo[]>;
-  codeService(action: string, payload: unknown): Promise<CodeServiceResult | null>;
-  resolveSiteContext(filePath: string): Promise<{
+  listDirectory: (dir: string) => Promise<DirEntry[]>;
+  readFile: (path: string) => Promise<string>;
+  writeFile: (path: string, content: string) => Promise<void>;
+  uploadFile: (path: string, data: string | File | Blob | ArrayBuffer) => Promise<unknown>;
+  deleteFile: (path: string) => Promise<void>;
+  renameFile: (from: string, to: string) => Promise<void>;
+  createDirectory: (path: string) => Promise<void>;
+  discoverComponents: (dir?: string) => Promise<ComponentMeta[]>;
+  addPackage: (name: string) => Promise<unknown>;
+  removePackage: (name: string) => Promise<unknown>;
+  listPackages: () => Promise<PackageInfo[]>;
+  codeService: (action: string, payload: unknown) => Promise<CodeServiceResult | null>;
+  resolveSiteContext: (filePath: string) => Promise<{
     sitePath: string | null;
     projectConfig?: ProjectConfig;
     fileRelPath?: string;
   }>;
-  locateFile(name: string): Promise<string | null>;
-  searchFiles(query: string, extensions?: string[]): Promise<DirEntry[]>;
+  locateFile: (name: string) => Promise<string | null>;
+  searchFiles: (query: string, extensions?: string[]) => Promise<DirEntry[]>;
   /** List the project's registered format classes (auto-discovered from imports). */
-  listFormats?(): Promise<unknown[]>;
+  listFormats?: () => Promise<unknown[]>;
   /** Invoke a format capability (parse/serialize) — { format, action, source?, doc?, options? }. */
-  formatAction?(payload: Record<string, unknown>): Promise<unknown>;
-  fetchPluginSchema(src: string, prototype?: string, base?: string): Promise<unknown>;
-  gitStatus(): Promise<GitStatusResult>;
-  gitBranches(): Promise<GitBranchesResult>;
-  gitLog(limit?: number): Promise<GitLogEntry[]>;
-  gitStage(files: string[]): Promise<void>;
-  gitUnstage(files: string[]): Promise<void>;
-  gitCommit(message: string): Promise<void>;
-  gitPush(opts?: { setUpstream?: boolean }): Promise<void>;
-  gitPull(): Promise<void>;
-  gitFetch(): Promise<void>;
-  gitCheckout(branch: string): Promise<void>;
-  gitCreateBranch(name: string): Promise<void>;
-  gitDiff(path?: string): Promise<string>;
-  gitShow(opts: { path: string; ref?: string }): Promise<string>;
-  gitDiscard(files: string[]): Promise<void>;
-  gitClone?(url: string): Promise<{ ok: boolean; root: string }>;
-  gitInit(): Promise<void>;
-  gitAddRemote(name: string, url: string): Promise<void>;
-  createProject(opts: {
+  formatAction?: (payload: Record<string, unknown>) => Promise<unknown>;
+  fetchPluginSchema: (src: string, prototype?: string, base?: string) => Promise<unknown>;
+  gitStatus: () => Promise<GitStatusResult>;
+  gitBranches: () => Promise<GitBranchesResult>;
+  gitLog: (limit?: number) => Promise<GitLogEntry[]>;
+  gitStage: (files: string[]) => Promise<void>;
+  gitUnstage: (files: string[]) => Promise<void>;
+  gitCommit: (message: string) => Promise<void>;
+  gitPush: (opts?: { setUpstream?: boolean }) => Promise<void>;
+  gitPull: () => Promise<void>;
+  gitFetch: () => Promise<void>;
+  gitCheckout: (branch: string) => Promise<void>;
+  gitCreateBranch: (name: string) => Promise<void>;
+  gitDiff: (path?: string) => Promise<string>;
+  gitShow: (opts: { path: string; ref?: string }) => Promise<string>;
+  gitDiscard: (files: string[]) => Promise<void>;
+  gitClone?: (url: string) => Promise<{ ok: boolean; root: string }>;
+  gitInit: () => Promise<void>;
+  gitAddRemote: (name: string, url: string) => Promise<void>;
+  createProject: (opts: {
     name: string;
     description?: string;
     url?: string;
     adapter?: string;
     directory: string;
-  }): Promise<{ root: string; config: ProjectConfig }>;
-  aiAuthStatus(): Promise<{ authenticated: boolean; error?: string }>;
-  aiCreateSession(opts: { message: string; systemPrompt?: string }): Promise<{ id: string }>;
-  aiSendMessage(id: string, message: string): Promise<void>;
-  aiStreamUrl(id: string): string | Promise<string>;
-  aiStopSession(id: string): Promise<void>;
-  aiDeleteSession(id: string): Promise<void>;
+  }) => Promise<{ root: string; config: ProjectConfig }>;
+  aiAuthStatus: () => Promise<{ authenticated: boolean; error?: string }>;
+  aiCreateSession: (opts: { message: string; systemPrompt?: string }) => Promise<{ id: string }>;
+  aiSendMessage: (id: string, message: string) => Promise<void>;
+  aiStreamUrl: (id: string) => string | Promise<string>;
+  aiStopSession: (id: string) => Promise<void>;
+  aiDeleteSession: (id: string) => Promise<void>;
 }
 
 // ─── Studio Types ───────────────────────────────────────────────────────────
@@ -167,8 +172,8 @@ export interface GitDiffState {
   originalContent: string;
   currentContent: string;
   fileStatus: string;
-  originalDoc?: unknown;
-  currentDoc?: unknown;
+  originalDoc?: JxMutableNode;
+  currentDoc?: JxMutableNode;
   original?: unknown;
 }
 
@@ -191,4 +196,8 @@ export interface ProjectState {
   [key: string]: unknown;
 }
 
-export type JsonValue = string | number | boolean | object | null | undefined;
+/**
+ * A JSON document value, or `undefined` to signal property removal in the mutators. Re-uses the
+ * schema's precise recursive JSON model.
+ */
+export type JsonValue = SchemaJsonValue | undefined;

package/src/ui/button-group.ts

@@ -9,7 +9,7 @@
 import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { abbreviateValue, kebabToLabel } from "../utils/studio-utils";
-import icons from "./icons";
+import { icons } from "./icons";
 
 /**
  * Render a button group widget with optional overflow menu.
@@ -74,8 +74,9 @@ export function renderButtonGroup(
               <sp-popover>
                 <sp-menu
                   @change=${(e: Event) => {
-                    if ((e.target as HTMLInputElement).value)
+                    if ((e.target as HTMLInputElement).value) {
                       onChange((e.target as HTMLInputElement).value);
+                    }
                   }}
                 >
                   <sp-menu-item value="__none__">—</sp-menu-item>

package/src/ui/color-selector.ts

@@ -29,7 +29,9 @@ interface ColorVar {
 /** Extract --color-* CSS custom properties from the effective (site + document) style. */
 function getColorVars() {
   const style = getEffectiveStyle(activeTab.value?.doc.document?.style);
-  if (!style) return [];
+  if (!style) {
+    return [];
+  }
   const vars = [];
   for (const [k, v] of Object.entries(style)) {
     if (k.startsWith("--color") && (typeof v === "string" || typeof v === "number")) {
@@ -49,27 +51,37 @@ function varToLabel(name: string) {
 
 /** Resolve a color value for display — if it's a var() reference, look up the actual color. */
 function resolveColorForDisplay(val: string | number | undefined) {
-  if (!val) return "transparent";
+  if (!val) {
+    return "transparent";
+  }
   const s = String(val);
   const m = s.match(/^var\((--[^)]+)\)$/);
   if (m) {
     const style = getEffectiveStyle(activeTab.value?.doc.document?.style);
     const resolved = style?.[m[1]];
-    if (typeof resolved === "string") return resolved;
+    if (typeof resolved === "string") {
+      return resolved;
+    }
     return "transparent";
   }
   return s;
 }
 
 function safeColor(val: string | number | undefined) {
-  if (!val) return "transparent";
+  if (!val) {
+    return "transparent";
+  }
   return resolveColorForDisplay(val);
 }
 
 /** Normalize a color string to include # prefix for hex values. */
 function normalizeHex(c: string) {
-  if (!c) return c;
-  if (c.startsWith("var(") || c.startsWith("rgb") || c.startsWith("hsl")) return c;
+  if (!c) {
+    return c;
+  }
+  if (c.startsWith("var(") || c.startsWith("rgb") || c.startsWith("hsl")) {
+    return c;
+  }
   return c.replace(/^#?/, "#");
 }
 
@@ -83,9 +95,13 @@ function matchesColorVar(
   value: string | number | undefined,
   colorVars: { name: string; value: string }[],
 ) {
-  if (!value || typeof value !== "string") return null;
+  if (!value || typeof value !== "string") {
+    return null;
+  }
   const m = value.match(/^var\((--[^)]+)\)$/);
-  if (!m) return null;
+  if (!m) {
+    return null;
+  }
   return colorVars.find((cv) => cv.name === m[1]) || null;
 }
 
@@ -94,8 +110,8 @@ function matchesColorVar(
 export class JxColorPopover extends LitElement {
   static properties = {
     color: { type: String },
-    displayColor: { type: String, attribute: false },
     colorVars: { attribute: false },
+    displayColor: { attribute: false, type: String },
   };
 
   declare color: string;
@@ -132,29 +148,31 @@ export class JxColorPopover extends LitElement {
     const color = normalizeHex(String((e.target as HTMLElement & { color: string }).color));
     this.displayColor = color;
     this.color = color;
-    this.dispatchEvent(new CustomEvent("color-change", { detail: color, bubbles: true }));
+    this.dispatchEvent(new CustomEvent("color-change", { bubbles: true, detail: color }));
   }
 
   _handleSlider(e: Event) {
     const color = normalizeHex(String((e.target as HTMLElement & { color: string }).color));
     this.displayColor = color;
     this.color = color;
-    this.dispatchEvent(new CustomEvent("color-change", { detail: color, bubbles: true }));
+    this.dispatchEvent(new CustomEvent("color-change", { bubbles: true, detail: color }));
   }
 
   _handleText(e: Event) {
     const val = (e.target as HTMLInputElement).value.trim();
-    if (!val) return;
+    if (!val) {
+      return;
+    }
     this.displayColor = val;
     this.color = val;
-    this.dispatchEvent(new CustomEvent("color-change", { detail: val, bubbles: true }));
+    this.dispatchEvent(new CustomEvent("color-change", { bubbles: true, detail: val }));
   }
 
   _handleSwatch(e: Event, varName: string) {
     e.stopPropagation();
     const varRef = `var(${varName})`;
     this.color = varRef;
-    this.dispatchEvent(new CustomEvent("color-change", { detail: varRef, bubbles: true }));
+    this.dispatchEvent(new CustomEvent("color-change", { bubbles: true, detail: varRef }));
   }
 
   render() {
@@ -306,5 +324,5 @@ export function renderColorSelector(
 
 /** Whether any color popover is currently open. */
 export function isColorPopoverOpen() {
-  return !!document.querySelector(".style-input-color sp-overlay[open]");
+  return Boolean(document.querySelector(".style-input-color sp-overlay[open]"));
 }