@jini-ai/admin 0.4.2 → 0.4.4

package/dist/seo/react/pages/SeoPage.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAnalyzePanel, useSeoDefaults, useSeoTabs, seoTabPanel } from "../hooks/SeoPage.hooks.js";
+import { agentHandle } from "@jini-ai/agentic";
+import { TabBar } from "@jini-ai/ui/tab-strip";
+import { useSeoCopy, useSeoOptions } from "../hooks/SeoPorts.hooks.js";
+import { actionLabel, orEmpty } from "../../rules.js";
+import { useWiredEntryPicker } from "../hooks/use-entry-picker.hooks.js";
+import { useWiredSeoEntryPanel } from "../hooks/use-seo-entry-panel.hooks.js";
+import { useSeoEntrySection } from "../hooks/use-seo-entry-section.hooks.js";
+import { useWiredSeo } from "../hooks/use-seo.hooks.js";
+import { useSeoPageActions, sitemapStateLabel, } from "../hooks/SeoPage.hooks.js";
+import { MediaRefField } from "../components/MediaRefField.js";
+import { SitemapModal } from "../components/SitemapModal.js";
+/**
+ * One titled group on this screen — title in the left rail, controls in the right column. Markup
+ * only; every visual decision and the reasoning for the rail lives in `styles/seo.css`'s header.
+ *
+ * This is the 1:1 replacement for the `<div className="field-group"><h2 className="card-title">`
+ * pair `56e87ae0` introduced, and the swap is deliberately structure-preserving: the section body
+ * carries `.field-group`'s exact `flex-column` + `--space-4` gap, so the fields inside are laid
+ * out identically and NOTHING becomes conditional. That matters more here than anywhere else in
+ * this file — `SeoDefaultsTab` submits via `new FormData(e.currentTarget)`, so a field that stops
+ * being mounted is simply absent from the payload and silently saves as blank. A wrapper element
+ * cannot unmount anything, and `Seo.unit.test.tsx`'s "keeps every defaults field inside ONE form"
+ * pins all seven names, in order, against exactly that.
+ *
+ * Fixed `<h2>` rather than a `level` prop: both callers are top-level groups under the page `H1`,
+ * and the one heading on this screen that is genuinely subordinate — `SeoEntryPanel`'s "Per-entry
+ * overrides", which sits INSIDE the "Per-entry SEO" section — keeps its own `<h3>` and is not
+ * routed through here.
+ */
+function SeoSection({ title, children }) {
+    return (_jsxs("section", { className: "jini-seo-section", children: [_jsx("div", { className: "jini-seo-section-head", children: _jsx("h2", { className: "jini-seo-section-title", children: title }) }), _jsx("div", { className: "jini-seo-section-body", children: children })] }));
+}
+/** Dropdown over every post + page, sourced from the already-existing `listPosts`/`listPages`
+ * routes — cheapest entry-selection UX available given what's already built (REQ-06). */
+function EntryPicker({ locale, entryId, onChange, useEntryPickerHook = useWiredEntryPicker }) {
+    const t = useSeoCopy();
+    const { entries, error } = useEntryPickerHook();
+    if (error)
+        return _jsx("div", { className: "jini-notice jini-notice-error", children: error });
+    if (!entries)
+        return _jsx("div", { className: "jini-notice", children: t({ locale: locale, key: "Loading entries…" }) });
+    /* The "Entry" caption is no longer painted (owner, 2026-09-06: "you can actually just get rid of
+       'Entry'") — the placeholder option already says "Choose an entry…", so the visible word was
+       saying it twice, and with no gap between the two it read as one smashed-together control.
+       It stays a REAL label rather than becoming a placeholder-only select: this is the exact
+       `<label class="a11y-label-wrap">` + `.visually-hidden` idiom `styles/editor.css` documents for
+       the four controls a previous accessibility pass found unnamed — including, by name, a
+       `<select>` with no accessible name at all. `display: contents` drops the wrapper's own box, so
+       the select keeps the section body's sizing exactly as if the label were not there.
+       The i18n key is unchanged and still passed through `t`, so nothing dangles. */
+    return (_jsxs("label", { className: "jini-a11y-label-wrap", children: [_jsx("span", { className: "jini-visually-hidden", children: t({ locale: locale, key: "Entry" }) }), _jsxs("select", { className: "jini-select", value: entryId, onChange: (e) => onChange(e.target.value), ...agentHandle({ handle: "seo-entry-picker" }, {
+                    role: "field",
+                    label: "Choose which page or post to edit or analyze SEO for",
+                }), children: [_jsx("option", { value: "", children: t({ locale: locale, key: "Choose an entry…" }) }), entries.map((entry) => (_jsxs("option", { value: entry.id, children: [entry.title, " (", entry.status, ")"] }, entry.id)))] })] }));
+}
+/** Read-only score + issues view (REQ-07) — exact field names read off `SeoAnalysis`/`SeoIssue`
+ * (`src/seo/types.ts`), not guessed. No state of its own — only the severity sort, which lives in
+ * `rules.ts` as `sortIssuesBySeverity`. */
+function AnalyzePanel(props) {
+    const t = useSeoCopy();
+    const { locale } = props;
+    const { sortedIssues } = useAnalyzePanel({ analysis: props.analysis });
+    return (_jsxs("div", { className: "jini-seo-analyze-panel", children: [_jsx("h3", { children: t({ locale: locale, key: "Analysis" }) }), _jsxs("p", { children: [t({ locale: locale, key: "Score:" }), " ", _jsx("strong", { children: props.analysis.score })] }), sortedIssues.length === 0 ? (_jsx("p", { className: "jini-muted-cell", children: t({ locale: locale, key: "No issues." }) })) : (_jsx("ul", { children: sortedIssues.map((issue, i) => (_jsxs("li", { children: [_jsx("span", { className: `jini-status jini-status-${issue.severity === "error" ? "failure" : issue.severity === "warning" ? "unavailable" : "success"}`, children: issue.severity }), " ", _jsx("code", { children: issue.code }), issue.field ? _jsxs("span", { className: "jini-muted-cell", children: [" (", issue.field, ")"] }) : null, " \u2014 ", issue.message] }, `${issue.code}-${i}`))) }))] }));
+}
+/** Per-entry overrides edit form (REQ-06). Pre-fills from `getSeoEntry`'s resolved meta, but
+ * tracks which fields the user actually touched so `putSeoEntry` only ever sends a genuine
+ * partial patch — matching the resolved-vs-override distinction `SeoExtFields` implies (an
+ * untouched field must not turn into a persisted override equal to today's resolved default). */
+// EXEMPTION (complexity ceiling, 2026-08-06, updated for the ≤9/≤9 bar): ESLint scores this
+// component's cyclomatic complexity at 25 against a 9 ceiling, but its cognitive complexity is 6
+// (also under 9). That gap between the two is the signature of a
+// measurement artifact, not real branching: eleven form fields each read as
+// `fieldValue(key, resolved.X ?? default) ?? default`, and ESLint's cyclomatic rule counts every
+// `??` as its own decision point — twenty of the twenty-five come from those fallback chains alone,
+// none of which nest inside one another or inside each other's control flow (which is exactly what
+// keeps cognitive complexity low). The other five points are ordinary flat conditionals (notice,
+// saveError, the disabled expression, the Save button's label, the analysis panel) already under
+// the ceiling on their own. There is nothing to extract: splitting the eleven fields into their own
+// components would still evaluate the same fallback chains, just spread across more functions, for
+// no complexity benefit and a real loss of "one form, one place to read its fields."
+function SeoEntryPanel({ locale, entryId, useSeoEntryPanelHook = useWiredSeoEntryPanel }) {
+    const t = useSeoCopy();
+    const { resolved, analysis, loadError, saving, saveError, notice, fieldValue, setField, save, touched } = useSeoEntryPanelHook({ entryId });
+    if (loadError)
+        return _jsx("div", { className: "jini-notice jini-notice-error", children: loadError });
+    if (!resolved)
+        return _jsx("div", { className: "jini-notice", children: t({ locale: locale, key: "Loading entry SEO…" }) });
+    return (_jsxs("div", { className: "jini-seo-entry-panel", children: [_jsx("h3", { children: t({ locale: locale, key: "Per-entry overrides" }) }), _jsxs("p", { className: "jini-muted-cell", children: [t({ locale: locale, key: "Fields show the currently-effective value (author override, or site default, or derived from the entry). Only fields you change here are saved as overrides." }), " ", t({ locale: locale, key: "Empty a field and save to remove its override — the entry falls back to the site default." })] }), notice ? _jsx("div", { className: "jini-notice", children: notice }) : null, saveError ? (_jsx("div", { className: "jini-notice jini-notice-error", role: "alert", children: saveError })) : null, _jsxs("label", { children: [t({ locale: locale, key: "Title" }), _jsx("input", { className: "jini-input", value: fieldValue("title", resolved.title) ?? "", onChange: (e) => setField("title", e.target.value), ...agentHandle({ handle: "seo-entry-title" }, { role: "field", label: "This entry's SEO title override" }) })] }), _jsxs("label", { children: [t({ locale: locale, key: "Description" }), _jsx("textarea", { className: "jini-textarea", value: fieldValue("description", resolved.description ?? "") ?? "", onChange: (e) => setField("description", e.target.value), ...agentHandle({ handle: "seo-entry-description" }, { role: "field", label: "This entry's SEO description override" }) })] }), _jsxs("label", { children: [t({ locale: locale, key: "Canonical URL" }), _jsx("input", { className: "jini-input", value: fieldValue("canonical", resolved.canonical) ?? "", onChange: (e) => setField("canonical", e.target.value), ...agentHandle({ handle: "seo-entry-canonical" }, { role: "field", label: "This entry's canonical URL override" }) })] }), _jsxs("label", { children: [_jsx("input", { className: "jini-input", type: "checkbox", checked: fieldValue("noindex", resolved.robots.noindex) ?? false, onChange: (e) => setField("noindex", e.target.checked), ...agentHandle({ handle: "seo-entry-noindex" }, { role: "checkbox", label: "Override this entry's robots noindex directive" }) }), t({ locale: locale, key: "Noindex" })] }), _jsxs("label", { children: [_jsx("input", { className: "jini-input", type: "checkbox", checked: fieldValue("nofollow", resolved.robots.nofollow) ?? false, onChange: (e) => setField("nofollow", e.target.checked), ...agentHandle({ handle: "seo-entry-nofollow" }, { role: "checkbox", label: "Override this entry's robots nofollow directive" }) }), t({ locale: locale, key: "Nofollow" })] }), _jsxs("label", { children: [t({ locale: locale, key: "OG title" }), _jsx("input", { className: "jini-input", value: fieldValue("ogTitle", resolved.openGraph.title) ?? "", onChange: (e) => setField("ogTitle", e.target.value), ...agentHandle({ handle: "seo-entry-og-title" }, { role: "field", label: "This entry's Open Graph title override" }) })] }), _jsxs("label", { children: [t({ locale: locale, key: "OG description" }), _jsx("input", { className: "jini-input", value: fieldValue("ogDescription", resolved.openGraph.description ?? "") ?? "", onChange: (e) => setField("ogDescription", e.target.value), ...agentHandle({ handle: "seo-entry-og-description" }, { role: "field", label: "This entry's Open Graph description override" }) })] }), _jsx(MediaRefField, { locale: locale, id: "seo-entry-og-image", label: t({ locale: locale, key: "OG image" }), value: fieldValue("ogImage", resolved.openGraph.image ?? "") ?? "", onChange: (value) => setField("ogImage", value), agentHandle: "seo-entry-og-image" }), _jsxs("label", { children: [t({ locale: locale, key: "Twitter title" }), _jsx("input", { className: "jini-input", value: fieldValue("twitterTitle", resolved.twitter.title) ?? "", onChange: (e) => setField("twitterTitle", e.target.value), ...agentHandle({ handle: "seo-entry-twitter-title" }, { role: "field", label: "This entry's Twitter card title override" }) })] }), _jsxs("label", { children: [t({ locale: locale, key: "Twitter description" }), _jsx("input", { className: "jini-input", value: fieldValue("twitterDescription", resolved.twitter.description ?? "") ?? "", onChange: (e) => setField("twitterDescription", e.target.value), ...agentHandle({ handle: "seo-entry-twitter-description" }, { role: "field", label: "This entry's Twitter card description override" }) })] }), _jsx(MediaRefField, { locale: locale, id: "seo-entry-twitter-image", label: t({ locale: locale, key: "Twitter image" }), value: fieldValue("twitterImage", resolved.twitter.image ?? "") ?? "", onChange: (value) => setField("twitterImage", value), agentHandle: "seo-entry-twitter-image" }), _jsx("span", { className: "jini-editor-actions", children: _jsx("button", { type: "button", className: "jini-btn jini-btn-secondary", onClick: save, disabled: saving || Object.keys(touched).length === 0, ...agentHandle({ handle: "seo-entry-save-overrides" }, { role: "button", label: "Save this entry's SEO overrides" }), children: saving ? t({ locale: locale, key: "Saving…" }) : t({ locale: locale, key: "Save overrides" }) }) }), analysis ? _jsx(AnalyzePanel, { locale: locale, analysis: analysis }) : null] }));
+}
+/** Section wrapper (REQ-06/07) — entry picker over the per-entry edit + analyze panels. This IS the
+ *  "Pages & posts" tab panel; it kept its name and its markup, because nothing about it changed
+ *  except that a tab now selects it.
+ *
+ *  The `<h2>` stays, and deliberately so — dropping it as "redundant with the tab label" was tried
+ *  and reverted. A tab label is not a heading: `TabBar` emits `role="tab"` buttons, which do not
+ *  appear in a screen reader's heading list at all, so removing this left the whole panel with `H1`
+ *  and nothing else — the exact regression `deployment/HistoryTab.tsx`'s own comment records
+ *  measuring live on its tab. It is also not a duplicate: the tab reads "Pages & posts" (what you
+ *  pick from), the heading reads "Per-entry SEO" (what you are editing). */
+export function SeoEntrySection({ locale, useSeoEntrySectionHook = useSeoEntrySection }, _optional = {}) {
+    const t = useSeoCopy();
+    const { entryId, setEntryId } = useSeoEntrySectionHook();
+    return (_jsx("div", { className: "jini-seo-panel jini-seo-panel--full jini-seo-entry-section", ...agentHandle({ handle: "seo-per-entry" }, {
+            role: "region",
+            label: "Per-entry SEO overrides — pick one entry and edit or analyze its metadata",
+        }), children: _jsxs(SeoSection, { title: t({ locale: locale, key: "Per-entry SEO" }), children: [_jsx(EntryPicker, { locale: locale, entryId: entryId, onChange: setEntryId }), entryId ? _jsx(SeoEntryPanel, { locale: locale, entryId: entryId }, entryId) : null] }) }));
+}
+/** What the two site-wide tab panels need from `useWiredSeo()`. Named as one object rather than
+ *  passed as six loose props for the same reason `Roles.tsx`'s `RoleCreateFormController` documents:
+ *  none of these is meaningful without the others, so naming the group is what lets a test hand a
+ *  panel a controller instead of assembling one out of parts. */
+/**
+ * The "Site defaults" tab — the site-wide `seo.*` settings form, moved here verbatim from `Seo`'s
+ * own body.
+ *
+ * ONE addition beyond relocation: the two `.field-group`s now carry headings ("Search appearance",
+ * "Crawling"). They are the grouping an operator already thinks in — every SEO tool they have used
+ * separates what search/social show from whether to be indexed at all — and the form had no
+ * internal hierarchy whatsoever before, just seven controls in a row. Expressing it as headings
+ * INSIDE one tab rather than as more tabs is deliberate and load-bearing: see `react/hooks/SeoPage.hooks.ts`'s
+ * header for why splitting this form across panels would silently blank fields on save.
+ *
+ * The submit handler is now one call to `buildSeoSettingsPatch` (`react/hooks/SeoPage.hooks.ts`) rather than seven
+ * inline `??`/`||` field reads — same fields, same fallbacks, same payload, just not written in the
+ * `.tsx`.
+ */
+export function SeoDefaultsTab({ controller }, _optional = {}) {
+    const t = useSeoCopy();
+    const { locale, settings, saving, defaultOgImage, setDefaultOgImage } = controller;
+    const { submit } = useSeoDefaults({ save: controller.save });
+    return (_jsxs("form", { className: "jini-seo-panel jini-seo-panel--full", ...agentHandle({ handle: "seo-defaults-form" }, {
+            role: "form",
+            label: "Site-wide SEO defaults — title template, meta description, social image, robots",
+        }), onSubmit: submit, children: [_jsxs(SeoSection, { title: t({ locale: locale, key: "Search appearance" }), children: [_jsxs("div", { className: "jini-field", children: [_jsx("label", { className: "jini-field-label", htmlFor: "seo-title-template", children: t({ locale: locale, key: "Title template (must contain %s)" }) }), _jsx("input", { className: "jini-input", id: "seo-title-template", name: "titleTemplate", defaultValue: settings.titleTemplate, ...agentHandle({ handle: "seo-title-template" }, {
+                                    role: "field",
+                                    label: "Site-wide title template; %s is replaced by the page's own title",
+                                }) })] }), _jsxs("div", { className: "jini-field", children: [_jsx("label", { className: "jini-field-label", htmlFor: "seo-default-description", children: t({ locale: locale, key: "Default meta description" }) }), _jsx("textarea", { className: "jini-textarea", id: "seo-default-description", name: "defaultDescription", defaultValue: orEmpty({ value: settings.defaultDescription }), ...agentHandle({ handle: "seo-default-description" }, {
+                                    role: "field",
+                                    label: "Fallback meta description for pages that set none of their own",
+                                }) })] })] }), _jsxs(SeoSection, { title: t({ locale: locale, key: "Social sharing" }), children: [_jsx(MediaRefField, { locale: locale, id: "seo-default-og-image", name: "defaultOgImage", label: t({ locale: locale, key: "Default Open Graph / Twitter image" }), value: defaultOgImage, onChange: setDefaultOgImage, agentHandle: "seo-default-og-image" }), _jsxs("div", { className: "jini-field", children: [_jsx("label", { className: "jini-field-label", htmlFor: "seo-twitter-site", children: t({ locale: locale, key: "Twitter @site handle" }) }), _jsx("input", { className: "jini-input", id: "seo-twitter-site", name: "twitterSite", defaultValue: orEmpty({ value: settings.twitterSite }), ...agentHandle({ handle: "seo-twitter-site" }, {
+                                    role: "field",
+                                    label: "The site's Twitter @handle, used in Twitter card metadata",
+                                }) })] })] }), _jsxs(SeoSection, { title: t({ locale: locale, key: "Crawling" }), children: [_jsxs("label", { className: "jini-form-checkbox-field", children: [_jsx("input", { className: "jini-input", type: "checkbox", name: "noindex", defaultChecked: settings.defaultRobots.noindex, ...agentHandle({ handle: "seo-default-noindex" }, {
+                                    role: "checkbox",
+                                    label: "Ask search engines not to index pages by default",
+                                }) }), t({ locale: locale, key: "Default noindex" })] }), _jsxs("label", { className: "jini-form-checkbox-field", children: [_jsx("input", { className: "jini-input", type: "checkbox", name: "nofollow", defaultChecked: settings.defaultRobots.nofollow, ...agentHandle({ handle: "seo-default-nofollow" }, {
+                                    role: "checkbox",
+                                    label: "Ask search engines not to follow links by default",
+                                }) }), t({ locale: locale, key: "Default nofollow" })] }), _jsxs("label", { className: "jini-form-checkbox-field", children: [_jsx("input", { className: "jini-input", type: "checkbox", name: "sitemapEnabled", defaultChecked: settings.sitemapEnabled, ...agentHandle({ handle: "seo-sitemap-enabled" }, {
+                                    role: "checkbox",
+                                    label: "Whether this site publishes a sitemap at all",
+                                }) }), t({ locale: locale, key: "Sitemap enabled" })] })] }), _jsx("div", { className: "jini-editor-actions jini-form-actions jini-seo-actions", children: _jsx("button", { className: "jini-btn", type: "submit", disabled: saving, ...agentHandle({ handle: "seo-save-settings" }, {
+                        role: "button",
+                        label: "Save the site-wide SEO defaults above",
+                    }), children: actionLabel({ pending: saving, pendingLabel: t({ locale: locale, key: "Saving…" }), idleLabel: t({ locale: locale, key: "Save settings" }) }) }) })] }));
+}
+/**
+ * The "Sitemap" tab — the two sitemap actions, moved here verbatim, plus one line this screen never
+ * had: whether a sitemap is being published at all.
+ *
+ * That line is the reason this is a tab rather than a footnote on Site defaults. The switch
+ * ("Sitemap enabled") cannot move here — it belongs to the defaults form's `FormData` submit, see
+ * `react/hooks/SeoPage.hooks.ts`'s header — so without a state read, an operator who had sitemaps switched off
+ * would find a Regenerate button that appears live and reports success while publishing nothing.
+ * Reporting the state instead of duplicating the control keeps exactly one switch on the screen.
+ *
+ * Wrapped in a `.card` like the defaults form beside it, rather than left as loose text on the
+ * page — rendered side by side the uncontained version read as an unfinished panel next to a
+ * carded one. The heading is "Cached sitemap", not "Sitemap": it names what the card acts on
+ * without restating the tab label, the same way `deployment/OverviewTab.tsx`'s cards are titled.
+ * It also has to exist at all — a `role="tab"` button is not in a screen reader's heading list, so
+ * a panel with no `<h2>` leaves that reader nothing but the page `H1`.
+ */
+export function SeoSitemapTab({ controller }, _optional = {}) {
+    const t = useSeoCopy();
+    const { locale, settings, saving, regenerateSitemap, openSitemapModal } = controller;
+    return (_jsx("div", { className: "jini-seo-panel jini-seo-panel--full", ...agentHandle({ handle: "seo-sitemap" }, {
+            role: "region",
+            label: "Sitemap — force a rebuild of the cached sitemap",
+        }), children: _jsxs(SeoSection, { title: t({ locale: locale, key: "Cached sitemap" }), children: [_jsx("p", { className: "jini-card-lead", children: sitemapStateLabel({ sitemapEnabled: settings.sitemapEnabled }, { t: key => t({ locale, key }) }) }), _jsx("p", { children: t({ locale: locale, key: "Rebuild the sitemap now to include the latest published content." }) }), _jsxs("span", { className: "jini-editor-actions", children: [_jsx("button", { className: "jini-btn jini-btn-secondary", disabled: saving, onClick: regenerateSitemap, ...agentHandle({ handle: "seo-regenerate-sitemap" }, {
+                                role: "button",
+                                label: "Rebuild the cached sitemap now, bypassing the cache",
+                            }), children: actionLabel({ pending: saving, pendingLabel: t({ locale: locale, key: "Working…" }), idleLabel: t({ locale: locale, key: "Regenerate sitemap" }) }) }), _jsx("button", { type: "button", className: "jini-btn jini-btn-secondary", onClick: openSitemapModal, ...agentHandle({ handle: "seo-view-sitemap" }, {
+                                role: "button",
+                                label: "Open a modal showing the sitemap's URLs, or its raw XML",
+                            }), children: t({ locale: locale, key: "View sitemap" }) })] })] }) }));
+}
+export function Seo({ tabId, onTabChange, useSeoHook = useWiredSeo } = {}, _optional = {}) {
+    const t = useSeoCopy();
+    const { headerActions } = useSeoOptions();
+    const { changeTab } = useSeoPageActions({ onTabChange });
+    const { settings, error, saving, notice, save, defaultOgImage, setDefaultOgImage, regenerateSitemap, sitemapModalOpen, openSitemapModal, closeSitemapModal, locale, } = useSeoHook();
+    // Locale is a context-backed hook; it must run on the loading/error renders too.
+    const { activeTabId, tabs } = useSeoTabs({ tabId });
+    if (error && !settings)
+        return _jsx("div", { className: "jini-page", children: _jsx("div", { className: "jini-notice jini-notice-error", children: error }) });
+    if (!settings)
+        return _jsx("div", { className: "jini-page", children: _jsx("div", { className: "jini-notice", children: t({ locale: locale, key: "Loading SEO settings…" }) }) });
+    const controller = {
+        locale,
+        settings,
+        saving,
+        save,
+        defaultOgImage,
+        setDefaultOgImage,
+        regenerateSitemap,
+        openSitemapModal,
+    };
+    return (_jsxs("div", { className: "jini-page jini-seo-page", children: [_jsxs("div", { className: "jini-page-header", children: [_jsxs("div", { className: "jini-page-header-text", children: [_jsx("p", { className: "jini-page-kicker", children: t({ locale: locale, key: "Marketing" }) }), _jsx("h1", { className: "jini-page-title", children: "SEO" }), _jsx("p", { className: "jini-page-description", children: t({ locale: locale, key: "Site-wide defaults for meta titles, descriptions, Open Graph/Twitter cards, and robots directives." }) })] }), _jsx("div", { className: "jini-page-actions", children: headerActions })] }), error ? _jsx("div", { className: "jini-notice jini-notice-error", children: error }) : null, notice ? _jsx("div", { className: "jini-notice", children: notice }) : null, _jsx(TabBar, { ariaLabel: "SEO", tabs: tabs, activeId: activeTabId, onChange: changeTab, containerHandle: "seo-tab-bar" }), seoTabPanel({ activeTabId, controller, components: { SeoDefaultsTab, SeoSitemapTab, SeoEntrySection } }), sitemapModalOpen ? (_jsx(SitemapModal, { locale: locale, sitemapEnabled: settings.sitemapEnabled, regenerating: saving, onRegenerate: regenerateSitemap, onClose: closeSitemapModal })) : null] }));
+}
+export { Seo as SeoPage };
+export default Seo;
+//# sourceMappingURL=SeoPage.js.map

package/dist/seo/rules.d.ts

@@ -0,0 +1,142 @@
+import type { AdminSeoIssue as SeoIssue, AdminSeoSettingsPatch as SeoSettingsPatch } from "../core/ports/seo.js";
+/**
+ * Orders issues error-first, then warning, then info, matching the severities' natural urgency.
+ * An unrecognized severity sorts last (falls back to `9`) rather than throwing, since this reads
+ * off a server-provided field this client does not fully control.
+ *
+ * @complexity Time: O(n log n) in issue count via the underlying sort; space: O(n) for the copy
+ * (never mutates the array passed in).
+ */
+export declare function sortIssuesBySeverity({ issues }: {
+    issues: readonly SeoIssue[];
+}, _optional?: Record<string, never>): SeoIssue[];
+/**
+ * One edited per-entry override field's outgoing value. An emptied text/URL box means "remove this
+ * override so the entry falls back to the site default", which on the wire is `null` — the clear
+ * sentinel `SeoExtFieldsPatch` documents (`apps/website/src/features/seo/types.ts`) and
+ * `setEntrySeoOverrides` implements by `delete`-ing the key.
+ *
+ * It is NOT `""`. `write-service.ts` stores `""` as a genuine override and `seo.ts` resolves
+ * overrides with `??`, so a blank override beats the site default — the exact trap that left one
+ * post pinned at `{"description":""}` with no way back from the admin UI. It is not `undefined`
+ * either: an omitted key means "leave unchanged", and `JSON.stringify` would drop it from the
+ * request body entirely.
+ *
+ * Generic and value-shaped rather than key-shaped on purpose — the two robots checkboxes go
+ * through the same setter and pass straight through, since a checkbox has no "empty" gesture with
+ * which to express a clear. Only a genuinely emptied string can mean one.
+ *
+ * @complexity O(1) — one equality test.
+ */
+export declare function overrideOrClear<V>({ value }: {
+    value: V;
+}, _optional?: Record<string, never>): V | null;
+/** An optional site-wide default's controlled-input value — `react/pages/SeoPage.tsx`'s three optional defaults
+ *  (`defaultDescription`, `defaultOgImage`, `twitterSite`) all fall back to `""` the same way. */
+export declare function orEmpty({ value }: {
+    value: string | undefined;
+}, _optional?: Record<string, never>): string;
+/** A pending-action button's label — `react/pages/SeoPage.tsx` uses this for both the save-settings button
+ *  ("Saving…"/"Save settings") and the regenerate-sitemap button ("Working…"/"Regenerate
+ *  sitemap"), same `pending ? … : …` shape, different copy. Also reused by `SitemapModal.tsx`'s
+ *  own footer Regenerate button — same two states, same copy, different trigger. */
+export declare function actionLabel({ pending, pendingLabel, idleLabel }: {
+    pending: boolean;
+    pendingLabel: string;
+    idleLabel: string;
+}, _optional?: Record<string, never>): string;
+/**
+ * One `<url>` entry from a parsed sitemap. Only the fields `apps/website`'s
+ * `registerSeoSitemapRoute` (`server/inbound/public-http/routes/site/sitemap.ts`) actually emits —
+ * `<loc>` always, `<lastmod>` when the entry has one — verified by reading that route rather than
+ * guessed: it never writes `changefreq`/`priority`, so `SitemapModal.tsx`'s table has no columns
+ * for those (SPEC intent: "omit a column entirely if the sitemap never emits that field").
+ */
+export interface SitemapUrlEntry {
+    loc: string;
+    lastmod: string | null;
+}
+/**
+ * Parses a `<urlset>` sitemap document into its `<url>` entries via the browser's built-in
+ * `DOMParser` — no new dependency, and it reads the exact same bytes `GET /sitemap.xml` served
+ * (this never re-derives sitemap content of its own). Malformed input (a parser error, a document
+ * with no `<url>` elements, empty text) yields `[]` rather than throwing: `useSitemapModal` already
+ * guards the fetch itself via `SitemapPort`; this only guards the parse step.
+ *
+ * @complexity Time/space: O(n) in document size — one DOM parse, one linear pass over `<url>` nodes.
+ */
+export declare function parseSitemapXml({ xmlText }: {
+    xmlText: string;
+}, _optional?: Record<string, never>): SitemapUrlEntry[];
+/** Case-insensitive substring filter over a parsed sitemap's URLs — `SitemapModal.tsx`'s filter
+ *  box, for the same "narrow a long list by typing" shape every other filter in this admin uses.
+ *  An empty/whitespace-only query returns every entry unchanged (a copy, not the same reference,
+ *  matching `sortIssuesBySeverity`'s own never-mutate-the-input convention above).
+ *
+ * @complexity Time: O(n) in entry count; space: O(n) for the filtered copy. */
+export declare function filterSitemapEntries({ entries, query }: {
+    entries: readonly SitemapUrlEntry[];
+    query: string;
+}, _optional?: Record<string, never>): SitemapUrlEntry[];
+/** A library selection is displayed as a preview while its persisted reference stays intact.
+ * URLs and incomplete input remain editable. @complexity O(n) in value length; no I/O.
+ */
+export declare function isStoredMediaRef({ value }: {
+    value: string;
+}, _optional?: Record<string, never>): boolean;
+/** Builds the `{slug}:public` reference `MediaRefField` writes into the field on selection —
+ *  prefers the asset's readable slug over its id (readable-slugs S5b, 2026-09-23), matching
+ *  `resolveSeoImageRef`'s own id-or-slug lookup server-side (`findMediaByIdOrSlug`,
+ *  `apps/website/src/features/seo/media.ts`, S4) so a saved override reads as a slug, not an opaque
+ *  uuid. Falls back to `id` when `slug` is empty — defensive only; a real upload always derives one
+ *  (`deriveUniqueMediaSlug`). Same `transformName: "public"` `EmbedInsertControl.tsx` already writes
+ *  for an inserted image node. An old stored `{assetId}:public` value keeps resolving regardless
+ *  (S4's `resolveSeoImageRef` accepts either spelling) — this only changes what gets WRITTEN next. */
+export declare function buildMediaRef({ item }: {
+    item: {
+        id: string;
+        slug?: string;
+    };
+}, _optional?: Record<string, never>): string;
+/** `MediaRefField`'s thumbnail `<img src>` for the field's current value. An absolute URL (the
+ *  field's other legal shape — someone pasted a raw URL) renders directly; a `{assetId}:{transform}`
+ *  ref resolves through the injected `mediaOriginalUrl` builder — the admin media library's own
+ *  preview URL (`MediaPickerPort.mediaOriginalUrl`), same as `MediaPickerDialog`'s own grid
+ *  thumbnails use, NOT the public `/m/...` rendition URL (that needs a live workspace/transform
+ *  lookup this client-side preview has no reason to perform). `null` for an empty or unparseable
+ *  value — the caller renders no preview then, rather than a broken `<img>`. `typeof value !==
+ *  "string"` also resolves to `null` rather than throwing — `MediaRefField`'s `value` prop is a
+ *  `fieldValue(key, resolved) ?? ""` fallback chain (`react/pages/SeoPage.tsx`), where `??` does not replace a
+ *  non-nullish-but-wrong-typed result from a misbehaving caller; matches `resolveSeoImageRef`'s own
+ *  "never throws over one bad reference" contract (`apps/website/src/features/seo/media.ts`).
+ *
+ * @complexity O(1) — string parsing only, no I/O (the returned URL is a template; the browser
+ * performs the actual fetch only once it is used as an `<img src>`). */
+export declare function resolveMediaRefPreviewUrl({ value, mediaOriginalUrl }: {
+    value: string;
+    mediaOriginalUrl: (id: string) => string;
+}, _optional?: Record<string, never>): string | null;
+/**
+ * The site-wide settings patch the defaults form submits — lifted out of the form's own inline
+ * `onSubmit` when this screen gained tabs. Same seven fields, same `checkbox === "on"` reading of
+ * the three toggles.
+ *
+ * ONE deliberate behavior change since that lift (2026-09-06): the three optional scalars now
+ * submit `null` rather than `undefined` when their box is empty, so emptying one CLEARS the site
+ * default instead of silently leaving it as it was. See {@link optionalFormString}. `titleTemplate`
+ * is unaffected — it is not nullable server-side and an emptied box still submits `""`, which the
+ * server rejects with its "must contain '%s'" validation error.
+ *
+ * @complexity O(1) — a fixed set of field reads, no iteration.
+ */
+export declare function buildSeoSettingsPatch({ form }: {
+    form: FormData;
+}, _optional?: Record<string, never>): SeoSettingsPatch;
+/** Three stable query ids; defaults remains the first and fallback tab. */
+export declare const SEO_TAB_IDS: readonly ["defaults", "sitemap", "entries"];
+export type SeoTabId = (typeof SEO_TAB_IDS)[number];
+/** Resolves an absent or stale bookmark to the defaults panel. */
+export declare function resolveSeoTabId({ tabId }: {
+    tabId?: string | null | undefined;
+}, _optional?: Record<string, never>): SeoTabId;
+//# sourceMappingURL=rules.d.ts.map

package/dist/seo/rules.js

@@ -0,0 +1,220 @@
+/**
+ * @file Pure logic for the `seo` feature — everything that computes a value rather than rendering
+ * one.
+ *
+ * Follows the `rules.ts` convention `features/posts/rules.ts` establishes. `sortIssuesBySeverity`
+ * was `AnalyzePanel`'s inline `.sort()` call plus its module-level `SEVERITY_ORDER` table; it
+ * computes an ordering, so per that convention it moves here rather than stay "presentation" —
+ * `AnalyzePanel` itself has no state and needs no hook, only this rule.
+ */
+const SEVERITY_ORDER = { error: 0, warning: 1, info: 2 };
+/**
+ * Orders issues error-first, then warning, then info, matching the severities' natural urgency.
+ * An unrecognized severity sorts last (falls back to `9`) rather than throwing, since this reads
+ * off a server-provided field this client does not fully control.
+ *
+ * @complexity Time: O(n log n) in issue count via the underlying sort; space: O(n) for the copy
+ * (never mutates the array passed in).
+ */
+export function sortIssuesBySeverity({ issues }, _optional = {}) {
+    return [...issues].sort((a, b) => (SEVERITY_ORDER[a.severity] ?? 9) - (SEVERITY_ORDER[b.severity] ?? 9));
+}
+/**
+ * One edited per-entry override field's outgoing value. An emptied text/URL box means "remove this
+ * override so the entry falls back to the site default", which on the wire is `null` — the clear
+ * sentinel `SeoExtFieldsPatch` documents (`apps/website/src/features/seo/types.ts`) and
+ * `setEntrySeoOverrides` implements by `delete`-ing the key.
+ *
+ * It is NOT `""`. `write-service.ts` stores `""` as a genuine override and `seo.ts` resolves
+ * overrides with `??`, so a blank override beats the site default — the exact trap that left one
+ * post pinned at `{"description":""}` with no way back from the admin UI. It is not `undefined`
+ * either: an omitted key means "leave unchanged", and `JSON.stringify` would drop it from the
+ * request body entirely.
+ *
+ * Generic and value-shaped rather than key-shaped on purpose — the two robots checkboxes go
+ * through the same setter and pass straight through, since a checkbox has no "empty" gesture with
+ * which to express a clear. Only a genuinely emptied string can mean one.
+ *
+ * @complexity O(1) — one equality test.
+ */
+export function overrideOrClear({ value }, _optional = {}) {
+    return value === "" ? null : value;
+}
+/** An optional site-wide default's controlled-input value — `react/pages/SeoPage.tsx`'s three optional defaults
+ *  (`defaultDescription`, `defaultOgImage`, `twitterSite`) all fall back to `""` the same way. */
+export function orEmpty({ value }, _optional = {}) {
+    return value ?? "";
+}
+/** A pending-action button's label — `react/pages/SeoPage.tsx` uses this for both the save-settings button
+ *  ("Saving…"/"Save settings") and the regenerate-sitemap button ("Working…"/"Regenerate
+ *  sitemap"), same `pending ? … : …` shape, different copy. Also reused by `SitemapModal.tsx`'s
+ *  own footer Regenerate button — same two states, same copy, different trigger. */
+export function actionLabel({ pending, pendingLabel, idleLabel }, _optional = {}) {
+    return pending ? pendingLabel : idleLabel;
+}
+/**
+ * Parses a `<urlset>` sitemap document into its `<url>` entries via the browser's built-in
+ * `DOMParser` — no new dependency, and it reads the exact same bytes `GET /sitemap.xml` served
+ * (this never re-derives sitemap content of its own). Malformed input (a parser error, a document
+ * with no `<url>` elements, empty text) yields `[]` rather than throwing: `useSitemapModal` already
+ * guards the fetch itself via `SitemapPort`; this only guards the parse step.
+ *
+ * @complexity Time/space: O(n) in document size — one DOM parse, one linear pass over `<url>` nodes.
+ */
+export function parseSitemapXml({ xmlText }, _optional = {}) {
+    const doc = new DOMParser().parseFromString(xmlText, "text/xml");
+    if (doc.getElementsByTagName("parsererror").length > 0)
+        return [];
+    return Array.from(doc.getElementsByTagName("url"))
+        .map((urlEl) => ({
+        loc: urlEl.getElementsByTagName("loc")[0]?.textContent?.trim() ?? "",
+        lastmod: urlEl.getElementsByTagName("lastmod")[0]?.textContent?.trim() || null,
+    }))
+        .filter((entry) => entry.loc !== "");
+}
+/** Case-insensitive substring filter over a parsed sitemap's URLs — `SitemapModal.tsx`'s filter
+ *  box, for the same "narrow a long list by typing" shape every other filter in this admin uses.
+ *  An empty/whitespace-only query returns every entry unchanged (a copy, not the same reference,
+ *  matching `sortIssuesBySeverity`'s own never-mutate-the-input convention above).
+ *
+ * @complexity Time: O(n) in entry count; space: O(n) for the filtered copy. */
+export function filterSitemapEntries({ entries, query }, _optional = {}) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return [...entries];
+    return entries.filter((entry) => entry.loc.toLowerCase().includes(needle));
+}
+/**
+ * `MediaRefField`'s ref-building/preview logic (`ogImage`/`twitterImage`/`defaultOgImage` all
+ * share this shape — SPEC intent: "make the OG image selectable, with a preview"). The reference
+ * format itself is NOT reinvented here — it is verified, not guessed, against the one function that
+ * actually parses it server-side: `resolveSeoImageRef` (`apps/website/src/features/seo/media.ts`)
+ * accepts either an already-absolute URL, passed through unchanged, or a bare `{assetId}:{transformName}`
+ * pair split on the FIRST `:`. `isAbsoluteMediaRef`/`parseMediaRefAssetId` below duplicate that
+ * parsing rather than import across the app boundary (apps/admin has no dependency on apps/website)
+ * — kept in lockstep by this doc comment naming the source of truth; a change to that split MUST
+ * update both.
+ */
+/** The transform every upload receives (the server's default rendition) — the one
+ *  `buildMediaRef` always targets, matching `EmbedInsertControl.tsx`'s own
+ *  `transformName: "public"` for the identical `{assetId}:{transformName}` shape it writes into a
+ *  post body's image node. */
+const SEO_IMAGE_TRANSFORM = "public";
+/** Mirrors `resolveSeoImageRef`'s own `isAbsoluteUrl` (`apps/website/src/features/seo/media.ts`) —
+ *  see this section's file-header doc for why this is a duplicate, not an import. */
+const ABSOLUTE_URL_PATTERN = /^[a-z][a-z0-9+.-]*:\/\//i;
+function isAbsoluteMediaRef(value) {
+    return ABSOLUTE_URL_PATTERN.test(value) || value.startsWith("//");
+}
+/** Mirrors `resolveSeoImageRef`'s own `parseMediaRefParts`, narrowed to just the `assetId` half —
+ *  all `MediaRefField`'s preview needs. Returns `null` for an absolute URL (nothing to parse) or a
+ *  malformed ref (no `:`, or nothing on one side of it). */
+function parseMediaRefAssetId(ref) {
+    if (!ref || isAbsoluteMediaRef(ref))
+        return null;
+    const separatorIndex = ref.indexOf(":");
+    if (separatorIndex <= 0 || separatorIndex === ref.length - 1)
+        return null;
+    return ref.slice(0, separatorIndex);
+}
+/** A library selection is displayed as a preview while its persisted reference stays intact.
+ * URLs and incomplete input remain editable. @complexity O(n) in value length; no I/O.
+ */
+export function isStoredMediaRef({ value }, _optional = {}) {
+    const trimmed = typeof value === "string" ? value.trim() : "";
+    // A URL typed one character at a time reaches "https:/" before it reaches "https://".
+    return !trimmed.includes(":/") && parseMediaRefAssetId(trimmed) !== null;
+}
+/** Builds the `{slug}:public` reference `MediaRefField` writes into the field on selection —
+ *  prefers the asset's readable slug over its id (readable-slugs S5b, 2026-09-23), matching
+ *  `resolveSeoImageRef`'s own id-or-slug lookup server-side (`findMediaByIdOrSlug`,
+ *  `apps/website/src/features/seo/media.ts`, S4) so a saved override reads as a slug, not an opaque
+ *  uuid. Falls back to `id` when `slug` is empty — defensive only; a real upload always derives one
+ *  (`deriveUniqueMediaSlug`). Same `transformName: "public"` `EmbedInsertControl.tsx` already writes
+ *  for an inserted image node. An old stored `{assetId}:public` value keeps resolving regardless
+ *  (S4's `resolveSeoImageRef` accepts either spelling) — this only changes what gets WRITTEN next. */
+export function buildMediaRef({ item }, _optional = {}) {
+    const key = item.slug || item.id;
+    return `${key}:${SEO_IMAGE_TRANSFORM}`;
+}
+/** `MediaRefField`'s thumbnail `<img src>` for the field's current value. An absolute URL (the
+ *  field's other legal shape — someone pasted a raw URL) renders directly; a `{assetId}:{transform}`
+ *  ref resolves through the injected `mediaOriginalUrl` builder — the admin media library's own
+ *  preview URL (`MediaPickerPort.mediaOriginalUrl`), same as `MediaPickerDialog`'s own grid
+ *  thumbnails use, NOT the public `/m/...` rendition URL (that needs a live workspace/transform
+ *  lookup this client-side preview has no reason to perform). `null` for an empty or unparseable
+ *  value — the caller renders no preview then, rather than a broken `<img>`. `typeof value !==
+ *  "string"` also resolves to `null` rather than throwing — `MediaRefField`'s `value` prop is a
+ *  `fieldValue(key, resolved) ?? ""` fallback chain (`react/pages/SeoPage.tsx`), where `??` does not replace a
+ *  non-nullish-but-wrong-typed result from a misbehaving caller; matches `resolveSeoImageRef`'s own
+ *  "never throws over one bad reference" contract (`apps/website/src/features/seo/media.ts`).
+ *
+ * @complexity O(1) — string parsing only, no I/O (the returned URL is a template; the browser
+ * performs the actual fetch only once it is used as an `<img src>`). */
+export function resolveMediaRefPreviewUrl({ value, mediaOriginalUrl }, _optional = {}) {
+    const trimmed = typeof value === "string" ? value.trim() : "";
+    if (!trimmed)
+        return null;
+    if (isAbsoluteMediaRef(trimmed))
+        return trimmed;
+    const assetId = parseMediaRefAssetId(trimmed);
+    return assetId ? mediaOriginalUrl(assetId) : null;
+}
+/** One `FormData` field as a string, with the caller's fallback for an absent field. Its own named
+ *  function purely so {@link buildSeoSettingsPatch} below stays readable at a glance: written
+ *  inline, the seven fields' `?? `/`||` chains scored the patch builder at the ESLint ceiling
+ *  (`apps/admin` enforces 9/9 as a hard error) for no gain in clarity. */
+function formString(form, key, fallback = "") {
+    return String(form.get(key) ?? fallback);
+}
+/**
+ * A `FormData` field that is sent as `null` when blank, rather than persisted as an empty string.
+ *
+ * `null` is what CLEARS a site default: the server registers these three (`default_description`,
+ * `default_og_image`, `twitter_site`) as `nullable: true` and `buildScalarWrites`
+ * (`apps/website/src/features/seo/settings.ts`) normalizes `null` to the `""` absent-sentinel that
+ * `getSeoSettings` reads back as `undefined`.
+ *
+ * It used to return `undefined`, under a comment claiming "an empty box means 'no site default'".
+ * That was false and is the bug this replaces: `setSeoSettings` is a MERGE, and `buildScalarWrites`
+ * does `if (raw === undefined) continue;` — so an omitted key means UNCHANGED, and an operator who
+ * emptied "Default meta description" to remove it just saw it come back on the next load, with no
+ * way to remove it from this form at all. `undefined` also cannot survive the request: the client
+ * `JSON.stringify`s this patch, which drops `undefined` keys and keeps `null` ones.
+ */
+function optionalFormString(form, key) {
+    return formString(form, key) || null;
+}
+/**
+ * The site-wide settings patch the defaults form submits — lifted out of the form's own inline
+ * `onSubmit` when this screen gained tabs. Same seven fields, same `checkbox === "on"` reading of
+ * the three toggles.
+ *
+ * ONE deliberate behavior change since that lift (2026-09-06): the three optional scalars now
+ * submit `null` rather than `undefined` when their box is empty, so emptying one CLEARS the site
+ * default instead of silently leaving it as it was. See {@link optionalFormString}. `titleTemplate`
+ * is unaffected — it is not nullable server-side and an emptied box still submits `""`, which the
+ * server rejects with its "must contain '%s'" validation error.
+ *
+ * @complexity O(1) — a fixed set of field reads, no iteration.
+ */
+export function buildSeoSettingsPatch({ form }, _optional = {}) {
+    return {
+        titleTemplate: formString(form, "titleTemplate", "%s"),
+        defaultDescription: optionalFormString(form, "defaultDescription"),
+        defaultOgImage: optionalFormString(form, "defaultOgImage"),
+        twitterSite: optionalFormString(form, "twitterSite"),
+        defaultRobots: {
+            noindex: form.get("noindex") === "on",
+            nofollow: form.get("nofollow") === "on",
+        },
+        sitemapEnabled: form.get("sitemapEnabled") === "on",
+    };
+}
+/** Three stable query ids; defaults remains the first and fallback tab. */
+export const SEO_TAB_IDS = ['defaults', 'sitemap', 'entries'];
+/** Resolves an absent or stale bookmark to the defaults panel. */
+export function resolveSeoTabId({ tabId }, _optional = {}) {
+    return SEO_TAB_IDS.find(id => id === tabId) ?? 'defaults';
+}
+//# sourceMappingURL=rules.js.map