@jxsuite/studio 0.0.1 → 0.5.0

package/src/panels/right-panel.js

@@ -0,0 +1,104 @@
+/**
+ * Right panel — orchestrates Properties / Events / Style tabs. The heavy sub-templates
+ * (propertiesSidebarTemplate, renderStylePanelTemplate) remain in studio.js and are passed via ctx
+ * to avoid moving ~2000 lines in one step.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { getState, updateUi, rightPanel } from "../store.js";
+import { tabIcon } from "./activity-bar.js";
+import { eventsSidebarTemplate } from "./events-panel.js";
+import { isCustomElementDoc } from "./signals-panel.js";
+import { ensureLitState } from "./shared.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Mount the right panel.
+ *
+ * @param {any} ctx — { propertiesSidebarTemplate, renderStylePanelTemplate, renderCanvas,
+ *   updateForcedPseudoPreview }
+ */
+export function mount(ctx) {
+  _ctx = ctx;
+}
+
+export function unmount() {
+  _ctx = null;
+}
+
+export function render() {
+  if (!_ctx) return;
+  try {
+    ensureLitState(rightPanel);
+    litRender(rightPanelTemplate(), rightPanel);
+  } catch (e) {
+    console.error("right-panel render error:", e);
+    try {
+      rightPanel.textContent = "";
+      // @ts-ignore
+      delete rightPanel["_$litPart$"];
+      litRender(rightPanelTemplate(), rightPanel);
+    } catch (e2) {
+      console.error("right-panel retry failed:", e2);
+    }
+  }
+  _ctx.updateForcedPseudoPreview();
+}
+
+function rightPanelTemplate() {
+  const S = getState();
+  const tab = S.ui.rightTab;
+
+  const panelTabs = [
+    { value: "properties", icon: "sp-icon-properties", label: "Properties" },
+    { value: "events", icon: "sp-icon-event", label: "Events" },
+    { value: "style", icon: "sp-icon-brush", label: "Style" },
+  ];
+
+  const tabsT = html`
+    <div class="panel-tabs">
+      <sp-tabs
+        selected=${tab}
+        quiet
+        @change=${(/** @type {any} */ e) => {
+          const sel = e.target.selected;
+          if (sel && sel !== tab) {
+            updateUi("rightTab", sel);
+          }
+        }}
+      >
+        ${panelTabs.map(
+          (t) => html`
+            <sp-tab value=${t.value} title=${t.label} aria-label=${t.label}>
+              ${tabIcon(t.icon, "xs")}
+            </sp-tab>
+          `,
+        )}
+      </sp-tabs>
+    </div>
+  `;
+
+  /** @type {any} */
+  let bodyT = nothing;
+  if (tab === "properties") {
+    bodyT = _ctx.propertiesSidebarTemplate();
+  } else if (tab === "events") {
+    bodyT = eventsSidebarTemplate(S, {
+      isCustomElementDoc: () => isCustomElementDoc(S),
+      renderCanvas: _ctx.renderCanvas,
+    });
+  } else if (tab === "style") {
+    try {
+      bodyT = _ctx.renderStylePanelTemplate();
+    } catch (/** @type {any} */ e) {
+      console.error("[renderStylePanelTemplate]", e);
+    }
+  }
+
+  return html`
+    ${tabsT}
+    <div class="panel-body">${bodyT}</div>
+  `;
+}

package/src/panels/shared.js

@@ -0,0 +1,41 @@
+/**
+ * Shared panel utilities — portable helpers extracted from studio.js. These functions depend only
+ * on store.js / state.js exports (no circular deps).
+ */
+
+/**
+ * Convert a $media key like "--tablet" to a friendly display name "Tablet". "--" returns "Base".
+ *
+ * @param {any} name
+ */
+export function mediaDisplayName(name) {
+  if (name === "--") return "Base";
+  return (
+    name
+      .replace(/^--/, "")
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, (/** @type {any} */ c) => c.toUpperCase()) || name
+  );
+}
+
+/**
+ * Ensure Lit's internal ChildPart markers are valid. If corrupted, clears the container so Lit
+ * rebuilds from scratch on the next render.
+ *
+ * @param {HTMLElement} container
+ */
+export function ensureLitState(container) {
+  // @ts-ignore — Lit stores a ChildPart on this private property
+  const part = container["_$litPart$"];
+  if (!part) return;
+  const start = part._$startNode;
+  const end = part._$endNode;
+  const startBad = start && start.parentNode !== container;
+  const endBad = end && end !== container && end.parentNode !== container;
+  if (startBad || endBad) {
+    console.warn("ensureLitState: clearing corrupted Lit state on", container.id || container);
+    container.textContent = "";
+    // @ts-ignore
+    delete container["_$litPart$"];
+  }
+}

package/src/panels/signals-panel.js

@@ -6,6 +6,7 @@
 
 import { html, nothing } from "lit-html";
 import { addDef, removeDef, updateDef, renameDef, update } from "../store.js";
+import { renderFieldRow } from "../ui/field-row.js";
 import { fetchPluginSchema, pluginSchemaCache } from "../services/code-services.js";
 
 // ─── Module-local state ─────────────────────────────────────────────────────
@@ -180,11 +181,11 @@ export function signalFieldRow(
 ) {
   /** @type {any} */
   let debounce;
-  return html`
-    <div class="style-row">
-      <div class="style-row-label">
-        <sp-field-label size="s">${label}</sp-field-label>
-      </div>
+  return renderFieldRow({
+    prop: label,
+    label,
+    hasValue: false,
+    widget: html`
       <sp-textfield
         size="s"
         value=${value}
@@ -193,8 +194,8 @@ export function signalFieldRow(
           debounce = setTimeout(() => onChange(e.target.value), 400);
         }}
       ></sp-textfield>
-    </div>
-  `;
+    `,
+  });
 }
 
 /** Normalize a parameter entry to a CEM object. */
@@ -206,9 +207,9 @@ export function normParam(/** @type {any} */ p) {
 
 /**
  * @param {any} S
- * @param {{ renderLeftPanel: Function; renderCanvas: Function }} ctx
+ * @param {any} ctx
  */
-export function renderSignalsTemplate(S, { renderLeftPanel, renderCanvas }) {
+export function renderSignalsTemplate(S, ctx) {
   const defs = S.document.state || {};
   const entries = Object.entries(defs);
 
@@ -242,7 +243,7 @@ export function renderSignalsTemplate(S, { renderLeftPanel, renderCanvas }) {
           @sp-accordion-item-toggle=${() => {
             if (collapsedCats.has(key)) collapsedCats.delete(key);
             else collapsedCats.add(key);
-            renderLeftPanel();
+            ctx.renderLeftPanel();
           }}
         >
           ${items.map(([name, def]) => {
@@ -253,7 +254,7 @@ export function renderSignalsTemplate(S, { renderLeftPanel, renderCanvas }) {
                 class="signal-row${isExpanded ? " expanded" : ""}"
                 @click=${() => {
                   expandedSignal = isExpanded ? null : name;
-                  renderLeftPanel();
+                  ctx.renderLeftPanel();
                 }}
               >
                 <span class="signal-badge ${defCategory(def)}">${defBadgeLabel(def)}</span>
@@ -273,7 +274,7 @@ export function renderSignalsTemplate(S, { renderLeftPanel, renderCanvas }) {
               </div>
               ${isExpanded
                 ? html`<div class="signal-editor">
-                    ${renderSignalEditorTemplate(S, name, def, { renderLeftPanel, renderCanvas })}
+                    ${renderSignalEditorTemplate(S, name, def, ctx)}
                   </div>`
                 : nothing}
             `;
@@ -305,7 +306,7 @@ export function renderSignalsTemplate(S, { renderLeftPanel, renderCanvas }) {
             }
             update(addDef(S, n, structuredClone(template)));
             expandedSignal = n;
-            renderLeftPanel();
+            ctx.renderLeftPanel();
           }}
         >
           <sp-menu-item value="state">State Signal</sp-menu-item>
@@ -333,7 +334,7 @@ function renderSignalEditorTemplate(
   /** @type {any} */ S,
   /** @type {any} */ name,
   /** @type {any} */ def,
-  /** @type {{ renderLeftPanel: Function; renderCanvas: Function }} */ ctx,
+  /** @type {any} */ ctx,
 ) {
   const cat = defCategory(def);
 
@@ -344,11 +345,11 @@ function renderSignalEditorTemplate(
     /** @type {any} */ currentVal,
     /** @type {any} */ onChange,
   ) => {
-    return html`
-      <div class="style-row">
-        <div class="style-row-label">
-          <sp-field-label size="s">${label}</sp-field-label>
-        </div>
+    return renderFieldRow({
+      prop: label,
+      label,
+      hasValue: false,
+      widget: html`
         <sp-picker
           size="s"
           value=${currentVal}
@@ -358,8 +359,8 @@ function renderSignalEditorTemplate(
             (/** @type {any} */ opt) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`,
           )}
         </sp-picker>
-      </div>
-    `;
+      `,
+    });
   };
 
   // Helper for textarea rows
@@ -371,11 +372,11 @@ function renderSignalEditorTemplate(
   ) => {
     /** @type {any} */
     let debounce;
-    return html`
-      <div class="style-row">
-        <div class="style-row-label">
-          <sp-field-label size="s">${label}</sp-field-label>
-        </div>
+    return renderFieldRow({
+      prop: label,
+      label,
+      hasValue: false,
+      widget: html`
         <textarea
           class="field-input"
           style="min-height:${opts.minHeight || "40px"};${opts.mono
@@ -387,8 +388,8 @@ function renderSignalEditorTemplate(
             debounce = setTimeout(() => onChange(e.target.value), 500);
           }}
         ></textarea>
-      </div>
-    `;
+      `,
+    });
   };
 
   // Name field (common to all)
@@ -415,17 +416,19 @@ function renderSignalEditorTemplate(
           ${signalFieldRow("Attribute", def.attribute || "", (/** @type {any} */ v) =>
             update(updateDef(S, name, { attribute: v || undefined })),
           )}
-          <div class="style-row">
-            <div class="style-row-label">
-              <sp-field-label size="s">Reflects</sp-field-label>
-            </div>
-            <sp-checkbox
-              class="field-check"
-              ?checked=${!!def.reflects}
-              @change=${(/** @type {any} */ e) =>
-                update(updateDef(S, name, { reflects: e.target.checked || undefined }))}
-            ></sp-checkbox>
-          </div>
+          ${renderFieldRow({
+            prop: "reflects",
+            label: "Reflects",
+            hasValue: false,
+            widget: html`
+              <sp-checkbox
+                class="field-check"
+                ?checked=${!!def.reflects}
+                @change=${(/** @type {any} */ e) =>
+                  update(updateDef(S, name, { reflects: e.target.checked || undefined }))}
+              ></sp-checkbox>
+            `,
+          })}
           ${signalFieldRow(
             "Deprecated",
             typeof def.deprecated === "string" ? def.deprecated : "",
@@ -464,38 +467,40 @@ function renderSignalEditorTemplate(
     /** @type {any} */
     let debounce;
     fields = html`
-      <div class="style-row">
-        <div class="style-row-label">
-          <sp-field-label size="s">Expression</sp-field-label>
-        </div>
-        <textarea
-          class="field-input"
-          style="min-height:40px"
-          .value=${def.$compute || ""}
-          @input=${(/** @type {any} */ e) => {
-            clearTimeout(debounce);
-            debounce = setTimeout(() => {
-              const expr = e.target.value;
-              const depMatches = expr.match(/\$[a-zA-Z_]\w*/g) || [];
-              const deps = [...new Set(depMatches)].map((d) => `#/state/${d}`);
-              update(updateDef(S, name, { $compute: expr, $deps: deps }));
-            }, 500);
-          }}
-        ></textarea>
-      </div>
+      ${renderFieldRow({
+        prop: "expression",
+        label: "Expression",
+        hasValue: false,
+        widget: html`
+          <textarea
+            class="field-input"
+            style="min-height:40px"
+            .value=${def.$compute || ""}
+            @input=${(/** @type {any} */ e) => {
+              clearTimeout(debounce);
+              debounce = setTimeout(() => {
+                const expr = e.target.value;
+                const depMatches = expr.match(/\$[a-zA-Z_]\w*/g) || [];
+                const deps = [...new Set(depMatches)].map((d) => `#/state/${d}`);
+                update(updateDef(S, name, { $compute: expr, $deps: deps }));
+              }, 500);
+            }}
+          ></textarea>
+        `,
+      })}
       ${def.$deps && def.$deps.length > 0
-        ? html`
-            <div class="style-row">
-              <div class="style-row-label">
-                <sp-field-label size="s">Dependencies</sp-field-label>
-              </div>
+        ? renderFieldRow({
+            prop: "dependencies",
+            label: "Dependencies",
+            hasValue: false,
+            widget: html`
               <span class="signal-hint" style="flex:1;max-width:none"
                 >${def.$deps
                   .map((/** @type {any} */ d) => d.replace("#/state/", ""))
                   .join(", ")}</span
               >
-            </div>
-          `
+            `,
+          })
         : nothing}
     `;
   } else if (cat === "data") {
@@ -514,7 +519,7 @@ function renderDataSourceFields(
   /** @type {any} */ def,
   /** @type {any} */ textareaRow,
   /** @type {any} */ pickerRow,
-  /** @type {{ renderLeftPanel: Function; renderCanvas: Function }} */ ctx,
+  /** @type {any} */ ctx,
 ) {
   const proto = def.$prototype;
 
@@ -602,7 +607,7 @@ function renderFunctionFields(
   /** @type {any} */ name,
   /** @type {any} */ def,
   /** @type {any} */ textareaRow,
-  /** @type {{ renderLeftPanel: Function; renderCanvas: Function }} */ ctx,
+  /** @type {any} */ ctx,
 ) {
   const srcFields = def.$src
     ? html`
@@ -629,7 +634,7 @@ function renderFunctionFields(
             class="kv-add"
             style="margin-top:4px"
             @click=${() => {
-              S = { ...S, ui: { ...S.ui, editingFunction: { type: "def", defName: name } } };
+              ctx.updateSession({ ui: { editingFunction: { type: "def", defName: name } } });
               ctx.renderCanvas();
             }}
           >
@@ -650,18 +655,18 @@ function renderParameterEditorTemplate(
   /** @type {any} */ S,
   /** @type {any} */ name,
   /** @type {any} */ def,
-  /** @type {{ renderLeftPanel: Function; renderCanvas: Function }} */ ctx,
+  /** @type {any} */ ctx,
 ) {
   const params = (def.parameters || []).map(normParam);
   const isAdvanced = advancedParamOpen.has(name);
 
   if (!isAdvanced) {
     // Basic mode: name chips
-    return html`
-      <div class="style-row">
-        <div class="style-row-label">
-          <sp-field-label size="s">Parameters</sp-field-label>
-        </div>
+    return renderFieldRow({
+      prop: "parameters",
+      label: "Parameters",
+      hasValue: false,
+      widget: html`
         <div style="display:flex;flex-wrap:wrap;gap:4px;align-items:center">
           ${params.map(
             (/** @type {any} */ p, /** @type {any} */ i) => html`
@@ -708,16 +713,16 @@ function renderParameterEditorTemplate(
           }}
           >▸ Advanced</span
         >
-      </div>
-    `;
+      `,
+    });
   }
 
   // Advanced mode: full rows
-  return html`
-    <div class="style-row">
-      <div class="style-row-label">
-        <sp-field-label size="s">Parameters</sp-field-label>
-      </div>
+  return renderFieldRow({
+    prop: "parameters",
+    label: "Parameters",
+    hasValue: false,
+    widget: html`
       <div style="display:flex;flex-direction:column;gap:4px">
         ${params.map(
           (/** @type {any} */ p, /** @type {any} */ i) => html`
@@ -796,8 +801,8 @@ function renderParameterEditorTemplate(
         }}
         >▾ Basic</span
       >
-    </div>
-  `;
+    `,
+  });
 }
 
 /** Render CEM emits editor for function state entries. */
@@ -1023,16 +1028,12 @@ export function renderSchemaFieldsTemplate(
         ></sp-textfield>`;
       }
 
-      return html`
-        <div class="style-row">
-          <div class="style-row-label">
-            <sp-field-label size="s" title=${ps.description || nothing}
-              >${labelText}</sp-field-label
-            >
-          </div>
-          ${control}
-        </div>
-      `;
+      return renderFieldRow({
+        prop: ps.name,
+        label: labelText,
+        hasValue: false,
+        widget: control,
+      });
     });
 }
 
@@ -1044,7 +1045,7 @@ export function renderExternalPrototypeEditorTemplate(
   /** @type {any} */ S,
   /** @type {any} */ name,
   /** @type {any} */ def,
-  /** @type {{ renderLeftPanel: Function; renderCanvas: Function }} */ ctx,
+  /** @type {any} */ ctx,
 ) {
   // Schema-driven config fields (async with cache)
   /** @type {any} */