@jxsuite/studio 2.4.3 → 4.0.0

package/src/utils/studio-utils.ts

@@ -4,8 +4,8 @@
  * These are all side-effect-free functions used by style/properties/events panels.
  */
 
-import { defaultContentFormat, formatByName } from "../format/format-host";
-import type { ContentSectionEntry } from "../types";
+import { collectionForFile } from "../content/collection-match";
+import { defaultContentFormat } from "../format/format-host";
 import type { ProjectConfig } from "@jxsuite/schema/types";
 
 /**
@@ -117,6 +117,26 @@ export function abbreviateValue(val: string) {
   return map[val] || val;
 }
 
+/**
+ * True when a schema `format` names a MEDIA reference.
+ *
+ * Two spellings, and both are real. `"uri-reference"` is JSON Schema's own and the one the spec
+ * uses — it is what the content loader keys its asset rewrite on (`rewriteEntryAssets`) and what a
+ * schema written against the documentation says. `"image"` is Studio's own shorthand, used by
+ * component props and settings schemas.
+ *
+ * They were accepted in different places, so which editor a field got depended on which panel was
+ * asking: `inferInputType` took both, the frontmatter panel took only `"image"`, and the drop
+ * target, the signals panel and the data grid each took only one. One predicate, so a field is a
+ * media field everywhere or nowhere.
+ *
+ * @param {unknown} format - A schema entry's `format`
+ * @returns {boolean}
+ */
+export function isMediaFormat(format: unknown): boolean {
+  return format === "image" || format === "uri-reference";
+}
+
 /**
  * Determine input widget type from a css-meta entry
  *
@@ -136,7 +156,7 @@ export function inferInputType(entry: Record<string, unknown>) {
   if (entry.format === "color") {
     return "color";
   }
-  if (entry.format === "uri-reference") {
+  if (isMediaFormat(entry.format)) {
     return "media";
   }
   if (entry.$units !== undefined) {
@@ -155,8 +175,14 @@ export function inferInputType(entry: Record<string, unknown>) {
 }
 
 /**
- * Match a document path to a content type and return its schema. Compares the content type's
- * `source` directory against the document path prefix, using `format` for extension matching.
+ * Match a document path to a content type and return its schema.
+ *
+ * Delegates to `content/collection-match.ts`, which is the ONE matcher — the reason it takes a
+ * config rather than reading `projectState`. Two rules are added here and belong here, because they
+ * are about the FORM rather than about membership: a collection that declares no `schema` has no
+ * fields to draw, and a file whose extension is not the collection's is not one of its entries.
+ * Membership itself — the `{locale}` expansion, the recursive subdirectory, the single-file
+ * catalogue, longest-source-wins — is the matcher's, and is no longer restated here.
  *
  * @param {string | null} documentPath — project-relative path (e.g. "content/products/widget.md")
  * @param {ProjectConfig | null | undefined} projectConfig — parsed project.json
@@ -169,34 +195,20 @@ export function findContentTypeSchema(
   if (!documentPath || !projectConfig?.content) {
     return null;
   }
-  // Content-type `source` prefixes are always forward-slash. The desktop platform can hand us
-  // OS-native backslash paths on Windows, so normalize before prefix matching.
-  const docPath = documentPath.replaceAll("\\", "/");
-  for (const [name, def] of Object.entries(
-    projectConfig.content as Record<string, ContentSectionEntry>,
-  )) {
-    if (!def.source || !def.schema) {
-      continue;
-    }
-    const src = def.source.replace(/^\.\//, "").replace(/\/$/, "");
-    const hasExt = src.includes(".") && !src.endsWith("/");
-    if (hasExt) {
-      if (docPath === src || docPath.endsWith(`/${src}`)) {
-        return { name, schema: def.schema };
-      }
-    } else {
-      const ext =
-        def.format === "json"
-          ? ".json"
-          : (formatByName(def.format)?.extensions[0] ??
-            defaultContentFormat()?.extensions[0] ??
-            ".json");
-      if (docPath.startsWith(`${src}/`) && docPath.endsWith(ext)) {
-        return { name, schema: def.schema };
-      }
+  const match = collectionForFile(documentPath, projectConfig);
+  if (!match || !match.def.schema) {
+    return null;
+  }
+  /* A single-file source is matched AS that file, so its extension is settled by construction.
+     A directory-backed one is not: a `.json` sitting beside `.md` posts is somebody else's file,
+     and drawing the collection's fields over it would invite edits nothing will ever read. */
+  if (!match.fileBacked) {
+    const ext = match.ext ?? defaultContentFormat()?.extensions[0] ?? ".json";
+    if (!documentPath.toLowerCase().endsWith(ext.toLowerCase())) {
+      return null;
     }
   }
-  return null;
+  return { name: match.name, schema: match.def.schema };
 }
 
 /**

package/styles/forced-colors.css

@@ -48,6 +48,13 @@
     outline-offset: -2px;
   }
 
+  /* The rail's gear while its menu is open. That state is drawn with a `background`, which this
+     mode re-forces to the system canvas — so it says nothing. An outline says it instead. */
+  .rail-item--menu-open {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+
   /* The drop target. A 3px translucent ring is invisible here twice over — shadow and alpha. */
   .drop-target,
   .is-drop-target {

package/styles/overlays.css

@@ -768,6 +768,14 @@
   font-size: var(--spectrum-font-size-75, 12px);
   color: var(--danger);
 }
+/* A problem the file already had, said once at section level. Deliberately not `-error`: it did not
+   refuse anything and it belongs to no control, so it is a warning about the file rather than a
+   rejection of an edit — §16.1's distinction, in the one place a settings section can make it. */
+.settings-section-notice {
+  margin: 6px 0 0;
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--warning);
+}
 .settings-site-name,
 .settings-site-url {
   width: 100%;
@@ -860,6 +868,13 @@
   font-weight: 500;
   color: var(--fg-dim);
 }
+/* Explanatory text under a field's control — what the number means, not what the field is
+   called. Sits below rather than beside so a long sentence wraps instead of squeezing the input. */
+.new-project-hint {
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg-dim);
+  line-height: 1.4;
+}
 .new-project-error {
   font-size: var(--spectrum-font-size-75, 12px);
   color: var(--danger);
@@ -1014,6 +1029,35 @@
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
+/* Breakpoints: a mode picker, whichever value control that mode takes, and the rounding rule. It
+   wraps rather than scrolls — the widths field is the one that needs room, and it should get it. */
+.new-project-import-breakpoints {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.new-project-breakpoint-mode {
+  min-width: 132px;
+}
+.new-project-breakpoint-rounding {
+  min-width: 132px;
+}
+.new-project-breakpoint-count,
+.new-project-min-fidelity {
+  width: 96px;
+}
+.new-project-breakpoint-widths {
+  flex: 1;
+  min-width: 160px;
+}
+/* One line under a control saying what it will do. Not an error and not a label — the sentence a
+   reader needs to predict the outcome before the run rather than after it. */
+.new-project-hint {
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg-dim);
+  line-height: 1.5;
+}
 .new-project-import-progress {
   display: flex;
   align-items: center;
@@ -1044,6 +1088,13 @@
 .new-project-agent-prompt {
   min-height: 120px;
 }
+.new-project-import-prompt {
+  width: 100%;
+  min-height: 90px;
+}
+.new-project-import-model {
+  width: 100%;
+}
 .new-project-step-context {
   font-size: var(--spectrum-font-size-75, 12px);
   color: var(--fg-dim);
@@ -2592,6 +2643,28 @@
   line-height: 1.5;
 }
 
+/* One labelled choice inside a dialog body (`ui/choice-field.ts`) — the New File format picker and
+   the Convert target picker. Stacked rather than inline: the label reads as a question about the
+   field beneath it, and a picker beside a full-width text field wins a width fight neither should
+   be having. */
+.choice-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0 0 12px;
+}
+.choice-row sp-picker {
+  width: 100%;
+}
+/* What a one-row choice degrades to. Sized like the picker it replaces so the dialog does not
+   change height when the project gains a second format. */
+.choice-static {
+  padding: 4px 0;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-100, 14px);
+  line-height: 1.5;
+}
+
 /* A panel withholding a render because one of its own fields has focus (`panel-scheduler.ts`).
    The panel is deliberately stale — finishing your sentence beats being current — but it used to
    make that trade in silence, which is indistinguishable from a panel that has stopped working.
@@ -2737,3 +2810,186 @@
 .jx-layer--toast {
   z-index: 4000;
 }
+
+/* The gear menu's section submenu.
+
+   Project Settings has ~16 sections once the extensions have contributed theirs, which is taller
+   than a short window. The menu's own placement floors `top` at 4px so the first rows can never be
+   pushed off the top edge; this is the other half — the list scrolls inside itself rather than
+   demanding a viewport it cannot have. */
+/* The gear menu's rows.
+
+   A min-width so the widest title and its chord are not crushed into each other: the rows are
+   `Preferences… ⌘,` and `Open Project Settings ⌘⇧,`, and Spectrum sizes a menu to its content. */
+.settings-menu {
+  min-width: 260px;
+}
+
+/* One flex cell for the trailing chord and chevron.
+
+   They must be a SINGLE slotted node. Spectrum's menu-item grid gives `[slot=value]` one cell with
+   `justify-self: end`, applied per assigned node — so a chord and a chevron slotted separately are
+   both pinned to the same right edge, on top of each other. */
+.settings-menu-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 24px;
+  color: var(--fg-dim);
+}
+
+.settings-submenu {
+  max-height: min(60vh, 480px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* ─── Media viewer ────────────────────────────────────────────────────────────
+   A pane that SHOWS a file rather than editing one (`media/media-pane.ts`). The stage takes the
+   room and the details column stays a fixed width, so the asset is the thing you are looking at
+   and the facts about it are beside it rather than on top of it. It scrolls itself — a wheel over
+   an image is a scroll, not a zoom, which is why `media` is in shortcuts.ts's self-scrolling set. */
+.media-viewer {
+  height: 100%;
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  overflow-y: auto;
+  background: var(--bg-panel);
+}
+.media-stage {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+/* Never larger than its own pixels: an upscaled thumbnail is a lie about the asset, and judging
+   whether an imported image is big enough is the whole reason somebody opens this. */
+.media-image {
+  max-width: 100%;
+  height: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-input);
+}
+.media-video,
+.media-embed {
+  width: 100%;
+  max-height: 70vh;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-input);
+}
+.media-audio {
+  width: 100%;
+}
+.media-specimen {
+  width: 100%;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-input);
+  color: var(--fg);
+}
+.media-specimen-line {
+  margin: 0 0 12px;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+.media-unviewable {
+  padding: 24px;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  color: var(--fg-dim);
+  text-align: center;
+}
+.media-note {
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg-dim);
+}
+.media-details {
+  flex: 0 0 260px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.media-name {
+  margin: 0;
+  font-size: var(--spectrum-font-size-100, 14px);
+  color: var(--fg);
+  overflow-wrap: anywhere;
+}
+.media-facts {
+  margin: 0;
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg-dim);
+}
+/* The reference a document writes for this file — `/hero.jpg` for `public/hero.jpg`, which shares
+   not one segment with it. Getting this wrong is the commonest way an image goes missing. */
+.media-ref {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.media-ref-value {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 3px 6px;
+  overflow-wrap: anywhere;
+}
+.media-usage {
+  display: flex;
+  flex-direction: column;
+}
+.media-usage-title {
+  margin: 0 0 4px;
+  font-size: var(--spectrum-font-size-75, 12px);
+  font-weight: 500;
+  color: var(--fg-dim);
+}
+.media-usage-headline {
+  margin: 0;
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg-dim);
+}
+.media-usage-list {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.media-usage-list li {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.media-usage-link {
+  flex: 1;
+  min-width: 0;
+  background: none;
+  border: none;
+  padding: 0;
+  text-align: left;
+  color: var(--accent);
+  cursor: pointer;
+  font: inherit;
+  overflow-wrap: anywhere;
+}
+.media-usage-link:hover {
+  text-decoration: underline;
+}
+.media-usage-count {
+  flex: 0 0 auto;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--fg-dim);
+}

package/styles/panels.css

@@ -60,6 +60,16 @@
   color: var(--fg);
   border-left-color: var(--accent);
 }
+/* The gear while its menu is open.
+
+   Deliberately NOT `.selected`: that class means "this is the panel you are looking at" and paints
+   the accent left-border, so reusing it would draw the gear as a seventh selected panel. What this
+   says is narrower — the menu you opened is still up. */
+.rail-item--menu-open {
+  opacity: 1;
+  color: var(--fg);
+  background: var(--hover-bg);
+}
 .rail-item:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: -2px;
@@ -469,7 +479,9 @@
   font-size: 0;
   overflow: hidden;
 }
-.empty-text-placeholder:not([contenteditable])::after {
+.empty-text-placeholder:is(:empty, :has(> br:only-child)):not([data-jx-active-block]):not(
+    [contenteditable]
+  )::after {
   content: "Click here to add text...";
   color: color-mix(in srgb, var(--fg-dim, #808080) 40%, transparent);
   font-style: italic;

package/styles/shell.css

@@ -596,6 +596,117 @@
   color: var(--fg-dim);
   font-family: var(--font-mono);
 }
+/* A question the assistant is waiting on. Deliberately louder than a tool chip and quieter than
+   an error: it is the one thing in the transcript that will not proceed without the reader. */
+.ai-ask {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-self: stretch;
+  background: var(--hover-bg);
+  border-left: 2px solid var(--accent);
+  border-radius: var(--radius);
+  padding: 8px 10px;
+}
+.ai-ask[data-outcome="ok"],
+.ai-ask[data-outcome="unanswered"],
+.ai-ask[data-outcome="failed"] {
+  border-left-color: var(--border);
+}
+.ai-ask-question {
+  font-size: var(--spectrum-font-size-75, 12px);
+  color: var(--fg);
+  line-height: 1.5;
+}
+.ai-ask-context {
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+  line-height: 1.5;
+}
+.ai-ask-options {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.ai-ask-skip {
+  margin-inline-start: auto;
+}
+.ai-ask-answer {
+  align-self: flex-start;
+  max-width: 100%;
+  background: var(--accent);
+  color: var(--accent-fg);
+  border-radius: var(--radius);
+  padding: 3px 8px;
+  font-size: var(--spectrum-font-size-50, 11px);
+  overflow-wrap: anywhere;
+}
+.ai-ask-outcome {
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg-dim);
+  line-height: 1.5;
+}
+/* An import, under the chip that started it. It reports for minutes and then stays: the summary
+   line is the run's outcome once it has one, and the log below is a scroller the reader owns —
+   it follows the newest line until they scroll away from it, and stops following while they read.
+   It was a fixed six-line tail that ellipsed every message and vanished the moment the run
+   finished, which is to say the account of a successful import was destroyed by its success. */
+.ai-import-progress {
+  align-self: stretch;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 6px 8px;
+}
+.ai-import-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--spectrum-font-size-50, 11px);
+  color: var(--fg);
+  cursor: pointer;
+  list-style: none;
+}
+.ai-import-head::-webkit-details-marker {
+  display: none;
+}
+.ai-import-message {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* How many lines are folded away, so a collapsed run still says how much it has to show. */
+.ai-import-count {
+  flex: 0 0 auto;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--fg-dim);
+}
+.ai-import-phase {
+  color: var(--fg-dim);
+  font-family: var(--font-mono);
+  flex: 0 0 auto;
+  margin-right: 4px;
+}
+.ai-import-log {
+  margin-top: 4px;
+  max-height: 40vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.6;
+  color: var(--fg-dim);
+}
+/* Wraps rather than ellipses: a phase line names a page, a count or a file, and the end of it is
+   usually the part worth reading. */
+.ai-import-log-line {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
 .ai-msg-tool-error {
   background: var(--hover-bg);
   border-left: 2px solid var(--danger);

package/dist/chunks/Overlay.dev-d2ajy6sj.js

@@ -1,23 +0,0 @@
-import {
-  LONGPRESS_INSTRUCTIONS,
-  Overlay
-} from "./studio-tzx3xmvx.js";
-import"./studio-ahnzd9rg.js";
-import"./studio-ay8wcr2b.js";
-import"./studio-z6nw2ek2.js";
-import"./studio-8q517dfr.js";
-import"./studio-xm3dbxvn.js";
-import"./studio-0rqqhrdy.js";
-import"./studio-c31yb4t6.js";
-import"./studio-2w11grav.js";
-import"./studio-twsafr1e.js";
-import"./studio-kvfx9z2c.js";
-import"./studio-5x5774ak.js";
-import"./studio-a0tswy0w.js";
-export {
-  LONGPRESS_INSTRUCTIONS,
-  Overlay
-};
-
-//# debugId=A65C67C23042201664756E2164756E21
-//# sourceMappingURL=Overlay.dev-d2ajy6sj.js.map

package/dist/chunks/cf-settings-g5fbf2zp.js

@@ -1,17 +0,0 @@
-import {
-  getCfAccountId,
-  getCfToken,
-  setCfAccountId,
-  setCfToken
-} from "./studio-a7pzveq1.js";
-import"./studio-sas7mt3k.js";
-import"./studio-a0tswy0w.js";
-export {
-  getCfAccountId,
-  getCfToken,
-  setCfAccountId,
-  setCfToken
-};
-
-//# debugId=B652056CE853690D64756E2164756E21
-//# sourceMappingURL=cf-settings-g5fbf2zp.js.map

package/dist/chunks/content-source-k9724vcv.js

@@ -1,39 +0,0 @@
-import {
-  PATH_FIELD,
-  collectionDirs,
-  collectionInfo,
-  createCollectionSource,
-  createPagesSource,
-  listCollectionEntryIds,
-  reloadDraftAwareGrids
-} from "./studio-26sv44br.js";
-import"./studio-2w11grav.js";
-import"./studio-bw5dz6km.js";
-import"./studio-cz2j1c0g.js";
-import"./studio-28xc8ws4.js";
-import"./studio-aweyr4v1.js";
-import"./studio-pyrw8h0w.js";
-import"./studio-ra7ar50f.js";
-import"./studio-twsafr1e.js";
-import"./studio-kvfx9z2c.js";
-import"./studio-5x5774ak.js";
-import"./studio-g1wdche0.js";
-import"./studio-s519zc99.js";
-import"./studio-cjm7fdjf.js";
-import"./studio-rqemfhz6.js";
-import"./studio-sas7mt3k.js";
-import"./studio-5ehhackm.js";
-import"./studio-53n8bp04.js";
-import"./studio-a0tswy0w.js";
-export {
-  PATH_FIELD,
-  collectionDirs,
-  collectionInfo,
-  createCollectionSource,
-  createPagesSource,
-  listCollectionEntryIds,
-  reloadDraftAwareGrids
-};
-
-//# debugId=CB1FE05CE1005B6D64756E2164756E21
-//# sourceMappingURL=content-source-k9724vcv.js.map