@backmatter/studio 0.0.8 → 0.0.9

package/src/chrome/content-tree-visibility.ts

@@ -0,0 +1,55 @@
+// packages/studio/src/chrome/content-tree-visibility.ts
+import { useEffect, useState } from "react";
+import type { KeyValueStore } from "../last-workspace";
+import { isWorkspaceContentPath, isWorkspaceEditorPath } from "../workspace-path";
+
+export const CONTENT_TREE_OPEN_KEY = "backmatter-content-tree-open";
+const CONTENT_TREE_EVENT = "backmatter-content-tree";
+
+/**
+ * The type index is the file tree, so it stays open.
+ * A document follows the editor toggle. Other routes have no tree.
+ */
+export function contentTreeVisible(pathname: string, open: boolean) {
+  if (!isWorkspaceContentPath(pathname)) return false;
+  if (isWorkspaceEditorPath(pathname)) return open;
+  return true;
+}
+
+export function readContentTreeOpen(storage: KeyValueStore = localStorage) {
+  try {
+    return storage.getItem(CONTENT_TREE_OPEN_KEY) !== "0";
+  } catch {
+    return true;
+  }
+}
+
+export function writeContentTreeOpen(
+  open: boolean,
+  storage: KeyValueStore = localStorage,
+) {
+  try {
+    storage.setItem(CONTENT_TREE_OPEN_KEY, open ? "1" : "0");
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+export function toggleContentTree() {
+  writeContentTreeOpen(!readContentTreeOpen());
+  window.dispatchEvent(new Event(CONTENT_TREE_EVENT));
+}
+
+export function useContentTreeOpen() {
+  const [open, setOpen] = useState(() => readContentTreeOpen());
+  useEffect(() => {
+    const sync = () => setOpen(readContentTreeOpen());
+    window.addEventListener(CONTENT_TREE_EVENT, sync);
+    window.addEventListener("storage", sync);
+    return () => {
+      window.removeEventListener(CONTENT_TREE_EVENT, sync);
+      window.removeEventListener("storage", sync);
+    };
+  }, []);
+  return open;
+}

package/src/devbar-state.ts

@@ -0,0 +1,125 @@
+// packages/studio/src/devbar-state.ts
+// Which row the on-site bar shows, and the motion numbers the stylesheet shares.
+
+export type DevbarMode = "preview" | "live";
+
+export type DevbarStep = {
+  label: string;
+  state: "done" | "active" | "pending";
+};
+
+export type DevbarActivity =
+  | { type: "editing"; field: string }
+  | { type: "publishing"; steps: readonly DevbarStep[]; progress: number }
+  | { type: "published"; sha: string; when: string };
+
+export type DevbarRow = "idle" | "changes" | "editing" | "publishing" | "published";
+
+export type DevbarChrome = {
+  mode: DevbarMode;
+  row: DevbarRow;
+  modeLabel: string;
+  announce: string;
+};
+
+export const DEVBAR_EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)";
+export const DEVBAR_EASE_IN = "cubic-bezier(0.55, 0, 1, 0.45)";
+export const DEVBAR_EASE_DRAWER = "cubic-bezier(0.32, 0.72, 0, 1)";
+
+/** Entering the violet flood is slower than leaving it. */
+export const DEVBAR_FLOOD_ENTER_MS = 550;
+export const DEVBAR_FLOOD_EXIT_MS = 300;
+
+/** The viewport frame draws out slower than it retracts. */
+export const DEVBAR_FRAME_ENTER_MS = 750;
+export const DEVBAR_FRAME_EXIT_MS = 360;
+
+const MODE_KEY = "backmatter.devbar.mode";
+
+export function devbarChrome(input: {
+  siteMode: DevbarMode;
+  changeCount: number;
+  activity?: DevbarActivity | null;
+}): DevbarChrome {
+  const activity = input.activity ?? null;
+  const row: DevbarRow = activity
+    ? activity.type
+    : input.siteMode === "preview" && input.changeCount > 0
+      ? "changes"
+      : "idle";
+  const mode: DevbarMode = row === "published" ? "live" : input.siteMode;
+  const modeLabel = mode === "preview" ? "Exit preview" : "Enter preview";
+  const announce = mode === "preview" ? "Preview on, drafts visible" : "Live site";
+  return { mode, row, modeLabel, announce };
+}
+
+export function originWithin(
+  container: { left: number; top: number },
+  target: { left: number; top: number; width: number; height: number },
+) {
+  return {
+    x: target.left + target.width / 2 - container.left,
+    y: target.top + target.height / 2 - container.top,
+  };
+}
+
+export function shouldAnimateWidth(before: number, after: number) {
+  return Math.abs(after - before) > 1;
+}
+
+export function prefersReducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export function readStoredMode(): DevbarMode | null {
+  if (typeof sessionStorage === "undefined") return null;
+  try {
+    const value = sessionStorage.getItem(MODE_KEY);
+    return value === "live" || value === "preview" ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+export type SiteThemePreference = "light" | "dark" | "system";
+
+export const HIGHLIGHT_BLOCKS_KEY = "backmatter.devbar.highlight";
+export const PREVIEW_WITH_AGENT_KEY = "backmatter.devbar.agent-preview";
+const THEME_KEY = "backmatter-theme";
+
+type StorageLike = { getItem(key: string): string | null; setItem(key: string, value: string): void };
+
+export function readSiteTheme(storage: StorageLike | null): SiteThemePreference {
+  const value = storage?.getItem(THEME_KEY);
+  if (value === "light" || value === "dark" || value === "system") return value;
+  return "system";
+}
+
+export function rememberSiteTheme(storage: StorageLike | null, preference: SiteThemePreference) {
+  storage?.setItem(THEME_KEY, preference);
+}
+
+export function resolveSiteTheme(preference: SiteThemePreference, prefersDark: boolean): "light" | "dark" {
+  if (preference === "system") return prefersDark ? "dark" : "light";
+  return preference;
+}
+
+export function readStoredFlag(storage: StorageLike | null, key: string, fallback: boolean) {
+  const value = storage?.getItem(key);
+  if (value === "1") return true;
+  if (value === "0") return false;
+  return fallback;
+}
+
+export function rememberStoredFlag(storage: StorageLike | null, key: string, on: boolean) {
+  storage?.setItem(key, on ? "1" : "0");
+}
+
+export function rememberMode(mode: DevbarMode) {
+  if (typeof sessionStorage === "undefined") return;
+  try {
+    sessionStorage.setItem(MODE_KEY, mode);
+  } catch {
+    /* private mode */
+  }
+}

package/src/index.css

@@ -1,131 +1,3 @@
-/* packages/studio/src/index.css */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#root {
-  margin: 0;
-  min-height: 100dvh;
-}
-
-html {
-  background: #f7f7f8;
-  color-scheme: light;
-}
-
-html[data-theme="dark"] {
-  background: #18181b;
-  color-scheme: dark;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-  font-family:
-    "Geist Sans",
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    sans-serif;
-}
-
-button,
-input,
-textarea,
-select {
-  /* Don't use `font: inherit` — it overrides StyleX sizes in @layer. */
-  font-family: inherit;
-}
-
-button,
-[role="button"] {
-  cursor: default;
-}
-
-button:disabled,
-button[aria-disabled="true"] {
-  cursor: not-allowed;
-}
-
-[data-drag-handle] {
-  cursor: grab;
-}
-
-[data-drag-handle][data-dragging] {
-  cursor: grabbing;
-}
-
-/* StyleX colors live in @layer priorityN, which the Vite config orders after
-   `reset`. An unlayered color on `a` would beat them, so a primary link
-   button inherits dark text on a dark fill and the label disappears. */
-@layer reset {
-  a {
-    color: inherit;
-  }
-}
-
-a {
-  text-decoration: none;
-  cursor: default;
-}
-
-a[href^="http"],
-a[href^="//"],
-a[target="_blank"] {
-  cursor: pointer;
-}
-
-:focus-visible {
-  outline: 2px solid #18181b;
-  outline-offset: 2px;
-}
-
-html[data-theme="dark"] :focus-visible {
-  outline-color: #fafafa;
-}
-
-/* Controls whose container already indicates focus (e.g. the chat composer). */
-[data-no-ring]:focus-visible {
-  outline: none;
-}
-
-/* Prose UI reads these on the rendered body. Match the app fonts. */
-.prose-ui {
-  --p-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-  --p-font-family-heading: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-  --p-font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
-    monospace;
-  --p-body-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-  --p-h1-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-  --p-h2-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-  --p-h3-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-  --p-h4-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-  --p-h5-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-  --p-h6-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
-}
-
-.prose-ui img {
-  max-width: 100%;
-  height: auto;
-}
-
-.prose-ui > :first-child {
-  margin-top: 0;
-}
-
-.prose-ui > :last-child {
-  margin-bottom: 0;
-}
-
-.prose-ui [data-body-block] :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.prose-ui [data-body-block] :focus,
-.prose-ui [data-body-block] :focus-visible {
-  outline: none;
-}
+/* packages/studio/src/index.css — full studio stylesheet entry (dashboard + SiteStudio). */
+@import "./shell-resets.css";
+@import "./studio-prose-ui.css";

package/src/pages/CliAuthorizePage.tsx

@@ -1,43 +1,76 @@
 // packages/studio/src/pages/CliAuthorizePage.tsx
 import { useState } from "react";
 import { useSearchParams } from "react-router";
+import * as stylex from "@stylexjs/stylex";
 import { approveCliLogin } from "../api";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { Button } from "../ui/Button";
-import { Stack } from "../ui/Page";
 import { Text } from "../ui/Text";
 
-export function CliAuthorizePage() {
+export function CliAuthorizePage({ email }: { email: string }) {
   const [params] = useSearchParams();
   const id = params.get("id") ?? "";
   const [status, setStatus] = useState<"idle" | "done" | "error">("idle");
   const [error, setError] = useState<string | null>(null);
 
   return (
-    <Stack gap="lg">
-      <Text as="h1" size="xl" weight="medium">
-        Allow the CLI
-      </Text>
-      <Text tone="muted">
-        This connects the Backmatter CLI on your computer to your account.
-      </Text>
-      {status === "done" ? <Text>You can return to the terminal.</Text> : null}
-      {error ? <Text tone="danger">{error}</Text> : null}
-      {status === "done" ? null : (
-        <Button
-          disabled={!id}
-          onClick={() => {
-            setError(null);
-            void approveCliLogin(id)
-              .then(() => setStatus("done"))
-              .catch((err: unknown) => {
-                setStatus("error");
-                setError(err instanceof Error ? err.message : "Could not approve");
-              });
-          }}
-        >
-          Allow
-        </Button>
-      )}
-    </Stack>
+    <main {...stylex.props(styles.screen)}>
+      <div {...stylex.props(styles.card)}>
+        <Text as="h1" size="xl" weight="medium">
+          Allow the CLI
+        </Text>
+        <Text tone="muted">
+          This signs the CLI in as {email}. It can act in any workspace you belong to. It does not pick one.
+        </Text>
+        {status === "done" ? <Text>You can return to the terminal.</Text> : null}
+        {error ? <Text tone="danger">{error}</Text> : null}
+        {status === "done" ? null : (
+          <Button
+            disabled={!id}
+            onClick={() => {
+              setError(null);
+              void approveCliLogin(id)
+                .then(() => setStatus("done"))
+                .catch((err: unknown) => {
+                  setStatus("error");
+                  setError(err instanceof Error ? err.message : "Could not approve");
+                });
+            }}
+          >
+            Allow
+          </Button>
+        )}
+      </div>
+    </main>
   );
 }
+
+const styles = stylex.create({
+  screen: {
+    display: "flex",
+    boxSizing: "border-box",
+    width: "100%",
+    minHeight: "100dvh",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: space.xxl,
+    backgroundColor: colors.bgApp,
+    color: colors.text,
+  },
+  card: {
+    display: "flex",
+    width: "100%",
+    maxWidth: "320px",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: space.lg,
+    boxSizing: "border-box",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    padding: space.xxl,
+    fontSize: type.sm,
+  },
+});

package/src/pages/MediaGalleryPage.tsx

@@ -9,7 +9,8 @@ import {
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useOutletContext, useSearchParams } from "react-router";
 import * as stylex from "@stylexjs/stylex";
-import { deleteMedia, fetchMedia, uploadMedia } from "../api";
+import { deleteMedia, describeMedia, fetchMedia, uploadMedia } from "../api";
+import { Input } from "../ui/Input";
 import { colors, radius, space, type, z } from "../styles/tokens.stylex";
 import { Button } from "../ui/Button";
 import { ConfirmDialog } from "../ui/ConfirmDialog";
@@ -19,6 +20,7 @@ import { canWriteContent } from "../workspace/permissions";
 import type { WorkspaceOutletContext } from "../workspace/types";
 import {
   beginUploads,
+  describeMedia as rememberDescription,
   emptyMediaGrid,
   failUpload,
   finishUpload,
@@ -56,28 +58,56 @@ export function MediaGalleryPage({
   const [deleteError, setDeleteError] = useState<string | null>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [settled, setSettled] = useState(false);
+  const urlQuery = searchParams.get("q") ?? "";
+  const [draft, setDraft] = useState(urlQuery);
+  const [query, setQuery] = useState(urlQuery);
   const dragDepth = useRef(0);
   const scroller = useRef<HTMLDivElement>(null);
   const grid = useRef<HTMLDivElement>(null);
   const [columns, setColumns] = useState(1);
   const loadingPage = useRef(false);
+  const request = useRef(0);
+
+  useEffect(() => {
+    const handle = window.setTimeout(() => setQuery(draft), 200);
+    return () => window.clearTimeout(handle);
+  }, [draft]);
+
+  useEffect(() => {
+    setSearchParams(
+      (current) => {
+        const next = new URLSearchParams(current);
+        if (query) next.set("q", query);
+        else next.delete("q");
+        if (next.get("q") === current.get("q")) return current;
+        return next;
+      },
+      { replace: true },
+    );
+  }, [query, setSearchParams]);
 
   const load = useCallback(
     async (cursor?: string) => {
-      if (loadingPage.current) return;
+      if (cursor && loadingPage.current) return;
+      const ticket = ++request.current;
       loadingPage.current = true;
+      if (!cursor) setState((current) => ({ ...current, nextCursor: null }));
       try {
-        const page = await fetchMedia(workspace.id, { cursor });
+        const page = await fetchMedia(workspace.id, { query: query || undefined, cursor });
+        if (ticket !== request.current) return;
         setState((current) => receivePage(current, page, cursor ? "append" : "replace"));
         setError(null);
       } catch (err) {
+        if (ticket !== request.current) return;
         setError(err instanceof Error ? err.message : "Could not load media");
       } finally {
-        loadingPage.current = false;
-        if (!cursor) setSettled(true);
+        if (ticket === request.current) {
+          loadingPage.current = false;
+          if (!cursor) setSettled(true);
+        }
       }
     },
-    [workspace.id],
+    [query, workspace.id],
   );
 
   useEffect(() => {
@@ -349,6 +379,14 @@ export function MediaGalleryPage({
   }, [columns, selectedId, sharedId]);
 
   const open = lightbox >= 0 ? browsable[lightbox] : undefined;
+  const saveText = useCallback(
+    async (text: { alt?: string; caption?: string }) => {
+      if (!open) return;
+      const result = await describeMedia(workspace.id, open.id, text);
+      setState((current) => rememberDescription(current, result.media));
+    },
+    [open, workspace.id],
+  );
   const showEmpty =
     settled && state.pending.length === 0 && state.loaded.length === 0 && state.total === 0;
 
@@ -358,9 +396,19 @@ export function MediaGalleryPage({
         <Text as="h1" size="xl" weight="medium">
           Media
         </Text>
-        <Button variant="secondary" onClick={chooseFiles}>
-          Upload
-        </Button>
+        <div {...stylex.props(styles.toolbarActions)}>
+          <div {...stylex.props(styles.search)}>
+            <Input
+              aria-label="Search media"
+              placeholder="Search"
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+            />
+          </div>
+          <Button variant="secondary" onClick={chooseFiles}>
+            Upload
+          </Button>
+        </div>
       </div>
       {error ? <Text tone="danger">{error}</Text> : null}
       {rejected.length > 0 ? <Text tone="danger">{rejected.join(" · ")}</Text> : null}
@@ -371,7 +419,11 @@ export function MediaGalleryPage({
           maybeLoadMore();
         }}
       >
-        {showEmpty ? (
+        {showEmpty && query ? (
+          <div {...stylex.props(styles.emptyState)}>
+            <Text tone="muted">No images match this search.</Text>
+          </div>
+        ) : showEmpty ? (
           <div
             {...stylex.props(styles.emptyState)}
             onDragOver={(event) => event.preventDefault()}
@@ -461,6 +513,8 @@ export function MediaGalleryPage({
           onPrev={prevLightbox}
           onNext={nextLightbox}
           onDelete={canDelete ? () => requestDelete(open) : undefined}
+          canEdit={canDelete}
+          onDescribe={saveText}
         />
       ) : null}
       <ConfirmDialog
@@ -505,7 +559,7 @@ function MediaHit({
       {...stylex.props(styles.hit, !menu && styles.placed, selected && styles.selected)}
       onClick={onOpen}
     >
-      <img src={item.thumbUrl} alt={item.filename} {...stylex.props(styles.image)} />
+      <img src={item.thumbUrl} alt={item.alt?.trim() || item.filename} {...stylex.props(styles.image)} />
     </button>
   );
   if (!menu) return image;
@@ -589,6 +643,15 @@ const styles = stylex.create({
     gap: space.lg,
     padding: space.xl,
   },
+  toolbarActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+    minWidth: 0,
+  },
+  search: {
+    width: "220px",
+  },
   scroller: {
     flex: 1,
     minHeight: 0,