@backmatter/studio 0.0.15 → 0.0.16

package/src/site-pointer.ts

@@ -1,6 +1,8 @@
 // packages/studio/src/site-pointer.ts
 // Hit-test a click on the host page and draw the armed pointer outline.
 
+import { readElementOrigin, type ElementOrigin } from "./element-origin";
+
 export const POINTER_QUOTE_MAX = 240;
 
 export type PointerGrab = {
@@ -8,6 +10,14 @@ export type PointerGrab = {
   blockType: string | null;
   blockIndex: number | null;
   quote: string;
+} & ElementOrigin;
+
+const EMPTY_ORIGIN: ElementOrigin = {
+  component: null,
+  file: null,
+  line: null,
+  column: null,
+  stack: [],
 };
 
 function quoteOf(target: Element): string {
@@ -29,9 +39,10 @@ export function grabAt(target: Element | null, bar: Element | null): PointerGrab
 
   const marker = target.closest("[data-backmatter-block]");
   const quote = quoteOf(target);
+  const origin = readElementOrigin(target) ?? EMPTY_ORIGIN;
   if (!marker) {
-    if (!quote) return null;
-    return { blockId: null, blockType: null, blockIndex: null, quote };
+    if (!quote && !origin.component && !origin.file) return null;
+    return { blockId: null, blockType: null, blockIndex: null, quote, ...origin };
   }
   const indexRaw = marker.getAttribute("data-backmatter-index");
   const blockIndex = indexRaw !== null && /^\d+$/.test(indexRaw) ? Number(indexRaw) : null;
@@ -40,6 +51,7 @@ export function grabAt(target: Element | null, bar: Element | null): PointerGrab
     blockType: presentAttr(marker, "data-backmatter-type"),
     blockIndex,
     quote,
+    ...origin,
   };
 }
 
@@ -104,10 +116,13 @@ export function installSitePointer(
   }
 
   function onClick(event: MouseEvent) {
-    if (!armed || ignored(event.target)) return;
+    if (!armed) return;
+    const raw = event.target instanceof Element ? event.target : null;
+    // The outline sits on the element. A click on it belongs to the element under it.
+    const target = raw?.closest("[data-backmatter-pointer]") ? current : raw;
+    if (!target || ignored(target)) return;
     event.preventDefault();
     event.stopPropagation();
-    const target = event.target instanceof Element ? event.target : null;
     const grab = grabAt(target, options.bar());
     if (grab) options.onGrab(grab, isOpenModifier(event));
   }
@@ -174,6 +189,7 @@ function createPointerOutline(doc: Document): HTMLDivElement {
   label.style.background = "#18181b";
   label.style.color = "#ffffff";
   label.style.font = "11px/1.4 ui-sans-serif, system-ui, sans-serif";
+  label.style.pointerEvents = "none";
   label.style.display = "none";
   el.appendChild(label);
   doc.body.appendChild(el);
@@ -216,7 +232,10 @@ function positionPointerOutline(outline: HTMLDivElement, target: Element) {
   outline.style.width = `${rect.width}px`;
   outline.style.height = `${rect.height}px`;
   const label = outline.firstElementChild as HTMLElement | null;
-  const name = target.closest("[data-backmatter-block]")?.getAttribute("data-backmatter-type") ?? "";
+  const name =
+    target.closest("[data-backmatter-block]")?.getAttribute("data-backmatter-type") ||
+    readElementOrigin(target)?.component ||
+    "";
   if (!label) return;
   if (!name) {
     label.textContent = "";

package/src/studio-config.ts

@@ -14,7 +14,7 @@ export type StudioConfig = {
   dev: boolean;
   /**
    * The CMS API origin as the outside world reaches it, for URLs the Studio
-   * shows rather than fetches (the Content API popover). A site Studio fetches
+   * shows rather than fetches (the Content API URL in General settings). A site Studio fetches
    * through a relative proxy, so its host passes the real origin here.
    * Defaults to `baseUrl`.
    */

package/src/ui/ListRow.tsx

@@ -11,13 +11,13 @@ export function ListRow({
   meta,
   trailing,
 }: {
-  to: string;
+  to?: string;
   title: string;
   meta?: string;
   trailing?: string;
 }) {
-  return (
-    <Link to={to} {...stylex.props(styles.row)}>
+  const body = (
+    <>
       <span {...stylex.props(styles.body)}>
         <span {...stylex.props(styles.title)}>{title}</span>
         {meta ? <span {...stylex.props(styles.meta)}>{meta}</span> : null}
@@ -25,6 +25,12 @@ export function ListRow({
       {trailing ? (
         <span {...stylex.props(styles.trailing)}>{trailing}</span>
       ) : null}
+    </>
+  );
+  if (!to) return <div {...stylex.props(styles.row, styles.static)}>{body}</div>;
+  return (
+    <Link to={to} {...stylex.props(styles.row)}>
+      {body}
     </Link>
   );
 }
@@ -66,6 +72,9 @@ const styles = stylex.create({
       },
     },
   },
+  static: {
+    cursor: "default",
+  },
   body: {
     display: "flex",
     minWidth: 0,

package/src/ui/Page.tsx

@@ -6,10 +6,12 @@ export function PageFrame({
   children,
   flush,
   centered,
+  wide,
 }: {
   children: React.ReactNode;
   flush?: boolean;
   centered?: boolean;
+  wide?: boolean;
 }) {
   return (
     <div
@@ -22,7 +24,13 @@ export function PageFrame({
       {flush ? (
         children
       ) : (
-        <div {...stylex.props(styles.inner, centered && styles.innerCentered)}>
+        <div
+          {...stylex.props(
+            styles.inner,
+            centered && styles.innerCentered,
+            wide && styles.innerWide,
+          )}
+        >
           {children}
         </div>
       )}
@@ -108,6 +116,9 @@ const styles = stylex.create({
   innerCentered: {
     maxWidth: "440px",
   },
+  innerWide: {
+    maxWidth: "960px",
+  },
   header: {
     display: "flex",
     alignItems: "flex-start",

package/src/workspace-path.ts

@@ -3,6 +3,14 @@ export function workspaceHomePath(slug: string) {
   return `/${slug}`;
 }
 
+/** The workspace index. Content, media, and settings are deeper routes. */
+export function isWorkspaceHomePath(pathname: string) {
+  const slug = cmsWorkspaceSlug(pathname);
+  if (!slug) return false;
+  const path = pathname.split("?")[0]?.replace(/\/$/, "") || "/";
+  return path === `/${slug}`;
+}
+
 export function contentTypePath(slug: string, type: string) {
   return `/${slug}/content/${type}`;
 }
@@ -15,6 +23,10 @@ export function mediaPath(slug: string) {
   return `/${slug}/media`;
 }
 
+export function codeSessionPath(slug: string) {
+  return `/${slug}/code`;
+}
+
 export function settingsPath(slug: string, page: string) {
   return `/${slug}/settings/${page}`;
 }
@@ -71,19 +83,33 @@ export function isWorkspaceMediaPath(pathname: string) {
   return /\/media\/?$/.test(pathname);
 }
 
+export function isWorkspaceCodePath(pathname: string) {
+  return /\/code\/?$/.test(pathname);
+}
+
 /** The content file tree belongs on content routes only. */
 export function isWorkspaceContentPath(pathname: string) {
   return /\/content(?:\/|$)/.test(pathname);
 }
 
+/** The content index. The file tree lives here; the workspace home does not. */
+export function contentIndexPath(slug: string) {
+  return `/${slug}/content`;
+}
+
+export function isWorkspaceContentIndexPath(pathname: string) {
+  const path = pathname.split("?")[0]?.replace(/\/$/, "") || "/";
+  return /\/content$/.test(path);
+}
+
 /**
  * Where the content rail icon navigates.
  * On a content route it stays put: a document toggles the file tree, and the
- * type index is already the file tree.
- * Anywhere else (settings, media, connect): the workspace home, which opens the docs.
+ * content index is already the file tree.
+ * Anywhere else (home, settings, media, connect): `/content`.
  */
 export function contentRailHref(pathname: string, slug: string): string | null {
-  if (!isWorkspaceContentPath(pathname)) return workspaceHomePath(slug);
+  if (!isWorkspaceContentPath(pathname)) return contentIndexPath(slug);
   return null;
 }
 
@@ -101,6 +127,12 @@ export function isOrgPickerPath(pathname: string) {
   return path === "/invite";
 }
 
+/** The workspace list and create form. The app sidebar repeats this list. */
+export function isWorkspaceListPath(pathname: string) {
+  const path = pathname.split("?")[0]?.replace(/\/$/, "") || "/";
+  return path === "/workspaces" || path === "/workspaces/new";
+}
+
 /** CLI approval is a full-screen form, not a workspace. */
 export function isCliAuthorizePath(pathname: string) {
   const path = pathname.replace(/\/$/, "") || "/";

package/src/chrome/ContentApiPopover.tsx

@@ -1,215 +0,0 @@
-// 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/pages/WorkspaceHomeRedirect.tsx

@@ -1,17 +0,0 @@
-// packages/studio/src/pages/WorkspaceHomeRedirect.tsx
-import { Navigate, useOutletContext } from "react-router";
-import type { WorkspaceOutletContext } from "../workspace/types";
-import { contentTypePath, settingsPath } from "../workspace-path";
-
-export function WorkspaceHomeRedirect() {
-  const { workspace, models } = useOutletContext<WorkspaceOutletContext>();
-  const first = models[0]?.type;
-  if (first) {
-    return (
-      <Navigate to={contentTypePath(workspace.slug, first)} replace />
-    );
-  }
-  return (
-    <Navigate to={settingsPath(workspace.slug, "schema")} replace />
-  );
-}