'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo } from 'react';
import { SeoEditorPane } from './seo/SeoEditorPane.js';
import { ResizableAside } from './ui/ResizableAside.js';
import { buildEditorContentHtml } from '../lib/editor-seo-content.js';
const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l';
/** Right-side SEO panel for the Page / Post section editors. */
export function EditorSeoAside({ entityType, entityId, slug, seoTitle, seoDescription, sections = [], bodyHtml = '', onClose, onDraftChange, onSaved, }) {
    const contentHtml = useMemo(() => buildEditorContentHtml(sections, bodyHtml), [sections, bodyHtml]);
    useEffect(() => {
        function onKey(e) {
            if (e.key === 'Escape')
                onClose();
        }
        document.addEventListener('keydown', onKey);
        return () => document.removeEventListener('keydown', onKey);
    }, [onClose]);
    return (_jsx(ResizableAside, { role: "dialog", "aria-label": "SEO settings", className: INSPECTOR_SHELL, children: _jsx(SeoEditorPane, { entityType: entityType, entityId: entityId, slug: slug, contentHtml: contentHtml, draftMeta: { seoTitle, seoDescription }, onDraftChange: onDraftChange, onClose: onClose, onSaved: onSaved }) }));
}
//# sourceMappingURL=EditorSeoAside.js.map