@jxsuite/studio 1.0.0 → 1.1.0

package/src/panels/style-panel.ts

@@ -22,6 +22,7 @@ import {
 } from "../tabs/transact";
 import { inferInputType, propLabel } from "../utils/studio-utils";
 import { renderFieldRow } from "../ui/field-row";
+import { renderDynamicSlot } from "../ui/dynamic-slot";
 import { parseMediaEntries } from "../utils/canvas-media";
 import { getEffectiveMedia, getEffectiveStyle } from "../site-context";
 import { computeInheritedStyle } from "../utils/inherited-style";
@@ -41,6 +42,7 @@ import { widgetForType } from "./style-inputs";
 
 import type { Tab } from "../tabs/tab";
 import type { JxPath } from "../state";
+import type { JsonValue } from "../types";
 import type { JxMutableNode, JxStyle } from "@jxsuite/schema/types";
 
 interface CssLonghand {
@@ -96,17 +98,29 @@ function renderStyleRow(
   isWarning: boolean,
   gridMode: boolean,
   inheritedValue: string | undefined,
+  templateSignals: string[] = [],
+  fieldKey: string = prop,
 ) {
   const type = inferInputType(entry);
   const hasVal = value !== undefined && value !== "";
   const placeholder = !hasVal && inheritedValue ? String(inheritedValue) : "";
   const spanVal = gridMode && (entry as Record<string, unknown>).$span === 2 ? 2 : undefined;
+  // Style values are schema-legal at two rungs: literal and ${} template (no $ref in JxStyle).
+  const slot = renderDynamicSlot({
+    caps: ["literal", "template"],
+    fieldKey,
+    onChange: (v?: JsonValue) => onCommit(v === undefined || v === "" ? undefined : String(v)),
+    staticWidget: widgetForType(type, entry, prop, value, onCommit, { placeholder }),
+    stateDefs: templateSignals,
+    value,
+  });
   return renderFieldRow({
     prop,
     label: propLabel(entry, prop),
     hasValue: hasVal,
     onClear: onDelete,
-    widget: widgetForType(type, entry, prop, value, onCommit, { placeholder }),
+    widget: slot.widget,
+    labelExtra: slot.modeButton,
     ...(spanVal != null && { span: spanVal }),
     warning: isWarning,
   });
@@ -287,6 +301,14 @@ function styleSidebarTemplate(
   const tab = activeTab.value!;
   const sel = tab.session.selection as JxPath;
   const style = effectiveStyle || node.style || {};
+  // Signals seeding the ${} template default when a style value escalates (no $ref in JxStyle).
+  const templateSignals = Object.entries(tab.doc.document.state || {})
+    .filter(
+      ([, d]) =>
+        !(d as Record<string, unknown>)?.$handler &&
+        (d as Record<string, unknown>)?.$prototype !== "Function",
+    )
+    .map(([defName]) => defName);
   const { sizeBreakpoints } = parseMediaEntries(getEffectiveMedia(tab.doc.document.$media));
   const mediaNames = sizeBreakpoints.map((bp) => bp.name);
   const mediaTab = activeMediaTab || null;
@@ -660,6 +682,8 @@ function styleSidebarTemplate(
                 isWarning,
                 sec.$layout === "grid",
                 inheritedStyle[prop] as string | undefined,
+                templateSignals,
+                `style|${sel.join("/")}|${mediaTab ?? ""}|${activeSelector ?? ""}|${prop}`,
               ),
             );
           }

package/src/panels/stylebook-panel.ts

@@ -43,7 +43,6 @@ interface StylebookCtx {
   ) => { tpl: TemplateResult; panel: CanvasPanel };
   applyTransform: () => void;
   observeCenterUntilStable: () => void;
-  renderZoomIndicator: () => void;
   updateActivePanelHeaders: () => void;
 }
 
@@ -182,7 +181,6 @@ export function renderStylebookMode(ctx: StylebookCtx) {
 
   ctx.applyTransform();
   ctx.observeCenterUntilStable();
-  ctx.renderZoomIndicator();
 }
 
 /**

package/src/panels/tab-bar.ts

@@ -13,12 +13,14 @@ import { html, render as litRender, nothing } from "lit-html";
 import { projectState, updateUi } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
+import { applyTransform, fitToScreen, resetZoom, setEditZoom } from "../canvas/canvas-utils";
 import { getEffectiveLayoutPath, getEffectiveMedia } from "../site-context";
 import { dynamicRouteParams, loadParamValues, pagePathsDef } from "../page-params";
+import { componentPropEntries, isComponentDoc } from "../component-props";
 import { mediaDisplayName } from "./shared";
 import type { ParamValues } from "../page-params";
 import type { Tab } from "../tabs/tab";
-import type { DocumentStackEntry, FunctionEditDef } from "../types";
+import type { DocumentStackEntry, FormulaEditDef, FunctionEditDef, JsonValue } from "../types";
 import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
 
@@ -26,6 +28,7 @@ interface TabBarCtx {
   navigateBack: () => void;
   navigateToLevel: (level: number) => void;
   closeFunctionEditor: () => void;
+  closeFormulaWorkspace: () => void;
   exportFile: () => void;
   getCanvasMode: () => string;
   parseMediaEntries: (media: Record<string, string> | null | undefined) => {
@@ -67,11 +70,15 @@ export function mount(host: HTMLElement, ctx: TabBarCtx) {
         void tab.documentPath;
         void tab.session.documentStack.length;
         void tab.session.ui.canvasMode;
+        void tab.session.ui.editZoom;
+        void tab.session.ui.editingFormula;
         void tab.session.ui.editingFunction;
         void tab.session.ui.featureToggles;
         void tab.session.ui.preview;
         void tab.session.ui.previewParams;
+        void tab.session.ui.previewProps;
         void tab.session.ui.showLayout;
+        void tab.session.ui.zoom;
       }
       render();
     });
@@ -110,9 +117,13 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
   };
   const canvasMode = ctx.getCanvasMode();
   const editing = S.ui.editingFunction as FunctionEditDef | null;
+  const formulaEditing = S.ui.editingFormula as FormulaEditDef | null;
+  // Any full-screen canvas takeover (function editor or formula workspace) suppresses the zoom
+  // Widget, the view-settings cluster, and the Export action below.
+  const takeover = Boolean(editing) || Boolean(formulaEditing);
   const hasStack = S.documentStack && S.documentStack.length > 0;
 
-  // ── Left region: navigation context (function editor takes precedence over the stack) ──
+  // ── Left region: navigation context (function editor > formula workspace > document stack) ──
   let navTpl: TemplateResult | typeof nothing = nothing;
   if (editing) {
     const docName = S.documentPath?.split("/").pop() || S.document?.tagName || "document";
@@ -128,6 +139,27 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
         <span class="breadcrumb-item current">${funcLabel}</span>
       </div>
     `;
+  } else if (formulaEditing) {
+    const docName = S.documentPath?.split("/").pop() || S.document?.tagName || "document";
+    const formulaLabel =
+      formulaEditing.type === "def"
+        ? `fx ${formulaEditing.defName}`
+        : `fx ${formulaEditing.eventKey}`;
+    navTpl = html`
+      <div class="breadcrumb">
+        <sp-action-button
+          size="s"
+          title="Close formula workspace"
+          @click=${ctx.closeFormulaWorkspace}
+        >
+          <sp-icon-back slot="icon"></sp-icon-back>
+          Back
+        </sp-action-button>
+        <span class="breadcrumb-item">${docName}</span>
+        <span class="breadcrumb-sep"> › </span>
+        <span class="breadcrumb-item current">${formulaLabel}</span>
+      </div>
+    `;
   } else if (hasStack) {
     navTpl = html`
       <div class="breadcrumb">
@@ -150,6 +182,82 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
     `;
   }
 
+  // ── Left region: zoom widget (every mode with a zoom concept) ──
+  // Gates on the EFFECTIVE mode: edit drives the content-reflow `editZoom`, while design /
+  // Stylebook / git-diff / preview all render on the panzoom surface and drive `ui.zoom` (with the
+  // Panzoom-only fit-to-screen action).
+  let zoomTpl: TemplateResult | typeof nothing = nothing;
+  if (!takeover && canvasMode === "edit") {
+    const editZoom = S.ui.editZoom ?? 1;
+    zoomTpl = html`
+      <sp-action-group compact size="s" class="tb-zoom">
+        <sp-action-button
+          size="s"
+          title="Zoom out (Ctrl+-)"
+          @click=${() => setEditZoom((tab.session.ui.editZoom ?? 1) / 1.2)}
+        >
+          −
+        </sp-action-button>
+        <sp-action-button
+          size="s"
+          class="tb-zoom-label"
+          title="Reset to 100% (Ctrl+0)"
+          @click=${() => setEditZoom(1)}
+        >
+          ${Math.round(editZoom * 100)}%
+        </sp-action-button>
+        <sp-action-button
+          size="s"
+          title="Zoom in (Ctrl+=)"
+          @click=${() => setEditZoom((tab.session.ui.editZoom ?? 1) * 1.2)}
+        >
+          +
+        </sp-action-button>
+      </sp-action-group>
+    `;
+  } else if (
+    !takeover &&
+    (canvasMode === "design" ||
+      canvasMode === "stylebook" ||
+      canvasMode === "git-diff" ||
+      canvasMode === "preview")
+  ) {
+    const zoom = S.ui.zoom ?? 1;
+    const setPanZoom = (next: number) => {
+      tab.session.ui.zoom = Math.min(5, Math.max(0.05, next));
+      applyTransform();
+    };
+    zoomTpl = html`
+      <sp-action-group compact size="s" class="tb-zoom">
+        <sp-action-button
+          size="s"
+          title="Zoom out (Ctrl+-)"
+          @click=${() => setPanZoom((tab.session.ui.zoom ?? 1) / 1.2)}
+        >
+          −
+        </sp-action-button>
+        <sp-action-button
+          size="s"
+          class="tb-zoom-label"
+          title="Reset to 100% (Ctrl+0)"
+          @click=${() => resetZoom()}
+        >
+          ${Math.round(zoom * 100)}%
+        </sp-action-button>
+        <sp-action-button
+          size="s"
+          title="Zoom in (Ctrl+=)"
+          @click=${() => setPanZoom((tab.session.ui.zoom ?? 1) * 1.2)}
+        >
+          +
+        </sp-action-button>
+        <sp-action-button size="s" title="Fit to screen" @click=${() => fitToScreen()}>
+          Fit
+        </sp-action-button>
+      </sp-action-group>
+    `;
+  }
+
   // ── Right region: view settings cluster (edit/design base modes only) ──
   // Gates on the BASE mode (not the effective mode): the cluster stays visible while the preview
   // Toggle is on so it can be toggled back off.
@@ -160,10 +268,11 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
     (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/")),
   );
   let settingsTpl: TemplateResult | typeof nothing = nothing;
-  if (!editing && (baseMode === "edit" || baseMode === "design")) {
+  if (!takeover && (baseMode === "edit" || baseMode === "design")) {
     const canPreview = tab.capabilities.modes.includes("preview");
     const hasLayout = isPage && Boolean(getEffectiveLayoutPath(S.document?.$layout));
-    const pickersTpl = isPage ? paramPickersTpl(tab) : nothing;
+    // Pages get route-param pickers; component docs get test-prop fields (M6) — same slot.
+    const pickersTpl = isPage ? paramPickersTpl(tab) : propFieldsTpl(tab);
     const previewTpl = canPreview
       ? html`
           <sp-action-button
@@ -230,7 +339,7 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
 
   // ── Right region: mode actions (Code-mode Export) ──
   const exportTpl =
-    !editing && canvasMode === "source"
+    !takeover && canvasMode === "source"
       ? html`
           <sp-action-button size="s" @click=${ctx.exportFile}>
             <sp-icon-export slot="icon"></sp-icon-export>
@@ -241,7 +350,7 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
 
   return html`
     <div class="tab-bar">
-      ${navTpl}
+      ${navTpl} ${zoomTpl}
       <div class="tb-spacer"></div>
       ${settingsTpl} ${togglesTpl} ${exportTpl}
     </div>
@@ -342,3 +451,63 @@ function paramPickersTpl(tab: Tab): TemplateResult | typeof nothing {
     )}
   `;
 }
+
+// ── Component test-prop fields (M6) ──────────────────────────────────────────
+// The previewParams mirror for component docs: one small field per prop entry (the doc's
+// Plain-data state entries), committed on change so typing never re-renders the bar mid-edit. A
+// Value parses as JSON when it can (numbers, booleans, arrays) and falls back to the raw string;
+// Clearing a field removes the override so the prop returns to its authored default.
+
+/**
+ * @param {string} raw
+ * @returns {JsonValue}
+ */
+function parsePropValue(raw: string): JsonValue {
+  try {
+    return JSON.parse(raw) as JsonValue;
+  } catch {
+    return raw;
+  }
+}
+
+/**
+ * @param {Tab} tab
+ * @returns {TemplateResult | typeof nothing}
+ */
+function propFieldsTpl(tab: Tab): TemplateResult | typeof nothing {
+  const doc = tab.doc.document;
+  if (!isComponentDoc(doc)) {
+    return nothing;
+  }
+  const entries = componentPropEntries(doc);
+  if (entries.length === 0) {
+    return nothing;
+  }
+  const { previewProps } = tab.session.ui;
+  const display = (v: JsonValue | undefined) =>
+    v === undefined ? "" : typeof v === "string" ? v : JSON.stringify(v);
+  return html`
+    ${entries.map(
+      ({ name }) => html`
+        <sp-textfield
+          size="s"
+          quiet
+          class="tab-bar-prop"
+          placeholder=${name}
+          title=${`Test value for ${name}`}
+          .value=${display(previewProps?.[name])}
+          @change=${(e: Event) => {
+            const raw = (e.target as HTMLInputElement).value;
+            const next = { ...tab.session.ui.previewProps };
+            if (raw === "") {
+              delete next[name];
+            } else {
+              next[name] = parsePropValue(raw);
+            }
+            updateUi("previewProps", Object.keys(next).length > 0 ? next : null);
+          }}
+        ></sp-textfield>
+      `,
+    )}
+  `;
+}

package/src/panels/tab-strip.ts

@@ -11,14 +11,18 @@ import { classMap } from "lit-html/directives/class-map.js";
 import { repeat } from "lit-html/directives/repeat.js";
 import { effect, effectScope } from "../reactivity";
 import { activateTab, closeTab, workspace } from "../workspace/workspace";
+import { gridTabLabel } from "../grid/grid-source";
 import type { Tab } from "../tabs/tab";
 import { showConfirmDialog } from "../ui/layers";
+import { collabState } from "../collab/collab-state";
 import type { EffectScope } from "@vue/reactivity";
 
 let _host: HTMLElement | null = null;
 
 let _scope: EffectScope | null = null;
 
+let _lastActiveId: string | null = null;
+
 /**
  * Mount the tab strip into the given host element.
  *
@@ -26,6 +30,7 @@ let _scope: EffectScope | null = null;
  */
 export function mount(host: HTMLElement) {
   _host = host;
+  _lastActiveId = null;
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -52,13 +57,14 @@ function render() {
   }
 
   if (workspace.tabOrder.length === 0) {
+    _lastActiveId = null;
     litRender(nothing, _host);
     return;
   }
 
   litRender(
     html`
-      <div class="tab-strip">
+      <div class="tab-strip" @wheel=${onWheel}>
         ${repeat(
           workspace.tabOrder,
           (id) => id,
@@ -80,7 +86,7 @@ function render() {
                     void requestClose(id);
                   }
                 }}
-                title=${tab.documentPath || "Untitled"}
+                title=${tab.documentPath || gridTabLabel(tab.id) || "Untitled"}
               >
                 <span class="tab-strip-label">${label}</span>
                 ${isDirty ? html`<span class="tab-strip-dirty">●</span>` : nothing}
@@ -101,10 +107,40 @@ function render() {
     `,
     _host,
   );
+
+  if (workspace.activeTabId !== _lastActiveId) {
+    _lastActiveId = workspace.activeTabId;
+    _host
+      .querySelector(".tab-strip-tab.active")
+      ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+}
+
+/**
+ * Scroll the strip horizontally from wheel motion so overflowed tabs stay reachable — a plain mouse
+ * wheel only emits deltaY, which does nothing in an overflow-x container. The scrollbar is hidden
+ * by design, so the wheel is the primary way to reach off-screen tabs.
+ *
+ * @param {WheelEvent} e
+ */
+function onWheel(e: WheelEvent) {
+  if (e.ctrlKey) {
+    return;
+  }
+  const el = e.currentTarget as HTMLElement;
+  if (el.scrollWidth <= el.clientWidth) {
+    return;
+  }
+  const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+  if (!delta) {
+    return;
+  }
+  e.preventDefault();
+  el.scrollLeft += delta;
 }
 
 /**
- * Derive a short label from the tab's documentPath.
+ * Derive a short label from the tab's documentPath (virtual grid tabs label from their id).
  *
  * @param {Tab} tab
  * @returns {string}
@@ -112,14 +148,34 @@ function render() {
 function tabLabel(tab: Tab) {
   const path = tab.documentPath;
   if (!path) {
-    return "Untitled";
+    return gridTabLabel(tab.id) ?? "Untitled";
   }
   const parts = path.split("/");
   return parts.at(-1);
 }
 
 /**
- * Close a tab, prompting if dirty.
+ * True when closing this tab would lose unsaved work the user must be warned about: the tab is
+ * dirty AND either it is not co-edited, or this client is the last active collaborator on the doc
+ * (no other peer is focused on its path). When peers remain, the shared session lives on and the
+ * edits are still on the server, so closing is safe.
+ *
+ * @param {Tab} tab
+ */
+export function shouldWarnOnClose(tab: Tab): boolean {
+  if (!tab.doc.dirty) {
+    return false;
+  }
+  const state = collabState(tab);
+  if (!state.active) {
+    return true;
+  }
+  const peersHere = state.peers.filter((p) => p.state?.focusedPath === tab.documentPath);
+  return peersHere.length === 0;
+}
+
+/**
+ * Close a tab, prompting if closing would lose unsaved work.
  *
  * @param {string} id
  */
@@ -128,7 +184,7 @@ async function requestClose(id: string) {
   if (!tab) {
     return;
   }
-  if (tab.doc.dirty) {
+  if (shouldWarnOnClose(tab)) {
     const confirmed = await showConfirmDialog(
       "Unsaved Changes",
       `"${tabLabel(tab)}" has unsaved changes. Close without saving?`,

package/src/panels/toolbar.ts

@@ -43,6 +43,19 @@ let _rootEl: HTMLElement | null = null;
 
 let _ctx: ToolbarCtx | null = null;
 
+/** Test override for the mac CSD layout — happy-dom forbids redefining navigator.platform. */
+let _isMacOverride: boolean | null = null;
+
+/** Force (or restore, with null) the mac/non-mac window-control layout detection. */
+export function setMacPlatformForTests(value: boolean | null): void {
+  _isMacOverride = value;
+}
+
+/** True on macOS — picks the CSD window-control order (close-first, toolbar-leading). */
+function isMacPlatform(): boolean {
+  return _isMacOverride ?? navigator.platform.startsWith("Mac");
+}
+
 let _scope: EffectScope | null = null;
 
 const toolbarIconMap = {
@@ -59,6 +72,7 @@ const toolbarIconMap = {
   "sp-icon-redo": html`<sp-icon-redo slot="icon"></sp-icon-redo>`,
   "sp-icon-save-floppy": html`<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>`,
   "sp-icon-undo": html`<sp-icon-undo slot="icon"></sp-icon-undo>`,
+  "sp-icon-view-grid": html`<sp-icon-view-grid slot="icon"></sp-icon-view-grid>`,
   "sp-icon-view-list": html`<sp-icon-view-list slot="icon"></sp-icon-view-list>`,
 } as Record<string, TemplateResult>;
 
@@ -308,13 +322,33 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
         ? html`<sp-icon-rail-right-open slot="icon"></sp-icon-rail-right-open>`
         : html`<sp-icon-rail-right-close slot="icon"></sp-icon-rail-right-close>`}
     </sp-action-button>
-    ${csdTpl}
+    ${chatToggleTpl()} ${csdTpl}
+  `;
+}
+
+/** Toggle for the persistent AI chat sidebar (selected = open). Shared by both layouts. */
+function chatToggleTpl() {
+  return html`
+    <sp-action-button
+      quiet
+      size="s"
+      title="Toggle Assistant"
+      ?selected=${!view.chatPanelCollapsed}
+      @click=${() => {
+        view.chatPanelCollapsed = !view.chatPanelCollapsed;
+        applyPanelCollapse();
+        render();
+      }}
+    >
+      <sp-icon-chat slot="icon"></sp-icon-chat>
+    </sp-action-button>
   `;
 }
 
 const modes = [
   { iconTag: "sp-icon-edit", key: "edit", label: "Edit" },
   { iconTag: "sp-icon-artboard", key: "design", label: "Design" },
+  { iconTag: "sp-icon-view-grid", key: "grid", label: "Grid" },
   { iconTag: "sp-icon-code", key: "source", label: "Code" },
   { iconTag: "sp-icon-brush", key: "stylebook", label: "Stylebook" },
 ];
@@ -399,7 +433,7 @@ function toolbarTemplate() {
       };
     }
   ).__jxPlatform?.windowControls;
-  const isMac = navigator.platform.startsWith("Mac");
+  const isMac = isMacPlatform();
   const csdTpl = windowControls
     ? isMac
       ? html`
@@ -545,6 +579,6 @@ function toolbarTemplate() {
         ? html`<sp-icon-rail-right-open slot="icon"></sp-icon-rail-right-open>`
         : html`<sp-icon-rail-right-close slot="icon"></sp-icon-rail-right-close>`}
     </sp-action-button>
-    ${isMac ? nothing : csdTpl}
+    ${chatToggleTpl()} ${isMac ? nothing : csdTpl}
   `;
 }