@backmatter/studio 0.0.7 → 0.0.9

package/src/pages/MediaLightbox.tsx

@@ -6,7 +6,10 @@ import {
 } from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
 import { useEffect, useState } from "react";
 import * as stylex from "@stylexjs/stylex";
+import { MAX_MEDIA_TEXT } from "@backmatter/core";
 import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { Field } from "../ui/Field";
+import { Input } from "../ui/Input";
 import { Text } from "../ui/Text";
 import { cx, popup, popupClassName } from "../ui/popup";
 import type { CatalogMedia } from "./media-grid";
@@ -22,6 +25,8 @@ export function MediaLightbox({
   onPrev,
   onNext,
   onDelete,
+  canEdit = false,
+  onDescribe,
 }: {
   item: CatalogMedia;
   index: number;
@@ -30,6 +35,8 @@ export function MediaLightbox({
   onPrev: () => void;
   onNext: () => void;
   onDelete?: () => void;
+  canEdit?: boolean;
+  onDescribe?: (text: { alt?: string; caption?: string }) => Promise<void>;
 }) {
   const full = item.variants?.["1200"] ?? item.url;
   const [copied, setCopied] = useState(false);
@@ -41,6 +48,10 @@ export function MediaLightbox({
   useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if (document.querySelector('[role="menu"], [role="alertdialog"]')) return;
+      const typing =
+        event.target instanceof HTMLElement &&
+        event.target.closest("input, textarea, select");
+      if (typing && event.key !== "Escape") return;
       if (event.key === "Escape" || event.key === " ") {
         event.preventDefault();
         onClose();
@@ -66,9 +77,43 @@ export function MediaLightbox({
       aria-label={item.filename}
     >
       <div {...stylex.props(styles.stage)} onClick={onClose}>
-        <div {...stylex.props(styles.stageTools)} onClick={(event) => event.stopPropagation()}>
+        <button
+          type="button"
+          aria-label="Previous image"
+          disabled={index <= 0}
+          {...stylex.props(styles.nav, styles.navPrev)}
+          onClick={(event) => {
+            event.stopPropagation();
+            onPrev();
+          }}
+        >
+          ‹
+        </button>
+        <div {...stylex.props(styles.frame)} onClick={(event) => event.stopPropagation()}>
+          <StageImage
+            key={item.id}
+            thumb={item.thumbUrl}
+            full={full}
+            alt={item.alt?.trim() || item.filename}
+          />
+        </div>
+        <button
+          type="button"
+          aria-label="Next image"
+          disabled={index >= count - 1}
+          {...stylex.props(styles.nav, styles.navNext)}
+          onClick={(event) => {
+            event.stopPropagation();
+            onNext();
+          }}
+        >
+          ›
+        </button>
+      </div>
+      <aside {...stylex.props(styles.sidebar)}>
+        <div {...stylex.props(styles.sidebarTools)}>
           <Menu.Root>
-            <Menu.Trigger aria-label="Image actions" className={cx(styles.stageTool)}>
+            <Menu.Trigger aria-label="Image actions" className={cx(styles.sidebarTool)}>
               <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
                 <circle cx="3" cy="7" r="1.15" fill="currentColor" />
                 <circle cx="7" cy="7" r="1.15" fill="currentColor" />
@@ -109,12 +154,7 @@ export function MediaLightbox({
               </Menu.Positioner>
             </Menu.Portal>
           </Menu.Root>
-          <button
-            type="button"
-            aria-label="Close"
-            {...stylex.props(styles.stageTool)}
-            onClick={onClose}
-          >
+          <button type="button" aria-label="Close" {...stylex.props(styles.sidebarTool)} onClick={onClose}>
             <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
               <path
                 d="M3.5 3.5l7 7M10.5 3.5l-7 7"
@@ -126,81 +166,60 @@ export function MediaLightbox({
             </svg>
           </button>
         </div>
-        <button
-          type="button"
-          aria-label="Previous image"
-          disabled={index <= 0}
-          {...stylex.props(styles.nav, styles.navPrev)}
-          onClick={(event) => {
-            event.stopPropagation();
-            onPrev();
-          }}
-        >
-          ‹
-        </button>
-        <div {...stylex.props(styles.frame)} onClick={(event) => event.stopPropagation()}>
-          <StageImage key={item.id} thumb={item.thumbUrl} full={full} alt={item.filename} />
-        </div>
-        <button
-          type="button"
-          aria-label="Next image"
-          disabled={index >= count - 1}
-          {...stylex.props(styles.nav, styles.navNext)}
-          onClick={(event) => {
-            event.stopPropagation();
-            onNext();
-          }}
-        >
-          ›
-        </button>
-      </div>
-      <aside {...stylex.props(styles.sidebar)}>
-        <div {...stylex.props(styles.filename)}>
-          <Text as="h2" size="lg" weight="medium">
-            {item.filename}
-          </Text>
-        </div>
-        <dl {...stylex.props(styles.facts)}>
-          <Fact label="Dimensions" value={dimensions(item)} />
-          <Fact label="Size" value={item.byteSize === undefined ? "—" : formatBytes(item.byteSize)} />
-          <Fact label="Type" value={kindLabel(item.contentType)} />
-          <Fact label="Added" value={addedLabel(item.createdAt)} />
-        </dl>
-        <div {...stylex.props(styles.urlBlock)}>
-          <div {...stylex.props(styles.urlHead)}>
-            <Text size="xs" tone="muted">
-              Original URL
+        <div {...stylex.props(styles.sidebarBody)}>
+          <div {...stylex.props(styles.filename)}>
+            <Text as="h2" size="lg" weight="medium">
+              {item.filename}
             </Text>
-            <button
-              type="button"
-              aria-label={copied ? "Copied" : "Copy URL"}
-              {...stylex.props(styles.copy)}
-              onClick={() => {
-                void navigator.clipboard.writeText(item.url).then(() => setCopied(true));
-              }}
-            >
-              <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
-                <rect
-                  x="4.75"
-                  y="4.75"
-                  width="7"
-                  height="7"
-                  rx="1.25"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                />
-                <path
-                  d="M9.25 4.75V3.25A1.25 1.25 0 0 0 8 2H3.25A1.25 1.25 0 0 0 2 3.25V8A1.25 1.25 0 0 0 3.25 9.25H4.75"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                />
-              </svg>
-              {copied ? "Copied" : "Copy"}
-            </button>
           </div>
-          <p {...stylex.props(styles.url)}>{item.url}</p>
+          <dl {...stylex.props(styles.facts)}>
+            <Fact label="Dimensions" value={dimensions(item)} />
+            <Fact label="Size" value={item.byteSize === undefined ? "—" : formatBytes(item.byteSize)} />
+            <Fact label="Type" value={kindLabel(item.contentType)} />
+            <Fact label="Added" value={addedLabel(item.createdAt)} />
+          </dl>
+          <MediaText
+            key={item.id}
+            item={item}
+            canEdit={canEdit}
+            onDescribe={onDescribe}
+          />
+          <div {...stylex.props(styles.urlBlock)}>
+            <div {...stylex.props(styles.urlHead)}>
+              <Text size="xs" tone="muted">
+                Original URL
+              </Text>
+              <button
+                type="button"
+                aria-label={copied ? "Copied" : "Copy URL"}
+                {...stylex.props(styles.copy)}
+                onClick={() => {
+                  void navigator.clipboard.writeText(item.url).then(() => setCopied(true));
+                }}
+              >
+                <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
+                  <rect
+                    x="4.75"
+                    y="4.75"
+                    width="7"
+                    height="7"
+                    rx="1.25"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                  />
+                  <path
+                    d="M9.25 4.75V3.25A1.25 1.25 0 0 0 8 2H3.25A1.25 1.25 0 0 0 2 3.25V8A1.25 1.25 0 0 0 3.25 9.25H4.75"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                  />
+                </svg>
+                {copied ? "Copied" : "Copy"}
+              </button>
+            </div>
+            <p {...stylex.props(styles.url)}>{item.url}</p>
+          </div>
         </div>
       </aside>
     </div>
@@ -222,6 +241,71 @@ function StageImage({ thumb, full, alt }: { thumb: string; full: string; alt: st
   );
 }
 
+function MediaText({
+  item,
+  canEdit,
+  onDescribe,
+}: {
+  item: CatalogMedia;
+  canEdit: boolean;
+  onDescribe?: (text: { alt?: string; caption?: string }) => Promise<void>;
+}) {
+  const [alt, setAlt] = useState(item.alt ?? "");
+  const [caption, setCaption] = useState(item.caption ?? "");
+  const [error, setError] = useState<string | null>(null);
+
+  async function commit(field: "alt" | "caption", draft: string) {
+    const next = draft.trim();
+    const current = (item[field] ?? "").trim();
+    if (next === current || !onDescribe) return;
+    setError(null);
+    try {
+      await onDescribe({ [field]: next });
+    } catch (err) {
+      const code = err instanceof Error ? err.message : "";
+      setError(
+        code === "too_long" ? `Use ${MAX_MEDIA_TEXT} characters or fewer.` : code || "Could not save",
+      );
+    }
+  }
+
+  if (!canEdit) {
+    if (!item.alt?.trim() && !item.caption?.trim()) return null;
+    return (
+      <dl {...stylex.props(styles.facts)}>
+        {item.alt?.trim() ? <Fact label="Alt text" value={item.alt} /> : null}
+        {item.caption?.trim() ? <Fact label="Caption" value={item.caption} /> : null}
+      </dl>
+    );
+  }
+
+  return (
+    <div {...stylex.props(styles.textFields)}>
+      <Field label="Alt text">
+        <Input
+          value={alt}
+          maxLength={MAX_MEDIA_TEXT}
+          onChange={(event) => setAlt(event.target.value)}
+          onBlur={() => {
+            void commit("alt", alt);
+          }}
+        />
+      </Field>
+      <Field label="Caption">
+        <Input
+          value={caption}
+          maxLength={MAX_MEDIA_TEXT}
+          onChange={(event) => setCaption(event.target.value)}
+          onBlur={() => {
+            void commit("caption", caption);
+          }}
+        />
+      </Field>
+      {error ? <Text tone="danger">{error}</Text> : null}
+    </div>
+  );
+}
+
 function Fact({ label, value }: { label: string; value: string }) {
   return (
     <div {...stylex.props(styles.fact)}>
@@ -324,31 +408,35 @@ const styles = stylex.create({
       cursor: "default",
     },
   },
-  stageTools: {
-    position: "absolute",
-    top: space.xl,
-    right: space.xl,
-    zIndex: 2,
+  sidebarTools: {
     display: "flex",
     alignItems: "center",
-    gap: space.sm,
+    justifyContent: "flex-end",
+    gap: space.xs,
   },
-  stageTool: {
+  sidebarTool: {
     width: "32px",
     height: "32px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     padding: 0,
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: "rgba(255, 255, 255, 0.16)",
-    borderRadius: "999px",
-    backgroundColor: "rgba(0, 0, 0, 0.45)",
-    color: "#fafafa",
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
     cursor: "pointer",
     [hover]: {
-      backgroundColor: "rgba(255, 255, 255, 0.16)",
+      ":hover": {
+        backgroundColor: colors.bgHover,
+        color: colors.text,
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
     },
   },
   menu: {
@@ -371,7 +459,7 @@ const styles = stylex.create({
     flexShrink: 0,
     display: "flex",
     flexDirection: "column",
-    justifyContent: "flex-end",
+    justifyContent: "space-between",
     gap: space.xl,
     padding: space.xl,
     backgroundColor: colors.bgSurface,
@@ -388,6 +476,12 @@ const styles = stylex.create({
       borderTopColor: colors.border,
     },
   },
+  sidebarBody: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xl,
+    minWidth: 0,
+  },
   filename: {
     minWidth: 0,
     overflowWrap: "anywhere",
@@ -398,6 +492,11 @@ const styles = stylex.create({
     gap: space.lg,
     margin: 0,
   },
+  textFields: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.lg,
+  },
   fact: {
     display: "flex",
     flexDirection: "column",

package/src/pages/SelectRepositoriesLink.tsx

@@ -1,10 +1,9 @@
 // packages/studio/src/pages/SelectRepositoriesLink.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { fetchGithubRepositoryAccess } from "../api";
 import { ButtonLink } from "../ui/Button";
 
-/** Opens the GitHub page where this installation's repository access is chosen. */
-export function SelectRepositoriesLink({ workspaceId }: { workspaceId: string }) {
+function useRepositoryAccessUrl(workspaceId: string) {
   const [url, setUrl] = useState<string | null>(null);
 
   useEffect(() => {
@@ -21,10 +20,35 @@ export function SelectRepositoriesLink({ workspaceId }: { workspaceId: string })
     };
   }, [workspaceId]);
 
+  return url;
+}
+
+/** Opens the GitHub page where this installation's repository access is chosen. */
+export function SelectRepositoriesLink({
+  workspaceId,
+  label = "Select repositories on GitHub",
+}: {
+  workspaceId: string;
+  label?: string;
+}) {
+  const url = useRepositoryAccessUrl(workspaceId);
   if (!url) return null;
   return (
     <ButtonLink href={url} variant="secondary">
-      Select repositories on GitHub
+      {label}
     </ButtonLink>
   );
 }
+
+/** Renders nothing until the GitHub App's repository-access URL is known. */
+export function GithubRepositoryAccess({
+  workspaceId,
+  children,
+}: {
+  workspaceId: string;
+  children: (url: string) => ReactNode;
+}) {
+  const url = useRepositoryAccessUrl(workspaceId);
+  if (!url) return null;
+  return children(url);
+}

package/src/pages/SettingsGeneralPage.tsx

@@ -11,7 +11,6 @@ import { hostEnvSnippet } from "./host-env";
 import { isStudioDev, publicApiUrl } from "../studio-config";
 import { revalidateWebhookUrl } from "./preview-url";
 import { Button } from "../ui/Button";
-import { Field } from "../ui/Field";
 import { Input } from "../ui/Input";
 import { PageHeader, Panel, Stack } from "../ui/Page";
 import { Text } from "../ui/Text";
@@ -147,40 +146,33 @@ export function SettingsGeneralPage() {
           </Text>
           <form onSubmit={(e) => void onSaveSiteUrl(e)}>
             <div {...stylex.props(styles.block)}>
-              <Field
-                label="Site URL"
-                hint={
-                  webhookUrl
-                    ? `Preview origin. Pushes POST ${webhookUrl}`
-                    : "Preview origin. A content push POSTs the revalidate route on this origin."
-                }
-              >
-                <Input
-                  type="url"
-                  value={siteUrl}
-                  readOnly={!canEdit}
-                  placeholder="https://www.example.com"
-                  autoComplete="off"
-                  spellCheck={false}
-                  data-lpignore="true"
-                  data-1p-ignore
-                  onChange={(e) => setSiteUrl(e.target.value)}
-                />
-              </Field>
+              <Input
+                type="url"
+                aria-label="Site URL"
+                value={siteUrl}
+                readOnly={!canEdit}
+                placeholder="https://www.example.com"
+                autoComplete="off"
+                spellCheck={false}
+                data-lpignore="true"
+                data-1p-ignore
+                onChange={(e) => setSiteUrl(e.target.value)}
+              />
             </div>
+            <p {...stylex.props(styles.caption)}>
+              {webhookUrl
+                ? `Preview origin. Pushes POST ${webhookUrl}`
+                : "Preview origin. A content push POSTs the revalidate route on this origin."}
+            </p>
+            <StudioVersions versions={workspace.studioVersions} />
             {canEdit ? (
-              <div {...stylex.props(styles.block)}>
-                <Button
-                  type="submit"
-                  variant="secondary"
-                  disabled={busy !== null}
-                >
+              <div {...stylex.props(styles.actions)}>
+                <Button type="submit" variant="secondary" disabled={busy !== null}>
                   {busy === "site-url" ? "Saving…" : "Save"}
                 </Button>
               </div>
             ) : null}
           </form>
-          <StudioVersions versions={workspace.studioVersions} />
         </Panel>
         <Panel>
           <Text as="h2" size="lg" weight="medium">
@@ -370,6 +362,11 @@ const styles = stylex.create({
   block: {
     marginTop: space.md,
   },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    marginTop: space.lg,
+  },
   idRow: {
     display: "flex",
     alignItems: "center",