@drawnagency/primitives 0.1.80 → 0.1.81

package/src/components/shell/DocumentEditorOverlay.tsx

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { Page } from "../../schemas/site-config";
+import type { MediaManifest } from "../../media/types";
+import type { LoadedSection } from "../../lib/loader";
+import {
+  DocViewer,
+  documentOptionsSchema,
+  sectionSettingsSchema,
+  settingsFor,
+  type Chunk,
+  type DocHost,
+  type DocumentOptions,
+} from "../../document";
+import { DocInspector, type DocInspectorProps } from "./DocInspector";
+import { buildDraftDocumentInput } from "../../lib/document-input";
+import { Button } from "../shared/Button";
+// The sealed document stylesheet ships with its editor consumer (Task 6 decided
+// the present route imports it from its island; this is the editor's island).
+// Vitest stubs CSS imports, so it stays out of the jsdom test graph regardless.
+import "../../document/styles/document.css";
+
+export interface DocumentEditorOverlayProps {
+  /** The active page — its `document` block must be enabled for the FAB to mount. */
+  page: Page;
+  /**
+   * The page's draft sections, in `page.order` order. The overlay drops
+   * archived ones itself — /present renders only live sections, so a chunk the
+   * published document will never show must not influence the proofed layout.
+   */
+  sections: LoadedSection[];
+  manifest: MediaManifest;
+  /** Wired by the shell to `setPageDocument` + the local-changes dirty flag. */
+  onUpdateDocument: (patch: Partial<DocumentOptions>) => void;
+  onClose: () => void;
+}
+
+/**
+ * Full-viewport editing surface: DocViewer (edit mode, ghosts + selection) on
+ * the left, DocInspector (settings for the current selection) on the right.
+ *
+ * The engine input is rebuilt from the live draft (page + in-memory sections +
+ * manifest) on every prop change, so unsaved edits repaginate immediately —
+ * the pagination hook's stale-heights guard absorbs the shape changes.
+ */
+export function DocumentEditorOverlay({
+  page,
+  sections,
+  manifest,
+  onUpdateDocument,
+  onClose,
+}: DocumentEditorOverlayProps) {
+  // page.document is optional on the type; the caller only mounts this when it
+  // is enabled, but parse-with-defaults keeps us total either way.
+  const doc = useMemo(() => documentOptionsSchema.parse(page.document ?? {}), [page.document]);
+
+  const source = useMemo(
+    () =>
+      buildDraftDocumentInput({
+        page,
+        sections: sections.filter((s) => s.meta.status !== "archived"),
+        manifest,
+      }),
+    [page, sections, manifest],
+  );
+
+  // Titles (for the inspector header) + per-chunk warnings come straight from
+  // DocViewer's single pagination pass via onDocState — no second useDocPages.
+  const [docState, setDocState] = useState<{ chunks: Chunk[]; warningsByChunk: Record<string, string[]> }>({
+    chunks: [],
+    warningsByChunk: {},
+  });
+  const { chunks, warningsByChunk } = docState;
+
+  // null = cover selected.
+  const [selectedChunkId, setSelectedChunkId] = useState<string | null>(null);
+
+  // All media bytes come from /api/media (draft branch bytes are served to
+  // editor sessions) — the same host shape the present route uses.
+  const host: DocHost = useMemo(
+    () => ({
+      variant: "preview",
+      imageSrc: (image, variant) =>
+        `/api/media/${image.imageId}/${variant === "print" ? image.printFile : image.previewFile}`,
+    }),
+    [],
+  );
+
+  // Escape closes (the close button is the other exit). DocViewer owns arrow
+  // paging on its own window listener; Escape doesn't collide with it. An
+  // Escape aimed at an inspector control is the cancel-the-field gesture, not
+  // "leave the editor": text fields blur (so the next Escape closes), and a
+  // select is left alone entirely — the browser uses Escape to dismiss its
+  // popup and there's no way to tell whether one is open.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      const t = e.target as HTMLElement | null;
+      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) {
+        t.blur();
+        return;
+      }
+      if (t && t.tagName === "SELECT") return;
+      e.preventDefault();
+      onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const selection: DocInspectorProps["selection"] = useMemo(() => {
+    if (selectedChunkId === null) return { kind: "cover" };
+    const chunk = chunks.find((c) => c.id === selectedChunkId);
+    return { kind: "chunk", chunkId: selectedChunkId, title: chunk?.title ?? selectedChunkId };
+  }, [selectedChunkId, chunks]);
+
+  const warnings = selectedChunkId ? warningsByChunk[selectedChunkId] ?? [] : [];
+
+  // Merge the inspector's partial patch onto the chunk's CURRENT settings and
+  // ship the whole validated block — setPageDocument merges sections shallowly
+  // by key, so we must hand it a complete SectionSettings, not a fragment.
+  const handleUpdateSection = useCallback(
+    (chunkId: string, patch: Record<string, unknown>) => {
+      const merged = sectionSettingsSchema.parse({ ...settingsFor(doc.sections, chunkId), ...patch });
+      onUpdateDocument({ sections: { [chunkId]: merged } });
+    },
+    [doc.sections, onUpdateDocument],
+  );
+
+  // Cover/meta are single objects on the document; merge onto the current value
+  // so a one-field edit doesn't blank the siblings before setPageDocument runs.
+  const handleUpdateCover = useCallback(
+    (patch: Partial<DocumentOptions["cover"]>) => onUpdateDocument({ cover: { ...doc.cover, ...patch } }),
+    [doc.cover, onUpdateDocument],
+  );
+  const handleUpdateMeta = useCallback(
+    (patch: Partial<DocumentOptions["meta"]>) => onUpdateDocument({ meta: { ...doc.meta, ...patch } }),
+    [doc.meta, onUpdateDocument],
+  );
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-base" role="dialog" aria-modal="true" aria-label="Document editor">
+      <div className="flex items-center justify-between border-b border-base-200 bg-base px-4 py-2">
+        <span className="text-sm font-medium text-base-contrast">Document · {page.title}</span>
+        <Button variant="secondary" size="sm" aria-label="Close document editor" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+      <div className="flex min-h-0 flex-1">
+        <DocViewer
+          source={source}
+          document={doc}
+          host={host}
+          mode="edit"
+          selectedChunkId={selectedChunkId}
+          onSelectChunk={setSelectedChunkId}
+          onDocState={setDocState}
+        />
+        <DocInspector
+          document={doc}
+          selection={selection}
+          warnings={warnings}
+          onUpdateCover={handleUpdateCover}
+          onUpdateMeta={handleUpdateMeta}
+          onUpdateSection={handleUpdateSection}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/shell/DocumentPresentOverlay.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useMemo } from "react";
+import type { Page } from "../../schemas/site-config";
+import type { MediaManifest } from "../../media/types";
+import type { LoadedSection } from "../../lib/loader";
+import { DocViewer, documentOptionsSchema, type DocHost } from "../../document";
+import { buildDraftDocumentInput } from "../../lib/document-input";
+// Same sealed document stylesheet the editor overlay ships (see
+// DocumentEditorOverlay). Vitest stubs CSS imports, so it stays out of the jsdom
+// test graph regardless.
+import "../../document/styles/document.css";
+
+export interface DocumentPresentOverlayProps {
+  /** The active page — its `document` block supplies cover/meta/section settings. */
+  page: Page;
+  /**
+   * The sections currently on the canvas (already page-ordered and filtered to
+   * the branch being previewed). The shell derives these from the same
+   * `computeDisplaySections` call the history/branch canvas renders.
+   */
+  sections: LoadedSection[];
+  manifest: MediaManifest;
+  onClose: () => void;
+}
+
+/**
+ * Read-only, full-viewport document PRESENTATION of the content currently being
+ * viewed — used when the shell is previewing a non-draft version (the published
+ * branch). It is `DocViewer` in `present` mode: no inspector, no update path.
+ *
+ * Product decision (Drew): history/branch views are the record — we present them
+ * but never open the editor over them. Document SETTINGS come from the current
+ * draft's `page.document`; the previewed branch's own document index is not
+ * carried in the shell's `viewSections`, so cover/meta/exclusions here reflect
+ * the draft, not the historical commit. This is an accepted approximation: we
+ * are rendering historical *content* with the draft's presentation settings.
+ */
+export function DocumentPresentOverlay({
+  page,
+  sections,
+  manifest,
+  onClose,
+}: DocumentPresentOverlayProps) {
+  // page.document is optional on the type; the caller only mounts this when it
+  // is enabled, but parse-with-defaults keeps us total either way.
+  const doc = useMemo(() => documentOptionsSchema.parse(page.document ?? {}), [page.document]);
+
+  const source = useMemo(
+    () => buildDraftDocumentInput({ page, sections, manifest }),
+    [page, sections, manifest],
+  );
+
+  // All media bytes come from /api/media — the same host shape the present route
+  // and the editor overlay use.
+  const host: DocHost = useMemo(
+    () => ({
+      variant: "preview",
+      imageSrc: (image, variant) =>
+        `/api/media/${image.imageId}/${variant === "print" ? image.printFile : image.previewFile}`,
+    }),
+    [],
+  );
+
+  // Escape closes, matching the editor overlay. DocViewer owns arrow paging on
+  // its own window listener; Escape doesn't collide with it.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex flex-col bg-base"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Document presentation"
+    >
+      <div className="flex min-h-0 flex-1">
+        <DocViewer source={source} document={doc} host={host} mode="present" onClose={onClose} />
+      </div>
+    </div>
+  );
+}

package/src/components/shell/EditorShell.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, useCallback, useEffect, useRef, useMemo, type ReactNode } from "react";
+import { Fragment, Suspense, lazy, useState, useCallback, useEffect, useRef, useMemo, type ReactNode } from "react";
 
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -10,6 +10,10 @@ import type { SiteIndex, SiteConfig, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 import type { MediaManifest } from "../../media/types";
 import type { QueueItem } from "../../media/queue";
+// Sanctioned outside->inside import: document/ is a sealed subtree, but the
+// Document mode toggle wiring needs the patch shape it edits (mirrors the same
+// sanctioned import in schemas/site-config.ts and lib/pages.ts).
+import type { DocumentOptions } from "../../document/engine/settings";
 import { SiteConfigSchema, IndexSchema } from "../../schemas/site-config";
 import { ensureSanitizer } from "../../lib/sanitize";
 import { EditorProvider, useEditorContext, type HistoryState } from "./EditorContext";
@@ -34,6 +38,17 @@ import { buildInsertMenuOptions, resolveInsertedContent } from "../../lib/insert
 
 ensureSectionsRegistered();
 import { BugReportFAB } from "./BugReportFAB";
+// Lazy boundary: the document editor/presentation overlays (and the whole
+// document engine they pull in) must not weigh /edit on sites that never use
+// document mode — they load only when a document-enabled page opens the overlay.
+// Named exports → adapt to the default-export shape React.lazy expects (mirrors
+// the ChatPanel lazy import convention in ChatWidget).
+const DocumentEditorOverlay = lazy(() =>
+  import("./DocumentEditorOverlay").then((m) => ({ default: m.DocumentEditorOverlay })),
+);
+const DocumentPresentOverlay = lazy(() =>
+  import("./DocumentPresentOverlay").then((m) => ({ default: m.DocumentPresentOverlay })),
+);
 import { SectionWrapper } from "../editor/SectionWrapper";
 import { SectionOrderingModal } from "../editor/SectionOrderingModal";
 import { MoveSectionModal } from "../editor/MoveSectionModal";
@@ -72,7 +87,7 @@ import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent
 import {
   homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
   reorderSectionInPage,
-  setHomePage, setPageArchived, setPageFields, setPageAudience, deletePage, addPage, reorderPages,
+  setHomePage, setPageArchived, setPageFields, setPageAudience, setPageDocument, deletePage, addPage, reorderPages,
   moveSection as moveSectionReducer,
 } from "../../lib/pages";
 import { PagesContext } from "../shared/PagesContext";
@@ -187,6 +202,7 @@ export default function EditorShell({
   const [showOrderingModal, setShowOrderingModal] = useState(false);
   const [showPagesModal, setShowPagesModal] = useState(false);
   const [showChatbotConfig, setShowChatbotConfig] = useState(false);
+  const [showDocumentEditor, setShowDocumentEditor] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
   const [rejectedUploads, setRejectedUploads] = useState<{ name: string; reason: "size" | "type" }[]>([]);
   // Surfaces useMediaPipeline's onUploadError (oversized/disallowed files,
@@ -208,6 +224,13 @@ export default function EditorShell({
   // takeover confirmation is pending for.
   const [remoteNotice, setRemoteNotice] = useState<string | null>(null);
   const [pendingTakeoverId, setPendingTakeoverId] = useState<string | null>(null);
+  // Lifted from EditorContext.historyState by HistoryWatcher (mirrors
+  // ViewBranchWatcher's setViewSections lift) — the shell body renders the
+  // EditorProvider, so it can't read historyState via useEditorContext directly.
+  // Drives the Document FAB gate below: history is presentation only, never
+  // editing (branch-preview already routes to DocumentPresentOverlay; this
+  // covers the separate historySelectEvent commit view).
+  const [historyActive, setHistoryActive] = useState(false);
 
   const siteIndexRef = useRef<SiteIndex>({ siteId, pages: [], sections: {} });
   // Ids of sections that exist on the remote (loaded from server, or persisted by
@@ -285,6 +308,26 @@ export default function EditorShell({
     return audiences.filter((a) => resolvedActivePage.access.includes(a.name));
   }, [resolvedActivePage, audiences]);
 
+  // The sections shown on the canvas when previewing the published ("live")
+  // branch — the SAME list computeDisplaySections renders for viewBranch "live".
+  // Only meaningful while viewSections !== null (branch view); the read-only
+  // document presentation overlay renders exactly these so it mirrors the canvas.
+  // (viewSections is set only for the live branch, so its non-null-ness IS the
+  // "branch view" signal at this level.)
+  const branchDisplaySections = useMemo(
+    () =>
+      viewSections && resolvedActivePage
+        ? computeDisplaySections({
+            isEditMode: false,
+            viewBranch: "live",
+            sections,
+            viewSections,
+            activePageSectionIds: resolvedActivePage.order,
+          })
+        : [],
+    [viewSections, resolvedActivePage, sections],
+  );
+
   const getPageHeadings = useCallback(
     (pageId: string) => {
       const page = pageById(siteIndex, pageId);
@@ -1218,6 +1261,11 @@ export default function EditorShell({
     persistence.markIndexDirty(); setLocalChangesExist(true);
   }, [persistence]);
 
+  const handleSetPageDocument = useCallback((id: string, patch: Partial<DocumentOptions>) => {
+    setSiteIndex((prev) => setPageDocument(prev, id, patch));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
   const handleSetPageAudience = useCallback((id: string, access: string[]) => {
     const { index: next, resetSectionIds } = setPageAudience(siteIndexRef.current, id, access);
     setSiteIndex(next);
@@ -1363,7 +1411,7 @@ export default function EditorShell({
       <ViewBranchWatcher
         setViewSections={setViewSections}
       />
-      <HistoryWatcher />
+      <HistoryWatcher onHistoryActiveChange={setHistoryActive} />
       <EditorModalProvider>
         <MediaLibraryContext.Provider value={{
           ...mediaPipeline.contextValue,
@@ -1408,6 +1456,59 @@ export default function EditorShell({
               the button would always 401 — hide it there. */}
           {!capabilities.passwordOnly && <BugReportFAB />}
 
+          {/* Document editor: opens the full-screen editing surface for the
+              active page when its document mode is enabled. Mirrors the viewer
+              document FAB's icon; sits above BugReportFAB (bottom-40 clears the
+              bottom-28 bug button + gap) so the two never collide.
+              !historyActive: history is presentation only, never editing — while
+              viewing a specific historical commit (historySelectEvent →
+              EditorContext.historyState, lifted here by HistoryWatcher since this
+              scope renders the provider and can't read the context directly),
+              hide the FAB so it can't open the draft editor over a history view. */}
+          {resolvedActivePage?.document?.enabled && !historyActive && (
+            <button
+              type="button"
+              onClick={() => setShowDocumentEditor(true)}
+              aria-label="Edit as document"
+              className="cursor-pointer fixed bottom-40 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <rect x="3" y="4" width="18" height="14" rx="2" />
+                <path d="M8 21h8" />
+              </svg>
+            </button>
+          )}
+          {showDocumentEditor && resolvedActivePage?.document?.enabled && (
+            <Suspense fallback={<DocumentOverlayFallback />}>
+              {/* Branch/history view (viewSections !== null → previewing the
+                  published branch): presentation only, never the editor. Drew's
+                  product decision — old versions are the record, and we have no
+                  way to edit them, so opening the editor over one would be a lie.
+                  The draft view (viewSections === null) still opens the real
+                  editor. NOTE: viewSections drives the "Published" branch preview
+                  only; the separate historySelectEvent commit view
+                  (EditorContext.historyState) is the OTHER read-only case — the
+                  historyActive-gated FAB above is what keeps this overlay from
+                  ever being opened onto it in the first place. */}
+              {viewSections !== null ? (
+                <DocumentPresentOverlay
+                  page={resolvedActivePage}
+                  sections={branchDisplaySections}
+                  manifest={mediaManifest}
+                  onClose={() => setShowDocumentEditor(false)}
+                />
+              ) : (
+                <DocumentEditorOverlay
+                  page={resolvedActivePage}
+                  sections={activeSections}
+                  manifest={mediaManifest}
+                  onUpdateDocument={(patch) => handleSetPageDocument(resolvedActivePage.id, patch)}
+                  onClose={() => setShowDocumentEditor(false)}
+                />
+              )}
+            </Suspense>
+          )}
+
           {/* Editor chat FAB: chat while editing, against the DRAFT chatbot
               config (tasks + prompt reflect unsaved changes; grounding is
               published content). Gated only on the platform switch — editors
@@ -1589,6 +1690,7 @@ export default function EditorShell({
               onSetArchived={handleSetArchived}
               onSetFields={handleSetPageFields}
               onSetAudience={handleSetPageAudience}
+              onSetDocument={handleSetPageDocument}
               onConfirmDelete={handleDeletePage}
             />
           </EditorModal>
@@ -1665,8 +1767,16 @@ function ViewBranchWatcher({
   return null;
 }
 
-function HistoryWatcher() {
-  const { setHistoryState } = useEditorContext();
+function HistoryWatcher({
+  onHistoryActiveChange,
+}: {
+  // Lifts historyState's active/inactive status to the shell body (mirrors
+  // ViewBranchWatcher's setViewSections lift) — the body renders the
+  // EditorProvider this component reads from, so it can't call
+  // useEditorContext() itself to get at historyState.
+  onHistoryActiveChange?: (active: boolean) => void;
+}) {
+  const { historyState, setHistoryState } = useEditorContext();
 
   useEffect(() => {
     const unlisten = historySelectEvent.listen(async ({ sha, date }) => {
@@ -1691,6 +1801,10 @@ function HistoryWatcher() {
     return unlisten;
   }, [setHistoryState]);
 
+  useEffect(() => {
+    onHistoryActiveChange?.(historyState !== null);
+  }, [historyState, onHistoryActiveChange]);
+
   return null;
 }
 
@@ -2039,6 +2153,15 @@ function EditorContent({
   );
 }
 
+// Suspense fallback while the lazy document overlay chunk loads.
+function DocumentOverlayFallback() {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-base" role="status" aria-live="polite">
+      <span className="text-sm text-base-contrast-light">Loading document editor…</span>
+    </div>
+  );
+}
+
 function GlobalModal() {
   const { modalState, closeModal } = useEditorModal();
 

package/src/document/components/DocCoverPage.tsx

@@ -0,0 +1,45 @@
+import type { DocCover } from "../engine/settings";
+import type { DocImage, DocMeta } from "../engine/types";
+import { DocPage } from "./DocPage";
+import type { DocHost } from "./DocSectionPage";
+import { Wordmark } from "./Wordmark";
+
+// Absorbs the harness's TitleCardLayout inline instead of wrapping it: the
+// portal-native cover has no client-logo slot (the harness only ever passed
+// null) and cover text is edited in the inspector, never on-canvas, so there
+// is no EditableText/deck-context machinery here — this always renders the
+// harness's non-editable, null-logo branch.
+export function DocCoverPage({
+  cover,
+  meta,
+  image,
+  host,
+}: {
+  cover: DocCover;
+  meta: DocMeta;
+  /** Resolved from source.images[cover.imageId] by the caller; null/undefined = solid cover. */
+  image?: DocImage | null;
+  host?: DocHost;
+}) {
+  return (
+    <DocPage meta={meta} bleed chrome={false}>
+      <div className="layout-titlecard" style={{ background: cover.bgColor }}>
+        <header className="layout-titlecard__masthead">
+          <Wordmark className="layout-titlecard__wordmark" />
+          <span className="layout-titlecard__rule" />
+        </header>
+        {image && host ? (
+          <div className="layout-titlecard__image">
+            <img src={host.imageSrc(image, host.variant)} alt={image.alt} />
+          </div>
+        ) : null}
+        <div className="layout-titlecard__lockup" style={{ color: cover.accentColor }}>
+          <h1 className="layout-titlecard__title">{cover.title}</h1>
+          <span className="layout-titlecard__titlerule" style={{ background: cover.accentColor }} />
+          <p className="layout-titlecard__label">{cover.label}</p>
+          <p className="layout-titlecard__date">{cover.date || meta.dateLabel}</p>
+        </div>
+      </div>
+    </DocPage>
+  );
+}

package/src/document/components/DocPage.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import type { DocMeta } from "../engine/types";
+import { Wordmark } from "./Wordmark";
+
+// Re-exported so index.ts's `export { DocPage, type DocMeta } from
+// "./components/DocPage"` has a local name — the single definition still
+// lives in engine/types.ts.
+export type { DocMeta };
+
+export function DocPage({
+  meta,
+  bleed = false,
+  chrome = true,
+  children,
+}: {
+  meta: DocMeta;
+  bleed?: boolean;
+  chrome?: boolean;
+  children: ReactNode;
+}) {
+  const crumb = [meta.client, meta.project, meta.dateLabel]
+    .map((s) => s.trim().toUpperCase())
+    .filter(Boolean)
+    .join(" :: ");
+
+  return (
+    <section className="deck-page">
+      {bleed ? <div className="deck-bleed">{children}</div> : null}
+      {chrome ? (
+        <header className="deck-chrome">
+          <span className="deck-crumb">{crumb}</span>
+          <div className="deck-wordmark-clip">
+            <Wordmark className="deck-wordmark" />
+          </div>
+        </header>
+      ) : null}
+      {!bleed ? <div className="deck-body">{children}</div> : null}
+    </section>
+  );
+}