@jxsuite/studio 0.1.0 → 0.5.1

package/src/utils/inherited-style.js

@@ -0,0 +1,54 @@
+/**
+ * Inherited-style.js — Computes the effective inherited style for a given breakpoint tab.
+ *
+ * Walks the cascade (base → each media block in order) up to but not including the active
+ * breakpoint, producing the set of property values that would apply if no explicit override exists
+ * on the current tab.
+ */
+
+/**
+ * Compute the inherited style object for a given breakpoint tab.
+ *
+ * @param {Record<string, any>} style — full style object (flat props + @media blocks + selectors)
+ * @param {string[]} mediaNames — ordered breakpoint names (from parseMediaEntries, respects cascade
+ *   direction)
+ * @param {string | null} activeTab — current breakpoint tab name, or null for base
+ * @param {string | null} activeSelector — current nested selector, or null
+ * @returns {Record<string, any>} Inherited style map (prop → value)
+ */
+export function computeInheritedStyle(style, mediaNames, activeTab, activeSelector = null) {
+  if (activeTab === null || mediaNames.length === 0) return {};
+
+  /** @type {Record<string, any>} */
+  let inherited = {};
+
+  if (!activeSelector) {
+    // Start with base flat props
+    for (const [p, v] of Object.entries(style)) {
+      if (typeof v !== "object") inherited[p] = v;
+    }
+    // Layer each media block in order until current tab
+    for (const name of mediaNames) {
+      if (name === activeTab) break;
+      const block = style[`@${name}`] || {};
+      for (const [p, v] of Object.entries(block)) {
+        if (typeof v !== "object") inherited[p] = v;
+      }
+    }
+  } else {
+    // Selector inheritance: base selector → each media's selector block in order
+    const baseSel = style[activeSelector] || {};
+    for (const [p, v] of Object.entries(baseSel)) {
+      if (typeof v !== "object") inherited[p] = v;
+    }
+    for (const name of mediaNames) {
+      if (name === activeTab) break;
+      const selBlock = (style[`@${name}`] || {})[activeSelector] || {};
+      for (const [p, v] of Object.entries(selBlock)) {
+        if (typeof v !== "object") inherited[p] = v;
+      }
+    }
+  }
+
+  return inherited;
+}

package/src/utils/studio-utils.js

@@ -112,7 +112,9 @@ export function abbreviateValue(val) {
 export function inferInputType(entry) {
   if (entry.$shorthand === true) return "shorthand";
   if (entry.$input === "button-group") return "button-group";
+  if (entry.$input === "media") return "media";
   if (entry.format === "color") return "color";
+  if (entry.format === "uri-reference") return "media";
   if (entry.$units !== undefined) return "number-unit";
   if (entry.type === "number") return "number";
   if (Array.isArray(entry.enum)) return "select";
@@ -120,6 +122,36 @@ export function inferInputType(entry) {
   return "text";
 }
 
+/**
+ * Match a document path to a content collection and return its schema. Uses simple directory-prefix
+ * + extension matching against the collection's `source` glob.
+ *
+ * @param {string | null} documentPath — project-relative path (e.g. "blog/hello.md")
+ * @param {any} projectConfig — parsed project.json
+ * @returns {{ name: string; schema: any } | null}
+ */
+export function findCollectionSchema(documentPath, projectConfig) {
+  if (!documentPath || !projectConfig?.collections) return null;
+  for (const [name, def] of Object.entries(
+    /** @type {Record<string, any>} */ (projectConfig.collections),
+  )) {
+    if (!def.source || !def.schema) continue;
+    const src = def.source.replace(/^\.\//, "");
+    const dir = src.split("/")[0];
+    const ext = src.includes("*.md")
+      ? ".md"
+      : src.includes("*.json")
+        ? ".json"
+        : src.includes("*.csv")
+          ? ".csv"
+          : null;
+    if (documentPath.startsWith(dir + "/") && (!ext || documentPath.endsWith(ext))) {
+      return { name, schema: def.schema };
+    }
+  }
+  return null;
+}
+
 /**
  * Convert a human-readable name to a CSS variable name. E.g. "Geometric Humanist" →
  * "--font-geometric-humanist"

package/src/view.js

@@ -0,0 +1,68 @@
+/**
+ * View.js — Transient view state for Jx Studio
+ *
+ * Holds DOM references, editor instances, cleanup functions, and other mutable state that is the
+ * OUTPUT of renderers (not the input). Separating this from persistent app state (in S via
+ * store.js) makes renderer dependencies explicit.
+ */
+
+/** @type {any} */
+export const view = {
+  // Canvas infrastructure
+  panzoomWrap: null,
+  liveScope: null,
+  renderGeneration: 0,
+  centerObserver: null,
+  needsCenter: true,
+  panX: 0,
+  panY: 0,
+  prevCanvasMode: null,
+
+  // Editor instances
+  monacoEditor: null,
+  functionEditor: null,
+
+  // Inline editing
+  componentInlineEdit: null,
+  pendingInlineEdit: null,
+  inlineEditCleanup: null,
+
+  // Floating UI containers
+  blockActionBarEl: null,
+  linkPopoverHost: null,
+
+  // Selection & drag
+  selDragCleanup: null,
+
+  // Cleanup arrays (reset on each render cycle)
+  dndCleanups: [],
+  canvasDndCleanups: [],
+  canvasEventCleanups: [],
+
+  // Pseudo-state preview
+  forcedStyleTag: null,
+  forcedAttrEl: null,
+
+  // Left panel / elements UI
+  elementsCollapsed: new Set(),
+  elementsFilter: "",
+
+  // Drag interaction
+  lastDragInput: null,
+  _currentDropTargetRow: null,
+  layerDragSourceHeight: 0,
+
+  // Editor state
+  savedRange: null,
+  _completionRegistered: false,
+
+  // Canvas / stylebook
+  stylebookElToTag: new WeakMap(),
+
+  // Responsive breakpoints UI
+  showAddBreakpointForm: false,
+  addBreakpointPreview: "",
+
+  // Autosave
+  autosaveTimer: null,
+};