@jxsuite/studio 0.6.2 → 0.8.0

package/src/panels/right-panel.js

@@ -11,6 +11,8 @@ import { eventsSidebarTemplate } from "./events-panel.js";
 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;
@@ -21,7 +23,7 @@ let _unsub = null;
 /**
  * Mount the right panel.
  *
- * @param {any} ctx — { propertiesSidebarTemplate, renderStylePanelTemplate, renderCanvas,
+ * @param {any} ctx — { propertiesSidebarTemplate, getCanvasMode, renderCanvas,
  *   updateForcedPseudoPreview }
  */
 export function mount(ctx) {
@@ -109,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),
@@ -117,7 +119,7 @@ function rightPanelTemplate() {
     });
   } else if (tab === "style") {
     try {
-      bodyT = _ctx.renderStylePanelTemplate();
+      bodyT = renderStylePanelTemplate({ getCanvasMode: _ctx.getCanvasMode });
     } catch (/** @type {any} */ e) {
       console.error("[renderStylePanelTemplate]", e);
     }

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;
+}

package/src/panels/style-inputs.js

@@ -0,0 +1,176 @@
+/** Style input widgets — keyword, select, combobox, and font renderers for the style panel. */
+
+import { html } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { getState, update, updateStyle, debouncedStyleCommit } from "../store.js";
+import { widgetForType as _widgetForType } from "../ui/widgets.js";
+import { kebabToLabel, friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
+import {
+  TYPO_PREVIEW_PROPS,
+  currentFontFamily,
+  getFontVars,
+  getCssInitialMap,
+  camelToKebab,
+} from "./style-utils.js";
+
+/**
+ * Dual-mode keyword input — shared by select (enum) and combobox (examples) widgets.
+ *
+ * @param {any} options @param {any} prop @param {any} value @param {any} onChange
+ */
+export function renderKeywordInput(options, prop, value, onChange) {
+  const cssInitialMap = getCssInitialMap();
+  const isTypoPreview = TYPO_PREVIEW_PROPS.has(prop) || prop === "fontWeight";
+  const font = isTypoPreview ? currentFontFamily() : "";
+  const cssProp = isTypoPreview ? camelToKebab(prop) : "";
+
+  const comboOptions = options.map((/** @type {any} */ v) => {
+    const label = v.includes("-")
+      ? kebabToLabel(v)
+      : v.replace(/^./, (/** @type {any} */ c) => c.toUpperCase());
+    const style = isTypoPreview ? `${cssProp}: ${v};${font ? ` font-family: ${font}` : ""}` : "";
+    return { value: v, label, style };
+  });
+
+  return html`<jx-value-selector
+    size="s"
+    .value=${value || ""}
+    placeholder=${cssInitialMap.get(prop) || ""}
+    .options=${comboOptions}
+    @change=${(/** @type {any} */ e) => onChange(e.target.value)}
+    @input=${debouncedStyleCommit(`kw:${prop}`, 400, (/** @type {any} */ e) =>
+      onChange(e.target.value),
+    )}
+  ></jx-value-selector>`;
+}
+
+/** @param {any} entry @param {any} prop @param {any} value @param {any} onChange */
+export function renderSelectInput(entry, prop, value, onChange) {
+  return renderKeywordInput(entry.enum || [], prop, value, onChange);
+}
+
+/** @param {any} preset @param {any} onChange */
+function handleFontPresetSelection(preset, onChange) {
+  const S = getState();
+  const varName = friendlyNameToVar(preset.title, "--font-");
+  if (!S.document?.style?.[varName]) {
+    update(updateStyle(S, [], varName, preset.value));
+  }
+  onChange(`var(${varName})`);
+}
+
+/** @param {any} val @param {any} presets @param {any} onChange */
+function handleFontSelection(val, presets, onChange) {
+  if (!val) return;
+  if (val.startsWith("__preset__:")) {
+    const title = val.slice("__preset__:".length);
+    const preset = presets.find((/** @type {any} */ p) => p.title === title);
+    if (preset) handleFontPresetSelection(preset, onChange);
+    return;
+  }
+  if (val.startsWith("--")) {
+    onChange(`var(${val})`);
+    return;
+  }
+  const preset = presets.find((/** @type {any} */ p) => p.title === val);
+  if (preset) {
+    handleFontPresetSelection(preset, onChange);
+    return;
+  }
+  const fontVars = getFontVars();
+  const matchedVar = fontVars.find(
+    (/** @type {any} */ fv) => varDisplayName(fv.name, "--font-") === val,
+  );
+  if (matchedVar) {
+    onChange(`var(${matchedVar.name})`);
+    return;
+  }
+  onChange(val);
+}
+
+/**
+ * Build font options array for jx-value-selector.
+ *
+ * @param {any[]} fontVars @param {any[]} presets
+ * @returns {{ value: string; label: string; style: string }[] | { divider: true }[]}
+ */
+export function buildFontOptions(fontVars, presets) {
+  /** @type {any[]} */
+  const opts = fontVars.map((/** @type {any} */ fv) => ({
+    value: fv.name,
+    label: varDisplayName(fv.name, "--font-"),
+    style: `font-family: ${fv.value}`,
+  }));
+  const unadded = presets.filter(
+    (/** @type {any} */ p) =>
+      !fontVars.some((/** @type {any} */ fv) => fv.name === friendlyNameToVar(p.title, "--font-")),
+  );
+  if (unadded.length > 0 && opts.length > 0) opts.push({ divider: true });
+  for (const p of unadded) {
+    opts.push({
+      value: "__preset__:" + p.title,
+      label: p.title,
+      style: `font-family: ${p.value}`,
+    });
+  }
+  return opts;
+}
+
+/** @param {any} entry @param {any} prop @param {any} value @param {any} onChange */
+export function renderComboboxInput(entry, prop, value, onChange) {
+  const cssInitialMap = getCssInitialMap();
+  const fontVars = prop === "fontFamily" ? getFontVars() : [];
+  const presets = entry.presets || [];
+  const examples = entry.examples || [];
+
+  if (prop === "fontFamily") {
+    const varMatch = typeof value === "string" && value.match(/^var\((--[^)]+)\)$/);
+    const comboValue = varMatch ? varMatch[1] : value || "";
+    const fontOptions = buildFontOptions(fontVars, presets);
+    return html`<jx-value-selector
+      size="s"
+      .value=${comboValue}
+      placeholder=${cssInitialMap.get("fontFamily") || ""}
+      .options=${fontOptions}
+      @change=${(/** @type {any} */ e) => handleFontSelection(e.target.value, presets, onChange)}
+      @input=${debouncedStyleCommit("combo:fontFamily", 400, (/** @type {any} */ e) =>
+        onChange(e.target.value),
+      )}
+    ></jx-value-selector>`;
+  }
+
+  if (examples.length > 0) {
+    return renderKeywordInput(examples, prop, value, onChange);
+  }
+
+  return html`
+    <sp-textfield
+      size="s"
+      placeholder=${cssInitialMap.get(prop) || ""}
+      .value=${live(value || "")}
+      @input=${debouncedStyleCommit(`combo:${prop}`, 400, (/** @type {any} */ e) =>
+        onChange(e.target.value),
+      )}
+    ></sp-textfield>
+  `;
+}
+
+/**
+ * Style-aware widgetForType — wraps the generic widget renderer with style-specific select/combobox
+ * inputs and CSS initial-value placeholders.
+ */
+export function widgetForType(
+  /** @type {any} */ type,
+  /** @type {any} */ entry,
+  /** @type {any} */ prop,
+  /** @type {any} */ value,
+  /** @type {any} */ onCommit,
+  /** @type {any} */ opts = {},
+) {
+  const cssInitialMap = getCssInitialMap();
+  return _widgetForType(type, entry, prop, value, onCommit, {
+    placeholder: opts.placeholder || cssInitialMap.get(prop) || "",
+    renderSelect: renderSelectInput,
+    renderCombobox: renderComboboxInput,
+  });
+}