@backmatter/studio 0.0.14 → 0.0.16

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 />
-  );
-}