@pramen/cms-editor 0.0.21 → 0.0.23

package/dist/tokens.css

@@ -0,0 +1,68 @@
+/* AUTO-GENERATED by @tools/sync-tokens — DO NOT EDIT BY HAND. */
+/* Source of truth: the API → packages/tokens/src/tokens.json. */
+/* Regenerate: bun --filter @tools/sync-tokens start */
+
+:root {
+	--color-accent-green-light: #b1fed4;
+	--color-accent-mint: #dff6ec;
+	--color-accent-pink: #ff69b4;
+	--color-accent-strong: #4bcf9f;
+	--color-accent-yellow: #ffcc6a;
+	--color-border: #eceae1;
+	--color-brand-green: #75e7b8;
+	--color-brand-primary: #0d0d0d;
+	--color-brand-secondary: #6eddb1;
+	--color-danger: #dc2626;
+	--color-danger-fg: #ffffff;
+	--color-fg: #0d0d0d;
+	--color-fg-inverted: #ffffff;
+	--color-fg-muted: #7d786f;
+	--color-fg-subtle: #aba89c;
+	--color-neutral-600: #333333;
+	--color-ring: #0d0d0d;
+	--color-success: #4bcf9f;
+	--color-success-fg: #0d0d0d;
+	--color-surface: #ffffff;
+	--color-surface-card: #f7f6f2;
+	--color-surface-inverted: #242423;
+	--color-surface-muted: #eceae1;
+	--color-surface-placeholder: #333333;
+	--font-mono: 'GT America Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+	--font-sans: 'GT America', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+	--font-size-body: 1rem;
+	--font-size-callout: 0.9375rem;
+	--font-size-caption: 0.6875rem;
+	--font-size-compact: 0.8125rem;
+	--font-size-display: 1.75rem;
+	--font-size-heading1: 1.75rem;
+	--font-size-heading2: 1.375rem;
+	--font-size-heading3: 1.25rem;
+	--font-size-heading4: 1.125rem;
+	--font-size-heading5: 1rem;
+	--font-size-headline: 1.375rem;
+	--font-size-label: 0.75rem;
+	--font-size-micro: 0.625rem;
+	--font-size-subtitle: 1.125rem;
+	--font-size-title: 1.25rem;
+	--line-height-heading1: 30px;
+	--line-height-heading2: 24px;
+	--line-height-heading3: 22px;
+	--line-height-heading4: 22px;
+	--line-height-heading5: 20px;
+	--radius-2xl: 1rem;
+	--radius-lg: 0.5rem;
+	--radius-md: 0.375rem;
+	--radius-panel: 1.1rem;
+	--radius-sm: 0.125rem;
+	--radius-xl: 0.75rem;
+	--space-lg: 1.5rem;
+	--space-md: 1rem;
+	--space-nav-x: 0.8125rem;
+	--space-sm: 0.5rem;
+	--space-xl: 2rem;
+	--space-xs: 0.25rem;
+	--tracking-normal: -0.13px;
+	--tracking-tight: -0.2px;
+	--tracking-wide: -0.56px;
+	--tracking-wider: -0.6px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {
@@ -15,14 +15,22 @@
   "scripts": {
     "build": "bun run scripts/build.ts",
     "dev": "bun run scripts/build.ts --watch",
+    "codegen": "bun run scripts/codegen.ts",
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
+    "@buzola/router": "^0.0.12",
+    "@podoba/react": "^0.0.3",
+    "@podoba/tokens": "^0.0.3",
+    "@podoba/tailwind": "^0.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@buzola/bun-plugin": "^0.0.12",
+    "@buzola/codegen": "^0.0.12",
     "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0"
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.19"
   }
 }

package/src/app-context.tsx

@@ -0,0 +1,86 @@
+// App-wide context for the routed editor: the HTTP client, the persisted config, the
+// signed-in identity (`me`), and a global error sink rendered by the root layout. Also
+// owns the pre-route config gate — when there's no base URL + token yet, it renders the
+// Setup screen instead of mounting the router at all.
+
+import { Button, Input } from "@podoba/react";
+import { createContext, use, useEffect, useMemo, useState } from "react";
+import { Api, loadConfig, saveConfig, type Config } from "./api";
+
+export interface Me {
+  userId?: string;
+  roles?: string[];
+  [k: string]: unknown;
+}
+
+interface AppContextValue {
+  api: Api;
+  cfg: Config;
+  me: Me | null;
+  isAdmin: boolean;
+  error: string;
+  setError: (s: string) => void;
+  /** Sign out — drop the token so the config gate falls back to Setup. */
+  reconfigure: () => void;
+}
+
+const AppContext = createContext<AppContextValue | null>(null);
+
+export function useApp(): AppContextValue {
+  const v = use(AppContext);
+  if (!v) throw new Error("useApp must be used within <AppProvider>");
+  return v;
+}
+
+export function AppProvider({ children }: { children: React.ReactNode }) {
+  const [cfg, setCfg] = useState<Config>(loadConfig());
+  const [me, setMe] = useState<Me | null>(null);
+  const [error, setError] = useState("");
+  const api = useMemo(() => new Api(cfg), [cfg]);
+  const configured = Boolean(cfg.baseUrl && cfg.token);
+
+  useEffect(() => {
+    if (!configured) return;
+    // `me` gates the Users tab + drives Settings — a failing call is fine (leaves it {}).
+    api.call<Me>("me").then(setMe).catch(() => setMe({}));
+  }, [api, configured]);
+
+  if (!configured) {
+    return <Setup cfg={cfg} onSave={(c) => { saveConfig(c); setCfg(c); }} />;
+  }
+
+  const value: AppContextValue = {
+    api,
+    cfg,
+    me,
+    isAdmin: (me?.roles ?? []).includes("admin"),
+    error,
+    setError,
+    reconfigure: () => { setMe(null); setError(""); setCfg({ ...cfg, token: "" }); },
+  };
+  return <AppContext value={value}>{children}</AppContext>;
+}
+
+function Setup({ cfg, onSave }: { cfg: Config; onSave: (c: Config) => void }) {
+  const [c, setC] = useState(cfg);
+  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)]">
+        <h1 className="mb-4 text-display text-fg">
+          pramen <span className="text-fg-subtle">· cms editor</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>).
+        </p>
+        <div className="flex flex-col gap-4">
+          <Input label="Worker base URL" value={c.baseUrl} onChange={(baseUrl) => setC({ ...c, baseUrl })} placeholder="https://your-worker.workers.dev" />
+          <Input label="Tenant" value={c.tenant} onChange={(tenant) => setC({ ...c, tenant })} placeholder="main" />
+          <Input label="Bearer token (editor or reviewer)" value={c.token} onChange={(token) => setC({ ...c, token })} placeholder="eyJ…" />
+          <Button className="mt-2 w-full" onPress={() => onSave(c)} isDisabled={!c.baseUrl || !c.token}>
+            Connect
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/buzola.gen.ts

@@ -0,0 +1,78 @@
+// This file is auto-generated by @buzola/codegen. Do not edit.
+/* eslint-disable */
+
+import { lazy, type ComponentType } from 'react';
+import { buildRouteTree } from '@buzola/router';
+import type { RouteConfig } from '@buzola/router';
+
+import Route0 from './routes/_layout';
+const Route1 = () => import('./routes/home').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route2 = () => import('./routes/media').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route3 = () => import('./routes/page').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route4 = () => import('./routes/settings').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route5 = () => import('./routes/users').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+const Route6 = () => import('./routes/_404').then(m => ({ default: m.default.component })) as Promise<{ default: ComponentType }>;
+
+// Module augmentation for type-safe page-centric routing
+declare module '@buzola/router' {
+  interface BuzolaPageMap {
+    'home': {};
+    'media': {};
+    'page': { pageId: string; tab?: string };
+    'settings': {};
+    'users': {};
+  }
+}
+
+// Page registry — page ID → route pattern
+export const pageRegistry: Record<string, string> = {
+  'home': '/',
+  'media': '/media',
+  'page': '/pages/:pageId',
+  'settings': '/settings',
+  'users': '/users',
+};
+
+const routeConfigs: RouteConfig[] = [
+  {
+    path: '/',
+    component: Route0,
+    isLayout: true,
+    children: [
+      {
+        path: '/home',
+        matchPath: '/',
+        component: lazy(Route1),
+        preload: Route1,
+      },
+      {
+        path: '/media',
+        component: lazy(Route2),
+        preload: Route2,
+      },
+      {
+        path: '/page',
+        matchPath: '/pages/:pageId',
+        component: lazy(Route3),
+        preload: Route3,
+      },
+      {
+        path: '/settings',
+        component: lazy(Route4),
+        preload: Route4,
+      },
+      {
+        path: '/users',
+        component: lazy(Route5),
+        preload: Route5,
+      },
+      {
+        path: '/:__notFound+',
+        component: lazy(Route6),
+        preload: Route6,
+      },
+    ],
+  },
+];
+
+export const routes = buildRouteTree(routeConfigs);