@jxsuite/studio 0.37.1 → 1.1.0

package/src/panels/properties-panel.ts

@@ -21,6 +21,7 @@ import { view } from "../view";
 import { componentRegistry } from "../files/components";
 import { widgetForType } from "./style-inputs";
 import { renderFieldRow } from "../ui/field-row";
+import { renderDynamicSlot, slotMode } from "../ui/dynamic-slot";
 import { spTextArea, spTextField } from "../ui/field-input";
 import {
   attrLabel,
@@ -41,11 +42,13 @@ import { getPlatform } from "../platform";
 import htmlMeta from "../../data/html-meta.json";
 
 import type {
+  JxAttributeValue,
   JxMutableNode,
   JxPrototypeDef,
   JxStateDefinition,
   JxStateObject,
 } from "@jxsuite/schema/types";
+import type { SlotMode } from "../ui/dynamic-slot";
 import type { JxPath } from "../state";
 import type { SignalDef } from "./signals-panel.js";
 
@@ -113,11 +116,13 @@ function bindableFieldRow(
   onChange: (v?: JsonValue) => void,
   filterFn: ((d: SignalDef) => boolean) | null = null,
   extraSignals: SignalOption[] | null = null,
+  fieldKey = `prop:${label}`,
+  caps: SlotMode[] = ["literal", "ref"],
 ) {
   const tab = activeTab.value;
   const defs = tab!.doc.document.state || {};
   const boundRef = isRef(rawValue) ? rawValue.$ref : null;
-  const isBound = boundRef !== null;
+  const isDynamic = slotMode(rawValue) !== "literal";
 
   const signalDefs = Object.entries(defs).filter(([, d]) =>
     filterFn
@@ -126,70 +131,38 @@ function bindableFieldRow(
         (d as JxPrototypeDef)?.$prototype !== "Function",
   );
 
-  const staticVal = isBound ? "" : (rawValue ?? "");
-  const fieldKey = `prop:${label}`;
+  const staticVal = isDynamic ? "" : (rawValue ?? "");
+  const draftKey = `prop:${label}`;
   const staticTpl =
     type === "textarea"
-      ? spTextArea(fieldKey, String(staticVal), (v: string) => onChange(v))
+      ? spTextArea(draftKey, String(staticVal), (v: string) => onChange(v))
       : type === "checkbox"
         ? html`<sp-checkbox
             ?checked=${Boolean(staticVal)}
             @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
           ></sp-checkbox>`
-        : spTextField(fieldKey, String(staticVal), (v: string) => onChange(v));
-
-  const boundTpl = html`
-    <sp-picker
-      size="s"
-      quiet
-      placeholder="— select signal —"
-      value=${boundRef ?? nothing}
-      @change=${(e: Event) => {
-        if ((e.target as HTMLInputElement).value) {
-          onChange({ $ref: (e.target as HTMLInputElement).value });
-        } else {
-          onChange();
-        }
-      }}
-    >
-      ${signalDefs.map(
-        ([defName]) => html`<sp-menu-item value=${`#/state/${defName}`}>${defName}</sp-menu-item>`,
-      )}
-      ${extraSignals
-        ? html`
-            <sp-menu-divider></sp-menu-divider>
-            ${extraSignals.map(
-              (sig: SignalOption) =>
-                html`<sp-menu-item value=${sig.value}>${sig.label}</sp-menu-item>`,
-            )}
-          `
-        : nothing}
-    </sp-picker>
-  `;
-
-  const onToggle = () => {
-    if (boundRef !== null) {
-      const defName = boundRef.startsWith("#/state/") ? boundRef.slice(8) : boundRef;
-      const staticDefault = defaultAsString(defs[defName]);
-      onChange(staticDefault || undefined);
-    } else if (signalDefs.length > 0) {
-      onChange({ $ref: `#/state/${signalDefs[0]![0]}` });
-    } else if (extraSignals && extraSignals.length > 0) {
-      onChange({ $ref: extraSignals[0]!.value });
-    }
-  };
-
+        : spTextField(draftKey, String(staticVal), (v: string) => onChange(v));
+
+  // De-escalating to literal restores the bound signal's declared default (old unbind behavior).
+  const literalDefault = boundRef
+    ? defaultAsString(defs[boundRef.startsWith("#/state/") ? boundRef.slice(8) : boundRef]) ||
+      undefined
+    : undefined;
+
+  const slot = renderDynamicSlot({
+    caps,
+    extraSignals,
+    fieldKey,
+    literalDefault,
+    onChange,
+    staticWidget: staticTpl,
+    stateDefs: signalDefs.map(([defName]) => defName),
+    value: rawValue,
+  });
   return html`
     <div class="field-row">
       <sp-field-label size="s">${label}</sp-field-label>
-      ${isBound ? boundTpl : staticTpl}
-      <sp-action-button
-        size="xs"
-        quiet
-        title=${isBound ? "Unbind (switch to static)" : "Bind to signal"}
-        @click=${onToggle}
-        >${isBound ? "\u26A1" : "\u2194"}</sp-action-button
-      >
+      ${slot.modeButton} ${slot.widget}
     </div>
   `;
 }
@@ -261,21 +234,42 @@ function renderRepeaterFieldsTemplate(
   _mapSignals: SignalOption[] | null,
 ) {
   return html`
-    ${bindableFieldRow("Items", "text", node.items, (v: JsonValue) =>
-      transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "items", v)),
+    ${bindableFieldRow(
+      "Items",
+      "text",
+      node.items,
+      (v: JsonValue) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "items", v)),
+      null,
+      null,
+      `prop|${path.join("/")}|items`,
     )}
     ${node.filter
-      ? bindableFieldRow("Filter", "text", node.filter, (v: JsonValue) =>
-          transactDoc(activeTab.value, (t) =>
-            mutateUpdateProperty(t, path, "filter", v || undefined),
-          ),
+      ? bindableFieldRow(
+          "Filter",
+          "text",
+          node.filter,
+          (v: JsonValue) =>
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateProperty(t, path, "filter", v || undefined),
+            ),
+          null,
+          null,
+          `prop|${path.join("/")}|filter`,
         )
       : nothing}
     ${node.sort
-      ? bindableFieldRow("Sort", "text", node.sort, (v: JsonValue) =>
-          transactDoc(activeTab.value, (t) =>
-            mutateUpdateProperty(t, path, "sort", v || undefined),
-          ),
+      ? bindableFieldRow(
+          "Sort",
+          "text",
+          node.sort,
+          (v: JsonValue) =>
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateProperty(t, path, "sort", v || undefined),
+            ),
+          null,
+          null,
+          `prop|${path.join("/")}|sort`,
         )
       : nothing}
     <div style="display:flex;gap:8px;margin-top:4px">
@@ -331,6 +325,10 @@ function renderSwitchFieldsTemplate(
         transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "$switch", v)),
       null,
       mapSignals,
+      `prop|${path.join("/")}|$switch`,
+      // No literal rung: a $switch is inherently dynamic.
+      // De-escalating to literal would delete the key and demote the node mid-cycle.
+      ["ref", "template"],
     )}
     <div
       style="font-size:var(--spectrum-font-size-50, 11px);font-weight:600;color:var(--fg-dim);margin:8px 0 4px;text-transform:uppercase;letter-spacing:0.05em"
@@ -410,7 +408,12 @@ function renderComponentPropsFieldsTemplate(
   const updateFn = isNpm
     ? (name: string, v?: JsonValue) =>
         transactDoc(activeTab.value, (t) =>
-          mutateUpdateAttribute(t, path, name, v === "" ? undefined : (v as string | undefined)),
+          mutateUpdateAttribute(
+            t,
+            path,
+            name,
+            v === "" ? undefined : (v as JxAttributeValue | undefined),
+          ),
         )
     : (name: string, v?: JsonValue) =>
         transactDoc(activeTab.value, (t) => mutateUpdateProp(t, path, name, v));
@@ -429,58 +432,21 @@ function renderComponentPropsFieldsTemplate(
       ) => {
         const rawValue = currentVals[prop.name];
         const boundRef = isRef(rawValue) ? rawValue.$ref : null;
-        const isBound = boundRef !== null;
         const hasVal = rawValue !== undefined && rawValue !== null;
         const parsed = parseCemType(prop.type);
         const onChange = (v?: JsonValue) => updateFn(prop.name, v);
-        const staticVal = isBound ? "" : String(rawValue ?? "");
+        const staticVal = slotMode(rawValue) === "literal" ? String(rawValue ?? "") : "";
 
         const clearProp = (e: Event) => {
           e.stopPropagation();
           updateFn(prop.name);
         };
 
-        const onToggleBind = () => {
-          if (boundRef !== null) {
-            const defName = boundRef.startsWith("#/state/") ? boundRef.slice(8) : boundRef;
-            const staticDefault = defaultAsString(defs[defName]);
-            onChange(staticDefault || undefined);
-          } else if (signalDefs.length > 0) {
-            onChange({ $ref: `#/state/${signalDefs[0]![0]}` });
-          } else if (extraSignals && extraSignals.length > 0) {
-            onChange({ $ref: extraSignals[0]!.value });
-          }
-        };
-
-        const boundTpl = html`
-          <sp-picker
-            size="s"
-            quiet
-            placeholder="— select signal —"
-            value=${boundRef ?? nothing}
-            @change=${(e: Event) => {
-              if ((e.target as HTMLInputElement).value) {
-                onChange({ $ref: (e.target as HTMLInputElement).value });
-              } else {
-                onChange();
-              }
-            }}
-          >
-            ${signalDefs.map(
-              ([defName]) =>
-                html`<sp-menu-item value=${`#/state/${defName}`}>${defName}</sp-menu-item>`,
-            )}
-            ${extraSignals
-              ? html`
-                  <sp-menu-divider></sp-menu-divider>
-                  ${extraSignals.map(
-                    (sig: SignalOption) =>
-                      html`<sp-menu-item value=${sig.value}>${sig.label}</sp-menu-item>`,
-                  )}
-                `
-              : nothing}
-          </sp-picker>
-        `;
+        // De-escalating to literal restores the bound signal's declared default (old unbind behavior).
+        const literalDefault = boundRef
+          ? defaultAsString(defs[boundRef.startsWith("#/state/") ? boundRef.slice(8) : boundRef]) ||
+            undefined
+          : undefined;
 
         /** @type {ReturnType<typeof setTimeout> | undefined} */
         let debounce: ReturnType<typeof setTimeout> | undefined;
@@ -532,6 +498,16 @@ function renderComponentPropsFieldsTemplate(
           );
         }
 
+        const slot = renderDynamicSlot({
+          caps: ["literal", "ref", "template"],
+          extraSignals,
+          fieldKey: `cprop|${path.join("/")}|${prop.name}`,
+          literalDefault,
+          onChange,
+          staticWidget: widgetTpl,
+          stateDefs: signalDefs.map(([defName]) => defName),
+          value: rawValue,
+        });
         return html`
           <div class="style-row" data-prop=${prop.name}>
             <div class="style-row-label">
@@ -541,15 +517,9 @@ function renderComponentPropsFieldsTemplate(
               <sp-field-label size="s" title=${prop.description || prop.name}
                 >${camelToLabel(prop.name)}</sp-field-label
               >
-              <sp-action-button
-                size="xs"
-                quiet
-                title=${isBound ? "Unbind (switch to static)" : "Bind to signal"}
-                @click=${onToggleBind}
-                >${isBound ? "\u26A1" : "\u2194"}</sp-action-button
-              >
+              ${slot.modeButton}
             </div>
-            ${isBound ? boundTpl : widgetTpl}
+            ${slot.widget}
           </div>
         `;
       },
@@ -1162,9 +1132,22 @@ export function renderPropertiesPanelTemplate(ctx: {
       ]
     : null;
 
+  // Signals offered to attribute/textContent bindings (handlers and Functions excluded).
+  const bindableSignals = Object.entries(tab.doc.document.state || {})
+    .filter(
+      ([, d]) =>
+        !(d as Record<string, unknown>)?.$handler &&
+        (d as JxPrototypeDef)?.$prototype !== "Function",
+    )
+    .map(([defName]) => defName);
+
   function renderAttrRow(attr: string, entry: HtmlMetaEntry, value: unknown) {
     const type = inferInputType(entry);
     const hasVal = value !== undefined && value !== "";
+    const commitAttr = (v?: JsonValue) =>
+      transactDoc(activeTab.value!, (t) =>
+        mutateUpdateAttribute(t, path, attr, v as JxAttributeValue | undefined),
+      );
 
     // Enhanced Link handling: only for anchors (a/area) with a plain (non-binding) value. Bindings
     // ($ref objects or ${…} template strings) fall through to the raw widget to stay editable.
@@ -1178,39 +1161,54 @@ export function renderPropertiesPanelTemplate(ctx: {
       }
     }
 
+    // Attribute strings are schema-legal at three rungs: literal, $ref binding, ${} template.
+    const attrSlot = (staticWidget: unknown) =>
+      renderDynamicSlot({
+        caps: ["literal", "ref", "template"],
+        extraSignals: mapSignals,
+        fieldKey: `attr|${path.join("/")}|${attr}`,
+        onChange: commitAttr,
+        staticWidget,
+        stateDefs: bindableSignals,
+        value,
+      });
+
     if (entry.type === "boolean") {
+      const checkboxWidget = html`
+        <sp-checkbox
+          size="s"
+          .checked=${live(Boolean(value))}
+          @change=${(e: Event) =>
+            commitAttr((e.target as HTMLInputElement).checked ? "" : undefined)}
+        >
+        </sp-checkbox>
+      `;
+      const slot = attrSlot(checkboxWidget);
       return renderFieldRow({
         hasValue: hasVal,
         label: attrLabel(entry, attr),
+        labelExtra: slot.modeButton,
         onClear: () => transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr)),
         prop: attr,
-        widget: html`
-          <sp-checkbox
-            size="s"
-            .checked=${live(Boolean(value))}
-            @change=${(e: Event) =>
-              transactDoc(activeTab.value, (t) =>
-                mutateUpdateAttribute(
-                  t,
-                  path,
-                  attr,
-                  (e.target as HTMLInputElement).checked ? "" : undefined,
-                ),
-              )}
-          >
-          </sp-checkbox>
-        `,
+        widget: slot.widget,
       });
     }
 
+    const literalWidget = widgetForType(
+      type,
+      entry,
+      attr,
+      isRef(value) ? "" : String(value || ""),
+      (v: string) => commitAttr(v || undefined),
+    );
+    const slot = attrSlot(literalWidget);
     return renderFieldRow({
       hasValue: hasVal,
       label: attrLabel(entry, attr),
+      labelExtra: slot.modeButton,
       onClear: () => transactDoc(activeTab.value, (t) => mutateUpdateAttribute(t, path, attr)),
       prop: attr,
-      widget: widgetForType(type, entry, attr, String(value || ""), (v: string) =>
-        transactDoc(activeTab.value!, (t) => mutateUpdateAttribute(t, path, attr, v || undefined)),
-      ),
+      widget: slot.widget,
     });
   }
 
@@ -1280,6 +1278,24 @@ export function renderPropertiesPanelTemplate(ctx: {
 
   // ── Build section templates ─────────────────────────────────────────
 
+  const textSlot = renderDynamicSlot({
+    caps: ["literal", "ref", "template"],
+    extraSignals: mapSignals,
+    fieldKey: `prop|${path.join("/")}|textContent`,
+    onChange: (v?: JsonValue) =>
+      transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "textContent", v)),
+    staticWidget: spTextArea(
+      "prop:textContent",
+      typeof node.textContent === "string" ? node.textContent : "",
+      (v: string) =>
+        transactDoc(activeTab.value, (t) =>
+          mutateUpdateProperty(t, path, "textContent", v || undefined),
+        ),
+    ),
+    stateDefs: bindableSignals,
+    value: node.textContent,
+  });
+
   const elemT = html`
     <sp-accordion-item
       label="Element"
@@ -1365,15 +1381,9 @@ export function renderPropertiesPanelTemplate(ctx: {
                       ></span>`
                     : nothing}
                   <sp-field-label size="s">Text Content</sp-field-label>
+                  ${textSlot.modeButton}
                 </div>
-                ${spTextArea(
-                  "prop:textContent",
-                  typeof node.textContent === "string" ? node.textContent : "",
-                  (v: string) =>
-                    transactDoc(activeTab.value, (t) =>
-                      mutateUpdateProperty(t, path, "textContent", v || undefined),
-                    ),
-                )}
+                ${textSlot.widget}
               </div>
             `
           : nothing}

package/src/panels/right-panel.ts

@@ -10,8 +10,7 @@ import { rightPanel, updateUi } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { createPanelScheduler } from "./panel-scheduler";
 import type { PanelScheduler } from "./panel-scheduler";
-import { activeTab, workspace } from "../workspace/workspace";
-import { consumePendingAgentPrompt, hasPendingAgentPrompt } from "../services/agent-seed";
+import { activeTab } from "../workspace/workspace";
 import { tabIcon } from "./activity-bar";
 import { eventsSidebarTemplate } from "./events-panel";
 import { isCustomElementDoc } from "./signals-panel";
@@ -21,12 +20,6 @@ import { renderStylePanelTemplate } from "./style-panel";
 import { renderPropertiesPanelTemplate } from "./properties-panel";
 
 import type { EffectScope } from "@vue/reactivity";
-import {
-  renderAiPanelTemplate,
-  bindAiPanelHost,
-  mountAiPanel,
-  seedAssistantPrompt,
-} from "./ai-panel";
 
 interface RightPanelCtx {
   navigateToComponent: (path: string) => void;
@@ -47,7 +40,6 @@ let _scheduler: PanelScheduler | null = null;
  */
 export function mount(ctx: RightPanelCtx) {
   _ctx = ctx;
-  mountAiPanel();
   _scheduler = createPanelScheduler({
     blockWhile: isColorPopoverOpen,
     render: _doRender,
@@ -87,7 +79,6 @@ export function unmount() {
   _propsContainer = null;
   _eventsContainer = null;
   _styleContainer = null;
-  _assistantContainer = null;
 }
 
 /**
@@ -101,7 +92,6 @@ export function render() {
 let _propsContainer: HTMLElement | null = null;
 let _eventsContainer: HTMLElement | null = null;
 let _styleContainer: HTMLElement | null = null;
-let _assistantContainer: HTMLElement | null = null;
 
 function _ensureContainers() {
   if (_propsContainer) {
@@ -113,12 +103,6 @@ function _ensureContainers() {
   _eventsContainer.className = "panel-body";
   _styleContainer = document.createElement("div");
   _styleContainer.className = "panel-body";
-  _assistantContainer = document.createElement("div");
-  _assistantContainer.className = "panel-body";
-  _assistantContainer.style.cssText = "display:flex;flex-direction:column;overflow:hidden";
-  // The AI panel owns a focus-guard-free rAF render loop into this container so
-  // Streaming repaints while the composer is focused (see ai-panel.ts).
-  bindAiPanelHost(_assistantContainer);
 }
 
 function _doRender() {
@@ -138,20 +122,17 @@ function _doRender() {
       selection: aTab.session.selection,
       ui: aTab.session.ui,
     };
-    // A pending agent prompt (stored by the New Project flow, possibly from another window)
-    // Forces the Assistant tab open — same updateUi mechanism the automation hook uses.
-    const root = workspace.projectRoot;
-    if (root && S.ui.rightTab !== "assistant" && hasPendingAgentPrompt(root)) {
-      updateUi("rightTab", "assistant");
-    }
-    const tab = S.ui.rightTab;
+    // Coerce stale values ("assistant" moved to the persistent chat sidebar; automation or a
+    // Restored session may still carry it).
+    const tab = ["properties", "events", "style"].includes(S.ui.rightTab)
+      ? S.ui.rightTab
+      : "properties";
 
     // Render tabs header
     const panelTabs = [
       { icon: "sp-icon-properties", label: "Properties", value: "properties" },
       { icon: "sp-icon-event", label: "Events", value: "events" },
       { icon: "sp-icon-brush", label: "Style", value: "style" },
-      { icon: "sp-icon-chat", label: "Assistant", value: "assistant" },
     ];
     const tabsT = html`
       <div class="panel-tabs">
@@ -178,21 +159,12 @@ function _doRender() {
     `;
 
     _ensureContainers();
-    const containers = [
-      _propsContainer,
-      _eventsContainer,
-      _styleContainer,
-      _assistantContainer,
-    ] as HTMLElement[];
-    const tabKeys = ["properties", "events", "style", "assistant"];
+    const containers = [_propsContainer, _eventsContainer, _styleContainer] as HTMLElement[];
+    const tabKeys = ["properties", "events", "style"];
 
     // Show/hide containers
     for (let i = 0; i < containers.length; i++) {
-      if (tabKeys[i] === tab) {
-        containers[i]!.style.display = tabKeys[i] === "assistant" ? "flex" : "";
-      } else {
-        containers[i]!.style.display = "none";
-      }
+      containers[i]!.style.display = tabKeys[i] === tab ? "" : "none";
     }
 
     // Render tabs into the right panel, append containers
@@ -224,16 +196,6 @@ function _doRender() {
       } catch (error) {
         console.error("[renderStylePanelTemplate]", error);
       }
-    } else if (tab === "assistant") {
-      litRender(renderAiPanelTemplate(), _assistantContainer!);
-      if (root) {
-        // Consume-on-read keeps repeated renders idempotent; seed after the panel template
-        // Has rendered so the assistant machinery is in place.
-        const prompt = consumePendingAgentPrompt(root);
-        if (prompt) {
-          requestAnimationFrame(() => void seedAssistantPrompt(prompt));
-        }
-      }
     }
   } catch (error) {
     console.error("right-panel render error:", error);