@backmatter/studio 0.0.6 → 0.0.8

package/src/pages/MediaLightbox.tsx

@@ -0,0 +1,467 @@
+// packages/studio/src/pages/MediaLightbox.tsx
+import { Menu } from "@base-ui/react/menu";
+import {
+  IconSquareBehindSquare1,
+  IconTrashCanSimple,
+} from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
+import { useEffect, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { Text } from "../ui/Text";
+import { cx, popup, popupClassName } from "../ui/popup";
+import type { CatalogMedia } from "./media-grid";
+
+const stack = "@media (max-width: 800px)";
+const hover = "@media (hover: hover)";
+
+export function MediaLightbox({
+  item,
+  index,
+  count,
+  onClose,
+  onPrev,
+  onNext,
+  onDelete,
+}: {
+  item: CatalogMedia;
+  index: number;
+  count: number;
+  onClose: () => void;
+  onPrev: () => void;
+  onNext: () => void;
+  onDelete?: () => void;
+}) {
+  const full = item.variants?.["1200"] ?? item.url;
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    setCopied(false);
+  }, [item.id]);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (document.querySelector('[role="menu"], [role="alertdialog"]')) return;
+      if (event.key === "Escape" || event.key === " ") {
+        event.preventDefault();
+        onClose();
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        onPrev();
+      }
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        onNext();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [onClose, onPrev, onNext]);
+
+  return (
+    <div
+      {...stylex.props(styles.shell)}
+      role="dialog"
+      aria-modal="true"
+      aria-label={item.filename}
+    >
+      <div {...stylex.props(styles.stage)} onClick={onClose}>
+        <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.sidebarTools)}>
+          <Menu.Root>
+            <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" />
+                <circle cx="11" cy="7" r="1.15" fill="currentColor" />
+              </svg>
+            </Menu.Trigger>
+            <Menu.Portal>
+              <Menu.Positioner side="bottom" align="end" sideOffset={6} className={cx(popup.positioner)}>
+                <Menu.Popup
+                  aria-label="Image actions"
+                  className={(state) => popupClassName(state, styles.menu)}
+                >
+                  <Menu.Item
+                    label="Copy path"
+                    onClick={() => {
+                      void navigator.clipboard.writeText(item.url);
+                    }}
+                    className={(state) =>
+                      cx(popup.item, styles.menuItem, state.highlighted && popup.itemHighlighted)
+                    }
+                  >
+                    <IconSquareBehindSquare1 size={14} ariaHidden style={{ flexShrink: 0 }} />
+                    Copy path
+                  </Menu.Item>
+                  {onDelete ? (
+                    <Menu.Item
+                      label="Delete"
+                      onClick={onDelete}
+                      className={(state) =>
+                        cx(popup.item, styles.menuItem, styles.menuDanger, state.highlighted && popup.itemHighlighted)
+                      }
+                    >
+                      <IconTrashCanSimple size={14} ariaHidden style={{ flexShrink: 0 }} />
+                      Delete
+                    </Menu.Item>
+                  ) : null}
+                </Menu.Popup>
+              </Menu.Positioner>
+            </Menu.Portal>
+          </Menu.Root>
+          <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"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <div {...stylex.props(styles.sidebarBody)}>
+          <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
+              </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>
+  );
+}
+
+function StageImage({ thumb, full, alt }: { thumb: string; full: string; alt: string }) {
+  const [ready, setReady] = useState(false);
+  return (
+    <>
+      <img src={thumb} alt="" {...stylex.props(styles.photo, styles.thumb)} />
+      <img
+        src={full}
+        alt={alt}
+        {...stylex.props(styles.photo, ready ? styles.shown : styles.hidden)}
+        onLoad={() => setReady(true)}
+      />
+    </>
+  );
+}
+
+function Fact({ label, value }: { label: string; value: string }) {
+  return (
+    <div {...stylex.props(styles.fact)}>
+      <dt {...stylex.props(styles.factLabel)}>{label}</dt>
+      <dd {...stylex.props(styles.factValue)}>{value}</dd>
+    </div>
+  );
+}
+
+function dimensions(item: CatalogMedia): string {
+  if (item.width === null || item.height === null || !item.width || !item.height) return "—";
+  return `${item.width} × ${item.height}`;
+}
+
+function kindLabel(contentType: string | undefined): string {
+  if (!contentType) return "—";
+  const subtype = contentType.split("/")[1] ?? contentType;
+  return subtype.toUpperCase();
+}
+
+function addedLabel(createdAt: string | undefined): string {
+  if (!createdAt) return "—";
+  const date = new Date(createdAt);
+  if (Number.isNaN(date.getTime())) return "—";
+  return date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+}
+
+function formatBytes(value: number): string {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+  if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(value / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
+const styles = stylex.create({
+  shell: {
+    position: "fixed",
+    inset: 0,
+    zIndex: z.palette,
+    display: "flex",
+    flexDirection: "row",
+    backgroundColor: "#0c0c0e",
+    [stack]: {
+      flexDirection: "column",
+    },
+  },
+  stage: {
+    position: "relative",
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    [stack]: {
+      minHeight: "55vh",
+    },
+  },
+  frame: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+  },
+  photo: {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "contain",
+    padding: space.xxl,
+    boxSizing: "border-box",
+  },
+  thumb: {
+    opacity: 1,
+  },
+  shown: {
+    opacity: 1,
+  },
+  hidden: {
+    opacity: 0,
+  },
+  nav: {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1,
+    width: "44px",
+    height: "44px",
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "rgba(255, 255, 255, 0.12)",
+    color: "#fafafa",
+    fontSize: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    ":disabled": {
+      opacity: 0.35,
+      cursor: "default",
+    },
+  },
+  sidebarTools: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: space.xs,
+  },
+  sidebarTool: {
+    width: "32px",
+    height: "32px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+        color: colors.text,
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+  menu: {
+    minWidth: "8rem",
+  },
+  menuItem: {
+    cursor: "pointer",
+  },
+  menuDanger: {
+    color: colors.danger,
+  },
+  navPrev: {
+    left: space.lg,
+  },
+  navNext: {
+    right: space.lg,
+  },
+  sidebar: {
+    width: "320px",
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: space.xl,
+    padding: space.xl,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    borderLeftWidth: 1,
+    borderLeftStyle: "solid",
+    borderLeftColor: colors.border,
+    overflow: "auto",
+    [stack]: {
+      width: "100%",
+      borderLeftWidth: 0,
+      borderTopWidth: 1,
+      borderTopStyle: "solid",
+      borderTopColor: colors.border,
+    },
+  },
+  sidebarBody: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xl,
+    minWidth: 0,
+  },
+  filename: {
+    minWidth: 0,
+    overflowWrap: "anywhere",
+  },
+  facts: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.lg,
+    margin: 0,
+  },
+  fact: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+  },
+  factLabel: {
+    margin: 0,
+    color: colors.textMuted,
+    fontSize: type.xs,
+  },
+  factValue: {
+    margin: 0,
+    fontSize: type.md,
+    fontVariantNumeric: "tabular-nums",
+  },
+  urlBlock: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: space.sm,
+  },
+  urlHead: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.md,
+  },
+  copy: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: space.sm,
+    minHeight: "32px",
+    paddingInline: space.lg,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanel,
+    color: colors.text,
+    fontFamily: type.sans,
+    fontSize: type.sm,
+    fontWeight: 500,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  url: {
+    margin: 0,
+    width: "100%",
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    lineHeight: 1.4,
+    wordBreak: "break-all",
+    color: colors.textMuted,
+  },
+});

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",