@pramen/cms-editor 0.0.33 → 0.0.35

package/package.json

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

@@ -139,14 +139,27 @@ function CreatePage({ api, onClose, onCreated, onError }: { api: Api; onClose: (
     <Modal onClose={onClose}>
       <ModalTitle>Create a <Dim>new page</Dim> and define the essentials<Dim>.</Dim></ModalTitle>
       <div className="flex flex-col gap-4">
-        <label className="flex w-full flex-col gap-2">
+        <div className="flex w-full flex-col gap-2">
           <span className="text-sm font-medium text-fg">Content type</span>
-          <select className="h-10 w-full rounded-lg border border-border bg-surface-card px-4 text-sm text-fg outline-none focus:border-brand-green" value={typeId} onChange={(e) => setTypeId(e.target.value)}>
+          {/* Visible cards, not a dropdown: the type is an easy-to-miss choice, and picking the
+              wrong one puts the entry under a different route. Cards make the selection deliberate. */}
+          <div className="flex flex-wrap gap-2">
             {cts.map((c) => (
-              <option key={c.id} value={c.id}>{c.name}</option>
+              <button
+                key={c.id}
+                type="button"
+                onClick={() => setTypeId(c.id)}
+                className={`rounded-lg border px-4 py-2.5 text-sm font-medium transition-colors ${
+                  typeId === c.id
+                    ? "border-brand-green bg-surface-muted text-fg"
+                    : "border-border bg-surface-card text-fg-muted hover:border-fg-subtle hover:text-fg"
+                }`}
+              >
+                {c.name}
+              </button>
             ))}
-          </select>
-        </label>
+          </div>
+        </div>
         <Input label="Title" value={title} onChange={setTitle} />
         <Input label="Slug" value={slug} onChange={setSlug} placeholder={slugify(title)} />
         <div className="mt-2 flex justify-end gap-2">

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

@@ -39,9 +39,14 @@ export default function RootLayout() {
           ) : 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}

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 {