@backmatter/studio 0.0.1

package/src/ui/Page.tsx

@@ -0,0 +1,151 @@
+// packages/studio/src/ui/Page.tsx
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+
+export function PageFrame({
+  children,
+  flush,
+  centered,
+}: {
+  children: React.ReactNode;
+  flush?: boolean;
+  centered?: boolean;
+}) {
+  return (
+    <div
+      {...stylex.props(
+        styles.scroll,
+        flush && styles.flush,
+        centered && styles.scrollCentered,
+      )}
+    >
+      {flush ? (
+        children
+      ) : (
+        <div {...stylex.props(styles.inner, centered && styles.innerCentered)}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function PageHeader({
+  kicker,
+  title,
+  description,
+  action,
+  compact,
+}: {
+  kicker?: React.ReactNode;
+  title: string;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  compact?: boolean;
+}) {
+  return (
+    <header {...stylex.props(styles.header, compact && styles.headerCompact)}>
+      <div {...stylex.props(styles.heading)}>
+        {kicker}
+        <h1 {...stylex.props(styles.title)}>{title}</h1>
+        {description ? (
+          <div {...stylex.props(styles.description)}>{description}</div>
+        ) : null}
+      </div>
+      {action}
+    </header>
+  );
+}
+
+export function Panel({ children }: { children: React.ReactNode }) {
+  return <div {...stylex.props(styles.panel)}>{children}</div>;
+}
+
+export function Stack({
+  children,
+  gap = "md",
+}: {
+  children: React.ReactNode;
+  gap?: "sm" | "md" | "lg";
+}) {
+  return (
+    <div
+      {...stylex.props(
+        styles.stack,
+        gap === "sm" && styles.gapSm,
+        gap === "md" && styles.gapMd,
+        gap === "lg" && styles.gapLg,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  scroll: {
+    minHeight: 0,
+    flex: 1,
+    overflowY: "auto",
+  },
+  flush: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  scrollCentered: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  inner: {
+    width: "100%",
+    maxWidth: "720px",
+    marginInline: "auto",
+    paddingInline: space.xxl,
+    paddingBlock: space.xxl,
+  },
+  innerCentered: {
+    maxWidth: "440px",
+  },
+  header: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: space.lg,
+    marginBottom: space.xxl,
+  },
+  headerCompact: {
+    marginBottom: 0,
+  },
+  heading: {
+    minWidth: 0,
+  },
+  title: {
+    margin: 0,
+    fontSize: type.xl,
+    fontWeight: 600,
+    letterSpacing: "-0.02em",
+    textWrap: "balance",
+  },
+  description: {
+    marginTop: space.xs,
+    color: colors.textMuted,
+    fontSize: type.sm,
+  },
+  panel: {
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    padding: space.xl,
+  },
+  stack: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  gapSm: { gap: space.md },
+  gapMd: { gap: space.lg },
+  gapLg: { gap: space.xxl },
+});

package/src/ui/Text.tsx

@@ -0,0 +1,77 @@
+// packages/studio/src/ui/Text.tsx
+import type { ElementType, ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { colors, type } from "../styles/tokens.stylex";
+
+type Tone = "default" | "muted" | "danger" | "success";
+type Size = "xs" | "sm" | "md" | "lg" | "xl" | "display";
+
+export function Text({
+  as: Tag = "p",
+  tone = "default",
+  size = "md",
+  weight = "regular",
+  mono,
+  truncate,
+  children,
+}: {
+  as?: ElementType;
+  tone?: Tone;
+  size?: Size;
+  weight?: "regular" | "medium" | "semibold";
+  mono?: boolean;
+  truncate?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Tag
+      {...stylex.props(
+        styles.base,
+        size === "xs" && styles.xs,
+        size === "sm" && styles.sm,
+        size === "md" && styles.md,
+        size === "lg" && styles.lg,
+        size === "xl" && styles.xl,
+        size === "display" && styles.display,
+        tone === "muted" && styles.muted,
+        tone === "danger" && styles.danger,
+        tone === "success" && styles.success,
+        weight === "medium" && styles.medium,
+        weight === "semibold" && styles.semibold,
+        mono && styles.mono,
+        truncate && styles.truncate,
+      )}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+const styles = stylex.create({
+  base: {
+    margin: 0,
+    color: colors.text,
+    textWrap: "pretty",
+  },
+  xs: { fontSize: type.xs, letterSpacing: "0.04em" },
+  sm: { fontSize: type.sm },
+  md: { fontSize: type.md },
+  lg: { fontSize: type.lg },
+  xl: { fontSize: type.xl, letterSpacing: "-0.02em", textWrap: "balance" },
+  display: {
+    fontSize: type.display,
+    letterSpacing: "-0.03em",
+    textWrap: "balance",
+  },
+  muted: { color: colors.textMuted },
+  danger: { color: colors.danger },
+  success: { color: colors.success },
+  medium: { fontWeight: 500 },
+  semibold: { fontWeight: 600 },
+  mono: { fontFamily: type.mono },
+  truncate: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+});

package/src/ui/Tooltip.tsx

@@ -0,0 +1,85 @@
+// packages/studio/src/ui/Tooltip.tsx
+//
+// Base UI tooltip with app styling. Wrap any focusable trigger:
+//
+//   <Tooltip label="Close (Esc)"><button aria-label="Close">…</button></Tooltip>
+//
+// Mount one <TooltipProvider> near the app root so hovering between adjacent
+// icon buttons doesn't re-trigger the open delay.
+import type { ReactElement, ReactNode } from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { cx } from "./popup";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+export function TooltipProvider({ children }: { children: ReactNode }) {
+  return (
+    <BaseTooltip.Provider delay={500} closeDelay={0} timeout={300}>
+      {children}
+    </BaseTooltip.Provider>
+  );
+}
+
+export function Tooltip({
+  label,
+  side = "top",
+  children,
+}: {
+  label: ReactNode;
+  side?: Side;
+  /** A single element that accepts a ref and event handlers. */
+  children: ReactElement;
+}) {
+  if (!label) return children;
+  return (
+    <BaseTooltip.Root>
+      <BaseTooltip.Trigger render={children} />
+      <BaseTooltip.Portal>
+        <BaseTooltip.Positioner side={side} sideOffset={6} className={cx(styles.positioner)}>
+          <BaseTooltip.Popup
+            className={(state) =>
+              cx(
+                styles.popup,
+                state.transitionStatus === "starting" && styles.hidden,
+                state.transitionStatus === "ending" && styles.hidden,
+              )
+            }
+          >
+            {label}
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    </BaseTooltip.Root>
+  );
+}
+
+const styles = stylex.create({
+  positioner: {
+    zIndex: z.tooltip,
+  },
+  popup: {
+    boxSizing: "border-box",
+    maxWidth: 260,
+    paddingInline: space.md,
+    paddingBlock: space.xs,
+    borderRadius: radius.sm,
+    backgroundColor: colors.text,
+    color: colors.textInverse,
+    fontFamily: type.sans,
+    fontSize: type.xs,
+    lineHeight: 1.4,
+    boxShadow: "0 4px 12px rgba(24, 24, 27, 0.16)",
+    transformOrigin: "var(--transform-origin)",
+    transitionProperty: "opacity, transform",
+    transitionDuration: "100ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  hidden: {
+    opacity: 0,
+    transform: "scale(0.96)",
+  },
+});

package/src/ui/popup.ts

@@ -0,0 +1,216 @@
+// packages/studio/src/ui/popup.ts
+//
+// Shared look for Base UI floating surfaces (Select, Menu, Combobox, Popover)
+// so every dropdown in the app renders the same. Components pass these to
+// `stylex.props` and combine them with their own local styles.
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+
+const hover = "@media (hover: hover)";
+
+/**
+ * Base UI passes component state to `className` functions. Use this to map
+ * state flags (highlighted, selected…) onto StyleX styles.
+ */
+/** Same argument type `stylex.props` accepts (styles, falsy, nested arrays). */
+export type StyleArg = stylex.StyleXArray<
+  | (null | undefined | stylex.CompiledStyles)
+  | boolean
+  | Readonly<[stylex.CompiledStyles, stylex.InlineStyles]>
+>;
+
+export function cx(...styles: StyleArg[]) {
+  return stylex.props(...styles).className ?? "";
+}
+
+export const popup = stylex.create({
+  positioner: {
+    zIndex: z.popover,
+    outline: "none",
+  },
+  surface: {
+    boxSizing: "border-box",
+    maxHeight: "var(--available-height)",
+    overflowY: "auto",
+    paddingBlock: space.xs,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: 10,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    fontSize: type.xs,
+    boxShadow: "0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06)",
+    outline: "none",
+    transformOrigin: "var(--transform-origin)",
+    transitionProperty: "opacity, transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  surfaceStarting: {
+    opacity: 0,
+    transform: "scale(0.96)",
+  },
+  surfaceEnding: {
+    opacity: 0,
+    transform: "scale(0.98)",
+  },
+  item: {
+    display: "flex",
+    minHeight: 30,
+    alignItems: "center",
+    gap: space.sm,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    borderWidth: 0,
+    borderRadius: radius.md,
+    marginInline: space.xs,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontSize: type.xs,
+    textAlign: "left",
+    cursor: "default",
+    userSelect: "none",
+    outline: "none",
+  },
+  itemHighlighted: {
+    backgroundColor: colors.bgHover,
+  },
+  itemSelected: {
+    color: colors.text,
+  },
+  /** Footer / action rows that should look like items but are real buttons. */
+  action: {
+    boxSizing: "border-box",
+    alignSelf: "stretch",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    fontSize: type.xs,
+    fontWeight: 400,
+    color: colors.text,
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: -2,
+    },
+    ":disabled": {
+      opacity: 0.55,
+      cursor: "not-allowed",
+    },
+  },
+  itemDisabled: {
+    opacity: 0.5,
+  },
+  itemIndicator: {
+    display: "inline-flex",
+    width: 14,
+    flexShrink: 0,
+    justifyContent: "center",
+    color: colors.accent,
+  },
+  itemMeta: {
+    marginLeft: "auto",
+    flexShrink: 0,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  groupLabel: {
+    margin: 0,
+    paddingInline: space.lg,
+    paddingBlock: space.sm,
+    fontSize: type.xs,
+    fontWeight: 500,
+    color: colors.textMuted,
+  },
+  separator: {
+    height: 1,
+    marginBlock: space.xs,
+    backgroundColor: colors.border,
+  },
+  empty: {
+    margin: 0,
+    paddingInline: space.lg,
+    // Combobox.Empty stays mounted while items exist; collapse it then.
+    paddingBlock: { default: space.md, ":empty": 0 },
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  quietInput: {
+    display: "block",
+    width: "100%",
+    boxSizing: "border-box",
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    paddingInline: space.lg,
+    paddingBlock: space.md,
+    fontFamily: type.sans,
+    fontSize: type.sm,
+    outline: "none",
+    ":focus": {
+      outline: "none",
+    },
+    ":focus-visible": {
+      outline: "none",
+    },
+    "::placeholder": {
+      color: colors.textMuted,
+    },
+  },
+  searchInput: {
+    display: "block",
+    width: "100%",
+    boxSizing: "border-box",
+    marginTop: `calc(${space.xs} * -1)`,
+    marginBottom: space.xs,
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    backgroundColor: "transparent",
+    color: colors.text,
+    paddingInline: space.lg,
+    paddingBlock: space.md,
+    fontFamily: type.sans,
+    fontSize: type.sm,
+    outline: "none",
+    ":focus": {
+      outline: "none",
+    },
+    ":focus-visible": {
+      outline: "none",
+    },
+    "::placeholder": {
+      color: colors.textMuted,
+    },
+  },
+});
+
+export type TransitionStatus = "starting" | "ending" | "idle" | undefined;
+
+/** True while a Base UI popup is animating in or out. */
+export function isTransitioning(status: TransitionStatus) {
+  return status === "starting" || status === "ending";
+}
+
+/** Wraps a popup `className` so Base UI's open/close transitions animate. */
+export function popupClassName(
+  state: { transitionStatus?: TransitionStatus },
+  ...extra: StyleArg[]
+) {
+  return cx(
+    popup.surface,
+    state.transitionStatus === "starting" && popup.surfaceStarting,
+    state.transitionStatus === "ending" && popup.surfaceEnding,
+    ...extra,
+  );
+}

package/src/workspace/permissions.ts

@@ -0,0 +1,17 @@
+// packages/studio/src/workspace/permissions.ts
+
+export function canManageMembers(role: string): boolean {
+  return role === "admin";
+}
+
+export function canManageWorkspace(role: string): boolean {
+  return role === "admin";
+}
+
+export function canDevelop(role: string): boolean {
+  return role === "admin" || role === "developer";
+}
+
+export function canPublish(role: string): boolean {
+  return role === "admin" || role === "developer" || role === "editor";
+}

package/src/workspace/types.ts

@@ -0,0 +1,12 @@
+// packages/studio/src/workspace/types.ts
+import type { Dispatch, SetStateAction } from "react";
+import type { SchemaPayload, WorkspaceDetail } from "../api";
+
+export type WorkspaceOutletContext = {
+  workspace: WorkspaceDetail;
+  models: SchemaPayload["models"];
+  blocks: NonNullable<SchemaPayload["blocks"]>;
+  richtext: NonNullable<SchemaPayload["richtext"]>;
+  setWorkspace: Dispatch<SetStateAction<WorkspaceDetail | null>>;
+  reload: () => Promise<void>;
+};

package/src/workspace-path.ts

@@ -0,0 +1,98 @@
+// packages/studio/src/workspace-path.ts
+export function workspaceHomePath(slug: string) {
+  return `/${slug}`;
+}
+
+export function contentTypePath(slug: string, type: string) {
+  return `/${slug}/content/${type}`;
+}
+
+export function contentDocPath(
+  slug: string,
+  type: string,
+  docSlug: string,
+  locale: string,
+  defaultLocale: string,
+) {
+  const path = `/${slug}/content/${type}/${docSlug}`;
+  if (locale && locale !== defaultLocale) {
+    return `${path}?locale=${encodeURIComponent(locale)}`;
+  }
+  return path;
+}
+
+export function settingsPath(slug: string, page: string) {
+  return `/${slug}/settings/${page}`;
+}
+
+export function githubConnectPath(slug: string) {
+  return `/${slug}/github`;
+}
+
+const APP_ROOTS = new Set(["workspaces", "account", "invite", "__ui"]);
+
+export function cmsWorkspaceSlug(pathname: string): string | null {
+  if (pathname === "/") return null;
+  const legacy = pathname.match(/^\/workspaces\/([^/]+)/);
+  if (legacy) {
+    const id = decodeURIComponent(legacy[1]!);
+    if (id === "new") return null;
+    return id;
+  }
+  const match = pathname.match(/^\/([^/]+)/);
+  if (!match) return null;
+  const first = decodeURIComponent(match[1]!);
+  if (APP_ROOTS.has(first)) return null;
+  return first;
+}
+
+export function rewriteLegacyWorkspacePath(
+  pathname: string,
+  slug: string,
+  defaultLocale = "en",
+): string {
+  const rest = pathname.match(/^\/workspaces\/[^/]+(?:\/(.*))?$/)?.[1] ?? "";
+  if (!rest) return workspaceHomePath(slug);
+  const types = rest.match(/^types\/([^/]+)\/?$/);
+  if (types) return contentTypePath(slug, decodeURIComponent(types[1]!));
+  const docs = rest.match(/^docs\/([^/]+)\/([^/]+)\/([^/]+)\/?$/);
+  if (docs) {
+    return contentDocPath(
+      slug,
+      decodeURIComponent(docs[2]!),
+      decodeURIComponent(docs[3]!),
+      decodeURIComponent(docs[1]!),
+      defaultLocale,
+    );
+  }
+  if (rest === "github" || rest.startsWith("settings/")) {
+    return `/${slug}/${rest.replace(/\/$/, "")}`;
+  }
+  return workspaceHomePath(slug);
+}
+
+export function defaultLocaleOf(locales: string[] | null | undefined) {
+  return locales?.[0] || "en";
+}
+
+export function isWorkspaceEditorPath(pathname: string) {
+  return /\/content\/[^/]+\/[^/]+\/?$/.test(pathname);
+}
+
+export function isWorkspaceTypeIndexPath(pathname: string) {
+  return /\/content\/[^/]+\/?$/.test(pathname) && !isWorkspaceEditorPath(pathname);
+}
+
+export function isWorkspaceSettingsPath(pathname: string) {
+  return /\/settings(?:\/|$)/.test(pathname) || /\/github\/?$/.test(pathname);
+}
+
+export function isGithubSettingsPath(pathname: string) {
+  return /\/(?:settings\/)?github\/?$/.test(pathname);
+}
+
+/** Full-bleed pages that hide the app sidebar. */
+export function isOrgPickerPath(pathname: string) {
+  const path = pathname.replace(/\/$/, "") || "/";
+  return path === "/invite";
+}