@ampless/admin 1.0.0-alpha.74 → 1.0.0-alpha.76

package/dist/{chunk-ECN2MBJN.js → chunk-6MDPOMKE.js}

@@ -5,6 +5,9 @@ import {
   getMediaProcessingDefaults,
   uploadProcessedImage
 } from "./chunk-DDAGBC4N.js";
+import {
+  getAdminEditorExtensions
+} from "./chunk-WUYJ42LP.js";
 import {
   publicMediaUrl
 } from "./chunk-2ITWLRYF.js";
@@ -165,7 +168,6 @@ import {
   formatDate
 } from "ampless";
 import {
-  renderBody as renderBody2,
   tiptapToHtml,
   tiptapToMarkdown,
   markdownToHtml,
@@ -581,6 +583,7 @@ var EDITOR_STYLES = `
 }
 `;
 function TiptapEditor({ initialContent, onChange, onUserEdit }) {
+  const installed = getAdminEditorExtensions();
   const editor = useEditor({
     extensions: [
       StarterKit,
@@ -594,7 +597,9 @@ function TiptapEditor({ initialContent, onChange, onUserEdit }) {
       TaskItem.configure({ nested: true }),
       Underline2,
       Highlight.configure({ multicolor: false }),
-      TextAlign.configure({ types: ["heading", "paragraph"] })
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ...installed
     ],
     content: initialContent ?? { type: "doc", content: [{ type: "paragraph" }] },
     immediatelyRender: false,
@@ -622,7 +627,6 @@ function TiptapEditor({ initialContent, onChange, onUserEdit }) {
 // src/components/post-history-panel.tsx
 import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
 import { listPostHistory } from "ampless";
-import { renderBody } from "@ampless/runtime";
 import { Button as Button5 } from "@ampless/runtime/ui";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var PAGE_SIZE = 20;
@@ -656,7 +660,11 @@ function revisionAsPost(rev) {
     metadata: rev.metadata
   };
 }
-function PostHistoryPanel({ postId, onRestore }) {
+function PostHistoryPanel({
+  postId,
+  onRestore,
+  previewEndpoint = "/admin/preview"
+}) {
   const t = useT();
   const config = getAdminCmsConfig();
   const timezone = config?.timezone ?? "UTC";
@@ -668,6 +676,29 @@ function PostHistoryPanel({ postId, onRestore }) {
   const [revisions, setRevisions] = useState3([]);
   const [nextToken, setNextToken] = useState3(void 0);
   const [selected, setSelected] = useState3(null);
+  const [previewHtml, setPreviewHtml] = useState3("");
+  const selectedHistoryId = selected?.postHistoryId;
+  const selectedFormat = selected?.format;
+  useEffect3(() => {
+    if (!selected) return;
+    if (selected.format === "static") return;
+    const ctrl = new AbortController();
+    fetch(previewEndpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(revisionAsPost(selected)),
+      signal: ctrl.signal
+    }).then((r) => {
+      if (!r.ok) throw new Error(`preview ${r.status}`);
+      return r.text();
+    }).then((html) => {
+      if (!ctrl.signal.aborted) setPreviewHtml(html);
+    }).catch((err) => {
+      if (ctrl.signal.aborted) return;
+      console.error("[ampless admin] revision preview fetch failed:", err);
+    });
+    return () => ctrl.abort();
+  }, [selectedHistoryId, selectedFormat, previewEndpoint]);
   const loadPage = useCallback(
     async (token) => {
       setLoading(true);
@@ -785,10 +816,12 @@ function PostHistoryPanel({ postId, onRestore }) {
           ] })
         ] }),
         selected.format === "static" ? /* @__PURE__ */ jsx6("p", { className: "rounded-md bg-amber-50 p-2 text-xs text-amber-700 dark:bg-amber-950 dark:text-amber-400", children: t("posts.history.staticCaveat") }) : /* @__PURE__ */ jsx6(
-          "div",
+          "iframe",
           {
-            className: "prose prose-neutral dark:prose-invert max-w-none text-sm",
-            dangerouslySetInnerHTML: { __html: renderBody(revisionAsPost(selected)) }
+            title: "revision-preview",
+            srcDoc: previewHtml,
+            sandbox: "allow-scripts",
+            className: "prose prose-neutral dark:prose-invert max-w-none min-h-[300px] w-full rounded-md border text-sm"
           }
         )
       ] })
@@ -1263,7 +1296,7 @@ function formatDraftTime(epochMs, timezone, locale) {
     return d.toLocaleString();
   }
 }
-function PostForm({ post }) {
+function PostForm({ post, previewEndpoint = "/admin/preview" }) {
   const router = useRouter();
   const t = useT();
   const isEdit = !!post;
@@ -1280,6 +1313,7 @@ function PostForm({ post }) {
   const [saving, setSaving] = useState5(false);
   const [error, setError] = useState5(null);
   const [view, setView] = useState5("edit");
+  const [previewHtml, setPreviewHtml] = useState5("");
   const [editorEpoch, setEditorEpoch] = useState5(0);
   const dirtyRef = useRef3(false);
   function markDirty() {
@@ -1558,6 +1592,42 @@ function PostForm({ post }) {
     publishedAt: resolvedPublishedAt,
     tags: parseTags(tagsInput)
   };
+  useEffect4(() => {
+    if (view !== "preview") return;
+    if (format === "static") return;
+    const ctrl = new AbortController();
+    const tid = window.setTimeout(() => {
+      fetch(previewEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(previewPost),
+        signal: ctrl.signal
+      }).then((r) => {
+        if (!r.ok) throw new Error(`preview ${r.status}`);
+        return r.text();
+      }).then((html) => {
+        if (!ctrl.signal.aborted) setPreviewHtml(html);
+      }).catch((err) => {
+        if (ctrl.signal.aborted) return;
+        console.error("[ampless admin] preview fetch failed:", err);
+      });
+    }, 250);
+    return () => {
+      ctrl.abort();
+      window.clearTimeout(tid);
+    };
+  }, [
+    view,
+    previewEndpoint,
+    format,
+    title,
+    slug,
+    excerpt,
+    body,
+    status,
+    resolvedPublishedAt,
+    tagsInput
+  ]);
   return /* @__PURE__ */ jsxs8("form", { onSubmit: save, className: "space-y-6", children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex gap-1 border-b", children: [
       /* @__PURE__ */ jsx8(
@@ -1591,12 +1661,24 @@ function PostForm({ post }) {
         ] }),
         excerpt && /* @__PURE__ */ jsx8("p", { className: "mt-3 text-base text-muted-foreground", children: excerpt })
       ] }),
-      format === "static" ? /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground", children: t("posts.form.static.previewHint") }) : /* @__PURE__ */ jsx8(
-        "div",
-        {
-          className: "prose prose-neutral dark:prose-invert max-w-none",
-          dangerouslySetInnerHTML: { __html: renderBody2(previewPost) }
-        }
+      format === "static" ? /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground", children: t("posts.form.static.previewHint") }) : (
+        // Phase 7: preview HTML is fetched from the template's
+        // `/admin/preview` Route Handler so `ampless.renderBody`
+        // (async ReactNode) + `ampless.publicPostScriptsForPage(
+        // [draft])` can run server-side. The result is injected
+        // into an iframe with sandbox=`allow-scripts` only (no
+        // `allow-same-origin`) so 3rd-party widget scripts
+        // (YouTube iframes, x.com widgets.js) can hydrate without
+        // crossing the admin's same-origin boundary.
+        /* @__PURE__ */ jsx8(
+          "iframe",
+          {
+            title: "post-preview",
+            srcDoc: previewHtml,
+            sandbox: "allow-scripts",
+            className: "prose prose-neutral dark:prose-invert max-w-none min-h-[400px] w-full rounded-md border"
+          }
+        )
       ),
       previewPost.tags && previewPost.tags.length > 0 && /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap gap-2 border-t pt-4 text-sm", children: previewPost.tags.map((tag) => /* @__PURE__ */ jsxs8(
         "span",
@@ -1821,7 +1903,14 @@ function PostForm({ post }) {
         /* @__PURE__ */ jsx8(Button7, { type: "submit", disabled: saving, children: saving ? t("common.saving") : isEdit ? t("posts.form.saveChanges") : t("posts.form.createPost") }),
         isEdit && /* @__PURE__ */ jsx8(Button7, { type: "button", variant: "destructive", onClick: handleDelete, disabled: saving, children: t("posts.form.delete") })
       ] }),
-      isEdit && post && /* @__PURE__ */ jsx8(PostHistoryPanel, { postId: post.postId, onRestore: restoreRevision })
+      isEdit && post && /* @__PURE__ */ jsx8(
+        PostHistoryPanel,
+        {
+          postId: post.postId,
+          onRestore: restoreRevision,
+          previewEndpoint
+        }
+      )
     ] })
   ] });
 }

package/dist/{chunk-O7VJHAYM.js → chunk-IJVACP4G.js}

@@ -4,16 +4,16 @@ import {
 } from "./chunk-D72XF3Q3.js";
 import {
   clearAllDrafts
-} from "./chunk-ECN2MBJN.js";
-import {
-  setMcpTokenStore
-} from "./chunk-C7G5AQ3L.js";
+} from "./chunk-6MDPOMKE.js";
 import {
   setAdminCmsConfigClient
 } from "./chunk-DDAGBC4N.js";
 import {
   setAdminMediaContext
 } from "./chunk-2ITWLRYF.js";
+import {
+  setMcpTokenStore
+} from "./chunk-C7G5AQ3L.js";
 import {
   useLocale,
   useT

package/dist/{chunk-GNTGWI43.js → chunk-JUNHTZDL.js}

@@ -1,18 +1,18 @@
 'use client';
 import {
   PostForm
-} from "./chunk-ECN2MBJN.js";
+} from "./chunk-6MDPOMKE.js";
 import {
   useT
 } from "./chunk-DUSEHGSV.js";
 
 // src/components/new-post-view.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function NewPostPage() {
+function NewPostPage({ previewEndpoint }) {
   const t = useT();
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl p-4 md:p-8", children: [
     /* @__PURE__ */ jsx("h1", { className: "mb-6 text-2xl font-bold md:mb-8 md:text-3xl", children: t("posts.form.newTitle") }),
-    /* @__PURE__ */ jsx(PostForm, {})
+    /* @__PURE__ */ jsx(PostForm, { previewEndpoint })
   ] });
 }
 

package/dist/chunk-WUYJ42LP.js

@@ -0,0 +1,28 @@
+'use client';
+// src/editor/admin-editor-extensions.ts
+var extensions = [];
+var installed = false;
+function installAdminEditorExtensions(list) {
+  if (installed) return;
+  const seen = /* @__PURE__ */ new Set();
+  for (const ext of list) {
+    const n = typeof ext.name === "string" ? ext.name : "";
+    if (!n) continue;
+    if (seen.has(n)) {
+      throw new Error(
+        `[ampless admin editor] duplicate tiptap extension name "${n}" in installAdminEditorExtensions(). Each extension may be registered at most once.`
+      );
+    }
+    seen.add(n);
+  }
+  extensions = list;
+  installed = true;
+}
+function getAdminEditorExtensions() {
+  return extensions;
+}
+
+export {
+  installAdminEditorExtensions,
+  getAdminEditorExtensions
+};

package/dist/{chunk-7ATGSNSZ.js → chunk-WXUHQNZB.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   PostForm
-} from "./chunk-ECN2MBJN.js";
+} from "./chunk-6MDPOMKE.js";
 import {
   useT
 } from "./chunk-DUSEHGSV.js";
@@ -11,7 +11,7 @@ import { useEffect, useState, use } from "react";
 import { notFound } from "next/navigation";
 import { getPostById } from "ampless";
 import { jsx, jsxs } from "react/jsx-runtime";
-function EditPostPage({ params }) {
+function EditPostPage({ params, previewEndpoint }) {
   const t = useT();
   const { postId } = use(params);
   const [post, setPost] = useState(null);
@@ -28,7 +28,7 @@ function EditPostPage({ params }) {
   if (missing) notFound();
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl p-4 md:p-8", children: [
     /* @__PURE__ */ jsx("h1", { className: "mb-6 text-2xl font-bold md:mb-8 md:text-3xl", children: t("posts.form.editTitle") }),
-    post && /* @__PURE__ */ jsx(PostForm, { post })
+    post && /* @__PURE__ */ jsx(PostForm, { post, previewEndpoint })
   ] });
 }
 

package/dist/components/edit-post-view.d.ts

@@ -1,9 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function EditPostPage({ params }: {
+interface EditPostPageProps {
     params: Promise<{
         postId: string;
     }>;
-}): react_jsx_runtime.JSX.Element;
+    /**
+     * Endpoint that `<PostForm>` / `<PostHistoryPanel>` POST the draft to
+     * for preview HTML. Threaded down from `createEditPostPage`. Defaults
+     * to `/admin/preview` inside `<PostForm>` when omitted.
+     */
+    previewEndpoint?: string;
+}
+declare function EditPostPage({ params, previewEndpoint }: EditPostPageProps): react_jsx_runtime.JSX.Element;
 
 export { EditPostPage };

package/dist/components/edit-post-view.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   EditPostPage
-} from "../chunk-7ATGSNSZ.js";
-import "../chunk-ECN2MBJN.js";
+} from "../chunk-WXUHQNZB.js";
+import "../chunk-6MDPOMKE.js";
 import "../chunk-DDAGBC4N.js";
+import "../chunk-WUYJ42LP.js";
 import "../chunk-2ITWLRYF.js";
 import "../chunk-DUSEHGSV.js";
 import "../chunk-7TAT4AHW.js";

package/dist/components/index.d.ts

@@ -99,8 +99,22 @@ declare function Sidebar({ email, isAdmin, }: {
 
 interface PostFormProps {
     post?: Post;
+    /**
+     * Phase 7: endpoint that the form POSTs the in-flight draft to for
+     * server-rendered preview HTML (body + page-level scripts). Defaults
+     * to `/admin/preview`, the Route Handler shipped by the template
+     * scaffold at `app/(admin)/admin/preview/route.tsx`. The factory
+     * (`createEditPostPage` / `createNewPostPage`) exposes a
+     * `previewEndpoint?: string` option that threads down to here for
+     * non-default admin mount paths (e.g. Next.js `basePath`).
+     *
+     * The resulting HTML is shown in an `<iframe srcDoc>` (sandbox =
+     * `allow-scripts` only) so YouTube iframes / x.com `widgets.js` can
+     * hydrate without crossing the admin's same-origin boundary.
+     */
+    previewEndpoint?: string;
 }
-declare function PostForm({ post }: PostFormProps): react_jsx_runtime.JSX.Element;
+declare function PostForm({ post, previewEndpoint }: PostFormProps): react_jsx_runtime.JSX.Element;
 
 interface SiteSettingsFormValues {
     'site.name'?: string;

package/dist/components/index.js

@@ -4,27 +4,28 @@ import {
   Sidebar,
   SiteSettingsForm,
   ThemeSettingsForm
-} from "../chunk-O7VJHAYM.js";
+} from "../chunk-IJVACP4G.js";
+import {
+  MediaUploader
+} from "../chunk-DSCNWIBN.js";
 import {
   invalidateSiteSettingsCache
 } from "../chunk-D72XF3Q3.js";
 import {
   MediaPicker,
   PostForm
-} from "../chunk-ECN2MBJN.js";
-import "../chunk-C7G5AQ3L.js";
-import {
-  MediaUploader
-} from "../chunk-DSCNWIBN.js";
+} from "../chunk-6MDPOMKE.js";
 import {
   ImageUploadDialog,
   sanitizeName,
   uploadProcessedImage
 } from "../chunk-DDAGBC4N.js";
+import "../chunk-WUYJ42LP.js";
 import {
   publicMediaUrl,
   setAdminMediaContext
 } from "../chunk-2ITWLRYF.js";
+import "../chunk-C7G5AQ3L.js";
 import {
   I18nProvider,
   useLocale,

package/dist/components/new-post-view.d.ts

@@ -1,5 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function NewPostPage(): react_jsx_runtime.JSX.Element;
+interface NewPostPageProps {
+    /**
+     * Endpoint that `<PostForm>` POSTs the draft to for preview HTML.
+     * Threaded down from `createNewPostPage`. Defaults to `/admin/preview`
+     * inside `<PostForm>` when omitted.
+     */
+    previewEndpoint?: string;
+}
+declare function NewPostPage({ previewEndpoint }: NewPostPageProps): react_jsx_runtime.JSX.Element;
 
 export { NewPostPage };

package/dist/components/new-post-view.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   NewPostPage
-} from "../chunk-GNTGWI43.js";
-import "../chunk-ECN2MBJN.js";
+} from "../chunk-JUNHTZDL.js";
+import "../chunk-6MDPOMKE.js";
 import "../chunk-DDAGBC4N.js";
+import "../chunk-WUYJ42LP.js";
 import "../chunk-2ITWLRYF.js";
 import "../chunk-DUSEHGSV.js";
 import "../chunk-7TAT4AHW.js";

package/dist/editor.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Structural type for a tiptap extension instance. The admin can't
+ * import `@tiptap/core` here (the package is a peerDep of admin and
+ * not all consumers have it installed), so we accept anything with a
+ * `name` string and pass it through to <TiptapEditor>'s
+ * `useEditor({ extensions: [...] })` array spread.
+ */
+interface TiptapExtensionLike {
+    readonly name?: string;
+    readonly [key: string]: unknown;
+}
+/**
+ * Register a list of tiptap extensions to be appended to the admin's
+ * built-in extension list. Idempotent — subsequent calls are ignored
+ * so multiple `EditorBootstrap` renders (e.g. layout re-mounts)
+ * don't replace the registry with a stale empty array.
+ *
+ * Calling with a list whose entries have duplicate `name` fields
+ * (within the call) throws — same extension can't register twice.
+ */
+declare function installAdminEditorExtensions(list: readonly TiptapExtensionLike[]): void;
+/**
+ * Read the currently installed extensions. <TiptapEditor> calls this
+ * at render time and spreads the result onto its built-in extension
+ * list. The list is intentionally readonly — consumers should not
+ * mutate it in place.
+ */
+declare function getAdminEditorExtensions(): readonly TiptapExtensionLike[];
+
+export { type TiptapExtensionLike, getAdminEditorExtensions, installAdminEditorExtensions };

package/dist/editor.js

@@ -0,0 +1,9 @@
+'use client';
+import {
+  getAdminEditorExtensions,
+  installAdminEditorExtensions
+} from "./chunk-WUYJ42LP.js";
+export {
+  getAdminEditorExtensions,
+  installAdminEditorExtensions
+};

package/dist/index.d.ts

@@ -82,6 +82,18 @@ interface Admin {
      * the `ampless` opt — throws if it wasn't supplied.
      */
     getMediaBySrc(src: string): Promise<ResolvedMedia | null>;
+    /**
+     * Async accessor for the underlying `Ampless` runtime instance.
+     * Resolves the thunk form (the canonical scaffold shape) and caches
+     * the result, so multiple callers within one request share the same
+     * instance. Throws when `createAdmin` was called without the
+     * `ampless` option — same error as the other passthroughs.
+     *
+     * Template-side Route Handlers (e.g. `preview/route.tsx`) use this
+     * to obtain the runtime without depending on the thunk/eager dual
+     * form of `admin.ampless`.
+     */
+    getAmpless(): Promise<Ampless>;
     readonly outputs: AmplessOutputs;
     readonly cmsConfig: Config;
     readonly ampless: Ampless | null;

package/dist/index.js

@@ -91,6 +91,7 @@ function createAdmin(opts) {
     },
     publicMediaUrl: media.publicMediaUrl,
     getMediaBySrc: async (src) => (await resolveAmpless()).getMediaBySrc(src),
+    getAmpless: () => resolveAmpless(),
     outputs,
     cmsConfig,
     ampless: eagerAmpless