create-kywi-app 0.5.0 → 0.6.0

package/lib/templates.mjs

@@ -383,12 +383,13 @@ import type {
   ModuleNode,
   FeedItemsResolver,
   ComponentResolver,
+  SectionComponentResolver,
   PersonalizationState,
 } from '@kywi-software/core/layout'
 import { isLayoutSection, applyPageVariant } from '@kywi-software/core/layout'
 import { resolveContentByPath, normalizePath } from '@kywi-software/core/nav'
 import { getFeedBySlug, getComponentById, resolveLocaleFromRequest } from '@kywi-software/core'
-import { resolveComponentDefinition } from '@kywi-software/core/admin/server'
+import { resolveComponentDefinition, resolveSectionComponentDefinition } from '@kywi-software/core/admin/server'
 import {
   evaluateActiveAudiences,
   getSelfIdWidgetConfig,
@@ -590,6 +591,41 @@ export async function buildComponentResolver(
   return (componentId) => resolveComponentDefinition(map.get(componentId) ?? null)
 }
 
+/** Yield every section-level component reference (\`section.componentId\`) in the
+ *  layout, descending into variantContainer default + variant sections (#69). */
+function* sectionComponentIds(regions: Record<string, RegionNode[]>): Generator<string> {
+  for (const nodes of Object.values(regions)) {
+    for (const node of nodes) {
+      if (isLayoutSection(node)) {
+        if (node.componentId) yield node.componentId
+      } else {
+        for (const s of node.defaultSections) if (s.componentId) yield s.componentId
+        for (const v of node.variants) for (const s of v.sections) if (s.componentId) yield s.componentId
+      }
+    }
+  }
+}
+
+/**
+ * Prefetch every connected *section* component (\`section.componentId\`) referenced
+ * by the layout and return a synchronous {@link SectionComponentResolver} over the
+ * snapshot — parallel to {@link buildComponentResolver} but for reusable sections
+ * (#69). Returns undefined when the layout references none (skip the prop).
+ */
+export async function buildSectionComponentResolver(
+  layout: LayoutDocument,
+  runtime: KywiRuntime,
+): Promise<SectionComponentResolver | undefined> {
+  const ids = new Set<string>(sectionComponentIds(layout.regions))
+  if (ids.size === 0) return undefined
+  const { db, siteId } = runtime
+  const entries = await Promise.all(
+    [...ids].map(async (id) => [id, await getComponentById(db, id, siteId)] as const),
+  )
+  const map = new Map(entries)
+  return (componentId) => resolveSectionComponentDefinition(map.get(componentId) ?? null)
+}
+
 // ─── Personalization + experiments (#50) ─────────────────────────────────────
 
 /** Server-resolved personalization for one public request. */
@@ -1117,6 +1153,7 @@ import {
   clientRuntimeEnabled,
   buildFeedResolver,
   buildComponentResolver,
+  buildSectionComponentResolver,
   localeAlternates,
   mediaUrl,
   requestBaseUrl,
@@ -1255,6 +1292,7 @@ export default async function PublicPage({ params, searchParams }: Params & Sear
     const personalized = personalizeLayout(layout, perso.audienceId)
     const hydrated = await hydrateLayoutFeeds(personalized, buildFeedResolver(runtime))
     const componentResolver = await buildComponentResolver(hydrated, runtime)
+    const sectionComponentResolver = await buildSectionComponentResolver(hydrated, runtime)
     content = (
       <article className="page page--layout" data-kywi-content-id={contentId}>
         {head}
@@ -1263,6 +1301,7 @@ export default async function PublicPage({ params, searchParams }: Params & Sear
           personalization={perso.personalization}
           moduleComponents={moduleComponents}
           {...(componentResolver ? { componentResolver } : {})}
+          {...(sectionComponentResolver ? { sectionComponentResolver } : {})}
         >
           {Object.keys(hydrated.regions).map((name) => (
             <KywiRegion key={name} name={name} />
@@ -1298,9 +1337,12 @@ export default async function PublicPage({ params, searchParams }: Params & Sear
         canEdit={perms.canEdit}
         canPublish={perms.canPublish}
         contentId={contentId}
+        contentType={contentType}
         pageTitle={title}
         pageStatus={String(node['status'] ?? '')}
+        initialLayout={layout ?? { regions: { main: [] } }}
         adminHref={\`/admin/content/\${contentType}/\${contentId}\`}
+        moduleComponents={moduleComponents}
       >
         {content}
       </KywiFrontEdit>
@@ -1315,56 +1357,167 @@ export default async function PublicPage({ params, searchParams }: Params & Sear
 /**
  * Front-of-site edit overlay (client). Mounted by the public page ONLY for an
  * authenticated admin who opened the page with ?kywi-edit=1 (the page verifies
- * the session cookie server-side first). Surfaces core's KywiEditToolbar and
- * enters edit mode, which outlines the editable regions core already marks with
- * the `data-kywi-*` protocol. Real content edits happen in the full admin editor
- * (the toolbar's Admin link deep-links to this page there); Publish posts to the
- * API for admins with publish permission.
+ * the session cookie server-side first).
+ *
+ * Two modes, same component:
+ *  - **Browse** — core's slim `KywiEditToolbar` over the live page, with the
+ *    editable regions outlined via the `data-kywi-*` protocol.
+ *  - **Edit** (`?kywi-edit=1`, or the toolbar's Edit toggle) — the FULL
+ *    `OverlayShell` layout editor, the same one the admin app mounts, rendered
+ *    from the same core module registry + custom renderers. Save PUTs the layout
+ *    document; Publish PUTs the layout then flips status — exactly the API the
+ *    admin editor uses.
+ *
+ * The OverlayShell is lazy-loaded (`next/dynamic`, client-only): its weight
+ * (dnd-kit, canvas, side panels) is only fetched when an editor actually enters
+ * edit mode, so the public browse bundle stays light.
  */
 function frontEditOverlay() {
   return `'use client'
 import React from 'react'
+import dynamic from 'next/dynamic'
 import { KywiEditToolbar, useKywiEditMode } from '@kywi-software/core/scope-client'
 import { adminFetch } from '@kywi-software/core/host-client'
+import {
+  createModuleRegistry,
+  createThemeRegistry,
+  BUILT_IN_MODULE_COMPONENTS,
+  type LayoutDocument,
+  type ModuleComponentMap,
+} from '@kywi-software/core/layout'
+import type { SaveAction } from '@kywi-software/core/admin'
+
+// Lazy-load the full layout editor AND its stylesheet: the shell bundle (dnd-kit,
+// canvas, panels) and the ~4.7k-line admin design system are pulled INSIDE this
+// factory, so they enter the module graph only when an editor opens the overlay —
+// never in the public browse bundle a visitor downloads.
+const OverlayShell = dynamic(
+  async () => {
+    await import('@kywi-software/core/admin/styles.css')
+    const mod = await import('@kywi-software/core/admin')
+    return mod.OverlayShell
+  },
+  { ssr: false },
+)
 
 export interface KywiFrontEditProps {
   canEdit: boolean
   canPublish: boolean
   contentId: string
+  contentType: string
   pageTitle: string
   pageStatus: string
+  /** The page's saved layout document (empty regions when it has none yet). */
+  initialLayout: LayoutDocument
   /** Deep link to this page in the full admin editor. */
   adminHref: string
+  /** Custom (defineModule) renderers, shared with the public layout + admin (#48). */
+  moduleComponents?: ModuleComponentMap
   children: React.ReactNode
 }
 
 /**
  * Wraps the public page with the front-of-site edit affordance. The page only
  * renders this for a signed-in admin who asked to edit (?kywi-edit=1), so the
- * toolbar's own permission gate (canEdit) is always satisfied here.
+ * permission gate (canEdit) is always satisfied here.
  */
 export function KywiFrontEdit({
   canEdit,
   canPublish,
   contentId,
+  contentType,
   pageTitle,
   pageStatus,
+  initialLayout,
   adminHref,
+  moduleComponents = {},
   children,
 }: KywiFrontEditProps) {
   const edit = useKywiEditMode({ canEdit, canPublish })
 
   // ?kywi-edit=1 means "enter edit mode now" — flip it on once after mount.
-  const { startEdit } = edit
+  const { startEdit, endEdit } = edit
   React.useEffect(() => {
     startEdit()
   }, [startEdit])
 
-  const handlePublish = React.useCallback(async () => {
+  // Registries + renderers for the editor: built from core (no module list is
+  // re-declared here) and merged with this app's custom module renderers from
+  // lib/modules — the SAME source the admin app and public renderer use (#48).
+  const moduleRegistry = React.useMemo(() => createModuleRegistry([]), [])
+  const themeRegistry = React.useMemo(() => createThemeRegistry(), [])
+  const editorComponents = React.useMemo(
+    () => ({ ...BUILT_IN_MODULE_COMPONENTS, ...moduleComponents }),
+    [moduleComponents],
+  )
+
+  // Persist the edited layout to the same content API the admin editor uses.
+  const persistLayout = React.useCallback(
+    async (next: LayoutDocument) => {
+      const res = await fetch(\`/api/v1/content/\${contentType}/\${contentId}/layout\`, {
+        method: 'PUT',
+        credentials: 'same-origin',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(next),
+      })
+      return res.ok
+    },
+    [contentType, contentId],
+  )
+
+  const handleSave = React.useCallback(
+    async (next: LayoutDocument, _action: SaveAction) => {
+      await persistLayout(next)
+      endEdit()
+    },
+    [persistLayout, endEdit],
+  )
+
+  const handlePublish = React.useCallback(
+    async (next: LayoutDocument, _action: SaveAction) => {
+      const ok = await persistLayout(next)
+      if (ok) {
+        // Best-effort status flip; the layout itself is already persisted above.
+        await fetch(\`/api/v1/content/\${contentType}/\${contentId}\`, {
+          method: 'PUT',
+          credentials: 'same-origin',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ status: 'published' }),
+        }).catch(() => undefined)
+      }
+      endEdit()
+    },
+    [persistLayout, contentType, contentId, endEdit],
+  )
+
+  // Browse-mode one-click publish from the toolbar (no editor needed).
+  const handleToolbarPublish = React.useCallback(async () => {
     const res = await adminFetch(\`/api/v1/content/by-id/\${contentId}/publish\`, { method: 'POST' })
     if (res.ok) window.location.reload()
   }, [contentId])
 
+  // Edit mode: the full layout editor, in place, over the live page.
+  if (edit.isEditMode && edit.canEdit) {
+    return (
+      <div className="kywi-admin-shell kywi-frontend-edit">
+        <OverlayShell
+          editMode={edit}
+          initialLayout={initialLayout}
+          contentId={contentId}
+          contentType={contentType}
+          pageTitle={pageTitle}
+          themeName="default"
+          themeRegistry={themeRegistry}
+          moduleRegistry={moduleRegistry}
+          moduleComponents={editorComponents}
+          onSave={handleSave}
+          onPublish={handlePublish}
+        />
+      </div>
+    )
+  }
+
+  // Browse mode: slim toolbar + editable-region outlines over the live page.
   return (
     <>
       <KywiEditToolbar
@@ -1372,7 +1525,7 @@ export function KywiFrontEdit({
         canEdit={edit.canEdit}
         canPublish={edit.canPublish}
         onToggleEdit={edit.toggleEdit}
-        onPublish={handlePublish}
+        onPublish={handleToolbarPublish}
         pageTitle={pageTitle}
         pageStatus={pageStatus}
         adminHref={adminHref}
@@ -1800,7 +1953,16 @@ their Body rich text. Reach for the Layout tab when a page needs sections,
 columns, or modules; use the Body for simple prose.
 
 **Front-of-site editor.** Signed in as an admin, append \`?kywi-edit=1\` to any
-public page to get an edit toolbar (the \`app/(site)/kywi-front-edit.tsx\` overlay).
+public page to edit it in place. You get the full **Layout editor** (the same
+drag-and-drop canvas, module palette and props panel as the admin's Layout tab),
+mounted right over the live page — add sections and modules, then **Save** (PUTs
+the layout) or **Publish** (saves + publishes). Exit the editor for the slim
+browse toolbar with the editable-region outlines. It all lives in
+\`app/(site)/kywi-front-edit.tsx\`; the editor bundle (and the admin stylesheet) is
+lazy-loaded, so pages your visitors see never carry its weight. Note: custom
+\`defineModule\` types still RENDER on the canvas, but they don't appear in the
+front-of-site editor's insert palette (it uses the built-in module set) — add
+them from the admin's Layout tab instead.
 
 ## Personalization, A/B testing & self-ID
 
@@ -1919,7 +2081,7 @@ lib/config.ts                     single import path for kywi.config.ts
 app/api/v1/[...kywi]/route.ts     the versioned API (delegates to core)
 app/admin/[[...admin]]/page.tsx   mounts the FULL core admin (all surfaces) at /admin
 lib/modules.tsx                   custom (defineModule) module renderers (admin + public)
-app/{llms,robots,sitemap,…}       root AX routes (llms.txt, robots.txt, sitemap.xml, …)${a.mode === 'coupled' ? '\napp/(site)/layout.tsx              public shell: theme tokens + your header/footer\napp/(site)/site.css                your site chrome styles (edit freely)\napp/(site)/[[...slug]]/page.tsx    renders published pages (layout + SEO + JSON-LD + i18n)\nlib/site.ts                        public-render helpers: path/locale resolution, feeds, personalization\ncomponents/personalization-runtime.tsx  optional client runtime (self-ID widget, live re-eval)\napp/(site)/kywi-front-edit.tsx     front-of-site edit overlay (?kywi-edit=1)' : '\napp/page.tsx                       returns 404 (no public rendering in this mode)'}
+app/{llms,robots,sitemap,…}       root AX routes (llms.txt, robots.txt, sitemap.xml, …)${a.mode === 'coupled' ? '\napp/(site)/layout.tsx              public shell: theme tokens + your header/footer\napp/(site)/site.css                your site chrome styles (edit freely)\napp/(site)/[[...slug]]/page.tsx    renders published pages (layout + SEO + JSON-LD + i18n)\nlib/site.ts                        public-render helpers: path/locale resolution, feeds, personalization\ncomponents/personalization-runtime.tsx  optional client runtime (self-ID widget, live re-eval)\napp/(site)/kywi-front-edit.tsx     front-of-site editor: browse toolbar + in-place Layout editor (?kywi-edit=1, lazy-loaded)' : '\napp/page.tsx                       returns 404 (no public rendering in this mode)'}
 \`\`\`
 `
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kywi-app",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Scaffold a new Kywi CMS project — npx create-kywi-app my-site",
   "type": "module",
   "homepage": "https://github.com/Kywi-Software/kywi-cms#readme",