@pramen/cms-editor 0.0.21 → 0.0.23

package/src/fields.tsx

@@ -1,103 +1,99 @@
 // Schema-driven field forms: one input per FieldDefinition type, recursively composed for
 // group/repeater. Media fields open a picker (upload + choose from the library).
 
-import { useEffect, useRef, useState } from "react";
+import { Button, Input, Textarea } from "@podoba/react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { Api } from "./api";
 import type { FieldDefinition, 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).
+const CONTROL = "h-10 w-full rounded-lg border border-border bg-surface-card px-4 text-sm text-fg outline-none transition-colors placeholder:text-fg-muted focus:border-brand-green";
+
+function FieldShell({ label, children }: { label: ReactNode; children: ReactNode }) {
+  return (
+    <label className="flex w-full flex-col gap-2">
+      <span className="text-sm font-medium text-fg">{label}</span>
+      {children}
+    </label>
+  );
+}
+
 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 });
   return (
-    <>
+    <div className="flex flex-col gap-4">
       {schema.map((def) => (
         <FieldInput key={def.name} def={def} value={value[def.name]} onChange={(v) => set(def.name, v)} api={api} />
       ))}
-    </>
+    </div>
   );
 }
 
 function FieldInput({ def, value, onChange, api }: { def: FieldDefinition; value: unknown; onChange: (v: unknown) => void; api: Api }) {
-  const label = (
-    <span className="lbl">
-      {def.label ?? def.name} {def.required ? <span className="req">*</span> : null}
-    </span>
+  const label: ReactNode = (
+    <>
+      {def.label ?? def.name} {def.required ? <span className="text-danger">*</span> : null}
+    </>
   );
   switch (def.type) {
     case "text":
     case "url":
-      return (
-        <label className="field">
-          {label}
-          <input value={(value as string) ?? ""} onChange={(e) => onChange(e.target.value)} placeholder={def.type === "url" ? "https://…" : ""} />
-        </label>
-      );
+      return <Input label={label} value={(value as string) ?? ""} onChange={onChange} placeholder={def.type === "url" ? "https://…" : ""} />;
     case "textarea":
-      return (
-        <label className="field">
-          {label}
-          <textarea value={typeof value === "string" ? value : value == null ? "" : JSON.stringify(value)} onChange={(e) => onChange(e.target.value)} />
-        </label>
-      );
+      return <Textarea label={label} value={typeof value === "string" ? value : value == null ? "" : JSON.stringify(value)} onChange={onChange} />;
     case "richtext":
       // A rich-text value is an HTML string (round-trips with the site's set:html
       // renderers). A legacy object value isn't editable here — fall back to raw text.
       return (
-        <div className="field">
-          {label}
+        <FieldShell label={label}>
           <RichText value={typeof value === "string" ? value : ""} onChange={onChange as (v: string) => void} />
-        </div>
+        </FieldShell>
       );
     case "number":
       return (
-        <label className="field">
-          {label}
-          <input type="number" value={value == null ? "" : String(value)} onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))} />
-        </label>
+        <FieldShell label={label}>
+          <input className={CONTROL} type="number" value={value == null ? "" : String(value)} onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))} />
+        </FieldShell>
       );
     case "date":
     case "datetime":
       return (
-        <label className="field">
-          {label}
-          <input type={def.type === "date" ? "date" : "datetime-local"} value={(value as string) ?? ""} onChange={(e) => onChange(e.target.value || null)} />
-        </label>
+        <FieldShell label={label}>
+          <input className={CONTROL} type={def.type === "date" ? "date" : "datetime-local"} value={(value as string) ?? ""} onChange={(e) => onChange(e.target.value || null)} />
+        </FieldShell>
       );
     case "boolean":
       return (
-        <label className="field checkbox">
+        <label className="flex items-center gap-2">
           <input type="checkbox" checked={Boolean(value)} onChange={(e) => onChange(e.target.checked)} />
-          <span>{def.label ?? def.name}</span>
+          <span className="text-sm text-fg">{def.label ?? def.name}</span>
         </label>
       );
     case "select":
       return (
-        <label className="field">
-          {label}
-          <select value={(value as string) ?? ""} onChange={(e) => onChange(e.target.value || null)}>
+        <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>
+              <option key={o} value={o}>{o}</option>
             ))}
           </select>
-        </label>
+        </FieldShell>
       );
     case "media":
       return (
-        <label className="field">
-          {label}
+        <FieldShell label={label}>
           <MediaField value={value as string | null} onChange={onChange} api={api} />
-        </label>
+        </FieldShell>
       );
     case "group":
       return (
-        <div className="field">
-          {label}
-          <div className="group">
+        <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} />
           </div>
-        </div>
+        </FieldShell>
       );
     case "repeater":
       return <Repeater def={def} value={(value as Record<string, unknown>[]) ?? []} onChange={onChange as (v: unknown[]) => void} api={api} label={label} />;
@@ -184,21 +180,30 @@ export function RichText({ value, onChange }: { value: string; onChange: (v: str
   };
 
   return (
-    <div className="rt">
-      <div className="rt-toolbar">
+    <div className="overflow-hidden rounded-lg border border-border bg-surface-card">
+      <div className="flex flex-wrap gap-0.5 border-b border-border bg-surface-muted px-2 py-1.5">
         {RT_TOOLS.map((t) => (
           // preventDefault on mousedown keeps the editor's selection while the button is clicked.
-          <button key={t.label} type="button" className="sm ghost" title={t.title} onMouseDown={(e) => e.preventDefault()} onClick={() => t.run(exec)}>
+          <button key={t.label} type="button" className="rounded border-0 bg-transparent px-2.5 py-0.5 text-xs text-fg-muted hover:bg-surface-card hover:text-fg" title={t.title} onMouseDown={(e) => e.preventDefault()} onClick={() => t.run(exec)}>
             {t.label}
           </button>
         ))}
       </div>
-      <div ref={ref} className="rt-editor" contentEditable suppressContentEditableWarning data-placeholder="Write…" onInput={emit} onBlur={emit} onPaste={onPaste} />
+      <div
+        ref={ref}
+        className="prose prose-sm min-h-[180px] max-w-none px-4 py-3.5 text-sm leading-relaxed text-fg outline-none empty:before:text-fg-subtle empty:before:content-[attr(data-placeholder)]"
+        contentEditable
+        suppressContentEditableWarning
+        data-placeholder="Write…"
+        onInput={emit}
+        onBlur={emit}
+        onPaste={onPaste}
+      />
     </div>
   );
 }
 
-function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: Record<string, unknown>[]; onChange: (v: unknown[]) => void; api: Api; label: React.ReactNode }) {
+function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition; value: Record<string, unknown>[]; onChange: (v: unknown[]) => void; api: Api; label: ReactNode }) {
   const items = Array.isArray(value) ? value : [];
   const upd = (i: number, v: Record<string, unknown>) => onChange(items.map((it, j) => (j === i ? v : it)));
   const add = () => onChange([...items, {}]);
@@ -211,27 +216,21 @@ function Repeater({ def, value, onChange, api, label }: { def: FieldDefinition;
     onChange(next);
   };
   return (
-    <div className="field">
-      {label}
+    <div className="flex flex-col gap-2">
+      <span className="text-sm font-medium text-fg">{label}</span>
       {items.map((it, i) => (
-        <div className="repeater-item" key={i}>
-          <div className="ih">
-            <button type="button" className="ghost sm" onClick={() => move(i, -1)}>
-              ↑
-            </button>
-            <button type="button" className="ghost sm" onClick={() => move(i, 1)}>
-              ↓
-            </button>
-            <button type="button" className="ghost sm danger" onClick={() => del(i)}>
-              ✕
-            </button>
+        <div className="rounded-lg border border-border bg-surface-muted p-3.5" key={i}>
+          <div className="mb-2 flex justify-end gap-1">
+            <Button variant="ghost" size="sm" onPress={() => move(i, -1)}>↑</Button>
+            <Button variant="ghost" size="sm" onPress={() => move(i, 1)}>↓</Button>
+            <Button variant="ghost" size="sm" className="text-danger" onPress={() => del(i)}>✕</Button>
           </div>
           <FieldForm schema={def.fields ?? []} value={it} onChange={(v) => upd(i, v)} api={api} />
         </div>
       ))}
-      <button type="button" className="sm" onClick={add} disabled={def.max != null && items.length >= def.max}>
+      <Button variant="secondary" size="sm" className="self-start" onPress={add} isDisabled={def.max != null && items.length >= def.max}>
         + add {def.label ?? def.name}
-      </button>
+      </Button>
     </div>
   );
 }
@@ -245,16 +244,12 @@ function MediaField({ value, onChange, api }: { value: string | null; onChange:
   }, [value, api]);
   return (
     <div>
-      <div className="row" style={{ cursor: "default" }}>
-        {media ? <img src={api.resolve(`/media/${media.file.key}`)} alt="" style={{ width: 40, height: 40, objectFit: "cover", borderRadius: 4 }} /> : <span className="muted">no media</span>}
-        <span className="grow muted">{media?.file.filename ?? value ?? ""}</span>
-        <button type="button" className="sm" onClick={() => setOpen(true)}>
-          pick
-        </button>
+      <div className="flex items-center gap-3 rounded-[14px] border border-transparent bg-surface-card px-[18px] py-3.5">
+        {media ? <img className="h-10 w-10 rounded object-cover" src={api.resolve(`/media/${media.file.key}`)} alt="" /> : <span className="text-fg-subtle">no media</span>}
+        <span className="flex-1 truncate text-fg-subtle">{media?.file.filename ?? value ?? ""}</span>
+        <Button variant="secondary" size="sm" onPress={() => setOpen(true)}>pick</Button>
         {value ? (
-          <button type="button" className="sm ghost danger" onClick={() => onChange(null)}>
-            clear
-          </button>
+          <Button variant="ghost" size="sm" className="text-danger" onPress={() => onChange(null)}>clear</Button>
         ) : null}
       </div>
       {open ? (
@@ -293,28 +288,24 @@ export function MediaPicker({ api, onClose, onPick }: { api: Api; onClose: () =>
     }
   };
   return (
-    <div className="scrim" onClick={onClose}>
-      <div className="modal" onClick={(e) => e.stopPropagation()}>
-        <h2>
-          Choose <span className="dim">a file</span> from the library
-        </h2>
-        {err ? <div className="banner err">{err}</div> : null}
-        <label className="field">
-          <span className="lbl">Upload a new file</span>
-          <input type="file" disabled={busy} onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])} />
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(20,15,5,0.28)] p-6" onClick={onClose}>
+      <div className="max-h-[86vh] w-full max-w-[680px] overflow-auto rounded-panel border border-border bg-surface-card px-9 py-8 shadow-[0_24px_60px_rgba(30,20,10,0.12)]" onClick={(e) => e.stopPropagation()}>
+        <h2 className="mb-5 text-[28px] font-normal text-fg">Choose <span className="text-fg-subtle">a file</span> from the library</h2>
+        {err ? <div className="my-2 rounded-lg border border-danger bg-surface-card px-3.5 py-2.5 text-[13px] text-danger">{err}</div> : null}
+        <label className="mb-4 flex w-full flex-col gap-2">
+          <span className="text-sm font-medium text-fg">Upload a new file</span>
+          <input type="file" className="text-sm text-fg-muted" disabled={busy} onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])} />
         </label>
-        <div className="media-grid">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2.5">
           {media.map((m) => (
-            <div key={m.id} className="media-cell" onClick={() => onPick(m.id)}>
-              {(m.file.contentType ?? "").startsWith("image/") ? <img src={api.resolve(`/media/${m.file.key}`)} alt="" /> : <div style={{ height: 70 }} />}
-              <div className="fn">{m.file.filename ?? m.id}</div>
+            <div key={m.id} className="cursor-pointer overflow-hidden rounded-lg border border-border bg-surface-card" onClick={() => onPick(m.id)}>
+              {(m.file.contentType ?? "").startsWith("image/") ? <img className="block h-[130px] w-full object-cover" src={api.resolve(`/media/${m.file.key}`)} alt="" /> : <div className="h-[130px] bg-surface-muted" />}
+              <div className="truncate px-2 py-1.5 text-[11px] text-fg-muted">{m.file.filename ?? m.id}</div>
             </div>
           ))}
         </div>
-        <div style={{ marginTop: 12, textAlign: "right" }}>
-          <button className="ghost" onClick={onClose}>
-            close
-          </button>
+        <div className="mt-3 text-right">
+          <Button variant="ghost" onPress={onClose}>close</Button>
         </div>
       </div>
     </div>

package/src/main.tsx

@@ -1,11 +1,18 @@
+import { BuzolaProvider } from "@buzola/router";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { App } from "./app";
-import { css } from "./styles";
+import { pageRegistry, routes } from "virtual:buzola/routes";
+import { AppProvider } from "./app-context";
 
-const style = document.createElement("style");
-style.textContent = css;
-document.head.appendChild(style);
+// Styling is podoba: @podoba/tokens/variables.css + the compiled Tailwind (podoba
+// preset) are <link>ed by index.html (see scripts/build.ts). No more inline CSS.
 
 const el = document.getElementById("app");
-if (el) createRoot(el).render(<StrictMode><App /></StrictMode>);
+if (el)
+  createRoot(el).render(
+    <StrictMode>
+      <AppProvider>
+        <BuzolaProvider routes={routes} pageRegistry={pageRegistry} />
+      </AppProvider>
+    </StrictMode>,
+  );

package/src/routes/_404.tsx

@@ -0,0 +1,20 @@
+// Fallback for an unmatched path.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { Button } from "@podoba/react";
+
+export default createPage().render(function NotFound() {
+  const navigate = useNavigate();
+  return (
+    <div className="mx-auto max-w-[1200px] px-7 pt-8">
+      <h1 className="m-0 text-[56px] font-normal leading-[1.05] tracking-[-0.01em] max-[820px]:text-[40px]">
+        <span className="block text-fg-subtle">Not found</span>
+        <span className="block text-fg">Nothing lives here</span>
+      </h1>
+      <div className="mt-4 flex items-center gap-2">
+        <p className="text-fg-subtle">That page doesn&apos;t exist.</p>
+        <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← back to pages</Button>
+      </div>
+    </div>
+  );
+});

package/src/routes/_layout.tsx

@@ -0,0 +1,48 @@
+// Root layout: the persistent chrome (top bar + tab nav + global error banner) wrapped
+// around every route via <Outlet />. Tab highlighting is derived from the current path,
+// so a deep link or refresh lands with the right tab lit.
+
+import { Outlet, useNavigate, useRoute } from "@buzola/router";
+import { Button } from "@podoba/react";
+import { useApp } from "../app-context";
+
+export default function RootLayout() {
+  const { cfg, isAdmin, error, reconfigure } = useApp();
+  const navigate = useNavigate();
+  const { pathname } = useRoute();
+
+  // "Pages" stays lit while editing a page (/pages/:id) too.
+  const active = pathname.startsWith("/pages") || pathname === "/" ? "pages"
+    : pathname.startsWith("/media") ? "media"
+    : pathname.startsWith("/users") ? "users"
+    : pathname.startsWith("/settings") ? "settings"
+    : "";
+
+  const tabCls = (key: string) =>
+    active === key ? "bg-surface-muted text-fg" : "text-fg-muted";
+
+  return (
+    <>
+      <div className="sticky top-0 z-10 flex items-center gap-4 bg-surface px-7 py-4">
+        <span className="text-[15px] font-bold tracking-[0.01em] text-fg">
+          pramen <span className="font-normal text-fg-subtle">· cms</span>
+        </span>
+        <span className="flex-1" />
+        <nav className="flex items-center gap-0.5">
+          <Button variant="ghost" size="sm" className={tabCls("pages")} onPress={() => navigate("home")}>Pages</Button>
+          <Button variant="ghost" size="sm" className={tabCls("media")} onPress={() => navigate("media")}>Media</Button>
+          {isAdmin ? (
+            <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>
+        </nav>
+        <span className="ml-3 text-fg-subtle">{cfg.tenant}</span>
+        <Button variant="ghost" size="sm" onPress={reconfigure}>sign out</Button>
+      </div>
+      {error ? (
+        <div className="mx-7 mt-2 rounded-lg border border-danger bg-surface-card px-4 py-2.5 text-sm text-danger">{error}</div>
+      ) : null}
+      <Outlet />
+    </>
+  );
+}

package/src/routes/home.tsx

@@ -0,0 +1,34 @@
+// Home route (`/`): the page list. Opening a page navigates to /pages/:pageId.
+
+import { createPage, useNavigate } from "@buzola/router";
+import { useEffect, useState } from "react";
+import { useApp } from "../app-context";
+import { PageList, errMsg } from "../components";
+import type { BlockType, Page } from "../types";
+
+export default createPage()
+  .route("/")
+  .render(function Home() {
+    const { api, setError } = useApp();
+    const navigate = useNavigate();
+    const [pages, setPages] = useState<Page[]>([]);
+    const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
+
+    const refreshPages = () => api.listPages().then(setPages).catch((e) => setError(errMsg(e)));
+    useEffect(() => {
+      refreshPages();
+      api.listBlockTypes().then(setBlockTypes).catch((e) => setError(errMsg(e)));
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [api]);
+
+    return (
+      <PageList
+        api={api}
+        pages={pages}
+        blockTypes={blockTypes}
+        onOpen={(p) => navigate("page", { params: { pageId: p.id } })}
+        onCreated={refreshPages}
+        onError={setError}
+      />
+    );
+  });

package/src/routes/media.tsx

@@ -0,0 +1,12 @@
+// Media library route (`/media`).
+
+import { createPage } from "@buzola/router";
+import { useApp } from "../app-context";
+import { MediaLibrary } from "../components";
+
+export default createPage()
+  .route("/media")
+  .render(function Media() {
+    const { api, setError } = useApp();
+    return <MediaLibrary api={api} onError={setError} />;
+  });

package/src/routes/page.tsx

@@ -0,0 +1,62 @@
+// Page editor route (`/pages/:pageId`). The inspector tab is carried in the URL as
+// `?tab=` so a specific panel is deep-linkable and survives refresh; block selection
+// stays local (it's a transient in-canvas overlay).
+
+import { createPage, useNavigate } from "@buzola/router";
+import { Button } from "@podoba/react";
+import { useEffect, useState } from "react";
+import { useApp } from "../app-context";
+import { INSPECTOR_TABS, PageEditor, errMsg, type InspectorTab } from "../components";
+import type { BlockType, Page } from "../types";
+
+export default createPage()
+  .params({ pageId: "string", tab: "?string" })
+  .route("/pages/:pageId")
+  .render(function PageEditorRoute({ params }) {
+    const { api, setError } = useApp();
+    const navigate = useNavigate();
+    const [page, setPage] = useState<Page | null>(null);
+    const [blockTypes, setBlockTypes] = useState<BlockType[]>([]);
+    const [missing, setMissing] = useState(false);
+
+    useEffect(() => {
+      let live = true;
+      setMissing(false);
+      // No get-page-by-id handler; resolve the id against the page list.
+      api.listPages()
+        .then((rows) => {
+          if (!live) return;
+          const found = rows.find((p) => p.id === params.pageId) ?? null;
+          setPage(found);
+          setMissing(!found);
+        })
+        .catch((e) => setError(errMsg(e)));
+      api.listBlockTypes().then((r) => live && setBlockTypes(r)).catch((e) => setError(errMsg(e)));
+      return () => { live = false; };
+    }, [api, params.pageId, setError]);
+
+    const tab: InspectorTab = INSPECTOR_TABS.includes(params.tab as InspectorTab) ? (params.tab as InspectorTab) : "settings";
+    const setTab = (t: InspectorTab) => navigate("page", { params: { pageId: params.pageId, tab: t }, replace: true });
+
+    if (missing) {
+      return (
+        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
+          <p className="text-fg-subtle">Page not found.</p>
+          <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← all pages</Button>
+        </div>
+      );
+    }
+    if (!page) return <div className="mx-auto max-w-[1200px] px-7 pt-8"><p className="text-fg-subtle">Loading…</p></div>;
+
+    return (
+      <PageEditor
+        api={api}
+        page={page}
+        blockTypes={blockTypes}
+        tab={tab}
+        onTab={setTab}
+        onBack={() => navigate("home")}
+        onChange={setPage}
+      />
+    );
+  });

package/src/routes/settings.tsx

@@ -0,0 +1,12 @@
+// Account settings route (`/settings`).
+
+import { createPage } from "@buzola/router";
+import { useApp } from "../app-context";
+import { SettingsView } from "../components";
+
+export default createPage()
+  .route("/settings")
+  .render(function Settings() {
+    const { api, cfg, me, setError, reconfigure } = useApp();
+    return <SettingsView api={api} cfg={cfg} me={me} onSignOut={reconfigure} onError={setError} />;
+  });

package/src/routes/users.tsx

@@ -0,0 +1,26 @@
+// Users management route (`/users`) — admin only. The tab is hidden for non-admins, but
+// the route guards independently (a direct deep link by a non-admin gets a notice, and
+// the server enforces the ACL regardless).
+
+import { createPage, useNavigate } from "@buzola/router";
+import { Button } from "@podoba/react";
+import { useApp } from "../app-context";
+import { UsersView } from "../components";
+
+export default createPage()
+  .route("/users")
+  .render(function Users() {
+    const { api, me, isAdmin, setError } = useApp();
+    const navigate = useNavigate();
+
+    if (me === null) return <div className="mx-auto max-w-[1200px] px-7 pt-8"><p className="text-fg-subtle">Loading…</p></div>;
+    if (!isAdmin) {
+      return (
+        <div className="mx-auto flex max-w-[1200px] items-center gap-2 px-7 pt-8">
+          <p className="text-fg-subtle">Admins only.</p>
+          <Button variant="ghost" size="sm" onPress={() => navigate("home")}>← back to pages</Button>
+        </div>
+      );
+    }
+    return <UsersView api={api} me={me} onError={setError} />;
+  });

package/src/virtual-modules.d.ts

@@ -0,0 +1,6 @@
+// The Bun plugin (`@buzola/bun-plugin`) resolves `virtual:buzola/routes` at build time,
+// re-exporting from the generated `buzola.gen.ts`. This declaration lets tsc resolve the
+// same import against the committed generated file.
+declare module "virtual:buzola/routes" {
+  export { pageRegistry, routes } from "./buzola.gen";
+}