@alpaca-headless/alpaca-headless-nextjs 1.0.281 → 1.0.527

package/dist/EditorIntegration.d.ts

@@ -0,0 +1,6 @@
+export type EditorIntegrationProps = {
+    timings?: {
+        [key: string]: number;
+    };
+};
+export declare function EditorIntegration(props: EditorIntegrationProps): import("react/jsx-runtime").JSX.Element;

package/dist/EditorIntegration.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EditorIntegrationClient } from "./EditorIntegrationClient";
+export function EditorIntegration(props) {
+    return _jsx(EditorIntegrationClient, Object.assign({}, props));
+}

package/dist/EditorIntegrationClient.d.ts

@@ -0,0 +1,9 @@
+export declare function EditorIntegrationClient({ timings, }: {
+    timings?: {
+        [key: string]: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export type ComponentSelectedEvent = {
+    type: "componentSelected";
+    componentIds: string[];
+};

package/dist/EditorIntegrationClient.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import useExposeRefreshFunction from "./useExposeRefreshFunction";
+export function EditorIntegrationClient({ timings, }) {
+    useExposeRefreshFunction();
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.ctrlKey && event.key === "F11") {
+                event.preventDefault();
+                window.parent.postMessage({ type: "editor-exitFullscreen" }, "*");
+            }
+            if (event.key === "F2") {
+                event.preventDefault();
+                window.parent.postMessage({ type: "editor-keyDown", key: "F2" }, "*");
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.parent.postMessage({ type: "editor-timings", timings }, "*");
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx("style", { children: `
+        .a-editor-mce {
+          display:flex;
+          gap: 10px;
+          padding: 30px;
+          background-color: #f5f5f5;
+          flex-wrap: wrap;          
+          align-items: center;
+        }
+        .a-editor-mce-thumbnail {                   
+          display:grid;
+          padding: 10px;
+          place-items: center;     
+          overflow: hidden;     
+        }
+         .a-editor-mce-thumbnail--selected {
+          box-shadow: 0 0 3px 3px rgb(75 89 255 / 50%);
+         }
+         .a-editor-mce-thumbnail:hover {
+          box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
+        }
+        [contentEditable]:empty:before {
+          content: attr(placeholder);
+          opacity: 0.6;
+        }
+
+        [contenteditable] {
+          outline: 0px solid transparent;
+        }
+      ` }) }));
+}

package/dist/client-components/MultiComponentEditor.d.ts

@@ -0,0 +1,12 @@
+import { ComponentData } from "@alpaca-headless/alpaca-headless";
+import { ReactNode } from "react";
+interface MultiComponentEditorProps {
+    children: ReactNode;
+    component: ComponentData;
+    placeholderName: string;
+    thumbZoom?: number;
+    thumbWidth?: string;
+    thumbHeight?: string;
+}
+export declare function MultiComponentEditor({ children, component, placeholderName, thumbZoom, thumbWidth, thumbHeight, }: MultiComponentEditorProps): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/dist/client-components/MultiComponentEditor.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect, Fragment, useCallback, } from "react";
+export function MultiComponentEditor({ children, component, placeholderName, thumbZoom, thumbWidth = "200px", thumbHeight = "112px", }) {
+    const [selectedId, setSelectedId] = useState(null);
+    const placeholder = component.placeholders.find((x) => x.name === placeholderName);
+    if (!placeholder)
+        return;
+    const components = placeholder.components;
+    if (!components)
+        return;
+    const handleMessage = useCallback((event) => {
+        if (event.data.type === "componentsSelected") {
+            setSelectedId(event.data.componentIds[0]);
+        }
+    }, [components]);
+    useEffect(() => {
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, []);
+    const selectedIndex = components.findIndex((x) => x.id === selectedId);
+    const childrenArray = React.Children.toArray(children);
+    const filteredChildren = childrenArray.filter((child) => child.type !== "script");
+    return (_jsxs(_Fragment, { children: [filteredChildren[selectedIndex < 0 ? 0 : selectedIndex], _jsxs("div", { className: "a-editor-mce", children: [_jsx("script", { "data-placeholder-start": placeholder.key, "data-orientation": "horizontal" }), filteredChildren.map((x, index) => thumbnail(x, index)), _jsx("script", { "data-placeholder-end": placeholder.key })] })] }));
+    function thumbnail(x, index) {
+        var _a, _b, _c, _d, _e;
+        const style = {};
+        if (thumbHeight) {
+            style.height = thumbHeight;
+        }
+        if (thumbWidth) {
+            style.width = thumbWidth;
+        }
+        const componentArray = (_a = x.props) === null || _a === void 0 ? void 0 : _a.children;
+        const component = components[index];
+        return (_jsxs(Fragment, { children: [_jsxs("div", { className: "a-editor-mce-thumbnail" +
+                        (index === selectedIndex ? " a-editor-mce-thumbnail--selected" : ""), style: style, onClick: () => {
+                        selectComponents([components[index].id]);
+                    }, children: [_jsx("script", { "data-component-start": component.id, "data-itemid": ((_c = (_b = component._editor) === null || _b === void 0 ? void 0 : _b.linkedComponentItem) === null || _c === void 0 ? void 0 : _c.id) || component.id, "data-layoutid": (_e = (_d = component._editor) === null || _d === void 0 ? void 0 : _d.hostingPageItem) === null || _e === void 0 ? void 0 : _e.id }), _jsx("div", { style: { pointerEvents: "none", zoom: thumbZoom || 0.25 }, children: componentArray.slice(1, -1) }), _jsx("script", { "data-component-end": component.id })] }), _jsx("div", { "data-dropzone": components[index].id })] }, index));
+    }
+}
+function selectComponents(componentIds) {
+    var _a;
+    (_a = window.top) === null || _a === void 0 ? void 0 : _a.window.postMessage({ componentIds, type: "componentsSelected" }, "*");
+}

package/dist/client-components/index.d.ts

@@ -1 +1 @@
-export { ClientLink } from "./ClientLink";
+export { MultiComponentEditor } from "./MultiComponentEditor";

package/dist/client-components/index.js

@@ -1,2 +1,2 @@
 "use client";
-export { ClientLink } from "./ClientLink";
+export { MultiComponentEditor } from "./MultiComponentEditor";

package/dist/handleBasicAuthRoute.d.ts

@@ -0,0 +1,8 @@
+import { ApiConfig, RenderOptions } from "@alpaca-headless/alpaca-headless";
+import { NextRequest } from "next/server";
+export declare function handleBasicAuthRoute({ request, mapHost, renderOptions, apiConfig, }: {
+    request: NextRequest;
+    mapHost: (host: string) => string;
+    renderOptions: RenderOptions;
+    apiConfig?: ApiConfig;
+}): Promise<Response | undefined>;

package/dist/handleBasicAuthRoute.js

@@ -0,0 +1,42 @@
+import { resolveRoute, } from "@alpaca-headless/alpaca-headless";
+import { getApiHeaders } from ".";
+export async function handleBasicAuthRoute({ request, mapHost, renderOptions, apiConfig, }) {
+    const urlSearchParams = new URLSearchParams(request.nextUrl.search);
+    const nextSearchParams = {};
+    for (const [key, value] of urlSearchParams.entries()) {
+        nextSearchParams[key] = value;
+    }
+    const config = apiConfig || {};
+    if (!config.headers) {
+        config.headers = getApiHeaders();
+    }
+    const routeData = await resolveRoute({
+        path: request.nextUrl.pathname,
+        searchParams: nextSearchParams,
+        host: mapHost(request.headers.get("host") || ""),
+        renderOptions,
+        renderings: {},
+        apiConfig: config,
+    });
+    if (routeData.result.type === "redirect") {
+        return new Response(null, {
+            status: routeData.result.redirectType === "permanent" ? 301 : 302,
+            headers: {
+                Location: routeData.result.location,
+            },
+        });
+    }
+    if (routeData.result.type === "unauthorized") {
+        if (routeData.result.auth)
+            return new Response(null, {
+                status: 401,
+                headers: {
+                    "WWW-Authenticate": routeData.result.auth.replace(", Bearer", ""),
+                },
+            });
+        else
+            return new Response(null, {
+                status: 401,
+            });
+    }
+}

package/dist/index.d.ts

@@ -1 +1,4 @@
-export * from "../../alpaca-headless/src/index";
+export { EditorIntegration } from "./EditorIntegration";
+export declare function getApiHeaders(): Headers;
+export { handleRequest } from "./middleware/handleRequest";
+export { proxy } from "./proxy";

package/dist/index.js

@@ -1,3 +1,11 @@
-import { init } from "./configure";
-init();
-export * from "../../alpaca-headless/src/index";
+import { headers } from "next/headers";
+export { EditorIntegration } from "./EditorIntegration";
+export function getApiHeaders() {
+    const requestHeaders = headers();
+    const apiHeaders = new Headers();
+    apiHeaders.set("Cookie", requestHeaders.get("Cookie") || "");
+    apiHeaders.set("Authorization", requestHeaders.get("Authorization") || "");
+    return apiHeaders;
+}
+export { handleRequest } from "./middleware/handleRequest";
+export { proxy } from "./proxy";

package/dist/middleware/handleRequest.d.ts

@@ -1,7 +1,8 @@
-import { RenderOptions } from "../../../alpaca-headless/src";
+import { ApiConfig, RenderOptions } from "@alpaca-headless/alpaca-headless";
 import { NextRequest } from "next/server";
-export declare function handleRequest({ request, mapHost, renderOptions, }: {
+export declare function handleRequest({ request, mapHost, renderOptions, apiConfig, }: {
     request: NextRequest;
     mapHost: (host: string) => string;
     renderOptions: RenderOptions;
+    apiConfig?: ApiConfig;
 }): Promise<Response | undefined>;

package/dist/middleware/handleRequest.js

@@ -1,31 +1,37 @@
-import { resolveRoute } from "../../../alpaca-headless/src";
-export async function handleRequest({ request, mapHost, renderOptions, }) {
+import { resolveRoute, } from "@alpaca-headless/alpaca-headless";
+import { getApiHeaders } from "..";
+export async function handleRequest({ request, mapHost, renderOptions, apiConfig, }) {
     const urlSearchParams = new URLSearchParams(request.nextUrl.search);
     const nextSearchParams = {};
     for (const [key, value] of urlSearchParams.entries()) {
         nextSearchParams[key] = value;
     }
-    const result = await resolveRoute({
+    const config = apiConfig || {};
+    if (!config.headers) {
+        config.headers = getApiHeaders();
+    }
+    const routeData = await resolveRoute({
         path: request.nextUrl.pathname,
         searchParams: nextSearchParams,
         host: mapHost(request.headers.get("host") || ""),
         renderOptions,
         renderings: {},
+        apiConfig: config,
     });
-    if (result.type === "redirect") {
+    if (routeData.result.type === "redirect") {
         return new Response(null, {
-            status: result.redirectType === "permanent" ? 301 : 302,
+            status: routeData.result.redirectType === "permanent" ? 301 : 302,
             headers: {
-                Location: result.location,
+                Location: routeData.result.location,
             },
         });
     }
-    if (result.type === "unauthorized") {
-        if (result.auth)
+    if (routeData.result.type === "unauthorized") {
+        if (routeData.result.auth)
             return new Response(null, {
                 status: 401,
                 headers: {
-                    "WWW-Authenticate": result.auth.replace(", Bearer", ""),
+                    "WWW-Authenticate": routeData.result.auth.replace(", Bearer", ""),
                 },
             });
         else

package/dist/middleware/index.js

@@ -1,3 +1 @@
-import { init } from "../configure";
-init();
 export * from "./handleRequest";

package/dist/proxy/index.d.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+declare function GET(req: Request, target: string): Promise<NextResponse<unknown>>;
+declare function POST(req: Request): Promise<NextResponse<unknown>>;
+export declare const proxy: {
+    POST: typeof POST;
+    GET: typeof GET;
+};
+export {};

package/dist/proxy/index.js

@@ -0,0 +1,77 @@
+import axios from "axios";
+// import { HttpsProxyAgent } from "https-proxy-agent";
+import { NextResponse } from "next/server";
+async function GET(req, target
+//{ proxy }: { proxy?: string }
+) {
+    const reqUrl = new URL(req.url);
+    const url = target + reqUrl.pathname + "?" + reqUrl.searchParams.toString();
+    const headers = {
+        Authorization: req.headers.get("Authorization") || "",
+        Cookie: req.headers.get("Cookie") || "",
+    };
+    // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+    const externalResponse = await axios.get(url, {
+        headers: headers,
+        // httpAgent: agent,
+        // httpsAgent: agent,
+        responseType: "stream",
+    });
+    return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
+        status: externalResponse.status,
+    });
+}
+async function POST(req
+//{ proxy }: { proxy?: string }
+) {
+    const reqUrl = new URL(req.url);
+    const body = await req.text();
+    const url = process.env.EDITOR_SERVICE_URL +
+        reqUrl.pathname +
+        "?" +
+        reqUrl.searchParams.toString();
+    const headers = {
+        "Content-Type": req.headers.get("Content-Type") || "",
+        Authorization: req.headers.get("Authorization") || "",
+        Cookie: req.headers.get("Cookie") || "",
+    };
+    // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+    const externalResponse = await axios.post(url, body, {
+        headers: headers,
+        // httpAgent: agent,
+        // httpsAgent: agent,
+        responseType: "stream",
+    });
+    const responseHeaders = getResponseHeaders(externalResponse);
+    return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
+        status: externalResponse.status,
+        headers: responseHeaders,
+    });
+}
+const getResponseHeaders = (externalResponse) => {
+    const responseHeaders = new Headers();
+    responseHeaders.set("Content-Type", externalResponse.headers["content-type"] || "");
+    responseHeaders.set("Set-Cookie", externalResponse.headers["set-cookie"] || "");
+    return responseHeaders;
+};
+function nodeReadableToReadableStream(nodeStream) {
+    return new ReadableStream({
+        start(controller) {
+            nodeStream.on("data", (chunk) => {
+                controller.enqueue(new Uint8Array(chunk));
+            });
+            nodeStream.on("end", () => {
+                controller.close();
+            });
+            nodeStream.on("error", (err) => {
+                controller.error(err);
+            });
+        },
+        pull() { },
+        cancel() { },
+    });
+}
+export const proxy = {
+    POST,
+    GET,
+};

package/dist/useExposeRefreshFunction.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        requestRefresh?: (newUri?: string) => boolean;
+    }
+}
+declare const useExposeRefreshFunction: () => null;
+export default useExposeRefreshFunction;

package/dist/useExposeRefreshFunction.js

@@ -0,0 +1,32 @@
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import uuid from "react-uuid";
+const useExposeRefreshFunction = () => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [refreshStart, setRefreshStart] = useState();
+    useEffect(() => {
+        // Expose the refresh function to the parent window
+        window.requestRefresh = (newUri) => {
+            console.log("refresh requested", newUri);
+            if (!newUri) {
+                const uri = new URL(window.location.href);
+                uri.searchParams.set("edit_rev", uuid().toString());
+                newUri = uri.toString();
+            }
+            router.replace(newUri, { scroll: false });
+            setRefreshStart(performance.now());
+            return true; // Indicate the function executed successfully
+        };
+        // Optionally clean up when the component unmounts
+        return () => {
+            delete window.requestRefresh;
+        };
+    }, [router]);
+    useEffect(() => {
+        if (refreshStart)
+            console.log("Refresh complete", performance.now() - refreshStart);
+    }, [searchParams]);
+    return null; // This hook doesn't render anything
+};
+export default useExposeRefreshFunction;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@alpaca-headless/alpaca-headless-nextjs",
-  "version": "1.0.281",
+  "version": "1.0.527",
   "type": "module",
   "description": "Alpaca Headless",
   "main": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
     "./client-components": "./dist/client-components",
-    "./middleware": "./dist/middleware"
+    "./middleware": "./dist/middleware",
+    "./internals": "./dist/internals"
   },
   "typesVersions": {
     "*": {
@@ -16,6 +17,9 @@
       ],
       "middleware": [
         "./dist/middleware/index.d.ts"
+      ],
+      "internals": [
+        "./dist/internals/index.d.ts"
       ]
     }
   },
@@ -38,17 +42,20 @@
   },
   "homepage": "https://github.com/yourusername/your-module-name#readme",
   "devDependencies": {
-    "@types/node": "^20.11.25",
-    "@types/react": "18.2.67",
-    "@types/react-dom": "18.2.22",
+    "@types/node": "^20.14.2",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3",
+    "eslint-config-next": "14.2.10",
     "typescript": "^5"
   },
   "dependencies": {
-    "next": "^14.1.4",
-    "react": "^18",
-    "react-dom": "^18",
+    "@alpaca-headless/alpaca-headless": "npm:@alpaca-headless/alpaca-headless-editor-preview@^1.0.522",
+    "axios": "^1.7.2",
+    "https-proxy-agent": "^7.0.4",
+    "next": "^14.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-uuid": "^2.0.0"
   }
 }

package/src/EditorIntegration.tsx

@@ -0,0 +1,11 @@
+import { EditorIntegrationClient } from "./EditorIntegrationClient";
+
+export type EditorIntegrationProps = {
+  timings?: {
+    [key: string]: number;
+  };
+};
+
+export function EditorIntegration(props: EditorIntegrationProps) {
+  return <EditorIntegrationClient {...props} />;
+}

package/src/EditorIntegrationClient.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect } from "react";
+import useExposeRefreshFunction from "./useExposeRefreshFunction";
+
+export function EditorIntegrationClient({
+  timings,
+}: {
+  timings?: {
+    [key: string]: number;
+  };
+}) {
+  useExposeRefreshFunction();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.ctrlKey && event.key === "F11") {
+        event.preventDefault();
+        window.parent.postMessage({ type: "editor-exitFullscreen" }, "*");
+      }
+      if (event.key === "F2") {
+        event.preventDefault();
+        window.parent.postMessage({ type: "editor-keyDown", key: "F2" }, "*");
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.parent.postMessage({ type: "editor-timings", timings }, "*");
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <>
+      <style>{`
+        .a-editor-mce {
+          display:flex;
+          gap: 10px;
+          padding: 30px;
+          background-color: #f5f5f5;
+          flex-wrap: wrap;          
+          align-items: center;
+        }
+        .a-editor-mce-thumbnail {                   
+          display:grid;
+          padding: 10px;
+          place-items: center;     
+          overflow: hidden;     
+        }
+         .a-editor-mce-thumbnail--selected {
+          box-shadow: 0 0 3px 3px rgb(75 89 255 / 50%);
+         }
+         .a-editor-mce-thumbnail:hover {
+          box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
+        }
+        [contentEditable]:empty:before {
+          content: attr(placeholder);
+          opacity: 0.6;
+        }
+
+        [contenteditable] {
+          outline: 0px solid transparent;
+        }
+      `}</style>
+    </>
+  );
+}
+
+export type ComponentSelectedEvent = {
+  type: "componentSelected";
+  componentIds: string[];
+};

package/src/client-components/MultiComponentEditor.tsx

@@ -0,0 +1,133 @@
+"use client";
+import { ComponentData } from "@alpaca-headless/alpaca-headless";
+
+import React, {
+  useState,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  Fragment,
+  useCallback,
+} from "react";
+
+interface MultiComponentEditorProps {
+  children: ReactNode;
+  component: ComponentData;
+  placeholderName: string;
+  thumbZoom?: number;
+  thumbWidth?: string;
+  thumbHeight?: string;
+}
+
+export function MultiComponentEditor({
+  children,
+  component,
+  placeholderName,
+  thumbZoom,
+  thumbWidth = "200px",
+  thumbHeight = "112px",
+}: MultiComponentEditorProps) {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const placeholder = component.placeholders.find(
+    (x) => x.name === placeholderName
+  );
+  if (!placeholder) return;
+  const components = placeholder.components;
+  if (!components) return;
+
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      if (event.data.type === "componentsSelected") {
+        setSelectedId(event.data.componentIds[0]);
+      }
+    },
+    [components]
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  const selectedIndex = components.findIndex(
+    (x: ComponentData) => x.id === selectedId
+  );
+
+  const childrenArray = React.Children.toArray(children) as ReactElement[];
+
+  const filteredChildren = childrenArray.filter(
+    (child) => child.type !== "script"
+  );
+
+  return (
+    <>
+      {filteredChildren[selectedIndex < 0 ? 0 : selectedIndex]}
+      <div className="a-editor-mce">
+        <script
+          data-placeholder-start={placeholder.key}
+          data-orientation="horizontal"
+        />
+        {filteredChildren.map((x, index) => thumbnail(x, index))}
+        <script data-placeholder-end={placeholder.key} />
+      </div>
+    </>
+  );
+
+  function thumbnail(x: React.ReactNode, index: number) {
+    const style: {
+      height?: string;
+      width?: string;
+      zoom?: number;
+      transform?: string;
+    } = {};
+
+    if (thumbHeight) {
+      style.height = thumbHeight;
+    }
+    if (thumbWidth) {
+      style.width = thumbWidth;
+    }
+
+    const componentArray = (x as any).props?.children;
+
+    const component = components![index];
+
+    return (
+      <Fragment key={index}>
+        <div
+          className={
+            "a-editor-mce-thumbnail" +
+            (index === selectedIndex ? " a-editor-mce-thumbnail--selected" : "")
+          }
+          style={style}
+          onClick={() => {
+            selectComponents([components![index].id]);
+          }}
+        >
+          <script
+            data-component-start={component.id}
+            data-itemid={
+              component._editor?.linkedComponentItem?.id || component.id
+            }
+            data-layoutid={component._editor?.hostingPageItem?.id}
+          />
+          <div style={{ pointerEvents: "none", zoom: thumbZoom || 0.25 }}>
+            {componentArray.slice(1, -1)}
+          </div>
+          <script data-component-end={component.id} />
+        </div>
+        <div data-dropzone={components[index].id}></div>
+      </Fragment>
+    );
+  }
+}
+
+function selectComponents(componentIds: string[]) {
+  window.top?.window.postMessage(
+    { componentIds, type: "componentsSelected" },
+    "*"
+  );
+}

package/src/client-components/index.ts

@@ -1,2 +1,3 @@
 "use client";
-export { ClientLink } from "./ClientLink";
+
+export { MultiComponentEditor } from "./MultiComponentEditor";

package/src/handleBasicAuthRoute.ts

@@ -0,0 +1,62 @@
+import {
+  ApiConfig,
+  RenderOptions,
+  resolveRoute,
+} from "@alpaca-headless/alpaca-headless";
+import { NextRequest } from "next/server";
+import { getApiHeaders } from ".";
+
+export async function handleBasicAuthRoute({
+  request,
+  mapHost,
+  renderOptions,
+  apiConfig,
+}: {
+  request: NextRequest;
+  mapHost: (host: string) => string;
+  renderOptions: RenderOptions;
+  apiConfig?: ApiConfig;
+}) {
+  const urlSearchParams = new URLSearchParams(request.nextUrl.search);
+  const nextSearchParams: any = {};
+  for (const [key, value] of urlSearchParams.entries()) {
+    nextSearchParams[key] = value;
+  }
+
+  const config = apiConfig || {};
+  if (!config.headers) {
+    config.headers = getApiHeaders();
+  }
+
+  const routeData = await resolveRoute({
+    path: request.nextUrl.pathname,
+    searchParams: nextSearchParams,
+    host: mapHost(request.headers.get("host") || ""),
+    renderOptions,
+    renderings: {},
+    apiConfig: config,
+  });
+
+  if (routeData.result.type === "redirect") {
+    return new Response(null, {
+      status: routeData.result.redirectType === "permanent" ? 301 : 302,
+      headers: {
+        Location: routeData.result.location,
+      },
+    });
+  }
+
+  if (routeData.result.type === "unauthorized") {
+    if (routeData.result.auth)
+      return new Response(null, {
+        status: 401,
+        headers: {
+          "WWW-Authenticate": routeData.result.auth.replace(", Bearer", ""),
+        },
+      });
+    else
+      return new Response(null, {
+        status: 401,
+      });
+  }
+}

package/src/index.ts

@@ -1,5 +1,15 @@
-import { init } from "./configure";
+import { headers } from "next/headers";
 
-init();
+export { EditorIntegration } from "./EditorIntegration";
 
-export * from "../../alpaca-headless/src/index";
+export function getApiHeaders() {
+  const requestHeaders = headers();
+  const apiHeaders = new Headers();
+  apiHeaders.set("Cookie", requestHeaders.get("Cookie") || "");
+  apiHeaders.set("Authorization", requestHeaders.get("Authorization") || "");
+  return apiHeaders;
+}
+
+export { handleRequest } from "./middleware/handleRequest";
+
+export { proxy } from "./proxy";

package/src/middleware/handleRequest.ts

@@ -1,14 +1,21 @@
-import { RenderOptions, resolveRoute } from "../../../alpaca-headless/src";
+import {
+  ApiConfig,
+  RenderOptions,
+  resolveRoute,
+} from "@alpaca-headless/alpaca-headless";
 import { NextRequest } from "next/server";
+import { getApiHeaders } from "..";
 
 export async function handleRequest({
   request,
   mapHost,
   renderOptions,
+  apiConfig,
 }: {
   request: NextRequest;
   mapHost: (host: string) => string;
   renderOptions: RenderOptions;
+  apiConfig?: ApiConfig;
 }) {
   const urlSearchParams = new URLSearchParams(request.nextUrl.search);
   const nextSearchParams: any = {};
@@ -16,29 +23,35 @@ export async function handleRequest({
     nextSearchParams[key] = value;
   }
 
-  const result = await resolveRoute({
+  const config = apiConfig || {};
+  if (!config.headers) {
+    config.headers = getApiHeaders();
+  }
+
+  const routeData = await resolveRoute({
     path: request.nextUrl.pathname,
     searchParams: nextSearchParams,
     host: mapHost(request.headers.get("host") || ""),
     renderOptions,
     renderings: {},
+    apiConfig: config,
   });
 
-  if (result.type === "redirect") {
+  if (routeData.result.type === "redirect") {
     return new Response(null, {
-      status: result.redirectType === "permanent" ? 301 : 302,
+      status: routeData.result.redirectType === "permanent" ? 301 : 302,
       headers: {
-        Location: result.location,
+        Location: routeData.result.location,
       },
     });
   }
 
-  if (result.type === "unauthorized") {
-    if (result.auth)
+  if (routeData.result.type === "unauthorized") {
+    if (routeData.result.auth)
       return new Response(null, {
         status: 401,
         headers: {
-          "WWW-Authenticate": result.auth.replace(", Bearer", ""),
+          "WWW-Authenticate": routeData.result.auth.replace(", Bearer", ""),
         },
       });
     else

package/src/middleware/index.ts

@@ -1,5 +1 @@
-import { init } from "../configure";
-
-init();
-
 export * from "./handleRequest";

package/src/proxy/index.ts

@@ -0,0 +1,108 @@
+import axios from "axios";
+// import { HttpsProxyAgent } from "https-proxy-agent";
+import { NextResponse } from "next/server";
+
+async function GET(
+  req: Request,
+  target: string
+  //{ proxy }: { proxy?: string }
+) {
+  const reqUrl = new URL(req.url);
+
+  const url: string =
+    target + reqUrl.pathname + "?" + reqUrl.searchParams.toString();
+
+  const headers: { [key: string]: string } = {
+    Authorization: req.headers.get("Authorization") || "",
+    Cookie: req.headers.get("Cookie") || "",
+  };
+
+  // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+
+  const externalResponse = await axios.get(url, {
+    headers: headers,
+    // httpAgent: agent,
+    // httpsAgent: agent,
+    responseType: "stream",
+  });
+
+  return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
+    status: externalResponse.status,
+  });
+}
+
+async function POST(
+  req: Request
+  //{ proxy }: { proxy?: string }
+) {
+  const reqUrl = new URL(req.url);
+  const body = await req.text();
+
+  const url: string =
+    process.env.EDITOR_SERVICE_URL +
+    reqUrl.pathname +
+    "?" +
+    reqUrl.searchParams.toString();
+
+  const headers: { [key: string]: string } = {
+    "Content-Type": req.headers.get("Content-Type") || "",
+    Authorization: req.headers.get("Authorization") || "",
+    Cookie: req.headers.get("Cookie") || "",
+  };
+
+  // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+
+  const externalResponse = await axios.post(url, body, {
+    headers: headers,
+    // httpAgent: agent,
+    // httpsAgent: agent,
+    responseType: "stream",
+  });
+
+  const responseHeaders = getResponseHeaders(externalResponse);
+
+  return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
+    status: externalResponse.status,
+    headers: responseHeaders,
+  });
+}
+
+const getResponseHeaders = (externalResponse: any) => {
+  const responseHeaders = new Headers();
+  responseHeaders.set(
+    "Content-Type",
+    externalResponse.headers["content-type"] || ""
+  );
+  responseHeaders.set(
+    "Set-Cookie",
+    externalResponse.headers["set-cookie"] || ""
+  );
+  return responseHeaders;
+};
+
+function nodeReadableToReadableStream(
+  nodeStream: NodeJS.ReadableStream
+): ReadableStream<Uint8Array> {
+  return new ReadableStream<Uint8Array>({
+    start(controller) {
+      nodeStream.on("data", (chunk: Buffer) => {
+        controller.enqueue(new Uint8Array(chunk));
+      });
+
+      nodeStream.on("end", () => {
+        controller.close();
+      });
+
+      nodeStream.on("error", (err: Error) => {
+        controller.error(err);
+      });
+    },
+    pull() {},
+    cancel() {},
+  });
+}
+
+export const proxy = {
+  POST,
+  GET,
+};

package/src/useExposeRefreshFunction.ts

@@ -0,0 +1,45 @@
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import uuid from "react-uuid";
+
+declare global {
+  interface Window {
+    requestRefresh?: (newUri?: string) => boolean;
+  }
+}
+
+const useExposeRefreshFunction = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [refreshStart, setRefreshStart] = useState<number>();
+
+  useEffect(() => {
+    // Expose the refresh function to the parent window
+    window.requestRefresh = (newUri?: string) => {
+      console.log("refresh requested", newUri);
+      if (!newUri) {
+        const uri = new URL(window.location.href);
+        uri.searchParams.set("edit_rev", uuid().toString());
+        newUri = uri.toString();
+      }
+
+      router.replace(newUri, { scroll: false });
+      setRefreshStart(performance.now());
+      return true; // Indicate the function executed successfully
+    };
+
+    // Optionally clean up when the component unmounts
+    return () => {
+      delete window.requestRefresh;
+    };
+  }, [router]);
+
+  useEffect(() => {
+    if (refreshStart)
+      console.log("Refresh complete", performance.now() - refreshStart!);
+  }, [searchParams]);
+
+  return null; // This hook doesn't render anything
+};
+
+export default useExposeRefreshFunction;

package/tsconfig.json

@@ -22,6 +22,5 @@
     "noUnusedParameters": true
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.spec.ts"],
-  "references": [{ "path": "../alpaca-headless" }]
+  "exclude": ["node_modules", "**/*.spec.ts"]
 }

package/dist/client-components/ClientLink.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { LinkField } from "../../../alpaca-headless/src/types/fieldTypes";
-export declare function ClientLink({ field, children, ...props }: {
-    field: LinkField;
-    children: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/client-components/ClientLink.js

@@ -1,39 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ClientLink(_a) {
-    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
-    if (!field)
-        return;
-    if (field.jsonValue) {
-        field = field.jsonValue;
-    }
-    if (!field.value)
-        return;
-    //const previewContext = usePreviewContext();
-    // if (previewContext) {
-    //   return (
-    //     <LinkPreview field={field} {...props}>
-    //       {children}
-    //     </LinkPreview>
-    //   );
-    // }
-    // const editing = useEditContext();
-    // if (editing)
-    //   return (
-    //     <LinkEditorWrapper field={field} {...props}>
-    //       {children}
-    //     </LinkEditorWrapper>
-    //   );
-    return (_jsx("a", Object.assign({ href: field.value.url }, props, { children: children })));
-}

package/dist/configure.d.ts

@@ -1 +0,0 @@
-export declare function init(): void;

package/dist/configure.js

@@ -1,10 +0,0 @@
-import { cookies, headers } from "next/headers";
-import { alpacaHeadless } from "../../alpaca-headless/src/index";
-export function init() {
-    if (!alpacaHeadless.isInitialized) {
-        alpacaHeadless.configuration.dependencies.fetch = fetch;
-        alpacaHeadless.configuration.dependencies.cookies = () => cookies().toString();
-        alpacaHeadless.configuration.dependencies.headers = headers;
-        alpacaHeadless.isInitialized = true;
-    }
-}

package/src/client-components/ClientLink.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import React from "react";
-import { LinkField } from "../../../alpaca-headless/src/types/fieldTypes";
-
-export function ClientLink({
-  field,
-  children,
-  ...props
-}: {
-  field: LinkField;
-  children: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>) {
-  if (!field) return;
-
-  if (field.jsonValue) {
-    field = field.jsonValue as LinkField;
-  }
-
-  if (!field.value) return;
-
-  //const previewContext = usePreviewContext();
-
-  // if (previewContext) {
-  //   return (
-  //     <LinkPreview field={field} {...props}>
-  //       {children}
-  //     </LinkPreview>
-  //   );
-  // }
-
-  // const editing = useEditContext();
-
-  // if (editing)
-  //   return (
-  //     <LinkEditorWrapper field={field} {...props}>
-  //       {children}
-  //     </LinkEditorWrapper>
-  //   );
-
-  return (
-    <a href={field.value.url} {...props}>
-      {children}
-    </a>
-  );
-}

package/src/configure.ts

@@ -1,12 +0,0 @@
-import { cookies, headers } from "next/headers";
-import { alpacaHeadless } from "../../alpaca-headless/src/index";
-
-export function init() {
-  if (!alpacaHeadless.isInitialized) {
-    alpacaHeadless.configuration.dependencies.fetch = fetch;
-    alpacaHeadless.configuration.dependencies.cookies = () =>
-      cookies().toString();
-    alpacaHeadless.configuration.dependencies.headers = headers;
-    alpacaHeadless.isInitialized = true;
-  }
-}