@backmatter/studio 0.0.1

package/src/mcp/parse-json.ts

@@ -0,0 +1,52 @@
+// packages/studio/src/mcp/parse-json.ts
+
+export type ParsedMcpPaste = {
+  name?: string;
+  url?: string;
+  headers?: Record<string, string>;
+};
+
+function asHeaders(value: unknown): Record<string, string> | undefined {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return undefined;
+  const out: Record<string, string> = {};
+  for (const [key, header] of Object.entries(value)) {
+    if (typeof header === "string" && key.trim()) out[key] = header;
+  }
+  return Object.keys(out).length > 0 ? out : undefined;
+}
+
+/** Accept `{ url, headers }` or a one-key mcp.json server map. */
+export function parseMcpJsonPaste(text: string): ParsedMcpPaste | null {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(trimmed);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+  const rec = parsed as Record<string, unknown>;
+  if (typeof rec.url === "string" || rec.headers || typeof rec.name === "string") {
+    return {
+      name: typeof rec.name === "string" ? rec.name.trim() || undefined : undefined,
+      url: typeof rec.url === "string" ? rec.url : undefined,
+      headers: asHeaders(rec.headers),
+    };
+  }
+  const keys = Object.keys(rec);
+  const values = Object.values(rec);
+  if (keys.length === 1 && values[0] && typeof values[0] === "object") {
+    const server = values[0] as Record<string, unknown>;
+    return {
+      name: keys[0],
+      url: typeof server.url === "string" ? server.url : undefined,
+      headers: asHeaders(server.headers),
+    };
+  }
+  return null;
+}
+
+export function mcpConnectorDraftJson(connector: { name: string; url: string }): string {
+  return JSON.stringify({ name: connector.name, url: connector.url }, null, 2);
+}

package/src/pages/AcceptInvitePage.tsx

@@ -0,0 +1,99 @@
+// packages/studio/src/pages/AcceptInvitePage.tsx
+import { useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { acceptWorkspaceInvitation, fetchMe, type ApiError } from "../api";
+import { authClient } from "../auth-client";
+import { forgetLastUser } from "../last-user";
+import { replicaStore } from "../replica/instance";
+import { Button } from "../ui/Button";
+import { PageFrame, PageHeader, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+
+function inviteMessage(code: string | undefined, fallback: string) {
+  switch (code) {
+    case "invite_expired":
+      return "This invite has expired. Ask for a new one.";
+    case "invite_revoked":
+      return "This invite was revoked.";
+    case "not_found":
+      return "This invite link is not valid.";
+    case "last_admin":
+      return "Accepting this invite would remove the last admin.";
+    case "email_unverified":
+      return "Verify this email before joining. Sign out, then choose “Email me a magic link” on the sign-in screen.";
+    default:
+      return fallback;
+  }
+}
+
+export function AcceptInvitePage() {
+  const [params] = useSearchParams();
+  const navigate = useNavigate();
+  const token = params.get("token") ?? "";
+  const invitedEmail = params.get("email") ?? "";
+  const [error, setError] = useState<string | null>(null);
+  const [sessionEmail, setSessionEmail] = useState<string | null>(null);
+  const [needsSwitch, setNeedsSwitch] = useState(false);
+
+  useEffect(() => {
+    if (!token) {
+      setError("This invite link is missing a token.");
+      return;
+    }
+    let cancelled = false;
+    void acceptWorkspaceInvitation(token)
+      .then((result) => {
+        if (!cancelled) navigate(`/${result.slug}`, { replace: true });
+      })
+      .catch(async (err: unknown) => {
+        if (cancelled) return;
+        const code = err && typeof err === "object" && "code" in err ? (err as ApiError).code : undefined;
+        if (code === "invite_email_mismatch" || code === "unauthorized") {
+          const me = await fetchMe().catch(() => null);
+          if (cancelled) return;
+          setSessionEmail(me?.user.email ?? null);
+          setNeedsSwitch(true);
+          return;
+        }
+        const fallback = err instanceof Error ? err.message : "Could not accept invite";
+        setError(inviteMessage(code, fallback));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [navigate, token]);
+
+  async function continueAsInvited() {
+    await authClient().signOut().catch(() => undefined);
+    forgetLastUser();
+    void replicaStore.wipe();
+    window.location.assign(window.location.href);
+  }
+
+  return (
+    <PageFrame centered>
+      <PageHeader title="Accept invite" />
+      {needsSwitch ? (
+        <Stack>
+          <Text>
+            {sessionEmail
+              ? `You're signed in as ${sessionEmail}. This invite is for ${invitedEmail || "someone else"}.`
+              : `Sign in as ${invitedEmail || "the invited email"} to join.`}
+          </Text>
+          <Text size="sm" tone="muted">
+            Password and GitHub stay on the next screen. A magic link sends one more email to that address.
+          </Text>
+          <div>
+            <Button type="button" variant="secondary" onClick={() => void continueAsInvited()}>
+              {invitedEmail ? `Sign in as ${invitedEmail}` : "Sign in to continue"}
+            </Button>
+          </div>
+        </Stack>
+      ) : error ? (
+        <Text tone="danger">{error}</Text>
+      ) : (
+        <Text tone="muted">Joining workspace…</Text>
+      )}
+    </PageFrame>
+  );
+}

package/src/pages/BlockSettingsDialog.tsx

@@ -0,0 +1,303 @@
+// packages/studio/src/pages/BlockSettingsDialog.tsx
+import { useState } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+import * as stylex from "@stylexjs/stylex";
+import type { SchemaField } from "../api";
+import { useFieldInput } from "../define-studio";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { Button } from "../ui/Button";
+import { Field } from "../ui/Field";
+import { Input, Textarea } from "../ui/Input";
+import { cx, isTransitioning } from "../ui/popup";
+
+function fieldLabel(name: string, field: SchemaField) {
+  if ("label" in field && typeof field.label === "string" && field.label) return field.label;
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+function compositeText(value: unknown): string {
+  if (value == null || value === "") return "";
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+
+export function BlockSettingsDialog({
+  name,
+  title,
+  fields,
+  value,
+  readOnly,
+  onOpenChange,
+  onSave,
+  onRemove,
+}: {
+  name: string;
+  title?: string;
+  fields: Record<string, SchemaField>;
+  value: Record<string, unknown>;
+  readOnly?: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (props: Record<string, unknown>) => void;
+  onRemove: () => void;
+}) {
+  const [draft, setDraft] = useState(value);
+  const [error, setError] = useState<string | null>(null);
+  const names = Object.keys(fields);
+
+  function save() {
+    const next = { ...draft };
+    for (const [fieldName, field] of Object.entries(fields)) {
+      if (field.kind !== "object" && field.kind !== "array") continue;
+      const raw = next[fieldName];
+      if (typeof raw !== "string" || raw.trim() === "") {
+        next[fieldName] = raw === "" ? "" : raw;
+        continue;
+      }
+      try {
+        next[fieldName] = JSON.parse(raw);
+      } catch {
+        setError(`${fieldLabel(fieldName, field)} needs valid JSON.`);
+        return;
+      }
+    }
+    onSave(next);
+  }
+
+  return (
+    <Dialog.Root open onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Backdrop
+          className={(state) =>
+            cx(styles.backdrop, isTransitioning(state.transitionStatus) && styles.backdropHidden)
+          }
+        />
+        <Dialog.Popup
+          className={(state) =>
+            cx(styles.popup, isTransitioning(state.transitionStatus) && styles.popupHidden)
+          }
+        >
+          <Dialog.Title className={cx(styles.title)}>{title ?? name}</Dialog.Title>
+          <Dialog.Description className={cx(styles.description)}>
+            Settings for this block.
+          </Dialog.Description>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (!readOnly) save();
+            }}
+            {...stylex.props(styles.form)}
+          >
+            {names.length === 0 ? (
+              <p {...stylex.props(styles.empty)}>This block has no settings.</p>
+            ) : (
+              names.map((fieldName) => {
+                const field = fields[fieldName];
+                if (!field) return null;
+                return (
+                  <Field key={fieldName} label={fieldLabel(fieldName, field)}>
+                    <FieldControl
+                      name={fieldName}
+                      field={field}
+                      value={draft[fieldName]}
+                      readOnly={readOnly}
+                      onChange={(next) => {
+                        setError(null);
+                        setDraft((current) => ({ ...current, [fieldName]: next }));
+                      }}
+                    />
+                  </Field>
+                );
+              })
+            )}
+            {error ? <p {...stylex.props(styles.error)}>{error}</p> : null}
+            <div {...stylex.props(styles.actions)}>
+              {readOnly ? null : (
+                <Button variant="danger" onClick={onRemove}>
+                  Remove
+                </Button>
+              )}
+              <div {...stylex.props(styles.actionsEnd)}>
+                <Dialog.Close
+                  render={
+                    <Button variant="secondary" type="button">
+                      Cancel
+                    </Button>
+                  }
+                />
+                {readOnly ? null : (
+                  <Button type="submit">Done</Button>
+                )}
+              </div>
+            </div>
+          </form>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+function FieldControl({
+  name,
+  field,
+  value,
+  readOnly,
+  onChange,
+}: {
+  name: string;
+  field: SchemaField;
+  value: unknown;
+  readOnly?: boolean;
+  onChange: (value: unknown) => void;
+}) {
+  const CustomInput = useFieldInput(field);
+  if (CustomInput) {
+    return (
+      <CustomInput name={name} field={field} value={value} readOnly={readOnly} onChange={onChange} />
+    );
+  }
+  if (field.kind === "boolean") {
+    return (
+      <input
+        type="checkbox"
+        checked={value === true}
+        disabled={readOnly}
+        onChange={(event) => onChange(event.target.checked)}
+        {...stylex.props(styles.check)}
+      />
+    );
+  }
+  if (field.kind === "number") {
+    return (
+      <Input
+        type="number"
+        value={value == null || value === "" ? "" : String(value)}
+        readOnly={readOnly}
+        onChange={(event) => {
+          const raw = event.target.value;
+          onChange(raw === "" ? "" : Number(raw));
+        }}
+      />
+    );
+  }
+  if ("multiline" in field && field.multiline) {
+    return (
+      <Textarea
+        rows={4}
+        value={value == null ? "" : String(value)}
+        readOnly={readOnly}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    );
+  }
+  if (field.kind === "object" || field.kind === "array") {
+    return (
+      <Textarea
+        rows={4}
+        value={compositeText(value)}
+        readOnly={readOnly}
+        spellCheck={false}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    );
+  }
+  return (
+    <Input
+      value={value == null ? "" : String(value)}
+      readOnly={readOnly}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+}
+
+const styles = stylex.create({
+  backdrop: {
+    position: "fixed",
+    inset: 0,
+    zIndex: z.overlay,
+    backgroundColor: colors.overlay,
+    transitionProperty: "opacity",
+    transitionDuration: "120ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  backdropHidden: {
+    opacity: 0,
+  },
+  popup: {
+    position: "fixed",
+    left: "50%",
+    top: "50%",
+    zIndex: z.palette,
+    boxSizing: "border-box",
+    width: "min(440px, calc(100vw - 32px))",
+    maxHeight: "min(640px, calc(100vh - 32px))",
+    overflowY: "auto",
+    transform: "translate(-50%, -50%)",
+    padding: space.xl,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    boxShadow: "0 16px 48px rgba(24, 24, 27, 0.2)",
+    outline: "none",
+    transitionProperty: "opacity, transform",
+    transitionDuration: "120ms",
+    transitionTimingFunction: "ease-out",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  popupHidden: {
+    opacity: 0,
+    transform: "translate(-50%, -50%) scale(0.97)",
+  },
+  title: {
+    margin: 0,
+    fontSize: type.lg,
+    fontWeight: 600,
+    lineHeight: 1.3,
+  },
+  description: {
+    marginTop: space.sm,
+    marginBottom: 0,
+    fontSize: type.md,
+    lineHeight: 1.5,
+    color: colors.textMuted,
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.lg,
+    marginTop: space.xl,
+  },
+  empty: {
+    margin: 0,
+    color: colors.textMuted,
+    fontSize: type.sm,
+  },
+  error: {
+    margin: 0,
+    color: colors.danger,
+    fontSize: type.sm,
+  },
+  check: {
+    width: 16,
+    height: 16,
+    margin: 0,
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.sm,
+    marginTop: space.sm,
+  },
+  actionsEnd: {
+    display: "flex",
+    marginLeft: "auto",
+    gap: space.sm,
+  },
+});