@backmatter/studio 0.0.17 → 0.0.18

package/src/pages/CodeSessionPage.tsx

@@ -1,27 +1,23 @@
 // packages/studio/src/pages/CodeSessionPage.tsx
-import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { RouteModel } from "@backmatter/core";
 import { useOutletContext } from "react-router";
 import * as stylex from "@stylexjs/stylex";
-import { Combobox } from "@base-ui/react/combobox";
 import {
-  IconArrowRotateClockwise,
-  IconArrowUpRight,
   IconCheckmark1Small,
   IconCrossSmall,
   IconEyeOpen,
   IconFiles,
-  IconGlobe,
 } from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
 import { ChatPanel } from "../chat/ChatPanel";
 import { ChatProvider, ChatSessionScope, useChatBusy } from "../chat/ChatProvider";
 import { useReplicaState } from "../replica/useReplica";
+import { routesForContentFiles } from "../content-routes";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { apiCredentials, apiHeaders, apiUrl } from "../studio-config";
 import { Text } from "../ui/Text";
-import { cx, popup, popupClassName } from "../ui/popup";
 import type { WorkspaceOutletContext } from "../workspace/types";
-import { bootSteps, hostPath, type BootStep, type HostPhase } from "./code-session-boot";
+import { bootSteps, type BootStep, type HostPhase } from "./code-session-boot";
 import {
   frameAddress,
   framedLocation,
@@ -30,7 +26,7 @@ import {
   previewUrl,
   type HostPreview,
 } from "./code-session-frame";
-import { contentRoutes, matchingRoutes } from "./code-session-routes";
+import { PreviewAddress } from "./PreviewAddress";
 import { CodeSessionFiles, type FilesView } from "./CodeSessionFiles";
 import { PreviewSizeSwitch, PreviewViewport } from "./PreviewSize";
 import { persistPreviewSize, readPreviewSize, type PreviewSize } from "./preview-size";
@@ -194,7 +190,7 @@ export function CodeSessionScreen({
             </TabButton>
           </div>
 
-          <AddressBar
+          <PreviewAddress
             path={location}
             enabled={frameSrc !== null && tab === "preview"}
             routes={routes}
@@ -324,170 +320,6 @@ function TabButton({
   );
 }
 
-function AddressBar({
-  path,
-  enabled,
-  routes,
-  routesPending,
-  onOpenRoutes,
-  onPath,
-  onReload,
-  onOpen,
-}: {
-  path: string;
-  enabled: boolean;
-  routes: readonly string[];
-  routesPending: boolean;
-  onOpenRoutes?: () => void;
-  onPath: (path: string) => void;
-  onReload: () => void;
-  onOpen: () => void;
-}) {
-  const [query, setQuery] = useState<string | null>(null);
-  const [open, setOpen] = useState(false);
-  const picked = useRef(false);
-  const fieldRef = useRef<HTMLButtonElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const shown = query ? matchingRoutes(routes, query) : [...routes];
-
-  useEffect(() => {
-    if (!open) return;
-    const input = inputRef.current;
-    input?.focus();
-    input?.select();
-  }, [open]);
-
-  return (
-    <div {...stylex.props(styles.address)}>
-      <button
-        type="button"
-        aria-label="Reload preview"
-        disabled={!enabled}
-        onClick={onReload}
-        {...stylex.props(styles.iconButton)}
-      >
-        <IconArrowRotateClockwise size={14} ariaHidden />
-      </button>
-      <Combobox.Root
-        items={shown}
-        filteredItems={shown}
-        inputValue={query ?? ""}
-        disabled={!enabled}
-        open={open}
-        value={routes.includes(path) ? path : null}
-        onOpenChange={(next) => {
-          if (!enabled && next) return;
-          setOpen(next);
-          if (next) onOpenRoutes?.();
-          else setQuery(null);
-        }}
-        onInputValueChange={(value, details) => {
-          if (details.reason === "input-change" || details.reason === "input-clear") {
-            setQuery(value);
-          }
-        }}
-        onValueChange={(value) => {
-          if (typeof value !== "string") return;
-          picked.current = true;
-          setQuery(null);
-          onPath(hostPath(value));
-          queueMicrotask(() => {
-            picked.current = false;
-          });
-        }}
-      >
-        <Combobox.Trigger
-          ref={fieldRef}
-          aria-label="Preview path"
-          disabled={!enabled}
-          data-no-ring
-          className={cx(styles.addressTrigger)}
-        >
-          <IconGlobe size={13} ariaHidden />
-          <span {...stylex.props(styles.addressPath)}>{path}</span>
-        </Combobox.Trigger>
-        <Combobox.Portal>
-          <Combobox.Positioner
-            anchor={fieldRef}
-            side="bottom"
-            align="start"
-            sideOffset={6}
-            className={cx(popup.positioner)}
-          >
-            <Combobox.Popup
-              aria-label="Pages"
-              className={(state) => popupClassName(state, styles.routePopup)}
-            >
-              <form
-                onSubmit={(event: FormEvent<HTMLFormElement>) => {
-                  event.preventDefault();
-                  const fromList = picked.current;
-                  picked.current = false;
-                  if (fromList) return;
-                  const typed = event.currentTarget.querySelector("input")?.value;
-                  if (typed?.trim()) onPath(hostPath(typed));
-                  setOpen(false);
-                  setQuery(null);
-                }}
-              >
-                <Combobox.Input
-                  ref={inputRef}
-                  placeholder="Find a page"
-                  aria-label="Find a page"
-                  spellCheck={false}
-                  autoComplete="off"
-                  data-no-ring
-                  className={cx(popup.quietInput, styles.routeSearch)}
-                  onKeyDown={(event) => {
-                    if (event.key !== "Enter") return;
-                    // A highlighted row is chosen by the combobox. A bare Enter goes to the typed path.
-                    if (event.currentTarget.getAttribute("aria-activedescendant")) return;
-                    const typed = event.currentTarget.value.trim();
-                    if (!typed) return;
-                    picked.current = true;
-                    onPath(hostPath(typed));
-                  }}
-                />
-              </form>
-              <div {...stylex.props(popup.separator)} />
-              <Combobox.Empty className={cx(popup.empty)}>
-                {routesPending ? "Loading pages" : "No pages"}
-              </Combobox.Empty>
-              <Combobox.List className={cx(styles.routeList)}>
-                {(route: string) => (
-                  <Combobox.Item
-                    key={route}
-                    value={route}
-                    className={(state) =>
-                      cx(
-                        popup.item,
-                        styles.routeItem,
-                        state.highlighted && popup.itemHighlighted,
-                        state.selected && popup.itemSelected,
-                      )
-                    }
-                  >
-                    {route}
-                  </Combobox.Item>
-                )}
-              </Combobox.List>
-            </Combobox.Popup>
-          </Combobox.Positioner>
-        </Combobox.Portal>
-      </Combobox.Root>
-      <button
-        type="button"
-        aria-label="Open preview in a new tab"
-        disabled={!enabled}
-        onClick={onOpen}
-        {...stylex.props(styles.iconButton)}
-      >
-        <IconArrowUpRight size={14} ariaHidden />
-      </button>
-    </div>
-  );
-}
-
 function BootCard({
   title,
   steps,
@@ -920,7 +752,7 @@ export default function CodeSessionPage() {
       live={live}
       onReload={() => navigate(location)}
       onOpen={() => void openInNewTab()}
-      routes={contentRoutes(models, fileList ?? [])}
+      routes={routesForContentFiles(models, fileList ?? [])}
       routesPending={routesPending}
       onOpenRoutes={openRoutes}
       files={{
@@ -1161,76 +993,9 @@ const styles = stylex.create({
     backgroundColor: colors.bgSurface,
     boxShadow: "0 1px 2px rgba(0, 0, 0, 0.08)",
   },
-  address: {
-    display: "flex",
-    alignItems: "center",
-    gap: space.xs,
-    minWidth: 0,
-  },
   sizeSwitch: {
     justifySelf: "end",
   },
-  addressTrigger: {
-    display: "flex",
-    flex: 1,
-    alignItems: "center",
-    gap: space.xs,
-    minWidth: 0,
-    height: "28px",
-    paddingInline: space.sm,
-    borderWidth: 0,
-    borderRadius: "999px",
-    font: "inherit",
-    textAlign: "left",
-    cursor: { default: "pointer", ":disabled": "default" },
-    color: { default: colors.textMuted, ":disabled": colors.textMuted },
-    backgroundColor: colors.bgPanelInset,
-  },
-  addressPath: {
-    flex: 1,
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    fontFamily: type.mono,
-    fontSize: type.xs,
-    color: colors.text,
-  },
-  routeSearch: {
-    fontFamily: type.mono,
-    fontSize: type.xs,
-  },
-  routePopup: {
-    width: "var(--anchor-width)",
-    minWidth: "220px",
-    maxHeight: "min(320px, var(--available-height))",
-    display: "flex",
-    flexDirection: "column",
-    overflowY: "hidden",
-  },
-  routeList: {
-    minHeight: 0,
-    overflowY: "auto",
-  },
-  routeItem: {
-    fontFamily: type.mono,
-  },
-  iconButton: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    width: "28px",
-    height: "28px",
-    borderWidth: 0,
-    borderRadius: radius.sm,
-    cursor: { default: "pointer", ":disabled": "default" },
-    color: { default: colors.textMuted, ":disabled": colors.border },
-    backgroundColor: {
-      default: "transparent",
-      [hover]: { default: null, ":hover:not(:disabled)": colors.bgHover },
-    },
-  },
   canvas: {
     position: "relative",
     display: "flex",

package/src/pages/DocEditorPage.tsx

@@ -3,6 +3,7 @@ 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";
+import { matchRoute, repoPathFromModel } from "@backmatter/core";
 import {
   fetchDoc,
   fetchDocs,
@@ -21,6 +22,7 @@ import {
 import { FieldControl } from "../fields/FieldControl";
 import { loadRelationDocuments } from "../fields/load-relation-documents";
 import { omitField } from "../fields/omit-field";
+import { linkDocumentTypes } from "../fields/link-targets";
 import { relationTargets } from "../fields/relation-targets";
 import { useReplicaState } from "../replica/useReplica";
 import { useSetEditorActions } from "../chrome/EditorActionsContext";
@@ -34,7 +36,6 @@ import {
 } from "../chrome/EditorFocusContext";
 import { useSetEditorStatus } from "../chrome/EditorStatusContext";
 import { modifierSymbol } from "../chrome/hotkeys";
-import { ReloadIcon } from "../chrome/icons";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { Button, ButtonLink } from "../ui/Button";
 import { ConfirmDialog } from "../ui/ConfirmDialog";
@@ -50,6 +51,8 @@ import {
   persistPreviewPct,
   readPreviewPct,
 } from "./preview-split";
+import { routesForContentFiles } from "../content-routes";
+import { PreviewAddress } from "./PreviewAddress";
 import { PreviewSizeSwitch, PreviewViewport } from "./PreviewSize";
 import { persistPreviewSize, readPreviewSize, type PreviewSize } from "./preview-size";
 import {
@@ -82,10 +85,6 @@ import {
 const AUTOSAVE_MS = 400;
 const hover = "@media (hover: hover)";
 
-const spin = stylex.keyframes({
-  to: { transform: "rotate(360deg)" },
-});
-
 const pulse = stylex.keyframes({
   "0%": { opacity: 0.4 },
   "50%": { opacity: 1 },
@@ -183,6 +182,9 @@ export function DocEditorPage() {
       for (const type of relationTargets(fields, models, objects)) {
         targets.add(type);
       }
+      for (const type of linkDocumentTypes(fields, models, objects)) {
+        targets.add(type);
+      }
     }
     return [...targets].sort();
   }, [model, blocks, richtext, models, objects]);
@@ -246,6 +248,9 @@ export function DocEditorPage() {
   editEpochRef.current = editEpoch;
 
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const docIdentity = `${type}\0${slug}`;
+  const [browse, setBrowse] = useState<{ doc: string; path: string } | null>(null);
+  const browsedPath = browse?.doc === docIdentity ? browse.path : null;
   const isPage = docFormat === "page";
   const detailNames = fieldNames.filter((name) => fieldKinds[name] !== "blocks");
   const blocksField =
@@ -268,18 +273,28 @@ export function DocEditorPage() {
     branch,
     tree,
   });
+  const framePath = browsedPath ?? previewPath;
+  // Each document is the content file its model path names. A deleted document is gone.
+  const previewRoutes = routesForContentFiles(
+    models,
+    replica.docs(workspaceId).flatMap((doc) => {
+      if (doc.status === "deleted") return [];
+      const model = models.find((item) => item.type === doc.type);
+      return model ? [repoPathFromModel(model, doc.slug)] : [];
+    }),
+  );
 
   useEffect(() => {
-    if (!frameIdentity || !previewPath || !workspaceId || !siteUrl) {
+    if (!frameIdentity || !framePath || !workspaceId || !siteUrl) {
       setPreviewUrl(null);
       return;
     }
     if (studioIsOnSite(siteUrl, window.location.origin)) {
-      setPreviewUrl(onSitePreviewUrl(siteUrl, previewPath));
+      setPreviewUrl(onSitePreviewUrl(siteUrl, framePath));
       return;
     }
     let cancelled = false;
-    void createPreviewTicket(workspaceId, { redirect: previewPath, branch, tree })
+    void createPreviewTicket(workspaceId, { redirect: framePath, branch, tree })
       .then((res) => {
         if (!cancelled) setPreviewUrl(previewEnableUrl(siteUrl, res.ticket));
       })
@@ -289,7 +304,7 @@ export function DocEditorPage() {
     return () => {
       cancelled = true;
     };
-  }, [frameIdentity, previewPath, workspaceId, siteUrl, branch, tree]);
+  }, [frameIdentity, framePath, workspaceId, siteUrl, branch, tree]);
 
   useEffect(() => {
     if (relationTargetTypes.length === 0) {
@@ -488,6 +503,17 @@ export function DocEditorPage() {
     setPreviewKey((k) => k + 1);
   }
 
+  function onPreviewPath(next: string) {
+    const pathname = next.split(/[?#]/, 1)[0] || "/";
+    const doc = matchRoute(models, pathname);
+    if (doc && (doc.type !== type || doc.slug !== slug)) {
+      navigate(contentDocPath(workspace.slug, doc.type, doc.slug));
+      return;
+    }
+    if (next === framePath) remountPreview();
+    setBrowse({ doc: docIdentity, path: next });
+  }
+
   function choosePreviewSize(size: PreviewSize) {
     setPreviewSize(size);
     persistPreviewSize(size);
@@ -881,32 +907,7 @@ export function DocEditorPage() {
           style={{ ...previewSx.style, flexBasis: `${previewPct}%` }}
         >
           <div {...stylex.props(styles.previewBar)}>
-            <div {...stylex.props(styles.urlGroup)}>
-              <Tooltip label={previewLoading ? "Loading preview…" : "Reload preview"}>
-                <button
-                  type="button"
-                  aria-label={previewLoading ? "Preview loading" : "Reload preview"}
-                  aria-busy={previewLoading || undefined}
-                  onClick={remountPreview}
-                  {...stylex.props(styles.reloadBtn)}
-                >
-                  <span
-                    {...stylex.props(
-                      styles.reloadIcon,
-                      previewLoading && styles.reloadSpinning,
-                    )}
-                  >
-                    <ReloadIcon />
-                  </span>
-                </button>
-              </Tooltip>
-              <span {...stylex.props(styles.url)} title={previewUrl ?? undefined}>
-                {previewUrl
-                  ? previewUrl.replace(/^https?:\/\//, "")
-                  : !siteUrl
-                    ? "No site URL"
-                    : "Loading checkout…"}
-              </span>
+            <div {...stylex.props(styles.previewLead)}>
               {previewLive === "rendered" ? (
                 <span {...stylex.props(styles.previewLive)}>Updated</span>
               ) : null}
@@ -927,15 +928,20 @@ export function DocEditorPage() {
                 </button>
               ) : null}
             </div>
-            <PreviewSizeSwitch size={previewSize} onSize={choosePreviewSize} />
-            <span
-              {...stylex.props(
-                styles.badge,
-                inConflict && styles.badgeConflict,
-              )}
-            >
-              {statusLabel ?? "…"}
-            </span>
+            <PreviewAddress
+              path={framePath ?? (!siteUrl ? "No site URL" : "Loading checkout…")}
+              enabled={previewUrl !== null}
+              routes={previewRoutes}
+              routesPending={!replica.ready}
+              onPath={onPreviewPath}
+              onReload={remountPreview}
+              onOpen={() => {
+                if (previewUrl) window.open(previewUrl, "_blank", "noopener,noreferrer");
+              }}
+            />
+            <div {...stylex.props(styles.sizeSwitch)}>
+              <PreviewSizeSwitch size={previewSize} onSize={choosePreviewSize} />
+            </div>
           </div>
           {previewUrl ? (
             <PreviewViewport size={previewSize} dragging={dragging}>
@@ -1000,7 +1006,7 @@ export function DocEditorPage() {
           <div {...stylex.props(styles.editorColumn, !showPreview && styles.editorColumnSolo)}>
           <div {...stylex.props(styles.toolbar)}>
             <div {...stylex.props(styles.meta)}>
-              <Text as="h1" size="md" weight="semibold" truncate>
+              <Text as="h1" size="sm" weight="medium" truncate>
                 {type}/{slug}
               </Text>
             </div>
@@ -1230,74 +1236,34 @@ const styles = stylex.create({
     flexShrink: 0,
     flexDirection: "column",
     overflow: "hidden",
-    backgroundColor: colors.bgSurface,
+    backgroundColor: colors.bgApp,
   },
   previewBar: {
-    display: "flex",
-    flexShrink: 0,
+    display: "grid",
+    gridTemplateColumns: "1fr minmax(0, 520px) 1fr",
     alignItems: "center",
-    justifyContent: "space-between",
+    flexShrink: 0,
     gap: space.md,
+    height: "44px",
+    boxSizing: "border-box",
     paddingInline: space.md,
-    paddingBlock: space.sm,
     borderBottomWidth: 1,
     borderBottomStyle: "solid",
     borderBottomColor: colors.border,
+    backgroundColor: colors.bgSurface,
     fontSize: type.xs,
     color: colors.textMuted,
   },
-  urlGroup: {
+  previewLead: {
     display: "flex",
-    minWidth: 0,
-    flex: 1,
     alignItems: "center",
     gap: space.sm,
-  },
-  reloadBtn: {
-    display: "inline-flex",
-    flexShrink: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 22,
-    height: 22,
-    padding: 0,
-    borderWidth: 0,
-    borderRadius: radius.sm,
-    backgroundColor: "transparent",
-    color: colors.textMuted,
-    cursor: "pointer",
-    touchAction: "manipulation",
-    [hover]: {
-      ":hover": {
-        backgroundColor: colors.bgHover,
-        color: colors.text,
-      },
-    },
-    ":focus-visible": {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: colors.focus,
-      outlineOffset: 1,
-    },
-  },
-  reloadIcon: {
-    display: "inline-flex",
-  },
-  reloadSpinning: {
-    animationName: spin,
-    animationDuration: "700ms",
-    animationTimingFunction: "linear",
-    animationIterationCount: "infinite",
-    "@media (prefers-reduced-motion: reduce)": {
-      animationName: "none",
-      animationDuration: "0s",
-    },
-  },
-  url: {
+    minWidth: 0,
+    justifySelf: "start",
     overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    fontFamily: type.mono,
+  },
+  sizeSwitch: {
+    justifySelf: "end",
   },
   previewLive: {
     flexShrink: 0,
@@ -1310,28 +1276,21 @@ const styles = stylex.create({
   editPage: {
     flexShrink: 0,
     borderWidth: 0,
-    borderRadius: 4,
+    borderRadius: radius.sm,
     backgroundColor: colors.bgHover,
     color: colors.text,
     cursor: "pointer",
-    fontSize: type.sm,
-    paddingInline: space.sm,
-    paddingBlock: 2,
-  },
-  badge: {
-    flexShrink: 0,
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: colors.border,
-    borderRadius: 4,
+    font: "inherit",
+    fontSize: type.xs,
+    fontWeight: 500,
     paddingInline: space.sm,
-    paddingBlock: 2,
-    textTransform: "uppercase",
-    letterSpacing: "0.04em",
-  },
-  badgeConflict: {
-    borderColor: colors.danger,
-    color: colors.danger,
+    paddingBlock: "2px",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
   },
   conflictBanner: {
     display: "flex",
@@ -1454,22 +1413,23 @@ const styles = stylex.create({
   toolbar: {
     display: "flex",
     flexShrink: 0,
-    flexWrap: "wrap",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: space.sm,
-    paddingInline: space.lg,
-    paddingBlock: space.sm,
+    gap: space.md,
+    height: "44px",
+    boxSizing: "border-box",
+    paddingInline: space.md,
     borderBottomWidth: 1,
     borderBottomStyle: "solid",
     borderBottomColor: colors.border,
+    backgroundColor: colors.bgSurface,
   },
   meta: {
     minWidth: 0,
   },
   actions: {
     display: "flex",
-    flexWrap: "wrap",
+    flexShrink: 0,
     gap: space.sm,
   },
   formWrap: {