@backmatter/studio 0.0.6 → 0.0.7

package/src/chrome/UserMenu.tsx

@@ -16,7 +16,7 @@ export function FloatingUserMenu() {
   );
 }
 
-export function UserMenu({ quiet = false }: { quiet?: boolean }) {
+export function UserMenu({ quiet = false, compact = false }: { quiet?: boolean; compact?: boolean }) {
   const { email, onLogout } = useAppChrome();
   const location = useLocation();
   const onAccount = location.pathname.replace(/\/$/, "") === "/account";
@@ -28,15 +28,20 @@ export function UserMenu({ quiet = false }: { quiet?: boolean }) {
         className={cx(
           styles.trigger,
           quiet && styles.triggerQuiet,
+          compact && styles.triggerCompact,
           onAccount && styles.triggerActive,
         )}
       >
-        <span {...stylex.props(styles.email)}>{email}</span>
+        {compact ? (
+          <span {...stylex.props(styles.initial)}>{email.trim().charAt(0).toUpperCase() || "?"}</span>
+        ) : (
+          <span {...stylex.props(styles.email)}>{email}</span>
+        )}
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner
           side="top"
-          align="start"
+          align={compact ? "center" : "start"}
           sideOffset={6}
           className={cx(popup.positioner)}
         >
@@ -104,6 +109,16 @@ const styles = stylex.create({
       },
     },
   },
+  triggerCompact: {
+    justifyContent: "center",
+    paddingInline: 0,
+    paddingBlock: 0,
+    minHeight: "32px",
+  },
+  initial: {
+    fontSize: type.sm,
+    fontWeight: 600,
+  },
   triggerQuiet: {
     width: "auto",
     maxWidth: "220px",

package/src/chrome/WorkspaceNavContext.tsx

@@ -14,6 +14,7 @@ export type WorkspaceNav = {
   workspaceName: string;
   role: string;
   defaultLocale: string;
+  locales: string[];
   contentTypes: string[];
   contentModels: ContentTypeNav[];
   siteUrls: string[];

package/src/chrome/command-palette-icons.tsx

@@ -0,0 +1,152 @@
+// packages/studio/src/chrome/command-palette-icons.tsx
+import {
+  ApiIcon,
+  DocIcon,
+  GearIcon,
+  GithubIcon,
+  GitBranchIcon,
+  OrgIcon,
+  PlugIcon,
+  SchemaIcon,
+} from "./icons";
+import {
+  FileIcon,
+  HistoryIcon,
+  PlusIcon,
+  SparkIcon,
+  UndoIcon,
+} from "../chat/icons";
+
+export type PaletteIconId =
+  | "save"
+  | "commit"
+  | "pull"
+  | "chat"
+  | "chat-new"
+  | "chat-history"
+  | "revert"
+  | "workspaces"
+  | "workspace"
+  | "workspace-new"
+  | "account"
+  | "theme"
+  | "logout"
+  | "ui-kit"
+  | "settings-general"
+  | "settings-github"
+  | "settings-schema"
+  | "connectors"
+  | "content-type"
+  | "document";
+
+function SaveIcon({ size = 15 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M4.5 2.5h5.2L12 4.8V13a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+      <path d="M6 13.5h4M8 7v3.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function LogOutIcon({ size = 15 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M6 3.5H4.5a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1H6"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+      <path
+        d="M9 8h5.5M12.25 5.75 14.5 8l-2.25 2.25"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ThemeIcon({ size = 15 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="3.25" stroke="currentColor" strokeWidth="1.25" />
+      <path
+        d="M8 1.8v1.5M8 12.7v1.5M1.8 8h1.5M12.7 8h1.5M3.6 3.6l1.05 1.05M11.35 11.35l1.05 1.05M3.6 12.4l1.05-1.05M11.35 4.65l1.05-1.05"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function PullIcon({ size = 15 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.5 12.5v-2.8h-2.8M8 8v5.5M5.25 10.75 8 13.5l2.75-2.75"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function PaletteIcon({ id, size = 15 }: { id: PaletteIconId; size?: number }) {
+  switch (id) {
+    case "save":
+      return <SaveIcon size={size} />;
+    case "commit":
+      return <GitBranchIcon />;
+    case "pull":
+      return <PullIcon size={size} />;
+    case "chat":
+      return <SparkIcon size={size} />;
+    case "chat-new":
+      return <PlusIcon size={size} />;
+    case "chat-history":
+      return <HistoryIcon size={size} />;
+    case "revert":
+      return <UndoIcon size={size} />;
+    case "workspaces":
+    case "workspace":
+      return <OrgIcon />;
+    case "workspace-new":
+      return <PlusIcon size={size} />;
+    case "account":
+      return <GearIcon />;
+    case "theme":
+      return <ThemeIcon size={size} />;
+    case "logout":
+      return <LogOutIcon size={size} />;
+    case "ui-kit":
+      return <ApiIcon />;
+    case "settings-general":
+      return <GearIcon />;
+    case "settings-github":
+      return <GithubIcon size={size} />;
+    case "settings-schema":
+      return <SchemaIcon />;
+    case "connectors":
+      return <PlugIcon />;
+    case "content-type":
+      return <DocIcon />;
+    case "document":
+      return <FileIcon size={size} />;
+  }
+}

package/src/chrome/content-path-tree.ts

@@ -0,0 +1,95 @@
+// packages/studio/src/chrome/content-path-tree.ts
+
+const CONTENT_ROOT = "content/";
+
+/** Drop the shared `content/` prefix for sidebar trees (panel is already labeled Content). */
+export function treePathFromRepo(repoPath: string): string {
+  return repoPath.startsWith(CONTENT_ROOT)
+    ? repoPath.slice(CONTENT_ROOT.length)
+    : repoPath;
+}
+
+export type PathTreeFile = {
+  kind: "file";
+  name: string;
+  repoPath: string;
+  href: string;
+  active: boolean;
+  dirty: boolean;
+};
+
+export type PathTreeFolder = {
+  kind: "folder";
+  name: string;
+  pathKey: string;
+  children: PathTreeNode[];
+};
+
+export type PathTreeNode = PathTreeFile | PathTreeFolder;
+
+type Level = {
+  folders: Map<string, Level>;
+  files: PathTreeFile[];
+};
+
+function compareName(a: string, b: string) {
+  return a.localeCompare(b, undefined, { sensitivity: "base" });
+}
+
+function levelToNodes(level: Level, pathKey: string): PathTreeNode[] {
+  const nodes: PathTreeNode[] = [];
+  for (const name of [...level.folders.keys()].sort(compareName)) {
+    const child = level.folders.get(name)!;
+    const nextKey = pathKey ? `${pathKey}/${name}` : name;
+    nodes.push({
+      kind: "folder",
+      name,
+      pathKey: nextKey,
+      children: levelToNodes(child, nextKey),
+    });
+  }
+  const files = [...level.files].sort((a, b) => compareName(a.name, b.name));
+  nodes.push(...files);
+  return nodes;
+}
+
+/** Merge repo-relative file paths into a nested folder tree (VS Code–style). */
+export function buildPathTree(files: PathTreeFile[]): PathTreeNode[] {
+  const root: Level = { folders: new Map(), files: [] };
+  for (const file of files) {
+    const parts = file.repoPath.split("/").filter(Boolean);
+    if (parts.length === 0) {
+      root.files.push(file);
+      continue;
+    }
+    if (parts.length === 1) {
+      root.files.push({ ...file, name: parts[0]! });
+      continue;
+    }
+    const dirs = parts.slice(0, -1);
+    const leafName = parts[parts.length - 1]!;
+    let level = root;
+    let pathKey = "";
+    for (const dir of dirs) {
+      pathKey = pathKey ? `${pathKey}/${dir}` : dir;
+      let next = level.folders.get(dir);
+      if (!next) {
+        next = { folders: new Map(), files: [] };
+        level.folders.set(dir, next);
+      }
+      level = next;
+    }
+    level.files.push({ ...file, name: leafName });
+  }
+  return levelToNodes(root, "");
+}
+
+export function folderKeysOnPathTo(repoPath: string): string[] {
+  const parts = repoPath.split("/").filter(Boolean);
+  if (parts.length <= 1) return [];
+  const keys: string[] = [];
+  for (let i = 1; i < parts.length; i++) {
+    keys.push(parts.slice(0, i).join("/"));
+  }
+  return keys;
+}

package/src/chrome/content-repo-path.ts

@@ -0,0 +1,52 @@
+// packages/studio/src/chrome/content-repo-path.ts
+import { IMPLICIT_SINGLETON_SLUG, repoPathFromModel } from "@backmatter/core";
+import type { DocListItem } from "../api";
+import { modelHasLocale, type ContentTypeNav } from "./content-type-groups";
+
+export function docRepoPath(
+  model: ContentTypeNav,
+  doc: Pick<DocListItem, "locale" | "slug">,
+  defaultLocale: string,
+): string {
+  const locale = modelHasLocale(model.path)
+    ? doc.locale || defaultLocale
+    : undefined;
+  return repoPathFromModel(model, locale, doc.slug);
+}
+
+export function singletonRepoPath(
+  model: ContentTypeNav,
+  defaultLocale: string,
+): string {
+  return docRepoPath(
+    model,
+    { slug: IMPLICIT_SINGLETON_SLUG, locale: defaultLocale },
+    defaultLocale,
+  );
+}
+
+export function repoPathBasename(repoPath: string): string {
+  const parts = repoPath.split("/");
+  return parts[parts.length - 1] ?? repoPath;
+}
+
+export function fileExtFromRepoPath(repoPath: string): string {
+  const base = repoPathBasename(repoPath);
+  const dot = base.lastIndexOf(".");
+  return dot >= 0 ? base.slice(dot + 1).toLowerCase() : "";
+}
+
+/** Label for a row in the content tree (repo-relative filename). */
+export function docTreeLabel(
+  model: ContentTypeNav,
+  doc: Pick<DocListItem, "locale" | "slug">,
+  defaultLocale: string,
+): string {
+  const repoPath = docRepoPath(model, doc, defaultLocale);
+  const name = repoPathBasename(repoPath);
+  const locale = doc.locale || defaultLocale;
+  if (modelHasLocale(model.path) && locale !== defaultLocale) {
+    return `${locale}/${name}`;
+  }
+  return name;
+}

package/src/chrome/explorer-icons.tsx

@@ -0,0 +1,89 @@
+// packages/studio/src/chrome/explorer-icons.tsx
+// Central Icons — round outlined, 2px corner radius, 1.5px stroke
+// Package: @central-icons-react/round-outlined-radius-2-stroke-1.5
+// Install requires CENTRAL_LICENSE_KEY (see .env.example).
+import {
+  IconChevronDownSmall,
+  IconChevronRightSmall,
+  IconBrackets2,
+  IconFileText,
+  IconFiles,
+  IconFolder1,
+  IconFolderOpen,
+  IconGit,
+  IconHistory,
+  IconImages1,
+  IconListBullets,
+  IconMagnifyingGlass,
+  IconPageAdd,
+  IconPlusMedium,
+  IconSettingsGear2,
+} from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
+import type { CentralIconBaseProps } from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
+import type { ComponentType } from "react";
+
+const TREE = 16;
+const TREE_ACTION = 16;
+const RAIL = 18;
+const HEADER = 14;
+
+function Central({
+  icon: Icon,
+  size,
+}: {
+  icon: ComponentType<CentralIconBaseProps>;
+  size: number;
+}) {
+  return <Icon size={size} ariaHidden />;
+}
+
+export function ExplorerTwistie({ open }: { open: boolean }) {
+  const Icon = open ? IconChevronDownSmall : IconChevronRightSmall;
+  return <Central icon={Icon} size={TREE} />;
+}
+
+export function ExplorerFolderIcon({ open }: { open: boolean }) {
+  const Icon = open ? IconFolderOpen : IconFolder1;
+  return <Central icon={Icon} size={TREE} />;
+}
+
+export function ExplorerFileIcon({ ext }: { ext?: string }) {
+  if (ext === "json") return <Central icon={IconBrackets2} size={TREE} />;
+  return <Central icon={IconFileText} size={TREE} />;
+}
+
+export function ExplorerRailFilesIcon() {
+  return <Central icon={IconFiles} size={RAIL} />;
+}
+
+export function ExplorerRailSearchIcon() {
+  return <Central icon={IconMagnifyingGlass} size={RAIL} />;
+}
+
+export function ExplorerRailSourceControlIcon() {
+  return <Central icon={IconGit} size={RAIL} />;
+}
+
+export function ExplorerRailHistoryIcon() {
+  return <Central icon={IconHistory} size={RAIL} />;
+}
+
+export function ExplorerRailMediaIcon() {
+  return <Central icon={IconImages1} size={RAIL} />;
+}
+
+export function ExplorerRailSettingsIcon() {
+  return <Central icon={IconSettingsGear2} size={RAIL} />;
+}
+
+export function ExplorerHeaderNewFileIcon() {
+  return <Central icon={IconPageAdd} size={HEADER} />;
+}
+
+export function ExplorerTreeNewFileIcon() {
+  return <Central icon={IconPlusMedium} size={TREE_ACTION} />;
+}
+
+export function ExplorerHeaderListIcon() {
+  return <Central icon={IconListBullets} size={HEADER} />;
+}

package/src/chrome/folder-create-context.ts

@@ -0,0 +1,147 @@
+// packages/studio/src/chrome/folder-create-context.ts
+import { contentExtFromPath } from "@backmatter/core";
+import type { ContentTypeNav } from "./content-type-groups";
+import { modelHasLocale } from "./content-type-groups";
+import { treePathFromRepo } from "./content-path-tree";
+import type { PathTreeFolder, PathTreeNode } from "./content-path-tree";
+import { docRepoPath, repoPathBasename } from "./content-repo-path";
+
+const SLUG_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+export type FolderCreateContext = {
+  type: string;
+  locale: string;
+  ext: string;
+  /** JSON landing pages need `blocks: []` in frontmatter on create. */
+  pageFormat: boolean;
+};
+
+export function isValidContentSlug(slug: string): boolean {
+  return SLUG_RE.test(slug);
+}
+
+/** Strip optional extension; basename only. */
+export function slugFromNewFileName(name: string, expectedExt: string): string {
+  const trimmed = name.trim();
+  if (!trimmed) return "";
+  const base = repoPathBasename(trimmed);
+  const dot = base.lastIndexOf(".");
+  if (dot >= 0) {
+    const ext = base.slice(dot + 1).toLowerCase();
+    if (ext === expectedExt.toLowerCase()) {
+      return base.slice(0, dot);
+    }
+  }
+  return base;
+}
+
+export function folderPathKeyForModel(
+  model: ContentTypeNav,
+  locale: string | undefined,
+  defaultLocale: string,
+): string {
+  const loc = modelHasLocale(model.path)
+    ? locale || defaultLocale
+    : undefined;
+  const repo = docRepoPath(
+    model,
+    { slug: "new", locale: loc ?? "" },
+    defaultLocale,
+  );
+  const tree = treePathFromRepo(repo);
+  const parts = tree.split("/").filter(Boolean);
+  parts.pop();
+  return parts.join("/");
+}
+
+export function resolveFolderCreateContext(
+  pathKey: string,
+  models: ContentTypeNav[],
+  locales: string[],
+  defaultLocale: string,
+): FolderCreateContext | null {
+  const matches: FolderCreateContext[] = [];
+  for (const model of models) {
+    if (model.singleton) continue;
+    const ext = contentExtFromPath(model.path);
+    const pageFormat = ext === "json";
+    if (modelHasLocale(model.path)) {
+      for (const locale of locales) {
+        const key = folderPathKeyForModel(model, locale, defaultLocale);
+        if (key === pathKey) {
+          matches.push({ type: model.type, locale, ext, pageFormat });
+        }
+      }
+    } else {
+      const key = folderPathKeyForModel(model, undefined, defaultLocale);
+      if (key === pathKey) {
+        matches.push({ type: model.type, locale: "", ext, pageFormat });
+      }
+    }
+  }
+  if (matches.length !== 1) return null;
+  return matches[0]!;
+}
+
+function compareName(a: string, b: string) {
+  return a.localeCompare(b, undefined, { sensitivity: "base" });
+}
+
+function insertFolderPath(nodes: PathTreeNode[], segments: string[], pathKey: string): PathTreeNode[] {
+  if (segments.length === 0) return nodes;
+  const [head, ...rest] = segments;
+  const name = head!;
+  const nextKey = pathKey ? `${pathKey}/${name}` : name;
+  const idx = nodes.findIndex(
+    (n) => n.kind === "folder" && n.name === name,
+  );
+  if (idx >= 0) {
+    const folder = nodes[idx] as PathTreeFolder;
+    const children = insertFolderPath(folder.children, rest, nextKey);
+    if (children === folder.children) return nodes;
+    const next = [...nodes];
+    next[idx] = { ...folder, children };
+    return next;
+  }
+  const child: PathTreeFolder = {
+    kind: "folder",
+    name,
+    pathKey: nextKey,
+    children: rest.length
+      ? insertFolderPath([], rest, nextKey)
+      : [],
+  };
+  const next = [...nodes, child];
+  next.sort((a, b) => {
+    if (a.kind !== b.kind) return a.kind === "folder" ? -1 : 1;
+    return compareName(a.name, b.name);
+  });
+  return next;
+}
+
+/** Ensure each model's content directory exists as a folder (even with no files yet). */
+export function withModelFolderPlaceholders(
+  tree: PathTreeNode[],
+  models: ContentTypeNav[],
+  locales: string[],
+  defaultLocale: string,
+): PathTreeNode[] {
+  const keys = new Set<string>();
+  for (const model of models) {
+    if (model.singleton) continue;
+    if (modelHasLocale(model.path)) {
+      for (const locale of locales) {
+        keys.add(folderPathKeyForModel(model, locale, defaultLocale));
+      }
+    } else {
+      keys.add(folderPathKeyForModel(model, undefined, defaultLocale));
+    }
+  }
+  let out = tree;
+  for (const key of [...keys].sort(compareName)) {
+    if (!key) continue;
+    const segments = key.split("/").filter(Boolean);
+    out = insertFolderPath(out, segments, "");
+  }
+  return out;
+}

package/src/pages/BlockSettingsDialog.tsx

@@ -9,6 +9,7 @@ import { Button } from "../ui/Button";
 import { Field } from "../ui/Field";
 import { Input, Textarea } from "../ui/Input";
 import { cx, isTransitioning } from "../ui/popup";
+import { MediaFieldInput } from "./MediaFieldInput";
 
 function fieldLabel(name: string, field: SchemaField) {
   if ("label" in field && typeof field.label === "string" && field.label) return field.label;
@@ -155,6 +156,9 @@ function FieldControl({
       <CustomInput name={name} field={field} value={value} readOnly={readOnly} onChange={onChange} />
     );
   }
+  if (field.kind === "media") {
+    return <MediaFieldInput name={name} value={value} readOnly={readOnly} onChange={onChange} />;
+  }
   if (field.kind === "boolean") {
     return (
       <input

package/src/pages/CliAuthorizePage.tsx

@@ -0,0 +1,43 @@
+// packages/studio/src/pages/CliAuthorizePage.tsx
+import { useState } from "react";
+import { useSearchParams } from "react-router";
+import { approveCliLogin } from "../api";
+import { Button } from "../ui/Button";
+import { Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+
+export function CliAuthorizePage() {
+  const [params] = useSearchParams();
+  const id = params.get("id") ?? "";
+  const [status, setStatus] = useState<"idle" | "done" | "error">("idle");
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <Stack gap="lg">
+      <Text as="h1" size="xl" weight="medium">
+        Allow the CLI
+      </Text>
+      <Text tone="muted">
+        This connects the Backmatter CLI on your computer to your account.
+      </Text>
+      {status === "done" ? <Text>You can return to the terminal.</Text> : null}
+      {error ? <Text tone="danger">{error}</Text> : null}
+      {status === "done" ? null : (
+        <Button
+          disabled={!id}
+          onClick={() => {
+            setError(null);
+            void approveCliLogin(id)
+              .then(() => setStatus("done"))
+              .catch((err: unknown) => {
+                setStatus("error");
+                setError(err instanceof Error ? err.message : "Could not approve");
+              });
+          }}
+        >
+          Allow
+        </Button>
+      )}
+    </Stack>
+  );
+}