@backmatter/studio 0.0.5 → 0.0.7

package/src/pages/MediaLightbox.tsx

@@ -0,0 +1,460 @@
+// 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}>
+        <div {...stylex.props(styles.stageTools)} onClick={(event) => event.stopPropagation()}>
+          <Menu.Root>
+            <Menu.Trigger aria-label="Image actions" className={cx(styles.stageTool)}>
+              <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.stageTool)}
+            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>
+        <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
+            </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>
+      </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",
+    },
+  },
+  stageTools: {
+    position: "absolute",
+    top: space.xl,
+    right: space.xl,
+    zIndex: 2,
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+  },
+  stageTool: {
+    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",
+    cursor: "pointer",
+    [hover]: {
+      backgroundColor: "rgba(255, 255, 255, 0.16)",
+    },
+  },
+  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: "flex-end",
+    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,
+    },
+  },
+  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/SettingsLayout.tsx

@@ -2,7 +2,7 @@
 import { Navigate, Outlet, useLocation, useOutletContext } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import { NavItem } from "../chrome/NavItem";
-import { GearIcon, GithubIcon, PlugIcon, SchemaIcon, UsersIcon } from "../chrome/icons";
+import { GearIcon, GithubIcon, PlugIcon, SchemaIcon, UsageIcon, UsersIcon } from "../chrome/icons";
 import { colors, space, type } from "../styles/tokens.stylex";
 import type { WorkspaceOutletContext } from "../workspace/types";
 import { isGithubSettingsPath, settingsPath } from "../workspace-path";
@@ -33,6 +33,12 @@ export function SettingsLayout() {
                   General
                 </NavItem>
               </li>
+              <li>
+                <NavItem to={settingsPath(slug, "usage")}>
+                  <UsageIcon />
+                  Usage
+                </NavItem>
+              </li>
               {develop ? (
                 <li>
                   <NavItem

package/src/pages/SettingsUsagePage.tsx

@@ -0,0 +1,187 @@
+// packages/studio/src/pages/SettingsUsagePage.tsx
+import { useEffect, useState } from "react";
+import { useOutletContext } from "react-router";
+import { fetchWorkspaceUsage, type WorkspaceUsage } from "../api";
+import { PageHeader, Panel, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+import * as stylex from "@stylexjs/stylex";
+import { colors, space, type } from "../styles/tokens.stylex";
+import type { WorkspaceOutletContext } from "../workspace/types";
+
+const SURFACES: { key: keyof WorkspaceUsage["dataRequests"]; label: string }[] = [
+  { key: "public", label: "Public" },
+  { key: "studio", label: "Studio" },
+  { key: "replica", label: "Replica" },
+  { key: "preview", label: "Preview" },
+  { key: "ai", label: "Assistant" },
+];
+
+const WORK: { key: keyof WorkspaceUsage["work"]; label: string }[] = [
+  { key: "commits", label: "Commits" },
+  { key: "commitFiles", label: "Files committed" },
+  { key: "imports", label: "Imports" },
+  { key: "importFiles", label: "Files imported" },
+  { key: "saves", label: "Saves" },
+  { key: "mediaTransforms", label: "Image transforms" },
+];
+
+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`;
+}
+
+function formatCount(value: number): string {
+  return new Intl.NumberFormat("en-US").format(value);
+}
+
+function monthLabel(period: string): string {
+  const [year, month] = period.split("-").map(Number);
+  if (!year || !month) return period;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(new Date(Date.UTC(year, month - 1, 1)));
+}
+
+export function SettingsUsagePage() {
+  const { workspace } = useOutletContext<WorkspaceOutletContext>();
+  const [usage, setUsage] = useState<WorkspaceUsage | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setUsage(null);
+    setError(null);
+    fetchWorkspaceUsage(workspace.id)
+      .then((body) => {
+        if (!cancelled) setUsage(body);
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : "Could not load usage");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspace.id]);
+
+  const total = usage
+    ? SURFACES.reduce((sum, surface) => sum + usage.dataRequests[surface.key], 0)
+    : 0;
+
+  return (
+    <Stack gap="lg">
+      <PageHeader
+        title="Usage"
+        description={
+          usage
+            ? `${monthLabel(usage.period)}, UTC. Counts update within about a minute.`
+            : "Content reads and AI tokens for this workspace."
+        }
+      />
+      {error ? <Text tone="danger">{error}</Text> : null}
+      {!usage && !error ? <Text tone="muted">Loading…</Text> : null}
+      {usage ? (
+        <>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              Data requests
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Total</dt>
+                <dd {...stylex.props(styles.value)}>{formatCount(total)}</dd>
+              </div>
+              {SURFACES.map((surface) => (
+                <div key={surface.key} {...stylex.props(styles.row)}>
+                  <dt {...stylex.props(styles.label)}>{surface.label}</dt>
+                  <dd {...stylex.props(styles.value)}>
+                    {formatCount(usage.dataRequests[surface.key])}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </Panel>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              Work
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              {WORK.map((item) => (
+                <div key={item.key} {...stylex.props(styles.row)}>
+                  <dt {...stylex.props(styles.label)}>{item.label}</dt>
+                  <dd {...stylex.props(styles.value)}>{formatCount(usage.work[item.key])}</dd>
+                </div>
+              ))}
+            </dl>
+          </Panel>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              Media
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Stored</dt>
+                <dd {...stylex.props(styles.value)}>{formatBytes(usage.mediaBytes)}</dd>
+              </div>
+            </dl>
+          </Panel>
+          <Panel>
+            <Text as="h2" size="lg" weight="medium">
+              AI
+            </Text>
+            <dl {...stylex.props(styles.list)}>
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Input tokens</dt>
+                <dd {...stylex.props(styles.value)}>{formatCount(usage.ai.inputTokens)}</dd>
+              </div>
+              <div {...stylex.props(styles.row)}>
+                <dt {...stylex.props(styles.label)}>Output tokens</dt>
+                <dd {...stylex.props(styles.value)}>{formatCount(usage.ai.outputTokens)}</dd>
+              </div>
+            </dl>
+          </Panel>
+          <Panel>
+            <div {...stylex.props(styles.row)}>
+              <Text as="h2" size="lg" weight="medium">
+                Members
+              </Text>
+              <Text size="lg" weight="medium">
+                {formatCount(usage.members)}
+              </Text>
+            </div>
+          </Panel>
+        </>
+      ) : null}
+    </Stack>
+  );
+}
+
+const styles = stylex.create({
+  list: {
+    margin: 0,
+    marginTop: space.lg,
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  row: {
+    display: "flex",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    gap: space.lg,
+  },
+  label: {
+    margin: 0,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  value: {
+    margin: 0,
+    fontSize: type.sm,
+    fontVariantNumeric: "tabular-nums",
+    color: colors.text,
+  },
+});