@cosmicdrift/kumiko-bundled-features 0.50.0 → 0.51.0

package/src/managed-pages/css-gate.ts

@@ -0,0 +1,24 @@
+import { defineFeature, type FeatureDefinition } from "@cosmicdrift/kumiko-framework/engine";
+import { MANAGED_PAGES_CSS_FEATURE } from "./branding";
+
+// Per-tenant toggle gate for the managed-pages custom-CSS capability. Declares
+// no handlers/entities — composing it simply registers `managed-pages-css` as a
+// `toggleable` feature (default OFF), which an operator/tier can enable per
+// tenant via feature-toggles. managed-pages' branding query reads
+// `ctx.hasFeature("managed-pages-css")` and only emits raw tenant CSS when this
+// toggle is on AND the app passed `allowCustomCss: true`.
+//
+// Without a feature-toggles/tier-engine runtime wired, ctx.hasFeature returns
+// true (apps without tier-cuts treat all features on), so `allowCustomCss`
+// alone governs. To per-tenant tier-gate CSS-inject, compose this feature AND
+// wire feature-toggles; the render-time sanitizer is the safety boundary either
+// way. Compose alongside managed-pages (it `requires` it).
+export function createManagedPagesCssFeature(): FeatureDefinition {
+  return defineFeature(MANAGED_PAGES_CSS_FEATURE, (r) => {
+    r.describe(
+      'Per-tenant toggle gate for the managed-pages custom-CSS (raw tenant CSS-inject) capability. Handler-less: composing it makes `managed-pages-css` a toggleable feature defaulting OFF, so an operator/tier can grant raw CSS-inject per tenant. managed-pages reads `ctx.hasFeature("managed-pages-css")` in its branding query and emits tenant CSS only when this toggle is on AND the app passed `allowCustomCss: true`. The tenant CSS is allowlist-sanitized + scoped at render regardless; this gate is the commercial/operator control, not the safety boundary.',
+    );
+    r.requires("managed-pages");
+    r.toggleable({ default: false });
+  });
+}

package/src/managed-pages/feature.ts

@@ -0,0 +1,246 @@
+import {
+  defineEntityCreateHandler,
+  defineEntityDeleteHandler,
+  defineEntityDetailHandler,
+  defineEntityListHandler,
+  defineEntityUpdateHandler,
+  defineFeature,
+  type FeatureDefinition,
+} from "@cosmicdrift/kumiko-framework/engine";
+import {
+  type BrandingTokens,
+  EMPTY_BRANDING,
+  renderSafeMarkdown,
+  securePageHeaders,
+  wrapInLayout,
+} from "../page-render";
+import { BRANDING_KEYS, BRANDING_QUERY_QN, CUSTOM_CSS_KEY, coerceBranding } from "./branding";
+import { createBrandingQuery } from "./handlers/branding.query";
+import { bySlugQuery } from "./handlers/by-slug.query";
+import { setWrite } from "./handlers/set.write";
+import { createBrandingSettingsScreen } from "./screens/branding-screen";
+import { pageEditScreen, pageListScreen } from "./screens/page-screens";
+import { pageEntity } from "./table";
+
+// Admin-Authoring läuft als TenantAdmin (self-service) oder SystemAdmin
+// (app-weite Pages). Spiegelt set.write's ACL — Apps mit eigenem Rollen-
+// Alias (publicstatus = "Admin") müssen TenantAdmin granten/mappen.
+const ADMIN_ACCESS = { roles: ["TenantAdmin", "SystemAdmin"] } as const;
+
+// QN-Konstante als dokumentierter Public-Contract — der Render-Pfad ruft
+// die by-slug-Query via internem app.fetch (kein Code-Import des Handlers,
+// symmetrisch zum legal-pages-Muster).
+const BY_SLUG_QN = "managed-pages:query:by-slug";
+
+// Wire-Body-Shape von /api/query — das was bySlugQuery returnt (published-only).
+type ByslugQueryBody = {
+  data: {
+    title: string;
+    body: string;
+    lang: string;
+    description: string | null;
+    ogImage: string | null;
+  } | null;
+};
+
+// Parse the branding query's `{ data }` envelope into BrandingTokens, never
+// throwing: a non-ok status or malformed body degrades to the unbranded
+// default (branding is decoration, not a hard dependency of the page render).
+async function readBrandingResponse(res: Response): Promise<BrandingTokens> {
+  if (!res.ok) return EMPTY_BRANDING;
+  try {
+    const body: { data?: unknown } = await res.json();
+    return coerceBranding(body.data);
+  } catch {
+    return EMPTY_BRANDING;
+  }
+}
+
+export type ManagedPagesWrapLayout = (opts: {
+  readonly title: string;
+  readonly bodyHtml: string;
+  readonly lang: string;
+  readonly slug: string;
+  readonly description: string | null;
+  readonly ogImage: string | null;
+  // Per-tenant branding tokens resolved at render time (accent color, logo,
+  // layout preset, …). A custom wrapLayout may apply them however it likes;
+  // the default skeleton emits scoped :root vars + a logo/title header.
+  readonly branding: BrandingTokens;
+}) => string;
+
+export type ManagedPagesOptions = {
+  /** Host → tenantId für anonyme per-Tenant-Auslieferung. NULL → 404 (kein
+   *  Tenant für diesen Host). Apex-/Marketing-Apps geben hier ihre Subdomain-
+   *  /Custom-Domain-Auflösung rein; single-tenant gibt konstant einen
+   *  tenantId (oder SYSTEM_TENANT_ID) zurück. Erforderlich, weil der Apex-
+   *  Host keinen ambient ctx.tenantId hat. */
+  readonly resolveApexTenant: (host: string) => Promise<string | null> | string | null;
+  /** Custom Layout-Wrapper (Branding/Chrome). Default: minimaler
+   *  page-render-Skeleton. Erhält slug + SEO-Meta zur freien Nutzung.
+   *  **`branding` ist RAW, untrusted tenant input.** `title`/`description`
+   *  sind am Write nur längen-gecappt, NICHT HTML-escaped; `customCss` ist
+   *  ungesanitet. Der Wrapper MUSS sie über die Boundary-Helper emittieren
+   *  (alle re-exported von `@cosmicdrift/kumiko-bundled-features/managed-pages`):
+   *  `brandingHeaderHtml(branding)` + `brandingStyleBlock(branding)` (escapen
+   *  Header/Theme) und — mit allowCustomCss — `tenantStyleBlock(branding.
+   *  customCss)` ins `<head>` plus `TENANT_CONTENT_ATTR` am Body-Container. Ein
+   *  Custom-Wrapper der `branding.title` selbst interpoliert ist stored XSS;
+   *  der Default-Wrapper nutzt durchweg die Helper. */
+  readonly wrapLayout?: ManagedPagesWrapLayout;
+  /** Basis-Pfad der Page-Routes. Default "/p" → GET /p/:slug. */
+  readonly basePath?: string;
+  /** Default-Sprache wenn `?lang=` fehlt. Default "en". */
+  readonly defaultLang?: string;
+  /** Aktiviert die per-Tenant Custom-CSS-Capability (raw, untrusted): ein
+   *  `branding-custom-css` Config-Key + ein CSS-Feld im Branding-Editor + die
+   *  Render-Emission als scoped, allowlist-sanitized `<style data-tenant-css>`.
+   *  Default **false** (fail-closed — opt-in für untrusted-Tenant-Input). Auch
+   *  wenn true, wird die Emission zusätzlich per-Tenant über das
+   *  `managed-pages-css`-Toggle (createManagedPagesCssFeature) gegated, sobald
+   *  ein feature-toggles/tier-engine-Runtime verdrahtet ist. Der Render-time-
+   *  Sanitizer (page-render/css-sanitize) ist der Safety-Boundary. */
+  readonly allowCustomCss?: boolean;
+};
+
+// managed-pages — vom Tenant editierbare, server-gerenderte Public-Pages.
+// Generalisiert das legal-pages-Render-Muster: eine dynamische Slug-Route
+// (`GET /p/:slug`), die den Tenant aus dem Host auflöst (resolveApexTenant),
+// die published Page lädt, Markdown gehärtet rendert (page-render) und über
+// einen optionalen wrapLayout in Chrome legt. Drafts → 404. Per-Tenant-
+// Content wird per `Vary: Host` cache-isoliert.
+//
+// Admin-Authoring: registriert entityList + entityEdit für `page` (TenantAdmin/
+// SystemAdmin) + die Convention-CRUD-Handler die der Renderer per Konvention
+// dispatcht. Die Screens MÜSSEN hier liegen (Boot-Validator verlangt entity-Ref
+// same-feature); Nav/Workspace bleibt App-Sache.
+//
+// Voraussetzungen am App-Bootstrap:
+//   • anonymousAccess so verdrahtet, dass der X-Tenant-Header honoriert wird
+//     — Multi-Tenant nutzt einen tenantResolver (oder keinen defaultTenantId).
+//     Ein fixer defaultTenantId lockt Single-Tenant und lehnt den per-Page
+//     gesetzten X-Tenant mit 400 tenant_mismatch ab.
+//   • Admin-UI: die App zeigt via `r.nav({ screen: "managed-pages:screen:
+//     page-list" })` + Workspace-Eintrag auf die hier deklarierten Screens
+//     (cross-feature Nav→Screen ist global-validiert) und grantet ihren Admins
+//     TenantAdmin. Ohne Nav bleiben die Screens dormant — kein Leak in
+//     flat-nav-Apps die managed-pages nur zum Public-Render nutzen.
+export function createManagedPagesFeature(opts: ManagedPagesOptions): FeatureDefinition {
+  const wrapLayout: ManagedPagesWrapLayout =
+    opts.wrapLayout ??
+    ((o) =>
+      wrapInLayout({
+        title: o.title,
+        bodyHtml: o.bodyHtml,
+        lang: o.lang,
+        description: o.description,
+        branding: o.branding,
+      }));
+  const basePath = opts.basePath ?? "/p";
+  const defaultLang = opts.defaultLang ?? "en";
+  const allowCustomCss = opts.allowCustomCss ?? false;
+
+  return defineFeature("managed-pages", (r) => {
+    r.describe(
+      "Tenant-editable, server-rendered public pages with per-tenant branding. Stores one Markdown `page` per `(tenantId, slug, lang)` in the `read_pages` entity table with a `published` gate plus `description`/`ogImage` SEO meta. Registers an anonymous `GET {basePath}/:slug` route that resolves the tenant from the request Host via the app-supplied `resolveApexTenant`, serves only published pages (drafts → 404), renders Markdown through the hardened `page-render` core, and isolates per-tenant content with `Vary: Host`. Ships TenantAdmin/SystemAdmin admin screens (`entityList` + `entityEdit`) backed by convention CRUD handlers (`managed-pages:write:page:{create,update,delete}`, `managed-pages:query:page:{list,detail}`); the app wires nav/workspace onto `managed-pages:screen:page-list`. Branding (via `config`, scope tenant): `branding-{title,description,site-url,accent-color,logo-url,layout-preset}` keys with write-time validation (hex color, https URLs), a `configEdit` self-service screen (`managed-pages:screen:branding-settings`), and a `managed-pages:query:branding` read that the render path applies as scoped `:root` CSS vars + a logo/title header. Also exposes `managed-pages:write:set` (idempotent slug-keyed upsert, SystemAdmin cross-tenant via `tenantIdOverride`) as a provisioning API. Requires `config` + `anonymousAccess` wired at app bootstrap.",
+    );
+    r.requires("config");
+    r.entity("page", pageEntity);
+
+    // Per-tenant branding config keys (scope: tenant). Write-validated via
+    // keyDef.pattern (hex / https) — see branding.ts. read:all so the
+    // anonymous render path may resolve them. The raw-CSS key is added only
+    // when allowCustomCss (fail-closed: no key/editor when the capability off).
+    r.config({ keys: allowCustomCss ? { ...BRANDING_KEYS, ...CUSTOM_CSS_KEY } : BRANDING_KEYS });
+
+    const handlers = { set: r.writeHandler(setWrite) };
+    const queries = {
+      bySlug: r.queryHandler(bySlugQuery),
+      branding: r.queryHandler(createBrandingQuery({ allowCustomCss })),
+    };
+
+    // Convention-CRUD hinter den Admin-Screens: entityEdit/entityList
+    // dispatchen per Konvention `managed-pages:write:page:{create,update,
+    // delete}` + `managed-pages:query:page:{list,detail}`. `set` (oben)
+    // wird davon NICHT genutzt und bleibt als Provisioning-API erhalten.
+    r.writeHandler(defineEntityCreateHandler("page", pageEntity, { access: ADMIN_ACCESS }));
+    r.writeHandler(defineEntityUpdateHandler("page", pageEntity, { access: ADMIN_ACCESS }));
+    r.writeHandler(defineEntityDeleteHandler("page", pageEntity, { access: ADMIN_ACCESS }));
+    r.queryHandler(defineEntityListHandler("page", pageEntity, { access: ADMIN_ACCESS }));
+    r.queryHandler(defineEntityDetailHandler("page", pageEntity, { access: ADMIN_ACCESS }));
+
+    r.screen(pageListScreen);
+    r.screen(pageEditScreen);
+    r.screen(createBrandingSettingsScreen({ allowCustomCss }));
+
+    r.httpRoute({
+      method: "GET",
+      path: `${basePath}/:slug`,
+      anonymous: true,
+      handler: async (c, { app }) => {
+        // `param("slug")` ist string|undefined, weil `path` ein computed
+        // Template ist (Hono inferiert `:slug` nur aus String-Literalen).
+        const slug = c.req.param("slug");
+        if (!slug) return c.text("not found", 404);
+        const lang = c.req.query("lang") || defaultLang;
+        const url = new URL(c.req.url);
+        // Host-Header zuerst (prod hinter Proxy), URL-Host als Fallback.
+        const host = c.req.header("host") ?? url.host;
+
+        const tenantId = await opts.resolveApexTenant(host);
+        if (!tenantId) return c.text("not found", 404);
+
+        const queryHeaders = { "content-type": "application/json", "X-Tenant": tenantId };
+        const queryUrl = `${url.origin}/api/query`;
+        const queryReq = (type: string, payload: unknown) =>
+          app.fetch(
+            new Request(queryUrl, {
+              method: "POST",
+              headers: queryHeaders,
+              body: JSON.stringify({ type, payload }),
+            }),
+          );
+
+        // Page + branding read in parallel (same in-process app, same
+        // X-Tenant). Branding is decoration → a failed/empty branding read
+        // degrades to the unbranded default, it never blocks the page.
+        const [pageRes, brandingRes] = await Promise.all([
+          queryReq(BY_SLUG_QN, { slug, lang }),
+          queryReq(BRANDING_QUERY_QN, {}),
+        ]);
+        if (!pageRes.ok) return c.text("page unavailable", 503);
+
+        const body: ByslugQueryBody = await pageRes.json();
+        const data = body.data;
+        if (!data) return c.text("not found", 404);
+
+        const branding = await readBrandingResponse(brandingRes);
+
+        const html = wrapLayout({
+          title: data.title,
+          bodyHtml: renderSafeMarkdown(data.body),
+          lang: data.lang,
+          slug,
+          description: data.description,
+          ogImage: data.ogImage,
+          branding,
+        });
+
+        // Vary: Host — per-Tenant-Content darf nicht von einem shared CDN
+        // nur unter dem Pfad gecached werden (sonst Tenant A's Page auf
+        // Tenant B's Domain). Cache keyed mit auf den Host.
+        return c.body(
+          html,
+          200,
+          securePageHeaders({
+            "content-type": "text/html; charset=utf-8",
+            "cache-control": "public, max-age=300",
+            vary: "Host",
+          }),
+        );
+      },
+    });
+
+    return { handlers, queries };
+  });
+}

package/src/managed-pages/handlers/branding.query.ts

@@ -0,0 +1,30 @@
+import { defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { z } from "zod";
+import { MANAGED_PAGES_CSS_FEATURE, readBranding, readCustomCss } from "../branding";
+
+// Public branding read for the server-render path. Anonymous-capable: the
+// render route reaches this via internal app.fetch with X-Tenant = host-
+// resolved tenant, so `query.user.tenantId` (and thus `ctx.config`, which is
+// minted from it) carries that tenant — identical to how by-slug resolves the
+// page. Branding keys are read:all → an anonymous caller may read them (they
+// are rendered on a public page). No payload: the tenant is implicit.
+//
+// custom CSS is gated twice: the app must opt in (allowCustomCss, baked into
+// this factory) AND the per-tenant `managed-pages-css` toggle must be on
+// (ctx.hasFeature). Note ctx.hasFeature returns true when no feature-toggles/
+// tier-engine runtime is wired, so without that runtime allowCustomCss alone
+// governs. Even when emitted, the value is RAW — render re-sanitizes it.
+export function createBrandingQuery(opts: { readonly allowCustomCss: boolean }) {
+  return defineQueryHandler({
+    name: "branding",
+    schema: z.object({}),
+    access: { roles: ["anonymous", "User", "TenantAdmin", "SystemAdmin"] },
+    handler: async (_query, ctx) => {
+      const base = await readBranding(ctx.config);
+      if (!opts.allowCustomCss || !ctx.config || !ctx.hasFeature(MANAGED_PAGES_CSS_FEATURE)) {
+        return base;
+      }
+      return { ...base, customCss: await readCustomCss(ctx.config) };
+    },
+  });
+}

package/src/managed-pages/handlers/by-slug.query.ts

@@ -0,0 +1,35 @@
+import { fetchOne } from "@cosmicdrift/kumiko-framework/bun-db";
+import { defineQueryHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { z } from "zod";
+import { type PageRow, pagesTable } from "../table";
+
+// Public-Read by (tenantId, slug, lang). Anonymous-capable (Landing-/
+// Marketing-Pages). Tenant kommt aus query.user.tenantId — am Render-Pfad
+// via X-Tenant = Host-resolved-tenant gesetzt. Liefert NUR published Pages
+// mit Body: Drafts + leere Pages sind für anonyme Besucher unsichtbar
+// (Route → 404). Admin-Editing nutzt die Entity-List/Edit-Screens, nicht
+// diese Query.
+export const bySlugQuery = defineQueryHandler({
+  name: "by-slug",
+  schema: z.object({
+    slug: z.string().min(1).max(64),
+    lang: z.string().min(2).max(8),
+  }),
+  access: { roles: ["anonymous", "User", "TenantAdmin", "SystemAdmin"] },
+  handler: async (query, ctx) => {
+    const row = await fetchOne<PageRow>(ctx.db, pagesTable, {
+      tenantId: query.user.tenantId,
+      slug: query.payload.slug,
+      lang: query.payload.lang,
+    });
+    if (!row?.published || !row.body) return null;
+    return {
+      slug: row.slug,
+      lang: row.lang,
+      title: row.title,
+      body: row.body,
+      description: row.description,
+      ogImage: row.ogImage,
+    };
+  },
+});

package/src/managed-pages/handlers/set.write.ts

@@ -0,0 +1,113 @@
+import { fetchOne } from "@cosmicdrift/kumiko-framework/bun-db";
+import { createEventStoreExecutor } from "@cosmicdrift/kumiko-framework/db";
+import { defineWriteHandler, type TenantId } from "@cosmicdrift/kumiko-framework/engine";
+import { AccessDeniedError, writeFailure } from "@cosmicdrift/kumiko-framework/errors";
+import { z } from "zod";
+import { type PageRow, pageEntity, pagesTable } from "../table";
+
+const slugSchema = z
+  .string()
+  .min(1)
+  .max(64)
+  .regex(/^[a-z0-9][a-z0-9-]*$/, "slug must be kebab-case (lowercase, digits, dashes)");
+
+const langSchema = z
+  .string()
+  .min(2)
+  .max(8)
+  .regex(/^[a-z]{2}(-[a-z]{2})?$/i, "lang must be ISO 639-1 (e.g. de, en, en-us)");
+
+const executor = createEventStoreExecutor(pagesTable, pageEntity, { entityName: "page" });
+
+// Upsert einer Page — eine Operation pro (tenantId, slug, lang). Tenant-
+// Scope default aus event.user; SystemAdmin kann via `tenantIdOverride`
+// für einen anderen Tenant schreiben (typisch SYSTEM_TENANT_ID für app-
+// weite Pages). published/description/ogImage werden bei Update preserved
+// wenn im Payload weggelassen (undefined) — damit ein Publish-Toggle nicht
+// den Body überschreiben muss und umgekehrt.
+export const setWrite = defineWriteHandler({
+  name: "set",
+  schema: z.object({
+    slug: slugSchema,
+    lang: langSchema,
+    title: z.string().min(1).max(200),
+    body: z.string().max(100_000).nullable(),
+    description: z.string().max(500).nullable().optional(),
+    ogImage: z.string().max(2000).nullable().optional(),
+    published: z.boolean().optional(),
+    /** Cross-tenant write — nur SystemAdmin (z.B. SYSTEM_TENANT_ID-Pages). */
+    tenantIdOverride: z.string().min(1).optional(),
+  }),
+  access: { roles: ["TenantAdmin", "SystemAdmin"] },
+  handler: async (event, ctx) => {
+    const db = ctx.db;
+    const override = event.payload.tenantIdOverride;
+    if (override !== undefined && !event.user.roles.includes("SystemAdmin")) {
+      return writeFailure(
+        new AccessDeniedError({
+          i18nKey: "managedPages.errors.tenantOverrideRequiresSystemAdmin",
+          details: { reason: "tenant_override_requires_system_admin" },
+        }),
+      );
+    }
+    const tenantId = override ?? event.user.tenantId;
+    // Bei Override muss der executor-user-Context auf den ziel-tenant
+    // umgestellt werden, sonst läuft getStreamVersion gegen user.tenantId
+    // statt tenantId → version_conflict trotz vorhandener projection-row.
+    const executorUser =
+      override !== undefined ? { ...event.user, tenantId: override as TenantId } : event.user; // @cast-boundary engine-bridge
+
+    const existing = await fetchOne<PageRow>(db, pagesTable, {
+      tenantId,
+      slug: event.payload.slug,
+      lang: event.payload.lang,
+    });
+
+    if (existing) {
+      const result = await executor.update(
+        {
+          id: existing.id,
+          version: existing.version,
+          changes: {
+            title: event.payload.title,
+            body: event.payload.body,
+            description:
+              event.payload.description !== undefined
+                ? event.payload.description
+                : existing.description,
+            ogImage: event.payload.ogImage !== undefined ? event.payload.ogImage : existing.ogImage,
+            published:
+              event.payload.published !== undefined ? event.payload.published : existing.published,
+          },
+        },
+        executorUser,
+        db,
+      );
+      if (!result.isSuccess) return result;
+      return {
+        isSuccess: true as const,
+        data: { slug: event.payload.slug, lang: event.payload.lang, isNew: false },
+      };
+    }
+
+    const result = await executor.create(
+      {
+        slug: event.payload.slug,
+        lang: event.payload.lang,
+        title: event.payload.title,
+        body: event.payload.body,
+        description: event.payload.description ?? null,
+        ogImage: event.payload.ogImage ?? null,
+        published: event.payload.published ?? false,
+        tenantId,
+      },
+      executorUser,
+      db,
+    );
+    if (!result.isSuccess) return result;
+    return {
+      isSuccess: true as const,
+      data: { slug: event.payload.slug, lang: event.payload.lang, isNew: true },
+    };
+  },
+});

package/src/managed-pages/index.ts

@@ -0,0 +1,30 @@
+// Render-boundary primitives for a custom wrapLayout. The `branding` it
+// receives is RAW, untrusted tenant input: `title`/`description` are only
+// length-capped at write (NOT HTML-escaped), and `customCss` is unsanitized.
+// Emit them only through these helpers, which escape/sanitize at the boundary:
+//   • `brandingHeaderHtml(branding)` / `brandingStyleBlock(branding)` — escaped
+//     logo/title header + scoped `:root` theme vars (the default skeleton uses
+//     these). Hand-rolling `<h1>${branding.title}</h1>` instead is stored XSS.
+//   • `tenantStyleBlock(branding.customCss)` — the scope-baked, allowlist-
+//     sanitized, contained `<style>` block; wrap content in `TENANT_CONTENT_ATTR`.
+//     `sanitizeTenantCss` is the low-level escape hatch (you supply the scope).
+export {
+  type BrandingTokens,
+  brandingHeaderHtml,
+  brandingStyleBlock,
+  EMPTY_BRANDING,
+  sanitizeTenantCss,
+  TENANT_CONTENT_ATTR,
+  tenantStyleBlock,
+} from "../page-render";
+// BRANDING_QN: the qualified config-key names a consumer writes branding to
+// (`config:write:set`) — single source for the `managed-pages:config:branding-*`
+// strings, so apps + the per-tenant migration never hardcode them.
+export { BRANDING_QN, MANAGED_PAGES_CSS_FEATURE } from "./branding";
+export { createManagedPagesCssFeature } from "./css-gate";
+export {
+  createManagedPagesFeature,
+  type ManagedPagesOptions,
+  type ManagedPagesWrapLayout,
+} from "./feature";
+export { type PageRow, pageEntity, pagesTable } from "./table";

package/src/managed-pages/screens/branding-screen.ts

@@ -0,0 +1,85 @@
+import {
+  type ConfigEditScreenDefinition,
+  createSelectField,
+  createTextField,
+} from "@cosmicdrift/kumiko-framework/engine";
+import { BRANDING_QN, LAYOUT_PRESETS } from "../branding";
+
+// Tenant self-service branding editor. A `configEdit` screen (no entity
+// table) — the renderer loads config:query:values, maps the form fields via
+// `configKeys` to the qualified config keys, and submits config:write:set per
+// key on save (where the keyDef.pattern gate runs). scope:tenant → writes land
+// on the acting admin's tenant. Nav/workspace placement stays App-Sache, like
+// the page screens; without an `r.nav` pointing here the screen is dormant.
+//
+// Roles include "Admin" (App-Repos like publicstatus) alongside "TenantAdmin"
+// (bundled-features) — the access.admin config preset writes both, so editing
+// works in either role world (Role-Naming-Drift).
+const ADMIN_ROLES = ["TenantAdmin", "Admin", "SystemAdmin"] as const;
+
+// Factory so the raw-CSS field/key only exist when the app opted into
+// allowCustomCss (fail-closed: no CSS editor when the capability is off). The
+// CSS lands in `branding-custom-css` (registered conditionally by the feature);
+// the write-time pattern only caps length, the render-time sanitizer is the
+// allowlist gate.
+export function createBrandingSettingsScreen(opts: {
+  readonly allowCustomCss: boolean;
+}): ConfigEditScreenDefinition {
+  const base: ConfigEditScreenDefinition = {
+    id: "branding-settings",
+    type: "configEdit",
+    scope: "tenant",
+    configKeys: {
+      title: BRANDING_QN.title,
+      description: BRANDING_QN.description,
+      siteUrl: BRANDING_QN.siteUrl,
+      accentColor: BRANDING_QN.accentColor,
+      logoUrl: BRANDING_QN.logoUrl,
+      layoutPreset: BRANDING_QN.layoutPreset,
+    },
+    fields: {
+      title: createTextField({ maxLength: 200 }),
+      description: createTextField({ maxLength: 500, multiline: { rows: 3 } }),
+      siteUrl: createTextField({ maxLength: 2000, format: "url" }),
+      accentColor: createTextField({ maxLength: 9 }),
+      logoUrl: createTextField({ maxLength: 2000, format: "url" }),
+      layoutPreset: createSelectField({ options: LAYOUT_PRESETS }),
+    },
+    layout: {
+      sections: [
+        {
+          title: "managed-pages:branding.section.identity",
+          columns: 2,
+          fields: [
+            { field: "title", span: 1 },
+            { field: "layoutPreset", span: 1 },
+            { field: "description", span: 2 },
+            { field: "siteUrl", span: 1 },
+            { field: "logoUrl", span: 1 },
+            { field: "accentColor", span: 1 },
+          ],
+        },
+      ],
+    },
+    access: { roles: ADMIN_ROLES },
+  };
+  if (!opts.allowCustomCss) return base;
+  return {
+    ...base,
+    configKeys: { ...base.configKeys, customCss: BRANDING_QN.customCss },
+    fields: {
+      ...base.fields,
+      customCss: createTextField({ maxLength: 8000, multiline: { rows: 12 } }),
+    },
+    layout: {
+      sections: [
+        ...base.layout.sections,
+        {
+          title: "managed-pages:branding.section.custom-css",
+          columns: 1,
+          fields: [{ field: "customCss", span: 1 }],
+        },
+      ],
+    },
+  };
+}

package/src/managed-pages/screens/page-screens.ts

@@ -0,0 +1,82 @@
+import type {
+  EntityEditScreenDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/engine";
+
+// Admin-Authoring-Screens für die `page`-Entity. Reine Daten (JSON-safe) —
+// der generische DataTable-/Form-Renderer mountet sie, kein React-Component
+// nötig. Beide MÜSSEN im managed-pages-Feature registriert werden (nicht in
+// der App): der Boot-Validator verlangt, dass `entity: "page"` im selben
+// Feature deklariert ist wie der Screen. Nav/Workspace bleibt App-Sache
+// (placement-spezifisch, `default`-Workspace ist ein App-Singleton) — die
+// App zeigt via `r.nav({ screen: "managed-pages:screen:page-list" })` darauf
+// (cross-feature Nav→Screen ist gegen den globalen Screen-QN-Set validiert).
+
+const ADMIN_ROLES = ["TenantAdmin", "SystemAdmin"] as const;
+
+export const pageListScreen: EntityListScreenDefinition = {
+  id: "page-list",
+  type: "entityList",
+  entity: "page",
+  columns: [
+    "slug",
+    "lang",
+    "title",
+    {
+      field: "published",
+      renderer: { format: "boolean", trueLabel: "Published", falseLabel: "Draft" },
+    },
+  ],
+  defaultSort: { field: "slug", dir: "asc" },
+  searchable: true,
+  rowActions: [
+    {
+      kind: "navigate",
+      id: "edit",
+      label: "managed-pages:actions.edit",
+      screen: "page-edit",
+      entityId: "id",
+    },
+    {
+      kind: "writeHandler",
+      id: "delete",
+      label: "managed-pages:actions.delete",
+      handler: "managed-pages:write:page:delete",
+      payload: { pick: ["id"] },
+      confirm: "managed-pages:confirms.page-delete",
+      style: "danger",
+    },
+  ],
+  access: { roles: ADMIN_ROLES },
+};
+
+export const pageEditScreen: EntityEditScreenDefinition = {
+  id: "page-edit",
+  type: "entityEdit",
+  entity: "page",
+  layout: {
+    sections: [
+      {
+        title: "managed-pages:section.meta",
+        columns: 2,
+        fields: [
+          { field: "slug", span: 1 },
+          { field: "lang", span: 1 },
+          { field: "title", span: 2 },
+          { field: "description", span: 2 },
+          { field: "ogImage", span: 2 },
+          // Publish/Unpublish: der `published`-Toggle hier IST der
+          // Publish-Mechanismus (kein separater One-Click-List-Action —
+          // rowAction-payload kann keine Konstanten injizieren).
+          { field: "published", span: 1 },
+        ],
+      },
+      {
+        title: "managed-pages:section.body",
+        columns: 1,
+        fields: [{ field: "body", span: 1 }],
+      },
+    ],
+  },
+  access: { roles: ADMIN_ROLES },
+};