@jxsuite/studio 0.23.1 → 0.24.0

package/src/panels/{pseudo-preview.js → pseudo-preview.ts}

@@ -1,12 +1,15 @@
+/// <reference lib="dom" />
 /**
  * Pseudo-state preview — extracted from studio.js (Phase 4m). When a pseudo-selector (:hover,
  * :focus, etc.) is active in the style sidebar, force those styles onto the selected element.
  */
 
-import { getNodeAtPath } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { view } from "../view.js";
-import { getActivePanel, findCanvasElement } from "../canvas/canvas-helpers.js";
+import { getNodeAtPath } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { view } from "../view";
+import { getActivePanel, findCanvasElement } from "../canvas/canvas-helpers";
+
+import type { JxStyle } from "@jxsuite/schema/types";
 
 const pseudoStyleHost = document.createElement("div");
 pseudoStyleHost.style.display = "contents";
@@ -34,16 +37,14 @@ export function updateForcedPseudoPreview() {
   const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node?.style) return;
   const activeMedia = tab.session.ui.activeMedia;
-  /** @type {JxStyle} */
-  const ctx = activeMedia ? node.style[`@${activeMedia}`] || {} : node.style;
+  const ctx: JxStyle = activeMedia ? node.style[`@${activeMedia}`] || {} : node.style;
   const rules = ctx[sel];
   if (!rules || typeof rules !== "object") return;
 
   const cssProps = Object.entries(rules)
     .filter(([k]) => typeof rules[k] === "string" || typeof rules[k] === "number")
     .map(
-      ([k, v]) =>
-        `${k.replace(/[A-Z]/g, (/** @type {string} */ c) => `-${c.toLowerCase()}`)}: ${v} !important`,
+      ([k, v]) => `${k.replace(/[A-Z]/g, (c: string) => `-${c.toLowerCase()}`)}: ${v} !important`,
     )
     .join("; ");
   if (!cssProps) return;

package/src/panels/{quick-search.js → quick-search.ts}

@@ -1,16 +1,17 @@
+/// <reference lib="dom" />
 import { html, render as litRender, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { live } from "lit-html/directives/live.js";
 import { ref } from "lit-html/directives/ref.js";
-import { getPlatform } from "../platform.js";
-import { openFileInTab } from "../files/files.js";
-import { getRecentFiles, trackRecentFile } from "../recent-projects.js";
-import { getLayerSlot } from "../ui/layers.js";
+import { getPlatform } from "../platform";
+import { openFileInTab } from "../files/files";
+import { getRecentFiles, trackRecentFile } from "../recent-projects";
+import { getLayerSlot } from "../ui/layers";
 
 let _open = false;
 let _query = "";
 /** @type {{ path: string; name?: string }[]} */
-let _results = [];
+let _results: { path: string; name?: string }[] = [];
 let _selectedIndex = 0;
 let _debounceTimer = 0;
 
@@ -36,7 +37,7 @@ export function closeQuickSearch() {
   renderOverlay();
 }
 
-async function doSearch(/** @type {string} */ query) {
+async function doSearch(query: string) {
   if (!query.trim()) {
     _results = [];
     _selectedIndex = 0;
@@ -54,16 +55,14 @@ async function doSearch(/** @type {string} */ query) {
   }
 }
 
-function onInput(/** @type {Event} */ e) {
-  _query = /** @type {HTMLInputElement} */ (e.target).value;
+function onInput(e: Event) {
+  _query = (e.target as HTMLInputElement).value;
   clearTimeout(_debounceTimer);
-  _debounceTimer = /** @type {number} */ (
-    /** @type {unknown} */ (setTimeout(() => doSearch(_query), 150))
-  );
+  _debounceTimer = setTimeout(() => doSearch(_query), 150) as unknown as number;
   renderOverlay();
 }
 
-function onKeydown(/** @type {KeyboardEvent} */ e) {
+function onKeydown(e: KeyboardEvent) {
   const items = _query.trim() ? _results : getRecentFiles();
   switch (e.key) {
     case "ArrowDown":
@@ -87,14 +86,14 @@ function onKeydown(/** @type {KeyboardEvent} */ e) {
   }
 }
 
-function selectItem(/** @type {{ path: string; name?: string }} */ item) {
+function selectItem(item: { path: string; name?: string }) {
   closeQuickSearch();
   const path = item.path;
   trackRecentFile({ path, name: path.split("/").pop() || "" });
   openFileInTab(path);
 }
 
-function fileIcon(/** @type {string} */ name) {
+function fileIcon(name: string) {
   const ext = name.split(".").pop()?.toLowerCase();
   switch (ext) {
     case "json":
@@ -106,7 +105,7 @@ function fileIcon(/** @type {string} */ name) {
   }
 }
 
-function dirPart(/** @type {string} */ path) {
+function dirPart(path: string) {
   const parts = path.split("/");
   parts.pop();
   return parts.length ? parts.join("/") : "";
@@ -125,7 +124,7 @@ function renderOverlay() {
 
   const tpl = html`
     <div class="quick-search-overlay" @click=${closeQuickSearch}>
-      <div class="quick-search-panel" @click=${(/** @type {Event} */ e) => e.stopPropagation()}>
+      <div class="quick-search-panel" @click=${(e: Event) => e.stopPropagation()}>
         <input
           class="quick-search-input"
           type="text"
@@ -134,7 +133,7 @@ function renderOverlay() {
           @input=${onInput}
           @keydown=${onKeydown}
           ${ref((el) => {
-            if (el) requestAnimationFrame(() => /** @type {HTMLInputElement} */ (el).focus());
+            if (el) requestAnimationFrame(() => (el as HTMLInputElement).focus());
           })}
         />
         <div class="quick-search-results">

package/src/panels/{right-panel.js → right-panel.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Right panel — orchestrates Properties / Events / Style tabs. The heavy sub-templates
  * (propertiesSidebarTemplate, renderStylePanelTemplate) remain in studio.js and are passed via ctx
@@ -5,43 +6,39 @@
  */
 
 import { html, render as litRender } from "lit-html";
-import { updateUi, rightPanel } from "../store.js";
-import { effect, effectScope } from "../reactivity.js";
-import { activeTab } from "../workspace/workspace.js";
-import { tabIcon } from "./activity-bar.js";
-import { eventsSidebarTemplate } from "./events-panel.js";
-import { isCustomElementDoc } from "./signals-panel.js";
+import { updateUi, rightPanel } from "../store";
+import { effect, effectScope } from "../reactivity";
+import { activeTab } from "../workspace/workspace";
+import { tabIcon } from "./activity-bar";
+import { eventsSidebarTemplate } from "./events-panel";
+import { isCustomElementDoc } from "./signals-panel";
+
+import { isColorPopoverOpen } from "../ui/color-selector";
+import { renderStylePanelTemplate } from "./style-panel";
+import { renderPropertiesPanelTemplate } from "./properties-panel";
+interface RightPanelCtx {
+  navigateToComponent: (path: string) => void;
+  getCanvasMode: () => string;
+  renderCanvas: () => void;
+  updateForcedPseudoPreview: () => void;
+}
 
-import { isColorPopoverOpen } from "../ui/color-selector.js";
-import { renderStylePanelTemplate } from "./style-panel.js";
-import { renderPropertiesPanelTemplate } from "./properties-panel.js";
 import {
   renderAiPanelTemplate,
   mountAiPanel,
   mountQuikChat,
   registerRightPanelRender,
-} from "./ai-panel.js";
+} from "./ai-panel";
 
-/**
- * @typedef {{
- *   navigateToComponent: (path: string) => void;
- *   getCanvasMode: () => string;
- *   renderCanvas: () => void;
- *   updateForcedPseudoPreview: () => void;
- * }} RightPanelCtx
- */
+let _ctx: RightPanelCtx | null = null;
 
-/** @type {RightPanelCtx | null} */
-let _ctx = null;
-
-/** @type {import("@vue/reactivity").EffectScope | null} */
-let _scope = null;
+let _scope: import("@vue/reactivity").EffectScope | null = null;
 
 let _rendering = false;
 let _scheduled = false;
 let _hasFocus = false;
 
-function _isTextInput(/** @type {Element | null} */ el) {
+function _isTextInput(el: Element | null) {
   if (!el) return false;
   const tag = el.tagName.toLowerCase();
   if (tag === "input" || tag === "textarea") return true;
@@ -50,8 +47,8 @@ function _isTextInput(/** @type {Element | null} */ el) {
   return false;
 }
 
-function _onFocusIn(/** @type {FocusEvent} */ e) {
-  _hasFocus = _isTextInput(/** @type {Element} */ (e.target));
+function _onFocusIn(e: FocusEvent) {
+  _hasFocus = _isTextInput(e.target as Element);
 }
 
 function _onFocusOut() {
@@ -64,7 +61,7 @@ function _onFocusOut() {
  *
  * @param {RightPanelCtx} ctx
  */
-export function mount(ctx) {
+export function mount(ctx: RightPanelCtx) {
   _ctx = ctx;
   mountAiPanel();
   registerRightPanelRender(render);
@@ -119,16 +116,11 @@ export function render() {
   }
 }
 
-/** @type {HTMLElement | null} */
-let _propsContainer = null;
-/** @type {HTMLElement | null} */
-let _eventsContainer = null;
-/** @type {HTMLElement | null} */
-let _styleContainer = null;
-/** @type {HTMLElement | null} */
-let _assistantContainer = null;
-/** @type {string | null} */
-let _lastTab = null;
+let _propsContainer: HTMLElement | null = null;
+let _eventsContainer: HTMLElement | null = null;
+let _styleContainer: HTMLElement | null = null;
+let _assistantContainer: HTMLElement | null = null;
+let _lastTab: string | null = null;
 
 function _ensureContainers() {
   if (_propsContainer) return;
@@ -151,26 +143,19 @@ function _flush() {
   if (_hasFocus || isColorPopoverOpen()) return;
   _rendering = true;
   try {
-    const ctx = /** @type {RightPanelCtx} */ (_ctx);
+    const ctx = _ctx as RightPanelCtx;
     const aTab = activeTab.value;
     if (!aTab) {
       rightPanel.textContent = "";
       return;
     }
-    const S = /**
-     * @type {{
-     *   ui: Record<string, unknown>;
-     *   document: JxMutableNode;
-     *   mode: string;
-     *   selection: (string | number)[] | null;
-     * }}
-     */ ({
+    const S = {
       ui: aTab.session.ui,
       document: aTab.doc.document,
       mode: aTab.doc.mode,
       selection: aTab.session.selection,
-    });
-    const tab = /** @type {string} */ (S.ui.rightTab);
+    };
+    const tab = S.ui.rightTab;
 
     // Render tabs header
     const panelTabs = [
@@ -184,7 +169,7 @@ function _flush() {
         <sp-tabs
           selected=${tab}
           quiet
-          @change=${(/** @type {Event & { target: { selected: string } }} */ e) => {
+          @change=${(e: Event & { target: { selected: string } }) => {
             const sel = e.target.selected;
             if (sel && sel !== tab) {
               updateUi("rightTab", sel);
@@ -204,12 +189,12 @@ function _flush() {
     `;
 
     _ensureContainers();
-    const containers = /** @type {HTMLElement[]} */ ([
+    const containers = [
       _propsContainer,
       _eventsContainer,
       _styleContainer,
       _assistantContainer,
-    ]);
+    ] as HTMLElement[];
     const tabKeys = ["properties", "events", "style", "assistant"];
 
     // Show/hide containers
@@ -231,24 +216,21 @@ function _flush() {
     if (tab === "properties") {
       litRender(
         renderPropertiesPanelTemplate({ navigateToComponent: ctx.navigateToComponent }),
-        /** @type {HTMLElement} */ (_propsContainer),
+        _propsContainer!,
       );
     } else if (tab === "events") {
       litRender(
         eventsSidebarTemplate({ isCustomElementDoc: () => isCustomElementDoc(S) }),
-        /** @type {HTMLElement} */ (_eventsContainer),
+        _eventsContainer!,
       );
     } else if (tab === "style") {
       try {
-        litRender(
-          renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode }),
-          /** @type {HTMLElement} */ (_styleContainer),
-        );
-      } catch (/** @type {unknown} */ e) {
+        litRender(renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode }), _styleContainer!);
+      } catch (e) {
         console.error("[renderStylePanelTemplate]", e);
       }
     } else if (tab === "assistant") {
-      litRender(renderAiPanelTemplate(), /** @type {HTMLElement} */ (_assistantContainer));
+      litRender(renderAiPanelTemplate(), _assistantContainer!);
     }
 
     _lastTab = tab;

package/src/panels/{shared.js → shared.ts}

@@ -1,20 +1,23 @@
+/// <reference lib="dom" />
 /**
  * Shared panel utilities — portable helpers extracted from studio.js. These functions depend only
  * on store.js / state.js exports (no circular deps).
  */
 
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
 /**
  * Convert a $media key like "--tablet" to a friendly display name "Tablet". "--" returns "Base".
  *
  * @param {string} name
  */
-export function mediaDisplayName(name) {
+export function mediaDisplayName(name: string) {
   if (name === "--") return "Base";
   return (
     name
       .replace(/^--/, "")
       .replace(/-/g, " ")
-      .replace(/\b\w/g, (/** @type {string} */ c) => c.toUpperCase()) || name
+      .replace(/\b\w/g, (c: string) => c.toUpperCase()) || name
   );
 }
 
@@ -25,9 +28,8 @@ export const unsafeTags = new Set(["script", "style", "link", "iframe", "object"
  *
  * @param {string} tag
  */
-export function defaultDef(tag) {
-  /** @type {JxMutableNode} */
-  const def = { tagName: tag };
+export function defaultDef(tag: string) {
+  const def: JxMutableNode = { tagName: tag };
   if (/^h[1-6]$/.test(tag)) def.textContent = "Heading";
   else if (tag === "p") def.textContent = "Paragraph text";
   else if (