@qkix/strapi-plugin-blueprint 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 qkix
+
+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,151 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/qkix/strapi-plugins/main/packages/strapi-plugin-blueprint/docs/logo.png" alt="Blueprint" width="120" />
+</p>
+
+<h1 align="center">Blueprint for Strapi</h1>
+
+<p align="center">A diagram of your content types — <strong>including the components and dynamic zones everything else leaves out</strong>.</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@qkix/strapi-plugin-blueprint">
+    <img alt="npm version" src="https://img.shields.io/npm/v/@qkix/strapi-plugin-blueprint.svg" />
+  </a>
+  <a href="https://www.npmjs.com/package/@qkix/strapi-plugin-blueprint">
+    <img alt="npm downloads" src="https://img.shields.io/npm/dm/@qkix/strapi-plugin-blueprint.svg" />
+  </a>
+  <a href="https://github.com/qkix/strapi-plugins/blob/main/LICENSE">
+    <img alt="license" src="https://img.shields.io/npm/l/@qkix/strapi-plugin-blueprint.svg" />
+  </a>
+  <a href="https://buymeacoffee.com/qkix">
+    <img alt="Buy Me a Coffee" src="https://img.shields.io/badge/Buy%20Me%20a%20Coffee-support-FFDD00?logo=buymeacoffee&logoColor=black" />
+  </a>
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/qkix/strapi-plugins/main/packages/strapi-plugin-blueprint/docs/diagram.png" alt="A schema diagram: Page linked to Article by a relation, to Seo and Link as components, and to Quote and Link through a dynamic zone" width="900" />
+</p>
+
+## Why another one of these
+
+Every schema diagram for Strapi draws **relations only**. That is fine for a
+schema built out of relations, and useless for the way most Strapi projects are
+actually built — a handful of content types, and the real structure living in
+components and dynamic zones. Draw relations only and a modern schema comes out
+as a scattering of disconnected boxes.
+
+Blueprint draws all three, and tells them apart:
+
+| Line   | Means                      |
+| ------ | -------------------------- |
+| solid  | a relation                 |
+| dashed | a component                |
+| dotted | a member of a dynamic zone |
+
+A component is followed into whatever it contains, so a component of a component
+is on the picture too.
+
+## Install
+
+```sh
+npm install @qkix/strapi-plugin-blueprint
+```
+
+```ts
+// config/plugins.ts
+export default {
+  blueprint: {
+    enabled: true,
+  },
+};
+```
+
+Then open **Blueprint** in the main menu. There is nothing to configure and
+nothing to switch on per content type.
+
+## What you get
+
+**Drag to pan, scroll to zoom, click a box** to open it in the Content-Type
+Builder. The view fits the whole diagram when it opens and whenever what is
+drawn changes.
+
+Boxes that have nowhere to go do not pretend otherwise: a plugin's internal
+tables — Rewind's versions, upload's folders, anything under `admin::` — belong
+on the diagram because they are part of the schema, but the Content-Type Builder
+has no page for them, so they take no pointer and no hover.
+
+**Toggles, remembered between visits**: components and dynamic zones, Strapi's
+own `createdAt`-style fields, and the content types belonging to Strapi and to
+other plugins. Layout runs top-to-bottom or left-to-right.
+
+**Download SVG** — an actual vector, not a screenshot of one. It is a standalone
+document with its styles and arrowheads inline and nothing fetched from
+anywhere, so it works pasted into a README, opened from a downloads folder, or
+embedded in a docs site, and it stays sharp at any size.
+
+## Permissions
+
+One permission, `blueprint.read`, under **Settings → Administration panel →
+Roles**. There is nothing else to guard: the plugin only reads, and everything
+it shows is already visible to anyone who can open the Content-Type Builder.
+
+## Drawn on the server
+
+The diagram is laid out and rendered to SVG by the server, and the admin panel
+displays what it is given. Two things follow from that.
+
+The first is that **anything that can make an HTTP request can have the
+diagram** — a docs build, a CI job, a script that commits the current schema
+next to your code:
+
+```
+GET /blueprint/diagram.svg?components=true&direction=LR
+```
+
+The same options as the toolbar, as query parameters: `components`, `foreign`,
+`defaultFields`, `direction` (`TB` or `LR`) and `exclude`. `GET /blueprint/graph`
+returns the graph as JSON if you would rather draw it yourself. Both are admin
+routes, so they need an admin session.
+
+The second is that there is **no graph library in your admin panel**. Panning,
+zooming and clicking are about a hundred lines over an SVG. The plugins this
+replaces all reached for a React canvas library, and their issue trackers are
+what happened next: `styled-components` version errors, engine warnings, a Node
+20 incompatibility. A layout algorithm on the server has no opinion about your
+front end.
+
+## Configuration
+
+| Option    | Default | What it does                                  |
+| --------- | ------- | --------------------------------------------- |
+| `exclude` | `[]`    | Uids never to draw, whatever the toolbar says |
+
+```ts
+blueprint: {
+  enabled: true,
+  config: {
+    exclude: ['api::import-log.import-log'],
+  },
+},
+```
+
+The toolbar can hide things too. The difference is that this survives a reload
+and applies to the API as well — it is the answer to "this never belongs on the
+picture", not to "not right now".
+
+## Known limitations
+
+**Boxes stop at twelve fields** and count the rest as `+n more`. Strapi's own
+`File` has fifteen, and one box four times the height of its neighbours turns a
+diagram into a wall. The full list is a click away in the Content-Type Builder.
+
+**Layout is automatic, and cannot be nudged.** Dragging a box to a better spot
+and having it stay there is a real request on the plugins this replaces, and it
+is not built yet.
+
+**Polymorphic relations are not drawn.** A `morphToMany` has no single target to
+point at, so there is no honest line to draw for it. The field is still listed on
+its box.
+
+## License
+
+MIT © [qkix](https://github.com/qkix)

package/dist/_chunks/DiagramPage-F0OgJkQF.mjs

@@ -0,0 +1,275 @@
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import * as c from "react";
+import { useFetchClient as Y, Page as D, Layouts as O } from "@strapi/admin/strapi-admin";
+import { Box as L, Button as v, Flex as C, Checkbox as B, SingleSelect as F, SingleSelectOption as $, Loader as X, Typography as S } from "@strapi/design-system";
+import { Download as j } from "@strapi/icons";
+import { useNavigate as N } from "react-router-dom";
+import { useTheme as _ } from "styled-components";
+import { PLUGIN_ID as U } from "../admin/index.mjs";
+const W = 0.15, z = 3, P = { x: 0, y: 0, scale: 1 }, G = (n, s, r = 24) => {
+  if (n.width <= 0 || n.height <= 0) return P;
+  const a = Math.min(
+    1,
+    (s.width - r * 2) / n.width,
+    (s.height - r * 2) / n.height
+  );
+  return {
+    scale: a,
+    x: (s.width - n.width * a) / 2,
+    y: (s.height - n.height * a) / 2
+  };
+}, H = ({
+  svg: n,
+  onOpen: s,
+  view: r,
+  onViewChange: a,
+  fitTo: i,
+  refit: w
+}) => {
+  const u = c.useRef(null), l = c.useRef(
+    null
+  ), g = _(), y = c.useMemo(() => {
+    const t = g?.colors ?? {};
+    return {
+      "--bp-surface": t.neutral0,
+      "--bp-box": t.neutral0,
+      "--bp-box-component": t.neutral100,
+      "--bp-border": t.neutral200,
+      "--bp-accent": t.primary600,
+      "--bp-accent-component": t.success600,
+      "--bp-accent-single": t.warning600,
+      "--bp-title": t.neutral800,
+      "--bp-field": t.neutral800,
+      "--bp-type": t.neutral600,
+      "--bp-edge": t.neutral500 ?? t.neutral600,
+      "--bp-hover": t.primary100
+    };
+  }, [g]), p = c.useCallback(
+    (t) => {
+      if (!u.current) return;
+      t.preventDefault();
+      const e = u.current.getBoundingClientRect(), d = t.clientX - e.left, m = t.clientY - e.top, x = Math.exp(-t.deltaY / 400), T = Math.min(z, Math.max(W, r.scale * x)), E = T / r.scale;
+      a({
+        scale: T,
+        x: d - (d - r.x) * E,
+        y: m - (m - r.y) * E
+      });
+    },
+    [r, a]
+  );
+  c.useEffect(() => {
+    const t = u.current;
+    if (t)
+      return t.addEventListener("wheel", p, { passive: !1 }), () => t.removeEventListener("wheel", p);
+  }, [p]);
+  const R = `${i.width}x${i.height}x${w}`;
+  c.useEffect(() => {
+    const t = u.current;
+    if (!t) return;
+    const e = t.getBoundingClientRect();
+    a(G(i, { width: e.width, height: e.height }));
+  }, [R]);
+  const I = (t) => {
+    t.button === 0 && (l.current = { x: r.x, y: r.y, startX: t.clientX, startY: t.clientY }, t.target.setPointerCapture?.(t.pointerId));
+  }, k = (t) => {
+    const e = l.current;
+    e && a({
+      scale: r.scale,
+      x: e.x + (t.clientX - e.startX),
+      y: e.y + (t.clientY - e.startY)
+    });
+  }, h = (t) => {
+    const e = l.current;
+    if (l.current = null, !e || Math.abs(t.clientX - e.startX) > 3 || Math.abs(t.clientY - e.startY) > 3) return;
+    const m = t.target.closest?.("[data-uid]"), x = m?.getAttribute("data-uid");
+    x && m?.getAttribute("data-navigable") === "true" && s(x);
+  };
+  return /* @__PURE__ */ o(
+    L,
+    {
+      ref: u,
+      background: "neutral100",
+      hasRadius: !0,
+      overflow: "hidden",
+      position: "relative",
+      style: {
+        height: "100%",
+        cursor: l.current ? "grabbing" : "grab",
+        touchAction: "none"
+      },
+      onPointerDown: I,
+      onPointerMove: k,
+      onPointerUp: h,
+      onPointerLeave: () => {
+        l.current = null;
+      },
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            ...y,
+            transform: `translate(${r.x}px, ${r.y}px) scale(${r.scale})`,
+            transformOrigin: "0 0",
+            width: "max-content"
+          },
+          dangerouslySetInnerHTML: { __html: n }
+        }
+      )
+    }
+  );
+}, J = P, b = {
+  foreign: !1,
+  components: !0,
+  defaultFields: !1,
+  direction: "TB",
+  exclude: []
+}, K = {
+  diagram: `/${U}/diagram`
+}, V = (n) => ({
+  foreign: String(n.foreign),
+  components: String(n.components),
+  defaultFields: String(n.defaultFields),
+  direction: n.direction,
+  ...n.exclude.length > 0 ? { exclude: n.exclude.join(",") } : {}
+}), A = "blueprint:options", q = () => {
+  try {
+    const n = window.localStorage.getItem(A);
+    return n ? { ...b, ...JSON.parse(n) } : b;
+  } catch {
+    return b;
+  }
+}, M = (n) => {
+  try {
+    window.localStorage.setItem(A, JSON.stringify(n));
+  } catch {
+  }
+}, Q = (n, s = "blueprint.svg") => {
+  const r = new Blob([n], { type: "image/svg+xml;charset=utf-8" }), a = URL.createObjectURL(r), i = document.createElement("a");
+  i.href = a, i.download = s, document.body.appendChild(i), i.click(), i.remove(), URL.revokeObjectURL(a);
+}, Z = (n) => {
+  if (n.includes("::")) return `/plugins/content-type-builder/content-types/${n}`;
+  const [s] = n.split(".");
+  return `/plugins/content-type-builder/component-categories/${s}/${n}`;
+}, ct = () => {
+  const { get: n } = Y(), s = N(), [r, a] = c.useState(q), [i, w] = c.useState(null), [u, l] = c.useState(!0), [g, y] = c.useState(null), [p, R] = c.useState(J), [I, k] = c.useState(0);
+  c.useEffect(() => {
+    let e = !0;
+    return l(!0), y(null), n(K.diagram, { params: V(r) }).then(({ data: d }) => {
+      e && w(d);
+    }).catch(() => e && y("Could not build the diagram.")).finally(() => e && l(!1)), () => {
+      e = !1;
+    };
+  }, [n, r]);
+  const h = (e) => {
+    const d = { ...r, ...e };
+    a(d), M(d);
+  }, t = i?.counts;
+  return /* @__PURE__ */ f(D.Main, { children: [
+    /* @__PURE__ */ o(
+      O.Header,
+      {
+        title: "Blueprint",
+        subtitle: t ? `${t.nodes} types, ${t.components} components, ${t.edges} relations` : "Your content types and how they fit together",
+        primaryAction: /* @__PURE__ */ o(
+          v,
+          {
+            startIcon: /* @__PURE__ */ o(j, {}),
+            variant: "secondary",
+            disabled: !i,
+            onClick: () => i && Q(i.svg),
+            children: "Download SVG"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ f(O.Content, { children: [
+      /* @__PURE__ */ f(C, { gap: 4, wrap: "wrap", paddingBottom: 4, alignItems: "center", children: [
+        /* @__PURE__ */ o(
+          B,
+          {
+            checked: r.components,
+            onCheckedChange: (e) => h({ components: !!e }),
+            children: "Components & dynamic zones"
+          }
+        ),
+        /* @__PURE__ */ o(
+          B,
+          {
+            checked: r.defaultFields,
+            onCheckedChange: (e) => h({ defaultFields: !!e }),
+            children: "Strapi's own fields"
+          }
+        ),
+        /* @__PURE__ */ o(
+          B,
+          {
+            checked: r.foreign,
+            onCheckedChange: (e) => h({ foreign: !!e }),
+            children: "Plugin content types"
+          }
+        ),
+        /* @__PURE__ */ o(L, { minWidth: "180px", children: /* @__PURE__ */ f(
+          F,
+          {
+            "aria-label": "Layout direction",
+            value: r.direction,
+            onChange: (e) => h({ direction: e === "LR" ? "LR" : "TB" }),
+            children: [
+              /* @__PURE__ */ o($, { value: "TB", children: "Top to bottom" }),
+              /* @__PURE__ */ o($, { value: "LR", children: "Left to right" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ o(v, { variant: "tertiary", onClick: () => k((e) => e + 1), children: "Fit to screen" }),
+        /* @__PURE__ */ o(
+          v,
+          {
+            variant: "tertiary",
+            onClick: () => {
+              a(b), M(b);
+            },
+            children: "Reset options"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(
+        L,
+        {
+          hasRadius: !0,
+          borderColor: "neutral200",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          style: { height: "70vh" },
+          children: u ? /* @__PURE__ */ o(C, { justifyContent: "center", alignItems: "center", height: "100%", children: /* @__PURE__ */ o(X, { small: !0, children: "Building the diagram" }) }) : g ? /* @__PURE__ */ o(C, { justifyContent: "center", alignItems: "center", height: "100%", children: /* @__PURE__ */ o(S, { textColor: "danger600", children: g }) }) : i && i.counts.nodes > 0 ? /* @__PURE__ */ o(
+            H,
+            {
+              svg: i.svg,
+              view: p,
+              onViewChange: R,
+              fitTo: { width: i.width, height: i.height },
+              refit: I,
+              onOpen: (e) => s(Z(e))
+            }
+          ) : /* @__PURE__ */ f(
+            C,
+            {
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+              direction: "column",
+              gap: 2,
+              children: [
+                /* @__PURE__ */ o(S, { variant: "delta", children: "Nothing to draw yet" }),
+                /* @__PURE__ */ o(S, { textColor: "neutral600", children: "Create a content type, or switch on plugin content types above." })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o(L, { paddingTop: 2, children: /* @__PURE__ */ o(S, { variant: "pi", textColor: "neutral600", children: "Drag to pan, scroll to zoom, click a box to open it in the Content-Type Builder. Solid lines are relations, dashed are components, dotted are dynamic zones." }) })
+    ] })
+  ] });
+};
+export {
+  ct as DiagramPage
+};

package/dist/_chunks/DiagramPage-LORj1QlF.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),v=require("react"),j=require("@strapi/admin/strapi-admin"),s=require("@strapi/design-system"),I=require("@strapi/icons"),P=require("react-router-dom"),M=require("styled-components"),D=require("../admin/index.js");function E(t){if(t&&t.__esModule)return t;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(a,r,c.get?c:{enumerable:!0,get:()=>t[r]})}}return a.default=t,Object.freeze(a)}const l=E(v),_=.15,$=3,k={x:0,y:0,scale:1},A=(t,a,r=24)=>{if(t.width<=0||t.height<=0)return k;const c=Math.min(1,(a.width-r*2)/t.width,(a.height-r*2)/t.height);return{scale:c,x:(a.width-t.width*c)/2,y:(a.height-t.height*c)/2}},F=({svg:t,onOpen:a,view:r,onViewChange:c,fitTo:i,refit:S})=>{const h=l.useRef(null),d=l.useRef(null),p=M.useTheme(),y=l.useMemo(()=>{const e=p?.colors??{};return{"--bp-surface":e.neutral0,"--bp-box":e.neutral0,"--bp-box-component":e.neutral100,"--bp-border":e.neutral200,"--bp-accent":e.primary600,"--bp-accent-component":e.success600,"--bp-accent-single":e.warning600,"--bp-title":e.neutral800,"--bp-field":e.neutral800,"--bp-type":e.neutral600,"--bp-edge":e.neutral500??e.neutral600,"--bp-hover":e.primary100}},[p]),x=l.useCallback(e=>{if(!h.current)return;e.preventDefault();const n=h.current.getBoundingClientRect(),u=e.clientX-n.left,m=e.clientY-n.top,b=Math.exp(-e.deltaY/400),R=Math.min($,Math.max(_,r.scale*b)),B=R/r.scale;c({scale:R,x:u-(u-r.x)*B,y:m-(m-r.y)*B})},[r,c]);l.useEffect(()=>{const e=h.current;if(e)return e.addEventListener("wheel",x,{passive:!1}),()=>e.removeEventListener("wheel",x)},[x]);const C=`${i.width}x${i.height}x${S}`;l.useEffect(()=>{const e=h.current;if(!e)return;const n=e.getBoundingClientRect();c(A(i,{width:n.width,height:n.height}))},[C]);const L=e=>{e.button===0&&(d.current={x:r.x,y:r.y,startX:e.clientX,startY:e.clientY},e.target.setPointerCapture?.(e.pointerId))},w=e=>{const n=d.current;n&&c({scale:r.scale,x:n.x+(e.clientX-n.startX),y:n.y+(e.clientY-n.startY)})},g=e=>{const n=d.current;if(d.current=null,!n||Math.abs(e.clientX-n.startX)>3||Math.abs(e.clientY-n.startY)>3)return;const m=e.target.closest?.("[data-uid]"),b=m?.getAttribute("data-uid");b&&m?.getAttribute("data-navigable")==="true"&&a(b)};return o.jsx(s.Box,{ref:h,background:"neutral100",hasRadius:!0,overflow:"hidden",position:"relative",style:{height:"100%",cursor:d.current?"grabbing":"grab",touchAction:"none"},onPointerDown:L,onPointerMove:w,onPointerUp:g,onPointerLeave:()=>{d.current=null},children:o.jsx("div",{style:{...y,transform:`translate(${r.x}px, ${r.y}px) scale(${r.scale})`,transformOrigin:"0 0",width:"max-content"},dangerouslySetInnerHTML:{__html:t}})})},Y=k,f={foreign:!1,components:!0,defaultFields:!1,direction:"TB",exclude:[]},N={diagram:`/${D.PLUGIN_ID}/diagram`},X=t=>({foreign:String(t.foreign),components:String(t.components),defaultFields:String(t.defaultFields),direction:t.direction,...t.exclude.length>0?{exclude:t.exclude.join(",")}:{}}),T="blueprint:options",q=()=>{try{const t=window.localStorage.getItem(T);return t?{...f,...JSON.parse(t)}:f}catch{return f}},O=t=>{try{window.localStorage.setItem(T,JSON.stringify(t))}catch{}},U=(t,a="blueprint.svg")=>{const r=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),c=URL.createObjectURL(r),i=document.createElement("a");i.href=c,i.download=a,document.body.appendChild(i),i.click(),i.remove(),URL.revokeObjectURL(c)},z=t=>{if(t.includes("::"))return`/plugins/content-type-builder/content-types/${t}`;const[a]=t.split(".");return`/plugins/content-type-builder/component-categories/${a}/${t}`},W=()=>{const{get:t}=j.useFetchClient(),a=P.useNavigate(),[r,c]=l.useState(q),[i,S]=l.useState(null),[h,d]=l.useState(!0),[p,y]=l.useState(null),[x,C]=l.useState(Y),[L,w]=l.useState(0);l.useEffect(()=>{let n=!0;return d(!0),y(null),t(N.diagram,{params:X(r)}).then(({data:u})=>{n&&S(u)}).catch(()=>n&&y("Could not build the diagram.")).finally(()=>n&&d(!1)),()=>{n=!1}},[t,r]);const g=n=>{const u={...r,...n};c(u),O(u)},e=i?.counts;return o.jsxs(j.Page.Main,{children:[o.jsx(j.Layouts.Header,{title:"Blueprint",subtitle:e?`${e.nodes} types, ${e.components} components, ${e.edges} relations`:"Your content types and how they fit together",primaryAction:o.jsx(s.Button,{startIcon:o.jsx(I.Download,{}),variant:"secondary",disabled:!i,onClick:()=>i&&U(i.svg),children:"Download SVG"})}),o.jsxs(j.Layouts.Content,{children:[o.jsxs(s.Flex,{gap:4,wrap:"wrap",paddingBottom:4,alignItems:"center",children:[o.jsx(s.Checkbox,{checked:r.components,onCheckedChange:n=>g({components:!!n}),children:"Components & dynamic zones"}),o.jsx(s.Checkbox,{checked:r.defaultFields,onCheckedChange:n=>g({defaultFields:!!n}),children:"Strapi's own fields"}),o.jsx(s.Checkbox,{checked:r.foreign,onCheckedChange:n=>g({foreign:!!n}),children:"Plugin content types"}),o.jsx(s.Box,{minWidth:"180px",children:o.jsxs(s.SingleSelect,{"aria-label":"Layout direction",value:r.direction,onChange:n=>g({direction:n==="LR"?"LR":"TB"}),children:[o.jsx(s.SingleSelectOption,{value:"TB",children:"Top to bottom"}),o.jsx(s.SingleSelectOption,{value:"LR",children:"Left to right"})]})}),o.jsx(s.Button,{variant:"tertiary",onClick:()=>w(n=>n+1),children:"Fit to screen"}),o.jsx(s.Button,{variant:"tertiary",onClick:()=>{c(f),O(f)},children:"Reset options"})]}),o.jsx(s.Box,{hasRadius:!0,borderColor:"neutral200",borderWidth:"1px",borderStyle:"solid",style:{height:"70vh"},children:h?o.jsx(s.Flex,{justifyContent:"center",alignItems:"center",height:"100%",children:o.jsx(s.Loader,{small:!0,children:"Building the diagram"})}):p?o.jsx(s.Flex,{justifyContent:"center",alignItems:"center",height:"100%",children:o.jsx(s.Typography,{textColor:"danger600",children:p})}):i&&i.counts.nodes>0?o.jsx(F,{svg:i.svg,view:x,onViewChange:C,fitTo:{width:i.width,height:i.height},refit:L,onOpen:n=>a(z(n))}):o.jsxs(s.Flex,{justifyContent:"center",alignItems:"center",height:"100%",direction:"column",gap:2,children:[o.jsx(s.Typography,{variant:"delta",children:"Nothing to draw yet"}),o.jsx(s.Typography,{textColor:"neutral600",children:"Create a content type, or switch on plugin content types above."})]})}),o.jsx(s.Box,{paddingTop:2,children:o.jsx(s.Typography,{variant:"pi",textColor:"neutral600",children:"Drag to pan, scroll to zoom, click a box to open it in the Content-Type Builder. Solid lines are relations, dashed are components, dotted are dynamic zones."})})]})]})};exports.DiagramPage=W;

package/dist/admin/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@strapi/icons"),o=(n,e,i)=>{const r=n[e];return r?typeof r=="function"?r():Promise.resolve(r):new Promise((l,s)=>{(typeof queueMicrotask=="function"?queueMicrotask:setTimeout)(s.bind(null,new Error("Unknown variable dynamic import: "+e+(e.split("/").length!==i?". Note that variables only represent file names one level deep.":""))))})},t="blueprint",u={register(n){n.registerPlugin({id:t,name:t,isReady:!0}),n.addMenuLink({to:`/plugins/${t}`,icon:a.Graph,intlLabel:{id:`${t}.menu.label`,defaultMessage:"Blueprint"},Component:async()=>{const{DiagramPage:e}=await Promise.resolve().then(()=>require("../_chunks/DiagramPage-LORj1QlF.js"));return{default:e}},permissions:[{action:`plugin::${t}.read`,subject:null}]})},async registerTrads({locales:n}){return Promise.all(n.map(async e=>{try{const{default:i}=await o(Object.assign({}),`./translations/${e}.json`,3);return{data:i,locale:e}}catch{return{data:{},locale:e}}}))}};exports.PLUGIN_ID=t;exports.default=u;

package/dist/admin/index.mjs

@@ -0,0 +1,43 @@
+import { Graph as s } from "@strapi/icons";
+const o = (n, e, i) => {
+  const r = n[e];
+  return r ? typeof r == "function" ? r() : Promise.resolve(r) : new Promise((u, a) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      a.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + e + (e.split("/").length !== i ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+}, t = "blueprint", c = {
+  register(n) {
+    n.registerPlugin({ id: t, name: t, isReady: !0 }), n.addMenuLink({
+      to: `/plugins/${t}`,
+      icon: s,
+      intlLabel: { id: `${t}.menu.label`, defaultMessage: "Blueprint" },
+      Component: async () => {
+        const { DiagramPage: e } = await import("../_chunks/DiagramPage-F0OgJkQF.mjs");
+        return { default: e };
+      },
+      permissions: [{ action: `plugin::${t}.read`, subject: null }]
+    });
+  },
+  async registerTrads({ locales: n }) {
+    return Promise.all(
+      n.map(async (e) => {
+        try {
+          const { default: i } = await o(/* @__PURE__ */ Object.assign({}), `./translations/${e}.json`, 3);
+          return { data: i, locale: e };
+        } catch {
+          return { data: {}, locale: e };
+        }
+      })
+    );
+  }
+};
+export {
+  t as PLUGIN_ID,
+  c as default
+};

package/dist/admin/src/api.d.ts

@@ -0,0 +1,50 @@
+export interface DiagramOptions {
+    /** Strapi's and other plugins' content types. */
+    foreign: boolean;
+    /** Components and dynamic zones. */
+    components: boolean;
+    /** `createdAt` and the rest of Strapi's bookkeeping. */
+    defaultFields: boolean;
+    /** Top-to-bottom, or left-to-right. */
+    direction: 'TB' | 'LR';
+    exclude: string[];
+}
+export declare const DEFAULT_OPTIONS: DiagramOptions;
+export interface DiagramResponse {
+    svg: string;
+    width: number;
+    height: number;
+    counts: {
+        nodes: number;
+        edges: number;
+        components: number;
+    };
+}
+export interface CatalogueEntry {
+    uid: string;
+    label: string;
+    kind: string;
+}
+export declare const routes: {
+    diagram: string;
+    contentTypes: string;
+};
+/** The options as the server's query string expects them. */
+export declare const toParams: (options: DiagramOptions) => Record<string, string>;
+/**
+ * The toolbar state, kept across visits.
+ *
+ * "Persist arrangement" is one of the open requests on both of the abandoned
+ * plugins this replaces. Re-picking the same four toggles on every visit is the
+ * kind of small friction that stops people using a tool they otherwise like.
+ */
+export declare const loadOptions: () => DiagramOptions;
+export declare const saveOptions: (options: DiagramOptions) => void;
+/**
+ * Hands the browser the SVG already on screen.
+ *
+ * Deliberately not a link to the server's download route: an admin route needs
+ * the session's Authorization header, which a plain navigation cannot send. The
+ * string is already here, and it is the same string the server would return.
+ */
+export declare const downloadSvg: (svg: string, filename?: string) => void;

package/dist/admin/src/components/Canvas.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+interface View {
+    x: number;
+    y: number;
+    scale: number;
+}
+/**
+ * The view that shows the whole diagram, centred.
+ *
+ * A schema of any size is bigger than the panel, so opening at 1:1 in the
+ * top-left corner shows a corner of one box and reads as broken. Never zooms
+ * *in* past 1:1 — a two-box schema blown up to fill the screen looks like a
+ * mistake too.
+ */
+export declare const fitView: (content: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, padding?: number) => View;
+/**
+ * Pan and zoom over a diagram the server drew.
+ *
+ * The whole of the interactivity, in one file and with no graph library. That
+ * is the point: every plugin this replaces pulled in a React canvas library to
+ * get dragging, and then broke when React, styled-components or Strapi moved
+ * under it. Panning is a translate, zooming is a scale about the pointer, and
+ * clicking a box is one delegated listener reading the `data-uid` the renderer
+ * already puts on every box.
+ */
+export declare const Canvas: ({ svg, onOpen, view, onViewChange, fitTo, refit, }: {
+    svg: string;
+    onOpen: (uid: string) => void;
+    view: View;
+    onViewChange: (view: View) => void;
+    /** Diagram extent. When it changes, the view is fitted to it. */
+    fitTo: {
+        width: number;
+        height: number;
+    };
+    /** Bump to refit on demand — what the "Reset view" button changes. */
+    refit: number;
+}) => React.JSX.Element;
+export declare const INITIAL_VIEW: View;
+export type { View };

package/dist/admin/src/index.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    register(app: any): void;
+    registerTrads({ locales }: {
+        locales: string[];
+    }): Promise<{
+        data: any;
+        locale: string;
+    }[]>;
+};
+export default _default;
+export { PLUGIN_ID } from './pluginId';

package/dist/admin/src/pages/DiagramPage.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const DiagramPage: () => React.JSX.Element;
+export default DiagramPage;

package/dist/admin/src/pluginId.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The plugin id. It appears in route paths, permission names and the admin
+ * panel's URL, so changing it later breaks installs rather than merely renaming
+ * a thing.
+ */
+export declare const PLUGIN_ID = "blueprint";