@jxsuite/studio 4.0.0 → 5.0.0

package/dist/chunks/studio-8qtrpzr3.js

@@ -0,0 +1,839 @@
+import {
+  getPlatform2
+} from "./studio-6nzaktvy.js";
+import {
+  debouncedStyleCommit,
+  renderOnly
+} from "./studio-6ewqv390.js";
+import {
+  REGION_ATTR,
+  overlayRegion,
+  registerSurface,
+  mountSurface,
+  layerHost2
+} from "./studio-erdatzvp.js";
+import {
+  reactive
+} from "./studio-p1dw8wfw.js";
+import {
+  IMAGE_EXTENSIONS,
+  MEDIA_EXTENSIONS,
+  uploadAccept,
+  extensionOf,
+  uploadAssets,
+  mediaSiteUrl,
+  previewFileSrc
+} from "./studio-vz68yn9e.js";
+import {
+  peekMediaMeta,
+  seedMediaMeta,
+  recordImageSize,
+  invalidateMediaMeta,
+  mediaMetaSummary
+} from "./studio-5523bpzt.js";
+import {
+  previewAssetSrc
+} from "./studio-4m0haseg.js";
+import {
+  rectOf
+} from "./studio-rs76k67r.js";
+// src/surfaces/media-field.json
+var media_field_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioMediaField",
+  $description: "The media field: a thumbnail of what the value names, the value itself, and the two doors to a different one. It is a LEAF a caller interpolates — the Inspector's Content tab, the Signals panel and the grid's image-cell panel each draw an empty host and `ui/media-picker.ts` mounts this into it — so it has no chrome of its own and takes its width from whatever row it lands in. **Browse is addressed through its `part`, not through a class.** `ui/regions.ts` derives `inspector/field:<prop>/browse` by finding the Browse control inside the Inspector's own `[data-prop]` row; the handle used to be `.media-picker-browse`, and a document emits no class, so `[part=\"browse\"]` is the handle now. The four `.media-picker*` rules from `styles/overlays.css` are TRANSCRIBED here rather than shared, for the reason `doc-header.json` gives: a class a document does not emit cannot style it. `--radius` becomes `--jx-radius-sm` on the way, because a document mounted in a pane's stage is outside `<sp-theme>` and would otherwise take a fallback rather than follow the theme.",
+  tagName: "div",
+  attributes: {
+    part: "media-field"
+  },
+  style: {
+    $description: "The row's own layout and the four transcribed `.media-picker*` rules. Upload and Browse never shrink, so the FIELD is what yields width when the row is narrow — the buttons would otherwise collapse into unreadable stubs before the text did.",
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--jx-space-1)",
+    flex: "1",
+    minWidth: "0",
+    fontFamily: "var(--jx-font-sans)",
+    fontSize: "var(--jx-text-md)",
+    color: "var(--fg)",
+    '& [part="value"]': {
+      flex: "1",
+      minWidth: "0"
+    },
+    '& [part="upload"]': {
+      flexShrink: "0"
+    },
+    '& [part="browse"]': {
+      flexShrink: "0"
+    },
+    '& [part="thumb"]': {
+      width: "24px",
+      height: "24px",
+      objectFit: "cover",
+      borderRadius: "var(--jx-radius-sm)",
+      border: "1px solid var(--border)",
+      flexShrink: "0"
+    }
+  },
+  children: [
+    {
+      tagName: "span",
+      attributes: {
+        part: "thumb-slot",
+        role: "none"
+      },
+      style: {
+        display: "contents"
+      },
+      $switch: {
+        $ref: "#/state/thumbState"
+      },
+      cases: {
+        shown: {
+          $description: "Decorative on purpose: the field beside it already states the path in text, so a caption here would be the same fact twice to a screen reader and nothing to anyone else.",
+          tagName: "img",
+          attributes: {
+            part: "thumb",
+            src: "${state.thumbSrc}",
+            alt: ""
+          }
+        }
+      }
+    },
+    {
+      tagName: "jx-textfield",
+      attributes: {
+        part: "value"
+      },
+      $props: {
+        size: "sm",
+        label: "${state.label}",
+        placeholder: "/image.jpg",
+        value: {
+          $ref: "#/state/value"
+        }
+      },
+      oninput: {
+        $prototype: "Function",
+        body: [
+          {
+            operator: "call",
+            target: {
+              $ref: "#/state/edit"
+            },
+            value: [
+              {
+                $ref: "event#/target/value"
+              }
+            ]
+          }
+        ],
+        description: "Every keystroke, because the host debounces it: the canvas follows the typing without a document write per character."
+      },
+      onfocus: {
+        $prototype: "Function",
+        body: [
+          {
+            operator: "call",
+            target: {
+              $ref: "#/state/warm"
+            },
+            value: []
+          }
+        ],
+        description: "Entering the field is the earliest honest signal that a pick is coming, so the project's media are listed then rather than when Browse is pressed."
+      }
+    },
+    {
+      tagName: "jx-action-button",
+      attributes: {
+        part: "upload"
+      },
+      $props: {
+        size: "sm",
+        quiet: true,
+        icon: "upload-simple",
+        label: "Upload media",
+        hint: "Upload media"
+      },
+      onclick: {
+        $prototype: "Function",
+        body: [
+          {
+            operator: "call",
+            target: {
+              $ref: "#/state/upload"
+            },
+            value: []
+          }
+        ]
+      }
+    },
+    {
+      tagName: "jx-action-button",
+      attributes: {
+        part: "browse"
+      },
+      $props: {
+        size: "sm",
+        quiet: true,
+        icon: "image",
+        label: "Browse media",
+        hint: "Browse media"
+      },
+      onclick: {
+        $prototype: "Function",
+        body: [
+          {
+            operator: "call",
+            target: {
+              $ref: "#/state/browse"
+            },
+            value: [
+              {
+                $ref: "event#/currentTarget"
+              }
+            ]
+          }
+        ],
+        description: "The button hands over ITSELF: the browser is a popover and the platform wants its invoker, both so a second press on this control toggles rather than reopens and so focus comes back here when it closes."
+      }
+    }
+  ]
+};
+
+// src/surfaces/media-field.ts
+registerSurface("media-field", media_field_default);
+function project(scope, view) {
+  scope.label = view.label;
+  scope.value = view.value;
+  scope.thumbState = view.thumbState;
+  scope.thumbSrc = view.thumbSrc;
+}
+function mountMediaFieldSurface(host, view, actions) {
+  const scope = reactive({
+    browse: actions.browse,
+    edit: actions.edit,
+    label: view.label,
+    thumbSrc: view.thumbSrc,
+    thumbState: view.thumbState,
+    upload: actions.upload,
+    value: view.value,
+    warm: actions.warm
+  });
+  let mounted = null;
+  let disposed = false;
+  mountSurface("media-field", scope, host).then((surface) => {
+    if (disposed) {
+      surface.dispose();
+      return;
+    }
+    mounted = surface;
+  });
+  return {
+    dispose() {
+      disposed = true;
+      mounted?.dispose();
+      mounted = null;
+    },
+    update: (next) => project(scope, next)
+  };
+}
+
+// src/ui/popover-surface.ts
+function openPopoverSurface(options) {
+  const { anchor, name, scope, slot: slotId } = options;
+  const host = document.createElement("div");
+  host.style.pointerEvents = "auto";
+  host.setAttribute(REGION_ATTR, overlayRegion("popover", slotId));
+  layerHost2("popover").append(host);
+  const controller = new AbortController;
+  let panel = null;
+  let mounted = null;
+  let closed = false;
+  const finish = (fromPlatform) => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    controller.abort();
+    mounted?.dispose();
+    mounted = null;
+    host.remove();
+    if (fromPlatform) {
+      options.onDismissed?.();
+    }
+  };
+  const ready = (async () => {
+    const surface = await mountSurface(name, scope, host, {
+      signal: controller.signal,
+      ...options.onNodeCreated ? { onNodeCreated: options.onNodeCreated } : {}
+    });
+    if (controller.signal.aborted) {
+      return;
+    }
+    mounted = surface;
+    panel = surface.root;
+    panel.setAttribute(REGION_ATTR, overlayRegion("popover", slotId));
+    panel.addEventListener("toggle", (event) => {
+      if (event.newState === "closed") {
+        finish(true);
+      }
+    });
+    if (!panel.hasAttribute("popover")) {
+      await new Promise((resolve) => {
+        panel?.addEventListener("jx-ready", () => resolve(), { once: true });
+      });
+    }
+    if (controller.signal.aborted) {
+      return;
+    }
+    panel.showPopover(anchor ? { source: anchor } : undefined);
+  })();
+  return {
+    close: () => {
+      if (closed) {
+        return;
+      }
+      if (panel?.open) {
+        panel.hidePopover();
+      }
+      finish(false);
+    },
+    host,
+    isOpen: () => !closed,
+    ready
+  };
+}
+// src/surfaces/media-browser.json
+var media_browser_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioMediaBrowser",
+  $description: 'The project\'s media, offered under whatever control asked for them. **Not the kit menu, and the difference is the thumbnails.** `surfaces/menu.json` is the settled answer to "a list of actions" and a `MenuRowProjection` carries a title, a chord and a gate — there is nowhere in it for a picture, nowhere for the size caption beside it, and a `jx-menu` is itself `popover=auto`, so a filter field cannot stand above one inside a panel. This is a browser: you pick an image by looking at it. **It is a `jx-popover`, so the PLATFORM owns dismissal** — light dismiss, Escape, the top layer and focus back to the invoker are the popover\'s contract, which is why nothing here binds a document listener and why the panel can paint over a modal `<dialog>` that the layer-div popover it replaces could not. The rows are plain buttons in a group, exactly as `grid-views.json`\'s saved views are: a list of buttons is reachable by Tab, and a `role="listbox"` would be a keyboard contract nothing here implements.',
+  tagName: "jx-popover",
+  attributes: {
+    part: "media-browser"
+  },
+  $props: {
+    label: "Project media",
+    x: {
+      $ref: "#/state/x"
+    },
+    y: {
+      $ref: "#/state/y"
+    }
+  },
+  children: [
+    {
+      tagName: "div",
+      attributes: {
+        part: "body"
+      },
+      style: {
+        $description: "A search box that stays put and a list that scrolls under it. The panel itself never scrolls — `jx-popover` says why — so the box is here rather than on the host.",
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--jx-space-2)",
+        padding: "var(--jx-space-2)",
+        minWidth: "260px",
+        maxHeight: "360px",
+        fontFamily: "var(--jx-font-sans)",
+        fontSize: "var(--jx-text-md)",
+        color: "var(--fg)",
+        '& [part="rows"]': {
+          display: "flex",
+          flexDirection: "column",
+          gap: "2px",
+          overflowY: "auto",
+          minHeight: "0"
+        },
+        '& [part="row"]': {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--jx-space-2)",
+          textAlign: "left",
+          background: "none",
+          border: "none",
+          color: "var(--fg)",
+          font: "inherit",
+          padding: "var(--jx-space-1) var(--jx-space-2)",
+          borderRadius: "var(--jx-radius-sm)",
+          cursor: "pointer",
+          minWidth: "0"
+        },
+        '& [part="row"]:hover': {
+          background: "var(--bg-hover)"
+        },
+        '& [part="row"]:focus-visible': {
+          outline: "var(--jx-focus-ring)",
+          outlineOffset: "-2px"
+        },
+        '& [part="row-thumb"]': {
+          width: "24px",
+          height: "24px",
+          objectFit: "cover",
+          borderRadius: "var(--jx-radius-sm)",
+          flexShrink: "0"
+        },
+        '& [part="row-text"]': {
+          display: "flex",
+          flexDirection: "column",
+          minWidth: "0"
+        },
+        '& [part="row-name"]': {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        '& [part="row-caption"]': {
+          color: "var(--fg-dim)",
+          fontSize: "var(--jx-text-xs)"
+        },
+        '& [part="empty"]': {
+          margin: "0",
+          color: "var(--fg-dim)",
+          fontSize: "var(--jx-text-xs)"
+        },
+        '& [part="more"]': {
+          margin: "0",
+          color: "var(--fg-dim)",
+          fontSize: "var(--jx-text-xs)"
+        }
+      },
+      children: [
+        {
+          tagName: "jx-textfield",
+          attributes: {
+            part: "filter"
+          },
+          $props: {
+            type: "search",
+            size: "sm",
+            label: "Search media",
+            placeholder: "Search media…",
+            autocomplete: "off",
+            value: {
+              $ref: "#/state/filter"
+            }
+          },
+          oninput: {
+            $prototype: "Function",
+            body: [
+              {
+                operator: "call",
+                target: {
+                  $ref: "#/state/setFilter"
+                },
+                value: [
+                  {
+                    $ref: "event#/target/value"
+                  }
+                ]
+              }
+            ]
+          }
+        },
+        {
+          tagName: "div",
+          attributes: {
+            part: "rows-slot",
+            role: "none"
+          },
+          style: {
+            display: "contents"
+          },
+          $switch: {
+            $ref: "#/state/rowsState"
+          },
+          cases: {
+            empty: {
+              tagName: "p",
+              attributes: {
+                part: "empty"
+              },
+              textContent: "${state.emptyLabel}"
+            },
+            listed: {
+              tagName: "div",
+              attributes: {
+                part: "rows"
+              },
+              children: [
+                {
+                  $prototype: "Array",
+                  items: {
+                    $ref: "#/state/rows"
+                  },
+                  key: {
+                    $ref: "$map/item/key"
+                  },
+                  map: {
+                    $description: "One file. The row hands back the value a pick writes — the site URL — rather than an index, so the list may be filtered under it without changing what any row means.",
+                    tagName: "button",
+                    attributes: {
+                      part: "row",
+                      type: "button",
+                      "data-path": "${$map.item.path}"
+                    },
+                    onclick: {
+                      $prototype: "Function",
+                      body: [
+                        {
+                          operator: "call",
+                          target: {
+                            $ref: "#/state/pick"
+                          },
+                          value: [
+                            {
+                              $ref: "$map/item/path"
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    children: [
+                      {
+                        tagName: "span",
+                        attributes: {
+                          part: "row-thumb-slot",
+                          role: "none"
+                        },
+                        style: {
+                          display: "contents"
+                        },
+                        $switch: {
+                          $ref: "$map/item/thumbState"
+                        },
+                        cases: {
+                          shown: {
+                            $description: "Decorative: the row's own text names the file. The load handler is the whole of the dimensions caption — measuring an image is a decode the `<img>` has finished by the time `load` fires, so the numbers are a read of work already done rather than a second fetch per row.",
+                            tagName: "img",
+                            attributes: {
+                              part: "row-thumb",
+                              src: "${$map.item.thumbSrc}",
+                              alt: ""
+                            },
+                            onload: {
+                              $prototype: "Function",
+                              body: [
+                                {
+                                  operator: "call",
+                                  target: {
+                                    $ref: "#/state/measure"
+                                  },
+                                  value: [
+                                    {
+                                      $ref: "$map/item/file"
+                                    },
+                                    {
+                                      $ref: "event#/target/naturalWidth"
+                                    },
+                                    {
+                                      $ref: "event#/target/naturalHeight"
+                                    }
+                                  ]
+                                }
+                              ]
+                            }
+                          }
+                        }
+                      },
+                      {
+                        tagName: "span",
+                        attributes: {
+                          part: "row-text"
+                        },
+                        children: [
+                          {
+                            tagName: "span",
+                            attributes: {
+                              part: "row-name"
+                            },
+                            textContent: "${$map.item.name}"
+                          },
+                          {
+                            tagName: "span",
+                            attributes: {
+                              part: "row-caption-slot",
+                              role: "none"
+                            },
+                            style: {
+                              display: "contents"
+                            },
+                            $switch: {
+                              $ref: "$map/item/captionState"
+                            },
+                            cases: {
+                              shown: {
+                                tagName: "span",
+                                attributes: {
+                                  part: "row-caption"
+                                },
+                                textContent: "${$map.item.caption}"
+                              }
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          tagName: "div",
+          attributes: {
+            part: "more-slot",
+            role: "none"
+          },
+          style: {
+            display: "contents"
+          },
+          $switch: {
+            $ref: "#/state/moreState"
+          },
+          cases: {
+            shown: {
+              $description: 'A truncated list says so. Fifty rows is the cap the list has always had; the sentence is what keeps the cap from reading as "that is all there is".',
+              tagName: "p",
+              attributes: {
+                part: "more"
+              },
+              textContent: "${state.moreLabel}"
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+
+// src/surfaces/media-browser.ts
+registerSurface("media-browser", media_browser_default);
+var SLOT = "media-picker";
+function project2(scope, view) {
+  scope.x = view.x;
+  scope.y = view.y;
+  scope.filter = view.filter;
+  scope.rowsState = view.rowsState;
+  scope.rows = view.rows;
+  scope.emptyLabel = view.emptyLabel;
+  scope.moreState = view.moreState;
+  scope.moreLabel = view.moreLabel;
+}
+function openMediaBrowserSurface(view, actions, anchor) {
+  const scope = reactive({
+    emptyLabel: view.emptyLabel,
+    filter: view.filter,
+    measure: actions.measure,
+    moreLabel: view.moreLabel,
+    moreState: view.moreState,
+    pick: actions.pick,
+    rows: view.rows,
+    rowsState: view.rowsState,
+    setFilter: actions.setFilter,
+    x: view.x,
+    y: view.y
+  });
+  const handle = openPopoverSurface({
+    anchor,
+    name: "media-browser",
+    scope,
+    slot: SLOT,
+    ...actions.dismissed ? { onDismissed: actions.dismissed } : {}
+  });
+  handle.ready.then(() => {
+    if (handle.isOpen()) {
+      handle.host.querySelector('[part="filter"] [part="input"]')?.focus();
+    }
+  });
+  return {
+    close: handle.close,
+    host: handle.host,
+    isOpen: handle.isOpen,
+    ready: handle.ready,
+    update: (next) => project2(scope, next)
+  };
+}
+
+// src/ui/media-picker.ts
+var mediaCache = [];
+var mediaCacheLoaded = false;
+async function collectMedia(dir, platform) {
+  const results = [];
+  try {
+    const entries = await platform.listDirectory(dir);
+    seedMediaMeta(entries);
+    for (const entry of entries) {
+      if (entry.type === "directory") {
+        const sub = await collectMedia(entry.path, platform);
+        results.push(...sub);
+      } else {
+        const ext = extensionOf(entry.name);
+        if (MEDIA_EXTENSIONS.has(ext)) {
+          results.push({
+            file: entry.path,
+            isImage: IMAGE_EXTENSIONS.has(ext),
+            name: entry.name,
+            path: mediaSiteUrl(entry.path)
+          });
+        }
+      }
+    }
+  } catch {}
+  return results;
+}
+async function loadMediaCache() {
+  if (mediaCacheLoaded) {
+    return;
+  }
+  const platform = getPlatform2();
+  mediaCache = await collectMedia("public", platform);
+  mediaCacheLoaded = true;
+  renderOnly("leftPanel", "rightPanel", "frontmatterPanel");
+}
+function invalidateMediaCache2() {
+  mediaCache = [];
+  mediaCacheLoaded = false;
+  invalidateMediaMeta();
+}
+var BROWSE_LIMIT = 50;
+var _browser = null;
+var _browserCommit = null;
+var _browserFilter = "";
+var _browserOrigin = { x: 0, y: 0 };
+function browserView() {
+  const query = _browserFilter.toLowerCase();
+  const filtered = query ? mediaCache.filter((m) => m.path.toLowerCase().includes(query) || m.name.toLowerCase().includes(query)) : mediaCache;
+  const listed = filtered.slice(0, BROWSE_LIMIT);
+  const rows = listed.map((m) => {
+    const caption = mediaMetaSummary(peekMediaMeta(m.file));
+    return {
+      caption,
+      captionState: caption ? "shown" : "hidden",
+      file: m.file,
+      key: m.file,
+      name: m.name,
+      path: m.path,
+      thumbSrc: m.isImage ? previewFileSrc(m.file) : "",
+      thumbState: m.isImage ? "shown" : "hidden"
+    };
+  });
+  return {
+    emptyLabel: "No matches",
+    filter: _browserFilter,
+    moreLabel: `…${filtered.length - BROWSE_LIMIT} more`,
+    moreState: filtered.length > BROWSE_LIMIT ? "shown" : "hidden",
+    rows,
+    rowsState: rows.length > 0 ? "listed" : "empty",
+    x: _browserOrigin.x,
+    y: _browserOrigin.y
+  };
+}
+function dismissMediaPickerPopover() {
+  const open = _browser;
+  _browser = null;
+  _browserCommit = null;
+  _browserFilter = "";
+  open?.close();
+}
+var _sizeRepaint = 0;
+function noteImageSize(file, width, height) {
+  if (!recordImageSize(file, width, height) || _sizeRepaint !== 0) {
+    return;
+  }
+  _sizeRepaint = requestAnimationFrame(() => {
+    _sizeRepaint = 0;
+    _browser?.update(browserView());
+  });
+}
+function showMediaPickerPopover2(anchorEl, onCommit) {
+  dismissMediaPickerPopover();
+  _browserCommit = onCommit;
+  const box = rectOf(anchorEl);
+  _browserOrigin = { x: box.left, y: box.bottom + 4 };
+  _browser = openMediaBrowserSurface(browserView(), {
+    dismissed: () => {
+      _browser = null;
+      _browserCommit = null;
+      _browserFilter = "";
+    },
+    measure: noteImageSize,
+    pick: (path) => {
+      const commit = _browserCommit;
+      dismissMediaPickerPopover();
+      commit?.(path);
+    },
+    setFilter: (value) => {
+      _browserFilter = value;
+      _browser?.update(browserView());
+    }
+  }, anchorEl);
+}
+async function uploadAndAssign2(files, onCommit) {
+  const uploaded = await uploadAssets([...files]);
+  const [first] = uploaded;
+  if (first) {
+    onCommit(first.ref);
+  }
+}
+function pickAndUpload2(onCommit) {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.multiple = true;
+  input.accept = uploadAccept();
+  input.addEventListener("change", () => {
+    if (input.files?.length) {
+      uploadAndAssign2(input.files, onCommit);
+    }
+  });
+  input.click();
+}
+var FIELD_DEBOUNCE_MS = 400;
+var _fields = new WeakMap;
+function fieldView(prop, value) {
+  const isImage = IMAGE_EXTENSIONS.has(extensionOf(value));
+  return {
+    label: prop,
+    thumbSrc: isImage && value ? previewAssetSrc(value) : "",
+    thumbState: isImage && value ? "shown" : "hidden",
+    value
+  };
+}
+function mountMediaPicker2(host, prop, value, onCommit) {
+  loadMediaCache();
+  const existing = _fields.get(host);
+  if (existing) {
+    existing.prop = prop;
+    existing.commit = onCommit;
+    existing.handle.update(fieldView(prop, value));
+    return;
+  }
+  const entry = { commit: onCommit, handle: null, prop };
+  entry.handle = mountMediaFieldSurface(host, fieldView(prop, value), {
+    browse: (anchor) => {
+      loadMediaCache();
+      showMediaPickerPopover2(anchor, (val) => entry.commit(val));
+    },
+    edit: (next) => debouncedStyleCommit(`media:${entry.prop}`, FIELD_DEBOUNCE_MS, (v) => entry.commit(v))(next),
+    upload: () => pickAndUpload2((val) => entry.commit(val)),
+    warm: () => {
+      loadMediaCache();
+    }
+  });
+  _fields.set(host, entry);
+}
+function unmountMediaPicker2(host) {
+  const entry = _fields.get(host);
+  if (entry) {
+    _fields.delete(host);
+    entry.handle.dispose();
+  }
+}
+
+export { openPopoverSurface, invalidateMediaCache2, showMediaPickerPopover2, uploadAndAssign2, pickAndUpload2, mountMediaPicker2, unmountMediaPicker2 };
+
+//# debugId=9A676D8FC549E4AE64756E2164756E21
+//# sourceMappingURL=studio-8qtrpzr3.js.map