@jxsuite/studio 3.0.0 → 4.1.0

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);
@@ -689,6 +800,13 @@
   max-width: 140px;
   min-width: 0;
 }
+/* The chat-only-model note, under the picker that caused it. Advisory weight on purpose: the
+   assistant still answers, it just cannot edit. */
+.ai-composer-note {
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-50, 11px);
+  line-height: 1.3;
+}
 /* Sessions list */
 .ai-sessions {
   flex: 1 1 0;
@@ -1264,6 +1382,35 @@
   font-size: var(--spectrum-font-size-50, 11px);
   color: var(--fg-dim);
 }
+/* The account picker borrows `.prefs-account` for its rows on purpose — it is the same object in a
+   different frame, and a second row style would drift from this one. Only its own chrome is here. */
+.cf-account-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 320px;
+}
+.cf-account-picker-lede {
+  margin: 0;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.cf-account-picker-empty {
+  margin: 0;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.cf-account-picker-error {
+  margin: 0;
+  color: var(--danger);
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.prefs-account-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
 .prefs-keys {
   display: flex;
   flex-direction: column;

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/content-source-7fy9qrm0.js

@@ -1,40 +0,0 @@
-import {
-  PATH_FIELD,
-  collectionDirs,
-  collectionInfo,
-  createCollectionSource,
-  createPagesSource,
-  listCollectionEntryIds,
-  reloadDraftAwareGrids
-} from "./studio-dc8s8heb.js";
-import"./studio-2w11grav.js";
-import"./studio-bw5dz6km.js";
-import"./studio-a0yp7syn.js";
-import"./studio-ry1vz5sv.js";
-import"./studio-2x9zbxmx.js";
-import"./studio-j595e748.js";
-import"./studio-r5xbtctf.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-qpfq7xhm.js";
-import"./studio-hcxzyk3x.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=1022A539C17535B964756E2164756E21
-//# sourceMappingURL=content-source-7fy9qrm0.js.map

package/dist/chunks/files-xcybanxe.js

@@ -1,70 +0,0 @@
-import {
-  FILE_ROW_HEIGHT,
-  createFileIn,
-  findHomePage,
-  initProjectRepo,
-  isFileDrag,
-  loadDirectory,
-  loadProject,
-  openFileInPane,
-  openFileInTab,
-  openHomePage,
-  openLastSessionOrHome,
-  openProject,
-  pickAndUploadTo,
-  registerFileTreeDnD,
-  registerFilesPanel,
-  reloadCleanTab,
-  reloadFileInTab,
-  renderFilesTemplate,
-  uploadFilesToDir
-} from "./studio-rh1cnamv.js";
-import"./studio-p5dja96s.js";
-import"./studio-7p35254k.js";
-import"./studio-8jpzqk5s.js";
-import"./studio-pkp61mh8.js";
-import"./studio-c31yb4t6.js";
-import"./studio-dc8s8heb.js";
-import"./studio-2w11grav.js";
-import"./studio-bw5dz6km.js";
-import"./studio-a0yp7syn.js";
-import"./studio-ry1vz5sv.js";
-import"./studio-2x9zbxmx.js";
-import"./studio-j595e748.js";
-import"./studio-r5xbtctf.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-qpfq7xhm.js";
-import"./studio-hcxzyk3x.js";
-import"./studio-sas7mt3k.js";
-import"./studio-5ehhackm.js";
-import"./studio-53n8bp04.js";
-import"./studio-a0tswy0w.js";
-export {
-  FILE_ROW_HEIGHT,
-  createFileIn,
-  findHomePage,
-  initProjectRepo,
-  isFileDrag,
-  loadDirectory,
-  loadProject,
-  openFileInPane,
-  openFileInTab,
-  openHomePage,
-  openLastSessionOrHome,
-  openProject,
-  pickAndUploadTo,
-  registerFileTreeDnD,
-  registerFilesPanel,
-  reloadCleanTab,
-  reloadFileInTab,
-  renderFilesTemplate,
-  uploadFilesToDir
-};
-
-//# debugId=4F1783068BC6D7A964756E2164756E21
-//# sourceMappingURL=files-xcybanxe.js.map

package/dist/chunks/layers-panel-27essgkc.js

@@ -1,60 +0,0 @@
-import {
-  OUTLINE_ROW_HEIGHT,
-  OUTLINE_ROW_MAX_ITEMS,
-  afterTreeRender,
-  applyRowSelection,
-  applyTreeRovingTabindex,
-  clearHoverActions,
-  indentWidth,
-  onTreeHover,
-  onTreeKeydown,
-  outlineLabel,
-  outlineRowPath,
-  registerLayersPanel,
-  renderLayersTemplate,
-  renderRowCommands,
-  startLayerTitleEdit
-} from "./studio-hj2se583.js";
-import"./studio-xntfdy1x.js";
-import"./studio-6z5eyjwn.js";
-import"./studio-0rqqhrdy.js";
-import"./studio-p5dja96s.js";
-import"./studio-3dkcd4c5.js";
-import"./studio-c31yb4t6.js";
-import"./studio-bw5dz6km.js";
-import"./studio-a0yp7syn.js";
-import"./studio-j595e748.js";
-import"./studio-r5xbtctf.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-qpfq7xhm.js";
-import"./studio-hcxzyk3x.js";
-import"./studio-sas7mt3k.js";
-import"./studio-5ehhackm.js";
-import"./studio-t5wqwzdh.js";
-import"./studio-53n8bp04.js";
-import"./studio-a0tswy0w.js";
-export {
-  OUTLINE_ROW_HEIGHT,
-  OUTLINE_ROW_MAX_ITEMS,
-  afterTreeRender,
-  applyRowSelection,
-  applyTreeRovingTabindex,
-  clearHoverActions,
-  indentWidth,
-  onTreeHover,
-  onTreeKeydown,
-  outlineLabel,
-  outlineRowPath,
-  registerLayersPanel,
-  renderLayersTemplate,
-  renderRowCommands,
-  startLayerTitleEdit
-};
-
-//# debugId=69EB0FE4C6D6ECEC64756E2164756E21
-//# sourceMappingURL=layers-panel-27essgkc.js.map

package/dist/chunks/publish-panel-09sy2bab.js

@@ -1,22 +0,0 @@
-import {
-  openPublishPanel,
-  seedPublishConnected
-} from "./studio-k4jvjcfx.js";
-import"./studio-kfpek536.js";
-import"./studio-2x9zbxmx.js";
-import"./studio-r5xbtctf.js";
-import"./studio-kvfx9z2c.js";
-import"./studio-5x5774ak.js";
-import"./studio-cjm7fdjf.js";
-import"./studio-qpfq7xhm.js";
-import"./studio-hcxzyk3x.js";
-import"./studio-sas7mt3k.js";
-import"./studio-5ehhackm.js";
-import"./studio-a0tswy0w.js";
-export {
-  openPublishPanel,
-  seedPublishConnected
-};
-
-//# debugId=FD24D88F217DC7F064756E2164756E21
-//# sourceMappingURL=publish-panel-09sy2bab.js.map