@backmatter/studio 0.0.8 → 0.0.10

package/src/site-dashboard-href.ts

@@ -0,0 +1,21 @@
+// packages/studio/src/site-dashboard-href.ts
+import { contentDocPath } from "./workspace-path";
+
+export type DashboardDocRef = {
+  locale: string;
+  type: string;
+  slug: string;
+};
+
+/** Dashboard URL for the current site document, or the dashboard origin when unknown. */
+export function resolveDashboardOpenHref(
+  dashboardOrigin: string | undefined,
+  doc: DashboardDocRef | null,
+  workspaceSlug: string | null,
+  defaultLocale = "en",
+): string | undefined {
+  if (!dashboardOrigin?.trim()) return undefined;
+  const base = dashboardOrigin.replace(/\/+$/, "");
+  if (!doc || !workspaceSlug) return base;
+  return `${base}${contentDocPath(workspaceSlug, doc.type, doc.slug, doc.locale, defaultLocale)}`;
+}

package/src/site-devbar-overlay-inject.ts

@@ -0,0 +1,15 @@
+// packages/studio/src/site-devbar-overlay-inject.ts
+// Injected with the widget JS so page/publish menus stay styled when the host
+// loads only `site-widget.js` or the CSS chunk is stale.
+import overlayCss from "./site-devbar-overlay.css?inline";
+
+const STYLE_ID = "backmatter-devbar-overlay-styles";
+
+export function ensureDevbarOverlayStyles(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = overlayCss;
+  document.head.appendChild(style);
+}

package/src/site-devbar-overlay.css

@@ -0,0 +1,217 @@
+/* packages/studio/src/site-devbar-overlay.css
+   Floating devbar menus (page, publish, settings) in the light DOM. */
+
+.backmatter-devbar-overlay {
+  --panel: #ffffff;
+  --line: #e7e7e4;
+  --line2: #d8d8d4;
+  --hover: #f3f3f1;
+  --fg: #17171a;
+  --fg2: #5d5d62;
+  --fg3: #8e8e93;
+  --shadow-live: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px -8px rgba(0, 0, 0, 0.18);
+  position: fixed;
+  z-index: 2147483002;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel);
+  color: var(--fg);
+  box-shadow: var(--shadow-live);
+  font-family: "Geist Sans", Geist, ui-sans-serif, system-ui, sans-serif;
+  font-size: 12.5px;
+  font-weight: 500;
+  line-height: 1.3;
+  -webkit-font-smoothing: antialiased;
+}
+
+.backmatter-devbar-overlay.backmatter-devbar-menu {
+  width: 240px;
+  max-height: min(320px, calc(100dvh - 96px));
+  overflow: auto;
+  padding: 6px;
+}
+
+.backmatter-devbar-overlay.backmatter-devbar-menu-pages {
+  width: min(280px, calc(100vw - 24px));
+}
+
+.backmatter-devbar-overlay.backmatter-devbar-publish-panel {
+  width: min(320px, calc(100vw - 24px));
+  padding: 0;
+  overflow: hidden;
+  max-height: min(420px, calc(100dvh - 96px));
+}
+
+.backmatter-devbar-overlay.backmatter-devbar-settings {
+  width: min(328px, calc(100vw - 24px));
+  max-height: min(480px, calc(100dvh - 96px));
+  padding: 8px;
+  border-radius: 16px;
+  overflow: auto;
+}
+
+.backmatter-devbar-overlay input {
+  width: 100%;
+  height: 32px;
+  margin: 2px 0 6px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: #fff;
+  color: var(--fg);
+  font: inherit;
+  font-size: 16px;
+  cursor: text;
+  user-select: text;
+}
+
+.backmatter-devbar-overlay button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-option > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-current {
+  background: var(--hover);
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-meta {
+  margin-left: auto;
+  flex-shrink: 0;
+  color: var(--fg3);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-note {
+  margin: 0;
+  padding: 8px;
+  color: var(--fg2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-note-error {
+  color: #b91c1c;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-menu-split {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--line);
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-settings-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 28px;
+  padding: 4px 12px 8px;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-settings-kicker {
+  color: var(--fg3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-settings-place {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--fg3);
+  font-size: 12px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-settings-row,
+.backmatter-devbar-overlay .backmatter-devbar-settings-action,
+.backmatter-devbar-overlay button.backmatter-devbar-settings-action {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-settings-rule {
+  height: 1px;
+  margin: 6px 12px;
+  background: var(--line);
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-segment {
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 2px;
+  border-radius: 9px;
+  background: var(--hover);
+}
+
+.backmatter-devbar-overlay button.backmatter-devbar-segment-btn {
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 7px;
+  color: var(--fg2);
+  font-size: 12.5px;
+}
+
+.backmatter-devbar-overlay button.backmatter-devbar-segment-on {
+  background: #fff;
+  color: var(--fg);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.backmatter-devbar-overlay .backmatter-devbar-kbd {
+  margin-left: auto;
+  color: var(--fg3);
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+@media (hover: hover) {
+  .backmatter-devbar-overlay .backmatter-devbar-option:hover:not(:disabled) {
+    background: var(--hover);
+  }
+  .backmatter-devbar-overlay button.backmatter-devbar-settings-action:hover {
+    background: var(--hover);
+  }
+}

package/src/site-pointer.ts

@@ -205,7 +205,7 @@ function positionPointerOutline(outline: HTMLDivElement, target: Element) {
 }
 
 function isSiteChrome(el: Element): boolean {
-  return el.closest("[data-backmatter-panel], .backmatter-devbar, [data-backmatter-pointer]") !== null;
+  return el.closest("[data-backmatter-panel], .backmatter-devbar, [data-backmatter-devbar], [data-backmatter-pointer]") !== null;
 }
 
 /** The page element a stored pointer refers to. Chat chrome is ignored. */

package/src/site-publish-menu.tsx

@@ -0,0 +1,33 @@
+// packages/studio/src/site-publish-menu.tsx
+// Publish popover for the on-site bar (StyleX). Loaded on demand so site-bar tests stay StyleX-free.
+import { createPortal } from "react-dom";
+import type { Ref } from "react";
+import { EmbedPublishPage } from "./pages/EmbedPublishPage";
+import { DEVBAR_CLASS, DEVBAR_OVERLAY_CLASS, devbarOverlayRoot } from "./site-bar";
+
+export function PublishMenu({
+  menuRef,
+  workspaceId,
+  onStatus,
+  onPublished,
+}: {
+  menuRef: Ref<HTMLDivElement | null>;
+  workspaceId: string;
+  onStatus?: (status: { changeCount: number; conflictCount: number }) => void;
+  onPublished?: () => void;
+}) {
+  const root = devbarOverlayRoot();
+  if (!root) return null;
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="dialog"
+      aria-label="Publish"
+      className={`backmatter-studio ${DEVBAR_OVERLAY_CLASS} ${DEVBAR_CLASS}-menu ${DEVBAR_CLASS}-publish-panel`}
+      data-backmatter-panel=""
+    >
+      <EmbedPublishPage workspaceId={workspaceId} onStatus={onStatus} onPublished={onPublished} />
+    </div>,
+    root,
+  );
+}

package/src/site-widget-styles.ts

@@ -0,0 +1,7 @@
+// packages/studio/src/site-widget-styles.ts
+// On-site widget stylesheet entry: scoped resets only. Full studio chrome
+// (fonts, prose-ui, katex) lives in styles.ts → dist/studio.css.
+import "@fontsource/geist-sans/500.css";
+import "@fontsource/geist-mono/500.css";
+import "./shell-resets.css";
+import "./site-devbar-overlay.css";

package/src/site-widget.tsx

@@ -1,8 +1,9 @@
 // packages/studio/src/site-widget.tsx
-// The on-site bar: Live/Preview, the current page, the branch, then Agent and Publish. The host page mounts this
+import "./site-widget-styles";
+// The on-site bar: Enter/Exit preview, the current page, then Agent and Publish. The host page mounts this
 // after the site session verifies. Calls go through the host's same-origin
 // CMS proxy.
-import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
 import * as stylex from "@stylexjs/stylex";
 import { ChatPanel } from "./chat/ChatPanel";
 import { chatPointerFromGrab } from "./chat/chat-context";
@@ -12,8 +13,7 @@ import { isPanelVisible } from "./chat/chat-state";
 import { DOC_CHANGED_EVENT, EditorFocusProvider, useEditorFocus } from "./chrome/EditorFocusContext";
 import { matchAppHotkey } from "./chrome/hotkeys";
 import { EmbedPublishPage } from "./pages/EmbedPublishPage";
-import { PreviewFrame } from "./preview-frame";
-import { DEVBAR_CLASS, SiteBar } from "./site-bar";
+import { SiteBar } from "./site-bar";
 import { installSitePointer } from "./site-pointer";
 import { lightTheme } from "./styles/themes";
 import { configureStudio } from "./studio-config";
@@ -45,7 +45,11 @@ export type SiteWidgetProps = {
   previewEntryPath?: string;
   /** Full-viewport preview ring and top pill (see `devBar.previewFrame` in host config). */
   previewFrame?: boolean;
+  previewFrameRadius?: number;
   version?: string;
+  /** Studio origin. The settings menu opens this in the current tab. */
+  dashboardHref?: string;
+  onSignOut?: () => void;
 };
 
 export function SiteWidget({
@@ -61,7 +65,10 @@ export function SiteWidget({
   proxyPath = "/api/backmatter/cms",
   previewEntryPath,
   previewFrame,
+  previewFrameRadius,
   version,
+  dashboardHref,
+  onSignOut,
 }: SiteWidgetProps) {
   const expiredRef = useRef(onSessionExpired);
   expiredRef.current = onSessionExpired;
@@ -85,7 +92,11 @@ export function SiteWidget({
   const [chatOpen, setChatOpen] = useState(false);
   const [publishOpen, setPublishOpen] = useState(false);
   const [changeCount, setChangeCount] = useState(0);
+  const [publishAnchor, setPublishAnchor] = useState<DOMRect | null>(null);
   const label = doc ? `${doc.type}/${doc.slug}` : "No document";
+  const onPublishAnchor = useCallback((rect: DOMRect | null) => {
+    setPublishAnchor(rect);
+  }, []);
 
   function wrote() {
     onDocChanged?.();
@@ -102,6 +113,23 @@ export function SiteWidget({
     return () => document.removeEventListener("keydown", onKey, true);
   }, []);
 
+  useEffect(() => {
+    if (!publishOpen) return;
+    function onPointer(event: PointerEvent) {
+      for (const node of event.composedPath()) {
+        if (node instanceof HTMLElement) {
+          if (node.matches("[data-backmatter-panel], [data-backmatter-devbar]")) return;
+        }
+        if (node instanceof ShadowRoot && node.host instanceof HTMLElement) {
+          if (node.host.hasAttribute("data-backmatter-devbar")) return;
+        }
+      }
+      setPublishOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointer);
+    return () => document.removeEventListener("pointerdown", onPointer);
+  }, [publishOpen]);
+
   const bar = (
     <SiteBar
       label={label}
@@ -116,14 +144,18 @@ export function SiteWidget({
       previewEntryPath={previewEntryPath}
       onExit={onExit}
       onEnterPreview={onEnterPreview}
+      frame={Boolean(previewFrame)}
+      frameRadius={previewFrameRadius}
       onToggleChat={() => setChatOpen((open) => !open)}
       onTogglePublish={() => setPublishOpen((open) => !open)}
+      dashboardHref={dashboardHref}
+      onSignOut={onSignOut}
+      onPublishAnchor={onPublishAnchor}
     />
   );
 
   return (
     <>
-      {previewFrame ? <PreviewFrame /> : null}
       {doc ? (
         <TooltipProvider>
           <EditorFocusProvider>
@@ -138,8 +170,8 @@ export function SiteWidget({
           </EditorFocusProvider>
         </TooltipProvider>
       ) : null}
-      {doc ? (
-        <div data-backmatter-panel="" hidden={!publishOpen} style={publishStyle}>
+      {doc && publishOpen ? (
+        <div data-backmatter-panel="" style={publishPanelStyle(publishAnchor)}>
           <EmbedPublishPage
             workspaceId={doc.workspaceId}
             onStatus={({ changeCount: count }) => setChangeCount(count)}
@@ -218,7 +250,7 @@ function SitePointer({ doc }: { doc: SiteWidgetDoc }) {
 
   useEffect(() => {
     const pointer = installSitePointer(document, {
-      bar: () => document.querySelector(`.${DEVBAR_CLASS}`),
+      bar: () => document.querySelector("[data-backmatter-devbar]"),
       ignore: (target) => {
         if (!(target instanceof Element)) return true;
         if (target.closest("[data-backmatter-panel]")) return true;
@@ -251,16 +283,24 @@ function SitePointer({ doc }: { doc: SiteWidgetDoc }) {
   return null;
 }
 
-const publishStyle: CSSProperties = {
-  position: "fixed",
-  right: "max(16px, env(safe-area-inset-right, 0px))",
-  bottom: "calc(48px + env(safe-area-inset-bottom, 0px))",
-  zIndex: 2147483001,
-  width: "min(320px, calc(100vw - 32px))",
-  maxHeight: "min(420px, calc(100vh - 80px))",
-  overflow: "auto",
-  border: "1px solid #e4e4e7",
-  borderRadius: 10,
-  background: "#ffffff",
-  boxShadow: "0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06)",
-};
+function publishPanelStyle(anchor: DOMRect | null): CSSProperties {
+  const insetRight = anchor
+    ? Math.max(16, window.innerWidth - anchor.right)
+    : 16;
+  const bottom = anchor
+    ? Math.max(52, window.innerHeight - anchor.top + 8)
+    : 52;
+  return {
+    position: "fixed",
+    right: `max(${insetRight}px, env(safe-area-inset-right, 0px))`,
+    bottom: `calc(${bottom}px + env(safe-area-inset-bottom, 0px))`,
+    zIndex: 2147483001,
+    width: "min(320px, calc(100vw - 32px))",
+    maxHeight: "min(420px, calc(100vh - 80px))",
+    overflow: "auto",
+    border: "1px solid #e4e4e7",
+    borderRadius: 12,
+    background: "#ffffff",
+    boxShadow: "0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06)",
+  };
+}

package/src/studio-prose-ui.css

@@ -0,0 +1,39 @@
+/* packages/studio/src/studio-prose-ui.css
+   Document editor prose surface — full studio only, not the on-site widget. */
+
+.prose-ui {
+  --p-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+  --p-font-family-heading: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+  --p-font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
+    monospace;
+  --p-body-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+  --p-h1-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+  --p-h2-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+  --p-h3-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+  --p-h4-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+  --p-h5-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+  --p-h6-font-family: "Geist Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+.prose-ui img {
+  max-width: 100%;
+  height: auto;
+}
+
+.prose-ui > :first-child {
+  margin-top: 0;
+}
+
+.prose-ui > :last-child {
+  margin-bottom: 0;
+}
+
+.prose-ui [data-body-block] :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose-ui [data-body-block] :focus,
+.prose-ui [data-body-block] :focus-visible {
+  outline: none;
+}

package/src/theme/ThemeProvider.tsx

@@ -101,10 +101,13 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     [preference, resolved, setPreference, cyclePreference],
   );
 
+  const themeProps = stylex.props(theme, styles.root);
+
   return (
     <ThemeContext.Provider value={value}>
       <div
-        {...stylex.props(theme, styles.root)}
+        {...themeProps}
+        className={[themeProps.className, "backmatter-studio"].filter(Boolean).join(" ")}
       >
         {children}
       </div>

package/src/workspace-path.ts

@@ -97,16 +97,14 @@ export function isWorkspaceContentPath(pathname: string) {
 }
 
 /**
- * Where the content rail icon goes.
- * Already on the file tree: stay put (null).
- * On a document: the type's file tree.
+ * 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.
  */
 export function contentRailHref(pathname: string, slug: string): string | null {
   if (!isWorkspaceContentPath(pathname)) return workspaceHomePath(slug);
-  const doc = pathname.match(/\/content\/([^/]+)\/([^/?]+)/);
-  if (!doc) return null;
-  return contentTypePath(slug, decodeURIComponent(doc[1]!));
+  return null;
 }
 
 export function isWorkspaceSettingsPath(pathname: string) {
@@ -122,3 +120,9 @@ export function isOrgPickerPath(pathname: string) {
   const path = pathname.replace(/\/$/, "") || "/";
   return path === "/invite";
 }
+
+/** CLI approval is a full-screen form, not a workspace. */
+export function isCliAuthorizePath(pathname: string) {
+  const path = pathname.replace(/\/$/, "") || "/";
+  return path === "/cli/authorize";
+}