@backmatter/studio 0.0.1

package/src/chat/useStickToBottom.ts

@@ -0,0 +1,110 @@
+// packages/studio/src/chat/useStickToBottom.ts
+//
+// Keeps a scroll container pinned to its bottom while content grows (streaming,
+// new messages), easing there with a short animation instead of jumping. The
+// user can break away by scrolling up; scrolling back down re-engages.
+import { useCallback, useEffect, useRef, type UIEvent } from "react";
+
+/** Fraction of the remaining distance covered per frame (ease-out). */
+const EASE = 0.18;
+/** Distance from the bottom (px) still considered "at the bottom". */
+const STICKY_THRESHOLD = 48;
+
+export function useStickToBottom<T extends HTMLElement>({
+  active,
+  resetKey,
+  deps,
+}: {
+  /** Whether the container is mounted/visible. Becoming active jumps instantly. */
+  active: boolean;
+  /** Changing this (e.g. thread id) jumps instantly instead of animating. */
+  resetKey: unknown;
+  /** Re-evaluate when any of these change (messages, status…). */
+  deps: readonly unknown[];
+}) {
+  const ref = useRef<T>(null);
+  const stick = useRef(true);
+  const frame = useRef<number | null>(null);
+  const lastActive = useRef(false);
+  const lastKey = useRef<unknown>(resetKey);
+
+  const stop = useCallback(() => {
+    if (frame.current != null) cancelAnimationFrame(frame.current);
+    frame.current = null;
+  }, []);
+
+  const follow = useCallback(
+    (instant: boolean) => {
+      const el = ref.current;
+      if (!el || !stick.current) return;
+      const reduceMotion =
+        typeof matchMedia === "function" &&
+        matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (instant || reduceMotion) {
+        stop();
+        el.scrollTop = el.scrollHeight;
+        return;
+      }
+      if (frame.current != null) return; // already chasing the bottom
+      const step = () => {
+        const node = ref.current;
+        if (!node || !stick.current) {
+          stop();
+          return;
+        }
+        const target = node.scrollHeight - node.clientHeight;
+        const diff = target - node.scrollTop;
+        if (Math.abs(diff) < 0.5) {
+          node.scrollTop = target;
+          stop();
+          return;
+        }
+        const delta = diff * EASE;
+        node.scrollTop += Math.abs(delta) < 1 ? Math.sign(diff) : delta;
+        frame.current = requestAnimationFrame(step);
+      };
+      frame.current = requestAnimationFrame(step);
+    },
+    [stop],
+  );
+
+  useEffect(() => {
+    if (!active) {
+      lastActive.current = false;
+      stop();
+      return;
+    }
+    const instant = !lastActive.current || lastKey.current !== resetKey;
+    lastActive.current = true;
+    lastKey.current = resetKey;
+    if (instant) stick.current = true;
+    follow(instant);
+  }, [active, resetKey, follow, stop, ...deps]);
+
+  useEffect(() => stop, [stop]);
+
+  /** Programmatic scrolls also fire `scroll`; only re-evaluate stickiness when idle. */
+  const onScroll = useCallback((e: UIEvent<T>) => {
+    if (frame.current != null) return;
+    const el = e.currentTarget;
+    stick.current = el.scrollHeight - el.scrollTop - el.clientHeight < STICKY_THRESHOLD;
+  }, []);
+
+  /** User intent to scroll up breaks away immediately, even mid-animation. */
+  const onWheel = useCallback(
+    (e: { deltaY: number }) => {
+      if (e.deltaY < 0) {
+        stick.current = false;
+        stop();
+      }
+    },
+    [stop],
+  );
+
+  const onTouchMove = useCallback(() => {
+    // Let the user's gesture win; `onScroll` decides afterwards.
+    stop();
+  }, [stop]);
+
+  return { ref, onScroll, onWheel, onTouchMove };
+}

package/src/chrome/AppShell.tsx

@@ -0,0 +1,100 @@
+// packages/studio/src/chrome/AppShell.tsx
+import { useEffect } from "react";
+import { useLocation, useSearchParams } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { ChatBar } from "../chat/ChatBar";
+import { ChatPanel } from "../chat/ChatPanel";
+import { ChatProvider, ChatSessionScope } from "../chat/ChatProvider";
+import { colors } from "../styles/tokens.stylex";
+import { TooltipProvider } from "../ui/Tooltip";
+import { cmsWorkspaceSlug, isOrgPickerPath } from "../workspace-path";
+import { AppSidebar } from "./AppSidebar";
+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 { installParentChatHotkey } from "./hotkeys";
+import { WorkspaceStatusBar } from "./WorkspaceStatusBar";
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  return (
+    <TooltipProvider>
+      <WorkspaceNavProvider>
+        <EditorStatusProvider>
+          <EditorActionsProvider>
+            <EditorFocusProvider>
+              <AppShellInner>{children}</AppShellInner>
+            </EditorFocusProvider>
+          </EditorActionsProvider>
+        </EditorStatusProvider>
+      </WorkspaceNavProvider>
+    </TooltipProvider>
+  );
+}
+
+function AppShellInner({ children }: { children: React.ReactNode }) {
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  // 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 orgPicker = isOrgPickerPath(location.pathname);
+  const embed = searchParams.get("embed") === "1";
+
+  useEffect(() => {
+    if (!embed) return;
+    return installParentChatHotkey();
+  }, [embed]);
+
+  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>
+      </div>
+      {orgPicker ? <FloatingUserMenu /> : null}
+      {workspaceKey && !embed ? (
+        <ChatSessionScope>
+          <ChatBar />
+          <ChatPanel />
+        </ChatSessionScope>
+      ) : null}
+      {embed ? null : <CommandPalette />}
+    </div>
+  );
+
+  return workspaceKey ? (
+    <ChatProvider workspaceId={workspaceKey}>{shell}</ChatProvider>
+  ) : (
+    shell
+  );
+}
+
+const styles = stylex.create({
+  shell: {
+    display: "flex",
+    height: "100dvh",
+    overflow: "hidden",
+    flexDirection: "column",
+    backgroundColor: colors.bgApp,
+    color: colors.text,
+  },
+  body: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    overflow: "hidden",
+  },
+  main: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+});

package/src/chrome/AppSidebar.tsx

@@ -0,0 +1,305 @@
+// 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 { NavAnchor, NavItem } from "./NavItem";
+import { useStudioDefinition } from "../define-studio";
+import { UserMenu } from "./UserMenu";
+import { IMPLICIT_SINGLETON_SLUG } from "@backmatter/core";
+import {
+  cmsWorkspaceSlug,
+  contentDocPath,
+  contentTypePath,
+  isWorkspaceSettingsPath,
+  settingsPath,
+  workspaceHomePath,
+} from "../workspace-path";
+import { DocIcon, ExternalIcon, GearIcon } from "./icons";
+import {
+  groupContentTypes,
+  modelHasLocale,
+  type ContentTypeNav,
+} from "./content-type-groups";
+
+export function AppSidebar() {
+  const location = useLocation();
+  const workspaceNav = useWorkspaceNav();
+  const inWorkspace = Boolean(cmsWorkspaceSlug(location.pathname));
+
+  return (
+    <aside {...stylex.props(styles.aside)}>
+      {inWorkspace && workspaceNav ? (
+        <WorkspaceNav workspace={workspaceNav} />
+      ) : (
+        <WorkspaceListNav />
+      )}
+      <SidebarFooter />
+    </aside>
+  );
+}
+
+function WorkspaceListNav() {
+  const replica = useReplicaState();
+  const workspaces = replica.control?.workspaces ?? [];
+
+  return (
+    <>
+      <div {...stylex.props(styles.brand)}>
+        <NavItem to="/workspaces" end>
+          <span {...stylex.props(styles.brandLink)}>BACKMATTER</span>
+        </NavItem>
+      </div>
+      <nav {...stylex.props(styles.nav)}>
+        <div>
+          <SectionLabel>Workspaces</SectionLabel>
+          {workspaces.length === 0 ? (
+            <p {...stylex.props(styles.muted)}>No workspaces yet.</p>
+          ) : (
+            <ul {...stylex.props(styles.list)}>
+              {workspaces.map((ws) => (
+                <li key={ws.id}>
+                  <NavItem to={workspaceHomePath(ws.slug)}>
+                    <DocIcon />
+                    <span {...stylex.props(styles.truncate)}>{ws.name}</span>
+                  </NavItem>
+                </li>
+              ))}
+            </ul>
+          )}
+          <NavItem to="/workspaces/new">New workspace</NavItem>
+        </div>
+      </nav>
+    </>
+  );
+}
+
+function typeHref(
+  workspaceSlug: string,
+  defaultLocale: string,
+  model: ContentTypeNav,
+) {
+  if (model.singleton && !modelHasLocale(model.path)) {
+    return contentDocPath(
+      workspaceSlug,
+      model.type,
+      IMPLICIT_SINGLETON_SLUG,
+      "",
+      defaultLocale,
+    );
+  }
+  return contentTypePath(workspaceSlug, model.type);
+}
+
+function TypeList({
+  models,
+  workspaceSlug,
+  defaultLocale,
+}: {
+  models: ContentTypeNav[];
+  workspaceSlug: string;
+  defaultLocale: string;
+}) {
+  return (
+    <ul {...stylex.props(styles.list)}>
+      {models.map((model) => (
+        <li key={model.type}>
+          <NavItem to={typeHref(workspaceSlug, defaultLocale, model)}>
+            <DocIcon />
+            <span {...stylex.props(styles.truncate, styles.capitalize)}>
+              {model.type}
+            </span>
+          </NavItem>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function WorkspaceNav({
+  workspace,
+}: {
+  workspace: {
+    workspaceSlug: string;
+    defaultLocale: string;
+    contentTypes: string[];
+    contentModels: ContentTypeNav[];
+  };
+}) {
+  const location = useLocation();
+  const grouped = groupContentTypes(workspace.contentModels);
+  const empty = workspace.contentTypes.length === 0;
+  const menu = useStudioDefinition().menu ?? [];
+
+  return (
+    <>
+      <nav aria-label="Content" {...stylex.props(styles.nav)}>
+        {empty ? (
+          <div>
+            <SectionLabel>Content</SectionLabel>
+            <p {...stylex.props(styles.muted)}>
+              No content types yet. Pull from GitHub to load models.
+            </p>
+          </div>
+        ) : (
+          <>
+            {grouped.pages.length > 0 ? (
+              <div>
+                <SectionLabel>Pages</SectionLabel>
+                <TypeList
+                  models={grouped.pages}
+                  workspaceSlug={workspace.workspaceSlug}
+                  defaultLocale={workspace.defaultLocale}
+                />
+              </div>
+            ) : null}
+            {grouped.data.length > 0 ? (
+              <div>
+                <SectionLabel>Data</SectionLabel>
+                <TypeList
+                  models={grouped.data}
+                  workspaceSlug={workspace.workspaceSlug}
+                  defaultLocale={workspace.defaultLocale}
+                />
+              </div>
+            ) : null}
+            {grouped.globals.length > 0 ? (
+              <div>
+                <SectionLabel>Globals</SectionLabel>
+                <TypeList
+                  models={grouped.globals}
+                  workspaceSlug={workspace.workspaceSlug}
+                  defaultLocale={workspace.defaultLocale}
+                />
+              </div>
+            ) : null}
+          </>
+        )}
+      </nav>
+      <nav aria-label="Settings" {...stylex.props(styles.settings)}>
+        <SectionLabel>Settings</SectionLabel>
+        <ul {...stylex.props(styles.list)}>
+          <li>
+            <NavItem
+              to={settingsPath(workspace.workspaceSlug, "general")}
+              active={isWorkspaceSettingsPath(location.pathname)}
+            >
+              <GearIcon />
+              Settings
+            </NavItem>
+          </li>
+          {menu.map((item) => (
+            <li key={`${item.label}:${item.href}`}>
+              <NavAnchor href={item.href}>
+                <ExternalIcon />
+                {item.label}
+              </NavAnchor>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </>
+  );
+}
+
+function SidebarFooter() {
+  return (
+    <div {...stylex.props(styles.footer)}>
+      <UserMenu />
+    </div>
+  );
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return <p {...stylex.props(styles.section)}>{children}</p>;
+}
+
+const styles = stylex.create({
+  aside: {
+    display: "flex",
+    height: "100%",
+    width: "220px",
+    flexShrink: 0,
+    flexDirection: "column",
+    borderRightWidth: 1,
+    borderRightStyle: "solid",
+    borderRightColor: colors.border,
+    backgroundColor: colors.bgSidebar,
+  },
+  brand: {
+    flexShrink: 0,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    padding: space.lg,
+  },
+  brandLink: {
+    fontSize: type.lg,
+    fontWeight: 600,
+    letterSpacing: "-0.03em",
+    textDecoration: "none",
+    color: colors.text,
+  },
+  nav: {
+    display: "flex",
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    gap: space.xxl,
+    overflowY: "auto",
+    paddingInline: space.md,
+    paddingBlock: space.lg,
+  },
+  list: {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+  },
+  section: {
+    margin: 0,
+    marginBottom: space.sm,
+    paddingInline: space.md,
+    fontSize: type.xs,
+    fontWeight: 600,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+  truncate: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  capitalize: {
+    textTransform: "capitalize",
+  },
+  muted: {
+    margin: 0,
+    paddingInline: space.md,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  loadingPad: {
+    flex: 1,
+    padding: space.lg,
+  },
+  settings: {
+    flexShrink: 0,
+    borderTopWidth: 1,
+    borderTopStyle: "solid",
+    borderTopColor: colors.border,
+    paddingInline: space.md,
+    paddingBlock: space.lg,
+  },
+  footer: {
+    flexShrink: 0,
+    borderTopWidth: 1,
+    borderTopStyle: "solid",
+    borderTopColor: colors.border,
+    padding: space.md,
+  },
+});