@jxsuite/studio 0.1.0 → 0.5.1

package/src/panels/toolbar.js

@@ -0,0 +1,223 @@
+/**
+ * Toolbar panel — extracted from studio.js renderToolbar(). Owns rendering of breadcrumbs, file
+ * ops, feature toggles, and mode switcher.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { getState, update, updateSession, updateUi, undo, redo, subscribe } from "../store.js";
+import { getEffectiveMedia } from "../site-context.js";
+import { mediaDisplayName } from "./shared.js";
+import { view } from "../view.js";
+
+/** @type {HTMLElement | null} */
+let _rootEl = null;
+
+/** @type {any} */
+let _ctx = null;
+
+/** @type {(() => void) | null} */
+let _unsub = null;
+
+const toolbarIconMap = /** @type {Record<string, any>} */ ({
+  "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
+  "sp-icon-save-floppy": html`<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>`,
+  "sp-icon-back": html`<sp-icon-back slot="icon"></sp-icon-back>`,
+  "sp-icon-undo": html`<sp-icon-undo slot="icon"></sp-icon-undo>`,
+  "sp-icon-redo": html`<sp-icon-redo slot="icon"></sp-icon-redo>`,
+  "sp-icon-duplicate": html`<sp-icon-duplicate slot="icon"></sp-icon-duplicate>`,
+  "sp-icon-delete": html`<sp-icon-delete slot="icon"></sp-icon-delete>`,
+  "sp-icon-edit": html`<sp-icon-edit slot="icon"></sp-icon-edit>`,
+  "sp-icon-artboard": html`<sp-icon-artboard slot="icon"></sp-icon-artboard>`,
+  "sp-icon-preview": html`<sp-icon-preview slot="icon"></sp-icon-preview>`,
+  "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
+  "sp-icon-brush": html`<sp-icon-brush slot="icon"></sp-icon-brush>`,
+  "sp-icon-view-list": html`<sp-icon-view-list slot="icon"></sp-icon-view-list>`,
+  "sp-icon-gears": html`<sp-icon-gears slot="icon"></sp-icon-gears>`,
+  "sp-icon-document": html`<sp-icon-document slot="icon"></sp-icon-document>`,
+});
+
+/**
+ * @param {any} label
+ * @param {any} onClick
+ * @param {any} iconTag
+ */
+function tbBtnTpl(label, onClick, iconTag) {
+  return html`
+    <sp-action-button size="s" @click=${onClick}>
+      ${iconTag ? toolbarIconMap[iconTag] : nothing} ${label}
+    </sp-action-button>
+  `;
+}
+
+/**
+ * Mount the toolbar panel.
+ *
+ * @param {HTMLElement} rootEl
+ * @param {any} ctx — { navigateBack, closeFunctionEditor, openProject, openFile, saveFile,
+ *   parseMediaEntries, getCanvasMode, setCanvasMode, renderCanvas, safeRenderRightPanel }
+ */
+export function mount(rootEl, ctx) {
+  _rootEl = rootEl;
+  _ctx = ctx;
+  _unsub = subscribe(() => render());
+}
+
+export function unmount() {
+  _unsub?.();
+  _unsub = null;
+  _rootEl = null;
+  _ctx = null;
+}
+
+export function render() {
+  if (!_rootEl || !_ctx) return;
+  try {
+    litRender(toolbarTemplate(), _rootEl);
+  } catch (e) {
+    console.error("toolbar render error:", e);
+  }
+}
+
+function toolbarTemplate() {
+  const S = getState();
+  const canvasMode = _ctx.getCanvasMode();
+  const hasStack = S.documentStack && S.documentStack.length > 0;
+  const hasFunc = !!S.ui.editingFunction;
+
+  const breadcrumbTpl =
+    hasStack || hasFunc
+      ? html`
+          <div class="breadcrumb">
+            <sp-action-button
+              size="s"
+              title=${hasFunc ? "Close function editor" : "Return to parent document"}
+              @click=${hasFunc ? _ctx.closeFunctionEditor : _ctx.navigateBack}
+            >
+              ${toolbarIconMap["sp-icon-back"]}Back
+            </sp-action-button>
+            ${hasStack
+              ? S.documentStack.map(
+                  (/** @type {any} */ frame) => html`
+                    <span class="breadcrumb-item"
+                      >${frame.documentPath?.split("/").pop() || "untitled"}</span
+                    >
+                    <span class="breadcrumb-sep"> › </span>
+                  `,
+                )
+              : nothing}
+            <span
+              class="breadcrumb-item${hasFunc ? " clickable" : " current"}"
+              @click=${hasFunc ? _ctx.closeFunctionEditor : nothing}
+            >
+              ${S.documentPath?.split("/").pop() || S.document.tagName || "document"}
+            </span>
+            ${hasFunc
+              ? html`
+                  <span class="breadcrumb-sep"> › </span>
+                  <span class="breadcrumb-item current"
+                    >${S.ui.editingFunction.type === "def"
+                      ? `ƒ ${S.ui.editingFunction.defName}`
+                      : `ƒ ${S.ui.editingFunction.eventKey}`}</span
+                  >
+                `
+              : nothing}
+          </div>
+        `
+      : nothing;
+
+  const { featureQueries } = _ctx.parseMediaEntries(getEffectiveMedia(S.document.$media));
+  const togglesTpl =
+    featureQueries.length > 0
+      ? html`
+          <sp-action-group compact size="s">
+            ${featureQueries.map(
+              (/** @type {any} */ { name, query }) => html`
+                <sp-action-button
+                  toggles
+                  size="s"
+                  title=${query}
+                  ?selected=${!!S.ui.featureToggles[name]}
+                  @click=${() => {
+                    const newToggles = {
+                      ...S.ui.featureToggles,
+                      [name]: !S.ui.featureToggles[name],
+                    };
+                    updateUi("featureToggles", newToggles);
+                  }}
+                >
+                  ${mediaDisplayName(name)}
+                </sp-action-button>
+              `,
+            )}
+          </sp-action-group>
+        `
+      : nothing;
+
+  const modes = [
+    { key: "manage", label: "Manage", iconTag: "sp-icon-view-list" },
+    { key: "edit", label: "Edit", iconTag: "sp-icon-edit" },
+    { key: "design", label: "Design", iconTag: "sp-icon-artboard" },
+    { key: "preview", label: "Preview", iconTag: "sp-icon-preview" },
+    { key: "source", label: "Code", iconTag: "sp-icon-code" },
+    { key: "settings", label: "Settings", iconTag: "sp-icon-gears" },
+  ];
+
+  const modeSwitcherTpl = html`
+    <sp-action-group selects="single" size="s" compact>
+      ${modes.map(
+        (m) => html`
+          <sp-action-button
+            size="s"
+            ?selected=${canvasMode === m.key}
+            @click=${() => {
+              if (canvasMode === m.key) return;
+              if (S.ui.editingFunction) {
+                if (view.functionEditor) {
+                  view.functionEditor.dispose();
+                  view.functionEditor = null;
+                }
+              }
+              _ctx.setCanvasMode(m.key);
+              view.panX = 0;
+              view.panY = 0;
+              /** @type {Record<string, any>} */
+              const uiPatch = { editingFunction: null };
+              if (m.key === "settings") uiPatch.rightTab = "style";
+              if (m.key === "manage") uiPatch.leftTab = "files";
+              updateSession({ ui: uiPatch });
+              _ctx.renderCanvas();
+              _ctx.safeRenderRightPanel();
+            }}
+          >
+            ${toolbarIconMap[m.iconTag]}${m.label}
+          </sp-action-button>
+        `,
+      )}
+    </sp-action-group>
+  `;
+
+  return html`
+    <sp-action-group compact size="s">
+      ${tbBtnTpl("Open Project", _ctx.openProject, "sp-icon-folder-open")}
+      ${tbBtnTpl("Open File", _ctx.openFile, "sp-icon-document")}
+      ${tbBtnTpl("Save", _ctx.saveFile, "sp-icon-save-floppy")}
+    </sp-action-group>
+    <sp-action-group compact size="s">
+      ${tbBtnTpl("Undo", () => update(undo(getState())), "sp-icon-undo")}
+      ${tbBtnTpl("Redo", () => update(redo(getState())), "sp-icon-redo")}
+    </sp-action-group>
+    <div class="tb-spacer"></div>
+    ${S.documentPath
+      ? html`<span class="tb-file-title" title=${S.documentPath}
+          >${S.documentPath}${S.dirty ? html`<span class="tb-dirty">●</span>` : nothing}</span
+        >`
+      : S.fileHandle
+        ? html`<span class="tb-file-title"
+            >${S.fileHandle.name}${S.dirty ? html`<span class="tb-dirty">●</span>` : nothing}</span
+          >`
+        : nothing}
+    ${breadcrumbTpl}
+    <div class="tb-spacer"></div>
+    ${togglesTpl} ${modeSwitcherTpl}
+  `;
+}

package/src/platforms/devserver.js

@@ -1,7 +1,7 @@
 /**
  * Devserver.js — Dev Server Platform Adapter
  *
- * Implements the StudioPlatform interface for the @jxplatform/server development workflow. All file
+ * Implements the StudioPlatform interface for the @jxsuite/server development workflow. All file
  * I/O goes through /__studio/* REST endpoints. Project opening uses the Chrome File System Access
  * API (showDirectoryPicker).
  *
@@ -17,7 +17,7 @@
  * from responses.
  */
 export function createDevServerPlatform() {
-  let _projectRoot = ".";
+  let _projectRoot = "";
 
   /**
    * Prefix a project-relative path with the active project root for server API calls.
@@ -25,8 +25,10 @@ export function createDevServerPlatform() {
    * @param {string} rel
    */
   function serverPath(rel) {
-    if (!_projectRoot || _projectRoot === ".") return rel;
-    return rel === "." ? _projectRoot : `${_projectRoot}/${rel}`;
+    const r = rel.replaceAll("\\", "/");
+    if (!_projectRoot) return r;
+    if (r === ".") return _projectRoot;
+    return `${_projectRoot}/${r}`;
   }
 
   /**
@@ -35,19 +37,36 @@ export function createDevServerPlatform() {
    * @param {string} path
    */
   function stripRoot(path) {
-    if (!_projectRoot || _projectRoot === ".") return path;
-    return path.startsWith(_projectRoot + "/") ? path.slice(_projectRoot.length + 1) : path;
+    const p = path.replaceAll("\\", "/");
+    if (!_projectRoot) return p;
+    return p.startsWith(_projectRoot + "/") ? p.slice(_projectRoot.length + 1) : p;
   }
 
   return {
     id: "devserver",
 
-    /** Get or set the current project root (server-relative path). */
+    /** Get or set the current project root (absolute path). */
     get projectRoot() {
       return _projectRoot;
     },
     set projectRoot(v) {
-      _projectRoot = v || ".";
+      _projectRoot = v || "";
+      if (_projectRoot) this.activate(_projectRoot);
+    },
+
+    /**
+     * Notify the server which project root to use for resolving static file paths. Returns a
+     * promise so callers can await activation before loading assets.
+     *
+     * @param {string} [root]
+     */
+    async activate(root) {
+      const r = root ?? _projectRoot;
+      await fetch("/__studio/activate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ root: r }),
+      });
     },
 
     // ─── Project opening ──────────────────────────────────────────────────
@@ -87,16 +106,26 @@ export function createDevServerPlatform() {
       );
 
       if (!match) {
-        throw new Error("Selected project is not under the dev server root");
+        // Project is outside dev server root — ask the server to find it by directory name
+        const findRes = await fetch(
+          `/__studio/find-project?name=${encodeURIComponent(dirHandle.name)}`,
+        );
+        if (!findRes.ok) throw new Error("Could not locate project on disk");
+        const found = await findRes.json();
+        if (!found.path) throw new Error(`Could not find project directory "${dirHandle.name}"`);
+        _projectRoot = found.path;
+      } else {
+        _projectRoot = match.path;
       }
 
-      _projectRoot = match.path;
+      // Notify server of active project for static file resolution
+      await this.activate();
 
       return {
         config,
         handle: {
-          root: match.path,
-          name: config.name || match.path.split("/").pop(),
+          root: _projectRoot,
+          name: config.name || _projectRoot.split("/").pop(),
           projectConfig: config,
         },
       };
@@ -151,6 +180,21 @@ export function createDevServerPlatform() {
       if (!res.ok) throw new Error(`Failed to write file: ${path}`);
     },
 
+    /**
+     * Upload a binary file (image, video, font, etc.).
+     *
+     * @param {string} path — project-relative destination path
+     * @param {File | Blob | ArrayBuffer} data — file content
+     */
+    async uploadFile(path, data) {
+      const res = await fetch(
+        `/__studio/file/upload?path=${encodeURIComponent(serverPath(path))}`,
+        { method: "POST", body: data },
+      );
+      if (!res.ok) throw new Error(`Upload failed: ${path}`);
+      return await res.json();
+    },
+
     /** @param {string} path */
     async deleteFile(path) {
       const res = await fetch(`/__studio/file?path=${encodeURIComponent(serverPath(path))}`, {
@@ -185,10 +229,8 @@ export function createDevServerPlatform() {
     /** @param {string} dir */
     async discoverComponents(dir) {
       const scanDir = dir || _projectRoot;
-      const url =
-        scanDir === "."
-          ? "/__studio/components"
-          : `/__studio/components?dir=${encodeURIComponent(scanDir)}`;
+      if (!scanDir) return [];
+      const url = `/__studio/components?dir=${encodeURIComponent(scanDir)}`;
       const res = await fetch(url);
       if (!res.ok) return [];
       return await res.json();