@pramen/cms-editor 0.0.32 → 0.0.34

package/package.json

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

@@ -10,7 +10,12 @@ import { Api, clearConfig, isTokenExpired, loadConfig, saveConfig, type Config }
 declare global {
   interface Window {
     /** Runtime config set by the host's /config.js (see @pramen/cms-editor build). */
-    PRAMEN_CMS_EDITOR?: { signInUrl?: string };
+    PRAMEN_CMS_EDITOR?: {
+      signInUrl?: string;
+      /** 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/fields.tsx

@@ -73,12 +73,7 @@ function FieldInput({ def, value, onChange, api }: { def: FieldDefinition; value
     case "select":
       return (
         <FieldShell label={label}>
-          <select className={CONTROL} value={(value as string) ?? ""} onChange={(e) => onChange(e.target.value || null)}>
-            <option value="">—</option>
-            {(def.options ?? []).map((o) => (
-              <option key={o} value={o}>{o}</option>
-            ))}
-          </select>
+          <SelectField def={def} value={value as string | null} onChange={onChange} api={api} />
         </FieldShell>
       );
     case "media":
@@ -235,6 +230,33 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
   );
 }
 
+// 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 }: { def: FieldDefinition; value: string | null; onChange: (v: unknown) => void; api: Api }) {
+  const [dyn, setDyn] = useState<{ value: string; label: string }[] | null>(null);
+  const from = def.optionsFrom;
+  useEffect(() => {
+    if (!from) return;
+    let alive = true;
+    api
+      .call<{ value: string; label: string }[]>(from)
+      .then((r) => { if (alive) setDyn(Array.isArray(r) ? r : []); })
+      .catch(() => { if (alive) setDyn([]); });
+    return () => { alive = false; };
+  }, [from, api]);
+  const loading = Boolean(from) && dyn === null;
+  const opts = from ? dyn ?? [] : (def.options ?? []).map((o) => ({ value: o, label: o }));
+  return (
+    <select className={CONTROL} value={value ?? ""} onChange={(e) => onChange(e.target.value || null)}>
+      <option value="">{loading ? "Načítám…" : "—"}</option>
+      {opts.map((o) => (
+        <option key={o.value} value={o.value}>{o.label}</option>
+      ))}
+    </select>
+  );
+}
+
 function MediaField({ value, onChange, api }: { value: string | null; onChange: (v: string | null) => void; api: Api }) {
   const [open, setOpen] = useState(false);
   const [media, setMedia] = useState<Media | null>(null);

package/src/routes/_layout.tsx

@@ -21,6 +21,9 @@ export default function RootLayout() {
   const tabCls = (key: string) =>
     active === key ? "bg-surface-muted text-fg" : "text-fg-muted";
 
+  // Host-configured links to companion tools (e.g. a curation page), from /config.js.
+  const extraNav = typeof window !== "undefined" ? window.PRAMEN_CMS_EDITOR?.extraNav ?? [] : [];
+
   return (
     <>
       <div className="sticky top-0 z-10 flex items-center gap-4 bg-surface px-7 py-4">
@@ -35,6 +38,20 @@ export default function RootLayout() {
             <Button variant="ghost" size="sm" className={tabCls("users")} onPress={() => navigate("users")}>Users</Button>
           ) : null}
           <Button variant="ghost" size="sm" className={tabCls("settings")} onPress={() => navigate("settings")}>Settings</Button>
+          {extraNav.map((l) => (
+            // Companion tools live OUTSIDE this SPA (a separate static page/worker route), so
+            // open them in a new tab. A same-tab click would be caught by the client router
+            // (Navigation API) and fall to the in-app 404, since the path isn't an SPA route.
+            <a
+              key={l.href}
+              href={l.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded-md px-2.5 py-1.5 text-sm text-fg-muted transition-colors hover:bg-surface-muted hover:text-fg"
+            >
+              {l.label}
+            </a>
+          ))}
         </nav>
         <span className="ml-3 text-fg-subtle">{cfg.tenant}</span>
         <Button variant="ghost" size="sm" onPress={reconfigure}>sign out</Button>

package/src/types.ts

@@ -26,6 +26,10 @@ export interface FieldDefinition {
   min?: number;
   max?: number;
   options?: string[];
+  /** For `select`: fetch options at edit time from a query handler of this name, which must
+   * return `{ value, label }[]`. Lets a select offer live data (e.g. existing campaigns)
+   * instead of a static list. Takes precedence over `options`. */
+  optionsFrom?: string;
 }
 
 export interface RegionDefinition {