@backmatter/studio 0.0.6 → 0.0.7

package/src/pages/DocEditorPage.tsx

@@ -1,4 +1,5 @@
 // packages/studio/src/pages/DocEditorPage.tsx
+import { Snake } from "loading-dev";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useOutletContext, useParams, useSearchParams, Link, useNavigate } from "react-router";
 import * as stylex from "@stylexjs/stylex";
@@ -17,6 +18,7 @@ import {
   type SchemaField,
 } from "../api";
 import { resolveFieldInput, useStudioDefinition } from "../define-studio";
+import { MediaFieldInput } from "./MediaFieldInput";
 import { useSetEditorActions } from "../chrome/EditorActionsContext";
 import {
   DOC_CHANGED_EVENT,
@@ -730,8 +732,13 @@ export function DocEditorPage() {
 
   if (loading) {
     return (
-      <div {...stylex.props(styles.pad)}>
-        <Text tone="muted">Loading document…</Text>
+      <div {...stylex.props(styles.root)}>
+        <div {...stylex.props(styles.loading)} aria-busy aria-live="polite">
+          <span {...stylex.props(styles.loadingSpinner)} aria-hidden>
+            <Snake size={20} />
+          </span>
+          <Text tone="muted" size="sm">Loading document…</Text>
+        </div>
       </div>
     );
   }
@@ -1013,6 +1020,16 @@ export function DocEditorPage() {
                             setFrontmatter((prev) => ({ ...prev, [name]: next }));
                           }}
                         />
+                      ) : kind === "media" ? (
+                        <MediaFieldInput
+                          name={name}
+                          value={frontmatter[name]}
+                          readOnly={aiEditing || parseFailed}
+                          onChange={(next) => {
+                            markEdited();
+                            setFrontmatter((prev) => ({ ...prev, [name]: next }));
+                          }}
+                        />
                       ) : composite ? (
                         <JsonField
                           kind={kind === "array" ? "array" : "object"}
@@ -1073,14 +1090,26 @@ export function DocEditorPage() {
 
 const styles = stylex.create({
   root: {
+    position: "relative",
     display: "flex",
     minHeight: 0,
     flex: 1,
     flexDirection: "column",
     overflow: "hidden",
   },
-  pad: {
-    padding: space.xxl,
+  loading: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: space.md,
+    backgroundColor: colors.bgApp,
+  },
+  loadingSpinner: {
+    display: "flex",
+    color: colors.textMuted,
   },
   split: {
     display: "flex",

package/src/pages/MediaFieldInput.tsx

@@ -0,0 +1,139 @@
+// packages/studio/src/pages/MediaFieldInput.tsx
+import { useState } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+import { mediaIdFromUrl, mediaVariantUrl } from "@backmatter/core";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { Button } from "../ui/Button";
+import { cx, isTransitioning } from "../ui/popup";
+import { MediaGalleryPage } from "./MediaGalleryPage";
+
+const CDN_ORIGIN = "https://cdn.backmatter.app";
+
+export function MediaFieldInput({
+  value,
+  readOnly,
+  onChange,
+}: {
+  name: string;
+  value: unknown;
+  readOnly?: boolean;
+  onChange: (value: unknown) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const url = typeof value === "string" ? value : "";
+  const id = url ? mediaIdFromUrl(url) : null;
+  const thumb = id ? mediaVariantUrl(CDN_ORIGIN, id, 400) : null;
+
+  return (
+    <div {...stylex.props(styles.row)}>
+      {thumb ? (
+        <img src={thumb} alt="" {...stylex.props(styles.thumb)} />
+      ) : (
+        <div {...stylex.props(styles.placeholder)}>No image</div>
+      )}
+      {readOnly ? null : (
+        <Button variant="secondary" onClick={() => setOpen(true)}>
+          Choose
+        </Button>
+      )}
+      {readOnly || !url ? null : (
+        <Button variant="ghost" onClick={() => onChange("")}>
+          Clear
+        </Button>
+      )}
+      <Dialog.Root open={open} onOpenChange={setOpen}>
+        <Dialog.Portal>
+          <Dialog.Backdrop
+            className={(state) =>
+              cx(styles.backdrop, isTransitioning(state.transitionStatus) && styles.backdropHidden)
+            }
+          />
+          <Dialog.Popup
+            className={(state) =>
+              cx(styles.popup, isTransitioning(state.transitionStatus) && styles.popupHidden)
+            }
+          >
+            <Dialog.Title className={cx(styles.title)}>Choose media</Dialog.Title>
+            <div {...stylex.props(styles.gallery)}>
+              <MediaGalleryPage
+                pick
+                onPick={(next) => {
+                  onChange(next);
+                  setOpen(false);
+                }}
+              />
+            </div>
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </div>
+  );
+}
+
+const fade = stylex.keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+const styles = stylex.create({
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+  },
+  thumb: {
+    width: "4.5rem",
+    height: "4.5rem",
+    objectFit: "cover",
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanel,
+  },
+  placeholder: {
+    width: "4.5rem",
+    height: "4.5rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanel,
+    color: colors.textMuted,
+    fontSize: type.xs,
+  },
+  backdrop: {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: colors.overlay,
+    animationName: fade,
+    animationDuration: "120ms",
+  },
+  backdropHidden: {
+    opacity: 0,
+  },
+  popup: {
+    position: "fixed",
+    top: "8vh",
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: "min(960px, calc(100vw - 32px))",
+    height: "min(720px, 80vh)",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: colors.bgSurface,
+    borderRadius: radius.md,
+    overflow: "hidden",
+  },
+  popupHidden: {
+    opacity: 0,
+  },
+  title: {
+    margin: 0,
+    padding: space.xl,
+    paddingBottom: 0,
+    fontSize: type.lg,
+  },
+  gallery: {
+    flex: 1,
+    minHeight: 0,
+  },
+});