@jxsuite/studio 2.0.0 → 2.1.0

package/src/canvas/canvas-diff.ts

@@ -1,216 +0,0 @@
-/// <reference lib="dom" />
-/**
- * Canvas Diff — computes visual diff between original and current Jx documents.
- *
- * Compares two document trees recursively, marking nodes as added/removed/modified, and propagates
- * "modified" status up the tree for structural changes (children added/removed/reordered).
- */
-
-import type { JxMutableNode } from "@jxsuite/schema/types";
-
-type DiffStatus = "added" | "removed" | "modified";
-
-interface DiffResult {
-  byPath: Map<string, DiffStatus>;
-  allPaths: Set<string>;
-}
-
-/**
- * Deep equality check for two values. Ignores function and ref properties.
- *
- * @param {unknown} a
- * @param {unknown} b
- * @returns {boolean}
- */
-function valuesEqual(a: unknown, b: unknown): boolean {
-  if (a === b) {
-    return true;
-  }
-  if (typeof a !== "object" || typeof b !== "object" || !a || !b) {
-    return false;
-  }
-  if (Array.isArray(a) !== Array.isArray(b)) {
-    return false;
-  }
-
-  if (Array.isArray(a)) {
-    const bArr = b as unknown[];
-    if (a.length !== bArr.length) {
-      return false;
-    }
-    return a.every((v: unknown, i: number) => valuesEqual(v, bArr[i]));
-  }
-
-  const aObj = a as Record<string, unknown>;
-  const bObj = b as Record<string, unknown>;
-
-  const keysA = Object.keys(aObj).filter((k: string) => !k.startsWith("on") && k !== "$ref");
-  const keysB = Object.keys(bObj).filter((k: string) => !k.startsWith("on") && k !== "$ref");
-
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  if (!keysA.every((k: string) => keysB.includes(k))) {
-    return false;
-  }
-
-  return keysA.every((k: string) => valuesEqual(aObj[k], bObj[k]));
-}
-
-/**
- * Filter element children from a node's children array.
- *
- * @param {JxMutableNode | undefined} node
- * @returns {JxMutableNode[]}
- */
-function elementChildren(node: JxMutableNode | undefined) {
-  if (!node?.children || !Array.isArray(node.children)) {
-    return [];
-  }
-  return node.children.filter(
-    (c: JxMutableNode | string) => c != null && typeof c === "object",
-  ) as JxMutableNode[];
-}
-
-/**
- * Mark an entire subtree with a diff status.
- *
- * @param {JxMutableNode} node
- * @param {DiffStatus} status
- * @param {string} path
- * @param {Map<string, DiffStatus>} diffMap
- * @param {Set<string>} allPaths
- */
-function markRecursive(
-  node: JxMutableNode,
-  status: DiffStatus,
-  path: string,
-  diffMap: Map<string, DiffStatus>,
-  allPaths: Set<string>,
-) {
-  allPaths.add(path);
-  diffMap.set(path, status);
-  const children = elementChildren(node);
-  for (let i = 0; i < children.length; i++) {
-    const childPath = `${path}/children/${i}`;
-    markRecursive(children[i]!, status, childPath, diffMap, allPaths);
-  }
-}
-
-/**
- * Compute structural diff between original and current documents.
- *
- * @param {JxMutableNode | undefined} originalDoc - Original document (from git)
- * @param {JxMutableNode | undefined} currentDoc - Current document (in memory/on disk)
- * @returns {DiffResult}
- */
-export function computeDocumentDiff(
-  originalDoc: JxMutableNode | undefined,
-  currentDoc: JxMutableNode | undefined,
-): DiffResult {
-  const diffMap = new Map<string, DiffStatus>();
-  const allPaths = new Set<string>();
-
-  /**
-   * Walk both trees in parallel and mark differences.
-   *
-   * @param {JxMutableNode | undefined} origNode
-   * @param {JxMutableNode | undefined} currNode
-   * @param {string} path
-   */
-  const walk = (
-    origNode: JxMutableNode | undefined,
-    currNode: JxMutableNode | undefined,
-    path = "",
-  ) => {
-    const pathKey = path || "/";
-    allPaths.add(pathKey);
-
-    // Both exist but differ
-    if (origNode != null && currNode != null) {
-      if (!valuesEqual(origNode, currNode)) {
-        diffMap.set(pathKey, "modified");
-      }
-
-      // Walk children
-      if (origNode.children && currNode.children) {
-        const origChildren = elementChildren(origNode);
-        const currChildren = elementChildren(currNode);
-
-        for (let i = 0; i < Math.max(origChildren.length, currChildren.length); i++) {
-          const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
-          walk(origChildren[i], currChildren[i], childPath);
-        }
-      }
-      return;
-    }
-
-    // In current only (added)
-    if (currNode != null && origNode == null) {
-      diffMap.set(pathKey, "added");
-      const children = elementChildren(currNode);
-      for (let i = 0; i < children.length; i++) {
-        const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
-        markRecursive(children[i]!, "added", childPath, diffMap, allPaths);
-      }
-      return;
-    }
-
-    // In original only (removed)
-    if (origNode != null && currNode == null) {
-      diffMap.set(pathKey, "removed");
-      const children = elementChildren(origNode);
-      for (let i = 0; i < children.length; i++) {
-        const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
-        markRecursive(children[i]!, "removed", childPath, diffMap, allPaths);
-      }
-    }
-  };
-
-  // Start comparison
-  walk(originalDoc, currentDoc, "");
-
-  // Propagate "modified" status to parents of added/removed children
-  const propagateModified = () => {
-    let changed = false;
-    for (const [path, status] of diffMap.entries()) {
-      if ((status === "added" || status === "removed") && path !== "/") {
-        const parentPath = path.split("/").slice(0, -2).join("/") || "/";
-        if (parentPath !== "/") {
-          const parentStatus = diffMap.get(parentPath);
-          if (
-            parentStatus !== "modified" &&
-            parentStatus !== "added" &&
-            parentStatus !== "removed"
-          ) {
-            diffMap.set(parentPath, "modified");
-            changed = true;
-          }
-        }
-      }
-    }
-    return changed;
-  };
-
-  // Propagate upwards until no more changes
-  let propagating = true;
-  while (propagating) {
-    propagating = propagateModified();
-  }
-
-  return { allPaths, byPath: diffMap };
-}
-
-/**
- * Clear diff highlighting from all elements in a canvas.
- *
- * @param {HTMLElement} canvas
- */
-export function clearDiffHighlight(canvas: HTMLElement) {
-  const marked = canvas.querySelectorAll(
-    ".element-diff-added, .element-diff-removed, .element-diff-modified",
-  );
-  for (const el of marked) {
-    el.classList.remove("element-diff-added", "element-diff-removed", "element-diff-modified");
-  }
-}

package/src/canvas/nested-site-style.ts

@@ -1,58 +0,0 @@
-/**
- * Generate scoped CSS from nested style objects (e.g. `table: { width: "100%", thead: { ... } }`).
- * Returns a CSS string with rules scoped under the given selector.
- *
- * @param {import("@jxsuite/schema/types").JxStyle} styleObj - The full style object (flat + nested)
- * @param {string} scope - The scoping selector (e.g. `[data-jx-site]`)
- * @returns {string} Generated CSS text
- */
-import type { JxStyle } from "@jxsuite/schema/types";
-
-export function buildNestedSiteCSS(styleObj: JxStyle, scope: string) {
-  let css = "";
-
-  function emit(parentSel: string, rules: JxStyle) {
-    const props = Object.entries(rules)
-      .filter(([, val]) => val === null || typeof val !== "object" || Array.isArray(val))
-      .map(([p, val]) => `${camelToKebab(p)}: ${val}`)
-      .join("; ");
-    if (props) {
-      css += `${parentSel} { ${props} }\n`;
-    }
-    for (const [sel, sub] of Object.entries(rules)) {
-      if (sub === null || typeof sub !== "object" || Array.isArray(sub)) {
-        continue;
-      }
-      const resolved = sel.startsWith("&")
-        ? sel.replace("&", parentSel)
-        : sel.startsWith("[") || sel.startsWith(":") || sel.startsWith(".")
-          ? `${parentSel}${sel}`
-          : `${parentSel} ${sel}`;
-      emit(resolved, sub);
-    }
-  }
-
-  for (const [k, v] of Object.entries(styleObj)) {
-    if (v === null || typeof v !== "object" || Array.isArray(v)) {
-      continue;
-    }
-    const resolved = k.startsWith("&")
-      ? k.replace("&", scope)
-      : k.startsWith("[") || k.startsWith(":") || k.startsWith(".")
-        ? `${scope}${k}`
-        : `${scope} ${k}`;
-    emit(resolved, v);
-  }
-
-  return css;
-}
-
-/**
- * Convert camelCase to kebab-case.
- *
- * @param {string} s
- * @returns {string}
- */
-function camelToKebab(s: string) {
-  return s.replaceAll(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-}

package/src/new-project/design-fields.ts

@@ -1,264 +0,0 @@
-/**
- * The design-quickstart section of the New Project Parameters step: colors, fonts, logo, and
- * breakpoints. A trimmed-down, creation-time version of the settings modal — every field is
- * optional, and empty fields leave the template/starter defaults untouched (the backend applies
- * overrides best-effort against the starters' shared token conventions).
- */
-
-import { html } from "lit-html";
-import type { TemplateResult } from "lit-html";
-
-/** Mirrors @jxsuite/create's DesignOptions (threaded through platform.createProject). */
-export interface DesignSelection {
-  accent?: string;
-  background?: string;
-  text?: string;
-  bodyFont?: string;
-  headingFont?: string;
-  media?: Record<string, string>;
-  logo?: { name: string; base64: string };
-}
-
-interface MediaRow {
-  name: string;
-  value: string;
-}
-
-let _accent = "";
-let _background = "";
-let _text = "";
-let _bodyFont = "";
-let _headingFont = "";
-let _mediaRows: MediaRow[] = [];
-let _mediaNote = "";
-let _logo: { name: string; base64: string } | null = null;
-let _logoError = "";
-
-// Prefills are display defaults, not overrides: a value identical to its prefill is NOT sent, so
-// An untouched form leaves the template/starter exactly as authored (a starter's registry accent
-// Need not equal its --color-primary, and re-sending a template's own $media is just noise).
-let _prefillAccent = "";
-let _prefillMediaJson = "";
-
-function mediaRowsJson(rows: MediaRow[]): string {
-  return JSON.stringify(rows.map((r) => [r.name.trim(), r.value.trim()]));
-}
-
-export interface DesignPrefill {
-  /** Prefilled accent color (a starter's registry accent). */
-  accent?: string;
-  /** Prefilled breakpoint rows (a template's $media preset). */
-  media?: Record<string, string>;
-  /** Shown under the breakpoints editor when it starts empty (starter sites). */
-  mediaNote?: string;
-}
-
-/** Reset the section for a fresh modal pass, seeding prefills from the chosen source. */
-export function resetDesignFields(prefill: DesignPrefill = {}) {
-  _accent = prefill.accent ?? "";
-  _background = "";
-  _text = "";
-  _bodyFont = "";
-  _headingFont = "";
-  _mediaRows = Object.entries(prefill.media ?? {}).map(([name, value]) => ({ name, value }));
-  _mediaNote = prefill.mediaNote ?? "";
-  _logo = null;
-  _logoError = "";
-  _prefillAccent = _accent;
-  _prefillMediaJson = mediaRowsJson(_mediaRows);
-}
-
-/**
- * The design overrides to send with createProject, or undefined when everything was left at its
- * defaults (the payload then stays byte-identical to a plain create).
- */
-export function collectDesign(): DesignSelection | undefined {
-  const media: Record<string, string> = {};
-  for (const row of _mediaRows) {
-    if (row.name.trim() && row.value.trim()) {
-      media[row.name.trim()] = row.value.trim();
-    }
-  }
-  const accentChanged = _accent.trim() && _accent.trim() !== _prefillAccent;
-  const mediaChanged =
-    Object.keys(media).length > 0 && mediaRowsJson(_mediaRows) !== _prefillMediaJson;
-  const design: DesignSelection = {
-    ...(accentChanged ? { accent: _accent.trim() } : {}),
-    ...(_background.trim() ? { background: _background.trim() } : {}),
-    ...(_text.trim() ? { text: _text.trim() } : {}),
-    ...(_bodyFont.trim() ? { bodyFont: _bodyFont.trim() } : {}),
-    ...(_headingFont.trim() ? { headingFont: _headingFont.trim() } : {}),
-    ...(mediaChanged ? { media } : {}),
-    ...(_logo ? { logo: _logo } : {}),
-  };
-  return Object.keys(design).length > 0 ? design : undefined;
-}
-
-/** Base64-encode a small file (logos) without blowing the call stack on spread. */
-async function fileToBase64(file: File): Promise<string> {
-  const bytes = new Uint8Array(await file.arrayBuffer());
-  let binary = "";
-  const CHUNK = 32_768;
-  for (let i = 0; i < bytes.length; i += CHUNK) {
-    binary += String.fromCodePoint(...bytes.subarray(i, i + CHUNK));
-  }
-  return btoa(binary);
-}
-
-function colorRow(
-  label: string,
-  value: string,
-  set: (v: string) => void,
-  rerender: () => void,
-): TemplateResult {
-  const onText = (e: Event) => {
-    set((e.target as HTMLInputElement).value);
-    rerender();
-  };
-  return html`
-    <div class="new-project-color-row">
-      <span class="new-project-label">${label}</span>
-      <div class="css-var-swatch" style="background:${value || "transparent"}">
-        <input type="color" .value=${value || "#888888"} @input=${onText} />
-      </div>
-      <sp-textfield placeholder="Keep default" .value=${value} @input=${onText}></sp-textfield>
-    </div>
-  `;
-}
-
-export function renderDesignFields(ctx: { rerender: () => void }): TemplateResult {
-  const { rerender } = ctx;
-
-  const onLogoChange = async (e: Event) => {
-    const input = e.target as HTMLInputElement;
-    const file = input.files?.[0];
-    if (!file) {
-      return;
-    }
-    if (!/\.(svg|png|jpe?g|webp|gif|ico)$/i.test(file.name)) {
-      _logoError = "Use an SVG, PNG, JPEG, WebP, GIF, or ICO image";
-      _logo = null;
-      rerender();
-      return;
-    }
-    _logoError = "";
-    _logo = { base64: await fileToBase64(file), name: file.name };
-    rerender();
-  };
-
-  const setRow = (index: number, field: "name" | "value") => (e: Event) => {
-    const row = _mediaRows[index];
-    if (row) {
-      row[field] = (e.target as HTMLInputElement).value;
-    }
-  };
-
-  return html`
-    <div class="new-project-design-section">
-      <div class="new-project-design-heading">Colors</div>
-      ${colorRow("Accent", _accent, (v) => (_accent = v), rerender)}
-      ${colorRow("Background", _background, (v) => (_background = v), rerender)}
-      ${colorRow("Text", _text, (v) => (_text = v), rerender)}
-    </div>
-
-    <div class="new-project-design-section">
-      <div class="new-project-design-heading">Fonts</div>
-      <label class="new-project-field">
-        <span class="new-project-label">Body Font</span>
-        <sp-textfield
-          placeholder="Keep default (e.g. 'Inter', system-ui, sans-serif)"
-          .value=${_bodyFont}
-          @input=${(e: Event) => (_bodyFont = (e.target as HTMLInputElement).value)}
-          style="width: 100%"
-        ></sp-textfield>
-      </label>
-      <label class="new-project-field">
-        <span class="new-project-label">Heading Font</span>
-        <sp-textfield
-          placeholder="Keep default"
-          .value=${_headingFont}
-          @input=${(e: Event) => (_headingFont = (e.target as HTMLInputElement).value)}
-          style="width: 100%"
-        ></sp-textfield>
-      </label>
-    </div>
-
-    <div class="new-project-design-section">
-      <div class="new-project-design-heading">Logo</div>
-      <div class="new-project-logo-row">
-        <input type="file" accept=".svg,.png,.jpg,.jpeg,.webp,.gif,.ico" @change=${onLogoChange} />
-        ${
-          _logo
-            ? html`
-                <span class="new-project-logo-name">
-                  ${_logo.name} → public/${_logo.name}
-                  <sp-action-button
-                    quiet
-                    size="s"
-                    title="Remove logo"
-                    @click=${() => {
-                      _logo = null;
-                      rerender();
-                    }}
-                  >
-                    ✕
-                  </sp-action-button>
-                </span>
-              `
-            : html`<span class="new-project-tab-intro"
-                >Copied into the project's public/ folder.</span
-              >`
-        }
-      </div>
-      ${_logoError ? html`<div class="new-project-error">${_logoError}</div>` : ""}
-    </div>
-
-    <div class="new-project-design-section">
-      <div class="new-project-design-heading">Breakpoints</div>
-      ${
-        _mediaRows.length === 0 && _mediaNote
-          ? html`<div class="new-project-tab-intro">${_mediaNote}</div>`
-          : ""
-      }
-      ${_mediaRows.map(
-        (row, index) => html`
-          <div class="new-project-media-row">
-            <sp-textfield
-              class="new-project-media-name"
-              placeholder="--md"
-              .value=${row.name}
-              @input=${setRow(index, "name")}
-            ></sp-textfield>
-            <sp-textfield
-              class="new-project-media-value"
-              placeholder="(max-width: 768px)"
-              .value=${row.value}
-              @input=${setRow(index, "value")}
-            ></sp-textfield>
-            <sp-action-button
-              quiet
-              size="s"
-              title="Remove breakpoint"
-              @click=${() => {
-                _mediaRows.splice(index, 1);
-                rerender();
-              }}
-            >
-              ✕
-            </sp-action-button>
-          </div>
-        `,
-      )}
-      <sp-button
-        variant="secondary"
-        size="s"
-        @click=${() => {
-          _mediaRows.push({ name: "", value: "" });
-          rerender();
-        }}
-      >
-        Add Breakpoint
-      </sp-button>
-    </div>
-  `;
-}

package/src/new-project/templates.ts

@@ -1,61 +0,0 @@
-/**
- * The built-in project templates shown on the New Project modal's Template tab. The ids are the
- * contract with `@jxsuite/create/templates` (createProject validates them server-side); the copy
- * here is presentation only. Hardcoded rather than imported: `@jxsuite/create` is a Node CLI
- * package and Studio runs in the browser.
- */
-
-export interface TemplateInfo {
-  id: string;
-  name: string;
-  tagline: string;
-  /** Glyph shown in the card's preview area. */
-  glyph: string;
-  /** The template's default $media map (mirrors @jxsuite/create's mediaForTemplate). */
-  media: Record<string, string>;
-}
-
-const DESKTOP_FIRST_MEDIA = {
-  "--": "1280px",
-  "--lg": "(max-width: 1024px)",
-  "--md": "(max-width: 768px)",
-  "--sm": "(max-width: 640px)",
-};
-
-const MOBILE_FIRST_MEDIA = {
-  "--": "375px",
-  "--sm": "(min-width: 640px)",
-  "--md": "(min-width: 768px)",
-  "--lg": "(min-width: 1024px)",
-};
-
-export const PROJECT_TEMPLATES: readonly TemplateInfo[] = [
-  {
-    glyph: "+",
-    id: "blank",
-    media: DESKTOP_FIRST_MEDIA,
-    name: "Blank",
-    tagline: "Start from scratch",
-  },
-  {
-    glyph: "🖥",
-    id: "desktop-first",
-    media: DESKTOP_FIRST_MEDIA,
-    name: "Desktop First",
-    tagline: "Max-width breakpoints",
-  },
-  {
-    glyph: "📱",
-    id: "mobile-first",
-    media: MOBILE_FIRST_MEDIA,
-    name: "Mobile First",
-    tagline: "Min-width breakpoints",
-  },
-  {
-    glyph: "📲",
-    id: "mobile-app",
-    media: MOBILE_FIRST_MEDIA,
-    name: "Mobile App",
-    tagline: "App shell with bottom navigation",
-  },
-];