@pramen/cms-editor 0.0.39 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {

package/src/app-context.tsx

@@ -13,6 +13,10 @@ declare global {
     /** Runtime config set by the host's /config.js (see @pramen/cms-editor build). */
     PRAMEN_CMS_EDITOR?: {
       signInUrl?: string;
+      /** Hide the Pages tab for deployments that use collections only — no block/page
+       * building. The tab is otherwise always shown and lands on an empty list, which
+       * reads as "the CMS is broken" rather than "this site has no pages". */
+      hidePages?: boolean;
       /** Extra top-nav links to companion tools the host serves (e.g. a curation page).
        * Rendered as plain external `<a>` links after the built-in tabs. */
       extraNav?: { label: string; href: string }[];

package/src/components.tsx

@@ -187,23 +187,45 @@ function cellText(v: unknown): string {
   return String(v);
 }
 
+/** Page size for collection lists. collectionList defaults to 100 server-side, so a
+ * request without an explicit limit silently truncates — and the header then reports the
+ * truncated count as if it were the total, which reads as "that is all there is". */
+const COLLECTION_PAGE_SIZE = 50;
+
 export function CollectionList({ api, def, onOpen, onNew, onError }: { api: Api; def: CollectionMeta; onOpen: (id: string) => void; onNew: () => void; onError: (s: string) => void }) {
   const [rows, setRows] = useState<Record<string, unknown>[]>([]);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
   const [loading, setLoading] = useState(true);
+
+  const load = useCallback(
+    (off: number) => {
+      setLoading(true);
+      return api
+        .call<Record<string, unknown>[]>("collectionList", { collection: def.slug, limit: COLLECTION_PAGE_SIZE, offset: off })
+        .then((r) => {
+          setRows((prev) => (off === 0 ? r : [...prev, ...r]));
+          // A full page means there is probably more; a short one is definitely the end.
+          setHasMore(r.length === COLLECTION_PAGE_SIZE);
+          setOffset(off + r.length);
+        })
+        .catch((e) => onError(errMsg(e)))
+        .finally(() => setLoading(false));
+    },
+    [api, def.slug, onError],
+  );
+
   useEffect(() => {
-    let live = true;
-    setLoading(true);
-    api.call<Record<string, unknown>[]>("collectionList", { collection: def.slug })
-      .then((r) => { if (live) setRows(r); })
-      .catch((e) => onError(errMsg(e)))
-      .finally(() => { if (live) setLoading(false); });
-    return () => { live = false; };
-  }, [api, def.slug, onError]);
+    setRows([]);
+    setOffset(0);
+    setHasMore(false);
+    void load(0);
+  }, [load]);
 
   const labelOf = (col: string) => def.fields.find((f) => f.name === col)?.label ?? col;
   return (
     <>
-      <Hero lead={def.pluralLabel} em={rows.length === 0 ? "None yet" : rows.length === 1 ? `1 ${def.label.toLowerCase()}` : `${rows.length} ${def.pluralLabel.toLowerCase()}`}>
+      <Hero lead={def.pluralLabel} em={rows.length === 0 ? "None yet" : rows.length === 1 ? `1 ${def.label.toLowerCase()}` : `${rows.length}${hasMore ? "+" : ""} ${def.pluralLabel.toLowerCase()}`}>
         <Cta text="Let's" em={`add a ${def.label.toLowerCase()}`}>
           <Button className="shrink-0" onPress={onNew}>+ New {def.label.toLowerCase()}</Button>
         </Cta>
@@ -225,6 +247,11 @@ export function CollectionList({ api, def, onOpen, onNew, onError }: { api: Api;
           {!loading && rows.length === 0 ? <p className="text-fg-subtle">No {def.pluralLabel.toLowerCase()} yet. Create one.</p> : null}
           {loading ? <p className="text-fg-subtle">Loading…</p> : null}
         </div>
+        {hasMore && !loading ? (
+          <div className="mt-3.5 text-center">
+            <Button variant="secondary" size="sm" onPress={() => void load(offset)}>Load more</Button>
+          </div>
+        ) : null}
       </div>
     </>
   );

package/src/routes/_layout.tsx

@@ -27,6 +27,8 @@ export default function RootLayout() {
 
   // Host-configured links to companion tools (e.g. a curation page), from /config.js.
   const extraNav = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.extraNav ?? [] : [];
+  // Collections-only deployments hide the block/page builder entirely.
+  const hidePages = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.hidePages === true : false;
 
   return (
     <>
@@ -36,7 +38,9 @@ export default function RootLayout() {
         </span>
         <span className="flex-1" />
         <nav className="flex items-center gap-0.5">
-          <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={() => navigate("home")}>Pages</Button>
+          {hidePages ? null : (
+            <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={() => navigate("home")}>Pages</Button>
+          )}
           {collections.map((c) => (
             <Button key={c.slug} variant="ghost" size="sm" className={tabCls(`col:${c.slug}`)} onPress={() => navigate("collection", { params: { slug: c.slug } })}>
               {c.icon ? `${c.icon} ` : ""}{c.pluralLabel}

package/src/routes/home.tsx

@@ -9,17 +9,31 @@ import type { BlockType, Page } from "../types";
 export default createPage()
   .route("/")
   .render(function Home() {
-    const { api, setError } = useApp();
+    const { api, setError, collections } = useApp();
     const navigate = useNavigate();
     const [pages, setPages] = useState<Page[]>([]);
     const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
 
+    // Collections-only deployment: `/` is the Pages list, so land on the first
+    // collection instead. Without this, hiding the tab still leaves the landing page
+    // showing an empty page list — and still fetching pages, which errors outright on a
+    // deployment that never spread cmsSchema.
+    const hidePages = typeof window !== "undefined" && window.PRAMEN_CMS_EDITOR?.hidePages === true;
+    const firstCollection = collections[0]?.slug;
+
+    useEffect(() => {
+      if (hidePages && firstCollection) navigate("collection", { params: { slug: firstCollection }, replace: true });
+    }, [hidePages, firstCollection, navigate]);
+
     const refreshPages = () => api.listPages().then(setPages).catch((e) => setError(errMsg(e)));
     useEffect(() => {
+      if (hidePages) return;
       refreshPages();
       api.listBlockTypes().then(setBlockTypes).catch((e) => setError(errMsg(e)));
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [api]);
+    }, [api, hidePages]);
+
+    if (hidePages && firstCollection) return null;
 
     return (
       <PageList