@jxsuite/studio 0.23.1 → 0.24.0

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * CSS Variables editor — form-based editor for managing design tokens. Colors and fonts are NOT
  * media-aware; sizes/spacing are media-aware.
@@ -5,13 +6,15 @@
 
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
-import { projectState } from "../store.js";
-import { updateSiteConfig } from "../site-context.js";
-import { getEffectiveMedia } from "../site-context.js";
-import { friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
+import { projectState } from "../store";
+import { updateSiteConfig } from "../site-context";
+import { getEffectiveMedia } from "../site-context";
+import { friendlyNameToVar, varDisplayName } from "../utils/studio-utils";
+
+import type { JxStyle } from "@jxsuite/schema/types";
 
 /** @param {HTMLElement} container */
-export function renderCssVarsEditor(container) {
+export function renderCssVarsEditor(container: HTMLElement) {
   const config = projectState?.projectConfig || {};
   const rootStyle = config.style || {};
   const media = getEffectiveMedia(config.$media);
@@ -24,7 +27,12 @@ export function renderCssVarsEditor(container) {
    *   other: [string, string | number][];
    * }}
    */
-  const groups = { color: [], font: [], size: [], other: [] };
+  const groups: {
+    color: [string, string | number][];
+    font: [string, string | number][];
+    size: [string, string | number][];
+    other: [string, string | number][];
+  } = { color: [], font: [], size: [], other: [] };
   for (const [k, v] of Object.entries(rootStyle)) {
     if (!k.startsWith("--")) continue;
     if (typeof v !== "string" && typeof v !== "number") continue;
@@ -41,22 +49,18 @@ export function renderCssVarsEditor(container) {
     updateSiteConfig({ style: { ...rootStyle } });
   };
 
-  const updateVar = (/** @type {string} */ name, /** @type {string} */ val) => {
+  const updateVar = (name: string, val: string) => {
     rootStyle[name] = val;
     save();
   };
 
-  const deleteVar = (/** @type {string} */ name) => {
+  const deleteVar = (name: string) => {
     delete rootStyle[name];
     save();
     renderCssVarsEditor(container);
   };
 
-  const addVar = (
-    /** @type {string} */ prefix,
-    /** @type {string} */ friendlyName,
-    /** @type {string} */ val,
-  ) => {
+  const addVar = (prefix: string, friendlyName: string, val: string) => {
     const varName = friendlyNameToVar(friendlyName, prefix);
     if (!varName || !val) return;
     rootStyle[varName] = val;
@@ -82,11 +86,16 @@ export function renderCssVarsEditor(container) {
 
 /**
  * @param {[string, string | number][]} vars
- * @param {Function} updateVar
- * @param {Function} deleteVar
- * @param {Function} addVar
+ * @param {(name: string, val: string) => void} updateVar
+ * @param {(name: string) => void} deleteVar
+ * @param {(prefix: string, friendlyName: string, val: string) => void} addVar
  */
-function renderColorSection(vars, updateVar, deleteVar, addVar) {
+function renderColorSection(
+  vars: [string, string | number][],
+  updateVar: (name: string, val: string) => void,
+  deleteVar: (name: string) => void,
+  addVar: (prefix: string, friendlyName: string, val: string) => void,
+) {
   return html`
     <div class="css-vars-group">
       <h4 class="css-vars-group-title">Colors</h4>
@@ -97,16 +106,14 @@ function renderColorSection(vars, updateVar, deleteVar, addVar) {
               <input
                 type="color"
                 .value=${val && String(val).startsWith("#") ? val : "#007acc"}
-                @input=${(/** @type {Event} */ e) =>
-                  updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
+                @input=${(e: Event) => updateVar(name, (e.target as HTMLInputElement).value)}
               />
             </div>
             <span class="css-var-name">${varDisplayName(name, "--color-")}</span>
             <sp-textfield
               size="s"
               .value=${String(val)}
-              @change=${(/** @type {Event} */ e) =>
-                updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
+              @change=${(e: Event) => updateVar(name, (e.target as HTMLInputElement).value)}
               style="flex:1;max-width:160px"
             ></sp-textfield>
             <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
@@ -122,11 +129,16 @@ function renderColorSection(vars, updateVar, deleteVar, addVar) {
 
 /**
  * @param {[string, string | number][]} vars
- * @param {Function} updateVar
- * @param {Function} deleteVar
- * @param {Function} addVar
+ * @param {(name: string, val: string) => void} updateVar
+ * @param {(name: string) => void} deleteVar
+ * @param {(prefix: string, friendlyName: string, val: string) => void} addVar
  */
-function renderFontSection(vars, updateVar, deleteVar, addVar) {
+function renderFontSection(
+  vars: [string, string | number][],
+  updateVar: (name: string, val: string) => void,
+  deleteVar: (name: string) => void,
+  addVar: (prefix: string, friendlyName: string, val: string) => void,
+) {
   return html`
     <div class="css-vars-group">
       <h4 class="css-vars-group-title">Fonts</h4>
@@ -137,8 +149,7 @@ function renderFontSection(vars, updateVar, deleteVar, addVar) {
             <sp-textfield
               size="s"
               .value=${String(val)}
-              @change=${(/** @type {Event} */ e) =>
-                updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
+              @change=${(e: Event) => updateVar(name, (e.target as HTMLInputElement).value)}
               style="flex:1"
             ></sp-textfield>
             <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
@@ -157,13 +168,20 @@ function renderFontSection(vars, updateVar, deleteVar, addVar) {
 
 /**
  * @param {[string, string | number][]} vars
- * @param {Function} updateVar
- * @param {Function} deleteVar
- * @param {Function} addVar
+ * @param {(name: string, val: string) => void} updateVar
+ * @param {(name: string) => void} deleteVar
+ * @param {(prefix: string, friendlyName: string, val: string) => void} addVar
  * @param {JxStyle} rootStyle
  * @param {string[]} mediaNames
  */
-function renderSizeSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaNames) {
+function renderSizeSection(
+  vars: [string, string | number][],
+  updateVar: (name: string, val: string) => void,
+  deleteVar: (name: string) => void,
+  addVar: (prefix: string, friendlyName: string, val: string) => void,
+  rootStyle: JxStyle,
+  mediaNames: string[],
+) {
   return html`
     <div class="css-vars-group">
       <h4 class="css-vars-group-title">Sizes &amp; Spacing</h4>
@@ -179,8 +197,7 @@ function renderSizeSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaN
             <sp-textfield
               size="s"
               .value=${String(val)}
-              @change=${(/** @type {Event} */ e) =>
-                updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
+              @change=${(e: Event) => updateVar(name, (e.target as HTMLInputElement).value)}
               style="max-width:120px"
             ></sp-textfield>
             <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
@@ -197,13 +214,20 @@ function renderSizeSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaN
 
 /**
  * @param {[string, string | number][]} vars
- * @param {Function} updateVar
- * @param {Function} deleteVar
- * @param {Function} addVar
+ * @param {(name: string, val: string) => void} updateVar
+ * @param {(name: string) => void} deleteVar
+ * @param {(prefix: string, friendlyName: string, val: string) => void} addVar
  * @param {JxStyle} rootStyle
  * @param {string[]} mediaNames
  */
-function renderOtherSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaNames) {
+function renderOtherSection(
+  vars: [string, string | number][],
+  updateVar: (name: string, val: string) => void,
+  deleteVar: (name: string) => void,
+  addVar: (prefix: string, friendlyName: string, val: string) => void,
+  rootStyle: JxStyle,
+  mediaNames: string[],
+) {
   return html`
     <div class="css-vars-group">
       <h4 class="css-vars-group-title">Other</h4>
@@ -214,8 +238,7 @@ function renderOtherSection(vars, updateVar, deleteVar, addVar, rootStyle, media
             <sp-textfield
               size="s"
               .value=${String(val)}
-              @change=${(/** @type {Event} */ e) =>
-                updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
+              @change=${(e: Event) => updateVar(name, (e.target as HTMLInputElement).value)}
               style="flex:1"
             ></sp-textfield>
             <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
@@ -235,7 +258,7 @@ function renderOtherSection(vars, updateVar, deleteVar, addVar, rootStyle, media
  * @param {JxStyle} rootStyle
  * @param {string[]} mediaNames
  */
-function renderMediaOverrides(varName, rootStyle, mediaNames) {
+function renderMediaOverrides(varName: string, rootStyle: JxStyle, mediaNames: string[]) {
   const overrides = [];
   for (const mediaName of mediaNames) {
     const mediaKey = `@${mediaName}`;
@@ -256,10 +279,11 @@ function renderMediaOverrides(varName, rootStyle, mediaNames) {
             <sp-textfield
               size="s"
               .value=${String(o.value)}
-              @change=${(/** @type {Event} */ e) => {
+              @change=${(e: Event) => {
                 if (!rootStyle[`@${o.mediaName}`]) rootStyle[`@${o.mediaName}`] = {};
-                /** @type {Record<string, unknown>} */ (rootStyle[`@${o.mediaName}`])[varName] =
-                  /** @type {HTMLInputElement} */ (e.target).value;
+                (rootStyle[`@${o.mediaName}`] as Record<string, unknown>)[varName] = (
+                  e.target as HTMLInputElement
+                ).value;
                 updateSiteConfig({ style: { ...rootStyle } });
               }}
               style="max-width:120px"
@@ -275,13 +299,16 @@ function renderMediaOverrides(varName, rootStyle, mediaNames) {
  * @param {string} prefix
  * @param {string} placeholder
  * @param {string} valuePlaceholder
- * @param {Function} addVar
+ * @param {(prefix: string, friendlyName: string, val: string) => void} addVar
  */
-function renderAddRow(prefix, placeholder, valuePlaceholder, addVar) {
-  /** @type {HTMLInputElement | null} */
-  let nameEl = null;
-  /** @type {HTMLInputElement | null} */
-  let valEl = null;
+function renderAddRow(
+  prefix: string,
+  placeholder: string,
+  valuePlaceholder: string,
+  addVar: (prefix: string, friendlyName: string, val: string) => void,
+) {
+  let nameEl: HTMLInputElement | null = null;
+  let valEl: HTMLInputElement | null = null;
 
   return html`
     <div class="css-var-add-row">
@@ -289,14 +316,14 @@ function renderAddRow(prefix, placeholder, valuePlaceholder, addVar) {
         size="s"
         placeholder=${placeholder}
         ${ref((el) => {
-          if (el) nameEl = /** @type {HTMLInputElement} */ (el);
+          if (el) nameEl = el as HTMLInputElement;
         })}
       ></sp-textfield>
       <sp-textfield
         size="s"
         placeholder=${valuePlaceholder}
         ${ref((el) => {
-          if (el) valEl = /** @type {HTMLInputElement} */ (el);
+          if (el) valEl = el as HTMLInputElement;
         })}
       ></sp-textfield>
       <sp-action-button

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Definitions Editor — visual editor for project-level $defs (JSON Schema type definitions).
  *
@@ -7,19 +8,15 @@
  */
 
 import { html, render as litRender } from "lit-html";
-import { getPlatform } from "../platform.js";
-import { projectState } from "../store.js";
-import {
-  fieldCardTpl,
-  addFieldFormTpl,
-  schemaForType,
-  detectFieldFormat,
-} from "./schema-field-ui.js";
+import { getPlatform } from "../platform";
+import { projectState } from "../store";
+import { fieldCardTpl, addFieldFormTpl, schemaForType, detectFieldFormat } from "./schema-field-ui";
+
+import type { ProjectConfig, ContentTypeSchema } from "@jxsuite/schema/types";
 
 // ─── Module state ─────────────────────────────────────────────────────────────
 
-/** @type {string | null} */
-let selectedDef = null;
+let selectedDef: string | null = null;
 let showAddField = false;
 let newFieldState = { name: "", type: "string", format: "", required: false };
 let showNewDef = false;
@@ -29,22 +26,22 @@ let newDefName = "";
 
 async function saveProjectConfig() {
   const platform = getPlatform();
-  const config = /** @type {{ projectConfig: ProjectConfig }} */ (projectState).projectConfig;
+  const config = (projectState as { projectConfig: ProjectConfig }).projectConfig;
   await platform.writeFile("project.json", JSON.stringify(config, null, "\t"));
 }
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
 /** Get the selected $def schema object. */
-function getSelectedDef() {
+function getSelectedDef(): ContentTypeSchema | undefined {
   const config = projectState?.projectConfig;
-  return config?.$defs?.[/** @type {string} */ (selectedDef)];
+  return config?.$defs?.[selectedDef as string] as ContentTypeSchema | undefined;
 }
 
 // ─── Handlers ─────────────────────────────────────────────────────────────────
 
 /** @param {() => void} rerender */
-function handleNewDef(rerender) {
+function handleNewDef(rerender: () => void) {
   const name = newDefName.trim();
   if (!name) return;
 
@@ -67,7 +64,7 @@ function handleNewDef(rerender) {
 }
 
 /** @param {() => void} rerender */
-function handleAddField(rerender) {
+function handleAddField(rerender: () => void) {
   const name = newFieldState.name.trim();
   if (!name || !selectedDef) return;
 
@@ -92,13 +89,13 @@ function handleAddField(rerender) {
  * @param {string} fieldName
  * @param {() => void} rerender
  */
-function handleDeleteField(fieldName, rerender) {
+function handleDeleteField(fieldName: string, rerender: () => void) {
   const def = getSelectedDef();
   if (!def?.properties) return;
 
   delete def.properties[fieldName];
   if (def.required) {
-    def.required = def.required.filter((/** @type {string} */ r) => r !== fieldName);
+    def.required = def.required.filter((r: string) => r !== fieldName);
   }
 
   rerender();
@@ -109,7 +106,7 @@ function handleDeleteField(fieldName, rerender) {
  * @param {string} fieldName
  * @param {() => void} rerender
  */
-function handleToggleRequired(fieldName, rerender) {
+function handleToggleRequired(fieldName: string, rerender: () => void) {
   const def = getSelectedDef();
   if (!def) return;
   if (!def.required) def.required = [];
@@ -127,19 +124,18 @@ function handleToggleRequired(fieldName, rerender) {
  * @param {string} newName
  * @param {() => void} rerender
  */
-function handleRenameField(oldName, newName, rerender) {
+function handleRenameField(oldName: string, newName: string, rerender: () => void) {
   const def = getSelectedDef();
   if (!def?.properties || !newName || def.properties[newName]) return;
 
-  /** @type {Record<string, unknown>} */
-  const newProps = {};
+  const newProps: Record<string, unknown> = {};
   for (const [key, val] of Object.entries(def.properties)) {
     newProps[key === oldName ? newName : key] = val;
   }
   def.properties = newProps;
 
   if (def.required) {
-    def.required = def.required.map((/** @type {string} */ r) => (r === oldName ? newName : r));
+    def.required = def.required.map((r: string) => (r === oldName ? newName : r));
   }
 
   rerender();
@@ -151,7 +147,7 @@ function handleRenameField(oldName, newName, rerender) {
  * @param {string} newType
  * @param {() => void} rerender
  */
-function handleChangeType(fieldName, newType, rerender) {
+function handleChangeType(fieldName: string, newType: string, rerender: () => void) {
   const def = getSelectedDef();
   if (!def?.properties?.[fieldName]) return;
 
@@ -169,7 +165,7 @@ function handleChangeType(fieldName, newType, rerender) {
  * @param {string} format
  * @param {() => void} rerender
  */
-function handleChangeFormat(fieldName, format, rerender) {
+function handleChangeFormat(fieldName: string, format: string, rerender: () => void) {
   const def = getSelectedDef();
   if (!def?.properties?.[fieldName]) return;
 
@@ -187,7 +183,11 @@ function handleChangeFormat(fieldName, format, rerender) {
  * @param {{ name: string; type: string; required: boolean }} fieldState
  * @param {() => void} rerender
  */
-function handleAddNestedField(parentName, fieldState, rerender) {
+function handleAddNestedField(
+  parentName: string,
+  fieldState: { name: string; type: string; required: boolean },
+  rerender: () => void,
+) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
   if (!parent) return;
@@ -209,14 +209,14 @@ function handleAddNestedField(parentName, fieldState, rerender) {
  * @param {string} childName
  * @param {() => void} rerender
  */
-function handleDeleteNested(parentName, childName, rerender) {
+function handleDeleteNested(parentName: string, childName: string, rerender: () => void) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
   if (!parent?.properties) return;
 
   delete parent.properties[childName];
   if (parent.required) {
-    parent.required = parent.required.filter((/** @type {string} */ r) => r !== childName);
+    parent.required = parent.required.filter((r: string) => r !== childName);
   }
 
   rerender();
@@ -228,7 +228,7 @@ function handleDeleteNested(parentName, childName, rerender) {
  * @param {string} childName
  * @param {() => void} rerender
  */
-function handleToggleNestedRequired(parentName, childName, rerender) {
+function handleToggleNestedRequired(parentName: string, childName: string, rerender: () => void) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
   if (!parent) return;
@@ -248,22 +248,24 @@ function handleToggleNestedRequired(parentName, childName, rerender) {
  * @param {string} newChild
  * @param {() => void} rerender
  */
-function handleRenameNested(parentName, oldChild, newChild, rerender) {
+function handleRenameNested(
+  parentName: string,
+  oldChild: string,
+  newChild: string,
+  rerender: () => void,
+) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
   if (!parent?.properties || !newChild || parent.properties[newChild]) return;
 
-  /** @type {Record<string, unknown>} */
-  const newProps = {};
+  const newProps: Record<string, unknown> = {};
   for (const [key, val] of Object.entries(parent.properties)) {
     newProps[key === oldChild ? newChild : key] = val;
   }
   parent.properties = newProps;
 
   if (parent.required) {
-    parent.required = parent.required.map((/** @type {string} */ r) =>
-      r === oldChild ? newChild : r,
-    );
+    parent.required = parent.required.map((r: string) => (r === oldChild ? newChild : r));
   }
 
   rerender();
@@ -276,7 +278,12 @@ function handleRenameNested(parentName, oldChild, newChild, rerender) {
  * @param {string} newType
  * @param {() => void} rerender
  */
-function handleChangeNestedType(parentName, childName, newType, rerender) {
+function handleChangeNestedType(
+  parentName: string,
+  childName: string,
+  newType: string,
+  rerender: () => void,
+) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
   if (!parent?.properties?.[childName]) return;
@@ -296,7 +303,12 @@ function handleChangeNestedType(parentName, childName, newType, rerender) {
  * @param {string} format
  * @param {() => void} rerender
  */
-function handleChangeNestedFormat(parentName, childName, format, rerender) {
+function handleChangeNestedFormat(
+  parentName: string,
+  childName: string,
+  format: string,
+  rerender: () => void,
+) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
   if (!parent?.properties?.[childName]) return;
@@ -309,7 +321,7 @@ function handleChangeNestedFormat(parentName, childName, format, rerender) {
 }
 
 /** @param {() => void} rerender */
-function handleDeleteDef(rerender) {
+function handleDeleteDef(rerender: () => void) {
   if (!selectedDef) return;
   const config = projectState?.projectConfig;
   if (!config?.$defs?.[selectedDef]) return;
@@ -328,7 +340,7 @@ function handleDeleteDef(rerender) {
  *
  * @param {HTMLElement} container
  */
-export function renderDefsEditor(container) {
+export function renderDefsEditor(container: HTMLElement) {
   const rerender = () => renderDefsEditor(container);
   const config = projectState?.projectConfig;
   const defs = config?.$defs || {};
@@ -359,10 +371,10 @@ export function renderDefsEditor(container) {
                 size="s"
                 placeholder="TypeName"
                 .value=${newDefName}
-                @input=${(/** @type {Event} */ e) => {
-                  newDefName = /** @type {HTMLInputElement} */ (e.target).value;
+                @input=${(e: Event) => {
+                  newDefName = (e.target as HTMLInputElement).value;
                 }}
-                @keydown=${(/** @type {KeyboardEvent} */ e) => {
+                @keydown=${(e: KeyboardEvent) => {
                   if (e.key === "Enter") handleNewDef(rerender);
                   if (e.key === "Escape") {
                     showNewDef = false;
@@ -395,29 +407,31 @@ export function renderDefsEditor(container) {
   if (!selectedDef || !defs[selectedDef]) {
     editorTpl = html`<div class="settings-empty-state">Select or create a type definition</div>`;
   } else {
-    const def = defs[selectedDef];
+    const def = defs[selectedDef] as ContentTypeSchema;
     const properties = def.properties || {};
     const required = def.required || [];
 
-    /** @type {import("./schema-field-ui.js").FieldHandlers} */
-    const handlers = {
-      onDelete: (n) => handleDeleteField(n, rerender),
-      onToggleRequired: (n) => handleToggleRequired(n, rerender),
-      onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
-      onChangeType: (n, t) => handleChangeType(n, t, rerender),
-      onChangeFormat: (n, f) => handleChangeFormat(n, f, rerender),
-      onAddNestedField: (p, s) => handleAddNestedField(p, s, rerender),
-      onDeleteNested: (p, c) => handleDeleteNested(p, c, rerender),
-      onToggleNestedRequired: (p, c) => handleToggleNestedRequired(p, c, rerender),
-      onRenameNested: (p, o, n) => handleRenameNested(p, o, n, rerender),
-      onChangeNestedType: (p, c, t) => handleChangeNestedType(p, c, t, rerender),
-      onChangeNestedFormat: (p, c, f) => handleChangeNestedFormat(p, c, f, rerender),
+    const handlers: import("./schema-field-ui.js").FieldHandlers = {
+      onDelete: (n: string) => handleDeleteField(n, rerender),
+      onToggleRequired: (n: string) => handleToggleRequired(n, rerender),
+      onRename: (oldN: string, newN: string) => handleRenameField(oldN, newN, rerender),
+      onChangeType: (n: string, t: string) => handleChangeType(n, t, rerender),
+      onChangeFormat: (n: string, f: string) => handleChangeFormat(n, f, rerender),
+      onAddNestedField: (p: string, s: { name: string; type: string; required: boolean }) =>
+        handleAddNestedField(p, s, rerender),
+      onDeleteNested: (p: string, c: string) => handleDeleteNested(p, c, rerender),
+      onToggleNestedRequired: (p: string, c: string) => handleToggleNestedRequired(p, c, rerender),
+      onRenameNested: (p: string, o: string, n: string) => handleRenameNested(p, o, n, rerender),
+      onChangeNestedType: (p: string, c: string, t: string) =>
+        handleChangeNestedType(p, c, t, rerender),
+      onChangeNestedFormat: (p: string, c: string, f: string) =>
+        handleChangeNestedFormat(p, c, f, rerender),
     };
 
     const fieldCards = Object.entries(properties).map(([name, fieldDef]) =>
       fieldCardTpl(
         name,
-        /** @type {import("./schema-field-ui.js").SchemaProperty} */ (fieldDef),
+        fieldDef as import("./schema-field-ui.js").SchemaProperty,
         required.includes(name),
         handlers,
       ),

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

@@ -1,15 +1,18 @@
+/// <reference lib="dom" />
 /** General settings section — favicon, platform adapter, breakpoints, and other site-wide config. */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { projectState } from "../store.js";
-import { updateSiteConfig } from "../site-context.js";
-import { getPlatform } from "../platform.js";
-import { openFileInTab } from "../files/files.js";
-import { closeSettingsModal } from "./settings-modal.js";
+import { projectState } from "../store";
+import { updateSiteConfig } from "../site-context";
+import { getPlatform } from "../platform";
+import { openFileInTab } from "../files/files";
+import { closeSettingsModal } from "./settings-modal";
+
+import type { ProjectConfig } from "@jxsuite/schema/types";
 
 /** @param {HTMLElement} container */
-export function renderGeneralSettings(container) {
-  const config = /** @type {ProjectConfig} */ (projectState?.projectConfig || {});
+export function renderGeneralSettings(container: HTMLElement) {
+  const config = (projectState?.projectConfig || {}) as ProjectConfig;
 
   const onFaviconUpload = async () => {
     const input = document.createElement("input");
@@ -26,8 +29,8 @@ export function renderGeneralSettings(container) {
     input.click();
   };
 
-  const onAdapterChange = (/** @type {Event & { target: { value: string } }} */ e) => {
-    updateSiteConfig({ build: { ...config.build, adapter: e.target.value } });
+  const onAdapterChange = (e: Event) => {
+    updateSiteConfig({ build: { ...config.build, adapter: (e.target as HTMLInputElement).value } });
   };
 
   const onEditGlobalStyles = () => {
@@ -37,29 +40,27 @@ export function renderGeneralSettings(container) {
 
   // ─── Breakpoints ($media) ───────────────────────────────────────────────────
 
-  const media = /** @type {Record<string, string>} */ (config.$media || {});
+  const media = (config.$media || {}) as Record<string, string>;
   const mediaEntries = Object.entries(media);
 
-  const onMediaValueChange =
-    (/** @type {string} */ key) => (/** @type {Event & { target: { value: string } }} */ e) => {
-      const updated = { ...media, [key]: e.target.value };
-      updateSiteConfig({ $media: updated });
-    };
+  const onMediaValueChange = (key: string) => (e: Event) => {
+    const updated = { ...media, [key]: (e.target as HTMLInputElement).value };
+    updateSiteConfig({ $media: updated });
+  };
 
-  const onMediaNameChange =
-    (/** @type {string} */ oldKey) => (/** @type {Event & { target: { value: string } }} */ e) => {
-      const rawName = e.target.value.trim();
-      const newKey = rawName.startsWith("--") ? rawName : `--${rawName}`;
-      if (newKey === oldKey) return;
-      const updated = /** @type {Record<string, string>} */ ({});
-      for (const [k, v] of Object.entries(media)) {
-        updated[k === oldKey ? newKey : k] = v;
-      }
-      updateSiteConfig({ $media: updated });
-      renderGeneralSettings(container);
-    };
+  const onMediaNameChange = (oldKey: string) => (e: Event) => {
+    const rawName = (e.target as HTMLInputElement).value.trim();
+    const newKey = rawName.startsWith("--") ? rawName : `--${rawName}`;
+    if (newKey === oldKey) return;
+    const updated = {} as Record<string, string>;
+    for (const [k, v] of Object.entries(media)) {
+      updated[k === oldKey ? newKey : k] = v;
+    }
+    updateSiteConfig({ $media: updated });
+    renderGeneralSettings(container);
+  };
 
-  const onRemoveBreakpoint = (/** @type {string} */ key) => () => {
+  const onRemoveBreakpoint = (key: string) => () => {
     const updated = { ...media };
     delete updated[key];
     updateSiteConfig({ $media: updated });