@jxsuite/studio 0.19.0 → 0.21.0

package/src/panels/pseudo-preview.js

@@ -34,7 +34,7 @@ export function updateForcedPseudoPreview() {
   const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node?.style) return;
   const activeMedia = tab.session.ui.activeMedia;
-  /** @type {any} */
+  /** @type {JxStyle} */
   const ctx = activeMedia ? node.style[`@${activeMedia}`] || {} : node.style;
   const rules = ctx[sel];
   if (!rules || typeof rules !== "object") return;
@@ -43,7 +43,7 @@ export function updateForcedPseudoPreview() {
     .filter(([k]) => typeof rules[k] === "string" || typeof rules[k] === "number")
     .map(
       ([k, v]) =>
-        `${k.replace(/[A-Z]/g, (/** @type {any} */ c) => `-${c.toLowerCase()}`)}: ${v} !important`,
+        `${k.replace(/[A-Z]/g, (/** @type {string} */ c) => `-${c.toLowerCase()}`)}: ${v} !important`,
     )
     .join("; ");
   if (!cssProps) return;

package/src/panels/quick-search.js

@@ -1,6 +1,7 @@
 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";
@@ -8,7 +9,7 @@ import { getLayerSlot } from "../ui/layers.js";
 
 let _open = false;
 let _query = "";
-/** @type {any[]} */
+/** @type {{ path: string; name?: string }[]} */
 let _results = [];
 let _selectedIndex = 0;
 let _debounceTimer = 0;
@@ -28,10 +29,6 @@ export function openQuickSearch() {
   _results = [];
   _selectedIndex = 0;
   renderOverlay();
-  requestAnimationFrame(() => {
-    const input = getContainer().querySelector(".quick-search-input");
-    if (input) /** @type {HTMLInputElement} */ (input).focus();
-  });
 }
 
 export function closeQuickSearch() {
@@ -60,7 +57,9 @@ async function doSearch(/** @type {string} */ query) {
 function onInput(/** @type {Event} */ e) {
   _query = /** @type {HTMLInputElement} */ (e.target).value;
   clearTimeout(_debounceTimer);
-  _debounceTimer = /** @type {any} */ (setTimeout(() => doSearch(_query), 150));
+  _debounceTimer = /** @type {number} */ (
+    /** @type {unknown} */ (setTimeout(() => doSearch(_query), 150))
+  );
   renderOverlay();
 }
 
@@ -88,10 +87,10 @@ function onKeydown(/** @type {KeyboardEvent} */ e) {
   }
 }
 
-function selectItem(/** @type {any} */ item) {
+function selectItem(/** @type {{ path: string; name?: string }} */ item) {
   closeQuickSearch();
   const path = item.path;
-  trackRecentFile({ path, name: path.split("/").pop() });
+  trackRecentFile({ path, name: path.split("/").pop() || "" });
   openFileInTab(path);
 }
 
@@ -134,6 +133,9 @@ function renderOverlay() {
           .value=${live(_query)}
           @input=${onInput}
           @keydown=${onKeydown}
+          ${ref((el) => {
+            if (el) requestAnimationFrame(() => /** @type {HTMLInputElement} */ (el).focus());
+          })}
         />
         <div class="quick-search-results">
           ${items.length === 0 && _query.trim()
@@ -156,7 +158,7 @@ function renderOverlay() {
                 }}
               >
                 <span class="quick-search-icon"
-                  >${fileIcon(item.name || item.path.split("/").pop())}</span
+                  >${fileIcon(item.name || item.path.split("/").pop() || "")}</span
                 >
                 <span class="quick-search-name">${item.name || item.path.split("/").pop()}</span>
                 <span class="quick-search-path">${dirPart(item.path)}</span>

package/src/panels/right-panel.js

@@ -15,6 +15,12 @@ import { isCustomElementDoc } from "./signals-panel.js";
 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";
 
 /**
  * @typedef {{
@@ -33,6 +39,16 @@ let _scope = null;
 
 let _rendering = false;
 let _scheduled = false;
+let _hasFocus = false;
+
+function _onFocusIn() {
+  _hasFocus = true;
+}
+
+function _onFocusOut() {
+  _hasFocus = false;
+  render();
+}
 
 /**
  * Mount the right panel.
@@ -41,6 +57,10 @@ let _scheduled = false;
  */
 export function mount(ctx) {
   _ctx = ctx;
+  mountAiPanel();
+  registerRightPanelRender(render);
+  rightPanel.addEventListener("focusin", _onFocusIn);
+  rightPanel.addEventListener("focusout", _onFocusOut);
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -58,20 +78,7 @@ export function mount(ctx) {
       void tab.session.ui.styleFilterActive;
       void tab.session.ui.inspectorSections;
 
-      const colorPopoverOpen = isColorPopoverOpen();
-      const activeTag = document.activeElement?.tagName;
-      const rightHasFocus =
-        !colorPopoverOpen &&
-        rightPanel.contains(document.activeElement) &&
-        (activeTag === "INPUT" ||
-          activeTag === "TEXTAREA" ||
-          activeTag === "SP-TEXTFIELD" ||
-          activeTag === "SP-NUMBER-FIELD" ||
-          activeTag === "SP-PICKER" ||
-          activeTag === "SP-COMBOBOX" ||
-          activeTag === "SP-SEARCH");
-
-      if (!rightHasFocus) {
+      if (!_hasFocus && !isColorPopoverOpen()) {
         render();
       }
     });
@@ -82,6 +89,9 @@ export function unmount() {
   _scope?.stop();
   _scope = null;
   _ctx = null;
+  rightPanel.removeEventListener("focusin", _onFocusIn);
+  rightPanel.removeEventListener("focusout", _onFocusOut);
+  _hasFocus = false;
 }
 
 export function render() {
@@ -113,6 +123,7 @@ function _flush() {
   } finally {
     _rendering = false;
   }
+  requestAnimationFrame(() => mountQuikChat());
   _ctx.updateForcedPseudoPreview();
 }
 
@@ -120,7 +131,14 @@ function rightPanelTemplate() {
   const ctx = /** @type {RightPanelCtx} */ (_ctx);
   const aTab = activeTab.value;
   if (!aTab) return nothing;
-  const S = /** @type {any} */ ({
+  const S = /**
+   * @type {{
+   *   ui: Record<string, unknown>;
+   *   document: JxMutableNode;
+   *   mode: string;
+   *   selection: (string | number)[] | null;
+   * }}
+   */ ({
     ui: aTab.session.ui,
     document: aTab.doc.document,
     mode: aTab.doc.mode,
@@ -132,6 +150,7 @@ function rightPanelTemplate() {
     { value: "properties", icon: "sp-icon-properties", label: "Properties" },
     { value: "events", icon: "sp-icon-event", label: "Events" },
     { value: "style", icon: "sp-icon-brush", label: "Style" },
+    { value: "assistant", icon: "sp-icon-chat", label: "Assistant" },
   ];
 
   const tabsT = html`
@@ -171,10 +190,17 @@ function rightPanelTemplate() {
     } catch (/** @type {unknown} */ e) {
       console.error("[renderStylePanelTemplate]", e);
     }
+  } else if (tab === "assistant") {
+    bodyT = renderAiPanelTemplate();
   }
 
   return html`
     ${tabsT}
-    <div class="panel-body">${bodyT}</div>
+    <div
+      class="panel-body"
+      style=${tab === "assistant" ? "display:flex;flex-direction:column;overflow:hidden" : ""}
+    >
+      ${bodyT}
+    </div>
   `;
 }

package/src/panels/shared.js

@@ -6,7 +6,7 @@
 /**
  * Convert a $media key like "--tablet" to a friendly display name "Tablet". "--" returns "Base".
  *
- * @param {any} name
+ * @param {string} name
  */
 export function mediaDisplayName(name) {
   if (name === "--") return "Base";
@@ -14,7 +14,7 @@ export function mediaDisplayName(name) {
     name
       .replace(/^--/, "")
       .replace(/-/g, " ")
-      .replace(/\b\w/g, (/** @type {any} */ c) => c.toUpperCase()) || name
+      .replace(/\b\w/g, (/** @type {string} */ c) => c.toUpperCase()) || name
   );
 }
 
@@ -23,10 +23,10 @@ export const unsafeTags = new Set(["script", "style", "link", "iframe", "object"
 /**
  * Generate a sensible default Jx node for a given tag name.
  *
- * @param {any} tag
+ * @param {string} tag
  */
 export function defaultDef(tag) {
-  /** @type {any} */
+  /** @type {JxMutableNode} */
   const def = { tagName: tag };
   if (/^h[1-6]$/.test(tag)) def.textContent = "Heading";
   else if (tag === "p") def.textContent = "Paragraph text";