@acms-subir/core 0.3.3-next.20260929113209 → 0.3.3

package/src/components/editor/PostEditor.tsx

@@ -7,7 +7,8 @@ import Highlight from '@tiptap/extension-highlight';
 import { TableKit } from '@tiptap/extension-table';
 import { Placeholder, CharacterCount } from '@tiptap/extensions';
 import { actions } from 'astro:actions';
-import type { CalEvent, Page, Post, Status } from '../../lib/schema';
+import type { CalEvent, DocTranslations, Page, Post, Status } from '../../lib/schema';
+import { textHash } from '../../theme-sdk/fields.mjs';
 import { ImageCard, EmbedCard, ButtonCard, Callout, HtmlCard, detectEmbed } from './extensions/cards';
 import { FileCard, GalleryCard, BookmarkCard } from './extensions/mediaCards';
 import { CodeBlock } from './extensions/codeBlock';
@@ -62,6 +63,10 @@ interface Props {
   templates?: string[];
   // public identity for the Search / Social preview tabs
   site?: { title: string; url: string };
+  // extra site languages (acms({ i18n })) and whether AI drafts are available
+  languages?: { code: string; name: string }[];
+  mainLanguage?: { code: string; name: string };
+  translationDrafts?: boolean;
 }
 
 interface Meta extends EventMeta {
@@ -136,13 +141,17 @@ function joinBrokenTableRows(text: string): string {
   return out.join('\n');
 }
 
+type TrField = 'title' | 'excerpt' | 'bodyHtml' | 'seoTitle' | 'seoDesc' | 'locationName' | 'ctaLabel';
+const emptyTr = () => ({ title: '', excerpt: '', bodyHtml: '', seoTitle: '', seoDesc: '', slug: '', locationName: '', ctaLabel: '', meta: {} as Record<string, { state: 'ai' | 'reviewed'; src: string }> });
+const TR_STATE: Record<string, string> = { missing: 'not translated', ai: 'AI draft', reviewed: 'reviewed', outdated: 'English changed' };
+
 const NO_EVENT: EventMeta = {
   start: '', end: '', allDay: false, timezone: '', rrule: '', exdates: [], cancelled: false,
   location: { name: '', address: '', url: '' }, cta: { label: '', href: '', style: 'primary' }, calendarIds: [], fields: {},
   rsvp: { enabled: false, capacity: 0, autoConfirm: true, maxSeats: 4 },
 };
 
-export default function PostEditor({ kind = 'post', post, page, event, calendars = [], eventFields = [], siteTimezone = '', initialHTML, unsplashEnabled, previewPath, sharePath, livePath: livePathProp, templates = [], site = { title: '', url: '' } }: Props) {
+export default function PostEditor({ kind = 'post', post, page, event, calendars = [], eventFields = [], siteTimezone = '', initialHTML, unsplashEnabled, previewPath, sharePath, livePath: livePathProp, templates = [], site = { title: '', url: '' }, languages = [], mainLanguage, translationDrafts = false }: Props) {
   const doc = (kind === 'page' ? page : kind === 'event' ? event : post)!;
   // posts and events share the feature image, excerpt, tags and "featured"
   const postLike = kind !== 'page';
@@ -230,6 +239,21 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
   };
   // excerpt line under the title: shown when it has text or was asked for
   const [excerptOpen, setExcerptOpen] = useState(false);
+
+  // ---- translations: the same document's words in another language ----
+  // Spanish (etc.) lives in `translations[lang]`; switching language swaps
+  // the editor body, the rest (dates, cover, tags…) stays shared.
+  const [trs, setTrs] = useState<DocTranslations>(() => ((doc as { translations?: DocTranslations }).translations ?? {}) as DocTranslations);
+  const trsRef = useRef(trs);
+  trsRef.current = trs;
+  const [lang, setLangState] = useState('');
+  const langRef = useRef('');
+  const mainBody = useRef<{ html: string; json: unknown } | null>(null);
+  const trBodyDirty = useRef(false);
+  const [trBusy, setTrBusy] = useState(false);
+  const [trMsg, setTrMsg] = useState('');
+  const mainLangName = mainLanguage?.name || 'English';
+  const mainLangShort = (mainLanguage?.code || 'en').toUpperCase();
   // sidebar: reveal the date input for drafts that have no date yet
   const [dateOpen, setDateOpen] = useState(false);
   // which Preview tab opens (the sidebar's search card jumps to Search)
@@ -322,7 +346,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         return false;
       },
     },
-    onUpdate: () => queueSave(),
+    onUpdate: () => { if (langRef.current) trBodyDirty.current = true; queueSave(); },
     onSelectionUpdate: ({ editor: ed }) => {
       // the top-level block holding the caret; the live pane scrolls to it.
       // Debounced and split-only so typing doesn't re-render the editor.
@@ -344,8 +368,18 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
     if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
     const m = { ...metaRef.current, ...overrides };
     setSave('saving');
-    const bodyJson = JSON.stringify(ed.getJSON());
-    const bodyHtml = ed.getHTML();
+    // in another language the editor holds that language's body: store it as
+    // the translation and keep sending the main-language body unchanged
+    if (langRef.current && trBodyDirty.current) {
+      trBodyDirty.current = false;
+      const l = langRef.current;
+      const cur = trsRef.current[l] ?? emptyTr();
+      trsRef.current = { ...trsRef.current, [l]: { ...cur, bodyHtml: ed.isEmpty ? '' : ed.getHTML(), meta: { ...cur.meta, bodyHtml: { state: 'reviewed', src: textHash(mainBody.current?.html ?? '') } } } };
+      setTrs(trsRef.current);
+    }
+    const bodyJson = langRef.current && mainBody.current ? JSON.stringify(mainBody.current.json) : JSON.stringify(ed.getJSON());
+    const bodyHtml = langRef.current && mainBody.current ? mainBody.current.html : ed.getHTML();
+    const translations = languages.length ? trsRef.current : undefined;
     if (kind === 'event') {
       const r = await actions.events.save({
         id: docId,
@@ -375,6 +409,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         fields: m.fields,
         rsvp: m.rsvp,
         scheduledAt: m.scheduledAt,
+        translations,
       });
       if (r.error) {
         setSave('error');
@@ -403,6 +438,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         status: m.status,
         isHome: m.isHome,
         locale: m.locale,
+        translations,
       });
       if (r.error) {
         setSave('error');
@@ -437,6 +473,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         template: m.template,
         publishedAt: m.publishedAt,
         scheduledAt: m.scheduledAt,
+        translations,
       });
       if (r.error) {
         setSave('error');
@@ -463,6 +500,92 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
     saveTimer.current = setTimeout(() => save(), 1200);
   }, [save]);
 
+  // the main-language text a translated field is made from
+  const mainValue = (f: TrField): string => {
+    const m = metaRef.current;
+    switch (f) {
+      case 'title': return m.title;
+      case 'excerpt': return postLike ? m.excerpt : '';
+      case 'seoTitle': return m.seoTitle;
+      case 'seoDesc': return m.seoDesc;
+      case 'locationName': return kind === 'event' ? m.location.name : '';
+      case 'ctaLabel': return kind === 'event' ? m.cta.label : '';
+      default: return langRef.current && mainBody.current ? mainBody.current.html : (editorRef.current?.isEmpty ? '' : editorRef.current?.getHTML() ?? '');
+    }
+  };
+  const trFields = (): TrField[] => ['title', ...(postLike ? ['excerpt' as const] : []), 'bodyHtml', 'seoTitle', 'seoDesc', ...(kind === 'event' ? ['locationName' as const, 'ctaLabel' as const] : [])];
+  const trStatus = (l: string, f: TrField) => {
+    const src = mainValue(f);
+    if (!src.trim()) return 'n/a';
+    const t = trsRef.current[l];
+    const v = t?.[f] ?? '';
+    if (!String(v).trim()) return 'missing';
+    const meta = t?.meta?.[f];
+    if (meta && meta.src !== textHash(src)) return 'outdated';
+    return meta?.state === 'reviewed' ? 'reviewed' : 'ai';
+  };
+  const setTr = (f: TrField, value: string, state: 'ai' | 'reviewed' = 'reviewed') => {
+    const l = langRef.current;
+    if (!l) return;
+    const cur = trsRef.current[l] ?? emptyTr();
+    trsRef.current = { ...trsRef.current, [l]: { ...cur, [f]: value, meta: { ...cur.meta, [f]: { state, src: textHash(mainValue(f)) } } } };
+    setTrs(trsRef.current);
+    queueSave();
+  };
+  // switch the editor between the main language and a translation
+  const switchLang = async (next: string) => {
+    const ed = editorRef.current;
+    if (!ed || next === langRef.current) return;
+    await save();
+    if (!langRef.current) mainBody.current = { html: ed.getHTML(), json: ed.getJSON() };
+    const html = next ? (trsRef.current[next]?.bodyHtml ?? '') : (mainBody.current?.html ?? '');
+    langRef.current = next;
+    setLangState(next);
+    trBodyDirty.current = false;
+    ed.commands.setContent(html, { emitUpdate: false });
+    if (!next) mainBody.current = null;
+    setTrMsg('');
+  };
+  // machine drafts for every field still missing or with changed English
+  const translateAll = async (includeReviewed = false) => {
+    const l = langRef.current;
+    if (!l) return;
+    const fields = trFields().filter((f) => { const st = trStatus(l, f); return st === 'missing' || (st === 'outdated' && (includeReviewed || trsRef.current[l]?.meta?.[f]?.state !== 'reviewed')) || (includeReviewed && st === 'ai'); });
+    if (!fields.length) { setTrMsg('Everything is already translated.'); return; }
+    setTrBusy(true); setTrMsg('');
+    try {
+      const res = await fetch('/api/design/translate', {
+        method: 'POST', headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ locale: l, units: fields.map((f) => ({ id: f, text: mainValue(f), kind: f === 'bodyHtml' ? 'richtext' : f === 'excerpt' || f === 'seoDesc' ? 'textarea' : 'text', label: f })) }),
+      });
+      const body = await res.json().catch(() => ({})) as { results?: Record<string, string>; error?: string };
+      if (!res.ok) { setTrMsg(body.error || `Translation failed (${res.status}).`); return; }
+      const results = body.results ?? {};
+      const cur = trsRef.current[l] ?? emptyTr();
+      const next = { ...cur, meta: { ...cur.meta } } as typeof cur;
+      for (const f of fields) {
+        if (results[f] === undefined) continue;
+        (next as Record<string, unknown>)[f] = results[f];
+        next.meta[f] = { state: 'ai', src: textHash(mainValue(f)) };
+      }
+      trsRef.current = { ...trsRef.current, [l]: next };
+      setTrs(trsRef.current);
+      if (results.bodyHtml !== undefined && langRef.current === l) { editorRef.current?.commands.setContent(results.bodyHtml, { emitUpdate: false }); trBodyDirty.current = false; }
+      setTrMsg(`Translated ${Object.keys(results).length} ${Object.keys(results).length === 1 ? 'part' : 'parts'} as AI drafts. Check them, then mark them right.`);
+      queueSave();
+    } catch { setTrMsg('Couldn’t reach the server.'); } finally { setTrBusy(false); }
+  };
+  const confirmAll = () => {
+    const l = langRef.current;
+    if (!l) return;
+    const cur = trsRef.current[l] ?? emptyTr();
+    const meta = { ...cur.meta };
+    for (const f of trFields()) if (String(cur[f] ?? '').trim() && mainValue(f).trim()) meta[f] = { state: 'reviewed', src: textHash(mainValue(f)) };
+    trsRef.current = { ...trsRef.current, [l]: { ...cur, meta } };
+    setTrs(trsRef.current);
+    queueSave();
+  };
+
   const setMeta = useCallback((patch: Partial<Meta>) => {
     setMetaState((prev) => {
       const next = { ...prev, ...patch };
@@ -808,6 +931,17 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
             Preview
           </button>
         </div>
+        {languages.length > 0 && (
+          <div className="pe-seg pe-langs" role="radiogroup" aria-label="Language">
+            <button type="button" role="radio" aria-checked={!lang} onClick={() => void switchLang('')}>{mainLangShort}</button>
+            {languages.map((l) => (
+              <button key={l.code} type="button" role="radio" aria-checked={lang === l.code} title={`${l.name} version`} onClick={() => void switchLang(l.code)}>
+                {l.code.toUpperCase()}
+                {trFields().some((f) => ['missing', 'outdated'].includes(trStatus(l.code, f))) && <i className="pe-lang-dot" aria-label="needs translation" />}
+              </button>
+            ))}
+          </div>
+        )}
         <div className="pe-topbar-right">
           <div className="pe-publish-wrap">
             <button type="button" className="pe-btn primary sm" onClick={() => setPublishOpen((v) => !v)}>
@@ -973,7 +1107,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
                     Feature image
                   </button>
                 )}
-                {!meta.excerpt && !excerptOpen && (
+                {!meta.excerpt && !excerptOpen && !lang && (
                   <button type="button" title="A short teaser under the title, on post cards and in link previews" onClick={() => setExcerptOpen(true)}>
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M4 7h16M4 12h10M4 17h7" /></svg>
                     Excerpt
@@ -982,6 +1116,36 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
               </div>
             )}
 
+            {lang && (() => {
+              const name = languages.find((l) => l.code === lang)?.name ?? lang;
+              const statuses = trFields().map((f) => [f, trStatus(lang, f)] as const).filter(([, st]) => st !== 'n/a');
+              const label: Record<TrField, string> = { title: 'Title', excerpt: 'Excerpt', bodyHtml: 'Body', seoTitle: 'Search title', seoDesc: 'Search description', locationName: 'Place name', ctaLabel: 'Button text' };
+              const t = trs[lang] ?? emptyTr();
+              return (
+                <section className="pe-trpanel" aria-label={`${name} version`}>
+                  <div className="pe-tr-head">
+                    <b>{name} version</b>
+                    <span className="pe-tr-states">{statuses.map(([f, st]) => <span key={f} className={`is-${st}`}>{label[f]}: {TR_STATE[st]}</span>)}</span>
+                  </div>
+                  <p className="pe-tr-note">You're editing the {name} words. Dates, photos, tags and links are shared with {mainLangName}. Anything left empty shows in {mainLangName}.</p>
+                  <div className="pe-tr-fields">
+                    {postLike && <label>Excerpt<textarea rows={2} value={t.excerpt} placeholder={meta.excerpt} onChange={(e) => setTr('excerpt', e.target.value)} /></label>}
+                    <label>Search title<input value={t.seoTitle} placeholder={meta.seoTitle || meta.title} onChange={(e) => setTr('seoTitle', e.target.value)} /></label>
+                    <label>Search description<textarea rows={2} value={t.seoDesc} placeholder={meta.seoDesc} onChange={(e) => setTr('seoDesc', e.target.value)} /></label>
+                    {kind === 'event' && <label>Place name<input value={t.locationName} placeholder={meta.location.name} onChange={(e) => setTr('locationName', e.target.value)} /></label>}
+                    {kind === 'event' && <label>Button text<input value={t.ctaLabel} placeholder={meta.cta.label} onChange={(e) => setTr('ctaLabel', e.target.value)} /></label>}
+                  </div>
+                  <div className="pe-tr-actions">
+                    {translationDrafts && <button type="button" className="pe-btn sm" disabled={trBusy} onClick={() => void translateAll()}>{trBusy ? 'Translating…' : `Translate the rest with AI`}</button>}
+                    {statuses.some(([, st]) => st === 'ai' || st === 'outdated') && <button type="button" className="pe-btn ghost sm" onClick={confirmAll}>✓ Looks right</button>}
+                    {!translationDrafts && <span className="pe-tr-msg">Turn on AI in Settings → AI &amp; agents and the {name} can draft itself.</span>}
+                    <button type="button" className="pe-btn ghost sm" onClick={() => void switchLang('')}>Back to {mainLangName}</button>
+                    {trMsg && <span className="pe-tr-msg" role="status">{trMsg}</span>}
+                  </div>
+                </section>
+              );
+            })()}
+
             <textarea
               className="pe-title"
               rows={1}
@@ -989,19 +1153,19 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
                 // grow to fit on mount and on narrow screens, not just while typing
                 if (el) { el.style.height = 'auto'; el.style.height = `${el.scrollHeight}px`; }
               }}
-              placeholder={kind === 'page' ? 'Page title' : `${col.singular} title`}
-              value={meta.title}
+              placeholder={lang ? meta.title || 'Title' : kind === 'page' ? 'Page title' : `${col.singular} title`}
+              value={lang ? (trs[lang]?.title ?? '') : meta.title}
               onChange={(e) => {
                 e.target.style.height = 'auto';
                 e.target.style.height = `${e.target.scrollHeight}px`;
-                setMeta({ title: e.target.value });
+                if (langRef.current) setTr('title', e.target.value); else setMeta({ title: e.target.value });
               }}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') { e.preventDefault(); editor?.commands.focus('start'); }
               }}
             />
 
-            {postLike && (meta.excerpt || excerptOpen) && (
+            {postLike && !lang && (meta.excerpt || excerptOpen) && (
               <textarea
                 className="pe-excerpt"
                 rows={1}

package/src/components/import/ImportExport.tsx

@@ -13,7 +13,7 @@ interface Plan {
 }
 interface Run { id: string; source: string; label: string; status: 'running' | 'done' | 'undone'; report: Report; createdAt: number }
 interface Report {
-  counts?: { posts: { created: number; updated: number }; pages: { created: number; updated: number }; users: number; tags: number; media: number; redirects: number; nav: number };
+  counts?: { posts: { created: number; updated: number }; pages: { created: number; updated: number }; users: number; tags: number; media: number; redirects: number; nav: number; layouts?: number };
   settings?: string[];
   warnings?: { item: string; code: string; message: string }[];
   failedAssets?: { url: string; error: string }[];
@@ -336,6 +336,9 @@ function Done({ report, reset, openHistory }: { report: Report; reset: () => voi
           {report.settings?.length ? ' · site identity updated' : ''}
         </p>
       )}
+      {!!c?.layouts && (
+        <p className="imp-mark ok">{plural(c.layouts, 'page layout')} staged in the design draft · <a href="/admin/design#review">Review and publish</a></p>
+      )}
       {!!report.failedAssets?.length && (
         <>
           <p className="imp-mark warn">{plural(report.failedAssets.length, 'file')} couldn’t be copied and still point at the old site</p>

package/src/components/import/runner.ts

@@ -268,6 +268,7 @@ export async function runImport(
     nav: bundle.nav.map((n) => ({ ...n, url: fix(n.url) })),
     legacy: bundle.items.filter((i) => i.legacyPath).map((i) => ({ sourceId: i.sourceId, type: i.type, path: i.legacyPath })),
     redirects: bundle.redirects,
+    layouts: bundle.layouts ?? [],
     warnings: bundle.warnings,
     failedAssets,
   });