@backmatter/studio 0.0.7 → 0.0.9

package/src/devbar-state.ts

@@ -0,0 +1,125 @@
+// packages/studio/src/devbar-state.ts
+// Which row the on-site bar shows, and the motion numbers the stylesheet shares.
+
+export type DevbarMode = "preview" | "live";
+
+export type DevbarStep = {
+  label: string;
+  state: "done" | "active" | "pending";
+};
+
+export type DevbarActivity =
+  | { type: "editing"; field: string }
+  | { type: "publishing"; steps: readonly DevbarStep[]; progress: number }
+  | { type: "published"; sha: string; when: string };
+
+export type DevbarRow = "idle" | "changes" | "editing" | "publishing" | "published";
+
+export type DevbarChrome = {
+  mode: DevbarMode;
+  row: DevbarRow;
+  modeLabel: string;
+  announce: string;
+};
+
+export const DEVBAR_EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)";
+export const DEVBAR_EASE_IN = "cubic-bezier(0.55, 0, 1, 0.45)";
+export const DEVBAR_EASE_DRAWER = "cubic-bezier(0.32, 0.72, 0, 1)";
+
+/** Entering the violet flood is slower than leaving it. */
+export const DEVBAR_FLOOD_ENTER_MS = 550;
+export const DEVBAR_FLOOD_EXIT_MS = 300;
+
+/** The viewport frame draws out slower than it retracts. */
+export const DEVBAR_FRAME_ENTER_MS = 750;
+export const DEVBAR_FRAME_EXIT_MS = 360;
+
+const MODE_KEY = "backmatter.devbar.mode";
+
+export function devbarChrome(input: {
+  siteMode: DevbarMode;
+  changeCount: number;
+  activity?: DevbarActivity | null;
+}): DevbarChrome {
+  const activity = input.activity ?? null;
+  const row: DevbarRow = activity
+    ? activity.type
+    : input.siteMode === "preview" && input.changeCount > 0
+      ? "changes"
+      : "idle";
+  const mode: DevbarMode = row === "published" ? "live" : input.siteMode;
+  const modeLabel = mode === "preview" ? "Exit preview" : "Enter preview";
+  const announce = mode === "preview" ? "Preview on, drafts visible" : "Live site";
+  return { mode, row, modeLabel, announce };
+}
+
+export function originWithin(
+  container: { left: number; top: number },
+  target: { left: number; top: number; width: number; height: number },
+) {
+  return {
+    x: target.left + target.width / 2 - container.left,
+    y: target.top + target.height / 2 - container.top,
+  };
+}
+
+export function shouldAnimateWidth(before: number, after: number) {
+  return Math.abs(after - before) > 1;
+}
+
+export function prefersReducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export function readStoredMode(): DevbarMode | null {
+  if (typeof sessionStorage === "undefined") return null;
+  try {
+    const value = sessionStorage.getItem(MODE_KEY);
+    return value === "live" || value === "preview" ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+export type SiteThemePreference = "light" | "dark" | "system";
+
+export const HIGHLIGHT_BLOCKS_KEY = "backmatter.devbar.highlight";
+export const PREVIEW_WITH_AGENT_KEY = "backmatter.devbar.agent-preview";
+const THEME_KEY = "backmatter-theme";
+
+type StorageLike = { getItem(key: string): string | null; setItem(key: string, value: string): void };
+
+export function readSiteTheme(storage: StorageLike | null): SiteThemePreference {
+  const value = storage?.getItem(THEME_KEY);
+  if (value === "light" || value === "dark" || value === "system") return value;
+  return "system";
+}
+
+export function rememberSiteTheme(storage: StorageLike | null, preference: SiteThemePreference) {
+  storage?.setItem(THEME_KEY, preference);
+}
+
+export function resolveSiteTheme(preference: SiteThemePreference, prefersDark: boolean): "light" | "dark" {
+  if (preference === "system") return prefersDark ? "dark" : "light";
+  return preference;
+}
+
+export function readStoredFlag(storage: StorageLike | null, key: string, fallback: boolean) {
+  const value = storage?.getItem(key);
+  if (value === "1") return true;
+  if (value === "0") return false;
+  return fallback;
+}
+
+export function rememberStoredFlag(storage: StorageLike | null, key: string, on: boolean) {
+  storage?.setItem(key, on ? "1" : "0");
+}
+
+export function rememberMode(mode: DevbarMode) {
+  if (typeof sessionStorage === "undefined") return;
+  try {
+    sessionStorage.setItem(MODE_KEY, mode);
+  } catch {
+    /* private mode */
+  }
+}

package/src/index.css

@@ -1,131 +1,3 @@
-/* packages/studio/src/index.css */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#root {
-  margin: 0;
-  min-height: 100dvh;
-}
-
-html {
-  background: #f7f7f8;
-  color-scheme: light;
-}
-
-html[data-theme="dark"] {
-  background: #18181b;
-  color-scheme: dark;
-}
-
-body {
-  -webkit-font-smoothing: antialiased;
-  font-family:
-    "Geist Sans",
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    sans-serif;
-}
-
-button,
-input,
-textarea,
-select {
-  /* Don't use `font: inherit` — it overrides StyleX sizes in @layer. */
-  font-family: inherit;
-}
-
-button,
-[role="button"] {
-  cursor: default;
-}
-
-button:disabled,
-button[aria-disabled="true"] {
-  cursor: not-allowed;
-}
-
-[data-drag-handle] {
-  cursor: grab;
-}
-
-[data-drag-handle][data-dragging] {
-  cursor: grabbing;
-}
-
-/* StyleX colors live in @layer priorityN, which the Vite config orders after
-   `reset`. An unlayered color on `a` would beat them, so a primary link
-   button inherits dark text on a dark fill and the label disappears. */
-@layer reset {
-  a {
-    color: inherit;
-  }
-}
-
-a {
-  text-decoration: none;
-  cursor: default;
-}
-
-a[href^="http"],
-a[href^="//"],
-a[target="_blank"] {
-  cursor: pointer;
-}
-
-:focus-visible {
-  outline: 2px solid #18181b;
-  outline-offset: 2px;
-}
-
-html[data-theme="dark"] :focus-visible {
-  outline-color: #fafafa;
-}
-
-/* Controls whose container already indicates focus (e.g. the chat composer). */
-[data-no-ring]:focus-visible {
-  outline: none;
-}
-
-/* Prose UI reads these on the rendered body. Match the app fonts. */
-.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;
-}
+/* packages/studio/src/index.css — full studio stylesheet entry (dashboard + SiteStudio). */
+@import "./shell-resets.css";
+@import "./studio-prose-ui.css";

package/src/pages/CliAuthorizePage.tsx

@@ -1,43 +1,76 @@
 // packages/studio/src/pages/CliAuthorizePage.tsx
 import { useState } from "react";
 import { useSearchParams } from "react-router";
+import * as stylex from "@stylexjs/stylex";
 import { approveCliLogin } from "../api";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { Button } from "../ui/Button";
-import { Stack } from "../ui/Page";
 import { Text } from "../ui/Text";
 
-export function CliAuthorizePage() {
+export function CliAuthorizePage({ email }: { email: string }) {
   const [params] = useSearchParams();
   const id = params.get("id") ?? "";
   const [status, setStatus] = useState<"idle" | "done" | "error">("idle");
   const [error, setError] = useState<string | null>(null);
 
   return (
-    <Stack gap="lg">
-      <Text as="h1" size="xl" weight="medium">
-        Allow the CLI
-      </Text>
-      <Text tone="muted">
-        This connects the Backmatter CLI on your computer to your account.
-      </Text>
-      {status === "done" ? <Text>You can return to the terminal.</Text> : null}
-      {error ? <Text tone="danger">{error}</Text> : null}
-      {status === "done" ? null : (
-        <Button
-          disabled={!id}
-          onClick={() => {
-            setError(null);
-            void approveCliLogin(id)
-              .then(() => setStatus("done"))
-              .catch((err: unknown) => {
-                setStatus("error");
-                setError(err instanceof Error ? err.message : "Could not approve");
-              });
-          }}
-        >
-          Allow
-        </Button>
-      )}
-    </Stack>
+    <main {...stylex.props(styles.screen)}>
+      <div {...stylex.props(styles.card)}>
+        <Text as="h1" size="xl" weight="medium">
+          Allow the CLI
+        </Text>
+        <Text tone="muted">
+          This signs the CLI in as {email}. It can act in any workspace you belong to. It does not pick one.
+        </Text>
+        {status === "done" ? <Text>You can return to the terminal.</Text> : null}
+        {error ? <Text tone="danger">{error}</Text> : null}
+        {status === "done" ? null : (
+          <Button
+            disabled={!id}
+            onClick={() => {
+              setError(null);
+              void approveCliLogin(id)
+                .then(() => setStatus("done"))
+                .catch((err: unknown) => {
+                  setStatus("error");
+                  setError(err instanceof Error ? err.message : "Could not approve");
+                });
+            }}
+          >
+            Allow
+          </Button>
+        )}
+      </div>
+    </main>
   );
 }
+
+const styles = stylex.create({
+  screen: {
+    display: "flex",
+    boxSizing: "border-box",
+    width: "100%",
+    minHeight: "100dvh",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: space.xxl,
+    backgroundColor: colors.bgApp,
+    color: colors.text,
+  },
+  card: {
+    display: "flex",
+    width: "100%",
+    maxWidth: "320px",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: space.lg,
+    boxSizing: "border-box",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    padding: space.xxl,
+    fontSize: type.sm,
+  },
+});