@pramen/cms-editor 0.0.49 → 0.0.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.49",
-  "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
+  "version": "0.0.51",
+  "description": "Visual block/page editor for @pramen/cms \u2014 a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -11,7 +11,10 @@
   "homepage": "https://github.com/netvarec/pramen#readme",
   "bugs": "https://github.com/netvarec/pramen/issues",
   "type": "module",
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "bun run scripts/build.ts",
     "dev": "bun run scripts/build.ts --watch",
@@ -20,16 +23,17 @@
   },
   "dependencies": {
     "@buzola/router": "^0.0.12",
-    "@podoba/react": "^0.0.32",
-    "@podoba/tokens": "^0.0.32",
-    "@podoba/tailwind": "^0.0.32",
-    "@tiptap/react": "^3.27.4",
-    "@tiptap/pm": "^3.27.4",
-    "@tiptap/starter-kit": "^3.27.4",
-    "@tiptap/extension-placeholder": "^3.27.4",
+    "@podoba/react": "^0.0.34",
+    "@podoba/tailwind": "^0.0.34",
+    "@podoba/tokens": "^0.0.34",
+    "@tiptap/core": "^3.27.4",
     "@tiptap/extension-highlight": "^3.27.4",
-    "@tiptap/extension-task-list": "^3.27.4",
+    "@tiptap/extension-placeholder": "^3.27.4",
     "@tiptap/extension-task-item": "^3.27.4",
+    "@tiptap/extension-task-list": "^3.27.4",
+    "@tiptap/pm": "^3.27.4",
+    "@tiptap/react": "^3.27.4",
+    "@tiptap/starter-kit": "^3.27.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/api.ts

@@ -129,6 +129,12 @@ export class Api {
   getMedia = (id: string) => this.call<Media | null>("getMedia", { id });
   updateMedia = (id: string, alt: string | null) => this.call<Media>("updateMedia", { id, alt });
   deleteMedia = (id: string) => this.call<{ ok: true }>("deleteMedia", { id });
+  // Trash is not a UI nicety here: deleteMedia no longer removes the R2 object, so without
+  // a reachable purge a file can be "deleted" in the library and still be served on the
+  // live site — the case a takedown request actually needs.
+  listTrash = (limit = 50) => this.call<{ pages: Page[]; media: Media[] }>("listTrash", { limit });
+  restoreMedia = (id: string) => this.call<{ ok: true }>("restoreMedia", { id });
+  purgeMedia = (id: string) => this.call<{ ok: true }>("purgeMedia", { id });
 
   /** Full upload flow: sign → PUT the bytes → persist a `cms_media` row. Returns the row. */
   async uploadMedia(file: File): Promise<Media> {

package/src/app-context.tsx

@@ -6,7 +6,8 @@
 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, JsonValue } from "./types";
+import { BRAND, SETUP_TITLE, type BrandConfig } from "./brand";
+import { DEFAULT_CAPABILITIES, type CmsCapabilities, type CollectionMeta, type JsonValue } from "./types";
 
 declare global {
   interface Window {
@@ -20,6 +21,13 @@ declare global {
       /** 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 }[];
+      /** The wordmark in the topbar, on the Setup screen, and in the browser tab.
+       *
+       * This editor ships as a package an agency deploys FOR ITS CLIENT, so the default
+       * put the framework's name where the client's belongs — someone logging into their
+       * own CMS was greeted by "pramen". Set `name` (and optionally `suffix`) to the
+       * deployment's own; `suffix: null` drops the "· cms" half entirely. */
+      brand?: BrandConfig;
     };
   }
 }
@@ -53,6 +61,10 @@ interface AppContextValue {
   /** Collections registered on the server (from `listCollections`) — drives the nav + the
    * generic list/edit routes. Empty when the server registers none. */
   collections: CollectionMeta[];
+  /** What the SERVER says this deployment supports (from `listCmsCapabilities`) — today,
+   * its declared locales. The editor renders its i18n surface off this rather than a local
+   * flag, so the UI and the data can never disagree about whether the site is multilingual. */
+  cms: CmsCapabilities;
   error: string;
   setError: (s: string) => void;
   /** Sign out — drop the token so the config gate falls back to Setup. */
@@ -79,6 +91,7 @@ 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 [cms, setCms] = useState<CmsCapabilities>(DEFAULT_CAPABILITIES);
   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.
@@ -118,6 +131,9 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     // 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([]));
+    // A server older than this handler leaves the monolingual default, which is the safe
+    // way round: the i18n surface stays hidden rather than half-rendered.
+    api.call<CmsCapabilities>("listCmsCapabilities").then(setCms).catch(() => setCms(DEFAULT_CAPABILITIES));
   }, [api, authValid]);
 
   if (!authValid) {
@@ -132,6 +148,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     me,
     isAdmin: (me?.roles ?? []).includes("admin"),
     collections,
+    cms,
     error,
     setError,
     confirmNavigation,
@@ -149,8 +166,10 @@ function Setup({ cfg, onSave }: { cfg: Config; onSave: (c: Config) => void }) {
   return (
     <div className="mx-auto mt-[14vh] w-full max-w-[520px] px-6">
       <div className="rounded-panel border border-border bg-surface-card px-10 py-8 shadow-[0_24px_60px_rgba(30,20,10,0.08)]">
+        {/* `SETUP_TITLE`, not `BRAND.title`: this screen has always read "… cms editor", and
+            the default has to render byte-identical to before the brand seam existed. */}
         <h1 className="mb-4 text-display text-fg">
-          pramen <span className="text-fg-subtle">· cms editor</span>
+          {BRAND.name} <span className="text-fg-subtle">{SETUP_TITLE}</span>
         </h1>
         <p className="mb-6 text-sm text-fg-muted">
           Point at your Worker and paste an editor/reviewer JWT. CORS must allow this origin (<code>CORS_ORIGINS</code>).

package/src/brand.ts

@@ -0,0 +1,96 @@
+// The deployment's wordmark, resolved once from the host's /config.js.
+//
+// Deliberately free of React, podoba and DOM-lib imports: it is read at module load (before
+// any component renders) and it is the one piece of chrome a host is expected to change, so
+// it stays a pure function of config that can be exercised without a browser.
+
+/** What the host may set under `window.PRAMEN_CMS_EDITOR.brand`. */
+export interface BrandConfig {
+  /** The wordmark. Blank/absent keeps the default. */
+  name?: string;
+  /** The muted half after the middot. Absent keeps the default; `null` drops it. */
+  suffix?: string | null;
+}
+
+/** A resolved wordmark. */
+export interface Brand {
+  name: string;
+  suffix: string | null;
+  /** Name and suffix joined for `document.title` — where the middot reads correctly. */
+  title: string;
+  /** The same words with no punctuation, for an accessible name. A screen reader announces
+   * "·" as "middle dot" at higher verbosity, so the decorative separator that belongs in a
+   * tab title does not belong in an aria-label. */
+  spoken: string;
+}
+
+export const DEFAULT_BRAND_NAME = "pramen";
+export const DEFAULT_BRAND_SUFFIX = "cms";
+
+/** Coerce one config value to a trimmed string, or undefined for anything else.
+ *
+ * /config.js is hand-edited, untyped, and often templated from an env var, so a value here
+ * can be any JSON type. `?.trim()` guards null and undefined ONLY — `suffix: false` (a
+ * plausible slip next to `hidePages: true`) or `name: 123` would THROW, and since `BRAND` is
+ * resolved at module load in the entry bundle's import graph, that throw aborts evaluation
+ * before `createRoot` and renders a blank page with nothing but a console error. Every other
+ * field in this config object already fails safe; this one must too. */
+function str(v: unknown): string | undefined {
+  if (typeof v !== "string") return undefined;
+  const trimmed = v.trim();
+  return trimmed === "" ? undefined : trimmed;
+}
+
+/** Resolve the configured wordmark, falling back to what used to be hardcoded.
+ *
+ * The distinction that matters is ABSENT vs. `null` on `suffix`: a host that only renames
+ * the product keeps the "· cms" half, while `suffix: null` is the explicit "just our name".
+ *
+ * A `brand` that is present but yields no usable name is WARNED about rather than silently
+ * accepted: `brand: "Acme"` (the shorthand instead of `{ name: "Acme" }`), a misspelled key,
+ * or a template that resolved to an empty string all end up shipping the framework's name to
+ * the client — the exact outcome this config exists to prevent — and a green deploy is the
+ * worst place to discover it. */
+export function resolveBrand(cfg?: BrandConfig): Brand {
+  const configured = str(cfg?.name);
+  if (cfg !== undefined && cfg !== null && configured === undefined) {
+    console.warn(
+      `pramen/cms-editor: \`brand\` is set but has no usable \`name\`, so the wordmark stays "${DEFAULT_BRAND_NAME}". Expected \`brand: { name: "Your name" }\`.`,
+    );
+  }
+  const name = configured ?? DEFAULT_BRAND_NAME;
+  // `undefined` (not configured) keeps the default; `null` — and any non-string — drops it.
+  const suffix = cfg?.suffix === undefined ? DEFAULT_BRAND_SUFFIX : (str(cfg.suffix) ?? null);
+  return { name, suffix, title: suffix ? `${name} · ${suffix}` : name, spoken: suffix ? `${name} ${suffix}` : name };
+}
+
+/** The global the host's /config.js writes. Declared structurally rather than reaching for
+ * `Window`, so this module needs no DOM lib — and so a test can hand it a plain object. */
+export interface BrandHost {
+  PRAMEN_CMS_EDITOR?: { brand?: BrandConfig };
+}
+
+/** Pull the brand config off a host global, tolerating its absence (SSR, tests, a /config.js
+ * that 404'd). Exported so the READ is testable, not just the resolution. */
+export function readBrandConfig(host: BrandHost | undefined): BrandConfig | undefined {
+  return host?.PRAMEN_CMS_EDITOR?.brand;
+}
+
+/** The wordmark for THIS page load. Read at module load, like `SIGN_IN_URL` — /config.js is
+ * a plain script tag ahead of the bundle, so it is already set. */
+export const BRAND: Brand = resolveBrand(readBrandConfig(globalThis as BrandHost));
+
+/** The two chrome strings built from the wordmark, in one place so the words that are NOT
+ * the client's name can be seen together — and so neither call site re-invents them.
+ *
+ * Both keep saying "editor" on the DEFAULT wordmark, because that is what the Setup screen
+ * and the browser tab have always said; a configured brand replaces the lot rather than
+ * having an English noun appended to it. */
+export const SETUP_TITLE: string = BRAND.suffix ? `· ${BRAND.suffix}${isDefault(BRAND) ? " editor" : ""}` : "";
+export const DOCUMENT_TITLE: string = isDefault(BRAND) ? `${BRAND.title} editor` : BRAND.title;
+
+/** Whether nothing was configured — the unbranded default, which must render exactly as it
+ * did before this module existed. */
+function isDefault(b: Brand): boolean {
+  return b.name === DEFAULT_BRAND_NAME && b.suffix === DEFAULT_BRAND_SUFFIX;
+}