@backmatter/studio 0.0.16 → 0.0.18

package/src/pages/MediaGalleryPage.tsx

@@ -43,9 +43,13 @@ const CELL = 168;
 export function MediaGalleryPage({
   pick = false,
   onPick,
+  pickedUrls,
+  onToggleUrl,
 }: {
   pick?: boolean;
   onPick?: (url: string) => void;
+  pickedUrls?: string[];
+  onToggleUrl?: (url: string) => void;
 }) {
   const { workspace } = useOutletContext<WorkspaceOutletContext>();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -168,7 +172,6 @@ export function MediaGalleryPage({
   }, [uploadFiles]);
 
   useEffect(() => {
-    if (pick) return;
     const hasFiles = (event: DragEvent) =>
       Array.from(event.dataTransfer?.types ?? []).includes("Files");
     const onEnter = (event: DragEvent) => {
@@ -202,7 +205,7 @@ export function MediaGalleryPage({
       window.removeEventListener("dragleave", onLeave);
       window.removeEventListener("drop", onDrop);
     };
-  }, [pick, uploadFiles]);
+  }, [uploadFiles]);
 
   const browsable = [
     ...state.pending.flatMap((item) => (item.media ? [item.media] : [])),
@@ -479,10 +482,18 @@ export function MediaGalleryPage({
                 <MediaHit
                   item={cell.item}
                   menu={!pick}
-                  selected={!pick && !sharedId && cell.item.id === selectedId}
+                  selected={
+                    onToggleUrl
+                      ? (pickedUrls?.includes(cell.item.url) ?? false)
+                      : !pick && !sharedId && cell.item.id === selectedId
+                  }
                   canDelete={canDelete}
                   onOpen={() => {
                     setSelectedId(null);
+                    if (onToggleUrl) {
+                      onToggleUrl(cell.item.url);
+                      return;
+                    }
                     if (pick) {
                       if (onPick) onPick(cell.item.url);
                       return;

package/src/pages/PreviewAddress.tsx

@@ -0,0 +1,263 @@
+// packages/studio/src/pages/PreviewAddress.tsx
+import { useEffect, useRef, useState, type FormEvent } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+import {
+  IconArrowRotateClockwise,
+  IconArrowUpRight,
+  IconGlobe,
+} from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { hostPath } from "../host-path";
+import { routesMatching } from "../content-routes";
+
+const hover = "@media (hover: hover)";
+
+/** Reload, the page path, and open. The path opens the route list. */
+export function PreviewAddress({
+  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 ? routesMatching(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>
+  );
+}
+
+const styles = stylex.create({
+  address: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.xs,
+    minWidth: 0,
+  },
+  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,
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+  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",
+    padding: 0,
+    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 },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+});

package/src/pages/RenderedBody.tsx

@@ -9,7 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import * as stylex from "@stylexjs/stylex";
-import type { BlockSnapshot } from "../api";
+import type { BlockSnapshot, SchemaField } from "../api";
 import { contentBlockFields, contentBlockLabel, contentBlockProps } from "../content-blocks";
 import { colors, radius, space } from "../styles/tokens.stylex";
 import {
@@ -40,16 +40,28 @@ export type RenderedBodyHandle = {
 
 const BODY_HOST = "body";
 
+type ModelRef = { type: string; external?: boolean; fields?: Record<string, SchemaField> };
+type RelationDocumentLists = Record<
+  string,
+  Array<{ slug: string; frontmatter: Record<string, unknown> }>
+>;
+
 export const RenderedBody = forwardRef<
   RenderedBodyHandle,
   {
     value: string;
     catalog?: Array<BlockSnapshot & { label?: string }>;
+    models: ModelRef[];
+    objects?: Array<{ name: string; fields: Record<string, SchemaField> }>;
+    documentLists?: RelationDocumentLists;
     readOnly?: boolean;
     labelledBy: string;
     onChange: (value: string) => void;
   }
->(function RenderedBody({ value, catalog = [], readOnly, labelledBy, onChange }, ref) {
+>(function RenderedBody(
+  { value, catalog = [], models, objects = [], documentLists, readOnly, labelledBy, onChange },
+  ref,
+) {
   const local = useRef(value);
   const hosts = useRef(new Map<string, HTMLElement>());
   const linking = useRef(false);
@@ -218,6 +230,9 @@ export const RenderedBody = forwardRef<
           title={contentBlockLabel(settings.def.name)}
           fields={contentBlockFields(settings.def)}
           value={contentBlockProps(settings.block.markdown, settings.def.name)}
+          models={models}
+          objects={objects}
+          documentLists={documentLists}
           readOnly={readOnly}
           onOpenChange={(open) => {
             if (!open) setSettingsId(null);

package/src/pages/branch-notice.ts

@@ -0,0 +1,16 @@
+// packages/studio/src/pages/branch-notice.ts
+
+export type BranchNoticeKind = "update" | "edits" | "fold";
+
+/** What to show when this session's commit is behind the branch tip. */
+export function branchNoticeKind(input: {
+  baseSha: string | null;
+  headSha: string | null;
+  editCount: number;
+  foldPending: boolean;
+}): BranchNoticeKind | null {
+  if (!input.baseSha || !input.headSha || input.baseSha === input.headSha) return null;
+  if (input.editCount > 0) return "edits";
+  if (input.foldPending) return "fold";
+  return "update";
+}

package/src/pages/code-session-boot.ts

@@ -29,15 +29,3 @@ export function bootSteps(input: {
   if (input.phase === "stopped") return at(0, "failed");
   return at(input.furthest === "starting" ? 2 : input.furthest === "installing" ? 1 : 0, "failed");
 }
-
-/** Normalizes what someone types in the address bar to a path inside the host. */
-export function hostPath(input: string): string {
-  const trimmed = input.trim();
-  if (!trimmed) return "/";
-  try {
-    const url = new URL(trimmed);
-    return `${url.pathname}${url.search}${url.hash}` || "/";
-  } catch {
-    return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
-  }
-}

package/src/pages/code-session-context.tsx

@@ -13,6 +13,8 @@ export type CodeSessionContextValue = {
   sessionId: string;
   editCount: number;
   refresh: () => void;
+  /** The checkout is being replaced. Chat waits until the host boots. */
+  updating?: boolean;
 };
 
 const CodeSessionContext = createContext<CodeSessionContextValue | null>(null);

package/src/pages/media-selection.ts

@@ -0,0 +1,79 @@
+// packages/studio/src/pages/media-selection.ts
+
+export function toggleMediaUrl(urls: readonly string[], url: string): string[] {
+  const index = urls.indexOf(url);
+  if (index >= 0) {
+    return urls.filter((_, i) => i !== index);
+  }
+  return [...urls, url];
+}
+
+export function appendMediaUrls(
+  existing: readonly string[],
+  incoming: readonly string[],
+): string[] {
+  const next = [...existing];
+  for (const url of incoming) {
+    if (!next.includes(url)) {
+      next.push(url);
+    }
+  }
+  return next;
+}
+
+export function moveMediaUrl(urls: readonly string[], from: number, to: number): string[] {
+  if (from < 0 || from >= urls.length || to < 0 || to >= urls.length) {
+    return [...urls];
+  }
+  const next = [...urls];
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item!);
+  return next;
+}
+
+export function acceptedDrop(
+  existing: readonly string[],
+  accepted: readonly string[],
+  multiple: boolean,
+): { urls: string[]; notAdded: number } {
+  if (!multiple) {
+    if (accepted.length === 0) {
+      return { urls: [...existing], notAdded: 0 };
+    }
+    return {
+      urls: [accepted[0]!],
+      notAdded: Math.max(0, accepted.length - 1),
+    };
+  }
+  return { urls: appendMediaUrls(existing, accepted), notAdded: 0 };
+}
+
+export function notAddedMessage(count: number): string | null {
+  if (count === 0) {
+    return null;
+  }
+  if (count === 1) {
+    return "1 image was not added";
+  }
+  return `${count} images were not added`;
+}
+
+export function editorUrls(
+  value: unknown,
+  multiple: boolean,
+): { urls: string[]; raw: unknown } {
+  if (value === undefined || value === null || value === "") {
+    return { urls: [], raw: undefined };
+  }
+  if (typeof value === "string") {
+    return { urls: [value], raw: value };
+  }
+  if (Array.isArray(value)) {
+    if (multiple) {
+      const urls = value.filter((item): item is string => typeof item === "string");
+      return { urls, raw: value };
+    }
+    return { urls: [], raw: value };
+  }
+  return { urls: [], raw: undefined };
+}

package/src/shell-resets.css

@@ -150,10 +150,20 @@ html[data-theme="dark"]:has(.backmatter-studio)
   outline-color: #fafafa;
 }
 
+[data-no-ring]:focus,
 [data-no-ring]:focus-visible {
   outline: none;
+  outline-offset: 0;
+  box-shadow: none;
 }
 
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  [data-no-ring]:focus,
 :is(
     .backmatter-studio,
     [data-backmatter-panel],
@@ -161,8 +171,13 @@ html[data-theme="dark"]:has(.backmatter-studio)
     [data-selection-bar]
   )
   [data-no-ring]:focus-visible,
+html[data-theme="dark"]:has(.backmatter-studio)
+  :is(.backmatter-studio, [data-base-ui-portal], [data-selection-bar])
+  [data-no-ring]:focus,
 html[data-theme="dark"]:has(.backmatter-studio)
   :is(.backmatter-studio, [data-base-ui-portal], [data-selection-bar])
   [data-no-ring]:focus-visible {
   outline: none;
+  outline-offset: 0;
+  box-shadow: none;
 }