@backmatter/studio 0.0.1

package/src/chrome/content-api-url.ts

@@ -0,0 +1,111 @@
+// packages/studio/src/chrome/content-api-url.ts
+// Public content GET the host reads — same URLs as @backmatter/core api-loader.
+
+export type ContentApiDoc = { locale: string; type: string; slug: string };
+
+export type ContentApiContext = {
+  doc: ContentApiDoc | null;
+  type: string | null;
+};
+
+export function contentApiContextFromPath(
+  pathname: string,
+  search = "",
+): ContentApiContext {
+  const localeFromQuery = new URLSearchParams(
+    search.startsWith("?") ? search.slice(1) : search,
+  ).get("locale");
+  const doc = pathname.match(/\/content\/([^/]+)\/([^/]+)\/?$/);
+  if (doc) {
+    return {
+      doc: {
+        locale: localeFromQuery || "en",
+        type: decodeURIComponent(doc[1]!),
+        slug: decodeURIComponent(doc[2]!),
+      },
+      type: null,
+    };
+  }
+  const type = pathname.match(/\/content\/([^/]+)\/?$/);
+  if (type) {
+    return { doc: null, type: decodeURIComponent(type[1]!) };
+  }
+  const legacyDoc = pathname.match(/\/docs\/([^/]+)\/([^/]+)\/([^/]+)\/?$/);
+  if (legacyDoc) {
+    return {
+      doc: {
+        locale: decodeURIComponent(legacyDoc[1]!),
+        type: decodeURIComponent(legacyDoc[2]!),
+        slug: decodeURIComponent(legacyDoc[3]!),
+      },
+      type: null,
+    };
+  }
+  const legacyType = pathname.match(/\/types\/([^/]+)\/?$/);
+  if (legacyType) {
+    return { doc: null, type: decodeURIComponent(legacyType[1]!) };
+  }
+  return { doc: null, type: null };
+}
+
+export function publicContentApiUrl(input: {
+  apiUrl: string;
+  workspaceId: string;
+  branch?: string | null;
+  defaultBranch?: string | null;
+  locale?: string;
+  type?: string;
+  slug?: string;
+}): string {
+  const origin = input.apiUrl.replace(/\/$/, "");
+  const path =
+    input.locale && input.type && input.slug
+      ? `/${input.locale}/${input.type}/${input.slug}`
+      : "";
+  if (!input.workspaceId.startsWith("ws_")) {
+    throw new Error("public content URLs must use the workspace id (ws_…), not the slug");
+  }
+  const url = new URL(`${origin}/public/workspaces/${input.workspaceId}/docs${path}`);
+  const branch = input.branch?.trim() || undefined;
+  const isDefault = !branch || (input.defaultBranch != null && branch === input.defaultBranch);
+  if (branch && !isDefault) url.searchParams.set("branch", branch);
+  if (!input.slug && input.type) url.searchParams.set("type", input.type);
+  return url.toString();
+}
+
+export function contentApiLinks(input: {
+  apiUrl: string;
+  workspaceId: string;
+  branch?: string | null;
+  defaultBranch?: string | null;
+  pathname: string;
+  search?: string;
+}): Array<{ label: string; href: string }> {
+  const ctx = contentApiContextFromPath(input.pathname, input.search);
+  const base = {
+    apiUrl: input.apiUrl,
+    workspaceId: input.workspaceId,
+    branch: input.branch,
+    defaultBranch: input.defaultBranch,
+  };
+  const links: Array<{ label: string; href: string }> = [];
+  if (ctx.doc) {
+    links.push({
+      label: "This document",
+      href: publicContentApiUrl({
+        ...base,
+        locale: ctx.doc.locale,
+        type: ctx.doc.type,
+        slug: ctx.doc.slug,
+      }),
+    });
+  }
+  links.push({
+    label: ctx.type ? `${ctx.type} docs` : "All docs",
+    href: publicContentApiUrl({
+      ...base,
+      type: ctx.type ?? undefined,
+    }),
+  });
+  return links;
+}

package/src/chrome/content-type-groups.ts

@@ -0,0 +1,32 @@
+// packages/studio/src/chrome/content-type-groups.ts
+export type ContentTypeNav = {
+  type: string;
+  path: string;
+  route?: string | false;
+  singleton?: boolean;
+};
+
+export type ContentTypeSection = "pages" | "data" | "globals";
+
+export function contentTypeSection(model: ContentTypeNav): ContentTypeSection {
+  if (model.singleton) return "globals";
+  if (model.route === false) return "data";
+  return "pages";
+}
+
+export function groupContentTypes(models: ContentTypeNav[]) {
+  const pages: ContentTypeNav[] = [];
+  const data: ContentTypeNav[] = [];
+  const globals: ContentTypeNav[] = [];
+  for (const model of models) {
+    const section = contentTypeSection(model);
+    if (section === "globals") globals.push(model);
+    else if (section === "data") data.push(model);
+    else pages.push(model);
+  }
+  return { pages, data, globals };
+}
+
+export function modelHasLocale(path: string) {
+  return path.includes("{locale}");
+}

package/src/chrome/hotkeys.ts

@@ -0,0 +1,79 @@
+// packages/studio/src/chrome/hotkeys.ts
+export type HotkeyAction = "save" | "palette" | "chat";
+
+export type HotkeyLike = {
+  key: string;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  shiftKey?: boolean;
+  altKey?: boolean;
+};
+
+export function matchAppHotkey(event: HotkeyLike): HotkeyAction | null {
+  if (!(event.metaKey || event.ctrlKey)) return null;
+  const key = event.key.toLowerCase();
+  if (key === "s") return "save";
+  if (key === "k") return "palette";
+  if (key === "j") return "chat";
+  return null;
+}
+
+export function parsePreviewHotkey(data: unknown): HotkeyLike | null {
+  if (!data || typeof data !== "object") return null;
+  const record = data as Record<string, unknown>;
+  if (record.type !== "backmatter:hotkey") return null;
+  if (typeof record.key !== "string") return null;
+  return {
+    key: record.key,
+    metaKey: Boolean(record.metaKey),
+    ctrlKey: Boolean(record.ctrlKey),
+    shiftKey: Boolean(record.shiftKey),
+    altKey: Boolean(record.altKey),
+  };
+}
+
+export function previewSiteOrigin(
+  siteUrls: readonly string[] | null | undefined,
+): string | null {
+  const raw = siteUrls?.[0]?.trim();
+  if (!raw) return null;
+  try {
+    return new URL(raw).origin;
+  } catch {
+    return null;
+  }
+}
+
+/** Cmd/Ctrl+J inside a framed CMS panel asks the parent site to toggle chat. */
+export function installParentChatHotkey(): () => void {
+  function onKey(event: KeyboardEvent) {
+    if (window.parent === window) return;
+    if (matchAppHotkey(event) !== "chat") return;
+    event.preventDefault();
+    let target = "";
+    try {
+      if (document.referrer) target = new URL(document.referrer).origin;
+    } catch {
+      target = "";
+    }
+    if (!target) return;
+    window.parent.postMessage(
+      {
+        type: "backmatter:hotkey",
+        key: "j",
+        metaKey: event.metaKey,
+        ctrlKey: event.ctrlKey,
+        shiftKey: Boolean(event.shiftKey),
+        altKey: Boolean(event.altKey),
+      },
+      target,
+    );
+  }
+  document.addEventListener("keydown", onKey, true);
+  return () => document.removeEventListener("keydown", onKey, true);
+}
+
+export function modifierSymbol(): string {
+  if (typeof navigator === "undefined") return "Ctrl";
+  return navigator.platform.toLowerCase().includes("mac") ? "⌘" : "Ctrl";
+}

package/src/chrome/icons.tsx

@@ -0,0 +1,191 @@
+// packages/studio/src/chrome/icons.tsx
+import Github from "@thesvg/react/github";
+
+export function DocIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M4.5 2.5h5.2L12 4.8V13a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.5 2.5V5H12"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function GearIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M8 10.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+      />
+      <path
+        d="M6.6 2.4h2.8l.35 1.45a4.7 4.7 0 0 1 1.15.67l1.4-.55 1.4 2.4-1.05 1.05c.05.28.08.57.08.86s-.03.58-.08.86l1.05 1.05-1.4 2.4-1.4-.55a4.7 4.7 0 0 1-1.15.67L9.4 13.6H6.6l-.35-1.45a4.7 4.7 0 0 1-1.15-.67l-1.4.55-1.4-2.4 1.05-1.05A4.9 4.9 0 0 1 3.27 8c0-.29.03-.58.08-.86L2.3 6.1l1.4-2.4 1.4.55c.35-.28.74-.51 1.15-.67L6.6 2.4Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function GithubIcon({ size = 16 }: { size?: number }) {
+  return <Github variant="mono" width={size} height={size} aria-hidden />;
+}
+
+export function PlugIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M6 3.5v3M10 3.5v3M4.5 6.5h7v2.2c0 2.2-1.8 4.3-3.5 4.8v1.5h-0"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.5 6.5h7v2.2A3.7 3.7 0 0 1 8 13.3V14.5"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function SchemaIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M3.5 4.5h9M3.5 8h9M3.5 11.5h6"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function ApiIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M6 4.5 2.5 8 6 11.5M10 4.5 13.5 8 10 11.5"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ExternalIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M9 3h4v4M13 3 7.5 8.5M11 9.5V12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h2.5"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function GitBranchIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <circle cx="4.5" cy="4" r="1.75" stroke="currentColor" strokeWidth="1.25" />
+      <circle cx="11.5" cy="12" r="1.75" stroke="currentColor" strokeWidth="1.25" />
+      <circle cx="4.5" cy="12" r="1.75" stroke="currentColor" strokeWidth="1.25" />
+      <path
+        d="M4.5 5.75v4.5M4.5 8.5h4.2a3 3 0 0 1 3 3"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function UsersIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <circle cx="6" cy="5.5" r="1.75" stroke="currentColor" strokeWidth="1.25" />
+      <path
+        d="M2.75 12.75v-.35c0-1.5 1.45-2.55 3.25-2.55s3.25 1.05 3.25 2.55v.35"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+      <circle cx="11.1" cy="6.1" r="1.3" stroke="currentColor" strokeWidth="1.25" />
+      <path
+        d="M11.15 9.9c1.15.22 2.1.95 2.1 2.1v.75"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function OrgIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M3.5 13.5v-8l4.5-3 4.5 3v8"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.5 13.5v-4h3v4"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ReloadIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+      />
+      <path
+        d="M13.5 3.5v2.8h-2.8"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function MoreIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+      <circle cx="3.5" cy="8" r="1.25" />
+      <circle cx="8" cy="8" r="1.25" />
+      <circle cx="12.5" cy="8" r="1.25" />
+    </svg>
+  );
+}

package/src/chrome/open-site.ts

@@ -0,0 +1,30 @@
+// packages/studio/src/chrome/open-site.ts
+// Pure helpers for the dashboard's "Open site" control.
+
+/** Distinct, parseable site URLs in the order the workspace lists them. */
+export function openableSites(siteUrls: readonly string[]): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const raw of siteUrls) {
+    const value = raw.trim();
+    if (!value) continue;
+    let origin: string;
+    try {
+      origin = new URL(value).origin;
+    } catch {
+      continue;
+    }
+    if (seen.has(origin)) continue;
+    seen.add(origin);
+    out.push(value);
+  }
+  return out;
+}
+
+export function siteLabel(site: string): string {
+  try {
+    return new URL(site).host;
+  } catch {
+    return site;
+  }
+}

package/src/chrome/status-bar-action.ts

@@ -0,0 +1,24 @@
+// packages/studio/src/chrome/status-bar-action.ts
+
+export type StatusBarAction = "resolve" | "commit" | "blocked";
+
+/**
+ * What the status-bar deploy button does.
+ * Conflicts open the resolve list for every role. Writers stay blocked only
+ * when the remaining action is a commit.
+ */
+export function statusBarAction(
+  conflictCount: number,
+  publish: boolean,
+): StatusBarAction {
+  if (conflictCount > 0) return "resolve";
+  if (!publish) return "blocked";
+  return "commit";
+}
+
+export function commitTriggerDisabled(
+  action: StatusBarAction,
+  flags: { committing: boolean; syncing: boolean },
+): boolean {
+  return action === "blocked" || flags.committing || flags.syncing;
+}

package/src/components/AppChromeContext.tsx

@@ -0,0 +1,32 @@
+// packages/studio/src/components/AppChromeContext.tsx
+import { createContext, useContext } from "react";
+
+export type AppChrome = {
+  userId: string;
+  email: string;
+  onLogout: () => void;
+};
+
+const AppChromeContext = createContext<AppChrome | null>(null);
+
+export function AppChromeProvider({
+  value,
+  children,
+}: {
+  value: AppChrome;
+  children: React.ReactNode;
+}) {
+  return (
+    <AppChromeContext.Provider value={value}>
+      {children}
+    </AppChromeContext.Provider>
+  );
+}
+
+export function useAppChrome(): AppChrome {
+  const ctx = useContext(AppChromeContext);
+  if (!ctx) {
+    throw new Error("useAppChrome must be used within AppChromeProvider");
+  }
+  return ctx;
+}

package/src/components/Shell.tsx

@@ -0,0 +1,18 @@
+// packages/studio/src/components/Shell.tsx
+import { AppChromeProvider } from "./AppChromeContext";
+import { AppShell } from "../chrome/AppShell";
+
+type Props = {
+  userId: string;
+  email: string;
+  onLogout: () => void;
+  children: React.ReactNode;
+};
+
+export function Shell({ userId, email, onLogout, children }: Props) {
+  return (
+    <AppChromeProvider value={{ userId, email, onLogout }}>
+      <AppShell>{children}</AppShell>
+    </AppChromeProvider>
+  );
+}