@pramen/cms-editor 0.0.60 → 0.0.63

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.60",
-  "description": "Visual block/page editor for @pramen/cms \u2014 a standalone React SPA that talks to the CMS handlers over HTTP.",
+  "version": "0.0.63",
+  "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@buzola/router": "^0.0.12",
+    "@phosphor-icons/react": "^2.1.10",
     "@podoba/react": "^0.0.34",
     "@podoba/tailwind": "^0.0.34",
     "@podoba/tokens": "^0.0.34",

package/src/api.ts

@@ -2,7 +2,7 @@
 // same transport shape as @pramen/admin's api.ts. Config is persisted in localStorage.
 
 import type { AdminPageMeta, AdminPageResponse, AssembledPage, AuditEntry, BlockType, ContentType, Media, Menu, MenuItem, Page, Redirect, Taxonomy, Term, Widget, WidgetArea } from "./types";
-import type { DefaultBlockDefinition, FieldDefinition, RegionDefinition, RpcInput } from "./types";
+import type { DefaultBlockDefinition, FieldDefinition, MediaKind, MediaSort, RegionDefinition, RpcInput, TaxonomyTarget } from "./types";
 
 /** The payload `createBlockType` / `updateBlockType` take. `fieldsSchema` is the whole
  * point: a block type IS its field schema. */
@@ -173,7 +173,13 @@ export class Api {
   listPageAudit = (pageId: string) => this.call<AuditEntry[]>("listPageAudit", { pageId });
 
   // --- media ---
-  listMedia = (limit = 50, offset = 0) => this.call<Media[]>("listMedia", { limit, offset });
+  // `undefined` values are simply not serialized, so the absent narrowings need no
+  // conditional spreading — an omitted key and a key set to undefined reach the server the same.
+  /** Options rather than positionals: the library narrows by four independent things, and
+   * `listMedia(60, 0, sort, undefined, undefined, term)` is a call site nobody can read and
+   * everybody can get one argument out of step. */
+  listMedia = (opts: { limit?: number; offset?: number; sort?: MediaSort; kind?: MediaKind; q?: string; term?: string } = {}) =>
+    this.call<Media[]>("listMedia", { limit: opts.limit ?? 50, offset: opts.offset ?? 0, sort: opts.sort, kind: opts.kind, q: opts.q, term: opts.term });
   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 });
@@ -209,10 +215,14 @@ export class Api {
     this.call<Redirect>("updateRedirect", { id, ...patch } as unknown as RpcInput);
   deleteRedirect = (id: string) => this.call<{ ok: true }>("deleteRedirect", { id });
 
-  listTaxonomies = () => this.call<Taxonomy[]>("listTaxonomies");
-  createTaxonomy = (input: { slug: string; label: string; pluralLabel?: string; description?: string; hierarchical?: boolean }) =>
-    this.call<Taxonomy>("createTaxonomy", input);
-  updateTaxonomy = (id: string, patch: { label?: string; pluralLabel?: string | null; description?: string | null; hierarchical?: boolean }) =>
+  /** Every vocabulary, or only those that classify `target`. The narrowing is the SERVER's —
+   * the page panel, the media panel and the write-side guard read one answer, so they cannot
+   * disagree about what a vocabulary applies to. The Taxonomies screen passes nothing: the one
+   * place that edits `appliesTo` has to see a vocabulary it has narrowed away. */
+  listTaxonomies = (target?: TaxonomyTarget) => this.call<Taxonomy[]>("listTaxonomies", { target });
+  createTaxonomy = (input: { slug: string; label: string; pluralLabel?: string; description?: string; hierarchical?: boolean; appliesTo?: TaxonomyTarget[] | null }) =>
+    this.call<Taxonomy>("createTaxonomy", { ...input, appliesTo: input.appliesTo ?? null });
+  updateTaxonomy = (id: string, patch: { label?: string; pluralLabel?: string | null; description?: string | null; hierarchical?: boolean; appliesTo?: TaxonomyTarget[] | null }) =>
     this.call<Taxonomy>("updateTaxonomy", { id, ...patch } as unknown as RpcInput);
   deleteTaxonomy = (id: string) => this.call<{ ok: true }>("deleteTaxonomy", { id });
 
@@ -224,9 +234,16 @@ export class Api {
     this.call<Term>("updateTerm", { id, ...patch } as unknown as RpcInput);
   deleteTerm = (id: string) => this.call<{ ok: true }>("deleteTerm", { id });
 
+  /** Mint a signed, self-expiring preview link for one page. Editor-gated to MINT; anyone
+   * holding the result can redeem it with no account, which is the point. */
+  signPagePreview = (pageId: string) => this.call<{ url: string; token: string; expiresAt: number }>("signPagePreview", { pageId });
+
   listPageTerms = (pageId: string) => this.call<Term[]>("listPageTerms", { pageId });
   setPageTerms = (pageId: string, termIds: string[]) => this.call<{ ok: true }>("setPageTerms", { pageId, termIds });
 
+  listMediaTerms = (mediaId: string) => this.call<Term[]>("listMediaTerms", { mediaId });
+  setMediaTerms = (mediaId: string, termIds: string[]) => this.call<{ ok: true }>("setMediaTerms", { mediaId, termIds });
+
   // --- Block Kit: custom admin pages ---
   /** The pages THIS caller may open. Filtered server-side, so a nav entry that 403s when
    * clicked cannot happen. An older server has no such handler; the caller treats a failure

package/src/app-context.tsx

@@ -36,6 +36,10 @@ declare global {
        * 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;
+      /** Where THIS SITE renders a page preview (e.g. `/preview`). The editor appends
+       * `?token=…`. Unset, a preview link points at the CMS's own redeem endpoint, which
+       * answers with JSON — see `preview.ts`. */
+      previewUrl?: string;
     };
   }
 }

package/src/app.css

@@ -10,3 +10,51 @@
  * it explicitly (paths are relative to this file). */
 @source "./**/*.{ts,tsx}";
 @source "../node_modules/@podoba/react/src/**/*.{ts,tsx}";
+
+/* Buttons look clickable.
+ *
+ * podoba's `Button` sets no `cursor`, and a real `<button>` gets the default arrow from the
+ * UA sheet — so every button in this app has been showing an arrow, which reads as "not
+ * interactive" to anyone who has used the web. It went unnoticed while the header's Upload
+ * control was a hand-styled `<label>` carrying its own `cursor-pointer`; swapping that for the
+ * design system's Button is what surfaced it.
+ *
+ * In the BASE layer on purpose: Tailwind emits utilities after base, so a component that means
+ * something else by its cursor still wins — podoba's own `data-[pending]:cursor-progress` on a
+ * submitting button, for one. Scoped away from disabled controls, where an arrow is the
+ * correct signal.
+ *
+ * The right home for this is @podoba/react's Button. Until it lands there, one rule here
+ * covers the app rather than every call site remembering. */
+@layer base {
+  button:not(:disabled):not([aria-disabled="true"]),
+  [role="button"]:not([aria-disabled="true"]),
+  label:has(> input[type="file"]) {
+    cursor: pointer;
+  }
+}
+
+/* Turn OFF scroll anchoring for the page scroller.
+ *
+ * This is the fix for a self-referential loop, not a preference. The screen header condenses
+ * once the page is scrolled, which removes ~134px of layout ABOVE the viewport — and scroll
+ * anchoring exists precisely to compensate for that, so the browser silently subtracts the
+ * same 134px from `scrollY` to keep the visible content still. That new scroll position is an
+ * input to the condition that condensed the header, so it flips back, restores the 134px, and
+ * the browser gives the scroll offset back: the header oscillates while the reader is not
+ * touching anything. Hysteresis alone cannot fix it — the compensation is the same size as the
+ * change, so the dead band would have to be wider than the collapse itself, which just moves
+ * the loop further down the page.
+ *
+ * What anchoring buys HERE is close to nothing, which is what makes this trade cheap: the
+ * lists load in explicit "load more" pages appended BELOW the viewport, and every media cell is
+ * a fixed 130px box, so no image settling reflows content above where you are reading.
+ *
+ * On the scroller, because that is the only place it works — `overflow-anchor: none` on an
+ * element merely excludes THAT element from being chosen as the anchor, and the header is not
+ * the anchor here; the list below it is. */
+@layer base {
+  html {
+    overflow-anchor: none;
+  }
+}

package/src/breadcrumb.tsx

@@ -0,0 +1,48 @@
+// Where you are, for the app bar.
+//
+// The trail has two parts and they come from different places, which is the whole design
+// here. The SECTION is derivable — the layout already knows which nav entry is lit, and that
+// entry carries both a label and the route back to its list. The DETAIL is not: `/pages/:id`
+// carries an opaque id, and the page's title only exists inside the editor that fetched it.
+// So the section is computed in the layout and the detail is PUBLISHED by whatever is on
+// screen, through the hook below.
+//
+// It matters most exactly where the screen header is absent. A list screen already says
+// "Media" in 56px immediately under the bar, so the crumb there is a mild echo; a page editor
+// has no header at all — three columns of panels and a "← all pages" button — and the trail is
+// the only thing naming what is open.
+//
+// A LEAF module: `components.tsx` and `furniture.tsx` both publish into it, and
+// `components.tsx` already imports from `furniture.tsx`, so anything they share has to sit
+// below both.
+
+import { createContext, useContext, useEffect, type ReactNode } from "react";
+
+/** Only the SETTER travels down. The value lives in the layout, which is also what renders
+ * the bar — handing the value back down as well would be a second copy of state that exists
+ * to be read by the component that owns it. */
+const PublishCrumb = createContext<(label: string | null) => void>(() => {});
+
+export function BreadcrumbProvider({ publish, children }: { publish: (label: string | null) => void; children: ReactNode }) {
+  return <PublishCrumb.Provider value={publish}>{children}</PublishCrumb.Provider>;
+}
+
+/**
+ * Publish the trailing crumb for the screen that is mounted.
+ *
+ * Pass `undefined` while the record is still loading and the bar simply shows the section —
+ * better than a crumb that says "Loading…" and then changes, which draws the eye to the one
+ * place on screen that should be still.
+ *
+ * The cleanup is not optional: without it a crumb outlives its screen, so leaving a page
+ * editor for a list would leave the page's title sitting in the bar next to a different
+ * section. Effect-based rather than render-time, because publishing during render is a state
+ * update in another component's render pass.
+ */
+export function useCrumb(label: string | null | undefined): void {
+  const publish = useContext(PublishCrumb);
+  useEffect(() => {
+    publish(label ?? null);
+    return () => publish(null);
+  }, [label, publish]);
+}

package/src/chrome.ts

@@ -14,3 +14,30 @@ export const WRAP = "mx-auto max-w-[1200px] px-7 pb-8 pt-2";
 
 /** One row in a list — a card-surfaced strip with the standard inset. */
 export const ROW = "flex items-center gap-3 rounded-[14px] border border-transparent bg-surface-card px-[18px] py-3.5";
+
+// --- the app bar, and what has to clear it -----------------------------------------------
+//
+// Two classes for ONE number. The app bar (the rail toggle + the account menu) is sticky at
+// the top of the content column, and the screen header is sticky BELOW it — so the header's
+// offset has to be the bar's height, exactly. They live here, together, because the two are
+// rendered by different modules (`routes/_layout.tsx` and `page-header.tsx`) and a magic `44`
+// written out in each is a one-pixel gap or overlap waiting for the next edit. Tailwind needs
+// literal class names, so this is a pair of strings rather than a length.
+
+/** The app bar's height. */
+export const APP_BAR_H = "h-11";
+
+/** …and the sticky offset anything pinned beneath it must use. Same 44px. */
+export const BELOW_APP_BAR = "top-11";
+
+// --- the page editor's own toolbar ---------------------------------------------------------
+//
+// Same "two classes for one number" rule as the app bar above, one level deeper. The editor's
+// toolbar is sticky BELOW the app bar, and the inspector column is sticky below THAT — three
+// elements, two of which need to know the height of what is above them.
+
+/** The page editor's toolbar height. */
+export const PAGE_TOOLBAR_H = "h-14";
+
+/** …and the offset for anything pinned beneath it: the app bar (44px) plus the toolbar (56). */
+export const BELOW_PAGE_TOOLBAR = "top-[6.25rem]";