@backmatter/studio 0.0.1

package/src/pages/SelectionBar.tsx

@@ -0,0 +1,277 @@
+// packages/studio/src/pages/SelectionBar.tsx
+import { useEffect, useLayoutEffect, useRef, useState, type FormEvent } from "react";
+import { createPortal } from "react-dom";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import type { BlockFormat } from "./selection-format";
+
+const hover = "@media (hover: hover)";
+
+export type FormatSelection = {
+  top: number;
+  left: number;
+  width: number;
+  bottom: number;
+  format: BlockFormat;
+  bold: boolean;
+  italic: boolean;
+  href: string | null;
+};
+
+const BLOCKS: { format: BlockFormat; label: string }[] = [
+  { format: "paragraph", label: "Paragraph" },
+  { format: "heading", label: "Heading" },
+  { format: "list", label: "List" },
+  { format: "quote", label: "Quote" },
+];
+
+export function SelectionBar({
+  selection,
+  onFormat,
+  onInline,
+  onLink,
+  onLinking,
+}: {
+  selection: FormatSelection;
+  onFormat: (format: BlockFormat) => void;
+  onInline: (tag: "strong" | "em") => void;
+  onLink: (href: string, range: Range) => void;
+  onLinking: (linking: boolean) => void;
+}) {
+  const barRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const savedRange = useRef<Range | null>(null);
+  const onLinkingRef = useRef(onLinking);
+  onLinkingRef.current = onLinking;
+  const [linkOpen, setLinkOpen] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [pos, setPos] = useState({ top: selection.top, left: selection.left });
+
+  useLayoutEffect(() => {
+    const bar = barRef.current;
+    if (!bar) return;
+    const width = bar.offsetWidth;
+    const height = bar.offsetHeight;
+    let left = selection.left + selection.width / 2 - width / 2;
+    left = Math.max(8, Math.min(left, window.innerWidth - width - 8));
+    let top = selection.top - height - 8;
+    if (top < 8) top = selection.bottom + 8;
+    setPos({ top, left });
+  }, [selection.top, selection.left, selection.width, selection.bottom, linkOpen]);
+
+  useEffect(() => {
+    if (!linkOpen) return;
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, [linkOpen]);
+
+  useEffect(() => {
+    if (!linkOpen) return;
+    function onPointerDown(event: PointerEvent) {
+      const target = event.target;
+      if (target instanceof Node && barRef.current?.contains(target)) return;
+      setLinkOpen(false);
+      savedRange.current = null;
+      onLinkingRef.current(false);
+    }
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [linkOpen]);
+
+  useEffect(() => {
+    return () => onLinkingRef.current(false);
+  }, []);
+
+  function openLink() {
+    const current = window.getSelection();
+    if (!current || current.rangeCount === 0) return;
+    savedRange.current = current.getRangeAt(0).cloneRange();
+    setDraft(selection.href ?? "");
+    setLinkOpen(true);
+    onLinkingRef.current(true);
+  }
+
+  function closeLink() {
+    setLinkOpen(false);
+    savedRange.current = null;
+    onLinkingRef.current(false);
+  }
+
+  function submitLink(event: FormEvent) {
+    event.preventDefault();
+    const range = savedRange.current;
+    if (!range) return;
+    onLink(draft, range);
+    setLinkOpen(false);
+    savedRange.current = null;
+    onLinkingRef.current(false);
+  }
+
+  const bar = stylex.props(styles.bar);
+
+  return createPortal(
+    <div
+      ref={barRef}
+      role="toolbar"
+      aria-label="Format selection"
+      data-selection-bar=""
+      className={bar.className}
+      style={{ ...bar.style, top: pos.top, left: pos.left }}
+      onPointerDown={(event) => {
+        const target = event.target;
+        if (target instanceof HTMLElement && target.closest("input")) return;
+        event.preventDefault();
+      }}
+    >
+      {linkOpen ? (
+        <form onSubmit={submitLink} {...stylex.props(styles.linkForm)}>
+          <input
+            ref={inputRef}
+            aria-label="Link address"
+            value={draft}
+            placeholder="https://"
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key !== "Escape") return;
+              event.preventDefault();
+              closeLink();
+            }}
+            {...stylex.props(styles.input)}
+          />
+          <button
+            type="submit"
+            disabled={!draft.trim() && selection.href == null}
+            {...stylex.props(styles.action, styles.apply)}
+          >
+            {draft.trim() || selection.href == null ? "Apply" : "Remove"}
+          </button>
+        </form>
+      ) : (
+        <>
+          {BLOCKS.map((item) => {
+            const active = selection.format === item.format;
+            return (
+              <button
+                key={item.format}
+                type="button"
+                aria-pressed={active}
+                onClick={() =>
+                  onFormat(active && item.format !== "paragraph" ? "paragraph" : item.format)
+                }
+                {...stylex.props(styles.action, active && styles.actionOn)}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+          <span aria-hidden="true" {...stylex.props(styles.sep)} />
+          <button
+            type="button"
+            aria-label="Bold"
+            aria-pressed={selection.bold}
+            onClick={() => onInline("strong")}
+            {...stylex.props(styles.action, styles.bold, selection.bold && styles.actionOn)}
+          >
+            B
+          </button>
+          <button
+            type="button"
+            aria-label="Italic"
+            aria-pressed={selection.italic}
+            onClick={() => onInline("em")}
+            {...stylex.props(styles.action, styles.italic, selection.italic && styles.actionOn)}
+          >
+            I
+          </button>
+          <button
+            type="button"
+            aria-pressed={selection.href != null}
+            onClick={openLink}
+            {...stylex.props(styles.action, selection.href != null && styles.actionOn)}
+          >
+            Link
+          </button>
+        </>
+      )}
+    </div>,
+    document.body,
+  );
+}
+
+const styles = stylex.create({
+  bar: {
+    position: "fixed",
+    zIndex: z.tooltip,
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+    padding: space.xs,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    boxShadow: "0 8px 24px rgba(24, 24, 27, 0.12), 0 1px 2px rgba(24, 24, 27, 0.06)",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+  },
+  action: {
+    margin: 0,
+    paddingBlock: space.xs,
+    paddingInline: space.sm,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontFamily: type.sans,
+    fontSize: type.sm,
+    fontWeight: 500,
+    lineHeight: 1.2,
+    cursor: "pointer",
+    ":disabled": {
+      opacity: 0.45,
+      cursor: "default",
+    },
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  actionOn: {
+    backgroundColor: colors.bgActive,
+  },
+  bold: {
+    fontWeight: 700,
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+  apply: {
+    color: colors.textMuted,
+  },
+  sep: {
+    width: 1,
+    height: 16,
+    marginInline: 2,
+    backgroundColor: colors.border,
+  },
+  linkForm: {
+    display: "flex",
+    alignItems: "center",
+  },
+  input: {
+    width: "12rem",
+    margin: 0,
+    paddingBlock: space.xs,
+    paddingInline: space.sm,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontFamily: type.sans,
+    fontSize: type.sm,
+    lineHeight: 1.2,
+    outline: "none",
+  },
+});

package/src/pages/SettingsGeneralPage.tsx

@@ -0,0 +1,403 @@
+// packages/studio/src/pages/SettingsGeneralPage.tsx
+import { useEffect, useState } from "react";
+import { useOutletContext } from "react-router";
+import {
+  patchWorkspace,
+  rotateContentToken,
+  rotateHostToken,
+  rotatePreviewToken,
+} from "../api";
+import { hostEnvSnippet } from "./host-env";
+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";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import type { WorkspaceOutletContext } from "../workspace/types";
+
+export function SettingsGeneralPage() {
+  const { workspace, setWorkspace } = useOutletContext<WorkspaceOutletContext>();
+  const [contentTokenOnce, setContentTokenOnce] = useState<string | null>(null);
+  const [previewTokenOnce, setPreviewTokenOnce] = useState<string | null>(null);
+  const [hostTokenOnce, setHostTokenOnce] = useState<string | null>(null);
+  const [copiedId, setCopiedId] = useState(false);
+  const [copiedEnv, setCopiedEnv] = useState(false);
+  const [siteUrl, setSiteUrl] = useState(workspace.siteUrls?.[0] ?? "");
+  const [error, setError] = useState<string | null>(null);
+  const [status, setStatus] = useState<string | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+
+  const canEdit = workspace.role === "admin";
+  const webhookUrl = revalidateWebhookUrl(siteUrl);
+
+  useEffect(() => {
+    if (!copiedId && !copiedEnv) return;
+    const id = window.setTimeout(() => {
+      setCopiedId(false);
+      setCopiedEnv(false);
+    }, 1500);
+    return () => window.clearTimeout(id);
+  }, [copiedId, copiedEnv]);
+
+  const envSnippet = hostEnvSnippet({
+    workspaceId: workspace.id,
+    contentToken: contentTokenOnce,
+    previewToken: previewTokenOnce,
+    hostToken: hostTokenOnce,
+    siteUrl: workspace.siteUrls?.[0],
+  });
+
+  async function onSaveSiteUrl(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy("site-url");
+    setError(null);
+    setStatus(null);
+    const trimmed = siteUrl.trim();
+    try {
+      const res = await patchWorkspace(workspace.id, {
+        siteUrls: trimmed ? [trimmed] : [],
+      });
+      setWorkspace(res.workspace);
+      setSiteUrl(res.workspace.siteUrls[0] ?? "");
+      setStatus(trimmed ? "Site URL saved." : "Site URL cleared.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not save site URL");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function onRotateToken() {
+    setBusy("token");
+    setError(null);
+    setStatus(null);
+    try {
+      const res = await rotateContentToken(workspace.id);
+      setContentTokenOnce(res.token);
+      setWorkspace((prev) =>
+        prev ? { ...prev, hasContentToken: true } : prev,
+      );
+      setStatus(
+        "Content token generated — copy it now; it won’t be shown again.",
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Token rotate failed");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function onRotatePreviewToken() {
+    setBusy("preview-token");
+    setError(null);
+    setStatus(null);
+    try {
+      const res = await rotatePreviewToken(workspace.id);
+      setPreviewTokenOnce(res.token);
+      setWorkspace((prev) =>
+        prev ? { ...prev, hasPreviewToken: true } : prev,
+      );
+      setStatus(
+        "Preview token generated — set BACKMATTER_PREVIEW_TOKEN on the test site.",
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Preview token failed");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function onRotateHostToken() {
+    setBusy("host-token");
+    setError(null);
+    setStatus(null);
+    try {
+      const res = await rotateHostToken(workspace.id);
+      setHostTokenOnce(res.token);
+      setWorkspace((prev) =>
+        prev ? { ...prev, hasHostToken: true } : prev,
+      );
+      setStatus(
+        "Host token generated — set BACKMATTER_HOST_TOKEN on the Next app.",
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Host token failed");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  return (
+    <section>
+      <PageHeader
+        title="General"
+        description={`Production site URL and API tokens. Role: ${workspace.role}.`}
+      />
+      {error ? <Text tone="danger">{error}</Text> : null}
+      {status ? <Text tone="success">{status}</Text> : null}
+      <Stack gap="lg">
+        <Panel>
+          <Text as="h2" size="lg" weight="medium">
+            Site URL
+          </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>
+            </div>
+            {canEdit ? (
+              <div {...stylex.props(styles.block)}>
+                <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">
+            Workspace ID
+          </Text>
+          <div {...stylex.props(styles.idRow)}>
+            <pre {...stylex.props(styles.pre, styles.idPre)}>{workspace.id}</pre>
+            <Button
+              variant="secondary"
+              aria-label={copiedId ? "Copied workspace ID" : "Copy workspace ID"}
+              onClick={() => {
+                void navigator.clipboard.writeText(workspace.id).then(
+                  () => setCopiedId(true),
+                  () => setCopiedId(false),
+                );
+              }}
+            >
+              {copiedId ? "Copied" : "Copy"}
+            </Button>
+          </div>
+          <p {...stylex.props(styles.caption)}>
+            backmatter.config.ts workspaceId · public URLs use this id, not the slug
+          </p>
+        </Panel>
+        <Panel>
+          <Text as="h2" size="lg" weight="medium">
+            Host environment
+          </Text>
+          <div {...stylex.props(styles.block)}>
+            <Text tone="muted" size="sm">
+              Paste this into the Next host env. Put workspaceId in
+              backmatter.config.ts. Token values appear after you generate them
+              below; they are shown once.
+            </Text>
+          </div>
+          <pre {...stylex.props(styles.pre)}>{envSnippet}</pre>
+          <div {...stylex.props(styles.block)}>
+            <Button
+              variant="secondary"
+              aria-label={copiedEnv ? "Copied host environment" : "Copy host environment"}
+              onClick={() => {
+                void navigator.clipboard.writeText(envSnippet).then(
+                  () => setCopiedEnv(true),
+                  () => setCopiedEnv(false),
+                );
+              }}
+            >
+              {copiedEnv ? "Copied" : "Copy .env"}
+            </Button>
+          </div>
+        </Panel>
+        <Panel>
+          <Text as="h2" size="lg" weight="medium">
+            Content API token
+          </Text>
+          <div {...stylex.props(styles.block)}>
+            <Text tone="muted" size="sm">
+              Needed to read non-default branches (BACKMATTER_CONTENT_TOKEN). The
+              default branch is public.{" "}
+              {workspace.hasContentToken ? "A token is set." : "No token yet."}
+            </Text>
+          </div>
+          {contentTokenOnce ? (
+            <pre {...stylex.props(styles.pre)}>{contentTokenOnce}</pre>
+          ) : null}
+          {canEdit ? (
+            <div {...stylex.props(styles.block)}>
+              <Button
+                variant="secondary"
+                disabled={busy !== null}
+                onClick={() => void onRotateToken()}
+              >
+                {busy === "token"
+                  ? "Generating…"
+                  : workspace.hasContentToken
+                    ? "Rotate token"
+                    : "Generate token"}
+              </Button>
+            </div>
+          ) : null}
+        </Panel>
+        <Panel>
+          <Text as="h2" size="lg" weight="medium">
+            Preview token
+          </Text>
+          <div {...stylex.props(styles.block)}>
+            <Text tone="muted" size="sm">
+              Working tree SSE + preview session (BACKMATTER_PREVIEW_TOKEN).{" "}
+              {workspace.hasPreviewToken ? "A token is set." : "No token yet."}
+            </Text>
+          </div>
+          {previewTokenOnce ? (
+            <pre {...stylex.props(styles.pre)}>{previewTokenOnce}</pre>
+          ) : null}
+          {canEdit ? (
+            <div {...stylex.props(styles.block)}>
+              <Button
+                variant="secondary"
+                disabled={busy !== null}
+                onClick={() => void onRotatePreviewToken()}
+              >
+                {busy === "preview-token"
+                  ? "Generating…"
+                  : workspace.hasPreviewToken
+                    ? "Rotate preview token"
+                    : "Generate preview token"}
+              </Button>
+            </div>
+          ) : null}
+        </Panel>
+        <Panel>
+          <Text as="h2" size="lg" weight="medium">
+            Host token
+          </Text>
+          <div {...stylex.props(styles.block)}>
+            <Text tone="muted" size="sm">
+              Used by @backmatter/next to POST the schema snapshot on boot
+              (BACKMATTER_HOST_TOKEN).{" "}
+              {workspace.hasHostToken ? "A token is set." : "No token yet."}
+            </Text>
+          </div>
+          {hostTokenOnce ? (
+            <pre {...stylex.props(styles.pre)}>{hostTokenOnce}</pre>
+          ) : null}
+          {canEdit ? (
+            <div {...stylex.props(styles.block)}>
+              <Button
+                variant="secondary"
+                disabled={busy !== null}
+                onClick={() => void onRotateHostToken()}
+              >
+                {busy === "host-token"
+                  ? "Generating…"
+                  : workspace.hasHostToken
+                    ? "Rotate host token"
+                    : "Generate host token"}
+              </Button>
+            </div>
+          ) : null}
+        </Panel>
+      </Stack>
+    </section>
+  );
+}
+
+/** Which Studio each site runs, as reported on its last session start. */
+function StudioVersions({
+  versions,
+}: {
+  versions: Record<string, { version: string; seenAt: string }> | undefined;
+}) {
+  const entries = Object.entries(versions ?? {}).sort(([a], [b]) => a.localeCompare(b));
+  if (entries.length === 0) {
+    return (
+      <p {...stylex.props(styles.caption)}>
+        No site has opened its editor yet. Mount <code>@backmatter/studio</code> on the site and open
+        it from here.
+      </p>
+    );
+  }
+  return (
+    <div {...stylex.props(styles.block)}>
+      <Text tone="muted" size="sm">
+        Site editor
+      </Text>
+      {entries.map(([origin, seen]) => (
+        <p key={origin} {...stylex.props(styles.caption)}>
+          {origin} · @backmatter/studio {seen.version} · seen {relativeTime(seen.seenAt)}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+export function relativeTime(iso: string, now = Date.now()): string {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return "unknown";
+  const minutes = Math.max(0, Math.round((now - then) / 60_000));
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 48) return `${hours}h ago`;
+  return `${Math.round(hours / 24)}d ago`;
+}
+
+const styles = stylex.create({
+  block: {
+    marginTop: space.md,
+  },
+  idRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    marginTop: space.md,
+    minWidth: 0,
+  },
+  idPre: {
+    marginTop: 0,
+    flex: 1,
+    minWidth: 0,
+  },
+  caption: {
+    marginTop: space.sm,
+    marginBottom: 0,
+    color: colors.textMuted,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    lineHeight: 1.45,
+  },
+  pre: {
+    marginTop: space.md,
+    overflowX: "auto",
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    backgroundColor: colors.bgInput,
+    padding: space.md,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+  },
+});