@backmatter/studio 0.0.1

package/src/chrome/ContentApiPopover.tsx

@@ -0,0 +1,215 @@
+// packages/studio/src/chrome/ContentApiPopover.tsx
+import { useEffect, useState } from "react";
+import { Popover } from "@base-ui/react/popover";
+import * as stylex from "@stylexjs/stylex";
+import { publicApiUrl } from "../studio-config";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { contentApiLinks } from "./content-api-url";
+import { ApiIcon } from "./icons";
+
+const hover = "@media (hover: hover)";
+
+function CopyUrl({ label, href }: { label: string; href: string }) {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const id = window.setTimeout(() => setCopied(false), 1500);
+    return () => window.clearTimeout(id);
+  }, [copied]);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(href);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  }
+
+  return (
+    <div {...stylex.props(styles.row)}>
+      <p {...stylex.props(popup.groupLabel)}>{label}</p>
+      <div {...stylex.props(styles.urlRow)}>
+        <a
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          {...stylex.props(styles.href)}
+        >
+          {href}
+        </a>
+        <button
+          type="button"
+          onClick={() => void copy()}
+          aria-label={copied ? "Copied" : `Copy ${label} URL`}
+          {...stylex.props(styles.copy)}
+        >
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function ContentApiPopover({
+  workspaceId,
+  branch,
+  defaultBranch,
+  pathname,
+  search,
+}: {
+  workspaceId: string;
+  branch?: string | null;
+  defaultBranch?: string | null;
+  pathname: string;
+  search?: string;
+}) {
+  const links = contentApiLinks({
+    apiUrl: publicApiUrl(),
+    workspaceId,
+    branch,
+    defaultBranch,
+    pathname,
+    search,
+  });
+  const locked = Boolean(branch && defaultBranch && branch !== defaultBranch);
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger aria-label="Content API" className={cx(styles.trigger)}>
+        <ApiIcon />
+        <span>API</span>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner
+          side="bottom"
+          align="start"
+          sideOffset={6}
+          className={cx(popup.positioner)}
+        >
+          <Popover.Popup
+            aria-label="Content API"
+            className={(state) => popupClassName(state, styles.popup)}
+          >
+            <p {...stylex.props(popup.groupLabel)}>Content API</p>
+            <p {...stylex.props(styles.hint)}>
+              {locked
+                ? "This branch needs the content token from Settings → General."
+                : "Default branch is public — no token. URLs use the workspace id."}
+            </p>
+            {links.map((link) => (
+              <CopyUrl key={link.href} label={link.label} href={link.href} />
+            ))}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+const styles = stylex.create({
+  trigger: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    minHeight: "24px",
+    paddingInline: space.xs,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontSize: type.xs,
+    fontFamily: type.mono,
+    cursor: "pointer",
+    touchAction: "manipulation",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: "-2px",
+    },
+    [hover]: {
+      ":hover": {
+        color: colors.text,
+      },
+    },
+  },
+  popup: {
+    width: "380px",
+    paddingBottom: space.md,
+    overflow: "hidden",
+  },
+  hint: {
+    margin: 0,
+    paddingInline: space.lg,
+    paddingBottom: space.sm,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    lineHeight: 1.45,
+    color: colors.textMuted,
+  },
+  row: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+    paddingBottom: space.sm,
+  },
+  urlRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    minWidth: 0,
+    marginInline: space.lg,
+  },
+  href: {
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: colors.text,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    textDecoration: "none",
+    [hover]: {
+      ":hover": {
+        textDecoration: "underline",
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 2,
+    },
+  },
+  copy: {
+    flexShrink: 0,
+    minWidth: "52px",
+    minHeight: "24px",
+    paddingInline: space.sm,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    color: colors.textMuted,
+    fontSize: type.xs,
+    fontFamily: type.sans,
+    cursor: "pointer",
+    touchAction: "manipulation",
+    [hover]: {
+      ":hover": {
+        color: colors.text,
+        backgroundColor: colors.bgHover,
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+});

package/src/chrome/EditorActionsContext.tsx

@@ -0,0 +1,63 @@
+// packages/studio/src/chrome/EditorActionsContext.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+export type EditorActions = {
+  save: (() => Promise<void>) | null;
+  revert: (() => Promise<void>) | null;
+  canRevert: boolean;
+};
+
+const EMPTY: EditorActions = {
+  save: null,
+  revert: null,
+  canRevert: false,
+};
+
+type EditorActionsContextValue = {
+  actions: EditorActions;
+  setActions: (actions: EditorActions) => void;
+  clear: () => void;
+};
+
+const EditorActionsContext = createContext<EditorActionsContextValue | null>(
+  null,
+);
+
+export function EditorActionsProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [actions, setActionsState] = useState<EditorActions>(EMPTY);
+  const setActions = useCallback((next: EditorActions) => {
+    setActionsState(next);
+  }, []);
+  const clear = useCallback(() => setActionsState(EMPTY), []);
+  const value = useMemo(
+    () => ({ actions, setActions, clear }),
+    [actions, setActions, clear],
+  );
+  return (
+    <EditorActionsContext.Provider value={value}>
+      {children}
+    </EditorActionsContext.Provider>
+  );
+}
+
+export function useEditorActions() {
+  return useContext(EditorActionsContext)?.actions ?? EMPTY;
+}
+
+export function useSetEditorActions() {
+  const ctx = useContext(EditorActionsContext);
+  if (!ctx) {
+    throw new Error("useSetEditorActions must be used within EditorActionsProvider");
+  }
+  return ctx;
+}

package/src/chrome/EditorFocusContext.tsx

@@ -0,0 +1,80 @@
+// packages/studio/src/chrome/EditorFocusContext.tsx
+//
+// Bridge between the open document editor and the global AI chat.
+// The editor publishes what is focused (doc, content, selection); the chat
+// publishes which doc it is currently editing so the editor can pause autosave.
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+export type DocRef = { locale: string; type: string; slug: string };
+
+export type EditorSelection = { start: number; end: number };
+
+export type EditorFocus = {
+  docRef: DocRef;
+  frontmatter: Record<string, unknown>;
+  body: string;
+  selection: EditorSelection | null;
+};
+
+export function docKey(ref: DocRef): string {
+  return `${ref.locale}/${ref.type}/${ref.slug}`;
+}
+
+export function sameDocRef(a: DocRef | null | undefined, b: DocRef | null | undefined) {
+  if (!a || !b) return false;
+  return a.locale === b.locale && a.type === b.type && a.slug === b.slug;
+}
+
+type EditorFocusContextValue = {
+  focus: EditorFocus | null;
+  setFocus: (focus: EditorFocus | null) => void;
+  /** docKey of the document the AI is currently writing to, if any. */
+  aiEditingDocKey: string | null;
+  setAiEditingDocKey: (key: string | null) => void;
+};
+
+const EditorFocusContext = createContext<EditorFocusContextValue | null>(null);
+
+export function EditorFocusProvider({ children }: { children: React.ReactNode }) {
+  const [focus, setFocusState] = useState<EditorFocus | null>(null);
+  const [aiEditingDocKey, setAiEditingDocKey] = useState<string | null>(null);
+  const setFocus = useCallback((next: EditorFocus | null) => {
+    setFocusState(next);
+  }, []);
+  const value = useMemo(
+    () => ({ focus, setFocus, aiEditingDocKey, setAiEditingDocKey }),
+    [focus, setFocus, aiEditingDocKey],
+  );
+  return (
+    <EditorFocusContext.Provider value={value}>{children}</EditorFocusContext.Provider>
+  );
+}
+
+export function useEditorFocus(): EditorFocusContextValue {
+  const ctx = useContext(EditorFocusContext);
+  if (!ctx) {
+    throw new Error("useEditorFocus must be used within EditorFocusProvider");
+  }
+  return ctx;
+}
+
+export function useEditorFocusOptional(): EditorFocusContextValue | null {
+  return useContext(EditorFocusContext);
+}
+
+/** Fired by the chat when a document in the working tree was changed (write, create, undo). */
+export const DOC_CHANGED_EVENT = "backmatter:doc-changed";
+
+export type DocChangedDetail = { docRef: DocRef };
+
+export function notifyDocChanged(docRef: DocRef) {
+  window.dispatchEvent(
+    new CustomEvent<DocChangedDetail>(DOC_CHANGED_EVENT, { detail: { docRef } }),
+  );
+}

package/src/chrome/EditorStatusContext.tsx

@@ -0,0 +1,84 @@
+// packages/studio/src/chrome/EditorStatusContext.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+
+export type EditorStatus = {
+  locale: string | null;
+  /** committed | uncommitted | conflict */
+  status: string | null;
+  saveLabel: string | null;
+  saveTone: "muted" | "danger" | "success";
+};
+
+const EMPTY: EditorStatus = {
+  locale: null,
+  status: null,
+  saveLabel: null,
+  saveTone: "muted",
+};
+
+type EditorStatusSetters = {
+  setStatus: (status: EditorStatus) => void;
+  clear: () => void;
+};
+
+type EditorStatusContextValue = {
+  status: EditorStatus;
+  setters: EditorStatusSetters;
+};
+
+const EditorStatusContext = createContext<EditorStatusContextValue | null>(
+  null,
+);
+
+function sameStatus(a: EditorStatus, b: EditorStatus) {
+  return (
+    a.locale === b.locale &&
+    a.status === b.status &&
+    a.saveLabel === b.saveLabel &&
+    a.saveTone === b.saveTone
+  );
+}
+
+export function EditorStatusProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [status, setStatusState] = useState<EditorStatus>(EMPTY);
+  const setStatus = useCallback((next: EditorStatus) => {
+    setStatusState((prev) => (sameStatus(prev, next) ? prev : next));
+  }, []);
+  const clear = useCallback(() => setStatusState(EMPTY), []);
+  const setters = useMemo<EditorStatusSetters>(
+    () => ({ setStatus, clear }),
+    [setStatus, clear],
+  );
+  const value = useMemo(
+    () => ({ status, setters }),
+    [status, setters],
+  );
+  return (
+    <EditorStatusContext.Provider value={value}>
+      {children}
+    </EditorStatusContext.Provider>
+  );
+}
+
+export function useEditorStatus() {
+  const ctx = useContext(EditorStatusContext);
+  return ctx?.status ?? EMPTY;
+}
+
+export function useSetEditorStatus(): EditorStatusSetters {
+  const ctx = useContext(EditorStatusContext);
+  if (!ctx) {
+    throw new Error("useSetEditorStatus must be used within EditorStatusProvider");
+  }
+  return ctx.setters;
+}

package/src/chrome/NavItem.tsx

@@ -0,0 +1,75 @@
+// packages/studio/src/chrome/NavItem.tsx
+import { NavLink } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+
+const hover = "@media (hover: hover)";
+
+export function NavItem({
+  to,
+  children,
+  end,
+  active,
+}: {
+  to: string;
+  children: React.ReactNode;
+  end?: boolean;
+  active?: boolean;
+}) {
+  return (
+    <NavLink to={to} end={end} {...stylex.props(styles.anchor)}>
+      {({ isActive }) => {
+        const sx = stylex.props(
+          styles.item,
+          (active ?? isActive) && styles.itemActive,
+        );
+        return (
+          <span className={sx.className} style={sx.style}>
+            {children}
+          </span>
+        );
+      }}
+    </NavLink>
+  );
+}
+
+/** Plain link in the sidebar's nav style, for hrefs outside the router (site menu). */
+export function NavAnchor({ href, children }: { href: string; children: React.ReactNode }) {
+  const sx = stylex.props(styles.item);
+  return (
+    <a href={href} {...stylex.props(styles.anchor)}>
+      <span className={sx.className} style={sx.style}>
+        {children}
+      </span>
+    </a>
+  );
+}
+
+const styles = stylex.create({
+  anchor: {
+    display: "block",
+    color: "inherit",
+    textDecoration: "none",
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    borderRadius: radius.md,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    fontSize: type.md,
+    fontWeight: 500,
+    width: "100%",
+    textDecoration: "none",
+    color: colors.text,
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  itemActive: {
+    backgroundColor: colors.bgActive,
+  },
+});

package/src/chrome/OpenSiteButton.tsx

@@ -0,0 +1,148 @@
+// packages/studio/src/chrome/OpenSiteButton.tsx
+// Dashboard-only: mint a site session for the workspace's site and go there.
+// The site then shows the editing bar and its mounted Studio, with no
+// dashboard cookie involved. Same bounce `/enter` runs for a site that asks.
+// One site URL opens on click; several show a picker.
+import { useState } from "react";
+import { Menu } from "@base-ui/react/menu";
+import * as stylex from "@stylexjs/stylex";
+import { previewEntryUrl, resolveEnterTarget } from "@backmatter/core";
+import { createPreviewTicket } from "../api";
+import { studioConfig } from "../studio-config";
+import { colors, space, type } from "../styles/tokens.stylex";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { ExternalIcon } from "./icons";
+import { openableSites, siteLabel } from "./open-site";
+
+const hover = "@media (hover: hover)";
+
+/** The dashboard talks to the API directly; a site Studio goes through its proxy. */
+export function showsOpenSite(): boolean {
+  return studioConfig().credentials === "include";
+}
+
+export function OpenSiteButton({
+  workspaceId,
+  userId,
+  siteUrls,
+}: {
+  workspaceId: string;
+  userId: string;
+  siteUrls: readonly string[];
+}) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const sites = openableSites(siteUrls);
+  if (sites.length === 0 || !showsOpenSite()) return null;
+
+  async function open(site: string) {
+    const target = resolveEnterTarget(site, siteUrls);
+    if (!target) {
+      setError("Site URL is not valid");
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const { ticket } = await createPreviewTicket(workspaceId, {
+        redirect: target.redirect,
+        tree: userId,
+      });
+      window.location.assign(previewEntryUrl(target.origin, ticket));
+    } catch (err) {
+      setBusy(false);
+      setError(err instanceof Error ? err.message : "Could not open the site");
+    }
+  }
+
+  const label = <span>{busy ? "Opening…" : "Open site"}</span>;
+
+  if (sites.length === 1) {
+    const site = sites[0]!;
+    return (
+      <button
+        type="button"
+        disabled={busy}
+        onClick={() => void open(site)}
+        title={error ?? `Open ${site} with editing on`}
+        aria-label="Open site"
+        className={cx(styles.trigger)}
+      >
+        <ExternalIcon />
+        {label}
+      </button>
+    );
+  }
+
+  return (
+    <Menu.Root>
+      <Menu.Trigger
+        disabled={busy}
+        title={error ?? "Open a site with editing on"}
+        aria-label="Open site"
+        className={cx(styles.trigger)}
+      >
+        <ExternalIcon />
+        {label}
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner side="bottom" align="start" sideOffset={6} className={cx(popup.positioner)}>
+          <Menu.Popup aria-label="Sites" className={(state) => popupClassName(state, styles.menu)}>
+            {sites.map((site) => (
+              <Menu.Item
+                key={site}
+                label={siteLabel(site)}
+                onClick={() => void open(site)}
+                className={(state) =>
+                  cx(popup.item, styles.item, state.highlighted && popup.itemHighlighted)
+                }
+              >
+                {siteLabel(site)}
+              </Menu.Item>
+            ))}
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+const styles = stylex.create({
+  trigger: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    minHeight: "24px",
+    paddingInline: space.xs,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontSize: type.xs,
+    fontFamily: type.mono,
+    cursor: "pointer",
+    touchAction: "manipulation",
+    ":disabled": {
+      cursor: "default",
+      opacity: 0.6,
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: "-2px",
+    },
+    [hover]: {
+      ":hover": {
+        color: colors.text,
+      },
+    },
+  },
+  menu: {
+    minWidth: "200px",
+  },
+  item: {
+    cursor: "pointer",
+    fontFamily: type.mono,
+    fontSize: type.xs,
+  },
+});