@jxsuite/studio 0.19.0 → 0.20.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

@@ -8,7 +8,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;
@@ -60,7 +60,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 +90,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);
 }
 
@@ -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 {{
@@ -41,6 +47,8 @@ let _scheduled = false;
  */
 export function mount(ctx) {
   _ctx = ctx;
+  mountAiPanel();
+  registerRightPanelRender(render);
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -113,6 +121,7 @@ function _flush() {
   } finally {
     _rendering = false;
   }
+  requestAnimationFrame(() => mountQuikChat());
   _ctx.updateForcedPseudoPreview();
 }
 
@@ -120,7 +129,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 +148,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 +188,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";