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

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

package/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

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

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

package/dist/client-components/index.js

@@ -0,0 +1,2 @@
+"use client";
+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

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

package/dist/index.js

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,8 @@
+import { ApiConfig, RenderOptions } from "@alpaca-headless/alpaca-headless";
+import { NextRequest } from "next/server";
+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

@@ -0,0 +1,42 @@
+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 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/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/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/package.json

@@ -1,73 +1,61 @@
 {
   "name": "@alpaca-headless/alpaca-headless-nextjs",
-  "sideEffects": false,
+  "version": "1.0.527",
   "type": "module",
-  "version": "1.0.253",
-  "description": "Alpaca Headless NextJs Integration",
-  "main": "dist/cjs/index.js",
-  "types": "types/index.d.ts",
-  "files": [
-    "dist",
-    "types",
-    "/*.js",
-    "/*.css",
-    "/*.d.ts"
-  ],
+  "description": "Alpaca Headless",
+  "main": "dist/index.js",
   "exports": {
-    ".": "./dist/esm/index.js",
-    "./client-components": "./dist/esm/client-components",
-    "./middleware": "./dist/esm/middleware"
+    ".": "./dist/index.js",
+    "./client-components": "./dist/client-components",
+    "./middleware": "./dist/middleware",
+    "./internals": "./dist/internals"
   },
   "typesVersions": {
     "*": {
       "client-components": [
-        "types/client-components/index.d.ts"
+        "./dist/client-components/index.d.ts"
       ],
       "middleware": [
-        "types/middleware/index.d.ts"
+        "./dist/middleware/index.d.ts"
+      ],
+      "internals": [
+        "./dist/internals/index.d.ts"
       ]
     }
   },
   "scripts": {
-    "build-dev": "npm run build:cjs && npm run tailwindbuild",
-    "build": "npm run build:esm && npm run tailwindbuild && npm run copy-primecss",
-    "build:esm": "tsc -p config/tsconfig.esm.json --noEmit false",
-    "tailwindbuild": "tailwindcss -i ./src/editor.css -o ./dist/editor.css",
-    "copy-primecss": "copyfiles -u 1 -E -V  \"node_modules/primereact/resources/**/*\" \"node_modules/primeicons/**/*\"   dist/",
-    "package": "npm run build && npm pack"
+    "build": "tsc -b",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/your-module-name.git"
+  },
+  "keywords": [
+    "esm",
+    "module"
+  ],
   "author": "Canvas REPLY DE GmbH",
   "license": "MIT",
-  "dependencies": {
-    "@uiw/react-textarea-code-editor": "^1.4.4",
-    "allotment": "^1.20.0",
-    "autoprefixer": "10.4.17",
-    "copyfiles": "^2.4.1",
-    "cryptography": "^1.2.3",
-    "graphql-formatter": "^1.0.3",
-    "next": "14.1.0",
-    "node-cleanup": "^2.1.2",
-    "prettier": "^3.2.4",
-    "primeicons": "^6.0.1",
-    "primereact": "^10.3.3",
-    "quill": "^1.3.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-error-boundary": "^4.0.12",
-    "react-inspector": "^6.0.2",
-    "react-json-view-lite": "^1.2.1",
-    "react-uuid": "^2.0.0",
-    "server-only": "^0.0.1",
-    "universal-cookie": "^7.0.1"
+  "bugs": {
+    "url": "https://github.com/yourusername/your-module-name/issues"
   },
+  "homepage": "https://github.com/yourusername/your-module-name#readme",
   "devDependencies": {
-    "@types/node": "20.11.5",
-    "@types/quill": "^2.0.14",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
-    "eslint": "8.56.0",
-    "eslint-config-next": "14.1.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "5.3.3"
+    "@types/node": "^20.14.2",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.10",
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@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/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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[];
+};