@backmatter/studio 0.0.1

package/src/chrome/StatusBar.tsx

@@ -0,0 +1,73 @@
+// packages/studio/src/chrome/StatusBar.tsx
+import * as stylex from "@stylexjs/stylex";
+import { colors, space, type, z } from "../styles/tokens.stylex";
+
+export function StatusBar({ children }: { children: React.ReactNode }) {
+  return <header {...stylex.props(styles.bar)}>{children}</header>;
+}
+
+export function StatusItem({
+  children,
+  tone = "muted",
+  uppercase = false,
+}: {
+  children: React.ReactNode;
+  tone?: "muted" | "danger" | "success";
+  uppercase?: boolean;
+}) {
+  return (
+    <span
+      {...stylex.props(
+        styles.item,
+        uppercase && styles.uppercase,
+        tone === "danger" && styles.danger,
+        tone === "success" && styles.success,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function StatusSpacer() {
+  return <span {...stylex.props(styles.spacer)} />;
+}
+
+const styles = stylex.create({
+  bar: {
+    position: "relative",
+    zIndex: z.dropdown,
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    gap: space.lg,
+    minHeight: "32px",
+    paddingInline: space.lg,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    backgroundColor: colors.bgStatus,
+    color: colors.textMuted,
+    fontSize: type.xs,
+    fontVariantNumeric: "tabular-nums",
+  },
+  item: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    minHeight: "24px",
+  },
+  uppercase: {
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+  },
+  spacer: {
+    flex: 1,
+  },
+  danger: {
+    color: colors.danger,
+  },
+  success: {
+    color: colors.success,
+  },
+});

package/src/chrome/UserMenu.tsx

@@ -0,0 +1,130 @@
+// packages/studio/src/chrome/UserMenu.tsx
+import { Link, useLocation } from "react-router";
+import { Menu } from "@base-ui/react/menu";
+import * as stylex from "@stylexjs/stylex";
+import { useAppChrome } from "../components/AppChromeContext";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { cx, popup, popupClassName } from "../ui/popup";
+
+const hover = "@media (hover: hover)";
+
+export function FloatingUserMenu() {
+  return (
+    <div {...stylex.props(styles.float)}>
+      <UserMenu quiet />
+    </div>
+  );
+}
+
+export function UserMenu({ quiet = false }: { quiet?: boolean }) {
+  const { email, onLogout } = useAppChrome();
+  const location = useLocation();
+  const onAccount = location.pathname.replace(/\/$/, "") === "/account";
+
+  return (
+    <Menu.Root>
+      <Menu.Trigger
+        aria-label={`Account menu for ${email}`}
+        className={cx(
+          styles.trigger,
+          quiet && styles.triggerQuiet,
+          onAccount && styles.triggerActive,
+        )}
+      >
+        <span {...stylex.props(styles.email)}>{email}</span>
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner
+          side="top"
+          align="start"
+          sideOffset={6}
+          className={cx(popup.positioner)}
+        >
+          <Menu.Popup
+            aria-label="Account"
+            className={(state) => popupClassName(state, styles.menu)}
+          >
+            <Menu.LinkItem
+              render={<Link to="/account" />}
+              className={(state) =>
+                cx(popup.item, styles.item, state.highlighted && popup.itemHighlighted)
+              }
+            >
+              User settings
+            </Menu.LinkItem>
+            <Menu.Item
+              label="Log out"
+              onClick={onLogout}
+              className={(state) =>
+                cx(popup.item, styles.item, state.highlighted && popup.itemHighlighted)
+              }
+            >
+              Log out
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+const styles = stylex.create({
+  float: {
+    position: "fixed",
+    left: space.xl,
+    bottom: space.xl,
+    zIndex: z.dropdown,
+    maxWidth: "220px",
+  },
+  trigger: {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    minHeight: "32px",
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    borderRadius: radius.md,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    fontFamily: type.sans,
+    fontSize: type.md,
+    fontWeight: 500,
+    textAlign: "left",
+    cursor: "pointer",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: "-2px",
+    },
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  triggerQuiet: {
+    width: "auto",
+    maxWidth: "220px",
+    color: colors.textMuted,
+    fontSize: type.sm,
+    fontWeight: 500,
+  },
+  triggerActive: {
+    backgroundColor: colors.bgActive,
+  },
+  email: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  menu: {
+    width: "200px",
+  },
+  item: {
+    textDecoration: "none",
+    cursor: "pointer",
+    fontWeight: 500,
+  },
+});

package/src/chrome/WorkspaceNavContext.tsx

@@ -0,0 +1,60 @@
+// packages/studio/src/chrome/WorkspaceNavContext.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import type { ContentTypeNav } from "./content-type-groups";
+
+export type WorkspaceNav = {
+  workspaceId: string;
+  workspaceSlug: string;
+  workspaceName: string;
+  role: string;
+  defaultLocale: string;
+  contentTypes: string[];
+  contentModels: ContentTypeNav[];
+  siteUrls: string[];
+};
+
+type WorkspaceNavContextValue = {
+  nav: WorkspaceNav | null;
+  setNav: (nav: WorkspaceNav | null) => void;
+};
+
+const WorkspaceNavContext = createContext<WorkspaceNavContextValue | null>(
+  null,
+);
+
+export function WorkspaceNavProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [nav, setNavState] = useState<WorkspaceNav | null>(null);
+  const setNav = useCallback((next: WorkspaceNav | null) => {
+    setNavState(next);
+  }, []);
+  const value = useMemo(() => ({ nav, setNav }), [nav, setNav]);
+  return (
+    <WorkspaceNavContext.Provider value={value}>
+      {children}
+    </WorkspaceNavContext.Provider>
+  );
+}
+
+export function useWorkspaceNav(): WorkspaceNav | null {
+  const ctx = useContext(WorkspaceNavContext);
+  if (!ctx) return null;
+  return ctx.nav;
+}
+
+export function useSetWorkspaceNav() {
+  const ctx = useContext(WorkspaceNavContext);
+  if (!ctx) {
+    throw new Error("useSetWorkspaceNav must be used within WorkspaceNavProvider");
+  }
+  return ctx.setNav;
+}