@gogitcms/design-system 0.16.0-next.1 → 0.16.0-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.1",
+  "version": "0.16.0-next.3",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

package/src/__tests__/ContentBrowser.forms.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, within } from "@testing-library/react";
 import { ThemeProvider } from "../ThemeProvider";
 import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
 import { FORMS_NAV_KEY, formsNavKey, type FormInfo, type FormsApi } from "../forms";
@@ -109,3 +109,49 @@ test("an open form takes the whole content area", async () => {
   expect(screen.queryByTestId("forms-empty")).not.toBeInTheDocument();
   expect(screen.queryByTestId("resize-forms")).not.toBeInTheDocument();
 });
+
+// Media, Forms and Changes head their content pane with PaneTitle; a collection
+// heads the same pane with its own header. They have to be the same heading, or
+// the title moves and changes size as you switch between them.
+test("the forms heading matches a collection's, not a smaller indented one", () => {
+  const { unmount } = render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey={FORMS_NAV_KEY}
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+        forms={makeApi()}
+      />,
+    ),
+  );
+  // Scoped to the pane: "Forms" is also the nav item that got us here.
+  const formsHeading = within(screen.getByTestId("pane-forms")).getByText("Forms");
+  // The heading sits directly in Pane's header row — the row with the pane's
+  // height and the rule under it. A padded wrapper of its own in between is
+  // what used to push this title a step right of every collection's.
+  expect(formsHeading.parentElement).toHaveStyle({ height: "48px", paddingLeft: "16px" });
+  const formsStyle = window.getComputedStyle(formsHeading);
+  unmount();
+
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+      />,
+    ),
+  );
+  const collectionHeading = within(screen.getByTestId("pane-entries")).getByText("Posts");
+  const collectionStyle = window.getComputedStyle(collectionHeading);
+
+  expect(formsStyle.fontSize).toBe(collectionStyle.fontSize);
+  expect(formsStyle.fontWeight).toBe(collectionStyle.fontWeight);
+  expect(formsStyle.flexGrow).toBe(collectionStyle.flexGrow);
+});

package/src/__tests__/ProtectedBranchModal.test.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ProtectedBranchModal } from "../components/ProtectedBranchModal";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const base = { branch: "main", onCreate: () => {}, onCancel: () => {} };
+
+test("it names the branch, the document, and offers the one remedy", () => {
+  render(wrap(<ProtectedBranchModal {...base} documentLabel="Hello world" />));
+
+  const modal = screen.getByTestId("protected-branch-modal");
+  expect(modal).toHaveTextContent("This branch is protected");
+  expect(modal).toHaveTextContent("main");
+  expect(modal).toHaveTextContent("Hello world");
+  expect(modal).toHaveTextContent("Branched from main");
+  expect(screen.getByTestId("protected-branch-submit")).toHaveTextContent("Create branch and save");
+});
+
+test("the suggested name prefills the field and submits", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("edit/hello");
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).toHaveBeenCalledWith("edit/hello");
+});
+
+// The author's own name wins: a suggestion arriving late (the host resolves the
+// document a render after the modal opens) must not overwrite what they typed.
+test("a late suggestion does not overwrite a typed name", () => {
+  const { rerender } = render(wrap(<ProtectedBranchModal {...base} />));
+  fireEvent.change(screen.getByTestId("protected-branch-name"), { target: { value: "mine" } });
+  rerender(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" />));
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("mine");
+});
+
+test("an empty name cannot be submitted", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} onCreate={onCreate} />));
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+// While the branch is being created there is no way out but forward: cancelling
+// mid-flight would abandon a save whose branch may already exist.
+test("busy disables both actions and hides the close control", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" busy onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-submit")).toHaveTextContent("Creating…");
+  expect(screen.queryByTestId("protected-branch-close")).not.toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+test("the server's message is shown so a rejected name can be corrected", () => {
+  render(wrap(<ProtectedBranchModal {...base} error={`branch "edit/hello" already exists`} />));
+  expect(screen.getByTestId("protected-branch-error")).toHaveTextContent("already exists");
+});
+
+test("cancel dismisses", () => {
+  const onCancel = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} onCancel={onCancel} />));
+  fireEvent.click(screen.getByTestId("protected-branch-cancel"));
+  expect(onCancel).toHaveBeenCalledTimes(1);
+});

package/src/components/ContentBrowser.tsx

@@ -15,6 +15,7 @@ import { BranchMenu, type BranchRef } from "./BranchMenu";
 import { ProjectMenu, type ProjectRef } from "./ProjectMenu";
 import { ChangeDetail, type DocumentChange, type FieldConflict, type ConflictChoice } from "./ChangeDetail";
 import { ApplyChangesModal, type MergeProgress } from "./ApplyChangesModal";
+import { ProtectedBranchModal } from "./ProtectedBranchModal";
 import { NotificationBell, type NotificationItem } from "./Notifications";
 import {
   CollabInput,
@@ -478,6 +479,19 @@ export type ContentBrowserProps = {
   changeRequestOpen?: boolean;
   changeRequestUrl?: string;
   creatingChangeRequest?: boolean;
+
+  // Protected-branch save prompt. The server refuses a save to a branch the
+  // provider protects; the host catches that, sets protectedBranch to the branch
+  // name, and this modal offers the one thing that resolves it — a branch to put
+  // the edit on. onCreateBranchAndSave receives the name; the host creates the
+  // branch and applies the pending edit to it in one server call.
+  protectedBranch?: string;
+  protectedBranchDocument?: string;
+  protectedBranchSuggestedName?: string;
+  creatingProtectedBranch?: boolean;
+  protectedBranchError?: string | null;
+  onCreateBranchAndSave?: (name: string) => void;
+  onCancelProtectedSave?: () => void;
   onCreateChangeRequest?: (explanation: string) => void;
   onViewChangeRequest?: () => void;
 
@@ -3567,9 +3581,28 @@ function ReadOnlyBanner({ notice, actionLabel, onAction }: { notice?: string; ac
   );
 }
 
-// ApplyModalOverlay renders the apply-changes / change-request modal as a
-// full-screen overlay. Shared by both layouts so the modal (and its "learn more"
-// change-request link) is reachable on mobile too.
+// ModalOverlays renders the browser's full-screen modals — apply changes /
+// change request, and the protected-branch save prompt. Shared by both layouts
+// so every modal is reachable on mobile too.
+function ModalOverlays(props: ContentBrowserProps) {
+  return (
+    <>
+      <ApplyModalOverlay {...props} />
+      {props.protectedBranch ? (
+        <ProtectedBranchModal
+          branch={props.protectedBranch}
+          documentLabel={props.protectedBranchDocument}
+          suggestedName={props.protectedBranchSuggestedName}
+          busy={props.creatingProtectedBranch}
+          error={props.protectedBranchError}
+          onCreate={props.onCreateBranchAndSave ?? (() => {})}
+          onCancel={props.onCancelProtectedSave ?? (() => {})}
+        />
+      ) : null}
+    </>
+  );
+}
+
 function ApplyModalOverlay(props: ContentBrowserProps) {
   if (!props.applyOpen) return null;
   return (
@@ -4066,7 +4099,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
   const readOnlyBanner = (
     <ReadOnlyBanner notice={props.readOnlyNotice} actionLabel={props.readOnlyNoticeActionLabel} onAction={props.onReadOnlyNoticeAction} />
   );
-  const applyModal = <ApplyModalOverlay {...props} />;
+  const modalOverlays = <ModalOverlays {...props} />;
 
   // The changes surface reuses the same three-pane model as Edit, so switching
   // between them doesn't relayout the screen — only what each pane contains
@@ -4119,7 +4152,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
           conflicts={props.selectedConflicts}
           onResolveConflict={props.onResolveConflict}
         />
-        {applyModal}
+        {modalOverlays}
       </AppShell>
     );
   }
@@ -4134,7 +4167,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
         <Pane flex={1} testID="pane-plugin" scroll={false}>
           {props.contentSlot}
         </Pane>
-        {applyModal}
+        {modalOverlays}
       </AppShell>
     );
   }
@@ -4174,7 +4207,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
           <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
             <Text variant="body" color="tertiary" testID="forms-empty">Select a form</Text>
           </View>
-          {applyModal}
+          {modalOverlays}
         </AppShell>
       );
     }
@@ -4192,7 +4225,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
             variant="desktop"
           />
         </Pane>
-        {applyModal}
+        {modalOverlays}
       </AppShell>
     );
   }
@@ -4219,7 +4252,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
             <Text variant="body" color="tertiary" testID="media-sets-empty">Select a media collection</Text>
           </View>
         )}
-        {applyModal}
+        {modalOverlays}
       </AppShell>
     );
   }
@@ -4420,7 +4453,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
           onClose={() => setMovePrompt(false)}
         />
       ) : null}
-      {applyModal}
+      {modalOverlays}
     </AppShell>
   );
 }
@@ -4496,7 +4529,7 @@ function MobileBrowser(props: ContentBrowserProps) {
   const readOnlyBanner = (
     <ReadOnlyBanner notice={props.readOnlyNotice} actionLabel={props.readOnlyNoticeActionLabel} onAction={props.onReadOnlyNoticeAction} />
   );
-  const applyModal = <ApplyModalOverlay {...props} />;
+  const modalOverlays = <ModalOverlays {...props} />;
 
   // Media drills the same way a collection does — nav → list → detail — so the
   // back arrow means the same thing at every level. Pressing Media lists the
@@ -4622,7 +4655,7 @@ function MobileBrowser(props: ContentBrowserProps) {
         testID="mobile-shell"
         header={header}
         title={props.surface === "changes" ? "Changes" : "Content"}
-        overlay={applyModal}
+        overlay={modalOverlays}
       >
         {/* Edit / Changes surface toggle (fits its content) with the Apply button
             to its right on the changes surface. The read-only notice sits below. */}
@@ -4703,7 +4736,7 @@ function MobileBrowser(props: ContentBrowserProps) {
         testID="mobile-entries"
         scroll={false}
         banner={readOnlyBanner}
-        overlay={applyModal}
+        overlay={modalOverlays}
         header={
           search.open ? (
             <SearchHeaderBar search={search} showFilter={facetFields.length > 0} />
@@ -4784,7 +4817,7 @@ function MobileBrowser(props: ContentBrowserProps) {
     <MobileScreen
       testID="mobile-entry"
       banner={readOnlyBanner}
-      overlay={applyModal}
+      overlay={modalOverlays}
       header={
         <>
           <IconButton name="chevronLeft" onPress={backToEntries} size="md" label="Back" />
@@ -5082,14 +5115,20 @@ function mediaSetLabel(sets: MediaSetInfo[], name: string): string {
   return set ? titleCaseWord(set.name) : titleCaseWord(name);
 }
 
-// PaneTitle is the content pane's heading, matching the entry list's header
-// height so the panes line up when switching between content and media.
+// PaneTitle is the content pane's heading for the surfaces with no controls
+// beside it — Changes, Media, Forms.
+//
+// Deliberately the same Text the collection header uses (`listHeader`), and
+// nothing else. Pane's header row already supplies the height, the horizontal
+// padding and the rule beneath, so the padded wrapper this used to add sat
+// inside that padding and pushed the title a step right of every collection's —
+// at `body` rather than `h3`, so it read a size smaller too. Switching between
+// Posts and Media moved the heading twice over.
 function PaneTitle({ title }: { title: string }) {
-  const t = useTheme();
   return (
-    <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(3) }}>
-      <Text variant="body" weight="semibold">{title}</Text>
-    </View>
+    <Text variant="h3" weight="semibold" style={{ flex: 1 }}>
+      {title}
+    </Text>
   );
 }
 

package/src/components/ProtectedBranchModal.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+import { View, Pressable } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Input } from "./Input";
+import { Button } from "./Button";
+
+export type ProtectedBranchModalProps = {
+  /** The protected branch the save was refused on. */
+  branch: string;
+  /** The document that could not be saved, for naming what is at stake. */
+  documentLabel?: string;
+  /** Prefills the field — the host derives it from the document. */
+  suggestedName?: string;
+  /** True while the branch is being created and the save applied. */
+  busy?: boolean;
+  /** The server's message, when the attempt failed. */
+  error?: string | null;
+  /** Create `name` from `branch` and save the pending edit onto it. */
+  onCreate: (name: string) => void;
+  /** Dismiss. The edit stays as an unsaved draft on the protected branch. */
+  onCancel: () => void;
+};
+
+/**
+ * Shown when a save is refused because the branch is protected.
+ *
+ * It is a prompt rather than an error banner because the refusal has exactly one
+ * remedy and the editor knows what it is: the work is intact, it just needs
+ * somewhere it can land. Presenting that as "here is a message, now go find the
+ * branch menu" would make the author reconstruct a plan the product already has.
+ *
+ * The draft is deliberately NOT discarded on cancel — a protected branch is
+ * often noticed mid-thought, and the author may want to keep writing and pick a
+ * branch name later. It stays in storage exactly as any other unsaved work does.
+ */
+export function ProtectedBranchModal({
+  branch, documentLabel, suggestedName, busy, error, onCreate, onCancel,
+}: ProtectedBranchModalProps) {
+  const t = useTheme();
+  const [name, setName] = useState(suggestedName ?? "");
+  // The suggestion is derived from the document, which the host may resolve a
+  // render after the modal opens. Adopted only while the field is untouched.
+  const [touched, setTouched] = useState(false);
+  useEffect(() => {
+    if (!touched && suggestedName) setName(suggestedName);
+  }, [suggestedName, touched]);
+
+  const trimmed = name.trim();
+  const submit = () => {
+    if (!trimmed || busy) return;
+    onCreate(trimmed);
+  };
+
+  return (
+    <View
+      testID="protected-branch-modal"
+      style={{
+        position: "absolute", top: 0, left: 0, right: 0, bottom: 0, zIndex: 50,
+        alignItems: "center", justifyContent: "center", padding: t.space(4),
+        backgroundColor: "rgba(0,0,0,0.45)",
+      }}
+    >
+      <View
+        style={{
+          width: 460, maxWidth: "100%", gap: t.space(4), padding: t.space(5),
+          borderRadius: t.radius.lg, borderWidth: 1, borderColor: t.color.borderDefault,
+          backgroundColor: t.color.surfaceRaised,
+        }}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+            <Icon name="lock" size={16} color={t.color.textSecondary} />
+            <Text variant="h3" weight="semibold">This branch is protected</Text>
+          </View>
+          {busy ? null : (
+            <Pressable
+              testID="protected-branch-close"
+              accessibilityRole="button"
+              accessibilityLabel="Cancel"
+              onPress={onCancel}
+              style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
+            >
+              <Icon name="x" size={18} color={t.color.textSecondary} />
+            </Pressable>
+          )}
+        </View>
+
+        <Text variant="body" color="secondary">
+          {documentLabel
+            ? `${branch} doesn’t accept changes directly, so “${documentLabel}” can’t be saved to it. Name a branch to save it to instead — your edit lands there.`
+            : `${branch} doesn’t accept changes directly. Name a branch to save your edit to instead.`}
+        </Text>
+
+        <Input
+          label="New branch"
+          value={name}
+          onChangeText={(v) => { setTouched(true); setName(v); }}
+          onSubmitEditing={submit}
+          placeholder="feat/my-change"
+          autoCapitalize="none"
+          autoFocus
+          mono
+          editable={!busy}
+          error={!!error}
+          testID="protected-branch-name"
+        />
+        <Text variant="monoSm" color="tertiary">{`Branched from ${branch}`}</Text>
+
+        {error ? (
+          <Text testID="protected-branch-error" variant="monoSm" color={t.color.diffDelFg}>{error}</Text>
+        ) : null}
+
+        <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: t.space(2) }}>
+          <Button
+            title="Cancel"
+            variant="ghost"
+            size="md"
+            disabled={busy}
+            onPress={onCancel}
+            testID="protected-branch-cancel"
+          />
+          <Button
+            title={busy ? "Creating…" : "Create branch and save"}
+            variant="primary"
+            size="md"
+            disabled={busy || trimmed === ""}
+            onPress={submit}
+            testID="protected-branch-submit"
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/index.ts

@@ -55,6 +55,8 @@ export type {
 } from "./components/ApplyChangesModal";
 
 // Change-request summary surface (developer escalation)
+export { ProtectedBranchModal } from "./components/ProtectedBranchModal";
+export type { ProtectedBranchModalProps } from "./components/ProtectedBranchModal";
 export { ChangeRequestSummary } from "./components/ChangeRequestSummary";
 export type {
   ChangeRequestSummaryProps,