@backmatter/studio 0.0.15 → 0.0.16

package/dist/studio.css

@@ -27,6 +27,10 @@
     padding: 0;
   }
 
+  .x1i3ajwb {
+    padding: 2px;
+  }
+
   .xk7greg {
     padding: var(--x1ft7ks7);
   }
@@ -35,6 +39,10 @@
     padding: var(--x1lzhbes);
   }
 
+  .x12u58kn {
+    padding: var(--x1o7ezzp);
+  }
+
   .xue2yr4 {
     padding: var(--x1uiwg42);
   }
@@ -149,10 +157,18 @@
     border-width: 0;
   }
 
+  .xvndefy {
+    border-width: 1.5px;
+  }
+
   .xmkeg23 {
     border-width: 1px;
   }
 
+  .xdh2fpr {
+    border-width: 2px;
+  }
+
   .x9r2w2z {
     border-width: 3px;
   }
@@ -209,6 +225,10 @@
     gap: var(--xvc7yhn);
   }
 
+  .x1osaytk {
+    grid-column: 1 / -1;
+  }
+
   .x1xohano {
     inset-block: -5px;
   }
@@ -245,10 +265,6 @@
     margin-inline: auto;
   }
 
-  .x1nmszcn {
-    margin-inline: var(--x1ft7ks7);
-  }
-
   .x1agxhcx {
     margin-inline: var(--x1o7ezzp);
   }
@@ -289,10 +305,18 @@
     padding-block: 2px;
   }
 
+  .xf4egzd {
+    padding-block: 3px;
+  }
+
   .x62rkhy {
     padding-block: 48px;
   }
 
+  .x12ulsxz {
+    padding-block: 4px;
+  }
+
   .x1t0vds8 {
     padding-block: 6px;
   }
@@ -481,6 +505,10 @@
     align-items: stretch;
   }
 
+  .xpvyfi4 {
+    align-self: flex-end;
+  }
+
   .xqcrz7y {
     align-self: flex-start;
   }
@@ -501,6 +529,10 @@
     animation-duration: .7s;
   }
 
+  .xemfg65 {
+    animation-duration: .8s;
+  }
+
   .x1m9vv7p {
     animation-duration: 1.2s;
   }
@@ -525,6 +557,10 @@
     animation-name: x1tbvpe3-B;
   }
 
+  .x1aerksh {
+    animation-name: x1wc8ddo-B;
+  }
+
   .xt3aoqv {
     animation-name: x1ymhlvw-B;
   }
@@ -617,6 +653,10 @@
     background-color: #fafafa;
   }
 
+  .x83z2og {
+    background-color: #fff;
+  }
+
   .xtwfq29 {
     background-color: currentColor;
   }
@@ -773,6 +813,10 @@
     box-shadow: 0 16px 48px #18181b33;
   }
 
+  .x1dej7w9 {
+    box-shadow: 0 1px 2px #00000014;
+  }
+
   .xtpupu6 {
     box-shadow: 0 1px 2px #18181b33;
   }
@@ -921,6 +965,14 @@
     display: inline-flex;
   }
 
+  .x1t1x2f9 {
+    flex-basis: 0%;
+  }
+
+  .xdl72j9 {
+    flex-basis: auto;
+  }
+
   .xdt5ytf {
     flex-direction: column;
   }
@@ -933,6 +985,10 @@
     flex-grow: 0;
   }
 
+  .x1iyjqo2 {
+    flex-grow: 1;
+  }
+
   .x2lah0s {
     flex-shrink: 0;
   }
@@ -965,10 +1021,22 @@
     font-size: .92em;
   }
 
+  .x1j6dyjg {
+    font-size: 11px;
+  }
+
+  .xfifm61 {
+    font-size: 12px;
+  }
+
   .xneq65o {
     font-size: 28px;
   }
 
+  .x1s3cmhv {
+    font-size: 32px;
+  }
+
   .xdzlmae {
     font-size: 8px;
   }
@@ -1029,6 +1097,10 @@
     grid-template-columns: 1fr 1fr;
   }
 
+  .x19ohwaf {
+    grid-template-columns: 1fr minmax(0, 520px) 1fr;
+  }
+
   .x1d5a2s6 {
     grid-template-columns: 7rem 1fr;
   }
@@ -1061,6 +1133,14 @@
     justify-content: space-between;
   }
 
+  .x1qab1bc {
+    justify-self: end;
+  }
+
+  .x1lqcxt8 {
+    justify-self: start;
+  }
+
   .xjat59b {
     letter-spacing: -.01em;
   }
@@ -1117,6 +1197,10 @@
     line-height: 1.55;
   }
 
+  .x1dbl2gt {
+    line-height: 1.6;
+  }
+
   .xo5v014 {
     line-height: 1;
   }
@@ -1195,6 +1279,10 @@
     outline-color: var(--x1nzi8h4);
   }
 
+  .x1e6zrab {
+    outline-color: var(--xz3qvk5);
+  }
+
   .x1ewu8gn {
     outline-offset: 3px;
   }
@@ -1203,6 +1291,10 @@
     outline-style: solid;
   }
 
+  .x1qgsegg {
+    outline-width: 1px;
+  }
+
   .x1de99jn {
     outline-width: 2px;
   }
@@ -1255,6 +1347,10 @@
     row-gap: 40px;
   }
 
+  .xeq4nuv {
+    tab-size: 2;
+  }
+
   .x2b8uid {
     text-align: center;
   }
@@ -1542,6 +1638,14 @@
     outline-width: 2px;
   }
 
+  .x1ke7wyk:disabled {
+    color: var(--xw4dauw);
+  }
+
+  .x14xq8pj:disabled {
+    color: var(--xz3qvk5);
+  }
+
   .xtgyt42:disabled {
     cursor: default;
   }
@@ -1550,6 +1654,10 @@
     cursor: not-allowed;
   }
 
+  .x1bq4at4:disabled {
+    opacity: .3;
+  }
+
   .x2wzlov:disabled {
     opacity: .35;
   }
@@ -1605,6 +1713,10 @@
       animation-duration: 0s;
     }
 
+    .xy1mfq8.xy1mfq8 {
+      animation-duration: 2.4s;
+    }
+
     .x1aquc0h.x1aquc0h {
       animation-name: none;
     }
@@ -1657,6 +1769,14 @@
   }
 
   @media (hover: hover) {
+    .x1avvw9k.x1avvw9k:hover:not(:disabled) {
+      background-color: var(--xeg52a);
+    }
+
+    .x1caf6yr.x1caf6yr:hover:not(:disabled) {
+      color: var(--x5y0tk9);
+    }
+
     .x1e7vmwq.x1e7vmwq:hover [data-folder-action] {
       opacity: 1;
     }
@@ -1762,6 +1882,10 @@
     border-right-width: 1px;
   }
 
+  .x17ycamp {
+    border-top-color: var(--x11n7hvk);
+  }
+
   .xmzxa0n {
     border-top-color: var(--xz3qvk5);
   }
@@ -2030,6 +2154,10 @@
     max-height: 180px;
   }
 
+  .x1hkcv85 {
+    max-height: 200px;
+  }
+
   .x1983irj {
     max-height: 220px;
   }
@@ -2042,6 +2170,10 @@
     max-height: 280px;
   }
 
+  .x1h9acoj {
+    max-height: min(320px,var(--available-height));
+  }
+
   .x10todyo {
     max-height: min(52vh, 440px);
   }
@@ -2078,6 +2210,10 @@
     max-width: 220px;
   }
 
+  .x16em4ew {
+    max-width: 240px;
+  }
+
   .x14lruf5 {
     max-width: 260px;
   }
@@ -2098,6 +2234,10 @@
     max-width: 440px;
   }
 
+  .x1pfbilc {
+    max-width: 460px;
+  }
+
   .xh9uqaf {
     max-width: 60%;
   }
@@ -2122,6 +2262,10 @@
     max-width: 920px;
   }
 
+  .xyzno7u {
+    max-width: 960px;
+  }
+
   .x2lwn1j {
     min-height: 0;
   }
@@ -2174,6 +2318,10 @@
     min-height: 44px;
   }
 
+  .x1ujl9rh {
+    min-height: 84px;
+  }
+
   .x562ti3 {
     min-height: 8rem;
   }
@@ -2210,6 +2358,10 @@
     min-width: 200px;
   }
 
+  .x12rczxh {
+    min-width: 220px;
+  }
+
   .x1f4i7yj {
     min-width: 252px;
   }
@@ -2222,10 +2374,6 @@
     min-width: 48px;
   }
 
-  .x9hgts1 {
-    min-width: 52px;
-  }
-
   .xzhy1st {
     min-width: 8rem;
   }
@@ -2246,6 +2394,10 @@
     overflow-y: auto;
   }
 
+  .x10wlt62 {
+    overflow-y: hidden;
+  }
+
   .x18d9i69 {
     padding-bottom: 0;
   }
@@ -2254,6 +2406,10 @@
     padding-bottom: 2px;
   }
 
+  .xq1608w {
+    padding-bottom: 36px;
+  }
+
   .x2f2w3t {
     padding-bottom: calc(var(--x1uiwg42) + 12px);
   }
@@ -2374,6 +2530,10 @@
     right: var(--x1lzhbes);
   }
 
+  .x1gki5z1 {
+    right: var(--x1o7ezzp);
+  }
+
   .x13vifvy {
     top: 0;
   }
@@ -2458,6 +2618,10 @@
     width: 24px;
   }
 
+  .x1hfn5x7 {
+    width: 260px;
+  }
+
   .x23j0i4 {
     width: 26px;
   }
@@ -2482,12 +2646,12 @@
     width: 32px;
   }
 
-  .x14qfxbe {
-    width: 36px;
+  .x1cvmir6 {
+    width: 360px;
   }
 
-  .xwl9fdd {
-    width: 380px;
+  .x14qfxbe {
+    width: 36px;
   }
 
   .x1q22l7i {
@@ -2772,6 +2936,16 @@
   }
 }
 
+@keyframes x1wc8ddo-B {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @keyframes x1n620qs-B {
   0%, 100% {
     transform: translateX(.001%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.100",
-    "@backmatter/core": "^0.0.28",
+    "@backmatter/core": "^0.0.33",
     "@base-ui/react": "^1.6.0",
     "@central-icons-react/round-outlined-radius-2-stroke-1.5": "1.2.15",
     "@dnd-kit/abstract": "^0.5.0",

package/src/WorkspaceRoutes.tsx

@@ -3,7 +3,7 @@
 // a site Studio mounts the same tree under its base path.
 import { Route } from "react-router";
 import { WorkspaceLayout } from "./pages/WorkspaceLayout";
-import { WorkspaceHomeRedirect } from "./pages/WorkspaceHomeRedirect";
+import { WorkspaceHomePage } from "./pages/WorkspaceHomePage";
 import { TypeDocsPage } from "./pages/TypeDocsPage";
 import { SettingsGeneralPage } from "./pages/SettingsGeneralPage";
 import { SettingsUsagePage } from "./pages/SettingsUsagePage";
@@ -15,6 +15,7 @@ import { SettingsUsersPage } from "./pages/SettingsUsersPage";
 import { GithubConnectPage } from "./pages/GithubConnectPage";
 import { DocEditorPage } from "./pages/DocEditorPage";
 import { MediaGalleryPage } from "./pages/MediaGalleryPage";
+import CodeSessionPage from "./pages/CodeSessionPage";
 
 /**
  * Returns `<Route>` elements. Spread the result inside a `<Routes>`; react-router
@@ -23,8 +24,10 @@ import { MediaGalleryPage } from "./pages/MediaGalleryPage";
 export function workspaceRoutes() {
   return (
     <Route path="/:workspaceSlug" element={<WorkspaceLayout />}>
-      <Route index element={<WorkspaceHomeRedirect />} />
+      <Route index element={<WorkspaceHomePage />} />
+      <Route path="content" element={<TypeDocsPage />} />
       <Route path="content/:type" element={<TypeDocsPage />} />
+      <Route path="code" element={<CodeSessionPage />} />
       <Route element={<SettingsLayout />}>
         <Route path="settings" element={<SettingsIndexRedirect />} />
         <Route path="settings/general" element={<SettingsGeneralPage />} />

package/src/api.ts

@@ -23,6 +23,7 @@ async function api<T>(path: string, init?: RequestInit): Promise<T> {
     const body = (await res.json().catch(() => ({}))) as {
       error?: string;
       details?: string[];
+      paths?: string[];
     };
     if (res.status === 401 || res.status === 426) reportUnauthorized(res.status, body.error);
     const code = body.error ?? `request failed: ${res.status}`;
@@ -33,7 +34,7 @@ async function api<T>(path: string, init?: RequestInit): Promise<T> {
     const err = new Error(`${code}${detailSuffix}`) as ApiError;
     err.status = res.status;
     err.code = body.error;
-    err.details = body.details;
+    err.details = body.details ?? body.paths;
     throw err;
   }
   return res.json() as Promise<T>;
@@ -371,6 +372,8 @@ export type SchemaPayload = {
     singleton?: boolean;
     indexSlug?: string;
     format?: "mdx" | "page";
+    external?: boolean;
+    template?: string;
     fields: Record<string, SchemaField>;
   }>;
   blocks?: BlockSnapshot[];
@@ -400,10 +403,21 @@ export type GitChange = {
   type: string;
   slug: string;
   status: ChangeStatus;
+  /** Working-tree edit time. Present on git status; absent when derived from the document list. */
+  updatedAt?: string;
 };
 
 export type GitHead = { sha: string; updatedAt: string };
 
+/** A commit on the branch, newest first. `cms` means Studio wrote it. */
+export type RecentCommit = {
+  sha: string;
+  message: string;
+  author: string;
+  committedAt: string;
+  cms: boolean;
+};
+
 /** `git status` for the current user on their checked-out branch. */
 export type GitState = {
   defaultBranch: string;
@@ -413,6 +427,10 @@ export type GitState = {
   githubError?: "installation_missing" | "github_list_failed" | null;
   head: GitHead | null;
   changes: GitChange[];
+  /** Last git status list, including deletions and edit times. */
+  fetchedChanges?: GitChange[];
+  /** Latest commits on the branch, once git status has been fetched. */
+  recentCommits?: RecentCommit[];
 };
 
 export function countConflicts(state: Pick<GitState, "changes"> | null | undefined) {
@@ -466,6 +484,32 @@ export function commitWorkspace(workspaceId: string, message?: string) {
   });
 }
 
+export type CodeSessionEditList = {
+  files: Array<{ path: string; deleted: boolean }>;
+  skipped: Array<{ path: string; reason: string }>;
+  foldPending: boolean;
+};
+
+export function fetchCodeSessionEdits(workspaceId: string, sessionId: string) {
+  return api<CodeSessionEditList>(
+    `/workspaces/${workspaceId}/code-sessions/${sessionId}/edits`,
+  );
+}
+
+export function commitCodeSessionEdits(
+  workspaceId: string,
+  sessionId: string,
+  message?: string,
+) {
+  return api<{ ok: true; commitSha: string; foldErrors: string[] }>(
+    `/workspaces/${workspaceId}/code-sessions/${sessionId}/commit`,
+    {
+      method: "POST",
+      body: JSON.stringify(message?.trim() ? { message: message.trim() } : {}),
+    },
+  );
+}
+
 /** Default commit message the server uses when none is given (mirrored for the placeholder). */
 export function defaultCommitMessage(changes: GitChange[]) {
   if (changes.length === 1) {
@@ -701,6 +745,8 @@ export type ChatThread = {
   workspaceId: string;
   userId: string;
   branch: string;
+  /** Null for an editor thread; a code session id for a session thread. */
+  codeSessionId?: string | null;
   title: string;
   createdAt: string;
   updatedAt: string;
@@ -728,10 +774,11 @@ export type ChatChangeSummary = {
   workspaceId: string;
   userId: string;
   branch: string;
-  resourceKind: "content";
+  resourceKind: "content" | "code";
+  path: string | null;
   type: string;
   slug: string;
-  op: "write" | "create";
+  op: "write" | "create" | "delete";
   beforeSource: ContentSource | null;
   diff: ChatChangeDiff | null;
   status: ChatChangeStatus;
@@ -740,14 +787,23 @@ export type ChatChangeSummary = {
   summary?: string;
 };
 
-export function fetchThreads(workspaceId: string) {
-  return api<{ threads: ChatThread[] }>(`/workspaces/${workspaceId}/ai/threads`);
+export function fetchThreads(workspaceId: string, codeSessionId?: string) {
+  const query = codeSessionId
+    ? `?codeSessionId=${encodeURIComponent(codeSessionId)}`
+    : "";
+  return api<{ threads: ChatThread[] }>(`/workspaces/${workspaceId}/ai/threads${query}`);
 }
 
-export function createThread(workspaceId: string, title?: string) {
+export function createThread(
+  workspaceId: string,
+  opts?: { title?: string; codeSessionId?: string },
+) {
+  const body: { title?: string; codeSessionId?: string } = {};
+  if (opts?.title) body.title = opts.title;
+  if (opts?.codeSessionId) body.codeSessionId = opts.codeSessionId;
   return api<{ thread: ChatThread }>(`/workspaces/${workspaceId}/ai/threads`, {
     method: "POST",
-    body: JSON.stringify(title ? { title } : {}),
+    body: JSON.stringify(body),
   });
 }
 

package/src/chat/ChangeCard.tsx

@@ -28,8 +28,14 @@ export function ChangeCard({
 }) {
   const [expanded, setExpanded] = useState(false);
   const nav = useWorkspaceNav();
-  const label = `${change.type}/${change.slug}`;
-  const to = nav ? contentDocPath(nav.workspaceSlug, change.type, change.slug) : "#";
+  const label =
+    change.resourceKind === "code"
+      ? (change.path ?? "")
+      : `${change.type}/${change.slug}`;
+  const to =
+    change.resourceKind === "code" || !nav
+      ? "#"
+      : contentDocPath(nav.workspaceSlug, change.type, change.slug);
   const status = change.status;
 
   return (