@pramen/cms-editor 0.0.35 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "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

@@ -6,6 +6,7 @@
 import { Button, Input } from "@podoba/react";
 import { createContext, use, useEffect, useMemo, useState } from "react";
 import { Api, clearConfig, isTokenExpired, loadConfig, saveConfig, type Config } from "./api";
+import type { CollectionMeta } from "./types";
 
 declare global {
   interface Window {
@@ -45,6 +46,9 @@ interface AppContextValue {
   cfg: Config;
   me: Me | null;
   isAdmin: boolean;
+  /** Collections registered on the server (from `listCollections`) — drives the nav + the
+   * generic list/edit routes. Empty when the server registers none. */
+  collections: CollectionMeta[];
   error: string;
   setError: (s: string) => void;
   /** Sign out — drop the token so the config gate falls back to Setup. */
@@ -62,6 +66,7 @@ export function useApp(): AppContextValue {
 export function AppProvider({ children }: { children: React.ReactNode }) {
   const [cfg, setCfg] = useState<Config>(loadConfig());
   const [me, setMe] = useState<Me | null>(null);
+  const [collections, setCollections] = useState<CollectionMeta[]>([]);
   const [error, setError] = useState("");
   // A usable session = a base URL + a token that is NOT expired. An expired token counts as
   // no session: otherwise the editor mounts and every RPC 403s into an error banner.
@@ -91,6 +96,9 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     if (!authValid) return;
     // `me` gates the Users tab + drives Settings — a failing call is fine (leaves it {}).
     api.call<Me>("me").then(setMe).catch(() => setMe({}));
+    // Collections drive the nav + list/edit routes. An app that registers none (or an older
+    // server without the handler) just leaves the nav as-is — a failure is non-fatal.
+    api.call<CollectionMeta[]>("listCollections").then(setCollections).catch(() => setCollections([]));
   }, [api, authValid]);
 
   if (!authValid) {
@@ -104,6 +112,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     cfg,
     me,
     isAdmin: (me?.roles ?? []).includes("admin"),
+    collections,
     error,
     setError,
     reconfigure: () => {

package/src/buzola.gen.ts

@@ -6,16 +6,20 @@ import { buildRouteTree } from '@buzola/router';
 import type { RouteConfig } from '@buzola/router';
 
 import Route0 from './routes/_layout';
-const Route1 = () => import('./routes/home').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route2 = () => import('./routes/media').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route3 = () => import('./routes/page').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route4 = () => import('./routes/settings').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route5 = () => import('./routes/users').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
-const Route6 = () => import('./routes/_404').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route1 = () => import('./routes/collection-item').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route2 = () => import('./routes/collection').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route3 = () => import('./routes/home').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route4 = () => import('./routes/media').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route5 = () => import('./routes/page').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route6 = () => import('./routes/settings').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route7 = () => import('./routes/users').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route8 = () => import('./routes/_404').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
 
 // Module augmentation for type-safe page-centric routing
 declare module '@buzola/router' {
   interface BuzolaPageMap {
+    'collection-item': { slug: string; id: string };
+    'collection': { slug: string };
     'home': {};
     'media': {};
     'page': { pageId: string; tab?: string };
@@ -26,6 +30,8 @@ declare module '@buzola/router' {
 
 // Page registry — page ID → route pattern
 export const pageRegistry: Record<string, string> = {
+  'collection-item': '/collections/:slug/:id',
+  'collection': '/collections/:slug',
   'home': '/',
   'media': '/media',
   'page': '/pages/:pageId',
@@ -40,37 +46,49 @@ const routeConfigs: RouteConfig[] = [
     isLayout: true,
     children: [
       {
-        path: '/home',
-        matchPath: '/',
+        path: '/collection-item',
+        matchPath: '/collections/:slug/:id',
         component: lazy(Route1),
         preload: Route1,
       },
       {
-        path: '/media',
+        path: '/collection',
+        matchPath: '/collections/:slug',
         component: lazy(Route2),
         preload: Route2,
       },
       {
-        path: '/page',
-        matchPath: '/pages/:pageId',
+        path: '/home',
+        matchPath: '/',
         component: lazy(Route3),
         preload: Route3,
       },
       {
-        path: '/settings',
+        path: '/media',
         component: lazy(Route4),
         preload: Route4,
       },
       {
-        path: '/users',
+        path: '/page',
+        matchPath: '/pages/:pageId',
         component: lazy(Route5),
         preload: Route5,
       },
       {
-        path: '/:__notFound+',
+        path: '/settings',
         component: lazy(Route6),
         preload: Route6,
       },
+      {
+        path: '/users',
+        component: lazy(Route7),
+        preload: Route7,
+      },
+      {
+        path: '/:__notFound+',
+        component: lazy(Route8),
+        preload: Route8,
+      },
     ],
   },
 ];

package/src/components.tsx

@@ -8,7 +8,7 @@ import { Api, ApiError } from "./api";
 import { FieldForm } from "./fields";
 import type { Config } from "./api";
 import type { Me } from "./app-context";
-import type { AssembledPage, AuditEntry, BlockType, ContentType, FieldDefinition, Media, Page, RegionDefinition, RenderedBlock } from "./types";
+import type { AssembledPage, AuditEntry, BlockType, CollectionMeta, ContentType, FieldDefinition, Media, Page, RegionDefinition, RenderedBlock } from "./types";
 
 export type InspectorTab = "settings" | "seo" | "workflow" | "i18n" | "audit";
 export const INSPECTOR_TABS: InspectorTab[] = ["settings", "seo", "workflow", "i18n", "audit"];
@@ -171,6 +171,144 @@ function CreatePage({ api, onClose, onCreated, onError }: { api: Api; onClose: (
   );
 }
 
+// --- collections -------------------------------------------------------------
+//
+// Generic list + edit views over a host-app entity registered as a collection. Both are
+// driven entirely by the CollectionMeta fetched from `listCollections` — one editor, N
+// collections, zero per-collection code. Rows are addressed by `def.idField` (the entity's
+// PK column, defaults "id"); the server resolves the real PK from the value.
+
+/** Render a list-cell value as a short string (objects/arrays are summarized, not dumped). */
+function cellText(v: unknown): string {
+  if (v == null) return "";
+  if (typeof v === "boolean") return v ? "yes" : "no";
+  if (Array.isArray(v)) return v.length === 1 ? "1 item" : `${v.length} items`;
+  if (typeof v === "object") return "—";
+  return String(v);
+}
+
+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 [loading, setLoading] = useState(true);
+  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]);
+
+  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()}`}>
+        <Cta text="Let's" em={`add a ${def.label.toLowerCase()}`}>
+          <Button className="shrink-0" onPress={onNew}>+ New {def.label.toLowerCase()}</Button>
+        </Cta>
+      </Hero>
+      <div className={WRAP}>
+        <div className="flex flex-col gap-2">
+          {rows.map((row) => {
+            const id = String(row[def.idField] ?? "");
+            const [first, ...rest] = def.list;
+            return (
+              <div className={`${ROW} cursor-pointer hover:bg-surface-muted`} key={id} onClick={() => onOpen(id)}>
+                <span className="flex-1 truncate font-medium">{cellText(row[first ?? def.titleField]) || <Dim>untitled</Dim>}</span>
+                {rest.map((col) => (
+                  <span className="truncate text-fg-subtle" key={col} title={labelOf(col)}>{cellText(row[col])}</span>
+                ))}
+              </div>
+            );
+          })}
+          {!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>
+      </div>
+    </>
+  );
+}
+
+export function CollectionEditor({ api, def, id, onSaved, onDeleted, onBack, onError }: { api: Api; def: CollectionMeta; id: string | null; onSaved: () => void; onDeleted: () => void; onBack: () => void; onError: (s: string) => void }) {
+  const isNew = id === null;
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  const [loading, setLoading] = useState(!isNew);
+  const [missing, setMissing] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [ok, setOk] = useState(false);
+
+  useEffect(() => {
+    if (isNew) { setValues({}); return; }
+    let live = true;
+    setLoading(true);
+    setMissing(false);
+    api.call<Record<string, unknown> | null>("collectionGet", { collection: def.slug, id })
+      .then((row) => { if (!live) return; if (row) setValues(row); else setMissing(true); })
+      .catch((e) => onError(errMsg(e)))
+      .finally(() => { if (live) setLoading(false); });
+    return () => { live = false; };
+  }, [api, def.slug, id, isNew, onError]);
+
+  const save = async () => {
+    setBusy(true);
+    try {
+      if (isNew) {
+        // Creating: a new record has no route yet — return to the list so the caller lands
+        // somewhere stable (the new row is now in it).
+        await api.call("collectionCreate", { collection: def.slug, values });
+        onSaved();
+      } else {
+        // Editing: stay on the form. Reflect the persisted row the update echoes back (server
+        // defaults / normalization applied) and flash a confirmation instead of navigating.
+        const updated = await api.call<Record<string, unknown>>("collectionUpdate", { collection: def.slug, id, values });
+        if (updated) setValues(updated);
+        setOk(true);
+        setTimeout(() => setOk(false), 1200);
+      }
+    } catch (e) {
+      onError(errMsg(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const del = async () => {
+    if (isNew || !confirm(`Delete this ${def.label.toLowerCase()}? This cannot be undone.`)) return;
+    setBusy(true);
+    try {
+      await api.call("collectionDelete", { collection: def.slug, id });
+      onDeleted();
+    } catch (e) {
+      onError(errMsg(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className={WRAP}>
+      <div className="mb-4 mt-2 flex items-center gap-3">
+        <Button variant="ghost" size="sm" onPress={onBack}>← {def.pluralLabel}</Button>
+        <h1 className="text-[22px] font-normal text-fg">{isNew ? `New ${def.label.toLowerCase()}` : `Edit ${def.label.toLowerCase()}`}</h1>
+      </div>
+      {missing ? (
+        <p className="text-fg-subtle">Not found.</p>
+      ) : loading ? (
+        <p className="text-fg-subtle">Loading…</p>
+      ) : (
+        <div className="flex max-w-[720px] flex-col gap-4">
+          {ok ? <Banner ok>saved</Banner> : null}
+          <FieldForm schema={def.fields} value={values} onChange={setValues} api={api} />
+          <div className="mt-2 flex items-center gap-2">
+            <Button onPress={save} isDisabled={busy}>{busy ? "Saving…" : isNew ? "Create" : "Save"}</Button>
+            {!isNew ? <Button variant="ghost" className="text-danger" onPress={del} isDisabled={busy}>Delete</Button> : null}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // --- page editor -------------------------------------------------------------
 
 export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange }: { api: Api; page: Page; blockTypes: BlockType[]; tab: InspectorTab; onTab: (t: InspectorTab) => void; onBack: () => void; onChange: (p: Page) => void }) {
@@ -351,7 +489,7 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
             <Button key={t} variant="ghost" size="sm" className={tab === t ? "bg-surface-muted text-fg" : "text-fg-muted"} onPress={() => onTab(t)}>{t}</Button>
           ))}
         </div>
-        {tab === "settings" ? <Settings page={page} /> : null}
+        {tab === "settings" ? <Settings api={api} page={page} ct={ct} initialFields={(assembled?.page.fields as Record<string, unknown>) ?? {}} onSaved={onChange} onError={setErr} /> : null}
         {tab === "seo" ? <SeoPanel api={api} page={page} onError={setErr} /> : null}
         {tab === "workflow" ? <Workflow api={api} page={page} onChanged={(p) => { onChange(p); }} onError={setErr} /> : null}
         {tab === "i18n" ? <I18n api={api} page={page} onError={setErr} /> : null}
@@ -519,20 +657,50 @@ function AddBlock({ allowed, btBySlug, onAdd }: { allowed: string[]; btBySlug: M
   );
 }
 
-function Settings({ page }: { page: Page }) {
-  // The core CMS API doesn't expose a general page-rename handler; keep this read-only +
-  // link the essentials. (A future `updatePage` handler would back editable title/slug.)
+// Edit the page record itself — title/slug/locale and, for a content type with page-level
+// fields (e.g. a "Lecture" with date/speaker), its structured `fields`. Backed by updatePage.
+function Settings({ api, page, ct, initialFields, onSaved, onError }: { api: Api; page: Page; ct: ContentType | null; initialFields: Record<string, unknown>; onSaved: (p: Page) => void; onError: (s: string) => void }) {
+  const [title, setTitle] = useState(page.title);
+  const [slug, setSlug] = useState(page.slug);
+  const [locale, setLocale] = useState(page.locale);
+  const [fields, setFields] = useState<Record<string, unknown>>(initialFields);
+  const [ok, setOk] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const schema: FieldDefinition[] = ct?.fieldsSchema ?? [];
+
+  useEffect(() => { setTitle(page.title); setSlug(page.slug); setLocale(page.locale); }, [page.id, page.title, page.slug, page.locale]);
+  useEffect(() => { setFields(initialFields); }, [initialFields]);
+
+  const save = async () => {
+    setBusy(true);
+    try {
+      const r = await api.call<{ page?: Page }>("updatePage", { pageId: page.id, title, slug, locale, ...(schema.length ? { fields } : {}) });
+      if (r?.page) onSaved(r.page);
+      setOk(true);
+      setTimeout(() => setOk(false), 1500);
+    } catch (e) {
+      onError(errMsg(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
-    <KV>
-      <span>Title</span>
-      <span>{page.title}</span>
-      <span>Slug</span>
-      <span>/{page.slug}</span>
-      <span>Locale</span>
-      <span>{page.locale}</span>
-      <span>Status</span>
-      <span>{page.status}</span>
-    </KV>
+    <div className="flex flex-col gap-4">
+      <Section>Page</Section>
+      {ok ? <Banner ok>saved</Banner> : null}
+      <Input label="Title" value={title} onChange={setTitle} />
+      <Input label="Slug" value={slug} onChange={setSlug} />
+      <Input label="Locale" value={locale} onChange={setLocale} />
+      {schema.length ? (
+        <>
+          <Section>Fields</Section>
+          <FieldForm schema={schema} value={fields} onChange={setFields} api={api} />
+        </>
+      ) : null}
+      <Button onPress={save} isDisabled={busy || !title.trim() || !slug.trim()}>{busy ? "Saving…" : "Save"}</Button>
+      <KV><span>Status</span><span>{page.status}</span></KV>
+    </div>
   );
 }
 

package/src/routes/_layout.tsx

@@ -7,12 +7,16 @@ import { Button } from "@podoba/react";
 import { useApp } from "../app-context";
 
 export default function RootLayout() {
-  const { cfg, isAdmin, error, reconfigure } = useApp();
+  const { cfg, isAdmin, collections, error, reconfigure } = useApp();
   const navigate = useNavigate();
   const { pathname } = useRoute();
 
+  // The active collection slug, if we're under /collections/:slug(/...).
+  const collectionSlug = pathname.startsWith("/collections/") ? pathname.split("/")[2] : undefined;
+
   // "Pages" stays lit while editing a page (/pages/:id) too.
-  const active = pathname.startsWith("/pages") || pathname === "/" ? "pages"
+  const active = collectionSlug ? `col:${collectionSlug}`
+    : pathname.startsWith("/pages") || pathname === "/" ? "pages"
     : pathname.startsWith("/media") ? "media"
     : pathname.startsWith("/users") ? "users"
     : pathname.startsWith("/settings") ? "settings"
@@ -33,6 +37,11 @@ export default function RootLayout() {
         <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>
+          {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}
+            </Button>
+          ))}
           <Button variant="ghost" size="sm" className={tabCls("media")} onPress={() => navigate("media")}>Media</Button>
           {isAdmin ? (
             <Button variant="ghost" size="sm" className={tabCls("users")} onPress={() => navigate("users")}>Users</Button>

package/src/routes/collection-item.tsx

@@ -0,0 +1,38 @@
+// Collection item route (`/collections/:slug/:id`). `:id` == "new" is the create form;
+// any other value edits that row. Both render through the generic CollectionEditor
+// (FieldForm over the collection's field schema). All navigation returns to the list.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { Button } from "@podoba/react";
+import { useApp } from "../app-context";
+import { CollectionEditor } from "../components";
+
+export default createPage()
+  .params({ slug: "string", id: "string" })
+  .route("/collections/:slug/:id")
+  .render(function CollectionItemRoute({ params }) {
+    const { api, collections, setError } = useApp();
+    const navigate = useNavigate();
+    const def = collections.find((c) => c.slug === params.slug);
+    const backToList = () => navigate("collection", { params: { slug: params.slug } });
+
+    if (!def) {
+      return (
+        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
+          <p className="text-fg-subtle">{collections.length === 0 ? "Loading…" : `Unknown collection: ${params.slug}`}</p>
+          {collections.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Pages</Button> : null}
+        </div>
+      );
+    }
+    return (
+      <CollectionEditor
+        api={api}
+        def={def}
+        id={params.id === "new" ? null : params.id}
+        onSaved={backToList}
+        onDeleted={backToList}
+        onBack={backToList}
+        onError={setError}
+      />
+    );
+  });

package/src/routes/collection.tsx

@@ -0,0 +1,36 @@
+// Collection list route (`/collections/:slug`). Generic over any registered collection —
+// resolves the CollectionMeta from the app context and renders its rows. Opening a row (or
+// "+ New") navigates to the item route.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { Button } from "@podoba/react";
+import { useApp } from "../app-context";
+import { CollectionList } from "../components";
+
+export default createPage()
+  .params({ slug: "string" })
+  .route("/collections/:slug")
+  .render(function CollectionListRoute({ params }) {
+    const { api, collections, setError } = useApp();
+    const navigate = useNavigate();
+    const def = collections.find((c) => c.slug === params.slug);
+
+    if (!def) {
+      // Collections load async; before they arrive (or for a bad slug) show a neutral state.
+      return (
+        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
+          <p className="text-fg-subtle">{collections.length === 0 ? "Loading…" : `Unknown collection: ${params.slug}`}</p>
+          {collections.length > 0 ? <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← Pages</Button> : null}
+        </div>
+      );
+    }
+    return (
+      <CollectionList
+        api={api}
+        def={def}
+        onOpen={(id) => navigate("collection-item", { params: { slug: def.slug, id } })}
+        onNew={() => navigate("collection-item", { params: { slug: def.slug, id: "new" } })}
+        onError={setError}
+      />
+    );
+  });

package/src/types.ts

@@ -63,6 +63,24 @@ export interface ContentType {
   defaultBlocks?: DefaultBlockDefinition[] | null;
 }
 
+/** A collection: one of the host app's own pramen entities, edited generically via a
+ * field schema (mirror of @pramen/cms `CollectionMeta`). Fetched from `listCollections`
+ * and used to build the nav + the generic list/edit views. No `entity`/`idField` — those
+ * are server-only; the editor addresses a collection purely by `slug`. */
+export interface CollectionMeta {
+  slug: string;
+  label: string;
+  pluralLabel: string;
+  icon?: string;
+  fields: FieldDefinition[];
+  list: string[];
+  titleField: string;
+  /** The entity's PK column name (defaults "id" server-side) — the editor reads a row's id
+   * from this to open/save/delete it. */
+  idField: string;
+  orderBy?: { column: string; dir?: "asc" | "desc" };
+}
+
 export interface Page {
   id: string;
   typeId: string;
@@ -70,6 +88,7 @@ export interface Page {
   slug: string;
   status: string;
   locale: string;
+  fields?: Record<string, unknown> | null; // content-type-level structured data (fieldsSchema)
   translationGroupId?: string | null;
   metaTitle?: string | null;
   metaDescription?: string | null;