@kontainer/strapi-plugin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kontainer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,129 @@
+# Strapi plugin: Kontainer DAM
+
+[Kontainer](https://kontainer.com) integration for **Strapi 5**. Content
+editors pick images, videos and files straight from your Kontainer DAM inside
+the Strapi editor — Strapi stores only a JSON reference to the asset, never
+the file. Kontainer stays the single source of truth.
+
+## Features
+
+- **`kontainer.media` custom field** — a "Choose from Kontainer" button on any
+  content type opens the Kontainer file picker. Selecting a file stores its
+  reference on the entry:
+  - `fileId`, `fileName`, `folderId` — identifiers for retrieving the asset
+  - `url` — CDN URL, including the chosen **download template**
+    (`?d=<templateId>`), plus `urlBaseName` and `originalUrl`
+  - `thumbnailUrl`, `type`, `extension`, dimensions and size
+  - **all texts**: `alt`, `description` and every Kontainer custom field
+    (`cf`) — stored in the JSON alongside the reference
+- **Download templates** — editors apply crop/resize/format templates directly
+  in the picker; the resulting CDN URL and template id are stored.
+- **File usage endpoint** — `GET /api/kontainer/usage/:fileId` reports every
+  entry referencing a Kontainer file, across drafts, published versions,
+  locales, components and dynamic zones. Lets Kontainer show where a file is
+  used before it is changed or deleted.
+- **No duplication** — nothing is uploaded to the Strapi media library.
+
+## Requirements
+
+- Strapi v5 (built and tested on 5.x with the Plugin SDK)
+- A Kontainer account (`https://yourcompany.kontainer.com`)
+
+## Installation
+
+```sh
+npm install @kontainer/strapi-plugin
+# or
+yarn add @kontainer/strapi-plugin
+```
+
+## Configuration
+
+Open **Settings → Kontainer → Configuration** in the admin panel and enter
+your Kontainer URL (e.g. `https://yourcompany.kontainer.com`). That's it — no
+code changes required.
+
+The plugin automatically extends the admin panel's Content-Security-Policy so
+thumbnails from `*.kontainer.com` (and any URL configured via file config)
+load in the editor.
+
+<details>
+<summary>Optional: configure via environment instead</summary>
+
+The admin-panel setting wins; this is a fallback for infrastructure-as-code
+setups:
+
+```ts
+// config/plugins.ts
+export default ({ env }) => ({
+  kontainer: {
+    enabled: true,
+    config: {
+      url: env('KONTAINER_URL', ''),
+    },
+  },
+});
+```
+
+If you use a custom (non-`kontainer.com`) domain configured only through the
+admin panel, add it to `img-src`/`media-src` in `config/middlewares.ts` — the
+plugin logs a warning at startup when this applies.
+
+</details>
+
+## Usage
+
+### Add the field to a content type
+
+In the Content-Type Builder choose **Custom fields → Kontainer media**, or add
+it to the schema directly:
+
+```json
+"hero": {
+  "type": "customField",
+  "customField": "plugin::kontainer.media"
+}
+```
+
+### Consume from your frontend
+
+The stored reference is returned as-is by the Strapi content API:
+
+```ts
+const page = await fetch(`${STRAPI_URL}/api/pages/${documentId}`).then((r) => r.json());
+const { url, alt } = page.data.hero; // request the asset from Kontainer's CDN
+```
+
+### File usage
+
+```
+GET /api/kontainer/usage/:fileId
+Authorization: Bearer <strapi api token>
+
+{
+  "fileId": "5764",
+  "count": 1,
+  "data": [
+    {
+      "contentType": "api::page.page",
+      "field": "hero",
+      "documentId": "m3q2h...",
+      "id": 1,
+      "locale": null,
+      "status": "published"
+    }
+  ]
+}
+```
+
+## Development
+
+```sh
+npm install
+npm run watch   # rebuild on change
+npm run verify  # validate the package before publishing
+```
+
+## License
+
+[MIT](./LICENSE) © Kontainer

package/dist/admin/KontainerMediaInput-C6wPHxqb.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const admin = require("@strapi/strapi/admin");
+const reactIntl = require("react-intl");
+const index = require("./index-CMAfPTry.js");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const PICKER_WINDOW_FEATURES = "location=yes,height=800,width=1200,scrollbars=yes,status=yes";
+const toFiles = (value) => {
+  let parsed = null;
+  if (typeof value === "string") {
+    try {
+      parsed = JSON.parse(value);
+    } catch {
+      parsed = null;
+    }
+  } else if (value && typeof value === "object") {
+    parsed = value;
+  }
+  if (!parsed) return [];
+  return Array.isArray(parsed) ? parsed : [parsed];
+};
+const KontainerMediaInput = React__namespace.forwardRef(
+  ({ name, value, onChange, error, hint, label, labelAction, required, disabled }, ref) => {
+    const { formatMessage } = reactIntl.useIntl();
+    const { get } = admin.useFetchClient();
+    const [kontainerUrl, setKontainerUrl] = React__namespace.useState(null);
+    const messageHandler = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      let mounted = true;
+      get("/kontainer/config").then(({ data }) => {
+        if (mounted) setKontainerUrl((data.url ?? "").replace(/\/+$/, ""));
+      }).catch(() => {
+        if (mounted) setKontainerUrl("");
+      });
+      return () => {
+        mounted = false;
+        if (messageHandler.current) {
+          window.removeEventListener("message", messageHandler.current);
+        }
+      };
+    }, [get]);
+    const files = toFiles(value);
+    const openPicker = () => {
+      if (!kontainerUrl) return;
+      if (messageHandler.current) {
+        window.removeEventListener("message", messageHandler.current);
+      }
+      const picker = window.open(
+        `${kontainerUrl}/?cmsMode=1`,
+        "kontainer-picker",
+        PICKER_WINDOW_FEATURES
+      );
+      const handler = (event) => {
+        if (event.origin !== new URL(kontainerUrl).origin) return;
+        let data = event.data;
+        if (typeof data === "string") {
+          try {
+            data = JSON.parse(data);
+          } catch {
+            return;
+          }
+        }
+        if (!data || typeof data !== "object") return;
+        window.removeEventListener("message", handler);
+        messageHandler.current = null;
+        onChange({
+          target: { name, value: JSON.stringify(data), type: "json" }
+        });
+        picker?.close();
+      };
+      messageHandler.current = handler;
+      window.addEventListener("message", handler);
+    };
+    const clear = () => {
+      onChange({ target: { name, value: null, type: "json" } });
+    };
+    const notConfigured = kontainerUrl === "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, error, hint, required, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+      files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 4, paddingTop: 2, paddingBottom: 2, wrap: "wrap", children: files.map((file, index2) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+        (file.thumbnailUrl || file.type === "image") && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: file.thumbnailUrl || file.url,
+            alt: file.alt || file.fileName || "",
+            style: { height: "6.4rem", borderRadius: "4px" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", textColor: "neutral800", children: file.fileName ?? String(file.fileId ?? "") }),
+          file.alt ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: file.alt }) : null
+        ] })
+      ] }, `${file.fileId ?? index2}`)) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, paddingTop: files.length ? 0 : 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            ref,
+            onClick: openPicker,
+            disabled: disabled || !kontainerUrl,
+            variant: "secondary",
+            children: formatMessage(
+              files.length ? {
+                id: index.getTranslation("input.replace"),
+                defaultMessage: "Replace"
+              } : {
+                id: index.getTranslation("input.choose"),
+                defaultMessage: "Choose from Kontainer"
+              }
+            )
+          }
+        ),
+        files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: clear, disabled, variant: "danger-light", children: formatMessage({
+          id: index.getTranslation("input.remove"),
+          defaultMessage: "Remove"
+        }) })
+      ] }),
+      notConfigured && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: formatMessage({
+        id: index.getTranslation("input.not-configured"),
+        defaultMessage: "Kontainer URL is not configured. Set it under Settings → Kontainer."
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] });
+  }
+);
+KontainerMediaInput.displayName = "KontainerMediaInput";
+exports.default = KontainerMediaInput;

package/dist/admin/KontainerMediaInput-DmEdEpue.mjs

@@ -0,0 +1,130 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Field, Flex, Typography, Button } from "@strapi/design-system";
+import { useFetchClient } from "@strapi/strapi/admin";
+import { useIntl } from "react-intl";
+import { g as getTranslation } from "./index-hpPTiq45.mjs";
+const PICKER_WINDOW_FEATURES = "location=yes,height=800,width=1200,scrollbars=yes,status=yes";
+const toFiles = (value) => {
+  let parsed = null;
+  if (typeof value === "string") {
+    try {
+      parsed = JSON.parse(value);
+    } catch {
+      parsed = null;
+    }
+  } else if (value && typeof value === "object") {
+    parsed = value;
+  }
+  if (!parsed) return [];
+  return Array.isArray(parsed) ? parsed : [parsed];
+};
+const KontainerMediaInput = React.forwardRef(
+  ({ name, value, onChange, error, hint, label, labelAction, required, disabled }, ref) => {
+    const { formatMessage } = useIntl();
+    const { get } = useFetchClient();
+    const [kontainerUrl, setKontainerUrl] = React.useState(null);
+    const messageHandler = React.useRef(null);
+    React.useEffect(() => {
+      let mounted = true;
+      get("/kontainer/config").then(({ data }) => {
+        if (mounted) setKontainerUrl((data.url ?? "").replace(/\/+$/, ""));
+      }).catch(() => {
+        if (mounted) setKontainerUrl("");
+      });
+      return () => {
+        mounted = false;
+        if (messageHandler.current) {
+          window.removeEventListener("message", messageHandler.current);
+        }
+      };
+    }, [get]);
+    const files = toFiles(value);
+    const openPicker = () => {
+      if (!kontainerUrl) return;
+      if (messageHandler.current) {
+        window.removeEventListener("message", messageHandler.current);
+      }
+      const picker = window.open(
+        `${kontainerUrl}/?cmsMode=1`,
+        "kontainer-picker",
+        PICKER_WINDOW_FEATURES
+      );
+      const handler = (event) => {
+        if (event.origin !== new URL(kontainerUrl).origin) return;
+        let data = event.data;
+        if (typeof data === "string") {
+          try {
+            data = JSON.parse(data);
+          } catch {
+            return;
+          }
+        }
+        if (!data || typeof data !== "object") return;
+        window.removeEventListener("message", handler);
+        messageHandler.current = null;
+        onChange({
+          target: { name, value: JSON.stringify(data), type: "json" }
+        });
+        picker?.close();
+      };
+      messageHandler.current = handler;
+      window.addEventListener("message", handler);
+    };
+    const clear = () => {
+      onChange({ target: { name, value: null, type: "json" } });
+    };
+    const notConfigured = kontainerUrl === "";
+    return /* @__PURE__ */ jsxs(Field.Root, { name, error, hint, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      files.length > 0 && /* @__PURE__ */ jsx(Flex, { gap: 4, paddingTop: 2, paddingBottom: 2, wrap: "wrap", children: files.map((file, index) => /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+        (file.thumbnailUrl || file.type === "image") && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: file.thumbnailUrl || file.url,
+            alt: file.alt || file.fileName || "",
+            style: { height: "6.4rem", borderRadius: "4px" }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+          /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", textColor: "neutral800", children: file.fileName ?? String(file.fileId ?? "") }),
+          file.alt ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: file.alt }) : null
+        ] })
+      ] }, `${file.fileId ?? index}`)) }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, paddingTop: files.length ? 0 : 1, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            onClick: openPicker,
+            disabled: disabled || !kontainerUrl,
+            variant: "secondary",
+            children: formatMessage(
+              files.length ? {
+                id: getTranslation("input.replace"),
+                defaultMessage: "Replace"
+              } : {
+                id: getTranslation("input.choose"),
+                defaultMessage: "Choose from Kontainer"
+              }
+            )
+          }
+        ),
+        files.length > 0 && /* @__PURE__ */ jsx(Button, { onClick: clear, disabled, variant: "danger-light", children: formatMessage({
+          id: getTranslation("input.remove"),
+          defaultMessage: "Remove"
+        }) })
+      ] }),
+      notConfigured && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: formatMessage({
+        id: getTranslation("input.not-configured"),
+        defaultMessage: "Kontainer URL is not configured. Set it under Settings → Kontainer."
+      }) }),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+KontainerMediaInput.displayName = "KontainerMediaInput";
+export {
+  KontainerMediaInput as default
+};

package/dist/admin/Settings-fZTH8z6T.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const admin = require("@strapi/strapi/admin");
+const reactIntl = require("react-intl");
+const index = require("./index-CMAfPTry.js");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const VALIDATION_DEBOUNCE_MS = 500;
+const Settings = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { get, put } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const [url, setUrl] = React__namespace.useState("");
+  const [fileUrl, setFileUrl] = React__namespace.useState("");
+  const [loading, setLoading] = React__namespace.useState(true);
+  const [saving, setSaving] = React__namespace.useState(false);
+  const [validation, setValidation] = React__namespace.useState({ status: "idle" });
+  const validationSeq = React__namespace.useRef(0);
+  React__namespace.useEffect(() => {
+    get("/kontainer/settings").then(({ data }) => {
+      setUrl(data.url);
+      setFileUrl(data.fileUrl);
+    }).catch(() => {
+    }).finally(() => setLoading(false));
+  }, [get]);
+  React__namespace.useEffect(() => {
+    if (loading) return;
+    const seq = ++validationSeq.current;
+    const trimmed = url.trim();
+    if (!trimmed) {
+      setValidation({ status: "idle" });
+      return;
+    }
+    setValidation({ status: "checking" });
+    const timer = setTimeout(() => {
+      get("/kontainer/settings/validate", { params: { url: trimmed } }).then(({ data }) => {
+        if (seq !== validationSeq.current) return;
+        setValidation(
+          data.valid ? { status: "valid" } : { status: "invalid", reason: data.reason ?? "invalid-url" }
+        );
+      }).catch(() => {
+        if (seq !== validationSeq.current) return;
+        setValidation({ status: "invalid", reason: "unreachable" });
+      });
+    }, VALIDATION_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [url, loading, get]);
+  const save = async () => {
+    setSaving(true);
+    try {
+      await put("/kontainer/settings", { url: url.trim() });
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: index.getTranslation("settings.saved"),
+          defaultMessage: "Kontainer settings saved"
+        })
+      });
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: index.getTranslation("settings.save-error"),
+          defaultMessage: "Could not save — enter a valid http(s) URL"
+        })
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+  const invalidMessage = (reason) => formatMessage({
+    id: index.getTranslation(`settings.validation.${reason}`),
+    defaultMessage: reason === "not-kontainer" ? "This URL does not appear to be a Kontainer instance" : reason === "unreachable" ? "The Strapi server could not reach this URL" : "Not a valid URL"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 10, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 6, maxWidth: "60rem", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: "Kontainer" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: formatMessage({
+        id: index.getTranslation("settings.subtitle"),
+        defaultMessage: "Connect Strapi to your Kontainer DAM. Editors pick files from this Kontainer in the content editor."
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
+      {
+        name: "kontainer-url",
+        error: validation.status === "invalid" ? invalidMessage(validation.reason) : void 0,
+        hint: fileUrl ? formatMessage(
+          {
+            id: index.getTranslation("settings.url.hint-fallback"),
+            defaultMessage: "Leave empty to use the value from config/plugins: {fileUrl}"
+          },
+          { fileUrl }
+        ) : formatMessage({
+          id: index.getTranslation("settings.url.hint"),
+          defaultMessage: "Example: https://yourcompany.kontainer.com"
+        }),
+        style: { width: "100%" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+            id: index.getTranslation("settings.url.label"),
+            defaultMessage: "Kontainer URL"
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              placeholder: "https://yourcompany.kontainer.com",
+              value: url,
+              disabled: loading,
+              onChange: (e) => setUrl(e.target.value)
+            }
+          ),
+          validation.status === "checking" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
+            id: index.getTranslation("settings.validation.checking"),
+            defaultMessage: "Checking…"
+          }) }),
+          validation.status === "valid" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "success600", children: formatMessage({
+            id: index.getTranslation("settings.validation.valid"),
+            defaultMessage: "Kontainer instance detected"
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: save, loading: saving, disabled: loading, startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}), children: formatMessage({
+      id: index.getTranslation("settings.save"),
+      defaultMessage: "Save"
+    }) })
+  ] }) });
+};
+exports.default = Settings;