@jxsuite/studio 0.0.1

package/src/panels/data-explorer.js

@@ -0,0 +1,181 @@
+// ─── Data Explorer ──────────────────────────────────────────────────────────
+
+import { html, nothing } from "lit-html";
+
+/** Expanded data entries set — persists across renders. */
+const expandedDataKeys = new Set();
+
+/** Unwrap a Vue ref (has .value and .__v_isRef) to get the underlying value. */
+function unwrapSignal(/** @type {any} */ value) {
+  if (value && typeof value === "object" && value.__v_isRef) return value.value;
+  return value;
+}
+
+/** Type label for a signal value in the data explorer. */
+function dataTypeLabel(/** @type {any} */ value) {
+  const v = unwrapSignal(value);
+  if (v === null) return "null";
+  if (v === undefined) return "pending";
+  if (Array.isArray(v)) return `Array(${v.length})`;
+  if (typeof v === "object") return `{${Object.keys(v).length}}`;
+  return typeof v;
+}
+
+/**
+ * Render the data explorer tab showing live resolved values.
+ *
+ * @param {Record<string, any>} state - S.document.state (the $defs definitions)
+ * @param {Record<string, any> | null} liveScope - Cached live scope from runtime rendering
+ * @param {{
+ *   renderCanvas: () => void;
+ *   renderLeftPanel: () => void;
+ *   defCategory: (def: any) => string;
+ *   defBadgeLabel: (def: any) => string;
+ * }} callbacks
+ * @returns {any}
+ */
+export function renderDataExplorerTemplate(state, liveScope, callbacks) {
+  const { renderCanvas, renderLeftPanel, defCategory, defBadgeLabel } = callbacks;
+
+  if (!liveScope) {
+    return html`<div class="empty-state">No live data — render the document in preview mode</div>`;
+  }
+
+  const defs = state || {};
+  const entries = Object.entries(defs);
+
+  return html`
+    <div class="data-explorer-toolbar">
+      <sp-action-button
+        quiet
+        size="s"
+        class="data-refresh-btn"
+        @click=${() => {
+          renderCanvas();
+          setTimeout(() => renderLeftPanel(), 200);
+        }}
+      >
+        <sp-icon-refresh slot="icon"></sp-icon-refresh>
+        Refresh
+      </sp-action-button>
+    </div>
+    ${entries.length === 0
+      ? html`<div class="empty-state">No state defined</div>`
+      : entries.map(([name, def]) => {
+          const value = liveScope[name];
+          const unwrapped = unwrapSignal(value);
+          const isExpanded = expandedDataKeys.has(name);
+          return html`
+            <div class="data-row">
+              <div
+                class="data-row-header${isExpanded ? " expanded" : ""}"
+                @click=${() => {
+                  if (expandedDataKeys.has(name)) expandedDataKeys.delete(name);
+                  else expandedDataKeys.add(name);
+                  renderLeftPanel();
+                }}
+              >
+                <span class="signal-badge ${defCategory(def)}">${defBadgeLabel(def)}</span>
+                <span class="data-name">${name}</span>
+                <span class="data-type${unwrapped === null ? " data-pending" : ""}"
+                  >${dataTypeLabel(value)}</span
+                >
+              </div>
+              ${isExpanded
+                ? html`<div class="data-tree">${renderDataTreeTemplate(unwrapped, 0)}</div>`
+                : nothing}
+            </div>
+          `;
+        })}
+  `;
+}
+
+/**
+ * Recursively render a JSON value as a tree view (Lit template).
+ *
+ * @returns {any}
+ */
+export function renderDataTreeTemplate(
+  /** @type {any} */ value,
+  /** @type {any} */ depth,
+  maxDepth = 5,
+) {
+  const indent = `${(depth + 1) * 12}px`;
+
+  if (depth > maxDepth) {
+    return html`<div class="data-leaf data-ellipsis" style="padding-left:${indent}">…</div>`;
+  }
+
+  if (value === null || value === undefined) {
+    return html`<div class="data-leaf data-null" style="padding-left:${indent}">
+      ${String(value)}
+    </div>`;
+  }
+
+  if (typeof value !== "object") {
+    const text =
+      typeof value === "string" && value.length > 200
+        ? `"${value.slice(0, 200)}\u2026"`
+        : JSON.stringify(value);
+    return html`<div class="data-leaf data-${typeof value}" style="padding-left:${indent}">
+      ${text}
+    </div>`;
+  }
+
+  if (Array.isArray(value)) {
+    const cap = 20;
+    const items = value.slice(0, cap).map((item, i) => {
+      if (item === null || item === undefined || typeof item !== "object") {
+        const valText =
+          typeof item === "string" && item.length > 80
+            ? `"${item.slice(0, 80)}\u2026"`
+            : JSON.stringify(item);
+        return html`<div class="data-branch" style="padding-left:${indent}">
+          <span class="data-key">[${i}] </span
+          ><span class="data-value data-${item === null ? "null" : typeof item}">${valText}</span>
+        </div>`;
+      }
+      const label = Array.isArray(item) ? `Array(${item.length})` : `{${Object.keys(item).length}}`;
+      return html`
+        <div class="data-branch" style="padding-left:${indent}">
+          <span class="data-key">[${i}] </span
+          ><span class="data-value data-object-label">${label}</span>
+        </div>
+        ${renderDataTreeTemplate(item, depth + 1, maxDepth)}
+      `;
+    });
+    return html`${items}${value.length > cap
+      ? html`<div class="data-leaf data-ellipsis" style="padding-left:${indent}">
+          … ${value.length - cap} more
+        </div>`
+      : nothing}`;
+  }
+
+  // Object
+  const keys = Object.keys(value);
+  const cap = 30;
+  const items = keys.slice(0, cap).map((key) => {
+    const v = value[key];
+    if (v === null || v === undefined || typeof v !== "object") {
+      const valText =
+        typeof v === "string" && v.length > 80 ? `"${v.slice(0, 80)}\u2026"` : JSON.stringify(v);
+      return html`<div class="data-branch" style="padding-left:${indent}">
+        <span class="data-key">${key}: </span
+        ><span class="data-value data-${v === null ? "null" : typeof v}">${valText}</span>
+      </div>`;
+    }
+    const label = Array.isArray(v) ? `Array(${v.length})` : `{${Object.keys(v).length}}`;
+    return html`
+      <div class="data-branch" style="padding-left:${indent}">
+        <span class="data-key">${key}: </span
+        ><span class="data-value data-object-label">${label}</span>
+      </div>
+      ${renderDataTreeTemplate(v, depth + 1, maxDepth)}
+    `;
+  });
+  return html`${items}${keys.length > cap
+    ? html`<div class="data-leaf data-ellipsis" style="padding-left:${indent}">
+        … ${keys.length - cap} more
+      </div>`
+    : nothing}`;
+}

package/src/panels/events-panel.js

@@ -0,0 +1,235 @@
+import { getNodeAtPath, updateProperty, update } from "../store.js";
+import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+
+export const EVENT_NAMES = [
+  "onclick",
+  "oninput",
+  "onchange",
+  "onsubmit",
+  "onkeydown",
+  "onkeyup",
+  "onfocus",
+  "onblur",
+  "onmouseenter",
+  "onmouseleave",
+];
+
+/**
+ * @param {any} S - Studio state
+ * @param {{ isCustomElementDoc: () => boolean; renderCanvas: () => void }} helpers
+ */
+export function eventsSidebarTemplate(S, helpers) {
+  const { isCustomElementDoc, renderCanvas } = helpers;
+  if (!S.selection) return html`<div class="empty-state">Select an element to edit events</div>`;
+  const node = getNodeAtPath(S.document, S.selection);
+  if (!node) return html`<div class="empty-state">Node not found</div>`;
+
+  const defs = S.document.state || {};
+  const functionDefs = Object.entries(defs).filter(
+    ([, d]) => d.$prototype === "Function" || d.$handler,
+  );
+
+  // Declared CEM events (custom element docs)
+  /** @type {any} */
+  let declaredEventsT = nothing;
+  if (isCustomElementDoc()) {
+    const allEmits = [];
+    for (const [fnName, d] of Object.entries(defs)) {
+      if (Array.isArray(d.emits)) {
+        for (const ev of d.emits) allEmits.push({ ...ev, _fn: fnName });
+      }
+    }
+    if (allEmits.length > 0) {
+      declaredEventsT = html`
+        <div class="events-section">
+          <sp-field-label size="s">Declared Events</sp-field-label>
+          ${allEmits.map(
+            (ev) => html`
+              <div class="declared-event-row" title=${ev.description || ""}>
+                <code class="event-code">${ev.name || "(unnamed)"}</code>
+                <span class="event-source">← ${ev._fn}</span>
+                ${ev.type?.text ? html`<span class="event-type">${ev.type.text}</span>` : nothing}
+              </div>
+            `,
+          )}
+        </div>
+        <sp-divider size="s"></sp-divider>
+      `;
+    }
+  }
+
+  // Find existing event bindings
+  const eventKeys = Object.keys(node).filter((k) => {
+    if (!k.startsWith("on")) return false;
+    const v = node[k];
+    if (!v || typeof v !== "object") return false;
+    return v.$ref || v.$prototype === "Function";
+  });
+
+  return html`
+    <div class="events-panel">
+      ${declaredEventsT}
+      <div class="events-section">
+        ${eventKeys.length > 0
+          ? html` <sp-field-label size="s">Event Bindings</sp-field-label> `
+          : nothing}
+        ${eventKeys.map((evKey) => {
+          const evVal = node[evKey];
+          const isInline = evVal.$prototype === "Function";
+          return html`
+            <div class="event-binding">
+              <div class="event-row">
+                <sp-picker
+                  size="s"
+                  class="event-name"
+                  .value=${live(evKey)}
+                  @change=${(/** @type {any} */ e) => {
+                    const newKey = e.target.value;
+                    if (newKey && newKey !== evKey) {
+                      let s = updateProperty(S, S.selection, evKey, undefined);
+                      s = updateProperty(s, S.selection, newKey, node[evKey]);
+                      update(s);
+                    }
+                  }}
+                >
+                  ${[evKey, ...EVENT_NAMES.filter((n) => n !== evKey)].map(
+                    (n) => html`<sp-menu-item value=${n}>${n}</sp-menu-item>`,
+                  )}
+                </sp-picker>
+                <sp-picker
+                  size="s"
+                  class="event-mode"
+                  .value=${live(isInline ? "inline" : "ref")}
+                  @change=${(/** @type {any} */ e) => {
+                    if (e.target.value === "inline") {
+                      update(
+                        updateProperty(S, S.selection, evKey, {
+                          $prototype: "Function",
+                          body: "",
+                          parameters: [],
+                        }),
+                      );
+                    } else {
+                      const firstFn = functionDefs[0];
+                      update(
+                        updateProperty(
+                          S,
+                          S.selection,
+                          evKey,
+                          firstFn ? { $ref: `#/state/${firstFn[0]}` } : { $ref: "" },
+                        ),
+                      );
+                    }
+                  }}
+                >
+                  <sp-menu-item value="inline">inline</sp-menu-item>
+                  <sp-menu-item value="ref">$ref</sp-menu-item>
+                </sp-picker>
+                <sp-action-button
+                  size="xs"
+                  quiet
+                  @click=${() => update(updateProperty(S, S.selection, evKey, undefined))}
+                >
+                  <sp-icon-delete slot="icon"></sp-icon-delete>
+                </sp-action-button>
+              </div>
+              ${isInline
+                ? html`
+                    <div class="event-body-row">
+                      <sp-textfield
+                        size="s"
+                        multiline
+                        grows
+                        placeholder="// handler body"
+                        .value=${live(evVal.body || "")}
+                        @input=${(/** @type {any} */ e) => {
+                          update(
+                            updateProperty(S, S.selection, evKey, {
+                              $prototype: "Function",
+                              body: e.target.value,
+                              parameters: evVal.parameters || [],
+                            }),
+                          );
+                        }}
+                      >
+                      </sp-textfield>
+                      <sp-action-button
+                        size="xs"
+                        quiet
+                        title="Open in editor"
+                        @click=${() => {
+                          S = {
+                            ...S,
+                            ui: {
+                              ...S.ui,
+                              editingFunction: {
+                                type: "event",
+                                path: S.selection,
+                                eventKey: evKey,
+                              },
+                            },
+                          };
+                          renderCanvas();
+                        }}
+                      >
+                        <sp-icon-code slot="icon"></sp-icon-code>
+                      </sp-action-button>
+                    </div>
+                  `
+                : html`
+                    <sp-picker
+                      size="s"
+                      class="event-handler"
+                      .value=${live(evVal.$ref || "__none__")}
+                      @change=${(/** @type {any} */ e) => {
+                        if (e.target.value && e.target.value !== "__none__") {
+                          update(updateProperty(S, S.selection, evKey, { $ref: e.target.value }));
+                        } else {
+                          update(updateProperty(S, S.selection, evKey, undefined));
+                        }
+                      }}
+                    >
+                      <sp-menu-item value="__none__">— none —</sp-menu-item>
+                      ${functionDefs.map(
+                        ([fName]) =>
+                          html`<sp-menu-item value=${`#/state/${fName}`}>${fName}</sp-menu-item>`,
+                      )}
+                    </sp-picker>
+                  `}
+            </div>
+          `;
+        })}
+        <sp-action-button
+          size="s"
+          quiet
+          @click=${() => {
+            let evName = "onclick";
+            for (const name of EVENT_NAMES) {
+              if (!node[name]) {
+                evName = name;
+                break;
+              }
+            }
+            if (functionDefs.length > 0) {
+              update(
+                updateProperty(S, S.selection, evName, { $ref: `#/state/${functionDefs[0][0]}` }),
+              );
+            } else {
+              update(
+                updateProperty(S, S.selection, evName, {
+                  $prototype: "Function",
+                  body: "",
+                  parameters: [],
+                }),
+              );
+            }
+          }}
+        >
+          <sp-icon-add slot="icon"></sp-icon-add>
+          Add Event
+        </sp-action-button>
+      </div>
+    </div>
+  `;
+}