@pramen/cms-editor 0.0.48 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "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/api.ts

@@ -2,6 +2,7 @@
 // same transport shape as @pramen/admin's api.ts. Config is persisted in localStorage.
 
 import type { AssembledPage, AuditEntry, BlockType, ContentType, Media, Page } from "./types";
+import type { RpcInput } from "./types";
 
 export interface Config {
   baseUrl: string;
@@ -72,20 +73,21 @@ export class Api {
   }
 
   /** Call a CMS RPC handler. Throws ApiError on a non-`ok` envelope. */
-  async call<T = unknown>(name: string, input?: unknown): Promise<T> {
+  async call<T = unknown>(name: string, input?: RpcInput): Promise<T> {
     // Expired token: hand off to sign-in instead of firing a request that will 403 into an
     // error banner. The returned promise never settles — navigation is already underway.
     if (this.onExpired && this.cfg.token && isTokenExpired(this.cfg.token)) {
       this.onExpired();
       return new Promise<T>(() => {});
     }
+    const headers = new Headers({
+      "content-type": "application/json",
+      "x-pramen-tenant": this.cfg.tenant || "main",
+    });
+    if (this.cfg.token) headers.set("authorization", `Bearer ${this.cfg.token}`);
     const res = await fetch(`${this.base()}/rpc/${name}`, {
       method: "POST",
-      headers: {
-        "content-type": "application/json",
-        "x-pramen-tenant": this.cfg.tenant || "main",
-        ...(this.cfg.token ? { authorization: `Bearer ${this.cfg.token}` } : {}),
-      },
+      headers,
       body: JSON.stringify(input ?? {}),
     });
     let body: { ok?: boolean; result?: unknown; error?: string; code?: string };

package/src/app-context.tsx

@@ -6,7 +6,7 @@
 import { Button, Input } from "@podoba/react";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Api, clearConfig, isTokenExpired, loadConfig, saveConfig, type Config } from "./api";
-import type { CollectionMeta } from "./types";
+import type { CollectionMeta, JsonValue } from "./types";
 
 declare global {
   interface Window {
@@ -42,7 +42,7 @@ function redirectToSignIn(): void {
 export interface Me {
   userId?: string;
   roles?: string[];
-  [k: string]: unknown;
+  [k: string]: JsonValue | undefined;
 }
 
 interface AppContextValue {

package/src/components.tsx

@@ -8,7 +8,7 @@ import { Api, ApiError } from "./api";
 import { FieldForm, slugify } from "./fields";
 import type { Config } from "./api";
 import type { Me } from "./app-context";
-import type { AssembledPage, AuditEntry, BlockType, CollectionMeta, ContentType, FieldDefinition, Media, Page, RegionDefinition, RenderedBlock } from "./types";
+import type { AssembledPage, AuditEntry, BlockType, CollectionMeta, ContentType, FieldDefinition, FieldValues, Media, Page, RegionDefinition, RenderedBlock } from "./types";
 
 export type InspectorTab = "settings" | "seo" | "workflow" | "i18n" | "audit";
 export const INSPECTOR_TABS: InspectorTab[] = ["settings", "seo", "workflow", "i18n", "audit"];
@@ -201,7 +201,7 @@ function cellText(v: unknown): string {
 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 [rows, setRows] = useState<FieldValues[]>([]);
   const [offset, setOffset] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -210,7 +210,7 @@ export function CollectionList({ api, def, onOpen, onNew, onError }: { api: Api;
     (off: number) => {
       setLoading(true);
       return api
-        .call<Record<string, unknown>[]>("collectionList", { collection: def.slug, limit: COLLECTION_PAGE_SIZE, offset: off })
+        .call<FieldValues[]>("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.
@@ -267,7 +267,7 @@ export function CollectionList({ api, def, onOpen, onNew, onError }: { api: Api;
 
 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 [values, setValues] = useState<FieldValues>({});
   const [loading, setLoading] = useState(!isNew);
   const [missing, setMissing] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -278,7 +278,7 @@ export function CollectionEditor({ api, def, id, onSaved, onDeleted, onBack, onE
     let live = true;
     setLoading(true);
     setMissing(false);
-    api.call<Record<string, unknown> | null>("collectionGet", { collection: def.slug, id })
+    api.call<FieldValues | 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); });
@@ -296,7 +296,7 @@ export function CollectionEditor({ api, def, id, onSaved, onDeleted, onBack, onE
       } 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 });
+        const updated = await api.call<FieldValues>("collectionUpdate", { collection: def.slug, id, values });
         if (updated) setValues(updated);
         setOk(true);
         setTimeout(() => setOk(false), 1200);
@@ -427,7 +427,7 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
     });
     try {
       const { block, placement } = await api.call<{
-        block: { id: string; title?: string | null; fields?: Record<string, unknown> | null };
+        block: { id: string; title?: string | null; fields?: FieldValues | null };
         placement: { id: string; isShared?: boolean | number };
       }>("addBlock", { pageId: page.id, blockTypeSlug: slug, region, fields: {} });
       const rb: RenderedBlock = {
@@ -470,7 +470,7 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
 
   // Patch a block's raw fields into local state after an inline save — keeps the collapsed
   // preview fresh without a full reload (which would remount every editor + lose caret/focus).
-  const patchBlockFields = useCallback((placementId: string, fields: Record<string, unknown>) => {
+  const patchBlockFields = useCallback((placementId: string, fields: FieldValues) => {
     setAssembled((prev) => {
       if (!prev) return prev;
       const next: Record<string, RenderedBlock[]> = {};
@@ -539,7 +539,7 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
             not in the inspector. For a content type with no regions (a fixed layout, all
             of it page fields) this is the entire editor; the canvas is never empty. */}
         {pageSchema.length ? (
-          <PageFields api={api} page={page} schema={pageSchema} initialFields={(assembled?.page.fields as Record<string, unknown>) ?? {}} onDirtyChange={reportDirty} onError={setErr} />
+          <PageFields api={api} page={page} schema={pageSchema} initialFields={(assembled?.page.fields as FieldValues) ?? {}} onDirtyChange={reportDirty} onError={setErr} />
         ) : null}
         {regions.map((r) => {
           const blocks = assembled?.regions[r.name] ?? [];
@@ -611,7 +611,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
   isLast: boolean;
   onMove: (dir: number) => void;
   onRemove: () => void;
-  onPatch: (placementId: string, fields: Record<string, unknown>) => void;
+  onPatch: (placementId: string, fields: FieldValues) => void;
   onDirtyChange: (placementId: string, dirty: boolean) => void;
   onError: (s: string) => void;
   dragging: boolean;
@@ -621,7 +621,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
   onDropBlock: () => void;
   onDragEndBlock: () => void;
 }) {
-  const [fields, setFields] = useState<Record<string, unknown> | null>(null);
+  const [fields, setFields] = useState<FieldValues | null>(null);
   const [collapsed, setCollapsed] = useState(false);
   const [saveState, setSaveState] = useState<"idle" | "saving" | "saved">("idle");
   const saved = useRef<string>(""); // JSON of the last-persisted fields — the dirty baseline
@@ -635,7 +635,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
   useEffect(() => {
     if (block.pending) { setFields({}); saved.current = "{}"; return; }
     let alive = true;
-    api.call<{ fields?: Record<string, unknown> }>("getBlock", { blockId }).then((b) => {
+    api.call<{ fields?: FieldValues }>("getBlock", { blockId }).then((b) => {
       if (!alive) return;
       const f = b?.fields ?? {};
       setFields(f);
@@ -680,7 +680,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
     return () => clearTimeout(t);
   }, [fields, block.pending]);
 
-  const change = (next: Record<string, unknown>) => setFields(next);
+  const change = (next: FieldValues) => setFields(next);
 
   // Report dirty state up (for the editor's leave/unload guard); clear it on unmount so a
   // removed block never leaves a stale "unsaved" flag behind.
@@ -891,8 +891,8 @@ function PageMeta({ api, page, onSaved, onError }: { api: Api; page: Page; onSav
 }
 
 /** The page's own FIELDS — its content. Rendered in the canvas, at full width. */
-function PageFields({ api, page, schema, initialFields, onDirtyChange, onError }: { api: Api; page: Page; schema: FieldDefinition[]; initialFields: Record<string, unknown>; onDirtyChange: (id: string, dirty: boolean) => void; onError: (s: string) => void }) {
-  const [fields, setFields] = useState<Record<string, unknown>>(initialFields);
+function PageFields({ api, page, schema, initialFields, onDirtyChange, onError }: { api: Api; page: Page; schema: FieldDefinition[]; initialFields: FieldValues; onDirtyChange: (id: string, dirty: boolean) => void; onError: (s: string) => void }) {
+  const [fields, setFields] = useState<FieldValues>(initialFields);
   const [ok, setOk] = useState(false);
   const [busy, setBusy] = useState(false);
 
@@ -1480,7 +1480,7 @@ function plainText(html: string): string {
     .trim();
 }
 /** One-line preview for a collapsed block: the first non-empty string field, tags stripped. */
-function blockPreview(fields: Record<string, unknown>): string {
+function blockPreview(fields: FieldValues): string {
   const first = Object.values(fields).find((v) => typeof v === "string" && v.trim());
   if (typeof first !== "string") return "";
   const text = plainText(first);

package/src/fields.tsx

@@ -5,7 +5,7 @@ import { Button, Heading, Input, ModalDialog, ModalOverlay, ModalSurface, Text,
 import { BlockEditor } from "@podoba/react/editor";
 import { useEffect, useRef, useState, type DragEvent, type ReactNode } from "react";
 import type { Api } from "./api";
-import type { FieldDefinition, Media } from "./types";
+import type { FieldDefinition, FieldValue, FieldValues, Media } from "./types";
 
 // Tokenized bare control (podoba's filled-field skin) for the native inputs that
 // don't map cleanly onto a podoba primitive (number/date/select/file).
@@ -147,8 +147,8 @@ function PublishControl({ value, onChange }: { value: string; onChange: (v: stri
   );
 }
 
-export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefinition[]; value: Record<string, unknown>; onChange: (v: Record<string, unknown>) => void; api: Api }) {
-  const set = (name: string, v: unknown) => onChange({ ...value, [name]: v });
+export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefinition[]; value: FieldValues; onChange: (v: FieldValues) => void; api: Api }) {
+  const set = (name: string, v: FieldValue) => onChange({ ...value, [name]: v });
   return (
     <div className="flex flex-col gap-4">
       {schema.map((def) => (
@@ -171,13 +171,13 @@ export function FieldForm({ schema, value, onChange, api }: { schema: FieldDefin
  * accessible-name computation via `aria-labelledby`. Those three go through the bare
  * `CONTROL` skin instead, the same way `number`/`date` already do.
  */
-function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def: FieldDefinition; value: unknown; onChange: (v: unknown) => void; api: Api; hideLabelAs?: string; siblings?: Record<string, unknown> }) {
+function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def: FieldDefinition; value: FieldValue; onChange: (v: FieldValue) => void; api: Api; hideLabelAs?: string; siblings?: FieldValues }) {
   const label: ReactNode = hideLabelAs !== undefined ? undefined : (
     <>
       {def.label ?? def.name} {def.required ? <span className="text-danger">*</span> : null}
     </>
   );
-  const asText = (v: unknown) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
+  const asText = (v: FieldValue) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
   switch (def.type) {
     case "text":
     case "url": {
@@ -258,12 +258,12 @@ function FieldInput({ def, value, onChange, api, hideLabelAs, siblings }: { def:
       return (
         <FieldShell label={label}>
           <div className="rounded-lg border border-border bg-surface-muted p-3.5">
-            <FieldForm schema={def.fields ?? []} value={(value as Record<string, unknown>) ?? {}} onChange={onChange as (v: Record<string, unknown>) => void} api={api} />
+            <FieldForm schema={def.fields ?? []} value={(value as FieldValues) ?? {}} onChange={onChange as (v: FieldValues) => void} api={api} />
           </div>
         </FieldShell>
       );
     case "repeater":
-      return <Repeater def={def} value={(value as Record<string, unknown>[]) ?? []} onChange={onChange as (v: unknown[]) => void} api={api} label={label} />;
+      return <Repeater def={def} value={(value as FieldValues[]) ?? []} onChange={onChange as (v: FieldValues[]) => void} api={api} label={label} />;
     default:
       return null;
   }
@@ -292,7 +292,7 @@ export function RichText({ value, onChange }: { value: string; onChange: (v: str
  * Reordering is drag-and-drop from the ⠿ handle, mirroring the block canvas. ↑/↓ stay,
  * because dragging is unavailable to keyboard users and awkward on touch.
  */
-function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: Record<string, unknown>[]; onChange: (v: unknown[]) => void; api: Api; label: ReactNode }) {
+function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: FieldValues[]; onChange: (v: FieldValues[]) => void; api: Api; label: ReactNode }) {
   const items = Array.isArray(value) ? value : [];
   const fields = def.fields ?? [];
   // One field, and not itself a tall control — the case where the card is pure overhead.
@@ -300,7 +300,7 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
 
   const [drag, setDrag] = useState<{ from: number; over: number } | null>(null);
 
-  const upd = (i: number, v: Record<string, unknown>) => onChange(items.map((it, j) => (j === i ? v : it)));
+  const upd = (i: number, v: FieldValues) => onChange(items.map((it, j) => (j === i ? v : it)));
   const add = () => onChange([...items, {}]);
   const del = (i: number) => onChange(items.filter((_, j) => j !== i));
   const moveTo = (from: number, to: number) => {
@@ -322,7 +322,7 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
    * instead titled every slide with the uuid of its image, which is worse than no summary
    * at all — the point is to tell two rows apart at a glance.
    */
-  const summarise = (it: Record<string, unknown>): string => {
+  const summarise = (it: FieldValues): string => {
     const readable = ["text", "textarea", "richtext", "select", "url"];
     for (const f of fields) {
       if (!readable.includes(f.type)) continue;
@@ -545,7 +545,7 @@ function SlugField({ def, label, value, source, onChange }: { def: FieldDefiniti
 // A `select` field. Static `options` render as-is; when `optionsFrom` is set, the options are
 // fetched once from that query handler (returns `{ value, label }[]`) — e.g. a live list of
 // campaigns — so the editor never has to hardcode or copy identifiers by hand.
-function SelectField({ def, value, onChange, api, ariaLabel }: { def: FieldDefinition; value: string | null; onChange: (v: unknown) => void; api: Api; ariaLabel?: string }) {
+function SelectField({ def, value, onChange, api, ariaLabel }: { def: FieldDefinition; value: string | null; onChange: (v: FieldValue) => void; api: Api; ariaLabel?: string }) {
   const [dyn, setDyn] = useState<{ value: string; label: string }[] | null>(null);
   const from = def.optionsFrom;
   useEffect(() => {

package/src/types.ts

@@ -2,6 +2,24 @@
 // @pramen/cms) so the editor stays a self-contained browser app with no server-package
 // dependency — it speaks to the CMS purely over HTTP.
 
+/** Any JSON value — the wire form of everything the CMS stores. */
+export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
+
+/** One authored field value. Mirrors `FieldValue` in @pramen/cms: a `"media"` field
+ * arrives resolved to a `Media`, and `group`/`repeater` fields nest further bags. */
+export type FieldValue = JsonValue | Media | FieldValues | FieldValue[];
+
+/** A block / collection / page `fields` bag — field name -> authored value. */
+export interface FieldValues {
+  [field: string]: FieldValue;
+}
+
+/** The JSON body of an editor RPC call: an object of values, any of which may be
+ * omitted (an absent key is simply not sent). */
+export interface RpcInput {
+  [key: string]: FieldValue | undefined;
+}
+
 export type FieldType =
   | "text"
   | "textarea"
@@ -25,7 +43,7 @@ export interface FieldDefinition {
   label?: string;
   type: FieldType;
   required?: boolean;
-  default?: unknown;
+  default?: FieldValue;
   fields?: FieldDefinition[];
   min?: number;
   max?: number;
@@ -47,7 +65,7 @@ export interface RegionDefinition {
 export interface DefaultBlockDefinition {
   region: string;
   blockTypeSlug: string;
-  fields?: Record<string, unknown>;
+  fields?: FieldValues;
 }
 
 export interface BlockType {
@@ -94,7 +112,7 @@ export interface Page {
   slug: string;
   status: string;
   locale: string;
-  fields?: Record<string, unknown> | null; // content-type-level structured data (fieldsSchema)
+  fields?: FieldValues | null; // content-type-level structured data (fieldsSchema)
   translationGroupId?: string | null;
   metaTitle?: string | null;
   metaDescription?: string | null;
@@ -122,13 +140,13 @@ export interface RenderedBlock {
   block_id: string; // block instance id (edit)
   block_type: string;
   title: string | null;
-  fields: Record<string, unknown>;
+  fields: FieldValues;
   is_shared: boolean;
   pending?: boolean; // optimistic placeholder — not yet persisted (temp ids, no getBlock)
 }
 
 export interface AssembledPage {
-  page: Page & { translations?: { locale: string; slug: string }[]; seo?: Record<string, unknown> };
+  page: Page & { translations?: { locale: string; slug: string }[]; seo?: FieldValues };
   regions: Record<string, RenderedBlock[]>;
 }