@backmatter/studio 0.0.7 → 0.0.8

package/dist/dashboard.js

@@ -1,5 +1,5 @@
-import { A as a, i as s } from "./chunks/dashboard-DCHRI0WD.js";
-import { w as t, Q as f } from "./chunks/status-bar-action-wj1KZ51m.js";
+import { A as a, i as s } from "./chunks/dashboard-bNp6AbKE.js";
+import { w as t, Q as f } from "./chunks/status-bar-action-C0fsAWvD.js";
 export {
   a as DashboardApp,
   t as configureStudio,

package/dist/index.js

@@ -1,11 +1,11 @@
 import { jsx as r, jsxs as l } from "react/jsx-runtime";
 import { useLayoutEffect as I, useEffect as u, useRef as C, useState as S } from "react";
-import { i as L, T, E as N, C as M, z, A as D, D as O, F as g, H as x, I as v, L as _, M as A, N as B, O as F, w as P, Q as w, R as V, U as j, f as q, V as G, W as m, X as b } from "./chunks/status-bar-action-wj1KZ51m.js";
-import { Y as Se } from "./chunks/status-bar-action-wj1KZ51m.js";
-import { f as H, s as W, g as $, R as K, h as X, i as Y, L as Q, w as J, T as E, r as Z } from "./chunks/WorkspaceRoutes-DXzdWqN3.js";
+import { i as L, T, E as N, C as M, z, A as D, D as O, F as g, H as x, I as v, L as _, M as A, N as B, O as F, w as P, Q as w, R as V, U as j, f as q, V as G, W as m, X as b } from "./chunks/status-bar-action-C0fsAWvD.js";
+import { Y as Se } from "./chunks/status-bar-action-C0fsAWvD.js";
+import { f as H, s as W, g as $, R as K, h as X, i as Y, L as Q, w as J, T as E, r as Z } from "./chunks/WorkspaceRoutes-DVpUOaMV.js";
 import { u as ee, S as te } from "./chunks/define-studio-BYtYDGLX.js";
 import { d as Pe } from "./chunks/define-studio-BYtYDGLX.js";
-import { E as ne } from "./chunks/EmbedPublishPage-88VsmOhi.js";
+import { E as ne } from "./chunks/EmbedPublishPage-CtIlaeGO.js";
 const p = {
   accent: "var(--x11n7hvk)",
   accentHover: "var(--x1vnpaut)",

package/dist/site-widget.js

@@ -1,7 +1,7 @@
 import { jsxs as p, Fragment as B, jsx as n } from "react/jsx-runtime";
 import { useRef as P, useState as k, useEffect as N, useId as V, useLayoutEffect as j } from "react";
-import { S as H, m as J, P as K, k as T, l as Q, o as O, b as Y, G as _, q as Z, t as X, u as ee, v as te, w as ne, x as re, p as ae, y as oe, T as ie, E as se, C as le, z as ce, A as ue, D as de, F as D, H as M, I as z, J as F, K as pe, L as fe } from "./chunks/status-bar-action-wj1KZ51m.js";
-import { E as he } from "./chunks/EmbedPublishPage-88VsmOhi.js";
+import { S as H, m as J, P as K, k as T, l as Q, o as O, b as Y, G as _, q as Z, t as X, u as ee, v as te, w as ne, x as re, p as ae, y as oe, T as ie, E as se, C as le, z as ce, A as ue, D as de, F as D, H as M, I as z, J as F, K as pe, L as fe } from "./chunks/status-bar-action-C0fsAWvD.js";
+import { E as he } from "./chunks/EmbedPublishPage-CtIlaeGO.js";
 const I = "backmatter-preview-frame", A = "#d97706";
 function me() {
   return /* @__PURE__ */ p("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, children: [

package/dist/studio.css

@@ -11,6 +11,10 @@
     inset: 0;
   }
 
+  .x184nht {
+    inset: var(--x1o7ezzp);
+  }
+
   .xkdpibf {
     margin: -1px;
   }
@@ -23,10 +27,6 @@
     padding: 0;
   }
 
-  .x1ruevkc {
-    padding: 6px;
-  }
-
   .xk7greg {
     padding: var(--x1ft7ks7);
   }
@@ -35,10 +35,6 @@
     padding: var(--x1lzhbes);
   }
 
-  .x12u58kn {
-    padding: var(--x1o7ezzp);
-  }
-
   .xue2yr4 {
     padding: var(--x1uiwg42);
   }
@@ -65,10 +61,6 @@
     border-color: #ffffff1a;
   }
 
-  .x1gb98jh {
-    border-color: #ffffff29;
-  }
-
   .xe0g8ez {
     border-color: #ffffffb8;
   }
@@ -165,6 +157,10 @@
     border-width: 3px;
   }
 
+  .x1oeqjk2 {
+    flex: 16rem;
+  }
+
   .x98rzlu {
     flex: 1;
   }
@@ -465,6 +461,10 @@
     align-items: flex-start;
   }
 
+  .x7a106z {
+    align-items: start;
+  }
+
   .x1qjc9v5 {
     align-items: stretch;
   }
@@ -537,6 +537,10 @@
     animation-timing-function: linear;
   }
 
+  .x1plog1 {
+    aspect-ratio: 1;
+  }
+
   .x1fx9mx7 {
     backdrop-filter: blur(28px) saturate(1.15);
   }
@@ -1022,6 +1026,10 @@
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   }
 
+  .x10vl0y4 {
+    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  }
+
   .xl56j7k {
     justify-content: center;
   }
@@ -1551,15 +1559,7 @@
     .x1aquc0h.x1aquc0h {
       animation-name: none;
     }
-  }
-
-  @media (hover: hover) {
-    .x1m2avzc.x1m2avzc {
-      background-color: #ffffff29;
-    }
-  }
 
-  @media (prefers-reduced-motion: reduce) {
     .xphioz4.xphioz4 {
       background-image: none;
     }
@@ -1701,10 +1701,6 @@
     border-right-style: solid;
   }
 
-  .xgfja2r {
-    border-right-width: 0;
-  }
-
   .xs1s249 {
     border-right-width: 1px;
   }
@@ -2093,6 +2089,10 @@
     min-height: 32px;
   }
 
+  .xu0aao5 {
+    min-height: 36px;
+  }
+
   .x1gg8mnh {
     min-height: 44px;
   }
@@ -2133,6 +2133,10 @@
     min-width: 200px;
   }
 
+  .x1f4i7yj {
+    min-width: 252px;
+  }
+
   .x18n5i07 {
     min-width: 300px;
   }
@@ -2289,10 +2293,6 @@
     right: var(--x1lzhbes);
   }
 
-  .x1swmuje {
-    right: var(--xvc7yhn);
-  }
-
   .x13vifvy {
     top: 0;
   }
@@ -2325,10 +2325,6 @@
     top: var(--x1y1rrep);
   }
 
-  .x1s7yh1o {
-    top: var(--xvc7yhn);
-  }
-
   .xh8yej3 {
     width: 100%;
   }
@@ -2369,6 +2365,10 @@
     width: 22px;
   }
 
+  .xafpxmx {
+    width: 240px;
+  }
+
   .xvy4d1p {
     width: 24px;
   }
@@ -2445,6 +2445,10 @@
     width: auto;
   }
 
+  .x12pdk5b {
+    width: calc(min(360px, 38vw) - 48px);
+  }
+
   .x3bfboh {
     width: min(360px, 38vw);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.100",
-    "@backmatter/core": "^0.0.24",
+    "@backmatter/core": "^0.0.25",
     "@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/chrome/AppShell.tsx

@@ -1,5 +1,5 @@
 // packages/studio/src/chrome/AppShell.tsx
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useLocation, useSearchParams } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import { ChatBar } from "../chat/ChatBar";
@@ -9,12 +9,13 @@ import { colors } from "../styles/tokens.stylex";
 import { TooltipProvider } from "../ui/Tooltip";
 import { cmsWorkspaceSlug, isOrgPickerPath } from "../workspace-path";
 import { AppSidebar } from "./AppSidebar";
+import { WorkspaceRail } from "./ContentExplorerSidebar";
 import { CommandPalette } from "./CommandPalette";
 import { FloatingUserMenu } from "./UserMenu";
 import { EditorActionsProvider } from "./EditorActionsContext";
 import { EditorFocusProvider } from "./EditorFocusContext";
 import { EditorStatusProvider } from "./EditorStatusContext";
-import { WorkspaceNavProvider } from "./WorkspaceNavContext";
+import { WorkspaceNavProvider, useWorkspaceNav } from "./WorkspaceNavContext";
 import { installParentChatHotkey } from "./hotkeys";
 import { WorkspaceStatusBar } from "./WorkspaceStatusBar";
 
@@ -40,28 +41,43 @@ function AppShellInner({ children }: { children: React.ReactNode }) {
   // Mount from the URL, not from nav. Waiting on nav remounts this tree when
   // WorkspaceLayout publishes (and later clears) nav, which loops loading.
   const workspaceKey = cmsWorkspaceSlug(location.pathname);
+  const workspaceNav = useWorkspaceNav();
   const orgPicker = isOrgPickerPath(location.pathname);
   const embed = searchParams.get("embed") === "1";
+  const [treeHost, setTreeHost] = useState<HTMLDivElement | null>(null);
+  const inWorkspace = Boolean(workspaceKey && !embed && !orgPicker);
 
   useEffect(() => {
     if (!embed) return;
     return installParentChatHotkey();
   }, [embed]);
 
+  const chat =
+    workspaceKey && !embed ? (
+      <ChatSessionScope>
+        <ChatBar />
+        <ChatPanel />
+      </ChatSessionScope>
+    ) : null;
+
   const shell = (
     <div {...stylex.props(styles.shell)}>
       {workspaceKey && !embed ? <WorkspaceStatusBar workspaceId={workspaceKey} /> : null}
       <div {...stylex.props(styles.body)}>
-        {orgPicker || embed ? null : <AppSidebar />}
-        <main {...stylex.props(styles.main)}>{children}</main>
+        {orgPicker || embed ? null : inWorkspace ? (
+          <WorkspaceRail workspace={workspaceNav} treeHost={treeHost} />
+        ) : (
+          <AppSidebar />
+        )}
+        <div {...stylex.props(styles.stage)}>
+          <div {...stylex.props(styles.stageBody)}>
+            <div ref={setTreeHost} {...stylex.props(styles.treeHost)} />
+            <main {...stylex.props(styles.main)}>{children}</main>
+          </div>
+          {chat}
+        </div>
       </div>
       {orgPicker ? <FloatingUserMenu /> : null}
-      {workspaceKey && !embed ? (
-        <ChatSessionScope>
-          <ChatBar />
-          <ChatPanel />
-        </ChatSessionScope>
-      ) : null}
       {embed ? null : <CommandPalette />}
     </div>
   );
@@ -89,6 +105,27 @@ const styles = stylex.create({
     flex: 1,
     overflow: "hidden",
   },
+  stage: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  stageBody: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    overflow: "hidden",
+  },
+  treeHost: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flexShrink: 0,
+  },
   main: {
     display: "flex",
     minWidth: 0,

package/src/chrome/AppSidebar.tsx

@@ -1,30 +1,18 @@
 // packages/studio/src/chrome/AppSidebar.tsx
-import { useLocation } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import { useReplicaState } from "../replica/useReplica";
 import { colors, space, type } from "../styles/tokens.stylex";
-import { useWorkspaceNav } from "./WorkspaceNavContext";
 import { NavItem } from "./NavItem";
 import { UserMenu } from "./UserMenu";
-import { cmsWorkspaceSlug, isWorkspaceMediaPath, workspaceHomePath } from "../workspace-path";
+import { workspaceHomePath } from "../workspace-path";
 import { DocIcon } from "./icons";
-import { ContentExplorerSidebar } from "./ContentExplorerSidebar";
-export function AppSidebar() {
-  const location = useLocation();
-  const workspaceNav = useWorkspaceNav();
-  const inWorkspace = Boolean(cmsWorkspaceSlug(location.pathname));
-  const railOnly = inWorkspace && isWorkspaceMediaPath(location.pathname);
 
+/** Workspace list. Inside a workspace the explorer frame owns the rail. */
+export function AppSidebar() {
   return (
-    <aside {...stylex.props(styles.aside, railOnly && styles.asideRail)}>
-      {inWorkspace && workspaceNav ? (
-        <div {...stylex.props(styles.workspaceNav)}>
-          <ContentExplorerSidebar workspace={workspaceNav} />
-        </div>
-      ) : (
-        <WorkspaceListNav />
-      )}
-      <SidebarFooter compact={railOnly} />
+    <aside {...stylex.props(styles.aside)}>
+      <WorkspaceListNav />
+      <SidebarFooter />
     </aside>
   );
 }
@@ -68,21 +56,15 @@ function SectionLabel({ children }: { children: React.ReactNode }) {
   return <p {...stylex.props(styles.section)}>{children}</p>;
 }
 
-function SidebarFooter({ compact = false }: { compact?: boolean }) {
+function SidebarFooter() {
   return (
-    <div {...stylex.props(styles.footer, compact && styles.footerCompact)}>
-      <UserMenu compact={compact} />
+    <div {...stylex.props(styles.footer)}>
+      <UserMenu />
     </div>
   );
 }
 
 const styles = stylex.create({
-  workspaceNav: {
-    display: "flex",
-    minHeight: 0,
-    flex: 1,
-    flexDirection: "column",
-  },
   aside: {
     display: "flex",
     height: "100%",
@@ -95,10 +77,6 @@ const styles = stylex.create({
     borderRightColor: colors.border,
     backgroundColor: colors.bgSurface,
   },
-  asideRail: {
-    width: "48px",
-    minWidth: "48px",
-  },
   brand: {
     flexShrink: 0,
     borderBottomWidth: 1,
@@ -174,7 +152,4 @@ const styles = stylex.create({
     borderTopColor: colors.border,
     padding: space.md,
   },
-  footerCompact: {
-    padding: space.sm,
-  },
 });