@jxsuite/studio 0.7.0 → 0.9.0

package/src/panels/pseudo-preview.js

@@ -0,0 +1,64 @@
+/**
+ * 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 { getState, getNodeAtPath } from "../store.js";
+import { view } from "../view.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the pseudo-preview module.
+ *
+ * @param {{ getActivePanel: Function; findCanvasElement: Function }} ctx
+ */
+export function initPseudoPreview(ctx) {
+  _ctx = ctx;
+}
+
+export function updateForcedPseudoPreview() {
+  if (view.forcedStyleTag) {
+    view.forcedStyleTag.remove();
+    view.forcedStyleTag = null;
+  }
+  if (view.forcedAttrEl) {
+    view.forcedAttrEl.removeAttribute("data-studio-forced");
+    view.forcedAttrEl = null;
+  }
+
+  const S = getState();
+  const sel = S.ui?.activeSelector;
+  if (!sel || !sel.startsWith(":") || !S.selection) return;
+
+  const panel = _ctx.getActivePanel();
+  if (!panel) return;
+  const el = _ctx.findCanvasElement(S.selection, panel.canvas);
+  if (!el) return;
+
+  const node = getNodeAtPath(S.document, S.selection);
+  if (!node?.style) return;
+  const activeTab = S.ui.activeMedia;
+  /** @type {any} */
+  const ctx = activeTab ? node.style[`@${activeTab}`] || {} : 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 {any} */ c) => `-${c.toLowerCase()}`)}: ${v} !important`,
+    )
+    .join("; ");
+  if (!cssProps) return;
+
+  el.setAttribute("data-studio-forced", "1");
+  view.forcedAttrEl = el;
+
+  const tag = document.createElement("style");
+  tag.textContent = `[data-studio-forced] { ${cssProps} }`;
+  document.head.appendChild(tag);
+  view.forcedStyleTag = tag;
+}

package/src/panels/right-panel.js

@@ -12,6 +12,7 @@ import { isCustomElementDoc } from "./signals-panel.js";
 import { ensureLitState } from "./shared.js";
 import { isColorPopoverOpen } from "../ui/color-selector.js";
 import { renderStylePanelTemplate } from "./style-panel.js";
+import { renderPropertiesPanelTemplate } from "./properties-panel.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -110,7 +111,7 @@ function rightPanelTemplate() {
   /** @type {any} */
   let bodyT = nothing;
   if (tab === "properties") {
-    bodyT = _ctx.propertiesSidebarTemplate();
+    bodyT = renderPropertiesPanelTemplate({ navigateToComponent: _ctx.navigateToComponent });
   } else if (tab === "events") {
     bodyT = eventsSidebarTemplate(S, {
       isCustomElementDoc: () => isCustomElementDoc(S),

package/src/panels/shared.js

@@ -39,3 +39,77 @@ export function ensureLitState(container) {
     delete container["_$litPart$"];
   }
 }
+
+export const unsafeTags = new Set(["script", "style", "link", "iframe", "object", "embed"]);
+
+/**
+ * Generate a sensible default Jx node for a given tag name.
+ *
+ * @param {any} tag
+ */
+export function defaultDef(tag) {
+  /** @type {any} */
+  const def = { tagName: tag };
+  if (/^h[1-6]$/.test(tag)) def.textContent = "Heading";
+  else if (tag === "p") def.textContent = "Paragraph text";
+  else if (
+    tag === "span" ||
+    tag === "strong" ||
+    tag === "em" ||
+    tag === "small" ||
+    tag === "mark" ||
+    tag === "code" ||
+    tag === "abbr" ||
+    tag === "q" ||
+    tag === "sub" ||
+    tag === "sup" ||
+    tag === "time"
+  )
+    def.textContent = "Text";
+  else if (tag === "a") {
+    def.textContent = "Link";
+    def.attributes = { href: "#" };
+  } else if (tag === "button") def.textContent = "Button";
+  else if (tag === "label") def.textContent = "Label";
+  else if (tag === "legend") def.textContent = "Legend";
+  else if (tag === "caption") def.textContent = "Caption";
+  else if (tag === "summary") def.textContent = "Summary";
+  else if (
+    tag === "li" ||
+    tag === "dt" ||
+    tag === "dd" ||
+    tag === "th" ||
+    tag === "td" ||
+    tag === "option"
+  )
+    def.textContent = "Item";
+  else if (tag === "blockquote") def.textContent = "Quote";
+  else if (tag === "pre") def.textContent = "Preformatted text";
+  else if (tag === "input") def.attributes = { type: "text", placeholder: "Enter text..." };
+  else if (tag === "img") def.attributes = { src: "", alt: "Image" };
+  else if (tag === "iframe") def.attributes = { src: "" };
+  else if (tag === "select") def.children = [{ tagName: "option", textContent: "Option 1" }];
+  else if (tag === "ul" || tag === "ol") def.children = [{ tagName: "li", textContent: "Item" }];
+  else if (tag === "dl")
+    def.children = [
+      { tagName: "dt", textContent: "Term" },
+      { tagName: "dd", textContent: "Definition" },
+    ];
+  else if (tag === "table")
+    def.children = [
+      {
+        tagName: "thead",
+        children: [{ tagName: "tr", children: [{ tagName: "th", textContent: "Header" }] }],
+      },
+      {
+        tagName: "tbody",
+        children: [{ tagName: "tr", children: [{ tagName: "td", textContent: "Cell" }] }],
+      },
+    ];
+  else if (tag === "details")
+    def.children = [
+      { tagName: "summary", textContent: "Summary" },
+      { tagName: "p", textContent: "Detail content" },
+    ];
+  return def;
+}