@jxsuite/studio 0.23.1 → 0.24.0

package/src/settings/{head-editor.js → head-editor.ts}

@@ -1,33 +1,34 @@
+/// <reference lib="dom" />
 /**
  * Head editor — structured form for managing $head entries (link, meta, script, style tags) with
  * Monaco editor for script/style bodies. Also manages project-level Google Fonts.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { projectState } from "../store.js";
-import { updateSiteConfig } from "../site-context.js";
+import { projectState } from "../store";
+import { updateSiteConfig } from "../site-context";
 import {
   isGoogleFontEntry,
   extractFontFamily,
   buildGoogleFontUrl,
   ensureGoogleFontPreconnects,
   cleanupGoogleFontPreconnects,
-} from "../utils/google-fonts.js";
+} from "../utils/google-fonts";
+
+import type { JxHeadEntry, ProjectConfig } from "@jxsuite/schema/types";
 
 /** @param {HTMLElement} container */
-export function renderHeadEditor(container) {
-  const config = /** @type {ProjectConfig} */ (projectState?.projectConfig || {});
-  const headEntries = /** @type {JxHeadEntry[]} */ (config.$head || []);
+export function renderHeadEditor(container: HTMLElement) {
+  const config = (projectState?.projectConfig || {}) as ProjectConfig;
+  const headEntries = config.$head || ([] as JxHeadEntry[]);
 
   const save = () => {
     updateSiteConfig({ $head: headEntries });
   };
 
-  const addEntry = (/** @type {string} */ tag) => {
-    /** @type {Record<string, string | boolean>} */
-    const attrs = {};
-    /** @type {JxHeadEntry} */
-    const entry = { tagName: tag, attributes: attrs };
+  const addEntry = (tag: string) => {
+    const attrs: Record<string, string | boolean> = {};
+    const entry: JxHeadEntry = { tagName: tag, attributes: attrs };
     if (tag === "link") {
       attrs.rel = "stylesheet";
       attrs.href = "";
@@ -44,17 +45,13 @@ export function renderHeadEditor(container) {
     renderHeadEditor(container);
   };
 
-  const removeEntry = (/** @type {number} */ idx) => {
+  const removeEntry = (idx: number) => {
     headEntries.splice(idx, 1);
     save();
     renderHeadEditor(container);
   };
 
-  const updateEntry = (
-    /** @type {number} */ idx,
-    /** @type {string} */ key,
-    /** @type {string} */ val,
-  ) => {
+  const updateEntry = (idx: number, key: string, val: string) => {
     const entry = headEntries[idx];
     if (key === "content" && (entry.tagName === "script" || entry.tagName === "style")) {
       entry.textContent = val;
@@ -82,7 +79,7 @@ export function renderHeadEditor(container) {
 
       <div class="head-entries">
         ${headEntries.map(
-          (/** @type {JxHeadEntry} */ entry, /** @type {number} */ idx) => html`
+          (entry: JxHeadEntry, idx: number) => html`
             <div class="head-entry">
               <div class="head-entry-header">
                 <span class="head-entry-tag">&lt;${entry.tagName}&gt;</span>
@@ -113,13 +110,16 @@ export function renderHeadEditor(container) {
  * @param {number} idx
  * @param {(idx: number, key: string, val: string) => void} updateEntry
  */
-function renderEntryFields(entry, idx, updateEntry) {
-  /** @type {ReturnType<typeof setTimeout> | undefined} */
-  let debounce;
-  const onFieldChange = (/** @type {string} */ key) => (/** @type {Event} */ e) => {
+function renderEntryFields(
+  entry: JxHeadEntry,
+  idx: number,
+  updateEntry: (idx: number, key: string, val: string) => void,
+) {
+  let debounce: ReturnType<typeof setTimeout> | undefined;
+  const onFieldChange = (key: string) => (e: Event) => {
     clearTimeout(debounce);
     debounce = setTimeout(() => {
-      updateEntry(idx, key, /** @type {HTMLInputElement} */ (e.target).value);
+      updateEntry(idx, key, (e.target as HTMLInputElement).value);
     }, 300);
   };
 
@@ -214,10 +214,14 @@ function renderEntryFields(entry, idx, updateEntry) {
  * @param {() => void} save
  * @param {() => void} rerender
  */
-function renderGoogleFontsSection(headEntries, save, rerender) {
+function renderGoogleFontsSection(
+  headEntries: JxHeadEntry[],
+  save: () => void,
+  rerender: () => void,
+) {
   const fontEntries = headEntries.filter((e) => isGoogleFontEntry(e));
 
-  const addFont = (/** @type {string} */ family) => {
+  const addFont = (family: string) => {
     ensureGoogleFontPreconnects(headEntries);
     headEntries.push({
       tagName: "link",
@@ -227,7 +231,7 @@ function renderGoogleFontsSection(headEntries, save, rerender) {
     rerender();
   };
 
-  const removeFont = (/** @type {JxHeadEntry} */ entry) => {
+  const removeFont = (entry: JxHeadEntry) => {
     const idx = headEntries.indexOf(entry);
     if (idx >= 0) headEntries.splice(idx, 1);
     const cleaned = cleanupGoogleFontPreconnects(headEntries);
@@ -261,23 +265,21 @@ function renderGoogleFontsSection(headEntries, save, rerender) {
         size="s"
         placeholder="Font family name…"
         style="flex:1"
-        @keydown=${(/** @type {KeyboardEvent} */ e) => {
+        @keydown=${(e: KeyboardEvent) => {
           if (e.key !== "Enter") return;
-          const family = /** @type {HTMLInputElement} */ (e.target).value?.trim();
+          const family = (e.target as HTMLInputElement).value?.trim();
           if (!family) return;
-          /** @type {HTMLInputElement} */ (e.target).value = "";
+          (e.target as HTMLInputElement).value = "";
           addFont(family);
         }}
       ></sp-textfield>
       <sp-action-button
         size="s"
-        @click=${(/** @type {MouseEvent} */ e) => {
-          const input = /** @type {HTMLElement} */ (e.target)
-            .closest("div")
-            ?.querySelector("sp-textfield");
-          const family = /** @type {HTMLInputElement | null} */ (input)?.value?.trim();
+        @click=${(e: MouseEvent) => {
+          const input = (e.target as HTMLElement).closest("div")?.querySelector("sp-textfield");
+          const family = (input as HTMLInputElement | null)?.value?.trim();
           if (!family) return;
-          /** @type {HTMLInputElement} */ (input).value = "";
+          (input as HTMLInputElement).value = "";
           addFont(family);
         }}
       >

package/src/settings/{schema-field-ui.js → schema-field-ui.ts}

@@ -1,44 +1,42 @@
+/// <reference lib="dom" />
 /**
  * Schema field UI — shared field-card and add-field-dialog templates for the content types and
  * definitions editors.
  */
 
 import { html, nothing } from "lit-html";
+import { camelToLabel } from "../utils/studio-utils";
 
-export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "reference"];
+export interface SchemaProperty {
+  type?: string;
+  properties?: Record<string, SchemaProperty>;
+  required?: string[];
+  items?: SchemaProperty;
+  format?: string;
+  $ref?: string;
+}
 
-export const FORMAT_OPTIONS = ["", "image", "date", "color"];
+export interface FieldHandlers {
+  onDelete: (name: string) => void;
+  onToggleRequired: (name: string) => void;
+  onRename: (oldName: string, newName: string) => void;
+  onChangeType: (name: string, newType: string) => void;
+  onChangeFormat?: (name: string, format: string) => void;
+  onChangeRefTarget?: (name: string, target: string) => void;
+  onAddNestedField?: (
+    parentName: string,
+    state: { name: string; type: string; required: boolean },
+  ) => void;
+  onDeleteNested?: (parentName: string, childName: string) => void;
+  onToggleNestedRequired?: (parentName: string, childName: string) => void;
+  onRenameNested?: (parentName: string, oldChild: string, newChild: string) => void;
+  onChangeNestedType?: (parentName: string, childName: string, newType: string) => void;
+  onChangeNestedFormat?: (parentName: string, childName: string, format: string) => void;
+}
 
-/**
- * @typedef {{
- *   type?: string;
- *   properties?: Record<string, SchemaProperty>;
- *   required?: string[];
- *   items?: SchemaProperty;
- *   format?: string;
- *   $ref?: string;
- * }} SchemaProperty
- */
+export const FIELD_TYPES = ["string", "number", "boolean", "array", "object", "reference"];
 
-/**
- * @typedef {{
- *   onDelete: (name: string) => void;
- *   onToggleRequired: (name: string) => void;
- *   onRename: (oldName: string, newName: string) => void;
- *   onChangeType: (name: string, newType: string) => void;
- *   onChangeFormat?: (name: string, format: string) => void;
- *   onChangeRefTarget?: (name: string, target: string) => void;
- *   onAddNestedField?: (
- *     parentName: string,
- *     state: { name: string; type: string; required: boolean },
- *   ) => void;
- *   onDeleteNested?: (parentName: string, childName: string) => void;
- *   onToggleNestedRequired?: (parentName: string, childName: string) => void;
- *   onRenameNested?: (parentName: string, oldChild: string, newChild: string) => void;
- *   onChangeNestedType?: (parentName: string, childName: string, newType: string) => void;
- *   onChangeNestedFormat?: (parentName: string, childName: string, format: string) => void;
- * }} FieldHandlers
- */
+export const FORMAT_OPTIONS = ["", "image", "date", "color"];
 
 /**
  * Detect the studio field type from a JSON Schema property definition.
@@ -46,7 +44,7 @@ export const FORMAT_OPTIONS = ["", "image", "date", "color"];
  * @param {SchemaProperty} schema
  * @returns {string}
  */
-export function detectFieldType(schema) {
+export function detectFieldType(schema: SchemaProperty) {
   if (schema.$ref) return "reference";
   return schema.type || "string";
 }
@@ -57,7 +55,7 @@ export function detectFieldType(schema) {
  * @param {SchemaProperty} schema
  * @returns {string}
  */
-export function detectFieldFormat(schema) {
+export function detectFieldFormat(schema: SchemaProperty) {
   if (schema.type === "array" && schema.items?.format) return schema.items.format;
   return schema.format || "";
 }
@@ -72,7 +70,13 @@ export function detectFieldFormat(schema) {
  * @param {string[]} [contentTypeNames] - Available content type names for reference target picker
  * @returns {import("lit-html").TemplateResult}
  */
-export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, contentTypeNames = []) {
+export function fieldCardTpl(
+  fieldName: string,
+  fieldSchema: SchemaProperty,
+  isRequired: boolean,
+  handlers: FieldHandlers,
+  contentTypeNames: string[] = [],
+) {
   const type = detectFieldType(fieldSchema);
   const format = detectFieldFormat(fieldSchema);
   const isNested = type === "object";
@@ -84,19 +88,22 @@ export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, conte
   return html`
     <div class="schema-field-card">
       <div class="schema-field-row">
+        <sp-field-label size="s" class="schema-field-label"
+          >${camelToLabel(fieldName)}</sp-field-label
+        >
         <sp-textfield
           size="s"
           quiet
           value=${fieldName}
           class="schema-field-name-input"
-          @change=${(/** @type {Event} */ e) => {
-            const target = /** @type {HTMLInputElement} */ (e.target);
+          @change=${(e: Event) => {
+            const target = e.target as HTMLInputElement;
             const newName = target.value.trim();
             if (newName && newName !== fieldName) handlers.onRename(fieldName, newName);
             else target.value = fieldName;
           }}
-          @keydown=${(/** @type {KeyboardEvent} */ e) => {
-            const target = /** @type {HTMLInputElement} */ (e.target);
+          @keydown=${(e: KeyboardEvent) => {
+            const target = e.target as HTMLInputElement;
             if (e.key === "Enter") target.blur();
             if (e.key === "Escape") {
               target.value = fieldName;
@@ -133,12 +140,9 @@ export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, conte
                 size="s"
                 label="Target"
                 value=${refTarget}
-                @change=${(/** @type {Event} */ e) => {
+                @change=${(e: Event) => {
                   if (handlers.onChangeRefTarget)
-                    handlers.onChangeRefTarget(
-                      fieldName,
-                      /** @type {HTMLInputElement} */ (e.target).value,
-                    );
+                    handlers.onChangeRefTarget(fieldName, (e.target as HTMLInputElement).value);
                 }}
               >
                 ${contentTypeNames.map((n) => html`<sp-menu-item value=${n}>${n}</sp-menu-item>`)}
@@ -177,7 +181,13 @@ export function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, conte
  * @param {FieldHandlers} handlers
  * @returns {import("lit-html").TemplateResult}
  */
-function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, handlers) {
+function nestedFieldCardTpl(
+  parentName: string,
+  childName: string,
+  childSchema: SchemaProperty,
+  isRequired: boolean,
+  handlers: FieldHandlers,
+) {
   const type = detectFieldType(childSchema);
   const format = detectFieldFormat(childSchema);
 
@@ -189,8 +199,8 @@ function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, hand
           quiet
           value=${childName}
           class="schema-field-name-input"
-          @change=${(/** @type {Event} */ e) => {
-            const target = /** @type {HTMLInputElement} */ (e.target);
+          @change=${(e: Event) => {
+            const target = e.target as HTMLInputElement;
             const newName = target.value.trim();
             if (newName && newName !== childName && handlers.onRenameNested) {
               handlers.onRenameNested(parentName, childName, newName);
@@ -198,8 +208,8 @@ function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, hand
               target.value = childName;
             }
           }}
-          @keydown=${(/** @type {KeyboardEvent} */ e) => {
-            const target = /** @type {HTMLInputElement} */ (e.target);
+          @keydown=${(e: KeyboardEvent) => {
+            const target = e.target as HTMLInputElement;
             if (e.key === "Enter") target.blur();
             if (e.key === "Escape") {
               target.value = childName;
@@ -249,21 +259,19 @@ function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, hand
  * @param {FieldHandlers} handlers
  * @returns {import("lit-html").TemplateResult}
  */
-function nestedAddFieldTpl(parentName, handlers) {
+function nestedAddFieldTpl(parentName: string, handlers: FieldHandlers) {
   return html`
     <div class="schema-nested-add">
       <sp-textfield
         size="s"
         placeholder="field name"
         class="schema-nested-add-name"
-        @keydown=${(/** @type {KeyboardEvent} */ e) => {
+        @keydown=${(e: KeyboardEvent) => {
           if (e.key === "Enter") {
-            const target = /** @type {HTMLInputElement} */ (e.target);
+            const target = e.target as HTMLInputElement;
             const row = target.closest(".schema-nested-add");
             const name = target.value.trim();
-            const typePicker = /** @type {HTMLInputElement | null} */ (
-              row?.querySelector("sp-picker")
-            );
+            const typePicker = row?.querySelector("sp-picker") as HTMLInputElement | null;
             const type = typePicker?.value || "string";
             if (name && handlers.onAddNestedField) {
               handlers.onAddNestedField(parentName, { name, type, required: false });
@@ -277,15 +285,13 @@ function nestedAddFieldTpl(parentName, handlers) {
         size="xs"
         quiet
         title="Add nested field"
-        @click=${(/** @type {Event} */ e) => {
-          const target = /** @type {HTMLElement} */ (e.target);
+        @click=${(e: Event) => {
+          const target = e.target as HTMLElement;
           const row = target.closest(".schema-nested-add");
-          const nameInput = /** @type {HTMLInputElement | null} */ (
-            row?.querySelector(".schema-nested-add-name")
-          );
-          const typePicker = /** @type {HTMLInputElement | null} */ (
-            row?.querySelector("sp-picker")
-          );
+          const nameInput = row?.querySelector(
+            ".schema-nested-add-name",
+          ) as HTMLInputElement | null;
+          const typePicker = row?.querySelector("sp-picker") as HTMLInputElement | null;
           const name = nameInput?.value?.trim();
           const type = typePicker?.value || "string";
           if (name && handlers.onAddNestedField) {
@@ -307,14 +313,13 @@ function nestedAddFieldTpl(parentName, handlers) {
  * @param {(type: string) => void} onChange
  * @returns {import("lit-html").TemplateResult}
  */
-export function typePickerTpl(value, onChange) {
+export function typePickerTpl(value: string, onChange: (type: string) => void) {
   return html`
     <sp-picker
       size="s"
       label="Type"
       value=${value}
-      @change=${(/** @type {Event} */ e) =>
-        onChange(/** @type {HTMLInputElement} */ (e.target).value)}
+      @change=${(e: Event) => onChange((e.target as HTMLInputElement).value)}
     >
       ${FIELD_TYPES.map((t) => html`<sp-menu-item value=${t}>${t}</sp-menu-item>`)}
     </sp-picker>
@@ -328,14 +333,13 @@ export function typePickerTpl(value, onChange) {
  * @param {(format: string) => void} onChange
  * @returns {import("lit-html").TemplateResult}
  */
-export function formatPickerTpl(value, onChange) {
+export function formatPickerTpl(value: string, onChange: (format: string) => void) {
   return html`
     <sp-picker
       size="s"
       label="Format"
       value=${value}
-      @change=${(/** @type {Event} */ e) =>
-        onChange(/** @type {HTMLInputElement} */ (e.target).value)}
+      @change=${(e: Event) => onChange((e.target as HTMLInputElement).value)}
     >
       ${FORMAT_OPTIONS.map((f) => html`<sp-menu-item value=${f}>${f || "(none)"}</sp-menu-item>`)}
     </sp-picker>
@@ -353,16 +357,22 @@ export function formatPickerTpl(value, onChange) {
  * }} handlers
  * @returns {import("lit-html").TemplateResult}
  */
-export function addFieldFormTpl(state, handlers) {
+export function addFieldFormTpl(
+  state: { name: string; type: string; format: string; required: boolean },
+  handlers: {
+    onInput: (field: string, value: string | boolean) => void;
+    onConfirm: () => void;
+    onCancel: () => void;
+  },
+) {
   return html`
     <div class="schema-add-field">
       <sp-textfield
         size="s"
         placeholder="Field name"
         .value=${state.name}
-        @input=${(/** @type {Event} */ e) =>
-          handlers.onInput("name", /** @type {HTMLInputElement} */ (e.target).value)}
-        @keydown=${(/** @type {KeyboardEvent} */ e) => {
+        @input=${(e: Event) => handlers.onInput("name", (e.target as HTMLInputElement).value)}
+        @keydown=${(e: KeyboardEvent) => {
           if (e.key === "Enter") handlers.onConfirm();
           if (e.key === "Escape") handlers.onCancel();
         }}
@@ -374,8 +384,8 @@ export function addFieldFormTpl(state, handlers) {
       <sp-switch
         size="s"
         ?checked=${state.required}
-        @change=${(/** @type {Event} */ e) =>
-          handlers.onInput("required", /** @type {HTMLInputElement} */ (e.target).checked)}
+        @change=${(e: Event) =>
+          handlers.onInput("required", (e.target as HTMLInputElement).checked)}
       >
         Required
       </sp-switch>
@@ -392,7 +402,7 @@ export function addFieldFormTpl(state, handlers) {
  * @param {string} [format]
  * @returns {object}
  */
-export function schemaForType(type, format) {
+export function schemaForType(type: string, format?: string) {
   switch (type) {
     case "number":
       return { type: "number" };
@@ -418,7 +428,7 @@ export function schemaForType(type, format) {
  * @param {string} [format]
  * @returns {string}
  */
-export function yamlDefault(type, format) {
+export function yamlDefault(type: string, format?: string) {
   if (format === "date") return new Date().toISOString().split("T")[0];
   if (format === "image") return '""';
   switch (type) {

package/src/settings/{settings-modal.js → settings-modal.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * 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
@@ -7,21 +8,18 @@
 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.js";
-import { renderContentTypesEditor } from "./content-types-editor.js";
-import { renderCssVarsEditor } from "./css-vars-editor.js";
-import { renderHeadEditor } from "./head-editor.js";
-import { renderGeneralSettings } from "./general-settings.js";
-import { openModal } from "../ui/layers.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 { openModal } from "../ui/layers";
 
-/** @type {ReturnType<typeof openModal> | null} */
-let _handle = null;
+let _handle: ReturnType<typeof openModal> | null = null;
 
-/** @type {string} */
-let _activeSection = "general";
+let _activeSection: string = "general";
 
-/** @type {HTMLElement | null} */
-let _contentEl = null;
+let _contentEl: HTMLElement | null = null;
 
 const sections = [
   { key: "general", label: "General", icon: "sp-icon-properties" },
@@ -45,7 +43,7 @@ export function closeSettingsModal() {
 }
 
 function renderModal() {
-  const onNavClick = (/** @type {string} */ key) => {
+  const onNavClick = (key: string) => {
     _activeSection = key;
     renderModal();
     renderActiveSection();
@@ -55,7 +53,7 @@ function renderModal() {
     <sp-underlay open @close=${closeSettingsModal}></sp-underlay>
     <div
       class="settings-modal"
-      @keydown=${(/** @type {KeyboardEvent} */ e) => {
+      @keydown=${(e: KeyboardEvent) => {
         if (e.key === "Escape") closeSettingsModal();
       }}
     >
@@ -80,8 +78,8 @@ function renderModal() {
         </nav>
         <div
           class="settings-modal-content"
-          ${ref((el) => {
-            _contentEl = /** @type {HTMLElement | null} */ (el || null);
+          ${ref((el: Element | undefined) => {
+            _contentEl = (el as HTMLElement) || null;
             if (_contentEl) requestAnimationFrame(() => renderActiveSection());
           })}
         ></div>