@actuate-media/cms-admin 0.66.0 → 0.68.0

package/src/components/seo/SeoEditorPane.tsx

@@ -0,0 +1,533 @@
+'use client'
+
+/**
+ * Inline SEO editor pane — design-parity replacement for the old
+ * `SeoEditorDrawer` overlay. Rendered inside an `<InspectorPane>` beside the
+ * Content SEO list (380px in the handoff). Same fields, validation, AI
+ * assists, and `updateSeoFields` save path as the drawer; only the
+ * presentation pattern changed.
+ */
+import { cloneElement, isValidElement, useEffect, useId, useState, type ReactElement } from 'react'
+import { Sparkles, Check, Loader2, Wand2 } from 'lucide-react'
+import { toast } from 'sonner'
+import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
+import {
+  fetchSeoContentRecord,
+  updateSeoFields,
+  generateSeoField,
+  SEO_SCHEMA_TYPES,
+  type SeoContentRecord,
+  type SeoFieldPayload,
+  type LlmsInclude,
+} from '../../lib/seo-service.js'
+import { fixBrandVoiceContent } from '../../lib/brand-voice-client.js'
+import { BrandVoiceAlignmentBadge } from '../BrandVoiceAlignmentBadge.js'
+import {
+  InspectorPaneBody,
+  InspectorPaneFooter,
+  InspectorPaneHeader,
+  InspectorPaneSection,
+} from '../ui/InspectorPane.js'
+import { Toggle } from '../ui/Toggle.js'
+import { SeoLoading, SeoErrorState, gradeMeta } from './primitives.js'
+
+const META_TITLE_MAX = 60
+const META_DESC_MAX = 160
+const KEY_TAKEAWAY_MAX = 240
+const LLMS_DESC_MAX = 160
+
+type AiField =
+  | 'metaTitle'
+  | 'metaDescription'
+  | 'ogTitle'
+  | 'ogDescription'
+  | 'focusKeyword'
+  | 'keyTakeaway'
+
+function seoBrandChannel(field: AiField): string | undefined {
+  if (field === 'metaDescription' || field === 'ogDescription') return 'meta_description'
+  return undefined
+}
+
+const inputCls =
+  'w-full rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 text-[12.5px] text-[var(--txt)] placeholder:text-[var(--muted)] focus:border-[var(--acc)] focus:outline-none'
+
+function CharCount({ value, max }: { value: string; max: number }) {
+  const over = value.length > max
+  return (
+    <span className={`text-[11px] ${over ? 'text-[var(--err)]' : 'text-[var(--muted)]'}`}>
+      {value.length}/{max}
+    </span>
+  )
+}
+
+function PaneField({
+  label,
+  children,
+  hint,
+}: {
+  label: string
+  children: React.ReactNode
+  hint?: React.ReactNode
+}) {
+  // Associate the visible label with its control for screen readers. We inject
+  // a generated id onto the single child input/textarea (unless it already has
+  // one) and point the <label htmlFor> at it.
+  const generatedId = useId()
+  let control = children
+  if (isValidElement(children) && (children.props as { id?: string }).id == null) {
+    control = cloneElement(children as ReactElement<{ id?: string }>, { id: generatedId })
+  }
+  const controlId = isValidElement(control) ? (control.props as { id?: string }).id : undefined
+
+  return (
+    <div className="mb-3 last:mb-0">
+      <div className="mb-1 flex items-center justify-between gap-2">
+        <label htmlFor={controlId} className="text-[11.5px] font-medium text-[var(--sub)]">
+          {label}
+        </label>
+        {hint}
+      </div>
+      {control}
+    </div>
+  )
+}
+
+function PaneToggleRow({
+  label,
+  hint,
+  checked,
+  onCheckedChange,
+}: {
+  label: string
+  hint: string
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 py-1.5">
+      <div className="min-w-0">
+        <div className="text-[12.5px] font-medium text-[var(--txt)]">{label}</div>
+        <div className="text-[11px] text-[var(--muted)]">{hint}</div>
+      </div>
+      <Toggle checked={checked} onCheckedChange={onCheckedChange} aria-label={label} />
+    </div>
+  )
+}
+
+export interface SeoEditorPaneProps {
+  entityType: string
+  entityId: string
+  onClose: () => void
+  /** Called after a successful save so the list can refetch. */
+  onSaved?: () => void
+}
+
+export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEditorPaneProps) {
+  const [record, setRecord] = useState<SeoContentRecord | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [aiBusy, setAiBusy] = useState<AiField | null>(null)
+  const [aiFixBusy, setAiFixBusy] = useState<AiField | null>(null)
+  const [aiAlignments, setAiAlignments] = useState<
+    Partial<Record<AiField, BrandAlignmentScoreResult>>
+  >({})
+  const [form, setForm] = useState<SeoFieldPayload>({})
+
+  useEffect(() => {
+    let alive = true
+    setLoading(true)
+    setError(null)
+    fetchSeoContentRecord(entityType, entityId)
+      .then((rec) => {
+        if (!alive) return
+        if (!rec) {
+          setError('Could not load this record.')
+          return
+        }
+        setRecord(rec)
+        setForm({
+          metaTitle: rec.metaTitle ?? '',
+          metaDescription: rec.metaDescription ?? '',
+          canonicalUrl: rec.canonicalUrl ?? '',
+          focusKeyword: rec.focusKeyword ?? '',
+          keyTakeaway: rec.keyTakeaway ?? '',
+          ogTitle: rec.ogTitle ?? '',
+          ogDescription: rec.ogDescription ?? '',
+          structuredDataType: rec.structuredDataType ?? 'WebPage',
+          noindex: rec.noindex,
+          nofollow: rec.nofollow,
+          llmsInclude: rec.llmsInclude ?? 'AUTO',
+          llmsDescription: rec.llmsDescription ?? '',
+          llmsSection: rec.llmsSection ?? '',
+          llmsOptional: rec.llmsOptional ?? false,
+        })
+      })
+      .catch((e: unknown) => alive && setError(e instanceof Error ? e.message : 'Failed to load'))
+      .finally(() => alive && setLoading(false))
+    return () => {
+      alive = false
+    }
+  }, [entityType, entityId])
+
+  const update = (patch: Partial<SeoFieldPayload>) => setForm((f) => ({ ...f, ...patch }))
+
+  async function handleAiGenerate(field: AiField) {
+    setAiBusy(field)
+    try {
+      const result = await generateSeoField(field, { entityType, entityId })
+      if (result.unavailable) {
+        toast.error('AI is not configured. Add an AI provider to enable suggestions.')
+        return
+      }
+      if (result.text) {
+        update({ [field]: result.text } as Partial<SeoFieldPayload>)
+        if (result.brandAlignment) {
+          setAiAlignments((prev) => ({ ...prev, [field]: result.brandAlignment }))
+        }
+        toast.success('AI suggestion applied — review before saving.')
+      } else {
+        toast.error('No suggestion was returned.')
+      }
+    } catch {
+      toast.error('AI request failed.')
+    } finally {
+      setAiBusy(null)
+    }
+  }
+
+  async function handleAiFix(field: AiField) {
+    const text = (form[field as keyof SeoFieldPayload] as string | undefined) ?? ''
+    if (!text.trim()) return
+    setAiFixBusy(field)
+    try {
+      const res = await fixBrandVoiceContent({
+        content: text,
+        channel: seoBrandChannel(field),
+      })
+      if (!res.ok || !res.result) {
+        toast.error(res.error ?? 'Could not fix copy for brand voice.')
+        return
+      }
+      update({ [field]: res.result.text } as Partial<SeoFieldPayload>)
+      setAiAlignments((prev) => ({ ...prev, [field]: res.result!.afterScore }))
+      toast.success('Copy adjusted to match brand voice.')
+    } finally {
+      setAiFixBusy(null)
+    }
+  }
+
+  function alignmentRow(field: AiField) {
+    const alignment = aiAlignments[field]
+    if (!alignment) return null
+    const fixing = aiFixBusy === field
+    return (
+      <div className="mt-2 flex flex-wrap items-center gap-2">
+        <BrandVoiceAlignmentBadge alignment={alignment} compact />
+        {alignment.score < 85 && (
+          <button
+            type="button"
+            onClick={() => void handleAiFix(field)}
+            disabled={fixing || aiBusy !== null}
+            className="inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[11.5px] font-medium text-[var(--acc)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+          >
+            {fixing ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
+            ) : (
+              <Wand2 className="h-3.5 w-3.5" aria-hidden />
+            )}
+            Fix for brand voice
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  async function handleSave() {
+    setSaving(true)
+    const res = await updateSeoFields(entityType, entityId, form)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('SEO fields saved.')
+    onSaved?.()
+  }
+
+  const title = form.metaTitle || record?.title || 'Untitled'
+  const desc = form.metaDescription || 'No meta description set. Search engines may generate one.'
+  const url = record?.url ?? ''
+
+  function aiButton(field: AiField) {
+    return (
+      <button
+        type="button"
+        onClick={() => void handleAiGenerate(field)}
+        disabled={aiBusy !== null}
+        className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-[var(--acc)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+      >
+        <Sparkles className={`h-3 w-3 ${aiBusy === field ? 'animate-pulse' : ''}`} aria-hidden />
+        {aiBusy === field ? 'Generating…' : 'AI Generate'}
+      </button>
+    )
+  }
+
+  return (
+    <>
+      <InspectorPaneHeader onClose={onClose} closeLabel="Close SEO editor">
+        <div className="truncate text-[13.5px] font-semibold text-[var(--txt)]">
+          {record?.title ?? 'Edit SEO'}
+        </div>
+        {url && <div className="mt-0.5 truncate text-[11.5px] text-[var(--muted)]">{url}</div>}
+      </InspectorPaneHeader>
+
+      <InspectorPaneBody>
+        {loading ? (
+          <div className="px-4 py-3.5">
+            <SeoLoading />
+          </div>
+        ) : error ? (
+          <div className="px-4 py-3.5">
+            <SeoErrorState message={error} />
+          </div>
+        ) : record ? (
+          <>
+            <InspectorPaneSection title="Google Preview">
+              <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
+                <p className="truncate text-[11.5px] text-[var(--suc)]">{url}</p>
+                <p className="text-[15px] leading-snug text-[var(--acc)]">{title}</p>
+                <p className="line-clamp-2 text-[12px] text-[var(--sub)]">{desc}</p>
+              </div>
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="Meta Tags">
+              <PaneField
+                label="Meta title"
+                hint={
+                  <span className="flex items-center gap-2">
+                    <CharCount value={form.metaTitle ?? ''} max={META_TITLE_MAX} />
+                    {aiButton('metaTitle')}
+                  </span>
+                }
+              >
+                <input
+                  className={inputCls}
+                  value={form.metaTitle ?? ''}
+                  onChange={(e) => update({ metaTitle: e.target.value })}
+                  placeholder="Page title for search results"
+                />
+              </PaneField>
+              <PaneField
+                label="Meta description"
+                hint={
+                  <span className="flex items-center gap-2">
+                    <CharCount value={form.metaDescription ?? ''} max={META_DESC_MAX} />
+                    {aiButton('metaDescription')}
+                  </span>
+                }
+              >
+                <textarea
+                  className={`${inputCls} min-h-20 resize-y`}
+                  value={form.metaDescription ?? ''}
+                  onChange={(e) => update({ metaDescription: e.target.value })}
+                  placeholder="Short summary shown under the title in search results"
+                />
+              </PaneField>
+              {alignmentRow('metaDescription')}
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="Focus Keyword">
+              <PaneField label="Target keyword" hint={aiButton('focusKeyword')}>
+                <input
+                  className={inputCls}
+                  value={form.focusKeyword ?? ''}
+                  onChange={(e) => update({ focusKeyword: e.target.value })}
+                  placeholder="Primary keyword this page targets"
+                />
+              </PaneField>
+              <PaneField
+                label="Key takeaway"
+                hint={
+                  <span className="flex items-center gap-2">
+                    <CharCount value={form.keyTakeaway ?? ''} max={KEY_TAKEAWAY_MAX} />
+                    {aiButton('keyTakeaway')}
+                  </span>
+                }
+              >
+                <textarea
+                  className={`${inputCls} min-h-16 resize-y`}
+                  value={form.keyTakeaway ?? ''}
+                  onChange={(e) => update({ keyTakeaway: e.target.value })}
+                  placeholder="One or two sentences AI answer engines can quote — what is this page about?"
+                />
+              </PaneField>
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="Open Graph" subtitle="Social sharing">
+              <PaneField label="OG title" hint={aiButton('ogTitle')}>
+                <input
+                  className={inputCls}
+                  value={form.ogTitle ?? ''}
+                  onChange={(e) => update({ ogTitle: e.target.value })}
+                  placeholder={form.metaTitle || 'Title when shared on social media'}
+                />
+              </PaneField>
+              <PaneField label="OG description" hint={aiButton('ogDescription')}>
+                <textarea
+                  className={`${inputCls} min-h-16 resize-y`}
+                  value={form.ogDescription ?? ''}
+                  onChange={(e) => update({ ogDescription: e.target.value })}
+                  placeholder={form.metaDescription || 'Description when shared on social media'}
+                />
+              </PaneField>
+              {alignmentRow('ogDescription')}
+              <div className="mt-3 overflow-hidden rounded-[7px] border border-[var(--bdr)]">
+                {record.ogImage ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={record.ogImage}
+                    alt={`Social preview for ${record.title}`}
+                    className="aspect-[1200/630] w-full bg-[var(--bg)] object-cover"
+                  />
+                ) : (
+                  <div className="flex aspect-[1200/630] w-full items-center justify-center bg-[var(--bg)] text-[12px] text-[var(--muted)]">
+                    No OG image set
+                  </div>
+                )}
+                <div className="p-2.5">
+                  <p className="truncate text-[10.5px] text-[var(--muted)] uppercase">
+                    {url.replace(/^https?:\/\//, '').split('/')[0]}
+                  </p>
+                  <p className="truncate text-[12.5px] font-medium text-[var(--txt)]">
+                    {form.ogTitle || title}
+                  </p>
+                  <p className="line-clamp-1 text-[12px] text-[var(--sub)]">
+                    {form.ogDescription || desc}
+                  </p>
+                </div>
+              </div>
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="Technical SEO">
+              <PaneField label="Canonical URL">
+                <input
+                  className={inputCls}
+                  value={form.canonicalUrl ?? ''}
+                  onChange={(e) => update({ canonicalUrl: e.target.value })}
+                  placeholder={url || 'https://example.com/page'}
+                />
+              </PaneField>
+              {!form.canonicalUrl?.trim() && url ? (
+                <p className="mb-3 text-[11px] text-[var(--muted)]">
+                  Auto-canonical: {record.canonicalUrl ?? url}
+                </p>
+              ) : null}
+              <PaneField label="Schema type">
+                <select
+                  className={inputCls}
+                  value={form.structuredDataType ?? 'WebPage'}
+                  onChange={(e) => update({ structuredDataType: e.target.value })}
+                >
+                  {SEO_SCHEMA_TYPES.map((t) => (
+                    <option key={t} value={t}>
+                      {t}
+                    </option>
+                  ))}
+                </select>
+              </PaneField>
+              <PaneToggleRow
+                label="No-index"
+                hint="Hide this page from search engines"
+                checked={!!form.noindex}
+                onCheckedChange={(v) => update({ noindex: v })}
+              />
+              <PaneToggleRow
+                label="No-follow"
+                hint="Tell crawlers not to follow links on this page"
+                checked={!!form.nofollow}
+                onCheckedChange={(v) => update({ nofollow: v })}
+              />
+            </InspectorPaneSection>
+
+            <InspectorPaneSection title="AI Discovery" subtitle="llms.txt">
+              <p className="mb-3 text-[11px] text-[var(--muted)]">
+                Controls how this page appears in the curated <code>llms.txt</code> guide that AI
+                agents read. It does not affect search ranking.
+              </p>
+              <PaneField label="Include in llms.txt">
+                <select
+                  className={inputCls}
+                  value={form.llmsInclude ?? 'AUTO'}
+                  onChange={(e) => update({ llmsInclude: e.target.value as LlmsInclude })}
+                >
+                  <option value="AUTO">Auto — include when eligible</option>
+                  <option value="ALWAYS">Always — pin it in</option>
+                  <option value="NEVER">Never — exclude</option>
+                </select>
+              </PaneField>
+              <PaneField
+                label="Agent description"
+                hint={<CharCount value={form.llmsDescription ?? ''} max={LLMS_DESC_MAX} />}
+              >
+                <textarea
+                  className={`${inputCls} min-h-16 resize-y`}
+                  value={form.llmsDescription ?? ''}
+                  onChange={(e) => update({ llmsDescription: e.target.value })}
+                  placeholder={
+                    form.keyTakeaway ||
+                    form.metaDescription ||
+                    'One line for an AI agent — what this page covers and why it matters.'
+                  }
+                />
+              </PaneField>
+              <PaneField label="Section">
+                <input
+                  className={inputCls}
+                  value={form.llmsSection ?? ''}
+                  onChange={(e) => update({ llmsSection: e.target.value })}
+                  placeholder="Defaults to the content type"
+                />
+              </PaneField>
+              <PaneToggleRow
+                label="Optional"
+                hint="Group under “Optional” — agents skip these first when context is tight"
+                checked={!!form.llmsOptional}
+                onCheckedChange={(v) => update({ llmsOptional: v })}
+              />
+            </InspectorPaneSection>
+
+            <InspectorPaneSection>
+              {(() => {
+                const meta = gradeMeta(record.seoGrade)
+                return (
+                  <div
+                    className={`flex items-center gap-2 rounded-[7px] px-3 py-2 text-[12.5px] ${meta.bg} ${meta.text}`}
+                  >
+                    <Check className="h-4 w-4 shrink-0" aria-hidden />
+                    <span>
+                      Current SEO score: <span className="font-medium">{record.seoScore}</span> (
+                      {meta.label})
+                    </span>
+                  </div>
+                )
+              })()}
+            </InspectorPaneSection>
+          </>
+        ) : null}
+      </InspectorPaneBody>
+
+      <InspectorPaneFooter>
+        <button
+          type="button"
+          onClick={() => void handleSave()}
+          disabled={saving || loading || !!error}
+          className="w-full rounded-[7px] bg-[var(--acc)] px-3 py-2 text-[13px] font-semibold text-white transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {saving ? 'Saving…' : 'Save Changes'}
+        </button>
+      </InspectorPaneFooter>
+    </>
+  )
+}

package/src/components/ui/InspectorPane.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { X } from 'lucide-react'
+
+/**
+ * Design-system inline split-pane pattern: a list that shrinks while a
+ * fixed-width editor/detail pane slides in beside it (Script Tags 420px,
+ * Entries 400px, Forms 390px, SEO Content 380px in the handoff).
+ *
+ * Compose as:
+ *
+ *   <SplitPaneLayout>
+ *     <SplitPaneList>…table…</SplitPaneList>
+ *     <InspectorPane open={!!selected} width={420} aria-label="Edit script">
+ *       <InspectorPaneHeader onClose={close}>…</InspectorPaneHeader>
+ *       <InspectorPaneBody>…sections…</InspectorPaneBody>
+ *       <InspectorPaneFooter>…save…</InspectorPaneFooter>
+ *     </InspectorPane>
+ *   </SplitPaneLayout>
+ */
+export function SplitPaneLayout({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return <div className={`flex min-h-0 flex-1 overflow-hidden ${className ?? ''}`}>{children}</div>
+}
+
+export function SplitPaneList({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return <div className={`min-w-0 flex-1 overflow-y-auto ${className ?? ''}`}>{children}</div>
+}
+
+export interface InspectorPaneProps {
+  open: boolean
+  /** Outer shell width in px when open (inner card fills it minus 12px gutters). */
+  width: number
+  children: ReactNode
+  'aria-label': string
+}
+
+export function InspectorPane({
+  open,
+  width,
+  children,
+  'aria-label': ariaLabel,
+}: InspectorPaneProps) {
+  return (
+    <div
+      className="shrink-0 overflow-hidden bg-[var(--bg)] motion-safe:transition-[width] motion-safe:duration-200"
+      style={{ width: open ? width : 0 }}
+      aria-hidden={!open}
+    >
+      <div
+        role="region"
+        aria-label={ariaLabel}
+        className="my-3 mr-3 ml-4 flex h-[calc(100%-24px)] flex-col overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--sb)] shadow-[var(--shd2)]"
+        style={{ width: width - 28 }}
+      >
+        {open ? children : null}
+      </div>
+    </div>
+  )
+}
+
+export function InspectorPaneHeader({
+  children,
+  onClose,
+  closeLabel = 'Close panel',
+}: {
+  children: ReactNode
+  onClose: () => void
+  closeLabel?: string
+}) {
+  return (
+    <div className="flex items-start gap-2 border-b border-[var(--bdr)] px-4 py-3.5">
+      <div className="min-w-0 flex-1">{children}</div>
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label={closeLabel}
+        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+      >
+        <X size={16} />
+      </button>
+    </div>
+  )
+}
+
+export function InspectorPaneBody({ children }: { children: ReactNode }) {
+  return <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
+}
+
+/** Bordered section with the design's uppercase 10.5px section title. */
+export function InspectorPaneSection({
+  title,
+  subtitle,
+  children,
+}: {
+  title?: string
+  subtitle?: string
+  children: ReactNode
+}) {
+  return (
+    <div className="border-b border-[var(--bdr)] px-4 py-3.5 last:border-b-0">
+      {title && (
+        <div className="mb-2.5 flex items-baseline gap-2">
+          <span className="text-[10.5px] font-semibold tracking-[0.6px] text-[var(--muted)] uppercase">
+            {title}
+          </span>
+          {subtitle && <span className="text-[11px] text-[var(--muted)]">{subtitle}</span>}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export function InspectorPaneFooter({ children }: { children: ReactNode }) {
+  return <div className="border-t border-[var(--bdr)] px-4 py-3.5">{children}</div>
+}

package/src/components/ui/index.ts

@@ -44,6 +44,16 @@ export { StatPill } from './StatPill.js'
 export type { StatPillProps } from './StatPill.js'
 export { RowActions, RowActionButton } from './RowActions.js'
 export type { RowActionButtonProps } from './RowActions.js'
+export {
+  SplitPaneLayout,
+  SplitPaneList,
+  InspectorPane,
+  InspectorPaneHeader,
+  InspectorPaneBody,
+  InspectorPaneSection,
+  InspectorPaneFooter,
+} from './InspectorPane.js'
+export type { InspectorPaneProps } from './InspectorPane.js'
 export { formControlBase, formControlState } from './form-control.js'
 export { CommandPalette } from './CommandPalette.js'
 export type { CommandPaletteProps } from './CommandPalette.js'