@backmatter/studio 0.0.4 → 0.0.6

package/src/site-widget.tsx

@@ -1,18 +1,19 @@
 // packages/studio/src/site-widget.tsx
-// The on-site bar: agent and publish in one tree. The host page mounts this
+// The on-site bar: Live/Preview, the current page, the branch, 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, type ReactNode } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
 import * as stylex from "@stylexjs/stylex";
 import { ChatPanel } from "./chat/ChatPanel";
-import { PublishIcon, SparkIcon } from "./chat/icons";
 import { chatPointerFromGrab } from "./chat/chat-context";
 import { POINTER_ARM_EVENT } from "./chat/Composer";
 import { ChatProvider, ChatSessionScope, useChatUI } from "./chat/ChatProvider";
 import { isPanelVisible } from "./chat/chat-state";
 import { DOC_CHANGED_EVENT, EditorFocusProvider, useEditorFocus } from "./chrome/EditorFocusContext";
-import { matchAppHotkey, modifierSymbol } from "./chrome/hotkeys";
+import { matchAppHotkey } from "./chrome/hotkeys";
 import { EmbedPublishPage } from "./pages/EmbedPublishPage";
+import { PreviewFrame } from "./preview-frame";
+import { DEVBAR_CLASS, SiteBar } from "./site-bar";
 import { installSitePointer } from "./site-pointer";
 import { lightTheme } from "./styles/themes";
 import { configureStudio } from "./studio-config";
@@ -30,28 +31,36 @@ export type SiteWidgetProps = {
   doc: SiteWidgetDoc | null;
   branch?: string;
   tree?: string;
+  siteMode?: "preview" | "live";
   exiting?: boolean;
   onExit: () => void;
+  onEnterPreview?: () => void;
   /** The host re-renders the page after a write. */
   onDocChanged?: () => void;
   /** The site session was rejected. The host drops the widget. */
   onSessionExpired?: () => void;
   /** Same-origin CMS proxy. Default `/api/backmatter/cms`. */
   proxyPath?: string;
+  /** Host route that turns a preview ticket into the site session. */
+  previewEntryPath?: string;
+  /** Full-viewport preview ring and top pill (see `devBar.previewFrame` in host config). */
+  previewFrame?: boolean;
   version?: string;
 };
 
-const DEVBAR_CLASS = "backmatter-devbar";
-
 export function SiteWidget({
   doc,
   branch,
   tree,
+  siteMode = "preview",
   exiting,
   onExit,
+  onEnterPreview,
   onDocChanged,
   onSessionExpired,
   proxyPath = "/api/backmatter/cms",
+  previewEntryPath,
+  previewFrame,
   version,
 }: SiteWidgetProps) {
   const expiredRef = useRef(onSessionExpired);
@@ -94,50 +103,27 @@ export function SiteWidget({
   }, []);
 
   const bar = (
-    <footer aria-label="Backmatter" className={DEVBAR_CLASS} style={barStyle}>
-      <span style={docLabel}>{label}</span>
-      <BarText>Preview</BarText>
-      {branch ? <BarText>{branch}</BarText> : null}
-      {tree ? <BarText>draft</BarText> : null}
-      <button
-        type="button"
-        className={`${DEVBAR_CLASS}-btn${publishOpen ? ` ${DEVBAR_CLASS}-on` : ""}`}
-        aria-pressed={publishOpen}
-        disabled={!doc}
-        onClick={() => {
-          setChatOpen(false);
-          setPublishOpen((open) => !open);
-        }}
-      >
-        <PublishIcon />
-        <span>Publish{changeCount ? ` ${changeCount}` : ""}</span>
-      </button>
-      <button
-        type="button"
-        className={`${DEVBAR_CLASS}-btn ${DEVBAR_CLASS}-agent${chatOpen ? ` ${DEVBAR_CLASS}-on` : ""}`}
-        aria-pressed={chatOpen}
-        aria-keyshortcuts="Meta+J Control+J"
-        disabled={!doc}
-        onClick={() => {
-          setPublishOpen(false);
-          setChatOpen((open) => !open);
-        }}
-      >
-        <SparkIcon />
-        <span>Agent</span>
-        <kbd>
-          {modifierSymbol()}J
-        </kbd>
-      </button>
-      <button type="button" aria-label="Exit preview" disabled={exiting} onClick={onExit} style={barButton}>
-        Exit
-      </button>
-    </footer>
+    <SiteBar
+      label={label}
+      branch={branch}
+      tree={tree}
+      doc={doc}
+      siteMode={siteMode}
+      exiting={exiting}
+      chatOpen={chatOpen}
+      publishOpen={publishOpen}
+      changeCount={changeCount}
+      previewEntryPath={previewEntryPath}
+      onExit={onExit}
+      onEnterPreview={onEnterPreview}
+      onToggleChat={() => setChatOpen((open) => !open)}
+      onTogglePublish={() => setPublishOpen((open) => !open)}
+    />
   );
 
   return (
     <>
-      <style>{BAR_CSS}</style>
+      {previewFrame ? <PreviewFrame /> : null}
       {doc ? (
         <TooltipProvider>
           <EditorFocusProvider>
@@ -240,7 +226,11 @@ function SitePointer({ doc }: { doc: SiteWidgetDoc }) {
       },
       onGrab: (grab) => {
         const next = chatPointerFromGrab(docRef.current, grab);
-        if (next) addPointer(next);
+        if (!next) return;
+        addPointer(next);
+        requestAnimationFrame(() => {
+          window.dispatchEvent(new Event("backmatter:chat-focus"));
+        });
       },
       onEscape: () => {
         window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on: false } }));
@@ -261,69 +251,10 @@ function SitePointer({ doc }: { doc: SiteWidgetDoc }) {
   return null;
 }
 
-function BarText({ children }: { children: ReactNode }) {
-  return <span style={mutedStyle}>{children}</span>;
-}
-
-const barStyle: CSSProperties = {
-  position: "fixed",
-  right: "max(16px, env(safe-area-inset-right, 0px))",
-  bottom: 0,
-  zIndex: 2147483000,
-  isolation: "isolate",
-  display: "flex",
-  alignItems: "center",
-  gap: 2,
-  width: "max-content",
-  maxWidth: "calc(100vw - 32px)",
-  minHeight: 36,
-  padding: "0 6px 0 10px",
-  boxSizing: "border-box",
-  border: "1px solid #e4e4e7",
-  borderRadius: "12px 12px 0 0",
-  background: "#ffffff",
-  color: "#71717a",
-  boxShadow: "0 10px 28px rgba(24, 24, 27, 0.12), 0 1px 2px rgba(24, 24, 27, 0.06)",
-  font: '12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
-  WebkitFontSmoothing: "antialiased",
-};
-
-const barButton: CSSProperties = {
-  border: 0,
-  borderRadius: 8,
-  background: "transparent",
-  color: "#18181b",
-  font: "inherit",
-  cursor: "pointer",
-  padding: "0 8px",
-  minHeight: 28,
-};
-
-const docLabel: CSSProperties = {
-  fontWeight: 600,
-  color: "#18181b",
-  maxWidth: 200,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  padding: "0 6px",
-};
-
-const mutedStyle: CSSProperties = {
-  color: "#71717a",
-  fontSize: 12,
-  margin: 0,
-  padding: "0 6px",
-  maxWidth: 140,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-};
-
 const publishStyle: CSSProperties = {
   position: "fixed",
   right: "max(16px, env(safe-area-inset-right, 0px))",
-  bottom: "calc(env(safe-area-inset-bottom, 0px) + 48px)",
+  bottom: "calc(48px + env(safe-area-inset-bottom, 0px))",
   zIndex: 2147483001,
   width: "min(320px, calc(100vw - 32px))",
   maxHeight: "min(420px, calc(100vh - 80px))",
@@ -333,59 +264,3 @@ const publishStyle: CSSProperties = {
   background: "#ffffff",
   boxShadow: "0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06)",
 };
-
-const BAR_CSS = `
-@keyframes backmatter-devbar-in {
-  from { opacity: 0; transform: translateY(10px) scale(0.98); }
-  to { opacity: 1; transform: none; }
-}
-.${DEVBAR_CLASS} { animation: backmatter-devbar-in 240ms cubic-bezier(0.23, 1, 0.32, 1) both; }
-@media (prefers-reduced-motion: reduce) {
-  .${DEVBAR_CLASS} { animation: none; }
-}
-.${DEVBAR_CLASS}-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 26px;
-  margin-inline: 4px;
-  padding: 0 8px;
-  border: 1px solid #e4e4e7;
-  border-radius: 6px;
-  background: #ffffff;
-  color: #18181b;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  cursor: pointer;
-}
-.${DEVBAR_CLASS}-agent kbd {
-  font-family: Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  font-weight: 400;
-  opacity: 0.7;
-}
-.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-on,
-.${DEVBAR_CLASS} button.${DEVBAR_CLASS}-on:hover:not(:disabled) {
-  background: #18181b;
-  border-color: #18181b;
-  color: #fafafa;
-}
-@media (hover: hover) {
-  .${DEVBAR_CLASS} button:hover:not(:disabled) { background: #f4f4f5; }
-  .${DEVBAR_CLASS} button.${DEVBAR_CLASS}-btn:hover:not(:disabled) {
-    background: rgba(24, 24, 27, 0.05);
-  }
-  .${DEVBAR_CLASS} button.${DEVBAR_CLASS}-on:hover:not(:disabled) {
-    background: #18181b;
-  }
-}
-.${DEVBAR_CLASS} button:focus-visible { outline: 2px solid #18181b; outline-offset: 2px; }
-.${DEVBAR_CLASS} button:disabled { cursor: default; opacity: 0.5; }
-html.backmatter-pointing, html.backmatter-pointing * { cursor: crosshair !important; }
-html.backmatter-pointing .${DEVBAR_CLASS},
-html.backmatter-pointing .${DEVBAR_CLASS} *,
-html.backmatter-pointing [data-backmatter-panel],
-html.backmatter-pointing [data-backmatter-panel] * { cursor: pointer !important; }
-html.backmatter-pointing .${DEVBAR_CLASS} button:disabled { cursor: default !important; }
-`;