import { __, _n, sprintf } from '@wordpress/i18n'; import React, { useEffect, useMemo, useState } from 'react'; import { api, env } from '../api'; import { Card, Button, Switch, Badge, Notice, Tabs, MetricGrid, PageState } from '../components/ui'; import Identity from '../components/Identity'; import { IconX, IconSpark } from '../components/icons'; import { copyText } from '../copy'; import ScreenVerdict from '../components/ScreenVerdict'; /* ---------------------------------------------------------------- Overview */ /** * The graph exactly as it ships — no view-source, no external validator round * trip to answer "is my structured data actually there?". */ function LiveGraph() { const [data, setData] = useState(null); const [tab, setTab] = useState(0); const [copied, setCopied] = useState(false); useEffect(() => { api.get('/schema/live').then(setData).catch(() => setData({ samples: [], validators: [] })); }, []); if (!data) return {__('Loading…', 'ai-rank-suite')}; if (!data.samples?.length) return null; const sample = data.samples[Math.min(tab, data.samples.length - 1)]; return ( 1 && ( ({ id: String(i), label: s2.label }))} active={String(tab)} onChange={(v) => setTab(Number(v))} /> ) } >
{sample.types.map((t) => ( {t} ))} {sample.issues.length === 0 ? ( ✓ No validation issues ) : ( {sprintf(_n('%d to fix', '%d to fix', sample.issues.length, 'ai-rank-suite'), sample.issues.length)} )}
{sample.issues.length > 0 && (
    {sample.issues.map((i) => (
  • {i}
    • ))}
)}
{data.validators.map((v) => ( {v.label} ↗ ))} 
					{sample.json}

{sample.url}

); } /** * The types worth putting in front of somebody. * * The library holds 77 and hides all of them equally: Article, Product and * Recipe end up as grey chips in the third tab, so a customer looking for * "does this do Product schema" concludes it does not. These twelve are the * ones people come looking for, on the first screen, with the field count and * whether they are already live. */ function RichResults() { const [meta, setMeta] = useState(null); useEffect(() => { api.get('/schema/types').then(setMeta).catch(() => {}); }, []); if (!meta?.featured?.length) return null; return (
{meta.featured.map((f) => { const used = meta.usage?.[f.type] || 0; return (
{/* * Name and status wrap among themselves; the field * count keeps its own column and never breaks. A * single flex row put "12 fields" outside the card * as soon as a translation ran long. */}
{f.label} {f.auto ? ( {__('Automatic', 'ai-rank-suite')} ) : used > 0 ? ( {sprintf( _n('on %d page', 'on %d pages', used, 'ai-rank-suite'), used )} ) : ( {__('Not used yet', 'ai-rank-suite')} )}
{sprintf( _n('%d field', '%d fields', f.fields, 'ai-rank-suite'), f.fields )}

{f.why}

); })}

{__('Add any of them to a single page in', 'ai-rank-suite')}{__('Content → open a page → Schema', 'ai-rank-suite')}, or to a whole post type under {__('Templates', 'ai-rank-suite')}. Every other type lives in the {__('Library', 'ai-rank-suite')} tab.

); } function Overview({ data, setData }) { const [busy, setBusy] = useState(false); const [saved, setSaved] = useState(false); const [error, setError] = useState(null); const s = data.settings; const update = (patch) => setData({ ...data, settings: { ...s, ...patch } }); const save = async () => { setBusy(true); setError(null); try { setData(await api.put('/settings/schema', (({ identity, ...rest }) => rest)(s))); setSaved(true); setTimeout(() => setSaved(false), 2200); } catch (e) { setError(e.message); } finally { setBusy(false); } }; return (
{data.conflict && !s.force_output && ( {data.conflict} already outputs structured data — AI Rank Suite defers automatically to avoid a duplicate graph. )} ✓ Saved} >
update({ enabled: v })} label={__('Output JSON-LD', 'ai-rank-suite')} />
update({ org_name: e.target.value })} />
{data.conflict && ( update({ force_output: v })} label={`Force output although ${data.conflict} is active (advanced)`} /> )}
{error && {error}}

{__('Generate FAQs per page in', 'ai-rank-suite')}{__('Content', 'ai-rank-suite')} → open a page → {__('FAQ', 'ai-rank-suite')}. Saved items appear in the JSON-LD graph and can be rendered anywhere with the{' '} [airanksuite_faq] {' '} shortcode.

); } /* --------------------------------------------------------------- Templates */ const uid = () => `tpl_${Math.random().toString(36).slice(2, 10)}`; /** One template row, expanded for editing. */ function TemplateEditor({ template, meta, onChange, onRemove }) { const fields = meta.types[template.type]?.fields || []; const required = fields.filter((f) => f.required); const recommended = fields.filter((f) => f.recommended && !f.required); const rest = fields.filter((f) => !f.required && !f.recommended); const [showRest, setShowRest] = useState(false); const setData = (key, value) => onChange({ ...template, data: { ...template.data, [key]: value } }); const setCond = (key, value) => onChange({ ...template, conditions: { ...template.conditions, [key]: value } }); const missing = required.filter((f) => !String(template.data[f.key] ?? '').trim()); const scoped = template.conditions.post_types.length > 0 || template.conditions.terms.length > 0 || template.conditions.post_ids.length > 0; const Field = ({ f }) => (
{f.type === 'select' ? ( ) : f.type === 'textarea' ? (