@backmatter/studio 0.0.1

package/src/pages/UiKitPage.tsx

@@ -0,0 +1,331 @@
+// packages/studio/src/pages/UiKitPage.tsx
+import { useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { StatusBar, StatusItem } from "../chrome/StatusBar";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { useTheme } from "../theme/ThemeProvider";
+import { BackLink } from "../ui/BackLink";
+import { Button, ButtonLink } from "../ui/Button";
+import { Field } from "../ui/Field";
+import { Input, Select, Textarea } from "../ui/Input";
+import { List, ListRow } from "../ui/ListRow";
+import { PageHeader, Panel, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+
+const VARIANTS = ["primary", "secondary", "ghost", "danger"] as const;
+
+export function UiKitPage() {
+  const { preference, resolved, setPreference } = useTheme();
+  const [locale, setLocale] = useState("en");
+
+  return (
+    <div {...stylex.props(styles.page)}>
+      <header {...stylex.props(styles.top)}>
+        <div>
+          <Text as="p" size="xs" tone="muted" weight="semibold">
+            DEV ONLY · /__ui
+          </Text>
+          <Text as="h1" size="display" weight="semibold">
+            UI kit
+          </Text>
+          <Text tone="muted" size="sm">
+            StyleX + Base UI primitives. Theme is {preference} (resolved{" "}
+            {resolved}
+            ).
+          </Text>
+          <div {...stylex.props(styles.back)}>
+            <BackLink to="/">← Back to app</BackLink>
+          </div>
+        </div>
+        <div {...stylex.props(styles.themeRow)}>
+          <Button
+            variant={preference === "system" ? "primary" : "secondary"}
+            onClick={() => setPreference("system")}
+          >
+            System
+          </Button>
+          <Button
+            variant={preference === "light" ? "primary" : "secondary"}
+            onClick={() => setPreference("light")}
+          >
+            Light
+          </Button>
+          <Button
+            variant={preference === "dark" ? "primary" : "secondary"}
+            onClick={() => setPreference("dark")}
+          >
+            Dark
+          </Button>
+        </div>
+      </header>
+
+      <Stack gap="lg">
+        <section {...stylex.props(styles.section)}>
+          <SectionTitle>Buttons</SectionTitle>
+          <Panel>
+            <Stack gap="md">
+              {VARIANTS.map((variant) => (
+                <Row key={variant} label={variant}>
+                  <Button variant={variant}>{variant}</Button>
+                  <Button variant={variant} disabled>
+                    disabled
+                  </Button>
+                  <ButtonLink variant={variant} to="/__ui">
+                    link
+                  </ButtonLink>
+                </Row>
+              ))}
+            </Stack>
+          </Panel>
+        </section>
+
+        <section {...stylex.props(styles.section)}>
+          <SectionTitle>Fields</SectionTitle>
+          <Panel>
+            <Stack>
+              <Field label="Text" hint="Functional note under the field.">
+                <Input
+                  defaultValue="Ada Lovelace"
+                  autoComplete="off"
+                  spellCheck={false}
+                />
+              </Field>
+              <Field label="Disabled">
+                <Input defaultValue="Locked" disabled />
+              </Field>
+              <Field label="Select">
+                <Select
+                  aria-label="Locale"
+                  value={locale}
+                  onValueChange={(next) => setLocale(next ?? "en")}
+                  options={[
+                    { value: "en", label: "English (en)" },
+                    { value: "da", label: "Dansk (da)" },
+                  ]}
+                />
+              </Field>
+              <Field label="Body (mono)">
+                <Textarea
+                  mono
+                  rows={4}
+                  defaultValue={"---\ntitle: Hello\n---\n\nParagraph."}
+                />
+              </Field>
+            </Stack>
+          </Panel>
+        </section>
+
+        <section {...stylex.props(styles.section)}>
+          <SectionTitle>Text</SectionTitle>
+          <Panel>
+            <Stack gap="sm">
+              <Text size="display" weight="semibold">
+                Display · 20px
+              </Text>
+              <Text size="xl" weight="semibold">
+                Title · 16px
+              </Text>
+              <Text size="lg" weight="medium">
+                Heading · 14px
+              </Text>
+              <Text>Body · 13px</Text>
+              <Text size="sm" tone="muted">
+                Muted · 12px
+              </Text>
+              <Text size="xs" tone="muted" weight="semibold">
+                OVERLINE
+              </Text>
+              <Text tone="danger">Danger</Text>
+              <Text tone="success">Success</Text>
+              <Text mono size="sm">
+                Geist Mono / content/en/blog/hello.mdx
+              </Text>
+            </Stack>
+          </Panel>
+        </section>
+
+        <section {...stylex.props(styles.section)}>
+          <SectionTitle>List + page chrome</SectionTitle>
+          <Panel>
+            <PageHeader
+              kicker={<BackLink to="/__ui">← Kit</BackLink>}
+              title="Documents"
+              description="Sample page header with action."
+              action={<Button>New</Button>}
+            />
+            <List>
+              <ListRow
+                to="/__ui"
+                title="hello-world"
+                meta="en"
+                trailing="modified"
+              />
+              <ListRow
+                to="/__ui"
+                title="about"
+                meta="da"
+                trailing="new"
+              />
+            </List>
+          </Panel>
+        </section>
+
+        <section {...stylex.props(styles.section)}>
+          <SectionTitle>Top bar</SectionTitle>
+          <Panel>
+            <div {...stylex.props(styles.statusWrap)}>
+              <StatusBar>
+                <StatusItem>main</StatusItem>
+                <StatusItem>2 uncommitted</StatusItem>
+              </StatusBar>
+              <StatusBar>
+                <StatusItem>feat/sale</StatusItem>
+                <StatusItem>Unsaved</StatusItem>
+              </StatusBar>
+              <StatusBar>
+                <StatusItem tone="danger">Save failed</StatusItem>
+              </StatusBar>
+            </div>
+          </Panel>
+        </section>
+
+        <section {...stylex.props(styles.section)}>
+          <SectionTitle>Surfaces</SectionTitle>
+          <div {...stylex.props(styles.swatches)}>
+            <Swatch label="bgApp" fill={styles.bgApp} />
+            <Swatch label="bgSidebar" fill={styles.bgSidebar} />
+            <Swatch label="bgSurface" fill={styles.bgSurface} />
+            <Swatch label="accent" fill={styles.accent} />
+            <Swatch label="danger" fill={styles.dangerFill} />
+            <Swatch label="success" fill={styles.successFill} />
+          </div>
+        </section>
+      </Stack>
+    </div>
+  );
+}
+
+function SectionTitle({ children }: { children: string }) {
+  return (
+    <Text as="h2" size="xs" tone="muted" weight="semibold">
+      {children}
+    </Text>
+  );
+}
+
+function Row({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div {...stylex.props(styles.row)}>
+      <span {...stylex.props(styles.rowLabel)}>{label}</span>
+      <div {...stylex.props(styles.rowItems)}>{children}</div>
+    </div>
+  );
+}
+
+function Swatch({
+  label,
+  fill,
+}: {
+  label: string;
+  fill: stylex.StyleXStyles;
+}) {
+  return (
+    <div {...stylex.props(styles.swatch)}>
+      <div {...stylex.props(styles.chip, fill)} />
+      <Text size="xs" tone="muted" mono>
+        {label}
+      </Text>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  page: {
+    minHeight: "100dvh",
+    maxWidth: "880px",
+    marginInline: "auto",
+    paddingInline: space.xxl,
+    paddingBlock: space.xxl,
+  },
+  section: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  top: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: space.lg,
+    marginBottom: space.xxl,
+  },
+  back: {
+    marginTop: space.md,
+  },
+  themeRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: space.sm,
+  },
+  row: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: space.lg,
+  },
+  rowLabel: {
+    width: "88px",
+    flexShrink: 0,
+    fontSize: type.xs,
+    fontWeight: 600,
+    letterSpacing: "0.04em",
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+  rowItems: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: space.sm,
+  },
+  statusWrap: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+    overflow: "hidden",
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+  },
+  swatches: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+    gap: space.md,
+  },
+  swatch: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  chip: {
+    height: "40px",
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+  },
+  bgApp: { backgroundColor: colors.bgApp },
+  bgSidebar: { backgroundColor: colors.bgSidebar },
+  bgSurface: { backgroundColor: colors.bgSurface },
+  accent: { backgroundColor: colors.accent },
+  dangerFill: { backgroundColor: colors.danger },
+  successFill: { backgroundColor: colors.success },
+});

package/src/pages/UserSettingsPage.tsx

@@ -0,0 +1,94 @@
+// packages/studio/src/pages/UserSettingsPage.tsx
+import { useEffect, useState } from "react";
+import { fetchMe } from "../api";
+import { authClient } from "../auth-client";
+import { useAppChrome } from "../components/AppChromeContext";
+import { McpConnectorsPanel } from "../mcp/McpConnectorsPanel";
+import { Button } from "../ui/Button";
+import { Field } from "../ui/Field";
+import { Input } from "../ui/Input";
+import { PageFrame, PageHeader, Panel, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+
+export function UserSettingsPage() {
+  const { email, userId } = useAppChrome();
+  const [name, setName] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    void fetchMe().then((me) => {
+      if (me?.user.name) setName(me.user.name);
+    });
+  }, []);
+
+  async function onSaveName(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    setStatus(null);
+    const result = await authClient().updateUser({ name });
+    setBusy(false);
+    if (result.error) {
+      setError(result.error.message ?? "Could not save name");
+      return;
+    }
+    setStatus("Name saved. New publishes will use it.");
+  }
+
+  return (
+    <PageFrame>
+      <PageHeader
+        title="User settings"
+        description="Your account on this Backmatter instance."
+      />
+      <Stack gap="lg">
+        <Panel>
+          <form onSubmit={(e) => void onSaveName(e)}>
+          <Stack>
+            <Text as="h2" size="lg" weight="medium">
+              Account
+            </Text>
+            <Field label="Name">
+              <Input value={name} onChange={(e) => setName(e.target.value)} autoComplete="name" />
+            </Field>
+            <Field label="Email">
+              <Input
+                type="email"
+                value={email}
+                readOnly
+                autoComplete="off"
+                spellCheck={false}
+              />
+            </Field>
+            <Field label="User ID" hint="Stable id for this account.">
+              <Input
+                value={userId}
+                readOnly
+                autoComplete="off"
+                spellCheck={false}
+              />
+            </Field>
+            {error ? <Text tone="danger">{error}</Text> : null}
+            {status ? <Text tone="muted">{status}</Text> : null}
+            <div>
+              <Button type="submit" disabled={busy}>
+                {busy ? "Saving…" : "Save name"}
+              </Button>
+            </div>
+          </Stack>
+          </form>
+        </Panel>
+        <div>
+          <PageHeader
+            title="Connectors"
+            description="Personal MCP servers that follow you across workspaces."
+            compact
+          />
+          <McpConnectorsPanel scope="user" canEdit />
+        </div>
+      </Stack>
+    </PageFrame>
+  );
+}

package/src/pages/WorkspaceHomeRedirect.tsx

@@ -0,0 +1,17 @@
+// packages/studio/src/pages/WorkspaceHomeRedirect.tsx
+import { Navigate, useOutletContext } from "react-router";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { contentTypePath, settingsPath } from "../workspace-path";
+
+export function WorkspaceHomeRedirect() {
+  const { workspace, models } = useOutletContext<WorkspaceOutletContext>();
+  const first = models[0]?.type;
+  if (first) {
+    return (
+      <Navigate to={contentTypePath(workspace.slug, first)} replace />
+    );
+  }
+  return (
+    <Navigate to={settingsPath(workspace.slug, "schema")} replace />
+  );
+}

package/src/pages/WorkspaceLayout.tsx

@@ -0,0 +1,103 @@
+// packages/studio/src/pages/WorkspaceLayout.tsx
+import { useCallback, useEffect, useMemo, type Dispatch, type SetStateAction } from "react";
+import { Outlet, useLocation, useParams } from "react-router";
+import type { SchemaPayload, WorkspaceDetail } from "../api";
+import { useAppChrome } from "../components/AppChromeContext";
+import { useSetWorkspaceNav } from "../chrome/WorkspaceNavContext";
+import { rememberLastWorkspace } from "../last-workspace";
+import { replicaStore } from "../replica/instance";
+import { useReplicaSession } from "../replica/ReplicaProvider";
+import { useReplicaState } from "../replica/useReplica";
+import { PageFrame } from "../ui/Page";
+import { Text } from "../ui/Text";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import {
+  defaultLocaleOf,
+  isWorkspaceEditorPath,
+  isWorkspaceSettingsPath,
+  isWorkspaceTypeIndexPath,
+} from "../workspace-path";
+
+const EMPTY_MODELS: SchemaPayload["models"] = [];
+const EMPTY_BLOCKS: NonNullable<SchemaPayload["blocks"]> = [];
+const EMPTY_RICHTEXT: NonNullable<SchemaPayload["richtext"]> = [];
+
+export function WorkspaceLayout() {
+  const { workspaceSlug = "" } = useParams();
+  const location = useLocation();
+  const isEditor = isWorkspaceEditorPath(location.pathname);
+  const isTypeIndex = isWorkspaceTypeIndexPath(location.pathname);
+  const isSettings = isWorkspaceSettingsPath(location.pathname);
+  const { userId } = useAppChrome();
+  const setNav = useSetWorkspaceNav();
+  const replica = useReplicaState();
+  const { revalidate } = useReplicaSession();
+  const workspace = replica.workspaceBySlug(workspaceSlug);
+  const slot = workspace ? replica.checkout(workspace.id) : null;
+  const models = slot?.schema?.payload.models ?? EMPTY_MODELS;
+  const blocks = slot?.schema?.payload.blocks ?? EMPTY_BLOCKS;
+  const richtext = slot?.schema?.payload.richtext ?? EMPTY_RICHTEXT;
+
+  const reload = useCallback(async () => {
+    if (!workspace) return;
+    await revalidate(workspace.id);
+  }, [workspace, revalidate]);
+
+  const setWorkspace = useCallback<Dispatch<SetStateAction<WorkspaceDetail | null>>>(
+    (update) => {
+      if (!workspace) return;
+      const next = typeof update === "function" ? update(workspace) : update;
+      if (next) replicaStore.updateWorkspace(next);
+    },
+    [workspace],
+  );
+
+  useEffect(() => {
+    if (!workspace) {
+      setNav(null);
+      return;
+    }
+    rememberLastWorkspace(userId, workspace.id);
+    setNav({
+      workspaceId: workspace.id,
+      workspaceSlug: workspace.slug,
+      workspaceName: workspace.name,
+      role: workspace.role,
+      defaultLocale: defaultLocaleOf(workspace.locales),
+      contentTypes: models.map((m) => m.type),
+      contentModels: models.map((m) => ({
+        type: m.type,
+        path: m.path,
+        route: m.route,
+        singleton: m.singleton,
+      })),
+      siteUrls: workspace.siteUrls ?? [],
+    });
+  }, [userId, workspace, models, setNav]);
+
+  const outletContext = useMemo<WorkspaceOutletContext | null>(() => {
+    if (!workspace) return null;
+    return {
+      workspace,
+      models,
+      blocks,
+      richtext,
+      setWorkspace,
+      reload,
+    };
+  }, [workspace, models, blocks, richtext, setWorkspace, reload]);
+
+  if (!workspace || !outletContext) {
+    return (
+      <PageFrame>
+        <Text tone="danger">Workspace not found.</Text>
+      </PageFrame>
+    );
+  }
+
+  return (
+    <PageFrame flush={isEditor || isTypeIndex || isSettings}>
+      <Outlet context={outletContext} />
+    </PageFrame>
+  );
+}

package/src/pages/WorkspacesPage.tsx

@@ -0,0 +1,35 @@
+// packages/studio/src/pages/WorkspacesPage.tsx
+import { ButtonLink } from "../ui/Button";
+import { List, ListRow } from "../ui/ListRow";
+import { PageFrame, PageHeader } from "../ui/Page";
+import { Text } from "../ui/Text";
+import { useReplicaState } from "../replica/useReplica";
+import { workspaceHomePath } from "../workspace-path";
+
+export function WorkspacesPage() {
+  const workspaces = useReplicaState().control?.workspaces ?? [];
+
+  return (
+    <PageFrame centered>
+      <PageHeader
+        title="Workspaces"
+        description="Each workspace is a site and a team."
+        action={<ButtonLink to="/workspaces/new">New workspace</ButtonLink>}
+      />
+      {workspaces.length === 0 ? (
+        <Text tone="muted">No workspaces yet.</Text>
+      ) : (
+        <List>
+          {workspaces.map((workspace) => (
+            <ListRow
+              key={workspace.id}
+              to={workspaceHomePath(workspace.slug)}
+              title={workspace.name}
+              meta={workspace.role}
+            />
+          ))}
+        </List>
+      )}
+    </PageFrame>
+  );
+}

package/src/pages/blocks-list.ts

@@ -0,0 +1,73 @@
+// packages/studio/src/pages/blocks-list.ts
+
+export type BlockInstance = {
+  id: string;
+  type: string;
+  props: Record<string, unknown>;
+};
+
+export function isBlockInstance(value: unknown): value is BlockInstance {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const row = value as Record<string, unknown>;
+  return (
+    typeof row.id === "string" &&
+    typeof row.type === "string" &&
+    !!row.props &&
+    typeof row.props === "object" &&
+    !Array.isArray(row.props)
+  );
+}
+
+export function blocksFromFrontmatter(value: unknown): BlockInstance[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter(isBlockInstance);
+}
+
+export function addBlock(
+  blocks: BlockInstance[],
+  type: string,
+  id: string,
+): BlockInstance[] {
+  return [...blocks, { id, type, props: {} }];
+}
+
+export function removeBlock(blocks: BlockInstance[], id: string): BlockInstance[] {
+  return blocks.filter((b) => b.id !== id);
+}
+
+export function moveBlock(
+  blocks: BlockInstance[],
+  id: string,
+  direction: -1 | 1,
+): BlockInstance[] {
+  const at = blocks.findIndex((b) => b.id === id);
+  const next = at + direction;
+  if (at < 0 || next < 0 || next >= blocks.length) return blocks;
+  const copy = [...blocks];
+  const [row] = copy.splice(at, 1);
+  copy.splice(next, 0, row!);
+  return copy;
+}
+
+export function reorderBlock(
+  blocks: BlockInstance[],
+  id: string,
+  toIndex: number,
+): BlockInstance[] {
+  const from = blocks.findIndex((b) => b.id === id);
+  if (from < 0 || blocks.length === 0) return blocks;
+  const next = Math.max(0, Math.min(toIndex, blocks.length - 1));
+  if (from === next) return blocks;
+  const copy = [...blocks];
+  const [row] = copy.splice(from, 1);
+  copy.splice(next, 0, row!);
+  return copy;
+}
+
+export function updateBlockProps(
+  blocks: BlockInstance[],
+  id: string,
+  props: Record<string, unknown>,
+): BlockInstance[] {
+  return blocks.map((b) => (b.id === id ? { ...b, props } : b));
+}