@backmatter/studio 0.0.6 → 0.0.7

package/src/pages/WorkspaceLayout.tsx

@@ -14,6 +14,7 @@ import type { WorkspaceOutletContext } from "../workspace/types";
 import {
   defaultLocaleOf,
   isWorkspaceEditorPath,
+  isWorkspaceMediaPath,
   isWorkspaceSettingsPath,
   isWorkspaceTypeIndexPath,
 } from "../workspace-path";
@@ -28,6 +29,7 @@ export function WorkspaceLayout() {
   const isEditor = isWorkspaceEditorPath(location.pathname);
   const isTypeIndex = isWorkspaceTypeIndexPath(location.pathname);
   const isSettings = isWorkspaceSettingsPath(location.pathname);
+  const isMedia = isWorkspaceMediaPath(location.pathname);
   const { userId } = useAppChrome();
   const setNav = useSetWorkspaceNav();
   const replica = useReplicaState();
@@ -64,6 +66,9 @@ export function WorkspaceLayout() {
       workspaceName: workspace.name,
       role: workspace.role,
       defaultLocale: defaultLocaleOf(workspace.locales),
+      locales: workspace.locales?.length
+        ? workspace.locales
+        : [defaultLocaleOf(workspace.locales)],
       contentTypes: models.map((m) => m.type),
       contentModels: models.map((m) => ({
         type: m.type,
@@ -96,7 +101,7 @@ export function WorkspaceLayout() {
   }
 
   return (
-    <PageFrame flush={isEditor || isTypeIndex || isSettings}>
+    <PageFrame flush={isEditor || isTypeIndex || isSettings || isMedia}>
       <Outlet context={outletContext} />
     </PageFrame>
   );

package/src/pages/media-grid.ts

@@ -0,0 +1,190 @@
+// packages/studio/src/pages/media-grid.ts
+import { isMediaContentType, isMediaId, MAX_MEDIA_BYTES } from "@backmatter/core";
+
+export type CatalogMedia = {
+  id: string;
+  filename: string;
+  url: string;
+  thumbUrl: string;
+  width: number | null;
+  height: number | null;
+  contentType?: string;
+  byteSize?: number;
+  createdAt?: string;
+  variants?: Record<string, string>;
+};
+
+const LIGHTBOX_PARAM = "image";
+
+/** The media id in `?image=`, or null when the query is absent or not a catalog id. */
+export function lightboxImageId(params: URLSearchParams): string | null {
+  const value = params.get(LIGHTBOX_PARAM);
+  return value && isMediaId(value) ? value : null;
+}
+
+/** A copy of the query with the lightbox id set or removed. Other params stay. */
+export function searchWithLightboxImage(params: URLSearchParams, id: string | null): URLSearchParams {
+  const next = new URLSearchParams(params);
+  if (id && isMediaId(id)) next.set(LIGHTBOX_PARAM, id);
+  else next.delete(LIGHTBOX_PARAM);
+  return next;
+}
+
+/** The id that stays open after `removedId` leaves the list. The next image takes its place; the previous one does at the end. */
+export function mediaIdAfterRemoval(ids: readonly string[], removedId: string): string | null {
+  const index = ids.indexOf(removedId);
+  if (index < 0) return null;
+  const rest = ids.filter((id) => id !== removedId);
+  return rest[index] ?? rest[index - 1] ?? null;
+}
+
+export type PendingUpload = {
+  key: string;
+  filename: string;
+  previewUrl: string;
+  status: "uploading" | "error" | "done";
+  progress: number;
+  error?: string;
+  media?: CatalogMedia;
+};
+
+export type MediaGridState = {
+  pending: PendingUpload[];
+  loaded: CatalogMedia[];
+  total: number;
+  nextCursor: string | null;
+};
+
+export function emptyMediaGrid(): MediaGridState {
+  return { pending: [], loaded: [], total: 0, nextCursor: null };
+}
+
+export function beginUploads(
+  state: MediaGridState,
+  items: Array<{ key: string; filename: string; previewUrl: string }>,
+): MediaGridState {
+  return {
+    ...state,
+    pending: [
+      ...items.map((item) => ({ ...item, status: "uploading" as const, progress: 0 })),
+      ...state.pending,
+    ],
+  };
+}
+
+export function setUploadProgress(state: MediaGridState, key: string, progress: number): MediaGridState {
+  const fraction = Math.min(1, Math.max(0, progress));
+  return {
+    ...state,
+    pending: state.pending.map((item) =>
+      item.key === key && item.status === "uploading" ? { ...item, progress: fraction } : item,
+    ),
+  };
+}
+
+/** The finished image replaces its upload cell. Later uploads do not move. */
+export function finishUpload(
+  state: MediaGridState,
+  key: string,
+  media: CatalogMedia,
+): MediaGridState {
+  const slot = state.pending.find((item) => item.key === key);
+  if (!slot || slot.media) return state;
+  const alreadyListed = state.loaded.some((item) => item.id === media.id);
+  return {
+    ...state,
+    pending: state.pending.map((item) =>
+      item.key === key ? { ...item, status: "done", progress: 1, error: undefined, media } : item,
+    ),
+    loaded: state.loaded.filter((item) => item.id !== media.id),
+    total: alreadyListed ? state.total : state.total + 1,
+  };
+}
+
+export function failUpload(state: MediaGridState, key: string, error: string): MediaGridState {
+  return {
+    ...state,
+    pending: state.pending.map((item) =>
+      item.key === key ? { ...item, status: "error", error } : item,
+    ),
+  };
+}
+
+export function receivePage(
+  state: MediaGridState,
+  page: { total: number; media: CatalogMedia[]; nextCursor: string | null },
+  mode: "replace" | "append",
+): MediaGridState {
+  const held = new Set(state.pending.flatMap((item) => (item.media ? [item.media.id] : [])));
+  const incoming = page.media.filter(
+    (item) => !held.has(item.id) && !state.loaded.some((have) => have.id === item.id),
+  );
+  const loaded = mode === "replace" ? page.media.filter((item) => !held.has(item.id)) : [...state.loaded, ...incoming];
+  return {
+    ...state,
+    loaded,
+    total: page.total,
+    nextCursor: page.nextCursor,
+  };
+}
+
+/** Drop a hidden row from the grid. A just-finished upload leaves its cell too. */
+export function removeMedia(state: MediaGridState, id: string): MediaGridState {
+  const pending = state.pending.filter((item) => item.media?.id !== id);
+  const removedHeld = pending.length !== state.pending.length;
+  const removedLoaded = state.loaded.some((item) => item.id === id);
+  if (!removedHeld && !removedLoaded) return state;
+  return {
+    ...state,
+    pending,
+    loaded: state.loaded.filter((item) => item.id !== id),
+    total: Math.max(0, state.total - 1),
+  };
+}
+
+/** Cells the grid paints: in-flight uploads, then known rows, then empty slots for the rest. */
+export function gridLength(state: MediaGridState): number {
+  const held = state.pending.filter((item) => item.media).length;
+  const catalog = Math.max(state.total - held, state.loaded.length);
+  return state.pending.length + catalog;
+}
+
+export type GridArrow = "left" | "right" | "up" | "down";
+
+/**
+ * The catalog image an arrow lands on. Left and right step to the next image,
+ * continuing onto the next row. Up and down stay in the same column. Uploads
+ * occupy cells in front, so the first image is not always column zero. A move
+ * onto an upload, an empty slot, or past the edge stays put. No selection yet
+ * starts at the first image.
+ */
+export function nextMediaIndex(input: {
+  index: number | null;
+  arrow: GridArrow;
+  columns: number;
+  pendingCount: number;
+  mediaCount: number;
+  places?: readonly number[];
+}): number | null {
+  const places =
+    input.places ??
+    Array.from({ length: input.mediaCount }, (_, offset) => input.pendingCount + offset);
+  const { index, arrow, columns } = input;
+  if (places.length < 1 || columns < 1) return null;
+  if (index === null || index < 0 || index >= places.length) return 0;
+  if (arrow === "left") return Math.max(0, index - 1);
+  if (arrow === "right") return Math.min(places.length - 1, index + 1);
+
+  const cell = places[index]!;
+  const row = Math.floor(cell / columns) + (arrow === "down" ? 1 : -1);
+  const column = cell % columns;
+  if (row < 0) return index;
+  const next = places.indexOf(row * columns + column);
+  return next < 0 ? index : next;
+}
+
+export function rejectionReason(file: { type: string; size: number; name: string }): string | null {
+  if (file.size > MAX_MEDIA_BYTES) return `${file.name} is larger than 20 MB`;
+  if (file.type && !isMediaContentType(file.type)) return `${file.name} is not a supported image`;
+  return null;
+}

package/src/pages/preview-url.ts

@@ -1,5 +1,12 @@
 // packages/studio/src/pages/preview-url.ts
-import { routeFor, revalidateUrl, type RouteModel } from "@backmatter/core";
+import {
+  encodeDocLocale,
+  PREVIEW_LOCALE_QUERY,
+  revalidateUrl,
+  routeFor,
+  routeTemplate,
+  type RouteModel,
+} from "@backmatter/core";
 
 export function modelForType(models: readonly RouteModel[], type: string): RouteModel {
   return models.find((m) => m.type === type) ?? { type };
@@ -18,7 +25,11 @@ export function editorPreviewPath(
   tree?: string | null,
 ): string | null {
   if (!branch?.trim() || !tree?.trim()) return null;
-  return publicDocPath(model, locale, slug);
+  const path = publicDocPath(model, locale, slug);
+  if (!path || routeTemplate(model).includes("{locale}")) return path || null;
+  const params = new URLSearchParams();
+  params.set(PREVIEW_LOCALE_QUERY, encodeDocLocale(locale));
+  return `${path}?${params.toString()}`;
 }
 
 /**

package/src/replica/useReplica.ts

@@ -11,3 +11,12 @@ export function useReplicaState(): ReplicaStateView {
   );
   return replicaStore.getState();
 }
+
+/** Bumps when replica docs/git/checkout change — use in useMemo deps with `useReplicaState()`. */
+export function useReplicaRevision(): number {
+  return useSyncExternalStore(
+    replicaStore.subscribe,
+    replicaStore.getRevision,
+    replicaStore.getRevision,
+  );
+}

package/src/ui/ConfirmDialog.tsx

@@ -80,7 +80,7 @@ const styles = stylex.create({
   backdrop: {
     position: "fixed",
     inset: 0,
-    zIndex: z.overlay,
+    zIndex: z.palette,
     backgroundColor: colors.overlay,
     transitionProperty: "opacity",
     transitionDuration: "120ms",

package/src/workspace/permissions.ts

@@ -15,3 +15,12 @@ export function canDevelop(role: string): boolean {
 export function canPublish(role: string): boolean {
   return role === "admin" || role === "developer" || role === "editor";
 }
+
+export function canWriteContent(role: string): boolean {
+  return (
+    role === "admin" ||
+    role === "developer" ||
+    role === "editor" ||
+    role === "writer"
+  );
+}

package/src/workspace-path.ts

@@ -21,6 +21,10 @@ export function contentDocPath(
   return path;
 }
 
+export function mediaPath(slug: string) {
+  return `/${slug}/media`;
+}
+
 export function settingsPath(slug: string, page: string) {
   return `/${slug}/settings/${page}`;
 }
@@ -83,6 +87,15 @@ export function isWorkspaceTypeIndexPath(pathname: string) {
   return /\/content\/[^/]+\/?$/.test(pathname) && !isWorkspaceEditorPath(pathname);
 }
 
+export function isWorkspaceMediaPath(pathname: string) {
+  return /\/media\/?$/.test(pathname);
+}
+
+/** The content file tree belongs on content routes only. */
+export function isWorkspaceContentPath(pathname: string) {
+  return /\/content(?:\/|$)/.test(pathname);
+}
+
 export function isWorkspaceSettingsPath(pathname: string) {
   return /\/settings(?:\/|$)/.test(pathname) || /\/github\/?$/.test(pathname);
 }