@jxsuite/studio 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.15.0",
+    "@jxsuite/runtime": "^0.18.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

package/src/canvas/canvas-render.js

@@ -173,8 +173,8 @@ export function renderCanvas() {
     return;
   }
 
-  // Settings mode: render element catalog with panzoom surface
-  if (canvasMode === "settings") {
+  // Stylebook mode: render element catalog with panzoom surface
+  if (canvasMode === "stylebook") {
     renderStylebookMode({
       canvasPanelTemplate,
       applyTransform,

package/src/canvas/canvas-utils.js

@@ -170,7 +170,7 @@ export function applyTransform() {
   view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${zoom})`;
   renderZoomIndicator();
   renderOnly("overlays");
-  if (_ctx.getCanvasMode() === "settings") _ctx.renderStylebookOverlays();
+  if (_ctx.getCanvasMode() === "stylebook") _ctx.renderStylebookOverlays();
 }
 
 /** Calculate zoom + pan to fit all panels within the viewport. */

package/src/files/files.js

@@ -15,7 +15,13 @@ import { createState, projectState, setProjectState } from "../store.js";
 import { getPlatform } from "../platform.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { loadComponentRegistry } from "./components.js";
-import { workspace, openTab, activateTab, replaceAllTabs } from "../workspace/workspace.js";
+import {
+  workspace,
+  openTab,
+  activateTab,
+  replaceAllTabs,
+  activeTab,
+} from "../workspace/workspace.js";
 import { loadMarkdown } from "./file-ops.js";
 import { view } from "../view.js";
 import { addRecentProject, trackRecentFile } from "../recent-projects.js";
@@ -636,6 +642,12 @@ export async function openFileInTab(path) {
     });
     projectState.selectedPath = path;
     trackRecentFile({ path, name: path.split("/").pop() || path });
+
+    if (path === "project.json") {
+      const tab = activeTab.value;
+      if (tab) tab.session.ui.canvasMode = "stylebook";
+    }
+
     statusMessage(`Opened ${path.split("/").pop()}`);
   } catch (/** @type {any} */ e) {
     statusMessage(`Error: ${e.message}`);

package/src/panels/activity-bar.js

@@ -5,6 +5,7 @@ import { activityBar, renderOnly } from "../store.js";
 import { effect, effectScope } from "../reactivity.js";
 import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
+import { openSettingsModal } from "../settings/settings-modal.js";
 
 /** @type {import("@vue/reactivity").EffectScope | null} */
 let _scope = null;
@@ -113,6 +114,17 @@ export function renderActivityBar() {
         `,
       )}
     </sp-tabs>
+    <div style="margin-top:auto;padding:8px 0;display:flex;justify-content:center">
+      <sp-action-button
+        quiet
+        size="m"
+        title="Settings"
+        aria-label="Settings"
+        @click=${() => openSettingsModal()}
+      >
+        <sp-icon-gears slot="icon"></sp-icon-gears>
+      </sp-action-button>
+    </div>
   `;
   litRender(tpl, /** @type {any} */ (activityBar));
 }

package/src/panels/left-panel.js

@@ -131,7 +131,7 @@ function _render() {
   let content;
   if (tab === "layers")
     content =
-      ctx.getCanvasMode() === "settings"
+      ctx.getCanvasMode() === "stylebook"
         ? renderStylebookLayersTemplate({
             selectStylebookTag,
             stylebookMeta,
@@ -197,7 +197,7 @@ function _render() {
   litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
 
   // Post-render side effects
-  if (tab === "layers" && ctx.getCanvasMode() !== "settings") ctx.registerLayersDnD();
+  if (tab === "layers" && ctx.getCanvasMode() !== "stylebook") ctx.registerLayersDnD();
   else if (tab === "imports") {
     /* no post-render DnD needed */
   } else if (tab === "blocks") {

package/src/panels/overlays.js

@@ -83,7 +83,7 @@ function _flush() {
   const { stylebookTab } = tab.session.ui;
   const canvasMode = _ctx.getCanvasMode();
 
-  if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "settings") {
+  if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "stylebook") {
     for (const p of canvasPanels) {
       litRender(nothing, p.overlay);
       p.overlayClk.style.pointerEvents = "none";
@@ -95,7 +95,7 @@ function _flush() {
     return;
   }
 
-  if (canvasMode === "settings") {
+  if (canvasMode === "stylebook") {
     const enable = stylebookTab === "elements";
     for (const p of canvasPanels) {
       p.overlayClk.style.pointerEvents = enable ? "" : "none";

package/src/panels/style-panel.js

@@ -620,7 +620,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
 export function renderStylePanelTemplate(ctx) {
   const tab = activeTab.value;
   if (!tab) return html`<div class="empty-state">No document loaded</div>`;
-  if (ctx.getCanvasMode() === "settings" && tab.session.ui.stylebookSelection) {
+  if (ctx.getCanvasMode() === "stylebook" && tab.session.ui.stylebookSelection) {
     const node = tab.doc.document;
     if (!node) return html`<div class="empty-state">No document loaded</div>`;
     return html`