@backmatter/studio 0.0.5 → 0.0.7

package/src/pages/TypeDocsPage.tsx

@@ -1,18 +1,5 @@
 // packages/studio/src/pages/TypeDocsPage.tsx
-import { useMemo } from "react";
-import { Link, useOutletContext, useParams } from "react-router";
-import * as stylex from "@stylexjs/stylex";
 import type { DocListItem } from "../api";
-import { useReplicaState } from "../replica/useReplica";
-import { colors, space, type } from "../styles/tokens.stylex";
-import { PageHeader } from "../ui/Page";
-import { Text } from "../ui/Text";
-import type { WorkspaceOutletContext } from "../workspace/types";
-import { modelHasLocale } from "../chrome/content-type-groups";
-import { compareTypeDocs } from "./type-docs";
-import { contentDocPath, defaultLocaleOf } from "../workspace-path";
-
-const hover = "@media (hover: hover)";
 
 type DocRow = DocListItem;
 
@@ -24,202 +11,7 @@ export function statusLabel(doc: Pick<DocRow, "status">) {
   return "";
 }
 
+/** Type index: navigation lives in the content explorer; main area stays empty. */
 export function TypeDocsPage() {
-  const { type = "" } = useParams();
-  const { workspace, models } = useOutletContext<WorkspaceOutletContext>();
-  const docs = useReplicaState()
-    .docs(workspace.id)
-    .filter((doc) => doc.type === type);
-
-  const model = models.find((m) => m.type === type);
-  const showLocale = !model || modelHasLocale(model.path);
-  const rows = useMemo(
-    () =>
-      [...docs].sort(compareTypeDocs),
-    [docs],
-  );
-
-  return (
-    <section {...stylex.props(styles.page)}>
-      <div {...stylex.props(styles.toolbar)}>
-        <PageHeader
-          compact
-          title={type}
-          description={
-            model
-              ? model.path
-              : "This type is not in the current schema snapshot."
-          }
-        />
-        {rows.length === 0 ? (
-          <Text tone="muted">
-            No documents for this type yet. Add files to the repo or pull from
-            GitHub via the branch menu.
-          </Text>
-        ) : null}
-      </div>
-      {rows.length > 0 ? (
-        <table {...stylex.props(styles.table)}>
-          <thead>
-            <tr>
-              <th scope="col" {...stylex.props(styles.th, styles.padStart)}>
-                Slug
-              </th>
-              {showLocale ? (
-                <th scope="col" {...stylex.props(styles.th, styles.colMeta)}>
-                  Locale
-                </th>
-              ) : null}
-              <th
-                scope="col"
-                {...stylex.props(styles.th, styles.colMeta, styles.padEnd)}
-              >
-                Status
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((doc) => {
-              const to = contentDocPath(
-                workspace.slug,
-                doc.type,
-                doc.slug,
-                doc.locale,
-                defaultLocaleOf(workspace.locales),
-              );
-              return (
-                <tr
-                  key={`${doc.locale}/${doc.type}/${doc.slug}`}
-                  {...stylex.props(styles.row)}
-                >
-                  <td {...stylex.props(styles.td, styles.padStart)}>
-                    <Link to={to} title={doc.slug} {...stylex.props(styles.slugLink)}>
-                      {doc.slug}
-                    </Link>
-                  </td>
-                  {showLocale ? (
-                    <td {...stylex.props(styles.td, styles.colMeta, styles.locale)}>
-                      {doc.locale}
-                    </td>
-                  ) : null}
-                  <td
-                    {...stylex.props(
-                      styles.td,
-                      styles.colMeta,
-                      styles.padEnd,
-                      doc.status === "conflict" && styles.conflict,
-                    )}
-                  >
-                    {statusLabel(doc)}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      ) : null}
-    </section>
-  );
+  return null;
 }
-
-const styles = stylex.create({
-  page: {
-    display: "flex",
-    minHeight: 0,
-    flex: 1,
-    flexDirection: "column",
-    overflowY: "auto",
-  },
-  toolbar: {
-    display: "flex",
-    flexDirection: "column",
-    gap: space.md,
-    paddingInline: space.xxl,
-    paddingTop: space.xxl,
-    paddingBottom: space.lg,
-  },
-  table: {
-    width: "100%",
-    borderCollapse: "collapse",
-    tableLayout: "fixed",
-    borderTopWidth: 1,
-    borderTopStyle: "solid",
-    borderTopColor: colors.border,
-  },
-  th: {
-    position: "sticky",
-    top: 0,
-    zIndex: 2,
-    paddingBlock: space.sm,
-    paddingInline: space.lg,
-    borderBottomWidth: 1,
-    borderBottomStyle: "solid",
-    borderBottomColor: colors.border,
-    backgroundColor: colors.bgApp,
-    color: colors.textMuted,
-    fontSize: type.xs,
-    fontWeight: 500,
-    letterSpacing: "0.02em",
-    textAlign: "left",
-  },
-  td: {
-    minWidth: 0,
-    height: 40,
-    paddingBlock: space.md,
-    paddingInline: space.lg,
-    borderBottomWidth: 1,
-    borderBottomStyle: "solid",
-    borderBottomColor: colors.border,
-    color: colors.textMuted,
-    fontSize: type.md,
-    verticalAlign: "middle",
-  },
-  padStart: {
-    paddingLeft: space.xxl,
-  },
-  padEnd: {
-    paddingRight: space.xxl,
-  },
-  colMeta: {
-    width: "7.5rem",
-  },
-  locale: {
-    fontSize: type.xs,
-    textTransform: "uppercase",
-    color: colors.textMuted,
-  },
-  conflict: {
-    color: colors.danger,
-    fontWeight: 500,
-  },
-  row: {
-    position: "relative",
-    [hover]: {
-      ":hover": { backgroundColor: colors.bgHover },
-    },
-    ":focus-within": {
-      outlineWidth: 2,
-      outlineStyle: "solid",
-      outlineColor: colors.focus,
-      outlineOffset: -2,
-    },
-  },
-  slugLink: {
-    display: "block",
-    minWidth: 0,
-    fontWeight: 500,
-    color: colors.text,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    "::after": {
-      content: '""',
-      position: "absolute",
-      inset: 0,
-      zIndex: 1,
-    },
-    ":focus-visible": {
-      outlineWidth: 0,
-    },
-  },
-});

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/preview-frame.tsx

@@ -0,0 +1,78 @@
+// packages/studio/src/preview-frame.tsx
+// Full-viewport ring and a top-right preview label while the site session is active.
+export const PREVIEW_FRAME_CLASS = "backmatter-preview-frame";
+
+/** Shared with the on-site dev bar while preview is active. */
+export const PREVIEW_CHROME_BORDER = "#d97706";
+
+function EyeIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8s-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+      <circle cx="8" cy="8" r="1.75" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}
+
+export function PreviewFrame() {
+  return (
+    <>
+      <style>{FRAME_CSS}</style>
+      <div
+        className={PREVIEW_FRAME_CLASS}
+        data-backmatter-preview-frame=""
+        aria-hidden
+      >
+        <div className={`${PREVIEW_FRAME_CLASS}-badge`}>
+          <EyeIcon />
+          <span>Preview</span>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const FRAME_CSS = `
+.${PREVIEW_FRAME_CLASS} {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482999;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 2px ${PREVIEW_CHROME_BORDER};
+  overflow: visible;
+}
+.${PREVIEW_FRAME_CLASS}-badge {
+  position: absolute;
+  top: env(safe-area-inset-top, 0px);
+  right: env(safe-area-inset-right, 0px);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid ${PREVIEW_CHROME_BORDER};
+  border-top: 0;
+  border-radius: 0 0 14px 14px;
+  background: #fff7ed;
+  color: #9a3412;
+  font: 500 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+}
+@keyframes backmatter-preview-frame-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .${PREVIEW_FRAME_CLASS} {
+    animation: backmatter-preview-frame-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .${PREVIEW_FRAME_CLASS} { animation: none; }
+}
+`;

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,
+  );
+}