@kywi-software/core 0.10.0 → 0.12.0

package/AGENT-PATTERNS.md

@@ -76,7 +76,7 @@ the full proposal — ten minutes of sign-off beats re-entering fifty nodes.
 | Hardcode a list (testimonials, logos, posts, products, team) | Folder of nodes + a Feed + the Feed Display module (§1) |
 | Create one-off pages with identical field shapes | A custom content type + one node per item (§2) |
 | Filter/group content by topic, industry, audience | Categories & tags, queried by feeds (§3) |
-| Copy-paste a CTA/banner/snippet across pages | Save it as a reusable component (§4) |
+| Copy-paste a CTA/banner/snippet across pages | Save it as a reusable component — linked, so one edit updates them all (§4) |
 | Write page sections as JSX | Build them as layout sections/modules the owner can edit (§5) |
 | Build a page as one column of full-width headings and paragraphs | Compose: section bands, columns, object modules (§5) |
 | Put a custom module's editable copy in a `json` prop | One `text`/`textarea`/`richText` prop per field the owner edits (§5) |
@@ -179,14 +179,99 @@ Anything designed once and used on multiple pages — CTA bands, promo banners,
 newsletter signup blocks, campaign snippets, "as seen in" strips — should be a
 **reusable component**, not copy-pasted sections.
 
-- In the layout editor, select the module and **Save as Component**; insert it
-  elsewhere from the component picker. Placed instances are **live
-  references**: editing the source component updates every page that uses it.
-- **Detach** an instance when a page genuinely needs a one-off variant — it
-  becomes an independent copy from that point on.
-- Rule of thumb: the second time you paste the same section, stop and make it
-  a component. The owner should be able to update the sitewide CTA in one
-  place, ten minutes before their webinar.
+A component is a **live source**, not a snapshot. Every page that places one
+holds a *link* to it (a `componentId` on the node), and the link is resolved on
+every request — so writing a new definition changes every page that uses it
+immediately, published pages included, with nothing to re-publish. That is the
+whole point, and it is also the thing to be careful with.
+
+**What can be one.** A single module, a whole section (band), or a personalized /
+A-B tested band with its variants intact — the three `type` values are `module`,
+`section` and `variantContainer`. A band's variants travel with it; which arm a
+visitor sees is still decided per request, per placement, so the same personalized
+component can sit on five pages and target correctly on each.
+
+**In the editors** (front-of-site overlay or the admin Layout tab): select the
+module, section or band → **Save as component** → name it. The selection is
+replaced in place by a linked instance, marked with an outline and a pill naming
+the component. Place it again from the section picker's *Components* rows.
+
+**Editing a linked instance ends in a question.** There are no per-prop overrides
+in v1: an instance renders its component exactly. So when you edit one and save,
+Kywi asks, naming the blast radius ("updates 3 instances across 2 pages, including
+published"):
+
+- **Save and update all instances** — the edit becomes the component. Every
+  instance everywhere follows it, live.
+- **Save to this page only** — this instance *detaches*: it keeps the edit as its
+  own independent content and stops following the component. Everything else is
+  untouched.
+
+**Rule of thumb:** the second time you paste the same section, stop and make it a
+component. The owner should be able to update the sitewide CTA in one place, ten
+minutes before their webinar.
+
+**Managing them:** *Components* in the admin nav is the library — every component
+with the number of pages using it, rename, an editing canvas for the definition,
+and delete. Deleting **detaches every instance first**: each page keeps rendering
+exactly what it rendered, as its own copy, and stops following.
+
+### Components over the API
+
+The admin UI is one client; the endpoints are the contract. `siteId` is optional
+and defaults to the resolved site — components are **per-site** in v1, and
+per-site authorization applies.
+
+1. `POST /api/v1/components` — `{ name, type, definition, moduleType?, description? }`.
+   The `definition` is the node itself: a `section` component stores the whole
+   `LayoutSection`, a `variantContainer` the whole container, a `module` component
+   stores `{ props, style }` and names its `moduleType`.
+2. **Place it** by writing a layout that carries the link. There is no separate
+   "insert" endpoint: `PUT /api/v1/content/:type/:id/layout` with the definition's
+   own shape plus `componentId` on the node, giving the placement a fresh `id` of
+   its own. The node's inline content is the *fallback copy* — what renders if the
+   component ever stops resolving — so write the definition's content there, not a
+   placeholder.
+
+   **An `ab_test` placement must mint its own `experimentId`.** A
+   `variantContainer` definition normally carries an `experimentId` — the one the
+   band had on the page it was saved from — because `mode: 'ab_test'` without one
+   is invalid, so it cannot simply be left out of the definition. A placement that
+   names no binding of its own **inherits the definition's**. Place that component
+   on three pages and all three arms report into a *single* experiment run; a
+   `winnerId` that travels the same way locks every placement to a finished test,
+   permanently serving one arm on pages nobody tested. So when you write an
+   `ab_test` placement: set a **fresh `experimentId`** on the placement node (any
+   uuid — one run per placement is the whole model) and **never copy `winnerId`**.
+   The editors do exactly this (`buildConnectedVariantContainerNode`), and a
+   definition saved from an editor carries no `winnerId` at all; a definition
+   POSTed straight over the API can, so read what you are placing. A
+   `personalization` container has no binding and needs none.
+3. `GET /api/v1/components/:id/usage` — where it is placed (`instances`, `pages`,
+   the page ids and node ids, and trashed pages counted separately). This is the
+   blast radius; read it *before* changing a definition.
+4. `PUT /api/v1/components/:id` — a body with `definition` **is the propagation
+   write**: every linked instance renders the new definition on its next request.
+   A body with only `name` / `description` is a rename and changes nothing any page
+   renders.
+5. `POST /api/v1/components/:id/detach-all` — materialize the definition into every
+   page that links it and drop the links; each page keeps rendering identically.
+6. `DELETE /api/v1/components/:id` — refuses (409) while instances exist; add
+   `?detachAll=1` to detach-then-delete. `GET /api/v1/components?withUsage=1` folds
+   the counts into a list, in one read.
+
+**Two refusals to design around.** A component definition may not link to another
+component (one level only, deliberately: a nested link is invisible to usage counts
+and the delete gate, so the editors *materialize* an inner component when you save
+a section that contains one — the inner instance stops following its own source, and
+the dialog says so). And a stored layout that a live layout could not hold is
+rejected at the door, because detaching would copy it into every page that links it.
+
+**Component writes bypass approvals in v1.** They are not routed through
+changesets or the review workflow — a `PUT` with a definition is live on publish
+pages the moment it returns. On a site with an editorial workflow, treat a
+definition write as a publish, not a draft: no draft, schedule or review step
+holds it back. Changeset integration is a follow-up.
 
 ## 5. Page layouts & modules — not hardcoded JSX
 
@@ -441,20 +526,22 @@ interchangeable.
   page is complete with JavaScript off. This is the default for anything the
   server can know — rule-based audiences (UTM, referrer, the `kywi_audience`
   pin) and A/B experiments. Since 0.6.3 it also renders in the layout editor as
-  a badged block with an **arm switcher**, each arm editable with the ordinary
-  section/column/module tools, so server-resolution no longer costs the owner
-  their editing surface. Since kywi-cms#119, the owner doesn't need an agent to
-  hand-author this shape at all: the section chrome — in the admin layout
-  editor and in the in-place front-of-site overlay alike — offers
-  **Personalize this section** / **A/B test** actions that wrap an ordinary
-  section into a section-level variant container on the spot, seeding the
-  default arm from the section's current content and opening straight into its
-  config (audience/experiment picker included). An agent only needs to reach
-  for `update_layout` when scripting bulk changes or building a container the
-  UI can't reach.
+  a badged block with a **variant switcher** (internal editor code —
+  `activeArms`, the `VariantArm` type, `data-arm-id` — still says "arm"; the
+  persisted layout field is `variants`), each variant editable with the
+  ordinary section/column/module tools, so server-resolution no longer costs
+  the owner their editing surface. Since kywi-cms#119, the owner doesn't need
+  an agent to hand-author this shape at all: the section chrome — in the
+  admin layout editor and in the in-place front-of-site overlay alike —
+  offers **Personalize this section** / **A/B test** actions that wrap an
+  ordinary section into a section-level variant container on the spot,
+  seeding the default variant from the section's current content and
+  opening straight into its config (audience/experiment picker included).
+  An agent only needs to reach for `update_layout` when scripting bulk
+  changes or building a container the UI can't reach.
 - **Module-level** — the `variantContainer` *module*, placed in a column; its
-  arms are HTML strings (`defaultContent`, `variants: [{audienceId, label,
-  content}]`). Every arm ships in the HTML (default visible, the rest
+  variants are HTML strings (`defaultContent`, `variants: [{audienceId, label,
+  content}]`). Every variant ships in the HTML (default visible, the rest
   `display:none`) and the browser runtime reveals the matching one. Use it
   **only for signals the server cannot read at first paint** — in practice, a
   self-ID answer held in `localStorage`.
@@ -586,7 +673,8 @@ early, so ask at scoping time.
 - Creating types and entering content before the owner signed off on a
   content model.
 - A hardcoded array of testimonials/logos/posts in a page component.
-- The same CTA JSX pasted on four pages.
+- The same CTA JSX pasted on four pages — or the same section duplicated on four
+  pages in the editor, which the owner then has to update four times (§4).
 - A `<form>` that POSTs to a hand-rolled route (or nowhere).
 - Marketing imagery in `/public`.
 - A "blog" that is a folder of `.mdx` files the owner can't edit.

package/README.md

@@ -166,6 +166,73 @@ text, button …) types straight on the page (committed on blur through the same
 deselects, and a persistent **Done** leaves — confirming first if there are
 unsaved changes.
 
+### Sticky site headers and the editor's bars
+
+Two fixed bars can appear at the top of a public page for a signed-in editor:
+the **browse-mode toolbar** (`.kywi-edit-toolbar`, 44px) and the **edit-mode
+bar** (`.kywi-overlay-toolbar`, 46px). Each publishes its height as a token on
+`:root`, so a theme never has to hard-code either number:
+
+| Token | Bar | Default |
+| --- | --- | --- |
+| `--kywi-browse-bar-height` | browse-mode toolbar | `44px` |
+| `--kywi-overlay-bar-height` | edit-mode bar | `46px` |
+
+Both are declared on `:root` by **`./site/styles.css`**, which every public page
+loads — and again, identically, by the layout editor's `editor.css`. The second
+sheet alone is not enough to rely on: a generated app pulls the admin design
+system in behind `next/dynamic`, so `editor.css` is absent from the page until
+someone opens the overlay editor, and browse mode would resolve neither token.
+Give every `var()` on these tokens the matching px fallback anyway (`44px` /
+`46px`) — a `var()` whose token is undefined falls back to the property's
+*initial* value, and `top: auto` un-sticks an element outright rather than
+merely mis-offsetting it.
+
+While a bar is up, the document is offset by its height, which is enough for a
+header in normal flow. It is **not** enough for `position: sticky; top: 0` (or
+`position: fixed; top: 0`): document padding moves an element's flow position,
+not the line it pins to once it sticks — so a sticky nav would pin to viewport
+y=0 underneath the bar as soon as the reader scrolled. The editor therefore
+detects top-anchored elements when a bar mounts and patches each one's inline
+`top` to the bar's token for the session, restoring the original exactly on the
+way out (`packages/core/src/scope/sticky-offset.ts`). Nothing is required of a
+theme for this to work.
+
+Two things are worth knowing if you are writing one:
+
+- **A sticky element that mounts after the editor opens is not offset.** The
+  scan runs once, when the bar mounts; a cookie bar on a timer or a menu that is
+  `display: none` at that moment keeps its own `top`. Anchor those yourself off
+  the class the bar puts on `<html>` — `kywi-frontend-edit--browsing` or
+  `kywi-frontend-edit--editing`, which are also how you special-case anything
+  else for an editing session:
+
+  ```css
+  .my-late-sticky { top: 0; }
+  .kywi-frontend-edit--browsing .my-late-sticky { top: var(--kywi-browse-bar-height, 44px); }
+  .kywi-frontend-edit--editing  .my-late-sticky { top: var(--kywi-overlay-bar-height, 46px); }
+  ```
+
+  A second tier keeps its own offset on top of the bar:
+
+  ```css
+  .my-late-subnav { top: 64px; }
+  .kywi-frontend-edit--browsing .my-late-subnav { top: calc(var(--kywi-browse-bar-height, 44px) + 64px); }
+  .kywi-frontend-edit--editing  .my-late-subnav { top: calc(var(--kywi-overlay-bar-height, 46px) + 64px); }
+  ```
+- **A whole sticky STACK moves, not just its first tier.** Anything with a
+  computed `top` within 4px of zero is offset by one bar height; anything
+  between there and 200px — a sub-nav parked under the header at `top: 64px`,
+  the docs-site pattern — is offset by the bar *plus its own original value*, so
+  the gaps a theme built survive the session. Moving only the first tier would
+  make the header cover the sub-nav, an overlap the offset itself would have
+  created.
+- **Further down than that, and inside a scroll pane, is left alone.** A sticky
+  filter panel at `top: 320px` is anchored to page content rather than to the
+  top of the viewport, and a sticky table head inside an `overflow: auto` pane
+  pins to that pane, not to the window — the bar never covers either, so neither
+  moves.
+
 A host must therefore NOT wrap the editor in `.kywi-admin-shell`: that class is
 the admin design system's base + reset and would re-typeset the page being
 edited. Pass the page's own body-wrapper class as `pageClassName` instead, so

package/dist/admin/content-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-form.d.ts","sourceRoot":"","sources":["../../src/admin/content-form.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"content-form.d.ts","sourceRoot":"","sources":["../../src/admin/content-form.tsx"],"names":[],"mappings":"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"}

package/dist/admin/content-form.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { FieldRenderer, CategoryTreePicker, TagInput, RelatedContentPicker } from './field-components.js';
 import { MediaPickerField } from './media-picker-field.js';
 import { TiptapEditor } from './tiptap-editor.js';
@@ -54,10 +54,41 @@ export function ContentEditForm({ contentType, initialValues, hostModules, hostM
     // old local-state behavior unchanged.
     const [uncontrolledActiveTab, setUncontrolledActiveTab] = useState('content');
     const activeTab = controlledActiveTab ?? uncontrolledActiveTab;
+    // Does the Layout tab have its own save path? (kywi-cms#147 T4 review, I1.) A
+    // saved page does: the layout goes through `PUT .../layout`, the endpoint that
+    // validates it, gates admin-only modules and keeps the component-instance index in
+    // step. A page being CREATED does not — there is no row to PUT against — so for
+    // that one case the layout still rides the create payload, which is the only door
+    // it has.
+    const canPersistLayout = Boolean(extensionFetcher && initialValues?.id != null);
+    // The Layout tab has unsaved edits. Tracked as a FLAG rather than by staging the
+    // document into `values`: staging made a provisional layout permanent (the page
+    // form submitted it, and a tab switch remounted the editor with it as the new
+    // baseline), which is the second save door the component save fork could not
+    // guard — see use-component-fork.tsx.
+    const [layoutDirty, setLayoutDirty] = useState(false);
+    // Bumped on every unsaved layout edit (kywi-cms#147 T4 review round 2). A PUT to
+    // the layout endpoint can take long enough for the canvas — which stays
+    // interactive throughout — to receive another edit mid-flight; that edit's
+    // `onChange` sets `layoutDirty` true, but without this counter the PUT's own
+    // `.then` would unconditionally clear it right back to false on resolve,
+    // silently discarding the "still dirty" signal the tab-switch confirm and the
+    // beforeunload guard depend on. `handleLayoutSave` snapshots this counter
+    // before awaiting the PUT and only clears `layoutDirty` if nothing bumped it
+    // since — see the callback below.
+    const layoutChangeCounter = useRef(0);
     const setActiveTab = useCallback((tab) => {
+        // Leaving the Layout tab unmounts the editor and its unsaved work with it, so
+        // ask — the same bargain the editor's own Cancel and the overlay's Done strike.
+        if (activeTab === 'layout' && tab !== 'layout' && layoutDirty &&
+            !window.confirm("This layout has changes you haven't saved yet. Leaving the Layout tab discards them.")) {
+            return;
+        }
+        if (tab !== 'layout')
+            setLayoutDirty(false);
         setUncontrolledActiveTab(tab);
         onActiveTabChange?.(tab);
-    }, [onActiveTabChange]);
+    }, [onActiveTabChange, activeTab, layoutDirty]);
     const [approvalComment, setApprovalComment] = useState('');
     // Names of custom fields currently reporting invalid input (e.g. unparseable
     // JSON). Save is disabled while any is present.
@@ -124,8 +155,11 @@ export function ContentEditForm({ contentType, initialValues, hostModules, hostM
     }, [users]);
     // Browser-level unsaved-changes guard: warn before unload (close/reload/
     // cross-origin nav) whenever there are pending edits.
+    // Unsaved layout edits count (kywi-cms#147 T4 review, I1): they are no longer
+    // staged into `values`, so `isDirty` alone would leave the Layout tab's work
+    // unguarded against a reload.
     useEffect(() => {
-        if (!isDirty)
+        if (!isDirty && !layoutDirty)
             return;
         function handleBeforeUnload(e) {
             e.preventDefault();
@@ -134,7 +168,7 @@ export function ContentEditForm({ contentType, initialValues, hostModules, hostM
         }
         window.addEventListener('beforeunload', handleBeforeUnload);
         return () => window.removeEventListener('beforeunload', handleBeforeUnload);
-    }, [isDirty]);
+    }, [isDirty, layoutDirty]);
     const handleFieldValidity = useCallback((name, valid) => {
         setInvalidFields(prev => {
             if (valid) {
@@ -168,10 +202,19 @@ export function ContentEditForm({ contentType, initialValues, hostModules, hostM
     // MARK_SAVED baseline — `false` on either failure path below, true/undefined
     // (the implicit return) once the PUT actually lands.
     const handleLayoutSave = useCallback(async (layout) => {
-        handleChange('layout', layout);
         const contentId = initialValues?.id;
-        if (!extensionFetcher || contentId == null)
+        if (!extensionFetcher || contentId == null) {
+            // Create mode: nothing to PUT against, so the only thing that can be done is
+            // stage it for the create payload (kywi-cms#19). Reported as NOT saved, which
+            // is the truth — the editor keeps its unsaved state until the page is created.
+            handleChange('layout', layout);
             return false;
+        }
+        // Snapshot BEFORE the await (kywi-cms#147 T4 review round 2): if the canvas
+        // fires another edit while this PUT is in flight, that edit's `onChange` bumps
+        // `layoutChangeCounter` past what was seen here, and the resolve below must
+        // leave `layoutDirty` alone rather than clear a still-unsaved edit.
+        const seen = layoutChangeCounter.current;
         setLayoutSaveState({ status: 'saving' });
         try {
             const res = await extensionFetcher(`/api/v1/content/${contentType.name}/${contentId}/layout`, {
@@ -183,6 +226,20 @@ export function ContentEditForm({ contentType, initialValues, hostModules, hostM
                 throw new Error(body?.error?.message ?? `Layout save failed (${res.status})`);
             }
             setLayoutSaveState({ status: 'saved' });
+            // The layout is now what the server holds, so the copy this form keeps for
+            // seeding the editor on a tab switch moves with it — via `setValues`, not
+            // `handleChange`, because this is reconciliation with a completed save and not
+            // a user edit (same distinction as the expiration-user effect above). This
+            // reconciliation happens regardless of a mid-flight edit — it's still correct
+            // to know what the server has — but `layoutDirty` only clears if nothing
+            // edited the canvas since the PUT started; otherwise the mid-flight edit's
+            // dirty signal would be silently wiped and the tab-switch/beforeunload guards
+            // would go quiet on unsaved work. A FAILED save deliberately stages nothing:
+            // the editor keeps the document, the error is on screen, and nothing
+            // unvalidated is left behind to ride another write.
+            setValues(prev => ({ ...prev, layout }));
+            if (layoutChangeCounter.current === seen)
+                setLayoutDirty(false);
             return true;
         }
         catch (err) {
@@ -193,15 +250,35 @@ export function ContentEditForm({ contentType, initialValues, hostModules, hostM
             return false;
         }
     }, [extensionFetcher, initialValues?.id, contentType.name, handleChange]);
+    /**
+     * The payload for a CONTENT write from this form.
+     *
+     * `layout` is excluded whenever the Layout tab can save itself (kywi-cms#147 T4
+     * review, I1). It is not a form field: it is edited by a component with its own
+     * save button, its own endpoint and its own unsaved-changes guard, and letting it
+     * ride this payload meant a page-level Save could persist a layout the layout
+     * editor had never been asked about — in particular an edited linked component
+     * instance, which the save fork exists to ask about, and which for a section or
+     * container ends up in a fallback copy that is stored and never rendered.
+     *
+     * In create mode it still rides along, because there is no other door (see
+     * `canPersistLayout`).
+     */
+    const contentPayload = useCallback(() => {
+        if (!canPersistLayout)
+            return formDataToApiPayload(values, contentType.fields);
+        const { layout: _editorOwned, ...rest } = values;
+        return formDataToApiPayload(rest, contentType.fields);
+    }, [values, contentType.fields, canPersistLayout]);
     const handleSubmit = useCallback((e) => {
         e.preventDefault();
         if (invalidFields.size > 0)
             return;
-        onSubmit(formDataToApiPayload(values, contentType.fields));
+        onSubmit(contentPayload());
         // Optimistically clear the guard — the submit path owns persistence and
         // (in the reference app) refetches on success, remounting the form.
         setIsDirty(false);
-    }, [values, contentType.fields, onSubmit, invalidFields]);
+    }, [contentPayload, onSubmit, invalidFields]);
     const canApprove = APPROVAL_ROLES.has(userRole ?? '');
     const isAdmin = ADMIN_ROLES.has(userRole ?? '');
     return (_jsxs("form", { onSubmit: handleSubmit, className: "kywi-content-form", children: [_jsx("div", { className: "kywi-form-header", children: _jsx("h1", { children: mode === 'create' ? `New ${contentType.label}` : `Edit ${contentType.label}` }) }), isLockedByOther && (_jsxs("div", { className: "kywi-lock-banner", role: "alert", children: [_jsx("span", { className: "kywi-lock-banner-text", children: `This content is locked by ${lockInfo.lockedBy}. Editing is disabled.` }), canForceUnlock && onForceUnlock && (_jsx("button", { type: "button", onClick: () => onForceUnlock(), className: "kywi-btn kywi-btn-danger kywi-force-unlock-btn", children: "Force Unlock" }))] })), _jsx("div", { className: "kywi-tab-bar", role: "tablist", children: TABS.map(tab => (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === tab.id, "aria-controls": `kywi-tab-panel-${tab.id}`, className: `kywi-tab${activeTab === tab.id ? ' kywi-tab-active' : ''}`, onClick: () => setActiveTab(tab.id), children: tab.label }, tab.id))) }), _jsxs("div", { className: "kywi-tab-content", children: [activeTab === 'content' && (_jsxs("div", { id: "kywi-tab-panel-content", role: "tabpanel", className: "kywi-tab-panel", children: [_jsxs("div", { className: "kywi-field", children: [_jsxs("label", { htmlFor: "field-title", className: "kywi-field-label", children: ["Title", titleRequired && _jsx("span", { className: "kywi-required", "aria-hidden": "true", children: " *" })] }), _jsx("input", { id: "field-title", type: "text", name: "title", value: String(values.title ?? ''), onChange: e => handleChange('title', e.target.value), className: "kywi-input", required: titleRequired })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-slug", className: "kywi-field-label", children: "Slug" }), _jsx("input", { id: "field-slug", type: "text", name: "slug", value: String(values.slug ?? ''), onChange: e => handleChange('slug', e.target.value), className: "kywi-input", placeholder: "Auto-generated from title if empty" })] }), contentType.baseType === 'content' && (_jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-body", className: "kywi-field-label", children: "Body" }), _jsx(TiptapEditor, { id: "field-body", value: String(values.body ?? ''), onChange: html => handleChange('body', html), className: "kywi-richtext" })] })), _jsxs("div", { className: "kywi-field", "data-field-name": "featuredImageId", children: [_jsx("label", { className: "kywi-field-label", htmlFor: "field-featuredImageId", children: "Featured Image" }), _jsx(MediaPickerField, { id: "field-featuredImageId", value: typeof values.featuredImageId === 'string' ? values.featuredImageId : null, accept: "image/*", onChange: mediaId => handleChange('featuredImageId', mediaId) })] }), customFields.length > 0 && (_jsx("div", { className: "kywi-form-custom-fields", children: customFields.map(field => (_jsx(FieldRenderer, { field: field, value: values[field.name], onChange: val => handleChange(field.name, val), onValidityChange: valid => handleFieldValidity(field.name, valid), ...(resolveRelationship ? { resolveRelationship } : {}) }, field.name))) })), extensionFetcher && initialValues?.id != null && (_jsx(ExtensionSets, { contentId: String(initialValues.id), baseTypes: [contentType.name, contentType.baseType], fetcher: extensionFetcher }))] })), activeTab === 'publishing' && (_jsxs("div", { id: "kywi-tab-panel-publishing", role: "tabpanel", className: "kywi-tab-panel", children: [_jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-status", className: "kywi-field-label", children: "Status" }), _jsxs("select", { id: "field-status", name: "status", value: String(values.status ?? 'draft'), onChange: e => handleChange('status', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "pending", children: "Pending Review" }), _jsx("option", { value: "approved", children: "Approved" }), _jsx("option", { value: "published", children: "Published" }), _jsx("option", { value: "archived", children: "Archived" })] })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-publishedAt", className: "kywi-field-label", children: "Published At" }), _jsx("input", { id: "field-publishedAt", type: "datetime-local", name: "publishedAt", value: String(values.publishedAt ?? ''), onChange: e => handleChange('publishedAt', e.target.value), className: "kywi-input" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-unpublishAt", className: "kywi-field-label", children: "Unpublish At" }), _jsx("input", { id: "field-unpublishAt", type: "datetime-local", name: "unpublishAt", value: String(values.unpublishAt ?? ''), onChange: e => handleChange('unpublishAt', e.target.value), className: "kywi-input" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-expiresAt", className: "kywi-field-label", children: "Expires At" }), _jsx("input", { id: "field-expiresAt", type: "datetime-local", name: "expiresAt", value: String(values.expiresAt ?? ''), onChange: e => handleChange('expiresAt', e.target.value), className: "kywi-input" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-featureInSection", className: "kywi-field-label", children: "Feature In Section" }), _jsxs("select", { id: "field-featureInSection", name: "featureInSection", value: String(values.featureInSection ?? 'no'), onChange: e => handleChange('featureInSection', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "no", children: "No" }), _jsx("option", { value: "yes", children: "Yes" }), _jsx("option", { value: "scheduled", children: "Scheduled" })] })] }), String(values.featureInSection) === 'scheduled' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-featureStartAt", className: "kywi-field-label", children: "Feature Start" }), _jsx("input", { id: "field-featureStartAt", type: "datetime-local", name: "featureStartAt", value: String(values.featureStartAt ?? ''), onChange: e => handleChange('featureStartAt', e.target.value), className: "kywi-input" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-featureEndAt", className: "kywi-field-label", children: "Feature End" }), _jsx("input", { id: "field-featureEndAt", type: "datetime-local", name: "featureEndAt", value: String(values.featureEndAt ?? ''), onChange: e => handleChange('featureEndAt', e.target.value), className: "kywi-input" })] })] })), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-expirationNotifyUser", className: "kywi-field-label", children: "Expiration Notify User" }), users.length > 0 ? (_jsxs("select", { id: "field-expirationNotifyUser", name: "expirationNotifyUser", value: String(values.expirationNotifyUser ?? ''), onChange: e => handleChange('expirationNotifyUser', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "", children: "\u2014 No one \u2014" }), users.map(u => (_jsx("option", { value: u.id, children: u.label }, u.id)))] })) : (_jsx("input", { id: "field-expirationNotifyUser", type: "text", name: "expirationNotifyUser", value: String(values.expirationNotifyUser ?? ''), onChange: e => handleChange('expirationNotifyUser', e.target.value), className: "kywi-input", placeholder: "User ID to notify on expiration" }))] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-internalNotes", className: "kywi-field-label", children: "Internal Notes" }), _jsx("textarea", { id: "field-internalNotes", name: "internalNotes", value: String(values.internalNotes ?? ''), onChange: e => handleChange('internalNotes', e.target.value), className: "kywi-textarea", rows: 4 })] }), openChangesets.length > 0 && (_jsxs("div", { className: "kywi-changeset-section", "data-testid": "changeset-dropdown", children: [_jsx("h3", { className: "kywi-section-heading", children: "Add to Changeset" }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-changeset", className: "kywi-field-label", children: "Changeset" }), _jsxs("select", { id: "field-changeset", className: "kywi-select", defaultValue: "", onChange: e => {
@@ -211,9 +288,19 @@ export function ContentEditForm({ contentType, initialValues, hostModules, hostM
                                                 // Carry the editor's current edits so Submit-for-Review no
                                                 // longer discards unsaved changes (#45.3) and can fork a
                                                 // pending revision of published content (#42).
-                                                onApprovalAction?.('submit', approvalComment, formDataToApiPayload(values, contentType.fields)), children: "Submit for Review" }), isAdmin && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kywi-btn kywi-btn-primary", onClick: () => onApprovalAction?.('approve', approvalComment), children: "Approve" }), _jsx("button", { type: "button", className: "kywi-btn kywi-btn-danger", onClick: () => onApprovalAction?.('reject', approvalComment), children: "Reject" })] }))] })] })), approvalHistory.length > 0 && (_jsxs("div", { className: "kywi-approval-history", children: [_jsx("h3", { className: "kywi-section-heading", children: "Approval History" }), _jsx("ul", { className: "kywi-approval-list", children: approvalHistory.map(entry => (_jsxs("li", { className: "kywi-approval-entry", children: [_jsx("strong", { children: entry.action }), " by ", entry.by, " at ", entry.at, entry.comment && _jsx("p", { children: entry.comment })] }, entry.id))) })] }))] })), activeTab === 'navigation' && (_jsxs("div", { id: "kywi-tab-panel-navigation", role: "tabpanel", className: "kywi-tab-panel", children: [_jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "isNav", checked: Boolean(values.isNav ?? false), onChange: e => handleChange('isNav', e.target.checked), className: "kywi-checkbox" }), ' ', "Show in Navigation"] }) }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-menuTitle", className: "kywi-field-label", children: "Menu Title" }), _jsx("input", { id: "field-menuTitle", type: "text", name: "menuTitle", value: String(values.menuTitle ?? ''), onChange: e => handleChange('menuTitle', e.target.value), className: "kywi-input", placeholder: "Override title in navigation" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-parentId", className: "kywi-field-label", children: "Parent" }), _jsx("input", { id: "field-parentId", type: "text", name: "parentId", value: String(values.parentId ?? ''), onChange: e => handleChange('parentId', e.target.value), className: "kywi-input", placeholder: "Content ID of parent" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-sortOrder", className: "kywi-field-label", children: "Sort Order" }), _jsx("input", { id: "field-sortOrder", type: "number", name: "sortOrder", value: String(values.sortOrder ?? ''), onChange: e => handleChange('sortOrder', e.target.value === '' ? '' : Number(e.target.value)), className: "kywi-input" })] }), _jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "openInNewWindow", checked: Boolean(values.openInNewWindow ?? false), onChange: e => handleChange('openInNewWindow', e.target.checked), className: "kywi-checkbox" }), ' ', "Open in New Window"] }) }), groups.length > 0 && (_jsxs("div", { className: "kywi-field", children: [_jsx("span", { className: "kywi-field-label", children: "Nav Visibility by Group" }), _jsx("div", { className: "kywi-group-visibility", children: groups.map(g => {
+                                                onApprovalAction?.('submit', approvalComment, contentPayload()), children: "Submit for Review" }), isAdmin && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kywi-btn kywi-btn-primary", onClick: () => onApprovalAction?.('approve', approvalComment), children: "Approve" }), _jsx("button", { type: "button", className: "kywi-btn kywi-btn-danger", onClick: () => onApprovalAction?.('reject', approvalComment), children: "Reject" })] }))] })] })), approvalHistory.length > 0 && (_jsxs("div", { className: "kywi-approval-history", children: [_jsx("h3", { className: "kywi-section-heading", children: "Approval History" }), _jsx("ul", { className: "kywi-approval-list", children: approvalHistory.map(entry => (_jsxs("li", { className: "kywi-approval-entry", children: [_jsx("strong", { children: entry.action }), " by ", entry.by, " at ", entry.at, entry.comment && _jsx("p", { children: entry.comment })] }, entry.id))) })] }))] })), activeTab === 'navigation' && (_jsxs("div", { id: "kywi-tab-panel-navigation", role: "tabpanel", className: "kywi-tab-panel", children: [_jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "isNav", checked: Boolean(values.isNav ?? false), onChange: e => handleChange('isNav', e.target.checked), className: "kywi-checkbox" }), ' ', "Show in Navigation"] }) }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-menuTitle", className: "kywi-field-label", children: "Menu Title" }), _jsx("input", { id: "field-menuTitle", type: "text", name: "menuTitle", value: String(values.menuTitle ?? ''), onChange: e => handleChange('menuTitle', e.target.value), className: "kywi-input", placeholder: "Override title in navigation" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-parentId", className: "kywi-field-label", children: "Parent" }), _jsx("input", { id: "field-parentId", type: "text", name: "parentId", value: String(values.parentId ?? ''), onChange: e => handleChange('parentId', e.target.value), className: "kywi-input", placeholder: "Content ID of parent" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-sortOrder", className: "kywi-field-label", children: "Sort Order" }), _jsx("input", { id: "field-sortOrder", type: "number", name: "sortOrder", value: String(values.sortOrder ?? ''), onChange: e => handleChange('sortOrder', e.target.value === '' ? '' : Number(e.target.value)), className: "kywi-input" })] }), _jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "openInNewWindow", checked: Boolean(values.openInNewWindow ?? false), onChange: e => handleChange('openInNewWindow', e.target.checked), className: "kywi-checkbox" }), ' ', "Open in New Window"] }) }), groups.length > 0 && (_jsxs("div", { className: "kywi-field", children: [_jsx("span", { className: "kywi-field-label", children: "Nav Visibility by Group" }), _jsx("div", { className: "kywi-group-visibility", children: groups.map(g => {
                                             const vis = values.navVisibility ?? {};
                                             return (_jsxs("label", { className: "kywi-field-label kywi-group-vis-label", children: [_jsx("input", { type: "checkbox", checked: vis[g.id] ?? true, onChange: e => handleChange('navVisibility', { ...vis, [g.id]: e.target.checked }), className: "kywi-checkbox" }), ' ', g.name] }, g.id));
-                                        }) })] })), _jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "excludeFromSitemap", checked: Boolean(values.excludeFromSitemap ?? false), onChange: e => handleChange('excludeFromSitemap', e.target.checked), className: "kywi-checkbox" }), ' ', "Exclude from Sitemap"] }) }), _jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "excludeFromSearch", checked: Boolean(values.excludeFromSearch ?? false), onChange: e => handleChange('excludeFromSearch', e.target.checked), className: "kywi-checkbox" }), ' ', "Exclude from search & AX"] }) }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-urlOverride", className: "kywi-field-label", children: "URL Override" }), _jsx("input", { id: "field-urlOverride", type: "text", name: "urlOverride", value: String(values.urlOverride ?? ''), onChange: e => handleChange('urlOverride', e.target.value), className: "kywi-input", placeholder: "/custom-path" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-redirectUrl", className: "kywi-field-label", children: "Redirect URL" }), _jsx("input", { id: "field-redirectUrl", type: "text", name: "redirectUrl", value: String(values.redirectUrl ?? ''), onChange: e => handleChange('redirectUrl', e.target.value), className: "kywi-input", placeholder: "https://..." })] })] })), activeTab === 'seo' && (_jsxs("div", { id: "kywi-tab-panel-seo", role: "tabpanel", className: "kywi-tab-panel", children: [_jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-metaTitle", className: "kywi-field-label", children: "Meta Title" }), _jsx("input", { id: "field-metaTitle", type: "text", name: "metaTitle", value: String(values.metaTitle ?? ''), onChange: e => handleChange('metaTitle', e.target.value), className: "kywi-input" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-metaDescription", className: "kywi-field-label", children: "Meta Description" }), _jsx("textarea", { id: "field-metaDescription", name: "metaDescription", value: String(values.metaDescription ?? ''), onChange: e => handleChange('metaDescription', e.target.value), className: "kywi-textarea", rows: 3 })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-metaKeywords", className: "kywi-field-label", children: "Meta Keywords" }), _jsx("input", { id: "field-metaKeywords", type: "text", name: "metaKeywords", value: String(values.metaKeywords ?? ''), onChange: e => handleChange('metaKeywords', e.target.value), className: "kywi-input", placeholder: "keyword1, keyword2, ..." })] }), _jsxs("div", { className: "kywi-field", "data-field-name": "metaImageId", children: [_jsx("label", { htmlFor: "field-metaImageId", className: "kywi-field-label", children: "OG Image" }), _jsx(MediaPickerField, { id: "field-metaImageId", value: typeof values.metaImageId === 'string' ? values.metaImageId : null, accept: "image/*", onChange: mediaId => handleChange('metaImageId', mediaId) })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-canonicalUrl", className: "kywi-field-label", children: "Canonical URL" }), _jsx("input", { id: "field-canonicalUrl", type: "text", name: "canonicalUrl", value: String(values.canonicalUrl ?? ''), onChange: e => handleChange('canonicalUrl', e.target.value), className: "kywi-input", placeholder: "https://..." })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-robotsIndex", className: "kywi-field-label", children: "Robots Index" }), _jsxs("select", { id: "field-robotsIndex", name: "robotsIndex", value: String(values.robotsIndex ?? 'index'), onChange: e => handleChange('robotsIndex', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "index", children: "Index" }), _jsx("option", { value: "noindex", children: "No Index" })] })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-robotsFollow", className: "kywi-field-label", children: "Robots Follow" }), _jsxs("select", { id: "field-robotsFollow", name: "robotsFollow", value: String(values.robotsFollow ?? 'follow'), onChange: e => handleChange('robotsFollow', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "follow", children: "Follow" }), _jsx("option", { value: "nofollow", children: "No Follow" })] })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-changeFreq", className: "kywi-field-label", children: "Change Frequency" }), _jsxs("select", { id: "field-changeFreq", name: "changeFreq", value: String(values.changeFreq ?? ''), onChange: e => handleChange('changeFreq', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "", children: "-- Select --" }), _jsx("option", { value: "always", children: "Always" }), _jsx("option", { value: "hourly", children: "Hourly" }), _jsx("option", { value: "daily", children: "Daily" }), _jsx("option", { value: "weekly", children: "Weekly" }), _jsx("option", { value: "monthly", children: "Monthly" }), _jsx("option", { value: "yearly", children: "Yearly" }), _jsx("option", { value: "never", children: "Never" })] })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-sitemapPriority", className: "kywi-field-label", children: "Sitemap Priority (0-1)" }), _jsx("input", { id: "field-sitemapPriority", type: "number", name: "sitemapPriority", min: "0", max: "1", step: "0.1", value: String(values.sitemapPriority ?? ''), onChange: e => handleChange('sitemapPriority', e.target.value === '' ? '' : Number(e.target.value)), className: "kywi-input" })] })] })), activeTab === 'layout' && (_jsxs("div", { id: "kywi-tab-panel-layout", role: "tabpanel", className: "kywi-tab-panel", children: [layoutSaveState.status === 'error' && (_jsx("div", { className: "kywi-field-error", role: "alert", children: layoutSaveState.message })), layoutSaveState.status === 'saved' && (_jsx("p", { className: "kywi-field-hint", role: "status", children: "Layout saved." })), _jsx(LayoutEditor, { initialLayout: values.layout ?? { regions: {} }, contentId: String(initialValues?.id ?? ''), contentType: contentType.name, moduleRegistry: layoutModuleRegistry, moduleComponents: layoutModuleComponents, audiences: audiences, onChange: layout => handleChange('layout', layout), onSave: handleLayoutSave, ...(userRole ? { userRole } : {}) })] })), activeTab === 'categories-tags' && (_jsxs("div", { id: "kywi-tab-panel-categories-tags", role: "tabpanel", className: "kywi-tab-panel", children: [_jsxs("div", { className: "kywi-field", children: [_jsx("label", { className: "kywi-field-label", children: "Categories" }), _jsx(CategoryTreePicker, { categories: availableCategories, selected: values.categoryIds ?? [], onChange: ids => handleChange('categoryIds', ids) })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { className: "kywi-field-label", children: "Tags" }), _jsx(TagInput, { tags: Array.isArray(values.tags) ? values.tags : [], suggestions: availableTags, onChange: tags => handleChange('tags', tags) })] }), _jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "featuredInCategory", checked: Boolean(values.featuredInCategory ?? false), onChange: e => handleChange('featuredInCategory', e.target.checked), className: "kywi-checkbox" }), ' ', "Featured in Category"] }) })] })), activeTab === 'related-content' && (_jsx("div", { id: "kywi-tab-panel-related-content", role: "tabpanel", className: "kywi-tab-panel", children: _jsx(RelatedContentPicker, { selected: values.relatedContentIds ?? [], onChange: ids => handleChange('relatedContentIds', ids) }) })), activeTab === 'permissions' && (_jsx("div", { id: "kywi-tab-panel-permissions", role: "tabpanel", className: "kywi-tab-panel", children: _jsx(ContentPermissionsTab, { contentId: String(initialValues?.id ?? ''), groups: groups, userRole: userRole }) })), activeTab === 'version-history' && (_jsx("div", { id: "kywi-tab-panel-version-history", role: "tabpanel", className: "kywi-tab-panel", children: versions.length === 0 ? (_jsx("p", { className: "kywi-empty-state", children: "No versions recorded yet." })) : (_jsxs("table", { className: "kywi-table kywi-version-table", "data-testid": "version-list", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Version" }), _jsx("th", { children: "Created" }), _jsx("th", { children: "By" }), _jsx("th", { children: "Actions" })] }) }), _jsx("tbody", { children: versions.map(v => (_jsxs("tr", { "data-version-id": v.id, children: [_jsxs("td", { children: ["v", v.version] }), _jsx("td", { children: v.createdAt }), _jsx("td", { children: v.createdBy }), _jsxs("td", { className: "kywi-version-actions", children: [_jsx("button", { type: "button", className: "kywi-btn kywi-btn-secondary kywi-btn-sm", "data-action": "diff", onClick: () => onDiffVersion?.(v.id), children: "Diff" }), _jsx("button", { type: "button", className: "kywi-btn kywi-btn-secondary kywi-btn-sm", "data-action": "restore", onClick: () => onRestoreVersion?.(v.id), children: "Restore" }), _jsx("button", { type: "button", className: "kywi-btn kywi-btn-danger kywi-btn-sm", "data-action": "delete", onClick: () => onDeleteVersion?.(v.id), children: "Delete" })] })] }, v.id))) })] })) }))] }), _jsxs("div", { className: "kywi-form-actions", children: [_jsx("button", { type: "submit", className: "kywi-btn kywi-btn-primary", disabled: isSubmitting || isLockedByOther || hasInvalidField, children: isSubmitting ? 'Saving...' : mode === 'create' ? 'Create' : 'Save' }), onCancel && (_jsx("button", { type: "button", onClick: onCancel, className: "kywi-btn kywi-btn-secondary", children: "Cancel" })), hasInvalidField && (_jsx("span", { className: "kywi-field-error", role: "alert", children: "Fix the highlighted fields before saving." }))] })] }));
+                                        }) })] })), _jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "excludeFromSitemap", checked: Boolean(values.excludeFromSitemap ?? false), onChange: e => handleChange('excludeFromSitemap', e.target.checked), className: "kywi-checkbox" }), ' ', "Exclude from Sitemap"] }) }), _jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "excludeFromSearch", checked: Boolean(values.excludeFromSearch ?? false), onChange: e => handleChange('excludeFromSearch', e.target.checked), className: "kywi-checkbox" }), ' ', "Exclude from search & AX"] }) }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-urlOverride", className: "kywi-field-label", children: "URL Override" }), _jsx("input", { id: "field-urlOverride", type: "text", name: "urlOverride", value: String(values.urlOverride ?? ''), onChange: e => handleChange('urlOverride', e.target.value), className: "kywi-input", placeholder: "/custom-path" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-redirectUrl", className: "kywi-field-label", children: "Redirect URL" }), _jsx("input", { id: "field-redirectUrl", type: "text", name: "redirectUrl", value: String(values.redirectUrl ?? ''), onChange: e => handleChange('redirectUrl', e.target.value), className: "kywi-input", placeholder: "https://..." })] })] })), activeTab === 'seo' && (_jsxs("div", { id: "kywi-tab-panel-seo", role: "tabpanel", className: "kywi-tab-panel", children: [_jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-metaTitle", className: "kywi-field-label", children: "Meta Title" }), _jsx("input", { id: "field-metaTitle", type: "text", name: "metaTitle", value: String(values.metaTitle ?? ''), onChange: e => handleChange('metaTitle', e.target.value), className: "kywi-input" })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-metaDescription", className: "kywi-field-label", children: "Meta Description" }), _jsx("textarea", { id: "field-metaDescription", name: "metaDescription", value: String(values.metaDescription ?? ''), onChange: e => handleChange('metaDescription', e.target.value), className: "kywi-textarea", rows: 3 })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-metaKeywords", className: "kywi-field-label", children: "Meta Keywords" }), _jsx("input", { id: "field-metaKeywords", type: "text", name: "metaKeywords", value: String(values.metaKeywords ?? ''), onChange: e => handleChange('metaKeywords', e.target.value), className: "kywi-input", placeholder: "keyword1, keyword2, ..." })] }), _jsxs("div", { className: "kywi-field", "data-field-name": "metaImageId", children: [_jsx("label", { htmlFor: "field-metaImageId", className: "kywi-field-label", children: "OG Image" }), _jsx(MediaPickerField, { id: "field-metaImageId", value: typeof values.metaImageId === 'string' ? values.metaImageId : null, accept: "image/*", onChange: mediaId => handleChange('metaImageId', mediaId) })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-canonicalUrl", className: "kywi-field-label", children: "Canonical URL" }), _jsx("input", { id: "field-canonicalUrl", type: "text", name: "canonicalUrl", value: String(values.canonicalUrl ?? ''), onChange: e => handleChange('canonicalUrl', e.target.value), className: "kywi-input", placeholder: "https://..." })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-robotsIndex", className: "kywi-field-label", children: "Robots Index" }), _jsxs("select", { id: "field-robotsIndex", name: "robotsIndex", value: String(values.robotsIndex ?? 'index'), onChange: e => handleChange('robotsIndex', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "index", children: "Index" }), _jsx("option", { value: "noindex", children: "No Index" })] })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-robotsFollow", className: "kywi-field-label", children: "Robots Follow" }), _jsxs("select", { id: "field-robotsFollow", name: "robotsFollow", value: String(values.robotsFollow ?? 'follow'), onChange: e => handleChange('robotsFollow', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "follow", children: "Follow" }), _jsx("option", { value: "nofollow", children: "No Follow" })] })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-changeFreq", className: "kywi-field-label", children: "Change Frequency" }), _jsxs("select", { id: "field-changeFreq", name: "changeFreq", value: String(values.changeFreq ?? ''), onChange: e => handleChange('changeFreq', e.target.value), className: "kywi-select", children: [_jsx("option", { value: "", children: "-- Select --" }), _jsx("option", { value: "always", children: "Always" }), _jsx("option", { value: "hourly", children: "Hourly" }), _jsx("option", { value: "daily", children: "Daily" }), _jsx("option", { value: "weekly", children: "Weekly" }), _jsx("option", { value: "monthly", children: "Monthly" }), _jsx("option", { value: "yearly", children: "Yearly" }), _jsx("option", { value: "never", children: "Never" })] })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { htmlFor: "field-sitemapPriority", className: "kywi-field-label", children: "Sitemap Priority (0-1)" }), _jsx("input", { id: "field-sitemapPriority", type: "number", name: "sitemapPriority", min: "0", max: "1", step: "0.1", value: String(values.sitemapPriority ?? ''), onChange: e => handleChange('sitemapPriority', e.target.value === '' ? '' : Number(e.target.value)), className: "kywi-input" })] })] })), activeTab === 'layout' && (_jsxs("div", { id: "kywi-tab-panel-layout", role: "tabpanel", className: "kywi-tab-panel", children: [layoutSaveState.status === 'error' && (_jsx("div", { className: "kywi-field-error", role: "alert", children: layoutSaveState.message })), layoutSaveState.status === 'saved' && (_jsx("p", { className: "kywi-field-hint", role: "status", children: "Layout saved." })), _jsx(LayoutEditor, { initialLayout: values.layout ?? { regions: {} }, contentId: String(initialValues?.id ?? ''), contentType: contentType.name, moduleRegistry: layoutModuleRegistry, moduleComponents: layoutModuleComponents, audiences: audiences, 
+                                // Records THAT there are unsaved layout edits, not the document
+                                // itself (kywi-cms#147 T4 review, I1 — see `layoutDirty`). In create
+                                // mode there is no layout endpoint to save through, so the old
+                                // staging is what keeps the work reachable by the create payload.
+                                // The counter bump (T4 review round 2) is what lets `handleLayoutSave`
+                                // tell a mid-flight edit apart from "nothing changed since I started
+                                // saving" — see `layoutChangeCounter`.
+                                onChange: canPersistLayout
+                                    ? () => { layoutChangeCounter.current += 1; setLayoutDirty(true); }
+                                    : layout => handleChange('layout', layout), onSave: handleLayoutSave, ...(userRole ? { userRole } : {}) })] })), activeTab === 'categories-tags' && (_jsxs("div", { id: "kywi-tab-panel-categories-tags", role: "tabpanel", className: "kywi-tab-panel", children: [_jsxs("div", { className: "kywi-field", children: [_jsx("label", { className: "kywi-field-label", children: "Categories" }), _jsx(CategoryTreePicker, { categories: availableCategories, selected: values.categoryIds ?? [], onChange: ids => handleChange('categoryIds', ids) })] }), _jsxs("div", { className: "kywi-field", children: [_jsx("label", { className: "kywi-field-label", children: "Tags" }), _jsx(TagInput, { tags: Array.isArray(values.tags) ? values.tags : [], suggestions: availableTags, onChange: tags => handleChange('tags', tags) })] }), _jsx("div", { className: "kywi-field kywi-field-checkbox", children: _jsxs("label", { className: "kywi-field-label", children: [_jsx("input", { type: "checkbox", name: "featuredInCategory", checked: Boolean(values.featuredInCategory ?? false), onChange: e => handleChange('featuredInCategory', e.target.checked), className: "kywi-checkbox" }), ' ', "Featured in Category"] }) })] })), activeTab === 'related-content' && (_jsx("div", { id: "kywi-tab-panel-related-content", role: "tabpanel", className: "kywi-tab-panel", children: _jsx(RelatedContentPicker, { selected: values.relatedContentIds ?? [], onChange: ids => handleChange('relatedContentIds', ids) }) })), activeTab === 'permissions' && (_jsx("div", { id: "kywi-tab-panel-permissions", role: "tabpanel", className: "kywi-tab-panel", children: _jsx(ContentPermissionsTab, { contentId: String(initialValues?.id ?? ''), groups: groups, userRole: userRole }) })), activeTab === 'version-history' && (_jsx("div", { id: "kywi-tab-panel-version-history", role: "tabpanel", className: "kywi-tab-panel", children: versions.length === 0 ? (_jsx("p", { className: "kywi-empty-state", children: "No versions recorded yet." })) : (_jsxs("table", { className: "kywi-table kywi-version-table", "data-testid": "version-list", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Version" }), _jsx("th", { children: "Created" }), _jsx("th", { children: "By" }), _jsx("th", { children: "Actions" })] }) }), _jsx("tbody", { children: versions.map(v => (_jsxs("tr", { "data-version-id": v.id, children: [_jsxs("td", { children: ["v", v.version] }), _jsx("td", { children: v.createdAt }), _jsx("td", { children: v.createdBy }), _jsxs("td", { className: "kywi-version-actions", children: [_jsx("button", { type: "button", className: "kywi-btn kywi-btn-secondary kywi-btn-sm", "data-action": "diff", onClick: () => onDiffVersion?.(v.id), children: "Diff" }), _jsx("button", { type: "button", className: "kywi-btn kywi-btn-secondary kywi-btn-sm", "data-action": "restore", onClick: () => onRestoreVersion?.(v.id), children: "Restore" }), _jsx("button", { type: "button", className: "kywi-btn kywi-btn-danger kywi-btn-sm", "data-action": "delete", onClick: () => onDeleteVersion?.(v.id), children: "Delete" })] })] }, v.id))) })] })) }))] }), _jsxs("div", { className: "kywi-form-actions", children: [_jsx("button", { type: "submit", className: "kywi-btn kywi-btn-primary", disabled: isSubmitting || isLockedByOther || hasInvalidField, children: isSubmitting ? 'Saving...' : mode === 'create' ? 'Create' : 'Save' }), onCancel && (_jsx("button", { type: "button", onClick: onCancel, className: "kywi-btn kywi-btn-secondary", children: "Cancel" })), hasInvalidField && (_jsx("span", { className: "kywi-field-error", role: "alert", children: "Fix the highlighted fields before saving." }))] })] }));
 }
 //# sourceMappingURL=content-form.js.map