@devx-labs/strapi-preview 1.0.3 → 1.0.4

package/dist/_chunks/PreviewImageInput-BcPJkyKS.mjs

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Flex, LinkButton } from "@strapi/design-system";
+import { ExternalLink } from "@strapi/icons";
+const PreviewImageInput = ({ attribute }) => {
+  const url = attribute?.options?.url;
+  if (!url) return null;
+  return /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(
+    LinkButton,
+    {
+      href: url,
+      target: "_blank",
+      rel: "noreferrer",
+      variant: "tertiary",
+      size: "S",
+      endIcon: /* @__PURE__ */ jsx(ExternalLink, {}),
+      children: "Preview"
+    }
+  ) });
+};
+export {
+  PreviewImageInput
+};

package/dist/_chunks/PreviewImageInput-Bha74a3E.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const PreviewImageInput = ({ attribute }) => {
+  const url = attribute?.options?.url;
+  if (!url) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.LinkButton,
+    {
+      href: url,
+      target: "_blank",
+      rel: "noreferrer",
+      variant: "tertiary",
+      size: "S",
+      endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}),
+      children: "Preview"
+    }
+  ) });
+};
+exports.PreviewImageInput = PreviewImageInput;

package/dist/admin/index.js

@@ -0,0 +1,203 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const designSystem = require("@strapi/design-system");
+const strapiAdmin = require("@strapi/content-manager/strapi-admin");
+const admin = require("@strapi/strapi/admin");
+const icons = require("@strapi/icons");
+const collectPreviewItems = (value, attributes, componentSchemas, optionsMap) => {
+  const items = [];
+  if (!value || !attributes || typeof value !== "object") return items;
+  const pushItem = (componentUid, tempKey) => {
+    const opts = optionsMap[componentUid];
+    if (!opts) return;
+    const schema = componentSchemas[componentUid];
+    items.push({
+      uid: componentUid,
+      displayName: schema?.info?.displayName ?? componentUid,
+      previewUrl: opts.url,
+      previewName: opts.name,
+      count: 1,
+      tempKey
+    });
+  };
+  for (const [attributeName, attribute] of Object.entries(attributes)) {
+    const attributeValue = value[attributeName];
+    if (!attributeValue) continue;
+    if (attribute.type === "dynamiczone" && Array.isArray(attributeValue)) {
+      for (const item of attributeValue) {
+        if (!item || typeof item !== "object") continue;
+        const componentUid = item.__component;
+        const tempKey = item.__temp_key__;
+        if (componentUid) pushItem(componentUid, tempKey);
+      }
+      continue;
+    }
+    if (attribute.type === "component" && attribute.component) {
+      const componentUid = attribute.component;
+      if (attribute.repeatable && Array.isArray(attributeValue)) {
+        for (let i = 0; i < attributeValue.length; i++) {
+          const item = attributeValue[i];
+          pushItem(componentUid, item?.__temp_key__);
+        }
+      } else {
+        pushItem(componentUid);
+      }
+    }
+  }
+  return items;
+};
+const ComponentPreviewPanel = () => {
+  const { components, contentType, isCreatingEntry } = strapiAdmin.unstable_useContentManagerContext();
+  const values = admin.useForm("ComponentPreviewPanel", (state) => state.values);
+  const { get } = admin.useFetchClient();
+  const [optionsMap, setOptionsMap] = react.useState({});
+  react.useEffect(() => {
+    let cancelled = false;
+    get("/api/component-preview-image/options").then(({ data }) => {
+      if (!cancelled) setOptionsMap(data ?? {});
+    }).catch(() => {
+      if (!cancelled) setOptionsMap({});
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const previewItems = collectPreviewItems(
+    values,
+    contentType?.attributes,
+    components,
+    optionsMap
+  );
+  if (isCreatingEntry) {
+    return {
+      title: "Component previews",
+      content: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Save this entry once to load component previews." })
+    };
+  }
+  if (previewItems.length === 0) {
+    return {
+      title: "Component previews",
+      content: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "No component previews are available for this entry yet." })
+    };
+  }
+  return {
+    title: "Component previews",
+    content: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 4, alignItems: "stretch", children: previewItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        borderColor: "neutral200",
+        background: "neutral0",
+        hasRadius: true,
+        padding: 3,
+        shadow: "tableShadow",
+        width: "100%",
+        overflow: "hidden",
+        style: { boxSizing: "border-box" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, alignItems: "stretch", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: item.previewUrl,
+              alt: item.previewName || item.displayName,
+              style: {
+                width: "100%",
+                maxWidth: "100%",
+                display: "block",
+                borderRadius: "8px",
+                border: "1px solid #dcdce4",
+                objectFit: "cover",
+                boxSizing: "border-box"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Flex,
+            {
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              gap: 2,
+              width: "100%",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral800", children: item.previewName || item.displayName }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Typography,
+                    {
+                      variant: "pi",
+                      textColor: "neutral600",
+                      style: {
+                        display: "block",
+                        overflowWrap: "anywhere",
+                        wordBreak: "break-word"
+                      },
+                      children: item.uid
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: "tertiary",
+                    size: "S",
+                    tag: "a",
+                    href: item.previewUrl,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}),
+                    style: { flexShrink: 0 },
+                    children: "Open"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      },
+      item.tempKey ?? `${index2}-${item.uid}`
+    )) })
+  };
+};
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "preview-image",
+      pluginId: "component-preview-image",
+      type: "string",
+      inputSize: { default: 12, isResizable: false },
+      intlLabel: {
+        id: "component-preview-image.preview-image.label",
+        defaultMessage: "Preview Image"
+      },
+      intlDescription: {
+        id: "component-preview-image.preview-image.description",
+        defaultMessage: "Schema-level preview image — set the image URL once in the Content-Type Builder, shown in the edit-view side panel"
+      },
+      components: {
+        Input: async () => Promise.resolve().then(() => require("../_chunks/PreviewImageInput-Bha74a3E.js")).then((mod) => ({
+          default: mod.PreviewImageInput
+        }))
+      },
+      options: {
+        base: [
+          {
+            name: "options.url",
+            type: "text",
+            intlLabel: {
+              id: "component-preview-image.options.url.label",
+              defaultMessage: "Preview Image URL"
+            },
+            description: {
+              id: "component-preview-image.options.url.description",
+              defaultMessage: "Direct URL of the image to display in the preview panel"
+            }
+          }
+        ]
+      }
+    });
+  },
+  bootstrap(app) {
+    app.getPlugin("content-manager").apis.addEditViewSidePanel([ComponentPreviewPanel]);
+  }
+};
+module.exports = index;

package/dist/admin/index.mjs

@@ -0,0 +1,204 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Typography, Flex, Box, Button } from "@strapi/design-system";
+import { unstable_useContentManagerContext } from "@strapi/content-manager/strapi-admin";
+import { useForm, useFetchClient } from "@strapi/strapi/admin";
+import { ExternalLink } from "@strapi/icons";
+const collectPreviewItems = (value, attributes, componentSchemas, optionsMap) => {
+  const items = [];
+  if (!value || !attributes || typeof value !== "object") return items;
+  const pushItem = (componentUid, tempKey) => {
+    const opts = optionsMap[componentUid];
+    if (!opts) return;
+    const schema = componentSchemas[componentUid];
+    items.push({
+      uid: componentUid,
+      displayName: schema?.info?.displayName ?? componentUid,
+      previewUrl: opts.url,
+      previewName: opts.name,
+      count: 1,
+      tempKey
+    });
+  };
+  for (const [attributeName, attribute] of Object.entries(attributes)) {
+    const attributeValue = value[attributeName];
+    if (!attributeValue) continue;
+    if (attribute.type === "dynamiczone" && Array.isArray(attributeValue)) {
+      for (const item of attributeValue) {
+        if (!item || typeof item !== "object") continue;
+        const componentUid = item.__component;
+        const tempKey = item.__temp_key__;
+        if (componentUid) pushItem(componentUid, tempKey);
+      }
+      continue;
+    }
+    if (attribute.type === "component" && attribute.component) {
+      const componentUid = attribute.component;
+      if (attribute.repeatable && Array.isArray(attributeValue)) {
+        for (let i = 0; i < attributeValue.length; i++) {
+          const item = attributeValue[i];
+          pushItem(componentUid, item?.__temp_key__);
+        }
+      } else {
+        pushItem(componentUid);
+      }
+    }
+  }
+  return items;
+};
+const ComponentPreviewPanel = () => {
+  const { components, contentType, isCreatingEntry } = unstable_useContentManagerContext();
+  const values = useForm("ComponentPreviewPanel", (state) => state.values);
+  const { get } = useFetchClient();
+  const [optionsMap, setOptionsMap] = useState({});
+  useEffect(() => {
+    let cancelled = false;
+    get("/api/component-preview-image/options").then(({ data }) => {
+      if (!cancelled) setOptionsMap(data ?? {});
+    }).catch(() => {
+      if (!cancelled) setOptionsMap({});
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const previewItems = collectPreviewItems(
+    values,
+    contentType?.attributes,
+    components,
+    optionsMap
+  );
+  if (isCreatingEntry) {
+    return {
+      title: "Component previews",
+      content: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "Save this entry once to load component previews." })
+    };
+  }
+  if (previewItems.length === 0) {
+    return {
+      title: "Component previews",
+      content: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "No component previews are available for this entry yet." })
+    };
+  }
+  return {
+    title: "Component previews",
+    content: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 4, alignItems: "stretch", children: previewItems.map((item, index2) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        borderColor: "neutral200",
+        background: "neutral0",
+        hasRadius: true,
+        padding: 3,
+        shadow: "tableShadow",
+        width: "100%",
+        overflow: "hidden",
+        style: { boxSizing: "border-box" },
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, alignItems: "stretch", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.previewUrl,
+              alt: item.previewName || item.displayName,
+              style: {
+                width: "100%",
+                maxWidth: "100%",
+                display: "block",
+                borderRadius: "8px",
+                border: "1px solid #dcdce4",
+                objectFit: "cover",
+                boxSizing: "border-box"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              gap: 2,
+              width: "100%",
+              children: [
+                /* @__PURE__ */ jsxs(Box, { style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral800", children: item.previewName || item.displayName }),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      textColor: "neutral600",
+                      style: {
+                        display: "block",
+                        overflowWrap: "anywhere",
+                        wordBreak: "break-word"
+                      },
+                      children: item.uid
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "tertiary",
+                    size: "S",
+                    tag: "a",
+                    href: item.previewUrl,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    endIcon: /* @__PURE__ */ jsx(ExternalLink, {}),
+                    style: { flexShrink: 0 },
+                    children: "Open"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      },
+      item.tempKey ?? `${index2}-${item.uid}`
+    )) })
+  };
+};
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "preview-image",
+      pluginId: "component-preview-image",
+      type: "string",
+      inputSize: { default: 12, isResizable: false },
+      intlLabel: {
+        id: "component-preview-image.preview-image.label",
+        defaultMessage: "Preview Image"
+      },
+      intlDescription: {
+        id: "component-preview-image.preview-image.description",
+        defaultMessage: "Schema-level preview image — set the image URL once in the Content-Type Builder, shown in the edit-view side panel"
+      },
+      components: {
+        Input: async () => import("../_chunks/PreviewImageInput-BcPJkyKS.mjs").then((mod) => ({
+          default: mod.PreviewImageInput
+        }))
+      },
+      options: {
+        base: [
+          {
+            name: "options.url",
+            type: "text",
+            intlLabel: {
+              id: "component-preview-image.options.url.label",
+              defaultMessage: "Preview Image URL"
+            },
+            description: {
+              id: "component-preview-image.options.url.description",
+              defaultMessage: "Direct URL of the image to display in the preview panel"
+            }
+          }
+        ]
+      }
+    });
+  },
+  bootstrap(app) {
+    app.getPlugin("content-manager").apis.addEditViewSidePanel([ComponentPreviewPanel]);
+  }
+};
+export {
+  index as default
+};

package/dist/server/index.js

@@ -0,0 +1,56 @@
+"use strict";
+const CUSTOM_FIELD_KEY = "plugin::component-preview-image.preview-image";
+const optionsController = ({ strapi }) => ({
+  async getOptions(ctx) {
+    const result = {};
+    for (const [uid, schema] of Object.entries(strapi.components)) {
+      for (const attr of Object.values(schema.attributes)) {
+        if (attr.type === "customField" && attr.customField === CUSTOM_FIELD_KEY && attr.options?.url) {
+          result[uid] = {
+            name: schema.info?.displayName || uid,
+            url: attr.options.url
+          };
+          break;
+        }
+      }
+    }
+    ctx.body = result;
+  }
+});
+const PLUGIN_NAME = "component-preview-image";
+const index = {
+  register({ strapi }) {
+    strapi.customFields.register({
+      name: "preview-image",
+      plugin: PLUGIN_NAME,
+      type: "string"
+    });
+  },
+  bootstrap() {
+  },
+  destroy() {
+  },
+  config: {},
+  routes: {
+    "content-api": {
+      type: "content-api",
+      routes: [
+        {
+          method: "GET",
+          path: "/options",
+          handler: "options.getOptions",
+          config: {
+            auth: false
+          }
+        }
+      ]
+    }
+  },
+  controllers: {
+    options: optionsController
+  },
+  services: {},
+  policies: {},
+  middlewares: {}
+};
+module.exports = index;

package/dist/server/index.mjs

@@ -0,0 +1,57 @@
+const CUSTOM_FIELD_KEY = "plugin::component-preview-image.preview-image";
+const optionsController = ({ strapi }) => ({
+  async getOptions(ctx) {
+    const result = {};
+    for (const [uid, schema] of Object.entries(strapi.components)) {
+      for (const attr of Object.values(schema.attributes)) {
+        if (attr.type === "customField" && attr.customField === CUSTOM_FIELD_KEY && attr.options?.url) {
+          result[uid] = {
+            name: schema.info?.displayName || uid,
+            url: attr.options.url
+          };
+          break;
+        }
+      }
+    }
+    ctx.body = result;
+  }
+});
+const PLUGIN_NAME = "component-preview-image";
+const index = {
+  register({ strapi }) {
+    strapi.customFields.register({
+      name: "preview-image",
+      plugin: PLUGIN_NAME,
+      type: "string"
+    });
+  },
+  bootstrap() {
+  },
+  destroy() {
+  },
+  config: {},
+  routes: {
+    "content-api": {
+      type: "content-api",
+      routes: [
+        {
+          method: "GET",
+          path: "/options",
+          handler: "options.getOptions",
+          config: {
+            auth: false
+          }
+        }
+      ]
+    }
+  },
+  controllers: {
+    options: optionsController
+  },
+  services: {},
+  policies: {},
+  middlewares: {}
+};
+export {
+  index as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devx-labs/strapi-preview",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Strapi 5 plugin that adds a preview-image custom field (configured per component in the Content-Type Builder with a direct image URL) and renders a side panel in the edit view showing each component's preview image in dynamic-zone order.",
   "keywords": [
     "strapi",
@@ -11,9 +11,8 @@
     "custom-field",
     "side-panel"
   ],
-  "author": {
-    "name": "Pratham Bhatia"
-  },
+  "type": "commonjs",
+  "author": "Pratham Bhatia",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,33 +22,51 @@
   "bugs": {
     "url": "https://github.com/prathambdevx/strapi-component-preview/issues"
   },
-  "main": "./strapi-server.js",
   "exports": {
     "./package.json": "./package.json",
     "./strapi-admin": {
-      "import": "./strapi-admin.js",
-      "default": "./strapi-admin.js"
+      "source": "./admin/src/index.tsx",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
     },
     "./strapi-server": {
-      "require": "./strapi-server.js",
-      "default": "./strapi-server.js"
-    },
-    ".": "./strapi-server.js"
+      "source": "./server/src/index.ts",
+      "import": "./dist/server/index.mjs",
+      "require": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    }
   },
   "files": [
-    "admin",
-    "server",
-    "strapi-admin.js",
-    "strapi-server.js",
+    "dist",
     "README.md",
     "LICENSE"
   ],
+  "scripts": {
+    "build": "strapi-plugin build",
+    "watch": "strapi-plugin watch",
+    "verify": "strapi-plugin verify"
+  },
   "strapi": {
     "name": "component-preview-image",
     "displayName": "Strapi Preview",
     "description": "Adds a preview-image custom field (URL configured in CTB) and an edit-view side panel that displays those images.",
     "kind": "plugin"
   },
+  "dependencies": {},
+  "devDependencies": {
+    "@strapi/sdk-plugin": "^5.3.2",
+    "@strapi/strapi": "^5.0.0",
+    "@strapi/design-system": "^2.0.0-rc.21",
+    "@strapi/icons": "^2.0.0-rc.21",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0",
+    "styled-components": "^6.0.0",
+    "typescript": "^5.0.0"
+  },
   "peerDependencies": {
     "@strapi/content-manager": ">=5.0.0",
     "@strapi/design-system": ">=2.0.0-0",

package/admin/src/components/ComponentPreviewPanel.tsx

@@ -1,206 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Box, Button, Flex, Typography } from '@strapi/design-system';
-import type { PanelComponent } from '@strapi/content-manager/strapi-admin';
-import { unstable_useContentManagerContext } from '@strapi/content-manager/strapi-admin';
-import { useForm, useFetchClient } from '@strapi/strapi/admin';
-import { ExternalLink } from '@strapi/icons';
-
-type SchemaAttribute = {
-  type?: string;
-  component?: string;
-  repeatable?: boolean;
-};
-
-type SchemaDefinition = {
-  attributes?: Record<string, SchemaAttribute>;
-  info?: { displayName?: string };
-};
-
-type PreviewOption = { name: string; url: string };
-
-type PreviewItem = {
-  uid: string;
-  displayName: string;
-  previewUrl: string;
-  previewName: string;
-  count: number;
-  tempKey?: string;
-};
-
-const collectPreviewItems = (
-  value: unknown,
-  attributes: Record<string, SchemaAttribute> | undefined,
-  componentSchemas: Record<string, SchemaDefinition>,
-  optionsMap: Record<string, PreviewOption>
-): PreviewItem[] => {
-  const items: PreviewItem[] = [];
-
-  if (!value || !attributes || typeof value !== 'object') return items;
-
-  const pushItem = (componentUid: string, tempKey?: string) => {
-    const opts = optionsMap[componentUid];
-    if (!opts) return;
-    const schema = componentSchemas[componentUid];
-    items.push({
-      uid: componentUid,
-      displayName: schema?.info?.displayName ?? componentUid,
-      previewUrl: opts.url,
-      previewName: opts.name,
-      count: 1,
-      tempKey,
-    });
-  };
-
-  for (const [attributeName, attribute] of Object.entries(attributes)) {
-    const attributeValue = (value as Record<string, unknown>)[attributeName];
-    if (!attributeValue) continue;
-
-    if (attribute.type === 'dynamiczone' && Array.isArray(attributeValue)) {
-      for (const item of attributeValue) {
-        if (!item || typeof item !== 'object') continue;
-        const componentUid = (item as { __component?: string }).__component;
-        const tempKey = (item as { __temp_key__?: string }).__temp_key__;
-        if (componentUid) pushItem(componentUid, tempKey);
-      }
-      continue;
-    }
-
-    if (attribute.type === 'component' && attribute.component) {
-      const componentUid = attribute.component;
-      if (attribute.repeatable && Array.isArray(attributeValue)) {
-        for (let i = 0; i < attributeValue.length; i++) {
-          const item = attributeValue[i] as { __temp_key__?: string } | undefined;
-          pushItem(componentUid, item?.__temp_key__);
-        }
-      } else {
-        pushItem(componentUid);
-      }
-    }
-  }
-
-  return items;
-};
-
-export const ComponentPreviewPanel: PanelComponent = () => {
-  const { components, contentType, isCreatingEntry } = unstable_useContentManagerContext();
-  const values = useForm('ComponentPreviewPanel', (state) => state.values);
-  const { get } = useFetchClient();
-  const [optionsMap, setOptionsMap] = useState<Record<string, PreviewOption>>({});
-
-  useEffect(() => {
-    let cancelled = false;
-
-    get('/api/component-preview-image/options')
-      .then(({ data }: { data: Record<string, PreviewOption> }) => {
-        if (!cancelled) setOptionsMap(data ?? {});
-      })
-      .catch(() => {
-        if (!cancelled) setOptionsMap({});
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const previewItems = collectPreviewItems(
-    values,
-    contentType?.attributes,
-    components as Record<string, SchemaDefinition>,
-    optionsMap
-  );
-
-  if (isCreatingEntry) {
-    return {
-      title: 'Component previews',
-      content: (
-        <Typography variant="omega" textColor="neutral600">
-          Save this entry once to load component previews.
-        </Typography>
-      ),
-    };
-  }
-
-  if (previewItems.length === 0) {
-    return {
-      title: 'Component previews',
-      content: (
-        <Typography variant="omega" textColor="neutral600">
-          No component previews are available for this entry yet.
-        </Typography>
-      ),
-    };
-  }
-
-  return {
-    title: 'Component previews',
-    content: (
-      <Flex direction="column" gap={4} alignItems="stretch">
-        {previewItems.map((item, index) => (
-          <Box
-            key={item.tempKey ?? `${index}-${item.uid}`}
-            borderColor="neutral200"
-            background="neutral0"
-            hasRadius
-            padding={3}
-            shadow="tableShadow"
-            width="100%"
-            overflow="hidden"
-            style={{ boxSizing: 'border-box' }}
-          >
-            <Flex direction="column" gap={3} alignItems="stretch">
-              <img
-                src={item.previewUrl}
-                alt={item.previewName || item.displayName}
-                style={{
-                  width: '100%',
-                  maxWidth: '100%',
-                  display: 'block',
-                  borderRadius: '8px',
-                  border: '1px solid #dcdce4',
-                  objectFit: 'cover',
-                  boxSizing: 'border-box',
-                }}
-              />
-              <Flex
-                justifyContent="space-between"
-                alignItems="flex-start"
-                gap={2}
-                width="100%"
-              >
-                <Box style={{ minWidth: 0, flex: 1 }}>
-                  <Typography variant="sigma" textColor="neutral800">
-                    {item.previewName || item.displayName}
-                  </Typography>
-                  <Typography
-                    variant="pi"
-                    textColor="neutral600"
-                    style={{
-                      display: 'block',
-                      overflowWrap: 'anywhere',
-                      wordBreak: 'break-word',
-                    }}
-                  >
-                    {item.uid}
-                  </Typography>
-                </Box>
-                <Button
-                  variant="tertiary"
-                  size="S"
-                  tag="a"
-                  href={item.previewUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  endIcon={<ExternalLink />}
-                  style={{ flexShrink: 0 }}
-                >
-                  Open
-                </Button>
-              </Flex>
-            </Flex>
-          </Box>
-        ))}
-      </Flex>
-    ),
-  };
-};

package/admin/src/components/PreviewImageInput.tsx

@@ -1,31 +0,0 @@
-import { Flex, LinkButton } from '@strapi/design-system';
-import { ExternalLink } from '@strapi/icons';
-
-type PreviewImageInputProps = {
-  attribute?: {
-    options?: {
-      url?: string;
-    };
-  };
-};
-
-export const PreviewImageInput = ({ attribute }: PreviewImageInputProps) => {
-  const url = attribute?.options?.url;
-
-  if (!url) return null;
-
-  return (
-    <Flex justifyContent="flex-end">
-      <LinkButton
-        href={url}
-        target="_blank"
-        rel="noreferrer"
-        variant="tertiary"
-        size="S"
-        endIcon={<ExternalLink />}
-      >
-        Preview
-      </LinkButton>
-    </Flex>
-  );
-};

package/admin/src/index.tsx

@@ -1,47 +0,0 @@
-import { ComponentPreviewPanel } from './components/ComponentPreviewPanel';
-
-export default {
-  register(app: any) {
-    app.customFields.register({
-      name: 'preview-image',
-      pluginId: 'component-preview-image',
-      type: 'string',
-      inputSize: { default: 12, isResizable: false },
-      intlLabel: {
-        id: 'component-preview-image.preview-image.label',
-        defaultMessage: 'Preview Image',
-      },
-      intlDescription: {
-        id: 'component-preview-image.preview-image.description',
-        defaultMessage:
-          'Schema-level preview image — set the image URL once in the Content-Type Builder, shown in the edit-view side panel',
-      },
-      components: {
-        Input: async () =>
-          import('./components/PreviewImageInput').then((mod) => ({
-            default: mod.PreviewImageInput,
-          })),
-      },
-      options: {
-        base: [
-          {
-            name: 'options.url',
-            type: 'text',
-            intlLabel: {
-              id: 'component-preview-image.options.url.label',
-              defaultMessage: 'Preview Image URL',
-            },
-            description: {
-              id: 'component-preview-image.options.url.description',
-              defaultMessage: 'Direct URL of the image to display in the preview panel',
-            },
-          },
-        ],
-      },
-    });
-  },
-
-  bootstrap(app: any) {
-    app.getPlugin('content-manager').apis.addEditViewSidePanel([ComponentPreviewPanel]);
-  },
-};

package/server/src/controllers/options.ts

@@ -1,27 +0,0 @@
-import type { Core } from '@strapi/strapi';
-
-const CUSTOM_FIELD_KEY = 'plugin::component-preview-image.preview-image';
-
-export default ({ strapi }: { strapi: Core.Strapi }) => ({
-  async getOptions(ctx: any) {
-    const result: Record<string, { name: string; url: string }> = {};
-
-    for (const [uid, schema] of Object.entries(strapi.components as Record<string, any>)) {
-      for (const attr of Object.values(schema.attributes as Record<string, any>)) {
-        if (
-          attr.type === 'customField' &&
-          attr.customField === CUSTOM_FIELD_KEY &&
-          attr.options?.url
-        ) {
-          result[uid] = {
-            name: schema.info?.displayName || uid,
-            url: attr.options.url,
-          };
-          break;
-        }
-      }
-    }
-
-    ctx.body = result;
-  },
-});

package/server/src/index.ts

@@ -1,43 +0,0 @@
-import type { Core } from '@strapi/strapi';
-import optionsController from './controllers/options';
-
-const PLUGIN_NAME = 'component-preview-image';
-
-export default {
-  register({ strapi }: { strapi: Core.Strapi }) {
-    strapi.customFields.register({
-      name: 'preview-image',
-      plugin: PLUGIN_NAME,
-      type: 'string',
-    });
-  },
-
-  bootstrap() {},
-  destroy() {},
-
-  config: {},
-
-  routes: {
-    'content-api': {
-      type: 'content-api',
-      routes: [
-        {
-          method: 'GET',
-          path: '/options',
-          handler: 'options.getOptions',
-          config: {
-            auth: false,
-          },
-        },
-      ],
-    },
-  },
-
-  controllers: {
-    options: optionsController,
-  },
-
-  services: {},
-  policies: {},
-  middlewares: {},
-};

package/server/src/routes/index.ts

@@ -1,10 +0,0 @@
-export default [
-  {
-    method: 'GET',
-    path: '/options',
-    handler: 'options.getOptions',
-    config: {
-      auth: false,
-    },
-  },
-];

package/strapi-admin.js

@@ -1 +0,0 @@
-export { default } from './admin/src/index';

package/strapi-server.js

@@ -1,61 +0,0 @@
-'use strict';
-
-const CUSTOM_FIELD_KEY = 'plugin::component-preview-image.preview-image';
-
-module.exports = {
-  register({ strapi }) {
-    strapi.customFields.register({
-      name: 'preview-image',
-      plugin: 'component-preview-image',
-      type: 'string',
-      inputSize: { default: 12, isResizable: false },
-    });
-  },
-
-  bootstrap() {},
-  destroy() {},
-  config: {},
-
-  routes: {
-    'content-api': {
-      type: 'content-api',
-      routes: [
-        {
-          method: 'GET',
-          path: '/options',
-          handler: 'options.getOptions',
-          config: { auth: false },
-        },
-      ],
-    },
-  },
-
-  controllers: {
-    options: ({ strapi }) => ({
-      async getOptions(ctx) {
-        const result = {};
-
-        for (const [uid, schema] of Object.entries(strapi.components || {})) {
-          for (const attr of Object.values(schema.attributes || {})) {
-            if (
-              attr.customField === CUSTOM_FIELD_KEY &&
-              attr.options?.url
-            ) {
-              result[uid] = {
-                name: schema.info?.displayName || uid,
-                url: attr.options.url,
-              };
-              break;
-            }
-          }
-        }
-
-        ctx.body = result;
-      },
-    }),
-  },
-
-  services: {},
-  policies: {},
-  middlewares: {},
-};